@atlaskit/primitives 0.9.2 → 0.9.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/primitives
 
+## 0.9.3
+
+### Patch Changes
+
+- [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
+- [`e06d56c5a3d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e06d56c5a3d) - Adds type hinting for `fill` CSS property.
+
 ## 0.9.2
 
 ### Patch Changes

package/dist/cjs/version.json

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

package/dist/cjs/xcss/style-maps.partial.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.textColorMap = exports.spaceStylesMap = exports.spaceMap = exports.shadowMap = exports.positionMap = exports.paddingStylesMap = exports.overflowMap = exports.overflowInlineMap = exports.overflowBlockMap = exports.layerMap = exports.flexShrinkMap = exports.flexMap = exports.flexGrowMap = exports.flexDirectionMap = exports.displayMap = exports.dimensionMap = exports.borderWidthMap = exports.borderStyleMap = exports.borderRadiusMap = exports.borderColorMap = exports.backgroundColorStylesMap = exports.backgroundColorMap = exports.alignSelfMap = void 0;
+exports.textColorMap = exports.spaceStylesMap = exports.spaceMap = exports.shadowMap = exports.positionMap = exports.paddingStylesMap = exports.overflowMap = exports.overflowInlineMap = exports.overflowBlockMap = exports.layerMap = exports.flexShrinkMap = exports.flexMap = exports.flexGrowMap = exports.flexDirectionMap = exports.fillMap = exports.displayMap = exports.dimensionMap = exports.borderWidthMap = exports.borderStyleMap = exports.borderRadiusMap = exports.borderColorMap = exports.backgroundColorStylesMap = exports.backgroundColorMap = exports.alignSelfMap = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 /**
@@ -60,10 +60,10 @@ exports.spaceMap = spaceMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::4da498214befc7e312ff00d4f9f5379f>>
+ * @codegen <<SignedSource::aa1cfa3cd24f141a85ac1e0b70dbd8a8>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["border", "background", "shadow", "text"]
+ * @codegenParams ["border", "background", "shadow", "text", "fill"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
 var borderColorMap = {
@@ -240,6 +240,30 @@ var textColorMap = {
   subtle: "var(--ds-text-subtle, #42526E)"
 };
 exports.textColorMap = textColorMap;
+var fillMap = {
+  'color.icon': "var(--ds-icon, #505F79)",
+  'accent.red': "var(--ds-icon-accent-red, #FF5630)",
+  'accent.orange': "var(--ds-icon-accent-orange, #D94008)",
+  'accent.yellow': "var(--ds-icon-accent-yellow, #FFAB00)",
+  'accent.green': "var(--ds-icon-accent-green, #36B37E)",
+  'accent.teal': "var(--ds-icon-accent-teal, #00B8D9)",
+  'accent.blue': "var(--ds-icon-accent-blue, #0065FF)",
+  'accent.purple': "var(--ds-icon-accent-purple, #6554C0)",
+  'accent.magenta': "var(--ds-icon-accent-magenta, #CD519D)",
+  'accent.gray': "var(--ds-icon-accent-gray, #5E6C84)",
+  disabled: "var(--ds-icon-disabled, #8993A4)",
+  inverse: "var(--ds-icon-inverse, #FFFFFF)",
+  selected: "var(--ds-icon-selected, #0052CC)",
+  brand: "var(--ds-icon-brand, #0065FF)",
+  danger: "var(--ds-icon-danger, #DE350B)",
+  warning: "var(--ds-icon-warning, #FFC400)",
+  'warning.inverse': "var(--ds-icon-warning-inverse, #253858)",
+  success: "var(--ds-icon-success, #00875A)",
+  discovery: "var(--ds-icon-discovery, #8777D9)",
+  information: "var(--ds-icon-information, #0747A6)",
+  subtle: "var(--ds-icon-subtle, #6B778C)"
+};
+exports.fillMap = fillMap;
 /**
  * @codegenEnd
  */

package/dist/cjs/xcss/xcss.js

@@ -27,6 +27,7 @@ var tokensMap = {
   color: _styleMaps.textColorMap,
   columnGap: _styleMaps.spaceMap,
   display: _styleMaps.displayMap,
+  fill: _styleMaps.fillMap,
   flex: _styleMaps.flexMap,
   flexDirection: _styleMaps.flexDirectionMap,
   flexGrow: _styleMaps.flexGrowMap,

package/dist/es2019/version.json

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

package/dist/es2019/xcss/style-maps.partial.js

@@ -48,10 +48,10 @@ export const spaceMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::4da498214befc7e312ff00d4f9f5379f>>
+ * @codegen <<SignedSource::aa1cfa3cd24f141a85ac1e0b70dbd8a8>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["border", "background", "shadow", "text"]
+ * @codegenParams ["border", "background", "shadow", "text", "fill"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
 export const borderColorMap = {
@@ -224,6 +224,29 @@ export const textColorMap = {
   subtlest: "var(--ds-text-subtlest, #7A869A)",
   subtle: "var(--ds-text-subtle, #42526E)"
 };
+export const fillMap = {
+  'color.icon': "var(--ds-icon, #505F79)",
+  'accent.red': "var(--ds-icon-accent-red, #FF5630)",
+  'accent.orange': "var(--ds-icon-accent-orange, #D94008)",
+  'accent.yellow': "var(--ds-icon-accent-yellow, #FFAB00)",
+  'accent.green': "var(--ds-icon-accent-green, #36B37E)",
+  'accent.teal': "var(--ds-icon-accent-teal, #00B8D9)",
+  'accent.blue': "var(--ds-icon-accent-blue, #0065FF)",
+  'accent.purple': "var(--ds-icon-accent-purple, #6554C0)",
+  'accent.magenta': "var(--ds-icon-accent-magenta, #CD519D)",
+  'accent.gray': "var(--ds-icon-accent-gray, #5E6C84)",
+  disabled: "var(--ds-icon-disabled, #8993A4)",
+  inverse: "var(--ds-icon-inverse, #FFFFFF)",
+  selected: "var(--ds-icon-selected, #0052CC)",
+  brand: "var(--ds-icon-brand, #0065FF)",
+  danger: "var(--ds-icon-danger, #DE350B)",
+  warning: "var(--ds-icon-warning, #FFC400)",
+  'warning.inverse': "var(--ds-icon-warning-inverse, #253858)",
+  success: "var(--ds-icon-success, #00875A)",
+  discovery: "var(--ds-icon-discovery, #8777D9)",
+  information: "var(--ds-icon-information, #0747A6)",
+  subtle: "var(--ds-icon-subtle, #6B778C)"
+};
 /**
  * @codegenEnd
  */

package/dist/es2019/xcss/xcss.js

@@ -1,7 +1,7 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css as cssEmotion } from '@emotion/react';
 import warnOnce from '@atlaskit/ds-lib/warn-once';
-import { alignSelfMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderStyleMap, borderWidthMap, dimensionMap, displayMap, flexDirectionMap, flexGrowMap, flexMap, flexShrinkMap, layerMap, overflowBlockMap, overflowInlineMap, overflowMap, positionMap, shadowMap, spaceMap, textColorMap } from './style-maps.partial';
+import { alignSelfMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderStyleMap, borderWidthMap, dimensionMap, displayMap, fillMap, flexDirectionMap, flexGrowMap, flexMap, flexShrinkMap, layerMap, overflowBlockMap, overflowInlineMap, overflowMap, positionMap, shadowMap, spaceMap, textColorMap } from './style-maps.partial';
 const tokensMap = {
   alignSelf: alignSelfMap,
   backgroundColor: backgroundColorMap,
@@ -15,6 +15,7 @@ const tokensMap = {
   color: textColorMap,
   columnGap: spaceMap,
   display: displayMap,
+  fill: fillMap,
   flex: flexMap,
   flexDirection: flexDirectionMap,
   flexGrow: flexGrowMap,

package/dist/esm/version.json

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

package/dist/esm/xcss/style-maps.partial.js

@@ -49,10 +49,10 @@ export var spaceMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::4da498214befc7e312ff00d4f9f5379f>>
+ * @codegen <<SignedSource::aa1cfa3cd24f141a85ac1e0b70dbd8a8>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["border", "background", "shadow", "text"]
+ * @codegenParams ["border", "background", "shadow", "text", "fill"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
 export var borderColorMap = {
@@ -225,6 +225,29 @@ export var textColorMap = {
   subtlest: "var(--ds-text-subtlest, #7A869A)",
   subtle: "var(--ds-text-subtle, #42526E)"
 };
+export var fillMap = {
+  'color.icon': "var(--ds-icon, #505F79)",
+  'accent.red': "var(--ds-icon-accent-red, #FF5630)",
+  'accent.orange': "var(--ds-icon-accent-orange, #D94008)",
+  'accent.yellow': "var(--ds-icon-accent-yellow, #FFAB00)",
+  'accent.green': "var(--ds-icon-accent-green, #36B37E)",
+  'accent.teal': "var(--ds-icon-accent-teal, #00B8D9)",
+  'accent.blue': "var(--ds-icon-accent-blue, #0065FF)",
+  'accent.purple': "var(--ds-icon-accent-purple, #6554C0)",
+  'accent.magenta': "var(--ds-icon-accent-magenta, #CD519D)",
+  'accent.gray': "var(--ds-icon-accent-gray, #5E6C84)",
+  disabled: "var(--ds-icon-disabled, #8993A4)",
+  inverse: "var(--ds-icon-inverse, #FFFFFF)",
+  selected: "var(--ds-icon-selected, #0052CC)",
+  brand: "var(--ds-icon-brand, #0065FF)",
+  danger: "var(--ds-icon-danger, #DE350B)",
+  warning: "var(--ds-icon-warning, #FFC400)",
+  'warning.inverse': "var(--ds-icon-warning-inverse, #253858)",
+  success: "var(--ds-icon-success, #00875A)",
+  discovery: "var(--ds-icon-discovery, #8777D9)",
+  information: "var(--ds-icon-information, #0747A6)",
+  subtle: "var(--ds-icon-subtle, #6B778C)"
+};
 /**
  * @codegenEnd
  */

package/dist/esm/xcss/xcss.js

@@ -4,7 +4,7 @@ import _typeof from "@babel/runtime/helpers/typeof";
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css as cssEmotion } from '@emotion/react';
 import warnOnce from '@atlaskit/ds-lib/warn-once';
-import { alignSelfMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderStyleMap, borderWidthMap, dimensionMap, displayMap, flexDirectionMap, flexGrowMap, flexMap, flexShrinkMap, layerMap, overflowBlockMap, overflowInlineMap, overflowMap, positionMap, shadowMap, spaceMap, textColorMap } from './style-maps.partial';
+import { alignSelfMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderStyleMap, borderWidthMap, dimensionMap, displayMap, fillMap, flexDirectionMap, flexGrowMap, flexMap, flexShrinkMap, layerMap, overflowBlockMap, overflowInlineMap, overflowMap, positionMap, shadowMap, spaceMap, textColorMap } from './style-maps.partial';
 var tokensMap = {
   alignSelf: alignSelfMap,
   backgroundColor: backgroundColorMap,
@@ -18,6 +18,7 @@ var tokensMap = {
   color: textColorMap,
   columnGap: spaceMap,
   display: displayMap,
+  fill: fillMap,
   flex: flexMap,
   flexDirection: flexDirectionMap,
   flexGrow: flexGrowMap,

package/dist/types/xcss/style-maps.partial.d.ts

@@ -66,10 +66,10 @@ export type Space = keyof typeof spaceMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::4da498214befc7e312ff00d4f9f5379f>>
+ * @codegen <<SignedSource::aa1cfa3cd24f141a85ac1e0b70dbd8a8>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["border", "background", "shadow", "text"]
+ * @codegenParams ["border", "background", "shadow", "text", "fill"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
 export declare const borderColorMap: {
@@ -246,6 +246,30 @@ export declare const textColorMap: {
     readonly subtle: "var(--ds-text-subtle)";
 };
 export type TextColor = keyof typeof textColorMap;
+export declare const fillMap: {
+    readonly 'color.icon': "var(--ds-icon)";
+    readonly 'accent.red': "var(--ds-icon-accent-red)";
+    readonly 'accent.orange': "var(--ds-icon-accent-orange)";
+    readonly 'accent.yellow': "var(--ds-icon-accent-yellow)";
+    readonly 'accent.green': "var(--ds-icon-accent-green)";
+    readonly 'accent.teal': "var(--ds-icon-accent-teal)";
+    readonly 'accent.blue': "var(--ds-icon-accent-blue)";
+    readonly 'accent.purple': "var(--ds-icon-accent-purple)";
+    readonly 'accent.magenta': "var(--ds-icon-accent-magenta)";
+    readonly 'accent.gray': "var(--ds-icon-accent-gray)";
+    readonly disabled: "var(--ds-icon-disabled)";
+    readonly inverse: "var(--ds-icon-inverse)";
+    readonly selected: "var(--ds-icon-selected)";
+    readonly brand: "var(--ds-icon-brand)";
+    readonly danger: "var(--ds-icon-danger)";
+    readonly warning: "var(--ds-icon-warning)";
+    readonly 'warning.inverse': "var(--ds-icon-warning-inverse)";
+    readonly success: "var(--ds-icon-success)";
+    readonly discovery: "var(--ds-icon-discovery)";
+    readonly information: "var(--ds-icon-information)";
+    readonly subtle: "var(--ds-icon-subtle)";
+};
+export type Fill = keyof typeof fillMap;
 /**
  * @codegenEnd
  */
@@ -383,6 +407,7 @@ export type TokenisedProps = {
     color?: TextColor;
     columnGap?: Space;
     display?: Display;
+    fill?: Fill;
     flex?: Flex;
     flexDirection?: FlexDirection;
     flexGrow?: FlexGrow;

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

@@ -0,0 +1,18 @@
+/** @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;
+type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BoxProps<T>) => ReactElement | null) & FC<BoxProps<T>>;
+/**
+ * __Box__
+ *
+ * A Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
+ * Renders a `div` by default.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/box/examples)
+ * - [Code](https://atlassian.design/components/primitives/box/code)
+ * - [Usage](https://atlassian.design/components/primitives/box/usage)
+ */
+declare const Box: BoxComponent;
+export default Box;

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

@@ -0,0 +1,75 @@
+/** @jsx jsx */
+import { ElementType, ReactNode } from 'react';
+import { type Space } from '../xcss/style-maps.partial';
+export interface InlineProps<T extends ElementType = 'div'> {
+    /**
+     * The DOM element to render as the Inline. Defaults to `div`.
+     */
+    as?: 'div' | 'span' | 'ul' | 'ol';
+    /**
+     * Used to align children along the main axis.
+     */
+    alignBlock?: AlignBlock;
+    /**
+     * Used to align children along the cross axis.
+     */
+    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?: Space;
+    /**
+     * Represents the space between rows when content wraps.
+     * Used to override the `space` value in between rows.
+     */
+    rowSpace?: Space;
+    /**
+     * Renders a separator string between each child.
+     */
+    separator?: string;
+    /**
+     * A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * Elements to be rendered inside the Inline.
+     */
+    children: ReactNode;
+    /**
+     * Forwarded ref element
+     */
+    ref?: React.ComponentPropsWithRef<T>['ref'];
+}
+export type AlignInline = 'start' | 'center' | 'end';
+export type AlignBlock = 'start' | 'center' | 'end' | 'baseline';
+export type Spread = 'space-between';
+export type Grow = 'hug' | 'fill';
+/**
+ * __Inline__
+ *
+ * Inline is a primitive component based on 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<InlineProps<ElementType<any>>, "as" | "children" | "testId" | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "space" | "rowSpace" | "separator"> & import("react").RefAttributes<any>>>;
+export default Inline;

package/dist/types-ts4.5/components/internal/base-box.d.ts

@@ -0,0 +1,84 @@
+/** @jsx jsx */
+import { ComponentPropsWithoutRef, ElementType, FC, ReactElement, ReactNode } from 'react';
+import { BackgroundColor, type Space } from '../../xcss/style-maps.partial';
+import type { BasePrimitiveProps } from '../types';
+export type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
+export type As = 'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
+type BaseBoxPropsFoundation<T extends ElementType = 'div'> = {
+    /**
+     * The DOM element to render as the Box. Defaults to `div`.
+     */
+    as?: As;
+    /**
+     * The HTML className attribute.
+     *
+     * Before using this prop please ensure:
+     * - The styles cannot otherwise be achieved through `Box` directly.
+     * - The use case needs custom styles that cannot be designed or implemented differently
+     *
+     * Ensure you're using the `@atlaskit/eslint-plugin-design-system` with this prop to prevent unbounded usage.
+     *
+     * @see `@atlaskit/eslint-plugin-design-system`
+     */
+    className?: string;
+    /**
+     * Elements to be rendered inside the Box.
+     */
+    children?: ReactNode;
+    /**
+     * Token representing background color with a built-in fallback value.
+     */
+    backgroundColor?: BackgroundColor;
+    /**
+     * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
+     *
+     * @see paddingBlock
+     * @see paddingInline
+     */
+    padding?: Space;
+    /**
+     * Tokens representing CSS shorthand `paddingBlock`.
+     *
+     * @see paddingBlockStart
+     * @see paddingBlockEnd
+     */
+    paddingBlock?: Space;
+    /**
+     * Tokens representing CSS `paddingBlockStart`.
+     */
+    paddingBlockStart?: Space;
+    /**
+     * Tokens representing CSS `paddingBlockEnd`.
+     */
+    paddingBlockEnd?: Space;
+    /**
+     * Tokens representing CSS shorthand `paddingInline`.
+     *
+     * @see paddingInlineStart
+     * @see paddingInlineEnd
+     */
+    paddingInline?: Space;
+    /**
+     * Tokens representing CSS `paddingInlineStart`.
+     */
+    paddingInlineStart?: Space;
+    /**
+     * Tokens representing CSS `paddingInlineEnd`.
+     */
+    paddingInlineEnd?: Space;
+    /**
+     * Forwarded ref element
+     */
+    ref?: React.ComponentPropsWithRef<T>['ref'];
+};
+export type BaseBoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BaseBoxProps<T>) => ReactElement | null) & FC<BaseBoxProps<T>>;
+/**
+ * __Box__
+ *
+ * Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
+ * Renders a `div` by default.
+ *
+ * @internal
+ */
+export declare const BaseBox: BaseBoxComponent;
+export default BaseBox;

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

@@ -0,0 +1,61 @@
+/** @jsx jsx */
+import { ElementType, ReactNode } from 'react';
+import { type Space } from '../xcss/style-maps.partial';
+export interface 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 main axis.
+     */
+    alignBlock?: AlignBlock;
+    /**
+     * Used to align children along the cross axis.
+     */
+    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?: Space;
+    /**
+     * A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * Elements to be rendered inside the Stack.
+     */
+    children: ReactNode;
+    /**
+     * Forwarded ref element
+     */
+    ref?: React.ComponentPropsWithRef<T>['ref'];
+}
+export type AlignInline = 'start' | 'center' | 'end';
+export type AlignBlock = 'start' | 'center' | 'end';
+export type Spread = 'space-between';
+export type Grow = 'hug' | 'fill';
+/**
+ * __Stack__
+ *
+ * Stack is a primitive component based on flexbox that manages the vertical 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<StackProps<ElementType<any>>, "as" | "children" | "testId" | "alignInline" | "alignBlock" | "spread" | "grow" | "space"> & import("react").RefAttributes<any>>>;
+export default Stack;

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

@@ -0,0 +1,18 @@
+import type { CSSProperties } from 'react';
+import { type BoxXCSS } from '../xcss/xcss';
+export type BasePrimitiveProps = {
+    /**
+     * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * Inline styles to be applied to the primitive.
+     */
+    style?: CSSProperties;
+};
+export type PublicBoxPropsBase = {
+    /**
+     * Safe subset of styles that can be applied as a classname.
+     */
+    xcss?: BoxXCSS | Array<BoxXCSS | false | undefined>;
+};

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

@@ -0,0 +1,12 @@
+export declare const LAYERS: {
+    readonly card: 100;
+    readonly navigation: 200;
+    readonly dialog: 300;
+    readonly layer: 400;
+    readonly blanket: 500;
+    readonly modal: 510;
+    readonly flag: 600;
+    readonly spotlight: 700;
+    readonly tooltip: 800;
+};
+export type Layer = keyof typeof LAYERS;

package/dist/types-ts4.5/helpers/responsive/build-media-query-css.d.ts

@@ -0,0 +1,57 @@
+import { CSSObject } from '@emotion/react';
+import { SMALLEST_BREAKPOINT } from './constants';
+import type { Breakpoint } from './types';
+/**
+ * Build a map of breakpoints to css with media queries and nested styles.
+ *
+ * @experimental Unsafe for usage as the API is not finalized.
+ *
+ * @example
+ * A map to build optional `display:none` for consumption on a div.
+ * ```ts
+ * const hideMediaQueries = buildAboveMediaQueryCSS({ display: 'none' });
+ *
+ * const Component = ({ hideAtBreakpoints: ('xs' | 'sm')[], children: ReactNode }) => {
+ *   return <div css={hideAtBreakpoints.map(b => hideMediaQueries[b])}>{children}</div>;
+ * }
+ * ```
+ *
+ * This roughly builds a map that will look roughly like this (if done manually):
+ * ```ts
+ * {
+ *   xxs: css({ '@media (min-width: 0px)': { display: 'none' } }),
+ *   xs: css({ '@media (min-width: …px)': { display: 'none' } }),
+ *   sm: css({ '@media (min-width: …px)': { display: 'none' } }),
+ * }
+ * ```
+ */
+export declare const UNSAFE_buildAboveMediaQueryCSS: (input: CSSObject | ((breakpoint: Breakpoint) => CSSObject)) => Required<Partial<Record<Breakpoint, import("@emotion/react").SerializedStyles>>>;
+/**
+ * Build a map of breakpoints to css with media queries and nested styles.
+ *
+ * WARNING: The smallest breakpoint is not a valid key as a media query below 0px is misleading.
+ * This is separated from `buildAboveMediaQueryCSS` for that specific reason, you cannot have type safety with this variance.
+ *
+ * @experimental Unsafe for usage as the API is not finalized.
+ *
+ * @example
+ * A map to build optional `display:none` for consumption on a div.
+ * ```ts
+ * const hideMediaQueries = buildBelowMediaQueryCSS({ display: 'none' });
+ *
+ * const Component = ({ hideAtBreakpoints: ('xs' | 'sm')[], children: ReactNode }) => {
+ *   return <div css={hideAtBreakpoints.map(b => hideMediaQueries[b])}>{children}</div>;
+ * }
+ * ```
+ *
+ * This roughly builds a map that will look roughly like this (if done manually):
+ * ```ts
+ * {
+ *   xs: css({ '@media (max-width: …px)': { display: 'none' } }),
+ *   sm: css({ '@media (max-width: …px)': { display: 'none' } }),
+ * }
+ * ```
+ *
+ * @experimental Unsafe for usage as the API is not finalized.
+ */
+export declare const UNSAFE_buildBelowMediaQueryCSS: (input: CSSObject | ((breakpoint: Exclude<Breakpoint, typeof SMALLEST_BREAKPOINT>) => CSSObject)) => Required<Omit<Partial<Record<Breakpoint, import("@emotion/react").SerializedStyles>>, "xxs">>;

package/dist/types-ts4.5/helpers/responsive/constants.d.ts

@@ -0,0 +1,31 @@
+import type { Breakpoint, BreakpointConfig } from './types';
+/**
+ * Our internal configuration for breakpoints configuration.
+ *
+ * @experimental Unsafe for consumption outside of the design system itself.
+ */
+export declare const UNSAFE_BREAKPOINTS_CONFIG: Record<Breakpoint, BreakpointConfig>;
+/**
+ * The list of breakpoints in order from smallest to largest.  You may need to clone and reverse this list if you want the opposite.
+ *
+ * This is intentional for cascading with `min-width` or `media.above`. Media queries go from lowest width to highest.
+ *
+ * @experimental Unsafe for consumption outside of the design system itself.
+ */
+export declare const UNSAFE_BREAKPOINTS_ORDERED_LIST: [
+    "xxs",
+    "xs",
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "xxl"
+];
+/**
+ * This is our smallest breakpoint with a few nuances to it:
+ * 1. It is the default value for shorthands, eg. `<GridItem span={6} />` maps to `{ [SMALLEST_BREAKPOINT]: props.span }`
+ * 2. It's omitted in `media.below` as there's nothing below `0px`.
+ *
+ * @experimental There's a chance this will change in _value_, but should only be used in a way that it will not matter if this value changes.
+ */
+export declare const SMALLEST_BREAKPOINT: "xxs";

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

@@ -0,0 +1,4 @@
+export { UNSAFE_media } from './media-helper';
+export { UNSAFE_buildAboveMediaQueryCSS, UNSAFE_buildBelowMediaQueryCSS, } from './build-media-query-css';
+export { UNSAFE_BREAKPOINTS_ORDERED_LIST, UNSAFE_BREAKPOINTS_CONFIG, } from './constants';
+export type { Breakpoint, ResponsiveObject, ResponsiveCSSObject, } from './types';