oa-componentbook 1.0.1-stage.45 → 1.0.1-stage.451

package/build/components/oa-component-document-details-panel/DocumentDetailsPanel.js

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+/**
+ * Styled container for the details panel
+ */
+const PanelContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: var(--color-background, #fff);\n  height: 100%;\n  width: 100%;\n  box-sizing: border-box;\n\n  .panel-title {\n    margin: 0 0 24px 0;\n  }\n\n  .table-container {\n    border: 1px solid var(--color-border, #e8e8e8);\n    border-radius: 4px;\n    overflow: hidden;\n    margin-bottom: 24px;\n  }\n\n  .section-header {\n    background: var(--color-background-secondary, #f5f5f5);\n    padding: 12px 16px;\n    margin: 0;\n    border-bottom: 1px solid var(--color-border, #e8e8e8);\n  }\n\n  .details-table {\n    width: 100%;\n    margin: 0;\n    border-collapse: collapse;\n    background: var(--color-background, #fff);\n  }\n\n  .details-row {\n    border-bottom: 1px solid var(--color-border-light, #f0f0f0);\n  }\n\n  .details-row:last-child {\n    border-bottom: none;\n  }\n\n  .details-label {\n    width: 140px;\n    min-width: 140px;\n    padding: 16px;\n    padding-right: 16px;\n    text-align: left;\n    vertical-align: top;\n  }\n\n  .details-value {\n    padding: 16px;\n    word-break: break-word;\n    font-weight: 500;\n    vertical-align: top;\n  }\n\n  .details-actions {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 16px;\n    margin-top: 0;\n    padding-top: 0;\n    border-top: none;\n  }\n\n  .details-actions button {\n    padding: 0;\n  }\n\n  .children-container {\n    margin-top: 24px;\n  }\n"])));
+
+/**
+ * DocumentDetailsPanel Component
+ *
+ * A reusable panel for displaying document/invoice details with key-value pairs.
+ * Can be used standalone or as children of DocumentSideDrawer, Modal, etc.
+ * Uses existing Typography and CustomButton components.
+ *
+ * @example
+ * // Standalone usage
+ * <DocumentDetailsPanel
+ *   title="Check if the below details are correct"
+ *   sectionTitle="INVOICE DETAILS"
+ *   details={[
+ *     { label: 'Date', value: '17 Nov 2025' },
+ *     { label: 'Invoice Number', value: 'IEXPS8790L' },
+ *   ]}
+ *   actions={[
+ *     { label: 'Download Invoice', onClick: () => {}, icon: <MaterialIcon icon={GetAppIcon} /> },
+ *   ]}
+ * />
+ *
+ * @example
+ * // With DocumentSideDrawer
+ * <DocumentSideDrawer title="VALIDATE" documentConfig={...}>
+ *   <DocumentDetailsPanel
+ *     title="Verify the details"
+ *     details={[...]}
+ *     actions={[...]}
+ *   />
+ * </DocumentSideDrawer>
+ */
+function DocumentDetailsPanel(_ref) {
+  let {
+    title,
+    sectionTitle,
+    details,
+    actions,
+    children,
+    className,
+    style
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(PanelContainer, {
+    className: className,
+    style: style
+  }, title && /*#__PURE__*/_react.default.createElement("div", {
+    className: "panel-title"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-t2-700",
+    color: "primary-content"
+  }, title)), (sectionTitle || details && details.length > 0) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "table-container"
+  }, sectionTitle && /*#__PURE__*/_react.default.createElement("div", {
+    className: "section-header"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-sl1-700",
+    color: "secondary-content"
+  }, sectionTitle)), details && details.length > 0 && /*#__PURE__*/_react.default.createElement("table", {
+    className: "details-table",
+    role: "table",
+    "aria-label": sectionTitle || 'Details'
+  }, /*#__PURE__*/_react.default.createElement("tbody", null, details.map((detail, index) => {
+    const rowKey = detail.key || "detail-".concat(detail.label, "-").concat(index);
+    return /*#__PURE__*/_react.default.createElement("tr", {
+      className: "details-row",
+      key: rowKey
+    }, /*#__PURE__*/_react.default.createElement("th", {
+      className: "details-label",
+      scope: "row"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: "type-b2-400",
+      color: "secondary-content"
+    }, detail.label)), /*#__PURE__*/_react.default.createElement("td", {
+      className: "details-value"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: "type-b2-400",
+      color: "primary-content"
+    }, detail.value)));
+  })))), actions && actions.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "details-actions",
+    role: "group",
+    "aria-label": "Document actions"
+  }, actions.map((action, index) => {
+    const actionKey = action.key || "action-".concat(action.label, "-").concat(index);
+    return /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+      key: actionKey,
+      label: action.label,
+      onClick: action.onClick,
+      type: "text-only",
+      size: "medium",
+      "aria-label": action.ariaLabel || action.label,
+      iconConfig: {
+        icon: action.icon || null,
+        position: 'left'
+      }
+    });
+  })), children && /*#__PURE__*/_react.default.createElement("div", {
+    className: "children-container"
+  }, children));
+}
+DocumentDetailsPanel.propTypes = {
+  /** Title text displayed at the top of the panel */
+  title: _propTypes.default.string,
+  /** Section header text (e.g., "INVOICE DETAILS") */
+  sectionTitle: _propTypes.default.string,
+  /** Array of detail items to display as key-value pairs */
+  details: _propTypes.default.arrayOf(_propTypes.default.shape({
+    key: _propTypes.default.string,
+    label: _propTypes.default.string.isRequired,
+    value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.node]).isRequired
+  })),
+  /** Array of action buttons/links to display */
+  actions: _propTypes.default.arrayOf(_propTypes.default.shape({
+    key: _propTypes.default.string,
+    label: _propTypes.default.string.isRequired,
+    onClick: _propTypes.default.func,
+    icon: _propTypes.default.node,
+    ariaLabel: _propTypes.default.string
+  })),
+  /** Additional content to render below the details */
+  children: _propTypes.default.node,
+  /** Additional CSS class */
+  className: _propTypes.default.string,
+  /** Inline styles */
+  style: _propTypes.default.object
+};
+DocumentDetailsPanel.defaultProps = {
+  title: null,
+  sectionTitle: null,
+  details: [],
+  actions: [],
+  children: null,
+  className: '',
+  style: {}
+};
+var _default = exports.default = DocumentDetailsPanel;

package/build/components/oa-component-drawer/CustomDrawer.js

@@ -114,11 +114,13 @@ function CustomDrawer(_ref) {
     title: isBaseDrawer ? /*#__PURE__*/_react.default.createElement(_styles.BaseDrawerTitle, null, DrawerTitle(title), /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
       color: "primary-content",
       icon: _CloseRounded.default,
+      className: "drawerCloseRoundedIcon",
       onClick: handleClose,
       size: 20,
       "data-test": dataTest ? "".concat(dataTest, "--close-drawer-button") : undefined
     })) : /*#__PURE__*/_react.default.createElement(_styles.LayeredDrawerTitle, null, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
       color: "primary-content",
+      className: "drawerCloseRoundedIcon",
       icon: _ArrowBackIosRounded.default,
       onClick: handleClose,
       size: 20,

package/build/components/oa-component-dropdown/CustomDropdown.js

@@ -36,7 +36,8 @@ function CustomDropdown(_ref) {
     firstLetterIcon,
     trigger,
     placement,
-    type
+    type,
+    onMenuItemClick
     // dropDownHeading,
   } = _ref;
   const firstLetter = (displayText === null || displayText === void 0 || (_displayText$split = displayText.split(' ')) === null || _displayText$split === void 0 || (_displayText$split = _displayText$split[1]) === null || _displayText$split === void 0 ? void 0 : _displayText$split.charAt(0).toUpperCase()) || 'H'; // Extract the first letter after Hi.
@@ -52,7 +53,16 @@ function CustomDropdown(_ref) {
     }
   }, /*#__PURE__*/_react.default.createElement(_styles.default, null, firstLetterIcon && firstLetter && /*#__PURE__*/_react.default.createElement("small", null, firstLetter), /*#__PURE__*/_react.default.createElement(_antd.Dropdown, {
     menu: {
-      items
+      items,
+      onClick: _ref2 => {
+        let {
+          key
+        } = _ref2;
+        const clickedItem = items.find(item => item.key === key);
+        if (clickedItem) {
+          onMenuItemClick(clickedItem);
+        }
+      }
     },
     trigger: trigger,
     placement: placement,
@@ -69,7 +79,8 @@ CustomDropdown.propTypes = {
   firstLetterIcon: _propTypes.default.bool,
   trigger: _propTypes.default.string,
   placement: _propTypes.default.string,
-  type: _propTypes.default.string
+  type: _propTypes.default.string,
+  onMenuItemClick: _propTypes.default.func
   // dropDownHeading: PropTypes.string,
 };
 CustomDropdown.defaultProps = {
@@ -85,6 +96,7 @@ CustomDropdown.defaultProps = {
   firstLetterIcon: false,
   trigger: ['click'],
   placement: 'bottomRight',
-  type: 'default'
+  type: 'default',
+  onMenuItemClick: () => {}
   // dropDownHeading: '',
 };

package/build/components/oa-component-icons/MaterialIcon.js

@@ -39,7 +39,7 @@ function MaterialIcon(_ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   const renderedIcon = /*#__PURE__*/_react.default.createElement(Icon, _extends({
     style: _objectSpread({
-      color: color ? _ColorVariablesMap.default["--color-".concat(color)] : undefined,
+      color: color && _ColorVariablesMap.default["--color-".concat(color)] ? _ColorVariablesMap.default["--color-".concat(color)] : color || undefined,
       fontSize: size ? "".concat(size, "px") : 'inherit',
       transition: 'transform .3s ease',
       transform: "rotate(".concat(rotate, "deg)")

package/build/components/oa-component-info/CustomInfo.js

@@ -27,6 +27,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @param {string} fontColor - The color of the text.
  * @param {object} iconConfig - Configuration for the icon.
  * @param {string} title - The title to be displayed.
+ * @param {string} borderColor - The border color of the component.
  *
  * @returns {ReactElement} A styled component with the specified properties.
  */
@@ -37,7 +38,8 @@ function CustomInfo(_ref) {
     description,
     fontColor,
     iconConfig,
-    title
+    title,
+    borderColor
   } = _ref;
   /**
    * Renders the icon based on the presence of a title.
@@ -65,7 +67,8 @@ function CustomInfo(_ref) {
     }, renderIcon()) : renderIcon();
   };
   return /*#__PURE__*/_react.default.createElement(_styles.InfoContainer, {
-    $color: color
+    $color: color,
+    $borderColor: borderColor
   }, /*#__PURE__*/_react.default.createElement(_styles.RowFlex, null, iconConfig.position === 'left' && conditionallyAddTooltipToIcon(), /*#__PURE__*/_react.default.createElement(_styles.ColFlex, null, title && /*#__PURE__*/_react.default.createElement(_Typography.default, {
     color: fontColor,
     typography: "type-t2-700"
@@ -96,7 +99,8 @@ CustomInfo.propTypes = {
     position: _propTypes.default.oneOf(['left', 'right']),
     tooltipText: _propTypes.default.string
   }),
-  title: _propTypes.default.string
+  title: _propTypes.default.string,
+  borderColor: _propTypes.default.string
 };
 CustomInfo.defaultProps = {
   buttonConfig: {
@@ -110,5 +114,6 @@ CustomInfo.defaultProps = {
   },
   fontColor: 'primary-content',
   title: '',
-  description: ''
+  description: '',
+  borderColor: ''
 };

package/build/components/oa-component-info/styles.js

@@ -8,8 +8,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const RowFlex = exports.RowFlex = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: row;\n    gap: 8px;\n"])));
-const ColFlex = exports.ColFlex = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n"])));
+const RowFlex = exports.RowFlex = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
+const ColFlex = exports.ColFlex = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n"])));
 const InfoContainer = exports.InfoContainer = (0, _styledComponents.default)(RowFlex).attrs({
   as: 'section'
-})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 12px;\n  align-items: center;\n  border-radius: 8px;\n  background-color: var(--color-", ");\n  \n  button {\n    margin-left: 8px;\n  };\n"])), props => props.$color);
+})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 12px;\n  align-items: center;\n  border-radius: 8px;\n  background-color: var(--color-", ");\n  border: 1px solid var(--color-", ");\n\n  button {\n    margin-left: 8px;\n  }\n"])), props => props.$color, props => props.$borderColor);

package/build/components/oa-component-modal/CustomModal.js

@@ -14,53 +14,58 @@ var _Typography = _interopRequireDefault(require("../oa-component-typography/Typ
 var _typographyOptions = require("../../global-css/typography-options");
 var _utils = require("../../utils");
 var _styles = require("./styles");
-const _excluded = ["buttonConfig", "children", "data-test", "imgSrc", "onCancel", "open", "title", "typographies", "width"];
+const _excluded = ["buttonConfig", "children", "data-test", "imgSrc", "onCancel", "open", "title", "typographies", "width", "bgColor", "showCloseIcon", "maskClosable"];
+/* eslint-disable */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /**
-   * This is a custom Modal component that extends the default antd Modal
-   * component.
-   *
-   * The open state of the modal is controlled by the parent component.
-   *
-   * The parent can also provide a callback function to be called when the
-   * cancel button is clicked.
-   *
-   * The width of the modal can be customized by providing a width prop.
-   *
-   * The buttons for the modal can be customized by providing a buttonConfig
-   * prop.
-   *
-   * The title of the modal can be provided as a string or as an image.
-   *
-   * The children of the modal can be provided as a string or a number, or as
-   * JSX elements.
-   *
-   * The typography of the title and description can be customized by providing
-   * a typographies object.
-   *
-   * The modal is centered by default.
-   *
-   * The modal is rendered with a gray background.
-   *
-   * The modal is rendered with a close button.
-   *
-   * The parent can provide additional props to the Modal component.
-   */
+ * This is a custom Modal component that extends the default antd Modal
+ * component.
+ *
+ * The open state of the modal is controlled by the parent component.
+ *
+ * The parent can also provide a callback function to be called when the
+ * cancel button is clicked.
+ *
+ * The width of the modal can be customized by providing a width prop.
+ *
+ * The buttons for the modal can be customized by providing a buttonConfig
+ * prop.
+ *
+ * The title of the modal can be provided as a string or as an image.
+ *
+ * The children of the modal can be provided as a string or a number, or as
+ * JSX elements.
+ *
+ * The typography of the title and description can be customized by providing
+ * a typographies object.
+ *
+ * The modal is centered by default.
+ *
+ * The modal is rendered with a gray background.
+ *
+ * The modal is rendered with a close button.
+ *
+ * The parent can provide additional props to the Modal component.
+ */
 function CustomModal(_ref) {
   let {
       buttonConfig,
       children,
-      'data-test': dataTest,
+      "data-test": dataTest,
       imgSrc,
       // This callback function provided by parent is called upon clicking on the cancel button
       onCancel,
       open,
       title,
       typographies,
-      width
+      width,
+      bgColor,
+      showCloseIcon = true,
+      // Add this prop with default value
+      maskClosable = true // Control whether clicking mask closes modal
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   /*
@@ -75,15 +80,15 @@ function CustomModal(_ref) {
   return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
     theme: {
       token: {
-        colorBgMask: 'rgba(0, 0, 0, 0.7)'
+        colorBgMask: bgColor || "rgba(0, 0, 0, 0.7)"
       }
     }
   }, open && /*#__PURE__*/_react.default.createElement(_antd.Modal, _extends({
-    closeIcon: /*#__PURE__*/_react.default.createElement(_icons.CloseCircleFilled, {
+    closeIcon: showCloseIcon ? /*#__PURE__*/_react.default.createElement(_icons.CloseCircleFilled, {
       style: {
-        fontSize: '26px'
+        fontSize: "26px"
       }
-    }),
+    }) : false,
     centered: true,
     "data-test": dataTest,
     footer: (buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.length) > 0 && /*#__PURE__*/_react.default.createElement(_styles.ButtonContainer, null, buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.map(button => /*#__PURE__*/_react.default.createElement(_CustomButton.default, _extends({
@@ -94,17 +99,21 @@ function CustomModal(_ref) {
       onClick: button.callback,
       size: "large",
       type: button === null || button === void 0 ? void 0 : button.type,
-      "data-test": button['data-test']
+      "data-test": button["data-test"]
     })))),
     onCancel: handleCancel,
     open: open,
     title: (title || imgSrc) && /*#__PURE__*/_react.default.createElement(_styles.TitleContainer, null, imgSrc && /*#__PURE__*/_react.default.createElement("img", {
       src: imgSrc,
-      alt: ""
+      alt: "",
+      onError: e => {
+        e.target.style.display = "none";
+      }
     }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
       typography: typographies.title
     }, title)),
-    width: width
+    width: width,
+    maskClosable: maskClosable
   }, props), children && /*#__PURE__*/_react.default.createElement(_styles.DescriptionContainer, null,
   // The label is a string or a number
   ((0, _utils.isString)(children) || (0, _utils.isNumber)(children)) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
@@ -116,17 +125,17 @@ CustomModal.propTypes = {
   // Array of button configurations
   buttonConfig: _propTypes.default.arrayOf(_propTypes.default.shape({
     callback: _propTypes.default.func.isRequired,
-    'data-test': _propTypes.default.string,
+    "data-test": _propTypes.default.string,
     label: _propTypes.default.string,
     iconConfig: _propTypes.default.shape({
       icon: _propTypes.default.node,
-      position: _propTypes.default.oneOf(['left', 'right']),
+      position: _propTypes.default.oneOf(["left", "right"]),
       style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))
     }),
-    type: _propTypes.default.oneOf(['primary', 'secondary', 'text-only', 'danger-primary', 'danger-secondary', 'danger-text-only'])
+    type: _propTypes.default.oneOf(["primary", "secondary", "text-only", "danger-primary", "danger-secondary", "danger-text-only"])
   })),
   children: _propTypes.default.node,
-  'data-test': _propTypes.default.string,
+  "data-test": _propTypes.default.string,
   title: _propTypes.default.string,
   typographies: _propTypes.default.shape({
     title: _propTypes.default.oneOf(_typographyOptions.typographyOptions),
@@ -135,19 +144,21 @@ CustomModal.propTypes = {
   imgSrc: _propTypes.default.string,
   onCancel: _propTypes.default.func.isRequired,
   open: _propTypes.default.bool,
-  width: _propTypes.default.string || _propTypes.default.number
+  width: _propTypes.default.string || _propTypes.default.number,
+  showCloseIcon: _propTypes.default.bool
 };
 CustomModal.defaultProps = {
   buttonConfig: [],
   children: null,
-  'data-test': null,
+  "data-test": null,
   imgSrc: null,
   open: true,
   title: null,
   typographies: {
-    title: 'type-t1-500',
-    children: 'type-b2-400'
+    title: "type-t1-500",
+    children: "type-b2-400"
   },
-  width: 416
+  width: 416,
+  showCloseIcon: true
 };
 var _default = exports.default = CustomModal;

package/build/components/oa-component-modal/styles.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.TitleContainer = exports.DescriptionContainer = exports.ButtonContainer = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3;
+/* eslint-disable */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const ButtonContainer = exports.ButtonContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 16px;\n  justify-content: flex-end;\n  margin: 24px 0 0;\n  @media (max-width: 768px) {\n    justify-content: space-between;\n    button{\n      width: 100%;\n    }\n  }\n"])));
+const ButtonContainer = exports.ButtonContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 16px;\n  justify-content: flex-end;\n  margin: 36px 0 0;\n  @media (max-width: 768px) {\n    justify-content: space-between;\n    button{\n      width: 100%;\n    }\n  }\n"])));
 const DescriptionContainer = exports.DescriptionContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 12px 0 0;\n"])));
-const TitleContainer = exports.TitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 16px;\n  flex-direction: column;\n  margin: 0 0 16px;\n\n  img {\n    height: 36px;\n    width: 36px;\n  }\n"])));
+const TitleContainer = exports.TitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 32px 0 0 0;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  img {\n    height: 36px;\n    width: 36px;\n  }\n"])));

package/build/components/oa-component-pagination/CustomPagination.js

@@ -0,0 +1,111 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+var _TypographiesMap = _interopRequireDefault(require("../../global-css/TypographiesMap"));
+var _styles = require("./styles");
+const _excluded = ["current", "total", "pageSize", "onChange", "onShowSizeChange", "pageSizeOptions", "showSizeChanger", "showQuickJumper", "showTotal", "size", "style"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+ * @description A custom wrapper for Ant Design Pagination component with consistent theming.
+ * @param {number} current - The current page number (1-based).
+ * @param {number} total - The total number of items.
+ * @param {number} pageSize - The number of items per page.
+ * @param {function} onChange - Callback function when page changes.
+ * @param {function} onShowSizeChange - Callback function when page size changes.
+ * @param {array} pageSizeOptions - Array of page size options.
+ * @param {boolean} showSizeChanger - Whether to show the page size selector.
+ * @param {boolean} showQuickJumper - Whether to show the quick jumper input.
+ * @param {boolean} showTotal - Whether to show the total items count.
+ * @param {string} size - The size of the pagination component.
+ * @param {object} style - Custom styles for the component.
+ * @param {object} antDesignProps - Additional props to pass to Ant Design Pagination.
+ * @returns {JSX.Element} The rendered pagination component.
+ */
+function CustomPagination(_ref) {
+  let {
+      current = 1,
+      total = 0,
+      pageSize = 10,
+      onChange,
+      onShowSizeChange,
+      pageSizeOptions = [10, 20, 50, 100],
+      showSizeChanger = true,
+      showQuickJumper = false,
+      showTotal = true,
+      size = 'default',
+      style
+    } = _ref,
+    antDesignProps = _objectWithoutProperties(_ref, _excluded);
+  const renderTotal = (totalItems, range) => {
+    if (!showTotal) return null;
+    return "Showing ".concat(range[0], "-").concat(range[1], " of ").concat(totalItems, " items");
+  };
+  return /*#__PURE__*/_react.default.createElement(_styles.MainContainer, {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      components: {
+        Pagination: {}
+      },
+      token: {
+        colorPrimary: '#014FC5',
+        colorPrimaryBorder: '#014FC5',
+        colorPrimaryHover: '#82A9E2',
+        colorText: '#212121',
+        colorTextDisabled: '#BFBFBF',
+        colorTextPlaceholder: '#959595',
+        borderRadius: 2,
+        colorBorder: '#E0E0E0'
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Pagination, _extends({
+    current: current,
+    total: total,
+    pageSize: pageSize,
+    onChange: onChange,
+    onShowSizeChange: onShowSizeChange,
+    showSizeChanger: showSizeChanger,
+    showQuickJumper: showQuickJumper,
+    showTotal: renderTotal,
+    pageSizeOptions: pageSizeOptions,
+    size: size
+  }, antDesignProps))));
+}
+CustomPagination.propTypes = {
+  current: _propTypes.default.number,
+  total: _propTypes.default.number,
+  pageSize: _propTypes.default.number,
+  onChange: _propTypes.default.func,
+  onShowSizeChange: _propTypes.default.func,
+  pageSizeOptions: _propTypes.default.arrayOf(_propTypes.default.number),
+  showSizeChanger: _propTypes.default.bool,
+  showQuickJumper: _propTypes.default.bool,
+  showTotal: _propTypes.default.bool,
+  size: _propTypes.default.oneOf(['default', 'small']),
+  style: _propTypes.default.object
+};
+CustomPagination.defaultProps = {
+  current: 1,
+  total: 0,
+  pageSize: 10,
+  onChange: undefined,
+  onShowSizeChange: undefined,
+  pageSizeOptions: [10, 20, 50, 100],
+  showSizeChanger: true,
+  showQuickJumper: false,
+  showTotal: true,
+  size: 'default',
+  style: undefined
+};
+var _default = exports.default = CustomPagination;

package/build/components/oa-component-pagination/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MainContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ant-pagination-item {\n    border: 1px solid #E0E0E0;\n  }\n  .ant-pagination-item-active {\n    border: 1px solid #014FC5;\n  }\n    .mobile-pagination{margin: 0;padding:0;}\n    .ant-pagination-total-text,.ant-pagination-options{display: none;}\n"])));
+var _default = exports.default = {};

package/build/components/oa-component-progress-bar/CustomProgressBar.js

@@ -18,6 +18,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @param {number} totalStep - The total number of steps in the progress.
  * @param {string} headingColor - The color used for the step text heading.
  * @param {string} barColor - The color used for the progress bar.
+ * @param {boolean} showStepText - Whether to display the step text (Step X out of Y).
  *
  * @returns {React.ReactElement} A component displaying the current progress.
  */
@@ -26,9 +27,10 @@ function ProgressBar(_ref) {
     currentStep,
     totalStep,
     headingColor,
-    barColor
+    barColor,
+    showStepText
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showStepText && /*#__PURE__*/_react.default.createElement("div", {
     className: "margin-bottom-8"
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     color: headingColor,
@@ -57,12 +59,14 @@ ProgressBar.propTypes = {
   currentStep: _propTypes.default.number,
   totalStep: _propTypes.default.number,
   headingColor: _propTypes.default.string,
-  barColor: _propTypes.default.string
+  barColor: _propTypes.default.string,
+  showStepText: _propTypes.default.bool
 };
 ProgressBar.defaultProps = {
   currentStep: 1,
   totalStep: 1,
   headingColor: 'positive',
-  barColor: 'positive'
+  barColor: 'positive',
+  showStepText: true
 };
 var _default = exports.default = ProgressBar;