colibri-ui 0.8.92 → 0.8.94

package/Select/index.js

@@ -31,9 +31,14 @@ const Select = ({
   fullWidth = false,
   customInputRoot,
   className,
-  onChange
+  onChange,
+  "aria-label": ariaLabel
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
+  const id = React.useId();
+  const labelId = label ? `${id}-label` : undefined;
+  const valueId = `${id}-value`;
+  const hintId = hint ? `${id}-hint` : undefined;
   const preparedOptions = React.useMemo(() => options.map(({
     value: lvalue,
     label: llabel,
@@ -56,7 +61,9 @@ const Select = ({
     }, className),
     required: required,
     label: label,
+    labelId: labelId,
     hint: hint,
+    hintId: hintId,
     hasError: hasError
   }, /*#__PURE__*/React__default.default.createElement(index$1.Dropdown, {
     placement: "bottom-start",
@@ -72,7 +79,11 @@ const Select = ({
     }),
     samewidth: true
   }, customInputRoot ? customInputRoot : (/*#__PURE__*/React__default.default.createElement("div", {
-    tabIndex: 0,
+    "aria-describedby": hintId,
+    "aria-disabled": disabled || undefined,
+    "aria-label": labelId ? undefined : ariaLabel,
+    "aria-labelledby": labelId ? `${labelId} ${valueId}` : undefined,
+    tabIndex: disabled ? -1 : 0,
     role: "button",
     style: {
       width: fullWidth ? "100%" : "fit-content"
@@ -92,6 +103,7 @@ const Select = ({
     }),
     disabled: Boolean(disabled)
   }, /*#__PURE__*/React__default.default.createElement("div", {
+    id: valueId,
     className: styles__default.default["base-input"],
     "data-testid": "base-input"
   }, preparedLabel !== null && preparedLabel !== void 0 ? preparedLabel : (/*#__PURE__*/React__default.default.createElement("span", {

package/Select/index.props.d.ts

@@ -10,7 +10,9 @@ export interface IOption<T extends string> {
     label: ReactNode;
     value: T;
 }
-export interface SelectProps<T extends string> extends Omit<FormFieldProps, "children"> {
+export interface SelectProps<T extends string> extends Omit<FormFieldProps, "children" | "labelId"> {
+    /** Accessible name of the trigger when no visible `label` is passed. */
+    "aria-label"?: string;
     className?: string;
     customInputRoot?: ReactNode;
     disabled?: boolean;

package/Theme/index.d.ts

@@ -687,6 +687,11 @@ export declare const THEMES: {
         "component-calendar-fade-inline-size": string;
         "component-calendar-day-size": string;
         "component-calendar-day-radius": string;
+        "component-pagination-text": string;
+        "component-pagination-text-current": string;
+        "component-pagination-bg-current": string;
+        "component-pagination-bg-hover": string;
+        "component-pagination-focus-ring": string;
         "component-navigation-item-bg-selected": string;
         "component-chip-bg-selected": string;
         "component-chip-bg-selected-strong": string;
@@ -1526,6 +1531,11 @@ export declare const THEMES: {
         "component-calendar-fade-inline-size": string;
         "component-calendar-day-size": string;
         "component-calendar-day-radius": string;
+        "component-pagination-text": string;
+        "component-pagination-text-current": string;
+        "component-pagination-bg-current": string;
+        "component-pagination-bg-hover": string;
+        "component-pagination-focus-ring": string;
         "component-navigation-item-bg-selected": string;
         "component-chip-bg-selected": string;
         "component-chip-bg-selected-strong": string;

package/Theme/themes/buenos_aires.d.ts

@@ -608,6 +608,11 @@ declare const _default: {
     "component-calendar-fade-inline-size": string;
     "component-calendar-day-size": string;
     "component-calendar-day-radius": string;
+    "component-pagination-text": string;
+    "component-pagination-text-current": string;
+    "component-pagination-bg-current": string;
+    "component-pagination-bg-hover": string;
+    "component-pagination-focus-ring": string;
     "component-navigation-item-bg-selected": string;
     "component-chip-bg-selected": string;
     "component-chip-bg-selected-strong": string;

package/Theme/themes/buenos_aires.js

@@ -614,6 +614,11 @@ var THEME_BA = {
   "component-calendar-fade-inline-size": "2.5rem",
   "component-calendar-day-size": "2rem",
   "component-calendar-day-radius": "0.375rem",
+  "component-pagination-text": theme_buenos_aires.default.BRAND_BA_FOREST,
+  "component-pagination-text-current": theme_buenos_aires.default.BRAND_BA_LIME,
+  "component-pagination-bg-current": theme_buenos_aires.default.BRAND_BA_FOREST,
+  "component-pagination-bg-hover": theme_buenos_aires.default.NEUTRAL_BA_100,
+  "component-pagination-focus-ring": theme_buenos_aires.default.BRAND_BA_LIME,
   "component-navigation-item-bg-selected": theme_buenos_aires.default.BRAND_BA_FOREST,
   "component-chip-bg-selected": theme_buenos_aires.default.BRAND_BA_FOREST,
   "component-chip-bg-selected-strong": theme_buenos_aires.default.BRAND_BA_LIME,

package/Theme/themes/jaipur.d.ts

@@ -608,6 +608,11 @@ declare const _default: {
     "component-calendar-fade-inline-size": string;
     "component-calendar-day-size": string;
     "component-calendar-day-radius": string;
+    "component-pagination-text": string;
+    "component-pagination-text-current": string;
+    "component-pagination-bg-current": string;
+    "component-pagination-bg-hover": string;
+    "component-pagination-focus-ring": string;
     "component-navigation-item-bg-selected": string;
     "component-chip-bg-selected": string;
     "component-chip-bg-selected-strong": string;

package/Theme/themes/jaipur.js

@@ -614,6 +614,11 @@ var theme_jaipur = {
   "component-calendar-fade-inline-size": "2.5rem",
   "component-calendar-day-size": "2rem",
   "component-calendar-day-radius": "0.375rem",
+  "component-pagination-text": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
+  "component-pagination-text-current": theme_jaipur$1.default.BRAND_JP_PINK,
+  "component-pagination-bg-current": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
+  "component-pagination-bg-hover": theme_jaipur$1.default.NEUTRAL_JP_100,
+  "component-pagination-focus-ring": theme_jaipur$1.default.BRAND_JP_PINK,
   "component-navigation-item-bg-selected": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
   "component-chip-bg-selected": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
   "component-chip-bg-selected-strong": theme_jaipur$1.default.BRAND_JP_PINK,

package/TimeSelect/index.js

@@ -28,7 +28,8 @@ const TimeSelect = ({
   size,
   zIndex,
   hasError,
-  hint
+  hint,
+  "aria-label": ariaLabel
 }) => {
   const baseOptions = React.useMemo(() => helpers.generateSuggest(interval).map(item => ({
     value: item.time,
@@ -43,6 +44,7 @@ const TimeSelect = ({
     });
   }), [baseOptions, currentDate, selectedDate, allowedTimeRange, interval]);
   return /*#__PURE__*/React__default.default.createElement(index$1.Select, {
+    "aria-label": ariaLabel,
     className: className,
     customInputRoot: customInputRoot,
     fontSize: fontSize,

package/base/FormField/index.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import type { FormFieldProps } from "./index.props";
-export declare const FormField: ({ label, hint, children, hasError, hintId, htmlFor, required, className, ref, }: FormFieldProps) => React.JSX.Element;
+export declare const FormField: ({ label, hint, children, hasError, hintId, htmlFor, labelId, required, className, ref, }: FormFieldProps) => React.JSX.Element;

package/base/FormField/index.js

@@ -18,6 +18,7 @@ const FormField = ({
   hasError,
   hintId,
   htmlFor,
+  labelId,
   required,
   className,
   ref
@@ -29,7 +30,8 @@ const FormField = ({
     [styles__default.default.label_required]: Boolean(required)
   }),
   tag: "label",
-  htmlFor: htmlFor
+  htmlFor: htmlFor,
+  id: labelId
 }, label)), children, hint && (/*#__PURE__*/React__default.default.createElement(index.Typography, {
   id: hintId,
   className: clsx__default.default({

package/base/FormField/index.props.d.ts

@@ -9,6 +9,8 @@ export type FormFieldProps = PropsWithChildren<{
     /** Id of the control the label belongs to. */
     htmlFor?: string;
     label?: ReactNode;
+    /** Id of the label, referenced by the control's `aria-labelledby`. */
+    labelId?: string;
     ref?: React.Ref<HTMLDivElement>;
     required?: boolean;
 }>;

package/esm/Datepicker/components/DatePicker/index.js

@@ -31,6 +31,7 @@ const DatePicker = _a => {
   var _b;
   var {
       className,
+      disabled = false,
       endPlaceholder,
       hasError,
       hint,
@@ -47,7 +48,7 @@ const DatePicker = _a => {
       onChangeDate,
       onChangeRange
     } = _a,
-    calendarProps = __rest(_a, ["className", "endPlaceholder", "hasError", "hint", "label", "placeholder", "required", "selectedDate", "selectedRange", "selectionMode", "size", "defaultVisibleMonth", "monthsToShow", "startPlaceholder", "onChangeDate", "onChangeRange"]);
+    calendarProps = __rest(_a, ["className", "disabled", "endPlaceholder", "hasError", "hint", "label", "placeholder", "required", "selectedDate", "selectedRange", "selectionMode", "size", "defaultVisibleMonth", "monthsToShow", "startPlaceholder", "onChangeDate", "onChangeRange"]);
   const [date, setDate] = useState(selectedDate);
   const [range, setRange] = useState(selectedRange);
   const [isOpen, setIsOpen] = useState(false);
@@ -56,6 +57,7 @@ const DatePicker = _a => {
   const calendarSize = calendarSizeByDatepickerSize[size];
   const visibleMonth = (_b = calendarValue !== null && calendarValue !== void 0 ? calendarValue : calendarRangeValue[0]) !== null && _b !== void 0 ? _b : new Date();
   const isRangeMode = selectionMode === "range";
+  const isCalendarOpen = isOpen && !disabled;
   useEffect(() => {
     setDate(selectedDate);
   }, [selectedDate]);
@@ -65,12 +67,14 @@ const DatePicker = _a => {
     setRange([selectedRangeStart, selectedRangeEnd]);
   }, [isRangeMode, selectedRangeStart, selectedRangeEnd]);
   const handleDateChange = nextDate => {
+    if (disabled) return;
     const nextValue = toISODate(nextDate);
     setDate(nextValue);
     setIsOpen(false);
     onChangeDate === null || onChangeDate === void 0 ? void 0 : onChangeDate(nextValue);
   };
   const handleRangeChange = nextRange => {
+    if (disabled) return;
     const nextValue = [nextRange[0] ? toISODate(nextRange[0]) : "", nextRange[1] ? toISODate(nextRange[1]) : ""];
     setRange(nextValue);
     if (nextValue[0] && nextValue[1]) setIsOpen(false);
@@ -102,14 +106,15 @@ const DatePicker = _a => {
     className: styles["range-input"]
   }, /*#__PURE__*/React.createElement(InputRoot, {
     className: styles["range-control-start"],
-    disabled: false,
+    disabled: disabled,
     hasError: hasError,
     size: size
   }, /*#__PURE__*/React.createElement(BaseInput, {
-    "aria-expanded": isOpen,
+    "aria-expanded": isCalendarOpen,
     "aria-haspopup": "true",
     "aria-invalid": hasError,
     autoComplete: "off",
+    disabled: disabled,
     maxLength: 10,
     placeholder: startPlaceholder !== null && startPlaceholder !== void 0 ? startPlaceholder : placeholder,
     readOnly: true,
@@ -117,15 +122,16 @@ const DatePicker = _a => {
     value: toDMYDate(range[0])
   })), /*#__PURE__*/React.createElement(InputRoot, {
     className: styles["range-control-end"],
-    disabled: false,
+    disabled: disabled,
     endIcon: /*#__PURE__*/React.createElement(CalendarIcon, null),
     hasError: hasError,
     size: size
   }, /*#__PURE__*/React.createElement(BaseInput, {
-    "aria-expanded": isOpen,
+    "aria-expanded": isCalendarOpen,
     "aria-haspopup": "true",
     "aria-invalid": hasError,
     autoComplete: "off",
+    disabled: disabled,
     maxLength: 10,
     placeholder: endPlaceholder !== null && endPlaceholder !== void 0 ? endPlaceholder : placeholder,
     readOnly: true,
@@ -138,7 +144,8 @@ const DatePicker = _a => {
     hint: hint,
     hasError: hasError
   }, /*#__PURE__*/React.createElement(Dropdown, {
-    visible: isOpen,
+    disabled: disabled,
+    visible: isCalendarOpen,
     onVisibleChange: setIsOpen,
     placement: "bottom",
     preventAutoClose: true,
@@ -147,13 +154,16 @@ const DatePicker = _a => {
       className: styles["calendar-popup"]
     }, renderCalendar())
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles.trigger
+    "aria-disabled": disabled || undefined,
+    className: styles.trigger,
+    tabIndex: disabled ? -1 : 0
   }, isRangeMode ? renderRangeInput() : (/*#__PURE__*/React.createElement(Input, {
     className: styles.input,
-    "aria-expanded": isOpen,
+    "aria-expanded": isCalendarOpen,
     "aria-haspopup": "true",
     "aria-invalid": hasError,
     autoComplete: "off",
+    disabled: disabled,
     endIcon: /*#__PURE__*/React.createElement(CalendarIcon, null),
     hasError: hasError,
     maxLength: 10,

package/esm/Datepicker/components/DatePicker/index.props.d.ts

@@ -1,6 +1,7 @@
 import type { DatepickerSize, DatepickerCalendarProps, Props as DatepickerProps } from "../../index.props";
 export type DatePickerProps = DatepickerCalendarProps & {
     className?: string;
+    disabled?: boolean;
     endPlaceholder?: string;
     hasError?: boolean;
     hint?: DatepickerProps["hint"];

package/esm/Datepicker/index.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import type { Props } from "./index.props";
-export declare const Datepicker: ({ className, endPlaceholder, hasError, hint, label, placeholder, required, selectedDate, selectedRange, selectionMode, size, startPlaceholder, onChangeDate, onChangeRange, ...calendarProps }: Props) => React.JSX.Element;
+export declare const Datepicker: ({ className, disabled, endPlaceholder, hasError, hint, label, placeholder, required, selectedDate, selectedRange, selectionMode, size, startPlaceholder, onChangeDate, onChangeRange, ...calendarProps }: Props) => React.JSX.Element;

package/esm/Datepicker/index.js

@@ -7,6 +7,7 @@ import { DatePicker } from './components/DatePicker/index.js';
 const Datepicker = _a => {
   var {
       className,
+      disabled,
       endPlaceholder,
       hasError,
       hint,
@@ -21,10 +22,11 @@ const Datepicker = _a => {
       onChangeDate,
       onChangeRange
     } = _a,
-    calendarProps = __rest(_a, ["className", "endPlaceholder", "hasError", "hint", "label", "placeholder", "required", "selectedDate", "selectedRange", "selectionMode", "size", "startPlaceholder", "onChangeDate", "onChangeRange"]);
+    calendarProps = __rest(_a, ["className", "disabled", "endPlaceholder", "hasError", "hint", "label", "placeholder", "required", "selectedDate", "selectedRange", "selectionMode", "size", "startPlaceholder", "onChangeDate", "onChangeRange"]);
   return /*#__PURE__*/React.createElement("div", {
     className: clsx(styles.root, className)
   }, /*#__PURE__*/React.createElement(DatePicker, Object.assign({}, calendarProps, {
+    disabled: disabled,
     endPlaceholder: endPlaceholder,
     hasError: hasError,
     hint: hint,

package/esm/Datepicker/index.props.d.ts

@@ -6,6 +6,7 @@ export type DatepickerRangeValue = [string, string];
 export type DatepickerCalendarProps = Omit<CalendarCommonProps, "className" | "size">;
 export type Props = DatepickerCalendarProps & {
     className?: string;
+    disabled?: boolean;
     endPlaceholder?: string;
     hasError?: boolean;
     hint?: ReactNode;

package/esm/MultiSelect/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useState, useId, useMemo, useCallback } from 'react';
 import clsx from 'clsx';
 import { Dropdown } from '../Dropdown/index.js';
 import { InputRoot } from '../base/InputRoot/index.js';
@@ -31,9 +31,14 @@ const MultiSelect = ({
   name,
   value = [],
   type,
-  onChange
+  onChange,
+  "aria-label": ariaLabel
 }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const id = useId();
+  const labelId = label ? `${id}-label` : undefined;
+  const valueId = `${id}-value`;
+  const hintId = hint ? `${id}-hint` : undefined;
   const internalSelectedKeys = useMemo(() => value.map(toKey), [value]);
   const preparedGroups = useMemo(() => groups.map(group => Object.assign(Object.assign({}, group), {
     options: group.options.map(option => Object.assign(Object.assign({}, option), {
@@ -72,7 +77,9 @@ const MultiSelect = ({
     }, className),
     required: required,
     label: label,
+    labelId: labelId,
     hint: hint,
+    hintId: hintId,
     hasError: hasError
   }, /*#__PURE__*/React.createElement(Dropdown, {
     placement: "bottom-start",
@@ -88,7 +95,11 @@ const MultiSelect = ({
     }),
     samewidth: true
   }, /*#__PURE__*/React.createElement("div", {
-    tabIndex: 0,
+    "aria-describedby": hintId,
+    "aria-disabled": disabled || undefined,
+    "aria-label": labelId ? undefined : ariaLabel,
+    "aria-labelledby": labelId ? `${labelId} ${valueId}` : undefined,
+    tabIndex: disabled ? -1 : 0,
     role: "button",
     style: {
       width: fullWidth ? "100%" : "fit-content"
@@ -110,6 +121,7 @@ const MultiSelect = ({
     }),
     disabled: Boolean(disabled)
   }, /*#__PURE__*/React.createElement("div", {
+    id: valueId,
     className: clsx(styles["base-input"], styles[type === "chip" ? "base-input-flex" : "base-input-text"])
   }, preparedLabel.length ? type === "chip" ?
   // eslint-disable-next-line @typescript-eslint/no-shadow

package/esm/MultiSelect/index.props.d.ts

@@ -20,7 +20,9 @@ export type SelectedItem = {
     group: string;
     option: string;
 };
-export interface MultiSelectProps extends Omit<FormFieldProps, "children"> {
+export interface MultiSelectProps extends Omit<FormFieldProps, "children" | "labelId"> {
+    /** Accessible name of the trigger when no visible `label` is passed. */
+    "aria-label"?: string;
     groups: GroupProps[];
     className?: string;
     zIndex?: number;

package/esm/Pagination/Pagination.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { PaginationProps } from "./index.props";
+export declare const Pagination: ({ totalPages, page, defaultPage, onPageChange, siblingCount, boundaryCount, disabledPages, disabled, mode, size, pageSize, defaultPageSize, pageSizeOptions, onPageSizeChange, showPageSize, showQuickJump, helperText, previousLabel, nextLabel, pageLabel, quickJumpLabel, pageSizeLabel, className, ref, "aria-label": ariaLabel, ...props }: PaginationProps) => React.JSX.Element;

package/esm/Pagination/Pagination.js

@@ -0,0 +1,154 @@
+import { __rest } from 'tslib';
+import React, { useState, useMemo } from 'react';
+import clsx from 'clsx';
+import { Chevron } from '../Icons/Chevron.js';
+import { Input } from '../Input/index.js';
+import { Select } from '../Select/index.js';
+import { clamp, getPaginationItems, findEnabledPage, toTotalPages } from './helpers.js';
+import styles from './Pagination.module.css';
+
+const NO_PAGES = [];
+const DEFAULT_PAGE_SIZE_OPTIONS = [20, 50, 100];
+const defaultPageLabel = page => `Page ${page}`;
+const Pagination = _a => {
+  var {
+      totalPages,
+      page,
+      defaultPage = 1,
+      onPageChange,
+      siblingCount = 1,
+      boundaryCount = 1,
+      disabledPages = NO_PAGES,
+      disabled = false,
+      mode = "default",
+      size = "m",
+      pageSize,
+      defaultPageSize = 20,
+      pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
+      onPageSizeChange,
+      showPageSize = false,
+      showQuickJump = false,
+      helperText,
+      previousLabel = "Previous page",
+      nextLabel = "Next page",
+      pageLabel = defaultPageLabel,
+      quickJumpLabel = "Go to page",
+      pageSizeLabel = "Per page",
+      className,
+      ref,
+      "aria-label": ariaLabel = "Pagination"
+    } = _a,
+    props = __rest(_a, ["totalPages", "page", "defaultPage", "onPageChange", "siblingCount", "boundaryCount", "disabledPages", "disabled", "mode", "size", "pageSize", "defaultPageSize", "pageSizeOptions", "onPageSizeChange", "showPageSize", "showQuickJump", "helperText", "previousLabel", "nextLabel", "pageLabel", "quickJumpLabel", "pageSizeLabel", "className", "ref", "aria-label"]);
+  const total = toTotalPages(totalPages);
+  const [internalPage, setInternalPage] = useState(() => clamp(defaultPage, 1, total));
+  const currentPage = clamp(page !== null && page !== void 0 ? page : internalPage, 1, total);
+  const [internalPageSize, setInternalPageSize] = useState(defaultPageSize);
+  const currentPageSize = pageSize !== null && pageSize !== void 0 ? pageSize : internalPageSize;
+  const [quickJumpDraft, setQuickJumpDraft] = useState(null);
+  const disabledSet = useMemo(() => new Set(disabledPages), [disabledPages]);
+  const items = useMemo(() => getPaginationItems(total, currentPage, siblingCount, boundaryCount), [total, currentPage, siblingCount, boundaryCount]);
+  const pageSizeSelectOptions = useMemo(() => pageSizeOptions.map(option => ({
+    value: String(option),
+    label: option
+  })), [pageSizeOptions]);
+  const previousPage = findEnabledPage(currentPage, -1, total, disabledSet);
+  const nextPage = findEnabledPage(currentPage, 1, total, disabledSet);
+  const changePage = nextValue => {
+    const next = clamp(Math.floor(nextValue), 1, total);
+    if (disabled || disabledSet.has(next) || next === currentPage) return;
+    if (page === undefined) setInternalPage(next);
+    onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(next);
+  };
+  const commitQuickJump = () => {
+    if (quickJumpDraft === null) return;
+    const parsed = Number(quickJumpDraft);
+    if (quickJumpDraft.trim() !== "" && Number.isInteger(parsed)) {
+      changePage(parsed);
+    }
+    setQuickJumpDraft(null);
+  };
+  const changePageSize = next => {
+    if (pageSize === undefined) setInternalPageSize(next);
+    onPageSizeChange === null || onPageSizeChange === void 0 ? void 0 : onPageSizeChange(next);
+  };
+  const hasActions = showQuickJump || showPageSize || Boolean(helperText);
+  return /*#__PURE__*/React.createElement("nav", Object.assign({}, props, {
+    ref: ref,
+    "aria-label": ariaLabel,
+    className: clsx(styles.root, styles[`size_${size}`], {
+      [styles.root_disabled]: disabled
+    }, className)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.main
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: styles.arrow,
+    "aria-label": previousLabel,
+    disabled: disabled || previousPage === undefined,
+    onClick: () => {
+      if (previousPage !== undefined) changePage(previousPage);
+    }
+  }, /*#__PURE__*/React.createElement(Chevron, {
+    className: styles.arrow_previous,
+    width: 16,
+    height: 16,
+    "aria-hidden": "true"
+  })), mode === "compact" ? (/*#__PURE__*/React.createElement("span", {
+    className: styles.counter,
+    "aria-live": "polite"
+  }, /*#__PURE__*/React.createElement("strong", null, currentPage), /*#__PURE__*/React.createElement("span", null, "/"), total)) : (/*#__PURE__*/React.createElement("div", {
+    className: styles.pages
+  }, items.map(item => typeof item === "number" ? (/*#__PURE__*/React.createElement("button", {
+    type: "button",
+    key: item,
+    className: clsx(styles.page, {
+      [styles.page_current]: item === currentPage
+    }),
+    "aria-label": pageLabel(item),
+    "aria-current": item === currentPage ? "page" : undefined,
+    disabled: disabled || disabledSet.has(item),
+    onClick: () => changePage(item)
+  }, item)) : (/*#__PURE__*/React.createElement("span", {
+    key: item,
+    className: styles.ellipsis,
+    "aria-hidden": "true"
+  }, "\u2026"))))), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: styles.arrow,
+    "aria-label": nextLabel,
+    disabled: disabled || nextPage === undefined,
+    onClick: () => {
+      if (nextPage !== undefined) changePage(nextPage);
+    }
+  }, /*#__PURE__*/React.createElement(Chevron, {
+    className: styles.arrow_next,
+    width: 16,
+    height: 16,
+    "aria-hidden": "true"
+  }))), hasActions && (/*#__PURE__*/React.createElement("div", {
+    className: styles.actions
+  }, showQuickJump && (/*#__PURE__*/React.createElement(Input, {
+    className: styles.jump,
+    size: size,
+    label: quickJumpLabel,
+    inputMode: "numeric",
+    value: quickJumpDraft !== null && quickJumpDraft !== void 0 ? quickJumpDraft : String(currentPage),
+    disabled: disabled,
+    onChange: (_, value) => setQuickJumpDraft(value),
+    onBlur: commitQuickJump,
+    onKeyDown: event => {
+      if (event.key === "Enter") commitQuickJump();
+    }
+  })), showPageSize && (/*#__PURE__*/React.createElement(Select, {
+    size: size,
+    label: pageSizeLabel,
+    options: pageSizeSelectOptions,
+    value: String(currentPageSize),
+    disabled: disabled,
+    onChange: value => changePageSize(Number(value))
+  })), helperText && /*#__PURE__*/React.createElement("div", {
+    className: styles.helper
+  }, helperText))));
+};
+
+export { Pagination };