@pingux/astro 2.221.6-alpha.0 → 2.234.0-alpha.0

package/lib/cjs/components/CheckboxFieldGroup/checkboxFieldGroupAttributes.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkboxFieldGroupItemArgTypes = exports.checkboxFieldGroupArgTypes = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
+var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
+var _statusProp = require("../../utils/docUtils/statusProp");
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+var checkboxFieldGroupArgTypes = exports.checkboxFieldGroupArgTypes = _objectSpread(_objectSpread(_objectSpread({
+  label: {
+    control: {
+      type: 'text'
+    },
+    description: 'The accessible label for the checkbox group.'
+  },
+  helperText: {
+    control: {
+      type: 'text'
+    },
+    description: 'Descriptive text announced with the group and its items.'
+  },
+  errorMessage: {
+    control: {
+      type: 'text'
+    },
+    description: 'Validation feedback rendered when the group is invalid.'
+  },
+  hintText: {
+    control: {
+      type: 'text'
+    }
+  },
+  orientation: {
+    control: {
+      type: 'inline-radio'
+    },
+    options: ['vertical', 'horizontal']
+  },
+  defaultValue: {
+    control: {
+      type: 'object'
+    },
+    description: 'Initially selected item values for an uncontrolled group.'
+  },
+  value: {
+    control: false,
+    description: 'Selected item values for a controlled group.'
+  },
+  onChange: {
+    action: 'selection changed',
+    description: 'Receives the complete selected string array after a toggle.'
+  },
+  isDisabled: {},
+  isReadOnly: {},
+  isRequired: {},
+  isInvalid: {},
+  name: {
+    description: 'The native name copied to every checkbox input in the group.'
+  },
+  form: {
+    description: 'The native form ID copied to every checkbox input in the group.'
+  },
+  id: {},
+  children: {
+    control: false,
+    description: 'Use CheckboxFieldGroupItem children; raw Checkbox children do not consume group state.'
+  }
+}, _statusProp.statusArgTypes), _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes);
+var checkboxFieldGroupItemArgTypes = exports.checkboxFieldGroupItemArgTypes = _objectSpread(_objectSpread({
+  value: {
+    description: 'Required string submitted when this item is selected.'
+  },
+  label: {
+    control: {
+      type: 'text'
+    }
+  },
+  helperText: {
+    control: {
+      type: 'text'
+    }
+  },
+  isDisabled: {},
+  isReadOnly: {},
+  isIndeterminate: {
+    description: 'Visual mixed state only; it does not add another selection model.'
+  },
+  hasAutoFocus: {},
+  controlProps: {
+    control: false
+  },
+  checkBoxProps: {
+    control: false
+  }
+}, _statusProp.statusArgTypes), _ariaAttributes.ariaAttributeBaseArgTypes);

package/lib/cjs/components/CheckboxFieldGroup/index.d.ts

@@ -0,0 +1,3 @@
+export { default as CheckboxFieldGroup } from './CheckboxFieldGroup';
+export { default } from './CheckboxFieldGroup';
+export { default as CheckboxFieldGroupItem } from './CheckboxFieldGroupItem';

package/lib/cjs/components/CheckboxFieldGroup/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+_Object$defineProperty(exports, "CheckboxFieldGroup", {
+  enumerable: true,
+  get: function get() {
+    return _CheckboxFieldGroup["default"];
+  }
+});
+_Object$defineProperty(exports, "CheckboxFieldGroupItem", {
+  enumerable: true,
+  get: function get() {
+    return _CheckboxFieldGroupItem["default"];
+  }
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _CheckboxFieldGroup["default"];
+  }
+});
+var _CheckboxFieldGroup = _interopRequireDefault(require("./CheckboxFieldGroup"));
+var _CheckboxFieldGroupItem = _interopRequireDefault(require("./CheckboxFieldGroupItem"));

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

@@ -31,7 +31,7 @@ var _useGetTheme = _interopRequireDefault(require("../../hooks/useGetTheme"));
 var _codeView = _interopRequireDefault(require("../../styles/themes/next-gen/codeView/codeView"));
 var _CodeView = _interopRequireDefault(require("./CodeView.styles"));
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "hasLineNumbers", "hasNoCopyButton", "language", "textToCopy", "Prism", "stylesProp", "iconButtonProps", "variant"],
+var _excluded = ["children", "className", "hasLineNumbers", "hasNoCopyButton", "language", "textToCopy", "Prism", "stylesProp", "iconButtonProps", "slots", "variant"],
   _excluded2 = ["key"],
   _excluded3 = ["key"];
 /* istanbul ignore next */
@@ -49,6 +49,7 @@ var CodeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     customPrism = props.Prism,
     stylesProp = props.stylesProp,
     iconButtonProps = props.iconButtonProps,
+    slots = props.slots,
     _props$variant = props.variant,
     variant = _props$variant === void 0 ? 'default' : _props$variant,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
@@ -149,7 +150,7 @@ var CodeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       mb: "0",
       mr: "sm",
       py: "sm"
-    }, typeof language === 'string' ? language.toUpperCase() : ''), (0, _react2.jsx)(_.CopyText, {
+    }, typeof language === 'string' ? language.toUpperCase() : ''), slots === null || slots === void 0 ? void 0 : slots.controlBar, !hasNoCopyButton && (0, _react2.jsx)(_.CopyText, {
       ref: ref,
       mode: "rightText",
       textToCopy: textToCopy || children,

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

@@ -5,10 +5,11 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithLineNumbers = exports.WithCustomSize = exports.WithCustomLanguage = exports.WithChangedCopiedValue = exports.WithAdditionalLanguage = exports.Light = exports.Default = void 0;
+exports["default"] = exports.WithSlots = exports.WithLineNumbers = exports.WithCustomSize = exports.WithCustomLanguage = exports.WithChangedCopiedValue = exports.WithAdditionalLanguage = exports.Light = exports.Default = void 0;
 var _trim = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/trim"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _DotsHorizontalIcon = _interopRequireDefault(require("@pingux/mdi-react/DotsHorizontalIcon"));
 var _prismjs = _interopRequireDefault(require("prismjs"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
@@ -30,6 +31,15 @@ var _default = exports["default"] = {
     },
     Prism: {
       control: 'none'
+    },
+    slots: {
+      control: false,
+      description: 'Optional slots. `controlBar` renders custom controls between the language label and copy button in the Onyx header.',
+      table: {
+        type: {
+          summary: '{ controlBar?: React.ReactNode }'
+        }
+      }
     }
   },
   args: {
@@ -76,6 +86,39 @@ Default.parameters = {
     }
   }
 };
+var WithSlots = exports.WithSlots = function WithSlots() {
+  return (0, _react2.jsx)(_index.CodeView, {
+    language: "json",
+    slots: {
+      controlBar: (0, _react2.jsx)(_index.IconButton, {
+        "aria-label": "Open code actions",
+        title: "Open code actions",
+        sx: {
+          width: 'fit-content',
+          flexShrink: 0
+        }
+      }, (0, _react2.jsx)(_index.Icon, {
+        icon: _DotsHorizontalIcon["default"],
+        title: {
+          name: 'Code actions'
+        }
+      }))
+    }
+  }, code);
+};
+WithSlots.parameters = {
+  docs: {
+    storyDescription: 'Adds an accessible custom control between the language label and the copy button in the Onyx header through slots.controlBar.'
+  },
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
 var WithLineNumbers = exports.WithLineNumbers = function WithLineNumbers(args) {
   return (0, _react2.jsx)(_index.CodeView, (0, _extends2["default"])({}, args, {
     hasLineNumbers: true

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

@@ -21,12 +21,16 @@ var _reverseInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/in
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
 var _trim = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/trim"));
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+var _fill = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/fill"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 var _ = require("../..");
+var _codeView = require("../../styles/themes/next-gen/codeView/codeView");
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
 var _react2 = require("@emotion/react");
@@ -51,6 +55,20 @@ var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react2.jsx)(_.CodeView, (0, _extends2["default"])({}, defaultProps, props), 'children' in props ? props.children : textValue));
 };
+var getOnyxComponent = function getOnyxComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_.AstroProvider, {
+    theme: _.OnyxTheme
+  }, (0, _react2.jsx)(_.CodeView, (0, _extends2["default"])({}, defaultProps, props), 'children' in props ? props.children : textValue)));
+};
+var getOnyxStyledComponent = function getOnyxStyledComponent(theme, variant) {
+  return (0, _testWrapper.render)((0, _react2.jsx)(_.AstroProvider, {
+    theme: theme
+  }, (0, _react2.jsx)(_.CodeView, (0, _extends2["default"])({}, defaultProps, {
+    language: "json",
+    variant: variant
+  }), "const value = 1;")));
+};
 beforeEach(function () {
   var mockClipboard = {
     writeText: jest.fn()
@@ -271,6 +289,72 @@ test('isOnyx prop renders CodeView component with next-gen theme', function () {
   expect(codeViewElement).toBeInTheDocument();
   expect(codeViewElement).toHaveClass('language-json');
 });
+test.each(['default', 'light'])('renders the Onyx control-bar slot before the copy button for the %s variant', function (variant) {
+  getOnyxComponent({
+    children: 'const value = 1;',
+    language: 'json',
+    variant: variant,
+    slots: {
+      controlBar: (0, _react2.jsx)("button", {
+        type: "button"
+      }, "Control bar")
+    }
+  });
+  var languageLabel = _testWrapper.screen.getByText('JSON', {
+    exact: true
+  });
+  var controlBar = _testWrapper.screen.getByRole('button', {
+    name: 'Control bar'
+  });
+  var copyControl = _testWrapper.screen.getByRole('button', {
+    name: 'copy to clipboard'
+  });
+  var documentOrder = (0, _from["default"])(document.querySelectorAll('*'));
+  expect((0, _indexOf["default"])(documentOrder).call(documentOrder, languageLabel)).toBeLessThan((0, _indexOf["default"])(documentOrder).call(documentOrder, controlBar));
+  expect((0, _indexOf["default"])(documentOrder).call(documentOrder, controlBar)).toBeLessThan((0, _indexOf["default"])(documentOrder).call(documentOrder, copyControl));
+});
+test.each(['default', 'light'])('does not render an Onyx control-bar slot when omitted for the %s variant', function (variant) {
+  getOnyxComponent({
+    children: 'const value = 1;',
+    language: 'json',
+    variant: variant
+  });
+  expect(_testWrapper.screen.getByText('JSON', {
+    exact: true
+  })).toBeInTheDocument();
+  expect(_testWrapper.screen.getByRole('button', {
+    name: 'copy to clipboard'
+  })).toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('button', {
+    name: 'Control bar'
+  })).not.toBeInTheDocument();
+});
+test.each(['default', 'light'])('honors hasNoCopyButton in the Onyx header for the %s variant', function (variant) {
+  getOnyxComponent({
+    children: 'const value = 1;',
+    language: 'json',
+    variant: variant,
+    hasNoCopyButton: true
+  });
+  expect(_testWrapper.screen.getByText('JSON', {
+    exact: true
+  })).toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('button', {
+    name: 'copy to clipboard'
+  })).not.toBeInTheDocument();
+});
+test('uses the intended Onyx color tokens for CodeView copy-button variants', function () {
+  expect((0, _fill["default"])(_codeView.copyButton["default"].path)).toBe('white');
+  expect((0, _fill["default"])(_codeView.copyButton.light.path)).toBe('black');
+});
+test.each([['NEXT_GEN', _.NextGenTheme, 'default', '#ffffff'], ['NEXT_GEN', _.NextGenTheme, 'light', '#000'], ['NEXT_GEN_DARK', _.NextGenDarkTheme, 'default', '#ffffff'], ['NEXT_GEN_DARK', _.NextGenDarkTheme, 'light', '#000']])('renders the intended copy-icon path for %s %s CodeView', function (_themeName, theme, variant, fill) {
+  getOnyxStyledComponent(theme, variant);
+  expect(_testWrapper.screen.getByRole('button', {
+    name: 'copy to clipboard'
+  })).toHaveStyleRule('fill', fill, {
+    target: 'path'
+  });
+});
 test('if textToCopy is provided it\'s copied to clipboard instead of children text data', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee9() {
   var textToCopy, button;
   return _regeneratorRuntime().wrap(function _callee9$(_context9) {

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

@@ -23,7 +23,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithoutStatusIndicator = exports.WithSections = exports.WithCustomInputValue = exports.WithCustomHeight = exports.Required = exports.ReadOnly = exports.HelperText = exports.FocusMenuTrigger = exports.DisabledKeys = exports.Disabled = exports.Default = exports.CustomDefaultFilter = exports.ControlledWithCustomValue = exports.ControlledWithAddOption = exports.ControlledSelection = exports.ControlledMenu = exports.ControlledInput = exports.ControlledFiltering = exports.AsyncLoading = exports.AllowCustomValue = void 0;
+exports["default"] = exports.WithoutStatusIndicator = exports.WithSections = exports.WithCustomInputValue = exports.WithCustomHeight = exports.Required = exports.ReadOnly = exports.HelperText = exports.FocusMenuTrigger = exports.DisabledKeys = exports.Disabled = exports.DefaultOpen = exports.Default = exports.CustomDefaultFilter = exports.ControlledWithCustomValue = exports.ControlledWithAddOption = exports.ControlledSelection = exports.ControlledMenu = exports.ControlledInput = exports.ControlledFiltering = exports.AsyncLoading = exports.AllowCustomValue = void 0;
 var _startsWith = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/starts-with"));
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
@@ -225,6 +225,23 @@ var Default = exports.Default = function Default(args) {
     }, item.name);
   }));
 };
+var DefaultOpen = exports.DefaultOpen = function DefaultOpen() {
+  var inputRef = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    var _inputRef$current;
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+  }, []);
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.ComboBoxField, (0, _extends2["default"])({}, actions, {
+    label: "Example label",
+    defaultItems: items,
+    menuTrigger: "focus",
+    ref: inputRef
+  }), function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
 var WithSections = exports.WithSections = function WithSections(args) {
   return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.ComboBoxField, (0, _extends2["default"])({}, args, {
     label: "Example label",

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

@@ -29,7 +29,7 @@ var CopyButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     copyButtonSize = _useGetTheme.copyButtonSize,
     themeState = _useGetTheme.themeState;
   /* istanbul ignore next */
-  var themeVariant = !themeState.isOnyxDark ? 'copyButton' : "copyButton.".concat(variant);
+  var themeVariant = themeState.isOnyx ? "copyButton.".concat(variant) : 'copyButton';
   return (0, _react2.jsx)(_IconButton["default"], (0, _extends2["default"])({
     ref: ref,
     "aria-label": "copy to clipboard",
@@ -37,7 +37,6 @@ var CopyButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, others), (0, _react2.jsx)(_Icon["default"], (0, _extends2["default"])({
     icon: _ContentCopyIcon["default"],
     size: copyButtonSize,
-    color: "text.secondary",
     title: {
       name: 'Content Copy Icon'
     }

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

@@ -120,7 +120,7 @@ test('renders DatePicker component', /*#__PURE__*/(0, _asyncToGenerator2["defaul
         expect(_testWrapper.screen.queryByTestId('popover-container')).toBeInTheDocument();
 
         // Ensure it is visibly hidden and not keyboard accessible
-        /* eslint-disable testing-library/no-node-access */
+
         expect(hiddenInput.closest("[style=\"".concat(hiddenStyling, "\"]"))).not.toBeNull();
         expect(hiddenInput).toHaveAttribute('tabindex', '-1');
       case 15:

package/lib/cjs/components/EmptyState/EmptyState.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { EmptyStateProps } from '../../types';
+declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
+export default EmptyState;

package/lib/cjs/components/EmptyState/EmptyState.js

@@ -0,0 +1,66 @@
+"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$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _ControlPointDuplicateIcon = _interopRequireDefault(require("@pingux/mdi-react/ControlPointDuplicateIcon"));
+var _ = require("../..");
+var _react2 = require("@emotion/react");
+var _excluded = ["icon", "heading", "description", "children", "buttonLabel", "onButtonPress", "buttonProps", "headerProps", "iconProps"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var displayName = 'EmptyState';
+var EmptyState = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$icon = props.icon,
+    icon = _props$icon === void 0 ? _ControlPointDuplicateIcon["default"] : _props$icon,
+    _props$heading = props.heading,
+    heading = _props$heading === void 0 ? 'No items exist' : _props$heading,
+    description = props.description,
+    children = props.children,
+    buttonLabel = props.buttonLabel,
+    onButtonPress = props.onButtonPress,
+    buttonProps = props.buttonProps,
+    headerProps = props.headerProps,
+    iconProps = props.iconProps,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    ref: ref,
+    variant: "emptyState.container"
+  }, others), (0, _react2.jsx)(_.Icon, (0, _extends2["default"])({
+    icon: icon,
+    size: "icon-600",
+    title: {
+      name: 'Empty state icon'
+    },
+    sx: {
+      color: 'font-light',
+      opacity: '20%'
+    }
+  }, iconProps)), (0, _react2.jsx)(_.Text, (0, _extends2["default"])({
+    as: "h4",
+    variant: "h4"
+  }, headerProps), heading), description && (0, _react2.jsx)(_.Text, null, description), children || buttonLabel && onButtonPress && (0, _react2.jsx)(_.Button, (0, _extends2["default"])({
+    variant: "primaryWithIcon",
+    onPress: onButtonPress,
+    sx: {
+      mt: 'md'
+    }
+  }, buttonProps), (0, _react2.jsx)(_.Icon, {
+    icon: "add",
+    size: "sm",
+    title: {
+      name: 'Plus Icon'
+    },
+    mr: "sm"
+  }), buttonLabel));
+});
+EmptyState.displayName = displayName;
+var _default = exports["default"] = EmptyState;

package/lib/cjs/components/EmptyState/EmptyState.mdx

@@ -0,0 +1,44 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import * as EmptyStateStories from './EmptyState.stories';
+
+<Meta of={EmptyStateStories} isTemplate />
+
+# EmptyState
+
+`EmptyState` communicates when a list, table, or other region has no content to
+show. It supports two usage modes, selected purely by which props are supplied:
+
+- **No results** (a search or filter returned nothing): icon + heading +
+  optional description, no call to action.
+- **Genuinely empty** (no items exist yet): icon + heading + optional
+  description + a call-to-action button, rendered only when both `buttonLabel`
+  and `onButtonPress` are supplied.
+
+Both modes are also the default empty state of `ListView` in the Onyx theme.
+The legacy Astro theme's `ListView` continues to render nothing when empty.
+
+### Required Components
+
+This component can be used independently and does not require additional components.
+
+### Overriding the built-ins
+
+- Pass `icon` (an MDI component or Material Symbol string) to replace the default icon.
+- Pass `children` to replace the built-in call-to-action button with any custom node.
+- `iconProps`, `headerProps`, and `buttonProps` are spread onto the underlying `Icon`,
+  heading `Text`, and `Button` after the defaults, so consumer props win. Note that a
+  consumer-supplied `sx` replaces (rather than merges with) the built-in `sx`.
+
+### Accessibility
+
+#### Keyboard Navigation
+
+| Keys | Functions |
+| ---- | --------- |
+| Tab | Moves focus to the call-to-action button, when rendered, following the page tab sequence. |
+
+#### Screen Readers
+
+- The icon is decorative by default and carries an accessible title ("Empty state icon").
+- The heading renders as an `h4` heading element.
+- The call-to-action button is a standard focusable button announced by its label.

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

@@ -0,0 +1,88 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithDescription = exports.WithButton = exports.Default = exports.Customization = 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 _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _ = require("../..");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
+var _EmptyState = _interopRequireDefault(require("./EmptyState.mdx"));
+var _emptyStateAttributes = require("./emptyStateAttributes");
+var _react2 = require("@emotion/react");
+var _FIGMA_LINKS$emptySta;
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _default = exports["default"] = {
+  title: 'Components/EmptyState',
+  component: _.EmptyState,
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_EmptyState["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      }
+    }
+  },
+  argTypes: _objectSpread({}, _emptyStateAttributes.emptyStateArgTypes)
+};
+var Default = exports.Default = function Default(args) {
+  return (0, _react2.jsx)(_.EmptyState, args);
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: (_FIGMA_LINKS$emptySta = _figmaLinks.FIGMA_LINKS.emptyState) === null || _FIGMA_LINKS$emptySta === void 0 ? void 0 : _FIGMA_LINKS$emptySta["default"]
+  }
+};
+var WithDescription = exports.WithDescription = function WithDescription(args) {
+  return (0, _react2.jsx)(_.EmptyState, (0, _extends2["default"])({
+    heading: "No users found",
+    description: "Try a different name, username, or email address."
+  }, args));
+};
+var WithButton = exports.WithButton = function WithButton(args) {
+  return (0, _react2.jsx)(_.EmptyState, (0, _extends2["default"])({
+    heading: "No users yet",
+    description: "Add your first user to start managing identities in this environment.",
+    buttonLabel: "New User",
+    onButtonPress: function onButtonPress() {
+      return jest.fn()();
+    }
+  }, args));
+};
+var Customization = exports.Customization = function Customization() {
+  return (0, _react2.jsx)(_.Box, {
+    isRow: false,
+    gap: "xl"
+  }, (0, _react2.jsx)(_.EmptyState, {
+    heading: "No items exist"
+  }), (0, _react2.jsx)(_.EmptyState, {
+    heading: "No results found",
+    description: "Try a different query.",
+    iconProps: {
+      icon: 'person_add'
+    }
+  }), (0, _react2.jsx)(_.EmptyState, {
+    heading: "No users yet",
+    description: "Add your first user to start managing identities in this environment.",
+    buttonLabel: "New User",
+    onButtonPress: function onButtonPress() {
+      return jest.fn()();
+    },
+    iconProps: {
+      icon: 'search_off'
+    }
+  }));
+};

package/lib/cjs/components/EmptyState/EmptyState.styles.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    container: {
+        flexDirection: string;
+        alignItems: string;
+        justifyContent: string;
+        height: string;
+        width: string;
+        gap: string;
+        py: string;
+        textAlign: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,22 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var container = {
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  // Fill the parent (e.g. the ListView placeholder wrapper) so the content
+  // centers vertically. Falls back to auto height when the parent has none.
+  height: '100%',
+  width: '100%',
+  gap: 'sm',
+  py: 'lg',
+  textAlign: 'center'
+};
+var _default = exports["default"] = {
+  container: container
+};