@iress-oss/ids-components 6.0.0-alpha.16 → 6.0.0-alpha.18

package/dist/components/Autocomplete/Autocomplete.styles.js

@@ -3,7 +3,11 @@ const p = o({
   slots: ["root", "popoverContent", "optionList"],
   base: {
     root: {},
-    popoverContent: {},
+    popoverContent: {
+      _empty: {
+        display: "none"
+      }
+    },
     optionList: {
       _empty: {
         display: "none"

package/dist/components/Autocomplete/hooks/useAutocompleteSearch.js

@@ -1,8 +1,8 @@
-import { useRef as h, useState as T, useCallback as g, useEffect as _, useMemo as L } from "react";
+import { useRef as g, useState as T, useCallback as p, useEffect as _, useMemo as L } from "react";
 import { searchLabelValues as U } from "../../../helpers/label-value/searchLabelValues.js";
 import { highlightQueryInLabelValue as I } from "../../../helpers/label-value/highlightQueryInLabelValue.js";
 function V(r, n, u, c) {
-  var a = this, t = h(null), f = h(0), s = h(0), e = h(null), l = h([]), i = h(), p = h(), E = h(r), v = h(!0);
+  var a = this, t = g(null), f = g(0), s = g(0), e = g(null), i = g([]), l = g(), d = g(), E = g(r), v = g(!0);
   E.current = r;
   var S = typeof window < "u", m = !n && n !== 0 && S;
   if (typeof r != "function") throw new TypeError("Expected a function");
@@ -15,42 +15,42 @@ function V(r, n, u, c) {
   }, []);
   var M = L(function() {
     var x = function(o) {
-      var d = l.current, b = i.current;
-      return l.current = i.current = null, f.current = o, s.current = s.current || o, p.current = E.current.apply(b, d);
-    }, D = function(o, d) {
-      m && cancelAnimationFrame(e.current), e.current = m ? requestAnimationFrame(o) : setTimeout(o, d);
+      var h = i.current, b = l.current;
+      return i.current = l.current = null, f.current = o, s.current = s.current || o, d.current = E.current.apply(b, h);
+    }, D = function(o, h) {
+      m && cancelAnimationFrame(e.current), e.current = m ? requestAnimationFrame(o) : setTimeout(o, h);
     }, O = function(o) {
       if (!v.current) return !1;
-      var d = o - t.current;
-      return !t.current || d >= n || d < 0 || R && o - f.current >= y;
+      var h = o - t.current;
+      return !t.current || h >= n || h < 0 || R && o - f.current >= y;
     }, Q = function(o) {
-      return e.current = null, A && l.current ? x(o) : (l.current = i.current = null, p.current);
+      return e.current = null, A && i.current ? x(o) : (i.current = l.current = null, d.current);
     }, F = function o() {
-      var d = Date.now();
-      if (w && s.current === f.current && N(), O(d)) return Q(d);
+      var h = Date.now();
+      if (w && s.current === f.current && N(), O(h)) return Q(h);
       if (v.current) {
-        var b = n - (d - t.current), k = R ? Math.min(b, y - (d - f.current)) : b;
+        var b = n - (h - t.current), k = R ? Math.min(b, y - (h - f.current)) : b;
         D(o, k);
       }
     }, N = function() {
       c && c({});
     }, W = function() {
       if (S || H) {
-        var o = Date.now(), d = O(o);
-        if (l.current = [].slice.call(arguments), i.current = a, t.current = o, d) {
-          if (!e.current && v.current) return f.current = t.current, D(F, n), w ? x(t.current) : p.current;
+        var o = Date.now(), h = O(o);
+        if (i.current = [].slice.call(arguments), l.current = a, t.current = o, h) {
+          if (!e.current && v.current) return f.current = t.current, D(F, n), w ? x(t.current) : d.current;
           if (R) return D(F, n), x(t.current);
         }
-        return e.current || D(F, n), p.current;
+        return e.current || D(F, n), d.current;
       }
     };
     return W.cancel = function() {
       var o = e.current;
-      o && (m ? cancelAnimationFrame(e.current) : clearTimeout(e.current)), f.current = 0, l.current = t.current = i.current = e.current = null, o && c && c({});
+      o && (m ? cancelAnimationFrame(e.current) : clearTimeout(e.current)), f.current = 0, i.current = t.current = l.current = e.current = null, o && c && c({});
     }, W.isPending = function() {
       return !!e.current;
     }, W.flush = function() {
-      return e.current ? Q(Date.now()) : p.current;
+      return e.current ? Q(Date.now()) : d.current;
     }, W;
   }, [w, R, n, y, A, m, S, H, c]);
   return M;
@@ -59,15 +59,15 @@ function B(r, n) {
   return r === n;
 }
 function C(r, n, u) {
-  var c = B, a = h(r), t = T({})[1], f = V(g(function(e) {
+  var c = B, a = g(r), t = T({})[1], f = V(p(function(e) {
     a.current = e, t({});
-  }, [t]), n, u, t), s = h(r);
+  }, [t]), n, u, t), s = g(r);
   return c(s.current, r) || (f(r), s.current = r), [a.current, f];
 }
 const G = 500, P = 1, j = (r) => r instanceof Error && r.message ? r.message : typeof r == "string" ? r : !0, z = () => {
-  const [r, n] = T(!1), [u, c] = T(!1), [a, t] = T([]), [f, s] = T(!1), e = g(() => {
+  const [r, n] = T(!1), [u, c] = T(!1), [a, t] = T([]), [f, s] = T(!1), e = p(() => {
     t([]), n(!1), c(!1), s(!1);
-  }, []), l = g(
+  }, []), i = p(
     (m, w) => {
       t(
         m.map(
@@ -76,15 +76,15 @@ const G = 500, P = 1, j = (r) => r instanceof Error && r.message ? r.message : t
       ), c(!1), n(!1);
     },
     []
-  ), i = g((m) => {
+  ), l = p((m) => {
     t([]), c(m), n(!1);
-  }, []), p = g(() => {
+  }, []), d = p(() => {
     c(!1);
-  }, []), E = g((m) => {
+  }, []), E = p((m) => {
     n(m);
-  }, []), v = g((m) => {
+  }, []), v = p((m) => {
     s(m);
-  }, []), S = g(() => {
+  }, []), S = p(() => {
     c(!1);
   }, []);
   return {
@@ -93,28 +93,28 @@ const G = 500, P = 1, j = (r) => r instanceof Error && r.message ? r.message : t
     results: a,
     hasSearched: f,
     reset: e,
-    updateWithResults: l,
-    updateWithError: i,
-    clearError: p,
+    updateWithResults: i,
+    updateWithError: l,
+    clearError: d,
     setLoadingState: E,
     setSearched: v,
     clearErrorState: S
   };
 }, J = (r, n) => {
-  const u = h(""), c = g((s) => u.current === s, []), a = g((s) => {
+  const u = g(""), c = p((s) => u.current === s, []), a = p((s) => {
     u.current = s;
-  }, []), t = g(
-    async (s, e, l, i = !1) => {
-      if (c(e) && !i) return;
-      const p = ++n.current;
-      if (a(e), e.length >= l || i) {
+  }, []), t = p(
+    async (s, e, i, l = !1) => {
+      if (c(e) && !l) return;
+      const d = ++n.current;
+      if (a(e), e.length >= i || l) {
         r.setLoadingState(!0), r.clearErrorState();
         try {
           const E = await s(e);
-          if (p !== n.current) return;
+          if (d !== n.current) return;
           r.setSearched(!0), r.updateWithResults(E, e);
         } catch (E) {
-          if (p !== n.current) return;
+          if (d !== n.current) return;
           r.setSearched(!0), r.updateWithError(
             j(E)
           );
@@ -123,13 +123,13 @@ const G = 500, P = 1, j = (r) => r instanceof Error && r.message ? r.message : t
         r.reset();
     },
     [r, c, a, n]
-  ), f = g(
-    (s, e, l, i = !1) => {
-      if (!(c(e) && !i))
-        if (a(e), e.length >= l || i) {
+  ), f = p(
+    (s, e, i, l = !1) => {
+      if (!(c(e) && !l))
+        if (a(e), e.length >= i || l) {
           r.setSearched(!0);
-          const p = U(e, s);
-          r.updateWithResults(p, e);
+          const d = U(e, s);
+          r.updateWithResults(d, e);
         } else
           r.reset();
     },
@@ -146,14 +146,14 @@ const G = 500, P = 1, j = (r) => r instanceof Error && r.message ? r.message : t
   options: c = [],
   query: a = ""
 }) => {
-  const t = z(), f = h(0), s = J(t, f), [e] = C(a, r), l = g(
-    (i = !1) => {
+  const t = z(), f = g(0), s = J(t, f), [e] = C(a, r), i = p(
+    (d = !1) => {
       if (typeof c == "function") {
         s.handleAsync(
           c,
           e,
           u,
-          i
+          d
         );
         return;
       }
@@ -161,12 +161,14 @@ const G = 500, P = 1, j = (r) => r instanceof Error && r.message ? r.message : t
         c,
         e,
         u,
-        i
+        d
       );
     },
     [e, u, c, s]
   );
-  return _(l, [l]), {
+  _(i, [i]);
+  let l;
+  return t.results.length ? l = t.results : e.length ? l = [] : l = n ?? [], {
     clearError: t.clearError,
     debouncedQuery: e,
     error: t.error,
@@ -174,8 +176,8 @@ const G = 500, P = 1, j = (r) => r instanceof Error && r.message ? r.message : t
     shouldShowInstructions: a.length < u && !t.results.length && !n?.length,
     shouldShowDebounceWaiting: a.length >= u && e.length < u && !t.loading && !t.hasSearched,
     shouldShowNoResults: t.hasSearched && !t.loading && t.results.length === 0 && a.length >= u,
-    results: t.results.length ? t.results : n ?? [],
-    startSearch: l,
+    results: l,
+    startSearch: i,
     stopSearch: t.reset
   };
 };

package/dist/components/Badge/Badge.styles.js

@@ -3,6 +3,8 @@ const r = o({
   slots: ["root", "badge", "host"],
   base: {
     root: {
+      // Performance: CSS containment limits style recalculation scope
+      contain: "layout style paint",
       display: "inline-block",
       overflow: "visible",
       textStyle: "typography.body.sm.regular",

package/dist/components/Card/Card.styles.d.ts

@@ -34,7 +34,7 @@ export declare const card: import('../../styled-system/types').SlotRecipeRuntime
                     borderColor: "colour.primary.fill";
                     borderStyle: "solid";
                     borderWidth: "[2px]";
-                    borderRadius: "radius.system.form";
+                    borderRadius: "radius.system.layout";
                     pointerEvents: "[none]";
                 };
             };

package/dist/components/Card/Card.styles.js

@@ -3,6 +3,8 @@ const e = t({
   slots: ["root", "prepend", "heading", "topRight", "media", "body", "footer"],
   base: {
     root: {
+      // Performance: CSS containment (no paint to allow overflow)
+      contain: "layout style",
       position: "relative",
       borderRadius: "radius.system.layout",
       bg: "colour.neutral.10",
@@ -101,7 +103,7 @@ const e = t({
             borderColor: "colour.primary.fill",
             borderStyle: "solid",
             borderWidth: "[2px]",
-            borderRadius: "radius.system.form",
+            borderRadius: "radius.system.layout",
             pointerEvents: "[none]"
           }
         }

package/dist/components/Checkbox/Checkbox.styles.js

@@ -14,6 +14,8 @@ const o = r({
   base: {
     formElement: {},
     root: {
+      // Performance: CSS containment (no paint to allow focus ring/shadow)
+      contain: "layout style",
       color: "colour.primary.fill",
       display: "flex",
       position: "relative",

package/dist/components/Expander/Expander.styles.js

@@ -10,6 +10,8 @@ const r = o({
   ],
   base: {
     root: {
+      // Performance: CSS containment (no paint to allow overflow)
+      contain: "layout style",
       display: "block",
       "&:has([aria-controls]:focus-visible)": {
         layerStyle: "elevation.focusNoBorder"

package/dist/components/Filter/Filter.styles.d.ts

@@ -1,2 +1,2 @@
-export declare const filter: import('../../styled-system/types').SlotRecipeRuntimeFn<"reset" | "root" | "popoverContent" | "optionList" | "noResults" | "chevron" | "searchInput" | "optionContent" | "optionMeta" | "optionMetaText", {}>;
+export declare const filter: import('../../styled-system/types').SlotRecipeRuntimeFn<"root" | "reset" | "popoverContent" | "optionList" | "noResults" | "chevron" | "searchInput" | "optionContent" | "optionMeta" | "optionMetaText", {}>;
 export type FilterVariants = Parameters<typeof filter>[0];

package/dist/components/Filter/components/FilterSearch.d.ts

@@ -2,7 +2,6 @@ import { InputRef } from '../../Input/InputBase/InputBase';
 export declare const FilterSearch: import('react').ForwardRefExoticComponent<Omit<import('../../Input').InputBaseProps<undefined>, "defaultValue" | "onChange" | "value"> & {
     alignRight?: boolean;
     append?: import('react').ReactNode;
-    clearable?: boolean;
     defaultValue?: string | number | undefined;
     formatter?: ((value?: string | number | undefined) => string | number) | undefined;
     inline?: boolean;
@@ -12,4 +11,6 @@ export declare const FilterSearch: import('react').ForwardRefExoticComponent<Omi
     prepend?: import('react').ReactNode;
     value?: string | number | undefined;
     width?: import('../../../types').FormElementWidths;
+} & {
+    clearable?: boolean;
 } & import('react').RefAttributes<InputRef>>;

package/dist/components/Input/Input.d.ts

@@ -11,11 +11,6 @@ export type IressInputProps<T extends FormControlValue = string | number, TRows
      * Content to append to the input field, usually a button or icon.
      **/
     append?: ReactNode;
-    /**
-     * If `true`, then user can clear the value of the input. Will be ignored if `rows` prop is in use.
-     * @default false
-     */
-    clearable?: boolean;
     /**
      * The value of the input. Can be a string or a number. Use for uncontrolled inputs.
      */
@@ -53,7 +48,21 @@ export type IressInputProps<T extends FormControlValue = string | number, TRows
      * The width of the input.
      */
     width?: FormElementWidths;
-};
+} & (TRows extends number ? {
+    /**
+     * Controls the auto-grow behaviour of the textarea when `rows` is set.
+     * - Set to a number (e.g. `autoGrow={10}`) to define the maximum number of visible rows before the textarea starts scrolling.
+     * - Set to `true` to enable auto-grow with a default maximum of 5 visible rows.
+     * @default false (no auto-grow) or 5 rows when `autoGrow` is `true`
+     */
+    autoGrow?: number | boolean;
+} : {
+    /**
+     * If `true`, then user can clear the value of the input.
+     * @default false
+     */
+    clearable?: boolean;
+});
 export declare const IressInput: (<T extends FormControlValue = string | number, TRows extends number | undefined = undefined>(props: IressInputProps<T, TRows> & RefAttributes<InputRef<TRows> | null>) => ReactElement) & {
     displayName: "IressInput";
 };

package/dist/components/Input/Input.js

@@ -1,132 +1,142 @@
-import { jsx as r, jsxs as w } from "react/jsx-runtime";
-import { forwardRef as A, useRef as F, useState as G, useImperativeHandle as H } from "react";
-import { GlobalCSSClass as d } from "../../enums.js";
-import { getFormControlValueAsString as U } from "../../helpers/form/getFormControlValueAsString.js";
-import { InputBase as z } from "./InputBase/InputBase.js";
-import { IressSpinner as J } from "../Spinner/Spinner.js";
+import { jsx as a, jsxs as V } from "react/jsx-runtime";
+import { forwardRef as U, useRef as b, useState as Y, useImperativeHandle as $, useEffect as z } from "react";
+import { GlobalCSSClass as h } from "../../enums.js";
+import { getFormControlValueAsString as J } from "../../helpers/form/getFormControlValueAsString.js";
+import { InputBase as K } from "./InputBase/InputBase.js";
+import { IressSpinner as L } from "../Spinner/Spinner.js";
 import "../Spinner/Spinner.styles.js";
-import { useControlledState as K } from "../../hooks/useControlledState.js";
-import { IressReadonly as L } from "../Readonly/Readonly.js";
+import { useControlledState as Q } from "../../hooks/useControlledState.js";
+import { IressReadonly as W } from "../Readonly/Readonly.js";
 import "../Readonly/Readonly.styles.js";
-import { c as s } from "../../cx-DN21T1EH.js";
-import { input as Q } from "./Input.styles.js";
-import { s as W } from "../../factory-CsinCTPr.js";
-import { s as X } from "../../is-valid-prop-DweT-eOL.js";
-import { useNoDefaultValueInForms as Y } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
+import { c as u } from "../../cx-DN21T1EH.js";
+import { input as X } from "./Input.styles.js";
+import { s as Z } from "../../factory-CsinCTPr.js";
+import { s as _ } from "../../is-valid-prop-DweT-eOL.js";
+import { useNoDefaultValueInForms as ee } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
 import "../../Button-BTkololu.js";
-import { IressCloseButton as Z } from "../Button/CloseButton/CloseButton.js";
-const _ = ({ rows: a, ...f }, S) => {
+import { IressCloseButton as te } from "../Button/CloseButton/CloseButton.js";
+const oe = ({ rows: t, ...c }, M) => {
   const {
-    loading: l = !1,
+    loading: d = !1,
     clearable: P = !1,
-    defaultValue: v,
+    defaultValue: g,
     onClear: D,
-    width: M,
-    prepend: I,
-    append: u,
+    width: E,
+    prepend: v,
+    append: p,
     onChange: R,
-    className: g,
+    className: I,
     readOnly: B,
-    formatter: i,
-    type: E,
+    formatter: m,
+    type: G,
     inline: T,
     alignRight: C,
-    ...t
-  } = f;
-  Y({
+    ...o
+  } = c;
+  let n = t !== void 0 ? c.autoGrow : void 0;
+  n === !0 && (n = 5), ee({
     component: "IressInput",
-    defaultValue: v
+    defaultValue: g
   });
-  const c = F(null), p = F(null), { value: m, setValue: h } = K({
+  const s = b(null), f = b(null), { value: i, setValue: y } = Q({
     component: "IressInput",
-    defaultValue: v,
-    value: f.value
-  }), y = U(m), [x, N] = G(!1), [j, O] = X(t), V = i && !x ? i(m) : y;
-  let b = i && !x ? { type: "text" } : { type: E };
-  if (a !== void 0 && (b = void 0), H(
-    S,
+    defaultValue: g,
+    value: c.value
+  }), x = J(i), [w, F] = Y(!1), [j, O] = _(o), H = m && !w ? m(i) : x;
+  let N = m && !w ? { type: "text" } : { type: G };
+  if (t !== void 0 && (N = void 0), $(
+    M,
     () => ({
-      ...c.current,
+      ...s.current,
       extras: {
         additionalOnChangeProps: ["onClear"]
       }
     })
-  ), B)
-    return /* @__PURE__ */ r(
-      L,
+  ), z(() => {
+    if (t && n && s.current) {
+      const e = s.current.input;
+      if (!e) return;
+      e.style.height = "auto";
+      const S = parseFloat(getComputedStyle(e).lineHeight) * 1.075 * n, A = Math.min(e.scrollHeight, S);
+      e.style.height = `${A}px`, e.style.overflowY = e.scrollHeight > S ? "auto" : "hidden";
+    }
+  }, [i, t, n]), B)
+    return /* @__PURE__ */ a(
+      W,
       {
-        ...t,
+        ...o,
         defaultValue: void 0,
-        value: m,
+        value: i,
         alignRight: C,
-        append: u,
-        className: g,
-        children: V
+        append: p,
+        className: I,
+        children: H
       }
     );
   const k = (e) => {
-    h(""), c.current?.focus();
-    const o = new Event("change", {
+    y(""), s.current?.focus();
+    const r = new Event("change", {
       bubbles: !0
     });
-    Object.defineProperty(o, "target", {
+    Object.defineProperty(r, "target", {
       writable: !1,
       value: { value: "", ...e.target }
-    }), D?.(o);
+    }), D?.(r);
   }, q = (e) => {
-    const o = e.target.value;
-    h(o), R?.(e, o);
-  }, n = Q({
+    const r = e.target.value;
+    y(r), R?.(e, r);
+  }, l = X({
     alignRight: C,
+    autoGrow: !!n,
     inline: T,
-    isTextarea: a !== void 0,
-    width: M
+    isTextarea: t !== void 0,
+    width: E
   });
-  return /* @__PURE__ */ w(
-    W.div,
+  return /* @__PURE__ */ V(
+    Z.div,
     {
-      className: s(
+      className: u(
         // classes.root,
-        d.FormElement,
-        d.Input,
-        g,
-        n.wrapper,
-        d.FormElementInner
+        h.FormElement,
+        h.Input,
+        I,
+        l.wrapper,
+        h.FormElementInner
       ),
-      "data-testid": t["data-testid"],
+      "data-testid": o["data-testid"],
       ...j,
       children: [
-        I && /* @__PURE__ */ r("div", { className: s(n.addon), children: I }),
-        /* @__PURE__ */ r(
-          z,
+        v && /* @__PURE__ */ a("div", { className: u(l.addon), children: v }),
+        /* @__PURE__ */ a(
+          K,
           {
             ...O,
-            ...b,
-            className: n.formControl,
-            value: V,
+            ...N,
+            className: l.formControl,
+            value: H,
             onChange: q,
             onFocus: (e) => {
-              N(!0), t?.onFocus?.(e), p.current ? p.current = null : queueMicrotask(() => e.target.select());
+              F(!0), o?.onFocus?.(e), f.current ? f.current = null : queueMicrotask(() => e.target.select());
             },
             onMouseDown: (e) => {
-              t?.onMouseDown?.(e), p.current = !0;
+              o?.onMouseDown?.(e), f.current = !0;
             },
             onBlur: (e) => {
-              N(!1), t?.onBlur?.(e);
+              F(!1), o?.onBlur?.(e);
             },
-            rows: a,
-            ref: c
+            rows: t,
+            ref: s
           }
         ),
-        /* @__PURE__ */ w("div", { className: s(n.internal), children: [
-          l && /* @__PURE__ */ r(
-            J,
+        /* @__PURE__ */ V("div", { className: u(l.internal), children: [
+          d && /* @__PURE__ */ a(
+            L,
             {
-              screenreaderText: l === !0 ? "loading" : l
+              screenreaderText: d === !0 ? "loading" : d
             }
           ),
-          y && P && /* @__PURE__ */ r(
-            Z,
+          x && P && /* @__PURE__ */ a(
+            te,
             {
               onClick: k,
               onMouseDown: (e) => e.preventDefault(),
@@ -134,12 +144,12 @@ const _ = ({ rows: a, ...f }, S) => {
             }
           )
         ] }),
-        u && /* @__PURE__ */ r("div", { className: s(n.addon), children: u })
+        p && /* @__PURE__ */ a("div", { className: u(l.addon), children: p })
       ]
     }
   );
-}, $ = A(_);
-$.displayName = "IressInput";
+}, ne = U(oe);
+ne.displayName = "IressInput";
 export {
-  $ as IressInput
+  ne as IressInput
 };

package/dist/components/Input/Input.styles.d.ts

@@ -6,6 +6,13 @@ export declare const input: import('../../styled-system/types').SlotRecipeRuntim
             };
         };
     };
+    autoGrow: {
+        true: {
+            formControl: {
+                resize: "none";
+            };
+        };
+    };
     inline: {
         true: {
             wrapper: {
@@ -18,6 +25,7 @@ export declare const input: import('../../styled-system/types').SlotRecipeRuntim
             formControl: {
                 lineHeight: number;
                 height: "auto";
+                scrollable: "y";
             };
         };
     };

package/dist/components/Input/Input.styles.js

@@ -3,6 +3,8 @@ const o = r({
   slots: ["root", "wrapper", "inline", "addon", "internal", "formControl"],
   base: {
     wrapper: {
+      // Performance: CSS containment limits style recalculation scope
+      contain: "layout style paint",
       display: "flex",
       alignItems: "stretch",
       borderRadius: "radius.system.form",
@@ -88,6 +90,13 @@ const o = r({
         }
       }
     },
+    autoGrow: {
+      true: {
+        formControl: {
+          resize: "none"
+        }
+      }
+    },
     inline: {
       true: {
         wrapper: {
@@ -99,7 +108,8 @@ const o = r({
       true: {
         formControl: {
           lineHeight: 1.5,
-          height: "auto"
+          height: "auto",
+          scrollable: "y"
         }
       }
     },

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

@@ -21,7 +21,6 @@ export declare const modal: import('../../styled-system/types').SlotRecipeRuntim
             content: {
                 flex: "[1]";
                 overflowX: "hidden";
-                scrollable: "y";
                 maxHeight: "[calc(100vh - ({spacing.spacing.7} * 2))]";
                 '@media (min-height: 600px)': {
                     maxHeight: "[calc(100vh - (100px * 2))]";