@atlaskit/primitives 18.1.4 → 19.0.1

package/dist/esm/responsive/show.js

@@ -7,7 +7,8 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 // 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';
 var showAboveQueries = UNSAFE_buildAboveMediaQueryCSS({
   display: 'revert'
 });

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

@@ -0,0 +1,37 @@
+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
+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 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))));
+  }, {});
+};

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

@@ -0,0 +1,39 @@
+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
+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 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))));
+  }, {});
+};

package/dist/esm/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 var SurfaceContext = /*#__PURE__*/createContext('elevation.surface');

package/dist/esm/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 var SurfaceContext = /*#__PURE__*/createContext('elevation.surface');
-
+import { useContext } from 'react';
+import { SurfaceContext } from './surface-context';
 /**
  * __useSurface__
  *
@@ -16,4 +10,5 @@ export var SurfaceContext = /*#__PURE__*/createContext('elevation.surface');
 export var useSurface = function useSurface() {
   return useContext(SurfaceContext);
 };
-SurfaceContext.displayName = 'SurfaceProvider';
+SurfaceContext.displayName = 'SurfaceProvider';
+export { SurfaceContext } from './surface-context';

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

@@ -515,7 +515,7 @@ export var borderRadiusMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::64331f0b8b5e2f090a3aad153d92deb6>>
+ * @codegen <<SignedSource::6dffa08c1104af4093361cb0f7e37996>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
@@ -524,8 +524,6 @@ export var borderRadiusMap = {
  */
 export var fontMap = {
   'font.body': "var(--ds-font-body, normal 400 14px/20px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  // @deprecated
-  'font.body.UNSAFE_small': "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   'font.body.large': "var(--ds-font-body-large, normal 400 16px/24px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   'font.body.small': "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   'font.code': "var(--ds-font-code, normal 400 0.875em/1 \"Atlassian Mono\", ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
@@ -559,7 +557,7 @@ export var fontFamilyMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::aeebc24b95e2189021f1d98f1715a6a0>>
+ * @codegen <<SignedSource::b67a50fa5abb078032598ba819a6f691>>
  * @codegenId text
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenDependency ../../../primitives/scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
@@ -567,7 +565,6 @@ export var fontFamilyMap = {
  */
 export var textSizeMap = {
   medium: "var(--ds-font-body, normal 400 14px/20px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  UNSAFE_small: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   large: "var(--ds-font-body-large, normal 400 16px/24px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   small: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
 };

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

@@ -40,6 +40,6 @@ export type GapToken = PositiveSpaceToken;
 export type SurfaceColorToken = 'utility.elevation.surface.current' | 'elevation.surface' | 'elevation.surface.overlay' | 'elevation.surface.raised' | 'elevation.surface.sunken';
 export type TextAlign = 'center' | 'end' | 'start';
 export type TextColor = 'color.text' | 'color.text.accent.lime' | 'color.text.accent.lime.bolder' | 'color.text.accent.red' | 'color.text.accent.red.bolder' | 'color.text.accent.orange' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green' | 'color.text.accent.green.bolder' | 'color.text.accent.teal' | 'color.text.accent.teal.bolder' | 'color.text.accent.blue' | 'color.text.accent.blue.bolder' | 'color.text.accent.purple' | 'color.text.accent.purple.bolder' | 'color.text.accent.magenta' | 'color.text.accent.magenta.bolder' | 'color.text.accent.gray' | 'color.text.accent.gray.bolder' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.selected' | 'color.text.brand' | 'color.text.danger' | 'color.text.warning' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.text.subtlest' | 'color.text.subtle' | 'color.link' | 'color.link.pressed' | 'color.link.visited' | 'color.link.visited.pressed';
-export type FontSize = 'small' | 'medium' | 'UNSAFE_small' | 'large';
+export type FontSize = 'small' | 'medium' | 'large';
 export type FontWeight = 'bold' | 'medium' | 'regular' | 'semibold';
 export type MetricTextFontSize = 'small' | 'medium' | 'large';

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

@@ -1,63 +1,2 @@
-import { type CSSObject, type SerializedStyles } 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: (
-/**
- * The desired CSS to place inside of the media query.
- * This can either be a css object directly or functional with `breakpoint` as the arg to return a css object.
- */
-input: CSSObject | ((breakpoint: Breakpoint) => CSSObject)) => Required<Partial<Record<Breakpoint, 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: (
-/**
- * The desired CSS to place inside of the media query.
- * This can either be a css object directly or functional with `breakpoint` as the arg to return a css object.
- */
-input: CSSObject | ((breakpoint: Breakpoint) => CSSObject)) => Required<Partial<Record<Breakpoint, SerializedStyles>>>;
+export { UNSAFE_buildAboveMediaQueryCSS } from './unsafe-build-above-media-query-css';
+export { UNSAFE_buildBelowMediaQueryCSS } from './unsafe-build-below-media-query-css';

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

@@ -1,38 +1,3 @@
-/**
- * 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 declare const media: {
-    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: 110.5rem)";
-    };
-    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: 110.49rem)";
-        readonly xl: "@media (min-width: 110.5rem)";
-    };
-    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: 110.5rem)";
-    };
-};
 /**
  * Keep `UNSAFE_media` for backwards compatibility.
  */
@@ -61,3 +26,4 @@ export declare const UNSAFE_media: {
         readonly xl: '@media not all and (min-width: 110.5rem)';
     };
 };
+export { media } from './media';

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

@@ -0,0 +1,25 @@
+export declare const media: {
+    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: 110.5rem)";
+    };
+    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: 110.49rem)";
+        readonly xl: "@media (min-width: 110.5rem)";
+    };
+    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: 110.5rem)";
+    };
+};

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

@@ -1,5 +1,5 @@
 import { type SerializedStyles } from '@emotion/react';
-import { type media } from './media-helper';
+import type { media } from './media';
 /**
  * The breakpoints we have for responsiveness.
  */

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

@@ -0,0 +1,33 @@
+import { type CSSObject, type SerializedStyles } 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: (
+/**
+ * The desired CSS to place inside of the media query.
+ * This can either be a css object directly or functional with `breakpoint` as the arg to return a css object.
+ */
+input: CSSObject | ((breakpoint: Breakpoint) => CSSObject)) => Required<Partial<Record<Breakpoint, SerializedStyles>>>;

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

@@ -0,0 +1,32 @@
+import { type CSSObject, type SerializedStyles } 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 = 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: (
+/**
+ * The desired CSS to place inside of the media query.
+ * This can either be a css object directly or functional with `breakpoint` as the arg to return a css object.
+ */
+input: CSSObject | ((breakpoint: Breakpoint) => CSSObject)) => Required<Partial<Record<Breakpoint, SerializedStyles>>>;

package/dist/types/utils/surface-context.d.ts

@@ -0,0 +1,8 @@
+import { type Context } from 'react';
+import type { BackgroundColorToken } from './types';
+/**
+ * __Surface context__
+ *
+ * A surface context provides context information on the current background (if set).
+ */
+export declare const SurfaceContext: Context<BackgroundColorToken>;

package/dist/types/utils/surface-provider.d.ts

@@ -1,11 +1,4 @@
-import { type Context } from 'react';
 import type { BackgroundColorToken } from './types';
-/**
- * __Surface context__
- *
- * A surface context provides context information on the current background (if set).
- */
-export declare const SurfaceContext: Context<BackgroundColorToken>;
 /**
  * __useSurface__
  *
@@ -14,3 +7,4 @@ export declare const SurfaceContext: Context<BackgroundColorToken>;
  * @see SurfaceContext
  */
 export declare const useSurface: () => BackgroundColorToken;
+export { SurfaceContext } from './surface-context';

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

@@ -542,7 +542,7 @@ export type BorderRadius = keyof typeof borderRadiusMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::64331f0b8b5e2f090a3aad153d92deb6>>
+ * @codegen <<SignedSource::6dffa08c1104af4093361cb0f7e37996>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
@@ -551,7 +551,6 @@ export type BorderRadius = keyof typeof borderRadiusMap;
  */
 export declare const fontMap: {
     'font.body': 'var(--ds-font-body)';
-    'font.body.UNSAFE_small': 'var(--ds-font-body-UNSAFE_small)';
     'font.body.large': 'var(--ds-font-body-large)';
     'font.body.small': 'var(--ds-font-body-small)';
     'font.code': 'var(--ds-font-code)';
@@ -587,7 +586,7 @@ export type FontFamily = keyof typeof fontFamilyMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::aeebc24b95e2189021f1d98f1715a6a0>>
+ * @codegen <<SignedSource::b67a50fa5abb078032598ba819a6f691>>
  * @codegenId text
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenDependency ../../../primitives/scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
@@ -595,7 +594,6 @@ export type FontFamily = keyof typeof fontFamilyMap;
  */
 export declare const textSizeMap: {
     medium: 'var(--ds-font-body)';
-    UNSAFE_small: 'var(--ds-font-body-UNSAFE_small)';
     large: 'var(--ds-font-body-large)';
     small: 'var(--ds-font-body-small)';
 };

package/dist/types-ts4.5/compiled/components/types.d.ts

@@ -40,6 +40,6 @@ export type GapToken = PositiveSpaceToken;
 export type SurfaceColorToken = 'utility.elevation.surface.current' | 'elevation.surface' | 'elevation.surface.overlay' | 'elevation.surface.raised' | 'elevation.surface.sunken';
 export type TextAlign = 'center' | 'end' | 'start';
 export type TextColor = 'color.text' | 'color.text.accent.lime' | 'color.text.accent.lime.bolder' | 'color.text.accent.red' | 'color.text.accent.red.bolder' | 'color.text.accent.orange' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green' | 'color.text.accent.green.bolder' | 'color.text.accent.teal' | 'color.text.accent.teal.bolder' | 'color.text.accent.blue' | 'color.text.accent.blue.bolder' | 'color.text.accent.purple' | 'color.text.accent.purple.bolder' | 'color.text.accent.magenta' | 'color.text.accent.magenta.bolder' | 'color.text.accent.gray' | 'color.text.accent.gray.bolder' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.selected' | 'color.text.brand' | 'color.text.danger' | 'color.text.warning' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.text.subtlest' | 'color.text.subtle' | 'color.link' | 'color.link.pressed' | 'color.link.visited' | 'color.link.visited.pressed';
-export type FontSize = 'small' | 'medium' | 'UNSAFE_small' | 'large';
+export type FontSize = 'small' | 'medium' | 'large';
 export type FontWeight = 'bold' | 'medium' | 'regular' | 'semibold';
 export type MetricTextFontSize = 'small' | 'medium' | 'large';

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

@@ -1,63 +1,2 @@
-import { type CSSObject, type SerializedStyles } 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: (
-/**
- * The desired CSS to place inside of the media query.
- * This can either be a css object directly or functional with `breakpoint` as the arg to return a css object.
- */
-input: CSSObject | ((breakpoint: Breakpoint) => CSSObject)) => Required<Partial<Record<Breakpoint, 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: (
-/**
- * The desired CSS to place inside of the media query.
- * This can either be a css object directly or functional with `breakpoint` as the arg to return a css object.
- */
-input: CSSObject | ((breakpoint: Breakpoint) => CSSObject)) => Required<Partial<Record<Breakpoint, SerializedStyles>>>;
+export { UNSAFE_buildAboveMediaQueryCSS } from './unsafe-build-above-media-query-css';
+export { UNSAFE_buildBelowMediaQueryCSS } from './unsafe-build-below-media-query-css';

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

@@ -1,38 +1,3 @@
-/**
- * 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 declare const media: {
-    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: 110.5rem)";
-    };
-    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: 110.49rem)";
-        readonly xl: "@media (min-width: 110.5rem)";
-    };
-    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: 110.5rem)";
-    };
-};
 /**
  * Keep `UNSAFE_media` for backwards compatibility.
  */
@@ -61,3 +26,4 @@ export declare const UNSAFE_media: {
         readonly xl: '@media not all and (min-width: 110.5rem)';
     };
 };
+export { media } from './media';

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

@@ -0,0 +1,25 @@
+export declare const media: {
+    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: 110.5rem)";
+    };
+    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: 110.49rem)";
+        readonly xl: "@media (min-width: 110.5rem)";
+    };
+    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: 110.5rem)";
+    };
+};

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

@@ -1,5 +1,5 @@
 import { type SerializedStyles } from '@emotion/react';
-import { type media } from './media-helper';
+import type { media } from './media';
 /**
  * The breakpoints we have for responsiveness.
  */

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

@@ -0,0 +1,33 @@
+import { type CSSObject, type SerializedStyles } 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: (
+/**
+ * The desired CSS to place inside of the media query.
+ * This can either be a css object directly or functional with `breakpoint` as the arg to return a css object.
+ */
+input: CSSObject | ((breakpoint: Breakpoint) => CSSObject)) => Required<Partial<Record<Breakpoint, SerializedStyles>>>;