@atlaskit/ds-explorations 2.2.8 → 2.2.10

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/ds-explorations
 
+## 2.2.10
+
+### Patch Changes
+
+- [`b11339bc8a3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b11339bc8a3) - Internal updates for ADS Typography ADG3 theme.
+- Updated dependencies
+
+## 2.2.9
+
+### Patch Changes
+
+- [`56b444b56a8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56b444b56a8) - Fix a bug where text descenders were cut off at high zoom levels on Windows
+
 ## 2.2.8
 
 ### Patch Changes

package/dist/cjs/components/interaction-surface.partial.js

@@ -14,7 +14,7 @@ var baseStyles = (0, _react2.css)({
   inset: 0,
   borderRadius: 'inherit',
   cursor: 'pointer',
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '~ *': {
     position: 'relative',
     pointerEvents: 'none'

package/dist/cjs/components/text.partial.js

@@ -53,9 +53,15 @@ var baseStyles = (0, _react2.css)({
   padding: "var(--ds-space-0, 0px)"
 });
 var truncateStyles = (0, _react2.css)({
-  overflow: 'hidden',
   textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
+  whiteSpace: 'nowrap',
+  // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
+  '@supports not (overflow-x: clip)': {
+    overflow: 'hidden'
+  },
+  '@supports (overflow-x: clip)': {
+    overflowX: 'clip'
+  }
 });
 
 /**
@@ -129,11 +135,11 @@ var Text = function Text(_ref) {
 var _default = Text;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9f746e797b8b5262d58b40dfecb39e6d>>
+ * @codegen <<SignedSource::271f64d0bee32f98e5b7a72e76e774a0>>
  * @codegenId typography
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::e6bf70c53b8eecdb84ae4c79966537e3>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::8b6245d4bfc5527a3c9b33af544e04b1>>
  */
 exports.default = _default;
 var fontSizeMap = {
@@ -177,14 +183,26 @@ var fontWeightMap = {
   })
 };
 var fontFamilyMap = {
+  brand: (0, _react2.css)({
+    fontFamily: "var(--ds-font-family-brand, Charlie Sans)"
+  }),
+  code: (0, _react2.css)({
+    fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
+  }),
   monospace: (0, _react2.css)({
-    fontFamily: "var(--ds-font-family-monospace, \"SFMono-Medium\", \"SF Mono\", \"Segoe UI Mono\", \"Roboto Mono\", \"Ubuntu Mono\", Menlo, Consolas, Courier, monospace)"
+    fontFamily: "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
+  }),
+  product: (0, _react2.css)({
+    fontFamily: "var(--ds-font-family-product, ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif)"
   }),
   sans: (0, _react2.css)({
     fontFamily: "var(--ds-font-family-sans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif)"
   })
 };
 var lineHeightMap = {
+  'lineHeight.1': (0, _react2.css)({
+    lineHeight: "var(--ds-font-lineHeight-1, 1)"
+  }),
   'lineHeight.100': (0, _react2.css)({
     lineHeight: "var(--ds-font-lineHeight-100, 16px)"
   }),

package/dist/es2019/components/interaction-surface.partial.js

@@ -7,7 +7,7 @@ const baseStyles = css({
   inset: 0,
   borderRadius: 'inherit',
   cursor: 'pointer',
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '~ *': {
     position: 'relative',
     pointerEvents: 'none'

package/dist/es2019/components/text.partial.js

@@ -44,9 +44,15 @@ const baseStyles = css({
   padding: "var(--ds-space-0, 0px)"
 });
 const truncateStyles = css({
-  overflow: 'hidden',
   textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
+  whiteSpace: 'nowrap',
+  // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
+  '@supports not (overflow-x: clip)': {
+    overflow: 'hidden'
+  },
+  '@supports (overflow-x: clip)': {
+    overflowX: 'clip'
+  }
 });
 
 /**
@@ -120,11 +126,11 @@ export default Text;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9f746e797b8b5262d58b40dfecb39e6d>>
+ * @codegen <<SignedSource::271f64d0bee32f98e5b7a72e76e774a0>>
  * @codegenId typography
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::e6bf70c53b8eecdb84ae4c79966537e3>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::8b6245d4bfc5527a3c9b33af544e04b1>>
  */
 const fontSizeMap = {
   'size.050': css({
@@ -167,14 +173,26 @@ const fontWeightMap = {
   })
 };
 const fontFamilyMap = {
+  brand: css({
+    fontFamily: "var(--ds-font-family-brand, Charlie Sans)"
+  }),
+  code: css({
+    fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
+  }),
   monospace: css({
-    fontFamily: "var(--ds-font-family-monospace, \"SFMono-Medium\", \"SF Mono\", \"Segoe UI Mono\", \"Roboto Mono\", \"Ubuntu Mono\", Menlo, Consolas, Courier, monospace)"
+    fontFamily: "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
+  }),
+  product: css({
+    fontFamily: "var(--ds-font-family-product, ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif)"
   }),
   sans: css({
     fontFamily: "var(--ds-font-family-sans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif)"
   })
 };
 const lineHeightMap = {
+  'lineHeight.1': css({
+    lineHeight: "var(--ds-font-lineHeight-1, 1)"
+  }),
   'lineHeight.100': css({
     lineHeight: "var(--ds-font-lineHeight-100, 16px)"
   }),

package/dist/esm/components/interaction-surface.partial.js

@@ -7,7 +7,7 @@ var baseStyles = css({
   inset: 0,
   borderRadius: 'inherit',
   cursor: 'pointer',
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '~ *': {
     position: 'relative',
     pointerEvents: 'none'

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

@@ -46,9 +46,15 @@ var baseStyles = css({
   padding: "var(--ds-space-0, 0px)"
 });
 var truncateStyles = css({
-  overflow: 'hidden',
   textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
+  whiteSpace: 'nowrap',
+  // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
+  '@supports not (overflow-x: clip)': {
+    overflow: 'hidden'
+  },
+  '@supports (overflow-x: clip)': {
+    overflowX: 'clip'
+  }
 });
 
 /**
@@ -123,11 +129,11 @@ export default Text;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9f746e797b8b5262d58b40dfecb39e6d>>
+ * @codegen <<SignedSource::271f64d0bee32f98e5b7a72e76e774a0>>
  * @codegenId typography
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::e6bf70c53b8eecdb84ae4c79966537e3>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::8b6245d4bfc5527a3c9b33af544e04b1>>
  */
 var fontSizeMap = {
   'size.050': css({
@@ -170,14 +176,26 @@ var fontWeightMap = {
   })
 };
 var fontFamilyMap = {
+  brand: css({
+    fontFamily: "var(--ds-font-family-brand, Charlie Sans)"
+  }),
+  code: css({
+    fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
+  }),
   monospace: css({
-    fontFamily: "var(--ds-font-family-monospace, \"SFMono-Medium\", \"SF Mono\", \"Segoe UI Mono\", \"Roboto Mono\", \"Ubuntu Mono\", Menlo, Consolas, Courier, monospace)"
+    fontFamily: "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
+  }),
+  product: css({
+    fontFamily: "var(--ds-font-family-product, ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif)"
   }),
   sans: css({
     fontFamily: "var(--ds-font-family-sans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif)"
   })
 };
 var lineHeightMap = {
+  'lineHeight.1': css({
+    lineHeight: "var(--ds-font-lineHeight-1, 1)"
+  }),
   'lineHeight.100': css({
     lineHeight: "var(--ds-font-lineHeight-100, 16px)"
   }),

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

@@ -81,11 +81,11 @@ declare const Text: FC<TextProps>;
 export default Text;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9f746e797b8b5262d58b40dfecb39e6d>>
+ * @codegen <<SignedSource::271f64d0bee32f98e5b7a72e76e774a0>>
  * @codegenId typography
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::e6bf70c53b8eecdb84ae4c79966537e3>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::8b6245d4bfc5527a3c9b33af544e04b1>>
  */
 declare const fontSizeMap: {
     'size.050': import("@emotion/react").SerializedStyles;
@@ -106,11 +106,15 @@ declare const fontWeightMap: {
 };
 export type FontWeight = keyof typeof fontWeightMap;
 declare const fontFamilyMap: {
+    brand: import("@emotion/react").SerializedStyles;
+    code: import("@emotion/react").SerializedStyles;
     monospace: import("@emotion/react").SerializedStyles;
+    product: import("@emotion/react").SerializedStyles;
     sans: import("@emotion/react").SerializedStyles;
 };
 export type FontFamily = keyof typeof fontFamilyMap;
 declare const lineHeightMap: {
+    'lineHeight.1': import("@emotion/react").SerializedStyles;
     'lineHeight.100': import("@emotion/react").SerializedStyles;
     'lineHeight.200': import("@emotion/react").SerializedStyles;
     'lineHeight.300': import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/components/text.partial.d.ts

@@ -86,11 +86,11 @@ declare const Text: FC<TextProps>;
 export default Text;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9f746e797b8b5262d58b40dfecb39e6d>>
+ * @codegen <<SignedSource::271f64d0bee32f98e5b7a72e76e774a0>>
  * @codegenId typography
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::e6bf70c53b8eecdb84ae4c79966537e3>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::8b6245d4bfc5527a3c9b33af544e04b1>>
  */
 declare const fontSizeMap: {
     'size.050': import("@emotion/react").SerializedStyles;
@@ -111,11 +111,15 @@ declare const fontWeightMap: {
 };
 export type FontWeight = keyof typeof fontWeightMap;
 declare const fontFamilyMap: {
+    brand: import("@emotion/react").SerializedStyles;
+    code: import("@emotion/react").SerializedStyles;
     monospace: import("@emotion/react").SerializedStyles;
+    product: import("@emotion/react").SerializedStyles;
     sans: import("@emotion/react").SerializedStyles;
 };
 export type FontFamily = keyof typeof fontFamilyMap;
 declare const lineHeightMap: {
+    'lineHeight.1': import("@emotion/react").SerializedStyles;
     'lineHeight.100': import("@emotion/react").SerializedStyles;
     'lineHeight.200': import("@emotion/react").SerializedStyles;
     'lineHeight.300': import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/ds-explorations",
-  "version": "2.2.8",
+  "version": "2.2.10",
   "description": "An experimental package for exploration and validation of spacing / typography foundations.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -25,7 +25,7 @@
     "prepare": "yarn ak-postbuild"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.13.0",
+    "@atlaskit/tokens": "^1.15.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "tiny-invariant": "^1.2.0"

package/report.api.md

@@ -396,6 +396,7 @@ type LineHeight = keyof typeof lineHeightMap;
 
 // @public (undocumented)
 const lineHeightMap: {
+  'lineHeight.1': SerializedStyles;
   'lineHeight.100': SerializedStyles;
   'lineHeight.200': SerializedStyles;
   'lineHeight.300': SerializedStyles;

package/scripts/typography-codegen-template.tsx

@@ -33,6 +33,7 @@ const typographyProperties = {
   },
 } as const;
 
+// @ts-expect-error
 const activeTokens: Token[] = tokens.map((t) => ({
   name: t.name,
   fallback: t.value,

package/src/components/interaction-surface.partial.tsx

@@ -13,7 +13,7 @@ const baseStyles = css({
   inset: 0,
   borderRadius: 'inherit',
   cursor: 'pointer',
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '~ *': {
     position: 'relative',
     pointerEvents: 'none',

package/src/components/text.partial.tsx

@@ -89,9 +89,15 @@ const baseStyles = css({
 });
 
 const truncateStyles = css({
-  overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
+  // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
+  '@supports not (overflow-x: clip)': {
+    overflow: 'hidden',
+  },
+  '@supports (overflow-x: clip)': {
+    overflowX: 'clip',
+  },
 });
 
 /**
@@ -189,11 +195,11 @@ export default Text;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9f746e797b8b5262d58b40dfecb39e6d>>
+ * @codegen <<SignedSource::271f64d0bee32f98e5b7a72e76e774a0>>
  * @codegenId typography
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::e6bf70c53b8eecdb84ae4c79966537e3>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::8b6245d4bfc5527a3c9b33af544e04b1>>
  */
 const fontSizeMap = {
   'size.050': css({
@@ -242,10 +248,25 @@ const fontWeightMap = {
 export type FontWeight = keyof typeof fontWeightMap;
 
 const fontFamilyMap = {
+  brand: css({
+    fontFamily: token('font.family.brand', 'Charlie Sans'),
+  }),
+  code: css({
+    fontFamily: token(
+      'font.family.code',
+      'ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace',
+    ),
+  }),
   monospace: css({
     fontFamily: token(
       'font.family.monospace',
-      '"SFMono-Medium", "SF Mono", "Segoe UI Mono", "Roboto Mono", "Ubuntu Mono", Menlo, Consolas, Courier, monospace',
+      'ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace',
+    ),
+  }),
+  product: css({
+    fontFamily: token(
+      'font.family.product',
+      'ui-sans-serif, "Segoe UI", system-ui, Ubuntu, "Helvetica Neue", sans-serif',
     ),
   }),
   sans: css({
@@ -259,6 +280,9 @@ const fontFamilyMap = {
 export type FontFamily = keyof typeof fontFamilyMap;
 
 const lineHeightMap = {
+  'lineHeight.1': css({
+    lineHeight: token('font.lineHeight.1', '1'),
+  }),
   'lineHeight.100': css({
     lineHeight: token('font.lineHeight.100', '16px'),
   }),

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,627 @@
+## API Report File for "@atlaskit/ds-explorations"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithRef } from 'react';
+import type { CSSProperties } from 'react';
+import { ElementType } from 'react';
+import { FC } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { jsx } from '@emotion/react';
+import { MemoExoticComponent } from 'react';
+import { ReactElement } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+import { SerializedStyles } from '@emotion/react';
+
+// @public (undocumented)
+const asAllowlist: readonly ["span", "div", "p", "strong"];
+
+// @public (undocumented)
+type AsElement = (typeof asAllowlist)[number];
+
+// @public (undocumented)
+type BackgroundColor = keyof typeof backgroundColorMap;
+
+// @public (undocumented)
+const backgroundColorMap: {
+    readonly disabled: SerializedStyles;
+    readonly input: SerializedStyles;
+    readonly 'inverse.subtle': SerializedStyles;
+    readonly neutral: SerializedStyles;
+    readonly 'neutral.subtle': SerializedStyles;
+    readonly 'neutral.bold': SerializedStyles;
+    readonly selected: SerializedStyles;
+    readonly 'selected.bold': SerializedStyles;
+    readonly 'brand.subtlest': SerializedStyles;
+    readonly 'brand.bold': SerializedStyles;
+    readonly 'brand.boldest': SerializedStyles;
+    readonly danger: SerializedStyles;
+    readonly 'danger.bold': SerializedStyles;
+    readonly warning: SerializedStyles;
+    readonly 'warning.bold': SerializedStyles;
+    readonly success: SerializedStyles;
+    readonly 'success.bold': SerializedStyles;
+    readonly discovery: SerializedStyles;
+    readonly 'discovery.bold': SerializedStyles;
+    readonly information: SerializedStyles;
+    readonly 'information.bold': SerializedStyles;
+    readonly 'color.blanket': SerializedStyles;
+    readonly 'color.blanket.selected': SerializedStyles;
+    readonly 'color.blanket.danger': SerializedStyles;
+    readonly 'elevation.surface': SerializedStyles;
+    readonly 'elevation.surface.overlay': SerializedStyles;
+    readonly 'elevation.surface.raised': SerializedStyles;
+    readonly 'elevation.surface.sunken': SerializedStyles;
+};
+
+// @public (undocumented)
+const backgroundHoverColorMap: {
+    input: SerializedStyles;
+    'inverse.subtle': SerializedStyles;
+    neutral: SerializedStyles;
+    'neutral.subtle': SerializedStyles;
+    'neutral.bold': SerializedStyles;
+    selected: SerializedStyles;
+    'selected.bold': SerializedStyles;
+    'brand.subtlest': SerializedStyles;
+    'brand.bold': SerializedStyles;
+    'brand.boldest': SerializedStyles;
+    danger: SerializedStyles;
+    'danger.bold': SerializedStyles;
+    warning: SerializedStyles;
+    'warning.bold': SerializedStyles;
+    success: SerializedStyles;
+    'success.bold': SerializedStyles;
+    discovery: SerializedStyles;
+    'discovery.bold': SerializedStyles;
+    information: SerializedStyles;
+    'information.bold': SerializedStyles;
+    'elevation.surface': SerializedStyles;
+    'elevation.surface.overlay': SerializedStyles;
+    'elevation.surface.raised': SerializedStyles;
+};
+
+// @public (undocumented)
+interface BasePrimitiveProps {
+    testId?: string;
+    UNSAFE_style?: CSSProperties;
+}
+
+// @public (undocumented)
+type BorderColor = keyof typeof borderColorMap;
+
+// @public
+const borderColorMap: {
+    readonly 'color.border': SerializedStyles;
+    readonly disabled: SerializedStyles;
+    readonly focused: SerializedStyles;
+    readonly input: SerializedStyles;
+    readonly inverse: SerializedStyles;
+    readonly selected: SerializedStyles;
+    readonly brand: SerializedStyles;
+    readonly danger: SerializedStyles;
+    readonly warning: SerializedStyles;
+    readonly success: SerializedStyles;
+    readonly discovery: SerializedStyles;
+    readonly information: SerializedStyles;
+    readonly bold: SerializedStyles;
+};
+
+// @public (undocumented)
+type BorderRadius = keyof typeof borderRadiusMap;
+
+// @public (undocumented)
+const borderRadiusMap: {
+    normal: SerializedStyles;
+    rounded: SerializedStyles;
+    badge: SerializedStyles;
+};
+
+// @public (undocumented)
+type BorderStyle = keyof typeof borderStyleMap;
+
+// @public (undocumented)
+const borderStyleMap: {
+    none: SerializedStyles;
+    solid: SerializedStyles;
+    dashed: SerializedStyles;
+    dotted: SerializedStyles;
+};
+
+// @public (undocumented)
+type BorderWidth = keyof typeof borderWidthMap;
+
+// @public (undocumented)
+const borderWidthMap: {
+    '0px': SerializedStyles;
+    '1px': SerializedStyles;
+    '2px': SerializedStyles;
+    '3px': SerializedStyles;
+};
+
+// @public (undocumented)
+type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: UNSAFE_BoxProps<T>) => ReactElement | null) & FC<UNSAFE_BoxProps<T>>;
+
+// @public (undocumented)
+type BoxPropsBase<T extends ElementType> = {
+    as?: T;
+    children?: ReactNode;
+    className?: string;
+    backgroundColor?: BackgroundColor;
+    shadow?: Shadow;
+    borderStyle?: BorderStyle;
+    borderWidth?: BorderWidth;
+    borderColor?: BorderColor;
+    borderRadius?: BorderRadius;
+    layer?: Layer;
+    flexDirection?: FlexDirection;
+    alignItems?: FlexAlignItems;
+    justifyContent?: FlexJustifyContent;
+    overflow?: Overflow;
+    padding?: Padding;
+    paddingBlock?: PaddingBlock;
+    paddingInline?: PaddingInline;
+    width?: Width;
+    height?: Height;
+    display?: Display;
+    position?: Position;
+    ref?: ComponentPropsWithRef<T>['ref'];
+};
+
+// @public (undocumented)
+type ColumnGap = keyof typeof columnGapMap;
+
+// @public
+const columnGapMap: {
+    'space.0': SerializedStyles;
+    'space.025': SerializedStyles;
+    'space.050': SerializedStyles;
+    'space.075': SerializedStyles;
+    'space.100': SerializedStyles;
+    'space.1000': SerializedStyles;
+    'space.150': SerializedStyles;
+    'space.200': SerializedStyles;
+    'space.250': SerializedStyles;
+    'space.300': SerializedStyles;
+    'space.400': SerializedStyles;
+    'space.500': SerializedStyles;
+    'space.600': SerializedStyles;
+    'space.800': SerializedStyles;
+};
+
+// @public (undocumented)
+type Display = keyof typeof displayMap;
+
+// @public (undocumented)
+const displayMap: {
+    block: SerializedStyles;
+    inline: SerializedStyles;
+    flex: SerializedStyles;
+    inlineFlex: SerializedStyles;
+    inlineBlock: SerializedStyles;
+};
+
+// @public
+type FlexAlignItems = keyof typeof flexAlignItemsMap;
+
+// @public (undocumented)
+type FlexAlignItems_2 = keyof typeof flexAlignItemsMap_2;
+
+// @public (undocumented)
+type FlexAlignItems_3 = keyof typeof flexAlignItemsMap_3;
+
+// @public (undocumented)
+const flexAlignItemsMap: {
+    center: SerializedStyles;
+    baseline: SerializedStyles;
+    flexStart: SerializedStyles;
+    flexEnd: SerializedStyles;
+    start: SerializedStyles;
+    end: SerializedStyles;
+};
+
+// @public (undocumented)
+const flexAlignItemsMap_2: {
+    center: SerializedStyles;
+    baseline: SerializedStyles;
+    flexStart: SerializedStyles;
+    flexEnd: SerializedStyles;
+    start: SerializedStyles;
+    end: SerializedStyles;
+};
+
+// @public (undocumented)
+const flexAlignItemsMap_3: {
+    center: SerializedStyles;
+    baseline: SerializedStyles;
+    flexStart: SerializedStyles;
+    flexEnd: SerializedStyles;
+    start: SerializedStyles;
+    end: SerializedStyles;
+};
+
+// @public
+type FlexDirection = keyof typeof flexDirectionMap;
+
+// @public (undocumented)
+const flexDirectionMap: {
+    column: SerializedStyles;
+    row: SerializedStyles;
+};
+
+// @public
+type FlexJustifyContent = keyof typeof flexJustifyContentMap;
+
+// @public (undocumented)
+type FlexJustifyContent_2 = keyof typeof flexJustifyContentMap_2;
+
+// @public (undocumented)
+type FlexJustifyContent_3 = keyof typeof flexJustifyContentMap_3;
+
+// @public (undocumented)
+const flexJustifyContentMap: {
+    center: SerializedStyles;
+    flexStart: SerializedStyles;
+    flexEnd: SerializedStyles;
+    start: SerializedStyles;
+    end: SerializedStyles;
+};
+
+// @public (undocumented)
+const flexJustifyContentMap_2: {
+    center: SerializedStyles;
+    flexStart: SerializedStyles;
+    'space-between': SerializedStyles;
+    flexEnd: SerializedStyles;
+    start: SerializedStyles;
+    end: SerializedStyles;
+    spaceBetween: SerializedStyles;
+};
+
+// @public (undocumented)
+const flexJustifyContentMap_3: {
+    center: SerializedStyles;
+    flexStart: SerializedStyles;
+    flexEnd: SerializedStyles;
+    start: SerializedStyles;
+    end: SerializedStyles;
+};
+
+// @public (undocumented)
+type FlexWrap = keyof typeof flexWrapMap;
+
+// @public (undocumented)
+type FlexWrap_2 = keyof typeof flexWrapMap_2;
+
+// @public (undocumented)
+const flexWrapMap: {
+    wrap: SerializedStyles;
+};
+
+// @public (undocumented)
+const flexWrapMap_2: {
+    wrap: SerializedStyles;
+};
+
+// @public (undocumented)
+type FontSize = keyof typeof fontSizeMap;
+
+// @public
+const fontSizeMap: {
+    'size.050': SerializedStyles;
+    'size.075': SerializedStyles;
+    'size.100': SerializedStyles;
+    'size.200': SerializedStyles;
+    'size.300': SerializedStyles;
+    'size.400': SerializedStyles;
+    'size.500': SerializedStyles;
+    'size.600': SerializedStyles;
+};
+
+// @public (undocumented)
+type FontWeight = keyof typeof fontWeightMap;
+
+// @public (undocumented)
+const fontWeightMap: {
+    bold: SerializedStyles;
+    medium: SerializedStyles;
+    regular: SerializedStyles;
+    semibold: SerializedStyles;
+};
+
+// @public (undocumented)
+type Height = keyof typeof heightMap;
+
+// @public (undocumented)
+const heightMap: {
+    '100%': SerializedStyles;
+    'size.100': SerializedStyles;
+    'size.1000': SerializedStyles;
+    'size.200': SerializedStyles;
+    'size.300': SerializedStyles;
+    'size.400': SerializedStyles;
+    'size.500': SerializedStyles;
+    'size.600': SerializedStyles;
+};
+
+// @public (undocumented)
+type InteractionBackgroundColor = keyof typeof backgroundHoverColorMap;
+
+// @public (undocumented)
+interface InteractionSurfaceProps extends BasePrimitiveProps {
+    // (undocumented)
+    appearance?: InteractionBackgroundColor;
+    // (undocumented)
+    children: ReactNode;
+}
+
+// @public (undocumented)
+type Layer = keyof typeof LAYERS;
+
+// @public (undocumented)
+const LAYERS: {
+    readonly card: 100;
+    readonly navigation: 200;
+    readonly dialog: 300;
+    readonly layer: 400;
+    readonly blanket: 500;
+    readonly modal: 510;
+    readonly flag: 600;
+    readonly spotlight: 700;
+    readonly tooltip: 800;
+};
+
+// @public (undocumented)
+type LineHeight = keyof typeof lineHeightMap;
+
+// @public (undocumented)
+const lineHeightMap: {
+    'lineHeight.1': SerializedStyles;
+    'lineHeight.100': SerializedStyles;
+    'lineHeight.200': SerializedStyles;
+    'lineHeight.300': SerializedStyles;
+    'lineHeight.400': SerializedStyles;
+    'lineHeight.500': SerializedStyles;
+    'lineHeight.600': SerializedStyles;
+};
+
+// @public (undocumented)
+type Overflow = keyof typeof overflowMap;
+
+// @public (undocumented)
+const overflowMap: {
+    auto: SerializedStyles;
+    hidden: SerializedStyles;
+};
+
+// @public (undocumented)
+type Padding = keyof typeof paddingMap;
+
+// @public (undocumented)
+type PaddingBlock = keyof typeof paddingBlockMap;
+
+// @public (undocumented)
+const paddingBlockMap: {
+    'space.0': SerializedStyles;
+    'space.025': SerializedStyles;
+    'space.050': SerializedStyles;
+    'space.075': SerializedStyles;
+    'space.100': SerializedStyles;
+    'space.1000': SerializedStyles;
+    'space.150': SerializedStyles;
+    'space.200': SerializedStyles;
+    'space.250': SerializedStyles;
+    'space.300': SerializedStyles;
+    'space.400': SerializedStyles;
+    'space.500': SerializedStyles;
+    'space.600': SerializedStyles;
+    'space.800': SerializedStyles;
+};
+
+// @public (undocumented)
+type PaddingInline = keyof typeof paddingInlineMap;
+
+// @public (undocumented)
+const paddingInlineMap: {
+    'space.0': SerializedStyles;
+    'space.025': SerializedStyles;
+    'space.050': SerializedStyles;
+    'space.075': SerializedStyles;
+    'space.100': SerializedStyles;
+    'space.1000': SerializedStyles;
+    'space.150': SerializedStyles;
+    'space.200': SerializedStyles;
+    'space.250': SerializedStyles;
+    'space.300': SerializedStyles;
+    'space.400': SerializedStyles;
+    'space.500': SerializedStyles;
+    'space.600': SerializedStyles;
+    'space.800': SerializedStyles;
+};
+
+// @public
+const paddingMap: {
+    'space.0': SerializedStyles;
+    'space.025': SerializedStyles;
+    'space.050': SerializedStyles;
+    'space.075': SerializedStyles;
+    'space.100': SerializedStyles;
+    'space.1000': SerializedStyles;
+    'space.150': SerializedStyles;
+    'space.200': SerializedStyles;
+    'space.250': SerializedStyles;
+    'space.300': SerializedStyles;
+    'space.400': SerializedStyles;
+    'space.500': SerializedStyles;
+    'space.600': SerializedStyles;
+    'space.800': SerializedStyles;
+};
+
+// @public (undocumented)
+type Position = keyof typeof positionMap;
+
+// @public (undocumented)
+const positionMap: {
+    absolute: SerializedStyles;
+    fixed: SerializedStyles;
+    relative: SerializedStyles;
+    static: SerializedStyles;
+};
+
+// @public (undocumented)
+type RowGap = keyof typeof rowGapMap;
+
+// @public
+const rowGapMap: {
+    'space.0': SerializedStyles;
+    'space.025': SerializedStyles;
+    'space.050': SerializedStyles;
+    'space.075': SerializedStyles;
+    'space.100': SerializedStyles;
+    'space.1000': SerializedStyles;
+    'space.150': SerializedStyles;
+    'space.200': SerializedStyles;
+    'space.250': SerializedStyles;
+    'space.300': SerializedStyles;
+    'space.400': SerializedStyles;
+    'space.500': SerializedStyles;
+    'space.600': SerializedStyles;
+    'space.800': SerializedStyles;
+};
+
+// @public (undocumented)
+type Shadow = keyof typeof shadowMap;
+
+// @public (undocumented)
+const shadowMap: {
+    readonly overflow: SerializedStyles;
+    readonly 'overflow.perimeter': SerializedStyles;
+    readonly 'overflow.spread': SerializedStyles;
+    readonly overlay: SerializedStyles;
+    readonly raised: SerializedStyles;
+};
+
+// @public (undocumented)
+type TextAlign = keyof typeof textAlignMap;
+
+// @public (undocumented)
+const textAlignMap: {
+    center: SerializedStyles;
+    end: SerializedStyles;
+    start: SerializedStyles;
+};
+
+// @public (undocumented)
+type TextColor = keyof typeof textColorMap;
+
+// @public
+const textColorMap: {
+    readonly 'color.text': SerializedStyles;
+    readonly disabled: SerializedStyles;
+    readonly inverse: SerializedStyles;
+    readonly selected: SerializedStyles;
+    readonly brand: SerializedStyles;
+    readonly danger: SerializedStyles;
+    readonly warning: SerializedStyles;
+    readonly 'warning.inverse': SerializedStyles;
+    readonly success: SerializedStyles;
+    readonly discovery: SerializedStyles;
+    readonly information: SerializedStyles;
+    readonly subtlest: SerializedStyles;
+    readonly subtle: SerializedStyles;
+};
+
+// @public (undocumented)
+type TextTransform = keyof typeof textTransformMap;
+
+// @public (undocumented)
+const textTransformMap: {
+    none: SerializedStyles;
+    lowercase: SerializedStyles;
+    uppercase: SerializedStyles;
+};
+
+// @public @deprecated
+export const UNSAFE_Box: BoxComponent;
+
+// @public @deprecated (undocumented)
+export type UNSAFE_BoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className' | 'style'> & BasePrimitiveProps & BoxPropsBase<T>;
+
+// @public @deprecated
+export const UNSAFE_Inline: MemoExoticComponent<ForwardRefExoticComponent<UNSAFE_InlineProps & RefAttributes<HTMLDivElement>>>;
+
+// @public @deprecated (undocumented)
+export interface UNSAFE_InlineProps extends BasePrimitiveProps {
+    alignItems?: FlexAlignItems_2;
+    children: ReactNode;
+    divider?: ReactNode;
+    flexWrap?: FlexWrap;
+    gap: ColumnGap;
+    justifyContent?: FlexJustifyContent_2;
+}
+
+// @public (undocumented)
+export const UNSAFE_InteractionSurface: ({ appearance, children, testId, }: InteractionSurfaceProps) => jsx.JSX.Element;
+
+// @public @deprecated
+export const UNSAFE_Stack: MemoExoticComponent<ForwardRefExoticComponent<UNSAFE_StackProps & RefAttributes<HTMLDivElement>>>;
+
+// @public @deprecated (undocumented)
+export interface UNSAFE_StackProps extends BasePrimitiveProps {
+    alignItems?: FlexAlignItems_3;
+    children: ReactNode;
+    flexWrap?: FlexWrap_2;
+    gap: RowGap;
+    justifyContent?: FlexJustifyContent_3;
+}
+
+// @internal
+export const UNSAFE_Text: FC<UNSAFE_TextProps>;
+
+// @public (undocumented)
+export interface UNSAFE_TextProps extends BasePrimitiveProps {
+    as?: AsElement;
+    children: ReactNode;
+    color?: TextColor;
+    fontSize?: FontSize;
+    fontWeight?: FontWeight;
+    id?: string;
+    lineHeight?: LineHeight;
+    shouldTruncate?: boolean;
+    textAlign?: TextAlign;
+    textTransform?: TextTransform;
+    verticalAlign?: VerticalAlign;
+}
+
+// @public (undocumented)
+type VerticalAlign = keyof typeof verticalAlignMap;
+
+// @public (undocumented)
+const verticalAlignMap: {
+    top: SerializedStyles;
+    middle: SerializedStyles;
+    bottom: SerializedStyles;
+};
+
+// @public (undocumented)
+type Width = keyof typeof widthMap;
+
+// @public
+const widthMap: {
+    '100%': SerializedStyles;
+    'size.100': SerializedStyles;
+    'size.1000': SerializedStyles;
+    'size.200': SerializedStyles;
+    'size.300': SerializedStyles;
+    'size.400': SerializedStyles;
+    'size.500': SerializedStyles;
+    'size.600': SerializedStyles;
+};
+
+// (No @packageDocumentation comment for this package)
+
+```

package/dist/cjs/version.json

@@ -1,5 +0,0 @@
-{
-	"name": "@atlaskit/ds-explorations",
-	"version": "2.2.8",
-	"sideEffects": false
-}

package/dist/es2019/version.json

@@ -1,5 +0,0 @@
-{
-	"name": "@atlaskit/ds-explorations",
-	"version": "2.2.8",
-	"sideEffects": false
-}

package/dist/esm/version.json

@@ -1,5 +0,0 @@
-{
-	"name": "@atlaskit/ds-explorations",
-	"version": "2.2.8",
-	"sideEffects": false
-}