@d4gger/design-system 2.7.0 → 3.0.1

package/dist/components/pagination/Pagination.d.ts

@@ -16,6 +16,8 @@ type PaginationLinkProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, '
     active?: boolean;
     disabled?: boolean;
 };
+type PaginationFirstProps = PaginationLinkProps;
+type PaginationLastProps = PaginationLinkProps;
 interface PaginationEllipsisProps extends React.ComponentPropsWithoutRef<'span'>, PaginationEllipsisOwnProps {
 }
 declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;
@@ -56,6 +58,23 @@ declare const PaginationPrevious: React.ForwardRefExoticComponent<Omit<React.Anc
     active?: boolean;
     disabled?: boolean;
 } & React.RefAttributes<HTMLAnchorElement>>;
+declare const PaginationFirst: React.ForwardRefExoticComponent<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "type"> & GetPropDefTypes<{
+    active: {
+        type: "boolean";
+        default: false;
+    };
+    disabled: {
+        type: "boolean";
+        default: false;
+    };
+    asChild: {
+        type: "boolean";
+        default: false;
+    };
+}> & {
+    active?: boolean;
+    disabled?: boolean;
+} & React.RefAttributes<HTMLAnchorElement>>;
 declare const PaginationNext: React.ForwardRefExoticComponent<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "type"> & GetPropDefTypes<{
     active: {
         type: "boolean";
@@ -73,6 +92,23 @@ declare const PaginationNext: React.ForwardRefExoticComponent<Omit<React.AnchorH
     active?: boolean;
     disabled?: boolean;
 } & React.RefAttributes<HTMLAnchorElement>>;
+declare const PaginationLast: React.ForwardRefExoticComponent<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "type"> & GetPropDefTypes<{
+    active: {
+        type: "boolean";
+        default: false;
+    };
+    disabled: {
+        type: "boolean";
+        default: false;
+    };
+    asChild: {
+        type: "boolean";
+        default: false;
+    };
+}> & {
+    active?: boolean;
+    disabled?: boolean;
+} & React.RefAttributes<HTMLAnchorElement>>;
 declare const PaginationEllipsis: React.ForwardRefExoticComponent<PaginationEllipsisProps & React.RefAttributes<HTMLSpanElement>>;
 interface PaginationInfoProps extends React.ComponentPropsWithoutRef<'span'> {
     totalCount: number;
@@ -82,13 +118,30 @@ interface PaginationInfoProps extends React.ComponentPropsWithoutRef<'span'> {
     zeroResultsLabel?: React.ReactNode;
 }
 declare const PaginationInfo: React.ForwardRefExoticComponent<PaginationInfoProps & React.RefAttributes<HTMLSpanElement>>;
-interface PaginationPageSizeProps extends Omit<React.ComponentPropsWithoutRef<'select'>, 'onChange'> {
+interface PaginationStatusProps extends React.ComponentPropsWithoutRef<'span'> {
+    page: number;
+    totalPages: number;
+    formatStatus?: (page: number, totalPages: number) => React.ReactNode;
+}
+declare const PaginationStatus: React.ForwardRefExoticComponent<PaginationStatusProps & React.RefAttributes<HTMLSpanElement>>;
+interface PaginationPageSizeProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'value'> {
     value: number;
     options?: number[];
     onChange: (limit: number) => void;
     formatOption?: (limit: number) => React.ReactNode;
 }
-declare const PaginationPageSize: React.ForwardRefExoticComponent<PaginationPageSizeProps & React.RefAttributes<HTMLSelectElement>>;
+declare function PaginationPageSize({ value, options, onChange, formatOption, className, ...props }: PaginationPageSizeProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PaginationPageSize {
+    var displayName: string;
+}
+interface PaginationPageInputProps extends Omit<React.ComponentPropsWithoutRef<'input'>, 'value' | 'defaultValue' | 'onChange' | 'type' | 'min' | 'max'> {
+    page: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    pageLabel?: React.ReactNode;
+    formatOf?: (totalPages: number) => React.ReactNode;
+}
+declare const PaginationPageInput: React.ForwardRefExoticComponent<PaginationPageInputProps & React.RefAttributes<HTMLInputElement>>;
 declare function buildPageNumbers(currentPage: number, totalPages: number): (number | 'ellipsis')[];
 interface PaginationMessages {
     formatRange?: (start: number, end: number, totalCount: number) => React.ReactNode;
@@ -96,6 +149,10 @@ interface PaginationMessages {
     zeroResults?: React.ReactNode;
     previous?: string;
     next?: string;
+    first?: string;
+    last?: string;
+    pageInputLabel?: string;
+    formatPageInputOf?: (totalPages: number) => React.ReactNode;
 }
 interface PaginationBarProps extends React.ComponentPropsWithoutRef<'div'> {
     totalCount: number;
@@ -106,8 +163,11 @@ interface PaginationBarProps extends React.ComponentPropsWithoutRef<'div'> {
     onPageChange: (offset: number) => void;
     onLimitChange: (limit: number) => void;
     messages?: PaginationMessages;
+    showFirstLast?: boolean;
+    showPageInput?: boolean;
+    dense?: boolean;
 }
 declare const PaginationBar: React.ForwardRefExoticComponent<PaginationBarProps & React.RefAttributes<HTMLDivElement>>;
-export { buildPageNumbers, Pagination, PaginationBar, PaginationContent, PaginationEllipsis, PaginationInfo, PaginationItem, PaginationLink, PaginationList, PaginationNext, PaginationPageSize, PaginationPrevious, };
-export type { PaginationBarProps, PaginationEllipsisProps, PaginationInfoProps, PaginationItemProps, PaginationLinkProps, PaginationMessages, PaginationListProps, PaginationPageSizeProps, PaginationProps, };
+export { buildPageNumbers, Pagination, PaginationBar, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationInfo, PaginationItem, PaginationLast, PaginationLink, PaginationList, PaginationNext, PaginationPageInput, PaginationPageSize, PaginationPrevious, PaginationStatus, };
+export type { PaginationBarProps, PaginationEllipsisProps, PaginationFirstProps, PaginationInfoProps, PaginationItemProps, PaginationLastProps, PaginationLinkProps, PaginationMessages, PaginationListProps, PaginationPageInputProps, PaginationPageSizeProps, PaginationProps, PaginationStatusProps, };
 //# sourceMappingURL=Pagination.d.ts.map

package/dist/components/pagination/Pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/Pagination.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/Pagination.tsx"],"names":[],"mappings":"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"}

package/dist/components/pagination/Pagination.js

@@ -3,6 +3,7 @@ import classNames from "classnames";
 import { Slot } from "@radix-ui/react-slot";
 import { extractProps } from "../../_internal/helpers/extractProps.js";
 import { Icon } from "../icon/Icon.js";
+import { SelectContent, SelectItem, SelectRoot, SelectTrigger, SelectValue } from "../select/Select.js";
 import {
   paginationEllipsisPropDefs,
   paginationItemPropDefs,
@@ -109,6 +110,23 @@ const PaginationPrevious = React.forwardRef((props, forwardedRef) => {
   );
 });
 PaginationPrevious.displayName = "PaginationPrevious";
+const PaginationFirst = React.forwardRef((props, forwardedRef) => {
+  const { children, className, ...firstProps } = props;
+  return /* @__PURE__ */ jsxs(
+    PaginationLink,
+    {
+      ...firstProps,
+      ref: forwardedRef,
+      "aria-label": props["aria-label"] ?? "First page",
+      className: classNames("dsx-pagination__link--edge", className),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: "chevrons-left", size: "sm" }),
+        children ?? "First"
+      ]
+    }
+  );
+});
+PaginationFirst.displayName = "PaginationFirst";
 const PaginationNext = React.forwardRef((props, forwardedRef) => {
   const { children, className, ...nextProps } = props;
   return /* @__PURE__ */ jsxs(
@@ -126,6 +144,23 @@ const PaginationNext = React.forwardRef((props, forwardedRef) => {
   );
 });
 PaginationNext.displayName = "PaginationNext";
+const PaginationLast = React.forwardRef((props, forwardedRef) => {
+  const { children, className, ...lastProps } = props;
+  return /* @__PURE__ */ jsxs(
+    PaginationLink,
+    {
+      ...lastProps,
+      ref: forwardedRef,
+      "aria-label": props["aria-label"] ?? "Last page",
+      className: classNames("dsx-pagination__link--edge", className),
+      children: [
+        children ?? "Last",
+        /* @__PURE__ */ jsx(Icon, { name: "chevrons-right", size: "sm" })
+      ]
+    }
+  );
+});
+PaginationLast.displayName = "PaginationLast";
 const PaginationEllipsis = React.forwardRef((props, forwardedRef) => {
   const { asChild, children, className, ...ellipsisProps } = extractProps(props, paginationEllipsisPropDefs);
   const Comp = asChild && React.isValidElement(children) ? Slot : "span";
@@ -149,22 +184,81 @@ const PaginationInfo = React.forwardRef(
   }
 );
 PaginationInfo.displayName = "PaginationInfo";
-const PaginationPageSize = React.forwardRef(
-  ({ value, options = [20, 50, 100], onChange, formatOption, className, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ jsx(
-      "select",
-      {
-        ...props,
-        ref: forwardedRef,
-        value,
-        className: classNames("dsx-pagination__page-size", className),
-        onChange: (e) => onChange(Number(e.target.value)),
-        children: options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt, children: formatOption?.(opt) ?? `${opt} per page` }, opt))
-      }
-    );
+const PaginationStatus = React.forwardRef(
+  ({ page, totalPages, formatStatus, className, role, ...props }, forwardedRef) => {
+    const safeTotal = Math.max(1, totalPages);
+    const safePage = Math.max(1, Math.min(page, safeTotal));
+    return /* @__PURE__ */ jsx("span", { ...props, ref: forwardedRef, role: role ?? "status", className: classNames("dsx-pagination__status", className), children: formatStatus?.(safePage, safeTotal) ?? `Page ${safePage} of ${safeTotal}` });
   }
 );
+PaginationStatus.displayName = "PaginationStatus";
+function PaginationPageSize({
+  value,
+  options = [10, 25, 50, 100],
+  onChange,
+  formatOption,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(SelectRoot, { value: String(value), onValueChange: (next) => {
+    onChange(Number(next));
+  }, children: [
+    /* @__PURE__ */ jsx(SelectTrigger, { className: classNames("dsx-pagination__page-size", className), ...props, children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+    /* @__PURE__ */ jsx(SelectContent, { children: options.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: String(opt), children: formatOption?.(opt) ?? `${opt} per page` }, opt)) })
+  ] });
+}
 PaginationPageSize.displayName = "PaginationPageSize";
+const PaginationPageInput = React.forwardRef(
+  ({
+    page,
+    totalPages,
+    onPageChange,
+    pageLabel = "Page",
+    formatOf = (total) => `of ${total}`,
+    className,
+    "aria-label": ariaLabel,
+    onKeyDown,
+    onBlur,
+    ...props
+  }, forwardedRef) => {
+    const [draft, setDraft] = React.useState(null);
+    React.useEffect(() => {
+      setDraft(null);
+    }, [page, totalPages]);
+    function commit(raw) {
+      const parsed = Number.parseInt(raw, 10);
+      setDraft(null);
+      if (Number.isNaN(parsed)) return;
+      onPageChange(Math.max(1, Math.min(parsed, Math.max(1, totalPages))));
+    }
+    return /* @__PURE__ */ jsxs("span", { className: classNames("dsx-pagination__page-input", className), children: [
+      /* @__PURE__ */ jsx("span", { children: pageLabel }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...props,
+          ref: forwardedRef,
+          type: "number",
+          min: 1,
+          max: Math.max(1, totalPages),
+          value: draft ?? page,
+          "aria-label": ariaLabel ?? `Page number, page ${page} of ${Math.max(1, totalPages)}`,
+          onChange: (event) => setDraft(event.currentTarget.value),
+          onBlur: (event) => {
+            commit(event.currentTarget.value);
+            onBlur?.(event);
+          },
+          onKeyDown: (event) => {
+            if (event.key === "Enter") commit(event.currentTarget.value);
+            onKeyDown?.(event);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { children: formatOf(Math.max(1, totalPages)) })
+    ] });
+  }
+);
+PaginationPageInput.displayName = "PaginationPageInput";
 function buildPageNumbers(currentPage, totalPages) {
   if (totalPages <= 7) {
     return Array.from({ length: totalPages }, (_, i) => i + 1);
@@ -174,15 +268,24 @@ function buildPageNumbers(currentPage, totalPages) {
   return [1, "ellipsis", currentPage - 1, currentPage, currentPage + 1, "ellipsis", totalPages];
 }
 const PaginationBar = React.forwardRef(
-  ({ totalCount, offset, limit, pageSizeOptions = [10, 25, 50, 100], size = "md", onPageChange, onLimitChange, messages = {}, className, ...props }, ref) => {
+  ({ totalCount, offset, limit, pageSizeOptions = [10, 25, 50, 100], size = "md", onPageChange, onLimitChange, messages = {}, showFirstLast = false, showPageInput = false, dense = false, className, ...props }, ref) => {
     const totalPages = Math.max(1, Math.ceil(totalCount / limit));
     const currentPage = Math.floor(offset / limit) + 1;
     const pages = buildPageNumbers(currentPage, totalPages);
     return /* @__PURE__ */ jsxs("div", { ...props, ref, className: classNames("dsx-pagination-bar", className), children: [
       /* @__PURE__ */ jsx(PaginationInfo, { totalCount, offset, limit, formatRange: messages.formatRange, zeroResultsLabel: messages.zeroResults }),
       /* @__PURE__ */ jsxs("div", { className: "dsx-pagination-bar__controls", children: [
-        /* @__PURE__ */ jsx(PaginationPageSize, { value: limit, options: pageSizeOptions, onChange: onLimitChange, formatOption: messages.formatPageSize, "aria-label": "Page size" }),
+        !dense ? /* @__PURE__ */ jsx(PaginationPageSize, { value: limit, options: pageSizeOptions, onChange: onLimitChange, formatOption: messages.formatPageSize, "aria-label": "Page size" }) : null,
         /* @__PURE__ */ jsx(Pagination, { size, children: /* @__PURE__ */ jsxs(PaginationContent, { children: [
+          showFirstLast ? /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+            PaginationFirst,
+            {
+              disabled: currentPage <= 1,
+              "aria-label": messages.first ?? "First page",
+              onClick: () => onPageChange(0),
+              children: messages.first
+            }
+          ) }) : null,
           /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
             PaginationPrevious,
             {
@@ -210,8 +313,27 @@ const PaginationBar = React.forwardRef(
               onClick: () => onPageChange(currentPage * limit),
               children: messages.next
             }
-          ) })
-        ] }) })
+          ) }),
+          showFirstLast ? /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+            PaginationLast,
+            {
+              disabled: currentPage >= totalPages,
+              "aria-label": messages.last ?? "Last page",
+              onClick: () => onPageChange((totalPages - 1) * limit),
+              children: messages.last
+            }
+          ) }) : null
+        ] }) }),
+        showPageInput ? /* @__PURE__ */ jsx(
+          PaginationPageInput,
+          {
+            page: currentPage,
+            totalPages,
+            onPageChange: (nextPage) => onPageChange((nextPage - 1) * limit),
+            pageLabel: messages.pageInputLabel ?? "Page",
+            formatOf: messages.formatPageInputOf
+          }
+        ) : null
       ] })
     ] });
   }
@@ -222,13 +344,17 @@ export {
   PaginationBar,
   PaginationContent,
   PaginationEllipsis,
+  PaginationFirst,
   PaginationInfo,
   PaginationItem,
+  PaginationLast,
   PaginationLink,
   PaginationList,
   PaginationNext,
+  PaginationPageInput,
   PaginationPageSize,
   PaginationPrevious,
+  PaginationStatus,
   buildPageNumbers
 };
 //# sourceMappingURL=Pagination.js.map

package/dist/components/pagination/Pagination.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/pagination/Pagination.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Icon } from '../icon/Icon'\nimport {\n  paginationEllipsisPropDefs,\n  paginationItemPropDefs,\n  paginationLinkPropDefs,\n  paginationListPropDefs,\n  paginationPropDefs,\n} from './pagination.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype PaginationOwnProps = GetPropDefTypes<typeof paginationPropDefs>\ntype PaginationListOwnProps = GetPropDefTypes<typeof paginationListPropDefs>\ntype PaginationItemOwnProps = GetPropDefTypes<typeof paginationItemPropDefs>\ntype PaginationLinkOwnProps = GetPropDefTypes<typeof paginationLinkPropDefs>\ntype PaginationEllipsisOwnProps = GetPropDefTypes<typeof paginationEllipsisPropDefs>\n\ninterface PaginationProps extends React.ComponentPropsWithoutRef<'nav'>, PaginationOwnProps {}\ninterface PaginationListProps extends React.ComponentPropsWithoutRef<'ul'>, PaginationListOwnProps {}\ninterface PaginationItemProps extends React.ComponentPropsWithoutRef<'li'>, PaginationItemOwnProps {}\n\ntype PaginationLinkProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'type'> &\n  PaginationLinkOwnProps & {\n    active?: boolean\n    disabled?: boolean\n  }\n\ninterface PaginationEllipsisProps extends React.ComponentPropsWithoutRef<'span'>, PaginationEllipsisOwnProps {}\n\nconst Pagination = React.forwardRef<HTMLElement, PaginationProps>((props, forwardedRef) => {\n  const { asChild, className, size = 'md', ...paginationProps } = extractProps(props, paginationPropDefs)\n  const Comp = asChild ? Slot : 'nav'\n\n  return (\n    <Comp\n      {...paginationProps}\n      ref={forwardedRef}\n      aria-label={props['aria-label'] ?? 'Pagination'}\n      className={classNames('dsx-pagination', className)}\n      data-size={size}\n    />\n  )\n})\nPagination.displayName = 'Pagination'\n\nconst PaginationList = React.forwardRef<HTMLUListElement, PaginationListProps>((props, forwardedRef) => {\n  const { asChild, className, ...listProps } = extractProps(props, paginationListPropDefs)\n  const Comp = asChild ? Slot : 'ul'\n\n  return <Comp {...listProps} ref={forwardedRef} className={classNames('dsx-pagination__list', className)} />\n})\nPaginationList.displayName = 'PaginationList'\n\nconst PaginationContent = PaginationList\n\nconst PaginationItem = React.forwardRef<HTMLLIElement, PaginationItemProps>((props, forwardedRef) => {\n  const { asChild, className, ...itemProps } = extractProps(props, paginationItemPropDefs)\n  const Comp = asChild ? Slot : 'li'\n\n  return <Comp {...itemProps} ref={forwardedRef} className={classNames('dsx-pagination__item', className)} />\n})\nPaginationItem.displayName = 'PaginationItem'\n\nconst PaginationLink = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>((props, forwardedRef) => {\n  const { active = false, asChild, children, className, disabled = false, href, ...linkProps } = extractProps(\n    props,\n    paginationLinkPropDefs,\n  )\n  const resolvedClassName = classNames(\n    'dsx-pagination__link',\n    active && 'dsx-pagination__link--active',\n    disabled && 'dsx-pagination__link--disabled',\n    className,\n  )\n\n  if (asChild) {\n    return (\n      <Slot\n        {...linkProps}\n        ref={forwardedRef}\n        aria-current={active ? 'page' : undefined}\n        aria-disabled={disabled || undefined}\n        data-disabled={disabled ? '' : undefined}\n        className={resolvedClassName}\n      >\n        {children}\n      </Slot>\n    )\n  }\n\n  if (href && !disabled) {\n    return (\n      <a\n        {...linkProps}\n        ref={forwardedRef}\n        href={href}\n        aria-current={active ? 'page' : undefined}\n        className={resolvedClassName}\n      >\n        {children}\n      </a>\n    )\n  }\n\n  return (\n    <button\n      {...(linkProps as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n      ref={forwardedRef as React.ForwardedRef<HTMLButtonElement>}\n      type=\"button\"\n      disabled={disabled}\n      aria-current={active ? 'page' : undefined}\n      data-disabled={disabled ? '' : undefined}\n      className={resolvedClassName}\n    >\n      {children}\n    </button>\n  )\n})\nPaginationLink.displayName = 'PaginationLink'\n\nconst PaginationPrevious = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>((props, forwardedRef) => {\n  const { children, className, ...previousProps } = props\n\n  return (\n    <PaginationLink\n      {...previousProps}\n      ref={forwardedRef}\n      aria-label={props['aria-label'] ?? 'Previous page'}\n      className={classNames('dsx-pagination__link--edge', className)}\n    >\n      <Icon name=\"chevron-left\" size=\"sm\" />\n      {children ?? 'Previous'}\n    </PaginationLink>\n  )\n})\nPaginationPrevious.displayName = 'PaginationPrevious'\n\nconst PaginationNext = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>((props, forwardedRef) => {\n  const { children, className, ...nextProps } = props\n\n  return (\n    <PaginationLink\n      {...nextProps}\n      ref={forwardedRef}\n      aria-label={props['aria-label'] ?? 'Next page'}\n      className={classNames('dsx-pagination__link--edge', className)}\n    >\n      {children ?? 'Next'}\n      <Icon name=\"chevron-right\" size=\"sm\" />\n    </PaginationLink>\n  )\n})\nPaginationNext.displayName = 'PaginationNext'\n\nconst PaginationEllipsis = React.forwardRef<HTMLSpanElement, PaginationEllipsisProps>((props, forwardedRef) => {\n  const { asChild, children, className, ...ellipsisProps } = extractProps(props, paginationEllipsisPropDefs)\n  const Comp = asChild && React.isValidElement(children) ? Slot : 'span'\n\n  return (\n    <Comp\n      {...ellipsisProps}\n      ref={forwardedRef}\n      aria-hidden=\"true\"\n      className={classNames('dsx-pagination__ellipsis', className)}\n    >\n      {children ?? <Icon name=\"dots-horizontal\" size=\"sm\" />}\n    </Comp>\n  )\n})\nPaginationEllipsis.displayName = 'PaginationEllipsis'\n\ninterface PaginationInfoProps extends React.ComponentPropsWithoutRef<'span'> {\n  totalCount: number\n  offset: number\n  limit: number\n  formatRange?: (start: number, end: number, totalCount: number) => React.ReactNode\n  zeroResultsLabel?: React.ReactNode\n}\n\nconst PaginationInfo = React.forwardRef<HTMLSpanElement, PaginationInfoProps>(\n  ({ totalCount, offset, limit, formatRange, zeroResultsLabel = 'No results', className, ...props }, forwardedRef) => {\n    const start = totalCount === 0 ? 0 : offset + 1\n    const end = Math.min(offset + limit, totalCount)\n\n    return (\n      <span {...props} ref={forwardedRef} className={classNames('dsx-pagination__info', className)}>\n        {totalCount === 0 ? zeroResultsLabel : (formatRange?.(start, end, totalCount) ?? `Showing ${start}\u2013${end} of ${totalCount}`)}\n      </span>\n    )\n  },\n)\nPaginationInfo.displayName = 'PaginationInfo'\n\ninterface PaginationPageSizeProps extends Omit<React.ComponentPropsWithoutRef<'select'>, 'onChange'> {\n  value: number\n  options?: number[]\n  onChange: (limit: number) => void\n  formatOption?: (limit: number) => React.ReactNode\n}\n\nconst PaginationPageSize = React.forwardRef<HTMLSelectElement, PaginationPageSizeProps>(\n  ({ value, options = [20, 50, 100], onChange, formatOption, className, ...props }, forwardedRef) => {\n    return (\n      <select\n        {...props}\n        ref={forwardedRef}\n        value={value}\n        className={classNames('dsx-pagination__page-size', className)}\n        onChange={(e) => onChange(Number(e.target.value))}\n      >\n        {options.map((opt) => (\n          <option key={opt} value={opt}>\n            {formatOption?.(opt) ?? `${opt} per page`}\n          </option>\n        ))}\n      </select>\n    )\n  },\n)\nPaginationPageSize.displayName = 'PaginationPageSize'\n\nfunction buildPageNumbers(currentPage: number, totalPages: number): (number | 'ellipsis')[] {\n  if (totalPages <= 7) {\n    return Array.from({ length: totalPages }, (_, i) => i + 1)\n  }\n  if (currentPage <= 4) return [1, 2, 3, 4, 5, 'ellipsis', totalPages]\n  if (currentPage >= totalPages - 3) return [1, 'ellipsis', totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages]\n  return [1, 'ellipsis', currentPage - 1, currentPage, currentPage + 1, 'ellipsis', totalPages]\n}\n\ninterface PaginationMessages { formatRange?: (start: number, end: number, totalCount: number) => React.ReactNode; formatPageSize?: (limit: number) => React.ReactNode; zeroResults?: React.ReactNode; previous?: string; next?: string }\n\ninterface PaginationBarProps extends React.ComponentPropsWithoutRef<'div'> {\n  totalCount: number\n  offset: number\n  limit: number\n  pageSizeOptions?: number[]\n  size?: 'sm' | 'md' | 'lg'\n  onPageChange: (offset: number) => void\n  onLimitChange: (limit: number) => void\n  messages?: PaginationMessages\n}\n\nconst PaginationBar = React.forwardRef<HTMLDivElement, PaginationBarProps>(\n  ({ totalCount, offset, limit, pageSizeOptions = [10, 25, 50, 100], size = 'md', onPageChange, onLimitChange, messages = {}, className, ...props }, ref) => {\n    const totalPages = Math.max(1, Math.ceil(totalCount / limit))\n    const currentPage = Math.floor(offset / limit) + 1\n    const pages = buildPageNumbers(currentPage, totalPages)\n\n    return (\n      <div {...props} ref={ref} className={classNames('dsx-pagination-bar', className)}>\n        <PaginationInfo totalCount={totalCount} offset={offset} limit={limit} formatRange={messages.formatRange} zeroResultsLabel={messages.zeroResults} />\n        <div className=\"dsx-pagination-bar__controls\">\n          <PaginationPageSize value={limit} options={pageSizeOptions} onChange={onLimitChange} formatOption={messages.formatPageSize} aria-label=\"Page size\" />\n          <Pagination size={size}>\n            <PaginationContent>\n              <PaginationItem>\n                <PaginationPrevious\n                  disabled={currentPage <= 1}\n                  aria-label={messages.previous ?? 'Previous page'}\n                  onClick={() => onPageChange((currentPage - 2) * limit)}\n                >{messages.previous}</PaginationPrevious>\n              </PaginationItem>\n              {pages.map((page, i) =>\n                page === 'ellipsis' ? (\n                  <PaginationItem key={`ellipsis-${i}`}>\n                    <PaginationEllipsis />\n                  </PaginationItem>\n                ) : (\n                  <PaginationItem key={page}>\n                    <PaginationLink\n                      active={page === currentPage}\n                      onClick={() => onPageChange((page - 1) * limit)}\n                    >\n                      {page}\n                    </PaginationLink>\n                  </PaginationItem>\n                ),\n              )}\n              <PaginationItem>\n                <PaginationNext\n                  disabled={currentPage >= totalPages}\n                  aria-label={messages.next ?? 'Next page'}\n                  onClick={() => onPageChange(currentPage * limit)}\n                >{messages.next}</PaginationNext>\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </div>\n    )\n  },\n)\nPaginationBar.displayName = 'PaginationBar'\n\nexport {\n  buildPageNumbers,\n  Pagination,\n  PaginationBar,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationInfo,\n  PaginationItem,\n  PaginationLink,\n  PaginationList,\n  PaginationNext,\n  PaginationPageSize,\n  PaginationPrevious,\n}\nexport type {\n  PaginationBarProps,\n  PaginationEllipsisProps,\n  PaginationInfoProps,\n  PaginationItemProps,\n  PaginationLinkProps,\n  PaginationMessages,\n  PaginationListProps,\n  PaginationPageSizeProps,\n  PaginationProps,\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Icon } from '../icon/Icon'\nimport { SelectContent, SelectItem, SelectRoot, SelectTrigger, SelectValue } from '../select/Select'\nimport {\n  paginationEllipsisPropDefs,\n  paginationItemPropDefs,\n  paginationLinkPropDefs,\n  paginationListPropDefs,\n  paginationPropDefs,\n} from './pagination.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype PaginationOwnProps = GetPropDefTypes<typeof paginationPropDefs>\ntype PaginationListOwnProps = GetPropDefTypes<typeof paginationListPropDefs>\ntype PaginationItemOwnProps = GetPropDefTypes<typeof paginationItemPropDefs>\ntype PaginationLinkOwnProps = GetPropDefTypes<typeof paginationLinkPropDefs>\ntype PaginationEllipsisOwnProps = GetPropDefTypes<typeof paginationEllipsisPropDefs>\n\ninterface PaginationProps extends React.ComponentPropsWithoutRef<'nav'>, PaginationOwnProps {}\ninterface PaginationListProps extends React.ComponentPropsWithoutRef<'ul'>, PaginationListOwnProps {}\ninterface PaginationItemProps extends React.ComponentPropsWithoutRef<'li'>, PaginationItemOwnProps {}\n\ntype PaginationLinkProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'type'> &\n  PaginationLinkOwnProps & {\n    active?: boolean\n    disabled?: boolean\n  }\n\ntype PaginationFirstProps = PaginationLinkProps\ntype PaginationLastProps = PaginationLinkProps\n\ninterface PaginationEllipsisProps extends React.ComponentPropsWithoutRef<'span'>, PaginationEllipsisOwnProps {}\n\nconst Pagination = React.forwardRef<HTMLElement, PaginationProps>((props, forwardedRef) => {\n  const { asChild, className, size = 'md', ...paginationProps } = extractProps(props, paginationPropDefs)\n  const Comp = asChild ? Slot : 'nav'\n\n  return (\n    <Comp\n      {...paginationProps}\n      ref={forwardedRef}\n      aria-label={props['aria-label'] ?? 'Pagination'}\n      className={classNames('dsx-pagination', className)}\n      data-size={size}\n    />\n  )\n})\nPagination.displayName = 'Pagination'\n\nconst PaginationList = React.forwardRef<HTMLUListElement, PaginationListProps>((props, forwardedRef) => {\n  const { asChild, className, ...listProps } = extractProps(props, paginationListPropDefs)\n  const Comp = asChild ? Slot : 'ul'\n\n  return <Comp {...listProps} ref={forwardedRef} className={classNames('dsx-pagination__list', className)} />\n})\nPaginationList.displayName = 'PaginationList'\n\nconst PaginationContent = PaginationList\n\nconst PaginationItem = React.forwardRef<HTMLLIElement, PaginationItemProps>((props, forwardedRef) => {\n  const { asChild, className, ...itemProps } = extractProps(props, paginationItemPropDefs)\n  const Comp = asChild ? Slot : 'li'\n\n  return <Comp {...itemProps} ref={forwardedRef} className={classNames('dsx-pagination__item', className)} />\n})\nPaginationItem.displayName = 'PaginationItem'\n\nconst PaginationLink = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>((props, forwardedRef) => {\n  const { active = false, asChild, children, className, disabled = false, href, ...linkProps } = extractProps(\n    props,\n    paginationLinkPropDefs,\n  )\n  const resolvedClassName = classNames(\n    'dsx-pagination__link',\n    active && 'dsx-pagination__link--active',\n    disabled && 'dsx-pagination__link--disabled',\n    className,\n  )\n\n  if (asChild) {\n    return (\n      <Slot\n        {...linkProps}\n        ref={forwardedRef}\n        aria-current={active ? 'page' : undefined}\n        aria-disabled={disabled || undefined}\n        data-disabled={disabled ? '' : undefined}\n        className={resolvedClassName}\n      >\n        {children}\n      </Slot>\n    )\n  }\n\n  if (href && !disabled) {\n    return (\n      <a\n        {...linkProps}\n        ref={forwardedRef}\n        href={href}\n        aria-current={active ? 'page' : undefined}\n        className={resolvedClassName}\n      >\n        {children}\n      </a>\n    )\n  }\n\n  return (\n    <button\n      {...(linkProps as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n      ref={forwardedRef as React.ForwardedRef<HTMLButtonElement>}\n      type=\"button\"\n      disabled={disabled}\n      aria-current={active ? 'page' : undefined}\n      data-disabled={disabled ? '' : undefined}\n      className={resolvedClassName}\n    >\n      {children}\n    </button>\n  )\n})\nPaginationLink.displayName = 'PaginationLink'\n\nconst PaginationPrevious = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>((props, forwardedRef) => {\n  const { children, className, ...previousProps } = props\n\n  return (\n    <PaginationLink\n      {...previousProps}\n      ref={forwardedRef}\n      aria-label={props['aria-label'] ?? 'Previous page'}\n      className={classNames('dsx-pagination__link--edge', className)}\n    >\n      <Icon name=\"chevron-left\" size=\"sm\" />\n      {children ?? 'Previous'}\n    </PaginationLink>\n  )\n})\nPaginationPrevious.displayName = 'PaginationPrevious'\n\nconst PaginationFirst = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>((props, forwardedRef) => {\n  const { children, className, ...firstProps } = props\n\n  return (\n    <PaginationLink\n      {...firstProps}\n      ref={forwardedRef}\n      aria-label={props['aria-label'] ?? 'First page'}\n      className={classNames('dsx-pagination__link--edge', className)}\n    >\n      <Icon name=\"chevrons-left\" size=\"sm\" />\n      {children ?? 'First'}\n    </PaginationLink>\n  )\n})\nPaginationFirst.displayName = 'PaginationFirst'\n\nconst PaginationNext = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>((props, forwardedRef) => {\n  const { children, className, ...nextProps } = props\n\n  return (\n    <PaginationLink\n      {...nextProps}\n      ref={forwardedRef}\n      aria-label={props['aria-label'] ?? 'Next page'}\n      className={classNames('dsx-pagination__link--edge', className)}\n    >\n      {children ?? 'Next'}\n      <Icon name=\"chevron-right\" size=\"sm\" />\n    </PaginationLink>\n  )\n})\nPaginationNext.displayName = 'PaginationNext'\n\nconst PaginationLast = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>((props, forwardedRef) => {\n  const { children, className, ...lastProps } = props\n\n  return (\n    <PaginationLink\n      {...lastProps}\n      ref={forwardedRef}\n      aria-label={props['aria-label'] ?? 'Last page'}\n      className={classNames('dsx-pagination__link--edge', className)}\n    >\n      {children ?? 'Last'}\n      <Icon name=\"chevrons-right\" size=\"sm\" />\n    </PaginationLink>\n  )\n})\nPaginationLast.displayName = 'PaginationLast'\n\nconst PaginationEllipsis = React.forwardRef<HTMLSpanElement, PaginationEllipsisProps>((props, forwardedRef) => {\n  const { asChild, children, className, ...ellipsisProps } = extractProps(props, paginationEllipsisPropDefs)\n  const Comp = asChild && React.isValidElement(children) ? Slot : 'span'\n\n  return (\n    <Comp\n      {...ellipsisProps}\n      ref={forwardedRef}\n      aria-hidden=\"true\"\n      className={classNames('dsx-pagination__ellipsis', className)}\n    >\n      {children ?? <Icon name=\"dots-horizontal\" size=\"sm\" />}\n    </Comp>\n  )\n})\nPaginationEllipsis.displayName = 'PaginationEllipsis'\n\ninterface PaginationInfoProps extends React.ComponentPropsWithoutRef<'span'> {\n  totalCount: number\n  offset: number\n  limit: number\n  formatRange?: (start: number, end: number, totalCount: number) => React.ReactNode\n  zeroResultsLabel?: React.ReactNode\n}\n\nconst PaginationInfo = React.forwardRef<HTMLSpanElement, PaginationInfoProps>(\n  ({ totalCount, offset, limit, formatRange, zeroResultsLabel = 'No results', className, ...props }, forwardedRef) => {\n    const start = totalCount === 0 ? 0 : offset + 1\n    const end = Math.min(offset + limit, totalCount)\n\n    return (\n      <span {...props} ref={forwardedRef} className={classNames('dsx-pagination__info', className)}>\n        {totalCount === 0 ? zeroResultsLabel : (formatRange?.(start, end, totalCount) ?? `Showing ${start}\u2013${end} of ${totalCount}`)}\n      </span>\n    )\n  },\n)\nPaginationInfo.displayName = 'PaginationInfo'\n\ninterface PaginationStatusProps extends React.ComponentPropsWithoutRef<'span'> {\n  page: number\n  totalPages: number\n  formatStatus?: (page: number, totalPages: number) => React.ReactNode\n}\n\nconst PaginationStatus = React.forwardRef<HTMLSpanElement, PaginationStatusProps>(\n  ({ page, totalPages, formatStatus, className, role, ...props }, forwardedRef) => {\n    const safeTotal = Math.max(1, totalPages)\n    const safePage = Math.max(1, Math.min(page, safeTotal))\n\n    return (\n      <span {...props} ref={forwardedRef} role={role ?? 'status'} className={classNames('dsx-pagination__status', className)}>\n        {formatStatus?.(safePage, safeTotal) ?? `Page ${safePage} of ${safeTotal}`}\n      </span>\n    )\n  },\n)\nPaginationStatus.displayName = 'PaginationStatus'\n\ninterface PaginationPageSizeProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'value'> {\n  value: number\n  options?: number[]\n  onChange: (limit: number) => void\n  formatOption?: (limit: number) => React.ReactNode\n}\n\nfunction PaginationPageSize({\n  value,\n  options = [10, 25, 50, 100],\n  onChange,\n  formatOption,\n  className,\n  ...props\n}: PaginationPageSizeProps) {\n  return (\n    <SelectRoot value={String(value)} onValueChange={(next) => { onChange(Number(next)) }}>\n      <SelectTrigger className={classNames('dsx-pagination__page-size', className)} {...props}>\n        <SelectValue />\n      </SelectTrigger>\n      <SelectContent>\n        {options.map((opt) => (\n          <SelectItem key={opt} value={String(opt)}>\n            {formatOption?.(opt) ?? `${opt} per page`}\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </SelectRoot>\n  )\n}\nPaginationPageSize.displayName = 'PaginationPageSize'\n\ninterface PaginationPageInputProps extends Omit<\n  React.ComponentPropsWithoutRef<'input'>,\n  'value' | 'defaultValue' | 'onChange' | 'type' | 'min' | 'max'\n> {\n  page: number\n  totalPages: number\n  onPageChange: (page: number) => void\n  pageLabel?: React.ReactNode\n  formatOf?: (totalPages: number) => React.ReactNode\n}\n\nconst PaginationPageInput = React.forwardRef<HTMLInputElement, PaginationPageInputProps>(\n  (\n    {\n      page,\n      totalPages,\n      onPageChange,\n      pageLabel = 'Page',\n      formatOf = (total: number) => `of ${total}`,\n      className,\n      'aria-label': ariaLabel,\n      onKeyDown,\n      onBlur,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const [draft, setDraft] = React.useState<string | null>(null)\n\n    React.useEffect(() => {\n      setDraft(null)\n    }, [page, totalPages])\n\n    function commit(raw: string) {\n      const parsed = Number.parseInt(raw, 10)\n      setDraft(null)\n      if (Number.isNaN(parsed)) return\n      onPageChange(Math.max(1, Math.min(parsed, Math.max(1, totalPages))))\n    }\n\n    return (\n      <span className={classNames('dsx-pagination__page-input', className)}>\n        <span>{pageLabel}</span>\n        <input\n          {...props}\n          ref={forwardedRef}\n          type=\"number\"\n          min={1}\n          max={Math.max(1, totalPages)}\n          value={draft ?? page}\n          aria-label={ariaLabel ?? `Page number, page ${page} of ${Math.max(1, totalPages)}`}\n          onChange={(event) => setDraft(event.currentTarget.value)}\n          onBlur={(event) => {\n            commit(event.currentTarget.value)\n            onBlur?.(event)\n          }}\n          onKeyDown={(event) => {\n            if (event.key === 'Enter') commit(event.currentTarget.value)\n            onKeyDown?.(event)\n          }}\n        />\n        <span>{formatOf(Math.max(1, totalPages))}</span>\n      </span>\n    )\n  },\n)\nPaginationPageInput.displayName = 'PaginationPageInput'\n\nfunction buildPageNumbers(currentPage: number, totalPages: number): (number | 'ellipsis')[] {\n  if (totalPages <= 7) {\n    return Array.from({ length: totalPages }, (_, i) => i + 1)\n  }\n  if (currentPage <= 4) return [1, 2, 3, 4, 5, 'ellipsis', totalPages]\n  if (currentPage >= totalPages - 3) return [1, 'ellipsis', totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages]\n  return [1, 'ellipsis', currentPage - 1, currentPage, currentPage + 1, 'ellipsis', totalPages]\n}\n\ninterface PaginationMessages { formatRange?: (start: number, end: number, totalCount: number) => React.ReactNode; formatPageSize?: (limit: number) => React.ReactNode; zeroResults?: React.ReactNode; previous?: string; next?: string; first?: string; last?: string; pageInputLabel?: string; formatPageInputOf?: (totalPages: number) => React.ReactNode }\n\ninterface PaginationBarProps extends React.ComponentPropsWithoutRef<'div'> {\n  totalCount: number\n  offset: number\n  limit: number\n  pageSizeOptions?: number[]\n  size?: 'sm' | 'md' | 'lg'\n  onPageChange: (offset: number) => void\n  onLimitChange: (limit: number) => void\n  messages?: PaginationMessages\n  showFirstLast?: boolean\n  showPageInput?: boolean\n  dense?: boolean\n}\n\nconst PaginationBar = React.forwardRef<HTMLDivElement, PaginationBarProps>(\n  ({ totalCount, offset, limit, pageSizeOptions = [10, 25, 50, 100], size = 'md', onPageChange, onLimitChange, messages = {}, showFirstLast = false, showPageInput = false, dense = false, className, ...props }, ref) => {\n    const totalPages = Math.max(1, Math.ceil(totalCount / limit))\n    const currentPage = Math.floor(offset / limit) + 1\n    const pages = buildPageNumbers(currentPage, totalPages)\n\n    return (\n      <div {...props} ref={ref} className={classNames('dsx-pagination-bar', className)}>\n        <PaginationInfo totalCount={totalCount} offset={offset} limit={limit} formatRange={messages.formatRange} zeroResultsLabel={messages.zeroResults} />\n        <div className=\"dsx-pagination-bar__controls\">\n          {!dense ? (\n          <PaginationPageSize value={limit} options={pageSizeOptions} onChange={onLimitChange} formatOption={messages.formatPageSize} aria-label=\"Page size\" />\n          ) : null}\n          <Pagination size={size}>\n            <PaginationContent>\n              {showFirstLast ? (\n                <PaginationItem>\n                  <PaginationFirst\n                    disabled={currentPage <= 1}\n                    aria-label={messages.first ?? 'First page'}\n                    onClick={() => onPageChange(0)}\n                  >{messages.first}</PaginationFirst>\n                </PaginationItem>\n              ) : null}\n              <PaginationItem>\n                <PaginationPrevious\n                  disabled={currentPage <= 1}\n                  aria-label={messages.previous ?? 'Previous page'}\n                  onClick={() => onPageChange((currentPage - 2) * limit)}\n                >{messages.previous}</PaginationPrevious>\n              </PaginationItem>\n              {pages.map((page, i) =>\n                page === 'ellipsis' ? (\n                  <PaginationItem key={`ellipsis-${i}`}>\n                    <PaginationEllipsis />\n                  </PaginationItem>\n                ) : (\n                  <PaginationItem key={page}>\n                    <PaginationLink\n                      active={page === currentPage}\n                      onClick={() => onPageChange((page - 1) * limit)}\n                    >\n                      {page}\n                    </PaginationLink>\n                  </PaginationItem>\n                ),\n              )}\n              <PaginationItem>\n                <PaginationNext\n                  disabled={currentPage >= totalPages}\n                  aria-label={messages.next ?? 'Next page'}\n                  onClick={() => onPageChange(currentPage * limit)}\n                >{messages.next}</PaginationNext>\n              </PaginationItem>\n              {showFirstLast ? (\n                <PaginationItem>\n                  <PaginationLast\n                    disabled={currentPage >= totalPages}\n                    aria-label={messages.last ?? 'Last page'}\n                    onClick={() => onPageChange((totalPages - 1) * limit)}\n                  >{messages.last}</PaginationLast>\n                </PaginationItem>\n              ) : null}\n            </PaginationContent>\n          </Pagination>\n          {showPageInput ? (\n            <PaginationPageInput\n              page={currentPage}\n              totalPages={totalPages}\n              onPageChange={(nextPage) => onPageChange((nextPage - 1) * limit)}\n              pageLabel={messages.pageInputLabel ?? 'Page'}\n              formatOf={messages.formatPageInputOf}\n            />\n          ) : null}\n        </div>\n      </div>\n    )\n  },\n)\nPaginationBar.displayName = 'PaginationBar'\n\nexport {\n  buildPageNumbers,\n  Pagination,\n  PaginationBar,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationFirst,\n  PaginationInfo,\n  PaginationItem,\n  PaginationLast,\n  PaginationLink,\n  PaginationList,\n  PaginationNext,\n  PaginationPageInput,\n  PaginationPageSize,\n  PaginationPrevious,\n  PaginationStatus,\n}\nexport type {\n  PaginationBarProps,\n  PaginationEllipsisProps,\n  PaginationFirstProps,\n  PaginationInfoProps,\n  PaginationItemProps,\n  PaginationLastProps,\n  PaginationLinkProps,\n  PaginationMessages,\n  PaginationListProps,\n  PaginationPageInputProps,\n  PaginationPageSizeProps,\n  PaginationProps,\n  PaginationStatusProps,\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components/pagination.css

@@ -8,6 +8,8 @@
 .dsx-pagination__list {
   display: inline-flex;
   align-items: center;
+  flex-wrap: wrap;
+  row-gap: var(--dsx-space-xs);
   gap: var(--dsx-space-xs);
   padding: var(--dsx-space-xs);
   border-radius: var(--dsx-rounded-lg);
@@ -51,13 +53,13 @@
 }
 
 .dsx-pagination__link--active {
-  background: var(--dsx-color-accent-indicator);
+  background: var(--dsx-color-accent-track);
   color: var(--dsx-color-on-primary);
   font-weight: var(--dsx-typography-label-large-font-weight, 600);
 }
 
 .dsx-pagination__link--active:hover:not(:disabled):not([data-disabled]) {
-  background: var(--dsx-color-accent-indicator);
+  background: var(--dsx-color-accent-track);
   color: var(--dsx-color-on-primary);
 }
 
@@ -94,19 +96,27 @@
   white-space: nowrap;
 }
 
+.dsx-pagination__status {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--dsx-color-on-surface-variant);
+  font-family: var(--dsx-typography-body-medium-font-family), sans-serif;
+  font-size: var(--dsx-typography-body-medium-font-size);
+  white-space: nowrap;
+}
+
 .dsx-pagination__page-size {
-  appearance: none;
   display: inline-flex;
   align-items: center;
+  min-width: 8rem;
   height: var(--dsx-size-lg);
   padding: 0 var(--dsx-space-sm);
   border: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
   border-radius: var(--dsx-rounded-md);
-  background: var(--dsx-color-surface);
   color: var(--dsx-color-on-surface);
   font-family: var(--dsx-typography-label-large-font-family), sans-serif;
   font-size: var(--dsx-typography-label-large-font-size);
-  cursor: pointer;
 }
 
 .dsx-pagination__page-size:focus-visible {
@@ -114,6 +124,32 @@
   box-shadow: var(--dsx-shadow-focus-ring);
 }
 
+.dsx-pagination__page-input {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dsx-space-xs);
+  color: var(--dsx-color-on-surface-variant);
+  font-family: var(--dsx-typography-body-medium-font-family), sans-serif;
+  font-size: var(--dsx-typography-body-medium-font-size);
+  white-space: nowrap;
+}
+
+.dsx-pagination__page-input input {
+  width: var(--dsx-size-3xl);
+  height: var(--dsx-size-lg);
+  padding: 0 var(--dsx-space-xs);
+  border: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
+  border-radius: var(--dsx-rounded-md);
+  background: var(--dsx-color-surface);
+  color: var(--dsx-color-on-surface);
+  text-align: center;
+}
+
+.dsx-pagination__page-input input:focus-visible {
+  outline: none;
+  box-shadow: var(--dsx-shadow-focus-ring);
+}
+
 .dsx-pagination__item {
   display: inline-flex;
   align-items: center;
@@ -158,12 +194,18 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--dsx-space-md);
+  flex-wrap: wrap;
+  row-gap: var(--dsx-space-sm);
+  column-gap: var(--dsx-space-md);
+  min-width: 0;
 }
 
 .dsx-pagination-bar__controls {
   display: flex;
   align-items: center;
-  gap: var(--dsx-space-sm);
-  flex-shrink: 0;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  row-gap: var(--dsx-space-xs);
+  column-gap: var(--dsx-space-sm);
+  min-width: 0;
 }

package/dist/components/password-input.css

@@ -34,9 +34,11 @@
   padding-block: var(--dsx-density-control-padding-block-lg, var(--dsx-space-md));
 }
 
-/* Variant — classic: elevated shadow over default surface border */
+/* Variant — classic: raised fill + elevation over the default surface shell, so it
+   reads distinct from the default surface shell on both themes. */
 .dsx-password-input[data-variant='classic'] .dsx-password-input__shell {
-  box-shadow: var(--dsx-effect-shadow-1);
+  background: var(--dsx-color-surface-raised);
+  box-shadow: var(--dsx-shadow-elevation-2);
 }
 
 /* Variant — ghost: no border or background until focused */