@hortiview/shared-components 2.2.0 → 2.4.0

package/dist/components/OfflineView/OfflineView.d.ts

@@ -0,0 +1,68 @@
+export type OfflineViewProps = {
+    /**
+     * The title of the offline view
+     *
+     * Defaults to **You’re currently offline**
+     */
+    title?: string;
+    /**
+     * The subtitle of the offline view, optional
+     */
+    subtitle?: string;
+    /**
+     * The Icon of the offline view
+     *
+     * Defaults to **cloud_off**.
+     */
+    icon?: string;
+    /**
+     * The offline view size
+     *
+     * Defaults to **large**
+     */
+    size?: 'large' | 'small';
+    /**
+     * Visual variant
+     *
+     * Defaults to **basic**
+     */
+    variant?: 'basic' | 'filled';
+    /**
+     * The button label. If provided, a button will be shown.
+     */
+    buttonLabel?: string;
+    /**
+     * Click handler for the button (used only if a button is rendered).
+     */
+    onClick?: () => void;
+    /**
+     * Optional test id pass-through.
+     */
+    'data-testid'?: string;
+    /**
+     * Optional CSS class for the root element
+     */
+    className?: string;
+    /**
+     * Stretch to the container’s full width.
+     *
+     * Defaults to **false**.
+     */
+    fullWidth?: boolean;
+};
+/**
+ * Offline placeholder/view shown when no network connection is available.
+ *
+ * @param {string} title - The title of the offline view
+ * @param {string} subtitle - Optional subtitle
+ * @param {string} icon - The Icon of the offline view, default is cloud_off
+ * @param {'large' | 'small'} size - The offline view size, default is large
+ * @param {'basic' | 'filled'} variant - Visual variant, default is basic
+ * @param {string} buttonLabel - The button label, if defined, the button will be displayed
+ * @param {() => void} onClick - Event handler for the button
+ * @param {string} 'data-testid' - Optional test id passthrough
+ * @param {string} className - Optional CSS class for the root element
+ * @param {boolean} fullWidth - Stretch to the container’s full width.
+ * @returns {JSX.Element}
+ */
+export declare const OfflineView: ({ title, subtitle, icon, size, variant, "data-testid": dataTestId, buttonLabel, fullWidth, className, onClick, }: OfflineViewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/OfflineView/OfflineView.js

@@ -0,0 +1,9 @@
+import "react/jsx-runtime";
+import "../../index.es-DntoATwO.js";
+import "../Iconify/Iconify.js";
+import "../../index.es-D54RuMc_.js";
+import { O as f } from "../../OfflineView-BW19N4Cu.js";
+import "../../index.es-CiqbARoC.js";
+export {
+  f as OfflineView
+};

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

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

package/dist/components/OfflineView/OfflineView.test.js

@@ -0,0 +1,24 @@
+import { jsx as o } from "react/jsx-runtime";
+import { a as n, s as t, f as u } from "../../react.esm-CX1WJ2Pp.js";
+import { s as r, O as i } from "../../OfflineView-BW19N4Cu.js";
+import { d as B, t as l, g as e, a as c } from "../../vi.CjhMlMwf-CKxPQtd6.js";
+B("OfflineView", () => {
+  l("should render OfflineView with title and subtitle", () => {
+    n(/* @__PURE__ */ o(i, { title: "test-title", subtitle: "test-subtitle" })), e(t.getByTestId("offline-view-container")).toBeInTheDocument(), e(t.getByText("test-title")).toBeInTheDocument(), e(t.getByText("test-subtitle")).toBeInTheDocument(), e(t.queryByText("cloud_off")).toBeInTheDocument();
+  }), l("should render without subtitle", () => {
+    n(/* @__PURE__ */ o(i, { title: "test-title" })), e(t.getByTestId("offline-view-container")).toBeInTheDocument(), e(t.getByText("test-title")).toBeInTheDocument(), e(t.queryByText("test-subtitle")).not.toBeInTheDocument();
+  }), l("should render custom icon", () => {
+    n(/* @__PURE__ */ o(i, { title: "test-title", icon: "add" })), e(t.getByTestId("offline-view-container")).toBeInTheDocument(), e(t.getByText("test-title")).toBeInTheDocument(), e(t.getByText("add")).toBeInTheDocument();
+  }), l("should render the small offline view", () => {
+    n(/* @__PURE__ */ o(i, { title: "test-title", size: "small" })), e(t.getByText("test-title")).toHaveClass("mdc-typography--subtitle1");
+  }), l("should render the filled offline view", () => {
+    n(/* @__PURE__ */ o(i, { title: "test-title", variant: "filled", "data-testid": "test" })), e(t.getByTestId("test")).toHaveClass(r.bgGrey);
+  }), l("should render OfflineView with button", () => {
+    n(/* @__PURE__ */ o(i, { title: "test-title", buttonLabel: "Button" })), e(t.getByText("Button")).toBeInTheDocument(), e(t.getByRole("button")).toBeInTheDocument();
+  }), l("calls onClick when button is clicked", () => {
+    const s = c.fn();
+    n(/* @__PURE__ */ o(i, { title: "test-title", buttonLabel: "Button", onClick: s })), u.click(t.getByText("Button")), e(s).toHaveBeenCalled();
+  }), l("should render OfflineView without button", () => {
+    n(/* @__PURE__ */ o(i, { title: "test-title" })), e(t.queryByText("Button")).not.toBeInTheDocument(), e(t.queryByRole("button")).not.toBeInTheDocument();
+  });
+});

package/dist/components/Stepper/Stepper.d.ts

@@ -8,9 +8,10 @@ import { StepperProps } from './stepperTypes';
  * @param steps - An array of steps for the stepper.
  * @param currentStep - The current step index.
  * @param children - The content to be displayed in the stepper.
- * @param nextButtonProps - Props for the next button, including onClick, label, and disabled state.
- * @param prevButtonProps - Props for the previous button, including onClick, label, and disabled state.
  * @param isStepLoading - A boolean indicating if the current step is loading. If true, the next button will be disabled and show a loading state.
+ * @param showStepperHeader - An indicator of whether to show the stepper header. Defaults to true.
+ * @param stepperButtonAlignment - The alignment of the stepper button group. Defaults to 'center'.
+ * @param showPreviousButtonOnFirstStep - A flag which indicates if the previous button should be shown on the first step. This can be useful for canceling the stepper. Defaults to false.
  * @returns
  */
-export declare const Stepper: ({ steps, currentStep, children, isStepLoading, }: PropsWithChildren<StepperProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Stepper: ({ steps, currentStep, children, isStepLoading, showStepperHeader, stepperButtonAlignment, showPreviousButtonOnFirstStep, }: PropsWithChildren<StepperProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Stepper/Stepper.js

@@ -1,16 +1,19 @@
 import { jsxs as i, jsx as r } from "react/jsx-runtime";
 import { G as o } from "../../index.es-DntoATwO.js";
-import { useMemo as s } from "react";
-import { StepperPreviousButton as l, StepperNextButton as d } from "./components/StepperButton.js";
-import { StepperHeader as m } from "./components/StepperHeader.js";
-import { s as c } from "../../stepper.module-HuqmDJPj.js";
-const A = ({
+import { useMemo as m } from "react";
+import { StepperPreviousButton as c, StepperNextButton as u } from "./components/StepperButton.js";
+import { StepperHeader as f } from "./components/StepperHeader.js";
+import { s as g } from "../../stepper.module-HuqmDJPj.js";
+const P = ({
   steps: e,
   currentStep: t,
   children: n,
-  isStepLoading: a
+  isStepLoading: a,
+  showStepperHeader: p = !0,
+  stepperButtonAlignment: l = "center",
+  showPreviousButtonOnFirstStep: s = !1
 }) => {
-  const p = s(() => t === e.length - 1, [t, e.length]);
+  const d = m(() => t === e.length - 1, [t, e.length]);
   return /* @__PURE__ */ i(
     o,
     {
@@ -21,34 +24,43 @@ const A = ({
       primaryAlign: "center",
       secondaryAlign: "center",
       children: [
-        /* @__PURE__ */ r(m, { steps: e, currentStep: t }),
+        p ? /* @__PURE__ */ r(f, { steps: e, currentStep: t }) : null,
         /* @__PURE__ */ r(
           o,
           {
             "data-testid": "stepper-content",
             fullWidth: !0,
-            className: c.stepperContent,
+            className: g.stepperContent,
             gap: "airy",
             secondaryAlign: "center",
             direction: "vertical",
             children: n
           }
         ),
-        /* @__PURE__ */ i(o, { "data-testid": "stepper-buttons", fullWidth: !0, secondaryAlign: "center", primaryAlign: "center", children: [
-          t !== 0 && /* @__PURE__ */ r(l, { ...e[t].prevButtonProps }),
-          /* @__PURE__ */ r(
-            d,
-            {
-              ...e[t].nextButtonProps,
-              isStepLoading: a,
-              isLastStep: p
-            }
-          )
-        ] })
+        /* @__PURE__ */ i(
+          o,
+          {
+            "data-testid": "stepper-buttons",
+            fullWidth: !0,
+            secondaryAlign: "center",
+            primaryAlign: l,
+            children: [
+              (t !== 0 || s) && /* @__PURE__ */ r(c, { ...e[t].prevButtonProps }),
+              /* @__PURE__ */ r(
+                u,
+                {
+                  ...e[t].nextButtonProps,
+                  isStepLoading: a,
+                  isLastStep: d
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   );
 };
 export {
-  A as Stepper
+  P as Stepper
 };

package/dist/components/Stepper/Stepper.test.js

@@ -1,95 +1,71 @@
 import { jsx as e } from "react/jsx-runtime";
-import { a as r, s as n, f as c } from "../../react.esm-CX1WJ2Pp.js";
-import { Stepper as l } from "./Stepper.js";
-import { v as s, d as a, t as p, g as o } from "../../vi.CjhMlMwf-CKxPQtd6.js";
-const i = [
+import { a as s, s as t, f as c } from "../../react.esm-CX1WJ2Pp.js";
+import { Stepper as i } from "./Stepper.js";
+import { v as l, d as a, t as p, g as n } from "../../vi.CjhMlMwf-CKxPQtd6.js";
+const o = [
   {
     name: "step1",
     step: 0,
     title: "Step 1",
     optional: !1,
-    nextButtonProps: { onClick: s.fn(), label: "Next" },
-    prevButtonProps: { onClick: s.fn(), label: "Back" }
+    nextButtonProps: { onClick: l.fn(), label: "Next" },
+    prevButtonProps: { onClick: l.fn(), label: "Back" }
   },
   {
     name: "step2",
     step: 1,
     title: "Step 2",
     optional: !1,
-    nextButtonProps: { onClick: s.fn(), label: "Next" },
-    prevButtonProps: { onClick: s.fn(), label: "Back" }
+    nextButtonProps: { onClick: l.fn(), label: "Next" },
+    prevButtonProps: { onClick: l.fn(), label: "Back" }
   },
   {
     name: "step3",
     step: 2,
     title: "Step 3",
     optional: !0,
-    nextButtonProps: { onClick: s.fn(), label: "Finish" },
-    prevButtonProps: { onClick: s.fn(), label: "Back" }
+    nextButtonProps: { onClick: l.fn(), label: "Finish" },
+    prevButtonProps: { onClick: l.fn(), label: "Back" }
   }
 ];
 a("Stepper", () => {
   p("renders the stepper header and children", () => {
-    r(
-      /* @__PURE__ */ e(l, { steps: i, currentStep: 1, isStepLoading: !1, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
-    ), o(n.queryByText("Step 1")).not.toBeInTheDocument(), o(n.getByText("Step 2")).toBeInTheDocument(), o(n.queryByText("Step 3")).not.toBeInTheDocument(), o(n.getByText("Step Content")).toBeInTheDocument();
+    s(
+      /* @__PURE__ */ e(i, { steps: o, currentStep: 1, isStepLoading: !1, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
+    ), n(t.queryByText("Step 1")).not.toBeInTheDocument(), n(t.getByText("Step 2")).toBeInTheDocument(), n(t.queryByText("Step 3")).not.toBeInTheDocument(), n(t.getByText("Step Content")).toBeInTheDocument();
   }), p("disables the next button when isStepLoading is true", () => {
-    r(
-      /* @__PURE__ */ e(l, { steps: i, currentStep: 1, isStepLoading: !0, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
+    s(
+      /* @__PURE__ */ e(i, { steps: o, currentStep: 1, isStepLoading: !0, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
     );
-    const t = n.getByText("Next").closest("button");
-    o(t).toBeDisabled();
+    const r = t.getByText("Next").closest("button");
+    n(r).toBeDisabled();
   }), p("calls nextButtonProps.onClick when next button is clicked", () => {
-    const t = s.fn();
-    i[1].nextButtonProps.onClick = t, r(
-      /* @__PURE__ */ e(
-        l,
-        {
-          steps: i,
-          currentStep: 1,
-          isStepLoading: !1,
-          children: /* @__PURE__ */ e("div", { children: "Step Content" })
-        }
-      )
-    ), c.click(n.getByText("Next")), o(t).toHaveBeenCalled();
+    const r = l.fn();
+    o[1].nextButtonProps.onClick = r, s(
+      /* @__PURE__ */ e(i, { steps: o, currentStep: 1, isStepLoading: !1, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
+    ), c.click(t.getByText("Next")), n(r).toHaveBeenCalled();
   }), p("calls prevButtonProps.onClick when prev button is clicked", () => {
-    const t = s.fn();
-    i[1].prevButtonProps.onClick = t, r(
-      /* @__PURE__ */ e(
-        l,
-        {
-          steps: i,
-          currentStep: 1,
-          isStepLoading: !1,
-          children: /* @__PURE__ */ e("div", { children: "Step Content" })
-        }
-      )
-    ), c.click(n.getByText("Back")), o(t).toHaveBeenCalled();
+    const r = l.fn();
+    o[1].prevButtonProps.onClick = r, s(
+      /* @__PURE__ */ e(i, { steps: o, currentStep: 1, isStepLoading: !1, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
+    ), c.click(t.getByText("Back")), n(r).toHaveBeenCalled();
   }), p("does not render the prev button on the first step", () => {
-    r(
-      /* @__PURE__ */ e(
-        l,
-        {
-          steps: i,
-          currentStep: 0,
-          isStepLoading: !1,
-          children: /* @__PURE__ */ e("div", { children: "Step Content" })
-        }
-      )
-    ), o(n.queryByText("Back")).not.toBeInTheDocument();
+    s(
+      /* @__PURE__ */ e(i, { steps: o, currentStep: 0, isStepLoading: !1, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
+    ), n(t.queryByText("Back")).not.toBeInTheDocument();
   }), p("renders the next button as submit on last step", () => {
-    r(
-      /* @__PURE__ */ e(
-        l,
-        {
-          steps: i,
-          currentStep: 2,
-          isStepLoading: !1,
-          children: /* @__PURE__ */ e("div", { children: "Step Content" })
-        }
-      )
+    s(
+      /* @__PURE__ */ e(i, { steps: o, currentStep: 2, isStepLoading: !1, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
     );
-    const t = n.getByText("Finish").closest("button");
-    o(t).toHaveAttribute("type", "submit");
+    const r = t.getByText("Finish").closest("button");
+    n(r).toHaveAttribute("type", "submit");
+  }), p("does not render the stepper header when showStepperHeader is false", () => {
+    s(
+      /* @__PURE__ */ e(i, { steps: o, currentStep: 1, isStepLoading: !1, showStepperHeader: !1, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
+    ), n(t.queryByTestId("stepper-header")).not.toBeInTheDocument();
+  }), p("does not render stepper button icons when showArrowIcon is false", () => {
+    o[1].nextButtonProps.showArrowIcon = !1, o[1].prevButtonProps.showArrowIcon = !1, s(
+      /* @__PURE__ */ e(i, { steps: o, currentStep: 1, isStepLoading: !1, children: /* @__PURE__ */ e("div", { children: "Step Content" }) })
+    ), n(t.queryByText("arrow_forward")).not.toBeInTheDocument(), n(t.queryByText("arrow_back")).not.toBeInTheDocument();
   });
 });

package/dist/components/Stepper/components/StepperButton.d.ts

@@ -6,9 +6,12 @@ import { StepperButtonProps } from '../stepperTypes';
  * @param onClick - The function to be called when the button is clicked.
  * @param disabled - Whether the button is disabled or not.
  * @param className - Additional class names to apply to the button.
+ * @param showArrowIcon - Whether to show a leading arrow icon for the button. Defaults to true.
+ * @param buttonSize - The size of the button, defaults to 'themeDefault'.
+ * @param fullWidth - Whether the button should take the full width of its container. Defaults to true.
  * @returns
  */
-export declare const StepperPreviousButton: ({ label, onClick, disabled, className, }: StepperButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StepperPreviousButton: ({ label, onClick, disabled, className, showArrowIcon, buttonSize, fullWidth, }: StepperButtonProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * A button component for the stepper that is used to go to the next step.
  * @param label - The label of the button.
@@ -17,9 +20,12 @@ export declare const StepperPreviousButton: ({ label, onClick, disabled, classNa
  * @param className - Additional class names to apply to the button.
  * @param isStepLoading - A boolean indicating if the current step is loading. If true, the next button will show a loading state and be disabled.
  * @param isLastStep - A boolean indicating if this is the last step. If true, the button will submit the form instead of going to the next step.
+ * @param showArrowIcon - Whether to show a trailing arrow icon for the button. Defaults to true.
+ * @param buttonSize - The size of the button, defaults to 'themeDefault'.
+ * @param fullWidth - Whether the button should take the full width of its container. Defaults to true.
  * @returns
  */
-export declare const StepperNextButton: ({ label, onClick, disabled, className, isStepLoading, isLastStep, }: StepperButtonProps & {
+export declare const StepperNextButton: ({ label, onClick, disabled, className, isStepLoading, isLastStep, showArrowIcon, buttonSize, fullWidth, }: StepperButtonProps & {
     isStepLoading?: boolean;
     isLastStep?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Stepper/components/StepperButton.js

@@ -1,44 +1,60 @@
-import { jsx as a } from "react/jsx-runtime";
-import { B as p } from "../../../index.es-CiqbARoC.js";
-import { s } from "../../../stepper.module-HuqmDJPj.js";
-const c = ({
-  label: t,
-  onClick: r,
-  disabled: e,
-  className: o
-}) => /* @__PURE__ */ a(
-  p,
+import { jsx as p } from "react/jsx-runtime";
+import { B as s } from "../../../index.es-CiqbARoC.js";
+import { useMemo as c } from "react";
+import { s as i } from "../../../stepper.module-HuqmDJPj.js";
+const $ = ({
+  label: o,
+  onClick: u,
+  disabled: n,
+  className: a,
+  showArrowIcon: t = !0,
+  buttonSize: e = "themeDefault",
+  fullWidth: r = !0
+}) => /* @__PURE__ */ p(
+  s,
   {
     "data-testid": "stepper-previous-button",
-    className: `${s.stepperButton} ${o ?? ""}`,
-    onClick: r,
-    disabled: e,
-    fullWidth: !0,
+    className: `${i.stepperButton} ${a ?? ""}`,
+    onClick: u,
+    disabled: n,
+    fullWidth: r,
+    buttonSize: e,
     variant: "outlined",
-    leadingIcon: "arrow_back",
-    children: t
+    leadingIcon: t ? "arrow_back" : void 0,
+    type: "button",
+    children: o
   }
-), m = ({
-  label: t,
-  onClick: r,
-  disabled: e,
-  className: o,
-  isStepLoading: n,
-  isLastStep: u
-}) => /* @__PURE__ */ a(
-  p,
-  {
-    "data-testid": "stepper-next-button",
-    className: `${s.stepperButton} ${n ? s.stepperButtonLoading : ""} ${o ?? ""}`,
-    onClick: r,
-    disabled: n || e,
-    fullWidth: !0,
-    trailingIcon: n || u ? void 0 : "arrow_forward",
-    type: u ? "submit" : "button",
-    children: t
-  }
-);
+), x = ({
+  label: o,
+  onClick: u,
+  disabled: n,
+  className: a,
+  isStepLoading: t,
+  isLastStep: e,
+  showArrowIcon: r = !0,
+  buttonSize: m = "themeDefault",
+  fullWidth: d = !0
+}) => {
+  const l = c(() => {
+    if (!t && !e)
+      return r ? "arrow_forward" : void 0;
+  }, [e, t, r]);
+  return /* @__PURE__ */ p(
+    s,
+    {
+      "data-testid": "stepper-next-button",
+      className: `${i.stepperButton} ${t ? i.stepperButtonLoading : ""} ${a ?? ""}`,
+      onClick: u,
+      disabled: t || n,
+      fullWidth: d,
+      trailingIcon: l,
+      type: e ? "submit" : "button",
+      buttonSize: m,
+      children: o
+    }
+  );
+};
 export {
-  m as StepperNextButton,
-  c as StepperPreviousButton
+  x as StepperNextButton,
+  $ as StepperPreviousButton
 };

package/dist/components/Stepper/stepperTypes.d.ts

@@ -40,8 +40,11 @@ export type Step = {
  * @param {boolean} disabled - Whether the button is disabled or not.
  * @param {() => void} onClick - The function to be called when the button is clicked.
  * @param {string | ReactNode} label - The label of the button.
+ * @param {boolean} showArrowIcon - Whether to show a leading/trailing arrow icon for the button.
+ * @param {string} buttonSize - The size of the button, defaults to 'themeDefault'.
+ * @param {boolean} fullWidth - Whether the button should take the full width of its container. *
  */
-export type StepperButtonProps = Pick<ButtonProps, 'className' | 'disabled'> & {
+export type StepperButtonProps = Pick<ButtonProps, 'className' | 'disabled' | 'fullWidth'> & {
     /**
      * The function to be called when the button is clicked.
      */
@@ -50,11 +53,22 @@ export type StepperButtonProps = Pick<ButtonProps, 'className' | 'disabled'> & {
      * The label of the button.
      */
     label: string | ReactNode;
+    /**
+     * Whether to show a leading/trailing arrow icon for the button.
+     */
+    showArrowIcon?: boolean;
+    /**
+     * Property adapted from Element library
+     */
+    buttonSize?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'themeDefault';
 };
 /**
  * @param {Step[]} steps - An array of steps for the stepper.
  * @param {number} currentStep - The current step index.
  * @param {boolean} isStepLoading - A boolean indicating if the current step is loading. If true, the next button will be disabled and show a loading state.
+ * @param {boolean} showStepperHeader - An indicator of whether to show the stepper header. Defaults to true.
+ * @param {string} stepperButtonAlignment - The alignment of the stepper button group. Defaults to 'center'.
+ * @param {boolean} showPreviousButtonOnFirstStep - A flag which indicates if the previous button should be shown on the first step. This can be useful for canceling the stepper.
  */
 export type StepperProps = {
     /**
@@ -69,6 +83,22 @@ export type StepperProps = {
      * a flag which indicates if the current step is loading.
      */
     isStepLoading?: boolean;
+    /**
+     * An indicator of whether to show the stepper header.
+     * @default true
+     */
+    showStepperHeader?: boolean;
+    /**
+     * The alignment of the stepper button group.
+     * @default 'center'
+     */
+    stepperButtonAlignment?: 'center' | 'space-between';
+    /**
+     * A flag which indicates if the previous button should be shown on the first step.
+     * This can be useful for canceling the stepper.
+     * @default false
+     */
+    showPreviousButtonOnFirstStep?: boolean;
 };
 /**
  * @param {Step[]} steps - An array of steps for the stepper.

package/dist/main.d.ts

@@ -1,4 +1,5 @@
 export { AlertBanner } from './components/AlertBanner/AlertBanner';
+export { LinkBanner } from './components/AlertBanner/LinkBanner';
 export { BaseView } from './components/BaseView/BaseView';
 export { BasicHeading } from './components/BasicHeading/BasicHeading';
 export { BlockView } from './components/BlockView/BlockView';
@@ -20,6 +21,8 @@ export { ListArea } from './components/ListArea/ListArea';
 export { LoadingSpinner } from './components/LoadingSpinner/Default/LoadingSpinner';
 export { Modal } from './components/Modal/Modal';
 export { ModulePadding } from './components/ModulePadding/ModulePadding';
+export { OfflineView } from './components/OfflineView/OfflineView';
+export { OnboardingBanner } from './components/OnboardingBanner/OnboardingBanner';
 export { OverflowTooltip } from './components/OverflowTooltip/OverflowTooltip';
 export { ScrollbarX, ScrollbarY } from './components/Scrollbar/Scrollbar';
 export { SearchBar } from './components/SearchBar/SearchBar';
@@ -28,7 +31,6 @@ export { StepperHeader } from './components/Stepper/components/StepperHeader';
 export { StepperIndicator } from './components/Stepper/components/StepperIndicator';
 export { Stepper } from './components/Stepper/Stepper';
 export { VerticalDivider } from './components/VerticalDivider/VerticalDivider';
-export { OnboardingBanner } from './components/OnboardingBanner/OnboardingBanner';
 export { FormCheckBox } from './components/FormComponents/FormCheckBox/FormCheckBox';
 export { FormDatePicker } from './components/FormComponents/FormDatePicker/FormDatePicker';
 export { FormNumber } from './components/FormComponents/FormNumber/FormNumber';
@@ -40,17 +42,17 @@ export { FormToggle } from './components/FormComponents/FormToggle/FormToggle';
 export { AvailableCustomIcons } from './enums/AvailableCustomIcons';
 export { ThemeColor } from './enums/ThemeColor';
 export { useBreakpoints } from './hooks/useBreakpoints';
-export { capitalizeFirstLetters, getNumberAsLocaleString, trimLeadingAndTrailingSpaces, } from './services/UtilService';
+export { capitalizeFirstLetters, getNumberAsLocaleString, trimLeadingAndTrailingSpaces } from './services/UtilService';
 export type { ActionProps } from './components/ContextMenu/ContextMenu';
 export type { FormSelectOption } from './components/FormComponents/FormSelect/FormSelect';
 export type { FormTextProps } from './components/FormComponents/FormText/FormText';
 export type { HealthCheckFailedProps } from './components/HealthCheckFailed/HealthCheckFailed';
 export type { FieldItem } from './components/InfoGroup/InfoGroup';
 export type { LoadingSpinnerProps } from './components/LoadingSpinner/Default/LoadingSpinner';
-export type { Step, StepperBaseProps, StepperButtonProps, StepperProps, } from './components/Stepper/stepperTypes';
+export type { Step, StepperBaseProps, StepperButtonProps, StepperProps } from './components/Stepper/stepperTypes';
 export type { FilterData, FilterOption, FilterSelection } from './types/Filter';
 export type { CellTemplate, CellTemplateProps, TableLayoutProps } from './types/GenericTable';
 export type { HashTab } from './types/HashTab';
 export type { BaseListElement, ListElement } from './types/ListElement';
-export { AVAILABLE_COUNTRY_KEYS, AVAILABLE_LOCALES, ENGLISH_LANGUAGE_ID, GERMAN_LANGUAGE_ID, LANGUAGE_CODES_MAPPER, LANGUAGE_ID_MAPPER, SPANISH_LANGUAGE_ID, TURKISH_LANGUAGE_ID, } from './types/Languages';
+export { AVAILABLE_COUNTRY_KEYS, AVAILABLE_LOCALES, ENGLISH_LANGUAGE_ID, GERMAN_LANGUAGE_ID, LANGUAGE_CODES_MAPPER, LANGUAGE_ID_MAPPER, SPANISH_LANGUAGE_ID, TURKISH_LANGUAGE_ID } from './types/Languages';
 export type { AVAILABLE_LANGUAGE_CODES, LANGUAGE_COUNTRY_CODES } from './types/Languages';