oa-componentbook 0.0.0-sit1.1

package/build/components/oa-component-lable/CustomLable.js

@@ -0,0 +1,37 @@
+"use strict";
+
+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 _icons = require("@ant-design/icons");
+var _styles = require("./styles");
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const text = /*#__PURE__*/_react.default.createElement("span", null, "prompt text");
+/**
+ * CustomLabel component displays a label with optional info circle tooltip.
+ *
+ * @param {boolean} showInfoCircle - Flag to show the info circle tooltip.
+ */
+function CustomLabel(_ref) {
+  let {
+    showInfoCircle
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_styles.Stylelabels, {
+    className: "type-b2-400"
+  }, "CustomLabel", showInfoCircle && /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+    placement: "topLeft",
+    title: text
+  }, /*#__PURE__*/_react.default.createElement(_icons.InfoCircleFilled, null)));
+}
+CustomLabel.propTypes = {
+  showInfoCircle: _propTypes.default.bool
+};
+CustomLabel.defaultProps = {
+  showInfoCircle: false
+};
+var _default = exports.default = CustomLabel;

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Stylelabels = 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) } })); }
+var _default = exports.default = {};
+const Stylelabels = exports.Stylelabels = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: var(--color-primary-content);\n  margin: 0 0 4px;\n  display: inline-flex;\n  .anticon-info-circle{\n    margin: 0 0 0 8px;\n    color: var(--color-secondary-content);\n    cursor: pointer;\n    .ant-tooltip-placement-bottomLeft .ant-tooltip-arrow {\n        left: 3px;\n    }\n\n    .ant-tooltip-inner {\n        background-color: var(--color-primary-content);\n    }\n  }\n"])));

package/build/components/oa-component-loader/CustomLoader.js

@@ -0,0 +1,66 @@
+"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"));
+const _excluded = ["children", "contentHeight", "delay", "size", "spinning"];
+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; }
+/**
+ * A custom loader component that extends Ant Design's Spin component.
+ *
+ * @param {React.ReactNode} children - The DOM element on which the loader should be centered.
+ * @param {string} contentHeight - The height of the content that this loader is spinning over.
+ * @param {number} delay - The delay in which the loader should be displayed.
+ * @param {string} size - The size of the loader (small, default, or large).
+ * @param {boolean} spinning - Determines whether the loader is displayed or hidden.
+ * @param {object} antDesignProps - Any additional props that should be passed to the Ant Design Spin component.
+ * @returns {ReactElement} The rendered CustomLoader component.
+ */
+function CustomLoader(_ref) {
+  let {
+      children,
+      contentHeight,
+      delay,
+      size,
+      spinning
+    } = _ref,
+    antDesignProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      components: {
+        Spin: {
+          contentHeight
+        }
+      },
+      token: {
+        colorPrimary: _ColorVariablesMap.default['--color-primary']
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Spin, _extends({
+    delay: delay,
+    size: size,
+    spinning: spinning
+  }, antDesignProps), children));
+}
+CustomLoader.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  contentHeight: _propTypes.default.string,
+  delay: _propTypes.default.number,
+  size: _propTypes.default.oneOf(['small', 'default', 'large']),
+  spinning: _propTypes.default.bool.isRequired
+};
+CustomLoader.defaultProps = {
+  contentHeight: 'none',
+  delay: 500,
+  size: 'default'
+};
+var _default = exports.default = CustomLoader;

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

@@ -0,0 +1,153 @@
+"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 _icons = require("@ant-design/icons");
+var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+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"];
+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.
+   */
+function CustomModal(_ref) {
+  let {
+      buttonConfig,
+      children,
+      'data-test': dataTest,
+      imgSrc,
+      // This callback function provided by parent is called upon clicking on the cancel button
+      onCancel,
+      open,
+      title,
+      typographies,
+      width
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  /*
+  We make our own callback function, which makes a call to the `onCancel`
+  function given to use by the parent.
+   This is beneficial if we want some of our actions to be executed when
+  cancel is executed.
+  */
+  const handleCancel = () => {
+    onCancel();
+  };
+  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      token: {
+        colorBgMask: 'rgba(0, 0, 0, 0.7)'
+      }
+    }
+  }, open && /*#__PURE__*/_react.default.createElement(_antd.Modal, _extends({
+    closeIcon: /*#__PURE__*/_react.default.createElement(_icons.CloseCircleFilled, {
+      style: {
+        fontSize: '26px'
+      }
+    }),
+    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({
+      key: (0, _utils.getUUID)()
+    }, button, {
+      iconConfig: button === null || button === void 0 ? void 0 : button.iconConfig,
+      label: button.label,
+      onClick: button.callback,
+      size: "large",
+      type: button === null || button === void 0 ? void 0 : button.type,
+      "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: ""
+    }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: typographies.title
+    }, title)),
+    width: width
+  }, 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, {
+    color: "secondary-content",
+    typography: typographies.children
+  }, children) || children)));
+}
+CustomModal.propTypes = {
+  // Array of button configurations
+  buttonConfig: _propTypes.default.arrayOf(_propTypes.default.shape({
+    callback: _propTypes.default.func.isRequired,
+    'data-test': _propTypes.default.string,
+    label: _propTypes.default.string,
+    iconConfig: _propTypes.default.shape({
+      icon: _propTypes.default.node,
+      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'])
+  })),
+  children: _propTypes.default.node,
+  'data-test': _propTypes.default.string,
+  title: _propTypes.default.string,
+  typographies: _propTypes.default.shape({
+    title: _propTypes.default.oneOf(_typographyOptions.typographyOptions),
+    children: _propTypes.default.oneOf(_typographyOptions.typographyOptions)
+  }),
+  imgSrc: _propTypes.default.string,
+  onCancel: _propTypes.default.func.isRequired,
+  open: _propTypes.default.bool,
+  width: _propTypes.default.string || _propTypes.default.number
+};
+CustomModal.defaultProps = {
+  buttonConfig: [],
+  children: null,
+  'data-test': null,
+  imgSrc: null,
+  open: true,
+  title: null,
+  typographies: {
+    title: 'type-t1-500',
+    children: 'type-b2-400'
+  },
+  width: 416
+};
+var _default = exports.default = CustomModal;

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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: 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  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-notification/CustomNotification.js

@@ -0,0 +1,152 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.notificationOptions = exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.symbol.description.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 _CheckCircle = _interopRequireDefault(require("@material-ui/icons/CheckCircle"));
+var _Cancel = _interopRequireDefault(require("@material-ui/icons/Cancel"));
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
+var _typographyOptions = require("../../global-css/typography-options");
+var _styles = require("./styles");
+const _excluded = ["description", "duration", "onClick", "onClose", "title", "type"];
+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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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; }
+// Import the styles from the separate file
+
+const notificationOptions = exports.notificationOptions = ['positive', 'negative'];
+const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    storyConfig,
+    // Useful only for the purpose of displaying in storybook
+    onClick: _onClick,
+    onClose,
+    placement,
+    typographies
+  } = _ref;
+  const [api, contextHolder] = _antd.notification.useNotification({
+    placement
+  });
+  const openNotification = (0, _react.useCallback)(_ref2 => {
+    let {
+        description,
+        duration,
+        onClick: onClickDynamic = () => {},
+        onClose: onCloseDynamic = () => {},
+        title,
+        type
+      } = _ref2,
+      otherConfig = _objectWithoutProperties(_ref2, _excluded);
+    // type can be success or failure
+
+    let descriptionColor = type === 'success' ? 'secondary-content' : 'secondary-content';
+    const titleColor = type === 'success' ? 'positive' : 'negative';
+    const borderColor = type === 'success' ? 'var(--color-positive)' : 'var(--color-negative)';
+    let defaultStyle = {
+      padding: '12px 16px',
+      borderRadius: '4px',
+      borderLeft: "4px solid ".concat(borderColor),
+      boxShadow: '0px 2px 8px 0px rgba(0, 0, 0, 0.12)',
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      backgroundColor: '#fff'
+    };
+    if ((otherConfig === null || otherConfig === void 0 ? void 0 : otherConfig.mode) === 'dark') {
+      defaultStyle = {
+        backgroundColor: '#212121',
+        textAlign: 'left',
+        borderRadius: '12px',
+        padding: '16px'
+      };
+      descriptionColor = type === 'success' ? 'primary-background' : 'primary-background';
+    }
+    const customNotification = /*#__PURE__*/_react.default.createElement(_styles.StyledNotification, null, (otherConfig === null || otherConfig === void 0 ? void 0 : otherConfig.showIcon) && /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+      color: titleColor,
+      icon: type === 'success' ? _CheckCircle.default : _Cancel.default,
+      size: 24
+    }), /*#__PURE__*/_react.default.createElement("div", null, title && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      color: titleColor,
+      typography: typographies.title
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "Headtitle"
+    }, title)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      color: descriptionColor,
+      typography: typographies.description
+    }, /*#__PURE__*/_react.default.createElement("small", null, description))));
+    const handleClose = () => {
+      onClose();
+      onCloseDynamic();
+    };
+    api.open(_objectSpread({
+      message: customNotification,
+      style: defaultStyle,
+      closeIcon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        color: (otherConfig === null || otherConfig === void 0 ? void 0 : otherConfig.mode) === 'dark' ? 'primary-background' : 'primary-content',
+        icon: _CloseRounded.default,
+        onClick: handleClose,
+        size: 20
+      }),
+      onClick: () => {
+        _onClick();
+        onClickDynamic();
+      },
+      onClose: handleClose,
+      duration: duration !== null && duration !== void 0 ? duration : 4.5
+    }, otherConfig));
+  }, [api, _onClick, onClose, typographies]);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    openNotification
+  }));
+
+  // This is only for the purpose of displaying the notification in storybook.
+  (0, _react.useEffect)(() => {
+    if (storyConfig != null) {
+      openNotification(storyConfig);
+    }
+  }, [storyConfig, openNotification]);
+  return contextHolder;
+});
+Notification.propTypes = {
+  onClick: _propTypes.default.func,
+  onClose: _propTypes.default.func,
+  placement: _propTypes.default.oneOf(['topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'bottom']),
+  storyConfig: _propTypes.default.shape({
+    description: _propTypes.default.string,
+    title: _propTypes.default.string,
+    type: _propTypes.default.oneOf(['success', 'failure'])
+  }),
+  typographies: _propTypes.default.shape({
+    button: _propTypes.default.oneOf(_typographyOptions.typographyOptions),
+    description: _propTypes.default.oneOf(_typographyOptions.typographyOptions),
+    title: _propTypes.default.oneOf(_typographyOptions.typographyOptions)
+  })
+};
+Notification.defaultProps = {
+  onClick: () => {},
+  onClose: () => {},
+  placement: 'topRight',
+  storyConfig: null,
+  typographies: {
+    button: 'type-button-500',
+    description: 'type-b3-400',
+    title: 'type-b2-400'
+  }
+};
+var _default = exports.default = Notification;

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyledNotification = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject; // NotificationStyles.js
+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) } })); }
+var _default = exports.default = {};
+const StyledNotification = exports.StyledNotification = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-notification-notice-close{\n  position: inherit !important;\n}\n  .ant-notification-notice-close svg{\n  font-size: 24px !important;\n  height: auto;\n  }\n.ant-notification-notice-message{\n  margin-bottom: 0;\n}\n  display: flex;\n  justify-content: space-between;  \n  align-items: center;\n  gap: 12px;\n  small{\n    font-size: inherit;\n    display: block;    \n  }\n    .Headtitle{\n    padding: 0 0 4px;\n    }\n  .anticon-close{\n    color: var(--color-secondary-content);\n    \n  }\n  \n"])));

package/build/components/oa-component-notification/usage-example.md

@@ -0,0 +1,44 @@
+# Usage Example of CustomNotification component
+
+## Explanation
+
+We need to use refs in order to use this commponent since the method for calling this notification is quite complex. 
+
+So, we expose that method to the parent using refs. Take a look at the code example below for better understanding.
+
+## Code snippet 
+
+```jsx
+function App() {
+  const myRef = useRef(null);
+  
+  const onClick = () => {
+    console.log('click callback for Notification');
+  };
+
+  const onClose = () => {
+    console.log('close callback for Notification');
+  };
+
+  return (
+    <>
+      <CustomButton 
+        label="trigger notification" 
+        onClick={() => myRef.current.openNotification({
+          description: 'Notification description HERE',
+          title: 'Notification title HERE',
+          type: 'Failure',
+        })} 
+      />
+      <CustomNotification
+        onClick={onClick}
+        onClose={onClose}
+        placement="bottomLeft"
+        ref={myRef}
+      />
+    </>
+  );
+}
+
+export default App;
+```

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 = {};