You're Invited: Meet the Socket team at BSidesSF and RSAC - April 27 - May 1.RSVP →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@xstyled/system

Package Overview
Dependencies
Maintainers
1
Versions
64
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@xstyled/system - npm Package Compare versions

Comparing version

1.20.0-alpha.0
to
2.0.0-alpha.0

dist/defaultStates.d.ts
dist/defaultTheme.d.ts
dist/preflight.d.ts
dist/styles/animations.d.ts
dist/styles/colors.d.ts
dist/styles/effects.d.ts
dist/styles/flexbox-grids.d.ts
dist/styles/interactivity.d.ts
dist/styles/sizing.d.ts
dist/styles/svg.d.ts
dist/styles/tables.d.ts
dist/styles/transforms.d.ts
dist/styles/transitions.d.ts
dist/styles/units.d.ts
dist/theme.d.ts

12

dist/breakpoints.d.ts

@@ -1,7 +0,5 @@

import { Props } from './types';
export declare const up: (key: string | number, rules: any) => (props: Props) => any;
export declare const down: (key: string | number, rules: any) => (props: Props) => any[] | null;
export declare const between: (lower: string | number, upper: string | number, rules: any) => (props: Props) => any;
export declare const breakpoints: (values: {
[key: string]: any;
}) => (props: Props) => any[];
import { IProps } from './types';
export declare const up: (key: string | number, rules: unknown) => (props: IProps) => unknown;
export declare const down: (key: string | number, rules: any) => (props: IProps) => any[] | null;
export declare const between: (lower: string | number, upper: string | number, rules: any) => (props: IProps) => unknown;
export declare const breakpoints: (values: any) => (props: IProps) => unknown[];

7

dist/index.d.ts

@@ -1,9 +0,10 @@

export * from './style';
export { compose, style, themeGetter, createStyleGenerator } from './style';
export * from './styles/index';
export * from './th';
export * from './variant';
export * from './breakpoints';
export * from './types';
export * from './transformers';
export * from './defaultTheme';
export * from './preflight';
export * from './theme';
export { getBreakpoints } from './media';
export * from './systemComponent';

12

dist/media.d.ts

@@ -1,7 +0,3 @@

import { Props } from './types';
export interface Breakpoints {
[key: string]: number;
[key: number]: number;
}
export declare function getBreakpoints(props: Props): Breakpoints;
import { IBreakpoints, IProps } from './types';
export declare function getBreakpoints(props: IProps): IBreakpoints;
export declare const mediaMinWidth: (value: string | null) => string | null;

@@ -14,3 +10,3 @@ export declare const mediaMaxWidth: (value: string | null) => string | null;

*/
export declare const getBreakpointMin: <TBreakpoints extends Breakpoints, K extends keyof TBreakpoints>(breakpoints: TBreakpoints, key: K) => string | null;
export declare const getBreakpointMin: <TBreakpoints extends Record<string | number, number>>(breakpoints: TBreakpoints, key: keyof TBreakpoints) => string | null;
/**

@@ -24,2 +20,2 @@ * Maximum breakpoint width. Null for the largest (last) breakpoint.

*/
export declare const getBreakpointMax: (breakpoints: Breakpoints, key: string | number) => string | null;
export declare const getBreakpointMax: <TBreakpoints extends Record<string | number, number>>(breakpoints: TBreakpoints, key: keyof TBreakpoints) => string | null;

47

dist/style.d.ts

@@ -1,30 +0,27 @@

import { Props, Variants, ThemeGetter, TransformValue, StyleGenerator, ExtractThemeProperty } from './types';
interface Styles {
[key: string]: any;
}
interface ThemeCache {
[key: string]: any;
}
interface StyleGetter {
(props: Props): any;
}
export declare const themeGetter: <TTheme, Key extends string, TDefaultVariants, TThemeProperty extends ExtractThemeProperty<TTheme, Key>, TVariants extends TThemeProperty extends Variants ? TThemeProperty : TDefaultVariants, TBaseType = string | number>({ name, transform: defaultTransform, key, defaultVariants, compose, }: {
import { IProps, IStyles, IVariants, StyleGetter, ThemeGetter, TransformValue, StyleGenerator, Mixin } from './types';
declare type ThemeCache = Record<string, any>;
export declare const themeGetter: <TValueType>({ name, transform: defaultTransform, key, defaultVariants, compose, shorthand, }: {
name?: string | undefined;
key?: Key | undefined;
transform?: TransformValue<TVariants, TBaseType> | undefined;
defaultVariants?: TDefaultVariants | undefined;
compose?: ThemeGetter<any, any> | undefined;
}) => ThemeGetter<TVariants, TBaseType>;
export declare function createStyleGenerator<TProps>(getStyle: StyleGetter, props: string[], generators?: StyleGenerator[]): StyleGenerator<TProps>;
export declare function reduceBreakpoints(props: Props, values: {
key?: string | undefined;
transform?: TransformValue<TValueType> | undefined;
defaultVariants?: Record<string | number, string | number> | undefined;
compose?: ThemeGetter<any> | undefined;
shorthand?: boolean | undefined;
}) => ThemeGetter<TValueType>;
export declare function createStyleGenerator(getStyle: StyleGetter, props: string[], generators?: StyleGenerator[]): StyleGenerator;
export declare function reduceBreakpoints(props: IProps, values: {
[key: string]: any;
}, getStyle?: (value: any) => Styles | null, cache?: ThemeCache): Styles;
export declare function compose<T>(...generators: StyleGenerator<any>[]): StyleGenerator<T>;
export declare function style<TProps extends object>({ prop, cssProperty, key, transform, themeGet, }: {
}, getStyle?: (value: any) => IStyles | null, cache?: ThemeCache): Record<string, unknown>;
export declare function compose(...generators: StyleGenerator[]): StyleGenerator;
declare type CSSProperty = string | string[] | Mixin;
export declare function style({ prop, cssProperty, key, transform, themeGet, states, }: {
prop: string | string[];
cssProperty?: string | string[];
cssProperty?: CSSProperty;
key?: string;
transform?: TransformValue<any, any>;
themeGet?: ThemeGetter<any, any>;
}): StyleGenerator<TProps>;
transform?: TransformValue;
themeGet?: ThemeGetter;
states?: {
[key: string]: string;
};
}): StyleGenerator;
export {};

258

dist/styles/backgrounds.d.ts
import * as CSS from 'csstype';
import { ColorGetter } from './basics';
import { SystemProperty } from '../types';
export interface BackgroundProps<T = {}> {
background?: SystemProperty<CSS.Property.Background, T>;
import { ColorGetter } from './colors';
import { SystemProp, ITheme, Theme } from '../types';
declare type BackgroundProp<T extends ITheme> = SystemProp<CSS.Property.Background, T>;
export interface BackgroundProps<T extends ITheme = Theme> {
background?: BackgroundProp<T>;
motionSafeBackground?: BackgroundProp<T>;
motionReduceBackground?: BackgroundProp<T>;
firstBackground?: BackgroundProp<T>;
lastBackground?: BackgroundProp<T>;
oddBackground?: BackgroundProp<T>;
evenBackground?: BackgroundProp<T>;
visitedBackground?: BackgroundProp<T>;
checkedBackground?: BackgroundProp<T>;
focusWithinBackground?: BackgroundProp<T>;
hoverBackground?: BackgroundProp<T>;
focusBackground?: BackgroundProp<T>;
focusVisibleBackground?: BackgroundProp<T>;
activeBackground?: BackgroundProp<T>;
disabledBackground?: BackgroundProp<T>;
placeholderBackground?: BackgroundProp<T>;
}
export declare const background: import("../types").StyleGenerator<BackgroundProps<{}>>;
declare type BackgroundColor<T = {}> = ColorGetter<T> | CSS.Property.BackgroundColor;
export interface BackgroundColorProps<T = {}> {
backgroundColor?: SystemProperty<BackgroundColor, T>;
bg?: SystemProperty<BackgroundColor, T>;
export declare const background: import("../types").StyleGenerator;
declare type BackgroundColorProp<T extends ITheme> = SystemProp<ColorGetter<T> | CSS.Property.BackgroundColor, T>;
export interface BackgroundColorProps<T extends ITheme = Theme> {
backgroundColor?: BackgroundColorProp<T>;
motionSafeBackgroundColor?: BackgroundColorProp<T>;
motionReduceBackgroundColor?: BackgroundColorProp<T>;
firstBackgroundColor?: BackgroundColorProp<T>;
lastBackgroundColor?: BackgroundColorProp<T>;
oddBackgroundColor?: BackgroundColorProp<T>;
evenBackgroundColor?: BackgroundColorProp<T>;
visitedBackgroundColor?: BackgroundColorProp<T>;
checkedBackgroundColor?: BackgroundColorProp<T>;
focusWithinBackgroundColor?: BackgroundColorProp<T>;
hoverBackgroundColor?: BackgroundColorProp<T>;
focusBackgroundColor?: BackgroundColorProp<T>;
focusVisibleBackgroundColor?: BackgroundColorProp<T>;
activeBackgroundColor?: BackgroundColorProp<T>;
disabledBackgroundColor?: BackgroundColorProp<T>;
placeholderBackgroundColor?: BackgroundColorProp<T>;
bg?: BackgroundColorProp<T>;
motionSafeBg?: BackgroundColorProp<T>;
motionReduceBg?: BackgroundColorProp<T>;
firstBg?: BackgroundColorProp<T>;
lastBg?: BackgroundColorProp<T>;
oddBg?: BackgroundColorProp<T>;
evenBg?: BackgroundColorProp<T>;
visitedBg?: BackgroundColorProp<T>;
checkedBg?: BackgroundColorProp<T>;
focusWithinBg?: BackgroundColorProp<T>;
hoverBg?: BackgroundColorProp<T>;
focusBg?: BackgroundColorProp<T>;
focusVisibleBg?: BackgroundColorProp<T>;
activeBg?: BackgroundColorProp<T>;
disabledBg?: BackgroundColorProp<T>;
placeholderBg?: BackgroundColorProp<T>;
}
export declare const backgroundColor: import("../types").StyleGenerator<BackgroundColorProps<{}>>;
export interface BackgroundImageProps<T = {}> {
backgroundImage?: SystemProperty<CSS.Property.BackgroundImage, T>;
export declare const backgroundColor: import("../types").StyleGenerator;
declare type BackgroundImageProp<T extends ITheme> = SystemProp<CSS.Property.BackgroundImage, T>;
export interface BackgroundImageProps<T extends ITheme = Theme> {
backgroundImage?: BackgroundImageProp<T>;
motionSafeBackgroundImage?: BackgroundImageProp<T>;
motionReduceBackgroundImage?: BackgroundImageProp<T>;
firstBackgroundImage?: BackgroundImageProp<T>;
lastBackgroundImage?: BackgroundImageProp<T>;
oddBackgroundImage?: BackgroundImageProp<T>;
evenBackgroundImage?: BackgroundImageProp<T>;
visitedBackgroundImage?: BackgroundImageProp<T>;
checkedBackgroundImage?: BackgroundImageProp<T>;
focusWithinBackgroundImage?: BackgroundImageProp<T>;
hoverBackgroundImage?: BackgroundImageProp<T>;
focusBackgroundImage?: BackgroundImageProp<T>;
focusVisibleBackgroundImage?: BackgroundImageProp<T>;
activeBackgroundImage?: BackgroundImageProp<T>;
disabledBackgroundImage?: BackgroundImageProp<T>;
placeholderBackgroundImage?: BackgroundImageProp<T>;
}
export declare const backgroundImage: import("../types").StyleGenerator<BackgroundImageProps<{}>>;
export interface BackgroundSizeProps<T = {}> {
backgroundSize?: SystemProperty<CSS.Property.BackgroundSize, T>;
export declare const backgroundImage: import("../types").StyleGenerator;
declare type BackgroundSizeProp<T extends ITheme> = SystemProp<CSS.Property.BackgroundSize, T>;
export interface BackgroundSizeProps<T extends ITheme = Theme> {
backgroundSize?: BackgroundSizeProp<T>;
motionSafeBackgroundSize?: BackgroundSizeProp<T>;
motionReduceBackgroundSize?: BackgroundSizeProp<T>;
firstBackgroundSize?: BackgroundSizeProp<T>;
lastBackgroundSize?: BackgroundSizeProp<T>;
oddBackgroundSize?: BackgroundSizeProp<T>;
evenBackgroundSize?: BackgroundSizeProp<T>;
visitedBackgroundSize?: BackgroundSizeProp<T>;
checkedBackgroundSize?: BackgroundSizeProp<T>;
focusWithinBackgroundSize?: BackgroundSizeProp<T>;
hoverBackgroundSize?: BackgroundSizeProp<T>;
focusBackgroundSize?: BackgroundSizeProp<T>;
focusVisibleBackgroundSize?: BackgroundSizeProp<T>;
activeBackgroundSize?: BackgroundSizeProp<T>;
disabledBackgroundSize?: BackgroundSizeProp<T>;
placeholderBackgroundSize?: BackgroundSizeProp<T>;
}
export declare const backgroundSize: import("../types").StyleGenerator<BackgroundSizeProps<{}>>;
export interface BackgroundPositionProps<T = {}> {
backgroundPosition?: SystemProperty<CSS.Property.BackgroundPosition, T>;
export declare const backgroundSize: import("../types").StyleGenerator;
declare type BackgroundPositionProp<T extends ITheme> = SystemProp<CSS.Property.BackgroundPosition, T>;
export interface BackgroundPositionProps<T extends ITheme = Theme> {
backgroundPosition?: BackgroundPositionProp<T>;
motionSafeBackgroundPosition?: BackgroundPositionProp<T>;
motionReduceBackgroundPosition?: BackgroundPositionProp<T>;
firstBackgroundPosition?: BackgroundPositionProp<T>;
lastBackgroundPosition?: BackgroundPositionProp<T>;
oddBackgroundPosition?: BackgroundPositionProp<T>;
evenBackgroundPosition?: BackgroundPositionProp<T>;
visitedBackgroundPosition?: BackgroundPositionProp<T>;
checkedBackgroundPosition?: BackgroundPositionProp<T>;
focusWithinBackgroundPosition?: BackgroundPositionProp<T>;
hoverBackgroundPosition?: BackgroundPositionProp<T>;
focusBackgroundPosition?: BackgroundPositionProp<T>;
focusVisibleBackgroundPosition?: BackgroundPositionProp<T>;
activeBackgroundPosition?: BackgroundPositionProp<T>;
disabledBackgroundPosition?: BackgroundPositionProp<T>;
placeholderBackgroundPosition?: BackgroundPositionProp<T>;
}
export declare const backgroundPosition: import("../types").StyleGenerator<BackgroundPositionProps<{}>>;
export interface BackgroundRepeatProps<T = {}> {
backgroundRepeat?: SystemProperty<CSS.Property.BackgroundRepeat, T>;
export declare const backgroundPosition: import("../types").StyleGenerator;
declare type BackgroundRepeatProp<T extends ITheme> = SystemProp<CSS.Property.BackgroundRepeat, T>;
export interface BackgroundRepeatProps<T extends ITheme = Theme> {
backgroundRepeat?: BackgroundRepeatProp<T>;
motionSafeBackgroundRepeat?: BackgroundRepeatProp<T>;
motionReduceBackgroundRepeat?: BackgroundRepeatProp<T>;
firstBackgroundRepeat?: BackgroundRepeatProp<T>;
lastBackgroundRepeat?: BackgroundRepeatProp<T>;
oddBackgroundRepeat?: BackgroundRepeatProp<T>;
evenBackgroundRepeat?: BackgroundRepeatProp<T>;
visitedBackgroundRepeat?: BackgroundRepeatProp<T>;
checkedBackgroundRepeat?: BackgroundRepeatProp<T>;
focusWithinBackgroundRepeat?: BackgroundRepeatProp<T>;
hoverBackgroundRepeat?: BackgroundRepeatProp<T>;
focusBackgroundRepeat?: BackgroundRepeatProp<T>;
focusVisibleBackgroundRepeat?: BackgroundRepeatProp<T>;
activeBackgroundRepeat?: BackgroundRepeatProp<T>;
disabledBackgroundRepeat?: BackgroundRepeatProp<T>;
placeholderBackgroundRepeat?: BackgroundRepeatProp<T>;
}
export declare const backgroundRepeat: import("../types").StyleGenerator<BackgroundRepeatProps<{}>>;
export declare type BackgroundsProps<T = {}> = BackgroundProps<T> & BackgroundColorProps<T> & BackgroundImageProps<T> & BackgroundSizeProps<T> & BackgroundPositionProps<T> & BackgroundRepeatProps<T>;
export declare const backgrounds: import("../types").StyleGenerator<BackgroundsProps<{}>>;
export declare const backgroundRepeat: import("../types").StyleGenerator;
declare type BackgroundAttachmentProp<T extends ITheme> = SystemProp<CSS.Property.BackgroundAttachment, T>;
export interface BackgroundAttachmentProps<T extends ITheme = Theme> {
backgroundAttachment?: BackgroundAttachmentProp<T>;
motionSafeBackgroundAttachment?: BackgroundAttachmentProp<T>;
motionReduceBackgroundAttachment?: BackgroundAttachmentProp<T>;
firstBackgroundAttachment?: BackgroundAttachmentProp<T>;
lastBackgroundAttachment?: BackgroundAttachmentProp<T>;
oddBackgroundAttachment?: BackgroundAttachmentProp<T>;
evenBackgroundAttachment?: BackgroundAttachmentProp<T>;
visitedBackgroundAttachment?: BackgroundAttachmentProp<T>;
checkedBackgroundAttachment?: BackgroundAttachmentProp<T>;
focusWithinBackgroundAttachment?: BackgroundAttachmentProp<T>;
hoverBackgroundAttachment?: BackgroundAttachmentProp<T>;
focusBackgroundAttachment?: BackgroundAttachmentProp<T>;
focusVisibleBackgroundAttachment?: BackgroundAttachmentProp<T>;
activeBackgroundAttachment?: BackgroundAttachmentProp<T>;
disabledBackgroundAttachment?: BackgroundAttachmentProp<T>;
placeholderBackgroundAttachment?: BackgroundAttachmentProp<T>;
}
export declare const backgroundAttachment: import("../types").StyleGenerator;
declare type BackgroundClipProp<T extends ITheme> = SystemProp<CSS.Property.BackgroundClip, T>;
export interface BackgroundClipProps<T extends ITheme = Theme> {
backgroundClip?: BackgroundClipProp<T>;
motionSafeBackgroundClip?: BackgroundClipProp<T>;
motionReduceBackgroundClip?: BackgroundClipProp<T>;
firstBackgroundClip?: BackgroundClipProp<T>;
lastBackgroundClip?: BackgroundClipProp<T>;
oddBackgroundClip?: BackgroundClipProp<T>;
evenBackgroundClip?: BackgroundClipProp<T>;
visitedBackgroundClip?: BackgroundClipProp<T>;
checkedBackgroundClip?: BackgroundClipProp<T>;
focusWithinBackgroundClip?: BackgroundClipProp<T>;
hoverBackgroundClip?: BackgroundClipProp<T>;
focusBackgroundClip?: BackgroundClipProp<T>;
focusVisibleBackgroundClip?: BackgroundClipProp<T>;
activeBackgroundClip?: BackgroundClipProp<T>;
disabledBackgroundClip?: BackgroundClipProp<T>;
placeholderBackgroundClip?: BackgroundClipProp<T>;
}
export declare const backgroundClip: import("../types").StyleGenerator;
declare type GradientFromProp<T extends ITheme> = SystemProp<ColorGetter<T>, T>;
export interface GradientFromProps<T extends ITheme = Theme> {
gradientFrom?: GradientFromProp<T>;
motionSafeGradientFrom?: GradientFromProp<T>;
motionReduceGradientFrom?: GradientFromProp<T>;
firstGradientFrom?: GradientFromProp<T>;
lastGradientFrom?: GradientFromProp<T>;
oddGradientFrom?: GradientFromProp<T>;
evenGradientFrom?: GradientFromProp<T>;
visitedGradientFrom?: GradientFromProp<T>;
checkedGradientFrom?: GradientFromProp<T>;
focusWithinGradientFrom?: GradientFromProp<T>;
hoverGradientFrom?: GradientFromProp<T>;
focusGradientFrom?: GradientFromProp<T>;
focusVisibleGradientFrom?: GradientFromProp<T>;
activeGradientFrom?: GradientFromProp<T>;
disabledGradientFrom?: GradientFromProp<T>;
placeholderGradientFrom?: GradientFromProp<T>;
}
export declare const gradientFrom: import("../types").StyleGenerator;
declare type GradientViaProp<T extends ITheme> = SystemProp<ColorGetter<T>, T>;
export interface GradientViaProps<T extends ITheme = Theme> {
gradientVia?: GradientViaProp<T>;
motionSafeGradientVia?: GradientViaProp<T>;
motionReduceGradientVia?: GradientViaProp<T>;
firstGradientVia?: GradientViaProp<T>;
lastGradientVia?: GradientViaProp<T>;
oddGradientVia?: GradientViaProp<T>;
evenGradientVia?: GradientViaProp<T>;
visitedGradientVia?: GradientViaProp<T>;
checkedGradientVia?: GradientViaProp<T>;
focusWithinGradientVia?: GradientViaProp<T>;
hoverGradientVia?: GradientViaProp<T>;
focusGradientVia?: GradientViaProp<T>;
focusVisibleGradientVia?: GradientViaProp<T>;
activeGradientVia?: GradientViaProp<T>;
disabledGradientVia?: GradientViaProp<T>;
placeholderGradientVia?: GradientViaProp<T>;
}
export declare const gradientVia: import("../types").StyleGenerator;
declare type GradientToProp<T extends ITheme> = SystemProp<ColorGetter<T>, T>;
export interface GradientToProps<T extends ITheme = Theme> {
gradientTo?: GradientToProp<T>;
motionSafeGradientTo?: GradientToProp<T>;
motionReduceGradientTo?: GradientToProp<T>;
firstGradientTo?: GradientToProp<T>;
lastGradientTo?: GradientToProp<T>;
oddGradientTo?: GradientToProp<T>;
evenGradientTo?: GradientToProp<T>;
visitedGradientTo?: GradientToProp<T>;
checkedGradientTo?: GradientToProp<T>;
focusWithinGradientTo?: GradientToProp<T>;
hoverGradientTo?: GradientToProp<T>;
focusGradientTo?: GradientToProp<T>;
focusVisibleGradientTo?: GradientToProp<T>;
activeGradientTo?: GradientToProp<T>;
disabledGradientTo?: GradientToProp<T>;
placeholderGradientTo?: GradientToProp<T>;
}
export declare const gradientTo: import("../types").StyleGenerator;
export declare type BackgroundsProps<T extends ITheme = Theme> = BackgroundProps<T> & BackgroundColorProps<T> & BackgroundImageProps<T> & BackgroundSizeProps<T> & BackgroundPositionProps<T> & BackgroundRepeatProps<T> & BackgroundAttachmentProps<T> & BackgroundClipProps<T> & GradientFromProps<T> & GradientViaProps<T> & GradientToProps<T>;
export declare const backgrounds: import("../types").StyleGenerator;
export {};

413

dist/styles/borders.d.ts
import * as CSS from 'csstype';
import { ColorGetter, RadiusGetter } from './basics';
import { ExtractThemeProperty, SystemProperty, VariantsType } from '../types';
export declare type BorderGetter<T = {}> = VariantsType<ExtractThemeProperty<T, 'borders'>>;
export declare const getBorder: import("../types").ThemeGetter<unknown, string | number>;
export declare type BorderWidthGetter<T = {}> = VariantsType<ExtractThemeProperty<T, 'borderWidths'>>;
export declare const getBorderWidth: import("../types").ThemeGetter<unknown, string | number>;
export declare type BorderStyleGetter<T = {}> = VariantsType<ExtractThemeProperty<T, 'borderWidths'>>;
export declare const getBorderStyle: import("../types").ThemeGetter<unknown, string | number>;
export interface BorderProps<T = {}> {
border?: SystemProperty<BorderGetter<T> | CSS.Property.Border, T>;
import { ColorGetter } from './colors';
import { SystemProp, ITheme, Theme, VariantsType } from '../types';
export declare type BorderGetter<T extends ITheme = Theme> = VariantsType<T['borders']>;
export declare const getBorder: import("../types").ThemeGetter<(string & {}) | (number & {})>;
export declare type BorderWidthGetter<T extends ITheme = Theme> = VariantsType<T['borderWidths']>;
export declare const getBorderWidth: import("../types").ThemeGetter<(string & {}) | (number & {})>;
export declare type BorderColorGetter<T extends ITheme = Theme> = ColorGetter<T>;
export declare const getBorderColor: import("../types").ThemeGetter<(string & {}) | (number & {})>;
export declare type BorderStyleGetter<T extends ITheme = Theme> = VariantsType<T['borderStyles']>;
export declare const getBorderStyle: import("../types").ThemeGetter<(string & {}) | (number & {})>;
declare type BorderProp<T extends ITheme> = SystemProp<BorderGetter<T> | CSS.Property.Border, T>;
export interface BorderProps<T extends ITheme = Theme> {
border?: BorderProp<T>;
motionSafeBorder?: BorderProp<T>;
motionReduceBorder?: BorderProp<T>;
firstBorder?: BorderProp<T>;
lastBorder?: BorderProp<T>;
oddBorder?: BorderProp<T>;
evenBorder?: BorderProp<T>;
visitedBorder?: BorderProp<T>;
checkedBorder?: BorderProp<T>;
focusWithinBorder?: BorderProp<T>;
hoverBorder?: BorderProp<T>;
focusBorder?: BorderProp<T>;
focusVisibleBorder?: BorderProp<T>;
activeBorder?: BorderProp<T>;
disabledBorder?: BorderProp<T>;
placeholderBorder?: BorderProp<T>;
}
export declare const border: import("../types").StyleGenerator<BorderProps<{}>>;
export interface BorderTopProps<T = {}> {
borderTop?: SystemProperty<BorderGetter<T> | CSS.Property.BorderTop, T>;
export declare const border: import("../types").StyleGenerator;
declare type BorderColorProp<T extends ITheme> = SystemProp<ColorGetter<T> | CSS.Property.BorderColor, T>;
export interface BorderColorProps<T extends ITheme = Theme> {
borderColor?: BorderColorProp<T>;
motionSafeBorderColor?: BorderColorProp<T>;
motionReduceBorderColor?: BorderColorProp<T>;
firstBorderColor?: BorderColorProp<T>;
lastBorderColor?: BorderColorProp<T>;
oddBorderColor?: BorderColorProp<T>;
evenBorderColor?: BorderColorProp<T>;
visitedBorderColor?: BorderColorProp<T>;
checkedBorderColor?: BorderColorProp<T>;
focusWithinBorderColor?: BorderColorProp<T>;
hoverBorderColor?: BorderColorProp<T>;
focusBorderColor?: BorderColorProp<T>;
focusVisibleBorderColor?: BorderColorProp<T>;
activeBorderColor?: BorderColorProp<T>;
disabledBorderColor?: BorderColorProp<T>;
placeholderBorderColor?: BorderColorProp<T>;
}
export declare const borderTop: import("../types").StyleGenerator<BorderTopProps<{}>>;
export interface BorderTopColorProps<T = {}> {
borderTopColor?: SystemProperty<ColorGetter<T> | CSS.Property.BorderTopColor, T>;
export declare const borderColor: import("../types").StyleGenerator;
declare type BorderWidthProp<T extends ITheme> = SystemProp<BorderWidthGetter<T> | CSS.Property.BorderWidth, T>;
export interface BorderWidthProps<T extends ITheme = Theme> {
borderWidth?: BorderWidthProp<T>;
motionSafeBorderWidth?: BorderWidthProp<T>;
motionReduceBorderWidth?: BorderWidthProp<T>;
firstBorderWidth?: BorderWidthProp<T>;
lastBorderWidth?: BorderWidthProp<T>;
oddBorderWidth?: BorderWidthProp<T>;
evenBorderWidth?: BorderWidthProp<T>;
visitedBorderWidth?: BorderWidthProp<T>;
checkedBorderWidth?: BorderWidthProp<T>;
focusWithinBorderWidth?: BorderWidthProp<T>;
hoverBorderWidth?: BorderWidthProp<T>;
focusBorderWidth?: BorderWidthProp<T>;
focusVisibleBorderWidth?: BorderWidthProp<T>;
activeBorderWidth?: BorderWidthProp<T>;
disabledBorderWidth?: BorderWidthProp<T>;
placeholderBorderWidth?: BorderWidthProp<T>;
}
export declare const borderTopColor: import("../types").StyleGenerator<BorderTopColorProps<{}>>;
export interface BorderRightProps<T = {}> {
borderRight?: SystemProperty<BorderGetter<T> | CSS.Property.BorderRight, T>;
export declare const borderWidth: import("../types").StyleGenerator;
declare type BorderStyleProp<T extends ITheme> = SystemProp<BorderStyleGetter<T> | CSS.Property.BorderStyle, T>;
export interface BorderStyleProps<T extends ITheme = Theme> {
borderStyle?: BorderStyleProp<T>;
motionSafeBorderStyle?: BorderStyleProp<T>;
motionReduceBorderStyle?: BorderStyleProp<T>;
firstBorderStyle?: BorderStyleProp<T>;
lastBorderStyle?: BorderStyleProp<T>;
oddBorderStyle?: BorderStyleProp<T>;
evenBorderStyle?: BorderStyleProp<T>;
visitedBorderStyle?: BorderStyleProp<T>;
checkedBorderStyle?: BorderStyleProp<T>;
focusWithinBorderStyle?: BorderStyleProp<T>;
hoverBorderStyle?: BorderStyleProp<T>;
focusBorderStyle?: BorderStyleProp<T>;
focusVisibleBorderStyle?: BorderStyleProp<T>;
activeBorderStyle?: BorderStyleProp<T>;
disabledBorderStyle?: BorderStyleProp<T>;
placeholderBorderStyle?: BorderStyleProp<T>;
}
export declare const borderRight: import("../types").StyleGenerator<BorderRightProps<{}>>;
export interface BorderRightColorProps<T = {}> {
borderRightColor?: SystemProperty<ColorGetter<T> | CSS.Property.BorderRightColor, T>;
export declare const borderStyle: import("../types").StyleGenerator;
declare type OutlineProp<T extends ITheme> = SystemProp<BorderGetter<T> | CSS.Property.Outline, T>;
export interface OutlineProps<T extends ITheme = Theme> {
outline?: OutlineProp<T>;
motionSafeOutline?: OutlineProp<T>;
motionReduceOutline?: OutlineProp<T>;
firstOutline?: OutlineProp<T>;
lastOutline?: OutlineProp<T>;
oddOutline?: OutlineProp<T>;
evenOutline?: OutlineProp<T>;
visitedOutline?: OutlineProp<T>;
checkedOutline?: OutlineProp<T>;
focusWithinOutline?: OutlineProp<T>;
hoverOutline?: OutlineProp<T>;
focusOutline?: OutlineProp<T>;
focusVisibleOutline?: OutlineProp<T>;
activeOutline?: OutlineProp<T>;
disabledOutline?: OutlineProp<T>;
placeholderOutline?: OutlineProp<T>;
}
export declare const borderRightColor: import("../types").StyleGenerator<BorderRightColorProps<{}>>;
export interface BorderBottomProps<T = {}> {
borderBottom?: SystemProperty<BorderGetter<T> | CSS.Property.BorderBottom, T>;
export declare const outline: import("../types").StyleGenerator;
declare type OutlineColorProp<T extends ITheme> = SystemProp<ColorGetter<T> | CSS.Property.OutlineColor, T>;
export interface OutlineColorProps<T extends ITheme = Theme> {
outlineColor?: OutlineColorProp<T>;
motionSafeOutlineColor?: OutlineColorProp<T>;
motionReduceOutlineColor?: OutlineColorProp<T>;
firstOutlineColor?: OutlineColorProp<T>;
lastOutlineColor?: OutlineColorProp<T>;
oddOutlineColor?: OutlineColorProp<T>;
evenOutlineColor?: OutlineColorProp<T>;
visitedOutlineColor?: OutlineColorProp<T>;
checkedOutlineColor?: OutlineColorProp<T>;
focusWithinOutlineColor?: OutlineColorProp<T>;
hoverOutlineColor?: OutlineColorProp<T>;
focusOutlineColor?: OutlineColorProp<T>;
focusVisibleOutlineColor?: OutlineColorProp<T>;
activeOutlineColor?: OutlineColorProp<T>;
disabledOutlineColor?: OutlineColorProp<T>;
placeholderOutlineColor?: OutlineColorProp<T>;
}
export declare const borderBottom: import("../types").StyleGenerator<BorderBottomProps<{}>>;
export interface BorderBottomColorProps<T = {}> {
borderBottomColor?: SystemProperty<ColorGetter<T> | CSS.Property.BorderBottomColor, T>;
export declare const outlineColor: import("../types").StyleGenerator;
declare type OutlineWidthProp<T extends ITheme> = SystemProp<BorderWidthGetter<T> | CSS.Property.OutlineWidth, T>;
export interface OutlineWidthProps<T extends ITheme = Theme> {
outlineWidth?: OutlineWidthProp<T>;
motionSafeOutlineWidth?: OutlineWidthProp<T>;
motionReduceOutlineWidth?: OutlineWidthProp<T>;
firstOutlineWidth?: OutlineWidthProp<T>;
lastOutlineWidth?: OutlineWidthProp<T>;
oddOutlineWidth?: OutlineWidthProp<T>;
evenOutlineWidth?: OutlineWidthProp<T>;
visitedOutlineWidth?: OutlineWidthProp<T>;
checkedOutlineWidth?: OutlineWidthProp<T>;
focusWithinOutlineWidth?: OutlineWidthProp<T>;
hoverOutlineWidth?: OutlineWidthProp<T>;
focusOutlineWidth?: OutlineWidthProp<T>;
focusVisibleOutlineWidth?: OutlineWidthProp<T>;
activeOutlineWidth?: OutlineWidthProp<T>;
disabledOutlineWidth?: OutlineWidthProp<T>;
placeholderOutlineWidth?: OutlineWidthProp<T>;
}
export declare const borderBottomColor: import("../types").StyleGenerator<BorderBottomColorProps<{}>>;
export interface BorderLeftProps<T = {}> {
borderLeft?: SystemProperty<BorderGetter<T> | CSS.Property.BorderLeft, T>;
export declare const outlineWidth: import("../types").StyleGenerator;
declare type OutlineStyleProp<T extends ITheme> = SystemProp<BorderStyleGetter<T> | CSS.Property.OutlineStyle, T>;
export interface OutlineStyleProps<T extends ITheme = Theme> {
outlineStyle?: OutlineStyleProp<T>;
motionSafeOutlineStyle?: OutlineStyleProp<T>;
motionReduceOutlineStyle?: OutlineStyleProp<T>;
firstOutlineStyle?: OutlineStyleProp<T>;
lastOutlineStyle?: OutlineStyleProp<T>;
oddOutlineStyle?: OutlineStyleProp<T>;
evenOutlineStyle?: OutlineStyleProp<T>;
visitedOutlineStyle?: OutlineStyleProp<T>;
checkedOutlineStyle?: OutlineStyleProp<T>;
focusWithinOutlineStyle?: OutlineStyleProp<T>;
hoverOutlineStyle?: OutlineStyleProp<T>;
focusOutlineStyle?: OutlineStyleProp<T>;
focusVisibleOutlineStyle?: OutlineStyleProp<T>;
activeOutlineStyle?: OutlineStyleProp<T>;
disabledOutlineStyle?: OutlineStyleProp<T>;
placeholderOutlineStyle?: OutlineStyleProp<T>;
}
export declare const borderLeft: import("../types").StyleGenerator<BorderLeftProps<{}>>;
export interface BorderLeftColorProps<T = {}> {
borderLeftColor?: SystemProperty<ColorGetter | CSS.Property.BorderLeftColor, T>;
export declare const outlineStyle: import("../types").StyleGenerator;
export declare type RadiusGetter<T extends ITheme = Theme> = VariantsType<T['radii']>;
export declare const getRadius: import("../types").ThemeGetter<unknown>;
declare type BorderRadiusProp<T extends ITheme> = SystemProp<RadiusGetter<T> | CSS.Property.BorderRadius, T>;
export interface BorderRadiusProps<T extends ITheme = Theme> {
borderRadius?: BorderRadiusProp<T>;
motionSafeBorderRadius?: BorderRadiusProp<T>;
motionReduceBorderRadius?: BorderRadiusProp<T>;
firstBorderRadius?: BorderRadiusProp<T>;
lastBorderRadius?: BorderRadiusProp<T>;
oddBorderRadius?: BorderRadiusProp<T>;
evenBorderRadius?: BorderRadiusProp<T>;
visitedBorderRadius?: BorderRadiusProp<T>;
checkedBorderRadius?: BorderRadiusProp<T>;
focusWithinBorderRadius?: BorderRadiusProp<T>;
hoverBorderRadius?: BorderRadiusProp<T>;
focusBorderRadius?: BorderRadiusProp<T>;
focusVisibleBorderRadius?: BorderRadiusProp<T>;
activeBorderRadius?: BorderRadiusProp<T>;
disabledBorderRadius?: BorderRadiusProp<T>;
placeholderBorderRadius?: BorderRadiusProp<T>;
}
export declare const borderLeftColor: import("../types").StyleGenerator<BorderLeftColorProps<{}>>;
export interface BorderColorProps<T = {}> {
borderColor?: SystemProperty<ColorGetter | CSS.Property.BorderColor, T>;
export declare const borderRadius: import("../types").StyleGenerator;
declare type DivideYProp<T extends ITheme> = SystemProp<BorderWidthGetter<T>, T>;
export interface DivideYProps<T extends ITheme = Theme> {
divideY?: DivideYProp<T>;
motionSafeDivideY?: DivideYProp<T>;
motionReduceDivideY?: DivideYProp<T>;
firstDivideY?: DivideYProp<T>;
lastDivideY?: DivideYProp<T>;
oddDivideY?: DivideYProp<T>;
evenDivideY?: DivideYProp<T>;
visitedDivideY?: DivideYProp<T>;
checkedDivideY?: DivideYProp<T>;
focusWithinDivideY?: DivideYProp<T>;
hoverDivideY?: DivideYProp<T>;
focusDivideY?: DivideYProp<T>;
focusVisibleDivideY?: DivideYProp<T>;
activeDivideY?: DivideYProp<T>;
disabledDivideY?: DivideYProp<T>;
placeholderDivideY?: DivideYProp<T>;
}
export declare const borderColor: import("../types").StyleGenerator<BorderColorProps<{}>>;
export interface BorderWidthProps<T = {}> {
borderWidth?: SystemProperty<BorderWidthGetter<T> | CSS.Property.BorderWidth, T>;
export declare const divideY: import("../types").StyleGenerator;
declare type DivideXProp<T extends ITheme> = SystemProp<BorderWidthGetter<T>, T>;
export interface DivideXProps<T extends ITheme = Theme> {
divideX?: DivideXProp<T>;
motionSafeDivideX?: DivideXProp<T>;
motionReduceDivideX?: DivideXProp<T>;
firstDivideX?: DivideXProp<T>;
lastDivideX?: DivideXProp<T>;
oddDivideX?: DivideXProp<T>;
evenDivideX?: DivideXProp<T>;
visitedDivideX?: DivideXProp<T>;
checkedDivideX?: DivideXProp<T>;
focusWithinDivideX?: DivideXProp<T>;
hoverDivideX?: DivideXProp<T>;
focusDivideX?: DivideXProp<T>;
focusVisibleDivideX?: DivideXProp<T>;
activeDivideX?: DivideXProp<T>;
disabledDivideX?: DivideXProp<T>;
placeholderDivideX?: DivideXProp<T>;
}
export declare const borderWidth: import("../types").StyleGenerator<BorderWidthProps<{}>>;
export interface BorderStyleProps<T = {}> {
borderStyle?: SystemProperty<BorderStyleGetter<T> | CSS.Property.BorderStyle, T>;
export declare const divideX: import("../types").StyleGenerator;
declare type DivideXReverseProp<T extends ITheme> = SystemProp<boolean, T>;
export interface DivideXReverseProps<T extends ITheme = Theme> {
divideXReverse?: DivideXReverseProp<T>;
motionSafeDivideXReverse?: DivideXReverseProp<T>;
motionReduceDivideXReverse?: DivideXReverseProp<T>;
firstDivideXReverse?: DivideXReverseProp<T>;
lastDivideXReverse?: DivideXReverseProp<T>;
oddDivideXReverse?: DivideXReverseProp<T>;
evenDivideXReverse?: DivideXReverseProp<T>;
visitedDivideXReverse?: DivideXReverseProp<T>;
checkedDivideXReverse?: DivideXReverseProp<T>;
focusWithinDivideXReverse?: DivideXReverseProp<T>;
hoverDivideXReverse?: DivideXReverseProp<T>;
focusDivideXReverse?: DivideXReverseProp<T>;
focusVisibleDivideXReverse?: DivideXReverseProp<T>;
activeDivideXReverse?: DivideXReverseProp<T>;
disabledDivideXReverse?: DivideXReverseProp<T>;
placeholderDivideXReverse?: DivideXReverseProp<T>;
}
export declare const borderStyle: import("../types").StyleGenerator<BorderStyleProps<{}>>;
export interface BorderRadiusProps<T = {}> {
borderRadius?: SystemProperty<RadiusGetter<T> | CSS.Property.BorderRadius, T>;
export declare const divideXReverse: import("../types").StyleGenerator;
declare type DivideYReverseProp<T extends ITheme> = SystemProp<boolean, T>;
export interface DivideYReverseProps<T extends ITheme = Theme> {
divideYReverse?: DivideYReverseProp<T>;
motionSafeDivideYReverse?: DivideYReverseProp<T>;
motionReduceDivideYReverse?: DivideYReverseProp<T>;
firstDivideYReverse?: DivideYReverseProp<T>;
lastDivideYReverse?: DivideYReverseProp<T>;
oddDivideYReverse?: DivideYReverseProp<T>;
evenDivideYReverse?: DivideYReverseProp<T>;
visitedDivideYReverse?: DivideYReverseProp<T>;
checkedDivideYReverse?: DivideYReverseProp<T>;
focusWithinDivideYReverse?: DivideYReverseProp<T>;
hoverDivideYReverse?: DivideYReverseProp<T>;
focusDivideYReverse?: DivideYReverseProp<T>;
focusVisibleDivideYReverse?: DivideYReverseProp<T>;
activeDivideYReverse?: DivideYReverseProp<T>;
disabledDivideYReverse?: DivideYReverseProp<T>;
placeholderDivideYReverse?: DivideYReverseProp<T>;
}
export declare const borderRadius: import("../types").StyleGenerator<BorderRadiusProps<{}>>;
export declare type BordersProps<T = {}> = BorderProps<T> & BorderTopProps<T> & BorderTopColorProps<T> & BorderRightProps<T> & BorderRightColorProps<T> & BorderBottomProps<T> & BorderBottomColorProps<T> & BorderLeftProps<T> & BorderLeftColorProps<T> & BorderColorProps<T> & BorderWidthProps<T> & BorderStyleProps<T> & BorderRadiusProps<T>;
export declare const borders: import("../types").StyleGenerator<BordersProps<{}>>;
export declare const divideYReverse: import("../types").StyleGenerator;
declare type DivideColorProp<T extends ITheme> = SystemProp<ColorGetter<T> | CSS.Property.BorderColor, T>;
export interface DivideColorProps<T extends ITheme = Theme> {
divideColor?: DivideColorProp<T>;
motionSafeDivideColor?: DivideColorProp<T>;
motionReduceDivideColor?: DivideColorProp<T>;
firstDivideColor?: DivideColorProp<T>;
lastDivideColor?: DivideColorProp<T>;
oddDivideColor?: DivideColorProp<T>;
evenDivideColor?: DivideColorProp<T>;
visitedDivideColor?: DivideColorProp<T>;
checkedDivideColor?: DivideColorProp<T>;
focusWithinDivideColor?: DivideColorProp<T>;
hoverDivideColor?: DivideColorProp<T>;
focusDivideColor?: DivideColorProp<T>;
focusVisibleDivideColor?: DivideColorProp<T>;
activeDivideColor?: DivideColorProp<T>;
disabledDivideColor?: DivideColorProp<T>;
placeholderDivideColor?: DivideColorProp<T>;
}
export declare const divideColor: import("../types").StyleGenerator;
declare type DivideStyleProp<T extends ITheme> = SystemProp<BorderStyleGetter<T> | CSS.Property.BorderStyle, T>;
export interface DivideStyleProps<T extends ITheme = Theme> {
divideStyle?: DivideStyleProp<T>;
motionSafeDivideStyle?: DivideStyleProp<T>;
motionReduceDivideStyle?: DivideStyleProp<T>;
firstDivideStyle?: DivideStyleProp<T>;
lastDivideStyle?: DivideStyleProp<T>;
oddDivideStyle?: DivideStyleProp<T>;
evenDivideStyle?: DivideStyleProp<T>;
visitedDivideStyle?: DivideStyleProp<T>;
checkedDivideStyle?: DivideStyleProp<T>;
focusWithinDivideStyle?: DivideStyleProp<T>;
hoverDivideStyle?: DivideStyleProp<T>;
focusDivideStyle?: DivideStyleProp<T>;
focusVisibleDivideStyle?: DivideStyleProp<T>;
activeDivideStyle?: DivideStyleProp<T>;
disabledDivideStyle?: DivideStyleProp<T>;
placeholderDivideStyle?: DivideStyleProp<T>;
}
export declare const divideStyle: import("../types").StyleGenerator;
export declare type RingWidthGetter<T extends ITheme = Theme> = VariantsType<T['ringWidths']>;
export declare const getRingWidth: import("../types").ThemeGetter<unknown>;
declare type RingProp<T extends ITheme> = SystemProp<RingWidthGetter<T>, T>;
export interface RingProps<T extends ITheme = Theme> {
ring?: RingProp<T>;
motionSafeRing?: RingProp<T>;
motionReduceRing?: RingProp<T>;
firstRing?: RingProp<T>;
lastRing?: RingProp<T>;
oddRing?: RingProp<T>;
evenRing?: RingProp<T>;
visitedRing?: RingProp<T>;
checkedRing?: RingProp<T>;
focusWithinRing?: RingProp<T>;
hoverRing?: RingProp<T>;
focusRing?: RingProp<T>;
focusVisibleRing?: RingProp<T>;
activeRing?: RingProp<T>;
disabledRing?: RingProp<T>;
placeholderRing?: RingProp<T>;
}
export declare const ring: import("../types").StyleGenerator;
declare type RingInsetProp<T extends ITheme> = SystemProp<boolean, T>;
export interface RingInsetProps<T extends ITheme = Theme> {
ringInset?: RingInsetProp<T>;
motionSafeRingInset?: RingInsetProp<T>;
motionReduceRingInset?: RingInsetProp<T>;
firstRingInset?: RingInsetProp<T>;
lastRingInset?: RingInsetProp<T>;
oddRingInset?: RingInsetProp<T>;
evenRingInset?: RingInsetProp<T>;
visitedRingInset?: RingInsetProp<T>;
checkedRingInset?: RingInsetProp<T>;
focusWithinRingInset?: RingInsetProp<T>;
hoverRingInset?: RingInsetProp<T>;
focusRingInset?: RingInsetProp<T>;
focusVisibleRingInset?: RingInsetProp<T>;
activeRingInset?: RingInsetProp<T>;
disabledRingInset?: RingInsetProp<T>;
placeholderRingInset?: RingInsetProp<T>;
}
export declare const ringInset: import("../types").StyleGenerator;
declare type RingColorProp<T extends ITheme> = SystemProp<ColorGetter<T>, T>;
export interface RingColorProps<T extends ITheme = Theme> {
ringColor?: RingColorProp<T>;
motionSafeRingColor?: RingColorProp<T>;
motionReduceRingColor?: RingColorProp<T>;
firstRingColor?: RingColorProp<T>;
lastRingColor?: RingColorProp<T>;
oddRingColor?: RingColorProp<T>;
evenRingColor?: RingColorProp<T>;
visitedRingColor?: RingColorProp<T>;
checkedRingColor?: RingColorProp<T>;
focusWithinRingColor?: RingColorProp<T>;
hoverRingColor?: RingColorProp<T>;
focusRingColor?: RingColorProp<T>;
focusVisibleRingColor?: RingColorProp<T>;
activeRingColor?: RingColorProp<T>;
disabledRingColor?: RingColorProp<T>;
placeholderRingColor?: RingColorProp<T>;
}
export declare const ringColor: import("../types").StyleGenerator;
export declare type BordersProps<T extends ITheme> = BorderProps<T> & BorderColorProps<T> & BorderWidthProps<T> & BorderStyleProps<T> & BorderRadiusProps<T> & OutlineProps<T> & OutlineColorProps<T> & OutlineWidthProps<T> & OutlineStyleProps<T> & DivideXProps<T> & DivideYProps<T> & DivideXReverseProps<T> & DivideYReverseProps<T> & DivideColorProps<T> & DivideStyleProps<T> & RingProps<T> & RingInsetProps<T> & RingColorProps<T>;
export declare const borders: import("../types").StyleGenerator;
export {};

293

dist/styles/flexboxes.d.ts
import * as CSS from 'csstype';
import { DisplayProps } from './layout';
import { SystemProperty } from '../types';
export interface AlignItemsProps<T = {}> {
alignItems?: SystemProperty<CSS.Property.AlignItems, T>;
import { SystemProp, ITheme, Theme } from '../types';
declare type AlignItemsProp<T extends ITheme> = SystemProp<CSS.Property.AlignItems, T>;
export interface AlignItemsProps<T extends ITheme = Theme> {
alignItems?: AlignItemsProp<T>;
motionSafeAlignItems?: AlignItemsProp<T>;
motionReduceAlignItems?: AlignItemsProp<T>;
firstAlignItems?: AlignItemsProp<T>;
lastAlignItems?: AlignItemsProp<T>;
oddAlignItems?: AlignItemsProp<T>;
evenAlignItems?: AlignItemsProp<T>;
visitedAlignItems?: AlignItemsProp<T>;
checkedAlignItems?: AlignItemsProp<T>;
focusWithinAlignItems?: AlignItemsProp<T>;
hoverAlignItems?: AlignItemsProp<T>;
focusAlignItems?: AlignItemsProp<T>;
focusVisibleAlignItems?: AlignItemsProp<T>;
activeAlignItems?: AlignItemsProp<T>;
disabledAlignItems?: AlignItemsProp<T>;
placeholderAlignItems?: AlignItemsProp<T>;
}
export declare const alignItems: import("../types").StyleGenerator<AlignItemsProps<{}>>;
export interface AlignContentProps<T = {}> {
alignContent?: SystemProperty<CSS.Property.AlignContent, T>;
export declare const alignItems: import("../types").StyleGenerator;
declare type AlignContentProp<T extends ITheme> = SystemProp<CSS.Property.AlignContent, T>;
export interface AlignContentProps<T extends ITheme = Theme> {
alignContent?: AlignContentProp<T>;
motionSafeAlignContent?: AlignContentProp<T>;
motionReduceAlignContent?: AlignContentProp<T>;
firstAlignContent?: AlignContentProp<T>;
lastAlignContent?: AlignContentProp<T>;
oddAlignContent?: AlignContentProp<T>;
evenAlignContent?: AlignContentProp<T>;
visitedAlignContent?: AlignContentProp<T>;
checkedAlignContent?: AlignContentProp<T>;
focusWithinAlignContent?: AlignContentProp<T>;
hoverAlignContent?: AlignContentProp<T>;
focusAlignContent?: AlignContentProp<T>;
focusVisibleAlignContent?: AlignContentProp<T>;
activeAlignContent?: AlignContentProp<T>;
disabledAlignContent?: AlignContentProp<T>;
placeholderAlignContent?: AlignContentProp<T>;
}
export declare const alignContent: import("../types").StyleGenerator<AlignContentProps<{}>>;
export interface JustifyContentProps<T = {}> {
justifyContent?: SystemProperty<CSS.Property.JustifyContent, T>;
export declare const alignContent: import("../types").StyleGenerator;
declare type JustifyContentProp<T extends ITheme> = SystemProp<CSS.Property.JustifyContent, T>;
export interface JustifyContentProps<T extends ITheme = Theme> {
justifyContent?: JustifyContentProp<T>;
motionSafeJustifyContent?: JustifyContentProp<T>;
motionReduceJustifyContent?: JustifyContentProp<T>;
firstJustifyContent?: JustifyContentProp<T>;
lastJustifyContent?: JustifyContentProp<T>;
oddJustifyContent?: JustifyContentProp<T>;
evenJustifyContent?: JustifyContentProp<T>;
visitedJustifyContent?: JustifyContentProp<T>;
checkedJustifyContent?: JustifyContentProp<T>;
focusWithinJustifyContent?: JustifyContentProp<T>;
hoverJustifyContent?: JustifyContentProp<T>;
focusJustifyContent?: JustifyContentProp<T>;
focusVisibleJustifyContent?: JustifyContentProp<T>;
activeJustifyContent?: JustifyContentProp<T>;
disabledJustifyContent?: JustifyContentProp<T>;
placeholderJustifyContent?: JustifyContentProp<T>;
}
export declare const justifyContent: import("../types").StyleGenerator<JustifyContentProps<{}>>;
export interface JustifyItemsProps<T = {}> {
justifyItems?: SystemProperty<CSS.Property.JustifyItems, T>;
export declare const justifyContent: import("../types").StyleGenerator;
declare type JustifyItemsProp<T extends ITheme> = SystemProp<CSS.Property.JustifyItems, T>;
export interface JustifyItemsProps<T extends ITheme = Theme> {
justifyItems?: JustifyItemsProp<T>;
motionSafeJustifyItems?: JustifyItemsProp<T>;
motionReduceJustifyItems?: JustifyItemsProp<T>;
firstJustifyItems?: JustifyItemsProp<T>;
lastJustifyItems?: JustifyItemsProp<T>;
oddJustifyItems?: JustifyItemsProp<T>;
evenJustifyItems?: JustifyItemsProp<T>;
visitedJustifyItems?: JustifyItemsProp<T>;
checkedJustifyItems?: JustifyItemsProp<T>;
focusWithinJustifyItems?: JustifyItemsProp<T>;
hoverJustifyItems?: JustifyItemsProp<T>;
focusJustifyItems?: JustifyItemsProp<T>;
focusVisibleJustifyItems?: JustifyItemsProp<T>;
activeJustifyItems?: JustifyItemsProp<T>;
disabledJustifyItems?: JustifyItemsProp<T>;
placeholderJustifyItems?: JustifyItemsProp<T>;
}
export declare const justifyItems: import("../types").StyleGenerator<JustifyItemsProps<{}>>;
export interface FlexWrapProps<T = {}> {
flexWrap?: SystemProperty<CSS.Property.FlexWrap, T>;
export declare const justifyItems: import("../types").StyleGenerator;
declare type FlexWrapProp<T extends ITheme> = SystemProp<CSS.Property.FlexWrap, T>;
export interface FlexWrapProps<T extends ITheme = Theme> {
flexWrap?: FlexWrapProp<T>;
motionSafeFlexWrap?: FlexWrapProp<T>;
motionReduceFlexWrap?: FlexWrapProp<T>;
firstFlexWrap?: FlexWrapProp<T>;
lastFlexWrap?: FlexWrapProp<T>;
oddFlexWrap?: FlexWrapProp<T>;
evenFlexWrap?: FlexWrapProp<T>;
visitedFlexWrap?: FlexWrapProp<T>;
checkedFlexWrap?: FlexWrapProp<T>;
focusWithinFlexWrap?: FlexWrapProp<T>;
hoverFlexWrap?: FlexWrapProp<T>;
focusFlexWrap?: FlexWrapProp<T>;
focusVisibleFlexWrap?: FlexWrapProp<T>;
activeFlexWrap?: FlexWrapProp<T>;
disabledFlexWrap?: FlexWrapProp<T>;
placeholderFlexWrap?: FlexWrapProp<T>;
}
export declare const flexWrap: import("../types").StyleGenerator<FlexWrapProps<{}>>;
export interface FlexGrowProps<T = {}> {
flexGrow?: SystemProperty<CSS.Property.FlexGrow, T>;
export declare const flexWrap: import("../types").StyleGenerator;
declare type FlexGrowProp<T extends ITheme> = SystemProp<CSS.Property.FlexGrow, T>;
export interface FlexGrowProps<T extends ITheme = Theme> {
flexGrow?: FlexGrowProp<T>;
motionSafeFlexGrow?: FlexGrowProp<T>;
motionReduceFlexGrow?: FlexGrowProp<T>;
firstFlexGrow?: FlexGrowProp<T>;
lastFlexGrow?: FlexGrowProp<T>;
oddFlexGrow?: FlexGrowProp<T>;
evenFlexGrow?: FlexGrowProp<T>;
visitedFlexGrow?: FlexGrowProp<T>;
checkedFlexGrow?: FlexGrowProp<T>;
focusWithinFlexGrow?: FlexGrowProp<T>;
hoverFlexGrow?: FlexGrowProp<T>;
focusFlexGrow?: FlexGrowProp<T>;
focusVisibleFlexGrow?: FlexGrowProp<T>;
activeFlexGrow?: FlexGrowProp<T>;
disabledFlexGrow?: FlexGrowProp<T>;
placeholderFlexGrow?: FlexGrowProp<T>;
}
export declare const flexGrow: import("../types").StyleGenerator<FlexGrowProps<{}>>;
export interface FlexShrinkProps<T = {}> {
flexShrink?: SystemProperty<CSS.Property.FlexShrink, T>;
export declare const flexGrow: import("../types").StyleGenerator;
declare type FlexShrinkProp<T extends ITheme> = SystemProp<CSS.Property.FlexShrink, T>;
export interface FlexShrinkProps<T extends ITheme = Theme> {
flexShrink?: FlexShrinkProp<T>;
motionSafeFlexShrink?: FlexShrinkProp<T>;
motionReduceFlexShrink?: FlexShrinkProp<T>;
firstFlexShrink?: FlexShrinkProp<T>;
lastFlexShrink?: FlexShrinkProp<T>;
oddFlexShrink?: FlexShrinkProp<T>;
evenFlexShrink?: FlexShrinkProp<T>;
visitedFlexShrink?: FlexShrinkProp<T>;
checkedFlexShrink?: FlexShrinkProp<T>;
focusWithinFlexShrink?: FlexShrinkProp<T>;
hoverFlexShrink?: FlexShrinkProp<T>;
focusFlexShrink?: FlexShrinkProp<T>;
focusVisibleFlexShrink?: FlexShrinkProp<T>;
activeFlexShrink?: FlexShrinkProp<T>;
disabledFlexShrink?: FlexShrinkProp<T>;
placeholderFlexShrink?: FlexShrinkProp<T>;
}
export declare const flexShrink: import("../types").StyleGenerator<FlexShrinkProps<{}>>;
export interface FlexBasisProps<T = {}> {
flexBasis?: SystemProperty<CSS.Property.FlexBasis, T>;
export declare const flexShrink: import("../types").StyleGenerator;
declare type FlexBasisProp<T extends ITheme> = SystemProp<CSS.Property.FlexBasis, T>;
export interface FlexBasisProps<T extends ITheme = Theme> {
flexBasis?: FlexBasisProp<T>;
motionSafeFlexBasis?: FlexBasisProp<T>;
motionReduceFlexBasis?: FlexBasisProp<T>;
firstFlexBasis?: FlexBasisProp<T>;
lastFlexBasis?: FlexBasisProp<T>;
oddFlexBasis?: FlexBasisProp<T>;
evenFlexBasis?: FlexBasisProp<T>;
visitedFlexBasis?: FlexBasisProp<T>;
checkedFlexBasis?: FlexBasisProp<T>;
focusWithinFlexBasis?: FlexBasisProp<T>;
hoverFlexBasis?: FlexBasisProp<T>;
focusFlexBasis?: FlexBasisProp<T>;
focusVisibleFlexBasis?: FlexBasisProp<T>;
activeFlexBasis?: FlexBasisProp<T>;
disabledFlexBasis?: FlexBasisProp<T>;
placeholderFlexBasis?: FlexBasisProp<T>;
}
export declare const flexBasis: import("../types").StyleGenerator<FlexBasisProps<{}>>;
export interface FlexDirectionProps<T = {}> {
flexDirection?: SystemProperty<CSS.Property.FlexDirection, T>;
export declare const flexBasis: import("../types").StyleGenerator;
declare type FlexDirectionProp<T extends ITheme> = SystemProp<CSS.Property.FlexDirection, T>;
export interface FlexDirectionProps<T extends ITheme = Theme> {
flexDirection?: FlexDirectionProp<T>;
motionSafeFlexDirection?: FlexDirectionProp<T>;
motionReduceFlexDirection?: FlexDirectionProp<T>;
firstFlexDirection?: FlexDirectionProp<T>;
lastFlexDirection?: FlexDirectionProp<T>;
oddFlexDirection?: FlexDirectionProp<T>;
evenFlexDirection?: FlexDirectionProp<T>;
visitedFlexDirection?: FlexDirectionProp<T>;
checkedFlexDirection?: FlexDirectionProp<T>;
focusWithinFlexDirection?: FlexDirectionProp<T>;
hoverFlexDirection?: FlexDirectionProp<T>;
focusFlexDirection?: FlexDirectionProp<T>;
focusVisibleFlexDirection?: FlexDirectionProp<T>;
activeFlexDirection?: FlexDirectionProp<T>;
disabledFlexDirection?: FlexDirectionProp<T>;
placeholderFlexDirection?: FlexDirectionProp<T>;
}
export declare const flexDirection: import("../types").StyleGenerator<FlexDirectionProps<{}>>;
export interface FlexProps<T = {}> {
flex?: SystemProperty<CSS.Property.Flex, T>;
export declare const flexDirection: import("../types").StyleGenerator;
declare type FlexProp<T extends ITheme> = SystemProp<CSS.Property.Flex, T>;
export interface FlexProps<T extends ITheme = Theme> {
flex?: FlexProp<T>;
motionSafeFlex?: FlexProp<T>;
motionReduceFlex?: FlexProp<T>;
firstFlex?: FlexProp<T>;
lastFlex?: FlexProp<T>;
oddFlex?: FlexProp<T>;
evenFlex?: FlexProp<T>;
visitedFlex?: FlexProp<T>;
checkedFlex?: FlexProp<T>;
focusWithinFlex?: FlexProp<T>;
hoverFlex?: FlexProp<T>;
focusFlex?: FlexProp<T>;
focusVisibleFlex?: FlexProp<T>;
activeFlex?: FlexProp<T>;
disabledFlex?: FlexProp<T>;
placeholderFlex?: FlexProp<T>;
}
export declare const flex: import("../types").StyleGenerator<FlexProps<{}>>;
export interface JustifySelfProps<T = {}> {
justifySelf?: SystemProperty<CSS.Property.JustifySelf, T>;
export declare const flex: import("../types").StyleGenerator;
declare type JustifySelfProp<T extends ITheme> = SystemProp<CSS.Property.JustifySelf, T>;
export interface JustifySelfProps<T extends ITheme = Theme> {
justifySelf?: JustifySelfProp<T>;
motionSafeJustifySelf?: JustifySelfProp<T>;
motionReduceJustifySelf?: JustifySelfProp<T>;
firstJustifySelf?: JustifySelfProp<T>;
lastJustifySelf?: JustifySelfProp<T>;
oddJustifySelf?: JustifySelfProp<T>;
evenJustifySelf?: JustifySelfProp<T>;
visitedJustifySelf?: JustifySelfProp<T>;
checkedJustifySelf?: JustifySelfProp<T>;
focusWithinJustifySelf?: JustifySelfProp<T>;
hoverJustifySelf?: JustifySelfProp<T>;
focusJustifySelf?: JustifySelfProp<T>;
focusVisibleJustifySelf?: JustifySelfProp<T>;
activeJustifySelf?: JustifySelfProp<T>;
disabledJustifySelf?: JustifySelfProp<T>;
placeholderJustifySelf?: JustifySelfProp<T>;
}
export declare const justifySelf: import("../types").StyleGenerator<JustifySelfProps<{}>>;
export interface AlignSelfProps<T = {}> {
alignSelf?: SystemProperty<CSS.Property.AlignSelf, T>;
export declare const justifySelf: import("../types").StyleGenerator;
declare type AlignSelfProp<T extends ITheme> = SystemProp<CSS.Property.AlignSelf, T>;
export interface AlignSelfProps<T extends ITheme = Theme> {
alignSelf?: AlignSelfProp<T>;
motionSafeAlignSelf?: AlignSelfProp<T>;
motionReduceAlignSelf?: AlignSelfProp<T>;
firstAlignSelf?: AlignSelfProp<T>;
lastAlignSelf?: AlignSelfProp<T>;
oddAlignSelf?: AlignSelfProp<T>;
evenAlignSelf?: AlignSelfProp<T>;
visitedAlignSelf?: AlignSelfProp<T>;
checkedAlignSelf?: AlignSelfProp<T>;
focusWithinAlignSelf?: AlignSelfProp<T>;
hoverAlignSelf?: AlignSelfProp<T>;
focusAlignSelf?: AlignSelfProp<T>;
focusVisibleAlignSelf?: AlignSelfProp<T>;
activeAlignSelf?: AlignSelfProp<T>;
disabledAlignSelf?: AlignSelfProp<T>;
placeholderAlignSelf?: AlignSelfProp<T>;
}
export declare const alignSelf: import("../types").StyleGenerator<AlignSelfProps<{}>>;
export interface OrderProps<T = {}> {
order?: SystemProperty<CSS.Property.Order, T>;
export declare const alignSelf: import("../types").StyleGenerator;
declare type OrderProp<T extends ITheme> = SystemProp<CSS.Property.Order, T>;
export interface OrderProps<T extends ITheme = Theme> {
order?: OrderProp<T>;
motionSafeOrder?: OrderProp<T>;
motionReduceOrder?: OrderProp<T>;
firstOrder?: OrderProp<T>;
lastOrder?: OrderProp<T>;
oddOrder?: OrderProp<T>;
evenOrder?: OrderProp<T>;
visitedOrder?: OrderProp<T>;
checkedOrder?: OrderProp<T>;
focusWithinOrder?: OrderProp<T>;
hoverOrder?: OrderProp<T>;
focusOrder?: OrderProp<T>;
focusVisibleOrder?: OrderProp<T>;
activeOrder?: OrderProp<T>;
disabledOrder?: OrderProp<T>;
placeholderOrder?: OrderProp<T>;
}
export declare const order: import("../types").StyleGenerator<OrderProps<{}>>;
export declare type FlexBoxesProps<T = {}> = DisplayProps<T> & AlignItemsProps<T> & JustifyContentProps<T> & JustifyItemsProps<T> & FlexWrapProps<T> & FlexWrapProps<T> & FlexShrinkProps<T> & FlexGrowProps<T> & FlexDirectionProps<T> & FlexProps<T> & JustifySelfProps<T> & AlignSelfProps<T> & OrderProps<T>;
export declare const flexboxes: import("../types").StyleGenerator<FlexBoxesProps<{}>>;
export declare const order: import("../types").StyleGenerator;
export declare type FlexboxesProps<T extends ITheme = Theme> = DisplayProps<T> & AlignItemsProps<T> & JustifyContentProps<T> & JustifyItemsProps<T> & FlexWrapProps<T> & FlexWrapProps<T> & FlexShrinkProps<T> & FlexGrowProps<T> & FlexDirectionProps<T> & FlexProps<T> & JustifySelfProps<T> & AlignSelfProps<T> & OrderProps<T>;
export declare const flexboxes: import("../types").StyleGenerator;
export {};

271

dist/styles/grids.d.ts
import * as CSS from 'csstype';
import { SystemProperty } from '../types';
import { SystemProp, ITheme, Theme, VariantsType } from '../types';
import { SpaceGetter } from './space';
export interface GridGapProps<T = {}> {
gridGap?: SystemProperty<SpaceGetter<T> | CSS.Property.GridGap, T>;
declare type GapProp<T extends ITheme> = SystemProp<SpaceGetter<T> | CSS.Property.Gap, T>;
export interface GapProps<T extends ITheme = Theme> {
gap?: GapProp<T>;
motionSafeGap?: GapProp<T>;
motionReduceGap?: GapProp<T>;
firstGap?: GapProp<T>;
lastGap?: GapProp<T>;
oddGap?: GapProp<T>;
evenGap?: GapProp<T>;
visitedGap?: GapProp<T>;
checkedGap?: GapProp<T>;
focusWithinGap?: GapProp<T>;
hoverGap?: GapProp<T>;
focusGap?: GapProp<T>;
focusVisibleGap?: GapProp<T>;
activeGap?: GapProp<T>;
disabledGap?: GapProp<T>;
placeholderGap?: GapProp<T>;
}
export declare const gridGap: import("../types").StyleGenerator<GridGapProps<{}>>;
export interface GridColumnGapProps<T = {}> {
gridColumnGap?: SystemProperty<SpaceGetter<T> | CSS.Property.GridColumnGap, T>;
export declare const gap: import("../types").StyleGenerator;
declare type ColumnGapProp<T extends ITheme> = SystemProp<SpaceGetter<T> | CSS.Property.ColumnGap, T>;
export interface ColumnGapProps<T extends ITheme = Theme> {
columnGap?: ColumnGapProp<T>;
motionSafeColumnGap?: ColumnGapProp<T>;
motionReduceColumnGap?: ColumnGapProp<T>;
firstColumnGap?: ColumnGapProp<T>;
lastColumnGap?: ColumnGapProp<T>;
oddColumnGap?: ColumnGapProp<T>;
evenColumnGap?: ColumnGapProp<T>;
visitedColumnGap?: ColumnGapProp<T>;
checkedColumnGap?: ColumnGapProp<T>;
focusWithinColumnGap?: ColumnGapProp<T>;
hoverColumnGap?: ColumnGapProp<T>;
focusColumnGap?: ColumnGapProp<T>;
focusVisibleColumnGap?: ColumnGapProp<T>;
activeColumnGap?: ColumnGapProp<T>;
disabledColumnGap?: ColumnGapProp<T>;
placeholderColumnGap?: ColumnGapProp<T>;
}
export declare const gridColumnGap: import("../types").StyleGenerator<GridColumnGapProps<{}>>;
export interface GridRowGapProps<T = {}> {
gridRowGap?: SystemProperty<SpaceGetter<T> | CSS.Property.GridRowGap, T>;
export declare const columnGap: import("../types").StyleGenerator;
declare type RowGapProp<T extends ITheme> = SystemProp<SpaceGetter<T> | CSS.Property.RowGap, T>;
export interface RowGapProps<T extends ITheme = Theme> {
rowGap?: RowGapProp<T>;
motionSafeRowGap?: RowGapProp<T>;
motionReduceRowGap?: RowGapProp<T>;
firstRowGap?: RowGapProp<T>;
lastRowGap?: RowGapProp<T>;
oddRowGap?: RowGapProp<T>;
evenRowGap?: RowGapProp<T>;
visitedRowGap?: RowGapProp<T>;
checkedRowGap?: RowGapProp<T>;
focusWithinRowGap?: RowGapProp<T>;
hoverRowGap?: RowGapProp<T>;
focusRowGap?: RowGapProp<T>;
focusVisibleRowGap?: RowGapProp<T>;
activeRowGap?: RowGapProp<T>;
disabledRowGap?: RowGapProp<T>;
placeholderRowGap?: RowGapProp<T>;
}
export declare const gridRowGap: import("../types").StyleGenerator<GridRowGapProps<{}>>;
export interface GridColumnProps<T = {}> {
gridColumn?: SystemProperty<CSS.Property.GridColumn, T>;
export declare const rowGap: import("../types").StyleGenerator;
declare type GridColumnProp<T extends ITheme> = SystemProp<CSS.Property.GridColumn, T>;
export interface GridColumnProps<T extends ITheme = Theme> {
gridColumn?: GridColumnProp<T>;
motionSafeGridColumn?: GridColumnProp<T>;
motionReduceGridColumn?: GridColumnProp<T>;
firstGridColumn?: GridColumnProp<T>;
lastGridColumn?: GridColumnProp<T>;
oddGridColumn?: GridColumnProp<T>;
evenGridColumn?: GridColumnProp<T>;
visitedGridColumn?: GridColumnProp<T>;
checkedGridColumn?: GridColumnProp<T>;
focusWithinGridColumn?: GridColumnProp<T>;
hoverGridColumn?: GridColumnProp<T>;
focusGridColumn?: GridColumnProp<T>;
focusVisibleGridColumn?: GridColumnProp<T>;
activeGridColumn?: GridColumnProp<T>;
disabledGridColumn?: GridColumnProp<T>;
placeholderGridColumn?: GridColumnProp<T>;
}
export declare const gridColumn: import("../types").StyleGenerator<GridColumnProps<{}>>;
export interface GridRowProps<T = {}> {
gridRow?: SystemProperty<CSS.Property.GridRow, T>;
export declare const gridColumn: import("../types").StyleGenerator;
declare type GridRowProp<T extends ITheme> = SystemProp<CSS.Property.GridRow, T>;
export interface GridRowProps<T extends ITheme = Theme> {
gridRow?: GridRowProp<T>;
motionSafeGridRow?: GridRowProp<T>;
motionReduceGridRow?: GridRowProp<T>;
firstGridRow?: GridRowProp<T>;
lastGridRow?: GridRowProp<T>;
oddGridRow?: GridRowProp<T>;
evenGridRow?: GridRowProp<T>;
visitedGridRow?: GridRowProp<T>;
checkedGridRow?: GridRowProp<T>;
focusWithinGridRow?: GridRowProp<T>;
hoverGridRow?: GridRowProp<T>;
focusGridRow?: GridRowProp<T>;
focusVisibleGridRow?: GridRowProp<T>;
activeGridRow?: GridRowProp<T>;
disabledGridRow?: GridRowProp<T>;
placeholderGridRow?: GridRowProp<T>;
}
export declare const gridRow: import("../types").StyleGenerator<GridRowProps<{}>>;
export interface GridAutoFlowProps<T = {}> {
gridAutoFlow?: SystemProperty<CSS.Property.GridAutoFlow, T>;
export declare const gridRow: import("../types").StyleGenerator;
declare type GridAutoFlowProp<T extends ITheme> = SystemProp<CSS.Property.GridAutoFlow, T>;
export interface GridAutoFlowProps<T extends ITheme = Theme> {
gridAutoFlow?: GridAutoFlowProp<T>;
motionSafeGridAutoFlow?: GridAutoFlowProp<T>;
motionReduceGridAutoFlow?: GridAutoFlowProp<T>;
firstGridAutoFlow?: GridAutoFlowProp<T>;
lastGridAutoFlow?: GridAutoFlowProp<T>;
oddGridAutoFlow?: GridAutoFlowProp<T>;
evenGridAutoFlow?: GridAutoFlowProp<T>;
visitedGridAutoFlow?: GridAutoFlowProp<T>;
checkedGridAutoFlow?: GridAutoFlowProp<T>;
focusWithinGridAutoFlow?: GridAutoFlowProp<T>;
hoverGridAutoFlow?: GridAutoFlowProp<T>;
focusGridAutoFlow?: GridAutoFlowProp<T>;
focusVisibleGridAutoFlow?: GridAutoFlowProp<T>;
activeGridAutoFlow?: GridAutoFlowProp<T>;
disabledGridAutoFlow?: GridAutoFlowProp<T>;
placeholderGridAutoFlow?: GridAutoFlowProp<T>;
}
export declare const gridAutoFlow: import("../types").StyleGenerator<GridAutoFlowProps<{}>>;
export interface GridAutoColumnsProps<T = {}> {
gridAutoColumns?: SystemProperty<CSS.Property.GridAutoColumns, T>;
export declare const gridAutoFlow: import("../types").StyleGenerator;
declare type GridAutoColumnsProp<T extends ITheme> = SystemProp<CSS.Property.GridAutoColumns, T>;
export interface GridAutoColumnsProps<T extends ITheme = Theme> {
gridAutoColumns?: GridAutoColumnsProp<T>;
motionSafeGridAutoColumns?: GridAutoColumnsProp<T>;
motionReduceGridAutoColumns?: GridAutoColumnsProp<T>;
firstGridAutoColumns?: GridAutoColumnsProp<T>;
lastGridAutoColumns?: GridAutoColumnsProp<T>;
oddGridAutoColumns?: GridAutoColumnsProp<T>;
evenGridAutoColumns?: GridAutoColumnsProp<T>;
visitedGridAutoColumns?: GridAutoColumnsProp<T>;
checkedGridAutoColumns?: GridAutoColumnsProp<T>;
focusWithinGridAutoColumns?: GridAutoColumnsProp<T>;
hoverGridAutoColumns?: GridAutoColumnsProp<T>;
focusGridAutoColumns?: GridAutoColumnsProp<T>;
focusVisibleGridAutoColumns?: GridAutoColumnsProp<T>;
activeGridAutoColumns?: GridAutoColumnsProp<T>;
disabledGridAutoColumns?: GridAutoColumnsProp<T>;
placeholderGridAutoColumns?: GridAutoColumnsProp<T>;
}
export declare const gridAutoColumns: import("../types").StyleGenerator<GridAutoColumnsProps<{}>>;
export interface GridAutoRowsProps<T = {}> {
gridAutoRows?: SystemProperty<CSS.Property.GridAutoRows, T>;
export declare const gridAutoColumns: import("../types").StyleGenerator;
declare type GridAutoRowsProp<T extends ITheme> = SystemProp<CSS.Property.GridAutoRows, T>;
export interface GridAutoRowsProps<T extends ITheme = Theme> {
gridAutoRows?: GridAutoRowsProp<T>;
motionSafeGridAutoRows?: GridAutoRowsProp<T>;
motionReduceGridAutoRows?: GridAutoRowsProp<T>;
firstGridAutoRows?: GridAutoRowsProp<T>;
lastGridAutoRows?: GridAutoRowsProp<T>;
oddGridAutoRows?: GridAutoRowsProp<T>;
evenGridAutoRows?: GridAutoRowsProp<T>;
visitedGridAutoRows?: GridAutoRowsProp<T>;
checkedGridAutoRows?: GridAutoRowsProp<T>;
focusWithinGridAutoRows?: GridAutoRowsProp<T>;
hoverGridAutoRows?: GridAutoRowsProp<T>;
focusGridAutoRows?: GridAutoRowsProp<T>;
focusVisibleGridAutoRows?: GridAutoRowsProp<T>;
activeGridAutoRows?: GridAutoRowsProp<T>;
disabledGridAutoRows?: GridAutoRowsProp<T>;
placeholderGridAutoRows?: GridAutoRowsProp<T>;
}
export declare const gridAutoRows: import("../types").StyleGenerator<GridAutoRowsProps<{}>>;
export interface GridTemplateColumnsProps<T = {}> {
gridTemplateColumns?: SystemProperty<CSS.Property.GridTemplateColumns, T>;
export declare const gridAutoRows: import("../types").StyleGenerator;
declare type GridTemplateColumnsProp<T extends ITheme> = SystemProp<VariantsType<T['gridTemplateColumns']> | CSS.Property.GridTemplateColumns, T>;
export interface GridTemplateColumnsProps<T extends ITheme = Theme> {
gridTemplateColumns?: GridTemplateColumnsProp<T>;
motionSafeGridTemplateColumns?: GridTemplateColumnsProp<T>;
motionReduceGridTemplateColumns?: GridTemplateColumnsProp<T>;
firstGridTemplateColumns?: GridTemplateColumnsProp<T>;
lastGridTemplateColumns?: GridTemplateColumnsProp<T>;
oddGridTemplateColumns?: GridTemplateColumnsProp<T>;
evenGridTemplateColumns?: GridTemplateColumnsProp<T>;
visitedGridTemplateColumns?: GridTemplateColumnsProp<T>;
checkedGridTemplateColumns?: GridTemplateColumnsProp<T>;
focusWithinGridTemplateColumns?: GridTemplateColumnsProp<T>;
hoverGridTemplateColumns?: GridTemplateColumnsProp<T>;
focusGridTemplateColumns?: GridTemplateColumnsProp<T>;
focusVisibleGridTemplateColumns?: GridTemplateColumnsProp<T>;
activeGridTemplateColumns?: GridTemplateColumnsProp<T>;
disabledGridTemplateColumns?: GridTemplateColumnsProp<T>;
placeholderGridTemplateColumns?: GridTemplateColumnsProp<T>;
}
export declare const gridTemplateColumns: import("../types").StyleGenerator<GridTemplateColumnsProps<{}>>;
export interface GridTemplateRowsProps<T = {}> {
gridTemplateRows?: SystemProperty<CSS.Property.GridTemplateRows, T>;
export declare const gridTemplateColumns: import("../types").StyleGenerator;
declare type GridTemplateRowsProp<T extends ITheme> = SystemProp<VariantsType<T['gridTemplateRows']> | CSS.Property.GridTemplateRows, T>;
export interface GridTemplateRowsProps<T extends ITheme = Theme> {
gridTemplateRows?: GridTemplateRowsProp<T>;
motionSafeGridTemplateRows?: GridTemplateRowsProp<T>;
motionReduceGridTemplateRows?: GridTemplateRowsProp<T>;
firstGridTemplateRows?: GridTemplateRowsProp<T>;
lastGridTemplateRows?: GridTemplateRowsProp<T>;
oddGridTemplateRows?: GridTemplateRowsProp<T>;
evenGridTemplateRows?: GridTemplateRowsProp<T>;
visitedGridTemplateRows?: GridTemplateRowsProp<T>;
checkedGridTemplateRows?: GridTemplateRowsProp<T>;
focusWithinGridTemplateRows?: GridTemplateRowsProp<T>;
hoverGridTemplateRows?: GridTemplateRowsProp<T>;
focusGridTemplateRows?: GridTemplateRowsProp<T>;
focusVisibleGridTemplateRows?: GridTemplateRowsProp<T>;
activeGridTemplateRows?: GridTemplateRowsProp<T>;
disabledGridTemplateRows?: GridTemplateRowsProp<T>;
placeholderGridTemplateRows?: GridTemplateRowsProp<T>;
}
export declare const gridTemplateRows: import("../types").StyleGenerator<GridTemplateRowsProps<{}>>;
export interface GridTemplateAreasProps<T = {}> {
gridTemplateAreas?: SystemProperty<CSS.Property.GridTemplateAreas, T>;
export declare const gridTemplateRows: import("../types").StyleGenerator;
declare type GridTemplateAreasProp<T extends ITheme> = SystemProp<CSS.Property.GridTemplateAreas, T>;
export interface GridTemplateAreasProps<T extends ITheme = Theme> {
gridTemplateAreas?: GridTemplateAreasProp<T>;
motionSafeGridTemplateAreas?: GridTemplateAreasProp<T>;
motionReduceGridTemplateAreas?: GridTemplateAreasProp<T>;
firstGridTemplateAreas?: GridTemplateAreasProp<T>;
lastGridTemplateAreas?: GridTemplateAreasProp<T>;
oddGridTemplateAreas?: GridTemplateAreasProp<T>;
evenGridTemplateAreas?: GridTemplateAreasProp<T>;
visitedGridTemplateAreas?: GridTemplateAreasProp<T>;
checkedGridTemplateAreas?: GridTemplateAreasProp<T>;
focusWithinGridTemplateAreas?: GridTemplateAreasProp<T>;
hoverGridTemplateAreas?: GridTemplateAreasProp<T>;
focusGridTemplateAreas?: GridTemplateAreasProp<T>;
focusVisibleGridTemplateAreas?: GridTemplateAreasProp<T>;
activeGridTemplateAreas?: GridTemplateAreasProp<T>;
disabledGridTemplateAreas?: GridTemplateAreasProp<T>;
placeholderGridTemplateAreas?: GridTemplateAreasProp<T>;
}
export declare const gridTemplateAreas: import("../types").StyleGenerator<GridTemplateAreasProps<{}>>;
export interface GridAreaProps<T = {}> {
gridArea?: SystemProperty<CSS.Property.GridArea, T>;
export declare const gridTemplateAreas: import("../types").StyleGenerator;
declare type GridAreaProp<T extends ITheme> = SystemProp<CSS.Property.GridArea, T>;
export interface GridAreaProps<T extends ITheme = Theme> {
gridTemplateAreas?: GridAreaProp<T>;
motionSafeGridArea?: GridAreaProp<T>;
motionReduceGridArea?: GridAreaProp<T>;
firstGridArea?: GridAreaProp<T>;
lastGridArea?: GridAreaProp<T>;
oddGridArea?: GridAreaProp<T>;
evenGridArea?: GridAreaProp<T>;
visitedGridArea?: GridAreaProp<T>;
checkedGridArea?: GridAreaProp<T>;
focusWithinGridArea?: GridAreaProp<T>;
hoverGridArea?: GridAreaProp<T>;
focusGridArea?: GridAreaProp<T>;
focusVisibleGridArea?: GridAreaProp<T>;
activeGridArea?: GridAreaProp<T>;
disabledGridArea?: GridAreaProp<T>;
placeholderGridArea?: GridAreaProp<T>;
}
export declare const gridArea: import("../types").StyleGenerator<GridAreaProps<{}>>;
export declare type GridsProps<T = {}> = GridGapProps<T> & GridColumnGapProps<T> & GridRowGapProps<T> & GridColumnProps<T> & GridRowProps<T> & GridAutoFlowProps<T> & GridAutoColumnsProps<T> & GridAutoRowsProps<T> & GridTemplateColumnsProps<T> & GridTemplateRowsProps<T> & GridTemplateAreasProps<T> & GridAreaProps<T>;
export declare const grids: import("../types").StyleGenerator<GridsProps<{}>>;
export declare const gridArea: import("../types").StyleGenerator;
export declare type GridsProps<T extends ITheme = Theme> = GapProps<T> & ColumnGapProps<T> & RowGapProps<T> & GridColumnProps<T> & GridRowProps<T> & GridAutoFlowProps<T> & GridAutoColumnsProps<T> & GridAutoRowsProps<T> & GridTemplateColumnsProps<T> & GridTemplateRowsProps<T> & GridTemplateAreasProps<T> & GridAreaProps<T>;
export declare const grids: import("../types").StyleGenerator;
export {};

37

dist/styles/index.d.ts

@@ -0,24 +1,37 @@

import { Theme, ITheme } from '../types';
import { AnimationsProps } from './animations';
import { BackgroundsProps } from './backgrounds';
import { BasicsProps } from './basics';
import { BordersProps } from './borders';
import { EffectsProps } from './effects';
import { FlexboxGridsProps } from './flexbox-grids';
import { FlexboxesProps } from './flexboxes';
import { GridsProps } from './grids';
import { InteractivityProps } from './interactivity';
import { LayoutProps } from './layout';
import { FlexBoxesProps } from './flexboxes';
import { GridsProps } from './grids';
import { PositioningProps } from './positioning';
import { ShadowsProps } from './shadows';
import { SizingProps } from './sizing';
import { SpaceProps } from './space';
import { SvgProps } from './svg';
import { TablesProps } from './tables';
import { TransformsProps } from './transforms';
import { TransitionsProps } from './transitions';
import { TypographyProps } from './typography';
import { XGridsProps } from './xgrids';
export * from './animations';
export * from './backgrounds';
export * from './basics';
export * from './borders';
export * from './colors';
export * from './effects';
export * from './flexboxes';
export * from './flexbox-grids';
export * from './grids';
export * from './interactivity';
export * from './layout';
export * from './positioning';
export * from './shadows';
export * from './sizing';
export * from './space';
export * from './svg';
export * from './tables';
export * from './transforms';
export * from './transitions';
export * from './typography';
export * from './xgrids';
export declare type SystemProps<T = {}> = BackgroundsProps<T> & BasicsProps<T> & BordersProps<T> & FlexBoxesProps<T> & GridsProps<T> & LayoutProps<T> & PositioningProps<T> & ShadowsProps<T> & SpaceProps<T> & TypographyProps<T> & XGridsProps<T>;
export declare const system: import("..").StyleGenerator<SystemProps<{}>>;
export * from './units';
export declare type SystemProps<T extends ITheme = Theme> = AnimationsProps<T> & BackgroundsProps<T> & BordersProps<T> & EffectsProps<T> & FlexboxGridsProps<T> & FlexboxesProps<T> & GridsProps<T> & InteractivityProps<T> & LayoutProps<T> & SizingProps<T> & SpaceProps<T> & SvgProps<T> & TablesProps<T> & TransformsProps<T> & TransitionsProps<T> & TypographyProps<T>;
export declare const system: import("../types").StyleGenerator;

331

dist/styles/layout.d.ts
import * as CSS from 'csstype';
import { SystemProperty, VariantsType, ExtractThemeProperty } from '../types';
export declare type SizeGetter<T = {}> = VariantsType<ExtractThemeProperty<T, 'sizes'>>;
export declare const getSize: import("../types").ThemeGetter<unknown, string | number>;
export interface DisplayProps<T = {}> {
display?: SystemProperty<CSS.Property.Display, T>;
import { SystemProp, VariantsType, ITheme, Theme } from '../types';
declare type DisplayProp<T extends ITheme> = SystemProp<CSS.Property.Display, T>;
export interface DisplayProps<T extends ITheme = Theme> {
display?: DisplayProp<T>;
motionSafeDisplay?: DisplayProp<T>;
motionReduceDisplay?: DisplayProp<T>;
firstDisplay?: DisplayProp<T>;
lastDisplay?: DisplayProp<T>;
oddDisplay?: DisplayProp<T>;
evenDisplay?: DisplayProp<T>;
visitedDisplay?: DisplayProp<T>;
checkedDisplay?: DisplayProp<T>;
focusWithinDisplay?: DisplayProp<T>;
hoverDisplay?: DisplayProp<T>;
focusDisplay?: DisplayProp<T>;
focusVisibleDisplay?: DisplayProp<T>;
activeDisplay?: DisplayProp<T>;
disabledDisplay?: DisplayProp<T>;
placeholderDisplay?: DisplayProp<T>;
}
export declare const display: import("../types").StyleGenerator<DisplayProps<{}>>;
export interface WidthProps<T = {}> {
width?: SystemProperty<SizeGetter<T> | CSS.Property.Width, T>;
export declare const display: import("../types").StyleGenerator;
declare type BoxSizingProp<T extends ITheme> = SystemProp<CSS.Property.BoxSizing, T>;
export interface BoxSizingProps<T extends ITheme = Theme> {
boxSizing?: BoxSizingProp<T>;
motionSafeBoxSizing?: BoxSizingProp<T>;
motionReduceBoxSizing?: BoxSizingProp<T>;
firstBoxSizing?: BoxSizingProp<T>;
lastBoxSizing?: BoxSizingProp<T>;
oddBoxSizing?: BoxSizingProp<T>;
evenBoxSizing?: BoxSizingProp<T>;
visitedBoxSizing?: BoxSizingProp<T>;
checkedBoxSizing?: BoxSizingProp<T>;
focusWithinBoxSizing?: BoxSizingProp<T>;
hoverBoxSizing?: BoxSizingProp<T>;
focusBoxSizing?: BoxSizingProp<T>;
focusVisibleBoxSizing?: BoxSizingProp<T>;
activeBoxSizing?: BoxSizingProp<T>;
disabledBoxSizing?: BoxSizingProp<T>;
placeholderBoxSizing?: BoxSizingProp<T>;
}
export declare const width: import("../types").StyleGenerator<WidthProps<{}>>;
export interface HeightProps<T = {}> {
height?: SystemProperty<SizeGetter<T> | CSS.Property.Height, T>;
export declare const boxSizing: import("../types").StyleGenerator;
declare type ContainerProp<T extends ITheme> = SystemProp<boolean, T>;
export interface ContainerProps<T extends ITheme = Theme> {
container?: ContainerProp<T>;
motionSafeContainer?: ContainerProp<T>;
motionReduceContainer?: ContainerProp<T>;
firstContainer?: ContainerProp<T>;
lastContainer?: ContainerProp<T>;
oddContainer?: ContainerProp<T>;
evenContainer?: ContainerProp<T>;
visitedContainer?: ContainerProp<T>;
checkedContainer?: ContainerProp<T>;
focusWithinContainer?: ContainerProp<T>;
hoverContainer?: ContainerProp<T>;
focusContainer?: ContainerProp<T>;
focusVisibleContainer?: ContainerProp<T>;
activeContainer?: ContainerProp<T>;
disabledContainer?: ContainerProp<T>;
placeholderContainer?: ContainerProp<T>;
}
export declare const height: import("../types").StyleGenerator<HeightProps<{}>>;
export interface MaxWidthProps<T = {}> {
maxWidth?: SystemProperty<SizeGetter<T> | CSS.Property.MaxWidth, T>;
export declare const container: import("../types").StyleGenerator;
declare type OverflowProp<T extends ITheme> = SystemProp<CSS.Property.Overflow, T>;
export interface OverflowProps<T extends ITheme = Theme> {
overflow?: OverflowProp<T>;
motionSafeOverflow?: OverflowProp<T>;
motionReduceOverflow?: OverflowProp<T>;
firstOverflow?: OverflowProp<T>;
lastOverflow?: OverflowProp<T>;
oddOverflow?: OverflowProp<T>;
evenOverflow?: OverflowProp<T>;
visitedOverflow?: OverflowProp<T>;
checkedOverflow?: OverflowProp<T>;
focusWithinOverflow?: OverflowProp<T>;
hoverOverflow?: OverflowProp<T>;
focusOverflow?: OverflowProp<T>;
focusVisibleOverflow?: OverflowProp<T>;
activeOverflow?: OverflowProp<T>;
disabledOverflow?: OverflowProp<T>;
placeholderOverflow?: OverflowProp<T>;
}
export declare const maxWidth: import("../types").StyleGenerator<MaxWidthProps<{}>>;
export interface MaxHeightProps<T = {}> {
maxHeight?: SystemProperty<SizeGetter<T> | CSS.Property.MaxHeight, T>;
export declare const overflow: import("../types").StyleGenerator;
declare type OverflowXProp<T extends ITheme> = SystemProp<CSS.Property.OverflowX, T>;
export interface OverflowXProps<T extends ITheme = Theme> {
overflowX?: OverflowXProp<T>;
motionSafeOverflowX?: OverflowXProp<T>;
motionReduceOverflowX?: OverflowXProp<T>;
firstOverflowX?: OverflowXProp<T>;
lastOverflowX?: OverflowXProp<T>;
oddOverflowX?: OverflowXProp<T>;
evenOverflowX?: OverflowXProp<T>;
visitedOverflowX?: OverflowXProp<T>;
checkedOverflowX?: OverflowXProp<T>;
focusWithinOverflowX?: OverflowXProp<T>;
hoverOverflowX?: OverflowXProp<T>;
focusOverflowX?: OverflowXProp<T>;
focusVisibleOverflowX?: OverflowXProp<T>;
activeOverflowX?: OverflowXProp<T>;
disabledOverflowX?: OverflowXProp<T>;
placeholderOverflowX?: OverflowXProp<T>;
}
export declare const maxHeight: import("../types").StyleGenerator<MaxHeightProps<{}>>;
export interface MinWidthProps<T = {}> {
minWidth?: SystemProperty<SizeGetter<T> | CSS.Property.MinWidth, T>;
export declare const overflowX: import("../types").StyleGenerator;
declare type OverflowYProp<T extends ITheme> = SystemProp<CSS.Property.OverflowY, T>;
export interface OverflowYProps<T extends ITheme = Theme> {
overflowY?: OverflowYProp<T>;
motionSafeOverflowY?: OverflowYProp<T>;
motionReduceOverflowY?: OverflowYProp<T>;
firstOverflowY?: OverflowYProp<T>;
lastOverflowY?: OverflowYProp<T>;
oddOverflowY?: OverflowYProp<T>;
evenOverflowY?: OverflowYProp<T>;
visitedOverflowY?: OverflowYProp<T>;
checkedOverflowY?: OverflowYProp<T>;
focusWithinOverflowY?: OverflowYProp<T>;
hoverOverflowY?: OverflowYProp<T>;
focusOverflowY?: OverflowYProp<T>;
focusVisibleOverflowY?: OverflowYProp<T>;
activeOverflowY?: OverflowYProp<T>;
disabledOverflowY?: OverflowYProp<T>;
placeholderOverflowY?: OverflowYProp<T>;
}
export declare const minWidth: import("../types").StyleGenerator<MinWidthProps<{}>>;
export interface MinHeightProps<T = {}> {
minHeight?: SystemProperty<SizeGetter<T> | CSS.Property.MinHeight, T>;
export declare const overflowY: import("../types").StyleGenerator;
export declare type ZIndexGetter<T extends ITheme = Theme> = VariantsType<T['zIndices']>;
export declare const getZIndex: import("../types").ThemeGetter<(string & {}) | (number & {})>;
declare type ZIndexProp<T extends ITheme> = SystemProp<ZIndexGetter<T> | CSS.Property.ZIndex, T>;
export interface ZIndexProps<T extends ITheme = Theme> {
zIndex?: ZIndexProp<T>;
motionSafeZIndex?: ZIndexProp<T>;
motionReduceZIndex?: ZIndexProp<T>;
firstZIndex?: ZIndexProp<T>;
lastZIndex?: ZIndexProp<T>;
oddZIndex?: ZIndexProp<T>;
evenZIndex?: ZIndexProp<T>;
visitedZIndex?: ZIndexProp<T>;
checkedZIndex?: ZIndexProp<T>;
focusWithinZIndex?: ZIndexProp<T>;
hoverZIndex?: ZIndexProp<T>;
focusZIndex?: ZIndexProp<T>;
focusVisibleZIndex?: ZIndexProp<T>;
activeZIndex?: ZIndexProp<T>;
disabledZIndex?: ZIndexProp<T>;
placeholderZIndex?: ZIndexProp<T>;
}
export declare const minHeight: import("../types").StyleGenerator<MinHeightProps<{}>>;
export interface SizeProps<T = {}> {
size?: SystemProperty<SizeGetter<T> | (CSS.Property.Width & CSS.Property.Height), T>;
export declare const zIndex: import("../types").StyleGenerator;
declare type PositionProp<T extends ITheme> = SystemProp<CSS.Property.Position, T>;
export interface PositionProps<T extends ITheme = Theme> {
position?: PositionProp<T>;
motionSafePosition?: PositionProp<T>;
motionReducePosition?: PositionProp<T>;
firstPosition?: PositionProp<T>;
lastPosition?: PositionProp<T>;
oddPosition?: PositionProp<T>;
evenPosition?: PositionProp<T>;
visitedPosition?: PositionProp<T>;
checkedPosition?: PositionProp<T>;
focusWithinPosition?: PositionProp<T>;
hoverPosition?: PositionProp<T>;
focusPosition?: PositionProp<T>;
focusVisiblePosition?: PositionProp<T>;
activePosition?: PositionProp<T>;
disabledPosition?: PositionProp<T>;
placeholderPosition?: PositionProp<T>;
}
export declare const size: import("../types").StyleGenerator<SizeProps<{}>>;
export interface VerticalAlignProps<T = {}> {
verticalAlign?: SystemProperty<CSS.Property.VerticalAlign, T>;
export declare const position: import("../types").StyleGenerator;
export declare type InsetGetter<T extends ITheme = Theme> = VariantsType<T['inset']>;
export declare const getInset: import("../types").ThemeGetter<any>;
declare type TopProp<T extends ITheme> = SystemProp<InsetGetter<T> | CSS.Property.Top, T>;
export interface TopProps<T extends ITheme = Theme> {
top?: TopProp<T>;
motionSafeTop?: TopProp<T>;
motionReduceTop?: TopProp<T>;
firstTop?: TopProp<T>;
lastTop?: TopProp<T>;
oddTop?: TopProp<T>;
evenTop?: TopProp<T>;
visitedTop?: TopProp<T>;
checkedTop?: TopProp<T>;
focusWithinTop?: TopProp<T>;
hoverTop?: TopProp<T>;
focusTop?: TopProp<T>;
focusVisibleTop?: TopProp<T>;
activeTop?: TopProp<T>;
disabledTop?: TopProp<T>;
placeholderTop?: TopProp<T>;
}
export declare const verticalAlign: import("../types").StyleGenerator<object>;
export declare type LayoutProps<T = {}> = DisplayProps<T> & WidthProps<T> & HeightProps<T> & MaxWidthProps<T> & MaxHeightProps<T> & MinWidthProps<T> & MinHeightProps<T> & SizeProps<T> & VerticalAlignProps<T>;
export declare const layout: import("../types").StyleGenerator<LayoutProps<{}>>;
export declare const top: import("../types").StyleGenerator;
declare type RightProp<T extends ITheme> = SystemProp<InsetGetter<T> | CSS.Property.Right, T>;
export interface RightProps<T extends ITheme = Theme> {
right?: RightProp<T>;
motionSafeRight?: RightProp<T>;
motionReduceRight?: RightProp<T>;
firstRight?: RightProp<T>;
lastRight?: RightProp<T>;
oddRight?: RightProp<T>;
evenRight?: RightProp<T>;
visitedRight?: RightProp<T>;
checkedRight?: RightProp<T>;
focusWithinRight?: RightProp<T>;
hoverRight?: RightProp<T>;
focusRight?: RightProp<T>;
focusVisibleRight?: RightProp<T>;
activeRight?: RightProp<T>;
disabledRight?: RightProp<T>;
placeholderRight?: RightProp<T>;
}
export declare const right: import("../types").StyleGenerator;
declare type BottomProp<T extends ITheme> = SystemProp<InsetGetter<T> | CSS.Property.Bottom, T>;
export interface BottomProps<T extends ITheme = Theme> {
bottom?: BottomProp<T>;
motionSafeBottom?: BottomProp<T>;
motionReduceBottom?: BottomProp<T>;
firstBottom?: BottomProp<T>;
lastBottom?: BottomProp<T>;
oddBottom?: BottomProp<T>;
evenBottom?: BottomProp<T>;
visitedBottom?: BottomProp<T>;
checkedBottom?: BottomProp<T>;
focusWithinBottom?: BottomProp<T>;
hoverBottom?: BottomProp<T>;
focusBottom?: BottomProp<T>;
focusVisibleBottom?: BottomProp<T>;
activeBottom?: BottomProp<T>;
disabledBottom?: BottomProp<T>;
placeholderBottom?: BottomProp<T>;
}
export declare const bottom: import("../types").StyleGenerator;
declare type LeftProp<T extends ITheme> = SystemProp<InsetGetter<T> | CSS.Property.Left, T>;
export interface LeftProps<T extends ITheme = Theme> {
left?: LeftProp<T>;
motionSafeLeft?: LeftProp<T>;
motionReduceLeft?: LeftProp<T>;
firstLeft?: LeftProp<T>;
lastLeft?: LeftProp<T>;
oddLeft?: LeftProp<T>;
evenLeft?: LeftProp<T>;
visitedLeft?: LeftProp<T>;
checkedLeft?: LeftProp<T>;
focusWithinLeft?: LeftProp<T>;
hoverLeft?: LeftProp<T>;
focusLeft?: LeftProp<T>;
focusVisibleLeft?: LeftProp<T>;
activeLeft?: LeftProp<T>;
disabledLeft?: LeftProp<T>;
placeholderLeft?: LeftProp<T>;
}
export declare const left: import("../types").StyleGenerator;
declare type VisibilityProp<T extends ITheme> = SystemProp<CSS.Property.Visibility, T>;
export interface VisibilityProps<T extends ITheme = Theme> {
visibility?: VisibilityProp<T>;
motionSafeVisibility?: VisibilityProp<T>;
motionReduceVisibility?: VisibilityProp<T>;
firstVisibility?: VisibilityProp<T>;
lastVisibility?: VisibilityProp<T>;
oddVisibility?: VisibilityProp<T>;
evenVisibility?: VisibilityProp<T>;
visitedVisibility?: VisibilityProp<T>;
checkedVisibility?: VisibilityProp<T>;
focusWithinVisibility?: VisibilityProp<T>;
hoverVisibility?: VisibilityProp<T>;
focusVisibility?: VisibilityProp<T>;
focusVisibleVisibility?: VisibilityProp<T>;
activeVisibility?: VisibilityProp<T>;
disabledVisibility?: VisibilityProp<T>;
placeholderVisibility?: VisibilityProp<T>;
}
export declare const visibility: import("../types").StyleGenerator;
declare type OverscrollBehaviorProp<T extends ITheme> = SystemProp<CSS.Property.OverscrollBehavior, T>;
export interface OverscrollBehaviorProps<T extends ITheme = Theme> {
overscrollBehavior?: OverscrollBehaviorProp<T>;
motionSafeOverscrollBehavior?: OverscrollBehaviorProp<T>;
motionReduceOverscrollBehavior?: OverscrollBehaviorProp<T>;
firstOverscrollBehavior?: OverscrollBehaviorProp<T>;
lastOverscrollBehavior?: OverscrollBehaviorProp<T>;
oddOverscrollBehavior?: OverscrollBehaviorProp<T>;
evenOverscrollBehavior?: OverscrollBehaviorProp<T>;
visitedOverscrollBehavior?: OverscrollBehaviorProp<T>;
checkedOverscrollBehavior?: OverscrollBehaviorProp<T>;
focusWithinOverscrollBehavior?: OverscrollBehaviorProp<T>;
hoverOverscrollBehavior?: OverscrollBehaviorProp<T>;
focusOverscrollBehavior?: OverscrollBehaviorProp<T>;
focusVisibleOverscrollBehavior?: OverscrollBehaviorProp<T>;
activeOverscrollBehavior?: OverscrollBehaviorProp<T>;
disabledOverscrollBehavior?: OverscrollBehaviorProp<T>;
placeholderOverscrollBehavior?: OverscrollBehaviorProp<T>;
}
export declare const overscrollBehavior: import("../types").StyleGenerator;
declare type ObjectFitProp<T extends ITheme> = SystemProp<CSS.Property.ObjectFit, T>;
export interface ObjectFitProps<T extends ITheme = Theme> {
objectFit?: ObjectFitProp<T>;
motionSafeObjectFit?: ObjectFitProp<T>;
motionReduceObjectFit?: ObjectFitProp<T>;
firstObjectFit?: ObjectFitProp<T>;
lastObjectFit?: ObjectFitProp<T>;
oddObjectFit?: ObjectFitProp<T>;
evenObjectFit?: ObjectFitProp<T>;
visitedObjectFit?: ObjectFitProp<T>;
checkedObjectFit?: ObjectFitProp<T>;
focusWithinObjectFit?: ObjectFitProp<T>;
hoverObjectFit?: ObjectFitProp<T>;
focusObjectFit?: ObjectFitProp<T>;
focusVisibleObjectFit?: ObjectFitProp<T>;
activeObjectFit?: ObjectFitProp<T>;
disabledObjectFit?: ObjectFitProp<T>;
placeholderObjectFit?: ObjectFitProp<T>;
}
export declare const objectFit: import("../types").StyleGenerator;
export declare type LayoutProps<T extends ITheme = Theme> = DisplayProps<T> & BoxSizingProps<T> & ContainerProps<T> & OverflowProps<T> & OverflowXProps<T> & OverflowYProps<T> & PositionProps<T> & ZIndexProps<T> & TopProps<T> & RightProps<T> & BottomProps<T> & LeftProps<T> & VisibilityProps<T> & OverscrollBehaviorProps<T> & ObjectFitProps<T>;
export declare const layout: import("../types").StyleGenerator;
export {};

583

dist/styles/space.d.ts
import * as CSS from 'csstype';
import { ExtractThemeProperty, VariantsType, SystemProperty, Variants } from '../types';
declare const defaultSpaceVariants: readonly [0, 4, 8, 16, 24, 48, 96, 144, 192, 240];
export declare type SpaceGetter<T = {}> = VariantsType<ExtractThemeProperty<T, 'space'> extends Variants ? ExtractThemeProperty<T, 'space'> : typeof defaultSpaceVariants>;
export declare const getSpace: import("../types").ThemeGetter<readonly [0, 4, 8, 16, 24, 48, 96, 144, 192, 240], string | number>;
declare type Margin<T> = SystemProperty<CSS.Property.Margin | SpaceGetter<T>, T>;
export interface MarginProps<T = {}> {
margin?: Margin<T>;
m?: Margin<T>;
import { ITheme, Theme, VariantsType, SystemProp } from '../types';
export declare type SpaceGetter<T extends ITheme = Theme> = VariantsType<T['space']>;
export declare const getSpace: import("../types").ThemeGetter<(string & {}) | (number & {})>;
declare type MarginProp<T extends ITheme> = SystemProp<CSS.Property.Margin | SpaceGetter<T>, T>;
export interface MarginProps<T extends ITheme = Theme> {
margin?: MarginProp<T>;
motionSafeMargin?: MarginProp<T>;
motionReduceMargin?: MarginProp<T>;
firstMargin?: MarginProp<T>;
lastMargin?: MarginProp<T>;
oddMargin?: MarginProp<T>;
evenMargin?: MarginProp<T>;
visitedMargin?: MarginProp<T>;
checkedMargin?: MarginProp<T>;
focusWithinMargin?: MarginProp<T>;
hoverMargin?: MarginProp<T>;
focusMargin?: MarginProp<T>;
focusVisibleMargin?: MarginProp<T>;
activeMargin?: MarginProp<T>;
disabledMargin?: MarginProp<T>;
placeholderMargin?: MarginProp<T>;
m?: MarginProp<T>;
motionSafeM?: MarginProp<T>;
motionReduceM?: MarginProp<T>;
firstM?: MarginProp<T>;
lastM?: MarginProp<T>;
oddM?: MarginProp<T>;
evenM?: MarginProp<T>;
visitedM?: MarginProp<T>;
checkedM?: MarginProp<T>;
focusWithinM?: MarginProp<T>;
hoverM?: MarginProp<T>;
focusM?: MarginProp<T>;
focusVisibleM?: MarginProp<T>;
activeM?: MarginProp<T>;
disabledM?: MarginProp<T>;
placeholderM?: MarginProp<T>;
}
export declare const margin: import("../types").StyleGenerator<MarginProps<{}>>;
declare type MarginTop<T> = SystemProperty<CSS.Property.MarginTop | SpaceGetter<T>, T>;
export interface MarginTopProps<T = {}> {
marginTop?: MarginTop<T>;
mt?: MarginTop<T>;
export declare const margin: import("../types").StyleGenerator;
declare type MarginTopProp<T extends ITheme> = SystemProp<CSS.Property.MarginTop | SpaceGetter<T>, T>;
export interface MarginTopProps<T extends ITheme = Theme> {
marginTop?: MarginTopProp<T>;
motionSafeMarginTop?: MarginTopProp<T>;
motionReduceMarginTop?: MarginTopProp<T>;
firstMarginTop?: MarginTopProp<T>;
lastMarginTop?: MarginTopProp<T>;
oddMarginTop?: MarginTopProp<T>;
evenMarginTop?: MarginTopProp<T>;
visitedMarginTop?: MarginTopProp<T>;
checkedMarginTop?: MarginTopProp<T>;
focusWithinMarginTop?: MarginTopProp<T>;
hoverMarginTop?: MarginTopProp<T>;
focusMarginTop?: MarginTopProp<T>;
focusVisibleMarginTop?: MarginTopProp<T>;
activeMarginTop?: MarginTopProp<T>;
disabledMarginTop?: MarginTopProp<T>;
placeholderMarginTop?: MarginTopProp<T>;
mt?: MarginTopProp<T>;
motionSafeMt?: MarginTopProp<T>;
motionReduceMt?: MarginTopProp<T>;
firstMt?: MarginTopProp<T>;
lastMt?: MarginTopProp<T>;
oddMt?: MarginTopProp<T>;
evenMt?: MarginTopProp<T>;
visitedMt?: MarginTopProp<T>;
checkedMt?: MarginTopProp<T>;
focusWithinMt?: MarginTopProp<T>;
hoverMt?: MarginTopProp<T>;
focusMt?: MarginTopProp<T>;
focusVisibleMt?: MarginTopProp<T>;
activeMt?: MarginTopProp<T>;
disabledMt?: MarginTopProp<T>;
placeholderMt?: MarginTopProp<T>;
}
export declare const marginTop: import("../types").StyleGenerator<MarginTopProps<{}>>;
declare type MarginRight<T> = SystemProperty<CSS.Property.MarginRight | SpaceGetter<T>, T>;
export interface MarginRightProps<T = {}> {
marginRight?: MarginRight<T>;
mr?: MarginRight<T>;
export declare const marginTop: import("../types").StyleGenerator;
declare type MarginRightProp<T extends ITheme> = SystemProp<CSS.Property.MarginRight | SpaceGetter<T>, T>;
export interface MarginRightProps<T extends ITheme = Theme> {
marginRight?: MarginRightProp<T>;
motionSafeMarginRight?: MarginRightProp<T>;
motionReduceMarginRight?: MarginRightProp<T>;
firstMarginRight?: MarginRightProp<T>;
lastMarginRight?: MarginRightProp<T>;
oddMarginRight?: MarginRightProp<T>;
evenMarginRight?: MarginRightProp<T>;
visitedMarginRight?: MarginRightProp<T>;
checkedMarginRight?: MarginRightProp<T>;
focusWithinMarginRight?: MarginRightProp<T>;
hoverMarginRight?: MarginRightProp<T>;
focusMarginRight?: MarginRightProp<T>;
focusVisibleMarginRight?: MarginRightProp<T>;
activeMarginRight?: MarginRightProp<T>;
disabledMarginRight?: MarginRightProp<T>;
placeholderMarginRight?: MarginRightProp<T>;
mr?: MarginRightProp<T>;
motionSafeMr?: MarginRightProp<T>;
motionReduceMr?: MarginRightProp<T>;
firstMr?: MarginRightProp<T>;
lastMr?: MarginRightProp<T>;
oddMr?: MarginRightProp<T>;
evenMr?: MarginRightProp<T>;
visitedMr?: MarginRightProp<T>;
checkedMr?: MarginRightProp<T>;
focusWithinMr?: MarginRightProp<T>;
hoverMr?: MarginRightProp<T>;
focusMr?: MarginRightProp<T>;
focusVisibleMr?: MarginRightProp<T>;
activeMr?: MarginRightProp<T>;
disabledMr?: MarginRightProp<T>;
placeholderMr?: MarginRightProp<T>;
}
export declare const marginRight: import("../types").StyleGenerator<MarginRightProps<{}>>;
declare type MarginBottom<T> = SystemProperty<CSS.Property.MarginBottom | SpaceGetter<T>, T>;
export interface MarginBottomProps<T = {}> {
marginBottom?: MarginBottom<T>;
mb?: MarginBottom<T>;
export declare const marginRight: import("../types").StyleGenerator;
declare type MarginBottomProp<T extends ITheme> = SystemProp<CSS.Property.MarginBottom | SpaceGetter<T>, T>;
export interface MarginBottomProps<T extends ITheme = Theme> {
marginBottom?: MarginBottomProp<T>;
motionSafeMarginBottom?: MarginBottomProp<T>;
motionReduceMarginBottom?: MarginBottomProp<T>;
firstMarginBottom?: MarginBottomProp<T>;
lastMarginBottom?: MarginBottomProp<T>;
oddMarginBottom?: MarginBottomProp<T>;
evenMarginBottom?: MarginBottomProp<T>;
visitedMarginBottom?: MarginBottomProp<T>;
checkedMarginBottom?: MarginBottomProp<T>;
focusWithinMarginBottom?: MarginBottomProp<T>;
hoverMarginBottom?: MarginBottomProp<T>;
focusMarginBottom?: MarginBottomProp<T>;
focusVisibleMarginBottom?: MarginBottomProp<T>;
activeMarginBottom?: MarginBottomProp<T>;
disabledMarginBottom?: MarginBottomProp<T>;
placeholderMarginBottom?: MarginBottomProp<T>;
mb?: MarginBottomProp<T>;
motionSafeMb?: MarginBottomProp<T>;
motionReduceMb?: MarginBottomProp<T>;
firstMb?: MarginBottomProp<T>;
lastMb?: MarginBottomProp<T>;
oddMb?: MarginBottomProp<T>;
evenMb?: MarginBottomProp<T>;
visitedMb?: MarginBottomProp<T>;
checkedMb?: MarginBottomProp<T>;
focusWithinMb?: MarginBottomProp<T>;
hoverMb?: MarginBottomProp<T>;
focusMb?: MarginBottomProp<T>;
focusVisibleMb?: MarginBottomProp<T>;
activeMb?: MarginBottomProp<T>;
disabledMb?: MarginBottomProp<T>;
placeholderMb?: MarginBottomProp<T>;
}
export declare const marginBottom: import("../types").StyleGenerator<MarginBottomProps<{}>>;
declare type MarginLeft<T> = SystemProperty<CSS.Property.MarginLeft | SpaceGetter<T>, T>;
export interface MarginLeftProps<T = {}> {
marginLeft?: MarginLeft<T>;
ml?: MarginLeft<T>;
export declare const marginBottom: import("../types").StyleGenerator;
declare type MarginLeftProp<T extends ITheme> = SystemProp<CSS.Property.MarginLeft | SpaceGetter<T>, T>;
export interface MarginLeftProps<T extends ITheme = Theme> {
marginLeft?: MarginLeftProp<T>;
motionSafeMarginLeft?: MarginLeftProp<T>;
motionReduceMarginLeft?: MarginLeftProp<T>;
firstMarginLeft?: MarginLeftProp<T>;
lastMarginLeft?: MarginLeftProp<T>;
oddMarginLeft?: MarginLeftProp<T>;
evenMarginLeft?: MarginLeftProp<T>;
visitedMarginLeft?: MarginLeftProp<T>;
checkedMarginLeft?: MarginLeftProp<T>;
focusWithinMarginLeft?: MarginLeftProp<T>;
hoverMarginLeft?: MarginLeftProp<T>;
focusMarginLeft?: MarginLeftProp<T>;
focusVisibleMarginLeft?: MarginLeftProp<T>;
activeMarginLeft?: MarginLeftProp<T>;
disabledMarginLeft?: MarginLeftProp<T>;
placeholderMarginLeft?: MarginLeftProp<T>;
ml?: MarginLeftProp<T>;
motionSafeMl?: MarginLeftProp<T>;
motionReduceMl?: MarginLeftProp<T>;
firstMl?: MarginLeftProp<T>;
lastMl?: MarginLeftProp<T>;
oddMl?: MarginLeftProp<T>;
evenMl?: MarginLeftProp<T>;
visitedMl?: MarginLeftProp<T>;
checkedMl?: MarginLeftProp<T>;
focusWithinMl?: MarginLeftProp<T>;
hoverMl?: MarginLeftProp<T>;
focusMl?: MarginLeftProp<T>;
focusVisibleMl?: MarginLeftProp<T>;
activeMl?: MarginLeftProp<T>;
disabledMl?: MarginLeftProp<T>;
placeholderMl?: MarginLeftProp<T>;
}
export declare const marginLeft: import("../types").StyleGenerator<MarginLeftProps<{}>>;
declare type MarginX<T> = SystemProperty<(CSS.Property.MarginLeft & CSS.Property.MarginRight) | SpaceGetter<T>, T>;
export interface MarginXProps<T = {}> {
mx?: MarginX<T>;
export declare const marginLeft: import("../types").StyleGenerator;
declare type MarginXProp<T extends ITheme = Theme> = SystemProp<(CSS.Property.MarginLeft & CSS.Property.MarginRight) | SpaceGetter<T>, T>;
export interface MarginXProps<T extends ITheme = Theme> {
mx?: MarginXProp<T>;
motionSafeMx?: MarginXProp<T>;
motionReduceMx?: MarginXProp<T>;
firstMx?: MarginXProp<T>;
lastMx?: MarginXProp<T>;
oddMx?: MarginXProp<T>;
evenMx?: MarginXProp<T>;
visitedMx?: MarginXProp<T>;
checkedMx?: MarginXProp<T>;
focusWithinMx?: MarginXProp<T>;
hoverMx?: MarginXProp<T>;
focusMx?: MarginXProp<T>;
focusVisibleMx?: MarginXProp<T>;
activeMx?: MarginXProp<T>;
disabledMx?: MarginXProp<T>;
placeholderMx?: MarginXProp<T>;
}
export declare const mx: import("../types").StyleGenerator<MarginXProps<{}>>;
declare type MarginY<T> = SystemProperty<(CSS.Property.MarginTop & CSS.Property.MarginBottom) | SpaceGetter<T>, T>;
export interface MarginYProps<T = {}> {
my?: MarginY<T>;
export declare const mx: import("../types").StyleGenerator;
declare type MarginYProp<T extends ITheme> = SystemProp<(CSS.Property.MarginTop & CSS.Property.MarginBottom) | SpaceGetter<T>, T>;
export interface MarginYProps<T extends ITheme = Theme> {
my?: MarginYProp<T>;
motionSafeMy?: MarginYProp<T>;
motionReduceMy?: MarginYProp<T>;
firstMy?: MarginYProp<T>;
lastMy?: MarginYProp<T>;
oddMy?: MarginYProp<T>;
evenMy?: MarginYProp<T>;
visitedMy?: MarginYProp<T>;
checkedMy?: MarginYProp<T>;
focusWithinMy?: MarginYProp<T>;
hoverMy?: MarginYProp<T>;
focusMy?: MarginYProp<T>;
focusVisibleMy?: MarginYProp<T>;
activeMy?: MarginYProp<T>;
disabledMy?: MarginYProp<T>;
placeholderMy?: MarginYProp<T>;
}
export declare const my: import("../types").StyleGenerator<MarginYProps<{}>>;
declare type Padding<T> = SystemProperty<CSS.Property.Padding | SpaceGetter<T>, T>;
export interface PaddingProps<T = {}> {
p?: Padding<T>;
padding?: Padding<T>;
export declare const my: import("../types").StyleGenerator;
declare type PaddingProp<T extends ITheme> = SystemProp<CSS.Property.Padding | SpaceGetter<T>, T>;
export interface PaddingProps<T extends ITheme = Theme> {
padding?: PaddingProp<T>;
motionSafePadding?: PaddingProp<T>;
motionReducePadding?: PaddingProp<T>;
firstPadding?: PaddingProp<T>;
lastPadding?: PaddingProp<T>;
oddPadding?: PaddingProp<T>;
evenPadding?: PaddingProp<T>;
visitedPadding?: PaddingProp<T>;
checkedPadding?: PaddingProp<T>;
focusWithinPadding?: PaddingProp<T>;
hoverPadding?: PaddingProp<T>;
focusPadding?: PaddingProp<T>;
focusVisiblePadding?: PaddingProp<T>;
activePadding?: PaddingProp<T>;
disabledPadding?: PaddingProp<T>;
placeholderPadding?: PaddingProp<T>;
p?: PaddingProp<T>;
motionSafeP?: PaddingProp<T>;
motionReduceP?: PaddingProp<T>;
firstP?: PaddingProp<T>;
lastP?: PaddingProp<T>;
oddP?: PaddingProp<T>;
evenP?: PaddingProp<T>;
visitedP?: PaddingProp<T>;
checkedP?: PaddingProp<T>;
focusWithinP?: PaddingProp<T>;
hoverP?: PaddingProp<T>;
focusP?: PaddingProp<T>;
focusVisibleP?: PaddingProp<T>;
activeP?: PaddingProp<T>;
disabledP?: PaddingProp<T>;
placeholderP?: PaddingProp<T>;
}
export declare const padding: import("../types").StyleGenerator<PaddingProps<{}>>;
declare type PaddingTop<T> = SystemProperty<CSS.Property.PaddingTop | SpaceGetter<T>, T>;
export interface PaddingTopProps<T = {}> {
pt?: PaddingTop<T>;
paddingTop?: PaddingTop<T>;
export declare const padding: import("../types").StyleGenerator;
declare type PaddingTopProp<T extends ITheme> = SystemProp<CSS.Property.PaddingTop | SpaceGetter<T>, T>;
export interface PaddingTopProps<T extends ITheme = Theme> {
paddingTop?: PaddingTopProp<T>;
motionSafePaddingTop?: PaddingTopProp<T>;
motionReducePaddingTop?: PaddingTopProp<T>;
firstPaddingTop?: PaddingTopProp<T>;
lastPaddingTop?: PaddingTopProp<T>;
oddPaddingTop?: PaddingTopProp<T>;
evenPaddingTop?: PaddingTopProp<T>;
visitedPaddingTop?: PaddingTopProp<T>;
checkedPaddingTop?: PaddingTopProp<T>;
focusWithinPaddingTop?: PaddingTopProp<T>;
hoverPaddingTop?: PaddingTopProp<T>;
focusPaddingTop?: PaddingTopProp<T>;
focusVisiblePaddingTop?: PaddingTopProp<T>;
activePaddingTop?: PaddingTopProp<T>;
disabledPaddingTop?: PaddingTopProp<T>;
placeholderPaddingTop?: PaddingTopProp<T>;
pt?: PaddingTopProp<T>;
motionSafePt?: PaddingTopProp<T>;
motionReducePt?: PaddingTopProp<T>;
firstPt?: PaddingTopProp<T>;
lastPt?: PaddingTopProp<T>;
oddPt?: PaddingTopProp<T>;
evenPt?: PaddingTopProp<T>;
visitedPt?: PaddingTopProp<T>;
checkedPt?: PaddingTopProp<T>;
focusWithinPt?: PaddingTopProp<T>;
hoverPt?: PaddingTopProp<T>;
focusPt?: PaddingTopProp<T>;
focusVisiblePt?: PaddingTopProp<T>;
activePt?: PaddingTopProp<T>;
disabledPt?: PaddingTopProp<T>;
placeholderPt?: PaddingTopProp<T>;
}
export declare const paddingTop: import("../types").StyleGenerator<PaddingTopProps<{}>>;
declare type PaddingRight<T> = SystemProperty<CSS.Property.PaddingRight | SpaceGetter<T>, T>;
export interface PaddingRightProps<T = {}> {
pr?: PaddingRight<T>;
paddingRight?: PaddingRight<T>;
export declare const paddingTop: import("../types").StyleGenerator;
declare type PaddingRightProp<T extends ITheme> = SystemProp<CSS.Property.PaddingRight | SpaceGetter<T>, T>;
export interface PaddingRightProps<T extends ITheme = Theme> {
paddingRight?: PaddingRightProp<T>;
motionSafePaddingRight?: PaddingRightProp<T>;
motionReducePaddingRight?: PaddingRightProp<T>;
firstPaddingRight?: PaddingRightProp<T>;
lastPaddingRight?: PaddingRightProp<T>;
oddPaddingRight?: PaddingRightProp<T>;
evenPaddingRight?: PaddingRightProp<T>;
visitedPaddingRight?: PaddingRightProp<T>;
checkedPaddingRight?: PaddingRightProp<T>;
focusWithinPaddingRight?: PaddingRightProp<T>;
hoverPaddingRight?: PaddingRightProp<T>;
focusPaddingRight?: PaddingRightProp<T>;
focusVisiblePaddingRight?: PaddingRightProp<T>;
activePaddingRight?: PaddingRightProp<T>;
disabledPaddingRight?: PaddingRightProp<T>;
placeholderPaddingRight?: PaddingRightProp<T>;
pr?: PaddingRightProp<T>;
motionSafePr?: PaddingRightProp<T>;
motionReducePr?: PaddingRightProp<T>;
firstPr?: PaddingRightProp<T>;
lastPr?: PaddingRightProp<T>;
oddPr?: PaddingRightProp<T>;
evenPr?: PaddingRightProp<T>;
visitedPr?: PaddingRightProp<T>;
checkedPr?: PaddingRightProp<T>;
focusWithinPr?: PaddingRightProp<T>;
hoverPr?: PaddingRightProp<T>;
focusPr?: PaddingRightProp<T>;
focusVisiblePr?: PaddingRightProp<T>;
activePr?: PaddingRightProp<T>;
disabledPr?: PaddingRightProp<T>;
placeholderPr?: PaddingRightProp<T>;
}
export declare const paddingRight: import("../types").StyleGenerator<PaddingRightProps<{}>>;
declare type PaddingBottom<T> = SystemProperty<CSS.Property.PaddingBottom | SpaceGetter<T>, T>;
export interface PaddingBottomProps<T = {}> {
pb?: PaddingBottom<T>;
paddingBottom?: PaddingBottom<T>;
export declare const paddingRight: import("../types").StyleGenerator;
declare type PaddingBottomProp<T extends ITheme> = SystemProp<CSS.Property.PaddingBottom | SpaceGetter<T>, T>;
export interface PaddingBottomProps<T extends ITheme = Theme> {
paddingBottop?: PaddingBottomProp<T>;
motionSafePaddingBottop?: PaddingBottomProp<T>;
motionReducePaddingBottop?: PaddingBottomProp<T>;
firstPaddingBottop?: PaddingBottomProp<T>;
lastPaddingBottop?: PaddingBottomProp<T>;
oddPaddingBottop?: PaddingBottomProp<T>;
evenPaddingBottop?: PaddingBottomProp<T>;
visitedPaddingBottop?: PaddingBottomProp<T>;
checkedPaddingBottop?: PaddingBottomProp<T>;
focusWithinPaddingBottop?: PaddingBottomProp<T>;
hoverPaddingBottop?: PaddingBottomProp<T>;
focusPaddingBottop?: PaddingBottomProp<T>;
focusVisiblePaddingBottop?: PaddingBottomProp<T>;
activePaddingBottop?: PaddingBottomProp<T>;
disabledPaddingBottop?: PaddingBottomProp<T>;
placeholderPaddingBottop?: PaddingBottomProp<T>;
pb?: PaddingBottomProp<T>;
motionSafePb?: PaddingBottomProp<T>;
motionReducePb?: PaddingBottomProp<T>;
firstPb?: PaddingBottomProp<T>;
lastPb?: PaddingBottomProp<T>;
oddPb?: PaddingBottomProp<T>;
evenPb?: PaddingBottomProp<T>;
visitedPb?: PaddingBottomProp<T>;
checkedPb?: PaddingBottomProp<T>;
focusWithinPb?: PaddingBottomProp<T>;
hoverPb?: PaddingBottomProp<T>;
focusPb?: PaddingBottomProp<T>;
focusVisiblePb?: PaddingBottomProp<T>;
activePb?: PaddingBottomProp<T>;
disabledPb?: PaddingBottomProp<T>;
placeholderPb?: PaddingBottomProp<T>;
}
export declare const paddingBottom: import("../types").StyleGenerator<PaddingBottomProps<{}>>;
declare type PaddingLeft<T> = SystemProperty<CSS.Property.PaddingLeft | SpaceGetter<T>, T>;
export interface PaddingLeftProps<T = {}> {
pl?: PaddingLeft<T>;
paddingLeft?: PaddingLeft<T>;
export declare const paddingBottom: import("../types").StyleGenerator;
declare type PaddingLeftProp<T extends ITheme> = SystemProp<CSS.Property.PaddingLeft | SpaceGetter<T>, T>;
export interface PaddingLeftProps<T extends ITheme = Theme> {
paddingLeft?: PaddingLeftProp<T>;
motionSafePaddingLeft?: PaddingLeftProp<T>;
motionReducePaddingLeft?: PaddingLeftProp<T>;
firstPaddingLeft?: PaddingLeftProp<T>;
lastPaddingLeft?: PaddingLeftProp<T>;
oddPaddingLeft?: PaddingLeftProp<T>;
evenPaddingLeft?: PaddingLeftProp<T>;
visitedPaddingLeft?: PaddingLeftProp<T>;
checkedPaddingLeft?: PaddingLeftProp<T>;
focusWithinPaddingLeft?: PaddingLeftProp<T>;
hoverPaddingLeft?: PaddingLeftProp<T>;
focusPaddingLeft?: PaddingLeftProp<T>;
focusVisiblePaddingLeft?: PaddingLeftProp<T>;
activePaddingLeft?: PaddingLeftProp<T>;
disabledPaddingLeft?: PaddingLeftProp<T>;
placeholderPaddingLeft?: PaddingLeftProp<T>;
pl?: PaddingLeftProp<T>;
motionSafePl?: PaddingLeftProp<T>;
motionReducePl?: PaddingLeftProp<T>;
firstPl?: PaddingLeftProp<T>;
lastPl?: PaddingLeftProp<T>;
oddPl?: PaddingLeftProp<T>;
evenPl?: PaddingLeftProp<T>;
visitedPl?: PaddingLeftProp<T>;
checkedPl?: PaddingLeftProp<T>;
focusWithinPl?: PaddingLeftProp<T>;
hoverPl?: PaddingLeftProp<T>;
focusPl?: PaddingLeftProp<T>;
focusVisiblePl?: PaddingLeftProp<T>;
activePl?: PaddingLeftProp<T>;
disabledPl?: PaddingLeftProp<T>;
placeholderPl?: PaddingLeftProp<T>;
}
export declare const paddingLeft: import("../types").StyleGenerator<PaddingLeftProps<{}>>;
declare type PaddingX<T> = SystemProperty<(CSS.Property.PaddingLeft & CSS.Property.PaddingRight) | SpaceGetter<T>, T>;
export interface PaddingXProps<T = {}> {
px?: PaddingX<T>;
export declare const paddingLeft: import("../types").StyleGenerator;
declare type PaddingXProp<T extends ITheme> = SystemProp<(CSS.Property.PaddingLeft & CSS.Property.PaddingRight) | SpaceGetter<T>, T>;
export interface PaddingXProps<T extends ITheme = Theme> {
px?: PaddingXProp<T>;
motionSafePx?: PaddingXProp<T>;
motionReducePx?: PaddingXProp<T>;
firstPx?: PaddingXProp<T>;
lastPx?: PaddingXProp<T>;
oddPx?: PaddingXProp<T>;
evenPx?: PaddingXProp<T>;
visitedPx?: PaddingXProp<T>;
checkedPx?: PaddingXProp<T>;
focusWithinPx?: PaddingXProp<T>;
hoverPx?: PaddingXProp<T>;
focusPx?: PaddingXProp<T>;
focusVisiblePx?: PaddingXProp<T>;
activePx?: PaddingXProp<T>;
disabledPx?: PaddingXProp<T>;
placeholderPx?: PaddingXProp<T>;
}
export declare const px: import("../types").StyleGenerator<PaddingXProps<{}>>;
declare type PaddingY<T> = SystemProperty<(CSS.Property.PaddingTop & CSS.Property.PaddingBottom) | SpaceGetter<T>, T>;
export interface PaddingYProps<T = {}> {
py?: PaddingY<T>;
export declare const px: import("../types").StyleGenerator;
declare type PaddingYProp<T extends ITheme> = SystemProp<(CSS.Property.PaddingTop & CSS.Property.PaddingBottom) | SpaceGetter<T>, T>;
export interface PaddingYProps<T extends ITheme = Theme> {
py?: PaddingYProp<T>;
motionSafePy?: PaddingYProp<T>;
motionReducePy?: PaddingYProp<T>;
firstPy?: PaddingYProp<T>;
lastPy?: PaddingYProp<T>;
oddPy?: PaddingYProp<T>;
evenPy?: PaddingYProp<T>;
visitedPy?: PaddingYProp<T>;
checkedPy?: PaddingYProp<T>;
focusWithinPy?: PaddingYProp<T>;
hoverPy?: PaddingYProp<T>;
focusPy?: PaddingYProp<T>;
focusVisiblePy?: PaddingYProp<T>;
activePy?: PaddingYProp<T>;
disabledPy?: PaddingYProp<T>;
placeholderPy?: PaddingYProp<T>;
}
export declare const py: import("../types").StyleGenerator<PaddingYProps<{}>>;
export declare type SpaceProps<T = {}> = MarginProps<T> & MarginTopProps<T> & MarginRightProps<T> & MarginBottomProps<T> & MarginLeftProps<T> & MarginXProps<T> & MarginYProps<T> & PaddingProps<T> & PaddingTopProps<T> & PaddingRightProps<T> & PaddingBottomProps<T> & PaddingLeftProps<T> & PaddingXProps<T> & PaddingYProps<T>;
export declare const space: import("../types").StyleGenerator<SpaceProps<{}>>;
export declare const py: import("../types").StyleGenerator;
declare type SpaceYProp<T extends ITheme> = SystemProp<SpaceGetter<T>, T>;
export interface SpaceYProps<T extends ITheme = Theme> {
spaceY?: SpaceYProp<T>;
motionSafeSpaceY?: SpaceYProp<T>;
motionReduceSpaceY?: SpaceYProp<T>;
firstSpaceY?: SpaceYProp<T>;
lastSpaceY?: SpaceYProp<T>;
oddSpaceY?: SpaceYProp<T>;
evenSpaceY?: SpaceYProp<T>;
visitedSpaceY?: SpaceYProp<T>;
checkedSpaceY?: SpaceYProp<T>;
focusWithinSpaceY?: SpaceYProp<T>;
hoverSpaceY?: SpaceYProp<T>;
focusSpaceY?: SpaceYProp<T>;
focusVisibleSpaceY?: SpaceYProp<T>;
activeSpaceY?: SpaceYProp<T>;
disabledSpaceY?: SpaceYProp<T>;
placeholderSpaceY?: SpaceYProp<T>;
}
export declare const spaceY: import("../types").StyleGenerator;
declare type SpaceXProp<T extends ITheme> = SystemProp<SpaceGetter<T>, T>;
export interface SpaceXProps<T extends ITheme = Theme> {
spaceX?: SpaceXProp<T>;
motionSafeSpaceX?: SpaceXProp<T>;
motionReduceSpaceX?: SpaceXProp<T>;
firstSpaceX?: SpaceXProp<T>;
lastSpaceX?: SpaceXProp<T>;
oddSpaceX?: SpaceXProp<T>;
evenSpaceX?: SpaceXProp<T>;
visitedSpaceX?: SpaceXProp<T>;
checkedSpaceX?: SpaceXProp<T>;
focusWithinSpaceX?: SpaceXProp<T>;
hoverSpaceX?: SpaceXProp<T>;
focusSpaceX?: SpaceXProp<T>;
focusVisibleSpaceX?: SpaceXProp<T>;
activeSpaceX?: SpaceXProp<T>;
disabledSpaceX?: SpaceXProp<T>;
placeholderSpaceX?: SpaceXProp<T>;
}
export declare const spaceX: import("../types").StyleGenerator;
declare type SpaceXReverseProp<T extends ITheme> = SystemProp<boolean, T>;
export interface SpaceXReverseProps<T extends ITheme = Theme> {
spaceXReverse?: SpaceXReverseProp<T>;
motionSafeSpaceXReverse?: SpaceXReverseProp<T>;
motionReduceSpaceXReverse?: SpaceXReverseProp<T>;
firstSpaceXReverse?: SpaceXReverseProp<T>;
lastSpaceXReverse?: SpaceXReverseProp<T>;
oddSpaceXReverse?: SpaceXReverseProp<T>;
evenSpaceXReverse?: SpaceXReverseProp<T>;
visitedSpaceXReverse?: SpaceXReverseProp<T>;
checkedSpaceXReverse?: SpaceXReverseProp<T>;
focusWithinSpaceXReverse?: SpaceXReverseProp<T>;
hoverSpaceXReverse?: SpaceXReverseProp<T>;
focusSpaceXReverse?: SpaceXReverseProp<T>;
focusVisibleSpaceXReverse?: SpaceXReverseProp<T>;
activeSpaceXReverse?: SpaceXReverseProp<T>;
disabledSpaceXReverse?: SpaceXReverseProp<T>;
placeholderSpaceXReverse?: SpaceXReverseProp<T>;
}
export declare const spaceXReverse: import("../types").StyleGenerator;
declare type SpaceYReverseProp<T extends ITheme> = SystemProp<boolean, T>;
export interface SpaceYReverseProps<T extends ITheme = Theme> {
spaceYReverse?: SpaceYReverseProp<T>;
motionSafeSpaceYReverse?: SpaceYReverseProp<T>;
motionReduceSpaceYReverse?: SpaceYReverseProp<T>;
firstSpaceYReverse?: SpaceYReverseProp<T>;
lastSpaceYReverse?: SpaceYReverseProp<T>;
oddSpaceYReverse?: SpaceYReverseProp<T>;
evenSpaceYReverse?: SpaceYReverseProp<T>;
visitedSpaceYReverse?: SpaceYReverseProp<T>;
checkedSpaceYReverse?: SpaceYReverseProp<T>;
focusWithinSpaceYReverse?: SpaceYReverseProp<T>;
hoverSpaceYReverse?: SpaceYReverseProp<T>;
focusSpaceYReverse?: SpaceYReverseProp<T>;
focusVisibleSpaceYReverse?: SpaceYReverseProp<T>;
activeSpaceYReverse?: SpaceYReverseProp<T>;
disabledSpaceYReverse?: SpaceYReverseProp<T>;
placeholderSpaceYReverse?: SpaceYReverseProp<T>;
}
export declare const spaceYReverse: import("../types").StyleGenerator;
export declare type SpaceProps<T extends ITheme = Theme> = MarginProps<T> & MarginTopProps<T> & MarginRightProps<T> & MarginBottomProps<T> & MarginLeftProps<T> & MarginXProps<T> & MarginYProps<T> & PaddingProps<T> & PaddingTopProps<T> & PaddingRightProps<T> & PaddingBottomProps<T> & PaddingLeftProps<T> & PaddingXProps<T> & PaddingYProps<T> & SpaceXProps<T> & SpaceYProps<T> & SpaceXReverseProps<T> & SpaceYReverseProps<T>;
export declare const space: import("../types").StyleGenerator;
export {};

347

dist/styles/typography.d.ts
import * as CSS from 'csstype';
import { SystemProperty, VariantsType, ExtractThemeProperty, Variants } from '../types';
import { ColorGetter } from './basics';
export declare type FontGetter<T = {}> = VariantsType<ExtractThemeProperty<T, 'fonts'>>;
export declare const getFont: import("../types").ThemeGetter<unknown, string | number>;
export declare type LineHeightGetter<T = {}> = VariantsType<ExtractThemeProperty<T, 'lineHeights'>>;
export declare const getLineHeight: import("../types").ThemeGetter<unknown, string | number>;
export declare type FontWeightGetter<T = {}> = VariantsType<ExtractThemeProperty<T, 'fontWeights'>>;
export declare const getFontWeight: import("../types").ThemeGetter<unknown, string | number>;
export declare type LetterSpacingGetter<T = {}> = VariantsType<ExtractThemeProperty<T, 'letterSpacings'>>;
export declare const getLetterSpacing: import("../types").ThemeGetter<unknown, string | number>;
declare const defaultFontSizeVariants: readonly [0, 12, 14, 16, 20, 24, 32, 48, 64, 72];
export declare type FontSizeGetter<T = {}, V = ExtractThemeProperty<T, 'fontSizes'>> = VariantsType<V extends Variants ? V : typeof defaultFontSizeVariants>;
export declare const getFontSize: import("../types").ThemeGetter<readonly [0, 12, 14, 16, 20, 24, 32, 48, 64, 72], string | number>;
export interface FontFamilyProps<T = {}> {
fontFamily?: SystemProperty<FontGetter<T> | CSS.Property.FontFamily, T>;
import { SystemProp, VariantsType, ITheme, Theme } from '../types';
import { ColorGetter } from './colors';
export declare type FontGetter<T extends ITheme = Theme> = VariantsType<T['fonts']>;
export declare const getFont: import("../types").ThemeGetter<(string & {}) | (number & {})>;
export declare type LineHeightGetter<T extends ITheme = Theme> = VariantsType<T['lineHeights']>;
export declare const getLineHeight: import("../types").ThemeGetter<(string & {}) | (number & {})>;
export declare type FontWeightGetter<T extends ITheme = Theme> = VariantsType<T['fontWeights']>;
export declare const getFontWeight: import("../types").ThemeGetter<(string & {}) | (number & {})>;
export declare type LetterSpacingGetter<T extends ITheme = Theme> = VariantsType<T['letterSpacings']>;
export declare const getLetterSpacing: import("../types").ThemeGetter<(string & {}) | (number & {})>;
export declare type FontSizeGetter<T extends ITheme = Theme> = VariantsType<T['fontSizes']>;
export declare const getFontSize: import("../types").ThemeGetter<(string & {}) | (number & {})>;
declare type FontFamilyProp<T extends ITheme> = SystemProp<FontGetter<T> | CSS.Property.FontFamily, T>;
export interface FontFamilyProps<T extends ITheme = Theme> {
fontFamily?: FontFamilyProp<T>;
motionSafeFontFamily?: FontFamilyProp<T>;
motionReduceFontFamily?: FontFamilyProp<T>;
firstFontFamily?: FontFamilyProp<T>;
lastFontFamily?: FontFamilyProp<T>;
oddFontFamily?: FontFamilyProp<T>;
evenFontFamily?: FontFamilyProp<T>;
visitedFontFamily?: FontFamilyProp<T>;
checkedFontFamily?: FontFamilyProp<T>;
focusWithinFontFamily?: FontFamilyProp<T>;
hoverFontFamily?: FontFamilyProp<T>;
focusFontFamily?: FontFamilyProp<T>;
focusVisibleFontFamily?: FontFamilyProp<T>;
activeFontFamily?: FontFamilyProp<T>;
disabledFontFamily?: FontFamilyProp<T>;
placeholderFontFamily?: FontFamilyProp<T>;
}
export declare const fontFamily: import("../types").StyleGenerator<FontFamilyProps<{}>>;
export interface FontSizeProps<T = {}> {
fontSize?: SystemProperty<FontSizeGetter<T> | CSS.Property.FontSize, T>;
export declare const fontFamily: import("../types").StyleGenerator;
declare type FontSizeProp<T extends ITheme> = SystemProp<FontSizeGetter<T> | CSS.Property.FontSize, T>;
export interface FontSizeProps<T extends ITheme = Theme> {
fontSize?: FontSizeProp<T>;
motionSafeFontSize?: FontSizeProp<T>;
motionReduceFontSize?: FontSizeProp<T>;
firstFontSize?: FontSizeProp<T>;
lastFontSize?: FontSizeProp<T>;
oddFontSize?: FontSizeProp<T>;
evenFontSize?: FontSizeProp<T>;
visitedFontSize?: FontSizeProp<T>;
checkedFontSize?: FontSizeProp<T>;
focusWithinFontSize?: FontSizeProp<T>;
hoverFontSize?: FontSizeProp<T>;
focusFontSize?: FontSizeProp<T>;
focusVisibleFontSize?: FontSizeProp<T>;
activeFontSize?: FontSizeProp<T>;
disabledFontSize?: FontSizeProp<T>;
placeholderFontSize?: FontSizeProp<T>;
}
export declare const fontSize: import("../types").StyleGenerator<FontSizeProps<{}>>;
export interface LineHeightProps<T = {}> {
lineHeight?: SystemProperty<LineHeightGetter<T> | CSS.Property.LineHeight, T>;
export declare const fontSize: import("../types").StyleGenerator;
declare type LineHeightProp<T extends ITheme> = SystemProp<LineHeightGetter<T> | CSS.Property.LineHeight, T>;
export interface LineHeightProps<T extends ITheme = Theme> {
lineHeight?: LineHeightProp<T>;
motionSafeLineHeight?: LineHeightProp<T>;
motionReduceLineHeight?: LineHeightProp<T>;
firstLineHeight?: LineHeightProp<T>;
lastLineHeight?: LineHeightProp<T>;
oddLineHeight?: LineHeightProp<T>;
evenLineHeight?: LineHeightProp<T>;
visitedLineHeight?: LineHeightProp<T>;
checkedLineHeight?: LineHeightProp<T>;
focusWithinLineHeight?: LineHeightProp<T>;
hoverLineHeight?: LineHeightProp<T>;
focusLineHeight?: LineHeightProp<T>;
focusVisibleLineHeight?: LineHeightProp<T>;
activeLineHeight?: LineHeightProp<T>;
disabledLineHeight?: LineHeightProp<T>;
placeholderLineHeight?: LineHeightProp<T>;
}
export declare const lineHeight: import("../types").StyleGenerator<LineHeightProps<{}>>;
export interface FontWeightProps<T = {}> {
fontWeight?: SystemProperty<FontWeightGetter<T> | CSS.Property.FontWeight, T>;
export declare const lineHeight: import("../types").StyleGenerator;
declare type FontWeightProp<T extends ITheme> = SystemProp<FontWeightGetter<T> | CSS.Property.FontWeight, T>;
export interface FontWeightProps<T extends ITheme = Theme> {
fontWeight?: FontWeightProp<T>;
motionSafeFontWeight?: FontWeightProp<T>;
motionReduceFontWeight?: FontWeightProp<T>;
firstFontWeight?: FontWeightProp<T>;
lastFontWeight?: FontWeightProp<T>;
oddFontWeight?: FontWeightProp<T>;
evenFontWeight?: FontWeightProp<T>;
visitedFontWeight?: FontWeightProp<T>;
checkedFontWeight?: FontWeightProp<T>;
focusWithinFontWeight?: FontWeightProp<T>;
hoverFontWeight?: FontWeightProp<T>;
focusFontWeight?: FontWeightProp<T>;
focusVisibleFontWeight?: FontWeightProp<T>;
activeFontWeight?: FontWeightProp<T>;
disabledFontWeight?: FontWeightProp<T>;
placeholderFontWeight?: FontWeightProp<T>;
}
export declare const fontWeight: import("../types").StyleGenerator<FontWeightProps<{}>>;
export interface FontStyleProps<T = {}> {
fontStyle?: SystemProperty<CSS.Property.FontStyle, T>;
export declare const fontWeight: import("../types").StyleGenerator;
declare type FontStyleProp<T extends ITheme> = SystemProp<CSS.Property.FontStyle, T>;
export interface FontStyleProps<T extends ITheme = Theme> {
fontStyle?: FontStyleProp<T>;
motionSafeFontStyle?: FontStyleProp<T>;
motionReduceFontStyle?: FontStyleProp<T>;
firstFontStyle?: FontStyleProp<T>;
lastFontStyle?: FontStyleProp<T>;
oddFontStyle?: FontStyleProp<T>;
evenFontStyle?: FontStyleProp<T>;
visitedFontStyle?: FontStyleProp<T>;
checkedFontStyle?: FontStyleProp<T>;
focusWithinFontStyle?: FontStyleProp<T>;
hoverFontStyle?: FontStyleProp<T>;
focusFontStyle?: FontStyleProp<T>;
focusVisibleFontStyle?: FontStyleProp<T>;
activeFontStyle?: FontStyleProp<T>;
disabledFontStyle?: FontStyleProp<T>;
placeholderFontStyle?: FontStyleProp<T>;
}
export declare const fontStyle: import("../types").StyleGenerator<FontStyleProps<{}>>;
export interface TextAlignProps<T = {}> {
textAlign?: SystemProperty<CSS.Property.TextAlign, T>;
export declare const fontStyle: import("../types").StyleGenerator;
declare type LetterSpacingProp<T extends ITheme> = SystemProp<LetterSpacingGetter<T> | CSS.Property.LetterSpacing, T>;
export interface LetterSpacingProps<T extends ITheme = Theme> {
letterSpacing?: LetterSpacingProp<T>;
motionSafeLetterSpacing?: LetterSpacingProp<T>;
motionReduceLetterSpacing?: LetterSpacingProp<T>;
firstLetterSpacing?: LetterSpacingProp<T>;
lastLetterSpacing?: LetterSpacingProp<T>;
oddLetterSpacing?: LetterSpacingProp<T>;
evenLetterSpacing?: LetterSpacingProp<T>;
visitedLetterSpacing?: LetterSpacingProp<T>;
checkedLetterSpacing?: LetterSpacingProp<T>;
focusWithinLetterSpacing?: LetterSpacingProp<T>;
hoverLetterSpacing?: LetterSpacingProp<T>;
focusLetterSpacing?: LetterSpacingProp<T>;
focusVisibleLetterSpacing?: LetterSpacingProp<T>;
activeLetterSpacing?: LetterSpacingProp<T>;
disabledLetterSpacing?: LetterSpacingProp<T>;
placeholderLetterSpacing?: LetterSpacingProp<T>;
}
export declare const textAlign: import("../types").StyleGenerator<TextAlignProps<{}>>;
export interface LetterSpacingProps<T = {}> {
letterSpacing?: SystemProperty<CSS.Property.LetterSpacing, T>;
export declare const letterSpacing: import("../types").StyleGenerator;
declare type ColorProp<T extends ITheme> = SystemProp<ColorGetter<T> | CSS.Property.Color, T>;
export interface ColorProps<T extends ITheme = Theme> {
color?: ColorProp<T>;
motionSafeColor?: ColorProp<T>;
motionReduceColor?: ColorProp<T>;
firstColor?: ColorProp<T>;
lastColor?: ColorProp<T>;
oddColor?: ColorProp<T>;
evenColor?: ColorProp<T>;
visitedColor?: ColorProp<T>;
checkedColor?: ColorProp<T>;
focusWithinColor?: ColorProp<T>;
hoverColor?: ColorProp<T>;
focusColor?: ColorProp<T>;
focusVisibleColor?: ColorProp<T>;
activeColor?: ColorProp<T>;
disabledColor?: ColorProp<T>;
placeholderColor?: ColorProp<T>;
}
export declare const letterSpacing: import("../types").StyleGenerator<LetterSpacingProps<{}>>;
export interface ColorProps<T = {}> {
color?: SystemProperty<ColorGetter<T> | CSS.Property.Color, T>;
export declare const color: import("../types").StyleGenerator;
declare type TextTransformProp<T extends ITheme> = SystemProp<CSS.Property.TextTransform, T>;
export interface TextTransformProps<T extends ITheme = Theme> {
textTransform?: TextTransformProp<T>;
motionSafeTextTransform?: TextTransformProp<T>;
motionReduceTextTransform?: TextTransformProp<T>;
firstTextTransform?: TextTransformProp<T>;
lastTextTransform?: TextTransformProp<T>;
oddTextTransform?: TextTransformProp<T>;
evenTextTransform?: TextTransformProp<T>;
visitedTextTransform?: TextTransformProp<T>;
checkedTextTransform?: TextTransformProp<T>;
focusWithinTextTransform?: TextTransformProp<T>;
hoverTextTransform?: TextTransformProp<T>;
focusTextTransform?: TextTransformProp<T>;
focusVisibleTextTransform?: TextTransformProp<T>;
activeTextTransform?: TextTransformProp<T>;
disabledTextTransform?: TextTransformProp<T>;
placeholderTextTransform?: TextTransformProp<T>;
}
export declare const color: import("../types").StyleGenerator<ColorProps<{}>>;
export interface TextTransformProps<T = {}> {
textTransform?: SystemProperty<CSS.Property.TextTransform, T>;
export declare const textTransform: import("../types").StyleGenerator;
declare type TextDecorationProp<T extends ITheme> = SystemProp<CSS.Property.TextDecoration, T>;
export interface TextDecorationProps<T extends ITheme = Theme> {
textDecoration?: TextDecorationProp<T>;
motionSafeTextDecoration?: TextDecorationProp<T>;
motionReduceTextDecoration?: TextDecorationProp<T>;
firstTextDecoration?: TextDecorationProp<T>;
lastTextDecoration?: TextDecorationProp<T>;
oddTextDecoration?: TextDecorationProp<T>;
evenTextDecoration?: TextDecorationProp<T>;
visitedTextDecoration?: TextDecorationProp<T>;
checkedTextDecoration?: TextDecorationProp<T>;
focusWithinTextDecoration?: TextDecorationProp<T>;
hoverTextDecoration?: TextDecorationProp<T>;
focusTextDecoration?: TextDecorationProp<T>;
focusVisibleTextDecoration?: TextDecorationProp<T>;
activeTextDecoration?: TextDecorationProp<T>;
disabledTextDecoration?: TextDecorationProp<T>;
placeholderTextDecoration?: TextDecorationProp<T>;
}
export declare const textTransform: import("../types").StyleGenerator<TextTransformProps<{}>>;
export declare type TypographyProps<T = {}> = FontFamilyProps<T> & FontSizeProps<T> & FontStyleProps<T> & LineHeightProps<T> & FontWeightProps<T> & TextAlignProps<T> & LetterSpacingProps<T> & ColorProps<T> & TextTransformProps<T>;
export declare const typography: import("../types").StyleGenerator<TypographyProps<{}>>;
export declare const textDecoration: import("../types").StyleGenerator;
declare type TextAlignProp<T extends ITheme> = SystemProp<CSS.Property.TextAlign, T>;
export interface TextAlignProps<T extends ITheme = Theme> {
textAlign?: TextAlignProp<T>;
motionSafeTextAlign?: TextAlignProp<T>;
motionReduceTextAlign?: TextAlignProp<T>;
firstTextAlign?: TextAlignProp<T>;
lastTextAlign?: TextAlignProp<T>;
oddTextAlign?: TextAlignProp<T>;
evenTextAlign?: TextAlignProp<T>;
visitedTextAlign?: TextAlignProp<T>;
checkedTextAlign?: TextAlignProp<T>;
focusWithinTextAlign?: TextAlignProp<T>;
hoverTextAlign?: TextAlignProp<T>;
focusTextAlign?: TextAlignProp<T>;
focusVisibleTextAlign?: TextAlignProp<T>;
activeTextAlign?: TextAlignProp<T>;
disabledTextAlign?: TextAlignProp<T>;
placeholderTextAlign?: TextAlignProp<T>;
}
export declare const textAlign: import("../types").StyleGenerator;
declare type VerticalAlignProp<T extends ITheme> = SystemProp<CSS.Property.VerticalAlign, T>;
export interface VerticalAlignProps<T extends ITheme = Theme> {
verticalAlign?: VerticalAlignProp<T>;
motionSafeVerticalAlign?: VerticalAlignProp<T>;
motionReduceVerticalAlign?: VerticalAlignProp<T>;
firstVerticalAlign?: VerticalAlignProp<T>;
lastVerticalAlign?: VerticalAlignProp<T>;
oddVerticalAlign?: VerticalAlignProp<T>;
evenVerticalAlign?: VerticalAlignProp<T>;
visitedVerticalAlign?: VerticalAlignProp<T>;
checkedVerticalAlign?: VerticalAlignProp<T>;
focusWithinVerticalAlign?: VerticalAlignProp<T>;
hoverVerticalAlign?: VerticalAlignProp<T>;
focusVerticalAlign?: VerticalAlignProp<T>;
focusVisibleVerticalAlign?: VerticalAlignProp<T>;
activeVerticalAlign?: VerticalAlignProp<T>;
disabledVerticalAlign?: VerticalAlignProp<T>;
placeholderVerticalAlign?: VerticalAlignProp<T>;
}
export declare const verticalAlign: import("../types").StyleGenerator;
declare type WhiteSpaceProp<T extends ITheme> = SystemProp<CSS.Property.WhiteSpace, T>;
export interface WhiteSpaceProps<T extends ITheme = Theme> {
whiteSpace?: WhiteSpaceProp<T>;
motionSafeWhiteSpace?: WhiteSpaceProp<T>;
motionReduceWhiteSpace?: WhiteSpaceProp<T>;
firstWhiteSpace?: WhiteSpaceProp<T>;
lastWhiteSpace?: WhiteSpaceProp<T>;
oddWhiteSpace?: WhiteSpaceProp<T>;
evenWhiteSpace?: WhiteSpaceProp<T>;
visitedWhiteSpace?: WhiteSpaceProp<T>;
checkedWhiteSpace?: WhiteSpaceProp<T>;
focusWithinWhiteSpace?: WhiteSpaceProp<T>;
hoverWhiteSpace?: WhiteSpaceProp<T>;
focusWhiteSpace?: WhiteSpaceProp<T>;
focusVisibleWhiteSpace?: WhiteSpaceProp<T>;
activeWhiteSpace?: WhiteSpaceProp<T>;
disabledWhiteSpace?: WhiteSpaceProp<T>;
placeholderWhiteSpace?: WhiteSpaceProp<T>;
}
export declare const whiteSpace: import("../types").StyleGenerator;
declare type TextOverflowProp<T extends ITheme> = SystemProp<CSS.Property.TextOverflow, T>;
export interface TextOverflowProps<T extends ITheme = Theme> {
textOverflow?: TextOverflowProp<T>;
motionSafeTextOverflow?: TextOverflowProp<T>;
motionReduceTextOverflow?: TextOverflowProp<T>;
firstTextOverflow?: TextOverflowProp<T>;
lastTextOverflow?: TextOverflowProp<T>;
oddTextOverflow?: TextOverflowProp<T>;
evenTextOverflow?: TextOverflowProp<T>;
visitedTextOverflow?: TextOverflowProp<T>;
checkedTextOverflow?: TextOverflowProp<T>;
focusWithinTextOverflow?: TextOverflowProp<T>;
hoverTextOverflow?: TextOverflowProp<T>;
focusTextOverflow?: TextOverflowProp<T>;
focusVisibleTextOverflow?: TextOverflowProp<T>;
activeTextOverflow?: TextOverflowProp<T>;
disabledTextOverflow?: TextOverflowProp<T>;
placeholderTextOverflow?: TextOverflowProp<T>;
}
export declare const textOverflow: import("../types").StyleGenerator;
declare type ListStyleTypeProp<T extends ITheme> = SystemProp<CSS.Property.ListStyleType, T>;
export interface ListStyleTypeProps<T extends ITheme = Theme> {
listStyleType?: ListStyleTypeProp<T>;
motionSafeListStyleType?: ListStyleTypeProp<T>;
motionReduceListStyleType?: ListStyleTypeProp<T>;
firstListStyleType?: ListStyleTypeProp<T>;
lastListStyleType?: ListStyleTypeProp<T>;
oddListStyleType?: ListStyleTypeProp<T>;
evenListStyleType?: ListStyleTypeProp<T>;
visitedListStyleType?: ListStyleTypeProp<T>;
checkedListStyleType?: ListStyleTypeProp<T>;
focusWithinListStyleType?: ListStyleTypeProp<T>;
hoverListStyleType?: ListStyleTypeProp<T>;
focusListStyleType?: ListStyleTypeProp<T>;
focusVisibleListStyleType?: ListStyleTypeProp<T>;
activeListStyleType?: ListStyleTypeProp<T>;
disabledListStyleType?: ListStyleTypeProp<T>;
placeholderListStyleType?: ListStyleTypeProp<T>;
}
export declare const listStyleType: import("../types").StyleGenerator;
declare type ListStylePositionProp<T extends ITheme> = SystemProp<CSS.Property.ListStylePosition, T>;
export interface ListStylePositionProps<T extends ITheme = Theme> {
listStylePosition?: ListStylePositionProp<T>;
motionSafeListStylePosition?: ListStylePositionProp<T>;
motionReduceListStylePosition?: ListStylePositionProp<T>;
firstListStylePosition?: ListStylePositionProp<T>;
lastListStylePosition?: ListStylePositionProp<T>;
oddListStylePosition?: ListStylePositionProp<T>;
evenListStylePosition?: ListStylePositionProp<T>;
visitedListStylePosition?: ListStylePositionProp<T>;
checkedListStylePosition?: ListStylePositionProp<T>;
focusWithinListStylePosition?: ListStylePositionProp<T>;
hoverListStylePosition?: ListStylePositionProp<T>;
focusListStylePosition?: ListStylePositionProp<T>;
focusVisibleListStylePosition?: ListStylePositionProp<T>;
activeListStylePosition?: ListStylePositionProp<T>;
disabledListStylePosition?: ListStylePositionProp<T>;
placeholderListStylePosition?: ListStylePositionProp<T>;
}
export declare const listStylePosition: import("../types").StyleGenerator;
export declare type TypographyProps<T extends ITheme = Theme> = FontFamilyProps<T> & FontSizeProps<T> & FontStyleProps<T> & LineHeightProps<T> & FontWeightProps<T> & TextAlignProps<T> & LetterSpacingProps<T> & ColorProps<T> & TextTransformProps<T> & TextDecorationProps<T> & VerticalAlignProps<T> & WhiteSpaceProps<T> & TextOverflowProps<T> & ListStyleTypeProps<T> & ListStylePositionProps<T>;
export declare const typography: import("../types").StyleGenerator;
export {};

1823

dist/system.cjs.development.js

@@ -16,12 +16,18 @@ 'use strict';

};
var ms = /*#__PURE__*/unit('ms');
var px = /*#__PURE__*/unit('px');
var deg = /*#__PURE__*/unit('deg');
var pxToRem = function pxToRem(value) {
return round(value / 16);
var pxToRem = function pxToRem(value, _temp) {
var _ref = _temp === void 0 ? {} : _temp,
_ref$rootFontSize = _ref.rootFontSize,
rootFontSize = _ref$rootFontSize === void 0 ? 16 : _ref$rootFontSize;
return round(value / rootFontSize);
};
var remPx = function remPx(value) {
return util.num(value) && value !== 0 ? pxToRem(value) + "rem" : value;
var remPx = function remPx(value, options) {
return util.num(value) && value !== 0 ? pxToRem(value, options) + "rem" : value;
};
var rpx = function rpx(value) {
var rpx = function rpx(value, options) {
if (!util.string(value) || value.length < 4) return value;

@@ -32,3 +38,3 @@ var unit = value.slice(-3);

if (n === 0) return 0;
return pxToRem(n) + "rem";
return pxToRem(n, options) + "rem";
};

@@ -39,13 +45,33 @@ var percent = function percent(n) {

var DEFAULT_BREAKPOINTS = {
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200
function toNegative(value) {
if (util.string(value)) return "-" + value;
return value * -1;
}
var transformNegative = function transformNegative(_, _ref2) {
var rawValue = _ref2.rawValue,
variants = _ref2.variants,
props = _ref2.props;
if (util.string(rawValue)) {
var _neg = rawValue.startsWith('-');
var absoluteValue = _neg ? rawValue.substr(1) : rawValue;
var variantValue = util.getThemeValue(props, absoluteValue, variants);
var _value = util.is(variantValue) ? variantValue : absoluteValue;
return _neg ? toNegative(_value) : _value;
}
var abs = Math.abs(rawValue);
var neg = util.negative(rawValue);
var value = util.is(variants && variants[abs]) ? variants[abs] : abs;
return neg ? toNegative(value) : value;
};
function getBreakpoints(props) {
var themeBreakpoints = util.getThemeValue(props, 'breakpoints');
var themeBreakpoints = util.getThemeValue(props, 'screens');
if (util.is(themeBreakpoints)) return themeBreakpoints;
return DEFAULT_BREAKPOINTS;
return {};
}

@@ -84,3 +110,22 @@ var mediaMinWidth = function mediaMinWidth(value) {

var defaultStates = {
motionSafe: '@media (prefers-reduced-motion: no-preference)',
motionReduce: '@media (prefers-reduced-motion: reduce)',
first: '&:first-child',
last: '&:last-child',
odd: '&:odd',
even: '&:even',
visited: '&:visited',
checked: '&:checked',
focusWithin: '&:focus-within',
hover: '&:hover',
focus: '&:focus',
focusVisible: '&:focus-visible',
active: '&:active',
disabled: '&:disabled',
placeholder: '&::placeholder'
};
/* eslint-disable no-continue, no-underscore-dangle, no-restricted-syntax, guard-for-in, no-multi-assign */
var defaultStateKeys = /*#__PURE__*/Object.keys(defaultStates);
var cacheSupported = typeof Map !== 'undefined' && typeof WeakMap !== 'undefined';

@@ -114,2 +159,3 @@ var caches = cacheSupported ? /*#__PURE__*/new WeakMap() : null;

var themeGetterId = 0;
var SPACES = /\s+/;
var themeGetter = function themeGetter(_ref) {

@@ -120,27 +166,57 @@ var name = _ref.name,

defaultVariants = _ref.defaultVariants,
compose = _ref.compose;
compose = _ref.compose,
shorthand = _ref.shorthand;
var id = themeGetterId++;
var getter = function getter(value) {
var getter = function getter(value, defaultValue) {
return function (props) {
var res = value;
if (!util.string(value) && !util.num(value)) return res;
if (!util.string(value) && !util.num(value) && value !== true) return res;
var cacheKey = value + "-" + defaultValue;
var cache = getCacheNamespace(props.theme, "__themeGetter" + id);
if (cache.has(value)) return cache.get(value);
var variants = util.is(key) ? util.getThemeValue(props, key) : null;
variants = util.is(variants) ? variants : defaultVariants;
res = util.is(variants) ? util.getThemeValue(props, value, variants) : null;
res = util.is(res) ? res : value;
var transform = (name && props.theme && props.theme.transformers ? props.theme.transformers[name] : null) || defaultTransform;
if (cache.has(cacheKey)) return cache.get(cacheKey);
if (transform) {
res = transform(res, {
rawValue: value,
variants: variants,
props: props
});
var getValue = function getValue(value) {
var localDefaultValue = util.is(defaultValue) ? defaultValue : value;
var res = value;
var variants = util.is(key) ? util.getThemeValue(props, key) : null;
variants = util.is(variants) ? variants : defaultVariants;
if (util.is(variants)) {
// @ts-ignore
res = util.getThemeValue(props, value === true ? 'default' : value, variants);
res = Array.isArray(res) ? res.join(',') : res;
}
var rawValue = value;
if (!util.is(res)) {
rawValue = localDefaultValue;
res = localDefaultValue;
}
var transform = (name && props.theme && props.theme.transformers ? props.theme.transformers[name] : null) || defaultTransform;
if (transform) {
res = transform(res, {
rawValue: rawValue,
variants: variants,
props: props
});
}
return compose ? compose(res)(props) : res;
};
if (shorthand && util.string(value)) {
var values = value.split(SPACES); // @ts-ignore
res = values.map(function (value) {
return getValue(value);
}).join(' ');
} else {
res = getValue(value);
}
res = compose ? compose(res)(props) : res;
cache.set(value, res);
cache.set(cacheKey, res);
return res;

@@ -156,18 +232,2 @@ };

};
function styleFromValue(cssProperties, value, props, themeGet, cache) {
if (util.obj(value)) return null;
if (cache.has(value)) return cache.get(value);
var computedValue = themeGet(value)(props);
if (!util.string(computedValue) && !util.num(computedValue)) return null;
var style = {};
for (var key in cssProperties) {
style[cssProperties[key]] = computedValue;
}
cache.set(value, style);
return style;
}
function createStyleGenerator(getStyle, props, generators) {

@@ -228,3 +288,12 @@ var generator = getStyle;

function getStyleFactory(prop, cssProperties, themeGet) {
function styleFromValue(mixin, value, props, themeGet, cache) {
if (util.obj(value)) return null;
if (cache.has(value)) return cache.get(value);
var computedValue = themeGet(value)(props);
var style = mixin(computedValue);
cache.set(value, style);
return style;
}
function getStyleFactory(prop, mixin, themeGet) {
return function getStyle(props) {

@@ -237,10 +306,20 @@ var value = props[prop];

return reduceBreakpoints(props, value, function (breakpointValue) {
return styleFromValue(cssProperties, breakpointValue, props, themeGet, cache);
return styleFromValue(mixin, breakpointValue, props, themeGet, cache);
}, cache);
}
return styleFromValue(cssProperties, value, props, themeGet, cache);
return styleFromValue(mixin, value, props, themeGet, cache);
};
}
function scopeStyleGetter(selector, getStyle) {
return function (props) {
var _ref2;
var result = getStyle(props);
if (result === null) return result;
return _ref2 = {}, _ref2[selector] = result, _ref2;
};
}
function indexGeneratorsByProp(styles) {

@@ -263,16 +342,16 @@ var index = {};

function getMediaOrder(styles, props) {
var medias = {};
function sortStyles(styles, props) {
var breakpoints = getBreakpoints(props);
var stylesProperties = Object.keys(styles);
var breakpointsStyles = {};
for (var key in breakpoints) {
var breakpoint = breakpoints[key];
var currentMediaKey = "@media (min-width: " + breakpoint + "px)";
var isValid = stylesProperties.includes(currentMediaKey);
if (!isValid) continue;
medias[currentMediaKey] = styles[currentMediaKey];
var min = getBreakpointMin(breakpoints, key);
var mediaMin = mediaMinWidth(min);
if (!mediaMin) continue;
var _style3 = styles[mediaMin];
if (!_style3) continue;
breakpointsStyles[mediaMin] = _style3;
}
return medias;
return util.assign(styles, breakpointsStyles);
}

@@ -306,9 +385,9 @@

if (generator) {
var _style3 = generator.meta.getStyle(props);
var _style4 = generator.meta.getStyle(props);
util.merge(styles, _style3);
util.merge(styles, _style4);
}
}
return util.assign(getMediaOrder(styles, props), styles);
return sortStyles(styles, props);
}

@@ -321,16 +400,40 @@

}
function style(_ref2) {
var prop = _ref2.prop,
cssProperty = _ref2.cssProperty,
key = _ref2.key,
transform = _ref2.transform,
themeGet = _ref2.themeGet;
var getMixinFromCSSProperties = function getMixinFromCSSProperties(properties) {
return function (value) {
var _ref3;
if (!util.string(value) && !util.num(value)) return null;
if (util.string(properties)) return _ref3 = {}, _ref3[properties] = value, _ref3;
var style = {};
for (var key in properties) {
style[properties[key]] = value;
}
return style;
};
};
var getMixinFromCSSProperty = function getMixinFromCSSProperty(cssProperty) {
if (util.func(cssProperty)) return cssProperty;
return getMixinFromCSSProperties(cssProperty);
};
function style(_ref4) {
var prop = _ref4.prop,
cssProperty = _ref4.cssProperty,
key = _ref4.key,
transform = _ref4.transform,
themeGet = _ref4.themeGet,
_ref4$states = _ref4.states,
states = _ref4$states === void 0 ? defaultStates : _ref4$states;
if (Array.isArray(prop)) {
var _cssProperties = cssProperty ? Array.isArray(cssProperty) ? cssProperty : [cssProperty] : prop;
var _mixin = cssProperty ? getMixinFromCSSProperty(cssProperty) : cssProperty;
var generators = prop.map(function (prop) {
var _generators = prop.map(function (prop) {
return style({
prop: prop,
cssProperty: _cssProperties,
cssProperty: _mixin,
key: key,

@@ -342,6 +445,7 @@ transform: transform,

return compose.apply(void 0, generators);
return compose.apply(void 0, _generators);
}
var cssProperties = cssProperty ? Array.isArray(cssProperty) ? cssProperty : [cssProperty] : [prop];
var mixin = getMixinFromCSSProperty(cssProperty || [prop]);
themeGet = themeGet || themeGetter({

@@ -351,6 +455,34 @@ key: key,

});
var getStyle = getStyleFactory(prop, cssProperties, themeGet);
return createStyleGenerator(getStyle, [prop]);
var capitalizedProp = prop.charAt(0).toUpperCase() + prop.slice(1);
var generators = [];
var stateNames = states === defaultStates ? defaultStateKeys : Object.keys(states);
for (var i = 0; i < stateNames.length; i++) {
var stateName = stateNames[i];
var stateProp = "" + stateName + capitalizedProp;
var _getStyle = scopeStyleGetter(states[stateName], getStyleFactory(stateProp, mixin, themeGet));
var _generator = createStyleGenerator(_getStyle, [stateProp]);
generators.push(_generator);
}
var getStyle = getStyleFactory(prop, mixin, themeGet);
var generator = createStyleGenerator(getStyle, [prop]);
generators.push(generator); // @ts-ignore
return compose.apply(void 0, generators);
}
var getAnimation = /*#__PURE__*/themeGetter({
name: 'animation',
key: 'animations'
});
var animation = /*#__PURE__*/style({
prop: 'animation',
themeGet: getAnimation
});
var animations = /*#__PURE__*/compose(animation);
var getColor = /*#__PURE__*/themeGetter({

@@ -360,36 +492,20 @@ name: 'color',

});
var getPx = /*#__PURE__*/themeGetter({
name: 'px',
transform: function transform(value) {
return px(rpx(value));
}
});
var getPercent = /*#__PURE__*/themeGetter({
name: 'percent',
transform: percent,
compose: getPx
});
var getRadius = /*#__PURE__*/themeGetter({
name: 'radius',
key: 'radii',
compose: getPx
});
var getTransition = /*#__PURE__*/themeGetter({
name: 'transition',
key: 'transitions'
});
var opacity = /*#__PURE__*/style({
prop: 'opacity'
});
var overflow = /*#__PURE__*/style({
prop: 'overflow'
});
var transition = /*#__PURE__*/style({
prop: 'transition',
themeGet: getTransition
});
var basics = /*#__PURE__*/compose(opacity, overflow, transition);
var gradientBackgrounds = {
'gradient-to-t': 'linear-gradient(to top, var(--x-gradient-stops))',
'gradient-to-tr': 'linear-gradient(to top right, var(--x-gradient-stops))',
'gradient-to-r': 'linear-gradient(to right, var(--x-gradient-stops))',
'gradient-to-br': 'linear-gradient(to bottom right, var(--x-gradient-stops))',
'gradient-to-b': 'linear-gradient(to bottom, var(--x-gradient-stops))',
'gradient-to-bl': 'linear-gradient(to bottom left, var(--x-gradient-stops))',
'gradient-to-l': 'linear-gradient(to left, var(--x-gradient-stops))',
'gradient-to-tl': 'linear-gradient(to top left, var(--x-gradient-stops))'
};
var background = /*#__PURE__*/style({
prop: 'background'
prop: 'background',
cssProperty: function cssProperty(value) {
return {
background: gradientBackgrounds[value] || value
};
}
});

@@ -402,3 +518,8 @@ var backgroundColor = /*#__PURE__*/style({

var backgroundImage = /*#__PURE__*/style({
prop: 'backgroundImage'
prop: 'backgroundImage',
cssProperty: function cssProperty(value) {
return {
backgroundImage: gradientBackgrounds[value] || value
};
}
});

@@ -414,4 +535,68 @@ var backgroundSize = /*#__PURE__*/style({

});
var backgrounds = /*#__PURE__*/compose(background, backgroundColor, backgroundImage, backgroundSize, backgroundPosition, backgroundRepeat);
var backgroundAttachment = /*#__PURE__*/style({
prop: 'backgroundAttachment'
});
var backgroundClip = /*#__PURE__*/style({
prop: 'backgroundClip',
cssProperty: ['backgroundClip', '-webkitBackgroundClip']
});
var gradientFrom = /*#__PURE__*/style({
prop: 'gradientFrom',
themeGet: getColor,
cssProperty: function cssProperty(value) {
return {
'--x-gradient-from': value,
'--x-gradient-stops': 'var(--x-gradient-from), var(--x-gradient-to, transparent)'
};
}
});
var gradientVia = /*#__PURE__*/style({
prop: 'gradientVia',
themeGet: getColor,
cssProperty: function cssProperty(value) {
return {
'--x-gradient-stops': "var(--x-gradient-from), " + value + ", var(--x-gradient-to, transparent)"
};
}
});
var gradientTo = /*#__PURE__*/style({
prop: 'gradientTo',
themeGet: getColor,
cssProperty: '--x-gradient-to'
});
var backgrounds = /*#__PURE__*/compose(background, backgroundColor, backgroundImage, backgroundSize, backgroundPosition, backgroundRepeat, backgroundAttachment, backgroundClip, gradientFrom, gradientVia, gradientTo);
var getPx = /*#__PURE__*/themeGetter({
name: 'px',
transform: function transform(value, _ref) {
var _props$theme$settings, _props$theme, _props$theme$settings2;
var props = _ref.props;
var rootFontSize = (_props$theme$settings = props == null ? void 0 : (_props$theme = props.theme) == null ? void 0 : (_props$theme$settings2 = _props$theme.settings) == null ? void 0 : _props$theme$settings2.rootFontSize) != null ? _props$theme$settings : undefined;
var num = Number(value);
return px(rpx(Number.isNaN(num) ? value : num, {
rootFontSize: rootFontSize
}));
}
});
var getDuration = /*#__PURE__*/themeGetter({
name: 'duration',
transform: function transform(value) {
var num = Number(value);
return ms(Number.isNaN(num) ? value : num);
}
});
var getAngle = /*#__PURE__*/themeGetter({
name: 'angle',
transform: function transform(value) {
var num = Number(value);
return deg(Number.isNaN(num) ? value : num);
}
});
var getPercent = /*#__PURE__*/themeGetter({
name: 'percent',
transform: percent,
compose: getPx
});
var getBorder = /*#__PURE__*/themeGetter({

@@ -427,4 +612,10 @@ name: 'border',

key: 'borderWidths',
compose: getPx
compose: getPx,
shorthand: true
});
var getBorderColor = /*#__PURE__*/themeGetter({
name: 'borderColor',
compose: getColor,
shorthand: true
});
var getBorderStyle = /*#__PURE__*/themeGetter({

@@ -438,37 +629,5 @@ name: 'borderStyle',

});
var borderTop = /*#__PURE__*/style({
prop: 'borderTop',
themeGet: getBorder
});
var borderTopColor = /*#__PURE__*/style({
prop: 'borderTopColor',
themeGet: getColor
});
var borderRight = /*#__PURE__*/style({
prop: 'borderRight',
themeGet: getBorder
});
var borderRightColor = /*#__PURE__*/style({
prop: 'borderRightColor',
themeGet: getColor
});
var borderBottom = /*#__PURE__*/style({
prop: 'borderBottom',
themeGet: getBorder
});
var borderBottomColor = /*#__PURE__*/style({
prop: 'borderBottomColor',
themeGet: getColor
});
var borderLeft = /*#__PURE__*/style({
prop: 'borderLeft',
themeGet: getBorder
});
var borderLeftColor = /*#__PURE__*/style({
prop: 'borderLeftColor',
themeGet: getColor
});
var borderColor = /*#__PURE__*/style({
prop: 'borderColor',
themeGet: getColor
themeGet: getBorderColor
});

@@ -483,49 +642,317 @@ var borderWidth = /*#__PURE__*/style({

});
var outline = /*#__PURE__*/style({
prop: 'outline',
themeGet: getBorder
});
var outlineColor = /*#__PURE__*/style({
prop: 'outlineColor',
themeGet: getColor
});
var outlineWidth = /*#__PURE__*/style({
prop: 'outlineWidth',
themeGet: getBorderWidth
});
var outlineStyle = /*#__PURE__*/style({
prop: 'outlineStyle',
themeGet: getBorderStyle
});
var getRadius = /*#__PURE__*/themeGetter({
name: 'radius',
key: 'radii',
compose: getPx,
shorthand: true
});
var borderRadius = /*#__PURE__*/style({
prop: 'borderRadius',
themeGet: getRadius
}); // Divide
var divideSelector = "& > :not([hidden]) ~ :not([hidden])";
var divideY = /*#__PURE__*/style({
prop: 'divideY',
themeGet: getBorderWidth,
cssProperty: function cssProperty(value) {
var _ref;
var v = value === true ? 1 : value;
return _ref = {}, _ref[divideSelector] = {
'--x-divide-y-reverse': 0,
borderTopWidth: "calc(" + v + " * calc(1 - var(--x-divide-y-reverse)))",
borderBottomWidth: "calc(" + v + " * var(--x-divide-y-reverse))"
}, _ref;
}
});
var borders = /*#__PURE__*/compose(border, borderTop, borderTopColor, borderRight, borderRightColor, borderBottom, borderBottomColor, borderLeft, borderLeftColor, borderColor, borderWidth, borderStyle, borderRadius);
var divideX = /*#__PURE__*/style({
prop: 'divideX',
themeGet: getBorderWidth,
cssProperty: function cssProperty(value) {
var _ref2;
var getSize = /*#__PURE__*/themeGetter({
name: 'size',
key: 'sizes',
compose: getPercent
var v = value === true ? 1 : value;
return _ref2 = {}, _ref2[divideSelector] = {
'--x-divide-x-reverse': 0,
borderRightWidth: "calc(" + v + " * var(--x-divide-x-reverse))",
borderLeftWidth: "calc(" + v + " * calc(1 - var(--x-divide-x-reverse)))"
}, _ref2;
}
});
var divideXReverse = /*#__PURE__*/style({
prop: 'divideXReverse',
cssProperty: function cssProperty() {
var _ref3;
return _ref3 = {}, _ref3[divideSelector] = {
'--x-divide-x-reverse': '1'
}, _ref3;
}
});
var divideYReverse = /*#__PURE__*/style({
prop: 'divideYReverse',
cssProperty: function cssProperty() {
var _ref4;
return _ref4 = {}, _ref4[divideSelector] = {
'--x-divide-y-reverse': '1'
}, _ref4;
}
});
var divideColor = /*#__PURE__*/style({
prop: 'divideColor',
themeGet: getBorderColor,
cssProperty: function cssProperty(value) {
var _ref5;
return _ref5 = {}, _ref5[divideSelector] = {
borderColor: value
}, _ref5;
}
});
var divideStyle = /*#__PURE__*/style({
prop: 'divideStyle',
themeGet: getBorderStyle,
cssProperty: function cssProperty(value) {
var _ref6;
return _ref6 = {}, _ref6[divideSelector] = {
borderStyle: value
}, _ref6;
}
});
var getRingWidth = /*#__PURE__*/themeGetter({
name: 'ringWidth',
key: 'ringWidths',
compose: getPx
});
var ring = /*#__PURE__*/style({
prop: 'ring',
themeGet: getRingWidth,
cssProperty: function cssProperty(value) {
return {
'--x-ring-shadow': "var(--x-ring-inset, /*!*/ /*!*/) 0 0 0 " + value + " var(--x-ring-color)",
boxShadow: 'var(--x-ring-shadow, 0 0 #0000), var(--x-shadow, 0 0 #0000)'
};
}
});
var ringInset = /*#__PURE__*/style({
prop: 'ringInset',
cssProperty: function cssProperty() {
return {
'--x-ring-inset': 'inset'
};
}
});
var ringColor = /*#__PURE__*/style({
prop: 'ringColor',
themeGet: getColor,
cssProperty: function cssProperty(value) {
return {
'--x-ring-color': value
};
}
});
var borders = /*#__PURE__*/compose(border, borderColor, borderWidth, borderStyle, borderRadius, outline, outlineColor, outlineWidth, outlineStyle, divideX, divideY, divideXReverse, divideYReverse, divideColor, divideStyle, ring, ringInset, ringColor);
var getShadow = /*#__PURE__*/themeGetter({
name: 'shadow',
key: 'shadows'
});
var opacity = /*#__PURE__*/style({
prop: 'opacity'
});
var boxShadow = /*#__PURE__*/style({
prop: 'boxShadow',
themeGet: getShadow,
cssProperty: function cssProperty(value) {
return {
'--x-shadow': value,
boxShadow: 'var(--x-ring-shadow, 0 0 #0000), var(--x-shadow)'
};
}
});
var textShadow = /*#__PURE__*/style({
prop: 'textShadow',
themeGet: getShadow
});
var effects = /*#__PURE__*/compose(opacity, boxShadow, textShadow);
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _taggedTemplateLiteralLoose(strings, raw) {
if (!raw) {
raw = strings.slice(0);
}
strings.raw = raw;
return strings;
}
var row = /*#__PURE__*/style({
prop: 'row',
cssProperty: function cssProperty() {
return {
boxSizing: 'border-box',
flexGrow: 1,
flexWrap: 'wrap',
display: 'flex'
};
}
});
function getColStyle(props, size) {
if (size === true) {
return {
flexBasis: 0,
flexGrow: 1,
maxWidth: '100%'
};
}
if (size === 'auto') {
return {
flex: "0 0 auto",
maxWidth: 'none',
width: 'auto'
};
}
var sizeWidth = getPercent(size)(props);
return {
flex: "0 0 " + sizeWidth,
maxWidth: sizeWidth
};
}
var col = /*#__PURE__*/createStyleGenerator(function (props) {
var value = props.col;
var common = {
boxSizing: 'border-box',
flexBasis: 0,
flexGrow: 1,
maxWidth: '100%'
};
if (util.obj(value)) {
var breakpointsStyle = reduceBreakpoints(props, value, function (breakpointValue) {
return getColStyle(props, breakpointValue);
});
return _extends({}, common, breakpointsStyle);
}
return _extends({}, common, getColStyle(props, value));
}, ['col']);
var flexboxGrids = /*#__PURE__*/compose(row, col);
var display = /*#__PURE__*/style({
prop: 'display'
});
var width = /*#__PURE__*/style({
prop: 'width',
themeGet: getSize
var boxSizing = /*#__PURE__*/style({
prop: 'boxSizing'
});
var height = /*#__PURE__*/style({
prop: 'height',
themeGet: getSize
var container = /*#__PURE__*/createStyleGenerator(function (props) {
if (!props.container) return null;
var breakpoints = getBreakpoints(props);
var styles = reduceBreakpoints(props, breakpoints, function (breakpointValue) {
return breakpointValue !== 0 ? {
maxWidth: breakpointValue
} : {};
});
if (util.obj(props.container)) {
styles = reduceBreakpoints(props, props.container, function () {
return styles;
});
}
return _extends({
width: '100%'
}, styles);
}, ['container']);
var overflow = /*#__PURE__*/style({
prop: 'overflow'
});
var maxWidth = /*#__PURE__*/style({
prop: 'maxWidth',
themeGet: getSize
var overflowX = /*#__PURE__*/style({
prop: 'overflowX'
});
var maxHeight = /*#__PURE__*/style({
prop: 'maxHeight',
themeGet: getSize
var overflowY = /*#__PURE__*/style({
prop: 'overflowY'
});
var minWidth = /*#__PURE__*/style({
prop: 'minWidth',
themeGet: getSize
var getZIndex = /*#__PURE__*/themeGetter({
name: 'zIndex',
key: 'zIndices'
});
var minHeight = /*#__PURE__*/style({
prop: 'minHeight',
themeGet: getSize
var zIndex = /*#__PURE__*/style({
prop: 'zIndex',
themeGet: getZIndex
});
var size = /*#__PURE__*/style({
prop: 'size',
cssProperty: ['width', 'height'],
themeGet: getSize
var position = /*#__PURE__*/style({
prop: 'position'
});
var verticalAlign = /*#__PURE__*/style({
prop: 'verticalAlign'
var getInset = /*#__PURE__*/themeGetter({
name: 'inset',
key: 'inset',
compose: getPx,
transform: transformNegative
});
var layout = /*#__PURE__*/compose(display, width, height, maxWidth, maxHeight, minWidth, minHeight, size, verticalAlign);
var top = /*#__PURE__*/style({
prop: 'top',
themeGet: getInset
});
var right = /*#__PURE__*/style({
prop: 'right',
themeGet: getInset
});
var bottom = /*#__PURE__*/style({
prop: 'bottom',
themeGet: getInset
});
var left = /*#__PURE__*/style({
prop: 'left',
themeGet: getInset
});
var visibility = /*#__PURE__*/style({
prop: 'visibility'
});
var overscrollBehavior = /*#__PURE__*/style({
prop: 'overscrollBehavior'
});
var objectFit = /*#__PURE__*/style({
prop: 'objectFit'
});
var layout = /*#__PURE__*/compose(boxSizing, display, container, overflow, overflowX, overflowY, position, zIndex, top, right, bottom, left, visibility, overscrollBehavior, objectFit);

@@ -574,35 +1001,7 @@ var alignItems = /*#__PURE__*/style({

function toNegative(value) {
if (util.string(value)) return "-" + value;
return value * -1;
} // Getters
var defaultSpaceVariants = [0, 4, 8, 16, 24, 48, 96, 144, 192, 240];
var getSpace = /*#__PURE__*/themeGetter({
name: 'space',
key: 'space',
defaultVariants: defaultSpaceVariants,
compose: getPx,
transform: function transform(_, _ref) {
var rawValue = _ref.rawValue,
variants = _ref.variants,
props = _ref.props;
if (util.string(rawValue)) {
var _neg = rawValue.startsWith('-');
var absoluteValue = _neg ? rawValue.substr(1) : rawValue;
var variantValue = util.getThemeValue(props, absoluteValue, variants);
var _value = util.is(variantValue) ? variantValue : absoluteValue;
return _neg ? toNegative(_value) : _value;
}
var abs = Math.abs(rawValue);
var neg = util.negative(rawValue);
var value = util.is(variants[abs]) ? variants[abs] : abs;
return neg ? toNegative(value) : value;
}
transform: transformNegative
});

@@ -679,14 +1078,60 @@ var margin = /*#__PURE__*/style({

});
var space = /*#__PURE__*/compose(margin, marginTop, marginRight, marginBottom, marginLeft, mx, my, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, px$1, py);
var spaceY = /*#__PURE__*/style({
prop: 'spaceY',
themeGet: getSpace,
cssProperty: function cssProperty(value) {
return {
'& > :not([hidden]) ~ :not([hidden])': {
'--x-space-y-reverse': 0,
marginTop: "calc(" + value + " * calc(1 - var(--x-space-y-reverse)))",
marginBottom: "calc(" + value + " * var(--x-space-y-reverse))"
}
};
}
});
var spaceX = /*#__PURE__*/style({
prop: 'spaceX',
themeGet: getSpace,
cssProperty: function cssProperty(value) {
return {
'& > :not([hidden]) ~ :not([hidden])': {
'--x-space-x-reverse': 0,
marginRight: "calc(" + value + " * var(--x-space-x-reverse))",
marginLeft: "calc(" + value + " * calc(1 - var(--x-space-x-reverse)))"
}
};
}
});
var spaceXReverse = /*#__PURE__*/style({
prop: 'spaceXReverse',
cssProperty: function cssProperty() {
return {
'& > :not([hidden]) ~ :not([hidden])': {
'--x-space-x-reverse': '1'
}
};
}
});
var spaceYReverse = /*#__PURE__*/style({
prop: 'spaceYReverse',
cssProperty: function cssProperty() {
return {
'& > :not([hidden]) ~ :not([hidden])': {
'--x-space-y-reverse': '1'
}
};
}
});
var space = /*#__PURE__*/compose(margin, marginTop, marginRight, marginBottom, marginLeft, mx, my, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, px$1, py, spaceX, spaceY, spaceXReverse, spaceYReverse);
var gridGap = /*#__PURE__*/style({
prop: 'gridGap',
var gap = /*#__PURE__*/style({
prop: 'gap',
themeGet: getSpace
});
var gridColumnGap = /*#__PURE__*/style({
prop: 'gridColumnGap',
var columnGap = /*#__PURE__*/style({
prop: 'columnGap',
themeGet: getSpace
});
var gridRowGap = /*#__PURE__*/style({
prop: 'gridRowGap',
var rowGap = /*#__PURE__*/style({
prop: 'rowGap',
themeGet: getSpace

@@ -710,6 +1155,8 @@ });

var gridTemplateColumns = /*#__PURE__*/style({
prop: 'gridTemplateColumns'
prop: 'gridTemplateColumns',
key: 'gridTemplateColumns'
});
var gridTemplateRows = /*#__PURE__*/style({
prop: 'gridTemplateRows'
prop: 'gridTemplateRows',
key: 'gridTemplateRows'
});

@@ -722,47 +1169,188 @@ var gridTemplateAreas = /*#__PURE__*/style({

});
var grids = /*#__PURE__*/compose(gridGap, gridColumnGap, gridRowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
var grids = /*#__PURE__*/compose(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
var getZIndex = /*#__PURE__*/themeGetter({
name: 'zIndex',
key: 'zIndices'
var appearance = /*#__PURE__*/style({
prop: 'appearance'
});
var position = /*#__PURE__*/style({
prop: 'position'
var cursor = /*#__PURE__*/style({
prop: 'cursor'
});
var zIndex = /*#__PURE__*/style({
prop: 'zIndex',
themeGet: getZIndex
var pointerEvents = /*#__PURE__*/style({
prop: 'pointerEvents'
});
var top = /*#__PURE__*/style({
prop: 'top',
themeGet: getPx
var resize = /*#__PURE__*/style({
prop: 'resize'
});
var right = /*#__PURE__*/style({
prop: 'right',
themeGet: getPx
var userSelect = /*#__PURE__*/style({
prop: 'userSelect'
});
var bottom = /*#__PURE__*/style({
prop: 'bottom',
themeGet: getPx
var interactivity = /*#__PURE__*/compose(appearance, cursor, pointerEvents, resize, userSelect);
var getSize = /*#__PURE__*/themeGetter({
name: 'size',
key: 'sizes',
compose: getPercent
});
var left = /*#__PURE__*/style({
prop: 'left',
themeGet: getPx
var width = /*#__PURE__*/style({
prop: 'w',
cssProperty: 'width',
themeGet: getSize
});
var positioning = /*#__PURE__*/compose(position, zIndex, top, right, bottom, left);
var height = /*#__PURE__*/style({
prop: 'h',
cssProperty: 'height',
themeGet: getSize
});
var size = /*#__PURE__*/style({
prop: 'size',
cssProperty: ['width', 'height'],
themeGet: getSize
});
var maxWidth = /*#__PURE__*/style({
prop: 'maxWidth',
themeGet: getSize
});
var maxHeight = /*#__PURE__*/style({
prop: 'maxHeight',
themeGet: getSize
});
var minWidth = /*#__PURE__*/style({
prop: 'minWidth',
themeGet: getSize
});
var minHeight = /*#__PURE__*/style({
prop: 'minHeight',
themeGet: getSize
});
var sizing = /*#__PURE__*/compose(width, height, size, maxWidth, maxHeight, minWidth, minHeight);
var getShadow = /*#__PURE__*/themeGetter({
name: 'shadow',
key: 'shadows'
var fill = /*#__PURE__*/style({
prop: 'fill',
themeGet: getColor
});
var boxShadow = /*#__PURE__*/style({
prop: 'boxShadow',
themeGet: getShadow
var stroke = /*#__PURE__*/style({
prop: 'stroke',
themeGet: getColor
});
var textShadow = /*#__PURE__*/style({
prop: 'textShadow',
themeGet: getShadow
var svg = /*#__PURE__*/compose(fill, stroke);
var borderCollapse = /*#__PURE__*/style({
prop: 'borderCollapse'
});
var shadows = /*#__PURE__*/compose(boxShadow, textShadow);
var tableLayout = /*#__PURE__*/style({
prop: 'tableLayout'
});
var tables = /*#__PURE__*/compose(borderCollapse, tableLayout);
var getTransform = /*#__PURE__*/themeGetter({
name: 'transform',
key: 'transforms'
});
var transform = /*#__PURE__*/style({
prop: 'transform',
themeGet: getTransform,
cssProperty: function cssProperty(value) {
if (value === true) {
return {
'--x-translate-x': 0,
'--x-translate-y': 0,
'--x-rotate': 0,
'--x-skew-x': 0,
'--x-skew-y': 0,
'--x-scale-x': '1',
'--x-scale-y': '1',
transform: 'translate3d(var(--x-translate-x), var(--x-translate-y), 0) rotate(var(--x-rotate)) skewX(var(--x-skew-x)) skewY(var(--x-skew-y)) scaleX(var(--x-scale-x)) scaleY(var(--x-scale-y))'
};
}
return {
transform: value
};
}
});
var transformOrigin = /*#__PURE__*/style({
prop: 'transformOrigin'
});
var translateX = /*#__PURE__*/style({
prop: 'translateX',
cssProperty: '--x-translate-x',
themeGet: getSpace
});
var translateY = /*#__PURE__*/style({
prop: 'translateY',
cssProperty: '--x-translate-y',
themeGet: getSpace
});
var rotate = /*#__PURE__*/style({
prop: 'rotate',
cssProperty: '--x-rotate',
themeGet: getAngle
});
var skewX = /*#__PURE__*/style({
prop: 'skewX',
cssProperty: '--x-skew-x',
themeGet: getAngle
});
var skewY = /*#__PURE__*/style({
prop: 'skewY',
cssProperty: '--x-skew-y',
themeGet: getAngle
});
var scale = /*#__PURE__*/style({
prop: 'scale',
cssProperty: ['--x-scale-x', '--x-scale-y'],
transform: function transform(v) {
return String(v);
}
});
var scaleX = /*#__PURE__*/style({
prop: 'scaleX',
cssProperty: '--x-scale-x',
transform: function transform(v) {
return String(v);
}
});
var scaleY = /*#__PURE__*/style({
prop: 'scaleY',
cssProperty: '--x-scale-y',
transform: function transform(v) {
return String(v);
}
});
var transforms = /*#__PURE__*/compose(transform, transformOrigin, translateX, translateY, rotate, skewX, skewY, scale, scaleX, scaleY);
var getTransition = /*#__PURE__*/themeGetter({
name: 'transition',
key: 'transitions'
});
var getTransitionProperty = /*#__PURE__*/themeGetter({
name: 'transitionProperty',
key: 'transitionProperties'
});
var getTimingFunction = /*#__PURE__*/themeGetter({
name: 'timingFunctions',
key: 'timingFunctions'
});
var transition = /*#__PURE__*/style({
prop: 'transition',
themeGet: getTransition
});
var transitionProperty = /*#__PURE__*/style({
prop: 'transitionProperty',
themeGet: getTransitionProperty
});
var transitionDuration = /*#__PURE__*/style({
prop: 'transitionDuration',
themeGet: getDuration
});
var transitionTimingFunction = /*#__PURE__*/style({
prop: 'transitionTimingFunction',
themeGet: getTimingFunction
});
var transitionDelay = /*#__PURE__*/style({
prop: 'transitionDelay',
themeGet: getDuration
});
var transitions = /*#__PURE__*/compose(transition, transitionProperty, transitionDuration, transitionTimingFunction, transitionDelay);
var getFont = /*#__PURE__*/themeGetter({

@@ -775,3 +1363,11 @@ name: 'font',

key: 'lineHeights',
transform: rpx
transform: function transform(value, _ref) {
var _props$theme$settings, _props$theme, _props$theme$settings2;
var props = _ref.props;
var rootFontSize = (_props$theme$settings = props == null ? void 0 : (_props$theme = props.theme) == null ? void 0 : (_props$theme$settings2 = _props$theme.settings) == null ? void 0 : _props$theme$settings2.rootFontSize) != null ? _props$theme$settings : undefined;
return rpx(value, {
rootFontSize: rootFontSize
});
}
});

@@ -787,7 +1383,5 @@ var getFontWeight = /*#__PURE__*/themeGetter({

});
var defaultFontSizeVariants = [0, 12, 14, 16, 20, 24, 32, 48, 64, 72];
var getFontSize = /*#__PURE__*/themeGetter({
name: 'fontSize',
key: 'fontSizes',
defaultVariants: defaultFontSizeVariants,
compose: getPx

@@ -814,5 +1408,2 @@ });

});
var textAlign = /*#__PURE__*/style({
prop: 'textAlign'
});
var letterSpacing = /*#__PURE__*/style({

@@ -829,100 +1420,36 @@ prop: 'letterSpacing',

});
var typography = /*#__PURE__*/compose(fontFamily, fontSize, fontStyle, lineHeight, fontWeight, textAlign, letterSpacing, color, textTransform);
var textDecoration = /*#__PURE__*/style({
prop: 'textDecoration'
});
var textAlign = /*#__PURE__*/style({
prop: 'textAlign'
});
var verticalAlign = /*#__PURE__*/style({
prop: 'verticalAlign'
});
var whiteSpace = /*#__PURE__*/style({
prop: 'whiteSpace'
});
var textOverflow = /*#__PURE__*/style({
prop: 'textOverflow'
});
var listStyleType = /*#__PURE__*/style({
prop: 'listStyleType'
});
var listStylePosition = /*#__PURE__*/style({
prop: 'listStylePosition'
});
var typography = /*#__PURE__*/compose(fontFamily, fontSize, fontStyle, lineHeight, fontWeight, textAlign, letterSpacing, color, textTransform, textDecoration, verticalAlign, whiteSpace, textOverflow, listStyleType, listStylePosition);
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
var system = /*#__PURE__*/compose(animations, backgrounds, borders, effects, flexboxGrids, flexboxes, grids, interactivity, layout, sizing, space, svg, tables, transforms, transitions, typography);
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
var row = /*#__PURE__*/createStyleGenerator(function () {
return {
boxSizing: 'border-box',
flexGrow: 1,
flexWrap: 'wrap',
display: 'flex'
};
}, ['row']);
function getColStyle(props, size) {
if (size === true) {
return {
flexBasis: 0,
flexGrow: 1,
maxWidth: '100%'
};
}
if (size === 'auto') {
return {
flex: "0 0 auto",
maxWidth: 'none',
width: 'auto'
};
}
var sizeWidth = getPercent(size)(props);
return {
flex: "0 0 " + sizeWidth,
maxWidth: sizeWidth
};
}
var col = /*#__PURE__*/createStyleGenerator(function (props) {
var value = props.col;
var common = {
boxSizing: 'border-box',
flexBasis: 0,
flexGrow: 1,
maxWidth: '100%'
};
if (util.obj(value)) {
var breakpointsStyle = reduceBreakpoints(props, value, function (breakpointValue) {
return getColStyle(props, breakpointValue);
});
return _extends({}, common, breakpointsStyle);
}
return _extends({}, common, getColStyle(props, value));
}, ['col']);
var xgrids = /*#__PURE__*/compose(row, col);
var system = /*#__PURE__*/compose(backgrounds, basics, borders, flexboxes, grids, layout, positioning, shadows, space, typography, xgrids);
var th = function th(path) {
var th = function th(path, defaultValue) {
return function (props) {
var value = util.getThemeValue(props, path);
util.warn(util.is(value), "value \"" + path + "\" not found in theme");
return value;
if (util.is(value)) return value;
if (util.is(defaultValue)) return defaultValue;
return path;
};
};
[getColor, getPx, getPercent, getRadius, getBorder, getBorderWidth, getBorderStyle, getShadow, getSize, getZIndex, getSpace, getFont, getFontSize, getLineHeight, getFontWeight, getLetterSpacing, getTransition].forEach(function (themeGetter) {
[getAngle, getAnimation, getBorder, getBorderColor, getBorderStyle, getBorderWidth, getColor, getDuration, getFont, getFontSize, getFontWeight, getInset, getLetterSpacing, getLineHeight, getPercent, getPx, getRadius, getRingWidth, getShadow, getSize, getSpace, getTimingFunction, getTransform, getTransition, getTransitionProperty, getZIndex].forEach(function (themeGetter) {
if (themeGetter.meta.name) {

@@ -933,20 +1460,2 @@ th[themeGetter.meta.name] = themeGetter;

var variant = function variant(_ref) {
var _ref$key = _ref.key,
key = _ref$key === void 0 ? null : _ref$key,
defaultValue = _ref["default"],
_ref$variants = _ref.variants,
variants = _ref$variants === void 0 ? {} : _ref$variants,
_ref$prop = _ref.prop,
prop = _ref$prop === void 0 ? 'variant' : _ref$prop;
return function (props) {
var themeVariants = util.is(key) ? util.getThemeValue(props, key) : null;
var computedVariants = util.merge(util.assign({}, variants), themeVariants);
var value = props[prop] !== undefined ? props[prop] : defaultValue;
var result = util.getThemeValue(props, value, computedVariants);
util.warn(util.is(result), "variant \"" + value + "\" not found");
return result;
};
};
var up = function up(key, rules) {

@@ -1011,34 +1520,499 @@ return function (props) {

function forwardRefWithAs(forwardRef, component) {
return forwardRef(component);
var defaultAlphaVariants = [0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 100];
function generateAlphaVariants(colors, transform, variants) {
if (transform === void 0) {
transform = function transform(x) {
return x;
};
}
if (variants === void 0) {
variants = defaultAlphaVariants;
}
return Object.keys(colors).reduce(function (obj, key) {
variants.forEach(function (i) {
obj[key + "-a" + i] = transform(colors[key], key, i);
});
return obj;
}, _extends({}, colors));
}
var createSystemComponent = function createSystemComponent(_ref, defaultComponent, system$1) {
var createElement = _ref.createElement,
forwardRef = _ref.forwardRef;
function generateHexAlphaVariants(colors, variants) {
if (variants === void 0) {
variants = defaultAlphaVariants;
}
if (system$1 === void 0) {
system$1 = system;
return generateAlphaVariants(colors, function (value, _, variant) {
return "" + value + Math.round(variant / 100 * 255).toString(16);
}, variants);
}
var defaultTones = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
function aliasColor(alias, color, tones, variants) {
if (tones === void 0) {
tones = defaultTones;
}
function InnerSystemComponent(props, ref) {
var _props$as = props.as,
Type = _props$as === void 0 ? defaultComponent != null ? defaultComponent : 'div' : _props$as,
rest = _objectWithoutPropertiesLoose(props, ["as"]);
if (variants === void 0) {
variants = defaultAlphaVariants;
}
var omitted = util.omit(rest, system$1.meta.props);
return createElement(Type, _extends({
ref: ref
}, omitted));
return tones.reduce(function (obj, tone) {
obj[alias + "-" + tone] = th.color(color + "-" + tone);
variants.forEach(function (i) {
obj[alias + "-" + tone + "-a" + i] = th.color(color + "-" + tone + "-a" + i);
});
return obj;
}, {});
}
var space$1 = {
0.5: '0.125rem',
1: '0.25rem',
1.5: '0.375rem',
2: '0.5rem',
2.5: '0.625rem',
3: '0.75rem',
3.5: '0.875rem',
4: '1rem',
5: '1.25rem',
6: '1.5rem',
7: '1.75rem',
8: '2rem',
9: '2.25rem',
10: '2.5rem',
11: '2.75rem',
12: '3rem',
14: '3.5rem',
16: '4rem',
20: '5rem',
24: '6rem',
28: '7rem',
32: '8rem',
36: '9rem',
40: '10rem',
44: '11rem',
48: '12rem',
52: '13rem',
56: '14rem',
60: '15rem',
64: '16rem',
72: '18rem',
80: '20rem',
96: '24rem'
};
var timingFunctions = {
'ease-in': 'cubic-bezier(0.4, 0, 1, 1)',
'ease-out': 'cubic-bezier(0, 0, 0.2, 1)',
'ease-in-out': 'cubic-bezier(0.4, 0, 0.2, 1)'
};
var transitionProperties = {
"default": ['background-color', 'border-color', 'color', 'fill', 'stroke', 'opacity', 'box-shadow', 'transform'],
colors: ['background-color', 'border-color', 'color', 'fill', 'stroke'],
opacity: ['opacity'],
shadow: ['box-shadow'],
transform: ['transform']
};
var transitions$1 = /*#__PURE__*/Object.keys(transitionProperties).reduce(function (obj, key) {
obj[key] = transitionProperties[key].map(function (property) {
return property + " " + timingFunctions['ease-in-out'] + " 150ms";
}).join(',');
return obj;
}, {});
var colors = {
black: '#000000',
white: '#ffffff',
'blue-gray-50': '#f8fafc',
'blue-gray-100': '#f1f5f9',
'blue-gray-200': '#e2e8f0',
'blue-gray-300': '#cbd5e1',
'blue-gray-400': '#94a3b8',
'blue-gray-500': '#64748b',
'blue-gray-600': '#475569',
'blue-gray-700': '#334155',
'blue-gray-800': '#1e293b',
'blue-gray-900': '#0f172a',
'cool-gray-50': '#f9fafb',
'cool-gray-100': '#f3f4f6',
'cool-gray-200': '#e5e7eb',
'cool-gray-300': '#d1d5db',
'cool-gray-400': '#9ca3af',
'cool-gray-500': '#6b7280',
'cool-gray-600': '#4b5563',
'cool-gray-700': '#374151',
'cool-gray-800': '#1f2937',
'cool-gray-900': '#111827',
'gray-50': '#fafafa',
'gray-100': '#f4f4f5',
'gray-200': '#e4e4e7',
'gray-300': '#d4d4d8',
'gray-400': '#a1a1aa',
'gray-500': '#71717a',
'gray-600': '#52525b',
'gray-700': '#3f3f46',
'gray-800': '#27272a',
'gray-900': '#18181b',
'true-gray-50': '#fafafa',
'true-gray-100': '#f5f5f5',
'true-gray-200': '#e5e5e5',
'true-gray-300': '#d4d4d4',
'true-gray-400': '#a3a3a3',
'true-gray-500': '#737373',
'true-gray-600': '#525252',
'true-gray-700': '#404040',
'true-gray-800': '#262626',
'true-gray-900': '#171717',
'warm-gray-50': '#fafaf9',
'warm-gray-100': '#f5f5f4',
'warm-gray-200': '#e7e5e4',
'warm-gray-300': '#d6d3d1',
'warm-gray-400': '#a8a29e',
'warm-gray-500': '#78716c',
'warm-gray-600': '#57534e',
'warm-gray-700': '#44403c',
'warm-gray-800': '#292524',
'warm-gray-900': '#1c1917',
'red-50': '#fef2f2',
'red-100': '#fee2e2',
'red-200': '#fecaca',
'red-300': '#fca5a5',
'red-400': '#f87171',
'red-500': '#ef4444',
'red-600': '#dc2626',
'red-700': '#b91c1c',
'red-800': '#991b1b',
'red-900': '#7f1d1d',
'orange-50': '#fff7ed',
'orange-100': '#ffedd5',
'orange-200': '#fed7aa',
'orange-300': '#fdba74',
'orange-400': '#fb923c',
'orange-500': '#f97316',
'orange-600': '#ea580c',
'orange-700': '#c2410c',
'orange-800': '#9a3412',
'orange-900': '#7c2d12',
'amber-50': '#fffbeb',
'amber-100': '#fef3c7',
'amber-200': '#fde68a',
'amber-300': '#fcd34d',
'amber-400': '#fbbf24',
'amber-500': '#f59e0b',
'amber-600': '#d97706',
'amber-700': '#b45309',
'amber-800': '#92400e',
'amber-900': '#78350f',
'yellow-50': '#fefce8',
'yellow-100': '#fef9c3',
'yellow-200': '#fef08a',
'yellow-300': '#fde047',
'yellow-400': '#facc15',
'yellow-500': '#eab308',
'yellow-600': '#ca8a04',
'yellow-700': '#a16207',
'yellow-800': '#854d0e',
'yellow-900': '#713f12',
'lime-50': '#f7fee7',
'lime-100': '#ecfccb',
'lime-200': '#d9f99d',
'lime-300': '#bef264',
'lime-400': '#a3e635',
'lime-500': '#84cc16',
'lime-600': '#65a30d',
'lime-700': '#4d7c0f',
'lime-800': '#3f6212',
'lime-900': '#365314',
'green-50': '#f0fdf4',
'green-100': '#dcfce7',
'green-200': '#bbf7d0',
'green-300': '#86efac',
'green-400': '#4ade80',
'green-500': '#22c55e',
'green-600': '#16a34a',
'green-700': '#15803d',
'green-800': '#166534',
'green-900': '#14532d',
'emerald-50': '#ecfdf5',
'emerald-100': '#d1fae5',
'emerald-200': '#a7f3d0',
'emerald-300': '#6ee7b7',
'emerald-400': '#34d399',
'emerald-500': '#10b981',
'emerald-600': '#059669',
'emerald-700': '#047857',
'emerald-800': '#065f46',
'emerald-900': '#064e3b',
'teal-50': '#f0fdfa',
'teal-100': '#ccfbf1',
'teal-200': '#99f6e4',
'teal-300': '#5eead4',
'teal-400': '#2dd4bf',
'teal-500': '#14b8a6',
'teal-600': '#0d9488',
'teal-700': '#0f766e',
'teal-800': '#115e59',
'teal-900': '#134e4a',
'cyan-50': '#ecfeff',
'cyan-100': '#cffafe',
'cyan-200': '#a5f3fc',
'cyan-300': '#67e8f9',
'cyan-400': '#22d3ee',
'cyan-500': '#06b6d4',
'cyan-600': '#0891b2',
'cyan-700': '#0e7490',
'cyan-800': '#155e75',
'cyan-900': '#164e63',
'light-blue-50': '#f0f9ff',
'light-blue-100': '#e0f2fe',
'light-blue-200': '#bae6fd',
'light-blue-300': '#7dd3fc',
'light-blue-400': '#38bdf8',
'light-blue-500': '#0ea5e9',
'light-blue-600': '#0284c7',
'light-blue-700': '#0369a1',
'light-blue-800': '#075985',
'light-blue-900': '#0c4a6e',
'blue-50': '#eff6ff',
'blue-100': '#dbeafe',
'blue-200': '#bfdbfe',
'blue-300': '#93c5fd',
'blue-400': '#60a5fa',
'blue-500': '#3b82f6',
'blue-600': '#2563eb',
'blue-700': '#1d4ed8',
'blue-800': '#1e40af',
'blue-900': '#1e3a8a',
'indigo-50': '#eef2ff',
'indigo-100': '#e0e7ff',
'indigo-200': '#c7d2fe',
'indigo-300': '#a5b4fc',
'indigo-400': '#818cf8',
'indigo-500': '#6366f1',
'indigo-600': '#4f46e5',
'indigo-700': '#4338ca',
'indigo-800': '#3730a3',
'indigo-900': '#312e81',
'violet-50': '#f5f3ff',
'violet-100': '#ede9fe',
'violet-200': '#ddd6fe',
'violet-300': '#c4b5fd',
'violet-400': '#a78bfa',
'violet-500': '#8b5cf6',
'violet-600': '#7c3aed',
'violet-700': '#6d28d9',
'violet-800': '#5b21b6',
'violet-900': '#4c1d95',
'purple-50': '#faf5ff',
'purple-100': '#f3e8ff',
'purple-200': '#e9d5ff',
'purple-300': '#d8b4fe',
'purple-400': '#c084fc',
'purple-500': '#a855f7',
'purple-600': '#9333ea',
'purple-700': '#7e22ce',
'purple-800': '#6b21a8',
'purple-900': '#581c87',
'fuchsia-50': '#fdf4ff',
'fuchsia-100': '#fae8ff',
'fuchsia-200': '#f5d0fe',
'fuchsia-300': '#f0abfc',
'fuchsia-400': '#e879f9',
'fuchsia-500': '#d946ef',
'fuchsia-600': '#c026d3',
'fuchsia-700': '#a21caf',
'fuchsia-800': '#86198f',
'fuchsia-900': '#701a75',
'pink-50': '#fdf2f8',
'pink-100': '#fce7f3',
'pink-200': '#fbcfe8',
'pink-300': '#f9a8d4',
'pink-400': '#f472b6',
'pink-500': '#ec4899',
'pink-600': '#db2777',
'pink-700': '#be185d',
'pink-800': '#9d174d',
'pink-900': '#831843',
'rose-50': '#fff1f2',
'rose-100': '#ffe4e6',
'rose-200': '#fecdd3',
'rose-300': '#fda4af',
'rose-400': '#fb7185',
'rose-500': '#f43f5e',
'rose-600': '#e11d48',
'rose-700': '#be123c',
'rose-800': '#9f1239',
'rose-900': '#881337'
};
var defaultTheme = {
colors: /*#__PURE__*/generateHexAlphaVariants(colors),
space: space$1,
screens: {
_: 0,
xs: 0,
sm: 640,
md: 768,
lg: 1024,
xl: 1280,
'2xl': 1536
},
sizes: /*#__PURE__*/_extends({}, space$1, {
1: undefined,
'1s': space$1[1],
full: '100%',
xs: '20rem',
sm: '24rem',
md: '28rem',
lg: '32rem',
xl: '36rem',
'2xl': '42rem',
'3xl': '48rem',
'4xl': '56rem',
'5xl': '64rem',
'6xl': '72rem',
'7xl': '80rem'
}),
radii: {
none: '0',
sm: '0.125rem',
"default": '0.25rem',
md: '0.375rem',
lg: '0.5rem',
xl: '0.75rem',
'2xl': '1rem',
'3xl': '1.5rem',
full: '9999px'
},
shadows: {
xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
"default": '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
outline: '0 0 0 3px rgba(66, 153, 225, 0.5)'
},
fontSizes: {
xs: '0.75rem',
sm: '0.875rem',
base: '1rem',
lg: '1.125rem',
xl: '1.25rem',
'2xl': '1.5rem',
'3xl': '1.875rem',
'4xl': '2.25rem',
'5xl': '3rem',
'6xl': '3.75rem',
'7xl': '4.5rem',
'8xl': '6rem',
'9xl': '8rem'
},
fontWeights: {
hairline: '100',
thin: '200',
light: '300',
normal: '400',
medium: '500',
semibold: '600',
bold: '700',
extrabold: '800',
black: '900'
},
fonts: {
mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
serif: "ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif",
sans: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\""
},
letterSpacings: {
tighter: '-0.05em',
tight: '-0.025em',
normal: '0em',
wide: '0.025em',
wider: '0.05em',
widest: '0.1em'
},
lineHeights: {
none: 1,
tight: 1.25,
snug: 1.375,
normal: 1.5,
relaxed: 1.625,
loose: 2,
3: '.75rem',
4: '1rem',
5: '1.25rem',
6: '1.5rem',
7: '1.75rem',
8: '2rem',
9: '2.25rem',
10: '2.5rem'
},
gridTemplateColumns: {
1: 'repeat(1, minmax(0, 1fr))',
2: 'repeat(2, minmax(0, 1fr))',
3: 'repeat(3, minmax(0, 1fr))',
4: 'repeat(4, minmax(0, 1fr))',
5: 'repeat(5, minmax(0, 1fr))',
6: 'repeat(6, minmax(0, 1fr))',
7: 'repeat(7, minmax(0, 1fr))',
8: 'repeat(8, minmax(0, 1fr))',
9: 'repeat(9, minmax(0, 1fr))',
10: 'repeat(10, minmax(0, 1fr))',
11: 'repeat(11, minmax(0, 1fr))',
12: 'repeat(12, minmax(0, 1fr))'
},
gridTemplateRows: {
1: 'repeat(1, minmax(0, 1fr))',
2: 'repeat(2, minmax(0, 1fr))',
3: 'repeat(3, minmax(0, 1fr))',
4: 'repeat(4, minmax(0, 1fr))',
5: 'repeat(5, minmax(0, 1fr))',
6: 'repeat(6, minmax(0, 1fr))'
},
borderWidths: {
"default": 1
},
ringWidths: {
"default": 3
},
borders: {
"default": '1px solid transparent'
},
transitions: transitions$1,
transitionProperties: transitionProperties,
timingFunctions: timingFunctions,
animations: {
spin: 'x-spin 1s linear infinite',
ping: 'x-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
pulse: 'x-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
bounce: 'x-bounce 1s infinite'
}
};
var SystemComponent = forwardRefWithAs(forwardRef, InnerSystemComponent);
SystemComponent.displayName = 'SystemComponent';
return SystemComponent;
function _templateObject() {
var data = _taggedTemplateLiteralLoose(["\n /*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */\n *,::after,::before{box-sizing:border-box}:root{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}\n\n /* Role button pointer */\n [role=button], button {\n cursor: pointer;\n }\n\n /* Remove default margins */\n blockquote,\n dl,\n dd,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n hr,\n figure,\n p,\n pre {\n margin: 0;\n }\n\n /* Remove headings styles */\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n\n /* Unstyle lists */\n ol,\n ul {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n /* Image are block-level */\n img,\n svg,\n video,\n canvas,\n audio,\n iframe,\n embed,\n object {\n display: block;\n vertical-align: middle;\n }\n\n /* Reset border styles */\n *,\n ::before,\n ::after {\n border-width: 0;\n border-style: solid;\n border-color: ", ";\n }\n\n * {\n --x-ring-color: ", ";\n }\n\n /* Default outline on buttons */\n button:focus {\n outline: 1px dotted;\n outline: 5px auto -webkit-focus-ring-color;\n }\n\n // Animations\n @keyframes x-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n @keyframes x-ping {\n 0% {\n transform: scale(1);\n opacity: 1;\n }\n 75%, 100% {\n transform: scale(2);\n opacity: 0;\n }\n }\n\n @keyframes x-pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: .5;\n }\n }\n\n @keyframes x-bounce {\n 0%, 100% {\n transform: translateY(-25%);\n animationTimingFunction: cubic-bezier(0.8, 0, 1, 1);\n }\n 50% {\n transform: translateY(0);\n animationTimingFunction: cubic-bezier(0, 0, 0.2, 1);\n }\n }\n "]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
var createPreflight = function createPreflight(_ref) {
var createGlobalStyle = _ref.createGlobalStyle;
return createGlobalStyle(_templateObject(), th.color('default-border-color', 'currentColor'), th.color('default-ring-color', 'rgba(59,130,246,0.5)'));
};
exports.aliasColor = aliasColor;
exports.alignContent = alignContent;
exports.alignItems = alignItems;
exports.alignSelf = alignSelf;
exports.animation = animation;
exports.animations = animations;
exports.appearance = appearance;
exports.background = background;
exports.backgroundAttachment = backgroundAttachment;
exports.backgroundClip = backgroundClip;
exports.backgroundColor = backgroundColor;

@@ -1050,16 +2024,8 @@ exports.backgroundImage = backgroundImage;

exports.backgrounds = backgrounds;
exports.basics = basics;
exports.between = between;
exports.border = border;
exports.borderBottom = borderBottom;
exports.borderBottomColor = borderBottomColor;
exports.borderCollapse = borderCollapse;
exports.borderColor = borderColor;
exports.borderLeft = borderLeft;
exports.borderLeftColor = borderLeftColor;
exports.borderRadius = borderRadius;
exports.borderRight = borderRight;
exports.borderRightColor = borderRightColor;
exports.borderStyle = borderStyle;
exports.borderTop = borderTop;
exports.borderTopColor = borderTopColor;
exports.borderWidth = borderWidth;

@@ -1069,10 +2035,23 @@ exports.borders = borders;

exports.boxShadow = boxShadow;
exports.boxSizing = boxSizing;
exports.breakpoints = breakpoints;
exports.col = col;
exports.color = color;
exports.columnGap = columnGap;
exports.compose = compose;
exports.container = container;
exports.createPreflight = createPreflight;
exports.createStyleGenerator = createStyleGenerator;
exports.createSystemComponent = createSystemComponent;
exports.cursor = cursor;
exports.defaultTheme = defaultTheme;
exports.display = display;
exports.divideColor = divideColor;
exports.divideStyle = divideStyle;
exports.divideX = divideX;
exports.divideXReverse = divideXReverse;
exports.divideY = divideY;
exports.divideYReverse = divideYReverse;
exports.down = down;
exports.effects = effects;
exports.fill = fill;
exports.flex = flex;

@@ -1084,2 +2063,3 @@ exports.flexBasis = flexBasis;

exports.flexWrap = flexWrap;
exports.flexboxGrids = flexboxGrids;
exports.flexboxes = flexboxes;

@@ -1090,3 +2070,8 @@ exports.fontFamily = fontFamily;

exports.fontWeight = fontWeight;
exports.gap = gap;
exports.generateHexAlphaVariants = generateHexAlphaVariants;
exports.getAngle = getAngle;
exports.getAnimation = getAnimation;
exports.getBorder = getBorder;
exports.getBorderColor = getBorderColor;
exports.getBorderStyle = getBorderStyle;

@@ -1096,5 +2081,7 @@ exports.getBorderWidth = getBorderWidth;

exports.getColor = getColor;
exports.getDuration = getDuration;
exports.getFont = getFont;
exports.getFontSize = getFontSize;
exports.getFontWeight = getFontWeight;
exports.getInset = getInset;
exports.getLetterSpacing = getLetterSpacing;

@@ -1105,7 +2092,14 @@ exports.getLineHeight = getLineHeight;

exports.getRadius = getRadius;
exports.getRingWidth = getRingWidth;
exports.getShadow = getShadow;
exports.getSize = getSize;
exports.getSpace = getSpace;
exports.getTimingFunction = getTimingFunction;
exports.getTransform = getTransform;
exports.getTransition = getTransition;
exports.getTransitionProperty = getTransitionProperty;
exports.getZIndex = getZIndex;
exports.gradientFrom = gradientFrom;
exports.gradientTo = gradientTo;
exports.gradientVia = gradientVia;
exports.gridArea = gridArea;

@@ -1116,6 +2110,3 @@ exports.gridAutoColumns = gridAutoColumns;

exports.gridColumn = gridColumn;
exports.gridColumnGap = gridColumnGap;
exports.gridGap = gridGap;
exports.gridRow = gridRow;
exports.gridRowGap = gridRowGap;
exports.gridTemplateAreas = gridTemplateAreas;

@@ -1126,2 +2117,3 @@ exports.gridTemplateColumns = gridTemplateColumns;

exports.height = height;
exports.interactivity = interactivity;
exports.justifyContent = justifyContent;

@@ -1134,2 +2126,4 @@ exports.justifyItems = justifyItems;

exports.lineHeight = lineHeight;
exports.listStylePosition = listStylePosition;
exports.listStyleType = listStyleType;
exports.margin = margin;

@@ -1146,5 +2140,13 @@ exports.marginBottom = marginBottom;

exports.my = my;
exports.objectFit = objectFit;
exports.opacity = opacity;
exports.order = order;
exports.outline = outline;
exports.outlineColor = outlineColor;
exports.outlineStyle = outlineStyle;
exports.outlineWidth = outlineWidth;
exports.overflow = overflow;
exports.overflowX = overflowX;
exports.overflowY = overflowY;
exports.overscrollBehavior = overscrollBehavior;
exports.padding = padding;

@@ -1155,16 +2157,36 @@ exports.paddingBottom = paddingBottom;

exports.paddingTop = paddingTop;
exports.pointerEvents = pointerEvents;
exports.position = position;
exports.positioning = positioning;
exports.px = px$1;
exports.py = py;
exports.reduceBreakpoints = reduceBreakpoints;
exports.resize = resize;
exports.right = right;
exports.ring = ring;
exports.ringColor = ringColor;
exports.ringInset = ringInset;
exports.rotate = rotate;
exports.row = row;
exports.rowGap = rowGap;
exports.rpxTransformers = rpxTransformers;
exports.shadows = shadows;
exports.scale = scale;
exports.scaleX = scaleX;
exports.scaleY = scaleY;
exports.size = size;
exports.sizing = sizing;
exports.skewX = skewX;
exports.skewY = skewY;
exports.space = space;
exports.spaceX = spaceX;
exports.spaceXReverse = spaceXReverse;
exports.spaceY = spaceY;
exports.spaceYReverse = spaceYReverse;
exports.stroke = stroke;
exports.style = style;
exports.svg = svg;
exports.system = system;
exports.tableLayout = tableLayout;
exports.tables = tables;
exports.textAlign = textAlign;
exports.textDecoration = textDecoration;
exports.textOverflow = textOverflow;
exports.textShadow = textShadow;

@@ -1175,10 +2197,21 @@ exports.textTransform = textTransform;

exports.top = top;
exports.transform = transform;
exports.transformOrigin = transformOrigin;
exports.transforms = transforms;
exports.transition = transition;
exports.transitionDelay = transitionDelay;
exports.transitionDuration = transitionDuration;
exports.transitionProperty = transitionProperty;
exports.transitionTimingFunction = transitionTimingFunction;
exports.transitions = transitions;
exports.translateX = translateX;
exports.translateY = translateY;
exports.typography = typography;
exports.up = up;
exports.variant = variant;
exports.userSelect = userSelect;
exports.verticalAlign = verticalAlign;
exports.visibility = visibility;
exports.whiteSpace = whiteSpace;
exports.width = width;
exports.xgrids = xgrids;
exports.zIndex = zIndex;
//# sourceMappingURL=system.cjs.development.js.map

2

dist/system.cjs.production.min.js

@@ -1,2 +0,2 @@

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@xstyled/util"),r=function(e){return Math.round(e*Math.pow(10,4))/Math.pow(10,4)},t=function(r){return function(r){return e.num(r)&&0!==r?r+"px":r}}(),o=function(e){return r(e/16)},n=function(r){return e.num(r)&&0!==r?o(r)+"rem":r},p=function(r){if(!e.string(r)||r.length<4)return r;if("rpx"!==r.slice(-3))return r;var t=Number(r.slice(0,r.length-3));return 0===t?0:o(t)+"rem"},i={xs:0,sm:576,md:768,lg:992,xl:1200};function s(r){var t=e.getThemeValue(r,"breakpoints");return e.is(t)?t:i}var a=function(e){return e?"@media (min-width: "+e+")":null},u=function(e){return e?"@media (max-width: "+e+")":null},m=function(e,r){return e&&r?"@media (min-width: "+e+") and (max-width: "+r+")":null},d=function(e,r){var o=e[r];return 0===o?null:t(o)},x=function(e,r){var o=e[r];return 0===o?null:t(o-.02)},l="undefined"!=typeof Map&&"undefined"!=typeof WeakMap?new WeakMap:null,f={has:function(){return!1},set:function(){},get:function(){}};function g(e,r){if(!e)return f;var t=function(e){if(null===l)return null;if(l.has(e))return l.get(e);var r={};return l.set(e,r),r}(e);return t&&e?(t[r]=t[r]||new Map,t[r]):f}var h=0,c=function(r){var t=r.name,o=r.transform,n=r.key,p=r.defaultVariants,i=r.compose,s=h++,a=function(r){return function(a){var u=r;if(!e.string(r)&&!e.num(r))return u;var m=g(a.theme,"__themeGetter"+s);if(m.has(r))return m.get(r);var d=e.is(n)?e.getThemeValue(a,n):null;d=e.is(d)?d:p,u=e.is(d)?e.getThemeValue(a,r,d):null,u=e.is(u)?u:r;var x=(t&&a.theme&&a.theme.transformers?a.theme.transformers[t]:null)||o;return x&&(u=x(u,{rawValue:r,variants:d,props:a})),u=i?i(u)(a):u,m.set(r,u),u}};return a.meta={name:t,transform:o},a};function y(r,t,o,n,p){if(e.obj(t))return null;if(p.has(t))return p.get(t);var i=n(t)(o);if(!e.string(i)&&!e.num(i))return null;var s={};for(var a in r)s[r[a]]=i;return p.set(t,s),s}function v(e,r,t){var o=e;return o.meta={props:r,getStyle:o,generators:t},o}function b(e){var r=s(e),t={};for(var o in r)t[o]=a(d(r,o));return t}function G(r,t,o,n){void 0===o&&(o=e.identity);var p=n?function(e,r){if(r.has("_medias"))return r.get("_medias");var t=b(e);return r.set("_medias",t),t}(r,n):b(r),i={};for(var s in t){var a=o(t[s]);if(null!==a){var u=p[s];null===u?i=e.merge(i,a):i[u]=i[u]?e.assign(i[u],a):a}}return i}function w(e){for(var r={},t=0;t<e.length;t++){var o=e[t];if(o&&o.meta)for(var n=0;n<o.meta.props.length;n++)r[o.meta.props[n]]=o}return r}function k(e,r){var t={},o=s(r),n=Object.keys(e);for(var p in o){var i="@media (min-width: "+o[p]+"px)";n.includes(i)&&(t[i]=e[i])}return t}function S(){for(var r=[],t=arguments.length,o=new Array(t),n=0;n<t;n++)o[n]=arguments[n];o.forEach((function(t){e.warn(Boolean(t),'Undefined generator in "compose" method'),t&&(t.meta.generators?r=[].concat(r,t.meta.generators):r.push(t))}));var p=w(r);function i(r){var t={};for(var o in r){var n=p[o];if(n){var i=n.meta.getStyle(r);e.merge(t,i)}}return e.assign(k(t,r),t)}var s=r.reduce((function(e,r){return[].concat(e,r.meta.props)}),[]);return v(i,s,o)}function T(r){var t=r.prop,o=r.cssProperty,n=r.key,p=r.transform,i=r.themeGet;if(Array.isArray(t)){var s=o?Array.isArray(o)?o:[o]:t,a=t.map((function(e){return T({prop:e,cssProperty:s,key:n,transform:p,themeGet:i})}));return S.apply(void 0,a)}return v(function(r,t,o){return function(n){var p=n[r];if(!e.is(p))return null;var i=g(n.theme,r);return e.obj(p)?G(n,p,(function(e){return y(t,e,n,o,i)}),i):y(t,p,n,o,i)}}(t,o?Array.isArray(o)?o:[o]:[t],i=i||c({key:n,transform:p})),[t])}var C=c({name:"color",key:"colors"}),R=c({name:"px",transform:function(e){return t(p(e))}}),P=c({name:"percent",transform:function(t){return e.num(t)&&0!==t&&t>=-1&&t<=1?r(100*t)+"%":t},compose:R}),W=c({name:"radius",key:"radii",compose:R}),A=c({name:"transition",key:"transitions"}),B=T({prop:"opacity"}),z=T({prop:"overflow"}),j=T({prop:"transition",themeGet:A}),L=S(B,z,j),V=T({prop:"background"}),I=T({prop:["backgroundColor","bg"],cssProperty:"backgroundColor",themeGet:C}),H=T({prop:"backgroundImage"}),M=T({prop:"backgroundSize"}),O=T({prop:"backgroundPosition"}),F=T({prop:"backgroundRepeat"}),_=S(V,I,H,M,O,F),E=c({name:"border",key:"borders",transform:function(r){return e.num(r)&&r>0?t(r)+" solid":r}}),D=c({name:"borderWidth",key:"borderWidths",compose:R}),N=c({name:"borderStyle",key:"borderStyles"}),q=T({prop:"border",themeGet:E}),U=T({prop:"borderTop",themeGet:E}),Z=T({prop:"borderTopColor",themeGet:C}),J=T({prop:"borderRight",themeGet:E}),K=T({prop:"borderRightColor",themeGet:C}),Q=T({prop:"borderBottom",themeGet:E}),X=T({prop:"borderBottomColor",themeGet:C}),Y=T({prop:"borderLeft",themeGet:E}),$=T({prop:"borderLeftColor",themeGet:C}),ee=T({prop:"borderColor",themeGet:C}),re=T({prop:"borderWidth",themeGet:D}),te=T({prop:"borderStyle",themeGet:N}),oe=T({prop:"borderRadius",themeGet:W}),ne=S(q,U,Z,J,K,Q,X,Y,$,ee,re,te,oe),pe=c({name:"size",key:"sizes",compose:P}),ie=T({prop:"display"}),se=T({prop:"width",themeGet:pe}),ae=T({prop:"height",themeGet:pe}),ue=T({prop:"maxWidth",themeGet:pe}),me=T({prop:"maxHeight",themeGet:pe}),de=T({prop:"minWidth",themeGet:pe}),xe=T({prop:"minHeight",themeGet:pe}),le=T({prop:"size",cssProperty:["width","height"],themeGet:pe}),fe=T({prop:"verticalAlign"}),ge=S(ie,se,ae,ue,me,de,xe,le,fe),he=T({prop:"alignItems"}),ce=T({prop:"alignContent"}),ye=T({prop:"justifyContent"}),ve=T({prop:"justifyItems"}),be=T({prop:"flexWrap"}),Ge=T({prop:"flexGrow"}),we=T({prop:"flexShrink"}),ke=T({prop:"flexBasis",themeGet:P}),Se=T({prop:"flexDirection"}),Te=T({prop:"flex"}),Ce=T({prop:"justifySelf"}),Re=T({prop:"alignSelf"}),Pe=T({prop:"order"}),We=S(ie,he,ce,ye,ve,be,ke,we,Ge,Se,Te,Ce,Re,Pe);function Ae(r){return e.string(r)?"-"+r:-1*r}var Be=c({name:"space",key:"space",defaultVariants:[0,4,8,16,24,48,96,144,192,240],compose:R,transform:function(r,t){var o=t.rawValue,n=t.variants,p=t.props;if(e.string(o)){var i=o.startsWith("-"),s=i?o.substr(1):o,a=e.getThemeValue(p,s,n),u=e.is(a)?a:s;return i?Ae(u):u}var m=Math.abs(o),d=e.negative(o),x=e.is(n[m])?n[m]:m;return d?Ae(x):x}}),ze=T({prop:["margin","m"],cssProperty:"margin",themeGet:Be}),je=T({prop:["marginTop","mt"],cssProperty:"marginTop",themeGet:Be}),Le=T({prop:["marginRight","mr"],cssProperty:"marginRight",themeGet:Be}),Ve=T({prop:["marginBottom","mb"],cssProperty:"marginBottom",themeGet:Be}),Ie=T({prop:["marginLeft","ml"],cssProperty:"marginLeft",themeGet:Be}),He=T({prop:"mx",cssProperty:["marginRight","marginLeft"],themeGet:Be}),Me=T({prop:"my",cssProperty:["marginTop","marginBottom"],themeGet:Be}),Oe=T({prop:["padding","p"],cssProperty:"padding",themeGet:Be}),Fe=T({prop:["paddingTop","pt"],cssProperty:"paddingTop",themeGet:Be}),_e=T({prop:["paddingRight","pr"],cssProperty:"paddingRight",themeGet:Be}),Ee=T({prop:["paddingBottom","pb"],cssProperty:"paddingBottom",themeGet:Be}),De=T({prop:["paddingLeft","pl"],cssProperty:"paddingLeft",themeGet:Be}),Ne=T({prop:"px",cssProperty:["paddingRight","paddingLeft"],themeGet:Be}),qe=T({prop:"py",cssProperty:["paddingTop","paddingBottom"],themeGet:Be}),Ue=S(ze,je,Le,Ve,Ie,He,Me,Oe,Fe,_e,Ee,De,Ne,qe),Ze=T({prop:"gridGap",themeGet:Be}),Je=T({prop:"gridColumnGap",themeGet:Be}),Ke=T({prop:"gridRowGap",themeGet:Be}),Qe=T({prop:"gridColumn"}),Xe=T({prop:"gridRow"}),Ye=T({prop:"gridAutoFlow"}),$e=T({prop:"gridAutoColumns"}),er=T({prop:"gridAutoRows"}),rr=T({prop:"gridTemplateColumns"}),tr=T({prop:"gridTemplateRows"}),or=T({prop:"gridTemplateAreas"}),nr=T({prop:"gridArea"}),pr=S(Ze,Je,Ke,Qe,Xe,Ye,$e,er,rr,tr,or,nr),ir=c({name:"zIndex",key:"zIndices"}),sr=T({prop:"position"}),ar=T({prop:"zIndex",themeGet:ir}),ur=T({prop:"top",themeGet:R}),mr=T({prop:"right",themeGet:R}),dr=T({prop:"bottom",themeGet:R}),xr=T({prop:"left",themeGet:R}),lr=S(sr,ar,ur,mr,dr,xr),fr=c({name:"shadow",key:"shadows"}),gr=T({prop:"boxShadow",themeGet:fr}),hr=T({prop:"textShadow",themeGet:fr}),cr=S(gr,hr),yr=c({name:"font",key:"fonts"}),vr=c({name:"lineHeight",key:"lineHeights",transform:p}),br=c({name:"fontWeight",key:"fontWeights"}),Gr=c({name:"letterSpacing",key:"letterSpacings",compose:R}),wr=c({name:"fontSize",key:"fontSizes",defaultVariants:[0,12,14,16,20,24,32,48,64,72],compose:R}),kr=T({prop:"fontFamily",themeGet:yr}),Sr=T({prop:"fontSize",themeGet:wr}),Tr=T({prop:"lineHeight",themeGet:vr}),Cr=T({prop:"fontWeight",themeGet:br}),Rr=T({prop:"fontStyle"}),Pr=T({prop:"textAlign"}),Wr=T({prop:"letterSpacing",themeGet:Gr}),Ar=T({prop:"color",themeGet:C}),Br=T({prop:"textTransform"}),zr=S(kr,Sr,Rr,Tr,Cr,Pr,Wr,Ar,Br);function jr(){return(jr=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e}).apply(this,arguments)}var Lr=v((function(){return{boxSizing:"border-box",flexGrow:1,flexWrap:"wrap",display:"flex"}}),["row"]);function Vr(e,r){if(!0===r)return{flexBasis:0,flexGrow:1,maxWidth:"100%"};if("auto"===r)return{flex:"0 0 auto",maxWidth:"none",width:"auto"};var t=P(r)(e);return{flex:"0 0 "+t,maxWidth:t}}var Ir=v((function(r){var t=r.col,o={boxSizing:"border-box",flexBasis:0,flexGrow:1,maxWidth:"100%"};return e.obj(t)?jr({},o,G(r,t,(function(e){return Vr(r,e)}))):jr({},o,Vr(r,t))}),["col"]),Hr=S(Lr,Ir),Mr=S(_,L,ne,We,pr,ge,lr,cr,Ue,zr,Hr),Or=function(r){return function(t){var o=e.getThemeValue(t,r);return e.warn(e.is(o),'value "'+r+'" not found in theme'),o}};[C,R,P,W,E,D,N,fr,pe,ir,Be,yr,wr,vr,br,Gr,A].forEach((function(e){e.meta.name&&(Or[e.meta.name]=e)}));var Fr=function(e,r){return function(t){var o=s(t),n=d(o,e);return null===n?r:[a(n)+" {",r,"}"]}},_r=function(e,r){return function(t){var o=s(t),n=x(o,e);return null===n?null:[u(n)+" {",r,"}"]}},Er={px:function(e){return n(p(e))},border:function(r){return e.num(r)&&r>0?n(r)+" solid":r}};exports.alignContent=ce,exports.alignItems=he,exports.alignSelf=Re,exports.background=V,exports.backgroundColor=I,exports.backgroundImage=H,exports.backgroundPosition=O,exports.backgroundRepeat=F,exports.backgroundSize=M,exports.backgrounds=_,exports.basics=L,exports.between=function(e,r,t){return function(o){var n=s(o),p=d(n,e),i=x(n,r);return null===i?Fr(e,t)(o):null===p?_r(r,t)(o):[m(p,i)+" {",t,"}"]}},exports.border=q,exports.borderBottom=Q,exports.borderBottomColor=X,exports.borderColor=ee,exports.borderLeft=Y,exports.borderLeftColor=$,exports.borderRadius=oe,exports.borderRight=J,exports.borderRightColor=K,exports.borderStyle=te,exports.borderTop=U,exports.borderTopColor=Z,exports.borderWidth=re,exports.borders=ne,exports.bottom=dr,exports.boxShadow=gr,exports.breakpoints=function(e){return function(r){for(var t=[],o=Object.keys(e),n=o.length,p=0;p<n;p++){var i=o[p],s=Fr(i,e[i])(r);Array.isArray(s)?s.forEach((function(e){return t.push(e)})):t.push(s)}return t}},exports.col=Ir,exports.color=Ar,exports.compose=S,exports.createStyleGenerator=v,exports.createSystemComponent=function(r,t,o){var n=r.createElement;void 0===o&&(o=Mr);var p=(0,r.forwardRef)((function(r,p){var i=r.as,s=void 0===i?null!=t?t:"div":i,a=function(e,r){if(null==e)return{};var t,o,n={},p=Object.keys(e);for(o=0;o<p.length;o++)r.indexOf(t=p[o])>=0||(n[t]=e[t]);return n}(r,["as"]),u=e.omit(a,o.meta.props);return n(s,jr({ref:p},u))}));return p.displayName="SystemComponent",p},exports.display=ie,exports.down=_r,exports.flex=Te,exports.flexBasis=ke,exports.flexDirection=Se,exports.flexGrow=Ge,exports.flexShrink=we,exports.flexWrap=be,exports.flexboxes=We,exports.fontFamily=kr,exports.fontSize=Sr,exports.fontStyle=Rr,exports.fontWeight=Cr,exports.getBorder=E,exports.getBorderStyle=N,exports.getBorderWidth=D,exports.getBreakpoints=s,exports.getColor=C,exports.getFont=yr,exports.getFontSize=wr,exports.getFontWeight=br,exports.getLetterSpacing=Gr,exports.getLineHeight=vr,exports.getPercent=P,exports.getPx=R,exports.getRadius=W,exports.getShadow=fr,exports.getSize=pe,exports.getSpace=Be,exports.getTransition=A,exports.getZIndex=ir,exports.gridArea=nr,exports.gridAutoColumns=$e,exports.gridAutoFlow=Ye,exports.gridAutoRows=er,exports.gridColumn=Qe,exports.gridColumnGap=Je,exports.gridGap=Ze,exports.gridRow=Xe,exports.gridRowGap=Ke,exports.gridTemplateAreas=or,exports.gridTemplateColumns=rr,exports.gridTemplateRows=tr,exports.grids=pr,exports.height=ae,exports.justifyContent=ye,exports.justifyItems=ve,exports.justifySelf=Ce,exports.layout=ge,exports.left=xr,exports.letterSpacing=Wr,exports.lineHeight=Tr,exports.margin=ze,exports.marginBottom=Ve,exports.marginLeft=Ie,exports.marginRight=Le,exports.marginTop=je,exports.maxHeight=me,exports.maxWidth=ue,exports.minHeight=xe,exports.minWidth=de,exports.mx=He,exports.my=Me,exports.opacity=B,exports.order=Pe,exports.overflow=z,exports.padding=Oe,exports.paddingBottom=Ee,exports.paddingLeft=De,exports.paddingRight=_e,exports.paddingTop=Fe,exports.position=sr,exports.positioning=lr,exports.px=Ne,exports.py=qe,exports.reduceBreakpoints=G,exports.right=mr,exports.row=Lr,exports.rpxTransformers=Er,exports.shadows=cr,exports.size=le,exports.space=Ue,exports.style=T,exports.system=Mr,exports.textAlign=Pr,exports.textShadow=hr,exports.textTransform=Br,exports.th=Or,exports.themeGetter=c,exports.top=ur,exports.transition=j,exports.typography=zr,exports.up=Fr,exports.variant=function(r){var t=r.key,o=void 0===t?null:t,n=r.default,p=r.variants,i=void 0===p?{}:p,s=r.prop,a=void 0===s?"variant":s;return function(r){var t=e.is(o)?e.getThemeValue(r,o):null,p=e.merge(e.assign({},i),t),s=void 0!==r[a]?r[a]:n,u=e.getThemeValue(r,s,p);return e.warn(e.is(u),'variant "'+s+'" not found'),u}},exports.verticalAlign=fe,exports.width=se,exports.xgrids=Hr,exports.zIndex=ar;
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@xstyled/util"),r=function(e){return Math.round(e*Math.pow(10,4))/Math.pow(10,4)},t=function(r){return function(t){return e.num(t)&&0!==t?""+t+r:t}},o=t("ms"),n=t("px"),a=t("deg"),i=function(e,t){var o=(void 0===t?{}:t).rootFontSize;return r(e/(void 0===o?16:o))},s=function(r,t){return e.num(r)&&0!==r?i(r,t)+"rem":r},p=function(r,t){if(!e.string(r)||r.length<4)return r;if("rpx"!==r.slice(-3))return r;var o=Number(r.slice(0,r.length-3));return 0===o?0:i(o,t)+"rem"};function l(r){return e.string(r)?"-"+r:-1*r}var f=function(r,t){var o=t.rawValue,n=t.variants,a=t.props;if(e.string(o)){var i=o.startsWith("-"),s=i?o.substr(1):o,p=e.getThemeValue(a,s,n),f=e.is(p)?p:s;return i?l(f):f}var m=Math.abs(o),d=e.negative(o),c=e.is(n&&n[m])?n[m]:m;return d?l(c):c};function m(r){var t=e.getThemeValue(r,"screens");return e.is(t)?t:{}}var d=function(e){return e?"@media (min-width: "+e+")":null},c=function(e){return e?"@media (max-width: "+e+")":null},u=function(e,r){return e&&r?"@media (min-width: "+e+") and (max-width: "+r+")":null},x=function(e,r){var t=e[r];return 0===t?null:n(t)},g=function(e,r){var t=e[r];return 0===t?null:n(t-.02)},h={motionSafe:"@media (prefers-reduced-motion: no-preference)",motionReduce:"@media (prefers-reduced-motion: reduce)",first:"&:first-child",last:"&:last-child",odd:"&:odd",even:"&:even",visited:"&:visited",checked:"&:checked",focusWithin:"&:focus-within",hover:"&:hover",focus:"&:focus",focusVisible:"&:focus-visible",active:"&:active",disabled:"&:disabled",placeholder:"&::placeholder"},b=Object.keys(h),y="undefined"!=typeof Map&&"undefined"!=typeof WeakMap?new WeakMap:null,v={has:function(){return!1},set:function(){},get:function(){}};function w(e,r){if(!e)return v;var t=function(e){if(null===y)return null;if(y.has(e))return y.get(e);var r={};return y.set(e,r),r}(e);return t&&e?(t[r]=t[r]||new Map,t[r]):v}var k=0,G=/\s+/,S=function(r){var t=r.name,o=r.transform,n=r.key,a=r.defaultVariants,i=r.compose,s=r.shorthand,p=k++,l=function(r,l){return function(f){var m=r;if(!e.string(r)&&!e.num(r)&&!0!==r)return m;var d=r+"-"+l,c=w(f.theme,"__themeGetter"+p);if(c.has(d))return c.get(d);var u=function(r){var s=e.is(l)?l:r,p=r,m=e.is(n)?e.getThemeValue(f,n):null;m=e.is(m)?m:a,e.is(m)&&(p=e.getThemeValue(f,!0===r?"default":r,m),p=Array.isArray(p)?p.join(","):p);var d=r;e.is(p)||(d=s,p=s);var c=(t&&f.theme&&f.theme.transformers?f.theme.transformers[t]:null)||o;return c&&(p=c(p,{rawValue:d,variants:m,props:f})),i?i(p)(f):p};return m=s&&e.string(r)?r.split(G).map((function(e){return u(e)})).join(" "):u(r),c.set(d,m),m}};return l.meta={name:t,transform:o},l};function P(e,r,t){var o=e;return o.meta={props:r,getStyle:o,generators:t},o}function z(e){var r=m(e),t={};for(var o in r)t[o]=d(x(r,o));return t}function T(r,t,o,n){void 0===o&&(o=e.identity);var a=n?function(e,r){if(r.has("_medias"))return r.get("_medias");var t=z(e);return r.set("_medias",t),t}(r,n):z(r),i={};for(var s in t){var p=o(t[s]);if(null!==p){var l=a[s];null===l?i=e.merge(i,p):i[l]=i[l]?e.assign(i[l],p):p}}return i}function C(r,t,o,n,a){if(e.obj(t))return null;if(a.has(t))return a.get(t);var i=r(n(t)(o));return a.set(t,i),i}function R(r,t,o){return function(n){var a=n[r];if(!e.is(a))return null;var i=w(n.theme,r);return e.obj(a)?T(n,a,(function(e){return C(t,e,n,o,i)}),i):C(t,a,n,o,i)}}function W(e,r){return function(t){var o,n=r(t);return null===n?n:((o={})[e]=n,o)}}function A(e){for(var r={},t=0;t<e.length;t++){var o=e[t];if(o&&o.meta)for(var n=0;n<o.meta.props.length;n++)r[o.meta.props[n]]=o}return r}function j(r,t){var o=m(t),n={};for(var a in o){var i=x(o,a),s=d(i);if(s){var p=r[s];p&&(n[s]=p)}}return e.assign(r,n)}function F(){for(var r=[],t=arguments.length,o=new Array(t),n=0;n<t;n++)o[n]=arguments[n];o.forEach((function(t){e.warn(Boolean(t),'Undefined generator in "compose" method'),t&&(t.meta.generators?r=[].concat(r,t.meta.generators):r.push(t))}));var a=A(r);function i(r){var t={};for(var o in r){var n=a[o];if(n){var i=n.meta.getStyle(r);e.merge(t,i)}}return j(t,r)}var s=r.reduce((function(e,r){return[].concat(e,r.meta.props)}),[]);return P(i,s,o)}var B=function(r){return e.func(r)?r:(t=r,function(r){var o;if(!e.string(r)&&!e.num(r))return null;if(e.string(t))return(o={})[t]=r,o;var n={};for(var a in t)n[t[a]]=r;return n});var t};function I(e){var r=e.prop,t=e.cssProperty,o=e.key,n=e.transform,a=e.themeGet,i=e.states,s=void 0===i?h:i;if(Array.isArray(r)){var p=t?B(t):t,l=r.map((function(e){return I({prop:e,cssProperty:p,key:o,transform:n,themeGet:a})}));return F.apply(void 0,l)}var f=B(t||[r]);a=a||S({key:o,transform:n});for(var m=r.charAt(0).toUpperCase()+r.slice(1),d=[],c=s===h?b:Object.keys(s),u=0;u<c.length;u++){var x=c[u],g=""+x+m,y=P(W(s[x],R(g,f,a)),[g]);d.push(y)}var v=P(R(r,f,a),[r]);return d.push(v),F.apply(void 0,d)}var Y=S({name:"animation",key:"animations"}),M=I({prop:"animation",themeGet:Y}),N=F(M),X=S({name:"color",key:"colors"}),L={"gradient-to-t":"linear-gradient(to top, var(--x-gradient-stops))","gradient-to-tr":"linear-gradient(to top right, var(--x-gradient-stops))","gradient-to-r":"linear-gradient(to right, var(--x-gradient-stops))","gradient-to-br":"linear-gradient(to bottom right, var(--x-gradient-stops))","gradient-to-b":"linear-gradient(to bottom, var(--x-gradient-stops))","gradient-to-bl":"linear-gradient(to bottom left, var(--x-gradient-stops))","gradient-to-l":"linear-gradient(to left, var(--x-gradient-stops))","gradient-to-tl":"linear-gradient(to top left, var(--x-gradient-stops))"},H=I({prop:"background",cssProperty:function(e){return{background:L[e]||e}}}),O=I({prop:["backgroundColor","bg"],cssProperty:"backgroundColor",themeGet:X}),E=I({prop:"backgroundImage",cssProperty:function(e){return{backgroundImage:L[e]||e}}}),V=I({prop:"backgroundSize"}),D=I({prop:"backgroundPosition"}),U=I({prop:"backgroundRepeat"}),_=I({prop:"backgroundAttachment"}),q=I({prop:"backgroundClip",cssProperty:["backgroundClip","-webkitBackgroundClip"]}),Z=I({prop:"gradientFrom",themeGet:X,cssProperty:function(e){return{"--x-gradient-from":e,"--x-gradient-stops":"var(--x-gradient-from), var(--x-gradient-to, transparent)"}}}),J=I({prop:"gradientVia",themeGet:X,cssProperty:function(e){return{"--x-gradient-stops":"var(--x-gradient-from), "+e+", var(--x-gradient-to, transparent)"}}}),K=I({prop:"gradientTo",themeGet:X,cssProperty:"--x-gradient-to"}),Q=F(H,O,E,V,D,U,_,q,Z,J,K),$=S({name:"px",transform:function(e,r){var t,o,a,i=r.props,s=null!=(t=null==i||null==(o=i.theme)||null==(a=o.settings)?void 0:a.rootFontSize)?t:void 0,l=Number(e);return n(p(Number.isNaN(l)?e:l,{rootFontSize:s}))}}),ee=S({name:"duration",transform:function(e){var r=Number(e);return o(Number.isNaN(r)?e:r)}}),re=S({name:"angle",transform:function(e){var r=Number(e);return a(Number.isNaN(r)?e:r)}}),te=S({name:"percent",transform:function(t){return e.num(t)&&0!==t&&t>=-1&&t<=1?r(100*t)+"%":t},compose:$}),oe=S({name:"border",key:"borders",transform:function(r){return e.num(r)&&r>0?n(r)+" solid":r}}),ne=S({name:"borderWidth",key:"borderWidths",compose:$,shorthand:!0}),ae=S({name:"borderColor",compose:X,shorthand:!0}),ie=S({name:"borderStyle",key:"borderStyles"}),se=I({prop:"border",themeGet:oe}),pe=I({prop:"borderColor",themeGet:ae}),le=I({prop:"borderWidth",themeGet:ne}),fe=I({prop:"borderStyle",themeGet:ie}),me=I({prop:"outline",themeGet:oe}),de=I({prop:"outlineColor",themeGet:X}),ce=I({prop:"outlineWidth",themeGet:ne}),ue=I({prop:"outlineStyle",themeGet:ie}),xe=S({name:"radius",key:"radii",compose:$,shorthand:!0}),ge=I({prop:"borderRadius",themeGet:xe}),he="& > :not([hidden]) ~ :not([hidden])",be=I({prop:"divideY",themeGet:ne,cssProperty:function(e){var r,t=!0===e?1:e;return(r={})[he]={"--x-divide-y-reverse":0,borderTopWidth:"calc("+t+" * calc(1 - var(--x-divide-y-reverse)))",borderBottomWidth:"calc("+t+" * var(--x-divide-y-reverse))"},r}}),ye=I({prop:"divideX",themeGet:ne,cssProperty:function(e){var r,t=!0===e?1:e;return(r={})[he]={"--x-divide-x-reverse":0,borderRightWidth:"calc("+t+" * var(--x-divide-x-reverse))",borderLeftWidth:"calc("+t+" * calc(1 - var(--x-divide-x-reverse)))"},r}}),ve=I({prop:"divideXReverse",cssProperty:function(){var e;return(e={})[he]={"--x-divide-x-reverse":"1"},e}}),we=I({prop:"divideYReverse",cssProperty:function(){var e;return(e={})[he]={"--x-divide-y-reverse":"1"},e}}),ke=I({prop:"divideColor",themeGet:ae,cssProperty:function(e){var r;return(r={})[he]={borderColor:e},r}}),Ge=I({prop:"divideStyle",themeGet:ie,cssProperty:function(e){var r;return(r={})[he]={borderStyle:e},r}}),Se=S({name:"ringWidth",key:"ringWidths",compose:$}),Pe=I({prop:"ring",themeGet:Se,cssProperty:function(e){return{"--x-ring-shadow":"var(--x-ring-inset, /*!*/ /*!*/) 0 0 0 "+e+" var(--x-ring-color)",boxShadow:"var(--x-ring-shadow, 0 0 #0000), var(--x-shadow, 0 0 #0000)"}}}),ze=I({prop:"ringInset",cssProperty:function(){return{"--x-ring-inset":"inset"}}}),Te=I({prop:"ringColor",themeGet:X,cssProperty:function(e){return{"--x-ring-color":e}}}),Ce=F(se,pe,le,fe,ge,me,de,ce,ue,ye,be,ve,we,ke,Ge,Pe,ze,Te),Re=S({name:"shadow",key:"shadows"}),We=I({prop:"opacity"}),Ae=I({prop:"boxShadow",themeGet:Re,cssProperty:function(e){return{"--x-shadow":e,boxShadow:"var(--x-ring-shadow, 0 0 #0000), var(--x-shadow)"}}}),je=I({prop:"textShadow",themeGet:Re}),Fe=F(We,Ae,je);function Be(){return(Be=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e}).apply(this,arguments)}var Ie=I({prop:"row",cssProperty:function(){return{boxSizing:"border-box",flexGrow:1,flexWrap:"wrap",display:"flex"}}});function Ye(e,r){if(!0===r)return{flexBasis:0,flexGrow:1,maxWidth:"100%"};if("auto"===r)return{flex:"0 0 auto",maxWidth:"none",width:"auto"};var t=te(r)(e);return{flex:"0 0 "+t,maxWidth:t}}var Me=P((function(r){var t=r.col,o={boxSizing:"border-box",flexBasis:0,flexGrow:1,maxWidth:"100%"};return e.obj(t)?Be({},o,T(r,t,(function(e){return Ye(r,e)}))):Be({},o,Ye(r,t))}),["col"]),Ne=F(Ie,Me),Xe=I({prop:"display"}),Le=I({prop:"boxSizing"}),He=P((function(r){if(!r.container)return null;var t=T(r,m(r),(function(e){return 0!==e?{maxWidth:e}:{}}));return e.obj(r.container)&&(t=T(r,r.container,(function(){return t}))),Be({width:"100%"},t)}),["container"]),Oe=I({prop:"overflow"}),Ee=I({prop:"overflowX"}),Ve=I({prop:"overflowY"}),De=S({name:"zIndex",key:"zIndices"}),Ue=I({prop:"zIndex",themeGet:De}),_e=I({prop:"position"}),qe=S({name:"inset",key:"inset",compose:$,transform:f}),Ze=I({prop:"top",themeGet:qe}),Je=I({prop:"right",themeGet:qe}),Ke=I({prop:"bottom",themeGet:qe}),Qe=I({prop:"left",themeGet:qe}),$e=I({prop:"visibility"}),er=I({prop:"overscrollBehavior"}),rr=I({prop:"objectFit"}),tr=F(Le,Xe,He,Oe,Ee,Ve,_e,Ue,Ze,Je,Ke,Qe,$e,er,rr),or=I({prop:"alignItems"}),nr=I({prop:"alignContent"}),ar=I({prop:"justifyContent"}),ir=I({prop:"justifyItems"}),sr=I({prop:"flexWrap"}),pr=I({prop:"flexGrow"}),lr=I({prop:"flexShrink"}),fr=I({prop:"flexBasis",themeGet:te}),mr=I({prop:"flexDirection"}),dr=I({prop:"flex"}),cr=I({prop:"justifySelf"}),ur=I({prop:"alignSelf"}),xr=I({prop:"order"}),gr=F(Xe,or,nr,ar,ir,sr,fr,lr,pr,mr,dr,cr,ur,xr),hr=S({name:"space",key:"space",compose:$,transform:f}),br=I({prop:["margin","m"],cssProperty:"margin",themeGet:hr}),yr=I({prop:["marginTop","mt"],cssProperty:"marginTop",themeGet:hr}),vr=I({prop:["marginRight","mr"],cssProperty:"marginRight",themeGet:hr}),wr=I({prop:["marginBottom","mb"],cssProperty:"marginBottom",themeGet:hr}),kr=I({prop:["marginLeft","ml"],cssProperty:"marginLeft",themeGet:hr}),Gr=I({prop:"mx",cssProperty:["marginRight","marginLeft"],themeGet:hr}),Sr=I({prop:"my",cssProperty:["marginTop","marginBottom"],themeGet:hr}),Pr=I({prop:["padding","p"],cssProperty:"padding",themeGet:hr}),zr=I({prop:["paddingTop","pt"],cssProperty:"paddingTop",themeGet:hr}),Tr=I({prop:["paddingRight","pr"],cssProperty:"paddingRight",themeGet:hr}),Cr=I({prop:["paddingBottom","pb"],cssProperty:"paddingBottom",themeGet:hr}),Rr=I({prop:["paddingLeft","pl"],cssProperty:"paddingLeft",themeGet:hr}),Wr=I({prop:"px",cssProperty:["paddingRight","paddingLeft"],themeGet:hr}),Ar=I({prop:"py",cssProperty:["paddingTop","paddingBottom"],themeGet:hr}),jr=I({prop:"spaceY",themeGet:hr,cssProperty:function(e){return{"& > :not([hidden]) ~ :not([hidden])":{"--x-space-y-reverse":0,marginTop:"calc("+e+" * calc(1 - var(--x-space-y-reverse)))",marginBottom:"calc("+e+" * var(--x-space-y-reverse))"}}}}),Fr=I({prop:"spaceX",themeGet:hr,cssProperty:function(e){return{"& > :not([hidden]) ~ :not([hidden])":{"--x-space-x-reverse":0,marginRight:"calc("+e+" * var(--x-space-x-reverse))",marginLeft:"calc("+e+" * calc(1 - var(--x-space-x-reverse)))"}}}}),Br=I({prop:"spaceXReverse",cssProperty:function(){return{"& > :not([hidden]) ~ :not([hidden])":{"--x-space-x-reverse":"1"}}}}),Ir=I({prop:"spaceYReverse",cssProperty:function(){return{"& > :not([hidden]) ~ :not([hidden])":{"--x-space-y-reverse":"1"}}}}),Yr=F(br,yr,vr,wr,kr,Gr,Sr,Pr,zr,Tr,Cr,Rr,Wr,Ar,Fr,jr,Br,Ir),Mr=I({prop:"gap",themeGet:hr}),Nr=I({prop:"columnGap",themeGet:hr}),Xr=I({prop:"rowGap",themeGet:hr}),Lr=I({prop:"gridColumn"}),Hr=I({prop:"gridRow"}),Or=I({prop:"gridAutoFlow"}),Er=I({prop:"gridAutoColumns"}),Vr=I({prop:"gridAutoRows"}),Dr=I({prop:"gridTemplateColumns",key:"gridTemplateColumns"}),Ur=I({prop:"gridTemplateRows",key:"gridTemplateRows"}),_r=I({prop:"gridTemplateAreas"}),qr=I({prop:"gridArea"}),Zr=F(Mr,Nr,Xr,Lr,Hr,Or,Er,Vr,Dr,Ur,_r,qr),Jr=I({prop:"appearance"}),Kr=I({prop:"cursor"}),Qr=I({prop:"pointerEvents"}),$r=I({prop:"resize"}),et=I({prop:"userSelect"}),rt=F(Jr,Kr,Qr,$r,et),tt=S({name:"size",key:"sizes",compose:te}),ot=I({prop:"w",cssProperty:"width",themeGet:tt}),nt=I({prop:"h",cssProperty:"height",themeGet:tt}),at=I({prop:"size",cssProperty:["width","height"],themeGet:tt}),it=I({prop:"maxWidth",themeGet:tt}),st=I({prop:"maxHeight",themeGet:tt}),pt=I({prop:"minWidth",themeGet:tt}),lt=I({prop:"minHeight",themeGet:tt}),ft=F(ot,nt,at,it,st,pt,lt),mt=I({prop:"fill",themeGet:X}),dt=I({prop:"stroke",themeGet:X}),ct=F(mt,dt),ut=I({prop:"borderCollapse"}),xt=I({prop:"tableLayout"}),gt=F(ut,xt),ht=S({name:"transform",key:"transforms"}),bt=I({prop:"transform",themeGet:ht,cssProperty:function(e){return!0===e?{"--x-translate-x":0,"--x-translate-y":0,"--x-rotate":0,"--x-skew-x":0,"--x-skew-y":0,"--x-scale-x":"1","--x-scale-y":"1",transform:"translate3d(var(--x-translate-x), var(--x-translate-y), 0) rotate(var(--x-rotate)) skewX(var(--x-skew-x)) skewY(var(--x-skew-y)) scaleX(var(--x-scale-x)) scaleY(var(--x-scale-y))"}:{transform:e}}}),yt=I({prop:"transformOrigin"}),vt=I({prop:"translateX",cssProperty:"--x-translate-x",themeGet:hr}),wt=I({prop:"translateY",cssProperty:"--x-translate-y",themeGet:hr}),kt=I({prop:"rotate",cssProperty:"--x-rotate",themeGet:re}),Gt=I({prop:"skewX",cssProperty:"--x-skew-x",themeGet:re}),St=I({prop:"skewY",cssProperty:"--x-skew-y",themeGet:re}),Pt=I({prop:"scale",cssProperty:["--x-scale-x","--x-scale-y"],transform:function(e){return String(e)}}),zt=I({prop:"scaleX",cssProperty:"--x-scale-x",transform:function(e){return String(e)}}),Tt=I({prop:"scaleY",cssProperty:"--x-scale-y",transform:function(e){return String(e)}}),Ct=F(bt,yt,vt,wt,kt,Gt,St,Pt,zt,Tt),Rt=S({name:"transition",key:"transitions"}),Wt=S({name:"transitionProperty",key:"transitionProperties"}),At=S({name:"timingFunctions",key:"timingFunctions"}),jt=I({prop:"transition",themeGet:Rt}),Ft=I({prop:"transitionProperty",themeGet:Wt}),Bt=I({prop:"transitionDuration",themeGet:ee}),It=I({prop:"transitionTimingFunction",themeGet:At}),Yt=I({prop:"transitionDelay",themeGet:ee}),Mt=F(jt,Ft,Bt,It,Yt),Nt=S({name:"font",key:"fonts"}),Xt=S({name:"lineHeight",key:"lineHeights",transform:function(e,r){var t,o,n,a=r.props,i=null!=(t=null==a||null==(o=a.theme)||null==(n=o.settings)?void 0:n.rootFontSize)?t:void 0;return p(e,{rootFontSize:i})}}),Lt=S({name:"fontWeight",key:"fontWeights"}),Ht=S({name:"letterSpacing",key:"letterSpacings",compose:$}),Ot=S({name:"fontSize",key:"fontSizes",compose:$}),Et=I({prop:"fontFamily",themeGet:Nt}),Vt=I({prop:"fontSize",themeGet:Ot}),Dt=I({prop:"lineHeight",themeGet:Xt}),Ut=I({prop:"fontWeight",themeGet:Lt}),_t=I({prop:"fontStyle"}),qt=I({prop:"letterSpacing",themeGet:Ht}),Zt=I({prop:"color",themeGet:X}),Jt=I({prop:"textTransform"}),Kt=I({prop:"textDecoration"}),Qt=I({prop:"textAlign"}),$t=I({prop:"verticalAlign"}),eo=I({prop:"whiteSpace"}),ro=I({prop:"textOverflow"}),to=I({prop:"listStyleType"}),oo=I({prop:"listStylePosition"}),no=F(Et,Vt,_t,Dt,Ut,Qt,qt,Zt,Jt,Kt,$t,eo,ro,to,oo),ao=F(N,Q,Ce,Fe,Ne,gr,Zr,rt,tr,ft,Yr,ct,gt,Ct,Mt,no),io=function(r,t){return function(o){var n=e.getThemeValue(o,r);return e.is(n)?n:e.is(t)?t:r}};[re,Y,oe,ae,ie,ne,X,ee,Nt,Ot,Lt,qe,Ht,Xt,te,$,xe,Se,Re,tt,hr,At,ht,Rt,Wt,De].forEach((function(e){e.meta.name&&(io[e.meta.name]=e)}));var so=function(e,r){return function(t){var o=m(t),n=x(o,e);return null===n?r:[d(n)+" {",r,"}"]}},po=function(e,r){return function(t){var o=m(t),n=g(o,e);return null===n?null:[c(n)+" {",r,"}"]}},lo={px:function(e){return s(p(e))},border:function(r){return e.num(r)&&r>0?s(r)+" solid":r}},fo=[0,5,10,20,25,30,40,50,60,70,75,80,90,95,100];function mo(e,r){return void 0===r&&(r=fo),function(e,r,t){return void 0===r&&(r=function(e){return e}),void 0===t&&(t=fo),Object.keys(e).reduce((function(o,n){return t.forEach((function(t){o[n+"-a"+t]=r(e[n],n,t)})),o}),Be({},e))}(e,(function(e,r,t){return""+e+Math.round(t/100*255).toString(16)}),r)}var co=[50,100,200,300,400,500,600,700,800,900],uo={.5:"0.125rem",1:"0.25rem",1.5:"0.375rem",2:"0.5rem",2.5:"0.625rem",3:"0.75rem",3.5:"0.875rem",4:"1rem",5:"1.25rem",6:"1.5rem",7:"1.75rem",8:"2rem",9:"2.25rem",10:"2.5rem",11:"2.75rem",12:"3rem",14:"3.5rem",16:"4rem",20:"5rem",24:"6rem",28:"7rem",32:"8rem",36:"9rem",40:"10rem",44:"11rem",48:"12rem",52:"13rem",56:"14rem",60:"15rem",64:"16rem",72:"18rem",80:"20rem",96:"24rem"},xo={"ease-in":"cubic-bezier(0.4, 0, 1, 1)","ease-out":"cubic-bezier(0, 0, 0.2, 1)","ease-in-out":"cubic-bezier(0.4, 0, 0.2, 1)"},go={default:["background-color","border-color","color","fill","stroke","opacity","box-shadow","transform"],colors:["background-color","border-color","color","fill","stroke"],opacity:["opacity"],shadow:["box-shadow"],transform:["transform"]},ho=Object.keys(go).reduce((function(e,r){return e[r]=go[r].map((function(e){return e+" "+xo["ease-in-out"]+" 150ms"})).join(","),e}),{}),bo={colors:mo({black:"#000000",white:"#ffffff","blue-gray-50":"#f8fafc","blue-gray-100":"#f1f5f9","blue-gray-200":"#e2e8f0","blue-gray-300":"#cbd5e1","blue-gray-400":"#94a3b8","blue-gray-500":"#64748b","blue-gray-600":"#475569","blue-gray-700":"#334155","blue-gray-800":"#1e293b","blue-gray-900":"#0f172a","cool-gray-50":"#f9fafb","cool-gray-100":"#f3f4f6","cool-gray-200":"#e5e7eb","cool-gray-300":"#d1d5db","cool-gray-400":"#9ca3af","cool-gray-500":"#6b7280","cool-gray-600":"#4b5563","cool-gray-700":"#374151","cool-gray-800":"#1f2937","cool-gray-900":"#111827","gray-50":"#fafafa","gray-100":"#f4f4f5","gray-200":"#e4e4e7","gray-300":"#d4d4d8","gray-400":"#a1a1aa","gray-500":"#71717a","gray-600":"#52525b","gray-700":"#3f3f46","gray-800":"#27272a","gray-900":"#18181b","true-gray-50":"#fafafa","true-gray-100":"#f5f5f5","true-gray-200":"#e5e5e5","true-gray-300":"#d4d4d4","true-gray-400":"#a3a3a3","true-gray-500":"#737373","true-gray-600":"#525252","true-gray-700":"#404040","true-gray-800":"#262626","true-gray-900":"#171717","warm-gray-50":"#fafaf9","warm-gray-100":"#f5f5f4","warm-gray-200":"#e7e5e4","warm-gray-300":"#d6d3d1","warm-gray-400":"#a8a29e","warm-gray-500":"#78716c","warm-gray-600":"#57534e","warm-gray-700":"#44403c","warm-gray-800":"#292524","warm-gray-900":"#1c1917","red-50":"#fef2f2","red-100":"#fee2e2","red-200":"#fecaca","red-300":"#fca5a5","red-400":"#f87171","red-500":"#ef4444","red-600":"#dc2626","red-700":"#b91c1c","red-800":"#991b1b","red-900":"#7f1d1d","orange-50":"#fff7ed","orange-100":"#ffedd5","orange-200":"#fed7aa","orange-300":"#fdba74","orange-400":"#fb923c","orange-500":"#f97316","orange-600":"#ea580c","orange-700":"#c2410c","orange-800":"#9a3412","orange-900":"#7c2d12","amber-50":"#fffbeb","amber-100":"#fef3c7","amber-200":"#fde68a","amber-300":"#fcd34d","amber-400":"#fbbf24","amber-500":"#f59e0b","amber-600":"#d97706","amber-700":"#b45309","amber-800":"#92400e","amber-900":"#78350f","yellow-50":"#fefce8","yellow-100":"#fef9c3","yellow-200":"#fef08a","yellow-300":"#fde047","yellow-400":"#facc15","yellow-500":"#eab308","yellow-600":"#ca8a04","yellow-700":"#a16207","yellow-800":"#854d0e","yellow-900":"#713f12","lime-50":"#f7fee7","lime-100":"#ecfccb","lime-200":"#d9f99d","lime-300":"#bef264","lime-400":"#a3e635","lime-500":"#84cc16","lime-600":"#65a30d","lime-700":"#4d7c0f","lime-800":"#3f6212","lime-900":"#365314","green-50":"#f0fdf4","green-100":"#dcfce7","green-200":"#bbf7d0","green-300":"#86efac","green-400":"#4ade80","green-500":"#22c55e","green-600":"#16a34a","green-700":"#15803d","green-800":"#166534","green-900":"#14532d","emerald-50":"#ecfdf5","emerald-100":"#d1fae5","emerald-200":"#a7f3d0","emerald-300":"#6ee7b7","emerald-400":"#34d399","emerald-500":"#10b981","emerald-600":"#059669","emerald-700":"#047857","emerald-800":"#065f46","emerald-900":"#064e3b","teal-50":"#f0fdfa","teal-100":"#ccfbf1","teal-200":"#99f6e4","teal-300":"#5eead4","teal-400":"#2dd4bf","teal-500":"#14b8a6","teal-600":"#0d9488","teal-700":"#0f766e","teal-800":"#115e59","teal-900":"#134e4a","cyan-50":"#ecfeff","cyan-100":"#cffafe","cyan-200":"#a5f3fc","cyan-300":"#67e8f9","cyan-400":"#22d3ee","cyan-500":"#06b6d4","cyan-600":"#0891b2","cyan-700":"#0e7490","cyan-800":"#155e75","cyan-900":"#164e63","light-blue-50":"#f0f9ff","light-blue-100":"#e0f2fe","light-blue-200":"#bae6fd","light-blue-300":"#7dd3fc","light-blue-400":"#38bdf8","light-blue-500":"#0ea5e9","light-blue-600":"#0284c7","light-blue-700":"#0369a1","light-blue-800":"#075985","light-blue-900":"#0c4a6e","blue-50":"#eff6ff","blue-100":"#dbeafe","blue-200":"#bfdbfe","blue-300":"#93c5fd","blue-400":"#60a5fa","blue-500":"#3b82f6","blue-600":"#2563eb","blue-700":"#1d4ed8","blue-800":"#1e40af","blue-900":"#1e3a8a","indigo-50":"#eef2ff","indigo-100":"#e0e7ff","indigo-200":"#c7d2fe","indigo-300":"#a5b4fc","indigo-400":"#818cf8","indigo-500":"#6366f1","indigo-600":"#4f46e5","indigo-700":"#4338ca","indigo-800":"#3730a3","indigo-900":"#312e81","violet-50":"#f5f3ff","violet-100":"#ede9fe","violet-200":"#ddd6fe","violet-300":"#c4b5fd","violet-400":"#a78bfa","violet-500":"#8b5cf6","violet-600":"#7c3aed","violet-700":"#6d28d9","violet-800":"#5b21b6","violet-900":"#4c1d95","purple-50":"#faf5ff","purple-100":"#f3e8ff","purple-200":"#e9d5ff","purple-300":"#d8b4fe","purple-400":"#c084fc","purple-500":"#a855f7","purple-600":"#9333ea","purple-700":"#7e22ce","purple-800":"#6b21a8","purple-900":"#581c87","fuchsia-50":"#fdf4ff","fuchsia-100":"#fae8ff","fuchsia-200":"#f5d0fe","fuchsia-300":"#f0abfc","fuchsia-400":"#e879f9","fuchsia-500":"#d946ef","fuchsia-600":"#c026d3","fuchsia-700":"#a21caf","fuchsia-800":"#86198f","fuchsia-900":"#701a75","pink-50":"#fdf2f8","pink-100":"#fce7f3","pink-200":"#fbcfe8","pink-300":"#f9a8d4","pink-400":"#f472b6","pink-500":"#ec4899","pink-600":"#db2777","pink-700":"#be185d","pink-800":"#9d174d","pink-900":"#831843","rose-50":"#fff1f2","rose-100":"#ffe4e6","rose-200":"#fecdd3","rose-300":"#fda4af","rose-400":"#fb7185","rose-500":"#f43f5e","rose-600":"#e11d48","rose-700":"#be123c","rose-800":"#9f1239","rose-900":"#881337"}),space:uo,screens:{_:0,xs:0,sm:640,md:768,lg:1024,xl:1280,"2xl":1536},sizes:Be({},uo,{1:void 0,"1s":uo[1],full:"100%",xs:"20rem",sm:"24rem",md:"28rem",lg:"32rem",xl:"36rem","2xl":"42rem","3xl":"48rem","4xl":"56rem","5xl":"64rem","6xl":"72rem","7xl":"80rem"}),radii:{none:"0",sm:"0.125rem",default:"0.25rem",md:"0.375rem",lg:"0.5rem",xl:"0.75rem","2xl":"1rem","3xl":"1.5rem",full:"9999px"},shadows:{xs:"0 0 0 1px rgba(0, 0, 0, 0.05)",sm:"0 1px 2px 0 rgba(0, 0, 0, 0.05)",default:"0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",md:"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",lg:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",xl:"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)","2xl":"0 25px 50px -12px rgba(0, 0, 0, 0.25)",inner:"inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",outline:"0 0 0 3px rgba(66, 153, 225, 0.5)"},fontSizes:{xs:"0.75rem",sm:"0.875rem",base:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem","4xl":"2.25rem","5xl":"3rem","6xl":"3.75rem","7xl":"4.5rem","8xl":"6rem","9xl":"8rem"},fontWeights:{hairline:"100",thin:"200",light:"300",normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800",black:"900"},fonts:{mono:'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',serif:'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',sans:'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'},letterSpacings:{tighter:"-0.05em",tight:"-0.025em",normal:"0em",wide:"0.025em",wider:"0.05em",widest:"0.1em"},lineHeights:{none:1,tight:1.25,snug:1.375,normal:1.5,relaxed:1.625,loose:2,3:".75rem",4:"1rem",5:"1.25rem",6:"1.5rem",7:"1.75rem",8:"2rem",9:"2.25rem",10:"2.5rem"},gridTemplateColumns:{1:"repeat(1, minmax(0, 1fr))",2:"repeat(2, minmax(0, 1fr))",3:"repeat(3, minmax(0, 1fr))",4:"repeat(4, minmax(0, 1fr))",5:"repeat(5, minmax(0, 1fr))",6:"repeat(6, minmax(0, 1fr))",7:"repeat(7, minmax(0, 1fr))",8:"repeat(8, minmax(0, 1fr))",9:"repeat(9, minmax(0, 1fr))",10:"repeat(10, minmax(0, 1fr))",11:"repeat(11, minmax(0, 1fr))",12:"repeat(12, minmax(0, 1fr))"},gridTemplateRows:{1:"repeat(1, minmax(0, 1fr))",2:"repeat(2, minmax(0, 1fr))",3:"repeat(3, minmax(0, 1fr))",4:"repeat(4, minmax(0, 1fr))",5:"repeat(5, minmax(0, 1fr))",6:"repeat(6, minmax(0, 1fr))"},borderWidths:{default:1},ringWidths:{default:3},borders:{default:"1px solid transparent"},transitions:ho,transitionProperties:go,timingFunctions:xo,animations:{spin:"x-spin 1s linear infinite",ping:"x-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite",pulse:"x-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",bounce:"x-bounce 1s infinite"}};function yo(){var e,r,t=(e=["\n /*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */\n *,::after,::before{box-sizing:border-box}:root{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}\n\n /* Role button pointer */\n [role=button], button {\n cursor: pointer;\n }\n\n /* Remove default margins */\n blockquote,\n dl,\n dd,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n hr,\n figure,\n p,\n pre {\n margin: 0;\n }\n\n /* Remove headings styles */\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n\n /* Unstyle lists */\n ol,\n ul {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n /* Image are block-level */\n img,\n svg,\n video,\n canvas,\n audio,\n iframe,\n embed,\n object {\n display: block;\n vertical-align: middle;\n }\n\n /* Reset border styles */\n *,\n ::before,\n ::after {\n border-width: 0;\n border-style: solid;\n border-color: ",";\n }\n\n * {\n --x-ring-color: ",";\n }\n\n /* Default outline on buttons */\n button:focus {\n outline: 1px dotted;\n outline: 5px auto -webkit-focus-ring-color;\n }\n\n // Animations\n @keyframes x-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n @keyframes x-ping {\n 0% {\n transform: scale(1);\n opacity: 1;\n }\n 75%, 100% {\n transform: scale(2);\n opacity: 0;\n }\n }\n\n @keyframes x-pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: .5;\n }\n }\n\n @keyframes x-bounce {\n 0%, 100% {\n transform: translateY(-25%);\n animationTimingFunction: cubic-bezier(0.8, 0, 1, 1);\n }\n 50% {\n transform: translateY(0);\n animationTimingFunction: cubic-bezier(0, 0, 0.2, 1);\n }\n }\n "],r||(r=e.slice(0)),e.raw=r,e);return yo=function(){return t},t}exports.aliasColor=function(e,r,t,o){return void 0===t&&(t=co),void 0===o&&(o=fo),t.reduce((function(t,n){return t[e+"-"+n]=io.color(r+"-"+n),o.forEach((function(o){t[e+"-"+n+"-a"+o]=io.color(r+"-"+n+"-a"+o)})),t}),{})},exports.alignContent=nr,exports.alignItems=or,exports.alignSelf=ur,exports.animation=M,exports.animations=N,exports.appearance=Jr,exports.background=H,exports.backgroundAttachment=_,exports.backgroundClip=q,exports.backgroundColor=O,exports.backgroundImage=E,exports.backgroundPosition=D,exports.backgroundRepeat=U,exports.backgroundSize=V,exports.backgrounds=Q,exports.between=function(e,r,t){return function(o){var n=m(o),a=x(n,e),i=g(n,r);return null===i?so(e,t)(o):null===a?po(r,t)(o):[u(a,i)+" {",t,"}"]}},exports.border=se,exports.borderCollapse=ut,exports.borderColor=pe,exports.borderRadius=ge,exports.borderStyle=fe,exports.borderWidth=le,exports.borders=Ce,exports.bottom=Ke,exports.boxShadow=Ae,exports.boxSizing=Le,exports.breakpoints=function(e){return function(r){for(var t=[],o=Object.keys(e),n=o.length,a=0;a<n;a++){var i=o[a],s=so(i,e[i])(r);Array.isArray(s)?s.forEach((function(e){return t.push(e)})):t.push(s)}return t}},exports.col=Me,exports.color=Zt,exports.columnGap=Nr,exports.compose=F,exports.container=He,exports.createPreflight=function(e){return(0,e.createGlobalStyle)(yo(),io.color("default-border-color","currentColor"),io.color("default-ring-color","rgba(59,130,246,0.5)"))},exports.createStyleGenerator=P,exports.cursor=Kr,exports.defaultTheme=bo,exports.display=Xe,exports.divideColor=ke,exports.divideStyle=Ge,exports.divideX=ye,exports.divideXReverse=ve,exports.divideY=be,exports.divideYReverse=we,exports.down=po,exports.effects=Fe,exports.fill=mt,exports.flex=dr,exports.flexBasis=fr,exports.flexDirection=mr,exports.flexGrow=pr,exports.flexShrink=lr,exports.flexWrap=sr,exports.flexboxGrids=Ne,exports.flexboxes=gr,exports.fontFamily=Et,exports.fontSize=Vt,exports.fontStyle=_t,exports.fontWeight=Ut,exports.gap=Mr,exports.generateHexAlphaVariants=mo,exports.getAngle=re,exports.getAnimation=Y,exports.getBorder=oe,exports.getBorderColor=ae,exports.getBorderStyle=ie,exports.getBorderWidth=ne,exports.getBreakpoints=m,exports.getColor=X,exports.getDuration=ee,exports.getFont=Nt,exports.getFontSize=Ot,exports.getFontWeight=Lt,exports.getInset=qe,exports.getLetterSpacing=Ht,exports.getLineHeight=Xt,exports.getPercent=te,exports.getPx=$,exports.getRadius=xe,exports.getRingWidth=Se,exports.getShadow=Re,exports.getSize=tt,exports.getSpace=hr,exports.getTimingFunction=At,exports.getTransform=ht,exports.getTransition=Rt,exports.getTransitionProperty=Wt,exports.getZIndex=De,exports.gradientFrom=Z,exports.gradientTo=K,exports.gradientVia=J,exports.gridArea=qr,exports.gridAutoColumns=Er,exports.gridAutoFlow=Or,exports.gridAutoRows=Vr,exports.gridColumn=Lr,exports.gridRow=Hr,exports.gridTemplateAreas=_r,exports.gridTemplateColumns=Dr,exports.gridTemplateRows=Ur,exports.grids=Zr,exports.height=nt,exports.interactivity=rt,exports.justifyContent=ar,exports.justifyItems=ir,exports.justifySelf=cr,exports.layout=tr,exports.left=Qe,exports.letterSpacing=qt,exports.lineHeight=Dt,exports.listStylePosition=oo,exports.listStyleType=to,exports.margin=br,exports.marginBottom=wr,exports.marginLeft=kr,exports.marginRight=vr,exports.marginTop=yr,exports.maxHeight=st,exports.maxWidth=it,exports.minHeight=lt,exports.minWidth=pt,exports.mx=Gr,exports.my=Sr,exports.objectFit=rr,exports.opacity=We,exports.order=xr,exports.outline=me,exports.outlineColor=de,exports.outlineStyle=ue,exports.outlineWidth=ce,exports.overflow=Oe,exports.overflowX=Ee,exports.overflowY=Ve,exports.overscrollBehavior=er,exports.padding=Pr,exports.paddingBottom=Cr,exports.paddingLeft=Rr,exports.paddingRight=Tr,exports.paddingTop=zr,exports.pointerEvents=Qr,exports.position=_e,exports.px=Wr,exports.py=Ar,exports.resize=$r,exports.right=Je,exports.ring=Pe,exports.ringColor=Te,exports.ringInset=ze,exports.rotate=kt,exports.row=Ie,exports.rowGap=Xr,exports.rpxTransformers=lo,exports.scale=Pt,exports.scaleX=zt,exports.scaleY=Tt,exports.size=at,exports.sizing=ft,exports.skewX=Gt,exports.skewY=St,exports.space=Yr,exports.spaceX=Fr,exports.spaceXReverse=Br,exports.spaceY=jr,exports.spaceYReverse=Ir,exports.stroke=dt,exports.style=I,exports.svg=ct,exports.system=ao,exports.tableLayout=xt,exports.tables=gt,exports.textAlign=Qt,exports.textDecoration=Kt,exports.textOverflow=ro,exports.textShadow=je,exports.textTransform=Jt,exports.th=io,exports.themeGetter=S,exports.top=Ze,exports.transform=bt,exports.transformOrigin=yt,exports.transforms=Ct,exports.transition=jt,exports.transitionDelay=Yt,exports.transitionDuration=Bt,exports.transitionProperty=Ft,exports.transitionTimingFunction=It,exports.transitions=Mt,exports.translateX=vt,exports.translateY=wt,exports.typography=no,exports.up=so,exports.userSelect=et,exports.verticalAlign=$t,exports.visibility=$e,exports.whiteSpace=eo,exports.width=ot,exports.zIndex=Ue;
//# sourceMappingURL=system.cjs.production.min.js.map

1726

dist/system.esm.js

@@ -1,2 +0,2 @@

import { num, string, getThemeValue, is, merge, assign, warn, identity, obj, negative, omit } from '@xstyled/util';
import { num, string, getThemeValue, is, negative, warn, merge, assign, func, obj, identity } from '@xstyled/util';

@@ -12,12 +12,18 @@ var round = function round(value) {

};
var ms = /*#__PURE__*/unit('ms');
var px = /*#__PURE__*/unit('px');
var deg = /*#__PURE__*/unit('deg');
var pxToRem = function pxToRem(value) {
return round(value / 16);
var pxToRem = function pxToRem(value, _temp) {
var _ref = _temp === void 0 ? {} : _temp,
_ref$rootFontSize = _ref.rootFontSize,
rootFontSize = _ref$rootFontSize === void 0 ? 16 : _ref$rootFontSize;
return round(value / rootFontSize);
};
var remPx = function remPx(value) {
return num(value) && value !== 0 ? pxToRem(value) + "rem" : value;
var remPx = function remPx(value, options) {
return num(value) && value !== 0 ? pxToRem(value, options) + "rem" : value;
};
var rpx = function rpx(value) {
var rpx = function rpx(value, options) {
if (!string(value) || value.length < 4) return value;

@@ -28,3 +34,3 @@ var unit = value.slice(-3);

if (n === 0) return 0;
return pxToRem(n) + "rem";
return pxToRem(n, options) + "rem";
};

@@ -35,13 +41,33 @@ var percent = function percent(n) {

var DEFAULT_BREAKPOINTS = {
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200
function toNegative(value) {
if (string(value)) return "-" + value;
return value * -1;
}
var transformNegative = function transformNegative(_, _ref2) {
var rawValue = _ref2.rawValue,
variants = _ref2.variants,
props = _ref2.props;
if (string(rawValue)) {
var _neg = rawValue.startsWith('-');
var absoluteValue = _neg ? rawValue.substr(1) : rawValue;
var variantValue = getThemeValue(props, absoluteValue, variants);
var _value = is(variantValue) ? variantValue : absoluteValue;
return _neg ? toNegative(_value) : _value;
}
var abs = Math.abs(rawValue);
var neg = negative(rawValue);
var value = is(variants && variants[abs]) ? variants[abs] : abs;
return neg ? toNegative(value) : value;
};
function getBreakpoints(props) {
var themeBreakpoints = getThemeValue(props, 'breakpoints');
var themeBreakpoints = getThemeValue(props, 'screens');
if (is(themeBreakpoints)) return themeBreakpoints;
return DEFAULT_BREAKPOINTS;
return {};
}

@@ -80,3 +106,22 @@ var mediaMinWidth = function mediaMinWidth(value) {

var defaultStates = {
motionSafe: '@media (prefers-reduced-motion: no-preference)',
motionReduce: '@media (prefers-reduced-motion: reduce)',
first: '&:first-child',
last: '&:last-child',
odd: '&:odd',
even: '&:even',
visited: '&:visited',
checked: '&:checked',
focusWithin: '&:focus-within',
hover: '&:hover',
focus: '&:focus',
focusVisible: '&:focus-visible',
active: '&:active',
disabled: '&:disabled',
placeholder: '&::placeholder'
};
/* eslint-disable no-continue, no-underscore-dangle, no-restricted-syntax, guard-for-in, no-multi-assign */
var defaultStateKeys = /*#__PURE__*/Object.keys(defaultStates);
var cacheSupported = typeof Map !== 'undefined' && typeof WeakMap !== 'undefined';

@@ -110,2 +155,3 @@ var caches = cacheSupported ? /*#__PURE__*/new WeakMap() : null;

var themeGetterId = 0;
var SPACES = /\s+/;
var themeGetter = function themeGetter(_ref) {

@@ -116,27 +162,57 @@ var name = _ref.name,

defaultVariants = _ref.defaultVariants,
compose = _ref.compose;
compose = _ref.compose,
shorthand = _ref.shorthand;
var id = themeGetterId++;
var getter = function getter(value) {
var getter = function getter(value, defaultValue) {
return function (props) {
var res = value;
if (!string(value) && !num(value)) return res;
if (!string(value) && !num(value) && value !== true) return res;
var cacheKey = value + "-" + defaultValue;
var cache = getCacheNamespace(props.theme, "__themeGetter" + id);
if (cache.has(value)) return cache.get(value);
var variants = is(key) ? getThemeValue(props, key) : null;
variants = is(variants) ? variants : defaultVariants;
res = is(variants) ? getThemeValue(props, value, variants) : null;
res = is(res) ? res : value;
var transform = (name && props.theme && props.theme.transformers ? props.theme.transformers[name] : null) || defaultTransform;
if (cache.has(cacheKey)) return cache.get(cacheKey);
if (transform) {
res = transform(res, {
rawValue: value,
variants: variants,
props: props
});
var getValue = function getValue(value) {
var localDefaultValue = is(defaultValue) ? defaultValue : value;
var res = value;
var variants = is(key) ? getThemeValue(props, key) : null;
variants = is(variants) ? variants : defaultVariants;
if (is(variants)) {
// @ts-ignore
res = getThemeValue(props, value === true ? 'default' : value, variants);
res = Array.isArray(res) ? res.join(',') : res;
}
var rawValue = value;
if (!is(res)) {
rawValue = localDefaultValue;
res = localDefaultValue;
}
var transform = (name && props.theme && props.theme.transformers ? props.theme.transformers[name] : null) || defaultTransform;
if (transform) {
res = transform(res, {
rawValue: rawValue,
variants: variants,
props: props
});
}
return compose ? compose(res)(props) : res;
};
if (shorthand && string(value)) {
var values = value.split(SPACES); // @ts-ignore
res = values.map(function (value) {
return getValue(value);
}).join(' ');
} else {
res = getValue(value);
}
res = compose ? compose(res)(props) : res;
cache.set(value, res);
cache.set(cacheKey, res);
return res;

@@ -152,18 +228,2 @@ };

};
function styleFromValue(cssProperties, value, props, themeGet, cache) {
if (obj(value)) return null;
if (cache.has(value)) return cache.get(value);
var computedValue = themeGet(value)(props);
if (!string(computedValue) && !num(computedValue)) return null;
var style = {};
for (var key in cssProperties) {
style[cssProperties[key]] = computedValue;
}
cache.set(value, style);
return style;
}
function createStyleGenerator(getStyle, props, generators) {

@@ -224,3 +284,12 @@ var generator = getStyle;

function getStyleFactory(prop, cssProperties, themeGet) {
function styleFromValue(mixin, value, props, themeGet, cache) {
if (obj(value)) return null;
if (cache.has(value)) return cache.get(value);
var computedValue = themeGet(value)(props);
var style = mixin(computedValue);
cache.set(value, style);
return style;
}
function getStyleFactory(prop, mixin, themeGet) {
return function getStyle(props) {

@@ -233,10 +302,20 @@ var value = props[prop];

return reduceBreakpoints(props, value, function (breakpointValue) {
return styleFromValue(cssProperties, breakpointValue, props, themeGet, cache);
return styleFromValue(mixin, breakpointValue, props, themeGet, cache);
}, cache);
}
return styleFromValue(cssProperties, value, props, themeGet, cache);
return styleFromValue(mixin, value, props, themeGet, cache);
};
}
function scopeStyleGetter(selector, getStyle) {
return function (props) {
var _ref2;
var result = getStyle(props);
if (result === null) return result;
return _ref2 = {}, _ref2[selector] = result, _ref2;
};
}
function indexGeneratorsByProp(styles) {

@@ -259,16 +338,16 @@ var index = {};

function getMediaOrder(styles, props) {
var medias = {};
function sortStyles(styles, props) {
var breakpoints = getBreakpoints(props);
var stylesProperties = Object.keys(styles);
var breakpointsStyles = {};
for (var key in breakpoints) {
var breakpoint = breakpoints[key];
var currentMediaKey = "@media (min-width: " + breakpoint + "px)";
var isValid = stylesProperties.includes(currentMediaKey);
if (!isValid) continue;
medias[currentMediaKey] = styles[currentMediaKey];
var min = getBreakpointMin(breakpoints, key);
var mediaMin = mediaMinWidth(min);
if (!mediaMin) continue;
var _style3 = styles[mediaMin];
if (!_style3) continue;
breakpointsStyles[mediaMin] = _style3;
}
return medias;
return assign(styles, breakpointsStyles);
}

@@ -302,9 +381,9 @@

if (generator) {
var _style3 = generator.meta.getStyle(props);
var _style4 = generator.meta.getStyle(props);
merge(styles, _style3);
merge(styles, _style4);
}
}
return assign(getMediaOrder(styles, props), styles);
return sortStyles(styles, props);
}

@@ -317,16 +396,40 @@

}
function style(_ref2) {
var prop = _ref2.prop,
cssProperty = _ref2.cssProperty,
key = _ref2.key,
transform = _ref2.transform,
themeGet = _ref2.themeGet;
var getMixinFromCSSProperties = function getMixinFromCSSProperties(properties) {
return function (value) {
var _ref3;
if (!string(value) && !num(value)) return null;
if (string(properties)) return _ref3 = {}, _ref3[properties] = value, _ref3;
var style = {};
for (var key in properties) {
style[properties[key]] = value;
}
return style;
};
};
var getMixinFromCSSProperty = function getMixinFromCSSProperty(cssProperty) {
if (func(cssProperty)) return cssProperty;
return getMixinFromCSSProperties(cssProperty);
};
function style(_ref4) {
var prop = _ref4.prop,
cssProperty = _ref4.cssProperty,
key = _ref4.key,
transform = _ref4.transform,
themeGet = _ref4.themeGet,
_ref4$states = _ref4.states,
states = _ref4$states === void 0 ? defaultStates : _ref4$states;
if (Array.isArray(prop)) {
var _cssProperties = cssProperty ? Array.isArray(cssProperty) ? cssProperty : [cssProperty] : prop;
var _mixin = cssProperty ? getMixinFromCSSProperty(cssProperty) : cssProperty;
var generators = prop.map(function (prop) {
var _generators = prop.map(function (prop) {
return style({
prop: prop,
cssProperty: _cssProperties,
cssProperty: _mixin,
key: key,

@@ -338,6 +441,7 @@ transform: transform,

return compose.apply(void 0, generators);
return compose.apply(void 0, _generators);
}
var cssProperties = cssProperty ? Array.isArray(cssProperty) ? cssProperty : [cssProperty] : [prop];
var mixin = getMixinFromCSSProperty(cssProperty || [prop]);
themeGet = themeGet || themeGetter({

@@ -347,6 +451,34 @@ key: key,

});
var getStyle = getStyleFactory(prop, cssProperties, themeGet);
return createStyleGenerator(getStyle, [prop]);
var capitalizedProp = prop.charAt(0).toUpperCase() + prop.slice(1);
var generators = [];
var stateNames = states === defaultStates ? defaultStateKeys : Object.keys(states);
for (var i = 0; i < stateNames.length; i++) {
var stateName = stateNames[i];
var stateProp = "" + stateName + capitalizedProp;
var _getStyle = scopeStyleGetter(states[stateName], getStyleFactory(stateProp, mixin, themeGet));
var _generator = createStyleGenerator(_getStyle, [stateProp]);
generators.push(_generator);
}
var getStyle = getStyleFactory(prop, mixin, themeGet);
var generator = createStyleGenerator(getStyle, [prop]);
generators.push(generator); // @ts-ignore
return compose.apply(void 0, generators);
}
var getAnimation = /*#__PURE__*/themeGetter({
name: 'animation',
key: 'animations'
});
var animation = /*#__PURE__*/style({
prop: 'animation',
themeGet: getAnimation
});
var animations = /*#__PURE__*/compose(animation);
var getColor = /*#__PURE__*/themeGetter({

@@ -356,36 +488,20 @@ name: 'color',

});
var getPx = /*#__PURE__*/themeGetter({
name: 'px',
transform: function transform(value) {
return px(rpx(value));
}
});
var getPercent = /*#__PURE__*/themeGetter({
name: 'percent',
transform: percent,
compose: getPx
});
var getRadius = /*#__PURE__*/themeGetter({
name: 'radius',
key: 'radii',
compose: getPx
});
var getTransition = /*#__PURE__*/themeGetter({
name: 'transition',
key: 'transitions'
});
var opacity = /*#__PURE__*/style({
prop: 'opacity'
});
var overflow = /*#__PURE__*/style({
prop: 'overflow'
});
var transition = /*#__PURE__*/style({
prop: 'transition',
themeGet: getTransition
});
var basics = /*#__PURE__*/compose(opacity, overflow, transition);
var gradientBackgrounds = {
'gradient-to-t': 'linear-gradient(to top, var(--x-gradient-stops))',
'gradient-to-tr': 'linear-gradient(to top right, var(--x-gradient-stops))',
'gradient-to-r': 'linear-gradient(to right, var(--x-gradient-stops))',
'gradient-to-br': 'linear-gradient(to bottom right, var(--x-gradient-stops))',
'gradient-to-b': 'linear-gradient(to bottom, var(--x-gradient-stops))',
'gradient-to-bl': 'linear-gradient(to bottom left, var(--x-gradient-stops))',
'gradient-to-l': 'linear-gradient(to left, var(--x-gradient-stops))',
'gradient-to-tl': 'linear-gradient(to top left, var(--x-gradient-stops))'
};
var background = /*#__PURE__*/style({
prop: 'background'
prop: 'background',
cssProperty: function cssProperty(value) {
return {
background: gradientBackgrounds[value] || value
};
}
});

@@ -398,3 +514,8 @@ var backgroundColor = /*#__PURE__*/style({

var backgroundImage = /*#__PURE__*/style({
prop: 'backgroundImage'
prop: 'backgroundImage',
cssProperty: function cssProperty(value) {
return {
backgroundImage: gradientBackgrounds[value] || value
};
}
});

@@ -410,4 +531,68 @@ var backgroundSize = /*#__PURE__*/style({

});
var backgrounds = /*#__PURE__*/compose(background, backgroundColor, backgroundImage, backgroundSize, backgroundPosition, backgroundRepeat);
var backgroundAttachment = /*#__PURE__*/style({
prop: 'backgroundAttachment'
});
var backgroundClip = /*#__PURE__*/style({
prop: 'backgroundClip',
cssProperty: ['backgroundClip', '-webkitBackgroundClip']
});
var gradientFrom = /*#__PURE__*/style({
prop: 'gradientFrom',
themeGet: getColor,
cssProperty: function cssProperty(value) {
return {
'--x-gradient-from': value,
'--x-gradient-stops': 'var(--x-gradient-from), var(--x-gradient-to, transparent)'
};
}
});
var gradientVia = /*#__PURE__*/style({
prop: 'gradientVia',
themeGet: getColor,
cssProperty: function cssProperty(value) {
return {
'--x-gradient-stops': "var(--x-gradient-from), " + value + ", var(--x-gradient-to, transparent)"
};
}
});
var gradientTo = /*#__PURE__*/style({
prop: 'gradientTo',
themeGet: getColor,
cssProperty: '--x-gradient-to'
});
var backgrounds = /*#__PURE__*/compose(background, backgroundColor, backgroundImage, backgroundSize, backgroundPosition, backgroundRepeat, backgroundAttachment, backgroundClip, gradientFrom, gradientVia, gradientTo);
var getPx = /*#__PURE__*/themeGetter({
name: 'px',
transform: function transform(value, _ref) {
var _props$theme$settings, _props$theme, _props$theme$settings2;
var props = _ref.props;
var rootFontSize = (_props$theme$settings = props == null ? void 0 : (_props$theme = props.theme) == null ? void 0 : (_props$theme$settings2 = _props$theme.settings) == null ? void 0 : _props$theme$settings2.rootFontSize) != null ? _props$theme$settings : undefined;
var num = Number(value);
return px(rpx(Number.isNaN(num) ? value : num, {
rootFontSize: rootFontSize
}));
}
});
var getDuration = /*#__PURE__*/themeGetter({
name: 'duration',
transform: function transform(value) {
var num = Number(value);
return ms(Number.isNaN(num) ? value : num);
}
});
var getAngle = /*#__PURE__*/themeGetter({
name: 'angle',
transform: function transform(value) {
var num = Number(value);
return deg(Number.isNaN(num) ? value : num);
}
});
var getPercent = /*#__PURE__*/themeGetter({
name: 'percent',
transform: percent,
compose: getPx
});
var getBorder = /*#__PURE__*/themeGetter({

@@ -423,4 +608,10 @@ name: 'border',

key: 'borderWidths',
compose: getPx
compose: getPx,
shorthand: true
});
var getBorderColor = /*#__PURE__*/themeGetter({
name: 'borderColor',
compose: getColor,
shorthand: true
});
var getBorderStyle = /*#__PURE__*/themeGetter({

@@ -434,37 +625,5 @@ name: 'borderStyle',

});
var borderTop = /*#__PURE__*/style({
prop: 'borderTop',
themeGet: getBorder
});
var borderTopColor = /*#__PURE__*/style({
prop: 'borderTopColor',
themeGet: getColor
});
var borderRight = /*#__PURE__*/style({
prop: 'borderRight',
themeGet: getBorder
});
var borderRightColor = /*#__PURE__*/style({
prop: 'borderRightColor',
themeGet: getColor
});
var borderBottom = /*#__PURE__*/style({
prop: 'borderBottom',
themeGet: getBorder
});
var borderBottomColor = /*#__PURE__*/style({
prop: 'borderBottomColor',
themeGet: getColor
});
var borderLeft = /*#__PURE__*/style({
prop: 'borderLeft',
themeGet: getBorder
});
var borderLeftColor = /*#__PURE__*/style({
prop: 'borderLeftColor',
themeGet: getColor
});
var borderColor = /*#__PURE__*/style({
prop: 'borderColor',
themeGet: getColor
themeGet: getBorderColor
});

@@ -479,49 +638,317 @@ var borderWidth = /*#__PURE__*/style({

});
var outline = /*#__PURE__*/style({
prop: 'outline',
themeGet: getBorder
});
var outlineColor = /*#__PURE__*/style({
prop: 'outlineColor',
themeGet: getColor
});
var outlineWidth = /*#__PURE__*/style({
prop: 'outlineWidth',
themeGet: getBorderWidth
});
var outlineStyle = /*#__PURE__*/style({
prop: 'outlineStyle',
themeGet: getBorderStyle
});
var getRadius = /*#__PURE__*/themeGetter({
name: 'radius',
key: 'radii',
compose: getPx,
shorthand: true
});
var borderRadius = /*#__PURE__*/style({
prop: 'borderRadius',
themeGet: getRadius
}); // Divide
var divideSelector = "& > :not([hidden]) ~ :not([hidden])";
var divideY = /*#__PURE__*/style({
prop: 'divideY',
themeGet: getBorderWidth,
cssProperty: function cssProperty(value) {
var _ref;
var v = value === true ? 1 : value;
return _ref = {}, _ref[divideSelector] = {
'--x-divide-y-reverse': 0,
borderTopWidth: "calc(" + v + " * calc(1 - var(--x-divide-y-reverse)))",
borderBottomWidth: "calc(" + v + " * var(--x-divide-y-reverse))"
}, _ref;
}
});
var borders = /*#__PURE__*/compose(border, borderTop, borderTopColor, borderRight, borderRightColor, borderBottom, borderBottomColor, borderLeft, borderLeftColor, borderColor, borderWidth, borderStyle, borderRadius);
var divideX = /*#__PURE__*/style({
prop: 'divideX',
themeGet: getBorderWidth,
cssProperty: function cssProperty(value) {
var _ref2;
var getSize = /*#__PURE__*/themeGetter({
name: 'size',
key: 'sizes',
compose: getPercent
var v = value === true ? 1 : value;
return _ref2 = {}, _ref2[divideSelector] = {
'--x-divide-x-reverse': 0,
borderRightWidth: "calc(" + v + " * var(--x-divide-x-reverse))",
borderLeftWidth: "calc(" + v + " * calc(1 - var(--x-divide-x-reverse)))"
}, _ref2;
}
});
var divideXReverse = /*#__PURE__*/style({
prop: 'divideXReverse',
cssProperty: function cssProperty() {
var _ref3;
return _ref3 = {}, _ref3[divideSelector] = {
'--x-divide-x-reverse': '1'
}, _ref3;
}
});
var divideYReverse = /*#__PURE__*/style({
prop: 'divideYReverse',
cssProperty: function cssProperty() {
var _ref4;
return _ref4 = {}, _ref4[divideSelector] = {
'--x-divide-y-reverse': '1'
}, _ref4;
}
});
var divideColor = /*#__PURE__*/style({
prop: 'divideColor',
themeGet: getBorderColor,
cssProperty: function cssProperty(value) {
var _ref5;
return _ref5 = {}, _ref5[divideSelector] = {
borderColor: value
}, _ref5;
}
});
var divideStyle = /*#__PURE__*/style({
prop: 'divideStyle',
themeGet: getBorderStyle,
cssProperty: function cssProperty(value) {
var _ref6;
return _ref6 = {}, _ref6[divideSelector] = {
borderStyle: value
}, _ref6;
}
});
var getRingWidth = /*#__PURE__*/themeGetter({
name: 'ringWidth',
key: 'ringWidths',
compose: getPx
});
var ring = /*#__PURE__*/style({
prop: 'ring',
themeGet: getRingWidth,
cssProperty: function cssProperty(value) {
return {
'--x-ring-shadow': "var(--x-ring-inset, /*!*/ /*!*/) 0 0 0 " + value + " var(--x-ring-color)",
boxShadow: 'var(--x-ring-shadow, 0 0 #0000), var(--x-shadow, 0 0 #0000)'
};
}
});
var ringInset = /*#__PURE__*/style({
prop: 'ringInset',
cssProperty: function cssProperty() {
return {
'--x-ring-inset': 'inset'
};
}
});
var ringColor = /*#__PURE__*/style({
prop: 'ringColor',
themeGet: getColor,
cssProperty: function cssProperty(value) {
return {
'--x-ring-color': value
};
}
});
var borders = /*#__PURE__*/compose(border, borderColor, borderWidth, borderStyle, borderRadius, outline, outlineColor, outlineWidth, outlineStyle, divideX, divideY, divideXReverse, divideYReverse, divideColor, divideStyle, ring, ringInset, ringColor);
var getShadow = /*#__PURE__*/themeGetter({
name: 'shadow',
key: 'shadows'
});
var opacity = /*#__PURE__*/style({
prop: 'opacity'
});
var boxShadow = /*#__PURE__*/style({
prop: 'boxShadow',
themeGet: getShadow,
cssProperty: function cssProperty(value) {
return {
'--x-shadow': value,
boxShadow: 'var(--x-ring-shadow, 0 0 #0000), var(--x-shadow)'
};
}
});
var textShadow = /*#__PURE__*/style({
prop: 'textShadow',
themeGet: getShadow
});
var effects = /*#__PURE__*/compose(opacity, boxShadow, textShadow);
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _taggedTemplateLiteralLoose(strings, raw) {
if (!raw) {
raw = strings.slice(0);
}
strings.raw = raw;
return strings;
}
var row = /*#__PURE__*/style({
prop: 'row',
cssProperty: function cssProperty() {
return {
boxSizing: 'border-box',
flexGrow: 1,
flexWrap: 'wrap',
display: 'flex'
};
}
});
function getColStyle(props, size) {
if (size === true) {
return {
flexBasis: 0,
flexGrow: 1,
maxWidth: '100%'
};
}
if (size === 'auto') {
return {
flex: "0 0 auto",
maxWidth: 'none',
width: 'auto'
};
}
var sizeWidth = getPercent(size)(props);
return {
flex: "0 0 " + sizeWidth,
maxWidth: sizeWidth
};
}
var col = /*#__PURE__*/createStyleGenerator(function (props) {
var value = props.col;
var common = {
boxSizing: 'border-box',
flexBasis: 0,
flexGrow: 1,
maxWidth: '100%'
};
if (obj(value)) {
var breakpointsStyle = reduceBreakpoints(props, value, function (breakpointValue) {
return getColStyle(props, breakpointValue);
});
return _extends({}, common, breakpointsStyle);
}
return _extends({}, common, getColStyle(props, value));
}, ['col']);
var flexboxGrids = /*#__PURE__*/compose(row, col);
var display = /*#__PURE__*/style({
prop: 'display'
});
var width = /*#__PURE__*/style({
prop: 'width',
themeGet: getSize
var boxSizing = /*#__PURE__*/style({
prop: 'boxSizing'
});
var height = /*#__PURE__*/style({
prop: 'height',
themeGet: getSize
var container = /*#__PURE__*/createStyleGenerator(function (props) {
if (!props.container) return null;
var breakpoints = getBreakpoints(props);
var styles = reduceBreakpoints(props, breakpoints, function (breakpointValue) {
return breakpointValue !== 0 ? {
maxWidth: breakpointValue
} : {};
});
if (obj(props.container)) {
styles = reduceBreakpoints(props, props.container, function () {
return styles;
});
}
return _extends({
width: '100%'
}, styles);
}, ['container']);
var overflow = /*#__PURE__*/style({
prop: 'overflow'
});
var maxWidth = /*#__PURE__*/style({
prop: 'maxWidth',
themeGet: getSize
var overflowX = /*#__PURE__*/style({
prop: 'overflowX'
});
var maxHeight = /*#__PURE__*/style({
prop: 'maxHeight',
themeGet: getSize
var overflowY = /*#__PURE__*/style({
prop: 'overflowY'
});
var minWidth = /*#__PURE__*/style({
prop: 'minWidth',
themeGet: getSize
var getZIndex = /*#__PURE__*/themeGetter({
name: 'zIndex',
key: 'zIndices'
});
var minHeight = /*#__PURE__*/style({
prop: 'minHeight',
themeGet: getSize
var zIndex = /*#__PURE__*/style({
prop: 'zIndex',
themeGet: getZIndex
});
var size = /*#__PURE__*/style({
prop: 'size',
cssProperty: ['width', 'height'],
themeGet: getSize
var position = /*#__PURE__*/style({
prop: 'position'
});
var verticalAlign = /*#__PURE__*/style({
prop: 'verticalAlign'
var getInset = /*#__PURE__*/themeGetter({
name: 'inset',
key: 'inset',
compose: getPx,
transform: transformNegative
});
var layout = /*#__PURE__*/compose(display, width, height, maxWidth, maxHeight, minWidth, minHeight, size, verticalAlign);
var top = /*#__PURE__*/style({
prop: 'top',
themeGet: getInset
});
var right = /*#__PURE__*/style({
prop: 'right',
themeGet: getInset
});
var bottom = /*#__PURE__*/style({
prop: 'bottom',
themeGet: getInset
});
var left = /*#__PURE__*/style({
prop: 'left',
themeGet: getInset
});
var visibility = /*#__PURE__*/style({
prop: 'visibility'
});
var overscrollBehavior = /*#__PURE__*/style({
prop: 'overscrollBehavior'
});
var objectFit = /*#__PURE__*/style({
prop: 'objectFit'
});
var layout = /*#__PURE__*/compose(boxSizing, display, container, overflow, overflowX, overflowY, position, zIndex, top, right, bottom, left, visibility, overscrollBehavior, objectFit);

@@ -570,35 +997,7 @@ var alignItems = /*#__PURE__*/style({

function toNegative(value) {
if (string(value)) return "-" + value;
return value * -1;
} // Getters
var defaultSpaceVariants = [0, 4, 8, 16, 24, 48, 96, 144, 192, 240];
var getSpace = /*#__PURE__*/themeGetter({
name: 'space',
key: 'space',
defaultVariants: defaultSpaceVariants,
compose: getPx,
transform: function transform(_, _ref) {
var rawValue = _ref.rawValue,
variants = _ref.variants,
props = _ref.props;
if (string(rawValue)) {
var _neg = rawValue.startsWith('-');
var absoluteValue = _neg ? rawValue.substr(1) : rawValue;
var variantValue = getThemeValue(props, absoluteValue, variants);
var _value = is(variantValue) ? variantValue : absoluteValue;
return _neg ? toNegative(_value) : _value;
}
var abs = Math.abs(rawValue);
var neg = negative(rawValue);
var value = is(variants[abs]) ? variants[abs] : abs;
return neg ? toNegative(value) : value;
}
transform: transformNegative
});

@@ -675,14 +1074,60 @@ var margin = /*#__PURE__*/style({

});
var space = /*#__PURE__*/compose(margin, marginTop, marginRight, marginBottom, marginLeft, mx, my, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, px$1, py);
var spaceY = /*#__PURE__*/style({
prop: 'spaceY',
themeGet: getSpace,
cssProperty: function cssProperty(value) {
return {
'& > :not([hidden]) ~ :not([hidden])': {
'--x-space-y-reverse': 0,
marginTop: "calc(" + value + " * calc(1 - var(--x-space-y-reverse)))",
marginBottom: "calc(" + value + " * var(--x-space-y-reverse))"
}
};
}
});
var spaceX = /*#__PURE__*/style({
prop: 'spaceX',
themeGet: getSpace,
cssProperty: function cssProperty(value) {
return {
'& > :not([hidden]) ~ :not([hidden])': {
'--x-space-x-reverse': 0,
marginRight: "calc(" + value + " * var(--x-space-x-reverse))",
marginLeft: "calc(" + value + " * calc(1 - var(--x-space-x-reverse)))"
}
};
}
});
var spaceXReverse = /*#__PURE__*/style({
prop: 'spaceXReverse',
cssProperty: function cssProperty() {
return {
'& > :not([hidden]) ~ :not([hidden])': {
'--x-space-x-reverse': '1'
}
};
}
});
var spaceYReverse = /*#__PURE__*/style({
prop: 'spaceYReverse',
cssProperty: function cssProperty() {
return {
'& > :not([hidden]) ~ :not([hidden])': {
'--x-space-y-reverse': '1'
}
};
}
});
var space = /*#__PURE__*/compose(margin, marginTop, marginRight, marginBottom, marginLeft, mx, my, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, px$1, py, spaceX, spaceY, spaceXReverse, spaceYReverse);
var gridGap = /*#__PURE__*/style({
prop: 'gridGap',
var gap = /*#__PURE__*/style({
prop: 'gap',
themeGet: getSpace
});
var gridColumnGap = /*#__PURE__*/style({
prop: 'gridColumnGap',
var columnGap = /*#__PURE__*/style({
prop: 'columnGap',
themeGet: getSpace
});
var gridRowGap = /*#__PURE__*/style({
prop: 'gridRowGap',
var rowGap = /*#__PURE__*/style({
prop: 'rowGap',
themeGet: getSpace

@@ -706,6 +1151,8 @@ });

var gridTemplateColumns = /*#__PURE__*/style({
prop: 'gridTemplateColumns'
prop: 'gridTemplateColumns',
key: 'gridTemplateColumns'
});
var gridTemplateRows = /*#__PURE__*/style({
prop: 'gridTemplateRows'
prop: 'gridTemplateRows',
key: 'gridTemplateRows'
});

@@ -718,47 +1165,188 @@ var gridTemplateAreas = /*#__PURE__*/style({

});
var grids = /*#__PURE__*/compose(gridGap, gridColumnGap, gridRowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
var grids = /*#__PURE__*/compose(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
var getZIndex = /*#__PURE__*/themeGetter({
name: 'zIndex',
key: 'zIndices'
var appearance = /*#__PURE__*/style({
prop: 'appearance'
});
var position = /*#__PURE__*/style({
prop: 'position'
var cursor = /*#__PURE__*/style({
prop: 'cursor'
});
var zIndex = /*#__PURE__*/style({
prop: 'zIndex',
themeGet: getZIndex
var pointerEvents = /*#__PURE__*/style({
prop: 'pointerEvents'
});
var top = /*#__PURE__*/style({
prop: 'top',
themeGet: getPx
var resize = /*#__PURE__*/style({
prop: 'resize'
});
var right = /*#__PURE__*/style({
prop: 'right',
themeGet: getPx
var userSelect = /*#__PURE__*/style({
prop: 'userSelect'
});
var bottom = /*#__PURE__*/style({
prop: 'bottom',
themeGet: getPx
var interactivity = /*#__PURE__*/compose(appearance, cursor, pointerEvents, resize, userSelect);
var getSize = /*#__PURE__*/themeGetter({
name: 'size',
key: 'sizes',
compose: getPercent
});
var left = /*#__PURE__*/style({
prop: 'left',
themeGet: getPx
var width = /*#__PURE__*/style({
prop: 'w',
cssProperty: 'width',
themeGet: getSize
});
var positioning = /*#__PURE__*/compose(position, zIndex, top, right, bottom, left);
var height = /*#__PURE__*/style({
prop: 'h',
cssProperty: 'height',
themeGet: getSize
});
var size = /*#__PURE__*/style({
prop: 'size',
cssProperty: ['width', 'height'],
themeGet: getSize
});
var maxWidth = /*#__PURE__*/style({
prop: 'maxWidth',
themeGet: getSize
});
var maxHeight = /*#__PURE__*/style({
prop: 'maxHeight',
themeGet: getSize
});
var minWidth = /*#__PURE__*/style({
prop: 'minWidth',
themeGet: getSize
});
var minHeight = /*#__PURE__*/style({
prop: 'minHeight',
themeGet: getSize
});
var sizing = /*#__PURE__*/compose(width, height, size, maxWidth, maxHeight, minWidth, minHeight);
var getShadow = /*#__PURE__*/themeGetter({
name: 'shadow',
key: 'shadows'
var fill = /*#__PURE__*/style({
prop: 'fill',
themeGet: getColor
});
var boxShadow = /*#__PURE__*/style({
prop: 'boxShadow',
themeGet: getShadow
var stroke = /*#__PURE__*/style({
prop: 'stroke',
themeGet: getColor
});
var textShadow = /*#__PURE__*/style({
prop: 'textShadow',
themeGet: getShadow
var svg = /*#__PURE__*/compose(fill, stroke);
var borderCollapse = /*#__PURE__*/style({
prop: 'borderCollapse'
});
var shadows = /*#__PURE__*/compose(boxShadow, textShadow);
var tableLayout = /*#__PURE__*/style({
prop: 'tableLayout'
});
var tables = /*#__PURE__*/compose(borderCollapse, tableLayout);
var getTransform = /*#__PURE__*/themeGetter({
name: 'transform',
key: 'transforms'
});
var transform = /*#__PURE__*/style({
prop: 'transform',
themeGet: getTransform,
cssProperty: function cssProperty(value) {
if (value === true) {
return {
'--x-translate-x': 0,
'--x-translate-y': 0,
'--x-rotate': 0,
'--x-skew-x': 0,
'--x-skew-y': 0,
'--x-scale-x': '1',
'--x-scale-y': '1',
transform: 'translate3d(var(--x-translate-x), var(--x-translate-y), 0) rotate(var(--x-rotate)) skewX(var(--x-skew-x)) skewY(var(--x-skew-y)) scaleX(var(--x-scale-x)) scaleY(var(--x-scale-y))'
};
}
return {
transform: value
};
}
});
var transformOrigin = /*#__PURE__*/style({
prop: 'transformOrigin'
});
var translateX = /*#__PURE__*/style({
prop: 'translateX',
cssProperty: '--x-translate-x',
themeGet: getSpace
});
var translateY = /*#__PURE__*/style({
prop: 'translateY',
cssProperty: '--x-translate-y',
themeGet: getSpace
});
var rotate = /*#__PURE__*/style({
prop: 'rotate',
cssProperty: '--x-rotate',
themeGet: getAngle
});
var skewX = /*#__PURE__*/style({
prop: 'skewX',
cssProperty: '--x-skew-x',
themeGet: getAngle
});
var skewY = /*#__PURE__*/style({
prop: 'skewY',
cssProperty: '--x-skew-y',
themeGet: getAngle
});
var scale = /*#__PURE__*/style({
prop: 'scale',
cssProperty: ['--x-scale-x', '--x-scale-y'],
transform: function transform(v) {
return String(v);
}
});
var scaleX = /*#__PURE__*/style({
prop: 'scaleX',
cssProperty: '--x-scale-x',
transform: function transform(v) {
return String(v);
}
});
var scaleY = /*#__PURE__*/style({
prop: 'scaleY',
cssProperty: '--x-scale-y',
transform: function transform(v) {
return String(v);
}
});
var transforms = /*#__PURE__*/compose(transform, transformOrigin, translateX, translateY, rotate, skewX, skewY, scale, scaleX, scaleY);
var getTransition = /*#__PURE__*/themeGetter({
name: 'transition',
key: 'transitions'
});
var getTransitionProperty = /*#__PURE__*/themeGetter({
name: 'transitionProperty',
key: 'transitionProperties'
});
var getTimingFunction = /*#__PURE__*/themeGetter({
name: 'timingFunctions',
key: 'timingFunctions'
});
var transition = /*#__PURE__*/style({
prop: 'transition',
themeGet: getTransition
});
var transitionProperty = /*#__PURE__*/style({
prop: 'transitionProperty',
themeGet: getTransitionProperty
});
var transitionDuration = /*#__PURE__*/style({
prop: 'transitionDuration',
themeGet: getDuration
});
var transitionTimingFunction = /*#__PURE__*/style({
prop: 'transitionTimingFunction',
themeGet: getTimingFunction
});
var transitionDelay = /*#__PURE__*/style({
prop: 'transitionDelay',
themeGet: getDuration
});
var transitions = /*#__PURE__*/compose(transition, transitionProperty, transitionDuration, transitionTimingFunction, transitionDelay);
var getFont = /*#__PURE__*/themeGetter({

@@ -771,3 +1359,11 @@ name: 'font',

key: 'lineHeights',
transform: rpx
transform: function transform(value, _ref) {
var _props$theme$settings, _props$theme, _props$theme$settings2;
var props = _ref.props;
var rootFontSize = (_props$theme$settings = props == null ? void 0 : (_props$theme = props.theme) == null ? void 0 : (_props$theme$settings2 = _props$theme.settings) == null ? void 0 : _props$theme$settings2.rootFontSize) != null ? _props$theme$settings : undefined;
return rpx(value, {
rootFontSize: rootFontSize
});
}
});

@@ -783,7 +1379,5 @@ var getFontWeight = /*#__PURE__*/themeGetter({

});
var defaultFontSizeVariants = [0, 12, 14, 16, 20, 24, 32, 48, 64, 72];
var getFontSize = /*#__PURE__*/themeGetter({
name: 'fontSize',
key: 'fontSizes',
defaultVariants: defaultFontSizeVariants,
compose: getPx

@@ -810,5 +1404,2 @@ });

});
var textAlign = /*#__PURE__*/style({
prop: 'textAlign'
});
var letterSpacing = /*#__PURE__*/style({

@@ -825,100 +1416,36 @@ prop: 'letterSpacing',

});
var typography = /*#__PURE__*/compose(fontFamily, fontSize, fontStyle, lineHeight, fontWeight, textAlign, letterSpacing, color, textTransform);
var textDecoration = /*#__PURE__*/style({
prop: 'textDecoration'
});
var textAlign = /*#__PURE__*/style({
prop: 'textAlign'
});
var verticalAlign = /*#__PURE__*/style({
prop: 'verticalAlign'
});
var whiteSpace = /*#__PURE__*/style({
prop: 'whiteSpace'
});
var textOverflow = /*#__PURE__*/style({
prop: 'textOverflow'
});
var listStyleType = /*#__PURE__*/style({
prop: 'listStyleType'
});
var listStylePosition = /*#__PURE__*/style({
prop: 'listStylePosition'
});
var typography = /*#__PURE__*/compose(fontFamily, fontSize, fontStyle, lineHeight, fontWeight, textAlign, letterSpacing, color, textTransform, textDecoration, verticalAlign, whiteSpace, textOverflow, listStyleType, listStylePosition);
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
var system = /*#__PURE__*/compose(animations, backgrounds, borders, effects, flexboxGrids, flexboxes, grids, interactivity, layout, sizing, space, svg, tables, transforms, transitions, typography);
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
var row = /*#__PURE__*/createStyleGenerator(function () {
return {
boxSizing: 'border-box',
flexGrow: 1,
flexWrap: 'wrap',
display: 'flex'
};
}, ['row']);
function getColStyle(props, size) {
if (size === true) {
return {
flexBasis: 0,
flexGrow: 1,
maxWidth: '100%'
};
}
if (size === 'auto') {
return {
flex: "0 0 auto",
maxWidth: 'none',
width: 'auto'
};
}
var sizeWidth = getPercent(size)(props);
return {
flex: "0 0 " + sizeWidth,
maxWidth: sizeWidth
};
}
var col = /*#__PURE__*/createStyleGenerator(function (props) {
var value = props.col;
var common = {
boxSizing: 'border-box',
flexBasis: 0,
flexGrow: 1,
maxWidth: '100%'
};
if (obj(value)) {
var breakpointsStyle = reduceBreakpoints(props, value, function (breakpointValue) {
return getColStyle(props, breakpointValue);
});
return _extends({}, common, breakpointsStyle);
}
return _extends({}, common, getColStyle(props, value));
}, ['col']);
var xgrids = /*#__PURE__*/compose(row, col);
var system = /*#__PURE__*/compose(backgrounds, basics, borders, flexboxes, grids, layout, positioning, shadows, space, typography, xgrids);
var th = function th(path) {
var th = function th(path, defaultValue) {
return function (props) {
var value = getThemeValue(props, path);
warn(is(value), "value \"" + path + "\" not found in theme");
return value;
if (is(value)) return value;
if (is(defaultValue)) return defaultValue;
return path;
};
};
[getColor, getPx, getPercent, getRadius, getBorder, getBorderWidth, getBorderStyle, getShadow, getSize, getZIndex, getSpace, getFont, getFontSize, getLineHeight, getFontWeight, getLetterSpacing, getTransition].forEach(function (themeGetter) {
[getAngle, getAnimation, getBorder, getBorderColor, getBorderStyle, getBorderWidth, getColor, getDuration, getFont, getFontSize, getFontWeight, getInset, getLetterSpacing, getLineHeight, getPercent, getPx, getRadius, getRingWidth, getShadow, getSize, getSpace, getTimingFunction, getTransform, getTransition, getTransitionProperty, getZIndex].forEach(function (themeGetter) {
if (themeGetter.meta.name) {

@@ -929,20 +1456,2 @@ th[themeGetter.meta.name] = themeGetter;

var variant = function variant(_ref) {
var _ref$key = _ref.key,
key = _ref$key === void 0 ? null : _ref$key,
defaultValue = _ref["default"],
_ref$variants = _ref.variants,
variants = _ref$variants === void 0 ? {} : _ref$variants,
_ref$prop = _ref.prop,
prop = _ref$prop === void 0 ? 'variant' : _ref$prop;
return function (props) {
var themeVariants = is(key) ? getThemeValue(props, key) : null;
var computedVariants = merge(assign({}, variants), themeVariants);
var value = props[prop] !== undefined ? props[prop] : defaultValue;
var result = getThemeValue(props, value, computedVariants);
warn(is(result), "variant \"" + value + "\" not found");
return result;
};
};
var up = function up(key, rules) {

@@ -1007,31 +1516,490 @@ return function (props) {

function forwardRefWithAs(forwardRef, component) {
return forwardRef(component);
var defaultAlphaVariants = [0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 100];
function generateAlphaVariants(colors, transform, variants) {
if (transform === void 0) {
transform = function transform(x) {
return x;
};
}
if (variants === void 0) {
variants = defaultAlphaVariants;
}
return Object.keys(colors).reduce(function (obj, key) {
variants.forEach(function (i) {
obj[key + "-a" + i] = transform(colors[key], key, i);
});
return obj;
}, _extends({}, colors));
}
var createSystemComponent = function createSystemComponent(_ref, defaultComponent, system$1) {
var createElement = _ref.createElement,
forwardRef = _ref.forwardRef;
function generateHexAlphaVariants(colors, variants) {
if (variants === void 0) {
variants = defaultAlphaVariants;
}
if (system$1 === void 0) {
system$1 = system;
return generateAlphaVariants(colors, function (value, _, variant) {
return "" + value + Math.round(variant / 100 * 255).toString(16);
}, variants);
}
var defaultTones = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
function aliasColor(alias, color, tones, variants) {
if (tones === void 0) {
tones = defaultTones;
}
function InnerSystemComponent(props, ref) {
var _props$as = props.as,
Type = _props$as === void 0 ? defaultComponent != null ? defaultComponent : 'div' : _props$as,
rest = _objectWithoutPropertiesLoose(props, ["as"]);
if (variants === void 0) {
variants = defaultAlphaVariants;
}
var omitted = omit(rest, system$1.meta.props);
return createElement(Type, _extends({
ref: ref
}, omitted));
return tones.reduce(function (obj, tone) {
obj[alias + "-" + tone] = th.color(color + "-" + tone);
variants.forEach(function (i) {
obj[alias + "-" + tone + "-a" + i] = th.color(color + "-" + tone + "-a" + i);
});
return obj;
}, {});
}
var space$1 = {
0.5: '0.125rem',
1: '0.25rem',
1.5: '0.375rem',
2: '0.5rem',
2.5: '0.625rem',
3: '0.75rem',
3.5: '0.875rem',
4: '1rem',
5: '1.25rem',
6: '1.5rem',
7: '1.75rem',
8: '2rem',
9: '2.25rem',
10: '2.5rem',
11: '2.75rem',
12: '3rem',
14: '3.5rem',
16: '4rem',
20: '5rem',
24: '6rem',
28: '7rem',
32: '8rem',
36: '9rem',
40: '10rem',
44: '11rem',
48: '12rem',
52: '13rem',
56: '14rem',
60: '15rem',
64: '16rem',
72: '18rem',
80: '20rem',
96: '24rem'
};
var timingFunctions = {
'ease-in': 'cubic-bezier(0.4, 0, 1, 1)',
'ease-out': 'cubic-bezier(0, 0, 0.2, 1)',
'ease-in-out': 'cubic-bezier(0.4, 0, 0.2, 1)'
};
var transitionProperties = {
"default": ['background-color', 'border-color', 'color', 'fill', 'stroke', 'opacity', 'box-shadow', 'transform'],
colors: ['background-color', 'border-color', 'color', 'fill', 'stroke'],
opacity: ['opacity'],
shadow: ['box-shadow'],
transform: ['transform']
};
var transitions$1 = /*#__PURE__*/Object.keys(transitionProperties).reduce(function (obj, key) {
obj[key] = transitionProperties[key].map(function (property) {
return property + " " + timingFunctions['ease-in-out'] + " 150ms";
}).join(',');
return obj;
}, {});
var colors = {
black: '#000000',
white: '#ffffff',
'blue-gray-50': '#f8fafc',
'blue-gray-100': '#f1f5f9',
'blue-gray-200': '#e2e8f0',
'blue-gray-300': '#cbd5e1',
'blue-gray-400': '#94a3b8',
'blue-gray-500': '#64748b',
'blue-gray-600': '#475569',
'blue-gray-700': '#334155',
'blue-gray-800': '#1e293b',
'blue-gray-900': '#0f172a',
'cool-gray-50': '#f9fafb',
'cool-gray-100': '#f3f4f6',
'cool-gray-200': '#e5e7eb',
'cool-gray-300': '#d1d5db',
'cool-gray-400': '#9ca3af',
'cool-gray-500': '#6b7280',
'cool-gray-600': '#4b5563',
'cool-gray-700': '#374151',
'cool-gray-800': '#1f2937',
'cool-gray-900': '#111827',
'gray-50': '#fafafa',
'gray-100': '#f4f4f5',
'gray-200': '#e4e4e7',
'gray-300': '#d4d4d8',
'gray-400': '#a1a1aa',
'gray-500': '#71717a',
'gray-600': '#52525b',
'gray-700': '#3f3f46',
'gray-800': '#27272a',
'gray-900': '#18181b',
'true-gray-50': '#fafafa',
'true-gray-100': '#f5f5f5',
'true-gray-200': '#e5e5e5',
'true-gray-300': '#d4d4d4',
'true-gray-400': '#a3a3a3',
'true-gray-500': '#737373',
'true-gray-600': '#525252',
'true-gray-700': '#404040',
'true-gray-800': '#262626',
'true-gray-900': '#171717',
'warm-gray-50': '#fafaf9',
'warm-gray-100': '#f5f5f4',
'warm-gray-200': '#e7e5e4',
'warm-gray-300': '#d6d3d1',
'warm-gray-400': '#a8a29e',
'warm-gray-500': '#78716c',
'warm-gray-600': '#57534e',
'warm-gray-700': '#44403c',
'warm-gray-800': '#292524',
'warm-gray-900': '#1c1917',
'red-50': '#fef2f2',
'red-100': '#fee2e2',
'red-200': '#fecaca',
'red-300': '#fca5a5',
'red-400': '#f87171',
'red-500': '#ef4444',
'red-600': '#dc2626',
'red-700': '#b91c1c',
'red-800': '#991b1b',
'red-900': '#7f1d1d',
'orange-50': '#fff7ed',
'orange-100': '#ffedd5',
'orange-200': '#fed7aa',
'orange-300': '#fdba74',
'orange-400': '#fb923c',
'orange-500': '#f97316',
'orange-600': '#ea580c',
'orange-700': '#c2410c',
'orange-800': '#9a3412',
'orange-900': '#7c2d12',
'amber-50': '#fffbeb',
'amber-100': '#fef3c7',
'amber-200': '#fde68a',
'amber-300': '#fcd34d',
'amber-400': '#fbbf24',
'amber-500': '#f59e0b',
'amber-600': '#d97706',
'amber-700': '#b45309',
'amber-800': '#92400e',
'amber-900': '#78350f',
'yellow-50': '#fefce8',
'yellow-100': '#fef9c3',
'yellow-200': '#fef08a',
'yellow-300': '#fde047',
'yellow-400': '#facc15',
'yellow-500': '#eab308',
'yellow-600': '#ca8a04',
'yellow-700': '#a16207',
'yellow-800': '#854d0e',
'yellow-900': '#713f12',
'lime-50': '#f7fee7',
'lime-100': '#ecfccb',
'lime-200': '#d9f99d',
'lime-300': '#bef264',
'lime-400': '#a3e635',
'lime-500': '#84cc16',
'lime-600': '#65a30d',
'lime-700': '#4d7c0f',
'lime-800': '#3f6212',
'lime-900': '#365314',
'green-50': '#f0fdf4',
'green-100': '#dcfce7',
'green-200': '#bbf7d0',
'green-300': '#86efac',
'green-400': '#4ade80',
'green-500': '#22c55e',
'green-600': '#16a34a',
'green-700': '#15803d',
'green-800': '#166534',
'green-900': '#14532d',
'emerald-50': '#ecfdf5',
'emerald-100': '#d1fae5',
'emerald-200': '#a7f3d0',
'emerald-300': '#6ee7b7',
'emerald-400': '#34d399',
'emerald-500': '#10b981',
'emerald-600': '#059669',
'emerald-700': '#047857',
'emerald-800': '#065f46',
'emerald-900': '#064e3b',
'teal-50': '#f0fdfa',
'teal-100': '#ccfbf1',
'teal-200': '#99f6e4',
'teal-300': '#5eead4',
'teal-400': '#2dd4bf',
'teal-500': '#14b8a6',
'teal-600': '#0d9488',
'teal-700': '#0f766e',
'teal-800': '#115e59',
'teal-900': '#134e4a',
'cyan-50': '#ecfeff',
'cyan-100': '#cffafe',
'cyan-200': '#a5f3fc',
'cyan-300': '#67e8f9',
'cyan-400': '#22d3ee',
'cyan-500': '#06b6d4',
'cyan-600': '#0891b2',
'cyan-700': '#0e7490',
'cyan-800': '#155e75',
'cyan-900': '#164e63',
'light-blue-50': '#f0f9ff',
'light-blue-100': '#e0f2fe',
'light-blue-200': '#bae6fd',
'light-blue-300': '#7dd3fc',
'light-blue-400': '#38bdf8',
'light-blue-500': '#0ea5e9',
'light-blue-600': '#0284c7',
'light-blue-700': '#0369a1',
'light-blue-800': '#075985',
'light-blue-900': '#0c4a6e',
'blue-50': '#eff6ff',
'blue-100': '#dbeafe',
'blue-200': '#bfdbfe',
'blue-300': '#93c5fd',
'blue-400': '#60a5fa',
'blue-500': '#3b82f6',
'blue-600': '#2563eb',
'blue-700': '#1d4ed8',
'blue-800': '#1e40af',
'blue-900': '#1e3a8a',
'indigo-50': '#eef2ff',
'indigo-100': '#e0e7ff',
'indigo-200': '#c7d2fe',
'indigo-300': '#a5b4fc',
'indigo-400': '#818cf8',
'indigo-500': '#6366f1',
'indigo-600': '#4f46e5',
'indigo-700': '#4338ca',
'indigo-800': '#3730a3',
'indigo-900': '#312e81',
'violet-50': '#f5f3ff',
'violet-100': '#ede9fe',
'violet-200': '#ddd6fe',
'violet-300': '#c4b5fd',
'violet-400': '#a78bfa',
'violet-500': '#8b5cf6',
'violet-600': '#7c3aed',
'violet-700': '#6d28d9',
'violet-800': '#5b21b6',
'violet-900': '#4c1d95',
'purple-50': '#faf5ff',
'purple-100': '#f3e8ff',
'purple-200': '#e9d5ff',
'purple-300': '#d8b4fe',
'purple-400': '#c084fc',
'purple-500': '#a855f7',
'purple-600': '#9333ea',
'purple-700': '#7e22ce',
'purple-800': '#6b21a8',
'purple-900': '#581c87',
'fuchsia-50': '#fdf4ff',
'fuchsia-100': '#fae8ff',
'fuchsia-200': '#f5d0fe',
'fuchsia-300': '#f0abfc',
'fuchsia-400': '#e879f9',
'fuchsia-500': '#d946ef',
'fuchsia-600': '#c026d3',
'fuchsia-700': '#a21caf',
'fuchsia-800': '#86198f',
'fuchsia-900': '#701a75',
'pink-50': '#fdf2f8',
'pink-100': '#fce7f3',
'pink-200': '#fbcfe8',
'pink-300': '#f9a8d4',
'pink-400': '#f472b6',
'pink-500': '#ec4899',
'pink-600': '#db2777',
'pink-700': '#be185d',
'pink-800': '#9d174d',
'pink-900': '#831843',
'rose-50': '#fff1f2',
'rose-100': '#ffe4e6',
'rose-200': '#fecdd3',
'rose-300': '#fda4af',
'rose-400': '#fb7185',
'rose-500': '#f43f5e',
'rose-600': '#e11d48',
'rose-700': '#be123c',
'rose-800': '#9f1239',
'rose-900': '#881337'
};
var defaultTheme = {
colors: /*#__PURE__*/generateHexAlphaVariants(colors),
space: space$1,
screens: {
_: 0,
xs: 0,
sm: 640,
md: 768,
lg: 1024,
xl: 1280,
'2xl': 1536
},
sizes: /*#__PURE__*/_extends({}, space$1, {
1: undefined,
'1s': space$1[1],
full: '100%',
xs: '20rem',
sm: '24rem',
md: '28rem',
lg: '32rem',
xl: '36rem',
'2xl': '42rem',
'3xl': '48rem',
'4xl': '56rem',
'5xl': '64rem',
'6xl': '72rem',
'7xl': '80rem'
}),
radii: {
none: '0',
sm: '0.125rem',
"default": '0.25rem',
md: '0.375rem',
lg: '0.5rem',
xl: '0.75rem',
'2xl': '1rem',
'3xl': '1.5rem',
full: '9999px'
},
shadows: {
xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
"default": '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
outline: '0 0 0 3px rgba(66, 153, 225, 0.5)'
},
fontSizes: {
xs: '0.75rem',
sm: '0.875rem',
base: '1rem',
lg: '1.125rem',
xl: '1.25rem',
'2xl': '1.5rem',
'3xl': '1.875rem',
'4xl': '2.25rem',
'5xl': '3rem',
'6xl': '3.75rem',
'7xl': '4.5rem',
'8xl': '6rem',
'9xl': '8rem'
},
fontWeights: {
hairline: '100',
thin: '200',
light: '300',
normal: '400',
medium: '500',
semibold: '600',
bold: '700',
extrabold: '800',
black: '900'
},
fonts: {
mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
serif: "ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif",
sans: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\""
},
letterSpacings: {
tighter: '-0.05em',
tight: '-0.025em',
normal: '0em',
wide: '0.025em',
wider: '0.05em',
widest: '0.1em'
},
lineHeights: {
none: 1,
tight: 1.25,
snug: 1.375,
normal: 1.5,
relaxed: 1.625,
loose: 2,
3: '.75rem',
4: '1rem',
5: '1.25rem',
6: '1.5rem',
7: '1.75rem',
8: '2rem',
9: '2.25rem',
10: '2.5rem'
},
gridTemplateColumns: {
1: 'repeat(1, minmax(0, 1fr))',
2: 'repeat(2, minmax(0, 1fr))',
3: 'repeat(3, minmax(0, 1fr))',
4: 'repeat(4, minmax(0, 1fr))',
5: 'repeat(5, minmax(0, 1fr))',
6: 'repeat(6, minmax(0, 1fr))',
7: 'repeat(7, minmax(0, 1fr))',
8: 'repeat(8, minmax(0, 1fr))',
9: 'repeat(9, minmax(0, 1fr))',
10: 'repeat(10, minmax(0, 1fr))',
11: 'repeat(11, minmax(0, 1fr))',
12: 'repeat(12, minmax(0, 1fr))'
},
gridTemplateRows: {
1: 'repeat(1, minmax(0, 1fr))',
2: 'repeat(2, minmax(0, 1fr))',
3: 'repeat(3, minmax(0, 1fr))',
4: 'repeat(4, minmax(0, 1fr))',
5: 'repeat(5, minmax(0, 1fr))',
6: 'repeat(6, minmax(0, 1fr))'
},
borderWidths: {
"default": 1
},
ringWidths: {
"default": 3
},
borders: {
"default": '1px solid transparent'
},
transitions: transitions$1,
transitionProperties: transitionProperties,
timingFunctions: timingFunctions,
animations: {
spin: 'x-spin 1s linear infinite',
ping: 'x-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
pulse: 'x-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
bounce: 'x-bounce 1s infinite'
}
};
var SystemComponent = forwardRefWithAs(forwardRef, InnerSystemComponent);
SystemComponent.displayName = 'SystemComponent';
return SystemComponent;
function _templateObject() {
var data = _taggedTemplateLiteralLoose(["\n /*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */\n *,::after,::before{box-sizing:border-box}:root{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}\n\n /* Role button pointer */\n [role=button], button {\n cursor: pointer;\n }\n\n /* Remove default margins */\n blockquote,\n dl,\n dd,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n hr,\n figure,\n p,\n pre {\n margin: 0;\n }\n\n /* Remove headings styles */\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n\n /* Unstyle lists */\n ol,\n ul {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n /* Image are block-level */\n img,\n svg,\n video,\n canvas,\n audio,\n iframe,\n embed,\n object {\n display: block;\n vertical-align: middle;\n }\n\n /* Reset border styles */\n *,\n ::before,\n ::after {\n border-width: 0;\n border-style: solid;\n border-color: ", ";\n }\n\n * {\n --x-ring-color: ", ";\n }\n\n /* Default outline on buttons */\n button:focus {\n outline: 1px dotted;\n outline: 5px auto -webkit-focus-ring-color;\n }\n\n // Animations\n @keyframes x-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n @keyframes x-ping {\n 0% {\n transform: scale(1);\n opacity: 1;\n }\n 75%, 100% {\n transform: scale(2);\n opacity: 0;\n }\n }\n\n @keyframes x-pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: .5;\n }\n }\n\n @keyframes x-bounce {\n 0%, 100% {\n transform: translateY(-25%);\n animationTimingFunction: cubic-bezier(0.8, 0, 1, 1);\n }\n 50% {\n transform: translateY(0);\n animationTimingFunction: cubic-bezier(0, 0, 0.2, 1);\n }\n }\n "]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
var createPreflight = function createPreflight(_ref) {
var createGlobalStyle = _ref.createGlobalStyle;
return createGlobalStyle(_templateObject(), th.color('default-border-color', 'currentColor'), th.color('default-ring-color', 'rgba(59,130,246,0.5)'));
};
export { alignContent, alignItems, alignSelf, background, backgroundColor, backgroundImage, backgroundPosition, backgroundRepeat, backgroundSize, backgrounds, basics, between, border, borderBottom, borderBottomColor, borderColor, borderLeft, borderLeftColor, borderRadius, borderRight, borderRightColor, borderStyle, borderTop, borderTopColor, borderWidth, borders, bottom, boxShadow, breakpoints, col, color, compose, createStyleGenerator, createSystemComponent, display, down, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, flexboxes, fontFamily, fontSize, fontStyle, fontWeight, getBorder, getBorderStyle, getBorderWidth, getBreakpoints, getColor, getFont, getFontSize, getFontWeight, getLetterSpacing, getLineHeight, getPercent, getPx, getRadius, getShadow, getSize, getSpace, getTransition, getZIndex, gridArea, gridAutoColumns, gridAutoFlow, gridAutoRows, gridColumn, gridColumnGap, gridGap, gridRow, gridRowGap, gridTemplateAreas, gridTemplateColumns, gridTemplateRows, grids, height, justifyContent, justifyItems, justifySelf, layout, left, letterSpacing, lineHeight, margin, marginBottom, marginLeft, marginRight, marginTop, maxHeight, maxWidth, minHeight, minWidth, mx, my, opacity, order, overflow, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, position, positioning, px$1 as px, py, reduceBreakpoints, right, row, rpxTransformers, shadows, size, space, style, system, textAlign, textShadow, textTransform, th, themeGetter, top, transition, typography, up, variant, verticalAlign, width, xgrids, zIndex };
export { aliasColor, alignContent, alignItems, alignSelf, animation, animations, appearance, background, backgroundAttachment, backgroundClip, backgroundColor, backgroundImage, backgroundPosition, backgroundRepeat, backgroundSize, backgrounds, between, border, borderCollapse, borderColor, borderRadius, borderStyle, borderWidth, borders, bottom, boxShadow, boxSizing, breakpoints, col, color, columnGap, compose, container, createPreflight, createStyleGenerator, cursor, defaultTheme, display, divideColor, divideStyle, divideX, divideXReverse, divideY, divideYReverse, down, effects, fill, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, flexboxGrids, flexboxes, fontFamily, fontSize, fontStyle, fontWeight, gap, generateHexAlphaVariants, getAngle, getAnimation, getBorder, getBorderColor, getBorderStyle, getBorderWidth, getBreakpoints, getColor, getDuration, getFont, getFontSize, getFontWeight, getInset, getLetterSpacing, getLineHeight, getPercent, getPx, getRadius, getRingWidth, getShadow, getSize, getSpace, getTimingFunction, getTransform, getTransition, getTransitionProperty, getZIndex, gradientFrom, gradientTo, gradientVia, gridArea, gridAutoColumns, gridAutoFlow, gridAutoRows, gridColumn, gridRow, gridTemplateAreas, gridTemplateColumns, gridTemplateRows, grids, height, interactivity, justifyContent, justifyItems, justifySelf, layout, left, letterSpacing, lineHeight, listStylePosition, listStyleType, margin, marginBottom, marginLeft, marginRight, marginTop, maxHeight, maxWidth, minHeight, minWidth, mx, my, objectFit, opacity, order, outline, outlineColor, outlineStyle, outlineWidth, overflow, overflowX, overflowY, overscrollBehavior, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, pointerEvents, position, px$1 as px, py, resize, right, ring, ringColor, ringInset, rotate, row, rowGap, rpxTransformers, scale, scaleX, scaleY, size, sizing, skewX, skewY, space, spaceX, spaceXReverse, spaceY, spaceYReverse, stroke, style, svg, system, tableLayout, tables, textAlign, textDecoration, textOverflow, textShadow, textTransform, th, themeGetter, top, transform, transformOrigin, transforms, transition, transitionDelay, transitionDuration, transitionProperty, transitionTimingFunction, transitions, translateX, translateY, typography, up, userSelect, verticalAlign, visibility, whiteSpace, width, zIndex };
//# sourceMappingURL=system.esm.js.map

6

dist/th.d.ts

@@ -1,7 +0,7 @@

import { Props, ThemeGetter } from './types';
import { IProps, ThemeGetter } from './types';
interface ThemeGet {
(path: string): (props: Props) => any;
[key: string]: ThemeGetter<any, any>;
(path: string, defaultValue?: any): (props: IProps) => any;
[key: string]: ThemeGetter;
}
export declare const th: ThemeGet;
export {};

2

dist/transformers.d.ts
export declare const rpxTransformers: {
px: <T>(value: T) => string | T | 0;
px: <T>(value: T) => string | number | T;
border: <T_1>(n: T_1) => string | T_1;
};

106

dist/types.d.ts

@@ -1,61 +0,81 @@

export declare type Variants = {
[key: string]: any;
export declare type IVariants = Record<string | number, string | number>;
export declare type ITheme = {
animations?: unknown;
borders?: unknown;
borderStyles?: unknown;
borderWidths?: unknown;
colors?: unknown;
fonts?: unknown;
fontSizes?: unknown;
fontWeights?: unknown;
gridTemplateColumns?: unknown;
gridTemplateRows?: unknown;
inset?: unknown;
letterSpacings?: unknown;
lineHeights?: unknown;
radii?: unknown;
ringWidths?: unknown;
shadows?: unknown;
screens?: unknown;
settings?: unknown;
sizes?: unknown;
space?: unknown;
timingFunctions?: unknown;
transforms?: unknown;
transitions?: unknown;
transitionProperties?: unknown;
transformers?: unknown;
zIndices?: unknown;
};
export interface Theme {
[key: string]: any;
export declare type IProps = {
[Key: string]: any;
[Key: number]: any;
theme?: any;
};
export declare type IStyles = Record<string, unknown>;
export declare type IBreakpoints = Record<string | number, number>;
export declare type IPropsWithTheme<TTheme extends ITheme> = IProps & {
theme: TTheme;
};
export declare type Mixin = (value: any) => IStyles | null | undefined;
export interface StyleGetter {
(props: IProps): any;
}
export interface Props {
[key: string]: any;
}
export interface ThemeProps<T> {
theme: T;
}
export declare type StyledProps<P, T> = P & ThemeProps<T>;
export interface DefaultThemeBreakpoints {
xs: 0;
sm: 576;
md: 768;
lg: 992;
xl: 1200;
}
export declare type ThemeBreakpoints<TTheme extends Theme> = TTheme extends {
breakpoints: Variants;
} ? ExtractThemeProperty<TTheme, 'breakpoints'> : DefaultThemeBreakpoints;
export declare type BreakpointsProperties<PropType, TTheme extends Theme> = {
[P in keyof ThemeBreakpoints<TTheme>]?: PropType;
export declare type Breakpoints<TTheme extends ITheme> = TTheme extends {
breakpoints: IBreakpoints;
} ? TTheme['screens'] : Record<string, unknown>;
export declare type BreakpointsProps<TType, TTheme extends ITheme> = {
[P in keyof Breakpoints<TTheme>]?: TType;
};
export declare type SystemProperty<PropType, TTheme extends Theme> = PropType | BreakpointsProperties<PropType, TTheme>;
export interface StyleGenerator<TProps = any> {
(props: Props): any;
export declare type SystemProp<TType, TTheme extends ITheme> = TType | BreakpointsProps<TType, TTheme>;
export interface StyleGenerator {
(props: IProps): any;
meta: {
props: string[];
getStyle: StyleGenerator<TProps>;
getStyle: StyleGenerator;
generators?: StyleGenerator[];
};
}
export interface TransformValue<TVariants, TBaseType> {
export interface TransformValue<TValueType = any> {
(value: string | number, options: {
rawValue: VariantsType<TVariants, TBaseType>;
variants: TVariants;
props: Props;
rawValue: TValueType;
variants: IVariants;
props: IProps;
}): string | number | null;
}
export interface ThemeGetter<TVariants, TBaseType> {
(value: VariantsType<TVariants, TBaseType>): (props: Props) => any;
export interface ThemeGetter<TValueType = any> {
(value: TValueType, defaultValue?: any): (props: IProps) => any;
meta: {
name?: string;
transform?: TransformValue<TVariants, TBaseType>;
transform?: TransformValue<TValueType>;
};
}
/**
* Extract theme property.
*/
export declare type ExtractThemeProperty<TTheme extends Theme, Property extends string> = TTheme[Property];
/**
* Define a type from a variant.
*/
export declare type VariantsType<TVariants, TBaseType = number | string> = TVariants extends ReadonlyArray<any> ? number | (TBaseType & {}) : TVariants extends Array<any> ? number | (TBaseType & {}) : TVariants extends Variants ? keyof TVariants | (TBaseType & {}) : TBaseType & {};
/**
* Extract type from a theme getter.
*/
export declare type ExtractThemeGetterType<T extends (...args: any) => any> = Parameters<T>[0];
export declare type VariantsType<TVariants, TBaseType = number | string> = TVariants extends ReadonlyArray<any> ? number | (TBaseType & {}) : TVariants extends Array<any> ? number | (TBaseType & {}) : TVariants extends {
default: any;
} ? keyof TVariants | (TBaseType & {}) | true : TVariants extends IVariants ? keyof TVariants | (TBaseType & {}) : TBaseType & {};
export declare type FirstArg<T extends (...args: any) => any> = Parameters<T>[0];
export interface Theme extends ITheme {
}

16

dist/unit.d.ts

@@ -1,5 +0,13 @@

export declare const unit: (unit: string) => <T extends string | number | null | undefined>(value: T) => string | null;
export declare const px: <T extends string | number | null | undefined>(value: T) => string | null;
export declare const remPx: <T>(value: T) => string | T;
export declare const rpx: <T>(value: T) => string | T | 0;
import { TransformValue } from './types';
export declare const unit: (unit: string) => <T extends string | number | null>(value: T) => string | number | null;
export declare const ms: <T extends string | number | null>(value: T) => string | number | null;
export declare const px: <T extends string | number | null>(value: T) => string | number | null;
export declare const deg: <T extends string | number | null>(value: T) => string | number | null;
interface PxToRemOptions {
rootFontSize?: number;
}
export declare const remPx: <T>(value: T, options?: PxToRemOptions | undefined) => string | number | T;
export declare const rpx: <T>(value: T, options?: PxToRemOptions | undefined) => string | number | T;
export declare const percent: (n: string | number) => string | number;
export declare const transformNegative: TransformValue;
export {};

7

package.json
{
"name": "@xstyled/system",
"description": "Modern style system for styled-components & emotion.",
"version": "1.20.0-alpha.0",
"version": "2.0.0-alpha.0",
"keywords": [

@@ -19,2 +19,3 @@ "emotion",

"scripts": {
"reset": "rm -rf dist && rm -rf node_modules/.cache",
"watch": "tsdx watch",

@@ -35,6 +36,6 @@ "build": "tsdx build",

"@babel/runtime": "^7.11.2",
"@xstyled/util": "^1.20.0-alpha.0",
"@xstyled/util": "^2.0.0-alpha.0",
"csstype": "^3.0.3 "
},
"gitHead": "2868f2df6383b9c4a74f26ddc82e70101824dd06"
"gitHead": "2a912eaa023a83245411eeb88c78dc1e1f23379e"
}
dist/styles/basics.d.ts
dist/styles/positioning.d.ts
dist/styles/shadows.d.ts
dist/styles/xgrids.d.ts
dist/systemComponent.d.ts
dist/variant.d.ts
dist/system.cjs.development.js.map

Sorry, the diff of this file is not supported yet

dist/system.cjs.production.min.js.map

Sorry, the diff of this file is not supported yet

dist/system.esm.js.map

Sorry, the diff of this file is not supported yet