@n3e/styled 1.0.0

package/react/esm/index.d.ts

@@ -0,0 +1,527 @@
+/// <reference types="react" />
+import * as PropTypes from 'prop-types';
+import * as CSS from 'csstype';
+
+declare const PSEUDO_ELEMENTS: readonly ["after", "backdrop", "before", "cue", "cueRegion", "firstLetter", "firstLine", "fileSelectorButton", "marker", "placeholder", "selection"];
+declare const PSEUDO_ELEMENT_FUNCTIONS: readonly ["part", "slotted"];
+declare const PSEUDO_CLASSES: readonly ["active", "anyLink", "autofill", "checked", "default", "defined", "disabled", "empty", "enabled", "first", "firstChild", "firstOfType", "fullscreen", "focus", "focusVisible", "focusWithin", "hover", "indeterminate", "inRange", "invalid", "lastChild", "lastOfType", "left", "link", "modal", "onlyChild", "onlyOfType", "optional", "outOfRange", "pictureInPicture", "placeholderShown", "paused", "playing", "readOnly", "readWrite", "required", "right", "root", "scope", "target", "valid", "visited"];
+declare const PCF_STRING: readonly ["host", "lang"];
+declare const PCF_STRING_ARRAY: readonly ["is", "not", "where"];
+declare const PCF_NUMBER_OR_STRING: readonly ["nthChild", "nthLastChild", "nthLastOfType", "nthOfType"];
+
+type CSSAttributes = object & CSS.Properties & CSS.PropertiesHyphen;
+interface PropsFunction {
+    (arg: unknown): false | undefined | CSSProperties;
+}
+interface CSSNestedAttributes {
+    [key: string]: CSSAttributes | PropsFunction | CSSNestedAttributes;
+}
+type CSSProperties = CSSAttributes | CSSNestedAttributes;
+type UnknownProp = {
+    [key: string]: unknown;
+};
+
+type MediaTypes = 'print' | 'screen';
+type TypeMethods = {
+    [key in MediaTypes]: () => MediaQueryAPI;
+};
+interface DefinedFeatures {
+    anyPointer(arg: 'fine' | 'coarse' | 'none'): MediaQueryAPI;
+    colorGamut(arg: 'srgb' | 'p3' | 'rec2020'): MediaQueryAPI;
+    displayMode(arg: 'fullscreen' | 'standalone' | 'minimal-ui' | 'browser'): MediaQueryAPI;
+    orientation(arg: 'landscape' | 'portrait'): MediaQueryAPI;
+    overflowBlock(arg: 'none' | 'scroll' | 'optional-paged' | 'paged'): MediaQueryAPI;
+    pointer(arg: 'fine' | 'coarse' | 'none'): MediaQueryAPI;
+    prefersColorScheme(arg: 'light' | 'dark'): MediaQueryAPI;
+    prefersContrast(arg: 'no-preference' | 'more' | 'less'): MediaQueryAPI;
+    scripting(arg: 'none' | 'initial-only' | 'enabled'): MediaQueryAPI;
+    update(arg: 'none' | 'slow' | 'fast'): MediaQueryAPI;
+}
+interface RangeFeatures {
+    height(arg: string): MediaQueryAPI;
+    minHeight(arg: string): MediaQueryAPI;
+    maxHeight(arg: string): MediaQueryAPI;
+    width(arg: string): MediaQueryAPI;
+    minWidth(arg: string): MediaQueryAPI;
+    maxWidth(arg: string): MediaQueryAPI;
+    /**
+     * Test aspect ratio of the viewport by supplying
+     * a `ratio` CSS data type.
+     *
+     * @example
+     * mq().aspectRatio('1/1')
+     */
+    aspectRatio(arg: string): MediaQueryAPI;
+    /**
+     * Test minimum aspect ratio of the viewport by supplying
+     * a `ratio` CSS data type.
+     *
+     * @example
+     * mq().minAspectRatio('8/5')
+     */
+    minAspectRatio(arg: string): MediaQueryAPI;
+    /**
+     * Test maximum aspect ratio of the viewport by supplying
+     * a `ratio` CSS data type.
+     *
+     * @example
+     * mq().maxAspectRatio('3/2')
+     */
+    maxAspectRatio(arg: string): MediaQueryAPI;
+    /**
+     * Test the bits per color component (red, green, blue) of
+     * the output device by supplying an `integer` CSS data type.
+     *
+     * Leave empty to test any device.
+     *
+     * @example
+     * mq().color()
+     */
+    color(arg?: number): MediaQueryAPI;
+    /**
+     * Test the minimum bits per color component (red, green, blue) of
+     * the output device by supplying an `integer` CSS data type.
+     *
+     * Leave empty to test any device.
+     *
+     * @example
+     * mq().minColor(8)
+     */
+    minColor(arg?: number): MediaQueryAPI;
+    /**
+     * Test the maximum bits per color component (red, green, blue) of
+     * the output device by supplying an `integer` CSS data type.
+     *
+     * Leave empty to test any device.
+     *
+     * @example
+     * mq().maxColor(8)
+     */
+    maxColor(arg?: number): MediaQueryAPI;
+    /**
+     * Test the number of entries in the output device's color lookup
+     * table by supplying an `integer` CSS data type.
+     *
+     * Leave empty to test any device.
+     *
+     * @example
+     * mq().colorIndex()
+     */
+    colorIndex(arg?: number): MediaQueryAPI;
+    /**
+     * Test the minimum number of entries in the output device's
+     * color lookup table by supplying an `integer` CSS data type.
+     *
+     * Leave empty to test any device.
+     *
+     * @example
+     * mq().minColorIndex(1500)
+     */
+    minColorIndex(arg?: number): MediaQueryAPI;
+    /**
+     * Test the maximum number of entries in the output device's
+     * color lookup table by supplying an `integer` CSS data type.
+     *
+     * Leave empty to test any device.
+     *
+     * @example
+     * mq().maxColorIndex(1500)
+     */
+    maxColorIndex(arg?: number): MediaQueryAPI;
+    /**
+     * Test the number of bits per pixel in the monochrome frame
+     * buffer of the output device  by supplying an `integer`
+     * CSS data type.
+     *
+     * Leave empty to test non-monochrome device.
+     *
+     * @example
+     * mq().monochrome()
+     * @example
+     * mq().monochrome(0)
+     */
+    monochrome(arg?: number): MediaQueryAPI;
+    /**
+     * Test the minimum number of bits per pixel in the monochrome
+     * frame buffer of the output device  by supplying an `integer`
+     * CSS data type.
+     *
+     * Leave empty to test non-monochrome device.
+     *
+     * @example
+     * mq().minMonochrome()
+     * @example
+     * mq().minMonochrome(0)
+     */
+    minMonochrome(arg?: number): MediaQueryAPI;
+    /**
+     * Test the maximum number of bits per pixel in the monochrome
+     * frame buffer of the output device  by supplying an `integer`
+     * CSS data type.
+     *
+     * Leave empty to test non-monochrome device.
+     *
+     * @example
+     * mq().maxMonochrome()
+     * @example
+     * mq().maxMonochrome(0)
+     */
+    maxMonochrome(arg?: number): MediaQueryAPI;
+    /**
+     * Test the pixel density of the output device by supplying
+     * a `resolution` CSS data type.
+     *
+     * @example
+     * mq().resolution('150dpi')
+     */
+    resolution(arg: string): MediaQueryAPI;
+    /**
+     * Test the minimum pixel density of the output device by
+     * supplying a `resolution` CSS data type.
+     *
+     * @example
+     * mq().minResolution('72dpi')
+     */
+    minResolution(arg: string): MediaQueryAPI;
+    /**
+     * Test the maximum pixel density of the output device by
+     * supplying a `resolution` CSS data type.
+     *
+     * @example
+     * mq().maxResolution('300dpi')
+     */
+    maxResolution(arg: string): MediaQueryAPI;
+}
+interface ToggleFeatures {
+    anyHover(arg: 'none' | 'hover'): MediaQueryAPI;
+    hover(arg: 'none' | 'hover'): MediaQueryAPI;
+    forcedColors(arg: 'none' | 'active'): MediaQueryAPI;
+    grid(arg: '0' | '1'): MediaQueryAPI;
+    invertedColors(arg: 'none' | 'inverted'): MediaQueryAPI;
+    overflowInline(arg: 'none' | 'scroll'): MediaQueryAPI;
+    prefersReducedMotion(arg: 'no-preference' | 'reduce'): MediaQueryAPI;
+}
+type FeatureMethods = Prettify<DefinedFeatures & RangeFeatures & ToggleFeatures>;
+interface MediaQueryAPI extends TypeMethods, FeatureMethods {
+    /**
+     * Creates range feature to query the `min-width`
+     * of the viewport against the given value in `pixels`.
+     *
+     * @example
+     * mq().from(768) // '@media (min-width: 768px)'
+     */
+    from(arg: number): MediaQueryAPI;
+    /**
+     * Creates range feature to query the `max-width`
+     * of the viewport against the given value in `pixels`.
+     *
+     * @example
+     * mq().to(991) // '@media (max-width: 991px)'
+     */
+    to(arg: number): MediaQueryAPI;
+    feature(name: string, value?: number | string): MediaQueryAPI;
+    toString(): string;
+}
+
+type PseudoClass = CreateType<typeof PSEUDO_CLASSES[number], string>;
+type PseudoClassFunctionString = CreateType<typeof PCF_STRING[number], (arg: string) => string>;
+type PseudoClassFunctionStringArray = CreateType<typeof PCF_STRING_ARRAY[number], (...args: string[]) => string>;
+type PseudoClassFunctionNumberOrString = CreateType<typeof PCF_NUMBER_OR_STRING[number], (arg: number | string) => string>;
+type PseudoClasses = Prettify<PseudoClass & PseudoClassFunctionString & PseudoClassFunctionStringArray & PseudoClassFunctionNumberOrString>;
+type PseudoElement = CreateType<typeof PSEUDO_ELEMENTS[number], string>;
+type PseudoElementFunction = CreateType<typeof PSEUDO_ELEMENT_FUNCTIONS[number], (arg: string) => string>;
+type PseudoElements = Prettify<PseudoElement & PseudoElementFunction>;
+type ComponentSelector = string | {
+    toString(): string;
+};
+interface Combinators {
+    or(...data: string[]): string;
+    and(...data: string[]): string;
+}
+interface StyleHelper extends Combinators, PseudoClasses, PseudoElements {
+    attribute(name: string): AttributeAPI;
+    data(attribute: string): AttributeAPI;
+    /**
+     * Helper to create descendent selector(s) accepts both
+     * complex CSS selector(s) OR StyledComponent(s)
+     */
+    selector<T extends ComponentSelector>(...data: T[]): string;
+    /**
+     * Prop base styles where key is the prop name and
+     * value can be Object Styles OR a function that
+     * accepts an argument and renders styles based on
+     * the given value
+     *
+     * @example
+     * [style.prop('isActive')]: {
+     *    ...rules
+     * }
+     * @example
+     * [style.prop('alignment')]: (alignment) => ({
+     *    textAlign: alignment
+     * })
+     */
+    prop<P>(name: Extract<keyof P, string>): string;
+    props: {
+        /**
+         * Prop matcher function to test `all` given prop names
+         * exist AND its value is not false.
+         *
+         * Value can be Object Styles OR a function that accepts
+         * props object as its only argument.
+         *
+         * @example
+         * [style.props.all(
+         *    'isChecked',
+         *    'border'
+         * )]: {
+         *    ...rules
+         * }
+         * @example
+         * [style.props.all(
+         *    'isChecked',
+         *    'borderColor'
+         * )]: ({ borderColor }) => ({
+         *    border: `4px dashed ${borderColor}`
+         * })
+         */
+        all<P>(...names: Extract<keyof P, string>[]): string;
+        /**
+         * Prop matcher function to test `any` given prop names
+         * exist AND its value is not false.
+         *
+         * Value can be Object Styles OR a function that accepts
+         * props object as its only argument.
+         *
+         * @example
+         * [style.props.any(
+         *    'isChecked',
+         *    'border'
+         * )]: {
+         *    ...rules
+         * }
+         * @example
+         * [style.props.any(
+         *    'isChecked',
+         *    'borderColor'
+         * )]: ({ borderColor = 'pink' }) => ({
+         *    border: `4px dashed ${borderColor}`
+         * })
+         */
+        any<P>(...names: Extract<keyof P, string>[]): string;
+        /**
+         * Prop matcher function to test that the given props do not exist.
+         *
+         * @example
+         * [style.props.not(
+         *    'config',
+         *    'hasGutters'
+         * )]: {
+         *    ...rules
+         * }
+         */
+        not<P>(...names: Extract<keyof P, string>[]): string;
+    };
+}
+interface AttributeAPI {
+    equals(...items: string[]): string;
+    /** Attribute selector for matching whole word */
+    contains(...items: string[]): string;
+    /** Attribute selector for matching substring */
+    containsAny(...items: string[]): string;
+    startsWith(...items: string[]): string;
+    endsWith(...items: string[]): string;
+    toString(): string;
+}
+
+type CreateType<T extends PropertyKey, V> = {
+    [K in keyof PropertyKey as T]: V;
+};
+type Prettify<T> = {
+    [K in keyof T]: T[K];
+} & unknown;
+
+type ReactPropTypes<T> = {
+    [K in keyof T]?: PropTypes.Validator<T[K] | null | undefined>;
+};
+interface FunctionalComponent<P = SomeProps> {
+    (props: P, ref?: React.ForwardedRef<unknown>): React.ReactElement<P>;
+    displayName?: string;
+}
+type SomeProps = UnknownProp & {
+    children?: React.ReactNode;
+    className?: string;
+};
+type EnhancedType<T, P> = T extends GenericComponent ? GenericComponent<P> : StyledComponent<P>;
+interface EnhancedProps<T, P> {
+    propTypes: ReactPropTypes<P>;
+    styles: CSSProperties;
+    toString(): string;
+    /**
+     * Harness the styles and propTypes from other
+     * components simply by "extending" them.
+     *
+     * You can even pass plain object literal(s) as
+     * arguments on top of styled components including
+     * `generic`(s).
+     */
+    extend<K>(...items: ExtendableItem[]): EnhancedType<T, P & K>;
+    /**
+     * Provides a mechanism to passing string based CSS
+     * styles.
+     *
+     * This is mainly used for global styles, At-rules
+     * such as `@keyframe`, `@font-face`, `@counter-style`
+     * etc.
+     */
+    withCSS(...styles: string[]): EnhancedType<T, P>;
+    /**
+     * Built-in typechecking support for props.
+     *
+     * This is the same as applying `propTypes` attribute
+     * on components.
+     */
+    withProps(props: ReactPropTypes<P>): EnhancedType<T, P>;
+    /**
+     * Out of the box support for `ref` forwarding.
+     *
+     * This invokes React's `forwardRef` functionality
+     * automatically.
+     */
+    withRef(): EnhancedType<T, P>;
+}
+type StyledComponent<P = UnknownProp> = FunctionalComponent<P> & EnhancedProps<StyledComponent, P>;
+interface FactoryHOC<P> {
+    <K>(C: FunctionalComponent<K>): StyledComponent<P & K>;
+}
+type GenericComponent<P = UnknownProp> = FactoryHOC<P> & EnhancedProps<GenericComponent, P>;
+type ExtendableItem = CSSProperties | GenericComponent | StyledComponent;
+
+/**
+ * API for creating React styled component(s)
+ */
+declare const styled: {
+    generic: <P = UnknownProp>(arg?: CSSProperties | undefined) => GenericComponent<P>;
+    object: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    a: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    abbr: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    address: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    area: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    article: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    aside: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    audio: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    b: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    base: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    bdi: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    bdo: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    blockquote: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    body: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    br: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    button: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    canvas: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    caption: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    cite: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    code: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    col: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    colgroup: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    data: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    datalist: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    dd: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    del: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    details: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    dfn: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    dialog: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    div: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    dl: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    dt: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    em: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    embed: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    fieldset: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    figcaption: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    figure: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    footer: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    form: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    h1: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    h2: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    h3: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    h4: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    h5: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    h6: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    head: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    header: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    hgroup: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    hr: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    html: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    i: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    iframe: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    img: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    input: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    ins: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    kbd: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    label: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    legend: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    li: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    link: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    main: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    map: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    mark: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    math: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    menu: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    meta: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    meter: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    nav: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    noscript: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    ol: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    optgroup: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    option: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    output: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    p: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    picture: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    portal: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    pre: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    progress: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    q: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    rp: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    rt: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    ruby: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    s: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    samp: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    script: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    section: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    select: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    small: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    source: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    span: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    strong: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    style: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    sub: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    summary: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    sup: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    svg: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    table: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    tbody: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    td: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    textarea: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    tfoot: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    th: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    thead: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    time: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    title: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    tr: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    track: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    u: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    ul: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    var: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    video: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+    wbr: <P_1 = UnknownProp>(arg?: CSSProperties | undefined) => StyledComponent<P_1>;
+};
+
+declare const mq: (...mediaTypes: MediaTypes[]) => MediaQueryAPI;
+
+declare const style: StyleHelper;
+
+declare const getStyles: () => string;
+
+declare const ServerStyles: () => JSX.Element;
+
+export { CSSProperties, ServerStyles, StyledComponent, styled as default, getStyles, mq, style };

package/react/esm/index.js

@@ -0,0 +1,2 @@
+/** @license styled v0.1.0. Copyright (c) N3E. */
+import e from'react';const t='undefined'!=typeof window,r=e=>t=>typeof t===e,n=r('function'),s=r('number'),a=r('string'),o=r('object'),i=e=>t=>t===e,l=i(!0),c=i(!1),d=i(null),p=i(void 0),u=e=>o(e)&&!d(e)&&!Array.isArray(e),h=e=>a(e)||s(e),m=e=>d(e)||p(e),{stringify:y}=JSON,f=e=>(...t)=>`${e}-${(e=>(e=>{let t=-2128831035;for(let r=0;r<e.length;r++)t^=e.charCodeAt(r),t=16777619*t>>>0;return t})(y(e,((e,t)=>n(t)?`[Function ${e}]`:t))).toString(36))(t)}`,g=f('e'),b=f('s'),S=f('d'),w=f('c'),v=(e,t)=>{for(const r in t)Object.defineProperty(e,r,{value:t[r]});return e},$=(...e)=>e.join(''),C=e=>t=>$(t,e),T=e=>t=>$(e,t),R=T('.'),j=(e,t)=>{return t.split('||').flatMap((r=e,e=>r.map(C(e))));var r},O=e=>e.join('||'),E=e=>(...t)=>t.filter(Boolean).join(e),k=E(' '),_=e=>`(${e})`,N=(e,t)=>Object.entries(t).reduce(((t,[r,n])=>({...t,[r]:u(n)&&r in e?N(e[r],n):n})),{...e}),x=e=>e.trim().replace(/([A-Z])+/g,'-$1').toLowerCase(),A=(...e)=>t=>e.some((e=>t.startsWith(e))),M=e=>e.replace(/ {2}|\r\n|\n|\r/gm,'').trim(),L='@media',W=['print','screen'],P=['host','lang','is','not','where','nthChild','nthLastChild','nthLastOfType','nthOfType'],D='all',I='any',q='not',B='only',F='data-styled-sheet',H=(e,r)=>{const n=t?window:global,s=`__STYLED_${e}_REGISTER`;return s in n||Object.defineProperty(n,s,{value:Object.freeze(r())}),n[s]},G=e=>({add:(t,r)=>e.get(t)||e.set(t,{...r(),toString:()=>t}).get(t),get:t=>e.get(t),has:t=>e.has(t),__getDataStore:()=>new Map(e)}),Y=H('CACHE',(()=>G(new Map))),z=H('SHEET',(()=>{const e=new Map,t=([e,t])=>`<style ${F}="${e}">${t.css()}</style>`;return{...G(e),getStyles:()=>[...e].map(t).join('')}})),J=H('PROPS',(()=>({...G(new Map),names:new Set}))),{getStyles:U}=z,V=e=>t=>!m(e[t])&&!c(e[t]),Z=(e,t)=>{const r={[D]:e=>t.every(V(e)),[I]:e=>t.some(V(e)),[q]:e=>t.every((e=>t=>m(e[t]))(e)),[B]:e=>V(e)(t[0])};return t.forEach((e=>J.names.add(e))),{keys:t,predicate:r[e]}},K=e=>(...t)=>J.add(`props.${e}(${t})`,(()=>Z(e,t))).toString(),Q=i('content'),X=A('@container',L,'@supports'),ee=A(':','[',' ','>','~','+','.'),te=e=>()=>e,re=(e,t)=>{const r=Q(e)||s(t)?y:M;return`${x(e)}:${r(t)};`},ne=e=>(t,r)=>r.reduceRight(e,t),se=(e,t)=>`${t}{${e}}`,ae=ne(se),oe=ne(((e,t)=>({[t]:{...e}}))),ie=(e,t,r)=>n=>{const s=1===r.length?n[r[0]]:n,a=t(s);return u(a)?oe(a,e):{}},le=(...e)=>{const[t]=e,r=[e.map(R).join('')],s=(e,r,a,o)=>{const i=n(e),l=!J.has(a),c=J.get(a),[d,p]=(m=e,Object.entries(m).reduce((([e,t],[r,s])=>[h(s)?$(e,re(r,s)):e,u(s)||n(s)?{...t,[r]:s}:t]),['',{}]));var m;const y=X(a)?[...o,a]:o,f=ee(a)?j(r,a):r;return Object.entries(p).reduce(((e,[r,n])=>{if(!l)return e;const{computables:a,rules:o}=s(n,f,r,y);return{baseClassName:t,computables:[...e.computables,...a],rules:[...e.rules,...o]}}),{baseClassName:t,computables:l?[]:[{...c,identity:i?w:te(S(e)),yield:i?ie(o,e,c.keys):te(e)}],rules:l&&d?[ae(se(d,f.join()),y)]:[]})};return e=>s(e,r,'',[])},ce=(e,t=F)=>'undefined'==typeof document?void 0:document.querySelector(`style[${t}=${e}]`)||(e=>{const t=document.createElement(e),r={appendTo:e=>e.appendChild(t)&&r,withAttribute:(e,n)=>t.setAttribute(e,n)||r,unwrap:()=>t};return r})('style').withAttribute(t,e).appendTo(document.head).unwrap(),de=(e,t)=>(t.textContent||'').includes(e),pe=e=>t=>{if(!de(t,e)){const r=document.createTextNode(t);e.appendChild(r)}},ue=(e,t=e.sheet)=>r=>{try{if(t&&!de(r,e)){const e=t.cssRules.length;t.insertRule(r,e)}}catch(e){console.error(`DOMException: Failed to parse "${r}"`)}},he=(e,r)=>n=>{const s=Y.has(e),{baseClassName:a,computables:o,globals:i=[],rules:c}=Y.add(e,r);if(!s){const r=()=>((e,r=ce(e))=>{const n=new Map,s=t&&l(window.__STYLED_SLOW_MODE)?pe:ue;return{inject:(e,t)=>{n.has(e)||(r&&t.forEach(s(r)),n.set(e,t))},css:()=>[...n.values()].flat().join('')}})(a);z.add(a,r).inject(e,[...c,...i])}return o.length?n(e):[]},me=e=>{const t=r=>Y.get(r).computables.reduce(((n,s)=>{if(!s.predicate(e))return n;const a=s.yield(e),o=s.identity(a),i=`${o} (${r})`;return[...n,o,...he(i,(()=>le(Y.get(r).baseClassName,o)(a)))(t)]}),[]);return t},ye={plainStyles:[],propTypes:{},hasRef:!1},fe=(e,t,r=ye)=>(n={})=>{const s=g({name:e,...n}),a=(e,t)=>({...r,[e]:t}),o=o=>v(o,{propTypes:r.propTypes,styles:n,toString:()=>R(s),extend:(...s)=>{const[o,i]=(l=s,c=[n,r.propTypes],l.reduce((([e,t],r)=>{const n=r||{},s=n.styles||n,a=n.propTypes||{};return[N(e,s),{...t,...a}]}),c));var l,c;return fe(e,t,a('propTypes',i))(o)},withCSS:(...r)=>fe(e,t,a('plainStyles',r))(n),withProps:s=>{const o={...r.propTypes,...s};return fe(e,t,a('propTypes',o))(n)},withRef:()=>fe(e,t,a('hasRef',!0))(n)});return o(t?t({classIdentity:s,displayName:`styled.${e}`,styleRules:n,plainStyles:r.plainStyles,hasRef:r.hasRef}):t=>fe(e,v(ge(t),{propTypes:r.propTypes}),r)(n))},ge=t=>({classIdentity:r,displayName:s,styleRules:o,plainStyles:i,hasRef:l})=>{const c=((e,t)=>{const r=b(e),n=()=>({...le(r)(e),...t.length&&{globals:t.map(M)}});return e=>[r,...he(r,n)(me(e))]})(o,i),d=({children:s,className:o='',...i},l)=>{const d=a(t)?((e,t=J.names)=>Object.entries(e).reduce(((e,[r,n])=>({...e,...!t.has(r)&&{[r]:n}})),{}))(i):i,p=(e=>!m(e)&&((e=>'current'in(e||{}))(e)||n(e)))(l)?{ref:l}:void 0,u=k(r,...c(i),o);return e.createElement(t,{...d,...p,className:u},s)};return d.displayName=s,l?e.forwardRef(d):d},be=['a','abbr','address','area','article','aside','audio','b','base','bdi','bdo','blockquote','body','br','button','canvas','caption','cite','code','col','colgroup','data','datalist','dd','del','details','dfn','dialog','div','dl','dt','em','embed','fieldset','figcaption','figure','footer','form','h1','h2','h3','h4','h5','h6','head','header','hgroup','hr','html','i','iframe','img','input','ins','kbd','label','legend','li','link','main','map','mark','math','menu','meta','meter','nav','noscript','object','ol','optgroup','option','output','p','picture','portal','pre','progress','q','rp','rt','ruby','s','samp','script','section','select','small','source','span','strong','style','sub','summary','sup','svg','table','tbody','td','textarea','tfoot','th','thead','time','title','tr','track','u','ul','var','video','wbr'].reduce(((e,t)=>({...e,[t]:fe(t,ge(t))})),{generic:fe('generic')}),Se=C('px'),we=[...W,'anyPointer','colorGamut','displayMode','orientation','overflowBlock','pointer','prefersColorScheme','prefersContrast','scripting','update','anyHover','hover','forcedColors','grid','invertedColors','overflowInline','prefersReducedMotion',...((...e)=>t=>t.reduce(((t,r)=>{return[...t,...e.map(C((n=r,n.charAt(0).toUpperCase()+n.slice(1)))),r];var n}),[]))('min','max')(['height','width','aspectRatio','color','colorIndex','monochrome','resolution'])],ve=E(' and '),$e=E(', '),Ce=(...e)=>{const t=new Set(e),r=new Set,n=(e,t)=>r.add(_([x(e),t].filter(h).join(':'))),s={...we.reduce(((e,r)=>({...e,[r]:W.includes(r)?()=>t.add(r)&&s:e=>n(r,e)&&s})),{}),feature:(e,t)=>n(e,t)&&s,from:e=>s.minWidth(Se(e)),to:e=>s.maxWidth(Se(e)),toString:()=>k(L,ve($e(...t),...r))};return s},Te=e=>(...t)=>O(t.map(e)),Re={and:(...e)=>O(e.reduce(j,[''])),or:(...e)=>O(e)},je=e=>(t,r)=>[...t,...r].reduce(((t,n)=>{const s=$(e,x(n)),a=r.includes(n);return{...t,[n]:a?(...e)=>$(s,_(e)):s}}),{}),Oe=je('::')(['after','backdrop','before','cue','cueRegion','firstLetter','firstLine','fileSelectorButton','marker','placeholder','selection'],['part','slotted']),Ee=je(':')(['active','anyLink','autofill','checked','default','defined','disabled','empty','enabled','first','firstChild','firstOfType','fullscreen','focus','focusVisible','focusWithin','hover','indeterminate','inRange','invalid','lastChild','lastOfType','left','link','modal','onlyChild','onlyOfType','optional','outOfRange','pictureInPicture','placeholderShown','paused','playing','readOnly','readWrite','required','right','root','scope','target','valid','visited'],P),ke=e=>`[${e}]`,_e=e=>{const t=x(e),r=e=>r=>ke($(t,e,y(r)));return{equals:Te(r('=')),contains:Te(r('~=')),containsAny:Te(r('*=')),startsWith:Te(r('^=')),endsWith:Te(r('$=')),toString:()=>ke(t)}},Ne={...Re,...Oe,...Ee,attribute:_e,data:e=>_e(`data-${e}`),selector:Te(T(' ')),prop:K(B),props:{[D]:K(D),[I]:K(I),[q]:K(q)}},xe=()=>e.createElement(e.Fragment,{},[...z.__getDataStore()].map((([t,r])=>e.createElement('style',{[F]:t,key:t},r.css()))));export{xe as ServerStyles,be as default,U as getStyles,Ce as mq,Ne as style};