oa-componentbook 1.0.1-stage.38 → 1.0.1-stage.380

package/build/components/oa-component-accordion/Accordion.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("core-js/modules/es.object.assign.js");
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
@@ -11,14 +12,12 @@ var _KeyboardArrowUpRounded = _interopRequireDefault(require("@material-ui/icons
 var _styles = require("./styles");
 var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
 var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
+var _CustomTag = _interopRequireDefault(require("../oa-component-tag/CustomTag"));
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+var _KeyValueWidget = _interopRequireDefault(require("../../widgets/oa-widget-key-value/KeyValueWidget"));
+var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/**
- * Renders a MaterialIcon that rotates depending on the state of isActive.
- *
- * @param {boolean} isActive - Whether the icon should be rotated or not.
- *
- * @returns {React.ReactElement} - A React element representing the CollapseIcon.
- */
+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); } /* eslint-disable */
 function CollapseIcon(_ref) {
   let {
     isActive
@@ -29,29 +28,56 @@ function CollapseIcon(_ref) {
     rotate: isActive ? 0 : 180
   });
 }
+function renderCustomBody(customBody, onActionClick) {
+  if (!customBody || !customBody.items) return null;
+  return customBody.items.map((item, index) => {
+    var _item$dataConfig;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: index,
+      className: "custom-body-item"
+    }, item.heading && /*#__PURE__*/_react.default.createElement("div", {
+      className: "custom-body-heading"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: item.heading.type,
+      color: item.heading.color || "primary-content"
+    }, item.heading.label)), item.dataConfig && item.dataConfig.type === "keyvalue" && /*#__PURE__*/_react.default.createElement("div", {
+      className: "custom-body-content"
+    }, /*#__PURE__*/_react.default.createElement(_KeyValueWidget.default, {
+      data: item.dataConfig.data,
+      customClassName: "gst-details-keyvalue"
+    })), item.dataConfig && item.dataConfig.type === "titleSubtitle" && /*#__PURE__*/_react.default.createElement("div", {
+      className: "custom-body-content-titleSubtitle"
+    }, (item === null || item === void 0 || (_item$dataConfig = item.dataConfig) === null || _item$dataConfig === void 0 || (_item$dataConfig = _item$dataConfig.data) === null || _item$dataConfig === void 0 ? void 0 : _item$dataConfig.length) > 0 && item.dataConfig.data.map((field, index) => /*#__PURE__*/_react.default.createElement("div", {
+      key: index,
+      className: "title-subtitle-item"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "user-details"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: "type-t2-700",
+      color: "primary-content"
+    }, field.title), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: "type-b1-400",
+      color: "secondary-content"
+    }, field.subtitle))))), item.dataConfig && item.dataConfig.type === "button" && /*#__PURE__*/_react.default.createElement("div", {
+      className: "custom-body-content"
+    }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+      type: item.dataConfig.subType,
+      onClick: () => {
+        if (onActionClick && item.dataConfig.onClick) {
+          onActionClick(item.dataConfig.onClick, item.dataConfig);
+        }
+      },
+      label: item.dataConfig.label
+    })));
+  });
+}
 CollapseIcon.propTypes = {
   isActive: _propTypes.default.bool.isRequired
 };
-
-/**
- * Accordion component that renders a collapsible panel with the given header text, body content,
- * and optional small text. The component is disabled if the `disabled` prop is true.
- *
- * @param {React.ReactNode} body - Content to be rendered in the collapsible panel.
- * @param {string} [dataTest] - String to be used as a data-test attribute on the component.
- * @param {boolean} [disabled=false] - Whether the component is disabled or not.
- * @param {string} headerText - Text to be displayed as the header of the collapsible panel.
- * @param {string} [smallText] - Optional small text to be displayed next to the header text.
- * @param {string | number} [key] - Key to be used for the collapsible panel.
- * @param {string | number} [defaultActiveKey] - Key of the collapsible panel that should be active by default.
- * @param {boolean} [hasContentPadding=true] - Whether to apply content padding to the collapsible panel or not.
- * @param {Function} [onChange=() => {}] - Function to be called when the panel is expanded or collapsed.
- * @param {string | number} [activeKey] - Key of the collapsible panel that is currently active.
- */
 function Accordion(_ref2) {
   let {
     body,
-    'data-test': dataTest,
+    "data-test": dataTest,
     disabled,
     headerText,
     smallText,
@@ -60,13 +86,17 @@ function Accordion(_ref2) {
     hasContentPadding,
     // New prop to determine whether to apply contentPadding
     onChange,
-    activeKey
+    activeKey,
+    componentConfig,
+    subtext,
+    customBody,
+    onActionClick
   } = _ref2;
   const themeConfig = {
     components: {
       Collapse: {
-        headerBg: _ColorVariablesMap.default['--color-secondary-background'],
-        contentPadding: hasContentPadding ? '20px 24px' : '0' // Adjust the value as needed
+        headerBg: _ColorVariablesMap.default["--color-secondary-background"],
+        contentPadding: hasContentPadding ? "20px 24px" : "0" // Adjust the value as needed
       }
     }
   };
@@ -75,43 +105,89 @@ function Accordion(_ref2) {
   }, /*#__PURE__*/_react.default.createElement(_styles.CollapseStyle, null, /*#__PURE__*/_react.default.createElement(_antd.Collapse, {
     expandIcon: CollapseIcon,
     expandIconPosition: "end",
-    defaultActiveKey: disabled ? '-1' : defaultActiveKey,
+    defaultActiveKey: disabled ? "-1" : defaultActiveKey,
     onChange: onChange
   }, /*#__PURE__*/_react.default.createElement(_antd.Collapse.Panel, {
     "data-test": dataTest ? "".concat(dataTest, "--complete") : undefined,
-    collapsible: disabled ? 'disabled' : undefined,
+    collapsible: disabled ? "disabled" : undefined,
     key: activeKey || key,
     header: /*#__PURE__*/_react.default.createElement("div", {
       "data-test": dataTest ? "".concat(dataTest, "--header") : undefined,
       className: "type-button-500"
-    }, headerText, smallText && /*#__PURE__*/_react.default.createElement(_styles.SmallText, null, smallText))
-  }, /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "header-content"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "header-main"
+    }, componentConfig && (componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.type) === "tag" && /*#__PURE__*/_react.default.createElement("div", {
+      className: "header-tag"
+    }, /*#__PURE__*/_react.default.createElement(_CustomTag.default, _extends({
+      type: componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.subType,
+      label: componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.label
+    }, componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.props))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "header-text"
+    }, headerText, smallText && /*#__PURE__*/_react.default.createElement(_styles.SmallText, null, smallText)), subtext && /*#__PURE__*/_react.default.createElement("div", {
+      className: "header-subtext"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: subtext === null || subtext === void 0 ? void 0 : subtext.type,
+      color: "secondary-content"
+    }, subtext === null || subtext === void 0 ? void 0 : subtext.label)))))
+  }, body && /*#__PURE__*/_react.default.createElement("div", {
+    className: "gridContainer"
+  }, body), customBody && /*#__PURE__*/_react.default.createElement("div", {
     className: "gridContainer"
-  }, body)))));
+  }, renderCustomBody(customBody, onActionClick))))));
 }
 Accordion.propTypes = {
   body: _propTypes.default.node,
-  'data-test': _propTypes.default.string,
+  "data-test": _propTypes.default.string,
   disabled: _propTypes.default.bool,
   headerText: _propTypes.default.string.isRequired,
   smallText: _propTypes.default.string,
   hasContentPadding: _propTypes.default.bool,
-  // New prop for controlling contentPadding
   key: _propTypes.default.string,
   defaultActiveKey: _propTypes.default.string,
   onChange: _propTypes.default.func,
-  activeKey: _propTypes.default.string || _propTypes.default.number
+  activeKey: _propTypes.default.string || _propTypes.default.number,
+  componentConfig: _propTypes.default.shape({
+    type: _propTypes.default.string.isRequired,
+    subType: _propTypes.default.string,
+    label: _propTypes.default.string.isRequired,
+    props: _propTypes.default.object
+  }),
+  subtext: _propTypes.default.shape({
+    type: _propTypes.default.string.isRequired,
+    label: _propTypes.default.string.isRequired
+  }),
+  customBody: _propTypes.default.shape({
+    items: _propTypes.default.arrayOf(_propTypes.default.shape({
+      heading: _propTypes.default.shape({
+        type: _propTypes.default.string.isRequired,
+        label: _propTypes.default.string.isRequired
+      }),
+      dataConfig: _propTypes.default.shape({
+        type: _propTypes.default.string.isRequired,
+        data: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.object]).isRequired,
+        subType: _propTypes.default.string,
+        label: _propTypes.default.string,
+        onClick: _propTypes.default.string
+      })
+    }))
+  }),
+  onActionClick: _propTypes.default.func
 };
 Accordion.defaultProps = {
-  body: '',
-  'data-test': null,
+  body: "",
+  "data-test": null,
   disabled: false,
-  smallText: '',
-  key: '1',
-  defaultActiveKey: '1',
+  smallText: "",
+  key: "1",
+  defaultActiveKey: "1",
   hasContentPadding: true,
-  // Default value for contentPadding
   onChange: () => {},
-  activeKey: null
+  activeKey: null,
+  componentConfig: null,
+  subtext: null,
+  customBody: null,
+  onActionClick: null
 };
 var _default = exports.default = Accordion;

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

@@ -9,5 +9,5 @@ var _templateObject, _templateObject2;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var _default = exports.default = {};
-const SmallText = exports.SmallText = _styledComponents.default.small(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: 18px;\n  color: #E21616;\n  margin: 0 0 0 4px;\n"])));
-const CollapseStyle = exports.CollapseStyle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.ant-collapse .ant-collapse-item-disabled{\n  background: var(--color-disabled-button);\n}\n  /* .ant-collapse-item-active .ant-collapse-expand-icon{\n    transform: rotate(180deg);\n  } */\n  /* .ant-collapse-expand-icon{\n    padding-inline-start: 0 !important;\n  } */\n  .ant-collapse-header-text{\n    color: var(--color-primary-content);\n  }\n  /* .ant-collapse-arrow{\n    color: var(--color-secondary-content) !important;\n  } */\n  .ant-collapse>.ant-collapse-item:last-child,.ant-collapse>.ant-collapse-item:last-child>.ant-collapse-header,.ant-collapse .ant-collapse-item:last-child >.ant-collapse-content {\n    border-radius: 0 0 4px 4px;\n  }\n  .ant-collapse>.ant-collapse-item {\n    border: none;\n  }\n  .ant-collapse{\n    border: 1px solid var(--color-divider);\n    border-radius: 4px;\n    overflow: hidden;\n  }\n  \n  .ant-collapse>.ant-collapse-item >.ant-collapse-header{\n    padding: 12px 24px;\n  }\n  @media only screen and (max-width: 600px) {\n    .ant-collapse .ant-collapse-content>.ant-collapse-content-box {\n      padding: 16px;\n  }\n  .ant-collapse>.ant-collapse-item>.ant-collapse-header {\n    padding: 12px 16px;\n  }\n  }\n"])));
+const SmallText = exports.SmallText = _styledComponents.default.small(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: 18px;\n  color: #e21616;\n  margin: 0 0 0 4px;\n"])));
+const CollapseStyle = exports.CollapseStyle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .ant-collapse .ant-collapse-item-disabled {\n    background: var(--color-disabled-button);\n  }\n  /* .ant-collapse-item-active .ant-collapse-expand-icon{\n    transform: rotate(180deg);\n  } */\n  /* .ant-collapse-expand-icon{\n    padding-inline-start: 0 !important;\n  } */\n  .ant-collapse-header-text {\n    color: var(--color-primary-content);\n  }\n  /* .ant-collapse-arrow{\n    color: var(--color-secondary-content) !important;\n  } */\n  .ant-collapse > .ant-collapse-item:last-child,\n  .ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header,\n  .ant-collapse .ant-collapse-item:last-child > .ant-collapse-content {\n    border-radius: 0 0 4px 4px;\n  }\n  .ant-collapse > .ant-collapse-item {\n    border: none;\n  }\n  .ant-collapse {\n    border: 1px solid var(--color-divider);\n    border-radius: 4px;\n    overflow: hidden;\n  }\n\n  .ant-collapse > .ant-collapse-item > .ant-collapse-header {\n    padding: 12px 24px;\n  }\n\n  /* New styles for header content layout */\n  .header-content {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    width: 100%;\n  }\n\n  .header-main {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    flex: 1;\n    gap: 8px;\n  }\n\n  .header-tag {\n    margin-bottom: 4px;\n  }\n\n  .header-text {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .header-subtext {\n    margin-top: 4px;\n    color: var(--color-secondary-content);\n  }\n\n  /* Custom body styles */\n  .custom-body-item {\n    margin-bottom: 24px;\n  }\n\n  .custom-body-heading {\n    margin-bottom: 16px;\n  }\n\n  .custom-body-content {\n    // margin-top: 8px;\n  }\n\n  .custom-body-button {\n    margin-top: 16px;\n    display: flex;\n    justify-content: flex-end;\n  }\n\n  .gst-details-keyvalue {\n    .key-value-item {\n      margin-bottom: 4px;\n    }\n\n    .key {\n      font-weight: 400;\n      color: var(--color-primary-content);\n    }\n\n    .value {\n      font-weight: 700;\n      color: var(--color-primary-content);\n    }\n  }\n\n  @media only screen and (max-width: 600px) {\n    .ant-collapse .ant-collapse-content > .ant-collapse-content-box {\n      padding: 16px;\n    }\n    .ant-collapse > .ant-collapse-item > .ant-collapse-header {\n      padding: 12px 16px;\n    }\n  }\n\n  .custom-body-content-titleSubtitle {\n    display: flex;\n    flex-direction: column;\n    gap: 16px; /* spacing between each item */\n  }\n\n  .title-subtitle-item {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n  }\n\n  .title-subtitle-item .user-details {\n    flex: 1;\n    display: flex; /* \uD83D\uDC48 add this */\n    flex-direction: column; /* stack name & email vertically */\n    gap: 2px; /* optional: tighten spacing between name & email */\n  }\n"])));

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

@@ -61,14 +61,14 @@ function CustomButton(_ref) {
   }, domProps), /*#__PURE__*/_react.default.createElement("div", {
     className: "text-container"
   }, iconConfig.position === 'left' && /*#__PURE__*/_react.default.isValidElement(iconConfig.icon) && /*#__PURE__*/_react.default.cloneElement(iconConfig.icon, {
-    size: iconSize
+    size: (iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.size) || iconSize
   }), label && (showEllipsis ? /*#__PURE__*/_react.default.createElement(_styles.EllipsisTypography, {
     title: label,
     typography: buttonTypography
   }, label) : /*#__PURE__*/_react.default.createElement(_Typography.default, {
     typography: buttonTypography
   }, label)), iconConfig.position === 'right' && /*#__PURE__*/_react.default.isValidElement(iconConfig.icon) && /*#__PURE__*/_react.default.cloneElement(iconConfig.icon, {
-    size: iconSize
+    size: (iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.size) || iconSize
   })));
 }
 CustomButton.propTypes = {
@@ -80,7 +80,8 @@ CustomButton.propTypes = {
   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]))
+    style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])),
+    size: _propTypes.default.number
   }),
   label: _propTypes.default.node,
   showEllipsis: _propTypes.default.bool,
@@ -93,7 +94,8 @@ CustomButton.defaultProps = {
   disabled: false,
   htmlType: 'button',
   iconConfig: {
-    position: 'left'
+    position: 'left',
+    size: 20
   },
   label: '',
   showEllipsis: false,

package/build/components/oa-component-checkbox/CustomCheckBox.js

@@ -12,7 +12,8 @@ var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorV
 var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
 var _styles = require("./styles");
 var _utils = require("../../utils");
-const _excluded = ["data-test", "label", "onChange", "size"];
+const _excluded = ["data-test", "label", "onChange", "size", "className"];
+/* eslint-disable */
 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; }
@@ -32,14 +33,14 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  */
 const getCheckboxTheme = () => ({
   token: {
-    colorTextDisabled: _ColorVariablesMap.default['--color-disabled-button'],
-    colorPrimaryHover: _ColorVariablesMap.default['--color-primary'],
-    colorPrimary: _ColorVariablesMap.default['--color-primary'],
-    colorBgContainerDisabled: _ColorVariablesMap.default['--color-secondary-background'],
-    colorBorder: _ColorVariablesMap.default['--color-secondary-content'],
-    colorText: _ColorVariablesMap.default['--color-primary-content'],
-    borderRadiusSM: '2px',
-    paddingXS: '12px'
+    colorTextDisabled: _ColorVariablesMap.default["--color-disabled-button"],
+    colorPrimaryHover: _ColorVariablesMap.default["--color-primary"],
+    colorPrimary: _ColorVariablesMap.default["--color-primary"],
+    colorBgContainerDisabled: _ColorVariablesMap.default["--color-secondary-background"],
+    colorBorder: _ColorVariablesMap.default["--color-secondary-content"],
+    colorText: _ColorVariablesMap.default["--color-primary-content"],
+    borderRadiusSM: "2px",
+    paddingXS: "12px"
   }
 });
 
@@ -64,10 +65,11 @@ const getCheckboxTheme = () => ({
 exports.getCheckboxTheme = getCheckboxTheme;
 function CustomCheckBox(_ref) {
   let {
-      'data-test': dataTest,
+      "data-test": dataTest,
       label,
       onChange,
-      size
+      size,
+      className
       /*
       Instead of keeping a `checked` prop explicitly,
       we keep it optional by directly passing extra props to the antd component.
@@ -82,12 +84,13 @@ function CustomCheckBox(_ref) {
   return /*#__PURE__*/_react.default.createElement(_styles.StyleContainer, null, /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
     theme: getCheckboxTheme()
   }, /*#__PURE__*/_react.default.createElement(_antd.Checkbox, _extends({
+    className: className !== null && className !== void 0 ? className : "",
     "data-test": dataTest,
     onChange: handleChange
   }, antDesignProps),
   // The label is a string or a number
   ((0, _utils.isString)(label) || (0, _utils.isNumber)(label)) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    typography: size === 'large' ? 'type-b1-400' : 'type-b2-400'
+    typography: size === "large" ? "type-b1-400" : "type-b2-400"
   }, label) ||
   // The label is a node
   /*#__PURE__*/_react.default.isValidElement(label) && label || undefined)));
@@ -96,17 +99,17 @@ function CustomCheckBox(_ref) {
 // This allows us referencing the Group container in our Checkbox component
 CustomCheckBox.Group = _antd.Checkbox.Group;
 CustomCheckBox.propTypes = {
-  'data-test': _propTypes.default.string,
+  "data-test": _propTypes.default.string,
   label: _propTypes.default.node,
   onChange: _propTypes.default.func,
-  size: _propTypes.default.oneOf(['large', 'small']),
+  size: _propTypes.default.oneOf(["large", "small"]),
   value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool])
 };
 CustomCheckBox.defaultProps = {
-  'data-test': null,
+  "data-test": null,
   label: null,
   onChange: value => {},
-  size: 'small',
-  value: ''
+  size: "small",
+  value: ""
 };
 var _default = exports.default = CustomCheckBox;

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

@@ -9,4 +9,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 StyleContainer = exports.StyleContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-checkbox-wrapper .ant-checkbox {\n    align-self: start;\n    margin: 2px 0 0 0;\n}\n"])));
+const StyleContainer = exports.StyleContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-checkbox-wrapper .ant-checkbox {\n    align-self: start;\n    margin: 2px 0 0 0; \n}\n"])));

package/build/components/oa-component-datepicker/CustomDatePicker.js

@@ -14,8 +14,9 @@ var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorV
 var _TypographiesMap = _interopRequireDefault(require("../../global-css/TypographiesMap"));
 require("antd/dist/reset.css");
 var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
-const _excluded = ["data-test"];
+const _excluded = ["data-test", "disabledDateFunction"];
 var _templateObject;
+/* eslint-disable */
 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; }
@@ -37,7 +38,8 @@ const FullWidthDatePicker = (0, _styledComponents.default)(_antd.DatePicker)(_te
  */
 function CustomDatePicker(_ref) {
   let {
-      'data-test': dataTest
+      "data-test": dataTest,
+      disabledDateFunction
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
@@ -65,7 +67,7 @@ function CustomDatePicker(_ref) {
         }
       },
       token: {
-        lineHeight: _TypographiesMap.default['type-b2-400']['line-height'] / _TypographiesMap.default['type-b2-400']['font-size'],
+        lineHeight: _TypographiesMap.default["type-b2-400"]["line-height"] / _TypographiesMap.default["type-b2-400"]["font-size"],
         paddingBlockLG: 50,
         paddingXS: 16,
         // Used to control margin of calendar icon
@@ -77,31 +79,31 @@ function CustomDatePicker(_ref) {
         // height of small text field
         // controlHeightLG: 64,
         borderRadius: 4,
-        colorPrimary: _ColorVariablesMap.default['--color-primary'],
+        colorPrimary: _ColorVariablesMap.default["--color-primary"],
         // for active color of input
-        colorPrimaryHover: _ColorVariablesMap.default['--color-primary'],
+        colorPrimaryHover: _ColorVariablesMap.default["--color-primary"],
         // for hover color of input
-        colorBgContainerDisabled: _ColorVariablesMap.default['--color-divider'],
-        colorBorder: _ColorVariablesMap.default['--color-placeholder-text'],
+        colorBgContainerDisabled: _ColorVariablesMap.default["--color-divider"],
+        colorBorder: _ColorVariablesMap.default["--color-placeholder-text"],
         // border color of input text field
-        colorTextDisabled: _ColorVariablesMap.default['--color-placeholder-text'],
+        colorTextDisabled: _ColorVariablesMap.default["--color-placeholder-text"],
         // Color of disabled text.
-        colorTextPlaceholder: _ColorVariablesMap.default['--color-placeholder-text'],
+        colorTextPlaceholder: _ColorVariablesMap.default["--color-placeholder-text"],
         // Color of placeholder text
-        colorTextQuaternary: _ColorVariablesMap.default['--color-placeholder-text'],
+        colorTextQuaternary: _ColorVariablesMap.default["--color-placeholder-text"],
         // color of disabled calendar icon
-        colorText: _ColorVariablesMap.default['--color-primary-content'],
+        colorText: _ColorVariablesMap.default["--color-primary-content"],
         // Text color
-        colorIcon: _ColorVariablesMap.default['--color-primary'],
+        colorIcon: _ColorVariablesMap.default["--color-primary"],
         // Color of arrows icons beside month and year in datepicker
-        colorIconHover: _ColorVariablesMap.default['--color-primary-hover'],
+        colorIconHover: _ColorVariablesMap.default["--color-primary-hover"],
         // Hover color of arrows icons beside month and year in datepicker
 
-        colorLink: _ColorVariablesMap.default['--color-primary'],
-        colorLinkHover: _ColorVariablesMap.default['--color-primary-hover'],
-        colorError: _ColorVariablesMap.default['--color-negative'],
+        colorLink: _ColorVariablesMap.default["--color-primary"],
+        colorLinkHover: _ColorVariablesMap.default["--color-primary-hover"],
+        colorError: _ColorVariablesMap.default["--color-negative"],
         // Error color
-        colorErrorBorderHover: _ColorVariablesMap.default['--color-negative'] // Hover error color should be same as error color
+        colorErrorBorderHover: _ColorVariablesMap.default["--color-negative"] // Hover error color should be same as error color
       }
     }
   }, /*#__PURE__*/_react.default.createElement(FullWidthDatePicker, _extends({
@@ -110,14 +112,15 @@ function CustomDatePicker(_ref) {
     suffixIcon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
       icon: _CalendarTodayRounded.default,
       size: 20
-    })
+    }),
+    disabledDate: disabledDateFunction
   }, props)));
 }
 CustomDatePicker.propTypes = {
-  'data-test': _propTypes.default.string,
-  size: _propTypes.default.oneOf(['small', 'middle'])
+  "data-test": _propTypes.default.string,
+  size: _propTypes.default.oneOf(["small", "middle"])
 };
 CustomDatePicker.defaultProps = {
-  'data-test': null,
-  size: 'middle'
+  "data-test": null,
+  size: "middle"
 };

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

@@ -114,11 +114,13 @@ function CustomDrawer(_ref) {
     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,

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

@@ -36,7 +36,8 @@ function CustomDropdown(_ref) {
     firstLetterIcon,
     trigger,
     placement,
-    type
+    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.
@@ -52,7 +53,16 @@ function CustomDropdown(_ref) {
     }
   }, /*#__PURE__*/_react.default.createElement(_styles.default, null, firstLetterIcon && firstLetter && /*#__PURE__*/_react.default.createElement("small", null, firstLetter), /*#__PURE__*/_react.default.createElement(_antd.Dropdown, {
     menu: {
-      items
+      items,
+      onClick: _ref2 => {
+        let {
+          key
+        } = _ref2;
+        const clickedItem = items.find(item => item.key === key);
+        if (clickedItem) {
+          onMenuItemClick(clickedItem);
+        }
+      }
     },
     trigger: trigger,
     placement: placement,
@@ -69,7 +79,8 @@ CustomDropdown.propTypes = {
   firstLetterIcon: _propTypes.default.bool,
   trigger: _propTypes.default.string,
   placement: _propTypes.default.string,
-  type: _propTypes.default.string
+  type: _propTypes.default.string,
+  onMenuItemClick: _propTypes.default.func
   // dropDownHeading: PropTypes.string,
 };
 CustomDropdown.defaultProps = {
@@ -85,6 +96,7 @@ CustomDropdown.defaultProps = {
   firstLetterIcon: false,
   trigger: ['click'],
   placement: 'bottomRight',
-  type: 'default'
+  type: 'default',
+  onMenuItemClick: () => {}
   // dropDownHeading: '',
 };

package/build/components/oa-component-icons/MaterialIcon.js

@@ -39,7 +39,7 @@ function MaterialIcon(_ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   const renderedIcon = /*#__PURE__*/_react.default.createElement(Icon, _extends({
     style: _objectSpread({
-      color: color ? _ColorVariablesMap.default["--color-".concat(color)] : undefined,
+      color: color && _ColorVariablesMap.default["--color-".concat(color)] ? _ColorVariablesMap.default["--color-".concat(color)] : color || undefined,
       fontSize: size ? "".concat(size, "px") : 'inherit',
       transition: 'transform .3s ease',
       transform: "rotate(".concat(rotate, "deg)")

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

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.TitleContainer = exports.DescriptionContainer = exports.ButtonContainer = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3;
+/* eslint-disable */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const ButtonContainer = exports.ButtonContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 16px;\n  justify-content: flex-end;\n  margin: 24px 0 0;\n  @media (max-width: 768px) {\n    justify-content: space-between;\n    button{\n      width: 100%;\n    }\n  }\n"])));
+const ButtonContainer = exports.ButtonContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 16px;\n  justify-content: flex-end;\n  margin: 36px 0 0;\n  @media (max-width: 768px) {\n    justify-content: space-between;\n    button{\n      width: 100%;\n    }\n  }\n"])));
 const DescriptionContainer = exports.DescriptionContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 12px 0 0;\n"])));
-const TitleContainer = exports.TitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 16px;\n  flex-direction: column;\n  margin: 0 0 16px;\n\n  img {\n    height: 36px;\n    width: 36px;\n  }\n"])));
+const TitleContainer = exports.TitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 32px 0 0 0;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  img {\n    height: 36px;\n    width: 36px;\n  }\n"])));