@pingux/astro 2.138.0 → 2.139.0-alpha.1

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

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

package/lib/cjs/components/ServerErrorBoundary/ServerErrorBoundary.js

@@ -0,0 +1,67 @@
+"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 _AlertCircleIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertCircleIcon"));
+var _index = require("../../index");
+var _react2 = require("@emotion/react");
+var _excluded = ["hasServerError", "children", "renderElement", "iconProps", "text", "buttonProps"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var ServerErrorBoundary = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var hasServerError = props.hasServerError,
+    children = props.children,
+    renderElement = props.renderElement,
+    iconProps = props.iconProps,
+    text = props.text,
+    buttonProps = props.buttonProps,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var handleReload = function handleReload() {
+    window.location.reload();
+  };
+  if (!hasServerError) {
+    return (0, _react2.jsx)(_index.Box, null, children);
+  }
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    ref: ref,
+    variant: "serverErrorBoundary.base",
+    isRow: true,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "xs"
+  }, others), renderElement || (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
+    icon: _AlertCircleIcon["default"],
+    size: "xs",
+    color: "neutral.40",
+    title: {
+      name: 'Alert Circle Icon'
+    }
+  }, iconProps)), (0, _react2.jsx)(_index.Text, {
+    alignItems: "center",
+    display: "flex"
+  }, text, "\xA0", (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
+    variant: "link",
+    onPress: handleReload,
+    p: "0"
+  }, buttonProps), buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.children))));
+});
+ServerErrorBoundary.defaultProps = {
+  hasServerError: true,
+  text: 'There was a problem loading this page.',
+  buttonProps: {
+    children: 'Reload'
+  }
+};
+ServerErrorBoundary.displayName = 'ServerErrorBoundary';
+var _default = ServerErrorBoundary;
+exports["default"] = _default;

package/lib/cjs/components/ServerErrorBoundary/ServerErrorBoundary.mdx

@@ -0,0 +1,24 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Components/ServerErrorBoundary/ServerErrorBoundary" />
+
+# ServerErrorBoundary
+
+The ServerErrorBoundary component is used to display fallback error messages with reload link.
+
+### Required Components
+
+This component can be used independently and does not require additional components.
+
+### Accessibility
+
+This component should adhere to the [WAI-ARIA Button](https://www.w3.org/TR/wai-aria-practices-1.1/examples/button/button.html) accessibility guidelines.
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component.
+
+| Keys           | Functions                                             |
+| -------------- | ----------------------------------------------------- |
+| Space or Enter | Selects the button.                                   |
+| Tab            | Focuses the button and follows the page tab sequence. |

package/lib/cjs/components/ServerErrorBoundary/ServerErrorBoundary.stories.d.ts

@@ -0,0 +1,7 @@
+import { StoryFn } from '@storybook/react';
+import { ServerErrorBoundaryProps } from '../../types';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: StoryFn<ServerErrorBoundaryProps>;
+export declare const CustomMessageAndIcon: StoryFn<ServerErrorBoundaryProps>;
+export declare const CustomErrorElement: StoryFn<ServerErrorBoundaryProps>;

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

@@ -0,0 +1,88 @@
+"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
+});
+exports["default"] = exports.Default = exports.CustomMessageAndIcon = exports.CustomErrorElement = void 0;
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _AlertCircleOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertCircleOutlineIcon"));
+var _storybookAddonDesigns = require("storybook-addon-designs");
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _index = require("../../index");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
+var _ServerErrorBoundary = _interopRequireDefault(require("./ServerErrorBoundary.mdx"));
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Components/ServerErrorBoundary',
+  component: _index.ServerErrorBoundary,
+  decorators: [_storybookAddonDesigns.withDesign],
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_ServerErrorBoundary["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      }
+    }
+  },
+  args: {
+    hasServerError: true
+  }
+};
+exports["default"] = _default;
+var Default = function Default(_ref) {
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
+  return (0, _react2.jsx)(_index.ServerErrorBoundary, args, (0, _react2.jsx)(_index.Box, {
+    width: "400px"
+  }, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet")));
+};
+exports.Default = Default;
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.ServerErrorBoundary["default"]
+  }
+};
+var CustomMessageAndIcon = function CustomMessageAndIcon(_ref2) {
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref2), _ref2));
+  var handleReload = function handleReload() {
+    window.location.reload();
+  };
+  return (0, _react2.jsx)(_index.ServerErrorBoundary, (0, _extends2["default"])({}, args, {
+    iconProps: {
+      icon: _AlertCircleOutlineIcon["default"],
+      title: {
+        name: 'Alert Outline Circle Icon'
+      }
+    },
+    text: "Loading Problem.",
+    buttonProps: {
+      onPress: handleReload,
+      children: 'Reload'
+    }
+  }), (0, _react2.jsx)(_index.Box, {
+    width: "400px"
+  }, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet")));
+};
+exports.CustomMessageAndIcon = CustomMessageAndIcon;
+var CustomErrorElement = function CustomErrorElement(_ref3) {
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref3), _ref3));
+  var handleReload = function handleReload() {
+    window.location.reload();
+  };
+  return (0, _react2.jsx)(_index.ServerErrorBoundary, (0, _extends2["default"])({}, args, {
+    renderElement: (0, _react2.jsx)(_index.Text, {
+      display: "flex",
+      alignItems: "center"
+    }, "Lorem ipsum dolor sit amet.\xA0", (0, _react2.jsx)(_index.Button, {
+      variant: "link",
+      onPress: handleReload,
+      p: "0"
+    }, "Reload"))
+  }), (0, _react2.jsx)(_index.Box, {
+    width: "400px"
+  }, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet")));
+};
+exports.CustomErrorElement = CustomErrorElement;

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

@@ -0,0 +1,9 @@
+declare const _default: {
+    base: {
+        color: string;
+        a: {
+            cursor: string;
+        };
+    };
+};
+export default _default;

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

@@ -0,0 +1,17 @@
+"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 base = {
+  color: 'neutral.40',
+  'a': {
+    cursor: 'pointer'
+  }
+};
+var _default = {
+  base: base
+};
+exports["default"] = _default;

package/lib/cjs/components/ServerErrorBoundary/ServerErrorBoundary.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,106 @@
+"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$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _AlertCircleOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertCircleOutlineIcon"));
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
+var _Text = _interopRequireDefault(require("../Text/Text"));
+var _ = _interopRequireDefault(require("."));
+var _react2 = require("@emotion/react");
+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, _defineProperty3["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty2(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var testId = 'test-ServerErrorBoundary';
+var serverErrorBoundaryBody = 'Lorem ipsum dolor sit amet';
+var defaultProps = {
+  'data-testid': testId,
+  hasServerError: true
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props), serverErrorBoundaryBody));
+};
+
+// Needs to be added to each components test file
+(0, _universalComponentTest.universalComponentTests)({
+  renderComponent: function renderComponent(props) {
+    return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_Text["default"], null, serverErrorBoundaryBody));
+  }
+});
+describe('ServerErrorBoundary component', function () {
+  var mockReload = jest.fn();
+  var originalLocation = window.location;
+  beforeAll(function () {
+    (0, _defineProperty2["default"])(window, 'location', {
+      value: _objectSpread(_objectSpread({}, window.location), {}, {
+        reload: mockReload
+      }),
+      writable: true
+    });
+  });
+  afterAll(function () {
+    // ✅ Restore the original location object
+    window.location = originalLocation;
+  });
+  test('renders default ServerErrorBoundary component', function () {
+    getComponent();
+    _testWrapper.screen.getByRole('img', {
+      name: /alert circle icon/i
+    });
+    _testWrapper.screen.getByText(/there was a problem loading this page\./i);
+    var reloadButton = _testWrapper.screen.getByRole('button', {
+      name: /reload/i
+    });
+    _userEvent["default"].click(reloadButton);
+    expect(mockReload).toHaveBeenCalled();
+  });
+  test('renders with hasServerError as false', function () {
+    getComponent({
+      hasServerError: false
+    });
+    _testWrapper.screen.getByText(serverErrorBoundaryBody);
+    expect(_testWrapper.screen.queryByRole('button', {
+      name: /reload/i
+    })).not.toBeInTheDocument();
+  });
+  test('renders with custom icon', function () {
+    getComponent({
+      iconProps: {
+        icon: _AlertCircleOutlineIcon["default"],
+        title: {
+          name: 'Alert Outline Circle Icon'
+        }
+      }
+    });
+    _testWrapper.screen.getByRole('img', {
+      name: /alert outline circle icon/i
+    });
+  });
+  test('renders with custom text and link properties', function () {
+    var mockOnReload = jest.fn();
+    getComponent({
+      text: 'Loading Problem',
+      buttonProps: {
+        onPress: mockOnReload,
+        children: 'Reload'
+      }
+    });
+    _testWrapper.screen.getByText(/loading problem/i);
+    _userEvent["default"].click(_testWrapper.screen.getByRole('button', {
+      name: /reload/i
+    }));
+    expect(mockOnReload).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1 @@
+export { default } from './ServerErrorBoundary';

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

@@ -0,0 +1,14 @@
+"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, "default", {
+  enumerable: true,
+  get: function get() {
+    return _ServerErrorBoundary["default"];
+  }
+});
+var _ServerErrorBoundary = _interopRequireDefault(require("./ServerErrorBoundary"));

package/lib/cjs/index.d.ts

@@ -173,6 +173,8 @@ export { default as SelectField } from './components/SelectField';
 export * from './components/SelectField';
 export { default as Separator } from './components/Separator';
 export * from './components/Separator';
+export { default as ServerErrorBoundary } from './components/ServerErrorBoundary';
+export * from './components/ServerErrorBoundary';
 export { default as Skeleton } from './components/Skeleton';
 export * from './components/Skeleton';
 export { default as SliderField } from './components/SliderField/SliderField';

package/lib/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62, _context63, _context64, _context65, _context66, _context67, _context68, _context69, _context70, _context71, _context72, _context73, _context74, _context75, _context76, _context77, _context78, _context79, _context80, _context81, _context82, _context83;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62, _context63, _context64, _context65, _context66, _context67, _context68, _context69, _context70, _context71, _context72, _context73, _context74, _context75, _context76, _context77, _context78, _context79, _context80, _context81, _context82, _context83, _context84;
 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");
@@ -127,6 +127,7 @@ var _exportNames = {
   SearchField: true,
   SelectField: true,
   Separator: true,
+  ServerErrorBoundary: true,
   Skeleton: true,
   SliderField: true,
   StatusIcon: true,
@@ -936,6 +937,12 @@ _Object$defineProperty(exports, "Separator", {
     return _Separator["default"];
   }
 });
+_Object$defineProperty(exports, "ServerErrorBoundary", {
+  enumerable: true,
+  get: function get() {
+    return _ServerErrorBoundary["default"];
+  }
+});
 _Object$defineProperty(exports, "Skeleton", {
   enumerable: true,
   get: function get() {
@@ -1923,8 +1930,20 @@ _forEachInstanceProperty(_context61 = _Object$keys(_Separator)).call(_context61,
     }
   });
 });
+var _ServerErrorBoundary = _interopRequireWildcard(require("./components/ServerErrorBoundary"));
+_forEachInstanceProperty(_context62 = _Object$keys(_ServerErrorBoundary)).call(_context62, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ServerErrorBoundary[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ServerErrorBoundary[key];
+    }
+  });
+});
 var _Skeleton = _interopRequireWildcard(require("./components/Skeleton"));
-_forEachInstanceProperty(_context62 = _Object$keys(_Skeleton)).call(_context62, function (key) {
+_forEachInstanceProperty(_context63 = _Object$keys(_Skeleton)).call(_context63, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Skeleton[key]) return;
@@ -1937,7 +1956,7 @@ _forEachInstanceProperty(_context62 = _Object$keys(_Skeleton)).call(_context62,
 });
 var _SliderField = _interopRequireDefault(require("./components/SliderField/SliderField"));
 var _StatusIcon = _interopRequireWildcard(require("./components/StatusIcon"));
-_forEachInstanceProperty(_context63 = _Object$keys(_StatusIcon)).call(_context63, function (key) {
+_forEachInstanceProperty(_context64 = _Object$keys(_StatusIcon)).call(_context64, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _StatusIcon[key]) return;
@@ -1949,7 +1968,7 @@ _forEachInstanceProperty(_context63 = _Object$keys(_StatusIcon)).call(_context63
   });
 });
 var _Stepper = _interopRequireWildcard(require("./components/Stepper"));
-_forEachInstanceProperty(_context64 = _Object$keys(_Stepper)).call(_context64, function (key) {
+_forEachInstanceProperty(_context65 = _Object$keys(_Stepper)).call(_context65, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Stepper[key]) return;
@@ -1961,7 +1980,7 @@ _forEachInstanceProperty(_context64 = _Object$keys(_Stepper)).call(_context64, f
   });
 });
 var _Switch = _interopRequireWildcard(require("./components/Switch"));
-_forEachInstanceProperty(_context65 = _Object$keys(_Switch)).call(_context65, function (key) {
+_forEachInstanceProperty(_context66 = _Object$keys(_Switch)).call(_context66, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Switch[key]) return;
@@ -1973,7 +1992,7 @@ _forEachInstanceProperty(_context65 = _Object$keys(_Switch)).call(_context65, fu
   });
 });
 var _SwitchField = _interopRequireWildcard(require("./components/SwitchField"));
-_forEachInstanceProperty(_context66 = _Object$keys(_SwitchField)).call(_context66, function (key) {
+_forEachInstanceProperty(_context67 = _Object$keys(_SwitchField)).call(_context67, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _SwitchField[key]) return;
@@ -1985,7 +2004,7 @@ _forEachInstanceProperty(_context66 = _Object$keys(_SwitchField)).call(_context6
   });
 });
 var _Tab = _interopRequireWildcard(require("./components/Tab"));
-_forEachInstanceProperty(_context67 = _Object$keys(_Tab)).call(_context67, function (key) {
+_forEachInstanceProperty(_context68 = _Object$keys(_Tab)).call(_context68, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Tab[key]) return;
@@ -1997,7 +2016,7 @@ _forEachInstanceProperty(_context67 = _Object$keys(_Tab)).call(_context67, funct
   });
 });
 var _Table = _interopRequireWildcard(require("./components/Table"));
-_forEachInstanceProperty(_context68 = _Object$keys(_Table)).call(_context68, function (key) {
+_forEachInstanceProperty(_context69 = _Object$keys(_Table)).call(_context69, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Table[key]) return;
@@ -2009,7 +2028,7 @@ _forEachInstanceProperty(_context68 = _Object$keys(_Table)).call(_context68, fun
   });
 });
 var _TableBase = _interopRequireWildcard(require("./components/TableBase"));
-_forEachInstanceProperty(_context69 = _Object$keys(_TableBase)).call(_context69, function (key) {
+_forEachInstanceProperty(_context70 = _Object$keys(_TableBase)).call(_context70, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TableBase[key]) return;
@@ -2021,7 +2040,7 @@ _forEachInstanceProperty(_context69 = _Object$keys(_TableBase)).call(_context69,
   });
 });
 var _TableBody = _interopRequireWildcard(require("./components/TableBody"));
-_forEachInstanceProperty(_context70 = _Object$keys(_TableBody)).call(_context70, function (key) {
+_forEachInstanceProperty(_context71 = _Object$keys(_TableBody)).call(_context71, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TableBody[key]) return;
@@ -2033,7 +2052,7 @@ _forEachInstanceProperty(_context70 = _Object$keys(_TableBody)).call(_context70,
   });
 });
 var _TableCaption = _interopRequireWildcard(require("./components/TableCaption"));
-_forEachInstanceProperty(_context71 = _Object$keys(_TableCaption)).call(_context71, function (key) {
+_forEachInstanceProperty(_context72 = _Object$keys(_TableCaption)).call(_context72, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TableCaption[key]) return;
@@ -2045,7 +2064,7 @@ _forEachInstanceProperty(_context71 = _Object$keys(_TableCaption)).call(_context
   });
 });
 var _TableCell = _interopRequireWildcard(require("./components/TableCell"));
-_forEachInstanceProperty(_context72 = _Object$keys(_TableCell)).call(_context72, function (key) {
+_forEachInstanceProperty(_context73 = _Object$keys(_TableCell)).call(_context73, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TableCell[key]) return;
@@ -2057,7 +2076,7 @@ _forEachInstanceProperty(_context72 = _Object$keys(_TableCell)).call(_context72,
   });
 });
 var _TableHead = _interopRequireWildcard(require("./components/TableHead"));
-_forEachInstanceProperty(_context73 = _Object$keys(_TableHead)).call(_context73, function (key) {
+_forEachInstanceProperty(_context74 = _Object$keys(_TableHead)).call(_context74, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TableHead[key]) return;
@@ -2069,7 +2088,7 @@ _forEachInstanceProperty(_context73 = _Object$keys(_TableHead)).call(_context73,
   });
 });
 var _TableRow = _interopRequireWildcard(require("./components/TableRow"));
-_forEachInstanceProperty(_context74 = _Object$keys(_TableRow)).call(_context74, function (key) {
+_forEachInstanceProperty(_context75 = _Object$keys(_TableRow)).call(_context75, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TableRow[key]) return;
@@ -2081,7 +2100,7 @@ _forEachInstanceProperty(_context74 = _Object$keys(_TableRow)).call(_context74,
   });
 });
 var _Tabs = _interopRequireWildcard(require("./components/Tabs"));
-_forEachInstanceProperty(_context75 = _Object$keys(_Tabs)).call(_context75, function (key) {
+_forEachInstanceProperty(_context76 = _Object$keys(_Tabs)).call(_context76, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Tabs[key]) return;
@@ -2093,7 +2112,7 @@ _forEachInstanceProperty(_context75 = _Object$keys(_Tabs)).call(_context75, func
   });
 });
 var _Text = _interopRequireWildcard(require("./components/Text"));
-_forEachInstanceProperty(_context76 = _Object$keys(_Text)).call(_context76, function (key) {
+_forEachInstanceProperty(_context77 = _Object$keys(_Text)).call(_context77, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Text[key]) return;
@@ -2105,7 +2124,7 @@ _forEachInstanceProperty(_context76 = _Object$keys(_Text)).call(_context76, func
   });
 });
 var _TextArea = _interopRequireWildcard(require("./components/TextArea"));
-_forEachInstanceProperty(_context77 = _Object$keys(_TextArea)).call(_context77, function (key) {
+_forEachInstanceProperty(_context78 = _Object$keys(_TextArea)).call(_context78, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TextArea[key]) return;
@@ -2117,7 +2136,7 @@ _forEachInstanceProperty(_context77 = _Object$keys(_TextArea)).call(_context77,
   });
 });
 var _TextAreaField = _interopRequireWildcard(require("./components/TextAreaField"));
-_forEachInstanceProperty(_context78 = _Object$keys(_TextAreaField)).call(_context78, function (key) {
+_forEachInstanceProperty(_context79 = _Object$keys(_TextAreaField)).call(_context79, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TextAreaField[key]) return;
@@ -2129,7 +2148,7 @@ _forEachInstanceProperty(_context78 = _Object$keys(_TextAreaField)).call(_contex
   });
 });
 var _TextField = _interopRequireWildcard(require("./components/TextField"));
-_forEachInstanceProperty(_context79 = _Object$keys(_TextField)).call(_context79, function (key) {
+_forEachInstanceProperty(_context80 = _Object$keys(_TextField)).call(_context80, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TextField[key]) return;
@@ -2141,7 +2160,7 @@ _forEachInstanceProperty(_context79 = _Object$keys(_TextField)).call(_context79,
   });
 });
 var _TimeField = _interopRequireWildcard(require("./components/TimeField"));
-_forEachInstanceProperty(_context80 = _Object$keys(_TimeField)).call(_context80, function (key) {
+_forEachInstanceProperty(_context81 = _Object$keys(_TimeField)).call(_context81, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TimeField[key]) return;
@@ -2154,7 +2173,7 @@ _forEachInstanceProperty(_context80 = _Object$keys(_TimeField)).call(_context80,
 });
 var _TimeZonePicker = _interopRequireDefault(require("./components/TimeZonePicker"));
 var _TooltipTrigger = _interopRequireWildcard(require("./components/TooltipTrigger"));
-_forEachInstanceProperty(_context81 = _Object$keys(_TooltipTrigger)).call(_context81, function (key) {
+_forEachInstanceProperty(_context82 = _Object$keys(_TooltipTrigger)).call(_context82, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TooltipTrigger[key]) return;
@@ -2166,7 +2185,7 @@ _forEachInstanceProperty(_context81 = _Object$keys(_TooltipTrigger)).call(_conte
   });
 });
 var _TreeView = _interopRequireWildcard(require("./components/TreeView"));
-_forEachInstanceProperty(_context82 = _Object$keys(_TreeView)).call(_context82, function (key) {
+_forEachInstanceProperty(_context83 = _Object$keys(_TreeView)).call(_context83, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TreeView[key]) return;
@@ -2181,7 +2200,7 @@ var _PaginationContext = require("./context/PaginationContext");
 var _nextGenDarkMode = _interopRequireDefault(require("./styles/themeOverrides/nextGenDarkMode"));
 var _nextGen = _interopRequireDefault(require("./styles/themes/next-gen"));
 var _types = require("./types");
-_forEachInstanceProperty(_context83 = _Object$keys(_types)).call(_context83, function (key) {
+_forEachInstanceProperty(_context84 = _Object$keys(_types)).call(_context84, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _types[key]) return;

package/lib/cjs/styles/themes/next-gen/convertedComponentList.js

@@ -5,7 +5,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.nextGenOnlyComponents = exports["default"] = exports.componentSpecificNextGenBlacklist = exports.astroBlacklistStory = void 0;
-var nextGenConvertedComponents = ['GridList', 'DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'RockerButtonGroup', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton', 'TooltipTrigger', 'ListViewItem', 'Pagination', 'StatusIcon', 'Callout', 'Table', 'TableBase', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField'];
+var nextGenConvertedComponents = ['GridList', 'DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'RockerButtonGroup', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton', 'TooltipTrigger', 'ListViewItem', 'Pagination', 'StatusIcon', 'Callout', 'Table', 'TableBase', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary'];
 var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Messages: ['Customization'],

package/lib/cjs/styles/variants/variants.js

@@ -57,6 +57,7 @@ var _RangeCalendar = _interopRequireDefault(require("../../components/RangeCalen
 var _RockerButton = _interopRequireDefault(require("../../components/RockerButton/RockerButton.styles"));
 var _ScrollBox = _interopRequireDefault(require("../../components/ScrollBox/ScrollBox.styles"));
 var _Separator = _interopRequireDefault(require("../../components/Separator/Separator.styles"));
+var _ServerErrorBoundary = _interopRequireDefault(require("../../components/ServerErrorBoundary/ServerErrorBoundary.styles"));
 var _Skeleton = _interopRequireDefault(require("../../components/Skeleton/Skeleton.styles"));
 var _Slider = _interopRequireDefault(require("../../components/SliderField/Slider.styles"));
 var _StatusIcon = _interopRequireDefault(require("../../components/StatusIcon/StatusIcon.styles"));
@@ -114,6 +115,7 @@ var _default = _objectSpread(_objectSpread({
   rockerButton: _RockerButton["default"],
   scrollBox: _ScrollBox["default"],
   separator: _Separator["default"],
+  serverErrorBoundary: _ServerErrorBoundary["default"],
   slider: _Slider["default"],
   stepper: _Stepper["default"],
   skeleton: _Skeleton["default"],

package/lib/cjs/types/ServerErrorBoundary.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { TestingAttributes } from './shared/test';
+import { StyleProps } from './shared';
+import { ButtonProps, IconProps } from '.';
+export interface ServerErrorBoundaryProps extends StyleProps, TestingAttributes {
+    hasServerError: boolean;
+    iconProps?: IconProps;
+    buttonProps?: ButtonProps;
+    text?: React.ReactNode;
+    children?: React.ReactNode;
+    renderElement?: React.ReactNode;
+}

package/lib/cjs/types/ServerErrorBoundary.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/index.d.ts

@@ -49,6 +49,7 @@ export * from './rockerButtonGroup';
 export * from './scrollBox';
 export * from './searchField';
 export * from './separator';
+export * from './ServerErrorBoundary';
 export * from './shared';
 export * from './skeleton';
 export * from './switchField';

package/lib/cjs/types/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62;
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
@@ -568,8 +568,19 @@ _forEachInstanceProperty(_context51 = _Object$keys(_separator)).call(_context51,
     }
   });
 });
+var _ServerErrorBoundary = require("./ServerErrorBoundary");
+_forEachInstanceProperty(_context52 = _Object$keys(_ServerErrorBoundary)).call(_context52, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ServerErrorBoundary[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ServerErrorBoundary[key];
+    }
+  });
+});
 var _shared = require("./shared");
-_forEachInstanceProperty(_context52 = _Object$keys(_shared)).call(_context52, function (key) {
+_forEachInstanceProperty(_context53 = _Object$keys(_shared)).call(_context53, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _shared[key]) return;
   _Object$defineProperty(exports, key, {
@@ -580,7 +591,7 @@ _forEachInstanceProperty(_context52 = _Object$keys(_shared)).call(_context52, fu
   });
 });
 var _skeleton = require("./skeleton");
-_forEachInstanceProperty(_context53 = _Object$keys(_skeleton)).call(_context53, function (key) {
+_forEachInstanceProperty(_context54 = _Object$keys(_skeleton)).call(_context54, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _skeleton[key]) return;
   _Object$defineProperty(exports, key, {
@@ -591,7 +602,7 @@ _forEachInstanceProperty(_context53 = _Object$keys(_skeleton)).call(_context53,
   });
 });
 var _switchField = require("./switchField");
-_forEachInstanceProperty(_context54 = _Object$keys(_switchField)).call(_context54, function (key) {
+_forEachInstanceProperty(_context55 = _Object$keys(_switchField)).call(_context55, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _switchField[key]) return;
   _Object$defineProperty(exports, key, {
@@ -602,7 +613,7 @@ _forEachInstanceProperty(_context54 = _Object$keys(_switchField)).call(_context5
   });
 });
 var _tab = require("./tab");
-_forEachInstanceProperty(_context55 = _Object$keys(_tab)).call(_context55, function (key) {
+_forEachInstanceProperty(_context56 = _Object$keys(_tab)).call(_context56, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tab[key]) return;
   _Object$defineProperty(exports, key, {
@@ -613,7 +624,7 @@ _forEachInstanceProperty(_context55 = _Object$keys(_tab)).call(_context55, funct
   });
 });
 var _table = require("./table");
-_forEachInstanceProperty(_context56 = _Object$keys(_table)).call(_context56, function (key) {
+_forEachInstanceProperty(_context57 = _Object$keys(_table)).call(_context57, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _table[key]) return;
   _Object$defineProperty(exports, key, {
@@ -624,7 +635,7 @@ _forEachInstanceProperty(_context56 = _Object$keys(_table)).call(_context56, fun
   });
 });
 var _tabs = require("./tabs");
-_forEachInstanceProperty(_context57 = _Object$keys(_tabs)).call(_context57, function (key) {
+_forEachInstanceProperty(_context58 = _Object$keys(_tabs)).call(_context58, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tabs[key]) return;
   _Object$defineProperty(exports, key, {
@@ -635,7 +646,7 @@ _forEachInstanceProperty(_context57 = _Object$keys(_tabs)).call(_context57, func
   });
 });
 var _text = require("./text");
-_forEachInstanceProperty(_context58 = _Object$keys(_text)).call(_context58, function (key) {
+_forEachInstanceProperty(_context59 = _Object$keys(_text)).call(_context59, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _text[key]) return;
   _Object$defineProperty(exports, key, {
@@ -646,7 +657,7 @@ _forEachInstanceProperty(_context58 = _Object$keys(_text)).call(_context58, func
   });
 });
 var _textField = require("./textField");
-_forEachInstanceProperty(_context59 = _Object$keys(_textField)).call(_context59, function (key) {
+_forEachInstanceProperty(_context60 = _Object$keys(_textField)).call(_context60, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _textField[key]) return;
   _Object$defineProperty(exports, key, {
@@ -657,7 +668,7 @@ _forEachInstanceProperty(_context59 = _Object$keys(_textField)).call(_context59,
   });
 });
 var _timefield = require("./timefield");
-_forEachInstanceProperty(_context60 = _Object$keys(_timefield)).call(_context60, function (key) {
+_forEachInstanceProperty(_context61 = _Object$keys(_timefield)).call(_context61, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _timefield[key]) return;
   _Object$defineProperty(exports, key, {
@@ -668,7 +679,7 @@ _forEachInstanceProperty(_context60 = _Object$keys(_timefield)).call(_context60,
   });
 });
 var _tooltipTrigger = require("./tooltipTrigger");
-_forEachInstanceProperty(_context61 = _Object$keys(_tooltipTrigger)).call(_context61, function (key) {
+_forEachInstanceProperty(_context62 = _Object$keys(_tooltipTrigger)).call(_context62, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tooltipTrigger[key]) return;
   _Object$defineProperty(exports, key, {

package/lib/cjs/utils/designUtils/figmaLinks.d.ts

@@ -177,6 +177,9 @@ export declare const FIGMA_LINKS: {
     separator: {
         default: string;
     };
+    ServerErrorBoundary: {
+        default: string;
+    };
     stepper: {
         default: string;
     };

package/lib/cjs/utils/designUtils/figmaLinks.js

@@ -184,6 +184,9 @@ var FIGMA_LINKS = {
   separator: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=8327-28092&t=8Wwd3tIBh3GEjCJB-0'
   },
+  ServerErrorBoundary: {
+    "default": 'https://www.figma.com/design/S1tRCG90PVgCJRCyDwxkBk/429-Error?node-id=9-941&m=dev'
+  },
   stepper: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=7523-27301&t=rLZVlRDdR1JhehkH-0'
   },

package/lib/components/ServerErrorBoundary/ServerErrorBoundary.js

@@ -0,0 +1,53 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["hasServerError", "children", "renderElement", "iconProps", "text", "buttonProps"];
+import React, { forwardRef } from 'react';
+import AlertCircleIcon from '@pingux/mdi-react/AlertCircleIcon';
+import { Box, Button, Icon, Text } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var ServerErrorBoundary = /*#__PURE__*/forwardRef(function (props, ref) {
+  var hasServerError = props.hasServerError,
+    children = props.children,
+    renderElement = props.renderElement,
+    iconProps = props.iconProps,
+    text = props.text,
+    buttonProps = props.buttonProps,
+    others = _objectWithoutProperties(props, _excluded);
+  var handleReload = function handleReload() {
+    window.location.reload();
+  };
+  if (!hasServerError) {
+    return ___EmotionJSX(Box, null, children);
+  }
+  return ___EmotionJSX(Box, _extends({
+    ref: ref,
+    variant: "serverErrorBoundary.base",
+    isRow: true,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "xs"
+  }, others), renderElement || ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Icon, _extends({
+    icon: AlertCircleIcon,
+    size: "xs",
+    color: "neutral.40",
+    title: {
+      name: 'Alert Circle Icon'
+    }
+  }, iconProps)), ___EmotionJSX(Text, {
+    alignItems: "center",
+    display: "flex"
+  }, text, "\xA0", ___EmotionJSX(Button, _extends({
+    variant: "link",
+    onPress: handleReload,
+    p: "0"
+  }, buttonProps), buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.children))));
+});
+ServerErrorBoundary.defaultProps = {
+  hasServerError: true,
+  text: 'There was a problem loading this page.',
+  buttonProps: {
+    children: 'Reload'
+  }
+};
+ServerErrorBoundary.displayName = 'ServerErrorBoundary';
+export default ServerErrorBoundary;

package/lib/components/ServerErrorBoundary/ServerErrorBoundary.mdx

@@ -0,0 +1,24 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Components/ServerErrorBoundary/ServerErrorBoundary" />
+
+# ServerErrorBoundary
+
+The ServerErrorBoundary component is used to display fallback error messages with reload link.
+
+### Required Components
+
+This component can be used independently and does not require additional components.
+
+### Accessibility
+
+This component should adhere to the [WAI-ARIA Button](https://www.w3.org/TR/wai-aria-practices-1.1/examples/button/button.html) accessibility guidelines.
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component.
+
+| Keys           | Functions                                             |
+| -------------- | ----------------------------------------------------- |
+| Space or Enter | Selects the button.                                   |
+| Tab            | Focuses the button and follows the page tab sequence. |

package/lib/components/ServerErrorBoundary/ServerErrorBoundary.stories.js

@@ -0,0 +1,76 @@
+import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import AlertCircleOutlineIcon from '@pingux/mdi-react/AlertCircleOutlineIcon';
+import { withDesign } from 'storybook-addon-designs';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { Box, Button, ServerErrorBoundary, Text } from '../../index';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
+import ServerErrorBoundaryReadme from './ServerErrorBoundary.mdx';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Components/ServerErrorBoundary',
+  component: ServerErrorBoundary,
+  decorators: [withDesign],
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ServerErrorBoundaryReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  },
+  args: {
+    hasServerError: true
+  }
+};
+export var Default = function Default(_ref) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  return ___EmotionJSX(ServerErrorBoundary, args, ___EmotionJSX(Box, {
+    width: "400px"
+  }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet")));
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.ServerErrorBoundary["default"]
+  }
+};
+export var CustomMessageAndIcon = function CustomMessageAndIcon(_ref2) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
+  var handleReload = function handleReload() {
+    window.location.reload();
+  };
+  return ___EmotionJSX(ServerErrorBoundary, _extends({}, args, {
+    iconProps: {
+      icon: AlertCircleOutlineIcon,
+      title: {
+        name: 'Alert Outline Circle Icon'
+      }
+    },
+    text: "Loading Problem.",
+    buttonProps: {
+      onPress: handleReload,
+      children: 'Reload'
+    }
+  }), ___EmotionJSX(Box, {
+    width: "400px"
+  }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet")));
+};
+export var CustomErrorElement = function CustomErrorElement(_ref3) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
+  var handleReload = function handleReload() {
+    window.location.reload();
+  };
+  return ___EmotionJSX(ServerErrorBoundary, _extends({}, args, {
+    renderElement: ___EmotionJSX(Text, {
+      display: "flex",
+      alignItems: "center"
+    }, "Lorem ipsum dolor sit amet.\xA0", ___EmotionJSX(Button, {
+      variant: "link",
+      onPress: handleReload,
+      p: "0"
+    }, "Reload"))
+  }), ___EmotionJSX(Box, {
+    width: "400px"
+  }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet")));
+};

package/lib/components/ServerErrorBoundary/ServerErrorBoundary.styles.js

@@ -0,0 +1,9 @@
+var base = {
+  color: 'neutral.40',
+  'a': {
+    cursor: 'pointer'
+  }
+};
+export default {
+  base: base
+};

package/lib/components/ServerErrorBoundary/ServerErrorBoundary.test.js

@@ -0,0 +1,102 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import React from 'react';
+import AlertCircleOutlineIcon from '@pingux/mdi-react/AlertCircleOutlineIcon';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import Text from '../Text/Text';
+import ServerErrorBoundary from '.';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-ServerErrorBoundary';
+var serverErrorBoundaryBody = 'Lorem ipsum dolor sit amet';
+var defaultProps = {
+  'data-testid': testId,
+  hasServerError: true
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(ServerErrorBoundary, _extends({}, defaultProps, props), serverErrorBoundaryBody));
+};
+
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(ServerErrorBoundary, _extends({}, defaultProps, props), ___EmotionJSX(Text, null, serverErrorBoundaryBody));
+  }
+});
+describe('ServerErrorBoundary component', function () {
+  var mockReload = jest.fn();
+  var originalLocation = window.location;
+  beforeAll(function () {
+    _Object$defineProperty(window, 'location', {
+      value: _objectSpread(_objectSpread({}, window.location), {}, {
+        reload: mockReload
+      }),
+      writable: true
+    });
+  });
+  afterAll(function () {
+    // ✅ Restore the original location object
+    window.location = originalLocation;
+  });
+  test('renders default ServerErrorBoundary component', function () {
+    getComponent();
+    screen.getByRole('img', {
+      name: /alert circle icon/i
+    });
+    screen.getByText(/there was a problem loading this page\./i);
+    var reloadButton = screen.getByRole('button', {
+      name: /reload/i
+    });
+    userEvent.click(reloadButton);
+    expect(mockReload).toHaveBeenCalled();
+  });
+  test('renders with hasServerError as false', function () {
+    getComponent({
+      hasServerError: false
+    });
+    screen.getByText(serverErrorBoundaryBody);
+    expect(screen.queryByRole('button', {
+      name: /reload/i
+    })).not.toBeInTheDocument();
+  });
+  test('renders with custom icon', function () {
+    getComponent({
+      iconProps: {
+        icon: AlertCircleOutlineIcon,
+        title: {
+          name: 'Alert Outline Circle Icon'
+        }
+      }
+    });
+    screen.getByRole('img', {
+      name: /alert outline circle icon/i
+    });
+  });
+  test('renders with custom text and link properties', function () {
+    var mockOnReload = jest.fn();
+    getComponent({
+      text: 'Loading Problem',
+      buttonProps: {
+        onPress: mockOnReload,
+        children: 'Reload'
+      }
+    });
+    screen.getByText(/loading problem/i);
+    userEvent.click(screen.getByRole('button', {
+      name: /reload/i
+    }));
+    expect(mockOnReload).toHaveBeenCalled();
+  });
+});

package/lib/components/ServerErrorBoundary/index.js

@@ -0,0 +1 @@
+export { default } from './ServerErrorBoundary';

package/lib/index.js

@@ -177,6 +177,8 @@ export { default as SelectField } from './components/SelectField';
 export * from './components/SelectField';
 export { default as Separator } from './components/Separator';
 export * from './components/Separator';
+export { default as ServerErrorBoundary } from './components/ServerErrorBoundary';
+export * from './components/ServerErrorBoundary';
 export { default as Skeleton } from './components/Skeleton';
 export * from './components/Skeleton';
 export { default as SliderField } from './components/SliderField/SliderField';

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -1,4 +1,4 @@
-var nextGenConvertedComponents = ['GridList', 'DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'RockerButtonGroup', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton', 'TooltipTrigger', 'ListViewItem', 'Pagination', 'StatusIcon', 'Callout', 'Table', 'TableBase', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField'];
+var nextGenConvertedComponents = ['GridList', 'DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'RockerButtonGroup', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton', 'TooltipTrigger', 'ListViewItem', 'Pagination', 'StatusIcon', 'Callout', 'Table', 'TableBase', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary'];
 export var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Messages: ['Customization'],

package/lib/styles/variants/variants.js

@@ -50,6 +50,7 @@ import rangeCalendar from '../../components/RangeCalendar/RangeCalendar.styles';
 import rockerButton from '../../components/RockerButton/RockerButton.styles';
 import scrollBox from '../../components/ScrollBox/ScrollBox.styles';
 import separator from '../../components/Separator/Separator.styles';
+import serverErrorBoundary from '../../components/ServerErrorBoundary/ServerErrorBoundary.styles';
 import skeleton from '../../components/Skeleton/Skeleton.styles';
 import slider from '../../components/SliderField/Slider.styles';
 import statusIcon from '../../components/StatusIcon/StatusIcon.styles';
@@ -103,6 +104,7 @@ export default _objectSpread(_objectSpread({
   rockerButton: rockerButton,
   scrollBox: scrollBox,
   separator: separator,
+  serverErrorBoundary: serverErrorBoundary,
   slider: slider,
   stepper: stepper,
   skeleton: skeleton,

package/lib/types/ServerErrorBoundary.js

@@ -0,0 +1 @@
+export {};

package/lib/types/index.js

@@ -49,6 +49,7 @@ export * from './rockerButtonGroup';
 export * from './scrollBox';
 export * from './searchField';
 export * from './separator';
+export * from './ServerErrorBoundary';
 export * from './shared';
 export * from './skeleton';
 export * from './switchField';

package/lib/utils/designUtils/figmaLinks.js

@@ -177,6 +177,9 @@ export var FIGMA_LINKS = {
   separator: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=8327-28092&t=8Wwd3tIBh3GEjCJB-0'
   },
+  ServerErrorBoundary: {
+    "default": 'https://www.figma.com/design/S1tRCG90PVgCJRCyDwxkBk/429-Error?node-id=9-941&m=dev'
+  },
   stepper: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=7523-27301&t=rLZVlRDdR1JhehkH-0'
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.138.0",
+  "version": "2.139.0-alpha.1",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",