@paroicms/react-ui 0.4.4 → 0.5.1

package/dist/Tree.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from "react";
+import "../styles/Tree.css";
+export interface TreeNode {
+    key: string;
+    label: ReactNode;
+    children?: TreeNode[];
+    data?: unknown;
+    selectable?: boolean;
+    icon?: ReactNode;
+    className?: string;
+}
+export interface TreeProps {
+    value: TreeNode[];
+    selectionMode?: "single" | "checkbox";
+    selection?: Record<string, boolean>;
+    onSelectionChange?: (selection: Record<string, boolean>) => void;
+    expandedKeys?: Record<string, boolean>;
+    onExpandedKeysChange?: (keys: Record<string, boolean>) => void;
+    nodeTemplate?: (node: TreeNode) => ReactNode;
+    className?: string;
+}
+export declare function Tree({ value, selectionMode, selection, onSelectionChange, expandedKeys, onExpandedKeysChange, nodeTemplate, className, }: TreeProps): import("react/jsx-runtime").JSX.Element;

package/dist/Tree.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { useCallback } from "react";
+import "../styles/Tree.css";
+export function Tree({ value, selectionMode, selection = {}, onSelectionChange, expandedKeys = {}, onExpandedKeysChange, nodeTemplate, className, }) {
+    const toggleExpand = useCallback((key) => {
+        if (onExpandedKeysChange) {
+            const newKeys = { ...expandedKeys };
+            if (newKeys[key]) {
+                delete newKeys[key];
+            }
+            else {
+                newKeys[key] = true;
+            }
+            onExpandedKeysChange(newKeys);
+        }
+    }, [expandedKeys, onExpandedKeysChange]);
+    const toggleSelect = useCallback((key, node) => {
+        if (!onSelectionChange || node.selectable === false)
+            return;
+        if (selectionMode === "single") {
+            onSelectionChange({ [key]: true });
+        }
+        else if (selectionMode === "checkbox") {
+            const newSelection = { ...selection };
+            if (newSelection[key]) {
+                delete newSelection[key];
+            }
+            else {
+                newSelection[key] = true;
+            }
+            onSelectionChange(newSelection);
+        }
+    }, [selection, selectionMode, onSelectionChange]);
+    return (_jsx("div", { className: clsx("PaTree", className), children: _jsx("ul", { className: "PaTree-root", children: value.map((node) => (_jsx(TreeNodeItem, { node: node, expandedKeys: expandedKeys, selection: selection, selectionMode: selectionMode, onToggleExpand: toggleExpand, onToggleSelect: toggleSelect, nodeTemplate: nodeTemplate }, node.key))) }) }));
+}
+function TreeNodeItem({ node, expandedKeys, selection, selectionMode, onToggleExpand, onToggleSelect, nodeTemplate, }) {
+    const hasChildren = node.children && node.children.length > 0;
+    const isExpanded = expandedKeys[node.key];
+    const isSelected = selection[node.key];
+    return (_jsxs("li", { className: clsx("PaTree-node", node.className), children: [_jsxs("div", { className: clsx("PaTree-nodeContent", isSelected && "selected"), children: [hasChildren ? (_jsx("button", { type: "button", className: "PaTree-toggle", onClick: () => onToggleExpand(node.key), "aria-label": isExpanded ? "Collapse" : "Expand", children: isExpanded ? _jsx(ChevronDown, { size: 14 }) : _jsx(ChevronRight, { size: 14 }) })) : (_jsx("span", { className: "PaTree-togglePlaceholder" })), selectionMode === "checkbox" && (_jsx("input", { type: "checkbox", className: "PaTree-checkbox", checked: isSelected, onChange: () => onToggleSelect(node.key, node), disabled: node.selectable === false })), selectionMode === "single" && node.selectable !== false ? (_jsxs("button", { type: "button", className: clsx("PaTree-labelWrapper", "selectable"), onClick: () => onToggleSelect(node.key, node), children: [node.icon && _jsx("span", { className: "PaTree-icon", children: node.icon }), nodeTemplate ? nodeTemplate(node) : _jsx("span", { className: "PaTree-label", children: node.label })] })) : (_jsxs("div", { className: "PaTree-labelWrapper", children: [node.icon && _jsx("span", { className: "PaTree-icon", children: node.icon }), nodeTemplate ? nodeTemplate(node) : _jsx("span", { className: "PaTree-label", children: node.label })] }))] }), hasChildren && isExpanded && (_jsx("ul", { className: "PaTree-children", children: node.children?.map((child) => (_jsx(TreeNodeItem, { node: child, expandedKeys: expandedKeys, selection: selection, selectionMode: selectionMode, onToggleExpand: onToggleExpand, onToggleSelect: onToggleSelect, nodeTemplate: nodeTemplate }, child.key))) }))] }));
+}

package/dist/alert-stack.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode, Ref } from "react";
+export type AlertSeverity = "info" | "success" | "warning" | "error";
+export interface ShowAlertOptions {
+    severity?: AlertSeverity;
+    autoDismiss?: boolean;
+}
+export interface AlertStackHandle {
+    showAlert: (message: string, options?: ShowAlertOptions) => void;
+    showError: (error: unknown) => void;
+}
+interface AlertStackProviderProps {
+    children: ReactNode;
+    ref?: Ref<AlertStackHandle>;
+}
+export declare function AlertStackProvider({ children, ref }: AlertStackProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useAlertStack(): AlertStackHandle;
+export declare function AlertStack(props?: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/alert-stack.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { messageOf } from "@paroicms/public-anywhere-lib";
+import { createContext, useCallback, useContext, useEffect, useImperativeHandle, useReducer, useRef, } from "react";
+import { Alert } from "./Alert.js";
+import { useReactUIConfig } from "./react-ui-provider.js";
+const AlertStackContext = createContext(undefined);
+export function AlertStackProvider({ children, ref }) {
+    const { logger } = useReactUIConfig();
+    const queue = useRef([]);
+    const idSeq = useRef(0);
+    const [renderCount, forceRender] = useReducer((x) => x + 1, 0);
+    const showAlert = useCallback((message, options) => {
+        const alert = {
+            id: ++idSeq.current,
+            message,
+            severity: options?.severity ?? "info",
+            autoDismiss: options?.autoDismiss ?? false,
+        };
+        queue.current.push(alert);
+        forceRender();
+    }, []);
+    const dismissCurrent = useCallback(() => {
+        queue.current.shift();
+        forceRender();
+    }, []);
+    const showError = useCallback((error) => {
+        logger.error("AlertStack caught error:", error);
+        showAlert(messageOf(error), { severity: "error" });
+    }, [showAlert]);
+    useImperativeHandle(ref, () => ({ showAlert, showError }), [showAlert, showError]);
+    const contextValue = {
+        showAlert,
+        queue: queue.current,
+        dismissCurrent,
+    };
+    // renderCount is used to ensure context value updates trigger re-renders
+    void renderCount;
+    return _jsx(AlertStackContext.Provider, { value: contextValue, children: children });
+}
+export function useAlertStack() {
+    const context = useContext(AlertStackContext);
+    if (!context) {
+        throw new Error("useAlertStack must be used within an AlertStackProvider");
+    }
+    const showError = useCallback((error) => {
+        context.showAlert(messageOf(error), { severity: "error" });
+    }, [context.showAlert]);
+    return { showAlert: context.showAlert, showError };
+}
+export function AlertStack(props) {
+    const context = useContext(AlertStackContext);
+    const config = useReactUIConfig();
+    if (!context) {
+        throw new Error("AlertStack must be used within an AlertStackProvider");
+    }
+    const { queue, dismissCurrent } = context;
+    const currentAlert = queue[0];
+    useEffect(() => {
+        if (!currentAlert?.autoDismiss)
+            return;
+        const timer = setTimeout(dismissCurrent, config.autoDismissAlertDurationMs);
+        return () => clearTimeout(timer);
+    }, [
+        currentAlert?.id,
+        currentAlert?.autoDismiss,
+        config.autoDismissAlertDurationMs,
+        dismissCurrent,
+    ]);
+    if (!currentAlert)
+        return null;
+    return (_jsx(Alert, { className: props?.className, severity: currentAlert.severity, onClose: dismissCurrent, children: currentAlert.message }));
+}

package/dist/index.d.ts

@@ -1,11 +1,37 @@
-import "../styles/index.scss";
-export * from "./PuAccordion.jsx";
-export * from "./PuButton.jsx";
-export * from "./PuCheckbox.jsx";
-export * from "./PuInput.jsx";
-export * from "./PuMenuItem.jsx";
-export * from "./PuPopupMenu.jsx";
-export * from "./PuSelect.jsx";
-export * from "./PuSideMenu.jsx";
-export * from "./PuSpinner.jsx";
+import "../styles/theme/index.css";
+export * from "./Checkbox.js";
+export * from "./DateInput.js";
+export * from "./InputNumber.js";
+export * from "./InputText.js";
+export * from "./MultiSelect.js";
+export * from "./PasswordInput.js";
+export * from "./RadioButton.js";
+export * from "./Select.js";
+export * from "./Switch.js";
+export * from "./Textarea.js";
+export * from "./ToggleGroup.js";
+export * from "./Button.js";
+export * from "./SplitButton.js";
+export * from "./ToggleButton.js";
+export * from "./Alert.js";
+export * from "./Badge.js";
+export * from "./Card.js";
+export * from "./Chip.js";
+export * from "./Column.js";
+export * from "./DataTable.js";
+export * from "./Breadcrumb.js";
+export * from "./MenuItem.js";
+export * from "./PopupMenu.js";
+export * from "./SideMenu.js";
+export * from "./Tabs.js";
+export * from "./Dialog.js";
+export * from "./Spinner.js";
+export * from "./Tooltip.js";
+export * from "./Accordion.js";
+export * from "./Inplace.js";
+export * from "./Panel.js";
+export * from "./Tree.js";
+export * from "./SortableList.js";
+export * from "./alert-stack.js";
+export * from "./react-ui-provider.js";
 export type * from "./paroi-ui-lib-types.js";

package/dist/index.js

@@ -1,10 +1,45 @@
-import "../styles/index.scss";
-export * from "./PuAccordion.jsx";
-export * from "./PuButton.jsx";
-export * from "./PuCheckbox.jsx";
-export * from "./PuInput.jsx";
-export * from "./PuMenuItem.jsx";
-export * from "./PuPopupMenu.jsx";
-export * from "./PuSelect.jsx";
-export * from "./PuSideMenu.jsx";
-export * from "./PuSpinner.jsx";
+import "../styles/theme/index.css";
+// Form Controls
+export * from "./Checkbox.js";
+export * from "./DateInput.js";
+export * from "./InputNumber.js";
+export * from "./InputText.js";
+export * from "./MultiSelect.js";
+export * from "./PasswordInput.js";
+export * from "./RadioButton.js";
+export * from "./Select.js";
+export * from "./Switch.js";
+export * from "./Textarea.js";
+export * from "./ToggleGroup.js";
+// Buttons
+export * from "./Button.js";
+export * from "./SplitButton.js";
+export * from "./ToggleButton.js";
+// Data Display
+export * from "./Alert.js";
+export * from "./Badge.js";
+export * from "./Card.js";
+export * from "./Chip.js";
+export * from "./Column.js";
+export * from "./DataTable.js";
+// Navigation
+export * from "./Breadcrumb.js";
+export * from "./MenuItem.js";
+export * from "./PopupMenu.js";
+export * from "./SideMenu.js";
+export * from "./Tabs.js";
+// Overlays & Feedback
+export * from "./Dialog.js";
+export * from "./Spinner.js";
+export * from "./Tooltip.js";
+// Layout
+export * from "./Accordion.js";
+export * from "./Inplace.js";
+export * from "./Panel.js";
+// Tree
+export * from "./Tree.js";
+// Drag & Drop
+export * from "./SortableList.js";
+// Providers
+export * from "./alert-stack.js";
+export * from "./react-ui-provider.js";

package/dist/paroi-ui-lib-types.d.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties, ReactNode } from "react";
-export interface PuMenuOption {
+export interface MenuOption {
     /**
      * Unique identifier of the menuitem.
      */
@@ -32,14 +32,14 @@ export interface PuMenuOption {
      * Callback to execute when item is clicked.
      */
     command?(): void;
-    popupMenu?: PuMenuNode[];
+    popupMenu?: MenuNode[];
     active?: boolean;
 }
-export interface PuMenuNode extends PuMenuOption {
+export interface MenuNode extends MenuOption {
     /**
      * An array of child menu items.
      */
-    subMenu?: PuMenuNode[];
+    subMenu?: MenuNode[];
     /**
      * Initial visibility of submenu.
      */

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/dist/react-ui-provider.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+export interface ReactUIConfig {
+    autoDismissAlertDurationMs?: number;
+    autoDismissInsideFeedbackDurationMs?: number;
+    logger?: {
+        error: (...messages: unknown[]) => void;
+    };
+}
+interface ReactUIProviderProps {
+    config?: ReactUIConfig;
+    children: ReactNode;
+}
+export declare function ReactUIProvider({ config, children }: ReactUIProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useReactUIConfig(): Required<ReactUIConfig>;
+export {};

package/dist/react-ui-provider.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const ReactUIContext = createContext(undefined);
+const defaultConfig = {
+    autoDismissAlertDurationMs: 5000,
+    autoDismissInsideFeedbackDurationMs: 2000,
+    logger: {
+        error: console.error,
+    },
+};
+export function ReactUIProvider({ config, children }) {
+    return _jsx(ReactUIContext.Provider, { value: config, children: children });
+}
+export function useReactUIConfig() {
+    const config = useContext(ReactUIContext);
+    return {
+        autoDismissAlertDurationMs: config?.autoDismissAlertDurationMs ?? defaultConfig.autoDismissAlertDurationMs,
+        autoDismissInsideFeedbackDurationMs: config?.autoDismissInsideFeedbackDurationMs ??
+            defaultConfig.autoDismissInsideFeedbackDurationMs,
+        logger: config?.logger ?? defaultConfig.logger,
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paroicms/react-ui",
-  "version": "0.4.4",
+  "version": "0.5.1",
   "description": "React UI toolkit for ParoiCMS.",
   "keywords": [
     "paroicms",
@@ -19,19 +19,33 @@
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "scripts": {
+    "tsc": "tsc",
     "build": "tsc",
     "clear": "rimraf dist/*",
     "dev": "tsc --watch --preserveWatchOutput"
   },
+  "dependencies": {
+    "@paroicms/public-anywhere-lib": "0.41.0",
+    "clsx": "~2.1.1",
+    "lucide-react": "~0.562.0",
+    "react-sortablejs": "~6.1.4",
+    "sortablejs": "~1.15.6"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
   "devDependencies": {
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
+    "@types/sortablejs": "^1.15.8",
     "react": "~19.2.0",
     "react-dom": "~19.2.0",
     "rimraf": "~6.1.2",
     "typescript": "~5.9.3"
   },
   "files": [
-    "dist"
+    "dist",
+    "styles"
   ]
 }

package/styles/Accordion.css

@@ -0,0 +1,46 @@
+/* ========================================
+   Accordion / Collapsible
+   ======================================== */
+.PaAccordion-content {
+  padding-left: 20px;
+  transition: max-height 200ms ease-out;
+
+  &.transition {
+    overflow: hidden;
+  }
+
+  &.hide {
+    display: none;
+  }
+}
+
+.PaAccordion-header {
+  display: flex;
+  gap: var(--space-3);
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-4) var(--space-5);
+  cursor: pointer;
+  background: var(--color-bg-subtle);
+  transition: background-color var(--transition);
+
+  /* &:hover {
+    background: var(--color-bg-section);
+  } */
+}
+
+.PaAccordion-title {
+  font-size: var(--text-base);
+  font-weight: var(--font-medium);
+  color: var(--color-text);
+}
+
+.PaAccordion-chevron {
+  flex-shrink: 0;
+  color: var(--color-text-light);
+  transition: transform var(--transition);
+
+  .PaAccordion.open & {
+    transform: rotate(180deg);
+  }
+}

package/styles/Alert.css

@@ -0,0 +1,77 @@
+/* ========================================
+   Alert / Notice Box
+   ======================================== */
+.PaAlert {
+  position: relative;
+  padding: var(--space-4) var(--space-5);
+  margin: var(--space-4) 0;
+  border-left: 4px solid;
+  border-radius: var(--radius);
+
+  &.dismissible {
+    padding-right: var(--space-10);
+  }
+
+  &.info {
+    background: var(--color-info-light);
+    border-color: var(--color-info);
+  }
+
+  &.primary {
+    background: var(--color-primary-light);
+    border-color: var(--color-primary);
+  }
+
+  &.success {
+    background: var(--color-success-light);
+    border-color: var(--color-success);
+  }
+
+  &.warning {
+    background: var(--color-yellow-light);
+    border-color: var(--color-yellow);
+  }
+
+  &.error {
+    background: var(--color-danger-light);
+    border-color: var(--color-danger);
+  }
+}
+
+.PaAlert-closeBtn {
+  position: absolute;
+  top: var(--space-3);
+  right: var(--space-3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-1);
+  color: var(--color-text-muted);
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  transition:
+    color 0.15s,
+    background-color 0.15s;
+
+  &:hover {
+    color: var(--color-text);
+    background: rgb(0 0 0 / 10%);
+  }
+}
+
+.PaAlert-title {
+  margin-bottom: var(--space-2);
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  color: var(--color-text);
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+.PaAlert-content {
+  font-size: var(--text-sm);
+  line-height: 1.7;
+  color: var(--color-text);
+}