@hortiview/shared-components 0.0.1

package/README.md

@@ -0,0 +1,34 @@
+# Status
+
+[![Build Status](https://dev.azure.com/sdundc/HV%20Platform/_apis/build/status%2FHortiView-Frontend-Shared-Publish?branchName=main)](https://dev.azure.com/sdundc/HV%20Platform/_build/latest?definitionId=88&branchName=main)
+
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+}
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

package/dist/ListAreaService-D16C1IfO.js

@@ -0,0 +1,67 @@
+import "./assets/ListAreaService.css";
+import { jsx as a } from "react/jsx-runtime";
+import { TypoButton as B, TypoSubtitle as b, TypoBody as L, Icon as C } from "@element/react-components";
+import { Iconify as x } from "./components/Iconify/Iconify.js";
+import { AvailableCustomIcons as E } from "./enums/AvailableCustomIcons.js";
+const N = "_fullWidth_tiknm_1", W = "_mainElevation_tiknm_9", $ = "_searchbar_tiknm_21", j = "_roundedBottom_tiknm_37", S = "_list_tiknm_47", w = "_listItem_tiknm_95", A = "_trailingIcon_tiknm_103", G = "_groupedListItem_tiknm_127", _ = {
+  fullWidth: N,
+  mainElevation: W,
+  searchbar: $,
+  roundedBottom: j,
+  list: S,
+  listItem: w,
+  trailingIcon: A,
+  groupedListItem: G
+}, J = (o, e, n, r) => {
+  const s = o.reduce((i, m) => {
+    const { groupName: t, ...c } = m;
+    return !t || typeof t != "string" || (i[t] || (i[t] = {
+      groupName: /* @__PURE__ */ a(B, { children: t }),
+      id: t,
+      items: []
+    }), i[t].items = [
+      ...i[t].items,
+      g(c, e, n, !0, r)
+    ]), i;
+  }, {});
+  return Object.values(s);
+}, K = (o, e, n, r) => o.map((s) => g(s, e, n, !1, r)), g = (o, e, n, r, s) => {
+  const {
+    title: i,
+    subTitle: m,
+    route: t,
+    value: c,
+    noNavigation: d,
+    disabled: I,
+    icon: v,
+    iconType: p,
+    trailingIcon: y,
+    trailingIconType: f,
+    actionButton: k,
+    onClick: h,
+    customTitle: u
+  } = o, l = e === t;
+  return {
+    select: l,
+    primaryText: u ?? /* @__PURE__ */ a(b, { level: 1, bold: l, themeColor: l ? "primary" : void 0, children: i }),
+    secondaryText: m && !u ? /* @__PURE__ */ a(L, { level: 2, themeColor: l ? "primary" : void 0, children: m }) : void 0,
+    trailingBlock: k ?? y ?? /* @__PURE__ */ a(C, { icon: "arrow_right" }),
+    leadingBlock: O(v),
+    nonInteractive: I,
+    value: c,
+    componentProps: {
+      leadingBlockType: p ?? "icon",
+      trailingBlockType: f ?? "icon",
+      className: `${p === "avatar" ? "" : _.listItem} ${n} ${r ? _.groupedListItem : ""}`,
+      onClick: (P, T) => h?.(T),
+      tag: d ? void 0 : s ?? "a",
+      to: d ? void 0 : t
+    }
+  };
+}, O = (o) => typeof o == "string" && o in E ? /* @__PURE__ */ a(x, { icon: o }) : o;
+export {
+  K as a,
+  J as g,
+  g as m,
+  _ as s
+};

package/dist/_commonjsHelpers-CT_km90n.js

@@ -0,0 +1,30 @@
+var u = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
+function f(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+}
+function l(e) {
+  if (e.__esModule)
+    return e;
+  var r = e.default;
+  if (typeof r == "function") {
+    var t = function o() {
+      return this instanceof o ? Reflect.construct(r, arguments, this.constructor) : r.apply(this, arguments);
+    };
+    t.prototype = r.prototype;
+  } else
+    t = {};
+  return Object.defineProperty(t, "__esModule", { value: !0 }), Object.keys(e).forEach(function(o) {
+    var n = Object.getOwnPropertyDescriptor(e, o);
+    Object.defineProperty(t, o, n.get ? n : {
+      enumerable: !0,
+      get: function() {
+        return e[o];
+      }
+    });
+  }), t;
+}
+export {
+  l as a,
+  u as c,
+  f as g
+};

package/dist/assets/BaseView.css

@@ -0,0 +1 @@
+._divider_1uelt_1{margin:0 2rem}

package/dist/assets/BasicHeading.css

@@ -0,0 +1 @@
+._pageHeader_1hm8h_1{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;width:100%;margin-bottom:1rem;align-self:end}._headlineContainer_1hm8h_21,._actionButtonContainer_1hm8h_31{display:flex;align-items:center}._actionButtonContainer_1hm8h_31>button{max-height:48px}._content_1hm8h_49{display:flex;justify-content:space-between;gap:1.5rem}._leadingIcon_1hm8h_61{margin-right:.8rem}._headingWrapper_1hm8h_75{display:flex;align-items:center}._headingContainer_1hm8h_85{display:flex;flex-direction:column}._invisible_1hm8h_95{visibility:hidden}._withAvatar_1hm8h_103{margin-left:.25rem;padding-right:1rem;margin-top:0rem}._withAvatar_1hm8h_103>._iconContainer_1hm8h_113{scale:1.1}._iconContainer_1hm8h_113{padding-right:.5rem}

package/dist/assets/BlockView.css

@@ -0,0 +1 @@
+._grid_8fci1_1{display:flex;padding-bottom:0;flex-direction:column;justify-content:center;align-items:center;gap:1rem;align-self:stretch}._black_8fci1_21{color:#000}._blockLayout_8fci1_29{padding:.5rem;gap:.5rem;display:flex;flex-direction:column;border-radius:.5rem;background:var(--secondary-color-ramp-200, #b9e5ff);width:15rem;height:15rem}._blockRow_8fci1_53{display:flex;flex-direction:row;gap:.5rem;height:100%;align-self:stretch}._block_8fci1_29{flex:auto;border-radius:.25rem;background:var(--secondary-color-ramp-600, #3599d1);align-items:center;display:flex;justify-content:center;position:relative}._block_8fci1_29._active_8fci1_91{border:2px solid var(--lmnt-theme-primary, #673ab7);background:var(--primary-color-ramp-100, #c7b7e4);margin:-2px}._block_8fci1_29._error_8fci1_103{border:2px solid var(--danger-danger, #cf2d22);background:var(--danger-color-ramp-050, #ffeaed);margin:-2px}._block_8fci1_29._empty_8fci1_115{margin:-2px;border:2px solid var(--lmnt-theme-on-surface-disabled);background:var(--lmnt-theme-surface-variant);color:var(--lmnt-theme-on-surface-disabled)}._blockText_8fci1_129{display:flex;justify-content:center;position:absolute;width:1vw;height:1vh;align-items:center}

package/dist/assets/HashTabView.css

@@ -0,0 +1 @@
+._elevation_1whcw_1{width:100%;border-radius:.5rem}._themeBackground_1whcw_11{background:var(--lmnt-theme-background)}._tabBar_1whcw_19{background:transparent;align-self:flex-end;border-radius:.5rem}._tabWrapper_1whcw_31{border-bottom:1px solid var(--lmnt-theme-on-surface-stroke)}._tabButton_1whcw_39{height:3.5rem!important}._childContainer_1whcw_47{width:25rem}._childContainerLg_1whcw_55{width:100%}

package/dist/assets/Iconify.css

@@ -0,0 +1 @@
+._image_diw9r_1>svg{width:inherit;height:inherit;color:inherit}

package/dist/assets/ListAreaService.css

@@ -0,0 +1 @@
+._fullWidth_tiknm_1{width:100%}._mainElevation_tiknm_9{background:var(--lmnt-theme-background);border-radius:.5rem;width:100%}._searchbar_tiknm_21 div{border:none}._searchbar_tiknm_21 button{margin-right:.5rem}._roundedBottom_tiknm_37{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}._list_tiknm_47{padding-top:0;padding-bottom:0;overflow-y:auto}._list_tiknm_47::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,.2);border-radius:.5rem;margin-right:.25rem;background-color:var(--lmnt-theme-background)}._list_tiknm_47::-webkit-scrollbar{width:.5rem;background-color:var(--lmnt-theme-background)}._list_tiknm_47::-webkit-scrollbar-thumb{border-radius:.5rem;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:var(--lmnt-theme-primary-on-surface)}._listItem_tiknm_95{border-bottom:.0775rem solid var(--lmnt-utility-gray-surface)}._listItem_tiknm_95 i:not(._trailingIcon_tiknm_103){color:var(--lmnt-theme-on-surface-inactive)}._listItem_tiknm_95 i._trailingIcon_tiknm_103{color:var(--lmnt-theme-on-surface-disabled)}._listItem_tiknm_95 [class^=mdc-list-item__start]{margin:0 1rem!important;align-self:center!important}._groupedListItem_tiknm_127{height:4.5rem!important}

package/dist/assets/SearchBar.css

@@ -0,0 +1 @@
+._searchbar_1fl50_1 button{color:var(--lmnt-theme-on-surface-inactive)!important}

package/dist/assets/VerticalDivider.css

@@ -0,0 +1 @@
+._divider_dqwln_1{border-left:1px solid var(--lmnt-theme-on-surface-stroke)}

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

@@ -0,0 +1,55 @@
+import { LinkProps } from '../../types/internal/ReactRouterTypes';
+import { BaseListElement } from '../../types/ListElement';
+type BaseViewProps = {
+    /**
+     * elements to be displayed in the list area
+     */
+    elements: BaseListElement[];
+    /**
+     * text to be displayed when the list is empty
+     */
+    emptyText: string;
+    /**
+     * pathname of the current route, use react-router to have the best experience (use useLocation and its pathname property)
+     */
+    pathname: string;
+    /**
+     * heading of the list area
+     */
+    heading?: string;
+    /**
+     * action to be displayed in the headings ActionButton
+     */
+    action?: JSX.Element;
+    /**
+     * isSorted is true if the list should be sorted, @default true
+     */
+    isSorted?: boolean;
+    /**
+     * hasSearch is true if the list should have a search input, @default true
+     */
+    hasSearch?: boolean;
+    /**
+     * optional className is the class name of the component
+     */
+    className?: string;
+    /**
+     * withAvatar is true if the list should have an avatar, @default false
+     */
+    withAvatar?: boolean;
+    /**
+     * listMaxHeight is the max height of the list, @default 'calc(100vh - 200px)'
+     */
+    listMaxHeight?: string;
+    /**
+     * routerLinkElement is the element to be used for the elements link, use react-router Link component for the best experience.
+     * If the element has `noNavigation=false` and the `routerLinkElement` is undefined an `<a>` tag is used.
+     * @default undefined
+     */
+    routerLinkElement: undefined | React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+};
+/**
+ * `BaseView` is a layout component that displays a main (a list) and a detail section.
+ */
+export declare const BaseView: ({ action, heading, elements, emptyText, hasSearch, isSorted, className, withAvatar, listMaxHeight, pathname, routerLinkElement, }: BaseViewProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/BaseView/BaseView.js

@@ -0,0 +1,63 @@
+import "../../assets/BaseView.css";
+import { jsx as t, Fragment as w, jsxs as e } from "react/jsx-runtime";
+import { useMemo as n } from "react";
+import { EmptyView as x } from "../EmptyView/EmptyView.js";
+import { ListArea as k } from "../ListArea/ListArea.js";
+import { VerticalDivider as A } from "../VerticalDivider/VerticalDivider.js";
+import { u as H } from "../../useBreakpoint-DyAmuka7.js";
+import { Grid as L, GridRow as V, GridCol as u, Group as m } from "@element/react-components";
+import { BasicHeading as a } from "../BasicHeading/BasicHeading.js";
+const W = "_divider_1uelt_1", _ = {
+  divider: W
+}, q = ({
+  action: d,
+  heading: c,
+  elements: o,
+  emptyText: s,
+  hasSearch: h = !0,
+  isSorted: p = !0,
+  className: f,
+  withAvatar: v = !1,
+  listMaxHeight: g = "calc(100vh - 200px)",
+  pathname: l,
+  routerLinkElement: C
+}) => {
+  const { isLg: r } = H(), i = n(() => o.find((b) => b.route === l), [l, o]), B = n(() => i?.component ?? (r ? /* @__PURE__ */ t(x, { subtitle: s }) : /* @__PURE__ */ t(w, {})), [i, r, s]), G = n(() => r ? !0 : !i, [i, r]);
+  return /* @__PURE__ */ t(L, { className: f ?? "", fullHeight: !0, fullWidth: !0, columnGap: 0, children: /* @__PURE__ */ e(V, { children: [
+    G && /* @__PURE__ */ e(u, { desktopCol: 4, tabletCol: 12, phoneCol: 12, children: [
+      /* @__PURE__ */ e(m, { direction: "vertical", fullWidth: !0, children: [
+        c && /* @__PURE__ */ t(a, { heading: c, level: 4, marginBottom: 0, children: d }),
+        /* @__PURE__ */ t(
+          k,
+          {
+            elements: o,
+            hasSearch: h,
+            maxHeight: g,
+            isSorted: p,
+            pathname: l,
+            routerLinkElement: C
+          }
+        )
+      ] }),
+      r && /* @__PURE__ */ t(A, { className: _.divider, height: "100%" })
+    ] }),
+    /* @__PURE__ */ t(u, { desktopCol: 8, tabletCol: 12, phoneCol: 12, children: /* @__PURE__ */ e(m, { direction: "vertical", fullWidth: !0, children: [
+      /* @__PURE__ */ t(
+        a,
+        {
+          heading: i?.detailTitle ?? i?.title ?? "",
+          level: 4,
+          icon: i?.hideIconInDetail === !0 ? void 0 : i?.icon,
+          marginBottom: 0,
+          invisibleButton: i?.detailAction === void 0,
+          withAvatar: v,
+          children: i?.detailAction ?? d
+        }
+      ),
+      B
+    ] }) })
+  ] }) });
+};
+export {
+  q as BaseView
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,124 @@
+import { jsx as a, Fragment as s } from "react/jsx-runtime";
+import { a as l } from "../../useBreakpoint-DyAmuka7.js";
+import { BaseView as r } from "./BaseView.js";
+import { d as p, b as u, t as i, r as n, g as t, s as e, v as c, f as d } from "../../vi.JYQecGiw-D8gb8QJV.js";
+p("BaseView Test", () => {
+  u(() => {
+    c.spyOn(l, "useBreakpoints").mockReturnValue({
+      isXs: !1,
+      isSm: !1,
+      isMd: !1,
+      isLg: !0,
+      isXlg: !0,
+      active: "lg"
+    });
+  });
+  const o = [
+    {
+      id: "1",
+      title: "user.personal_information",
+      icon: "account_circle",
+      route: "/personal-profile/personal-information",
+      component: /* @__PURE__ */ a(s, { children: "Personal information selected" })
+    },
+    {
+      id: "2",
+      title: "user.data_privacy",
+      icon: "privacy_tip",
+      route: "/personal-profile/data-privacy",
+      component: /* @__PURE__ */ a(s, { children: "Data Privacy selected" }),
+      detailTitle: "Data Privacy 2000",
+      hideIconInDetail: !0
+    },
+    {
+      id: "3",
+      title: "user.security",
+      icon: "security",
+      route: "/personal-profile/security",
+      component: /* @__PURE__ */ a(s, { children: "Security selected" })
+    }
+  ];
+  i("render BaseView with empty view and navigation list", () => {
+    n(
+      /* @__PURE__ */ a(
+        r,
+        {
+          pathname: "/personal-profile",
+          elements: o,
+          heading: "user.personal-profile",
+          hasSearch: !1,
+          emptyText: "user.noselection",
+          isSorted: !1,
+          routerLinkElement: void 0
+        }
+      )
+    ), 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", () => {
+    n(
+      /* @__PURE__ */ a(
+        r,
+        {
+          pathname: "/personal-profile/personal-information",
+          elements: o,
+          heading: "user.personal-profile",
+          hasSearch: !1,
+          emptyText: "user.noselection",
+          isSorted: !1,
+          routerLinkElement: void 0
+        }
+      )
+    ), 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", () => {
+    n(
+      /* @__PURE__ */ a(
+        r,
+        {
+          pathname: "/personal-profile/data-privacy",
+          elements: o,
+          heading: "user.personal-profile",
+          hasSearch: !1,
+          emptyText: "user.noselection",
+          isSorted: !1,
+          routerLinkElement: void 0
+        }
+      )
+    ), 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", () => {
+    c.spyOn(l, "useBreakpoints").mockReturnValue({
+      isXs: !1,
+      isSm: !0,
+      isMd: !1,
+      isLg: !1,
+      isXlg: !1,
+      active: "sm"
+    }), n(
+      /* @__PURE__ */ a(
+        r,
+        {
+          pathname: "/personal-profile/data-privacy",
+          elements: o,
+          heading: "user.personal-profile",
+          hasSearch: !1,
+          emptyText: "user.noselection",
+          isSorted: !1,
+          routerLinkElement: void 0
+        }
+      )
+    ), t(e.queryByText("user.noselection")).not.toBeInTheDocument();
+  }), i("render BaseView with selected detail section", () => {
+    n(
+      /* @__PURE__ */ a(
+        r,
+        {
+          pathname: "/personal-profile/data-privacy",
+          elements: o,
+          heading: "user.personal-profile",
+          hasSearch: !1,
+          emptyText: "user.noselection",
+          isSorted: !1,
+          routerLinkElement: void 0
+        }
+      )
+    ), d.click(e.getAllByRole("option")[1]), t(e.getByText("Data Privacy selected")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,48 @@
+export type BasicHeadingProps = {
+    /**
+     * the text content of the heading
+     */
+    heading: string;
+    /**
+     * optional actions on the right side of the header
+     */
+    children?: JSX.Element | JSX.Element[];
+    /**
+     * optional margin bottom
+     */
+    marginBottom?: 'large' | number;
+    /**
+     * the level of the heading, @default 4
+     */
+    level?: number;
+    /**
+     * optional className to customize the header style
+     */
+    className?: string;
+    /**
+     * optional icon to be displayed on the left side of the header. It can be either a string {@see https://fonts.google.com/icons?selected=Material+Icons+Outlined:search:&icon.platform=web&icon.set=Material+Icons } or a JSX.Element
+     */
+    icon?: string | JSX.Element;
+    /**
+     * the subHeading of the header
+     */
+    subHeading?: string;
+    /**
+     * the level of the subHeading, @default 2
+     */
+    subHeadingLevel?: 1 | 2;
+    /**
+     * if true the actionButtonContainer will be invisible
+     */
+    invisibleButton?: boolean;
+    /**
+     * the font weight of the heading, @default 400
+     */
+    fontWeight?: 'bold' | number;
+    /**
+     * if true the header will have an avatar
+     * @default false
+     */
+    withAvatar?: boolean;
+};
+export declare const BasicHeading: ({ children, marginBottom, heading, icon, className, subHeading, subHeadingLevel, invisibleButton, level, fontWeight, withAvatar, }: BasicHeadingProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/BasicHeading/BasicHeading.js

@@ -0,0 +1,80 @@
+import "../../assets/BasicHeading.css";
+import { jsxs as a, jsx as i } from "react/jsx-runtime";
+import { TypoDisplay as f, TypoBody as u, Icon as y } from "@element/react-components";
+import { u as I } from "../../useBreakpoint-DyAmuka7.js";
+import { Iconify as B } from "../Iconify/Iconify.js";
+import { AvailableCustomIcons as N } from "../../enums/AvailableCustomIcons.js";
+const H = "_pageHeader_1hm8h_1", b = "_headlineContainer_1hm8h_21", A = "_actionButtonContainer_1hm8h_31", W = "_content_1hm8h_49", $ = "_leadingIcon_1hm8h_61", w = "_headingWrapper_1hm8h_75", x = "_headingContainer_1hm8h_85", T = "_invisible_1hm8h_95", j = "_withAvatar_1hm8h_103", z = "_iconContainer_1hm8h_113", n = {
+  pageHeader: H,
+  headlineContainer: b,
+  actionButtonContainer: A,
+  content: W,
+  leadingIcon: $,
+  headingWrapper: w,
+  headingContainer: x,
+  invisible: T,
+  withAvatar: j,
+  iconContainer: z
+}, L = ({ icon: e }) => e ? typeof e != "string" ? /* @__PURE__ */ i("div", { className: n.iconContainer, children: e }) : e in N ? /* @__PURE__ */ i(
+  B,
+  {
+    icon: e,
+    className: n.leadingIcon,
+    iconSize: "large",
+    iconType: "filled"
+  }
+) : /* @__PURE__ */ i(y, { iconSize: "large", iconType: "filled", icon: e, className: n.leadingIcon }) : null, q = ({
+  children: e,
+  marginBottom: t,
+  heading: l,
+  icon: d,
+  className: h,
+  subHeading: o,
+  subHeadingLevel: m = 2,
+  invisibleButton: p = !1,
+  level: r = 4,
+  fontWeight: s = 400,
+  withAvatar: _ = !1
+}) => {
+  const { isLg: c } = I(), g = c ? r : r + 1, v = s === "bold" ? 500 : s, C = () => {
+    if (t !== void 0)
+      return typeof t == "number" ? `${t}px` : "2rem";
+  };
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: n.pageHeader,
+      style: { marginBottom: C() },
+      "data-testid": "HeaderContainer",
+      children: [
+        /* @__PURE__ */ a("div", { className: `${_ && c ? n.withAvatar : ""} ${n.headingWrapper}`, children: [
+          /* @__PURE__ */ i(L, { icon: d }),
+          /* @__PURE__ */ a("div", { className: o ? n.headingContainer : "", children: [
+            /* @__PURE__ */ i(
+              f,
+              {
+                level: g,
+                "data-testid": "Header",
+                className: h ?? "",
+                style: { fontWeight: v },
+                children: l
+              }
+            ),
+            /* @__PURE__ */ i(u, { level: m, children: o })
+          ] })
+        ] }),
+        /* @__PURE__ */ i(
+          "div",
+          {
+            className: `${n.actionButtonContainer} ${p && n.invisible}`,
+            "data-testid": "RightPart",
+            children: e
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  q as BasicHeading
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,35 @@
+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 { d as h, t as i, r as s, s as n, g as e } from "../../vi.JYQecGiw-D8gb8QJV.js";
+h("BasicHeading-Test", () => {
+  i("render small container without content", () => {
+    s(/* @__PURE__ */ o(a, { heading: "Test" }));
+    const t = n.getByTestId("HeaderContainer");
+    e(t).toBeDefined(), e(t).toHaveClass(/pageHeader/);
+    const r = n.getByTestId("Header");
+    e(r).toBeDefined(), e(r).toHaveTextContent("Test");
+    const d = n.getByTestId("RightPart");
+    e(d).toBeDefined();
+  }), i("render large container with children", () => {
+    s(
+      /* @__PURE__ */ o(a, { heading: "Test", marginBottom: "large", children: /* @__PURE__ */ o(g, { children: "Extracontent" }) })
+    );
+    const t = n.getByTestId("HeaderContainer");
+    e(t).toBeDefined();
+    const r = n.getByTestId("Header");
+    e(r).toBeDefined(), e(r).toHaveTextContent("Test");
+    const d = n.getByTestId("RightPart");
+    e(d).toBeDefined(), e(d).toContainHTML("<button");
+  }), i("render with available custom icon", () => {
+    s(/* @__PURE__ */ o(a, { heading: "Test", icon: "farm" }));
+    const t = n.getByTestId("farm");
+    e(t).toBeInTheDocument();
+  }), i("render with JSX element as icon", () => {
+    s(/* @__PURE__ */ o(a, { heading: "Test", icon: /* @__PURE__ */ o(c, { children: "JSX" }) })), e(n.getByText("JSX")).toBeInTheDocument();
+  }), i("render with other icon", () => {
+    s(/* @__PURE__ */ o(a, { heading: "Test", icon: "contact_support" }));
+    const t = document.querySelector("i");
+    e(t).toHaveTextContent("contact_support");
+  });
+});

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

@@ -0,0 +1,59 @@
+import { Block } from '../../types/internal/Block';
+type BlockViewProps<T extends Block> = {
+    /**
+     * number of rows the will be rendered
+     */
+    rows: number;
+    /**
+     * number of columns the will be rendered
+     */
+    columns: number;
+    /**
+     * array of block numbers that should be marked as error
+     */
+    errorBlocks?: number[];
+    /**
+     * hide the text above and below the block view
+     */
+    hideText?: boolean;
+    /**
+     * show the block numbers inside the blocks
+     */
+    showNumbers?: boolean;
+    /**
+     * callback function when the user clicks on a block
+     */
+    onClick?: ((position: {
+        row: number;
+        column: number;
+    }, block: T | undefined) => void) | null;
+    /**
+     * the current block number
+     */
+    currentBlock?: T;
+    /**
+     * the blocks that should be rendered
+     */
+    blocks: T[];
+    /**
+     * determines if the block view is clickable
+     */
+    clickable?: boolean;
+    /**
+     * the size of the block in rem (default is 15x15)
+     */
+    size?: number;
+    /**
+     * the title of the block view, shown when `hideText` is false
+     */
+    blockViewTitle: string;
+    /**
+     * the label of the block, normally 'Block', shown when `hideText` is false
+     */
+    blockLabel: string;
+};
+/**
+ * A component that renders a grid of blocks
+ */
+export declare const BlockView: <T extends Block>({ rows, columns, hideText, errorBlocks, showNumbers, clickable, size, onClick, currentBlock, blocks, blockViewTitle, blockLabel, }: BlockViewProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};