oa-componentbook 0.5.0 → 0.7.0

package/build/components/{Tabs.js → Accordians.js}

@@ -8,8 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 require("core-js/modules/es.symbol.description.js");
 var _react = _interopRequireWildcard(require("react"));
-var _antd = require("antd");
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _Typography = _interopRequireWildcard(require("./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; }
@@ -18,41 +20,49 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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); }
-const {
-  TabPane
-} = _antd.Tabs;
-const TabsDesign = props => {
-  const {
-    tabPosition,
-    type,
-    defaultActiveKey,
-    style
-  } = props;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: {}
-  }, /*#__PURE__*/_react.default.createElement(_antd.Tabs, {
-    tabPosition: tabPosition,
-    style: _objectSpread({}, style),
-    type: type,
-    defaultActiveKey: defaultActiveKey
-  }, props.data.tabs.length > 0 && props.data.tabs.map((item, i) => /*#__PURE__*/_react.default.createElement(TabPane, {
-    tab: item.label,
-    key: item.key,
-    disabled: item.disabled
-  }, item.body))));
-};
-TabsDesign.propTypes = {
-  tabPosition: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
-  type: _propTypes.default.oneOf(['line', 'card', 'editable-card']),
-  defaultActiveKey: _propTypes.default.string,
-  style: _propTypes.default.object
+function Accordians(_ref) {
+  let {
+    disabled,
+    onChange,
+    text,
+    typography,
+    borderRadius
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Collapse, {
+    style: _objectSpread({}, _styles.cornerRadiusStyle[borderRadius]),
+    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'])
 };
-TabsDesign.defaultProps = {
-  tabPosition: 'top',
-  type: 'line',
-  defaultActiveKey: '1',
+Accordians.defaultProps = {
+  borderRadius: '.border-radius-xsmall',
   disabled: false,
-  style: {}
+  text: 'Accordian Body',
+  typography: '.type-button-500'
 };
-var _default = TabsDesign;
+var _default = Accordians;
 exports.default = _default;

package/build/components/{Wallet Service Details/basicQuestions.js → CheckBoxes.js}

@@ -6,30 +6,36 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
-require("./styles/styles.css");
-var _QuesAnsView = _interopRequireDefault(require("../QuesAnsView"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _Typography = _interopRequireWildcard(require("./Typography"));
 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; }
-const BasicQuestions = () => {
-  const data = [{
-    questionName: 'Customer Name',
-    customerAnwser: 'Test'
-  }, {
-    questionName: 'Customer Address',
-    customerAnwser: 'GGN'
-  }, {
-    questionName: 'Loss Amount',
-    customerAnwser: '120000'
-  }, {
-    questionName: 'When did you find out about the loss',
-    customerAnwser: '28-Aug-2023'
-  }];
-  return /*#__PURE__*/_react.default.createElement(_QuesAnsView.default, {
-    data: data
-  });
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function CheckBoxes(_ref) {
+  let {
+    disabled,
+    onChange,
+    text,
+    typography
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_antd.Checkbox, {
+    disabled: disabled,
+    onChange: disabled ? null : onChange
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: typography
+  }, text));
+}
+CheckBoxes.propTypes = {
+  disabled: _propTypes.default.bool,
+  onChange: _propTypes.default.func.isRequired,
+  text: _propTypes.default.string.isRequired,
+  typography: _propTypes.default.oneOf(_Typography.typographyOptions)
+};
+CheckBoxes.defaultProps = {
+  disabled: false,
+  typography: 'type-b2-400'
 };
-var _default = BasicQuestions;
+var _default = CheckBoxes;
 exports.default = _default;

package/build/components/ColorUsage.js

@@ -0,0 +1,35 @@
+"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 = exports.colorOptions = exports.ColorVariables = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _templateObject, _templateObject2;
+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 colorOptions = ['blue-CTA', 'darkblue-background', 'lightblue-background', 'blue-hover', 'green-success', 'lightgreen-success', 'yellow-warning', 'lightyellow-warning', 'red-error', 'red-hover', 'lightred-error', 'primarygrey-text', 'secondarygrey-text', 'grey1-placeholder', 'grey2-disabled', 'grey3-disabled_divider', 'grey4-background', 'white-background', 'grey5-overlay', 'sunyellow-tags'];
+
+// TODO: Figure out a way to make this work with storybook.
+// Can be used to wrap the entire application, to make these styles available to every component
+exports.colorOptions = colorOptions;
+const ColorVariables = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  --color-blue-CTA: #014FC5;\n  --color-blue-hover: #82A9E2;\n  --color-darkblue-background: #003264;\n  --color-lightblue-background: #DEF1FB;\n  --color-green-success: #00875A;\n  --color-lightgreen-success: #CCE7DE;\n  --color-yellow-warning: #FF991F;\n  --color-lightyellow-warning: #FFEBD2;\n  --color-red-error: #DE350B;\n  --color-red-hover: #E87254;\n  --color-lightred-error: #F8D7CE;\n  --color-primarygrey-text: #212121;\n  --color-secondarygrey-text: #717171;\n  --color-grey1-placeholder: #959595;\n  --color-grey2-disabled: #BFBFBF;\n  --color-grey3-disabled_divider: #E0E0E0;\n  --color-grey4-background: #F6F6F6;\n  --color-white-background: #FFFFFF;\n  --color-grey5-overlay: rgba(0, 0, 0, 0.7);\n  --color-sunyellow-tags: #F5C82D;\n"])));
+exports.ColorVariables = ColorVariables;
+function ColorUsage(_ref) {
+  let {
+    color
+  } = _ref;
+  const ColorDisplay = _styledComponents.default.h1(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    background-color: var(--color-", ");\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100px;\n    width: 450px;\n  "])), color);
+  return /*#__PURE__*/_react.default.createElement(ColorDisplay, null, "--color-".concat(color));
+}
+ColorUsage.propTypes = {
+  color: _propTypes.default.oneOf(colorOptions).isRequired
+};
+var _default = ColorUsage;
+exports.default = _default;

package/build/components/CornerRadius.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.string.replace.js");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+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) } })); }
+function CornerRadius(_ref) {
+  let {
+    type
+  } = _ref;
+  const getBorderSize = () => {
+    switch (type.replace('border-radius-', '')) {
+      case 'full':
+        return 9999;
+      case 'xlarge':
+        return 16;
+      case 'large':
+        return 12;
+      case 'medium':
+        return 8;
+      case 'small':
+        return 4;
+      case 'xsmall':
+        return 2;
+      case 'none':
+        return 0;
+      default:
+        return 0;
+    }
+  };
+  const RadiusDisplayComponent = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 200px;\n    width: 200px;\n    background-color: blue;\n    border-radius: ", "px\n  "])), getBorderSize());
+  return /*#__PURE__*/_react.default.createElement(RadiusDisplayComponent, null, type);
+}
+CornerRadius.propTypes = {
+  type: _propTypes.default.oneOf(['border-radius-xlarge', 'border-radius-large', 'border-radius-medium', 'border-radius-small', 'border-radius-xsmall', 'border-radius-none', 'border-radius-full']).isRequired
+};
+var _default = CornerRadius;
+exports.default = _default;

package/build/components/{Drawer.js → DrawerDesign.js}

@@ -7,47 +7,48 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _antd = require("antd");
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
 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; }
-const DrawerDesign = props => {
-  const {
-    title,
-    placement,
+function DrawerDesign(_ref) {
+  let {
     closable,
-    visible,
     data,
+    height,
     onClose,
-    width,
-    height
-  } = props;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: true
-  }, /*#__PURE__*/_react.default.createElement(_antd.Drawer, {
-    title: title,
-    placement: placement,
+    open,
+    placement,
+    title,
+    width
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Drawer, {
     closable: closable,
     onClose: onClose,
-    visible: visible,
-    width: width,
-    height: height
+    open: open,
+    placement: placement,
+    title: title,
+    height: height,
+    width: width
   }, data));
-};
+}
 DrawerDesign.propTypes = {
-  tabPosition: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
-  type: _propTypes.default.oneOf(['line', 'card', 'editable-card']),
-  defaultActiveKey: _propTypes.default.string,
-  width: _propTypes.default.number,
-  height: _propTypes.default.number
+  closable: _propTypes.default.bool,
+  data: _propTypes.default.node.isRequired,
+  onClose: _propTypes.default.func,
+  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
 };
 DrawerDesign.defaultProps = {
-  placement: 'right',
-  title: '',
   closable: false,
-  visible: true,
-  data: ''
+  onClose: null,
+  open: true,
+  placement: 'right',
+  title: ''
 };
 var _default = DrawerDesign;
 exports.default = _default;

package/build/components/KeyValueDataView.js

@@ -6,32 +6,43 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 require("core-js/modules/web.dom-collections.iterator.js");
 var _react = _interopRequireDefault(require("react"));
-var _styles = require("./styles");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+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) } })); }
 function KeyValueDataView(_ref) {
   let {
     data,
+    footerHeading,
     heading,
-    value,
     viewMore
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: _styles.keyValueDataViewStyles['.detailsSec']
-  }, /*#__PURE__*/_react.default.createElement("h6", {
-    style: _styles.keyValueDataViewStyles['.detailsSec h6']
-  }, heading), data && Object.entries(data).map(_ref2 => {
+  const DetailsSection = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    margin: 0 72px 0 0;\n\n    h6 {\n      color: #6F7C87;\n      text-transform: uppercase;\n      padding: 0 0 8px;\n      font-size: 10px;\n      font-weight: bold;\n      letter-spacing: 1px;\n      line-height: 10px;\n      margin: 0;   \n    }\n\n    h5 {\n      color: #6F7C87;\n      padding: 0 0 8px;\n      font-size: 12px;\n      font-weight: bold;\n      letter-spacing: 1px;\n      line-height: 10px;\n      margin: 0;\n    }\n  "])));
+  const CustomerDetails = _styledComponents.default.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    \n    display: flex;\n\n    span {\n      width: 100%;\n      color: #717171;\n      font-weight: 400;\n    }\n\n    b {\n      margin: 0 8px 4px 0;\n      min-width: 140px;\n      color: #212121;\n      font-weight: 400;\n    }\n  "])));
+  return /*#__PURE__*/_react.default.createElement(DetailsSection, null, heading && /*#__PURE__*/_react.default.createElement("h6", null, heading), data && Object.entries(data).map(_ref2 => {
     let [key, value] = _ref2;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      style: _styles.keyValueDataViewStyles['.complaintDetails'],
-      key: key // Add a unique key to each div when mapping
-    }, /*#__PURE__*/_react.default.createElement("b", {
-      style: _styles.keyValueDataViewStyles['.complaintDetails b']
-    }, key, ":"), /*#__PURE__*/_react.default.createElement("span", {
-      style: _styles.keyValueDataViewStyles['.complaintDetails span']
-    }, value));
-  }), value && /*#__PURE__*/_react.default.createElement("h5", {
-    style: _styles.keyValueDataViewStyles['.detailsSec h5']
-  }, value), viewMore);
+    return (
+      /*#__PURE__*/
+      // Fragment with a unique allows mapping of the object to components.
+      _react.default.createElement(_react.default.Fragment, {
+        key: key
+      }, /*#__PURE__*/_react.default.createElement(CustomerDetails, null, /*#__PURE__*/_react.default.createElement("b", null, key, ":"), /*#__PURE__*/_react.default.createElement("span", null, value)))
+    );
+  }), footerHeading && /*#__PURE__*/_react.default.createElement("h5", null, footerHeading), viewMore);
 }
+KeyValueDataView.propTypes = {
+  data: _propTypes.default.objectOf(_propTypes.default.string),
+  heading: _propTypes.default.string,
+  footerHeading: _propTypes.default.string,
+  // This is so that we can pass a react element as a prop.
+  viewMore: _propTypes.default.node
+};
+KeyValueDataView.defaultProps = {
+  data: {},
+  heading: '',
+  footerHeading: '',
+  viewMore: null
+};
 var _default = KeyValueDataView;
 exports.default = _default;

package/build/components/LeftPannelTab.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+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 StageInfo = _styledComponents.default.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    color: #BFBFBF;\n    font-size: 14px;\n    font-weight: 400;\n    display: flex;\n    width: 220px;\n    align-items: center;\n    padding: 12px 0 12px 34px;\n    text-decoration: none;\n    /* Add additional styles for the \"inprogress\" class */\n  &.inprogress {\n    color: #014FC5;\n    font-family: Roboto;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 600;\n    line-height: 20px; \n    font-weight: 500;\n    background: #DEF1FB;\n    border-radius: 28px;\n    display: flex;\n    align-items: center;\n  }\n  &.success {\n    background: #fff;\n    color: #0282F0;\n  }\n"])));
+const StageIcon = _styledComponents.default.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 12px;\n  height: 12px;\n  margin: 0 10px 0 0;\n  display: flex;\n"])));
+const StageInprocess = _styledComponents.default.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 12px;\n  height: 12px;\n  background: #014FC5;\n  border-radius: 50px;\n"])));
+const StageDefault = _styledComponents.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 12px;\n  height: 12px;\n  background: #BFBFBF;\n  border-radius: 50px;\n"])));
+const StageSuccess = _styledComponents.default.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: 12px;\n  height: 12px;\n  background: green;\n  border-radius: 50px;\n"])));
+function LeftPannelTab() {
+  const isActive = stage => {
+    if (stage === 'first') return true;
+    return false;
+  };
+  return /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(StageInfo, {
+    href: "",
+    className: isActive('first') ? 'inprogress' : ''
+  }, /*#__PURE__*/_react.default.createElement(StageIcon, null, /*#__PURE__*/_react.default.createElement(StageInprocess, null)), "Define Plan Parameters")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(StageInfo, {
+    href: "",
+    className: isActive('second') ? 'inprogress' : ''
+  }, /*#__PURE__*/_react.default.createElement(StageIcon, null, /*#__PURE__*/_react.default.createElement(StageDefault, null)), "Select services & products")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(StageInfo, {
+    href: "",
+    className: isActive('third') ? 'inprogress' : ''
+  }, /*#__PURE__*/_react.default.createElement(StageIcon, null, /*#__PURE__*/_react.default.createElement(StageSuccess, null)), "Select services & products")));
+}
+var _default = LeftPannelTab;
+exports.default = _default;

package/build/components/Notification.js

@@ -0,0 +1,84 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _styledComponents = _interopRequireDefault(require("styled-components"));
+var _icons = require("@ant-design/icons");
+var _Typography = _interopRequireWildcard(require("./Typography"));
+var _OACustomButton = _interopRequireDefault(require("./oa-button/OACustomButton"));
+var _templateObject;
+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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const StyledNotification = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  \n  div {\n    display: flex;\n    flex-direction: column;\n  } \n\n  .anticon-close {\n    cursor: pointer;\n  }\n"])));
+function Notification(_ref) {
+  let {
+    borderColor,
+    disabled,
+    onChange,
+    typographies
+  } = _ref;
+  const [api, contextHolder] = _antd.notification.useNotification();
+  const openNotification = () => {
+    const titleText = 'Notification Title';
+    const descriptionText = 'I will never close automatically. This is a purposely very very long description that has many many characters and words.';
+    const customNotification = /*#__PURE__*/_react.default.createElement(StyledNotification, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      color: "green-success",
+      typography: typographies.title
+    }, titleText), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      color: "grey2-disabled",
+      typography: typographies.description
+    }, descriptionText)), /*#__PURE__*/_react.default.createElement(_icons.CloseOutlined, {
+      onClick: api.destroy('string')
+    }));
+    api.open({
+      message: customNotification,
+      closeIcon: false,
+      // Overriding how the notification looks.
+      style: {
+        color: 'var(--color-white-background)',
+        padding: '8px 16px 8px 16px !important',
+        borderRadius: '4px  !important',
+        borderLeft: '4px solid var(--color-green-success)',
+        boxShadow: '0px 2px 8px 0px rgba(0, 0, 0, 0.12)'
+      }
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, contextHolder, /*#__PURE__*/_react.default.createElement(_OACustomButton.default, {
+    typography: typographies.button,
+    text: "Add Notes",
+    onClick: openNotification,
+    size: "large",
+    type: "primary"
+  }));
+}
+Notification.propTypes = {
+  borderColor: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  onChange: _propTypes.default.func.isRequired,
+  typographies: _propTypes.default.shape({
+    button: _propTypes.default.oneOf(_Typography.typographyOptions),
+    description: _propTypes.default.oneOf(_Typography.typographyOptions),
+    title: _propTypes.default.oneOf(_Typography.typographyOptions)
+  })
+};
+Notification.defaultProps = {
+  borderColor: '#007bff',
+  disabled: false,
+  typographies: {
+    button: 'type-button-500',
+    description: 'type-b3-400',
+    title: 'type-b2-400'
+  }
+};
+var _default = Notification;
+exports.default = _default;

package/build/components/RadioButton.js

@@ -0,0 +1,46 @@
+"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 _antd = require("antd");
+var _Typography = _interopRequireWildcard(require("./Typography"));
+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 RadioButton(_ref) {
+  let {
+    disabled,
+    onChange,
+    size,
+    text,
+    typography
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_antd.Radio, {
+    disabled: disabled,
+    onChange: disabled ? null : onChange,
+    size: size,
+    type: "radio1"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: typography
+  }, text));
+}
+RadioButton.propTypes = {
+  disabled: _propTypes.default.bool,
+  onChange: _propTypes.default.func.isRequired,
+  size: _propTypes.default.oneOf(['small', 'middle', 'large']),
+  text: _propTypes.default.string.isRequired,
+  typography: _propTypes.default.oneOf(_Typography.typographyOptions)
+};
+RadioButton.defaultProps = {
+  disabled: false,
+  size: 'middle',
+  typography: 'type-b1-400'
+};
+var _default = RadioButton;
+exports.default = _default;

package/build/components/{Button.js → SpacingScales.js}

@@ -7,45 +7,28 @@ exports.default = void 0;
 require("core-js/modules/es.symbol.description.js");
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ButtonModule = _interopRequireDefault(require("./style/css/Button.module.css"));
+var _styles = require("./styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
-const CustomButton = _ref => {
+function SpacingScales(_ref) {
   let {
-    type,
-    size,
-    text,
-    onClick,
-    disabled,
-    className,
-    style
+    type
   } = _ref;
-  // Define a CSS class based on the type and size props
-  const buttonClass = "".concat(_ButtonModule.default.button, " ").concat(_ButtonModule.default[type], " ").concat(_ButtonModule.default[size]);
-  return /*#__PURE__*/_react.default.createElement("button", {
-    className: " ".concat(className, " ").concat(buttonClass, " ").concat(style),
-    style: _objectSpread({}, style),
-    onClick: onClick,
-    disabled: disabled
-  }, text);
+  return /*#__PURE__*/_react.default.createElement("h1", {
+    style: _objectSpread({
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: 'red'
+    }, _styles.spacingScalesStyle[".".concat(type)])
+  }, ' `', type, "` on all sides");
+}
+SpacingScales.propTypes = {
+  type: _propTypes.default.oneOf(['spacing-4', 'spacing-8', 'spacing-12', 'spacing-16', 'spacing-24', 'spacing-32', 'spacing-40', 'spacing-48', 'spacing-56', 'spacing-64', 'spacing-72', 'spacing-80', 'spacing-96', 'spacing-108']).isRequired
 };
-CustomButton.propTypes = {
-  type: _propTypes.default.oneOf(['primary', 'secondary', 'default']),
-  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-  text: _propTypes.default.string.isRequired,
-  onClick: _propTypes.default.func,
-  disabled: _propTypes.default.bool,
-  style: _propTypes.default.object
-};
-CustomButton.defaultProps = {
-  type: 'default',
-  size: 'medium',
-  disabled: false,
-  style: {}
-};
-var _default = CustomButton;
+var _default = SpacingScales;
 exports.default = _default;