@atlaskit/primitives 12.2.7 → 13.1.0

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

@@ -0,0 +1,111 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ElementType, type ReactNode } from 'react';
+import type { AlignItems, BasePrimitiveProps, Direction, GapToken, JustifyContent, Wrap } 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' | 'dl';
+    /**
+     * 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?: GapToken;
+    /**
+     * Represents the space between each child.
+     */
+    gap?: GapToken;
+    /**
+     * Represents the space between each child.
+     */
+    rowGap?: GapToken;
+    /**
+     * 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;
+/**
+ * __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" | "dl" | "li" | "ol" | "span" | "ul" | undefined;
+    /**
+     * Used to align children along the main axis.
+     */
+    justifyContent?: JustifyContent | undefined;
+    /**
+     * Used to align children along the cross axis.
+     */
+    alignItems?: AlignItems | undefined;
+    /**
+     * Represents the space between each child.
+     */
+    columnGap?: import("./types").PositiveSpaceToken | undefined;
+    /**
+     * Represents the space between each child.
+     */
+    gap?: import("./types").PositiveSpaceToken | undefined;
+    /**
+     * Represents the space between each child.
+     */
+    rowGap?: import("./types").PositiveSpaceToken | undefined;
+    /**
+     * Represents the flex direction property of CSS flexbox.
+     */
+    direction?: Direction | undefined;
+    /**
+     * Represents the flex wrap property of CSS flexbox.
+     */
+    wrap?: Wrap | undefined;
+    /**
+     * Elements to be rendered inside the Flex.
+     */
+    children: ReactNode;
+    /**
+     * Forwarded ref element.
+     */
+    ref?: any;
+} & BasePrimitiveProps, "gap" | "rowGap" | "columnGap" | "alignItems" | "direction" | "justifyContent" | "wrap" | "children" | "as" | keyof BasePrimitiveProps> & import("react").RefAttributes<any>>>;
+export default Flex;

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

@@ -0,0 +1,131 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ElementType, type ReactNode } from 'react';
+import type { AlignContent, AlignItems, AutoFlow, BasePrimitiveProps, GapToken, JustifyContent, JustifyItems } 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 the grid along the inline axis.
+     *
+     * @deprecated This prop is not hooked up and doesn't nothing!
+     */
+    justifyItems?: JustifyItems;
+    /**
+     * Used to align children along the block axis.
+     */
+    alignItems?: AlignItems;
+    /**
+     * Used to align the grid along the block axis.
+     */
+    alignContent?: AlignContent;
+    /**
+     * Represents the space between each column.
+     */
+    columnGap?: GapToken;
+    /**
+     * Represents the space between each child across both axes.
+     */
+    gap?: GapToken;
+    /**
+     * Represents the space between each row.
+     */
+    rowGap?: GapToken;
+    /**
+     * Specifies how auto-placed items get flowed into the grid. CSS `grid-auto-flow`.
+     */
+    autoFlow?: AutoFlow;
+    /**
+     * Elements to be rendered inside the grid. Required as a grid without children should not be a grid.
+     */
+    children: ReactNode;
+    /**
+     * HTML id attrubute.
+     */
+    id?: string;
+    /**
+     * Forwarded ref element.
+     */
+    ref?: React.ComponentPropsWithRef<T>['ref'];
+} & BasePrimitiveProps;
+/**
+ * __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?: JustifyContent | undefined;
+    /**
+     * Used to align the grid along the inline axis.
+     *
+     * @deprecated This prop is not hooked up and doesn't nothing!
+     */
+    justifyItems?: JustifyItems | undefined;
+    /**
+     * Used to align children along the block axis.
+     */
+    alignItems?: AlignItems | undefined;
+    /**
+     * Used to align the grid along the block axis.
+     */
+    alignContent?: AlignContent | undefined;
+    /**
+     * Represents the space between each column.
+     */
+    columnGap?: import("./types").PositiveSpaceToken | undefined;
+    /**
+     * Represents the space between each child across both axes.
+     */
+    gap?: import("./types").PositiveSpaceToken | undefined;
+    /**
+     * Represents the space between each row.
+     */
+    rowGap?: import("./types").PositiveSpaceToken | undefined;
+    /**
+     * Specifies how auto-placed items get flowed into the grid. CSS `grid-auto-flow`.
+     */
+    autoFlow?: AutoFlow | undefined;
+    /**
+     * Elements to be rendered inside the grid. Required as a grid without children should not be a grid.
+     */
+    children: ReactNode;
+    /**
+     * HTML id attrubute.
+     */
+    id?: string | undefined;
+    /**
+     * Forwarded ref element.
+     */
+    ref?: any;
+} & BasePrimitiveProps, "gap" | "rowGap" | "columnGap" | "alignContent" | "alignItems" | "justifyContent" | "justifyItems" | "children" | "as" | "id" | "autoFlow" | keyof BasePrimitiveProps> & import("react").RefAttributes<any>>>;
+export default Grid;

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

@@ -0,0 +1,116 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ElementType, type ReactNode } from 'react';
+import { type FlexProps } from './flex';
+import type { AlignBlock, AlignInline, BasePrimitiveProps, Grow, Spread } from './types';
+export type InlineProps<T extends ElementType = 'div'> = {
+    /**
+     * The DOM element to render as the Inline. Defaults to `div`.
+     */
+    as?: 'div' | 'span' | 'ul' | 'ol' | 'li' | 'dl';
+    /**
+     * Used to align children along the block axis (typically vertical).
+     */
+    alignBlock?: AlignBlock;
+    /**
+     * Used to align children along the inline axis (typically horizontal).
+     */
+    alignInline?: AlignInline;
+    /**
+     * Used to set whether children are forced onto one line or will wrap onto multiple lines.
+     */
+    shouldWrap?: boolean;
+    /**
+     * Used to distribute the children along the main axis.
+     */
+    spread?: Spread;
+    /**
+     * Used to set whether the container should grow to fill the available space.
+     */
+    grow?: Grow;
+    /**
+     * Represents the space between each child.
+     */
+    space?: FlexProps['gap'];
+    /**
+     * Represents the space between rows when content wraps.
+     * Used to override the `space` value in between rows.
+     */
+    rowSpace?: FlexProps['rowGap'];
+    /**
+     * Renders a separator string between each child.
+     */
+    separator?: string;
+    /**
+     * Elements to be rendered inside the Inline.
+     */
+    children: ReactNode;
+    /**
+     * Forwarded ref element.
+     */
+    ref?: React.ComponentPropsWithRef<T>['ref'];
+} & BasePrimitiveProps;
+/**
+ * __Inline__
+ *
+ * Inline is a primitive component based on CSS Flexbox that manages the horizontal layout of direct children.
+ *
+ * @example
+ * ```tsx
+ *  <Inline>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *  </Inline>
+ * ```
+ *
+ */
+declare const Inline: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<{
+    /**
+     * The DOM element to render as the Inline. Defaults to `div`.
+     */
+    as?: "div" | "dl" | "li" | "ol" | "span" | "ul" | undefined;
+    /**
+     * Used to align children along the block axis (typically vertical).
+     */
+    alignBlock?: AlignBlock | undefined;
+    /**
+     * Used to align children along the inline axis (typically horizontal).
+     */
+    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?: FlexProps['gap'];
+    /**
+     * Represents the space between rows when content wraps.
+     * Used to override the `space` value in between rows.
+     */
+    rowSpace?: FlexProps['rowGap'];
+    /**
+     * 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, "space" | "separator" | "children" | "as" | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "rowSpace" | keyof BasePrimitiveProps> & import("react").RefAttributes<any>>>;
+export default Inline;

package/dist/types/compiled/components/internal/surface-provider.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { BackgroundColorToken } from '../types';
+/**
+ * __Surface context__
+ *
+ * A surface context provides context information on the current background (if set).
+ */
+export declare const SurfaceContext: import("react").Context<BackgroundColorToken>;
+/**
+ * __useSurface__
+ *
+ * Return the current surface. If no parent sets a surface color it falls back to the default surface.
+ *
+ * @see SurfaceContext
+ */
+export declare const useSurface: () => BackgroundColorToken;

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

@@ -0,0 +1,5 @@
+/**
+ * A list of all of the SVG-ish elements from JSX.IntrinsicElements
+ * as we typically want to remove these from allowed elements.
+ */
+export type SVGElements = 'svg' | 'animate' | 'animateMotion' | 'animateTransform' | 'circle' | 'clipPath' | 'defs' | 'desc' | 'ellipse' | 'feBlend' | 'feColorMatrix' | 'feComponentTransfer' | 'feComposite' | 'feConvolveMatrix' | 'feDiffuseLighting' | 'feDisplacementMap' | 'feDistantLight' | 'feDropShadow' | 'feFlood' | 'feFuncA' | 'feFuncB' | 'feFuncG' | 'feFuncR' | 'feGaussianBlur' | 'feImage' | 'feMerge' | 'feMergeNode' | 'feMorphology' | 'feOffset' | 'fePointLight' | 'feSpecularLighting' | 'feSpotLight' | 'feTile' | 'feTurbulence' | 'filter' | 'foreignObject' | 'g' | 'image' | 'line' | 'linearGradient' | 'marker' | 'mask' | 'metadata' | 'mpath' | 'path' | 'pattern' | 'polygon' | 'polyline' | 'radialGradient' | 'rect' | 'stop' | 'switch' | 'symbol' | 'text' | 'textPath' | 'tspan' | 'use' | 'view';

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

@@ -0,0 +1,49 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ComponentPropsWithoutRef, type ReactNode, type Ref } from 'react';
+import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import type { BasePrimitiveProps, StyleProp } from './types';
+type BasePressableProps = {
+    /**
+     * Elements to be rendered inside the Pressable.
+     */
+    children?: ReactNode;
+    /**
+     * Handler called on click. The second argument provides an Atlaskit UI analytics event that can be fired to a listening channel. See the ['analytics-next' package](https://atlaskit.atlassian.com/packages/analytics/analytics-next) documentation for more information.
+     */
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void;
+    /**
+     * Whether the button is disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
+     */
+    interactionName?: string;
+    /**
+     * An optional component name used to identify this component in Atlaskit analytics events. This can be used if a parent component's name is preferred over the default 'Pressable'.
+     */
+    componentName?: string;
+    /**
+     * Additional information to be included in the `context` of Atlaskit analytics events that come from pressable.
+     */
+    analyticsContext?: Record<string, any>;
+    /**
+     * Forwarded ref.
+     */
+    ref?: Ref<HTMLButtonElement>;
+};
+export type PressableProps = Omit<ComponentPropsWithoutRef<'button'>, 'disabled' | 'onClick' | 'style' | 'className'> & BasePrimitiveProps & StyleProp & BasePressableProps;
+/**
+ * __Pressable__
+ *
+ * A primitive for building custom buttons.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/pressable/examples)
+ * - [Code](https://atlassian.design/components/primitives/pressable/code)
+ * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
+ */
+declare const Pressable: import("react").ForwardRefExoticComponent<Pick<Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>>, "style" | "disabled" | "className" | "onClick"> & BasePrimitiveProps & StyleProp & BasePressableProps, "color" | "translate" | "hidden" | "key" | "value" | "style" | "children" | "form" | "slot" | "title" | "name" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "isDisabled" | "interactionName" | "componentName" | "analyticsContext" | keyof BasePrimitiveProps> & import("react").RefAttributes<HTMLButtonElement>>;
+export default Pressable;

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

@@ -0,0 +1,90 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ElementType, type ReactNode } from 'react';
+import { type FlexProps } from './flex';
+import type { AlignBlock, AlignInline, BasePrimitiveProps, Grow, Spread } from './types';
+export type StackProps<T extends ElementType = 'div'> = {
+    /**
+     * The DOM element to render as the Stack. Defaults to `div`.
+     */
+    as?: 'div' | 'span' | 'ul' | 'ol';
+    /**
+     * Used to align children along the block axis (typically vertical).
+     */
+    alignBlock?: Exclude<AlignBlock, 'baseline'>;
+    /**
+     * Used to align children along the inline axis (typically horizontal).
+     */
+    alignInline?: AlignInline;
+    /**
+     * Used to distribute the children along the main axis.
+     */
+    spread?: Spread;
+    /**
+     * Used to set whether the container should grow to fill the available space.
+     */
+    grow?: Grow;
+    /**
+     * Represents the space between each child.
+     */
+    space?: FlexProps['gap'];
+    /**
+     * Elements to be rendered inside the Stack.
+     */
+    children: ReactNode;
+    /**
+     * Forwarded ref element.
+     */
+    ref?: React.ComponentPropsWithRef<T>['ref'];
+} & BasePrimitiveProps;
+/**
+ * __Stack__
+ *
+ * Stack is a primitive component based on flexbox that manages the block layout of direct children.
+ *
+ * @example
+ * ```tsx
+ *  <Stack>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *  </Stack>
+ * ```
+ *
+ */
+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 block axis (typically vertical).
+     */
+    alignBlock?: "center" | "stretch" | "end" | "start" | undefined;
+    /**
+     * Used to align children along the inline axis (typically horizontal).
+     */
+    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?: FlexProps['gap'];
+    /**
+     * Elements to be rendered inside the Stack.
+     */
+    children: ReactNode;
+    /**
+     * Forwarded ref element.
+     */
+    ref?: any;
+} & BasePrimitiveProps, "space" | "children" | "as" | "alignInline" | "alignBlock" | "spread" | "grow" | keyof BasePrimitiveProps> & import("react").RefAttributes<any>>>;
+export default Stack;

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

@@ -0,0 +1,91 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ComponentPropsWithRef, type ElementType, type ReactNode } from 'react';
+import type { BasePrimitiveProps, FontSize, FontWeight, TextAlign, TextColor } from './types';
+declare const asAllowlist: readonly ["span", "p", "strong", "em"];
+type AsElement = (typeof asAllowlist)[number];
+type TextPropsBase<T extends ElementType = 'span'> = {
+    /**
+     * HTML tag to be rendered. Defaults to `span`.
+     */
+    as?: AsElement;
+    /**
+     * Elements rendered within the Text element.
+     */
+    children: ReactNode;
+    /**
+     * Token representing text color with a built-in fallback value.
+     * Will apply inverse text color automatically if placed within a Box with bold background color.
+     * Defaults to `color.text` if not nested in other Text components.
+     */
+    color?: TextColor | 'inherit';
+    /**
+     * The [HTML `id` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
+     */
+    id?: string;
+    /**
+     * The number of lines to limit the provided text to. Text will be truncated with an ellipsis.
+     *
+     * When `maxLines={1}`, `wordBreak` defaults to `break-all` to match the behaviour of `text-overflow: ellipsis`.
+     */
+    maxLines?: number;
+    /**
+     * Text alignment.
+     */
+    align?: TextAlign;
+    /**
+     * Text size.
+     */
+    size?: FontSize;
+    /**
+     * The [HTML `font-weight` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight).
+     */
+    weight?: FontWeight;
+    /**
+     * Forwarded ref.
+     */
+    ref?: ComponentPropsWithRef<T>['ref'];
+};
+export type TextProps<T extends ElementType = 'span'> = TextPropsBase<T> & Omit<BasePrimitiveProps, 'xcss'>;
+export declare const inverseColorMap: {
+    readonly 'color.background.neutral.bold': "color.text.inverse";
+    readonly 'color.background.neutral.bold.hovered': "color.text.inverse";
+    readonly 'color.background.neutral.bold.pressed': "color.text.inverse";
+    readonly 'color.background.selected.bold': "color.text.inverse";
+    readonly 'color.background.selected.bold.hovered': "color.text.inverse";
+    readonly 'color.background.selected.bold.pressed': "color.text.inverse";
+    readonly 'color.background.brand.bold': "color.text.inverse";
+    readonly 'color.background.brand.bold.hovered': "color.text.inverse";
+    readonly 'color.background.brand.bold.pressed': "color.text.inverse";
+    readonly 'color.background.brand.boldest': "color.text.inverse";
+    readonly 'color.background.brand.boldest.hovered': "color.text.inverse";
+    readonly 'color.background.brand.boldest.pressed': "color.text.inverse";
+    readonly 'color.background.danger.bold': "color.text.inverse";
+    readonly 'color.background.danger.bold.hovered': "color.text.inverse";
+    readonly 'color.background.danger.bold.pressed': "color.text.inverse";
+    readonly 'color.background.warning.bold': "color.text.warning.inverse";
+    readonly 'color.background.warning.bold.hovered': "color.text.warning.inverse";
+    readonly 'color.background.warning.bold.pressed': "color.text.warning.inverse";
+    readonly 'color.background.success.bold': "color.text.inverse";
+    readonly 'color.background.success.bold.hovered': "color.text.inverse";
+    readonly 'color.background.success.bold.pressed': "color.text.inverse";
+    readonly 'color.background.discovery.bold': "color.text.inverse";
+    readonly 'color.background.discovery.bold.hovered': "color.text.inverse";
+    readonly 'color.background.discovery.bold.pressed': "color.text.inverse";
+    readonly 'color.background.information.bold': "color.text.inverse";
+    readonly 'color.background.information.bold.hovered': "color.text.inverse";
+    readonly 'color.background.information.bold.pressed': "color.text.inverse";
+};
+/**
+ * __Text__
+ *
+ * Text is a primitive component that has the Atlassian Design System's design guidelines baked in.
+ * This includes considerations for text attributes such as color, font size, font weight, and line height.
+ * It renders a `span` by default.
+ *
+ * @internal
+ */
+declare const Text: import("react").ForwardRefExoticComponent<Pick<TextPropsBase<ElementType> & Omit<BasePrimitiveProps, "xcss">, "color" | "maxLines" | "size" | "weight" | "children" | "as" | "id" | "role" | "align" | "testId" | "data-testid"> & import("react").RefAttributes<any>>;
+export default Text;