@atlaskit/primitives 19.0.0 → 19.0.1

package/dist/cjs/responsive/unsafe-build-below-media-query-css.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UNSAFE_buildBelowMediaQueryCSS = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@emotion/react");
+var _constants = require("./constants");
+var _mediaHelper = require("./media-helper");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+/**
+ * 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' } }),
+ * }
+ * ```
+ */
+var UNSAFE_buildBelowMediaQueryCSS = exports.UNSAFE_buildBelowMediaQueryCSS = function UNSAFE_buildBelowMediaQueryCSS(input) {
+  return _constants.UNSAFE_BREAKPOINTS_ORDERED_LIST.reduce(function (acc, breakpoint) {
+    if (breakpoint === 'xxs') {
+      return acc;
+    }
+    return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, breakpoint, (0, _react.css)((0, _defineProperty2.default)({}, _mediaHelper.UNSAFE_media.below[breakpoint], typeof input === 'function' ? input(breakpoint) : input))));
+  }, {});
+};

package/dist/cjs/utils/surface-context.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SurfaceContext = void 0;
+var _react = require("react");
+/**
+ * __Surface context__
+ *
+ * A surface context provides context information on the current background (if set).
+ */
+var SurfaceContext = exports.SurfaceContext = /*#__PURE__*/(0, _react.createContext)('elevation.surface');

package/dist/cjs/utils/surface-provider.js

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useSurface = exports.SurfaceContext = void 0;
+Object.defineProperty(exports, "SurfaceContext", {
+  enumerable: true,
+  get: function get() {
+    return _surfaceContext.SurfaceContext;
+  }
+});
+exports.useSurface = void 0;
 var _react = require("react");
-/**
- * __Surface context__
- *
- * A surface context provides context information on the current background (if set).
- */
-var SurfaceContext = exports.SurfaceContext = /*#__PURE__*/(0, _react.createContext)('elevation.surface');
-
+var _surfaceContext = require("./surface-context");
 /**
  * __useSurface__
  *
@@ -20,6 +20,6 @@ var SurfaceContext = exports.SurfaceContext = /*#__PURE__*/(0, _react.createCont
  * @see SurfaceContext
  */
 var useSurface = exports.useSurface = function useSurface() {
-  return (0, _react.useContext)(SurfaceContext);
+  return (0, _react.useContext)(_surfaceContext.SurfaceContext);
 };
-SurfaceContext.displayName = 'SurfaceProvider';
+_surfaceContext.SurfaceContext.displayName = 'SurfaceProvider';

package/dist/es2019/compiled/components/anchor.js

@@ -56,7 +56,7 @@ const AnchorNoRef = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "19.0.0",
+    packageVersion: "0.0.0-development",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/es2019/compiled/components/box.js

@@ -4,7 +4,7 @@ import "./box.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
-import { SurfaceContext } from '../../utils/surface-provider';
+import { SurfaceContext } from '../../utils/surface-context';
 
 // Can either Exclude or Extract - here we're excluding all SVG-related elements, <button> elements (handled by Pressable), and <a> elements (handled by Anchor)
 

package/dist/es2019/compiled/components/pressable.js

@@ -48,7 +48,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "19.0.0",
+    packageVersion: "0.0.0-development",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/es2019/components/anchor.js

@@ -94,7 +94,7 @@ const AnchorNoRef = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "19.0.0",
+    packageVersion: "0.0.0-development",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/es2019/components/box.js

@@ -7,7 +7,7 @@ import { forwardRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { SurfaceContext } from '../utils/surface-provider';
+import { SurfaceContext } from '../utils/surface-context';
 import { backgroundColorStylesMap, isSurfaceColorToken, paddingStylesMap, surfaceColorStylesMap } from '../xcss/style-maps.partial';
 import { parseXcss } from '../xcss/xcss';
 

package/dist/es2019/components/pressable.js

@@ -86,7 +86,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "19.0.0",
+    packageVersion: "0.0.0-development",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

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

@@ -1,77 +1,4 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
-import { UNSAFE_BREAKPOINTS_ORDERED_LIST } from './constants';
-import { media, UNSAFE_media } from './media-helper';
-/**
- * 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 const UNSAFE_buildAboveMediaQueryCSS = input => {
-  return UNSAFE_BREAKPOINTS_ORDERED_LIST.reduce((acc, breakpoint) => ({
-    ...acc,
-    [breakpoint]: css({
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      [media.above[breakpoint]]: typeof input === 'function' ? input(breakpoint) : input
-    })
-  }), {});
-};
 
-/**
- * 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 const UNSAFE_buildBelowMediaQueryCSS = input => {
-  return UNSAFE_BREAKPOINTS_ORDERED_LIST.reduce((acc, breakpoint) => {
-    if (breakpoint === 'xxs') {
-      return acc;
-    }
-    return {
-      ...acc,
-      [breakpoint]: css({
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-        [UNSAFE_media.below[breakpoint]]: typeof input === 'function' ? input(breakpoint) : input
-      })
-    };
-  }, {});
-};
+export { UNSAFE_buildAboveMediaQueryCSS } from './unsafe-build-above-media-query-css';
+export { UNSAFE_buildBelowMediaQueryCSS } from './unsafe-build-below-media-query-css';

package/dist/es2019/responsive/hide.js

@@ -6,7 +6,8 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { jsx } from '@emotion/react';
 import { parseXcss } from '../xcss/xcss';
-import { UNSAFE_buildAboveMediaQueryCSS, UNSAFE_buildBelowMediaQueryCSS } from './build-media-query-css';
+import { UNSAFE_buildAboveMediaQueryCSS } from './unsafe-build-above-media-query-css';
+import { UNSAFE_buildBelowMediaQueryCSS } from './unsafe-build-below-media-query-css';
 const hideAboveQueries = UNSAFE_buildAboveMediaQueryCSS({
   display: 'none'
 });

package/dist/es2019/responsive/media-helper.js

@@ -1,40 +1,6 @@
-/**
- * This is an object of usable media query helpers using our internal breakpoints configuration.
- *
- * When using Compiled CSS-in-JS, please ensure that only a single declaration can take effect at a time.
- * This means that you should avoid multiple breakpoints taking effect at the same time,
- * eg. ```{ [media.above.xs]: { color: 'red' }, [media.above.sm]: { color: 'green' }}```.
- * Instead, make sure that only one breakpoint can take effect at a time,
- * e.g, ```{ [media.only.xs]: { color: 'red' }, [media.above.sm]: { color: 'green' }}```.
- * For more details, please see <https://compiledcssinjs.com/docs/atomic-css#selector-specificity>.
- */
-export const media = {
-  above: {
-    xxs: '@media all',
-    xs: '@media (min-width: 30rem)',
-    sm: '@media (min-width: 48rem)',
-    md: '@media (min-width: 64rem)',
-    lg: '@media (min-width: 90rem)',
-    xl: '@media (min-width: 110.5rem)'
-  },
-  only: {
-    xxs: '@media (min-width: 0rem) and (max-width: 29.99rem)',
-    xs: '@media (min-width: 30rem) and (max-width: 47.99rem)',
-    sm: '@media (min-width: 48rem) and (max-width: 63.99rem)',
-    md: '@media (min-width: 64rem) and (max-width: 89.99rem)',
-    lg: '@media (min-width: 90rem) and (max-width: 110.49rem)',
-    xl: '@media (min-width: 110.5rem)'
-  },
-  below: {
-    xs: '@media not all and (min-width: 30rem)',
-    sm: '@media not all and (min-width: 48rem)',
-    md: '@media not all and (min-width: 64rem)',
-    lg: '@media not all and (min-width: 90rem)',
-    xl: '@media not all and (min-width: 110.5rem)'
-  }
-};
-
+import { media } from './media';
 /**
  * Keep `UNSAFE_media` for backwards compatibility.
  */
-export const UNSAFE_media = media;
+export const UNSAFE_media = media;
+export { media } from './media';

package/dist/es2019/responsive/media.js

@@ -0,0 +1,25 @@
+export const media = {
+  above: {
+    xxs: '@media all',
+    xs: '@media (min-width: 30rem)',
+    sm: '@media (min-width: 48rem)',
+    md: '@media (min-width: 64rem)',
+    lg: '@media (min-width: 90rem)',
+    xl: '@media (min-width: 110.5rem)'
+  },
+  only: {
+    xxs: '@media (min-width: 0rem) and (max-width: 29.99rem)',
+    xs: '@media (min-width: 30rem) and (max-width: 47.99rem)',
+    sm: '@media (min-width: 48rem) and (max-width: 63.99rem)',
+    md: '@media (min-width: 64rem) and (max-width: 89.99rem)',
+    lg: '@media (min-width: 90rem) and (max-width: 110.49rem)',
+    xl: '@media (min-width: 110.5rem)'
+  },
+  below: {
+    xs: '@media not all and (min-width: 30rem)',
+    sm: '@media not all and (min-width: 48rem)',
+    md: '@media not all and (min-width: 64rem)',
+    lg: '@media not all and (min-width: 90rem)',
+    xl: '@media not all and (min-width: 110.5rem)'
+  }
+};

package/dist/es2019/responsive/show.js

@@ -6,7 +6,8 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { parseXcss } from '../xcss/xcss';
-import { UNSAFE_buildAboveMediaQueryCSS, UNSAFE_buildBelowMediaQueryCSS } from './build-media-query-css';
+import { UNSAFE_buildAboveMediaQueryCSS } from './unsafe-build-above-media-query-css';
+import { UNSAFE_buildBelowMediaQueryCSS } from './unsafe-build-below-media-query-css';
 const showAboveQueries = UNSAFE_buildAboveMediaQueryCSS({
   display: 'revert'
 });

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

@@ -0,0 +1,38 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css } from '@emotion/react';
+import { UNSAFE_BREAKPOINTS_ORDERED_LIST } from './constants';
+import { media } from './media';
+/**
+ * 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 const UNSAFE_buildAboveMediaQueryCSS = input => {
+  return UNSAFE_BREAKPOINTS_ORDERED_LIST.reduce((acc, breakpoint) => ({
+    ...acc,
+    [breakpoint]: css({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      [media.above[breakpoint]]: typeof input === 'function' ? input(breakpoint) : input
+    })
+  }), {});
+};

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

@@ -0,0 +1,42 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css } from '@emotion/react';
+import { UNSAFE_BREAKPOINTS_ORDERED_LIST } from './constants';
+import { UNSAFE_media } from './media-helper';
+/**
+ * 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 const UNSAFE_buildBelowMediaQueryCSS = input => {
+  return UNSAFE_BREAKPOINTS_ORDERED_LIST.reduce((acc, breakpoint) => {
+    if (breakpoint === 'xxs') {
+      return acc;
+    }
+    return {
+      ...acc,
+      [breakpoint]: css({
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        [UNSAFE_media.below[breakpoint]]: typeof input === 'function' ? input(breakpoint) : input
+      })
+    };
+  }, {});
+};

package/dist/es2019/utils/surface-context.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+/**
+ * __Surface context__
+ *
+ * A surface context provides context information on the current background (if set).
+ */
+export const SurfaceContext = /*#__PURE__*/createContext('elevation.surface');

package/dist/es2019/utils/surface-provider.js

@@ -1,11 +1,5 @@
-import { createContext, useContext } from 'react';
-/**
- * __Surface context__
- *
- * A surface context provides context information on the current background (if set).
- */
-export const SurfaceContext = /*#__PURE__*/createContext('elevation.surface');
-
+import { useContext } from 'react';
+import { SurfaceContext } from './surface-context';
 /**
  * __useSurface__
  *
@@ -16,4 +10,5 @@ export const SurfaceContext = /*#__PURE__*/createContext('elevation.surface');
 export const useSurface = () => {
   return useContext(SurfaceContext);
 };
-SurfaceContext.displayName = 'SurfaceProvider';
+SurfaceContext.displayName = 'SurfaceProvider';
+export { SurfaceContext } from './surface-context';

package/dist/esm/compiled/components/anchor.js

@@ -61,7 +61,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "19.0.0",
+    packageVersion: "0.0.0-development",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/esm/compiled/components/box.js

@@ -7,7 +7,7 @@ import "./box.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
-import { SurfaceContext } from '../../utils/surface-provider';
+import { SurfaceContext } from '../../utils/surface-context';
 
 // Can either Exclude or Extract - here we're excluding all SVG-related elements, <button> elements (handled by Pressable), and <a> elements (handled by Anchor)
 

package/dist/esm/compiled/components/pressable.js

@@ -52,7 +52,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "19.0.0",
+    packageVersion: "0.0.0-development",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/esm/components/anchor.js

@@ -99,7 +99,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "19.0.0",
+    packageVersion: "0.0.0-development",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/esm/components/box.js

@@ -10,7 +10,7 @@ import { forwardRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { SurfaceContext } from '../utils/surface-provider';
+import { SurfaceContext } from '../utils/surface-context';
 import { backgroundColorStylesMap, isSurfaceColorToken, paddingStylesMap, surfaceColorStylesMap } from '../xcss/style-maps.partial';
 import { parseXcss } from '../xcss/xcss';
 

package/dist/esm/components/pressable.js

@@ -91,7 +91,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "19.0.0",
+    packageVersion: "0.0.0-development",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/esm/responsive/build-media-query-css.js

@@ -1,70 +1,4 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
-import { UNSAFE_BREAKPOINTS_ORDERED_LIST } from './constants';
-import { media, UNSAFE_media } from './media-helper';
-/**
- * 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 var UNSAFE_buildAboveMediaQueryCSS = function UNSAFE_buildAboveMediaQueryCSS(input) {
-  return UNSAFE_BREAKPOINTS_ORDERED_LIST.reduce(function (acc, breakpoint) {
-    return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, breakpoint, css(_defineProperty({}, media.above[breakpoint], typeof input === 'function' ? input(breakpoint) : input))));
-  }, {});
-};
 
-/**
- * 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 var UNSAFE_buildBelowMediaQueryCSS = function UNSAFE_buildBelowMediaQueryCSS(input) {
-  return UNSAFE_BREAKPOINTS_ORDERED_LIST.reduce(function (acc, breakpoint) {
-    if (breakpoint === 'xxs') {
-      return acc;
-    }
-    return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, breakpoint, css(_defineProperty({}, UNSAFE_media.below[breakpoint], typeof input === 'function' ? input(breakpoint) : input))));
-  }, {});
-};
+export { UNSAFE_buildAboveMediaQueryCSS } from './unsafe-build-above-media-query-css';
+export { UNSAFE_buildBelowMediaQueryCSS } from './unsafe-build-below-media-query-css';

package/dist/esm/responsive/hide.js

@@ -7,7 +7,8 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { jsx } from '@emotion/react';
 import { parseXcss } from '../xcss/xcss';
-import { UNSAFE_buildAboveMediaQueryCSS, UNSAFE_buildBelowMediaQueryCSS } from './build-media-query-css';
+import { UNSAFE_buildAboveMediaQueryCSS } from './unsafe-build-above-media-query-css';
+import { UNSAFE_buildBelowMediaQueryCSS } from './unsafe-build-below-media-query-css';
 var hideAboveQueries = UNSAFE_buildAboveMediaQueryCSS({
   display: 'none'
 });

package/dist/esm/responsive/media-helper.js

@@ -1,40 +1,6 @@
-/**
- * This is an object of usable media query helpers using our internal breakpoints configuration.
- *
- * When using Compiled CSS-in-JS, please ensure that only a single declaration can take effect at a time.
- * This means that you should avoid multiple breakpoints taking effect at the same time,
- * eg. ```{ [media.above.xs]: { color: 'red' }, [media.above.sm]: { color: 'green' }}```.
- * Instead, make sure that only one breakpoint can take effect at a time,
- * e.g, ```{ [media.only.xs]: { color: 'red' }, [media.above.sm]: { color: 'green' }}```.
- * For more details, please see <https://compiledcssinjs.com/docs/atomic-css#selector-specificity>.
- */
-export var media = {
-  above: {
-    xxs: '@media all',
-    xs: '@media (min-width: 30rem)',
-    sm: '@media (min-width: 48rem)',
-    md: '@media (min-width: 64rem)',
-    lg: '@media (min-width: 90rem)',
-    xl: '@media (min-width: 110.5rem)'
-  },
-  only: {
-    xxs: '@media (min-width: 0rem) and (max-width: 29.99rem)',
-    xs: '@media (min-width: 30rem) and (max-width: 47.99rem)',
-    sm: '@media (min-width: 48rem) and (max-width: 63.99rem)',
-    md: '@media (min-width: 64rem) and (max-width: 89.99rem)',
-    lg: '@media (min-width: 90rem) and (max-width: 110.49rem)',
-    xl: '@media (min-width: 110.5rem)'
-  },
-  below: {
-    xs: '@media not all and (min-width: 30rem)',
-    sm: '@media not all and (min-width: 48rem)',
-    md: '@media not all and (min-width: 64rem)',
-    lg: '@media not all and (min-width: 90rem)',
-    xl: '@media not all and (min-width: 110.5rem)'
-  }
-};
-
+import { media } from './media';
 /**
  * Keep `UNSAFE_media` for backwards compatibility.
  */
-export var UNSAFE_media = media;
+export var UNSAFE_media = media;
+export { media } from './media';