@5ive-souls/controls 0.0.3 → 0.0.4

package/dist/components/Section/SectionUtils.js

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

package/dist/components/Section/index.js

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

package/dist/components/Wizard/Wizard.js

@@ -5,7 +5,8 @@ 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-Bw_kuHpK.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";
 const O = A({
   root: {
     height: "100%",
@@ -15,31 +16,31 @@ const O = A({
   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);
+}), ie = (x) => {
+  const { children: g, onNavigatePanel: n, 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) => {
+    n && !n(i, r) || l(r);
   }, a = [];
-  c.forEach((r, n) => {
+  c.forEach((r, o) => {
     const z = r.props;
-    n > 0 && a.push(/* @__PURE__ */ e(L, {}, "Breadcrumb-divider-" + n)), a.push(/* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(
+    o > 0 && a.push(/* @__PURE__ */ e(L, {}, "Breadcrumb-divider-" + o)), a.push(/* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(
       R,
       {
         type: "button",
         onClick: () => {
-          I(n);
+          I(o);
         },
-        current: i === n,
-        className: i === n ? s.currentBreadCrumb : "",
+        current: i === o,
+        className: i === o ? s.currentBreadCrumb : "",
         children: z.title
       }
-    ) }, "Breadcrumb-" + n));
+    ) }, "Breadcrumb-" + o));
   });
   const P = i === 0, F = () => {
     const r = i - 1;
-    o && !o(i, r) || l(r);
+    n && !n(i, r) || l(r);
   }, b = i === c.length - 1, w = () => {
     const r = i + 1;
-    o && !o(i, r) || l(r);
+    n && !n(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: [
@@ -53,8 +54,8 @@ const O = A({
         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)) }) })
+        onActiveIndexChange: (r, o) => l(o.index),
+        children: /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(W, { children: c.map((r, o) => /* @__PURE__ */ e(G, { children: r }, o)) }) })
       }
     ) }),
     /* @__PURE__ */ e(m, { children: /* @__PURE__ */ d(f, { horizontal: !0, childrenGap: h.spacingVerticalS, itemProps: { padding: h.spacingVerticalS }, children: [
@@ -95,5 +96,5 @@ const O = A({
   ] }) }) });
 };
 export {
-  te as Wizard
+  ie as Wizard
 };

package/dist/components/index.js

@@ -3,18 +3,18 @@ import { DynamicFormBuilder as m } from "./DynamicForm/Builder/DynamicFormBuilde
 import { FieldBuilder as x } from "./DynamicForm/Builder/Field/FieldBuilder.js";
 import { SectionBuilder as l } from "./DynamicForm/Builder/Section/SectionBuilder.js";
 import { Device as c } from "./FiveSoulsProvider/FiveSouls.Types.js";
-import { FiveSoulsProvider as s } from "./FiveSoulsProvider/FiveSoulsProvider.js";
+import { FiveSoulsProvider as d } from "./FiveSoulsProvider/FiveSoulsProvider.js";
 import { deviceContext as D } from "./FiveSoulsProvider/deviceContext.js";
 import { useDevice as F } from "./FiveSoulsProvider/useDevice.js";
 import { FlexBox as B } from "./FlexBox/FlexBox.js";
 import { FlexBoxItem as v } from "./FlexBox/FlexBoxItem/FlexBoxItem.js";
 import { FlexBoxItemResizer as L } from "./FlexBox/FlexBoxItemResizer/FlexBoxItemResizer.js";
 import { ColumnDefinition as w, Grid as z, RowDefinition as C } from "./Grid/Grid.js";
-import { GridCell as S } from "./Grid/GridCell/GridCell.js";
-import { ResizableGridCell as P } from "./Grid/ResizableGridCell/ResizableGridCell.js";
+import { GridCell as G } from "./Grid/GridCell/GridCell.js";
+import { ResizableGridCell as S } from "./Grid/ResizableGridCell/ResizableGridCell.js";
 import "./Grid/GridContext.js";
 import { RichText as T } from "./RichText/RichText.js";
-import { S as b } from "../Section-Bw_kuHpK.js";
+import { Section as b } from "./Section/Section.js";
 import { ThemePicker as j } from "./ThemePicker/ThemePicker.js";
 import { cornflower as A, cornflowerDark as E, cornflowerLight as H } from "./ThemePicker/Themes/Cornflower/Cornflower.js";
 import { crimson as M, crimsonDark as N, crimsonLight as O } from "./ThemePicker/Themes/Crimson/Crimson.js";
@@ -29,14 +29,14 @@ export {
   t as DynamicForm,
   m as DynamicFormBuilder,
   x as FieldBuilder,
-  s as FiveSoulsProvider,
+  d as FiveSoulsProvider,
   B as FlexBox,
   v as FlexBoxItem,
   L as FlexBoxItemResizer,
   z as Grid,
-  S as GridCell,
+  G as GridCell,
   mr as JumpList,
-  P as ResizableGridCell,
+  S as ResizableGridCell,
   T as RichText,
   C as RowDefinition,
   b as Section,

package/dist/main.d.ts

@@ -465,6 +465,10 @@ export declare interface ISectionProps extends IComponentProps {
      * Collection of properties to be used when this section is rendered as a child of the `FlexBox` component.
      */
     flexBoxItemProps?: IFlexBoxItemProps;
+    /**
+     *
+     */
+    appearance?: "default" | "borderless";
 }
 
 export declare interface IThemePickerProps extends IComponentProps {

package/dist/main.js

@@ -3,18 +3,18 @@ import { DynamicFormBuilder as m } from "./components/DynamicForm/Builder/Dynami
 import { FieldBuilder as x } from "./components/DynamicForm/Builder/Field/FieldBuilder.js";
 import { SectionBuilder as l } from "./components/DynamicForm/Builder/Section/SectionBuilder.js";
 import { Device as c } from "./components/FiveSoulsProvider/FiveSouls.Types.js";
-import { FiveSoulsProvider as s } from "./components/FiveSoulsProvider/FiveSoulsProvider.js";
+import { FiveSoulsProvider as d } from "./components/FiveSoulsProvider/FiveSoulsProvider.js";
 import { deviceContext as D } from "./components/FiveSoulsProvider/deviceContext.js";
 import { useDevice as F } from "./components/FiveSoulsProvider/useDevice.js";
 import { FlexBox as B } from "./components/FlexBox/FlexBox.js";
 import { FlexBoxItem as v } from "./components/FlexBox/FlexBoxItem/FlexBoxItem.js";
 import { FlexBoxItemResizer as L } from "./components/FlexBox/FlexBoxItemResizer/FlexBoxItemResizer.js";
 import { ColumnDefinition as w, Grid as z, RowDefinition as C } from "./components/Grid/Grid.js";
-import { GridCell as S } from "./components/Grid/GridCell/GridCell.js";
-import { ResizableGridCell as P } from "./components/Grid/ResizableGridCell/ResizableGridCell.js";
+import { GridCell as G } from "./components/Grid/GridCell/GridCell.js";
+import { ResizableGridCell as S } from "./components/Grid/ResizableGridCell/ResizableGridCell.js";
 import "./components/Grid/GridContext.js";
 import { RichText as T } from "./components/RichText/RichText.js";
-import { S as b } from "./Section-Bw_kuHpK.js";
+import { Section as b } from "./components/Section/Section.js";
 import { ThemePicker as j } from "./components/ThemePicker/ThemePicker.js";
 import { cornflower as A, cornflowerDark as E, cornflowerLight as H } from "./components/ThemePicker/Themes/Cornflower/Cornflower.js";
 import { crimson as M, crimsonDark as N, crimsonLight as O } from "./components/ThemePicker/Themes/Crimson/Crimson.js";
@@ -29,14 +29,14 @@ export {
   t as DynamicForm,
   m as DynamicFormBuilder,
   x as FieldBuilder,
-  s as FiveSoulsProvider,
+  d as FiveSoulsProvider,
   B as FlexBox,
   v as FlexBoxItem,
   L as FlexBoxItemResizer,
   z as Grid,
-  S as GridCell,
+  G as GridCell,
   mr as JumpList,
-  P as ResizableGridCell,
+  S as ResizableGridCell,
   T as RichText,
   C as RowDefinition,
   b as Section,

package/package.json

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