@atlaskit/primitives 0.12.6 → 0.13.0

package/dist/types/helpers/responsive/constants.d.ts

@@ -1,12 +1,49 @@
-import type { Breakpoint, BreakpointConfig } from './types';
 /**
  * Our internal configuration for breakpoints configuration.
  *
- * These are `rem` based multiples.
+ * We explicitly use `-0.01rem` for "max" values to both ensure we do not overlap our media queries, but also don't skip any fractional pixels.  There is a chance this is not safe in some browsers, eg. Safari has weird rounding.
+ * @see: https://tzi.fr/css/prevent-double-breakpoint/
  *
- * @experimental Unsafe for consumption outside of the design system itself.
+ * @experimental Unsafe for direct consumption outside of the design system itself; please use our `media` export instead for media queries.
  */
-export declare const UNSAFE_BREAKPOINTS_CONFIG: Record<Breakpoint, BreakpointConfig>;
+export declare const UNSAFE_BREAKPOINTS_CONFIG: {
+    readonly xxs: {
+        readonly gridItemGutter: "var(--ds-space-200)";
+        readonly gridMargin: "var(--ds-space-200)";
+        readonly min: "0rem";
+        readonly max: "29.99rem";
+    };
+    readonly xs: {
+        readonly gridItemGutter: "var(--ds-space-200)";
+        readonly gridMargin: "var(--ds-space-200)";
+        readonly min: "30rem";
+        readonly max: "47.99rem";
+    };
+    readonly sm: {
+        readonly gridItemGutter: "var(--ds-space-200)";
+        readonly gridMargin: "var(--ds-space-300)";
+        readonly min: "48rem";
+        readonly max: "63.99rem";
+    };
+    readonly md: {
+        readonly gridItemGutter: "var(--ds-space-300)";
+        readonly gridMargin: "var(--ds-space-400)";
+        readonly min: "64rem";
+        readonly max: "89.99rem";
+    };
+    readonly lg: {
+        readonly gridItemGutter: "var(--ds-space-400)";
+        readonly gridMargin: "var(--ds-space-400)";
+        readonly min: "90rem";
+        readonly max: "109.99rem";
+    };
+    readonly xl: {
+        readonly gridItemGutter: "var(--ds-space-400)";
+        readonly gridMargin: "var(--ds-space-500)";
+        readonly min: "110rem";
+        readonly max: null;
+    };
+};
 /**
  * The list of breakpoints in order from smallest to largest.  You may need to clone and reverse this list if you want the opposite.
  *
@@ -14,12 +51,10 @@ export declare const UNSAFE_BREAKPOINTS_CONFIG: Record<Breakpoint, BreakpointCon
  *
  * @experimental Unsafe for consumption outside of the design system itself.
  */
-export declare const UNSAFE_BREAKPOINTS_ORDERED_LIST: ["xxs", "xs", "sm", "md", "lg", "xl", "xxl"];
+export declare const UNSAFE_BREAKPOINTS_ORDERED_LIST: ["xxs", "xs", "sm", "md", "lg", "xl"];
 /**
  * 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

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

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

@@ -1,45 +1,75 @@
 /**
  * This is an object of usable media query helpers using our internal breakpoints configuration.
  *
- * @experimental Unsafe for usage as the API is not finalized.
+ * @internal This explicitly has and should not be used outside of ADS-owned repos (via sourcegraph); to be removed following an internal deprecation and migration.
  */
 export declare const UNSAFE_media: {
-    readonly above: {
+    /**
+     * A media query to target viewports above the min width of a given breakpoint.
+     * Note that `media.above.xs` is redundant and should not be used, but it's included for programatic purposes.
+     */
+    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 xxs: "@media all";
+        readonly xs: "@media (min-width: 30rem)";
+        readonly sm: "@media (min-width: 48rem)";
+        readonly md: "@media (min-width: 64rem)";
+        readonly lg: "@media (min-width: 90rem)";
+        readonly xl: "@media (min-width: 110rem)";
     };
-    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)`;
+    /**
+     * A media query to target viewports below the min width of a given breakpoint.  We do this by testing the inverse, eg. below = not above…
+     *
+     * NOTE: `below.xxs` is intentionally not included as it could lead to incorrect usages as it's never accessible as this would be `xxs: '@media not all',`
+     *
+     * We use this syntax as a more compatible way to ensure media queries do not overlap, eg. `media.above.md` and `media.below.md` should not both trigger at once.
+     * This is well describe in this: @see https://stackoverflow.com/a/13649011
+     *
+     * Ideally we would use media queries level 4 to improve this interface, but this works and browser support might not be sufficient yet: @see https://www.w3.org/TR/mediaqueries-4/
+     *
+     * @internal Not intended to be used outside of DST at this stage.
+     * @experimental Not intended to be used outside of DST at this stage.
+     */
+    below: {
+        readonly xs: "@media not all and (min-width: 30rem)";
+        readonly sm: "@media not all and (min-width: 48rem)";
+        readonly md: "@media not all and (min-width: 64rem)";
+        readonly lg: "@media not all and (min-width: 90rem)";
+        readonly xl: "@media not all and (min-width: 110rem)";
+    };
+    /**
+     * A media query to target viewports exactly between the min and max of a given breakpoint.
+     * Ideally we would use media queries level 4 to improve this interface, but this works and browser support might not be sufficient yet: @see https://www.w3.org/TR/mediaqueries-4/
+     *
+     * @internal Not intended to be used outside of DST at this stage.
+     * @experimental Not intended to be used outside of DST at this stage.
+     */
+    only: {
+        readonly xxs: "@media (min-width: 0rem) and (max-width: 29.99rem)";
+        readonly xs: "@media (min-width: 30rem) and (max-width: 47.99rem)";
+        readonly sm: "@media (min-width: 48rem) and (max-width: 63.99rem)";
+        readonly md: "@media (min-width: 64rem) and (max-width: 89.99rem)";
+        readonly lg: "@media (min-width: 90rem) and (max-width: 109.99rem)";
+        readonly xl: "@media (min-width: 110rem)";
     };
 };
 /**
- * With these types:
- * ```
- * type MediaQuery = `@media (${string})`;
- * type ResponsiveMediaObject = Record<Breakpoint, MediaQuery>;
- * ```
+ * This is an object of usable media query helpers using our internal breakpoints configuration.
  *
- * 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'> }
- * ```
+ * We strictly only export `media.above` at this stage as we want makers to build mobile-first.
  */
+export declare const media: {
+    readonly above: {
+        /**
+         * `above.xxs` is redundant and no media query should be used, but it's included for programatic purposes…
+         */
+        readonly xxs: "@media all";
+        readonly xs: "@media (min-width: 30rem)";
+        readonly sm: "@media (min-width: 48rem)";
+        readonly md: "@media (min-width: 64rem)";
+        readonly lg: "@media (min-width: 90rem)";
+        readonly xl: "@media (min-width: 110rem)";
+    };
+};

package/dist/types/helpers/responsive/types.d.ts

@@ -1,11 +1,16 @@
 import { SerializedStyles } from '@emotion/react';
 import { token } from '@atlaskit/tokens';
-import { UNSAFE_media } from './media-helper';
+import { media } from './media-helper';
 /**
  * The breakpoints we have for responsiveness.
  */
-export type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-export type MediaQuery = (typeof UNSAFE_media.above)[Breakpoint] | (typeof UNSAFE_media.below)[Exclude<Breakpoint, 'xxs'>];
+export type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * All supported media queries for use as keys, eg. in `xcss({ [MediaQuery]: { … } })`
+ *
+ * TODO: Should this have `media.above.xxs`?  This is explicitly `@media all`, which I believe is just additional specificity (which could lead to some mistakes)
+ */
+export type MediaQuery = (typeof media.above)[Breakpoint];
 /**
  * An object type mapping a value to each breakpoint (optionally)
  */
@@ -43,12 +48,7 @@ export type BreakpointConfig = {
      */
     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…"
+     * The max-width used in media queries; if set to `null`, it has no max-width (should strictly only be on the largest breakpoint).
      */
-    below: `${number}rem`;
+    max: `${number}rem` | null;
 };

package/dist/types/helpers/responsive/use-media-query.d.ts

@@ -1,5 +1,5 @@
-import { UNSAFE_media as media } from './media-helper';
-type NestedQueryString = `above.${keyof typeof media.above}` | `below.${keyof typeof media.below}`;
+import { UNSAFE_media } from './media-helper';
+type NestedQueryString = `above.${keyof typeof UNSAFE_media.above}` | `below.${keyof typeof UNSAFE_media.below}`;
 /**
  * A hook which returnes a `window.matchMedia` result to help you build responsively around breakpoints in JavaScript.
  *

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

@@ -66,11 +66,11 @@ export type Space = keyof typeof spaceMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d072e2cad501ea7aa5c4171d8c1b5d17>>
+ * @codegen <<SignedSource::80db0ba91b44837306516b95e9cf080e>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::7e5a6402120dcaf0373e364561a78a73>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::c829bed8504655cd09b971d338d7f3a1>>
  */
 export declare const borderColorMap: {
     readonly 'color.border': "var(--ds-border)";

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

@@ -1,5 +1,4 @@
 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.
@@ -26,32 +25,3 @@ import type { Breakpoint } from './types';
  * ```
  */
 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

@@ -1,12 +1,49 @@
-import type { Breakpoint, BreakpointConfig } from './types';
 /**
  * Our internal configuration for breakpoints configuration.
  *
- * These are `rem` based multiples.
+ * We explicitly use `-0.01rem` for "max" values to both ensure we do not overlap our media queries, but also don't skip any fractional pixels.  There is a chance this is not safe in some browsers, eg. Safari has weird rounding.
+ * @see: https://tzi.fr/css/prevent-double-breakpoint/
  *
- * @experimental Unsafe for consumption outside of the design system itself.
+ * @experimental Unsafe for direct consumption outside of the design system itself; please use our `media` export instead for media queries.
  */
-export declare const UNSAFE_BREAKPOINTS_CONFIG: Record<Breakpoint, BreakpointConfig>;
+export declare const UNSAFE_BREAKPOINTS_CONFIG: {
+    readonly xxs: {
+        readonly gridItemGutter: "var(--ds-space-200)";
+        readonly gridMargin: "var(--ds-space-200)";
+        readonly min: "0rem";
+        readonly max: "29.99rem";
+    };
+    readonly xs: {
+        readonly gridItemGutter: "var(--ds-space-200)";
+        readonly gridMargin: "var(--ds-space-200)";
+        readonly min: "30rem";
+        readonly max: "47.99rem";
+    };
+    readonly sm: {
+        readonly gridItemGutter: "var(--ds-space-200)";
+        readonly gridMargin: "var(--ds-space-300)";
+        readonly min: "48rem";
+        readonly max: "63.99rem";
+    };
+    readonly md: {
+        readonly gridItemGutter: "var(--ds-space-300)";
+        readonly gridMargin: "var(--ds-space-400)";
+        readonly min: "64rem";
+        readonly max: "89.99rem";
+    };
+    readonly lg: {
+        readonly gridItemGutter: "var(--ds-space-400)";
+        readonly gridMargin: "var(--ds-space-400)";
+        readonly min: "90rem";
+        readonly max: "109.99rem";
+    };
+    readonly xl: {
+        readonly gridItemGutter: "var(--ds-space-400)";
+        readonly gridMargin: "var(--ds-space-500)";
+        readonly min: "110rem";
+        readonly max: null;
+    };
+};
 /**
  * The list of breakpoints in order from smallest to largest.  You may need to clone and reverse this list if you want the opposite.
  *
@@ -20,14 +57,11 @@ export declare const UNSAFE_BREAKPOINTS_ORDERED_LIST: [
     "sm",
     "md",
     "lg",
-    "xl",
-    "xxl"
+    "xl"
 ];
 /**
  * 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

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

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

@@ -1,45 +1,75 @@
 /**
  * This is an object of usable media query helpers using our internal breakpoints configuration.
  *
- * @experimental Unsafe for usage as the API is not finalized.
+ * @internal This explicitly has and should not be used outside of ADS-owned repos (via sourcegraph); to be removed following an internal deprecation and migration.
  */
 export declare const UNSAFE_media: {
-    readonly above: {
+    /**
+     * A media query to target viewports above the min width of a given breakpoint.
+     * Note that `media.above.xs` is redundant and should not be used, but it's included for programatic purposes.
+     */
+    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 xxs: "@media all";
+        readonly xs: "@media (min-width: 30rem)";
+        readonly sm: "@media (min-width: 48rem)";
+        readonly md: "@media (min-width: 64rem)";
+        readonly lg: "@media (min-width: 90rem)";
+        readonly xl: "@media (min-width: 110rem)";
     };
-    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)`;
+    /**
+     * A media query to target viewports below the min width of a given breakpoint.  We do this by testing the inverse, eg. below = not above…
+     *
+     * NOTE: `below.xxs` is intentionally not included as it could lead to incorrect usages as it's never accessible as this would be `xxs: '@media not all',`
+     *
+     * We use this syntax as a more compatible way to ensure media queries do not overlap, eg. `media.above.md` and `media.below.md` should not both trigger at once.
+     * This is well describe in this: @see https://stackoverflow.com/a/13649011
+     *
+     * Ideally we would use media queries level 4 to improve this interface, but this works and browser support might not be sufficient yet: @see https://www.w3.org/TR/mediaqueries-4/
+     *
+     * @internal Not intended to be used outside of DST at this stage.
+     * @experimental Not intended to be used outside of DST at this stage.
+     */
+    below: {
+        readonly xs: "@media not all and (min-width: 30rem)";
+        readonly sm: "@media not all and (min-width: 48rem)";
+        readonly md: "@media not all and (min-width: 64rem)";
+        readonly lg: "@media not all and (min-width: 90rem)";
+        readonly xl: "@media not all and (min-width: 110rem)";
+    };
+    /**
+     * A media query to target viewports exactly between the min and max of a given breakpoint.
+     * Ideally we would use media queries level 4 to improve this interface, but this works and browser support might not be sufficient yet: @see https://www.w3.org/TR/mediaqueries-4/
+     *
+     * @internal Not intended to be used outside of DST at this stage.
+     * @experimental Not intended to be used outside of DST at this stage.
+     */
+    only: {
+        readonly xxs: "@media (min-width: 0rem) and (max-width: 29.99rem)";
+        readonly xs: "@media (min-width: 30rem) and (max-width: 47.99rem)";
+        readonly sm: "@media (min-width: 48rem) and (max-width: 63.99rem)";
+        readonly md: "@media (min-width: 64rem) and (max-width: 89.99rem)";
+        readonly lg: "@media (min-width: 90rem) and (max-width: 109.99rem)";
+        readonly xl: "@media (min-width: 110rem)";
     };
 };
 /**
- * With these types:
- * ```
- * type MediaQuery = `@media (${string})`;
- * type ResponsiveMediaObject = Record<Breakpoint, MediaQuery>;
- * ```
+ * This is an object of usable media query helpers using our internal breakpoints configuration.
  *
- * 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'> }
- * ```
+ * We strictly only export `media.above` at this stage as we want makers to build mobile-first.
  */
+export declare const media: {
+    readonly above: {
+        /**
+         * `above.xxs` is redundant and no media query should be used, but it's included for programatic purposes…
+         */
+        readonly xxs: "@media all";
+        readonly xs: "@media (min-width: 30rem)";
+        readonly sm: "@media (min-width: 48rem)";
+        readonly md: "@media (min-width: 64rem)";
+        readonly lg: "@media (min-width: 90rem)";
+        readonly xl: "@media (min-width: 110rem)";
+    };
+};

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

@@ -1,11 +1,16 @@
 import { SerializedStyles } from '@emotion/react';
 import { token } from '@atlaskit/tokens';
-import { UNSAFE_media } from './media-helper';
+import { media } from './media-helper';
 /**
  * The breakpoints we have for responsiveness.
  */
-export type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-export type MediaQuery = (typeof UNSAFE_media.above)[Breakpoint] | (typeof UNSAFE_media.below)[Exclude<Breakpoint, 'xxs'>];
+export type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * All supported media queries for use as keys, eg. in `xcss({ [MediaQuery]: { … } })`
+ *
+ * TODO: Should this have `media.above.xxs`?  This is explicitly `@media all`, which I believe is just additional specificity (which could lead to some mistakes)
+ */
+export type MediaQuery = (typeof media.above)[Breakpoint];
 /**
  * An object type mapping a value to each breakpoint (optionally)
  */
@@ -43,12 +48,7 @@ export type BreakpointConfig = {
      */
     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…"
+     * The max-width used in media queries; if set to `null`, it has no max-width (should strictly only be on the largest breakpoint).
      */
-    below: `${number}rem`;
+    max: `${number}rem` | null;
 };

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

@@ -1,5 +1,5 @@
-import { UNSAFE_media as media } from './media-helper';
-type NestedQueryString = `above.${keyof typeof media.above}` | `below.${keyof typeof media.below}`;
+import { UNSAFE_media } from './media-helper';
+type NestedQueryString = `above.${keyof typeof UNSAFE_media.above}` | `below.${keyof typeof UNSAFE_media.below}`;
 /**
  * A hook which returnes a `window.matchMedia` result to help you build responsively around breakpoints in JavaScript.
  *

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

@@ -66,11 +66,11 @@ export type Space = keyof typeof spaceMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d072e2cad501ea7aa5c4171d8c1b5d17>>
+ * @codegen <<SignedSource::80db0ba91b44837306516b95e9cf080e>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::7e5a6402120dcaf0373e364561a78a73>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::c829bed8504655cd09b971d338d7f3a1>>
  */
 export declare const borderColorMap: {
     readonly 'color.border': "var(--ds-border)";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "0.12.6",
+  "version": "0.13.0",
   "description": "Primitives are token-backed low-level building blocks.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -64,6 +64,15 @@
           "status": {
             "type": "closed-beta"
           }
+        },
+        {
+          "title": "Responsive",
+          "folder": "responsive",
+          "slug": "primitives/responsive",
+          "id": "@atlaskit/primitives/responsive",
+          "status": {
+            "type": "alpha"
+          }
         }
       ]
     }
@@ -94,7 +103,7 @@
   },
   "dependencies": {
     "@atlaskit/ds-lib": "^2.2.0",
-    "@atlaskit/tokens": "^1.8.0",
+    "@atlaskit/tokens": "^1.9.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.1.0",
@@ -123,7 +132,7 @@
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/codegen": "^0.1.0",
-    "@atlassian/gemini-visual-regression": "^0.0.28",
+    "@atlassian/gemini-visual-regression": "^0.0.31",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
     "csstype": "^3.1.0",

package/report.api.md

@@ -324,7 +324,7 @@ type BoxXCSS = {
 };
 
 // @public
-type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs';
+type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxs';
 
 // @public (undocumented)
 type CSSMediaQueries = {
@@ -523,10 +523,20 @@ type MaxInlineSize = Dimension;
 // @public (undocumented)
 type MaxWidth = Dimension;
 
-// @public (undocumented)
-type MediaQuery =
-  | (typeof UNSAFE_media.above)[Breakpoint]
-  | (typeof UNSAFE_media.below)[Exclude<Breakpoint, 'xxs'>];
+// @public
+const media: {
+  readonly above: {
+    readonly xxs: '@media all';
+    readonly xs: '@media (min-width: 30rem)';
+    readonly sm: '@media (min-width: 48rem)';
+    readonly md: '@media (min-width: 64rem)';
+    readonly lg: '@media (min-width: 90rem)';
+    readonly xl: '@media (min-width: 110rem)';
+  };
+};
+
+// @public
+type MediaQuery = (typeof media.above)[Breakpoint];
 
 // @public (undocumented)
 type MinBlockSize = Dimension;
@@ -798,27 +808,6 @@ type Top = Dimension;
 // @public (undocumented)
 const uniqueSymbol: unique symbol;
 
-// @public
-const UNSAFE_media: {
-  readonly above: {
-    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: {
-    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)`;
-  };
-};
-
 // @public (undocumented)
 type Width = Dimension;