@atlaskit/primitives 0.9.1 → 0.9.2

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

@@ -2,11 +2,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { css } from '@emotion/react';
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::fc517b480964965a9d7e6e5c8d921c19>>
+ * @codegen <<SignedSource::7d4a8604dc454e30c0fec5c1330ea7c5>>
  * @codegenId dimensions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["dimensions"]
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::9e8ad113b10e9429c514c69bd362f479>>
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::dbad5eb9ef292d4ec59f90459a81e1d6>>
  */
 export var dimensionMap = {
   '100%': '100%',
@@ -23,28 +23,11 @@ export var dimensionMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8ce817b8abf862e7945a9c9792a1255e>>
+ * @codegen <<SignedSource::9fbc4dfcd8f43f52bff6b3bb666397fe>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["padding", "space", "inset"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
-export var paddingMap = {
-  'space.0': "var(--ds-space-0, 0px)",
-  'space.025': "var(--ds-space-025, 2px)",
-  'space.050': "var(--ds-space-050, 4px)",
-  'space.075': "var(--ds-space-075, 6px)",
-  'space.100': "var(--ds-space-100, 8px)",
-  'space.150': "var(--ds-space-150, 12px)",
-  'space.200': "var(--ds-space-200, 16px)",
-  'space.250': "var(--ds-space-250, 20px)",
-  'space.300': "var(--ds-space-300, 24px)",
-  'space.400': "var(--ds-space-400, 32px)",
-  'space.500': "var(--ds-space-500, 40px)",
-  'space.600': "var(--ds-space-600, 48px)",
-  'space.800': "var(--ds-space-800, 64px)",
-  'space.1000': "var(--ds-space-1000, 80px)"
-};
 export var spaceMap = {
   'space.0': "var(--ds-space-0, 0px)",
   'space.025': "var(--ds-space-025, 2px)",
@@ -61,22 +44,6 @@ export var spaceMap = {
   'space.800': "var(--ds-space-800, 64px)",
   'space.1000': "var(--ds-space-1000, 80px)"
 };
-export var insetMap = {
-  'space.0': "var(--ds-space-0, 0px)",
-  'space.025': "var(--ds-space-025, 2px)",
-  'space.050': "var(--ds-space-050, 4px)",
-  'space.075': "var(--ds-space-075, 6px)",
-  'space.100': "var(--ds-space-100, 8px)",
-  'space.150': "var(--ds-space-150, 12px)",
-  'space.200': "var(--ds-space-200, 16px)",
-  'space.250': "var(--ds-space-250, 20px)",
-  'space.300': "var(--ds-space-300, 24px)",
-  'space.400': "var(--ds-space-400, 32px)",
-  'space.500': "var(--ds-space-500, 40px)",
-  'space.600': "var(--ds-space-600, 48px)",
-  'space.800': "var(--ds-space-800, 64px)",
-  'space.1000': "var(--ds-space-1000, 80px)"
-};
 /**
  * @codegenEnd
  */
@@ -263,13 +230,13 @@ export var textColorMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8838ca696c1fa533db0eb127be15d81e>>
+ * @codegen <<SignedSource::64f7b08cdbce710fba3157594ea695a8>>
  * @codegenId misc
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["align-self", "border-style", "display", "flex-direction", "flex-grow", "flex-shrink", "flex", "layer", "overflow", "position"]
  * @codegenDependency ../../scripts/codegen-file-templates/align-self.tsx <<SignedSource::074079802534462de54bf882bb2073e5>>
  * @codegenDependency ../../scripts/codegen-file-templates/border-style.tsx <<SignedSource::87e7e289ffeaac901997c4af98084a5f>>
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::9e8ad113b10e9429c514c69bd362f479>>
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::dbad5eb9ef292d4ec59f90459a81e1d6>>
  * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::04ea30fcb3c02f2545af7fdc0206e645>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex-grow.tsx <<SignedSource::b8a06b122cb609170f1f42778a6c270e>>
@@ -370,7 +337,12 @@ export var borderRadiusMap = {
  * @codegenEnd
  */
 
-var spacingProperties = ['padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'gap', 'rowGap', 'columnGap'];
+// Generate maps for Box props. backgroundColor, padding, etc
+var spacingProperties = [
+// Used by Box
+'padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd',
+// Used by Inline and Stack
+'gap', 'rowGap', 'columnGap'];
 var getSerializedStylesMap = function getSerializedStylesMap(cssProperty, tokenMap) {
   return Object.keys(tokenMap).reduce(function (emotionSpacingMap, token) {
     emotionSpacingMap[token] = css(_defineProperty({}, cssProperty, tokenMap[token]));
@@ -378,7 +350,7 @@ var getSerializedStylesMap = function getSerializedStylesMap(cssProperty, tokenM
   }, {});
 };
 export var paddingStylesMap = spacingProperties.reduce(function (styleMap, spacingProperty) {
-  styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, paddingMap);
+  styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, spaceMap);
   return styleMap;
 }, {});
 export var spaceStylesMap = spacingProperties.reduce(function (styleMap, spacingProperty) {

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 { alignSelfMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderStyleMap, borderWidthMap, dimensionMap, displayMap, flexDirectionMap, flexGrowMap, flexMap, flexShrinkMap, insetMap, layerMap, overflowBlockMap, overflowInlineMap, overflowMap, paddingMap, positionMap, shadowMap, spaceMap, textColorMap } from './style-maps.partial';
+import { alignSelfMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderStyleMap, borderWidthMap, dimensionMap, displayMap, flexDirectionMap, flexGrowMap, flexMap, flexShrinkMap, layerMap, overflowBlockMap, overflowInlineMap, overflowMap, positionMap, shadowMap, spaceMap, textColorMap } from './style-maps.partial';
 var tokensMap = {
   alignSelf: alignSelfMap,
   backgroundColor: backgroundColorMap,
@@ -25,13 +25,13 @@ var tokensMap = {
   gap: spaceMap,
   height: dimensionMap,
   inlineSize: dimensionMap,
-  inset: insetMap,
-  insetBlock: insetMap,
-  insetBlockEnd: insetMap,
-  insetBlockStart: insetMap,
-  insetInline: insetMap,
-  insetInlineEnd: insetMap,
-  insetInlineStart: insetMap,
+  inset: spaceMap,
+  insetBlock: spaceMap,
+  insetBlockEnd: spaceMap,
+  insetBlockStart: spaceMap,
+  insetInline: spaceMap,
+  insetInlineEnd: spaceMap,
+  insetInlineStart: spaceMap,
   left: dimensionMap,
   maxBlockSize: dimensionMap,
   maxHeight: dimensionMap,
@@ -41,23 +41,23 @@ var tokensMap = {
   minHeight: dimensionMap,
   minInlineSize: dimensionMap,
   minWidth: dimensionMap,
-  outlineOffset: paddingMap,
+  outlineOffset: spaceMap,
   outlineWidth: borderWidthMap,
   outlineColor: borderColorMap,
   overflow: overflowMap,
   overflowBlock: overflowBlockMap,
   overflowInline: overflowInlineMap,
-  padding: paddingMap,
-  paddingBlock: paddingMap,
-  paddingBlockEnd: paddingMap,
-  paddingBlockStart: paddingMap,
-  paddingBottom: paddingMap,
-  paddingInline: paddingMap,
-  paddingInlineEnd: paddingMap,
-  paddingInlineStart: paddingMap,
-  paddingLeft: paddingMap,
-  paddingRight: paddingMap,
-  paddingTop: paddingMap,
+  padding: spaceMap,
+  paddingBlock: spaceMap,
+  paddingBlockEnd: spaceMap,
+  paddingBlockStart: spaceMap,
+  paddingBottom: spaceMap,
+  paddingInline: spaceMap,
+  paddingInlineEnd: spaceMap,
+  paddingInlineStart: spaceMap,
+  paddingLeft: spaceMap,
+  paddingRight: spaceMap,
+  paddingTop: spaceMap,
   position: positionMap,
   right: dimensionMap,
   rowGap: spaceMap,

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

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

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { ElementType, ReactNode } from 'react';
-import { type Gap, type RowGap } from '../xcss/style-maps.partial';
+import { type Space } from '../xcss/style-maps.partial';
 export interface InlineProps<T extends ElementType = 'div'> {
     /**
      * The DOM element to render as the Inline. Defaults to `div`.
@@ -29,12 +29,12 @@ export interface InlineProps<T extends ElementType = 'div'> {
     /**
      * Represents the space between each child.
      */
-    space?: Gap;
+    space?: Space;
     /**
      * Represents the space between rows when content wraps.
      * Used to override the `space` value in between rows.
      */
-    rowSpace?: RowGap;
+    rowSpace?: Space;
     /**
      * Renders a separator string between each child.
      */
@@ -52,10 +52,10 @@ export interface InlineProps<T extends ElementType = 'div'> {
      */
     ref?: React.ComponentPropsWithRef<T>['ref'];
 }
-export declare type AlignInline = 'start' | 'center' | 'end';
-export declare type AlignBlock = 'start' | 'center' | 'end' | 'baseline';
-export declare type Spread = 'space-between';
-export declare type Grow = 'hug' | 'fill';
+export type AlignInline = 'start' | 'center' | 'end';
+export type AlignBlock = 'start' | 'center' | 'end' | 'baseline';
+export type Spread = 'space-between';
+export type Grow = 'hug' | 'fill';
 /**
  * __Inline__
  *

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

@@ -1,13 +1,14 @@
 /** @jsx jsx */
-import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, FC, ReactElement, ReactNode } from 'react';
-import { BackgroundColor, Padding, PaddingBlock, PaddingBlockEnd, PaddingBlockStart, PaddingInline, PaddingInlineEnd, PaddingInlineStart } from '../../xcss/style-maps.partial';
+import { ComponentPropsWithoutRef, ElementType, FC, ReactElement, ReactNode } from 'react';
+import { BackgroundColor, type Space } from '../../xcss/style-maps.partial';
 import type { BasePrimitiveProps } from '../types';
-export declare type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
-declare type BaseBoxPropsFoundation<T extends ElementType> = {
+export type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
+export type As = 'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
+type BaseBoxPropsFoundation<T extends ElementType = 'div'> = {
     /**
      * The DOM element to render as the Box. Defaults to `div`.
      */
-    as?: 'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
+    as?: As;
     /**
      * The HTML className attribute.
      *
@@ -34,43 +35,43 @@ declare type BaseBoxPropsFoundation<T extends ElementType> = {
      * @see paddingBlock
      * @see paddingInline
      */
-    padding?: Padding;
+    padding?: Space;
     /**
      * Tokens representing CSS shorthand `paddingBlock`.
      *
      * @see paddingBlockStart
      * @see paddingBlockEnd
      */
-    paddingBlock?: PaddingBlock;
+    paddingBlock?: Space;
     /**
      * Tokens representing CSS `paddingBlockStart`.
      */
-    paddingBlockStart?: PaddingBlockStart;
+    paddingBlockStart?: Space;
     /**
      * Tokens representing CSS `paddingBlockEnd`.
      */
-    paddingBlockEnd?: PaddingBlockEnd;
+    paddingBlockEnd?: Space;
     /**
      * Tokens representing CSS shorthand `paddingInline`.
      *
      * @see paddingInlineStart
      * @see paddingInlineEnd
      */
-    paddingInline?: PaddingInline;
+    paddingInline?: Space;
     /**
      * Tokens representing CSS `paddingInlineStart`.
      */
-    paddingInlineStart?: PaddingInlineStart;
+    paddingInlineStart?: Space;
     /**
      * Tokens representing CSS `paddingInlineEnd`.
      */
-    paddingInlineEnd?: PaddingInlineEnd;
+    paddingInlineEnd?: Space;
     /**
      * Forwarded ref element
      */
-    ref?: ComponentPropsWithRef<T>['ref'];
+    ref?: React.ComponentPropsWithRef<T>['ref'];
 };
-export declare type BaseBoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BaseBoxProps<T>) => ReactElement | null) & FC<BaseBoxProps<T>>;
+export type BaseBoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BaseBoxProps<T>) => ReactElement | null) & FC<BaseBoxProps<T>>;
 /**
  * __Box__
  *

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { ElementType, ReactNode } from 'react';
-import { type Gap } from '../xcss/style-maps.partial';
+import { type Space } from '../xcss/style-maps.partial';
 export interface StackProps<T extends ElementType = 'div'> {
     /**
      * The DOM element to render as the Stack. Defaults to `div`.
@@ -25,7 +25,7 @@ export interface StackProps<T extends ElementType = 'div'> {
     /**
      * Represents the space between each child.
      */
-    space?: Gap;
+    space?: Space;
     /**
      * A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.
      */
@@ -39,10 +39,10 @@ export interface StackProps<T extends ElementType = 'div'> {
      */
     ref?: React.ComponentPropsWithRef<T>['ref'];
 }
-export declare type AlignInline = 'start' | 'center' | 'end';
-export declare type AlignBlock = 'start' | 'center' | 'end';
-export declare type Spread = 'space-between';
-export declare type Grow = 'hug' | 'fill';
+export type AlignInline = 'start' | 'center' | 'end';
+export type AlignBlock = 'start' | 'center' | 'end';
+export type Spread = 'space-between';
+export type Grow = 'hug' | 'fill';
 /**
  * __Stack__
  *

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

@@ -1,6 +1,6 @@
 import type { CSSProperties } from 'react';
 import { type BoxXCSS } from '../xcss/xcss';
-export declare type BasePrimitiveProps = {
+export type BasePrimitiveProps = {
     /**
      * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
@@ -10,7 +10,7 @@ export declare type BasePrimitiveProps = {
      */
     style?: CSSProperties;
 };
-export declare type PublicBoxPropsBase = {
+export type PublicBoxPropsBase = {
     /**
      * Safe subset of styles that can be applied as a classname.
      */

package/dist/types/constants.d.ts

@@ -9,4 +9,4 @@ export declare const LAYERS: {
     readonly spotlight: 700;
     readonly tooltip: 800;
 };
-export declare type Layer = keyof typeof LAYERS;
+export type Layer = keyof typeof LAYERS;

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

@@ -3,11 +3,11 @@ import { token } from '@atlaskit/tokens';
 /**
  * The breakpoints we have for responsiveness.
  */
-export declare type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 /**
  * An object type mapping a value to each breakpoint (optionally)
  */
-export declare type ResponsiveObject<T> = Partial<Record<Breakpoint, T>>;
+export type ResponsiveObject<T> = Partial<Record<Breakpoint, T>>;
 /**
  * A map of breakpoints to CSS, commonly used to build maps given a responsive object
  * so we can statically compile CSS upfront, but dynamically apply it.
@@ -23,11 +23,11 @@ export declare type ResponsiveObject<T> = Partial<Record<Breakpoint, T>>;
  * return <div css={setMarginBreakpoints.map(breakpoint => marginMediaQueries[breakpoint])} />
  * ```
  */
-export declare type ResponsiveCSSObject = ResponsiveObject<SerializedStyles>;
+export type ResponsiveCSSObject = ResponsiveObject<SerializedStyles>;
 /**
  * Our internal breakpoint config used to build media queries and define attributes for certain components.
  */
-export declare type BreakpointConfig = {
+export type BreakpointConfig = {
     /**
      * The gap between a `GridItem`.
      */