@capillarytech/blaze-ui 5.11.1 → 5.11.6

package/CapErrorBoundary/types.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+export interface CapErrorBoundaryProps {
+    /** Child components to wrap with error boundary */
+    children?: React.ReactNode;
+    /** Additional CSS class name */
+    className?: string;
+    /** Whether the refresh action has expired */
+    isExpired?: boolean;
+    /** Whether to show API error state (only used when isApiErrorBoundary is true) */
+    isApiError?: boolean;
+    /** Text to display for refresh action */
+    refreshText?: string | React.ReactNode;
+    /** Title to display when refresh has expired */
+    expiryTitle?: string | React.ReactNode;
+    /** Title to display for refresh action */
+    refreshTitle?: string | React.ReactNode;
+    /** Whether to display error in a slide box instead of inline */
+    useSlideBox?: boolean;
+    /** Header for CapSlideBox when useSlideBox is true (takes precedence over slideBoxProps.header) */
+    header?: string | React.ReactNode;
+    /** Handler called when an error is caught */
+    errorHandler?: (error: Error) => void;
+    /** Props to pass to CapSlideBox when useSlideBox is true */
+    slideBoxProps?: Record<string, unknown>;
+    /** Handler called when refresh button is clicked */
+    onRefreshClick?: () => void;
+    /** Handler called when slide box is closed */
+    onCloseSlideBox?: () => void;
+    /** Number of refresh clicks before showing expired state */
+    refreshThreshold?: number;
+    /** Description to display when refresh has expired */
+    expiryDescription?: string | React.ReactNode;
+    /** Whether to use API error boundary mode (shows error based on isApiError prop instead of catching React errors) */
+    isApiErrorBoundary?: boolean;
+    /** Whether to show illustration image */
+    showIllustrationImage?: boolean;
+    /** Content to render before the error illustration */
+    prefix?: string | React.ReactNode;
+    /** Content to render after the error illustration */
+    suffix?: string | React.ReactNode;
+    /** Whether to show animation when error illustration appears */
+    showAnimation?: boolean;
+    /** Additional props to pass to CapErrorStateIllustration */
+    [key: string]: unknown;
+}
+//# sourceMappingURL=types.d.ts.map

package/CapErrorBoundary/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../components/CapErrorBoundary/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,qBAAqB;IACpC,mDAAmD;IACnD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kFAAkF;IAClF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACvC,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACvC,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACxC,gEAAgE;IAChE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mGAAmG;IACnG,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,6CAA6C;IAC7C,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACtC,4DAA4D;IAC5D,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,oDAAoD;IACpD,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,8CAA8C;IAC9C,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,sDAAsD;IACtD,iBAAiB,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAC7C,qHAAqH;IACrH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,yCAAyC;IACzC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,gEAAgE;IAChE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,4DAA4D;IAC5D,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB"}

package/CapErrorStateIllustration/README.md

@@ -0,0 +1,222 @@
+# CapErrorStateIllustration Migration Documentation
+
+## Summary
+
+`CapErrorStateIllustration` has been migrated from `@capillarytech/cap-ui-library` (Ant Design v3) to `@capillarytech/blaze-ui` (Ant Design v6). The component displays error state illustrations with optional refresh functionality or expiry messages.
+
+## Migration Changes
+
+### Component Structure
+
+**Before (cap-ui-library):**
+- Used PropTypes for runtime type checking
+- Used defaultProps for default values
+- Used styled-components for styling
+- Function component with destructuring
+
+**After (blaze-ui):**
+- TypeScript types from `types.ts` (no PropTypes)
+- Default values in function argument destructuring (no defaultProps)
+- CSS Modules with SCSS (no styled-components)
+- Functional component with React.FC type
+
+## Props
+
+### Props Comparison
+
+| Prop | cap-ui-library | blaze-ui | Status |
+|------|----------------|----------|--------|
+| `showImage` | ✅ | ✅ | **Unchanged** |
+| `className` | ✅ | ✅ | **Unchanged** |
+| `refreshText` | ✅ | ✅ | **Unchanged** |
+| `expiryTitle` | ✅ | ✅ | **Unchanged** |
+| `refreshTitle` | ✅ | ✅ | **Unchanged** |
+| `onRefreshClick` | ✅ | ✅ | **Unchanged** |
+| `isRefreshExpired` | ✅ | ✅ | **Unchanged** |
+| `expiryDescription` | ✅ | ✅ | **Unchanged** |
+| `...rest` | ✅ | ✅ | **Unchanged** (HTML div attributes) |
+
+### All Props
+
+#### `showImage`
+- **Type:** `boolean`
+- **Default:** `true`
+- **Description:** Whether to show the error state illustration image
+- **Example:**
+  ```tsx
+  <CapErrorStateIllustration showImage={false} />
+  ```
+
+#### `className`
+- **Type:** `string`
+- **Default:** `''`
+- **Description:** Additional CSS class name
+- **Example:**
+  ```tsx
+  <CapErrorStateIllustration className="custom-class" />
+  ```
+
+#### `refreshText`
+- **Type:** `string | React.ReactNode`
+- **Default:** `''`
+- **Description:** Text or node to display in the refresh button (when not expired)
+- **Example:**
+  ```tsx
+  <CapErrorStateIllustration refreshText="Refresh" />
+  <CapErrorStateIllustration refreshText={<span>Custom Refresh</span>} />
+  ```
+
+#### `expiryTitle`
+- **Type:** `string | React.ReactNode`
+- **Default:** `''`
+- **Description:** Title to display when refresh is expired
+- **Example:**
+  ```tsx
+  <CapErrorStateIllustration expiryTitle="Session Expired" isRefreshExpired />
+  ```
+
+#### `refreshTitle`
+- **Type:** `string | React.ReactNode`
+- **Default:** `''`
+- **Description:** Title to display when refresh is available
+- **Example:**
+  ```tsx
+  <CapErrorStateIllustration refreshTitle="Something went wrong" />
+  ```
+
+#### `onRefreshClick`
+- **Type:** `() => void`
+- **Default:** `() => {}`
+- **Description:** Callback function when refresh button is clicked
+- **Example:**
+  ```tsx
+  <CapErrorStateIllustration 
+    onRefreshClick={() => window.location.reload()} 
+  />
+  ```
+
+#### `isRefreshExpired`
+- **Type:** `boolean`
+- **Default:** `false`
+- **Description:** Whether the refresh has expired
+- **Example:**
+  ```tsx
+  <CapErrorStateIllustration isRefreshExpired={true} />
+  ```
+
+#### `expiryDescription`
+- **Type:** `string | React.ReactNode`
+- **Default:** `''`
+- **Description:** Description to display when refresh is expired
+- **Example:**
+  ```tsx
+  <CapErrorStateIllustration 
+    expiryDescription="Please refresh the page" 
+    isRefreshExpired 
+  />
+  ```
+
+## Usage Examples
+
+### Basic Usage
+
+```tsx
+import CapErrorStateIllustration from '@capillarytech/blaze-ui/CapErrorStateIllustration';
+
+<CapErrorStateIllustration 
+  refreshTitle="Something went wrong"
+  refreshText="Refresh"
+  onRefreshClick={() => window.location.reload()}
+/>
+```
+
+### Expired State
+
+```tsx
+<CapErrorStateIllustration 
+  isRefreshExpired={true}
+  expiryTitle="Session Expired"
+  expiryDescription="Please refresh the page"
+/>
+```
+
+### Without Image
+
+```tsx
+<CapErrorStateIllustration 
+  showImage={false}
+  refreshTitle="Error occurred"
+  refreshText="Try again"
+  onRefreshClick={handleRefresh}
+/>
+```
+
+### Custom Content
+
+```tsx
+<CapErrorStateIllustration 
+  refreshTitle={<strong>Error</strong>}
+  refreshText={<span>Click to <em>refresh</em></span>}
+  onRefreshClick={handleRefresh}
+/>
+```
+
+## Style Changes
+
+**Approach**: The component now uses CSS Modules with SCSS instead of styled-components. All styling is done through CSS classes.
+
+### Removed Dependencies
+- `styled-components` - Replaced with CSS Modules
+- `prop-types` - Replaced with TypeScript types
+
+### CSS Classes
+
+The component uses the following CSS classes:
+- `.cap-error-state-illustration` - Main container
+- `.error-state-image` - Image wrapper
+- `.error-state-refresh-button` - Refresh button
+- `.error-state-refresh-icon` - Refresh icon
+- `.refresh-button-text-container` - Refresh button text container
+
+## Code Improvements
+
+1. **Removed PropTypes**: Replaced with TypeScript types from `types.ts`
+2. **Removed defaultProps**: Default values now in function argument destructuring
+3. **Removed styled-components**: Converted to CSS Modules with SCSS
+4. **Type safety**: Full TypeScript support with proper type exports
+5. **Better maintainability**: CSS Modules provide better encapsulation
+
+## What Stayed the Same
+
+- All props and their behavior
+- Component functionality and logic
+- Visual appearance (styling preserved)
+- API surface area (backward compatible)
+
+## What Changed
+
+- **Removed**: `PropTypes` import and usage
+- **Removed**: `defaultProps` assignment
+- **Removed**: `styled-components` dependency
+- **Added**: TypeScript types in `types.ts`
+- **Added**: CSS Modules classes in `styles.scss`
+- **Changed**: Default values now in function arguments
+
+## Migration Guide
+
+If you're migrating from the old version:
+
+1. **No code changes required** - The component API is backward compatible
+2. **TypeScript users**: You can now import types:
+   ```tsx
+   import type { CapErrorStateIllustrationProps } from '@capillarytech/blaze-ui/CapErrorStateIllustration';
+   ```
+3. **Styling**: If you were overriding styles, update selectors to use CSS Modules classes
+
+## Related Components
+
+- `CapButton` - Used for the refresh button
+- `CapHeading` - Used for titles
+- `CapIcon` - Used for refresh icon
+- `CapImage` - Used for error illustrations
+- `CapRow` - Used for layout

package/CapErrorStateIllustration/USE_CASES.md

@@ -0,0 +1,33 @@
+# Test Cases: CapErrorStateIllustration (Antd v3→v6)
+
+## Component Analysis
+- **Component**: CapErrorStateIllustration
+- **Complexity**: simple
+- **Test Case Limit**: ≤10 test cases
+
+## Generated Test Cases
+
+| ID | Use Case | Props/Config | Expected Visual/Behavior | Priority | Storybook Story | Notes |
+|----|----------|--------------|-------------------------|----------|-----------------|-------|
+| UC-001 | Default rendering | All default props (showImage: true, isRefreshExpired: false, empty strings) | Component renders with refresh illustration image, no visible text or button | P0 | Default | Basic rendering with default props |
+| UC-002 | Refresh state vs Expiry state | isRefreshExpired: false vs true | When false: shows refreshErrorStateIllustration, refreshTitle, refresh button. When true: shows expiryErrorStateIllustration, expiryTitle, expiryDescription | P0 | StateVariants | Grouped both state variants into single test |
+| UC-003 | Image visibility toggle | showImage: true vs false | When true: image renders. When false: no image displayed | P1 | ImageVisibility | Grouped both image states |
+| UC-004 | Content variants | refreshTitle, expiryTitle, expiryDescription, refreshText with various values (string, node, empty) | All text props render correctly. String and node types supported. Empty strings hide elements | P1 | ContentVariants | Grouped all text content props |
+| UC-005 | Refresh button interaction | refreshText: "Refresh", onRefreshClick: mock function | Button renders with refresh icon and text. Click triggers onRefreshClick handler | P0 | RefreshInteraction | Critical user interaction |
+| UC-006 | Custom styling | className: "custom-class" | Custom className applied to container element | P2 | CustomStyling | Basic styling support |
+| UC-007 | Edge cases - minimal content | Only showImage: true, all text props empty | Component renders with only image, no text or buttons | P1 | MinimalContent | Edge case for empty content |
+| UC-008 | HTML attributes passthrough | {...rest} props (data-testid, aria-label, etc.) | Additional HTML attributes passed to container element | P2 | AttributesPassthrough | Grouped all HTML/ARIA attributes |
+| UC-009 | Refresh button with node content | refreshText: <span>Custom Node</span> | Button accepts node type for refreshText and renders correctly | P1 | NodeContentSupport | Tests PropTypes.oneOfType support |
+| UC-010 | Complete refresh state | showImage: true, isRefreshExpired: false, refreshTitle: "Error", refreshText: "Retry", onRefreshClick: handler | All refresh state elements visible: image, title, button with icon and text | P0 | CompleteRefreshState | Full refresh state integration |
+
+## Summary
+- **Total Test Cases**: 10
+- **P0 (Blocking)**: 3
+- **P1 (High)**: 5
+- **P2 (Medium)**: 2
+
+## Grouping Rationale
+- State variants (UC-002): Combined refresh and expiry states as they're mutually exclusive
+- Content variants (UC-004): Grouped all text props since they follow similar patterns
+- Image visibility (UC-003): Simple boolean toggle grouped together
+- Attributes (UC-008): All HTML/ARIA attributes grouped as passthrough props

package/CapErrorStateIllustration/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ *
+ * CapErrorStateIllustration
+ *
+ */
+import React from 'react';
+import type { CapErrorStateIllustrationProps } from './types';
+declare const CapErrorStateIllustration: React.FC<CapErrorStateIllustrationProps>;
+export default CapErrorStateIllustration;
+export type { CapErrorStateIllustrationProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/CapErrorStateIllustration/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapErrorStateIllustration/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,SAAS,CAAC;AAE9D,QAAA,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAC,8BAA8B,CA2CvE,CAAC;AAIF,eAAe,yBAAyB,CAAC;AACzC,YAAY,EAAE,8BAA8B,EAAE,MAAM,SAAS,CAAC"}

package/CapErrorStateIllustration/index.js

@@ -10894,13 +10894,15 @@ var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ = __webpack_require__(31601);
 var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(76314);
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `.cap-error-state-illustration .error-state-image{padding-bottom:1.428rem}.cap-error-state-illustration .error-state-refresh-button{margin:.285rem}.cap-error-state-illustration .error-state-refresh-icon{font-size:1.143rem}`, ""]);
+___CSS_LOADER_EXPORT___.push([module.id, `.cap-error-state-illustration{width:100%;height:100%;display:flex;text-align:center;align-items:center;justify-content:center}.cap-error-state-illustration .error-state-image{padding-bottom:1.428rem}.cap-error-state-illustration .error-state-refresh-button{margin:.285rem}.cap-error-state-illustration .error-state-refresh-icon{font-size:1.143rem}.cap-error-state-illustration .error-state-illustration-content{display:flex;flex-direction:column;align-items:center;justify-content:center}.cap-error-state-illustration .refresh-button-text-container{display:flex;align-items:center;gap:.285rem;padding:.285rem;color:#2466ea}`, ""]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
 	"cap-error-state-illustration": `cap-error-state-illustration`,
 	"error-state-image": `error-state-image`,
 	"error-state-refresh-button": `error-state-refresh-button`,
-	"error-state-refresh-icon": `error-state-refresh-icon`
+	"error-state-refresh-icon": `error-state-refresh-icon`,
+	"error-state-illustration-content": `error-state-illustration-content`,
+	"refresh-button-text-container": `refresh-button-text-container`
 };
 module.exports = ___CSS_LOADER_EXPORT___;
 
@@ -13313,14 +13315,6 @@ var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js
        /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_1_use_2_styles_scss__WEBPACK_IMPORTED_MODULE_5___default()) && (_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_1_use_2_styles_scss__WEBPACK_IMPORTED_MODULE_5___default().locals) ? (_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_1_use_2_styles_scss__WEBPACK_IMPORTED_MODULE_5___default().locals) : undefined);
 
 
-/***/ }),
-
-/***/ 76480:
-/***/ ((module) => {
-
-"use strict";
-module.exports = require("styled-components");
-
 /***/ }),
 
 /***/ 76903:
@@ -16446,9 +16440,7 @@ var exports = __webpack_exports__;
 exports.__esModule = true;
 exports["default"] = void 0;
 var _classnames = _interopRequireDefault(__webpack_require__(46942));
-var _propTypes = _interopRequireDefault(__webpack_require__(43363));
 var _react = _interopRequireDefault(__webpack_require__(9206));
-var _styledComponents = _interopRequireDefault(__webpack_require__(76480));
 var _expiryErrorStateIllustration = _interopRequireDefault(__webpack_require__(67277));
 var _refreshErrorStateIllustration = _interopRequireDefault(__webpack_require__(57291));
 var _CapButton = _interopRequireDefault(__webpack_require__(80739));
@@ -16456,11 +16448,9 @@ var _CapHeading = _interopRequireDefault(__webpack_require__(7319));
 var _CapIcon = _interopRequireDefault(__webpack_require__(65124));
 var _CapImage = _interopRequireDefault(__webpack_require__(84446));
 var _CapRow = _interopRequireDefault(__webpack_require__(69813));
-var _variables = __webpack_require__(56587);
-__webpack_require__(72890);
+var _styles = _interopRequireDefault(__webpack_require__(72890));
 var _jsxRuntime = __webpack_require__(74848);
 const _excluded = ["showImage", "className", "refreshText", "expiryTitle", "refreshTitle", "onRefreshClick", "isRefreshExpired", "expiryDescription"];
-var _templateObject, _templateObject2;
 /**
  *
  * CapErrorStateIllustration
@@ -16469,28 +16459,26 @@ var _templateObject, _templateObject2;
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-function _taggedTemplateLiteralLoose(e, t) { return t || (t = e.slice(0)), e.raw = t, e; }
-const ErrorStateIllustrationContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  text-align: center;\n  align-items: center;\n  justify-content: center;\n"])));
-const RefreshButtonTextContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", ";\n  color: ", ";\n"])), _variables.CAP_SPACE_04, _variables.CAP_SPACE_04, _variables.CAP_SECONDARY.base);
 const CapErrorStateIllustration = _ref => {
   let {
-      showImage,
-      className,
-      refreshText,
-      expiryTitle,
-      refreshTitle,
-      onRefreshClick,
-      isRefreshExpired,
-      expiryDescription
+      showImage = true,
+      className = '',
+      refreshText = '',
+      expiryTitle = '',
+      refreshTitle = '',
+      onRefreshClick = () => {},
+      isRefreshExpired = false,
+      expiryDescription = ''
     } = _ref,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ErrorStateIllustrationContainer, _extends({
-    className: (0, _classnames.default)('cap-error-state-illustration', className)
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _extends({
+    className: (0, _classnames.default)(_styles.default['cap-error-state-illustration'], className)
   }, rest, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CapRow.default, {
+      className: _styles.default['error-state-illustration-content'],
       children: [showImage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapImage.default, {
         src: isRefreshExpired ? _expiryErrorStateIllustration.default : _refreshErrorStateIllustration.default,
-        className: "error-state-image"
+        className: _styles.default['error-state-image']
       }), !isRefreshExpired ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [refreshTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapHeading.default, {
           type: "h4",
@@ -16498,11 +16486,12 @@ const CapErrorStateIllustration = _ref => {
         }), refreshText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapButton.default, {
           type: "link",
           onClick: onRefreshClick,
-          className: "error-state-refresh-button",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(RefreshButtonTextContainer, {
+          className: _styles.default['error-state-refresh-button'],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: _styles.default['refresh-button-text-container'],
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CapIcon.default, {
               type: "refresh",
-              className: "error-state-refresh-icon"
+              className: _styles.default['error-state-refresh-icon']
             }), refreshText]
           })
         })]
@@ -16518,26 +16507,7 @@ const CapErrorStateIllustration = _ref => {
     })
   }));
 };
-CapErrorStateIllustration.defaultProps = {
-  className: '',
-  refreshText: '',
-  expiryTitle: '',
-  showImage: true,
-  refreshTitle: '',
-  expiryDescription: '',
-  isRefreshExpired: false,
-  onRefreshClick: () => {}
-};
-CapErrorStateIllustration.propTypes = {
-  showImage: _propTypes.default.bool,
-  className: _propTypes.default.string,
-  onRefreshClick: _propTypes.default.func,
-  isRefreshExpired: _propTypes.default.bool,
-  refreshText: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
-  expiryTitle: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
-  refreshTitle: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
-  expiryDescription: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
-};
+CapErrorStateIllustration.displayName = 'CapErrorStateIllustration';
 var _default = exports["default"] = CapErrorStateIllustration;
 })();