Add content wrapper to paginator

packages/primevue/src/paginator/Paginator.d.ts

@@ -73,6 +73,10 @@ export interface PaginatorPassThroughOptions<T = any> {
      * Used to pass attributes to the root's DOM element.
      */
     root?: PaginatorPassThroughOptionType<T>;
+    /**
+     * Used to pass attributes to the content DOM element.
+     */
+    content?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the content start's DOM element.
      */

packages/primevue/src/paginator/Paginator.vue

@@ -4,6 +4,7 @@
             <div v-if="$slots.start" :class="cx('contentStart')" v-bind="ptm('contentStart')">
                 <slot name="start" :state="currentState"></slot>
             </div>
+            <div :class="cx('content')" v-bind="ptm('content')">
                 <template v-for="item in value" :key="item">
                     <FirstPageLink
                         v-if="item === 'FirstPageLink'"
@@ -79,6 +80,7 @@
                     />
                     <JumpToPageInput v-else-if="item === 'JumpToPageInput'" :page="currentPage" @page-change="changePage($event)" :disabled="empty" :unstyled="unstyled" :pt="pt" />
                 </template>
+            </div>
             <div v-if="$slots.end" :class="cx('contentEnd')" v-bind="ptm('contentEnd')">
                 <slot name="end" :state="currentState"></slot>
             </div>

packages/primevue/src/paginator/style/PaginatorStyle.js

@@ -13,6 +13,14 @@ const theme = ({ dt }) => `
     gap: ${dt('paginator.gap')};
 }
 
+.p-paginator-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: ${dt('paginator.gap')};
+}
+
 .p-paginator-content-start {
     margin-right: auto;
 }
@@ -92,6 +100,7 @@ const classes = {
             [`p-paginator-${key}`]: instance.hasBreakpoints()
         }
     ],
+    content: 'p-paginator-content',
     contentStart: 'p-paginator-content-start',
     contentEnd: 'p-paginator-content-end',
     first: ({ instance }) => [