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

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

@@ -1,56 +1,33 @@
-"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 Buttons_example_exports = {};
-__export(Buttons_example_exports, {
-  ButtonsExample: () => ButtonsExample
-});
-module.exports = __toCommonJS(Buttons_example_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_material = require("@mui/material");
-var import_react_flexbox = require("@xylabs/react-flexbox");
-const colors = ["primary", "secondary"];
-const variants = ["text", "contained", "outlined"];
-const 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 }),
+// src/components/StyleGuide/Buttons.example.tsx
+import { Button, Typography } from "@mui/material";
+import { FlexCol, FlexRow } from "@xylabs/react-flexbox";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var colors = ["primary", "secondary"];
+var variants = ["text", "contained", "outlined"];
+var ButtonsExample = ({ ...props }) => {
+  return /* @__PURE__ */ jsxs(FlexCol, { ...props, alignItems: "stretch", children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: "Buttons" }),
+    /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: "Buttons" }),
+    /* @__PURE__ */ jsx(FlexRow, { alignItems: "stretch", mb: 2, children: colors.map((color) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(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 }),
+    variants.map((variant) => /* @__PURE__ */ jsxs(FlexCol, { alignItems: "stretch", mb: 2, children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "subtitle2", children: [
+        /* @__PURE__ */ 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" }),
+      /* @__PURE__ */ jsxs(FlexRow, { alignItems: "stretch", children: [
+        /* @__PURE__ */ jsx(Button, { variant, children: "Button" }),
         "\xA0",
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, { variant, disabled: true, children: "Disabled" }),
+        /* @__PURE__ */ jsx(Button, { variant, disabled: true, children: "Disabled" }),
         "\xA0",
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, { variant, href: "#href", children: "Link" })
+        /* @__PURE__ */ jsx(Button, { variant, href: "#href", children: "Link" })
       ] })
     ] }, `btn-${variant}`))
   ] });
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+export {
   ButtonsExample
-});
+};
 //# sourceMappingURL=Buttons.example.js.map

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

@@ -1 +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;AASM;AATN,sBAAkD;AAClD,2BAAiC;AAEjC,MAAM,SAAS,CAAC,WAAW,WAAW;AACtC,MAAM,WAAW,CAAC,QAAQ,aAAa,UAAU;AAE1C,MAAM,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":[]}
+{"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,SAAS,QAAuB,kBAAkB;AAClD,SAAS,SAAS,eAAe;AAQ3B,SAII,UAJJ,KAII,YAJJ;AANN,IAAM,SAAS,CAAC,WAAW,WAAW;AACtC,IAAM,WAAW,CAAC,QAAQ,aAAa,UAAU;AAE1C,IAAM,iBAA2B,CAAC,EAAE,GAAG,MAAM,MAAM;AACxD,SACE,qBAAC,WAAS,GAAG,OAAO,YAAW,WAC7B;AAAA,wBAAC,cAAW,SAAQ,aAAY,qBAAO;AAAA,IACvC,oBAAC,cAAW,SAAQ,aAAY,qBAAO;AAAA,IACvC,oBAAC,WAAQ,YAAW,WAAU,IAAI,GAC/B,iBAAO,IAAI,CAAC,UACX,iCACE;AAAA,0BAAC,UAAO,SAAQ,aAAY,OACzB,iBACH;AAAA,MAAS;AAAA,OAEX,CACD,GACH;AAAA,IACC,SAAS,IAAI,CAAC,YACb,qBAAC,WAA+B,YAAW,WAAU,IAAI,GACvD;AAAA,2BAAC,cAAW,SAAQ,aAClB;AAAA,4BAAC,UAAK,OAAO,EAAE,eAAe,aAAa,GAAI,mBAAQ;AAAA,QAAO;AAAA,SAChE;AAAA,MACA,qBAAC,WAAQ,YAAW,WAClB;AAAA,4BAAC,UAAO,SAAkB,oBAAM;AAAA,QAAS;AAAA,QACzC,oBAAC,UAAO,SAAkB,UAAQ,MAAC,sBAEnC;AAAA,QAAS;AAAA,QAET,oBAAC,UAAO,SAAkB,MAAK,SAAQ,kBAEvC;AAAA,SACF;AAAA,SAbY,OAAO,OAAO,EAc5B,CACD;AAAA,KACH;AAEJ;","names":[]}

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

@@ -0,0 +1,42 @@
+"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/Papers.example.tsx
+var Papers_example_exports = {};
+__export(Papers_example_exports, {
+  PapersExample: () => PapersExample
+});
+module.exports = __toCommonJS(Papers_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 PapersExample = ({ ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { variant: "subtitle1", children: "Paper" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexRow, { alignItems: "stretch", children: Array.from({ length: 5 }, () => void 0).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexCol, { marginRight: 2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Paper, { elevation: index * 2, color: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Typography, { margin: 1, children: [
+      "Elevation-",
+      index * 3
+    ] }) }, `paper-${index}`) }, `paper-${index}`)) })
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PapersExample
+});
+//# sourceMappingURL=Papers.example.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/StyleGuide/Papers.example.tsx"],"sourcesContent":["import { Paper, Typography } from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\n\nexport const PapersExample: React.FC = ({ ...props }) => {\n  return (\n    <FlexCol {...props}>\n      <Typography variant=\"subtitle1\">Paper</Typography>\n      <FlexRow alignItems=\"stretch\">\n        {Array.from({ length: 5 }, () => undefined).map((_, index) => (\n          <FlexCol key={`paper-${index}`} marginRight={2}>\n            <Paper key={`paper-${index}`} elevation={index * 2} color=\"secondary\">\n              <Typography margin={1}>Elevation-{index * 3}</Typography>\n            </Paper>\n          </FlexCol>\n        ))}\n      </FlexRow>\n    </FlexCol>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAkC;AAClC,2BAAiC;AAK3B;AAHC,IAAM,gBAA0B,CAAC,EAAE,GAAG,MAAM,MAAM;AACvD,SACE,6CAAC,gCAAS,GAAG,OACX;AAAA,gDAAC,8BAAW,SAAQ,aAAY,mBAAK;AAAA,IACrC,4CAAC,gCAAQ,YAAW,WACjB,gBAAM,KAAK,EAAE,QAAQ,EAAE,GAAG,MAAM,MAAS,EAAE,IAAI,CAAC,GAAG,UAClD,4CAAC,gCAA+B,aAAa,GAC3C,sDAAC,yBAA6B,WAAW,QAAQ,GAAG,OAAM,aACxD,uDAAC,8BAAW,QAAQ,GAAG;AAAA;AAAA,MAAW,QAAQ;AAAA,OAAE,KADlC,SAAS,KAAK,EAE1B,KAHY,SAAS,KAAK,EAI5B,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}

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

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

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

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

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

@@ -1,40 +1,17 @@
-"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 Papers_example_exports = {};
-__export(Papers_example_exports, {
-  PapersExample: () => PapersExample
-});
-module.exports = __toCommonJS(Papers_example_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_material = require("@mui/material");
-var import_react_flexbox = require("@xylabs/react-flexbox");
-const PapersExample = ({ ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { variant: "subtitle1", children: "Paper" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexRow, { alignItems: "stretch", children: Array.from({ length: 5 }, () => void 0).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexCol, { marginRight: 2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Paper, { elevation: index * 2, color: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Typography, { margin: 1, children: [
+// src/components/StyleGuide/Papers.example.tsx
+import { Paper, Typography } from "@mui/material";
+import { FlexCol, FlexRow } from "@xylabs/react-flexbox";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PapersExample = ({ ...props }) => {
+  return /* @__PURE__ */ jsxs(FlexCol, { ...props, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: "Paper" }),
+    /* @__PURE__ */ jsx(FlexRow, { alignItems: "stretch", children: Array.from({ length: 5 }, () => void 0).map((_, index) => /* @__PURE__ */ jsx(FlexCol, { marginRight: 2, children: /* @__PURE__ */ jsx(Paper, { elevation: index * 2, color: "secondary", children: /* @__PURE__ */ jsxs(Typography, { margin: 1, children: [
       "Elevation-",
       index * 3
     ] }) }, `paper-${index}`) }, `paper-${index}`)) })
   ] });
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+export {
   PapersExample
-});
+};
 //# sourceMappingURL=Papers.example.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/StyleGuide/Papers.example.tsx"],"sourcesContent":["import { Paper, Typography } from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\n\nexport const PapersExample: React.FC = ({ ...props }) => {\n  return (\n    <FlexCol {...props}>\n      <Typography variant=\"subtitle1\">Paper</Typography>\n      <FlexRow alignItems=\"stretch\">\n        {Array.from({ length: 5 }, () => undefined).map((_, index) => (\n          <FlexCol key={`paper-${index}`} marginRight={2}>\n            <Paper key={`paper-${index}`} elevation={index * 2} color=\"secondary\">\n              <Typography margin={1}>Elevation-{index * 3}</Typography>\n            </Paper>\n          </FlexCol>\n        ))}\n      </FlexRow>\n    </FlexCol>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMM;AANN,sBAAkC;AAClC,2BAAiC;AAE1B,MAAM,gBAA0B,CAAC,EAAE,GAAG,MAAM,MAAM;AACvD,SACE,6CAAC,gCAAS,GAAG,OACX;AAAA,gDAAC,8BAAW,SAAQ,aAAY,mBAAK;AAAA,IACrC,4CAAC,gCAAQ,YAAW,WACjB,gBAAM,KAAK,EAAE,QAAQ,EAAE,GAAG,MAAM,MAAS,EAAE,IAAI,CAAC,GAAG,UAClD,4CAAC,gCAA+B,aAAa,GAC3C,sDAAC,yBAA6B,WAAW,QAAQ,GAAG,OAAM,aACxD,uDAAC,8BAAW,QAAQ,GAAG;AAAA;AAAA,MAAW,QAAQ;AAAA,OAAE,KADlC,SAAS,KAAK,EAE1B,KAHY,SAAS,KAAK,EAI5B,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/StyleGuide/Papers.example.tsx"],"sourcesContent":["import { Paper, Typography } from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\n\nexport const PapersExample: React.FC = ({ ...props }) => {\n  return (\n    <FlexCol {...props}>\n      <Typography variant=\"subtitle1\">Paper</Typography>\n      <FlexRow alignItems=\"stretch\">\n        {Array.from({ length: 5 }, () => undefined).map((_, index) => (\n          <FlexCol key={`paper-${index}`} marginRight={2}>\n            <Paper key={`paper-${index}`} elevation={index * 2} color=\"secondary\">\n              <Typography margin={1}>Elevation-{index * 3}</Typography>\n            </Paper>\n          </FlexCol>\n        ))}\n      </FlexRow>\n    </FlexCol>\n  )\n}\n"],"mappings":";AAAA,SAAS,OAAO,kBAAkB;AAClC,SAAS,SAAS,eAAe;AAK3B,cAKQ,YALR;AAHC,IAAM,gBAA0B,CAAC,EAAE,GAAG,MAAM,MAAM;AACvD,SACE,qBAAC,WAAS,GAAG,OACX;AAAA,wBAAC,cAAW,SAAQ,aAAY,mBAAK;AAAA,IACrC,oBAAC,WAAQ,YAAW,WACjB,gBAAM,KAAK,EAAE,QAAQ,EAAE,GAAG,MAAM,MAAS,EAAE,IAAI,CAAC,GAAG,UAClD,oBAAC,WAA+B,aAAa,GAC3C,8BAAC,SAA6B,WAAW,QAAQ,GAAG,OAAM,aACxD,+BAAC,cAAW,QAAQ,GAAG;AAAA;AAAA,MAAW,QAAQ;AAAA,OAAE,KADlC,SAAS,KAAK,EAE1B,KAHY,SAAS,KAAK,EAI5B,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}

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

@@ -0,0 +1,132 @@
+"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/StyleGuide.example.tsx
+var StyleGuide_example_exports = {};
+__export(StyleGuide_example_exports, {
+  StyleGuideExample: () => StyleGuideExample
+});
+module.exports = __toCommonJS(StyleGuide_example_exports);
+var import_material5 = require("@mui/material");
+var import_react_flexbox5 = require("@xylabs/react-flexbox");
+
+// src/components/StyleGuide/AppBars.example.tsx
+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 })
+  ] });
+};
+
+// src/components/StyleGuide/Buttons.example.tsx
+var import_material2 = require("@mui/material");
+var import_react_flexbox2 = require("@xylabs/react-flexbox");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var colors = ["primary", "secondary"];
+var variants = ["text", "contained", "outlined"];
+var ButtonsExample = ({ ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_flexbox2.FlexCol, { ...props, alignItems: "stretch", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { variant: "subtitle1", children: "Buttons" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { variant: "subtitle2", children: "Buttons" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_flexbox2.FlexRow, { alignItems: "stretch", mb: 2, children: colors.map((color) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Button, { variant: "contained", color, children: color }),
+      "\xA0"
+    ] })) }),
+    variants.map((variant) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_flexbox2.FlexCol, { alignItems: "stretch", mb: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Typography, { variant: "subtitle2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { textTransform: "capitalize" }, children: variant }),
+        " Buttons"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_flexbox2.FlexRow, { alignItems: "stretch", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Button, { variant, children: "Button" }),
+        "\xA0",
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Button, { variant, disabled: true, children: "Disabled" }),
+        "\xA0",
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Button, { variant, href: "#href", children: "Link" })
+      ] })
+    ] }, `btn-${variant}`))
+  ] });
+};
+
+// src/components/StyleGuide/Papers.example.tsx
+var import_material3 = require("@mui/material");
+var import_react_flexbox3 = require("@xylabs/react-flexbox");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var PapersExample = ({ ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_flexbox3.FlexCol, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Typography, { variant: "subtitle1", children: "Paper" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_flexbox3.FlexRow, { alignItems: "stretch", children: Array.from({ length: 5 }, () => void 0).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_flexbox3.FlexCol, { marginRight: 2, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Paper, { elevation: index * 2, color: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_material3.Typography, { margin: 1, children: [
+      "Elevation-",
+      index * 3
+    ] }) }, `paper-${index}`) }, `paper-${index}`)) })
+  ] });
+};
+
+// src/components/StyleGuide/Texts.example.tsx
+var import_material4 = require("@mui/material");
+var import_react_flexbox4 = require("@xylabs/react-flexbox");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var TextsExample = () => {
+  const variantList = [
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "subtitle1",
+    "subtitle2",
+    "body1",
+    "body2",
+    "button",
+    "caption",
+    "overline"
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_flexbox4.FlexCol, { children: variantList.map((variant) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_material4.Typography, { variant, children: [
+    variant,
+    " - XYO Network"
+  ] }, variant)) });
+};
+
+// src/components/StyleGuide/StyleGuide.example.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var StyleGuideExample = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_flexbox5.FlexCol, { alignItems: "stretch", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.Typography, { variant: "h5", children: "XYO Network Style Guide" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AppBarsExample, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ButtonsExample, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PapersExample, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TextsExample, {})
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StyleGuideExample
+});
+//# sourceMappingURL=StyleGuide.example.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/StyleGuide/StyleGuide.example.tsx","../../../../src/components/StyleGuide/AppBars.example.tsx","../../../../src/components/StyleGuide/Buttons.example.tsx","../../../../src/components/StyleGuide/Papers.example.tsx","../../../../src/components/StyleGuide/Texts.example.tsx"],"sourcesContent":["import { Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\n\nimport { AppBarsExample } from './AppBars.example'\nimport { ButtonsExample } from './Buttons.example'\nimport { PapersExample } from './Papers.example'\nimport { TextsExample } from './Texts.example'\n\nexport const StyleGuideExample: React.FC = () => {\n  return (\n    <FlexCol alignItems=\"stretch\">\n      <Typography variant=\"h5\">XYO Network Style Guide</Typography>\n      <AppBarsExample />\n      <ButtonsExample />\n      <PapersExample />\n      <TextsExample />\n    </FlexCol>\n  )\n}\n","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","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","import { Paper, Typography } from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\n\nexport const PapersExample: React.FC = ({ ...props }) => {\n  return (\n    <FlexCol {...props}>\n      <Typography variant=\"subtitle1\">Paper</Typography>\n      <FlexRow alignItems=\"stretch\">\n        {Array.from({ length: 5 }, () => undefined).map((_, index) => (\n          <FlexCol key={`paper-${index}`} marginRight={2}>\n            <Paper key={`paper-${index}`} elevation={index * 2} color=\"secondary\">\n              <Typography margin={1}>Elevation-{index * 3}</Typography>\n            </Paper>\n          </FlexCol>\n        ))}\n      </FlexRow>\n    </FlexCol>\n  )\n}\n","import { Typography, TypographyVariant } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\n\nexport const TextsExample = () => {\n  const variantList: TypographyVariant[] = [\n    'h1',\n    'h2',\n    'h3',\n    'h4',\n    'h5',\n    'h6',\n    'subtitle1',\n    'subtitle2',\n    'body1',\n    'body2',\n    'button',\n    'caption',\n    'overline',\n  ]\n\n  return (\n    <FlexCol>\n      {variantList.map((variant) => (\n        <Typography key={variant} variant={variant}>\n          {variant} - XYO Network\n        </Typography>\n      ))}\n    </FlexCol>\n  )\n}\n"],"mappings":"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","names":["import_material","import_react_flexbox","MenuIcon","import_material","import_react_flexbox","import_jsx_runtime","import_material","import_react_flexbox","import_jsx_runtime","import_material","import_react_flexbox","import_jsx_runtime","import_jsx_runtime"]}

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

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

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

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

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

@@ -1,44 +1,107 @@
-"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 });
+// src/components/StyleGuide/StyleGuide.example.tsx
+import { Typography as Typography5 } from "@mui/material";
+import { FlexCol as FlexCol5 } from "@xylabs/react-flexbox";
+
+// 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__ */ 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 })
+  ] });
 };
-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;
+
+// src/components/StyleGuide/Buttons.example.tsx
+import { Button as Button2, Typography as Typography2 } from "@mui/material";
+import { FlexCol as FlexCol2, FlexRow } from "@xylabs/react-flexbox";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var colors = ["primary", "secondary"];
+var variants = ["text", "contained", "outlined"];
+var ButtonsExample = ({ ...props }) => {
+  return /* @__PURE__ */ jsxs2(FlexCol2, { ...props, alignItems: "stretch", children: [
+    /* @__PURE__ */ jsx2(Typography2, { variant: "subtitle1", children: "Buttons" }),
+    /* @__PURE__ */ jsx2(Typography2, { variant: "subtitle2", children: "Buttons" }),
+    /* @__PURE__ */ jsx2(FlexRow, { alignItems: "stretch", mb: 2, children: colors.map((color) => /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx2(Button2, { variant: "contained", color, children: color }),
+      "\xA0"
+    ] })) }),
+    variants.map((variant) => /* @__PURE__ */ jsxs2(FlexCol2, { alignItems: "stretch", mb: 2, children: [
+      /* @__PURE__ */ jsxs2(Typography2, { variant: "subtitle2", children: [
+        /* @__PURE__ */ jsx2("span", { style: { textTransform: "capitalize" }, children: variant }),
+        " Buttons"
+      ] }),
+      /* @__PURE__ */ jsxs2(FlexRow, { alignItems: "stretch", children: [
+        /* @__PURE__ */ jsx2(Button2, { variant, children: "Button" }),
+        "\xA0",
+        /* @__PURE__ */ jsx2(Button2, { variant, disabled: true, children: "Disabled" }),
+        "\xA0",
+        /* @__PURE__ */ jsx2(Button2, { variant, href: "#href", children: "Link" })
+      ] })
+    ] }, `btn-${variant}`))
+  ] });
 };
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var StyleGuide_example_exports = {};
-__export(StyleGuide_example_exports, {
-  StyleGuideExample: () => StyleGuideExample
-});
-module.exports = __toCommonJS(StyleGuide_example_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_AppBars = require("./AppBars.example");
-var import_Buttons = require("./Buttons.example");
-var import_Papers = require("./Papers.example");
-var import_Texts = require("./Texts.example");
-const StyleGuideExample = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { alignItems: "stretch", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { variant: "h5", children: "XYO Network Style Guide" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AppBars.AppBarsExample, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Buttons.ButtonsExample, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Papers.PapersExample, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Texts.TextsExample, {})
+
+// src/components/StyleGuide/Papers.example.tsx
+import { Paper, Typography as Typography3 } from "@mui/material";
+import { FlexCol as FlexCol3, FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var PapersExample = ({ ...props }) => {
+  return /* @__PURE__ */ jsxs3(FlexCol3, { ...props, children: [
+    /* @__PURE__ */ jsx3(Typography3, { variant: "subtitle1", children: "Paper" }),
+    /* @__PURE__ */ jsx3(FlexRow2, { alignItems: "stretch", children: Array.from({ length: 5 }, () => void 0).map((_, index) => /* @__PURE__ */ jsx3(FlexCol3, { marginRight: 2, children: /* @__PURE__ */ jsx3(Paper, { elevation: index * 2, color: "secondary", children: /* @__PURE__ */ jsxs3(Typography3, { margin: 1, children: [
+      "Elevation-",
+      index * 3
+    ] }) }, `paper-${index}`) }, `paper-${index}`)) })
   ] });
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+
+// src/components/StyleGuide/Texts.example.tsx
+import { Typography as Typography4 } from "@mui/material";
+import { FlexCol as FlexCol4 } from "@xylabs/react-flexbox";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var TextsExample = () => {
+  const variantList = [
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "subtitle1",
+    "subtitle2",
+    "body1",
+    "body2",
+    "button",
+    "caption",
+    "overline"
+  ];
+  return /* @__PURE__ */ jsx4(FlexCol4, { children: variantList.map((variant) => /* @__PURE__ */ jsxs4(Typography4, { variant, children: [
+    variant,
+    " - XYO Network"
+  ] }, variant)) });
+};
+
+// src/components/StyleGuide/StyleGuide.example.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var StyleGuideExample = () => {
+  return /* @__PURE__ */ jsxs5(FlexCol5, { alignItems: "stretch", children: [
+    /* @__PURE__ */ jsx5(Typography5, { variant: "h5", children: "XYO Network Style Guide" }),
+    /* @__PURE__ */ jsx5(AppBarsExample, {}),
+    /* @__PURE__ */ jsx5(ButtonsExample, {}),
+    /* @__PURE__ */ jsx5(PapersExample, {}),
+    /* @__PURE__ */ jsx5(TextsExample, {})
+  ] });
+};
+export {
   StyleGuideExample
-});
+};
 //# sourceMappingURL=StyleGuide.example.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/StyleGuide/StyleGuide.example.tsx"],"sourcesContent":["import { Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\n\nimport { AppBarsExample } from './AppBars.example'\nimport { ButtonsExample } from './Buttons.example'\nimport { PapersExample } from './Papers.example'\nimport { TextsExample } from './Texts.example'\n\nexport const StyleGuideExample: React.FC = () => {\n  return (\n    <FlexCol alignItems=\"stretch\">\n      <Typography variant=\"h5\">XYO Network Style Guide</Typography>\n      <AppBarsExample />\n      <ButtonsExample />\n      <PapersExample />\n      <TextsExample />\n    </FlexCol>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUI;AAVJ,sBAA2B;AAC3B,2BAAwB;AAExB,qBAA+B;AAC/B,qBAA+B;AAC/B,oBAA8B;AAC9B,mBAA6B;AAEtB,MAAM,oBAA8B,MAAM;AAC/C,SACE,6CAAC,gCAAQ,YAAW,WAClB;AAAA,gDAAC,8BAAW,SAAQ,MAAK,qCAAuB;AAAA,IAChD,4CAAC,iCAAe;AAAA,IAChB,4CAAC,iCAAe;AAAA,IAChB,4CAAC,+BAAc;AAAA,IACf,4CAAC,6BAAa;AAAA,KAChB;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/StyleGuide/StyleGuide.example.tsx","../../../../src/components/StyleGuide/AppBars.example.tsx","../../../../src/components/StyleGuide/Buttons.example.tsx","../../../../src/components/StyleGuide/Papers.example.tsx","../../../../src/components/StyleGuide/Texts.example.tsx"],"sourcesContent":["import { Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\n\nimport { AppBarsExample } from './AppBars.example'\nimport { ButtonsExample } from './Buttons.example'\nimport { PapersExample } from './Papers.example'\nimport { TextsExample } from './Texts.example'\n\nexport const StyleGuideExample: React.FC = () => {\n  return (\n    <FlexCol alignItems=\"stretch\">\n      <Typography variant=\"h5\">XYO Network Style Guide</Typography>\n      <AppBarsExample />\n      <ButtonsExample />\n      <PapersExample />\n      <TextsExample />\n    </FlexCol>\n  )\n}\n","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","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","import { Paper, Typography } from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\n\nexport const PapersExample: React.FC = ({ ...props }) => {\n  return (\n    <FlexCol {...props}>\n      <Typography variant=\"subtitle1\">Paper</Typography>\n      <FlexRow alignItems=\"stretch\">\n        {Array.from({ length: 5 }, () => undefined).map((_, index) => (\n          <FlexCol key={`paper-${index}`} marginRight={2}>\n            <Paper key={`paper-${index}`} elevation={index * 2} color=\"secondary\">\n              <Typography margin={1}>Elevation-{index * 3}</Typography>\n            </Paper>\n          </FlexCol>\n        ))}\n      </FlexRow>\n    </FlexCol>\n  )\n}\n","import { Typography, TypographyVariant } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\n\nexport const TextsExample = () => {\n  const variantList: TypographyVariant[] = [\n    'h1',\n    'h2',\n    'h3',\n    'h4',\n    'h5',\n    'h6',\n    'subtitle1',\n    'subtitle2',\n    'body1',\n    'body2',\n    'button',\n    'caption',\n    'overline',\n  ]\n\n  return (\n    <FlexCol>\n      {variantList.map((variant) => (\n        <Typography key={variant} variant={variant}>\n          {variant} - XYO Network\n        </Typography>\n      ))}\n    </FlexCol>\n  )\n}\n"],"mappings":"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","names":["Typography","FlexCol","Button","Typography","FlexCol","jsx","jsxs","Typography","FlexCol","FlexRow","jsx","jsxs","Typography","FlexCol","jsx","jsxs","jsx","jsxs","FlexCol","Typography"]}

package/dist/node/components/StyleGuide/Texts.example.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/StyleGuide/Texts.example.tsx
+var Texts_example_exports = {};
+__export(Texts_example_exports, {
+  TextsExample: () => TextsExample
+});
+module.exports = __toCommonJS(Texts_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 TextsExample = () => {
+  const variantList = [
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "subtitle1",
+    "subtitle2",
+    "body1",
+    "body2",
+    "button",
+    "caption",
+    "overline"
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexCol, { children: variantList.map((variant) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Typography, { variant, children: [
+    variant,
+    " - XYO Network"
+  ] }, variant)) });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TextsExample
+});
+//# sourceMappingURL=Texts.example.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/StyleGuide/Texts.example.tsx"],"sourcesContent":["import { Typography, TypographyVariant } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\n\nexport const TextsExample = () => {\n  const variantList: TypographyVariant[] = [\n    'h1',\n    'h2',\n    'h3',\n    'h4',\n    'h5',\n    'h6',\n    'subtitle1',\n    'subtitle2',\n    'body1',\n    'body2',\n    'button',\n    'caption',\n    'overline',\n  ]\n\n  return (\n    <FlexCol>\n      {variantList.map((variant) => (\n        <Typography key={variant} variant={variant}>\n          {variant} - XYO Network\n        </Typography>\n      ))}\n    </FlexCol>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAA8C;AAC9C,2BAAwB;AAoBpB;AAlBG,IAAM,eAAe,MAAM;AAChC,QAAM,cAAmC;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SACE,4CAAC,gCACE,sBAAY,IAAI,CAAC,YAChB,6CAAC,8BAAyB,SACvB;AAAA;AAAA,IAAQ;AAAA,OADM,OAEjB,CACD,GACH;AAEJ;","names":[]}