oa-componentbook 1.0.1-stage.44 → 1.0.1-stage.440

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,58 @@ 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, _item$dataConfig2, _item$dataConfig3, _item$dataConfig4;
+    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, {
+      fullWidth: item === null || item === void 0 || (_item$dataConfig = item.dataConfig) === null || _item$dataConfig === void 0 ? void 0 : _item$dataConfig.fullWidth,
+      columnLayout: item === null || item === void 0 || (_item$dataConfig2 = item.dataConfig) === null || _item$dataConfig2 === void 0 ? void 0 : _item$dataConfig2.columnLayout,
+      data: item === null || item === void 0 || (_item$dataConfig3 = item.dataConfig) === null || _item$dataConfig3 === void 0 ? void 0 : _item$dataConfig3.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$dataConfig4 = item.dataConfig) === null || _item$dataConfig4 === void 0 || (_item$dataConfig4 = _item$dataConfig4.data) === null || _item$dataConfig4 === void 0 ? void 0 : _item$dataConfig4.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 +88,18 @@ function Accordion(_ref2) {
     hasContentPadding,
     // New prop to determine whether to apply contentPadding
     onChange,
-    activeKey
+    activeKey,
+    componentConfig,
+    subtext,
+    customBody,
+    onActionClick,
+    collapsibleActiveKey
   } = _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 +108,90 @@ function Accordion(_ref2) {
   }, /*#__PURE__*/_react.default.createElement(_styles.CollapseStyle, null, /*#__PURE__*/_react.default.createElement(_antd.Collapse, {
     expandIcon: CollapseIcon,
     expandIconPosition: "end",
-    defaultActiveKey: disabled ? '-1' : defaultActiveKey,
-    onChange: onChange
+    defaultActiveKey: disabled ? "-1" : defaultActiveKey,
+    onChange: onChange,
+    activeKey: collapsibleActiveKey
   }, /*#__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 12px;\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-item:last-child {\n    margin-bottom: 0;\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

@@ -12,6 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
 var _styles = require("./styles");
 const _excluded = ["className", "disabled", "onClick", "htmlType", "iconConfig", "label", "showEllipsis", "size", "type", "data-test"];
+/* 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; }
@@ -46,13 +47,13 @@ function CustomButton(_ref) {
       showEllipsis,
       size,
       type,
-      'data-test': dataTest
+      "data-test": dataTest
     } = _ref,
     domProps = _objectWithoutProperties(_ref, _excluded);
   const buttonTypography = (0, _styles.getButtonTypography)(size);
   const iconSize = (0, _styles.getIconSize)(size);
   return /*#__PURE__*/_react.default.createElement(_styles.ColoredStyledButton, _extends({
-    className: "".concat(disabled ? "".concat(type.replace('danger-', ''), "-disabled") : type, " ").concat(type.replace('danger-', '') === 'text-only' ? "".concat(size, "-text-only") : size, " ").concat(className),
+    className: "".concat(disabled ? "".concat(type.replace("danger-", ""), "-disabled") : type, " ").concat(type.replace("danger-", "") === "text-only" ? "".concat(size, "-text-only") : size, " ").concat(className),
     disabled: disabled,
     onClick: disabled ? null : onClick,
     type: htmlType,
@@ -60,44 +61,48 @@ function CustomButton(_ref) {
     "data-test": dataTest
   }, 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
+  }, iconConfig.position === "left" && /*#__PURE__*/_react.default.isValidElement(iconConfig.icon) && /*#__PURE__*/_react.default.cloneElement(iconConfig.icon, {
+    size: (iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.size) || iconSize,
+    color: (iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.color) || undefined
   }), 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
+  }, label)), iconConfig.position === "right" && /*#__PURE__*/_react.default.isValidElement(iconConfig.icon) && /*#__PURE__*/_react.default.cloneElement(iconConfig.icon, {
+    size: (iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.size) || iconSize,
+    color: (iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.color) || undefined
   })));
 }
 CustomButton.propTypes = {
   className: _propTypes.default.string,
-  'data-test': _propTypes.default.string,
+  "data-test": _propTypes.default.string,
   disabled: _propTypes.default.bool,
   onClick: _propTypes.default.func.isRequired,
-  htmlType: _propTypes.default.oneOf(['button', 'submit', 'reset']),
+  htmlType: _propTypes.default.oneOf(["button", "submit", "reset"]),
   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]))
+    position: _propTypes.default.oneOf(["left", "right"]),
+    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,
-  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-  type: _propTypes.default.oneOf(['primary', 'secondary', 'text-only', 'danger-primary', 'danger-secondary', 'danger-text-only'])
+  size: _propTypes.default.oneOf(["small", "medium", "large"]),
+  type: _propTypes.default.oneOf(["primary", "secondary", "text-only", "danger-primary", "danger-secondary", "danger-text-only"])
 };
 CustomButton.defaultProps = {
-  className: '',
-  'data-test': null,
+  className: "",
+  "data-test": null,
   disabled: false,
-  htmlType: 'button',
+  htmlType: "button",
   iconConfig: {
-    position: 'left'
+    position: "left",
+    size: 20
   },
-  label: '',
+  label: "",
   showEllipsis: false,
-  size: 'medium',
-  type: 'primary'
+  size: "medium",
+  type: "primary"
 };
 var _default = exports.default = CustomButton;

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

@@ -14,7 +14,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 var _default = exports.default = {};
 const StyledButton = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  .text-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px; \n    text-align: left;\n  }\n"])));
 const EllipsisTypography = exports.EllipsisTypography = (0, _styledComponents.default)(_Typography.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: block;  \n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 84px;\n"])));
-const ColoredStyledButton = exports.ColoredStyledButton = (0, _styledComponents.default)(StyledButton)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 2.25rem;\n  min-width: 100px;\n  padding: 0.625rem 1rem;\n\n  &.small {\n    height: 30px;\n    min-width: 80px;\n    padding: 10px 16px;\n  }\n\n  &.medium {\n    height: 36px;\n    min-width: 100px;\n    padding: 10px 16px;\n  }\n\n  &.large {\n    height: 48px;\n    min-width: 136px;\n    padding: 10px 24px;\n  }\n\n  &.medium-text-only,\n  &.small-text-only {\n    min-width: auto;\n    height: auto;\n    padding: 4px 0;\n  }\n\n  &.large-text-only {\n    min-width: auto;\n    height: auto;\n    padding: 8px 0;\n  }\n\n  &.primary {\n    background: var(--color-primary);\n    border: 1px solid var(--color-primary);\n    color: var(--color-primary-background);\n  }\n  &.primary:hover {\n    background: var(--color-primary-hover);\n    border: 1px solid var(--color-primary-hover);\n  }\n\n  &.primary-disabled {\n    background: var(--color-disabled-button);\n    cursor: not-allowed;\n    color: var(--color-primary-background);\n    border: 1px solid var(--color-disabled-button);\n  }\n\n  &.secondary {\n    background: transparent;\n    border: 1px solid var(--color-primary);\n    color: var(--color-primary);\n  }\n  &.secondary:hover {\n    background: transparent;\n    border: 1px solid var(--color-primary-hover);\n    color: var(--color-primary-hover);\n  }\n\n  &.secondary-disabled {\n    background: transparent;\n    border: 1px solid var(--color-disabled-button);\n    color: var(--color-disabled-button);\n    cursor: not-allowed;\n  }\n  \n  &.text-only {\n    border: none;\n    background: transparent;\n    color: var(--color-primary);\n  }\n  &.text-only:hover {\n    color: var(--color-primary-hover);\n  }\n\n  &.text-only-disabled {\n    border: none;\n    background: transparent;\n    color: var(--color-disabled-button);\n    cursor: not-allowed;\n  }\n  \n  &.danger-primary {\n    background: var(--color-negative);\n    color: var(--color-primary-background);\n    border: 1px solid var(--color-negative);\n  }\n  &.danger-primary:hover {\n    background: var(--color-hover-negative);\n    color: var(--color-primary-background);\n    border: 1px solid var(--color-hover-negative);\n  }\n\n  &.danger-secondary {\n    background: transparent;\n    border: 1px solid var(--color-negative);\n    color: var(--color-negative);\n  }\n  &.danger-secondary:hover {\n    background: transparent;\n    border: 1px solid var(--color-hover-negative);\n    color: var(--color-hover-negative);\n  }\n\n  &.danger-text-only {\n    border: none;\n    color: var(--color-negative);\n    background: transparent;\n  }\n  &.danger-text-only:hover {\n    border: none;\n    color: var(--color-hover-negative);\n    background: transparent;\n  }\n  @media only screen and (max-width: 600px) {\n    &.text-only:hover {\n      color: var(--color-primary);\n    }\n  }\n"])));
+const ColoredStyledButton = exports.ColoredStyledButton = (0, _styledComponents.default)(StyledButton)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 2.25rem;\n  min-width: 100px;\n  padding: 0.625rem 1rem;\n\n  &.small {\n    height: 30px;\n    min-width: 80px;\n    padding: 10px 16px;\n  }\n\n  &.medium {\n    height: 36px;\n    min-width: 100px;\n    padding: 10px 16px;\n  }\n\n  &.large {\n    height: 48px;\n    min-width: 136px;\n    padding: 10px 24px;\n  }\n\n  &.medium-text-only,\n  &.small-text-only {\n    min-width: auto;\n    height: auto;\n    padding: 4px 0;\n  }\n\n  &.large-text-only {\n    min-width: auto;\n    height: auto;\n    padding: 8px 0;\n  }\n\n  &.primary {\n    background: var(--color-primary);\n    border: 1px solid var(--color-primary);\n    color: var(--color-primary-background);\n  }\n  &.primary:hover {\n    background: var(--color-primary-hover);\n    border: 1px solid var(--color-primary-hover);\n  }\n\n  &.primary-disabled {\n    background: var(--color-disabled-button);\n    cursor: not-allowed;\n    color: var(--color-primary-background);\n    border: 1px solid var(--color-disabled-button);\n  }\n\n  &.gradient {\n  background: var(--color-primary-background); /* solid fill inside */\n  color: #014FC5; /* pick a readable color */\n  border: 1px solid transparent;\n  border-radius: 4px;\n  background-image: linear-gradient(#fff, #fff), \n                    linear-gradient(90deg, #0098FF, #9A6CFF, #DF58D1, #FB6252, #FEA40A);\n  background-origin: border-box;\n  background-clip: padding-box, border-box;\n  transition: all 0.3s ease;\n}\n\n&.gradient:hover {\n  background-image: linear-gradient(#fff, #fff), \n                    linear-gradient(90deg, #FEA40A, #FB6252, #DF58D1, #9A6CFF, #0098FF);\n}\n\n&.gradient-disabled {\n  background: var(--color-disabled-button);\n  border: 1px solid var(--color-disabled-button);\n  color: var(--color-primary-background);\n  cursor: not-allowed;\n}\n\n\n  &.secondary {\n    background: transparent;\n    border: 1px solid var(--color-primary);\n    color: var(--color-primary);\n  }\n  &.secondary:hover {\n    background: transparent;\n    border: 1px solid var(--color-primary-hover);\n    color: var(--color-primary-hover);\n  }\n\n  &.secondary-disabled {\n    background: transparent;\n    border: 1px solid var(--color-disabled-button);\n    color: var(--color-disabled-button);\n    cursor: not-allowed;\n  }\n  \n  &.text-only {\n    border: none;\n    background: transparent;\n    color: var(--color-primary);\n  }\n  &.text-only:hover {\n    color: var(--color-primary-hover);\n  }\n\n  &.text-only-disabled {\n    border: none;\n    background: transparent;\n    color: var(--color-disabled-button);\n    cursor: not-allowed;\n  }\n  \n  &.danger-primary {\n    background: var(--color-negative);\n    color: var(--color-primary-background);\n    border: 1px solid var(--color-negative);\n  }\n  &.danger-primary:hover {\n    background: var(--color-hover-negative);\n    color: var(--color-primary-background);\n    border: 1px solid var(--color-hover-negative);\n  }\n\n  &.danger-secondary {\n    background: transparent;\n    border: 1px solid var(--color-negative);\n    color: var(--color-negative);\n  }\n  &.danger-secondary:hover {\n    background: transparent;\n    border: 1px solid var(--color-hover-negative);\n    color: var(--color-hover-negative);\n  }\n\n  &.danger-text-only {\n    border: none;\n    color: var(--color-negative);\n    background: transparent;\n  }\n  &.danger-text-only:hover {\n    border: none;\n    color: var(--color-hover-negative);\n    background: transparent;\n  }\n  @media only screen and (max-width: 600px) {\n    &.text-only:hover {\n      color: var(--color-primary);\n    }\n  }\n"])));
 function getButtonTypography(size) {
   switch (size) {
     case 'large':

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

@@ -1,27 +1,33 @@
 "use strict";
 
 require("core-js/modules/es.object.assign.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = CustomDatePicker;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _antd = require("antd");
 var _CalendarTodayRounded = _interopRequireDefault(require("@material-ui/icons/CalendarTodayRounded"));
 var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
 var _TypographiesMap = _interopRequireDefault(require("../../global-css/TypographiesMap"));
 require("antd/dist/reset.css");
 var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
-const _excluded = ["data-test"];
-var _templateObject;
+const _excluded = ["data-test", "disabledDateFunction", "containerSize"];
+var _templateObject, _templateObject2;
+/* eslint-disable */
+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 _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; }
 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 FullWidthDatePicker = (0, _styledComponents.default)(_antd.DatePicker)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
+const CalendarPopupStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.compact-calendar .ant-picker-body {\n  padding: 6px 10px !important;   /* moderate spacing */\n}\n\n.compact-calendar .ant-picker-content {\n  margin: 0 !important;\n  width: 100% !important;\n  table-layout: fixed;\n}\n\n.compact-calendar .ant-picker-cell {\n  padding: 2px 1px !important;    /* smaller inner padding */\n  height: 30px;                   /* compact but readable */\n  line-height: 30px;\n}\n\n\n"])));
+const FullWidthDatePicker = (0, _styledComponents.default)(_antd.DatePicker)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
 
 /**
  * A custom datepicker component.
@@ -37,7 +43,9 @@ const FullWidthDatePicker = (0, _styledComponents.default)(_antd.DatePicker)(_te
  */
 function CustomDatePicker(_ref) {
   let {
-      'data-test': dataTest
+      "data-test": dataTest,
+      disabledDateFunction,
+      containerSize
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
@@ -65,7 +73,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,47 +85,50 @@ 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({
+  }, containerSize === "small" && /*#__PURE__*/_react.default.createElement(CalendarPopupStyle, null), /*#__PURE__*/_react.default.createElement(FullWidthDatePicker, _extends({
+    dropdownClassName: containerSize === "small" ? "compact-calendar" : "",
+    showToday: containerSize === "small" ? false : true,
     allowClear: true // Discussed with UX team
     ,
     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,