@5ive-souls/controls 0.0.1 → 0.0.2

package/dist/components/Grid/Grid.js

@@ -0,0 +1,97 @@
+import { jsx as c, Fragment as k } from "react/jsx-runtime";
+import a, { createElement as v } from "react";
+import { makeStyles as T, mergeClasses as m } from "@fluentui/react-components";
+import { ClassNames as _ } from "../ClassNames.js";
+import { ResizableGridCell as z } from "./ResizableGridCell/ResizableGridCell.js";
+import { GridContext as A } from "./GridContext.js";
+const U = T({
+  grid: {
+    display: "grid",
+    boxSizing: "border-box"
+  },
+  inlineGrid: {
+    display: "inline-grid",
+    boxSizing: "border-box"
+  },
+  fill: {
+    width: "100%",
+    height: "100%"
+  }
+}), E = (i) => /* @__PURE__ */ c(k, {});
+E.displayName = "RowDefinition";
+const M = (i) => /* @__PURE__ */ c(k, {});
+M.displayName = "ColumnDefinition";
+const $ = (i) => {
+  const { children: S, fill: x, inline: D, ref: P, style: R, defaultUnit: p, defaultUnitSize: g, gap: y, id: N } = i, d = U();
+  let n = _.Grid;
+  const f = a.useMemo(() => [], []), u = a.useMemo(() => [], []);
+  let C = "", h = "";
+  const r = [], G = a.useCallback((e) => {
+    const t = e.size ?? g;
+    if (t == null)
+      return " auto";
+    const s = e.unit ?? p ?? "pixel";
+    return ` ${t}${s == "fraction" ? "fr" : "px"}`;
+  }, [p, g]), b = a.useCallback((e, t) => {
+    const s = e.props;
+    return t ? u.push(s) : f.push(s), G(s);
+  }, [u, G, f]);
+  a.Children.toArray(S).forEach((e, t) => {
+    var w;
+    switch (e.type.displayName) {
+      case "RowDefinition": {
+        C += b(e, !1);
+        break;
+      }
+      case "ColumnDefinition": {
+        h += b(e, !0);
+        break;
+      }
+      case "ResizableGridCell": {
+        const l = e.props;
+        r.push(
+          /* @__PURE__ */ c(
+            z,
+            {
+              ...l,
+              gap: y ?? (l.horizontal ? i.rowGap : i.columnGap)
+            },
+            t
+          )
+        );
+        break;
+      }
+      case "Section": {
+        const l = e.props;
+        (w = l.cellProps) != null && w.resizable ? r.push(
+          /* @__PURE__ */ v(
+            z,
+            {
+              ...l.cellProps,
+              key: t,
+              gap: y ?? (l.cellProps.horizontal ? i.rowGap : i.columnGap)
+            },
+            e
+          )
+        ) : r.push(e);
+        break;
+      }
+      default:
+        r.push(e);
+        break;
+    }
+  }), x && (n = m(n, d.fill)), D ? n = m(n, d.inlineGrid) : n = m(n, d.grid);
+  const o = {
+    gridTemplateRows: C,
+    gridTemplateColumns: h
+  };
+  i.gap && (o.gap = i.gap), i.columnGap && (o.columnGap = i.columnGap), i.rowGap && (o.rowGap = i.rowGap), i.padding && (o.padding = i.padding), i.justifyContent && (o.justifyContent = i.justifyContent), i.alignContent && (o.alignContent = i.alignContent);
+  const j = Object.assign({}, R, o);
+  return /* @__PURE__ */ c(A.Provider, { value: { rows: f, columns: u }, children: /* @__PURE__ */ c("div", { id: N, className: n, style: j, ref: P, children: r }) });
+};
+$.displayName = "Grid";
+export {
+  M as ColumnDefinition,
+  $ as Grid,
+  E as RowDefinition
+};

package/dist/components/Grid/GridCell/GridCell.js

@@ -0,0 +1,16 @@
+import { jsx as m } from "react/jsx-runtime";
+import { ClassNames as d } from "../../ClassNames.js";
+import { GridUtils as a } from "../GridUtils.js";
+import { makeStyles as c, mergeClasses as n } from "@fluentui/react-components";
+const y = c({
+  root: {
+    boxSizing: "border-box"
+  }
+}), C = (s) => {
+  const { children: e, style: l, className: r, id: o } = s, t = y(), i = a.buildGridCellStyles(s, l);
+  return /* @__PURE__ */ m("div", { id: o, className: n(d.GridCell, t.root, r), style: i, children: e });
+};
+C.displayName = "GridCell";
+export {
+  C as GridCell
+};

package/dist/components/Grid/GridCell/index.js

@@ -0,0 +1,4 @@
+import { GridCell as l } from "./GridCell.js";
+export {
+  l as GridCell
+};

package/dist/components/Grid/GridContext.js

@@ -0,0 +1,5 @@
+import t from "react";
+const o = t.createContext(void 0);
+export {
+  o as GridContext
+};

package/dist/components/Grid/GridUtils.js

@@ -0,0 +1,10 @@
+const e = class e {
+};
+e.buildCell = (r, t) => r ? t ? `${r} / span ${t}` : r.toString() : "", e.buildGridCellStyles = (r, t) => {
+  const { area: n, column: u, columnSpan: s, row: c, rowSpan: a } = r, l = t ?? {};
+  return n ? l.gridArea = n : (l.gridColumn = e.buildCell(u, s), l.gridRow = e.buildCell(c, a)), Object.assign({}, t, l);
+};
+let o = e;
+export {
+  o as GridUtils
+};

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

@@ -0,0 +1,72 @@
+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 { FlexBox as B } from "../../FlexBox/FlexBox.js";
+import { FlexBoxItem as N } from "../../FlexBox/FlexBoxItem/FlexBoxItem.js";
+import "../../FlexBox/FlexBoxItemResizer/FlexBoxItemResizer.js";
+import { GridCell as M } 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({
+  root: {
+    backgroundColor: l.colorBrandBackground,
+    borderRadius: l.borderRadiusMedium,
+    ":hover": {
+      backgroundColor: l.colorBrandBackgroundHover
+    }
+  },
+  vertical: {
+    cursor: "row-resize",
+    height: l.spacingVerticalXS
+  },
+  horizontal: {
+    cursor: "col-resize",
+    width: l.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({
+      resizer: r,
+      gridCell: a,
+      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"));
+  }, b = (i) => {
+    const r = d.current;
+    n && n.grid && n.grid.classList.remove("unselectable"), r.releasePointerCapture(i.pointerId), f(void 0);
+  };
+  return /* @__PURE__ */ u(
+    M,
+    {
+      id: G,
+      column: e.column,
+      columnSpan: e.columnSpan,
+      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 }),
+        /* @__PURE__ */ u(
+          "div",
+          {
+            ref: d,
+            className: g(c.root, t ? c.horizontal : c.vertical),
+            onPointerDown: R,
+            onMouseMove: v,
+            onPointerUp: b
+          }
+        )
+      ] })
+    }
+  );
+};
+E.displayName = "ResizableGridCell";
+export {
+  E as ResizableGridCell
+};

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

@@ -0,0 +1,4 @@
+import { ResizableGridCell as r } from "./ResizableGridCell.js";
+export {
+  r as ResizableGridCell
+};

package/dist/components/Grid/index.js

@@ -0,0 +1,12 @@
+import { ColumnDefinition as e, Grid as i, RowDefinition as t } from "./Grid.js";
+import { GridCell as l } from "./GridCell/GridCell.js";
+import { ResizableGridCell as m } from "./ResizableGridCell/ResizableGridCell.js";
+import { GridContext as d } from "./GridContext.js";
+export {
+  e as ColumnDefinition,
+  i as Grid,
+  l as GridCell,
+  d as GridContext,
+  m as ResizableGridCell,
+  t as RowDefinition
+};

package/dist/components/RichText/RichText.js

@@ -0,0 +1,32 @@
+import { jsx as s } from "react/jsx-runtime";
+import { tokens as o, mergeClasses as f, Text as h } from "@fluentui/react-components";
+import r from "react";
+import { FlexBox as g } from "../FlexBox/FlexBox.js";
+import "../FlexBox/FlexBoxItem/FlexBoxItem.js";
+import "../FlexBox/FlexBoxItemResizer/FlexBoxItemResizer.js";
+import { ClassNames as x } from "../ClassNames.js";
+const u = [`
+`, "\\n"], C = (e) => {
+  const { text: n, ref: c, id: l } = e, [m, a] = r.useState([]);
+  return r.useEffect(() => {
+    let t = [];
+    u.forEach((i) => {
+      t.length <= 1 && (t = n.split(i));
+    }), a(t);
+  }, [n]), /* @__PURE__ */ s(g, { id: l, className: f(x.RichText, e.className), childrenGap: o.spacingVerticalM, ref: c, children: m.map((t, i) => /* @__PURE__ */ s(
+    h,
+    {
+      align: e.align,
+      block: e.block,
+      font: e.font,
+      italic: e.italic,
+      size: e.size,
+      strikethrough: e.strikethrough,
+      children: t
+    },
+    "segment-" + i
+  )) });
+};
+export {
+  C as RichText
+};

package/dist/components/RichText/index.js

@@ -0,0 +1,4 @@
+import { RichText as r } from "./RichText.js";
+export {
+  r as RichText
+};

package/dist/components/Section/Section.js

@@ -0,0 +1,12 @@
+import "react/jsx-runtime";
+import "@fluentui/react-components";
+import "react";
+import "../FlexBox/FlexBox.js";
+import "../FlexBox/FlexBoxItem/FlexBoxItem.js";
+import "../FlexBox/FlexBoxItemResizer/FlexBoxItemResizer.js";
+import "../ClassNames.js";
+import "./SectionUtils.js";
+import { S as f } from "../../Section-Br38kDAa.js";
+export {
+  f as Section
+};

package/dist/components/Section/SectionUtils.js

@@ -0,0 +1,15 @@
+import { tokens as s } from "@fluentui/react-components";
+import { GridUtils as a } from "../Grid/GridUtils.js";
+import { FlexBoxUtils as d } from "../FlexBox/FlexBoxUtils.js";
+const r = class r {
+};
+r.buildSectionStyles = (l) => {
+  const { flexBoxItemProps: e, cellProps: t, scrollable: c } = l, o = {
+    scrollbarColor: s.colorBrandForeground1 + " " + s.colorNeutralBackground2
+  };
+  return c && (o.overflow = "auto"), t && a.buildGridCellStyles(t, o), e && d.buildFlexBoxItemStyles(e, o), Object.assign({}, l.style, o);
+};
+let i = r;
+export {
+  i as SectionUtils
+};

package/dist/components/Section/index.js

@@ -0,0 +1,4 @@
+import { S as r } from "../../Section-Br38kDAa.js";
+export {
+  r as Section
+};

package/dist/components/ThemePicker/ThemePicker.js

@@ -0,0 +1,92 @@
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { makeStyles as M, tokens as w, mergeClasses as y, Button as D, Divider as u, SwatchPicker as R, ColorSwatch as c } from "@fluentui/react-components";
+import n, { useEffect as f } from "react";
+import { FlexBox as x } from "../FlexBox/FlexBox.js";
+import "../FlexBox/FlexBoxItem/FlexBoxItem.js";
+import "../FlexBox/FlexBoxItemResizer/FlexBoxItemResizer.js";
+import { cornflowerDark as F, cornflowerLight as L } from "./Themes/Cornflower/Cornflower.js";
+import { crimsonDark as N, crimsonLight as T } from "./Themes/Crimson/Crimson.js";
+import { forestDark as z, forestLight as A } from "./Themes/Forest/Forest.js";
+import { royalDark as E, royalLight as P } from "./Themes/Royal/Royal.js";
+import { ClassNames as W } from "../ClassNames.js";
+import { c as h } from "../../createFluentIcon-CwLxkjIW.js";
+const H = /* @__PURE__ */ h("WeatherMoonRegular", "1em", ["M15.5 13.5A6.98 6.98 0 0 1 4 14.39c2.83-1.09 4.56-2.42 5.6-4.4 1.04-2 1.33-4.16.75-6.9A6.98 6.98 0 0 1 15.5 13.5ZM5.45 16.92A7.98 7.98 0 1 0 9.88 2.04a.6.6 0 0 0-.61.73c.69 2.82.43 4.88-.55 6.76-.94 1.78-2.55 3.03-5.55 4.1a.6.6 0 0 0-.3.9 7.95 7.95 0 0 0 2.59 2.39Z"]), V = /* @__PURE__ */ h("WeatherSunnyRegular", "1em", ["M10 2c.28 0 .5.22.5.5v1a.5.5 0 0 1-1 0v-1c0-.28.22-.5.5-.5Zm0 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0-1a3 3 0 1 1 0-6 3 3 0 0 1 0 6Zm7.5-2.5a.5.5 0 0 0 0-1h-1a.5.5 0 0 0 0 1h1ZM10 16c.28 0 .5.22.5.5v1a.5.5 0 0 1-1 0v-1c0-.28.22-.5.5-.5Zm-6.5-5.5a.5.5 0 0 0 0-1H2.46a.5.5 0 0 0 0 1H3.5Zm.65-6.35c.2-.2.5-.2.7 0l1 1a.5.5 0 1 1-.7.7l-1-1a.5.5 0 0 1 0-.7Zm.7 11.7a.5.5 0 0 1-.7-.7l1-1a.5.5 0 0 1 .7.7l-1 1Zm11-11.7a.5.5 0 0 0-.7 0l-1 1a.5.5 0 0 0 .7.7l1-1a.5.5 0 0 0 0-.7Zm-.7 11.7a.5.5 0 0 0 .7-.7l-1-1a.5.5 0 0 0-.7.7l1 1Z"]), _ = M({
+  divider: {
+    flexGrow: 0
+  }
+}), ee = (t) => {
+  const { themeSelected: o, defaultTheme: i, darkMode: k, className: g, ref: p, strings: e, id: v } = t, C = _(), [l, S] = n.useState(i), [a, Z] = n.useState(k), s = n.useCallback(() => {
+    switch (l) {
+      case "Crimson":
+        o(a ? N : T);
+        break;
+      case "Forest":
+        o(a ? z : A);
+        break;
+      case "Cornflower":
+        o(a ? F : L);
+        break;
+      case "Royal":
+        o(a ? E : P);
+        break;
+    }
+  }, [a, l, o]);
+  f(() => {
+    i && s();
+  }, [i, s]), f(() => {
+    o && s();
+  }, [l, a, o, s]);
+  const m = {
+    className: C.divider,
+    vertical: !0,
+    appearance: "brand"
+  };
+  return /* @__PURE__ */ d(
+    x,
+    {
+      id: v,
+      className: y(W.ThemePicker, g),
+      horizontal: !0,
+      alignItems: "center",
+      childrenGap: w.spacingHorizontalSNudge,
+      ref: p,
+      children: [
+        /* @__PURE__ */ r(
+          D,
+          {
+            icon: a ? /* @__PURE__ */ r(V, {}) : /* @__PURE__ */ r(H, {}),
+            title: a ? e ? e.enableLightMode : "Enable light mode." : e ? e.enableDarkMode : "Enable dark mode.",
+            appearance: "subtle",
+            onClick: () => {
+              Z(!a);
+            }
+          }
+        ),
+        /* @__PURE__ */ r(u, { ...m }),
+        /* @__PURE__ */ d(
+          R,
+          {
+            selectedValue: l,
+            defaultSelectedValue: t.defaultTheme,
+            spacing: t.spacing,
+            size: t.size,
+            shape: t.shape,
+            onSelectionChange: (j, b) => {
+              S(b.selectedValue);
+            },
+            children: [
+              /* @__PURE__ */ r(c, { color: "#6495ED", value: "Cornflower", title: e ? e.cornflower : "Cornflower" }),
+              /* @__PURE__ */ r(c, { color: "#990000", value: "Crimson", title: e ? e.crimson : "Crimson" }),
+              /* @__PURE__ */ r(c, { color: "#014421", value: "Forest", title: e ? e.forest : "Forest" }),
+              /* @__PURE__ */ r(c, { color: "#7851A9", value: "Royal", title: e ? e.royal : "Royal" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(u, { ...m })
+      ]
+    }
+  );
+};
+export {
+  ee as ThemePicker
+};

package/dist/components/ThemePicker/Themes/Cornflower/Cornflower.js

@@ -0,0 +1,32 @@
+import { createLightTheme as e, createDarkTheme as c } from "@fluentui/react-components";
+const r = {
+  10: "#020304",
+  20: "#14171F",
+  30: "#1E2535",
+  40: "#263048",
+  50: "#2E3D5C",
+  60: "#364971",
+  70: "#3E5686",
+  80: "#46639C",
+  90: "#4E71B2",
+  100: "#577FC9",
+  110: "#5F8DE0",
+  120: "#709CEF",
+  130: "#89AAF2",
+  140: "#A0B8F4",
+  150: "#B5C7F7",
+  160: "#CAD6FA"
+};
+r.primary = "#6495ED";
+const F = {
+  ...e(r)
+}, o = {
+  ...c(r)
+};
+o.colorBrandForeground1 = r[110];
+o.colorBrandForeground2 = r[120];
+export {
+  r as cornflower,
+  o as cornflowerDark,
+  F as cornflowerLight
+};

package/dist/components/ThemePicker/Themes/Crimson/Crimson.js

@@ -0,0 +1,32 @@
+import { createLightTheme as e, createDarkTheme as c } from "@fluentui/react-components";
+const r = {
+  10: "#070100",
+  20: "#2A0F01",
+  30: "#481102",
+  40: "#611102",
+  50: "#7A0D02",
+  60: "#950200",
+  70: "#A32311",
+  80: "#AE3A24",
+  90: "#B94F36",
+  100: "#C36149",
+  110: "#CC745D",
+  120: "#D58671",
+  130: "#DD9885",
+  140: "#E5AA9A",
+  150: "#ECBDAF",
+  160: "#F2CFC5"
+};
+r.primary = "#990000";
+const t = {
+  ...e(r)
+}, o = {
+  ...c(r)
+};
+o.colorBrandForeground1 = r[110];
+o.colorBrandForeground2 = r[120];
+export {
+  r as crimson,
+  o as crimsonDark,
+  t as crimsonLight
+};

package/dist/components/ThemePicker/Themes/Forest/Forest.js

@@ -0,0 +1,32 @@
+import { createLightTheme as e, createDarkTheme as t } from "@fluentui/react-components";
+const r = {
+  10: "#010402",
+  20: "#0B1D10",
+  30: "#0A3019",
+  40: "#043E1F",
+  50: "#114B29",
+  60: "#265837",
+  70: "#376546",
+  80: "#487254",
+  90: "#597F64",
+  100: "#6A8C73",
+  110: "#7C9983",
+  120: "#8DA794",
+  130: "#9FB5A4",
+  140: "#B1C3B5",
+  150: "#C3D1C6",
+  160: "#D6DFD8"
+};
+r.primary = "#014421";
+const a = {
+  ...e(r)
+}, o = {
+  ...t(r)
+};
+o.colorBrandForeground1 = r[110];
+o.colorBrandForeground2 = r[120];
+export {
+  r as forest,
+  o as forestDark,
+  a as forestLight
+};

package/dist/components/ThemePicker/Themes/Royal/Royal.js

@@ -0,0 +1,32 @@
+import { createLightTheme as e, createDarkTheme as a } from "@fluentui/react-components";
+const r = {
+  10: "#030205",
+  20: "#1A1421",
+  30: "#2B1F39",
+  40: "#39294D",
+  50: "#483263",
+  60: "#573C79",
+  70: "#674690",
+  80: "#7750A8",
+  90: "#8460B1",
+  100: "#916FB9",
+  110: "#9E7FC1",
+  120: "#AB8FCA",
+  130: "#B89FD2",
+  140: "#C4B0DA",
+  150: "#D1C1E2",
+  160: "#DED1EA"
+};
+r.primary = "#7851A9";
+const o = {
+  ...e(r)
+}, B = {
+  ...a(r)
+};
+o.colorBrandForeground1 = r[110];
+o.colorBrandForeground2 = r[120];
+export {
+  r as royal,
+  B as royalDark,
+  o as royalLight
+};

package/dist/components/ThemePicker/Themes/index.js

@@ -0,0 +1,18 @@
+import { cornflower as t, cornflowerDark as e, cornflowerLight as f } from "./Cornflower/Cornflower.js";
+import { crimson as i, crimsonDark as m, crimsonLight as c } from "./Crimson/Crimson.js";
+import { forest as n, forestDark as s, forestLight as g } from "./Forest/Forest.js";
+import { royal as k, royalDark as p, royalLight as x } from "./Royal/Royal.js";
+export {
+  t as cornflower,
+  e as cornflowerDark,
+  f as cornflowerLight,
+  i as crimson,
+  m as crimsonDark,
+  c as crimsonLight,
+  n as forest,
+  s as forestDark,
+  g as forestLight,
+  k as royal,
+  p as royalDark,
+  x as royalLight
+};

package/dist/components/ThemePicker/index.js

@@ -0,0 +1,20 @@
+import { ThemePicker as e } from "./ThemePicker.js";
+import { cornflower as f, cornflowerDark as m, cornflowerLight as i } from "./Themes/Cornflower/Cornflower.js";
+import { crimson as c, crimsonDark as l, crimsonLight as n } from "./Themes/Crimson/Crimson.js";
+import { forest as h, forestDark as k, forestLight as p } from "./Themes/Forest/Forest.js";
+import { royal as g, royalDark as D, royalLight as L } from "./Themes/Royal/Royal.js";
+export {
+  e as ThemePicker,
+  f as cornflower,
+  m as cornflowerDark,
+  i as cornflowerLight,
+  c as crimson,
+  l as crimsonDark,
+  n as crimsonLight,
+  h as forest,
+  k as forestDark,
+  p as forestLight,
+  g as royal,
+  D as royalDark,
+  L as royalLight
+};

package/dist/components/Wizard/Wizard.js

@@ -0,0 +1,99 @@
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { makeStyles as A, tokens as h, BreadcrumbItem as E, BreadcrumbButton as R, mergeClasses as V, Breadcrumb as _, Divider as p, Carousel as j, CarouselViewport as D, CarouselSlider as W, CarouselCard as G, Button as u, BreadcrumbDivider as L } from "@fluentui/react-components";
+import C from "react";
+import { ClassNames as q } from "../ClassNames.js";
+import { FlexBox as f } from "../FlexBox/FlexBox.js";
+import { FlexBoxItem as m } from "../FlexBox/FlexBoxItem/FlexBoxItem.js";
+import "../FlexBox/FlexBoxItemResizer/FlexBoxItemResizer.js";
+import { S as H, C as J, a as K, b as M } from "../../Section-Br38kDAa.js";
+const O = A({
+  root: {
+    height: "100%",
+    width: "100%",
+    boxSizing: "border-box"
+  },
+  currentBreadCrumb: {
+    color: h.colorBrandForeground1
+  }
+}), te = (x) => {
+  const { children: g, onNavigatePanel: o, onSubmit: v, readonly: B, className: S, ref: k, asForm: N, strings: t, id: y } = x, s = O(), c = C.Children.toArray(g), [i, l] = C.useState(0), I = (r) => {
+    o && !o(i, r) || l(r);
+  }, a = [];
+  c.forEach((r, n) => {
+    const z = r.props;
+    n > 0 && a.push(/* @__PURE__ */ e(L, {}, "Breadcrumb-divider-" + n)), a.push(/* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(
+      R,
+      {
+        type: "button",
+        onClick: () => {
+          I(n);
+        },
+        current: i === n,
+        className: i === n ? s.currentBreadCrumb : "",
+        children: z.title
+      }
+    ) }, "Breadcrumb-" + n));
+  });
+  const P = i === 0, F = () => {
+    const r = i - 1;
+    o && !o(i, r) || l(r);
+  }, b = i === c.length - 1, w = () => {
+    const r = i + 1;
+    o && !o(i, r) || l(r);
+  };
+  return /* @__PURE__ */ e("div", { id: y, className: V(q.Wizard, s.root, S), ref: k, children: /* @__PURE__ */ e(H, { className: s.root, children: /* @__PURE__ */ d(f, { fill: !0, children: [
+    c.length > 1 && /* @__PURE__ */ d(m, { children: [
+      /* @__PURE__ */ e(_, { size: "large", children: a }),
+      /* @__PURE__ */ e(p, {})
+    ] }),
+    /* @__PURE__ */ e(m, { grow: 1, children: /* @__PURE__ */ e(
+      j,
+      {
+        motion: "slide",
+        activeIndex: i,
+        whitespace: !0,
+        align: "center",
+        onActiveIndexChange: (r, n) => l(n.index),
+        children: /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(W, { children: c.map((r, n) => /* @__PURE__ */ e(G, { children: r }, n)) }) })
+      }
+    ) }),
+    /* @__PURE__ */ e(m, { children: /* @__PURE__ */ d(f, { horizontal: !0, childrenGap: h.spacingVerticalS, itemProps: { padding: h.spacingVerticalS }, children: [
+      /* @__PURE__ */ e(p, {}),
+      c.length > 1 && /* @__PURE__ */ e(
+        u,
+        {
+          "aria-label": t ? t.previous : "Previous",
+          icon: /* @__PURE__ */ e(J, {}),
+          onClick: F,
+          disabled: P,
+          children: t ? t.previous : "Previous"
+        }
+      ),
+      !b && /* @__PURE__ */ e(
+        u,
+        {
+          "aria-label": t ? t.next : "Next",
+          icon: /* @__PURE__ */ e(K, {}),
+          iconPosition: "after",
+          onClick: w,
+          children: t ? t.next : "Next"
+        }
+      ),
+      b && /* @__PURE__ */ e(
+        u,
+        {
+          "aria-label": t ? t.submit : "Submit",
+          type: N ? "submit" : "button",
+          disabled: B,
+          icon: /* @__PURE__ */ e(M, {}),
+          iconPosition: "after",
+          onClick: v,
+          children: t ? t.submit : "Submit"
+        }
+      )
+    ] }) })
+  ] }) }) });
+};
+export {
+  te as Wizard
+};