@pingux/astro 1.37.2 → 1.38.0-alpha.1

package/lib/cjs/components/Chip/Chip.js

@@ -1,25 +1,7 @@
 "use strict";
 
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
-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", {
@@ -30,70 +12,26 @@ exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _ChipContext = require("./ChipContext");
-
-var _Box = _interopRequireDefault(require("../Box/Box"));
-
-var _Text = _interopRequireDefault(require("../Text/Text"));
+var _Badge = _interopRequireDefault(require("./Badge"));
 
-var colors = _interopRequireWildcard(require("../../styles/colors"));
+var _hooks = require("../../hooks");
 
 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 _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; }
-
 /**
  * Chip component.
  * Built on top of the [Box from Theme-UI](https://theme-ui.com/components/box/) and uses the
  * available [props from Theme-UI](https://theme-ui.com/sx-prop).
 */
 var Chip = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
-  var bg = props.bg,
-      children = props.children,
-      textColor = props.textColor,
-      textProps = props.textProps,
-      label = props.label,
-      align = props.align,
-      isUppercase = props.isUppercase;
-
-  var sx = _objectSpread({}, isUppercase && {
-    paddingBottom: '3px'
-  });
-
-  if (align) {
-    sx.position = 'absolute';
-    sx[align] = '15px';
-  }
-
-  return (0, _react2.jsx)(_ChipContext.ChipContext.Provider, {
-    value: {
-      bg: bg
-    }
-  }, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
-    isRow: true,
-    variant: "boxes.chip",
-    sx: sx,
+  (0, _hooks.useDeprecationWarning)('The Chip component will be deprecated in Astro-UI 2.0.0 and replaced by the `Badge` component instead.');
+  return (0, _react2.jsx)(_Badge["default"], (0, _extends2["default"])({
     ref: ref
-  }, props), (0, _react2.jsx)(_Text["default"], (0, _extends2["default"])({
-    variant: "label",
-    color: textColor,
-    sx: isUppercase && {
-      textTransform: 'uppercase',
-      fontSize: '11px'
-    }
-  }, textProps), label), children));
+  }, props));
 });
 
 Chip.propTypes = {
@@ -103,6 +41,12 @@ Chip.propTypes = {
   /** The background color of the chip. */
   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. */
+    leftIcon: _propTypes["default"].node
+  }),
+
   /** The label of the chip. */
   label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
 
@@ -115,10 +59,5 @@ Chip.propTypes = {
   /** Alignment of chip relative to parent container. */
   align: _propTypes["default"].oneOf(['top', 'right', 'bottom', 'left'])
 };
-Chip.defaultProps = {
-  textColor: 'white',
-  bg: colors.neutral[10],
-  isUppercase: false
-};
 var _default = Chip;
 exports["default"] = _default;

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

@@ -26,7 +26,7 @@ var _react2 = require("@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}";
 var _default = {
-  title: 'CodeView',
+  title: 'Components/CodeView',
   component: _CodeView["default"],
   argTypes: {
     children: {

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

@@ -73,7 +73,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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: 'CollapsiblePanel',
+  title: 'Components/CollapsiblePanel',
   component: _CollapsiblePanel["default"],
   argTypes: {
     listTitle: {

package/lib/cjs/components/CollapsiblePanelContainer/CollapsiblePanelBadge.js

@@ -35,7 +35,7 @@ var CollapsiblePanelBadge = function CollapsiblePanelBadge(props) {
     bg: "neutral.90",
     label: selectedFilterCount.toString(),
     textColor: "neutral.30",
-    variant: "collapsiblePanel.collapsiblePanelBadge",
+    variant: "variants.collapsiblePanel.collapsiblePanelBadge",
     isUppercase: true
   }, others));
 };

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

@@ -390,22 +390,64 @@ var ControlledFiltering = function ControlledFiltering() {
   }),
       startsWith = (0, _startsWith["default"])(_useFilter);
 
-  var _useState7 = (0, _react.useState)(''),
+  var _useState7 = (0, _react.useState)({
+    inputValue: '',
+    selectedKey: '',
+    itemsList: items
+  }),
       _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      filterValue = _useState8[0],
-      setFilterValue = _useState8[1];
+      fieldState = _useState8[0],
+      setFieldState = _useState8[1];
+
+  var onSelectionChange = function onSelectionChange(key) {
+    var selectedItem = (0, _filter["default"])(items).call(items, function (_ref2) {
+      var id = _ref2.id;
+      return id === key;
+    });
+    setFieldState({
+      inputValue: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name,
+      selectedKey: key,
+      itemsList: (0, _filter["default"])(items).call(items, function (item) {
+        var _selectedItem$name;
+
+        return startsWith(item.name, (_selectedItem$name = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) !== null && _selectedItem$name !== void 0 ? _selectedItem$name : '');
+      })
+    });
+  };
 
-  var filteredItems = (0, _react.useMemo)(function () {
-    return (0, _filter["default"])(items).call(items, function (item) {
-      return startsWith(item.name, filterValue);
+  var onInputChange = function onInputChange(value) {
+    setFieldState(function (oldValues) {
+      return {
+        inputValue: value,
+        selectedKey: value === '' ? null : oldValues.selectedKey,
+        itemsList: (0, _filter["default"])(items).call(items, function (item) {
+          return startsWith(item.name, value);
+        })
+      };
     });
-  }, [startsWith, filterValue]);
+  };
+
+  var onOpenChange = function onOpenChange(isOpen, menuTrigger) {
+    if (menuTrigger === 'manual' && isOpen) {
+      setFieldState(function (oldValues) {
+        return {
+          inputValue: oldValues.inputValue,
+          selectedKey: oldValues.selectedKey,
+          itemsList: items
+        };
+      });
+    }
+  };
+
   return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
     label: "Example label"
   }, actions, {
-    items: filteredItems,
-    inputValue: filterValue,
-    onInputChange: setFilterValue
+    items: fieldState.itemsList,
+    inputValue: fieldState.inputValue,
+    selectedKey: fieldState.selectedKey,
+    onInputChange: onInputChange,
+    onSelectionChange: onSelectionChange,
+    onOpenChange: onOpenChange
   }), function (item) {
     return (0, _react2.jsx)(_.Item, {
       key: item.name
@@ -606,8 +648,8 @@ var ControlledWithAddOption = function ControlledWithAddOption() {
 
   var onSelectionChange = function onSelectionChange(key) {
     // Add new option to options array
-    if (key && !(0, _find["default"])(options).call(options, function (_ref2) {
-      var name = _ref2.name;
+    if (key && !(0, _find["default"])(options).call(options, function (_ref3) {
+      var name = _ref3.name;
       return name === key;
     })) {
       var _context2;

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

@@ -108,25 +108,68 @@ var ComboBoxWithCustomFilter = function ComboBoxWithCustomFilter() {
   }),
       startsWith = (0, _startsWith["default"])(_useFilter);
 
-  var _useState = (0, _react.useState)(''),
+  var _useState = (0, _react.useState)({
+    inputValue: '',
+    selectedKey: '',
+    itemsList: items
+  }),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      filterValue = _useState2[0],
-      setFilterValue = _useState2[1];
+      fieldState = _useState2[0],
+      setFieldState = _useState2[1];
+
+  var onSelectionChange = function onSelectionChange(key) {
+    var selectedItem = (0, _filter["default"])(items).call(items, function (_ref2) {
+      var id = _ref2.id;
+      return id === key;
+    });
+    setFieldState({
+      inputValue: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name,
+      selectedKey: key,
+      itemsList: (0, _filter["default"])(items).call(items, function (item) {
+        var _selectedItem$name;
+
+        return startsWith(item.name, (_selectedItem$name = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) !== null && _selectedItem$name !== void 0 ? _selectedItem$name : '');
+      })
+    });
+  };
 
-  var filteredItems = (0, _react.useMemo)(function () {
-    return (0, _filter["default"])(items).call(items, function (item) {
-      return startsWith(item.name, filterValue);
+  var onInputChange = function onInputChange(value) {
+    setFieldState(function (oldValues) {
+      return {
+        inputValue: value,
+        selectedKey: value === '' ? null : oldValues.selectedKey,
+        itemsList: (0, _filter["default"])(items).call(items, function (item) {
+          return startsWith(item.name, value);
+        })
+      };
     });
-  }, [startsWith, filterValue]);
-  return (0, _react3.jsx)(_index.ComboBoxField, (0, _extends2["default"])({}, defaultProps, {
-    items: filteredItems,
-    inputValue: filterValue,
-    onInputChange: setFilterValue
-  }), function (item) {
+  };
+
+  var onOpenChange = function onOpenChange(isOpen, menuTrigger) {
+    if (menuTrigger === 'manual' && isOpen) {
+      setFieldState(function (oldValues) {
+        return {
+          inputValue: oldValues.inputValue,
+          selectedKey: oldValues.selectedKey,
+          itemsList: items
+        };
+      });
+    }
+  };
+
+  return (0, _react3.jsx)(_index.OverlayProvider, null, (0, _react3.jsx)(_index.ComboBoxField, (0, _extends2["default"])({
+    label: "Example label",
+    items: fieldState.itemsList,
+    inputValue: fieldState.inputValue,
+    selectedKey: fieldState.selectedKey,
+    onInputChange: onInputChange,
+    onSelectionChange: onSelectionChange,
+    onOpenChange: onOpenChange
+  }, defaultProps), function (item) {
     return (0, _react3.jsx)(_index.Item, {
-      id: item.id
+      key: item.name
     }, item.name);
-  });
+  }));
 };
 
 var ComboBoxWithAddOption = function ComboBoxWithAddOption() {
@@ -146,8 +189,8 @@ var ComboBoxWithAddOption = function ComboBoxWithAddOption() {
       setSelectedKey = _useState8[1];
 
   var onSelectionChange = function onSelectionChange(key) {
-    if (key && !(0, _find["default"])(options).call(options, function (_ref2) {
-      var name = _ref2.name;
+    if (key && !(0, _find["default"])(options).call(options, function (_ref3) {
+      var name = _ref3.name;
       return name === key;
     })) {
       var _context;

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

@@ -23,7 +23,7 @@ var _CopyText = _interopRequireDefault(require("./CopyText"));
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'CopyText',
+  title: 'Components/CopyText',
   component: _CopyText["default"],
   argTypes: {
     mode: {

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

@@ -47,7 +47,7 @@ var _index = require("../../index");
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'DataTable',
+  title: 'Components/DataTable',
   component: _index.DataTable,
   parameters: {
     docs: {

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

@@ -63,7 +63,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(source), !0)).call(_context6, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var _default = {
-  title: 'EnvironmentBreadcrumb',
+  title: 'Components/EnvironmentBreadcrumb',
   component: _EnvironmentBreadcrumb["default"]
 };
 exports["default"] = _default;
@@ -144,7 +144,7 @@ var Default = function Default(args) {
     color: "inherit"
   }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Chip, {
     label: "SANDBOX",
-    variant: "boxes.environmentChip",
+    variant: "variants.boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
 
@@ -173,7 +173,7 @@ var Default = function Default(args) {
       textValue: name
     }, name, isSandbox ? (0, _react2.jsx)(_index.Chip, {
       label: "SANDBOX",
-      variant: "boxes.environmentChip",
+      variant: "variants.boxes.environmentChip",
       bg: "neutral.40"
     }) : null);
   });
@@ -256,7 +256,7 @@ var WithSections = function WithSections() {
     color: "inherit"
   }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Chip, {
     label: "SANDBOX",
-    variant: "boxes.environmentChip",
+    variant: "variants.boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
   return (0, _react2.jsx)(_EnvironmentBreadcrumb["default"], {
@@ -285,7 +285,7 @@ var WithSections = function WithSections() {
         isRow: true
       }, itemName, isSandbox ? (0, _react2.jsx)(_index.Chip, {
         label: "SANDBOX",
-        variant: "boxes.environmentChip",
+        variant: "variants.boxes.environmentChip",
         bg: "neutral.40"
       }) : null));
     });
@@ -318,7 +318,7 @@ var DefaultOpen = function DefaultOpen() {
     color: "inherit"
   }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Chip, {
     label: "SANDBOX",
-    variant: "boxes.environmentChip",
+    variant: "variants.boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
 
@@ -348,7 +348,7 @@ var DefaultOpen = function DefaultOpen() {
       textValue: name
     }, name, isSandbox ? (0, _react2.jsx)(_index.Chip, {
       label: "SANDBOX",
-      variant: "boxes.environmentChip",
+      variant: "variants.boxes.environmentChip",
       bg: "neutral.40"
     }) : null);
   });
@@ -377,7 +377,7 @@ var ControlledMenu = function ControlledMenu() {
     color: "inherit"
   }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Chip, {
     label: "SANDBOX",
-    variant: "boxes.environmentChip",
+    variant: "variants.boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
 
@@ -408,7 +408,7 @@ var ControlledMenu = function ControlledMenu() {
       textValue: name
     }, name, isSandbox ? (0, _react2.jsx)(_index.Chip, {
       label: "SANDBOX",
-      variant: "boxes.environmentChip",
+      variant: "variants.boxes.environmentChip",
       bg: "neutral.40"
     }) : null);
   });
@@ -431,7 +431,7 @@ var RightAlignedChips = function RightAlignedChips(args) {
     color: "inherit"
   }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Chip, {
     label: "SANDBOX",
-    variant: "boxes.environmentChip",
+    variant: "variants.boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
 
@@ -489,7 +489,7 @@ var RightAlignedChips = function RightAlignedChips(args) {
       textValue: name
     }, name, isSandbox ? (0, _react2.jsx)(_index.Chip, {
       label: "SANDBOX",
-      variant: "boxes.environmentChip",
+      variant: "variants.boxes.environmentChip",
       bg: "neutral.40",
       align: "right"
     }) : null);

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

@@ -19,7 +19,7 @@ var _Box = _interopRequireDefault(require("../Box"));
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'HelpHint',
+  title: 'Components/HelpHint',
   component: _["default"],
   argTypes: {
     children: {

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

@@ -41,7 +41,7 @@ var _tShirtSizes = require("../../utils/devUtils/constants/tShirtSizes");
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'Icon',
+  title: 'Components/Icon',
   component: _index.Icon,
   parameters: {
     docs: {

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

@@ -25,7 +25,7 @@ var _index = require("../../index");
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'IconBadge',
+  title: 'Components/IconBadge',
   component: _["default"],
   parameters: {
     docs: {

package/lib/cjs/components/IconButton/IconButton.js

@@ -50,7 +50,7 @@ var _utils = require("@react-aria/utils");
 
 var _hooks = require("../../hooks");
 
-var _ChipContext = require("../Chip/ChipContext");
+var _BadgeContext = require("../../context/BadgeContext");
 
 var _TooltipTrigger = _interopRequireWildcard(require("../TooltipTrigger"));
 
@@ -96,7 +96,7 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       buttonProps = _useButton.buttonProps,
       isPressed = _useButton.isPressed;
 
-  var _useContext = (0, _react.useContext)(_ChipContext.ChipContext),
+  var _useContext = (0, _react.useContext)(_BadgeContext.BadgeContext),
       chipBg = _useContext.bg;
 
   var _useHover = (0, _interactions.useHover)(props),

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

@@ -29,7 +29,7 @@ var _index = require("../../index");
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'IconButton',
+  title: 'Components/IconButton',
   component: _index.IconButton,
   parameters: {
     docs: {

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

@@ -35,7 +35,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 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 _default = {
-  title: 'IconButtonToggle',
+  title: 'Components/IconButtonToggle',
   component: _["default"]
 };
 exports["default"] = _default;

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

@@ -39,7 +39,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 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 _default = {
-  title: 'Image',
+  title: 'Components/Image',
   component: _["default"],
   argTypes: {
     isDisabled: {},

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

@@ -25,7 +25,7 @@ var _links = _interopRequireDefault(require("../../styles/variants/links"));
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'Link',
+  title: 'Components/Link',
   component: _["default"],
   argTypes: {
     href: {

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

@@ -31,7 +31,7 @@ var _Separator = _interopRequireDefault(require("../Separator"));
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'ListItem',
+  title: 'Components/ListItem',
   component: _ListItem["default"]
 };
 exports["default"] = _default;

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

@@ -57,7 +57,7 @@ var _loadingStates = _interopRequireDefault(require("../../utils/devUtils/consta
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'ListView',
+  title: 'Components/ListView',
   component: _["default"],
   argTypes: {
     loadingState: {

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

@@ -23,7 +23,7 @@ var _colors = require("../../styles/colors");
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'Loader',
+  title: 'Components/Loader',
   component: _["default"],
   argTypes: {
     color: {

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

@@ -23,7 +23,7 @@ var _Text = _interopRequireDefault(require("../Text"));
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'Menu',
+  title: 'Components/Menu',
   component: _Menu["default"],
   parameters: {
     actions: {

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

@@ -67,7 +67,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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: 'Messages',
+  title: 'Components/Messages',
   component: _.Messages,
   argTypes: {
     items: {

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

@@ -21,7 +21,7 @@ var _index = require("../../index");
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'Modal',
+  title: 'Components/Modal',
   component: _index.Modal,
   argTypes: {
     title: {