@hortiview/shared-components 2.26.2 → 2.27.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [2.27.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.26.3...v2.27.0) (2026-05-26)
+
+### Features
+
+* adjust LoadingSpinner for subtext display ([474e6c9](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/474e6c952ba63f53b1fc49edebe33d8aa3535e6e)), closes [#19809](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/issues/19809)
+
+## [2.26.3](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.26.2...v2.26.3) (2026-05-26)
+
+### Code Refactoring
+
+* rename data-testid attributes in TopBarBanner ([7288027](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/728802796388639b5bd2c8bf3c36b0a914c04626))
+* rename ErrorBanner to TopBarBanner + add icon property ([a1ea6cb](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/a1ea6cb98ce6f84172835eeb79c8829bd354d2f5))
+* simplify border properties in standaloneBorder class ([b8fab48](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/b8fab48e5f02412c4769d13d68f5bab136e844d6))
+
 ## [2.26.2](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.26.1...v2.26.2) (2026-05-26)
 
 ### Code Refactoring

package/dist/assets/TopBarBanner.css

@@ -0,0 +1 @@
+._bannerPadding_1ijh0_1{width:100%;box-sizing:border-box;background-color:var(--lmnt-theme-secondary-50)}._bottomBorder_1ijh0_7{border-top:1px solid var(--lmnt-theme-secondary-100);border-bottom:1px solid var(--lmnt-theme-secondary-100)}._standaloneBorder_1ijh0_12{border:1px solid var(--lmnt-theme-secondary-100);border-radius:.5rem}

package/dist/components/LoadingSpinner/Big/BigLoadingSpinner.d.ts

@@ -1,5 +1,6 @@
 type BigLoadingSpinnerProps = {
     text?: string;
+    subText?: string;
 };
 export declare const BigLoadingSpinner: (props: BigLoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/LoadingSpinner/Big/BigLoadingSpinner.js

@@ -1,15 +1,26 @@
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { T as r } from "../../../index.es-EXzC8zuP.js";
-import { Iconify as d } from "../../Iconify/Iconify.js";
-import '../../../assets/BigLoadingSpinner.css';const e = "_loadingBigOverlay_7dxo1_1", g = "_bigLoadSpinnerCard_7dxo1_12", t = "_bigLoadSpinnerCardText_7dxo1_27", s = "_logo_7dxo1_33", o = {
-  loadingBigOverlay: e,
-  bigLoadSpinnerCard: g,
-  bigLoadSpinnerCardText: t,
-  logo: s
-}, l = ({ text: n }) => /* @__PURE__ */ a("div", { className: o.bigLoadSpinnerCard, role: "progressbar", "data-testid": "loading-spinner", children: [
-  /* @__PURE__ */ i(d, { icon: "hortiview", className: o.logo, "data-testid": "logo-icon" }),
-  /* @__PURE__ */ i(r, { tag: "p", bold: !0, level: 1, className: o.bigLoadSpinnerCardText, children: n })
-] }), b = (n) => /* @__PURE__ */ i("div", { "data-testid": "big-loading-spinner", className: o.loadingBigOverlay, children: /* @__PURE__ */ i(l, { ...n }) });
+import { jsx as o, jsxs as d } from "react/jsx-runtime";
+import { T as r, c as e } from "../../../index.es-EXzC8zuP.js";
+import { Iconify as t } from "../../Iconify/Iconify.js";
+import { P as g } from "../../../index.es-C8AExypY.js";
+import '../../../assets/BigLoadingSpinner.css';const s = "_loadingBigOverlay_7dxo1_1", l = "_bigLoadSpinnerCard_7dxo1_12", c = "_bigLoadSpinnerCardText_7dxo1_27", p = "_logo_7dxo1_33", i = {
+  loadingBigOverlay: s,
+  bigLoadSpinnerCard: l,
+  bigLoadSpinnerCardText: c,
+  logo: p
+}, m = ({ text: a, subText: n }) => /* @__PURE__ */ d("div", { className: i.bigLoadSpinnerCard, role: "progressbar", "data-testid": "loading-spinner", children: [
+  /* @__PURE__ */ o(t, { icon: "hortiview", className: i.logo, "data-testid": "logo-icon" }),
+  /* @__PURE__ */ o(r, { bold: !0, tag: "p", level: 1, className: i.bigLoadSpinnerCardText, children: a }),
+  n && /* @__PURE__ */ o(g, { customPadding: "0 0 1rem 0", children: /* @__PURE__ */ o(
+    e,
+    {
+      tag: "p",
+      "data-testid": "loading-subText",
+      themeColor: "text-secondary-on-background",
+      className: i.bigLoadSpinnerCardText,
+      children: n
+    }
+  ) })
+] }), C = (a) => /* @__PURE__ */ o("div", { "data-testid": "big-loading-spinner", className: i.loadingBigOverlay, children: /* @__PURE__ */ o(m, { ...a }) });
 export {
-  b as BigLoadingSpinner
+  C as BigLoadingSpinner
 };

package/dist/components/LoadingSpinner/Default/LoadingSpinner.d.ts

@@ -7,6 +7,10 @@ export type LoadingSpinnerProps = {
      * text to show below the spinner
      */
     text?: string;
+    /**
+     * Additional text to show below the main text
+     */
+    subText?: string;
     /**
      * defines size of the spinner, excluding the 'big' size which will render a special spinner with the hortiview logo
      */
@@ -29,15 +33,17 @@ export type LoadingSpinnerProps = {
     impatienceMessage?: string | null;
     /**
      * time in seconds to show the impatience message
+     * @remarks To disable the impatience message, set this to 'disabled'
      */
-    impatienceTimeout?: number;
+    impatienceTimeout?: number | 'disabled';
 };
 /**
  * A loading spinner component that can be used to show loading state in the application.
  * @param size size of the spinner itself (sm, md, lg, big)
- * @attention `'big'` will render a full screen loading spinner with the hortiview logo, other props will be ignored
+ * @attention `'big'` will render a full screen loading spinner with the hortiview logo, with an adjusted layout and input blocking
  * @param center center the spinner in the middle of the container
  * @param text text to show below the spinner
+ * @param subText Additional text to show below the main text
  * @param textPosition position of the text relative to the spinner (bottom, right)
  * @param color color of the spinner (primary, secondary)
  * @param spinnerOnly render only the spinner without any text
@@ -48,4 +54,4 @@ export type LoadingSpinnerProps = {
  * @example <LoadingSpinner size='md' center color='primary' spinnerOnly={true} />
  * @returns a loading spinner component
  */
-export declare const LoadingSpinner: ({ size, center, text, textPosition, color, spinnerOnly, impatienceMessage, impatienceTimeout, }: LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LoadingSpinner: ({ size, center, text, subText, textPosition, color, spinnerOnly, impatienceMessage, impatienceTimeout, }: LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/LoadingSpinner/Default/LoadingSpinner.js

@@ -1,17 +1,17 @@
-import { jsx as y, jsxs as Q } from "react/jsx-runtime";
-import { _ as X, a as Y, c as $, P as u } from "../../../index-_-9ybP20.js";
+import { jsx as C, jsxs as Q } from "react/jsx-runtime";
+import { _ as X, a as Y, c as H, P as m } from "../../../index-_-9ybP20.js";
 import { i as Z, _ as w, d as ee } from "../../../index.es-DRC-9PLs.js";
-import t, { forwardRef as re, useRef as H, useImperativeHandle as te, useEffect as T, useCallback as se, useState as ae, useMemo as ie } from "react";
+import t, { forwardRef as re, useRef as R, useImperativeHandle as te, useEffect as T, useCallback as se, useState as ae, useMemo as ie } from "react";
 import { b as q, c as U } from "../../../tslib.es6-BDCynO9F.js";
 import { M as oe, a as ne } from "../../../component-By6nyiBU.js";
 import { G as ce } from "../../../index.es-BE1XL1dD.js";
 import { P as le } from "../../../index.es-C8AExypY.js";
-import { T as de } from "../../../index.es-EXzC8zuP.js";
-import { BigLoadingSpinner as ue } from "../Big/BigLoadingSpinner.js";
-import '../../../assets/LoadingSpinner.css';var p = {
+import { T as de, c as ue } from "../../../index.es-EXzC8zuP.js";
+import { BigLoadingSpinner as me } from "../Big/BigLoadingSpinner.js";
+import '../../../assets/LoadingSpinner.css';var g = {
   INDETERMINATE_CLASS: "mdc-circular-progress--indeterminate",
   CLOSED_CLASS: "mdc-circular-progress--closed"
-}, m = {
+}, h = {
   ARIA_HIDDEN: "aria-hidden",
   ARIA_VALUENOW: "aria-valuenow",
   DETERMINATE_CIRCLE_SELECTOR: ".mdc-circular-progress__determinate-circle",
@@ -27,13 +27,13 @@ var V = (
     }
     return Object.defineProperty(e, "cssClasses", {
       get: function() {
-        return p;
+        return g;
       },
       enumerable: !1,
       configurable: !0
     }), Object.defineProperty(e, "strings", {
       get: function() {
-        return m;
+        return h;
       },
       enumerable: !1,
       configurable: !0
@@ -61,28 +61,28 @@ var V = (
       enumerable: !1,
       configurable: !0
     }), e.prototype.init = function() {
-      this.closed = this.adapter.hasClass(p.CLOSED_CLASS), this.determinate = !this.adapter.hasClass(p.INDETERMINATE_CLASS), this.progress = 0, this.determinate && this.adapter.setAttribute(m.ARIA_VALUENOW, this.progress.toString()), this.radius = Number(this.adapter.getDeterminateCircleAttribute(m.RADIUS));
+      this.closed = this.adapter.hasClass(g.CLOSED_CLASS), this.determinate = !this.adapter.hasClass(g.INDETERMINATE_CLASS), this.progress = 0, this.determinate && this.adapter.setAttribute(h.ARIA_VALUENOW, this.progress.toString()), this.radius = Number(this.adapter.getDeterminateCircleAttribute(h.RADIUS));
     }, e.prototype.setDeterminate = function(r) {
-      this.determinate = r, this.determinate ? (this.adapter.removeClass(p.INDETERMINATE_CLASS), this.setProgress(this.progress)) : (this.adapter.addClass(p.INDETERMINATE_CLASS), this.adapter.removeAttribute(m.ARIA_VALUENOW));
+      this.determinate = r, this.determinate ? (this.adapter.removeClass(g.INDETERMINATE_CLASS), this.setProgress(this.progress)) : (this.adapter.addClass(g.INDETERMINATE_CLASS), this.adapter.removeAttribute(h.ARIA_VALUENOW));
     }, e.prototype.isDeterminate = function() {
       return this.determinate;
     }, e.prototype.setProgress = function(r) {
       if (this.progress = r, this.determinate) {
-        var c = (1 - this.progress) * (2 * Math.PI * this.radius);
-        this.adapter.setDeterminateCircleAttribute(m.STROKE_DASHOFFSET, "" + c), this.adapter.setAttribute(m.ARIA_VALUENOW, this.progress.toString());
+        var o = (1 - this.progress) * (2 * Math.PI * this.radius);
+        this.adapter.setDeterminateCircleAttribute(h.STROKE_DASHOFFSET, "" + o), this.adapter.setAttribute(h.ARIA_VALUENOW, this.progress.toString());
       }
     }, e.prototype.getProgress = function() {
       return this.progress;
     }, e.prototype.open = function() {
-      this.closed = !1, this.adapter.removeClass(p.CLOSED_CLASS), this.adapter.removeAttribute(m.ARIA_HIDDEN);
+      this.closed = !1, this.adapter.removeClass(g.CLOSED_CLASS), this.adapter.removeAttribute(h.ARIA_HIDDEN);
     }, e.prototype.close = function() {
-      this.closed = !0, this.adapter.addClass(p.CLOSED_CLASS), this.adapter.setAttribute(m.ARIA_HIDDEN, "true");
+      this.closed = !0, this.adapter.addClass(g.CLOSED_CLASS), this.adapter.setAttribute(h.ARIA_HIDDEN, "true");
     }, e.prototype.isClosed = function() {
       return this.closed;
     }, e;
   })(oe)
 );
-var me = (
+var he = (
   /** @class */
   (function(s) {
     q(e, s);
@@ -129,7 +129,7 @@ var me = (
     }, e.prototype.close = function() {
       this.foundation.close();
     }, e.prototype.getDefaultFoundation = function() {
-      var r = this, c = {
+      var r = this, o = {
         addClass: function(a) {
           return r.root.classList.add(a);
         },
@@ -145,14 +145,14 @@ var me = (
         removeAttribute: function(a) {
           return r.root.removeAttribute(a);
         },
-        setAttribute: function(a, l) {
-          return r.root.setAttribute(a, l);
+        setAttribute: function(a, n) {
+          return r.root.setAttribute(a, n);
         },
-        setDeterminateCircleAttribute: function(a, l) {
-          return r.determinateCircle_.setAttribute(a, l);
+        setDeterminateCircleAttribute: function(a, n) {
+          return r.determinateCircle_.setAttribute(a, n);
         }
       };
-      return new V(c);
+      return new V(o);
     }, e;
   })(ne)
 ), pe = {
@@ -161,31 +161,31 @@ var me = (
    *
    * Defaults to **'Progress Indicator'**.
    */
-  ariaLabel: u.string,
+  ariaLabel: m.string,
   /**
    * The css class name to be passed through to the component markup.
    *
    * Defaults to **undefined**.
    */
-  className: u.string,
+  className: m.string,
   /**
    * The size of the progress indicator.
    *
    * Defaults to **'lg'**.
    */
-  indicatorSize: u.oneOf(["sm", "md", "lg"]),
+  indicatorSize: m.oneOf(["sm", "md", "lg"]),
   /**
    * Sets the visibility of the progress indicator.
    *
    * Defaults to **true**.
    */
-  open: u.bool,
+  open: m.bool,
   /**
    * The current progress of a determinate progress indicator. Must be between 0 and 1.
    *
    * Defaults to **0**.
    */
-  progress: u.number,
+  progress: m.number,
   /**
    * @deprecated _Renamed, see indicatorSize instead._
    *
@@ -193,20 +193,20 @@ var me = (
    *
    * Defaults to **undefined**.
    */
-  size: ee(u.oneOf(["sm", "md", "lg"]), "CircularProgress", "Renamed, see indicatorSize instead."),
+  size: ee(m.oneOf(["sm", "md", "lg"]), "CircularProgress", "Renamed, see indicatorSize instead."),
   /**
    * Color of the indicator stroke with 'primary' or 'secondary' theme color.
    *
    * Defaults to **'primary'**.
    */
-  themeColor: u.oneOf(["primary", "secondary", "primary-variant", "secondary-variant", "two-color", "two-color-variant", "on-primary", "on-secondary", "on-success", "on-danger", "on-unknown-dark", "on-unknown-light"]),
+  themeColor: m.oneOf(["primary", "secondary", "primary-variant", "secondary-variant", "two-color", "two-color-variant", "on-primary", "on-secondary", "on-success", "on-danger", "on-unknown-dark", "on-unknown-light"]),
   /**
    * An indeterminate CircularProgress indicator will continue spinning until closed. A determinate CircularProgress indicator will display the current progress.
    *
    * Defaults to **'indeterminate'**.
    */
-  variant: u.oneOf(["determinate", "indeterminate"])
-}, he = {
+  variant: m.oneOf(["determinate", "indeterminate"])
+}, fe = {
   ariaLabel: "Progress Indicator",
   className: void 0,
   indicatorSize: "lg",
@@ -214,21 +214,21 @@ var me = (
   progress: 0,
   themeColor: "primary",
   variant: "indeterminate"
-}, fe = ["ariaLabel", "className", "open", "progress", "size", "indicatorSize", "themeColor", "variant"], h = he, W = /* @__PURE__ */ re(function(s, e) {
-  var r, c = s.ariaLabel, a = c === void 0 ? h.ariaLabel : c, l = s.className, g = l === void 0 ? h.className : l, v = s.open, D = v === void 0 ? h.open : v, A = s.progress, d = A === void 0 ? h.progress : A;
+}, ge = ["ariaLabel", "className", "open", "progress", "size", "indicatorSize", "themeColor", "variant"], v = fe, W = /* @__PURE__ */ re(function(s, e) {
+  var r, o = s.ariaLabel, a = o === void 0 ? v.ariaLabel : o, n = s.className, P = n === void 0 ? v.className : n, d = s.open, y = d === void 0 ? v.open : d, p = s.progress, f = p === void 0 ? v.progress : p;
   s.size;
-  var k = s.indicatorSize, P = k === void 0 ? h.indicatorSize : k, R = s.themeColor, E = R === void 0 ? h.themeColor : R, O = s.variant, b = O === void 0 ? h.variant : O, G = X(s, fe), L = H(), S = H();
+  var u = s.indicatorSize, k = u === void 0 ? v.indicatorSize : u, O = s.themeColor, E = O === void 0 ? v.themeColor : O, z = s.variant, b = z === void 0 ? v.variant : z, G = X(s, ge), L = R(), S = R();
   te(e, function() {
     return L.current;
   }, []), T(function() {
-    return S.current = me.attachTo(L.current), function() {
+    return S.current = he.attachTo(L.current), function() {
       S.current.destroy();
     };
   }, []), T(function() {
-    (b === "determinate" && d < 0 || d > 1) && Z("CircularProgress: `progress` must be between 0 and 1."), S.current.determinate = b === "determinate", S.current.progress = d;
-  }, [d, b]);
+    (b === "determinate" && f < 0 || f > 1) && Z("CircularProgress: `progress` must be between 0 and 1."), S.current.determinate = b === "determinate", S.current.progress = f;
+  }, [f, b]);
   var K = function() {
-    switch (P) {
+    switch (k) {
       case "xs":
         return {
           heightWidth: "16px",
@@ -302,86 +302,86 @@ var me = (
           halfStrokeDashoffset: "56.549"
         };
     }
-  }, o = K(), z = o.heightWidth, n = o.viewBox, i = o.cxCy, f = o.r, _ = o.strokeWidth, B = o.strokeWidth80, C = o.strokeDashArray, J = o.strokeDashoffset, x = o.halfStrokeDashoffset, N = se(function() {
-    var I, F, j;
+  }, c = K(), B = c.heightWidth, l = c.viewBox, i = c.cxCy, _ = c.r, D = c.strokeWidth, M = c.strokeWidth80, A = c.strokeDashArray, J = c.strokeDashoffset, x = c.halfStrokeDashoffset, N = se(function() {
+    var I, j, $;
     return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", {
       className: "mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left"
     }, /* @__PURE__ */ t.createElement("svg", {
       className: "mdc-circular-progress__indeterminate-circle-graphic",
-      viewBox: w(I = "0 0 ".concat(n, " ")).call(I, n),
+      viewBox: w(I = "0 0 ".concat(l, " ")).call(I, l),
       xmlns: "http://www.w3.org/2000/svg"
     }, /* @__PURE__ */ t.createElement("circle", {
       cx: i,
       cy: i,
-      r: f,
-      strokeDasharray: C,
+      r: _,
+      strokeDasharray: A,
       strokeDashoffset: x,
-      strokeWidth: _
+      strokeWidth: D
     }))), /* @__PURE__ */ t.createElement("div", {
       className: "mdc-circular-progress__gap-patch"
     }, /* @__PURE__ */ t.createElement("svg", {
       className: "mdc-circular-progress__indeterminate-circle-graphic",
-      viewBox: w(F = "0 0 ".concat(n, " ")).call(F, n),
+      viewBox: w(j = "0 0 ".concat(l, " ")).call(j, l),
       xmlns: "http://www.w3.org/2000/svg"
     }, /* @__PURE__ */ t.createElement("circle", {
       cx: i,
       cy: i,
-      r: f,
-      strokeDasharray: C,
+      r: _,
+      strokeDasharray: A,
       strokeDashoffset: x,
-      strokeWidth: B
+      strokeWidth: M
     }))), /* @__PURE__ */ t.createElement("div", {
       className: "mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right"
     }, /* @__PURE__ */ t.createElement("svg", {
       className: "mdc-circular-progress__indeterminate-circle-graphic",
-      viewBox: w(j = "0 0 ".concat(n, " ")).call(j, n),
+      viewBox: w($ = "0 0 ".concat(l, " ")).call($, l),
       xmlns: "http://www.w3.org/2000/svg"
     }, /* @__PURE__ */ t.createElement("circle", {
       cx: i,
       cy: i,
-      r: f,
-      strokeDasharray: C,
+      r: _,
+      strokeDasharray: A,
       strokeDashoffset: x,
-      strokeWidth: _
+      strokeWidth: D
     }))));
-  }, [i, x, f, C, _, B, n]), M = E === "two-color" || E === "two-color-variant";
+  }, [i, x, _, A, D, M, l]), F = E === "two-color" || E === "two-color-variant";
   return /* @__PURE__ */ t.createElement("div", Y({
     ref: L,
-    className: $("lmnt", "mdc-circular-progress", b === "indeterminate" && "mdc-circular-progress--indeterminate", !D && "mdc-circular-progress--closed", E && "lmnt-circular-progress--".concat(E), g),
+    className: H("lmnt", "mdc-circular-progress", b === "indeterminate" && "mdc-circular-progress--indeterminate", !y && "mdc-circular-progress--closed", E && "lmnt-circular-progress--".concat(E), P),
     style: {
-      width: z,
-      height: z
+      width: B,
+      height: B
     },
     role: "progressbar",
     "aria-label": a,
     "aria-valuemin": "0",
     "aria-valuemax": "1",
-    "aria-valuenow": d
+    "aria-valuenow": f
   }, G), /* @__PURE__ */ t.createElement("div", {
     className: "mdc-circular-progress__determinate-container"
   }, /* @__PURE__ */ t.createElement("svg", {
     className: "mdc-circular-progress__determinate-circle-graphic",
-    viewBox: w(r = "0 0 ".concat(n, " ")).call(r, n),
+    viewBox: w(r = "0 0 ".concat(l, " ")).call(r, l),
     xmlns: "http://www.w3.org/2000/svg"
   }, /* @__PURE__ */ t.createElement("circle", {
     className: "mdc-circular-progress__determinate-track",
     cx: i,
     cy: i,
-    r: f,
-    strokeWidth: _
+    r: _,
+    strokeWidth: D
   }), /* @__PURE__ */ t.createElement("circle", {
     className: "mdc-circular-progress__determinate-circle",
     cx: i,
     cy: i,
-    r: f,
-    strokeDasharray: C,
+    r: _,
+    strokeDasharray: A,
     strokeDashoffset: J,
-    strokeWidth: _
+    strokeWidth: D
   }))), /* @__PURE__ */ t.createElement("div", {
     className: "mdc-circular-progress__indeterminate-container"
   }, /* @__PURE__ */ t.createElement("div", {
-    className: $("mdc-circular-progress__spinner-layer", M && "mdc-circular-progress__color-1")
-  }, N()), M && /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", {
+    className: H("mdc-circular-progress__spinner-layer", F && "mdc-circular-progress__color-1")
+  }, N()), F && /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", {
     className: "mdc-circular-progress__spinner-layer mdc-circular-progress__color-2"
   }, N()), /* @__PURE__ */ t.createElement("div", {
     className: "mdc-circular-progress__spinner-layer mdc-circular-progress__color-3"
@@ -391,59 +391,71 @@ var me = (
 });
 W.displayName = "CircularProgress";
 W.propTypes = pe;
-const ge = "_centered_1aq9c_1", ve = {
-  centered: ge
-}, Ne = ({
+const ve = "_centered_1aq9c_1", _e = {
+  centered: ve
+}, we = ({
   size: s,
   center: e = !1,
   text: r,
-  textPosition: c = "bottom",
-  color: a = "primary",
-  spinnerOnly: l = !1,
+  subText: o,
+  textPosition: a = "bottom",
+  color: n = "primary",
+  spinnerOnly: P = !1,
   //Due to we don't have (and want) to use a translation logic in this component, we are using a hardcoded message
-  impatienceMessage: g = "This is taking longer than expected. Please be patient.",
-  impatienceTimeout: v = 10
+  impatienceMessage: d = "This is taking longer than expected. Please be patient.",
+  impatienceTimeout: y = 10
 }) => {
-  const [D, A] = ae(0);
+  const [p, f] = ae(!1), u = R(null);
   T(() => {
-    const k = setInterval(() => {
-      A((P) => P + 1);
-    }, 1e3);
-    return () => clearInterval(k);
-  }, []);
-  const d = ie(() => g && D > v ? g : r, [g, v, r, D]);
-  return s === "big" ? /* @__PURE__ */ y(ue, { text: d }) : l ? /* @__PURE__ */ y(
+    if (!(u.current || p))
+      return y !== "disabled" && d && (u.current = setTimeout(() => {
+        f(!0);
+      }, y * 1e3)), () => {
+        u.current && (clearTimeout(u.current), u.current = null);
+      };
+  }, [d, y, p]);
+  const k = ie(() => p && d ? d : r, [d, p, r]);
+  return s === "big" ? /* @__PURE__ */ C(me, { text: k, subText: o }) : P ? /* @__PURE__ */ C(
     W,
     {
       "data-testid": "loading-spinner",
-      themeColor: a,
+      themeColor: n,
       indicatorSize: s ?? "md"
     }
-  ) : /* @__PURE__ */ y(
+  ) : /* @__PURE__ */ C(
     le,
     {
       "data-testid": "loading-spinner-padding",
       variant: "standard",
-      className: e ? ve.centered : "",
+      className: e ? _e.centered : "",
       children: /* @__PURE__ */ Q(
         ce,
         {
           "data-testid": "loading-spinner-group",
           fullWidth: !0,
-          direction: c === "right" ? "horizontal" : "vertical",
+          direction: a === "right" ? "horizontal" : "vertical",
           gap: "dense",
           primaryAlign: "center",
           secondaryAlign: "center",
           children: [
-            /* @__PURE__ */ y(
+            /* @__PURE__ */ C(
               W,
               {
                 "data-testid": "loading-spinner",
-                themeColor: a,
+                themeColor: n,
                 indicatorSize: s ?? "lg"
               }
             ),
-            /* @__PURE__ */ y(de, { themeColor: `text-${a}-on-background`, tag: "div", "data-testid": "loading-text", children: d })
+            /* @__PURE__ */ C(de, { themeColor: `text-${n}-on-background`, tag: "div", "data-testid": "loading-text", children: k }),
+            o && /* @__PURE__ */ C(
+              ue,
+              {
+                themeColor: "text-secondary-on-background",
+                tag: "p",
+                "data-testid": "loading-subText",
+                children: o
+              }
+            )
           ]
         }
       )
@@ -451,5 +463,5 @@ const ge = "_centered_1aq9c_1", ve = {
   );
 };
 export {
-  Ne as LoadingSpinner
+  we as LoadingSpinner
 };

package/dist/components/Modal/Modal.d.ts

@@ -1,7 +1,7 @@
 import { ModalProps as ElementModalProps } from '@element-public/react-modal';
 import { AvailableCustomIcons } from '../../enums/AvailableCustomIcons';
-import { ErrorBannerProps } from '../ErrorBanner/ErrorBanner';
 import { OfflineViewProps } from '../OfflineView/OfflineView';
+import { TopBarBannerProps } from '../TopBarBanner/TopBarBanner';
 
 type ModalProps = Omit<ElementModalProps, 'primaryButton'> & React.HTMLProps<HTMLElement> & React.DOMAttributes<HTMLElement> & {
     closeIcon?: keyof typeof AvailableCustomIcons | string;
@@ -9,7 +9,7 @@ type ModalProps = Omit<ElementModalProps, 'primaryButton'> & React.HTMLProps<HTM
     isOnline?: boolean;
     offlineViewProps?: Partial<OfflineViewProps>;
 } & {
-    errorBannerProps?: Pick<ErrorBannerProps, 'title' | 'description' | 'primaryActionLabel' | 'onPrimaryAction' | 'secondaryActionLabel' | 'onSecondaryAction'> & {
+    errorBannerProps?: Pick<TopBarBannerProps, 'title' | 'description' | 'primaryActionLabel' | 'onPrimaryAction' | 'secondaryActionLabel' | 'onSecondaryAction'> & {
         hasError: boolean;
     };
 };

package/dist/components/Modal/Modal.js

@@ -11,9 +11,9 @@ import { M as ce, c as ue, m as de } from "../../component-DYpB_4EP.js";
 import { A as me } from "../../animationframe-CqXArbwZ.js";
 import { P as fe } from "../../index.es-C8AExypY.js";
 import { b as pe } from "../../index.es-EXzC8zuP.js";
-import { ErrorBanner as he } from "../ErrorBanner/ErrorBanner.js";
-import { Iconify as ge } from "../Iconify/Iconify.js";
-import { OfflineView as _e } from "../OfflineView/OfflineView.js";
+import { Iconify as he } from "../Iconify/Iconify.js";
+import { OfflineView as ge } from "../OfflineView/OfflineView.js";
+import { TopBarBanner as _e } from "../TopBarBanner/TopBarBanner.js";
 import '../../assets/Modal.css';function Ce(o, e, t) {
   return e(o, { initialFocusEl: t });
 }
@@ -493,7 +493,7 @@ var f = Kt.strings, Ae = (
       return this.root.querySelector("[" + f.INITIAL_FOCUS_ATTRIBUTE + "]");
     }, e;
   })(se)
-), be = {
+), Te = {
   /**
    * An action button that will not automatically trigger a dismiss or accept. It is meant to be used only in certain circumstances where more control of the modal is required such as validating forms. If primaryButton is sent with actionButton, actionButton will be ignored.
    *
@@ -662,7 +662,7 @@ var f = Kt.strings, Ae = (
    * Defaults to **null**.
    */
   title: l.string
-}, Te = {
+}, be = {
   actionButton: null,
   backButton: null,
   badge: void 0,
@@ -691,17 +691,17 @@ var f = Kt.strings, Ae = (
   returnFocusSelector: null,
   scrollable: !1,
   title: null
-}, Ie = ["actionButton", "actionIcons", "badge", "backButton", "children", "className", "content", "defaultButton", "dismissiveButton", "footerSupplemental", "headerActions", "hideCloseIcon", "indicator", "initialFocus", "mobileStackedButtons", "modalSize", "nextButton", "noActions", "onClose", "onClosed", "onOpen", "onOpened", "open", "preventClose", "preventPrimaryAccept", "primaryButton", "returnFocusSelector", "scrollable", "title", "iconSource"], r = Te, ot = /* @__PURE__ */ ee(function(o, e) {
-  var t = o.actionButton, n = t === void 0 ? r.actionButton : t, i = o.actionIcons, a = i === void 0 ? r.actionIcons : i, d = o.badge, h = d === void 0 ? r.badge : d, O = o.backButton, _ = O === void 0 ? r.backButton : O, S = o.children, F = S === void 0 ? r.children : S, b = o.className, W = b === void 0 ? r.className : b, E = o.content, L = E === void 0 ? r.content : E, it = o.defaultButton, T = it === void 0 ? r.defaultButton : it, at = o.dismissiveButton, R = at === void 0 ? r.dismissiveButton : at, rt = o.footerSupplemental, w = rt === void 0 ? r.footerSupplemental : rt, lt = o.headerActions, st = lt === void 0 ? r.headerActions : lt, ct = o.hideCloseIcon, V = ct === void 0 ? r.hideCloseIcon : ct, ut = o.indicator, Wt = ut === void 0 ? r.indicator : ut, dt = o.initialFocus, I = dt === void 0 ? r.initialFocus : dt, mt = o.mobileStackedButtons, z = mt === void 0 ? r.mobileStackedButtons : mt, ft = o.modalSize, C = ft === void 0 ? r.modalSize : ft, pt = o.nextButton, N = pt === void 0 ? r.nextButton : pt, ht = o.noActions, B = ht === void 0 ? r.noActions : ht, gt = o.onClose, j = gt === void 0 ? r.onClose : gt, _t = o.onClosed, q = _t === void 0 ? r.onClosed : _t, Ct = o.onOpen, k = Ct === void 0 ? r.onOpen : Ct, vt = o.onOpened, M = vt === void 0 ? r.onOpened : vt, Et = o.open, St = Et === void 0 ? r.open : Et, yt = o.preventClose, Y = yt === void 0 ? r.preventClose : yt, Ot = o.preventPrimaryAccept, At = Ot === void 0 ? r.preventPrimaryAccept : Ot, bt = o.primaryButton, u = bt === void 0 ? r.primaryButton : bt, Tt = o.returnFocusSelector, J = Tt === void 0 ? r.returnFocusSelector : Tt, It = o.scrollable, Nt = It === void 0 ? r.scrollable : It, Bt = o.title, Dt = Bt === void 0 ? r.title : Bt, Ft = o.iconSource, Vt = Ft === void 0 ? r.iconSource : Ft, zt = Zt(o, Ie), P = Pt(), c = Pt();
+}, Ie = ["actionButton", "actionIcons", "badge", "backButton", "children", "className", "content", "defaultButton", "dismissiveButton", "footerSupplemental", "headerActions", "hideCloseIcon", "indicator", "initialFocus", "mobileStackedButtons", "modalSize", "nextButton", "noActions", "onClose", "onClosed", "onOpen", "onOpened", "open", "preventClose", "preventPrimaryAccept", "primaryButton", "returnFocusSelector", "scrollable", "title", "iconSource"], r = be, ot = /* @__PURE__ */ ee(function(o, e) {
+  var t = o.actionButton, n = t === void 0 ? r.actionButton : t, i = o.actionIcons, a = i === void 0 ? r.actionIcons : i, d = o.badge, h = d === void 0 ? r.badge : d, O = o.backButton, _ = O === void 0 ? r.backButton : O, S = o.children, F = S === void 0 ? r.children : S, T = o.className, W = T === void 0 ? r.className : T, E = o.content, L = E === void 0 ? r.content : E, it = o.defaultButton, b = it === void 0 ? r.defaultButton : it, at = o.dismissiveButton, R = at === void 0 ? r.dismissiveButton : at, rt = o.footerSupplemental, w = rt === void 0 ? r.footerSupplemental : rt, lt = o.headerActions, st = lt === void 0 ? r.headerActions : lt, ct = o.hideCloseIcon, V = ct === void 0 ? r.hideCloseIcon : ct, ut = o.indicator, Wt = ut === void 0 ? r.indicator : ut, dt = o.initialFocus, I = dt === void 0 ? r.initialFocus : dt, mt = o.mobileStackedButtons, z = mt === void 0 ? r.mobileStackedButtons : mt, ft = o.modalSize, C = ft === void 0 ? r.modalSize : ft, pt = o.nextButton, B = pt === void 0 ? r.nextButton : pt, ht = o.noActions, N = ht === void 0 ? r.noActions : ht, gt = o.onClose, j = gt === void 0 ? r.onClose : gt, _t = o.onClosed, q = _t === void 0 ? r.onClosed : _t, Ct = o.onOpen, k = Ct === void 0 ? r.onOpen : Ct, vt = o.onOpened, M = vt === void 0 ? r.onOpened : vt, Et = o.open, St = Et === void 0 ? r.open : Et, yt = o.preventClose, Y = yt === void 0 ? r.preventClose : yt, Ot = o.preventPrimaryAccept, At = Ot === void 0 ? r.preventPrimaryAccept : Ot, Tt = o.primaryButton, u = Tt === void 0 ? r.primaryButton : Tt, bt = o.returnFocusSelector, J = bt === void 0 ? r.returnFocusSelector : bt, It = o.scrollable, Bt = It === void 0 ? r.scrollable : It, Nt = o.title, Dt = Nt === void 0 ? r.title : Nt, Ft = o.iconSource, Vt = Ft === void 0 ? r.iconSource : Ft, zt = Zt(o, Ie), P = Pt(), c = Pt();
   ne(e, function() {
     return P.current;
   }, []);
   var jt = Ht(), Lt = Mt(jt, 2), Q = Lt[0], qt = Lt[1], Yt = Ht(function() {
-    return N || _;
+    return B || _;
   }), Rt = Mt(Yt, 2), X = Rt[0], Jt = Rt[1];
   v(function() {
-    Jt(N || _);
-  }, [N, _]);
+    Jt(B || _);
+  }, [B, _]);
   var H = Z(function() {
     xt() && qt(window.innerWidth <= 600);
   }, []);
@@ -717,9 +717,9 @@ var f = Kt.strings, Ae = (
   }, [c, P]), v(function() {
     c.current.foundation.setAutoStackButtons(z);
   }, [z]), v(function() {
-    B && (c.current.foundation.adapter.trapFocus = function() {
+    N && (c.current.foundation.adapter.trapFocus = function() {
     });
-  }, [B]), v(function() {
+  }, [N]), v(function() {
     c.current.scrimClickAction = Y ? "" : "close", c.current.escapeKeyAction = Y ? "" : "close";
   }, [Y]);
   var x = Z(function(p) {
@@ -753,9 +753,9 @@ var f = Kt.strings, Ae = (
         elevation: n?.props.elevation !== "default" ? n?.props.elevation : "flat",
         variant: n?.props.variant || "filled"
       };
-      return T === "action" && (p["data-mdc-dialog-button-default"] = !0), I === "action" && (p["data-mdc-dialog-initial-focus"] = !0), p;
+      return b === "action" && (p["data-mdc-dialog-button-default"] = !0), I === "action" && (p["data-mdc-dialog-initial-focus"] = !0), p;
     };
-  }, [n?.props.elevation, n?.props.variant, T, I]), Xt = nt(function() {
+  }, [n?.props.elevation, n?.props.variant, b, I]), Xt = nt(function() {
     return function() {
       var p = {
         className: "lmnt-modal__button mdc-dialog__button",
@@ -763,20 +763,20 @@ var f = Kt.strings, Ae = (
         elevation: u?.props.elevation !== "default" ? u?.props.elevation : "flat",
         variant: u?.props.variant || "filled"
       };
-      return T === "primary" && (p["data-mdc-dialog-button-default"] = !0), I === "primary" && (p["data-mdc-dialog-initial-focus"] = !0), p;
+      return b === "primary" && (p["data-mdc-dialog-button-default"] = !0), I === "primary" && (p["data-mdc-dialog-initial-focus"] = !0), p;
     };
-  }, [At, T, I, u?.props.elevation, u?.props.variant]);
+  }, [At, b, I, u?.props.elevation, u?.props.variant]);
   return /* @__PURE__ */ m.createElement("aside", te({
     ref: P,
-    className: G("lmnt", "lmnt-modal", "mdc-dialog", Nt && "lmnt-modal--scrollable mdc-dialog--scrollable", W),
+    className: G("lmnt", "lmnt-modal", "mdc-dialog", Bt && "lmnt-modal--scrollable mdc-dialog--scrollable", W),
     role: "alertdialog"
   }, zt), /* @__PURE__ */ m.createElement("div", {
-    className: G("lmnt-modal__container", "mdc-dialog__container", C === "fullscreen" && "mdc-dialog--fullscreen", C === "max" && "lmnt-modal__max", C === "xlarge" && "lmnt-modal__xl", C === "large" && "lmnt-modal__lg", C === "medium" && "lmnt-modal__md", C === "small" && "lmnt-modal__sm", (C === "mobile" || Q) && "lmnt-modal__mobile", C === "dialog" && "lmnt-modal__dialog", B && "lmnt-modal-no-actions")
+    className: G("lmnt-modal__container", "mdc-dialog__container", C === "fullscreen" && "mdc-dialog--fullscreen", C === "max" && "lmnt-modal__max", C === "xlarge" && "lmnt-modal__xl", C === "large" && "lmnt-modal__lg", C === "medium" && "lmnt-modal__md", C === "small" && "lmnt-modal__sm", (C === "mobile" || Q) && "lmnt-modal__mobile", C === "dialog" && "lmnt-modal__dialog", N && "lmnt-modal-no-actions")
   }, /* @__PURE__ */ m.createElement("div", {
     className: "lmnt-modal__surface mdc-dialog__surface"
   }, /* @__PURE__ */ m.createElement("header", {
-    className: G("lmnt-modal__title", "mdc-dialog__title", (C === "dialog" || V) && "lmnt-modal_title-hide-close-icon", a && "lmnt-modal_title-actionsIcons", Nt && "lmnt-modal__title-scrollable", (V || C === "dialog" || B) && "lmnt-modal--no-close-icon")
-  }, !V && C !== "dialog" && !B && /* @__PURE__ */ m.createElement(Ut, {
+    className: G("lmnt-modal__title", "mdc-dialog__title", (C === "dialog" || V) && "lmnt-modal_title-hide-close-icon", a && "lmnt-modal_title-actionsIcons", Bt && "lmnt-modal__title-scrollable", (V || C === "dialog" || N) && "lmnt-modal--no-close-icon")
+  }, !V && C !== "dialog" && !N && /* @__PURE__ */ m.createElement(Ut, {
     className: "mdc-icon-button material-icons mdc-dialog__close",
     "data-mdc-dialog-action": "close",
     icon: "clear",
@@ -790,13 +790,13 @@ var f = Kt.strings, Ae = (
     }
   }, h)), (L || F) && /* @__PURE__ */ m.createElement("section", {
     className: "lmnt-modal__content mdc-dialog__content"
-  }, L || F), Wt, (n || _ || R || N || u || w) && /* @__PURE__ */ m.createElement("footer", {
+  }, L || F), Wt, (n || _ || R || B || u || w) && /* @__PURE__ */ m.createElement("footer", {
     className: G("lmnt-modal__actions", "mdc-dialog__actions", Q && "lmnt-dialog__actions__mobile", w && "lmnt-modal__actions--supplemental-btn", Q && z && "lmnt-modal_actions-mobile-stacked")
   }, !X && w && /* @__PURE__ */ m.createElement("div", {
     className: "lmnt-dialog__actions__supplemental"
   }, D(w, function() {
     var p = {};
-    return T === "footerSupplemental" && (p["data-mdc-dialog-button-default"] = !0), I === "footerSupplemental" && (p["data-mdc-dialog-initial-focus"] = !0), p;
+    return b === "footerSupplemental" && (p["data-mdc-dialog-button-default"] = !0), I === "footerSupplemental" && (p["data-mdc-dialog-initial-focus"] = !0), p;
   })), !X && (n || R || u) && /* @__PURE__ */ m.createElement("div", {
     className: "lmnt-dialog__actions__right-align lmnt-modal_actions_button"
   }, R && D(R, {
@@ -805,7 +805,7 @@ var f = Kt.strings, Ae = (
     "data-mdc-dialog-action": "close"
   }), n && !u && D(n, Qt), u && D(u, Xt)), X && /* @__PURE__ */ m.createElement("div", {
     className: "lmnt-modal_actions_button lmnt-dialog__actions__directional"
-  }, /* @__PURE__ */ m.createElement("div", null, ae(_, "lmnt-modal__button")), /* @__PURE__ */ m.createElement("div", null, D(N, {
+  }, /* @__PURE__ */ m.createElement("div", null, ae(_, "lmnt-modal__button")), /* @__PURE__ */ m.createElement("div", null, D(B, {
     className: "lmnt-modal__button",
     "data-mdc-dialog-initial-focus": !0
   })))))), /* @__PURE__ */ m.createElement("div", {
@@ -813,10 +813,10 @@ var f = Kt.strings, Ae = (
   }));
 });
 ot.displayName = "Modal";
-ot.propTypes = be;
-const Ne = "_modal_1l955_1", Be = "_gap_1l955_18", De = "_title_1l955_23", Fe = "_titleWithoutCloseIcon_1l955_36", Le = "_closeButton_1l955_40", Re = "_errorBanner_1l955_52", y = {
-  modal: Ne,
-  gap: Be,
+ot.propTypes = Te;
+const Be = "_modal_1l955_1", Ne = "_gap_1l955_18", De = "_title_1l955_23", Fe = "_titleWithoutCloseIcon_1l955_36", Le = "_closeButton_1l955_40", Re = "_errorBanner_1l955_52", y = {
+  modal: Be,
+  gap: Ne,
   title: De,
   titleWithoutCloseIcon: Fe,
   closeButton: Le,
@@ -833,7 +833,7 @@ const Ne = "_modal_1l955_1", Be = "_gap_1l955_18", De = "_title_1l955_23", Fe =
   offlineViewProps: O,
   children: _,
   errorBannerProps: { hasError: S, ...F } = { hasError: !1 },
-  ...b
+  ...T
 }) => {
   const W = nt(() => {
     const E = {
@@ -854,7 +854,7 @@ const Ne = "_modal_1l955_1", Be = "_gap_1l955_18", De = "_title_1l955_23", Fe =
                 className: y.closeButton
               }
             ),
-            d ? /* @__PURE__ */ g(fe, { customPadding: "0.25rem 0 0 0.75rem", children: /* @__PURE__ */ g(ge, { icon: d }) }) : /* @__PURE__ */ g(wt, {}),
+            d ? /* @__PURE__ */ g(fe, { customPadding: "0.25rem 0 0 0.75rem", children: /* @__PURE__ */ g(he, { icon: d }) }) : /* @__PURE__ */ g(wt, {}),
             /* @__PURE__ */ g(
               pe,
               {
@@ -879,17 +879,17 @@ const Ne = "_modal_1l955_1", Be = "_gap_1l955_18", De = "_title_1l955_23", Fe =
   return /* @__PURE__ */ g(
     ot,
     {
-      ...b,
+      ...T,
       "data-testid": "modal",
-      className: `${y.modal} ${y.title} ${b.className ?? ""}`,
+      className: `${y.modal} ${y.title} ${T.className ?? ""}`,
       hideCloseIcon: !0,
       actionButton: n,
       headerActions: /* @__PURE__ */ kt(U, { fullWidth: !0, gap: "none", direction: "vertical", children: [
         /* @__PURE__ */ g(U, { fullWidth: !0, primaryAlign: "space-between", secondaryAlign: "center", children: W.map((E) => /* @__PURE__ */ g(oe, { children: E.action }, E.id)) }),
-        S && /* @__PURE__ */ g("div", { className: y.errorBanner, children: /* @__PURE__ */ g(he, { ...F, isOpen: S }) })
+        S && /* @__PURE__ */ g("div", { className: y.errorBanner, children: /* @__PURE__ */ g(_e, { ...F, isOpen: S }) })
       ] }, "header-group"),
       preventClose: !0,
-      children: h ? /* @__PURE__ */ g(wt, { children: _ }) : /* @__PURE__ */ g(_e, { ...O })
+      children: h ? /* @__PURE__ */ g(wt, { children: _ }) : /* @__PURE__ */ g(ge, { ...O })
     }
   );
 };

package/dist/components/{ErrorBanner/ErrorBanner.d.ts → TopBarBanner/TopBarBanner.d.ts}

@@ -1,4 +1,4 @@
-export type ErrorBannerProps = {
+export type TopBarBannerProps = {
     title?: string;
     description?: string;
     isOpen?: boolean;
@@ -7,9 +7,10 @@ export type ErrorBannerProps = {
     secondaryActionLabel?: string;
     onSecondaryAction?: () => void;
     isStandalone?: boolean;
+    icon?: string;
 };
 /**
- * Error banner component to display error messages with optional actions.
+ * Top bar banner component to display error messages with optional actions.
  * Designed to be used below a header or as a standalone banner in a modal.
  *
  * @param {string} title - Title text displayed in the banner
@@ -20,6 +21,6 @@ export type ErrorBannerProps = {
  * @param {string} secondaryActionLabel - Label for the secondary action button. If not provided, button will not be rendered.
  * @param {() => void} onSecondaryAction - Handler for the secondary action button
  * @param {boolean} isStandalone - When true, renders the banner with a rounded border instead of a bottom border
- * @returns {JSX.Element|null} The rendered ErrorBanner component or null if not visible
+ * @returns {JSX.Element|null} The rendered TopBarBanner component or null if not visible
  */
-export declare const ErrorBanner: ({ title, description, isOpen, isStandalone, ...props }: ErrorBannerProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const TopBarBanner: ({ title, description, isOpen, isStandalone, icon, ...props }: TopBarBannerProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/TopBarBanner/TopBarBanner.js

@@ -0,0 +1,78 @@
+import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import { B as c } from "../../index.es-B1cewJEy.js";
+import { G as o } from "../../index.es-BE1XL1dD.js";
+import { P as u } from "../../index.es-C8AExypY.js";
+import { T as b, a as h } from "../../index.es-EXzC8zuP.js";
+import { c as B } from "../../index-_-9ybP20.js";
+import { useContainerWidth as g } from "../../hooks/useContainerWidth.js";
+import { Iconify as y } from "../Iconify/Iconify.js";
+import '../../assets/TopBarBanner.css';const _ = "_bannerPadding_1ijh0_1", P = "_bottomBorder_1ijh0_7", v = "_standaloneBorder_1ijh0_12", s = {
+  bannerPadding: _,
+  bottomBorder: P,
+  standaloneBorder: v
+}, N = ({
+  title: n,
+  description: a,
+  isOpen: e,
+  isStandalone: i,
+  icon: d,
+  ...m
+}) => {
+  const { ref: p, isWide: l } = g(), f = B(
+    s.bannerPadding,
+    i ? s.standaloneBorder : s.bottomBorder
+  );
+  return e ? /* @__PURE__ */ r(u, { customPadding: "0.5rem 1rem", className: f, "data-testid": "top-bar-banner", children: /* @__PURE__ */ t(
+    o,
+    {
+      ref: p,
+      fullWidth: !0,
+      direction: l ? "horizontal" : "vertical",
+      secondaryAlign: "center",
+      children: [
+        /* @__PURE__ */ t(o, { fullWidth: !0, primaryAlign: "space-between", secondaryAlign: l ? "center" : "start", children: [
+          /* @__PURE__ */ r(
+            y,
+            {
+              icon: d ?? "sentiment-very-dissatisfied",
+              iconSize: "large",
+              variant: "color-primary"
+            }
+          ),
+          /* @__PURE__ */ t(o, { direction: "vertical", fullWidth: !0, gap: "none", children: [
+            /* @__PURE__ */ r(b, { bold: !0, level: 2, themeColor: "primary", children: n }),
+            /* @__PURE__ */ r(h, { children: a })
+          ] })
+        ] }),
+        /* @__PURE__ */ r(C, { ...m, isWide: l })
+      ]
+    }
+  ) }) : null;
+}, C = ({
+  primaryActionLabel: n,
+  onPrimaryAction: a,
+  secondaryActionLabel: e,
+  onSecondaryAction: i,
+  isWide: d
+}) => /* @__PURE__ */ t(o, { fullWidth: !d, primaryAlign: "end", secondaryAlign: "center", children: [
+  n && /* @__PURE__ */ r(
+    c,
+    {
+      label: n,
+      onClick: a,
+      "data-testid": "top-bar-banner-primary-action"
+    }
+  ),
+  e && /* @__PURE__ */ r(
+    c,
+    {
+      label: e,
+      variant: "outlined",
+      onClick: i,
+      "data-testid": "top-bar-banner-secondary-action"
+    }
+  )
+] });
+export {
+  N as TopBarBanner
+};

package/dist/main.d.ts

@@ -11,10 +11,9 @@ export { DeleteModal } from './components/DeleteModal/DeleteModal';
 export { DetailContentWrapper } from './components/DetailContentWrapper/DetailContentWrapper';
 export { Disclaimer } from './components/Disclaimer/Disclaimer';
 export { EmptyView } from './components/EmptyView/EmptyView';
-export { ErrorBanner } from './components/ErrorBanner/ErrorBanner';
 export { Filter } from './components/Filter/Filter';
-export { FormattedNumberDisplay } from './components/FormattedNumberDisplay/FormattedNumberDisplay';
 export { FloatingActionButton } from './components/FloatingActionButton/FloatingActionButton';
+export { FormattedNumberDisplay } from './components/FormattedNumberDisplay/FormattedNumberDisplay';
 export { GenericTable } from './components/GenericTable/GenericTable';
 export { HashTabView } from './components/HashTabView/HashTabView';
 export { HeaderFilter } from './components/HeaderFilter/HeaderFilter';
@@ -33,6 +32,7 @@ export { SearchBar } from './components/SearchBar/SearchBar';
 export { Select } from './components/Select/Select';
 export { StepperHeader } from './components/Stepper/components/StepperHeader';
 export { Stepper } from './components/Stepper/Stepper';
+export { TopBarBanner } from './components/TopBarBanner/TopBarBanner';
 export { VerticalDivider } from './components/VerticalDivider/VerticalDivider';
 export { FormCheckBox } from './components/FormComponents/FormCheckBox/FormCheckBox';
 export { FormDatePicker } from './components/FormComponents/FormDatePicker/FormDatePicker';

package/dist/main.js

@@ -5,36 +5,36 @@ import { BasicHeading as i } from "./components/BasicHeading/BasicHeading.js";
 import { BlockView as n } from "./components/BlockView/BlockView.js";
 import { ButtonCard as A } from "./components/ButtonCard/ButtonCard.js";
 import { ChipCard as d } from "./components/ChipCard/ChipCard.js";
-import { ConfirmationModal as E } from "./components/ConfirmationModal/ConfirmationModal.js";
+import { ConfirmationModal as c } from "./components/ConfirmationModal/ConfirmationModal.js";
 import { ContextMenu as F } from "./components/ContextMenu/ContextMenu.js";
-import { DeleteModal as _ } from "./components/DeleteModal/DeleteModal.js";
-import { DetailContentWrapper as T } from "./components/DetailContentWrapper/DetailContentWrapper.js";
+import { DeleteModal as T } from "./components/DeleteModal/DeleteModal.js";
+import { DetailContentWrapper as I } from "./components/DetailContentWrapper/DetailContentWrapper.js";
 import { Disclaimer as G } from "./components/Disclaimer/Disclaimer.js";
 import { EmptyView as C } from "./components/EmptyView/EmptyView.js";
-import { ErrorBanner as M } from "./components/ErrorBanner/ErrorBanner.js";
-import { Filter as g } from "./components/Filter/Filter.js";
+import { Filter as M } from "./components/Filter/Filter.js";
+import { FloatingActionButton as g } from "./components/FloatingActionButton/FloatingActionButton.js";
 import { FormattedNumberDisplay as w } from "./components/FormattedNumberDisplay/FormattedNumberDisplay.js";
-import { FloatingActionButton as O } from "./components/FloatingActionButton/FloatingActionButton.js";
-import { GenericTable as V } from "./components/GenericTable/GenericTable.js";
-import { HashTabView as H } from "./components/HashTabView/HashTabView.js";
-import { HeaderFilter as k } from "./components/HeaderFilter/HeaderFilter.js";
-import { Iconify as y } from "./components/Iconify/Iconify.js";
-import { InfoCard as Y } from "./components/InfoCard/InfoCard.js";
-import { InfoGroup as z } from "./components/InfoGroup/InfoGroup.js";
-import { ListArea as j } from "./components/ListArea/ListArea.js";
-import { LoadingSpinner as J } from "./components/LoadingSpinner/Default/LoadingSpinner.js";
-import { Modal as Z } from "./components/Modal/Modal.js";
-import { ModulePadding as rr } from "./components/ModulePadding/ModulePadding.js";
-import { OfflineView as er } from "./components/OfflineView/OfflineView.js";
-import { OnboardingBanner as mr } from "./components/OnboardingBanner/OnboardingBanner.js";
-import { OverflowTooltip as fr } from "./components/OverflowTooltip/OverflowTooltip.js";
-import { ScrollbarX as ir, ScrollbarY as ar } from "./components/Scrollbar/Scrollbar.js";
-import { SearchBar as lr } from "./components/SearchBar/SearchBar.js";
-import { Select as sr } from "./components/Select/Select.js";
-import { StepperHeader as Sr } from "./components/Stepper/components/StepperHeader.js";
-import { Stepper as cr } from "./components/Stepper/Stepper.js";
+import { GenericTable as O } from "./components/GenericTable/GenericTable.js";
+import { HashTabView as V } from "./components/HashTabView/HashTabView.js";
+import { HeaderFilter as H } from "./components/HeaderFilter/HeaderFilter.js";
+import { Iconify as k } from "./components/Iconify/Iconify.js";
+import { InfoCard as y } from "./components/InfoCard/InfoCard.js";
+import { InfoGroup as Y } from "./components/InfoGroup/InfoGroup.js";
+import { ListArea as z } from "./components/ListArea/ListArea.js";
+import { LoadingSpinner as j } from "./components/LoadingSpinner/Default/LoadingSpinner.js";
+import { Modal as J } from "./components/Modal/Modal.js";
+import { ModulePadding as Z } from "./components/ModulePadding/ModulePadding.js";
+import { OfflineView as rr } from "./components/OfflineView/OfflineView.js";
+import { OnboardingBanner as er } from "./components/OnboardingBanner/OnboardingBanner.js";
+import { OverflowTooltip as mr } from "./components/OverflowTooltip/OverflowTooltip.js";
+import { ScrollbarX as fr, ScrollbarY as xr } from "./components/Scrollbar/Scrollbar.js";
+import { SearchBar as ar } from "./components/SearchBar/SearchBar.js";
+import { Select as lr } from "./components/Select/Select.js";
+import { StepperHeader as sr } from "./components/Stepper/components/StepperHeader.js";
+import { Stepper as Sr } from "./components/Stepper/Stepper.js";
+import { TopBarBanner as Er } from "./components/TopBarBanner/TopBarBanner.js";
 import { VerticalDivider as Lr } from "./components/VerticalDivider/VerticalDivider.js";
-import { FormCheckBox as Ir } from "./components/FormComponents/FormCheckBox/FormCheckBox.js";
+import { FormCheckBox as _r } from "./components/FormComponents/FormCheckBox/FormCheckBox.js";
 import { FormDatePicker as Br } from "./components/FormComponents/FormDatePicker/FormDatePicker.js";
 import { FormNumber as ur } from "./components/FormComponents/FormNumber/FormNumber.js";
 import { FormRadio as Dr } from "./components/FormComponents/FormRadio/FormRadio.js";
@@ -52,9 +52,9 @@ import { StepperStyle as Zr } from "./components/Stepper/stepperStyles.js";
 import { DATE_FORMAT as ro, DATE_TIME_FORMAT as oo, TIME_FORMAT as eo } from "./types/Time.js";
 import { AVAILABLE_COUNTRY_KEYS as mo, AVAILABLE_LOCALES as po, ENGLISH_LANGUAGE_ID as fo, GERMAN_LANGUAGE_ID as xo, LANGUAGE_CODES_MAPPER as io, LANGUAGE_ID_MAPPER as ao, SPANISH_LANGUAGE_ID as no, TURKISH_LANGUAGE_ID as lo } from "./types/Languages.js";
 import { Allowed as so } from "./components/Allowed/Allowed.js";
-import { AllowedButton as Eo } from "./components/AllowedButton/AllowedButton.js";
+import { AllowedButton as co } from "./components/AllowedButton/AllowedButton.js";
 import { AllowedIconButton as Fo } from "./components/AllowedIconButton/AllowedIconButton.js";
-import { getPermissionsFromModulePermissionToken as _o, useIsAllowed as Io } from "./components/PermissionChecks/PermissionService.js";
+import { getPermissionsFromModulePermissionToken as To, useIsAllowed as _o } from "./components/PermissionChecks/PermissionService.js";
 import { SharedComponentsPermissionProvider as Bo } from "./components/SharedComponentsPermissionProvider/SharedComponentsPermissionProvider.js";
 import { createPermissionWrapper as uo, renderWithPermissions as Co } from "./test-utils.js";
 import { HVMainPermissions as Mo } from "./types/Permission.js";
@@ -63,7 +63,7 @@ export {
   po as AVAILABLE_LOCALES,
   e as AlertBanner,
   so as Allowed,
-  Eo as AllowedButton,
+  co as AllowedButton,
   Fo as AllowedIconButton,
   Ur as AvailableCustomIcons,
   f as BaseView,
@@ -71,19 +71,18 @@ export {
   n as BlockView,
   A as ButtonCard,
   d as ChipCard,
-  E as ConfirmationModal,
+  c as ConfirmationModal,
   F as ContextMenu,
   ro as DATE_FORMAT,
   oo as DATE_TIME_FORMAT,
-  _ as DeleteModal,
-  T as DetailContentWrapper,
+  T as DeleteModal,
+  I as DetailContentWrapper,
   G as Disclaimer,
   fo as ENGLISH_LANGUAGE_ID,
   C as EmptyView,
-  M as ErrorBanner,
-  g as Filter,
-  O as FloatingActionButton,
-  Ir as FormCheckBox,
+  M as Filter,
+  g as FloatingActionButton,
+  _r as FormCheckBox,
   Br as FormDatePicker,
   ur as FormNumber,
   Dr as FormRadio,
@@ -93,45 +92,46 @@ export {
   Rr as FormToggle,
   w as FormattedNumberDisplay,
   xo as GERMAN_LANGUAGE_ID,
-  V as GenericTable,
+  O as GenericTable,
   Mo as HVMainPermissions,
-  H as HashTabView,
-  k as HeaderFilter,
-  y as Iconify,
-  Y as InfoCard,
-  z as InfoGroup,
+  V as HashTabView,
+  H as HeaderFilter,
+  k as Iconify,
+  y as InfoCard,
+  Y as InfoGroup,
   io as LANGUAGE_CODES_MAPPER,
   ao as LANGUAGE_ID_MAPPER,
   m as LinkBanner,
-  j as ListArea,
-  J as LoadingSpinner,
-  Z as Modal,
-  rr as ModulePadding,
-  er as OfflineView,
-  mr as OnboardingBanner,
-  fr as OverflowTooltip,
+  z as ListArea,
+  j as LoadingSpinner,
+  J as Modal,
+  Z as ModulePadding,
+  rr as OfflineView,
+  er as OnboardingBanner,
+  mr as OverflowTooltip,
   no as SPANISH_LANGUAGE_ID,
   hr as SafeForm,
-  ir as ScrollbarX,
-  ar as ScrollbarY,
-  lr as SearchBar,
-  sr as Select,
+  fr as ScrollbarX,
+  xr as ScrollbarY,
+  ar as SearchBar,
+  lr as Select,
   Bo as SharedComponentsPermissionProvider,
-  cr as Stepper,
-  Sr as StepperHeader,
+  Sr as Stepper,
+  sr as StepperHeader,
   Zr as StepperStyle,
   eo as TIME_FORMAT,
   lo as TURKISH_LANGUAGE_ID,
   vr as ThemeColor,
+  Er as TopBarBanner,
   Lr as VerticalDivider,
   Xr as capitalizeFirstLetters,
   uo as createPermissionWrapper,
   jr as getFormattedDateTime,
   qr as getNumberAsLocaleString,
-  _o as getPermissionsFromModulePermissionToken,
+  To as getPermissionsFromModulePermissionToken,
   Co as renderWithPermissions,
   Jr as trimLeadingAndTrailingSpaces,
   Wr as useBreakpoints,
   Kr as useContainerWidth,
-  Io as useIsAllowed
+  _o as useIsAllowed
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hortiview/shared-components",
   "description": "This is a shared component library. It should used in the HortiView platform and its modules.",
-  "version": "2.26.2",
+  "version": "2.27.0",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",

package/dist/assets/ErrorBanner.css

@@ -1 +0,0 @@
-._bannerPadding_1ka2b_1{width:100%;box-sizing:border-box;background-color:var(--lmnt-theme-secondary-50)}._bottomBorder_1ka2b_7{border-top:1px solid var(--lmnt-theme-secondary-100);border-bottom:1px solid var(--lmnt-theme-secondary-100)}._standaloneBorder_1ka2b_12{border-color:var(--lmnt-theme-secondary-100);border-width:1px;border-style:solid;border-radius:.5rem}

package/dist/components/ErrorBanner/ErrorBanner.js

@@ -1,70 +0,0 @@
-import { jsx as r, jsxs as o } from "react/jsx-runtime";
-import { B as c } from "../../index.es-B1cewJEy.js";
-import { G as t } from "../../index.es-BE1XL1dD.js";
-import { P as f } from "../../index.es-C8AExypY.js";
-import { T as u, a as b } from "../../index.es-EXzC8zuP.js";
-import { c as h } from "../../index-_-9ybP20.js";
-import { useContainerWidth as B } from "../../hooks/useContainerWidth.js";
-import { Iconify as g } from "../Iconify/Iconify.js";
-import '../../assets/ErrorBanner.css';const y = "_bannerPadding_1ka2b_1", _ = "_bottomBorder_1ka2b_7", P = "_standaloneBorder_1ka2b_12", s = {
-  bannerPadding: y,
-  bottomBorder: _,
-  standaloneBorder: P
-}, E = ({
-  title: n,
-  description: a,
-  isOpen: e,
-  isStandalone: i,
-  ...d
-}) => {
-  const { ref: m, isWide: l } = B(), p = h(
-    s.bannerPadding,
-    i ? s.standaloneBorder : s.bottomBorder
-  );
-  return e ? /* @__PURE__ */ r(f, { customPadding: "0.5rem 1rem", className: p, "data-testid": "error-banner", children: /* @__PURE__ */ o(
-    t,
-    {
-      ref: m,
-      fullWidth: !0,
-      direction: l ? "horizontal" : "vertical",
-      secondaryAlign: "center",
-      children: [
-        /* @__PURE__ */ o(t, { fullWidth: !0, primaryAlign: "space-between", secondaryAlign: l ? "center" : "start", children: [
-          /* @__PURE__ */ r(g, { icon: "sentiment-very-dissatisfied", iconSize: "large", variant: "color-primary" }),
-          /* @__PURE__ */ o(t, { direction: "vertical", fullWidth: !0, gap: "none", children: [
-            /* @__PURE__ */ r(u, { bold: !0, level: 2, themeColor: "primary", children: n }),
-            /* @__PURE__ */ r(b, { children: a })
-          ] })
-        ] }),
-        /* @__PURE__ */ r(v, { ...d, isWide: l })
-      ]
-    }
-  ) }) : null;
-}, v = ({
-  primaryActionLabel: n,
-  onPrimaryAction: a,
-  secondaryActionLabel: e,
-  onSecondaryAction: i,
-  isWide: d
-}) => /* @__PURE__ */ o(t, { fullWidth: !d, primaryAlign: "end", secondaryAlign: "center", children: [
-  n && /* @__PURE__ */ r(
-    c,
-    {
-      label: n,
-      onClick: a,
-      "data-testid": "error-banner-primary-action"
-    }
-  ),
-  e && /* @__PURE__ */ r(
-    c,
-    {
-      label: e,
-      variant: "outlined",
-      onClick: i,
-      "data-testid": "error-banner-secondary-action"
-    }
-  )
-] });
-export {
-  E as ErrorBanner
-};