@soroush.tech/design-system 2.0.0-rc.1 → 2.0.0-rc.3

package/dist/NumberField.mjs

@@ -0,0 +1,474 @@
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
+import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
+import { clamp } from "./utils.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-Z9_QludW.mjs";
+import { t as Icon } from "./Icon-BihOAP4u.mjs";
+import { t as FormControlContext } from "./FormControlContext-CC2kToms.mjs";
+import { useFormControl } from "./FormControl.mjs";
+import { t as useControlled } from "./useControlled-CBRLsO-H.mjs";
+import { i as snapToStep, n as getDecimalPrecision, t as addExact } from "./precision-B1lhxnnO.mjs";
+import { t as inputVariantStyles } from "./inputVariantStyles-CcqpGfuP.mjs";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/NumberField/hooks/useHoldRepeat.ts
+/**
+* Runs `action` at once on a press, then again and again while it is held - after a pause, so a
+* tap is one step. `start` begins it, `stop` ends it, and it ends by itself when the component
+* goes.
+*/
+function useHoldRepeat(action, { delay = 400, interval = 60 } = {}) {
+	const actionRef = useRef(action);
+	useEffect(() => {
+		actionRef.current = action;
+	});
+	const timers = useRef({});
+	const stop = useCallback(() => {
+		window.clearTimeout(timers.current.pause);
+		window.clearInterval(timers.current.repeat);
+		timers.current = {};
+	}, []);
+	const start = useCallback(() => {
+		stop();
+		actionRef.current();
+		timers.current.pause = window.setTimeout(() => {
+			timers.current.repeat = window.setInterval(() => actionRef.current(), interval);
+		}, delay);
+	}, [
+		stop,
+		delay,
+		interval
+	]);
+	useEffect(() => stop, [stop]);
+	return {
+		start,
+		stop
+	};
+}
+//#endregion
+//#region src/NumberField/utils/number.ts
+/** What a number is shown as unless told otherwise: all its digits, ungrouped, so typing round-trips. */
+const DEFAULT_FORMAT = {
+	useGrouping: false,
+	maximumFractionDigits: 20
+};
+/** The syntax a locale and format write a number in. */
+function getNumberSyntax(locale, format) {
+	const probe = new Intl.NumberFormat(locale, {
+		useGrouping: false,
+		minimumFractionDigits: 1,
+		maximumFractionDigits: 1
+	});
+	const digitFormat = new Intl.NumberFormat(locale, { useGrouping: false });
+	return {
+		decimal: probe.formatToParts(1.1).find((part) => part.type === "decimal").value,
+		digits: Array.from({ length: 10 }, (_, digit) => digitFormat.format(digit)),
+		isPercent: format?.style === "percent"
+	};
+}
+/** The number as its locale and format write it. */
+function formatNumber(value, locale, format) {
+	return new Intl.NumberFormat(locale, {
+		...DEFAULT_FORMAT,
+		...format
+	}).format(value);
+}
+const MINUS = new RegExp(`[${[
+	8722,
+	8210,
+	8211,
+	8212
+].map((code) => String.fromCodePoint(code)).join("")}]`, "g");
+/**
+* The number a text stands for - `null` when it stands for none: its locale's digits and decimal
+* mark, a leading minus, a percent's `%` (so `50%` is `0.5`). Group marks, spaces and symbols
+* round it are ignored.
+*/
+function parseNumber(text, syntax) {
+	let normalized = text.replace(MINUS, "-");
+	syntax.digits.forEach((digit, index) => {
+		normalized = normalized.split(digit).join(String(index));
+	});
+	const isNegative = normalized.includes("-");
+	const [whole = "", ...fraction] = normalized.split(syntax.decimal);
+	const digits = (text) => text.replaceAll(/\D/g, "");
+	const wholeDigits = digits(whole);
+	const fractionDigits = fraction.map(digits).join("");
+	if (wholeDigits === "" && fractionDigits === "") return null;
+	const parsed = Number(`${wholeDigits || "0"}.${fractionDigits || "0"}`);
+	const signed = isNegative ? -parsed : parsed;
+	return syntax.isPercent ? Number((signed / 100).toFixed(getDecimalPrecision(parsed) + 2)) : signed;
+}
+//#endregion
+//#region src/NumberField/hooks/useNumberField.ts
+const clampTo = (value, min, max) => clamp(value, min ?? Number.NEGATIVE_INFINITY, max ?? Number.POSITIVE_INFINITY);
+/**
+* A number field's state: the number (controlled or not), the text the user is typing - which
+* is theirs until it is committed on blur or Enter - and the steps by key and by button. A
+* number typed is told at once; one outside the range is clamped when it is committed.
+*/
+function useNumberField({ value: valueProp, defaultValue, onChange, onChangeCommitted, min, max, step, smallStep, largeStep, format, locale, shouldSnapOnStep, isFrozen }) {
+	const [value, setValue] = useControlled({
+		controlled: valueProp,
+		default: defaultValue ?? null
+	});
+	const [draft, setDraft] = useState(null);
+	const syntax = useMemo(() => getNumberSyntax(locale, format), [locale, format]);
+	const text = draft ?? (value === null ? "" : formatNumber(value, locale, format));
+	const update = (next) => {
+		if (next === value) return;
+		setValue(next);
+		onChange?.(next);
+	};
+	const handleChange = (event) => {
+		const typed = event.currentTarget.value;
+		setDraft(typed);
+		if (typed.trim() === "") return update(null);
+		const parsed = parseNumber(typed, syntax);
+		if (parsed !== null) update(parsed);
+	};
+	const settle = () => {
+		if (draft === null) return value;
+		if (draft.trim() === "") return null;
+		const parsed = parseNumber(draft, syntax);
+		return parsed === null ? value : clampTo(parsed, min, max);
+	};
+	const commit = (next) => {
+		setDraft(null);
+		update(next);
+		onChangeCommitted?.(next);
+	};
+	const handleBlur = () => {
+		if (draft !== null) commit(settle());
+	};
+	const stepBy = (direction, size = step) => {
+		if (isFrozen) return;
+		const base = settle() ?? 0;
+		let next = addExact(base, direction * size);
+		if (shouldSnapOnStep) next = snapToStep(next, step, min ?? 0);
+		commit(clampTo(next, min, max));
+	};
+	const handleKeyDown = (event) => {
+		if (isFrozen) return;
+		const { key, altKey, shiftKey } = event;
+		if (key === "Enter") return commit(settle());
+		if (key === "ArrowUp" || key === "ArrowDown") {
+			event.preventDefault();
+			let size = step;
+			if (altKey) size = smallStep;
+			if (shiftKey) size = largeStep;
+			return stepBy(key === "ArrowUp" ? 1 : -1, size);
+		}
+		const edge = key === "Home" ? min : max;
+		if ((key === "Home" || key === "End") && edge !== void 0) {
+			event.preventDefault();
+			commit(edge);
+		}
+	};
+	return {
+		text,
+		value,
+		canIncrement: !isFrozen && (max === void 0 || (value ?? Number.NEGATIVE_INFINITY) < max),
+		canDecrement: !isFrozen && (min === void 0 || (value ?? Number.POSITIVE_INFINITY) > min),
+		handleChange,
+		handleBlur,
+		handleKeyDown,
+		stepBy
+	};
+}
+//#endregion
+//#region src/NumberField/hooks/useWheelStep.ts
+/**
+* Steps a focused field by the mouse wheel - up for a wheel up. A native listener, since the
+* page must not scroll as it turns, and a React one can't prevent that.
+*/
+function useWheelStep(ref, isEnabled, onStep) {
+	const stepRef = useRef(onStep);
+	useEffect(() => {
+		stepRef.current = onStep;
+	});
+	useEffect(() => {
+		const element = ref.current;
+		if (!isEnabled || !element) return void 0;
+		const handleWheel = (event) => {
+			if (element.ownerDocument.activeElement !== element) return;
+			event.preventDefault();
+			stepRef.current(event.deltaY < 0 ? 1 : -1);
+		};
+		element.addEventListener("wheel", handleWheel, { passive: false });
+		return () => element.removeEventListener("wheel", handleWheel);
+	}, [ref, isEnabled]);
+}
+//#endregion
+//#region src/NumberField/NumberField.tsx
+const widthStyles = (0, src_exports.system)({
+	width: true,
+	minWidth: true,
+	maxWidth: true
+});
+const frameStyle = ({ theme, color, textColor, isError, isDisabled, isFullWidth, isInField }) => {
+	const main = (0, src_exports.get)(theme, `palette.${color}.main`);
+	const border = isError ? (0, src_exports.get)(theme, "palette.error.main") : (0, src_exports.get)(theme, `palette.${color}.light`);
+	const focusBorder = isError ? (0, src_exports.get)(theme, "palette.error.main") : main;
+	return {
+		display: isFullWidth || isInField ? "flex" : "inline-flex",
+		...isFullWidth && { width: "100%" },
+		...isInField && !isFullWidth && { width: "fit-content" },
+		alignItems: "stretch",
+		transition: "border-color 0.15s ease",
+		backgroundColor: (0, src_exports.get)(theme, `background.${themeDefault(theme, "inputBg", "terminal")}`),
+		color: textColor ? (0, src_exports.get)(theme, `text.${textColor}`) : (0, src_exports.get)(theme, `palette.${color}.main`),
+		fontFamily: (0, src_exports.get)(theme, "fonts.body"),
+		lineHeight: (0, src_exports.get)(theme, "lineHeights.base"),
+		borderColor: border,
+		"&:focus-within": { borderColor: focusBorder },
+		"&:has(input:focus-visible)": {
+			outline: `2px solid ${main}`,
+			outlineOffset: "2px"
+		},
+		...isDisabled && {
+			opacity: .5,
+			cursor: "not-allowed",
+			pointerEvents: "none"
+		}
+	};
+};
+const NumberFieldRoot = styled("div", {
+	name: "NumberField",
+	label: "NumberField",
+	shouldForwardProp: createShouldForwardProp([
+		...props,
+		"color",
+		"textColor",
+		"variant",
+		"isError",
+		"isDisabled",
+		"isFullWidth",
+		"isInField"
+	]),
+	systemProps: [src_exports.space, widthStyles]
+})(inputVariantStyles, frameStyle);
+const NumberFieldInput = styled("input", {
+	name: "NumberField",
+	slot: "input",
+	label: "NumberFieldInput",
+	shouldForwardProp: createShouldForwardProp(["sizeToken", "isCentered"])
+})(({ theme, sizeToken, isCentered }) => {
+	const s = theme.sizes[sizeToken];
+	return {
+		flex: 1,
+		minWidth: 0,
+		width: "100%",
+		border: "none",
+		outline: "none",
+		background: "transparent",
+		color: "inherit",
+		fontFamily: "inherit",
+		lineHeight: "inherit",
+		textAlign: isCentered ? "center" : "start",
+		paddingTop: theme.space[s.paddingTop],
+		paddingBottom: theme.space[s.paddingBottom],
+		paddingLeft: theme.space[s.paddingLeft],
+		paddingRight: theme.space[s.paddingRight],
+		fontSize: theme.fontSizes[s.fontSize],
+		"&::placeholder": {
+			color: "inherit",
+			opacity: .5
+		},
+		"&:disabled": { cursor: "not-allowed" }
+	};
+});
+const NumberFieldSpinButtons = styled("span", {
+	name: "NumberField",
+	slot: "spinButtons",
+	label: "NumberFieldSpinButtons"
+})(({ theme }) => ({
+	display: "flex",
+	flexDirection: "column",
+	borderInlineStart: `${theme.borderWidths.thin} solid`,
+	borderColor: "inherit"
+}));
+const spinStyle = ({ theme, color, isSide }) => {
+	const main = (0, src_exports.get)(theme, `palette.${color}.main`);
+	return {
+		appearance: "none",
+		display: "grid",
+		placeItems: "center",
+		flex: isSide ? "0 0 auto" : 1,
+		minWidth: isSide ? theme.space[5] : theme.icon.lg,
+		padding: 0,
+		border: "none",
+		background: "transparent",
+		color: "inherit",
+		cursor: "pointer",
+		"&:hover:not(:disabled)": { backgroundColor: `${main}1F` },
+		"&:disabled": {
+			opacity: .4,
+			cursor: "default"
+		}
+	};
+};
+const spinProps = createShouldForwardProp(["color", "isSide"]);
+const sideDivider = (edge) => {
+	return ({ theme, isSide }) => isSide ? {
+		[edge]: `${theme.borderWidths.thin} solid`,
+		borderColor: "inherit"
+	} : {};
+};
+const NumberFieldIncrement = styled("button", {
+	name: "NumberField",
+	slot: "increment",
+	label: "NumberFieldIncrement",
+	shouldForwardProp: spinProps
+})(spinStyle, sideDivider("borderInlineStart"));
+const NumberFieldDecrement = styled("button", {
+	name: "NumberField",
+	slot: "decrement",
+	label: "NumberFieldDecrement",
+	shouldForwardProp: spinProps
+})(spinStyle, sideDivider("borderInlineEnd"));
+const getSpinIcon = (direction, isSide) => {
+	if (isSide) return direction === 1 ? "add" : "remove";
+	return direction === 1 ? "expand_less" : "expand_more";
+};
+function SpinButton({ direction, label, isSide, isDisabled, color, onStep }) {
+	const hold = useHoldRepeat(() => onStep(direction));
+	const { stop } = hold;
+	useEffect(() => {
+		if (isDisabled) stop();
+	}, [isDisabled, stop]);
+	return /* @__PURE__ */ jsx(direction === 1 ? NumberFieldIncrement : NumberFieldDecrement, {
+		type: "button",
+		tabIndex: -1,
+		"aria-label": label,
+		disabled: isDisabled,
+		color,
+		isSide,
+		onMouseDown: (event) => event.preventDefault(),
+		onPointerDown: (event) => event.button === 0 && hold.start(),
+		onPointerUp: hold.stop,
+		onPointerLeave: hold.stop,
+		onPointerCancel: hold.stop,
+		onClick: (event) => event.detail === 0 && onStep(direction),
+		children: /* @__PURE__ */ jsx(Icon, {
+			name: getSpinIcon(direction, isSide),
+			size: "sm",
+			color: "inherit"
+		})
+	});
+}
+/**
+* @description A field for a number: a text input - so what is typed is the user's until it is
+* settled - that reads and writes the number in its locale, clamps it to `min`/`max`, and steps
+* by the arrow keys, Home/End, the wheel and buttons that repeat while held. A
+* `role="spinbutton"`, so the number and its range are announced; a hidden input carries the raw
+* number to a form. In a `FormControl` it takes the field's size, color, error, disabled and
+* required state, and its `FormLabel` targets the field.
+*/
+function NumberField({ value, defaultValue, onChange, onChangeCommitted, min, max, step: stepProp, smallStep: smallStepProp, largeStep: largeStepProp, format, locale, shouldSnapOnStep: shouldSnapProp, shouldScrubOnWheel: shouldScrubProp, spinButtons: spinButtonsProp, incrementLabel: incrementLabelProp, decrementLabel: decrementLabelProp, variant: variantProp, size: sizeProp, color: colorProp, textColor: textColorProp, error: errorProp, disabled: disabledProp, readOnly = false, required: requiredProp, fullWidth: fullWidthProp, name, id: idProp, placeholder, autoFocus, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-testid": dataTestid, ...rest }) {
+	const theme = useTheme();
+	const dp = useDefaultProps("NumberField");
+	const isInField = useContext(FormControlContext) !== null;
+	const fc = useFormControl({
+		id: idProp,
+		error: errorProp,
+		disabled: disabledProp,
+		required: requiredProp,
+		size: sizeProp ?? dp.size,
+		fullWidth: fullWidthProp,
+		color: colorProp ?? dp.color,
+		textColor: textColorProp
+	});
+	const color = fc.color ?? themeDefault(theme, "color", "primary");
+	const textColor = fc.textColor;
+	const variant = variantProp ?? dp.variant ?? themeDefault(theme, "inputVariant", "default");
+	const spinButtons = spinButtonsProp ?? dp.spinButtons ?? "stacked";
+	const step = stepProp ?? dp.step ?? 1;
+	const isFrozen = fc.disabled || readOnly;
+	const field = useNumberField({
+		value,
+		defaultValue,
+		onChange,
+		onChangeCommitted,
+		min,
+		max,
+		step,
+		smallStep: smallStepProp ?? dp.smallStep ?? .1,
+		largeStep: largeStepProp ?? dp.largeStep ?? 10,
+		format,
+		locale,
+		shouldSnapOnStep: shouldSnapProp ?? dp.shouldSnapOnStep ?? false,
+		isFrozen
+	});
+	const inputRef = useRef(null);
+	useWheelStep(inputRef, shouldScrubProp ?? dp.shouldScrubOnWheel ?? false, field.stepBy);
+	const isSide = spinButtons === "sides";
+	const buttonProps = {
+		isSide,
+		color,
+		onStep: field.stepBy
+	};
+	const decrement = /* @__PURE__ */ jsx(SpinButton, {
+		direction: -1,
+		label: decrementLabelProp ?? dp.decrementLabel,
+		isDisabled: !field.canDecrement,
+		...buttonProps
+	});
+	const increment = /* @__PURE__ */ jsx(SpinButton, {
+		direction: 1,
+		label: incrementLabelProp ?? dp.incrementLabel,
+		isDisabled: !field.canIncrement,
+		...buttonProps
+	});
+	const inputMode = (min ?? -1) >= 0 && Number.isInteger(step) ? "numeric" : "decimal";
+	return /* @__PURE__ */ jsxs(NumberFieldRoot, {
+		color,
+		textColor,
+		variant,
+		isError: fc.error,
+		isDisabled: fc.disabled,
+		isFullWidth: fc.fullWidth,
+		isInField,
+		className,
+		"data-testid": dataTestid,
+		...rest,
+		children: [
+			isSide && decrement,
+			/* @__PURE__ */ jsx(NumberFieldInput, {
+				ref: inputRef,
+				type: "text",
+				role: "spinbutton",
+				inputMode,
+				autoComplete: "off",
+				id: fc.id,
+				value: field.text,
+				placeholder,
+				autoFocus,
+				disabled: fc.disabled,
+				readOnly,
+				required: fc.required,
+				sizeToken: fc.size,
+				isCentered: isSide,
+				"aria-valuenow": field.value ?? void 0,
+				"aria-valuemin": min,
+				"aria-valuemax": max,
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledby,
+				"aria-describedby": ariaDescribedby ?? fc["aria-describedby"],
+				"aria-invalid": fc.error || void 0,
+				onChange: field.handleChange,
+				onBlur: field.handleBlur,
+				onKeyDown: field.handleKeyDown
+			}),
+			name !== void 0 && /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value: field.value ?? "",
+				disabled: fc.disabled
+			}),
+			spinButtons === "stacked" && /* @__PURE__ */ jsxs(NumberFieldSpinButtons, { children: [increment, decrement] }),
+			isSide && increment
+		]
+	});
+}
+//#endregion
+export { NumberField };

package/dist/Pagination/PaginationItem.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("../src-DU81aGy9.cjs");
 const require_themeDefault = require("../themeDefault-Cebi08Cv.cjs");
 const require_utils = require("../utils.cjs");
-const require_Icon = require("../Icon-CI6q2Eyi.cjs");
+const require_Icon = require("../Icon-D-EWsBVg.cjs");
 require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");

package/dist/Pagination/PaginationItem.d.cts

@@ -1,2 +1,2 @@
-import { a as PaginationItemSize, i as PaginationItemShape, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, t as PaginationItem } from "../index-DdqdSOct.cjs";
+import { a as PaginationItemSize, i as PaginationItemShape, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, t as PaginationItem } from "../index-ChXeKJCk.cjs";
 export { PaginationItem, PaginationItemColor, PaginationItemProps, PaginationItemShape, PaginationItemSize, PaginationItemVariant };

package/dist/Pagination/PaginationItem.d.mts

@@ -1,2 +1,2 @@
-import { a as PaginationItemSize, i as PaginationItemShape, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, t as PaginationItem } from "../index-BUoVTCqX.mjs";
+import { a as PaginationItemSize, i as PaginationItemShape, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, t as PaginationItem } from "../index-BGbTuHP9.mjs";
 export { PaginationItem, PaginationItemColor, PaginationItemProps, PaginationItemShape, PaginationItemSize, PaginationItemVariant };

package/dist/Pagination/PaginationItem.mjs

@@ -1,7 +1,7 @@
 import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "../src-DLGYOJMh.mjs";
 import { t as themeDefault } from "../themeDefault-Z3KmyIbm.mjs";
 import { alpha } from "../utils.mjs";
-import { t as Icon } from "../Icon-CH3asUJu.mjs";
+import { t as Icon } from "../Icon-BihOAP4u.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Pagination/PaginationItem/PaginationItem.tsx

package/dist/Pagination.d.cts

@@ -1,3 +1,3 @@
-import { a as PaginationItemSize, c as UsePaginationItem, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, s as PaginationItemType, t as PaginationItem, u as usePagination } from "./index-DdqdSOct.cjs";
-import { a as PaginationSize, i as PaginationShape, n as PaginationColor, o as PaginationVariant, r as PaginationProps, t as Pagination } from "./index-Celm-8iN.cjs";
+import { a as PaginationItemSize, c as UsePaginationItem, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, s as PaginationItemType, t as PaginationItem, u as usePagination } from "./index-ChXeKJCk.cjs";
+import { a as PaginationSize, i as PaginationShape, n as PaginationColor, o as PaginationVariant, r as PaginationProps, t as Pagination } from "./index-BHKgEOZJ.cjs";
 export { Pagination, PaginationColor, PaginationItem, PaginationItemColor, PaginationItemProps, PaginationItemShape, PaginationItemSize, PaginationItemType, PaginationItemVariant, PaginationProps, PaginationShape, PaginationSize, PaginationVariant, UsePaginationItem, UsePaginationProps, usePagination };

package/dist/Pagination.d.mts

@@ -1,3 +1,3 @@
-import { a as PaginationItemSize, c as UsePaginationItem, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, s as PaginationItemType, t as PaginationItem, u as usePagination } from "./index-BUoVTCqX.mjs";
-import { a as PaginationSize, i as PaginationShape, n as PaginationColor, o as PaginationVariant, r as PaginationProps, t as Pagination } from "./index-Chg6pSrr.mjs";
+import { a as PaginationItemSize, c as UsePaginationItem, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, s as PaginationItemType, t as PaginationItem, u as usePagination } from "./index-BGbTuHP9.mjs";
+import { a as PaginationSize, i as PaginationShape, n as PaginationColor, o as PaginationVariant, r as PaginationProps, t as Pagination } from "./index-BQWjh4rK.mjs";
 export { Pagination, PaginationColor, PaginationItem, PaginationItemColor, PaginationItemProps, PaginationItemShape, PaginationItemSize, PaginationItemType, PaginationItemVariant, PaginationProps, PaginationShape, PaginationSize, PaginationVariant, UsePaginationItem, UsePaginationProps, usePagination };

package/dist/Paper.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
 const require_Flex = require("./Flex.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-BXlAP3xf.cjs");
+const require_theme = require("./theme-BxXuXRgQ.cjs");
 require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/Paper/Paper.tsx

package/dist/Paper.d.cts

@@ -1,2 +1,3 @@
-import { n as PaperElevation, r as PaperProps, t as Paper } from "./index-DzQJSYIh.cjs";
+import { Gt as PaperElevation, Kt as PaperProps, Wt as Paper } from "./index-DJ0f69wh.cjs";
+import "./index-BxVTIMnB.cjs";
 export { Paper, PaperElevation, PaperProps };

package/dist/Paper.d.mts

@@ -1,2 +1,3 @@
-import { n as PaperElevation, r as PaperProps, t as Paper } from "./index-B_dKjEDR.mjs";
+import { Gt as PaperElevation, Kt as PaperProps, Wt as Paper } from "./index-CJhK7JND.mjs";
+import "./index-DaIIo5QU.mjs";
 export { Paper, PaperElevation, PaperProps };

package/dist/Paper.mjs

@@ -1,7 +1,7 @@
 import { a as src_exports, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
 import { Flex } from "./Flex.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "./theme-CDVxig_g.mjs";
+import { r as useTheme } from "./theme-Z9_QludW.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Paper/Paper.tsx