@atlaskit/primitives 0.2.1 → 0.3.0

package/dist/esm/components/stack.partial.js

@@ -1,4 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import { forwardRef, memo } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -38,30 +37,56 @@ var flexGrowMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0e30ffcc6aef7932f9d8ff2543327236>>
+ * @codegen <<SignedSource::41d7002b7f69aa44d0d8598e07a1afc6>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["space"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
-var spaceMap = Object.fromEntries(['gap'].map(function (property) {
-  return [property, {
-    '0': css(_defineProperty({}, property, "var(--ds-space-0, 0px)")),
-    '025': css(_defineProperty({}, property, "var(--ds-space-025, 2px)")),
-    '050': css(_defineProperty({}, property, "var(--ds-space-050, 4px)")),
-    '075': css(_defineProperty({}, property, "var(--ds-space-075, 6px)")),
-    '100': css(_defineProperty({}, property, "var(--ds-space-100, 8px)")),
-    '150': css(_defineProperty({}, property, "var(--ds-space-150, 12px)")),
-    '200': css(_defineProperty({}, property, "var(--ds-space-200, 16px)")),
-    '250': css(_defineProperty({}, property, "var(--ds-space-250, 20px)")),
-    '300': css(_defineProperty({}, property, "var(--ds-space-300, 24px)")),
-    '400': css(_defineProperty({}, property, "var(--ds-space-400, 32px)")),
-    '500': css(_defineProperty({}, property, "var(--ds-space-500, 40px)")),
-    '600': css(_defineProperty({}, property, "var(--ds-space-600, 48px)")),
-    '800': css(_defineProperty({}, property, "var(--ds-space-800, 64px)")),
-    '1000': css(_defineProperty({}, property, "var(--ds-space-1000, 80px)"))
-  }];
-}));
+var spaceMap = {
+  '0': css({
+    gap: "var(--ds-space-0, 0px)"
+  }),
+  '025': css({
+    gap: "var(--ds-space-025, 2px)"
+  }),
+  '050': css({
+    gap: "var(--ds-space-050, 4px)"
+  }),
+  '075': css({
+    gap: "var(--ds-space-075, 6px)"
+  }),
+  '100': css({
+    gap: "var(--ds-space-100, 8px)"
+  }),
+  '150': css({
+    gap: "var(--ds-space-150, 12px)"
+  }),
+  '200': css({
+    gap: "var(--ds-space-200, 16px)"
+  }),
+  '250': css({
+    gap: "var(--ds-space-250, 20px)"
+  }),
+  '300': css({
+    gap: "var(--ds-space-300, 24px)"
+  }),
+  '400': css({
+    gap: "var(--ds-space-400, 32px)"
+  }),
+  '500': css({
+    gap: "var(--ds-space-500, 40px)"
+  }),
+  '600': css({
+    gap: "var(--ds-space-600, 48px)"
+  }),
+  '800': css({
+    gap: "var(--ds-space-800, 64px)"
+  }),
+  '1000': css({
+    gap: "var(--ds-space-1000, 80px)"
+  })
+};
 /**
  * @codegenEnd
  */
@@ -96,7 +121,7 @@ var Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
     testId = _ref.testId;
   var justifyContent = spread || alignBlock;
   return jsx("div", {
-    css: [baseStyles, space && spaceMap.gap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
+    css: [baseStyles, space && spaceMap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
     "data-testid": testId,
     ref: ref
   }, children);

package/dist/esm/constants.js

@@ -1,3 +1,4 @@
+import { UNSAFE_Breakpoint as Breakpoint, UNSAFE_BreakpointConfig as BreakpointConfig, UNSAFE_BREAKPOINTS_CONFIG as BREAKPOINTS_CONFIG, UNSAFE_BREAKPOINTS_LIST as BREAKPOINTS_LIST } from '@atlaskit/ds-explorations';
 export var LAYERS = {
   card: 100,
   navigation: 200,
@@ -8,4 +9,5 @@ export var LAYERS = {
   flag: 600,
   spotlight: 700,
   tooltip: 800
-};
+};
+export { BREAKPOINTS_CONFIG, BREAKPOINTS_LIST };

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

@@ -0,0 +1,79 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { css } from '@emotion/react';
+import { SMALLEST_BREAKPOINT, 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.
+ *
+ * @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 var UNSAFE_buildAboveMediaQueryCSS = function UNSAFE_buildAboveMediaQueryCSS(input) {
+  return UNSAFE_BREAKPOINTS_ORDERED_LIST.reduce(function (acc, breakpoint) {
+    return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, breakpoint, css(_defineProperty({}, UNSAFE_media.above[breakpoint], typeof input === 'function' ? input(breakpoint) : input))));
+  }, {});
+};
+
+/**
+ * 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 var UNSAFE_buildBelowMediaQueryCSS = function UNSAFE_buildBelowMediaQueryCSS(input) {
+  /**
+   * WARNING: it's very important that these are in the correct order.
+   * If they are not, cascading is not in the order higher/low breakpoints do not override as expected.
+   */
+  var reversedBreakpoints = _toConsumableArray(UNSAFE_BREAKPOINTS_ORDERED_LIST).reverse();
+  return reversedBreakpoints.reduce(function (acc, breakpoint) {
+    // Omit `media.below.xxs` as it's not available as that would be `<0px`…
+    if (breakpoint === SMALLEST_BREAKPOINT) {
+      return acc;
+    }
+    return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, breakpoint, css(_defineProperty({}, UNSAFE_media.below[breakpoint], typeof input === 'function' ? input(breakpoint) : input))));
+  }, {});
+};

package/dist/esm/helpers/responsive/constants.js

@@ -0,0 +1,76 @@
+/**
+ * Our internal configuration for breakpoints configuration.
+ *
+ * @experimental Unsafe for consumption outside of the design system itself.
+ */
+export var UNSAFE_BREAKPOINTS_CONFIG = {
+  // mobile
+  xxs: {
+    gridItemGutter: "var(--ds-space-200, 16px)",
+    gridMargin: "var(--ds-space-200, 16px)",
+    min: 0,
+    max: 479
+  },
+  // phablet
+  xs: {
+    gridItemGutter: "var(--ds-space-200, 16px)",
+    gridMargin: "var(--ds-space-200, 16px)",
+    min: 480,
+    max: 767
+  },
+  // tablet
+  sm: {
+    gridItemGutter: "var(--ds-space-200, 16px)",
+    gridMargin: "var(--ds-space-300, 24px)",
+    min: 768,
+    max: 1023
+  },
+  // laptop desktop
+  md: {
+    gridItemGutter: "var(--ds-space-300, 24px)",
+    gridMargin: "var(--ds-space-400, 32px)",
+    min: 1024,
+    max: 1439
+  },
+  // monitor
+  lg: {
+    gridItemGutter: "var(--ds-space-400, 32px)",
+    gridMargin: "var(--ds-space-400, 32px)",
+    min: 1440,
+    max: 1767
+  },
+  // large high res
+  xl: {
+    gridItemGutter: "var(--ds-space-400, 32px)",
+    gridMargin: "var(--ds-space-500, 40px)",
+    min: 1768,
+    max: 2159
+  },
+  // extra large high res
+  xxl: {
+    gridItemGutter: "var(--ds-space-500, 40px)",
+    gridMargin: "var(--ds-space-500, 40px)",
+    min: 2160,
+    max: Number.MAX_SAFE_INTEGER
+  }
+};
+
+/**
+ * The list of breakpoints in order from smallest to largest.  You may need to clone and reverse this list if you want the opposite.
+ *
+ * This is intentional for cascading with `min-width` or `media.above`. Media queries go from lowest width to highest.
+ *
+ * @experimental Unsafe for consumption outside of the design system itself.
+ */
+export var UNSAFE_BREAKPOINTS_ORDERED_LIST = Object.keys(UNSAFE_BREAKPOINTS_CONFIG).sort(function (a, b) {
+  return UNSAFE_BREAKPOINTS_CONFIG[a].min - UNSAFE_BREAKPOINTS_CONFIG[b].min;
+});
+
+/**
+ * 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 var SMALLEST_BREAKPOINT = UNSAFE_BREAKPOINTS_ORDERED_LIST[0];

package/dist/esm/helpers/responsive/index.js

@@ -0,0 +1,3 @@
+export { UNSAFE_media } from './media-helper';
+export { UNSAFE_buildAboveMediaQueryCSS, UNSAFE_buildBelowMediaQueryCSS } from './build-media-query-css';
+export { UNSAFE_BREAKPOINTS_ORDERED_LIST, UNSAFE_BREAKPOINTS_CONFIG } from './constants';

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

@@ -0,0 +1,78 @@
+import { UNSAFE_BREAKPOINTS_CONFIG } from './constants';
+
+/**
+ * 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…"
+ */
+var BELOW_PRECISION = 0.02;
+
+/**
+ * This is the full internal version.  The import has been separated to only expose as-needed.
+ */
+var internalMedia = {
+  /**
+   * 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)`
+     */
+    xxs: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xxs.min, "px)"),
+    xs: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xs.min, "px)"),
+    sm: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.sm.min, "px)"),
+    md: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.md.min, "px)"),
+    lg: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.lg.min, "px)"),
+    xl: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xl.min, "px)"),
+    xxl: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xxl.min, "px)")
+  },
+  below: {
+    /**
+     * A media query to target viewports below the min width of a given breakpoint.
+     * Note that `media.below.xxs` is intentionally omitted as this would be `@media (max-width: 0px)`
+     */
+    xs: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xs.min - BELOW_PRECISION, "px)"),
+    sm: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.sm.min - BELOW_PRECISION, "px)"),
+    md: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.md.min - BELOW_PRECISION, "px)"),
+    lg: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.lg.min - BELOW_PRECISION, "px)"),
+    xl: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xl.min - BELOW_PRECISION, "px)"),
+    xxl: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xxl.min - BELOW_PRECISION, "px)")
+  },
+  /**
+   * A media query to target viewports exactly between the min and max of a given breakpoint.
+   */
+  only: {
+    xxs: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xxs.min, "px) and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.xxs.max, "px)"),
+    xs: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xs.min, "px) and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.xs.max, "px)"),
+    sm: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.sm.min, "px) and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.sm.max, "px)"),
+    md: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.md.min, "px) and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.md.max, "px)"),
+    lg: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.lg.min, "px) and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.lg.max, "px)"),
+    xl: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xl.min, "px) and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.xl.max, "px)"),
+    xxl: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xxl.min, "px) and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.xxl.max, "px)")
+  }
+};
+
+/**
+ * This is an object of usable media query helpers using our internal breakpoints configuration.
+ *
+ * @experimental Unsafe for usage as the API is not finalized.
+ */
+export var UNSAFE_media = {
+  above: internalMedia.above,
+  below: internalMedia.below
+};
+
+/**
+ * With these types:
+ * ```
+ * type MediaQuery = `@media (${string})`;
+ * type ResponsiveMediaObject = Record<Breakpoint, MediaQuery>;
+ * ```
+ *
+ * TODO: This `media` object as of typescript@4.9, would benefit from satisfies, eg.:
+ * ```
+ * const UNSAFE_media = { … } satisfies Record<'above' | 'only', ResponsiveMediaObject> & { below: Omit<ResponsiveMediaObject, 'xxs'> }
+ * ```
+ */

package/dist/esm/helpers/responsive/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.2.1",
+	"version": "0.3.0",
 	"sideEffects": false
 }

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

@@ -1,10 +1,8 @@
 import { ElementType, FC, ReactElement } from 'react';
 import { BaseBoxProps } from './internal/base-box.partial';
-import { CustomStyles } from './types';
-declare type BoxPropsBase = {
-    customStyles?: CustomStyles;
-};
-export declare type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'className' | 'UNSAFE_style'> & BoxPropsBase;
+import { BoxResponsiveProp } from './internal/types';
+import { PublicBoxPropsBase } from './types';
+export declare type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'className' | 'UNSAFE_style' | BoxResponsiveProp> & PublicBoxPropsBase;
 declare type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BoxProps<T>) => ReactElement | null) & FC<BoxProps<T>>;
 /**
  * __Box__

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

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

package/dist/types/components/internal/base-box.partial.d.ts

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, FC, ReactElement, ReactNode } from 'react';
-import { Layer } from '../../constants';
+import { Breakpoint, Layer } from '../../constants';
 import type { BasePrimitiveProps } from '../types';
 export declare type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className' | 'style'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
 declare type BaseBoxPropsFoundation<T extends ElementType> = {
@@ -43,7 +43,7 @@ declare type BaseBoxPropsFoundation<T extends ElementType> = {
     /**
      * Defines border width.
      */
-    borderWidth?: BorderWidth;
+    borderWidth?: BorderWidth | Partial<Record<Breakpoint, BorderWidth>>;
     /**
      * Token representing border color with a fallback.
      */
@@ -89,42 +89,42 @@ declare type BaseBoxPropsFoundation<T extends ElementType> = {
      */
     overflowBlock?: OverflowBlock;
     /**
-     * Shorthand for `paddingBlock` and `paddingInline` together.
+     * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
      *
      * @see paddingBlock
      * @see paddingInline
      */
-    padding?: Padding;
+    padding?: Padding | Partial<Record<Breakpoint, Padding>>;
     /**
-     * Token representing CSS shorthand `paddingBlock`.
+     * Tokens representing CSS shorthand `paddingBlock`.
      *
      * @see paddingBlockStart
      * @see paddingBlockEnd
      */
-    paddingBlock?: PaddingBlock;
+    paddingBlock?: PaddingBlock | Partial<Record<Breakpoint, PaddingBlock>>;
     /**
-     * Token representing CSS `paddingBlockStart`.
+     * Tokens representing CSS `paddingBlockStart`.
      */
-    paddingBlockStart?: PaddingBlockStart;
+    paddingBlockStart?: PaddingBlockStart | Partial<Record<Breakpoint, PaddingBlockStart>>;
     /**
-     * Token representing CSS `paddingBlockEnd`.
+     * Tokens representing CSS `paddingBlockEnd`.
      */
-    paddingBlockEnd?: PaddingBlockEnd;
+    paddingBlockEnd?: PaddingBlockEnd | Partial<Record<Breakpoint, PaddingBlockEnd>>;
     /**
-     * Token representing CSS shorthand `paddingInline`.
+     * Tokens representing CSS shorthand `paddingInline`.
      *
      * @see paddingInlineStart
      * @see paddingInlineEnd
      */
-    paddingInline?: PaddingInline;
+    paddingInline?: PaddingInline | Partial<Record<Breakpoint, PaddingInline>>;
     /**
-     * Token representing CSS `paddingInlineStart`.
+     * Tokens representing CSS `paddingInlineStart`.
      */
-    paddingInlineStart?: PaddingInlineStart;
+    paddingInlineStart?: PaddingInlineStart | Partial<Record<Breakpoint, PaddingInlineStart>>;
     /**
-     * Token representing CSS `paddingInlineEnd`.
+     * Tokens representing CSS `paddingInlineEnd`.
      */
-    paddingInlineEnd?: PaddingInlineEnd;
+    paddingInlineEnd?: PaddingInlineEnd | Partial<Record<Breakpoint, PaddingInlineEnd>>;
     /**
      * Token representing width.
      * @experimental The existing tokens will be replaced to better reflect dimensions.
@@ -138,7 +138,7 @@ declare type BaseBoxPropsFoundation<T extends ElementType> = {
     /**
      * Defines display type and layout. Defaults to `block`.
      */
-    display?: Display;
+    display?: Display | Partial<Record<Breakpoint, Display>>;
     /**
      * CSS position property.
      */
@@ -161,10 +161,11 @@ declare const borderStyleMap: {
     readonly none: import("@emotion/react").SerializedStyles;
     readonly solid: import("@emotion/react").SerializedStyles;
 };
-declare type BorderWidth = keyof typeof borderWidthMap;
+export declare type BorderWidth = keyof typeof borderWidthMap;
 declare const borderWidthMap: {
-    readonly 'size.050': import("@emotion/react").SerializedStyles;
-    readonly 'size.100': import("@emotion/react").SerializedStyles;
+    readonly 'size.0': "var(--ds-width-0)";
+    readonly 'size.050': "var(--ds-width-050)";
+    readonly 'size.100': "var(--ds-width-100)";
 };
 declare type BorderRadius = keyof typeof borderRadiusMap;
 declare const borderRadiusMap: {
@@ -196,13 +197,13 @@ declare const alignSelfMap: {
     readonly end: import("@emotion/react").SerializedStyles;
     readonly baseline: import("@emotion/react").SerializedStyles;
 };
-declare type Display = keyof typeof displayMap;
+export declare type Display = keyof typeof displayMap;
 declare const displayMap: {
-    readonly block: import("@emotion/react").SerializedStyles;
-    readonly inline: import("@emotion/react").SerializedStyles;
-    readonly flex: import("@emotion/react").SerializedStyles;
-    readonly 'inline-flex': import("@emotion/react").SerializedStyles;
-    readonly 'inline-block': import("@emotion/react").SerializedStyles;
+    readonly block: "block";
+    readonly inline: "inline";
+    readonly flex: "flex";
+    readonly 'inline-flex': "inline-flex";
+    readonly 'inline-block': "inline-block";
 };
 declare type Position = keyof typeof positionMap;
 declare const positionMap: {
@@ -304,37 +305,35 @@ export declare type MaxHeight = keyof typeof maxHeightMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::6da0ceaa2c227230e3a93bc724ff8648>>
+ * @codegen <<SignedSource::84fd352b0e6509d380a0dcf8ad023ca2>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding"]
  * @codegenDependency ../../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
 declare const paddingMap: {
-    [k: string]: {
-        readonly 'space.0': import("@emotion/react").SerializedStyles;
-        readonly 'space.025': import("@emotion/react").SerializedStyles;
-        readonly 'space.050': import("@emotion/react").SerializedStyles;
-        readonly 'space.075': import("@emotion/react").SerializedStyles;
-        readonly 'space.100': import("@emotion/react").SerializedStyles;
-        readonly 'space.150': import("@emotion/react").SerializedStyles;
-        readonly 'space.200': import("@emotion/react").SerializedStyles;
-        readonly 'space.250': import("@emotion/react").SerializedStyles;
-        readonly 'space.300': import("@emotion/react").SerializedStyles;
-        readonly 'space.400': import("@emotion/react").SerializedStyles;
-        readonly 'space.500': import("@emotion/react").SerializedStyles;
-        readonly 'space.600': import("@emotion/react").SerializedStyles;
-        readonly 'space.800': import("@emotion/react").SerializedStyles;
-        readonly 'space.1000': import("@emotion/react").SerializedStyles;
-    };
+    readonly 'space.0': "var(--ds-space-0)";
+    readonly 'space.025': "var(--ds-space-025)";
+    readonly 'space.050': "var(--ds-space-050)";
+    readonly 'space.075': "var(--ds-space-075)";
+    readonly 'space.100': "var(--ds-space-100)";
+    readonly 'space.150': "var(--ds-space-150)";
+    readonly 'space.200': "var(--ds-space-200)";
+    readonly 'space.250': "var(--ds-space-250)";
+    readonly 'space.300': "var(--ds-space-300)";
+    readonly 'space.400': "var(--ds-space-400)";
+    readonly 'space.500': "var(--ds-space-500)";
+    readonly 'space.600': "var(--ds-space-600)";
+    readonly 'space.800': "var(--ds-space-800)";
+    readonly 'space.1000': "var(--ds-space-1000)";
 };
-export declare type Padding = keyof typeof paddingMap.padding;
-export declare type PaddingBlock = keyof typeof paddingMap.paddingBlock;
-export declare type PaddingBlockStart = keyof typeof paddingMap.paddingBlockStart;
-export declare type PaddingBlockEnd = keyof typeof paddingMap.paddingBlockEnd;
-export declare type PaddingInline = keyof typeof paddingMap.paddingInline;
-export declare type PaddingInlineStart = keyof typeof paddingMap.paddingInlineStart;
-export declare type PaddingInlineEnd = keyof typeof paddingMap.paddingInlineEnd;
+export declare type Padding = keyof typeof paddingMap;
+export declare type PaddingBlock = keyof typeof paddingMap;
+export declare type PaddingBlockStart = keyof typeof paddingMap;
+export declare type PaddingBlockEnd = keyof typeof paddingMap;
+export declare type PaddingInline = keyof typeof paddingMap;
+export declare type PaddingInlineStart = keyof typeof paddingMap;
+export declare type PaddingInlineEnd = keyof typeof paddingMap;
 /**
  * @codegenEnd
  */

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

@@ -0,0 +1,6 @@
+import { SerializedStyles } from '@emotion/react';
+import { Breakpoint } from '../../constants';
+export declare const BOX_RESPONSIVE_PROPS: readonly ["borderWidth", "display", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd"];
+export declare type BoxResponsiveProp = typeof BOX_RESPONSIVE_PROPS[number];
+export declare type BreakpointIndexedStyle = Record<Breakpoint | 'static', SerializedStyles>;
+export declare type GenericPropertyValue = string | Partial<Record<Breakpoint, string>> | undefined;

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

@@ -0,0 +1,3 @@
+import { GenericPropertyValue } from './types';
+export declare const isResponsiveStyleProp: (propertyValue: GenericPropertyValue) => propertyValue is object;
+export declare const isStaticStyleProp: (propertyValue: GenericPropertyValue) => propertyValue is string;