@atlaskit/primitives 1.0.1 → 1.0.2

package/dist/types/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;

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" | "xcss" | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "space" | "rowSpace" | "separator"> & 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/index.d.ts

@@ -5,4 +5,5 @@ export { default as Inline, type InlineProps } from './components/inline';
 export { xcss } from './xcss/xcss';
 export { default as Stack, type StackProps } from './components/stack';
 export { default as Flex, type FlexProps } from './components/flex';
-export { UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG, type Breakpoint, } from './responsive';
+export { default as Grid, type GridProps } from './components/grid';
+export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG, type Breakpoint, } from './responsive';

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

@@ -2,7 +2,7 @@
 import { css as cssEmotion } from '@emotion/react';
 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,10 +23,10 @@ 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 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" | "xcss" | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "space" | "rowSpace" | "separator"> & 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;
-} | false;
-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/flex.d.ts

@@ -6,7 +6,7 @@ export type FlexProps<T extends ElementType = 'div'> = {
     /**
      * The DOM element to render as the Flex. Defaults to `div`.
      */
-    as?: 'div' | 'span' | 'ul' | 'ol';
+    as?: 'div' | 'span' | 'ul' | 'ol' | 'li';
     /**
      * Used to align children along the main axis.
      */
@@ -15,6 +15,10 @@ export type FlexProps<T extends ElementType = 'div'> = {
      * Used to align children along the cross axis.
      */
     alignItems?: AlignItems;
+    /**
+     * Represents the space between each child.
+     */
+    columnGap?: Space;
     /**
      * Represents the space between each child.
      */
@@ -32,7 +36,7 @@ export type FlexProps<T extends ElementType = 'div'> = {
      */
     wrap?: Wrap;
     /**
-     * Elements to be rendered inside the Stack.
+     * Elements to be rendered inside the Flex.
      */
     children: ReactNode;
     /**
@@ -66,6 +70,7 @@ declare const alignItemsMap: {
     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__
@@ -91,15 +96,19 @@ declare const Flex: import("react").MemoExoticComponent<import("react").ForwardR
     /**
      * The DOM element to render as the Flex. Defaults to `div`.
      */
-    as?: "div" | "ol" | "span" | "ul" | undefined;
+    as?: "div" | "li" | "ol" | "span" | "ul" | undefined;
     /**
      * Used to align children along the main axis.
      */
-    justifyContent?: "start" | "center" | "end" | "stretch" | "space-between" | "space-around" | "space-evenly" | undefined;
+    justifyContent?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | undefined;
     /**
      * Used to align children along the cross axis.
      */
-    alignItems?: "start" | "center" | "end" | "baseline" | undefined;
+    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.
      */
@@ -115,14 +124,14 @@ declare const Flex: import("react").MemoExoticComponent<import("react").ForwardR
     /**
      * Represents the flex wrap property of CSS flexbox.
      */
-    wrap?: "wrap" | "nowrap" | undefined;
+    wrap?: "nowrap" | "wrap" | undefined;
     /**
-     * Elements to be rendered inside the Stack.
+     * Elements to be rendered inside the Flex.
      */
     children: ReactNode;
     /**
      * Forwarded ref element
      */
     ref?: any;
-} & BasePrimitiveProps, "gap" | "rowGap" | "alignItems" | "direction" | "justifyContent" | "as" | "children" | keyof BasePrimitiveProps | "wrap"> & import("react").RefAttributes<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;