@jordan-mace/chaser-design-system 1.2.8 → 2.0.0

package/dist/components/Input/Input.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { inputStyle, label } from './styles.css';
-import { text } from '../Text/styles.css';
-import Box from '../Box';
-const Input = (props) => {
-    return (_jsxs(Box, { display: "flex", flexDirection: { mobile: 'column', tablet: 'row' }, gap: "small", children: [props.label && (_jsx(Box, { as: "label", className: clsx(text, label), marginX: { mobile: 'auto', tablet: 'none' }, marginY: { mobile: 'none', tablet: 'auto' }, htmlFor: props.id, children: props.label })), _jsx(Box, { as: "input", className: clsx(inputStyle, props.className), width: props.fullWidth ? '100%' : undefined, ...props })] }));
-};
-export default Input;

package/dist/components/Input/index.d.ts

@@ -1 +0,0 @@
-export { default as Input } from './Input';

package/dist/components/Input/index.js

@@ -1 +0,0 @@
-export { default as Input } from './Input';

package/dist/components/Input/styles.css.d.ts

@@ -1,2 +0,0 @@
-export declare const inputStyle: string;
-export declare const label: string;

package/dist/components/Input/styles.css.js

@@ -1,8 +0,0 @@
-import { styleWithLayer } from '../../styles/utils';
-export const inputStyle = styleWithLayer({
-    padding: '0.5rem 1rem',
-    borderRadius: '0.5rem',
-});
-export const label = styleWithLayer({
-    paddingRight: '0.5rem',
-});

package/dist/components/Kbd/Kbd.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export type KbdProps = React.HTMLAttributes<HTMLElement> & Sprinkles & {
-    children: React.ReactNode;
-};
-declare const Kbd: ({ children, className, ...props }: KbdProps) => import("react/jsx-runtime").JSX.Element;
-export default Kbd;

package/dist/components/Kbd/Kbd.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { kbd } from './styles.css';
-const Kbd = ({ children, className, ...props }) => {
-    return (_jsx("kbd", { className: `${kbd} ${className || ''}`, ...props, children: children }));
-};
-export default Kbd;

package/dist/components/Kbd/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Kbd } from './Kbd';
-export type { KbdProps } from './Kbd';

package/dist/components/Kbd/index.js

@@ -1 +0,0 @@
-export { default as Kbd } from './Kbd';

package/dist/components/Kbd/styles.css.d.ts

@@ -1 +0,0 @@
-export declare const kbd: string;

package/dist/components/Kbd/styles.css.js

@@ -1,16 +0,0 @@
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const kbd = styleWithLayer({
-    display: 'inline-block',
-    padding: '0.125rem 0.375rem',
-    fontFamily: 'monospace',
-    fontSize: '0.85em',
-    fontWeight: '600',
-    lineHeight: '1.5',
-    color: vars.colors.textPrimary,
-    backgroundColor: vars.colors.backgroundMuted,
-    border: `1px solid ${vars.colors.borderDefault}`,
-    borderRadius: '4px',
-    boxShadow: '0 2px 0 rgba(0, 0, 0, 0.1)',
-    whiteSpace: 'nowrap',
-});

package/dist/components/List/List.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-declare const List: ({ children, ...props }: {
-    children: React.ReactNode;
-} & Sprinkles) => import("react/jsx-runtime").JSX.Element;
-export default List;

package/dist/components/List/List.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { list } from './styles.css';
-import Box from '../Box';
-const List = ({ children, ...props }) => {
-    return (_jsx(Box, { as: "ul", className: list, ...props, children: children }));
-};
-export default List;

package/dist/components/List/ListItem.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-declare const ListItem: ({ children, ...props }: {
-    children: React.ReactNode;
-} & Sprinkles) => import("react/jsx-runtime").JSX.Element;
-export default ListItem;

package/dist/components/List/ListItem.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { listItem } from './styles.css';
-import Box from '../Box';
-const ListItem = ({ children, ...props }) => {
-    return (_jsx(Box, { as: "li", className: listItem, ...props, children: children }));
-};
-export default ListItem;

package/dist/components/List/index.d.ts

@@ -1,2 +0,0 @@
-export { default as List } from './List';
-export { default as ListItem } from './ListItem';

package/dist/components/List/index.js

@@ -1,2 +0,0 @@
-export { default as List } from './List';
-export { default as ListItem } from './ListItem';

package/dist/components/List/styles.css.d.ts

@@ -1,2 +0,0 @@
-export declare const list: string;
-export declare const listItem: string;

package/dist/components/List/styles.css.js

@@ -1,11 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-export const list = style({
-    listStyle: 'none',
-    padding: 0,
-    margin: 0,
-});
-export const listItem = style({
-    padding: '0.5rem 0',
-    borderBottom: `1px solid ${vars.colors.listBorder}`,
-});

package/dist/components/Modal/Modal.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export type ModalSize = 'small' | 'medium' | 'large' | 'full';
-type ModalPropsType = React.HTMLAttributes<HTMLDialogElement> & {
-    isOpen: boolean;
-    onClose: () => void;
-    title?: string;
-    size?: ModalSize;
-    children?: React.ReactNode;
-    footer?: React.ReactNode;
-    showCloseButton?: boolean;
-};
-export type ModalProps = ModalPropsType & Sprinkles;
-declare const Modal: ({ isOpen, onClose, title, size, children, footer, showCloseButton, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
-export default Modal;

package/dist/components/Modal/Modal.js

@@ -1,35 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { modal, modalVariants, modalHeader, modalTitle, modalCloseButton, modalBody, modalFooter, } from './styles.css';
-import { useEffect, useRef } from 'react';
-import Box from '../Box';
-const Modal = ({ isOpen, onClose, title, size = 'medium', children, footer, showCloseButton = true, ...props }) => {
-    const dialogRef = useRef(null);
-    useEffect(() => {
-        const dialog = dialogRef.current;
-        if (!dialog)
-            return;
-        if (isOpen) {
-            dialog.showModal();
-            dialog.classList.add('open');
-        }
-        else {
-            dialog.close();
-            dialog.classList.remove('open');
-        }
-        const handleClose = () => {
-            onClose();
-        };
-        dialog.addEventListener('close', handleClose);
-        return () => {
-            dialog.removeEventListener('close', handleClose);
-        };
-    }, [isOpen, onClose]);
-    return (_jsxs(Box, { as: "dialog", ref: dialogRef, className: clsx(modal, modalVariants[size]), onClick: (e) => {
-            // Close when clicking the backdrop
-            if (e.target === dialogRef.current) {
-                onClose();
-            }
-        }, ...props, children: [title && (_jsxs(Box, { as: "div", className: modalHeader, children: [_jsx(Box, { as: "h2", className: modalTitle, children: title }), showCloseButton && (_jsx(Box, { as: "button", className: modalCloseButton, onClick: onClose, "aria-label": "Close modal", type: "button", children: "\u00D7" }))] })), _jsx(Box, { as: "div", className: modalBody, children: children }), footer && (_jsx(Box, { as: "div", className: modalFooter, children: footer }))] }));
-};
-export default Modal;

package/dist/components/Modal/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Modal } from './Modal';
-export type { ModalProps, ModalSize } from './Modal';

package/dist/components/Modal/index.js

@@ -1 +0,0 @@
-export { default as Modal } from './Modal';

package/dist/components/Modal/styles.css.d.ts

@@ -1,7 +0,0 @@
-export declare const modalVariants: Record<"medium" | "large" | "small" | "full", string>;
-export declare const modal: string;
-export declare const modalHeader: string;
-export declare const modalTitle: string;
-export declare const modalCloseButton: string;
-export declare const modalBody: string;
-export declare const modalFooter: string;

package/dist/components/Modal/styles.css.js

@@ -1,92 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const modalVariants = styleVariants({
-    small: {
-        maxWidth: '400px',
-    },
-    medium: {
-        maxWidth: '600px',
-    },
-    large: {
-        maxWidth: '800px',
-    },
-    full: {
-        maxWidth: '95vw',
-    },
-});
-export const modal = styleWithLayer({
-    background: vars.colors.backgroundDefault,
-    borderRadius: '0.75rem',
-    boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
-    border: '1px solid var(--modal-border, transparent)',
-    color: vars.colors.textPrimary,
-    fontFamily: vars.fontFamily.body,
-    maxWidth: '90vw',
-    maxHeight: '90vh',
-    flexDirection: 'column',
-    overflow: 'hidden',
-    selectors: {
-        '&:not([open])': {
-            display: 'none',
-        },
-        '[open] &': {
-            display: 'flex',
-        },
-        '&::backdrop': {
-            backgroundColor: 'rgba(0, 0, 0, 0.5)',
-        },
-    },
-});
-export const modalHeader = styleWithLayer({
-    padding: '1.25rem',
-    borderBottom: `1px solid ${vars.colors.borderMuted}`,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    gap: '1rem',
-});
-export const modalTitle = styleWithLayer({
-    fontFamily: vars.fontFamily.heading,
-    fontSize: '1.25rem',
-    fontWeight: '600',
-    color: vars.colors.textPrimary,
-    margin: 0,
-});
-export const modalCloseButton = styleWithLayer({
-    background: 'none',
-    border: 'none',
-    padding: '0.5rem',
-    cursor: 'pointer',
-    borderRadius: '0.375rem',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    color: vars.colors.textSecondary,
-    fontSize: '1.5rem',
-    lineHeight: '1',
-    transition: 'background-color 0.2s ease-in-out, color 0.2s ease-in-out',
-    selectors: {
-        '&:hover': {
-            backgroundColor: vars.colors.borderMuted,
-            color: vars.colors.textPrimary,
-        },
-        '&:focus-visible': {
-            outline: '2px solid var(--modal-focus-ring, currentColor)',
-            outlineOffset: '2px',
-        },
-    },
-});
-export const modalBody = styleWithLayer({
-    padding: '1.25rem',
-    overflowY: 'auto',
-    flex: 1,
-});
-export const modalFooter = styleWithLayer({
-    padding: '1.25rem',
-    borderTop: `1px solid ${vars.colors.borderMuted}`,
-    display: 'flex',
-    gap: '0.75rem',
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-});

package/dist/components/Navbar/Navbar.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-type NavbarProps = React.HTMLAttributes<HTMLElement> & Sprinkles & {
-    children?: React.ReactNode;
-};
-declare const Navbar: (props: NavbarProps) => import("react/jsx-runtime").JSX.Element;
-export default Navbar;

package/dist/components/Navbar/Navbar.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { navbarStyle } from './styles.css';
-import Box from '../Box';
-const Navbar = (props) => {
-    return (_jsx(Box, { as: "nav", width: "100%", display: "flex", flexDirection: "row", gap: "medium", className: clsx(navbarStyle, props.className), ...props }));
-};
-export default Navbar;

package/dist/components/Navbar/NavbarItem.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-type NavbarItemProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
-    children?: React.ReactNode;
-};
-declare const NavbarItem: (props: NavbarItemProps) => import("react/jsx-runtime").JSX.Element;
-export default NavbarItem;

package/dist/components/Navbar/NavbarItem.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { navbarItemStyle } from './styles.css';
-import Box from '../Box';
-const NavbarItem = (props) => {
-    return _jsx(Box, { as: "div", className: clsx(navbarItemStyle, props.className), ...props });
-};
-export default NavbarItem;

package/dist/components/Navbar/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Navbar } from './Navbar';
-export { default as NavbarItem } from './NavbarItem';

package/dist/components/Navbar/index.js

@@ -1,2 +0,0 @@
-export { default as Navbar } from './Navbar';
-export { default as NavbarItem } from './NavbarItem';

package/dist/components/Navbar/styles.css.d.ts

@@ -1,2 +0,0 @@
-export declare const navbarStyle: string;
-export declare const navbarItemStyle: string;

package/dist/components/Navbar/styles.css.js

@@ -1,3 +0,0 @@
-import { styleWithLayer } from '../../styles/utils';
-export const navbarStyle = styleWithLayer({});
-export const navbarItemStyle = styleWithLayer({});

package/dist/components/NumberInput/NumberInput.d.ts

@@ -1,21 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export type NumberInputPosition = 'right' | 'left';
-export type NumberInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'min' | 'max'> & Sprinkles & {
-    label?: string;
-    value?: number | '';
-    onChange?: (value: number | '') => void;
-    min?: number;
-    max?: number;
-    step?: number;
-    stepperPosition?: NumberInputPosition;
-    placeholder?: string;
-    hint?: string;
-    error?: boolean;
-    errorMessage?: string;
-    fullWidth?: boolean;
-    disabled?: boolean;
-    allowEmpty?: boolean;
-};
-declare const NumberInput: ({ label, value, onChange, min, max, step, stepperPosition, placeholder, hint, error, errorMessage, fullWidth, disabled, allowEmpty, className, ...props }: NumberInputProps) => import("react/jsx-runtime").JSX.Element;
-export default NumberInput;

package/dist/components/NumberInput/NumberInput.js

@@ -1,39 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { useCallback } from 'react';
-import { numberInputContainer, numberInput, numberInputVariants, numberInputLabel, numberInputStepper, numberInputStepperLeft, numberInputButton, numberInputWrapper, numberInputHint, numberInputErrorMessage, } from './styles.css';
-import Box from '../Box';
-const NumberInput = ({ label, value, onChange, min = -Infinity, max = Infinity, step = 1, stepperPosition = 'right', placeholder = '0', hint, error = false, errorMessage, fullWidth = true, disabled = false, allowEmpty = true, className, ...props }) => {
-    const handleChange = (e) => {
-        const inputValue = e.target.value;
-        if (inputValue === '') {
-            if (allowEmpty) {
-                onChange?.('');
-            }
-            else {
-                onChange?.(0);
-            }
-            return;
-        }
-        const numValue = parseFloat(inputValue);
-        if (!isNaN(numValue)) {
-            const clampedValue = Math.min(Math.max(numValue, min), max);
-            onChange?.(clampedValue);
-        }
-    };
-    const increment = useCallback(() => {
-        const currentValue = typeof value === 'number' ? value : 0;
-        const newValue = Math.min(currentValue + step, max);
-        onChange?.(newValue);
-    }, [value, step, max, onChange]);
-    const decrement = useCallback(() => {
-        const currentValue = typeof value === 'number' ? value : 0;
-        const newValue = Math.max(currentValue - step, min);
-        onChange?.(newValue);
-    }, [value, step, min, onChange]);
-    const isIncrementDisabled = disabled || (typeof value === 'number' && value >= max);
-    const isDecrementDisabled = disabled || (typeof value === 'number' && value <= min);
-    const displayValue = value === '' ? '' : value;
-    return (_jsxs(Box, { className: numberInputWrapper, width: fullWidth ? '100%' : undefined, children: [label && (_jsx(Box, { as: "label", className: numberInputLabel, children: label })), _jsxs(Box, { className: numberInputContainer, children: [_jsx(Box, { as: "input", type: "number", value: displayValue, onChange: handleChange, min: min, max: max, step: step, placeholder: placeholder, disabled: disabled, className: clsx(numberInput, numberInputVariants[error ? 'error' : 'default'], className), ...props }), _jsxs(Box, { className: clsx(numberInputStepper, stepperPosition === 'left' && numberInputStepperLeft), children: [_jsx(Box, { as: "button", className: numberInputButton, onClick: increment, disabled: isIncrementDisabled, type: "button", "aria-label": "Increase value", children: "+" }), _jsx(Box, { as: "button", className: numberInputButton, onClick: decrement, disabled: isDecrementDisabled, type: "button", "aria-label": "Decrease value", children: "\u2212" })] })] }), error && errorMessage && (_jsx(Box, { as: "div", className: numberInputErrorMessage, role: "alert", children: errorMessage })), hint && !error && (_jsx(Box, { as: "div", className: numberInputHint, children: hint }))] }));
-};
-export default NumberInput;

package/dist/components/NumberInput/index.d.ts

@@ -1,2 +0,0 @@
-export { default as NumberInput } from './NumberInput';
-export type { NumberInputProps, NumberInputPosition } from './NumberInput';

package/dist/components/NumberInput/index.js

@@ -1 +0,0 @@
-export { default as NumberInput } from './NumberInput';

package/dist/components/NumberInput/styles.css.d.ts

@@ -1,10 +0,0 @@
-export declare const numberInputContainer: string;
-export declare const numberInput: string;
-export declare const numberInputVariants: Record<"default" | "error", string>;
-export declare const numberInputLabel: string;
-export declare const numberInputStepper: string;
-export declare const numberInputStepperLeft: string;
-export declare const numberInputButton: string;
-export declare const numberInputWrapper: string;
-export declare const numberInputHint: string;
-export declare const numberInputErrorMessage: string;

package/dist/components/NumberInput/styles.css.js

@@ -1,117 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const numberInputContainer = styleWithLayer({
-    position: 'relative',
-    display: 'flex',
-    alignItems: 'center',
-    width: '100%',
-});
-export const numberInput = styleWithLayer({
-    width: '100%',
-    padding: '0.75rem 2.5rem',
-    fontSize: '14px',
-    fontFamily: vars.fontFamily.body,
-    color: vars.colors.textPrimary,
-    backgroundColor: vars.colors.inputBackground,
-    border: `1px solid ${vars.colors.inputBorder}`,
-    borderRadius: '8px',
-    outline: 'none',
-    textAlign: 'center',
-    transition: 'border-color 0.2s ease',
-    '::placeholder': {
-        color: vars.colors.inputPlaceholder,
-    },
-    ':focus-visible': {
-        outline: `2px solid ${vars.colors.inputBorderFocused}`,
-        outlineOffset: '2px',
-    },
-    ':hover': {
-        borderColor: vars.colors.inputBorderFocused,
-    },
-    selectors: {
-        '&:disabled': {
-            cursor: 'not-allowed',
-            opacity: 0.5,
-            backgroundColor: vars.colors.backgroundMuted,
-        },
-        '&:disabled:hover': {
-            borderColor: vars.colors.inputBorder,
-        },
-    },
-});
-export const numberInputVariants = styleVariants({
-    default: {},
-    error: {
-        border: `1px solid ${vars.colors.alertErrorBorder}`,
-        ':focus-visible': {
-            outline: `2px solid ${vars.colors.alertErrorBorder}`,
-        },
-        ':hover': {
-            borderColor: vars.colors.alertErrorBorder,
-        },
-    },
-});
-export const numberInputLabel = styleWithLayer({
-    display: 'block',
-    fontSize: '14px',
-    fontWeight: '500',
-    color: vars.colors.textPrimary,
-    marginBottom: '8px',
-});
-export const numberInputStepper = styleWithLayer({
-    position: 'absolute',
-    display: 'flex',
-    flexDirection: 'column',
-    right: '0.5rem',
-    top: '50%',
-    transform: 'translateY(-50%)',
-    gap: '2px',
-});
-export const numberInputStepperLeft = styleWithLayer({
-    left: '0.5rem',
-    right: 'auto',
-});
-export const numberInputButton = styleWithLayer({
-    width: '1.5rem',
-    height: '1.25rem',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: vars.colors.buttonBackgroundSecondary,
-    border: `1px solid ${vars.colors.borderDefault}`,
-    borderRadius: '4px',
-    cursor: 'pointer',
-    fontSize: '12px',
-    color: vars.colors.buttonTextSecondary,
-    transition: 'all 0.15s ease',
-    padding: 0,
-    ':hover': {
-        backgroundColor: vars.colors.buttonBackgroundFocusedSecondary,
-    },
-    ':active': {
-        transform: 'scale(0.95)',
-    },
-    selectors: {
-        '&:disabled': {
-            cursor: 'not-allowed',
-            opacity: 0.5,
-        },
-        '&:disabled:hover': {
-            backgroundColor: vars.colors.buttonBackgroundSecondary,
-        },
-    },
-});
-export const numberInputWrapper = styleWithLayer({
-    width: '100%',
-});
-export const numberInputHint = styleWithLayer({
-    fontSize: '12px',
-    color: vars.colors.textSecondary,
-    marginTop: '4px',
-});
-export const numberInputErrorMessage = styleWithLayer({
-    fontSize: '12px',
-    color: vars.colors.alertErrorText,
-    marginTop: '4px',
-});

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

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export type PaginationProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
-    currentPage: number;
-    totalPages: number;
-    onPageChange: (page: number) => void;
-    siblingCount?: number;
-    showFirstLast?: boolean;
-    showPrevNext?: boolean;
-};
-declare const Pagination: ({ currentPage, totalPages, onPageChange, siblingCount, showFirstLast, showPrevNext, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
-export default Pagination;

package/dist/components/Pagination/Pagination.js

@@ -1,50 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { paginationContainer, pageButton, pageButtonVariants, ellipsis, } from './styles.css';
-import Box from '../Box';
-const Pagination = ({ currentPage, totalPages, onPageChange, siblingCount = 1, showFirstLast = true, showPrevNext = true, ...props }) => {
-    const generatePageNumbers = () => {
-        const pages = [];
-        const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
-        const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
-        const shouldShowLeftEllipsis = leftSiblingIndex > 2;
-        const shouldShowRightEllipsis = rightSiblingIndex < totalPages - 1;
-        if (totalPages <= 7) {
-            for (let i = 1; i <= totalPages; i++) {
-                pages.push(i);
-            }
-        }
-        else {
-            pages.push(1);
-            if (shouldShowLeftEllipsis) {
-                pages.push('left-ellipsis');
-            }
-            else if (currentPage > 3) {
-                for (let i = 2; i < leftSiblingIndex; i++) {
-                    pages.push(i);
-                }
-            }
-            for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
-                if (i !== 1 && i !== totalPages) {
-                    pages.push(i);
-                }
-            }
-            if (shouldShowRightEllipsis) {
-                pages.push('right-ellipsis');
-            }
-            else if (currentPage < totalPages - 2) {
-                for (let i = rightSiblingIndex + 1; i < totalPages; i++) {
-                    pages.push(i);
-                }
-            }
-            pages.push(totalPages);
-        }
-        return pages;
-    };
-    const pages = generatePageNumbers();
-    const { className, ...restProps } = props;
-    return (_jsxs(Box, { className: clsx(paginationContainer, className), ...restProps, children: [showFirstLast && (_jsx(Box, { as: "button", className: clsx(pageButton, pageButtonVariants.default), onClick: () => onPageChange(1), disabled: currentPage === 1, children: '<<' })), showPrevNext && (_jsx(Box, { as: "button", className: clsx(pageButton, pageButtonVariants.default), onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, children: '<' })), pages.map((page, index) => typeof page === 'number' ? (_jsx(Box, { as: "button", className: clsx(pageButton, page === currentPage
-                    ? pageButtonVariants.active
-                    : pageButtonVariants.default), onClick: () => onPageChange(page), children: page }, `page-${page}`)) : (_jsx(Box, { className: ellipsis, children: "..." }, `${page}-${index}`))), showPrevNext && (_jsx(Box, { as: "button", className: clsx(pageButton, pageButtonVariants.default), onClick: () => onPageChange(currentPage + 1), disabled: currentPage === totalPages, children: '>' })), showFirstLast && (_jsx(Box, { as: "button", className: clsx(pageButton, pageButtonVariants.default), onClick: () => onPageChange(totalPages), disabled: currentPage === totalPages, children: '>>' }))] }));
-};
-export default Pagination;

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

@@ -1,2 +0,0 @@
-export { default as Pagination } from './Pagination';
-export type { PaginationProps } from './Pagination';

package/dist/components/Pagination/index.js

@@ -1 +0,0 @@
-export { default as Pagination } from './Pagination';

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

@@ -1,4 +0,0 @@
-export declare const paginationContainer: string;
-export declare const pageButton: string;
-export declare const pageButtonVariants: Record<"default" | "active", string>;
-export declare const ellipsis: string;