oa-componentbook 0.0.0-sit1.1

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

@@ -0,0 +1,178 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+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");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _CloseRounded = _interopRequireDefault(require("@material-ui/icons/CloseRounded"));
+var _ArrowBackIosRounded = _interopRequireDefault(require("@material-ui/icons/ArrowBackIosRounded"));
+var _utils = require("../../utils");
+var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+var _styles = require("./styles");
+var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
+const _excluded = ["buttonConfig", "children", "isBaseDrawer", "onClose", "open", "placement", "title", "height", "width", "data-test"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+ * @description
+ * A utility function to convert a string or a number into a valid drawer title.
+ * If the title is a string or a number, it will be rendered as a Typography component with type-sl1-700 and primary-content color.
+ * If it is a valid React element, it will be rendered directly.
+ * If it is anything else, it will be rendered as undefined.
+ * @param {string | number | React.ReactElement} title - The title to be rendered.
+ * @returns {React.ReactElement | undefined} - The rendered title or undefined.
+ */
+function DrawerTitle(title) {
+  return ((0, _utils.isString)(title) || (0, _utils.isNumber)(title)) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-sl1-700",
+    color: "primary-content"
+  }, title) || /*#__PURE__*/_react.default.isValidElement(title) && title || undefined;
+}
+
+/**
+ * A custom implementation of the antd Drawer component.
+ * @param {object} props - The props object.
+ * @param {Array<object>} [props.buttonConfig] - An array of button configurations to be rendered in the footer.
+ * @param {*} [props.children] - The content of the drawer.
+ * @param {boolean} [props.isBaseDrawer] - If true, the drawer is a base drawer and a close icon is rendered at the top right corner.
+ * @param {function} [props.onClose] - Called when the drawer is closed.
+ * @param {boolean} [props.open] - If true, the drawer is open.
+ * @param {string} [props.placement] - The viewport placement of the drawer. If the drawer is open on mobile, this prop will be set to 'bottom'.
+ * @param {string | number | React.ReactElement} [props.title] - The title of the drawer. If a string or a number, it will be rendered as a Typography component with type-sl1-700 and primary-content color. If a valid React element, it will be rendered directly.
+ * @param {string | number} [props.height] - The height of the drawer.
+ * @param {string | number} [props.width] - The width of the drawer.
+ * @param {string} [props.data-test] - The data-test attribute to be applied to the drawer.
+ */
+function CustomDrawer(_ref) {
+  let {
+      buttonConfig,
+      children,
+      isBaseDrawer,
+      onClose,
+      open,
+      placement,
+      title,
+      height,
+      width,
+      'data-test': dataTest
+    } = _ref,
+    antDesignProps = _objectWithoutProperties(_ref, _excluded);
+  const [isMobile, setIsMobile] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    const handleResize = () => {
+      // Update isMobile state based on the screen width
+      setIsMobile(window.innerWidth <= 768); // Adjust the breakpoint as needed
+    };
+
+    // Initial check on mount
+    handleResize();
+
+    // Listen for window resize events
+    window.addEventListener('resize', handleResize);
+
+    // Cleanup event listener on component unmount
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  const drawerPlacement = isMobile ? 'bottom' : placement;
+  const handleClose = () => {
+    onClose();
+  };
+  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      components: {
+        Drawer: {
+          footerPaddingBlock: 12,
+          footerPaddingInline: 24,
+          colorBgMask: 'rgba(0, 0, 0, 0.7);'
+        }
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_styles.ParentStyleDrawer, null, /*#__PURE__*/_react.default.createElement(_styles.CustomStyledDrawer, _extends({
+    classNames: {
+      footer: 'elevation-above-white-1'
+    },
+    closeIcon: false,
+    "data-test": dataTest,
+    onClose: handleClose,
+    open: open,
+    placement: drawerPlacement // Use the computed placement value
+    ,
+    push: false,
+    title: isBaseDrawer ? /*#__PURE__*/_react.default.createElement(_styles.BaseDrawerTitle, null, DrawerTitle(title), /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+      color: "primary-content",
+      icon: _CloseRounded.default,
+      className: "drawerCloseRoundedIcon",
+      onClick: handleClose,
+      size: 20,
+      "data-test": dataTest ? "".concat(dataTest, "--close-drawer-button") : undefined
+    })) : /*#__PURE__*/_react.default.createElement(_styles.LayeredDrawerTitle, null, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+      color: "primary-content",
+      className: "drawerCloseRoundedIcon",
+      icon: _ArrowBackIosRounded.default,
+      onClick: handleClose,
+      size: 20,
+      "data-test": dataTest ? "".concat(dataTest, "--close-drawer-button") : undefined
+    }), DrawerTitle(title)),
+    height: height,
+    width: width,
+    footer: (buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.length) > 0 && !antDesignProps.footer ? /*#__PURE__*/_react.default.createElement(_styles.DrawerFooter, null, buttonConfig.map(button => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+      disabled: Object.prototype.hasOwnProperty.call(button, 'disabled') ? button.disabled : false,
+      iconConfig: button === null || button === void 0 ? void 0 : button.iconConfig,
+      key: (0, _utils.getUUID)(),
+      label: button.label,
+      onClick: button.callback,
+      size: "medium",
+      type: button.type,
+      "data-test": button['data-test']
+    }))) : antDesignProps.footer
+  }, antDesignProps), children)));
+}
+CustomDrawer.propTypes = {
+  buttonConfig: _propTypes.default.arrayOf(_propTypes.default.shape({
+    'data-test': _propTypes.default.string,
+    disabled: _propTypes.default.bool,
+    callback: _propTypes.default.func.isRequired,
+    iconConfig: _propTypes.default.shape({
+      icon: _propTypes.default.node,
+      position: _propTypes.default.oneOf(['left', 'right']),
+      style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))
+    }),
+    label: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['primary', 'secondary', 'text-only', 'danger-primary', 'danger-secondary', 'danger-text-only']).isRequired
+  })),
+  children: _propTypes.default.node,
+  'data-test': _propTypes.default.string,
+  isBaseDrawer: _propTypes.default.bool,
+  onClose: _propTypes.default.func,
+  open: _propTypes.default.bool,
+  placement: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
+  title: _propTypes.default.node,
+  height: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+};
+CustomDrawer.defaultProps = {
+  buttonConfig: null,
+  children: null,
+  'data-test': null,
+  isBaseDrawer: true,
+  onClose: () => {},
+  open: true,
+  placement: 'right',
+  title: null,
+  height: '100%',
+  width: '480'
+};
+var _default = exports.default = CustomDrawer;

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ParentStyleDrawer = exports.LayeredDrawerTitle = exports.DrawerFooter = exports.CustomStyledDrawer = exports.BaseDrawerTitle = void 0;
+var _antd = require("antd");
+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 DrawerFooter = exports.DrawerFooter = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    justify-content: flex-end;\n    gap: 12px;\n"])));
+const ParentStyleDrawer = exports.ParentStyleDrawer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.ant-drawer-body{\n  background: red;\n}\n\n"])));
+const CustomStyledDrawer = exports.CustomStyledDrawer = (0, _styledComponents.default)(_antd.Drawer)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .ant-drawer-header {\n    background: var(--color-secondary-background);\n  }\n  .ant-drawer-footer{\n    background: var(--color-secondary-background);\n  }\n \n"])));
+const BaseDrawerTitle = exports.BaseDrawerTitle = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
+const LayeredDrawerTitle = exports.LayeredDrawerTitle = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 12px;\n\n  align-items: center;\n"])));

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

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CustomDropdown;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _KeyboardArrowDownOutlined = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowDownOutlined"));
+var _CustomDropDownThemes = _interopRequireDefault(require("../../global-css/CustomDropDownThemes"));
+var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+var _styles = _interopRequireDefault(require("./styles"));
+require("./customClass.css");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * CustomDropdown is a component that renders a dropdown menu.
+ * It is styled using an Ant Design Dropdown component and can be customized with different themes.
+ *
+ * @param {Object} props - The properties object.
+ * @param {string} props.displayText - Text to display within the dropdown trigger.
+ * @param {Array} props.items - Array of menu items to display in the dropdown.
+ * @param {React.node} props.children - React node to render as children within the dropdown trigger.
+ * @param {boolean} props.firstLetterIcon - Flag to display the first letter of the second word in displayText as an icon.
+ * @param {Array<string>} props.trigger - Event(s) that trigger the dropdown display, e.g., 'click', 'hover'.
+ * @param {string} props.placement - Position of the dropdown relative to the trigger element.
+ * @param {string} props.type - Theme type for the dropdown style.
+ */
+function CustomDropdown(_ref) {
+  var _displayText$split;
+  let {
+    displayText,
+    items,
+    children,
+    firstLetterIcon,
+    trigger,
+    placement,
+    type,
+    onMenuItemClick
+    // dropDownHeading,
+  } = _ref;
+  const firstLetter = (displayText === null || displayText === void 0 || (_displayText$split = displayText.split(' ')) === null || _displayText$split === void 0 || (_displayText$split = _displayText$split[1]) === null || _displayText$split === void 0 ? void 0 : _displayText$split.charAt(0).toUpperCase()) || 'H'; // Extract the first letter after Hi.
+
+  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      token: _CustomDropDownThemes.default[type],
+      components: {
+        Dropdown: {
+          paddingBlock: 1200
+        }
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_styles.default, null, firstLetterIcon && firstLetter && /*#__PURE__*/_react.default.createElement("small", null, firstLetter), /*#__PURE__*/_react.default.createElement(_antd.Dropdown, {
+    menu: {
+      items,
+      onClick: _ref2 => {
+        let {
+          key
+        } = _ref2;
+        const clickedItem = items.find(item => item.key === key);
+        if (clickedItem) {
+          onMenuItemClick(clickedItem);
+        }
+      }
+    },
+    trigger: trigger,
+    placement: placement,
+    overlayClassName: type === 'primary' ? 'primaryDropdownClass' : undefined
+  }, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_antd.Space, null, displayText && displayText.length && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    typography: "type-button-500"
+  }, displayText), children)))));
+}
+CustomDropdown.propTypes = {
+  displayText: _propTypes.default.string,
+  items: _propTypes.default.array,
+  children: _propTypes.default.node,
+  firstLetterIcon: _propTypes.default.bool,
+  trigger: _propTypes.default.string,
+  placement: _propTypes.default.string,
+  type: _propTypes.default.string,
+  onMenuItemClick: _propTypes.default.func
+  // dropDownHeading: PropTypes.string,
+};
+CustomDropdown.defaultProps = {
+  items: [],
+  displayText: '',
+  children: /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary",
+    typography: "type-t2-700"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _KeyboardArrowDownOutlined.default,
+    size: 20
+  })),
+  firstLetterIcon: false,
+  trigger: ['click'],
+  placement: 'bottomRight',
+  type: 'default',
+  onMenuItemClick: () => {}
+  // dropDownHeading: '',
+};

package/build/components/oa-component-dropdown/customClass.css

@@ -0,0 +1,9 @@
+.primaryDropdownClass .ant-dropdown-menu {
+    padding: 8px 0;
+    overflow: hidden;
+    min-width: 186px;
+}
+.primaryDropdownClass .ant-dropdown-menu .ant-dropdown-menu-item {
+    padding: 12px;
+}
+.primaryDropdownClass .ant-dropdown-menu .ant-dropdown-menu-item.ant-dropdown-menu-item-danger:not(.ant-dropdown-menu-item-disabled):hover{ background-color:#FBE5DF; color: #DE350B;}

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;\ngap: 8px;\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;\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-feedback-form/FeedbackForm.js

@@ -0,0 +1,75 @@
+"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");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/** ***********  ✨ Codeium Command ⭐  ************ */
+/**
+ * FeedbackForm component renders an iframe and a script tag.
+ *
+ * @param {Object} props - The properties object.
+ * @param {string} props.iframeSrc - The source URL for the iframe.
+ * @param {string} props.scriptSrc - The source URL for the script.
+ * @param {boolean} props.open - A boolean value to control the effect.
+ *
+ * The component uses a useEffect hook to send a postMessage to the iframe
+ * content window once the iframe has loaded, enabling specific settings.
+ * The iframe is styled to fill the entire viewport.
+ */
+
+/** ****  1da5e3d4-a27c-425d-956f-e856770f0f0d  ****** */
+function FeedbackForm(_ref) {
+  let {
+    iframeSrc,
+    scriptSrc,
+    open
+  } = _ref;
+  const [iframeKey, setIframeKey] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => {
+    const iframe = document.getElementById('s2c_embed_90232');
+    if (iframe) {
+      iframe.onload = function () {
+        const ifrmContWin = iframe.contentWindow;
+        const sendPostMsg = 'hideHeader=false&hideFooter=false';
+        ifrmContWin.postMessage(sendPostMsg, '*');
+      };
+    }
+    setIframeKey(prevKey => prevKey + 1);
+  }, [open]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      margin: 0,
+      height: '100%',
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/_react.default.createElement("iframe", {
+    key: iframeKey,
+    id: "s2c_embed_90232",
+    width: "100%",
+    frameBorder: "0" // Removed line gap
+    ,
+    src: iframeSrc,
+    style: {
+      height: '100%',
+      width: '100%'
+    },
+    title: "Feedback Survey"
+  }), /*#__PURE__*/_react.default.createElement("script", {
+    type: "text/javascript",
+    src: scriptSrc
+  }));
+}
+FeedbackForm.propTypes = {
+  iframeSrc: _propTypes.default.string.isRequired,
+  scriptSrc: _propTypes.default.string.isRequired,
+  open: _propTypes.default.bool.isRequired
+};
+var _default = exports.default = FeedbackForm;

package/build/components/oa-component-feedback-tooltip/FeedbackTooltip.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
+var _CustomTooltip = _interopRequireDefault(require("../oa-component-tooltip/CustomTooltip"));
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/** ***********  ✨ Codeium Command ⭐  ************ */
+/**
+ * FeedbackTooltip component displays a tooltip with a title, description, and buttons.
+ *
+ * @param {Object} props - The properties object.
+ * @param {boolean} props.hasClickedFeedback - Flag indicating if feedback button was clicked.
+ * @param {string} props.tooltipTitle - Title text for the tooltip.
+ * @param {string} props.tooltipDescription - Description text for the tooltip.
+ * @param {string} props.tooltipButtonLabel - Label for the tooltip button.
+ * @param {string} props.feedbackButtonLabel - Label for the feedback button.
+ * @param {Function} props.onButtonClick - Callback function for the tooltip button click.
+ * @param {Function} props.onFeedbackButtonClick - Callback function for the feedback button click.
+ * @param {boolean} props.tooltipOpen - Flag to control the visibility of the tooltip.
+ *
+ * @returns {ReactElement} The rendered FeedbackTooltip component.
+ */
+
+/** ****  8ccbdb54-5c16-4cae-9d57-f492fd44997c  ****** */
+
+function FeedbackTooltip(props) {
+  const {
+    hasClickedFeedback,
+    tooltipTitle,
+    tooltipDescription,
+    tooltipButtonLabel,
+    feedbackButtonLabel,
+    onButtonClick,
+    onFeedbackButtonClick,
+    tooltipOpen
+  } = props !== null && props !== void 0 ? props : {};
+  return /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
+    open: tooltipOpen && !hasClickedFeedback,
+    overlayClassName: "OaTooltip",
+    placement: "left",
+    title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      className: "type-t1-500",
+      color: "primary-content"
+    }, tooltipTitle), /*#__PURE__*/_react.default.createElement("div", {
+      className: "padding-top-4 padding-bottom-32"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      className: "type-b2-400",
+      color: "secondary-content"
+    }, tooltipDescription)), /*#__PURE__*/_react.default.createElement("div", {
+      className: "OaFooterBtn"
+    }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+      label: tooltipButtonLabel,
+      onClick: onButtonClick
+    })))
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "whiteBg"
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    className: "feedbackBtn",
+    onClick: onFeedbackButtonClick,
+    size: "large",
+    label: feedbackButtonLabel
+  })));
+}
+var _default = exports.default = FeedbackTooltip;

package/build/components/oa-component-form-item/CustomFormItem.js

@@ -0,0 +1,74 @@
+"use strict";
+
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CustomFormItem;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _antd = require("antd");
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+const _excluded = ["label", "labelPosition", "name", "children"];
+var _templateObject;
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const StyledFormItem = (0, _styledComponents.default)(_antd.Form.Item)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n   label{\n      height: auto !important;\n      color: var(--color-primary-content) !important;\n      margin: 0 0 4px !important;\n    }\n    .ant-col-24.ant-form-item-label{\n      padding: 0;\n    }\n"])));
+
+/**
+ * A wrapper around Ant Design's Form.Item component that styles the label
+ * and removes the minimum height.
+ *
+ * @param {string} label - The label of the form item.
+ * @param {string} labelPosition - The position of the label. Defaults to "left".
+ * @param {string} name - The name of the form item.
+ * @param {React.ReactNode} children - The children of the form item.
+ * @param {object} props - Any additional props to pass to the Form.Item component.
+ *
+ * @returns {React.ReactElement} A styled Form.Item component.
+ */
+function CustomFormItem(_ref) {
+  let {
+      label,
+      labelPosition = 'left',
+      name,
+      children
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const labelCol = labelPosition === 'top' ? _objectSpread({
+    span: 24
+  }, props.labelCol) : props.labelCol;
+  return /*#__PURE__*/_react.default.createElement(StyledFormItem, _extends({
+    name: name,
+    label: label ? /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: "type-b2-400"
+    }, label) : undefined,
+    labelCol: _objectSpread({}, labelCol)
+  }, props), children);
+}
+CustomFormItem.propTypes = {
+  label: _propTypes.default.string,
+  name: _propTypes.default.string,
+  children: _propTypes.default.element,
+  labelPosition: _propTypes.default.oneOf(['left', 'top']),
+  initialValue: _propTypes.default.any,
+  labelCol: _propTypes.default.object
+};
+CustomFormItem.defaultProps = {
+  label: null,
+  name: '',
+  children: /*#__PURE__*/_react.default.createElement("input", null),
+  labelPosition: 'left',
+  initialValue: null,
+  labelCol: null
+};

package/build/components/oa-component-header/CustomHeader.js

@@ -0,0 +1,104 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = HeaderBar;
+var _react = _interopRequireDefault(require("react"));
+var _ArrowBack = _interopRequireDefault(require("@material-ui/icons/ArrowBack"));
+var _Add = _interopRequireDefault(require("@material-ui/icons/Add"));
+var _VerticalAlignBottom = _interopRequireDefault(require("@material-ui/icons/VerticalAlignBottom"));
+var _Search = _interopRequireDefault(require("@material-ui/icons/Search"));
+var _styles = require("./styles");
+var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
+var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+var _CustomInput = _interopRequireDefault(require("../oa-component-input/CustomInput"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const noRefCheck = () => {};
+
+/**
+ * HeaderBar is a component that displays a header bar with a back button and two different layouts for desktop and mobile.
+ * The desktop view displays the header with a search button, export button and an add button.
+ * The mobile view displays the search, export and add icons.
+ *
+ * @return {ReactElement} - the rendered component
+ */
+function HeaderBar() {
+  return /*#__PURE__*/_react.default.createElement(_styles.StyleContainer, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "customHeader"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flexProp"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flexSec"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _ArrowBack.default,
+    size: 24,
+    className: "margin-right-12"
+  }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    typography: "type-t2-700"
+  }, "My Sub Outlets")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "flexSec deskView"
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    "data-test": "button",
+    iconConfig: {
+      icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        icon: _Search.default
+      }),
+      position: 'left'
+    },
+    label: "Search",
+    onClick: noRefCheck,
+    type: "text-only",
+    className: "margin-right-24"
+  }), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    "data-test": "button",
+    iconConfig: {
+      icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        icon: _VerticalAlignBottom.default
+      }),
+      position: 'left'
+    },
+    label: "Export",
+    onClick: noRefCheck,
+    type: "text-only",
+    className: "margin-right-24"
+  }), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    "data-test": "button",
+    iconConfig: {
+      icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        icon: _Add.default
+      }),
+      position: 'left'
+    },
+    label: "Add Sub Outlet",
+    onClick: noRefCheck,
+    size: "Medium",
+    type: "secondary"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "flexSec mobView"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: "primary",
+    size: 24,
+    className: "margin-right-16",
+    icon: _Search.default
+  }), /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: "primary",
+    size: 24,
+    className: "margin-right-16",
+    icon: _VerticalAlignBottom.default
+  }), /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: "primary",
+    size: 24,
+    icon: _Add.default
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "headerSearch"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _ArrowBack.default,
+    size: 24,
+    className: "margin-right-12"
+  }), /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
+    placeholder: "Search by option 1, option 2 ...."
+  }))));
+}