@portnet/ui 2.0.2 → 2.0.4

package/dist/components/ui/pages/general/PuiSearchPage.js

@@ -13,15 +13,13 @@ require("core-js/modules/web.dom-collections.iterator.js");
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _formik = require("formik");
-var _PuiButton = _interopRequireDefault(require("../../../buttons/PuiButton"));
 var _PuiFormikForm = _interopRequireDefault(require("../../../others/PuiFormikForm"));
-var _PuiGrid = _interopRequireDefault(require("../../../others/PuiGrid"));
 var _PuiIcon = _interopRequireDefault(require("../../../others/PuiIcon"));
-var _PuiSection = _interopRequireDefault(require("../../../others/PuiSection"));
 var _PuiTable = _interopRequireDefault(require("../../../table/PuiTable"));
 var _PuiDefaultPage = _interopRequireDefault(require("./PuiDefaultPage"));
-var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
-var _ExpandLess = _interopRequireDefault(require("@mui/icons-material/ExpandLess"));
+var _styleUtils = require("../../../../config/styleUtils");
+var _antd = require("antd");
+var _icons = require("@ant-design/icons");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
@@ -30,23 +28,55 @@ 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); } // Container for search form and actions
+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); } // Ant Design imports
+const {
+  Title,
+  Text
+} = _antd.Typography;
+const {
+  Panel
+} = _antd.Collapse;
+
+// Définition des styles locaux pour éviter les problèmes d'importation
+const styles = {
+  colors: {
+    headerBackground: '#f5f8fa',
+    rowBackgroundOdd: '#ffffff',
+    rowBackgroundEven: '#F6F9FF',
+    borderLight: 'rgba(224, 224, 224, 0.3)',
+    borderMedium: 'rgba(224, 224, 224, 0.5)'
+  },
+  sizes: {
+    borderRadius: '8px'
+  }
+};
+
+// Container pour le formulaire de recherche avec design Ant
 const PuiStandardSearchPageContainer = _ref => {
   let {
     actions,
     children
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PuiGrid.default, {
-    container: true,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiGrid.default, {
-      item: true,
-      xs: 12,
-      children: children
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiGrid.default, {
-      item: true,
-      xs: 12,
-      children: actions
-    })]
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Card, {
+      bodyStyle: {
+        padding: '16px',
+        backgroundColor: '#fff'
+      },
+      children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Divider, {
+        style: {
+          margin: '16px 0'
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Row, {
+        justify: "end",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Col, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Space, {
+            size: "middle",
+            children: actions
+          })
+        })
+      })]
+    })
   });
 };
 const PuiSearchPage = _ref2 => {
@@ -68,13 +98,18 @@ const PuiSearchPage = _ref2 => {
     children,
     additionalActions,
     collapsibleSearchSection = true,
-    // Collapsible by default
     alwaysVisibleFields = null,
-    // Champs toujours visibles
-    collapsibleFields = null // Champs collapsibles
+    collapsibleFields = null
   } = _ref2;
   const [isSearchSectionExpanded, setSearchSectionExpanded] = (0, _react.useState)(false);
 
+  // Ensure tableProps is properly initialized
+  (0, _react.useEffect)(() => {
+    if (!tableProps) {
+      console.warn('tableProps is undefined in PuiSearchPage');
+    }
+  }, [tableProps]);
+
   // Si des champs spécifiques sont définis comme collapsibles
   const hasCollapsibleFields = collapsibleFields !== null;
   // Si des champs sont toujours visibles
@@ -115,27 +150,47 @@ const PuiSearchPage = _ref2 => {
   const renderToggleButton = () => {
     if (!hasCollapsibleFields) return null;
     if (isSearchSectionExpanded) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiGrid.default, {
-        item: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
-          startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandLess.default, {}),
-          onClick: toggleSearchSection,
-          color: "tertiary",
-          children: "Moins d'options"
-        })
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.UpOutlined, {}),
+        onClick: toggleSearchSection,
+        type: "link",
+        children: "Moins d'options"
       });
     } else {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiGrid.default, {
-        item: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
-          startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {}),
-          onClick: toggleSearchSection,
-          color: "tertiary",
-          children: "Plus d'options"
-        })
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DownOutlined, {}),
+        onClick: toggleSearchSection,
+        type: "link",
+        children: "Plus d'options"
       });
     }
   };
+
+  // Fonction sécurisée pour appeler une action
+  const handleAction = (action, row) => {
+    if (typeof action === 'function') {
+      return action(row);
+    }
+    console.warn('Action is not a function', action);
+  };
+
+  // Vérification de sécurité pour tableProps
+  const safeTableProps = tableProps || {
+    rows: [],
+    columns: []
+  };
+
+  // Calcul du titre du panel de recherche avec l'icône
+  const searchPanelHeader = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    onClick: collapsibleSearchSection ? toggleSearchSection : undefined,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Space, {
+      align: "center",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SettingOutlined, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Text, {
+        strong: true,
+        children: "Param\xE8tres de recherche"
+      }), collapsibleSearchSection && (isSearchSectionExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.UpOutlined, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DownOutlined, {}))]
+    })
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PuiDefaultPage.default, {
     title: title,
     titleIcon: titleIcon,
@@ -146,114 +201,89 @@ const PuiSearchPage = _ref2 => {
     loading: loading,
     retour: retour,
     onRetour: onRetour,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiSection.default, {
-      title: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        onClick: collapsibleSearchSection ? toggleSearchSection : undefined,
-        style: {
-          display: "flex",
-          alignItems: "center",
-          cursor: collapsibleSearchSection ? "pointer" : "default"
-        },
-        children: [collapsibleSearchSection && (isSearchSectionExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandLess.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {})), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          style: {
-            marginLeft: collapsibleSearchSection ? "8px" : "0px"
-          },
-          children: "Param\xE8tres de recherche"
-        })]
-      }),
-      sx: {
-        marginBottom: 2
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Collapse, {
+      defaultActiveKey: ['searchPanel'],
+      ghost: true,
+      expandIconPosition: "end",
+      style: {
+        marginBottom: 16
       },
-      children: shouldRenderSearchContent() && (formik ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_formik.Formik, _objectSpread(_objectSpread({
-        initialValues: {}
-      }, formikProps), {}, {
-        children: _ref3 => {
-          let {
-            resetForm,
-            submitForm
-          } = _ref3;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiFormikForm.default, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PuiStandardSearchPageContainer, {
-              actions: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PuiGrid.default, {
-                container: true,
-                justifyContent: "end",
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiGrid.default, {
-                  item: true,
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
-                    startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiIcon.default, {
-                      type: "effacer",
-                      size: "small"
-                    }),
-                    onClick: resetForm,
-                    color: "tertiary",
-                    children: "Effacer"
-                  })
-                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiGrid.default, {
-                  item: true,
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
-                    startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiIcon.default, {
-                      type: "rechercher",
-                      size: "small"
-                    }),
-                    onClick: submitForm,
-                    loadingPosition: "start",
-                    children: "Rechercher"
-                  })
-                }), additionalActions && additionalActions.map((actionItem, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiGrid.default, {
-                  item: true,
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
-                    startIcon: actionItem.icon,
-                    onClick: actionItem.action,
-                    children: actionItem.name
-                  })
-                }, index)), hasCollapsibleFields && renderToggleButton()]
-              }),
-              children: renderSearchFields()
-            })
-          });
-        }
-      })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(PuiStandardSearchPageContainer, {
-        actions: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PuiGrid.default, {
-          container: true,
-          justifyContent: "end",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiGrid.default, {
-            item: true,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
-              startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiIcon.default, {
-                type: "effacer",
-                size: "small"
-              }),
-              onClick: onReset,
-              color: "tertiary",
-              children: "Effacer"
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiGrid.default, {
-            item: true,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
-              startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiIcon.default, {
-                type: "rechercher",
-                size: "small"
-              }),
-              onClick: onSubmit,
-              loadingPosition: "start",
-              children: "Rechercher"
-            })
-          }), additionalActions && additionalActions.map((actionItem, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiGrid.default, {
-            item: true,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
-              startIcon: actionItem.icon,
-              onClick: actionItem.action,
-              children: actionItem.name
-            })
-          }, index)), hasCollapsibleFields && renderToggleButton()]
-        }),
-        children: renderSearchFields()
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, {
+        header: searchPanelHeader,
+        children: shouldRenderSearchContent() && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: formik ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_formik.Formik, _objectSpread(_objectSpread({
+            initialValues: (formikProps === null || formikProps === void 0 ? void 0 : formikProps.initialValues) || {}
+          }, formikProps), {}, {
+            children: _ref3 => {
+              let {
+                resetForm,
+                submitForm
+              } = _ref3;
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiFormikForm.default, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PuiStandardSearchPageContainer, {
+                  actions: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
+                      title: "Effacer",
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
+                        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ClearOutlined, {}),
+                        onClick: resetForm,
+                        children: "Effacer"
+                      })
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
+                      title: "Rechercher",
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
+                        type: "primary",
+                        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SearchOutlined, {}),
+                        onClick: submitForm,
+                        loading: loading,
+                        children: "Rechercher"
+                      })
+                    }), additionalActions && additionalActions.map((actionItem, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
+                      icon: actionItem.icon,
+                      onClick: () => handleAction(actionItem.action),
+                      children: actionItem.name
+                    }, index)), hasCollapsibleFields && renderToggleButton()]
+                  }),
+                  children: renderSearchFields()
+                })
+              });
+            }
+          })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(PuiStandardSearchPageContainer, {
+            actions: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
+                title: "Effacer",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
+                  icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ClearOutlined, {}),
+                  onClick: onReset,
+                  children: "Effacer"
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
+                title: "Rechercher",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
+                  type: "primary",
+                  icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SearchOutlined, {}),
+                  onClick: onSubmit,
+                  loading: loading,
+                  children: "Rechercher"
+                })
+              }), additionalActions && additionalActions.map((actionItem, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
+                icon: actionItem.icon,
+                onClick: () => handleAction(actionItem.action),
+                children: actionItem.name
+              }, index)), hasCollapsibleFields && renderToggleButton()]
+            }),
+            children: renderSearchFields()
+          })
+        })
+      }, "searchPanel")
+    }), tableProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Card, {
+      style: {
+        marginTop: 16
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiTable.default, _objectSpread(_objectSpread({}, tableProps), {}, {
+        loading: loading
       }))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiTable.default, _objectSpread(_objectSpread({
-      paginationMode: "server"
-    }, tableProps), {}, {
-      pinnedColumns: tableProps.pinnedColumns // Added pinnedColumns
-    }))]
+    })]
   });
 };
 PuiSearchPage.propTypes = {

package/dist/config/ThemeProvider.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styles = require("@mui/material/styles");
+var _CssBaseline = _interopRequireDefault(require("@mui/material/CssBaseline"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _theme = require("./theme");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Fournisseur de thème pour l'application
+ * Enveloppe les composants avec le thème personnalisé
+ */const ThemeProvider = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledEngineProvider, {
+    injectFirst: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ThemeProvider, {
+      theme: _theme.theme,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CssBaseline.default, {}), children]
+    })
+  });
+};
+ThemeProvider.propTypes = {
+  children: _propTypes.default.node.isRequired
+};
+var _default = exports.default = ThemeProvider;

package/dist/config/styleUtils.js

@@ -0,0 +1,135 @@
+"use strict";
+
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getStripedRowStyles = exports.getLoadingStyles = exports.getHeaderStyles = exports.getFormElementStyles = exports.getContainerStyles = exports.getActionStyles = exports.applyImprovedStyles = void 0;
+var _theme = require("./theme");
+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); } // styleUtils.js - Utilitaires pour appliquer les styles communs à différents composants
+/**
+ * Génère des styles pour les éléments de type conteneur (Card, Paper, Section, etc.)
+ */
+const getContainerStyles = exports.getContainerStyles = function getContainerStyles() {
+  let additionalStyles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return _objectSpread({
+    borderRadius: _theme.commonStyles.sizes.borderRadius,
+    border: "1px solid ".concat(_theme.commonStyles.colors.borderMedium),
+    boxShadow: _theme.commonStyles.shadows.elevation,
+    overflow: 'hidden'
+  }, additionalStyles);
+};
+
+/**
+ * Génère des styles pour les en-têtes de composants
+ */
+const getHeaderStyles = exports.getHeaderStyles = function getHeaderStyles() {
+  let additionalStyles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return _objectSpread({
+    backgroundColor: _theme.commonStyles.colors.headerBackground,
+    padding: '12px 16px',
+    fontWeight: 600,
+    fontSize: _theme.commonStyles.typography.fontSizeMedium,
+    textTransform: 'uppercase',
+    letterSpacing: _theme.commonStyles.typography.letterSpacing,
+    borderBottom: "1px solid ".concat(_theme.commonStyles.colors.borderLight),
+    minHeight: _theme.commonStyles.sizes.headerHeight,
+    display: 'flex',
+    alignItems: 'center'
+  }, additionalStyles);
+};
+
+/**
+ * Génère des styles pour les boutons et éléments d'action
+ */
+const getActionStyles = exports.getActionStyles = function getActionStyles() {
+  let additionalStyles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return _objectSpread({
+    borderRadius: '4px',
+    transition: _theme.commonStyles.transitions.hover,
+    fontSize: _theme.commonStyles.typography.fontSizeDefault,
+    padding: '6px 12px',
+    textTransform: 'none'
+  }, additionalStyles);
+};
+
+/**
+ * Génère des styles pour les lignes alternées (données tabulaires, listes, etc.)
+ */
+const getStripedRowStyles = exports.getStripedRowStyles = function getStripedRowStyles() {
+  let additionalStyles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return _objectSpread({
+    transition: _theme.commonStyles.transitions.hover,
+    '&:nth-of-type(odd)': {
+      backgroundColor: _theme.commonStyles.colors.rowBackgroundOdd
+    },
+    '&:nth-of-type(even)': {
+      backgroundColor: _theme.commonStyles.colors.rowBackgroundEven
+    },
+    '&:hover': {
+      backgroundColor: _theme.commonStyles.colors.hoverBackground,
+      boxShadow: "inset 0 0 0 1px ".concat(_theme.commonStyles.colors.borderFocus)
+    }
+  }, additionalStyles);
+};
+
+/**
+ * Génère des styles pour les éléments de formulaire
+ */
+const getFormElementStyles = exports.getFormElementStyles = function getFormElementStyles() {
+  let additionalStyles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return _objectSpread({
+    fontSize: _theme.commonStyles.typography.fontSizeDefault,
+    borderRadius: _theme.commonStyles.sizes.borderRadius,
+    '&:focus': {
+      boxShadow: "0 0 0 2px ".concat(_theme.commonStyles.colors.borderFocus)
+    }
+  }, additionalStyles);
+};
+
+/**
+ * Génère des styles pour les états de chargement
+ */
+const getLoadingStyles = exports.getLoadingStyles = function getLoadingStyles() {
+  let additionalStyles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return _objectSpread({
+    animation: 'fadeIn 0.3s ease-in-out',
+    '@keyframes fadeIn': {
+      '0%': {
+        opacity: 0.7
+      },
+      '100%': {
+        opacity: 1
+      }
+    }
+  }, additionalStyles);
+};
+
+/**
+ * Utilitaire pour appliquer les styles améliorés à un composant styled existant
+ */
+const applyImprovedStyles = (originalStyles, componentType) => {
+  switch (componentType) {
+    case 'container':
+      return _objectSpread(_objectSpread({}, originalStyles), getContainerStyles());
+    case 'header':
+      return _objectSpread(_objectSpread({}, originalStyles), getHeaderStyles());
+    case 'action':
+      return _objectSpread(_objectSpread({}, originalStyles), getActionStyles());
+    case 'row':
+      return _objectSpread(_objectSpread({}, originalStyles), getStripedRowStyles());
+    case 'form':
+      return _objectSpread(_objectSpread({}, originalStyles), getFormElementStyles());
+    case 'loading':
+      return _objectSpread(_objectSpread({}, originalStyles), getLoadingStyles());
+    default:
+      return originalStyles;
+  }
+};
+exports.applyImprovedStyles = applyImprovedStyles;