@pingux/astro 2.0.0-alpha.5 → 2.0.0-alpha.7

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

@@ -11,7 +11,6 @@ var _react = _interopRequireDefault(require("react"));
 var _CogsIcon = _interopRequireDefault(require("mdi-react/CogsIcon"));
 var _DeleteIcon = _interopRequireDefault(require("mdi-react/DeleteIcon"));
 var _DragVerticalIcon = _interopRequireDefault(require("mdi-react/DragVerticalIcon"));
-var _Box = _interopRequireDefault(require("../components/Box"));
 var _index = require("../index");
 var _react2 = require("@emotion/react");
 var _default = {
@@ -94,7 +93,7 @@ var Default = function Default() {
       fill: "currentColor"
     }));
   };
-  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Box["default"], {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
     sx: sx.outerContainer,
     isRow: true
   }, (0, _react2.jsx)(_index.Icon, {
@@ -119,7 +118,7 @@ var Default = function Default() {
       key: item.name,
       "data-id": item.name
     }, item.name);
-  }), (0, _react2.jsx)(_Box["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     sx: sx.iconButtonToggleContainer
   }, (0, _react2.jsx)(_index.IconButtonToggle, {
     toggledIcon: CustomOnSvg,
@@ -148,7 +147,7 @@ var Default = function Default() {
       key: item.name,
       "data-id": item.name
     }, item.name);
-  }), (0, _react2.jsx)(_Box["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     sx: sx.iconContainer
   }, (0, _react2.jsx)(_index.IconButton, {
@@ -166,7 +165,7 @@ var Default = function Default() {
     sx: sx.actionIcon,
     size: "sm",
     title: "delete icon"
-  })))), (0, _react2.jsx)(_Box["default"], {
+  })))), (0, _react2.jsx)(_index.Box, {
     sx: sx.outerContainer,
     isRow: true
   }, (0, _react2.jsx)(_index.Icon, {
@@ -191,7 +190,7 @@ var Default = function Default() {
       key: item.name,
       "data-id": item.name
     }, item.name);
-  }), (0, _react2.jsx)(_Box["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     sx: sx.iconButtonToggleContainer
   }, (0, _react2.jsx)(_index.IconButtonToggle, {
     toggledIcon: CustomRightSvg,
@@ -220,7 +219,7 @@ var Default = function Default() {
       key: item.name,
       "data-id": item.name
     }, item.name);
-  }), (0, _react2.jsx)(_Box["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     sx: sx.iconContainer
   }, (0, _react2.jsx)(_index.IconButton, {

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

@@ -10,11 +10,6 @@ var _react = _interopRequireDefault(require("react"));
 var _AccountIcon = _interopRequireDefault(require("mdi-react/AccountIcon"));
 var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
 var _DotsVerticalIcon = _interopRequireDefault(require("mdi-react/DotsVerticalIcon"));
-var _Box = _interopRequireDefault(require("../components/Box"));
-var _Icon = _interopRequireDefault(require("../components/Icon"));
-var _IconButton = _interopRequireDefault(require("../components/IconButton"));
-var _PopoverMenu = _interopRequireDefault(require("../components/PopoverMenu"));
-var _Text = _interopRequireDefault(require("../components/Text"));
 var _index = require("../index");
 var _react2 = require("@emotion/react");
 var _default = {
@@ -40,25 +35,25 @@ var sx = {
   }
 };
 var Default = function Default() {
-  return (0, _react2.jsx)(_Box["default"], {
+  return (0, _react2.jsx)(_index.Box, {
     isRow: true,
     sx: sx.wrapper
-  }, (0, _react2.jsx)(_Icon["default"], {
+  }, (0, _react2.jsx)(_index.Icon, {
     icon: _AccountIcon["default"],
     size: 25,
     color: "accent.40"
-  }), (0, _react2.jsx)(_Box["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     ml: "sm",
     mr: "xx"
-  }, (0, _react2.jsx)(_Text["default"], {
+  }, (0, _react2.jsx)(_index.Text, {
     sx: sx.title,
     variant: "bodyStrong"
-  }, "Fons Vernall"), (0, _react2.jsx)(_Text["default"], {
+  }, "Fons Vernall"), (0, _react2.jsx)(_index.Text, {
     sx: sx.subtitle,
     variant: "subtitle"
-  }, "fvernall0@google.it")), (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_PopoverMenu["default"], null, (0, _react2.jsx)(_IconButton["default"], {
+  }, "fvernall0@google.it")), (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "Menu Button"
-  }, (0, _react2.jsx)(_Icon["default"], {
+  }, (0, _react2.jsx)(_index.Icon, {
     icon: _DotsVerticalIcon["default"],
     size: "xs",
     color: "Neutral.40",
@@ -70,12 +65,12 @@ var Default = function Default() {
   }, "Duplicate"), (0, _react2.jsx)(_index.Item, {
     key: "delete",
     textValue: "delete"
-  }, (0, _react2.jsx)(_Text["default"], {
+  }, (0, _react2.jsx)(_index.Text, {
     color: "critical.bright"
-  }, "Delete"))))), (0, _react2.jsx)(_Box["default"], null, (0, _react2.jsx)(_IconButton["default"], {
+  }, "Delete"))))), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "Close Button",
     mx: "10px"
-  }, (0, _react2.jsx)(_Icon["default"], {
+  }, (0, _react2.jsx)(_index.Icon, {
     icon: _CloseIcon["default"],
     size: "xs",
     color: "Neutral.40",

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

@@ -13,8 +13,6 @@ var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
-var _RadioField = _interopRequireDefault(require("../components/RadioField"));
-var _RadioGroupField = _interopRequireDefault(require("../components/RadioGroupField"));
 var _index = require("../index");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -54,7 +52,7 @@ var Default = function Default() {
     return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
       isRow: true,
       alignItems: "center"
-    }, (0, _react2.jsx)(_RadioField["default"], {
+    }, (0, _react2.jsx)(_index.RadioField, {
       value: fieldName,
       label: fieldName,
       isDisabled: isDisabled
@@ -119,7 +117,7 @@ var Default = function Default() {
       mb: "sm"
     }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod")));
   };
-  return (0, _react2.jsx)(_RadioGroupField["default"], null, (0, _map["default"])(roles).call(roles, function (_ref3) {
+  return (0, _react2.jsx)(_index.RadioGroupField, null, (0, _map["default"])(roles).call(roles, function (_ref3) {
     var name = _ref3.name,
       isDisabled = _ref3.isDisabled;
     return (0, _react2.jsx)(RadioFieldWithButton, {

package/lib/cjs/recipes/{SelectedFieldOverlay.story.js → SelectedFieldOverlay.stories.js}

@@ -8,9 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _VisibilityOffOutlineIcon = _interopRequireDefault(require("mdi-react/VisibilityOffOutlineIcon"));
-var _Box = _interopRequireDefault(require("../components/Box"));
-var _Icon = _interopRequireDefault(require("../components/Icon"));
-var _TextField = _interopRequireDefault(require("../components/TextField"));
+var _index = require("../index");
 var _react2 = require("@emotion/react");
 var _default = {
   title: 'Recipes/Selected Field Overlay'
@@ -40,17 +38,17 @@ var sx = {
   }
 };
 var Default = function Default() {
-  return (0, _react2.jsx)(_Box["default"], {
+  return (0, _react2.jsx)(_index.Box, {
     sx: sx.container
-  }, (0, _react2.jsx)(_TextField["default"], {
+  }, (0, _react2.jsx)(_index.TextField, {
     label: "Name",
     controlProps: {
       tabIndex: '-1'
     }
-  }), (0, _react2.jsx)(_Box["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     sx: sx.overlay,
     tabIndex: "0"
-  }, (0, _react2.jsx)(_Icon["default"], {
+  }, (0, _react2.jsx)(_index.Icon, {
     icon: _VisibilityOffOutlineIcon["default"],
     size: 22
   })));

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

@@ -7,8 +7,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _Box = _interopRequireDefault(require("../components/Box"));
-var _Text = _interopRequireDefault(require("../components/Text"));
+var _index = require("../index");
 var _colors = require("../styles/colors");
 var _react2 = require("@emotion/react");
 var _default = {
@@ -25,13 +24,13 @@ var sx = {
   }
 };
 var Default = function Default() {
-  return (0, _react2.jsx)(_Box["default"], {
+  return (0, _react2.jsx)(_index.Box, {
     width: "110px",
     height: "110px",
     sx: sx.statsCircle
-  }, (0, _react2.jsx)(_Text["default"], {
+  }, (0, _react2.jsx)(_index.Text, {
     fontSize: 30
-  }, "63"), (0, _react2.jsx)(_Text["default"], {
+  }, "63"), (0, _react2.jsx)(_index.Text, {
     color: "text.secondary"
   }, "Members"));
 };

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

@@ -10,7 +10,7 @@ var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
-var _useModalState = _interopRequireDefault(require("../hooks/useModalState"));
+var _hooks = require("../hooks");
 var _index = require("../index");
 var _react2 = require("@emotion/react");
 var _default = {
@@ -643,7 +643,7 @@ var buttons = [{
   icon: hotelSVG
 }];
 var Default = function Default() {
-  var state = (0, _useModalState["default"])();
+  var state = (0, _hooks.useModalState)();
   return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Modal, {
     isOpen: true,
     onClose: state.close,

package/lib/cjs/styles/colors.js

@@ -21,7 +21,9 @@ exports.active = active;
 var critical = {
   bright: '#a31300',
   dark: '#a31300',
-  light: '#ffebe7'
+  light: '#ffebe7',
+  primaryDark: _chromaJs["default"].mix('#a31300', '#000000', 0.2).hex(),
+  secondaryDark: _chromaJs["default"].mix('#a31300', '#000000', 0.4).hex()
 };
 exports.critical = critical;
 var success = {

package/lib/cjs/styles/themes/astro-nano/astro-nano.js

@@ -62,6 +62,23 @@ var modifyTheme = {
     }, baseButton),
     primary: _objectSpread({}, baseButton)
   },
+  cards: {
+    container: {
+      borderRadius: borderRadius,
+      flexGrow: [1, 0],
+      maxWidth: _theme["default"].breakpoints[0],
+      bg: 'white',
+      alignItems: 'stretch',
+      py: [0, 'xl'],
+      my: 'auto',
+      boxShadow: ['none', _theme["default"].cards.container.boxShadow],
+      width: ['100%', '450px'],
+      minHeight: 'fit-content'
+    },
+    cardBody: {
+      flexGrow: [1, 0]
+    }
+  },
   colors: {
     activeDark: (0, _chromaJs["default"])(_theme["default"].colors.active).darken(0.5).hex(),
     activeDarker: (0, _chromaJs["default"])(_theme["default"].colors.active).darken(1).hex()
@@ -110,20 +127,6 @@ var modifyTheme = {
     }
   },
   variants: {
-    card: {
-      container: {
-        borderRadius: borderRadius,
-        flexGrow: [1, 0],
-        maxWidth: _theme["default"].breakpoints[0],
-        bg: 'white',
-        alignItems: 'stretch',
-        py: [0, 'xl'],
-        my: 'auto',
-        boxShadow: ['none', _theme["default"].variants.card.container.boxShadow],
-        width: ['100%', '450px'],
-        minHeight: 'fit-content'
-      }
-    },
     wrapper: {
       alignItems: 'center',
       justifyContent: 'space-between',
@@ -136,9 +139,6 @@ var modifyTheme = {
       bottom: 0,
       left: 0,
       right: 0
-    },
-    cardBody: {
-      flexGrow: [1, 0]
     }
   }
 };

package/lib/cjs/utils/devUtils/props/hoverProps.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.onHoverPropTypes = exports.onHoverArgTypes = exports.baseDocSettings = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+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) { (0, _defineProperty2["default"])(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 descriptions = {
+  onHoverStart: 'Handler that is called when a hover interaction starts.',
+  onHoverEnd: 'Handler that is called when a hover interaction ends.',
+  onHoverChange: 'Handler that is called when the hover state changes.'
+};
+var baseDocSettings = {
+  type: {
+    summary: 'func'
+  },
+  control: {
+    type: null
+  },
+  table: {
+    category: 'Hover Handlers'
+  }
+};
+exports.baseDocSettings = baseDocSettings;
+var onHoverArgTypes = {
+  'onHoverStart': _objectSpread({
+    description: descriptions.onHoverStart
+  }, baseDocSettings),
+  'onHoverEnd': _objectSpread({
+    description: descriptions.onHoverEnd
+  }, baseDocSettings),
+  'onHoverChange': _objectSpread({
+    description: descriptions.onHoverChange
+  }, baseDocSettings)
+};
+exports.onHoverArgTypes = onHoverArgTypes;
+var onHoverPropTypes = {
+  onHoverStart: _propTypes["default"].func,
+  onHoverEnd: _propTypes["default"].func,
+  onHoverChange: _propTypes["default"].func
+};
+exports.onHoverPropTypes = onHoverPropTypes;

package/lib/components/AccordionGridGroup/AccordionGridGroup.stories.js

@@ -1,12 +1,22 @@
+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 _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+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 _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useState } from 'react';
 import { Item } from 'react-stately';
 import CreateIcon from 'mdi-react/CreateIcon';
 import MoreVertIcon from 'mdi-react/MoreVertIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Box, Icon, IconButton, Link, Separator, Text, TextField } from '../../index';
-import AccordionGridGroup from './AccordionGridGroup';
+import { AccordionGridGroup, Badge, Box, Icon, IconButton, Link, Separator, Text, TextField } from '../../index';
 import AccordionGridReadme from './AccordionGridGroup.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var data = [{
@@ -83,6 +93,16 @@ export default {
     }
   }
 };
+var badgeSx = {
+  height: '22px',
+  border: '1px solid',
+  mr: '10px',
+  alignSelf: 'center',
+  '> span': {
+    // Account for A11y error. Text height was rendering bigger than badge.
+    lineHeight: 'initial'
+  }
+};
 var Header = function Header(props) {
   var item = props.item;
   return ___EmotionJSX(Box, {
@@ -113,15 +133,28 @@ var Header = function Header(props) {
       flexGrow: 1,
       width: '50%'
     }
-  }, ___EmotionJSX(Text, {
-    sx: {
-      fontWeight: 0,
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden'
-    },
-    alignSelf: "center"
-  }, item.organizations.length, ' ', "Organizations"), ___EmotionJSX(Box, {
+  }, ___EmotionJSX(Badge, {
+    label: "".concat(item.organizations.length, " Organizations"),
+    textColor: "text.primary",
+    bg: "white",
+    sx: _objectSpread(_objectSpread({}, badgeSx), {}, {
+      borderColor: 'decorative.2'
+    })
+  }), ___EmotionJSX(Badge, {
+    label: "2 Environment",
+    textColor: "text.primary",
+    bg: "white",
+    sx: _objectSpread(_objectSpread({}, badgeSx), {}, {
+      borderColor: 'decorative.0'
+    })
+  }), ___EmotionJSX(Badge, {
+    label: "2 Population",
+    textColor: "text.primary",
+    bg: "white",
+    sx: _objectSpread(_objectSpread({}, badgeSx), {}, {
+      borderColor: 'decorative.1'
+    })
+  }), ___EmotionJSX(Box, {
     isRow: true,
     alignSelf: "center",
     sx: {

package/lib/components/AccordionGroup/AccordionGroup.stories.js

@@ -2,16 +2,17 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
 import { Item } from 'react-stately';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import Button from '../Button';
-import Text from '../Text';
-import TextField from '../TextField';
+import { AccordionGroup, Button, Text, TextField } from '../../index';
 import AccordionReadme from './AccordionGroup.mdx';
-import AccordionGroup from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var itemArray = [{
   key: 't1',
   label: 'First Accordion',
-  children: ___EmotionJSX(Button, null, "Hi")
+  children: ___EmotionJSX(Button, {
+    sx: {
+      width: 'fit-content'
+    }
+  }, "Secondary Button")
 }, {
   key: 't2',
   label: 'Second Accordion',

package/lib/components/ArrayField/ArrayField.stories.js

@@ -16,7 +16,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import { OverlayProvider } from 'react-aria';
 import { v4 as uuid } from 'uuid';
-import { ArrayField, ArrayFieldDeleteButton, Item, SelectField, TextField } from '../..';
+import { ArrayField, ArrayFieldDeleteButton, Item, SelectField, TextField } from '../../index';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {

package/lib/components/Avatar/Avatar.stories.js

@@ -2,9 +2,9 @@ import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { Avatar } from '../../index';
 import { pingImg } from '../../utils/devUtils/constants/images';
 import AvatarReadme from './Avatar.mdx';
-import Avatar from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Avatar',

package/lib/components/Badge/Badge.js

@@ -48,7 +48,7 @@ var Badge = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   // The following is to correct a visual regression released in 1.39.0 https://jira.pingidentity.com/browse/UIP-5907.
   // TODO : Remove in Astro V2 with theme remapping roll out.
-  var oldVariantPaths = ['boxes.countChip', 'boxes.countNeutral', 'boxes.itemChipWithSlot', 'collapsiblePanel.collapsiblePanelBadge', 'boxes.environmentChip', 'boxes.readOnlyChip', 'boxes.selectedItemChip'];
+  var oldVariantPaths = ['boxes.countBadge', 'boxes.countNeutral', 'boxes.itemBadgeWithSlot', 'collapsiblePanel.collapsiblePanelBadge', 'boxes.environmentBadge', 'boxes.readOnlyBadge', 'boxes.selectedItemBadge'];
   var fixedVariant = _includesInstanceProperty(oldVariantPaths).call(oldVariantPaths, props.variant) ? "variants.".concat(props.variant) : props.variant;
   return ___EmotionJSX(BadgeContext.Provider, {
     value: {
@@ -76,7 +76,7 @@ Badge.propTypes = {
   bg: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   /** Provides a way to insert markup in specified places. */
   slots: PropTypes.shape({
-    /** The given node will be inserted into left side of the chip. */
+    /** The given node will be inserted into left side of the badge. */
     leftIcon: PropTypes.node
   }),
   /** The label of the badge. */

package/lib/components/Badge/Badge.stories.js

@@ -7,15 +7,12 @@ import Clear from 'mdi-react/CloseIcon';
 import ContentCopy from 'mdi-react/ContentCopyIcon';
 import Earth from 'mdi-react/EarthIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { Badge, Box, Icon, IconButton } from '../../index';
 import { flatColorList } from '../../styles/colors.js';
-import Box from '../Box';
-import Icon from '../Icon';
-import IconButton from '../IconButton';
 import BadgeReadme from './Badge.mdx';
-import Badge from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Badge',
+  title: 'Components/Badge',
   component: Badge,
   argTypes: {
     bg: {
@@ -153,7 +150,7 @@ export var BadgeWithIcon = function BadgeWithIcon() {
 };
 export var BadgeWithLeftSlotAndIcon = function BadgeWithLeftSlotAndIcon() {
   return ___EmotionJSX(Badge, {
-    label: "Chip with Icon Button and Left Slot",
+    label: "Badge with Icon Button and Left Slot",
     bg: "white",
     variant: "itemBadgeWithSlot",
     slots: {
@@ -164,7 +161,7 @@ export var BadgeWithLeftSlotAndIcon = function BadgeWithLeftSlotAndIcon() {
     }
   }, ___EmotionJSX(IconButton, {
     "aria-label": "delete",
-    variant: "buttons.chipWithSlotDeleteButton"
+    variant: "badgeDeleteButton"
   }, ___EmotionJSX(Icon, {
     icon: Clear,
     size: 14

package/lib/components/Badge/Badge.styles.js

@@ -9,7 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 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; }
-import { defaultFocus, focusWithCroppedOutline } from '../Button/Buttons.styles';
+import { focusWithCroppedOutline } from '../Button/Buttons.styles';
 export var baseBadge = {
   cursor: 'default',
   p: '3px 5px 4px 5px',
@@ -82,25 +82,17 @@ export var deleteButton = {
   height: 14,
   p: 0,
   width: 14,
-  mx: '3px !important'
+  mx: '3px !important',
+  '&.is-focused': _objectSpread(_objectSpread({}, focusWithCroppedOutline), {}, {
+    bg: 'accent.40'
+  })
 };
 export var badgeDeleteButton = _objectSpread(_objectSpread({}, deleteButton), {}, {
-  '&.is-focused': _objectSpread({
-    bg: 'accent.40'
-  }, focusWithCroppedOutline),
-  '&.is-hovered': {
-    bg: 'accent.40'
-  },
-  '&.is-pressed': {
-    bg: 'accent.20',
-    borderColor: 'accent.20'
-  }
-});
-export var badgeWithSlotDeleteButton = _objectSpread(_objectSpread({}, deleteButton), {}, {
+  outline: 'none',
   path: {
     fill: 'neutral.40'
   },
-  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-focused': _objectSpread({}, focusWithCroppedOutline),
   '&.is-hovered': {
     backgroundColor: '#e5e9f8 !important',
     path: {
@@ -145,6 +137,5 @@ export default {
   deleteButton: deleteButton,
   countBadge: countBadge,
   countNeutral: countNeutral,
-  badgeWithSlotDeleteButton: badgeWithSlotDeleteButton,
   badgeDeleteButton: badgeDeleteButton
 };

package/lib/components/Badge/Badge.test.js

@@ -19,8 +19,8 @@ var getComponent = function getComponent() {
 axeTest(getComponent);
 test('renders Badge component', function () {
   getComponent();
-  var chip = screen.getByTestId(testId);
-  expect(chip).toBeInTheDocument();
+  var badge = screen.getByTestId(testId);
+  expect(badge).toBeInTheDocument();
 });
 test('renders children within Badge component', function () {
   var children = ___EmotionJSX(Button, null);
@@ -47,7 +47,7 @@ test('renders Badge component with custom alignment', function () {
   expect(screen.getByTestId(testId)).toHaveStyleRule('position', 'absolute');
   expect(screen.getByTestId(testId)).toHaveStyleRule('right', '15px');
 });
-test('renders Chip component with left slot', function () {
+test('renders Badge component with left slot', function () {
   var slots = {
     leftIcon: ___EmotionJSX(Icon, {
       icon: Earth,

package/lib/components/Breadcrumbs/Breadcrumbs.stories.js

@@ -4,7 +4,7 @@ import { Item } from 'react-stately';
 import { action } from '@storybook/addon-actions';
 import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import Breadcrumbs from './Breadcrumbs';
+import { Breadcrumbs } from '../../index';
 import BreadcrumbsReadme from './Breadcrumbs.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {

package/lib/components/Button/Button.stories.js

@@ -18,7 +18,7 @@ delete variants.ICON_BUTTON;
 delete variants.INVERTED;
 
 // add designer approved variants for devs to use here
-var variantOptions = ['critical', 'default', 'inline', 'inlinePrimary', 'link', 'primary', 'success'];
+var variantOptions = ['critical', 'default', 'inline', 'inlinePrimary', 'link', 'primary'];
 export default {
   title: 'Components/Button',
   component: Button,
@@ -122,4 +122,14 @@ export var FilterButton = function FilterButton() {
   }, ___EmotionJSX(Icon, {
     icon: FilterIcon
   })));
+};
+export var Critical = function Critical() {
+  return ___EmotionJSX(Button, {
+    variant: "critical"
+  }, "Button Text");
+};
+export var Primary = function Primary() {
+  return ___EmotionJSX(Button, {
+    variant: "primary"
+  }, "Button Text");
 };