@atlaskit/primitives 1.0.0 → 1.0.2

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

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 import { ElementType, ReactNode } from 'react';
 import { type Space } from '../xcss/style-maps.partial';
-import { type InlineXCSS } from '../xcss/xcss';
-export interface InlineProps<T extends ElementType = 'div'> {
+import { BasePrimitiveProps } from './types';
+export type InlineProps<T extends ElementType = 'div'> = {
     /**
      * The DOM element to render as the Inline. Defaults to `div`.
      */
@@ -40,14 +40,6 @@ export interface InlineProps<T extends ElementType = 'div'> {
      * Renders a separator string between each child.
      */
     separator?: string;
-    /**
-     * Safe subset of styles that can be applied as a classname.
-     */
-    xcss?: InlineXCSS | Array<InlineXCSS | false | undefined>;
-    /**
-     * A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.
-     */
-    testId?: string;
     /**
      * Elements to be rendered inside the Inline.
      */
@@ -56,7 +48,7 @@ export interface InlineProps<T extends ElementType = 'div'> {
      * Forwarded ref element
      */
     ref?: React.ComponentPropsWithRef<T>['ref'];
-}
+} & BasePrimitiveProps;
 export type AlignInline = 'start' | 'center' | 'end';
 export type AlignBlock = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
 export type Spread = 'space-between';
@@ -76,5 +68,51 @@ export type Grow = 'hug' | 'fill';
  * ```
  *
  */
-declare const Inline: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<InlineProps<ElementType<any>>, "as" | "children" | "testId" | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "space" | "rowSpace" | "separator" | "xcss"> & import("react").RefAttributes<any>>>;
+declare const Inline: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<{
+    /**
+     * The DOM element to render as the Inline. Defaults to `div`.
+     */
+    as?: "div" | "li" | "ol" | "span" | "ul" | undefined;
+    /**
+     * Used to align children along the main axis.
+     */
+    alignBlock?: AlignBlock | undefined;
+    /**
+     * Used to align children along the cross axis.
+     */
+    alignInline?: AlignInline | undefined;
+    /**
+     * Used to set whether children are forced onto one line or will wrap onto multiple lines.
+     */
+    shouldWrap?: boolean | undefined;
+    /**
+     * Used to distribute the children along the main axis.
+     */
+    spread?: "space-between" | undefined;
+    /**
+     * Used to set whether the container should grow to fill the available space.
+     */
+    grow?: Grow | undefined;
+    /**
+     * Represents the space between each child.
+     */
+    space?: "space.0" | "space.025" | "space.050" | "space.075" | "space.100" | "space.150" | "space.200" | "space.250" | "space.300" | "space.400" | "space.500" | "space.600" | "space.800" | "space.1000" | undefined;
+    /**
+     * Represents the space between rows when content wraps.
+     * Used to override the `space` value in between rows.
+     */
+    rowSpace?: "space.0" | "space.025" | "space.050" | "space.075" | "space.100" | "space.150" | "space.200" | "space.250" | "space.300" | "space.400" | "space.500" | "space.600" | "space.800" | "space.1000" | undefined;
+    /**
+     * Renders a separator string between each child.
+     */
+    separator?: string | undefined;
+    /**
+     * Elements to be rendered inside the Inline.
+     */
+    children: ReactNode;
+    /**
+     * Forwarded ref element
+     */
+    ref?: any;
+} & BasePrimitiveProps, "as" | "children" | keyof BasePrimitiveProps | "space" | "separator" | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "rowSpace"> & import("react").RefAttributes<any>>>;
 export default Inline;

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

@@ -1,7 +1,8 @@
 /** @jsx jsx */
 import { ElementType, ReactNode } from 'react';
 import { type Space } from '../xcss/style-maps.partial';
-export interface StackProps<T extends ElementType = 'div'> {
+import type { BasePrimitiveProps } from './types';
+export type StackProps<T extends ElementType = 'div'> = {
     /**
      * The DOM element to render as the Stack. Defaults to `div`.
      */
@@ -26,10 +27,6 @@ export interface StackProps<T extends ElementType = 'div'> {
      * Represents the space between each child.
      */
     space?: Space;
-    /**
-     * A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.
-     */
-    testId?: string;
     /**
      * Elements to be rendered inside the Stack.
      */
@@ -38,7 +35,7 @@ export interface StackProps<T extends ElementType = 'div'> {
      * Forwarded ref element
      */
     ref?: React.ComponentPropsWithRef<T>['ref'];
-}
+} & BasePrimitiveProps;
 export type AlignInline = 'start' | 'center' | 'end';
 export type AlignBlock = 'start' | 'center' | 'end';
 export type Spread = 'space-between';
@@ -46,7 +43,7 @@ export type Grow = 'hug' | 'fill';
 /**
  * __Stack__
  *
- * Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
+ * Stack is a primitive component based on flexbox that manages the block layout of direct children.
  *
  * @example
  * ```tsx
@@ -57,5 +54,38 @@ export type Grow = 'hug' | 'fill';
  * ```
  *
  */
-declare const Stack: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<StackProps<ElementType<any>>, "as" | "children" | "testId" | "alignInline" | "alignBlock" | "spread" | "grow" | "space"> & import("react").RefAttributes<any>>>;
+declare const Stack: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<{
+    /**
+     * The DOM element to render as the Stack. Defaults to `div`.
+     */
+    as?: "div" | "ol" | "span" | "ul" | undefined;
+    /**
+     * Used to align children along the main axis.
+     */
+    alignBlock?: AlignBlock | undefined;
+    /**
+     * Used to align children along the cross axis.
+     */
+    alignInline?: AlignInline | undefined;
+    /**
+     * Used to distribute the children along the main axis.
+     */
+    spread?: "space-between" | undefined;
+    /**
+     * Used to set whether the container should grow to fill the available space.
+     */
+    grow?: Grow | undefined;
+    /**
+     * Represents the space between each child.
+     */
+    space?: "space.0" | "space.025" | "space.050" | "space.075" | "space.100" | "space.150" | "space.200" | "space.250" | "space.300" | "space.400" | "space.500" | "space.600" | "space.800" | "space.1000" | undefined;
+    /**
+     * Elements to be rendered inside the Stack.
+     */
+    children: ReactNode;
+    /**
+     * Forwarded ref element
+     */
+    ref?: any;
+} & BasePrimitiveProps, "as" | "children" | keyof BasePrimitiveProps | "space" | "alignInline" | "alignBlock" | "spread" | "grow"> & import("react").RefAttributes<any>>>;
 export default Stack;

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

@@ -9,12 +9,8 @@ export type BasePrimitiveProps = {
      * Inline styles to be applied to the primitive.
      */
     style?: CSSProperties;
-};
-type BoxXCSSArray = Array<BoxXCSSArray | BoxXCSS | false | undefined>;
-export type PublicBoxPropsBase = {
     /**
-     * Safe subset of styles that can be applied as a classname.
+     * Apply a subset of permitted styles, powered by Atlassian Design System tokens.
      */
-    xcss?: BoxXCSS | BoxXCSSArray;
+    xcss?: BoxXCSS | BoxXCSS[];
 };
-export {};

package/dist/types/index.d.ts

@@ -1,6 +1,9 @@
+export type { Dimension, BackgroundColor, Space, BorderColor, BorderRadius, BorderWidth, Layer, Shadow, } from './xcss/style-maps.partial';
 export { default as Box, type BoxProps } from './components/box';
 export { default as Pressable, type PressableProps, } from './components/pressable';
 export { default as Inline, type InlineProps } from './components/inline';
 export { xcss } from './xcss/xcss';
 export { default as Stack, type StackProps } from './components/stack';
-export { UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG, type Breakpoint, } from './responsive';
+export { default as Flex, type FlexProps } from './components/flex';
+export { default as Grid, type GridProps } from './components/grid';
+export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG, type Breakpoint, } from './responsive';

package/dist/types/responsive/media-helper.d.ts

@@ -13,10 +13,25 @@ export declare const UNSAFE_media: {
          * `above.xxs` is redundant and no media query should be used, but it's included for programatic purposes…
          */
         readonly xxs: "@media all";
+        /**
+         * Used for mobile viewports.
+         */
         readonly xs: "@media (min-width: 30rem)";
+        /**
+         * Used for tablet viewports.
+         */
         readonly sm: "@media (min-width: 48rem)";
+        /**
+         * Used for laptop viewports.
+         */
         readonly md: "@media (min-width: 64rem)";
+        /**
+         * Used for desktop viewports.
+         */
         readonly lg: "@media (min-width: 90rem)";
+        /**
+         * Used for wide screen desktop viewports.
+         */
         readonly xl: "@media (min-width: 110rem)";
     };
     /**
@@ -66,10 +81,25 @@ export declare const media: {
          * `above.xxs` is redundant and no media query should be used, but it's included for programatic purposes…
          */
         readonly xxs: "@media all";
+        /**
+         * Used for mobile viewports.
+         */
         readonly xs: "@media (min-width: 30rem)";
+        /**
+         * Used for tablet viewports.
+         */
         readonly sm: "@media (min-width: 48rem)";
+        /**
+         * Used for laptop viewports.
+         */
         readonly md: "@media (min-width: 64rem)";
+        /**
+         * Used for desktop viewports.
+         */
         readonly lg: "@media (min-width: 90rem)";
+        /**
+         * Used for wide screen desktop viewports.
+         */
         readonly xl: "@media (min-width: 110rem)";
     };
 };

package/dist/types/xcss/xcss.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { css as cssEmotion } from '@emotion/react';
-import { CSSPropertiesWithMultiValues, SerializedStyles } from '@emotion/serialize';
+import type { CSSPropertiesWithMultiValues, SerializedStyles } from '@emotion/serialize';
 import type * as CSS from 'csstype';
-import { Box, Inline } from '../index';
+import { Box } from '../index';
 import type { MediaQuery } from '../responsive/types';
 import { TokenisedProps } from './style-maps.partial';
 declare const uniqueSymbol: unique symbol;
@@ -23,11 +23,11 @@ type ScopedSafeCSSObject<T extends keyof SafeCSSObject> = Pick<SafeCSSObject, T>
 declare const boxWrapper: (style: any) => {
     readonly [uniqueSymbol]: BoxStyles;
 };
-declare const inlineWrapper: (style: any) => {
-    readonly [uniqueSymbol]: InlineStyles;
+declare const spaceWrapper: (style: any) => {
+    readonly [uniqueSymbol]: SpaceStyles;
 };
-type XCSS = ReturnType<typeof boxWrapper> | ReturnType<typeof inlineWrapper>;
-type XCSSArray = Array<XCSS | XCSSArray | false | undefined>;
+type XCSS = ReturnType<typeof boxWrapper> | ReturnType<typeof spaceWrapper>;
+type XCSSArray = Array<XCSS | false | undefined>;
 type AllowedBoxStyles = keyof SafeCSSObject;
 type Spacing = 'columnGap' | 'gap' | 'inset' | 'insetBlock' | 'insetBlockEnd' | 'insetBlockStart' | 'insetInline' | 'insetInlineEnd' | 'insetInlineStart' | 'margin' | 'marginBlock' | 'marginBlockEnd' | 'marginBlockStart' | 'marginInline' | 'marginInlineEnd' | 'marginInlineStart' | 'outlineOffset' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingBottom' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'rowGap';
 /**
@@ -42,21 +42,18 @@ type Spacing = 'columnGap' | 'gap' | 'inset' | 'insetBlock' | 'insetBlockEnd' |
  * })
  * ```
  */
-export declare function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(style: Primitive extends typeof Box ? ScopedSafeCSSObject<AllowedBoxStyles> | ScopedSafeCSSObject<AllowedBoxStyles>[] : Primitive extends typeof Inline ? ScopedSafeCSSObject<Spacing> | ScopedSafeCSSObject<Spacing>[] : never): {
-    readonly [uniqueSymbol]: Primitive extends (<T extends import("react").ElementType<any> = "div">(props: import("../index").BoxProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null) & import("react").FC<import("../index").BoxProps<"div">> ? BoxStyles : Primitive extends import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<import("../index").InlineProps<import("react").ElementType<any>>, "as" | "children" | "testId" | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "space" | "rowSpace" | "separator" | "xcss"> & import("react").RefAttributes<any>>> ? InlineStyles : never;
+export declare function xcss<Primitive extends typeof Box | void = typeof Box>(style: Primitive extends typeof Box ? ScopedSafeCSSObject<AllowedBoxStyles> | ScopedSafeCSSObject<AllowedBoxStyles>[] : Primitive extends void ? ScopedSafeCSSObject<Spacing> | ScopedSafeCSSObject<Spacing>[] : never): {
+    readonly [uniqueSymbol]: Primitive extends (<T extends import("react").ElementType<any> = "div">(props: import("../index").BoxProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null) & import("react").FC<import("../index").BoxProps<"div">> ? BoxStyles : Primitive extends void ? SpaceStyles : never;
 };
 declare const boxTag: unique symbol;
+declare const spaceTag: unique symbol;
 export type BoxStyles = SerializedStyles & {
     [boxTag]: true;
 };
+export type SpaceStyles = SerializedStyles & {
+    [spaceTag]: true;
+};
 export type BoxXCSS = {
     readonly [uniqueSymbol]: BoxStyles;
-};
-declare const inlineTag: unique symbol;
-export type InlineStyles = SerializedStyles & {
-    [inlineTag]: true;
-};
-export type InlineXCSS = {
-    readonly [uniqueSymbol]: InlineStyles;
-};
+} | false | undefined;
 export {};

package/dist/types-ts4.5/components/box.d.ts

@@ -1,8 +1,7 @@
 /** @jsx jsx */
 import { ElementType, FC, ReactElement } from 'react';
 import { BaseBoxProps } from './internal/base-box';
-import type { PublicBoxPropsBase } from './types';
-export type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'className'> & PublicBoxPropsBase;
+export type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'className'>;
 type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BoxProps<T>) => ReactElement | null) & FC<BoxProps<T>>;
 /**
  * __Box__

package/dist/types-ts4.5/components/flex.d.ts

@@ -0,0 +1,137 @@
+/** @jsx jsx */
+import { ElementType, ReactNode } from 'react';
+import { type Space } from '../xcss/style-maps.partial';
+import type { BasePrimitiveProps } from './types';
+export type FlexProps<T extends ElementType = 'div'> = {
+    /**
+     * The DOM element to render as the Flex. Defaults to `div`.
+     */
+    as?: 'div' | 'span' | 'ul' | 'ol' | 'li';
+    /**
+     * Used to align children along the main axis.
+     */
+    justifyContent?: JustifyContent;
+    /**
+     * Used to align children along the cross axis.
+     */
+    alignItems?: AlignItems;
+    /**
+     * Represents the space between each child.
+     */
+    columnGap?: Space;
+    /**
+     * Represents the space between each child.
+     */
+    gap?: Space;
+    /**
+     * Represents the space between each child.
+     */
+    rowGap?: Space;
+    /**
+     * Represents the flex direction property of CSS flexbox.
+     */
+    direction?: Direction;
+    /**
+     * Represents the flex wrap property of CSS flexbox.
+     */
+    wrap?: Wrap;
+    /**
+     * Elements to be rendered inside the Flex.
+     */
+    children: ReactNode;
+    /**
+     * Forwarded ref element
+     */
+    ref?: React.ComponentPropsWithRef<T>['ref'];
+} & BasePrimitiveProps;
+export type AlignItems = keyof typeof alignItemsMap;
+export type JustifyContent = keyof typeof justifyContentMap;
+export type Direction = keyof typeof flexDirectionMap;
+export type Wrap = keyof typeof flexWrapMap;
+declare const justifyContentMap: {
+    readonly start: import("@emotion/react").SerializedStyles;
+    readonly center: import("@emotion/react").SerializedStyles;
+    readonly end: import("@emotion/react").SerializedStyles;
+    readonly 'space-between': import("@emotion/react").SerializedStyles;
+    readonly 'space-around': import("@emotion/react").SerializedStyles;
+    readonly 'space-evenly': import("@emotion/react").SerializedStyles;
+    readonly stretch: import("@emotion/react").SerializedStyles;
+};
+declare const flexDirectionMap: {
+    readonly column: import("@emotion/react").SerializedStyles;
+    readonly row: import("@emotion/react").SerializedStyles;
+};
+declare const flexWrapMap: {
+    readonly wrap: import("@emotion/react").SerializedStyles;
+    readonly nowrap: import("@emotion/react").SerializedStyles;
+};
+declare const alignItemsMap: {
+    readonly start: import("@emotion/react").SerializedStyles;
+    readonly center: import("@emotion/react").SerializedStyles;
+    readonly baseline: import("@emotion/react").SerializedStyles;
+    readonly end: import("@emotion/react").SerializedStyles;
+    readonly stretch: import("@emotion/react").SerializedStyles;
+};
+/**
+ * __Flex__
+ *
+ * `Flex` is a primitive component that implements the CSS Flexbox API.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/flex/examples)
+ * - [Code](https://atlassian.design/components/primitives/flex/code)
+ *
+ * @example
+ * ```tsx
+ * import { Flex, Box } from '@atlaskit/primitives'
+ *
+ * const Component = () => (
+ *   <Flex direction="column">
+ *     <Box padding="space.100" backgroundColor="neutral"></Box>
+ *     <Box padding="space.100" backgroundColor="neutral"></Box>
+ *   </Flex>
+ * )
+ * ```
+ */
+declare const Flex: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<{
+    /**
+     * The DOM element to render as the Flex. Defaults to `div`.
+     */
+    as?: "div" | "li" | "ol" | "span" | "ul" | undefined;
+    /**
+     * Used to align children along the main axis.
+     */
+    justifyContent?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | undefined;
+    /**
+     * Used to align children along the cross axis.
+     */
+    alignItems?: "stretch" | "center" | "end" | "start" | "baseline" | undefined;
+    /**
+     * Represents the space between each child.
+     */
+    columnGap?: "space.0" | "space.025" | "space.050" | "space.075" | "space.100" | "space.150" | "space.200" | "space.250" | "space.300" | "space.400" | "space.500" | "space.600" | "space.800" | "space.1000" | undefined;
+    /**
+     * Represents the space between each child.
+     */
+    gap?: "space.0" | "space.025" | "space.050" | "space.075" | "space.100" | "space.150" | "space.200" | "space.250" | "space.300" | "space.400" | "space.500" | "space.600" | "space.800" | "space.1000" | undefined;
+    /**
+     * Represents the space between each child.
+     */
+    rowGap?: "space.0" | "space.025" | "space.050" | "space.075" | "space.100" | "space.150" | "space.200" | "space.250" | "space.300" | "space.400" | "space.500" | "space.600" | "space.800" | "space.1000" | undefined;
+    /**
+     * Represents the flex direction property of CSS flexbox.
+     */
+    direction?: "column" | "row" | undefined;
+    /**
+     * Represents the flex wrap property of CSS flexbox.
+     */
+    wrap?: "nowrap" | "wrap" | undefined;
+    /**
+     * Elements to be rendered inside the Flex.
+     */
+    children: ReactNode;
+    /**
+     * Forwarded ref element
+     */
+    ref?: any;
+} & BasePrimitiveProps, "gap" | "rowGap" | "columnGap" | "alignItems" | "direction" | "justifyContent" | "as" | "children" | keyof BasePrimitiveProps | "wrap"> & import("react").RefAttributes<any>>>;
+export default Flex;

package/dist/types-ts4.5/components/grid.d.ts

@@ -0,0 +1,154 @@
+/** @jsx jsx */
+import { ElementType, ReactNode } from 'react';
+import { type Space } from '../xcss/style-maps.partial';
+import type { BasePrimitiveProps } from './types';
+export type GridProps<T extends ElementType = 'div'> = {
+    /**
+     * The DOM element to render as the Flex. Defaults to `div`.
+     */
+    as?: 'div' | 'span' | 'ul' | 'ol';
+    /**
+     * Used to align children along the inline axis.
+     */
+    justifyContent?: JustifyContent;
+    /**
+     * Used to align children along the block axis.
+     */
+    alignItems?: AlignItems;
+    /**
+     * Represents the space between each column.
+     */
+    columnGap?: Space;
+    /**
+     * Represents the space between each child across both axes.
+     */
+    gap?: Space;
+    /**
+     * Represents the space between each row.
+     */
+    rowGap?: Space;
+    /**
+     * Specifies how auto-placed items get flowed into the grid. CSS `grid-auto-flow`.
+     */
+    autoFlow?: AutoFlow;
+    /**
+     * CSS `grid-template-rows`.
+     */
+    templateRows?: string;
+    /**
+     * CSS `grid-template-columns`.
+     */
+    templateColumns?: string;
+    /**
+     * CSS `grid-template-areas`.
+     *
+     * Each item in the passed array is a grid row.
+     */
+    templateAreas?: string[];
+    /**
+     * Elements to be rendered inside the grid. Required as a grid without children should not be a grid.
+     */
+    children: ReactNode;
+    /**
+     * Forwarded ref element
+     */
+    ref?: React.ComponentPropsWithRef<T>['ref'];
+} & BasePrimitiveProps;
+export type JustifyContent = keyof typeof justifyContentMap;
+export type AlignItems = keyof typeof alignItemsMap;
+declare const justifyContentMap: {
+    readonly start: import("@emotion/react").SerializedStyles;
+    readonly center: import("@emotion/react").SerializedStyles;
+    readonly end: import("@emotion/react").SerializedStyles;
+    readonly 'space-between': import("@emotion/react").SerializedStyles;
+    readonly 'space-around': import("@emotion/react").SerializedStyles;
+    readonly 'space-evenly': import("@emotion/react").SerializedStyles;
+    readonly stretch: import("@emotion/react").SerializedStyles;
+};
+declare const alignItemsMap: {
+    readonly start: import("@emotion/react").SerializedStyles;
+    readonly center: import("@emotion/react").SerializedStyles;
+    readonly baseline: import("@emotion/react").SerializedStyles;
+    readonly end: import("@emotion/react").SerializedStyles;
+};
+type AutoFlow = keyof typeof gridAutoFlowMap;
+declare const gridAutoFlowMap: {
+    readonly row: import("@emotion/react").SerializedStyles;
+    readonly column: import("@emotion/react").SerializedStyles;
+    readonly dense: import("@emotion/react").SerializedStyles;
+    readonly 'row dense': import("@emotion/react").SerializedStyles;
+    readonly 'column dense': import("@emotion/react").SerializedStyles;
+};
+/**
+ * __Grid__
+ *
+ * `Grid` is a primitive component that implements the CSS Grid API.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/grid/examples)
+ * - [Code](https://atlassian.design/components/primitives/grid/code)
+ *
+ * @example
+ * ```tsx
+ * import { Grid, Box } from '@atlaskit/primitives'
+ *
+ * const Component = () => (
+ *   <Grid gap="space.100" gridColumns="1fr 1fr">
+ *     <Box padding="space.100" backgroundColor="neutral"></Box>
+ *     <Box padding="space.100" backgroundColor="neutral"></Box>
+ *   </Grid>
+ * )
+ * ```
+ */
+declare const Grid: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<{
+    /**
+     * The DOM element to render as the Flex. Defaults to `div`.
+     */
+    as?: "div" | "ol" | "span" | "ul" | undefined;
+    /**
+     * Used to align children along the inline axis.
+     */
+    justifyContent?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | undefined;
+    /**
+     * Used to align children along the block axis.
+     */
+    alignItems?: "center" | "end" | "start" | "baseline" | undefined;
+    /**
+     * Represents the space between each column.
+     */
+    columnGap?: "space.0" | "space.025" | "space.050" | "space.075" | "space.100" | "space.150" | "space.200" | "space.250" | "space.300" | "space.400" | "space.500" | "space.600" | "space.800" | "space.1000" | undefined;
+    /**
+     * Represents the space between each child across both axes.
+     */
+    gap?: "space.0" | "space.025" | "space.050" | "space.075" | "space.100" | "space.150" | "space.200" | "space.250" | "space.300" | "space.400" | "space.500" | "space.600" | "space.800" | "space.1000" | undefined;
+    /**
+     * Represents the space between each row.
+     */
+    rowGap?: "space.0" | "space.025" | "space.050" | "space.075" | "space.100" | "space.150" | "space.200" | "space.250" | "space.300" | "space.400" | "space.500" | "space.600" | "space.800" | "space.1000" | undefined;
+    /**
+     * Specifies how auto-placed items get flowed into the grid. CSS `grid-auto-flow`.
+     */
+    autoFlow?: "column" | "row" | "dense" | "row dense" | "column dense" | undefined;
+    /**
+     * CSS `grid-template-rows`.
+     */
+    templateRows?: string | undefined;
+    /**
+     * CSS `grid-template-columns`.
+     */
+    templateColumns?: string | undefined;
+    /**
+     * CSS `grid-template-areas`.
+     *
+     * Each item in the passed array is a grid row.
+     */
+    templateAreas?: string[] | undefined;
+    /**
+     * Elements to be rendered inside the grid. Required as a grid without children should not be a grid.
+     */
+    children: ReactNode;
+    /**
+     * Forwarded ref element
+     */
+    ref?: any;
+} & BasePrimitiveProps, "gap" | "rowGap" | "columnGap" | "alignItems" | "justifyContent" | "as" | "children" | keyof BasePrimitiveProps | "autoFlow" | "templateAreas" | "templateRows" | "templateColumns"> & import("react").RefAttributes<any>>>;
+export default Grid;