@atlaskit/primitives 0.2.1 → 0.3.0

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

@@ -36,31 +36,29 @@ export declare type Spread = 'space-between';
 export declare type Grow = 'hug' | 'fill';
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0e30ffcc6aef7932f9d8ff2543327236>>
+ * @codegen <<SignedSource::41d7002b7f69aa44d0d8598e07a1afc6>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["space"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
 declare const spaceMap: {
-    [k: string]: {
-        readonly '0': import("@emotion/react").SerializedStyles;
-        readonly '025': import("@emotion/react").SerializedStyles;
-        readonly '050': import("@emotion/react").SerializedStyles;
-        readonly '075': import("@emotion/react").SerializedStyles;
-        readonly '100': import("@emotion/react").SerializedStyles;
-        readonly '150': import("@emotion/react").SerializedStyles;
-        readonly '200': import("@emotion/react").SerializedStyles;
-        readonly '250': import("@emotion/react").SerializedStyles;
-        readonly '300': import("@emotion/react").SerializedStyles;
-        readonly '400': import("@emotion/react").SerializedStyles;
-        readonly '500': import("@emotion/react").SerializedStyles;
-        readonly '600': import("@emotion/react").SerializedStyles;
-        readonly '800': import("@emotion/react").SerializedStyles;
-        readonly '1000': import("@emotion/react").SerializedStyles;
-    };
+    readonly '0': import("@emotion/react").SerializedStyles;
+    readonly '025': import("@emotion/react").SerializedStyles;
+    readonly '050': import("@emotion/react").SerializedStyles;
+    readonly '075': import("@emotion/react").SerializedStyles;
+    readonly '100': import("@emotion/react").SerializedStyles;
+    readonly '150': import("@emotion/react").SerializedStyles;
+    readonly '200': import("@emotion/react").SerializedStyles;
+    readonly '250': import("@emotion/react").SerializedStyles;
+    readonly '300': import("@emotion/react").SerializedStyles;
+    readonly '400': import("@emotion/react").SerializedStyles;
+    readonly '500': import("@emotion/react").SerializedStyles;
+    readonly '600': import("@emotion/react").SerializedStyles;
+    readonly '800': import("@emotion/react").SerializedStyles;
+    readonly '1000': import("@emotion/react").SerializedStyles;
 };
-export declare type Space = keyof typeof spaceMap.gap;
+export declare type Space = keyof typeof spaceMap;
 /**
  * __Stack__
  *

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

@@ -1,4 +1,5 @@
 import type { CSSProperties } from 'react';
+import { BorderWidth, Display, Padding, PaddingBlock, PaddingBlockEnd, PaddingBlockStart, PaddingInline, PaddingInlineEnd, PaddingInlineStart } from './internal/base-box.partial';
 /**
  * Restricted set of inline styles to be applied to the primitive.
  * Should be avoided where possible, in favor of the pre-defined props and values on the primitive itself.
@@ -18,3 +19,51 @@ export interface BasePrimitiveProps {
      */
     UNSAFE_style?: CSSProperties;
 }
+export declare type PublicBoxPropsBase = {
+    /**
+     * Defines border width.
+     */
+    borderWidth?: BorderWidth;
+    /**
+     * Defines display type and layout. Defaults to `block`.
+     */
+    display?: Display;
+    /**
+     * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
+     *
+     * @see paddingBlock
+     * @see paddingInline
+     */
+    padding?: Padding;
+    /**
+     * Tokens representing CSS shorthand `paddingBlock`.
+     *
+     * @see paddingBlockStart
+     * @see paddingBlockEnd
+     */
+    paddingBlock?: PaddingBlock;
+    /**
+     * Tokens representing CSS `paddingBlockStart`.
+     */
+    paddingBlockStart?: PaddingBlockStart;
+    /**
+     * Tokens representing CSS `paddingBlockEnd`.
+     */
+    paddingBlockEnd?: PaddingBlockEnd;
+    /**
+     * Tokens representing CSS shorthand `paddingInline`.
+     *
+     * @see paddingInlineStart
+     * @see paddingInlineEnd
+     */
+    paddingInline?: PaddingInline;
+    /**
+     * Tokens representing CSS `paddingInlineStart`.
+     */
+    paddingInlineStart?: PaddingInlineStart;
+    /**
+     * Tokens representing CSS `paddingInlineEnd`.
+     */
+    paddingInlineEnd?: PaddingInlineEnd;
+    customStyles?: CustomStyles;
+};

package/dist/types/constants.d.ts

@@ -1,3 +1,4 @@
+import { UNSAFE_Breakpoint as Breakpoint, UNSAFE_BreakpointConfig as BreakpointConfig, UNSAFE_BREAKPOINTS_CONFIG as BREAKPOINTS_CONFIG, UNSAFE_BREAKPOINTS_LIST as BREAKPOINTS_LIST } from '@atlaskit/ds-explorations';
 export declare const LAYERS: {
     readonly card: 100;
     readonly navigation: 200;
@@ -10,3 +11,4 @@ export declare const LAYERS: {
     readonly tooltip: 800;
 };
 export declare type Layer = keyof typeof LAYERS;
+export { BREAKPOINTS_CONFIG, BREAKPOINTS_LIST, type Breakpoint, type BreakpointConfig, };

package/dist/types/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/helpers/responsive/constants.d.ts

@@ -0,0 +1,23 @@
+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/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/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}px)`;
+        readonly xs: `@media (min-width: ${number}px)`;
+        readonly sm: `@media (min-width: ${number}px)`;
+        readonly md: `@media (min-width: ${number}px)`;
+        readonly lg: `@media (min-width: ${number}px)`;
+        readonly xl: `@media (min-width: ${number}px)`;
+        readonly xxl: `@media (min-width: ${number}px)`;
+    };
+    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: 0px)`
+         */
+        readonly xs: `@media (max-width: ${number}px)`;
+        readonly sm: `@media (max-width: ${number}px)`;
+        readonly md: `@media (max-width: ${number}px)`;
+        readonly lg: `@media (max-width: ${number}px)`;
+        readonly xl: `@media (max-width: ${number}px)`;
+        readonly xxl: `@media (max-width: ${number}px)`;
+    };
+};
+/**
+ * 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/helpers/responsive/types.d.ts

@@ -0,0 +1,47 @@
+import { css } from '@emotion/react';
+import { token } from '@atlaskit/tokens';
+/**
+ * The breakpoints we have for responsiveness.
+ */
+export declare type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+/**
+ * An object type mapping a value to each breakpoint (optionally)
+ */
+export declare 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 declare type ResponsiveCSSObject = ResponsiveObject<ReturnType<typeof css>>;
+/**
+ * Our internal breakpoint config used to build media queries and define attributes for certain components.
+ */
+export declare 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;
+    /**
+     * The max-width used in media queries
+     */
+    max: number;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Primitives are token-backed low-level building blocks.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -34,12 +34,15 @@
     ".": "./src/index.tsx",
     "./box": "./src/components/box.tsx",
     "./stack": "./src/components/stack.partial.tsx",
-    "./inline": "./src/components/inline.partial.tsx"
+    "./inline": "./src/components/inline.partial.tsx",
+    "./responsive": "./src/helpers/responsive/index.tsx"
   },
   "dependencies": {
+    "@atlaskit/ds-explorations": "*",
     "@atlaskit/tokens": "^1.2.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/react": "^11.7.1"
+    "@emotion/react": "^11.7.1",
+    "tiny-invariant": "^1.2.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"

package/report.api.md

@@ -26,6 +26,7 @@ import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 import { SerializedStyles } from '@emotion/react';
+import { UNSAFE_Breakpoint } from '@atlaskit/ds-explorations';
 
 // @public (undocumented)
 type AlignBlock = 'baseline' | 'center' | 'end' | 'start';
@@ -137,7 +138,7 @@ type BaseBoxPropsFoundation<T extends ElementType> = {
   backgroundColor?: BackgroundColor;
   shadow?: Shadow;
   borderStyle?: BorderStyle;
-  borderWidth?: BorderWidth;
+  borderWidth?: BorderWidth | Partial<Record<UNSAFE_Breakpoint, BorderWidth>>;
   borderColor?: BorderColor;
   borderRadius?: BorderRadius;
   layer?: Layer;
@@ -148,16 +149,28 @@ type BaseBoxPropsFoundation<T extends ElementType> = {
   overflow?: Overflow;
   overflowInline?: OverflowInline;
   overflowBlock?: OverflowBlock;
-  padding?: Padding;
-  paddingBlock?: PaddingBlock;
-  paddingBlockStart?: PaddingBlockStart;
-  paddingBlockEnd?: PaddingBlockEnd;
-  paddingInline?: PaddingInline;
-  paddingInlineStart?: PaddingInlineStart;
-  paddingInlineEnd?: PaddingInlineEnd;
+  padding?: Padding | Partial<Record<UNSAFE_Breakpoint, Padding>>;
+  paddingBlock?:
+    | PaddingBlock
+    | Partial<Record<UNSAFE_Breakpoint, PaddingBlock>>;
+  paddingBlockStart?:
+    | PaddingBlockStart
+    | Partial<Record<UNSAFE_Breakpoint, PaddingBlockStart>>;
+  paddingBlockEnd?:
+    | PaddingBlockEnd
+    | Partial<Record<UNSAFE_Breakpoint, PaddingBlockEnd>>;
+  paddingInline?:
+    | PaddingInline
+    | Partial<Record<UNSAFE_Breakpoint, PaddingInline>>;
+  paddingInlineStart?:
+    | PaddingInlineStart
+    | Partial<Record<UNSAFE_Breakpoint, PaddingInlineStart>>;
+  paddingInlineEnd?:
+    | PaddingInlineEnd
+    | Partial<Record<UNSAFE_Breakpoint, PaddingInlineEnd>>;
   width?: Width;
   height?: Height;
-  display?: Display;
+  display?: Display | Partial<Record<UNSAFE_Breakpoint, Display>>;
   position?: Position;
   ref?: ComponentPropsWithRef<T>['ref'];
 };
@@ -223,13 +236,27 @@ type BorderWidth = keyof typeof borderWidthMap;
 
 // @public (undocumented)
 const borderWidthMap: {
-  readonly 'size.050': SerializedStyles;
-  readonly 'size.100': SerializedStyles;
+  readonly 'size.0': 'var(--ds-width-0)';
+  readonly 'size.050': 'var(--ds-width-050)';
+  readonly 'size.100': 'var(--ds-width-100)';
 };
 
 // @public
 export const Box: BoxComponent;
 
+// @public (undocumented)
+const BOX_RESPONSIVE_PROPS: readonly [
+  'borderWidth',
+  'display',
+  'padding',
+  'paddingBlock',
+  'paddingBlockStart',
+  'paddingBlockEnd',
+  'paddingInline',
+  'paddingInlineStart',
+  'paddingInlineEnd',
+];
+
 // @public (undocumented)
 type BoxComponent<T extends ElementType = 'div'> = (<
   T extends ElementType = 'div',
@@ -241,14 +268,12 @@ type BoxComponent<T extends ElementType = 'div'> = (<
 // @public (undocumented)
 export type BoxProps<T extends ElementType = 'div'> = Omit<
   BaseBoxProps<T>,
-  'UNSAFE_style' | 'className'
+  'UNSAFE_style' | 'className' | BoxResponsiveProp
 > &
-  BoxPropsBase;
+  PublicBoxPropsBase;
 
 // @public (undocumented)
-type BoxPropsBase = {
-  customStyles?: CustomStyles;
-};
+type BoxResponsiveProp = typeof BOX_RESPONSIVE_PROPS[number];
 
 // @public
 type CustomStyles = Pick<
@@ -283,11 +308,11 @@ type Display = keyof typeof displayMap;
 
 // @public (undocumented)
 const displayMap: {
-  readonly block: SerializedStyles;
-  readonly inline: SerializedStyles;
-  readonly flex: SerializedStyles;
-  readonly 'inline-flex': SerializedStyles;
-  readonly 'inline-block': SerializedStyles;
+  readonly block: 'block';
+  readonly inline: 'inline';
+  readonly flex: 'flex';
+  readonly 'inline-flex': 'inline-flex';
+  readonly 'inline-block': 'inline-block';
 };
 
 // @public (undocumented)
@@ -399,44 +424,42 @@ const overflowMap: {
 };
 
 // @public (undocumented)
-type Padding = keyof typeof paddingMap.padding;
+type Padding = keyof typeof paddingMap;
 
 // @public (undocumented)
-type PaddingBlock = keyof typeof paddingMap.paddingBlock;
+type PaddingBlock = keyof typeof paddingMap;
 
 // @public (undocumented)
-type PaddingBlockEnd = keyof typeof paddingMap.paddingBlockEnd;
+type PaddingBlockEnd = keyof typeof paddingMap;
 
 // @public (undocumented)
-type PaddingBlockStart = keyof typeof paddingMap.paddingBlockStart;
+type PaddingBlockStart = keyof typeof paddingMap;
 
 // @public (undocumented)
-type PaddingInline = keyof typeof paddingMap.paddingInline;
+type PaddingInline = keyof typeof paddingMap;
 
 // @public (undocumented)
-type PaddingInlineEnd = keyof typeof paddingMap.paddingInlineEnd;
+type PaddingInlineEnd = keyof typeof paddingMap;
 
 // @public (undocumented)
-type PaddingInlineStart = keyof typeof paddingMap.paddingInlineStart;
+type PaddingInlineStart = keyof typeof paddingMap;
 
 // @public
 const paddingMap: {
-  [k: string]: {
-    readonly 'space.0': SerializedStyles;
-    readonly 'space.025': SerializedStyles;
-    readonly 'space.050': SerializedStyles;
-    readonly 'space.075': SerializedStyles;
-    readonly 'space.100': SerializedStyles;
-    readonly 'space.150': SerializedStyles;
-    readonly 'space.200': SerializedStyles;
-    readonly 'space.250': SerializedStyles;
-    readonly 'space.300': SerializedStyles;
-    readonly 'space.400': SerializedStyles;
-    readonly 'space.500': SerializedStyles;
-    readonly 'space.600': SerializedStyles;
-    readonly 'space.800': SerializedStyles;
-    readonly 'space.1000': SerializedStyles;
-  };
+  readonly 'space.0': 'var(--ds-space-0)';
+  readonly 'space.025': 'var(--ds-space-025)';
+  readonly 'space.050': 'var(--ds-space-050)';
+  readonly 'space.075': 'var(--ds-space-075)';
+  readonly 'space.100': 'var(--ds-space-100)';
+  readonly 'space.150': 'var(--ds-space-150)';
+  readonly 'space.200': 'var(--ds-space-200)';
+  readonly 'space.250': 'var(--ds-space-250)';
+  readonly 'space.300': 'var(--ds-space-300)';
+  readonly 'space.400': 'var(--ds-space-400)';
+  readonly 'space.500': 'var(--ds-space-500)';
+  readonly 'space.600': 'var(--ds-space-600)';
+  readonly 'space.800': 'var(--ds-space-800)';
+  readonly 'space.1000': 'var(--ds-space-1000)';
 };
 
 // @public (undocumented)
@@ -450,6 +473,20 @@ const positionMap: {
   readonly static: SerializedStyles;
 };
 
+// @public (undocumented)
+type PublicBoxPropsBase = {
+  borderWidth?: BorderWidth;
+  display?: Display;
+  padding?: Padding;
+  paddingBlock?: PaddingBlock;
+  paddingBlockStart?: PaddingBlockStart;
+  paddingBlockEnd?: PaddingBlockEnd;
+  paddingInline?: PaddingInline;
+  paddingInlineStart?: PaddingInlineStart;
+  paddingInlineEnd?: PaddingInlineEnd;
+  customStyles?: CustomStyles;
+};
+
 // @public (undocumented)
 type Shadow = keyof typeof shadowMap;
 
@@ -463,49 +500,45 @@ const shadowMap: {
 };
 
 // @public (undocumented)
-type Space = keyof typeof spaceMap.gap;
+type Space = keyof typeof spaceMap;
 
 // @public (undocumented)
-type Space_2 = keyof typeof spaceMap_2.gap;
+type Space_2 = keyof typeof spaceMap_2;
 
 // @public
 const spaceMap: {
-  [k: string]: {
-    readonly '0': SerializedStyles;
-    readonly '025': SerializedStyles;
-    readonly '050': SerializedStyles;
-    readonly '075': SerializedStyles;
-    readonly '100': SerializedStyles;
-    readonly '150': SerializedStyles;
-    readonly '200': SerializedStyles;
-    readonly '250': SerializedStyles;
-    readonly '300': SerializedStyles;
-    readonly '400': SerializedStyles;
-    readonly '500': SerializedStyles;
-    readonly '600': SerializedStyles;
-    readonly '800': SerializedStyles;
-    readonly '1000': SerializedStyles;
-  };
+  readonly '0': SerializedStyles;
+  readonly '025': SerializedStyles;
+  readonly '050': SerializedStyles;
+  readonly '075': SerializedStyles;
+  readonly '100': SerializedStyles;
+  readonly '150': SerializedStyles;
+  readonly '200': SerializedStyles;
+  readonly '250': SerializedStyles;
+  readonly '300': SerializedStyles;
+  readonly '400': SerializedStyles;
+  readonly '500': SerializedStyles;
+  readonly '600': SerializedStyles;
+  readonly '800': SerializedStyles;
+  readonly '1000': SerializedStyles;
 };
 
 // @public
 const spaceMap_2: {
-  [k: string]: {
-    readonly '0': SerializedStyles;
-    readonly '025': SerializedStyles;
-    readonly '050': SerializedStyles;
-    readonly '075': SerializedStyles;
-    readonly '100': SerializedStyles;
-    readonly '150': SerializedStyles;
-    readonly '200': SerializedStyles;
-    readonly '250': SerializedStyles;
-    readonly '300': SerializedStyles;
-    readonly '400': SerializedStyles;
-    readonly '500': SerializedStyles;
-    readonly '600': SerializedStyles;
-    readonly '800': SerializedStyles;
-    readonly '1000': SerializedStyles;
-  };
+  readonly '0': SerializedStyles;
+  readonly '025': SerializedStyles;
+  readonly '050': SerializedStyles;
+  readonly '075': SerializedStyles;
+  readonly '100': SerializedStyles;
+  readonly '150': SerializedStyles;
+  readonly '200': SerializedStyles;
+  readonly '250': SerializedStyles;
+  readonly '300': SerializedStyles;
+  readonly '400': SerializedStyles;
+  readonly '500': SerializedStyles;
+  readonly '600': SerializedStyles;
+  readonly '800': SerializedStyles;
+  readonly '1000': SerializedStyles;
 };
 
 // @public (undocumented)

package/responsive/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@atlaskit/primitives/responsive",
+  "main": "../dist/cjs/helpers/responsive/index.js",
+  "module": "../dist/esm/helpers/responsive/index.js",
+  "module:es2019": "../dist/es2019/helpers/responsive/index.js",
+  "sideEffects": false,
+  "types": "../dist/types/helpers/responsive/index.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/helpers/responsive/index.d.ts"
+      ]
+    }
+  }
+}