@5ive-souls/controls 0.0.4 → 0.0.6

package/dist/components/FlexBox/FlexBoxItem/FlexBoxItem.js

@@ -8,7 +8,7 @@ const n = i({
   }
 }), b = (e) => {
   const { className: o, ref: s, id: t } = e, l = n(), m = a.buildFlexBoxItemStyles(e);
-  return /* @__PURE__ */ r("div", { id: t, className: x(c.FlexBoxItem, l.root, o), style: m, ref: s, ...e, children: e.children });
+  return /* @__PURE__ */ r("div", { id: t, className: x(c.FlexBoxItem, l.root, o), ...e, ref: s, style: m, children: e.children });
 };
 export {
   b as FlexBoxItem

package/dist/components/Section/Section.js

@@ -1,14 +1,14 @@
-import { jsxs as re, jsx as A } from "react/jsx-runtime";
-import { makeStyles as ge, tokens as I, mergeClasses as q, Button as Te, Divider as be } from "@fluentui/react-components";
-import * as p from "react";
-import xe from "react";
-import { FlexBox as ne } from "../FlexBox/FlexBox.js";
+import { jsxs as Q, jsx as P } from "react/jsx-runtime";
+import { makeStyles as ge, tokens as N, mergeClasses as q, Button as Te, Divider as be, Spinner as xe } from "@fluentui/react-components";
+import * as f from "react";
+import Ae from "react";
+import { FlexBox as re } from "../FlexBox/FlexBox.js";
 import { FlexBoxItem as U } from "../FlexBox/FlexBoxItem/FlexBoxItem.js";
 import "../FlexBox/FlexBoxItemResizer/FlexBoxItemResizer.js";
-import { ClassNames as Q } from "../ClassNames.js";
+import { ClassNames as Z } from "../ClassNames.js";
 import { SectionUtils as oe } from "./SectionUtils.js";
-import { e as Ae, f as Pe } from "../../chunk-3-CMb_cR4A.js";
-const we = {
+import { e as Pe, f as we } from "../../chunk-3-CMb_cR4A.js";
+const Ne = {
   durationUltraFast: 50,
   durationFaster: 100,
   durationFast: 150,
@@ -28,173 +28,173 @@ const we = {
   curveEasyEase: "cubic-bezier(0.33,0,0.67,1)",
   curveLinear: "cubic-bezier(0,0,1,1)"
 }, x = {
-  ...we,
+  ...Ne,
   ...Ie
-}, ue = p.createContext(void 0), Ne = {
+}, ue = f.createContext(void 0), _e = {
   // eslint-disable-next-line @nx/workspace-no-restricted-globals -- expected ignore ( SSR friendly acquisition of globals )
   targetDocument: typeof document == "object" ? document : void 0,
   dir: "ltr"
 };
 ue.Provider;
-function _e() {
+function ke() {
   var e;
-  return (e = p.useContext(ue)) !== null && e !== void 0 ? e : Ne;
+  return (e = f.useContext(ue)) !== null && e !== void 0 ? e : _e;
 }
-function ke() {
+function Oe() {
   return (
     /* eslint-disable @nx/workspace-no-restricted-globals -- expected ignore ( SSR friendly acquisition of globals )*/
     typeof window < "u" && !!(window.document && // eslint-disable-next-line @typescript-eslint/no-deprecated
     window.document.createElement)
   );
 }
-const G = ke() ? p.useLayoutEffect : p.useEffect, Z = (e) => {
-  const n = p.useRef(() => {
+const G = Oe() ? f.useLayoutEffect : f.useEffect, J = (e) => {
+  const r = f.useRef(() => {
     throw new Error("Cannot call an event handler while rendering");
   });
   return G(() => {
-    n.current = e;
+    r.current = e;
   }, [
     e
-  ]), p.useCallback((...r) => {
-    const o = n.current;
-    return o(...r);
+  ]), f.useCallback((...n) => {
+    const o = r.current;
+    return o(...n);
   }, [
-    n
+    r
   ]);
 };
-function Oe() {
-  const e = p.useRef(!0);
+function De() {
+  const e = f.useRef(!0);
   return e.current ? (e.current = !1, !0) : e.current;
 }
-function De() {
-  return p.useReducer((e) => e + 1, 0)[1];
+function ze() {
+  return f.useReducer((e) => e + 1, 0)[1];
 }
-function ze(...e) {
+function $e(...e) {
   "use no memo";
-  const n = p.useCallback(
-    (r) => {
-      n.current = r;
+  const r = f.useCallback(
+    (n) => {
+      r.current = n;
       for (const o of e)
-        typeof o == "function" ? o(r) : o && (o.current = r);
+        typeof o == "function" ? o(n) : o && (o.current = n);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps -- already exhaustive
     [
       ...e
     ]
   );
-  return n;
+  return r;
 }
-function $e(e) {
+function Le(e) {
   if (e.playState === "running") {
-    var n;
+    var r;
     if (e.overallProgress !== void 0) {
-      var r;
-      const l = (r = e.overallProgress) !== null && r !== void 0 ? r : 0;
+      var n;
+      const l = (n = e.overallProgress) !== null && n !== void 0 ? n : 0;
       return l > 0 && l < 1;
     }
     var o;
     const u = Number((o = e.currentTime) !== null && o !== void 0 ? o : 0);
     var i;
-    const d = Number((i = (n = e.effect) === null || n === void 0 ? void 0 : n.getTiming().duration) !== null && i !== void 0 ? i : 0);
+    const d = Number((i = (r = e.effect) === null || r === void 0 ? void 0 : r.getTiming().duration) !== null && i !== void 0 ? i : 0);
     return u > 0 && u < d;
   }
   return !1;
 }
-const Le = {
+const Be = {
   fill: "forwards"
-}, Be = {
+}, Fe = {
   duration: 1
 };
 function le() {
   var e;
-  const n = typeof window < "u" && typeof ((e = window.Animation) === null || e === void 0 ? void 0 : e.prototype.persist) == "function";
-  return p.useCallback((r, o, i) => {
+  const r = typeof window < "u" && typeof ((e = window.Animation) === null || e === void 0 ? void 0 : e.prototype.persist) == "function";
+  return f.useCallback((n, o, i) => {
     const u = Array.isArray(o) ? o : [
       o
-    ], { isReducedMotion: d } = i, l = u.map((s) => {
-      const { keyframes: v, reducedMotion: f = Be, ...m } = s, { keyframes: C = v, ...R } = f, g = d ? C : v, b = {
-        ...Le,
-        ...m,
+    ], { isReducedMotion: d } = i, l = u.map((c) => {
+      const { keyframes: m, reducedMotion: p = Fe, ...v } = c, { keyframes: C = m, ...y } = p, b = d ? C : m, M = {
+        ...Be,
+        ...v,
         // Use reduced motion overrides (e.g. duration, easing) when reduced motion is enabled
-        ...d && R
+        ...d && y
       };
       try {
-        const c = r.animate(g, b);
-        if (n)
-          c == null || c.persist();
+        const s = n.animate(b, M);
+        if (r)
+          s == null || s.persist();
         else {
-          const S = g[g.length - 1];
+          const R = b[b.length - 1];
           var T;
-          Object.assign((T = r.style) !== null && T !== void 0 ? T : {}, S);
+          Object.assign((T = n.style) !== null && T !== void 0 ? T : {}, R);
         }
-        return c;
+        return s;
       } catch {
         return null;
       }
-    }).filter((s) => !!s);
+    }).filter((c) => !!c);
     return {
-      set playbackRate(s) {
-        l.forEach((v) => {
-          v.playbackRate = s;
+      set playbackRate(c) {
+        l.forEach((m) => {
+          m.playbackRate = c;
         });
       },
-      setMotionEndCallbacks(s, v) {
-        const f = l.map((m) => new Promise((C, R) => {
-          m.onfinish = () => C(), m.oncancel = () => R();
+      setMotionEndCallbacks(c, m) {
+        const p = l.map((v) => new Promise((C, y) => {
+          v.onfinish = () => C(), v.oncancel = () => y();
         }));
-        Promise.all(f).then(() => {
-          s();
+        Promise.all(p).then(() => {
+          c();
         }).catch(() => {
-          v();
+          m();
         });
       },
       isRunning() {
-        return l.some((s) => $e(s));
+        return l.some((c) => Le(c));
       },
       cancel: () => {
-        l.forEach((s) => {
-          s.cancel();
+        l.forEach((c) => {
+          c.cancel();
         });
       },
       pause: () => {
-        l.forEach((s) => {
-          s.pause();
+        l.forEach((c) => {
+          c.pause();
         });
       },
       play: () => {
-        l.forEach((s) => {
-          s.play();
+        l.forEach((c) => {
+          c.play();
         });
       },
       finish: () => {
-        l.forEach((s) => {
-          s.finish();
+        l.forEach((c) => {
+          c.finish();
         });
       },
       reverse: () => {
-        l.forEach((s) => {
-          s.reverse();
+        l.forEach((c) => {
+          c.reverse();
         });
       }
     };
   }, [
-    n
+    r
   ]);
 }
-function Fe() {
-  const [e, n] = p.useState(0), r = p.useRef(), o = le();
-  return p.useEffect(() => {
+function Ye() {
+  const [e, r] = f.useState(0), n = f.useRef(), o = le();
+  return f.useEffect(() => {
     if (e > 0) {
       var i;
-      (i = r.current) === null || i === void 0 || i.call(r);
+      (i = n.current) === null || i === void 0 || i.call(n);
     }
   }, [
     e
-  ]), p.useCallback((i, u, d) => typeof i.animate == "function" ? o(i, u, d) : {
-    setMotionEndCallbacks(s) {
-      r.current = s, n((v) => v + 1);
+  ]), f.useCallback((i, u, d) => typeof i.animate == "function" ? o(i, u, d) : {
+    setMotionEndCallbacks(c) {
+      n.current = c, r((m) => m + 1);
     },
-    set playbackRate(s) {
+    set playbackRate(c) {
     },
     isRunning() {
       return !1;
@@ -213,37 +213,37 @@ function Fe() {
     o
   ]);
 }
-function Ye() {
+function Ue() {
   "use no memo";
-  return process.env.NODE_ENV === "test" ? Fe() : le();
+  return process.env.NODE_ENV === "test" ? Ye() : le();
 }
-function Ue(e) {
-  const n = p.useRef();
-  return p.useImperativeHandle(e, () => ({
-    setPlayState: (r) => {
-      if (r === "running") {
+function Ve(e) {
+  const r = f.useRef();
+  return f.useImperativeHandle(e, () => ({
+    setPlayState: (n) => {
+      if (n === "running") {
         var o;
-        (o = n.current) === null || o === void 0 || o.play();
+        (o = r.current) === null || o === void 0 || o.play();
       }
-      if (r === "paused") {
+      if (n === "paused") {
         var i;
-        (i = n.current) === null || i === void 0 || i.pause();
+        (i = r.current) === null || i === void 0 || i.pause();
       }
     },
-    setPlaybackRate: (r) => {
-      n.current && (n.current.playbackRate = r);
+    setPlaybackRate: (n) => {
+      r.current && (r.current.playbackRate = n);
     }
-  })), n;
+  })), r;
 }
-const Ve = "screen and (prefers-reduced-motion: reduce)";
-function je() {
-  const { targetDocument: e } = _e();
-  var n;
-  const r = (n = e == null ? void 0 : e.defaultView) !== null && n !== void 0 ? n : null, o = p.useRef(!1), i = p.useCallback(() => o.current, []);
+const je = "screen and (prefers-reduced-motion: reduce)";
+function qe() {
+  const { targetDocument: e } = ke();
+  var r;
+  const n = (r = e == null ? void 0 : e.defaultView) !== null && r !== void 0 ? r : null, o = f.useRef(!1), i = f.useCallback(() => o.current, []);
   return G(() => {
-    if (r === null || typeof r.matchMedia != "function")
+    if (n === null || typeof n.matchMedia != "function")
       return;
-    const u = r.matchMedia(Ve);
+    const u = n.matchMedia(je);
     u.matches && (o.current = !0);
     const d = (l) => {
       o.current = l.matches;
@@ -252,10 +252,10 @@ function je() {
       u.removeEventListener("change", d);
     };
   }, [
-    r
+    n
   ]), i;
 }
-var J = { exports: {} }, E = {};
+var ee = { exports: {} }, E = {};
 /** @license React v17.0.2
 * react-is.production.min.js
 *
@@ -265,73 +265,73 @@ var J = { exports: {} }, E = {};
 * LICENSE file in the root directory of this source tree.
 */
 var ie;
-function qe() {
+function Ge() {
   if (ie) return E;
   ie = 1;
-  var e = 60103, n = 60106, r = 60107, o = 60108, i = 60114, u = 60109, d = 60110, l = 60112, s = 60113, v = 60120, f = 60115, m = 60116, C = 60121, R = 60122, g = 60117, b = 60129, T = 60131;
+  var e = 60103, r = 60106, n = 60107, o = 60108, i = 60114, u = 60109, d = 60110, l = 60112, c = 60113, m = 60120, p = 60115, v = 60116, C = 60121, y = 60122, b = 60117, M = 60129, T = 60131;
   if (typeof Symbol == "function" && Symbol.for) {
-    var c = Symbol.for;
-    e = c("react.element"), n = c("react.portal"), r = c("react.fragment"), o = c("react.strict_mode"), i = c("react.profiler"), u = c("react.provider"), d = c("react.context"), l = c("react.forward_ref"), s = c("react.suspense"), v = c("react.suspense_list"), f = c("react.memo"), m = c("react.lazy"), C = c("react.block"), R = c("react.server.block"), g = c("react.fundamental"), b = c("react.debug_trace_mode"), T = c("react.legacy_hidden");
+    var s = Symbol.for;
+    e = s("react.element"), r = s("react.portal"), n = s("react.fragment"), o = s("react.strict_mode"), i = s("react.profiler"), u = s("react.provider"), d = s("react.context"), l = s("react.forward_ref"), c = s("react.suspense"), m = s("react.suspense_list"), p = s("react.memo"), v = s("react.lazy"), C = s("react.block"), y = s("react.server.block"), b = s("react.fundamental"), M = s("react.debug_trace_mode"), T = s("react.legacy_hidden");
   }
-  function S(t) {
+  function R(t) {
     if (typeof t == "object" && t !== null) {
-      var y = t.$$typeof;
-      switch (y) {
+      var S = t.$$typeof;
+      switch (S) {
         case e:
           switch (t = t.type, t) {
-            case r:
+            case n:
             case i:
             case o:
-            case s:
-            case v:
+            case c:
+            case m:
               return t;
             default:
               switch (t = t && t.$$typeof, t) {
                 case d:
                 case l:
-                case m:
-                case f:
+                case v:
+                case p:
                 case u:
                   return t;
                 default:
-                  return y;
+                  return S;
               }
           }
-        case n:
-          return y;
+        case r:
+          return S;
       }
     }
   }
-  var P = u, M = e, $ = l, w = r, N = m, L = f, _ = n, k = i, O = o, D = s;
-  return E.ContextConsumer = d, E.ContextProvider = P, E.Element = M, E.ForwardRef = $, E.Fragment = w, E.Lazy = N, E.Memo = L, E.Portal = _, E.Profiler = k, E.StrictMode = O, E.Suspense = D, E.isAsyncMode = function() {
+  var A = u, g = e, $ = l, w = n, I = v, L = p, _ = r, k = i, O = o, D = c;
+  return E.ContextConsumer = d, E.ContextProvider = A, E.Element = g, E.ForwardRef = $, E.Fragment = w, E.Lazy = I, E.Memo = L, E.Portal = _, E.Profiler = k, E.StrictMode = O, E.Suspense = D, E.isAsyncMode = function() {
     return !1;
   }, E.isConcurrentMode = function() {
     return !1;
   }, E.isContextConsumer = function(t) {
-    return S(t) === d;
+    return R(t) === d;
   }, E.isContextProvider = function(t) {
-    return S(t) === u;
+    return R(t) === u;
   }, E.isElement = function(t) {
     return typeof t == "object" && t !== null && t.$$typeof === e;
   }, E.isForwardRef = function(t) {
-    return S(t) === l;
+    return R(t) === l;
   }, E.isFragment = function(t) {
-    return S(t) === r;
+    return R(t) === n;
   }, E.isLazy = function(t) {
-    return S(t) === m;
+    return R(t) === v;
   }, E.isMemo = function(t) {
-    return S(t) === f;
+    return R(t) === p;
   }, E.isPortal = function(t) {
-    return S(t) === n;
+    return R(t) === r;
   }, E.isProfiler = function(t) {
-    return S(t) === i;
+    return R(t) === i;
   }, E.isStrictMode = function(t) {
-    return S(t) === o;
+    return R(t) === o;
   }, E.isSuspense = function(t) {
-    return S(t) === s;
+    return R(t) === c;
   }, E.isValidElementType = function(t) {
-    return typeof t == "string" || typeof t == "function" || t === r || t === i || t === b || t === o || t === s || t === v || t === T || typeof t == "object" && t !== null && (t.$$typeof === m || t.$$typeof === f || t.$$typeof === u || t.$$typeof === d || t.$$typeof === l || t.$$typeof === g || t.$$typeof === C || t[0] === R);
-  }, E.typeOf = S, E;
+    return typeof t == "string" || typeof t == "function" || t === n || t === i || t === M || t === o || t === c || t === m || t === T || typeof t == "object" && t !== null && (t.$$typeof === v || t.$$typeof === p || t.$$typeof === u || t.$$typeof === d || t.$$typeof === l || t.$$typeof === b || t.$$typeof === C || t[0] === y);
+  }, E.typeOf = R, E;
 }
 var h = {};
 /** @license React v17.0.2
@@ -343,49 +343,49 @@ var h = {};
 * LICENSE file in the root directory of this source tree.
 */
 var ae;
-function Ge() {
+function We() {
   return ae || (ae = 1, process.env.NODE_ENV !== "production" && function() {
-    var e = 60103, n = 60106, r = 60107, o = 60108, i = 60114, u = 60109, d = 60110, l = 60112, s = 60113, v = 60120, f = 60115, m = 60116, C = 60121, R = 60122, g = 60117, b = 60129, T = 60131;
+    var e = 60103, r = 60106, n = 60107, o = 60108, i = 60114, u = 60109, d = 60110, l = 60112, c = 60113, m = 60120, p = 60115, v = 60116, C = 60121, y = 60122, b = 60117, M = 60129, T = 60131;
     if (typeof Symbol == "function" && Symbol.for) {
-      var c = Symbol.for;
-      e = c("react.element"), n = c("react.portal"), r = c("react.fragment"), o = c("react.strict_mode"), i = c("react.profiler"), u = c("react.provider"), d = c("react.context"), l = c("react.forward_ref"), s = c("react.suspense"), v = c("react.suspense_list"), f = c("react.memo"), m = c("react.lazy"), C = c("react.block"), R = c("react.server.block"), g = c("react.fundamental"), c("react.scope"), c("react.opaque.id"), b = c("react.debug_trace_mode"), c("react.offscreen"), T = c("react.legacy_hidden");
+      var s = Symbol.for;
+      e = s("react.element"), r = s("react.portal"), n = s("react.fragment"), o = s("react.strict_mode"), i = s("react.profiler"), u = s("react.provider"), d = s("react.context"), l = s("react.forward_ref"), c = s("react.suspense"), m = s("react.suspense_list"), p = s("react.memo"), v = s("react.lazy"), C = s("react.block"), y = s("react.server.block"), b = s("react.fundamental"), s("react.scope"), s("react.opaque.id"), M = s("react.debug_trace_mode"), s("react.offscreen"), T = s("react.legacy_hidden");
     }
-    var S = !1;
-    function P(a) {
-      return !!(typeof a == "string" || typeof a == "function" || a === r || a === i || a === b || a === o || a === s || a === v || a === T || S || typeof a == "object" && a !== null && (a.$$typeof === m || a.$$typeof === f || a.$$typeof === u || a.$$typeof === d || a.$$typeof === l || a.$$typeof === g || a.$$typeof === C || a[0] === R));
+    var R = !1;
+    function A(a) {
+      return !!(typeof a == "string" || typeof a == "function" || a === n || a === i || a === M || a === o || a === c || a === m || a === T || R || typeof a == "object" && a !== null && (a.$$typeof === v || a.$$typeof === p || a.$$typeof === u || a.$$typeof === d || a.$$typeof === l || a.$$typeof === b || a.$$typeof === C || a[0] === y));
     }
-    function M(a) {
+    function g(a) {
       if (typeof a == "object" && a !== null) {
         var X = a.$$typeof;
         switch (X) {
           case e:
             var j = a.type;
             switch (j) {
-              case r:
+              case n:
               case i:
               case o:
-              case s:
-              case v:
+              case c:
+              case m:
                 return j;
               default:
-                var te = j && j.$$typeof;
-                switch (te) {
+                var ne = j && j.$$typeof;
+                switch (ne) {
                   case d:
                   case l:
-                  case m:
-                  case f:
+                  case v:
+                  case p:
                   case u:
-                    return te;
+                    return ne;
                   default:
                     return X;
                 }
             }
-          case n:
+          case r:
             return X;
         }
       }
     }
-    var $ = d, w = u, N = e, L = l, _ = r, k = m, O = f, D = n, t = i, y = o, B = s, z = !1, F = !1;
+    var $ = d, w = u, I = e, L = l, _ = n, k = v, O = p, D = r, t = i, S = o, B = c, z = !1, F = !1;
     function H(a) {
       return z || (z = !0, console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 18+.")), !1;
     }
@@ -393,48 +393,48 @@ function Ge() {
       return F || (F = !0, console.warn("The ReactIs.isConcurrentMode() alias has been deprecated, and will be removed in React 18+.")), !1;
     }
     function V(a) {
-      return M(a) === d;
+      return g(a) === d;
     }
     function K(a) {
-      return M(a) === u;
+      return g(a) === u;
     }
     function pe(a) {
       return typeof a == "object" && a !== null && a.$$typeof === e;
     }
     function ve(a) {
-      return M(a) === l;
+      return g(a) === l;
     }
     function Ee(a) {
-      return M(a) === r;
+      return g(a) === n;
     }
     function he(a) {
-      return M(a) === m;
+      return g(a) === v;
     }
     function Ce(a) {
-      return M(a) === f;
+      return g(a) === p;
     }
     function Re(a) {
-      return M(a) === n;
+      return g(a) === r;
     }
     function Se(a) {
-      return M(a) === i;
+      return g(a) === i;
     }
     function ye(a) {
-      return M(a) === o;
+      return g(a) === o;
     }
     function Me(a) {
-      return M(a) === s;
+      return g(a) === c;
     }
-    h.ContextConsumer = $, h.ContextProvider = w, h.Element = N, h.ForwardRef = L, h.Fragment = _, h.Lazy = k, h.Memo = O, h.Portal = D, h.Profiler = t, h.StrictMode = y, h.Suspense = B, h.isAsyncMode = H, h.isConcurrentMode = Y, h.isContextConsumer = V, h.isContextProvider = K, h.isElement = pe, h.isForwardRef = ve, h.isFragment = Ee, h.isLazy = he, h.isMemo = Ce, h.isPortal = Re, h.isProfiler = Se, h.isStrictMode = ye, h.isSuspense = Me, h.isValidElementType = P, h.typeOf = M;
+    h.ContextConsumer = $, h.ContextProvider = w, h.Element = I, h.ForwardRef = L, h.Fragment = _, h.Lazy = k, h.Memo = O, h.Portal = D, h.Profiler = t, h.StrictMode = S, h.Suspense = B, h.isAsyncMode = H, h.isConcurrentMode = Y, h.isContextConsumer = V, h.isContextProvider = K, h.isElement = pe, h.isForwardRef = ve, h.isFragment = Ee, h.isLazy = he, h.isMemo = Ce, h.isPortal = Re, h.isProfiler = Se, h.isStrictMode = ye, h.isSuspense = Me, h.isValidElementType = A, h.typeOf = g;
   }()), h;
 }
-process.env.NODE_ENV === "production" ? J.exports = qe() : J.exports = Ge();
-var We = J.exports;
-function He(e) {
+process.env.NODE_ENV === "production" ? ee.exports = Ge() : ee.exports = We();
+var He = ee.exports;
+function Ke(e) {
   try {
-    const n = p.Children.only(e);
-    if (typeof n.type == "string" || We.isForwardRef(n))
-      return n;
+    const r = f.Children.only(e);
+    if (typeof r.type == "string" || He.isForwardRef(r))
+      return r;
   } catch {
   }
   throw new Error([
@@ -445,103 +445,103 @@ function He(e) {
     "That element element should support ref forwarding i.e. it should be either an intrinsic element (e.g. div) or a component that uses React.forwardRef()."
   ].join(""));
 }
-const de = p.createContext(void 0);
+const de = f.createContext(void 0);
 de.Provider;
-const Ke = () => {
+const Xe = () => {
   var e;
-  return (e = p.useContext(de)) !== null && e !== void 0 ? e : "default";
-}, Xe = p.createContext(void 0);
-function Qe(e = !1, n = !1) {
-  const r = p.useRef(n ? e : !0), o = De(), i = p.useCallback((u) => {
-    r.current !== u && (r.current = u, o());
+  return (e = f.useContext(de)) !== null && e !== void 0 ? e : "default";
+}, Qe = f.createContext(void 0);
+function Ze(e = !1, r = !1) {
+  const n = f.useRef(r ? e : !0), o = ze(), i = f.useCallback((u) => {
+    n.current !== u && (n.current = u, o());
   }, [
     o
   ]);
-  return p.useEffect(() => {
-    e && (r.current = e);
+  return f.useEffect(() => {
+    e && (n.current = e);
   }), [
-    e || r.current,
+    e || n.current,
     i
   ];
 }
-const Ze = Symbol("MOTION_DEFINITION"), Je = Symbol.for("interruptablePresence");
+const Je = Symbol("MOTION_DEFINITION"), et = Symbol.for("interruptablePresence");
 function W(e) {
-  return Object.assign((n) => {
+  return Object.assign((r) => {
     "use no memo";
     const o = {
-      ...p.useContext(Xe),
-      ...n
-    }, i = Ke() === "skip", { appear: u, children: d, imperativeRef: l, onExit: s, onMotionFinish: v, onMotionStart: f, onMotionCancel: m, visible: C, unmountOnExit: R, ...g } = o, b = g, [T, c] = Qe(C, R), S = He(d), P = Ue(l), M = p.useRef(), $ = ze(M, S.ref), w = p.useRef({
+      ...f.useContext(Qe),
+      ...r
+    }, i = Xe() === "skip", { appear: u, children: d, imperativeRef: l, onExit: c, onMotionFinish: m, onMotionStart: p, onMotionCancel: v, visible: C, unmountOnExit: y, ...b } = o, M = b, [T, s] = Ze(C, y), R = Ke(d), A = Ve(l), g = f.useRef(), $ = $e(g, R.ref), w = f.useRef({
       appear: u,
-      params: b,
+      params: M,
       skipMotions: i
-    }), N = Ye(), L = Oe(), _ = je(), k = Z((t) => {
-      f == null || f(null, {
+    }), I = Ue(), L = De(), _ = qe(), k = J((t) => {
+      p == null || p(null, {
         direction: t
       });
-    }), O = Z((t) => {
-      v == null || v(null, {
-        direction: t
-      }), t === "exit" && R && (c(!1), s == null || s());
-    }), D = Z((t) => {
+    }), O = J((t) => {
       m == null || m(null, {
         direction: t
+      }), t === "exit" && y && (s(!1), c == null || c());
+    }), D = J((t) => {
+      v == null || v(null, {
+        direction: t
       });
     });
     return G(() => {
       w.current = {
         appear: u,
-        params: b,
+        params: M,
         skipMotions: i
       };
     }), G(
       () => {
-        const t = M.current;
+        const t = g.current;
         if (!t)
           return;
-        let y;
+        let S;
         function B() {
-          y && (F && y.isRunning() || (y.cancel(), P.current = void 0));
+          S && (F && S.isRunning() || (S.cancel(), A.current = void 0));
         }
         const z = typeof e == "function" ? e({
           element: t,
           ...w.current.params
-        }) : e, F = z[Je];
-        if (F && (y = P.current, y && y.isRunning()))
-          return y.reverse(), B;
+        }) : e, F = z[et];
+        if (F && (S = A.current, S && S.isRunning()))
+          return S.reverse(), B;
         const H = C ? z.enter : z.exit, Y = C ? "enter" : "exit", V = !w.current.appear && L, K = w.current.skipMotions;
-        return V || k(Y), y = N(t, H, {
+        return V || k(Y), S = I(t, H, {
           isReducedMotion: _()
-        }), V ? (y.finish(), B) : (P.current = y, y.setMotionEndCallbacks(() => O(Y), () => D(Y)), K && y.finish(), B);
+        }), V ? (S.finish(), B) : (A.current = S, S.setMotionEndCallbacks(() => O(Y), () => D(Y)), K && S.finish(), B);
       },
       // Excluding `isFirstMount` from deps to prevent re-triggering the animation on subsequent renders
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [
-        N,
-        P,
+        I,
+        A,
         _,
         O,
         k,
         D,
         C
       ]
-    ), T ? p.cloneElement(S, {
+    ), T ? f.cloneElement(R, {
       ref: $
     }) : null;
   }, {
     // Heads up!
     // Always normalize it to a function to simplify types
-    [Ze]: typeof e == "function" ? e : () => e
+    [Je]: typeof e == "function" ? e : () => e
   });
 }
-const fe = (e, n) => {
-  const r = e === "horizontal" ? "maxWidth" : "maxHeight", o = e === "horizontal" ? "overflowX" : "overflowY", u = `${e === "horizontal" ? n.scrollWidth : n.scrollHeight}px`;
+const fe = (e, r) => {
+  const n = e === "horizontal" ? "maxWidth" : "maxHeight", o = e === "horizontal" ? "overflowX" : "overflowY", u = `${e === "horizontal" ? r.scrollWidth : r.scrollHeight}px`;
   return {
-    sizeName: r,
+    sizeName: n,
     overflowName: o,
     toSize: u
   };
-}, et = ({ orientation: e, duration: n, easing: r, element: o, fromSize: i = "0" }) => {
+}, tt = ({ orientation: e, duration: r, easing: n, element: o, fromSize: i = "0" }) => {
   const { sizeName: u, overflowName: d, toSize: l } = fe(e, o);
   return {
     keyframes: [
@@ -559,15 +559,15 @@ const fe = (e, n) => {
         [d]: "unset"
       }
     ],
-    duration: n,
-    easing: r
+    duration: r,
+    easing: n
   };
-}, tt = ({ orientation: e, duration: n, easing: r, element: o, delay: i = 0, fromSize: u = "0" }) => {
-  const { sizeName: d, overflowName: l, toSize: s } = fe(e, o);
+}, nt = ({ orientation: e, duration: r, easing: n, element: o, delay: i = 0, fromSize: u = "0" }) => {
+  const { sizeName: d, overflowName: l, toSize: c } = fe(e, o);
   return {
     keyframes: [
       {
-        [d]: s,
+        [d]: c,
         [l]: "hidden"
       },
       {
@@ -575,8 +575,8 @@ const fe = (e, n) => {
         [l]: "hidden"
       }
     ],
-    duration: n,
-    easing: r,
+    duration: r,
+    easing: n,
     fill: "both",
     delay: i
   };
@@ -590,23 +590,23 @@ const fe = (e, n) => {
   paddingEnd: "paddingBlockEnd",
   marginStart: "marginBlockStart",
   marginEnd: "marginBlockEnd"
-}, ce = ({ direction: e, orientation: n, duration: r, easing: o, delay: i = 0 }) => {
-  const { paddingStart: u, paddingEnd: d, marginStart: l, marginEnd: s } = rt(n), v = e === "enter" ? 0 : 1, m = {
+}, se = ({ direction: e, orientation: r, duration: n, easing: o, delay: i = 0 }) => {
+  const { paddingStart: u, paddingEnd: d, marginStart: l, marginEnd: c } = rt(r), m = e === "enter" ? 0 : 1, v = {
     keyframes: [
       {
         [u]: "0",
         [d]: "0",
         [l]: "0",
-        [s]: "0",
-        offset: v
+        [c]: "0",
+        offset: m
       }
     ],
-    duration: r,
+    duration: n,
     easing: o,
     delay: i
   };
-  return e === "exit" && (m.fill = "forwards"), m;
-}, se = ({ direction: e, duration: n, easing: r = x.curveLinear, fromValue: o = 0 }) => {
+  return e === "exit" && (v.fill = "forwards"), v;
+}, ce = ({ direction: e, duration: r, easing: n = x.curveLinear, fromValue: o = 0 }) => {
   const i = [
     {
       opacity: o
@@ -617,79 +617,79 @@ const fe = (e, n) => {
   ];
   return e === "exit" && i.reverse(), {
     keyframes: i,
-    duration: n,
-    easing: r
+    duration: r,
+    easing: n
   };
 }, me = ({
   // enter
   enterSizeDuration: e = x.durationNormal,
-  enterOpacityDuration: n = e,
-  enterEasing: r = x.curveEasyEaseMax,
+  enterOpacityDuration: r = e,
+  enterEasing: n = x.curveEasyEaseMax,
   enterDelay: o = 0,
   // exit: durations and easing default to enter values for symmetry
   exitSizeDuration: i = e,
-  exitOpacityDuration: u = n,
-  exitEasing: d = r,
+  exitOpacityDuration: u = r,
+  exitEasing: d = n,
   exitDelay: l = 0
-} = {}) => ({ element: s, animateOpacity: v = !0, orientation: f = "vertical" }) => {
-  const m = [
-    et({
-      orientation: f,
+} = {}) => ({ element: c, animateOpacity: m = !0, orientation: p = "vertical" }) => {
+  const v = [
+    tt({
+      orientation: p,
       duration: e,
-      easing: r,
-      element: s
+      easing: n,
+      element: c
     }),
-    ce({
+    se({
       direction: "enter",
-      orientation: f,
+      orientation: p,
       duration: e,
-      easing: r
+      easing: n
     })
   ];
-  v && m.push({
-    ...se({
+  m && v.push({
+    ...ce({
       direction: "enter",
-      duration: n,
-      easing: r
+      duration: r,
+      easing: n
     }),
     delay: o,
     fill: "both"
   });
   const C = [];
-  return v && C.push(se({
+  return m && C.push(ce({
     direction: "exit",
     duration: u,
     easing: d
-  })), C.push(tt({
-    orientation: f,
+  })), C.push(nt({
+    orientation: p,
     duration: i,
     easing: d,
-    element: s,
+    element: c,
     delay: l
-  }), ce({
+  }), se({
     direction: "exit",
-    orientation: f,
+    orientation: p,
     duration: i,
     easing: d,
     delay: l
   })), {
-    enter: m,
+    enter: v,
     exit: C
   };
-}, ee = ({ enterDuration: e = x.durationNormal, enterEasing: n = x.curveEasyEaseMax, exitDuration: r = e, exitEasing: o = n } = {}) => (
+}, te = ({ enterDuration: e = x.durationNormal, enterEasing: r = x.curveEasyEaseMax, exitDuration: n = e, exitEasing: o = r } = {}) => (
   // Implement a regular collapse as a special case of the delayed collapse,
   // where the delays are zero, and the size and opacity durations are equal.
   me({
     enterSizeDuration: e,
-    enterEasing: n,
-    exitSizeDuration: r,
+    enterEasing: r,
+    exitSizeDuration: n,
     exitEasing: o
   })
-), nt = W(ee());
-W(ee({
+), ot = W(te());
+W(te({
   enterDuration: x.durationFast
 }));
-W(ee({
+W(te({
   enterDuration: x.durationSlower
 }));
 W(me({
@@ -699,22 +699,22 @@ W(me({
   exitDelay: x.durationSlower,
   enterEasing: x.curveEasyEase
 }));
-const ot = ge({
+const it = ge({
   root: {
-    backgroundColor: I.colorNeutralBackground1,
+    backgroundColor: N.colorNeutralBackground1,
     boxSizing: "border-box",
     overflow: "hidden"
   },
   default: {
-    border: "1px solid " + I.colorNeutralForeground1,
-    borderRadius: I.borderRadiusMedium,
-    boxShadow: I.shadow16Brand,
-    transitionDuration: I.durationNormal,
+    border: "1px solid " + N.colorNeutralForeground1,
+    borderRadius: N.borderRadiusMedium,
+    boxShadow: N.shadow16Brand,
+    transitionDuration: N.durationNormal,
     transitionTimingFunction: "ease",
     transitionProperty: "box-shadow, border",
     ":hover": {
-      boxShadow: I.shadow28Brand,
-      border: "1px solid " + I.colorBrandForeground2Hover
+      boxShadow: N.shadow28Brand,
+      border: "1px solid " + N.colorBrandForeground2Hover
     }
   },
   divider: {
@@ -726,28 +726,34 @@ const ot = ge({
   },
   content: {
     boxSizing: "border-box"
+  },
+  spinner: {
+    height: "100%"
   }
-}), it = (e) => {
-  var c;
-  const { children: n, icon: r, header: o, collapsible: i, className: u, fill: d, ref: l, id: s, appearance: v } = e, f = ot(), [m, C] = xe.useState(!0);
-  let R = q(Q.Section, f.root, u);
-  (d || (c = e.cellProps) != null && c.resizable) && (R = q(R, f.fill)), (v == null || v == "default") && (R = q(R, f.default));
-  const g = oe.buildSectionStyles(e), b = oe.buildSectionContentStyles(e);
-  m || (g.height = "fit-content");
-  const T = m ? /* @__PURE__ */ A(Ae, {}) : /* @__PURE__ */ A(Pe, {});
-  return /* @__PURE__ */ re(ne, { id: s, className: R, style: g, ref: l, role: e.role, children: [
-    /* @__PURE__ */ A(U, { className: Q.SectionHeader, children: /* @__PURE__ */ re(ne, { fill: !0, horizontal: !0, alignItems: "center", children: [
-      r && /* @__PURE__ */ A(U, { padding: 8, children: r }),
-      /* @__PURE__ */ A(U, { grow: 1, children: o && o }),
-      i && /* @__PURE__ */ A(U, { children: /* @__PURE__ */ A(Te, { appearance: "transparent", icon: T, onClick: () => {
-        C(!m);
+}), at = (e) => {
+  var A;
+  const { children: r, icon: n, header: o, collapsible: i, className: u, fill: d, ref: l, id: c, appearance: m, isBusy: p, isBusyMessage: v } = e, C = it(), [y, b] = Ae.useState(!0);
+  let M = q(Z.Section, C.root, u);
+  (d || (A = e.cellProps) != null && A.resizable) && (M = q(M, C.fill)), (m == null || m == "default") && (M = q(M, C.default));
+  const T = oe.buildSectionStyles(e), s = oe.buildSectionContentStyles(e);
+  y || (T.height = "fit-content");
+  const R = y ? /* @__PURE__ */ P(Pe, {}) : /* @__PURE__ */ P(we, {});
+  return /* @__PURE__ */ Q(re, { id: c, className: M, style: T, ref: l, role: e.role, children: [
+    /* @__PURE__ */ P(U, { className: Z.SectionHeader, children: /* @__PURE__ */ Q(re, { fill: !0, horizontal: !0, alignItems: "center", children: [
+      n && /* @__PURE__ */ P(U, { padding: 8, children: n }),
+      /* @__PURE__ */ P(U, { grow: 1, children: o && o }),
+      i && /* @__PURE__ */ P(U, { children: /* @__PURE__ */ P(Te, { appearance: "transparent", icon: R, onClick: () => {
+        b(!y);
       } }) })
     ] }) }),
-    (r || o || i) && /* @__PURE__ */ A(be, { className: f.divider }),
-    /* @__PURE__ */ A(U, { className: Q.SectionContent, grow: 1, style: b, children: /* @__PURE__ */ A(nt, { visible: m, children: /* @__PURE__ */ A("div", { className: q(f.fill, f.content), children: n }) }) })
+    (n || o || i) && /* @__PURE__ */ P(be, { className: C.divider }),
+    /* @__PURE__ */ P(U, { className: Z.SectionContent, grow: 1, style: s, children: /* @__PURE__ */ P(ot, { visible: y, children: /* @__PURE__ */ Q("div", { className: q(C.fill, C.content), children: [
+      !p && r,
+      p && /* @__PURE__ */ P(xe, { className: C.spinner, label: v, labelPosition: "below" })
+    ] }) }) })
   ] });
 };
-it.displayName = "Section";
+at.displayName = "Section";
 export {
-  it as Section
+  at as Section
 };

package/dist/main.d.ts

@@ -466,9 +466,17 @@ export declare interface ISectionProps extends IComponentProps {
      */
     flexBoxItemProps?: IFlexBoxItemProps;
     /**
-     *
+     * Determines if the section should have default appearance styling applied. Set to false if the section is used for layout purposes and will contain child sections.
      */
     appearance?: "default" | "borderless";
+    /**
+     * When set to true, will indicate a loading state for the section.
+     */
+    isBusy?: boolean;
+    /**
+     * Message to show for screen readers when the section is busy/loading.
+     */
+    isBusyMessage?: string;
 }
 
 export declare interface IThemePickerProps extends IComponentProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@5ive-souls/controls",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Collection of react components built on the Fluent UI framework.",
   "keywords": [
     "react",