oa-componentbook 1.0.1-stage.46 → 1.0.1-stage.461

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    color: #1890ff !important;\n  }\n  .details-actions button:hover {\n    color: #1890ff !important;\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

@@ -1,19 +1,27 @@
 "use strict";
 
+require("core-js/modules/es.weak-map.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = CustomInfo;
 require("core-js/modules/es.symbol.description.js");
-var _react = _interopRequireDefault(require("react"));
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
+var _CloseRounded = _interopRequireDefault(require("@material-ui/icons/CloseRounded"));
 var _styles = require("./styles");
 var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
 var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
 var _colorOptions = require("../../global-css/color-options");
 require("antd/dist/reset.css");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* eslint-disable */
+
 /**
  * A component for displaying a single piece of information with an optional icon
  * and/or button. The icon can be placed on either the left or right of the text.
@@ -28,6 +36,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @param {object} iconConfig - Configuration for the icon.
  * @param {string} title - The title to be displayed.
  * @param {string} borderColor - The border color of the component.
+ * @param {boolean} closable - Whether to show a close button.
+ * @param {function} onClose - Callback function called when close button is clicked.
  *
  * @returns {ReactElement} A styled component with the specified properties.
  */
@@ -39,8 +49,20 @@ function CustomInfo(_ref) {
     fontColor,
     iconConfig,
     title,
-    borderColor
+    borderColor,
+    closable,
+    onClose
   } = _ref;
+  const [visible, setVisible] = (0, _react.useState)(true);
+  const handleClose = () => {
+    setVisible(false);
+    if (onClose) {
+      onClose();
+    }
+  };
+  if (!visible) {
+    return null;
+  }
   /**
    * Renders the icon based on the presence of a title.
    * If a title is not provided and the icon is a valid React element,
@@ -69,7 +91,11 @@ function CustomInfo(_ref) {
   return /*#__PURE__*/_react.default.createElement(_styles.InfoContainer, {
     $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, {
+  }, /*#__PURE__*/_react.default.createElement(_styles.RowFlex, null, iconConfig.position === 'left' && conditionallyAddTooltipToIcon(), /*#__PURE__*/_react.default.createElement(_styles.ColFlex, {
+    style: {
+      flex: 1
+    }
+  }, title && /*#__PURE__*/_react.default.createElement(_Typography.default, {
     color: fontColor,
     typography: "type-t2-700"
   }, title), description && /*#__PURE__*/_react.default.createElement("div", {
@@ -77,7 +103,13 @@ function CustomInfo(_ref) {
     style: {
       color: "var(--color-".concat(fontColor, ")")
     }
-  }, description)), iconConfig.position === 'right' && conditionallyAddTooltipToIcon()), (buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.label) && /*#__PURE__*/_react.default.createElement(_CustomButton.default, buttonConfig));
+  }, description)), iconConfig.position === 'right' && conditionallyAddTooltipToIcon(), closable && /*#__PURE__*/_react.default.createElement(_styles.CloseButton, {
+    onClick: handleClose
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _CloseRounded.default,
+    color: "secondary-content",
+    size: title ? 24 : 20
+  }))), (buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.label) && /*#__PURE__*/_react.default.createElement(_CustomButton.default, buttonConfig));
 }
 CustomInfo.propTypes = {
   buttonConfig: _propTypes.default.shape({
@@ -100,7 +132,9 @@ CustomInfo.propTypes = {
     tooltipText: _propTypes.default.string
   }),
   title: _propTypes.default.string,
-  borderColor: _propTypes.default.string
+  borderColor: _propTypes.default.string,
+  closable: _propTypes.default.bool,
+  onClose: _propTypes.default.func
 };
 CustomInfo.defaultProps = {
   buttonConfig: {
@@ -115,5 +149,7 @@ CustomInfo.defaultProps = {
   fontColor: 'primary-content',
   title: '',
   description: '',
-  borderColor: ''
+  borderColor: '',
+  closable: false,
+  onClose: null
 };

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

@@ -3,13 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RowFlex = exports.InfoContainer = exports.ColFlex = void 0;
+exports.RowFlex = exports.InfoContainer = exports.ColFlex = exports.CloseButton = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 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 RowFlex = exports.RowFlex = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  width: 100%;\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  border: 1px solid var(--color-", ");\n\n  button {\n    margin-left: 8px;\n  }\n"])), props => props.$color, props => props.$borderColor);
+})(_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);
+const CloseButton = exports.CloseButton = _styledComponents.default.button(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  transition: opacity 0.2s;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &:active {\n    opacity: 0.5;\n  }\n"])));

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"])));