@atlaskit/ds-explorations 2.3.2 → 2.4.0

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

@@ -0,0 +1,108 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+import type { BasePrimitiveProps } from './types';
+/**
+ * @private
+ * @deprecated DSP-8009: This type is scheduled for deletion.
+ * Please use `Inline` from `@atlaskit/primitives` instead.
+ */
+export interface InlineProps extends BasePrimitiveProps {
+    /**
+     * Used to align children along the cross axis.
+     */
+    alignItems?: FlexAlignItems;
+    /**
+     * Used to align children along the main axis.
+     */
+    justifyContent?: FlexJustifyContent;
+    /**
+     * Sets whether children are forced onto one line or can wrap onto multiple lines
+     */
+    flexWrap?: FlexWrap;
+    /**
+     * Token representing gap between children.
+     */
+    gap: ColumnGap;
+    /**
+     * Renders a divider between children.
+     * If a string is provided it will automatically be wrapped in a `<Text>` component.
+     */
+    divider?: ReactNode;
+    /**
+     * Elements to be rendered inside the Inline.
+     */
+    children: ReactNode;
+}
+type FlexAlignItems = keyof typeof flexAlignItemsMap;
+declare const flexAlignItemsMap: {
+    center: import("@emotion/react").SerializedStyles;
+    baseline: import("@emotion/react").SerializedStyles;
+    flexStart: import("@emotion/react").SerializedStyles;
+    flexEnd: import("@emotion/react").SerializedStyles;
+    start: import("@emotion/react").SerializedStyles;
+    end: import("@emotion/react").SerializedStyles;
+};
+type FlexJustifyContent = keyof typeof flexJustifyContentMap;
+declare const flexJustifyContentMap: {
+    center: import("@emotion/react").SerializedStyles;
+    flexStart: import("@emotion/react").SerializedStyles;
+    'space-between': import("@emotion/react").SerializedStyles;
+    flexEnd: import("@emotion/react").SerializedStyles;
+    start: import("@emotion/react").SerializedStyles;
+    end: import("@emotion/react").SerializedStyles;
+    spaceBetween: import("@emotion/react").SerializedStyles;
+};
+type FlexWrap = keyof typeof flexWrapMap;
+declare const flexWrapMap: {
+    wrap: import("@emotion/react").SerializedStyles;
+};
+/**
+ * __Inline__
+ *
+ * Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
+ * Renders a `div` by default.
+ *
+ * @private
+ * @deprecated DSP-8009: This primitive is scheduled for deletion.
+ * Please use `Inline` from `@atlaskit/primitives` instead.
+ *
+ * @example
+ * ```tsx
+ * const App = () => (
+ *   <Inline gap="space.100">
+ *     <Button />
+ *     <Button />
+ *   </Inline>
+ * )
+ * ```
+ */
+declare const Inline: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<InlineProps & import("react").RefAttributes<HTMLDivElement>>>;
+export default Inline;
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::63747c8b92ba373ad2259fa1fff3f434>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["columnGap"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::298080e8024fb3eb37589721413e0156>>
+ */
+declare const columnGapMap: {
+    'space.0': import("@emotion/react").SerializedStyles;
+    'space.025': import("@emotion/react").SerializedStyles;
+    'space.050': import("@emotion/react").SerializedStyles;
+    'space.075': import("@emotion/react").SerializedStyles;
+    'space.100': import("@emotion/react").SerializedStyles;
+    'space.1000': import("@emotion/react").SerializedStyles;
+    'space.150': import("@emotion/react").SerializedStyles;
+    'space.200': import("@emotion/react").SerializedStyles;
+    'space.250': import("@emotion/react").SerializedStyles;
+    'space.300': import("@emotion/react").SerializedStyles;
+    'space.400': import("@emotion/react").SerializedStyles;
+    'space.500': import("@emotion/react").SerializedStyles;
+    'space.600': import("@emotion/react").SerializedStyles;
+    'space.800': import("@emotion/react").SerializedStyles;
+};
+export type ColumnGap = keyof typeof columnGapMap;
+/**
+ * @codegenEnd
+ */

package/dist/types-ts4.5/components/stack.partial.d.ts

@@ -0,0 +1,92 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+import { BasePrimitiveProps } from './types';
+/**
+ * @private
+ * @deprecated DSP-8009: This type is scheduled for deletion.
+ * Please use `Stack` from `@atlaskit/primitives` instead.
+ */
+export interface StackProps extends BasePrimitiveProps {
+    /**
+     * Used to align children along the cross axis.
+     */
+    alignItems?: FlexAlignItems;
+    /**
+     * Used to align children along the main axis.
+     */
+    justifyContent?: FlexJustifyContent;
+    /**
+     * Sets whether children are forced onto one line or can wrap onto multiple lines
+     */
+    flexWrap?: FlexWrap;
+    /**
+     * Token representing gap between children.
+     */
+    gap: RowGap;
+    /**
+     * Elements to be rendered inside the Stack.
+     */
+    children: ReactNode;
+}
+type FlexAlignItems = keyof typeof flexAlignItemsMap;
+declare const flexAlignItemsMap: {
+    center: import("@emotion/react").SerializedStyles;
+    baseline: import("@emotion/react").SerializedStyles;
+    flexStart: import("@emotion/react").SerializedStyles;
+    flexEnd: import("@emotion/react").SerializedStyles;
+    start: import("@emotion/react").SerializedStyles;
+    end: import("@emotion/react").SerializedStyles;
+};
+type FlexJustifyContent = keyof typeof flexJustifyContentMap;
+declare const flexJustifyContentMap: {
+    center: import("@emotion/react").SerializedStyles;
+    flexStart: import("@emotion/react").SerializedStyles;
+    flexEnd: import("@emotion/react").SerializedStyles;
+    start: import("@emotion/react").SerializedStyles;
+    end: import("@emotion/react").SerializedStyles;
+};
+type FlexWrap = keyof typeof flexWrapMap;
+declare const flexWrapMap: {
+    wrap: import("@emotion/react").SerializedStyles;
+};
+/**
+ * __Stack__
+ *
+ * Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
+ * Renders a `div` by default.
+ *
+ * @private
+ * @deprecated DSP-8009: This primitive is scheduled for deletion.
+ * Please use `Stack` from `@atlaskit/primitives` instead.
+ *
+ */
+declare const Stack: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<StackProps & import("react").RefAttributes<HTMLDivElement>>>;
+export default Stack;
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::02ffa7c4ee52871441d288f44a054685>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["rowGap"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::298080e8024fb3eb37589721413e0156>>
+ */
+declare const rowGapMap: {
+    'space.0': import("@emotion/react").SerializedStyles;
+    'space.025': import("@emotion/react").SerializedStyles;
+    'space.050': import("@emotion/react").SerializedStyles;
+    'space.075': import("@emotion/react").SerializedStyles;
+    'space.100': import("@emotion/react").SerializedStyles;
+    'space.1000': import("@emotion/react").SerializedStyles;
+    'space.150': import("@emotion/react").SerializedStyles;
+    'space.200': import("@emotion/react").SerializedStyles;
+    'space.250': import("@emotion/react").SerializedStyles;
+    'space.300': import("@emotion/react").SerializedStyles;
+    'space.400': import("@emotion/react").SerializedStyles;
+    'space.500': import("@emotion/react").SerializedStyles;
+    'space.600': import("@emotion/react").SerializedStyles;
+    'space.800': import("@emotion/react").SerializedStyles;
+};
+export type RowGap = keyof typeof rowGapMap;
+/**
+ * @codegenEnd
+ */

package/dist/types-ts4.5/components/surface-provider.d.ts

@@ -4,7 +4,7 @@
  *
  * A surface context provides context information on the current background (if set).
  */
-export declare const SurfaceContext: import("react").Context<"color.background.accent.lime.subtlest" | "color.background.accent.lime.subtlest.hovered" | "color.background.accent.lime.subtlest.pressed" | "color.background.accent.lime.subtler" | "color.background.accent.lime.subtler.hovered" | "color.background.accent.lime.subtler.pressed" | "color.background.accent.lime.subtle" | "color.background.accent.lime.subtle.hovered" | "color.background.accent.lime.subtle.pressed" | "color.background.accent.lime.bolder" | "color.background.accent.lime.bolder.hovered" | "color.background.accent.lime.bolder.pressed" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtlest.hovered" | "color.background.accent.red.subtlest.pressed" | "color.background.accent.red.subtler" | "color.background.accent.red.subtler.hovered" | "color.background.accent.red.subtler.pressed" | "color.background.accent.red.subtle" | "color.background.accent.red.subtle.hovered" | "color.background.accent.red.subtle.pressed" | "color.background.accent.red.bolder" | "color.background.accent.red.bolder.hovered" | "color.background.accent.red.bolder.pressed" | "color.background.accent.orange.subtlest" | "color.background.accent.orange.subtlest.hovered" | "color.background.accent.orange.subtlest.pressed" | "color.background.accent.orange.subtler" | "color.background.accent.orange.subtler.hovered" | "color.background.accent.orange.subtler.pressed" | "color.background.accent.orange.subtle" | "color.background.accent.orange.subtle.hovered" | "color.background.accent.orange.subtle.pressed" | "color.background.accent.orange.bolder" | "color.background.accent.orange.bolder.hovered" | "color.background.accent.orange.bolder.pressed" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtlest.hovered" | "color.background.accent.yellow.subtlest.pressed" | "color.background.accent.yellow.subtler" | "color.background.accent.yellow.subtler.hovered" | "color.background.accent.yellow.subtler.pressed" | "color.background.accent.yellow.subtle" | "color.background.accent.yellow.subtle.hovered" | "color.background.accent.yellow.subtle.pressed" | "color.background.accent.yellow.bolder" | "color.background.accent.yellow.bolder.hovered" | "color.background.accent.yellow.bolder.pressed" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtlest.hovered" | "color.background.accent.green.subtlest.pressed" | "color.background.accent.green.subtler" | "color.background.accent.green.subtler.hovered" | "color.background.accent.green.subtler.pressed" | "color.background.accent.green.subtle" | "color.background.accent.green.subtle.hovered" | "color.background.accent.green.subtle.pressed" | "color.background.accent.green.bolder" | "color.background.accent.green.bolder.hovered" | "color.background.accent.green.bolder.pressed" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtlest.hovered" | "color.background.accent.teal.subtlest.pressed" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtler.hovered" | "color.background.accent.teal.subtler.pressed" | "color.background.accent.teal.subtle" | "color.background.accent.teal.subtle.hovered" | "color.background.accent.teal.subtle.pressed" | "color.background.accent.teal.bolder" | "color.background.accent.teal.bolder.hovered" | "color.background.accent.teal.bolder.pressed" | "color.background.accent.blue.subtlest" | "color.background.accent.blue.subtlest.hovered" | "color.background.accent.blue.subtlest.pressed" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtler.hovered" | "color.background.accent.blue.subtler.pressed" | "color.background.accent.blue.subtle" | "color.background.accent.blue.subtle.hovered" | "color.background.accent.blue.subtle.pressed" | "color.background.accent.blue.bolder" | "color.background.accent.blue.bolder.hovered" | "color.background.accent.blue.bolder.pressed" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtlest.hovered" | "color.background.accent.purple.subtlest.pressed" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtler.hovered" | "color.background.accent.purple.subtler.pressed" | "color.background.accent.purple.subtle" | "color.background.accent.purple.subtle.hovered" | "color.background.accent.purple.subtle.pressed" | "color.background.accent.purple.bolder" | "color.background.accent.purple.bolder.hovered" | "color.background.accent.purple.bolder.pressed" | "color.background.accent.magenta.subtlest" | "color.background.accent.magenta.subtlest.hovered" | "color.background.accent.magenta.subtlest.pressed" | "color.background.accent.magenta.subtler" | "color.background.accent.magenta.subtler.hovered" | "color.background.accent.magenta.subtler.pressed" | "color.background.accent.magenta.subtle" | "color.background.accent.magenta.subtle.hovered" | "color.background.accent.magenta.subtle.pressed" | "color.background.accent.magenta.bolder" | "color.background.accent.magenta.bolder.hovered" | "color.background.accent.magenta.bolder.pressed" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtlest.hovered" | "color.background.accent.gray.subtlest.pressed" | "color.background.accent.gray.subtler" | "color.background.accent.gray.subtler.hovered" | "color.background.accent.gray.subtler.pressed" | "color.background.accent.gray.subtle" | "color.background.accent.gray.subtle.hovered" | "color.background.accent.gray.subtle.pressed" | "color.background.accent.gray.bolder" | "color.background.accent.gray.bolder.hovered" | "color.background.accent.gray.bolder.pressed" | "color.background.disabled" | "color.background.input" | "color.background.input.hovered" | "color.background.input.pressed" | "color.background.inverse.subtle" | "color.background.inverse.subtle.hovered" | "color.background.inverse.subtle.pressed" | "color.background.neutral" | "color.background.neutral.hovered" | "color.background.neutral.pressed" | "color.background.neutral.subtle" | "color.background.neutral.subtle.hovered" | "color.background.neutral.subtle.pressed" | "color.background.neutral.bold" | "color.background.neutral.bold.hovered" | "color.background.neutral.bold.pressed" | "color.background.selected" | "color.background.selected.hovered" | "color.background.selected.pressed" | "color.background.selected.bold" | "color.background.selected.bold.hovered" | "color.background.selected.bold.pressed" | "color.background.brand.subtlest" | "color.background.brand.subtlest.hovered" | "color.background.brand.subtlest.pressed" | "color.background.brand.bold" | "color.background.brand.bold.hovered" | "color.background.brand.bold.pressed" | "color.background.brand.boldest" | "color.background.brand.boldest.hovered" | "color.background.brand.boldest.pressed" | "color.background.danger" | "color.background.danger.hovered" | "color.background.danger.pressed" | "color.background.danger.bold" | "color.background.danger.bold.hovered" | "color.background.danger.bold.pressed" | "color.background.warning" | "color.background.warning.hovered" | "color.background.warning.pressed" | "color.background.warning.bold" | "color.background.warning.bold.hovered" | "color.background.warning.bold.pressed" | "color.background.success" | "color.background.success.hovered" | "color.background.success.pressed" | "color.background.success.bold" | "color.background.success.bold.hovered" | "color.background.success.bold.pressed" | "color.background.discovery" | "color.background.discovery.hovered" | "color.background.discovery.pressed" | "color.background.discovery.bold" | "color.background.discovery.bold.hovered" | "color.background.discovery.bold.pressed" | "color.background.information" | "color.background.information.hovered" | "color.background.information.pressed" | "color.background.information.bold" | "color.background.information.bold.hovered" | "color.background.information.bold.pressed" | "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken" | "utility.elevation.surface.current">;
+export declare const SurfaceContext: import("react").Context<"color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.overlay" | "elevation.surface.raised" | "elevation.surface.sunken" | "disabled" | "input" | "inverse.subtle" | "neutral" | "neutral.subtle" | "neutral.bold" | "selected" | "selected.bold" | "brand.subtlest" | "brand.bold" | "brand.boldest" | "danger" | "danger.bold" | "warning" | "warning.bold" | "success" | "success.bold" | "discovery" | "discovery.bold" | "information" | "information.bold">;
 /**
  * __useSurface__
  *
@@ -12,4 +12,4 @@ export declare const SurfaceContext: import("react").Context<"color.background.a
  *
  * @see SurfaceContext
  */
-export declare const useSurface: () => "color.background.accent.lime.subtlest" | "color.background.accent.lime.subtlest.hovered" | "color.background.accent.lime.subtlest.pressed" | "color.background.accent.lime.subtler" | "color.background.accent.lime.subtler.hovered" | "color.background.accent.lime.subtler.pressed" | "color.background.accent.lime.subtle" | "color.background.accent.lime.subtle.hovered" | "color.background.accent.lime.subtle.pressed" | "color.background.accent.lime.bolder" | "color.background.accent.lime.bolder.hovered" | "color.background.accent.lime.bolder.pressed" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtlest.hovered" | "color.background.accent.red.subtlest.pressed" | "color.background.accent.red.subtler" | "color.background.accent.red.subtler.hovered" | "color.background.accent.red.subtler.pressed" | "color.background.accent.red.subtle" | "color.background.accent.red.subtle.hovered" | "color.background.accent.red.subtle.pressed" | "color.background.accent.red.bolder" | "color.background.accent.red.bolder.hovered" | "color.background.accent.red.bolder.pressed" | "color.background.accent.orange.subtlest" | "color.background.accent.orange.subtlest.hovered" | "color.background.accent.orange.subtlest.pressed" | "color.background.accent.orange.subtler" | "color.background.accent.orange.subtler.hovered" | "color.background.accent.orange.subtler.pressed" | "color.background.accent.orange.subtle" | "color.background.accent.orange.subtle.hovered" | "color.background.accent.orange.subtle.pressed" | "color.background.accent.orange.bolder" | "color.background.accent.orange.bolder.hovered" | "color.background.accent.orange.bolder.pressed" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtlest.hovered" | "color.background.accent.yellow.subtlest.pressed" | "color.background.accent.yellow.subtler" | "color.background.accent.yellow.subtler.hovered" | "color.background.accent.yellow.subtler.pressed" | "color.background.accent.yellow.subtle" | "color.background.accent.yellow.subtle.hovered" | "color.background.accent.yellow.subtle.pressed" | "color.background.accent.yellow.bolder" | "color.background.accent.yellow.bolder.hovered" | "color.background.accent.yellow.bolder.pressed" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtlest.hovered" | "color.background.accent.green.subtlest.pressed" | "color.background.accent.green.subtler" | "color.background.accent.green.subtler.hovered" | "color.background.accent.green.subtler.pressed" | "color.background.accent.green.subtle" | "color.background.accent.green.subtle.hovered" | "color.background.accent.green.subtle.pressed" | "color.background.accent.green.bolder" | "color.background.accent.green.bolder.hovered" | "color.background.accent.green.bolder.pressed" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtlest.hovered" | "color.background.accent.teal.subtlest.pressed" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtler.hovered" | "color.background.accent.teal.subtler.pressed" | "color.background.accent.teal.subtle" | "color.background.accent.teal.subtle.hovered" | "color.background.accent.teal.subtle.pressed" | "color.background.accent.teal.bolder" | "color.background.accent.teal.bolder.hovered" | "color.background.accent.teal.bolder.pressed" | "color.background.accent.blue.subtlest" | "color.background.accent.blue.subtlest.hovered" | "color.background.accent.blue.subtlest.pressed" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtler.hovered" | "color.background.accent.blue.subtler.pressed" | "color.background.accent.blue.subtle" | "color.background.accent.blue.subtle.hovered" | "color.background.accent.blue.subtle.pressed" | "color.background.accent.blue.bolder" | "color.background.accent.blue.bolder.hovered" | "color.background.accent.blue.bolder.pressed" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtlest.hovered" | "color.background.accent.purple.subtlest.pressed" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtler.hovered" | "color.background.accent.purple.subtler.pressed" | "color.background.accent.purple.subtle" | "color.background.accent.purple.subtle.hovered" | "color.background.accent.purple.subtle.pressed" | "color.background.accent.purple.bolder" | "color.background.accent.purple.bolder.hovered" | "color.background.accent.purple.bolder.pressed" | "color.background.accent.magenta.subtlest" | "color.background.accent.magenta.subtlest.hovered" | "color.background.accent.magenta.subtlest.pressed" | "color.background.accent.magenta.subtler" | "color.background.accent.magenta.subtler.hovered" | "color.background.accent.magenta.subtler.pressed" | "color.background.accent.magenta.subtle" | "color.background.accent.magenta.subtle.hovered" | "color.background.accent.magenta.subtle.pressed" | "color.background.accent.magenta.bolder" | "color.background.accent.magenta.bolder.hovered" | "color.background.accent.magenta.bolder.pressed" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtlest.hovered" | "color.background.accent.gray.subtlest.pressed" | "color.background.accent.gray.subtler" | "color.background.accent.gray.subtler.hovered" | "color.background.accent.gray.subtler.pressed" | "color.background.accent.gray.subtle" | "color.background.accent.gray.subtle.hovered" | "color.background.accent.gray.subtle.pressed" | "color.background.accent.gray.bolder" | "color.background.accent.gray.bolder.hovered" | "color.background.accent.gray.bolder.pressed" | "color.background.disabled" | "color.background.input" | "color.background.input.hovered" | "color.background.input.pressed" | "color.background.inverse.subtle" | "color.background.inverse.subtle.hovered" | "color.background.inverse.subtle.pressed" | "color.background.neutral" | "color.background.neutral.hovered" | "color.background.neutral.pressed" | "color.background.neutral.subtle" | "color.background.neutral.subtle.hovered" | "color.background.neutral.subtle.pressed" | "color.background.neutral.bold" | "color.background.neutral.bold.hovered" | "color.background.neutral.bold.pressed" | "color.background.selected" | "color.background.selected.hovered" | "color.background.selected.pressed" | "color.background.selected.bold" | "color.background.selected.bold.hovered" | "color.background.selected.bold.pressed" | "color.background.brand.subtlest" | "color.background.brand.subtlest.hovered" | "color.background.brand.subtlest.pressed" | "color.background.brand.bold" | "color.background.brand.bold.hovered" | "color.background.brand.bold.pressed" | "color.background.brand.boldest" | "color.background.brand.boldest.hovered" | "color.background.brand.boldest.pressed" | "color.background.danger" | "color.background.danger.hovered" | "color.background.danger.pressed" | "color.background.danger.bold" | "color.background.danger.bold.hovered" | "color.background.danger.bold.pressed" | "color.background.warning" | "color.background.warning.hovered" | "color.background.warning.pressed" | "color.background.warning.bold" | "color.background.warning.bold.hovered" | "color.background.warning.bold.pressed" | "color.background.success" | "color.background.success.hovered" | "color.background.success.pressed" | "color.background.success.bold" | "color.background.success.bold.hovered" | "color.background.success.bold.pressed" | "color.background.discovery" | "color.background.discovery.hovered" | "color.background.discovery.pressed" | "color.background.discovery.bold" | "color.background.discovery.bold.hovered" | "color.background.discovery.bold.pressed" | "color.background.information" | "color.background.information.hovered" | "color.background.information.pressed" | "color.background.information.bold" | "color.background.information.bold.hovered" | "color.background.information.bold.pressed" | "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken" | "utility.elevation.surface.current";
+export declare const useSurface: () => "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.overlay" | "elevation.surface.raised" | "elevation.surface.sunken" | "disabled" | "input" | "inverse.subtle" | "neutral" | "neutral.subtle" | "neutral.bold" | "selected" | "selected.bold" | "brand.subtlest" | "brand.bold" | "brand.boldest" | "danger" | "danger.bold" | "warning" | "warning.bold" | "success" | "success.bold" | "discovery" | "discovery.bold" | "information" | "information.bold";

package/dist/types-ts4.5/index.d.ts

@@ -1,3 +1,9 @@
+export { default as UNSAFE_Box } from './components/box.partial';
 export { default as UNSAFE_Text } from './components/text.partial';
+export { default as UNSAFE_Inline } from './components/inline.partial';
+export { default as UNSAFE_Stack } from './components/stack.partial';
 export { default as UNSAFE_InteractionSurface } from './components/interaction-surface.partial';
+export type { BoxProps as UNSAFE_BoxProps } from './components/box.partial';
 export type { TextProps as UNSAFE_TextProps } from './components/text.partial';
+export type { InlineProps as UNSAFE_InlineProps } from './components/inline.partial';
+export type { StackProps as UNSAFE_StackProps } from './components/stack.partial';

package/examples/00-basic.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import Box from '../src/components/box.partial';
+import Text from '../src/components/text.partial';
+
+export default () => {
+  return (
+    <Box>
+      <Box
+        paddingBlock="space.400"
+        paddingInline="space.400"
+        alignItems="center"
+        backgroundColor="brand.bold"
+        UNSAFE_style={{ aspectRatio: '1/1' }}
+      >
+        <Text fontWeight="medium" color="inverse">
+          A basic box
+        </Text>
+      </Box>
+    </Box>
+  );
+};

package/examples/01-box.tsx

@@ -0,0 +1,171 @@
+import React from 'react';
+
+import Heading from '@atlaskit/heading';
+import Inline from '@atlaskit/primitives/inline';
+import Stack from '@atlaskit/primitives/stack';
+
+import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '../src';
+import { spacingScale } from '../src/internal/spacing-scale';
+
+/**
+ * Box permutations
+ */
+export default () => {
+  return (
+    <Stack space="space.400" alignInline="start">
+      <Stack space="space.200" testId="box-with-background-and-paddingBlock">
+        <Heading level="h600">paddingBlock</Heading>
+        <Inline space="space.200" alignBlock="center">
+          {spacingScale.map((space) => (
+            <Box
+              key={space}
+              backgroundColor="discovery.bold"
+              paddingBlock={space}
+            >
+              <Box backgroundColor="elevation.surface" justifyContent="center">
+                <Text>{space}</Text>
+              </Box>
+            </Box>
+          ))}
+        </Inline>
+      </Stack>
+
+      <Stack space="space.200" testId="box-with-background-and-paddingInline">
+        <Heading level="h600">paddingInline</Heading>
+        <Stack space="space.200" alignInline="center">
+          {spacingScale.map((space) => (
+            <Box
+              key={space}
+              backgroundColor="discovery.bold"
+              paddingInline={space}
+            >
+              <Box backgroundColor="elevation.surface" justifyContent="center">
+                <Text>{space}</Text>
+              </Box>
+            </Box>
+          ))}
+        </Stack>
+      </Stack>
+
+      <Stack space="space.200" testId="box-with-background-and-padding">
+        <Heading level="h600">padding</Heading>
+        <Inline space="space.200" alignBlock="center">
+          {spacingScale.map((space) => (
+            <Box key={space} backgroundColor="discovery.bold" padding={space}>
+              <Box backgroundColor="elevation.surface" justifyContent="center">
+                <Text>{space}</Text>
+              </Box>
+            </Box>
+          ))}
+        </Inline>
+      </Stack>
+
+      <Stack space="space.200" testId="box-with-backgroundColor">
+        <Heading level="h600">backgroundColor</Heading>
+        <Inline space="space.200" alignBlock="center">
+          {(
+            [
+              'discovery.bold',
+              'success.bold',
+              'warning.bold',
+              'danger.bold',
+              'information.bold',
+              'brand.bold',
+            ] as const
+          ).map((bgColor) => (
+            <Box key={bgColor} backgroundColor={bgColor} padding="space.400">
+              <Box justifyContent="center">
+                <Text>{bgColor}</Text>
+              </Box>
+            </Box>
+          ))}
+        </Inline>
+      </Stack>
+
+      <Stack space="space.200" testId="box-with-borderColor">
+        <Heading level="h600">borderColor</Heading>
+        <Inline space="space.200" alignBlock="center">
+          {(
+            [
+              'discovery',
+              'success',
+              'warning',
+              'danger',
+              'information',
+              'brand',
+            ] as const
+          ).map((borderColor) => (
+            <Box
+              key={borderColor}
+              backgroundColor="neutral"
+              borderColor={borderColor}
+              borderStyle="solid"
+              borderWidth="2px"
+              padding="space.400"
+            >
+              <Box justifyContent="center">
+                <Text color="color.text">{borderColor}</Text>
+              </Box>
+            </Box>
+          ))}
+        </Inline>
+      </Stack>
+
+      <Stack space="space.200" testId="box-with-shadow">
+        <Heading level="h600">shadow</Heading>
+        <Inline space="space.200" alignBlock="center">
+          {(['raised', 'overflow', 'overlay'] as const).map((shadow) => (
+            <Box
+              key={shadow}
+              backgroundColor="elevation.surface"
+              shadow={shadow}
+              padding="space.400"
+            >
+              <Box justifyContent="center">
+                <Text color="color.text">{shadow}</Text>
+              </Box>
+            </Box>
+          ))}
+        </Inline>
+      </Stack>
+
+      <Stack space="space.200" testId="box-with-layer">
+        <Heading level="h600">layer</Heading>
+        <Box alignItems="center" UNSAFE_style={{ width: 800, height: 650 }}>
+          {(
+            [
+              'card',
+              'navigation',
+              'dialog',
+              'layer',
+              'blanket',
+              'modal',
+              'flag',
+              'spotlight',
+              'tooltip',
+            ] as const
+          ).map((layer, index) => (
+            <Box
+              key={layer}
+              backgroundColor="elevation.surface"
+              layer={layer}
+              shadow="overlay"
+              padding="space.400"
+              position="absolute"
+              UNSAFE_style={{
+                // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+                top: index * 64,
+                // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+                left: index * 64,
+              }}
+            >
+              <Box justifyContent="center">
+                <Text color="color.text">{layer}</Text>
+              </Box>
+            </Box>
+          ))}
+        </Box>
+      </Stack>
+    </Stack>
+  );
+};

package/examples/02-text-advanced.tsx

@@ -1,28 +1,37 @@
 import React from 'react';
 
-import { Box, Inline, xcss } from '@atlaskit/primitives';
+import Inline from '@atlaskit/primitives/inline';
 
+import Box from '../src/components/box.partial';
 import Text from '../src/components/text.partial';
 
-const boxStyles = xcss({
-  display: 'flex',
-  paddingBlock: 'space.400',
-  paddingInline: 'space.400',
-  alignItems: 'center',
-});
-
 export default () => {
   return (
     <Inline space="space.100">
-      <Box xcss={boxStyles} backgroundColor="color.background.information">
+      <Box
+        paddingBlock="space.400"
+        paddingInline="space.400"
+        alignItems="center"
+        backgroundColor="information"
+      >
         <Text>
           <Text>Text that deletes its redundant wrapping</Text>
         </Text>
       </Box>
-      <Box xcss={boxStyles} backgroundColor="color.background.information">
+      <Box
+        paddingBlock="space.400"
+        paddingInline="space.400"
+        alignItems="center"
+        backgroundColor="information"
+      >
         <Text fontWeight="semibold">Text on information</Text>
       </Box>
-      <Box xcss={boxStyles} backgroundColor="color.background.brand.bold">
+      <Box
+        paddingBlock="space.400"
+        paddingInline="space.400"
+        alignItems="center"
+        backgroundColor="brand.bold"
+      >
         <Text fontWeight="semibold">Text on brand bold</Text>
       </Box>
     </Inline>

package/examples/02-text.tsx

@@ -1,15 +1,10 @@
 import React from 'react';
 
 import Heading from '@atlaskit/heading';
-import { Box, Inline, Stack, xcss } from '@atlaskit/primitives';
+import Inline from '@atlaskit/primitives/inline';
+import Stack from '@atlaskit/primitives/stack';
 
-import { UNSAFE_Text as Text } from '../src';
-
-const fixedWidthStyles = xcss({ display: 'flex', width: '200px' });
-
-const lineHeightContainerStyles = xcss({
-  display: 'inline-flex',
-});
+import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '../src';
 
 export default () => {
   return (
@@ -18,7 +13,7 @@ export default () => {
         Text examples
       </Heading>
       <Stack space="space.200">
-        <Box>
+        <Box display="block">
           <Heading level="h300">Font size</Heading>
           <Inline space="space.200" testId="font-sizes">
             {(
@@ -39,7 +34,7 @@ export default () => {
             ))}
           </Inline>
         </Box>
-        <Box>
+        <Box display="block">
           <Heading level="h300" as="h4">
             Font weight
           </Heading>
@@ -53,7 +48,7 @@ export default () => {
             )}
           </Inline>
         </Box>
-        <Box>
+        <Box display="block">
           <Heading level="h300" as="h4">
             Line height
           </Heading>
@@ -70,15 +65,15 @@ export default () => {
             ).map((lineHeight) => (
               <Box
                 key={lineHeight}
-                xcss={lineHeightContainerStyles}
-                backgroundColor="color.background.neutral"
+                display="inlineFlex"
+                backgroundColor="neutral"
               >
                 <Text lineHeight={lineHeight}>lineHeight {lineHeight}</Text>
               </Box>
             ))}
           </Inline>
         </Box>
-        <Box>
+        <Box display="block">
           <Heading level="h300" as="h4">
             Testing
           </Heading>
@@ -97,7 +92,7 @@ export default () => {
             >
               Text with various props
             </Text>
-            <Box xcss={fixedWidthStyles}>
+            <Box UNSAFE_style={{ width: '200px' }}>
               <Text shouldTruncate>Long truncated text that is cut off.</Text>
             </Box>
           </Stack>