@hortiview/shared-components 0.0.11176 → 0.0.11587

package/dist/components/AlertBanner/AlertBanner.js

@@ -1,34 +1,34 @@
-import "../../assets/AlertBanner.css";
-import { jsx as e, Fragment as c, jsxs as _ } from "react/jsx-runtime";
-import { Group as g, TypoBody as l } from "@element/react-components";
-import { u as m } from "../../useBreakpoints-MzTZ0tCT.js";
-const d = "_messageContainer_1seos_1", p = "_info_1seos_9", u = "_danger_1seos_14", f = "_success_1seos_19", y = "_warning_1seos_24", n = {
+import { jsx as s, Fragment as c, jsxs as m } from "react/jsx-runtime";
+import { G as _ } from "../../index.es-DntoATwO.js";
+import { b as g } from "../../index.es-CF_xy2ns.js";
+import { u as l } from "../../useBreakpoints-MzTZ0tCT.js";
+import '../../assets/AlertBanner.css';const d = "_messageContainer_1seos_1", p = "_info_1seos_9", f = "_danger_1seos_14", u = "_success_1seos_19", y = "_warning_1seos_24", n = {
   messageContainer: d,
   info: p,
-  danger: u,
-  success: f,
+  danger: f,
+  success: u,
   warning: y
-}, A = ({
-  text: s,
+}, b = ({
+  text: e,
   color: r = "info",
   isOpen: o = !0,
   action: i,
   isBold: t = !0
 }) => {
-  const { isDesktop: a } = m();
-  return o ? /* @__PURE__ */ e("div", { className: `${n.messageContainer} ${n[r]}`, children: /* @__PURE__ */ _(
-    g,
+  const { isDesktop: a } = l();
+  return o ? /* @__PURE__ */ s("div", { className: `${n.messageContainer} ${n[r]}`, children: /* @__PURE__ */ m(
+    _,
     {
       direction: a ? "horizontal" : "vertical",
       primaryAlign: "space-between",
       secondaryAlign: "center",
       children: [
-        typeof s == "string" ? /* @__PURE__ */ e(l, { bold: t, level: 2, children: s }) : /* @__PURE__ */ e("div", { children: s }),
+        typeof e == "string" ? /* @__PURE__ */ s(g, { bold: t, level: 2, children: e }) : /* @__PURE__ */ s("div", { children: e }),
         i
       ]
     }
-  ) }) : /* @__PURE__ */ e(c, {});
+  ) }) : /* @__PURE__ */ s(c, {});
 };
 export {
-  A as AlertBanner
+  b as AlertBanner
 };

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

@@ -1,24 +1,26 @@
 import { jsx as e, Fragment as m } from "react/jsx-runtime";
-import { a as t, s } from "../../react.esm-FR1-H8iU.js";
-import { a as l } from "../../useBreakpoints-MzTZ0tCT.js";
+import { a as t, s } from "../../react.esm-DNwojocF.js";
+import { a } from "../../useBreakpoints-MzTZ0tCT.js";
 import { AlertBanner as n } from "./AlertBanner.js";
-import { d as c, b as p, v as a, t as r, g as o } from "../../vi.CjhMlMwf-DWv7vrn7.js";
-c("AlertBanner Test", () => {
-  p(() => {
-    a.spyOn(l, "useBreakpoints").mockReturnValue({
+import { d as p, b as c, v as l, t as r, g as o } from "../../vi.CjhMlMwf-BCJNwXvu.js";
+p("AlertBanner Test", () => {
+  c(() => {
+    l.spyOn(a, "useBreakpoints").mockReturnValue({
       isMobile: !1,
       isTablet: !1,
-      isDesktop: !0
+      isDesktop: !0,
+      isDesktopNavbar: !0
     });
   }), r("render AlertBanner with text", () => {
     t(/* @__PURE__ */ e(n, { text: "Test" })), o(s.getByText("Test")).toBeInTheDocument();
   }), r("render AlertBanner with element", () => {
     t(/* @__PURE__ */ e(n, { text: /* @__PURE__ */ e(m, { children: "Element" }) })), o(s.getByText("Element")).toBeInTheDocument();
   }), r("renders AlertBanner with vertical style (flex-direction: column) when screen is small", () => {
-    a.spyOn(l, "useBreakpoints").mockReturnValue({
+    l.spyOn(a, "useBreakpoints").mockReturnValue({
       isMobile: !0,
       isTablet: !1,
-      isDesktop: !1
+      isDesktop: !1,
+      isDesktopNavbar: !1
     }), t(/* @__PURE__ */ e(n, { text: "Test" }));
     const i = s.getByText("Test").closest(".lmnt.lmnt-group");
     o(i).toHaveStyle(

package/dist/components/BaseView/BaseView.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import { BaseListElement } from '../../types/ListElement';
 import { LinkProps } from '../../types/internal/ReactRouterTypes';
+
 type BaseViewProps = {
     /**
      * elements to be displayed in the list area

package/dist/components/BaseView/BaseView.js

@@ -1,69 +1,68 @@
-import "../../assets/BaseView.css";
-import { jsx as i, Fragment as x, jsxs as s } from "react/jsx-runtime";
-import { Group as o } from "@element/react-components";
+import { jsx as e, Fragment as x, jsxs as s } from "react/jsx-runtime";
+import { G as r } from "../../index.es-DntoATwO.js";
 import { useMemo as d } from "react";
 import { BasicHeading as u } from "../BasicHeading/BasicHeading.js";
 import { EmptyView as W } from "../EmptyView/EmptyView.js";
 import { ListArea as B } from "../ListArea/ListArea.js";
 import { VerticalDivider as N } from "../VerticalDivider/VerticalDivider.js";
 import { u as A } from "../../useBreakpoints-MzTZ0tCT.js";
-const V = "_divider_dw2rc_1", j = "_maxWidth_dw2rc_5", E = "_desktopList_dw2rc_9", H = "_mobileList_dw2rc_13", I = "_desktopDetail_dw2rc_17", y = "_mobileDetail_dw2rc_21", r = {
+import '../../assets/BaseView.css';const V = "_divider_dw2rc_1", j = "_maxWidth_dw2rc_5", E = "_desktopList_dw2rc_9", G = "_mobileList_dw2rc_13", H = "_desktopDetail_dw2rc_17", I = "_mobileDetail_dw2rc_21", o = {
   divider: V,
   maxWidth: j,
   desktopList: E,
-  mobileList: H,
-  desktopDetail: I,
-  mobileDetail: y
-}, Q = ({
+  mobileList: G,
+  desktopDetail: H,
+  mobileDetail: I
+}, P = ({
   action: l,
   heading: c,
-  elements: n,
+  elements: a,
   emptyText: m,
   hasSearch: p = !0,
   isSorted: h = !0,
   className: _,
-  withAvatar: f = !1,
-  listMaxHeight: v = "calc(100vh - 200px)",
-  pathname: a,
+  withAvatar: v = !1,
+  listMaxHeight: f = "calc(100vh - 200px)",
+  pathname: n,
   routerLinkElement: w,
   searchPlaceholder: b
 }) => {
-  const { isDesktopNavbar: e } = A(), t = d(() => n.find((L) => L.route === a), [a, n]), D = d(() => t?.component ?? (e ? /* @__PURE__ */ i(W, { subtitle: m }) : /* @__PURE__ */ i(x, {})), [t, e, m]), g = d(() => e ? !0 : !t, [t, e]), k = d(() => e ? !0 : t, [t, e]);
-  return /* @__PURE__ */ s(o, { "data-testid": "base-view-container", className: _ ?? "", gap: "", fullWidth: !0, children: [
-    g && /* @__PURE__ */ i(o, { gap: "none", className: e ? r.desktopList : r.mobileList, children: /* @__PURE__ */ s(o, { direction: "vertical", fullWidth: !0, gap: e ? "standard" : "dense", children: [
-      c && /* @__PURE__ */ i(u, { "data-testid": "heading", heading: c, level: 4, marginBottom: 0, children: l }),
-      /* @__PURE__ */ i(
+  const { isDesktopNavbar: i } = A(), t = d(() => a.find((L) => L.route === n), [n, a]), D = d(() => t?.component ?? (i ? /* @__PURE__ */ e(W, { subtitle: m }) : /* @__PURE__ */ e(x, {})), [t, i, m]), g = d(() => i ? !0 : !t, [t, i]), k = d(() => i ? !0 : t, [t, i]);
+  return /* @__PURE__ */ s(r, { "data-testid": "base-view-container", className: _ ?? "", gap: "", fullWidth: !0, children: [
+    g && /* @__PURE__ */ e(r, { gap: "none", className: i ? o.desktopList : o.mobileList, children: /* @__PURE__ */ s(r, { direction: "vertical", fullWidth: !0, gap: i ? "standard" : "dense", children: [
+      c && /* @__PURE__ */ e(u, { "data-testid": "heading", heading: c, level: 4, marginBottom: 0, children: l }),
+      /* @__PURE__ */ e(
         B,
         {
-          elements: n,
+          elements: a,
           hasSearch: p,
-          maxHeight: v,
+          maxHeight: f,
           isSorted: h,
-          pathname: a,
+          pathname: n,
           routerLinkElement: w,
           searchPlaceholder: b
         }
       )
     ] }) }),
     k && /* @__PURE__ */ s(
-      o,
+      r,
       {
         "data-testid": "details",
         gap: "none",
-        className: e ? r.desktopDetail : r.mobileDetail,
+        className: i ? o.desktopDetail : o.mobileDetail,
         children: [
-          e && /* @__PURE__ */ i(N, { className: r.divider, height: "100%" }),
-          /* @__PURE__ */ s(o, { direction: "vertical", fullWidth: !0, children: [
-            /* @__PURE__ */ i(
+          i && /* @__PURE__ */ e(N, { className: o.divider, height: "100%" }),
+          /* @__PURE__ */ s(r, { direction: "vertical", fullWidth: !0, children: [
+            /* @__PURE__ */ e(
               u,
               {
-                className: r.maxWidth,
+                className: o.maxWidth,
                 heading: t?.detailTitle ?? t?.title ?? "",
                 level: 4,
                 icon: t?.hideIconInDetail === !0 ? void 0 : t?.icon,
                 marginBottom: 0,
                 invisibleButton: t?.detailAction === void 0,
-                withAvatar: f,
+                withAvatar: v,
                 children: t?.detailAction ?? l
               }
             ),
@@ -75,5 +74,5 @@ const V = "_divider_dw2rc_1", j = "_maxWidth_dw2rc_5", E = "_desktopList_dw2rc_9
   ] });
 };
 export {
-  Q as BaseView
+  P as BaseView
 };

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

@@ -1,10 +1,10 @@
 import { jsx as a, Fragment as s } from "react/jsx-runtime";
-import { a as o, s as e, f as p } from "../../react.esm-FR1-H8iU.js";
+import { a as r, s as e, f as p } from "../../react.esm-DNwojocF.js";
 import { a as l } from "../../useBreakpoints-MzTZ0tCT.js";
-import { BaseView as r } from "./BaseView.js";
-import { d as u, b as d, v as c, t as i, g as t } from "../../vi.CjhMlMwf-DWv7vrn7.js";
+import { BaseView as i } from "./BaseView.js";
+import { d as u, b as m, v as c, t as n, g as t } from "../../vi.CjhMlMwf-BCJNwXvu.js";
 u("BaseView Test", () => {
-  d(() => {
+  m(() => {
     c.spyOn(l, "useBreakpoints").mockReturnValue({
       isMobile: !1,
       isTablet: !1,
@@ -12,7 +12,7 @@ u("BaseView Test", () => {
       isDesktopNavbar: !0
     });
   });
-  const n = [
+  const o = [
     {
       id: "1",
       title: "user.personal_information",
@@ -37,13 +37,13 @@ u("BaseView Test", () => {
       component: /* @__PURE__ */ a(s, { children: "Security selected" })
     }
   ];
-  i("render BaseView with empty view and navigation list", () => {
-    o(
+  n("render BaseView with empty view and navigation list", () => {
+    r(
       /* @__PURE__ */ a(
-        r,
+        i,
         {
           pathname: "/personal-profile",
-          elements: n,
+          elements: o,
           heading: "user.personal-profile",
           hasSearch: !1,
           emptyText: "user.noselection",
@@ -52,13 +52,13 @@ u("BaseView Test", () => {
         }
       )
     ), t(e.getByText("user.noselection")).toBeInTheDocument(), t(e.getByText("user.personal-profile")).toBeInTheDocument(), t(e.getByText("user.personal_information")).toBeInTheDocument(), t(e.getByText("user.data_privacy")).toBeInTheDocument(), t(e.getByText("user.security")).toBeInTheDocument();
-  }), i("render BaseView with data and navigation list", () => {
-    o(
+  }), n("render BaseView with data and navigation list", () => {
+    r(
       /* @__PURE__ */ a(
-        r,
+        i,
         {
           pathname: "/personal-profile/personal-information",
-          elements: n,
+          elements: o,
           heading: "user.personal-profile",
           hasSearch: !1,
           emptyText: "user.noselection",
@@ -67,13 +67,13 @@ u("BaseView Test", () => {
         }
       )
     ), t(e.getByText("Personal information selected")).toBeInTheDocument(), t(e.getAllByText("account_circle")).toHaveLength(2), t(e.getAllByText("user.personal_information")).toHaveLength(2);
-  }), i("render BaseView with custom detail title and no detail icon", () => {
-    o(
+  }), n("render BaseView with custom detail title and no detail icon", () => {
+    r(
       /* @__PURE__ */ a(
-        r,
+        i,
         {
           pathname: "/personal-profile/data-privacy",
-          elements: n,
+          elements: o,
           heading: "user.personal-profile",
           hasSearch: !1,
           emptyText: "user.noselection",
@@ -82,18 +82,18 @@ u("BaseView Test", () => {
         }
       )
     ), t(e.getByText("Data Privacy selected")).toBeInTheDocument(), t(e.getByText("Data Privacy 2000")).toBeInTheDocument(), t(e.getAllByText("privacy_tip")).toHaveLength(1), t(e.getAllByText("user.data_privacy")).toHaveLength(1);
-  }), i("hide empty view when screen is small", () => {
+  }), n("hide empty view when screen is small", () => {
     c.spyOn(l, "useBreakpoints").mockReturnValue({
       isMobile: !0,
       isTablet: !1,
       isDesktop: !1,
       isDesktopNavbar: !1
-    }), o(
+    }), r(
       /* @__PURE__ */ a(
-        r,
+        i,
         {
           pathname: "/personal-profile/data-privacy",
-          elements: n,
+          elements: o,
           heading: "user.personal-profile",
           hasSearch: !1,
           emptyText: "user.noselection",
@@ -102,13 +102,13 @@ u("BaseView Test", () => {
         }
       )
     ), t(e.queryByText("user.noselection")).not.toBeInTheDocument();
-  }), i("render BaseView with selected detail section", () => {
-    o(
+  }), n("render BaseView with selected detail section", () => {
+    r(
       /* @__PURE__ */ a(
-        r,
+        i,
         {
           pathname: "/personal-profile/data-privacy",
-          elements: n,
+          elements: o,
           heading: "user.personal-profile",
           hasSearch: !1,
           emptyText: "user.noselection",

package/dist/components/BasicHeading/BasicHeading.d.ts

@@ -1,4 +1,5 @@
 import { PropsWithChildren } from 'react';
+
 export type BasicHeadingProps = {
     /**
      * the text content of the heading

package/dist/components/BasicHeading/BasicHeading.js

@@ -1,17 +1,17 @@
-import "../../assets/BasicHeading.css";
 import { jsxs as o, jsx as i } from "react/jsx-runtime";
-import { TypoDisplay as u, TypoBody as y, Icon as C } from "@element/react-components";
+import { I as u } from "../../index.es-3043KTnb.js";
+import { T as y, b as C } from "../../index.es-CF_xy2ns.js";
 import { Iconify as w } from "../Iconify/Iconify.js";
 import { AvailableCustomIcons as j } from "../../enums/AvailableCustomIcons.js";
 import { u as I } from "../../useBreakpoints-MzTZ0tCT.js";
 import { OverflowTooltip as B } from "../OverflowTooltip/OverflowTooltip.js";
-const N = "_pageHeader_gwnjc_1", H = "_actionButtonContainer_gwnjc_16", b = "_leadingIcon_gwnjc_31", x = "_headingWrapper_gwnjc_35", A = "_headingContainer_gwnjc_40", T = "_invisible_gwnjc_45", W = "_withAvatar_gwnjc_49", $ = "_iconContainer_gwnjc_54", n = {
+import '../../assets/BasicHeading.css';const N = "_pageHeader_gwnjc_1", b = "_actionButtonContainer_gwnjc_16", H = "_leadingIcon_gwnjc_31", T = "_headingWrapper_gwnjc_35", x = "_headingContainer_gwnjc_40", A = "_invisible_gwnjc_45", W = "_withAvatar_gwnjc_49", $ = "_iconContainer_gwnjc_54", n = {
   pageHeader: N,
-  actionButtonContainer: H,
-  leadingIcon: b,
-  headingWrapper: x,
-  headingContainer: A,
-  invisible: T,
+  actionButtonContainer: b,
+  leadingIcon: H,
+  headingWrapper: T,
+  headingContainer: x,
+  invisible: A,
   withAvatar: W,
   iconContainer: $
 }, k = ({ icon: e }) => e ? typeof e != "string" ? /* @__PURE__ */ i("div", { className: n.iconContainer, children: e }) : e in j ? /* @__PURE__ */ i(
@@ -22,10 +22,10 @@ const N = "_pageHeader_gwnjc_1", H = "_actionButtonContainer_gwnjc_16", b = "_le
     iconSize: "large",
     iconType: "filled"
   }
-) : /* @__PURE__ */ i(C, { iconSize: "large", iconType: "filled", icon: e, className: n.leadingIcon }) : null, R = ({
+) : /* @__PURE__ */ i(u, { iconSize: "large", iconType: "filled", icon: e, className: n.leadingIcon }) : null, R = ({
   children: e,
-  marginBottom: t,
-  heading: a,
+  marginBottom: a,
+  heading: t,
   icon: d,
   className: p,
   subHeading: r,
@@ -36,8 +36,8 @@ const N = "_pageHeader_gwnjc_1", H = "_actionButtonContainer_gwnjc_16", b = "_le
   withAvatar: _ = !1
 }) => {
   const { isDesktop: l } = I(), f = l ? s : s + 1, h = c === "bold" ? 500 : c, v = () => {
-    if (t !== void 0)
-      return typeof t == "number" ? `${t}px` : "2rem";
+    if (a !== void 0)
+      return typeof a == "number" ? `${a}px` : "2rem";
   };
   return /* @__PURE__ */ o(
     "div",
@@ -53,17 +53,17 @@ const N = "_pageHeader_gwnjc_1", H = "_actionButtonContainer_gwnjc_16", b = "_le
             children: [
               /* @__PURE__ */ i(k, { icon: d }),
               /* @__PURE__ */ o("div", { className: r ? n.headingContainer : "", children: [
-                /* @__PURE__ */ i(B, { id: a, text: a, children: /* @__PURE__ */ i(
-                  u,
+                /* @__PURE__ */ i(B, { id: t, text: t, children: /* @__PURE__ */ i(
+                  y,
                   {
                     level: f,
                     "data-testid": "Header",
                     className: p ?? "",
                     style: { fontWeight: h },
-                    children: a
+                    children: t
                   }
                 ) }),
-                /* @__PURE__ */ i(y, { level: g, children: r })
+                /* @__PURE__ */ i(C, { level: g, children: r })
               ] })
             ]
           }

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

@@ -1,11 +1,11 @@
 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-FR1-H8iU.js";
-import { d as h, t as s, g as e } from "../../vi.CjhMlMwf-DWv7vrn7.js";
+import { B as g } from "../../index.es-CiqbARoC.js";
+import { a, s as n } from "../../react.esm-DNwojocF.js";
+import { BasicHeading as i } from "./BasicHeading.js";
+import { d as h, t as s, g as e } from "../../vi.CjhMlMwf-BCJNwXvu.js";
 h("BasicHeading-Test", () => {
   s("render small container without content", () => {
-    i(/* @__PURE__ */ o(a, { heading: "Test" }));
+    a(/* @__PURE__ */ o(i, { heading: "Test" }));
     const t = n.getByTestId("HeaderContainer");
     e(t).toBeDefined(), e(t).toHaveClass(/pageHeader/);
     const r = n.getByTestId("Header");
@@ -13,8 +13,8 @@ h("BasicHeading-Test", () => {
     const d = n.getByTestId("RightPart");
     e(d).toBeDefined();
   }), s("render large container with children", () => {
-    i(
-      /* @__PURE__ */ o(a, { heading: "Test", marginBottom: "large", children: /* @__PURE__ */ o(g, { children: "Extracontent" }) })
+    a(
+      /* @__PURE__ */ o(i, { heading: "Test", marginBottom: "large", children: /* @__PURE__ */ o(g, { children: "Extracontent" }) })
     );
     const t = n.getByTestId("HeaderContainer");
     e(t).toBeDefined();
@@ -23,13 +23,13 @@ h("BasicHeading-Test", () => {
     const d = n.getByTestId("RightPart");
     e(d).toBeDefined(), e(d).toContainHTML("<button");
   }), s("render with available custom icon", () => {
-    i(/* @__PURE__ */ o(a, { heading: "Test", icon: "farm" }));
+    a(/* @__PURE__ */ o(i, { heading: "Test", icon: "farm" }));
     const t = n.getByTestId("farm");
     e(t).toBeInTheDocument();
   }), s("render with JSX element as icon", () => {
-    i(/* @__PURE__ */ o(a, { heading: "Test", icon: /* @__PURE__ */ o(c, { children: "JSX" }) })), e(n.getByText("JSX")).toBeInTheDocument();
+    a(/* @__PURE__ */ o(i, { heading: "Test", icon: /* @__PURE__ */ o(c, { children: "JSX" }) })), e(n.getByText("JSX")).toBeInTheDocument();
   }), s("render with other icon", () => {
-    i(/* @__PURE__ */ o(a, { heading: "Test", icon: "contact_support" }));
+    a(/* @__PURE__ */ o(i, { heading: "Test", icon: "contact_support" }));
     const t = document.querySelector("i");
     e(t).toHaveTextContent("contact_support");
   });

package/dist/components/BlockView/BlockView.d.ts

@@ -1,4 +1,5 @@
 import { Block } from '../../types/internal/Block';
+
 type BlockViewProps<T extends Block> = {
     /**
      * number of rows the will be rendered

package/dist/components/BlockView/BlockView.js

@@ -1,9 +1,8 @@
-import "../../assets/BlockView.css";
 import { jsxs as h, jsx as c } from "react/jsx-runtime";
-import { TypoSubtitle as T, TypoDisplay as L } from "@element/react-components";
+import { d as T, T as L } from "../../index.es-CF_xy2ns.js";
 import { useState as R, useEffect as B, useMemo as C } from "react";
 import { getBlockNumberByDto as E } from "../../services/BlockService.js";
-const A = "_grid_lihp2_1", D = "_black_lihp2_11", S = "_blockLayout_lihp2_15", M = "_blockRow_lihp2_27", V = "_block_lihp2_15", j = "_active_lihp2_46", q = "_error_lihp2_52", F = "_empty_lihp2_58", G = "_blockText_lihp2_62", e = {
+import '../../assets/BlockView.css';const A = "_grid_lihp2_1", D = "_black_lihp2_11", S = "_blockLayout_lihp2_15", M = "_blockRow_lihp2_27", V = "_block_lihp2_15", j = "_active_lihp2_46", q = "_error_lihp2_52", F = "_empty_lihp2_58", G = "_blockText_lihp2_62", o = {
   grid: A,
   black: D,
   blockLayout: S,
@@ -13,13 +12,13 @@ const A = "_grid_lihp2_1", D = "_black_lihp2_11", S = "_blockLayout_lihp2_15", M
   error: q,
   empty: F,
   blockText: G
-}, P = ({
-  rows: n,
-  columns: t,
+}, O = ({
+  rows: s,
+  columns: e,
   hideText: b = !1,
   errorBlocks: y = [],
-  showNumbers: f = !0,
-  clickable: v = !0,
+  showNumbers: v = !0,
+  clickable: f = !0,
   size: m = 15,
   onClick: k = null,
   currentBlock: i,
@@ -30,34 +29,34 @@ const A = "_grid_lihp2_1", D = "_black_lihp2_11", S = "_blockLayout_lihp2_15", M
   const [d, p] = R(0);
   B(() => {
     if (!i) return;
-    const l = E(i, t);
+    const l = E(i, e);
     p(l);
-  }, [i, t]);
-  const w = C(() => n * t, [n, t]), $ = (l) => {
+  }, [i, e]);
+  const w = C(() => s * e, [s, e]), $ = (l) => {
     k && k(l, i ?? void 0);
-  }, x = ({ row: l, column: r }) => _.length === 0 ? !0 : _.some((s) => s.position?.row === l && s.position?.column === r);
-  return /* @__PURE__ */ h("div", { "data-testid": "block-view-container", className: e.grid, children: [
-    !b && /* @__PURE__ */ c(T, { level: 1, bold: !0, className: e.black, children: N }),
-    /* @__PURE__ */ c("div", { className: e.blockLayout, style: { width: `${m}rem`, height: `${m}rem` }, children: Array.from({ length: n }).map((l, r) => /* @__PURE__ */ c("div", { className: e.blockRow, children: Array.from({ length: t }).map((s, a) => {
-      const o = t * r + a + 1, u = x({ row: r + 1, column: a + 1 });
+  }, x = ({ row: l, column: r }) => _.length === 0 ? !0 : _.some((a) => a.position?.row === l && a.position?.column === r);
+  return /* @__PURE__ */ h("div", { "data-testid": "block-view-container", className: o.grid, children: [
+    !b && /* @__PURE__ */ c(T, { level: 1, bold: !0, className: o.black, children: N }),
+    /* @__PURE__ */ c("div", { className: o.blockLayout, style: { width: `${m}rem`, height: `${m}rem` }, children: Array.from({ length: s }).map((l, r) => /* @__PURE__ */ c("div", { className: o.blockRow, children: Array.from({ length: e }).map((a, n) => {
+      const t = e * r + n + 1, u = x({ row: r + 1, column: n + 1 });
       return /* @__PURE__ */ c(
         "div",
         {
           "data-testid": "block-view-block",
-          className: `${e.block} ${d === o ? e.active : ""} ${u ? "" : e.empty} ${y.includes(o) ? e.error : ""}`,
-          id: `block${o}`,
-          onClick: v ? () => {
-            p(o), $({ row: r + 1, column: a + 1 });
+          className: `${o.block} ${d === t ? o.active : ""} ${u ? "" : o.empty} ${y.includes(t) ? o.error : ""}`,
+          id: `block${t}`,
+          onClick: f ? () => {
+            p(t), $({ row: r + 1, column: n + 1 });
           } : void 0,
-          children: f && u && /* @__PURE__ */ c(
+          children: v && u && /* @__PURE__ */ c(
             "div",
             {
-              className: `${e.blockText} ${d === o ? e.black : ""}`,
-              children: o
+              className: `${o.blockText} ${d === t ? o.black : ""}`,
+              children: t
             }
           )
         },
-        o
+        t
       );
     }) }, r)) }),
     !b && /* @__PURE__ */ h(L, { themeColor: "primary", level: 6, children: [
@@ -68,5 +67,5 @@ const A = "_grid_lihp2_1", D = "_black_lihp2_11", S = "_blockLayout_lihp2_15", M
   ] });
 };
 export {
-  P as BlockView
+  O as BlockView
 };

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

@@ -1,7 +1,7 @@
 import { jsx as l } from "react/jsx-runtime";
-import { a as s, s as o, f as n } from "../../react.esm-FR1-H8iU.js";
+import { a as s, s as o, f as n } from "../../react.esm-DNwojocF.js";
 import { BlockView as i } from "./BlockView.js";
-import { d as a, v as B, t as r, g as t } from "../../vi.CjhMlMwf-DWv7vrn7.js";
+import { d as a, v as B, t as r, g as t } from "../../vi.CjhMlMwf-BCJNwXvu.js";
 a("BlockView Test", () => {
   const c = B.fn(), e = {
     id: "1",