@hortiview/shared-components 0.0.7369 → 0.0.7403

package/dist/assets/infoGroup.css

@@ -1 +1 @@
-._container_egebs_1{width:100%;padding:0;@media only screen and (max-width: 838px){padding-top:.5rem}}._dividerContainer_egebs_10{width:100%;padding:0rem 1rem;margin:-1rem 0rem}._mainGroup_egebs_16{border:.0775rem solid var(--lmnt-on-surface-stroke, rgba(0, 0, 0, .12));border-radius:.5rem}._row_egebs_21{min-height:5.5vh;padding:1rem}._row_egebs_21 input:not([type=checkbox]){@media only screen and (max-width: 839px){height:80%}}._row_egebs_21 input{padding-top:.2rem;border:none;color:#000!important;font-size:1.2rem;margin-top:1rem!important;@media only screen and (min-width: 839px){margin-top:1.5rem!important}}._row_egebs_21 label{font-size:1.2rem}._row_egebs_21 ._valueText_egebs_46{line-height:1rem}:before{border:none!important}._component_egebs_54{width:95%!important;background-color:var(--lmnt-theme-on-primary);padding-left:.4rem!important;justify-content:flex-end;min-height:3rem;height:4vh;align-items:center;text-align:center;display:flex;border-radius:.5rem;box-shadow:0 .125rem .25rem #00000040;padding:1rem;margin-right:1rem;@media only screen and (max-width: 839px){margin-bottom:1.6rem!important;margin-left:1rem}}._component_egebs_54>div{display:flex;justify-content:space-between;width:100%}._component_egebs_54>div label{font-size:1rem;color:#00000061;font-weight:500}._componentContainer_egebs_87{width:100%!important;@media only screen and (max-width: 839px){margin-top:1rem;margin-bottom:-.5rem}}._field_egebs_95{width:100%;padding:0rem .5rem;align-self:center;display:flex;flex-direction:column}
+._dividerContainer_4c1hq_1{width:100%;padding:1rem 0}._fullWidth_4c1hq_6{width:100%}._centerDefaultComponent_4c1hq_10{margin:auto}._verticalDivider_4c1hq_14{display:flex;align-self:stretch;height:auto;width:1px;background-color:var(--lmnt-theme-on-surface-stroke, rgba(0, 0, 0, .12))}._mainGroup_4c1hq_22{padding:1rem;border:.0775rem solid var(--lmnt-on-surface-stroke, rgba(0, 0, 0, .12));border-radius:.5rem}._textAlignRight_4c1hq_28{text-align:right}

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,15 +1,16 @@
-import { jsxs as B, Fragment as I, jsx as t } from "react/jsx-runtime";
-import { Modal as j, Button as s, Group as A, Select as D, IconButton as K, NotificationBadge as v } from "@element/react-components";
-import { useState as u } from "react";
-import { s as f } from "../../genericTable.module-CXfRg0e4.js";
-import { u as F } from "../../useBreakpoints-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";
@@ -22,7 +23,7 @@ import "../../disclaimer.module-BZydt-Q_.js";
 import "../../genericCard.module-DzqcufuN.js";
 import "../../HashTabView.module-CJX4gxTu.js";
 import "../../HeaderFilter.module-DiBmulr5.js";
-import "../../infoGroup.module-B3E1gCGi.js";
+import "../../infoGroup.module-Cxw88dfC.js";
 import "../../bigLoadingSpinner.module-GgbFol8k.js";
 import "../../loadingSpinner.module-CLtqSMWA.js";
 import "../Scrollbar/Scrollbar.js";
@@ -30,111 +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 ft = ({
-  clearFilterText: a,
-  closeCallback: m,
-  currentFilter: i,
-  filterButtonAsIcon: r = !1,
-  filterButtonText: l,
-  filterModalTitle: x,
-  filters: y,
-  modalCancelButtonText: S,
-  modalConfirmButtonText: k
+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: O } = F(), [b, p] = u(!1), [n, h] = u(i), [N, g] = u(0), C = () => {
-    p(!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)
     );
-  }, _ = () => {
-    h([]), g(0);
-  }, w = (e) => {
-    const o = [
-      ...n.filter((c) => c.id !== e.id),
-      e
+  }, w = () => {
+    C([]), x(0);
+  }, F = (c) => {
+    const h = [
+      ...s.filter((D) => D.id !== c.id),
+      c
     ];
-    h(o);
+    C(h);
   };
-  return /* @__PURE__ */ B(I, { children: [
+  return b ? /* @__PURE__ */ y(I, { children: [
     /* @__PURE__ */ t(
-      M,
+      K,
       {
-        filterButtonText: l,
-        filterButtonAsIcon: r,
-        count: N,
-        onClick: () => p(!0)
+        filterButtonText: i,
+        filterButtonAsIcon: e,
+        count: _,
+        onClick: () => f(!0)
       }
     ),
     /* @__PURE__ */ t(
-      j,
+      W,
       {
-        open: b,
-        onClose: C,
-        title: x,
-        modalSize: O ? "small" : "fullscreen",
-        headerActions: /* @__PURE__ */ t(s, { variant: "text", onClick: _, children: a }),
-        dismissiveButton: /* @__PURE__ */ t(s, { variant: "outlined", onClick: () => p(!1), children: S }),
-        primaryButton: /* @__PURE__ */ t(s, { variant: "filled", onClick: C, children: k }),
-        children: /* @__PURE__ */ t(A, { direction: "vertical", children: y.map(({ id: e, title: o, availableOptions: c }) => /* @__PURE__ */ t(
-          D,
-          {
-            variant: "outlined",
-            options: c,
-            label: o,
-            multiSelect: !0,
-            textKey: "text",
-            valueKey: "id",
-            value: n.find((d) => d.id === e)?.selectedOptions ?? [],
-            onChange: (d) => w({ id: e, selectedOptions: d }),
-            hoisted: !0,
-            menuMaxHeight: "300px",
-            disabled: e === "location",
-            showOptionFilter: !1
-          },
-          e
-        )) })
+        open: A,
+        onClose: B,
+        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) })
       }
     )
-  ] });
-}, M = ({
-  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 } = F();
-  return m ? /* @__PURE__ */ t(
-    K,
+  const { isDesktop: i } = O();
+  return l ? /* @__PURE__ */ t(
+    z,
     {
       icon: "filter_list_alt",
-      onClick: r,
-      badge: i !== 0 && /* @__PURE__ */ t(
-        v,
+      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__ */ B("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(
-      v,
+    r !== 0 && /* @__PURE__ */ t(
+      S,
       {
-        counter: i,
-        className: f.filterBadge,
+        counter: r,
+        className: d.filterBadge,
         themeColor: "secondary",
         "data-testid": "filter-badge"
       }
@@ -142,5 +150,5 @@ const ft = ({
   ] });
 };
 export {
-  ft as Filter
+  vt as Filter
 };

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

@@ -1,11 +1,11 @@
-import { jsx as a } from "react/jsx-runtime";
-import { a as r, s as t, f as c, t as u, w as m } from "../../react.esm-Dy4VzU4L.js";
-import { a as s } from "../../useBreakpoints-BNeVhjjZ.js";
+import { jsx as r } from "react/jsx-runtime";
+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 x, b as d, d as f, t as B, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
-const o = x.fn();
-d(() => {
-  x.spyOn(s, "useBreakpoints").mockReturnValue({
+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();
+s(() => {
+  m.spyOn(d, "useBreakpoints").mockReturnValue({
     isDesktop: !0,
     isMobile: !1,
     isTablet: !1,
@@ -13,10 +13,11 @@ d(() => {
   });
 });
 f("Filter", () => {
-  const n = [
+  const l = [
     {
       id: "1",
       title: "Filter 1",
+      icon: "farm",
       availableOptions: [
         { id: "1", text: "Option 1" },
         { id: "2", text: "Option 2" }
@@ -30,17 +31,17 @@ 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" }] }
   ];
   B("should render filter", () => {
-    r(
-      /* @__PURE__ */ a(
+    a(
+      /* @__PURE__ */ r(
         T,
         {
-          filters: n,
-          currentFilter: i,
+          filters: l,
+          currentFilter: n,
           closeCallback: o,
           filterButtonText: "filterButtonText",
           filterModalTitle: "filterModalTitle",
@@ -49,18 +50,18 @@ 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", () => {
-    r(
-      /* @__PURE__ */ a(
+    a(
+      /* @__PURE__ */ r(
         T,
         {
-          filters: n,
-          currentFilter: i,
+          filters: l,
+          currentFilter: n,
           closeCallback: o,
           filterButtonText: "filterButtonText",
           filterModalTitle: "filterModalTitle",
@@ -70,17 +71,17 @@ 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", () => {
-    r(
-      /* @__PURE__ */ a(
+    a(
+      /* @__PURE__ */ r(
         T,
         {
-          filters: n,
-          currentFilter: i,
+          filters: l,
+          currentFilter: n,
           closeCallback: o,
           filterButtonText: "filterButtonText",
           filterModalTitle: "filterModalTitle",
@@ -90,19 +91,19 @@ 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();
-    }), m(() => {
+    }), 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();
     });
   }), B("should render as icon button ", () => {
-    r(
-      /* @__PURE__ */ a(
+    a(
+      /* @__PURE__ */ r(
         T,
         {
-          filters: n,
-          currentFilter: i,
+          filters: l,
+          currentFilter: n,
           closeCallback: o,
           filterButtonText: "filterButtonText",
           filterModalTitle: "filterModalTitle",
@@ -113,5 +114,22 @@ f("Filter", () => {
         }
       )
     ), 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/GenericTable/GenericTable.js

@@ -1,7 +1,7 @@
 import { jsx as r, jsxs as B } from "react/jsx-runtime";
 import { Elevation as D, Table as G, TableTopBar as u, Group as l, Padding as W, TypoDisplay as k, TypoSubtitle as C } from "@element/react-components";
 import { Fragment as j } from "react";
-import { a as e } from "../../genericTable.module-CXfRg0e4.js";
+import { a as e } from "../../genericTable.module-CNV1Yt1K.js";
 import { u as x } from "../../useBreakpoints-BNeVhjjZ.js";
 import "../../alertBanner.module-HneYdVzN.js";
 import "../../iconify.module-C89oaw5b.js";
@@ -21,7 +21,7 @@ import "../../deleteModal.module-Ds3MDzdl.js";
 import "../../disclaimer.module-BZydt-Q_.js";
 import "../../HashTabView.module-CJX4gxTu.js";
 import "../../HeaderFilter.module-DiBmulr5.js";
-import "../../infoGroup.module-B3E1gCGi.js";
+import "../../infoGroup.module-Cxw88dfC.js";
 import "../../bigLoadingSpinner.module-GgbFol8k.js";
 import "../../loadingSpinner.module-CLtqSMWA.js";
 import "../Scrollbar/Scrollbar.js";

package/dist/components/InfoGroup/InfoGroup.d.ts

@@ -1,4 +1,5 @@
 import React, { ReactNode } from 'react';
+import { ThemeColor } from '../../enums/ThemeColor';
 /**
  * FieldItem type that defines the structure of the fields to render in the InfoGroup component
  */
@@ -14,22 +15,25 @@ export type FieldItem = {
     /**
      * ThemeColor for the Textfield (default: none)
      */
-    themeColor?: 'primary' | 'secondary' | 'error' | 'text-primary-on-background' | 'text-secondary-on-background' | 'text-hint-on-background' | 'text-disabled-on-background' | 'text-icon-on-background' | 'text-primary-on-light' | 'text-secondary-on-light' | 'text-hint-on-light' | 'text-disabled-on-light' | 'text-icon-on-light';
-    /**
-     * Variant of the component (default: default) - embedded will render the component without any padding or border
-     */
-    variant?: 'default' | 'embedded';
+    themeColor?: keyof typeof ThemeColor;
     /**
      * Optional component to render instead of Textfields
      */
     component?: ReactNode;
+    /**
+     * Variant of the component (default: default)
+     * default: will render the plain component without the label
+     * embedded: will render the component with the label
+     */
+    componentVariant?: 'default' | 'embedded';
 };
 /**
  * Props for the InfoGroup component that defines the fields to render
  */
 interface InfoGroupProps {
     /**
-     * Array of fields to render in the InfoGroup
+     * Array of fields to render in the InfoGroup.
+     * Using a matrix [][] will render multiple rows of fields in a vertical layout
      */
     fields: FieldItem[] | FieldItem[][];
     /**

package/dist/components/InfoGroup/InfoGroup.js

@@ -1,67 +1,66 @@
-import { jsxs as s, jsx as e, Fragment as h } from "react/jsx-runtime";
-import { Divider as d, Group as c, TypoCaption as v, TypoSubtitle as g } from "@element/react-components";
-import { Fragment as u } from "react";
-import { u as f } from "../../useBreakpoints-BNeVhjjZ.js";
-import { VerticalDivider as y } from "../VerticalDivider/VerticalDivider.js";
-import { s as i } from "../../infoGroup.module-B3E1gCGi.js";
-const x = ({ fields: t, bold: n }) => {
-  const r = t.length > 1 && Array.isArray(t.at(0)) ? t.map((a, o) => /* @__PURE__ */ s(u, { children: [
-    o != 0 && /* @__PURE__ */ e("div", { "data-testid": "test-divider", className: i.dividerContainer, children: /* @__PURE__ */ e(d, {}) }),
-    /* @__PURE__ */ e(m, { fields: a, bold: n })
-  ] }, `row_${o}`)) : /* @__PURE__ */ e(m, { fields: t, bold: n });
-  return /* @__PURE__ */ e(c, { direction: "vertical", fullWidth: !0, className: i.mainGroup, children: r });
-}, m = ({ fields: t, bold: n }) => {
-  const { isDesktop: l } = f();
-  return /* @__PURE__ */ e(
-    c,
+import { jsxs as d, Fragment as p, jsx as t } from "react/jsx-runtime";
+import { Divider as h, Group as s, TypoCaption as g, TypoSubtitle as v } from "@element/react-components";
+import { useMemo as y, Fragment as A } from "react";
+import { u } from "../../useBreakpoints-BNeVhjjZ.js";
+import { s as l } from "../../infoGroup.module-Cxw88dfC.js";
+const w = ({ fields: r, bold: i }) => {
+  const { isDesktop: a } = u(), e = !!r.length && Array.isArray(r.at(0)), n = y(() => e && a ? r.map((o, c) => /* @__PURE__ */ d(p, { children: [
+    c != 0 && /* @__PURE__ */ t("span", { "data-testid": "test-divider", className: l.dividerContainer, children: /* @__PURE__ */ t(h, {}) }),
+    /* @__PURE__ */ t(m, { fields: o, bold: i })
+  ] })) : /* @__PURE__ */ t(m, { fields: r.flat(), bold: i }), [a, e, r, i]);
+  return /* @__PURE__ */ t(
+    s,
     {
-      direction: l ? "horizontal" : "vertical",
-      className: i.row,
+      "data-testid": "infoGroup",
+      direction: "vertical",
+      fullWidth: !0,
+      className: l.mainGroup,
+      gap: "none",
+      children: n
+    }
+  );
+}, m = ({ fields: r, bold: i }) => {
+  const { isDesktop: a } = u();
+  return /* @__PURE__ */ t(
+    s,
+    {
+      "data-testid": "singleRow",
       fullWidth: !0,
-      primaryAlign: "center",
-      secondaryAlign: "center",
-      children: t.map((r, a) => {
-        const o = l ? /* @__PURE__ */ e(y, { className: i.divider, height: "3rem" }) : /* @__PURE__ */ e(d, {});
-        return /* @__PURE__ */ s(u, { children: [
-          a != 0 && o,
-          /* @__PURE__ */ e(N, { field: r, bold: n, variant: r.variant })
-        ] }, `${r.label ?? "label"}_${a}`);
+      direction: a ? "horizontal" : "vertical",
+      secondaryAlign: "start",
+      children: r.map((e, n) => {
+        const o = a ? /* @__PURE__ */ t("div", { className: l.verticalDivider }) : /* @__PURE__ */ t(h, {});
+        return /* @__PURE__ */ d(A, { children: [
+          n != 0 && o,
+          /* @__PURE__ */ t(C, { field: e, bold: i, variant: e.componentVariant })
+        ] }, `${e.label ?? "label"}_${n}`);
       })
     }
   );
-}, N = ({
-  field: t,
-  bold: n,
-  variant: l = "default"
+}, C = ({
+  field: r,
+  bold: i,
+  variant: a = "default"
 }) => {
-  const { component: r, value: a, label: o, themeColor: p } = t;
-  return r && l === "default" ? /* @__PURE__ */ e("div", { className: i.componentContainer, children: /* @__PURE__ */ e("div", { className: i.component, children: r }) }) : /* @__PURE__ */ s(
-    c,
+  const { isDesktop: e } = u(), { component: n, value: o, label: c, themeColor: f } = r;
+  return n && a === "default" ? /* @__PURE__ */ t(s, { fullWidth: !0, primaryAlign: "center", className: l.centerDefaultComponent, children: n }) : /* @__PURE__ */ d(
+    s,
     {
-      "data-testid": "infoGroupItem",
-      direction: "vertical",
-      primaryAlign: "center",
-      secondaryAlign: "space-between",
       fullWidth: !0,
-      gap: "dense",
+      "data-testid": "infoGroupItem",
+      direction: e ? "vertical" : "horizontal",
+      gap: "none",
+      primaryAlign: e ? "start" : "space-between",
+      secondaryAlign: e ? "baseline" : "center",
+      className: e ? "" : l.textAlignRight,
       children: [
-        /* @__PURE__ */ e(v, { className: i.label, themeColor: "text-hint-on-light", children: o }),
-        a ? /* @__PURE__ */ e(
-          g,
-          {
-            level: 1,
-            "data-testid": "infoGroupValue",
-            themeColor: p,
-            bold: n,
-            className: i.valueText,
-            children: a
-          }
-        ) : /* @__PURE__ */ e(h, { children: r })
+        /* @__PURE__ */ t(g, { themeColor: "text-hint-on-light", children: c }),
+        n ? /* @__PURE__ */ t(p, { children: n }) : /* @__PURE__ */ t(v, { level: 1, "data-testid": "infoGroupValue", themeColor: f, bold: i, children: o })
       ]
     }
   );
 };
 export {
-  N as Cell,
-  x as InfoGroup
+  C as Cell,
+  w as InfoGroup
 };

package/dist/components/InfoGroup/InfoGroup.test.js

@@ -24,12 +24,12 @@ s("InfoGroup Test", () => {
       ]
     ] }));
     const n = t.getAllByTestId("infoGroupValue");
-    e(n.length).toBe(4), e(t.getByText("organization.create.registration-number")).toBeInTheDocument(), e(n[0]).toHaveTextContent("123"), e(t.getByText("myOrganizations.label-primary-contact")).toBeInTheDocument(), e(n[1]).toHaveTextContent("User A"), e(t.getByTestId("test-divider")).toBeInTheDocument(), e(t.getByText("myOrganizations.label-contact")).toBeInTheDocument(), e(n[2]).toHaveTextContent("User B"), e(t.getByText("organization.something-else")).toBeInTheDocument(), e(n[3]).toHaveTextContent("some");
+    e(n.length).toBe(4), e(t.getByText("organization.create.registration-number")).toBeInTheDocument(), e(n[0]).toHaveTextContent("123"), e(t.getByText("myOrganizations.label-primary-contact")).toBeInTheDocument(), e(n[1]).toHaveTextContent("User A"), e(t.getByTestId("infoGroup")).toBeInTheDocument(), e(t.getByTestId("singleRow")).toBeInTheDocument(), e(t.getAllByTestId("infoGroupItem").length).toBe(4), e(t.getByText("myOrganizations.label-contact")).toBeInTheDocument(), e(n[2]).toHaveTextContent("User B"), e(t.getByText("organization.something-else")).toBeInTheDocument(), e(n[3]).toHaveTextContent("some");
   }), i("render Single InfoGroup with component", () => {
     l(/* @__PURE__ */ o(r, { fields: [
       { label: "labelSouldntBeRendered", component: /* @__PURE__ */ o("div", { children: "Component" }) },
       { label: "myOrganizations.label-primary-contact", value: "User A" },
-      { label: "componentWithLabel", variant: "embedded", component: /* @__PURE__ */ o("div", { children: "Badge" }) }
+      { label: "componentWithLabel", componentVariant: "embedded", component: /* @__PURE__ */ o("div", { children: "Badge" }) }
     ] })), e(t.queryByText("labelSouldntBeRendered")).toBeNull(), e(t.getByText("Component")).toBeInTheDocument(), e(t.getByText("myOrganizations.label-primary-contact")).toBeInTheDocument(), e(t.getByText("User A")).toBeInTheDocument(), e(t.getByText("componentWithLabel")).toBeInTheDocument(), e(t.getByText("Badge")).toBeInTheDocument();
   });
 });

package/dist/enums/ThemeColor.d.ts

@@ -0,0 +1,15 @@
+export declare enum ThemeColor {
+    'primary' = 0,
+    'secondary' = 1,
+    'error' = 2,
+    'text-primary-on-background' = 3,
+    'text-secondary-on-background' = 4,
+    'text-hint-on-background' = 5,
+    'text-disabled-on-background' = 6,
+    'text-icon-on-background' = 7,
+    'text-primary-on-light' = 8,
+    'text-secondary-on-light' = 9,
+    'text-hint-on-light' = 10,
+    'text-disabled-on-light' = 11,
+    'text-icon-on-light' = 12
+}

package/dist/enums/ThemeColor.js

@@ -0,0 +1,4 @@
+var n = /* @__PURE__ */ ((t) => (t[t.primary = 0] = "primary", t[t.secondary = 1] = "secondary", t[t.error = 2] = "error", t[t["text-primary-on-background"] = 3] = "text-primary-on-background", t[t["text-secondary-on-background"] = 4] = "text-secondary-on-background", t[t["text-hint-on-background"] = 5] = "text-hint-on-background", t[t["text-disabled-on-background"] = 6] = "text-disabled-on-background", t[t["text-icon-on-background"] = 7] = "text-icon-on-background", t[t["text-primary-on-light"] = 8] = "text-primary-on-light", t[t["text-secondary-on-light"] = 9] = "text-secondary-on-light", t[t["text-hint-on-light"] = 10] = "text-hint-on-light", t[t["text-disabled-on-light"] = 11] = "text-disabled-on-light", t[t["text-icon-on-light"] = 12] = "text-icon-on-light", t))(n || {});
+export {
+  n as ThemeColor
+};