@xyo-network/react-shared 2.64.0 → 2.64.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (147) hide show
  1. package/dist/browser/components/Ampersand.js +3 -2
  2. package/dist/browser/components/Ampersand.js.map +1 -1
  3. package/dist/browser/components/BasicHero/BasicHero.js +71 -5
  4. package/dist/browser/components/BasicHero/BasicHero.js.map +1 -1
  5. package/dist/browser/components/BasicHero/index.js +203 -1
  6. package/dist/browser/components/BasicHero/index.js.map +1 -1
  7. package/dist/browser/components/Ellipsize.js +28 -8
  8. package/dist/browser/components/Ellipsize.js.map +1 -1
  9. package/dist/browser/components/ErrorBoundary.js +4 -3
  10. package/dist/browser/components/ErrorBoundary.js.map +1 -1
  11. package/dist/browser/components/ListItemButtonEx.js +4 -3
  12. package/dist/browser/components/ListItemButtonEx.js.map +1 -1
  13. package/dist/browser/components/LoadResult.js +19 -6
  14. package/dist/browser/components/LoadResult.js.map +1 -1
  15. package/dist/browser/components/NotFound.js +3 -2
  16. package/dist/browser/components/NotFound.js.map +1 -1
  17. package/dist/browser/components/Pipe.js +3 -2
  18. package/dist/browser/components/Pipe.js.map +1 -1
  19. package/dist/browser/components/ScrollTableOnSm.js +4 -3
  20. package/dist/browser/components/ScrollTableOnSm.js.map +1 -1
  21. package/dist/browser/components/SectionSpacingRow/SectionSpacingRow.js +3 -2
  22. package/dist/browser/components/SectionSpacingRow/SectionSpacingRow.js.map +1 -1
  23. package/dist/browser/components/SectionSpacingRow/index.js +26 -1
  24. package/dist/browser/components/SectionSpacingRow/index.js.map +1 -1
  25. package/dist/browser/components/StyleGuide/AppBars.example.js +3 -2
  26. package/dist/browser/components/StyleGuide/AppBars.example.js.map +1 -1
  27. package/dist/browser/components/StyleGuide/Buttons.example.js +5 -4
  28. package/dist/browser/components/StyleGuide/Buttons.example.js.map +1 -1
  29. package/dist/browser/components/StyleGuide/Papers.example.js +3 -2
  30. package/dist/browser/components/StyleGuide/Papers.example.js.map +1 -1
  31. package/dist/browser/components/StyleGuide/StyleGuide.example.js +99 -12
  32. package/dist/browser/components/StyleGuide/StyleGuide.example.js.map +1 -1
  33. package/dist/browser/components/StyleGuide/Texts.example.js +3 -2
  34. package/dist/browser/components/StyleGuide/Texts.example.js.map +1 -1
  35. package/dist/browser/components/StyleGuide/VariantContext.example.js +2 -1
  36. package/dist/browser/components/StyleGuide/VariantContext.example.js.map +1 -1
  37. package/dist/browser/components/TableCell/AddressTableCell.js +124 -4
  38. package/dist/browser/components/TableCell/AddressTableCell.js.map +1 -1
  39. package/dist/browser/components/TableCell/EllipsisTableCell.js +98 -9
  40. package/dist/browser/components/TableCell/EllipsisTableCell.js.map +1 -1
  41. package/dist/browser/components/TableCell/EllipsisTableCellDeprecated.js +107 -6
  42. package/dist/browser/components/TableCell/EllipsisTableCellDeprecated.js.map +1 -1
  43. package/dist/browser/components/TableCell/HashTableCell.js +126 -6
  44. package/dist/browser/components/TableCell/HashTableCell.js.map +1 -1
  45. package/dist/browser/components/TableCell/findParent.js +2 -1
  46. package/dist/browser/components/TableCell/findParent.js.map +1 -1
  47. package/dist/browser/components/TableCell/getRemainingRowWidth.js +2 -1
  48. package/dist/browser/components/TableCell/getRemainingRowWidth.js.map +1 -1
  49. package/dist/browser/components/TableCell/getSmallestParentWidth.js +2 -1
  50. package/dist/browser/components/TableCell/getSmallestParentWidth.js.map +1 -1
  51. package/dist/browser/components/TableCell/index.js +160 -3
  52. package/dist/browser/components/TableCell/index.js.map +1 -1
  53. package/dist/browser/components/ThemeTokenAvatar/ThemeTokenAvatar.js +3 -2
  54. package/dist/browser/components/ThemeTokenAvatar/ThemeTokenAvatar.js.map +1 -1
  55. package/dist/browser/components/ThemeTokenAvatar/index.js +10 -1
  56. package/dist/browser/components/ThemeTokenAvatar/index.js.map +1 -1
  57. package/dist/browser/components/ThemeTokenAvatarGroup/ThemeTokenAvatarGroup.js +14 -4
  58. package/dist/browser/components/ThemeTokenAvatarGroup/ThemeTokenAvatarGroup.js.map +1 -1
  59. package/dist/browser/components/ThemeTokenAvatarGroup/index.js +19 -1
  60. package/dist/browser/components/ThemeTokenAvatarGroup/index.js.map +1 -1
  61. package/dist/browser/components/TokenBar/TokenBar.js +3 -2
  62. package/dist/browser/components/TokenBar/TokenBar.js.map +1 -1
  63. package/dist/browser/components/TokenBar/index.js +19 -1
  64. package/dist/browser/components/TokenBar/index.js.map +1 -1
  65. package/dist/browser/components/TokenData/TokenData.js +34 -17
  66. package/dist/browser/components/TokenData/TokenData.js.map +1 -1
  67. package/dist/browser/components/TokenData/img/index.js +1 -0
  68. package/dist/browser/components/TokenData/img/index.js.map +1 -1
  69. package/dist/browser/components/TokenData/index.js +153 -2
  70. package/dist/browser/components/TokenData/index.js.map +1 -1
  71. package/dist/browser/components/TokenData/useGetTokenData.js +143 -2
  72. package/dist/browser/components/TokenData/useGetTokenData.js.map +1 -1
  73. package/dist/browser/components/TokenSummary/TokenSummary.js +16 -6
  74. package/dist/browser/components/TokenSummary/TokenSummary.js.map +1 -1
  75. package/dist/browser/components/TokenSummary/index.js +29 -1
  76. package/dist/browser/components/TokenSummary/index.js.map +1 -1
  77. package/dist/browser/components/TypographyEx.js +57 -3
  78. package/dist/browser/components/TypographyEx.js.map +1 -1
  79. package/dist/browser/components/index.js +730 -18
  80. package/dist/browser/components/index.js.map +1 -1
  81. package/dist/browser/components/pluginValidation/DataMissing.js +3 -2
  82. package/dist/browser/components/pluginValidation/DataMissing.js.map +1 -1
  83. package/dist/browser/components/pluginValidation/index.js +12 -1
  84. package/dist/browser/components/pluginValidation/index.js.map +1 -1
  85. package/dist/browser/contexts/ListMode/Context.js +6 -2
  86. package/dist/browser/contexts/ListMode/Context.js.map +1 -1
  87. package/dist/browser/contexts/ListMode/Provider.js +12 -3
  88. package/dist/browser/contexts/ListMode/Provider.js.map +1 -1
  89. package/dist/browser/contexts/ListMode/index.js +44 -4
  90. package/dist/browser/contexts/ListMode/index.js.map +1 -1
  91. package/dist/browser/contexts/ListMode/use.js +19 -3
  92. package/dist/browser/contexts/ListMode/use.js.map +1 -1
  93. package/dist/browser/contexts/Pixel/Context.js +6 -2
  94. package/dist/browser/contexts/Pixel/Context.js.map +1 -1
  95. package/dist/browser/contexts/Pixel/Provider.js +12 -3
  96. package/dist/browser/contexts/Pixel/Provider.js.map +1 -1
  97. package/dist/browser/contexts/Pixel/index.js +45 -4
  98. package/dist/browser/contexts/Pixel/index.js.map +1 -1
  99. package/dist/browser/contexts/Pixel/use.js +19 -3
  100. package/dist/browser/contexts/Pixel/use.js.map +1 -1
  101. package/dist/browser/contexts/contextEx/create.js +2 -1
  102. package/dist/browser/contexts/contextEx/create.js.map +1 -1
  103. package/dist/browser/contexts/contextEx/index.js +22 -4
  104. package/dist/browser/contexts/contextEx/index.js.map +1 -1
  105. package/dist/browser/contexts/contextEx/use.js +3 -2
  106. package/dist/browser/contexts/contextEx/use.js.map +1 -1
  107. package/dist/browser/contexts/diviner/Context.js +6 -2
  108. package/dist/browser/contexts/diviner/Context.js.map +1 -1
  109. package/dist/browser/contexts/diviner/Provider.js +3 -2
  110. package/dist/browser/contexts/diviner/Provider.js.map +1 -1
  111. package/dist/browser/contexts/diviner/index.js +40 -3
  112. package/dist/browser/contexts/diviner/index.js.map +1 -1
  113. package/dist/browser/contexts/index.js +116 -4
  114. package/dist/browser/contexts/index.js.map +1 -1
  115. package/dist/browser/hooks/GradientStyles/GradientStyles.js +4 -3
  116. package/dist/browser/hooks/GradientStyles/GradientStyles.js.map +1 -1
  117. package/dist/browser/hooks/GradientStyles/index.js +56 -1
  118. package/dist/browser/hooks/GradientStyles/index.js.map +1 -1
  119. package/dist/browser/hooks/index.js +126 -7
  120. package/dist/browser/hooks/index.js.map +1 -1
  121. package/dist/browser/hooks/useDataState.js +2 -1
  122. package/dist/browser/hooks/useDataState.js.map +1 -1
  123. package/dist/browser/hooks/useIsMobile.js +7 -2
  124. package/dist/browser/hooks/useIsMobile.js.map +1 -1
  125. package/dist/browser/hooks/useMediaQuery.js +1 -0
  126. package/dist/browser/hooks/useMediaQuery.js.map +1 -1
  127. package/dist/browser/hooks/usePayloadHash.js +3 -2
  128. package/dist/browser/hooks/usePayloadHash.js.map +1 -1
  129. package/dist/browser/hooks/usePromise.js +2 -1
  130. package/dist/browser/hooks/usePromise.js.map +1 -1
  131. package/dist/browser/hooks/useShareForwardRef.js +2 -1
  132. package/dist/browser/hooks/useShareForwardRef.js.map +1 -1
  133. package/dist/browser/index.js +988 -6
  134. package/dist/browser/index.js.map +1 -1
  135. package/dist/browser/lib/assertDefinedEx.js +2 -1
  136. package/dist/browser/lib/assertDefinedEx.js.map +1 -1
  137. package/dist/browser/lib/getActualPaddingX.js +4 -3
  138. package/dist/browser/lib/getActualPaddingX.js.map +1 -1
  139. package/dist/browser/lib/index.js +101 -3
  140. package/dist/browser/lib/index.js.map +1 -1
  141. package/dist/browser/lib/networkComponents.js +5 -4
  142. package/dist/browser/lib/networkComponents.js.map +1 -1
  143. package/dist/browser/lib/xyo.js +3 -2
  144. package/dist/browser/lib/xyo.js.map +1 -1
  145. package/dist/browser/models/index.js +0 -1
  146. package/dist/browser/models/index.js.map +1 -1
  147. package/package.json +13 -13
@@ -1,6 +1,7 @@
1
- import { jsx } from "react/jsx-runtime";
1
+ // src/components/Pipe.tsx
2
2
  import { Typography } from "@mui/material";
3
- const Pipe = (props) => {
3
+ import { jsx } from "react/jsx-runtime";
4
+ var Pipe = (props) => {
4
5
  return /* @__PURE__ */ jsx(Typography, { marginX: 1, component: "span", ...props, children: "|" });
5
6
  };
6
7
  export {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Pipe.tsx"],"sourcesContent":["import { Typography, TypographyProps } from '@mui/material'\n\nexport const Pipe: React.FC<TypographyProps> = (props) => {\n return (\n <Typography marginX={1} component=\"span\" {...props}>\n |\n </Typography>\n )\n}\n"],"mappings":"AAII;AAJJ,SAAS,kBAAmC;AAErC,MAAM,OAAkC,CAAC,UAAU;AACxD,SACE,oBAAC,cAAW,SAAS,GAAG,WAAU,QAAQ,GAAG,OAAO,eAEpD;AAEJ;","names":[]}
1
+ {"version":3,"sources":["../../../src/components/Pipe.tsx"],"sourcesContent":["import { Typography, TypographyProps } from '@mui/material'\n\nexport const Pipe: React.FC<TypographyProps> = (props) => {\n return (\n <Typography marginX={1} component=\"span\" {...props}>\n |\n </Typography>\n )\n}\n"],"mappings":";AAAA,SAAS,kBAAmC;AAIxC;AAFG,IAAM,OAAkC,CAAC,UAAU;AACxD,SACE,oBAAC,cAAW,SAAS,GAAG,WAAU,QAAQ,GAAG,OAAO,eAEpD;AAEJ;","names":[]}
@@ -1,13 +1,14 @@
1
- import { jsx } from "react/jsx-runtime";
1
+ // src/components/ScrollTableOnSm.tsx
2
2
  import { styled } from "@mui/material";
3
- const StyledScrollTableOnSm = styled("div")(({ theme }) => ({
3
+ import { jsx } from "react/jsx-runtime";
4
+ var StyledScrollTableOnSm = styled("div")(({ theme }) => ({
4
5
  [theme.breakpoints.down("md")]: {
5
6
  overflowX: "scroll"
6
7
  },
7
8
  display: "flex",
8
9
  flexGrow: 1
9
10
  }));
10
- const ScrollTableOnSm = ({ children }) => /* @__PURE__ */ jsx(StyledScrollTableOnSm, { children });
11
+ var ScrollTableOnSm = ({ children }) => /* @__PURE__ */ jsx(StyledScrollTableOnSm, { children });
11
12
  export {
12
13
  ScrollTableOnSm
13
14
  };
@@ -1 +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":"AAWkE;AAXlE,SAAS,cAAc;AAGvB,MAAM,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,MAAM,kBAA0C,CAAC,EAAE,SAAS,MAAM,oBAAC,yBAAuB,UAAS;","names":[]}
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,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":[]}
@@ -1,8 +1,9 @@
1
- import { jsx } from "react/jsx-runtime";
1
+ // src/components/SectionSpacingRow/SectionSpacingRow.tsx
2
2
  import { useTheme } from "@mui/material";
3
3
  import { FlexGrowRow } from "@xylabs/react-flexbox";
4
4
  import { forwardRef } from "react";
5
- const SectionSpacingRow = forwardRef(({ children, sx, ...props }, ref) => {
5
+ import { jsx } from "react/jsx-runtime";
6
+ var SectionSpacingRow = forwardRef(({ children, sx, ...props }, ref) => {
6
7
  const theme = useTheme();
7
8
  return /* @__PURE__ */ jsx(
8
9
  FlexGrowRow,
@@ -1 +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":"AAOI;AAPJ,SAAS,gBAAgB;AACzB,SAAuB,mBAAmB;AAC1C,SAAS,kBAAkB;AAEpB,MAAM,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":[]}
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,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":[]}
@@ -1,2 +1,27 @@
1
- export * from "./SectionSpacingRow";
1
+ // src/components/SectionSpacingRow/SectionSpacingRow.tsx
2
+ import { useTheme } from "@mui/material";
3
+ import { FlexGrowRow } from "@xylabs/react-flexbox";
4
+ import { forwardRef } from "react";
5
+ import { jsx } from "react/jsx-runtime";
6
+ var SectionSpacingRow = forwardRef(({ children, sx, ...props }, ref) => {
7
+ const theme = useTheme();
8
+ return /* @__PURE__ */ jsx(
9
+ FlexGrowRow,
10
+ {
11
+ sx: {
12
+ paddingBottom: { md: theme.spacing(5), xs: theme.spacing(5) },
13
+ paddingTop: { md: theme.spacing(5), xs: theme.spacing(5) },
14
+ ...sx
15
+ },
16
+ width: "100%",
17
+ ref,
18
+ ...props,
19
+ children
20
+ }
21
+ );
22
+ });
23
+ SectionSpacingRow.displayName = "SectionSpacingRow";
24
+ export {
25
+ SectionSpacingRow
26
+ };
2
27
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/SectionSpacingRow/index.ts"],"sourcesContent":["export * from './SectionSpacingRow'\n"],"mappings":"AAAA,cAAc;","names":[]}
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,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":[]}
@@ -1,9 +1,10 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
1
+ // src/components/StyleGuide/AppBars.example.tsx
2
2
  import { Menu as MenuIcon } from "@mui/icons-material";
3
3
  import { Button, IconButton, Toolbar, Typography } from "@mui/material";
4
4
  import { AppBarEx } from "@xylabs/react-appbar";
5
5
  import { FlexCol } from "@xylabs/react-flexbox";
6
- const AppBarsExample = () => {
6
+ import { jsx, jsxs } from "react/jsx-runtime";
7
+ var AppBarsExample = () => {
7
8
  const contextToolbar = /* @__PURE__ */ jsxs(Toolbar, { disableGutters: true, children: [
8
9
  /* @__PURE__ */ jsx(IconButton, { edge: "start", color: "inherit", "aria-label": "menu", sx: { mr: 2 }, children: /* @__PURE__ */ jsx(MenuIcon, {}) }),
9
10
  /* @__PURE__ */ jsx(Typography, { variant: "h6", color: "inherit", component: "div", children: "Photos" })
@@ -1 +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":"AAOI,SAEI,KAFJ;AAPJ,SAAS,QAAQ,gBAAgB;AACjC,SAAS,QAAQ,YAAY,SAAS,kBAAkB;AACxD,SAAS,gBAAgB;AACzB,SAAS,eAAe;AAEjB,MAAM,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":[]}
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,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":[]}
@@ -1,9 +1,10 @@
1
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
1
+ // src/components/StyleGuide/Buttons.example.tsx
2
2
  import { Button, Typography } from "@mui/material";
3
3
  import { FlexCol, FlexRow } from "@xylabs/react-flexbox";
4
- const colors = ["primary", "secondary"];
5
- const variants = ["text", "contained", "outlined"];
6
- const ButtonsExample = ({ ...props }) => {
4
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
5
+ var colors = ["primary", "secondary"];
6
+ var variants = ["text", "contained", "outlined"];
7
+ var ButtonsExample = ({ ...props }) => {
7
8
  return /* @__PURE__ */ jsxs(FlexCol, { ...props, alignItems: "stretch", children: [
8
9
  /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: "Buttons" }),
9
10
  /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: "Buttons" }),
@@ -1 +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":"AASM,SAII,UAJJ,KAII,YAJJ;AATN,SAAS,QAAuB,kBAAkB;AAClD,SAAS,SAAS,eAAe;AAEjC,MAAM,SAAS,CAAC,WAAW,WAAW;AACtC,MAAM,WAAW,CAAC,QAAQ,aAAa,UAAU;AAE1C,MAAM,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":[]}
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,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":[]}
@@ -1,7 +1,8 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
1
+ // src/components/StyleGuide/Papers.example.tsx
2
2
  import { Paper, Typography } from "@mui/material";
3
3
  import { FlexCol, FlexRow } from "@xylabs/react-flexbox";
4
- const PapersExample = ({ ...props }) => {
4
+ import { jsx, jsxs } from "react/jsx-runtime";
5
+ var PapersExample = ({ ...props }) => {
5
6
  return /* @__PURE__ */ jsxs(FlexCol, { ...props, children: [
6
7
  /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: "Paper" }),
7
8
  /* @__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: [
@@ -1 +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":"AAMM,cAKQ,YALR;AANN,SAAS,OAAO,kBAAkB;AAClC,SAAS,SAAS,eAAe;AAE1B,MAAM,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":[]}
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,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":[]}
@@ -1,17 +1,104 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
2
- import { Typography } from "@mui/material";
1
+ // src/components/StyleGuide/StyleGuide.example.tsx
2
+ import { Typography as Typography5 } from "@mui/material";
3
+ import { FlexCol as FlexCol5 } from "@xylabs/react-flexbox";
4
+
5
+ // src/components/StyleGuide/AppBars.example.tsx
6
+ import { Menu as MenuIcon } from "@mui/icons-material";
7
+ import { Button, IconButton, Toolbar, Typography } from "@mui/material";
8
+ import { AppBarEx } from "@xylabs/react-appbar";
3
9
  import { FlexCol } from "@xylabs/react-flexbox";
4
- import { AppBarsExample } from "./AppBars.example";
5
- import { ButtonsExample } from "./Buttons.example";
6
- import { PapersExample } from "./Papers.example";
7
- import { TextsExample } from "./Texts.example";
8
- const StyleGuideExample = () => {
10
+ import { jsx, jsxs } from "react/jsx-runtime";
11
+ var AppBarsExample = () => {
12
+ const contextToolbar = /* @__PURE__ */ jsxs(Toolbar, { disableGutters: true, children: [
13
+ /* @__PURE__ */ jsx(IconButton, { edge: "start", color: "inherit", "aria-label": "menu", sx: { mr: 2 }, children: /* @__PURE__ */ jsx(MenuIcon, {}) }),
14
+ /* @__PURE__ */ jsx(Typography, { variant: "h6", color: "inherit", component: "div", children: "Photos" })
15
+ ] });
16
+ const systemToolbar = /* @__PURE__ */ jsx(Button, { variant: "contained", children: "Get Started" });
9
17
  return /* @__PURE__ */ jsxs(FlexCol, { alignItems: "stretch", children: [
10
- /* @__PURE__ */ jsx(Typography, { variant: "h5", children: "XYO Network Style Guide" }),
11
- /* @__PURE__ */ jsx(AppBarsExample, {}),
12
- /* @__PURE__ */ jsx(ButtonsExample, {}),
13
- /* @__PURE__ */ jsx(PapersExample, {}),
14
- /* @__PURE__ */ jsx(TextsExample, {})
18
+ /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: "App Bar" }),
19
+ /* @__PURE__ */ jsx(AppBarEx, { elevation: 0, contextToolbar, systemToolbar })
20
+ ] });
21
+ };
22
+
23
+ // src/components/StyleGuide/Buttons.example.tsx
24
+ import { Button as Button2, Typography as Typography2 } from "@mui/material";
25
+ import { FlexCol as FlexCol2, FlexRow } from "@xylabs/react-flexbox";
26
+ import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
27
+ var colors = ["primary", "secondary"];
28
+ var variants = ["text", "contained", "outlined"];
29
+ var ButtonsExample = ({ ...props }) => {
30
+ return /* @__PURE__ */ jsxs2(FlexCol2, { ...props, alignItems: "stretch", children: [
31
+ /* @__PURE__ */ jsx2(Typography2, { variant: "subtitle1", children: "Buttons" }),
32
+ /* @__PURE__ */ jsx2(Typography2, { variant: "subtitle2", children: "Buttons" }),
33
+ /* @__PURE__ */ jsx2(FlexRow, { alignItems: "stretch", mb: 2, children: colors.map((color) => /* @__PURE__ */ jsxs2(Fragment, { children: [
34
+ /* @__PURE__ */ jsx2(Button2, { variant: "contained", color, children: color }),
35
+ "\xA0"
36
+ ] })) }),
37
+ variants.map((variant) => /* @__PURE__ */ jsxs2(FlexCol2, { alignItems: "stretch", mb: 2, children: [
38
+ /* @__PURE__ */ jsxs2(Typography2, { variant: "subtitle2", children: [
39
+ /* @__PURE__ */ jsx2("span", { style: { textTransform: "capitalize" }, children: variant }),
40
+ " Buttons"
41
+ ] }),
42
+ /* @__PURE__ */ jsxs2(FlexRow, { alignItems: "stretch", children: [
43
+ /* @__PURE__ */ jsx2(Button2, { variant, children: "Button" }),
44
+ "\xA0",
45
+ /* @__PURE__ */ jsx2(Button2, { variant, disabled: true, children: "Disabled" }),
46
+ "\xA0",
47
+ /* @__PURE__ */ jsx2(Button2, { variant, href: "#href", children: "Link" })
48
+ ] })
49
+ ] }, `btn-${variant}`))
50
+ ] });
51
+ };
52
+
53
+ // src/components/StyleGuide/Papers.example.tsx
54
+ import { Paper, Typography as Typography3 } from "@mui/material";
55
+ import { FlexCol as FlexCol3, FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
56
+ import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
57
+ var PapersExample = ({ ...props }) => {
58
+ return /* @__PURE__ */ jsxs3(FlexCol3, { ...props, children: [
59
+ /* @__PURE__ */ jsx3(Typography3, { variant: "subtitle1", children: "Paper" }),
60
+ /* @__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: [
61
+ "Elevation-",
62
+ index * 3
63
+ ] }) }, `paper-${index}`) }, `paper-${index}`)) })
64
+ ] });
65
+ };
66
+
67
+ // src/components/StyleGuide/Texts.example.tsx
68
+ import { Typography as Typography4 } from "@mui/material";
69
+ import { FlexCol as FlexCol4 } from "@xylabs/react-flexbox";
70
+ import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
71
+ var TextsExample = () => {
72
+ const variantList = [
73
+ "h1",
74
+ "h2",
75
+ "h3",
76
+ "h4",
77
+ "h5",
78
+ "h6",
79
+ "subtitle1",
80
+ "subtitle2",
81
+ "body1",
82
+ "body2",
83
+ "button",
84
+ "caption",
85
+ "overline"
86
+ ];
87
+ return /* @__PURE__ */ jsx4(FlexCol4, { children: variantList.map((variant) => /* @__PURE__ */ jsxs4(Typography4, { variant, children: [
88
+ variant,
89
+ " - XYO Network"
90
+ ] }, variant)) });
91
+ };
92
+
93
+ // src/components/StyleGuide/StyleGuide.example.tsx
94
+ import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
95
+ var StyleGuideExample = () => {
96
+ return /* @__PURE__ */ jsxs5(FlexCol5, { alignItems: "stretch", children: [
97
+ /* @__PURE__ */ jsx5(Typography5, { variant: "h5", children: "XYO Network Style Guide" }),
98
+ /* @__PURE__ */ jsx5(AppBarsExample, {}),
99
+ /* @__PURE__ */ jsx5(ButtonsExample, {}),
100
+ /* @__PURE__ */ jsx5(PapersExample, {}),
101
+ /* @__PURE__ */ jsx5(TextsExample, {})
15
102
  ] });
16
103
  };
17
104
  export {
@@ -1 +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":"AAUI,SACE,KADF;AAVJ,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AAExB,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAEtB,MAAM,oBAA8B,MAAM;AAC/C,SACE,qBAAC,WAAQ,YAAW,WAClB;AAAA,wBAAC,cAAW,SAAQ,MAAK,qCAAuB;AAAA,IAChD,oBAAC,kBAAe;AAAA,IAChB,oBAAC,kBAAe;AAAA,IAChB,oBAAC,iBAAc;AAAA,IACf,oBAAC,gBAAa;AAAA,KAChB;AAEJ;","names":[]}
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":["Typography","FlexCol","Button","Typography","FlexCol","jsx","jsxs","Typography","FlexCol","FlexRow","jsx","jsxs","Typography","FlexCol","jsx","jsxs","jsx","jsxs","FlexCol","Typography"]}
@@ -1,7 +1,8 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
1
+ // src/components/StyleGuide/Texts.example.tsx
2
2
  import { Typography } from "@mui/material";
3
3
  import { FlexCol } from "@xylabs/react-flexbox";
4
- const TextsExample = () => {
4
+ import { jsx, jsxs } from "react/jsx-runtime";
5
+ var TextsExample = () => {
5
6
  const variantList = [
6
7
  "h1",
7
8
  "h2",
@@ -1 +1 @@
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":"AAqBI,cAEI,YAFJ;AArBJ,SAAS,kBAAqC;AAC9C,SAAS,eAAe;AAEjB,MAAM,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,oBAAC,WACE,sBAAY,IAAI,CAAC,YAChB,qBAAC,cAAyB,SACvB;AAAA;AAAA,IAAQ;AAAA,OADM,OAEjB,CACD,GACH;AAEJ;","names":[]}
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,SAAS,kBAAqC;AAC9C,SAAS,eAAe;AAoBpB,cAEI,YAFJ;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,oBAAC,WACE,sBAAY,IAAI,CAAC,YAChB,qBAAC,cAAyB,SACvB;AAAA;AAAA,IAAQ;AAAA,OADM,OAEjB,CACD,GACH;AAEJ;","names":[]}
@@ -1,5 +1,6 @@
1
+ // src/components/StyleGuide/VariantContext.example.tsx
1
2
  import { createContext } from "react";
2
- const VariantContext = createContext("main");
3
+ var VariantContext = createContext("main");
3
4
  export {
4
5
  VariantContext
5
6
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/StyleGuide/VariantContext.example.tsx"],"sourcesContent":["import { createContext } from 'react'\n\nexport const VariantContext = createContext('main')\n"],"mappings":"AAAA,SAAS,qBAAqB;AAEvB,MAAM,iBAAiB,cAAc,MAAM;","names":[]}
1
+ {"version":3,"sources":["../../../../src/components/StyleGuide/VariantContext.example.tsx"],"sourcesContent":["import { createContext } from 'react'\n\nexport const VariantContext = createContext('main')\n"],"mappings":";AAAA,SAAS,qBAAqB;AAEvB,IAAM,iBAAiB,cAAc,MAAM;","names":[]}
@@ -1,10 +1,130 @@
1
+ // src/components/TableCell/AddressTableCell.tsx
2
+ import { forwardRef as forwardRef3 } from "react";
3
+
4
+ // src/components/TableCell/EllipsisTableCell.tsx
5
+ import { styled as styled2, TableCell } from "@mui/material";
6
+ import { LinkEx } from "@xylabs/react-link";
7
+ import { forwardRef as forwardRef2, useMemo } from "react";
8
+
9
+ // src/components/Ellipsize.tsx
10
+ import { Box, styled, Typography } from "@mui/material";
11
+ import { forwardRef, useCallback, useState } from "react";
12
+
13
+ // src/hooks/useShareForwardRef.ts
14
+ import { useEffect, useRef } from "react";
15
+ var useShareForwardedRef = (forwardedRef, refresh = 0) => {
16
+ const innerRef = useRef(null);
17
+ useEffect(() => {
18
+ if (!forwardedRef) {
19
+ return;
20
+ }
21
+ if (typeof forwardedRef === "function") {
22
+ forwardedRef(innerRef.current);
23
+ return;
24
+ } else {
25
+ forwardedRef.current = innerRef.current;
26
+ }
27
+ }, [forwardedRef, refresh]);
28
+ return innerRef;
29
+ };
30
+
31
+ // src/components/Ellipsize.tsx
1
32
  import { jsx } from "react/jsx-runtime";
2
- import { forwardRef } from "react";
3
- import { EllipsisTableCell } from "./EllipsisTableCell";
4
- const AddressTableCell = forwardRef(({ value, archive, exploreDomain, link, ...props }, ref) => {
33
+ var ComponentName = "Ellipsize";
34
+ var EllipsizeRoot = styled(Box, {
35
+ name: ComponentName,
36
+ shouldForwardProp: (prop) => prop !== "beforeLineHeight",
37
+ slot: "Root"
38
+ })(({ beforeLineHeight }) => ({
39
+ "&": {
40
+ // because the cell content ends up absolutely positioned, the cell doesn't know the content height.
41
+ // the pseudo element with a hidden character establishes the proper height of the content and hides it
42
+ ":before": {
43
+ content: "'nbsp;'",
44
+ display: "block",
45
+ // take the pseudo element out of the `display: block` flow so it won't push against our actual content
46
+ float: "left",
47
+ visibility: "hidden",
48
+ // since we are `display: block`, lineHeight is the height
49
+ ...beforeLineHeight && { lineHeight: beforeLineHeight }
50
+ }
51
+ }
52
+ }));
53
+ var EllipsizeInnerWrap = styled(Box, {
54
+ name: ComponentName,
55
+ slot: "innerWrap"
56
+ })(() => ({
57
+ position: "relative"
58
+ }));
59
+ var EllipsizeContentWrap = styled(Typography, {
60
+ name: ComponentName,
61
+ shouldForwardProp: (prop) => prop !== "ellipsisPosition",
62
+ slot: "contentWrap"
63
+ })(({ theme, ellipsisPosition, fontFamily }) => {
64
+ return theme.unstable_sx({
65
+ fontFamily: fontFamily ?? "monospace",
66
+ left: 0,
67
+ overflow: "hidden",
68
+ position: "absolute",
69
+ right: 0,
70
+ textOverflow: "ellipsis",
71
+ whiteSpace: "nowrap",
72
+ ...ellipsisPosition === "start" ? {
73
+ direction: "rtl",
74
+ textAlign: "left"
75
+ } : {}
76
+ });
77
+ });
78
+ var useClientHeight = () => {
79
+ const [contentWrapHeight, setContentWrapHeight] = useState();
80
+ const contentWrapRef = useCallback((node) => {
81
+ if (node !== null) {
82
+ setContentWrapHeight(node.clientHeight + "px");
83
+ }
84
+ }, []);
85
+ return { contentWrapHeight, contentWrapRef };
86
+ };
87
+ var EllipsizeBox = forwardRef(
88
+ ({ children, ellipsisPosition = "start", disableSharedRef, typographyProps, ...props }, ref) => {
89
+ const { contentWrapRef, contentWrapHeight } = useClientHeight();
90
+ const sharedRef = useShareForwardedRef(ref);
91
+ return /* @__PURE__ */ jsx(EllipsizeRoot, { beforeLineHeight: !!sharedRef && !disableSharedRef ? contentWrapHeight : void 0, ...props, ref, children: /* @__PURE__ */ jsx(EllipsizeInnerWrap, { children: /* @__PURE__ */ jsx(EllipsizeContentWrap, { ref: contentWrapRef, component: "span", ellipsisPosition, variant: "body2", ...typographyProps, children }) }) });
92
+ }
93
+ );
94
+ EllipsizeBox.displayName = "EllipsizeBox";
95
+
96
+ // src/components/TableCell/EllipsisTableCell.tsx
97
+ import { jsx as jsx2 } from "react/jsx-runtime";
98
+ var EllipsisTableCellRoot = styled2(TableCell, {
99
+ name: "EllipsisTableCell",
100
+ shouldForwardProp: (prop) => prop !== "width",
101
+ slot: "Root"
102
+ })(({ width = "100%" }) => ({
103
+ width
104
+ }));
105
+ var EllipsisTableCellWithRef = forwardRef2(
106
+ ({ children, href, link = false, to, value, ...props }, ref) => {
107
+ const data = useMemo(() => {
108
+ if (children) {
109
+ return children;
110
+ }
111
+ if (href || link || to) {
112
+ return /* @__PURE__ */ jsx2(LinkEx, { title: value, to, href, target: href ? "_blank" : void 0, children: value });
113
+ }
114
+ return value;
115
+ }, [children, href, link, to, value]);
116
+ return /* @__PURE__ */ jsx2(EllipsisTableCellRoot, { ref, ...props, children: /* @__PURE__ */ jsx2(EllipsizeBox, { sx: { cursor: link || to || href ? "pointer" : "inherit" }, children: data }) });
117
+ }
118
+ );
119
+ EllipsisTableCellWithRef.displayName = "EllipsisTableCell";
120
+ var EllipsisTableCell = EllipsisTableCellWithRef;
121
+
122
+ // src/components/TableCell/AddressTableCell.tsx
123
+ import { jsx as jsx3 } from "react/jsx-runtime";
124
+ var AddressTableCell = forwardRef3(({ value, archive, exploreDomain, link, ...props }, ref) => {
5
125
  const href = exploreDomain && archive ? `${exploreDomain}/archive/${archive}/address/${value}` : void 0;
6
126
  const to = exploreDomain === void 0 && archive ? `/archive/${archive}/address/${value}` : void 0;
7
- return /* @__PURE__ */ jsx(EllipsisTableCell, { value, href, to, ref, link, ...props });
127
+ return /* @__PURE__ */ jsx3(EllipsisTableCell, { value, href, to, ref, link, ...props });
8
128
  });
9
129
  AddressTableCell.displayName = "AddressTableCell";
10
130
  export {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/TableCell/AddressTableCell.tsx"],"sourcesContent":["import { forwardRef } from 'react'\n\nimport { EllipsisTableCell, EllipsisTableCellProps } from './EllipsisTableCell'\n\nexport interface AddressTableCellProps extends EllipsisTableCellProps {\n /** @deprecated - archives are no longer supported */\n archive?: string\n /** @deprecated - use events instead */\n exploreDomain?: string\n link?: boolean\n}\n\nconst AddressTableCell = forwardRef<HTMLTableCellElement, AddressTableCellProps>(({ value, archive, exploreDomain, link, ...props }, ref) => {\n const href = exploreDomain && archive ? `${exploreDomain}/archive/${archive}/address/${value}` : undefined\n const to = exploreDomain === undefined && archive ? `/archive/${archive}/address/${value}` : undefined\n\n return <EllipsisTableCell value={value} href={href} to={to} ref={ref} link={link} {...props} />\n})\n\nAddressTableCell.displayName = 'AddressTableCell'\nexport { AddressTableCell }\n"],"mappings":"AAgBS;AAhBT,SAAS,kBAAkB;AAE3B,SAAS,yBAAiD;AAU1D,MAAM,mBAAmB,WAAwD,CAAC,EAAE,OAAO,SAAS,eAAe,MAAM,GAAG,MAAM,GAAG,QAAQ;AAC3I,QAAM,OAAO,iBAAiB,UAAU,GAAG,aAAa,YAAY,OAAO,YAAY,KAAK,KAAK;AACjG,QAAM,KAAK,kBAAkB,UAAa,UAAU,YAAY,OAAO,YAAY,KAAK,KAAK;AAE7F,SAAO,oBAAC,qBAAkB,OAAc,MAAY,IAAQ,KAAU,MAAa,GAAG,OAAO;AAC/F,CAAC;AAED,iBAAiB,cAAc;","names":[]}
1
+ {"version":3,"sources":["../../../../src/components/TableCell/AddressTableCell.tsx","../../../../src/components/TableCell/EllipsisTableCell.tsx","../../../../src/components/Ellipsize.tsx","../../../../src/hooks/useShareForwardRef.ts"],"sourcesContent":["import { forwardRef } from 'react'\n\nimport { EllipsisTableCell, EllipsisTableCellProps } from './EllipsisTableCell'\n\nexport interface AddressTableCellProps extends EllipsisTableCellProps {\n /** @deprecated - archives are no longer supported */\n archive?: string\n /** @deprecated - use events instead */\n exploreDomain?: string\n link?: boolean\n}\n\nconst AddressTableCell = forwardRef<HTMLTableCellElement, AddressTableCellProps>(({ value, archive, exploreDomain, link, ...props }, ref) => {\n const href = exploreDomain && archive ? `${exploreDomain}/archive/${archive}/address/${value}` : undefined\n const to = exploreDomain === undefined && archive ? `/archive/${archive}/address/${value}` : undefined\n\n return <EllipsisTableCell value={value} href={href} to={to} ref={ref} link={link} {...props} />\n})\n\nAddressTableCell.displayName = 'AddressTableCell'\nexport { AddressTableCell }\n","import { styled, TableCell, TableCellProps } from '@mui/material'\nimport { LinkEx } from '@xylabs/react-link'\nimport type { WithChildren } from '@xylabs/react-shared'\nimport { forwardRef, useMemo } from 'react'\nimport { To } from 'react-router-dom'\n\nimport { EllipsizeBox } from '../Ellipsize'\n\nconst EllipsisTableCellRoot = styled(TableCell, {\n name: 'EllipsisTableCell',\n shouldForwardProp: (prop) => prop !== 'width',\n slot: 'Root',\n})(({ width = '100%' }) => ({\n width,\n}))\n\nexport interface EllipsisTableCellProps extends TableCellProps {\n href?: string\n link?: boolean\n to?: To\n value?: string\n /**\n * Width of the table cell.\n *\n * Note: When using percentages, this value can be different than what you expect\n * if used on a cell that is not the first cell in the first row.\n */\n width?: string | number\n}\n\nexport const EllipsisTableCellWithRef: React.FC<WithChildren<EllipsisTableCellProps>> = forwardRef(\n ({ children, href, link = false, to, value, ...props }, ref) => {\n const data = useMemo(() => {\n if (children) {\n return children\n }\n if (href || link || to) {\n return (\n <LinkEx title={value} to={to} href={href} target={href ? '_blank' : undefined}>\n {value}\n </LinkEx>\n )\n }\n return value\n }, [children, href, link, to, value])\n return (\n <EllipsisTableCellRoot ref={ref} {...props}>\n <EllipsizeBox sx={{ cursor: link || to || href ? 'pointer' : 'inherit' }}>{data}</EllipsizeBox>\n </EllipsisTableCellRoot>\n )\n },\n)\n\nEllipsisTableCellWithRef.displayName = 'EllipsisTableCell'\nexport const EllipsisTableCell = EllipsisTableCellWithRef\n","import { Box, BoxProps, styled, Typography, TypographyProps, TypographyTypeMap } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { forwardRef, useCallback, useState } from 'react'\n\nimport { useShareForwardedRef } from '../hooks'\n\n/**\n * Heavily inspired by - https://stackoverflow.com/a/30362531/2803259\n */\n\nconst ComponentName = 'Ellipsize'\n\nexport interface EllipsizeRootProps extends BoxProps {\n beforeLineHeight?: string | number\n}\n\nconst EllipsizeRoot = styled(Box, {\n name: ComponentName,\n shouldForwardProp: (prop) => prop !== 'beforeLineHeight',\n slot: 'Root',\n})<EllipsizeRootProps>(({ beforeLineHeight }) => ({\n '&': {\n // because the cell content ends up absolutely positioned, the cell doesn't know the content height.\n // the pseudo element with a hidden character establishes the proper height of the content and hides it\n ':before': {\n content: \"'nbsp;'\",\n display: 'block',\n // take the pseudo element out of the `display: block` flow so it won't push against our actual content\n float: 'left',\n visibility: 'hidden',\n // since we are `display: block`, lineHeight is the height\n ...(beforeLineHeight && { lineHeight: beforeLineHeight }),\n },\n },\n}))\n\nconst EllipsizeInnerWrap = styled(Box, {\n name: ComponentName,\n slot: 'innerWrap',\n})(() => ({\n position: 'relative',\n}))\n\nconst EllipsizeContentWrap = styled(Typography, {\n name: ComponentName,\n shouldForwardProp: (prop) => prop !== 'ellipsisPosition',\n slot: 'contentWrap',\n})<TypographyWithComponentProps>(({ theme, ellipsisPosition, fontFamily }) => {\n return theme.unstable_sx({\n fontFamily: fontFamily ?? 'monospace',\n left: 0,\n overflow: 'hidden',\n position: 'absolute',\n right: 0,\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n ...(ellipsisPosition === 'start'\n ? {\n direction: 'rtl',\n textAlign: 'left',\n }\n : {}),\n })\n})\n\nconst useClientHeight = () => {\n const [contentWrapHeight, setContentWrapHeight] = useState<string>()\n\n const contentWrapRef = useCallback((node: HTMLElement) => {\n if (node !== null) {\n setContentWrapHeight(node.clientHeight + 'px')\n }\n }, [])\n\n return { contentWrapHeight, contentWrapRef }\n}\n\n// See - https://mui.com/material-ui/guides/composition/#with-typescript\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport type TypographyWithComponentProps<D extends React.ElementType = TypographyTypeMap['defaultComponent'], P = {}> = TypographyProps<D, P> & {\n ellipsisPosition?: 'start' | 'end'\n}\n\nexport interface EllipsizeBoxProps extends BoxProps {\n disableSharedRef?: boolean\n ellipsisPosition?: 'start' | 'end'\n typographyProps?: TypographyWithComponentProps\n}\n\nexport const EllipsizeBox = forwardRef<HTMLDivElement, WithChildren<EllipsizeBoxProps>>(\n ({ children, ellipsisPosition = 'start', disableSharedRef, typographyProps, ...props }, ref) => {\n // Allow syncing of :before pseudo element height with contentWrapHeight\n const { contentWrapRef, contentWrapHeight } = useClientHeight()\n const sharedRef = useShareForwardedRef(ref)\n\n return (\n <EllipsizeRoot beforeLineHeight={!!sharedRef && !disableSharedRef ? contentWrapHeight : undefined} {...props} ref={ref}>\n <EllipsizeInnerWrap>\n <EllipsizeContentWrap ref={contentWrapRef} component={'span'} ellipsisPosition={ellipsisPosition} variant=\"body2\" {...typographyProps}>\n {children}\n </EllipsizeContentWrap>\n </EllipsizeInnerWrap>\n </EllipsizeRoot>\n )\n },\n)\nEllipsizeBox.displayName = 'EllipsizeBox'\n","import { ForwardedRef, useEffect, useRef } from 'react'\n\nexport const useShareForwardedRef = <T>(forwardedRef: ForwardedRef<T>, refresh = 0) => {\n // final ref that will share value with forward ref. this is the one to be attached to components\n const innerRef = useRef<T>(null)\n\n useEffect(() => {\n if (!forwardedRef) {\n return\n }\n if (typeof forwardedRef === 'function') {\n forwardedRef(innerRef.current)\n return\n } else {\n forwardedRef.current = innerRef.current\n }\n }, [forwardedRef, refresh])\n\n return innerRef\n}\n"],"mappings":"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","names":["forwardRef","styled","forwardRef","jsx","styled","forwardRef","jsx","forwardRef"]}