@pingux/astro 1.13.0-alpha.4 → 1.13.0-alpha.7

package/lib/cjs/components/Messages/Message.js

@@ -34,12 +34,14 @@ var _liveAnnouncer = require("@react-aria/live-announcer");
 
 var _AlertCircleIcon = _interopRequireDefault(require("mdi-react/AlertCircleIcon"));
 
-var _AlertCircleOutlineIcon = _interopRequireDefault(require("mdi-react/AlertCircleOutlineIcon"));
-
 var _CheckCircleIcon = _interopRequireDefault(require("mdi-react/CheckCircleIcon"));
 
 var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
 
+var _AlertIcon = _interopRequireDefault(require("mdi-react/AlertIcon"));
+
+var _InformationIcon = _interopRequireDefault(require("mdi-react/InformationIcon"));
+
 var _useStatusClasses4 = _interopRequireDefault(require("../../hooks/useStatusClasses"));
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
@@ -61,10 +63,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var icons = {
-  "default": _AlertCircleOutlineIcon["default"],
+  "default": _InformationIcon["default"],
   success: _CheckCircleIcon["default"],
   error: _AlertCircleIcon["default"],
-  warning: _AlertCircleOutlineIcon["default"]
+  warning: _AlertIcon["default"]
 };
 exports.icons = icons;
 

package/lib/cjs/recipes/AttributeMappingReadOnlyField.stories.js

@@ -0,0 +1,165 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
+
+var _index = require("../index");
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Recipes/AttributeMappingReadOnlyField'
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  var Row = function Row(props) {
+    var withChip = props.withChip,
+        withTooltip = props.withTooltip,
+        leftValue = props.leftValue,
+        rightValue = props.rightValue;
+    return (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      alignItems: "center",
+      mt: "10px"
+    }, (0, _react2.jsx)(_index.TextField, {
+      isReadOnly: true,
+      value: leftValue,
+      labelProps: {
+        mb: 0
+      },
+      controlProps: {
+        variant: 'input.small',
+        'aria-label': "input ".concat(leftValue),
+        sx: {
+          width: '165px'
+        }
+      }
+    }), (0, _react2.jsx)(_index.Separator, {
+      sx: {
+        width: '21px',
+        ml: '2px',
+        mr: '2px'
+      }
+    }), (0, _react2.jsx)(_index.TextField, {
+      isReadOnly: true,
+      value: rightValue,
+      labelProps: {
+        mb: 0
+      },
+      controlProps: {
+        variant: 'input.small',
+        'aria-label': "input ".concat(rightValue),
+        sx: {
+          width: '165px'
+        }
+      }
+    }), withChip && (0, _react2.jsx)(_index.Chip, {
+      label: "Required",
+      sx: {
+        width: '65px',
+        height: '22px',
+        alignSelf: 'center',
+        minWidth: 'fit-content',
+        border: '1px solid',
+        borderColor: 'neutral.80',
+        backgroundColor: 'white !important',
+        ml: 8,
+        '& span': {
+          fontSize: 'sm',
+          lineHeight: 1,
+          color: '#253746'
+        }
+      }
+    }), withTooltip && (0, _react2.jsx)(_index.Box, {
+      ml: "5px",
+      height: "15px",
+      width: "15px"
+    }, (0, _react2.jsx)(_index.HelpHint, {
+      tooltipProps: {
+        direction: 'bottom'
+      }
+    }, "Population set to default")));
+  };
+
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    alignItems: "center",
+    mb: "15px"
+  }, (0, _react2.jsx)(_index.Text, {
+    sx: {
+      fontSize: 'lg',
+      lineHeight: '21px',
+      fontWeight: 3,
+      color: 'text.primary'
+    }
+  }, "Attribute Mapping"), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.IconButton, {
+    ml: "5px",
+    variant: "inverted",
+    "aria-label": "edit header button"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _CreateIcon["default"],
+    size: 18
+  })))), (0, _react2.jsx)(_index.Box, {
+    backgroundColor: "accent.99",
+    width: "450px",
+    padding: "10px 10px 25px 10px"
+  }, (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: {
+      width: '100%'
+    }
+  }, (0, _react2.jsx)(_index.Box, {
+    sx: {
+      width: 'calc(50% - 22px)'
+    }
+  }, (0, _react2.jsx)(_index.Text, {
+    sx: {
+      fontWeight: 3,
+      fontSize: 'md',
+      lineHeight: '18px',
+      mb: '5px'
+    }
+  }, "PingOne")), (0, _react2.jsx)(_index.Box, {
+    sx: {
+      width: 'calc(50% - 22px)'
+    }
+  }, (0, _react2.jsx)(_index.Text, {
+    sx: {
+      fontWeight: 3,
+      fontSize: 'md',
+      lineHeight: '18px',
+      mb: '5px'
+    }
+  }, "Google Suites"))), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(Row, {
+    withChip: true,
+    leftValue: "UserId",
+    rightValue: "mdorey"
+  }), (0, _react2.jsx)(Row, {
+    leftValue: "givenName",
+    rightValue: "firstName"
+  }), (0, _react2.jsx)(Row, {
+    leftValue: "familyName",
+    rightValue: "lastName"
+  }), (0, _react2.jsx)(Row, {
+    withTooltip: true,
+    leftValue: "population",
+    rightValue: "population"
+  }), (0, _react2.jsx)(Row, {
+    leftValue: "password",
+    rightValue: "password"
+  })));
+};
+
+exports.Default = Default;

package/lib/cjs/styles/Spacing.stories.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.Spacing = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/entries"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Text = _interopRequireDefault(require("../components/Text"));
+
+var _spacing = _interopRequireDefault(require("./spacing"));
+
+var _ = require("..");
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Design/Spacing'
+};
+exports["default"] = _default;
+var tableBodyStyles = {
+  border: 'unset'
+};
+var tableRowStyles = {
+  backgroundColor: 'transparent !important'
+};
+
+var Spacing = function Spacing() {
+  var _context;
+
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Text["default"], {
+    variant: "sectionTitle"
+  }, "Spacing"), (0, _react2.jsx)(_.Separator, {
+    mb: "sm"
+  }), (0, _react2.jsx)(_.Table, {
+    width: "75%"
+  }, (0, _react2.jsx)(_.TableHead, null, (0, _react2.jsx)(_.TableRow, {
+    sx: tableRowStyles,
+    key: "head"
+  }, (0, _react2.jsx)(_.TableCell, {
+    isHeading: true,
+    key: "name"
+  }, "Token"), (0, _react2.jsx)(_.TableCell, {
+    isHeading: true,
+    key: "value"
+  }, "Size"))), (0, _map["default"])(_context = (0, _entries["default"])(_spacing["default"])).call(_context, function (_ref) {
+    var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
+
+    return (0, _react2.jsx)(_.TableBody, {
+      sx: tableBodyStyles,
+      key: key
+    }, (0, _react2.jsx)(_.TableRow, {
+      sx: tableRowStyles
+    }, (0, _react2.jsx)(_.TableCell, {
+      bg: "white"
+    }, key), (0, _react2.jsx)(_.TableCell, {
+      bg: "white"
+    }, value, "px")));
+  })));
+};
+
+exports.Spacing = Spacing;

package/lib/cjs/styles/Typography.stories.js

@@ -0,0 +1,160 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.TypographyTokens = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/entries"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Text = _interopRequireDefault(require("../components/Text"));
+
+var _ = require("..");
+
+var _text = require("./text");
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Design/Typography'
+};
+exports["default"] = _default;
+var tableBodyStyles = {
+  border: 'unset'
+};
+var tableRowStyles = {
+  backgroundColor: 'transparent !important'
+};
+
+var TypographyTokens = function TypographyTokens() {
+  var _context, _context2;
+
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Text["default"], {
+    variant: "sectionTitle"
+  }, "Font Sizes"), (0, _react2.jsx)(_.Separator, {
+    mb: "sm"
+  }), (0, _react2.jsx)(_.Table, {
+    width: "75%"
+  }, (0, _react2.jsx)(_.TableHead, null, (0, _react2.jsx)(_.TableRow, {
+    key: "head"
+  }, (0, _react2.jsx)(_.TableCell, {
+    isHeading: true
+  }, "Token"), (0, _react2.jsx)(_.TableCell, {
+    isHeading: true
+  }, "Size"), (0, _react2.jsx)(_.TableCell, {
+    isHeading: true
+  }, "Example"))), (0, _map["default"])(_context = (0, _entries["default"])(_text.fontSizes)).call(_context, function (_ref) {
+    var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
+
+    return (0, _react2.jsx)(_.TableBody, {
+      sx: tableBodyStyles,
+      key: key
+    }, (0, _react2.jsx)(_.TableRow, {
+      sx: tableRowStyles
+    }, (0, _react2.jsx)(_.TableCell, null, (0, _react2.jsx)(_Text["default"], {
+      fontSize: value
+    }, key)), (0, _react2.jsx)(_.TableCell, null, (0, _react2.jsx)(_Text["default"], {
+      fontSize: value
+    }, value)), (0, _react2.jsx)(_.TableCell, null, (0, _react2.jsx)(_Text["default"], {
+      fontSize: value
+    }, "<Text fontSize={", key, "} />"))));
+  }))), (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Text["default"], {
+    variant: "sectionTitle",
+    mt: "xx"
+  }, "Font Weights"), (0, _react2.jsx)(_.Separator, {
+    mb: "sm"
+  }), (0, _react2.jsx)(_.Table, {
+    width: "75%"
+  }, (0, _react2.jsx)(_.TableHead, null, (0, _react2.jsx)(_.TableRow, {
+    key: "head"
+  }, (0, _react2.jsx)(_.TableCell, {
+    isHeading: true
+  }, "Token"), (0, _react2.jsx)(_.TableCell, {
+    isHeading: true
+  }, "Size"), (0, _react2.jsx)(_.TableCell, {
+    isHeading: true
+  }, "Example"))), (0, _map["default"])(_context2 = (0, _entries["default"])(_text.fontWeights)).call(_context2, function (_ref3) {
+    var _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
+        key = _ref4[0],
+        value = _ref4[1];
+
+    return (0, _react2.jsx)(_.TableBody, {
+      sx: tableBodyStyles,
+      key: key
+    }, (0, _react2.jsx)(_.TableRow, {
+      sx: tableRowStyles
+    }, (0, _react2.jsx)(_.TableCell, null, (0, _react2.jsx)(_Text["default"], {
+      fontWeight: value
+    }, key)), (0, _react2.jsx)(_.TableCell, null, (0, _react2.jsx)(_Text["default"], {
+      fontWeight: value
+    }, value)), (0, _react2.jsx)(_.TableCell, null, (0, _react2.jsx)(_Text["default"], {
+      fontWeight: value
+    }, "<Text fontWeight={", key, "} />"))));
+  }))), (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Text["default"], {
+    variant: "sectionTitle",
+    mt: "xx"
+  }, "Text Colors"), (0, _react2.jsx)(_.Separator, {
+    mb: "sm"
+  }), (0, _react2.jsx)(_.Table, {
+    width: "75%"
+  }, (0, _react2.jsx)(_.TableHead, null, (0, _react2.jsx)(_.TableRow, {
+    key: "head"
+  }, (0, _react2.jsx)(_.TableCell, {
+    isHeading: true
+  }, "Token"), (0, _react2.jsx)(_.TableCell, {
+    isHeading: true
+  }, "Color"), (0, _react2.jsx)(_.TableCell, {
+    isHeading: true
+  }, "Example"))), (0, _react2.jsx)(_.TableBody, {
+    sx: tableBodyStyles
+  }, (0, _react2.jsx)(_.TableRow, {
+    sx: tableRowStyles
+  }, (0, _react2.jsx)(_.TableCell, null, (0, _react2.jsx)(_.Box, {
+    isRow: true
+  }, (0, _react2.jsx)(_.Box, {
+    width: "30px",
+    height: "30px",
+    bg: "text.primary",
+    mr: "xs"
+  }), (0, _react2.jsx)(_Text["default"], {
+    alignSelf: "center"
+  }, "text.primary"))), (0, _react2.jsx)(_.TableCell, {
+    alignSelf: "center"
+  }, (0, _react2.jsx)(_Text["default"], null, "neutral.10")), (0, _react2.jsx)(_.TableCell, {
+    alignSelf: "center"
+  }, (0, _react2.jsx)(_Text["default"], {
+    color: "text.primary"
+  }, "<Text textColor={text.primary} />"))), (0, _react2.jsx)(_.TableRow, {
+    sx: tableRowStyles
+  }, (0, _react2.jsx)(_.TableCell, null, (0, _react2.jsx)(_.Box, {
+    isRow: true
+  }, (0, _react2.jsx)(_.Box, {
+    width: "30px",
+    height: "30px",
+    bg: "text.secondary",
+    mr: "xs"
+  }), (0, _react2.jsx)(_Text["default"], {
+    alignSelf: "center"
+  }, "text.secondary"))), (0, _react2.jsx)(_.TableCell, {
+    alignSelf: "center"
+  }, (0, _react2.jsx)(_Text["default"], null, "neutral.40")), (0, _react2.jsx)(_.TableCell, {
+    alignSelf: "center"
+  }, (0, _react2.jsx)(_Text["default"], {
+    color: "text.secondary"
+  }, "<Text color={text.secondary} />")))))));
+};
+
+exports.TypographyTokens = TypographyTokens;

package/lib/components/Messages/Message.js

@@ -8,9 +8,10 @@ import React, { forwardRef, useEffect, useRef, useState, useLayoutEffect } from
 import PropTypes from 'prop-types';
 import { announce } from '@react-aria/live-announcer';
 import AlertCircleIcon from 'mdi-react/AlertCircleIcon';
-import AlertCircleOutlineIcon from 'mdi-react/AlertCircleOutlineIcon';
 import CheckCircleIcon from 'mdi-react/CheckCircleIcon';
 import CloseIcon from 'mdi-react/CloseIcon';
+import AlertIcon from 'mdi-react/AlertIcon';
+import InformationIcon from 'mdi-react/InformationIcon';
 import useStatusClasses from '../../hooks/useStatusClasses';
 import statuses from '../../utils/devUtils/constants/statuses';
 import Box from '../Box';
@@ -19,10 +20,10 @@ import IconButton from '../IconButton';
 import Text from '../Text';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var icons = {
-  "default": AlertCircleOutlineIcon,
+  "default": InformationIcon,
   success: CheckCircleIcon,
   error: AlertCircleIcon,
-  warning: AlertCircleOutlineIcon
+  warning: AlertIcon
 };
 
 var CloseButton = function CloseButton(_ref) {

package/lib/recipes/AttributeMappingReadOnlyField.stories.js

@@ -0,0 +1,145 @@
+import React from 'react';
+import CreateIcon from 'mdi-react/CreateIcon';
+import { Box, Chip, IconButton, Text, Icon, Separator, TextField, HelpHint } from '../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Recipes/AttributeMappingReadOnlyField'
+};
+export var Default = function Default() {
+  var Row = function Row(props) {
+    var withChip = props.withChip,
+        withTooltip = props.withTooltip,
+        leftValue = props.leftValue,
+        rightValue = props.rightValue;
+    return ___EmotionJSX(Box, {
+      isRow: true,
+      alignItems: "center",
+      mt: "10px"
+    }, ___EmotionJSX(TextField, {
+      isReadOnly: true,
+      value: leftValue,
+      labelProps: {
+        mb: 0
+      },
+      controlProps: {
+        variant: 'input.small',
+        'aria-label': "input ".concat(leftValue),
+        sx: {
+          width: '165px'
+        }
+      }
+    }), ___EmotionJSX(Separator, {
+      sx: {
+        width: '21px',
+        ml: '2px',
+        mr: '2px'
+      }
+    }), ___EmotionJSX(TextField, {
+      isReadOnly: true,
+      value: rightValue,
+      labelProps: {
+        mb: 0
+      },
+      controlProps: {
+        variant: 'input.small',
+        'aria-label': "input ".concat(rightValue),
+        sx: {
+          width: '165px'
+        }
+      }
+    }), withChip && ___EmotionJSX(Chip, {
+      label: "Required",
+      sx: {
+        width: '65px',
+        height: '22px',
+        alignSelf: 'center',
+        minWidth: 'fit-content',
+        border: '1px solid',
+        borderColor: 'neutral.80',
+        backgroundColor: 'white !important',
+        ml: 8,
+        '& span': {
+          fontSize: 'sm',
+          lineHeight: 1,
+          color: '#253746'
+        }
+      }
+    }), withTooltip && ___EmotionJSX(Box, {
+      ml: "5px",
+      height: "15px",
+      width: "15px"
+    }, ___EmotionJSX(HelpHint, {
+      tooltipProps: {
+        direction: 'bottom'
+      }
+    }, "Population set to default")));
+  };
+
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center",
+    mb: "15px"
+  }, ___EmotionJSX(Text, {
+    sx: {
+      fontSize: 'lg',
+      lineHeight: '21px',
+      fontWeight: 3,
+      color: 'text.primary'
+    }
+  }, "Attribute Mapping"), ___EmotionJSX(Box, null, ___EmotionJSX(IconButton, {
+    ml: "5px",
+    variant: "inverted",
+    "aria-label": "edit header button"
+  }, ___EmotionJSX(Icon, {
+    icon: CreateIcon,
+    size: 18
+  })))), ___EmotionJSX(Box, {
+    backgroundColor: "accent.99",
+    width: "450px",
+    padding: "10px 10px 25px 10px"
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    sx: {
+      width: '100%'
+    }
+  }, ___EmotionJSX(Box, {
+    sx: {
+      width: 'calc(50% - 22px)'
+    }
+  }, ___EmotionJSX(Text, {
+    sx: {
+      fontWeight: 3,
+      fontSize: 'md',
+      lineHeight: '18px',
+      mb: '5px'
+    }
+  }, "PingOne")), ___EmotionJSX(Box, {
+    sx: {
+      width: 'calc(50% - 22px)'
+    }
+  }, ___EmotionJSX(Text, {
+    sx: {
+      fontWeight: 3,
+      fontSize: 'md',
+      lineHeight: '18px',
+      mb: '5px'
+    }
+  }, "Google Suites"))), ___EmotionJSX(Separator, null), ___EmotionJSX(Row, {
+    withChip: true,
+    leftValue: "UserId",
+    rightValue: "mdorey"
+  }), ___EmotionJSX(Row, {
+    leftValue: "givenName",
+    rightValue: "firstName"
+  }), ___EmotionJSX(Row, {
+    leftValue: "familyName",
+    rightValue: "lastName"
+  }), ___EmotionJSX(Row, {
+    withTooltip: true,
+    leftValue: "population",
+    rightValue: "population"
+  }), ___EmotionJSX(Row, {
+    leftValue: "password",
+    rightValue: "password"
+  })));
+};

package/lib/styles/Spacing.stories.js

@@ -0,0 +1,52 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React from 'react';
+import Text from '../components/Text';
+import scale from './spacing';
+import { Table, TableHead, TableRow, TableBody, TableCell, Separator } from '..';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Design/Spacing'
+};
+var tableBodyStyles = {
+  border: 'unset'
+};
+var tableRowStyles = {
+  backgroundColor: 'transparent !important'
+};
+export var Spacing = function Spacing() {
+  var _context;
+
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
+    variant: "sectionTitle"
+  }, "Spacing"), ___EmotionJSX(Separator, {
+    mb: "sm"
+  }), ___EmotionJSX(Table, {
+    width: "75%"
+  }, ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
+    sx: tableRowStyles,
+    key: "head"
+  }, ___EmotionJSX(TableCell, {
+    isHeading: true,
+    key: "name"
+  }, "Token"), ___EmotionJSX(TableCell, {
+    isHeading: true,
+    key: "value"
+  }, "Size"))), _mapInstanceProperty(_context = _Object$entries(scale)).call(_context, function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
+
+    return ___EmotionJSX(TableBody, {
+      sx: tableBodyStyles,
+      key: key
+    }, ___EmotionJSX(TableRow, {
+      sx: tableRowStyles
+    }, ___EmotionJSX(TableCell, {
+      bg: "white"
+    }, key), ___EmotionJSX(TableCell, {
+      bg: "white"
+    }, value, "px")));
+  })));
+};

package/lib/styles/Typography.stories.js

@@ -0,0 +1,136 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React from 'react';
+import Text from '../components/Text';
+import { Table, TableRow, TableBody, TableHead, TableCell, Box, Separator } from '..';
+import { fontWeights, fontSizes } from './text';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Design/Typography'
+};
+var tableBodyStyles = {
+  border: 'unset'
+};
+var tableRowStyles = {
+  backgroundColor: 'transparent !important'
+};
+export var TypographyTokens = function TypographyTokens() {
+  var _context, _context2;
+
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
+    variant: "sectionTitle"
+  }, "Font Sizes"), ___EmotionJSX(Separator, {
+    mb: "sm"
+  }), ___EmotionJSX(Table, {
+    width: "75%"
+  }, ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
+    key: "head"
+  }, ___EmotionJSX(TableCell, {
+    isHeading: true
+  }, "Token"), ___EmotionJSX(TableCell, {
+    isHeading: true
+  }, "Size"), ___EmotionJSX(TableCell, {
+    isHeading: true
+  }, "Example"))), _mapInstanceProperty(_context = _Object$entries(fontSizes)).call(_context, function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
+
+    return ___EmotionJSX(TableBody, {
+      sx: tableBodyStyles,
+      key: key
+    }, ___EmotionJSX(TableRow, {
+      sx: tableRowStyles
+    }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+      fontSize: value
+    }, key)), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+      fontSize: value
+    }, value)), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+      fontSize: value
+    }, "<Text fontSize={", key, "} />"))));
+  }))), ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
+    variant: "sectionTitle",
+    mt: "xx"
+  }, "Font Weights"), ___EmotionJSX(Separator, {
+    mb: "sm"
+  }), ___EmotionJSX(Table, {
+    width: "75%"
+  }, ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
+    key: "head"
+  }, ___EmotionJSX(TableCell, {
+    isHeading: true
+  }, "Token"), ___EmotionJSX(TableCell, {
+    isHeading: true
+  }, "Size"), ___EmotionJSX(TableCell, {
+    isHeading: true
+  }, "Example"))), _mapInstanceProperty(_context2 = _Object$entries(fontWeights)).call(_context2, function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+        key = _ref4[0],
+        value = _ref4[1];
+
+    return ___EmotionJSX(TableBody, {
+      sx: tableBodyStyles,
+      key: key
+    }, ___EmotionJSX(TableRow, {
+      sx: tableRowStyles
+    }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+      fontWeight: value
+    }, key)), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+      fontWeight: value
+    }, value)), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+      fontWeight: value
+    }, "<Text fontWeight={", key, "} />"))));
+  }))), ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
+    variant: "sectionTitle",
+    mt: "xx"
+  }, "Text Colors"), ___EmotionJSX(Separator, {
+    mb: "sm"
+  }), ___EmotionJSX(Table, {
+    width: "75%"
+  }, ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
+    key: "head"
+  }, ___EmotionJSX(TableCell, {
+    isHeading: true
+  }, "Token"), ___EmotionJSX(TableCell, {
+    isHeading: true
+  }, "Color"), ___EmotionJSX(TableCell, {
+    isHeading: true
+  }, "Example"))), ___EmotionJSX(TableBody, {
+    sx: tableBodyStyles
+  }, ___EmotionJSX(TableRow, {
+    sx: tableRowStyles
+  }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Box, {
+    width: "30px",
+    height: "30px",
+    bg: "text.primary",
+    mr: "xs"
+  }), ___EmotionJSX(Text, {
+    alignSelf: "center"
+  }, "text.primary"))), ___EmotionJSX(TableCell, {
+    alignSelf: "center"
+  }, ___EmotionJSX(Text, null, "neutral.10")), ___EmotionJSX(TableCell, {
+    alignSelf: "center"
+  }, ___EmotionJSX(Text, {
+    color: "text.primary"
+  }, "<Text textColor={text.primary} />"))), ___EmotionJSX(TableRow, {
+    sx: tableRowStyles
+  }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Box, {
+    width: "30px",
+    height: "30px",
+    bg: "text.secondary",
+    mr: "xs"
+  }), ___EmotionJSX(Text, {
+    alignSelf: "center"
+  }, "text.secondary"))), ___EmotionJSX(TableCell, {
+    alignSelf: "center"
+  }, ___EmotionJSX(Text, null, "neutral.40")), ___EmotionJSX(TableCell, {
+    alignSelf: "center"
+  }, ___EmotionJSX(Text, {
+    color: "text.secondary"
+  }, "<Text color={text.secondary} />")))))));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.13.0-alpha.4",
+  "version": "1.13.0-alpha.7",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",