UNPKG

@spark-web/text-input

Version:

--- title: Text Input storybookPath: forms-textinput--default isExperimentalPackage: false ---

413 lines 384 kB
import type { FieldState } from '@spark-web/field'; import type { TextOverflowStrategy } from '@spark-web/text'; import type { DataAttributeMap } from '@spark-web/utils/internal'; import type { InputHTMLAttributes } from 'react'; import type { AdornmentsAsChildren } from "./children-to-adornments.js"; declare type ValidTypes = 'text' | 'password' | 'email' | 'search' | 'number' | 'tel' | 'url'; declare type ValidModes = 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'; declare type NativeInputProps = Pick<InputHTMLAttributes<HTMLInputElement>, 'name' | 'onBlur' | 'onChange' | 'onFocus' | 'placeholder' | 'value' | 'required'>; export declare type TextInputProps = { /** Sets data attributes for the element. */ data?: DataAttributeMap; /** * How an input behaves varies considerably depending on the value of its type * attribute. If this attribute is not specified, the default type "text". */ type?: ValidTypes; /** Sets the input mode attribute for the component. */ inputMode?: ValidModes; /** * Adorn the input with ornamental element(s) to aid user input, or * interactive element(s) to augment user input. Each child **must** be * wrapped with the `InputAdornment` component to ensure proper layout, * otherwise it will not be rendered. */ children?: AdornmentsAsChildren; /** Manage how text behaves with regard to overflow. */ overflowStrategy?: TextOverflowStrategy; } & NativeInputProps; /** Organize and emphasize information quickly and effectively in a list of text elements. */ export declare const TextInput: import("react").ForwardRefExoticComponent<{ /** Sets data attributes for the element. */ data?: DataAttributeMap | undefined; /** * How an input behaves varies considerably depending on the value of its type * attribute. If this attribute is not specified, the default type "text". */ type?: ValidTypes | undefined; /** Sets the input mode attribute for the component. */ inputMode?: ValidModes | undefined; /** * Adorn the input with ornamental element(s) to aid user input, or * interactive element(s) to augment user input. Each child **must** be * wrapped with the `InputAdornment` component to ensure proper layout, * otherwise it will not be rendered. */ children?: AdornmentsAsChildren; /** Manage how text behaves with regard to overflow. */ overflowStrategy?: "nowrap" | "truncate" | "breakword" | undefined; } & NativeInputProps & import("react").RefAttributes<HTMLInputElement>>; export declare type UseInputStylesProps = FieldState & { startAdornment?: boolean; endAdornment?: boolean; readOnly?: boolean; overflowStrategy?: TextOverflowStrategy; }; /** * Returns a tuple where the first item is an object of props to spread onto the * underlying Box component that our inputs are created with, and the second * item is a CSS object to be passed to Emotion's `css` function **/ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment, readOnly, overflowStrategy, }: UseInputStylesProps) => readonly [{ readonly flex: 1; readonly position: "relative"; readonly height: "medium"; readonly paddingLeft: "medium" | "none"; readonly paddingRight: "medium" | "none"; readonly width: "full"; }, { readonly ':enabled': { readonly ':focus + [data-focus-indicator]': { readonly boxShadow: string; readonly outline: string; readonly outlineOffset: string; readonly borderColor: string; } | { readonly outline: string; readonly outlineOffset: string; readonly borderColor: string; }; }; readonly ':focus': { readonly outline: "none"; }; readonly '&[aria-invalid=true]': { readonly color: string; }; readonly accentColor?: import("csstype").Property.AccentColor | readonly import("csstype").Property.AccentColor[] | undefined; readonly alignContent?: import("csstype").Property.AlignContent | readonly import("csstype").Property.AlignContent[] | undefined; readonly alignItems?: import("csstype").Property.AlignItems | readonly import("csstype").Property.AlignItems[] | undefined; readonly alignSelf?: import("csstype").Property.AlignSelf | readonly import("csstype").Property.AlignSelf[] | undefined; readonly alignTracks?: import("csstype").Property.AlignTracks | readonly import("csstype").Property.AlignTracks[] | undefined; readonly animationComposition?: import("csstype").Property.AnimationComposition | readonly import("csstype").Property.AnimationComposition[] | undefined; readonly animationDelay?: import("csstype").Property.AnimationDelay<string & {}> | readonly import("csstype").Property.AnimationDelay<string & {}>[] | undefined; readonly animationDirection?: import("csstype").Property.AnimationDirection | readonly import("csstype").Property.AnimationDirection[] | undefined; readonly animationDuration?: import("csstype").Property.AnimationDuration<string & {}> | readonly import("csstype").Property.AnimationDuration<string & {}>[] | undefined; readonly animationFillMode?: import("csstype").Property.AnimationFillMode | readonly import("csstype").Property.AnimationFillMode[] | undefined; readonly animationIterationCount?: import("csstype").Property.AnimationIterationCount | readonly import("csstype").Property.AnimationIterationCount[] | undefined; readonly animationName?: import("csstype").Property.AnimationName | readonly import("csstype").Property.AnimationName[] | undefined; readonly animationPlayState?: import("csstype").Property.AnimationPlayState | readonly import("csstype").Property.AnimationPlayState[] | undefined; readonly animationRangeEnd?: string | number | readonly import("csstype").Property.AnimationRangeEnd<string | number>[] | undefined; readonly animationRangeStart?: string | number | readonly import("csstype").Property.AnimationRangeStart<string | number>[] | undefined; readonly animationTimeline?: import("csstype").Property.AnimationTimeline | readonly import("csstype").Property.AnimationTimeline[] | undefined; readonly animationTimingFunction?: import("csstype").Property.AnimationTimingFunction | readonly import("csstype").Property.AnimationTimingFunction[] | undefined; readonly appearance?: import("csstype").Property.Appearance | readonly import("csstype").Property.Appearance[] | undefined; readonly aspectRatio?: import("csstype").Property.AspectRatio | readonly import("csstype").Property.AspectRatio[] | undefined; readonly backdropFilter?: import("csstype").Property.BackdropFilter | readonly import("csstype").Property.BackdropFilter[] | undefined; readonly backfaceVisibility?: import("csstype").Property.BackfaceVisibility | readonly import("csstype").Property.BackfaceVisibility[] | undefined; readonly backgroundAttachment?: import("csstype").Property.BackgroundAttachment | readonly import("csstype").Property.BackgroundAttachment[] | undefined; readonly backgroundBlendMode?: import("csstype").Property.BackgroundBlendMode | readonly import("csstype").Property.BackgroundBlendMode[] | undefined; readonly backgroundClip?: import("csstype").Property.BackgroundClip | readonly import("csstype").Property.BackgroundClip[] | undefined; readonly backgroundColor?: import("csstype").Property.BackgroundColor | readonly import("csstype").Property.BackgroundColor[] | undefined; readonly backgroundImage?: import("csstype").Property.BackgroundImage | readonly import("csstype").Property.BackgroundImage[] | undefined; readonly backgroundOrigin?: import("csstype").Property.BackgroundOrigin | readonly import("csstype").Property.BackgroundOrigin[] | undefined; readonly backgroundPositionX?: string | number | readonly import("csstype").Property.BackgroundPositionX<string | number>[] | undefined; readonly backgroundPositionY?: string | number | readonly import("csstype").Property.BackgroundPositionY<string | number>[] | undefined; readonly backgroundRepeat?: import("csstype").Property.BackgroundRepeat | readonly import("csstype").Property.BackgroundRepeat[] | undefined; readonly backgroundSize?: string | number | readonly import("csstype").Property.BackgroundSize<string | number>[] | undefined; readonly blockOverflow?: import("csstype").Property.BlockOverflow | readonly import("csstype").Property.BlockOverflow[] | undefined; readonly blockSize?: string | number | readonly import("csstype").Property.BlockSize<string | number>[] | undefined; readonly borderBlockColor?: import("csstype").Property.BorderBlockColor | readonly import("csstype").Property.BorderBlockColor[] | undefined; readonly borderBlockEndColor?: import("csstype").Property.BorderBlockEndColor | readonly import("csstype").Property.BorderBlockEndColor[] | undefined; readonly borderBlockEndStyle?: import("csstype").Property.BorderBlockEndStyle | readonly import("csstype").Property.BorderBlockEndStyle[] | undefined; readonly borderBlockEndWidth?: import("csstype").Property.BorderBlockEndWidth<string | number> | readonly import("csstype").Property.BorderBlockEndWidth<string | number>[] | undefined; readonly borderBlockStartColor?: import("csstype").Property.BorderBlockStartColor | readonly import("csstype").Property.BorderBlockStartColor[] | undefined; readonly borderBlockStartStyle?: import("csstype").Property.BorderBlockStartStyle | readonly import("csstype").Property.BorderBlockStartStyle[] | undefined; readonly borderBlockStartWidth?: import("csstype").Property.BorderBlockStartWidth<string | number> | readonly import("csstype").Property.BorderBlockStartWidth<string | number>[] | undefined; readonly borderBlockStyle?: import("csstype").Property.BorderBlockStyle | readonly import("csstype").Property.BorderBlockStyle[] | undefined; readonly borderBlockWidth?: import("csstype").Property.BorderBlockWidth<string | number> | readonly import("csstype").Property.BorderBlockWidth<string | number>[] | undefined; readonly borderBottomColor?: import("csstype").Property.BorderBottomColor | readonly import("csstype").Property.BorderBottomColor[] | undefined; readonly borderBottomLeftRadius?: string | number | readonly import("csstype").Property.BorderBottomLeftRadius<string | number>[] | undefined; readonly borderBottomRightRadius?: string | number | readonly import("csstype").Property.BorderBottomRightRadius<string | number>[] | undefined; readonly borderBottomStyle?: import("csstype").Property.BorderBottomStyle | readonly import("csstype").Property.BorderBottomStyle[] | undefined; readonly borderBottomWidth?: import("csstype").Property.BorderBottomWidth<string | number> | readonly import("csstype").Property.BorderBottomWidth<string | number>[] | undefined; readonly borderCollapse?: import("csstype").Property.BorderCollapse | readonly import("csstype").Property.BorderCollapse[] | undefined; readonly borderEndEndRadius?: string | number | readonly import("csstype").Property.BorderEndEndRadius<string | number>[] | undefined; readonly borderEndStartRadius?: string | number | readonly import("csstype").Property.BorderEndStartRadius<string | number>[] | undefined; readonly borderImageOutset?: string | number | readonly import("csstype").Property.BorderImageOutset<string | number>[] | undefined; readonly borderImageRepeat?: import("csstype").Property.BorderImageRepeat | readonly import("csstype").Property.BorderImageRepeat[] | undefined; readonly borderImageSlice?: import("csstype").Property.BorderImageSlice | readonly import("csstype").Property.BorderImageSlice[] | undefined; readonly borderImageSource?: import("csstype").Property.BorderImageSource | readonly import("csstype").Property.BorderImageSource[] | undefined; readonly borderImageWidth?: string | number | readonly import("csstype").Property.BorderImageWidth<string | number>[] | undefined; readonly borderInlineColor?: import("csstype").Property.BorderInlineColor | readonly import("csstype").Property.BorderInlineColor[] | undefined; readonly borderInlineEndColor?: import("csstype").Property.BorderInlineEndColor | readonly import("csstype").Property.BorderInlineEndColor[] | undefined; readonly borderInlineEndStyle?: import("csstype").Property.BorderInlineEndStyle | readonly import("csstype").Property.BorderInlineEndStyle[] | undefined; readonly borderInlineEndWidth?: import("csstype").Property.BorderInlineEndWidth<string | number> | readonly import("csstype").Property.BorderInlineEndWidth<string | number>[] | undefined; readonly borderInlineStartColor?: import("csstype").Property.BorderInlineStartColor | readonly import("csstype").Property.BorderInlineStartColor[] | undefined; readonly borderInlineStartStyle?: import("csstype").Property.BorderInlineStartStyle | readonly import("csstype").Property.BorderInlineStartStyle[] | undefined; readonly borderInlineStartWidth?: import("csstype").Property.BorderInlineStartWidth<string | number> | readonly import("csstype").Property.BorderInlineStartWidth<string | number>[] | undefined; readonly borderInlineStyle?: import("csstype").Property.BorderInlineStyle | readonly import("csstype").Property.BorderInlineStyle[] | undefined; readonly borderInlineWidth?: import("csstype").Property.BorderInlineWidth<string | number> | readonly import("csstype").Property.BorderInlineWidth<string | number>[] | undefined; readonly borderLeftColor?: import("csstype").Property.BorderLeftColor | readonly import("csstype").Property.BorderLeftColor[] | undefined; readonly borderLeftStyle?: import("csstype").Property.BorderLeftStyle | readonly import("csstype").Property.BorderLeftStyle[] | undefined; readonly borderLeftWidth?: import("csstype").Property.BorderLeftWidth<string | number> | readonly import("csstype").Property.BorderLeftWidth<string | number>[] | undefined; readonly borderRightColor?: import("csstype").Property.BorderRightColor | readonly import("csstype").Property.BorderRightColor[] | undefined; readonly borderRightStyle?: import("csstype").Property.BorderRightStyle | readonly import("csstype").Property.BorderRightStyle[] | undefined; readonly borderRightWidth?: import("csstype").Property.BorderRightWidth<string | number> | readonly import("csstype").Property.BorderRightWidth<string | number>[] | undefined; readonly borderSpacing?: string | number | readonly import("csstype").Property.BorderSpacing<string | number>[] | undefined; readonly borderStartEndRadius?: string | number | readonly import("csstype").Property.BorderStartEndRadius<string | number>[] | undefined; readonly borderStartStartRadius?: string | number | readonly import("csstype").Property.BorderStartStartRadius<string | number>[] | undefined; readonly borderTopColor?: import("csstype").Property.BorderTopColor | readonly import("csstype").Property.BorderTopColor[] | undefined; readonly borderTopLeftRadius?: string | number | readonly import("csstype").Property.BorderTopLeftRadius<string | number>[] | undefined; readonly borderTopRightRadius?: string | number | readonly import("csstype").Property.BorderTopRightRadius<string | number>[] | undefined; readonly borderTopStyle?: import("csstype").Property.BorderTopStyle | readonly import("csstype").Property.BorderTopStyle[] | undefined; readonly borderTopWidth?: import("csstype").Property.BorderTopWidth<string | number> | readonly import("csstype").Property.BorderTopWidth<string | number>[] | undefined; readonly bottom?: string | number | readonly import("csstype").Property.Bottom<string | number>[] | undefined; readonly boxDecorationBreak?: import("csstype").Property.BoxDecorationBreak | readonly import("csstype").Property.BoxDecorationBreak[] | undefined; readonly boxShadow?: import("csstype").Property.BoxShadow | readonly import("csstype").Property.BoxShadow[] | undefined; readonly boxSizing?: import("csstype").Property.BoxSizing | readonly import("csstype").Property.BoxSizing[] | undefined; readonly breakAfter?: import("csstype").Property.BreakAfter | readonly import("csstype").Property.BreakAfter[] | undefined; readonly breakBefore?: import("csstype").Property.BreakBefore | readonly import("csstype").Property.BreakBefore[] | undefined; readonly breakInside?: import("csstype").Property.BreakInside | readonly import("csstype").Property.BreakInside[] | undefined; readonly captionSide?: import("csstype").Property.CaptionSide | readonly import("csstype").Property.CaptionSide[] | undefined; readonly caretColor?: import("csstype").Property.CaretColor | readonly import("csstype").Property.CaretColor[] | undefined; readonly caretShape?: import("csstype").Property.CaretShape | readonly import("csstype").Property.CaretShape[] | undefined; readonly clear?: import("csstype").Property.Clear | readonly import("csstype").Property.Clear[] | undefined; readonly clipPath?: import("csstype").Property.ClipPath | readonly import("csstype").Property.ClipPath[] | undefined; readonly color?: import("csstype").Property.Color | readonly import("csstype").Property.Color[] | undefined; readonly colorAdjust?: import("csstype").Property.PrintColorAdjust | readonly import("csstype").Property.PrintColorAdjust[] | undefined; readonly colorScheme?: import("csstype").Property.ColorScheme | readonly import("csstype").Property.ColorScheme[] | undefined; readonly columnCount?: import("csstype").Property.ColumnCount | readonly import("csstype").Property.ColumnCount[] | undefined; readonly columnFill?: import("csstype").Property.ColumnFill | readonly import("csstype").Property.ColumnFill[] | undefined; readonly columnGap?: string | number | readonly import("csstype").Property.ColumnGap<string | number>[] | undefined; readonly columnRuleColor?: import("csstype").Property.ColumnRuleColor | readonly import("csstype").Property.ColumnRuleColor[] | undefined; readonly columnRuleStyle?: import("csstype").Property.ColumnRuleStyle | readonly import("csstype").Property.ColumnRuleStyle[] | undefined; readonly columnRuleWidth?: string | number | readonly import("csstype").Property.ColumnRuleWidth<string | number>[] | undefined; readonly columnSpan?: import("csstype").Property.ColumnSpan | readonly import("csstype").Property.ColumnSpan[] | undefined; readonly columnWidth?: import("csstype").Property.ColumnWidth<string | number> | readonly import("csstype").Property.ColumnWidth<string | number>[] | undefined; readonly contain?: import("csstype").Property.Contain | readonly import("csstype").Property.Contain[] | undefined; readonly containIntrinsicBlockSize?: string | number | readonly import("csstype").Property.ContainIntrinsicBlockSize<string | number>[] | undefined; readonly containIntrinsicHeight?: string | number | readonly import("csstype").Property.ContainIntrinsicHeight<string | number>[] | undefined; readonly containIntrinsicInlineSize?: string | number | readonly import("csstype").Property.ContainIntrinsicInlineSize<string | number>[] | undefined; readonly containIntrinsicWidth?: string | number | readonly import("csstype").Property.ContainIntrinsicWidth<string | number>[] | undefined; readonly containerName?: import("csstype").Property.ContainerName | readonly import("csstype").Property.ContainerName[] | undefined; readonly containerType?: import("csstype").Property.ContainerType | readonly import("csstype").Property.ContainerType[] | undefined; readonly content?: import("csstype").Property.Content | readonly import("csstype").Property.Content[] | undefined; readonly contentVisibility?: import("csstype").Property.ContentVisibility | readonly import("csstype").Property.ContentVisibility[] | undefined; readonly counterIncrement?: import("csstype").Property.CounterIncrement | readonly import("csstype").Property.CounterIncrement[] | undefined; readonly counterReset?: import("csstype").Property.CounterReset | readonly import("csstype").Property.CounterReset[] | undefined; readonly counterSet?: import("csstype").Property.CounterSet | readonly import("csstype").Property.CounterSet[] | undefined; readonly cursor?: import("csstype").Property.Cursor | readonly import("csstype").Property.Cursor[] | undefined; readonly direction?: import("csstype").Property.Direction | readonly import("csstype").Property.Direction[] | undefined; readonly display?: import("csstype").Property.Display | readonly import("csstype").Property.Display[] | undefined; readonly emptyCells?: import("csstype").Property.EmptyCells | readonly import("csstype").Property.EmptyCells[] | undefined; readonly filter?: import("csstype").Property.Filter | readonly import("csstype").Property.Filter[] | undefined; readonly flexBasis?: string | number | readonly import("csstype").Property.FlexBasis<string | number>[] | undefined; readonly flexDirection?: import("csstype").Property.FlexDirection | readonly import("csstype").Property.FlexDirection[] | undefined; readonly flexGrow?: import("csstype").Property.FlexGrow | readonly import("csstype").Property.FlexGrow[] | undefined; readonly flexShrink?: import("csstype").Property.FlexShrink | readonly import("csstype").Property.FlexShrink[] | undefined; readonly flexWrap?: import("csstype").Property.FlexWrap | readonly import("csstype").Property.FlexWrap[] | undefined; readonly float?: import("csstype").Property.Float | readonly import("csstype").Property.Float[] | undefined; readonly fontFamily?: import("csstype").Property.FontFamily | readonly import("csstype").Property.FontFamily[] | undefined; readonly fontFeatureSettings?: import("csstype").Property.FontFeatureSettings | readonly import("csstype").Property.FontFeatureSettings[] | undefined; readonly fontKerning?: import("csstype").Property.FontKerning | readonly import("csstype").Property.FontKerning[] | undefined; readonly fontLanguageOverride?: import("csstype").Property.FontLanguageOverride | readonly import("csstype").Property.FontLanguageOverride[] | undefined; readonly fontOpticalSizing?: import("csstype").Property.FontOpticalSizing | readonly import("csstype").Property.FontOpticalSizing[] | undefined; readonly fontPalette?: import("csstype").Property.FontPalette | readonly import("csstype").Property.FontPalette[] | undefined; readonly fontSize?: string | number | readonly import("csstype").Property.FontSize<string | number>[] | undefined; readonly fontSizeAdjust?: import("csstype").Property.FontSizeAdjust | readonly import("csstype").Property.FontSizeAdjust[] | undefined; readonly fontSmooth?: import("csstype").Property.FontSmooth<string | number> | readonly import("csstype").Property.FontSmooth<string | number>[] | undefined; readonly fontStretch?: import("csstype").Property.FontStretch | readonly import("csstype").Property.FontStretch[] | undefined; readonly fontStyle?: import("csstype").Property.FontStyle | readonly import("csstype").Property.FontStyle[] | undefined; readonly fontSynthesis?: import("csstype").Property.FontSynthesis | readonly import("csstype").Property.FontSynthesis[] | undefined; readonly fontSynthesisPosition?: import("csstype").Property.FontSynthesisPosition | readonly import("csstype").Property.FontSynthesisPosition[] | undefined; readonly fontSynthesisSmallCaps?: import("csstype").Property.FontSynthesisSmallCaps | readonly import("csstype").Property.FontSynthesisSmallCaps[] | undefined; readonly fontSynthesisStyle?: import("csstype").Property.FontSynthesisStyle | readonly import("csstype").Property.FontSynthesisStyle[] | undefined; readonly fontSynthesisWeight?: import("csstype").Property.FontSynthesisWeight | readonly import("csstype").Property.FontSynthesisWeight[] | undefined; readonly fontVariant?: import("csstype").Property.FontVariant | readonly import("csstype").Property.FontVariant[] | undefined; readonly fontVariantAlternates?: import("csstype").Property.FontVariantAlternates | readonly import("csstype").Property.FontVariantAlternates[] | undefined; readonly fontVariantCaps?: import("csstype").Property.FontVariantCaps | readonly import("csstype").Property.FontVariantCaps[] | undefined; readonly fontVariantEastAsian?: import("csstype").Property.FontVariantEastAsian | readonly import("csstype").Property.FontVariantEastAsian[] | undefined; readonly fontVariantEmoji?: import("csstype").Property.FontVariantEmoji | readonly import("csstype").Property.FontVariantEmoji[] | undefined; readonly fontVariantLigatures?: import("csstype").Property.FontVariantLigatures | readonly import("csstype").Property.FontVariantLigatures[] | undefined; readonly fontVariantNumeric?: import("csstype").Property.FontVariantNumeric | readonly import("csstype").Property.FontVariantNumeric[] | undefined; readonly fontVariantPosition?: import("csstype").Property.FontVariantPosition | readonly import("csstype").Property.FontVariantPosition[] | undefined; readonly fontVariationSettings?: import("csstype").Property.FontVariationSettings | readonly import("csstype").Property.FontVariationSettings[] | undefined; readonly fontWeight?: import("csstype").Property.FontWeight | readonly import("csstype").Property.FontWeight[] | undefined; readonly forcedColorAdjust?: import("csstype").Property.ForcedColorAdjust | readonly import("csstype").Property.ForcedColorAdjust[] | undefined; readonly gridAutoColumns?: string | number | readonly import("csstype").Property.GridAutoColumns<string | number>[] | undefined; readonly gridAutoFlow?: import("csstype").Property.GridAutoFlow | readonly import("csstype").Property.GridAutoFlow[] | undefined; readonly gridAutoRows?: string | number | readonly import("csstype").Property.GridAutoRows<string | number>[] | undefined; readonly gridColumnEnd?: import("csstype").Property.GridColumnEnd | readonly import("csstype").Property.GridColumnEnd[] | undefined; readonly gridColumnStart?: import("csstype").Property.GridColumnStart | readonly import("csstype").Property.GridColumnStart[] | undefined; readonly gridRowEnd?: import("csstype").Property.GridRowEnd | readonly import("csstype").Property.GridRowEnd[] | undefined; readonly gridRowStart?: import("csstype").Property.GridRowStart | readonly import("csstype").Property.GridRowStart[] | undefined; readonly gridTemplateAreas?: import("csstype").Property.GridTemplateAreas | readonly import("csstype").Property.GridTemplateAreas[] | undefined; readonly gridTemplateColumns?: string | number | readonly import("csstype").Property.GridTemplateColumns<string | number>[] | undefined; readonly gridTemplateRows?: string | number | readonly import("csstype").Property.GridTemplateRows<string | number>[] | undefined; readonly hangingPunctuation?: import("csstype").Property.HangingPunctuation | readonly import("csstype").Property.HangingPunctuation[] | undefined; readonly height?: string | number | readonly import("csstype").Property.Height<string | number>[] | undefined; readonly hyphenateCharacter?: import("csstype").Property.HyphenateCharacter | readonly import("csstype").Property.HyphenateCharacter[] | undefined; readonly hyphenateLimitChars?: import("csstype").Property.HyphenateLimitChars | readonly import("csstype").Property.HyphenateLimitChars[] | undefined; readonly hyphens?: import("csstype").Property.Hyphens | readonly import("csstype").Property.Hyphens[] | undefined; readonly imageOrientation?: import("csstype").Property.ImageOrientation | readonly import("csstype").Property.ImageOrientation[] | undefined; readonly imageRendering?: import("csstype").Property.ImageRendering | readonly import("csstype").Property.ImageRendering[] | undefined; readonly imageResolution?: import("csstype").Property.ImageResolution | readonly import("csstype").Property.ImageResolution[] | undefined; readonly initialLetter?: import("csstype").Property.InitialLetter | readonly import("csstype").Property.InitialLetter[] | undefined; readonly inlineSize?: string | number | readonly import("csstype").Property.InlineSize<string | number>[] | undefined; readonly inputSecurity?: import("csstype").Property.InputSecurity | readonly import("csstype").Property.InputSecurity[] | undefined; readonly insetBlockEnd?: string | number | readonly import("csstype").Property.InsetBlockEnd<string | number>[] | undefined; readonly insetBlockStart?: string | number | readonly import("csstype").Property.InsetBlockStart<string | number>[] | undefined; readonly insetInlineEnd?: string | number | readonly import("csstype").Property.InsetInlineEnd<string | number>[] | undefined; readonly insetInlineStart?: string | number | readonly import("csstype").Property.InsetInlineStart<string | number>[] | undefined; readonly isolation?: import("csstype").Property.Isolation | readonly import("csstype").Property.Isolation[] | undefined; readonly justifyContent?: import("csstype").Property.JustifyContent | readonly import("csstype").Property.JustifyContent[] | undefined; readonly justifyItems?: import("csstype").Property.JustifyItems | readonly import("csstype").Property.JustifyItems[] | undefined; readonly justifySelf?: import("csstype").Property.JustifySelf | readonly import("csstype").Property.JustifySelf[] | undefined; readonly justifyTracks?: import("csstype").Property.JustifyTracks | readonly import("csstype").Property.JustifyTracks[] | undefined; readonly left?: string | number | readonly import("csstype").Property.Left<string | number>[] | undefined; readonly letterSpacing?: import("csstype").Property.LetterSpacing<string | number> | readonly import("csstype").Property.LetterSpacing<string | number>[] | undefined; readonly lineBreak?: import("csstype").Property.LineBreak | readonly import("csstype").Property.LineBreak[] | undefined; readonly lineHeight?: string | number | readonly import("csstype").Property.LineHeight<string | number>[] | undefined; readonly lineHeightStep?: import("csstype").Property.LineHeightStep<string | number> | readonly import("csstype").Property.LineHeightStep<string | number>[] | undefined; readonly listStyleImage?: import("csstype").Property.ListStyleImage | readonly import("csstype").Property.ListStyleImage[] | undefined; readonly listStylePosition?: import("csstype").Property.ListStylePosition | readonly import("csstype").Property.ListStylePosition[] | undefined; readonly listStyleType?: import("csstype").Property.ListStyleType | readonly import("csstype").Property.ListStyleType[] | undefined; readonly marginBlockEnd?: string | number | readonly import("csstype").Property.MarginBlockEnd<string | number>[] | undefined; readonly marginBlockStart?: string | number | readonly import("csstype").Property.MarginBlockStart<string | number>[] | undefined; readonly marginBottom?: string | number | readonly import("csstype").Property.MarginBottom<string | number>[] | undefined; readonly marginInlineEnd?: string | number | readonly import("csstype").Property.MarginInlineEnd<string | number>[] | undefined; readonly marginInlineStart?: string | number | readonly import("csstype").Property.MarginInlineStart<string | number>[] | undefined; readonly marginLeft?: string | number | readonly import("csstype").Property.MarginLeft<string | number>[] | undefined; readonly marginRight?: string | number | readonly import("csstype").Property.MarginRight<string | number>[] | undefined; readonly marginTop?: string | number | readonly import("csstype").Property.MarginTop<string | number>[] | undefined; readonly marginTrim?: import("csstype").Property.MarginTrim | readonly import("csstype").Property.MarginTrim[] | undefined; readonly maskBorderMode?: import("csstype").Property.MaskBorderMode | readonly import("csstype").Property.MaskBorderMode[] | undefined; readonly maskBorderOutset?: string | number | readonly import("csstype").Property.MaskBorderOutset<string | number>[] | undefined; readonly maskBorderRepeat?: import("csstype").Property.MaskBorderRepeat | readonly import("csstype").Property.MaskBorderRepeat[] | undefined; readonly maskBorderSlice?: import("csstype").Property.MaskBorderSlice | readonly import("csstype").Property.MaskBorderSlice[] | undefined; readonly maskBorderSource?: import("csstype").Property.MaskBorderSource | readonly import("csstype").Property.MaskBorderSource[] | undefined; readonly maskBorderWidth?: string | number | readonly import("csstype").Property.MaskBorderWidth<string | number>[] | undefined; readonly maskClip?: import("csstype").Property.MaskClip | readonly import("csstype").Property.MaskClip[] | undefined; readonly maskComposite?: import("csstype").Property.MaskComposite | readonly import("csstype").Property.MaskComposite[] | undefined; readonly maskImage?: import("csstype").Property.MaskImage | readonly import("csstype").Property.MaskImage[] | undefined; readonly maskMode?: import("csstype").Property.MaskMode | readonly import("csstype").Property.MaskMode[] | undefined; readonly maskOrigin?: import("csstype").Property.MaskOrigin | readonly import("csstype").Property.MaskOrigin[] | undefined; readonly maskPosition?: string | number | readonly import("csstype").Property.MaskPosition<string | number>[] | undefined; readonly maskRepeat?: import("csstype").Property.MaskRepeat | readonly import("csstype").Property.MaskRepeat[] | undefined; readonly maskSize?: string | number | readonly import("csstype").Property.MaskSize<string | number>[] | undefined; readonly maskType?: import("csstype").Property.MaskType | readonly import("csstype").Property.MaskType[] | undefined; readonly masonryAutoFlow?: import("csstype").Property.MasonryAutoFlow | readonly import("csstype").Property.MasonryAutoFlow[] | undefined; readonly mathDepth?: import("csstype").Property.MathDepth | readonly import("csstype").Property.MathDepth[] | undefined; readonly mathShift?: import("csstype").Property.MathShift | readonly import("csstype").Property.MathShift[] | undefined; readonly mathStyle?: import("csstype").Property.MathStyle | readonly import("csstype").Property.MathStyle[] | undefined; readonly maxBlockSize?: string | number | readonly import("csstype").Property.MaxBlockSize<string | number>[] | undefined; readonly maxHeight?: string | number | readonly import("csstype").Property.MaxHeight<string | number>[] | undefined; readonly maxInlineSize?: string | number | readonly import("csstype").Property.MaxInlineSize<string | number>[] | undefined; readonly maxLines?: import("csstype").Property.MaxLines | readonly import("csstype").Property.MaxLines[] | undefined; readonly maxWidth?: string | number | readonly import("csstype").Property.MaxWidth<string | number>[] | undefined; readonly minBlockSize?: string | number | readonly import("csstype").Property.MinBlockSize<string | number>[] | undefined; readonly minHeight?: string | number | readonly import("csstype").Property.MinHeight<string | number>[] | undefined; readonly minInlineSize?: string | number | readonly import("csstype").Property.MinInlineSize<string | number>[] | undefined; readonly minWidth?: string | number | readonly import("csstype").Property.MinWidth<string | number>[] | undefined; readonly mixBlendMode?: import("csstype").Property.MixBlendMode | readonly import("csstype").Property.MixBlendMode[] | undefined; readonly motionDistance?: string | number | readonly import("csstype").Property.OffsetDistance<string | number>[] | undefined; readonly motionPath?: import("csstype").Property.OffsetPath | readonly import("csstype").Property.OffsetPath[] | undefined; readonly motionRotation?: import("csstype").Property.OffsetRotate | readonly import("csstype").Property.OffsetRotate[] | undefined; readonly objectFit?: import("csstype").Property.ObjectFit | readonly import("csstype").Property.ObjectFit[] | undefined; readonly objectPosition?: string | number | readonly import("csstype").Property.ObjectPosition<string | number>[] | undefined; readonly offsetAnchor?: string | number | readonly import("csstype").Property.OffsetAnchor<string | number>[] | undefined; readonly offsetDistance?: string | number | readonly import("csstype").Property.OffsetDistance<string | number>[] | undefined; readonly offsetPath?: import("csstype").Property.OffsetPath | readonly import("csstype").Property.OffsetPath[] | undefined; readonly offsetPosition?: string | number | readonly import("csstype").Property.OffsetPosition<string | number>[] | undefined; readonly offsetRotate?: import("csstype").Property.OffsetRotate | readonly import("csstype").Property.OffsetRotate[] | undefined; readonly offsetRotation?: import("csstype").Property.OffsetRotate | readonly import("csstype").Property.OffsetRotate[] | undefined; readonly opacity?: import("csstype").Property.Opacity | readonly import("csstype").Property.Opacity[] | undefined; readonly order?: import("csstype").Property.Order | readonly import("csstype").Property.Order[] | undefined; readonly orphans?: import("csstype").Property.Orphans | readonly import("csstype").Property.Orphans[] | undefined; readonly outlineColor?: import("csstype").Property.OutlineColor | readonly import("csstype").Property.OutlineColor[] | undefined; readonly outlineOffset?: import("csstype").Property.OutlineOffset<string | number> | readonly import("csstype").Property.OutlineOffset<string | number>[] | undefined; readonly outlineStyle?: import("csstype").Property.OutlineStyle | readonly import("csstype").Property.OutlineStyle[] | undefined; readonly outlineWidth?: import("csstype").Property.OutlineWidth<string | number> | readonly import("csstype").Property.OutlineWidth<string | number>[] | undefined; readonly overflowAnchor?: import("csstype").Property.OverflowAnchor | readonly import("csstype").Property.OverflowAnchor[] | undefined; readonly overflowBlock?: import("csstype").Property.OverflowBlock | readonly import("csstype").Property.OverflowBlock[] | undefined; readonly overflowClipBox?: import("csstype").Property.OverflowClipBox | readonly import("csstype").Property.OverflowClipBox[] | undefined; readonly overflowClipMargin?: string | number | readonly import("csstype").Property.OverflowClipMargin<string | number>[] | undefined; readonly overflowInline?: import("csstype").Property.OverflowInline | readonly import("csstype").Property.OverflowInline[] | undefined; readonly overflowWrap?: import("csstype").Property.OverflowWrap | readonly import("csstype").Property.OverflowWrap[] | undefined; readonly overflowX?: import("csstype").Property.OverflowX | readonly import("csstype").Property.OverflowX[] | undefined; readonly overflowY?: import("csstype").Property.OverflowY | readonly import("csstype").Property.OverflowY[] | undefined; readonly overlay?: import("csstype").Property.Overlay | readonly import("csstype").Property.Overlay[] | undefined; readonly overscrollBehaviorBlock?: import("csstype").Property.OverscrollBehaviorBlock | readonly import("csstype").Property.OverscrollBehaviorBlock[] | undefined; readonly overscrollBehaviorInline?: import("csstype").Property.OverscrollBehaviorInline | readonly import("csstype").Property.OverscrollBehaviorInline[] | undefined; readonly overscrollBehaviorX?: import("csstype").Property.OverscrollBehaviorX | readonly import("csstype").Property.OverscrollBehaviorX[] | undefined; readonly overscrollBehaviorY?: import("csstype").Property.OverscrollBehaviorY | readonly import("csstype").Property.OverscrollBehaviorY[] | undefined; readonly paddingBlockEnd?: string | number | readonly import("csstype").Property.PaddingBlockEnd<string | number>[] | undefined; readonly paddingBlockStart?: string | number | readonly import("csstype").Property.PaddingBlockStart<string | number>[] | undefined; readonly paddingBottom?: string | number | readonly import("csstype").Property.PaddingBottom<string | number>[] | undefined; readonly paddingInlineEnd?: string | number | readonly import("csstype").Property.PaddingInlineEnd<string | number>[] | undefined; readonly paddingInlineStart?: string | number | readonly import("csstype").Property.PaddingInlineStart<string | number>[] | undefined; readonly paddingLeft?: string | number | readonly import("csstype").Property.PaddingLeft<string | number>[] | undefined; readonly paddingRight?: string | number | readonly import("csstype").Property.PaddingRight<string | number>[] | undefined; readonly paddingTop?: string | number | readonly import("csstype").Property.PaddingTop<string | number>[] | undefined; readonly page?: import("csstype").Property.Page | readonly import("csstype").Property.Page[] | undefined; readonly pageBreakAfter?: import("csstype").Property.PageBreakAfter | readonly import("csstype").Property.PageBreakAfter[] | undefined; readonly pageBreakBefore?: import("csstype").Property.PageBreakBefore | readonly import("csstype").Property.PageBreakBefore[] | undefined; readonly pageBreakInside?: import("csstype").Property.PageBreakInside | readonly import("csstype").Property.PageBreakInside[] | undefined; readonly paintOrder?: import("csstype").Property.PaintOrder | readonly import("csstype").Property.PaintOrder[] | undefined; readonly perspective?: import("csstype").Property.Perspective<string | number> | readonly import("csstype").Property.Perspective<string | number>[] | undefined; readonly perspectiveOrigin?: string | number | readonly import("csstype").Property.PerspectiveOrigin<string | number>[] | undefined; readonly pointerEvents?: import("csstype").Property.PointerEvents | readonly import("csstype").Property.PointerEvents[] | undefined; readonly position?: import("csstype").Property.Position | readonly import("csstype").Property.Position[] | undefined; readonly printColorAdjust?: import("csstype").Property.PrintColorAdjust | readonly import("csstype").Property.PrintColorAdjust[] | undefined; readonly quotes?: import("csstype").Property.Quotes | readonly import("csstype").Property.Quotes[] | undefined; readonly resize?: import("csstype").Property.Resize | readonly import("csstype").Property.Resize[] | undefined; readonly right?: string | number | readonly import("csstype").Property.Right<string | number>[] | undefined; readonly rotate?: import("csstype").Property.Rotate | readonly import("csstype").Property.Rotate[] | undefined; readonly rowGap?: string | number | readonly import("csstype").Property.RowGap<string | number>[] | undefined; readonly rubyAlign?: import("csstype").Property.RubyAlign | readonly import("csstype").Property.RubyAlign[] | undefined; readonly rubyMerge?: import("csstype").Property.RubyMerge | readonly import("csstype").Property.RubyMerge[] | undefined; readonly rubyPosition?: import("csstype").Property.RubyPosition | readonly import("csstype").Property.RubyPosition[] | undefined; readonly scale?: import("csstype").Property.Scale | readonly import("csstype").Property.Scale[] | undefined; readonly scrollBehavior?: import("csstype").Property.ScrollBehavior | readonly import("csstype").Property.ScrollBehavior[] | undefined; readonly scrollMarginBlockEnd?: import("csstype").Property.ScrollMarginBlockEnd<string | number> | readonly import("csstype").Property.ScrollMarginBlockEnd<string | number>[] | undefined; readonly scrollMarginBlockStart?: import("csstype").Property.ScrollMarginBlockStart<string | number> | readonly import("csstype").Property.ScrollMarginBlockStart<string | number>[] | undefined; readonly scrollMarginBottom?: import("csstype").Property.ScrollMarginBottom<string | number> | readonly import("csstype").Property.ScrollMarginBottom<string | number>[] | undefined; readonly scrollMarginInlineEnd?: import("csstype").Property.ScrollMarginInlineEnd<string | number> | readonly import("csstype").Property.ScrollMarginInlineEnd<string | number>[] | undefined; readonly scrollMarginInlineStart?: import("csstype").Property.ScrollMarginInlineStart<string | number> | readonly import("csstype").Property.ScrollMarginInlineStart<string | number>[] | undefined; readonly scrollMarginLeft?: import("csstype").Property.ScrollMarginLeft<string | number> | readonly import("csstype").Property.ScrollMarginLeft<string | number>[] | undefined; readonly scrollMarginRight?: import("csstype").Property.ScrollMarginRight<string | number> | readonly import("csstype").Property.ScrollMarginRight<string | number>[] | undefined; readonly scrollMarginTop?: import("csstype").Property.ScrollMarginTop<string | number> | readonly import("csstype").Property.ScrollMarginTop<string | number>[] | undefined; readonly scrollPaddingBlockEnd?: string | number | readonly import("csstype").Property.ScrollPaddingBlockEnd<string | number>[] | undefined; readonly scrollPaddingBlockStart?: string | number | readonly import("csstype").Property.ScrollPaddingBlockStart<string | number>[] | undefined; readonly scrollPaddingBottom?: string | number | readonly import("csstype").Property.ScrollPaddingBottom<string | number>[] | undefined; readonly scrollPaddingInlineEnd?: string | number | readonly import("csstype").Property.ScrollPaddingInlineEnd<string | number>[] | undefined; readonly scrollPaddingInlineStart?: string | number | readonly import("csstype").Property.ScrollPaddingInlineStart<string | number>[] | undefined; readonly scrollPaddingLeft?: string | number | readonly import("csstype").Property.ScrollPaddingLeft<string | number>[] | undefined; readonly scrollPaddingRight?: string | number | readonly import("csstype").Property.ScrollPaddingRight<string | number>[] | undefined; readonly scrollPaddingTop?: string | number | readonly import("csstype").Property.ScrollPaddingTop<string | number>[] | undefined; readonly scrollSnapAlign?: import("csstype").Property.ScrollSnapAlign | readonly import("csstype").Property.ScrollSnapAlign[] | undefined; readonly scrollSnapMarginBottom?: import("csstype").Property.ScrollMarginBottom<string | number> | readonly import("csstype").Property.ScrollMarginBottom<string | number>[] | undefined; readonly scrollSnapMarginLeft?: import("csstype").Property.ScrollMarginLeft<string | number> | readonly import("csstype").Property.ScrollMarginLeft<string | number>[] | undefined; readonly scrollSnapMarginRight?: import("csstype").Property.ScrollMarginRight<string | number> | readonly import("csstype").Property.ScrollMarginRight<string | number>[] | undefined; readonly scrollSnapMarginTop?: import("csstype").Property.ScrollMarginTop<string | number> | readonly import("csstype").Property.ScrollMarginTop<string | number>[] | undefined; readonly scrollSnapStop?: import("csstype").Property.ScrollSnapStop | readonly import("csstype").Property.ScrollSnapStop[] | undefined; readonly scrollSnapType?: import("csstype").Property.ScrollSnapType | readonly import("csstype").Property.ScrollSnapType[] | undefined; readonly scrollTimelineAxis?: import("csstype").Property.ScrollTimelineAxis | readonly import("csstype").Property.ScrollTimelineAxis[] | undefined; readonly scrollTimelineName?: import("csstype").Property.ScrollTimelineName | readonly import("csstype").Property.ScrollTimelineName[] | undefined; readonly scrollbarColor?: import("csstype").Property.ScrollbarColor | readonly import("csstype").Property.ScrollbarColor[] | undefined; readonly scrollbarGutter?: import("csstype").Property.ScrollbarGutter | readonly import("csstype").Property.ScrollbarGutter[] | undefined; readonly scrollbarWidth?: import("csstype").Property.ScrollbarWidth | readonly import("csstype").Property.ScrollbarWidth[] | undefined; readonly shapeImageThreshold?: import("csstype").Property.ShapeImageThreshold | readonly import("csstype").Property.ShapeImageThreshold[] | undefined; readonly shapeMargin?: string | number | readonly import("csstype").Property.ShapeMargin<string | number>[] | undefined; readonly shapeOutside?: import("csstype").Property.ShapeOutside | readonly import("csstype").Property.ShapeOutside[] | undefined; readonly tabSize?: string | number | readonly import("csstype").Property.TabSize<string | number>[] | undefined; readonly tableLayout?: import("csstype").Property.TableLayout | readonly import("csstype").Property.TableLayout[] | undefined; readonly textAlign?: import("csstype").Property.TextAlign | readonly import("csstype").Property.TextAlign[] | undefined; readonly textAlignLast?: import("csstype").Property.TextAlignLast | readonly import("csstype").Property.TextAlignLast[] | undefined; readonly textCombineUpright?: import("csstype").Property.TextCombineUpright | readonly import("csstype").Property.TextCombineUpright[] | undefined; readonly textDecorationColor?: import("csstype").Property.TextDecorationColor | readonly import("csstype").Property.TextDecorationColor[] | undefined; readonly textDecorationLine?: import("csstype").Property.TextDecorationLine | readonly import("csstype").Property.TextDecorationLine[] | undefined; readonly textDecorationSkip?: import("csstype").Property.TextDecorationSkip | readonly import("csstype").Property.TextDecorationSkip[] | undefined; readonly textDecorationSkipInk?: import("csstype").Property.TextDecorationSkipInk | readonly import("csstype").Property.TextDecorationSkipInk[] | undefined; readonly textDecorationStyle?: import("csstype").Property.TextDecorationStyle | readonly import("csstype").Proper