@jordan-mace/chaser-design-system 1.2.3 → 1.2.4

package/dist/components/Box/reset.css.js

@@ -0,0 +1,15 @@
+import { style } from '@vanilla-extract/css';
+import { componentsLayer } from '../../styles/layers.css';
+export const reset = style({
+    '@layer': {
+        [componentsLayer]: {
+            margin: 0,
+            padding: 0,
+            border: 0,
+            boxSizing: 'border-box',
+            fontSize: '100%',
+            font: 'inherit',
+            verticalAlign: 'baseline',
+        },
+    },
+});

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,12 @@
+type BreadcrumbItem = {
+    label: string;
+    href?: string;
+    current?: boolean;
+};
+type BreadcrumbProps = {
+    items: BreadcrumbItem[];
+    className?: string;
+    separator?: string;
+};
+declare const Breadcrumb: ({ items, className, separator, }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;
+export default Breadcrumb;

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { breadcrumb, breadcrumbList, breadcrumbItem, breadcrumbLink, breadcrumbSeparator, breadcrumbCurrent, } from './styles.css';
+import Box from '../Box';
+const Breadcrumb = ({ items, className, separator = '/', }) => {
+    return (_jsx(Box, { as: "nav", "aria-label": "Breadcrumb", className: clsx(breadcrumb, className), display: "flex", alignItems: "center", gap: "small", fontSize: "14px", children: _jsx(Box, { as: "ol", className: breadcrumbList, display: "flex", alignItems: "center", style: { listStyle: 'none' }, margin: "none", padding: "none", gap: "small", children: items.map((item, index) => (_jsxs(Box, { as: "li", className: breadcrumbItem, display: "flex", alignItems: "center", children: [item.href && !item.current ? (_jsx(Box, { as: "a", href: item.href, className: breadcrumbLink, display: "inline", alignItems: "center", color: "c5-600", fontSize: "14px", textDecoration: "none", children: item.label })) : (_jsx(Box, { as: "span", className: breadcrumbCurrent, display: "inline", alignItems: "center", color: "c5-700", fontSize: "14px", fontWeight: "500", children: item.label })), index < items.length - 1 && (_jsx(Box, { as: "span", className: breadcrumbSeparator, color: "c5-500", fontSize: "12px", style: { userSelect: 'none' }, children: separator }))] }, index))) }) }));
+};
+export default Breadcrumb;

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

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

package/dist/components/Breadcrumb/index.js

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

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

@@ -0,0 +1,6 @@
+export declare const breadcrumb: string;
+export declare const breadcrumbList: string;
+export declare const breadcrumbItem: string;
+export declare const breadcrumbLink: string;
+export declare const breadcrumbSeparator: string;
+export declare const breadcrumbCurrent: string;

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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,8 @@
+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

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

package/dist/components/Button/index.js

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

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

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

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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,8 @@
+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

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

package/dist/components/Card/index.js

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

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

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

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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,25 @@
+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

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

package/dist/components/Checkbox/index.js

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

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

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

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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,56 @@
+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

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

package/dist/components/Collapse/index.js

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

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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,104 @@
+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

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

package/dist/components/Combobox/index.js

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

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

@@ -0,0 +1,13 @@
+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;