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

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

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.deleteButton = exports["default"] = exports.baseBadge = exports.badgeWithSlotDeleteButton = exports.badgeDeleteButton = void 0;
+exports.deleteButton = exports["default"] = exports.baseBadge = exports.badgeDeleteButton = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _Buttons = require("../Button/Buttons.styles");
 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; }
@@ -90,27 +90,18 @@ 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), {}, {
-  '&.is-focused': _objectSpread({
-    bg: 'accent.40'
-  }, _Buttons.focusWithCroppedOutline),
-  '&.is-hovered': {
-    bg: 'accent.40'
-  },
-  '&.is-pressed': {
-    bg: 'accent.20',
-    borderColor: 'accent.20'
-  }
-});
-exports.badgeDeleteButton = badgeDeleteButton;
-var badgeWithSlotDeleteButton = _objectSpread(_objectSpread({}, deleteButton), {}, {
+  outline: 'none',
   path: {
     fill: 'neutral.40'
   },
-  '&.is-focused': _objectSpread({}, _Buttons.defaultFocus),
+  '&.is-focused': _objectSpread({}, _Buttons.focusWithCroppedOutline),
   '&.is-hovered': {
     backgroundColor: '#e5e9f8 !important',
     path: {
@@ -124,7 +115,7 @@ var badgeWithSlotDeleteButton = _objectSpread(_objectSpread({}, deleteButton), {
     bg: '#4462ED !important'
   }
 });
-exports.badgeWithSlotDeleteButton = badgeWithSlotDeleteButton;
+exports.badgeDeleteButton = badgeDeleteButton;
 var countDefault = _objectSpread(_objectSpread({}, baseBadge), {}, {
   width: 'fit-content',
   minWidth: '17px',
@@ -156,7 +147,6 @@ var _default = {
   deleteButton: deleteButton,
   countBadge: countBadge,
   countNeutral: countNeutral,
-  badgeWithSlotDeleteButton: badgeWithSlotDeleteButton,
   badgeDeleteButton: badgeDeleteButton
 };
 exports["default"] = _default;

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"],

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

@@ -12,19 +12,19 @@ var _reactStately = require("react-stately");
 var _addonActions = require("@storybook/addon-actions");
 var _ChevronRightIcon = _interopRequireDefault(require("mdi-react/ChevronRightIcon"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
-var _Breadcrumbs = _interopRequireDefault(require("./Breadcrumbs"));
-var _Breadcrumbs2 = _interopRequireDefault(require("./Breadcrumbs.mdx"));
+var _index = require("../../index");
+var _Breadcrumbs = _interopRequireDefault(require("./Breadcrumbs.mdx"));
 var _react2 = require("@emotion/react");
 var _default = {
   title: 'Components/Breadcrumbs',
-  component: _Breadcrumbs["default"],
+  component: _index.Breadcrumbs,
   parameters: {
     docs: {
       source: {
         type: 'code'
       },
       page: function page() {
-        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Breadcrumbs2["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Breadcrumbs["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
     }
   },
@@ -48,7 +48,7 @@ var Default = function Default(args) {
   var onAction = function onAction(key) {
     return (0, _addonActions.action)("onPress ".concat(key));
   };
-  return (0, _react2.jsx)(_Breadcrumbs["default"], (0, _extends2["default"])({
+  return (0, _react2.jsx)(_index.Breadcrumbs, (0, _extends2["default"])({
     onAction: onAction
   }, args), (0, _react2.jsx)(_reactStately.Item, {
     key: "home",

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.TextIconButton = exports.InlineButton = exports.FilterButton = exports.Disabled = exports.Default = exports.ColorBlockButton = void 0;
+exports["default"] = exports.TextIconButton = exports.Primary = exports.InlineButton = exports.FilterButton = exports.Disabled = exports.Default = exports.Critical = exports.ColorBlockButton = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
@@ -25,7 +25,7 @@ delete variants.ICON_BUTTON;
 delete variants.INVERTED;
 
 // add designer approved variants for devs to use here
-var variantOptions = ['critical', 'default', 'inline', 'inlinePrimary', 'link', 'primary', 'success'];
+var variantOptions = ['critical', 'default', 'inline', 'inlinePrimary', 'link', 'primary'];
 var _default = {
   title: 'Components/Button',
   component: _index.Button,
@@ -136,4 +136,16 @@ var FilterButton = function FilterButton() {
     icon: _FilterIcon["default"]
   })));
 };
-exports.FilterButton = FilterButton;
+exports.FilterButton = FilterButton;
+var Critical = function Critical() {
+  return (0, _react2.jsx)(_index.Button, {
+    variant: "critical"
+  }, "Button Text");
+};
+exports.Critical = Critical;
+var Primary = function Primary() {
+  return (0, _react2.jsx)(_index.Button, {
+    variant: "primary"
+  }, "Button Text");
+};
+exports.Primary = Primary;

package/lib/cjs/components/Button/Buttons.styles.js

@@ -97,7 +97,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/cjs/components/Callout/Callout.stories.js

@@ -9,13 +9,13 @@ exports["default"] = exports.Warning = exports.Success = exports.ErrorStatus = e
 var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 var _react = _interopRequireDefault(require("react"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
-var _ = require("../..");
+var _index = require("../../index");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _Callout = _interopRequireDefault(require("./Callout.mdx"));
 var _react2 = require("@emotion/react");
 var _default = {
   title: 'Components/Callout',
-  component: _.Callout,
+  component: _index.Callout,
   argTypes: {
     status: {
       control: {
@@ -37,7 +37,7 @@ var _default = {
 }; // main
 exports["default"] = _default;
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_.Callout, args, (0, _react2.jsx)(_.Text, null, "You should be aware of this. It might be good or bad, I don\u2019t know. You may already be aware of it, but I want to be sure", (0, _react2.jsx)(_.Link, {
+  return (0, _react2.jsx)(_index.Callout, args, (0, _react2.jsx)(_index.Text, null, "You should be aware of this. It might be good or bad, I don\u2019t know. You may already be aware of it, but I want to be sure", (0, _react2.jsx)(_index.Link, {
     href: "https://pingidentity.com",
     target: "_blank",
     "aria-label": "".concat(_statuses["default"].DEFAULT, "-callout"),
@@ -46,9 +46,9 @@ var Default = function Default(args) {
 };
 exports.Default = Default;
 var ErrorStatus = function ErrorStatus() {
-  return (0, _react2.jsx)(_.Callout, {
+  return (0, _react2.jsx)(_index.Callout, {
     status: _statuses["default"].ERROR
-  }, (0, _react2.jsx)(_.Text, null, "You\u2019ve got problems. Allow me to tell you about them in some detail so that you can address them", (0, _react2.jsx)(_.Link, {
+  }, (0, _react2.jsx)(_index.Text, null, "You\u2019ve got problems. Allow me to tell you about them in some detail so that you can address them", (0, _react2.jsx)(_index.Link, {
     href: "https://pingidentity.com",
     target: "_blank",
     "aria-label": "".concat(_statuses["default"].ERROR, "-callout"),
@@ -60,9 +60,9 @@ var ErrorStatus = function ErrorStatus() {
 exports.ErrorStatus = ErrorStatus;
 ErrorStatus.storyName = 'Error';
 var Success = function Success() {
-  return (0, _react2.jsx)(_.Callout, {
+  return (0, _react2.jsx)(_index.Callout, {
     status: _statuses["default"].SUCCESS
-  }, (0, _react2.jsx)(_.Text, null, "It Worked! Maybe there is something else related to it working that I need to explain", (0, _react2.jsx)(_.Link, {
+  }, (0, _react2.jsx)(_index.Text, null, "It Worked! Maybe there is something else related to it working that I need to explain", (0, _react2.jsx)(_index.Link, {
     href: "https://pingidentity.com",
     target: "_blank",
     "aria-label": "".concat(_statuses["default"].SUCCESS, "-callout"),
@@ -71,9 +71,9 @@ var Success = function Success() {
 };
 exports.Success = Success;
 var Warning = function Warning() {
-  return (0, _react2.jsx)(_.Callout, {
+  return (0, _react2.jsx)(_index.Callout, {
     status: _statuses["default"].WARNING
-  }, (0, _react2.jsx)(_.Text, null, "You\u2019ve got issues. Allow me to tell you about them in some detail so that you can address them. I\u2019ll continue to type enough text to demonstrate that the Callout box will grow in height with the content", (0, _react2.jsx)(_.Link, {
+  }, (0, _react2.jsx)(_index.Text, null, "You\u2019ve got issues. Allow me to tell you about them in some detail so that you can address them. I\u2019ll continue to type enough text to demonstrate that the Callout box will grow in height with the content", (0, _react2.jsx)(_index.Link, {
     href: "https://pingidentity.com",
     target: "_blank",
     "aria-label": "".concat(_statuses["default"].WARNING, "-callout"),

package/lib/cjs/components/Card/Card.js

@@ -63,7 +63,7 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var ariaLabel = props['aria-label'];
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     "aria-label": ariaLabel,
-    variant: "boxes.card",
+    variant: "cards.container",
     className: classNames,
     ref: ref,
     isFocused: isFocusVisible

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

@@ -21,13 +21,10 @@ var _every = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stab
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
+var _index = require("../../index");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
-var _Box = _interopRequireDefault(require("../Box"));
-var _Link = _interopRequireDefault(require("../Link"));
-var _Text = _interopRequireDefault(require("../Text"));
-var _CheckboxField = _interopRequireDefault(require("./CheckboxField"));
 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; }
@@ -35,7 +32,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var _default = {
   title: 'Form/CheckboxField',
-  component: _CheckboxField["default"],
+  component: _index.CheckboxField,
   parameters: {
     docs: {
       source: {
@@ -85,11 +82,11 @@ var _default = {
 };
 exports["default"] = _default;
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_CheckboxField["default"], args);
+  return (0, _react2.jsx)(_index.CheckboxField, args);
 };
 exports.Default = Default;
 var DefaultSelected = function DefaultSelected() {
-  return (0, _react2.jsx)(_CheckboxField["default"], {
+  return (0, _react2.jsx)(_index.CheckboxField, {
     isDefaultSelected: true,
     label: "Click me"
   });
@@ -100,7 +97,7 @@ var Controlled = function Controlled() {
     _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
     isSelected = _React$useState2[0],
     setSelected = _React$useState2[1];
-  return (0, _react2.jsx)(_CheckboxField["default"], {
+  return (0, _react2.jsx)(_index.CheckboxField, {
     isSelected: isSelected,
     onChange: setSelected,
     label: "Click me"
@@ -108,9 +105,9 @@ var Controlled = function Controlled() {
 };
 exports.Controlled = Controlled;
 var Required = function Required() {
-  return (0, _react2.jsx)(_CheckboxField["default"], {
+  return (0, _react2.jsx)(_index.CheckboxField, {
     isRequired: true,
-    label: (0, _react2.jsx)(_Text["default"], null, "I agree to the", ' ', (0, _react2.jsx)(_Link["default"], {
+    label: (0, _react2.jsx)(_index.Text, null, "I agree to the", ' ', (0, _react2.jsx)(_index.Link, {
       href: "https://pingidentity.com",
       target: "_blank"
     }, "Terms and Conditions"))
@@ -118,7 +115,7 @@ var Required = function Required() {
 };
 exports.Required = Required;
 var HelperText = function HelperText() {
-  return (0, _react2.jsx)(_CheckboxField["default"], {
+  return (0, _react2.jsx)(_index.CheckboxField, {
     status: "error",
     helperText: "Here is some helpful text...",
     label: "Click me"
@@ -188,15 +185,15 @@ var Indeterminate = function Indeterminate() {
       setIsCompleted(false);
     }
   }, [isIndeterminate, subCheckboxes]);
-  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_CheckboxField["default"], {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.CheckboxField, {
     label: "Fruit Salad Recipe",
     isIndeterminate: isIndeterminate,
     isSelected: isCompleted,
     onChange: handleParentCheckboxChange
-  }), (0, _react2.jsx)(_Box["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     ml: "lg"
   }, (0, _map["default"])(subCheckboxes).call(subCheckboxes, function (checkbox, index) {
-    return (0, _react2.jsx)(_CheckboxField["default"], {
+    return (0, _react2.jsx)(_index.CheckboxField, {
       key: checkbox.label,
       label: checkbox.label,
       isSelected: checkbox.isSelected,

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

@@ -11,14 +11,13 @@ var _react = _interopRequireDefault(require("react"));
 var _prismjs = _interopRequireDefault(require("prismjs"));
 require("prismjs/components/prism-powershell");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
-var _ = require("../..");
-var _CodeView = _interopRequireDefault(require("./CodeView"));
-var _CodeView2 = _interopRequireDefault(require("./CodeView.mdx"));
+var _index = require("../../index");
+var _CodeView = _interopRequireDefault(require("./CodeView.mdx"));
 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: 'Components/CodeView',
-  component: _CodeView["default"],
+  component: _index.CodeView,
   argTypes: {
     children: {
       defaultValue: code,
@@ -36,7 +35,7 @@ var _default = {
   parameters: {
     docs: {
       page: function page() {
-        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_CodeView2["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_CodeView["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
     },
     a11y: {
@@ -55,21 +54,13 @@ var _default = {
 };
 exports["default"] = _default;
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Text, {
-    sx: {
-      fontWeight: 2
-    }
-  }, "JSON"), (0, _react2.jsx)(_CodeView["default"], args));
+  return (0, _react2.jsx)(_index.CodeView, args);
 };
 exports.Default = Default;
 var WithLineNumbers = function WithLineNumbers() {
-  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Text, {
-    sx: {
-      fontWeight: 2
-    }
-  }, "JSON"), (0, _react2.jsx)(_CodeView["default"], {
+  return (0, _react2.jsx)(_index.CodeView, {
     hasLineNumbers: true
-  }, code));
+  }, code);
 };
 exports.WithLineNumbers = WithLineNumbers;
 WithLineNumbers.parameters = {
@@ -78,14 +69,14 @@ WithLineNumbers.parameters = {
   }
 };
 var WithCustomSize = function WithCustomSize() {
-  return (0, _react2.jsx)(_CodeView["default"], {
+  return (0, _react2.jsx)(_index.CodeView, {
     language: "jsx",
     sx: {
       width: '100%',
       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    ");
 };
 exports.WithCustomSize = WithCustomSize;
 var WithAdditionalLanguage = function WithAdditionalLanguage() {
@@ -97,7 +88,7 @@ var WithAdditionalLanguage = function WithAdditionalLanguage() {
    */
 
   var powershellCode = (0, _trim["default"])(_context = "\n   Get-WinEvent -FilterHashtable @{\n     LogName='Application'\n     ProviderName='*defrag'\n   }\n ").call(_context);
-  return (0, _react2.jsx)(_CodeView["default"], {
+  return (0, _react2.jsx)(_index.CodeView, {
     language: "powershell",
     Prism: _prismjs["default"]
   }, powershellCode);

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

@@ -32,8 +32,7 @@ var _SearchIcon = _interopRequireDefault(require("mdi-react/SearchIcon"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _hooks = require("../../hooks");
 var _index = require("../../index");
-var _CollapsiblePanel = _interopRequireDefault(require("./CollapsiblePanel"));
-var _CollapsiblePanel2 = _interopRequireDefault(require("./CollapsiblePanel.mdx"));
+var _CollapsiblePanel = _interopRequireDefault(require("./CollapsiblePanel.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; }
@@ -41,11 +40,11 @@ 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: 'Components/CollapsiblePanel',
-  component: _CollapsiblePanel["default"],
+  component: _index.CollapsiblePanel,
   parameters: {
     docs: {
       page: function page() {
-        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_CollapsiblePanel2["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_CollapsiblePanel["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       },
       source: {
         type: 'code'
@@ -80,7 +79,7 @@ var data = [{
   key: 'Avengers',
   name: 'Avengers',
   subtitle: 'Default',
-  chipValue: '25',
+  badgeValue: '25',
   isDefaultSelected: true
 }, {
   id: '2',
@@ -88,21 +87,21 @@ var data = [{
   key: 'Credit Cards',
   name: 'Credit Cards',
   subtitle: '',
-  chipValue: '123'
+  badgeValue: '123'
 }, {
   id: '3',
   icon: 'Group',
   key: 'Debit Cards',
   name: 'Debit Cards',
   subtitle: '',
-  chipValue: '23'
+  badgeValue: '23'
 }, {
   id: '4',
   icon: 'Group',
   key: 'Digital Investors',
   name: 'Digital Investors',
   subtitle: 'N America',
-  chipValue: '12',
+  badgeValue: '12',
   isDefaultSelected: true
 }, {
   id: '5',
@@ -110,38 +109,38 @@ var data = [{
   key: 'Mortgages',
   name: 'Mortgages',
   subtitle: 'N America',
-  chipValue: '112'
+  badgeValue: '112'
 }, {
   id: '6',
   icon: 'Group',
   key: 'Person LOC',
   name: 'Person LOC',
   subtitle: '',
-  chipValue: '45'
+  badgeValue: '45'
 }, {
   id: '7',
   icon: 'Group',
   key: 'Production',
   name: 'Production',
   subtitle: '',
-  chipValue: '55'
+  badgeValue: '55'
 }, {
   id: '8',
   icon: 'Group',
   key: 'UX Team',
   name: 'UX Team',
   subtitle: '',
-  chipValue: '61'
+  badgeValue: '61'
 }, {
   id: '9',
   icon: 'Group',
   key: 'UI Team',
   name: 'UI Team',
   subtitle: '',
-  chipValue: '29'
+  badgeValue: '29'
 }];
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_CollapsiblePanel["default"], args);
+  return (0, _react2.jsx)(_index.CollapsiblePanel, args);
 };
 exports.Default = Default;
 var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args) {
@@ -284,7 +283,7 @@ var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args) {
       mb: "xs",
       mr: "xs"
     }, item.name), (0, _react2.jsx)(_index.Badge, {
-      label: item.chipValue,
+      label: item.badgeValue,
       bg: "accent.99",
       textColor: "text.secondary",
       sx: {
@@ -330,7 +329,7 @@ var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args) {
         return el.key === item.key;
       })
     }));
-  })), (0, _react2.jsx)(_CollapsiblePanel["default"], (0, _extends2["default"])({
+  })), (0, _react2.jsx)(_index.CollapsiblePanel, (0, _extends2["default"])({
     items: selectedItems,
     onSelectionChange: changeSelection,
     selectedFilterCount: "1000+"

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

@@ -92,6 +92,7 @@ var item = {
 };
 var toggle = _objectSpread(_objectSpread({}, _IconButton.square), {}, {
   bg: 'accent.99',
+  borderRadius: '2px',
   height: '40px',
   minWidth: 'max-content',
   pl: 'xs',
@@ -102,16 +103,16 @@ var toggle = _objectSpread(_objectSpread({}, _IconButton.square), {}, {
   '&.is-hovered': {
     backgroundColor: 'accent.99'
   },
-  '&.is-focused': _objectSpread(_objectSpread({}, _Buttons.defaultFocus), {}, {
-    outlineOffset: '0',
-    zIndex: 1
-  }),
   '&.is-pressed': {
     backgroundColor: 'accent.99'
   },
   ':focus': {
     outline: 'none'
-  }
+  },
+  '&.is-focused': _objectSpread(_objectSpread({}, _Buttons.defaultFocus), {}, {
+    outlineOffset: '0',
+    zIndex: 1
+  })
 });
 exports.toggle = toggle;
 var neutralText = _objectSpread(_objectSpread({}, _Buttons.link), {}, {

package/lib/cjs/components/ColorField/ColorField.js

@@ -126,6 +126,7 @@ var ColorField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     hasNoArrow: true,
     isDismissable: true,
     isNonModal: true,
+    isNotClosedOnBlur: true,
     isOpen: popoverState.isOpen,
     onClose: popoverState.close,
     ref: overlayRef

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

@@ -20,7 +20,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
-var _ = require("../..");
+var _index = require("../../index");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
@@ -31,7 +31,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var _default = {
   title: 'Form/ColorField',
-  component: _.ColorField,
+  component: _index.ColorField,
   parameters: {
     docs: {
       source: {
@@ -99,7 +99,7 @@ var Default = function Default(args) {
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
-    (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.ColorField, (0, _extends2["default"])({
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.ColorField, (0, _extends2["default"])({
       value: color
     }, args, {
       onChange: handleChange

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

@@ -49,4 +49,19 @@ test('will call onChange with arguments if provided', function () {
   _userEvent["default"].clear(hexInput);
   _userEvent["default"].type(hexInput, testColor2);
   expect(testOnChange).toHaveBeenCalled();
+});
+test('clicking within the popover does not close it', function () {
+  var testOnChange = jest.fn();
+  getComponent({
+    onChange: testOnChange,
+    value: testColor1
+  });
+  var button = _testWrapper.screen.getByRole('button');
+  _userEvent["default"].click(button);
+  // should be open now
+  var hexLabelElement = _testWrapper.screen.queryByText(hexLabel);
+  expect(hexLabelElement).toBeInTheDocument();
+  // click the popover container, which has caused closing in regressions
+  _userEvent["default"].click(_testWrapper.screen.queryByRole('presentation'));
+  expect(_testWrapper.screen.queryByRole('presentation')).toBeInTheDocument();
 });