@jordan-mace/chaser-design-system 1.2.7 → 1.2.9

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

@@ -1,50 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const breadcrumb = styleWithLayer({
-    display: 'flex',
-    alignItems: 'center',
-    gap: '4px',
-    fontFamily: vars.fontFamily.body,
-    fontSize: '14px',
-});
-export const breadcrumbList = style({
-    display: 'flex',
-    alignItems: 'center',
-    listStyle: 'none',
-    margin: 0,
-    padding: 0,
-    gap: '4px',
-});
-export const breadcrumbItem = style({
-    display: 'flex',
-    alignItems: 'center',
-});
-export const breadcrumbLink = style({
-    display: 'inline-flex',
-    alignItems: 'center',
-    color: vars.colors.textSecondary,
-    textDecoration: 'none',
-    fontSize: '14px',
-    ':hover': {
-        color: vars.colors.buttonBackgroundPrimary,
-        textDecoration: 'underline',
-    },
-    ':focus-visible': {
-        outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
-        outlineOffset: '2px',
-        borderRadius: '4px',
-    },
-});
-export const breadcrumbSeparator = style({
-    color: vars.colors.textDisabled,
-    fontSize: '12px',
-    userSelect: 'none',
-});
-export const breadcrumbCurrent = style({
-    display: 'inline-flex',
-    alignItems: 'center',
-    color: vars.colors.textPrimary,
-    fontSize: '14px',
-    fontWeight: '500',
-});

package/dist/components/Button/Button.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    variant: 'primary' | 'secondary';
-    children?: React.ReactNode;
-    label?: string;
-    fullWidth?: boolean;
-};
-declare const Button: ({ label, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
-export default Button;

package/dist/components/Button/Button.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { button, buttonVariants } from './styles.css';
-import Box from '../Box';
-const Button = ({ label, ...props }) => {
-    return (_jsx(Box, { as: "button", borderRadius: "large", width: props.fullWidth ? '100%' : undefined, className: clsx(buttonVariants[props.variant], button, props.className), ...props, children: props.children || label }));
-};
-export default Button;

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

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

package/dist/components/Button/index.js

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

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

@@ -1,2 +0,0 @@
-export declare const buttonVariants: Record<"primary" | "secondary", string>;
-export declare const button: string;

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

@@ -1,30 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const buttonVariants = styleVariants({
-    primary: {
-        backgroundColor: vars.colors.buttonBackgroundPrimary,
-        color: vars.colors.buttonTextPrimary,
-        ':focus-visible': {
-            backgroundColor: vars.colors.buttonBackgroundFocusedPrimary,
-        },
-        ':hover': {
-            backgroundColor: vars.colors.buttonBackgroundFocusedPrimary,
-        },
-    },
-    secondary: {
-        backgroundColor: vars.colors.buttonBackgroundSecondary,
-        color: vars.colors.buttonTextSecondary,
-        ':focus-visible': {
-            backgroundColor: vars.colors.buttonBackgroundFocusedSecondary,
-        },
-        ':hover': {
-            backgroundColor: vars.colors.buttonBackgroundFocusedSecondary,
-        },
-    },
-});
-export const button = styleWithLayer({
-    padding: '1rem',
-    borderRadius: '1rem',
-    border: 0,
-});

package/dist/components/Card/Card.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-type CardProps = React.HTMLAttributes<HTMLDivElement> & {
-    variant?: 'elevated' | 'outlined' | 'filled';
-    children?: React.ReactNode;
-    padding?: 'none' | 'small' | 'medium' | 'large';
-};
-declare const Card: ({ variant, padding, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
-export default Card;

package/dist/components/Card/Card.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { card, cardVariants } from './styles.css';
-import Box from '../Box';
-const Card = ({ variant = 'elevated', padding = 'medium', ...props }) => {
-    return (_jsx(Box, { as: "div", borderRadius: "large", padding: padding !== 'none' ? padding : undefined, className: clsx(cardVariants[variant], card, props.className), ...props, children: props.children }));
-};
-export default Card;

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

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

package/dist/components/Card/index.js

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

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

@@ -1,2 +0,0 @@
-export declare const cardVariants: Record<"filled" | "elevated" | "outlined", string>;
-export declare const card: string;

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

@@ -1,25 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const cardVariants = styleVariants({
-    elevated: {
-        backgroundColor: vars.colors.backgroundDefault,
-        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
-        border: 'none',
-    },
-    outlined: {
-        backgroundColor: vars.colors.backgroundDefault,
-        border: `1px solid ${vars.colors.borderDefault}`,
-        boxShadow: 'none',
-    },
-    filled: {
-        backgroundColor: vars.colors.backgroundMuted,
-        border: 'none',
-        boxShadow: 'none',
-    },
-});
-export const card = styleWithLayer({
-    display: 'block',
-    position: 'relative',
-    transition: 'all 0.2s ease-in-out',
-});

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-declare const Checkbox: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & {
-    label?: string;
-    indeterminate?: boolean;
-} & React.RefAttributes<HTMLInputElement>>;
-export default Checkbox;

package/dist/components/Checkbox/Checkbox.js

@@ -1,25 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { forwardRef, useEffect, useRef } from 'react';
-import { checkboxContainer, checkboxInput, checkboxLabel } from './styles.css';
-import Box from '../Box';
-const Checkbox = forwardRef(({ label, className, indeterminate, ...props }, ref) => {
-    const inputRef = useRef(null);
-    const combinedRef = (node) => {
-        if (typeof ref === 'function') {
-            ref(node);
-        }
-        else if (ref) {
-            ref.current = node;
-        }
-        inputRef.current = node;
-    };
-    useEffect(() => {
-        if (inputRef.current) {
-            inputRef.current.indeterminate = !!indeterminate;
-        }
-    }, [indeterminate]);
-    return (_jsxs(Box, { as: "label", className: clsx(checkboxContainer, className), display: "flex", alignItems: "center", gap: "small", cursor: "pointer", style: { userSelect: 'none' }, children: [_jsx(Box, { as: "input", type: "checkbox", ref: combinedRef, className: checkboxInput, style: { width: '18px', height: '18px' }, ...props }), label && _jsx(Box, { as: "span", className: checkboxLabel, children: label })] }));
-});
-Checkbox.displayName = 'Checkbox';
-export default Checkbox;

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

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

package/dist/components/Checkbox/index.js

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

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

@@ -1,3 +0,0 @@
-export declare const checkboxContainer: string;
-export declare const checkboxInput: string;
-export declare const checkboxLabel: string;

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

@@ -1,31 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const checkboxContainer = styleWithLayer({
-    display: 'flex',
-    alignItems: 'center',
-    gap: '8px',
-    cursor: 'pointer',
-    userSelect: 'none',
-});
-export const checkboxInput = style({
-    width: '18px',
-    height: '18px',
-    border: `2px solid ${vars.colors.borderDefault}`,
-    borderRadius: '4px',
-    cursor: 'pointer',
-    accentColor: vars.colors.buttonBackgroundPrimary,
-    ':focus-visible': {
-        outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
-        outlineOffset: '2px',
-    },
-    ':disabled': {
-        cursor: 'not-allowed',
-        opacity: 0.5,
-    },
-});
-export const checkboxLabel = styleWithLayer({
-    fontFamily: vars.fontFamily.body,
-    fontSize: '14px',
-    color: vars.colors.textPrimary,
-});

package/dist/components/Collapse/Collapse.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-export type CollapseAnimation = 'height' | 'opacity' | 'both';
-export interface CollapseProps {
-    isOpen: boolean;
-    children: React.ReactNode;
-    animation?: CollapseAnimation;
-    duration?: number;
-    className?: string;
-    onAnimationEnd?: () => void;
-}
-declare const Collapse: ({ isOpen, children, animation, duration, className, onAnimationEnd, }: CollapseProps) => import("react/jsx-runtime").JSX.Element;
-export default Collapse;

package/dist/components/Collapse/Collapse.js

@@ -1,56 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { useState, useRef, useEffect } from 'react';
-import { collapseContainer, collapseContent, } from './styles.css';
-import Box from '../Box';
-const Collapse = ({ isOpen, children, animation = 'both', duration = 300, className, onAnimationEnd, }) => {
-    const [height, setHeight] = useState(isOpen ? undefined : 0);
-    const [isAnimating, setIsAnimating] = useState(false);
-    const contentRef = useRef(null);
-    useEffect(() => {
-        if (isOpen) {
-            setIsAnimating(true);
-            if (contentRef.current) {
-                setHeight(contentRef.current.scrollHeight);
-            }
-        }
-        else {
-            setIsAnimating(true);
-            setHeight(0);
-        }
-    }, [isOpen]);
-    const handleTransitionEnd = () => {
-        setIsAnimating(false);
-        if (isOpen) {
-            setHeight(undefined);
-        }
-        onAnimationEnd?.();
-    };
-    const getAnimationStyles = () => {
-        const baseStyles = {
-            transition: `height ${duration}ms ease-out, opacity ${duration}ms ease-out`,
-            height: height !== undefined ? `${height}px` : undefined,
-            opacity: isOpen || isAnimating ? 1 : 0,
-        };
-        if (animation === 'height') {
-            return {
-                ...baseStyles,
-                transition: `height ${duration}ms ease-out`,
-                opacity: 1,
-            };
-        }
-        if (animation === 'opacity') {
-            return {
-                ...baseStyles,
-                transition: `opacity ${duration}ms ease-out`,
-                height: undefined,
-            };
-        }
-        return baseStyles;
-    };
-    if (!isOpen && !isAnimating && animation !== 'opacity') {
-        return null;
-    }
-    return (_jsx(Box, { className: clsx(collapseContainer, className), style: getAnimationStyles(), onTransitionEnd: handleTransitionEnd, "aria-hidden": !isOpen, children: _jsx(Box, { ref: contentRef, className: collapseContent, children: children }) }));
-};
-export default Collapse;

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

@@ -1,2 +0,0 @@
-export { default as Collapse } from './Collapse';
-export type { CollapseProps, CollapseAnimation } from './Collapse';

package/dist/components/Collapse/index.js

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

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

@@ -1,3 +0,0 @@
-export declare const collapseContainer: string;
-export declare const collapseContent: string;
-export declare const collapseAnimation: Record<"in" | "out", string>;

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

@@ -1,36 +0,0 @@
-import { styleVariants, keyframes } from '@vanilla-extract/css';
-import { styleWithLayer } from '../../styles/utils';
-const collapseIn = keyframes({
-    from: {
-        height: 0,
-        opacity: 0,
-    },
-    to: {
-        height: 'auto',
-        opacity: 1,
-    },
-});
-const collapseOut = keyframes({
-    from: {
-        height: 'auto',
-        opacity: 1,
-    },
-    to: {
-        height: 0,
-        opacity: 0,
-    },
-});
-export const collapseContainer = styleWithLayer({
-    overflow: 'hidden',
-});
-export const collapseContent = styleWithLayer({
-    width: '100%',
-});
-export const collapseAnimation = styleVariants({
-    in: {
-        animation: `${collapseIn} 0.3s ease-out forwards`,
-    },
-    out: {
-        animation: `${collapseOut} 0.3s ease-out forwards`,
-    },
-});

package/dist/components/Combobox/Combobox.d.ts

@@ -1,23 +0,0 @@
-import React from 'react';
-export interface ComboboxOption {
-    value: string;
-    label: string;
-    disabled?: boolean;
-}
-export interface ComboboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
-    label?: string;
-    options: ComboboxOption[];
-    value?: string;
-    onChange?: (value: string, option: ComboboxOption | null) => void;
-    onInputChange?: (inputValue: string) => void;
-    placeholder?: string;
-    hint?: string;
-    error?: boolean;
-    errorMessage?: string;
-    fullWidth?: boolean;
-    clearable?: boolean;
-    disabled?: boolean;
-    filterFn?: (option: ComboboxOption, inputValue: string) => boolean;
-}
-declare const Combobox: ({ label, options, value, onChange, onInputChange, placeholder, hint, error, errorMessage, fullWidth, clearable, disabled, filterFn, className, ...props }: ComboboxProps) => import("react/jsx-runtime").JSX.Element;
-export default Combobox;

package/dist/components/Combobox/Combobox.js

@@ -1,104 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { useState, useRef, useEffect } from 'react';
-import { comboboxContainer, comboboxInput, comboboxInputVariants, comboboxLabel, comboboxDropdown, comboboxOption, comboboxOptionSelected, comboboxOptionDisabled, comboboxClearButton, comboboxArrow, comboboxNoResults, comboboxHint, comboboxErrorMessage, } from './styles.css';
-import Box from '../Box';
-const defaultFilterFn = (option, inputValue) => {
-    return option.label.toLowerCase().includes(inputValue.toLowerCase());
-};
-const Combobox = ({ label, options, value, onChange, onInputChange, placeholder = 'Search...', hint, error = false, errorMessage, fullWidth = true, clearable = true, disabled = false, filterFn = defaultFilterFn, className, ...props }) => {
-    const [inputValue, setInputValue] = useState('');
-    const [isOpen, setIsOpen] = useState(false);
-    const [highlightedIndex, setHighlightedIndex] = useState(-1);
-    const containerRef = useRef(null);
-    const inputRef = useRef(null);
-    const selectedOption = options.find(opt => opt.value === value);
-    useEffect(() => {
-        if (selectedOption) {
-            setInputValue(selectedOption.label);
-        }
-        else if (!isOpen) {
-            setInputValue('');
-        }
-    }, [selectedOption, isOpen]);
-    const filteredOptions = options.filter(option => filterFn(option, inputValue));
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (containerRef.current && !containerRef.current.contains(event.target)) {
-                setIsOpen(false);
-                if (selectedOption) {
-                    setInputValue(selectedOption.label);
-                }
-                else {
-                    setInputValue('');
-                }
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => document.removeEventListener('mousedown', handleClickOutside);
-    }, [selectedOption]);
-    const handleInputChange = (e) => {
-        const newValue = e.target.value;
-        setInputValue(newValue);
-        setIsOpen(true);
-        setHighlightedIndex(-1);
-        onInputChange?.(newValue);
-        if (!newValue) {
-            onChange?.('', null);
-        }
-    };
-    const handleOptionClick = (option) => {
-        if (option.disabled)
-            return;
-        setInputValue(option.label);
-        setIsOpen(false);
-        onChange?.(option.value, option);
-    };
-    const handleClear = (e) => {
-        e.stopPropagation();
-        setInputValue('');
-        setIsOpen(false);
-        onChange?.('', null);
-        inputRef.current?.focus();
-    };
-    const handleKeyDown = (e) => {
-        if (disabled)
-            return;
-        switch (e.key) {
-            case 'ArrowDown':
-                e.preventDefault();
-                if (!isOpen) {
-                    setIsOpen(true);
-                }
-                setHighlightedIndex(prev => prev < filteredOptions.length - 1 ? prev + 1 : prev);
-                break;
-            case 'ArrowUp':
-                e.preventDefault();
-                setHighlightedIndex(prev => (prev > 0 ? prev - 1 : prev));
-                break;
-            case 'Enter':
-                e.preventDefault();
-                if (isOpen && highlightedIndex >= 0 && filteredOptions[highlightedIndex]) {
-                    handleOptionClick(filteredOptions[highlightedIndex]);
-                }
-                else {
-                    setIsOpen(!isOpen);
-                }
-                break;
-            case 'Escape':
-                setIsOpen(false);
-                if (selectedOption) {
-                    setInputValue(selectedOption.label);
-                }
-                else {
-                    setInputValue('');
-                }
-                break;
-        }
-    };
-    const displayValue = selectedOption && !isOpen ? selectedOption.label : inputValue;
-    return (_jsxs(Box, { className: comboboxContainer, ref: containerRef, width: fullWidth ? '100%' : undefined, children: [label && (_jsx(Box, { as: "label", className: comboboxLabel, children: label })), _jsxs(Box, { position: "relative", children: [_jsx(Box, { as: "input", ref: inputRef, type: "text", value: displayValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: () => setIsOpen(true), placeholder: placeholder, disabled: disabled, className: clsx(comboboxInput, comboboxInputVariants[error ? 'error' : 'default'], className), role: "combobox", "aria-expanded": isOpen, "aria-autocomplete": "list", "aria-controls": isOpen ? 'combobox-listbox' : undefined, "aria-activedescendant": highlightedIndex >= 0 ? `option-${filteredOptions[highlightedIndex]?.value}` : undefined, ...props }), clearable && inputValue && !disabled && (_jsx(Box, { as: "button", className: comboboxClearButton, onClick: handleClear, type: "button", "aria-label": "Clear selection", children: "\u00D7" })), _jsx(Box, { className: comboboxArrow, "aria-hidden": "true", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "currentColor", children: _jsx("path", { d: "M6 8L1 3h10z" }) }) })] }), isOpen && (_jsx(Box, { as: "ul", id: "combobox-listbox", className: comboboxDropdown, role: "listbox", children: filteredOptions.length === 0 ? (_jsx(Box, { as: "li", className: comboboxNoResults, children: "No results found" })) : (filteredOptions.map((option, index) => (_jsx(Box, { as: "li", id: `option-${option.value}`, className: clsx(comboboxOption, option.value === value && comboboxOptionSelected, option.disabled && comboboxOptionDisabled), onClick: () => handleOptionClick(option), role: "option", "aria-selected": option.value === value, "aria-disabled": option.disabled, style: {
-                        backgroundColor: index === highlightedIndex ? 'var(--highlight-color, #f3f4f6)' : undefined,
-                    }, children: option.label }, option.value)))) })), error && errorMessage && (_jsx(Box, { as: "div", className: comboboxErrorMessage, role: "alert", children: errorMessage })), hint && !error && (_jsx(Box, { as: "div", className: comboboxHint, children: hint }))] }));
-};
-export default Combobox;

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

@@ -1,2 +0,0 @@
-export { default as Combobox } from './Combobox';
-export type { ComboboxProps, ComboboxOption } from './Combobox';

package/dist/components/Combobox/index.js

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

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

@@ -1,13 +0,0 @@
-export declare const comboboxContainer: string;
-export declare const comboboxInput: string;
-export declare const comboboxInputVariants: Record<"default" | "error", string>;
-export declare const comboboxLabel: string;
-export declare const comboboxDropdown: string;
-export declare const comboboxOption: string;
-export declare const comboboxOptionSelected: string;
-export declare const comboboxOptionDisabled: string;
-export declare const comboboxClearButton: string;
-export declare const comboboxArrow: string;
-export declare const comboboxNoResults: string;
-export declare const comboboxHint: string;
-export declare const comboboxErrorMessage: string;

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

@@ -1,142 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const comboboxContainer = styleWithLayer({
-    position: 'relative',
-    width: '100%',
-});
-export const comboboxInput = styleWithLayer({
-    width: '100%',
-    padding: '0.75rem 2.5rem 0.75rem 1rem',
-    fontSize: '14px',
-    fontFamily: vars.fontFamily.body,
-    color: vars.colors.textPrimary,
-    backgroundColor: vars.colors.inputBackground,
-    border: `1px solid ${vars.colors.inputBorder}`,
-    borderRadius: '8px',
-    outline: 'none',
-    transition: 'border-color 0.2s ease',
-    '::placeholder': {
-        color: vars.colors.inputPlaceholder,
-    },
-    ':focus-visible': {
-        outline: `2px solid ${vars.colors.inputBorderFocused}`,
-        outlineOffset: '2px',
-    },
-    ':hover': {
-        borderColor: vars.colors.inputBorderFocused,
-    },
-    selectors: {
-        '&:disabled': {
-            cursor: 'not-allowed',
-            opacity: 0.5,
-            backgroundColor: vars.colors.backgroundMuted,
-        },
-        '&:disabled:hover': {
-            borderColor: vars.colors.inputBorder,
-        },
-    },
-});
-export const comboboxInputVariants = styleVariants({
-    default: {},
-    error: {
-        border: `1px solid ${vars.colors.alertErrorBorder}`,
-        ':focus-visible': {
-            outline: `2px solid ${vars.colors.alertErrorBorder}`,
-        },
-        ':hover': {
-            borderColor: vars.colors.alertErrorBorder,
-        },
-    },
-});
-export const comboboxLabel = styleWithLayer({
-    display: 'block',
-    fontSize: '14px',
-    fontWeight: '500',
-    color: vars.colors.textPrimary,
-    marginBottom: '8px',
-});
-export const comboboxDropdown = styleWithLayer({
-    position: 'absolute',
-    top: '100%',
-    left: 0,
-    right: 0,
-    backgroundColor: vars.colors.backgroundDefault,
-    border: `1px solid ${vars.colors.borderDefault}`,
-    borderRadius: '8px',
-    boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-    maxHeight: '200px',
-    overflowY: 'auto',
-    zIndex: 50,
-    marginTop: '4px',
-});
-export const comboboxOption = styleWithLayer({
-    padding: '0.75rem 1rem',
-    cursor: 'pointer',
-    fontSize: '14px',
-    color: vars.colors.textPrimary,
-    transition: 'background-color 0.15s ease',
-    ':hover': {
-        backgroundColor: vars.colors.backgroundMuted,
-    },
-    ':focus-visible': {
-        outline: 'none',
-        backgroundColor: vars.colors.backgroundMuted,
-    },
-});
-export const comboboxOptionSelected = styleWithLayer({
-    backgroundColor: vars.colors.buttonBackgroundPrimary,
-    color: vars.colors.buttonTextPrimary,
-    ':hover': {
-        backgroundColor: vars.colors.buttonBackgroundFocusedPrimary,
-    },
-});
-export const comboboxOptionDisabled = styleWithLayer({
-    opacity: 0.5,
-    cursor: 'not-allowed',
-    ':hover': {
-        backgroundColor: 'transparent',
-    },
-});
-export const comboboxClearButton = styleWithLayer({
-    position: 'absolute',
-    right: '2.5rem',
-    top: '50%',
-    transform: 'translateY(-50%)',
-    background: 'none',
-    border: 'none',
-    cursor: 'pointer',
-    padding: '0.25rem',
-    color: vars.colors.textSecondary,
-    fontSize: '16px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    ':hover': {
-        color: vars.colors.textPrimary,
-    },
-});
-export const comboboxArrow = styleWithLayer({
-    position: 'absolute',
-    right: '0.75rem',
-    top: '50%',
-    transform: 'translateY(-50%)',
-    pointerEvents: 'none',
-    color: vars.colors.textSecondary,
-});
-export const comboboxNoResults = styleWithLayer({
-    padding: '0.75rem 1rem',
-    fontSize: '14px',
-    color: vars.colors.textSecondary,
-    textAlign: 'center',
-});
-export const comboboxHint = styleWithLayer({
-    fontSize: '12px',
-    color: vars.colors.textSecondary,
-    marginTop: '4px',
-});
-export const comboboxErrorMessage = styleWithLayer({
-    fontSize: '12px',
-    color: vars.colors.alertErrorText,
-    marginTop: '4px',
-});