@hortiview/default-components 1.2.0 → 1.3.0

package/dist/{index.es-6TJ1S8Jr-BFJPMGBn.js → index.es-6TJ1S8Jr-C4X_iaSC.js}

@@ -1,8 +1,9 @@
-import { _ as y, N, R as e, b as A, L as Y, r as ie, h as we, f as $e, p as Te, a as Se, q as Z, n as Ae, o as Be } from "./useTranslation-B6E1rHIA.js";
-import i, { forwardRef as k, useRef as D, useImperativeHandle as F, useEffect as V, useCallback as Le, useState as de, useMemo as ee, createContext as De, useLayoutEffect as ze } from "react";
-import { U as ce } from "./component-DsB0poTj-CmUZ4Kqw.js";
-import { a as Fe } from "./index.es-D-CKRzIB-C6Z-ohcV.js";
-const Me = {
+import { _ as m, N as b, R as e, b as x, L as pe, r as G, h as ge, f as Ae, p as me, a as Ne, q as K, I as ye } from "./useTranslation-v0qSkb40.js";
+import d, { forwardRef as v, useRef as L, useImperativeHandle as w, useEffect as D, useState as J, useMemo as U, createContext as Te, useLayoutEffect as ke } from "react";
+import { O as Be } from "./index.es-CiqbARoC-D-muiSwa.js";
+import { U as ue } from "./component-DsB0poTj-uxpi4oSj.js";
+import { n as Le } from "./Iconify-B42tJF6q.js";
+const Ee = {
   /**
    * The css class name to be passed through to the component markup.
    *
@@ -16,7 +17,7 @@ const Me = {
    *
    * Defaults to **undefined**.
    */
-  dividerColor: A(e.string, "Divider", "Use `themeColor` instead."),
+  dividerColor: x(e.string, "Divider", "Use `themeColor` instead."),
   /**
    * @deprecated _Use `themeColorImportant` instead._
    *
@@ -24,7 +25,7 @@ const Me = {
    *
    * Defaults to **undefined**.
    */
-  dividerColorImportant: A(e.bool, "Divider", "Use `themeColorImportant` instead."),
+  dividerColorImportant: x(e.bool, "Divider", "Use `themeColorImportant` instead."),
   /**
    * @deprecated _Use `variant` instead._
    *
@@ -32,7 +33,7 @@ const Me = {
    *
    * Defaults to **undefined**.
    */
-  dividerHeight: A(e.string, "Divider", "Use `variant` instead."),
+  dividerHeight: x(e.string, "Divider", "Use `variant` instead."),
   /**
    * Set the border-style with default browser styles. In general, avoid using.
    *
@@ -52,7 +53,7 @@ const Me = {
    *
    * Defaults to **undefined**.
    */
-  themeColorImportant: A(e.bool, "Divider", "No longer needed."),
+  themeColorImportant: x(e.bool, "Divider", "No longer needed."),
   /**
    * Choose between dense and tall variants.
    *
@@ -65,7 +66,7 @@ const Me = {
    * Defaults to **'none'**.
    */
   verticalMargin: e.oneOf(["none", "dense", "standard", "airy"])
-}, We = {
+}, Ie = {
   className: void 0,
   dividerColor: void 0,
   dividerColorImportant: void 0,
@@ -75,68 +76,29 @@ const Me = {
   themeColorImportant: void 0,
   variant: "dense",
   verticalMargin: "none"
-}, ne = /* @__PURE__ */ k((l, a) => {
+}, z = /* @__PURE__ */ v((o, n) => {
   const {
-    dividerColor: n,
-    dividerColorImportant: t,
-    dividerHeight: r,
-    dividerStyle: o,
+    dividerColor: a,
+    dividerColorImportant: r,
+    dividerHeight: t,
+    dividerStyle: l,
     themeColor: c,
-    themeColorImportant: p,
-    variant: d,
-    className: f,
-    verticalMargin: b,
-    ..._
-  } = l, T = t || p, g = r || d, C = n || c, w = D();
-  F(a, () => w.current, []);
-  const R = y("lmnt", "lmnt-divider", T && "lmnt-divider--color-important", g && `lmnt-divider--${g}`, o && `lmnt-divider--${o}`, C && `lmnt-divider--${C}`, b && b !== "none" && `lmnt-divider--margin-${b}`, f);
-  return /* @__PURE__ */ i.createElement("hr", N({
-    ref: w,
-    className: R
-  }, _));
-});
-ne.displayName = "Divider";
-ne.propTypes = Me;
-ne.defaultProps = We;
-const qe = {
-  /**
-   * Content to be rendered inside the component.
-   *
-   * Defaults to **null**.
-   */
-  children: e.node,
-  /**
-   * A reference to the component to apply the ripple to.
-   *
-   * Defaults to **undefined**.
-   */
-  componentRef: e.object,
-  /**
-   * Allows the ripple to extend beyond the component boundaries.
-   *
-   * Defaults to **undefined**.
-   */
-  unbounded: e.bool
-}, je = {
-  children: null,
-  componentRef: void 0,
-  unbounded: void 0
-}, te = /* @__PURE__ */ k((l, a) => {
-  const {
-    componentRef: n,
-    unbounded: t,
-    children: r
-  } = l, o = D();
-  return F(a, () => o.current, []), V(() => {
-    const c = n.current;
-    return c && (o.current = ce.attachTo(n.current), t && (o.current.unbounded = !0)), () => {
-      c && o.current.destroy();
-    };
-  }, [n, t]), r;
+    themeColorImportant: y,
+    variant: i,
+    className: u,
+    verticalMargin: f,
+    ...h
+  } = o, O = r || y, p = t || i, _ = a || c, C = L();
+  w(n, () => C.current, []);
+  const E = m("lmnt", "lmnt-divider", O && "lmnt-divider--color-important", p && `lmnt-divider--${p}`, l && `lmnt-divider--${l}`, _ && `lmnt-divider--${_}`, f && f !== "none" && `lmnt-divider--margin-${f}`, u);
+  return /* @__PURE__ */ d.createElement("hr", b({
+    ref: C,
+    className: E
+  }, h));
 });
-te.displayName = "Ripple";
-te.propTypes = qe;
-te.defaultProps = je;
+z.displayName = "Divider";
+z.propTypes = Ee;
+z.defaultProps = Ie;
 /**
  * @license
  * Copyright 2018 Google Inc.
@@ -159,10 +121,10 @@ te.defaultProps = je;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
-var X = {
+var S = {
   ICON_BUTTON_ON: "mdc-icon-button--on",
   ROOT: "mdc-icon-button"
-}, z = {
+}, T = {
   ARIA_LABEL: "aria-label",
   ARIA_PRESSED: "aria-pressed",
   DATA_ARIA_LABEL_OFF: "data-aria-label-off",
@@ -191,27 +153,27 @@ var X = {
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
-var xe = (
+var fe = (
   /** @class */
-  function(l) {
-    we(a, l);
-    function a(n) {
-      var t = l.call(this, Te(Te({}, a.defaultAdapter), n)) || this;
-      return t.hasToggledAriaLabel = !1, t;
+  function(o) {
+    ge(n, o);
+    function n(a) {
+      var r = o.call(this, me(me({}, n.defaultAdapter), a)) || this;
+      return r.hasToggledAriaLabel = !1, r;
     }
-    return Object.defineProperty(a, "cssClasses", {
+    return Object.defineProperty(n, "cssClasses", {
       get: function() {
-        return X;
+        return S;
       },
       enumerable: !1,
       configurable: !0
-    }), Object.defineProperty(a, "strings", {
+    }), Object.defineProperty(n, "strings", {
       get: function() {
-        return z;
+        return T;
       },
       enumerable: !1,
       configurable: !0
-    }), Object.defineProperty(a, "defaultAdapter", {
+    }), Object.defineProperty(n, "defaultAdapter", {
       get: function() {
         return {
           addClass: function() {
@@ -232,26 +194,26 @@ var xe = (
       },
       enumerable: !1,
       configurable: !0
-    }), a.prototype.init = function() {
-      var n = this.adapter.getAttr(z.DATA_ARIA_LABEL_ON), t = this.adapter.getAttr(z.DATA_ARIA_LABEL_OFF);
-      if (n && t) {
-        if (this.adapter.getAttr(z.ARIA_PRESSED) !== null)
+    }), n.prototype.init = function() {
+      var a = this.adapter.getAttr(T.DATA_ARIA_LABEL_ON), r = this.adapter.getAttr(T.DATA_ARIA_LABEL_OFF);
+      if (a && r) {
+        if (this.adapter.getAttr(T.ARIA_PRESSED) !== null)
           throw new Error("MDCIconButtonToggleFoundation: Button should not set `aria-pressed` if it has a toggled aria label.");
         this.hasToggledAriaLabel = !0;
       } else
-        this.adapter.setAttr(z.ARIA_PRESSED, String(this.isOn()));
-    }, a.prototype.handleClick = function() {
+        this.adapter.setAttr(T.ARIA_PRESSED, String(this.isOn()));
+    }, n.prototype.handleClick = function() {
       this.toggle(), this.adapter.notifyChange({ isOn: this.isOn() });
-    }, a.prototype.isOn = function() {
-      return this.adapter.hasClass(X.ICON_BUTTON_ON);
-    }, a.prototype.toggle = function(n) {
-      if (n === void 0 && (n = !this.isOn()), n ? this.adapter.addClass(X.ICON_BUTTON_ON) : this.adapter.removeClass(X.ICON_BUTTON_ON), this.hasToggledAriaLabel) {
-        var t = n ? this.adapter.getAttr(z.DATA_ARIA_LABEL_ON) : this.adapter.getAttr(z.DATA_ARIA_LABEL_OFF);
-        this.adapter.setAttr(z.ARIA_LABEL, t || "");
+    }, n.prototype.isOn = function() {
+      return this.adapter.hasClass(S.ICON_BUTTON_ON);
+    }, n.prototype.toggle = function(a) {
+      if (a === void 0 && (a = !this.isOn()), a ? this.adapter.addClass(S.ICON_BUTTON_ON) : this.adapter.removeClass(S.ICON_BUTTON_ON), this.hasToggledAriaLabel) {
+        var r = a ? this.adapter.getAttr(T.DATA_ARIA_LABEL_ON) : this.adapter.getAttr(T.DATA_ARIA_LABEL_OFF);
+        this.adapter.setAttr(T.ARIA_LABEL, r || "");
       } else
-        this.adapter.setAttr(z.ARIA_PRESSED, "" + n);
-    }, a;
-  }(Se)
+        this.adapter.setAttr(T.ARIA_PRESSED, "" + a);
+    }, n;
+  }(Ne)
 );
 /**
  * @license
@@ -275,67 +237,67 @@ var xe = (
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
-var He = xe.strings, Ve = (
+var we = fe.strings, Pe = (
   /** @class */
-  function(l) {
-    we(a, l);
-    function a() {
-      var n = l !== null && l.apply(this, arguments) || this;
-      return n.rippleComponent = n.createRipple(), n;
+  function(o) {
+    ge(n, o);
+    function n() {
+      var a = o !== null && o.apply(this, arguments) || this;
+      return a.rippleComponent = a.createRipple(), a;
     }
-    return a.attachTo = function(n) {
-      return new a(n);
-    }, a.prototype.initialSyncWithDOM = function() {
-      var n = this;
+    return n.attachTo = function(a) {
+      return new n(a);
+    }, n.prototype.initialSyncWithDOM = function() {
+      var a = this;
       this.handleClick = function() {
-        n.foundation.handleClick();
+        a.foundation.handleClick();
       }, this.listen("click", this.handleClick);
-    }, a.prototype.destroy = function() {
-      this.unlisten("click", this.handleClick), this.ripple.destroy(), l.prototype.destroy.call(this);
-    }, a.prototype.getDefaultFoundation = function() {
-      var n = this, t = {
-        addClass: function(r) {
-          return n.root.classList.add(r);
+    }, n.prototype.destroy = function() {
+      this.unlisten("click", this.handleClick), this.ripple.destroy(), o.prototype.destroy.call(this);
+    }, n.prototype.getDefaultFoundation = function() {
+      var a = this, r = {
+        addClass: function(t) {
+          return a.root.classList.add(t);
         },
-        hasClass: function(r) {
-          return n.root.classList.contains(r);
+        hasClass: function(t) {
+          return a.root.classList.contains(t);
         },
-        notifyChange: function(r) {
-          n.emit(He.CHANGE_EVENT, r);
+        notifyChange: function(t) {
+          a.emit(we.CHANGE_EVENT, t);
         },
-        removeClass: function(r) {
-          return n.root.classList.remove(r);
+        removeClass: function(t) {
+          return a.root.classList.remove(t);
         },
-        getAttr: function(r) {
-          return n.root.getAttribute(r);
+        getAttr: function(t) {
+          return a.root.getAttribute(t);
         },
-        setAttr: function(r, o) {
-          return n.root.setAttribute(r, o);
+        setAttr: function(t, l) {
+          return a.root.setAttribute(t, l);
         }
       };
-      return new xe(t);
-    }, Object.defineProperty(a.prototype, "ripple", {
+      return new fe(r);
+    }, Object.defineProperty(n.prototype, "ripple", {
       get: function() {
         return this.rippleComponent;
       },
       enumerable: !1,
       configurable: !0
-    }), Object.defineProperty(a.prototype, "on", {
+    }), Object.defineProperty(n.prototype, "on", {
       get: function() {
         return this.foundation.isOn();
       },
-      set: function(n) {
-        this.foundation.toggle(n);
+      set: function(a) {
+        this.foundation.toggle(a);
       },
       enumerable: !1,
       configurable: !0
-    }), a.prototype.createRipple = function() {
-      var n = new ce(this.root);
-      return n.unbounded = !0, n;
-    }, a;
-  }($e)
+    }), n.prototype.createRipple = function() {
+      var a = new ue(this.root);
+      return a.unbounded = !0, a;
+    }, n;
+  }(Ae)
 );
-const Ge = {
+const xe = {
   /**
    * Programmatically sets the toggle state of the button when used as a toggle button. If not set, the toggle state will be managed internally.
    *
@@ -385,7 +347,7 @@ const Ge = {
    *
    * Defaults to **undefined**.
    */
-  dense: A(e.bool, "IconButton", 'Use iconSize="small" instead.'),
+  dense: x(e.bool, "IconButton", 'Use iconSize="small" instead.'),
   /**
    * Disables the icon button.
    *
@@ -427,7 +389,7 @@ const Ge = {
    *
    * Defaults to **null**.
    */
-  tag: e.oneOfType([e.string, e.elementType, e.instanceOf(i.Component)]),
+  tag: e.oneOfType([e.string, e.elementType, e.instanceOf(d.Component)]),
   /**
    * The content to be rendered when the `IconButton` is toggled off. Expects an `Icon` component. The typical use case for a toggle button would be to set an Icon for `toggleOn` and `toggleOff`, leaving children blank.
    *
@@ -469,8 +431,8 @@ const Ge = {
    *
    * Defaults to **empty string**.
    */
-  variant: Z(e.oneOf(["", "filled-danger-alt", "filled-danger", "filled-primary", "filled-secondary", "color-primary", "color-secondary", "color-on-dark", "color-on-unknown-black", "secondary-on-surface"]), ["primary-alt", "secondary-alt", "primary", "danger-alt", "danger"], "IconButton", "Please use one of '','filled-danger-alt','filled-danger','filled-primary','filled-secondary','color-primary','color-secondary','color-on-dark','color-on-unknown-black','secondary-on-surface'.")
-}, Je = {
+  variant: K(e.oneOf(["", "filled-danger-alt", "filled-danger", "filled-primary", "filled-secondary", "color-primary", "color-secondary", "color-on-dark", "color-on-unknown-black", "secondary-on-surface"]), ["primary-alt", "secondary-alt", "primary", "danger-alt", "danger"], "IconButton", "Please use one of '','filled-danger-alt','filled-danger','filled-primary','filled-secondary','color-primary','color-secondary','color-on-dark','color-on-unknown-black','secondary-on-surface'.")
+}, Re = {
   active: !1,
   ariaLabel: null,
   ariaLabelledBy: null,
@@ -492,385 +454,87 @@ const Ge = {
   toggleOnAriaLabel: null,
   toggleOnAriaLabelledBy: null,
   variant: ""
-}, ae = /* @__PURE__ */ k((l, a) => {
+}, F = /* @__PURE__ */ v((o, n) => {
   const {
-    active: n,
-    ariaLabel: t,
-    ariaLabelledBy: r,
-    badge: o,
+    active: a,
+    ariaLabel: r,
+    ariaLabelledBy: t,
+    badge: l,
     badgePlacement: c,
-    children: p,
-    className: d,
-    dense: f,
-    disabled: b,
-    icon: _,
-    iconSize: T,
-    iconType: g,
-    onClick: C,
-    noHover: w,
-    tabIndex: R,
+    children: y,
+    className: i,
+    dense: u,
+    disabled: f,
+    icon: h,
+    iconSize: O,
+    iconType: p,
+    onClick: _,
+    noHover: C,
+    tabIndex: E,
     tag: q,
-    toggleOff: I,
-    toggleOffAriaLabel: j,
-    toggleOffAriaLabelledBy: H,
-    toggleOn: G,
-    toggleOnAriaLabel: h,
-    toggleOnAriaLabelledBy: P,
-    variant: m,
-    ...v
-  } = l, B = D(), W = D(), U = D(), $ = G && I;
-  let S = T;
-  S === "medium" && f && (S = "small"), o && (S === "small" || S === "xsmall") && (S = "medium"), F(a, () => B.current, []);
-  const x = y("lmnt", "lmnt-icon-button", "mdc-icon-button", w && "lmnt-icon-button__no-hover", (m === "primary" || m === "primary-alt" || m === "secondary" || m === "danger" || m === "danger-alt" || m === "filled-primary" || m === "filled-primary-alt" || m === "filled-secondary" || m === "filled-danger" || m === "filled-danger-alt") && "lmnt-icon-button--fill", (m === "danger-alt" || m === "filled-danger-alt") && "lmnt-icon-button--fill-danger-alt", (m === "danger" || m === "filled-danger") && "lmnt-icon-button--fill-danger", (m === "primary" || m === "filled-primary") && "lmnt-icon-button--fill-primary", (m === "primary-alt" || m === "filled-secondary") && "lmnt-icon-button--fill-secondary", (m === "secondary-alt" || m === "color-on-dark") && "lmnt-icon-button--color-on-dark", m === "color-primary" && "lmnt-icon-button--color-primary", m === "color-secondary" && "lmnt-icon-button--color-secondary", m === "color-on-unknown-black" && "lmnt-icon-button--on-unknown-black", m === "secondary-on-surface" && "lmnt-icon-button--secondary-on-surface", S && `lmnt-icon-button--${S}`, d);
-  V(() => ($ ? U.current = Ve.attachTo(B.current) : (W.current = ce.attachTo(B.current), W.current.unbounded = !0), () => {
-    $ ? U.current.destroy() : W.current.destroy();
-  }), [U, $, W]), V(() => {
-    $ && (U.current.on = n);
-  }, [n, $, U]);
-  const J = (s) => {
-    C && C($ ? U.current.on : s);
-  }, E = q || "button";
-  return /* @__PURE__ */ i.createElement(E, N({
-    "aria-label": t,
-    "aria-labelledby": r,
-    "data-aria-label-on": h || P || t,
-    "data-aria-label-off": j || H || t,
-    onClick: J,
-    ref: B,
-    className: x,
-    disabled: b,
-    tabIndex: R
-  }, v), _ && /* @__PURE__ */ i.createElement(Y, {
-    badge: o,
+    toggleOff: ce,
+    toggleOffAriaLabel: H,
+    toggleOffAriaLabelledBy: j,
+    toggleOn: se,
+    toggleOnAriaLabel: W,
+    toggleOnAriaLabelledBy: V,
+    variant: s,
+    ...ve
+  } = o, R = L(), $ = L(), P = L(), k = se && ce;
+  let B = O;
+  B === "medium" && u && (B = "small"), l && (B === "small" || B === "xsmall") && (B = "medium"), w(n, () => R.current, []);
+  const _e = m("lmnt", "lmnt-icon-button", "mdc-icon-button", C && "lmnt-icon-button__no-hover", (s === "primary" || s === "primary-alt" || s === "secondary" || s === "danger" || s === "danger-alt" || s === "filled-primary" || s === "filled-primary-alt" || s === "filled-secondary" || s === "filled-danger" || s === "filled-danger-alt") && "lmnt-icon-button--fill", (s === "danger-alt" || s === "filled-danger-alt") && "lmnt-icon-button--fill-danger-alt", (s === "danger" || s === "filled-danger") && "lmnt-icon-button--fill-danger", (s === "primary" || s === "filled-primary") && "lmnt-icon-button--fill-primary", (s === "primary-alt" || s === "filled-secondary") && "lmnt-icon-button--fill-secondary", (s === "secondary-alt" || s === "color-on-dark") && "lmnt-icon-button--color-on-dark", s === "color-primary" && "lmnt-icon-button--color-primary", s === "color-secondary" && "lmnt-icon-button--color-secondary", s === "color-on-unknown-black" && "lmnt-icon-button--on-unknown-black", s === "secondary-on-surface" && "lmnt-icon-button--secondary-on-surface", B && `lmnt-icon-button--${B}`, i);
+  D(() => (k ? P.current = Pe.attachTo(R.current) : ($.current = ue.attachTo(R.current), $.current.unbounded = !0), () => {
+    k ? P.current.destroy() : $.current.destroy();
+  }), [P, k, $]), D(() => {
+    k && (P.current.on = a);
+  }, [a, k, P]);
+  const Oe = (g) => {
+    _ && _(k ? P.current.on : g);
+  }, Ce = q || "button";
+  return /* @__PURE__ */ d.createElement(Ce, b({
+    "aria-label": r,
+    "aria-labelledby": t,
+    "data-aria-label-on": W || V || r,
+    "data-aria-label-off": H || j || r,
+    onClick: Oe,
+    ref: R,
+    className: _e,
+    disabled: f,
+    tabIndex: E
+  }, ve), h && /* @__PURE__ */ d.createElement(pe, {
+    badge: l,
     badgePlacement: c,
-    icon: _,
-    iconSize: S,
-    iconType: g
-  }), p && ie(p, (s) => {
-    var O, u;
+    icon: h,
+    iconSize: B,
+    iconType: p
+  }), y && G(y, (g) => {
+    var A, N;
     return {
-      className: y("mdc-icon-button__icon", s == null || (O = s.props) === null || O === void 0 ? void 0 : O.className),
-      "aria-hidden": (s == null || (u = s.props) === null || u === void 0 ? void 0 : u["aria-hidden"]) || t || r
+      className: m("mdc-icon-button__icon", g == null || (A = g.props) === null || A === void 0 ? void 0 : A.className),
+      "aria-hidden": (g == null || (N = g.props) === null || N === void 0 ? void 0 : N["aria-hidden"]) || r || t
     };
-  }), $ && n && ie(G, (s) => {
-    var O, u, L;
+  }), k && a && G(se, (g) => {
+    var A, N, I;
     return {
-      className: y("mdc-icon-button__icon", s == null || (O = s.props) === null || O === void 0 ? void 0 : O.className),
-      "aria-label": (s == null || (u = s.props) === null || u === void 0 ? void 0 : u["aria-label"]) || h || P || t,
-      "aria-hidden": (s == null || (L = s.props) === null || L === void 0 ? void 0 : L["aria-hidden"]) || h || P || t
+      className: m("mdc-icon-button__icon", g == null || (A = g.props) === null || A === void 0 ? void 0 : A.className),
+      "aria-label": (g == null || (N = g.props) === null || N === void 0 ? void 0 : N["aria-label"]) || W || V || r,
+      "aria-hidden": (g == null || (I = g.props) === null || I === void 0 ? void 0 : I["aria-hidden"]) || W || V || r
     };
-  }), $ && !n && ie(I, (s) => {
-    var O, u, L;
+  }), k && !a && G(ce, (g) => {
+    var A, N, I;
     return {
-      className: y("mdc-icon-button__icon", s == null || (O = s.props) === null || O === void 0 ? void 0 : O.className),
-      "aria-label": (s == null || (u = s.props) === null || u === void 0 ? void 0 : u["aria-label"]) || j || H || t,
-      "aria-hidden": (s == null || (L = s.props) === null || L === void 0 ? void 0 : L["aria-hidden"]) || j || H || t
+      className: m("mdc-icon-button__icon", g == null || (A = g.props) === null || A === void 0 ? void 0 : A.className),
+      "aria-label": (g == null || (N = g.props) === null || N === void 0 ? void 0 : N["aria-label"]) || H || j || r,
+      "aria-hidden": (g == null || (I = g.props) === null || I === void 0 ? void 0 : I["aria-hidden"]) || H || j || r
     };
   }));
 });
-ae.displayName = "IconButton";
-ae.propTypes = Ge;
-ae.defaultProps = Je;
-const Ke = {
-  /**
-   * @deprecated _Use `themeColor='secondary'` instead._
-   *
-   * Preview feature, this may change. Apply alternative button color scheme (defined by the individual theme).
-   *
-   * Defaults to **undefined**.
-   */
-  altColor: A(e.bool, "Button", 'Use `themeColor="secondary"` instead.'),
-  /**
-   * One of 'xsmall', 'small', 'medium', 'large' and 'xlarge' will change the size of the button. Defaults according to your theme.
-   *
-   * Defaults to **'themeDefault'**.
-   */
-  buttonSize: e.oneOf(["xsmall", "small", "medium", "large", "xlarge", "themeDefault"]),
-  /**
-   * Content to be rendered inside the button. Can be used instead `label` of to provide more flexibility. Accepts any valid markup. _Warning, if Label is set, it will be used instead of child content._
-   *
-   * Defaults to **null**.
-   */
-  children: e.node,
-  /**
-   * The css class name to be passed through to the component markup.
-   *
-   * Defaults to **undefined**.
-   */
-  className: e.string,
-  /**
-   * @deprecated _forwardRef has been implemented for Button._
-   *
-   * Reference to the DOM button. This enables a greater level of integration.
-   *
-   * Defaults to **undefined**.
-   */
-  customRef: A(e.oneOfType([
-    e.func,
-    // eslint-disable-next-line react/forbid-prop-types
-    e.shape({
-      current: e.any
-    })
-  ]), "Button", "forwardRef has been implemented for Button."),
-  /**
-   * @deprecated _Use `variant='danger'` instead._
-   *
-   * Apply danger style to the button.
-   *
-   * Defaults to **undefined**.
-   */
-  danger: A(e.bool, "Button", 'Use `variant="danger"` instead.'),
-  /**
-   * Prevent the user from interacting with the component.
-   *
-   * Defaults to **false**.
-   */
-  disabled: e.bool,
-  /**
-   * Sets elevation of the button. Default will be the theme default.
-   *
-   * Defaults to **'default'**.
-   */
-  elevation: e.oneOf(["default", "elevated", "flat"]),
-  /**
-   * @deprecated _Use `variant='filled'` instead._
-   *
-   * Apply a filled-in style. Previously called `primary`.
-   *
-   * Defaults to **undefined**.
-   */
-  filled: A(e.bool, "Button", 'Use `variant="filled"` instead.'),
-  /**
-   * Applies a full-width style where the textfield will fill it's container.
-   *
-   * Defaults to **false**.
-   */
-  fullWidth: e.bool,
-  /**
-   * The button will render as an anchor tag. If the tag prop is set, that prop will take precedence.
-   *
-   * Defaults to **null**.
-   */
-  href: e.string,
-  /**
-   * The displayed text. Expects a valid string. If label and children are both set, label will take priority.
-   *
-   * Defaults to **null**.
-   */
-  label: e.string,
-  /**
-   * Adds the given Icon to the left of the button text. May not be used with `trailingIcon` - if `leadingIcon` and `trailingIcon` are both set, `leadingIcon` will take priority. Expects the name of a valid Material.io icon, however an icon component may be passed in instead for more control,
-   *
-   * Defaults to **undefined**.
-   */
-  leadingIcon: e.oneOfType([e.string, e.func, e.node]),
-  /**
-   * The primary interaction event for button.
-   *
-   * Defaults to **null**.
-   */
-  onClick: e.func,
-  /**
-   * @deprecated _Use `variant='outlined'`._
-   *
-   * Apply outlined style to the button. Previously called `secondary`.
-   *
-   * Defaults to **undefined**.
-   */
-  outlined: A(e.bool, "Button", 'Use `variant="outlined"`.'),
-  /**
-   * @deprecated _Use `variant='filled'` instead._
-   *
-   * Apply primary style to the Button.
-   *
-   * Defaults to **undefined**.
-   */
-  primary: A(e.bool, "Button", 'Use `variant="filled"` instead.'),
-  /**
-   * @deprecated _Use `'variant=outlined'` instead._
-   *
-   * Apply secondary style to the Button.
-   *
-   * Defaults to **undefined**.
-   */
-  secondary: A(e.bool, "Button", 'Use `"variant=outlined"` instead.'),
-  /**
-   * By default a button or anchor tag will be rendered, this allows another tag/component to be used instead. A block type element/component is suggested.
-   *
-   * Defaults to **null**.
-   */
-  tag: e.oneOfType([e.string, e.elementType, e.instanceOf(i.Component)]),
-  /**
-   * @deprecated _Use `variant='embedded'` instead._
-   *
-   * Apply tertiary style to the Button.
-   *
-   * Defaults to **undefined**.
-   */
-  tertiary: A(e.bool, "Button", 'Use `variant="embedded"` instead.'),
-  /**
-   * @deprecated _Use `variant='text'` instead._
-   *
-   * Apply unfilled, un-outlined style to the Button. Previously called `tertiary`.
-   *
-   * Defaults to **undefined**.
-   */
-  text: A(e.bool, "Button", 'Use `variant="text"` instead.'),
-  /**
-   * Sets the theme color for the button. Most commonly used when the control is placed on a darker surface.
-   *
-   * Defaults to **'primary'**.
-   */
-  themeColor: Z(e.oneOf(["primary", "secondary", "danger", "success", "on-unknown-black", "on-unknown-white", "on-primary", "on-secondary", "on-success", "on-danger"]), ["onUnknownBlack", "onUnknownWhite"], "Button", "Please use one of 'primary','secondary','danger','success','on-unknown-black','on-unknown-white','on-primary','on-secondary','on-success','on-danger'."),
-  /**
-   * Adds the given Icon to the right of the button text. May not be used with `leadingIcon` - if `leadingIcon` and `trailingIcon` are both set, `leadingIcon` will take priority. Expects the name of a valid Material.io icon, however an icon component may be passed in instead for more control.
-   *
-   * Defaults to **undefined**.
-   */
-  trailingIcon: e.oneOfType([e.string, e.func, e.node]),
-  /**
-   * This applies the html button type (button, submit, reset) or the anchor media type when used with the href property.
-   *
-   * Defaults to **'button'**.
-   */
-  type: e.oneOf(["button", "submit", "reset"]),
-  /**
-   * @deprecated _Use `elevation='flat' instead._
-   *
-   * Remove elevation.
-   *
-   * Defaults to **undefined**.
-   */
-  unelevated: A(e.bool, "Button", 'Use `elevation="flat" instead.'),
-  /**
-   * Applies the selected style to the button. `rounded-small` and `rounded-micro` are only available on select themes.
-   *
-   * Defaults to **'filled'**.
-   */
-  variant: e.oneOf(["filled", "outlined", "danger", "text", "success", "rounded-small", "rounded-micro"])
-}, Qe = {
-  altColor: void 0,
-  buttonSize: "themeDefault",
-  children: null,
-  className: void 0,
-  customRef: void 0,
-  danger: void 0,
-  disabled: !1,
-  elevation: "default",
-  filled: void 0,
-  fullWidth: !1,
-  href: null,
-  label: null,
-  leadingIcon: void 0,
-  outlined: void 0,
-  primary: void 0,
-  secondary: void 0,
-  tag: null,
-  tertiary: void 0,
-  text: void 0,
-  themeColor: "primary",
-  trailingIcon: void 0,
-  type: "button",
-  unelevated: void 0,
-  variant: "filled"
-}, Xe = {
-  /**
-   * Children to be rendered. Expects multiple Element Buttons
-   *
-   * Defaults to **null**.
-   */
-  children: e.node,
-  /**
-   * How much spacing between buttons. Dense is 8p, standard is 16px and airy is 24px.
-   *
-   * Defaults to **'standard'**.
-   */
-  variant: e.oneOf(["dense", "standard", "airy"])
-}, Ye = {
-  children: null,
-  variant: "standard"
-}, re = /* @__PURE__ */ k((l, a) => {
-  const {
-    altColor: n,
-    buttonSize: t,
-    children: r,
-    className: o,
-    customRef: c,
-    disabled: p,
-    elevation: d,
-    primary: f,
-    secondary: b,
-    tertiary: _,
-    text: T,
-    danger: g,
-    filled: C,
-    fullWidth: w,
-    href: R,
-    label: q,
-    leadingIcon: I,
-    onClick: j,
-    outlined: H,
-    tag: G,
-    themeColor: h,
-    trailingIcon: P,
-    type: m,
-    unelevated: v,
-    variant: B,
-    ...W
-  } = l, U = D(c || null);
-  F(a, () => U.current, []);
-  const $ = q || r, S = G || (R ? "a" : "button"), x = B === "outlined" || H || b, J = B === "rounded-small" || B === "rounded-micro", E = B === "text" || T || _, s = B === "danger" || g || h === "danger", O = B === "success" || h === "success", u = !x && !E && (B === "filled" || C || f), L = n || h === "secondary", M = h === "primary", Pe = P && !I, K = h === "onUnknownBlack" || h === "on-unknown-black", Q = h === "onUnknownWhite" || h === "on-unknown-white", le = h === "onPrimary" || h === "on-primary", Ce = h === "onSecondary" || h === "on-secondary", Re = Le(() => typeof I == "string" ? /* @__PURE__ */ i.createElement(Y, {
-    tabIndex: 0,
-    role: "button",
-    className: "mdc-button__icon lmnt-button__icon--leading",
-    icon: I
-  }) : typeof I == "function" ? I({
-    className: "mdc-button__icon lmnt-button__icon--leading"
-  }) : Ae(I, "mdc-button__icon lmnt-button__icon--leading"), [I]), Ue = Le(() => typeof P == "string" ? /* @__PURE__ */ i.createElement(Y, {
-    tabIndex: 0,
-    role: "button",
-    className: "mdc-button__icon lmnt-button__icon--trailing",
-    icon: P
-  }) : typeof P == "function" ? P({
-    className: "mdc-button__icon lmnt-button__icon--trailing"
-  }) : Ae(P, "mdc-button__icon lmnt-button__icon--trailing"), [P]);
-  return /* @__PURE__ */ i.createElement(te, {
-    componentRef: U
-  }, /* @__PURE__ */ i.createElement(S, N({
-    ref: U,
-    href: R,
-    onClick: j,
-    type: m,
-    disabled: p,
-    className: y("lmnt", "mdc-button", "lmnt-button", "mdc-button--touch", u && v && M && "lmnt-button--filled-primary", u && s && "lmnt-button--filled-danger", u && O && "lmnt-button--filled-success", u && v && L && "lmnt-button--filled-secondary", u && !v && M && ["lmnt-button--filled-primary", "mdc-button--raised"], u && !v && L && ["lmnt-button--filled-secondary", "mdc-button--raised"], u && !v && h === "on-primary" && ["lmnt-button--filled-on-primary", "mdc-button--raised"], u && !v && h === "on-secondary" && ["lmnt-button--filled-on-secondary", "mdc-button--raised"], u && !v && h === "on-success" && ["lmnt-button--filled-on-success", "mdc-button--raised"], u && !v && h === "on-danger" && ["lmnt-button--filled-on-danger", "mdc-button--raised"], u && !v && K && ["lmnt-button--filled-on-unknown-black", "mdc-button--raised"], u && !v && Q && ["lmnt-button--filled-on-unknown-white", "mdc-button--raised"], x && M && ["lmnt-button--outlined-primary", "mdc-button--outlined"], u && !v && le && ["lmnt-button--filled-on-primary", "mdc-button--raised"], x && L && ["lmnt-button--outlined-secondary", "mdc-button--outlined"], x && le && "lmnt-button--outlined-on-primary mdc-button--outlined", x && Ce && "lmnt-button--outlined-on-secondary mdc-button--outlined", x && Q && "lmnt-button--outlined-on-unknown-white mdc-button--outlined", x && K && "lmnt-button--outlined-on-unknown-black mdc-button--outlined", E && le && "lmnt-button--text-on-primary mdc-button__text", E && Ce && "lmnt-button--text-on-secondary mdc-button__text", E && Q && "lmnt-button--text-on-unknown-white mdc-button__text", E && K && "lmnt-button--text-on-unknown-black mdc-button__text", J && Q && "lmnt-button--text-on-unknown-white mdc-button__text", J && K && "lmnt-button--text-on-unknown-black mdc-button__text", E && M && "lmnt-button--text-primary", E && L && "lmnt-button--text-secondary", E && s && "lmnt-button--text-danger", E && O && "lmnt-button--text-success", s && v && L && "lmnt-button--danger-secondary", s && !v && L && ["lmnt-button--danger-secondary", "mdc-button--raised"], s && v && M && "lmnt-button--danger-primary", s && !v && M && ["lmnt-button--danger-primary", "mdc-button--raised"], s && x && ["lmnt-button--danger-primary", "mdc-button--outlined"], O && v && M && "lmnt-button--success-primary", O && !v && M && ["lmnt-button--success-primary", "mdc-button--raised"], O && x && ["lmnt-button--success-primary", "mdc-button--outlined"], O && x && ["lmnt-button--success-primary", "mdc-button--outlined"], w && "lmnt-button--full-width", v && !E && "mdc-button--unelevated", d === "flat" && "lmnt-button--flat", d === "elevated" && "lmnt-button--elevated", `lmnt-button--${t}`, B === "rounded-small" && "lmnt-button--rounded lmnt-button--rounded-small mdc-button__text lmnt-button--text-primary", B === "rounded-micro" && "lmnt-button--rounded lmnt-button--rounded-micro mdc-button__text lmnt-button--text-primary", o, "mdc-touch-target-wrapper")
-  }, W), /* @__PURE__ */ i.createElement("span", {
-    className: "mdc-button__ripple"
-  }), I && Re(), /* @__PURE__ */ i.createElement("span", {
-    className: "mdc-button__label"
-  }, $), Pe && Ue(), /* @__PURE__ */ i.createElement("span", {
-    className: "mdc-button__touch"
-  })));
-});
-re.displayName = "Button";
-re.propTypes = Ke;
-re.defaultProps = Qe;
-const se = /* @__PURE__ */ k((l, a) => {
-  const {
-    children: n,
-    className: t,
-    variant: r,
-    ...o
-  } = l;
-  return /* @__PURE__ */ i.createElement("div", N({
-    ref: a,
-    className: y("lmnt", "lmnt-button-group", r === "dense" && "lmnt-button-group--dense", r === "standard" && "lmnt-button-group--standard", r === "airy" && "lmnt-button-group--airy", t)
-  }, o), n);
-});
-se.displayName = "ButtonGroup";
-se.propTypes = Xe;
-se.defaultProps = Ye;
-var Ze = function() {
-}, Ee = typeof window < "u", en = Ee ? ze : V, Ie = {
+F.displayName = "IconButton";
+F.propTypes = xe;
+F.defaultProps = Re;
+var $e = function() {
+}, he = typeof window < "u", Se = he ? ke : D, be = {
   x: 0,
   y: 0,
   width: 0,
@@ -880,25 +544,25 @@ var Ze = function() {
   bottom: 0,
   right: 0
 };
-function nn() {
-  var l = de(null), a = l[0], n = l[1], t = de(Ie), r = t[0], o = t[1], c = ee(function() {
-    return new window.ResizeObserver(function(p) {
-      if (p[0]) {
-        var d = p[0].contentRect, f = d.x, b = d.y, _ = d.width, T = d.height, g = d.top, C = d.left, w = d.bottom, R = d.right;
-        o({ x: f, y: b, width: _, height: T, top: g, left: C, bottom: w, right: R });
+function De() {
+  var o = J(null), n = o[0], a = o[1], r = J(be), t = r[0], l = r[1], c = U(function() {
+    return new window.ResizeObserver(function(y) {
+      if (y[0]) {
+        var i = y[0].contentRect, u = i.x, f = i.y, h = i.width, O = i.height, p = i.top, _ = i.left, C = i.bottom, E = i.right;
+        l({ x: u, y: f, width: h, height: O, top: p, left: _, bottom: C, right: E });
       }
     });
   }, []);
-  return en(function() {
-    if (a)
-      return c.observe(a), function() {
+  return Se(function() {
+    if (n)
+      return c.observe(n), function() {
         c.disconnect();
       };
-  }, [a]), [n, r];
+  }, [n]), [a, t];
 }
-const tn = Ee && typeof window.ResizeObserver < "u" ? nn : function() {
-  return [Ze, Ie];
-}, an = {
+const Ue = he && typeof window.ResizeObserver < "u" ? De : function() {
+  return [$e, be];
+}, ze = {
   /**
    * Alignment of the Card Body.
    *
@@ -941,7 +605,7 @@ const tn = Ee && typeof window.ResizeObserver < "u" ? nn : function() {
    * Defaults to **'default'**.
    */
   variant: e.oneOf(["default", "flat", "outlined", "raised"])
-}, rn = {
+}, Fe = {
   bodyAlignment: "left-top",
   children: null,
   height: "auto",
@@ -949,7 +613,7 @@ const tn = Ee && typeof window.ResizeObserver < "u" ? nn : function() {
   style: null,
   themeColor: "surface",
   variant: "default"
-}, on = {
+}, Me = {
   /**
    * Override the default (`primary`) color with the `secondary` color. Most commonly used when the control is placed on a darker surface.
    *
@@ -1028,7 +692,7 @@ const tn = Ee && typeof window.ResizeObserver < "u" ? nn : function() {
    * Defaults to **'button'**.
    */
   type: e.oneOf(["button", "submit", "reset"])
-}, ln = {
+}, qe = {
   actionButtonThemeColor: "primary",
   children: null,
   className: void 0,
@@ -1040,7 +704,7 @@ const tn = Ee && typeof window.ResizeObserver < "u" ? nn : function() {
   leadingIcon: null,
   trailingIcon: null,
   type: "button"
-}, dn = {
+}, He = {
   /**
    * Programmatically sets the toggle state of the button when used as a toggle button. If not set, the toggle state will be managed internally.
    *
@@ -1124,8 +788,8 @@ const tn = Ee && typeof window.ResizeObserver < "u" ? nn : function() {
    *
    * Defaults to **empty string**.
    */
-  variant: Z(e.oneOf(["", "filled-danger-alt", "filled-danger", "filled-primary", "filled-secondary", "color-primary", "color-secondary", "color-on-dark"]), ["primary-alt", "secondary-alt", "primary", "danger-alt", "danger"], "CardActionIcon", "Please use one of '','filled-danger-alt','filled-danger','filled-primary','filled-secondary','color-primary','color-secondary','color-on-dark'.")
-}, cn = {
+  variant: K(e.oneOf(["", "filled-danger-alt", "filled-danger", "filled-primary", "filled-secondary", "color-primary", "color-secondary", "color-on-dark"]), ["primary-alt", "secondary-alt", "primary", "danger-alt", "danger"], "CardActionIcon", "Please use one of '','filled-danger-alt','filled-danger','filled-primary','filled-secondary','color-primary','color-secondary','color-on-dark'.")
+}, je = {
   active: !1,
   ariaLabel: null,
   ariaLabelledBy: null,
@@ -1139,7 +803,7 @@ const tn = Ee && typeof window.ResizeObserver < "u" ? nn : function() {
   toggleOnAriaLabel: null,
   toggleOnAriaLabelledBy: null,
   variant: ""
-}, sn = {
+}, We = {
   /**
    * Add buttons to card actions.
    *
@@ -1158,11 +822,11 @@ const tn = Ee && typeof window.ResizeObserver < "u" ? nn : function() {
    * Defaults to **'leading'**.
    */
   alignment: e.oneOf(["leading", "center", "trailing"])
-}, mn = {
+}, Ve = {
   actionButtons: null,
   actionIcons: null,
   alignment: "leading"
-}, un = {
+}, Ge = {
   /**
    * Content to be rendered inside the title block. Accepts any valid markup.
    *
@@ -1180,21 +844,21 @@ const tn = Ee && typeof window.ResizeObserver < "u" ? nn : function() {
    *
    * Defaults to **'body2'**.
    */
-  typographyType: Z(e.oneOf(["body1", "body2", "button", "caption", "display1", "display2", "display3", "display4", "display5", "display6", "overline", "subtitle1", "subtitle2"]), ["headline1", "headline2", "headline3", "headline4", "headline5", "headline6"], "CardBody", "Please use one of 'body1','body2','button','caption','display1','display2','display3','display4','display5','display6','overline','subtitle1','subtitle2'.")
-}, yn = {
+  typographyType: K(e.oneOf(["body1", "body2", "button", "caption", "display1", "display2", "display3", "display4", "display5", "display6", "overline", "subtitle1", "subtitle2"]), ["headline1", "headline2", "headline3", "headline4", "headline5", "headline6"], "CardBody", "Please use one of 'body1','body2','button','caption','display1','display2','display3','display4','display5','display6','overline','subtitle1','subtitle2'.")
+}, Je = {
   children: null,
   themeColor: "surface",
   typographyType: "body2"
-}, pn = {
+}, Ke = {
   /**
    * Content to be rendered inside the content block. Accepts any valid markup.
    *
    * Defaults to **null**.
    */
   children: e.node
-}, gn = {
+}, Qe = {
   children: null
-}, fn = {
+}, Xe = {
   /**
    * Theme color for the Card Divider. Leave empty for gray.
    *
@@ -1207,10 +871,10 @@ const tn = Ee && typeof window.ResizeObserver < "u" ? nn : function() {
    * Defaults to **'dense'**.
    */
   dividerVariant: e.oneOf(["dense", "tall"])
-}, bn = {
+}, Ye = {
   dividerThemeColor: "on-surface-stroke",
   dividerVariant: "dense"
-}, hn = {
+}, Ze = {
   /**
    * Content to be rendered inside the title block. Mostly commonly a Select, Textfield component, however any valid components or markup may be used.
    *
@@ -1229,11 +893,11 @@ const tn = Ee && typeof window.ResizeObserver < "u" ? nn : function() {
    * Defaults to **'tabs'**.
    */
   filterType: e.oneOf(["tabs", "chips", "select", "select-2"])
-}, vn = {
+}, ea = {
   children: null,
   className: void 0,
   filterType: "tabs"
-}, _n = {
+}, aa = {
   /**
    * Most commonly text or a Typography component, but accepts any valid markup.
    *
@@ -1252,11 +916,11 @@ const tn = Ee && typeof window.ResizeObserver < "u" ? nn : function() {
    * Defaults to **false**.
    */
   rtl: e.bool
-}, kn = {
+}, ra = {
   children: null,
   className: void 0,
   rtl: !1
-}, On = {
+}, na = {
   /**
    * Url for Card media
    *
@@ -1275,11 +939,11 @@ const tn = Ee && typeof window.ResizeObserver < "u" ? nn : function() {
    * Defaults to **'30%'**.
    */
   width: e.oneOfType([e.number, e.string])
-}, Nn = {
+}, ta = {
   mediaUrl: null,
   ratio: "square",
   width: "30%"
-}, Cn = {
+}, la = {
   /**
    * Child components will be rendered on top of the provided image. Use `contentBottom` and `contentTop` to control content positioning. Accepts any valid markup.
    *
@@ -1316,14 +980,14 @@ const tn = Ee && typeof window.ResizeObserver < "u" ? nn : function() {
    * Defaults to **'square'**.
    */
   ratio: e.oneOf(["square", "sixteen-nine", "four-three", "four-five", "two-one"])
-}, Tn = {
+}, oa = {
   children: null,
   contentPlacement: "bottom",
   imageUrl: null,
   overlay: !1,
   overlayThemeColor: "dark",
   ratio: "square"
-}, An = {
+}, ia = {
   /**
    * Content to be rendered inside the Card Overlay.  Useful for angles or other non semantic elements displayed in the Card.
    *
@@ -1348,12 +1012,12 @@ const tn = Ee && typeof window.ResizeObserver < "u" ? nn : function() {
    * Defaults to **'full'**.
    */
   position: e.oneOf(["full", "leading", "trailing"])
-}, Bn = {
+}, da = {
   children: null,
   className: void 0,
   overlayThemeColor: "dark",
   position: "full"
-}, Ln = {
+}, ca = {
   /**
    * Content to be rendered as the primary action.
    *
@@ -1371,11 +1035,11 @@ const tn = Ee && typeof window.ResizeObserver < "u" ? nn : function() {
    *
    * Defaults to **'div'**.
    */
-  tag: e.oneOfType([e.string, e.elementType, e.instanceOf(i.Component)])
-}, wn = {
+  tag: e.oneOfType([e.string, e.elementType, e.instanceOf(d.Component)])
+}, sa = {
   children: null,
   tag: "div"
-}, xn = {
+}, ma = {
   /**
    * The css class name to be passed through to the component markup.
    *
@@ -1387,7 +1051,7 @@ const tn = Ee && typeof window.ResizeObserver < "u" ? nn : function() {
    *
    * Defaults to **null**.
    */
-  leadingBlock: Be(e.node, "CardTitle", "leadingBlockType"),
+  leadingBlock: ye(e.node, "CardTitle", "leadingBlockType"),
   /**
    * The type of media that will render in the leading block. See README for size constraints.
    *
@@ -1441,14 +1105,14 @@ const tn = Ee && typeof window.ResizeObserver < "u" ? nn : function() {
    *
    * Defaults to **null**.
    */
-  trailingBlock: Be(e.node, "CardTitle", "trailingBlockType"),
+  trailingBlock: ye(e.node, "CardTitle", "trailingBlockType"),
   /**
    * The type of media that will render in the trailing block. See README for size constraints.
    *
    * Defaults to **empty string**.
    */
   trailingBlockType: e.oneOf(["", "title-actions", "avatar", "badge", "icon", "icon-with-background", "thumbnail"])
-}, En = {
+}, ya = {
   className: void 0,
   leadingBlock: null,
   leadingBlockType: "",
@@ -1461,346 +1125,344 @@ const tn = Ee && typeof window.ResizeObserver < "u" ? nn : function() {
   themeColor: "surface",
   trailingBlock: null,
   trailingBlockType: ""
-}, me = /* @__PURE__ */ k((l, a) => {
+}, Q = /* @__PURE__ */ v((o, n) => {
   const {
-    bodyAlignment: n,
-    children: t,
-    className: r,
-    direction: o,
+    bodyAlignment: a,
+    children: r,
+    className: t,
+    direction: l,
     height: c,
-    loadingCard: p,
-    outlined: d,
-    style: f,
-    themeColor: b,
-    variant: _,
-    ...T
-  } = l, [g, C] = de({
+    loadingCard: y,
+    outlined: i,
+    style: u,
+    themeColor: f,
+    variant: h,
+    ...O
+  } = o, [p, _] = J({
     height: c,
-    direction: o,
-    ...f
-  }), w = D();
-  return F(a, () => w.current, []), V(() => {
-    C({
+    direction: l,
+    ...u
+  }), C = L();
+  return w(n, () => C.current, []), D(() => {
+    _({
       height: c,
       // display: 'flex', do we need this?
-      direction: o,
-      ...f
+      direction: l,
+      ...u
     });
-  }, [c, o, f]), /* @__PURE__ */ i.createElement("div", N({
-    ref: w,
-    className: y("lmnt", "lmnt-card", "mdc-card", _ === "outlined" && "mdc-card--outlined", _ === "flat" && "lmnt-card--flat", _ === "raised" && "lmnt-card--raised", p && "lmnt-card--loading", `lmnt-card--${n}`, `lmnt-theme-${b}-bg`, r),
-    style: g
-  }, T), t);
+  }, [c, l, u]), /* @__PURE__ */ d.createElement("div", b({
+    ref: C,
+    className: m("lmnt", "lmnt-card", "mdc-card", h === "outlined" && "mdc-card--outlined", h === "flat" && "lmnt-card--flat", h === "raised" && "lmnt-card--raised", y && "lmnt-card--loading", `lmnt-card--${a}`, `lmnt-theme-${f}-bg`, t),
+    style: p
+  }, O), r);
 });
-me.displayName = "Card";
-me.propTypes = an;
-me.defaultProps = rn;
-const ue = /* @__PURE__ */ k((l, a) => {
+Q.displayName = "Card";
+Q.propTypes = ze;
+Q.defaultProps = Fe;
+const X = /* @__PURE__ */ v((o, n) => {
   const {
-    children: n,
-    className: t,
-    customRef: r,
-    disabled: o,
+    children: a,
+    className: r,
+    customRef: t,
+    disabled: l,
     fullWidth: c,
-    href: p,
-    label: d,
-    leadingIcon: f,
-    actionButtonThemeColor: b,
-    trailingIcon: _,
-    type: T,
-    ...g
-  } = l, C = ee(() => d || n, [d, n]);
-  return /* @__PURE__ */ i.createElement(re, N({
-    ref: a,
-    customRef: r,
-    disabled: o,
+    href: y,
+    label: i,
+    leadingIcon: u,
+    actionButtonThemeColor: f,
+    trailingIcon: h,
+    type: O,
+    ...p
+  } = o, _ = U(() => i || a, [i, a]);
+  return /* @__PURE__ */ d.createElement(Be, b({
+    ref: n,
+    customRef: t,
+    disabled: l,
     fullWidth: c,
-    href: p,
-    label: d,
-    leadingIcon: f,
-    themeColor: b,
-    trailingIcon: _,
-    type: T,
+    href: y,
+    label: i,
+    leadingIcon: u,
+    themeColor: f,
+    trailingIcon: h,
+    type: O,
     variant: "text",
-    className: y("mdc-card__action mdc-card__action--button", t)
-  }, g), C);
+    className: m("mdc-card__action mdc-card__action--button", r)
+  }, p), _);
 });
-ue.displayName = "CardActionButton";
-ue.propTypes = on;
-ue.defaultProps = ln;
-const ye = /* @__PURE__ */ k((l, a) => {
+X.displayName = "CardActionButton";
+X.propTypes = Me;
+X.defaultProps = qe;
+const Y = /* @__PURE__ */ v((o, n) => {
   const {
-    active: n,
-    ariaLabel: t,
-    ariaLabelledBy: r,
-    children: o,
+    active: a,
+    ariaLabel: r,
+    ariaLabelledBy: t,
+    children: l,
     className: c,
-    disabled: p,
-    onClick: d,
-    toggleOff: f,
-    toggleOffAriaLabel: b,
-    toggleOffAriaLabelledBy: _,
-    toggleOn: T,
-    toggleOnAriaLabel: g,
-    toggleOnAriaLabelledBy: C,
-    variant: w,
-    ...R
-  } = l, q = ee(() => typeof o == "string" ? /* @__PURE__ */ i.createElement(Y, {
-    icon: o
-  }) : o, [o]);
-  return /* @__PURE__ */ i.createElement(ae, N({
-    ref: a,
-    variant: w,
-    disabled: p,
-    onClick: d,
-    ariaLabel: t,
-    toggleOffAriaLabel: b,
-    toggleOffAriaLabelledBy: _,
-    toggleOnAriaLabel: g,
-    toggleOnAriaLabelledBy: C,
-    toggleOn: T,
-    toggleOff: f,
-    className: y("mdc-card__action mdc-card__action--icon", c)
-  }, R), q);
+    disabled: y,
+    onClick: i,
+    toggleOff: u,
+    toggleOffAriaLabel: f,
+    toggleOffAriaLabelledBy: h,
+    toggleOn: O,
+    toggleOnAriaLabel: p,
+    toggleOnAriaLabelledBy: _,
+    variant: C,
+    ...E
+  } = o, q = U(() => typeof l == "string" ? /* @__PURE__ */ d.createElement(pe, {
+    icon: l
+  }) : l, [l]);
+  return /* @__PURE__ */ d.createElement(F, b({
+    ref: n,
+    variant: C,
+    disabled: y,
+    onClick: i,
+    ariaLabel: r,
+    toggleOffAriaLabel: f,
+    toggleOffAriaLabelledBy: h,
+    toggleOnAriaLabel: p,
+    toggleOnAriaLabelledBy: _,
+    toggleOn: O,
+    toggleOff: u,
+    className: m("mdc-card__action mdc-card__action--icon", c)
+  }, E), q);
 });
-ye.displayName = "CardActionIcon";
-ye.propTypes = dn;
-ye.defaultProps = cn;
-const pe = /* @__PURE__ */ k((l, a) => {
+Y.displayName = "CardActionIcon";
+Y.propTypes = He;
+Y.defaultProps = je;
+const Z = /* @__PURE__ */ v((o, n) => {
   const {
-    alignment: n,
-    actionIcons: t,
-    actionButtons: r,
-    className: o,
+    alignment: a,
+    actionIcons: r,
+    actionButtons: t,
+    className: l,
     ...c
-  } = l;
-  return /* @__PURE__ */ i.createElement("div", N({
-    ref: a,
-    className: y("lmnt", "mdc-card__actions", n === "leading" && "lmnt-card__actions--leading", n === "center" && "lmnt-card__actions--center", n === "trailing" && "lmnt-card__actions--trailing", o)
-  }, c), r && /* @__PURE__ */ i.createElement("div", {
+  } = o;
+  return /* @__PURE__ */ d.createElement("div", b({
+    ref: n,
+    className: m("lmnt", "mdc-card__actions", a === "leading" && "lmnt-card__actions--leading", a === "center" && "lmnt-card__actions--center", a === "trailing" && "lmnt-card__actions--trailing", l)
+  }, c), t && /* @__PURE__ */ d.createElement("div", {
     className: "mdc-card__action-buttons"
-  }, r), t && n === "leading" && /* @__PURE__ */ i.createElement("div", {
+  }, t), r && a === "leading" && /* @__PURE__ */ d.createElement("div", {
     className: "mdc-card__action-icons"
-  }, t));
+  }, r));
 });
-pe.displayName = "CardActions";
-pe.propTypes = sn;
-pe.defaultProps = mn;
-const ge = /* @__PURE__ */ k((l, a) => {
+Z.displayName = "CardActions";
+Z.propTypes = We;
+Z.defaultProps = Ve;
+const ee = /* @__PURE__ */ v((o, n) => {
   const {
-    children: n,
-    typographyType: t,
-    themeColor: r,
-    className: o,
+    children: a,
+    typographyType: r,
+    themeColor: t,
+    className: l,
     ...c
-  } = l;
-  return /* @__PURE__ */ i.createElement("div", N({
-    ref: a,
-    className: y("lmnt-card-body", t === "body1" && " mdc-typography--body1", t === "body2" && " mdc-typography--body2", t === "button" && " mdc-typography--button", t === "caption" && " mdc-typography--caption", t === "headline1" && " mdc-typography--headline1", t === "headline2" && " mdc-typography--headline2", t === "headline3" && " mdc-typography--headline3", t === "headline4" && " mdc-typography--headline4", t === "headline5" && " mdc-typography--headline5", t === "headline6" && " mdc-typography--headline6", t === "display1" && " mdc-typography--headline1", t === "display2" && " mdc-typography--headline2", t === "display3" && " mdc-typography--headline3", t === "display4" && " mdc-typography--headline4", t === "display5" && " mdc-typography--headline5", t === "display6" && " mdc-typography--headline6", t === "overline" && " mdc-typography--overline", t === "subtitle1" && " mdc-typography--subtitle1", t === "subtitle2" && " mdc-typography--subtitle2", `lmnt-theme-${r}-bg`, o)
-  }, c), n);
+  } = o;
+  return /* @__PURE__ */ d.createElement("div", b({
+    ref: n,
+    className: m("lmnt-card-body", r === "body1" && " mdc-typography--body1", r === "body2" && " mdc-typography--body2", r === "button" && " mdc-typography--button", r === "caption" && " mdc-typography--caption", r === "headline1" && " mdc-typography--headline1", r === "headline2" && " mdc-typography--headline2", r === "headline3" && " mdc-typography--headline3", r === "headline4" && " mdc-typography--headline4", r === "headline5" && " mdc-typography--headline5", r === "headline6" && " mdc-typography--headline6", r === "display1" && " mdc-typography--headline1", r === "display2" && " mdc-typography--headline2", r === "display3" && " mdc-typography--headline3", r === "display4" && " mdc-typography--headline4", r === "display5" && " mdc-typography--headline5", r === "display6" && " mdc-typography--headline6", r === "overline" && " mdc-typography--overline", r === "subtitle1" && " mdc-typography--subtitle1", r === "subtitle2" && " mdc-typography--subtitle2", `lmnt-theme-${t}-bg`, l)
+  }, c), a);
 });
-ge.displayName = "CardBody";
-ge.propTypes = un;
-ge.defaultProps = yn;
-const fe = /* @__PURE__ */ k((l, a) => {
+ee.displayName = "CardBody";
+ee.propTypes = Ge;
+ee.defaultProps = Je;
+const ae = /* @__PURE__ */ v((o, n) => {
   const {
-    children: n,
-    className: t,
-    ...r
-  } = l;
-  return /* @__PURE__ */ i.createElement("div", N({
-    ref: a,
-    className: y(["lmnt", "mdc-card__content"], t)
-  }, r), n);
+    children: a,
+    className: r,
+    ...t
+  } = o;
+  return /* @__PURE__ */ d.createElement("div", b({
+    ref: n,
+    className: m(["lmnt", "mdc-card__content"], r)
+  }, t), a);
 });
-fe.displayName = "CardContent";
-fe.propTypes = pn;
-fe.defaultProps = gn;
-const be = /* @__PURE__ */ k((l, a) => {
+ae.displayName = "CardContent";
+ae.propTypes = Ke;
+ae.defaultProps = Qe;
+const re = /* @__PURE__ */ v((o, n) => {
   const {
-    className: n,
-    dividerVariant: t,
-    dividerThemeColor: r,
-    ...o
-  } = l;
-  return /* @__PURE__ */ i.createElement(ne, N({
-    ref: a,
-    variant: t,
-    themeColor: r,
-    className: y("mdc-card__divider", "lmnt-card-divider", n)
-  }, o));
+    className: a,
+    dividerVariant: r,
+    dividerThemeColor: t,
+    ...l
+  } = o;
+  return /* @__PURE__ */ d.createElement(z, b({
+    ref: n,
+    variant: r,
+    themeColor: t,
+    className: m("mdc-card__divider", "lmnt-card-divider", a)
+  }, l));
 });
-be.displayName = "CardDivider";
-be.propTypes = fn;
-be.defaultProps = bn;
-const he = /* @__PURE__ */ k((l, a) => {
+re.displayName = "CardDivider";
+re.propTypes = Xe;
+re.defaultProps = Ye;
+const ne = /* @__PURE__ */ v((o, n) => {
   const {
-    children: n,
-    className: t,
-    filterType: r,
-    ...o
-  } = l;
-  return /* @__PURE__ */ i.createElement("div", N({
-    ref: a,
-    className: y("lmnt", "lmnt-card__filters", r === "chips" && "lmnt-card__filters--chips", r === "select" && "lmnt-card__filters--select", r === "select-2" && "lmnt-card__filters--select lmnt-card__filters--select-2", t)
-  }, o), n);
+    children: a,
+    className: r,
+    filterType: t,
+    ...l
+  } = o;
+  return /* @__PURE__ */ d.createElement("div", b({
+    ref: n,
+    className: m("lmnt", "lmnt-card__filters", t === "chips" && "lmnt-card__filters--chips", t === "select" && "lmnt-card__filters--select", t === "select-2" && "lmnt-card__filters--select lmnt-card__filters--select-2", r)
+  }, l), a);
 });
-he.displayName = "CardFilter";
-he.propTypes = hn;
-he.defaultProps = vn;
-const In = /* @__PURE__ */ De({
+ne.displayName = "CardFilter";
+ne.propTypes = Ze;
+ne.defaultProps = ea;
+const pa = /* @__PURE__ */ Te({
   groupRect: {}
-}), ve = /* @__PURE__ */ k((l, a) => {
+}), te = /* @__PURE__ */ v((o, n) => {
   const {
-    children: n,
-    className: t,
-    rtl: r,
-    ...o
-  } = l, [c, p] = tn(), d = D(c);
-  return F(a, () => d.current, []), F(c, () => d.current, []), // eslint-disable-next-line react/jsx-no-constructed-context-values
-  /* @__PURE__ */ i.createElement(In.Provider, {
+    children: a,
+    className: r,
+    rtl: t,
+    ...l
+  } = o, [c, y] = Ue(), i = L(c);
+  return w(n, () => i.current, []), w(c, () => i.current, []), // eslint-disable-next-line react/jsx-no-constructed-context-values
+  /* @__PURE__ */ d.createElement(pa.Provider, {
     value: {
-      groupRect: p
+      groupRect: y
     }
-  }, /* @__PURE__ */ i.createElement(Fe, N({
-    className: y("lmnt-card__horizontal-group", "lmnt-card--horizontal", t),
-    ref: d,
+  }, /* @__PURE__ */ d.createElement(Le, b({
+    className: m("lmnt-card__horizontal-group", "lmnt-card--horizontal", r),
+    ref: i,
     gap: "none",
-    direction: r ? "horizontal-reverse" : "horizontal",
+    direction: t ? "horizontal-reverse" : "horizontal",
     secondaryAlign: "start"
-  }, o), n));
+  }, l), a));
 });
-ve.propTypes = _n;
-ve.defaultProps = kn;
-ve.displayName = "CardHorizontalGroup";
-const oe = /* @__PURE__ */ k((l, a) => {
+te.propTypes = aa;
+te.defaultProps = ra;
+te.displayName = "CardHorizontalGroup";
+const M = /* @__PURE__ */ v((o, n) => {
   const {
-    children: n,
-    className: t,
-    position: r,
-    overlayThemeColor: o,
+    children: a,
+    className: r,
+    position: t,
+    overlayThemeColor: l,
     ...c
-  } = l, p = D();
-  F(a, () => p.current, []);
-  const d = ee(() => r !== "none" && y("lmnt", "lmnt-card-overlay ", !o.includes("gradient") && o !== "surface" && `lmnt-card-overlay__${o}`, o.includes("gradient") && o !== "surface" && `lmnt-theme--bg-${o}`, o === "surface" && "lmnt-theme-surface-bg", `lmnt-card-overlay__${r}`, t), [o, r, t]);
-  return /* @__PURE__ */ i.createElement("div", N({
-    className: d
-  }, c), n && n);
+  } = o, y = L();
+  w(n, () => y.current, []);
+  const i = U(() => t !== "none" && m("lmnt", "lmnt-card-overlay ", !l.includes("gradient") && l !== "surface" && `lmnt-card-overlay__${l}`, l.includes("gradient") && l !== "surface" && `lmnt-theme--bg-${l}`, l === "surface" && "lmnt-theme-surface-bg", `lmnt-card-overlay__${t}`, r), [l, t, r]);
+  return /* @__PURE__ */ d.createElement("div", b({
+    className: i
+  }, c), a && a);
 });
-oe.displayName = "CardOverlay";
-oe.propTypes = An;
-oe.defaultProps = Bn;
-const _e = /* @__PURE__ */ k((l, a) => {
+M.displayName = "CardOverlay";
+M.propTypes = ia;
+M.defaultProps = da;
+const le = /* @__PURE__ */ v((o, n) => {
   const {
-    children: n,
-    className: t,
-    contentPlacement: r,
-    imageUrl: o,
+    children: a,
+    className: r,
+    contentPlacement: t,
+    imageUrl: l,
     overlay: c,
-    overlayThemeColor: p,
-    ratio: d,
-    style: f,
-    ...b
-  } = l;
-  return /* @__PURE__ */ i.createElement("div", N({
-    ref: a,
-    className: y("lmnt", "mdc-card__media", (d === "square" || !d) && "mdc-card__media--square", d === "sixteen-nine" && "mdc-card__media--16-9", d === "four-three" && "lmnt-card__media--4-3", d === "four-five" && "lmnt-card__media--4-5", d === "two-one" && "lmnt-card__media--2-1", t),
+    overlayThemeColor: y,
+    ratio: i,
+    style: u,
+    ...f
+  } = o;
+  return /* @__PURE__ */ d.createElement("div", b({
+    ref: n,
+    className: m("lmnt", "mdc-card__media", (i === "square" || !i) && "mdc-card__media--square", i === "sixteen-nine" && "mdc-card__media--16-9", i === "four-three" && "lmnt-card__media--4-3", i === "four-five" && "lmnt-card__media--4-5", i === "two-one" && "lmnt-card__media--2-1", r),
     style: {
-      backgroundImage: `url(${o})`,
-      ...f
+      backgroundImage: `url(${l})`,
+      ...u
     }
-  }, b), c && /* @__PURE__ */ i.createElement(oe, {
-    overlayThemeColor: p
-  }), n && /* @__PURE__ */ i.createElement("div", {
-    className: y("mdc-card__media-content", c && "lmnt-card__media-content--with-overlay", r === "bottom" && "lmnt-card__content--bottom", r === "top" && "lmnt-card__content--top")
-  }, /* @__PURE__ */ i.createElement("div", {
+  }, f), c && /* @__PURE__ */ d.createElement(M, {
+    overlayThemeColor: y
+  }), a && /* @__PURE__ */ d.createElement("div", {
+    className: m("mdc-card__media-content", c && "lmnt-card__media-content--with-overlay", t === "bottom" && "lmnt-card__content--bottom", t === "top" && "lmnt-card__content--top")
+  }, /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-card__media-inner-content"
-  }, n)));
+  }, a)));
 });
-_e.displayName = "CardMedia";
-_e.propTypes = Cn;
-_e.defaultProps = Tn;
-const ke = /* @__PURE__ */ k((l, a) => {
+le.displayName = "CardMedia";
+le.propTypes = la;
+le.defaultProps = oa;
+const oe = /* @__PURE__ */ v((o, n) => {
   const {
-    children: n,
-    className: t,
-    tag: r = "div",
-    ...o
-  } = l;
-  return /* @__PURE__ */ i.createElement(r, N({
-    ref: a,
+    children: a,
+    className: r,
+    tag: t = "div",
+    ...l
+  } = o;
+  return /* @__PURE__ */ d.createElement(t, b({
+    ref: n,
     tabIndex: "0",
-    className: y(["lmnt", "mdc-card__primary-action"], t)
-  }, o), n);
+    className: m(["lmnt", "mdc-card__primary-action"], r)
+  }, l), a);
 });
-ke.displayName = "CardPrimaryAction";
-ke.propTypes = Ln;
-ke.defaultProps = wn;
-const Oe = /* @__PURE__ */ k((l, a) => {
+oe.displayName = "CardPrimaryAction";
+oe.propTypes = ca;
+oe.defaultProps = sa;
+const ie = /* @__PURE__ */ v((o, n) => {
   const {
-    className: n,
-    leadingBlock: t,
-    leadingBlockType: r,
-    overlineText: o,
+    className: a,
+    leadingBlock: r,
+    leadingBlockType: t,
+    overlineText: l,
     placement: c,
-    primaryText: p,
-    secondaryText: d,
-    stackedSecondaryText: f,
-    stacked: b,
-    themeColor: _,
-    trailingBlock: T,
-    trailingBlockType: g,
-    ...C
-  } = l;
-  return /* @__PURE__ */ i.createElement("div", N({
-    ref: a,
-    className: y("lmnt", "lmnt-card-title", b && "lmnt-card-title--stacked", c === "top" && "lmnt-card-title--top-placement", c === "bottom" && "lmnt-card-title--bottom-placement", _ === "primary" && "lmnt-theme-primary-bg", _ === "secondary" && "lmnt-theme-secondary-bg", n)
-  }, C), r ? /* @__PURE__ */ i.createElement("div", {
-    className: y("lmnt-card-title__leadingBlock", r === "avatar" && "lmnt-card-title__leadingBlock--avatar", r === "icon" && "lmnt-card-title__leadingBlock--icon", r === "icon-with-background" && "lmnt-card-title__leadingBlock--icon-with-background", r === "thumbnail" && "lmnt-card-title__leadingBlock--thumbnail")
-  }, t) : null, /* @__PURE__ */ i.createElement("div", {
+    primaryText: y,
+    secondaryText: i,
+    stackedSecondaryText: u,
+    stacked: f,
+    themeColor: h,
+    trailingBlock: O,
+    trailingBlockType: p,
+    ..._
+  } = o;
+  return /* @__PURE__ */ d.createElement("div", b({
+    ref: n,
+    className: m("lmnt", "lmnt-card-title", f && "lmnt-card-title--stacked", c === "top" && "lmnt-card-title--top-placement", c === "bottom" && "lmnt-card-title--bottom-placement", h === "primary" && "lmnt-theme-primary-bg", h === "secondary" && "lmnt-theme-secondary-bg", a)
+  }, _), t ? /* @__PURE__ */ d.createElement("div", {
+    className: m("lmnt-card-title__leadingBlock", t === "avatar" && "lmnt-card-title__leadingBlock--avatar", t === "icon" && "lmnt-card-title__leadingBlock--icon", t === "icon-with-background" && "lmnt-card-title__leadingBlock--icon-with-background", t === "thumbnail" && "lmnt-card-title__leadingBlock--thumbnail")
+  }, r) : null, /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-card-title__text"
-  }, o && /* @__PURE__ */ i.createElement("div", {
+  }, l && /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-card-title__overlineText"
-  }, o), p, (d || f) && /* @__PURE__ */ i.createElement("div", {
-    className: y("lmnt-card-title-secondaryText-container", !b && "lmnt-card-title__items")
-  }, d && /* @__PURE__ */ i.createElement("div", {
+  }, l), y, (i || u) && /* @__PURE__ */ d.createElement("div", {
+    className: m("lmnt-card-title-secondaryText-container", !f && "lmnt-card-title__items")
+  }, i && /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-card-title__secondaryText"
-  }, d), f && /* @__PURE__ */ i.createElement("div", {
+  }, i), u && /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-card-title__secondaryText"
-  }, f))), g ? /* @__PURE__ */ i.createElement("div", {
-    className: y("lmnt-card-title__trailingBlock", g === "title-actions" && "lmnt-card-title__trailingBlock--title-actions", g === "avatar" && "lmnt-card-title__trailingBlock--avatar", g === "icon" && "lmnt-card-title__trailingBlock--icon", g === "icon-with-background" && "lmnt-card-title__trailingBlock--icon-with-background", g === "thumbnail" && "lmnt-card-title__trailingBlock--thumbnail", g === "badge" && "lmnt-card-title__trailingBlock--badge")
-  }, T) : null);
+  }, u))), p ? /* @__PURE__ */ d.createElement("div", {
+    className: m("lmnt-card-title__trailingBlock", p === "title-actions" && "lmnt-card-title__trailingBlock--title-actions", p === "avatar" && "lmnt-card-title__trailingBlock--avatar", p === "icon" && "lmnt-card-title__trailingBlock--icon", p === "icon-with-background" && "lmnt-card-title__trailingBlock--icon-with-background", p === "thumbnail" && "lmnt-card-title__trailingBlock--thumbnail", p === "badge" && "lmnt-card-title__trailingBlock--badge")
+  }, O) : null);
 });
-Oe.displayName = "CardTitle";
-Oe.propTypes = xn;
-Oe.defaultProps = En;
-const Ne = /* @__PURE__ */ k((l, a) => {
+ie.displayName = "CardTitle";
+ie.propTypes = ma;
+ie.defaultProps = ya;
+const de = /* @__PURE__ */ v((o, n) => {
   const {
-    style: n,
-    mediaUrl: t,
-    width: r,
-    ...o
-  } = l, c = D();
-  return F(a, () => c.current, []), /* @__PURE__ */ i.createElement("img", N({
-    src: t,
+    style: a,
+    mediaUrl: r,
+    width: t,
+    ...l
+  } = o, c = L();
+  return w(n, () => c.current, []), /* @__PURE__ */ d.createElement("img", b({
+    src: r,
     alt: "leadingCardMedia",
-    width: r,
+    width: t,
     style: {
       flexShrink: 0,
-      ...n
+      ...a
     }
-  }, o));
+  }, l));
 });
-Ne.propTypes = On;
-Ne.defaultProps = Nn;
-Ne.displayName = "CardLeadingMedia";
+de.propTypes = na;
+de.defaultProps = ta;
+de.displayName = "CardLeadingMedia";
 export {
-  Oe as $,
-  me as B,
-  be as I,
-  re as O,
-  ae as a,
-  te as o,
-  fe as w,
-  ge as x
+  ie as $,
+  Q as B,
+  re as I,
+  F as a,
+  ae as w,
+  ee as x
 };