@atlaskit/primitives 1.4.3 → 1.5.0

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

@@ -1,5 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { css } from '@emotion/react';
+import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
+
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  * @codegen <<SignedSource::7af6097e56f7fb03635b6f8aaf121b02>>
@@ -49,10 +51,10 @@ export var spaceMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::3f4d926ce14cda107d25c697f3a0c200>>
+ * @codegen <<SignedSource::3db44f53b728773bb3ba1473d4567724>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
- * @codegenParams ["border", "background", "shadow", "text", "fill"]
+ * @codegenParams ["border", "background", "shadow", "text", "fill", "surface"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
  */
 export var borderColorMap = {
@@ -274,7 +276,8 @@ export var backgroundColorMap = {
   'elevation.surface.raised': "var(--ds-surface-raised, #FFFFFF)",
   'elevation.surface.raised.hovered': "var(--ds-surface-raised-hovered, #FAFBFC)",
   'elevation.surface.raised.pressed': "var(--ds-surface-raised-pressed, #F4F5F7)",
-  'elevation.surface.sunken': "var(--ds-surface-sunken, #F4F5F7)"
+  'elevation.surface.sunken': "var(--ds-surface-sunken, #F4F5F7)",
+  'utility.elevation.surface.current': "var(--ds-elevation-surface-current, #FFFFFF)"
 };
 export var shadowMap = {
   'elevation.shadow.overflow': "var(--ds-shadow-overflow, 0px 0px 8px #091e423f, 0px 0px 1px #091e424f)",
@@ -344,6 +347,18 @@ export var fillMap = {
   'color.icon.information': "var(--ds-icon-information, #0747A6)",
   'color.icon.subtle': "var(--ds-icon-subtle, #6B778C)"
 };
+export var surfaceColorMap = {
+  'elevation.surface': "var(--ds-surface, #FFFFFF)",
+  'elevation.surface.hovered': "var(--ds-surface-hovered, #FAFBFC)",
+  'elevation.surface.pressed': "var(--ds-surface-pressed, #F4F5F7)",
+  'elevation.surface.overlay': "var(--ds-surface-overlay, #FFFFFF)",
+  'elevation.surface.overlay.hovered': "var(--ds-surface-overlay-hovered, #FAFBFC)",
+  'elevation.surface.overlay.pressed': "var(--ds-surface-overlay-pressed, #F4F5F7)",
+  'elevation.surface.raised': "var(--ds-surface-raised, #FFFFFF)",
+  'elevation.surface.raised.hovered': "var(--ds-surface-raised-hovered, #FAFBFC)",
+  'elevation.surface.raised.pressed': "var(--ds-surface-raised-pressed, #F4F5F7)",
+  'elevation.surface.sunken': "var(--ds-surface-sunken, #F4F5F7)"
+};
 /**
  * @codegenEnd
  */
@@ -393,6 +408,69 @@ export var borderRadiusMap = {
   'border.radius.400': "var(--ds-border-radius-400, 16px)",
   'border.radius.circle': "var(--ds-border-radius-circle, 32032px)"
 };
+/**
+ * @codegenEnd
+ */
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::752c1b8bdc7db62e519dd729222d57ad>>
+ * @codegenId typography
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
+ * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "heading", "ui"]
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::0cd422575c3f2a3784eeef767abe71f4>>
+ * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
+ */
+export var fontSizeMap = {
+  'font.size.050': "var(--ds-font-size-050, 11px)",
+  'font.size.075': "var(--ds-font-size-075, 12px)",
+  'font.size.100': "var(--ds-font-size-100, 14px)",
+  'font.size.200': "var(--ds-font-size-200, 16px)",
+  'font.size.300': "var(--ds-font-size-300, 20px)",
+  'font.size.400': "var(--ds-font-size-400, 24px)",
+  'font.size.500': "var(--ds-font-size-500, 29px)",
+  'font.size.600': "var(--ds-font-size-600, 35px)"
+};
+export var fontWeightMap = {
+  'font.weight.bold': "var(--ds-font-weight-bold, 700)",
+  'font.weight.medium': "var(--ds-font-weight-medium, 500)",
+  'font.weight.regular': "var(--ds-font-weight-regular, 400)",
+  'font.weight.semibold': "var(--ds-font-weight-semibold, 600)"
+};
+export var fontFamilyMap = {
+  'font.family.body': "var(--ds-font-family-body, ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif)",
+  'font.family.brand': "var(--ds-font-family-brand, Charlie Sans)",
+  'font.family.code': "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+  'font.family.heading': "var(--ds-font-family-heading, ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif)",
+  'font.family.monospace': "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+  'font.family.sans': "var(--ds-font-family-sans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif)"
+};
+export var lineHeightMap = {
+  'font.lineHeight.1': "var(--ds-font-lineHeight-1, 1)",
+  'font.lineHeight.100': "var(--ds-font-lineHeight-100, 16px)",
+  'font.lineHeight.200': "var(--ds-font-lineHeight-200, 20px)",
+  'font.lineHeight.300': "var(--ds-font-lineHeight-300, 24px)",
+  'font.lineHeight.400': "var(--ds-font-lineHeight-400, 28px)",
+  'font.lineHeight.500': "var(--ds-font-lineHeight-500, 32px)",
+  'font.lineHeight.600': "var(--ds-font-lineHeight-600, 40px)"
+};
+export var bodyTextMap = {
+  body: "var(--ds-font-body, normal 400 14px/20px var(--ds-font-family-body))",
+  'body.lg': "var(--ds-font-body-lg, normal 400 16px/24px var(--ds-font-family-body))",
+  'body.sm': "var(--ds-font-body-sm, normal 400 11px/20px var(--ds-font-family-body))"
+};
+export var headingTextMap = {
+  'heading.lg': "var(--ds-font-heading-lg, normal 500 24px/28px var(--ds-font-family-heading))",
+  'heading.md': "var(--ds-font-heading-md, normal 500 20px/24px var(--ds-font-family-heading))",
+  'heading.sm': "var(--ds-font-heading-sm, normal 600 16px/20px var(--ds-font-family-heading))",
+  'heading.xl': "var(--ds-font-heading-xl, normal 600 29px/32px var(--ds-font-family-heading))",
+  'heading.xs': "var(--ds-font-heading-xs, normal 600 14px/16px var(--ds-font-family-heading))",
+  'heading.xxl': "var(--ds-font-heading-xxl, normal 500 35px/40px var(--ds-font-family-heading))",
+  'heading.xxs': "var(--ds-font-heading-xxs, normal 600 12px/16px var(--ds-font-family-heading))"
+};
+export var uiTextMap = {
+  ui: "var(--ds-font-ui, normal 400 14px/1 var(--ds-font-family-body))",
+  'ui.sm': "var(--ds-font-ui-sm, normal 400 11px/1 var(--ds-font-family-body))"
+};
 
 /**
  * @codegenEnd
@@ -418,4 +496,16 @@ export var spaceStylesMap = spacingProperties.reduce(function (styleMap, spacing
   styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, spaceMap);
   return styleMap;
 }, {});
-export var backgroundColorStylesMap = getSerializedStylesMap('backgroundColor', backgroundColorMap);
+export var backgroundColorStylesMap = getSerializedStylesMap('backgroundColor', backgroundColorMap);
+export var textColorStylesMap = getSerializedStylesMap('color', textColorMap);
+export var fontSizeStylesMap = getSerializedStylesMap('fontSize', fontSizeMap);
+export var fontWeightStylesMap = getSerializedStylesMap('fontWeight', fontWeightMap);
+export var fontFamilyStylesMap = getSerializedStylesMap('fontFamily', fontFamilyMap);
+export var lineHeightStylesMap = getSerializedStylesMap('lineHeight', lineHeightMap);
+export var headingTextStylesMap = getSerializedStylesMap('font', headingTextMap);
+export var bodyTextStylesMap = getSerializedStylesMap('font', bodyTextMap);
+export var uiTextStylesMap = getSerializedStylesMap('font', uiTextMap);
+export var surfaceColorStylesMap = getSerializedStylesMap(CURRENT_SURFACE_CSS_VAR, surfaceColorMap);
+export var isSurfaceColorToken = function isSurfaceColorToken(color) {
+  return surfaceColorMap[color] !== undefined;
+};

package/dist/types/components/heading-context.d.ts

@@ -0,0 +1,31 @@
+import { FC, ReactNode } from 'react';
+type HeadingElement = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+export declare const useHeadingElement: () => HeadingElement;
+export interface HeadingContextProps {
+    /**
+     * Optional - only apply this value if the intent is to reset the heading context outside the normal content flow, for example inside a `section`.
+     */
+    value?: HeadingElement;
+    /**
+     * Semantic heirarchy of content below the heading context.
+     */
+    children: ReactNode;
+}
+/**
+ * __Heading context__
+ *
+ * The HeadingContext
+ *
+ * @example
+ * ```tsx
+ * // Will correctly infer the heading level
+ * <HeadingContext value={1}>
+ *  <Heading>H1</Heading>
+ *  <HeadingContext>
+ *    <Heading>H2</Heading>
+ *  </HeadingContext>
+ * </HeadingContext>
+ * ```
+ */
+declare const HeadingContextProvider: FC<HeadingContextProps>;
+export default HeadingContextProvider;

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

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { BasePrimitiveProps } from './types';
+export type TypographyLevel = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'xxs';
+type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div';
+export type HeadingProps = {
+    /**
+     * The heading text for the element.
+     */
+    children: React.ReactNode;
+    /**
+     * The HTML element to render.
+     */
+    as?: HeadingElement;
+    /**
+     * The HTML id attribute.
+     */
+    id?: string;
+    /**
+     * The level of the heading element.
+     */
+    level: TypographyLevel;
+    /**
+     * The color of the heading text.
+     */
+    color?: 'default' | 'inverse';
+} & Pick<BasePrimitiveProps, 'testId'>;
+/**
+ * __Heading__
+ *
+ * A heading is a typography component used to display text in different sizes and formats.
+ *
+ * @example
+ *
+ * ```jsx
+ * import Heading from '@atlaskit/heading';
+ *
+ * const HeadingXXL = () => (
+ *   <Heading level="xxl">XXL</Heading>
+ * );
+ * ```
+ */
+declare const Heading: ({ children, level, id, testId, as, color, }: HeadingProps) => jsx.JSX.Element;
+export default Heading;

package/dist/types/components/internal/surface-provider.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+/**
+ * __Surface context__
+ *
+ * A surface context provides context information on the current background (if set).
+ */
+export declare const SurfaceContext: import("react").Context<"color.background.accent.lime.subtlest" | "color.background.accent.lime.subtlest.hovered" | "color.background.accent.lime.subtlest.pressed" | "color.background.accent.lime.subtler" | "color.background.accent.lime.subtler.hovered" | "color.background.accent.lime.subtler.pressed" | "color.background.accent.lime.subtle" | "color.background.accent.lime.subtle.hovered" | "color.background.accent.lime.subtle.pressed" | "color.background.accent.lime.bolder" | "color.background.accent.lime.bolder.hovered" | "color.background.accent.lime.bolder.pressed" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtlest.hovered" | "color.background.accent.red.subtlest.pressed" | "color.background.accent.red.subtler" | "color.background.accent.red.subtler.hovered" | "color.background.accent.red.subtler.pressed" | "color.background.accent.red.subtle" | "color.background.accent.red.subtle.hovered" | "color.background.accent.red.subtle.pressed" | "color.background.accent.red.bolder" | "color.background.accent.red.bolder.hovered" | "color.background.accent.red.bolder.pressed" | "color.background.accent.orange.subtlest" | "color.background.accent.orange.subtlest.hovered" | "color.background.accent.orange.subtlest.pressed" | "color.background.accent.orange.subtler" | "color.background.accent.orange.subtler.hovered" | "color.background.accent.orange.subtler.pressed" | "color.background.accent.orange.subtle" | "color.background.accent.orange.subtle.hovered" | "color.background.accent.orange.subtle.pressed" | "color.background.accent.orange.bolder" | "color.background.accent.orange.bolder.hovered" | "color.background.accent.orange.bolder.pressed" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtlest.hovered" | "color.background.accent.yellow.subtlest.pressed" | "color.background.accent.yellow.subtler" | "color.background.accent.yellow.subtler.hovered" | "color.background.accent.yellow.subtler.pressed" | "color.background.accent.yellow.subtle" | "color.background.accent.yellow.subtle.hovered" | "color.background.accent.yellow.subtle.pressed" | "color.background.accent.yellow.bolder" | "color.background.accent.yellow.bolder.hovered" | "color.background.accent.yellow.bolder.pressed" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtlest.hovered" | "color.background.accent.green.subtlest.pressed" | "color.background.accent.green.subtler" | "color.background.accent.green.subtler.hovered" | "color.background.accent.green.subtler.pressed" | "color.background.accent.green.subtle" | "color.background.accent.green.subtle.hovered" | "color.background.accent.green.subtle.pressed" | "color.background.accent.green.bolder" | "color.background.accent.green.bolder.hovered" | "color.background.accent.green.bolder.pressed" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtlest.hovered" | "color.background.accent.teal.subtlest.pressed" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtler.hovered" | "color.background.accent.teal.subtler.pressed" | "color.background.accent.teal.subtle" | "color.background.accent.teal.subtle.hovered" | "color.background.accent.teal.subtle.pressed" | "color.background.accent.teal.bolder" | "color.background.accent.teal.bolder.hovered" | "color.background.accent.teal.bolder.pressed" | "color.background.accent.blue.subtlest" | "color.background.accent.blue.subtlest.hovered" | "color.background.accent.blue.subtlest.pressed" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtler.hovered" | "color.background.accent.blue.subtler.pressed" | "color.background.accent.blue.subtle" | "color.background.accent.blue.subtle.hovered" | "color.background.accent.blue.subtle.pressed" | "color.background.accent.blue.bolder" | "color.background.accent.blue.bolder.hovered" | "color.background.accent.blue.bolder.pressed" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtlest.hovered" | "color.background.accent.purple.subtlest.pressed" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtler.hovered" | "color.background.accent.purple.subtler.pressed" | "color.background.accent.purple.subtle" | "color.background.accent.purple.subtle.hovered" | "color.background.accent.purple.subtle.pressed" | "color.background.accent.purple.bolder" | "color.background.accent.purple.bolder.hovered" | "color.background.accent.purple.bolder.pressed" | "color.background.accent.magenta.subtlest" | "color.background.accent.magenta.subtlest.hovered" | "color.background.accent.magenta.subtlest.pressed" | "color.background.accent.magenta.subtler" | "color.background.accent.magenta.subtler.hovered" | "color.background.accent.magenta.subtler.pressed" | "color.background.accent.magenta.subtle" | "color.background.accent.magenta.subtle.hovered" | "color.background.accent.magenta.subtle.pressed" | "color.background.accent.magenta.bolder" | "color.background.accent.magenta.bolder.hovered" | "color.background.accent.magenta.bolder.pressed" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtlest.hovered" | "color.background.accent.gray.subtlest.pressed" | "color.background.accent.gray.subtler" | "color.background.accent.gray.subtler.hovered" | "color.background.accent.gray.subtler.pressed" | "color.background.accent.gray.subtle" | "color.background.accent.gray.subtle.hovered" | "color.background.accent.gray.subtle.pressed" | "color.background.accent.gray.bolder" | "color.background.accent.gray.bolder.hovered" | "color.background.accent.gray.bolder.pressed" | "color.background.disabled" | "color.background.input" | "color.background.input.hovered" | "color.background.input.pressed" | "color.background.inverse.subtle" | "color.background.inverse.subtle.hovered" | "color.background.inverse.subtle.pressed" | "color.background.neutral" | "color.background.neutral.hovered" | "color.background.neutral.pressed" | "color.background.neutral.subtle" | "color.background.neutral.subtle.hovered" | "color.background.neutral.subtle.pressed" | "color.background.neutral.bold" | "color.background.neutral.bold.hovered" | "color.background.neutral.bold.pressed" | "color.background.selected" | "color.background.selected.hovered" | "color.background.selected.pressed" | "color.background.selected.bold" | "color.background.selected.bold.hovered" | "color.background.selected.bold.pressed" | "color.background.brand.subtlest" | "color.background.brand.subtlest.hovered" | "color.background.brand.subtlest.pressed" | "color.background.brand.bold" | "color.background.brand.bold.hovered" | "color.background.brand.bold.pressed" | "color.background.brand.boldest" | "color.background.brand.boldest.hovered" | "color.background.brand.boldest.pressed" | "color.background.danger" | "color.background.danger.hovered" | "color.background.danger.pressed" | "color.background.danger.bold" | "color.background.danger.bold.hovered" | "color.background.danger.bold.pressed" | "color.background.warning" | "color.background.warning.hovered" | "color.background.warning.pressed" | "color.background.warning.bold" | "color.background.warning.bold.hovered" | "color.background.warning.bold.pressed" | "color.background.success" | "color.background.success.hovered" | "color.background.success.pressed" | "color.background.success.bold" | "color.background.success.bold.hovered" | "color.background.success.bold.pressed" | "color.background.discovery" | "color.background.discovery.hovered" | "color.background.discovery.pressed" | "color.background.discovery.bold" | "color.background.discovery.bold.hovered" | "color.background.discovery.bold.pressed" | "color.background.information" | "color.background.information.hovered" | "color.background.information.pressed" | "color.background.information.bold" | "color.background.information.bold.hovered" | "color.background.information.bold.pressed" | "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken" | "utility.elevation.surface.current">;
+/**
+ * __useSurface__
+ *
+ * Return the current surface. If no parent sets a surface color it falls back to the default surface.
+ *
+ * @see SurfaceContext
+ */
+export declare const useSurface: () => "color.background.accent.lime.subtlest" | "color.background.accent.lime.subtlest.hovered" | "color.background.accent.lime.subtlest.pressed" | "color.background.accent.lime.subtler" | "color.background.accent.lime.subtler.hovered" | "color.background.accent.lime.subtler.pressed" | "color.background.accent.lime.subtle" | "color.background.accent.lime.subtle.hovered" | "color.background.accent.lime.subtle.pressed" | "color.background.accent.lime.bolder" | "color.background.accent.lime.bolder.hovered" | "color.background.accent.lime.bolder.pressed" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtlest.hovered" | "color.background.accent.red.subtlest.pressed" | "color.background.accent.red.subtler" | "color.background.accent.red.subtler.hovered" | "color.background.accent.red.subtler.pressed" | "color.background.accent.red.subtle" | "color.background.accent.red.subtle.hovered" | "color.background.accent.red.subtle.pressed" | "color.background.accent.red.bolder" | "color.background.accent.red.bolder.hovered" | "color.background.accent.red.bolder.pressed" | "color.background.accent.orange.subtlest" | "color.background.accent.orange.subtlest.hovered" | "color.background.accent.orange.subtlest.pressed" | "color.background.accent.orange.subtler" | "color.background.accent.orange.subtler.hovered" | "color.background.accent.orange.subtler.pressed" | "color.background.accent.orange.subtle" | "color.background.accent.orange.subtle.hovered" | "color.background.accent.orange.subtle.pressed" | "color.background.accent.orange.bolder" | "color.background.accent.orange.bolder.hovered" | "color.background.accent.orange.bolder.pressed" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtlest.hovered" | "color.background.accent.yellow.subtlest.pressed" | "color.background.accent.yellow.subtler" | "color.background.accent.yellow.subtler.hovered" | "color.background.accent.yellow.subtler.pressed" | "color.background.accent.yellow.subtle" | "color.background.accent.yellow.subtle.hovered" | "color.background.accent.yellow.subtle.pressed" | "color.background.accent.yellow.bolder" | "color.background.accent.yellow.bolder.hovered" | "color.background.accent.yellow.bolder.pressed" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtlest.hovered" | "color.background.accent.green.subtlest.pressed" | "color.background.accent.green.subtler" | "color.background.accent.green.subtler.hovered" | "color.background.accent.green.subtler.pressed" | "color.background.accent.green.subtle" | "color.background.accent.green.subtle.hovered" | "color.background.accent.green.subtle.pressed" | "color.background.accent.green.bolder" | "color.background.accent.green.bolder.hovered" | "color.background.accent.green.bolder.pressed" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtlest.hovered" | "color.background.accent.teal.subtlest.pressed" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtler.hovered" | "color.background.accent.teal.subtler.pressed" | "color.background.accent.teal.subtle" | "color.background.accent.teal.subtle.hovered" | "color.background.accent.teal.subtle.pressed" | "color.background.accent.teal.bolder" | "color.background.accent.teal.bolder.hovered" | "color.background.accent.teal.bolder.pressed" | "color.background.accent.blue.subtlest" | "color.background.accent.blue.subtlest.hovered" | "color.background.accent.blue.subtlest.pressed" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtler.hovered" | "color.background.accent.blue.subtler.pressed" | "color.background.accent.blue.subtle" | "color.background.accent.blue.subtle.hovered" | "color.background.accent.blue.subtle.pressed" | "color.background.accent.blue.bolder" | "color.background.accent.blue.bolder.hovered" | "color.background.accent.blue.bolder.pressed" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtlest.hovered" | "color.background.accent.purple.subtlest.pressed" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtler.hovered" | "color.background.accent.purple.subtler.pressed" | "color.background.accent.purple.subtle" | "color.background.accent.purple.subtle.hovered" | "color.background.accent.purple.subtle.pressed" | "color.background.accent.purple.bolder" | "color.background.accent.purple.bolder.hovered" | "color.background.accent.purple.bolder.pressed" | "color.background.accent.magenta.subtlest" | "color.background.accent.magenta.subtlest.hovered" | "color.background.accent.magenta.subtlest.pressed" | "color.background.accent.magenta.subtler" | "color.background.accent.magenta.subtler.hovered" | "color.background.accent.magenta.subtler.pressed" | "color.background.accent.magenta.subtle" | "color.background.accent.magenta.subtle.hovered" | "color.background.accent.magenta.subtle.pressed" | "color.background.accent.magenta.bolder" | "color.background.accent.magenta.bolder.hovered" | "color.background.accent.magenta.bolder.pressed" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtlest.hovered" | "color.background.accent.gray.subtlest.pressed" | "color.background.accent.gray.subtler" | "color.background.accent.gray.subtler.hovered" | "color.background.accent.gray.subtler.pressed" | "color.background.accent.gray.subtle" | "color.background.accent.gray.subtle.hovered" | "color.background.accent.gray.subtle.pressed" | "color.background.accent.gray.bolder" | "color.background.accent.gray.bolder.hovered" | "color.background.accent.gray.bolder.pressed" | "color.background.disabled" | "color.background.input" | "color.background.input.hovered" | "color.background.input.pressed" | "color.background.inverse.subtle" | "color.background.inverse.subtle.hovered" | "color.background.inverse.subtle.pressed" | "color.background.neutral" | "color.background.neutral.hovered" | "color.background.neutral.pressed" | "color.background.neutral.subtle" | "color.background.neutral.subtle.hovered" | "color.background.neutral.subtle.pressed" | "color.background.neutral.bold" | "color.background.neutral.bold.hovered" | "color.background.neutral.bold.pressed" | "color.background.selected" | "color.background.selected.hovered" | "color.background.selected.pressed" | "color.background.selected.bold" | "color.background.selected.bold.hovered" | "color.background.selected.bold.pressed" | "color.background.brand.subtlest" | "color.background.brand.subtlest.hovered" | "color.background.brand.subtlest.pressed" | "color.background.brand.bold" | "color.background.brand.bold.hovered" | "color.background.brand.bold.pressed" | "color.background.brand.boldest" | "color.background.brand.boldest.hovered" | "color.background.brand.boldest.pressed" | "color.background.danger" | "color.background.danger.hovered" | "color.background.danger.pressed" | "color.background.danger.bold" | "color.background.danger.bold.hovered" | "color.background.danger.bold.pressed" | "color.background.warning" | "color.background.warning.hovered" | "color.background.warning.pressed" | "color.background.warning.bold" | "color.background.warning.bold.hovered" | "color.background.warning.bold.pressed" | "color.background.success" | "color.background.success.hovered" | "color.background.success.pressed" | "color.background.success.bold" | "color.background.success.bold.hovered" | "color.background.success.bold.pressed" | "color.background.discovery" | "color.background.discovery.hovered" | "color.background.discovery.pressed" | "color.background.discovery.bold" | "color.background.discovery.bold.hovered" | "color.background.discovery.bold.pressed" | "color.background.information" | "color.background.information.hovered" | "color.background.information.pressed" | "color.background.information.bold" | "color.background.information.bold.hovered" | "color.background.information.bold.pressed" | "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken" | "utility.elevation.surface.current";

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

@@ -0,0 +1,57 @@
+/** @jsx jsx */
+import { FC, ReactNode } from 'react';
+import { BodyText, TextColor, UiText } from '../xcss/style-maps.partial';
+import type { BasePrimitiveProps } from './types';
+declare const asAllowlist: readonly ["span", "p", "strong", "em", "label"];
+type AsElement = (typeof asAllowlist)[number];
+type Variant = BodyText | UiText;
+export interface TextProps extends BasePrimitiveProps {
+    /**
+     * HTML tag to be rendered. Defaults to `span`.
+     */
+    as?: AsElement;
+    /**
+     * Elements rendered within the Text element
+     */
+    children: ReactNode;
+    /**
+     * Text variant
+     */
+    variant: Variant;
+    /**
+     * Text color
+     * Pending colour exploration
+     */
+    color?: TextColor;
+    /**
+     * The HTML id attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+     */
+    id?: string;
+    /**
+     * Truncates text with an ellipsis when text overflows its parent container
+     * (i.e. `width` has been set on parent that is shorter than text length).
+     * Pending truncation exploration -- remove for now?
+     */
+    shouldTruncate?: boolean;
+    /**
+     * Text align https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
+     */
+    textAlign?: TextAlign;
+}
+type TextAlign = keyof typeof textAlignMap;
+declare const textAlignMap: {
+    center: import("@emotion/react").SerializedStyles;
+    end: import("@emotion/react").SerializedStyles;
+    start: import("@emotion/react").SerializedStyles;
+};
+/**
+ * __Text__
+ *
+ * Text is a primitive component that has the Atlassian Design System's design guidelines baked in.
+ * This includes considerations for text attributes such as color, font size, font weight, and line height.
+ * It renders a `span` by default.
+ *
+ * @internal
+ */
+declare const Text: FC<TextProps>;
+export default Text;

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

@@ -50,10 +50,10 @@ export type Space = keyof typeof spaceMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::3f4d926ce14cda107d25c697f3a0c200>>
+ * @codegen <<SignedSource::3db44f53b728773bb3ba1473d4567724>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
- * @codegenParams ["border", "background", "shadow", "text", "fill"]
+ * @codegenParams ["border", "background", "shadow", "text", "fill", "surface"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
  */
 export declare const borderColorMap: {
@@ -277,6 +277,7 @@ export declare const backgroundColorMap: {
     readonly 'elevation.surface.raised.hovered': "var(--ds-surface-raised-hovered)";
     readonly 'elevation.surface.raised.pressed': "var(--ds-surface-raised-pressed)";
     readonly 'elevation.surface.sunken': "var(--ds-surface-sunken)";
+    readonly 'utility.elevation.surface.current': "var(--ds-elevation-surface-current)";
 };
 export type BackgroundColor = keyof typeof backgroundColorMap;
 export declare const shadowMap: {
@@ -350,6 +351,19 @@ export declare const fillMap: {
     readonly 'color.icon.subtle': "var(--ds-icon-subtle)";
 };
 export type Fill = keyof typeof fillMap;
+export declare const surfaceColorMap: {
+    readonly 'elevation.surface': "var(--ds-surface)";
+    readonly 'elevation.surface.hovered': "var(--ds-surface-hovered)";
+    readonly 'elevation.surface.pressed': "var(--ds-surface-pressed)";
+    readonly 'elevation.surface.overlay': "var(--ds-surface-overlay)";
+    readonly 'elevation.surface.overlay.hovered': "var(--ds-surface-overlay-hovered)";
+    readonly 'elevation.surface.overlay.pressed': "var(--ds-surface-overlay-pressed)";
+    readonly 'elevation.surface.raised': "var(--ds-surface-raised)";
+    readonly 'elevation.surface.raised.hovered': "var(--ds-surface-raised-hovered)";
+    readonly 'elevation.surface.raised.pressed': "var(--ds-surface-raised-pressed)";
+    readonly 'elevation.surface.sunken': "var(--ds-surface-sunken)";
+};
+export type SurfaceColor = keyof typeof surfaceColorMap;
 /**
  * @codegenEnd
  */
@@ -402,6 +416,76 @@ export declare const borderRadiusMap: {
     readonly 'border.radius.circle': "var(--ds-border-radius-circle)";
 };
 export type BorderRadius = keyof typeof borderRadiusMap;
+/**
+ * @codegenEnd
+ */
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::752c1b8bdc7db62e519dd729222d57ad>>
+ * @codegenId typography
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
+ * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "heading", "ui"]
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::0cd422575c3f2a3784eeef767abe71f4>>
+ * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
+ */
+export declare const fontSizeMap: {
+    'font.size.050': "var(--ds-font-size-050)";
+    'font.size.075': "var(--ds-font-size-075)";
+    'font.size.100': "var(--ds-font-size-100)";
+    'font.size.200': "var(--ds-font-size-200)";
+    'font.size.300': "var(--ds-font-size-300)";
+    'font.size.400': "var(--ds-font-size-400)";
+    'font.size.500': "var(--ds-font-size-500)";
+    'font.size.600': "var(--ds-font-size-600)";
+};
+export type FontSize = keyof typeof fontSizeMap;
+export declare const fontWeightMap: {
+    'font.weight.bold': "var(--ds-font-weight-bold)";
+    'font.weight.medium': "var(--ds-font-weight-medium)";
+    'font.weight.regular': "var(--ds-font-weight-regular)";
+    'font.weight.semibold': "var(--ds-font-weight-semibold)";
+};
+export type FontWeight = keyof typeof fontWeightMap;
+export declare const fontFamilyMap: {
+    'font.family.body': "var(--ds-font-family-body)";
+    'font.family.brand': "var(--ds-font-family-brand)";
+    'font.family.code': "var(--ds-font-family-code)";
+    'font.family.heading': "var(--ds-font-family-heading)";
+    'font.family.monospace': "var(--ds-font-family-monospace)";
+    'font.family.sans': "var(--ds-font-family-sans)";
+};
+export type FontFamily = keyof typeof fontFamilyMap;
+export declare const lineHeightMap: {
+    'font.lineHeight.1': "var(--ds-font-lineHeight-1)";
+    'font.lineHeight.100': "var(--ds-font-lineHeight-100)";
+    'font.lineHeight.200': "var(--ds-font-lineHeight-200)";
+    'font.lineHeight.300': "var(--ds-font-lineHeight-300)";
+    'font.lineHeight.400': "var(--ds-font-lineHeight-400)";
+    'font.lineHeight.500': "var(--ds-font-lineHeight-500)";
+    'font.lineHeight.600': "var(--ds-font-lineHeight-600)";
+};
+export type LineHeight = keyof typeof lineHeightMap;
+export declare const bodyTextMap: {
+    body: "var(--ds-font-body)";
+    'body.lg': "var(--ds-font-body-lg)";
+    'body.sm': "var(--ds-font-body-sm)";
+};
+export type BodyText = keyof typeof bodyTextMap;
+export declare const headingTextMap: {
+    'heading.lg': "var(--ds-font-heading-lg)";
+    'heading.md': "var(--ds-font-heading-md)";
+    'heading.sm': "var(--ds-font-heading-sm)";
+    'heading.xl': "var(--ds-font-heading-xl)";
+    'heading.xs': "var(--ds-font-heading-xs)";
+    'heading.xxl': "var(--ds-font-heading-xxl)";
+    'heading.xxs': "var(--ds-font-heading-xxs)";
+};
+export type HeadingText = keyof typeof headingTextMap;
+export declare const uiTextMap: {
+    ui: "var(--ds-font-ui)";
+    'ui.sm': "var(--ds-font-ui-sm)";
+};
+export type UiText = keyof typeof uiTextMap;
 /**
  * @codegenEnd
  */
@@ -471,9 +555,37 @@ declare const spacingProperties: readonly ["padding", "paddingBlock", "paddingBl
 type SpacingProperty = (typeof spacingProperties)[number];
 type SpacingToken = keyof typeof spaceMap;
 type BackgroundColorToken = keyof typeof backgroundColorMap;
+type SurfaceColorToken = keyof typeof surfaceColorMap;
+type TextColorToken = keyof typeof textColorMap;
+type FontSizeToken = keyof typeof fontSizeMap;
+type FontWeightToken = keyof typeof fontWeightMap;
+type FontFamilyToken = keyof typeof fontFamilyMap;
+type LineHeightToken = keyof typeof lineHeightMap;
+type HeadingTextToken = keyof typeof headingTextMap;
+type BodyTextToken = keyof typeof bodyTextMap;
+type UITextToken = keyof typeof uiTextMap;
 type SpacingStyleMap = Record<SpacingProperty, Record<SpacingToken, SerializedStyles>>;
 type BackgroundColorStyleMap = Record<BackgroundColorToken, SerializedStyles>;
+type SurfaceColorStyleMap = Record<SurfaceColorToken, SerializedStyles>;
+type TextColorStyleMap = Record<TextColorToken, SerializedStyles>;
+type FontSizeStyleMap = Record<FontSizeToken, SerializedStyles>;
+type FontWeightStyleMap = Record<FontWeightToken, SerializedStyles>;
+type FontFamilyStyleMap = Record<FontFamilyToken, SerializedStyles>;
+type LineHeightStyleMap = Record<LineHeightToken, SerializedStyles>;
+type HeadingTextStyleMap = Record<HeadingTextToken, SerializedStyles>;
+type BodyTextStyleMap = Record<BodyTextToken, SerializedStyles>;
+type UITextStyleMap = Record<UITextToken, SerializedStyles>;
 export declare const paddingStylesMap: SpacingStyleMap;
 export declare const spaceStylesMap: SpacingStyleMap;
 export declare const backgroundColorStylesMap: BackgroundColorStyleMap;
+export declare const textColorStylesMap: TextColorStyleMap;
+export declare const fontSizeStylesMap: FontSizeStyleMap;
+export declare const fontWeightStylesMap: FontWeightStyleMap;
+export declare const fontFamilyStylesMap: FontFamilyStyleMap;
+export declare const lineHeightStylesMap: LineHeightStyleMap;
+export declare const headingTextStylesMap: HeadingTextStyleMap;
+export declare const bodyTextStylesMap: BodyTextStyleMap;
+export declare const uiTextStylesMap: UITextStyleMap;
+export declare const surfaceColorStylesMap: SurfaceColorStyleMap;
+export declare const isSurfaceColorToken: (color: unknown) => color is "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken";
 export {};

package/dist/types-ts4.5/components/heading-context.d.ts

@@ -0,0 +1,31 @@
+import { FC, ReactNode } from 'react';
+type HeadingElement = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+export declare const useHeadingElement: () => HeadingElement;
+export interface HeadingContextProps {
+    /**
+     * Optional - only apply this value if the intent is to reset the heading context outside the normal content flow, for example inside a `section`.
+     */
+    value?: HeadingElement;
+    /**
+     * Semantic heirarchy of content below the heading context.
+     */
+    children: ReactNode;
+}
+/**
+ * __Heading context__
+ *
+ * The HeadingContext
+ *
+ * @example
+ * ```tsx
+ * // Will correctly infer the heading level
+ * <HeadingContext value={1}>
+ *  <Heading>H1</Heading>
+ *  <HeadingContext>
+ *    <Heading>H2</Heading>
+ *  </HeadingContext>
+ * </HeadingContext>
+ * ```
+ */
+declare const HeadingContextProvider: FC<HeadingContextProps>;
+export default HeadingContextProvider;

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

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { BasePrimitiveProps } from './types';
+export type TypographyLevel = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'xxs';
+type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div';
+export type HeadingProps = {
+    /**
+     * The heading text for the element.
+     */
+    children: React.ReactNode;
+    /**
+     * The HTML element to render.
+     */
+    as?: HeadingElement;
+    /**
+     * The HTML id attribute.
+     */
+    id?: string;
+    /**
+     * The level of the heading element.
+     */
+    level: TypographyLevel;
+    /**
+     * The color of the heading text.
+     */
+    color?: 'default' | 'inverse';
+} & Pick<BasePrimitiveProps, 'testId'>;
+/**
+ * __Heading__
+ *
+ * A heading is a typography component used to display text in different sizes and formats.
+ *
+ * @example
+ *
+ * ```jsx
+ * import Heading from '@atlaskit/heading';
+ *
+ * const HeadingXXL = () => (
+ *   <Heading level="xxl">XXL</Heading>
+ * );
+ * ```
+ */
+declare const Heading: ({ children, level, id, testId, as, color, }: HeadingProps) => jsx.JSX.Element;
+export default Heading;

package/dist/types-ts4.5/components/internal/surface-provider.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+/**
+ * __Surface context__
+ *
+ * A surface context provides context information on the current background (if set).
+ */
+export declare const SurfaceContext: import("react").Context<"color.background.accent.lime.subtlest" | "color.background.accent.lime.subtlest.hovered" | "color.background.accent.lime.subtlest.pressed" | "color.background.accent.lime.subtler" | "color.background.accent.lime.subtler.hovered" | "color.background.accent.lime.subtler.pressed" | "color.background.accent.lime.subtle" | "color.background.accent.lime.subtle.hovered" | "color.background.accent.lime.subtle.pressed" | "color.background.accent.lime.bolder" | "color.background.accent.lime.bolder.hovered" | "color.background.accent.lime.bolder.pressed" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtlest.hovered" | "color.background.accent.red.subtlest.pressed" | "color.background.accent.red.subtler" | "color.background.accent.red.subtler.hovered" | "color.background.accent.red.subtler.pressed" | "color.background.accent.red.subtle" | "color.background.accent.red.subtle.hovered" | "color.background.accent.red.subtle.pressed" | "color.background.accent.red.bolder" | "color.background.accent.red.bolder.hovered" | "color.background.accent.red.bolder.pressed" | "color.background.accent.orange.subtlest" | "color.background.accent.orange.subtlest.hovered" | "color.background.accent.orange.subtlest.pressed" | "color.background.accent.orange.subtler" | "color.background.accent.orange.subtler.hovered" | "color.background.accent.orange.subtler.pressed" | "color.background.accent.orange.subtle" | "color.background.accent.orange.subtle.hovered" | "color.background.accent.orange.subtle.pressed" | "color.background.accent.orange.bolder" | "color.background.accent.orange.bolder.hovered" | "color.background.accent.orange.bolder.pressed" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtlest.hovered" | "color.background.accent.yellow.subtlest.pressed" | "color.background.accent.yellow.subtler" | "color.background.accent.yellow.subtler.hovered" | "color.background.accent.yellow.subtler.pressed" | "color.background.accent.yellow.subtle" | "color.background.accent.yellow.subtle.hovered" | "color.background.accent.yellow.subtle.pressed" | "color.background.accent.yellow.bolder" | "color.background.accent.yellow.bolder.hovered" | "color.background.accent.yellow.bolder.pressed" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtlest.hovered" | "color.background.accent.green.subtlest.pressed" | "color.background.accent.green.subtler" | "color.background.accent.green.subtler.hovered" | "color.background.accent.green.subtler.pressed" | "color.background.accent.green.subtle" | "color.background.accent.green.subtle.hovered" | "color.background.accent.green.subtle.pressed" | "color.background.accent.green.bolder" | "color.background.accent.green.bolder.hovered" | "color.background.accent.green.bolder.pressed" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtlest.hovered" | "color.background.accent.teal.subtlest.pressed" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtler.hovered" | "color.background.accent.teal.subtler.pressed" | "color.background.accent.teal.subtle" | "color.background.accent.teal.subtle.hovered" | "color.background.accent.teal.subtle.pressed" | "color.background.accent.teal.bolder" | "color.background.accent.teal.bolder.hovered" | "color.background.accent.teal.bolder.pressed" | "color.background.accent.blue.subtlest" | "color.background.accent.blue.subtlest.hovered" | "color.background.accent.blue.subtlest.pressed" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtler.hovered" | "color.background.accent.blue.subtler.pressed" | "color.background.accent.blue.subtle" | "color.background.accent.blue.subtle.hovered" | "color.background.accent.blue.subtle.pressed" | "color.background.accent.blue.bolder" | "color.background.accent.blue.bolder.hovered" | "color.background.accent.blue.bolder.pressed" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtlest.hovered" | "color.background.accent.purple.subtlest.pressed" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtler.hovered" | "color.background.accent.purple.subtler.pressed" | "color.background.accent.purple.subtle" | "color.background.accent.purple.subtle.hovered" | "color.background.accent.purple.subtle.pressed" | "color.background.accent.purple.bolder" | "color.background.accent.purple.bolder.hovered" | "color.background.accent.purple.bolder.pressed" | "color.background.accent.magenta.subtlest" | "color.background.accent.magenta.subtlest.hovered" | "color.background.accent.magenta.subtlest.pressed" | "color.background.accent.magenta.subtler" | "color.background.accent.magenta.subtler.hovered" | "color.background.accent.magenta.subtler.pressed" | "color.background.accent.magenta.subtle" | "color.background.accent.magenta.subtle.hovered" | "color.background.accent.magenta.subtle.pressed" | "color.background.accent.magenta.bolder" | "color.background.accent.magenta.bolder.hovered" | "color.background.accent.magenta.bolder.pressed" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtlest.hovered" | "color.background.accent.gray.subtlest.pressed" | "color.background.accent.gray.subtler" | "color.background.accent.gray.subtler.hovered" | "color.background.accent.gray.subtler.pressed" | "color.background.accent.gray.subtle" | "color.background.accent.gray.subtle.hovered" | "color.background.accent.gray.subtle.pressed" | "color.background.accent.gray.bolder" | "color.background.accent.gray.bolder.hovered" | "color.background.accent.gray.bolder.pressed" | "color.background.disabled" | "color.background.input" | "color.background.input.hovered" | "color.background.input.pressed" | "color.background.inverse.subtle" | "color.background.inverse.subtle.hovered" | "color.background.inverse.subtle.pressed" | "color.background.neutral" | "color.background.neutral.hovered" | "color.background.neutral.pressed" | "color.background.neutral.subtle" | "color.background.neutral.subtle.hovered" | "color.background.neutral.subtle.pressed" | "color.background.neutral.bold" | "color.background.neutral.bold.hovered" | "color.background.neutral.bold.pressed" | "color.background.selected" | "color.background.selected.hovered" | "color.background.selected.pressed" | "color.background.selected.bold" | "color.background.selected.bold.hovered" | "color.background.selected.bold.pressed" | "color.background.brand.subtlest" | "color.background.brand.subtlest.hovered" | "color.background.brand.subtlest.pressed" | "color.background.brand.bold" | "color.background.brand.bold.hovered" | "color.background.brand.bold.pressed" | "color.background.brand.boldest" | "color.background.brand.boldest.hovered" | "color.background.brand.boldest.pressed" | "color.background.danger" | "color.background.danger.hovered" | "color.background.danger.pressed" | "color.background.danger.bold" | "color.background.danger.bold.hovered" | "color.background.danger.bold.pressed" | "color.background.warning" | "color.background.warning.hovered" | "color.background.warning.pressed" | "color.background.warning.bold" | "color.background.warning.bold.hovered" | "color.background.warning.bold.pressed" | "color.background.success" | "color.background.success.hovered" | "color.background.success.pressed" | "color.background.success.bold" | "color.background.success.bold.hovered" | "color.background.success.bold.pressed" | "color.background.discovery" | "color.background.discovery.hovered" | "color.background.discovery.pressed" | "color.background.discovery.bold" | "color.background.discovery.bold.hovered" | "color.background.discovery.bold.pressed" | "color.background.information" | "color.background.information.hovered" | "color.background.information.pressed" | "color.background.information.bold" | "color.background.information.bold.hovered" | "color.background.information.bold.pressed" | "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken" | "utility.elevation.surface.current">;
+/**
+ * __useSurface__
+ *
+ * Return the current surface. If no parent sets a surface color it falls back to the default surface.
+ *
+ * @see SurfaceContext
+ */
+export declare const useSurface: () => "color.background.accent.lime.subtlest" | "color.background.accent.lime.subtlest.hovered" | "color.background.accent.lime.subtlest.pressed" | "color.background.accent.lime.subtler" | "color.background.accent.lime.subtler.hovered" | "color.background.accent.lime.subtler.pressed" | "color.background.accent.lime.subtle" | "color.background.accent.lime.subtle.hovered" | "color.background.accent.lime.subtle.pressed" | "color.background.accent.lime.bolder" | "color.background.accent.lime.bolder.hovered" | "color.background.accent.lime.bolder.pressed" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtlest.hovered" | "color.background.accent.red.subtlest.pressed" | "color.background.accent.red.subtler" | "color.background.accent.red.subtler.hovered" | "color.background.accent.red.subtler.pressed" | "color.background.accent.red.subtle" | "color.background.accent.red.subtle.hovered" | "color.background.accent.red.subtle.pressed" | "color.background.accent.red.bolder" | "color.background.accent.red.bolder.hovered" | "color.background.accent.red.bolder.pressed" | "color.background.accent.orange.subtlest" | "color.background.accent.orange.subtlest.hovered" | "color.background.accent.orange.subtlest.pressed" | "color.background.accent.orange.subtler" | "color.background.accent.orange.subtler.hovered" | "color.background.accent.orange.subtler.pressed" | "color.background.accent.orange.subtle" | "color.background.accent.orange.subtle.hovered" | "color.background.accent.orange.subtle.pressed" | "color.background.accent.orange.bolder" | "color.background.accent.orange.bolder.hovered" | "color.background.accent.orange.bolder.pressed" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtlest.hovered" | "color.background.accent.yellow.subtlest.pressed" | "color.background.accent.yellow.subtler" | "color.background.accent.yellow.subtler.hovered" | "color.background.accent.yellow.subtler.pressed" | "color.background.accent.yellow.subtle" | "color.background.accent.yellow.subtle.hovered" | "color.background.accent.yellow.subtle.pressed" | "color.background.accent.yellow.bolder" | "color.background.accent.yellow.bolder.hovered" | "color.background.accent.yellow.bolder.pressed" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtlest.hovered" | "color.background.accent.green.subtlest.pressed" | "color.background.accent.green.subtler" | "color.background.accent.green.subtler.hovered" | "color.background.accent.green.subtler.pressed" | "color.background.accent.green.subtle" | "color.background.accent.green.subtle.hovered" | "color.background.accent.green.subtle.pressed" | "color.background.accent.green.bolder" | "color.background.accent.green.bolder.hovered" | "color.background.accent.green.bolder.pressed" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtlest.hovered" | "color.background.accent.teal.subtlest.pressed" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtler.hovered" | "color.background.accent.teal.subtler.pressed" | "color.background.accent.teal.subtle" | "color.background.accent.teal.subtle.hovered" | "color.background.accent.teal.subtle.pressed" | "color.background.accent.teal.bolder" | "color.background.accent.teal.bolder.hovered" | "color.background.accent.teal.bolder.pressed" | "color.background.accent.blue.subtlest" | "color.background.accent.blue.subtlest.hovered" | "color.background.accent.blue.subtlest.pressed" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtler.hovered" | "color.background.accent.blue.subtler.pressed" | "color.background.accent.blue.subtle" | "color.background.accent.blue.subtle.hovered" | "color.background.accent.blue.subtle.pressed" | "color.background.accent.blue.bolder" | "color.background.accent.blue.bolder.hovered" | "color.background.accent.blue.bolder.pressed" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtlest.hovered" | "color.background.accent.purple.subtlest.pressed" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtler.hovered" | "color.background.accent.purple.subtler.pressed" | "color.background.accent.purple.subtle" | "color.background.accent.purple.subtle.hovered" | "color.background.accent.purple.subtle.pressed" | "color.background.accent.purple.bolder" | "color.background.accent.purple.bolder.hovered" | "color.background.accent.purple.bolder.pressed" | "color.background.accent.magenta.subtlest" | "color.background.accent.magenta.subtlest.hovered" | "color.background.accent.magenta.subtlest.pressed" | "color.background.accent.magenta.subtler" | "color.background.accent.magenta.subtler.hovered" | "color.background.accent.magenta.subtler.pressed" | "color.background.accent.magenta.subtle" | "color.background.accent.magenta.subtle.hovered" | "color.background.accent.magenta.subtle.pressed" | "color.background.accent.magenta.bolder" | "color.background.accent.magenta.bolder.hovered" | "color.background.accent.magenta.bolder.pressed" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtlest.hovered" | "color.background.accent.gray.subtlest.pressed" | "color.background.accent.gray.subtler" | "color.background.accent.gray.subtler.hovered" | "color.background.accent.gray.subtler.pressed" | "color.background.accent.gray.subtle" | "color.background.accent.gray.subtle.hovered" | "color.background.accent.gray.subtle.pressed" | "color.background.accent.gray.bolder" | "color.background.accent.gray.bolder.hovered" | "color.background.accent.gray.bolder.pressed" | "color.background.disabled" | "color.background.input" | "color.background.input.hovered" | "color.background.input.pressed" | "color.background.inverse.subtle" | "color.background.inverse.subtle.hovered" | "color.background.inverse.subtle.pressed" | "color.background.neutral" | "color.background.neutral.hovered" | "color.background.neutral.pressed" | "color.background.neutral.subtle" | "color.background.neutral.subtle.hovered" | "color.background.neutral.subtle.pressed" | "color.background.neutral.bold" | "color.background.neutral.bold.hovered" | "color.background.neutral.bold.pressed" | "color.background.selected" | "color.background.selected.hovered" | "color.background.selected.pressed" | "color.background.selected.bold" | "color.background.selected.bold.hovered" | "color.background.selected.bold.pressed" | "color.background.brand.subtlest" | "color.background.brand.subtlest.hovered" | "color.background.brand.subtlest.pressed" | "color.background.brand.bold" | "color.background.brand.bold.hovered" | "color.background.brand.bold.pressed" | "color.background.brand.boldest" | "color.background.brand.boldest.hovered" | "color.background.brand.boldest.pressed" | "color.background.danger" | "color.background.danger.hovered" | "color.background.danger.pressed" | "color.background.danger.bold" | "color.background.danger.bold.hovered" | "color.background.danger.bold.pressed" | "color.background.warning" | "color.background.warning.hovered" | "color.background.warning.pressed" | "color.background.warning.bold" | "color.background.warning.bold.hovered" | "color.background.warning.bold.pressed" | "color.background.success" | "color.background.success.hovered" | "color.background.success.pressed" | "color.background.success.bold" | "color.background.success.bold.hovered" | "color.background.success.bold.pressed" | "color.background.discovery" | "color.background.discovery.hovered" | "color.background.discovery.pressed" | "color.background.discovery.bold" | "color.background.discovery.bold.hovered" | "color.background.discovery.bold.pressed" | "color.background.information" | "color.background.information.hovered" | "color.background.information.pressed" | "color.background.information.bold" | "color.background.information.bold.hovered" | "color.background.information.bold.pressed" | "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken" | "utility.elevation.surface.current";