@pingux/astro 2.0.0-alpha.6 → 2.0.0-beta.0

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

@@ -14,7 +14,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.LogoTabs = void 0;
+exports["default"] = exports.Default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
@@ -137,7 +137,7 @@ var sx = {
     }
   })
 };
-var LogoTabs = function LogoTabs() {
+var Default = function Default() {
   var _useState = (0, _react.useState)('tab1'),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     currentTab = _useState2[0],
@@ -208,4 +208,4 @@ var LogoTabs = function LogoTabs() {
     sx: sx.tabStyling
   }, (0, _react2.jsx)(_index.Text, null, "This is content for the target tab"))));
 };
-exports.LogoTabs = LogoTabs;
+exports.Default = Default;

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

@@ -7,7 +7,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _CheckboxField = _interopRequireDefault(require("../components/CheckboxField"));
+var _index = require("../index");
 var _react2 = require("@emotion/react");
 var _default = {
   title: 'Recipes/Neutral Checkbox Field'
@@ -19,7 +19,7 @@ var sx = {
   }
 };
 var Default = function Default() {
-  return (0, _react2.jsx)(_CheckboxField["default"], {
+  return (0, _react2.jsx)(_index.CheckboxField, {
     controlProps: {
       sx: sx.checkboxColor
     },

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/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/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,12 +7,9 @@ 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: 'Components/Badge',
@@ -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: {

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

@@ -82,7 +82,10 @@ 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), {}, {
   outline: 'none',

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/Buttons.styles.js

@@ -87,7 +87,15 @@ var critical = _objectSpread(_objectSpread({}, base), {}, {
   border: '1px solid',
   borderColor: 'critical.bright',
   color: 'white',
-  '&.is-focused': _objectSpread({}, defaultFocus)
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-hovered': {
+    bg: 'critical.primaryDark',
+    borderColor: 'critical.primaryDark'
+  },
+  '&.is-pressed': {
+    bg: 'critical.secondaryDark',
+    borderColor: 'critical.secondaryDark'
+  }
 });
 var inline = _objectSpread(_objectSpread({}, base), {}, {
   display: 'inline-flex',

package/lib/components/Callout/Callout.stories.js

@@ -1,7 +1,7 @@
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Callout, Link, Text } from '../..';
+import { Callout, Link, Text } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
 import CalloutReadme from './Callout.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";

package/lib/components/Card/Card.js

@@ -50,7 +50,7 @@ var Card = /*#__PURE__*/forwardRef(function (props, ref) {
   var ariaLabel = props['aria-label'];
   return ___EmotionJSX(Box, _extends({
     "aria-label": ariaLabel,
-    variant: "boxes.card",
+    variant: "cards.container",
     className: classNames,
     ref: ref,
     isFocused: isFocusVisible

package/lib/components/CheckboxField/CheckboxField.stories.js

@@ -14,13 +14,10 @@ import _everyInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instan
 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 React, { useEffect, useState } from 'react';
+import { Box, CheckboxField, Link, Text } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
-import Box from '../Box';
-import Link from '../Link';
-import Text from '../Text';
-import CheckboxField from './CheckboxField';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/CheckboxField',

package/lib/components/CodeView/CodeView.stories.js

@@ -3,7 +3,7 @@ import React from 'react';
 import Prism from 'prismjs';
 import 'prismjs/components/prism-powershell';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import CodeView from './CodeView';
+import { CodeView } from '../../index';
 import CodeViewReadme from './CodeView.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var code = "{\n  \"_links\": {\n    \"self\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad\"\n    },\n    \"password\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.set\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.reset\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.check\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.recover\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"account.sendVerificationCode\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad\"\n    },\n    \"linkedAccounts\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/linkedAccounts\"\n    }\n  },\n  \"id\": \"5a5d4c0c-8383-4796-9cdc-16b5a22f45ad\",\n  \"environment\": {\n    \"id\": \"94e3268d-847d-47aa-a45e-1ef8dd8f4df0\"\n  },\n  \"account\": {\n    \"canAuthenticate\": true,\n    \"status\": \"OK\"\n  },\n  \"createdAt\": \"2021-09-03T15:01:43.555Z\",\n  \"email\": \"allegraweldon@pingidentity.com\",\n  \"enabled\": true,\n  \"identityProvider\": {\n    \"type\": \"PING_ONE\"\n  },\n  \"lifecycle\": {\n    \"status\": \"ACCOUNT_OK\"\n  },\n  \"mfaEnabled\": false,\n  \"population\": {\n    \"id\": \"c1adbc29-f188-4ea6-a015-49bddd74bc84\"\n  },\n  \"updatedAt\": \"2021-09-03T15:01:43.555Z\",\n  \"username\": \"allegraweldon@pingidentity.com\",\n  \"verifyStatus\": \"NOT_INITIATED\"\n}";
@@ -65,7 +65,7 @@ export var WithCustomSize = function WithCustomSize() {
       height: 300
     },
     hasNoCopyButton: true
-  }, "\nexport const BadgeWithIcon = () => (\n  <>\n    <Badge label=\"Badge with Icon Button\" bg=\"navy\">\n      <IconButton aria-label=\"Clear Badge with Icon Button\" variant=\"inverted\">\n        <Icon icon={Clear} ml=\"xs\" size=\"14px\" />\n      </IconButton>\n    </Badge>\n\n    <div style={{ padding: '5px' }} />\n\n    <Badge label=\"Badge with Icon Button\">\n      <IconButton aria-label=\"Clear Badge with Icon Button\" variant=\"inverted\">\n        <Icon icon={Earth} ml=\"xs\" size=\"14px\" />\n      </IconButton>\n    </Badge>\n\n    <div style={{ padding: '5px' }} />\n\n    <Badge label=\"Badge with Icon\" bg=\"green\">\n      <Icon icon={ContentCopy} ml=\"xs\" size=\"14px\" color=\"white\" />\n    </Badge>\n  </>\n);\n    ");
+  }, "\nconst BadgeWithIcon = () => (\n  <>\n    <Badge label=\"Badge with Icon Button\" bg=\"navy\">\n      <IconButton aria-label=\"Clear Badge with Icon Button\" variant=\"inverted\">\n        <Icon icon={Clear} ml=\"xs\" size=\"14px\" />\n      </IconButton>\n    </Badge>\n\n    <div style={{ padding: '5px' }} />\n\n    <Badge label=\"Badge with Icon Button\">\n      <IconButton aria-label=\"Clear Badge with Icon Button\" variant=\"inverted\">\n        <Icon icon={Earth} ml=\"xs\" size=\"14px\" />\n      </IconButton>\n    </Badge>\n\n    <div style={{ padding: '5px' }} />\n\n    <Badge label=\"Badge with Icon\" bg=\"green\">\n      <Icon icon={ContentCopy} ml=\"xs\" size=\"14px\" color=\"white\" />\n    </Badge>\n  </>\n);\n    ");
 };
 export var WithAdditionalLanguage = function WithAdditionalLanguage() {
   var _context;