@atlaskit/primitives 0.9.2 → 0.9.4

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

@@ -1,21 +1,21 @@
 import { SerializedStyles } from '@emotion/react';
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7d4a8604dc454e30c0fec5c1330ea7c5>>
+ * @codegen <<SignedSource::2c35cc3f884146ac8ccdf053bf413481>>
  * @codegenId dimensions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["dimensions"]
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::dbad5eb9ef292d4ec59f90459a81e1d6>>
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
  */
 export declare const dimensionMap: {
     readonly '100%': "100%";
-    readonly 'size.100': "16px";
-    readonly 'size.200': "24px";
-    readonly 'size.300': "32px";
-    readonly 'size.400': "40px";
-    readonly 'size.500': "48px";
-    readonly 'size.600': "96px";
-    readonly 'size.1000': "192px";
+    readonly 'size.100': "1rem";
+    readonly 'size.200': "1.5rem";
+    readonly 'size.300': "2rem";
+    readonly 'size.400': "2.5rem";
+    readonly 'size.500': "3rem";
+    readonly 'size.600': "6rem";
+    readonly 'size.1000': "12rem";
 };
 type Dimension = keyof typeof dimensionMap;
 export type Width = Dimension;
@@ -39,10 +39,10 @@ export type MinInlineSize = Dimension;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9fbc4dfcd8f43f52bff6b3bb666397fe>>
+ * @codegen <<SignedSource::c32ec2103b151d3533775390e92f0f03>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::86e173b0e020fe5d091fdf4bff023711>>
  */
 export declare const spaceMap: {
     'space.0': "var(--ds-space-0)";
@@ -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,18 +246,42 @@ 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
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::64f7b08cdbce710fba3157594ea695a8>>
+ * @codegen <<SignedSource::e63fc5ff12523b2d49dc72925e1648e6>>
  * @codegenId misc
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["align-self", "border-style", "display", "flex-direction", "flex-grow", "flex-shrink", "flex", "layer", "overflow", "position"]
  * @codegenDependency ../../scripts/codegen-file-templates/align-self.tsx <<SignedSource::074079802534462de54bf882bb2073e5>>
  * @codegenDependency ../../scripts/codegen-file-templates/border-style.tsx <<SignedSource::87e7e289ffeaac901997c4af98084a5f>>
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::dbad5eb9ef292d4ec59f90459a81e1d6>>
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
  * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::04ea30fcb3c02f2545af7fdc0206e645>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex-grow.tsx <<SignedSource::b8a06b122cb609170f1f42778a6c270e>>
@@ -346,11 +370,11 @@ export type Position = keyof typeof positionMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e3e1d54f37a0f8c524ccc5c8e22ad5bf>>
+ * @codegen <<SignedSource::80ae367205568f9ca76d35f0cbc9d127>>
  * @codegenId border
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["width", "radius"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::a4f70bd83edd3dd448c6eccda60abdf7>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::81055547b21306c07a3e8a3c734a2f1c>>
  */
 export declare const borderWidthMap: {
     readonly 'width.0': "var(--ds-width-0)";
@@ -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,33 @@
+import type { Breakpoint, BreakpointConfig } from './types';
+/**
+ * Our internal configuration for breakpoints configuration.
+ *
+ * These are `rem` based multiples.
+ *
+ * @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';

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

@@ -0,0 +1,45 @@
+/**
+ * This is an object of usable media query helpers using our internal breakpoints configuration.
+ *
+ * @experimental Unsafe for usage as the API is not finalized.
+ */
+export declare const UNSAFE_media: {
+    readonly above: {
+        /**
+         * `above.xxs` is redundant and no media query should be used, but it's included for programatic purposes…
+         *
+         * Eg. this is `@media (min-width: 0px)`
+         */
+        readonly xxs: `@media (min-width: ${number}rem)`;
+        readonly xs: `@media (min-width: ${number}rem)`;
+        readonly sm: `@media (min-width: ${number}rem)`;
+        readonly md: `@media (min-width: ${number}rem)`;
+        readonly lg: `@media (min-width: ${number}rem)`;
+        readonly xl: `@media (min-width: ${number}rem)`;
+        readonly xxl: `@media (min-width: ${number}rem)`;
+    };
+    readonly below: {
+        /**
+         * A media query to target viewports below the min width of a given breakpoint.
+         * Note that `media.below.xxs` is intentionally omitted as this would be `@media (max-width: 0rem)`
+         */
+        readonly xs: `@media (max-width: ${number}rem)`;
+        readonly sm: `@media (max-width: ${number}rem)`;
+        readonly md: `@media (max-width: ${number}rem)`;
+        readonly lg: `@media (max-width: ${number}rem)`;
+        readonly xl: `@media (max-width: ${number}rem)`;
+        readonly xxl: `@media (max-width: ${number}rem)`;
+    };
+};
+/**
+ * With these types:
+ * ```
+ * type MediaQuery = `@media (${string})`;
+ * type ResponsiveMediaObject = Record<Breakpoint, MediaQuery>;
+ * ```
+ *
+ * TODO: This `media` object as of typescript@4.9, would benefit from satisfies, eg.:
+ * ```
+ * const UNSAFE_media = { … } satisfies Record<'above' | 'only', ResponsiveMediaObject> & { below: Omit<ResponsiveMediaObject, 'xxs'> }
+ * ```
+ */

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

@@ -0,0 +1,52 @@
+import { SerializedStyles } from '@emotion/react';
+import { token } from '@atlaskit/tokens';
+/**
+ * The breakpoints we have for responsiveness.
+ */
+export type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+/**
+ * An object type mapping a value to each breakpoint (optionally)
+ */
+export type ResponsiveObject<T> = Partial<Record<Breakpoint, T>>;
+/**
+ * A map of breakpoints to CSS, commonly used to build maps given a responsive object
+ * so we can statically compile CSS upfront, but dynamically apply it.
+ *
+ * @example Here we could conditionally load margins based a `setMarginBreakpoints={['xs', 'md']}` type prop.
+ * ```tsx
+ * const marginMediaQueries = {
+ *   xxs: css({ [media.above.xxs]: margin: 0 } }),
+ *   xs: css({ [media.above.xs]: margin: 4 } }),
+ *   //…
+ * }
+ *
+ * return <div css={setMarginBreakpoints.map(breakpoint => marginMediaQueries[breakpoint])} />
+ * ```
+ */
+export type ResponsiveCSSObject = ResponsiveObject<SerializedStyles>;
+/**
+ * Our internal breakpoint config used to build media queries and define attributes for certain components.
+ */
+export type BreakpointConfig = {
+    /**
+     * The gap between a `GridItem`.
+     */
+    gridItemGutter: ReturnType<typeof token>;
+    /**
+     * The outer whitespace of a `Grid` item.
+     */
+    gridMargin: ReturnType<typeof token>;
+    /**
+     * The min-width used in media queries
+     */
+    min: `${number}rem`;
+    /**
+     * The max-width used in media queries
+     */
+    max: `${number}rem`;
+    /**
+     * To ensure min-width and max-width do both target at the same time, we subtract a value.
+     * We use a fractional value here as used in other libraries and described in @link https://www.w3.org/TR/mediaqueries-4/#mq-min-max: "…possibility of fractional viewport sizes which can occur as a result of non-integer pixel densities…"
+     */
+    below: `${number}rem`;
+};

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

@@ -0,0 +1,4 @@
+export { default as Box, type BoxProps } from './components/box';
+export { default as Inline, type InlineProps } from './components/inline';
+export { xcss } from './xcss/xcss';
+export { default as Stack, type StackProps } from './components/stack';