@pingux/astro 2.84.0-alpha.1 → 2.84.0-alpha.10

package/lib/components/SwitchField/SwitchField.js

@@ -8,54 +8,32 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["label", "helperText", "isDefaultSelected", "isSelected", "onChange", "value", "name", "id", "isDisabled", "isReadOnly", "isRequired", "hasAutoFocus", "onFocus", "onBlur", "onFocusChange", "onKeyDown", "onKeyUp", "status", "controlProps"];
+var _excluded = ["label", "helperText", "isDefaultSelected", "isDisabled", "status", "controlProps"];
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-/* eslint-disable no-unused-vars */
-import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef } from 'react';
 import { useSwitch } from 'react-aria';
 import { useToggleState } from 'react-stately';
 import { usePress } from '@react-aria/interactions';
 import omit from 'lodash/omit';
 import { Box, FieldHelperText, Label, Switch } from '../..';
-import { useField, usePropWarning } from '../../hooks';
+import { useField, useLocalOrForwardRef, usePropWarning } from '../../hooks';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
-import { statusDefaultProp } from '../../utils/docUtils/statusProp';
-import { switchFieldPropTypes } from './switchFieldAttributes';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var displayName = 'SwitchField';
 var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _inputProps$checked;
   var label = props.label,
     helperText = props.helperText,
     isDefaultSelected = props.isDefaultSelected,
-    isSelected = props.isSelected,
-    onChange = props.onChange,
-    value = props.value,
-    name = props.name,
-    id = props.id,
-    _props$isDisabled = props.isDisabled,
-    isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
-    _props$isReadOnly = props.isReadOnly,
-    isReadOnly = _props$isReadOnly === void 0 ? false : _props$isReadOnly,
-    _props$isRequired = props.isRequired,
-    isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
-    _props$hasAutoFocus = props.hasAutoFocus,
-    hasAutoFocus = _props$hasAutoFocus === void 0 ? false : _props$hasAutoFocus,
-    onFocus = props.onFocus,
-    onBlur = props.onBlur,
-    onFocusChange = props.onFocusChange,
-    onKeyDown = props.onKeyDown,
-    onKeyUp = props.onKeyUp,
+    isDisabled = props.isDisabled,
     status = props.status,
     controlProps = props.controlProps,
     others = _objectWithoutProperties(props, _excluded);
-  var switchRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
-  /* istanbul ignore next */
-  useImperativeHandle(ref, function () {
-    return switchRef.current;
-  });
+  var switchRef = useLocalOrForwardRef(ref);
   var state = useToggleState(_objectSpread({
     defaultSelected: isDefaultSelected
   }, props));
@@ -67,11 +45,11 @@ var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useSwitch = useSwitch(_objectSpread(_objectSpread({
       children: label
     }, whitelistedProps), {}, {
-      'aria-label': 'switch-field'
+      'aria-label': others['aria-label'] || 'switch-field'
     }), state, switchRef),
     inputProps = _useSwitch.inputProps;
   var statusClasses = {
-    isSelected: inputProps.checked
+    isSelected: (_inputProps$checked = inputProps.checked) !== null && _inputProps$checked !== void 0 ? _inputProps$checked : false
   };
   var _useField = useField(_objectSpread(_objectSpread(_objectSpread({
       statusClasses: statusClasses
@@ -91,11 +69,13 @@ var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, fieldLabelProps), ___EmotionJSX(Box, fieldControlWrapperProps, ___EmotionJSX(Switch, _extends({
     ref: switchRef,
     inputProps: fieldControlInputProps
-  }, unhandledAriaProps, omit(others, 'data-pendo-id')))), label), helperText && ___EmotionJSX(FieldHelperText, {
+  }, unhandledAriaProps, omit(others, 'data-pendo-id', 'aria-label')))), label), helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText));
 });
-SwitchField.propTypes = switchFieldPropTypes;
-SwitchField.defaultProps = _objectSpread({}, statusDefaultProp);
+SwitchField.defaultProps = {
+  status: statuses.DEFAULT,
+  isDisabled: false
+};
 SwitchField.displayName = displayName;
 export default SwitchField;

package/lib/components/SwitchField/SwitchField.stories.js

@@ -47,7 +47,9 @@ export var Controlled = function Controlled() {
   return ___EmotionJSX(SwitchField, {
     isSelected: isSelected,
     label: "Controlled",
-    onChange: setIsSelected,
+    onChange: function onChange() {
+      return setIsSelected(!isSelected);
+    },
     value: "my-switch"
   });
 };
@@ -79,7 +81,7 @@ export var Required = function Required() {
   });
 };
 export var WithTooltip = function WithTooltip() {
-  var tooltipTrigger = useRef();
+  var tooltipTrigger = useRef(null);
   return ___EmotionJSX(TooltipTrigger, {
     crossOffset: 15,
     offset: 20,

package/lib/components/SwitchField/switchFieldAttributes.js

@@ -11,13 +11,8 @@ var _context;
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
-import PropTypes from 'prop-types';
 import statuses from '../../utils/devUtils/constants/statuses';
-import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
 import { booleanArg, docArgTypes, funcArg } from '../../utils/docUtils/docArgTypes';
-import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
-import { statusPropTypes } from '../../utils/docUtils/statusProp';
 var descriptions = {
   className: 'A list of class names to apply to the input element.',
   hasAutoFocus: 'Whether the element should receive focus on render.',
@@ -159,26 +154,4 @@ export var switchFieldArgs = {
   label: 'Example Label',
   value: 'my-switch',
   status: statuses.DEFAULT
-};
-export var switchFieldPropTypes = _objectSpread(_objectSpread(_objectSpread({
-  className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-  hasAutoFocus: PropTypes.bool,
-  helperText: PropTypes.node,
-  hintText: PropTypes.string,
-  id: PropTypes.string,
-  isDefaultSelected: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  isRequired: PropTypes.bool,
-  isSelected: PropTypes.bool,
-  label: PropTypes.node,
-  name: PropTypes.string,
-  onBlur: PropTypes.func,
-  onChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  onFocusChange: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onKeyUp: PropTypes.func,
-  status: PropTypes.oneOf(_Object$values(statuses)),
-  value: PropTypes.string
-}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes), statusPropTypes);
+};

package/lib/components/Tabs/Tabs.js

@@ -82,7 +82,6 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
     value: state
   }, ___EmotionJSX(Box, others, ___EmotionJSX(Box, _extends({
     variant: "tabs",
-    gap: "25px",
     isRow: orientation === ORIENTATION.HORIZONTAL
   }, tabListProps, raTabListProps, {
     ref: tabListRef,

package/lib/components/Tabs/Tabs.style.js

@@ -43,7 +43,8 @@ export var tabs = {
   borderBottomWidth: 1,
   borderBottomStyle: 'solid',
   borderBottomColor: 'neutral.90',
-  mb: 'lg'
+  mb: 'lg',
+  gap: '25px'
 };
 export var menuTab = _objectSpread(_objectSpread({}, quiet), {}, {
   color: 'neutral.40',

package/lib/components/TimeField/TimeField.stories.js

@@ -72,12 +72,12 @@ export var Required = function Required(args) {
   return ___EmotionJSX(TimeField, _extends({}, args, {
     "aria-label": "timefield-default",
     isRequired: true,
-    label: "Example label"
+    label: "Lorem Ipsum"
   }));
 };
 export var WithLabel = function WithLabel(args) {
   return ___EmotionJSX(TimeField, _extends({}, args, {
-    label: "Loren Ipsum",
+    label: "Lorem Ipsum",
     "aria-label": "timefield-default"
   }));
 };

package/lib/styles/theme.js

@@ -26,10 +26,14 @@ export default {
   },
   breakpoints: breakpoints,
   fonts: {
-    standard: '"Helvetica Neue", Helvetica, sans-serif'
+    standard: '"Helvetica Neue", Helvetica, sans-serif',
+    codeView: '"Roboto Mono", "Lucida Console", Courier, monospace'
   },
   fontSizes: fontSizes,
   fontWeights: fontWeights,
+  lineHeights: {
+    md: '1.5'
+  },
   sizes: {
     buttonHeight: 36,
     column: 400,

package/lib/styles/themes/next-gen/codeView/codeView.js

@@ -0,0 +1,126 @@
+var nextGenCodeViewTheme = {
+  plain: {
+    color: '#f8f8f2',
+    backgroundColor: '#272822'
+  },
+  styles: [{
+    types: ['comment', 'prolog', 'doctype', 'cdata'],
+    style: {
+      color: '#93a1a1'
+    }
+  }, {
+    types: ['punctuation'],
+    style: {
+      color: '#999999'
+    }
+  }, {
+    types: ['deleted', 'property', 'tag', 'boolean', 'number', 'constant', 'symbol'],
+    style: {
+      color: '#c792ea'
+    }
+  }, {
+    types: ['inserted', 'selector', 'string', 'char', 'builtin', 'inserted', 'attr-name'],
+    style: {
+      color: '#A1C281'
+    }
+  }, {
+    types: ['operator', 'entity', 'url', 'language-css', 'style'],
+    style: {
+      color: '#dfc084',
+      background: 'transparent'
+    }
+  }, {
+    types: ['atrule', 'attr-value', 'keyword'],
+    style: {
+      color: '#c792ea'
+    }
+  }, {
+    types: ['function'],
+    style: {
+      color: '#53bcfd'
+    }
+  }, {
+    types: ['regex', 'important', 'variable'],
+    style: {
+      color: '#f07178'
+    }
+  }, {
+    types: ['important', 'bold'],
+    style: {
+      fontWeight: 'bold'
+    }
+  }, {
+    types: ['entity'],
+    style: {
+      cursor: 'help'
+    }
+  }]
+};
+var nextGenCodeViewWrapper = {
+  bg: 'accent.99',
+  border: '1px solid',
+  borderColor: 'accent.95',
+  width: 400,
+  height: 200,
+  my: 'xs',
+  overflow: 'auto',
+  alignItems: 'center',
+  '&.is-focused, &:focus': {
+    boxShadow: 'focus',
+    outline: 'none'
+  },
+  pre: {
+    backgroundColor: 'transparent',
+    padding: '1em',
+    height: '100%',
+    width: '100%',
+    overflowX: 'hidden',
+    overflowY: 'auto',
+    fontSize: '13px',
+    '& .token-line': {
+      display: 'block',
+      alignItems: 'center',
+      '& .token': {
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-all'
+      }
+    },
+    fontFamily: 'codeView',
+    lineHeight: 'md'
+  },
+  '&.has-no-copy-button': {
+    pre: {
+      p: 'sm'
+    }
+  },
+  '&.has-line-numbers': {
+    pre: {
+      p: '0 10px 0 0',
+      overflow: 'auto',
+      '& .token-line:first-of-type *': {
+        pt: 'sm'
+      },
+      '& .token-line': {
+        display: 'flex',
+        '& .token': {
+          whiteSpace: 'pre'
+        }
+      }
+    }
+  }
+};
+var lineNo = {
+  display: 'table-cell',
+  userSelect: 'none',
+  px: 'xs',
+  m: '0 10px 0 0',
+  bg: 'accent.30',
+  minWidth: 26,
+  color: 'white',
+  lineHeight: '20px'
+};
+export default {
+  theme: nextGenCodeViewTheme,
+  wrapper: nextGenCodeViewWrapper,
+  lineNo: lineNo
+};

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -1,2 +1,2 @@
-var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView'];
+var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card'];
 export default nextGenConvertedComponents;

package/lib/styles/themes/next-gen/next-gen.js

@@ -11,31 +11,51 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import merge from 'deepmerge';
 import theme from '../../theme.js';
+import codeView from './codeView/codeView';
 import colors from './colors/colors';
 import buttons from './variants/button';
+import cards from './variants/cards';
+import images from './variants/images';
+import links from './variants/links';
 import { text as newText } from './variants/text';
 import variants, { badges } from './variants/variants';
 import forms from './forms';
+import sizes from './sizes';
+import spacing from './spacing';
 import { fontSizes, fontWeights } from './text';
 import './open_sans.css';
+var breakpoints = ['0px', '576px', '768px', '992px', '1200px', '1600px'];
 var nextGenTheme = {
   name: 'Next Gen',
   colors: colors,
+  breakpoints: breakpoints,
   buttons: buttons,
   forms: forms,
   fontSizes: fontSizes,
   fontWeights: fontWeights,
   lineHeights: {
-    body: '1.5'
+    body: '1.5',
+    md: '1.75'
   },
   text: newText,
   fonts: {
     standard: '"Open Sans", sans-serif',
     body: '"Open Sans", sans-serif',
-    heading: '"Open Sans", sans-serif'
+    heading: '"Open Sans", sans-serif',
+    codeView: 'Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace'
   },
+  sizes: sizes,
   badges: badges,
-  variants: variants
+  space: spacing,
+  links: links,
+  cards: cards,
+  variants: variants,
+  images: images,
+  overrides: {
+    codeView: codeView
+  }
 };
 var mergedTheme = merge(theme, nextGenTheme);
-export default _objectSpread({}, mergedTheme);
+export default _objectSpread(_objectSpread({}, mergedTheme), {}, {
+  breakpoints: breakpoints
+});

package/lib/styles/themes/next-gen/sizes.js

@@ -0,0 +1,19 @@
+var avatar = {
+  sm: '24px',
+  md: '34px',
+  lg: '72px',
+  xl: '104px'
+};
+var container = {
+  xs: ['100%', '540px', '720px', '960px', '1140px', '1540px'],
+  sm: ['100%', '540px', '720px', '960px', '1140px', '1540px'],
+  md: ['100%', '100%', '720px', '960px', '1140px', '1540px'],
+  lg: ['100%', '100%', '100%', '960px', '1140px', '1540px'],
+  xl: ['100%', '100%', '100%', '100%', '1140px', '1540px'],
+  xx: ['100%', '100%', '100%', '100%', '100%', '1540px'],
+  fluid: ['100%', '100%', '100%', '100%', '100%', '100%']
+};
+export default {
+  avatar: avatar,
+  container: container
+};

package/lib/styles/themes/next-gen/spacing.js

@@ -0,0 +1,9 @@
+var scale = {
+  xs: '.25rem',
+  sm: '.5rem',
+  md: '1rem',
+  lg: '1.5rem',
+  xl: '3rem',
+  xx: '4rem'
+};
+export default scale;

package/lib/styles/themes/next-gen/text.js

@@ -1,17 +1,20 @@
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 var _fontWeights;
-var baseSize = 15;
-var majorMultiplier = 1.15;
-var getFontSize = function getFontSize(major) {
-  return Math.round(baseSize * Math.pow(majorMultiplier, major));
-};
+import sizes from './sizes';
+var fontSizeBase = 0.9375;
 export var fontSizes = {
-  'xs': getFontSize(-2),
-  'sm': getFontSize(-1),
-  'md': '15px',
-  'lg': '18.75px',
-  'xl': '22.5px',
-  'xx': '26.25px',
-  'xxx': '33.75px'
+  avatar: {
+    'sm': "calc(".concat(sizes.avatar.sm, " * .4)"),
+    'md': "calc(".concat(sizes.avatar.md, " * .4)"),
+    'lg': "calc(".concat(sizes.avatar.lg, " * .4)"),
+    'xl': "calc(".concat(sizes.avatar.xl, " * .4)")
+  },
+  'xs': "".concat(fontSizeBase * 0.8, "rem"),
+  'sm': '0.875rem',
+  'md': "".concat(fontSizeBase * 1, "rem"),
+  'lg': "".concat(fontSizeBase * 1.25, "rem"),
+  'xl': "".concat(fontSizeBase * 1.5, "rem"),
+  'xx': "".concat(fontSizeBase * 1.75, "rem"),
+  'xxx': "".concat(fontSizeBase * 2.25, "rem")
 };
-export var fontWeights = (_fontWeights = {}, _defineProperty(_fontWeights, -1, 400), _defineProperty(_fontWeights, 0, 400), _defineProperty(_fontWeights, 1, 400), _defineProperty(_fontWeights, 2, 600), _defineProperty(_fontWeights, 3, 600), _fontWeights);
+export var fontWeights = (_fontWeights = {}, _defineProperty(_fontWeights, -1, 300), _defineProperty(_fontWeights, 0, 400), _defineProperty(_fontWeights, 1, 400), _defineProperty(_fontWeights, 2, 600), _defineProperty(_fontWeights, 3, 600), _fontWeights);

package/lib/styles/themes/next-gen/variants/button.js

@@ -47,14 +47,14 @@ var buttonBase = _objectSpread(_objectSpread({}, transitions), {}, {
   },
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
-var neutral = _objectSpread(_objectSpread({
+var neutral = _objectSpread(_objectSpread(_objectSpread({
   color: 'gray-600'
-}, buttonBase), {}, {
+}, buttonBase), transitions), {}, {
   '&.is-pressed': {
-    backgroundColor: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex()
+    color: 'white'
   },
   '&.is-hovered': {
-    backgroundColor: chroma.mix(primaryBlue, 'black', 0.075, 'rgb').hex()
+    borderColor: 'primary'
   }
 });
 var primary = _objectSpread(_objectSpread({}, buttonBase), {}, {
@@ -152,6 +152,7 @@ var primaryWithIcon = _objectSpread(_objectSpread({}, primary), {}, {
   color: 'white'
 });
 var baseIconButton = {
+  cursor: 'pointer',
   transition: 'color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out',
   outline: 'none',
   borderRadius: '28px',
@@ -231,7 +232,26 @@ var iconButtons = {
       }
     }, transitions)
   },
-  messageCloseButton: _objectSpread({}, baseIconButton)
+  messageCloseButton: _objectSpread({}, baseIconButton),
+  headerNav: _objectSpread(_objectSpread({}, baseIconButton), {}, {
+    borderRadius: '4px',
+    path: {
+      fill: 'gray-800'
+    },
+    px: 'md',
+    py: 'sm',
+    width: '56px',
+    '&.is-hovered': {
+      path: {
+        fill: 'gray-500'
+      }
+    },
+    '&.is-pressed': {
+      path: {
+        fill: 'gray-500'
+      }
+    }
+  })
 };
 var buttons = {
   neutral: neutral,

package/lib/styles/themes/next-gen/variants/cards.js

@@ -0,0 +1,20 @@
+var interactive = {
+  boxShadow: 'none',
+  borderRadius: '1rem',
+  border: '1px solid',
+  borderColor: 'gray-300',
+  transition: 'border-color .15s ease-in',
+  '&.is-focused': {
+    outline: '2px solid',
+    outlineColor: 'focus',
+    outlineOffset: '0px'
+  },
+  '&.is-hovered': {
+    outline: 'none',
+    borderColor: 'blue',
+    bg: 'default'
+  }
+};
+export default {
+  interactive: interactive
+};

package/lib/styles/themes/next-gen/variants/images.js

@@ -0,0 +1,4 @@
+var avatar = {};
+export default {
+  avatar: avatar
+};

package/lib/styles/themes/next-gen/variants/links.js

@@ -0,0 +1,54 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var nextGen = {
+  color: 'gray-800',
+  fontSize: 'md',
+  py: 'sm',
+  px: 'md',
+  textDecoration: 'none',
+  borderRadius: '4px',
+  lineHeight: '1.5',
+  minHeight: '22.5px',
+  fontFamily: 'standard',
+  '&.is-hovered': {
+    color: 'blue-600'
+  },
+  '&.is-pressed': {
+    color: 'blue-600'
+  }
+};
+var sideNav = _objectSpread(_objectSpread({}, nextGen), {}, {
+  px: '0',
+  display: 'block',
+  position: 'relative',
+  '&:before': {
+    position: 'absolute',
+    display: 'block',
+    borderRadius: '.25rem',
+    content: '""',
+    top: '0',
+    right: '-1rem',
+    bottom: 0,
+    left: '-1rem',
+    transition: 'background-color .15s ease'
+  },
+  '&.is-selected': {
+    color: 'blue-600',
+    '&:before': {
+      backgroundColor: 'active_light'
+    }
+  }
+});
+export default {
+  nextGen: nextGen,
+  sideNav: sideNav
+};

package/lib/styles/themes/next-gen/variants/text.js

@@ -45,7 +45,7 @@ var hTags = {
     color: 'text.primary',
     fontFamily: 'standard',
     fontWeight: 1,
-    fontSize: 'sm'
+    fontSize: 'xs'
   }
 };
 export var text = _objectSpread({
@@ -58,12 +58,19 @@ export var text = _objectSpread({
     color: 'text.primary'
   },
   placeholder: {
-    color: 'text.primary'
+    color: 'text.primary',
+    fontWeight: 1
   },
   paragraph: {
     lineHeight: 'body'
   },
   listViewItemText: {
     fontWeight: 2
+  },
+  small: {
+    fontSize: 'sm',
+    color: 'gray-500',
+    fontFamily: 'standard',
+    lineHeight: 'md'
   }
 }, hTags);