@atlaskit/ds-explorations 2.3.2 → 2.4.0

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

@@ -0,0 +1,177 @@
+/** @jsx jsx */
+import { Children, forwardRef, Fragment, memo } from 'react';
+import { css, jsx } from '@emotion/react';
+
+/**
+ * @private
+ * @deprecated DSP-8009: This type is scheduled for deletion.
+ * Please use `Inline` from `@atlaskit/primitives` instead.
+ */
+
+var flexAlignItemsMap = {
+  center: css({
+    alignItems: 'center'
+  }),
+  baseline: css({
+    alignItems: 'baseline'
+  }),
+  flexStart: css({
+    alignItems: 'flex-start'
+  }),
+  flexEnd: css({
+    alignItems: 'flex-end'
+  }),
+  start: css({
+    alignItems: 'start'
+  }),
+  end: css({
+    alignItems: 'end'
+  })
+};
+var flexJustifyContentMap = {
+  center: css({
+    justifyContent: 'center'
+  }),
+  flexStart: css({
+    justifyContent: 'flex-start'
+  }),
+  'space-between': css({
+    justifyContent: 'space-between'
+  }),
+  flexEnd: css({
+    justifyContent: 'flex-end'
+  }),
+  start: css({
+    justifyContent: 'start'
+  }),
+  end: css({
+    justifyContent: 'end'
+  }),
+  spaceBetween: css({
+    justifyContent: 'space-between'
+  })
+};
+var flexWrapMap = {
+  wrap: css({
+    flexWrap: 'wrap'
+  })
+};
+var baseStyles = css({
+  display: 'flex',
+  boxSizing: 'border-box',
+  flexDirection: 'row'
+});
+var dividerStyles = css({
+  margin: "0 ".concat("var(--ds-space-negative-025, -2px)"),
+  color: "var(--ds-text-subtle, #42526E)",
+  pointerEvents: 'none',
+  userSelect: 'none'
+});
+var Divider = function Divider(_ref) {
+  var children = _ref.children;
+  return jsx("span", {
+    css: dividerStyles
+  }, children);
+};
+
+/**
+ * __Inline__
+ *
+ * Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
+ * Renders a `div` by default.
+ *
+ * @private
+ * @deprecated DSP-8009: This primitive is scheduled for deletion.
+ * Please use `Inline` from `@atlaskit/primitives` instead.
+ *
+ * @example
+ * ```tsx
+ * const App = () => (
+ *   <Inline gap="space.100">
+ *     <Button />
+ *     <Button />
+ *   </Inline>
+ * )
+ * ```
+ */
+var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var gap = _ref2.gap,
+    alignItems = _ref2.alignItems,
+    justifyContent = _ref2.justifyContent,
+    flexWrap = _ref2.flexWrap,
+    divider = _ref2.divider,
+    UNSAFE_style = _ref2.UNSAFE_style,
+    rawChildren = _ref2.children,
+    testId = _ref2.testId;
+  var dividerComponent = typeof divider === 'string' ? jsx(Divider, null, divider) : divider;
+  var children = divider ? Children.toArray(rawChildren).filter(Boolean).map(function (child, index) {
+    return jsx(Fragment, {
+      key: index
+    }, divider && index > 0 ? dividerComponent : null, child);
+  }) : rawChildren;
+  return jsx("div", {
+    style: UNSAFE_style,
+    css: [baseStyles, gap && columnGapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], flexWrap && flexWrapMap[flexWrap]],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Inline.displayName = 'Inline';
+export default Inline;
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::63747c8b92ba373ad2259fa1fff3f434>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["columnGap"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::298080e8024fb3eb37589721413e0156>>
+ */
+var columnGapMap = {
+  'space.0': css({
+    columnGap: "var(--ds-space-0, 0px)"
+  }),
+  'space.025': css({
+    columnGap: "var(--ds-space-025, 2px)"
+  }),
+  'space.050': css({
+    columnGap: "var(--ds-space-050, 4px)"
+  }),
+  'space.075': css({
+    columnGap: "var(--ds-space-075, 6px)"
+  }),
+  'space.100': css({
+    columnGap: "var(--ds-space-100, 8px)"
+  }),
+  'space.1000': css({
+    columnGap: "var(--ds-space-1000, 80px)"
+  }),
+  'space.150': css({
+    columnGap: "var(--ds-space-150, 12px)"
+  }),
+  'space.200': css({
+    columnGap: "var(--ds-space-200, 16px)"
+  }),
+  'space.250': css({
+    columnGap: "var(--ds-space-250, 20px)"
+  }),
+  'space.300': css({
+    columnGap: "var(--ds-space-300, 24px)"
+  }),
+  'space.400': css({
+    columnGap: "var(--ds-space-400, 32px)"
+  }),
+  'space.500': css({
+    columnGap: "var(--ds-space-500, 40px)"
+  }),
+  'space.600': css({
+    columnGap: "var(--ds-space-600, 48px)"
+  }),
+  'space.800': css({
+    columnGap: "var(--ds-space-800, 64px)"
+  })
+};
+
+/**
+ * @codegenEnd
+ */

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

@@ -0,0 +1,143 @@
+/** @jsx jsx */
+import { forwardRef, memo } from 'react';
+import { css, jsx } from '@emotion/react';
+
+/**
+ * @private
+ * @deprecated DSP-8009: This type is scheduled for deletion.
+ * Please use `Stack` from `@atlaskit/primitives` instead.
+ */
+
+var flexAlignItemsMap = {
+  center: css({
+    alignItems: 'center'
+  }),
+  baseline: css({
+    alignItems: 'baseline'
+  }),
+  flexStart: css({
+    alignItems: 'flex-start'
+  }),
+  flexEnd: css({
+    alignItems: 'flex-end'
+  }),
+  start: css({
+    alignItems: 'start'
+  }),
+  end: css({
+    alignItems: 'end'
+  })
+};
+var flexJustifyContentMap = {
+  center: css({
+    justifyContent: 'center'
+  }),
+  flexStart: css({
+    justifyContent: 'flex-start'
+  }),
+  flexEnd: css({
+    justifyContent: 'flex-end'
+  }),
+  start: css({
+    justifyContent: 'start'
+  }),
+  end: css({
+    justifyContent: 'end'
+  })
+};
+var flexWrapMap = {
+  wrap: css({
+    flexWrap: 'wrap'
+  })
+};
+var baseStyles = css({
+  display: 'flex',
+  boxSizing: 'border-box',
+  flexDirection: 'column'
+});
+
+/**
+ * __Stack__
+ *
+ * Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
+ * Renders a `div` by default.
+ *
+ * @private
+ * @deprecated DSP-8009: This primitive is scheduled for deletion.
+ * Please use `Stack` from `@atlaskit/primitives` instead.
+ *
+ */
+var Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var gap = _ref.gap,
+    alignItems = _ref.alignItems,
+    justifyContent = _ref.justifyContent,
+    flexWrap = _ref.flexWrap,
+    children = _ref.children,
+    UNSAFE_style = _ref.UNSAFE_style,
+    testId = _ref.testId;
+  return jsx("div", {
+    style: UNSAFE_style,
+    css: [baseStyles, gap && rowGapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], flexWrap && flexWrapMap[flexWrap]],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Stack.displayName = 'Stack';
+export default Stack;
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::02ffa7c4ee52871441d288f44a054685>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["rowGap"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::298080e8024fb3eb37589721413e0156>>
+ */
+var rowGapMap = {
+  'space.0': css({
+    rowGap: "var(--ds-space-0, 0px)"
+  }),
+  'space.025': css({
+    rowGap: "var(--ds-space-025, 2px)"
+  }),
+  'space.050': css({
+    rowGap: "var(--ds-space-050, 4px)"
+  }),
+  'space.075': css({
+    rowGap: "var(--ds-space-075, 6px)"
+  }),
+  'space.100': css({
+    rowGap: "var(--ds-space-100, 8px)"
+  }),
+  'space.1000': css({
+    rowGap: "var(--ds-space-1000, 80px)"
+  }),
+  'space.150': css({
+    rowGap: "var(--ds-space-150, 12px)"
+  }),
+  'space.200': css({
+    rowGap: "var(--ds-space-200, 16px)"
+  }),
+  'space.250': css({
+    rowGap: "var(--ds-space-250, 20px)"
+  }),
+  'space.300': css({
+    rowGap: "var(--ds-space-300, 24px)"
+  }),
+  'space.400': css({
+    rowGap: "var(--ds-space-400, 32px)"
+  }),
+  'space.500': css({
+    rowGap: "var(--ds-space-500, 40px)"
+  }),
+  'space.600': css({
+    rowGap: "var(--ds-space-600, 48px)"
+  }),
+  'space.800': css({
+    rowGap: "var(--ds-space-800, 64px)"
+  })
+};
+
+/**
+ * @codegenEnd
+ */

package/dist/esm/index.js

@@ -1,2 +1,5 @@
+export { default as UNSAFE_Box } from './components/box.partial';
 export { default as UNSAFE_Text } from './components/text.partial';
+export { default as UNSAFE_Inline } from './components/inline.partial';
+export { default as UNSAFE_Stack } from './components/stack.partial';
 export { default as UNSAFE_InteractionSurface } from './components/interaction-surface.partial';

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

@@ -0,0 +1,357 @@
+/** @jsx jsx */
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, FC, ReactElement, ReactNode } from 'react';
+import { Layer } from '../constants';
+import type { BasePrimitiveProps } from './types';
+/**
+ * @private
+ * @deprecated DSP-8009: This type is scheduled for deletion.
+ * Please use `Box` from `@atlaskit/primitives` instead.
+ */
+export type BoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className' | 'style'> & BasePrimitiveProps & BoxPropsBase<T>;
+type BoxPropsBase<T extends ElementType> = {
+    /**
+     * The DOM element to render as the Box. Defaults to `div`.
+     */
+    as?: T;
+    /**
+     * Elements to be rendered inside the Box.
+     */
+    children?: ReactNode;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * Defines the main axis direction.
+     * @deprecated
+     */
+    flexDirection?: FlexDirection;
+    /**
+     * Used to align children along the cross axis.
+     * @deprecated
+     */
+    alignItems?: FlexAlignItems;
+    /**
+     * Used to align children along the main axis.
+     * @deprecated
+     */
+    justifyContent?: FlexJustifyContent;
+    /**
+     * Defines what happens if content overflows the box.
+     */
+    overflow?: Overflow;
+    /**
+     * Shorthand for `paddingBlock` and `paddingInline` together.
+     *
+     * @see paddingBlock
+     * @see paddingInline
+     */
+    padding?: Padding;
+    /**
+     * Token representing CSS `paddingBlock`.
+     */
+    paddingBlock?: PaddingBlock;
+    /**
+     * Token representing CSS `paddingInline`.
+     */
+    paddingInline?: PaddingInline;
+    /**
+     * 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'];
+};
+type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BoxProps<T>) => ReactElement | null) & FC<BoxProps<T>>;
+/**
+ * __Box__
+ *
+ * Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
+ * Renders a `div` by default.
+ *
+ * @private
+ * @deprecated DSP-8009: This primitive is scheduled for deletion.
+ * Please use `Box` from `@atlaskit/primitives` instead.
+ */
+export declare const Box: BoxComponent;
+export default Box;
+type BorderStyle = keyof typeof borderStyleMap;
+declare const borderStyleMap: {
+    none: import("@emotion/react").SerializedStyles;
+    solid: import("@emotion/react").SerializedStyles;
+    dashed: import("@emotion/react").SerializedStyles;
+    dotted: import("@emotion/react").SerializedStyles;
+};
+type BorderWidth = keyof typeof borderWidthMap;
+declare const borderWidthMap: {
+    '0px': import("@emotion/react").SerializedStyles;
+    '1px': import("@emotion/react").SerializedStyles;
+    '2px': import("@emotion/react").SerializedStyles;
+    '3px': import("@emotion/react").SerializedStyles;
+};
+type BorderRadius = keyof typeof borderRadiusMap;
+declare const borderRadiusMap: {
+    normal: import("@emotion/react").SerializedStyles;
+    rounded: import("@emotion/react").SerializedStyles;
+    badge: import("@emotion/react").SerializedStyles;
+};
+/**
+ * @experimental - this is likely to be removed
+ */
+type FlexDirection = keyof typeof flexDirectionMap;
+declare const flexDirectionMap: {
+    column: import("@emotion/react").SerializedStyles;
+    row: import("@emotion/react").SerializedStyles;
+};
+/**
+ * @experimental - this is likely to be removed
+ */
+type FlexAlignItems = keyof typeof flexAlignItemsMap;
+declare const flexAlignItemsMap: {
+    center: import("@emotion/react").SerializedStyles;
+    baseline: import("@emotion/react").SerializedStyles;
+    flexStart: import("@emotion/react").SerializedStyles;
+    flexEnd: import("@emotion/react").SerializedStyles;
+    start: import("@emotion/react").SerializedStyles;
+    end: import("@emotion/react").SerializedStyles;
+};
+/**
+ * @experimental - this is likely to be removed
+ */
+type FlexJustifyContent = keyof typeof flexJustifyContentMap;
+declare const flexJustifyContentMap: {
+    center: import("@emotion/react").SerializedStyles;
+    flexStart: import("@emotion/react").SerializedStyles;
+    flexEnd: import("@emotion/react").SerializedStyles;
+    start: import("@emotion/react").SerializedStyles;
+    end: import("@emotion/react").SerializedStyles;
+};
+type Display = keyof typeof displayMap;
+declare const displayMap: {
+    block: import("@emotion/react").SerializedStyles;
+    inline: import("@emotion/react").SerializedStyles;
+    flex: import("@emotion/react").SerializedStyles;
+    inlineFlex: import("@emotion/react").SerializedStyles;
+    inlineBlock: import("@emotion/react").SerializedStyles;
+};
+type Position = keyof typeof positionMap;
+declare const positionMap: {
+    absolute: import("@emotion/react").SerializedStyles;
+    fixed: import("@emotion/react").SerializedStyles;
+    relative: import("@emotion/react").SerializedStyles;
+    static: import("@emotion/react").SerializedStyles;
+};
+type Overflow = keyof typeof overflowMap;
+declare const overflowMap: {
+    auto: import("@emotion/react").SerializedStyles;
+    hidden: import("@emotion/react").SerializedStyles;
+};
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::327e769aaa3da9422a919a0ca9490070>>
+ * @codegenId dimensions
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["width", "height"]
+ */
+declare const widthMap: {
+    '100%': import("@emotion/react").SerializedStyles;
+    'size.100': import("@emotion/react").SerializedStyles;
+    'size.1000': import("@emotion/react").SerializedStyles;
+    'size.200': import("@emotion/react").SerializedStyles;
+    'size.300': import("@emotion/react").SerializedStyles;
+    'size.400': import("@emotion/react").SerializedStyles;
+    'size.500': import("@emotion/react").SerializedStyles;
+    'size.600': import("@emotion/react").SerializedStyles;
+};
+export type Width = keyof typeof widthMap;
+declare const heightMap: {
+    '100%': import("@emotion/react").SerializedStyles;
+    'size.100': import("@emotion/react").SerializedStyles;
+    'size.1000': import("@emotion/react").SerializedStyles;
+    'size.200': import("@emotion/react").SerializedStyles;
+    'size.300': import("@emotion/react").SerializedStyles;
+    'size.400': import("@emotion/react").SerializedStyles;
+    'size.500': import("@emotion/react").SerializedStyles;
+    'size.600': import("@emotion/react").SerializedStyles;
+};
+export type Height = keyof typeof heightMap;
+/**
+ * @codegenEnd
+ */
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::8aa9e47916dc6f6d72f32999f48fbd27>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["padding", "paddingBlock", "paddingInline"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::298080e8024fb3eb37589721413e0156>>
+ */
+declare const paddingMap: {
+    'space.0': import("@emotion/react").SerializedStyles;
+    'space.025': import("@emotion/react").SerializedStyles;
+    'space.050': import("@emotion/react").SerializedStyles;
+    'space.075': import("@emotion/react").SerializedStyles;
+    'space.100': import("@emotion/react").SerializedStyles;
+    'space.1000': import("@emotion/react").SerializedStyles;
+    'space.150': import("@emotion/react").SerializedStyles;
+    'space.200': import("@emotion/react").SerializedStyles;
+    'space.250': import("@emotion/react").SerializedStyles;
+    'space.300': import("@emotion/react").SerializedStyles;
+    'space.400': import("@emotion/react").SerializedStyles;
+    'space.500': import("@emotion/react").SerializedStyles;
+    'space.600': import("@emotion/react").SerializedStyles;
+    'space.800': import("@emotion/react").SerializedStyles;
+};
+export type Padding = keyof typeof paddingMap;
+declare const paddingBlockMap: {
+    'space.0': import("@emotion/react").SerializedStyles;
+    'space.025': import("@emotion/react").SerializedStyles;
+    'space.050': import("@emotion/react").SerializedStyles;
+    'space.075': import("@emotion/react").SerializedStyles;
+    'space.100': import("@emotion/react").SerializedStyles;
+    'space.1000': import("@emotion/react").SerializedStyles;
+    'space.150': import("@emotion/react").SerializedStyles;
+    'space.200': import("@emotion/react").SerializedStyles;
+    'space.250': import("@emotion/react").SerializedStyles;
+    'space.300': import("@emotion/react").SerializedStyles;
+    'space.400': import("@emotion/react").SerializedStyles;
+    'space.500': import("@emotion/react").SerializedStyles;
+    'space.600': import("@emotion/react").SerializedStyles;
+    'space.800': import("@emotion/react").SerializedStyles;
+};
+export type PaddingBlock = keyof typeof paddingBlockMap;
+declare const paddingInlineMap: {
+    'space.0': import("@emotion/react").SerializedStyles;
+    'space.025': import("@emotion/react").SerializedStyles;
+    'space.050': import("@emotion/react").SerializedStyles;
+    'space.075': import("@emotion/react").SerializedStyles;
+    'space.100': import("@emotion/react").SerializedStyles;
+    'space.1000': import("@emotion/react").SerializedStyles;
+    'space.150': import("@emotion/react").SerializedStyles;
+    'space.200': import("@emotion/react").SerializedStyles;
+    'space.250': import("@emotion/react").SerializedStyles;
+    'space.300': import("@emotion/react").SerializedStyles;
+    'space.400': import("@emotion/react").SerializedStyles;
+    'space.500': import("@emotion/react").SerializedStyles;
+    'space.600': import("@emotion/react").SerializedStyles;
+    'space.800': import("@emotion/react").SerializedStyles;
+};
+export type PaddingInline = keyof typeof paddingInlineMap;
+/**
+ * @codegenEnd
+ */
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::1c951d1c65e5ffddea3f0a92075d4614>>
+ * @codegenId colors
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["border", "background", "shadow"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f6a616f7ea03ec40c148fc83050d073b>>
+ */
+declare const borderColorMap: {
+    readonly 'color.border': 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 type BorderColor = keyof typeof borderColorMap;
+declare const backgroundColorMap: {
+    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.subtlest': import("@emotion/react").SerializedStyles;
+    readonly 'brand.bold': import("@emotion/react").SerializedStyles;
+    readonly 'brand.boldest': 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 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 type Shadow = keyof typeof shadowMap;
+/**
+ * @codegenEnd
+ */