oa-componentbook 1.0.1-stage.39 → 1.0.1-stage.390

package/build/components/oa-component-info/CustomInfo.js

@@ -27,6 +27,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @param {string} fontColor - The color of the text.
  * @param {object} iconConfig - Configuration for the icon.
  * @param {string} title - The title to be displayed.
+ * @param {string} borderColor - The border color of the component.
  *
  * @returns {ReactElement} A styled component with the specified properties.
  */
@@ -37,7 +38,8 @@ function CustomInfo(_ref) {
     description,
     fontColor,
     iconConfig,
-    title
+    title,
+    borderColor
   } = _ref;
   /**
    * Renders the icon based on the presence of a title.
@@ -65,7 +67,8 @@ function CustomInfo(_ref) {
     }, renderIcon()) : renderIcon();
   };
   return /*#__PURE__*/_react.default.createElement(_styles.InfoContainer, {
-    $color: color
+    $color: color,
+    $borderColor: borderColor
   }, /*#__PURE__*/_react.default.createElement(_styles.RowFlex, null, iconConfig.position === 'left' && conditionallyAddTooltipToIcon(), /*#__PURE__*/_react.default.createElement(_styles.ColFlex, null, title && /*#__PURE__*/_react.default.createElement(_Typography.default, {
     color: fontColor,
     typography: "type-t2-700"
@@ -96,7 +99,8 @@ CustomInfo.propTypes = {
     position: _propTypes.default.oneOf(['left', 'right']),
     tooltipText: _propTypes.default.string
   }),
-  title: _propTypes.default.string
+  title: _propTypes.default.string,
+  borderColor: _propTypes.default.string
 };
 CustomInfo.defaultProps = {
   buttonConfig: {
@@ -110,5 +114,6 @@ CustomInfo.defaultProps = {
   },
   fontColor: 'primary-content',
   title: '',
-  description: ''
+  description: '',
+  borderColor: ''
 };

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

@@ -8,8 +8,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const RowFlex = exports.RowFlex = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: row;\n    gap: 8px;\n"])));
-const ColFlex = exports.ColFlex = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n"])));
+const RowFlex = exports.RowFlex = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
+const ColFlex = exports.ColFlex = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n"])));
 const InfoContainer = exports.InfoContainer = (0, _styledComponents.default)(RowFlex).attrs({
   as: 'section'
-})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 12px;\n  align-items: center;\n  border-radius: 8px;\n  background-color: var(--color-", ");\n  \n  button {\n    margin-left: 8px;\n  };\n"])), props => props.$color);
+})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 12px;\n  align-items: center;\n  border-radius: 8px;\n  background-color: var(--color-", ");\n  border: 1px solid var(--color-", ");\n\n  button {\n    margin-left: 8px;\n  }\n"])), props => props.$color, props => props.$borderColor);

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"])));

package/build/components/oa-component-pagination/CustomPagination.js

@@ -0,0 +1,111 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+var _TypographiesMap = _interopRequireDefault(require("../../global-css/TypographiesMap"));
+var _styles = require("./styles");
+const _excluded = ["current", "total", "pageSize", "onChange", "onShowSizeChange", "pageSizeOptions", "showSizeChanger", "showQuickJumper", "showTotal", "size", "style"];
+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; }
+/**
+ * @description A custom wrapper for Ant Design Pagination component with consistent theming.
+ * @param {number} current - The current page number (1-based).
+ * @param {number} total - The total number of items.
+ * @param {number} pageSize - The number of items per page.
+ * @param {function} onChange - Callback function when page changes.
+ * @param {function} onShowSizeChange - Callback function when page size changes.
+ * @param {array} pageSizeOptions - Array of page size options.
+ * @param {boolean} showSizeChanger - Whether to show the page size selector.
+ * @param {boolean} showQuickJumper - Whether to show the quick jumper input.
+ * @param {boolean} showTotal - Whether to show the total items count.
+ * @param {string} size - The size of the pagination component.
+ * @param {object} style - Custom styles for the component.
+ * @param {object} antDesignProps - Additional props to pass to Ant Design Pagination.
+ * @returns {JSX.Element} The rendered pagination component.
+ */
+function CustomPagination(_ref) {
+  let {
+      current = 1,
+      total = 0,
+      pageSize = 10,
+      onChange,
+      onShowSizeChange,
+      pageSizeOptions = [10, 20, 50, 100],
+      showSizeChanger = true,
+      showQuickJumper = false,
+      showTotal = true,
+      size = 'default',
+      style
+    } = _ref,
+    antDesignProps = _objectWithoutProperties(_ref, _excluded);
+  const renderTotal = (totalItems, range) => {
+    if (!showTotal) return null;
+    return "Showing ".concat(range[0], "-").concat(range[1], " of ").concat(totalItems, " items");
+  };
+  return /*#__PURE__*/_react.default.createElement(_styles.MainContainer, {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      components: {
+        Pagination: {}
+      },
+      token: {
+        colorPrimary: '#014FC5',
+        colorPrimaryBorder: '#014FC5',
+        colorPrimaryHover: '#82A9E2',
+        colorText: '#212121',
+        colorTextDisabled: '#BFBFBF',
+        colorTextPlaceholder: '#959595',
+        borderRadius: 2,
+        colorBorder: '#E0E0E0'
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Pagination, _extends({
+    current: current,
+    total: total,
+    pageSize: pageSize,
+    onChange: onChange,
+    onShowSizeChange: onShowSizeChange,
+    showSizeChanger: showSizeChanger,
+    showQuickJumper: showQuickJumper,
+    showTotal: renderTotal,
+    pageSizeOptions: pageSizeOptions,
+    size: size
+  }, antDesignProps))));
+}
+CustomPagination.propTypes = {
+  current: _propTypes.default.number,
+  total: _propTypes.default.number,
+  pageSize: _propTypes.default.number,
+  onChange: _propTypes.default.func,
+  onShowSizeChange: _propTypes.default.func,
+  pageSizeOptions: _propTypes.default.arrayOf(_propTypes.default.number),
+  showSizeChanger: _propTypes.default.bool,
+  showQuickJumper: _propTypes.default.bool,
+  showTotal: _propTypes.default.bool,
+  size: _propTypes.default.oneOf(['default', 'small']),
+  style: _propTypes.default.object
+};
+CustomPagination.defaultProps = {
+  current: 1,
+  total: 0,
+  pageSize: 10,
+  onChange: undefined,
+  onShowSizeChange: undefined,
+  pageSizeOptions: [10, 20, 50, 100],
+  showSizeChanger: true,
+  showQuickJumper: false,
+  showTotal: true,
+  size: 'default',
+  style: undefined
+};
+var _default = exports.default = CustomPagination;

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MainContainer = 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 MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ant-pagination-item {\n    border: 1px solid #E0E0E0;\n  }\n  .ant-pagination-item-active {\n    border: 1px solid #014FC5;\n  }\n    .mobile-pagination{margin: 0;padding:0;}\n    .ant-pagination-total-text,.ant-pagination-options{display: none;}\n"])));
+var _default = exports.default = {};

package/build/components/oa-component-select/CustomSelect.js

@@ -22,9 +22,10 @@ var _Typography = _interopRequireDefault(require("../oa-component-typography/Typ
 var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
 require("antd/dist/reset.css");
 var _Elevation = require("../../global-css/Elevation");
-const _excluded = ["allText", "children", "defaultValue", "data-test", "mode", "onSelectionChange", "options", "placeholder"],
+const _excluded = ["allText", "children", "defaultValue", "data-test", "mode", "onSelectionChange", "options", "placeholder", "maxSelectForMultiSelect", "onCustomSelect"],
   _excluded2 = ["label", "disabled", "value"];
 var _templateObject;
+/* eslint-disable */
 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; }
@@ -40,7 +41,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 const {
   Option
 } = _antd.Select;
-const StyledSelect = (0, _styledComponents.default)(_antd.Select)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* Hiding the last tag in case of All being selected. */\n .ant-select-selection-overflow-item.ant-select-selection-overflow-item-rest {\n    display: ", "\n }\n"])), props => props.maxTagCount === 1 ? 'none' : undefined);
+const StyledSelect = (0, _styledComponents.default)(_antd.Select)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* Hiding the last tag in case of All being selected. */\n  .ant-select-selection-overflow-item.ant-select-selection-overflow-item-rest {\n    display: ", ";\n  }\n  .ant-select-selection-item-content {\n    max-width: 70px;\n  }\n"])), props => props.maxTagCount === 1 ? "none" : undefined);
 
 /**
  * Takes an array of values and an object mapping values to labels and returns an
@@ -75,17 +76,18 @@ function CustomSelect(_ref) {
       allText,
       children,
       defaultValue,
-      'data-test': dataTest,
+      "data-test": dataTest,
       mode,
       onSelectionChange,
       options,
-      placeholder
+      placeholder,
+      maxSelectForMultiSelect,
+      onCustomSelect
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   // If allText is present in default values, we select all the options manually.
-
-  const actualDefaultValue = mode === 'multiple' ? [...defaultValue] : defaultValue;
-  if (mode === 'multiple' && allText && defaultValue !== null && defaultValue !== void 0 && defaultValue.includes(allText)) {
+  const actualDefaultValue = mode === "multiple" ? [...defaultValue] : defaultValue;
+  if (mode === "multiple" && allText && defaultValue !== null && defaultValue !== void 0 && defaultValue.includes(allText)) {
     var _options$filter$map, _options$filter;
     // Emptying the array first.
     actualDefaultValue.length = 0;
@@ -99,52 +101,77 @@ function CustomSelect(_ref) {
       return !((_option$disabled = option === null || option === void 0 ? void 0 : option.disabled) !== null && _option$disabled !== void 0 ? _option$disabled : false);
     })) === null || _options$filter === void 0 ? void 0 : _options$filter.map(option => option.value)) !== null && _options$filter$map !== void 0 ? _options$filter$map : []));
   }
-  const valueLabelMap = options.reduce((accumulator, option) => {
+  const [selectedOptions, setSelectedOptions] = (0, _react.useState)(actualDefaultValue);
+  const valueLabelMap = Array.isArray(options) && (options === null || options === void 0 ? void 0 : options.reduce((accumulator, option) => {
     var _option$label;
     accumulator[option.value] = (_option$label = option === null || option === void 0 ? void 0 : option.label) !== null && _option$label !== void 0 ? _option$label : option.value;
     return accumulator;
-  }, {});
-  const actualOptions = options === null || options === void 0 ? void 0 : options.map(option => {
+  }, {}));
+  const actualOptions = Array.isArray(options) && options.map(option => {
     const {
         label,
         disabled = false,
         value
       } = option,
       otherProperties = _objectWithoutProperties(option, _excluded2);
+    const shouldDisableOption = (option, selectedOptions, maxSelectForMultiSelect, allText) => {
+      var _selectedOptions$filt;
+      // If option is already disabled, keep it disabled
+      if (option.disabled) return true;
+
+      // If no max limit, don't disable
+      if (!maxSelectForMultiSelect) return false;
+
+      // If this option is already selected, don't disable it (so user can deselect)
+      if (selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.includes(option.value)) return false;
+
+      // If this is the 'all' option, don't disable it
+      if (option.value === allText) return false;
+
+      // Check if we've reached the max limit (excluding allText)
+      const actualSelectionCount = (selectedOptions === null || selectedOptions === void 0 || (_selectedOptions$filt = selectedOptions.filter(val => val !== allText)) === null || _selectedOptions$filt === void 0 ? void 0 : _selectedOptions$filt.length) || 0;
+      return actualSelectionCount >= maxSelectForMultiSelect;
+    };
+
+    // Determine if this option should be disabled due to max limit
+    const shouldBeDisabled = shouldDisableOption(option, selectedOptions, maxSelectForMultiSelect, allText);
+    const finalDisabled = disabled || shouldBeDisabled;
     if ((0, _utils.isString)(label) || (0, _utils.isNumber)(label)) {
       return _objectSpread({
         label: /*#__PURE__*/_react.default.createElement(_Typography.default, {
-          color: disabled ? 'placeholder-text' : undefined,
+          color: finalDisabled ? "placeholder-text" : undefined,
           typography: "type-b2-400",
+          title: label,
           "data-test": dataTest ? "".concat(dataTest, "-(").concat(label, ")") : undefined
         }, label),
-        disabled,
+        disabled: finalDisabled,
         value
       }, otherProperties);
     }
     if ( /*#__PURE__*/_react.default.isValidElement(label)) {
       return _objectSpread({
         label: dataTest ? /*#__PURE__*/_react.default.cloneElement(label, {
-          'data-test': "".concat(dataTest, "-(").concat(label, ")")
+          "data-test": "".concat(dataTest, "-(").concat(label, ")")
         }) : label,
-        disabled,
+        disabled: finalDisabled,
         value
       }, otherProperties);
     }
     if ((0, _utils.isString)(value) || (0, _utils.isNumber)(value)) {
       return _objectSpread({
         label: /*#__PURE__*/_react.default.createElement(_Typography.default, {
-          color: disabled ? 'placeholder-text' : undefined,
+          color: finalDisabled ? "placeholder-text" : undefined,
           typography: "type-b2-400",
           "data-test": dataTest ? "".concat(dataTest, "-(").concat(value, ")") : undefined
         }, value),
         value,
-        disabled
+        disabled: finalDisabled
       }, otherProperties);
     }
-    return option;
+    return _objectSpread(_objectSpread({}, option), {}, {
+      disabled: finalDisabled
+    });
   });
-  const [selectedOptions, setSelectedOptions] = (0, _react.useState)(actualDefaultValue);
 
   /**
    * Return a placeholder text for the maxTagCount option.
@@ -203,7 +230,18 @@ function CustomSelect(_ref) {
       value
     });
   };
-
+  /**
+   * Checks if maximum selection limit has been reached
+   * @param {Array} currentSelection - Current selected options array
+   * @param {Boolean} isSelecting - Whether we're selecting (true) or deselecting (false)
+   * @returns {Boolean} - True if max limit would be exceeded
+   */
+  const isMaxSelectReached = currentSelection => {
+    var _currentSelection$fil;
+    // Count selections excluding allText if present
+    const actualSelectionCount = (currentSelection === null || currentSelection === void 0 || (_currentSelection$fil = currentSelection.filter(option => option !== allText)) === null || _currentSelection$fil === void 0 ? void 0 : _currentSelection$fil.length) || 0;
+    return actualSelectionCount >= maxSelectForMultiSelect;
+  };
   /**
    * This function is called whenever the selection changes for a multiple select.
    * @param {Boolean} select - True if the option was selected, false if it was deselected.
@@ -222,6 +260,10 @@ function CustomSelect(_ref) {
       newlySelectedOptions.splice(allIndex, 1);
     }
     if (select) {
+      if (maxSelectForMultiSelect && value !== allText && isMaxSelectReached(newlySelectedOptions)) {
+        // Don't proceed with selection if max limit reached
+        return;
+      }
       if (value === allText) {
         newlySelectedOptions.length = 0; // Emptying the array.
 
@@ -229,7 +271,7 @@ function CustomSelect(_ref) {
         addAllOptions(options, newlySelectedOptions);
       } else {
         safePush(newlySelectedOptions, value);
-        const enabledOptions = options.filter(option => {
+        const enabledOptions = options === null || options === void 0 ? void 0 : options.filter(option => {
           var _option$disabled2;
           return !((_option$disabled2 = option === null || option === void 0 ? void 0 : option.disabled) !== null && _option$disabled2 !== void 0 ? _option$disabled2 : false);
         });
@@ -249,14 +291,14 @@ function CustomSelect(_ref) {
     onSelectionChange(valuesArrayToOptionArray(optionsWithoutAllText, valueLabelMap));
     setSelectedOptions(newlySelectedOptions);
   };
-  const onOptionsChange = mode === 'multiple' ? onOptionsChangeForMultiple : onOptionsChangeForSingle;
+  const onOptionsChange = mode === "multiple" ? onOptionsChangeForMultiple : onOptionsChangeForSingle;
   return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
     theme: {
       components: {
         Select: {
-          optionHeight: (props === null || props === void 0 ? void 0 : props.size) === 'small' ? '36px' : '52px',
-          optionSelectedBg: _ColorVariablesMap.default['--color-primary-background'],
-          optionSelectedColor: _ColorVariablesMap.default['--color-primary']
+          optionHeight: (props === null || props === void 0 ? void 0 : props.size) === "small" ? "36px" : "52px",
+          optionSelectedBg: _ColorVariablesMap.default["--color-primary-background"],
+          optionSelectedColor: _ColorVariablesMap.default["--color-primary"]
           // optionPadding: [3, 2],
           // optionPadding: (props?.size === 'small') ? '8px 12px' : '16 16',
           // activeShadow: '0px 0px 4px 0px red', // Box shadow for active select box.
@@ -264,18 +306,18 @@ function CustomSelect(_ref) {
       },
       token: {
         // controlOutline: '4px 4px 4px 4px red', // an attempt at applying box shadow
-        colorTextPlaceholder: _ColorVariablesMap.default['--color-placeholder-text'],
+        colorTextPlaceholder: _ColorVariablesMap.default["--color-placeholder-text"],
         // Color of placeholder text
-        colorTextQuaternary: _ColorVariablesMap.default['--color-secondary-content'],
+        colorTextQuaternary: _ColorVariablesMap.default["--color-secondary-content"],
         // Color of dropdown arrow.
 
-        colorPrimary: _ColorVariablesMap.default['--color-primary'],
+        colorPrimary: _ColorVariablesMap.default["--color-primary"],
         // for active color of select
-        colorPrimaryHover: _ColorVariablesMap.default['--color-primary'],
+        colorPrimaryHover: _ColorVariablesMap.default["--color-primary"],
         // for hover color of select
-        borderRadius: '4px',
+        borderRadius: "4px",
         // For border radius of select text field.
-        borderRadiusLG: '4px',
+        borderRadiusLG: "4px",
         // For border radius of dropdown
         controlHeight: 48,
         // height of text field (tag height is half of this, i.e. 24px)
@@ -283,46 +325,56 @@ function CustomSelect(_ref) {
         // height of small text field
 
         // This controls padding of larger text box
-        controlPaddingHorizontalSM: (props === null || props === void 0 ? void 0 : props.size) === 'small' ? 13 : 17,
+        controlPaddingHorizontalSM: (props === null || props === void 0 ? void 0 : props.size) === "small" ? 13 : 17,
         // 1 extra so that it shows 12px and 16px in browser console.
-        paddingSM: (props === null || props === void 0 ? void 0 : props.size) === 'small' ? 13 : 17,
+        paddingSM: (props === null || props === void 0 ? void 0 : props.size) === "small" ? 13 : 17,
         // paddingSM is what determines padding of input box.
 
-        controlItemBgHover: _ColorVariablesMap.default['--color-background-info'],
+        controlItemBgHover: _ColorVariablesMap.default["--color-background-info"],
         // hover color of items
-        colorBgElevated: _ColorVariablesMap.default['--color-primary-background'],
+        colorBgElevated: _ColorVariablesMap.default["--color-primary-background"],
         // background color of dropdown
         // multipleItemHeight: 100,
-        colorBgContainerDisabled: _ColorVariablesMap.default['--color-divider'],
+        colorBgContainerDisabled: _ColorVariablesMap.default["--color-divider"],
         // background color of disabled select
-        colorBorder: _ColorVariablesMap.default['--color-placeholder-text'],
-        colorFillSecondary: _ColorVariablesMap.default['--color-secondary-background'],
+        colorBorder: _ColorVariablesMap.default["--color-placeholder-text"],
+        colorFillSecondary: _ColorVariablesMap.default["--color-secondary-background"],
         // background color for tags
 
-        colorText: _ColorVariablesMap.default['--color-primary-content'],
+        colorText: _ColorVariablesMap.default["--color-primary-content"],
         // Text color of unselected options in dropdown
-        colorTextDisabled: _ColorVariablesMap.default['--color-secondary-content'],
+        colorTextDisabled: _ColorVariablesMap.default["--color-secondary-content"],
         // Text color when disabled
 
-        colorIcon: _ColorVariablesMap.default['--color-primary-content'],
+        colorIcon: _ColorVariablesMap.default["--color-primary-content"],
         // Color of cross icon
-        colorError: _ColorVariablesMap.default['--color-negative'],
+        colorError: _ColorVariablesMap.default["--color-negative"],
         // Error color
-        colorErrorBorderHover: _ColorVariablesMap.default['--color-negative'],
+        colorErrorBorderHover: _ColorVariablesMap.default["--color-negative"],
         // Hover error color should be same as error color
-        boxShadowSecondary: _Elevation.ElevationMap['elevation-white-1'] // Box shadow of dropdown.
+        boxShadowSecondary: _Elevation.ElevationMap["elevation-white-1"] // Box shadow of dropdown.
       }
     }
   }, /*#__PURE__*/_react.default.createElement(StyledSelect, _extends({
     "data-test": dataTest,
     dropdownStyle: {
-      padding: '0px'
+      padding: "0px"
     },
     mode: mode,
-    maxTagCount: (selectedOptions === null || selectedOptions === void 0 || (_selectedOptions$inde2 = selectedOptions.indexOf) === null || _selectedOptions$inde2 === void 0 ? void 0 : _selectedOptions$inde2.call(selectedOptions, allText)) === -1 ? 'responsive' : 1,
+    maxTagCount: (selectedOptions === null || selectedOptions === void 0 || (_selectedOptions$inde2 = selectedOptions.indexOf) === null || _selectedOptions$inde2 === void 0 ? void 0 : _selectedOptions$inde2.call(selectedOptions, allText)) === -1 ? "responsive" : 1,
     maxTagPlaceholder: getMaxTagPlaceholder,
     onDeselect: (0, _utils.isFunction)(onSelectionChange) ? value => onOptionsChange(false, value) : undefined,
-    onSelect: (0, _utils.isFunction)(onSelectionChange) ? value => onOptionsChange(true, value) : undefined,
+    onSelect: (0, _utils.isFunction)(onSelectionChange) || (0, _utils.isFunction)(onCustomSelect) ? value => {
+      if ((0, _utils.isFunction)(onSelectionChange)) {
+        onOptionsChange(true, value);
+      }
+      if ((0, _utils.isFunction)(onCustomSelect)) {
+        const fullOption = options === null || options === void 0 ? void 0 : options.find(opt => opt.value === value);
+        if (fullOption) {
+          onCustomSelect(fullOption);
+        }
+      }
+    } : undefined,
     suffixIcon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
       icon: _KeyboardArrowDown.default,
       size: 20
@@ -333,13 +385,19 @@ function CustomSelect(_ref) {
     placeholder: placeholder
   }, props), allText && /*#__PURE__*/_react.default.createElement(Option, {
     value: allText
-  }, allText), children || (actualOptions === null || actualOptions === void 0 ? void 0 : actualOptions.map(actualOption => {
+  }, allText), children || Array.isArray(actualOptions) && (actualOptions === null || actualOptions === void 0 ? void 0 : actualOptions.map(actualOption => {
     var _actualOption$disable;
     return /*#__PURE__*/_react.default.createElement(Option, {
       disabled: (_actualOption$disable = actualOption.disabled) !== null && _actualOption$disable !== void 0 ? _actualOption$disable : false,
       value: actualOption.value,
-      key: (0, _utils.getUUID)()
-    }, actualOption.label);
+      key: (0, _utils.getUUID)(),
+      label: actualOption.label
+    }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, actualOption.label, (actualOption === null || actualOption === void 0 ? void 0 : actualOption.subLabel) && /*#__PURE__*/_react.default.createElement("div", {
+      className: "margin-top-4"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: "type-b3-400",
+      color: "secondary-content"
+    }, actualOption === null || actualOption === void 0 ? void 0 : actualOption.subLabel))));
   }))));
 }
 CustomSelect.Option = _antd.Select.Option;
@@ -347,8 +405,8 @@ CustomSelect.propTypes = {
   allText: _propTypes.default.string,
   children: _propTypes.default.node,
   defaultValue: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.string, _propTypes.default.number]),
-  'data-test': _propTypes.default.string,
-  mode: _propTypes.default.oneOf(['multiple', 'tags']),
+  "data-test": _propTypes.default.string,
+  mode: _propTypes.default.oneOf(["multiple", "tags"]),
   onSelectionChange: _propTypes.default.func,
   options: _propTypes.default.arrayOf(
   // Checked from antd's github
@@ -356,17 +414,19 @@ CustomSelect.propTypes = {
     label: _propTypes.default.node,
     value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired
   })),
-  size: _propTypes.default.oneOf(['small', 'middle']),
-  placeholder: _propTypes.default.string
+  size: _propTypes.default.oneOf(["small", "middle"]),
+  placeholder: _propTypes.default.string,
+  maxSelectForMultiSelect: _propTypes.default.number
 };
 CustomSelect.defaultProps = {
   allText: null,
   children: null,
   defaultValue: [],
-  'data-test': null,
+  "data-test": null,
   mode: null,
   onSelectionChange: null,
   options: [],
-  size: 'middle',
-  placeholder: ''
+  size: "middle",
+  placeholder: "",
+  maxSelectForMultiSelect: null
 };