@5ive-souls/controls 0.0.7 → 0.0.8

package/dist/chunk-3-BsGkNFUP.js

@@ -0,0 +1,13 @@
+import { c as l } from "./createFluentIcon-CwLxkjIW.js";
+const e = /* @__PURE__ */ l("Checkmark32Filled", "32", ["M29.9 5.14c.48.5.46 1.3-.04 1.77l-19 18a1.25 1.25 0 0 1-1.77-.06L2.34 17.6a1.25 1.25 0 0 1 1.82-1.7l5.9 6.33L28.14 5.09c.5-.47 1.3-.45 1.77.05Z"]), o = /* @__PURE__ */ l("ChevronDoubleDown20Regular", "20", ["M15.85 8.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 9.35a.5.5 0 1 1 .7-.7L10 13.8l5.15-5.16c.2-.2.5-.2.7 0Zm0-4c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 5.35a.5.5 0 1 1 .7-.7L10 9.8l5.15-5.16c.2-.2.5-.2.7 0Z"]), c = /* @__PURE__ */ l("ChevronDoubleLeft20Regular", "20", ["M11.35 15.85a.5.5 0 0 1-.7 0L5.16 10.4a.55.55 0 0 1 0-.78l5.49-5.46a.5.5 0 1 1 .7.7L6.2 10l5.16 5.15c.2.2.2.5 0 .7Zm4 0a.5.5 0 0 1-.7 0L9.16 10.4a.55.55 0 0 1 0-.78l5.49-5.46a.5.5 0 1 1 .7.7L10.2 10l5.16 5.15c.2.2.2.5 0 .7Z"]), n = /* @__PURE__ */ l("ChevronDoubleRight20Regular", "20", ["M8.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L13.8 10 8.65 4.85a.5.5 0 0 1 0-.7Zm-4 0c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L9.8 10 4.65 4.85a.5.5 0 0 1 0-.7Z"]), r = /* @__PURE__ */ l("ChevronDoubleUp20Regular", "20", ["M4.15 9.65a.5.5 0 0 0 .7.7L10 5.2l5.15 5.16a.5.5 0 1 0 .7-.7L10.4 4.16a.55.55 0 0 0-.78 0L4.15 9.65Zm0 5a.5.5 0 0 0 .7.7L10 10.2l5.15 5.16a.5.5 0 1 0 .7-.7L10.4 9.16a.55.55 0 0 0-.78 0l-5.46 5.49Z"]), L = /* @__PURE__ */ l("ChevronDown16Filled", "16", ["M3.2 5.74a.75.75 0 0 1 1.06-.04L8 9.23l3.74-3.53a.75.75 0 1 1 1.02 1.1l-4.25 4a.75.75 0 0 1-1.02 0l-4.25-4a.75.75 0 0 1-.04-1.06Z"]), h = /* @__PURE__ */ l("ChevronLeft32Filled", "32", ["M20.88 5.37c.5.48.5 1.28 0 1.76L12.02 16l8.86 8.87a1.25 1.25 0 0 1-1.76 1.76l-9.75-9.75a1.25 1.25 0 0 1 0-1.76l9.75-9.75a1.25 1.25 0 0 1 1.76 0Z"]), t = /* @__PURE__ */ l("ChevronRight32Filled", "32", ["M11.12 26.63a1.25 1.25 0 0 1 0-1.76L19.98 16l-8.86-8.87a1.25 1.25 0 0 1 1.76-1.76l9.75 9.75c.5.48.5 1.28 0 1.76l-9.75 9.75c-.48.5-1.28.5-1.76 0Z"]), s = /* @__PURE__ */ l("ChevronUp16Filled", "16", ["M3.2 10.26c.28.3.76.32 1.06.04L8 6.77l3.74 3.53a.75.75 0 1 0 1.02-1.1l-4.25-4a.75.75 0 0 0-1.02 0l-4.25 4a.75.75 0 0 0-.04 1.06Z"]);
+export {
+  h as C,
+  t as a,
+  e as b,
+  L as c,
+  s as d,
+  c as e,
+  n as f,
+  r as g,
+  o as h
+};

package/dist/components/EventCalender/MonthPicker.js

@@ -6,7 +6,7 @@ import { FlexBoxItem as d } from "../FlexBox/FlexBoxItem/FlexBoxItem.js";
 import "../FlexBox/FlexBoxItemResizer/FlexBoxItemResizer.js";
 import { eventCalenderContext as z } from "./Context/EventCalenderContext.js";
 import { U as u, m as C } from "../../Utilities-C0PUcYTL.js";
-import { c as x, d as D } from "../../chunk-3-CMb_cR4A.js";
+import { c as x, d as D } from "../../chunk-3-BsGkNFUP.js";
 const B = b({
   root: {
     backgroundColor: h.colorNeutralBackground1,

package/dist/components/EventCalender/YearPicker.js

@@ -5,7 +5,7 @@ import "../FlexBox/FlexBoxItem/FlexBoxItem.js";
 import "../FlexBox/FlexBoxItemResizer/FlexBoxItemResizer.js";
 import { eventCalenderContext as p } from "./Context/EventCalenderContext.js";
 import { Button as n, Text as c } from "@fluentui/react-components";
-import { d as m, c as s } from "../../chunk-3-CMb_cR4A.js";
+import { d as m, c as s } from "../../chunk-3-BsGkNFUP.js";
 const v = () => {
   const e = t.useContext(p), r = t.useCallback((a) => {
     e.setDate(new Date(a, e.month, 1));

package/dist/components/Grid/ResizableGridCell/ResizableGridCell.js

@@ -1,48 +1,48 @@
-import { jsx as u, jsxs as y } from "react/jsx-runtime";
-import { makeStyles as k, tokens as l, mergeClasses as g } from "@fluentui/react-components";
+import { jsx as u, jsxs as k } from "react/jsx-runtime";
+import { makeStyles as y, tokens as s, mergeClasses as g } from "@fluentui/react-components";
 import { FlexBox as B } from "../../FlexBox/FlexBox.js";
-import { FlexBoxItem as N } from "../../FlexBox/FlexBoxItem/FlexBoxItem.js";
+import { FlexBoxItem as M } from "../../FlexBox/FlexBoxItem/FlexBoxItem.js";
 import "../../FlexBox/FlexBoxItemResizer/FlexBoxItemResizer.js";
-import { GridCell as M } from "../GridCell/GridCell.js";
+import { GridCell as N } from "../GridCell/GridCell.js";
 import { ClassNames as H } from "../../ClassNames.js";
 import S, { useRef as P } from "react";
 import { ResizeUtils as z } from "../../FlexBox/ResizeUtils.js";
 import { GridContext as U } from "../GridContext.js";
-const D = k({
+const D = y({
   root: {
-    backgroundColor: l.colorBrandBackground,
-    borderRadius: l.borderRadiusMedium,
+    backgroundColor: s.colorBrandBackground,
+    borderRadius: s.borderRadiusMedium,
     ":hover": {
-      backgroundColor: l.colorBrandBackgroundHover
+      backgroundColor: s.colorBrandBackgroundHover
     }
   },
   vertical: {
     cursor: "row-resize",
-    height: l.spacingVerticalXS
+    height: s.spacingVerticalXS
   },
   horizontal: {
     cursor: "col-resize",
-    width: l.spacingHorizontalXS
+    width: s.spacingHorizontalXS
   }
 }), E = (e) => {
-  const { horizontal: t, className: h, gap: x, column: C, row: w, id: G } = e, c = D(), d = P(null), [n, f] = S.useState(), p = S.useContext(U), R = (i) => {
-    const r = d.current, a = r.parentElement.parentElement, o = a.parentElement;
-    o && o.classList.add("unselectable"), f({
+  const { horizontal: t, className: h, gap: x, column: C, row: w, id: G } = e, c = D(), d = P(null), [n, p] = S.useState(), f = S.useContext(U), R = (i) => {
+    const r = d.current, l = r.parentElement.parentElement, o = l.parentElement;
+    o && o.classList.add("unselectable"), p({
       resizer: r,
-      gridCell: a,
+      gridCell: l,
       grid: o
     }), r.setPointerCapture(i.pointerId);
   }, v = (i) => {
     if (!n)
       return;
-    const { grid: r, gridCell: a } = n, o = t ? C : w, m = z.GetGridTemplate(r, a, t, o) + z.GetMouseDelta(i, t), s = t ? p.columns[o - 1] : p.rows[o - 1];
-    console.log(JSON.stringify(s, null, 4)), !(s.max && m > s.max) && (s.min && m < s.min || z.UpdateLayoutGrid(r, t, o, m + "px"));
+    const { grid: r, gridCell: l } = n, o = t ? C : w, m = z.GetGridTemplate(r, l, t, o) + z.GetMouseDelta(i, t), a = t ? f.columns[o - 1] : f.rows[o - 1];
+    a.max && m > a.max || a.min && m < a.min || z.UpdateLayoutGrid(r, t, o, m + "px");
   }, b = (i) => {
     const r = d.current;
-    n && n.grid && n.grid.classList.remove("unselectable"), r.releasePointerCapture(i.pointerId), f(void 0);
+    n && n.grid && n.grid.classList.remove("unselectable"), r.releasePointerCapture(i.pointerId), p(void 0);
   };
   return /* @__PURE__ */ u(
-    M,
+    N,
     {
       id: G,
       column: e.column,
@@ -50,8 +50,8 @@ const D = k({
       row: e.row,
       rowSpan: e.rowSpan,
       className: g(H.GridCellResizer, h),
-      children: /* @__PURE__ */ y(B, { horizontal: e.horizontal, fill: !0, childrenGap: x, children: [
-        /* @__PURE__ */ u(N, { grow: 1, style: e.style, children: e.children }),
+      children: /* @__PURE__ */ k(B, { horizontal: e.horizontal, fill: !0, childrenGap: x, children: [
+        /* @__PURE__ */ u(M, { grow: 1, style: e.style, children: e.children }),
         /* @__PURE__ */ u(
           "div",
           {

package/dist/components/Section/Section.js

@@ -1,14 +1,15 @@
-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 { jsxs as Z, jsx as x } from "react/jsx-runtime";
+import { makeStyles as Te, tokens as B, mergeClasses as V, Button as be, Divider as xe, Spinner as we } from "@fluentui/react-components";
+import * as m from "react";
+import re from "react";
+import { FlexBox as oe } from "../FlexBox/FlexBox.js";
+import { FlexBoxItem as G } from "../FlexBox/FlexBoxItem/FlexBoxItem.js";
 import "../FlexBox/FlexBoxItemResizer/FlexBoxItemResizer.js";
-import { ClassNames as Z } from "../ClassNames.js";
-import { SectionUtils as oe } from "./SectionUtils.js";
-import { e as Pe, f as we } from "../../chunk-3-CMb_cR4A.js";
-const Ne = {
+import { ClassNames as q } from "../ClassNames.js";
+import { SectionUtils as ie } from "./SectionUtils.js";
+import { ResizeUtils as Pe } from "../FlexBox/ResizeUtils.js";
+import { e as Ae, f as Ie, g as Ne, h as _e } from "../../chunk-3-BsGkNFUP.js";
+const ze = {
   durationUltraFast: 50,
   durationFaster: 100,
   durationFast: 150,
@@ -17,7 +18,7 @@ const Ne = {
   durationSlow: 300,
   durationSlower: 400,
   durationUltraSlow: 500
-}, Ie = {
+}, ke = {
   curveAccelerateMax: "cubic-bezier(0.9,0.1,1,0.2)",
   curveAccelerateMid: "cubic-bezier(1,0,1,1)",
   curveAccelerateMin: "cubic-bezier(0.8,0,0.78,1)",
@@ -27,51 +28,51 @@ const Ne = {
   curveEasyEaseMax: "cubic-bezier(0.8,0,0.2,1)",
   curveEasyEase: "cubic-bezier(0.33,0,0.67,1)",
   curveLinear: "cubic-bezier(0,0,1,1)"
-}, x = {
-  ...Ne,
-  ...Ie
-}, ue = f.createContext(void 0), _e = {
+}, A = {
+  ...ze,
+  ...ke
+}, le = m.createContext(void 0), De = {
   // 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 ke() {
+le.Provider;
+function Oe() {
   var e;
-  return (e = f.useContext(ue)) !== null && e !== void 0 ? e : _e;
+  return (e = m.useContext(le)) !== null && e !== void 0 ? e : De;
 }
-function Oe() {
+function $e() {
   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 = Oe() ? f.useLayoutEffect : f.useEffect, J = (e) => {
-  const r = f.useRef(() => {
+const W = $e() ? m.useLayoutEffect : m.useEffect, J = (e) => {
+  const r = m.useRef(() => {
     throw new Error("Cannot call an event handler while rendering");
   });
-  return G(() => {
+  return W(() => {
     r.current = e;
   }, [
     e
-  ]), f.useCallback((...n) => {
+  ]), m.useCallback((...n) => {
     const o = r.current;
     return o(...n);
   }, [
     r
   ]);
 };
-function De() {
-  const e = f.useRef(!0);
+function Le() {
+  const e = m.useRef(!0);
   return e.current ? (e.current = !1, !0) : e.current;
 }
-function ze() {
-  return f.useReducer((e) => e + 1, 0)[1];
+function Be() {
+  return m.useReducer((e) => e + 1, 0)[1];
 }
-function $e(...e) {
+function Ue(...e) {
   "use no memo";
-  const r = f.useCallback(
+  const r = m.useCallback(
     (n) => {
       r.current = n;
       for (const o of e)
@@ -84,7 +85,7 @@ function $e(...e) {
   );
   return r;
 }
-function Le(e) {
+function Fe(e) {
   if (e.playState === "running") {
     var r;
     if (e.overallProgress !== void 0) {
@@ -100,32 +101,32 @@ function Le(e) {
   }
   return !1;
 }
-const Be = {
+const Ye = {
   fill: "forwards"
-}, Fe = {
+}, Ve = {
   duration: 1
 };
-function le() {
+function de() {
   var e;
   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) => {
+  return m.useCallback((n, o, i) => {
     const u = Array.isArray(o) ? o : [
       o
     ], { 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,
+      const { keyframes: h, reducedMotion: p = Ve, ...f } = c, { keyframes: S = h, ...C } = p, y = d ? S : h, w = {
+        ...Ye,
+        ...f,
         // Use reduced motion overrides (e.g. duration, easing) when reduced motion is enabled
-        ...d && y
+        ...d && C
       };
       try {
-        const s = n.animate(b, M);
+        const s = n.animate(y, w);
         if (r)
           s == null || s.persist();
         else {
-          const R = b[b.length - 1];
-          var T;
-          Object.assign((T = n.style) !== null && T !== void 0 ? T : {}, R);
+          const R = y[y.length - 1];
+          var b;
+          Object.assign((b = n.style) !== null && b !== void 0 ? b : {}, R);
         }
         return s;
       } catch {
@@ -134,22 +135,22 @@ function le() {
     }).filter((c) => !!c);
     return {
       set playbackRate(c) {
-        l.forEach((m) => {
-          m.playbackRate = c;
+        l.forEach((h) => {
+          h.playbackRate = c;
         });
       },
-      setMotionEndCallbacks(c, m) {
-        const p = l.map((v) => new Promise((C, y) => {
-          v.onfinish = () => C(), v.oncancel = () => y();
+      setMotionEndCallbacks(c, h) {
+        const p = l.map((f) => new Promise((S, C) => {
+          f.onfinish = () => S(), f.oncancel = () => C();
         }));
         Promise.all(p).then(() => {
           c();
         }).catch(() => {
-          m();
+          h();
         });
       },
       isRunning() {
-        return l.some((c) => Le(c));
+        return l.some((c) => Fe(c));
       },
       cancel: () => {
         l.forEach((c) => {
@@ -181,18 +182,18 @@ function le() {
     r
   ]);
 }
-function Ye() {
-  const [e, r] = f.useState(0), n = f.useRef(), o = le();
-  return f.useEffect(() => {
+function Ge() {
+  const [e, r] = m.useState(0), n = m.useRef(), o = de();
+  return m.useEffect(() => {
     if (e > 0) {
       var i;
       (i = n.current) === null || i === void 0 || i.call(n);
     }
   }, [
     e
-  ]), f.useCallback((i, u, d) => typeof i.animate == "function" ? o(i, u, d) : {
+  ]), m.useCallback((i, u, d) => typeof i.animate == "function" ? o(i, u, d) : {
     setMotionEndCallbacks(c) {
-      n.current = c, r((m) => m + 1);
+      n.current = c, r((h) => h + 1);
     },
     set playbackRate(c) {
     },
@@ -213,13 +214,13 @@ function Ye() {
     o
   ]);
 }
-function Ue() {
+function He() {
   "use no memo";
-  return process.env.NODE_ENV === "test" ? Ye() : le();
+  return process.env.NODE_ENV === "test" ? Ge() : de();
 }
-function Ve(e) {
-  const r = f.useRef();
-  return f.useImperativeHandle(e, () => ({
+function je(e) {
+  const r = m.useRef();
+  return m.useImperativeHandle(e, () => ({
     setPlayState: (n) => {
       if (n === "running") {
         var o;
@@ -235,15 +236,15 @@ function Ve(e) {
     }
   })), r;
 }
-const je = "screen and (prefers-reduced-motion: reduce)";
-function qe() {
-  const { targetDocument: e } = ke();
+const qe = "screen and (prefers-reduced-motion: reduce)";
+function We() {
+  const { targetDocument: e } = Oe();
   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(() => {
+  const n = (r = e == null ? void 0 : e.defaultView) !== null && r !== void 0 ? r : null, o = m.useRef(!1), i = m.useCallback(() => o.current, []);
+  return W(() => {
     if (n === null || typeof n.matchMedia != "function")
       return;
-    const u = n.matchMedia(je);
+    const u = n.matchMedia(qe);
     u.matches && (o.current = !0);
     const d = (l) => {
       o.current = l.matches;
@@ -255,7 +256,7 @@ function qe() {
     n
   ]), i;
 }
-var ee = { exports: {} }, E = {};
+var ee = { exports: {} }, v = {};
 /** @license React v17.0.2
 * react-is.production.min.js
 *
@@ -264,76 +265,76 @@ var ee = { exports: {} }, E = {};
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
-var ie;
-function Ge() {
-  if (ie) return E;
-  ie = 1;
-  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;
+var ae;
+function Ke() {
+  if (ae) return v;
+  ae = 1;
+  var e = 60103, r = 60106, n = 60107, o = 60108, i = 60114, u = 60109, d = 60110, l = 60112, c = 60113, h = 60120, p = 60115, f = 60116, S = 60121, C = 60122, y = 60117, w = 60129, b = 60131;
   if (typeof Symbol == "function" && Symbol.for) {
     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");
+    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"), h = s("react.suspense_list"), p = s("react.memo"), f = s("react.lazy"), S = s("react.block"), C = s("react.server.block"), y = s("react.fundamental"), w = s("react.debug_trace_mode"), b = s("react.legacy_hidden");
   }
   function R(t) {
     if (typeof t == "object" && t !== null) {
-      var S = t.$$typeof;
-      switch (S) {
+      var g = t.$$typeof;
+      switch (g) {
         case e:
           switch (t = t.type, t) {
             case n:
             case i:
             case o:
             case c:
-            case m:
+            case h:
               return t;
             default:
               switch (t = t && t.$$typeof, t) {
                 case d:
                 case l:
-                case v:
+                case f:
                 case p:
                 case u:
                   return t;
                 default:
-                  return S;
+                  return g;
               }
           }
         case r:
-          return S;
+          return g;
       }
     }
   }
-  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() {
+  var T = u, M = e, O = l, P = n, N = f, _ = p, z = r, k = i, D = o, I = c;
+  return v.ContextConsumer = d, v.ContextProvider = T, v.Element = M, v.ForwardRef = O, v.Fragment = P, v.Lazy = N, v.Memo = _, v.Portal = z, v.Profiler = k, v.StrictMode = D, v.Suspense = I, v.isAsyncMode = function() {
     return !1;
-  }, E.isConcurrentMode = function() {
+  }, v.isConcurrentMode = function() {
     return !1;
-  }, E.isContextConsumer = function(t) {
+  }, v.isContextConsumer = function(t) {
     return R(t) === d;
-  }, E.isContextProvider = function(t) {
+  }, v.isContextProvider = function(t) {
     return R(t) === u;
-  }, E.isElement = function(t) {
+  }, v.isElement = function(t) {
     return typeof t == "object" && t !== null && t.$$typeof === e;
-  }, E.isForwardRef = function(t) {
+  }, v.isForwardRef = function(t) {
     return R(t) === l;
-  }, E.isFragment = function(t) {
+  }, v.isFragment = function(t) {
     return R(t) === n;
-  }, E.isLazy = function(t) {
-    return R(t) === v;
-  }, E.isMemo = function(t) {
+  }, v.isLazy = function(t) {
+    return R(t) === f;
+  }, v.isMemo = function(t) {
     return R(t) === p;
-  }, E.isPortal = function(t) {
+  }, v.isPortal = function(t) {
     return R(t) === r;
-  }, E.isProfiler = function(t) {
+  }, v.isProfiler = function(t) {
     return R(t) === i;
-  }, E.isStrictMode = function(t) {
+  }, v.isStrictMode = function(t) {
     return R(t) === o;
-  }, E.isSuspense = function(t) {
+  }, v.isSuspense = function(t) {
     return R(t) === c;
-  }, E.isValidElementType = function(t) {
-    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;
+  }, v.isValidElementType = function(t) {
+    return typeof t == "string" || typeof t == "function" || t === n || t === i || t === w || t === o || t === c || t === h || t === b || typeof t == "object" && t !== null && (t.$$typeof === f || t.$$typeof === p || t.$$typeof === u || t.$$typeof === d || t.$$typeof === l || t.$$typeof === y || t.$$typeof === S || t[0] === C);
+  }, v.typeOf = R, v;
 }
-var h = {};
+var E = {};
 /** @license React v17.0.2
 * react-is.development.js
 *
@@ -342,22 +343,22 @@ var h = {};
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
-var ae;
-function We() {
-  return ae || (ae = 1, process.env.NODE_ENV !== "production" && function() {
-    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;
+var se;
+function Xe() {
+  return se || (se = 1, process.env.NODE_ENV !== "production" && function() {
+    var e = 60103, r = 60106, n = 60107, o = 60108, i = 60114, u = 60109, d = 60110, l = 60112, c = 60113, h = 60120, p = 60115, f = 60116, S = 60121, C = 60122, y = 60117, w = 60129, b = 60131;
     if (typeof Symbol == "function" && Symbol.for) {
       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");
+      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"), h = s("react.suspense_list"), p = s("react.memo"), f = s("react.lazy"), S = s("react.block"), C = s("react.server.block"), y = s("react.fundamental"), s("react.scope"), s("react.opaque.id"), w = s("react.debug_trace_mode"), s("react.offscreen"), b = s("react.legacy_hidden");
     }
     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 T(a) {
+      return !!(typeof a == "string" || typeof a == "function" || a === n || a === i || a === w || a === o || a === c || a === h || a === b || R || typeof a == "object" && a !== null && (a.$$typeof === f || a.$$typeof === p || a.$$typeof === u || a.$$typeof === d || a.$$typeof === l || a.$$typeof === y || a.$$typeof === S || a[0] === C));
     }
-    function g(a) {
+    function M(a) {
       if (typeof a == "object" && a !== null) {
-        var X = a.$$typeof;
-        switch (X) {
+        var Q = a.$$typeof;
+        switch (Q) {
           case e:
             var j = a.type;
             switch (j) {
@@ -365,75 +366,75 @@ function We() {
               case i:
               case o:
               case c:
-              case m:
+              case h:
                 return j;
               default:
                 var ne = j && j.$$typeof;
                 switch (ne) {
                   case d:
                   case l:
-                  case v:
+                  case f:
                   case p:
                   case u:
                     return ne;
                   default:
-                    return X;
+                    return Q;
                 }
             }
           case r:
-            return X;
+            return Q;
         }
       }
     }
-    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;
+    var O = d, P = u, N = e, _ = l, z = n, k = f, D = p, I = r, t = i, g = o, $ = c, L = !1, U = !1;
+    function F(a) {
+      return L || (L = !0, console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 18+.")), !1;
     }
     function Y(a) {
-      return F || (F = !0, console.warn("The ReactIs.isConcurrentMode() alias has been deprecated, and will be removed in React 18+.")), !1;
+      return U || (U = !0, console.warn("The ReactIs.isConcurrentMode() alias has been deprecated, and will be removed in React 18+.")), !1;
     }
-    function V(a) {
-      return g(a) === d;
+    function H(a) {
+      return M(a) === d;
     }
-    function K(a) {
-      return g(a) === u;
-    }
-    function pe(a) {
-      return typeof a == "object" && a !== null && a.$$typeof === e;
+    function X(a) {
+      return M(a) === u;
     }
     function ve(a) {
-      return g(a) === l;
+      return typeof a == "object" && a !== null && a.$$typeof === e;
     }
     function Ee(a) {
-      return g(a) === n;
+      return M(a) === l;
     }
     function he(a) {
-      return g(a) === v;
+      return M(a) === n;
+    }
+    function Re(a) {
+      return M(a) === f;
     }
     function Ce(a) {
-      return g(a) === p;
+      return M(a) === p;
     }
-    function Re(a) {
-      return g(a) === r;
+    function ge(a) {
+      return M(a) === r;
     }
     function Se(a) {
-      return g(a) === i;
+      return M(a) === i;
     }
     function ye(a) {
-      return g(a) === o;
+      return M(a) === o;
     }
     function Me(a) {
-      return g(a) === c;
+      return M(a) === c;
     }
-    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;
+    E.ContextConsumer = O, E.ContextProvider = P, E.Element = N, E.ForwardRef = _, E.Fragment = z, E.Lazy = k, E.Memo = D, E.Portal = I, E.Profiler = t, E.StrictMode = g, E.Suspense = $, E.isAsyncMode = F, E.isConcurrentMode = Y, E.isContextConsumer = H, E.isContextProvider = X, E.isElement = ve, E.isForwardRef = Ee, E.isFragment = he, E.isLazy = Re, E.isMemo = Ce, E.isPortal = ge, E.isProfiler = Se, E.isStrictMode = ye, E.isSuspense = Me, E.isValidElementType = T, E.typeOf = M;
+  }()), E;
 }
-process.env.NODE_ENV === "production" ? ee.exports = Ge() : ee.exports = We();
-var He = ee.exports;
-function Ke(e) {
+process.env.NODE_ENV === "production" ? ee.exports = Ke() : ee.exports = Xe();
+var Qe = ee.exports;
+function Ze(e) {
   try {
-    const r = f.Children.only(e);
-    if (typeof r.type == "string" || He.isForwardRef(r))
+    const r = m.Children.only(e);
+    if (typeof r.type == "string" || Qe.isForwardRef(r))
       return r;
   } catch {
   }
@@ -445,104 +446,104 @@ function Ke(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 = f.createContext(void 0);
-de.Provider;
-const Xe = () => {
+const fe = m.createContext(void 0);
+fe.Provider;
+const Je = () => {
   var e;
-  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) => {
+  return (e = m.useContext(fe)) !== null && e !== void 0 ? e : "default";
+}, et = m.createContext(void 0);
+function tt(e = !1, r = !1) {
+  const n = m.useRef(r ? e : !0), o = Be(), i = m.useCallback((u) => {
     n.current !== u && (n.current = u, o());
   }, [
     o
   ]);
-  return f.useEffect(() => {
+  return m.useEffect(() => {
     e && (n.current = e);
   }), [
     e || n.current,
     i
   ];
 }
-const Je = Symbol("MOTION_DEFINITION"), et = Symbol.for("interruptablePresence");
-function W(e) {
+const nt = Symbol("MOTION_DEFINITION"), rt = Symbol.for("interruptablePresence");
+function K(e) {
   return Object.assign((r) => {
     "use no memo";
     const o = {
-      ...f.useContext(Qe),
+      ...m.useContext(et),
       ...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({
+    }, i = Je() === "skip", { appear: u, children: d, imperativeRef: l, onExit: c, onMotionFinish: h, onMotionStart: p, onMotionCancel: f, visible: S, unmountOnExit: C, ...y } = o, w = y, [b, s] = tt(S, C), R = Ze(d), T = je(l), M = m.useRef(), O = Ue(M, R.ref), P = m.useRef({
       appear: u,
-      params: M,
+      params: w,
       skipMotions: i
-    }), I = Ue(), L = De(), _ = qe(), k = J((t) => {
+    }), N = He(), _ = Le(), z = We(), k = J((t) => {
       p == null || p(null, {
         direction: 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, {
+      h == null || h(null, {
+        direction: t
+      }), t === "exit" && C && (s(!1), c == null || c());
+    }), I = J((t) => {
+      f == null || f(null, {
         direction: t
       });
     });
-    return G(() => {
-      w.current = {
+    return W(() => {
+      P.current = {
         appear: u,
-        params: M,
+        params: w,
         skipMotions: i
       };
-    }), G(
+    }), W(
       () => {
-        const t = g.current;
+        const t = M.current;
         if (!t)
           return;
-        let S;
-        function B() {
-          S && (F && S.isRunning() || (S.cancel(), A.current = void 0));
+        let g;
+        function $() {
+          g && (U && g.isRunning() || (g.cancel(), T.current = void 0));
         }
-        const z = typeof e == "function" ? e({
+        const L = typeof e == "function" ? e({
           element: t,
-          ...w.current.params
-        }) : 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), S = I(t, H, {
-          isReducedMotion: _()
-        }), V ? (S.finish(), B) : (A.current = S, S.setMotionEndCallbacks(() => O(Y), () => D(Y)), K && S.finish(), B);
+          ...P.current.params
+        }) : e, U = L[rt];
+        if (U && (g = T.current, g && g.isRunning()))
+          return g.reverse(), $;
+        const F = S ? L.enter : L.exit, Y = S ? "enter" : "exit", H = !P.current.appear && _, X = P.current.skipMotions;
+        return H || k(Y), g = N(t, F, {
+          isReducedMotion: z()
+        }), H ? (g.finish(), $) : (T.current = g, g.setMotionEndCallbacks(() => D(Y), () => I(Y)), X && g.finish(), $);
       },
       // Excluding `isFirstMount` from deps to prevent re-triggering the animation on subsequent renders
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [
-        I,
-        A,
-        _,
-        O,
-        k,
+        N,
+        T,
+        z,
         D,
-        C
+        k,
+        I,
+        S
       ]
-    ), T ? f.cloneElement(R, {
-      ref: $
+    ), b ? m.cloneElement(R, {
+      ref: O
     }) : null;
   }, {
     // Heads up!
     // Always normalize it to a function to simplify types
-    [Je]: typeof e == "function" ? e : () => e
+    [nt]: typeof e == "function" ? e : () => e
   });
 }
-const fe = (e, r) => {
+const me = (e, r) => {
   const n = e === "horizontal" ? "maxWidth" : "maxHeight", o = e === "horizontal" ? "overflowX" : "overflowY", u = `${e === "horizontal" ? r.scrollWidth : r.scrollHeight}px`;
   return {
     sizeName: n,
     overflowName: o,
     toSize: u
   };
-}, tt = ({ orientation: e, duration: r, easing: n, element: o, fromSize: i = "0" }) => {
-  const { sizeName: u, overflowName: d, toSize: l } = fe(e, o);
+}, ot = ({ orientation: e, duration: r, easing: n, element: o, fromSize: i = "0" }) => {
+  const { sizeName: u, overflowName: d, toSize: l } = me(e, o);
   return {
     keyframes: [
       {
@@ -562,8 +563,8 @@ const fe = (e, r) => {
     duration: r,
     easing: n
   };
-}, 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);
+}, it = ({ orientation: e, duration: r, easing: n, element: o, delay: i = 0, fromSize: u = "0" }) => {
+  const { sizeName: d, overflowName: l, toSize: c } = me(e, o);
   return {
     keyframes: [
       {
@@ -580,7 +581,7 @@ const fe = (e, r) => {
     fill: "both",
     delay: i
   };
-}, rt = (e) => e === "horizontal" ? {
+}, at = (e) => e === "horizontal" ? {
   paddingStart: "paddingInlineStart",
   paddingEnd: "paddingInlineEnd",
   marginStart: "marginInlineStart",
@@ -590,23 +591,23 @@ const fe = (e, r) => {
   paddingEnd: "paddingBlockEnd",
   marginStart: "marginBlockStart",
   marginEnd: "marginBlockEnd"
-}, 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 = {
+}, ce = ({ direction: e, orientation: r, duration: n, easing: o, delay: i = 0 }) => {
+  const { paddingStart: u, paddingEnd: d, marginStart: l, marginEnd: c } = at(r), h = e === "enter" ? 0 : 1, f = {
     keyframes: [
       {
         [u]: "0",
         [d]: "0",
         [l]: "0",
         [c]: "0",
-        offset: m
+        offset: h
       }
     ],
     duration: n,
     easing: o,
     delay: i
   };
-  return e === "exit" && (v.fill = "forwards"), v;
-}, ce = ({ direction: e, duration: r, easing: n = x.curveLinear, fromValue: o = 0 }) => {
+  return e === "exit" && (f.fill = "forwards"), f;
+}, ue = ({ direction: e, duration: r, easing: n = A.curveLinear, fromValue: o = 0 }) => {
   const i = [
     {
       opacity: o
@@ -620,34 +621,34 @@ const fe = (e, r) => {
     duration: r,
     easing: n
   };
-}, me = ({
+}, pe = ({
   // enter
-  enterSizeDuration: e = x.durationNormal,
+  enterSizeDuration: e = A.durationNormal,
   enterOpacityDuration: r = e,
-  enterEasing: n = x.curveEasyEaseMax,
+  enterEasing: n = A.curveEasyEaseMax,
   enterDelay: o = 0,
   // exit: durations and easing default to enter values for symmetry
   exitSizeDuration: i = e,
   exitOpacityDuration: u = r,
   exitEasing: d = n,
   exitDelay: l = 0
-} = {}) => ({ element: c, animateOpacity: m = !0, orientation: p = "vertical" }) => {
-  const v = [
-    tt({
+} = {}) => ({ element: c, animateOpacity: h = !0, orientation: p = "vertical" }) => {
+  const f = [
+    ot({
       orientation: p,
       duration: e,
       easing: n,
       element: c
     }),
-    se({
+    ce({
       direction: "enter",
       orientation: p,
       duration: e,
       easing: n
     })
   ];
-  m && v.push({
-    ...ce({
+  h && f.push({
+    ...ue({
       direction: "enter",
       duration: r,
       easing: n
@@ -655,66 +656,66 @@ const fe = (e, r) => {
     delay: o,
     fill: "both"
   });
-  const C = [];
-  return m && C.push(ce({
+  const S = [];
+  return h && S.push(ue({
     direction: "exit",
     duration: u,
     easing: d
-  })), C.push(nt({
+  })), S.push(it({
     orientation: p,
     duration: i,
     easing: d,
     element: c,
     delay: l
-  }), se({
+  }), ce({
     direction: "exit",
     orientation: p,
     duration: i,
     easing: d,
     delay: l
   })), {
-    enter: v,
-    exit: C
+    enter: f,
+    exit: S
   };
-}, te = ({ enterDuration: e = x.durationNormal, enterEasing: r = x.curveEasyEaseMax, exitDuration: n = e, exitEasing: o = r } = {}) => (
+}, te = ({ enterDuration: e = A.durationNormal, enterEasing: r = A.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({
+  pe({
     enterSizeDuration: e,
     enterEasing: r,
     exitSizeDuration: n,
     exitEasing: o
   })
-), ot = W(te());
-W(te({
-  enterDuration: x.durationFast
+), st = K(te());
+K(te({
+  enterDuration: A.durationFast
 }));
-W(te({
-  enterDuration: x.durationSlower
+K(te({
+  enterDuration: A.durationSlower
 }));
-W(me({
-  enterSizeDuration: x.durationNormal,
-  enterOpacityDuration: x.durationSlower,
-  enterDelay: x.durationNormal,
-  exitDelay: x.durationSlower,
-  enterEasing: x.curveEasyEase
+K(pe({
+  enterSizeDuration: A.durationNormal,
+  enterOpacityDuration: A.durationSlower,
+  enterDelay: A.durationNormal,
+  exitDelay: A.durationSlower,
+  enterEasing: A.curveEasyEase
 }));
-const it = ge({
+const ct = Te({
   root: {
-    backgroundColor: N.colorNeutralBackground1,
+    backgroundColor: B.colorNeutralBackground1,
     boxSizing: "border-box",
     overflow: "hidden"
   },
   default: {
-    border: "1px solid " + N.colorNeutralForeground1,
-    borderRadius: N.borderRadiusMedium,
-    boxShadow: N.shadow16Brand,
-    transitionDuration: N.durationNormal,
+    border: "1px solid " + B.colorNeutralForeground1,
+    borderRadius: B.borderRadiusMedium,
+    boxShadow: B.shadow16Brand,
+    transitionDuration: B.durationNormal,
     transitionTimingFunction: "ease",
     transitionProperty: "box-shadow, border",
     ":hover": {
-      boxShadow: N.shadow28Brand,
-      border: "1px solid " + N.colorBrandForeground2Hover
+      boxShadow: B.shadow28Brand,
+      border: "1px solid " + B.colorBrandForeground2Hover
     }
   },
   divider: {
@@ -729,31 +730,48 @@ const it = ge({
   },
   spinner: {
     height: "100%"
+  },
+  collapsedHorizontalHeader: {
+    writingMode: "vertical-rl",
+    whiteSpace: "nowrap",
+    height: "100%"
   }
-}), 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);
-      } }) })
+}), ut = (e) => {
+  var _;
+  const { children: r, icon: n, header: o, collapsible: i, collapseDirection: u, className: d, fill: l, ref: c, id: h, appearance: p, isBusy: f, isBusyMessage: S } = e, C = ct(), [y, w] = re.useState(!0), [b, s] = re.useState();
+  let R = V(q.Section, C.root, d);
+  (l || (_ = e.cellProps) != null && _.resizable) && (R = V(R, C.fill)), (p == null || p == "default") && (R = V(R, C.default));
+  const T = ie.buildSectionStyles(e), M = ie.buildSectionContentStyles(e);
+  y || (e.collapseDirection == "horizontal" ? (T.height = "100%", T.width = "50px", T.maxWidth = "50px") : T.height = "fit-content");
+  const O = u == "horizontal" ? y ? /* @__PURE__ */ x(Ae, {}) : /* @__PURE__ */ x(Ie, {}) : y ? /* @__PURE__ */ x(Ne, {}) : /* @__PURE__ */ x(_e, {});
+  let P = q.SectionHeader;
+  e.collapseDirection == "horizontal" && (y || (P = V(P, C.collapsedHorizontalHeader)));
+  const N = (z) => {
+    if (e.cellProps) {
+      const { column: k, row: D } = e.cellProps, I = u == "horizontal", t = z.currentTarget.closest("." + q.Grid), g = I ? k : D;
+      if (y) {
+        const F = (I ? t.style.gridTemplateColumns : t.style.gridTemplateRows).split(" ")[g - 1];
+        s(F);
+      }
+      const $ = y ? "min-content" : b;
+      Pe.UpdateLayoutGrid(t, I, g, $);
+    }
+    w(!y);
+  };
+  return /* @__PURE__ */ Z(oe, { id: h, className: R, style: T, ref: c, role: e.role, children: [
+    /* @__PURE__ */ x(G, { className: P, children: /* @__PURE__ */ Z(oe, { fill: !0, alignItems: "center", horizontal: !0, children: [
+      n && /* @__PURE__ */ x(G, { padding: 8, children: n }),
+      /* @__PURE__ */ x(G, { grow: 1, children: o && o }),
+      i && /* @__PURE__ */ x(G, { children: /* @__PURE__ */ x(be, { appearance: "transparent", icon: O, onClick: 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" })
+    (n || o || i) && /* @__PURE__ */ x(xe, { className: C.divider }),
+    /* @__PURE__ */ x(G, { className: q.SectionContent, grow: 1, style: M, children: /* @__PURE__ */ x(st, { visible: y, children: /* @__PURE__ */ Z("div", { className: V(C.fill, C.content), children: [
+      !f && r,
+      f && /* @__PURE__ */ x(we, { className: C.spinner, label: S, labelPosition: "below" })
     ] }) }) })
   ] });
 };
-at.displayName = "Section";
+ut.displayName = "Section";
 export {
-  at as Section
+  ut as Section
 };

package/dist/components/Wizard/Wizard.js

@@ -6,7 +6,7 @@ import { FlexBox as f } from "../FlexBox/FlexBox.js";
 import { FlexBoxItem as m } from "../FlexBox/FlexBoxItem/FlexBoxItem.js";
 import "../FlexBox/FlexBoxItemResizer/FlexBoxItemResizer.js";
 import { Section as H } from "../Section/Section.js";
-import { C as J, a as K, b as M } from "../../chunk-3-CMb_cR4A.js";
+import { C as J, a as K, b as M } from "../../chunk-3-BsGkNFUP.js";
 const O = A({
   root: {
     height: "100%",

package/dist/main.d.ts

@@ -451,6 +451,10 @@ export declare interface ISectionProps extends IComponentProps {
      * Determines if the section can be collapsed hiding it's content.
      */
     collapsible?: boolean;
+    /**
+     *
+     */
+    collapseDirection?: "vertical" | "horizontal";
     /**
      * Applies styling to have the section consume 100% of it's parent's height and width.
      */
@@ -594,7 +598,7 @@ declare interface IWizardStrings {
 export declare const JumpList: <T extends object>(props: IJumpListProps<T>) => JSX_2.Element;
 
 /**
- * The `ResizableGridCell` component can be used in place of the `GridCell` compoent to allow the user to resize the row or column the cell resides it.
+ * The `ResizableGridCell` component can be used in place of the `GridCell` component to allow the user to resize the row or column the cell resides it.
  * By default this allows the row to be resized. This can be changed by setting the `horizontal` property to true.
  *
  * > At this time there is no way to define a Min or Max size for a row or column.

package/package.json

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

package/dist/chunk-3-CMb_cR4A.js

@@ -1,11 +0,0 @@
-import { c as l } from "./createFluentIcon-CwLxkjIW.js";
-const e = /* @__PURE__ */ l("Checkmark32Filled", "32", ["M29.9 5.14c.48.5.46 1.3-.04 1.77l-19 18a1.25 1.25 0 0 1-1.77-.06L2.34 17.6a1.25 1.25 0 0 1 1.82-1.7l5.9 6.33L28.14 5.09c.5-.47 1.3-.45 1.77.05Z"]), o = /* @__PURE__ */ l("ChevronDoubleDown20Regular", "20", ["M15.85 8.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 9.35a.5.5 0 1 1 .7-.7L10 13.8l5.15-5.16c.2-.2.5-.2.7 0Zm0-4c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 5.35a.5.5 0 1 1 .7-.7L10 9.8l5.15-5.16c.2-.2.5-.2.7 0Z"]), n = /* @__PURE__ */ l("ChevronDoubleUp20Regular", "20", ["M4.15 9.65a.5.5 0 0 0 .7.7L10 5.2l5.15 5.16a.5.5 0 1 0 .7-.7L10.4 4.16a.55.55 0 0 0-.78 0L4.15 9.65Zm0 5a.5.5 0 0 0 .7.7L10 10.2l5.15 5.16a.5.5 0 1 0 .7-.7L10.4 9.16a.55.55 0 0 0-.78 0l-5.46 5.49Z"]), c = /* @__PURE__ */ l("ChevronDown16Filled", "16", ["M3.2 5.74a.75.75 0 0 1 1.06-.04L8 9.23l3.74-3.53a.75.75 0 1 1 1.02 1.1l-4.25 4a.75.75 0 0 1-1.02 0l-4.25-4a.75.75 0 0 1-.04-1.06Z"]), r = /* @__PURE__ */ l("ChevronLeft32Filled", "32", ["M20.88 5.37c.5.48.5 1.28 0 1.76L12.02 16l8.86 8.87a1.25 1.25 0 0 1-1.76 1.76l-9.75-9.75a1.25 1.25 0 0 1 0-1.76l9.75-9.75a1.25 1.25 0 0 1 1.76 0Z"]), L = /* @__PURE__ */ l("ChevronRight32Filled", "32", ["M11.12 26.63a1.25 1.25 0 0 1 0-1.76L19.98 16l-8.86-8.87a1.25 1.25 0 0 1 1.76-1.76l9.75 9.75c.5.48.5 1.28 0 1.76l-9.75 9.75c-.48.5-1.28.5-1.76 0Z"]), h = /* @__PURE__ */ l("ChevronUp16Filled", "16", ["M3.2 10.26c.28.3.76.32 1.06.04L8 6.77l3.74 3.53a.75.75 0 1 0 1.02-1.1l-4.25-4a.75.75 0 0 0-1.02 0l-4.25 4a.75.75 0 0 0-.04 1.06Z"]);
-export {
-  r as C,
-  L as a,
-  e as b,
-  c,
-  h as d,
-  n as e,
-  o as f
-};