oa-componentbook 0.8.0 → 0.9.0

package/build/components/Accordians.js

@@ -0,0 +1,60 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _Typography = _interopRequireWildcard(require("./oa-component-typography/Typography"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function Accordians(_ref) {
+  let {
+    disabled,
+    onChange,
+    text,
+    typography,
+    borderRadius
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Collapse, {
+    className: "collapseHead",
+    expandIconPosition: "right"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Collapse.Panel, {
+    key: "1",
+    header: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: typography
+    }, "Mandatory Documents", /*#__PURE__*/_react.default.createElement("small", null, "*")), /*#__PURE__*/_react.default.createElement("div", {
+      className: "mendatoryHead gridContainer"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "col-xl-6"
+    }, /*#__PURE__*/_react.default.createElement("h6", null, "Documents")), /*#__PURE__*/_react.default.createElement("div", {
+      className: "col-xl-6"
+    }, /*#__PURE__*/_react.default.createElement("h6", null, "Actions"))))
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "gridContainer"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "gridContainer"
+  }, /*#__PURE__*/_react.default.createElement("div", null, "test"), /*#__PURE__*/_react.default.createElement("div", null, "upload")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-xl-6"
+  }, /*#__PURE__*/_react.default.createElement("div", null, "radio 1 radio 2"))))));
+}
+Accordians.propTypes = {
+  disabled: _propTypes.default.bool,
+  onChange: _propTypes.default.func.isRequired,
+  text: _propTypes.default.string,
+  typography: _propTypes.default.oneOf(_Typography.typographyOptions),
+  borderRadius: _propTypes.default.oneOf(['border-radius-xlarge', 'border-radius-large', 'border-radius-medium', 'border-radius-small', 'border-radius-xsmall', 'border-radius-none', 'border-radius-full'])
+};
+Accordians.defaultProps = {
+  borderRadius: '.border-radius-xsmall',
+  disabled: false,
+  text: 'Accordian Body',
+  typography: '.type-button-500'
+};
+var _default = Accordians;
+exports.default = _default;

package/build/components/oa-component-button/CustomButton.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _icons = require("@ant-design/icons");
 var _Typography = _interopRequireWildcard(require("../oa-component-typography/Typography"));
-var _styles = _interopRequireDefault(require("./styles"));
+var _styles = require("./styles");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,7 +27,7 @@ function CustomButton(_ref) {
     type,
     typography
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_styles.default, {
+  return /*#__PURE__*/_react.default.createElement(_styles.ColoredStyledButton, {
     className: "\n        ".concat(disabled ? "".concat(type.replace('danger-', ''), "-disabled") : type, " \n        ").concat(className, "\n      "),
     disabled: disabled,
     onClick: disabled ? null : onClick,

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

@@ -5,12 +5,14 @@ require("core-js/modules/web.dom-collections.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.ColoredStyledButton = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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 = _default;
 const getSizeStyles = size => {
   switch (size) {
     case 'small':
@@ -32,6 +34,5 @@ const getSizeStyles = size => {
   }
 };
 const StyledButton = _styledComponents.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border-radius: 4px;\n  cursor: pointer;\n\n  .text-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    \n  }\n\n  .anticon-search {\n    margin: 0 8px 0 0;\n  }\n"])));
-const ColoredStyledButton = (0, _styledComponents.default)(StyledButton)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\n  ", "\n\n  &.primary {\n    background: var(--color-blue-CTA);\n    border: 1px solid var(--color-blue-CTA);\n    color: var(--color-white-background);\n  }\n  &.primary:hover {\n    background: var(--color-blue-hover);\n  }\n\n  &.primary-disabled {\n    background: var(--color-grey2-disabled);\n    cursor: not-allowed;\n    color: var(--color-white-background);\n  }\n\n  &.secondary {\n    background: var(--color-white-background);\n    border: 1px solid var(--color-blue-CTA);\n    color: var(--color-blue-CTA);\n  }\n  &.secondary:hover {\n    border: 1px solid var(--color-blue-hover);\n    color: var(--color-blue-hover);\n  }\n\n  &.secondary-disabled {\n    background: var(--color-white-background);\n    border: 1px solid var(--color-grey2-disabled);\n    color: var(--color-grey2-disabled);\n    cursor: not-allowed;\n  }\n\n  &.text-only {\n    border: none;\n    background: var(--color-white-background);\n    color: var(--color-blue-CTA);\n  }\n  &.text-only:hover {\n    color: var(--color-blue-hover);\n  }\n\n  &.text-only-disabled {\n    border: none;\n    background: var(--color-white-background);\n    color: var(--color-grey2-disabled);\n    cursor: not-allowed;\n  }\n  \n  &.danger-primary {\n    background: var(--color-red-error);\n    color: var(--color-white-background);\n    border: 1px solid var(--color-red-error);\n  }\n  &.danger-primary:hover {\n    background: var(--color-red-hover);\n    color: var(--color-white-background);\n    border: 1px solid var(--color-red-hover);\n  }\n\n  &.danger-secondary {\n    color: var(--color-red-error);\n    border: 1px solid var(--color-red-error);\n    background: var(--color-white-background);\n  }\n  &.danger-secondary:hover {\n    color: var(--color-red-hover);\n    border: 1px solid var(--color-red-hover);\n    background: var(--color-white-background);\n  }\n\n  &.danger-text-only {\n    border: none;\n    color: var(--color-red-error);\n    background: var(--color-white-background);\n  }\n  &.danger-text-only:hover {\n    border: none;\n    color: var(--color-red-hover);\n    background: var(--color-white-background);\n  }\n"])), props => getSizeStyles(props.size));
-var _default = ColoredStyledButton;
-exports.default = _default;
+const ColoredStyledButton = (0, _styledComponents.default)(StyledButton)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\n  ", "\n\n  &.primary {\n    background: var(--color-blue-CTA);\n    border: 1px solid var(--color-blue-CTA);\n    color: var(--color-white-background);\n  }\n  &.primary:hover {\n    background: var(--color-blue-hover);\n    border: 1px solid var(--color-blue-hover);\n  }\n\n  &.primary-disabled {\n    background: var(--color-grey2-disabled);\n    cursor: not-allowed;\n    color: var(--color-white-background);\n  }\n\n  &.secondary {\n    background: var(--color-white-background);\n    border: 1px solid var(--color-blue-CTA);\n    color: var(--color-blue-CTA);\n  }\n  &.secondary:hover {\n    border: 1px solid var(--color-blue-hover);\n    color: var(--color-blue-hover);\n  }\n\n  &.secondary-disabled {\n    background: var(--color-white-background);\n    border: 1px solid var(--color-grey2-disabled);\n    color: var(--color-grey2-disabled);\n    cursor: not-allowed;\n  }\n\n  &.text-only {\n    border: none;\n    background: var(--color-white-background);\n    color: var(--color-blue-CTA);\n  }\n  &.text-only:hover {\n    color: var(--color-blue-hover);\n  }\n\n  &.text-only-disabled {\n    border: none;\n    background: var(--color-white-background);\n    color: var(--color-grey2-disabled);\n    cursor: not-allowed;\n  }\n  \n  &.danger-primary {\n    background: var(--color-red-error);\n    color: var(--color-white-background);\n    border: 1px solid var(--color-red-error);\n  }\n  &.danger-primary:hover {\n    background: var(--color-red-hover);\n    color: var(--color-white-background);\n    border: 1px solid var(--color-red-hover);\n  }\n\n  &.danger-secondary {\n    color: var(--color-red-error);\n    border: 1px solid var(--color-red-error);\n    background: var(--color-white-background);\n  }\n  &.danger-secondary:hover {\n    color: var(--color-red-hover);\n    border: 1px solid var(--color-red-hover);\n    background: var(--color-white-background);\n  }\n\n  &.danger-text-only {\n    border: none;\n    color: var(--color-red-error);\n    background: var(--color-white-background);\n  }\n  &.danger-text-only:hover {\n    border: none;\n    color: var(--color-red-hover);\n    background: var(--color-white-background);\n  }\n"])), props => getSizeStyles(props.size));
+exports.ColoredStyledButton = ColoredStyledButton;

package/build/components/oa-component-colorUsage/ColorUsage.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.colorOptions = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styles = _interopRequireDefault(require("./styles"));
+var _styles = require("./styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // Import the styles from the separate file
 
@@ -16,7 +16,7 @@ function ColorUsage(_ref) {
   let {
     color
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_styles.default, {
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledColorUsage, {
     color: color
   }, "--color-".concat(color));
 }

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

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.StyledColorUsage = 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 = _default;
 const StyledColorUsage = _styledComponents.default.h1(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: var(--color-", ");\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100px;\n  width: 450px;\n"])), props => props.color);
-var _default = StyledColorUsage;
-exports.default = _default;
+exports.StyledColorUsage = StyledColorUsage;

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

@@ -8,47 +8,79 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(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 _styles = require("./styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function CustomDrawer(_ref) {
   let {
-    closable,
-    data,
-    height,
+    buttonConfig,
+    children,
+    // This callback function provided by parent is called upon clicking on the close button.
     onClose,
     open,
     placement,
     title,
+    height,
     width
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Drawer, {
-    closable: closable,
-    onClose: onClose,
+  /*
+  We make our own callback function, which makes a call to the `onClose`
+  function given to use by the parent.
+   This is beneficial if we want some of our actions to be executed when
+  we attempt to close the drawer.
+  */
+  const handleClose = () => {
+    onClose();
+    // console.log('`handleClose` callback of CustomDrawer component called.');
+  };
+
+  const drawerTitle = /*#__PURE__*/_react.default.createElement(_styles.CustomDrawerTitle, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-sl1-700"
+  }, title), /*#__PURE__*/_react.default.createElement(_icons.CloseOutlined, {
+    onClick: handleClose
+  }));
+  return /*#__PURE__*/_react.default.createElement(_styles.CustomStyledDrawer, {
+    closeIcon: false,
+    onClose: handleClose,
     open: open,
     placement: placement,
-    title: title,
+    title: drawerTitle,
     height: height,
-    width: width
-  }, data));
+    width: width,
+    footer: /*#__PURE__*/_react.default.createElement(_styles.DrawerFooter, null, buttonConfig.map(button => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+      key: button,
+      label: button.label,
+      onClick: button.callback,
+      size: "large",
+      type: button.type
+    })))
+  }, children);
 }
 CustomDrawer.propTypes = {
-  closable: _propTypes.default.bool,
-  data: _propTypes.default.node.isRequired,
-  onClose: _propTypes.default.func,
+  // Array of button configurations
+  buttonConfig: _propTypes.default.arrayOf(_propTypes.default.shape({
+    callback: _propTypes.default.string.isRequired,
+    label: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['secondary', 'primary']).isRequired
+  })).isRequired,
+  children: _propTypes.default.node.isRequired,
+  onClose: _propTypes.default.func.isRequired,
   open: _propTypes.default.bool,
   placement: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
-  title: _propTypes.default.string,
-  height: _propTypes.default.number.isRequired,
-  width: _propTypes.default.number.isRequired
+  title: _propTypes.default.node,
+  height: _propTypes.default.number,
+  width: _propTypes.default.number
 };
 CustomDrawer.defaultProps = {
-  closable: false,
-  onClose: null,
   open: true,
   placement: 'right',
-  title: ''
+  title: null,
+  height: 378,
+  width: 378
 };
 var _default = CustomDrawer;
 exports.default = _default;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerFooter = exports.CustomStyledDrawer = exports.CustomDrawerTitle = void 0;
+var _antd = require("antd");
+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 DrawerFooter = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    justify-content: flex-end;\n    gap: 12px;\n"])));
+exports.DrawerFooter = DrawerFooter;
+const CustomStyledDrawer = (0, _styledComponents.default)(_antd.Drawer)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .ant-drawer-header {\n    padding: 16px 20px;\n    background: #F6F6F6;\n  }\n\n  .ant-drawer-footer {\n    padding: 16px\n  }\n"])));
+exports.CustomStyledDrawer = CustomStyledDrawer;
+const CustomDrawerTitle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
+exports.CustomDrawerTitle = CustomDrawerTitle;

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

@@ -0,0 +1,92 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.symbol.description.js");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
+var _Typography = _interopRequireWildcard(require("../oa-component-typography/Typography"));
+var _styles = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function CustomModal(_ref) {
+  let {
+    buttonConfig,
+    description,
+    imgSrc,
+    // This callback function provided by parent is called upon clicking on the cancel button
+    onCancel,
+    open,
+    title,
+    typographies,
+    width
+  } = _ref;
+  /*
+  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();
+    // console.log('`handleCancel` callback of CustomModal component called.');
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_antd.Modal, {
+    onCancel: handleCancel,
+    title: /*#__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)),
+    footer: /*#__PURE__*/_react.default.createElement(_styles.ButtonContainer, null, buttonConfig.map(button => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+      key: button,
+      label: button.label,
+      onClick: button.callback,
+      size: "large",
+      type: button.type
+    }))),
+    open: open,
+    width: width
+  }, description && /*#__PURE__*/_react.default.createElement(_styles.DescriptionContainer, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "secondarygrey-text",
+    typography: typographies.description
+  }, description)));
+}
+CustomModal.propTypes = {
+  // Array of button configurations
+  buttonConfig: _propTypes.default.arrayOf(_propTypes.default.shape({
+    callback: _propTypes.default.string.isRequired,
+    label: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['secondary', 'primary']).isRequired
+  })).isRequired,
+  description: _propTypes.default.string,
+  title: _propTypes.default.string.isRequired,
+  typographies: _propTypes.default.shape({
+    title: _propTypes.default.oneOf(_Typography.typographyOptions),
+    description: _propTypes.default.oneOf(_Typography.typographyOptions)
+  }),
+  imgSrc: _propTypes.default.string.isRequired,
+  onCancel: _propTypes.default.func.isRequired,
+  open: _propTypes.default.bool,
+  width: _propTypes.default.string || _propTypes.default.number
+};
+CustomModal.defaultProps = {
+  description: null,
+  open: true,
+  typographies: {
+    title: 'type-t1-500',
+    description: 'type-b2-400'
+  },
+  width: 416
+};
+var _default = CustomModal;
+exports.default = _default;

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

@@ -0,0 +1,16 @@
+"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;
+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 = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 20px;\n  justify-content: flex-end;\n"])));
+exports.ButtonContainer = ButtonContainer;
+const DescriptionContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: 12px 0 24px 0;\n"])));
+exports.DescriptionContainer = DescriptionContainer;
+const TitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 16px;\n  flex-direction: column;\n\n  img {\n    height: 36px;\n    width: 36px;\n  }\n"])));
+exports.TitleContainer = TitleContainer;

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

@@ -7,16 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.notificationOptions = exports.default = void 0;
 require("core-js/modules/es.symbol.description.js");
 require("core-js/modules/web.dom-collections.iterator.js");
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
 var _icons = require("@ant-design/icons");
 var _Typography = _interopRequireWildcard(require("../oa-component-typography/Typography"));
-var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
 var _styles = _interopRequireDefault(require("./styles"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // Import the styles from the separate file
 
 const notificationOptions = ['green-success', 'red-error'];
@@ -24,7 +23,7 @@ exports.notificationOptions = notificationOptions;
 function Notification(_ref) {
   let {
     description,
-    onChange,
+    isDisplayed,
     placement,
     title,
     type,
@@ -47,7 +46,7 @@ function Notification(_ref) {
     api.open({
       message: customNotification,
       closeIcon: false,
-      duration: 2000,
+      duration: isDisplayed ? 0 : 2000,
       style: {
         padding: '8px 16px 8px 16px',
         borderRadius: '4px',
@@ -57,17 +56,18 @@ function Notification(_ref) {
       placement
     });
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, contextHolder, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
-    typography: typographies.button,
-    label: "Trigger Notification",
-    onClick: openNotification,
-    size: "small",
-    type: "primary"
-  }));
+
+  // This is for displaying the notification on storybook
+  (0, _react.useEffect)(() => {
+    if (isDisplayed) {
+      openNotification();
+    }
+  });
+  return contextHolder;
 }
 Notification.propTypes = {
   description: _propTypes.default.string.isRequired,
-  onChange: _propTypes.default.func.isRequired,
+  isDisplayed: _propTypes.default.bool,
   placement: _propTypes.default.oneOf(['topLeft', 'topRight', 'bottomLeft', 'bottomRight']),
   title: _propTypes.default.string.isRequired,
   type: _propTypes.default.oneOf(['success', 'failure']).isRequired,
@@ -78,6 +78,7 @@ Notification.propTypes = {
   })
 };
 Notification.defaultProps = {
+  isDisplayed: false,
   placement: 'topRight',
   typographies: {
     button: 'type-button-500',

package/build/components/oa-component-radio/{CustomRadio.jsx.js → CustomRadio.js}

@@ -5,7 +5,7 @@ require("core-js/modules/web.dom-collections.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.CustomRadioGroup = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
@@ -19,13 +19,15 @@ function CustomRadio(_ref) {
     onChange,
     size,
     label,
-    typography
+    typography,
+    value
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_antd.Radio, {
     disabled: disabled,
     onChange: disabled ? null : onChange,
     size: size,
-    type: "radio1"
+    type: "radio1",
+    value: value
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     typography: typography
   }, label));
@@ -35,7 +37,8 @@ CustomRadio.propTypes = {
   onChange: _propTypes.default.func.isRequired,
   size: _propTypes.default.oneOf(['small', 'middle', 'large']),
   label: _propTypes.default.string.isRequired,
-  typography: _propTypes.default.oneOf(_Typography.typographyOptions)
+  typography: _propTypes.default.oneOf(_Typography.typographyOptions),
+  value: _propTypes.default.number.isRequired
 };
 CustomRadio.defaultProps = {
   disabled: false,
@@ -43,4 +46,6 @@ CustomRadio.defaultProps = {
   typography: 'type-b1-400'
 };
 var _default = CustomRadio;
-exports.default = _default;
+exports.default = _default;
+const CustomRadioGroup = _antd.Radio.Group;
+exports.CustomRadioGroup = CustomRadioGroup;

package/build/components/oa-component-textarea/TextArea.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = _interopRequireDefault(require("./styles"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function TextArea(_ref) {
+  let {
+    rows,
+    placeholder,
+    maxLength,
+    className
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_styles.default, {
+    rows: rows,
+    placeholder: placeholder,
+    maxLength: maxLength,
+    className: "custom-textarea ".concat(className)
+  }));
+}
+TextArea.propTypes = {
+  rows: _propTypes.default.number,
+  placeholder: _propTypes.default.string,
+  maxLength: _propTypes.default.number,
+  className: _propTypes.default.string
+};
+TextArea.defaultProps = {
+  rows: 2,
+  placeholder: null,
+  maxLength: 100,
+  className: ''
+};
+var _default = TextArea;
+exports.default = _default;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _antd = require("antd");
+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 {
+  TextArea: AntdTextArea
+} = _antd.Input;
+const StyledTextArea = (0, _styledComponents.default)(AntdTextArea)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.custom-textarea {\n    padding: 12px;\n    resize: none;\n    border-radius: 4px;\n    max-height: 96px;\n  }\n"])));
+var _default = StyledTextArea;
+exports.default = _default;

package/build/components/oa-component-timeline/CustomTimeline.js

@@ -0,0 +1,44 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Typography = _interopRequireWildcard(require("../oa-component-typography/Typography"));
+var _styles = require("./styles");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function CustomTimeline(_ref) {
+  let {
+    stepsData,
+    currentStep,
+    typography
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_styles.CustomSteps, {
+    progressDot: true,
+    current: currentStep,
+    direction: "horizontal"
+  }, stepsData.map(step => /*#__PURE__*/_react.default.createElement(_styles.CustomStep, {
+    key: step,
+    title: /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: typography
+    }, step.title)
+  })));
+}
+CustomTimeline.propTypes = {
+  stepsData: _propTypes.default.arrayOf(_propTypes.default.shape({
+    title: _propTypes.default.string.isRequired
+  })).isRequired,
+  currentStep: _propTypes.default.number.isRequired,
+  typography: _propTypes.default.oneOf(_Typography.typographyOptions)
+};
+CustomTimeline.defaultProps = {
+  typography: 'type-b3-400'
+};
+var _default = CustomTimeline;
+exports.default = _default;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CustomSteps = exports.CustomStep = void 0;
+var _antd = require("antd");
+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 = _default;
+const CustomSteps = (0, _styledComponents.default)(_antd.Steps)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: block;\n    position: relative;\n\n    .ant-steps-item-icon {\n      width: 16px !important;\n      height: 16px !important;\n      margin-inline-start: 62px !important;\n    }\n    .ant-steps-item-tail {\n      top: 6px !important;\n    }\n    .ant-steps-icon-dot {\n      background: #00875A !important;\n    }\n    .ant-steps-item-tail::after {\n      height: 2px !important;\n      width: 100% !important;\n      margin-inline-start: -8px !important;\n    }\n    .ant-steps-item-finish .ant-steps-item-tail::after {\n      background: #00875A !important;\n    }\n    .ant-steps-item-process .ant-steps-item-tail::after {\n      background-color: rgba(5, 5, 5, 0.06) !important;\n    }\n    .ant-steps-item-wait .ant-steps-icon-dot {\n      background-color: rgb(240 240 240)!important;\n    }\n    .ant-steps-item-content {\n      margin-top: 8px !important;\n    }\n"])));
+exports.CustomSteps = CustomSteps;
+const CustomStep = _antd.Steps.Step;
+exports.CustomStep = CustomStep;

package/build/components/oa-component-toggle/CustomToggle.js

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _antd = require("antd");
-var _styles = _interopRequireDefault(require("./styles"));
+var _styles = require("./styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // Import the styles from the separate file
 
@@ -20,29 +19,25 @@ function CustomToggle(_ref) {
     type,
     size
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
-    theme: {
-      components: {
-        Switch: _styles.default // Use the styled Switch component
-      }
-    }
-  }, /*#__PURE__*/_react.default.createElement(_styles.default, {
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledSwitch, {
     checkedChildren: checkedLabel,
     unCheckedChildren: uncheckedLabel,
     disabled: disabled,
     onChange: disabled ? null : onChange,
     defaultChecked: true
-  }));
+  });
 }
 CustomToggle.propTypes = {
-  checkedLabel: _propTypes.default.string.isRequired,
+  checkedLabel: _propTypes.default.string,
   disabled: _propTypes.default.bool,
   onChange: _propTypes.default.func.isRequired,
-  uncheckedLabel: _propTypes.default.string.isRequired,
+  uncheckedLabel: _propTypes.default.string,
   size: _propTypes.default.oneOf(['large', 'small']).isRequired,
   type: _propTypes.default.oneOf(['primary', 'secondary']).isRequired
 };
 CustomToggle.defaultProps = {
+  checkedLabel: null,
+  uncheckedLabel: null,
   disabled: false
 };
 var _default = CustomToggle;

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

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.StyledSwitch = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _antd = require("antd");
 var _templateObject; // ToggleStyles.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) } })); }
-const StyledSwitch = (0, _styledComponents.default)(_antd.Switch)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && {\n    // Customize the track color based on the type prop\n    background-color: ", "; // Secondary color\n\n    // Customize the handle (knob) color based on the type prop\n    .ant-switch-handle::before {\n      background-color: ", "; // Secondary color\n    }\n\n    // Customize the track size based on the size prop\n    height: ", ";\n    width: ", ";\n\n    // Customize other styles as needed\n    // For example, padding, border-radius, etc.\n    // Example:\n    // padding: 2px;\n    // border-radius: 4px;\n  }\n"])), props => props.type === 'primary' ? '#00875A' // Primary color
-: '#FF5733', props => props.type === 'primary' ? '#00875A' // Primary color
-: '#FF5733', props => props.size === 'large' ? '32px' : '20px', props => props.size === 'large' ? '56px' : '35px');
-var _default = StyledSwitch;
-exports.default = _default;
+var _default = {};
+exports.default = _default;
+const StyledSwitch = (0, _styledComponents.default)(_antd.Switch)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && {\n    // Customize the track color based on the type prop\n    background-color: ", "; // Secondary color\n    \n    display: flex;\n\n    // Customize the handle (knob) color based on the type prop\n    .ant-switch-handle::before {\n      /* height: 100%; */\n    }\n\n    // Customize the track size based on the size prop\n    height: ", ";\n    width: ", "\n    // Customize other styles as needed\n    // For example, padding, border-radius, etc.\n    // Example:\n    // padding: 2px;\n    // border-radius: 4px;\n  }\n"])), props => props.type === 'primary' ? '#00875A' // Primary color
+: '#FF5733', props => props.size === 'large' ? '32px' : '20px', props => props.checkedLabel === null && props.uncheckedLabel === null && (props.size === 'large' ? '56px' : '35px'));
+exports.StyledSwitch = StyledSwitch;

package/build/components/oa-component-typography/Typography.js

@@ -7,7 +7,7 @@ exports.typographyOptions = exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ColorUsage = require("../oa-component-colorUsage/ColorUsage");
-var _styles = _interopRequireDefault(require("./styles"));
+var _styles = require("./styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const typographyOptions = ['type-d1-500', 'type-d2-500', 'type-h1-500', 'type-h2-500', 'type-h3-500', 'type-t1-500', 'type-t2-700', 'type-b1-400', 'type-b2-400', 'type-b3-400', 'type-button-500', 'type-sl1-700'];
 exports.typographyOptions = typographyOptions;
@@ -17,7 +17,7 @@ function Typography(_ref) {
     color,
     typography
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_styles.default, {
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledTypography, {
     color: color,
     className: "".concat(typography)
   }, children);

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

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.StyledTypography = 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 = _default;
 const StyledTypography = _styledComponents.default.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  // If a color is provided then that is used, otherwise the color is inherited from parent.\n  color: ", ";\n\n  &.type-d1-500 {\n    font-size: 56px;\n    font-weight: 500;\n    line-height: 68px;\n  }\n  \n  &.type-d2-500 {\n    font-size: 40px;\n    font-weight: 500;\n    line-height: 52px;\n  }\n  \n  &.type-h1-500 {\n    font-size: 32px;\n    font-weight: 500;\n    line-height: 40px;\n  }\n  \n  &.type-h2-500 {\n    font-size: 28px;\n    font-weight: 600;\n    line-height: 36px;\n  }\n  \n  &.type-h3-500 {\n    font-size: 24px;\n    font-weight: 600;\n    line-height: 32px;\n  }\n  \n  &.type-t1-500 {\n    font-size: 20px;\n    font-weight: 500;\n    line-height: 28px;\n  }\n  \n  &.type-t2-700 {\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 24px;\n  }\n  \n  &.type-b1-400 {\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 24px;\n  }\n  \n  &.type-b2-400 {\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n  }\n  \n  &.type-b3-400 {\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 16px;\n  }\n  \n  &.type-button-500 {\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 20px;\n  }\n  \n  &.type-sl1-700 {\n    font-size: 12px;\n    font-weight: 700;\n    line-height: 16px;\n    letter-spacing: 0.24px;\n    text-transform: uppercase;\n  }\n"])), props => props.color !== null ? "var(--color-".concat(props.color, ")") : 'inherit');
-var _default = StyledTypography;
-exports.default = _default;
+exports.StyledTypography = StyledTypography;

package/build/index.js

@@ -5,6 +5,18 @@ require("core-js/modules/web.dom-collections.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "Accordians", {
+  enumerable: true,
+  get: function get() {
+    return _Accordians.default;
+  }
+});
+Object.defineProperty(exports, "Address", {
+  enumerable: true,
+  get: function get() {
+    return _Address.default;
+  }
+});
 Object.defineProperty(exports, "CheckBox", {
   enumerable: true,
   get: function get() {
@@ -41,6 +53,12 @@ Object.defineProperty(exports, "CustomDrawer", {
     return _CustomDrawer.default;
   }
 });
+Object.defineProperty(exports, "CustomModal", {
+  enumerable: true,
+  get: function get() {
+    return _CustomModal.default;
+  }
+});
 Object.defineProperty(exports, "CustomNotification", {
   enumerable: true,
   get: function get() {
@@ -65,12 +83,24 @@ Object.defineProperty(exports, "CustomTabs", {
     return _CustomTabs.default;
   }
 });
+Object.defineProperty(exports, "CustomTimeline", {
+  enumerable: true,
+  get: function get() {
+    return _CustomTimeline.default;
+  }
+});
 Object.defineProperty(exports, "KeyValueDataView", {
   enumerable: true,
   get: function get() {
     return _KeyValueDataView.default;
   }
 });
+Object.defineProperty(exports, "SendPaymentLink", {
+  enumerable: true,
+  get: function get() {
+    return _SendPaymentLink.default;
+  }
+});
 Object.defineProperty(exports, "SpacingScales", {
   enumerable: true,
   get: function get() {
@@ -83,12 +113,24 @@ Object.defineProperty(exports, "StageTimeline", {
     return _StageTimeline.default;
   }
 });
+Object.defineProperty(exports, "TextArea", {
+  enumerable: true,
+  get: function get() {
+    return _TextArea.default;
+  }
+});
 Object.defineProperty(exports, "Toggle", {
   enumerable: true,
   get: function get() {
     return _CustomToggle.default;
   }
 });
+Object.defineProperty(exports, "TrackShipment", {
+  enumerable: true,
+  get: function get() {
+    return _TrackShipment.default;
+  }
+});
 Object.defineProperty(exports, "Typography", {
   enumerable: true,
   get: function get() {
@@ -107,21 +149,28 @@ Object.defineProperty(exports, "typographyOptions", {
     return _Typography.typographyOptions;
   }
 });
+var _Accordians = _interopRequireDefault(require("./components/Accordians"));
 var _CustomCheckBox = _interopRequireDefault(require("./components/oa-component-checkbox/CustomCheckBox"));
 var _ColorUsage = _interopRequireWildcard(require("./components/oa-component-colorUsage/ColorUsage"));
-var _ColorVariables = _interopRequireDefault(require("./components/ColorVariables"));
 var _CornerRadius = _interopRequireDefault(require("./components/oa-component-cornerRadius/CornerRadius"));
 var _CustomButton = _interopRequireDefault(require("./components/oa-component-button/CustomButton"));
 var _CustomDrawer = _interopRequireDefault(require("./components/oa-component-drawer/CustomDrawer"));
-var _KeyValueDataView = _interopRequireDefault(require("./widgets/oa-widget-keyValueDataView/KeyValueDataView"));
-var _StageTimeline = _interopRequireDefault(require("./widgets/oa-widget-stagesTimeline/StageTimeline"));
+var _CustomModal = _interopRequireDefault(require("./components/oa-component-modal/CustomModal"));
 var _CustomNotification = _interopRequireDefault(require("./components/oa-component-notification/CustomNotification"));
-var _CustomRadio = _interopRequireDefault(require("./components/oa-component-radio/CustomRadio.jsx"));
+var _CustomRadio = _interopRequireDefault(require("./components/oa-component-radio/CustomRadio"));
 var _SpacingScales = _interopRequireDefault(require("./components/oa-component-spacingScales/SpacingScales"));
 var _CustomTable = _interopRequireDefault(require("./components/oa-component-table/CustomTable"));
 var _CustomTabs = _interopRequireDefault(require("./components/oa-component-tabs/CustomTabs"));
+var _TextArea = _interopRequireDefault(require("./components/oa-component-textarea/TextArea"));
+var _CustomTimeline = _interopRequireDefault(require("./components/oa-component-timeline/CustomTimeline"));
 var _CustomToggle = _interopRequireDefault(require("./components/oa-component-toggle/CustomToggle"));
+var _TrackShipment = _interopRequireDefault(require("./widgets/oa-widget-track-shipment/TrackShipment"));
 var _Typography = _interopRequireWildcard(require("./components/oa-component-typography/Typography"));
+var _ColorVariables = _interopRequireDefault(require("./components/ColorVariables"));
+var _Address = _interopRequireDefault(require("./widgets/oa-widget-address/Address"));
+var _KeyValueDataView = _interopRequireDefault(require("./widgets/oa-widget-keyValueDataView/KeyValueDataView"));
+var _SendPaymentLink = _interopRequireDefault(require("./widgets/oa-widget-send-payment-link/SendPaymentLink"));
+var _StageTimeline = _interopRequireDefault(require("./widgets/oa-widget-stagesTimeline/StageTimeline"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/build/widgets/oa-widget-address/Address.js

@@ -0,0 +1,61 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Address;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Typography = _interopRequireWildcard(require("../../components/oa-component-typography/Typography"));
+var _styles = require("./styles");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function Address(_ref) {
+  let {
+    addressObject,
+    heading,
+    typography
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_styles.AddressContainer, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: typography
+  }, heading), /*#__PURE__*/_react.default.createElement(_styles.AddressLines, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "secondarygrey-text",
+    typography: typography
+  }, addressObject.addressLine1), addressObject.addressLine2 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "secondarygrey-text",
+    typography: typography
+  }, addressObject.addressLine2), addressObject.addressLine3 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "secondarygrey-text",
+    typography: typography
+  }, addressObject.addressLine3), addressObject.landmark && /*#__PURE__*/_react.default.createElement("i", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "secondarygrey-text",
+    typography: typography
+  }, "Near", ' ', addressObject.landmark)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "secondarygrey-text",
+    typography: typography
+  }, addressObject.city, ', ', addressObject.state, "-", addressObject.pincode)));
+}
+Address.propTypes = {
+  addressObject: _propTypes.default.shape({
+    addressLine1: _propTypes.default.string.isRequired,
+    addressLine2: _propTypes.default.string,
+    addressLine3: _propTypes.default.string,
+    landmark: _propTypes.default.string.isRequired,
+    pincode: (_propTypes.default.string || _propTypes.default.number).isRequired,
+    city: _propTypes.default.string.isRequired,
+    state: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['permanent', 'temporary']),
+    additional_info: _propTypes.default.shape({
+      lat: _propTypes.default.string,
+      long: _propTypes.default.string
+    })
+  }).isRequired,
+  heading: _propTypes.default.string.isRequired,
+  typography: _propTypes.default.oneOf(_Typography.typographyOptions)
+};
+Address.defaultProps = {
+  typography: 'type-b2-400'
+};

package/build/widgets/oa-widget-address/styles.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AddressLines = exports.AddressContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2;
+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 = _default;
+const AddressContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    gap: 12px;    \n    width: 100%\n"])));
+exports.AddressContainer = AddressContainer;
+const AddressLines = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n"])));
+exports.AddressLines = AddressLines;

package/build/widgets/oa-widget-send-payment-link/SendPaymentLink.js

@@ -0,0 +1,109 @@
+"use strict";
+
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SendPaymentLink;
+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 _styles = require("./styles");
+var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
+var _CustomDrawer = _interopRequireDefault(require("../../components/oa-component-drawer/CustomDrawer"));
+var _CustomRadio = _interopRequireWildcard(require("../../components/oa-component-radio/CustomRadio"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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); } // TODO: Select the appropriate typographies for each text below.
+function SendPaymentLink(_ref) {
+  let {
+    heading,
+    options,
+    onSubmit
+  } = _ref;
+  const [form] = _antd.Form.useForm();
+  const [selectedRadio, setSelectedRadio] = (0, _react.useState)(0);
+  const [open, setOpen] = (0, _react.useState)(true);
+  const onChange = event => {
+    setSelectedRadio(event.target.value);
+
+    // Setting mobileNum and email to falsy values just in case the data is empty.
+    const newValues = _objectSpread({
+      mobileNum: null,
+      email: ''
+    }, options[event.target.value].data);
+    form.setFieldsValue(newValues);
+  };
+  const onOpen = () => {
+    setOpen(true);
+  };
+  const onClose = () => {
+    setOpen(false);
+  };
+  return /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
+    closable: true,
+    footer: /*#__PURE__*/_react.default.createElement(_styles.ButtonContainer, null, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+      label: "Cancel",
+      onClick: onClose,
+      type: "secondary"
+    }), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+      label: "Send"
+      // Calling submit on the form, if the Send button is clicked
+      ,
+      onClick: () => form.submit()
+    })),
+    onClose: onClose,
+    open: open,
+    title: /*#__PURE__*/_react.default.createElement(_Typography.default, null, heading)
+  }, /*#__PURE__*/_react.default.createElement(_styles.RadioContainer, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-t2-700"
+  }, "Send to:"), /*#__PURE__*/_react.default.createElement(_CustomRadio.CustomRadioGroup, {
+    onChange: onChange,
+    value: selectedRadio
+  }, /*#__PURE__*/_react.default.createElement(_styles.RadioGrid, null, options.map((option, idx) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+    key: option.value
+  }, /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
+    label: option.label,
+    value: idx
+  })))))), /*#__PURE__*/_react.default.createElement(_antd.Form, {
+    form: form,
+    initialValues: options[0].data,
+    layout: "vertical",
+    onFinish: onSubmit
+    // The provided callback `onSubmit` (using the alias `onFinish`)
+    // is called with the form data, upon the form being submitted
+  }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    label: /*#__PURE__*/_react.default.createElement(_Typography.default, null, "Mobile Number"),
+    name: "mobileNum"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    disabled: options[selectedRadio].data.mobileNum
+  })), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    label: /*#__PURE__*/_react.default.createElement(_Typography.default, null, "Email ID"),
+    name: "email"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    disabled: options[selectedRadio].data.email
+  }))));
+}
+SendPaymentLink.propTypes = {
+  heading: _propTypes.default.string,
+  onSubmit: _propTypes.default.func.isRequired,
+  options: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.string.isRequired,
+    value: _propTypes.default.string.isRequired,
+    data: _propTypes.default.shape({
+      mobileNum: _propTypes.default.number || _propTypes.default.string,
+      email: _propTypes.default.string
+    })
+  })).isRequired
+};
+SendPaymentLink.defaultProps = {
+  heading: ''
+};

package/build/widgets/oa-widget-send-payment-link/example-usage.md

@@ -0,0 +1,34 @@
+```jsx
+const onSubmit = ({ mobileNum, email }) => {
+  // Use the mobile number and email obtained from the form over here.
+  console.log(`Phone Number is '${mobileNum}'`);
+  console.log(`Email ID is '${email}'`);
+};
+
+const sendPaymentProps = {
+  heading: 'SEND PAYMENT LINK',
+  options:
+    [
+      {
+        label: 'Customer',
+        value: 'customer',
+        data: {
+          mobileNum: 9898989898,
+          email: 'abc@gmail.com',
+        }, // prefilled data of customer
+      },
+      {
+        label: 'Alternate Contact',
+        value: 'alternate_contact',
+        data: {
+        },
+      },
+    ],
+};
+
+<SendPaymentLink
+    heading={sendPaymentProps.heading}
+    options={sendPaymentProps.options}
+    onSubmit={onSubmit}
+/>
+```

package/build/widgets/oa-widget-send-payment-link/styles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RadioGrid = exports.RadioContainer = exports.ButtonContainer = void 0;
+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 RadioContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n    margin-bottom: 20px;\n"])));
+
+// This helps make the radio buttons aligned in uniform columns
+exports.RadioContainer = RadioContainer;
+const RadioGrid = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n"])));
+exports.RadioGrid = RadioGrid;
+const ButtonContainer = _styledComponents.default.section(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: flex;\n    justify-content: flex-end;\n    gap: 20px;\n"])));
+exports.ButtonContainer = ButtonContainer;

package/build/widgets/oa-widget-track-shipment/TrackShipment.js

@@ -0,0 +1,102 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+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 _Address = _interopRequireDefault(require("../oa-widget-address/Address"));
+var _CustomTimeline = _interopRequireDefault(require("../../components/oa-component-timeline/CustomTimeline"));
+var _Typography = _interopRequireWildcard(require("../../components/oa-component-typography/Typography"));
+var _templateObject;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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 AddressesContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-evenly;\n  gap: 24px;\n  \n  margin: 24px 0 36px;\n"])));
+function TrackShipment(_ref) {
+  let {
+    awbNumber,
+    currentStep,
+    stepsData,
+    fromAddressHeading,
+    fromAddressObject,
+    title,
+    toAddressHeading,
+    toAddressObject,
+    typographies
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("section", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: typographies.title
+  }, /*#__PURE__*/_react.default.createElement("div", null, title)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: typographies.awb
+  }, "AWB Number:", ' ', awbNumber), /*#__PURE__*/_react.default.createElement(AddressesContainer, null, /*#__PURE__*/_react.default.createElement(_Address.default, {
+    addressObject: fromAddressObject,
+    heading: fromAddressHeading,
+    typography: typographies.awb
+  }), /*#__PURE__*/_react.default.createElement(_Address.default, {
+    addressObject: toAddressObject,
+    heading: toAddressHeading,
+    typography: typographies.awb
+  })), /*#__PURE__*/_react.default.createElement(_CustomTimeline.default, {
+    currentStep: currentStep,
+    stepsData: stepsData,
+    typography: typographies.steps
+  }));
+}
+TrackShipment.propTypes = {
+  awbNumber: _propTypes.default.string.isRequired,
+  currentStep: _propTypes.default.number.isRequired,
+  stepsData: _propTypes.default.arrayOf(_propTypes.default.shape({
+    title: _propTypes.default.string.isRequired
+  })).isRequired,
+  fromAddressHeading: _propTypes.default.string.isRequired,
+  fromAddressObject: _propTypes.default.shape({
+    addressLine1: _propTypes.default.string.isRequired,
+    addressLine2: _propTypes.default.string,
+    addressLine3: _propTypes.default.string,
+    landmark: _propTypes.default.string.isRequired,
+    pincode: (_propTypes.default.string || _propTypes.default.number).isRequired,
+    city: _propTypes.default.string.isRequired,
+    state: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['permanent', 'temporary']),
+    additional_info: _propTypes.default.shape({
+      lat: _propTypes.default.string,
+      long: _propTypes.default.string
+    })
+  }).isRequired,
+  title: _propTypes.default.string.isRequired,
+  toAddressHeading: _propTypes.default.string.isRequired,
+  toAddressObject: _propTypes.default.shape({
+    addressLine1: _propTypes.default.string.isRequired,
+    addressLine2: _propTypes.default.string,
+    addressLine3: _propTypes.default.string,
+    landmark: _propTypes.default.string.isRequired,
+    pincode: (_propTypes.default.string || _propTypes.default.number).isRequired,
+    city: _propTypes.default.string.isRequired,
+    state: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['permanent', 'temporary']),
+    additional_info: _propTypes.default.shape({
+      lat: _propTypes.default.string,
+      long: _propTypes.default.string
+    })
+  }).isRequired,
+  typographies: _propTypes.default.shape({
+    awb: _propTypes.default.oneOf(_Typography.typographyOptions),
+    steps: _propTypes.default.oneOf(_Typography.typographyOptions),
+    title: _propTypes.default.oneOf(_Typography.typographyOptions)
+  })
+};
+TrackShipment.defaultProps = {
+  typographies: {
+    awb: 'type-b2-400',
+    steps: 'type-b3-400',
+    title: 'type-t1-500'
+  }
+};
+var _default = TrackShipment;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",