npm - @portnet/ui - Versions diffs - 4.0.2 → 4.0.3 - Mend

@portnet/ui 4.0.2 → 4.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/components/buttons/PuiButton.js +12 -16
package/dist/components/common/StyledMuiTextField.js +22 -37
package/dist/components/inputs/PuiDateField.js +27 -41
package/dist/components/inputs/PuiDateTimeField.js +27 -41
package/dist/components/inputs/PuiSelect.js +23 -37
package/dist/components/others/PuiSection.js +67 -35
package/dist/components/table/PuiTable.js +132 -10
package/dist/components/typography/PuiMainTitle.js +46 -78
package/package.json +2 -2

package/dist/components/buttons/PuiButton.js CHANGED Viewed

@@ -71,29 +71,25 @@ const getButtonStyles = theme => {
   if (theme && theme.components && theme.components.PuiButton) {
     return theme.components.PuiButton;
   }
-  return {
-    height: "25px",
-    borderRadius: "4px",
-    borderWidth: "2px",
-    fontFamily: "inherit",
-    fontWeight: "500",
-    tertiaryBorderColor: _apperance.palette.gray.dark,
-    boxShadow: "0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)"
-  };
+  return {};
 };
 const BaseMuiButton = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_StyledMuiButton.default, _objectSpread({
   ref: ref
 }, props))))(props => {
   const buttonStyles = getButtonStyles(props.theme);
   return {
-    "&.MuiButton-root": {
-      height: buttonStyles.height || "37px",
-      borderRadius: buttonStyles.borderRadius || "10px",
-      fontFamily: buttonStyles.fontFamily || "inherit",
-      fontWeight: buttonStyles.fontWeight || "500",
-      boxShadow: buttonStyles.boxShadow !== undefined && buttonStyles.boxShadow !== "none" ? buttonStyles.boxShadow : buttonStyles.boxShadow === "none" ? "none" : "0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)",
+    "&.MuiButton-root": _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, buttonStyles.height && {
+      height: buttonStyles.height
+    }), buttonStyles.borderRadius && {
+      borderRadius: buttonStyles.borderRadius
+    }), buttonStyles.fontFamily && {
+      fontFamily: buttonStyles.fontFamily
+    }), buttonStyles.fontWeight && {
+      fontWeight: buttonStyles.fontWeight
+    }), {}, {
+      boxShadow: buttonStyles.boxShadow !== undefined ? buttonStyles.boxShadow : "0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)",
       textTransform: "none"
-    }
+    })
   };
 });
 const PrimaryButton = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseMuiButton, _objectSpread({

package/dist/components/common/StyledMuiTextField.js CHANGED Viewed

@@ -73,26 +73,7 @@ const getTextFieldStyles = theme => {
   if (theme && theme.components && theme.components.PuiTextField) {
     return theme.components.PuiTextField;
   }
-  return {
-    inputRoot: {
-      backgroundColor: _apperance.palette.white,
-      border: "2px solid ".concat(_apperance.palette.gray.dark),
-      borderRadius: "5px",
-      height: "auto",
-      lineHeight: "1"
-    },
-    label: {
-      color: _apperance.palette.gray.darker,
-      marginBottom: "4px",
-      fontSize: "0.8rem"
-    },
-    disabled: {
-      backgroundColor: "#f5f5f5",
-      // Light grey background for disabled
-      border: "1px solid #cecdd3",
-      labelColor: "#97969b"
-    }
-  };
+  return {};
 };
 const StyledMuiTextField = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
@@ -123,7 +104,7 @@ const StyledMuiTextField = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((_r
     ref: ref
   }, rest));
 }))(props => {
-  var _themePalette$backgro, _textFieldStyles$disa, _themePalette$backgro2, _textFieldStyles$disa2, _textFieldStyles$disa3;
+  var _themePalette$backgro, _textFieldStyles$labe, _textFieldStyles$labe2, _textFieldStyles$labe3, _textFieldStyles$disa, _textFieldStyles$inpu, _textFieldStyles$inpu2, _textFieldStyles$inpu3, _textFieldStyles$inpu4, _themePalette$backgro2, _textFieldStyles$disa2, _textFieldStyles$disa3, _textFieldStyles$inpu5, _textFieldStyles$inpu6;
   const themePalette = getPalette(props.theme);
   const textFieldStyles = getTextFieldStyles(props.theme);
   return {
@@ -136,25 +117,27 @@ const StyledMuiTextField = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((_r
         lineSpacing: "-0.03em",
         position: "initial",
         transform: "none",
-        fontSize: "".concat(textFieldStyles.label.fontSize, " !important"),
+        fontSize: ((_textFieldStyles$labe = textFieldStyles.label) === null || _textFieldStyles$labe === void 0 ? void 0 : _textFieldStyles$labe.fontSize) || "0.8rem",
         fontWeight: "600",
-        marginBottom: "".concat(textFieldStyles.label.marginBottom, " !important"),
-        color: "".concat(textFieldStyles.label.color, " !important"),
+        marginBottom: ((_textFieldStyles$labe2 = textFieldStyles.label) === null || _textFieldStyles$labe2 === void 0 ? void 0 : _textFieldStyles$labe2.marginBottom) || "4px",
+        color: ((_textFieldStyles$labe3 = textFieldStyles.label) === null || _textFieldStyles$labe3 === void 0 ? void 0 : _textFieldStyles$labe3.color) || _apperance.palette.gray.darker,
         "&.Mui-focused ": {
           color: "".concat(themePalette.primary, " !important")
         },
         "&.Mui-disabled": {
-          color: "".concat(((_textFieldStyles$disa = textFieldStyles.disabled) === null || _textFieldStyles$disa === void 0 ? void 0 : _textFieldStyles$disa.labelColor) || "#97969b", " !important")
+          color: "".concat(((_textFieldStyles$disa = textFieldStyles.disabled) === null || _textFieldStyles$disa === void 0 ? void 0 : _textFieldStyles$disa.labelColor) || _apperance.palette.gray.darker, " !important")
         },
         "&.Mui-error": {
           color: "".concat(themePalette.error, " !important")
         }
       },
-      "& .MuiInputBase-root": {
-        backgroundColor: "".concat(textFieldStyles.inputRoot.backgroundColor, " !important"),
-        border: "".concat(textFieldStyles.inputRoot.border, " !important"),
-        borderRadius: "".concat(textFieldStyles.inputRoot.borderRadius, " !important"),
-        height: "".concat(textFieldStyles.inputRoot.height, " !important"),
+      "& .MuiInputBase-root": _objectSpread(_objectSpread({
+        backgroundColor: "".concat(((_textFieldStyles$inpu = textFieldStyles.inputRoot) === null || _textFieldStyles$inpu === void 0 ? void 0 : _textFieldStyles$inpu.backgroundColor) || _apperance.palette.white, " !important"),
+        border: ((_textFieldStyles$inpu2 = textFieldStyles.inputRoot) === null || _textFieldStyles$inpu2 === void 0 ? void 0 : _textFieldStyles$inpu2.border) || "2px solid ".concat(_apperance.palette.gray.dark),
+        borderRadius: ((_textFieldStyles$inpu3 = textFieldStyles.inputRoot) === null || _textFieldStyles$inpu3 === void 0 ? void 0 : _textFieldStyles$inpu3.borderRadius) || "5px"
+      }, ((_textFieldStyles$inpu4 = textFieldStyles.inputRoot) === null || _textFieldStyles$inpu4 === void 0 ? void 0 : _textFieldStyles$inpu4.height) && {
+        height: textFieldStyles.inputRoot.height
+      }), {}, {
         "&.MuiInputBase-multiline": {
           padding: "8px 0",
           height: "auto !important"
@@ -166,21 +149,23 @@ const StyledMuiTextField = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((_r
           border: "2px solid ".concat(themePalette.error, " !important"),
           backgroundColor: "".concat(((_themePalette$backgro2 = themePalette.background) === null || _themePalette$backgro2 === void 0 ? void 0 : _themePalette$backgro2.error) || _apperance.palette.background.error, " !important")
         },
-        "&.Mui-disabled ": {
-          backgroundColor: "".concat(((_textFieldStyles$disa2 = textFieldStyles.disabled) === null || _textFieldStyles$disa2 === void 0 ? void 0 : _textFieldStyles$disa2.backgroundColor) || "#f5f5f5", " !important"),
-          border: "".concat(((_textFieldStyles$disa3 = textFieldStyles.disabled) === null || _textFieldStyles$disa3 === void 0 ? void 0 : _textFieldStyles$disa3.border) || "1px solid #cecdd3", " !important"),
-          borderRadius: "".concat(textFieldStyles.inputRoot.borderRadius, " !important"),
+        "&.Mui-disabled ": _objectSpread(_objectSpread({
+          backgroundColor: ((_textFieldStyles$disa2 = textFieldStyles.disabled) === null || _textFieldStyles$disa2 === void 0 ? void 0 : _textFieldStyles$disa2.backgroundColor) || _apperance.palette.secondary
+        }, ((_textFieldStyles$disa3 = textFieldStyles.disabled) === null || _textFieldStyles$disa3 === void 0 ? void 0 : _textFieldStyles$disa3.border) && {
+          border: textFieldStyles.disabled.border
+        }), {}, {
+          borderRadius: ((_textFieldStyles$inpu5 = textFieldStyles.inputRoot) === null || _textFieldStyles$inpu5 === void 0 ? void 0 : _textFieldStyles$inpu5.borderRadius) || "5px",
           "& input": {
             color: "".concat(themePalette.gray.darker),
             WebkitTextFillColor: "".concat(themePalette.gray.darker)
           }
-        },
+        }),
         "& .MuiInputBase-input": {
-          lineHeight: "".concat(textFieldStyles.inputRoot.lineHeight, " !important"),
+          lineHeight: ((_textFieldStyles$inpu6 = textFieldStyles.inputRoot) === null || _textFieldStyles$inpu6 === void 0 ? void 0 : _textFieldStyles$inpu6.lineHeight) || "1",
           padding: "1px 6px",
           fontSize: "0.7rem"
         }
-      },
+      }),
       "& .MuiFormHelperText-root": {
         fontWeight: "bold",
         fontSize: ".7rem",

package/dist/components/inputs/PuiDateField.js CHANGED Viewed

@@ -20,16 +20,16 @@ var _apperance = require("../../config/apperance");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["id", "className", "sx", "label", "name", "required", "value", "minDate", "maxDate", "inputFormat", "format", "disablePast", "disableFuture", "error", "readOnly", "fullWidth", "disabled", "helperText", "onChange", "onBlur"],
   _excluded2 = ["id", "className", "sx", "label", "name", "required", "value", "minDate", "maxDate", "inputFormat", "format", "disablePast", "disableFuture", "error", "readOnly", "fullWidth", "disabled", "helperText", "onChange", "onBlur"],
-  _excluded3 = ["formik", "id", "className", "sx", "label", "name", "required", "value", "minDate", "maxDate", "inputFormat", "format", "disablePast", "disableFuture", "error", "readOnly", "fullWidth", "disabled", "helperText", "onChange", "onBlur"]; // Helper function to get palette from theme or fallback to appearance
+  _excluded3 = ["formik", "id", "className", "sx", "label", "name", "required", "value", "minDate", "maxDate", "inputFormat", "format", "disablePast", "disableFuture", "error", "readOnly", "fullWidth", "disabled", "helperText", "onChange", "onBlur"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } // Helper function to get palette from theme or fallback to appearance
 const getPalette = theme => {
   // Check if theme has our custom palette properties
   if (theme && theme.palette && theme.palette.gray && theme.palette.gray.darker) {
@@ -76,59 +76,43 @@ const getDateFieldStyles = theme => {
   if (theme && theme.components && theme.components.PuiDateField) {
     return theme.components.PuiDateField;
   }
-  return {
-    inputRoot: {
-      backgroundColor: _apperance.palette.white,
-      border: "2px solid ".concat(_apperance.palette.gray.dark),
-      borderRadius: "5px",
-      height: "auto",
-      lineHeight: "1"
-    },
-    label: {
-      color: _apperance.palette.gray.darker,
-      marginBottom: "4px",
-      fontSize: "0.8rem"
-    },
-    disabled: {
-      backgroundColor: "#f5f5f5",
-      border: "1px solid #cecdd3",
-      labelColor: "#97969b"
-    }
-  };
+  return {};
 };
 const getTextFieldStyles = (theme, required) => {
-  var _themePalette$backgro, _palette$background, _dateFieldStyles$disa, _themePalette$backgro2, _palette$background2, _dateFieldStyles$disa2, _dateFieldStyles$disa3;
+  var _themePalette$backgro, _palette$background, _dateFieldStyles$inpu, _dateFieldStyles$labe, _dateFieldStyles$labe2, _dateFieldStyles$labe3, _dateFieldStyles$disa, _dateFieldStyles$inpu2, _dateFieldStyles$inpu3, _dateFieldStyles$inpu4, _dateFieldStyles$inpu5, _themePalette$backgro2, _palette$background2, _dateFieldStyles$disa2, _dateFieldStyles$disa3, _dateFieldStyles$inpu6, _dateFieldStyles$inpu7;
   const themePalette = getPalette(theme);
   const dateFieldStyles = getDateFieldStyles(theme);
   return {
     "&.MuiFormControl-root": {
       "&.required .MuiInputBase-root": {
-        backgroundColor: required ? ((_themePalette$backgro = themePalette.background) === null || _themePalette$backgro === void 0 ? void 0 : _themePalette$backgro.required) || ((_palette$background = _apperance.palette.background) === null || _palette$background === void 0 ? void 0 : _palette$background.required) : dateFieldStyles.inputRoot.backgroundColor
+        backgroundColor: required ? ((_themePalette$backgro = themePalette.background) === null || _themePalette$backgro === void 0 ? void 0 : _themePalette$backgro.required) || ((_palette$background = _apperance.palette.background) === null || _palette$background === void 0 ? void 0 : _palette$background.required) : ((_dateFieldStyles$inpu = dateFieldStyles.inputRoot) === null || _dateFieldStyles$inpu === void 0 ? void 0 : _dateFieldStyles$inpu.backgroundColor) || _apperance.palette.white
       },
       "& .MuiFormLabel-root": {
         zIndex: 0,
         lineSpacing: "-0.03em",
         position: "initial",
         transform: "none",
-        fontSize: "".concat(dateFieldStyles.label.fontSize, " !important"),
+        fontSize: ((_dateFieldStyles$labe = dateFieldStyles.label) === null || _dateFieldStyles$labe === void 0 ? void 0 : _dateFieldStyles$labe.fontSize) || "0.8rem",
         fontWeight: "600",
-        marginBottom: "".concat(dateFieldStyles.label.marginBottom, " !important"),
-        color: "".concat(dateFieldStyles.label.color, " !important"),
+        marginBottom: ((_dateFieldStyles$labe2 = dateFieldStyles.label) === null || _dateFieldStyles$labe2 === void 0 ? void 0 : _dateFieldStyles$labe2.marginBottom) || "4px",
+        color: ((_dateFieldStyles$labe3 = dateFieldStyles.label) === null || _dateFieldStyles$labe3 === void 0 ? void 0 : _dateFieldStyles$labe3.color) || _apperance.palette.gray.darker,
         "&.Mui-focused ": {
           color: "".concat(themePalette.primary, " !important")
         },
         "&.Mui-disabled": {
-          color: "".concat(((_dateFieldStyles$disa = dateFieldStyles.disabled) === null || _dateFieldStyles$disa === void 0 ? void 0 : _dateFieldStyles$disa.labelColor) || "#97969b", " !important")
+          color: "".concat(((_dateFieldStyles$disa = dateFieldStyles.disabled) === null || _dateFieldStyles$disa === void 0 ? void 0 : _dateFieldStyles$disa.labelColor) || _apperance.palette.gray.darker, " !important")
         },
         "&.Mui-error": {
           color: "".concat(themePalette.error, " !important")
         }
       },
-      "& .MuiInputBase-root": {
-        backgroundColor: "".concat(dateFieldStyles.inputRoot.backgroundColor, " !important"),
-        border: "".concat(dateFieldStyles.inputRoot.border, " !important"),
-        borderRadius: "".concat(dateFieldStyles.inputRoot.borderRadius, " !important"),
-        height: "".concat(dateFieldStyles.inputRoot.height, " !important"),
+      "& .MuiInputBase-root": _objectSpread(_objectSpread({
+        backgroundColor: "".concat(((_dateFieldStyles$inpu2 = dateFieldStyles.inputRoot) === null || _dateFieldStyles$inpu2 === void 0 ? void 0 : _dateFieldStyles$inpu2.backgroundColor) || (required ? _apperance.palette.background.required : _apperance.palette.white), " !important"),
+        border: ((_dateFieldStyles$inpu3 = dateFieldStyles.inputRoot) === null || _dateFieldStyles$inpu3 === void 0 ? void 0 : _dateFieldStyles$inpu3.border) || "2px solid ".concat(_apperance.palette.gray.dark),
+        borderRadius: ((_dateFieldStyles$inpu4 = dateFieldStyles.inputRoot) === null || _dateFieldStyles$inpu4 === void 0 ? void 0 : _dateFieldStyles$inpu4.borderRadius) || "5px"
+      }, ((_dateFieldStyles$inpu5 = dateFieldStyles.inputRoot) === null || _dateFieldStyles$inpu5 === void 0 ? void 0 : _dateFieldStyles$inpu5.height) && {
+        height: dateFieldStyles.inputRoot.height
+      }), {}, {
         "&.MuiInputBase-multiline": {
           padding: "8px 0",
           height: "auto !important"
@@ -140,21 +124,23 @@ const getTextFieldStyles = (theme, required) => {
           border: "2px solid ".concat(themePalette.error, " !important"),
           backgroundColor: "".concat(((_themePalette$backgro2 = themePalette.background) === null || _themePalette$backgro2 === void 0 ? void 0 : _themePalette$backgro2.error) || ((_palette$background2 = _apperance.palette.background) === null || _palette$background2 === void 0 ? void 0 : _palette$background2.error), " !important")
         },
-        "&.Mui-disabled ": {
-          backgroundColor: "".concat(((_dateFieldStyles$disa2 = dateFieldStyles.disabled) === null || _dateFieldStyles$disa2 === void 0 ? void 0 : _dateFieldStyles$disa2.backgroundColor) || "#f5f5f5", " !important"),
-          border: "".concat(((_dateFieldStyles$disa3 = dateFieldStyles.disabled) === null || _dateFieldStyles$disa3 === void 0 ? void 0 : _dateFieldStyles$disa3.border) || "1px solid #cecdd3", " !important"),
-          borderRadius: "".concat(dateFieldStyles.inputRoot.borderRadius, " !important"),
+        "&.Mui-disabled ": _objectSpread(_objectSpread({
+          backgroundColor: "".concat(((_dateFieldStyles$disa2 = dateFieldStyles.disabled) === null || _dateFieldStyles$disa2 === void 0 ? void 0 : _dateFieldStyles$disa2.backgroundColor) || _apperance.palette.secondary, " !important")
+        }, ((_dateFieldStyles$disa3 = dateFieldStyles.disabled) === null || _dateFieldStyles$disa3 === void 0 ? void 0 : _dateFieldStyles$disa3.border) && {
+          border: dateFieldStyles.disabled.border
+        }), {}, {
+          borderRadius: ((_dateFieldStyles$inpu6 = dateFieldStyles.inputRoot) === null || _dateFieldStyles$inpu6 === void 0 ? void 0 : _dateFieldStyles$inpu6.borderRadius) || "5px",
           "& input": {
             color: "".concat(themePalette.gray.darker),
             WebkitTextFillColor: "".concat(themePalette.gray.darker)
           }
-        },
+        }),
         "& .MuiInputBase-input": {
-          lineHeight: "".concat(dateFieldStyles.inputRoot.lineHeight, " !important"),
+          lineHeight: ((_dateFieldStyles$inpu7 = dateFieldStyles.inputRoot) === null || _dateFieldStyles$inpu7 === void 0 ? void 0 : _dateFieldStyles$inpu7.lineHeight) || "1",
           padding: "1px 6px",
           fontSize: "0.7rem"
         }
-      },
+      }),
       "& .MuiFormHelperText-root": {
         fontWeight: "bold",
         fontSize: ".7rem",

package/dist/components/inputs/PuiDateTimeField.js CHANGED Viewed

@@ -19,15 +19,15 @@ var _apperance = require("../../config/apperance");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["id", "className", "sx", "label", "name", "required", "value", "minDate", "maxDate", "inputFormat", "format", "disablePast", "disableFuture", "error", "readOnly", "fullWidth", "disabled", "helperText", "onChange", "onBlur"],
   _excluded2 = ["id", "className", "sx", "label", "name", "required", "value", "minDate", "maxDate", "inputFormat", "format", "disablePast", "disableFuture", "error", "readOnly", "fullWidth", "disabled", "helperText", "onChange", "onBlur"],
-  _excluded3 = ["formik", "id", "className", "sx", "label", "name", "required", "value", "minDate", "maxDate", "inputFormat", "format", "disablePast", "disableFuture", "error", "readOnly", "fullWidth", "disabled", "helperText", "onChange", "onBlur"]; // Helper function to get palette from theme or fallback to appearance
+  _excluded3 = ["formik", "id", "className", "sx", "label", "name", "required", "value", "minDate", "maxDate", "inputFormat", "format", "disablePast", "disableFuture", "error", "readOnly", "fullWidth", "disabled", "helperText", "onChange", "onBlur"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } // Helper function to get palette from theme or fallback to appearance
 const getPalette = theme => {
   // Check if theme has our custom palette properties
   if (theme && theme.palette && theme.palette.gray && theme.palette.gray.darker) {
@@ -74,59 +74,43 @@ const getDateTimeFieldStyles = theme => {
   if (theme && theme.components && theme.components.PuiDateTimeField) {
     return theme.components.PuiDateTimeField;
   }
-  return {
-    inputRoot: {
-      backgroundColor: _apperance.palette.white,
-      border: "2px solid ".concat(_apperance.palette.gray.dark),
-      borderRadius: "5px",
-      height: "auto",
-      lineHeight: "1"
-    },
-    label: {
-      color: _apperance.palette.gray.darker,
-      marginBottom: "4px",
-      fontSize: "0.8rem"
-    },
-    disabled: {
-      backgroundColor: "#f5f5f5",
-      border: "1px solid #cecdd3",
-      labelColor: "#97969b"
-    }
-  };
+  return {};
 };
 const getTextFieldStyles = (theme, required) => {
-  var _themePalette$backgro, _palette$background, _dateTimeFieldStyles$, _themePalette$backgro2, _palette$background2, _dateTimeFieldStyles$2, _dateTimeFieldStyles$3;
+  var _themePalette$backgro, _palette$background, _dateTimeFieldStyles$, _dateTimeFieldStyles$2, _dateTimeFieldStyles$3, _dateTimeFieldStyles$4, _dateTimeFieldStyles$5, _dateTimeFieldStyles$6, _dateTimeFieldStyles$7, _dateTimeFieldStyles$8, _dateTimeFieldStyles$9, _themePalette$backgro2, _palette$background2, _dateTimeFieldStyles$0, _dateTimeFieldStyles$1, _dateTimeFieldStyles$10, _dateTimeFieldStyles$11;
   const themePalette = getPalette(theme);
   const dateTimeFieldStyles = getDateTimeFieldStyles(theme);
   return {
     "&.MuiFormControl-root": {
       "&.required .MuiInputBase-root": {
-        backgroundColor: required ? ((_themePalette$backgro = themePalette.background) === null || _themePalette$backgro === void 0 ? void 0 : _themePalette$backgro.required) || ((_palette$background = _apperance.palette.background) === null || _palette$background === void 0 ? void 0 : _palette$background.required) : dateTimeFieldStyles.inputRoot.backgroundColor
+        backgroundColor: required ? ((_themePalette$backgro = themePalette.background) === null || _themePalette$backgro === void 0 ? void 0 : _themePalette$backgro.required) || ((_palette$background = _apperance.palette.background) === null || _palette$background === void 0 ? void 0 : _palette$background.required) : ((_dateTimeFieldStyles$ = dateTimeFieldStyles.inputRoot) === null || _dateTimeFieldStyles$ === void 0 ? void 0 : _dateTimeFieldStyles$.backgroundColor) || _apperance.palette.white
       },
       "& .MuiFormLabel-root": {
         zIndex: 0,
         lineSpacing: "-0.03em",
         position: "initial",
         transform: "none",
-        fontSize: "".concat(dateTimeFieldStyles.label.fontSize, " !important"),
+        fontSize: ((_dateTimeFieldStyles$2 = dateTimeFieldStyles.label) === null || _dateTimeFieldStyles$2 === void 0 ? void 0 : _dateTimeFieldStyles$2.fontSize) || "0.8rem",
         fontWeight: "600",
-        marginBottom: "".concat(dateTimeFieldStyles.label.marginBottom, " !important"),
-        color: "".concat(dateTimeFieldStyles.label.color, " !important"),
+        marginBottom: ((_dateTimeFieldStyles$3 = dateTimeFieldStyles.label) === null || _dateTimeFieldStyles$3 === void 0 ? void 0 : _dateTimeFieldStyles$3.marginBottom) || "4px",
+        color: ((_dateTimeFieldStyles$4 = dateTimeFieldStyles.label) === null || _dateTimeFieldStyles$4 === void 0 ? void 0 : _dateTimeFieldStyles$4.color) || _apperance.palette.gray.darker,
         "&.Mui-focused ": {
           color: "".concat(themePalette.primary, " !important")
         },
         "&.Mui-disabled": {
-          color: "".concat(((_dateTimeFieldStyles$ = dateTimeFieldStyles.disabled) === null || _dateTimeFieldStyles$ === void 0 ? void 0 : _dateTimeFieldStyles$.labelColor) || "#97969b", " !important")
+          color: "".concat(((_dateTimeFieldStyles$5 = dateTimeFieldStyles.disabled) === null || _dateTimeFieldStyles$5 === void 0 ? void 0 : _dateTimeFieldStyles$5.labelColor) || _apperance.palette.gray.darker, " !important")
         },
         "&.Mui-error": {
           color: "".concat(themePalette.error, " !important")
         }
       },
-      "& .MuiInputBase-root": {
-        backgroundColor: "".concat(dateTimeFieldStyles.inputRoot.backgroundColor, " !important"),
-        border: "".concat(dateTimeFieldStyles.inputRoot.border, " !important"),
-        borderRadius: "".concat(dateTimeFieldStyles.inputRoot.borderRadius, " !important"),
-        height: "".concat(dateTimeFieldStyles.inputRoot.height, " !important"),
+      "& .MuiInputBase-root": _objectSpread(_objectSpread({
+        backgroundColor: "".concat(((_dateTimeFieldStyles$6 = dateTimeFieldStyles.inputRoot) === null || _dateTimeFieldStyles$6 === void 0 ? void 0 : _dateTimeFieldStyles$6.backgroundColor) || (required ? _apperance.palette.background.required : _apperance.palette.white), " !important"),
+        border: ((_dateTimeFieldStyles$7 = dateTimeFieldStyles.inputRoot) === null || _dateTimeFieldStyles$7 === void 0 ? void 0 : _dateTimeFieldStyles$7.border) || "2px solid ".concat(_apperance.palette.gray.dark),
+        borderRadius: ((_dateTimeFieldStyles$8 = dateTimeFieldStyles.inputRoot) === null || _dateTimeFieldStyles$8 === void 0 ? void 0 : _dateTimeFieldStyles$8.borderRadius) || "5px"
+      }, ((_dateTimeFieldStyles$9 = dateTimeFieldStyles.inputRoot) === null || _dateTimeFieldStyles$9 === void 0 ? void 0 : _dateTimeFieldStyles$9.height) && {
+        height: dateTimeFieldStyles.inputRoot.height
+      }), {}, {
         "&.MuiInputBase-multiline": {
           padding: "8px 0",
           height: "auto !important"
@@ -138,21 +122,23 @@ const getTextFieldStyles = (theme, required) => {
           border: "2px solid ".concat(themePalette.error, " !important"),
           backgroundColor: "".concat(((_themePalette$backgro2 = themePalette.background) === null || _themePalette$backgro2 === void 0 ? void 0 : _themePalette$backgro2.error) || ((_palette$background2 = _apperance.palette.background) === null || _palette$background2 === void 0 ? void 0 : _palette$background2.error), " !important")
         },
-        "&.Mui-disabled ": {
-          backgroundColor: "".concat(((_dateTimeFieldStyles$2 = dateTimeFieldStyles.disabled) === null || _dateTimeFieldStyles$2 === void 0 ? void 0 : _dateTimeFieldStyles$2.backgroundColor) || "#f5f5f5", " !important"),
-          border: "".concat(((_dateTimeFieldStyles$3 = dateTimeFieldStyles.disabled) === null || _dateTimeFieldStyles$3 === void 0 ? void 0 : _dateTimeFieldStyles$3.border) || "1px solid #cecdd3", " !important"),
-          borderRadius: "".concat(dateTimeFieldStyles.inputRoot.borderRadius, " !important"),
+        "&.Mui-disabled ": _objectSpread(_objectSpread({
+          backgroundColor: "".concat(((_dateTimeFieldStyles$0 = dateTimeFieldStyles.disabled) === null || _dateTimeFieldStyles$0 === void 0 ? void 0 : _dateTimeFieldStyles$0.backgroundColor) || _apperance.palette.secondary, " !important")
+        }, ((_dateTimeFieldStyles$1 = dateTimeFieldStyles.disabled) === null || _dateTimeFieldStyles$1 === void 0 ? void 0 : _dateTimeFieldStyles$1.border) && {
+          border: dateTimeFieldStyles.disabled.border
+        }), {}, {
+          borderRadius: ((_dateTimeFieldStyles$10 = dateTimeFieldStyles.inputRoot) === null || _dateTimeFieldStyles$10 === void 0 ? void 0 : _dateTimeFieldStyles$10.borderRadius) || "5px",
           "& input": {
             color: "".concat(themePalette.gray.darker),
             WebkitTextFillColor: "".concat(themePalette.gray.darker)
           }
-        },
+        }),
         "& .MuiInputBase-input": {
-          lineHeight: "".concat(dateTimeFieldStyles.inputRoot.lineHeight, " !important"),
+          lineHeight: ((_dateTimeFieldStyles$11 = dateTimeFieldStyles.inputRoot) === null || _dateTimeFieldStyles$11 === void 0 ? void 0 : _dateTimeFieldStyles$11.lineHeight) || "1",
           padding: "1px 6px",
           fontSize: "0.7rem"
         }
-      },
+      }),
       "& .MuiFormHelperText-root": {
         fontWeight: "bold",
         fontSize: ".7rem",

package/dist/components/inputs/PuiSelect.js CHANGED Viewed

@@ -79,38 +79,20 @@ const getSelectStyles = theme => {
   if (theme && theme.components && theme.components.PuiSelect) {
     return theme.components.PuiSelect;
   }
-  return {
-    inputRoot: {
-      backgroundColor: "#fafafa",
-      border: "1px solid #cecdd3",
-      borderRadius: "5px",
-      height: "33px",
-      lineHeight: "2em"
-    },
-    label: {
-      color: "#97969b",
-      marginBottom: "13px",
-      fontSize: "0.9rem"
-    },
-    disabled: {
-      backgroundColor: "#f5f5f5",
-      border: "1px solid #cecdd3",
-      labelColor: "#97969b"
-    }
-  };
+  return {};
 };
 const StyledMuiFormControl = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControl, _objectSpread(_objectSpread({}, props), {}, {
   ref: ref
 }))))(props => {
-  var _themePalette$backgro, _selectStyles$disable, _themePalette$backgro2, _selectStyles$disable2, _selectStyles$disable3;
+  var _selectStyles$inputRo, _selectStyles$inputRo2, _themePalette$backgro, _selectStyles$label, _selectStyles$label2, _selectStyles$label3, _selectStyles$disable, _selectStyles$inputRo3, _selectStyles$inputRo4, _selectStyles$inputRo5, _selectStyles$inputRo6, _themePalette$backgro2, _selectStyles$disable2, _selectStyles$disable3, _selectStyles$inputRo7;
   const themePalette = getPalette(props.theme);
   const selectStyles = getSelectStyles(props.theme);
   return {
     "&.MuiFormControl-root": {
       "& .MuiSelect-select": {
         minHeight: "auto",
-        height: selectStyles.inputRoot.height || "1.4375em",
-        lineHeight: selectStyles.inputRoot.lineHeight || "1",
+        height: ((_selectStyles$inputRo = selectStyles.inputRoot) === null || _selectStyles$inputRo === void 0 ? void 0 : _selectStyles$inputRo.height) || "1.4375em",
+        lineHeight: ((_selectStyles$inputRo2 = selectStyles.inputRoot) === null || _selectStyles$inputRo2 === void 0 ? void 0 : _selectStyles$inputRo2.lineHeight) || "1",
         display: "flex",
         alignItems: "center"
       },
@@ -122,26 +104,28 @@ const StyledMuiFormControl = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((
         lineSpacing: "-0.03em",
         position: "initial",
         transform: "none",
-        fontSize: "".concat(selectStyles.label.fontSize, " !important"),
+        fontSize: ((_selectStyles$label = selectStyles.label) === null || _selectStyles$label === void 0 ? void 0 : _selectStyles$label.fontSize) || "0.8rem",
         fontWeight: "600",
-        marginBottom: "".concat(selectStyles.label.marginBottom, " !important"),
-        color: "".concat(selectStyles.label.color, " !important"),
+        marginBottom: ((_selectStyles$label2 = selectStyles.label) === null || _selectStyles$label2 === void 0 ? void 0 : _selectStyles$label2.marginBottom) || "4px",
+        color: ((_selectStyles$label3 = selectStyles.label) === null || _selectStyles$label3 === void 0 ? void 0 : _selectStyles$label3.color) || _apperance.palette.gray.darker,
         "&.Mui-focused ": {
           lineHeight: "1.4375em",
           color: "".concat(themePalette.primary, " !important")
         },
         "&.Mui-disabled": {
-          color: "".concat(((_selectStyles$disable = selectStyles.disabled) === null || _selectStyles$disable === void 0 ? void 0 : _selectStyles$disable.labelColor) || "#97969b", " !important")
+          color: "".concat(((_selectStyles$disable = selectStyles.disabled) === null || _selectStyles$disable === void 0 ? void 0 : _selectStyles$disable.labelColor) || _apperance.palette.gray.darker, " !important")
         },
         "&.Mui-error": {
           color: "".concat(themePalette.error, " !important")
         }
       },
-      "& .MuiInputBase-root": {
-        backgroundColor: "".concat(selectStyles.inputRoot.backgroundColor, " !important"),
-        border: "".concat(selectStyles.inputRoot.border, " !important"),
-        borderRadius: "".concat(selectStyles.inputRoot.borderRadius, " !important"),
-        height: selectStyles.inputRoot.height || "auto",
+      "& .MuiInputBase-root": _objectSpread(_objectSpread({
+        backgroundColor: "".concat(((_selectStyles$inputRo3 = selectStyles.inputRoot) === null || _selectStyles$inputRo3 === void 0 ? void 0 : _selectStyles$inputRo3.backgroundColor) || _apperance.palette.white, " !important"),
+        border: ((_selectStyles$inputRo4 = selectStyles.inputRoot) === null || _selectStyles$inputRo4 === void 0 ? void 0 : _selectStyles$inputRo4.border) || "2px solid ".concat(_apperance.palette.gray.dark),
+        borderRadius: ((_selectStyles$inputRo5 = selectStyles.inputRoot) === null || _selectStyles$inputRo5 === void 0 ? void 0 : _selectStyles$inputRo5.borderRadius) || "5px"
+      }, ((_selectStyles$inputRo6 = selectStyles.inputRoot) === null || _selectStyles$inputRo6 === void 0 ? void 0 : _selectStyles$inputRo6.height) && {
+        height: selectStyles.inputRoot.height
+      }), {}, {
         "&.Mui-focused ": {
           border: "2px solid ".concat(themePalette.primary, " !important")
         },
@@ -149,15 +133,17 @@ const StyledMuiFormControl = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((
           border: "2px solid ".concat(themePalette.error, " !important"),
           backgroundColor: "".concat(((_themePalette$backgro2 = themePalette.background) === null || _themePalette$backgro2 === void 0 ? void 0 : _themePalette$backgro2.error) || _apperance.palette.background.error, " !important")
         },
-        "&.Mui-disabled ": {
-          backgroundColor: "".concat(((_selectStyles$disable2 = selectStyles.disabled) === null || _selectStyles$disable2 === void 0 ? void 0 : _selectStyles$disable2.backgroundColor) || "#f5f5f5", " !important"),
-          border: "".concat(((_selectStyles$disable3 = selectStyles.disabled) === null || _selectStyles$disable3 === void 0 ? void 0 : _selectStyles$disable3.border) || "1px solid #cecdd3", " !important"),
-          borderRadius: "".concat(selectStyles.inputRoot.borderRadius, " !important"),
+        "&.Mui-disabled ": _objectSpread(_objectSpread({
+          backgroundColor: "".concat(((_selectStyles$disable2 = selectStyles.disabled) === null || _selectStyles$disable2 === void 0 ? void 0 : _selectStyles$disable2.backgroundColor) || _apperance.palette.secondary, " !important")
+        }, ((_selectStyles$disable3 = selectStyles.disabled) === null || _selectStyles$disable3 === void 0 ? void 0 : _selectStyles$disable3.border) && {
+          border: selectStyles.disabled.border
+        }), {}, {
+          borderRadius: ((_selectStyles$inputRo7 = selectStyles.inputRoot) === null || _selectStyles$inputRo7 === void 0 ? void 0 : _selectStyles$inputRo7.borderRadius) || "5px",
           "& .MuiSelect-select": {
             color: "".concat(themePalette.gray.darker),
             WebkitTextFillColor: "".concat(themePalette.gray.darker)
           }
-        },
+        }),
         "& .MuiInputBase-input": {
           padding: "1px 6px",
           fontSize: "0.7rem"
@@ -165,7 +151,7 @@ const StyledMuiFormControl = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((
         "& .MuiSvgIcon-root": {
           marginRight: "2px"
         }
-      },
+      }),
       "& .MuiFormHelperText-root": {
         fontWeight: "bold",
         fontSize: ".7rem",

package/dist/components/others/PuiSection.js CHANGED Viewed

@@ -68,37 +68,30 @@ const getPuiSectionStyles = theme => {
   if (theme && theme.components && theme.components.PuiSection) {
     return theme.components.PuiSection;
   }
-  return {
-    backgroundColor: _apperance.palette.gray.light,
-    border: "2px solid ".concat(_apperance.palette.gray.dark),
-    borderRadius: "5px",
-    boxShadow: "0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)",
-    titleColor: _apperance.palette.primary,
-    titleFontFamily: "'Poppins', sans-serif",
-    titleFontWeight: "400",
-    titleFontSize: "1.1rem",
-    titlePosition: "16px"
-  };
+  return {};
 };
 const StyledMuiPaper = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, _objectSpread({
   ref: ref
 }, props))))(props => {
+  const themePalette = getPalette(props.theme);
   const sectionStyles = getPuiSectionStyles(props.theme);
   return {
-    "&.MuiPaper-root": {
-      backgroundColor: "".concat(sectionStyles.backgroundColor, " !important"),
-      border: "".concat(sectionStyles.border, " !important"),
-      borderRadius: "".concat(sectionStyles.borderRadius, " !important"),
-      boxShadow: "".concat(sectionStyles.boxShadow, " !important"),
+    "&.MuiPaper-root": _objectSpread(_objectSpread({
+      backgroundColor: sectionStyles.backgroundColor || themePalette.gray.light,
+      border: sectionStyles.border || "2px solid ".concat(themePalette.gray.dark),
+      borderRadius: sectionStyles.borderRadius || "5px"
+    }, sectionStyles.boxShadow && {
+      boxShadow: sectionStyles.boxShadow
+    }), {}, {
       position: "relative"
-    }
+    })
   };
 });
 const PuiSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     id,
     className,
-    sx,
+    sx: _sx,
     title,
     titleVariant,
     children
@@ -106,37 +99,76 @@ const PuiSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledMuiPaper, {
     id: id,
     className: className,
-    sx: _objectSpread({
-      paddingX: 3,
-      paddingY: 2,
-      paddingTop: title ? 6 : 2
-    }, sx),
+    sx: theme => {
+      const sectionStyles = getPuiSectionStyles(theme);
+      const isInsideMode = sectionStyles.titlePosition !== undefined;
+      return _objectSpread({
+        paddingX: isInsideMode ? 3 : 2,
+        paddingY: isInsideMode ? 2 : 2,
+        paddingTop: isInsideMode && title ? 6 : 2
+      }, _sx);
+    },
     ref: ref,
     elevation: 1,
-    children: [Boolean(title) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+    children: [Boolean(title) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
       sx: theme => {
         const sectionStyles = getPuiSectionStyles(theme);
+        const isInsideMode = sectionStyles.titlePosition !== undefined;
+        if (isInsideMode) {
+          return {
+            position: "absolute",
+            top: sectionStyles.titlePosition || "16px",
+            left: "24px"
+          };
+        }
         return {
           position: "absolute",
-          top: sectionStyles.titlePosition || "16px",
-          left: "24px"
+          top: "-1px",
+          left: "30px",
+          transform: "translate(0,-50%)"
         };
       },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-        variant: titleVariant,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
         sx: theme => {
+          const themePalette = getPalette(theme);
           const sectionStyles = getPuiSectionStyles(theme);
+          const isInsideMode = sectionStyles.titlePosition !== undefined;
+          if (isInsideMode) {
+            return {
+              display: "none"
+            };
+          }
           return {
-            textAlign: "left",
-            fontWeight: sectionStyles.titleFontWeight || "400",
-            fontFamily: sectionStyles.titleFontFamily || "'Poppins', sans-serif",
-            color: sectionStyles.titleColor || "#202224",
-            fontSize: sectionStyles.titleFontSize || "1.1rem",
-            lineHeight: "1.5"
+            transform: "translateY(-50%)",
+            top: "50%",
+            zIndex: "-1",
+            position: "absolute",
+            width: "100%",
+            height: "4px",
+            backgroundColor: sectionStyles.backgroundColor || themePalette.gray.light
           };
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        variant: titleVariant,
+        sx: theme => {
+          const themePalette = getPalette(theme);
+          const sectionStyles = getPuiSectionStyles(theme);
+          const isInsideMode = sectionStyles.titlePosition !== undefined;
+          return _objectSpread(_objectSpread({
+            textAlign: isInsideMode ? "left" : "center",
+            paddingX: isInsideMode ? 0 : 1,
+            fontWeight: sectionStyles.titleFontWeight || "600",
+            lineSpacing: "-0.03em",
+            color: sectionStyles.titleColor || themePalette.primary,
+            fontSize: sectionStyles.titleFontSize || "1.2rem"
+          }, sectionStyles.titleFontFamily && {
+            fontFamily: sectionStyles.titleFontFamily
+          }), isInsideMode && {
+            lineHeight: "1.5"
+          });
         },
         children: title
-      })
+      })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
       children: children
     })]

package/dist/components/table/PuiTable.js CHANGED Viewed

@@ -33,7 +33,10 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } // Helper function to get palette from theme or fallback to appearance
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+const isCustomTheme = theme => Boolean(theme && (theme.palette && theme.palette.gray && theme.palette.gray.darker || theme.gray && theme.gray.darker));
+// Helper function to get palette from theme or fallback to appearance
 const getPalette = theme => {
   // Check if theme has our custom palette properties
   if (theme && theme.palette && theme.palette.gray && theme.palette.gray.darker) {
@@ -99,8 +102,126 @@ const StyledMuiTable = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props,
   ref: ref
 }, props))))(props => {
   var _themePalette$shadow, _palette$shadow;
-  const themePalette = getPalette(props.theme);
-  const tableStyles = getPuiTableStyles(props.theme);
+  const theme = props.theme;
+  const useTheme = isCustomTheme(theme);
+  if (!useTheme) {
+    return {
+      "&.MuiDataGrid-root": {
+        fontSize: ".8em",
+        "& .tableActionColumn": {
+          "& .MuiDataGrid-columnHeaderTitle": {
+            justifyContent: "center",
+            display: "flex"
+          },
+          "& .MuiDataGrid-columnHeaderTitleContainer": {
+            justifyContent: "center"
+          }
+        },
+        "&.elevate": {
+          boxShadow: "0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)"
+        },
+        backgroundColor: _apperance.palette.gray.light,
+        border: "2px solid ".concat(_apperance.palette.gray.dark),
+        "& .MuiPaginationItem-root": {
+          "&.Mui-selected": {
+            color: _apperance.palette.white,
+            backgroundColor: _apperance.palette.primary
+          }
+        },
+        "&.table-loading .MuiDataGrid-virtualScroller, &.table-loading .MuiDataGrid-footerContainer": {
+          filter: "blur(1px)",
+          "&::before": {
+            content: "''",
+            width: "100%",
+            height: "100%",
+            backgroundColor: _apperance.palette.white,
+            position: "absolute",
+            zIndex: 1,
+            display: "block",
+            opacity: 0
+          }
+        },
+        "&.table-stripped .MuiDataGrid-row": {
+          "&:nth-of-type(even)": {
+            backgroundColor: _apperance.palette.gray.light
+          }
+        },
+        "& .MuiLinearProgress-root": {
+          zIndex: 1,
+          backgroundColor: _apperance.palette.info,
+          "& .MuiLinearProgress-bar": {
+            backgroundColor: _apperance.palette.primary
+          }
+        },
+        "& .MuiDataGrid-columnHeaders": {
+          "& .MuiDataGrid-columnHeader": {
+            "& .MuiDataGrid-columnHeaderTitle": {
+              display: "flex",
+              alignItems: "center",
+              fontWeight: "600",
+              color: _apperance.palette.primary,
+              whiteSpace: "normal",
+              lineHeight: "1.2em"
+            },
+            "&:focus-within": {
+              outline: "none"
+            },
+            "&:last-of-type .MuiDataGrid-columnSeparator": {
+              display: "none"
+            }
+          },
+          "& .MuiDataGrid-columnSeparator": {
+            color: _apperance.palette.gray.dark
+          }
+        },
+        "& .MuiDataGrid-cell": {
+          paddingTop: "2px",
+          paddingBottom: "2px",
+          whiteSpace: "normal",
+          textOverflow: "ellipsis",
+          overflow: "hidden",
+          maxHeight: "none",
+          minWidth: 'maxWidth',
+          wordBreak: "break-word",
+          "&.tableAction": {
+            justifyContent: "center",
+            position: "relative",
+            overflow: "initial !important"
+          },
+          "&:focus-within": {
+            outline: "none"
+          }
+        },
+        "& .MuiDataGrid-row": {
+          maxHeight: "none !important",
+          "&:nth-of-type(odd)": {
+            backgroundColor: "#ffffff"
+          },
+          "&:nth-of-type(even)": {
+            backgroundColor: "#F6F9FF"
+          },
+          "&:hover": {
+            backgroundColor: "#95C7FC"
+          }
+        },
+        "& .MuiDataGrid-virtualScrollerContent": {
+          "& .MuiDataGrid-row": {
+            maxHeight: "none !important"
+          }
+        },
+        "& .MuiDataGrid-virtualScroller": {
+          backgroundColor: _apperance.palette.white
+        },
+        "& .MuiDataGrid-footerContainer": {
+          backgroundColor: _apperance.palette.white,
+          height: "28px",
+          minHeight: "28px"
+        }
+      }
+    };
+  }
+  const themePalette = getPalette(theme);
+  const tableStyles = getPuiTableStyles(theme);
   return {
     "&.MuiDataGrid-root": {
       fontSize: ".8em",
@@ -362,7 +483,7 @@ const PuiTable = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
       id,
       className,
-      sx,
+      sx: _sx,
       elevate,
       rows,
       rowCount,
@@ -440,9 +561,9 @@ const PuiTable = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     const {
       data
     } = params;
-    return /*#__PURE__*/React.cloneElement(rowDetailPanel, {
+    return rowDetailPanel ? /*#__PURE__*/React.cloneElement(rowDetailPanel, {
       rowData: data
-    });
+    }) : null;
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     style: {
@@ -456,15 +577,16 @@ const PuiTable = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         LoadingOverlay: _material.LinearProgress,
         Pagination: TablePagination
       },
-      className: "".concat(className, " ").concat(stripped ? "table-stripped" : "", " ").concat(loading ? "table-loading" : "", " ").concat(elevate ? "elevate" : ""),
-      sx: {
+      className: "".concat(className || "", " ").concat(stripped ? "table-stripped" : "", " ").concat(loading ? "table-loading" : "", " ").concat(elevate ? "elevate" : ""),
+      sx: theme => _objectSpread({
         ["& .".concat(_xDataGrid.gridClasses.cell)]: {
-          py: 1
+          py: isCustomTheme(theme) ? 1 : 0.5
         }
-      },
+      }, _sx || {}),
       autoHeight: true,
       headerHeight: 60,
       footerHeight: 40,
+      rowHeight: 40,
       rows: rows,
       rowCount: rowCount,
       columns: appColumns,

package/dist/components/typography/PuiMainTitle.js CHANGED Viewed

@@ -64,38 +64,12 @@ const getPalette = theme => {
   return _apperance.palette;
 };
-// Helper function to get PuiMainTitle color from theme
-const getPuiMainTitleColor = theme => {
-  if (theme && theme.components && theme.components.PuiMainTitle && theme.components.PuiMainTitle.color) {
-    return theme.components.PuiMainTitle.color;
+// Helper function to get PuiMainTitle styles from theme
+const getPuiMainTitleStyles = theme => {
+  if (theme && theme.components && theme.components.PuiMainTitle) {
+    return theme.components.PuiMainTitle;
   }
-  // Fall back to primary color
-  const themePalette = getPalette(theme);
-  return themePalette.primary;
-};
-// Helper function to get PuiMainTitle font family from theme
-const getPuiMainTitleFontFamily = theme => {
-  if (theme && theme.components && theme.components.PuiMainTitle && theme.components.PuiMainTitle.fontFamily) {
-    return theme.components.PuiMainTitle.fontFamily;
-  }
-  return "'Poppins', sans-serif";
-};
-// Helper function to get PuiMainTitle font weight from theme
-const getPuiMainTitleFontWeight = theme => {
-  if (theme && theme.components && theme.components.PuiMainTitle && theme.components.PuiMainTitle.fontWeight) {
-    return theme.components.PuiMainTitle.fontWeight;
-  }
-  return "bold";
-};
-// Helper function to check if icon should be shown
-const getPuiMainTitleShowIcon = theme => {
-  if (theme && theme.components && theme.components.PuiMainTitle && typeof theme.components.PuiMainTitle.showIcon !== 'undefined') {
-    return theme.components.PuiMainTitle.showIcon;
-  }
-  return true;
+  return {};
 };
 const PuiMainTitle = _ref => {
   let {
@@ -107,66 +81,60 @@ const PuiMainTitle = _ref => {
     title
   } = _ref;
   const theme = (0, _styles.useTheme)();
-  const mainTitleColor = getPuiMainTitleColor(theme);
-  const mainTitleFontFamily = getPuiMainTitleFontFamily(theme);
-  const mainTitleFontWeight = getPuiMainTitleFontWeight(theme);
-  const showIcon = getPuiMainTitleShowIcon(theme);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+  const themePalette = getPalette(theme);
+  const mainTitleStyles = getPuiMainTitleStyles(theme);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
     id: id,
     className: className,
     sx: _objectSpread({
       display: "flex",
-      flexDirection: "column",
-      marginBottom: 3.5
+      alignItems: "center",
+      marginBottom: mainTitleStyles.color ? 3.5 : 2
     }, sx),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-      sx: {
-        display: "flex",
-        alignItems: "center"
-      },
-      children: [Boolean(icon) && showIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-        children: /*#__PURE__*/React.cloneElement(icon, {
-          sx: {
-            marginRight: 1,
-            fontSize: "2.4em",
-            color: mainTitleColor
-          }
+    children: [Boolean(icon) && mainTitleStyles.showIcon !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      children: /*#__PURE__*/React.cloneElement(icon, {
+        sx: {
+          marginRight: 1,
+          fontSize: "2.4em",
+          color: mainTitleStyles.color || themePalette.primary
+        }
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: _objectSpread({
+          color: mainTitleStyles.color || themePalette.primary,
+          fontSize: "1.8rem",
+          fontWeight: mainTitleStyles.fontWeight || "bold"
+        }, mainTitleStyles.fontFamily && {
+          fontFamily: mainTitleStyles.fontFamily,
+          marginBottom: 0.5
+        }),
+        variant: "h1",
+        children: title
+      }), Boolean(trace) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: _objectSpread({
+          color: mainTitleStyles.color || themePalette.primary,
+          fontSize: ".8rem",
+          fontWeight: mainTitleStyles.fontWeight || "bold"
+        }, mainTitleStyles.fontFamily && {
+          fontFamily: mainTitleStyles.fontFamily
+        }),
+        variant: "h2",
+        children: trace.map((element, index) => {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+            component: "span",
+            children: "".concat(element).concat(index + 1 !== trace.length ? " > " : "")
+          }, index);
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-          sx: {
-            color: mainTitleColor,
-            fontSize: "1.8rem",
-            fontWeight: mainTitleFontWeight,
-            fontFamily: mainTitleFontFamily,
-            marginBottom: 0.5
-          },
-          variant: "h1",
-          children: title
-        }), Boolean(trace) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-          sx: {
-            color: mainTitleColor,
-            fontSize: ".8rem",
-            fontWeight: mainTitleFontWeight,
-            fontFamily: mainTitleFontFamily
-          },
-          variant: "h2",
-          children: trace.map((element, index) => {
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-              component: "span",
-              children: "".concat(element).concat(index + 1 !== trace.length ? " > " : "")
-            }, index);
-          })
-        })]
       })]
-    })
+    })]
   });
 };
 PuiMainTitle.propTypes = {
   id: _propTypes.default.string,
   className: _propTypes.default.string,
   sx: _propTypes.default.object,
-  icon: _propTypes.default.element,
+  icon: _propTypes.default.element.isRequired,
   trace: _propTypes.default.arrayOf(_propTypes.default.string),
   title: _propTypes.default.string.isRequired
 };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@portnet/ui",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "description": "Portnet UI",
   "keywords": [
     "react",
@@ -27,7 +27,7 @@
     "@testing-library/user-event": "^13.5.0",
     "ajv": "^8.17.1",
     "ajv-keywords": "^5.1.0",
-    "axios": "^1.2.2",
+    "axios": "^1.13.2",
     "dayjs": "^1.11.13",
     "formik": "^2.2.9",
     "lodash": "^4.17.21",