@atlaskit/primitives 0.1.0 → 0.2.0

package/dist/esm/components/stack.partial.js

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import { forwardRef, memo } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -37,56 +38,30 @@ var flexGrowMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @codegen <<SignedSource::0e30ffcc6aef7932f9d8ff2543327236>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["space"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
-var spaceMap = {
-  '0': css({
-    gap: "var(--ds-space-0, 0px)"
-  }),
-  '025': css({
-    gap: "var(--ds-space-025, 2px)"
-  }),
-  '050': css({
-    gap: "var(--ds-space-050, 4px)"
-  }),
-  '075': css({
-    gap: "var(--ds-space-075, 6px)"
-  }),
-  '100': css({
-    gap: "var(--ds-space-100, 8px)"
-  }),
-  '1000': css({
-    gap: "var(--ds-space-1000, 80px)"
-  }),
-  '150': css({
-    gap: "var(--ds-space-150, 12px)"
-  }),
-  '200': css({
-    gap: "var(--ds-space-200, 16px)"
-  }),
-  '250': css({
-    gap: "var(--ds-space-250, 20px)"
-  }),
-  '300': css({
-    gap: "var(--ds-space-300, 24px)"
-  }),
-  '400': css({
-    gap: "var(--ds-space-400, 32px)"
-  }),
-  '500': css({
-    gap: "var(--ds-space-500, 40px)"
-  }),
-  '600': css({
-    gap: "var(--ds-space-600, 48px)"
-  }),
-  '800': css({
-    gap: "var(--ds-space-800, 64px)"
-  })
-};
+var spaceMap = Object.fromEntries(['gap'].map(function (property) {
+  return [property, {
+    '0': css(_defineProperty({}, property, "var(--ds-space-0, 0px)")),
+    '025': css(_defineProperty({}, property, "var(--ds-space-025, 2px)")),
+    '050': css(_defineProperty({}, property, "var(--ds-space-050, 4px)")),
+    '075': css(_defineProperty({}, property, "var(--ds-space-075, 6px)")),
+    '100': css(_defineProperty({}, property, "var(--ds-space-100, 8px)")),
+    '150': css(_defineProperty({}, property, "var(--ds-space-150, 12px)")),
+    '200': css(_defineProperty({}, property, "var(--ds-space-200, 16px)")),
+    '250': css(_defineProperty({}, property, "var(--ds-space-250, 20px)")),
+    '300': css(_defineProperty({}, property, "var(--ds-space-300, 24px)")),
+    '400': css(_defineProperty({}, property, "var(--ds-space-400, 32px)")),
+    '500': css(_defineProperty({}, property, "var(--ds-space-500, 40px)")),
+    '600': css(_defineProperty({}, property, "var(--ds-space-600, 48px)")),
+    '800': css(_defineProperty({}, property, "var(--ds-space-800, 64px)")),
+    '1000': css(_defineProperty({}, property, "var(--ds-space-1000, 80px)"))
+  }];
+}));
 /**
  * @codegenEnd
  */
@@ -121,7 +96,7 @@ var Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
     testId = _ref.testId;
   var justifyContent = spread || alignBlock;
   return jsx("div", {
-    css: [baseStyles, space && spaceMap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
+    css: [baseStyles, space && spaceMap.gap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
     "data-testid": testId,
     ref: ref
   }, children);

package/dist/esm/index.js

@@ -1,3 +1,3 @@
-export { default as Stack } from './components/stack.partial';
 export { Box } from './components/box';
-export { default as Inline } from './components/inline.partial';
+export { default as Inline } from './components/inline.partial';
+export { default as Stack } from './components/stack.partial';

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"sideEffects": false
 }

package/dist/types/components/box.d.ts

@@ -1 +1,10 @@
-export { default as Box } from '@atlaskit/ds-explorations/box';
+import { ElementType, FC, ReactElement } from 'react';
+import { BaseBoxProps } from './internal/base-box.partial';
+import { CustomStyles } from './types';
+declare type BoxPropsBase = {
+    customStyles?: CustomStyles;
+};
+export declare type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'className' | 'UNSAFE_style'> & BoxPropsBase;
+declare type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BoxProps<T>) => ReactElement | null) & FC<BoxProps<T>>;
+declare const Box: BoxComponent;
+export { Box };

package/dist/types/components/inline.partial.d.ts

@@ -44,29 +44,31 @@ export declare type Spread = 'space-between';
 export declare type Grow = 'hug' | 'fill';
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @codegen <<SignedSource::0e30ffcc6aef7932f9d8ff2543327236>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["space"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
 declare const spaceMap: {
-    '0': import("@emotion/react").SerializedStyles;
-    '025': import("@emotion/react").SerializedStyles;
-    '050': import("@emotion/react").SerializedStyles;
-    '075': import("@emotion/react").SerializedStyles;
-    '100': import("@emotion/react").SerializedStyles;
-    '1000': import("@emotion/react").SerializedStyles;
-    '150': import("@emotion/react").SerializedStyles;
-    '200': import("@emotion/react").SerializedStyles;
-    '250': import("@emotion/react").SerializedStyles;
-    '300': import("@emotion/react").SerializedStyles;
-    '400': import("@emotion/react").SerializedStyles;
-    '500': import("@emotion/react").SerializedStyles;
-    '600': import("@emotion/react").SerializedStyles;
-    '800': import("@emotion/react").SerializedStyles;
+    [k: string]: {
+        readonly '0': import("@emotion/react").SerializedStyles;
+        readonly '025': import("@emotion/react").SerializedStyles;
+        readonly '050': import("@emotion/react").SerializedStyles;
+        readonly '075': import("@emotion/react").SerializedStyles;
+        readonly '100': import("@emotion/react").SerializedStyles;
+        readonly '150': import("@emotion/react").SerializedStyles;
+        readonly '200': import("@emotion/react").SerializedStyles;
+        readonly '250': import("@emotion/react").SerializedStyles;
+        readonly '300': import("@emotion/react").SerializedStyles;
+        readonly '400': import("@emotion/react").SerializedStyles;
+        readonly '500': import("@emotion/react").SerializedStyles;
+        readonly '600': import("@emotion/react").SerializedStyles;
+        readonly '800': import("@emotion/react").SerializedStyles;
+        readonly '1000': import("@emotion/react").SerializedStyles;
+    };
 };
-export declare type Space = keyof typeof spaceMap;
+export declare type Space = keyof typeof spaceMap.gap;
 /**
  * __Inline__
  *

package/dist/types/components/internal/base-box.partial.d.ts

@@ -0,0 +1,483 @@
+/** @jsx jsx */
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, FC, ReactElement, ReactNode } from 'react';
+import { Layer } from '../../constants';
+import type { BasePrimitiveProps } from '../types';
+export declare type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className' | 'style'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
+declare type BaseBoxPropsFoundation<T extends ElementType> = {
+    /**
+     * The DOM element to render as the Box. Defaults to `div`.
+     */
+    as?: 'div' | 'span';
+    /**
+     * The HTML className attribute.
+     *
+     * Before using this prop please ensure:
+     * - The styles cannot otherwise be achieved through `Box` directly.
+     * - The use case needs custom styles that cannot be designed or implemented differently
+     *
+     * Ensure you're using the `@atlaskit/eslint-plugin-design-system` with this prop to prevent unbounded usage.
+     *
+     * @see `@atlaskit/eslint-plugin-design-system`
+     */
+    className?: string;
+    /**
+     * Elements to be rendered inside the Box.
+     */
+    children?: ReactNode;
+    /**
+     * Token representing color with a fallback.
+     */
+    color?: TextColor;
+    /**
+     * Token representing background color with a fallback.
+     */
+    backgroundColor?: BackgroundColor;
+    /**
+     * Token representing shadow with a fallback
+     */
+    shadow?: Shadow;
+    /**
+     * Defines border style.
+     */
+    borderStyle?: BorderStyle;
+    /**
+     * Defines border width.
+     */
+    borderWidth?: BorderWidth;
+    /**
+     * Token representing border color with a fallback.
+     */
+    borderColor?: BorderColor;
+    /**
+     * Defines border radius.
+     */
+    borderRadius?: BorderRadius;
+    /**
+     * Used for providing a z-index.
+     */
+    layer?: Layer;
+    /**
+     * Shorthand `flex` property.
+     */
+    flex?: Flex;
+    /**
+     * Defines the flex grow factor -- how much remaining space should be taken up.
+     */
+    flexGrow?: FlexGrow;
+    /**
+     * Defines the flex shrink factor -- how the item will shrink relative to other flex items in the container.
+     */
+    flexShrink?: FlexShrink;
+    /**
+     * Overrides the `align-items` value.
+     */
+    alignSelf?: AlignSelf;
+    /**
+     * Defines what happens if content overflows the box.
+     * Shorthand for overflow-inline and overflow-block.
+     *
+     * @see overflowInline
+     * @see overflowBlock
+     */
+    overflow?: Overflow;
+    /**
+     * Defines what happens if content overflows the box in the horizontal direction (inline).
+     */
+    overflowInline?: OverflowInline;
+    /**
+     * Defines what happens if content overflows the box in the vertical direction (block).
+     */
+    overflowBlock?: OverflowBlock;
+    /**
+     * Shorthand for `paddingBlock` and `paddingInline` together.
+     *
+     * @see paddingBlock
+     * @see paddingInline
+     */
+    padding?: Padding;
+    /**
+     * Token representing CSS shorthand `paddingBlock`.
+     *
+     * @see paddingBlockStart
+     * @see paddingBlockEnd
+     */
+    paddingBlock?: PaddingBlock;
+    /**
+     * Token representing CSS `paddingBlockStart`.
+     */
+    paddingBlockStart?: PaddingBlockStart;
+    /**
+     * Token representing CSS `paddingBlockEnd`.
+     */
+    paddingBlockEnd?: PaddingBlockEnd;
+    /**
+     * Token representing CSS shorthand `paddingInline`.
+     *
+     * @see paddingInlineStart
+     * @see paddingInlineEnd
+     */
+    paddingInline?: PaddingInline;
+    /**
+     * Token representing CSS `paddingInlineStart`.
+     */
+    paddingInlineStart?: PaddingInlineStart;
+    /**
+     * Token representing CSS `paddingInlineEnd`.
+     */
+    paddingInlineEnd?: PaddingInlineEnd;
+    /**
+     * Token representing width.
+     * @experimental The existing tokens will be replaced to better reflect dimensions.
+     */
+    width?: Width;
+    /**
+     * Token representing height.
+     * @experimental The existing tokens will be replaced to better reflect dimensions.
+     */
+    height?: Height;
+    /**
+     * Defines display type and layout. Defaults to `flex`.
+     */
+    display?: Display;
+    /**
+     * CSS position property.
+     */
+    position?: Position;
+    ref?: ComponentPropsWithRef<T>['ref'];
+};
+export declare type BaseBoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BaseBoxProps<T>) => ReactElement | null) & FC<BaseBoxProps<T>>;
+/**
+ * __Box__
+ *
+ * Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
+ * Renders a `div` by default.
+ *
+ * @internal
+ */
+export declare const BaseBox: BaseBoxComponent;
+export default BaseBox;
+declare type BorderStyle = keyof typeof borderStyleMap;
+declare const borderStyleMap: {
+    readonly none: import("@emotion/react").SerializedStyles;
+    readonly solid: import("@emotion/react").SerializedStyles;
+};
+declare type BorderWidth = keyof typeof borderWidthMap;
+declare const borderWidthMap: {
+    readonly 'size.050': import("@emotion/react").SerializedStyles;
+    readonly 'size.100': import("@emotion/react").SerializedStyles;
+};
+declare type BorderRadius = keyof typeof borderRadiusMap;
+declare const borderRadiusMap: {
+    'radius.100': import("@emotion/react").SerializedStyles;
+    'radius.200': import("@emotion/react").SerializedStyles;
+    'radius.round': import("@emotion/react").SerializedStyles;
+    'radius.300': import("@emotion/react").SerializedStyles;
+    'radius.400': import("@emotion/react").SerializedStyles;
+};
+declare type Flex = keyof typeof flexMap;
+declare const flexMap: {
+    readonly '1': import("@emotion/react").SerializedStyles;
+};
+declare type FlexGrow = keyof typeof flexGrowMap;
+declare const flexGrowMap: {
+    readonly '0': import("@emotion/react").SerializedStyles;
+    readonly '1': import("@emotion/react").SerializedStyles;
+};
+declare type FlexShrink = keyof typeof flexShrinkMap;
+declare const flexShrinkMap: {
+    readonly '0': import("@emotion/react").SerializedStyles;
+    readonly '1': import("@emotion/react").SerializedStyles;
+};
+declare type AlignSelf = keyof typeof alignSelfMap;
+declare const alignSelfMap: {
+    readonly center: import("@emotion/react").SerializedStyles;
+    readonly start: import("@emotion/react").SerializedStyles;
+    readonly stretch: import("@emotion/react").SerializedStyles;
+    readonly end: import("@emotion/react").SerializedStyles;
+    readonly baseline: import("@emotion/react").SerializedStyles;
+};
+declare type Display = keyof typeof displayMap;
+declare const displayMap: {
+    readonly block: import("@emotion/react").SerializedStyles;
+    readonly inline: import("@emotion/react").SerializedStyles;
+    readonly flex: import("@emotion/react").SerializedStyles;
+    readonly 'inline-flex': import("@emotion/react").SerializedStyles;
+    readonly 'inline-block': import("@emotion/react").SerializedStyles;
+};
+declare type Position = keyof typeof positionMap;
+declare const positionMap: {
+    readonly absolute: import("@emotion/react").SerializedStyles;
+    readonly fixed: import("@emotion/react").SerializedStyles;
+    readonly relative: import("@emotion/react").SerializedStyles;
+    readonly static: import("@emotion/react").SerializedStyles;
+};
+declare type Overflow = keyof typeof overflowMap;
+declare const overflowMap: {
+    readonly auto: import("@emotion/react").SerializedStyles;
+    readonly hidden: import("@emotion/react").SerializedStyles;
+};
+declare type OverflowInline = keyof typeof overflowInlineMap;
+declare const overflowInlineMap: {
+    readonly auto: import("@emotion/react").SerializedStyles;
+    readonly hidden: import("@emotion/react").SerializedStyles;
+};
+declare type OverflowBlock = keyof typeof overflowBlockMap;
+declare const overflowBlockMap: {
+    readonly auto: import("@emotion/react").SerializedStyles;
+    readonly hidden: import("@emotion/react").SerializedStyles;
+};
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::50178e05b73e6c8ed21bfbc8e6d87a13>>
+ * @codegenId dimensions
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["width", "height", "minWidth", "maxWidth", "minHeight", "maxHeight"]
+ */
+declare const widthMap: {
+    readonly '100%': import("@emotion/react").SerializedStyles;
+    readonly 'size.100': import("@emotion/react").SerializedStyles;
+    readonly 'size.200': import("@emotion/react").SerializedStyles;
+    readonly 'size.300': import("@emotion/react").SerializedStyles;
+    readonly 'size.400': import("@emotion/react").SerializedStyles;
+    readonly 'size.500': import("@emotion/react").SerializedStyles;
+    readonly 'size.600': import("@emotion/react").SerializedStyles;
+    readonly 'size.1000': import("@emotion/react").SerializedStyles;
+};
+export declare type Width = keyof typeof widthMap;
+declare const heightMap: {
+    readonly '100%': import("@emotion/react").SerializedStyles;
+    readonly 'size.100': import("@emotion/react").SerializedStyles;
+    readonly 'size.200': import("@emotion/react").SerializedStyles;
+    readonly 'size.300': import("@emotion/react").SerializedStyles;
+    readonly 'size.400': import("@emotion/react").SerializedStyles;
+    readonly 'size.500': import("@emotion/react").SerializedStyles;
+    readonly 'size.600': import("@emotion/react").SerializedStyles;
+    readonly 'size.1000': import("@emotion/react").SerializedStyles;
+};
+export declare type Height = keyof typeof heightMap;
+declare const minWidthMap: {
+    readonly '100%': import("@emotion/react").SerializedStyles;
+    readonly 'size.100': import("@emotion/react").SerializedStyles;
+    readonly 'size.200': import("@emotion/react").SerializedStyles;
+    readonly 'size.300': import("@emotion/react").SerializedStyles;
+    readonly 'size.400': import("@emotion/react").SerializedStyles;
+    readonly 'size.500': import("@emotion/react").SerializedStyles;
+    readonly 'size.600': import("@emotion/react").SerializedStyles;
+    readonly 'size.1000': import("@emotion/react").SerializedStyles;
+};
+export declare type MinWidth = keyof typeof minWidthMap;
+declare const maxWidthMap: {
+    readonly '100%': import("@emotion/react").SerializedStyles;
+    readonly 'size.100': import("@emotion/react").SerializedStyles;
+    readonly 'size.200': import("@emotion/react").SerializedStyles;
+    readonly 'size.300': import("@emotion/react").SerializedStyles;
+    readonly 'size.400': import("@emotion/react").SerializedStyles;
+    readonly 'size.500': import("@emotion/react").SerializedStyles;
+    readonly 'size.600': import("@emotion/react").SerializedStyles;
+    readonly 'size.1000': import("@emotion/react").SerializedStyles;
+};
+export declare type MaxWidth = keyof typeof maxWidthMap;
+declare const minHeightMap: {
+    readonly '100%': import("@emotion/react").SerializedStyles;
+    readonly 'size.100': import("@emotion/react").SerializedStyles;
+    readonly 'size.200': import("@emotion/react").SerializedStyles;
+    readonly 'size.300': import("@emotion/react").SerializedStyles;
+    readonly 'size.400': import("@emotion/react").SerializedStyles;
+    readonly 'size.500': import("@emotion/react").SerializedStyles;
+    readonly 'size.600': import("@emotion/react").SerializedStyles;
+    readonly 'size.1000': import("@emotion/react").SerializedStyles;
+};
+export declare type MinHeight = keyof typeof minHeightMap;
+declare const maxHeightMap: {
+    readonly '100%': import("@emotion/react").SerializedStyles;
+    readonly 'size.100': import("@emotion/react").SerializedStyles;
+    readonly 'size.200': import("@emotion/react").SerializedStyles;
+    readonly 'size.300': import("@emotion/react").SerializedStyles;
+    readonly 'size.400': import("@emotion/react").SerializedStyles;
+    readonly 'size.500': import("@emotion/react").SerializedStyles;
+    readonly 'size.600': import("@emotion/react").SerializedStyles;
+    readonly 'size.1000': import("@emotion/react").SerializedStyles;
+};
+export declare type MaxHeight = keyof typeof maxHeightMap;
+/**
+ * @codegenEnd
+ */
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::6da0ceaa2c227230e3a93bc724ff8648>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["padding"]
+ * @codegenDependency ../../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
+ */
+declare const paddingMap: {
+    [k: string]: {
+        readonly 'space.0': import("@emotion/react").SerializedStyles;
+        readonly 'space.025': import("@emotion/react").SerializedStyles;
+        readonly 'space.050': import("@emotion/react").SerializedStyles;
+        readonly 'space.075': import("@emotion/react").SerializedStyles;
+        readonly 'space.100': import("@emotion/react").SerializedStyles;
+        readonly 'space.150': import("@emotion/react").SerializedStyles;
+        readonly 'space.200': import("@emotion/react").SerializedStyles;
+        readonly 'space.250': import("@emotion/react").SerializedStyles;
+        readonly 'space.300': import("@emotion/react").SerializedStyles;
+        readonly 'space.400': import("@emotion/react").SerializedStyles;
+        readonly 'space.500': import("@emotion/react").SerializedStyles;
+        readonly 'space.600': import("@emotion/react").SerializedStyles;
+        readonly 'space.800': import("@emotion/react").SerializedStyles;
+        readonly 'space.1000': import("@emotion/react").SerializedStyles;
+    };
+};
+export declare type Padding = keyof typeof paddingMap.padding;
+export declare type PaddingBlock = keyof typeof paddingMap.paddingBlock;
+export declare type PaddingBlockStart = keyof typeof paddingMap.paddingBlockStart;
+export declare type PaddingBlockEnd = keyof typeof paddingMap.paddingBlockEnd;
+export declare type PaddingInline = keyof typeof paddingMap.paddingInline;
+export declare type PaddingInlineStart = keyof typeof paddingMap.paddingInlineStart;
+export declare type PaddingInlineEnd = keyof typeof paddingMap.paddingInlineEnd;
+/**
+ * @codegenEnd
+ */
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::1e77e4e502cd4d951550637bdce2f3ca>>
+ * @codegenId colors
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["border", "background", "shadow", "text"]
+ * @codegenDependency ../../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
+ */
+declare const borderColorMap: {
+    readonly 'color.border': import("@emotion/react").SerializedStyles;
+    readonly 'accent.red': import("@emotion/react").SerializedStyles;
+    readonly 'accent.orange': import("@emotion/react").SerializedStyles;
+    readonly 'accent.yellow': import("@emotion/react").SerializedStyles;
+    readonly 'accent.green': import("@emotion/react").SerializedStyles;
+    readonly 'accent.teal': import("@emotion/react").SerializedStyles;
+    readonly 'accent.blue': import("@emotion/react").SerializedStyles;
+    readonly 'accent.purple': import("@emotion/react").SerializedStyles;
+    readonly 'accent.magenta': import("@emotion/react").SerializedStyles;
+    readonly 'accent.gray': import("@emotion/react").SerializedStyles;
+    readonly disabled: import("@emotion/react").SerializedStyles;
+    readonly focused: import("@emotion/react").SerializedStyles;
+    readonly input: import("@emotion/react").SerializedStyles;
+    readonly inverse: import("@emotion/react").SerializedStyles;
+    readonly selected: import("@emotion/react").SerializedStyles;
+    readonly brand: import("@emotion/react").SerializedStyles;
+    readonly danger: import("@emotion/react").SerializedStyles;
+    readonly warning: import("@emotion/react").SerializedStyles;
+    readonly success: import("@emotion/react").SerializedStyles;
+    readonly discovery: import("@emotion/react").SerializedStyles;
+    readonly information: import("@emotion/react").SerializedStyles;
+    readonly bold: import("@emotion/react").SerializedStyles;
+};
+export declare type BorderColor = keyof typeof borderColorMap;
+declare const backgroundColorMap: {
+    readonly 'accent.red.subtlest': import("@emotion/react").SerializedStyles;
+    readonly 'accent.red.subtler': import("@emotion/react").SerializedStyles;
+    readonly 'accent.red.subtle': import("@emotion/react").SerializedStyles;
+    readonly 'accent.red.bolder': import("@emotion/react").SerializedStyles;
+    readonly 'accent.orange.subtlest': import("@emotion/react").SerializedStyles;
+    readonly 'accent.orange.subtler': import("@emotion/react").SerializedStyles;
+    readonly 'accent.orange.subtle': import("@emotion/react").SerializedStyles;
+    readonly 'accent.orange.bolder': import("@emotion/react").SerializedStyles;
+    readonly 'accent.yellow.subtlest': import("@emotion/react").SerializedStyles;
+    readonly 'accent.yellow.subtler': import("@emotion/react").SerializedStyles;
+    readonly 'accent.yellow.subtle': import("@emotion/react").SerializedStyles;
+    readonly 'accent.yellow.bolder': import("@emotion/react").SerializedStyles;
+    readonly 'accent.green.subtlest': import("@emotion/react").SerializedStyles;
+    readonly 'accent.green.subtler': import("@emotion/react").SerializedStyles;
+    readonly 'accent.green.subtle': import("@emotion/react").SerializedStyles;
+    readonly 'accent.green.bolder': import("@emotion/react").SerializedStyles;
+    readonly 'accent.teal.subtlest': import("@emotion/react").SerializedStyles;
+    readonly 'accent.teal.subtler': import("@emotion/react").SerializedStyles;
+    readonly 'accent.teal.subtle': import("@emotion/react").SerializedStyles;
+    readonly 'accent.teal.bolder': import("@emotion/react").SerializedStyles;
+    readonly 'accent.blue.subtlest': import("@emotion/react").SerializedStyles;
+    readonly 'accent.blue.subtler': import("@emotion/react").SerializedStyles;
+    readonly 'accent.blue.subtle': import("@emotion/react").SerializedStyles;
+    readonly 'accent.blue.bolder': import("@emotion/react").SerializedStyles;
+    readonly 'accent.purple.subtlest': import("@emotion/react").SerializedStyles;
+    readonly 'accent.purple.subtler': import("@emotion/react").SerializedStyles;
+    readonly 'accent.purple.subtle': import("@emotion/react").SerializedStyles;
+    readonly 'accent.purple.bolder': import("@emotion/react").SerializedStyles;
+    readonly 'accent.magenta.subtlest': import("@emotion/react").SerializedStyles;
+    readonly 'accent.magenta.subtler': import("@emotion/react").SerializedStyles;
+    readonly 'accent.magenta.subtle': import("@emotion/react").SerializedStyles;
+    readonly 'accent.magenta.bolder': import("@emotion/react").SerializedStyles;
+    readonly 'accent.gray.subtlest': import("@emotion/react").SerializedStyles;
+    readonly 'accent.gray.subtler': import("@emotion/react").SerializedStyles;
+    readonly 'accent.gray.subtle': import("@emotion/react").SerializedStyles;
+    readonly 'accent.gray.bolder': import("@emotion/react").SerializedStyles;
+    readonly disabled: import("@emotion/react").SerializedStyles;
+    readonly input: import("@emotion/react").SerializedStyles;
+    readonly 'inverse.subtle': import("@emotion/react").SerializedStyles;
+    readonly neutral: import("@emotion/react").SerializedStyles;
+    readonly 'neutral.subtle': import("@emotion/react").SerializedStyles;
+    readonly 'neutral.bold': import("@emotion/react").SerializedStyles;
+    readonly selected: import("@emotion/react").SerializedStyles;
+    readonly 'selected.bold': import("@emotion/react").SerializedStyles;
+    readonly 'brand.bold': import("@emotion/react").SerializedStyles;
+    readonly danger: import("@emotion/react").SerializedStyles;
+    readonly 'danger.bold': import("@emotion/react").SerializedStyles;
+    readonly warning: import("@emotion/react").SerializedStyles;
+    readonly 'warning.bold': import("@emotion/react").SerializedStyles;
+    readonly success: import("@emotion/react").SerializedStyles;
+    readonly 'success.bold': import("@emotion/react").SerializedStyles;
+    readonly discovery: import("@emotion/react").SerializedStyles;
+    readonly 'discovery.bold': import("@emotion/react").SerializedStyles;
+    readonly information: import("@emotion/react").SerializedStyles;
+    readonly 'information.bold': import("@emotion/react").SerializedStyles;
+    readonly 'color.blanket': import("@emotion/react").SerializedStyles;
+    readonly 'color.blanket.selected': import("@emotion/react").SerializedStyles;
+    readonly 'color.blanket.danger': import("@emotion/react").SerializedStyles;
+    readonly 'elevation.surface': import("@emotion/react").SerializedStyles;
+    readonly 'elevation.surface.overlay': import("@emotion/react").SerializedStyles;
+    readonly 'elevation.surface.raised': import("@emotion/react").SerializedStyles;
+    readonly 'elevation.surface.sunken': import("@emotion/react").SerializedStyles;
+};
+export declare type BackgroundColor = keyof typeof backgroundColorMap;
+declare const shadowMap: {
+    readonly overflow: import("@emotion/react").SerializedStyles;
+    readonly 'overflow.perimeter': import("@emotion/react").SerializedStyles;
+    readonly 'overflow.spread': import("@emotion/react").SerializedStyles;
+    readonly overlay: import("@emotion/react").SerializedStyles;
+    readonly raised: import("@emotion/react").SerializedStyles;
+};
+export declare type Shadow = keyof typeof shadowMap;
+declare const textColorMap: {
+    readonly 'color.text': import("@emotion/react").SerializedStyles;
+    readonly 'accent.red': import("@emotion/react").SerializedStyles;
+    readonly 'accent.red.bolder': import("@emotion/react").SerializedStyles;
+    readonly 'accent.orange': import("@emotion/react").SerializedStyles;
+    readonly 'accent.orange.bolder': import("@emotion/react").SerializedStyles;
+    readonly 'accent.yellow': import("@emotion/react").SerializedStyles;
+    readonly 'accent.yellow.bolder': import("@emotion/react").SerializedStyles;
+    readonly 'accent.green': import("@emotion/react").SerializedStyles;
+    readonly 'accent.green.bolder': import("@emotion/react").SerializedStyles;
+    readonly 'accent.teal': import("@emotion/react").SerializedStyles;
+    readonly 'accent.teal.bolder': import("@emotion/react").SerializedStyles;
+    readonly 'accent.blue': import("@emotion/react").SerializedStyles;
+    readonly 'accent.blue.bolder': import("@emotion/react").SerializedStyles;
+    readonly 'accent.purple': import("@emotion/react").SerializedStyles;
+    readonly 'accent.purple.bolder': import("@emotion/react").SerializedStyles;
+    readonly 'accent.magenta': import("@emotion/react").SerializedStyles;
+    readonly 'accent.magenta.bolder': import("@emotion/react").SerializedStyles;
+    readonly 'accent.gray': import("@emotion/react").SerializedStyles;
+    readonly 'accent.gray.bolder': import("@emotion/react").SerializedStyles;
+    readonly disabled: import("@emotion/react").SerializedStyles;
+    readonly inverse: import("@emotion/react").SerializedStyles;
+    readonly selected: import("@emotion/react").SerializedStyles;
+    readonly brand: import("@emotion/react").SerializedStyles;
+    readonly danger: import("@emotion/react").SerializedStyles;
+    readonly warning: import("@emotion/react").SerializedStyles;
+    readonly 'warning.inverse': import("@emotion/react").SerializedStyles;
+    readonly success: import("@emotion/react").SerializedStyles;
+    readonly discovery: import("@emotion/react").SerializedStyles;
+    readonly information: import("@emotion/react").SerializedStyles;
+    readonly subtlest: import("@emotion/react").SerializedStyles;
+    readonly subtle: import("@emotion/react").SerializedStyles;
+};
+export declare type TextColor = keyof typeof textColorMap;
+/**
+ * @codegenEnd
+ */