@xyo-network/react-shared 2.64.0-rc.6 → 2.64.0

package/dist/node/components/{StyleGuide/StyleGuide.stories.js → ScrollTableOnSm.cjs}

@@ -16,31 +16,25 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var StyleGuide_stories_exports = {};
-__export(StyleGuide_stories_exports, {
-  Default: () => Default,
-  default: () => StyleGuide_stories_default
+
+// src/components/ScrollTableOnSm.tsx
+var ScrollTableOnSm_exports = {};
+__export(ScrollTableOnSm_exports, {
+  ScrollTableOnSm: () => ScrollTableOnSm
 });
-module.exports = __toCommonJS(StyleGuide_stories_exports);
+module.exports = __toCommonJS(ScrollTableOnSm_exports);
+var import_material = require("@mui/material");
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_StyleGuide = require("./StyleGuide.example");
-const StorybookEntry = {
-  argTypes: {},
-  component: import_StyleGuide.StyleGuideExample,
-  parameters: {
-    docs: {
-      page: null
-    }
+var StyledScrollTableOnSm = (0, import_material.styled)("div")(({ theme }) => ({
+  [theme.breakpoints.down("md")]: {
+    overflowX: "scroll"
   },
-  title: "shared/StyleGuide"
-};
-const Template = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StyleGuide.StyleGuideExample, {});
-const Default = Template.bind({});
-Default.args = {};
-Default.decorators = [];
-var StyleGuide_stories_default = StorybookEntry;
+  display: "flex",
+  flexGrow: 1
+}));
+var ScrollTableOnSm = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledScrollTableOnSm, { children });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Default
+  ScrollTableOnSm
 });
-//# sourceMappingURL=StyleGuide.stories.js.map
+//# sourceMappingURL=ScrollTableOnSm.cjs.map

package/dist/node/components/ScrollTableOnSm.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ScrollTableOnSm.tsx"],"sourcesContent":["import { styled } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\n\nconst StyledScrollTableOnSm = styled('div')(({ theme }) => ({\n  [theme.breakpoints.down('md')]: {\n    overflowX: 'scroll',\n  },\n  display: 'flex',\n  flexGrow: 1,\n}))\n\nconst ScrollTableOnSm: React.FC<WithChildren> = ({ children }) => <StyledScrollTableOnSm>{children}</StyledScrollTableOnSm>\n\nexport { ScrollTableOnSm }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAuB;AAW2C;AARlE,IAAM,4BAAwB,wBAAO,KAAK,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EAC1D,CAAC,MAAM,YAAY,KAAK,IAAI,CAAC,GAAG;AAAA,IAC9B,WAAW;AAAA,EACb;AAAA,EACA,SAAS;AAAA,EACT,UAAU;AACZ,EAAE;AAEF,IAAM,kBAA0C,CAAC,EAAE,SAAS,MAAM,4CAAC,yBAAuB,UAAS;","names":[]}

package/dist/node/components/ScrollTableOnSm.d.cts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { WithChildren } from '@xylabs/react-shared';
+declare const ScrollTableOnSm: React.FC<WithChildren>;
+export { ScrollTableOnSm };
+//# sourceMappingURL=ScrollTableOnSm.d.ts.map

package/dist/node/components/ScrollTableOnSm.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollTableOnSm.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollTableOnSm.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAUnD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAA+E,CAAA;AAE3H,OAAO,EAAE,eAAe,EAAE,CAAA"}

package/dist/node/components/ScrollTableOnSm.js

@@ -1,38 +1,15 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var ScrollTableOnSm_exports = {};
-__export(ScrollTableOnSm_exports, {
-  ScrollTableOnSm: () => ScrollTableOnSm
-});
-module.exports = __toCommonJS(ScrollTableOnSm_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_material = require("@mui/material");
-const StyledScrollTableOnSm = (0, import_material.styled)("div")(({ theme }) => ({
+// src/components/ScrollTableOnSm.tsx
+import { styled } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+var StyledScrollTableOnSm = styled("div")(({ theme }) => ({
   [theme.breakpoints.down("md")]: {
     overflowX: "scroll"
   },
   display: "flex",
   flexGrow: 1
 }));
-const ScrollTableOnSm = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledScrollTableOnSm, { children });
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+var ScrollTableOnSm = ({ children }) => /* @__PURE__ */ jsx(StyledScrollTableOnSm, { children });
+export {
   ScrollTableOnSm
-});
+};
 //# sourceMappingURL=ScrollTableOnSm.js.map

package/dist/node/components/ScrollTableOnSm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ScrollTableOnSm.tsx"],"sourcesContent":["import { styled } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\n\nconst StyledScrollTableOnSm = styled('div')(({ theme }) => ({\n  [theme.breakpoints.down('md')]: {\n    overflowX: 'scroll',\n  },\n  display: 'flex',\n  flexGrow: 1,\n}))\n\nconst ScrollTableOnSm: React.FC<WithChildren> = ({ children }) => <StyledScrollTableOnSm>{children}</StyledScrollTableOnSm>\n\nexport { ScrollTableOnSm }\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAWkE;AAXlE,sBAAuB;AAGvB,MAAM,4BAAwB,wBAAO,KAAK,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EAC1D,CAAC,MAAM,YAAY,KAAK,IAAI,CAAC,GAAG;AAAA,IAC9B,WAAW;AAAA,EACb;AAAA,EACA,SAAS;AAAA,EACT,UAAU;AACZ,EAAE;AAEF,MAAM,kBAA0C,CAAC,EAAE,SAAS,MAAM,4CAAC,yBAAuB,UAAS;","names":[]}
+{"version":3,"sources":["../../../src/components/ScrollTableOnSm.tsx"],"sourcesContent":["import { styled } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\n\nconst StyledScrollTableOnSm = styled('div')(({ theme }) => ({\n  [theme.breakpoints.down('md')]: {\n    overflowX: 'scroll',\n  },\n  display: 'flex',\n  flexGrow: 1,\n}))\n\nconst ScrollTableOnSm: React.FC<WithChildren> = ({ children }) => <StyledScrollTableOnSm>{children}</StyledScrollTableOnSm>\n\nexport { ScrollTableOnSm }\n"],"mappings":";AAAA,SAAS,cAAc;AAW2C;AARlE,IAAM,wBAAwB,OAAO,KAAK,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EAC1D,CAAC,MAAM,YAAY,KAAK,IAAI,CAAC,GAAG;AAAA,IAC9B,WAAW;AAAA,EACb;AAAA,EACA,SAAS;AAAA,EACT,UAAU;AACZ,EAAE;AAEF,IAAM,kBAA0C,CAAC,EAAE,SAAS,MAAM,oBAAC,yBAAuB,UAAS;","names":[]}

package/dist/node/components/SectionSpacingRow/SectionSpacingRow.cjs

@@ -0,0 +1,52 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/SectionSpacingRow/SectionSpacingRow.tsx
+var SectionSpacingRow_exports = {};
+__export(SectionSpacingRow_exports, {
+  SectionSpacingRow: () => SectionSpacingRow
+});
+module.exports = __toCommonJS(SectionSpacingRow_exports);
+var import_material = require("@mui/material");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var SectionSpacingRow = (0, import_react.forwardRef)(({ children, sx, ...props }, ref) => {
+  const theme = (0, import_material.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_flexbox.FlexGrowRow,
+    {
+      sx: {
+        paddingBottom: { md: theme.spacing(5), xs: theme.spacing(5) },
+        paddingTop: { md: theme.spacing(5), xs: theme.spacing(5) },
+        ...sx
+      },
+      width: "100%",
+      ref,
+      ...props,
+      children
+    }
+  );
+});
+SectionSpacingRow.displayName = "SectionSpacingRow";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SectionSpacingRow
+});
+//# sourceMappingURL=SectionSpacingRow.cjs.map

package/dist/node/components/SectionSpacingRow/SectionSpacingRow.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/SectionSpacingRow/SectionSpacingRow.tsx"],"sourcesContent":["import { useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexGrowRow } from '@xylabs/react-flexbox'\nimport { forwardRef } from 'react'\n\nexport const SectionSpacingRow = forwardRef<HTMLDivElement, FlexBoxProps>(({ children, sx, ...props }, ref) => {\n  const theme = useTheme()\n  return (\n    <FlexGrowRow\n      sx={{\n        paddingBottom: { md: theme.spacing(5), xs: theme.spacing(5) },\n        paddingTop: { md: theme.spacing(5), xs: theme.spacing(5) },\n        ...sx,\n      }}\n      width=\"100%\"\n      ref={ref}\n      {...props}\n    >\n      {children}\n    </FlexGrowRow>\n  )\n})\n\nSectionSpacingRow.displayName = 'SectionSpacingRow'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAyB;AACzB,2BAA0C;AAC1C,mBAA2B;AAKvB;AAHG,IAAM,wBAAoB,yBAAyC,CAAC,EAAE,UAAU,IAAI,GAAG,MAAM,GAAG,QAAQ;AAC7G,QAAM,YAAQ,0BAAS;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,QACF,eAAe,EAAE,IAAI,MAAM,QAAQ,CAAC,GAAG,IAAI,MAAM,QAAQ,CAAC,EAAE;AAAA,QAC5D,YAAY,EAAE,IAAI,MAAM,QAAQ,CAAC,GAAG,IAAI,MAAM,QAAQ,CAAC,EAAE;AAAA,QACzD,GAAG;AAAA,MACL;AAAA,MACA,OAAM;AAAA,MACN;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,kBAAkB,cAAc;","names":[]}

package/dist/node/components/SectionSpacingRow/SectionSpacingRow.d.cts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const SectionSpacingRow: import("react").ForwardRefExoticComponent<import("@xylabs/react-flexbox").BusyBoxProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SectionSpacingRow.d.ts.map

package/dist/node/components/SectionSpacingRow/SectionSpacingRow.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionSpacingRow.d.ts","sourceRoot":"","sources":["../../../../src/components/SectionSpacingRow/SectionSpacingRow.tsx"],"names":[],"mappings":";AAIA,eAAO,MAAM,iBAAiB,yIAgB5B,CAAA"}

package/dist/node/components/SectionSpacingRow/SectionSpacingRow.js

@@ -1,34 +1,12 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var SectionSpacingRow_exports = {};
-__export(SectionSpacingRow_exports, {
-  SectionSpacingRow: () => SectionSpacingRow
-});
-module.exports = __toCommonJS(SectionSpacingRow_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_material = require("@mui/material");
-var import_react_flexbox = require("@xylabs/react-flexbox");
-var import_react = require("react");
-const SectionSpacingRow = (0, import_react.forwardRef)(({ children, sx, ...props }, ref) => {
-  const theme = (0, import_material.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react_flexbox.FlexGrowRow,
+// src/components/SectionSpacingRow/SectionSpacingRow.tsx
+import { useTheme } from "@mui/material";
+import { FlexGrowRow } from "@xylabs/react-flexbox";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var SectionSpacingRow = forwardRef(({ children, sx, ...props }, ref) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    FlexGrowRow,
     {
       sx: {
         paddingBottom: { md: theme.spacing(5), xs: theme.spacing(5) },
@@ -43,8 +21,7 @@ const SectionSpacingRow = (0, import_react.forwardRef)(({ children, sx, ...props
   );
 });
 SectionSpacingRow.displayName = "SectionSpacingRow";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+export {
   SectionSpacingRow
-});
+};
 //# sourceMappingURL=SectionSpacingRow.js.map

package/dist/node/components/SectionSpacingRow/SectionSpacingRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SectionSpacingRow/SectionSpacingRow.tsx"],"sourcesContent":["import { useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexGrowRow } from '@xylabs/react-flexbox'\nimport { forwardRef } from 'react'\n\nexport const SectionSpacingRow = forwardRef<HTMLDivElement, FlexBoxProps>(({ children, sx, ...props }, ref) => {\n  const theme = useTheme()\n  return (\n    <FlexGrowRow\n      sx={{\n        paddingBottom: { md: theme.spacing(5), xs: theme.spacing(5) },\n        paddingTop: { md: theme.spacing(5), xs: theme.spacing(5) },\n        ...sx,\n      }}\n      width=\"100%\"\n      ref={ref}\n      {...props}\n    >\n      {children}\n    </FlexGrowRow>\n  )\n})\n\nSectionSpacingRow.displayName = 'SectionSpacingRow'\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOI;AAPJ,sBAAyB;AACzB,2BAA0C;AAC1C,mBAA2B;AAEpB,MAAM,wBAAoB,yBAAyC,CAAC,EAAE,UAAU,IAAI,GAAG,MAAM,GAAG,QAAQ;AAC7G,QAAM,YAAQ,0BAAS;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,QACF,eAAe,EAAE,IAAI,MAAM,QAAQ,CAAC,GAAG,IAAI,MAAM,QAAQ,CAAC,EAAE;AAAA,QAC5D,YAAY,EAAE,IAAI,MAAM,QAAQ,CAAC,GAAG,IAAI,MAAM,QAAQ,CAAC,EAAE;AAAA,QACzD,GAAG;AAAA,MACL;AAAA,MACA,OAAM;AAAA,MACN;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,kBAAkB,cAAc;","names":[]}
+{"version":3,"sources":["../../../../src/components/SectionSpacingRow/SectionSpacingRow.tsx"],"sourcesContent":["import { useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexGrowRow } from '@xylabs/react-flexbox'\nimport { forwardRef } from 'react'\n\nexport const SectionSpacingRow = forwardRef<HTMLDivElement, FlexBoxProps>(({ children, sx, ...props }, ref) => {\n  const theme = useTheme()\n  return (\n    <FlexGrowRow\n      sx={{\n        paddingBottom: { md: theme.spacing(5), xs: theme.spacing(5) },\n        paddingTop: { md: theme.spacing(5), xs: theme.spacing(5) },\n        ...sx,\n      }}\n      width=\"100%\"\n      ref={ref}\n      {...props}\n    >\n      {children}\n    </FlexGrowRow>\n  )\n})\n\nSectionSpacingRow.displayName = 'SectionSpacingRow'\n"],"mappings":";AAAA,SAAS,gBAAgB;AACzB,SAAuB,mBAAmB;AAC1C,SAAS,kBAAkB;AAKvB;AAHG,IAAM,oBAAoB,WAAyC,CAAC,EAAE,UAAU,IAAI,GAAG,MAAM,GAAG,QAAQ;AAC7G,QAAM,QAAQ,SAAS;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,QACF,eAAe,EAAE,IAAI,MAAM,QAAQ,CAAC,GAAG,IAAI,MAAM,QAAQ,CAAC,EAAE;AAAA,QAC5D,YAAY,EAAE,IAAI,MAAM,QAAQ,CAAC,GAAG,IAAI,MAAM,QAAQ,CAAC,EAAE;AAAA,QACzD,GAAG;AAAA,MACL;AAAA,MACA,OAAM;AAAA,MACN;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,kBAAkB,cAAc;","names":[]}

package/dist/node/components/SectionSpacingRow/index.cjs

@@ -0,0 +1,54 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/SectionSpacingRow/index.ts
+var SectionSpacingRow_exports = {};
+__export(SectionSpacingRow_exports, {
+  SectionSpacingRow: () => SectionSpacingRow
+});
+module.exports = __toCommonJS(SectionSpacingRow_exports);
+
+// src/components/SectionSpacingRow/SectionSpacingRow.tsx
+var import_material = require("@mui/material");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var SectionSpacingRow = (0, import_react.forwardRef)(({ children, sx, ...props }, ref) => {
+  const theme = (0, import_material.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_flexbox.FlexGrowRow,
+    {
+      sx: {
+        paddingBottom: { md: theme.spacing(5), xs: theme.spacing(5) },
+        paddingTop: { md: theme.spacing(5), xs: theme.spacing(5) },
+        ...sx
+      },
+      width: "100%",
+      ref,
+      ...props,
+      children
+    }
+  );
+});
+SectionSpacingRow.displayName = "SectionSpacingRow";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SectionSpacingRow
+});
+//# sourceMappingURL=index.cjs.map

package/dist/node/components/SectionSpacingRow/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/SectionSpacingRow/index.ts","../../../../src/components/SectionSpacingRow/SectionSpacingRow.tsx"],"sourcesContent":["export * from './SectionSpacingRow'\n","import { useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexGrowRow } from '@xylabs/react-flexbox'\nimport { forwardRef } from 'react'\n\nexport const SectionSpacingRow = forwardRef<HTMLDivElement, FlexBoxProps>(({ children, sx, ...props }, ref) => {\n  const theme = useTheme()\n  return (\n    <FlexGrowRow\n      sx={{\n        paddingBottom: { md: theme.spacing(5), xs: theme.spacing(5) },\n        paddingTop: { md: theme.spacing(5), xs: theme.spacing(5) },\n        ...sx,\n      }}\n      width=\"100%\"\n      ref={ref}\n      {...props}\n    >\n      {children}\n    </FlexGrowRow>\n  )\n})\n\nSectionSpacingRow.displayName = 'SectionSpacingRow'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,sBAAyB;AACzB,2BAA0C;AAC1C,mBAA2B;AAKvB;AAHG,IAAM,wBAAoB,yBAAyC,CAAC,EAAE,UAAU,IAAI,GAAG,MAAM,GAAG,QAAQ;AAC7G,QAAM,YAAQ,0BAAS;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,QACF,eAAe,EAAE,IAAI,MAAM,QAAQ,CAAC,GAAG,IAAI,MAAM,QAAQ,CAAC,EAAE;AAAA,QAC5D,YAAY,EAAE,IAAI,MAAM,QAAQ,CAAC,GAAG,IAAI,MAAM,QAAQ,CAAC,EAAE;AAAA,QACzD,GAAG;AAAA,MACL;AAAA,MACA,OAAM;AAAA,MACN;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,kBAAkB,cAAc;","names":[]}

package/dist/node/components/SectionSpacingRow/index.d.cts

@@ -0,0 +1,2 @@
+export * from './SectionSpacingRow';
+//# sourceMappingURL=index.d.ts.map

package/dist/node/components/SectionSpacingRow/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SectionSpacingRow/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA"}

package/dist/node/components/SectionSpacingRow/index.js

@@ -1,23 +1,27 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var SectionSpacingRow_exports = {};
-module.exports = __toCommonJS(SectionSpacingRow_exports);
-__reExport(SectionSpacingRow_exports, require("./SectionSpacingRow"), module.exports);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ...require("./SectionSpacingRow")
+// src/components/SectionSpacingRow/SectionSpacingRow.tsx
+import { useTheme } from "@mui/material";
+import { FlexGrowRow } from "@xylabs/react-flexbox";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var SectionSpacingRow = forwardRef(({ children, sx, ...props }, ref) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    FlexGrowRow,
+    {
+      sx: {
+        paddingBottom: { md: theme.spacing(5), xs: theme.spacing(5) },
+        paddingTop: { md: theme.spacing(5), xs: theme.spacing(5) },
+        ...sx
+      },
+      width: "100%",
+      ref,
+      ...props,
+      children
+    }
+  );
 });
+SectionSpacingRow.displayName = "SectionSpacingRow";
+export {
+  SectionSpacingRow
+};
 //# sourceMappingURL=index.js.map

package/dist/node/components/SectionSpacingRow/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SectionSpacingRow/index.ts"],"sourcesContent":["export * from './SectionSpacingRow'\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,sCAAc,gCAAd;","names":[]}
+{"version":3,"sources":["../../../../src/components/SectionSpacingRow/SectionSpacingRow.tsx"],"sourcesContent":["import { useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexGrowRow } from '@xylabs/react-flexbox'\nimport { forwardRef } from 'react'\n\nexport const SectionSpacingRow = forwardRef<HTMLDivElement, FlexBoxProps>(({ children, sx, ...props }, ref) => {\n  const theme = useTheme()\n  return (\n    <FlexGrowRow\n      sx={{\n        paddingBottom: { md: theme.spacing(5), xs: theme.spacing(5) },\n        paddingTop: { md: theme.spacing(5), xs: theme.spacing(5) },\n        ...sx,\n      }}\n      width=\"100%\"\n      ref={ref}\n      {...props}\n    >\n      {children}\n    </FlexGrowRow>\n  )\n})\n\nSectionSpacingRow.displayName = 'SectionSpacingRow'\n"],"mappings":";AAAA,SAAS,gBAAgB;AACzB,SAAuB,mBAAmB;AAC1C,SAAS,kBAAkB;AAKvB;AAHG,IAAM,oBAAoB,WAAyC,CAAC,EAAE,UAAU,IAAI,GAAG,MAAM,GAAG,QAAQ;AAC7G,QAAM,QAAQ,SAAS;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,QACF,eAAe,EAAE,IAAI,MAAM,QAAQ,CAAC,GAAG,IAAI,MAAM,QAAQ,CAAC,EAAE;AAAA,QAC5D,YAAY,EAAE,IAAI,MAAM,QAAQ,CAAC,GAAG,IAAI,MAAM,QAAQ,CAAC,EAAE;AAAA,QACzD,GAAG;AAAA,MACL;AAAA,MACA,OAAM;AAAA,MACN;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,kBAAkB,cAAc;","names":[]}

package/dist/node/components/StyleGuide/AppBars.example.cjs

@@ -0,0 +1,46 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/StyleGuide/AppBars.example.tsx
+var AppBars_example_exports = {};
+__export(AppBars_example_exports, {
+  AppBarsExample: () => AppBarsExample
+});
+module.exports = __toCommonJS(AppBars_example_exports);
+var import_icons_material = require("@mui/icons-material");
+var import_material = require("@mui/material");
+var import_react_appbar = require("@xylabs/react-appbar");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_jsx_runtime = require("react/jsx-runtime");
+var AppBarsExample = () => {
+  const contextToolbar = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Toolbar, { disableGutters: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { edge: "start", color: "inherit", "aria-label": "menu", sx: { mr: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.Menu, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { variant: "h6", color: "inherit", component: "div", children: "Photos" })
+  ] });
+  const systemToolbar = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, { variant: "contained", children: "Get Started" });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { alignItems: "stretch", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { variant: "subtitle1", children: "App Bar" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_appbar.AppBarEx, { elevation: 0, contextToolbar, systemToolbar })
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AppBarsExample
+});
+//# sourceMappingURL=AppBars.example.cjs.map

package/dist/node/components/StyleGuide/AppBars.example.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/StyleGuide/AppBars.example.tsx"],"sourcesContent":["import { Menu as MenuIcon } from '@mui/icons-material'\nimport { Button, IconButton, Toolbar, Typography } from '@mui/material'\nimport { AppBarEx } from '@xylabs/react-appbar'\nimport { FlexCol } from '@xylabs/react-flexbox'\n\nexport const AppBarsExample = () => {\n  const contextToolbar = (\n    <Toolbar disableGutters>\n      <IconButton edge=\"start\" color=\"inherit\" aria-label=\"menu\" sx={{ mr: 2 }}>\n        <MenuIcon />\n      </IconButton>\n      <Typography variant=\"h6\" color=\"inherit\" component=\"div\">\n        Photos\n      </Typography>\n    </Toolbar>\n  )\n\n  const systemToolbar = <Button variant=\"contained\">Get Started</Button>\n\n  return (\n    <FlexCol alignItems=\"stretch\">\n      <Typography variant=\"subtitle1\">App Bar</Typography>\n      <AppBarEx elevation={0} contextToolbar={contextToolbar} systemToolbar={systemToolbar} />\n    </FlexCol>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAAiC;AACjC,sBAAwD;AACxD,0BAAyB;AACzB,2BAAwB;AAIpB;AAFG,IAAM,iBAAiB,MAAM;AAClC,QAAM,iBACJ,6CAAC,2BAAQ,gBAAc,MACrB;AAAA,gDAAC,8BAAW,MAAK,SAAQ,OAAM,WAAU,cAAW,QAAO,IAAI,EAAE,IAAI,EAAE,GACrE,sDAAC,sBAAAA,MAAA,EAAS,GACZ;AAAA,IACA,4CAAC,8BAAW,SAAQ,MAAK,OAAM,WAAU,WAAU,OAAM,oBAEzD;AAAA,KACF;AAGF,QAAM,gBAAgB,4CAAC,0BAAO,SAAQ,aAAY,yBAAW;AAE7D,SACE,6CAAC,gCAAQ,YAAW,WAClB;AAAA,gDAAC,8BAAW,SAAQ,aAAY,qBAAO;AAAA,IACvC,4CAAC,gCAAS,WAAW,GAAG,gBAAgC,eAA8B;AAAA,KACxF;AAEJ;","names":["MenuIcon"]}

package/dist/node/components/StyleGuide/AppBars.example.d.cts

@@ -0,0 +1,2 @@
+export declare const AppBarsExample: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AppBars.example.d.ts.map

package/dist/node/components/StyleGuide/AppBars.example.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppBars.example.d.ts","sourceRoot":"","sources":["../../../../src/components/StyleGuide/AppBars.example.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,cAAc,+CAoB1B,CAAA"}

package/dist/node/components/StyleGuide/AppBars.example.js

@@ -1,44 +1,21 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var AppBars_example_exports = {};
-__export(AppBars_example_exports, {
-  AppBarsExample: () => AppBarsExample
-});
-module.exports = __toCommonJS(AppBars_example_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_icons_material = require("@mui/icons-material");
-var import_material = require("@mui/material");
-var import_react_appbar = require("@xylabs/react-appbar");
-var import_react_flexbox = require("@xylabs/react-flexbox");
-const AppBarsExample = () => {
-  const contextToolbar = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Toolbar, { disableGutters: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { edge: "start", color: "inherit", "aria-label": "menu", sx: { mr: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.Menu, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { variant: "h6", color: "inherit", component: "div", children: "Photos" })
+// src/components/StyleGuide/AppBars.example.tsx
+import { Menu as MenuIcon } from "@mui/icons-material";
+import { Button, IconButton, Toolbar, Typography } from "@mui/material";
+import { AppBarEx } from "@xylabs/react-appbar";
+import { FlexCol } from "@xylabs/react-flexbox";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AppBarsExample = () => {
+  const contextToolbar = /* @__PURE__ */ jsxs(Toolbar, { disableGutters: true, children: [
+    /* @__PURE__ */ jsx(IconButton, { edge: "start", color: "inherit", "aria-label": "menu", sx: { mr: 2 }, children: /* @__PURE__ */ jsx(MenuIcon, {}) }),
+    /* @__PURE__ */ jsx(Typography, { variant: "h6", color: "inherit", component: "div", children: "Photos" })
   ] });
-  const systemToolbar = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, { variant: "contained", children: "Get Started" });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { alignItems: "stretch", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { variant: "subtitle1", children: "App Bar" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_appbar.AppBarEx, { elevation: 0, contextToolbar, systemToolbar })
+  const systemToolbar = /* @__PURE__ */ jsx(Button, { variant: "contained", children: "Get Started" });
+  return /* @__PURE__ */ jsxs(FlexCol, { alignItems: "stretch", children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: "App Bar" }),
+    /* @__PURE__ */ jsx(AppBarEx, { elevation: 0, contextToolbar, systemToolbar })
   ] });
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+export {
   AppBarsExample
-});
+};
 //# sourceMappingURL=AppBars.example.js.map

package/dist/node/components/StyleGuide/AppBars.example.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/StyleGuide/AppBars.example.tsx"],"sourcesContent":["import { Menu as MenuIcon } from '@mui/icons-material'\nimport { Button, IconButton, Toolbar, Typography } from '@mui/material'\nimport { AppBarEx } from '@xylabs/react-appbar'\nimport { FlexCol } from '@xylabs/react-flexbox'\n\nexport const AppBarsExample = () => {\n  const contextToolbar = (\n    <Toolbar disableGutters>\n      <IconButton edge=\"start\" color=\"inherit\" aria-label=\"menu\" sx={{ mr: 2 }}>\n        <MenuIcon />\n      </IconButton>\n      <Typography variant=\"h6\" color=\"inherit\" component=\"div\">\n        Photos\n      </Typography>\n    </Toolbar>\n  )\n\n  const systemToolbar = <Button variant=\"contained\">Get Started</Button>\n\n  return (\n    <FlexCol alignItems=\"stretch\">\n      <Typography variant=\"subtitle1\">App Bar</Typography>\n      <AppBarEx elevation={0} contextToolbar={contextToolbar} systemToolbar={systemToolbar} />\n    </FlexCol>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOI;AAPJ,4BAAiC;AACjC,sBAAwD;AACxD,0BAAyB;AACzB,2BAAwB;AAEjB,MAAM,iBAAiB,MAAM;AAClC,QAAM,iBACJ,6CAAC,2BAAQ,gBAAc,MACrB;AAAA,gDAAC,8BAAW,MAAK,SAAQ,OAAM,WAAU,cAAW,QAAO,IAAI,EAAE,IAAI,EAAE,GACrE,sDAAC,sBAAAA,MAAA,EAAS,GACZ;AAAA,IACA,4CAAC,8BAAW,SAAQ,MAAK,OAAM,WAAU,WAAU,OAAM,oBAEzD;AAAA,KACF;AAGF,QAAM,gBAAgB,4CAAC,0BAAO,SAAQ,aAAY,yBAAW;AAE7D,SACE,6CAAC,gCAAQ,YAAW,WAClB;AAAA,gDAAC,8BAAW,SAAQ,aAAY,qBAAO;AAAA,IACvC,4CAAC,gCAAS,WAAW,GAAG,gBAAgC,eAA8B;AAAA,KACxF;AAEJ;","names":["MenuIcon"]}
+{"version":3,"sources":["../../../../src/components/StyleGuide/AppBars.example.tsx"],"sourcesContent":["import { Menu as MenuIcon } from '@mui/icons-material'\nimport { Button, IconButton, Toolbar, Typography } from '@mui/material'\nimport { AppBarEx } from '@xylabs/react-appbar'\nimport { FlexCol } from '@xylabs/react-flexbox'\n\nexport const AppBarsExample = () => {\n  const contextToolbar = (\n    <Toolbar disableGutters>\n      <IconButton edge=\"start\" color=\"inherit\" aria-label=\"menu\" sx={{ mr: 2 }}>\n        <MenuIcon />\n      </IconButton>\n      <Typography variant=\"h6\" color=\"inherit\" component=\"div\">\n        Photos\n      </Typography>\n    </Toolbar>\n  )\n\n  const systemToolbar = <Button variant=\"contained\">Get Started</Button>\n\n  return (\n    <FlexCol alignItems=\"stretch\">\n      <Typography variant=\"subtitle1\">App Bar</Typography>\n      <AppBarEx elevation={0} contextToolbar={contextToolbar} systemToolbar={systemToolbar} />\n    </FlexCol>\n  )\n}\n"],"mappings":";AAAA,SAAS,QAAQ,gBAAgB;AACjC,SAAS,QAAQ,YAAY,SAAS,kBAAkB;AACxD,SAAS,gBAAgB;AACzB,SAAS,eAAe;AAIpB,SAEI,KAFJ;AAFG,IAAM,iBAAiB,MAAM;AAClC,QAAM,iBACJ,qBAAC,WAAQ,gBAAc,MACrB;AAAA,wBAAC,cAAW,MAAK,SAAQ,OAAM,WAAU,cAAW,QAAO,IAAI,EAAE,IAAI,EAAE,GACrE,8BAAC,YAAS,GACZ;AAAA,IACA,oBAAC,cAAW,SAAQ,MAAK,OAAM,WAAU,WAAU,OAAM,oBAEzD;AAAA,KACF;AAGF,QAAM,gBAAgB,oBAAC,UAAO,SAAQ,aAAY,yBAAW;AAE7D,SACE,qBAAC,WAAQ,YAAW,WAClB;AAAA,wBAAC,cAAW,SAAQ,aAAY,qBAAO;AAAA,IACvC,oBAAC,YAAS,WAAW,GAAG,gBAAgC,eAA8B;AAAA,KACxF;AAEJ;","names":[]}

package/dist/node/components/StyleGuide/Buttons.example.cjs

@@ -0,0 +1,58 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/StyleGuide/Buttons.example.tsx
+var Buttons_example_exports = {};
+__export(Buttons_example_exports, {
+  ButtonsExample: () => ButtonsExample
+});
+module.exports = __toCommonJS(Buttons_example_exports);
+var import_material = require("@mui/material");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_jsx_runtime = require("react/jsx-runtime");
+var colors = ["primary", "secondary"];
+var variants = ["text", "contained", "outlined"];
+var ButtonsExample = ({ ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { ...props, alignItems: "stretch", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { variant: "subtitle1", children: "Buttons" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { variant: "subtitle2", children: "Buttons" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexRow, { alignItems: "stretch", mb: 2, children: colors.map((color) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, { variant: "contained", color, children: color }),
+      "\xA0"
+    ] })) }),
+    variants.map((variant) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { alignItems: "stretch", mb: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Typography, { variant: "subtitle2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { textTransform: "capitalize" }, children: variant }),
+        " Buttons"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexRow, { alignItems: "stretch", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, { variant, children: "Button" }),
+        "\xA0",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, { variant, disabled: true, children: "Disabled" }),
+        "\xA0",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, { variant, href: "#href", children: "Link" })
+      ] })
+    ] }, `btn-${variant}`))
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ButtonsExample
+});
+//# sourceMappingURL=Buttons.example.cjs.map

package/dist/node/components/StyleGuide/Buttons.example.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/StyleGuide/Buttons.example.tsx"],"sourcesContent":["import { Button, ButtonTypeMap, Typography } from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\n\nconst colors = ['primary', 'secondary'] as ButtonTypeMap['props']['color'][]\nconst variants = ['text', 'contained', 'outlined'] as ButtonTypeMap['props']['variant'][]\n\nexport const ButtonsExample: React.FC = ({ ...props }) => {\n  return (\n    <FlexCol {...props} alignItems=\"stretch\">\n      <Typography variant=\"subtitle1\">Buttons</Typography>\n      <Typography variant=\"subtitle2\">Buttons</Typography>\n      <FlexRow alignItems=\"stretch\" mb={2}>\n        {colors.map((color) => (\n          <>\n            <Button variant=\"contained\" color={color}>\n              {color}\n            </Button>\n            &nbsp;\n          </>\n        ))}\n      </FlexRow>\n      {variants.map((variant) => (\n        <FlexCol key={`btn-${variant}`} alignItems=\"stretch\" mb={2}>\n          <Typography variant=\"subtitle2\">\n            <span style={{ textTransform: 'capitalize' }}>{variant}</span> Buttons\n          </Typography>\n          <FlexRow alignItems=\"stretch\">\n            <Button variant={variant}>Button</Button>&nbsp;\n            <Button variant={variant} disabled>\n              Disabled\n            </Button>\n            &nbsp;\n            <Button variant={variant} href=\"#href\">\n              Link\n            </Button>\n          </FlexRow>\n        </FlexCol>\n      ))}\n    </FlexCol>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAkD;AAClD,2BAAiC;AAQ3B;AANN,IAAM,SAAS,CAAC,WAAW,WAAW;AACtC,IAAM,WAAW,CAAC,QAAQ,aAAa,UAAU;AAE1C,IAAM,iBAA2B,CAAC,EAAE,GAAG,MAAM,MAAM;AACxD,SACE,6CAAC,gCAAS,GAAG,OAAO,YAAW,WAC7B;AAAA,gDAAC,8BAAW,SAAQ,aAAY,qBAAO;AAAA,IACvC,4CAAC,8BAAW,SAAQ,aAAY,qBAAO;AAAA,IACvC,4CAAC,gCAAQ,YAAW,WAAU,IAAI,GAC/B,iBAAO,IAAI,CAAC,UACX,4EACE;AAAA,kDAAC,0BAAO,SAAQ,aAAY,OACzB,iBACH;AAAA,MAAS;AAAA,OAEX,CACD,GACH;AAAA,IACC,SAAS,IAAI,CAAC,YACb,6CAAC,gCAA+B,YAAW,WAAU,IAAI,GACvD;AAAA,mDAAC,8BAAW,SAAQ,aAClB;AAAA,oDAAC,UAAK,OAAO,EAAE,eAAe,aAAa,GAAI,mBAAQ;AAAA,QAAO;AAAA,SAChE;AAAA,MACA,6CAAC,gCAAQ,YAAW,WAClB;AAAA,oDAAC,0BAAO,SAAkB,oBAAM;AAAA,QAAS;AAAA,QACzC,4CAAC,0BAAO,SAAkB,UAAQ,MAAC,sBAEnC;AAAA,QAAS;AAAA,QAET,4CAAC,0BAAO,SAAkB,MAAK,SAAQ,kBAEvC;AAAA,SACF;AAAA,SAbY,OAAO,OAAO,EAc5B,CACD;AAAA,KACH;AAEJ;","names":[]}

package/dist/node/components/StyleGuide/Buttons.example.d.cts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const ButtonsExample: React.FC;
+//# sourceMappingURL=Buttons.example.d.ts.map

package/dist/node/components/StyleGuide/Buttons.example.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Buttons.example.d.ts","sourceRoot":"","sources":["../../../../src/components/StyleGuide/Buttons.example.tsx"],"names":[],"mappings":";AAMA,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAkClC,CAAA"}