oa-componentbook 0.18.366 → 0.18.368

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

@@ -31,7 +31,7 @@ function CollapseIcon(_ref) {
 function renderCustomBody(customBody, onActionClick) {
   if (!customBody || !customBody.items) return null;
   return customBody.items.map((item, index) => {
-    var _item$dataConfig;
+    var _item$dataConfig, _item$dataConfig2, _item$dataConfig3, _item$dataConfig4;
     return /*#__PURE__*/_react.default.createElement("div", {
       key: index,
       className: "custom-body-item"
@@ -43,11 +43,13 @@ function renderCustomBody(customBody, onActionClick) {
     }, 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,
+      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$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", {
+    }, (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", {

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

@@ -10,4 +10,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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,\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"])));
+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-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,46 +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: (iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.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: (iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.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']),
+    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-table/CustomTableV1.js

@@ -8,6 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.json.stringify.js");
+require("core-js/modules/es.array.sort.js");
 require("core-js/modules/es.array.reduce.js");
 require("core-js/modules/es.array.includes.js");
 require("core-js/modules/es.string.includes.js");
@@ -29,8 +31,9 @@ var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/Materi
 var _CustomDropdown = _interopRequireDefault(require("../oa-component-dropdown/CustomDropdown"));
 var _CustomTag = _interopRequireDefault(require("../oa-component-tag/CustomTag"));
 var _CustomPagination = _interopRequireDefault(require("../oa-component-pagination/CustomPagination"));
+var _checkbox = _interopRequireDefault(require("antd/lib/checkbox"));
 const _excluded = ["columns", "dataSource", "pagination", "rowKey", "size", "style", "tableBorder", "emptyText", "ellipsisConfig", "multiItemConfig", "defaultCardShow", "setConfig", "customTableChange", "selectedRows", "onMobilePageChange", "emptyStateCard"],
-  _excluded2 = ["title", "dataIndex", "jsxConfig", "render", "ellipsisConfig", "multiItemConfig"];
+  _excluded2 = ["title", "dataIndex", "jsxConfig", "render", "ellipsisConfig", "multiItemConfig", "filterDropdown", "filterDropdownProps", "filters"];
 /* 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); }
@@ -43,7 +46,69 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typ
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function CustomTableV1(_ref) {
+// Custom Filter Dropdown Component
+const CustomFilterDropdown = _ref => {
+  let {
+    setSelectedKeys,
+    selectedKeys,
+    confirm,
+    clearFilters,
+    filters,
+    filterDropdownProps
+  } = _ref;
+  // Initialize with empty array - local state should start clean
+  const [localSelectedKeys, setLocalSelectedKeys] = (0, _react.useState)([]);
+
+  // Update local state when selectedKeys prop changes (when filters are applied)
+  (0, _react.useEffect)(() => {
+    // Only update if selectedKeys actually changed (when filters are applied)
+    setLocalSelectedKeys(selectedKeys || []);
+  }, [selectedKeys]);
+  const handleFilterChange = checkedValues => {
+    setLocalSelectedKeys(checkedValues);
+  };
+  const handleFilterConfirm = () => {
+    setSelectedKeys(localSelectedKeys);
+    confirm();
+  };
+  const handleFilterReset = () => {
+    // Clear the local state
+    setLocalSelectedKeys([]);
+    // Clear the applied filters
+    setSelectedKeys([]);
+    // Clear filters and close popup
+    clearFilters();
+    // Confirm the changes to close the popup
+    confirm();
+  };
+
+  // Check if current local state is different from applied state
+  const hasChanges = JSON.stringify([...localSelectedKeys].sort()) !== JSON.stringify([...(selectedKeys || [])].sort());
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "statusBox"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "secondary-content",
+    className: "type-sl1-700"
+  }, filterDropdownProps.filterTitle || "FILTER"), /*#__PURE__*/_react.default.createElement(_checkbox.default.Group, {
+    options: filters.map(filter => ({
+      label: filter.text,
+      value: filter.value
+    })),
+    value: localSelectedKeys,
+    onChange: handleFilterChange
+  }), /*#__PURE__*/_react.default.createElement("aside", null, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    type: "secondary",
+    onClick: handleFilterReset,
+    size: "small",
+    label: filterDropdownProps.filterReset || "Clear All"
+  }), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    onClick: handleFilterConfirm,
+    size: "small",
+    disabled: !hasChanges,
+    label: filterDropdownProps.filterConfirm || "Submit"
+  })));
+};
+function CustomTableV1(_ref2) {
   let {
       columns,
       dataSource,
@@ -61,10 +126,9 @@ function CustomTableV1(_ref) {
       selectedRows = [],
       onMobilePageChange,
       emptyStateCard
-    } = _ref,
-    antDesignProps = _objectWithoutProperties(_ref, _excluded);
+    } = _ref2,
+    antDesignProps = _objectWithoutProperties(_ref2, _excluded);
   // State to manage card vs table view and expanded cards
-
   const [viewMore, setViewMore] = (0, _react.useState)([]);
   const [ctaColumnsSorted, setCtaColumnsSorted] = (0, _react.useState)(null);
   const [cardShow, setCardShow] = (0, _react.useState)(false);
@@ -88,7 +152,6 @@ function CustomTableV1(_ref) {
     return isSelected;
   };
 
-  // Process columns: wrap titles in Typography, handle jsxConfig and custom renderers
   // Process columns: wrap titles in Typography, handle jsxConfig and custom renderers
   const finalColumns = (0, _react.useMemo)(() => {
     // Check if any column has non-array filters (like '{{branchDetails}}')
@@ -107,12 +170,22 @@ function CustomTableV1(_ref) {
           jsxConfig,
           render: userRender,
           ellipsisConfig: colEllipsisConfig,
-          multiItemConfig: colMultiItemConfig
+          multiItemConfig: colMultiItemConfig,
+          filterDropdown,
+          filterDropdownProps,
+          filters
         } = col,
         rest = _objectWithoutProperties(col, _excluded2);
       const titleNode = (0, _utils.isString)(title) || (0, _utils.isNumber)(title) ? /*#__PURE__*/_react.default.createElement(_Typography.default, {
         typography: "type-sl1-700"
       }, title) : title;
+      let finalFilterDropdown = filterDropdown;
+      if (filterDropdownProps && filters && Array.isArray(filters)) {
+        finalFilterDropdown = props => /*#__PURE__*/_react.default.createElement(CustomFilterDropdown, _extends({}, props, {
+          filters: filters,
+          filterDropdownProps: filterDropdownProps
+        }));
+      }
 
       // Handle jsxConfig for columns - now supports array
       if (jsxConfig) {
@@ -250,6 +323,8 @@ function CustomTableV1(_ref) {
           isCTA: !hasCustomRenderers,
           position,
           render: ctaRender
+        }, finalFilterDropdown && {
+          filterDropdown: finalFilterDropdown
         });
       }
 
@@ -275,9 +350,12 @@ function CustomTableV1(_ref) {
           enabled: false
         });
       }
-      return _objectSpread(_objectSpread({}, rest), {}, {
+      return _objectSpread(_objectSpread(_objectSpread({}, rest), {}, {
         dataIndex,
-        title: titleNode,
+        title: titleNode
+      }, finalFilterDropdown && {
+        filterDropdown: finalFilterDropdown
+      }), {}, {
         render: (value, record) => {
           let items = [];
           if (Array.isArray(value)) {
@@ -376,7 +454,6 @@ function CustomTableV1(_ref) {
   };
 
   // Helper to get cell content (uses column render or dataIndex)
-  // Updated getContentToBeRender to handle array dataIndex
   const getContentToBeRender = (col, row) => {
     if (typeof col.render === "function") {
       const value = Array.isArray(col.dataIndex) ? getByPath(row, col.dataIndex.join(".")) : col.dataIndex ? row[col.dataIndex] : undefined;
@@ -435,7 +512,9 @@ function CustomTableV1(_ref) {
     }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
       typography: "type-t2-700",
       color: "primary-content"
-    }, /*#__PURE__*/_react.default.createElement("div", null, (_finalColumns$ = finalColumns[0]) === null || _finalColumns$ === void 0 ? void 0 : _finalColumns$.title, ": "), getContentToBeRender(finalColumns[0], row))), finalColumns.map((col, colIndex) => {
+    }, /*#__PURE__*/_react.default.createElement("div", null, (_finalColumns$ = finalColumns[0]) === null || _finalColumns$ === void 0 ? void 0 : _finalColumns$.title, " : "), /*#__PURE__*/_react.default.createElement("div", {
+      className: "srValue"
+    }, getContentToBeRender(finalColumns[0], row)))), finalColumns.map((col, colIndex) => {
       // Exclude the first column and any column with action buttons (jsxConfig) from the card view
       if (colIndex === 0 || col.isCTA) return null; // Ensure no action buttons in card
       if (!viewMore.includes(rowIndex) && colIndex > threshold) return null;

package/build/components/oa-component-table/stylesV1.js

@@ -14,6 +14,6 @@ var _templateObject, _templateObject2, _templateObject3;
 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const GlobalStyle = exports.GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-dropdown .ant-table-filter-dropdown .ant-dropdown-menu\xA0{padding: 0; top: 0;}\n.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item {border-radius: 0; padding: 12px !important;}\n.ant-dropdown .ant-table-filter-dropdown {border-radius: 8px;background: #FFF;box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);}\n.ant-dropdown .ant-table-filter-dropdown .ant-table-filter-dropdown-btns {padding: 12px; border: none;}\n.ant-dropdown .ant-table-filter-dropdown  .ant-btn-link, .ant-dropdown .ant-table-filter-dropdown  .ant-btn-primary {border-radius: 4px; min-width: 100px; padding: 7px 16px;\n  border: 1px solid #014FC5;  height: auto;text-align: center;font-size: 14px;font-style: normal;font-weight: 500;line-height: 20px; }\n.ant-dropdown .ant-table-filter-dropdown  .ant-btn-link {color:  #014FC5; background: #fff;}\n.ant-dropdown .ant-table-filter-dropdown  .ant-btn-primary {background:  #014FC5; color: #fff;}\n.ant-checkbox .ant-checkbox-inner {width: 18px; height: 18px; border: 1px solid #717171; border-radius: 2px;}\n.ant-checkbox-checked .ant-checkbox-inner {background-color: #014FC5; border-color: #014FC5;}\n.ant-dropdown .ant-table-filter-dropdown  .ant-btn-primary:hover {background:#82a9e2; border: 1px solid #82a9e2;}\n.ant-dropdown .ant-table-filter-dropdown  .ant-btn-link:hover {border: 1px solid #82a9e2; color: #82a9e2;}\n.ant-table-wrapper .ant-table-tbody .ant-table-row.ant-table-row-selected >.ant-table-cell {background: #DEF1FB;}\n.ant-table-wrapper .ant-table-pagination.ant-pagination {\n    padding: 16px; margin: 0;\n    border-top: solid 1px #E0E0E0;\n}\n\n"])));
+const GlobalStyle = exports.GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-dropdown .ant-table-filter-dropdown .ant-dropdown-menu {padding: 0; top: 0;}\n.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item {border-radius: 0; padding: 12px !important;}\n.ant-dropdown .ant-table-filter-dropdown {border-radius: 8px;background: #FFF;box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);}\n.ant-dropdown .ant-table-filter-dropdown .ant-table-filter-dropdown-btns {padding: 12px; border: none;}\n.ant-dropdown .ant-table-filter-dropdown  .ant-btn-link, .ant-dropdown .ant-table-filter-dropdown  .ant-btn-primary {border-radius: 4px; min-width: 100px; padding: 7px 16px;\n  border: 1px solid #014FC5;  height: auto;text-align: center;font-size: 14px;font-style: normal;font-weight: 500;line-height: 20px; }\n.ant-dropdown .ant-table-filter-dropdown  .ant-btn-link {color:  #014FC5; background: #fff;}\n.ant-dropdown .ant-table-filter-dropdown  .ant-btn-primary {background:  #014FC5; color: #fff;}\n.ant-checkbox .ant-checkbox-inner {width: 18px; height: 18px; border: 1px solid #717171; border-radius: 2px;}\n.ant-checkbox-checked .ant-checkbox-inner {background-color: #014FC5; border-color: #014FC5;}\n.ant-dropdown .ant-table-filter-dropdown  .ant-btn-primary:hover {background:#82a9e2; border: 1px solid #82a9e2;}\n.ant-dropdown .ant-table-filter-dropdown  .ant-btn-link:hover {border: 1px solid #82a9e2; color: #82a9e2;}\n.ant-table-wrapper .ant-table-tbody .ant-table-row.ant-table-row-selected >.ant-table-cell {background: #DEF1FB;}\n.ant-table-wrapper .ant-table-pagination.ant-pagination {\n    padding: 16px; margin: 0;\n    border-top: solid 1px #E0E0E0;\n}\n\n/* Custom filter dropdown styles */\n.statusBox {\n  padding: 20px 12px;\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n}\n\n.statusBox .ant-checkbox-group {\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n}\n\n.statusBox aside {\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 8px 0 0;\n}\n\n.statusBox aside button {\n  width: 100% !important;\n}\n\n.statusBox .type-sl1-700 {\n  margin-bottom: 0;\n  color: var(--color-secondary-content);\n  font-weight: 700;\n  font-size: 14px;\n  line-height: 20px;\n}\n"])));
 const StyledTable = exports.StyledTable = (0, _styledComponents.default)(_antd.Table)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  tr > td {\n    vertical-align: top;\n  }\n  .ant-table-row:last-child td {\n    border: none;\n  }\n  .ant-table-row .ant-table-cell,\n  .ant-table-thead .ant-table-cell {\n    padding: 16px !important;\n  }\n  .ant-table-measure-row > td {\n    padding: 0 !important;\n  }\n"])));
-const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .fullWidthBtn button {\n    width: 100%;\n  }\n  .fullWidthBtn {\n    position: fixed;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background: #fff;\n    padding: 16px;\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n  }\n  .secondary:hover {\n    background: transparent;\n    border: 1px solid var(--color-primary);\n    color: var(--color-primary);\n  }\n  .cardStyles {\n    padding: 16px;\n    border-radius: 8px;\n    border: 1px solid var(--color-divider);\n    background: var(--color-primary-background);\n    margin: 0 0 24px;\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n  }\n\n  .showHideBtn {\n    padding: 8px 0 16px;\n  }\n  .keyValue {\n    display: flex;\n    gap: 12px;\n    margin: 0 0 16px;\n  }\n  .keyValue:last-child {\n    margin: 0;\n  }\n  .keyValue strong,\n  .keyValue span {\n    width: 100%;\n  }\n  .keyValue strong {\n    color: var(--color-primary-content);\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n  }\n  .keyValue span {\n    color: var(--color-primary-content);\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n  }\n  .srDetails {\n    padding: 0 0 12px;\n    margin: 0 0 16px;\n    border-bottom: 1px solid var(--color-divider);\n  }\n\n  .srDetails span {\n    display: flex;\n    flex-direction: row;\n    gap: 4px;\n    align-items: center;\n  }\n\n  .srDetails > span > div {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .srDetails > span > .type-sl1-700 {\n    font-size: initial;\n  }\n  .footerCta {\n    display: flex;\n    justify-content: end;\n    gap: 16px;\n    padding: 16px 0 0 0;\n    border-top: 1px solid var(--color-divider);\n    width: 100%;\n    align-items: center;\n  }\n\n  .footerCta .ant-dropdown-trigger {\n    margin-bottom: 0;\n  }\n\n  .flexEnd {\n    display: flex;\n    justify-content: end;\n    margin: 0 0 12px;\n  }\n\n  @media only screen and (max-width: 600px) {\n    .keyValue span {\n      word-break: break-word;\n      overflow-wrap: break-word;\n    }\n    .keyValue strong {\n      word-break: break-word;\n      overflow-wrap: break-word;\n    }\n    .mobileViewPagination {\n      display: flex;\n      justify-content: flex-end;\n      margin: 16px 0px;\n    }\n\n    .mobileViewPagination .ant-pagination {\n      padding: 0;\n    }\n  }\n"])));
+const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .fullWidthBtn button {\n    width: 100%;\n  }\n  .fullWidthBtn {\n    position: fixed;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background: #fff;\n    padding: 16px;\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n  }\n  .secondary:hover {\n    background: transparent;\n    border: 1px solid var(--color-primary);\n    color: var(--color-primary);\n  }\n  .cardStyles {\n    padding: 16px;\n    border-radius: 8px;\n    border: 1px solid var(--color-divider);\n    background: var(--color-primary-background);\n    margin: 0 0 24px;\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n  }\n\n  .showHideBtn {\n    padding: 8px 0 16px;\n  }\n  .keyValue {\n    display: flex;\n    gap: 12px;\n    margin: 0 0 16px;\n  }\n  .keyValue:last-child {\n    margin: 0;\n  }\n  .keyValue strong,\n  .keyValue span {\n    width: 100%;\n  }\n  .keyValue strong {\n    color: var(--color-primary-content);\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n  }\n  .keyValue span {\n    color: var(--color-primary-content);\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n  }\n  .srDetails {\n    padding: 0 0 12px;\n    margin: 0 0 16px;\n    border-bottom: 1px solid var(--color-divider);\n  }\n\n  .srDetails span {\n    display: flex;\n    flex-direction: row;\n    gap: 8px;\n    align-items: flex-start;\n    white-space: nowrap;\n  }\n\n  .srDetails .ctaContainer {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    word-break: break-word;\n    white-space: normal;\n  }\n\n  .srDetails > span > div {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .srDetails > span > .type-sl1-700 {\n    font-size: initial;\n  }\n\n  .srDetails .srValue span {\n    white-space: break-spaces;\n  }\n\n  .footerCta {\n    display: flex;\n    justify-content: end;\n    gap: 16px;\n    padding: 16px 0 0 0;\n    border-top: 1px solid var(--color-divider);\n    width: 100%;\n    align-items: center;\n  }\n\n  .footerCta .ant-dropdown-trigger {\n    margin-bottom: 0;\n  }\n\n  .flexEnd {\n    display: flex;\n    justify-content: end;\n    margin: 0 0 12px;\n  }\n\n  @media only screen and (max-width: 600px) {\n    .keyValue span {\n      word-break: break-word;\n      overflow-wrap: break-word;\n    }\n    .keyValue strong {\n      word-break: break-word;\n      overflow-wrap: break-word;\n    }\n    .mobileViewPagination {\n      display: flex;\n      justify-content: flex-end;\n      margin: 16px 0px;\n    }\n\n    .mobileViewPagination .ant-pagination {\n      padding: 0;\n    }\n  }\n"])));

package/build/layout/EntityOverviewLayout/styles.js

@@ -8,6 +8,6 @@ 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 ProfilePageStyle = exports.ProfilePageStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .fullPageLayout {\n    display: flex;\n    min-height: 100vh;\n    background: #fafafa;\n  }\n\n  .oaRightLayouts {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n  }\n\n  .oaTopHeaderAndBtnSec {\n    background: #ffffff;\n    border-bottom: 1px solid #e8e8e8;\n    padding: 20px 24px;\n\n    .headerContent {\n      margin-left: 160px;\n      display: flex;\n      align-items: center;\n      gap: 16px;\n\n      .pageTitle {\n        margin: 0;\n      }\n\n      .backButton {\n        border-radius: 50%;\n        width: 48px; /* Default desktop size */\n        height: 48px; /* Default desktop size */\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: var(--color-secondary-background);\n        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n        cursor: pointer;\n        transition: all 0.2s ease;\n      }\n    }\n  }\n\n  .profileContent {\n    flex: 1;\n    padding: 0;\n    overflow-y: auto;\n    background: #ffffff;\n  }\n\n  .accordionsContainer {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 16px;\n    padding: 0 24px;\n\n    .accordion-item {\n      width: 100%;\n      max-width: 600px;\n      background: var(--color-secondary-background);\n      overflow: hidden;\n\n      .accordion-content {\n        padding: 20px;\n\n        .key-value-section {\n          margin-bottom: 20px;\n        }\n\n        .action-buttons-section {\n          display: flex;\n          gap: 12px;\n          justify-content: flex-end;\n          margin-top: 16px;\n          padding-top: 16px;\n          border-top: 1px solid var(--color-border);\n        }\n\n        .custom-content {\n          margin-top: 16px;\n        }\n      }\n    }\n  }\n\n  @media (max-width: 768px) {\n    .oaTopHeaderAndBtnSec {\n      padding: 12px 16px;\n\n      .headerContent {\n        margin-left: 0; /* Remove left margin for mobile */\n        gap: 12px;\n        justify-content: flex-start; /* Align content to left */\n      }\n    }\n\n    .oaTopHeaderAndBtnSec .headerContent .backButton {\n      width: 40px !important; /* Mobile size with higher specificity */\n      height: 40px !important; /* Mobile size with higher specificity */\n    }\n\n    .oaTopHeaderAndBtnSec .headerContent .backButton .MuiSvgIcon-root {\n      font-size: 20px !important; /* Mobile icon size for Material-UI icons */\n    }\n\n    .profileContent {\n      padding: 16px;\n    }\n\n    .accordionsContainer {\n      padding: 0 16px;\n\n      .accordion-item {\n        max-width: 100%;\n\n        .accordion-content {\n          padding: 16px;\n\n          .action-buttons-section {\n            flex-direction: column;\n            align-items: stretch;\n          }\n        }\n      }\n    }\n  }\n"])));
+const ProfilePageStyle = exports.ProfilePageStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .fullPageLayout {\n    display: flex;\n    min-height: 100vh;\n    background: #fafafa;\n  }\n\n  .oaRightLayouts {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n  }\n\n  .oaTopHeaderAndBtnSec {\n    background: #ffffff;\n    border-bottom: 1px solid #e8e8e8;\n    padding: 20px 24px;\n\n    .headerContent {\n      margin-left: 160px;\n      display: flex;\n      align-items: center;\n      gap: 16px;\n\n      .pageTitle {\n        margin: 0;\n      }\n\n      .backButton {\n        border-radius: 50%;\n        width: 48px; /* Default desktop size */\n        height: 48px; /* Default desktop size */\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: var(--color-secondary-background);\n        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n        cursor: pointer;\n        transition: all 0.2s ease;\n      }\n    }\n  }\n\n  .profileContent {\n    flex: 1;\n    padding: 0;\n    overflow-y: auto;\n    background: #ffffff;\n  }\n\n  .accordionsContainer {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 16px;\n    padding: 0 24px;\n\n    .accordion-item {\n      width: 100%;\n      max-width: 600px;\n      background: var(--color-secondary-background);\n      overflow: hidden;\n\n      .accordion-content {\n        padding: 20px;\n\n        .key-value-section {\n          margin-bottom: 20px;\n        }\n\n        .action-buttons-section {\n          display: flex;\n          gap: 12px;\n          justify-content: flex-end;\n          margin-top: 16px;\n          padding-top: 16px;\n          border-top: 1px solid var(--color-border);\n        }\n\n        .custom-content {\n          margin-top: 16px;\n        }\n      }\n    }\n\n    /* Add bottom padding to last accordion item */\n    .accordion-item:last-child {\n      margin-bottom: 24px;\n    }\n  }\n\n  @media (max-width: 768px) {\n    .oaTopHeaderAndBtnSec {\n      padding: 12px 16px;\n\n      .headerContent {\n        margin-left: 0; /* Remove left margin for mobile */\n        gap: 12px;\n        justify-content: flex-start; /* Align content to left */\n      }\n    }\n\n    .oaTopHeaderAndBtnSec .headerContent .backButton {\n      width: 40px !important; /* Mobile size with higher specificity */\n      height: 40px !important; /* Mobile size with higher specificity */\n    }\n\n    .oaTopHeaderAndBtnSec .headerContent .backButton .MuiSvgIcon-root {\n      font-size: 20px !important; /* Mobile icon size for Material-UI icons */\n    }\n\n    .profileContent {\n      padding: 16px;\n    }\n\n    .accordionsContainer {\n      padding: 0 16px;\n\n      .accordion-item {\n        max-width: 100%;\n\n        .accordion-content {\n          padding: 16px;\n\n          .action-buttons-section {\n            flex-direction: column;\n            align-items: stretch;\n          }\n        }\n      }\n    }\n  }\n"])));
 const DrawerWithOutFooter = exports.DrawerWithOutFooter = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .ant-drawer-footer {\n    display: none !important;\n  }\n"])));
 const DrawerContent = exports.DrawerContent = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 24px;\n\n  .drawerTitle {\n    margin-bottom: 24px;\n  }\n\n  .drawerDescription {\n    margin-top: 24px;\n  }\n"])));

package/build/widgets/oa-widget-approval/ApprovalWidget.js

@@ -17,6 +17,7 @@ var _CustomRadio = _interopRequireDefault(require("../../components/oa-component
 var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
 var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
 const _excluded = ["children", "description", "docDetails", "approvalForm", "isMandatory", "hasDivider", "isQuestionStyleWidget", "questionId", "title", "viewOnClick", "data-test", "maxLength"];
+/* 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; }

package/build/widgets/oa-widget-key-value/KeyValueWidget.js

@@ -20,6 +20,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @param {Object} props.data - An object containing key-value pairs to be displayed.
  * @param {Array<number>} [props.columnLayout] - An array defining the number of items per column.
  * @param {Object} [props.info] - An object containing information about a key-value pair.
+ * @param {boolean} [props.fullWidth] - If true, uses 30%/70% width distribution, otherwise uses previous layout.
  *
  * @returns {JSX.Element} A component that renders key-value pairs in a grid layout.
  */
@@ -29,7 +30,8 @@ function KeyValueDataView(_ref) {
     columnLayout,
     info,
     tagStatus,
-    customClassName
+    customClassName,
+    fullWidth = false
   } = _ref;
   let actualColumnLayout = [];
   if (columnLayout.length === 0) {
@@ -50,7 +52,7 @@ function KeyValueDataView(_ref) {
     }, Object.entries(data).splice(entryIdx, element).map(_ref2 => {
       let [key, value] = _ref2;
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "valuestyle",
+        className: "valuestyle ".concat(fullWidth ? "full-width" : null),
         key: (0, _utils.getUUID)()
       }, (info === null || info === void 0 ? void 0 : info.infoKey) === key ? /*#__PURE__*/_react.default.createElement("b", {
         className: "type-b2-400"
@@ -101,7 +103,9 @@ KeyValueDataView.propTypes = {
       label: _propTypes.default.string,
       size: _propTypes.default.string
     })
-  })
+  }),
+  customClassName: _propTypes.default.string,
+  fullWidth: _propTypes.default.bool
 };
 KeyValueDataView.defaultProps = {
   columnLayout: [],

package/build/widgets/oa-widget-key-value/styles.js

@@ -8,7 +8,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4; // KeyValueWidgetStyles.js
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const KeyValueGroup = exports.KeyValueGroup = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .col-md-4:last-child,.col-md-12:last-child,.col-md-3:last-child,.col-md-6:last-child  {\n    padding: 0;\n  }\n  \n  .valuestyle {\n    display: flex;\n    gap: 16px;\n    padding: 0 0 8px;\n  }\n\n  .valuestyle b {\n    width: 38.734%;\n    font-style: normal;\n    color: var(--color-primary-content); \n  }\n\n  .valuestyle span {\n    width: 180px;\n    word-wrap: break-word;\n    font-style: normal;\n    color: var(--color-secondary-content);  }\n\n  .valuestyle span + span{\n    color: var(--color-primary-content);\n    font-size: 14px;\n    padding: 0 4px 0 0;\n  }\n"])));
+const KeyValueGroup = exports.KeyValueGroup = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .col-md-4:last-child,.col-md-12:last-child,.col-md-3:last-child,.col-md-6:last-child  {\n    padding: 0;\n  }\n  \n  .valuestyle {\n    display: flex;\n    gap: 16px;\n    padding: 0 0 8px;\n  }\n\n  .valuestyle b {\n    width: 38.734%;\n    font-style: normal;\n    color: var(--color-primary-content); \n  }\n\n  .valuestyle span {\n    width: 180px;\n    word-wrap: break-word;\n    font-style: normal;\n    color: var(--color-secondary-content);  }\n\n  .valuestyle span + span{\n    color: var(--color-primary-content);\n    font-size: 14px;\n    padding: 0 4px 0 0;\n  }\n\n  /* Add these CSS rules for full-width */\n    .valuestyle.full-width {\n    display: flex;\n    gap: 16px;\n    padding: 0 0 8px;\n  }\n\n  .valuestyle.full-width b {\n    width: 30%;\n  }\n\n  .valuestyle.full-width span {\n    width: 100%;\n  }\n\n"])));
 const KeyValueGroups = exports.KeyValueGroups = _styledComponents.default.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.container {\n  max-width: 1154px;\n  margin: 0 auto;\n  padding: 0 16px;\n}\n.container-fluid{\n    width: 100%;\n    padding: 0 16px;\n}\n.row {\n    display: flex;\n    flex-direction: column;\n}\n.row::after {\n    content: \"\";\n    clear: both;\n    display: table;\n}\n.col-xs-1 {\n  width: 8.33333%;\n}\n\n.col-xs-2 {\n  width: 16.66667%;\n}\n\n.col-xs-3 {\n  width: 25%;\n}\n\n.col-xs-4 {\n  width: 33.33333%;\n}\n\n.col-xs-5 {\n  width: 41.66667%;\n}\n\n.col-xs-6 {\n  width: 50%;\n}\n\n.col-xs-7 {\n  width: 58.33333%;\n}\n\n.col-xs-8 {\n  width: 66.66667%;\n}\n\n.col-xs-9 {\n  width: 75%;\n}\n\n.col-xs-10 {\n  width: 83.33333%;\n}\n\n.col-xs-11 {\n  width: 91.66667%;\n}\n\n.col-xs-12 {\n  width: 100%;\n}\n@media (min-width: 768px) {\n    .row {\n    flex-direction: row;\n}\n  .col-sm-1 {\n    width: 8.33333%;\n  }\n\n  .col-sm-2 {\n    width: 16.66667%;\n  }\n\n  .col-sm-3 {\n    width: 25%;\n  }\n\n  .col-sm-4 {\n    width: 33.33333%;\n  }\n\n  .col-sm-5 {\n    width: 41.66667%;\n  }\n\n  .col-sm-6 {\n    width: 50%;\n  }\n  .col-sm-7 {\n    width: 58.33333%;\n  }\n  .col-sm-8 {\n    width: 66.66667%;\n  }\n  .col-sm-9 {\n    width: 75%;\n  }\n  .col-sm-10 {\n    width: 83.33333%;\n  }\n  .col-sm-11 {\n    width: 91.66667%;\n  }\n  .col-sm-12 {\n    width: 100%;\n  }\n}\n\n@media (min-width: 768px) {\n  .col-md-1 {\n    width: 8.33333%;\n  }\n  .col-md-2 {\n    width: 16.66667%;\n  }\n  .col-md-3 {\n    width: 25%;\n  }\n  .col-md-4 {\n    width: 33.33333%;\n    float: left;\n  }\n\n  .col-md-5 {\n    width: 41.66667%;\n  }\n\n  .col-md-6 {\n    width: 50%;\n  }\n\n  .col-md-7 {\n    width: 58.33333%;\n  }\n\n  .col-md-8 {\n    width: 66.66667%;\n  }\n\n  .col-md-9 {\n    width: 75%;\n  }\n\n  .col-md-10 {\n    width: 83.33333%;\n  }\n  .col-md-11 {\n    width: 91.66667%;\n  }\n\n  .col-md-12 {\n    width: 100%;\n  }\n\n}\n/* Large Devices (desktops) */\n@media (min-width: 992px) {\n    .gutter{\n        padding: 0 24px 0 0;\n    }\n  .col-lg-1 {\n    width: 8.33333%;\n  }\n  .col-lg-2 {\n    width: 16.66667%;\n  }\n  .col-lg-3 {\n    width: 25%;\n    float: left;\n  }\n  .col-lg-4 {\n    width: 33.33333%;\n    float: left;\n  }\n  .col-lg-5 {\n    width: 41.66667%;\n  }\n  .col-lg-6 {\n    width: 50%;\n  }\n  .col-lg-7 {\n    width: 58.33333%;\n  }\n  .col-lg-8 {\n    width: 66.66667%;\n  }\n  .col-lg-9 {\n    width: 75%;\n  }\n  .col-lg-10 {\n    width: 83.33333%;\n  }\n\n  .col-lg-11 {\n    width: 91.66667%;\n  }\n\n  .col-lg-12 {\n    width: 100%;\n  }\n}\n\n@media (min-width: 1200px) {\n    .gutter{\n        padding: 0 32px 0 0;\n    }\n  .col-xl-1 {\n    width: 8.33333%;\n  }\n\n \n}\n@media (max-width: 767px) {\n  .gutter{\n      padding: 0;\n  }\n}\n"])));
 const StyledBold = exports.StyledBold = _styledComponents.default.b(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: var(--color-primary-content);\n  font-weight: 400;\n"])));
 const StyledSpan = exports.StyledSpan = _styledComponents.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  /* vertical-align: bottom; */\n  color: var(--color-secondary-content);\n  font-weight: 400;\n  word-break: break-word;\n"])));

package/build/widgets/oa-widget-notes/NotesWidget.js

@@ -14,6 +14,7 @@ var _CustomTable = _interopRequireDefault(require("../../components/oa-component
 var _CustomInput = _interopRequireDefault(require("../../components/oa-component-input/CustomInput"));
 var _styles = require("./styles");
 const _excluded = ["data-test", "disabled", "records", "tableBorder", "onBlur", "extraColumnData"];
+/* 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; }
@@ -22,7 +23,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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 NotesWidget(_ref) {
   let {
-      'data-test': dataTest,
+      "data-test": dataTest,
       disabled,
       records,
       tableBorder,
@@ -30,32 +31,32 @@ function NotesWidget(_ref) {
       extraColumnData
     } = _ref,
     antDesignTableProps = _objectWithoutProperties(_ref, _excluded);
-  const [noteInputValue, setNoteInputValue] = (0, _react.useState)('');
+  const [noteInputValue, setNoteInputValue] = (0, _react.useState)("");
 
   /**
-  * Call to callback from props.
-  * Clearing the notes input, on blur.
-  */
+   * Call to callback from props.
+   * Clearing the notes input, on blur.
+   */
   const handleBlur = event => {
     // Call to callback from props.
     onBlur(event);
 
     // Clearing the notes input, on blur.
-    setNoteInputValue('');
+    setNoteInputValue("");
   };
 
   // Used a local variable to avoid mutating the passed prop.
   const mutatedRecords = [...records];
   if (!disabled) {
     mutatedRecords === null || mutatedRecords === void 0 || mutatedRecords.unshift({
-      key: '0'
+      key: "0"
     });
   }
   const extraColumns = Array.isArray(extraColumnData) && extraColumnData.map(column => ({
     title: column.title,
     dataIndex: column.dataIndex,
     key: column.key,
-    width: '20%'
+    width: "20%"
   }));
   const columns = [
   // {
@@ -65,9 +66,9 @@ function NotesWidget(_ref) {
   //   width: '20%',
   // },
   {
-    title: 'NOTES',
-    width: '40%',
-    dataIndex: 'notes',
+    title: "NOTES",
+    width: "40%",
+    dataIndex: "notes",
     render: (text, obj, index) => {
       if (!disabled && index === 0) {
         return /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
@@ -82,30 +83,30 @@ function NotesWidget(_ref) {
       }
       return /*#__PURE__*/_react.default.createElement("div", {
         style: {
-          overflow: 'auto'
+          overflow: "auto"
         }
       }, text);
     },
-    key: 'notes'
+    key: "notes"
   }, {
-    title: 'DATE AND TIME',
-    dataIndex: 'dateTime',
-    key: 'dateTime'
+    title: "DATE AND TIME",
+    dataIndex: "dateTime",
+    key: "dateTime"
   }, {
-    title: 'USER',
-    dataIndex: 'user',
-    key: 'user',
-    width: '20%'
+    title: "USER",
+    dataIndex: "user",
+    key: "user",
+    width: "20%"
   }, ...(extraColumns || [])];
   const tableStyle = {
-    borderTop: '1px solid var(--color-divider)',
-    borderRight: tableBorder ? '1px solid var(--color-divider)' : '0',
-    borderBottom: tableBorder ? '1px solid var(--color-divider)' : '0',
-    borderLeft: tableBorder ? '1px solid var(--color-divider)' : '0',
-    borderRadius: tableBorder ? '4px' : '0'
+    borderTop: "1px solid var(--color-divider)",
+    borderRight: tableBorder ? "1px solid var(--color-divider)" : "0",
+    borderBottom: tableBorder ? "1px solid var(--color-divider)" : "0",
+    borderLeft: tableBorder ? "1px solid var(--color-divider)" : "0",
+    borderRadius: tableBorder ? "4px" : "0"
     // visibility: (!(records.length > 0) && disabled) ? 'hidden' : undefined,
   };
-  return /*#__PURE__*/_react.default.createElement(_CustomTable.default, _extends({
+  return /*#__PURE__*/_react.default.createElement(NotesTable, null, /*#__PURE__*/_react.default.createElement(_CustomTable.default, _extends({
     style: tableStyle,
     columns: columns,
     dataSource: mutatedRecords,
@@ -113,10 +114,10 @@ function NotesWidget(_ref) {
     size: "small",
     emptyText: "No Notes Available",
     tableBorder: tableBorder
-  }, antDesignTableProps));
+  }, antDesignTableProps)));
 }
 NotesWidget.propTypes = {
-  'data-test': _propTypes.default.string,
+  "data-test": _propTypes.default.string,
   disabled: _propTypes.default.bool,
   records: _propTypes.default.arrayOf(_propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))),
   onBlur: _propTypes.default.func,
@@ -124,7 +125,7 @@ NotesWidget.propTypes = {
   extraColumnData: _propTypes.default.array
 };
 NotesWidget.defaultProps = {
-  'data-test': null,
+  "data-test": null,
   disabled: false,
   onBlur: () => {},
   records: [],

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

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.NoNotesMessage = void 0;
+exports.default = exports.NotesTable = exports.NoNotesMessage = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
+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 NoNotesMessage = exports.NoNotesMessage = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translateX(-50%) translateY(-50%);\n  input{\n    height: 30px;\n  }\n"])));
+const NoNotesMessage = exports.NoNotesMessage = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translateX(-50%) translateY(-50%);\n  input {\n    height: 30px;\n  }\n"])));
+const NotesTable = exports.NotesTable = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  table {\n    width: auto !important;\n  }\n"])));

package/build/widgets/oa-widget-user-management/UserManagementWidget.js

@@ -304,6 +304,7 @@ function UserManagementWidget(_ref) {
         icon: _DeleteOutlineOutlined.default,
         color: "negative"
       }),
+      color: "negative",
       size: 32,
       position: "right"
     }

package/package.json

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