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

package/lib/components/PopoverMenu/PopoverMenu.stories.js

@@ -4,7 +4,7 @@ import DotsVerticalIcon from '@pingux/mdi-react/DotsVerticalIcon';
 import { action } from '@storybook/addon-actions';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Icon, IconButton, Item, Menu, OverlayProvider, PopoverMenu, Text } from '../../index';
+import { Icon, IconButton, Item, Menu, OverlayProvider, PopoverMenu, Section, Text } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import PopoverMenuReadme from './PopoverMenu.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -88,12 +88,12 @@ export var DefaultOpen = function DefaultOpen() {
       }
     })), ___EmotionJSX(Menu, {
       onAction: action('onAction'),
-      disabledKeys: ['duplicate']
+      disabledKeys: ['disabledItem']
     }, ___EmotionJSX(Item, {
       key: "edit"
     }, "Edit"), ___EmotionJSX(Item, {
-      key: "duplicate"
-    }, "Duplicate"), ___EmotionJSX(Item, {
+      key: "disabledItem"
+    }, "Disabled Item"), ___EmotionJSX(Item, {
       key: "delete",
       textValue: "delete"
     }, ___EmotionJSX(Text, {
@@ -222,4 +222,70 @@ export var NotClosedOnSelect = function NotClosedOnSelect() {
       color: "critical.bright"
     }, "Delete")))))
   );
+};
+export var WithSeparator = function WithSeparator(args) {
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, args, ___EmotionJSX(IconButton, {
+      "aria-label": "more options",
+      variant: "inverted"
+    }, ___EmotionJSX(Icon, {
+      icon: DotsVerticalIcon,
+      size: "md",
+      title: {
+        name: 'Dots Vertical Icon'
+      }
+    })), ___EmotionJSX(Menu, {
+      onAction: action('onAction'),
+      disabledKeys: ['disabledItem']
+    }, ___EmotionJSX(Section, null, ___EmotionJSX(Item, {
+      key: "edit"
+    }, "Edit")), ___EmotionJSX(Section, null, ___EmotionJSX(Item, {
+      key: "disabledItem"
+    }, "Disabled Item"), ___EmotionJSX(Item, {
+      key: "delete",
+      textValue: "delete"
+    }, ___EmotionJSX(Text, {
+      color: "critical.bright"
+    }, "Delete"))))))
+  );
+};
+export var WithSections = function WithSections(args) {
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, args, ___EmotionJSX(IconButton, {
+      "aria-label": "more options",
+      variant: "inverted"
+    }, ___EmotionJSX(Icon, {
+      icon: DotsVerticalIcon,
+      size: "md",
+      title: {
+        name: 'Dots Vertical Icon'
+      }
+    })), ___EmotionJSX(Menu, {
+      onAction: action('onAction'),
+      disabledKeys: ['disabledItem']
+    }, ___EmotionJSX(Section, {
+      key: "section 1",
+      title: "Section 1"
+    }, ___EmotionJSX(Item, {
+      key: "edit"
+    }, "Edit"), ___EmotionJSX(Item, {
+      key: "disabledItem"
+    }, "Disabled Item"), ___EmotionJSX(Item, {
+      key: "copy"
+    }, "Copy")), ___EmotionJSX(Section, {
+      key: "section 2",
+      title: "Section 2"
+    }, ___EmotionJSX(Item, {
+      key: "duplicate"
+    }, "Duplicate"), ___EmotionJSX(Item, {
+      key: "delete",
+      textValue: "delete"
+    }, ___EmotionJSX(Text, {
+      color: "critical.bright"
+    }, "Delete"))))))
+  );
 };

package/lib/components/SelectField/SelectField.stories.js

@@ -31,7 +31,7 @@ import { OverlayProvider } from 'react-aria';
 import { useAsyncList } from 'react-stately';
 import CalendarRangeIcon from '@pingux/mdi-react/CalendarRangeIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Icon, Item, Section, SelectField, Separator } from '../../index';
+import { Icon, Item, Section, SelectField } from '../../index';
 import { modes as labelModes } from '../../utils/devUtils/constants/labelModes';
 import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributeBaseArgTypes } from '../../utils/docUtils/fieldAttributes';
@@ -247,18 +247,15 @@ export var Controlled = function Controlled() {
 export var WithNoneOption = function WithNoneOption() {
   return ___EmotionJSX(SelectField, {
     label: "What's your favorite color?"
-  }, ___EmotionJSX(Item, {
+  }, ___EmotionJSX(Section, null, ___EmotionJSX(Item, {
     key: "none"
-  }, "None"), ___EmotionJSX(Item, {
-    isSeparator: true,
-    textValue: "-"
-  }, ___EmotionJSX(Separator, null)), ___EmotionJSX(Item, {
+  }, "None")), ___EmotionJSX(Section, null, ___EmotionJSX(Item, {
     key: "red"
   }, "Red"), ___EmotionJSX(Item, {
     key: "blue"
   }, "Blue"), ___EmotionJSX(Item, {
     key: "yellow"
-  }, "Yellow"));
+  }, "Yellow")));
 };
 export var WithSlots = function WithSlots() {
   return ___EmotionJSX(SelectField, {

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/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: 'Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace',
+    lineHeight: 1.75
+  },
+  '&.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', 'MultivaluesField', 'Text', 'Link', 'Card'];
 export default nextGenConvertedComponents;

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

@@ -11,31 +11,58 @@ 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 links from './variants/links';
 import { text as newText } from './variants/text';
 import variants, { badges } from './variants/variants';
 import forms from './forms';
+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: {
+    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%']
+    }
   },
   badges: badges,
-  variants: variants
+  space: spacing,
+  links: links,
+  cards: cards,
+  variants: variants,
+  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/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,12 @@
 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));
-};
 export var fontSizes = {
-  'xs': getFontSize(-2),
-  'sm': getFontSize(-1),
-  'md': '15px',
-  'lg': '18.75px',
-  'xl': '22.5px',
-  'xx': '26.25px',
-  'xxx': '33.75px'
+  'xs': '0.75rem',
+  'sm': '0.875rem',
+  'md': '.9375rem',
+  'lg': '1.171875rem',
+  'xl': '1.40625rem',
+  'xx': '1.640625rem',
+  'xxx': '2.109375rem'
 };
-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: '24px',
+  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/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: '22.5px',
+  minHeight: '22.5px',
+  fontFamily: 'standard',
+  '&.is-hovered': {
+    color: '#155cba'
+  },
+  '&.is-pressed': {
+    color: '#155cba'
+  }
+};
+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: '#155cba',
+    '&: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: '1.75rem'
   }
 }, hTags);

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

@@ -226,11 +226,14 @@ var menuItem = {
       color: 'text.primary',
       bg: 'lightblue'
     }
+  },
+  separator: {
+    my: 'sm'
   }
 };
 var separator = {
   base: {
-    bg: 'gray-200'
+    bg: 'gray-300'
   }
 };
 var avatarBase = {
@@ -273,8 +276,12 @@ var progressBar = {
   })
 };
 var listViewItem = {
+  rightOfData: {
+    flexShrink: 4,
+    whiteSpace: 'nowrap'
+  },
   iconContainer: {
-    mr: 'sm'
+    ml: '0px'
   },
   styledListItem: {
     bg: 'white',
@@ -295,8 +302,8 @@ var listViewItem = {
     }
   },
   styledContainer: {
-    py: '1.25rem',
-    px: '1rem',
+    py: '1rem',
+    px: '1.5rem',
     bg: 'transparent',
     '&.is-hovered': {
       bg: 'transparent',
@@ -450,6 +457,29 @@ var dataTable = {
     fontSize: 'md'
   }
 };
+var codeView = {
+  wrapper: {
+    backgroundColor: 'gray-900',
+    borderRadius: '4px',
+    '> button >svg': {
+      color: 'gray-300',
+      path: {
+        fill: 'gray-300'
+      }
+    },
+    '> pre': {
+      p: 'md'
+    }
+  }
+};
+var tabs = {
+  gap: '0px'
+};
+var menu = {
+  p: 'sm',
+  border: '1px solid',
+  borderColor: 'gray-300'
+};
 export default {
   navBar: navBar,
   fieldHelperText: fieldHelperText,
@@ -464,5 +494,8 @@ export default {
   listViewItem: listViewItem,
   progressBar: progressBar,
   listView: listView,
-  dataTable: dataTable
+  dataTable: dataTable,
+  codeView: codeView,
+  tabs: tabs,
+  menu: menu
 };

package/lib/styles/variants/variants.js

@@ -34,6 +34,7 @@ import listViewItem from '../../components/ListViewItem/ListViewItem.styles';
 import loader from '../../components/Loader/Loader.styles';
 import menu from '../../components/Menu/Menu.styles';
 import menuItem from '../../components/MenuItem/MenuItem.styles';
+import menuSection from '../../components/MenuSection/MenuSection.styles';
 import message from '../../components/Messages/Message.styles';
 import modal from '../../components/Modal/Modal.styles';
 import navBar from '../../components/NavBar/NavBar.styles';
@@ -79,6 +80,7 @@ export default _objectSpread({
   loader: loader,
   menu: menu,
   menuItem: menuItem,
+  menuSection: menuSection,
   message: message,
   modal: modal,
   navBar: navBar,

package/lib/types/index.js

@@ -30,6 +30,7 @@ export * from './listItem';
 export * from './loader';
 export * from './menu';
 export * from './menuItem';
+export * from './menuSection';
 export * from './messages';
 export * from './Modal';
 export * from './navBar';

package/lib/types/menuSection.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.84.0-alpha.1",
+  "version": "2.84.0-alpha.3",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",