oa-componentbook 0.18.41 → 0.18.43

package/build/components/oa-component-demo-spacing/SpacingScales.js

@@ -18,9 +18,9 @@ function SpacingScales(_ref) {
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_styles.default, {
     type: type
-  }, ' `', type, "` on all sides");
+  }, ' `', type, "`heading");
 }
 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
+  type: _propTypes.default.oneOf(['spacing-4', 'spacing-8', 'spacing-12', 'spacing-16', 'spacing-24', 'spacing-32', 'padding-top-4', 'padding-left-4', 'padding-right-4', 'padding-bottom-4', 'padding-top-8', 'padding-left-8', 'padding-right-8', 'padding-bottom-8', 'padding-top-12', 'padding-left-12', 'padding-right-12', 'padding-bottom-12', 'padding-top-16', 'padding-left-16', 'padding-right-16', 'padding-bottom-16', 'padding-top-24', 'padding-left-24', 'padding-right-24', 'padding-bottom-24', 'padding-top-32', 'padding-left-32', 'padding-right-32', 'padding-bottom-32', 'padding-top-40', 'padding-left-40', 'padding-right-40', 'padding-bottom-40', 'padding-top-48', 'padding-left-48', 'padding-right-48', 'padding-bottom-48', 'padding-top-56', 'padding-left-56', 'padding-right-56', 'padding-bottom-56', 'padding-top-64', 'padding-left-64', 'padding-right-64', 'padding-bottom-64', 'padding-top-72', 'padding-left-72', 'padding-right-72', 'padding-bottom-72', 'padding-top-80', 'padding-left-80', 'padding-right-80', 'padding-bottom-80', 'padding-top-96', 'padding-left-96', 'padding-right-96', 'padding-bottom-96', 'padding-top-108', 'padding-left-108', 'padding-right-108', 'padding-bottom-108', 'margin-top-4', 'margin-left-4', 'margin-right-4', 'margin-bottom-4', 'margin-top-8', 'margin-left-8', 'margin-right-8', 'margin-bottom-8', 'margin-top-12', 'margin-left-12', 'margin-right-12', 'margin-bottom-12', 'margin-top-16', 'margin-left-16', 'margin-right-16', 'margin-bottom-16', 'margin-top-24', 'margin-left-24', 'margin-right-24', 'margin-bottom-24', 'margin-top-32', 'margin-left-32', 'margin-right-32', 'margin-bottom-32', 'margin-top-40', 'margin-left-40', 'margin-right-40', 'margin-bottom-40', 'margin-top-48', 'margin-left-48', 'margin-right-48', 'margin-bottom-48', 'margin-top-56', 'margin-left-56', 'margin-right-56', 'margin-bottom-56', 'margin-top-64', 'margin-left-64', 'margin-right-64', 'margin-bottom-64', 'margin-top-72', 'margin-left-72', 'margin-right-72', 'margin-bottom-72', 'margin-top-80', 'margin-left-80', 'margin-right-80', 'margin-bottom-80', 'margin-top-96', 'margin-left-96', 'margin-right-96', 'margin-bottom-96', 'margin-top-108', 'margin-left-108', 'margin-right-108', 'margin-bottom-108']).isRequired
 };
 var _default = exports.default = SpacingScales;

package/build/components/oa-component-demo-spacing/styles.js

@@ -8,39 +8,250 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject; // SpacingScalesStyles.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 SpacingScalesContainer = _styledComponents.default.h1(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: red;\n  ", ""])), _ref => {
+const SpacingScalesContainer = _styledComponents.default.h1(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: pink;\n  ", ""])), _ref => {
   let {
     type
   } = _ref;
   switch (type) {
     case 'spacing-4':
-      return 'padding: 4px; margin: 0;';
+      // padding specific for all sides
+      return 'padding: 4px;';
     case 'spacing-8':
-      return 'padding: 8px; margin: 0;';
+      return 'padding: 8px;';
     case 'spacing-12':
-      return 'padding: 12px; margin: 0;';
+      return 'padding: 12px;';
     case 'spacing-16':
-      return 'padding: 16px; margin: 0;';
+      return 'padding: 16px;';
     case 'spacing-24':
-      return 'padding: 24px; margin: 0;';
+      return 'padding: 24px;';
     case 'spacing-32':
-      return 'padding: 32px; margin: 0;';
-    case 'spacing-40':
-      return 'padding: 40px; margin: 0;';
-    case 'spacing-48':
-      return 'padding: 48px; margin: 0;';
-    case 'spacing-56':
-      return 'padding: 56px; margin: 0;';
-    case 'spacing-64':
-      return 'padding: 64px; margin: 0;';
-    case 'spacing-72':
-      return 'padding: 72px; margin: 0;';
-    case 'spacing-80':
-      return 'padding: 80px; margin: 0;';
-    case 'spacing-96':
-      return 'padding: 96px; margin: 0;';
-    case 'spacing-108':
-      return 'padding: 108px; margin: 0;';
+      return 'padding: 32px;';
+    case 'padding-top-4':
+      // for padding specific
+      return 'padding-top: 4px;';
+    case 'padding-left-4':
+      return 'padding-left: 4px;';
+    case 'padding-right-4':
+      return 'padding-right: 4px;';
+    case 'padding-bottom-4':
+      return 'padding-bottom: 4px;';
+    case 'padding-top-8':
+      return 'padding-top: 8px;';
+    case 'padding-left-8':
+      return 'padding-left: 8px;';
+    case 'padding-right-8':
+      return 'padding-right: 8px;';
+    case 'padding-bottom-8':
+      return 'padding-bottom: 8px;';
+    case 'padding-top-12':
+      return 'padding-top: 12px;';
+    case 'padding-left-12':
+      return 'padding-left: 12px;';
+    case 'padding-right-12':
+      return 'padding-right: 12px;';
+    case 'padding-bottom-12':
+      return 'padding-bottom: 12px;';
+    case 'padding-top-16':
+      return 'padding-top: 16px;';
+    case 'padding-left-16':
+      return 'padding-left: 16px;';
+    case 'padding-right-16':
+      return 'padding-right: 16px;';
+    case 'padding-bottom-16':
+      return 'padding-bottom: 16px;';
+    case 'padding-top-24':
+      return 'padding-top: 24px;';
+    case 'padding-left-24':
+      return 'padding-left: 24px;';
+    case 'padding-right-24':
+      return 'padding-right: 24px;';
+    case 'padding-bottom-24':
+      return 'padding-bottom: 24px;';
+    case 'padding-top-32':
+      return 'padding-top: 32px;';
+    case 'padding-left-32':
+      return 'padding-left: 32px;';
+    case 'padding-right-32':
+      return 'padding-right: 32px;';
+    case 'padding-bottom-32':
+      return 'padding-bottom: 32px;';
+    case 'padding-top-40':
+      return 'padding-top: 40px;';
+    case 'padding-left-40':
+      return 'padding-left: 40px;';
+    case 'padding-right-40':
+      return 'padding-right: 40px;';
+    case 'padding-bottom-40':
+      return 'padding-bottom: 40px;';
+    case 'padding-top-48':
+      return 'padding-top: 48px;';
+    case 'padding-left-48':
+      return 'padding-left: 48px;';
+    case 'padding-right-48':
+      return 'padding-right: 48px;';
+    case 'padding-bottom-48':
+      return 'padding-bottom: 48px;';
+    case 'padding-top-56':
+      return 'padding-top: 56px;';
+    case 'padding-left-56':
+      return 'padding-left: 56px;';
+    case 'padding-right-56':
+      return 'padding-right: 56px;';
+    case 'padding-bottom-56':
+      return 'padding-bottom: 56px;';
+    case 'padding-top-64':
+      return 'padding-top: 64px;';
+    case 'padding-left-64':
+      return 'padding-left: 64px;';
+    case 'padding-right-64':
+      return 'padding-right: 64px;';
+    case 'padding-bottom-64':
+      return 'padding-bottom: 64px;';
+    case 'padding-top-72':
+      return 'padding-top: 72px;';
+    case 'padding-left-72':
+      return 'padding-left: 72px;';
+    case 'padding-right-72':
+      return 'padding-right: 72px;';
+    case 'padding-bottom-72':
+      return 'padding-bottom: 72px;';
+    case 'padding-top-80':
+      return 'padding-top: 80px;';
+    case 'padding-left-80':
+      return 'padding-left: 80px;';
+    case 'padding-right-80':
+      return 'padding-right: 80px;';
+    case 'padding-bottom-80':
+      return 'padding-bottom: 80px;';
+    case 'padding-top-96':
+      return 'padding-top: 96px;';
+    case 'padding-left-96':
+      return 'padding-left: 96px;';
+    case 'padding-right-96':
+      return 'padding-right: 96px;';
+    case 'padding-bottom-96':
+      return 'padding-bottom: 96px;';
+    case 'padding-top-108':
+      return 'padding-top: 108px;';
+    case 'padding-left-108':
+      return 'padding-left: 108px;';
+    case 'padding-right-108':
+      return 'padding-right: 108px;';
+    case 'padding-bottom-108':
+      return 'padding-bottom: 108px;';
+    case 'margin-top-4':
+      // for margin spacific
+      return 'margin-top: 4px;';
+    case 'margin-left-4':
+      return 'margin-left: 4px;';
+    case 'margin-right-4':
+      return 'margin-right: 4px;';
+    case 'margin-bottom-4':
+      return 'margin-bottom: 4px;';
+    case 'margin-top-8':
+      return 'margin-top: 8px;';
+    case 'margin-left-8':
+      return 'margin-left: 8px;';
+    case 'margin-right-8':
+      return 'margin-right: 8px;';
+    case 'margin-bottom-8':
+      return 'margin-bottom: 8px;';
+    case 'margin-top-12':
+      return 'margin-top: 12px;';
+    case 'margin-left-12':
+      return 'margin-left: 12px;';
+    case 'margin-right-12':
+      return 'margin-right: 12px;';
+    case 'margin-bottom-12':
+      return 'margin-bottom: 12px;';
+    case 'margin-top-16':
+      return 'margin-top: 16px;';
+    case 'margin-left-16':
+      return 'margin-left: 16px;';
+    case 'margin-right-16':
+      return 'margin-right: 16px;';
+    case 'margin-bottom-16':
+      return 'margin-bottom: 16px;';
+    case 'margin-top-24':
+      return 'margin-top: 24px;';
+    case 'margin-left-24':
+      return 'margin-left: 24px;';
+    case 'margin-right-24':
+      return 'margin-right: 24px;';
+    case 'margin-bottom-24':
+      return 'margin-bottom: 24px;';
+    case 'margin-top-32':
+      return 'margin-top: 32px;';
+    case 'margin-left-32':
+      return 'margin-left: 32px;';
+    case 'margin-right-32':
+      return 'margin-right: 32px;';
+    case 'margin-bottom-32':
+      return 'margin-bottom: 32px;';
+    case 'margin-top-40':
+      return 'margin-top: 40px;';
+    case 'margin-left-40':
+      return 'margin-left: 40px;';
+    case 'margin-right-40':
+      return 'margin-right: 40px;';
+    case 'margin-bottom-40':
+      return 'margin-bottom: 40px;';
+    case 'margin-top-48':
+      return 'margin-top: 48px;';
+    case 'margin-left-48':
+      return 'margin-left: 48px;';
+    case 'margin-right-48':
+      return 'margin-right: 48px;';
+    case 'margin-bottom-48':
+      return 'margin-bottom: 48px;';
+    case 'margin-top-56':
+      return 'margin-top: 56px;';
+    case 'margin-left-56':
+      return 'margin-left: 56px;';
+    case 'margin-right-56':
+      return 'margin-right: 56px;';
+    case 'margin-bottom-56':
+      return 'margin-bottom: 56px;';
+    case 'margin-top-64':
+      return 'margin-top: 64px;';
+    case 'margin-left-64':
+      return 'margin-left: 64px;';
+    case 'margin-right-64':
+      return 'margin-right: 64px;';
+    case 'margin-bottom-64':
+      return 'margin-bottom: 64px;';
+    case 'margin-top-72':
+      return 'margin-top: 72px;';
+    case 'margin-left-72':
+      return 'margin-left: 72px;';
+    case 'margin-right-72':
+      return 'margin-right: 72px;';
+    case 'margin-bottom-72':
+      return 'margin-bottom: 72px;';
+    case 'margin-top-80':
+      return 'margin-top: 80px;';
+    case 'margin-left-80':
+      return 'margin-left: 80px;';
+    case 'margin-right-80':
+      return 'margin-right: 80px;';
+    case 'margin-bottom-80':
+      return 'margin-bottom: 80px;';
+    case 'margin-top-96':
+      return 'margin-top: 96px;';
+    case 'margin-left-96':
+      return 'margin-left: 96px;';
+    case 'margin-right-96':
+      return 'margin-right: 96px;';
+    case 'margin-bottom-96':
+      return 'margin-bottom: 96px;';
+    case 'margin-top-108':
+      return 'margin-top: 108px;';
+    case 'margin-left-108':
+      return 'margin-left: 108px;';
+    case 'margin-right-108':
+      return 'margin-right: 108px;';
+    case 'margin-bottom-108':
+      return 'margin-bottom: 108px;';
     default:
       return 'padding: 0; margin: 0;';
   }

package/build/components/oa-component-dropdown/CustomDropdown.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CustomDropdown;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _icons = require("@ant-design/icons");
+var _antd = require("antd");
+var _KeyboardArrowDownOutlined = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowDownOutlined"));
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+var _styles = _interopRequireDefault(require("./styles"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const items = [{
+  label: /*#__PURE__*/_react.default.createElement("button", {
+    type: "button"
+  }, "1st menu item"),
+  key: '0'
+}, {
+  label: /*#__PURE__*/_react.default.createElement("button", {
+    type: "button"
+  }, "2nd menu item"),
+  key: '1'
+}, {
+  label: '3rd menu item',
+  key: '3'
+}];
+function CustomDropdown(_ref) {
+  let {
+    displayText
+  } = _ref;
+  const firstLetter = displayText === null || displayText === void 0 ? void 0 : displayText.charAt(0).toUpperCase(); // Extract the first letter
+
+  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      token: {
+        colorText: _ColorVariablesMap.default['--color-primary-content'],
+        controlPaddingHorizontal: 24,
+        controlItemBgHover: _ColorVariablesMap.default['--color-secondary-background'],
+        borderRadiusLG: 4,
+        colorTextDisabled: _ColorVariablesMap.default['--color-divider'],
+        paddingXXS: 0
+      },
+      components: {
+        Dropdown: {
+          paddingBlock: 12
+        }
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_styles.default, null, firstLetter && /*#__PURE__*/_react.default.createElement("small", null, firstLetter), /*#__PURE__*/_react.default.createElement(_antd.Dropdown, {
+    menu: {
+      items
+    },
+    trigger: ['click'],
+    placement: "bottomRight"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Space, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    typography: "type-t2-700"
+  }, displayText), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary",
+    typography: "type-t2-700"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _KeyboardArrowDownOutlined.default,
+    size: 20
+  })))))));
+}
+CustomDropdown.propTypes = {
+  displayText: _propTypes.default.string.isRequired
+};

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const DropdownStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\ndisplay: flex;\nalign-items: center;\n    .ant-dropdown-trigger{cursor: pointer;}\n    small{\n        width: 28px;\n        height: 28px;\n        border-radius: 28px;\n        background: var(--color-primary);\n        display: flex;\n        margin: 0 4px 0 0;\n        font-size: inherit;\n        align-items: center;\n        justify-content: center;\n        color: var(--color-primary-background);\n    }\n"])));
+var _default = exports.default = DropdownStyle;

package/build/components/oa-component-radio/CustomRadio.js

@@ -8,9 +8,10 @@ exports.getRadioTheme = exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
+var _styles = require("./styles");
 var _utils = require("../../utils");
 var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
-const _excluded = ["label", "data-test", "onChange", "size", "value"];
+const _excluded = ["label", "smallText", "data-test", "onChange", "size", "value"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -36,6 +37,7 @@ exports.getRadioTheme = getRadioTheme;
 function CustomRadio(_ref) {
   let {
       label,
+      smallText,
       'data-test': dataTest,
       onChange,
       size,
@@ -53,16 +55,18 @@ function CustomRadio(_ref) {
   };
   return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
     theme: getRadioTheme()
-  }, /*#__PURE__*/_react.default.createElement(_antd.Radio, _extends({
+  }, /*#__PURE__*/_react.default.createElement(_styles.RadioContainer, null, /*#__PURE__*/_react.default.createElement(_antd.Radio, _extends({
     onChange: handleChange,
     value: value,
     "data-test": dataTest
-  }, antDesignProps), ((0, _utils.isString)(label) || (0, _utils.isNumber)(label)) && /*#__PURE__*/_react.default.createElement("p", {
+  }, antDesignProps), ((0, _utils.isString)(label) || (0, _utils.isNumber)(label)) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
     className: size === 'large' ? 'type-b1-400' : 'type-b2-400',
     style: {
       // paddingLeft: '12px'
     }
-  }, label) || /*#__PURE__*/_react.default.isValidElement(label) && label || undefined));
+  }, label), smallText && /*#__PURE__*/_react.default.createElement("small", {
+    className: size === 'large' ? 'type-b2-400' : 'type-b2-400'
+  }, smallText)) || /*#__PURE__*/_react.default.isValidElement(label) && label || undefined)));
 }
 function CustomRadioGroup(props) {
   return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
@@ -76,6 +80,7 @@ CustomRadio.Button = CustomRadio;
 CustomRadio.propTypes = {
   'data-test': _propTypes.default.string,
   label: _propTypes.default.node,
+  smallText: _propTypes.default.node,
   onChange: _propTypes.default.func,
   size: _propTypes.default.oneOf(['large', 'small']),
   value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool])
@@ -85,6 +90,7 @@ CustomRadio.defaultProps = {
   label: null,
   onChange: value => {},
   size: 'small',
-  value: ''
+  value: '',
+  smallText: 'Default Small Text'
 };
 var _default = exports.default = CustomRadio;

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

@@ -10,4 +10,4 @@ var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var _default = exports.default = {};
-const RadioContainer = exports.RadioContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n/* .ant-radio-wrapper span.ant-radio+*{\n  padding-inline-start: 12px;\n} */\n"])));
+const RadioContainer = exports.RadioContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n/* .ant-radio-wrapper span.ant-radio+*{\n  padding-inline-start: 12px;\n} */\n.ant-radio-wrapper{\n  line-height: 0;\n}\nsmall{\n  position: relative;\n  top: 10px;\n  line-height: 0;\n  color: var(--color-secondary-content);\n  font-size: 14px;\n  font-weight: 400;\n}\n"])));

package/build/global-css/GridLayout.js

@@ -21,5 +21,5 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 // 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
 
-const GridLayout = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.container {\n  max-width: 1154px;\n  margin: 0 auto;\n  padding: 0 16px;\n}\n\n.container-fluid {\n  width: 100%;\n  padding: 0 16px;\n}\n\n.row {\n  display: flex;\n  flex-direction: column;\n}\n\n.gutter {\n  padding: 0 24px 0 0;\n}\n\n.row::after {\n  content: \"\";\n  clear: both;\n  display: table;\n}\n\n.col-xs-1 {\n  width: 8.33333%;\n}\n\n.col-xs-2 {\n  width: 16.66667%;\n}\n\n.col-xs-3 {\n  width: 25%;\n}\n\n.col-xs-4 {\n  width: 33.33333%;\n}\n\n.col-xs-5 {\n  width: 41.66667%;\n}\n\n.col-xs-6 {\n  width: 50%;\n}\n\n.col-xs-7 {\n  width: 58.33333%;\n}\n\n.col-xs-8 {\n  width: 66.66667%;\n}\n\n.col-xs-9 {\n  width: 75%;\n}\n\n.col-xs-10 {\n  width: 83.33333%;\n}\n\n.col-xs-11 {\n  width: 91.66667%;\n}\n\n.col-xs-12 {\n  width: 100%;\n}\n\n@media (min-width: 768px) {\n  .row {\n    flex-direction: row;\n  }\n\n  .col-sm-1 {\n    width: 8.33333%;\n  }\n\n  .col-sm-2 {\n    width: 16.66667%;\n  }\n\n  .col-sm-3 {\n    width: 25%;\n  }\n\n  .col-sm-4 {\n    width: 33.33333%;\n  }\n\n  .col-sm-5 {\n    width: 41.66667%;\n  }\n\n  .col-sm-6 {\n    width: 50%;\n  }\n\n  .col-sm-7 {\n    width: 58.33333%;\n  }\n\n  .col-sm-8 {\n    width: 66.66667%;\n  }\n\n  .col-sm-9 {\n    width: 75%;\n  }\n\n  .col-sm-10 {\n    width: 83.33333%;\n  }\n\n  .col-sm-11 {\n    width: 91.66667%;\n  }\n\n  .col-sm-12 {\n    width: 100%;\n  }\n}\n\n@media (min-width: 768px) {\n  .col-md-1 {\n    width: 8.33333%;\n  }\n\n  .col-md-2 {\n    width: 16.66667%;\n  }\n\n  .col-md-3 {\n    width: 25%;\n  }\n\n  .col-md-4 {\n    width: 33.33333%;\n    float: left;\n  }\n\n  .col-md-5 {\n    width: 41.66667%;\n  }\n\n  .col-md-6 {\n    width: 50%;\n  }\n\n  .col-md-7 {\n    width: 58.33333%;\n  }\n\n  .col-md-8 {\n    width: 66.66667%;\n  }\n\n  .col-md-9 {\n    width: 75%;\n  }\n\n  .col-md-10 {\n    width: 83.33333%;\n  }\n\n  .col-md-11 {\n    width: 91.66667%;\n  }\n\n  .col-md-12 {\n    width: 100%;\n  }\n}\n\n/* Large Devices (desktops) */\n@media (min-width: 992px) {\n  .gutter {\n    padding: 0 24px 0 0;\n  }\n\n  .col-lg-1 {\n    width: 8.33333%;\n  }\n\n  .col-lg-2 {\n    width: 16.66667%;\n  }\n\n  .col-lg-3 {\n    width: 25%;\n  }\n\n  .col-lg-4 {\n    width: 33.33333%;\n  }\n\n  .col-lg-5 {\n    width: 41.66667%;\n  }\n\n  .col-lg-6 {\n    width: 50%;\n  }\n\n  .col-lg-7 {\n    width: 58.33333%;\n  }\n\n  .col-lg-8 {\n    width: 66.66667%;\n  }\n\n  .col-lg-9 {\n    width: 75%;\n  }\n\n  .col-lg-10 {\n    width: 83.33333%;\n  }\n\n  .col-lg-11 {\n    width: 91.66667%;\n  }\n\n  .col-lg-12 {\n    width: 100%;\n  }\n}\n\n@media (min-width: 1200px) {\n  .gutter {\n    padding: 0 32px 0 0;\n  }\n\n  .col-xl-1 {\n    width: 8.33333%;\n  }\n  \n  .col-xl-2 {\n    width: 16.66667%;\n  }\n\n  .col-xl-3 {\n    width: 25%;\n  }\n\n  .col-xl-4 {\n    width: 33.33333%;\n  }\n\n  .col-xl-5 {\n    width: 41.66667%;\n  }\n\n  .col-xl-6 {\n    width: 50%;\n  }\n\n  .col-xl-7 {\n    width: 58.33333%;\n  }\n\n  .col-xl-8 {\n    width: 66.66667%;\n  }\n\n  .col-xl-9 {\n    width: 75%;\n  }\n\n  .col-xl-10 {\n    width: 83.33333%;\n  }\n\n  .col-xl-11 {\n    width: 91.66667%;\n  }\n\n  .col-xl-12 {\n    width: 100%;\n  }\n}\n"])));
+const GridLayout = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.container {\n  max-width: 1154px;\n  margin: 0 auto;\n  padding: 0 16px;\n}\n\n.container-fluid {\n  width: 100%;\n  padding: 0 16px;\n}\n\n.row {\n  display: flex;\n  flex-direction: column;\n}\n\n.gutter {\n  padding: 0 24px 0 0;\n}\n\n.row::after {\n  content: \"\";\n  clear: both;\n  display: table;\n}\n\n.col-xs-1 {\n  width: 8.33333%;\n}\n\n.col-xs-2 {\n  width: 16.66667%;\n}\n\n.col-xs-3 {\n  width: 25%;\n}\n\n.col-xs-4 {\n  width: 33.33333%;\n}\n\n.col-xs-5 {\n  width: 41.66667%;\n}\n\n.col-xs-6 {\n  width: 50%;\n}\n\n.col-xs-7 {\n  width: 58.33333%;\n}\n\n.col-xs-8 {\n  width: 66.66667%;\n}\n\n.col-xs-9 {\n  width: 75%;\n}\n\n.col-xs-10 {\n  width: 83.33333%;\n}\n\n.col-xs-11 {\n  width: 91.66667%;\n}\n\n.col-xs-12 {\n  width: 100%;\n}\n\n@media (min-width: 768px) {\n  .row {\n    flex-direction: row;\n  }\n\n  .col-sm-1 {\n    width: 8.33333%;\n  }\n\n  .col-sm-2 {\n    width: 16.66667%;\n  }\n\n  .col-sm-3 {\n    width: 25%;\n  }\n\n  .col-sm-4 {\n    width: 33.33333%;\n  }\n\n  .col-sm-5 {\n    width: 41.66667%;\n  }\n\n  .col-sm-6 {\n    width: 50%;\n  }\n\n  .col-sm-7 {\n    width: 58.33333%;\n  }\n\n  .col-sm-8 {\n    width: 66.66667%;\n  }\n\n  .col-sm-9 {\n    width: 75%;\n  }\n\n  .col-sm-10 {\n    width: 83.33333%;\n  }\n\n  .col-sm-11 {\n    width: 91.66667%;\n  }\n\n  .col-sm-12 {\n    width: 100%;\n  }\n}\n\n@media (min-width: 768px) {\n  .col-md-1 {\n    width: 8.33333%;\n  }\n\n  .col-md-2 {\n    width: 16.66667%;\n  }\n\n  .col-md-3 {\n    width: 25%;\n  }\n\n  .col-md-4 {\n    width: 33.33333%;\n    float: left;\n  }\n\n  .col-md-5 {\n    width: 41.66667%;\n  }\n\n  .col-md-6 {\n    width: 50%;\n  }\n\n  .col-md-7 {\n    width: 58.33333%;\n  }\n\n  .col-md-8 {\n    width: 66.66667%;\n  }\n\n  .col-md-9 {\n    width: 75%;\n  }\n\n  .col-md-10 {\n    width: 83.33333%;\n  }\n\n  .col-md-11 {\n    width: 91.66667%;\n  }\n\n  .col-md-12 {\n    width: 100%;\n  }\n}\n\n/* Large Devices (desktops) */\n@media (min-width: 992px) {\n  .gutter {\n    padding: 0 24px 0 0;\n  }\n\n  .col-lg-1 {\n    width: 8.33333%;\n  }\n\n  .col-lg-2 {\n    width: 16.66667%;\n  }\n\n  .col-lg-3 {\n    width: 25%;\n  }\n\n  .col-lg-4 {\n    width: 33.33333%;\n  }\n\n  .col-lg-5 {\n    width: 41.66667%;\n  }\n\n  .col-lg-6 {\n    width: 50%;\n  }\n\n  .col-lg-7 {\n    width: 58.33333%;\n  }\n\n  .col-lg-8 {\n    width: 66.66667%;\n  }\n\n  .col-lg-9 {\n    width: 75%;\n  }\n\n  .col-lg-10 {\n    width: 83.33333%;\n  }\n\n  .col-lg-11 {\n    width: 91.66667%;\n  }\n\n  .col-lg-12 {\n    width: 100%;\n  }\n}\n\n@media (min-width: 1200px) {\n  .gutter {\n    padding: 0 32px 0 0;\n  }\n\n  .col-xl-1 {\n    width: 8.33333%;\n  }\n  \n  .col-xl-2 {\n    width: 16.66667%;\n  }\n\n  .col-xl-3 {\n    width: 25%;\n  }\n\n  .col-xl-4 {\n    width: 33.33333%;\n  }\n\n  .col-xl-5 {\n    width: 41.66667%;\n  }\n\n  .col-xl-6 {\n    width: 50%;\n  }\n\n  .col-xl-7 {\n    width: 58.33333%;\n  }\n\n  .col-xl-8 {\n    width: 66.66667%;\n  }\n\n  .col-xl-9 {\n    width: 75%;\n  }\n\n  .col-xl-10 {\n    width: 83.33333%;\n  }\n\n  .col-xl-11 {\n    width: 91.66667%;\n  }\n\n  .col-xl-12 {\n    width: 100%;\n  }\n \n}\n.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item{\n  padding: 12px 24px;\n}\n.ant-dropdown-menu{\n  min-width: 256px;\n  top: 4px;\n}\n.ant-space-item span{\n  line-height: 0 !important;\n  display: flex;\n}\n"])));
 var _default = exports.default = GridLayout;

package/build/index.js

@@ -113,6 +113,12 @@ Object.defineProperty(exports, "CustomDrawer", {
     return _CustomDrawer.default;
   }
 });
+Object.defineProperty(exports, "CustomDropdown", {
+  enumerable: true,
+  get: function get() {
+    return _CustomDropdown.default;
+  }
+});
 Object.defineProperty(exports, "CustomFormItem", {
   enumerable: true,
   get: function get() {
@@ -227,6 +233,12 @@ Object.defineProperty(exports, "GlobalCss", {
     return _GlobalCss.default;
   }
 });
+Object.defineProperty(exports, "GoogleRating", {
+  enumerable: true,
+  get: function get() {
+    return _GoogleRating.default;
+  }
+});
 Object.defineProperty(exports, "GridLayout", {
   enumerable: true,
   get: function get() {
@@ -257,6 +269,12 @@ Object.defineProperty(exports, "ReimbursementBreakupWidget", {
     return _ReimbursementBreakupWidget.default;
   }
 });
+Object.defineProperty(exports, "RepairServiceWidget", {
+  enumerable: true,
+  get: function get() {
+    return _RepairServiceWidget.default;
+  }
+});
 Object.defineProperty(exports, "SendPaymentLinkWidget", {
   enumerable: true,
   get: function get() {
@@ -364,6 +382,7 @@ var _CustomButton = _interopRequireDefault(require("./components/oa-component-bu
 var _CustomCheckBox = _interopRequireWildcard(require("./components/oa-component-checkbox/CustomCheckBox"));
 var _CustomDrawer = _interopRequireDefault(require("./components/oa-component-drawer/CustomDrawer"));
 var _CustomFormItem = _interopRequireDefault(require("./components/oa-component-form-item/CustomFormItem"));
+var _CustomDropdown = _interopRequireDefault(require("./components/oa-component-dropdown/CustomDropdown"));
 var _MaterialIcon = _interopRequireDefault(require("./components/oa-component-icons/MaterialIcon"));
 var _CustomIcon = _interopRequireDefault(require("./components/oa-component-icons/CustomIcon"));
 var _CustomInfo = _interopRequireDefault(require("./components/oa-component-info/CustomInfo"));
@@ -393,6 +412,8 @@ var _GridLayout = _interopRequireDefault(require("./global-css/GridLayout"));
 var _Typographies = _interopRequireDefault(require("./global-css/Typographies"));
 var _colorOptions = require("./global-css/color-options");
 var _typographyOptions = require("./global-css/typography-options");
+var _GoogleRating = _interopRequireDefault(require("./widgets/oa-widget-googlerating/GoogleRating"));
+var _RepairServiceWidget = _interopRequireDefault(require("./widgets/oa-widget-repair-service/RepairServiceWidget"));
 var _AddressWidget = _interopRequireDefault(require("./widgets/oa-widget-address/AddressWidget"));
 var _AddSparePartWidget = _interopRequireDefault(require("./widgets/oa-widget-add-spare-part/AddSparePartWidget"));
 var _ApprovalWidget = _interopRequireDefault(require("./widgets/oa-widget-approval/ApprovalWidget"));

package/build/widgets/oa-widget-googlerating/GoogleRating.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = GoogleRating;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _StarOutlined = _interopRequireDefault(require("@material-ui/icons/StarOutlined"));
+var _ThumbUpAltOutlined = _interopRequireDefault(require("@material-ui/icons/ThumbUpAltOutlined"));
+var _styles = require("./styles");
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function GoogleRating(_ref) {
+  let {
+    materialIcon,
+    textContent,
+    iconColor,
+    iconSize
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_styles.GoogleRatingStyle, null, /*#__PURE__*/_react.default.createElement("section", null, materialIcon && /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: iconColor,
+    icon: materialIcon,
+    size: iconSize
+  }), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    className: "type-b2-400"
+  }, textContent), ' ')), /*#__PURE__*/_react.default.createElement("section", null, materialIcon && /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: iconColor,
+    icon: materialIcon,
+    size: iconSize
+  }), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    className: "type-b2-400"
+  }, textContent), ' ')));
+}
+GoogleRating.propTypes = {
+  materialIcon: _propTypes.default.object,
+  // Pass the Material UI icon component
+  textContent: _propTypes.default.string,
+  iconColor: _propTypes.default.string,
+  iconSize: _propTypes.default.number
+};
+GoogleRating.defaultProps = {
+  materialIcon: null,
+  // Provide a default value, e.g., null
+  textContent: '',
+  iconColor: 'defaultColor',
+  iconSize: 20
+};
+// export default GoogleRating

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.GoogleRatingStyle = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var _default = exports.default = {};
+const GoogleRatingStyle = exports.GoogleRatingStyle = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: 16px;\n    display: flex;\n    justify-content: space-between;\n    border-radius: 8px;\n    background: var(--color-primary-background);\n    p{\n        margin: 0;\n    }\n    section{\n        text-align: center;\n        margin: 0 24px 0 0;\n\n    }\n    section:last-child{\n        margin: 0;\n    }\n"])));

package/build/widgets/oa-widget-location-access/LocationAccessWidget.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _LocationOff = _interopRequireDefault(require("@material-ui/icons/LocationOff"));
+var _LocationOnOutlined = _interopRequireDefault(require("@material-ui/icons/LocationOnOutlined"));
+var _ArrowForwardIosOutlined = _interopRequireDefault(require("@material-ui/icons/ArrowForwardIosOutlined"));
+var _InfoOutlined = _interopRequireDefault(require("@material-ui/icons/InfoOutlined"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
+var _CustomInfo = _interopRequireDefault(require("../../components/oa-component-info/CustomInfo"));
+var _styles = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const buttonConfig = {
+  label: 'Change',
+  // iconConfig:{
+  //     icon:<MaterialIcon icon ={ ArrowForwardIosOutlinedIcon } />,
+  //     position:'right'
+  // },
+  type: 'text-only'
+};
+const iconConfigInfo = {
+  icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: "primary",
+    icon: _LocationOnOutlined.default
+  }),
+  position: 'left'
+};
+function LocationAccessWidget(_ref) {
+  let {
+    materialIcon,
+    buttonLabel,
+    locationAccessTitle,
+    locationAccessDescription,
+    showOrHideTypography
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_styles.LocationAccessStyle, null, materialIcon && /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: "primary",
+    icon: materialIcon,
+    size: 72
+  }), /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-t1-500",
+    color: "primary-content"
+  }, locationAccessTitle)), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b1-400",
+    color: "secondary-content"
+  }, locationAccessDescription)), showOrHideTypography && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("hr", null), /*#__PURE__*/_react.default.createElement("small", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b1-400",
+    color: "primary-content"
+  }), ' ', "or")))), /*#__PURE__*/_react.default.createElement("section", null, /*#__PURE__*/_react.default.createElement("h3", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-t1-500",
+    color: "primary-content"
+  }, "Click and drag the map to adjust location pin")), /*#__PURE__*/_react.default.createElement("aside", null, /*#__PURE__*/_react.default.createElement(_CustomInfo.default, {
+    description: "Candor Techspace, Sector 48, Gurugram, Tikri, Sector 48, Gurugram, Haryana, 122011",
+    color: "white-background",
+    buttonConfig: buttonConfig,
+    iconConfig: iconConfigInfo
+  }))), buttonLabel && /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    size: "large",
+    label: buttonLabel
+  }));
+}
+LocationAccessWidget.propTypes = {
+  materialIcon: _propTypes.default.object,
+  buttonLabel: _propTypes.default.string,
+  locationAccessTitle: _propTypes.default.string,
+  locationAccessDescription: _propTypes.default.string,
+  showOrHideTypography: _propTypes.default.bool
+};
+LocationAccessWidget.defaultProps = {
+  materialIcon: null,
+  // Provide a default value, e.g., null
+  buttonLabel: '',
+  // Provide a default value, e.g., an empty string
+  locationAccessTitle: '',
+  // Provide a default value, e.g., an empty string
+  locationAccessDescription: '',
+  // Provide a default value, e.g., an empty string
+  showOrHideTypography: false // Provide a default value, e.g., false
+};
+var _default = exports.default = LocationAccessWidget;

package/build/widgets/oa-widget-location-access/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LocationAccessStyle = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var _default = exports.default = {};
+const LocationAccessStyle = exports.LocationAccessStyle = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\npadding: 32px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    border: 1px solid var(--color-divider);\nul{\n    margin: 16px 0 32px;\n    list-style: none;\n    padding: 0;\n    width: 100%;\n    text-align: center;\n}\nli{\n    padding: 0 0 16px;\n}\nli:last-child{\n    padding: 0;\n}\n p{\n    display: block;\n    padding: 32px 0 0;\n    position: relative;\n }\n hr{\n    background: var(--color-divider);\n    height: 1px;\n    width: 100%;\n    border: none;\n    margin: 0;\n    position: absolute;\n    bottom: 9px;\n }\n button{\n    width: 100%;\n }\n p small{\n    background: #fff;\n    display: inline-block;\n    z-index: 1;\n    padding: 0 8px;\n    position: relative;\n }\n section{\n    width: 100%;\n }\n section h3{\n    text-align: center;\n    margin: 0;\n }\n section iframe{\n    width: 100%;\n    height: 240px;\n }\n section iframe + section{\n    justify-content: space-between;\n }\n section aside{\n    border: 1px solid var(--color-divider);\n    margin: 16px 0 32px;\n    border-radius: 4px;\n }\n section button{\n    width: auto;\n }\n"])));

package/build/widgets/oa-widget-repair-service/RepairServiceWidget.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = RepairServiceWidget;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ArrowForwardIos = _interopRequireDefault(require("@material-ui/icons/ArrowForwardIos"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _styles = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function RepairServiceWidget(_ref) {
+  let {
+    text,
+    icon,
+    subText
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_styles.RepairService, null, /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    typography: "type-t2-700"
+  }, text), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "secondary-content",
+    typography: "type-b2-400"
+  }, subText)), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: "primary",
+    icon: icon,
+    size: 20
+  }))), /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    typography: "type-t2-700"
+  }, text), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "secondary-content",
+    typography: "type-b2-400"
+  }, subText)), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: "primary",
+    icon: icon,
+    size: 20
+  }))));
+}
+RepairServiceWidget.propTypes = {
+  text: _propTypes.default.string.isRequired,
+  subText: _propTypes.default.string.isRequired,
+  icon: _propTypes.default.object.isRequired // Assuming that icon is a Material UI icon component
+};
+
+// export default RepairServiceWidget;

package/build/widgets/oa-widget-repair-service/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RepairService = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var _default = exports.default = {};
+const RepairService = exports.RepairService = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\nul{\n    display: flex;\n    justify-content: space-between;\n    max-width: 400px;\n    cursor: pointer;\n    border-bottom: 1px solid var(--color-divider);\n    padding: 16px 0;\n    align-items: center;\n    margin: 0;\n    list-style: none;\n}\n  \n  ul:last-child{\n    border-bottom: none;\n  }\n  ul li span{\n    display: block;\n  }\n  ul li:last-child{\n    margin: 0 0 0 16px;\n  }\n  li span:last-child{\n    padding: 8px 0 0;\n  }\n"])));

package/build/widgets/oa-widget-spare-part/SparePartsWidget.js

@@ -116,7 +116,7 @@ function SparePartsWidget(_ref) {
         cursor: 'pointer'
       }
     }, ' ', /*#__PURE__*/_react.default.createElement("span", null, renderCost(record.cost - record.discount)), record.showCostInfo && /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
-      title: "Basic Price : ".concat(record.basicPrice || 'N/A', " , Discount : ").concat(record.basicDiscount || 'N/A')
+      title: "Basic Price : ".concat(record.basicPrice, " , Discount : ").concat(record.discount)
     }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
       color: "secondary-content"
     }, /*#__PURE__*/_react.default.createElement(_icons.InfoCircleFilled, null))))

package/package.json

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