@paroicms/react-ui 0.5.0 → 0.5.2

package/dist/SplitButton.js

@@ -2,26 +2,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "../styles/SplitButton.css";
 import { clsx } from "clsx";
 import { ChevronDown } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { Button, } from "./Button.js";
+import { computePopupPosition, setupPopoverPositioning } from "./popup-positioning.js";
 export function SplitButton(props) {
-    const { items, className, ...buttonProps } = props;
-    const [open, setOpen] = useState(false);
+    const { items, className, position, ...buttonProps } = props;
     const containerRef = useRef(null);
+    const menuRef = useRef(null);
+    const menuId = useRef(`pa-splitbtn-menu-${Math.random().toString(36).substring(2, 9)}`);
     const severity = props.severity ?? "primary";
     const disabled = props.disabled;
-    // Close dropdown when clicking outside
     useEffect(() => {
-        if (!open)
+        const menu = menuRef.current;
+        const container = containerRef.current;
+        if (!menu || !container)
             return;
-        const handleClickOutside = (e) => {
-            if (containerRef.current && !containerRef.current.contains(e.target)) {
-                setOpen(false);
-            }
-        };
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, [open]);
+        return setupPopoverPositioning(menu, () => computePopupPosition(container, menu, position ?? "auto", "corner"));
+    }, [position]);
     const handleItemClick = async (item) => {
         try {
             await item.command();
@@ -35,8 +32,8 @@ export function SplitButton(props) {
             }
         }
         finally {
-            setOpen(false);
+            menuRef.current?.hidePopover();
         }
     };
-    return (_jsxs("div", { ref: containerRef, className: clsx("PaSplitBtn", severity, open && "open", disabled && "disabled", className), children: [_jsx(Button, { ...buttonProps, className: "PaSplitBtn-main" }), _jsx("button", { type: "button", className: "PaSplitBtn-toggle", onClick: () => setOpen(!open), "aria-haspopup": "menu", "aria-expanded": open, children: _jsx(ChevronDown, { className: "PaSplitBtn-toggleIcon" }) }), open && (_jsx("div", { className: "PaSplitBtn-menu", role: "menu", children: items.map((item) => (_jsxs("button", { type: "button", className: clsx("PaSplitBtn-menuItem", item.danger && "danger", item.disabled && "disabled"), onClick: () => void handleItemClick(item), role: "menuitem", disabled: item.disabled, children: [item.icon && _jsx("span", { className: "PaSplitBtn-menuIcon", children: item.icon }), item.label] }, item.label))) }))] }));
+    return (_jsxs("div", { ref: containerRef, className: clsx("PaSplitBtn", severity, disabled && "disabled", className), children: [_jsx(Button, { ...buttonProps, className: "PaSplitBtn-main" }), _jsx("button", { type: "button", className: "PaSplitBtn-toggle", popoverTarget: menuId.current, popoverTargetAction: "toggle", "aria-haspopup": "menu", children: _jsx(ChevronDown, { className: "PaSplitBtn-toggleIcon" }) }), _jsx("div", { ref: menuRef, id: menuId.current, className: "PaSplitBtn-menu", role: "menu", popover: "auto", children: items.map((item) => (_jsxs("button", { type: "button", className: clsx("PaSplitBtn-menuItem", item.danger && "danger", item.disabled && "disabled"), onClick: () => void handleItemClick(item), role: "menuitem", disabled: item.disabled, children: [item.icon && _jsx("span", { className: "PaSplitBtn-menuIcon", children: item.icon }), item.label] }, item.label))) })] }));
 }

package/dist/Switch.d.ts

@@ -1,8 +1,8 @@
-import type { InputHTMLAttributes } from "react";
+import type { ChangeEvent, InputHTMLAttributes } from "react";
 import "../styles/Switch.css";
 export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
     checked: boolean;
-    onChange: (checked: boolean) => void;
+    onChange?: (checked: boolean, ev: ChangeEvent<HTMLInputElement>) => void;
     label?: string;
     className?: string;
 }

package/dist/Switch.js

@@ -3,7 +3,7 @@ import { clsx } from "clsx";
 import "../styles/Switch.css";
 export function Switch({ checked, onChange, label, className, ...rest }) {
     const handleChange = (e) => {
-        onChange(e.target.checked);
+        onChange?.(e.target.checked, e);
     };
     if (label) {
         return (_jsxs("label", { className: clsx("PaSwitch", className), children: [_jsx("input", { className: "PaSwitch-input", type: "checkbox", checked: checked, onChange: handleChange, ...rest }), _jsx("span", { className: "PaSwitch-track", children: _jsx("span", { className: "PaSwitch-thumb" }) }), _jsx("span", { className: "PaSwitch-label", children: label })] }));

package/dist/Textarea.d.ts

@@ -1,8 +1,10 @@
 import "../styles/Textarea.css";
-import type { Ref, TextareaHTMLAttributes } from "react";
-export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+import type { ChangeEvent, Ref, TextareaHTMLAttributes } from "react";
+export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
+    value?: string;
+    onChange?: (value: string, ev: ChangeEvent<HTMLTextAreaElement>) => void;
     label?: string;
     error?: string;
     ref?: Ref<HTMLTextAreaElement>;
 }
-export declare function Textarea({ className, label, error, ref, ...props }: TextareaProps): import("react/jsx-runtime").JSX.Element;
+export declare function Textarea({ className, label, error, value, onChange, ref, ...props }: TextareaProps): import("react/jsx-runtime").JSX.Element;

package/dist/Textarea.js

@@ -1,7 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import "../styles/Textarea.css";
 import { clsx } from "clsx";
-export function Textarea({ className, label, error, ref, ...props }) {
-    const textareaElement = (_jsx("textarea", { ref: ref, className: clsx("PaTextarea-field", error && "error"), ...props }));
-    return (_jsxs("span", { className: clsx("PaTextarea", className), children: [label ? (_jsxs("label", { className: "PaTextarea-wrapper", children: [_jsx("span", { className: "PaTextarea-label", children: label }), textareaElement] })) : (textareaElement), error && _jsx("span", { className: "PaTextarea-error", children: error })] }));
+export function Textarea({ className, label, error, value, onChange, ref, ...props }) {
+    const handleChange = (e) => {
+        onChange?.(e.target.value, e);
+    };
+    const textareaElement = (_jsx("textarea", { ref: ref, className: clsx("PaTextarea", error && "error", !label && className), value: value, onChange: handleChange, ...props }));
+    return (_jsxs(_Fragment, { children: [label ? (_jsxs("label", { className: clsx("PaField", error && "error", className), children: [_jsx("span", { className: "PaField-label", children: label }), textareaElement] })) : (textareaElement), error && _jsx("span", { className: "PaFieldError", children: error })] }));
 }

package/dist/Tooltip.d.ts

@@ -2,7 +2,7 @@ import "../styles/Tooltip.css";
 import { type ReactNode } from "react";
 export interface TooltipProps {
     content: string;
-    position?: "top" | "bottom" | "left" | "right";
+    position?: "auto" | "top" | "bottom" | "left" | "right";
     children: ReactNode;
     className?: string;
     delay?: number;

package/dist/Tooltip.js

@@ -1,50 +1,29 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import "../styles/Tooltip.css";
 import { clsx } from "clsx";
-import { useEffect, useRef, useState } from "react";
-export function Tooltip({ content, position = "top", children, className, delay = 200, }) {
-    const [visible, setVisible] = useState(false);
-    const [coords, setCoords] = useState({ top: 0, left: 0 });
+import { useEffect, useRef } from "react";
+import { computePopupPosition, setupPopoverPositioning } from "./popup-positioning.js";
+export function Tooltip({ content, position = "auto", children, className, delay = 200, }) {
     const triggerRef = useRef(null);
     const tooltipRef = useRef(null);
     const timeoutRef = useRef(undefined);
     const showTooltip = () => {
         timeoutRef.current = window.setTimeout(() => {
-            setVisible(true);
+            tooltipRef.current?.showPopover();
         }, delay);
     };
     const hideTooltip = () => {
         if (timeoutRef.current) {
             clearTimeout(timeoutRef.current);
         }
-        setVisible(false);
+        tooltipRef.current?.hidePopover();
     };
     useEffect(() => {
-        if (!visible || !triggerRef.current)
+        if (!tooltipRef.current || !triggerRef.current)
             return;
-        const trigger = triggerRef.current;
-        const rect = trigger.getBoundingClientRect();
-        let top = 0;
-        let left = 0;
-        switch (position) {
-            case "top":
-                top = rect.top - 8;
-                left = rect.left + rect.width / 2;
-                break;
-            case "bottom":
-                top = rect.bottom + 8;
-                left = rect.left + rect.width / 2;
-                break;
-            case "left":
-                top = rect.top + rect.height / 2;
-                left = rect.left - 8;
-                break;
-            case "right":
-                top = rect.top + rect.height / 2;
-                left = rect.right + 8;
-                break;
-        }
-        setCoords({ top, left });
-    }, [visible, position]);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, className: "PaTooltip-trigger", onMouseEnter: showTooltip, onMouseLeave: hideTooltip, onFocus: showTooltip, onBlur: hideTooltip, children: children }), visible && (_jsx("div", { ref: tooltipRef, className: clsx("PaTooltip", position, className), style: { top: coords.top, left: coords.left }, role: "tooltip", children: content }))] }));
+        const triggerEl = triggerRef.current;
+        const popupEl = tooltipRef.current;
+        return setupPopoverPositioning(popupEl, () => computePopupPosition(triggerEl, popupEl, position, "cardinal"));
+    }, [position]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, className: "PaTooltip-trigger", onMouseEnter: showTooltip, onMouseLeave: hideTooltip, onFocus: showTooltip, onBlur: hideTooltip, children: children }), _jsx("div", { ref: tooltipRef, className: clsx("PaTooltip", className), role: "tooltip", popover: "hint", children: content })] }));
 }

package/dist/alert-stack.d.ts

@@ -14,5 +14,7 @@ interface AlertStackProviderProps {
 }
 export declare function AlertStackProvider({ children, ref }: AlertStackProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useAlertStack(): AlertStackHandle;
-export declare function AlertStack(): import("react/jsx-runtime").JSX.Element | null;
+export declare function AlertStack(props?: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/alert-stack.js

@@ -47,7 +47,7 @@ export function useAlertStack() {
     }, [context.showAlert]);
     return { showAlert: context.showAlert, showError };
 }
-export function AlertStack() {
+export function AlertStack(props) {
     const context = useContext(AlertStackContext);
     const config = useReactUIConfig();
     if (!context) {
@@ -68,5 +68,5 @@ export function AlertStack() {
     ]);
     if (!currentAlert)
         return null;
-    return (_jsx(Alert, { severity: currentAlert.severity, onClose: dismissCurrent, children: currentAlert.message }));
+    return (_jsx(Alert, { className: props?.className, severity: currentAlert.severity, onClose: dismissCurrent, children: currentAlert.message }));
 }

package/dist/popup-positioning.d.ts

@@ -0,0 +1,10 @@
+export type CornerPosition = "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+export type VerticalPosition = "top" | "bottom";
+export type CardinalPosition = "top" | "bottom" | "left" | "right";
+export interface PositionResult {
+    top: number;
+    left: number;
+    position: string;
+}
+export declare function setupPopoverPositioning(popupEl: HTMLElement, getPosition: () => PositionResult): () => void;
+export declare function computePopupPosition(triggerEl: HTMLElement, popupEl: HTMLElement, preferredPosition: string, mode: "corner" | "vertical" | "cardinal"): PositionResult;

package/dist/popup-positioning.js

@@ -0,0 +1,160 @@
+export function setupPopoverPositioning(popupEl, getPosition) {
+    const handleToggle = (e) => {
+        const newState = e.newState;
+        if (newState === "open") {
+            const position = getPosition();
+            popupEl.style.position = "absolute";
+            popupEl.style.top = `${position.top}px`;
+            popupEl.style.left = `${position.left}px`;
+        }
+    };
+    popupEl.addEventListener("toggle", handleToggle);
+    return () => popupEl.removeEventListener("toggle", handleToggle);
+}
+export function computePopupPosition(triggerEl, popupEl, preferredPosition, mode) {
+    const triggerRect = triggerEl.getBoundingClientRect();
+    const popupWidth = popupEl.offsetWidth;
+    const popupHeight = popupEl.offsetHeight;
+    const bounds = getConstrainingBounds(triggerEl);
+    let result;
+    switch (mode) {
+        case "corner":
+            result = computeCornerPosition(triggerRect, popupWidth, popupHeight, bounds, preferredPosition);
+            break;
+        case "vertical":
+            result = computeVerticalPosition(triggerRect, popupWidth, popupHeight, bounds, preferredPosition);
+            break;
+        case "cardinal":
+            result = computeCardinalPosition(triggerRect, popupWidth, popupHeight, bounds, preferredPosition);
+            break;
+    }
+    return {
+        position: result.position,
+        top: result.top + window.scrollY,
+        left: result.left + window.scrollX,
+    };
+}
+function getConstrainingBounds(triggerEl) {
+    const dialog = triggerEl.closest("dialog");
+    if (dialog) {
+        const rect = dialog.getBoundingClientRect();
+        return {
+            top: rect.top,
+            left: rect.left,
+            right: rect.right,
+            bottom: rect.bottom,
+        };
+    }
+    return {
+        top: 0,
+        left: 0,
+        right: window.innerWidth,
+        bottom: window.innerHeight,
+    };
+}
+function computeCornerPosition(triggerRect, popupWidth, popupHeight, bounds, preferredPosition) {
+    const spaceTop = triggerRect.top - bounds.top;
+    const spaceBottom = bounds.bottom - triggerRect.bottom;
+    const spaceLeft = triggerRect.left - bounds.left;
+    const spaceRight = bounds.right - triggerRect.right;
+    let position;
+    if (preferredPosition !== "auto") {
+        position = preferredPosition;
+    }
+    else {
+        // Pick corner with most space, prefer bottom-right > bottom-left > top-right > top-left
+        const canBottom = spaceBottom >= popupHeight;
+        const canTop = spaceTop >= popupHeight;
+        const canRight = spaceRight + triggerRect.width >= popupWidth;
+        const canLeft = spaceLeft + triggerRect.width >= popupWidth;
+        if (canBottom && canRight) {
+            position = "bottomRight";
+        }
+        else if (canBottom && canLeft) {
+            position = "bottomLeft";
+        }
+        else if (canTop && canRight) {
+            position = "topRight";
+        }
+        else if (canTop && canLeft) {
+            position = "topLeft";
+        }
+        else {
+            // Fallback: choose based on available space
+            const vertical = spaceBottom >= spaceTop ? "bottom" : "top";
+            const horizontal = spaceRight >= spaceLeft ? "Right" : "Left";
+            position = `${vertical}${horizontal}`;
+        }
+    }
+    let top;
+    let left;
+    if (position.startsWith("bottom")) {
+        top = triggerRect.bottom;
+    }
+    else {
+        top = triggerRect.top - popupHeight;
+    }
+    if (position.endsWith("Right")) {
+        left = triggerRect.left;
+    }
+    else {
+        left = triggerRect.right - popupWidth;
+    }
+    return { position, top, left };
+}
+function computeVerticalPosition(triggerRect, _popupWidth, popupHeight, bounds, preferredPosition) {
+    const spaceTop = triggerRect.top - bounds.top;
+    const spaceBottom = bounds.bottom - triggerRect.bottom;
+    let position;
+    if (preferredPosition !== "auto") {
+        position = preferredPosition;
+    }
+    else {
+        position = spaceBottom >= popupHeight || spaceBottom >= spaceTop ? "bottom" : "top";
+    }
+    const top = position === "bottom" ? triggerRect.bottom : triggerRect.top - popupHeight;
+    const left = triggerRect.left;
+    return { position, top, left };
+}
+function computeCardinalPosition(triggerRect, popupWidth, popupHeight, bounds, preferredPosition) {
+    const spaceTop = triggerRect.top - bounds.top;
+    const spaceBottom = bounds.bottom - triggerRect.bottom;
+    const spaceLeft = triggerRect.left - bounds.left;
+    const spaceRight = bounds.right - triggerRect.right;
+    let position;
+    if (preferredPosition !== "auto") {
+        position = preferredPosition;
+    }
+    else {
+        // Pick direction with most space
+        const spaces = [
+            { dir: "bottom", space: spaceBottom },
+            { dir: "right", space: spaceRight },
+            { dir: "top", space: spaceTop },
+            { dir: "left", space: spaceLeft },
+        ];
+        spaces.sort((a, b) => b.space - a.space);
+        position = spaces[0].dir;
+    }
+    let top;
+    let left;
+    switch (position) {
+        case "top":
+            top = triggerRect.top - popupHeight;
+            left = triggerRect.left + (triggerRect.width - popupWidth) / 2;
+            break;
+        case "bottom":
+            top = triggerRect.bottom;
+            left = triggerRect.left + (triggerRect.width - popupWidth) / 2;
+            break;
+        case "left":
+            top = triggerRect.top + (triggerRect.height - popupHeight) / 2;
+            left = triggerRect.left - popupWidth;
+            break;
+        case "right":
+            top = triggerRect.top + (triggerRect.height - popupHeight) / 2;
+            left = triggerRect.right;
+            break;
+    }
+    return { position, top, left };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paroicms/react-ui",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "React UI toolkit for ParoiCMS.",
   "keywords": [
     "paroicms",
@@ -25,7 +25,7 @@
     "dev": "tsc --watch --preserveWatchOutput"
   },
   "dependencies": {
-    "@paroicms/public-anywhere-lib": "0.41.0",
+    "@paroicms/public-anywhere-lib": "0.41.1",
     "clsx": "~2.1.1",
     "lucide-react": "~0.562.0",
     "react-sortablejs": "~6.1.4",
@@ -36,11 +36,11 @@
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@types/react": "~19.2.7",
+    "@types/react": "~19.2.8",
     "@types/react-dom": "~19.2.3",
-    "@types/sortablejs": "^1.15.8",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
+    "@types/sortablejs": "^1.15.9",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
     "rimraf": "~6.1.2",
     "typescript": "~5.9.3"
   },

package/styles/Alert.css

@@ -4,6 +4,7 @@
 .PaAlert {
   position: relative;
   padding: var(--space-4) var(--space-5);
+  margin: var(--space-4) 0;
   border-left: 4px solid;
   border-radius: var(--radius);
 

package/styles/Checkbox.css

@@ -1,7 +1,7 @@
 /* ========================================
    Checkbox Component
    ======================================== */
-.PaCheckbox {
+.PaCheckboxField {
   display: inline-flex;
   gap: var(--space-2);
   align-items: center;
@@ -9,7 +9,7 @@
   user-select: none;
 }
 
-.PaCheckbox-input {
+.PaCheckboxInput {
   display: flex;
   flex-shrink: 0;
   align-items: center;
@@ -24,7 +24,7 @@
   border-radius: var(--radius-sm);
   transition: all var(--transition);
 
-  &:hover {
+  &:hover:not(:disabled) {
     border-color: var(--color-primary);
   }
 
@@ -55,7 +55,8 @@
   }
 }
 
-.PaCheckbox-label {
-  font-size: var(--text-sm);
-  color: var(--color-text);
+.PaCheckboxGroup {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
 }

package/styles/DateInput.css

@@ -1,25 +1,7 @@
 /* ========================================
    DateInput Component
    ======================================== */
-.PaDateInput {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-.PaDateInput-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-.PaDateInput-label {
-  font-size: var(--text-sm);
-  font-weight: var(--font-medium);
-  color: var(--color-text);
-}
-
-.PaDateInput-field {
+.PaDateTimeInput {
   padding: var(--space-2) var(--space-3);
   font-family: inherit;
   font-size: var(--text-base);
@@ -32,7 +14,7 @@
     border-color var(--transition),
     box-shadow var(--transition);
 
-  &:hover {
+  &:hover:not(:disabled) {
     border-color: var(--color-primary);
   }
 
@@ -52,8 +34,3 @@
     border-color: var(--color-danger);
   }
 }
-
-.PaDateInput-error {
-  font-size: var(--text-xs);
-  color: var(--color-danger);
-}

package/styles/Dialog.css

@@ -1,32 +1,43 @@
 /* ========================================
    Dialog Component
    ======================================== */
-.PaDialog-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: var(--z-modal);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.PaDialog-backdrop {
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-}
-
 .PaDialog {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  min-width: 320px;
   max-width: 90vw;
-  max-height: 90vh;
+  padding: 0;
   background: var(--color-bg-elevated);
+  border: none;
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-lg);
+
+  &[open] {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &:modal {
+    max-height: 90vh;
+    margin: auto;
+  }
+
+  &::backdrop {
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  /* Size variants */
+  &.sizeSm {
+    width: 480px;
+    max-width: 100%;
+  }
+
+  &.sizeMd {
+    width: 640px;
+    max-width: 100%;
+  }
+
+  &.sizeLg {
+    width: 800px;
+    max-width: 100%;
+  }
 }
 
 .PaDialog-header {
@@ -34,7 +45,7 @@
   gap: var(--space-4);
   align-items: center;
   justify-content: space-between;
-  padding: var(--space-4) var(--space-5);
+  padding: var(--space-3) var(--space-5);
   border-bottom: 1px solid var(--color-border-light);
 }
 
@@ -48,6 +59,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 40px;
+  height: 40px;
   padding: var(--space-1);
   color: var(--color-text-muted);
   cursor: pointer;

package/styles/InputNumber.css

@@ -1,25 +1,7 @@
 /* ========================================
    InputNumber Component
    ======================================== */
-.PaInputNumber {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-.PaInputNumber-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-.PaInputNumber-label {
-  font-size: var(--text-sm);
-  font-weight: var(--font-medium);
-  color: var(--color-text);
-}
-
-.PaInputNumber-field {
+.PaNumberInput {
   width: 100%;
   padding: var(--space-2) var(--space-3);
   font-family: inherit;
@@ -33,7 +15,7 @@
     border-color var(--transition),
     box-shadow var(--transition);
 
-  &:hover {
+  &:hover:not(:disabled) {
     border-color: var(--color-primary);
   }
 
@@ -53,8 +35,3 @@
     border-color: var(--color-danger);
   }
 }
-
-.PaInputNumber-error {
-  font-size: var(--text-xs);
-  color: var(--color-danger);
-}