@marigold/system 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,95 +1,70 @@
 # @marigold/system
 
-## 0.3.0
-### Minor Changes
-
+## 0.4.0
 
+### Minor Changes
 
-- [#1163](https://github.com/marigold-ui/marigold/pull/1163) [`51af6693`](https://github.com/marigold-ui/marigold/commit/51af669330fd52e4e31fe5ad71d2b202ab8d2231) Thanks [@sebald](https://github.com/sebald)! - feat(system): Expose helper to transpile style object
+- [`f9526234`](https://github.com/marigold-ui/marigold/commit/f9526234257a149b12c14191a524691470da3942) Thanks [@sebald](https://github.com/sebald)! - chore: Use `tsup` to build packages
 
+* [`f9526234`](https://github.com/marigold-ui/marigold/commit/f9526234257a149b12c14191a524691470da3942) Thanks [@sebald](https://github.com/sebald)! - Improved size in node_modules
 
 ### Patch Changes
 
+- Updated dependencies [[`f9526234`](https://github.com/marigold-ui/marigold/commit/f9526234257a149b12c14191a524691470da3942)]:
+  - @marigold/types@0.4.0
 
+## 0.3.1
 
-- [#1549](https://github.com/marigold-ui/marigold/pull/1549) [`c030aa85`](https://github.com/marigold-ui/marigold/commit/c030aa85156356c294bafe9831024f6b6f2ce4db) Thanks [@sebald](https://github.com/sebald)! - refa: use emotion's theme function in <Element>
-
-
+### Patch Changes
 
-- [#1515](https://github.com/marigold-ui/marigold/pull/1515) [`8eda245f`](https://github.com/marigold-ui/marigold/commit/8eda245f01a918fcdaa9f0ac211889ed869aa375) Thanks [@sebald](https://github.com/sebald)! - feat: add normalization for body and html & fix emotion leak
+- [#1676](https://github.com/marigold-ui/marigold/pull/1676) [`379041bc`](https://github.com/marigold-ui/marigold/commit/379041bc7d4502bca98029a95afe43ce693222cd) Thanks [@ti10le](https://github.com/ti10le)! - remove the last mdx stories
 
+## 0.3.0
 
+### Minor Changes
 
-- [#1491](https://github.com/marigold-ui/marigold/pull/1491) [`5a04de11`](https://github.com/marigold-ui/marigold/commit/5a04de110637d004f5824679697ee4d6a90eaf34) Thanks [@ti10le](https://github.com/ti10le)! - remove useStyles from Element
+- [#1163](https://github.com/marigold-ui/marigold/pull/1163) [`51af6693`](https://github.com/marigold-ui/marigold/commit/51af669330fd52e4e31fe5ad71d2b202ab8d2231) Thanks [@sebald](https://github.com/sebald)! - feat(system): Expose helper to transpile style object
 
+### Patch Changes
 
+- [#1549](https://github.com/marigold-ui/marigold/pull/1549) [`c030aa85`](https://github.com/marigold-ui/marigold/commit/c030aa85156356c294bafe9831024f6b6f2ce4db) Thanks [@sebald](https://github.com/sebald)! - refa: use emotion's theme function in <Element>
 
-- [#1440](https://github.com/marigold-ui/marigold/pull/1440) [`c1da52c0`](https://github.com/marigold-ui/marigold/commit/c1da52c0f035b141608fd606e6ba3bc2b5482dc1) Thanks [@ti10le](https://github.com/ti10le)! - feature: use Element in Box + necessary fix changes
+* [#1515](https://github.com/marigold-ui/marigold/pull/1515) [`8eda245f`](https://github.com/marigold-ui/marigold/commit/8eda245f01a918fcdaa9f0ac211889ed869aa375) Thanks [@sebald](https://github.com/sebald)! - feat: add normalization for body and html & fix emotion leak
 
+- [#1491](https://github.com/marigold-ui/marigold/pull/1491) [`5a04de11`](https://github.com/marigold-ui/marigold/commit/5a04de110637d004f5824679697ee4d6a90eaf34) Thanks [@ti10le](https://github.com/ti10le)! - remove useStyles from Element
 
+* [#1440](https://github.com/marigold-ui/marigold/pull/1440) [`c1da52c0`](https://github.com/marigold-ui/marigold/commit/c1da52c0f035b141608fd606e6ba3bc2b5482dc1) Thanks [@ti10le](https://github.com/ti10le)! - feature: use Element in Box + necessary fix changes
 
 - [#1591](https://github.com/marigold-ui/marigold/pull/1591) [`1448ddca`](https://github.com/marigold-ui/marigold/commit/1448ddcaa0f647f48b018fa74a8686af30eccc53) Thanks [@sebald](https://github.com/sebald)! - feat(jest): Improve snapshot readability
 
-
-
-- [#1514](https://github.com/marigold-ui/marigold/pull/1514) [`5107b943`](https://github.com/marigold-ui/marigold/commit/5107b943cb3085eb3137d84e79966acad6173a26) Thanks [@sebald](https://github.com/sebald)! - feat(system): Use emotion's context
-
-
+* [#1514](https://github.com/marigold-ui/marigold/pull/1514) [`5107b943`](https://github.com/marigold-ui/marigold/commit/5107b943cb3085eb3137d84e79966acad6173a26) Thanks [@sebald](https://github.com/sebald)! - feat(system): Use emotion's context
 
 - [#1647](https://github.com/marigold-ui/marigold/pull/1647) [`cd3a0d3e`](https://github.com/marigold-ui/marigold/commit/cd3a0d3edb3f2ddc1f561e8007e1c20000f7855a) Thanks [@ti10le](https://github.com/ti10le)! - feat: conditional function to allow state props in variants
 
-
-
-- [#1230](https://github.com/marigold-ui/marigold/pull/1230) [`ebd6e26f`](https://github.com/marigold-ui/marigold/commit/ebd6e26f71f675b98b663bc45c6a2d5badddcd47) Thanks [@viktoria-schwarz](https://github.com/viktoria-schwarz)! - feat: add GlobalStyles via theme
-
-
+* [#1230](https://github.com/marigold-ui/marigold/pull/1230) [`ebd6e26f`](https://github.com/marigold-ui/marigold/commit/ebd6e26f71f675b98b663bc45c6a2d5badddcd47) Thanks [@viktoria-schwarz](https://github.com/viktoria-schwarz)! - feat: add GlobalStyles via theme
 
 - [#1563](https://github.com/marigold-ui/marigold/pull/1563) [`6e485f5a`](https://github.com/marigold-ui/marigold/commit/6e485f5a8800094fe54c075a2b21f8abe726b3cd) Thanks [@sebald](https://github.com/sebald)! - feat: Introduce a `Theme` with all available scales
 
-
-
-- [#1620](https://github.com/marigold-ui/marigold/pull/1620) [`80a2abe5`](https://github.com/marigold-ui/marigold/commit/80a2abe5804ba2c5a48cc6b05211245c37baf266) Thanks [@ti10le](https://github.com/ti10le)! - feat(comp): extend Box to handle __default variants
-
-
+* [#1620](https://github.com/marigold-ui/marigold/pull/1620) [`80a2abe5`](https://github.com/marigold-ui/marigold/commit/80a2abe5804ba2c5a48cc6b05211245c37baf266) Thanks [@ti10le](https://github.com/ti10le)! - feat(comp): extend Box to handle \_\_default variants
 
 - [#1579](https://github.com/marigold-ui/marigold/pull/1579) [`e13e3cc1`](https://github.com/marigold-ui/marigold/commit/e13e3cc1fc66b261209973b1fc90eb48117076e9) Thanks [@ti10le](https://github.com/ti10le)! - feat: remove Heading from marigold
 
-
-
-- [#1622](https://github.com/marigold-ui/marigold/pull/1622) [`1829cf17`](https://github.com/marigold-ui/marigold/commit/1829cf17e16c574e5577b3e1709c34dc7ed4faaf) Thanks [@ti10le](https://github.com/ti10le)! - feat(comp): change Card default variant
-
-
+* [#1622](https://github.com/marigold-ui/marigold/pull/1622) [`1829cf17`](https://github.com/marigold-ui/marigold/commit/1829cf17e16c574e5577b3e1709c34dc7ed4faaf) Thanks [@ti10le](https://github.com/ti10le)! - feat(comp): change Card default variant
 
 - [#1501](https://github.com/marigold-ui/marigold/pull/1501) [`1c1f8648`](https://github.com/marigold-ui/marigold/commit/1c1f864820a060214406ef711f4ed873746c16c4) Thanks [@ti10le](https://github.com/ti10le)! - feat(storybook): remove use styles stories
 
-
-
-- [#1190](https://github.com/marigold-ui/marigold/pull/1190) [`a00b7eb9`](https://github.com/marigold-ui/marigold/commit/a00b7eb971131634414d3912d059fb505bb7a370) Thanks [@sebald](https://github.com/sebald)! - fix(system): List reset should not remove the enumeration
-
-
+* [#1190](https://github.com/marigold-ui/marigold/pull/1190) [`a00b7eb9`](https://github.com/marigold-ui/marigold/commit/a00b7eb971131634414d3912d059fb505bb7a370) Thanks [@sebald](https://github.com/sebald)! - fix(system): List reset should not remove the enumeration
 
 - [#1499](https://github.com/marigold-ui/marigold/pull/1499) [`ec5baf85`](https://github.com/marigold-ui/marigold/commit/ec5baf85a9a0f82a4fca5bbd1e1680316c186593) Thanks [@sebald](https://github.com/sebald)! - feat: Update and simplify normalization
 
-
-
-- [#1652](https://github.com/marigold-ui/marigold/pull/1652) [`0bb8f19e`](https://github.com/marigold-ui/marigold/commit/0bb8f19ebdec0e2f9dc3f6164f4373cac5c10880) Thanks [@sebald](https://github.com/sebald)! - refa(system): Groupt variant related fns in own file
-
-
+* [#1652](https://github.com/marigold-ui/marigold/pull/1652) [`0bb8f19e`](https://github.com/marigold-ui/marigold/commit/0bb8f19ebdec0e2f9dc3f6164f4373cac5c10880) Thanks [@sebald](https://github.com/sebald)! - refa(system): Groupt variant related fns in own file
 
 - [#1436](https://github.com/marigold-ui/marigold/pull/1436) [`c4ae5c5c`](https://github.com/marigold-ui/marigold/commit/c4ae5c5ca442f93034ff8f4c70adc295547951d4) Thanks [@ti10le](https://github.com/ti10le)! - create Element component + normalize file
 
-
-
-- [#1508](https://github.com/marigold-ui/marigold/pull/1508) [`a1ef2108`](https://github.com/marigold-ui/marigold/commit/a1ef2108dd6c8e6838b517dd58c82d38e71dae2b) Thanks [@sebald](https://github.com/sebald)! - feat: Add default styling to `<Element>`
-
-
+* [#1508](https://github.com/marigold-ui/marigold/pull/1508) [`a1ef2108`](https://github.com/marigold-ui/marigold/commit/a1ef2108dd6c8e6838b517dd58c82d38e71dae2b) Thanks [@sebald](https://github.com/sebald)! - feat: Add default styling to `<Element>`
 
 - [#1621](https://github.com/marigold-ui/marigold/pull/1621) [`2f7b936f`](https://github.com/marigold-ui/marigold/commit/2f7b936f5b07eade00a51cb138c3c492f1e08c9d) Thanks [@ti10le](https://github.com/ti10le)! - feat(comp): change Badge default variant
 
-
-
-- [#1550](https://github.com/marigold-ui/marigold/pull/1550) [`846eb640`](https://github.com/marigold-ui/marigold/commit/846eb640ad035c7f3410b4a8a451f8de56e62339) Thanks [@sebald](https://github.com/sebald)! - feat: Merge <Box> and <Element>
-
-
+* [#1550](https://github.com/marigold-ui/marigold/pull/1550) [`846eb640`](https://github.com/marigold-ui/marigold/commit/846eb640ad035c7f3410b4a8a451f8de56e62339) Thanks [@sebald](https://github.com/sebald)! - feat: Merge <Box> and <Element>
 
 - [#1614](https://github.com/marigold-ui/marigold/pull/1614) [`5d63cd9c`](https://github.com/marigold-ui/marigold/commit/5d63cd9c14578787083c82c85d93bbd2ff0efac6) Thanks [@ti10le](https://github.com/ti10le)! - remove all purple color things

package/dist/index.d.ts

@@ -1,8 +1,364 @@
-export * from './Box';
-export * from './Global';
-export * from './normalize';
-export * from './SVG';
-export * from './theme';
-export * from './types';
-export * from './useTheme';
-export * from './variant';
+import { PolymorphicPropsWithRef, PolymorphicComponentWithRef, ComponentProps } from '@marigold/types';
+import * as _theme_ui_css from '@theme-ui/css';
+import { ResponsiveStyleValue as ResponsiveStyleValue$1, ThemeUIStyleObject, ThemeUICSSObject, ThemeUICSSProperties, NestedScaleDict } from '@theme-ui/css';
+import React, { ElementType, ReactNode } from 'react';
+import * as CSS from 'csstype';
+
+/**
+ * Create type aliases for `theme-ui` so that it doesn't leak too much into our code.
+ */
+
+declare type ResponsiveStyleValue<T> = ResponsiveStyleValue$1<T>;
+declare type StyleObject = ThemeUIStyleObject;
+declare type CSSObject = ThemeUICSSObject;
+declare type CSSProperties = ThemeUICSSProperties;
+
+declare type StyleProps = Pick<CSSObject, 'display' | 'height' | 'width' | 'minWidth' | 'maxWidth' | 'position' | 'top' | 'bottom' | 'right' | 'left' | 'zIndex' | 'p' | 'px' | 'py' | 'pt' | 'pb' | 'pl' | 'pr' | 'm' | 'mx' | 'my' | 'mt' | 'mb' | 'ml' | 'mr' | 'flexDirection' | 'flexWrap' | 'flexShrink' | 'flexGrow' | 'alignItems' | 'justifyContent' | 'bg' | 'border' | 'borderRadius' | 'boxShadow' | 'opacity' | 'overflow' | 'transition'>;
+declare type BoxOwnProps = {
+    css?: CSSObject;
+    variant?: string | string[];
+    /**
+     * Use to set base styles for the component
+     * @internal Used to set default styles for Marigold components
+     */
+    __baseCSS?: CSSObject;
+} & StyleProps;
+declare type BoxProps = PolymorphicPropsWithRef<BoxOwnProps, 'div'>;
+declare const Box: PolymorphicComponentWithRef<BoxOwnProps, 'div'>;
+
+declare const Global: () => JSX.Element;
+
+/**
+ * Normalize styling of certain elements between browsers.
+ * Based on https://www.joshwcomeau.com/css/custom-css-reset/
+ */
+
+declare const normalize: {
+    readonly base: {
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly a: {
+        readonly textDecoration: "none";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly p: {
+        readonly overflowWrap: "break-word";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly h1: {
+        readonly overflowWrap: "break-word";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly h2: {
+        readonly overflowWrap: "break-word";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly h3: {
+        readonly overflowWrap: "break-word";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly h4: {
+        readonly overflowWrap: "break-word";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly h5: {
+        readonly overflowWrap: "break-word";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly h6: {
+        readonly overflowWrap: "break-word";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly img: {
+        readonly display: "block";
+        readonly maxWidth: "100%";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly picture: {
+        readonly display: "block";
+        readonly maxWidth: "100%";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly video: {
+        readonly display: "block";
+        readonly maxWidth: "100%";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly canvas: {
+        readonly display: "block";
+        readonly maxWidth: "100%";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly svg: {
+        readonly display: "block";
+        readonly maxWidth: "100%";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly select: {
+        readonly display: "block";
+        readonly appearance: "none";
+        readonly font: "inherit";
+        readonly '&::-ms-expand': {
+            readonly display: "none";
+        };
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly button: {
+        readonly display: "block";
+        readonly appearance: "none";
+        readonly font: "inherit";
+        readonly background: "transparent";
+        readonly textAlign: "center";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly textarea: {
+        readonly display: "block";
+        readonly appearance: "none";
+        readonly font: "inherit";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+    readonly input: {
+        readonly display: "block";
+        readonly appearance: "none";
+        readonly font: "inherit";
+        readonly '&::-ms-clear': {
+            readonly display: "none";
+        };
+        readonly '&::-webkit-search-cancel-button': {
+            readonly WebkitAppearance: "none";
+        };
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
+    };
+};
+declare type NormalizedElement = keyof typeof normalize;
+/**
+ * Type-safe helper to get normalization. If no normalization is found,
+ * returns the *base* normalization.
+ */
+declare const getNormalizedStyles: (val?: ElementType<any> | undefined) => {
+    readonly boxSizing: "border-box";
+    readonly margin: 0;
+    readonly minWidth: 0;
+};
+
+declare type SVGProps = {
+    size?: number;
+} & ComponentProps<'svg'>;
+declare const SVG: React.FC<SVGProps>;
+
+/**
+ * Value used to define a scale.
+ *
+ * Can be nested to support a default value.
+ *
+ * @example
+ * Given a theme
+ * ```
+ * {
+ *   colors: {
+ *     primary: { __default: '#00f', light: '#33f' }
+ *   }
+ * }
+ * ```
+ * `css{{ color: 'primary' }}` resolves to `color: #00f`.
+ */
+declare type ScaleValue<T> = T | T[] | NestedScaleDict<T> | undefined;
+/**
+ * Scales are a set of named, pre-defined CSS values which are used
+ * to create consitency in sizing across visual elements. They give
+ * plain values semantics meaning.
+ *
+ * Marigold uses a plain object to define scales, where the key should be a
+ * descriptive name for the scale (e.g. `small`/`medium`/.. or `body`/`heading`/...),
+ * and the value is the CSS value.
+ */
+declare type Scale<T> = {
+    [key: string]: ScaleValue<T>;
+};
+/**
+ * Predefined {@link Scale} scale which uses size values.
+ */
+declare type SizeScale<T> = {
+    xxsmall?: ScaleValue<T>;
+    xsmall?: ScaleValue<T>;
+    small?: ScaleValue<T>;
+    medium?: ScaleValue<T>;
+    large?: ScaleValue<T>;
+    xlarge?: ScaleValue<T>;
+    xxlarge?: ScaleValue<T>;
+};
+/**
+ * A {@link SizeScale} that also includes a required `none` value, which is
+ * usually used to define the blank value (e.g `0`).
+ */
+declare type ZeroScale<T> = {
+    none: ScaleValue<T>;
+} & Scale<T>;
+/**
+ * Base theme with typings for available scales properties.
+ */
+interface Theme {
+    /**
+     * To configure the default breakpoints used in responsive array values,
+     * add a breakpoints array to your theme.
+     *
+     * Each breakpoint should be a string  with a CSS length unit included or a
+     * string including a CSS media query. String values with a CSS length unit
+     * will be used to generate a mobile-first (i.e. min-width) media query.
+     *
+     * @example
+     * ```ts
+     * {
+     *   breakpoints: [
+     *     '40em', '@media (min-width: 56em) and (orientation: landscape)', '64em',
+     *   ],
+     * }
+     * ```
+     */
+    breakpoints?: Array<string>;
+    colors?: Scale<CSS.Property.Color | NestedScaleDict<CSS.Property.Color>>;
+    /**
+     * Used to define a scale for whitspace values,
+     * like `padding`, `margin`, `gap`, etc.
+     */
+    space?: ZeroScale<CSS.Property.Margin<number | string>>;
+    /**
+     * Used to define a `font-size` scale.
+     */
+    fontSizes?: Scale<CSS.Property.FontSize<number>>;
+    /**
+     * Used to define a `font-family` scale.
+     */
+    fonts?: Scale<CSS.Property.FontFamily>;
+    /**
+     * Used to define a `font-weight` scale.
+     */
+    fontWeights?: Scale<CSS.Property.FontWeight>;
+    /**
+     * Used to define a `line-height` scale.
+     */
+    lineHeights?: Scale<CSS.Property.LineHeight<string | 0 | number>>;
+    /**
+     * Used to define a `letter-spacing` scale.
+     */
+    letterSpacings?: ZeroScale<CSS.Property.LetterSpacing<string | 0 | number>>;
+    /**
+     * Used to define a scale for size values,
+     * like `height`, `width`, `flexBasis`, etc.
+     */
+    sizes?: ZeroScale<CSS.Property.Height<{}> | CSS.Property.Width<{}>>;
+    /**
+     * Used to define different `border` styles.
+     */
+    borders?: ZeroScale<CSS.Property.Border<{}>>;
+    /**
+     * Used to define `border-style` styles.
+     */
+    borderStyles?: Scale<CSS.Property.Border<{}>>;
+    /**
+     * Used to define `border-width` styles.
+     */
+    borderWidths?: ZeroScale<CSS.Property.BorderWidth<string | 0 | number>>;
+    /**
+     * Used to define `border-radius` styles.
+     */
+    radii?: ZeroScale<CSS.Property.BorderRadius<string | 0 | number>>;
+    /**
+     * Used to define `Shadow` styles.
+     */
+    shadows?: ZeroScale<CSS.Property.BoxShadow>;
+    /**
+     * Used to define a `z-index` scake.
+     */
+    zIndices?: Scale<CSS.Property.ZIndex>;
+    /**
+     * Used to define a `opacity` scale.
+     */
+    opacities?: Scale<CSS.Property.Opacity>;
+    /**
+     * Used to define a `transition` styles.
+     */
+    transitions?: ZeroScale<CSS.Property.Transition>;
+}
+
+/**
+ * @internal
+ */
+declare const __defaultTheme: Theme;
+declare const useTheme: () => {
+    theme: Theme;
+    css: (style: StyleObject) => _theme_ui_css.CSSObject;
+};
+declare type ThemeProviderProps<T extends Theme> = {
+    theme: T;
+    children: ReactNode;
+};
+declare function ThemeProvider<T extends Theme>({ theme, children, }: ThemeProviderProps<T>): JSX.Element;
+
+/**
+ * Ensures that the `val` is an array. Will return an empty array if `val` is falsy.
+ */
+declare const ensureArray: <T>(val?: T | T[] | undefined) => T[];
+/**
+ * Removes trailing dot from variant, if necessary. This is necessary to support
+ * `__default` styles. See https://github.com/system-ui/theme-ui/pull/951
+ */
+declare const ensureVariantDefault: (val: string) => string;
+/**
+ * Ensures that the `variant` is an array and supports the `__default` key.
+ */
+declare const ensureArrayVariant: <T extends string>(variant?: T | T[] | undefined) => string[];
+declare type State = {
+    checked?: boolean;
+    focus?: boolean;
+    hover?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+};
+/**
+ * Appends given `state` to a `variant`.
+ */
+declare const appendVariantState: (variant: string, state: keyof State) => string;
+/**
+ * Create a variant array from a `variant` and `state` containing
+ * passed states, if they are truthy.
+ */
+declare const conditional: (variant: string, { disabled, ...states }: State) => string[];
+
+export { Box, BoxOwnProps, BoxProps, CSSObject, CSSProperties, Global, NormalizedElement, ResponsiveStyleValue, SVG, SVGProps, Scale, ScaleValue, SizeScale, State, StyleObject, StyleProps, Theme, ThemeProvider, ThemeProviderProps, ZeroScale, __defaultTheme, appendVariantState, conditional, ensureArray, ensureArrayVariant, ensureVariantDefault, getNormalizedStyles, normalize, useTheme };