@mittwald/flow-react-components 0.2.0-alpha.33 → 0.2.0-alpha.35

package/dist/js/components/Align/Align.mjs

@@ -15,7 +15,12 @@ const Align = flowComponent("Align", (props) => {
     Button: { className: styles.button },
     Avatar: { className: styles.avatar, size: "m" },
     CopyButton: { size: "s", className: styles.copyButton },
-    Icon: { size: "s", className: styles.icon }
+    Icon: { size: "s", className: styles.icon },
+    ContextualHelpTrigger: {
+      Button: {
+        className: styles.contextualHelpTriggerButton
+      }
+    }
   };
   return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx("div", { className: rootClassName, children }) });
 });

package/dist/js/components/Align/Align.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Align.mjs","sources":["../../../../src/components/Align/Align.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./Align.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport PropsContextProvider from \"@/lib/propsContext/PropsContextProvider\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface AlignProps\n  extends PropsWithChildren,\n    PropsWithClassName,\n    FlowComponentProps {}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const Align = flowComponent(\"Align\", (props) => {\n  const { children, className } = props;\n\n  const rootClassName = clsx(styles.align, className);\n\n  const propsContext: PropsContext = {\n    Text: { className: styles.text },\n    Button: { className: styles.button },\n    Avatar: { className: styles.avatar, size: \"m\" },\n    CopyButton: { size: \"s\", className: styles.copyButton },\n    Icon: { size: \"s\", className: styles.icon },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <div className={rootClassName}>{children}</div>\n    </PropsContextProvider>\n  );\n});\n\nexport default Align;\n"],"names":[],"mappings":";;;;;;;AAmBO,MAAM,KAAQ,GAAA,aAAA,CAAc,OAAS,EAAA,CAAC,KAAU,KAAA;AACrD,EAAM,MAAA,EAAE,QAAU,EAAA,SAAA,EAAc,GAAA,KAAA;AAEhC,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,MAAO,CAAA,KAAA,EAAO,SAAS,CAAA;AAElD,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,IAAM,EAAA,EAAE,SAAW,EAAA,MAAA,CAAO,IAAK,EAAA;AAAA,IAC/B,MAAQ,EAAA,EAAE,SAAW,EAAA,MAAA,CAAO,MAAO,EAAA;AAAA,IACnC,QAAQ,EAAE,SAAA,EAAW,MAAO,CAAA,MAAA,EAAQ,MAAM,GAAI,EAAA;AAAA,IAC9C,YAAY,EAAE,IAAA,EAAM,GAAK,EAAA,SAAA,EAAW,OAAO,UAAW,EAAA;AAAA,IACtD,MAAM,EAAE,IAAA,EAAM,GAAK,EAAA,SAAA,EAAW,OAAO,IAAK;AAAA,GAC5C;AAEA,EACE,uBAAA,GAAA,CAAC,wBAAqB,KAAO,EAAA,YAAA,EAC3B,8BAAC,KAAI,EAAA,EAAA,SAAA,EAAW,aAAgB,EAAA,QAAA,EAAS,CAC3C,EAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Align.mjs","sources":["../../../../src/components/Align/Align.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./Align.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport PropsContextProvider from \"@/lib/propsContext/PropsContextProvider\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface AlignProps\n  extends PropsWithChildren,\n    PropsWithClassName,\n    FlowComponentProps {}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const Align = flowComponent(\"Align\", (props) => {\n  const { children, className } = props;\n\n  const rootClassName = clsx(styles.align, className);\n\n  const propsContext: PropsContext = {\n    Text: { className: styles.text },\n    Button: { className: styles.button },\n    Avatar: { className: styles.avatar, size: \"m\" },\n    CopyButton: { size: \"s\", className: styles.copyButton },\n    Icon: { size: \"s\", className: styles.icon },\n    ContextualHelpTrigger: {\n      Button: {\n        className: styles.contextualHelpTriggerButton,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <div className={rootClassName}>{children}</div>\n    </PropsContextProvider>\n  );\n});\n\nexport default Align;\n"],"names":[],"mappings":";;;;;;;AAmBO,MAAM,KAAQ,GAAA,aAAA,CAAc,OAAS,EAAA,CAAC,KAAU,KAAA;AACrD,EAAM,MAAA,EAAE,QAAU,EAAA,SAAA,EAAc,GAAA,KAAA;AAEhC,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,MAAO,CAAA,KAAA,EAAO,SAAS,CAAA;AAElD,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,IAAM,EAAA,EAAE,SAAW,EAAA,MAAA,CAAO,IAAK,EAAA;AAAA,IAC/B,MAAQ,EAAA,EAAE,SAAW,EAAA,MAAA,CAAO,MAAO,EAAA;AAAA,IACnC,QAAQ,EAAE,SAAA,EAAW,MAAO,CAAA,MAAA,EAAQ,MAAM,GAAI,EAAA;AAAA,IAC9C,YAAY,EAAE,IAAA,EAAM,GAAK,EAAA,SAAA,EAAW,OAAO,UAAW,EAAA;AAAA,IACtD,MAAM,EAAE,IAAA,EAAM,GAAK,EAAA,SAAA,EAAW,OAAO,IAAK,EAAA;AAAA,IAC1C,qBAAuB,EAAA;AAAA,MACrB,MAAQ,EAAA;AAAA,QACN,WAAW,MAAO,CAAA;AAAA;AACpB;AACF,GACF;AAEA,EACE,uBAAA,GAAA,CAAC,wBAAqB,KAAO,EAAA,YAAA,EAC3B,8BAAC,KAAI,EAAA,EAAA,SAAA,EAAW,aAAgB,EAAA,QAAA,EAAS,CAC3C,EAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist/js/components/Align/Align.module.scss.mjs

@@ -5,6 +5,7 @@ const avatar = "flow--align--avatar";
 const text = "flow--align--text";
 const button = "flow--align--button";
 const copyButton = "flow--align--copy-button";
+const contextualHelpTriggerButton = "flow--align--contextual-help-trigger-button";
 const icon = "flow--align--icon";
 const styles = {
 	align: align,
@@ -12,8 +13,9 @@ const styles = {
 	text: text,
 	button: button,
 	copyButton: copyButton,
+	contextualHelpTriggerButton: contextualHelpTriggerButton,
 	icon: icon
 };
 
-export { align, avatar, button, copyButton, styles as default, icon, text };
+export { align, avatar, button, contextualHelpTriggerButton, copyButton, styles as default, icon, text };
 //# sourceMappingURL=Align.module.scss.mjs.map

package/dist/js/components/Align/Align.module.scss.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Align.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Align.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

package/dist/js/components/FileCard/components/DeleteButton/DeleteButton.mjs

@@ -25,7 +25,6 @@ const DeleteButton = (props) => {
     {
       className: styles.deleteButton,
       "aria-label": stringFormatter.format(`fileCard.delete`),
-      size: "s",
       variant: "plain",
       color: "secondary",
       onPress: onDelete,

package/dist/js/components/FileCard/components/DeleteButton/DeleteButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DeleteButton.mjs","sources":["../../../../../../src/components/FileCard/components/DeleteButton/DeleteButton.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport { Button } from \"@/components/Button\";\nimport styles from \"@/components/FileCard/FileCard.module.scss\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport locales from \"../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\n\ninterface Props {\n  onDelete: () => void;\n}\n\nexport const DeleteButton: FC<Props> = (props) => {\n  const { onDelete } = props;\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  return (\n    <Button\n      className={styles.deleteButton}\n      aria-label={stringFormatter.format(`fileCard.delete`)}\n      size=\"s\"\n      variant=\"plain\"\n      color=\"secondary\"\n      onPress={onDelete}\n    >\n      <IconClose />\n    </Button>\n  );\n};\n\nexport default DeleteButton;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAYa,MAAA,YAAA,GAA0B,CAAC,KAAU,KAAA;AAChD,EAAM,MAAA,EAAE,UAAa,GAAA,KAAA;AACrB,EAAM,MAAA,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAO,CAAA,YAAA;AAAA,MAClB,YAAA,EAAY,eAAgB,CAAA,MAAA,CAAO,CAAiB,eAAA,CAAA,CAAA;AAAA,MACpD,IAAK,EAAA,GAAA;AAAA,MACL,OAAQ,EAAA,OAAA;AAAA,MACR,KAAM,EAAA,WAAA;AAAA,MACN,OAAS,EAAA,QAAA;AAAA,MAET,8BAAC,SAAU,EAAA,EAAA;AAAA;AAAA,GACb;AAEJ;;;;"}
+{"version":3,"file":"DeleteButton.mjs","sources":["../../../../../../src/components/FileCard/components/DeleteButton/DeleteButton.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport { Button } from \"@/components/Button\";\nimport styles from \"@/components/FileCard/FileCard.module.scss\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport locales from \"../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\n\ninterface Props {\n  onDelete: () => void;\n}\n\nexport const DeleteButton: FC<Props> = (props) => {\n  const { onDelete } = props;\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  return (\n    <Button\n      className={styles.deleteButton}\n      aria-label={stringFormatter.format(`fileCard.delete`)}\n      variant=\"plain\"\n      color=\"secondary\"\n      onPress={onDelete}\n    >\n      <IconClose />\n    </Button>\n  );\n};\n\nexport default DeleteButton;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAYa,MAAA,YAAA,GAA0B,CAAC,KAAU,KAAA;AAChD,EAAM,MAAA,EAAE,UAAa,GAAA,KAAA;AACrB,EAAM,MAAA,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAO,CAAA,YAAA;AAAA,MAClB,YAAA,EAAY,eAAgB,CAAA,MAAA,CAAO,CAAiB,eAAA,CAAA,CAAA;AAAA,MACpD,OAAQ,EAAA,OAAA;AAAA,MACR,KAAM,EAAA,WAAA;AAAA,MACN,OAAS,EAAA,QAAA;AAAA,MAET,8BAAC,SAAU,EAAA,EAAA;AAAA;AAAA,GACb;AAEJ;;;;"}

package/dist/js/components/Image/Image.mjs

@@ -1,17 +1,20 @@
 "use client"
 /* */
 import { jsx } from 'react/jsx-runtime';
-import 'react';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
 import '../../lib/propsContext/propsContext.mjs';
 import { ClearPropsContext } from '../../lib/propsContext/ClearPropsContext.mjs';
+import 'react';
 import '@react-aria/utils';
 import 'remeda';
 import 'dot-prop';
-import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import clsx from 'clsx';
+import styles from './Image.module.scss.mjs';
 
 const Image = flowComponent("Image", (props) => {
-  const { ref, ...rest } = props;
-  return /* @__PURE__ */ jsx(ClearPropsContext, { children: /* @__PURE__ */ jsx("img", { ...rest, ref }) });
+  const { className, withBorder, ...rest } = props;
+  const rootClassName = clsx(withBorder && styles.border, className);
+  return /* @__PURE__ */ jsx(ClearPropsContext, { children: /* @__PURE__ */ jsx("img", { className: rootClassName, ...rest }) });
 });
 
 export { Image, Image as default };

package/dist/js/components/Image/Image.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Image.mjs","sources":["../../../../src/components/Image/Image.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport React from \"react\";\nimport { ClearPropsContext } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface ImageProps extends ComponentProps<\"img\">, FlowComponentProps {}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const Image = flowComponent(\"Image\", (props) => {\n  const { ref, ...rest } = props;\n  return (\n    <ClearPropsContext>\n      <img {...rest} ref={ref} />\n    </ClearPropsContext>\n  );\n});\n\nexport default Image;\n"],"names":[],"mappings":";;;;;;;;;AAYO,MAAM,KAAQ,GAAA,aAAA,CAAc,OAAS,EAAA,CAAC,KAAU,KAAA;AACrD,EAAA,MAAM,EAAE,GAAA,EAAK,GAAG,IAAA,EAAS,GAAA,KAAA;AACzB,EAAA,2BACG,iBACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,SAAK,GAAG,IAAA,EAAM,KAAU,CAC3B,EAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Image.mjs","sources":["../../../../src/components/Image/Image.tsx"],"sourcesContent":["import type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { ClearPropsContext } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport type { ComponentProps } from \"react\";\nimport styles from \"./Image.module.scss\";\n\nexport interface ImageProps extends ComponentProps<\"img\">, FlowComponentProps {\n  /** Display the image with border and rounded edges */\n  withBorder?: boolean;\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const Image = flowComponent(\"Image\", (props) => {\n  const { className, withBorder, ...rest } = props;\n\n  const rootClassName = clsx(withBorder && styles.border, className);\n\n  return (\n    <ClearPropsContext>\n      <img className={rootClassName} {...rest} />\n    </ClearPropsContext>\n  );\n});\n\nexport default Image;\n"],"names":[],"mappings":";;;;;;;;;;;AAgBO,MAAM,KAAQ,GAAA,aAAA,CAAc,OAAS,EAAA,CAAC,KAAU,KAAA;AACrD,EAAA,MAAM,EAAE,SAAA,EAAW,UAAY,EAAA,GAAG,MAAS,GAAA,KAAA;AAE3C,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,UAAc,IAAA,MAAA,CAAO,QAAQ,SAAS,CAAA;AAEjE,EACE,uBAAA,GAAA,CAAC,qBACC,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAI,WAAW,aAAgB,EAAA,GAAG,MAAM,CAC3C,EAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist/js/components/Image/Image.module.scss.mjs

@@ -0,0 +1,9 @@
+"use client"
+/* */
+const border = "flow--image--border";
+const styles = {
+	border: border
+};
+
+export { border, styles as default };
+//# sourceMappingURL=Image.module.scss.mjs.map

package/dist/js/components/Image/Image.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/js/components/List/components/Footer/components/PaginationInfos/PaginationInfos.mjs

@@ -1,12 +1,11 @@
 "use client"
 /* */
 import { jsx } from 'react/jsx-runtime';
-import locales from '../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
-import { useLocalizedStringFormatter } from 'react-aria';
-import 'react';
 import { useList } from '../../../../hooks/useList.mjs';
 import SkeletonView from '../../../../../../views/SkeletonView.mjs';
 import TextView from '../../../../../../views/TextView.mjs';
+import { useLocalizedStringFormatter } from 'react-aria';
+import locales from '../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
 
 const PaginationInfos = (props) => {
   const stringFormatter = useLocalizedStringFormatter(locales);

package/dist/js/components/List/components/Footer/components/PaginationInfos/PaginationInfos.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationInfos.mjs","sources":["../../../../../../../../src/components/List/components/Footer/components/PaginationInfos/PaginationInfos.tsx"],"sourcesContent":["import locales from \"../../../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport type { TextProps } from \"@/components/Text\";\nimport type { FC } from \"react\";\nimport React from \"react\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport SkeletonView from \"@/views/SkeletonView\";\nimport TextView from \"@/views/TextView\";\n\nexport const PaginationInfos: FC<TextProps> = (props) => {\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const list = useList();\n  const pagination = list.batches;\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n  const isEmpty = list.useIsEmpty();\n\n  const totalItemsCount = pagination.getTotalItemsCount();\n  const visibleItemsCount = pagination.getVisibleItemsCount();\n\n  if (isEmpty) {\n    return null;\n  }\n\n  const text = isInitiallyLoading ? (\n    <SkeletonView width=\"200px\" />\n  ) : (\n    stringFormatter.format(\"list.paginationInfo\", {\n      visibleItemsCount,\n      totalItemsCount,\n    })\n  );\n\n  return <TextView {...props}>{text}</TextView>;\n};\n\nexport default PaginationInfos;\n"],"names":[],"mappings":";;;;;;;;AASa,MAAA,eAAA,GAAiC,CAAC,KAAU,KAAA;AACvD,EAAM,MAAA,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,OAAO,OAAQ,EAAA;AACrB,EAAA,MAAM,aAAa,IAAK,CAAA,OAAA;AACxB,EAAM,MAAA,kBAAA,GAAqB,IAAK,CAAA,MAAA,CAAO,qBAAsB,EAAA;AAC7D,EAAM,MAAA,OAAA,GAAU,KAAK,UAAW,EAAA;AAEhC,EAAM,MAAA,eAAA,GAAkB,WAAW,kBAAmB,EAAA;AACtD,EAAM,MAAA,iBAAA,GAAoB,WAAW,oBAAqB,EAAA;AAE1D,EAAA,IAAI,OAAS,EAAA;AACX,IAAO,OAAA,IAAA;AAAA;AAGT,EAAM,MAAA,IAAA,GAAO,qCACV,GAAA,CAAA,YAAA,EAAA,EAAa,OAAM,OAAQ,EAAA,CAAA,GAE5B,eAAgB,CAAA,MAAA,CAAO,qBAAuB,EAAA;AAAA,IAC5C,iBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAGH,EAAA,uBAAQ,GAAA,CAAA,QAAA,EAAA,EAAU,GAAG,KAAA,EAAQ,QAAK,EAAA,IAAA,EAAA,CAAA;AACpC;;;;"}
+{"version":3,"file":"PaginationInfos.mjs","sources":["../../../../../../../../src/components/List/components/Footer/components/PaginationInfos/PaginationInfos.tsx"],"sourcesContent":["import { useList } from \"@/components/List/hooks/useList\";\nimport type { TextProps } from \"@/components/Text\";\nimport SkeletonView from \"@/views/SkeletonView\";\nimport TextView from \"@/views/TextView\";\nimport type { FC } from \"react\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../../../locales/*.locale.json\";\n\nexport const PaginationInfos: FC<TextProps> = (props) => {\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const list = useList();\n  const pagination = list.batches;\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n  const isEmpty = list.useIsEmpty();\n\n  const totalItemsCount = pagination.getTotalItemsCount();\n  const visibleItemsCount = pagination.getVisibleItemsCount();\n\n  if (isEmpty) {\n    return null;\n  }\n\n  const text = isInitiallyLoading ? (\n    <SkeletonView width=\"200px\" />\n  ) : (\n    stringFormatter.format(\"list.paginationInfo\", {\n      visibleItemsCount,\n      totalItemsCount,\n    })\n  );\n\n  return <TextView {...props}>{text}</TextView>;\n};\n\nexport default PaginationInfos;\n"],"names":[],"mappings":";;;;;;;AAQa,MAAA,eAAA,GAAiC,CAAC,KAAU,KAAA;AACvD,EAAM,MAAA,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,OAAO,OAAQ,EAAA;AACrB,EAAA,MAAM,aAAa,IAAK,CAAA,OAAA;AACxB,EAAM,MAAA,kBAAA,GAAqB,IAAK,CAAA,MAAA,CAAO,qBAAsB,EAAA;AAC7D,EAAM,MAAA,OAAA,GAAU,KAAK,UAAW,EAAA;AAEhC,EAAM,MAAA,eAAA,GAAkB,WAAW,kBAAmB,EAAA;AACtD,EAAM,MAAA,iBAAA,GAAoB,WAAW,oBAAqB,EAAA;AAE1D,EAAA,IAAI,OAAS,EAAA;AACX,IAAO,OAAA,IAAA;AAAA;AAGT,EAAM,MAAA,IAAA,GAAO,qCACV,GAAA,CAAA,YAAA,EAAA,EAAa,OAAM,OAAQ,EAAA,CAAA,GAE5B,eAAgB,CAAA,MAAA,CAAO,qBAAuB,EAAA;AAAA,IAC5C,iBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAGH,EAAA,uBAAQ,GAAA,CAAA,QAAA,EAAA,EAAU,GAAG,KAAA,EAAQ,QAAK,EAAA,IAAA,EAAA,CAAA;AACpC;;;;"}

package/dist/js/components/List/components/Header/components/ViewModeMenu/ViewModeMenu.mjs

@@ -4,28 +4,26 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react';
 import locales from '../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
 import { useLocalizedStringFormatter } from 'react-aria';
+import 'react-aria-components';
 import 'clsx';
 import '../../../../../../lib/propsContext/propsContext.mjs';
 import '@react-aria/utils';
 import 'remeda';
 import 'dot-prop';
-import 'object-code';
-import 'react-children-utilities';
+import '@tabler/icons-react';
 import '@mittwald/react-tunnel';
 import '../../../../../../lib/slotContext/slotContext.mjs';
-import 'react-aria-components';
-import 'invariant';
-import '@tabler/icons-react';
 import '../../../../../../lib/viewComponentContext/viewComponentContext.mjs';
 import { IconView } from '../../../../../Icon/components/icons/IconView.mjs';
+import 'invariant';
 import ButtonView from '../../../../../../views/ButtonView.mjs';
-import { useList } from '../../../../hooks/useList.mjs';
 import { ContextMenu } from '../../../../../ContextMenu/ContextMenu.mjs';
 import { ContextMenuTrigger } from '../../../../../ContextMenu/components/ContextMenuTrigger/ContextMenuTrigger.mjs';
 import 'mobx';
 import '../../../../../../lib/controller/overlay/context.mjs';
 import '../../../../../Action/context.mjs';
 import '../../../../../Action/models/ActionStateContext.mjs';
+import { useList } from '../../../../hooks/useList.mjs';
 import '../../../../listContext.mjs';
 import MenuItemView from '../../../../../../views/MenuItemView.mjs';
 import TextView from '../../../../../../views/TextView.mjs';
@@ -34,6 +32,8 @@ import '@chakra-ui/live-region';
 import SectionView from '../../../../../../views/SectionView.mjs';
 import HeadingView from '../../../../../../views/HeadingView.mjs';
 import '../../../../model/List.mjs';
+import 'object-code';
+import 'react-children-utilities';
 
 const ViewModeMenu = () => {
   const stringFormatter = useLocalizedStringFormatter(locales);

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

@@ -1,36 +1,35 @@
 "use client"
 /* */
 import { jsx } from 'react/jsx-runtime';
-import 'react';
+import 'react-aria-components';
+import { EmptyView } from '../../views/EmptyView/EmptyView.mjs';
 import clsx from 'clsx';
+import 'react';
+import '@mittwald/react-tunnel';
+import '../../../../lib/viewComponentContext/viewComponentContext.mjs';
 import '../../../../lib/propsContext/propsContext.mjs';
 import '@react-aria/utils';
 import 'remeda';
 import 'dot-prop';
-import 'object-code';
-import 'react-children-utilities';
-import '@mittwald/react-tunnel';
-import '../../../../lib/slotContext/slotContext.mjs';
-import 'react-aria-components';
-import 'invariant';
-import { Item } from './components/Item/Item.mjs';
-import { useList } from '../../hooks/useList.mjs';
-import { EmptyView } from '../../views/EmptyView/EmptyView.mjs';
-import '../../../../lib/viewComponentContext/viewComponentContext.mjs';
 import 'react-aria';
 import '@tabler/icons-react';
+import '../../../../lib/slotContext/slotContext.mjs';
+import 'invariant';
 import '@chakra-ui/live-region';
 import 'mobx';
 import '../../../../lib/controller/overlay/context.mjs';
 import '../../../Action/context.mjs';
 import '../../../Action/models/ActionStateContext.mjs';
+import { useList } from '../../hooks/useList.mjs';
 import '../../listContext.mjs';
 import '../Header/components/ActiveFilters/ActiveFilters.mjs';
 import DivView from '../../../../views/DivView.mjs';
 import '../../model/List.mjs';
-import FallbackItemsView from '../../../../views/FallbackItemsView.mjs';
+import { Item } from './components/Item/Item.mjs';
 import ItemsGridListView from '../../../../views/ItemsGridListView.mjs';
 import styles from './Items.module.scss.mjs';
+import { FallbackItems } from './components/FallbackItems/FallbackItems.mjs';
+import 'react-children-utilities';
 
 const Items = () => {
   const list = useList();
@@ -55,7 +54,7 @@ const Items = () => {
       style: {
         gridTemplateColumns: `repeat(auto-fill, minmax(${list.itemView.tileMaxWidth}px, 1fr))`
       },
-      children: isInitiallyLoading ? /* @__PURE__ */ jsx(FallbackItemsView, {}) : items
+      children: isInitiallyLoading ? /* @__PURE__ */ jsx(FallbackItems, {}) : items
     }
   ) });
 };

package/dist/js/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 FallbackItemsView from \"@/views/FallbackItemsView\";\nimport ItemsGridListView from \"@/views/ItemsGridListView\";\nimport clsx from \"clsx\";\nimport type { FC } from \"react\";\nimport styles from \"./Items.module.scss\";\n\nexport const Items: FC = () => {\n  const list = useList();\n  const tiles = list.viewMode === \"tiles\";\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        style={{\n          gridTemplateColumns: `repeat(auto-fill, minmax(${list.itemView.tileMaxWidth}px, 1fr))`,\n        }}\n      >\n        {isInitiallyLoading ? <FallbackItemsView /> : items}\n      </ItemsGridListView>\n    </DivView>\n  );\n};\n\nexport default Items;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,MAAM,QAAY,MAAM;AAC7B,EAAA,MAAM,OAAO,OAAQ,EAAA;AACrB,EAAM,MAAA,KAAA,GAAQ,KAAK,QAAa,KAAA,OAAA;AAChC,EAAM,MAAA,SAAA,GAAY,IAAK,CAAA,MAAA,CAAO,YAAa,EAAA;AAC3C,EAAM,MAAA,kBAAA,GAAqB,IAAK,CAAA,MAAA,CAAO,qBAAsB,EAAA;AAE7D,EAAI,IAAA,CAAC,KAAK,QAAU,EAAA;AAClB,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,MAAM,QAAQ,IAAK,CAAA,KAAA,CAAM,OAAQ,CAAA,GAAA,CAAI,CAAC,IACpC,qBAAA,GAAA,CAAC,IAAmB,EAAA,EAAA,IAAA,EAAM,KAAK,IAAM,EAAA,EAAA,EAAI,KAAK,EAAnC,EAAA,EAAA,IAAA,CAAK,EAAkC,CACnD,CAAA;AAED,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,KAAA;AAAA,IACP,aAAa,MAAO,CAAA,SAAA;AAAA,IACpB,SAAS,MAAO,CAAA;AAAA,GAClB;AAEA,EAAA,uBACG,GAAA,CAAA,OAAA,EAAA,EAAQ,aAAa,EAAA,kBAAA,EAAoB,aAAW,SACnD,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,aAAA;AAAA,MACV,GAAG,IAAK,CAAA,cAAA;AAAA,MACT,gBAAA,EAAkB,sBAAM,GAAA,CAAC,SAAU,EAAA,EAAA,CAAA;AAAA,MACnC,KAAO,EAAA;AAAA,QACL,mBAAqB,EAAA,CAAA,yBAAA,EAA4B,IAAK,CAAA,QAAA,CAAS,YAAY,CAAA,SAAA;AAAA,OAC7E;AAAA,MAEC,QAAA,EAAA,kBAAA,mBAAsB,GAAA,CAAA,iBAAA,EAAA,EAAkB,CAAK,GAAA;AAAA;AAAA,GAElD,EAAA,CAAA;AAEJ;;;;"}
+{"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 === \"tiles\";\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        style={{\n          gridTemplateColumns: `repeat(auto-fill, minmax(${list.itemView.tileMaxWidth}px, 1fr))`,\n        }}\n      >\n        {isInitiallyLoading ? <FallbackItems /> : items}\n      </ItemsGridListView>\n    </DivView>\n  );\n};\n\nexport default Items;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,MAAM,QAAY,MAAM;AAC7B,EAAA,MAAM,OAAO,OAAQ,EAAA;AACrB,EAAM,MAAA,KAAA,GAAQ,KAAK,QAAa,KAAA,OAAA;AAChC,EAAM,MAAA,SAAA,GAAY,IAAK,CAAA,MAAA,CAAO,YAAa,EAAA;AAC3C,EAAM,MAAA,kBAAA,GAAqB,IAAK,CAAA,MAAA,CAAO,qBAAsB,EAAA;AAE7D,EAAI,IAAA,CAAC,KAAK,QAAU,EAAA;AAClB,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,MAAM,QAAQ,IAAK,CAAA,KAAA,CAAM,OAAQ,CAAA,GAAA,CAAI,CAAC,IACpC,qBAAA,GAAA,CAAC,IAAmB,EAAA,EAAA,IAAA,EAAM,KAAK,IAAM,EAAA,EAAA,EAAI,KAAK,EAAnC,EAAA,EAAA,IAAA,CAAK,EAAkC,CACnD,CAAA;AAED,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,KAAA;AAAA,IACP,aAAa,MAAO,CAAA,SAAA;AAAA,IACpB,SAAS,MAAO,CAAA;AAAA,GAClB;AAEA,EAAA,uBACG,GAAA,CAAA,OAAA,EAAA,EAAQ,aAAa,EAAA,kBAAA,EAAoB,aAAW,SACnD,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,aAAA;AAAA,MACV,GAAG,IAAK,CAAA,cAAA;AAAA,MACT,gBAAA,EAAkB,sBAAM,GAAA,CAAC,SAAU,EAAA,EAAA,CAAA;AAAA,MACnC,KAAO,EAAA;AAAA,QACL,mBAAqB,EAAA,CAAA,yBAAA,EAA4B,IAAK,CAAA,QAAA,CAAS,YAAY,CAAA,SAAA;AAAA,OAC7E;AAAA,MAEC,QAAA,EAAA,kBAAA,mBAAsB,GAAA,CAAA,aAAA,EAAA,EAAc,CAAK,GAAA;AAAA;AAAA,GAE9C,EAAA,CAAA;AAEJ;;;;"}

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

@@ -1,14 +1,14 @@
 "use client"
 /* */
 import { jsx } from 'react/jsx-runtime';
-import { SkeletonView } from '../Item/components/SkeletonView/SkeletonView.mjs';
 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?.fallback ?? /* @__PURE__ */ jsx(SkeletonView, {});
+  const fallback = list.itemView?.fallback ?? /* @__PURE__ */ jsx(ListItemSkeletonView, { viewMode: list.viewMode });
   return Array.from(Array(5)).map((_, i) => /* @__PURE__ */ jsx(ItemContainer, { id: i, data: i, children: cloneElement(fallback) }, i));
 };
 

package/dist/js/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 { SkeletonView } from \"@/components/List/components/Items/components/Item/components/SkeletonView/SkeletonView\";\nimport { 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\";\n\nexport type FallbackItemsProps = never;\n\n/** @flr-generate all */\nexport const FallbackItems: FC<FallbackItemsProps> = () => {\n  const list = useList();\n  const fallback = list.itemView?.fallback ?? <SkeletonView />;\n\n  return Array.from(Array(5)).map((_, i) => (\n    <ItemContainer id={i} data={i as never} key={i}>\n      {cloneElement(fallback)}\n    </ItemContainer>\n  ));\n};\n"],"names":[],"mappings":";;;;;;AASO,MAAM,gBAAwC,MAAM;AACzD,EAAA,MAAM,OAAO,OAAQ,EAAA;AACrB,EAAA,MAAM,QAAW,GAAA,IAAA,CAAK,QAAU,EAAA,QAAA,wBAAa,YAAa,EAAA,EAAA,CAAA;AAE1D,EAAO,OAAA,KAAA,CAAM,KAAK,KAAM,CAAA,CAAC,CAAC,CAAE,CAAA,GAAA,CAAI,CAAC,CAAG,EAAA,CAAA,yBACjC,aAAc,EAAA,EAAA,EAAA,EAAI,GAAG,IAAM,EAAA,CAAA,EACzB,uBAAa,QAAQ,CAAA,EAAA,EADqB,CAE7C,CACD,CAAA;AACH;;;;"}
+{"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?.fallback ?? (\n    <ListItemSkeletonView viewMode={list.viewMode} />\n  );\n\n  return Array.from(Array(5)).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,OAAQ,EAAA;AACrB,EAAM,MAAA,QAAA,GAAW,KAAK,QAAU,EAAA,QAAA,wBAC7B,oBAAqB,EAAA,EAAA,QAAA,EAAU,KAAK,QAAU,EAAA,CAAA;AAGjD,EAAO,OAAA,KAAA,CAAM,KAAK,KAAM,CAAA,CAAC,CAAC,CAAE,CAAA,GAAA,CAAI,CAAC,CAAG,EAAA,CAAA,yBACjC,aAAc,EAAA,EAAA,EAAA,EAAI,GAAG,IAAM,EAAA,CAAA,EACzB,uBAAa,QAAQ,CAAA,EAAA,EADqB,CAE7C,CACD,CAAA;AACH;;;;"}

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

@@ -4,9 +4,9 @@ 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 SkeletonViewView from '../../../../../../views/SkeletonViewView.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;
@@ -28,7 +28,7 @@ const Item = (props) => {
       hasAction,
       isTile: list.viewMode === "tiles",
       ...gridItemProps,
-      children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(SkeletonViewView, {}), children })
+      children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ListItemSkeletonView, { viewMode: list.viewMode }), children })
     }
   );
 };

package/dist/js/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 SkeletonViewView from \"@/views/SkeletonViewView\";\nimport type { FC, PropsWithChildren } from \"react\";\nimport { Suspense } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport styles from \"./Item.module.scss\";\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      hasAction={hasAction}\n      isTile={list.viewMode === \"tiles\"}\n      {...gridItemProps}\n    >\n      <Suspense fallback={<SkeletonViewView />}>{children}</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 === \"tiles\"}\n    >\n      {props.children}\n    </ItemsGridListItemView>\n  );\n};\n\nexport default Item;\n"],"names":[],"mappings":";;;;;;;;AAca,MAAA,IAAA,GAAO,CAAC,KAAiB,KAAA;AACpC,EAAM,MAAA,EAAE,EAAI,EAAA,IAAA,EAAS,GAAA,KAAA;AACrB,EAAA,MAAM,OAAO,OAAQ,EAAA;AAErB,EAAA,MAAM,WAAW,IAAK,CAAA,QAAA;AAEtB,EAAA,MAAM,EAAE,aAAA,EAAe,QAAS,EAAA,GAAI,iBAAiB,KAAK,CAAA;AAE1D,EAAA,IAAI,CAAC,QAAU,EAAA;AACb,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,MAAM,YAAY,QAAS,CAAA,SAAA,GAAY,QAAS,CAAA,SAAA,CAAU,IAAI,CAAI,GAAA,MAAA;AAClE,EAAA,MAAM,OAAO,QAAS,CAAA,IAAA,GAAO,QAAS,CAAA,IAAA,CAAK,IAAI,CAAI,GAAA,MAAA;AACnD,EAAA,MAAM,YAAY,CAAC,CAAC,aAAc,CAAA,QAAA,IAAY,CAAC,CAAC,IAAA;AAEhD,EACE,uBAAA,GAAA;AAAA,IAAC,qBAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,SAAA;AAAA,MACA,IAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA,EAAQ,KAAK,QAAa,KAAA,OAAA;AAAA,MACzB,GAAG,aAAA;AAAA,MAEJ,8BAAC,QAAS,EAAA,EAAA,QAAA,kBAAW,GAAA,CAAA,gBAAA,EAAA,EAAiB,GAAK,QAAS,EAAA;AAAA;AAAA,GACtD;AAEJ;AAEa,MAAA,aAAA,GAA2B,CAAC,KAAU,KAAA;AACjD,EAAA,MAAM,OAAO,OAAQ,EAAA;AACrB,EACE,uBAAA,GAAA;AAAA,IAAC,qBAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,GAAA;AAAA,MACV,WAAW,MAAO,CAAA,IAAA;AAAA,MAClB,MAAA,EAAQ,KAAK,QAAa,KAAA,OAAA;AAAA,MAEzB,QAAM,EAAA,KAAA,CAAA;AAAA;AAAA,GACT;AAEJ;;;;"}
+{"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      hasAction={hasAction}\n      isTile={list.viewMode === \"tiles\"}\n      {...gridItemProps}\n    >\n      <Suspense fallback={<ListItemSkeletonView viewMode={list.viewMode} />}>\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 === \"tiles\"}\n    >\n      {props.children}\n    </ItemsGridListItemView>\n  );\n};\n\nexport default Item;\n"],"names":[],"mappings":";;;;;;;;AAca,MAAA,IAAA,GAAO,CAAC,KAAiB,KAAA;AACpC,EAAM,MAAA,EAAE,EAAI,EAAA,IAAA,EAAS,GAAA,KAAA;AACrB,EAAA,MAAM,OAAO,OAAQ,EAAA;AAErB,EAAA,MAAM,WAAW,IAAK,CAAA,QAAA;AAEtB,EAAA,MAAM,EAAE,aAAA,EAAe,QAAS,EAAA,GAAI,iBAAiB,KAAK,CAAA;AAE1D,EAAA,IAAI,CAAC,QAAU,EAAA;AACb,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,MAAM,YAAY,QAAS,CAAA,SAAA,GAAY,QAAS,CAAA,SAAA,CAAU,IAAI,CAAI,GAAA,MAAA;AAClE,EAAA,MAAM,OAAO,QAAS,CAAA,IAAA,GAAO,QAAS,CAAA,IAAA,CAAK,IAAI,CAAI,GAAA,MAAA;AACnD,EAAA,MAAM,YAAY,CAAC,CAAC,aAAc,CAAA,QAAA,IAAY,CAAC,CAAC,IAAA;AAEhD,EACE,uBAAA,GAAA;AAAA,IAAC,qBAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,SAAA;AAAA,MACA,IAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA,EAAQ,KAAK,QAAa,KAAA,OAAA;AAAA,MACzB,GAAG,aAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,YAAS,QAAU,kBAAA,GAAA,CAAC,wBAAqB,QAAU,EAAA,IAAA,CAAK,QAAU,EAAA,CAAA,EAChE,QACH,EAAA;AAAA;AAAA,GACF;AAEJ;AAEa,MAAA,aAAA,GAA2B,CAAC,KAAU,KAAA;AACjD,EAAA,MAAM,OAAO,OAAQ,EAAA;AACrB,EACE,uBAAA,GAAA;AAAA,IAAC,qBAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,GAAA;AAAA,MACV,WAAW,MAAO,CAAA,IAAA;AAAA,MAClB,MAAA,EAAQ,KAAK,QAAa,KAAA,OAAA;AAAA,MAEzB,QAAM,EAAA,KAAA,CAAA;AAAA;AAAA,GACT;AAEJ;;;;"}

package/dist/js/components/List/components/Items/components/Item/components/ListItemSkeletonView/ListItemSkeletonView.mjs

@@ -0,0 +1,27 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import AvatarView from '../../../../../../../../views/AvatarView.mjs';
+import FragmentView from '../../../../../../../../views/FragmentView.mjs';
+import HeadingView from '../../../../../../../../views/HeadingView.mjs';
+import ListItemViewContentView from '../../../../../../../../views/ListItemViewContentView.mjs';
+import SkeletonTextView from '../../../../../../../../views/SkeletonTextView.mjs';
+import SkeletonView from '../../../../../../../../views/SkeletonView.mjs';
+import TextView from '../../../../../../../../views/TextView.mjs';
+
+const ListItemSkeletonView = (props) => {
+  const { viewMode } = props;
+  const showTiles = viewMode === "tiles";
+  return /* @__PURE__ */ jsx(
+    ListItemViewContentView,
+    {
+      viewMode,
+      title: /* @__PURE__ */ jsx(FragmentView, { children: /* @__PURE__ */ jsx(HeadingView, { children: /* @__PURE__ */ jsx(SkeletonTextView, { width: "200px" }) }) }),
+      avatar: showTiles && /* @__PURE__ */ jsx(FragmentView, { children: /* @__PURE__ */ jsx(AvatarView, { children: /* @__PURE__ */ jsx(SkeletonView, { style: { aspectRatio: 16 / 9 } }) }) }),
+      subTitle: /* @__PURE__ */ jsx(FragmentView, { children: /* @__PURE__ */ jsx(TextView, { children: /* @__PURE__ */ jsx(SkeletonTextView, { width: "300px" }) }) })
+    }
+  );
+};
+
+export { ListItemSkeletonView };
+//# sourceMappingURL=ListItemSkeletonView.mjs.map

package/dist/js/components/List/components/Items/components/Item/components/ListItemSkeletonView/ListItemSkeletonView.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemSkeletonView.mjs","sources":["../../../../../../../../../../src/components/List/components/Items/components/Item/components/ListItemSkeletonView/ListItemSkeletonView.tsx"],"sourcesContent":["import type { ListViewMode } from \"@/components/List/model/types\";\nimport AvatarView from \"@/views/AvatarView\";\nimport FragmentView from \"@/views/FragmentView\";\nimport HeadingView from \"@/views/HeadingView\";\nimport ListItemViewContentView from \"@/views/ListItemViewContentView\";\nimport SkeletonTextView from \"@/views/SkeletonTextView\";\nimport SkeletonView from \"@/views/SkeletonView\";\nimport TextView from \"@/views/TextView\";\nimport type { FC } from \"react\";\n\nexport interface ListItemSkeletonViewProps {\n  viewMode: ListViewMode;\n}\n\nexport const ListItemSkeletonView: FC<ListItemSkeletonViewProps> = (props) => {\n  const { viewMode } = props;\n\n  const showTiles = viewMode === \"tiles\";\n\n  return (\n    <ListItemViewContentView\n      viewMode={viewMode}\n      title={\n        <FragmentView>\n          <HeadingView>\n            <SkeletonTextView width=\"200px\" />\n          </HeadingView>\n        </FragmentView>\n      }\n      avatar={\n        showTiles && (\n          <FragmentView>\n            <AvatarView>\n              <SkeletonView style={{ aspectRatio: 16 / 9 }} />\n            </AvatarView>\n          </FragmentView>\n        )\n      }\n      subTitle={\n        <FragmentView>\n          <TextView>\n            <SkeletonTextView width=\"300px\" />\n          </TextView>\n        </FragmentView>\n      }\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAca,MAAA,oBAAA,GAAsD,CAAC,KAAU,KAAA;AAC5E,EAAM,MAAA,EAAE,UAAa,GAAA,KAAA;AAErB,EAAA,MAAM,YAAY,QAAa,KAAA,OAAA;AAE/B,EACE,uBAAA,GAAA;AAAA,IAAC,uBAAA;AAAA,IAAA;AAAA,MACC,QAAA;AAAA,MACA,KAAA,kBACG,GAAA,CAAA,YAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,WAAA,EAAA,EACC,8BAAC,gBAAiB,EAAA,EAAA,KAAA,EAAM,OAAQ,EAAA,CAAA,EAClC,CACF,EAAA,CAAA;AAAA,MAEF,MACE,EAAA,SAAA,oBACG,GAAA,CAAA,YAAA,EAAA,EACC,8BAAC,UACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,YAAa,EAAA,EAAA,KAAA,EAAO,EAAE,WAAa,EAAA,EAAA,GAAK,CAAE,EAAA,EAAG,GAChD,CACF,EAAA,CAAA;AAAA,MAGJ,QAAA,kBACG,GAAA,CAAA,YAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA,EACC,8BAAC,gBAAiB,EAAA,EAAA,KAAA,EAAM,OAAQ,EAAA,CAAA,EAClC,CACF,EAAA;AAAA;AAAA,GAEJ;AAEJ;;;;"}

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

@@ -2,31 +2,31 @@
 /* */
 import { jsx } from 'react/jsx-runtime';
 import { useState, useId, useRef, useEffect } from 'react';
+import 'react-aria-components';
 import 'clsx';
 import '../../../../../../../lib/propsContext/propsContext.mjs';
 import { PropsContextProvider } from '../../../../../../../lib/propsContext/PropsContextProvider.mjs';
 import { dynamic } from '../../../../../../../lib/propsContext/dynamicProps/dynamic.mjs';
-import 'object-code';
-import 'react-children-utilities';
+import '@tabler/icons-react';
 import '@mittwald/react-tunnel';
 import '../../../../../../../lib/slotContext/slotContext.mjs';
 import '@react-aria/utils';
 import 'remeda';
-import 'react-aria-components';
-import 'invariant';
-import { AccordionButton } from '../components/AccordionButton.mjs';
-import { useList } from '../../../../../hooks/useList.mjs';
 import '../../../../../../../lib/viewComponentContext/viewComponentContext.mjs';
-import '@tabler/icons-react';
+import 'invariant';
 import 'react-aria';
 import '@chakra-ui/live-region';
 import 'mobx';
 import '../../../../../../../lib/controller/overlay/context.mjs';
 import '../../../../../../Action/context.mjs';
 import '../../../../../../Action/models/ActionStateContext.mjs';
+import { useList } from '../../../../../hooks/useList.mjs';
 import '../../../../../listContext.mjs';
 import '../../../../Header/components/ActiveFilters/ActiveFilters.mjs';
 import '../../../../../model/List.mjs';
+import { AccordionButton } from '../components/AccordionButton.mjs';
+import 'object-code';
+import 'react-children-utilities';
 
 const useGridItemProps = (props) => {
   const { data, children: childrenFromProps } = props;

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

@@ -9,26 +9,26 @@ import FragmentView from '../../../../views/FragmentView.mjs';
 import '../../../../lib/propsContext/propsContext.mjs';
 import { PropsContextProvider } from '../../../../lib/propsContext/PropsContextProvider.mjs';
 import { OptionsButton } from '../Items/components/Item/components/OptionsButton/OptionsButton.mjs';
+import 'react-aria-components';
 import 'clsx';
-import 'object-code';
-import 'react-children-utilities';
+import '@tabler/icons-react';
 import '../../../../lib/slotContext/slotContext.mjs';
 import '@react-aria/utils';
 import 'remeda';
-import 'react-aria-components';
-import 'invariant';
-import '@tabler/icons-react';
 import '../../../../lib/viewComponentContext/viewComponentContext.mjs';
+import 'invariant';
 import 'react-aria';
-import '@chakra-ui/live-region';
 import { useList } from '../../hooks/useList.mjs';
 import '../../listContext.mjs';
 import 'mobx';
 import '../../../../lib/controller/overlay/context.mjs';
 import '../../../Action/context.mjs';
 import '../../../Action/models/ActionStateContext.mjs';
+import '@chakra-ui/live-region';
 import '../Header/components/ActiveFilters/ActiveFilters.mjs';
 import '../../model/List.mjs';
+import 'object-code';
+import 'react-children-utilities';
 
 const ListItemView = (props) => {
   const { children } = props;

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

@@ -2,29 +2,29 @@
 /* */
 import { jsx, jsxs } from 'react/jsx-runtime';
 import 'react';
+import 'react-aria-components';
 import clsx from 'clsx';
 import '../../../../lib/propsContext/propsContext.mjs';
 import '@react-aria/utils';
 import 'remeda';
 import 'dot-prop';
-import 'object-code';
-import 'react-children-utilities';
+import '@tabler/icons-react';
 import '@mittwald/react-tunnel';
 import '../../../../lib/slotContext/slotContext.mjs';
-import 'react-aria-components';
-import 'invariant';
-import '@tabler/icons-react';
 import '../../../../lib/viewComponentContext/viewComponentContext.mjs';
+import 'invariant';
 import 'react-aria';
 import '@chakra-ui/live-region';
-import { useList } from '../../hooks/useList.mjs';
 import 'mobx';
 import '../../../../lib/controller/overlay/context.mjs';
 import '../../../Action/context.mjs';
 import '../../../Action/models/ActionStateContext.mjs';
+import { useList } from '../../hooks/useList.mjs';
 import '../../listContext.mjs';
 import '../Header/components/ActiveFilters/ActiveFilters.mjs';
 import '../../model/List.mjs';
+import 'object-code';
+import 'react-children-utilities';
 import { TableLoadingView } from './components/TableLoadingView.mjs';
 import styles from './Table.module.css.mjs';
 import ListEmptyViewView from '../../../../views/ListEmptyViewView.mjs';

package/dist/js/components/List/typedList.mjs

@@ -9,24 +9,21 @@ import { TypedListLoaderAsyncResource } from './setupComponents/ListLoaderAsyncR
 import { TypedListStaticData } from './setupComponents/ListStaticData.mjs';
 import { TypedListSearch } from './setupComponents/ListSearch.mjs';
 import 'react/jsx-runtime';
+import 'react-aria-components';
 import 'react';
 import 'clsx';
 import '../../lib/propsContext/propsContext.mjs';
 import '@react-aria/utils';
 import 'remeda';
 import 'dot-prop';
-import 'object-code';
-import 'react-children-utilities';
+import '@tabler/icons-react';
 import '@mittwald/react-tunnel';
 import '../../lib/slotContext/slotContext.mjs';
-import 'react-aria-components';
-import 'invariant';
-import '@tabler/icons-react';
 import '../../lib/viewComponentContext/viewComponentContext.mjs';
+import 'invariant';
 import 'react-aria';
-import '@chakra-ui/live-region';
-import './listContext.mjs';
 import { ListItemView } from './components/ListItemView/ListItemView.mjs';
+import './listContext.mjs';
 import { TableColumn } from './setupComponents/TableColumn.mjs';
 import { TableCell } from './setupComponents/TableCell.mjs';
 import { TableHeader } from './setupComponents/TableHeader.mjs';

package/dist/js/components/List/typedList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"typedList.mjs","sources":["../../../../src/components/List/typedList.ts"],"sourcesContent":["import type { ListProps } from \"@/components/List/List\";\nimport List from \"@/components/List/List\";\nimport { TypedListFilter } from \"@/components/List/setupComponents/ListFilter\";\nimport { TypedListSorting } from \"@/components/List/setupComponents/ListSorting\";\nimport { TypedListItem } from \"@/components/List/setupComponents/ListItem\";\nimport { TypedListLoaderAsync } from \"@/components/List/setupComponents/ListLoaderAsync\";\nimport { TypedListLoaderAsyncResource } from \"@/components/List/setupComponents/ListLoaderAsyncResource\";\nimport { TypedListStaticData } from \"@/components/List/setupComponents/ListStaticData\";\nimport { TypedListSearch } from \"@/components/List/setupComponents/ListSearch\";\nimport { ListItemView } from \"@/components/List\";\nimport type { ComponentType } from \"react\";\nimport { TableColumn } from \"@/components/List/setupComponents/TableColumn\";\nimport { TableCell } from \"@/components/List/setupComponents/TableCell\";\nimport { TableHeader } from \"@/components/List/setupComponents/TableHeader\";\nimport { TableRow } from \"@/components/List/setupComponents/TableRow\";\nimport { TableBody } from \"@/components/List/setupComponents/TableBody\";\nimport { Table } from \"@/components/List/setupComponents/Table\";\n\nexport const TypedList = <T>() =>\n  List as unknown as ComponentType<ListProps<T>>;\n\nexport const typedList = <T>() => ({\n  List: TypedList<T>(),\n  Filter: TypedListFilter<T>(),\n  Search: TypedListSearch<T>(),\n  Sorting: TypedListSorting<T>(),\n  Item: TypedListItem<T>(),\n  ItemView: ListItemView,\n  TableHeader: TableHeader<T>,\n  TableColumn: TableColumn<T>,\n  TableBody: TableBody<T>,\n  TableRow: TableRow<T>,\n  TableCell: TableCell<T>,\n  Table: Table<T>,\n  StaticData: TypedListStaticData<T>(),\n  LoaderAsync: TypedListLoaderAsync<T>(),\n  LoaderAsyncResource: TypedListLoaderAsyncResource<T>(),\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBO,MAAM,YAAY,MACvB;AAEK,MAAM,YAAY,OAAU;AAAA,EACjC,MAAM,SAAa,EAAA;AAAA,EACnB,QAAQ,eAAmB,EAAA;AAAA,EAC3B,QAAQ,eAAmB,EAAA;AAAA,EAC3B,SAAS,gBAAoB,EAAA;AAAA,EAC7B,MAAM,aAAiB,EAAA;AAAA,EACvB,QAAU,EAAA,YAAA;AAAA,EACV,WAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,YAAY,mBAAuB,EAAA;AAAA,EACnC,aAAa,oBAAwB,EAAA;AAAA,EACrC,qBAAqB,4BAAgC;AACvD,CAAA;;;;"}
+{"version":3,"file":"typedList.mjs","sources":["../../../../src/components/List/typedList.ts"],"sourcesContent":["import type { ListProps } from \"@/components/List/List\";\nimport List from \"@/components/List/List\";\nimport { TypedListFilter } from \"@/components/List/setupComponents/ListFilter\";\nimport { TypedListSorting } from \"@/components/List/setupComponents/ListSorting\";\nimport { TypedListItem } from \"@/components/List/setupComponents/ListItem\";\nimport { TypedListLoaderAsync } from \"@/components/List/setupComponents/ListLoaderAsync\";\nimport { TypedListLoaderAsyncResource } from \"@/components/List/setupComponents/ListLoaderAsyncResource\";\nimport { TypedListStaticData } from \"@/components/List/setupComponents/ListStaticData\";\nimport { TypedListSearch } from \"@/components/List/setupComponents/ListSearch\";\nimport { ListItemView } from \"@/components/List\";\nimport type { ComponentType } from \"react\";\nimport { TableColumn } from \"@/components/List/setupComponents/TableColumn\";\nimport { TableCell } from \"@/components/List/setupComponents/TableCell\";\nimport { TableHeader } from \"@/components/List/setupComponents/TableHeader\";\nimport { TableRow } from \"@/components/List/setupComponents/TableRow\";\nimport { TableBody } from \"@/components/List/setupComponents/TableBody\";\nimport { Table } from \"@/components/List/setupComponents/Table\";\n\nexport const TypedList = <T>() =>\n  List as unknown as ComponentType<ListProps<T>>;\n\nexport const typedList = <T>() => ({\n  List: TypedList<T>(),\n  Filter: TypedListFilter<T>(),\n  Search: TypedListSearch<T>(),\n  Sorting: TypedListSorting<T>(),\n  Item: TypedListItem<T>(),\n  ItemView: ListItemView,\n  TableHeader: TableHeader<T>,\n  TableColumn: TableColumn<T>,\n  TableBody: TableBody<T>,\n  TableRow: TableRow<T>,\n  TableCell: TableCell<T>,\n  Table: Table<T>,\n  StaticData: TypedListStaticData<T>(),\n  LoaderAsync: TypedListLoaderAsync<T>(),\n  LoaderAsyncResource: TypedListLoaderAsyncResource<T>(),\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBO,MAAM,YAAY,MACvB;AAEK,MAAM,YAAY,OAAU;AAAA,EACjC,MAAM,SAAa,EAAA;AAAA,EACnB,QAAQ,eAAmB,EAAA;AAAA,EAC3B,QAAQ,eAAmB,EAAA;AAAA,EAC3B,SAAS,gBAAoB,EAAA;AAAA,EAC7B,MAAM,aAAiB,EAAA;AAAA,EACvB,QAAU,EAAA,YAAA;AAAA,EACV,WAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,YAAY,mBAAuB,EAAA;AAAA,EACnC,aAAa,oBAAwB,EAAA;AAAA,EACrC,qBAAqB,4BAAgC;AACvD,CAAA;;;;"}

package/dist/js/components/Table/Table.module.scss.mjs

@@ -13,6 +13,7 @@ const styles = {
 	table: table,
 	column: column,
 	cell: cell,
+	"horizontal-align-center": "flow--table--horizontal-align-center",
 	header: header,
 	body: body,
 	row: row,

package/dist/js/components/Table/Table.module.scss.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Table.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/js/components/Table/components/TableCell/TableCell.mjs

@@ -9,8 +9,18 @@ import { SkeletonText } from '../../../SkeletonText/SkeletonText.mjs';
 import { TableColumn } from '../TableColumn/TableColumn.mjs';
 
 const TableCell = (props) => {
-  const { children, className, rowHeader, ...rest } = props;
-  const rootClassName = clsx(styles.cell, className);
+  const {
+    children,
+    className,
+    rowHeader,
+    horizontalAlign = "start",
+    ...rest
+  } = props;
+  const rootClassName = clsx(
+    styles.cell,
+    styles[`horizontal-align-${horizontalAlign}`],
+    className
+  );
   const content = /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(SkeletonText, { width: "100px" }), children });
   if (rowHeader) {
     return /* @__PURE__ */ jsx(TableColumn, { className: rootClassName, ...rest, children: content });

package/dist/js/components/Table/components/TableCell/TableCell.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.mjs","sources":["../../../../../../src/components/Table/components/TableCell/TableCell.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport React, { Suspense } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\nimport { SkeletonText } from \"@/components/SkeletonText\";\nimport { TableColumn } from \"@/components/Table\";\n\nexport interface TableCellProps\n  extends Omit<Aria.CellProps, \"children\" | \"style\">,\n    PropsWithChildren {\n  rowHeader?: boolean;\n}\n\n/** @flr-generate all */\nexport const TableCell: FC<TableCellProps> = (props) => {\n  const { children, className, rowHeader, ...rest } = props;\n\n  const rootClassName = clsx(styles.cell, className);\n\n  const content = (\n    <Suspense fallback={<SkeletonText width=\"100px\" />}>{children}</Suspense>\n  );\n\n  if (rowHeader) {\n    return (\n      <TableColumn className={rootClassName} {...rest}>\n        {content}\n      </TableColumn>\n    );\n  }\n\n  return (\n    <Aria.Cell className={rootClassName} {...rest}>\n      {content}\n    </Aria.Cell>\n  );\n};\n\nexport default TableCell;\n"],"names":[],"mappings":";;;;;;;;AAea,MAAA,SAAA,GAAgC,CAAC,KAAU,KAAA;AACtD,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AAEpD,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,MAAO,CAAA,IAAA,EAAM,SAAS,CAAA;AAEjD,EAAM,MAAA,OAAA,uBACH,QAAS,EAAA,EAAA,QAAA,sBAAW,YAAa,EAAA,EAAA,KAAA,EAAM,OAAQ,EAAA,CAAA,EAAK,QAAS,EAAA,CAAA;AAGhE,EAAA,IAAI,SAAW,EAAA;AACb,IAAA,2BACG,WAAY,EAAA,EAAA,SAAA,EAAW,aAAgB,EAAA,GAAG,MACxC,QACH,EAAA,OAAA,EAAA,CAAA;AAAA;AAIJ,EACE,uBAAA,GAAA,CAAC,KAAK,IAAL,EAAA,EAAU,WAAW,aAAgB,EAAA,GAAG,MACtC,QACH,EAAA,OAAA,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TableCell.mjs","sources":["../../../../../../src/components/Table/components/TableCell/TableCell.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport React, { Suspense } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\nimport { SkeletonText } from \"@/components/SkeletonText\";\nimport { TableColumn } from \"@/components/Table\";\n\nexport interface TableCellProps\n  extends Omit<Aria.CellProps, \"children\" | \"style\">,\n    PropsWithChildren {\n  rowHeader?: boolean;\n  /** @default \"start\" */\n  horizontalAlign?: \"start\" | \"center\";\n}\n\n/** @flr-generate all */\nexport const TableCell: FC<TableCellProps> = (props) => {\n  const {\n    children,\n    className,\n    rowHeader,\n    horizontalAlign = \"start\",\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.cell,\n    styles[`horizontal-align-${horizontalAlign}`],\n    className,\n  );\n\n  const content = (\n    <Suspense fallback={<SkeletonText width=\"100px\" />}>{children}</Suspense>\n  );\n\n  if (rowHeader) {\n    return (\n      <TableColumn className={rootClassName} {...rest}>\n        {content}\n      </TableColumn>\n    );\n  }\n\n  return (\n    <Aria.Cell className={rootClassName} {...rest}>\n      {content}\n    </Aria.Cell>\n  );\n};\n\nexport default TableCell;\n"],"names":[],"mappings":";;;;;;;;AAiBa,MAAA,SAAA,GAAgC,CAAC,KAAU,KAAA;AACtD,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAkB,GAAA,OAAA;AAAA,IAClB,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,IAAA;AAAA,IACP,MAAA,CAAO,CAAoB,iBAAA,EAAA,eAAe,CAAE,CAAA,CAAA;AAAA,IAC5C;AAAA,GACF;AAEA,EAAM,MAAA,OAAA,uBACH,QAAS,EAAA,EAAA,QAAA,sBAAW,YAAa,EAAA,EAAA,KAAA,EAAM,OAAQ,EAAA,CAAA,EAAK,QAAS,EAAA,CAAA;AAGhE,EAAA,IAAI,SAAW,EAAA;AACb,IAAA,2BACG,WAAY,EAAA,EAAA,SAAA,EAAW,aAAgB,EAAA,GAAG,MACxC,QACH,EAAA,OAAA,EAAA,CAAA;AAAA;AAIJ,EACE,uBAAA,GAAA,CAAC,KAAK,IAAL,EAAA,EAAU,WAAW,aAAgB,EAAA,GAAG,MACtC,QACH,EAAA,OAAA,EAAA,CAAA;AAEJ;;;;"}

package/dist/js/components/Table/components/TableColumn/TableColumn.mjs

@@ -7,8 +7,12 @@ import clsx from 'clsx';
 import styles from '../../Table.module.scss.mjs';
 
 const TableColumn = (props) => {
-  const { children, className, ...rest } = props;
-  const rootClassName = clsx(styles.column, className);
+  const { children, className, horizontalAlign = "start", ...rest } = props;
+  const rootClassName = clsx(
+    styles.column,
+    styles[`horizontal-align-${horizontalAlign}`],
+    className
+  );
   return /* @__PURE__ */ jsx(Aria.Column, { isRowHeader: true, className: rootClassName, ...rest, children });
 };