@atlaskit/primitives 0.14.3 → 0.15.1

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

@@ -23,10 +23,10 @@ export var dimensionMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0233b43df51e5fcf058349b5bff46ee3>>
+ * @codegen <<SignedSource::429dca3ce1fa6d723cb98e2468802267>>
  * @codegenId spacing
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::16655ab13ccb56521faa354636af2c8e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::68f6bde7e6b186964ee53458284bbb90>>
  */
 export var spaceMap = {
   'space.0': "var(--ds-space-0, 0px)",

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 { media } from '../helpers/responsive';
+import { media } from '../responsive/media-helper';
 import { backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, layerMap, shadowMap, spaceMap, textColorMap } from './style-maps.partial';
 var tokensMap = {
   backgroundColor: backgroundColorMap,

package/dist/types/index.d.ts

@@ -2,4 +2,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';
-export { UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG, type Breakpoint, } from './helpers/responsive';
+export { UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG, type Breakpoint, } from './responsive';

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

@@ -0,0 +1,53 @@
+import { CSSObject } from '@emotion/react';
+import type { Breakpoint } from './types';
+/**
+ * Build a map of breakpoints to css with media queries and nested styles.
+ *
+ * @internal Not intended to be used outside of DST at this stage.
+ * @experimental Not intended to be used outside of DST at this stage.
+ *
+ * @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 all': { display: 'none' } }),
+ *   xs: css({ '@media (min-width: 30rem)': { display: 'none' } }),
+ *   sm: css({ '@media (min-width: 48rem)': { 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.
+ *
+ * @internal Not intended to be used outside of DST at this stage.
+ * @experimental Not intended to be used outside of DST at this stage.
+ *
+ * @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 not all and (min-width: 30rem)': { display: 'none' } }),
+ *   sm: css({ '@media not all and (min-width: 48rem)': { display: 'none' } }),
+ * }
+ * ```
+ */
+export declare const UNSAFE_buildBelowMediaQueryCSS: (input: CSSObject | ((breakpoint: Breakpoint) => CSSObject)) => Required<Partial<Record<Breakpoint, import("@emotion/react").SerializedStyles>>>;

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

@@ -0,0 +1,39 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+import type { Breakpoint } from './types';
+type As = 'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
+type ResponsiveHideProps = {
+    as?: As;
+    children: ReactNode;
+    /**
+     * Apply CSS to hide this specifically **above** this breakpoint.
+     * The smallest breakpoint is not included as it would always be shown and this would not be performant.
+     *
+     * @important do not mix `above` and `below` (TypeScript should prevent this)
+     */
+    above?: Exclude<Breakpoint, 'xxs'>;
+    /**
+     * Apply CSS to hide this specifically **below** this breakpoint.
+     * The smallest breakpoint is not included as it would never be shown and this would not be performant.
+     *
+     * @important do not mix `above` and `below` (TypeScript should prevent this)
+     */
+    below?: Exclude<Breakpoint, 'xxs'>;
+} & ({
+    above?: never;
+    below: Exclude<Breakpoint, 'xxs'>;
+} | {
+    above: Exclude<Breakpoint, 'xxs'>;
+    below?: never;
+});
+/**
+ * Hides the content at a given breakpoint.  By default, content is shown.  The primary use case is for visual presentation.
+ * Mix `<Hide above="md">` with `<Show above="md">` to achieve content that shifts at a breakpoint.
+ *
+ * Please note:
+ * - This only uses `display: none` hide, it does not skip rendering of children trees.
+ * - As this is rendered at all times, there is little performance savings here (just that this is not painted).
+ */
+export declare const Hide: ({ above, below, children, as: AsElement, }: ResponsiveHideProps) => jsx.JSX.Element;
+export {};

package/dist/types/{helpers/responsive → responsive}/index.d.ts

@@ -3,3 +3,5 @@ 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';
+export { Show } from './show';
+export { Hide } from './hide';

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

@@ -0,0 +1,39 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+import type { Breakpoint } from './types';
+type As = 'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
+type ResponsiveShowProps = {
+    as?: As;
+    children: ReactNode;
+    /**
+     * Apply CSS to show this specifically **above** this breakpoint.
+     * The smallest breakpoint is not included as it would always be shown and this would not be performant.
+     *
+     * @important do not mix `above` and `below` (TypeScript should prevent this)
+     */
+    above?: Exclude<Breakpoint, 'xxs'>;
+    /**
+     * Apply CSS to show this specifically **below** this breakpoint.
+     * The smallest breakpoint is not included as it would never be shown and this would not be performant.
+     *
+     * @important do not mix `above` and `below` (TypeScript should prevent this)
+     */
+    below?: Exclude<Breakpoint, 'xxs'>;
+} & ({
+    above?: never;
+    below: Exclude<Breakpoint, 'xxs'>;
+} | {
+    above: Exclude<Breakpoint, 'xxs'>;
+    below?: never;
+});
+/**
+ * Shows the content at a given breakpoint.  By default, content is hidden.  The primary use case is for visual presentation.
+ * Mix `<Show above="md">` with `<Hide above="md">` to achieve content that shifts at a breakpoint.
+ *
+ * Please note:
+ * - This only uses `display: none` and `display: revert` to show/hide, it does not skip rendering of children trees.
+ * - As this is rendered at all times, there is little performance savings here (just that this is not painted).
+ */
+export declare const Show: ({ above, below, children, as: AsElement, }: ResponsiveShowProps) => jsx.JSX.Element;
+export {};

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

@@ -23,10 +23,10 @@ export type Dimension = keyof typeof dimensionMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0233b43df51e5fcf058349b5bff46ee3>>
+ * @codegen <<SignedSource::429dca3ce1fa6d723cb98e2468802267>>
  * @codegenId spacing
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::16655ab13ccb56521faa354636af2c8e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::68f6bde7e6b186964ee53458284bbb90>>
  */
 export declare const spaceMap: {
     'space.0': "var(--ds-space-0)";

package/dist/types/xcss/xcss.d.ts

@@ -2,8 +2,8 @@
 import { css as cssEmotion } from '@emotion/react';
 import { CSSPropertiesWithMultiValues, SerializedStyles } from '@emotion/serialize';
 import type * as CSS from 'csstype';
-import { MediaQuery } from '../helpers/responsive/types';
 import { Box, Inline } from '../index';
+import type { MediaQuery } from '../responsive/types';
 import { TokenisedProps } from './style-maps.partial';
 declare const uniqueSymbol: unique symbol;
 /**

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

@@ -2,4 +2,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';
-export { UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG, type Breakpoint, } from './helpers/responsive';
+export { UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG, type Breakpoint, } from './responsive';

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

@@ -0,0 +1,53 @@
+import { CSSObject } from '@emotion/react';
+import type { Breakpoint } from './types';
+/**
+ * Build a map of breakpoints to css with media queries and nested styles.
+ *
+ * @internal Not intended to be used outside of DST at this stage.
+ * @experimental Not intended to be used outside of DST at this stage.
+ *
+ * @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 all': { display: 'none' } }),
+ *   xs: css({ '@media (min-width: 30rem)': { display: 'none' } }),
+ *   sm: css({ '@media (min-width: 48rem)': { 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.
+ *
+ * @internal Not intended to be used outside of DST at this stage.
+ * @experimental Not intended to be used outside of DST at this stage.
+ *
+ * @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 not all and (min-width: 30rem)': { display: 'none' } }),
+ *   sm: css({ '@media not all and (min-width: 48rem)': { display: 'none' } }),
+ * }
+ * ```
+ */
+export declare const UNSAFE_buildBelowMediaQueryCSS: (input: CSSObject | ((breakpoint: Breakpoint) => CSSObject)) => Required<Partial<Record<Breakpoint, import("@emotion/react").SerializedStyles>>>;

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

@@ -0,0 +1,39 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+import type { Breakpoint } from './types';
+type As = 'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
+type ResponsiveHideProps = {
+    as?: As;
+    children: ReactNode;
+    /**
+     * Apply CSS to hide this specifically **above** this breakpoint.
+     * The smallest breakpoint is not included as it would always be shown and this would not be performant.
+     *
+     * @important do not mix `above` and `below` (TypeScript should prevent this)
+     */
+    above?: Exclude<Breakpoint, 'xxs'>;
+    /**
+     * Apply CSS to hide this specifically **below** this breakpoint.
+     * The smallest breakpoint is not included as it would never be shown and this would not be performant.
+     *
+     * @important do not mix `above` and `below` (TypeScript should prevent this)
+     */
+    below?: Exclude<Breakpoint, 'xxs'>;
+} & ({
+    above?: never;
+    below: Exclude<Breakpoint, 'xxs'>;
+} | {
+    above: Exclude<Breakpoint, 'xxs'>;
+    below?: never;
+});
+/**
+ * Hides the content at a given breakpoint.  By default, content is shown.  The primary use case is for visual presentation.
+ * Mix `<Hide above="md">` with `<Show above="md">` to achieve content that shifts at a breakpoint.
+ *
+ * Please note:
+ * - This only uses `display: none` hide, it does not skip rendering of children trees.
+ * - As this is rendered at all times, there is little performance savings here (just that this is not painted).
+ */
+export declare const Hide: ({ above, below, children, as: AsElement, }: ResponsiveHideProps) => jsx.JSX.Element;
+export {};

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

@@ -3,3 +3,5 @@ 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';
+export { Show } from './show';
+export { Hide } from './hide';

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

@@ -0,0 +1,39 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+import type { Breakpoint } from './types';
+type As = 'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
+type ResponsiveShowProps = {
+    as?: As;
+    children: ReactNode;
+    /**
+     * Apply CSS to show this specifically **above** this breakpoint.
+     * The smallest breakpoint is not included as it would always be shown and this would not be performant.
+     *
+     * @important do not mix `above` and `below` (TypeScript should prevent this)
+     */
+    above?: Exclude<Breakpoint, 'xxs'>;
+    /**
+     * Apply CSS to show this specifically **below** this breakpoint.
+     * The smallest breakpoint is not included as it would never be shown and this would not be performant.
+     *
+     * @important do not mix `above` and `below` (TypeScript should prevent this)
+     */
+    below?: Exclude<Breakpoint, 'xxs'>;
+} & ({
+    above?: never;
+    below: Exclude<Breakpoint, 'xxs'>;
+} | {
+    above: Exclude<Breakpoint, 'xxs'>;
+    below?: never;
+});
+/**
+ * Shows the content at a given breakpoint.  By default, content is hidden.  The primary use case is for visual presentation.
+ * Mix `<Show above="md">` with `<Hide above="md">` to achieve content that shifts at a breakpoint.
+ *
+ * Please note:
+ * - This only uses `display: none` and `display: revert` to show/hide, it does not skip rendering of children trees.
+ * - As this is rendered at all times, there is little performance savings here (just that this is not painted).
+ */
+export declare const Show: ({ above, below, children, as: AsElement, }: ResponsiveShowProps) => jsx.JSX.Element;
+export {};

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

@@ -23,10 +23,10 @@ export type Dimension = keyof typeof dimensionMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0233b43df51e5fcf058349b5bff46ee3>>
+ * @codegen <<SignedSource::429dca3ce1fa6d723cb98e2468802267>>
  * @codegenId spacing
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::16655ab13ccb56521faa354636af2c8e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::68f6bde7e6b186964ee53458284bbb90>>
  */
 export declare const spaceMap: {
     'space.0': "var(--ds-space-0)";

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

@@ -2,8 +2,8 @@
 import { css as cssEmotion } from '@emotion/react';
 import { CSSPropertiesWithMultiValues, SerializedStyles } from '@emotion/serialize';
 import type * as CSS from 'csstype';
-import { MediaQuery } from '../helpers/responsive/types';
 import { Box, Inline } from '../index';
+import type { MediaQuery } from '../responsive/types';
 import { TokenisedProps } from './style-maps.partial';
 declare const uniqueSymbol: unique symbol;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "0.14.3",
+  "version": "0.15.1",
   "description": "Primitives are token-backed low-level building blocks.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -99,7 +99,7 @@
     "./box": "./src/components/box.tsx",
     "./stack": "./src/components/stack.tsx",
     "./inline": "./src/components/inline.tsx",
-    "./responsive": "./src/helpers/responsive/index.tsx"
+    "./responsive": "./src/responsive/index.tsx"
   },
   "dependencies": {
     "@atlaskit/ds-lib": "^2.2.0",
@@ -132,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.34",
+    "@atlassian/gemini-visual-regression": "^0.0.35",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
     "csstype": "^3.1.0",

package/responsive/package.json

@@ -1,14 +1,14 @@
 {
   "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",
+  "main": "../dist/cjs/responsive/index.js",
+  "module": "../dist/esm/responsive/index.js",
+  "module:es2019": "../dist/es2019/responsive/index.js",
   "sideEffects": false,
-  "types": "../dist/types/helpers/responsive/index.d.ts",
+  "types": "../dist/types/responsive/index.d.ts",
   "typesVersions": {
     ">=4.5 <4.9": {
       "*": [
-        "../dist/types-ts4.5/helpers/responsive/index.d.ts"
+        "../dist/types-ts4.5/responsive/index.d.ts"
       ]
     }
   }

package/dist/es2019/helpers/responsive/build-media-query-css.js

@@ -1,36 +0,0 @@
-import { css } from '@emotion/react';
-import { UNSAFE_BREAKPOINTS_ORDERED_LIST } from './constants';
-import { media } from './media-helper';
-/**
- * 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 const UNSAFE_buildAboveMediaQueryCSS = input => {
-  return UNSAFE_BREAKPOINTS_ORDERED_LIST.reduce((acc, breakpoint) => ({
-    ...acc,
-    [breakpoint]: css({
-      // eslint-disable-next-line @repo/internal/styles/no-nested-styles
-      [media.above[breakpoint]]: typeof input === 'function' ? input(breakpoint) : input
-    })
-  }), {});
-};

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

@@ -1,27 +0,0 @@
-import { CSSObject } from '@emotion/react';
-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>>>;

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

@@ -1,27 +0,0 @@
-import { CSSObject } from '@emotion/react';
-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>>>;