beacon-ui 3.1.4

package/dist/components/CheckboxPreview.d.ts

@@ -0,0 +1,13 @@
+import type { Theme, HueVariant } from "../tokens/types";
+type CheckboxStatus = "default" | "hovered" | "focused" | "pressed" | "disabled";
+interface CheckboxPreviewProps {
+    checked?: boolean;
+    status?: CheckboxStatus;
+    label?: string;
+    showLabel?: boolean;
+    theme?: Theme;
+    hue?: HueVariant;
+}
+export declare function CheckboxPreview({ checked, status, label, showLabel, theme, hue, }: CheckboxPreviewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CheckboxPreview.d.ts.map

package/dist/components/CheckboxPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxPreview.d.ts","sourceRoot":"","sources":["../../src/components/CheckboxPreview.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAEjF,UAAU,oBAAoB;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,GAAG,CAAC,EAAE,UAAU,CAAC;CAClB;AAKD,wBAAgB,eAAe,CAAC,EAC9B,OAAe,EACf,MAAkB,EAClB,KAAkB,EAClB,SAAgB,EAChB,KAAK,EACL,GAAG,GACJ,EAAE,oBAAoB,2CA8KtB"}

package/dist/components/CheckboxPreview.js

@@ -0,0 +1,155 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { CheckIcon } from "../icons";
+const CHECKBOX_SIZE = 20;
+const ICON_SIZE = 16; // 20px box - 4px padding (2px each side) = 16px
+export function CheckboxPreview({ checked = false, status = "default", label = "Checkbox", showLabel = true, theme, hue, }) {
+    const disabled = status === "disabled";
+    const checkboxStyles = useMemo(() => {
+        const baseStyles = {
+            width: `${CHECKBOX_SIZE}px`,
+            height: `${CHECKBOX_SIZE}px`,
+            borderRadius: "var(--corner-radius-100)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0,
+            transition: "background-color 0.15s ease, border-color 0.15s ease",
+            boxSizing: "border-box",
+            overflow: "hidden",
+            position: "relative",
+        };
+        if (checked) {
+            // Checked state
+            if (disabled) {
+                return {
+                    ...baseStyles,
+                    backgroundColor: "var(--bg-disabled)",
+                    border: "none",
+                    padding: "var(--spacing-50)",
+                };
+            }
+            if (status === "hovered") {
+                return {
+                    ...baseStyles,
+                    backgroundColor: "var(--bg-primary-on-hover)",
+                    border: "none",
+                    padding: "var(--spacing-50)",
+                };
+            }
+            if (status === "focused" || status === "pressed") {
+                return {
+                    ...baseStyles,
+                    backgroundColor: "var(--bg-primary-pressed)",
+                    border: "none",
+                    padding: "var(--spacing-50)",
+                };
+            }
+            // Default checked
+            return {
+                ...baseStyles,
+                backgroundColor: "var(--bg-primary)",
+                border: "none",
+                padding: "var(--spacing-50)",
+            };
+        }
+        else {
+            // Unchecked state
+            if (disabled) {
+                return {
+                    ...baseStyles,
+                    backgroundColor: "var(--bg-page-primary)",
+                    border: "var(--border-width-50) solid var(--border-neutral-tertiary)",
+                };
+            }
+            if (status === "hovered" || status === "focused" || status === "pressed") {
+                return {
+                    ...baseStyles,
+                    backgroundColor: "var(--bg-page-primary)",
+                    border: "var(--border-width-50) solid var(--border-neutral-primary)",
+                };
+            }
+            // Default unchecked
+            return {
+                ...baseStyles,
+                backgroundColor: "var(--bg-page-primary)",
+                border: "var(--border-width-50) solid var(--border-neutral-secondary)",
+            };
+        }
+    }, [checked, status, disabled]);
+    const iconColor = useMemo(() => {
+        if (disabled) {
+            return "var(--fg-on-disabled)";
+        }
+        return "var(--static-white)";
+    }, [disabled]);
+    const labelStyles = useMemo(() => {
+        const baseStyles = {
+            fontFamily: "var(--font-secondary)",
+            fontSize: "var(--body-small-text-size)",
+            lineHeight: "var(--body-small-line-height)",
+            fontWeight: "var(--font-weight-secondary-medium)",
+            margin: 0,
+        };
+        if (disabled) {
+            return {
+                ...baseStyles,
+                color: "var(--fg-on-disabled)",
+            };
+        }
+        if (checked) {
+            return {
+                ...baseStyles,
+                color: "var(--fg-neutral-secondary)",
+            };
+        }
+        return {
+            ...baseStyles,
+            color: "var(--fg-neutral-tertiary)",
+        };
+    }, [disabled, checked]);
+    const focusRingStyles = useMemo(() => {
+        if (status !== "focused")
+            return null;
+        // Focus ring should be positioned outside the checkbox
+        // The checkbox is 20px × 20px
+        // The focus ring should be 4px outside the checkbox edge, centered on the container
+        // Using explicit width/height and centering: 20px + 8px (4px on each side) = 28px
+        // Border radius matches the checkbox's rounded rectangle shape
+        return {
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            width: "28px",
+            height: "28px",
+            marginTop: "0",
+            marginLeft: "0",
+            borderRadius: "var(--corner-radius-200)",
+            borderWidth: "var(--border-width-25)",
+            borderStyle: "solid",
+            borderColor: checked
+                ? "var(--border-primary)"
+                : "var(--border-neutral-primary)",
+            pointerEvents: "none",
+        };
+    }, [status, checked]);
+    return (_jsxs("div", { style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "var(--spacing-200)",
+            position: "relative",
+        }, children: [_jsxs("div", { style: { position: "relative", display: "flex", alignItems: "center", justifyContent: "center" }, children: [focusRingStyles && _jsx("div", { style: focusRingStyles }), _jsx("div", { style: checkboxStyles, children: checked && (_jsx("div", { style: {
+                                color: iconColor,
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                width: `${ICON_SIZE}px`,
+                                height: `${ICON_SIZE}px`,
+                                maxWidth: `${ICON_SIZE}px`,
+                                maxHeight: `${ICON_SIZE}px`,
+                                flexShrink: 0,
+                                overflow: "hidden",
+                            }, children: _jsx(CheckIcon, { size: ICON_SIZE }) })) })] }), showLabel && label && _jsx("p", { style: labelStyles, children: label })] }));
+}

package/dist/components/Chip.d.ts

@@ -0,0 +1,15 @@
+import type { Theme, HueVariant } from "../tokens/types";
+type ChipSize = "sm" | "md" | "lg";
+type ChipColor = "primary" | "neutral" | "success" | "critical" | "warning";
+interface ChipProps {
+    label?: string;
+    color?: ChipColor;
+    size?: ChipSize;
+    showBorders?: boolean;
+    showIcon?: boolean;
+    theme?: Theme;
+    hue?: HueVariant;
+}
+export declare function Chip({ label, color, size, showBorders, showIcon, theme, hue, }: ChipProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Chip.d.ts.map

package/dist/components/Chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../src/components/Chip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACnC,KAAK,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAE5E,UAAU,SAAS;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,GAAG,CAAC,EAAE,UAAU,CAAC;CAClB;AAsED,wBAAgB,IAAI,CAAC,EACnB,KAAoB,EACpB,KAAiB,EACjB,IAAW,EACX,WAAmB,EACnB,QAAgB,EAChB,KAAK,EACL,GAAG,GACJ,EAAE,SAAS,2CA0DX"}

package/dist/components/Chip.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { ListDetailsIcon } from "../icons";
+const SIZE_CONFIG = {
+    sm: {
+        iconSize: 16,
+        fontSize: "var(--body-extra-small-text-size)",
+        lineHeight: "var(--body-extra-small-line-height)",
+        paddingX: "var(--spacing-300)",
+        paddingY: "var(--spacing-100)",
+    },
+    md: {
+        iconSize: 20,
+        fontSize: "var(--body-small-text-size)",
+        lineHeight: "var(--body-small-line-height)",
+        paddingX: "var(--spacing-400)",
+        paddingY: "var(--spacing-200)",
+    },
+    lg: {
+        iconSize: 24,
+        fontSize: "var(--body-regular-text-size)",
+        lineHeight: "var(--body-regular-line-height)",
+        paddingX: "var(--spacing-450)",
+        paddingY: "var(--spacing-200)",
+    },
+};
+const COLOR_CONFIG = {
+    primary: {
+        bg: "var(--bg-primary-tonal)",
+        fg: "var(--fg-primary-on-tonal)",
+        border: "var(--border-primary)",
+    },
+    neutral: {
+        bg: "var(--bg-page-tertiary)",
+        fg: "var(--fg-neutral-tertiary)",
+        border: "var(--border-neutral-primary)",
+    },
+    success: {
+        bg: "var(--bg-success-tonal)",
+        fg: "var(--fg-success-on-tonal)",
+        border: "var(--border-success)",
+    },
+    critical: {
+        bg: "var(--bg-critical-tonal)",
+        fg: "var(--fg-critical-on-tonal)",
+        border: "var(--border-critical)",
+    },
+    warning: {
+        bg: "var(--bg-warning-tonal)",
+        fg: "var(--fg-warning-on-tonal)",
+        border: "var(--border-warning)",
+    },
+};
+export function Chip({ label = "Identifier", color = "primary", size = "md", showBorders = false, showIcon = false, theme, hue, }) {
+    const sizeConfig = SIZE_CONFIG[size];
+    const colorConfig = COLOR_CONFIG[color];
+    const chipStyles = useMemo(() => {
+        const baseStyles = {
+            display: "flex",
+            gap: "var(--spacing-200)",
+            alignItems: "center",
+            backgroundColor: colorConfig.bg,
+            color: colorConfig.fg,
+            borderRadius: "var(--corner-radius-full)",
+            paddingLeft: sizeConfig.paddingX,
+            paddingRight: sizeConfig.paddingX,
+            paddingTop: sizeConfig.paddingY,
+            paddingBottom: sizeConfig.paddingY,
+            fontFamily: "var(--font-secondary)",
+            fontSize: sizeConfig.fontSize,
+            lineHeight: sizeConfig.lineHeight,
+            fontWeight: "var(--font-weight-secondary-medium)",
+        };
+        if (showBorders) {
+            return {
+                ...baseStyles,
+                border: "var(--border-width-25) solid",
+                borderColor: colorConfig.border,
+            };
+        }
+        return baseStyles;
+    }, [colorConfig, sizeConfig, showBorders]);
+    const iconWrapperStyles = useMemo(() => {
+        return {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: `${sizeConfig.iconSize}px`,
+            height: `${sizeConfig.iconSize}px`,
+            maxWidth: `${sizeConfig.iconSize}px`,
+            maxHeight: `${sizeConfig.iconSize}px`,
+            flexShrink: 0,
+            overflow: "hidden",
+            color: colorConfig.fg,
+        };
+    }, [sizeConfig.iconSize, colorConfig.fg]);
+    return (_jsxs("div", { style: chipStyles, children: [showIcon && (_jsx("div", { style: iconWrapperStyles, children: _jsx(ListDetailsIcon, { size: sizeConfig.iconSize }) })), _jsx("span", { children: label })] }));
+}

package/dist/components/Input.d.ts

@@ -0,0 +1,24 @@
+import type { Theme, HueVariant } from "../tokens/types";
+type InputSize = "sm" | "md" | "lg";
+type InputStatus = "default" | "active";
+interface InputProps {
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    size?: InputSize;
+    status?: InputStatus;
+    showLabel?: boolean;
+    showStartIcon?: boolean;
+    showEndIcon?: boolean;
+    showPlaceholderIcon?: boolean;
+    showError?: boolean;
+    showNumberPrefix?: boolean;
+    rounded?: boolean;
+    iconOnly?: boolean;
+    disabled?: boolean;
+    theme?: Theme;
+    hue?: HueVariant;
+}
+export declare function Input({ label, placeholder, value, size, status, showLabel, showStartIcon, showEndIcon, showPlaceholderIcon, showError, showNumberPrefix, rounded, iconOnly, disabled, theme, hue, }: InputProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACpC,KAAK,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAExC,UAAU,UAAU;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,GAAG,CAAC,EAAE,UAAU,CAAC;CAClB;AAuDD,wBAAgB,KAAK,CAAC,EACpB,KAAe,EACf,WAA2B,EAC3B,KAAU,EACV,IAAW,EACX,MAAkB,EAClB,SAAgB,EAChB,aAAqB,EACrB,WAAmB,EACnB,mBAA2B,EAC3B,SAAiB,EACjB,gBAAwB,EACxB,OAAe,EACf,QAAgB,EAChB,QAAgB,EAChB,KAAK,EACL,GAAG,GACJ,EAAE,UAAU,2CAgKZ"}

package/dist/components/Input.js

@@ -0,0 +1,138 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { UserPersonIcon, SearchIcon, ChevronDownIcon, AlertTriangleErrorIcon } from "../icons";
+const SIZE_CONFIG = {
+    sm: {
+        height: "28px",
+        iconSize: 16,
+        fontSize: "var(--body-small-text-size)",
+        lineHeight: "var(--body-small-line-height)",
+        labelFontSize: "var(--body-extra-small-text-size)",
+        labelLineHeight: "var(--body-extra-small-line-height)",
+        paddingX: "var(--spacing-200)",
+        paddingY: "var(--spacing-100)",
+        borderRadius: "var(--corner-radius-100)",
+        gap: "var(--spacing-100)",
+    },
+    md: {
+        height: "36px",
+        iconSize: 16,
+        fontSize: "var(--body-small-text-size)",
+        lineHeight: "var(--body-small-line-height)",
+        labelFontSize: "var(--body-small-text-size)",
+        labelLineHeight: "var(--body-small-line-height)",
+        paddingX: "var(--spacing-200)",
+        paddingY: "var(--spacing-100)",
+        borderRadius: "var(--corner-radius-100)",
+        gap: "var(--spacing-100)",
+    },
+    lg: {
+        height: "48px",
+        iconSize: 20,
+        fontSize: "var(--body-regular-text-size)",
+        lineHeight: "var(--body-regular-line-height)",
+        labelFontSize: "var(--body-regular-text-size)",
+        labelLineHeight: "var(--body-regular-line-height)",
+        paddingX: "var(--spacing-400)",
+        paddingY: "var(--spacing-300)",
+        borderRadius: "var(--corner-radius-200)",
+        gap: "var(--spacing-200)",
+    },
+};
+export function Input({ label = "Label", placeholder = "Placeholder", value = "", size = "md", status = "default", showLabel = true, showStartIcon = false, showEndIcon = false, showPlaceholderIcon = false, showError = false, showNumberPrefix = false, rounded = false, iconOnly = false, disabled = false, theme, hue, }) {
+    const sizeConfig = SIZE_CONFIG[size];
+    const hasValue = value.length > 0;
+    const borderColor = useMemo(() => {
+        if (disabled) {
+            return "var(--border-strong-100)";
+        }
+        if (status === "active") {
+            return "var(--border-neutral-primary)";
+        }
+        return "var(--border-strong-200)";
+    }, [status, disabled]);
+    const inputContainerStyles = useMemo(() => {
+        const baseStyles = {
+            display: "flex",
+            alignItems: "center",
+            border: `var(--border-width-25) solid ${borderColor}`,
+            backgroundColor: "var(--bg-page-primary)",
+            borderRadius: rounded ? "var(--corner-radius-full)" : sizeConfig.borderRadius,
+            gap: sizeConfig.gap,
+            paddingLeft: sizeConfig.paddingX,
+            paddingRight: sizeConfig.paddingX,
+            paddingTop: sizeConfig.paddingY,
+            paddingBottom: sizeConfig.paddingY,
+            width: iconOnly ? sizeConfig.height : "100%",
+            height: iconOnly ? sizeConfig.height : sizeConfig.height,
+            justifyContent: iconOnly ? "center" : "flex-start",
+            cursor: disabled ? "not-allowed" : "text",
+            opacity: disabled ? 0.6 : 1,
+        };
+        return baseStyles;
+    }, [sizeConfig, borderColor, rounded, iconOnly, disabled]);
+    const textStyles = useMemo(() => {
+        return {
+            fontSize: sizeConfig.fontSize,
+            lineHeight: sizeConfig.lineHeight,
+            fontFamily: "var(--font-secondary)",
+            color: hasValue
+                ? "var(--fg-neutral-secondary)"
+                : disabled
+                    ? "var(--fg-disabled)"
+                    : "var(--fg-disabled)",
+            fontWeight: hasValue ? 500 : 400,
+            flex: iconOnly ? "none" : "1 0 0",
+            minWidth: iconOnly ? "auto" : 0,
+            minHeight: iconOnly ? "auto" : 0,
+        };
+    }, [sizeConfig, hasValue, disabled, iconOnly]);
+    const labelStyles = useMemo(() => {
+        return {
+            fontSize: sizeConfig.labelFontSize,
+            lineHeight: sizeConfig.labelLineHeight,
+            fontFamily: "var(--font-secondary)",
+            color: "var(--fg-neutral)",
+            marginBottom: "var(--spacing-100)",
+        };
+    }, [sizeConfig]);
+    const prefixStyles = useMemo(() => {
+        return {
+            fontSize: sizeConfig.fontSize,
+            lineHeight: sizeConfig.lineHeight,
+            fontFamily: "var(--font-secondary)",
+            color: "var(--fg-neutral-tertiary)",
+            paddingRight: "var(--spacing-100)",
+            borderRight: `var(--border-width-25) solid ${status === "active" ? "var(--border-strong-100)" : "var(--border-strong-200)"}`,
+            display: "flex",
+            alignItems: "center",
+        };
+    }, [sizeConfig, status]);
+    const errorContainerStyles = useMemo(() => {
+        return {
+            display: "flex",
+            alignItems: "center",
+            gap: "var(--spacing-100)",
+            marginTop: "var(--spacing-100)",
+        };
+    }, []);
+    const errorIconStyles = useMemo(() => {
+        return {
+            color: "var(--fg-critical)",
+            flexShrink: 0,
+        };
+    }, []);
+    const errorMessageStyles = useMemo(() => {
+        return {
+            fontSize: "var(--body-extra-small-text-size)",
+            lineHeight: "var(--body-extra-small-line-height)",
+            fontFamily: "var(--font-secondary)",
+            color: "var(--fg-critical)",
+        };
+    }, []);
+    if (iconOnly) {
+        return (_jsx("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-100)", width: "100%" }, children: _jsxs("div", { style: inputContainerStyles, children: [showPlaceholderIcon && (_jsx("div", { style: { color: "var(--fg-neutral)", display: "flex", alignItems: "center", justifyContent: "center" }, children: _jsx(SearchIcon, { size: sizeConfig.iconSize }) })), showStartIcon && !showPlaceholderIcon && (_jsx("div", { style: { color: "var(--fg-neutral)", display: "flex", alignItems: "center", justifyContent: "center" }, children: _jsx(UserPersonIcon, { size: sizeConfig.iconSize }) }))] }) }));
+    }
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-100)", width: "100%" }, children: [showLabel && (_jsx("p", { style: labelStyles, children: label })), _jsxs("div", { style: inputContainerStyles, children: [showStartIcon && (_jsx("div", { style: { color: "var(--fg-neutral)", flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: _jsx(UserPersonIcon, { size: sizeConfig.iconSize }) })), showPlaceholderIcon && !hasValue && (_jsx("div", { style: { color: iconOnly ? "var(--fg-neutral)" : "var(--fg-disabled)", flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: _jsx(SearchIcon, { size: sizeConfig.iconSize }) })), showNumberPrefix && (_jsx("div", { style: prefixStyles, children: "+33" })), hasValue ? (_jsx("p", { style: textStyles, children: value })) : (_jsx("p", { style: textStyles, children: placeholder })), showEndIcon && (_jsx("div", { style: { color: "var(--fg-neutral-tertiary)", flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: _jsx(ChevronDownIcon, { size: sizeConfig.iconSize }) }))] }), showError && (_jsxs("div", { style: errorContainerStyles, children: [_jsx("div", { style: { ...errorIconStyles, display: "flex", alignItems: "center", justifyContent: "center" }, children: _jsx(AlertTriangleErrorIcon, { size: 16 }) }), _jsx("p", { style: errorMessageStyles, children: "Error message!" })] }))] }));
+}

package/dist/components/Menu.d.ts

@@ -0,0 +1,20 @@
+import type { Theme, HueVariant } from "../tokens/types";
+type MenuVariant = "desktop" | "tablet-open" | "tablet-closed" | "mobile-open" | "mobile-closed" | "close-menu";
+interface MenuItem {
+    id: string;
+    label: string;
+}
+interface MenuProps {
+    variant?: MenuVariant;
+    showMenu?: boolean;
+    showButton?: boolean;
+    menuItems?: MenuItem[];
+    headerTitle?: string;
+    headerSubtitle?: string;
+    showChevrons?: boolean;
+    theme?: Theme;
+    hue?: HueVariant;
+}
+export declare function Menu({ variant, showMenu, showButton, menuItems, headerTitle, headerSubtitle, showChevrons, theme, hue, }: MenuProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Menu.d.ts.map

package/dist/components/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/components/Menu.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAIzD,KAAK,WAAW,GAAG,SAAS,GAAG,aAAa,GAAG,eAAe,GAAG,aAAa,GAAG,eAAe,GAAG,YAAY,CAAC;AAEhH,UAAU,QAAQ;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,SAAS;IACjB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,GAAG,CAAC,EAAE,UAAU,CAAC;CAClB;AAUD,wBAAgB,IAAI,CAAC,EACnB,OAAmB,EACnB,QAAe,EACf,UAAiB,EACjB,SAA8B,EAC9B,WAAqB,EACrB,cAA2B,EAC3B,YAAmB,EACnB,KAAK,EACL,GAAG,GACJ,EAAE,SAAS,2CA0YX"}