@atlaskit/primitives 1.0.0 → 1.0.1

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

@@ -0,0 +1,128 @@
+/** @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';
+    /**
+     * 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.
+     */
+    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 Stack.
+     */
+    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;
+};
+/**
+ * __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" | "ol" | "span" | "ul" | undefined;
+    /**
+     * Used to align children along the main axis.
+     */
+    justifyContent?: "start" | "center" | "end" | "stretch" | "space-between" | "space-around" | "space-evenly" | undefined;
+    /**
+     * Used to align children along the cross axis.
+     */
+    alignItems?: "start" | "center" | "end" | "baseline" | 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?: "wrap" | "nowrap" | undefined;
+    /**
+     * Elements to be rendered inside the Stack.
+     */
+    children: ReactNode;
+    /**
+     * Forwarded ref element
+     */
+    ref?: any;
+} & BasePrimitiveProps, "gap" | "rowGap" | "alignItems" | "direction" | "justifyContent" | "as" | "children" | keyof BasePrimitiveProps | "wrap"> & import("react").RefAttributes<any>>>;
+export default Flex;

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

@@ -76,5 +76,5 @@ 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<InlineProps<ElementType<any>>, "as" | "children" | "testId" | "xcss" | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "space" | "rowSpace" | "separator"> & import("react").RefAttributes<any>>>;
 export default Inline;

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,8 @@
+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 { default as Flex, type FlexProps } from './components/flex';
 export { 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,6 +1,6 @@
 /// <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 type { MediaQuery } from '../responsive/types';
@@ -27,7 +27,7 @@ declare const inlineWrapper: (style: any) => {
     readonly [uniqueSymbol]: InlineStyles;
 };
 type XCSS = ReturnType<typeof boxWrapper> | ReturnType<typeof inlineWrapper>;
-type XCSSArray = Array<XCSS | XCSSArray | false | undefined>;
+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';
 /**
@@ -43,7 +43,7 @@ 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;
+    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;
 };
 declare const boxTag: unique symbol;
 export type BoxStyles = SerializedStyles & {
@@ -51,7 +51,7 @@ export type BoxStyles = SerializedStyles & {
 };
 export type BoxXCSS = {
     readonly [uniqueSymbol]: BoxStyles;
-};
+} | false;
 declare const inlineTag: unique symbol;
 export type InlineStyles = SerializedStyles & {
     [inlineTag]: true;

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,128 @@
+/** @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';
+    /**
+     * 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.
+     */
+    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 Stack.
+     */
+    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;
+};
+/**
+ * __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" | "ol" | "span" | "ul" | undefined;
+    /**
+     * Used to align children along the main axis.
+     */
+    justifyContent?: "start" | "center" | "end" | "stretch" | "space-between" | "space-around" | "space-evenly" | undefined;
+    /**
+     * Used to align children along the cross axis.
+     */
+    alignItems?: "start" | "center" | "end" | "baseline" | 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?: "wrap" | "nowrap" | undefined;
+    /**
+     * Elements to be rendered inside the Stack.
+     */
+    children: ReactNode;
+    /**
+     * Forwarded ref element
+     */
+    ref?: any;
+} & BasePrimitiveProps, "gap" | "rowGap" | "alignItems" | "direction" | "justifyContent" | "as" | "children" | keyof BasePrimitiveProps | "wrap"> & import("react").RefAttributes<any>>>;
+export default Flex;

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

@@ -76,5 +76,5 @@ 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<InlineProps<ElementType<any>>, "as" | "children" | "testId" | "xcss" | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "space" | "rowSpace" | "separator"> & import("react").RefAttributes<any>>>;
 export default Inline;

package/dist/types-ts4.5/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-ts4.5/index.d.ts

@@ -1,6 +1,8 @@
+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 { default as Flex, type FlexProps } from './components/flex';
 export { UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG, type Breakpoint, } from './responsive';

package/dist/types-ts4.5/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-ts4.5/xcss/xcss.d.ts

@@ -1,6 +1,6 @@
 /// <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 type { MediaQuery } from '../responsive/types';
@@ -27,7 +27,7 @@ declare const inlineWrapper: (style: any) => {
     readonly [uniqueSymbol]: InlineStyles;
 };
 type XCSS = ReturnType<typeof boxWrapper> | ReturnType<typeof inlineWrapper>;
-type XCSSArray = Array<XCSS | XCSSArray | false | undefined>;
+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';
 /**
@@ -43,7 +43,7 @@ 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;
+    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;
 };
 declare const boxTag: unique symbol;
 export type BoxStyles = SerializedStyles & {
@@ -51,7 +51,7 @@ export type BoxStyles = SerializedStyles & {
 };
 export type BoxXCSS = {
     readonly [uniqueSymbol]: BoxStyles;
-};
+} | false;
 declare const inlineTag: unique symbol;
 export type InlineStyles = SerializedStyles & {
     [inlineTag]: true;

package/extract-react-types/box-props.tsx

@@ -2,10 +2,7 @@
 import React, { ReactNode } from 'react';
 
 import { As } from '../src/components/internal/base-box';
-import {
-  BasePrimitiveProps,
-  PublicBoxPropsBase,
-} from '../src/components/types';
+import { BasePrimitiveProps } from '../src/components/types';
 
 // eslint-disable-next-line @typescript-eslint/no-namespace
 namespace Token {
@@ -82,11 +79,6 @@ export default function Box(
      */
     children?: ReactNode;
 
-    /**
-     * Apply a subset of permitted styles, powered by Atlassian Design System tokens.
-     */
-    xcss?: PublicBoxPropsBase['xcss'];
-
     /**
      * Forwarded ref element.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Primitives are token-backed low-level building blocks.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -17,7 +17,7 @@
       "category": "Primitives",
       "name": "Primitives",
       "status": {
-        "type": "alpha"
+        "type": "closed-beta"
       },
       "pages": [
         {
@@ -38,6 +38,15 @@
             "type": "closed-beta"
           }
         },
+        {
+          "title": "Flex",
+          "folder": "flex",
+          "slug": "primitives/flex",
+          "id": "@atlaskit/primitives/flex",
+          "status": {
+            "type": "closed-beta"
+          }
+        },
         {
           "title": "Inline",
           "folder": "inline",
@@ -156,4 +165,4 @@
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
-}
+}