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

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

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

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

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

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

package/dist/components/Progress/index.js

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

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

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

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

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

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

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

package/dist/components/Radio/index.js

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

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

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

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

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

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

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

package/dist/components/ScrollArea/index.js

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

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

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

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

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

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

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

package/dist/components/Select/index.js

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

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

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

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

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

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

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

package/dist/components/Separator/index.js

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

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

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

@@ -1,28 +0,0 @@
-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,
-});

package/dist/components/Skeleton/Skeleton.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-export type SkeletonVariant = 'text' | 'circle' | 'rectangle';
-export type SkeletonSize = 'small' | 'medium' | 'large';
-export type SkeletonAnimation = 'shimmer' | 'pulse' | 'none';
-export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
-    variant?: SkeletonVariant;
-    size?: SkeletonSize;
-    animation?: SkeletonAnimation;
-    width?: string | number;
-    height?: string | number;
-    count?: number;
-}
-declare const Skeleton: ({ variant, size, animation, width, height, count, className, ...props }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
-export default Skeleton;