@moysklad/uikit 28.1.0

package/dist/components/Multiselect/TextField/MultiselectTextField.module.js

@@ -0,0 +1,8 @@
+import "./MultiselectTextField_module.css";
+const MultiselectTextField_module = {
+    container: "container-fcTE5A",
+    textarea: "textarea-MerwHD",
+    chipsContainer: "chipsContainer-IjUDLc",
+    chip: "chip-lzk48k"
+};
+export default MultiselectTextField_module;

package/dist/components/Multiselect/TextField/MultiselectTextField_module.css

@@ -0,0 +1,50 @@
+.container-fcTE5A {
+  position: relative;
+}
+
+.container-fcTE5A .textarea-MerwHD textarea {
+  padding: 6px;
+}
+
+.container-fcTE5A .chipsContainer-IjUDLc {
+  --height-value: 100%;
+  --padding-top-value: 6px;
+  --padding-bottom-value: 6px;
+  --padding-left-value: 6px;
+  --padding-right-value: 6px;
+  top: var(--padding-top-value);
+  left: var(--padding-left-value);
+  width: calc(100% - var(--padding-left-value) - var(--padding-right-value));
+  max-width: 100%;
+  max-height: calc(var(--height-value) - var(--padding-top-value) - var(--padding-bottom-value));
+  flex-wrap: wrap;
+  gap: 4px;
+  display: flex;
+  position: absolute;
+  overflow: hidden auto;
+}
+
+.container-fcTE5A .chipsContainer-IjUDLc::-webkit-scrollbar {
+  width: 15px;
+}
+
+.container-fcTE5A .chipsContainer-IjUDLc::-webkit-scrollbar-track {
+  background: var(--light-white);
+}
+
+.container-fcTE5A .chipsContainer-IjUDLc::-webkit-scrollbar-thumb {
+  border: 4px solid var(--light-white);
+  background-color: var(--light-grey-400);
+  border-radius: 8px;
+}
+
+.container-fcTE5A .chipsContainer-IjUDLc .chip-lzk48k {
+  flex: unset;
+  width: unset;
+  max-width: 100%;
+}
+
+.container-fcTE5A .chipsContainer-IjUDLc .chip-lzk48k p {
+  flex: 1;
+}
+

package/dist/components/Multiselect/TooltipedChip/TooltipedChip.d.ts

@@ -0,0 +1,21 @@
+import { type KeyboardEventHandler, type MouseEventHandler, type ReactNode } from 'react';
+import { type IHasTestId } from '../../../common/types';
+import { type InputValue, type RenderSelectedItem } from '../../Multiselect/types';
+import styles from './TooltipedChip.module.scss';
+export interface TooltipedChipProps extends IHasTestId {
+    text: ReactNode;
+    minWidth: number;
+    tooltipDelay?: number;
+    onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+    onIconClick?: MouseEventHandler<HTMLDivElement>;
+    className?: string;
+    bodyTextClassName?: string;
+    disabled?: boolean;
+    isShowHint?: boolean;
+    hintText?: string;
+    item?: InputValue;
+    leadingIcon?: ReactNode;
+    renderSelectedItem?: RenderSelectedItem;
+}
+export declare const TooltipedChip: import("react").ForwardRefExoticComponent<TooltipedChipProps & import("react").RefAttributes<HTMLButtonElement>>;
+export { styles as chipStyles };

package/dist/components/Multiselect/TooltipedChip/TooltipedChip.js

@@ -0,0 +1,90 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { cn } from "../../../common/css/cn.js";
+import { Chip } from "../../Chip/Chip.js";
+import { Hint } from "../../Hint/Hint.js";
+import { Text, TextColor } from "../../Text/Text.js";
+import { RemoveClose12Icon } from "../../../icon/index.js";
+import TooltipedChip_module from "./TooltipedChip.module.js";
+const TooltipedChip = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const chipRef = useRef();
+    const [isTextSliced, setIsTextSliced] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    useEffect(()=>{
+        const handleResize = ()=>{
+            const textItem = chipRef.current?.children.item(0);
+            if (!textItem) return;
+            setIsTextSliced(textItem.scrollWidth > textItem.clientWidth);
+        };
+        const resizeObserver = new ResizeObserver(handleResize);
+        if (chipRef.current) resizeObserver.observe(chipRef.current);
+        return ()=>{
+            resizeObserver.disconnect();
+        };
+    }, [
+        isTextSliced
+    ]);
+    useEffect(()=>{
+        if (isFocused) chipRef.current?.focus();
+    }, [
+        isTextSliced
+    ]);
+    const chipNode = /*#__PURE__*/ jsx(Chip, {
+        isActive: true,
+        ref: (element)=>{
+            chipRef.current = element;
+            if (!ref) return;
+            if ('function' == typeof ref) ref(element);
+            else ref.current = element;
+        },
+        onFocus: ()=>{
+            setIsFocused(true);
+        },
+        onBlur: ()=>{
+            setIsFocused(false);
+        },
+        onClick: ()=>{},
+        onKeyDown: props.onKeyDown,
+        icon: /*#__PURE__*/ jsx("div", {
+            "data-test-id": props.testId ? `${props.testId}-remove-icon` : '',
+            className: TooltipedChip_module.chipsIcon,
+            onClick: props.onIconClick,
+            children: /*#__PURE__*/ jsx(RemoveClose12Icon, {})
+        }),
+        isTextEllipsis: true,
+        style: {
+            '--min-chips-width': `${props.minWidth}px`,
+            '--chip-text-overflow-value': isTextSliced ? 'ellipsis' : 'clip'
+        },
+        className: cn(TooltipedChip_module.chip, TooltipedChip_module.multiselectChip, props.className ?? ''),
+        bodyTextClassName: props.bodyTextClassName,
+        disabled: props.disabled,
+        testId: props.testId,
+        children: props.text
+    });
+    const HintChipNode = /*#__PURE__*/ jsx(Hint, {
+        zIndex: 100,
+        mouseEnterDelay: props.tooltipDelay ?? 0.3,
+        overlay: /*#__PURE__*/ jsx(Text.Body, {
+            className: TooltipedChip_module.chipTooltip,
+            colorToken: TextColor.invert,
+            children: props.hintText || props.text
+        }),
+        testId: props.testId ? `${props.testId}-hint` : void 0,
+        children: chipNode
+    });
+    if (props.renderSelectedItem) return props.renderSelectedItem({
+        element: isTextSliced ? HintChipNode : chipNode,
+        chipRef: ref,
+        onKeyDown: props.onKeyDown,
+        onIconClick: props.onIconClick,
+        item: props.item,
+        className: props.className
+    });
+    if (!isTextSliced && !props.isShowHint) return /*#__PURE__*/ jsx(Fragment, {
+        children: chipNode
+    });
+    return HintChipNode;
+});
+TooltipedChip.displayName = 'TooltipedChip';
+export { TooltipedChip, TooltipedChip_module as chipStyles };

package/dist/components/Multiselect/TooltipedChip/TooltipedChip.module.js

@@ -0,0 +1,8 @@
+import "./TooltipedChip_module.css";
+const TooltipedChip_module = {
+    chip: "chip-ENPdAw",
+    multiselectChip: "multiselectChip-J06nE4",
+    chipsIcon: "chipsIcon-P7fjHs",
+    chipTooltip: "chipTooltip-TYe_vW"
+};
+export default TooltipedChip_module;

package/dist/components/Multiselect/TooltipedChip/TooltipedChip_module.css

@@ -0,0 +1,36 @@
+.chip-ENPdAw.multiselectChip-J06nE4 {
+  --flex-value: 1;
+  --min-chips-width: 64px;
+  --chip-text-overflow-value: ellipsis;
+  flex: var(--flex-value);
+  width: var(--min-chips-width);
+  min-width: var(--min-chips-width);
+  white-space: nowrap;
+  border-radius: 4px;
+  justify-content: space-between;
+  gap: 4px;
+  max-width: fit-content;
+  height: 24px;
+  padding: 0 8px;
+}
+
+.chip-ENPdAw.multiselectChip-J06nE4:focus {
+  box-shadow: inset 0 0 0 1px var(--border-accent, #036ce5);
+}
+
+.chip-ENPdAw.multiselectChip-J06nE4.chip-ENPdAw p {
+  text-overflow: var(--chip-text-overflow-value);
+}
+
+.chip-ENPdAw.multiselectChip-J06nE4 .chipsIcon-P7fjHs {
+  display: flex;
+}
+
+.chip-ENPdAw.multiselectChip-J06nE4 .chipsIcon-P7fjHs svg path {
+  color: var(--dark-grey-grey-800);
+}
+
+.chipTooltip-TYe_vW {
+  overflow-wrap: break-word;
+}
+

package/dist/components/Multiselect/TooltipedOptionText/TooltipedOptionText.d.ts

@@ -0,0 +1,5 @@
+import { type PropsWithChildren } from 'react';
+import type { IHasTestId } from '../../../common';
+type TooltipedOptionTextProps = IHasTestId;
+export declare const TooltipedOptionText: (props: PropsWithChildren<TooltipedOptionTextProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Multiselect/TooltipedOptionText/TooltipedOptionText.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Hint } from "../../Hint/Hint.js";
+import { Text, TextColor } from "../../Text/Text.js";
+import { Placement } from "../../Tooltip/Tooltip.js";
+import TooltipedOptionText_module from "./TooltipedOptionText.module.js";
+const TooltipedOptionText = (props)=>{
+    const textElementRef = useRef(null);
+    const [isTextSliced, setIsTextSliced] = useState(false);
+    const OptionTextNode = /*#__PURE__*/ jsx(Text.Body, {
+        ref: textElementRef,
+        className: TooltipedOptionText_module.itemText,
+        testId: props.testId,
+        children: props.children
+    });
+    useEffect(()=>{
+        if (!textElementRef.current) return;
+        setIsTextSliced(textElementRef.current.scrollWidth > textElementRef.current.clientWidth);
+    }, []);
+    if (!isTextSliced) return OptionTextNode;
+    return /*#__PURE__*/ jsx(Hint, {
+        zIndex: 100,
+        mouseEnterDelay: 0.5,
+        placement: Placement.RIGHT,
+        overlay: /*#__PURE__*/ jsx(Text.Body, {
+            className: TooltipedOptionText_module.chipTooltip,
+            colorToken: TextColor.invert,
+            children: props.children
+        }),
+        testId: props.testId ? `${props.testId}-hint` : void 0,
+        children: OptionTextNode
+    });
+};
+export { TooltipedOptionText };

package/dist/components/Multiselect/TooltipedOptionText/TooltipedOptionText.module.js

@@ -0,0 +1,6 @@
+import "./TooltipedOptionText_module.css";
+const TooltipedOptionText_module = {
+    itemText: "itemText-kXX0op",
+    chipTooltip: "chipTooltip-Psi3sJ"
+};
+export default TooltipedOptionText_module;

package/dist/components/Multiselect/TooltipedOptionText/TooltipedOptionText_module.css

@@ -0,0 +1,10 @@
+.itemText-kXX0op {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.chipTooltip-Psi3sJ {
+  overflow-wrap: break-word;
+}
+

package/dist/components/Multiselect/lib/consts.d.ts

@@ -0,0 +1,3 @@
+export declare const minChipsWidth = 64;
+export declare const chipsContainerGap = 4;
+export declare const selectAllCheckboxDefaultText = "\u0412\u0441\u0435 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u044B";

package/dist/components/Multiselect/lib/consts.js

@@ -0,0 +1,4 @@
+const minChipsWidth = 64;
+const chipsContainerGap = 4;
+const selectAllCheckboxDefaultText = 'Все элементы';
+export { chipsContainerGap, minChipsWidth, selectAllCheckboxDefaultText };

package/dist/components/Multiselect/lib/useChipsKeyDown.d.ts

@@ -0,0 +1,6 @@
+import type { Key, KeyboardEvent, RefObject } from 'react';
+interface Item {
+    value: Key;
+}
+export declare const useChipsKeyDown: <T extends Item>(chipRefs: RefObject<(HTMLButtonElement | null)[]>, onDelete?: (deletedItem: T, isFirstItem: boolean) => void) => (e: KeyboardEvent<HTMLButtonElement>, currentFocusedIndex: number, item: T) => void;
+export {};

package/dist/components/Multiselect/lib/useChipsKeyDown.js

@@ -0,0 +1,24 @@
+const useChipsKeyDown = (chipRefs, onDelete)=>{
+    const handleChipKeyDown = (e, currentFocusedIndex, item)=>{
+        if ('ArrowLeft' === e.key) {
+            e.stopPropagation();
+            const prevChip = chipRefs.current?.[currentFocusedIndex - 1];
+            const nextFocusedChip = prevChip || chipRefs.current?.[chipRefs.current.filter(Boolean).length - 1];
+            if (nextFocusedChip) nextFocusedChip.focus();
+        }
+        if ('ArrowRight' === e.key) {
+            e.stopPropagation();
+            const nextChip = chipRefs.current?.[currentFocusedIndex + 1];
+            const nextFocusedChip = nextChip || chipRefs.current?.[0];
+            if (nextFocusedChip) nextFocusedChip.focus();
+        }
+        if ('Backspace' === e.key) {
+            e.stopPropagation();
+            onDelete?.(item, 0 === currentFocusedIndex);
+            const prevChip = chipRefs.current?.[currentFocusedIndex - 1];
+            if (prevChip) prevChip.focus();
+        }
+    };
+    return handleChipKeyDown;
+};
+export { useChipsKeyDown };

package/dist/components/Multiselect/lib/useItemKeyDown.d.ts

@@ -0,0 +1,2 @@
+import type { KeyboardEvent, RefObject } from 'react';
+export declare const useItemKeyDown: (itemCheckboxRefs: RefObject<(HTMLInputElement | null)[]>) => (e: KeyboardEvent<HTMLInputElement>, index: number) => void;

package/dist/components/Multiselect/lib/useItemKeyDown.js

@@ -0,0 +1,15 @@
+const useItemKeyDown = (itemCheckboxRefs)=>{
+    const handleItemKeyDown = (e, index)=>{
+        if (![
+            'ArrowDown',
+            'ArrowUp'
+        ].includes(e.key)) return;
+        e.preventDefault();
+        const nextItem = itemCheckboxRefs.current?.['ArrowDown' === e.key ? index + 1 : index - 1];
+        const outOfRangeIndex = 'ArrowDown' === e.key ? 0 : (itemCheckboxRefs.current?.filter(Boolean).length ?? 1) - 1;
+        const nextFocusedItem = nextItem || itemCheckboxRefs.current?.[outOfRangeIndex];
+        if (nextFocusedItem) nextFocusedItem.focus();
+    };
+    return handleItemKeyDown;
+};
+export { useItemKeyDown };

package/dist/components/Multiselect/lib/useUpdateEffect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from 'react';
+export declare const useUpdateEffect: typeof useEffect;

package/dist/components/Multiselect/lib/useUpdateEffect.js

@@ -0,0 +1,12 @@
+import { useEffect, useRef } from "react";
+const useUpdateEffect = (effect, deps)=>{
+    const isFirstMount = useRef(true);
+    useEffect(()=>{
+        if (isFirstMount.current) {
+            isFirstMount.current = false;
+            return;
+        }
+        return effect();
+    }, deps);
+};
+export { useUpdateEffect };

package/dist/components/Multiselect/types.d.ts

@@ -0,0 +1,20 @@
+import { type ForwardedRef, type Key, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react';
+export interface InputValue<DTO = unknown> {
+    value: Key;
+    label: string;
+    dto?: DTO;
+}
+export interface DropdownItem<T extends Key, DTO = unknown> {
+    value: T;
+    label: string;
+    dto?: DTO;
+}
+export type RenderSelectedItemProps = {
+    element: ReactNode;
+    chipRef: ForwardedRef<HTMLButtonElement> | undefined;
+    onKeyDown?: (e: KeyboardEvent<HTMLButtonElement>) => void;
+    onIconClick?: (e: MouseEvent<HTMLDivElement>) => void;
+    item?: InputValue;
+    className?: string;
+};
+export type RenderSelectedItem = ({ element, chipRef, onKeyDown, onIconClick, item, className, }: RenderSelectedItemProps) => ReactNode;

package/dist/components/OverlayActions/OverlayActions.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { IHasTestId } from '../../common/types';
+import type { SingleIconProps } from '../../icon/types';
+export interface IOverlayAction {
+    id: string;
+    title: string;
+    icon: ComponentType<SingleIconProps>;
+    onClick?: () => void;
+    disabled?: boolean;
+}
+export interface IOverlayOffset {
+    top: number;
+    right: number;
+}
+export interface IOverlayActionsProps extends IHasTestId {
+    actions: IOverlayAction[];
+    offset?: IOverlayOffset;
+    children: ReactNode;
+    className?: string;
+    anchorClassName?: string;
+    actionsClassName?: string;
+    hintZIndex?: number;
+}
+export declare const OverlayActions: {
+    ({ actions, offset, className, anchorClassName, actionsClassName, children, testId, hintZIndex, }: IOverlayActionsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/OverlayActions/OverlayActions.js

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../common/css/cn.js";
+import { Hint } from "../Hint/Hint.js";
+import { Text, TextColor } from "../Text/Text.js";
+import { Placement } from "../Tooltip/Tooltip.js";
+import OverlayActions_module from "./OverlayActions.module.js";
+const OverlayActions = ({ actions, offset = {
+    right: 4,
+    top: 4
+}, className, anchorClassName, actionsClassName, children, testId, hintZIndex })=>{
+    const hasActions = actions.length > 0;
+    const style = {
+        top: offset.top,
+        right: offset.right
+    };
+    return /*#__PURE__*/ jsx("div", {
+        className: cn(OverlayActions_module.root, className),
+        tabIndex: 0,
+        "data-test-id": testId,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: cn(OverlayActions_module.anchor, anchorClassName),
+            children: [
+                children,
+                hasActions && /*#__PURE__*/ jsx("div", {
+                    className: cn(OverlayActions_module.actionsBlock, actionsClassName),
+                    style: style,
+                    "aria-hidden": "true",
+                    children: actions.map((action)=>/*#__PURE__*/ jsx(Hint, {
+                            placement: Placement.TOP,
+                            overlayClassName: OverlayActions_module.hintOverlay,
+                            overlay: /*#__PURE__*/ jsx(Text.Body, {
+                                className: OverlayActions_module.hintText,
+                                colorToken: TextColor.invert,
+                                children: action.title
+                            }),
+                            zIndex: hintZIndex,
+                            children: /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                "data-test-id": `overlay-action-button-${action.id}`,
+                                onClick: action.onClick,
+                                disabled: action.disabled,
+                                className: OverlayActions_module.button,
+                                children: /*#__PURE__*/ jsx(action.icon, {
+                                    className: OverlayActions_module.icon,
+                                    stroke: "var(--icon-stroke)"
+                                })
+                            })
+                        }, action.id))
+                })
+            ]
+        })
+    });
+};
+OverlayActions.displayName = 'OverlayActions';
+export { OverlayActions };

package/dist/components/OverlayActions/OverlayActions.module.js

@@ -0,0 +1,10 @@
+import "./OverlayActions_module.css";
+const OverlayActions_module = {
+    root: "root-P2h1dc",
+    actionsBlock: "actionsBlock-tSwAdG",
+    anchor: "anchor-ihC37L",
+    button: "button-oktlVi",
+    icon: "icon-A5N2Sm",
+    hintText: "hintText-efZEGl"
+};
+export default OverlayActions_module;

package/dist/components/OverlayActions/OverlayActions_module.css

@@ -0,0 +1,70 @@
+.root-P2h1dc {
+  outline: none;
+}
+
+.root-P2h1dc:hover .actionsBlock-tSwAdG, .root-P2h1dc:focus-within .actionsBlock-tSwAdG {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.anchor-ihC37L {
+  display: inline-flex;
+  position: relative;
+}
+
+.actionsBlock-tSwAdG {
+  opacity: 0;
+  pointer-events: none;
+  box-shadow: 0 4px 10px 0 var(--elements-shadow-dropdown, #0917391f);
+  background-color: var(--bgd-white, #fff);
+  border-radius: 8px;
+  gap: 4px;
+  padding: 4px;
+  transition: opacity .12s;
+  display: flex;
+  position: absolute;
+}
+
+.button-oktlVi {
+  outline-offset: -1px;
+  --icon-stroke: var(--dark-grey-grey-800, #5f6d79);
+  background-color: #0000;
+  border: none;
+  border-radius: 4px;
+  padding: 6px;
+  line-height: 0;
+}
+
+.button-oktlVi:not(:disabled) {
+  cursor: pointer;
+}
+
+.button-oktlVi:not(:disabled):hover {
+  background-color: var(--light-grey-300, #d3d8ddb3);
+  --icon-stroke: var(--dark-grey-dark-900, #091739);
+}
+
+.button-oktlVi:not(:disabled):focus-visible {
+  box-shadow: 0 0 4px 0 var(--product-blue-400, #7eb4ff);
+  background-color: var(--light-grey-300, #d3d8ddb3);
+  --icon-stroke: var(--dark-grey-dark-900, #091739);
+  outline: none;
+}
+
+.button-oktlVi:not(:disabled):active {
+  background-color: var(--light-grey-600, #55607359);
+  --icon-stroke: var(--dark-grey-dark-900, #091739);
+}
+
+.button-oktlVi:disabled {
+  --icon-stroke: var(--dark-grey-grey-500, #9fa7af);
+}
+
+.icon-A5N2Sm path {
+  stroke: var(--icon-stroke, #5f6d79);
+}
+
+.hintText-efZEGl {
+  white-space: nowrap;
+}
+

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

@@ -0,0 +1,11 @@
+import type { IHasTestId } from '../../common/types';
+export type PaginationProps = {
+    onFirst: () => void;
+    onLast: () => void;
+    onPrev: () => void;
+    onNext: () => void;
+    label: string;
+    isGoBackDisabled?: boolean;
+    isGoForwardDisabled?: boolean;
+} & IHasTestId;
+export declare const Pagination: ({ onFirst, onLast, onPrev, onNext, label, isGoBackDisabled, isGoForwardDisabled, testId, }: PaginationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,67 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Text } from "../Text/Text.js";
+import { Left12Icon, LeftDouble12Icon, Right12Icon, RightDouble12Icon } from "../../icon/index.js";
+import Pagination_module from "./Pagination.module.js";
+const Pagination = ({ onFirst, onLast, onPrev, onNext, label, isGoBackDisabled, isGoForwardDisabled, testId })=>{
+    const testIds = useMemo(()=>{
+        if (testId) return {
+            container: `${testId}-overlay`,
+            goFirst: `${testId}-go-first`,
+            goNext: `${testId}-go-next`,
+            goPrev: `${testId}-go-prev`,
+            goLast: `${testId}-go-last`,
+            label: `${testId}-label`
+        };
+        return {
+            container: 'pagination-overlay',
+            goFirst: 'pagination-select-first',
+            goNext: 'pagination-step-forward',
+            goPrev: 'pagination-step-back',
+            goLast: 'pagination-select-last',
+            label: 'pagination-label'
+        };
+    }, [
+        testId
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        className: Pagination_module.container,
+        "data-test-id": testIds?.container,
+        children: [
+            /*#__PURE__*/ jsx("button", {
+                className: Pagination_module.button,
+                onClick: onFirst,
+                disabled: isGoBackDisabled,
+                "data-test-id": testIds?.goFirst,
+                children: /*#__PURE__*/ jsx(LeftDouble12Icon, {})
+            }),
+            /*#__PURE__*/ jsx("button", {
+                className: Pagination_module.button,
+                onClick: onPrev,
+                disabled: isGoBackDisabled,
+                "data-test-id": testIds?.goPrev,
+                children: /*#__PURE__*/ jsx(Left12Icon, {})
+            }),
+            /*#__PURE__*/ jsx(Text.Body, {
+                className: Pagination_module.label,
+                "data-test-id": testIds?.label,
+                children: label
+            }),
+            /*#__PURE__*/ jsx("button", {
+                className: Pagination_module.button,
+                onClick: onNext,
+                disabled: isGoForwardDisabled,
+                "data-test-id": testIds?.goNext,
+                children: /*#__PURE__*/ jsx(Right12Icon, {})
+            }),
+            /*#__PURE__*/ jsx("button", {
+                className: Pagination_module.button,
+                onClick: onLast,
+                disabled: isGoForwardDisabled,
+                "data-test-id": testIds?.goLast,
+                children: /*#__PURE__*/ jsx(RightDouble12Icon, {})
+            })
+        ]
+    });
+};
+export { Pagination };

package/dist/components/Pagination/Pagination.module.js

@@ -0,0 +1,7 @@
+import "./Pagination_module.css";
+const Pagination_module = {
+    container: "container-Tm5sBt",
+    button: "button-TMRH65",
+    label: "label-cndddL"
+};
+export default Pagination_module;