@hortiview/shared-components 0.0.7335 → 0.0.7373

package/dist/components/AlertBanner/AlertBanner.js

@@ -1,6 +1,6 @@
 import { jsx as r, Fragment as l, jsxs as c } from "react/jsx-runtime";
 import { Group as m, TypoBody as p } from "@element/react-components";
-import { u as d } from "../../useBreakpoint-BNeVhjjZ.js";
+import { u as d } from "../../useBreakpoints-BNeVhjjZ.js";
 import { s as o } from "../../alertBanner.module-HneYdVzN.js";
 const h = ({
   text: e,

package/dist/components/AlertBanner/AlertBanner.test.js

@@ -1,6 +1,6 @@
 import { jsx as e, Fragment as m } from "react/jsx-runtime";
-import { a as t, s } from "../../react.esm-C3jDj5Fe.js";
-import { a as l } from "../../useBreakpoint-BNeVhjjZ.js";
+import { a as t, s } from "../../react.esm-Dy4VzU4L.js";
+import { a as l } from "../../useBreakpoints-BNeVhjjZ.js";
 import { AlertBanner as n } from "./AlertBanner.js";
 import { d as c, b as p, t as r, g as o, v as a } from "../../vi.JYQecGiw-BbUbJcT8.js";
 c("AlertBanner Test", () => {

package/dist/components/BaseView/BaseView.js

@@ -5,7 +5,7 @@ import { BasicHeading as u } from "../BasicHeading/BasicHeading.js";
 import { EmptyView as L } from "../EmptyView/EmptyView.js";
 import { ListArea as A } from "../ListArea/ListArea.js";
 import { VerticalDivider as V } from "../VerticalDivider/VerticalDivider.js";
-import { u as W } from "../../useBreakpoint-BNeVhjjZ.js";
+import { u as W } from "../../useBreakpoints-BNeVhjjZ.js";
 import { s as r } from "../../baseView.module-ve87u_d0.js";
 const C = ({
   action: c,

package/dist/components/BaseView/BaseView.test.js

@@ -1,6 +1,6 @@
 import { jsx as a, Fragment as s } from "react/jsx-runtime";
-import { a as r, s as e, f as p } from "../../react.esm-C3jDj5Fe.js";
-import { a as l } from "../../useBreakpoint-BNeVhjjZ.js";
+import { a as r, s as e, f as p } from "../../react.esm-Dy4VzU4L.js";
+import { a as l } from "../../useBreakpoints-BNeVhjjZ.js";
 import { BaseView as i } from "./BaseView.js";
 import { d as u, b as m, t as n, g as t, v as c } from "../../vi.JYQecGiw-BbUbJcT8.js";
 u("BaseView Test", () => {

package/dist/components/BasicHeading/BasicHeading.js

@@ -2,7 +2,7 @@ import { jsxs as s, jsx as t } from "react/jsx-runtime";
 import { TypoDisplay as g, TypoBody as N, Icon as I } from "@element/react-components";
 import { I as x } from "../../Iconify-CY9lZjFd.js";
 import { AvailableCustomIcons as B } from "../../enums/AvailableCustomIcons.js";
-import { u as C } from "../../useBreakpoint-BNeVhjjZ.js";
+import { u as C } from "../../useBreakpoints-BNeVhjjZ.js";
 import { OverflowTooltip as T } from "../OverflowTooltip/OverflowTooltip.js";
 import { s as e } from "../../basicHeading.module-BYb8xvuk.js";
 const $ = ({ icon: i }) => i ? typeof i != "string" ? /* @__PURE__ */ t("div", { className: e.iconContainer, children: i }) : i in B ? /* @__PURE__ */ t(

package/dist/components/BasicHeading/BasicHeading.test.js

@@ -1,7 +1,7 @@
 import { jsx as o, Fragment as c } from "react/jsx-runtime";
 import { Button as g } from "@element/react-components";
 import { BasicHeading as a } from "./BasicHeading.js";
-import { a as i, s as n } from "../../react.esm-C3jDj5Fe.js";
+import { a as i, s as n } from "../../react.esm-Dy4VzU4L.js";
 import { d as h, t as s, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
 h("BasicHeading-Test", () => {
   s("render small container without content", () => {

package/dist/components/BlockView/BlockView.test.js

@@ -1,5 +1,5 @@
 import { jsx as l } from "react/jsx-runtime";
-import { a as s, s as o, f as n } from "../../react.esm-C3jDj5Fe.js";
+import { a as s, s as o, f as n } from "../../react.esm-Dy4VzU4L.js";
 import { BlockView as i } from "./BlockView.js";
 import { d as B, v as a, t as r, g as t } from "../../vi.JYQecGiw-BbUbJcT8.js";
 B("BlockView Test", () => {

package/dist/components/ContextMenu/ContextMenu.js

@@ -1,46 +1,47 @@
 import { jsx as o } from "react/jsx-runtime";
-import { Menu as u, IconButton as c, List as d, ListItem as f } from "@element/react-components";
-import { useState as p, useCallback as s, useEffect as y } from "react";
-import { s as C } from "../../contextMenu.module-B7aUMFPe.js";
+import { Menu as u, IconButton as d, List as f, ListItem as p } from "@element/react-components";
+import { useState as y, useCallback as l, useEffect as C } from "react";
 import { uniqueId as k } from "lodash";
+import { s as r } from "../../contextMenu.module-DNQ8d9Aj.js";
 const M = ({
   triggerOpen: n = null,
-  actions: r,
-  iconOrientation: a = "vertical"
+  actions: a,
+  iconOrientation: c = "vertical"
 }) => {
-  const [e, t] = p(!1), m = s(() => {
+  const [e, t] = y(!1), m = l(() => {
     t(!e);
-  }, [e]), l = s(() => {
+  }, [e]), s = l(() => {
     t(!1);
   }, []);
-  return y(() => {
+  return C(() => {
     t(n !== null ? n : !1);
   }, [n]), /* @__PURE__ */ o(
     u,
     {
-      className: C.menu,
+      className: r.menu,
       "data-testid": "selectionmenu",
       open: e,
       surfaceOnly: !0,
       hoistToBody: !0,
-      onClose: l,
+      onClose: s,
       trigger: /* @__PURE__ */ o(
-        c,
+        d,
         {
+          className: r.icon,
           variant: e ? "filled-primary" : void 0,
           "data-testid": "openButton",
-          icon: a === "vertical" ? "more_vert" : "more_horiz",
+          icon: c === "vertical" ? "more_vert" : "more_horiz",
           onClick: m
         }
       ),
-      children: /* @__PURE__ */ o(d, { children: r.map((i) => /* @__PURE__ */ o(
-        f,
+      children: /* @__PURE__ */ o(f, { children: a.map((i) => /* @__PURE__ */ o(
+        p,
         {
           ...i,
           leadingBlockType: "icon",
           "data-testid": "listItemButton",
           onClick: () => {
-            i?.onClick?.(), l();
+            i?.onClick?.(), s();
           }
         },
         k(`LI_${i.primaryText?.toString()}_`)

package/dist/components/ContextMenu/ContextMenu.test.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { a as d, s as n, f as o, w as a } from "../../react.esm-C3jDj5Fe.js";
+import { a as d, s as n, f as o, w as a } from "../../react.esm-Dy4VzU4L.js";
 import { ContextMenu as u } from "./ContextMenu.js";
 import { v as m, d as g, t as B, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
 const T = m.fn(), l = m.fn(), i = m.fn(), p = [

package/dist/components/DeleteModal/DeleteModal.test.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { a as c, s as e } from "../../react.esm-C3jDj5Fe.js";
+import { a as c, s as e } from "../../react.esm-Dy4VzU4L.js";
 import { DeleteModal as b } from "./DeleteModal.js";
 import { d as B, t as a, v as o, g as t } from "../../vi.JYQecGiw-BbUbJcT8.js";
 B("DeleteModal Test", () => {

package/dist/components/Disclaimer/Disclaimer.test.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import { a as r, s as t } from "../../react.esm-C3jDj5Fe.js";
+import { a as r, s as t } from "../../react.esm-Dy4VzU4L.js";
 import { Disclaimer as s } from "./Disclaimer.js";
 import { d as i, t as m, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
 i("Disclaimer test", () => {

package/dist/components/EmptyView/EmptyView.test.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { a as s, s as o, w as r, f as l } from "../../react.esm-C3jDj5Fe.js";
+import { a as s, s as o, w as r, f as l } from "../../react.esm-Dy4VzU4L.js";
 import { EmptyView as c } from "./EmptyView.js";
 import { d as h, t as T, g as e, v as d } from "../../vi.JYQecGiw-BbUbJcT8.js";
 h("EmptyView", () => {

package/dist/components/Filter/Filter.d.ts

@@ -9,6 +9,7 @@ type FilterProps = {
     filterButtonText: string;
     filterModalTitle: string;
     filters: FilterData[];
+    useModal?: boolean;
 };
 /**
  * Filter component that allows the user to filter the data provided
@@ -21,7 +22,9 @@ type FilterProps = {
  * @param filters - the filter data
  * @param modalCancelButtonText - the text for the cancel button in the modal
  * @param modalConfirmButtonText - the text for the confirm button in the modal
+ * @param useModal - if the filter should use a modal and a filter button, default is true,
+ *                   if false the filters will be displayed directly in the page, be aware that the filters will be displayed in a row and there needs to be enough space for them
  * @returns
  */
-export declare const Filter: ({ clearFilterText, closeCallback, currentFilter, filterButtonAsIcon, filterButtonText, filterModalTitle, filters, modalCancelButtonText, modalConfirmButtonText, }: FilterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Filter: ({ clearFilterText, closeCallback, currentFilter, filterButtonAsIcon, filterButtonText, filterModalTitle, filters, modalCancelButtonText, modalConfirmButtonText, useModal, }: FilterProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Filter/Filter.js

@@ -1,25 +1,26 @@
-import "../../assets/Filter.css";
-import { jsxs as v, Fragment as I, jsx as t } from "react/jsx-runtime";
-import { Modal as j, Button as s, Group as q, Select as A, IconButton as D, NotificationBadge as C } from "@element/react-components";
-import { useState as u } from "react";
-import { u as _ } from "../../useBreakpoint-BNeVhjjZ.js";
+import { jsx as t, jsxs as y, Fragment as I } from "react/jsx-runtime";
+import { Group as v, Modal as W, Button as p, Select as j, IconButton as z, NotificationBadge as S } from "@element/react-components";
+import { useState as g } from "react";
+import { s as d } from "../../genericTable.module-CNV1Yt1K.js";
+import { u as O } from "../../useBreakpoints-BNeVhjjZ.js";
 import "../../alertBanner.module-HneYdVzN.js";
-import "../../iconify.module-C89oaw5b.js";
-import "../../isArray-Ca4KR8TK.js";
+import { I as H } from "../../Iconify-CY9lZjFd.js";
 import "../../react-tooltip.min-BzHiZW8k.js";
 import "../../basicHeading.module-BYb8xvuk.js";
+import "../../isArray-Ca4KR8TK.js";
 import "../../_baseToString-BNXOi2Mf.js";
 import "../../_equalByTag-DJhSpgVG.js";
+import "../../iconify.module-C89oaw5b.js";
 import "../../searchBar.module-9gKyrZRT.js";
 import "../../listArea.module-CGpHPOji.js";
 import "../../verticalDivider.module-C3_GL-fH.js";
 import "../../baseView.module-ve87u_d0.js";
 import "../../BlockView.module-BPlNT5uh.js";
-import "../../contextMenu.module-B7aUMFPe.js";
 import "lodash";
+import "../../contextMenu.module-DNQ8d9Aj.js";
 import "../../deleteModal.module-Ds3MDzdl.js";
 import "../../disclaimer.module-BZydt-Q_.js";
-import "../../genericTable.module-BkU2VDKR.js";
+import "../../genericCard.module-DzqcufuN.js";
 import "../../HashTabView.module-CJX4gxTu.js";
 import "../../HeaderFilter.module-DiBmulr5.js";
 import "../../infoGroup.module-B3E1gCGi.js";
@@ -30,114 +31,118 @@ import "react-hook-form";
 import "../../formDatePicker.module-BV3ma_7y.js";
 import "../../formSelect.module-C18N-SsT.js";
 import "../../formText.module-C0by6_DK.js";
-const K = "_filterButton_66wbq_1", M = "_filterBadge_66wbq_6", f = {
-  filterButton: K,
-  filterBadge: M
-}, gt = ({
-  clearFilterText: a,
-  closeCallback: m,
-  currentFilter: i,
-  filterButtonAsIcon: r = !1,
-  filterButtonText: l,
-  filterModalTitle: F,
-  filters: x,
-  modalCancelButtonText: y,
-  modalConfirmButtonText: b
+const vt = ({
+  clearFilterText: o,
+  closeCallback: l,
+  currentFilter: r,
+  filterButtonAsIcon: e = !1,
+  filterButtonText: i,
+  filterModalTitle: u,
+  filters: a,
+  modalCancelButtonText: m,
+  modalConfirmButtonText: n,
+  useModal: b = !0
 }) => {
-  const { isDesktop: S } = _(), [k, c] = u(!1), [n, h] = u(i), [O, g] = u(0), B = () => {
-    c(!1), m(n), g(
-      n.reduce((e, { selectedOptions: o }) => e + o.length, 0)
+  const { isDesktop: N } = O(), [A, f] = g(!1), [s, C] = g(r), [_, x] = g(0), B = () => {
+    f(!1), l(s), x(
+      s.reduce((c, { selectedOptions: h }) => c + h.length, 0)
     );
   }, w = () => {
-    h([]), g(0);
-  }, N = (e) => {
-    const o = [
-      ...n.filter((d) => d.id !== e.id),
-      e
+    C([]), x(0);
+  }, F = (c) => {
+    const h = [
+      ...s.filter((D) => D.id !== c.id),
+      c
     ];
-    h(o);
+    C(h);
   };
-  return /* @__PURE__ */ v(I, { children: [
+  return b ? /* @__PURE__ */ y(I, { children: [
     /* @__PURE__ */ t(
-      z,
+      K,
       {
-        filterButtonText: l,
-        filterButtonAsIcon: r,
-        count: O,
-        onClick: () => c(!0)
+        filterButtonText: i,
+        filterButtonAsIcon: e,
+        count: _,
+        onClick: () => f(!0)
       }
     ),
     /* @__PURE__ */ t(
-      j,
+      W,
       {
-        open: k,
+        open: A,
         onClose: B,
-        title: F,
-        modalSize: S ? "small" : "fullscreen",
-        headerActions: /* @__PURE__ */ t(s, { variant: "text", onClick: w, children: a }),
-        dismissiveButton: /* @__PURE__ */ t(s, { variant: "outlined", onClick: () => c(!1), children: y }),
-        primaryButton: /* @__PURE__ */ t(s, { variant: "filled", onClick: B, children: b }),
-        children: /* @__PURE__ */ t(q, { direction: "vertical", children: x.map(({ id: e, title: o, availableOptions: d }) => /* @__PURE__ */ t(
-          A,
-          {
-            variant: "outlined",
-            options: d,
-            label: o,
-            multiSelect: !0,
-            textKey: "text",
-            valueKey: "id",
-            value: n.find((p) => p.id === e)?.selectedOptions ?? [],
-            onChange: (p) => N({ id: e, selectedOptions: p }),
-            hoisted: !0,
-            menuMaxHeight: "300px",
-            disabled: e === "location",
-            showOptionFilter: !1
-          },
-          e
-        )) })
+        title: u,
+        modalSize: N ? "small" : "fullscreen",
+        headerActions: /* @__PURE__ */ t(p, { variant: "text", onClick: w, children: o }),
+        dismissiveButton: /* @__PURE__ */ t(p, { variant: "outlined", onClick: () => f(!1), children: m }),
+        primaryButton: /* @__PURE__ */ t(p, { variant: "filled", onClick: B, children: n }),
+        children: /* @__PURE__ */ t(v, { direction: "vertical", children: k(a, s, F) })
       }
     )
-  ] });
-}, z = ({
-  filterButtonText: a,
-  filterButtonAsIcon: m,
-  count: i,
-  onClick: r
+  ] }) : /* @__PURE__ */ t(v, { secondaryAlign: "center", fullWidth: !0, children: k(a, s, F, !1) });
+}, k = (o, l, r, e = !0) => o.map(({ id: i, title: u, availableOptions: a, icon: m }) => /* @__PURE__ */ y(v, { fullWidth: !0, secondaryAlign: "center", children: [
+  m ? /* @__PURE__ */ t(H, { icon: m, iconSize: "medium" }) : null,
+  /* @__PURE__ */ t(
+    j,
+    {
+      className: e ? void 0 : d.dense,
+      variant: "outlined",
+      options: a,
+      label: u,
+      multiSelect: !0,
+      textKey: "text",
+      valueKey: "id",
+      value: l.find((n) => n.id === i)?.selectedOptions ?? [],
+      onChange: (n) => r({ id: i, selectedOptions: n }),
+      hoisted: !0,
+      menuMaxHeight: "300px",
+      disabled: i === "location",
+      showOptionFilter: !1,
+      dense: !e,
+      fixedHeightInput: !e,
+      multiDisplayType: e ? "pills" : "text"
+    }
+  )
+] }, i)), K = ({
+  filterButtonText: o,
+  filterButtonAsIcon: l,
+  count: r,
+  onClick: e
 }) => {
-  const { isDesktop: l } = _();
-  return m ? /* @__PURE__ */ t(
-    D,
+  const { isDesktop: i } = O();
+  return l ? /* @__PURE__ */ t(
+    z,
     {
       icon: "filter_list_alt",
-      onClick: r,
-      badge: i !== 0 && /* @__PURE__ */ t(
-        C,
+      onClick: e,
+      badge: r !== 0 && /* @__PURE__ */ t(
+        S,
         {
-          counter: i,
-          className: f.filterBadge,
+          counter: r,
+          className: d.filterBadge,
           themeColor: "secondary",
           "data-testid": "filter-badge"
         }
       )
     }
-  ) : /* @__PURE__ */ v("div", { style: { height: "100%", width: l ? void 0 : "100%" }, children: [
+  ) : /* @__PURE__ */ y("div", { style: { height: "100%", width: i ? void 0 : "100%" }, children: [
     /* @__PURE__ */ t(
-      s,
+      p,
       {
         variant: "outlined",
         themeColor: "primary",
         leadingIcon: "filter_list_alt",
-        onClick: r,
-        className: f.filterButton,
-        fullWidth: !l,
-        children: a
+        onClick: e,
+        className: d.filterButton,
+        fullWidth: !i,
+        children: o
       }
     ),
-    i !== 0 && /* @__PURE__ */ t(
-      C,
+    r !== 0 && /* @__PURE__ */ t(
+      S,
       {
-        counter: i,
-        className: f.filterBadge,
+        counter: r,
+        className: d.filterBadge,
         themeColor: "secondary",
         "data-testid": "filter-badge"
       }
@@ -145,5 +150,5 @@ const K = "_filterButton_66wbq_1", M = "_filterBadge_66wbq_6", f = {
   ] });
 };
 export {
-  gt as Filter
+  vt as Filter
 };

package/dist/components/Filter/Filter.test.js

@@ -1,19 +1,23 @@
 import { jsx as r } from "react/jsx-runtime";
-import { a, s as t, f as c, t as u, w as x } from "../../react.esm-C3jDj5Fe.js";
-import { u as d } from "../../useBreakpoint-BNeVhjjZ.js";
+import { a, s as t, f as u, t as c, w as x } from "../../react.esm-Dy4VzU4L.js";
+import { a as d } from "../../useBreakpoints-BNeVhjjZ.js";
 import { Filter as T } from "./Filter.js";
 import { v as m, b as s, d as f, t as B, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
 const o = m.fn();
-m.mock("../../hooks/useBreakpoint");
-const y = d;
 s(() => {
-  y.mockReturnValue({ isDesktop: !0 });
+  m.spyOn(d, "useBreakpoints").mockReturnValue({
+    isDesktop: !0,
+    isMobile: !1,
+    isTablet: !1,
+    isDesktopNavbar: !1
+  });
 });
 f("Filter", () => {
-  const n = [
+  const l = [
     {
       id: "1",
       title: "Filter 1",
+      icon: "farm",
       availableOptions: [
         { id: "1", text: "Option 1" },
         { id: "2", text: "Option 2" }
@@ -27,7 +31,7 @@ f("Filter", () => {
         { id: "4", text: "Option 4" }
       ]
     }
-  ], i = [
+  ], n = [
     { id: "1", selectedOptions: [{ id: "1", text: "Option 1" }] },
     { id: "2", selectedOptions: [{ id: "3", text: "Option 3" }] }
   ];
@@ -36,8 +40,8 @@ f("Filter", () => {
       /* @__PURE__ */ r(
         T,
         {
-          filters: n,
-          currentFilter: i,
+          filters: l,
+          currentFilter: n,
           closeCallback: o,
           filterButtonText: "filterButtonText",
           filterModalTitle: "filterModalTitle",
@@ -46,9 +50,9 @@ f("Filter", () => {
           clearFilterText: "clearFilterText"
         }
       )
-    ), e(t.getByText("filterButtonText")).toBeInTheDocument(), e(t.getByText("filterModalTitle")).toBeInTheDocument(), e(t.getByText("modalCancelButtonText")).toBeInTheDocument(), e(t.getByText("modalConfirmButtonText")).toBeInTheDocument(), e(t.getByText("clearFilterText")).toBeInTheDocument(), e(t.getByText("Filter 1")).toBeInTheDocument(), e(t.getByText("Filter 2")).toBeInTheDocument(), e(t.getByText("Option 1")).toBeInTheDocument(), e(t.getByText("Option 3")).toBeInTheDocument();
-    const l = t.getByRole("button", { name: "modalConfirmButtonText" });
-    c.click(l), u.act(() => {
+    ), e(t.getByText("filterButtonText")).toBeInTheDocument(), e(t.getByText("filterModalTitle")).toBeInTheDocument(), e(t.getByText("modalCancelButtonText")).toBeInTheDocument(), e(t.getByText("modalConfirmButtonText")).toBeInTheDocument(), e(t.getByText("clearFilterText")).toBeInTheDocument(), e(t.getByText("Filter 1")).toBeInTheDocument(), e(t.getByText("Filter 2")).toBeInTheDocument(), e(t.getByText("Option 1")).toBeInTheDocument(), e(t.getByText("Option 3")).toBeInTheDocument(), e(t.getByTestId("farm")).toBeInTheDocument();
+    const i = t.getByRole("button", { name: "modalConfirmButtonText" });
+    u.click(i), c.act(() => {
       e(o).toHaveBeenCalledTimes(1), e(t.getByText("2")).toBeInTheDocument();
     });
   }), B("should clear filter", () => {
@@ -56,8 +60,8 @@ f("Filter", () => {
       /* @__PURE__ */ r(
         T,
         {
-          filters: n,
-          currentFilter: i,
+          filters: l,
+          currentFilter: n,
           closeCallback: o,
           filterButtonText: "filterButtonText",
           filterModalTitle: "filterModalTitle",
@@ -67,8 +71,8 @@ f("Filter", () => {
         }
       )
     );
-    const l = t.getByText("clearFilterText");
-    c.click(l), u.act(() => {
+    const i = t.getByText("clearFilterText");
+    u.click(i), c.act(() => {
       e(o).toHaveBeenCalledTimes(1), e(t.queryByTestId("filter-badge")).not.toBeInTheDocument();
     });
   }), B("should close filter", () => {
@@ -76,8 +80,8 @@ f("Filter", () => {
       /* @__PURE__ */ r(
         T,
         {
-          filters: n,
-          currentFilter: i,
+          filters: l,
+          currentFilter: n,
           closeCallback: o,
           filterButtonText: "filterButtonText",
           filterModalTitle: "filterModalTitle",
@@ -87,8 +91,8 @@ f("Filter", () => {
         }
       )
     );
-    const l = t.getByRole("button", { name: "modalCancelButtonText" });
-    c.click(l), u.act(() => {
+    const i = t.getByRole("button", { name: "modalCancelButtonText" });
+    u.click(i), c.act(() => {
       e(o).toHaveBeenCalledTimes(1), e(t.queryByTestId("filter-badge")).not.toBeInTheDocument();
     }), x(() => {
       e(t.queryByText("filterModalTitle")).not.toBeInTheDocument(), e(t.queryByText("modalCancelButtonText")).not.toBeInTheDocument(), e(t.queryByText("modalConfirmButtonText")).not.toBeInTheDocument(), e(t.queryByText("clearFilterText")).not.toBeInTheDocument();
@@ -98,8 +102,8 @@ f("Filter", () => {
       /* @__PURE__ */ r(
         T,
         {
-          filters: n,
-          currentFilter: i,
+          filters: l,
+          currentFilter: n,
           closeCallback: o,
           filterButtonText: "filterButtonText",
           filterModalTitle: "filterModalTitle",
@@ -109,6 +113,23 @@ f("Filter", () => {
           filterButtonAsIcon: !0
         }
       )
-    ), t.debug(void 0, 1 / 0), e(t.queryByText("filterButtonText")).not.toBeInTheDocument(), e(t.getByText("filter_list_alt")).toBeInTheDocument(), e(t.getByText("filter_list_alt").tagName).toBe("I");
+    ), e(t.queryByText("filterButtonText")).not.toBeInTheDocument(), e(t.getByText("filter_list_alt")).toBeInTheDocument(), e(t.getByText("filter_list_alt").tagName).toBe("I");
+  }), B("should render filter without modal", () => {
+    a(
+      /* @__PURE__ */ r(
+        T,
+        {
+          filters: l,
+          currentFilter: n,
+          closeCallback: o,
+          filterButtonText: "filterButtonText",
+          filterModalTitle: "filterModalTitle",
+          modalCancelButtonText: "modalCancelButtonText",
+          modalConfirmButtonText: "modalConfirmButtonText",
+          clearFilterText: "clearFilterText",
+          useModal: !1
+        }
+      )
+    ), e(t.queryByText("filterButtonText")).not.toBeInTheDocument(), e(t.queryByText("clearFilterText")).not.toBeInTheDocument(), e(t.queryByText("modalCancelButtonText")).not.toBeInTheDocument(), e(t.queryByText("modalConfirmButtonText")).not.toBeInTheDocument(), e(t.queryByText("clearFilterText")).not.toBeInTheDocument(), e(t.getByTestId("farm")).toBeInTheDocument(), e(t.getByText("Filter 1")).toBeInTheDocument(), e(t.getByText("Filter 2")).toBeInTheDocument(), e(t.getByText("Option 1")).toBeInTheDocument(), e(t.getByText("Option 3")).toBeInTheDocument();
   });
 });

package/dist/components/FormComponents/FormCheckBox/FormCheckBox.test.js

@@ -1,5 +1,5 @@
 import { jsx as s } from "react/jsx-runtime";
-import { a as n, s as t, f as m } from "../../../react.esm-C3jDj5Fe.js";
+import { a as n, s as t, f as m } from "../../../react.esm-Dy4VzU4L.js";
 import { FormCheckBox as c } from "./FormCheckBox.js";
 import { v as e, d as h, t as l, g as r } from "../../../vi.JYQecGiw-BbUbJcT8.js";
 const a = e.fn();

package/dist/components/FormComponents/FormDatePicker/FormDatePicker.test.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { a as s, s as a, f as m } from "../../../react.esm-C3jDj5Fe.js";
+import { a as s, s as a, f as m } from "../../../react.esm-Dy4VzU4L.js";
 import { FormDatePicker as c } from "./FormDatePicker.js";
 import { v as e, d as f, t as l, g as r } from "../../../vi.JYQecGiw-BbUbJcT8.js";
 const i = e.fn();

package/dist/components/FormComponents/FormRadio/FormRadio.test.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { a as s, s as t, f as m } from "../../../react.esm-C3jDj5Fe.js";
+import { a as s, s as t, f as m } from "../../../react.esm-Dy4VzU4L.js";
 import { FormRadio as l } from "./FormRadio.js";
 import { v as e, d as c, t as i, g as o } from "../../../vi.JYQecGiw-BbUbJcT8.js";
 const r = e.fn();

package/dist/components/FormComponents/FormSelect/FormSelect.test.js

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
-import { a, s as t, f as T, w as p } from "../../../react.esm-C3jDj5Fe.js";
-import { u as B } from "../../../index-BQnj-5Zt.js";
+import { a, s as t, f as T, w as p } from "../../../react.esm-Dy4VzU4L.js";
+import { u as B } from "../../../index-DW4oU_OU.js";
 import { FormSelect as i } from "./FormSelect.js";
 import { SelectTooltipText as d } from "./SelectTooltipText.js";
 import { v as n, d as f, t as u, g as e } from "../../../vi.JYQecGiw-BbUbJcT8.js";

package/dist/components/FormComponents/FormSlider/FormSlider.test.js

@@ -1,5 +1,5 @@
 import { jsx as s } from "react/jsx-runtime";
-import { a, s as n } from "../../../react.esm-C3jDj5Fe.js";
+import { a, s as n } from "../../../react.esm-Dy4VzU4L.js";
 import { FormSlider as l } from "./FormSlider.js";
 import { v as e, d as m, t as i, g as r } from "../../../vi.JYQecGiw-BbUbJcT8.js";
 const o = e.fn();

package/dist/components/FormComponents/FormText/FormText.test.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { a as s, s as r, f as d } from "../../../react.esm-C3jDj5Fe.js";
+import { a as s, s as r, f as d } from "../../../react.esm-Dy4VzU4L.js";
 import { FormText as o } from "./FormText.js";
 import { v as a, d as u, t as l, g as e } from "../../../vi.JYQecGiw-BbUbJcT8.js";
 const m = a.fn();

package/dist/components/GenericTable/GenericTable.d.ts

@@ -1,6 +1,7 @@
 import { TableLayoutProps } from '../../types/GenericTable';
 /**
- * Automatically creates a table layout based on the given data
+ * Automatically creates a table layout based on the given data.
+ * If the screen is too small, it will switch to a card layout.
  * @see {@link TableLayoutProps} for even more information on the props
  * @example <GenericTable<YourElementType> data={data} />
  * @example
@@ -48,6 +49,10 @@ import { TableLayoutProps } from '../../types/GenericTable';
  * @param pagination whether to show pagination or not
  * @param getRowActions function that will be called to get the actions for a row to be displayed as actions in a context menu
  * @param headerTranslation function that will be called to translate the headers by its key
+ * @param customColumnWidth custom column width
+ * @param title title of the table
+ * @param cardTitleColumn column to be used as the title in the card layout
+ * @param cardSubTitleColumn column to be used as the subtitle in the card layout
  * @returns a table based on a given type and data
  */
-export declare const GenericTable: <T>({ data, hiddenColumns, order, cellTemplates, tableActions, noContentText, headerTranslation, pagination, getRowActions, customColumnWidth, title, }: TableLayoutProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const GenericTable: <T>({ data, hiddenColumns, order, cellTemplates, tableActions, noContentText, headerTranslation, pagination, getRowActions, customColumnWidth, title, cardTitleColumn, cardSubTitleColumn, }: TableLayoutProps<T>) => import("react/jsx-runtime").JSX.Element;