oa-componentbook 0.7.0 → 0.9.0

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-stagesTimeline/StageTimeline.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _styles = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// Import the styles
+
+function StageTimeline(_ref) {
+  let {
+    stagesArr
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_styles.StagesList, null, stagesArr.map(stage => {
+    let pickedIcon = /*#__PURE__*/_react.default.createElement(_styles.StageDefault, null);
+    let className = '';
+    if (stage.isComplete) {
+      className = 'success';
+      pickedIcon = /*#__PURE__*/_react.default.createElement(_styles.StageSuccess, null);
+    } else if (stage.isActive) {
+      className = 'inprogress';
+      pickedIcon = /*#__PURE__*/_react.default.createElement(_styles.StageInprocess, null);
+    }
+
+    // Use a unique and stable key based on the stage data
+    const stageKey = "".concat(stage.stageName, "-").concat(stage.isComplete, "-").concat(stage.isActive);
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: stageKey
+    }, /*#__PURE__*/_react.default.createElement(_styles.StageInfo, {
+      href: "",
+      className: className
+    }, /*#__PURE__*/_react.default.createElement(_styles.StageIcon, null, pickedIcon), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: "type-b2-400"
+    }, stage.stageName)));
+  }));
+}
+StageTimeline.propTypes = {
+  stagesArr: _propTypes.default.arrayOf(_propTypes.default.shape({
+    stageName: _propTypes.default.string.isRequired,
+    isComplete: _propTypes.default.bool.isRequired,
+    isActive: _propTypes.default.bool.isRequired
+  })).isRequired
+};
+var _default = StageTimeline;
+exports.default = _default;

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StagesList = exports.StageSuccess = exports.StageInprocess = exports.StageInfo = exports.StageIcon = exports.StageDefault = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6; // LeftPanelTabStyles.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 StagesList = _styledComponents.default.ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  list-style-type: none;\n"])));
+exports.StagesList = StagesList;
+const StageInfo = _styledComponents.default.a(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: #BFBFBF;\n  display: flex;\n  align-items: center;\n  padding: 12px 24px 12px 24px;\n  text-decoration: none;\n  border: 1px solid #BFBFBF;\n  border-radius: 28px;\n\n  &.inprogress {\n    display: flex;\n    align-items: center;\n    color: #014FC5;\n    background: #DEF1FB;\n    border-color: #DEF1FB;\n  }\n\n  &.success {\n    background: #fff;\n  }\n"])));
+exports.StageInfo = StageInfo;
+const StageIcon = _styledComponents.default.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 12px;\n  height: 12px;\n  margin: 0 10px 0 0;\n  display: flex;\n"])));
+exports.StageIcon = StageIcon;
+const StageInprocess = _styledComponents.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 12px;\n  height: 12px;\n  background: #014FC5;\n  border-radius: 50px;\n"])));
+exports.StageInprocess = StageInprocess;
+const StageDefault = _styledComponents.default.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: 12px;\n  height: 12px;\n  background: #BFBFBF;\n  border-radius: 50px;\n"])));
+exports.StageDefault = StageDefault;
+const StageSuccess = _styledComponents.default.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 12px;\n  height: 12px;\n  background: green;\n  border-radius: 50px;\n"])));
+exports.StageSuccess = StageSuccess;

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.7.0",
+  "version": "0.9.0",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",

package/build/components/ColorUsage.js

@@ -1,35 +0,0 @@
-"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

@@ -1,46 +0,0 @@
-"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/KeyValueDataView.js

@@ -1,48 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-require("core-js/modules/web.dom-collections.iterator.js");
-var _react = _interopRequireDefault(require("react"));
-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,
-    viewMore
-  } = _ref;
-  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__*/
-      // 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

@@ -1,34 +0,0 @@
-"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/SpacingScales.js

@@ -1,34 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-require("core-js/modules/es.symbol.description.js");
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-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); }
-function SpacingScales(_ref) {
-  let {
-    type
-  } = _ref;
-  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
-};
-var _default = SpacingScales;
-exports.default = _default;

package/build/components/Toggle.js

@@ -1,60 +0,0 @@
-"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");
-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 Toggle(_ref) {
-  let {
-    disabled,
-    onChange,
-    text,
-    type,
-    className
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
-    theme: {
-      components: {
-        Switch: {
-          handleSize: 28,
-          trackHeight: 32,
-          trackMinWidth: 56,
-          colorPrimary: '#00875A',
-          colorPrimaryHover: '#717171'
-        }
-      }
-    }
-  }, /*#__PURE__*/_react.default.createElement(_antd.Switch, {
-    className: className,
-    disabled: disabled,
-    onChange: disabled ? null : onChange,
-    defaultChecked: true
-  })), /*#__PURE__*/_react.default.createElement(_antd.Switch, {
-    className: className,
-    disabled: disabled,
-    onChange: disabled ? null : onChange,
-    defaultChecked: true
-  }));
-}
-Toggle.propTypes = {
-  className: _propTypes.default.string,
-  disabled: _propTypes.default.bool,
-  onChange: _propTypes.default.func.isRequired,
-  text: _propTypes.default.string.isRequired,
-  type: _propTypes.default.oneOf(['primary-toggle', 'success-toggle']).isRequired
-};
-Toggle.defaultProps = {
-  className: '',
-  disabled: false
-  // typography: 'type-d1-500',
-};
-var _default = Toggle;
-exports.default = _default;

package/build/components/Typography.js

@@ -1,37 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.typographyOptions = exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _ColorUsage = require("./ColorUsage");
-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 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;
-const TypeComponent = _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');
-function Typography(_ref) {
-  let {
-    children,
-    color,
-    typography
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(TypeComponent, {
-    color: color,
-    className: "".concat(typography)
-  }, children);
-}
-Typography.propTypes = {
-  color: _propTypes.default.oneOf(_ColorUsage.colorOptions) || null,
-  children: _propTypes.default.node.isRequired,
-  typography: _propTypes.default.oneOf(typographyOptions).isRequired
-};
-Typography.defaultProps = {
-  color: null
-};
-var _default = Typography;
-exports.default = _default;

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

@@ -1,37 +0,0 @@
-"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 _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) } })); }
-const getSizeStyles = size => {
-  switch (size) {
-    case 'small':
-      {
-        return (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          min-width: 80px;\n          padding: 10px 16px;\n          font-size: 12px;\n          font-weight: 400;\n          line-height: 16px;\n        "])));
-      }
-    case 'medium':
-      {
-        return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          min-width: 100px;\n          padding: 10px 16px;\n          font-size: 14px;\n          font-weight: 600;\n          line-height: 20px;    \n        "])));
-      }
-    case 'large':
-      {
-        return (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          min-width: 136px;\n          padding: 10px 24px;\n          font-size: 16px;\n          font-weight: 700;\n          line-height: 24px;\n          "])));
-      }
-    default:
-      {
-        return (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          min-width: 100px;\n          padding: 10px 16px;\n          font-size: 14px;\n          font-weight: 600;\n          line-height: 20px;    \n          "])));
-      }
-  }
-};
-const StyledButton = _styledComponents.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border-radius: 4px;\n  cursor: pointer;\n\n  ", "\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"])), props => getSizeStyles(props.size));
-const ColoredStyledButton = (0, _styledComponents.default)(StyledButton)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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"])));
-var _default = ColoredStyledButton;
-exports.default = _default;