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

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

@@ -0,0 +1,11 @@
+export declare const popoverContainer: string;
+export declare const popoverTrigger: string;
+export declare const popoverContent: string;
+export declare const popoverPositionVariants: Record<"bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight", string>;
+export declare const popoverArrow: string;
+export declare const popoverArrowPositionVariants: Record<"bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight", string>;
+export declare const popoverHeader: string;
+export declare const popoverTitle: string;
+export declare const popoverCloseButton: string;
+export declare const popoverBody: string;
+export declare const popoverFooter: string;

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

@@ -0,0 +1,185 @@
+import { styleVariants, keyframes } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+const fadeIn = keyframes({
+    from: { opacity: 0, transform: 'scale(0.95)' },
+    to: { opacity: 1, transform: 'scale(1)' },
+});
+export const popoverContainer = styleWithLayer({
+    position: 'relative',
+    display: 'inline-block',
+});
+export const popoverTrigger = styleWithLayer({
+    cursor: 'pointer',
+});
+export const popoverContent = styleWithLayer({
+    position: 'absolute',
+    backgroundColor: vars.colors.backgroundDefault,
+    border: `1px solid ${vars.colors.borderDefault}`,
+    borderRadius: '0.75rem',
+    boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+    zIndex: 50,
+    padding: '1rem',
+    minWidth: '200px',
+    maxWidth: '400px',
+    animation: `${fadeIn} 0.15s ease-out`,
+});
+export const popoverPositionVariants = styleVariants({
+    top: {
+        bottom: '100%',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        marginBottom: '0.5rem',
+    },
+    bottom: {
+        top: '100%',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        marginTop: '0.5rem',
+    },
+    left: {
+        right: '100%',
+        top: '50%',
+        transform: 'translateY(-50%)',
+        marginRight: '0.5rem',
+    },
+    right: {
+        left: '100%',
+        top: '50%',
+        transform: 'translateY(-50%)',
+        marginLeft: '0.5rem',
+    },
+    topLeft: {
+        bottom: '100%',
+        right: 0,
+        marginBottom: '0.5rem',
+    },
+    topRight: {
+        bottom: '100%',
+        left: 0,
+        marginBottom: '0.5rem',
+    },
+    bottomLeft: {
+        top: '100%',
+        right: 0,
+        marginTop: '0.5rem',
+    },
+    bottomRight: {
+        top: '100%',
+        left: 0,
+        marginTop: '0.5rem',
+    },
+});
+export const popoverArrow = styleWithLayer({
+    position: 'absolute',
+    width: '8px',
+    height: '8px',
+    backgroundColor: vars.colors.backgroundDefault,
+    border: `1px solid ${vars.colors.borderDefault}`,
+    transform: 'rotate(45deg)',
+});
+export const popoverArrowPositionVariants = styleVariants({
+    top: {
+        bottom: '-5px',
+        left: '50%',
+        transform: 'translateX(-50%) rotate(45deg)',
+        borderTop: 'none',
+        borderLeft: 'none',
+    },
+    bottom: {
+        top: '-5px',
+        left: '50%',
+        transform: 'translateX(-50%) rotate(45deg)',
+        borderBottom: 'none',
+        borderRight: 'none',
+    },
+    left: {
+        right: '-5px',
+        top: '50%',
+        transform: 'translateY(-50%) rotate(45deg)',
+        borderLeft: 'none',
+        borderBottom: 'none',
+    },
+    right: {
+        left: '-5px',
+        top: '50%',
+        transform: 'translateY(-50%) rotate(45deg)',
+        borderRight: 'none',
+        borderTop: 'none',
+    },
+    topLeft: {
+        bottom: '-5px',
+        right: '1rem',
+        transform: 'rotate(45deg)',
+        borderTop: 'none',
+        borderLeft: 'none',
+    },
+    topRight: {
+        bottom: '-5px',
+        left: '1rem',
+        transform: 'rotate(45deg)',
+        borderTop: 'none',
+        borderLeft: 'none',
+    },
+    bottomLeft: {
+        top: '-5px',
+        right: '1rem',
+        transform: 'rotate(45deg)',
+        borderBottom: 'none',
+        borderRight: 'none',
+    },
+    bottomRight: {
+        top: '-5px',
+        left: '1rem',
+        transform: 'rotate(45deg)',
+        borderBottom: 'none',
+        borderRight: 'none',
+    },
+});
+export const popoverHeader = styleWithLayer({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: '0.75rem',
+    paddingBottom: '0.75rem',
+    borderBottom: `1px solid ${vars.colors.borderMuted}`,
+});
+export const popoverTitle = styleWithLayer({
+    fontFamily: vars.fontFamily.heading,
+    fontSize: '1rem',
+    fontWeight: '600',
+    color: vars.colors.textPrimary,
+    margin: 0,
+});
+export const popoverCloseButton = styleWithLayer({
+    background: 'none',
+    border: 'none',
+    padding: '0.25rem',
+    cursor: 'pointer',
+    borderRadius: '0.25rem',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: vars.colors.textSecondary,
+    fontSize: '1.25rem',
+    lineHeight: '1',
+    marginLeft: '0.5rem',
+    transition: 'background-color 0.2s ease-in-out, color 0.2s ease-in-out',
+    ':hover': {
+        backgroundColor: vars.colors.borderMuted,
+        color: vars.colors.textPrimary,
+    },
+});
+export const popoverBody = styleWithLayer({
+    fontSize: '14px',
+    color: vars.colors.textPrimary,
+    lineHeight: '1.5',
+});
+export const popoverFooter = styleWithLayer({
+    display: 'flex',
+    gap: '0.5rem',
+    justifyContent: 'flex-end',
+    marginTop: '0.75rem',
+    paddingTop: '0.75rem',
+    borderTop: `1px solid ${vars.colors.borderMuted}`,
+});

package/dist/components/Progress/Progress.d.ts

@@ -0,0 +1,10 @@
+type ProgressProps = {
+    value: number;
+    max?: number;
+    label?: string;
+    showPercentage?: boolean;
+    variant?: 'default' | 'success' | 'warning' | 'error';
+    className?: string;
+};
+declare const Progress: ({ value, max, label, showPercentage, variant, className, }: ProgressProps) => import("react/jsx-runtime").JSX.Element;
+export default Progress;

package/dist/components/Progress/Progress.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { progress, progressBar, progressFill, progressLabel, } from './styles.css';
+import Box from '../Box';
+const Progress = ({ value, max = 100, label, showPercentage = false, variant = 'default', className, }) => {
+    const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
+    return (_jsxs(Box, { className: clsx(progress, className), width: "100%", children: [(label || showPercentage) && (_jsxs(Box, { className: progressLabel, display: "flex", justifyContent: "space-between", fontSize: "12px", fontWeight: "500", color: "c5-600", marginBottom: "small", fontFamily: "body", children: [label && _jsx(Box, { as: "span", children: label }), showPercentage && _jsxs(Box, { as: "span", children: [percentage, "%"] })] })), _jsx(Box, { as: "div", className: progressBar[variant], role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": max, children: _jsx(Box, { as: "div", className: progressFill[variant], style: { width: `${percentage}%` }, role: "presentation" }) })] }));
+};
+export default Progress;

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

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

package/dist/components/Progress/index.js

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

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

@@ -0,0 +1,4 @@
+export declare const progress: string;
+export declare const progressBar: Record<"default" | "success" | "warning" | "error", string>;
+export declare const progressFill: Record<"default" | "success" | "warning" | "error", string>;
+export declare const progressLabel: string;

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

@@ -0,0 +1,71 @@
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+export const progress = styleWithLayer({
+    width: '100%',
+});
+export const progressBar = styleVariants({
+    default: {
+        width: '100%',
+        height: '8px',
+        backgroundColor: vars.colors.backgroundMuted,
+        borderRadius: '4px',
+        overflow: 'hidden',
+    },
+    success: {
+        width: '100%',
+        height: '8px',
+        backgroundColor: vars.colors.alertSuccessBackground,
+        borderRadius: '4px',
+        overflow: 'hidden',
+    },
+    warning: {
+        width: '100%',
+        height: '8px',
+        backgroundColor: vars.colors.alertWarningBackground,
+        borderRadius: '4px',
+        overflow: 'hidden',
+    },
+    error: {
+        width: '100%',
+        height: '8px',
+        backgroundColor: vars.colors.alertErrorBackground,
+        borderRadius: '4px',
+        overflow: 'hidden',
+    },
+});
+export const progressFill = styleVariants({
+    default: {
+        height: '100%',
+        borderRadius: '4px',
+        transition: 'width 0.3s ease',
+        backgroundColor: vars.colors.buttonBackgroundPrimary,
+    },
+    success: {
+        height: '100%',
+        borderRadius: '4px',
+        transition: 'width 0.3s ease',
+        backgroundColor: vars.colors.alertSuccessBorder,
+    },
+    warning: {
+        height: '100%',
+        borderRadius: '4px',
+        transition: 'width 0.3s ease',
+        backgroundColor: vars.colors.alertWarningBorder,
+    },
+    error: {
+        height: '100%',
+        borderRadius: '4px',
+        transition: 'width 0.3s ease',
+        backgroundColor: vars.colors.alertErrorBorder,
+    },
+});
+export const progressLabel = styleWithLayer({
+    display: 'flex',
+    justifyContent: 'space-between',
+    fontSize: '12px',
+    fontWeight: '500',
+    color: vars.colors.textSecondary,
+    marginBottom: '4px',
+    fontFamily: vars.fontFamily.body,
+});

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+type RadioGroupProps = {
+    children: React.ReactNode;
+    name: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    layout?: 'vertical' | 'horizontal';
+    className?: string;
+};
+declare const RadioComponent: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "onChange"> & {
+    label?: string;
+    value: string;
+} & React.RefAttributes<HTMLInputElement>> & {
+    Group: ({ children, name, value, onChange, layout, className, }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default RadioComponent;

package/dist/components/Radio/Radio.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { forwardRef, createContext, useContext } from 'react';
+import { radioContainer, radioInput, radioLabel, radioGroup, radioGroupHorizontal, } from './styles.css';
+import Box from '../Box';
+const RadioContext = createContext({});
+const Radio = forwardRef(({ label, className, value, ...props }, ref) => {
+    const context = useContext(RadioContext);
+    const name = context.name || props.name;
+    const isChecked = context.value === value;
+    const handleChange = () => {
+        if (context.onChange) {
+            context.onChange(value);
+        }
+    };
+    return (_jsxs(Box, { as: "label", className: clsx(radioContainer, className), display: "flex", alignItems: "center", gap: "small", cursor: "pointer", style: { userSelect: 'none' }, children: [_jsx(Box, { as: "input", type: "radio", ref: ref, name: name, value: value, checked: isChecked, onChange: handleChange, className: radioInput, ...props }), label && _jsx(Box, { as: "span", className: radioLabel, children: label })] }));
+});
+Radio.displayName = 'Radio';
+const RadioGroup = ({ children, name, value, onChange, layout = 'vertical', className, }) => {
+    return (_jsx(RadioContext.Provider, { value: { name, value, onChange }, children: _jsx(Box, { className: clsx(layout === 'horizontal' ? radioGroupHorizontal : radioGroup, className), children: children }) }));
+};
+const RadioComponent = Object.assign(Radio, {
+    Group: RadioGroup,
+});
+export default RadioComponent;

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

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

package/dist/components/Radio/index.js

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

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

@@ -0,0 +1,5 @@
+export declare const radioContainer: string;
+export declare const radioInput: string;
+export declare const radioLabel: string;
+export declare const radioGroup: string;
+export declare const radioGroupHorizontal: string;

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

@@ -0,0 +1,42 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+export const radioContainer = styleWithLayer({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    cursor: 'pointer',
+    userSelect: 'none',
+});
+export const radioInput = style({
+    width: '18px',
+    height: '18px',
+    border: `2px solid ${vars.colors.borderDefault}`,
+    borderRadius: '50%',
+    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 radioLabel = styleWithLayer({
+    fontFamily: vars.fontFamily.body,
+    fontSize: '14px',
+    color: vars.colors.textPrimary,
+});
+export const radioGroup = styleWithLayer({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+});
+export const radioGroupHorizontal = styleWithLayer({
+    display: 'flex',
+    flexDirection: 'row',
+    gap: '16px',
+    flexWrap: 'wrap',
+});

package/dist/components/ScrollArea/ScrollArea.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export type ScrollAreaOrientation = 'vertical' | 'horizontal' | 'both';
+export interface ScrollAreaProps {
+    children: React.ReactNode;
+    orientation?: ScrollAreaOrientation;
+    maxHeight?: string | number;
+    maxWidth?: string | number;
+    className?: string;
+}
+declare const ScrollArea: ({ children, orientation, maxHeight, maxWidth, className, ...props }: ScrollAreaProps) => import("react/jsx-runtime").JSX.Element;
+export default ScrollArea;

package/dist/components/ScrollArea/ScrollArea.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { scrollArea, scrollAreaOrientation, scrollAreaViewport, } from './styles.css';
+import Box from '../Box';
+const ScrollArea = ({ children, orientation = 'vertical', maxHeight, maxWidth, className, ...props }) => {
+    const style = {
+        maxHeight,
+        maxWidth,
+    };
+    return (_jsx(Box, { className: clsx(scrollArea, scrollAreaOrientation[orientation], className), style: style, ...props, children: _jsx(Box, { className: scrollAreaViewport, children: children }) }));
+};
+export default ScrollArea;

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

@@ -0,0 +1,2 @@
+export { default as ScrollArea } from './ScrollArea';
+export type { ScrollAreaProps, ScrollAreaOrientation } from './ScrollArea';

package/dist/components/ScrollArea/index.js

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

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

@@ -0,0 +1,3 @@
+export declare const scrollArea: string;
+export declare const scrollAreaOrientation: Record<"both" | "horizontal" | "vertical", string>;
+export declare const scrollAreaViewport: string;

package/dist/components/ScrollArea/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 scrollArea = styleWithLayer({
+    overflow: 'auto',
+    scrollbarWidth: 'thin',
+    scrollbarColor: `${vars.colors.borderDefault} ${vars.colors.backgroundMuted}`,
+});
+export const scrollAreaOrientation = styleVariants({
+    vertical: {
+        overflowX: 'hidden',
+        overflowY: 'auto',
+    },
+    horizontal: {
+        overflowX: 'auto',
+        overflowY: 'hidden',
+    },
+    both: {
+        overflow: 'auto',
+    },
+});
+export const scrollAreaViewport = styleWithLayer({
+    width: '100%',
+    height: '100%',
+});

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+type SelectOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+declare const Select: React.ForwardRefExoticComponent<Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> & {
+    label?: string;
+    options: SelectOption[];
+    error?: boolean;
+    fullWidth?: boolean;
+} & React.RefAttributes<HTMLSelectElement>>;
+export default Select;

package/dist/components/Select/Select.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { select, selectLabel, selectWrapper } from './styles.css';
+import Box from '../Box';
+const Select = forwardRef(({ label, options, error = false, fullWidth = true, className, ...props }, ref) => {
+    return (_jsxs(Box, { className: selectWrapper, width: "100%", children: [label && (_jsx(Box, { as: "label", className: selectLabel, display: "block", fontSize: "14px", fontWeight: "500", color: "c5-700", marginBottom: "small", children: label })), _jsx(Box, { as: "select", ref: ref, className: clsx(select[error ? 'error' : 'default'], className), width: fullWidth ? '100%' : undefined, ...props, children: options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))) })] }));
+});
+Select.displayName = 'Select';
+export default Select;

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

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

package/dist/components/Select/index.js

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

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

@@ -0,0 +1,4 @@
+export declare const selectContainer: string;
+export declare const select: Record<"default" | "error", string>;
+export declare const selectLabel: string;
+export declare const selectWrapper: string;

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

@@ -0,0 +1,82 @@
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+export const selectContainer = styleWithLayer({
+    width: '100%',
+});
+export const select = styleVariants({
+    default: {
+        width: '100%',
+        padding: '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',
+        cursor: 'pointer',
+        outline: 'none',
+        appearance: 'none',
+        backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23252525' d='M6 8L1 3h10z'/%3E%3C/svg%3E")`,
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'right 12px center',
+        transition: 'border-color 0.2s ease',
+        '::placeholder': {
+            color: vars.colors.inputPlaceholder,
+        },
+        ':focus-visible': {
+            outline: `2px solid ${vars.colors.inputBorderFocused}`,
+            outlineOffset: '2px',
+        },
+        ':hover:not(:disabled)': {
+            borderColor: vars.colors.inputBorderFocused,
+        },
+        ':disabled': {
+            cursor: 'not-allowed',
+            opacity: 0.5,
+            backgroundColor: vars.colors.backgroundMuted,
+        },
+    },
+    error: {
+        width: '100%',
+        padding: '0.75rem 1rem',
+        fontSize: '14px',
+        fontFamily: vars.fontFamily.body,
+        color: vars.colors.textPrimary,
+        backgroundColor: vars.colors.inputBackground,
+        border: `1px solid ${vars.colors.alertErrorBorder}`,
+        borderRadius: '8px',
+        cursor: 'pointer',
+        outline: 'none',
+        appearance: 'none',
+        backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23252525' d='M6 8L1 3h10z'/%3E%3C/svg%3E")`,
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'right 12px center',
+        transition: 'border-color 0.2s ease',
+        '::placeholder': {
+            color: vars.colors.inputPlaceholder,
+        },
+        ':focus-visible': {
+            outline: `2px solid ${vars.colors.alertErrorBorder}`,
+            outlineOffset: '2px',
+        },
+        ':hover:not(:disabled)': {
+            borderColor: vars.colors.alertErrorBorder,
+        },
+        ':disabled': {
+            cursor: 'not-allowed',
+            opacity: 0.5,
+            backgroundColor: vars.colors.backgroundMuted,
+        },
+    },
+});
+export const selectLabel = styleWithLayer({
+    display: 'block',
+    fontSize: '14px',
+    fontWeight: '500',
+    color: vars.colors.textPrimary,
+    marginBottom: '8px',
+});
+export const selectWrapper = styleWithLayer({
+    width: '100%',
+});

package/dist/components/Separator/Separator.d.ts

@@ -0,0 +1,8 @@
+export type SeparatorOrientation = 'horizontal' | 'vertical';
+export interface SeparatorProps {
+    orientation?: SeparatorOrientation;
+    decorative?: boolean;
+    className?: string;
+}
+declare const Separator: ({ orientation, decorative, className, ...props }: SeparatorProps) => import("react/jsx-runtime").JSX.Element;
+export default Separator;

package/dist/components/Separator/Separator.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { separator, separatorOrientation, } from './styles.css';
+import Box from '../Box';
+const Separator = ({ orientation = 'horizontal', decorative = false, className, ...props }) => {
+    return (_jsx(Box, { as: "hr", className: clsx(separator, separatorOrientation[orientation], className), "aria-hidden": decorative, ...props }));
+};
+export default Separator;

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

@@ -0,0 +1,2 @@
+export { default as Separator } from './Separator';
+export type { SeparatorProps, SeparatorOrientation } from './Separator';

package/dist/components/Separator/index.js

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

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

@@ -0,0 +1,4 @@
+export declare const separator: string;
+export declare const separatorOrientation: Record<"horizontal" | "vertical", string>;
+export declare const separatorSize: Record<"medium" | "large" | "small", string>;
+export declare const separatorDecorative: string;

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

@@ -0,0 +1,28 @@
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+export const separator = styleWithLayer({
+    border: 'none',
+    margin: 0,
+    flexShrink: 0,
+});
+export const separatorOrientation = styleVariants({
+    horizontal: {
+        width: '100%',
+        height: '1px',
+        backgroundColor: vars.colors.borderDefault,
+    },
+    vertical: {
+        width: '1px',
+        height: '100%',
+        backgroundColor: vars.colors.borderDefault,
+    },
+});
+export const separatorSize = styleVariants({
+    small: {},
+    medium: {},
+    large: {},
+});
+export const separatorDecorative = styleWithLayer({
+    backgroundColor: vars.colors.borderMuted,
+});