@elliemae/ds-pagination 3.51.0-rc.0 → 3.51.0-rc.10

package/dist/cjs/DSPaginationDefinitions.js

@@ -33,6 +33,7 @@ __export(DSPaginationDefinitions_exports, {
   PagePrevButtonName: () => PagePrevButtonName,
   PaginationContainerName: () => PaginationContainerName,
   PaginationSeparatorName: () => PaginationSeparatorName,
+  PaginationSlots: () => PaginationSlots,
   PaginatorName: () => PaginatorName,
   PerPageSelectorName: () => PerPageSelectorName
 });
@@ -45,4 +46,9 @@ const PagePrevButtonName = "DSPagePrevButton";
 const PageNextButtonName = "DSPageNextButton";
 const PaginatorName = "DSPaginator";
 const PaginationSeparatorName = "DSPaginationSeparator";
+const PaginationSlots = {
+  ROOT: "root",
+  WRAPPER: "wrapper",
+  SEPARATOR: "separator"
+};
 //# sourceMappingURL=DSPaginationDefinitions.js.map

package/dist/cjs/DSPaginationDefinitions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSPaginationDefinitions.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export const DSPaginationName = 'DSPagination';\n\nexport const PaginationContainerName = 'DSPaginationContainer';\n\nexport const PerPageSelectorName = 'DSPerPageSelector';\n\nexport const PagePrevButtonName = 'DSPagePrevButton';\n\nexport const PageNextButtonName = 'DSPageNextButton';\n\nexport const PaginatorName = 'DSPaginator';\n\nexport const PaginationSeparatorName = 'DSPaginationSeparator';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,mBAAmB;AAEzB,MAAM,0BAA0B;AAEhC,MAAM,sBAAsB;AAE5B,MAAM,qBAAqB;AAE3B,MAAM,qBAAqB;AAE3B,MAAM,gBAAgB;AAEtB,MAAM,0BAA0B;",
+  "sourcesContent": ["export const DSPaginationName = 'DSPagination';\n\nexport const PaginationContainerName = 'DSPaginationContainer';\n\nexport const PerPageSelectorName = 'DSPerPageSelector';\n\nexport const PagePrevButtonName = 'DSPagePrevButton';\n\nexport const PageNextButtonName = 'DSPageNextButton';\n\nexport const PaginatorName = 'DSPaginator';\n\nexport const PaginationSeparatorName = 'DSPaginationSeparator';\n\nexport const PaginationSlots = {\n  ROOT: 'root',\n  WRAPPER: 'wrapper',\n  SEPARATOR: 'separator',\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,mBAAmB;AAEzB,MAAM,0BAA0B;AAEhC,MAAM,sBAAsB;AAE5B,MAAM,qBAAqB;AAE3B,MAAM,qBAAqB;AAE3B,MAAM,gBAAgB;AAEtB,MAAM,0BAA0B;AAEhC,MAAM,kBAAkB;AAAA,EAC7B,MAAM;AAAA,EACN,SAAS;AAAA,EACT,WAAW;AACb;",
   "names": []
 }

package/dist/cjs/PaginationDataTestID.js

@@ -37,6 +37,8 @@ const PAGINATION_DATA_TESTID = {
   NEXT_BUTTON: "data-table-pagination-next-button",
   CONTAINER: "data-table-pagination-container",
   PER_PAGE_SELECTOR: "ds-pagination-per-page-selector",
-  PAGINATOR: "ds-pagination-paginator"
+  PAGINATOR: "ds-pagination-paginator",
+  SEPARATOR: "ds-pagination-separator",
+  WRAPPER: "ds-pagination-wrapper"
 };
 //# sourceMappingURL=PaginationDataTestID.js.map

package/dist/cjs/PaginationDataTestID.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/PaginationDataTestID.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export const PAGINATION_DATA_TESTID = {\n  PREVIOUS_BUTTON: 'data-table-pagination-prev-button',\n  NEXT_BUTTON: 'data-table-pagination-next-button',\n  CONTAINER: 'data-table-pagination-container',\n  PER_PAGE_SELECTOR: 'ds-pagination-per-page-selector',\n  PAGINATOR: 'ds-pagination-paginator',\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,yBAAyB;AAAA,EACpC,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,WAAW;AACb;",
+  "sourcesContent": ["export const PAGINATION_DATA_TESTID = {\n  PREVIOUS_BUTTON: 'data-table-pagination-prev-button',\n  NEXT_BUTTON: 'data-table-pagination-next-button',\n  CONTAINER: 'data-table-pagination-container',\n  PER_PAGE_SELECTOR: 'ds-pagination-per-page-selector',\n  PAGINATOR: 'ds-pagination-paginator',\n  SEPARATOR: 'ds-pagination-separator',\n  WRAPPER: 'ds-pagination-wrapper',\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,yBAAyB;AAAA,EACpC,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,WAAW;AAAA,EACX,WAAW;AAAA,EACX,SAAS;AACX;",
   "names": []
 }

package/dist/cjs/index.js

@@ -35,6 +35,7 @@ __export(src_exports, {
   DSPagination: () => import_Pagination.DSPagination,
   DSPaginationContainer: () => import_parts.DSPaginationContainer,
   DSPaginationContainerWithSchema: () => import_parts.DSPaginationContainerWithSchema,
+  DSPaginationName: () => import_DSPaginationDefinitions2.DSPaginationName,
   DSPaginationSeparator: () => import_styled2.DSPaginationSeparator,
   DSPaginationSeparatorWithSchema: () => DSPaginationSeparatorWithSchema,
   DSPaginationWithSchema: () => import_Pagination.DSPaginationWithSchema,
@@ -42,7 +43,8 @@ __export(src_exports, {
   DSPaginatorWithSchema: () => import_parts.DSPaginatorWithSchema,
   DSPerPageSelector: () => import_parts.DSPerPageSelector,
   DSPerPageSelectorWithSchema: () => import_parts.DSPerPageSelectorWithSchema,
-  PAGINATION_DATA_TESTID: () => import_PaginationDataTestID.PAGINATION_DATA_TESTID
+  PAGINATION_DATA_TESTID: () => import_PaginationDataTestID.PAGINATION_DATA_TESTID,
+  PaginationSlots: () => import_DSPaginationDefinitions2.PaginationSlots
 });
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
@@ -53,6 +55,7 @@ var import_DSPaginationDefinitions = require("./DSPaginationDefinitions.js");
 var import_Pagination = require("./Pagination.js");
 var import_parts = require("./parts/index.js");
 var import_styled2 = require("./styled.js");
+var import_DSPaginationDefinitions2 = require("./DSPaginationDefinitions.js");
 var import_PaginationDataTestID = require("./PaginationDataTestID.js");
 import_styled.DSPaginationSeparator.propTypes = import_react_desc_prop_types.DSPaginationStyledPartPropTypesSchema;
 import_styled.DSPaginationSeparator.displayName = import_DSPaginationDefinitions.PaginationSeparatorName;

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type {} from '@xstyled/util';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSPaginationSeparator } from './styled.js';\nimport { DSPaginationStyledPartPropTypesSchema } from './react-desc-prop-types.js';\nimport { PaginationSeparatorName } from './DSPaginationDefinitions.js';\n\nDSPaginationSeparator.propTypes = DSPaginationStyledPartPropTypesSchema;\nDSPaginationSeparator.displayName = PaginationSeparatorName;\nconst DSPaginationSeparatorWithSchema = describe(DSPaginationSeparator as React.FC).description('Pagination Separator');\n\nexport { DSPagination, DSPaginationWithSchema } from './Pagination.js';\nexport {\n  DSPageNextButton,\n  DSPageNextButtonWithSchema,\n  DSPagePrevButton,\n  DSPagePrevButtonWithSchema,\n  DSPaginationContainer,\n  DSPaginationContainerWithSchema,\n  DSPerPageSelector,\n  DSPerPageSelectorWithSchema,\n  DSPaginator,\n  DSPaginatorWithSchema,\n} from './parts/index.js';\n\nexport { DSPaginationSeparator } from './styled.js';\n\nexport { DSPaginationSeparatorWithSchema };\n\nexport { PAGINATION_DATA_TESTID } from './PaginationDataTestID.js';\n\nexport type { DSPaginationT } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAyB;AACzB,oBAAsC;AACtC,mCAAsD;AACtD,qCAAwC;AAMxC,wBAAqD;AACrD,mBAWO;AAEP,IAAAA,iBAAsC;AAItC,kCAAuC;AAtBvC,oCAAsB,YAAY;AAClC,oCAAsB,cAAc;AACpC,MAAM,sCAAkC,kCAAS,mCAAiC,EAAE,YAAY,sBAAsB;",
-  "names": ["import_styled"]
+  "sourcesContent": ["import { describe } from '@elliemae/ds-props-helpers';\nimport type {} from '@xstyled/util';\nimport { DSPaginationSeparator } from './styled.js';\nimport { DSPaginationStyledPartPropTypesSchema } from './react-desc-prop-types.js';\nimport { PaginationSeparatorName } from './DSPaginationDefinitions.js';\n\nDSPaginationSeparator.propTypes = DSPaginationStyledPartPropTypesSchema;\nDSPaginationSeparator.displayName = PaginationSeparatorName;\nconst DSPaginationSeparatorWithSchema = describe(DSPaginationSeparator as React.FC).description('Pagination Separator');\n\nexport { DSPagination, DSPaginationWithSchema } from './Pagination.js';\nexport {\n  DSPageNextButton,\n  DSPageNextButtonWithSchema,\n  DSPagePrevButton,\n  DSPagePrevButtonWithSchema,\n  DSPaginationContainer,\n  DSPaginationContainerWithSchema,\n  DSPerPageSelector,\n  DSPerPageSelectorWithSchema,\n  DSPaginator,\n  DSPaginatorWithSchema,\n} from './parts/index.js';\n\nexport { DSPaginationSeparator } from './styled.js';\n\nexport { DSPaginationName, PaginationSlots } from './DSPaginationDefinitions.js';\n\nexport { DSPaginationSeparatorWithSchema };\n\nexport { PAGINATION_DATA_TESTID } from './PaginationDataTestID.js';\n\nexport type { DSPaginationT } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAyB;AAEzB,oBAAsC;AACtC,mCAAsD;AACtD,qCAAwC;AAMxC,wBAAqD;AACrD,mBAWO;AAEP,IAAAA,iBAAsC;AAEtC,IAAAC,kCAAkD;AAIlD,kCAAuC;AAxBvC,oCAAsB,YAAY;AAClC,oCAAsB,cAAc;AACpC,MAAM,sCAAkC,kCAAS,mCAAiC,EAAE,YAAY,sBAAsB;",
+  "names": ["import_styled", "import_DSPaginationDefinitions"]
 }

package/dist/cjs/parts/DSPaginationContainer.js

@@ -42,14 +42,16 @@ var import_DSPaginationDefinitions = require("../DSPaginationDefinitions.js");
 const DSPaginationContainer = (props) => {
   const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(props);
   const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(props);
+  const ownerPropsConfig = (0, import_ds_props_helpers.useOwnerProps)(props);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_styled.StyledPaginationContainer,
     {
       "data-testid": import_PaginationDataTestID.PAGINATION_DATA_TESTID.CONTAINER,
       ...globalAttributes,
       ...xstyledProps,
+      ...ownerPropsConfig,
       cols: ["minmax(auto, 80%)"],
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledPaginationWrapper, { children: props.children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledPaginationWrapper, { ...ownerPropsConfig, children: props.children })
     }
   );
 };

package/dist/cjs/parts/DSPaginationContainer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/DSPaginationContainer.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { describe, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport type { DSGridT } from '@elliemae/ds-grid';\nimport { PAGINATION_DATA_TESTID } from '../PaginationDataTestID.js';\nimport { StyledPaginationContainer, StyledPaginationWrapper } from '../styled.js';\nimport { DSPaginationContainerPropTypesSchema } from '../react-desc-prop-types.js';\nimport { PaginationContainerName } from '../DSPaginationDefinitions.js';\nimport type { DSPaginationT } from '../react-desc-prop-types.js';\n\nexport const DSPaginationContainer: React.ComponentType<DSPaginationT.ContainerProps> = (props) => {\n  const globalAttributes = useGetGlobalAttributes<DSPaginationT.ContainerProps, HTMLDivElement, DSGridT.Props>(props);\n  const xstyledProps = useGetXstyledProps(props);\n\n  return (\n    <StyledPaginationContainer\n      data-testid={PAGINATION_DATA_TESTID.CONTAINER}\n      {...globalAttributes}\n      {...xstyledProps}\n      cols={['minmax(auto, 80%)']}\n    >\n      <StyledPaginationWrapper>{props.children}</StyledPaginationWrapper>\n    </StyledPaginationContainer>\n  );\n};\n\nDSPaginationContainer.displayName = PaginationContainerName;\nexport const DSPaginationContainerWithSchema = describe(DSPaginationContainer).description('Per Page Selector');\nDSPaginationContainerWithSchema.propTypes = DSPaginationContainerPropTypesSchema;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBjB;AAnBN,8BAAqE;AAErE,kCAAuC;AACvC,oBAAmE;AACnE,mCAAqD;AACrD,qCAAwC;AAGjC,MAAM,wBAA2E,CAAC,UAAU;AACjG,QAAM,uBAAmB,gDAAoF,KAAK;AAClH,QAAM,mBAAe,4CAAmB,KAAK;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,mDAAuB;AAAA,MACnC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,MAAM,CAAC,mBAAmB;AAAA,MAE1B,sDAAC,yCAAyB,gBAAM,UAAS;AAAA;AAAA,EAC3C;AAEJ;AAEA,sBAAsB,cAAc;AAC7B,MAAM,sCAAkC,kCAAS,qBAAqB,EAAE,YAAY,mBAAmB;AAC9G,gCAAgC,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { describe, useGetGlobalAttributes, useGetXstyledProps, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport type { DSGridT } from '@elliemae/ds-grid';\nimport { PAGINATION_DATA_TESTID } from '../PaginationDataTestID.js';\nimport { StyledPaginationContainer, StyledPaginationWrapper } from '../styled.js';\nimport { DSPaginationContainerPropTypesSchema } from '../react-desc-prop-types.js';\nimport { PaginationContainerName } from '../DSPaginationDefinitions.js';\nimport type { DSPaginationT } from '../react-desc-prop-types.js';\n\nexport const DSPaginationContainer: React.ComponentType<DSPaginationT.ContainerProps> = (props) => {\n  const globalAttributes = useGetGlobalAttributes<DSPaginationT.ContainerProps, HTMLDivElement, DSGridT.Props>(props);\n  const xstyledProps = useGetXstyledProps(props);\n\n  const ownerPropsConfig = useOwnerProps(props);\n\n  return (\n    <StyledPaginationContainer\n      data-testid={PAGINATION_DATA_TESTID.CONTAINER}\n      {...globalAttributes}\n      {...xstyledProps}\n      {...ownerPropsConfig}\n      cols={['minmax(auto, 80%)']}\n    >\n      <StyledPaginationWrapper {...ownerPropsConfig}>{props.children}</StyledPaginationWrapper>\n    </StyledPaginationContainer>\n  );\n};\n\nDSPaginationContainer.displayName = PaginationContainerName;\nexport const DSPaginationContainerWithSchema = describe(DSPaginationContainer).description('Per Page Selector');\nDSPaginationContainerWithSchema.propTypes = DSPaginationContainerPropTypesSchema;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuBjB;AAtBN,8BAAoF;AAEpF,kCAAuC;AACvC,oBAAmE;AACnE,mCAAqD;AACrD,qCAAwC;AAGjC,MAAM,wBAA2E,CAAC,UAAU;AACjG,QAAM,uBAAmB,gDAAoF,KAAK;AAClH,QAAM,mBAAe,4CAAmB,KAAK;AAE7C,QAAM,uBAAmB,uCAAc,KAAK;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,mDAAuB;AAAA,MACnC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,MAAM,CAAC,mBAAmB;AAAA,MAE1B,sDAAC,yCAAyB,GAAG,kBAAmB,gBAAM,UAAS;AAAA;AAAA,EACjE;AAEJ;AAEA,sBAAsB,cAAc;AAC7B,MAAM,sCAAkC,kCAAS,qBAAqB,EAAE,YAAY,mBAAmB;AAC9G,gCAAgC,YAAY;",
   "names": []
 }

package/dist/cjs/parts/PaginationContent.js

@@ -33,6 +33,7 @@ __export(PaginationContent_exports, {
 module.exports = __toCommonJS(PaginationContent_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_DSPaginationContainer = require("./DSPaginationContainer.js");
 var import_styled = require("../styled.js");
 var import_DSPerPageSelector = require("./DSPerPageSelector/index.js");
@@ -59,6 +60,7 @@ const PaginationContent = (props) => {
     perPageStep,
     minPerPage
   } = props;
+  const ownerPropsConfig = (0, import_ds_props_helpers.useOwnerProps)(props);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DSPaginationContainer.DSPaginationContainer, { ...props, children: [
     showPerPageSelector && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -72,10 +74,10 @@ const PaginationContent = (props) => {
           minPerPage
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.DSPaginationSeparator, { mr: 24 })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.DSPaginationSeparator, { mr: 24, ...ownerPropsConfig })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSPagePrevButton.DSPagePrevButton, { canPreviousPage, onPreviousPage }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.DSPaginationSeparator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.DSPaginationSeparator, { ...ownerPropsConfig }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_DSPaginator.DSPaginator,
       {
@@ -87,7 +89,7 @@ const PaginationContent = (props) => {
         pageDetailsTitle
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.DSPaginationSeparator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.DSPaginationSeparator, { ...ownerPropsConfig }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSPageNextButton.DSPageNextButton, { canNextPage, onNextPage })
   ] });
 };

package/dist/cjs/parts/PaginationContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/PaginationContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { DSPaginationContainer } from './DSPaginationContainer.js';\nimport { DSPaginationSeparator } from '../styled.js';\nimport { DSPerPageSelector } from './DSPerPageSelector/index.js';\nimport { DSPaginator } from './DSPaginator/index.js';\nimport { DSPagePrevButton } from './DSPagePrevButton.js';\nimport { DSPageNextButton } from './DSPageNextButton.js';\nimport type { DSPaginationT } from '../react-desc-prop-types.js';\n\nexport const PaginationContent: React.ComponentType<DSPaginationT.InternalProps> = (props) => {\n  const {\n    pageIndex,\n    pageSize,\n    canPreviousPage,\n    canNextPage,\n    onPageSizeChange,\n    onNextPage,\n    onPreviousPage,\n    onPageChange,\n    pageCount,\n    isLoadingPageCount,\n    showPerPageSelector,\n    pageDetails,\n    pageDetailsTitle,\n    perPageOptions,\n    maxPerPage,\n    perPageStep,\n    minPerPage,\n  } = props;\n\n  return (\n    <DSPaginationContainer {...props}>\n      {showPerPageSelector && (\n        <>\n          <DSPerPageSelector\n            pageSize={pageSize}\n            onPageSizeChange={onPageSizeChange}\n            perPageOptions={perPageOptions}\n            maxPerPage={maxPerPage}\n            perPageStep={perPageStep}\n            minPerPage={minPerPage}\n          />\n          <DSPaginationSeparator mr={24} />\n        </>\n      )}\n      <DSPagePrevButton canPreviousPage={canPreviousPage} onPreviousPage={onPreviousPage} />\n      <DSPaginationSeparator />\n\n      <DSPaginator\n        pageCount={pageCount}\n        isLoadingPageCount={isLoadingPageCount}\n        pageIndex={pageIndex}\n        onPageChange={onPageChange}\n        pageDetails={pageDetails}\n        pageDetailsTitle={pageDetailsTitle}\n      />\n      <DSPaginationSeparator />\n\n      <DSPageNextButton canNextPage={canNextPage} onNextPage={onNextPage} />\n    </DSPaginationContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCf;AAhCR,mCAAsC;AACtC,oBAAsC;AACtC,+BAAkC;AAClC,yBAA4B;AAC5B,8BAAiC;AACjC,8BAAiC;AAG1B,MAAM,oBAAsE,CAAC,UAAU;AAC5F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,SACE,6CAAC,sDAAuB,GAAG,OACxB;AAAA,2BACC,4EACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MACA,4CAAC,uCAAsB,IAAI,IAAI;AAAA,OACjC;AAAA,IAEF,4CAAC,4CAAiB,iBAAkC,gBAAgC;AAAA,IACpF,4CAAC,uCAAsB;AAAA,IAEvB;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IACA,4CAAC,uCAAsB;AAAA,IAEvB,4CAAC,4CAAiB,aAA0B,YAAwB;AAAA,KACtE;AAEJ;",
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { DSPaginationContainer } from './DSPaginationContainer.js';\nimport { DSPaginationSeparator } from '../styled.js';\nimport { DSPerPageSelector } from './DSPerPageSelector/index.js';\nimport { DSPaginator } from './DSPaginator/index.js';\nimport { DSPagePrevButton } from './DSPagePrevButton.js';\nimport { DSPageNextButton } from './DSPageNextButton.js';\nimport type { DSPaginationT } from '../react-desc-prop-types.js';\n\nexport const PaginationContent: React.ComponentType<DSPaginationT.InternalProps> = (props) => {\n  const {\n    pageIndex,\n    pageSize,\n    canPreviousPage,\n    canNextPage,\n    onPageSizeChange,\n    onNextPage,\n    onPreviousPage,\n    onPageChange,\n    pageCount,\n    isLoadingPageCount,\n    showPerPageSelector,\n    pageDetails,\n    pageDetailsTitle,\n    perPageOptions,\n    maxPerPage,\n    perPageStep,\n    minPerPage,\n  } = props;\n\n  const ownerPropsConfig = useOwnerProps(props);\n\n  return (\n    <DSPaginationContainer {...props}>\n      {showPerPageSelector && (\n        <>\n          <DSPerPageSelector\n            pageSize={pageSize}\n            onPageSizeChange={onPageSizeChange}\n            perPageOptions={perPageOptions}\n            maxPerPage={maxPerPage}\n            perPageStep={perPageStep}\n            minPerPage={minPerPage}\n          />\n          <DSPaginationSeparator mr={24} {...ownerPropsConfig} />\n        </>\n      )}\n      <DSPagePrevButton canPreviousPage={canPreviousPage} onPreviousPage={onPreviousPage} />\n      <DSPaginationSeparator {...ownerPropsConfig} />\n\n      <DSPaginator\n        pageCount={pageCount}\n        isLoadingPageCount={isLoadingPageCount}\n        pageIndex={pageIndex}\n        onPageChange={onPageChange}\n        pageDetails={pageDetails}\n        pageDetailsTitle={pageDetailsTitle}\n      />\n      <DSPaginationSeparator {...ownerPropsConfig} />\n\n      <DSPageNextButton canNextPage={canNextPage} onNextPage={onNextPage} />\n    </DSPaginationContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqCf;AAnCR,8BAA8B;AAC9B,mCAAsC;AACtC,oBAAsC;AACtC,+BAAkC;AAClC,yBAA4B;AAC5B,8BAAiC;AACjC,8BAAiC;AAG1B,MAAM,oBAAsE,CAAC,UAAU;AAC5F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,uBAAmB,uCAAc,KAAK;AAE5C,SACE,6CAAC,sDAAuB,GAAG,OACxB;AAAA,2BACC,4EACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MACA,4CAAC,uCAAsB,IAAI,IAAK,GAAG,kBAAkB;AAAA,OACvD;AAAA,IAEF,4CAAC,4CAAiB,iBAAkC,gBAAgC;AAAA,IACpF,4CAAC,uCAAuB,GAAG,kBAAkB;AAAA,IAE7C;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IACA,4CAAC,uCAAuB,GAAG,kBAAkB;AAAA,IAE7C,4CAAC,4CAAiB,aAA0B,YAAwB;AAAA,KACtE;AAEJ;",
   "names": []
 }

package/dist/cjs/styled.js

@@ -40,6 +40,7 @@ var React = __toESM(require("react"));
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_button_v2 = require("@elliemae/ds-button-v2");
 var import_ds_system = require("@elliemae/ds-system");
+var import_DSPaginationDefinitions = require("./DSPaginationDefinitions.js");
 const styledFocusCss = import_ds_system.css`
   &:after {
     display: block;
@@ -54,7 +55,7 @@ const styledFocusCss = import_ds_system.css`
     z-index: 7;
   }
 `;
-const StyledPaginationContainer = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+const StyledPaginationContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSPaginationDefinitions.DSPaginationName, slot: import_DSPaginationDefinitions.PaginationSlots.ROOT })`
   height: 42px;
   max-width: 100%;
   align-items: center;
@@ -63,13 +64,13 @@ const StyledPaginationContainer = (0, import_ds_system.styled)(import_ds_grid.Gr
   position: relative;
   ${import_ds_system.xStyledCommonProps}
 `;
-const StyledPaginationWrapper = import_ds_system.styled.div`
+const StyledPaginationWrapper = (0, import_ds_system.styled)("div", { name: import_DSPaginationDefinitions.DSPaginationName, slot: import_DSPaginationDefinitions.PaginationSlots.WRAPPER })`
   display: grid;
   grid-auto-flow: column;
   justify-content: center;
   align-items: center;
 `;
-const DSPaginationSeparator = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+const DSPaginationSeparator = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSPaginationDefinitions.DSPaginationName, slot: import_DSPaginationDefinitions.PaginationSlots.SEPARATOR })`
   background-color: ${(props) => props.theme.colors.neutral[300]};
   width: 1px;
   height: 30px;

package/dist/cjs/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { xStyledCommonProps, styled, css } from '@elliemae/ds-system';\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport type {} from '@xstyled/system';\n\nconst styledFocusCss = css`\n  &:after {\n    display: block;\n    content: ' ';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    pointer-events: none;\n    z-index: 7;\n  }\n`;\n\nexport const StyledPaginationContainer = styled(Grid)<React.ComponentProps<typeof Grid> & XstyledProps>`\n  height: 42px;\n  max-width: 100%;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.5);\n  position: relative;\n  ${xStyledCommonProps}\n`;\n\nexport const StyledPaginationWrapper = styled.div`\n  display: grid;\n  grid-auto-flow: column;\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const DSPaginationSeparator = styled(Grid)<React.ComponentProps<typeof Grid> & XstyledProps>`\n  background-color: ${(props) => props.theme.colors.neutral[300]};\n  width: 1px;\n  height: 30px;\n  ${xStyledCommonProps}\n`;\n\nexport const InvisibleDiv = styled.div`\n  opacity: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  position: absolute;\n`;\n\nexport const PaginationDropdownButton = styled(DSButtonV2)`\n  height: 42px;\n  display: grid;\n  grid-auto-flow: column;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  padding-left: 16px;\n  padding-right: 16px;\n  grid-gap: 8px;\n  font-size: 13px;\n  color: neutral-700;\n  cursor: pointer;\n  border-radius: 0;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  :focus {\n    ${styledFocusCss}\n  }\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n  white-space: nowrap;\n`;\n\nexport const PreviousNextPageButton = styled(DSButtonV2)`\n  height: 42px;\n  display: grid;\n  place-items: center;\n  position: relative;\n  padding-left: 8px;\n  padding-right: 8px;\n  border-radius: 0;\n  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n  :focus {\n    ${styledFocusCss}\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,qBAAqB;AACrB,0BAA2B;AAC3B,uBAAgD;AAIhD,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAMvD,MAAM,gCAA4B,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOhD,mCAAkB;AAAA;AAGf,MAAM,0BAA0B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvC,MAAM,4BAAwB,yBAAO,mBAAI;AAAA,sBAC1B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA,IAG5D,mCAAkB;AAAA;AAGf,MAAM,eAAe,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ5B,MAAM,+BAA2B,yBAAO,8BAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAcxC,CAAC,UAAU,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA,MAErD,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQb,MAAM,6BAAyB,yBAAO,8BAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQ3C,CAAC,UAAW,MAAM,WAAW,gBAAgB,SAAU;AAAA;AAAA,MAE7D,cAAc;AAAA;AAAA;",
+  "sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { xStyledCommonProps, styled, css } from '@elliemae/ds-system';\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport type {} from '@xstyled/system';\nimport { DSPaginationName, PaginationSlots } from './DSPaginationDefinitions.js';\n\nconst styledFocusCss = css`\n  &:after {\n    display: block;\n    content: ' ';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    pointer-events: none;\n    z-index: 7;\n  }\n`;\n\nexport const StyledPaginationContainer = styled(Grid, { name: DSPaginationName, slot: PaginationSlots.ROOT })<\n  React.ComponentProps<typeof Grid> & XstyledProps\n>`\n  height: 42px;\n  max-width: 100%;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.5);\n  position: relative;\n  ${xStyledCommonProps}\n`;\n\nexport const StyledPaginationWrapper = styled('div', { name: DSPaginationName, slot: PaginationSlots.WRAPPER })`\n  display: grid;\n  grid-auto-flow: column;\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const DSPaginationSeparator = styled(Grid, { name: DSPaginationName, slot: PaginationSlots.SEPARATOR })<\n  React.ComponentProps<typeof Grid> & XstyledProps\n>`\n  background-color: ${(props) => props.theme.colors.neutral[300]};\n  width: 1px;\n  height: 30px;\n  ${xStyledCommonProps}\n`;\n\nexport const InvisibleDiv = styled.div`\n  opacity: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  position: absolute;\n`;\n\nexport const PaginationDropdownButton = styled(DSButtonV2)`\n  height: 42px;\n  display: grid;\n  grid-auto-flow: column;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  padding-left: 16px;\n  padding-right: 16px;\n  grid-gap: 8px;\n  font-size: 13px;\n  color: neutral-700;\n  cursor: pointer;\n  border-radius: 0;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  :focus {\n    ${styledFocusCss}\n  }\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n  white-space: nowrap;\n`;\n\nexport const PreviousNextPageButton = styled(DSButtonV2)`\n  height: 42px;\n  display: grid;\n  place-items: center;\n  position: relative;\n  padding-left: 8px;\n  padding-right: 8px;\n  border-radius: 0;\n  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n  :focus {\n    ${styledFocusCss}\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,qBAAqB;AACrB,0BAA2B;AAC3B,uBAAgD;AAGhD,qCAAkD;AAElD,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAMvD,MAAM,gCAA4B,yBAAO,qBAAM,EAAE,MAAM,iDAAkB,MAAM,+CAAgB,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASxG,mCAAkB;AAAA;AAGf,MAAM,8BAA0B,yBAAO,OAAO,EAAE,MAAM,iDAAkB,MAAM,+CAAgB,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvG,MAAM,4BAAwB,yBAAO,qBAAM,EAAE,MAAM,iDAAkB,MAAM,+CAAgB,UAAU,CAAC;AAAA,sBAGvF,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA,IAG5D,mCAAkB;AAAA;AAGf,MAAM,eAAe,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ5B,MAAM,+BAA2B,yBAAO,8BAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAcxC,CAAC,UAAU,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA,MAErD,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQb,MAAM,6BAAyB,yBAAO,8BAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQ3C,CAAC,UAAW,MAAM,WAAW,gBAAgB,SAAU;AAAA;AAAA,MAE7D,cAAc;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/DSPaginationDefinitions.js

@@ -6,12 +6,18 @@ const PagePrevButtonName = "DSPagePrevButton";
 const PageNextButtonName = "DSPageNextButton";
 const PaginatorName = "DSPaginator";
 const PaginationSeparatorName = "DSPaginationSeparator";
+const PaginationSlots = {
+  ROOT: "root",
+  WRAPPER: "wrapper",
+  SEPARATOR: "separator"
+};
 export {
   DSPaginationName,
   PageNextButtonName,
   PagePrevButtonName,
   PaginationContainerName,
   PaginationSeparatorName,
+  PaginationSlots,
   PaginatorName,
   PerPageSelectorName
 };

package/dist/esm/DSPaginationDefinitions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSPaginationDefinitions.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSPaginationName = 'DSPagination';\n\nexport const PaginationContainerName = 'DSPaginationContainer';\n\nexport const PerPageSelectorName = 'DSPerPageSelector';\n\nexport const PagePrevButtonName = 'DSPagePrevButton';\n\nexport const PageNextButtonName = 'DSPageNextButton';\n\nexport const PaginatorName = 'DSPaginator';\n\nexport const PaginationSeparatorName = 'DSPaginationSeparator';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,mBAAmB;AAEzB,MAAM,0BAA0B;AAEhC,MAAM,sBAAsB;AAE5B,MAAM,qBAAqB;AAE3B,MAAM,qBAAqB;AAE3B,MAAM,gBAAgB;AAEtB,MAAM,0BAA0B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSPaginationName = 'DSPagination';\n\nexport const PaginationContainerName = 'DSPaginationContainer';\n\nexport const PerPageSelectorName = 'DSPerPageSelector';\n\nexport const PagePrevButtonName = 'DSPagePrevButton';\n\nexport const PageNextButtonName = 'DSPageNextButton';\n\nexport const PaginatorName = 'DSPaginator';\n\nexport const PaginationSeparatorName = 'DSPaginationSeparator';\n\nexport const PaginationSlots = {\n  ROOT: 'root',\n  WRAPPER: 'wrapper',\n  SEPARATOR: 'separator',\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,mBAAmB;AAEzB,MAAM,0BAA0B;AAEhC,MAAM,sBAAsB;AAE5B,MAAM,qBAAqB;AAE3B,MAAM,qBAAqB;AAE3B,MAAM,gBAAgB;AAEtB,MAAM,0BAA0B;AAEhC,MAAM,kBAAkB;AAAA,EAC7B,MAAM;AAAA,EACN,SAAS;AAAA,EACT,WAAW;AACb;",
   "names": []
 }

package/dist/esm/PaginationDataTestID.js

@@ -4,7 +4,9 @@ const PAGINATION_DATA_TESTID = {
   NEXT_BUTTON: "data-table-pagination-next-button",
   CONTAINER: "data-table-pagination-container",
   PER_PAGE_SELECTOR: "ds-pagination-per-page-selector",
-  PAGINATOR: "ds-pagination-paginator"
+  PAGINATOR: "ds-pagination-paginator",
+  SEPARATOR: "ds-pagination-separator",
+  WRAPPER: "ds-pagination-wrapper"
 };
 export {
   PAGINATION_DATA_TESTID

package/dist/esm/PaginationDataTestID.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/PaginationDataTestID.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const PAGINATION_DATA_TESTID = {\n  PREVIOUS_BUTTON: 'data-table-pagination-prev-button',\n  NEXT_BUTTON: 'data-table-pagination-next-button',\n  CONTAINER: 'data-table-pagination-container',\n  PER_PAGE_SELECTOR: 'ds-pagination-per-page-selector',\n  PAGINATOR: 'ds-pagination-paginator',\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,yBAAyB;AAAA,EACpC,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,WAAW;AACb;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const PAGINATION_DATA_TESTID = {\n  PREVIOUS_BUTTON: 'data-table-pagination-prev-button',\n  NEXT_BUTTON: 'data-table-pagination-next-button',\n  CONTAINER: 'data-table-pagination-container',\n  PER_PAGE_SELECTOR: 'ds-pagination-per-page-selector',\n  PAGINATOR: 'ds-pagination-paginator',\n  SEPARATOR: 'ds-pagination-separator',\n  WRAPPER: 'ds-pagination-wrapper',\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,yBAAyB;AAAA,EACpC,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,WAAW;AAAA,EACX,WAAW;AAAA,EACX,SAAS;AACX;",
   "names": []
 }

package/dist/esm/index.js

@@ -20,6 +20,7 @@ import {
   DSPaginatorWithSchema
 } from "./parts/index.js";
 import { DSPaginationSeparator as DSPaginationSeparator2 } from "./styled.js";
+import { DSPaginationName, PaginationSlots } from "./DSPaginationDefinitions.js";
 import { PAGINATION_DATA_TESTID } from "./PaginationDataTestID.js";
 export {
   DSPageNextButton,
@@ -29,6 +30,7 @@ export {
   DSPagination,
   DSPaginationContainer,
   DSPaginationContainerWithSchema,
+  DSPaginationName,
   DSPaginationSeparator2 as DSPaginationSeparator,
   DSPaginationSeparatorWithSchema,
   DSPaginationWithSchema,
@@ -36,6 +38,7 @@ export {
   DSPaginatorWithSchema,
   DSPerPageSelector,
   DSPerPageSelectorWithSchema,
-  PAGINATION_DATA_TESTID
+  PAGINATION_DATA_TESTID,
+  PaginationSlots
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type {} from '@xstyled/util';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSPaginationSeparator } from './styled.js';\nimport { DSPaginationStyledPartPropTypesSchema } from './react-desc-prop-types.js';\nimport { PaginationSeparatorName } from './DSPaginationDefinitions.js';\n\nDSPaginationSeparator.propTypes = DSPaginationStyledPartPropTypesSchema;\nDSPaginationSeparator.displayName = PaginationSeparatorName;\nconst DSPaginationSeparatorWithSchema = describe(DSPaginationSeparator as React.FC).description('Pagination Separator');\n\nexport { DSPagination, DSPaginationWithSchema } from './Pagination.js';\nexport {\n  DSPageNextButton,\n  DSPageNextButtonWithSchema,\n  DSPagePrevButton,\n  DSPagePrevButtonWithSchema,\n  DSPaginationContainer,\n  DSPaginationContainerWithSchema,\n  DSPerPageSelector,\n  DSPerPageSelectorWithSchema,\n  DSPaginator,\n  DSPaginatorWithSchema,\n} from './parts/index.js';\n\nexport { DSPaginationSeparator } from './styled.js';\n\nexport { DSPaginationSeparatorWithSchema };\n\nexport { PAGINATION_DATA_TESTID } from './PaginationDataTestID.js';\n\nexport type { DSPaginationT } from './react-desc-prop-types.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,gBAAgB;AACzB,SAAS,6BAA6B;AACtC,SAAS,6CAA6C;AACtD,SAAS,+BAA+B;AAExC,sBAAsB,YAAY;AAClC,sBAAsB,cAAc;AACpC,MAAM,kCAAkC,SAAS,qBAAiC,EAAE,YAAY,sBAAsB;AAEtH,SAAS,cAAc,8BAA8B;AACrD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,yBAAAA,8BAA6B;AAItC,SAAS,8BAA8B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { describe } from '@elliemae/ds-props-helpers';\nimport type {} from '@xstyled/util';\nimport { DSPaginationSeparator } from './styled.js';\nimport { DSPaginationStyledPartPropTypesSchema } from './react-desc-prop-types.js';\nimport { PaginationSeparatorName } from './DSPaginationDefinitions.js';\n\nDSPaginationSeparator.propTypes = DSPaginationStyledPartPropTypesSchema;\nDSPaginationSeparator.displayName = PaginationSeparatorName;\nconst DSPaginationSeparatorWithSchema = describe(DSPaginationSeparator as React.FC).description('Pagination Separator');\n\nexport { DSPagination, DSPaginationWithSchema } from './Pagination.js';\nexport {\n  DSPageNextButton,\n  DSPageNextButtonWithSchema,\n  DSPagePrevButton,\n  DSPagePrevButtonWithSchema,\n  DSPaginationContainer,\n  DSPaginationContainerWithSchema,\n  DSPerPageSelector,\n  DSPerPageSelectorWithSchema,\n  DSPaginator,\n  DSPaginatorWithSchema,\n} from './parts/index.js';\n\nexport { DSPaginationSeparator } from './styled.js';\n\nexport { DSPaginationName, PaginationSlots } from './DSPaginationDefinitions.js';\n\nexport { DSPaginationSeparatorWithSchema };\n\nexport { PAGINATION_DATA_TESTID } from './PaginationDataTestID.js';\n\nexport type { DSPaginationT } from './react-desc-prop-types.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,gBAAgB;AAEzB,SAAS,6BAA6B;AACtC,SAAS,6CAA6C;AACtD,SAAS,+BAA+B;AAExC,sBAAsB,YAAY;AAClC,sBAAsB,cAAc;AACpC,MAAM,kCAAkC,SAAS,qBAAiC,EAAE,YAAY,sBAAsB;AAEtH,SAAS,cAAc,8BAA8B;AACrD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,yBAAAA,8BAA6B;AAEtC,SAAS,kBAAkB,uBAAuB;AAIlD,SAAS,8BAA8B;",
   "names": ["DSPaginationSeparator"]
 }

package/dist/esm/parts/DSPaginationContainer.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { describe, useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-props-helpers";
+import { describe, useGetGlobalAttributes, useGetXstyledProps, useOwnerProps } from "@elliemae/ds-props-helpers";
 import { PAGINATION_DATA_TESTID } from "../PaginationDataTestID.js";
 import { StyledPaginationContainer, StyledPaginationWrapper } from "../styled.js";
 import { DSPaginationContainerPropTypesSchema } from "../react-desc-prop-types.js";
@@ -8,14 +8,16 @@ import { PaginationContainerName } from "../DSPaginationDefinitions.js";
 const DSPaginationContainer = (props) => {
   const globalAttributes = useGetGlobalAttributes(props);
   const xstyledProps = useGetXstyledProps(props);
+  const ownerPropsConfig = useOwnerProps(props);
   return /* @__PURE__ */ jsx(
     StyledPaginationContainer,
     {
       "data-testid": PAGINATION_DATA_TESTID.CONTAINER,
       ...globalAttributes,
       ...xstyledProps,
+      ...ownerPropsConfig,
       cols: ["minmax(auto, 80%)"],
-      children: /* @__PURE__ */ jsx(StyledPaginationWrapper, { children: props.children })
+      children: /* @__PURE__ */ jsx(StyledPaginationWrapper, { ...ownerPropsConfig, children: props.children })
     }
   );
 };

package/dist/esm/parts/DSPaginationContainer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DSPaginationContainer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport type { DSGridT } from '@elliemae/ds-grid';\nimport { PAGINATION_DATA_TESTID } from '../PaginationDataTestID.js';\nimport { StyledPaginationContainer, StyledPaginationWrapper } from '../styled.js';\nimport { DSPaginationContainerPropTypesSchema } from '../react-desc-prop-types.js';\nimport { PaginationContainerName } from '../DSPaginationDefinitions.js';\nimport type { DSPaginationT } from '../react-desc-prop-types.js';\n\nexport const DSPaginationContainer: React.ComponentType<DSPaginationT.ContainerProps> = (props) => {\n  const globalAttributes = useGetGlobalAttributes<DSPaginationT.ContainerProps, HTMLDivElement, DSGridT.Props>(props);\n  const xstyledProps = useGetXstyledProps(props);\n\n  return (\n    <StyledPaginationContainer\n      data-testid={PAGINATION_DATA_TESTID.CONTAINER}\n      {...globalAttributes}\n      {...xstyledProps}\n      cols={['minmax(auto, 80%)']}\n    >\n      <StyledPaginationWrapper>{props.children}</StyledPaginationWrapper>\n    </StyledPaginationContainer>\n  );\n};\n\nDSPaginationContainer.displayName = PaginationContainerName;\nexport const DSPaginationContainerWithSchema = describe(DSPaginationContainer).description('Per Page Selector');\nDSPaginationContainerWithSchema.propTypes = DSPaginationContainerPropTypesSchema;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACoBjB;AAnBN,SAAS,UAAU,wBAAwB,0BAA0B;AAErE,SAAS,8BAA8B;AACvC,SAAS,2BAA2B,+BAA+B;AACnE,SAAS,4CAA4C;AACrD,SAAS,+BAA+B;AAGjC,MAAM,wBAA2E,CAAC,UAAU;AACjG,QAAM,mBAAmB,uBAAoF,KAAK;AAClH,QAAM,eAAe,mBAAmB,KAAK;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,uBAAuB;AAAA,MACnC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,MAAM,CAAC,mBAAmB;AAAA,MAE1B,8BAAC,2BAAyB,gBAAM,UAAS;AAAA;AAAA,EAC3C;AAEJ;AAEA,sBAAsB,cAAc;AAC7B,MAAM,kCAAkC,SAAS,qBAAqB,EAAE,YAAY,mBAAmB;AAC9G,gCAAgC,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useGetGlobalAttributes, useGetXstyledProps, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport type { DSGridT } from '@elliemae/ds-grid';\nimport { PAGINATION_DATA_TESTID } from '../PaginationDataTestID.js';\nimport { StyledPaginationContainer, StyledPaginationWrapper } from '../styled.js';\nimport { DSPaginationContainerPropTypesSchema } from '../react-desc-prop-types.js';\nimport { PaginationContainerName } from '../DSPaginationDefinitions.js';\nimport type { DSPaginationT } from '../react-desc-prop-types.js';\n\nexport const DSPaginationContainer: React.ComponentType<DSPaginationT.ContainerProps> = (props) => {\n  const globalAttributes = useGetGlobalAttributes<DSPaginationT.ContainerProps, HTMLDivElement, DSGridT.Props>(props);\n  const xstyledProps = useGetXstyledProps(props);\n\n  const ownerPropsConfig = useOwnerProps(props);\n\n  return (\n    <StyledPaginationContainer\n      data-testid={PAGINATION_DATA_TESTID.CONTAINER}\n      {...globalAttributes}\n      {...xstyledProps}\n      {...ownerPropsConfig}\n      cols={['minmax(auto, 80%)']}\n    >\n      <StyledPaginationWrapper {...ownerPropsConfig}>{props.children}</StyledPaginationWrapper>\n    </StyledPaginationContainer>\n  );\n};\n\nDSPaginationContainer.displayName = PaginationContainerName;\nexport const DSPaginationContainerWithSchema = describe(DSPaginationContainer).description('Per Page Selector');\nDSPaginationContainerWithSchema.propTypes = DSPaginationContainerPropTypesSchema;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACuBjB;AAtBN,SAAS,UAAU,wBAAwB,oBAAoB,qBAAqB;AAEpF,SAAS,8BAA8B;AACvC,SAAS,2BAA2B,+BAA+B;AACnE,SAAS,4CAA4C;AACrD,SAAS,+BAA+B;AAGjC,MAAM,wBAA2E,CAAC,UAAU;AACjG,QAAM,mBAAmB,uBAAoF,KAAK;AAClH,QAAM,eAAe,mBAAmB,KAAK;AAE7C,QAAM,mBAAmB,cAAc,KAAK;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,uBAAuB;AAAA,MACnC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,MAAM,CAAC,mBAAmB;AAAA,MAE1B,8BAAC,2BAAyB,GAAG,kBAAmB,gBAAM,UAAS;AAAA;AAAA,EACjE;AAEJ;AAEA,sBAAsB,cAAc;AAC7B,MAAM,kCAAkC,SAAS,qBAAqB,EAAE,YAAY,mBAAmB;AAC9G,gCAAgC,YAAY;",
   "names": []
 }

package/dist/esm/parts/PaginationContent.js

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useOwnerProps } from "@elliemae/ds-props-helpers";
 import { DSPaginationContainer } from "./DSPaginationContainer.js";
 import { DSPaginationSeparator } from "../styled.js";
 import { DSPerPageSelector } from "./DSPerPageSelector/index.js";
@@ -26,6 +27,7 @@ const PaginationContent = (props) => {
     perPageStep,
     minPerPage
   } = props;
+  const ownerPropsConfig = useOwnerProps(props);
   return /* @__PURE__ */ jsxs(DSPaginationContainer, { ...props, children: [
     showPerPageSelector && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
@@ -39,10 +41,10 @@ const PaginationContent = (props) => {
           minPerPage
         }
       ),
-      /* @__PURE__ */ jsx(DSPaginationSeparator, { mr: 24 })
+      /* @__PURE__ */ jsx(DSPaginationSeparator, { mr: 24, ...ownerPropsConfig })
     ] }),
     /* @__PURE__ */ jsx(DSPagePrevButton, { canPreviousPage, onPreviousPage }),
-    /* @__PURE__ */ jsx(DSPaginationSeparator, {}),
+    /* @__PURE__ */ jsx(DSPaginationSeparator, { ...ownerPropsConfig }),
     /* @__PURE__ */ jsx(
       DSPaginator,
       {
@@ -54,7 +56,7 @@ const PaginationContent = (props) => {
         pageDetailsTitle
       }
     ),
-    /* @__PURE__ */ jsx(DSPaginationSeparator, {}),
+    /* @__PURE__ */ jsx(DSPaginationSeparator, { ...ownerPropsConfig }),
     /* @__PURE__ */ jsx(DSPageNextButton, { canNextPage, onNextPage })
   ] });
 };

package/dist/esm/parts/PaginationContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/PaginationContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { DSPaginationContainer } from './DSPaginationContainer.js';\nimport { DSPaginationSeparator } from '../styled.js';\nimport { DSPerPageSelector } from './DSPerPageSelector/index.js';\nimport { DSPaginator } from './DSPaginator/index.js';\nimport { DSPagePrevButton } from './DSPagePrevButton.js';\nimport { DSPageNextButton } from './DSPageNextButton.js';\nimport type { DSPaginationT } from '../react-desc-prop-types.js';\n\nexport const PaginationContent: React.ComponentType<DSPaginationT.InternalProps> = (props) => {\n  const {\n    pageIndex,\n    pageSize,\n    canPreviousPage,\n    canNextPage,\n    onPageSizeChange,\n    onNextPage,\n    onPreviousPage,\n    onPageChange,\n    pageCount,\n    isLoadingPageCount,\n    showPerPageSelector,\n    pageDetails,\n    pageDetailsTitle,\n    perPageOptions,\n    maxPerPage,\n    perPageStep,\n    minPerPage,\n  } = props;\n\n  return (\n    <DSPaginationContainer {...props}>\n      {showPerPageSelector && (\n        <>\n          <DSPerPageSelector\n            pageSize={pageSize}\n            onPageSizeChange={onPageSizeChange}\n            perPageOptions={perPageOptions}\n            maxPerPage={maxPerPage}\n            perPageStep={perPageStep}\n            minPerPage={minPerPage}\n          />\n          <DSPaginationSeparator mr={24} />\n        </>\n      )}\n      <DSPagePrevButton canPreviousPage={canPreviousPage} onPreviousPage={onPreviousPage} />\n      <DSPaginationSeparator />\n\n      <DSPaginator\n        pageCount={pageCount}\n        isLoadingPageCount={isLoadingPageCount}\n        pageIndex={pageIndex}\n        onPageChange={onPageChange}\n        pageDetails={pageDetails}\n        pageDetailsTitle={pageDetailsTitle}\n      />\n      <DSPaginationSeparator />\n\n      <DSPageNextButton canNextPage={canNextPage} onNextPage={onNextPage} />\n    </DSPaginationContainer>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACkCf,mBACE,KADF;AAhCR,SAAS,6BAA6B;AACtC,SAAS,6BAA6B;AACtC,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AAG1B,MAAM,oBAAsE,CAAC,UAAU;AAC5F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,SACE,qBAAC,yBAAuB,GAAG,OACxB;AAAA,2BACC,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MACA,oBAAC,yBAAsB,IAAI,IAAI;AAAA,OACjC;AAAA,IAEF,oBAAC,oBAAiB,iBAAkC,gBAAgC;AAAA,IACpF,oBAAC,yBAAsB;AAAA,IAEvB;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,yBAAsB;AAAA,IAEvB,oBAAC,oBAAiB,aAA0B,YAAwB;AAAA,KACtE;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { DSPaginationContainer } from './DSPaginationContainer.js';\nimport { DSPaginationSeparator } from '../styled.js';\nimport { DSPerPageSelector } from './DSPerPageSelector/index.js';\nimport { DSPaginator } from './DSPaginator/index.js';\nimport { DSPagePrevButton } from './DSPagePrevButton.js';\nimport { DSPageNextButton } from './DSPageNextButton.js';\nimport type { DSPaginationT } from '../react-desc-prop-types.js';\n\nexport const PaginationContent: React.ComponentType<DSPaginationT.InternalProps> = (props) => {\n  const {\n    pageIndex,\n    pageSize,\n    canPreviousPage,\n    canNextPage,\n    onPageSizeChange,\n    onNextPage,\n    onPreviousPage,\n    onPageChange,\n    pageCount,\n    isLoadingPageCount,\n    showPerPageSelector,\n    pageDetails,\n    pageDetailsTitle,\n    perPageOptions,\n    maxPerPage,\n    perPageStep,\n    minPerPage,\n  } = props;\n\n  const ownerPropsConfig = useOwnerProps(props);\n\n  return (\n    <DSPaginationContainer {...props}>\n      {showPerPageSelector && (\n        <>\n          <DSPerPageSelector\n            pageSize={pageSize}\n            onPageSizeChange={onPageSizeChange}\n            perPageOptions={perPageOptions}\n            maxPerPage={maxPerPage}\n            perPageStep={perPageStep}\n            minPerPage={minPerPage}\n          />\n          <DSPaginationSeparator mr={24} {...ownerPropsConfig} />\n        </>\n      )}\n      <DSPagePrevButton canPreviousPage={canPreviousPage} onPreviousPage={onPreviousPage} />\n      <DSPaginationSeparator {...ownerPropsConfig} />\n\n      <DSPaginator\n        pageCount={pageCount}\n        isLoadingPageCount={isLoadingPageCount}\n        pageIndex={pageIndex}\n        onPageChange={onPageChange}\n        pageDetails={pageDetails}\n        pageDetailsTitle={pageDetailsTitle}\n      />\n      <DSPaginationSeparator {...ownerPropsConfig} />\n\n      <DSPageNextButton canNextPage={canNextPage} onNextPage={onNextPage} />\n    </DSPaginationContainer>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACqCf,mBACE,KADF;AAnCR,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AACtC,SAAS,6BAA6B;AACtC,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AAG1B,MAAM,oBAAsE,CAAC,UAAU;AAC5F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,mBAAmB,cAAc,KAAK;AAE5C,SACE,qBAAC,yBAAuB,GAAG,OACxB;AAAA,2BACC,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MACA,oBAAC,yBAAsB,IAAI,IAAK,GAAG,kBAAkB;AAAA,OACvD;AAAA,IAEF,oBAAC,oBAAiB,iBAAkC,gBAAgC;AAAA,IACpF,oBAAC,yBAAuB,GAAG,kBAAkB;AAAA,IAE7C;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,yBAAuB,GAAG,kBAAkB;AAAA,IAE7C,oBAAC,oBAAiB,aAA0B,YAAwB;AAAA,KACtE;AAEJ;",
   "names": []
 }

package/dist/esm/styled.js

@@ -2,6 +2,7 @@ import * as React from "react";
 import { Grid } from "@elliemae/ds-grid";
 import { DSButtonV2 } from "@elliemae/ds-button-v2";
 import { xStyledCommonProps, styled, css } from "@elliemae/ds-system";
+import { DSPaginationName, PaginationSlots } from "./DSPaginationDefinitions.js";
 const styledFocusCss = css`
   &:after {
     display: block;
@@ -16,7 +17,7 @@ const styledFocusCss = css`
     z-index: 7;
   }
 `;
-const StyledPaginationContainer = styled(Grid)`
+const StyledPaginationContainer = styled(Grid, { name: DSPaginationName, slot: PaginationSlots.ROOT })`
   height: 42px;
   max-width: 100%;
   align-items: center;
@@ -25,13 +26,13 @@ const StyledPaginationContainer = styled(Grid)`
   position: relative;
   ${xStyledCommonProps}
 `;
-const StyledPaginationWrapper = styled.div`
+const StyledPaginationWrapper = styled("div", { name: DSPaginationName, slot: PaginationSlots.WRAPPER })`
   display: grid;
   grid-auto-flow: column;
   justify-content: center;
   align-items: center;
 `;
-const DSPaginationSeparator = styled(Grid)`
+const DSPaginationSeparator = styled(Grid, { name: DSPaginationName, slot: PaginationSlots.SEPARATOR })`
   background-color: ${(props) => props.theme.colors.neutral[300]};
   width: 1px;
   height: 30px;

package/dist/esm/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { xStyledCommonProps, styled, css } from '@elliemae/ds-system';\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport type {} from '@xstyled/system';\n\nconst styledFocusCss = css`\n  &:after {\n    display: block;\n    content: ' ';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    pointer-events: none;\n    z-index: 7;\n  }\n`;\n\nexport const StyledPaginationContainer = styled(Grid)<React.ComponentProps<typeof Grid> & XstyledProps>`\n  height: 42px;\n  max-width: 100%;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.5);\n  position: relative;\n  ${xStyledCommonProps}\n`;\n\nexport const StyledPaginationWrapper = styled.div`\n  display: grid;\n  grid-auto-flow: column;\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const DSPaginationSeparator = styled(Grid)<React.ComponentProps<typeof Grid> & XstyledProps>`\n  background-color: ${(props) => props.theme.colors.neutral[300]};\n  width: 1px;\n  height: 30px;\n  ${xStyledCommonProps}\n`;\n\nexport const InvisibleDiv = styled.div`\n  opacity: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  position: absolute;\n`;\n\nexport const PaginationDropdownButton = styled(DSButtonV2)`\n  height: 42px;\n  display: grid;\n  grid-auto-flow: column;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  padding-left: 16px;\n  padding-right: 16px;\n  grid-gap: 8px;\n  font-size: 13px;\n  color: neutral-700;\n  cursor: pointer;\n  border-radius: 0;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  :focus {\n    ${styledFocusCss}\n  }\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n  white-space: nowrap;\n`;\n\nexport const PreviousNextPageButton = styled(DSButtonV2)`\n  height: 42px;\n  display: grid;\n  place-items: center;\n  position: relative;\n  padding-left: 8px;\n  padding-right: 8px;\n  border-radius: 0;\n  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n  :focus {\n    ${styledFocusCss}\n  }\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB,QAAQ,WAAW;AAIhD,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAMvD,MAAM,4BAA4B,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOhD,kBAAkB;AAAA;AAGf,MAAM,0BAA0B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvC,MAAM,wBAAwB,OAAO,IAAI;AAAA,sBAC1B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA,IAG5D,kBAAkB;AAAA;AAGf,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ5B,MAAM,2BAA2B,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAcxC,CAAC,UAAU,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA,MAErD,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQb,MAAM,yBAAyB,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQ3C,CAAC,UAAW,MAAM,WAAW,gBAAgB,SAAU;AAAA;AAAA,MAE7D,cAAc;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { xStyledCommonProps, styled, css } from '@elliemae/ds-system';\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport type {} from '@xstyled/system';\nimport { DSPaginationName, PaginationSlots } from './DSPaginationDefinitions.js';\n\nconst styledFocusCss = css`\n  &:after {\n    display: block;\n    content: ' ';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    pointer-events: none;\n    z-index: 7;\n  }\n`;\n\nexport const StyledPaginationContainer = styled(Grid, { name: DSPaginationName, slot: PaginationSlots.ROOT })<\n  React.ComponentProps<typeof Grid> & XstyledProps\n>`\n  height: 42px;\n  max-width: 100%;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.5);\n  position: relative;\n  ${xStyledCommonProps}\n`;\n\nexport const StyledPaginationWrapper = styled('div', { name: DSPaginationName, slot: PaginationSlots.WRAPPER })`\n  display: grid;\n  grid-auto-flow: column;\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const DSPaginationSeparator = styled(Grid, { name: DSPaginationName, slot: PaginationSlots.SEPARATOR })<\n  React.ComponentProps<typeof Grid> & XstyledProps\n>`\n  background-color: ${(props) => props.theme.colors.neutral[300]};\n  width: 1px;\n  height: 30px;\n  ${xStyledCommonProps}\n`;\n\nexport const InvisibleDiv = styled.div`\n  opacity: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  position: absolute;\n`;\n\nexport const PaginationDropdownButton = styled(DSButtonV2)`\n  height: 42px;\n  display: grid;\n  grid-auto-flow: column;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  padding-left: 16px;\n  padding-right: 16px;\n  grid-gap: 8px;\n  font-size: 13px;\n  color: neutral-700;\n  cursor: pointer;\n  border-radius: 0;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  :focus {\n    ${styledFocusCss}\n  }\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n  white-space: nowrap;\n`;\n\nexport const PreviousNextPageButton = styled(DSButtonV2)`\n  height: 42px;\n  display: grid;\n  place-items: center;\n  position: relative;\n  padding-left: 8px;\n  padding-right: 8px;\n  border-radius: 0;\n  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n  :focus {\n    ${styledFocusCss}\n  }\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB,QAAQ,WAAW;AAGhD,SAAS,kBAAkB,uBAAuB;AAElD,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAMvD,MAAM,4BAA4B,OAAO,MAAM,EAAE,MAAM,kBAAkB,MAAM,gBAAgB,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASxG,kBAAkB;AAAA;AAGf,MAAM,0BAA0B,OAAO,OAAO,EAAE,MAAM,kBAAkB,MAAM,gBAAgB,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvG,MAAM,wBAAwB,OAAO,MAAM,EAAE,MAAM,kBAAkB,MAAM,gBAAgB,UAAU,CAAC;AAAA,sBAGvF,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA,IAG5D,kBAAkB;AAAA;AAGf,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ5B,MAAM,2BAA2B,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAcxC,CAAC,UAAU,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA,MAErD,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQb,MAAM,yBAAyB,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQ3C,CAAC,UAAW,MAAM,WAAW,gBAAgB,SAAU;AAAA;AAAA,MAE7D,cAAc;AAAA;AAAA;",
   "names": []
 }

package/dist/types/DSPaginationDefinitions.d.ts

@@ -5,3 +5,8 @@ export declare const PagePrevButtonName = "DSPagePrevButton";
 export declare const PageNextButtonName = "DSPageNextButton";
 export declare const PaginatorName = "DSPaginator";
 export declare const PaginationSeparatorName = "DSPaginationSeparator";
+export declare const PaginationSlots: {
+    ROOT: string;
+    WRAPPER: string;
+    SEPARATOR: string;
+};

package/dist/types/PaginationDataTestID.d.ts

@@ -4,4 +4,6 @@ export declare const PAGINATION_DATA_TESTID: {
     CONTAINER: string;
     PER_PAGE_SELECTOR: string;
     PAGINATOR: string;
+    SEPARATOR: string;
+    WRAPPER: string;
 };

package/dist/types/index.d.ts

@@ -2,6 +2,7 @@ declare const DSPaginationSeparatorWithSchema: import("@elliemae/ds-props-helper
 export { DSPagination, DSPaginationWithSchema } from './Pagination.js';
 export { DSPageNextButton, DSPageNextButtonWithSchema, DSPagePrevButton, DSPagePrevButtonWithSchema, DSPaginationContainer, DSPaginationContainerWithSchema, DSPerPageSelector, DSPerPageSelectorWithSchema, DSPaginator, DSPaginatorWithSchema, } from './parts/index.js';
 export { DSPaginationSeparator } from './styled.js';
+export { DSPaginationName, PaginationSlots } from './DSPaginationDefinitions.js';
 export { DSPaginationSeparatorWithSchema };
 export { PAGINATION_DATA_TESTID } from './PaginationDataTestID.js';
 export type { DSPaginationT } from './react-desc-prop-types.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-pagination",
-  "version": "3.51.0-rc.0",
+  "version": "3.51.0-rc.10",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Pagination",
   "files": [
@@ -37,21 +37,21 @@
   },
   "dependencies": {
     "@xstyled/system": "~3.7.3",
-    "@elliemae/ds-circular-progress-indicator": "3.51.0-rc.0",
-    "@elliemae/ds-button-v2": "3.51.0-rc.0",
-    "@elliemae/ds-dropdownmenu-v2": "3.51.0-rc.0",
-    "@elliemae/ds-system": "3.51.0-rc.0",
-    "@elliemae/ds-typography": "3.51.0-rc.0",
-    "@elliemae/ds-grid": "3.51.0-rc.0",
-    "@elliemae/ds-icons": "3.51.0-rc.0",
-    "@elliemae/ds-props-helpers": "3.51.0-rc.0"
+    "@elliemae/ds-button-v2": "3.51.0-rc.10",
+    "@elliemae/ds-circular-progress-indicator": "3.51.0-rc.10",
+    "@elliemae/ds-dropdownmenu-v2": "3.51.0-rc.10",
+    "@elliemae/ds-grid": "3.51.0-rc.10",
+    "@elliemae/ds-system": "3.51.0-rc.10",
+    "@elliemae/ds-icons": "3.51.0-rc.10",
+    "@elliemae/ds-props-helpers": "3.51.0-rc.10",
+    "@elliemae/ds-typography": "3.51.0-rc.10"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "9.0.0-next.55",
     "jest": "~29.7.0",
     "styled-components": "~5.3.9",
     "styled-system": "^5.1.5",
-    "@elliemae/ds-monorepo-devops": "3.51.0-rc.0"
+    "@elliemae/ds-monorepo-devops": "3.51.0-rc.10"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",