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

package/CHANGELOG.md

@@ -3,8 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-<<<<<<< HEAD
-=======
+## [1.42.2](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.42.1...@pingux/astro@1.42.2) (2023-02-22)
+
+
+### Bug Fixes
+
+* [UIP-5862]: ListView: incorrect hover state ([c8104a3](https://gitlab.corp.pingidentity.com/ux/pingux/commit/c8104a34a3bdf4b8d4b92eaeb24af2876cd07d0a))
+* [UIP-6017] Astro CopyView, CopyText, and Icon design updates ([69fa4af](https://gitlab.corp.pingidentity.com/ux/pingux/commit/69fa4afd09029721548fbb6d58435df2678626af))
+* [UIP-6118] Astro ColorField fix closure ([d8864ed](https://gitlab.corp.pingidentity.com/ux/pingux/commit/d8864ed90d0494ec0f98bec854ea3218bf71c0e1))
+
+
+
+
+
 ## [1.42.1](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.42.0...@pingux/astro@1.42.1) (2023-02-16)
 
 
@@ -16,7 +27,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
->>>>>>> 144c0d159c6dc7525c2b8d6b1ecb29edecf25f6a
 # [1.42.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.41.0...@pingux/astro@1.42.0) (2023-02-13)
 
 

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

@@ -1,27 +1,35 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+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 _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Default = exports.Controlled = exports.AccordionWithInputs = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactStately = require("react-stately");
 var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
 var _MoreVertIcon = _interopRequireDefault(require("mdi-react/MoreVertIcon"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
-var _AccordionGridGroup = _interopRequireDefault(require("./AccordionGridGroup"));
-var _AccordionGridGroup2 = _interopRequireDefault(require("./AccordionGridGroup.mdx"));
+var _AccordionGridGroup = _interopRequireDefault(require("./AccordionGridGroup.mdx"));
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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) { (0, _defineProperty2["default"])(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; }
 var data = [{
   name: 'Client Application Developer',
   key: 'Client',
@@ -55,14 +63,14 @@ var data = [{
 }];
 var _default = {
   title: 'Components/AccordionGridGroup',
-  component: _AccordionGridGroup["default"],
+  component: _index.AccordionGridGroup,
   parameters: {
     actions: {
       argTypesRegex: '^on.*'
     },
     docs: {
       page: function page() {
-        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_AccordionGridGroup2["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_AccordionGridGroup["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       },
       source: {
         type: 'code'
@@ -70,7 +78,7 @@ var _default = {
     },
     tabs: [{
       label: 'Design',
-      mdx: _AccordionGridGroup2["default"]
+      mdx: _AccordionGridGroup["default"]
     }, {
       label: 'Implementation'
     }]
@@ -97,6 +105,16 @@ var _default = {
   }
 };
 exports["default"] = _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 (0, _react2.jsx)(_index.Box, {
@@ -127,15 +145,28 @@ var Header = function Header(props) {
       flexGrow: 1,
       width: '50%'
     }
-  }, (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontWeight: 0,
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden'
-    },
-    alignSelf: "center"
-  }, item.organizations.length, ' ', "Organizations"), (0, _react2.jsx)(_index.Box, {
+  }, (0, _react2.jsx)(_index.Badge, {
+    label: "".concat(item.organizations.length, " Organizations"),
+    textColor: "text.primary",
+    bg: "white",
+    sx: _objectSpread(_objectSpread({}, badgeSx), {}, {
+      borderColor: 'decorative.2'
+    })
+  }), (0, _react2.jsx)(_index.Badge, {
+    label: "2 Environment",
+    textColor: "text.primary",
+    bg: "white",
+    sx: _objectSpread(_objectSpread({}, badgeSx), {}, {
+      borderColor: 'decorative.0'
+    })
+  }), (0, _react2.jsx)(_index.Badge, {
+    label: "2 Population",
+    textColor: "text.primary",
+    bg: "white",
+    sx: _objectSpread(_objectSpread({}, badgeSx), {}, {
+      borderColor: 'decorative.1'
+    })
+  }), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignSelf: "center",
     sx: {
@@ -227,7 +258,7 @@ var Default = function Default() {
       sx: {
         mb: 0
       }
-    }), (0, _react2.jsx)(_AccordionGridGroup["default"], {
+    }), (0, _react2.jsx)(_index.AccordionGridGroup, {
       items: data,
       defaultSelectedKeys: ['Environment']
     }, function (item) {
@@ -264,7 +295,7 @@ var Controlled = function Controlled() {
       sx: {
         mb: 0
       }
-    }), (0, _react2.jsx)(_AccordionGridGroup["default"], {
+    }), (0, _react2.jsx)(_index.AccordionGridGroup, {
       items: data,
       selectedKeys: selectedKeys,
       onSelectionChange: setSelectedKeys
@@ -287,7 +318,7 @@ var Controlled = function Controlled() {
 };
 exports.Controlled = Controlled;
 var AccordionWithInputs = function AccordionWithInputs() {
-  return (0, _react2.jsx)(_AccordionGridGroup["default"], {
+  return (0, _react2.jsx)(_index.AccordionGridGroup, {
     items: data,
     defaultSelectedKeys: ['Organization'],
     navigationMode: "native"

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

@@ -13,18 +13,19 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/hel
 var _react = _interopRequireWildcard(require("react"));
 var _reactStately = require("react-stately");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
-var _Button = _interopRequireDefault(require("../Button"));
-var _Text = _interopRequireDefault(require("../Text"));
-var _TextField = _interopRequireDefault(require("../TextField"));
+var _index = require("../../index");
 var _AccordionGroup = _interopRequireDefault(require("./AccordionGroup.mdx"));
-var _ = _interopRequireDefault(require("."));
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var itemArray = [{
   key: 't1',
   label: 'First Accordion',
-  children: (0, _react2.jsx)(_Button["default"], null, "Hi")
+  children: (0, _react2.jsx)(_index.Button, {
+    sx: {
+      width: 'fit-content'
+    }
+  }, "Secondary Button")
 }, {
   key: 't2',
   label: 'Second Accordion',
@@ -32,12 +33,12 @@ var itemArray = [{
 }, {
   key: 't3',
   label: 'Third Accordion',
-  children: (0, _react2.jsx)(_TextField["default"], null)
+  children: (0, _react2.jsx)(_index.TextField, null)
 }];
 var itemArrayDisabled = [{
   key: 't1',
   label: 'Disabled Accordion',
-  children: (0, _react2.jsx)(_Text["default"], null, "Hi")
+  children: (0, _react2.jsx)(_index.Text, null, "Hi")
 }, {
   key: 't2',
   label: 'Accordion',
@@ -49,7 +50,7 @@ var itemArrayDisabled = [{
 }];
 var _default = {
   title: 'Components/AccordionGroup',
-  component: _["default"],
+  component: _index.AccordionGroup,
   parameters: {
     actions: {
       argTypesRegex: '^on.*'
@@ -87,12 +88,12 @@ var _default = {
 };
 exports["default"] = _default;
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_["default"], args, (0, _react2.jsx)(_reactStately.Item, {
+  return (0, _react2.jsx)(_index.AccordionGroup, args, (0, _react2.jsx)(_reactStately.Item, {
     key: "accordionKey",
     textValue: "accordionKey",
     label: "Accordion Label",
     "data-id": "accordionItem"
-  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")));
+  }, (0, _react2.jsx)(_index.Text, null, "Render me!")));
 };
 exports.Default = Default;
 var Multiple = function Multiple() {
@@ -104,7 +105,7 @@ var Multiple = function Multiple() {
      *   { key: 't3', label: 'Third Accordion', children: 'Child Renders Here' },
      * ];
      */
-    (0, _react2.jsx)(_["default"], {
+    (0, _react2.jsx)(_index.AccordionGroup, {
       items: itemArray
     }, function (item) {
       return (0, _react2.jsx)(_reactStately.Item, {
@@ -133,7 +134,7 @@ var ControlledExpanded = function ControlledExpanded() {
      * when using controlledExpanded prop is expected
      * and related to a known issue within React Stately.
      */
-    (0, _react2.jsx)(_["default"], {
+    (0, _react2.jsx)(_index.AccordionGroup, {
       onExpandedChange: setExpandedKeys,
       expandedKeys: expandedKeys,
       items: itemArray
@@ -156,7 +157,7 @@ var UncontrolledExpanded = function UncontrolledExpanded() {
      *   { key: 't3', label: 'Third Accordion', children: 'Child Renders Here' },
      * ];
      */
-    (0, _react2.jsx)(_["default"], {
+    (0, _react2.jsx)(_index.AccordionGroup, {
       defaultExpandedKeys: ['t1'],
       items: itemArray
     }, function (item) {
@@ -178,7 +179,7 @@ var DisabledItems = function DisabledItems() {
         { key: 't3', label: 'Disabled Accordion', children: 'Child Renders Here' },
       ];
      */
-    (0, _react2.jsx)(_["default"], {
+    (0, _react2.jsx)(_index.AccordionGroup, {
       disabledKeys: ['t1', 't3'],
       items: itemArrayDisabled
     }, function (item) {
@@ -200,7 +201,7 @@ var CustomPresentation = function CustomPresentation() {
         { key: 't3', label: 'Disabled Accordion', children: 'Child Renders Here' },
       ];
      */
-    (0, _react2.jsx)(_["default"], {
+    (0, _react2.jsx)(_index.AccordionGroup, {
       items: itemArrayDisabled
     }, function (item) {
       return (0, _react2.jsx)(_reactStately.Item, {

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

@@ -22,14 +22,14 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _react = _interopRequireDefault(require("react"));
 var _reactAria = require("react-aria");
 var _uuid = require("uuid");
-var _ = require("../..");
+var _index = require("../../index");
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 var _react2 = require("@emotion/react");
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(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) { (0, _defineProperty2["default"])(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; }
 var _default = {
   title: 'Form/ArrayField',
-  component: _.ArrayField,
+  component: _index.ArrayField,
   parameters: {
     actions: {
       argTypesRegex: '^on.*'
@@ -81,7 +81,7 @@ var defaultData = [{
 }];
 var Uncontrolled = function Uncontrolled(_ref) {
   var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
-  return (0, _react2.jsx)(_.ArrayField, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_index.ArrayField, (0, _extends2["default"])({
     defaultValue: defaultData,
     labelProps: {
       hintText: 'Example Hint',
@@ -93,7 +93,7 @@ var Uncontrolled = function Uncontrolled(_ref) {
       }
     },
     renderField: function renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
-      return (0, _react2.jsx)(_.TextField, (0, _extends2["default"])({
+      return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({
         "aria-label": "Text field",
         value: fieldValue,
         onChange: function onChange(e) {
@@ -101,7 +101,7 @@ var Uncontrolled = function Uncontrolled(_ref) {
         },
         mr: "xs",
         slots: {
-          inContainer: (0, _react2.jsx)(_.ArrayFieldDeleteButton, {
+          inContainer: (0, _react2.jsx)(_index.ArrayFieldDeleteButton, {
             isDisabled: isDisabled,
             onDelete: function onDelete() {
               return onFieldDelete(id);
@@ -121,25 +121,25 @@ var Controlled = function Controlled() {
     id: (0, _uuid.v4)(),
     fieldValue: 'red',
     onComponentRender: function onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
-      return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_.SelectField, (0, _extends2["default"])({
+      return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({
         defaultSelectedKey: fieldValue,
         onSelectionChange: function onSelectionChange(e) {
           return onFieldValueChange(e, id);
         },
         width: "100%",
         slots: {
-          inContainer: (0, _react2.jsx)(_.ArrayFieldDeleteButton, {
+          inContainer: (0, _react2.jsx)(_index.ArrayFieldDeleteButton, {
             isDisabled: isDisabled,
             onDelete: function onDelete() {
               return onFieldDelete(id);
             }
           })
         }
-      }, otherFieldProps), (0, _react2.jsx)(_.Item, {
+      }, otherFieldProps), (0, _react2.jsx)(_index.Item, {
         key: "red"
-      }, "Red"), (0, _react2.jsx)(_.Item, {
+      }, "Red"), (0, _react2.jsx)(_index.Item, {
         key: "blue"
-      }, "Blue"), (0, _react2.jsx)(_.Item, {
+      }, "Blue"), (0, _react2.jsx)(_index.Item, {
         key: "yellow"
       }, "Yellow")));
     }
@@ -147,25 +147,25 @@ var Controlled = function Controlled() {
     id: (0, _uuid.v4)(),
     fieldValue: 'black',
     onComponentRender: function onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
-      return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_.SelectField, (0, _extends2["default"])({
+      return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({
         defaultSelectedKey: fieldValue,
         onSelectionChange: function onSelectionChange(key) {
           return onFieldValueChange(key, id);
         },
         width: "100%",
         slots: {
-          inContainer: (0, _react2.jsx)(_.ArrayFieldDeleteButton, {
+          inContainer: (0, _react2.jsx)(_index.ArrayFieldDeleteButton, {
             isDisabled: isDisabled,
             onDelete: function onDelete() {
               return onFieldDelete(id);
             }
           })
         }
-      }, otherFieldProps), (0, _react2.jsx)(_.Item, {
+      }, otherFieldProps), (0, _react2.jsx)(_index.Item, {
         key: "orange"
-      }, "Orange"), (0, _react2.jsx)(_.Item, {
+      }, "Orange"), (0, _react2.jsx)(_index.Item, {
         key: "purple"
-      }, "Purple"), (0, _react2.jsx)(_.Item, {
+      }, "Purple"), (0, _react2.jsx)(_index.Item, {
         key: "black"
       }, "Black")));
     }
@@ -174,25 +174,25 @@ var Controlled = function Controlled() {
     id: (0, _uuid.v4)(),
     fieldValue: 'blue',
     onComponentRender: function onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
-      return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_.SelectField, (0, _extends2["default"])({
+      return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({
         defaultSelectedKey: fieldValue,
         onSelectionChange: function onSelectionChange(e) {
           return onFieldValueChange(e, id);
         },
         width: "100%",
         slots: {
-          inContainer: (0, _react2.jsx)(_.ArrayFieldDeleteButton, {
+          inContainer: (0, _react2.jsx)(_index.ArrayFieldDeleteButton, {
             isDisabled: isDisabled,
             onDelete: function onDelete() {
               return onFieldDelete(id);
             }
           })
         }
-      }, otherFieldProps), (0, _react2.jsx)(_.Item, {
+      }, otherFieldProps), (0, _react2.jsx)(_index.Item, {
         key: "blue"
-      }, "Blue"), (0, _react2.jsx)(_.Item, {
+      }, "Blue"), (0, _react2.jsx)(_index.Item, {
         key: "teal"
-      }, "Teal"), (0, _react2.jsx)(_.Item, {
+      }, "Teal"), (0, _react2.jsx)(_index.Item, {
         key: "turquoise"
       }, "Turquoise")));
     }
@@ -218,7 +218,7 @@ var Controlled = function Controlled() {
       });
     });
   };
-  return (0, _react2.jsx)(_.ArrayField, {
+  return (0, _react2.jsx)(_index.ArrayField, {
     value: fieldValues,
     helperText: "Here is some helpful text...",
     onAdd: handleOnAdd,
@@ -232,10 +232,10 @@ var Controlled = function Controlled() {
 exports.Controlled = Controlled;
 var WithLimitedItemsNumber = function WithLimitedItemsNumber(_ref3) {
   var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref3), _ref3));
-  return (0, _react2.jsx)(_.ArrayField, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_index.ArrayField, (0, _extends2["default"])({
     defaultValue: defaultData,
     renderField: function renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
-      return (0, _react2.jsx)(_.TextField, (0, _extends2["default"])({
+      return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({
         "aria-label": "Text field",
         value: fieldValue,
         onChange: function onChange(e) {
@@ -243,7 +243,7 @@ var WithLimitedItemsNumber = function WithLimitedItemsNumber(_ref3) {
         },
         mr: "xs",
         slots: {
-          inContainer: (0, _react2.jsx)(_.ArrayFieldDeleteButton, {
+          inContainer: (0, _react2.jsx)(_index.ArrayFieldDeleteButton, {
             isDisabled: isDisabled,
             onDelete: function onDelete() {
               return onFieldDelete(id);

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

@@ -10,13 +10,13 @@ var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _index = require("../../index");
 var _images = require("../../utils/devUtils/constants/images");
 var _Avatar = _interopRequireDefault(require("./Avatar.mdx"));
-var _ = _interopRequireDefault(require("."));
 var _react2 = require("@emotion/react");
 var _default = {
   title: 'Components/Avatar',
-  component: _["default"],
+  component: _index.Avatar,
   parameters: {
     docs: {
       page: function page() {
@@ -39,6 +39,6 @@ var _default = {
 exports["default"] = _default;
 var Default = function Default(_ref) {
   var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
-  return (0, _react2.jsx)(_["default"], args);
+  return (0, _react2.jsx)(_index.Avatar, args);
 };
 exports.Default = Default;

package/lib/cjs/components/Badge/Badge.js

@@ -59,7 +59,7 @@ var Badge = /*#__PURE__*/_react["default"].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 = (0, _includes["default"])(oldVariantPaths).call(oldVariantPaths, props.variant) ? "variants.".concat(props.variant) : props.variant;
   return (0, _react2.jsx)(_BadgeContext.BadgeContext.Provider, {
     value: {
@@ -87,7 +87,7 @@ Badge.propTypes = {
   bg: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
   /** Provides a way to insert markup in specified places. */
   slots: _propTypes["default"].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["default"].node
   }),
   /** The label of the badge. */

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

@@ -15,16 +15,13 @@ var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
 var _ContentCopyIcon = _interopRequireDefault(require("mdi-react/ContentCopyIcon"));
 var _EarthIcon = _interopRequireDefault(require("mdi-react/EarthIcon"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _index = require("../../index");
 var _colors = require("../../styles/colors.js");
-var _Box = _interopRequireDefault(require("../Box"));
-var _Icon = _interopRequireDefault(require("../Icon"));
-var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _Badge = _interopRequireDefault(require("./Badge.mdx"));
-var _ = _interopRequireDefault(require("."));
 var _react2 = require("@emotion/react");
 var _default = {
   title: 'Components/Badge',
-  component: _["default"],
+  component: _index.Badge,
   argTypes: {
     bg: {
       control: {
@@ -99,24 +96,24 @@ var VariableIcon = function VariableIcon(props) {
 };
 var Default = function Default(_ref5) {
   var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref5), _ref5));
-  return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({
+  return (0, _react2.jsx)(_index.Badge, (0, _extends2["default"])({
     label: "Label"
   }, args));
 };
 exports.Default = Default;
 var CountBadge = function CountBadge() {
-  return (0, _react2.jsx)(_Box["default"], null, (0, _react2.jsx)(_["default"], {
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Badge, {
     label: "1",
     variant: "countBadge",
     mb: "12px"
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Badge, {
     label: "1",
     variant: "countNeutral"
   }));
 };
 exports.CountBadge = CountBadge;
 var BadgeWithCustomColors = function BadgeWithCustomColors() {
-  return (0, _react2.jsx)(_["default"], {
+  return (0, _react2.jsx)(_index.Badge, {
     label: "Custom Colors",
     bg: "green",
     textColor: "#ffffff"
@@ -124,13 +121,13 @@ var BadgeWithCustomColors = function BadgeWithCustomColors() {
 };
 exports.BadgeWithCustomColors = BadgeWithCustomColors;
 var BadgeWithIcon = function BadgeWithIcon() {
-  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_["default"], {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Badge, {
     label: "Badge with Icon Button",
     bg: "navy"
-  }, (0, _react2.jsx)(_IconButton["default"], {
+  }, (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "Clear Badge with Icon Button",
     variant: "inverted"
-  }, (0, _react2.jsx)(_Icon["default"], {
+  }, (0, _react2.jsx)(_index.Icon, {
     icon: _CloseIcon["default"],
     ml: "xs",
     size: "14px"
@@ -138,12 +135,12 @@ var BadgeWithIcon = function BadgeWithIcon() {
     style: {
       padding: '5px'
     }
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Badge, {
     label: "Badge with Icon Button"
-  }, (0, _react2.jsx)(_IconButton["default"], {
+  }, (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "Clear Badge with Icon Button",
     variant: "inverted"
-  }, (0, _react2.jsx)(_Icon["default"], {
+  }, (0, _react2.jsx)(_index.Icon, {
     icon: _EarthIcon["default"],
     ml: "xs",
     size: "14px"
@@ -151,10 +148,10 @@ var BadgeWithIcon = function BadgeWithIcon() {
     style: {
       padding: '5px'
     }
-  }), (0, _react2.jsx)(_["default"], {
+  }), (0, _react2.jsx)(_index.Badge, {
     label: "Badge with Icon",
     bg: "green"
-  }, (0, _react2.jsx)(_Icon["default"], {
+  }, (0, _react2.jsx)(_index.Icon, {
     icon: _ContentCopyIcon["default"],
     ml: "xs",
     size: "14px",
@@ -165,20 +162,20 @@ var BadgeWithIcon = function BadgeWithIcon() {
 };
 exports.BadgeWithIcon = BadgeWithIcon;
 var BadgeWithLeftSlotAndIcon = function BadgeWithLeftSlotAndIcon() {
-  return (0, _react2.jsx)(_["default"], {
-    label: "Chip with Icon Button and Left Slot",
+  return (0, _react2.jsx)(_index.Badge, {
+    label: "Badge with Icon Button and Left Slot",
     bg: "white",
     variant: "itemBadgeWithSlot",
     slots: {
-      leftIcon: (0, _react2.jsx)(_Icon["default"], {
+      leftIcon: (0, _react2.jsx)(_index.Icon, {
         icon: VariableIcon,
         size: 16
       })
     }
-  }, (0, _react2.jsx)(_IconButton["default"], {
+  }, (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "delete",
     variant: "badgeDeleteButton"
-  }, (0, _react2.jsx)(_Icon["default"], {
+  }, (0, _react2.jsx)(_index.Icon, {
     icon: _CloseIcon["default"],
     size: 14
   })));

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

@@ -90,7 +90,10 @@ var deleteButton = {
   height: 14,
   p: 0,
   width: 14,
-  mx: '3px !important'
+  mx: '3px !important',
+  '&.is-focused': _objectSpread(_objectSpread({}, _Buttons.focusWithCroppedOutline), {}, {
+    bg: 'accent.40'
+  })
 };
 exports.deleteButton = deleteButton;
 var badgeDeleteButton = _objectSpread(_objectSpread({}, deleteButton), {}, {

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

@@ -22,8 +22,8 @@ var getComponent = function getComponent() {
 (0, _testAxe["default"])(getComponent);
 test('renders Badge component', function () {
   getComponent();
-  var chip = _react2.screen.getByTestId(testId);
-  expect(chip).toBeInTheDocument();
+  var badge = _react2.screen.getByTestId(testId);
+  expect(badge).toBeInTheDocument();
 });
 test('renders children within Badge component', function () {
   var children = (0, _react3.jsx)(_.Button, null);
@@ -50,7 +50,7 @@ test('renders Badge component with custom alignment', function () {
   expect(_react2.screen.getByTestId(testId)).toHaveStyleRule('position', 'absolute');
   expect(_react2.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: (0, _react3.jsx)(_.Icon, {
       icon: _EarthIcon["default"],