@atlaskit/ds-explorations 5.0.2 → 5.0.4

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

@@ -1,467 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { Fragment, type ReactNode, useContext } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-
-import { token } from '@atlaskit/tokens';
-
-import { SurfaceContext } from './surface-provider';
-import { type BasePrimitiveProps } from './types';
-
-const baseStyles = css({
-	position: 'absolute',
-	inset: 0,
-	borderRadius: 'inherit',
-	cursor: 'pointer',
-	// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-	'~ *': {
-		position: 'relative',
-		pointerEvents: 'none',
-	},
-});
-
-interface InteractionSurfaceProps extends BasePrimitiveProps {
-	children: ReactNode;
-	appearance?: InteractionBackgroundColor;
-}
-
-/**
- *
- * @example
- * ```js
- * // a minimal icon button
- * <Pressable>
- *   <InteractionSurface>
- *    <WarningIcon label="icon button" />
- *  </InteractionSurface>
- * </Pressable>
- * ```
- */
-const InteractionSurface = ({ appearance, children, testId }: InteractionSurfaceProps) => {
-	const defaultSurface = useContext(SurfaceContext);
-	let surface = (appearance || defaultSurface) as InteractionBackgroundColor;
-
-	// This case will occur if the Box has not set a bg color and the ancestor surface
-	// is an elevation. An alternative would be to throw an error here as it may be better
-	// to ensure correct predictable behaviour based on user specification.
-	if (!(surface in backgroundActiveColorMap)) {
-		surface = 'neutral';
-	}
-	return (
-		<Fragment>
-			<span
-				data-testid={testId}
-				css={[
-					baseStyles,
-					surface && backgroundHoverColorMap[surface],
-					surface && backgroundActiveColorMap[surface],
-				]}
-			/>
-			{children}
-		</Fragment>
-	);
-};
-
-export default InteractionSurface;
-
-/**
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::a54b247f1230147faee26c36789b9f6d>>
- * @codegenId interactions
- * @codegenCommand yarn codegen-styles
- * @codegenParams ["background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::d227fb20aa75533eb903b15ddcb61e67>>
- */
-const backgroundActiveColorMap = {
-	'accent.lime.subtlest': css({
-		'&:active': { backgroundColor: token('color.background.accent.lime.subtlest.pressed') },
-	}),
-	'accent.lime.subtler': css({
-		'&:active': { backgroundColor: token('color.background.accent.lime.subtler.pressed') },
-	}),
-	'accent.lime.subtle': css({
-		'&:active': { backgroundColor: token('color.background.accent.lime.subtle.pressed') },
-	}),
-	'accent.lime.bolder': css({
-		'&:active': { backgroundColor: token('color.background.accent.lime.bolder.pressed') },
-	}),
-	'accent.red.subtlest': css({
-		'&:active': { backgroundColor: token('color.background.accent.red.subtlest.pressed') },
-	}),
-	'accent.red.subtler': css({
-		'&:active': { backgroundColor: token('color.background.accent.red.subtler.pressed') },
-	}),
-	'accent.red.subtle': css({
-		'&:active': { backgroundColor: token('color.background.accent.red.subtle.pressed') },
-	}),
-	'accent.red.bolder': css({
-		'&:active': { backgroundColor: token('color.background.accent.red.bolder.pressed') },
-	}),
-	'accent.orange.subtlest': css({
-		'&:active': { backgroundColor: token('color.background.accent.orange.subtlest.pressed') },
-	}),
-	'accent.orange.subtler': css({
-		'&:active': { backgroundColor: token('color.background.accent.orange.subtler.pressed') },
-	}),
-	'accent.orange.subtle': css({
-		'&:active': { backgroundColor: token('color.background.accent.orange.subtle.pressed') },
-	}),
-	'accent.orange.bolder': css({
-		'&:active': { backgroundColor: token('color.background.accent.orange.bolder.pressed') },
-	}),
-	'accent.yellow.subtlest': css({
-		'&:active': { backgroundColor: token('color.background.accent.yellow.subtlest.pressed') },
-	}),
-	'accent.yellow.subtler': css({
-		'&:active': { backgroundColor: token('color.background.accent.yellow.subtler.pressed') },
-	}),
-	'accent.yellow.subtle': css({
-		'&:active': { backgroundColor: token('color.background.accent.yellow.subtle.pressed') },
-	}),
-	'accent.yellow.bolder': css({
-		'&:active': { backgroundColor: token('color.background.accent.yellow.bolder.pressed') },
-	}),
-	'accent.green.subtlest': css({
-		'&:active': { backgroundColor: token('color.background.accent.green.subtlest.pressed') },
-	}),
-	'accent.green.subtler': css({
-		'&:active': { backgroundColor: token('color.background.accent.green.subtler.pressed') },
-	}),
-	'accent.green.subtle': css({
-		'&:active': { backgroundColor: token('color.background.accent.green.subtle.pressed') },
-	}),
-	'accent.green.bolder': css({
-		'&:active': { backgroundColor: token('color.background.accent.green.bolder.pressed') },
-	}),
-	'accent.teal.subtlest': css({
-		'&:active': { backgroundColor: token('color.background.accent.teal.subtlest.pressed') },
-	}),
-	'accent.teal.subtler': css({
-		'&:active': { backgroundColor: token('color.background.accent.teal.subtler.pressed') },
-	}),
-	'accent.teal.subtle': css({
-		'&:active': { backgroundColor: token('color.background.accent.teal.subtle.pressed') },
-	}),
-	'accent.teal.bolder': css({
-		'&:active': { backgroundColor: token('color.background.accent.teal.bolder.pressed') },
-	}),
-	'accent.blue.subtlest': css({
-		'&:active': { backgroundColor: token('color.background.accent.blue.subtlest.pressed') },
-	}),
-	'accent.blue.subtler': css({
-		'&:active': { backgroundColor: token('color.background.accent.blue.subtler.pressed') },
-	}),
-	'accent.blue.subtle': css({
-		'&:active': { backgroundColor: token('color.background.accent.blue.subtle.pressed') },
-	}),
-	'accent.blue.bolder': css({
-		'&:active': { backgroundColor: token('color.background.accent.blue.bolder.pressed') },
-	}),
-	'accent.purple.subtlest': css({
-		'&:active': { backgroundColor: token('color.background.accent.purple.subtlest.pressed') },
-	}),
-	'accent.purple.subtler': css({
-		'&:active': { backgroundColor: token('color.background.accent.purple.subtler.pressed') },
-	}),
-	'accent.purple.subtle': css({
-		'&:active': { backgroundColor: token('color.background.accent.purple.subtle.pressed') },
-	}),
-	'accent.purple.bolder': css({
-		'&:active': { backgroundColor: token('color.background.accent.purple.bolder.pressed') },
-	}),
-	'accent.magenta.subtlest': css({
-		'&:active': { backgroundColor: token('color.background.accent.magenta.subtlest.pressed') },
-	}),
-	'accent.magenta.subtler': css({
-		'&:active': { backgroundColor: token('color.background.accent.magenta.subtler.pressed') },
-	}),
-	'accent.magenta.subtle': css({
-		'&:active': { backgroundColor: token('color.background.accent.magenta.subtle.pressed') },
-	}),
-	'accent.magenta.bolder': css({
-		'&:active': { backgroundColor: token('color.background.accent.magenta.bolder.pressed') },
-	}),
-	'accent.gray.subtlest': css({
-		'&:active': { backgroundColor: token('color.background.accent.gray.subtlest.pressed') },
-	}),
-	'accent.gray.subtler': css({
-		'&:active': { backgroundColor: token('color.background.accent.gray.subtler.pressed') },
-	}),
-	'accent.gray.subtle': css({
-		'&:active': { backgroundColor: token('color.background.accent.gray.subtle.pressed') },
-	}),
-	'accent.gray.bolder': css({
-		'&:active': { backgroundColor: token('color.background.accent.gray.bolder.pressed') },
-	}),
-	input: css({
-		'&:active': { backgroundColor: token('color.background.input.pressed') },
-	}),
-	'inverse.subtle': css({
-		'&:active': { backgroundColor: token('color.background.inverse.subtle.pressed') },
-	}),
-	neutral: css({
-		'&:active': { backgroundColor: token('color.background.neutral.pressed') },
-	}),
-	'neutral.subtle': css({
-		'&:active': { backgroundColor: token('color.background.neutral.subtle.pressed') },
-	}),
-	'neutral.bold': css({
-		'&:active': { backgroundColor: token('color.background.neutral.bold.pressed') },
-	}),
-	selected: css({
-		'&:active': { backgroundColor: token('color.background.selected.pressed') },
-	}),
-	'selected.bold': css({
-		'&:active': { backgroundColor: token('color.background.selected.bold.pressed') },
-	}),
-	'brand.subtlest': css({
-		'&:active': { backgroundColor: token('color.background.brand.subtlest.pressed') },
-	}),
-	'brand.bold': css({
-		'&:active': { backgroundColor: token('color.background.brand.bold.pressed') },
-	}),
-	'brand.boldest': css({
-		'&:active': { backgroundColor: token('color.background.brand.boldest.pressed') },
-	}),
-	danger: css({
-		'&:active': { backgroundColor: token('color.background.danger.pressed') },
-	}),
-	'danger.bold': css({
-		'&:active': { backgroundColor: token('color.background.danger.bold.pressed') },
-	}),
-	warning: css({
-		'&:active': { backgroundColor: token('color.background.warning.pressed') },
-	}),
-	'warning.bold': css({
-		'&:active': { backgroundColor: token('color.background.warning.bold.pressed') },
-	}),
-	success: css({
-		'&:active': { backgroundColor: token('color.background.success.pressed') },
-	}),
-	'success.bold': css({
-		'&:active': { backgroundColor: token('color.background.success.bold.pressed') },
-	}),
-	discovery: css({
-		'&:active': { backgroundColor: token('color.background.discovery.pressed') },
-	}),
-	'discovery.bold': css({
-		'&:active': { backgroundColor: token('color.background.discovery.bold.pressed') },
-	}),
-	information: css({
-		'&:active': { backgroundColor: token('color.background.information.pressed') },
-	}),
-	'information.bold': css({
-		'&:active': { backgroundColor: token('color.background.information.bold.pressed') },
-	}),
-	'elevation.surface': css({
-		'&:active': { backgroundColor: token('elevation.surface.pressed') },
-	}),
-	'elevation.surface.overlay': css({
-		'&:active': { backgroundColor: token('elevation.surface.overlay.pressed') },
-	}),
-	'elevation.surface.raised': css({
-		'&:active': { backgroundColor: token('elevation.surface.raised.pressed') },
-	}),
-};
-
-const backgroundHoverColorMap = {
-	'accent.lime.subtlest': css({
-		'&:hover': { backgroundColor: token('color.background.accent.lime.subtlest.hovered') },
-	}),
-	'accent.lime.subtler': css({
-		'&:hover': { backgroundColor: token('color.background.accent.lime.subtler.hovered') },
-	}),
-	'accent.lime.subtle': css({
-		'&:hover': { backgroundColor: token('color.background.accent.lime.subtle.hovered') },
-	}),
-	'accent.lime.bolder': css({
-		'&:hover': { backgroundColor: token('color.background.accent.lime.bolder.hovered') },
-	}),
-	'accent.red.subtlest': css({
-		'&:hover': { backgroundColor: token('color.background.accent.red.subtlest.hovered') },
-	}),
-	'accent.red.subtler': css({
-		'&:hover': { backgroundColor: token('color.background.accent.red.subtler.hovered') },
-	}),
-	'accent.red.subtle': css({
-		'&:hover': { backgroundColor: token('color.background.accent.red.subtle.hovered') },
-	}),
-	'accent.red.bolder': css({
-		'&:hover': { backgroundColor: token('color.background.accent.red.bolder.hovered') },
-	}),
-	'accent.orange.subtlest': css({
-		'&:hover': { backgroundColor: token('color.background.accent.orange.subtlest.hovered') },
-	}),
-	'accent.orange.subtler': css({
-		'&:hover': { backgroundColor: token('color.background.accent.orange.subtler.hovered') },
-	}),
-	'accent.orange.subtle': css({
-		'&:hover': { backgroundColor: token('color.background.accent.orange.subtle.hovered') },
-	}),
-	'accent.orange.bolder': css({
-		'&:hover': { backgroundColor: token('color.background.accent.orange.bolder.hovered') },
-	}),
-	'accent.yellow.subtlest': css({
-		'&:hover': { backgroundColor: token('color.background.accent.yellow.subtlest.hovered') },
-	}),
-	'accent.yellow.subtler': css({
-		'&:hover': { backgroundColor: token('color.background.accent.yellow.subtler.hovered') },
-	}),
-	'accent.yellow.subtle': css({
-		'&:hover': { backgroundColor: token('color.background.accent.yellow.subtle.hovered') },
-	}),
-	'accent.yellow.bolder': css({
-		'&:hover': { backgroundColor: token('color.background.accent.yellow.bolder.hovered') },
-	}),
-	'accent.green.subtlest': css({
-		'&:hover': { backgroundColor: token('color.background.accent.green.subtlest.hovered') },
-	}),
-	'accent.green.subtler': css({
-		'&:hover': { backgroundColor: token('color.background.accent.green.subtler.hovered') },
-	}),
-	'accent.green.subtle': css({
-		'&:hover': { backgroundColor: token('color.background.accent.green.subtle.hovered') },
-	}),
-	'accent.green.bolder': css({
-		'&:hover': { backgroundColor: token('color.background.accent.green.bolder.hovered') },
-	}),
-	'accent.teal.subtlest': css({
-		'&:hover': { backgroundColor: token('color.background.accent.teal.subtlest.hovered') },
-	}),
-	'accent.teal.subtler': css({
-		'&:hover': { backgroundColor: token('color.background.accent.teal.subtler.hovered') },
-	}),
-	'accent.teal.subtle': css({
-		'&:hover': { backgroundColor: token('color.background.accent.teal.subtle.hovered') },
-	}),
-	'accent.teal.bolder': css({
-		'&:hover': { backgroundColor: token('color.background.accent.teal.bolder.hovered') },
-	}),
-	'accent.blue.subtlest': css({
-		'&:hover': { backgroundColor: token('color.background.accent.blue.subtlest.hovered') },
-	}),
-	'accent.blue.subtler': css({
-		'&:hover': { backgroundColor: token('color.background.accent.blue.subtler.hovered') },
-	}),
-	'accent.blue.subtle': css({
-		'&:hover': { backgroundColor: token('color.background.accent.blue.subtle.hovered') },
-	}),
-	'accent.blue.bolder': css({
-		'&:hover': { backgroundColor: token('color.background.accent.blue.bolder.hovered') },
-	}),
-	'accent.purple.subtlest': css({
-		'&:hover': { backgroundColor: token('color.background.accent.purple.subtlest.hovered') },
-	}),
-	'accent.purple.subtler': css({
-		'&:hover': { backgroundColor: token('color.background.accent.purple.subtler.hovered') },
-	}),
-	'accent.purple.subtle': css({
-		'&:hover': { backgroundColor: token('color.background.accent.purple.subtle.hovered') },
-	}),
-	'accent.purple.bolder': css({
-		'&:hover': { backgroundColor: token('color.background.accent.purple.bolder.hovered') },
-	}),
-	'accent.magenta.subtlest': css({
-		'&:hover': { backgroundColor: token('color.background.accent.magenta.subtlest.hovered') },
-	}),
-	'accent.magenta.subtler': css({
-		'&:hover': { backgroundColor: token('color.background.accent.magenta.subtler.hovered') },
-	}),
-	'accent.magenta.subtle': css({
-		'&:hover': { backgroundColor: token('color.background.accent.magenta.subtle.hovered') },
-	}),
-	'accent.magenta.bolder': css({
-		'&:hover': { backgroundColor: token('color.background.accent.magenta.bolder.hovered') },
-	}),
-	'accent.gray.subtlest': css({
-		'&:hover': { backgroundColor: token('color.background.accent.gray.subtlest.hovered') },
-	}),
-	'accent.gray.subtler': css({
-		'&:hover': { backgroundColor: token('color.background.accent.gray.subtler.hovered') },
-	}),
-	'accent.gray.subtle': css({
-		'&:hover': { backgroundColor: token('color.background.accent.gray.subtle.hovered') },
-	}),
-	'accent.gray.bolder': css({
-		'&:hover': { backgroundColor: token('color.background.accent.gray.bolder.hovered') },
-	}),
-	input: css({
-		'&:hover': { backgroundColor: token('color.background.input.hovered') },
-	}),
-	'inverse.subtle': css({
-		'&:hover': { backgroundColor: token('color.background.inverse.subtle.hovered') },
-	}),
-	neutral: css({
-		'&:hover': { backgroundColor: token('color.background.neutral.hovered') },
-	}),
-	'neutral.subtle': css({
-		'&:hover': { backgroundColor: token('color.background.neutral.subtle.hovered') },
-	}),
-	'neutral.bold': css({
-		'&:hover': { backgroundColor: token('color.background.neutral.bold.hovered') },
-	}),
-	selected: css({
-		'&:hover': { backgroundColor: token('color.background.selected.hovered') },
-	}),
-	'selected.bold': css({
-		'&:hover': { backgroundColor: token('color.background.selected.bold.hovered') },
-	}),
-	'brand.subtlest': css({
-		'&:hover': { backgroundColor: token('color.background.brand.subtlest.hovered') },
-	}),
-	'brand.bold': css({
-		'&:hover': { backgroundColor: token('color.background.brand.bold.hovered') },
-	}),
-	'brand.boldest': css({
-		'&:hover': { backgroundColor: token('color.background.brand.boldest.hovered') },
-	}),
-	danger: css({
-		'&:hover': { backgroundColor: token('color.background.danger.hovered') },
-	}),
-	'danger.bold': css({
-		'&:hover': { backgroundColor: token('color.background.danger.bold.hovered') },
-	}),
-	warning: css({
-		'&:hover': { backgroundColor: token('color.background.warning.hovered') },
-	}),
-	'warning.bold': css({
-		'&:hover': { backgroundColor: token('color.background.warning.bold.hovered') },
-	}),
-	success: css({
-		'&:hover': { backgroundColor: token('color.background.success.hovered') },
-	}),
-	'success.bold': css({
-		'&:hover': { backgroundColor: token('color.background.success.bold.hovered') },
-	}),
-	discovery: css({
-		'&:hover': { backgroundColor: token('color.background.discovery.hovered') },
-	}),
-	'discovery.bold': css({
-		'&:hover': { backgroundColor: token('color.background.discovery.bold.hovered') },
-	}),
-	information: css({
-		'&:hover': { backgroundColor: token('color.background.information.hovered') },
-	}),
-	'information.bold': css({
-		'&:hover': { backgroundColor: token('color.background.information.bold.hovered') },
-	}),
-	'elevation.surface': css({
-		'&:hover': { backgroundColor: token('elevation.surface.hovered') },
-	}),
-	'elevation.surface.overlay': css({
-		'&:hover': { backgroundColor: token('elevation.surface.overlay.hovered') },
-	}),
-	'elevation.surface.raised': css({
-		'&:hover': { backgroundColor: token('elevation.surface.raised.hovered') },
-	}),
-};
-
-type InteractionBackgroundColor = keyof typeof backgroundHoverColorMap;
-
-/**
- * @codegenEnd
- */

package/src/components/surface-provider.tsx

@@ -1,21 +0,0 @@
-import { createContext, useContext } from 'react';
-
-/**
- * __Surface context__
- *
- * A surface context provides context information on the current background (if set).
- */
-export const SurfaceContext = createContext<any>('elevation.surface');
-
-/**
- * __useSurface__
- *
- * Return the current surface. If no parent sets a surface color it falls back to the default surface.
- *
- * @see SurfaceContext
- */
-export const useSurface = () => {
-	return useContext(SurfaceContext);
-};
-
-SurfaceContext.displayName = 'SurfaceProvider';

package/src/components/types.tsx

@@ -1,15 +0,0 @@
-import type { CSSProperties } from 'react';
-
-export interface BasePrimitiveProps {
-	/**
-	 * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
-	 */
-	testId?: string;
-
-	/**
-	 * Inline styles to be applied to the primitive.
-	 * Marked as "unsafe" because any CSS properties can be provided here without any extra control or validation, including those that would be better managed by the primitive itself via props.
-	 * Effectively equivalent to the standard `style` prop but marked with a special name so we can rationalise its usage IN THE FUTURE.
-	 */
-	UNSAFE_style?: CSSProperties;
-}

package/src/constants.tsx

@@ -1,13 +0,0 @@
-export const LAYERS = {
-	card: 100,
-	navigation: 200,
-	dialog: 300,
-	layer: 400,
-	blanket: 500,
-	modal: 510,
-	flag: 600,
-	spotlight: 700,
-	tooltip: 800,
-} as const;
-
-export type Layer = keyof typeof LAYERS;

package/src/index.tsx

@@ -1 +0,0 @@
-export { default as UNSAFE_InteractionSurface } from './components/interaction-surface.partial';

package/src/internal/color-map.tsx

@@ -1,38 +0,0 @@
-/**
- * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- *
- * The color map is used to map a background color token to a matching text color that will meet contrast.
- *
- * @codegen <<SignedSource::e6f777f074b5270687bb9285d5876240>>
- * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::d227fb20aa75533eb903b15ddcb61e67>>
- */
-export default {
-	'neutral.bold': 'inverse',
-	'neutral.bold.hovered': 'inverse',
-	'neutral.bold.pressed': 'inverse',
-	'selected.bold': 'inverse',
-	'selected.bold.hovered': 'inverse',
-	'selected.bold.pressed': 'inverse',
-	'brand.bold': 'inverse',
-	'brand.bold.hovered': 'inverse',
-	'brand.bold.pressed': 'inverse',
-	'brand.boldest': 'inverse',
-	'brand.boldest.hovered': 'inverse',
-	'brand.boldest.pressed': 'inverse',
-	'danger.bold': 'inverse',
-	'danger.bold.hovered': 'inverse',
-	'danger.bold.pressed': 'inverse',
-	'warning.bold': 'warning.inverse',
-	'warning.bold.hovered': 'warning.inverse',
-	'warning.bold.pressed': 'warning.inverse',
-	'success.bold': 'inverse',
-	'success.bold.hovered': 'inverse',
-	'success.bold.pressed': 'inverse',
-	'discovery.bold': 'inverse',
-	'discovery.bold.hovered': 'inverse',
-	'discovery.bold.pressed': 'inverse',
-	'information.bold': 'inverse',
-	'information.bold.hovered': 'inverse',
-	'information.bold.pressed': 'inverse',
-} as const;

package/src/internal/role-to-element.tsx

@@ -1,34 +0,0 @@
-/**
- * Adapted straight from react-mui, with a small change.
- * @see https://www.unpkg.com/browse/react-gui@0.2.1/src/modules/getAccessibilityElementWithSideEffect.js
- */
-const roleToElementType = {
-	article: 'article',
-	banner: 'header',
-	blockquote: 'blockquote',
-	button: 'button',
-	code: 'code',
-	complementary: 'aside',
-	contentinfo: 'footer',
-	deletion: 'del',
-	emphasis: 'em',
-	figure: 'figure',
-	insertion: 'ins',
-	form: 'form',
-	link: 'a',
-	list: 'ul',
-	listitem: 'li',
-	main: 'main',
-	navigation: 'nav',
-	region: 'section',
-	strong: 'strong',
-	presentation: 'div',
-	group: 'fieldset',
-} as const;
-
-type RoleMap = typeof roleToElementType;
-
-export type Role = keyof RoleMap;
-export type SupportedElements = RoleMap[Role] & keyof JSX.IntrinsicElements;
-
-export default roleToElementType;

package/tsconfig.app.json

@@ -1,45 +0,0 @@
-{
-	"extends": "../../../tsconfig.base.json",
-	"include": ["./src/**/*.ts", "./src/**/*.tsx"],
-	"exclude": [
-		"**/docs/**/*",
-		"**/__tests__/**/*",
-		"**/vr-tests/**/*",
-		"**/__perf__/**/*",
-		"**/*.test.*",
-		"**/test.*",
-		"**/test-*",
-		"**/examples.ts",
-		"**/examples.tsx",
-		"**/examples/*.ts",
-		"**/examples/*.tsx",
-		"**/examples/**/*.ts",
-		"**/examples/**/*.tsx",
-		"**/storybook/**/*",
-		"**/constellation/**/*",
-		".storybook/*",
-		"./__fixtures__/**/*",
-		"./__generated__/**/*",
-		"./mocks/**/*",
-		"./__mocks__/**/*",
-		"**/mock.*",
-		"**/codemods/**/*.ts",
-		"**/codemods/**/*.tsx"
-	],
-	"compilerOptions": {
-		"composite": true,
-		"outDir": "../../../tsDist/@atlaskit__ds-explorations/app"
-	},
-	"references": [
-		{
-			"path": "../../../build/formatting/tsconfig.app.json"
-		},
-		{
-			"path": "../tokens/tsconfig.app.json"
-		},
-		{
-			"path": "../codegen/tsconfig.app.json"
-		}
-	],
-	"files": []
-}