@5ive-souls/controls 0.0.1 → 0.0.3

package/dist/components/Grid/Grid.js

@@ -0,0 +1,97 @@
+import { jsx as c, Fragment as k } from "react/jsx-runtime";
+import r, { createElement as T } from "react";
+import { makeStyles as _, mergeClasses as d } from "@fluentui/react-components";
+import { ClassNames as A } from "../ClassNames.js";
+import { ResizableGridCell as z } from "./ResizableGridCell/ResizableGridCell.js";
+import { GridContext as U } from "./GridContext.js";
+const E = _({
+  grid: {
+    display: "grid",
+    boxSizing: "border-box"
+  },
+  inlineGrid: {
+    display: "inline-grid",
+    boxSizing: "border-box"
+  },
+  fill: {
+    width: "100%",
+    height: "100%"
+  }
+}), M = (i) => /* @__PURE__ */ c(k, {});
+M.displayName = "RowDefinition";
+const $ = (i) => /* @__PURE__ */ c(k, {});
+$.displayName = "ColumnDefinition";
+const F = (i) => {
+  const { children: S, fill: x, inline: N, ref: D, style: P, defaultUnit: p, defaultUnitSize: g, gap: y, id: R, className: j } = i, u = E(), f = r.useMemo(() => [], []), m = r.useMemo(() => [], []);
+  let C = "", h = "";
+  const a = [], G = r.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 = r.useCallback((e, t) => {
+    const s = e.props;
+    return t ? m.push(s) : f.push(s), G(s);
+  }, [m, G, f]);
+  r.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;
+        a.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 ? a.push(
+          /* @__PURE__ */ T(
+            z,
+            {
+              ...l.cellProps,
+              key: t,
+              gap: y ?? (l.cellProps.horizontal ? i.rowGap : i.columnGap)
+            },
+            e
+          )
+        ) : a.push(e);
+        break;
+      }
+      default:
+        a.push(e);
+        break;
+    }
+  });
+  let n = A.Grid;
+  x && (n = d(n, u.fill)), N ? n = d(n, u.inlineGrid) : n = d(n, u.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 v = Object.assign({}, P, o);
+  return /* @__PURE__ */ c(U.Provider, { value: { rows: f, columns: m }, children: /* @__PURE__ */ c("div", { id: R, className: d(n, j), style: v, ref: D, children: a }) });
+};
+F.displayName = "Grid";
+export {
+  $ as ColumnDefinition,
+  F as Grid,
+  M 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/JumpList/JumpList.js

@@ -0,0 +1,178 @@
+import { jsx as o, jsxs as g } from "react/jsx-runtime";
+import { makeStyles as V, tokens as h, mergeClasses as l, Text as w, Button as F, Input as X } from "@fluentui/react-components";
+import i from "react";
+import { FlexBox as v } from "../FlexBox/FlexBox.js";
+import { FlexBoxItem as N } from "../FlexBox/FlexBoxItem/FlexBoxItem.js";
+import "../FlexBox/FlexBoxItemResizer/FlexBoxItemResizer.js";
+import { Grid as Y, ColumnDefinition as K } from "../Grid/Grid.js";
+import "../Grid/GridCell/GridCell.js";
+import "../Grid/ResizableGridCell/ResizableGridCell.js";
+import "../Grid/GridContext.js";
+import { S as z } from "../../Section-Bw_kuHpK.js";
+import { ClassNames as m } from "../ClassNames.js";
+import { c as G } from "../../createFluentIcon-CwLxkjIW.js";
+const Q = /* @__PURE__ */ G("AppsListRegular", "1em", ["M2 3.5C2 2.67 2.67 2 3.5 2h1C5.33 2 6 2.67 6 3.5v1C6 5.33 5.33 6 4.5 6h-1A1.5 1.5 0 0 1 2 4.5v-1ZM3.5 3a.5.5 0 0 0-.5.5v1c0 .28.22.5.5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1ZM2 9.5C2 8.67 2.67 8 3.5 8h1C5.33 8 6 8.67 6 9.5v1c0 .83-.67 1.5-1.5 1.5h-1A1.5 1.5 0 0 1 2 10.5v-1ZM3.5 9a.5.5 0 0 0-.5.5v1c0 .28.22.5.5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1ZM2 15.5c0-.83.67-1.5 1.5-1.5h1c.83 0 1.5.67 1.5 1.5v1c0 .83-.67 1.5-1.5 1.5h-1A1.5 1.5 0 0 1 2 16.5v-1Zm1.5-.5a.5.5 0 0 0-.5.5v1c0 .28.22.5.5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1ZM8 4.5c0-.28.22-.5.5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm0 6c0-.28.22-.5.5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm0 6c0-.28.22-.5.5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Z"]), U = /* @__PURE__ */ G("FilterRegular", "1em", ["M7.5 13h5a.5.5 0 0 1 .09 1H7.5a.5.5 0 0 1-.09-1h5.09-5Zm-2-4h9a.5.5 0 0 1 .09 1H5.5a.5.5 0 0 1-.09-1h9.09-9Zm-2-4h13a.5.5 0 0 1 .09 1H3.5a.5.5 0 0 1-.09-1H16.5h-13Z"]), a = 36, ee = V({
+  root: {
+    position: "relative"
+  },
+  list: {
+    padding: "0px",
+    margin: "0px",
+    boxSizing: "border-box",
+    listStyle: "none"
+  },
+  listItem: {
+    height: a + "px",
+    maxHeight: a + "px",
+    alignContent: "center",
+    ":hover": {
+      backgroundColor: h.colorBrandBackgroundHover
+    }
+  },
+  listItemIcon: {
+    textAlign: "center",
+    alignContent: "center"
+  },
+  listItemContent: {
+    paddingLeft: h.spacingHorizontalS
+  },
+  selectedListItem: {
+    backgroundColor: h.colorBrandBackgroundSelected
+  },
+  capitalize: {
+    textTransform: "capitalize"
+  },
+  baseSize: {
+    minWidth: `${a}px`,
+    width: `${a}px`,
+    height: `${a}px`,
+    minHeight: `${a}px`
+  },
+  headerButton: {
+    width: "100%",
+    justifyContent: "left",
+    height: `${a}px`
+  },
+  menuRoot: {
+    overflowY: "auto",
+    overflowX: "hidden",
+    height: "100%",
+    width: "100%",
+    backgroundColor: h.colorNeutralBackground1,
+    position: "absolute",
+    inset: "0px"
+  },
+  hidden: {
+    display: "none"
+  }
+}), R = ["#", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"], pe = (y) => {
+  const { style: B, className: k, items: u, headerProp: c, renderItem: L, renderIcon: M, onSelectionChanged: Z, strings: H } = y, s = ee(), [p, J] = i.useState(), [T, $] = i.useState(-1), [f, A] = i.useState(), [x, O] = i.useState(), E = i.useId(), d = i.useId(), W = i.useCallback(() => {
+    const e = window.document.getElementById(E);
+    console.log("TESTING:	Offset width:	" + e.offsetWidth);
+    const t = Math.min(~~((e.offsetWidth - 24) / (a + 8)), 4), n = {
+      columns: []
+    };
+    for (let r = 0; r < t; r++)
+      n.columns.push(/* @__PURE__ */ o(K, {}, `column-${r}`));
+    console.log("TESTING:	Columns:	" + n.columns.length), A(n);
+  }, [d]), _ = i.useCallback((e) => {
+    A(void 0);
+    const t = window.document.getElementById(d), n = t.querySelector("#header-button-" + e);
+    t.scrollTo({ top: n.offsetTop, behavior: "smooth" });
+  }, [d]), q = i.useCallback((e, t) => {
+    const n = e[c], r = t[c];
+    return n.localeCompare(r);
+  }, [c]);
+  if (i.useEffect(() => {
+    if (!u || u.length == 0 || !c)
+      return;
+    const e = {};
+    R.forEach((t) => {
+      e[t] = new Array();
+    }), u.forEach((t) => {
+      const n = t[c];
+      if (x && !new RegExp(x, "i").test(n))
+        return;
+      const r = n.charAt(0).toLowerCase();
+      (Object.hasOwn(e, r) ? e[r] : e["#"]).push(t);
+    }), J(e);
+  }, [c, u, x]), !p)
+    return /* @__PURE__ */ o(z, { className: l(m.JumpList, s.root, k), style: B, id: d, children: /* @__PURE__ */ g(v, { fill: !0, justifyContent: "center", alignItems: "center", children: [
+      /* @__PURE__ */ o(Q, { fontSize: 48 }),
+      /* @__PURE__ */ o(w, { children: H ? H.emptyList : "No items." })
+    ] }) });
+  const I = [];
+  let C = 0;
+  Object.keys(p).forEach((e) => {
+    const t = p[e];
+    t.length != 0 && (I.push(
+      /* @__PURE__ */ o("li", { className: m.JumpListHeader, children: /* @__PURE__ */ o(
+        F,
+        {
+          id: "header-button-" + e,
+          className: l(s.headerButton, s.capitalize),
+          appearance: "subtle",
+          onClick: W,
+          children: e
+        }
+      ) }, e)
+    ), t.sort(q).forEach((n) => {
+      const r = C == T, j = n[c], b = C + 0, D = L ? L(n, r) : /* @__PURE__ */ o(w, { children: j });
+      let S = l(m.JumpListItem, s.listItem);
+      r && (S = l(S, s.selectedListItem)), I.push(
+        /* @__PURE__ */ o(
+          "li",
+          {
+            className: S,
+            onClick: () => {
+              Z && T != b && (Z(n), $(b));
+            },
+            children: /* @__PURE__ */ g(v, { horizontal: !0, alignItems: "center", children: [
+              M && /* @__PURE__ */ o(N, { className: l(s.baseSize, s.listItemIcon), children: M(n, r) }),
+              /* @__PURE__ */ o(N, { grow: 1, className: s.listItemContent, children: D })
+            ] })
+          },
+          b
+        )
+      ), C++;
+    }));
+  });
+  const P = (e, t) => {
+    O(t.value);
+  };
+  return /* @__PURE__ */ g(v, { className: l(m.JumpList, s.root, k), style: B, id: E, childrenGap: h.spacingVerticalM, children: [
+    y.enableFiltering && /* @__PURE__ */ o(N, { children: /* @__PURE__ */ o(
+      X,
+      {
+        type: "search",
+        contentAfter: /* @__PURE__ */ o(U, {}),
+        placeholder: "Filter",
+        style: { width: "100%" },
+        onChange: P
+      }
+    ) }),
+    /* @__PURE__ */ o(z, { scrollable: !0, flexBoxItemProps: { grow: 1 }, id: d, children: /* @__PURE__ */ o("ul", { className: s.list, children: I }) }),
+    /* @__PURE__ */ o(z, { className: l(m.JumpListMenu, s.menuRoot, !f && s.hidden), scrollable: !0, role: "menu", children: /* @__PURE__ */ g(Y, { gap: h.spacingHorizontalS, justifyContent: "center", alignContent: "center", children: [
+      f && f.columns,
+      R.map((e) => {
+        const t = p[e].length == 0;
+        return /* @__PURE__ */ o(
+          F,
+          {
+            appearance: "subtle",
+            className: s.baseSize,
+            disabled: t,
+            onClick: () => {
+              _(e);
+            },
+            children: /* @__PURE__ */ o(w, { weight: "bold", size: 400, className: s.capitalize, children: e })
+          },
+          e
+        );
+      })
+    ] }) })
+  ] });
+};
+export {
+  pe as JumpList
+};

package/dist/components/JumpList/index.js

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

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-Bw_kuHpK.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 d } from "../Grid/GridUtils.js";
+import { FlexBoxUtils as a } from "../FlexBox/FlexBoxUtils.js";
+const l = class l {
+};
+l.buildSectionStyles = (r) => {
+  const { flexBoxItemProps: e, cellProps: t, scrollable: c } = r, o = {
+    scrollbarColor: s.colorBrandForeground1 + " " + s.colorNeutralBackground2
+  };
+  return c ? o.overflow = "auto" : o.overflow = "hidden", t && d.buildGridCellStyles(t, o), e && a.buildFlexBoxItemStyles(e, o), Object.assign({}, r.style, o);
+};
+let i = l;
+export {
+  i as SectionUtils
+};

package/dist/components/Section/index.js

@@ -0,0 +1,4 @@
+import { S as r } from "../../Section-Bw_kuHpK.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
+};