@atlaskit/primitives 1.0.0 → 1.0.2

package/dist/esm/components/grid.js

@@ -0,0 +1,119 @@
+/* eslint-disable @repo/internal/styles/no-exported-styles */
+/** @jsx jsx */
+import { forwardRef, memo } from 'react';
+import { css, jsx } from '@emotion/react';
+import { spaceStylesMap } from '../xcss/style-maps.partial';
+import { parseXcss } from '../xcss/xcss';
+var justifyContentMap = {
+  start: css({
+    justifyContent: 'start'
+  }),
+  center: css({
+    justifyContent: 'center'
+  }),
+  end: css({
+    justifyContent: 'end'
+  }),
+  'space-between': css({
+    justifyContent: 'space-between'
+  }),
+  'space-around': css({
+    justifyContent: 'space-around'
+  }),
+  'space-evenly': css({
+    justifyContent: 'space-evenly'
+  }),
+  stretch: css({
+    justifyContent: 'stretch'
+  })
+};
+var alignItemsMap = {
+  start: css({
+    alignItems: 'start'
+  }),
+  center: css({
+    alignItems: 'center'
+  }),
+  baseline: css({
+    alignItems: 'baseline'
+  }),
+  end: css({
+    alignItems: 'end'
+  })
+};
+var baseStyles = css({
+  display: 'grid',
+  boxSizing: 'border-box'
+});
+var gridAutoFlowMap = {
+  row: css({
+    gridAutoFlow: 'row'
+  }),
+  column: css({
+    gridAutoFlow: 'column'
+  }),
+  dense: css({
+    gridAutoFlow: 'dense'
+  }),
+  'row dense': css({
+    gridAutoFlow: 'row dense'
+  }),
+  'column dense': css({
+    gridAutoFlow: 'column dense'
+  })
+};
+
+/**
+ * __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>
+ * )
+ * ```
+ */
+var Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var as = _ref.as,
+    alignItems = _ref.alignItems,
+    justifyContent = _ref.justifyContent,
+    gap = _ref.gap,
+    columnGap = _ref.columnGap,
+    rowGap = _ref.rowGap,
+    children = _ref.children,
+    testId = _ref.testId,
+    autoFlow = _ref.autoFlow,
+    gridTemplateAreas = _ref.templateAreas,
+    gridTemplateRows = _ref.templateRows,
+    gridTemplateColumns = _ref.templateColumns,
+    xcss = _ref.xcss;
+  var Component = as || 'div';
+  var xcssClassName = xcss && parseXcss(xcss);
+  var style = gridTemplateAreas || gridTemplateColumns || gridTemplateRows ? Object.assign({}, {
+    gridTemplateAreas: gridTemplateAreas ? gridTemplateAreas.map(function (str) {
+      return "\"".concat(str, "\"");
+    }).join('\n') : undefined,
+    gridTemplateColumns: gridTemplateColumns,
+    gridTemplateRows: gridTemplateRows
+  }) : undefined;
+  return jsx(Component, {
+    style: style,
+    css: [baseStyles, gap && spaceStylesMap.gap[gap], columnGap && spaceStylesMap.columnGap[columnGap], rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow],
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    xcssClassName && xcssClassName],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Grid.displayName = 'Grid';
+export default Grid;

package/dist/esm/components/inline.js

@@ -1,57 +1,19 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 /* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
 import { Children, forwardRef, Fragment, memo } from 'react';
 import { css, jsx } from '@emotion/react';
-import { spaceStylesMap } from '../xcss/style-maps.partial';
-import { parseXcss } from '../xcss/xcss';
-var alignItemsMap = {
-  center: css({
-    alignItems: 'center'
-  }),
-  baseline: css({
-    alignItems: 'baseline'
-  }),
-  start: css({
-    alignItems: 'flex-start'
-  }),
-  end: css({
-    alignItems: 'flex-end'
-  }),
-  stretch: css({
-    alignItems: 'stretch'
-  })
-};
-var justifyContentMap = {
-  start: css({
-    justifyContent: 'flex-start'
-  }),
-  center: css({
-    justifyContent: 'center'
-  }),
-  end: css({
-    justifyContent: 'flex-end'
-  }),
-  'space-between': css({
-    justifyContent: 'space-between'
-  })
-};
+import { xcss } from '../xcss/xcss';
+import Flex from './flex';
 var flexGrowMap = {
-  hug: css({
+  hug: xcss({
     flexGrow: 0
   }),
-  fill: css({
+  fill: xcss({
     width: '100%',
     flexGrow: 1
   })
 };
-var flexWrapStyles = css({
-  flexWrap: 'wrap'
-});
-var baseStyles = css({
-  display: 'flex',
-  boxSizing: 'border-box',
-  flexDirection: 'row'
-});
 var separatorStyles = css({
   color: "var(--ds-text-subtle, #42526E)",
   marginBlock: "var(--ds-space-0, 0px)",
@@ -96,7 +58,6 @@ var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
     xcss = _ref2.xcss,
     testId = _ref2.testId,
     rawChildren = _ref2.children;
-  var Component = as || 'div';
   var separatorComponent = typeof separator === 'string' ? jsx(Separator, null, separator) : separator;
   var children = separatorComponent ? Children.toArray(rawChildren).filter(Boolean).map(function (child, index) {
     return jsx(Fragment, {
@@ -104,12 +65,18 @@ var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
     }, separator && index > 0 ? separatorComponent : null, child);
   }) : rawChildren;
   var justifyContent = spread || alignInline;
-  var className = xcss && parseXcss(xcss);
-  return jsx(Component, {
-    css: [
+  return jsx(Flex, {
+    as: as,
+    alignItems: alignItems,
+    justifyContent: justifyContent,
+    direction: "row",
+    gap: space,
+    rowGap: rowSpace,
+    wrap: shouldWrap ? 'wrap' : undefined,
+    xcss: grow ? [flexGrowMap[grow]].concat(_toConsumableArray(Array.isArray(xcss) ? xcss : [xcss])) :
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    className, baseStyles, space && spaceStylesMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && spaceStylesMap.rowGap[rowSpace]],
-    "data-testid": testId,
+    xcss,
+    testId: testId,
     ref: ref
   }, children);
 }));

package/dist/esm/components/stack.js

@@ -1,52 +1,24 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 /* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
 import { forwardRef, memo } from 'react';
-import { css, jsx } from '@emotion/react';
-import { spaceStylesMap } from '../xcss/style-maps.partial';
-var justifyContentMap = {
-  start: css({
-    justifyContent: 'start'
-  }),
-  center: css({
-    justifyContent: 'center'
-  }),
-  end: css({
-    justifyContent: 'end'
-  }),
-  'space-between': css({
-    justifyContent: 'space-between'
-  })
-};
-var alignItemsMap = {
-  start: css({
-    alignItems: 'start'
-  }),
-  center: css({
-    alignItems: 'center'
-  }),
-  end: css({
-    alignItems: 'end'
-  })
-};
+import { jsx } from '@emotion/react';
+import { xcss } from '../xcss/xcss';
+import Flex from './flex';
 var flexGrowMap = {
-  hug: css({
+  hug: xcss({
     flexGrow: 0
   }),
-  fill: css({
+  fill: xcss({
     width: '100%',
     flexGrow: 1
   })
 };
-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.
+ * Stack is a primitive component based on flexbox that manages the block layout of direct children.
  *
  * @example
  * ```tsx
@@ -65,12 +37,19 @@ var Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
     grow = _ref.grow,
     space = _ref.space,
     children = _ref.children,
-    testId = _ref.testId;
-  var Component = as || 'div';
+    testId = _ref.testId,
+    xcss = _ref.xcss;
   var justifyContent = spread || alignBlock;
-  return jsx(Component, {
-    css: [baseStyles, space && spaceStylesMap.gap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
-    "data-testid": testId,
+  return jsx(Flex, {
+    as: as,
+    gap: space,
+    direction: "column",
+    alignItems: alignItems,
+    justifyContent: justifyContent,
+    xcss: grow ? [flexGrowMap[grow]].concat(_toConsumableArray(Array.isArray(xcss) ? xcss : [xcss])) :
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    xcss,
+    testId: testId,
     ref: ref
   }, children);
 }));

package/dist/esm/index.js

@@ -3,4 +3,6 @@ export { default as Pressable } from './components/pressable';
 export { default as Inline } from './components/inline';
 export { xcss } from './xcss/xcss';
 export { default as Stack } from './components/stack';
-export { UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';
+export { default as Flex } from './components/flex';
+export { default as Grid } from './components/grid';
+export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';

package/dist/esm/responsive/media-helper.js

@@ -15,10 +15,25 @@ export var UNSAFE_media = {
      * `above.xxs` is redundant and no media query should be used, but it's included for programatic purposes…
      */
     xxs: "@media all",
+    /**
+     * Used for mobile viewports.
+     */
     xs: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xs.min, ")"),
+    /**
+     * Used for tablet viewports.
+     */
     sm: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.sm.min, ")"),
+    /**
+     * Used for laptop viewports.
+     */
     md: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.md.min, ")"),
+    /**
+     * Used for desktop viewports.
+     */
     lg: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.lg.min, ")"),
+    /**
+     * Used for wide screen desktop viewports.
+     */
     xl: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xl.min, ")")
   },
   /**

package/dist/esm/version.json

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

package/dist/esm/xcss/xcss.js

@@ -152,7 +152,7 @@ export var parseXcss = function parseXcss(args) {
 var boxWrapper = function boxWrapper(style) {
   return xcss(style);
 };
-var inlineWrapper = function inlineWrapper(style) {
+var spaceWrapper = function spaceWrapper(style) {
   return xcss(style);
 };
 /**

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