@atlaskit/ds-explorations 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/ds-explorations
 
+## 1.1.0
+
+### Minor Changes
+
+- [`93d75a4e289`](https://bitbucket.org/atlassian/atlassian-frontend/commits/93d75a4e289) - Adding id prop for Text component so that element can be updated with id attribute. It's a way for an element to be uniquely identifiable for a range of reasons. For example: URL anchors, reference target for integrations and accessible label references.
+
 ## 1.0.0
 
 ### Major Changes

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

@@ -180,11 +180,11 @@ var baseStyles = (0, _react2.css)({
 });
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::620ef1f3b2d7a6f92e5052efb270b5eb>>
+ * @codegen <<SignedSource::2d25a493458fa1cefdafcd559404f2ec>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding", "paddingBlock", "paddingInline", "width", "height"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 var paddingMap = {
@@ -384,11 +384,11 @@ var heightMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::832d4f0a888302a4fd097946cd7c582c>>
+ * @codegen <<SignedSource::781636715c2bee941d6836a5a90fed5b>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["border", "background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 var borderColorMap = {
   'color.border': (0, _react2.css)({

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

@@ -92,11 +92,11 @@ Inline.displayName = 'Inline';
 var _default = Inline;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::cff5655983f2243060cade5b107d7762>>
+ * @codegen <<SignedSource::2dd7c6b8450b1bbd1fb8fabf12fffa33>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["columnGap"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 exports.default = _default;

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

@@ -58,11 +58,11 @@ var InteractionSurface = function InteractionSurface(_ref) {
 var _default = InteractionSurface;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::1bad97ad2c03ae813521797686ac780d>>
+ * @codegen <<SignedSource::5289ea44928c279ad02274850623c9d1>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 exports.default = _default;

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

@@ -84,11 +84,11 @@ Stack.displayName = 'Stack';
 var _default = Stack;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c486b14097494305925c3c989823d602>>
+ * @codegen <<SignedSource::5d82d50cdeb38664c4c45d02608e447d>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["rowGap"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 exports.default = _default;

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

@@ -162,7 +162,8 @@ var Text = function Text(_ref) {
       textTransform = props.textTransform,
       verticalAlign = props.verticalAlign,
       testId = props.testId,
-      UNSAFE_style = props.UNSAFE_style;
+      UNSAFE_style = props.UNSAFE_style,
+      id = props.id;
   (0, _tinyInvariant.default)(asAllowlist.includes(Component), "@atlaskit/ds-explorations: Text received an invalid \"as\" value of \"".concat(Component, "\""));
   var color = useColor(colorProp);
   var isWrapped = useHasTextAncestor();
@@ -178,7 +179,8 @@ var Text = function Text(_ref) {
   var component = (0, _react2.jsx)(Component, {
     style: UNSAFE_style,
     css: [baseStyles, color && textColorMap[color], fontSize && fontSizeMap[fontSize], fontWeight && fontWeightMap[fontWeight], lineHeight && lineHeightMap[lineHeight], shouldTruncate && truncateStyles, textAlign && textAlignMap[textAlign], textTransform && textTransformMap[textTransform], verticalAlign && verticalAlignMap[verticalAlign]],
-    "data-testid": testId
+    "data-testid": testId,
+    id: id
   }, children);
   return isWrapped ? // no need to re-apply context if the text is already wrapped
   component : (0, _react2.jsx)(HasTextAncestorContext.Provider, {
@@ -189,11 +191,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::21771f01de3c37646642de03274f0738>>
+ * @codegen <<SignedSource::3d4d694e49f72e72f83ec28c1feafb76>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 exports.default = _default;

package/dist/cjs/internal/color-map.js

@@ -10,9 +10,9 @@ exports.default = void 0;
  *
  * The color map is used to map a background color token to a matching text color that will meet contrast.
  *
- * @codegen <<SignedSource::c9429c38d12f88de9f5be644bf5e704a>>
+ * @codegen <<SignedSource::b80b2a3d75c3215df8be35a6f5bda68d>>
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 var _default = {
   'neutral.bold': 'inverse',

package/dist/cjs/version.json

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

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

@@ -163,11 +163,11 @@ const baseStyles = css({
 });
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::620ef1f3b2d7a6f92e5052efb270b5eb>>
+ * @codegen <<SignedSource::2d25a493458fa1cefdafcd559404f2ec>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding", "paddingBlock", "paddingInline", "width", "height"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 const paddingMap = {
@@ -367,11 +367,11 @@ const heightMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::832d4f0a888302a4fd097946cd7c582c>>
+ * @codegen <<SignedSource::781636715c2bee941d6836a5a90fed5b>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["border", "background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 const borderColorMap = {
   'color.border': css({

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

@@ -81,11 +81,11 @@ Inline.displayName = 'Inline';
 export default Inline;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::cff5655983f2243060cade5b107d7762>>
+ * @codegen <<SignedSource::2dd7c6b8450b1bbd1fb8fabf12fffa33>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["columnGap"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 const columnGapMap = {

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

@@ -49,11 +49,11 @@ const InteractionSurface = ({
 export default InteractionSurface;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::1bad97ad2c03ae813521797686ac780d>>
+ * @codegen <<SignedSource::5289ea44928c279ad02274850623c9d1>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 const backgroundActiveColorMap = {

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

@@ -76,11 +76,11 @@ Stack.displayName = 'Stack';
 export default Stack;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c486b14097494305925c3c989823d602>>
+ * @codegen <<SignedSource::5d82d50cdeb38664c4c45d02608e447d>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["rowGap"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 const rowGapMap = {

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

@@ -144,7 +144,8 @@ const Text = ({
     textTransform,
     verticalAlign,
     testId,
-    UNSAFE_style
+    UNSAFE_style,
+    id
   } = props;
   invariant(asAllowlist.includes(Component), `@atlaskit/ds-explorations: Text received an invalid "as" value of "${Component}"`);
   const color = useColor(colorProp);
@@ -161,7 +162,8 @@ const Text = ({
   const component = jsx(Component, {
     style: UNSAFE_style,
     css: [baseStyles, color && textColorMap[color], fontSize && fontSizeMap[fontSize], fontWeight && fontWeightMap[fontWeight], lineHeight && lineHeightMap[lineHeight], shouldTruncate && truncateStyles, textAlign && textAlignMap[textAlign], textTransform && textTransformMap[textTransform], verticalAlign && verticalAlignMap[verticalAlign]],
-    "data-testid": testId
+    "data-testid": testId,
+    id: id
   }, children);
   return isWrapped ? // no need to re-apply context if the text is already wrapped
   component : jsx(HasTextAncestorContext.Provider, {
@@ -172,11 +174,11 @@ const Text = ({
 export default Text;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::21771f01de3c37646642de03274f0738>>
+ * @codegen <<SignedSource::3d4d694e49f72e72f83ec28c1feafb76>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 const textColorMap = {

package/dist/es2019/internal/color-map.js

@@ -3,9 +3,9 @@
  *
  * The color map is used to map a background color token to a matching text color that will meet contrast.
  *
- * @codegen <<SignedSource::c9429c38d12f88de9f5be644bf5e704a>>
+ * @codegen <<SignedSource::b80b2a3d75c3215df8be35a6f5bda68d>>
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 export default {
   'neutral.bold': 'inverse',

package/dist/es2019/version.json

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

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

@@ -167,11 +167,11 @@ var baseStyles = css({
 });
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::620ef1f3b2d7a6f92e5052efb270b5eb>>
+ * @codegen <<SignedSource::2d25a493458fa1cefdafcd559404f2ec>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding", "paddingBlock", "paddingInline", "width", "height"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 var paddingMap = {
@@ -371,11 +371,11 @@ var heightMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::832d4f0a888302a4fd097946cd7c582c>>
+ * @codegen <<SignedSource::781636715c2bee941d6836a5a90fed5b>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["border", "background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 var borderColorMap = {
   'color.border': css({

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

@@ -80,11 +80,11 @@ Inline.displayName = 'Inline';
 export default Inline;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::cff5655983f2243060cade5b107d7762>>
+ * @codegen <<SignedSource::2dd7c6b8450b1bbd1fb8fabf12fffa33>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["columnGap"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 var columnGapMap = {

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

@@ -48,11 +48,11 @@ var InteractionSurface = function InteractionSurface(_ref) {
 export default InteractionSurface;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::1bad97ad2c03ae813521797686ac780d>>
+ * @codegen <<SignedSource::5289ea44928c279ad02274850623c9d1>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 var backgroundActiveColorMap = {

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

@@ -75,11 +75,11 @@ Stack.displayName = 'Stack';
 export default Stack;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c486b14097494305925c3c989823d602>>
+ * @codegen <<SignedSource::5d82d50cdeb38664c4c45d02608e447d>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["rowGap"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 var rowGapMap = {

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

@@ -150,7 +150,8 @@ var Text = function Text(_ref) {
       textTransform = props.textTransform,
       verticalAlign = props.verticalAlign,
       testId = props.testId,
-      UNSAFE_style = props.UNSAFE_style;
+      UNSAFE_style = props.UNSAFE_style,
+      id = props.id;
   invariant(asAllowlist.includes(Component), "@atlaskit/ds-explorations: Text received an invalid \"as\" value of \"".concat(Component, "\""));
   var color = useColor(colorProp);
   var isWrapped = useHasTextAncestor();
@@ -166,7 +167,8 @@ var Text = function Text(_ref) {
   var component = jsx(Component, {
     style: UNSAFE_style,
     css: [baseStyles, color && textColorMap[color], fontSize && fontSizeMap[fontSize], fontWeight && fontWeightMap[fontWeight], lineHeight && lineHeightMap[lineHeight], shouldTruncate && truncateStyles, textAlign && textAlignMap[textAlign], textTransform && textTransformMap[textTransform], verticalAlign && verticalAlignMap[verticalAlign]],
-    "data-testid": testId
+    "data-testid": testId,
+    id: id
   }, children);
   return isWrapped ? // no need to re-apply context if the text is already wrapped
   component : jsx(HasTextAncestorContext.Provider, {
@@ -177,11 +179,11 @@ var Text = function Text(_ref) {
 export default Text;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::21771f01de3c37646642de03274f0738>>
+ * @codegen <<SignedSource::3d4d694e49f72e72f83ec28c1feafb76>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 var textColorMap = {

package/dist/esm/internal/color-map.js

@@ -3,9 +3,9 @@
  *
  * The color map is used to map a background color token to a matching text color that will meet contrast.
  *
- * @codegen <<SignedSource::c9429c38d12f88de9f5be644bf5e704a>>
+ * @codegen <<SignedSource::b80b2a3d75c3215df8be35a6f5bda68d>>
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 export default {
   'neutral.bold': 'inverse',

package/dist/esm/version.json

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

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

@@ -161,11 +161,11 @@ declare const overflowMap: {
 };
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::620ef1f3b2d7a6f92e5052efb270b5eb>>
+ * @codegen <<SignedSource::2d25a493458fa1cefdafcd559404f2ec>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding", "paddingBlock", "paddingInline", "width", "height"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 declare const paddingMap: {
     'scale.0': import("@emotion/react").SerializedStyles;
@@ -247,11 +247,11 @@ export declare type Height = keyof typeof heightMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::832d4f0a888302a4fd097946cd7c582c>>
+ * @codegen <<SignedSource::781636715c2bee941d6836a5a90fed5b>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["border", "background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 declare const borderColorMap: {
     'color.border': import("@emotion/react").SerializedStyles;

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

@@ -60,11 +60,11 @@ declare const Inline: import("react").ForwardRefExoticComponent<InlineProps & im
 export default Inline;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::cff5655983f2243060cade5b107d7762>>
+ * @codegen <<SignedSource::2dd7c6b8450b1bbd1fb8fabf12fffa33>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["columnGap"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 declare const columnGapMap: {
     'scale.0': import("@emotion/react").SerializedStyles;

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

@@ -54,11 +54,11 @@ declare const Stack: import("react").ForwardRefExoticComponent<StackProps & impo
 export default Stack;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c486b14097494305925c3c989823d602>>
+ * @codegen <<SignedSource::5d82d50cdeb38664c4c45d02608e447d>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["rowGap"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 declare const rowGapMap: {
     'scale.0': import("@emotion/react").SerializedStyles;

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

@@ -16,6 +16,10 @@ export interface TextProps extends BasePrimitiveProps {
      * Text color
      */
     color?: TextColor;
+    /**
+     * The HTML id attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+     */
+    id?: string;
     /**
      * Font size https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
      */
@@ -100,11 +104,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::21771f01de3c37646642de03274f0738>>
+ * @codegen <<SignedSource::3d4d694e49f72e72f83ec28c1feafb76>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 declare const textColorMap: {
     'color.text': import("@emotion/react").SerializedStyles;

package/dist/types/internal/color-map.d.ts

@@ -29,8 +29,8 @@ declare const _default: {
  *
  * The color map is used to map a background color token to a matching text color that will meet contrast.
  *
- * @codegen <<SignedSource::c9429c38d12f88de9f5be644bf5e704a>>
+ * @codegen <<SignedSource::b80b2a3d75c3215df8be35a6f5bda68d>>
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 export default _default;

package/dist/types-ts4.0/components/box.partial.d.ts

@@ -161,11 +161,11 @@ declare const overflowMap: {
 };
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::620ef1f3b2d7a6f92e5052efb270b5eb>>
+ * @codegen <<SignedSource::2d25a493458fa1cefdafcd559404f2ec>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding", "paddingBlock", "paddingInline", "width", "height"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 declare const paddingMap: {
     'scale.0': import("@emotion/react").SerializedStyles;
@@ -247,11 +247,11 @@ export declare type Height = keyof typeof heightMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::832d4f0a888302a4fd097946cd7c582c>>
+ * @codegen <<SignedSource::781636715c2bee941d6836a5a90fed5b>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["border", "background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 declare const borderColorMap: {
     'color.border': import("@emotion/react").SerializedStyles;

package/dist/types-ts4.0/components/inline.partial.d.ts

@@ -60,11 +60,11 @@ declare const Inline: import("react").ForwardRefExoticComponent<InlineProps & im
 export default Inline;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::cff5655983f2243060cade5b107d7762>>
+ * @codegen <<SignedSource::2dd7c6b8450b1bbd1fb8fabf12fffa33>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["columnGap"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 declare const columnGapMap: {
     'scale.0': import("@emotion/react").SerializedStyles;

package/dist/types-ts4.0/components/stack.partial.d.ts

@@ -54,11 +54,11 @@ declare const Stack: import("react").ForwardRefExoticComponent<StackProps & impo
 export default Stack;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c486b14097494305925c3c989823d602>>
+ * @codegen <<SignedSource::5d82d50cdeb38664c4c45d02608e447d>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["rowGap"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 declare const rowGapMap: {
     'scale.0': import("@emotion/react").SerializedStyles;

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

@@ -20,6 +20,10 @@ export interface TextProps extends BasePrimitiveProps {
      * Text color
      */
     color?: TextColor;
+    /**
+     * The HTML id attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+     */
+    id?: string;
     /**
      * Font size https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
      */
@@ -104,11 +108,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::21771f01de3c37646642de03274f0738>>
+ * @codegen <<SignedSource::3d4d694e49f72e72f83ec28c1feafb76>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 declare const textColorMap: {
     'color.text': import("@emotion/react").SerializedStyles;

package/dist/types-ts4.0/internal/color-map.d.ts

@@ -29,8 +29,8 @@ declare const _default: {
  *
  * The color map is used to map a background color token to a matching text color that will meet contrast.
  *
- * @codegen <<SignedSource::c9429c38d12f88de9f5be644bf5e704a>>
+ * @codegen <<SignedSource::b80b2a3d75c3215df8be35a6f5bda68d>>
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 export default _default;

package/examples/02-text.tsx

@@ -77,6 +77,7 @@ export default () => {
               fontSize="14px"
               lineHeight="16px"
               fontWeight="500"
+              id="some-id"
             >
               Text with various props
             </Text>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/ds-explorations",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "An experimental package for exploration and validation of spacing / typography foundations.",
   "license": "Apache-2.0",
   "atlassian": {

package/report.api.md

@@ -570,6 +570,7 @@ export interface UNSAFE_TextProps extends BasePrimitiveProps {
   color?: TextColor;
   fontSize?: FontSize;
   fontWeight?: FontWeight;
+  id?: string;
   lineHeight?: LineHeight;
   shouldTruncate?: boolean;
   textAlign?: TextAlign;

package/src/components/__tests__/unit/text.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { render } from '@testing-library/react';
+import { queryByAttribute, render } from '@testing-library/react';
 
 import { UNSAFE_Text as Text } from '../../../index';
 
@@ -38,6 +38,14 @@ describe('Text component', () => {
     expect(getByTestId('test')).toBeInTheDocument();
   });
 
+  it('should render with id attribute', () => {
+    const id = 'some-id';
+    const { container } = render(<Text id={id}>Text</Text>);
+    const queryById = queryByAttribute.bind(null, 'id');
+    const component = queryById(container, id);
+    expect(component).toBeDefined();
+  });
+
   describe('"as" prop behaviour', () => {
     it('renders without errors when a valid "as" value is given', () => {
       const { getByText } = render(<Text as="div">Text</Text>);

package/src/components/box.partial.tsx

@@ -279,48 +279,48 @@ const baseStyles = css({
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::620ef1f3b2d7a6f92e5052efb270b5eb>>
+ * @codegen <<SignedSource::af3861211bc952f699f2ee08458af9a1>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding", "paddingBlock", "paddingInline", "width", "height"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 const paddingMap = {
   'scale.0': css({
-    padding: token('spacing.scale.0', '0px'),
+    padding: token('spacing.scale.0', '0'),
   }),
   'scale.025': css({
-    padding: token('spacing.scale.025', '2px'),
+    padding: token('spacing.scale.025', '0.125rem'),
   }),
   'scale.050': css({
-    padding: token('spacing.scale.050', '4px'),
+    padding: token('spacing.scale.050', '0.25rem'),
   }),
   'scale.075': css({
-    padding: token('spacing.scale.075', '6px'),
+    padding: token('spacing.scale.075', '0.375rem'),
   }),
   'scale.100': css({
-    padding: token('spacing.scale.100', '8px'),
+    padding: token('spacing.scale.100', '0.5rem'),
   }),
   'scale.150': css({
-    padding: token('spacing.scale.150', '12px'),
+    padding: token('spacing.scale.150', '0.75rem'),
   }),
   'scale.200': css({
-    padding: token('spacing.scale.200', '16px'),
+    padding: token('spacing.scale.200', '1rem'),
   }),
   'scale.250': css({
-    padding: token('spacing.scale.250', '20px'),
+    padding: token('spacing.scale.250', '1.25rem'),
   }),
   'scale.300': css({
-    padding: token('spacing.scale.300', '24px'),
+    padding: token('spacing.scale.300', '1.5rem'),
   }),
   'scale.400': css({
-    padding: token('spacing.scale.400', '32px'),
+    padding: token('spacing.scale.400', '2rem'),
   }),
   'scale.500': css({
-    padding: token('spacing.scale.500', '40px'),
+    padding: token('spacing.scale.500', '2.5rem'),
   }),
   'scale.600': css({
-    padding: token('spacing.scale.600', '48px'),
+    padding: token('spacing.scale.600', '3rem'),
   }),
 };
 
@@ -328,40 +328,40 @@ export type Padding = keyof typeof paddingMap;
 
 const paddingBlockMap = {
   'scale.0': css({
-    paddingBlock: token('spacing.scale.0', '0px'),
+    paddingBlock: token('spacing.scale.0', '0'),
   }),
   'scale.025': css({
-    paddingBlock: token('spacing.scale.025', '2px'),
+    paddingBlock: token('spacing.scale.025', '0.125rem'),
   }),
   'scale.050': css({
-    paddingBlock: token('spacing.scale.050', '4px'),
+    paddingBlock: token('spacing.scale.050', '0.25rem'),
   }),
   'scale.075': css({
-    paddingBlock: token('spacing.scale.075', '6px'),
+    paddingBlock: token('spacing.scale.075', '0.375rem'),
   }),
   'scale.100': css({
-    paddingBlock: token('spacing.scale.100', '8px'),
+    paddingBlock: token('spacing.scale.100', '0.5rem'),
   }),
   'scale.150': css({
-    paddingBlock: token('spacing.scale.150', '12px'),
+    paddingBlock: token('spacing.scale.150', '0.75rem'),
   }),
   'scale.200': css({
-    paddingBlock: token('spacing.scale.200', '16px'),
+    paddingBlock: token('spacing.scale.200', '1rem'),
   }),
   'scale.250': css({
-    paddingBlock: token('spacing.scale.250', '20px'),
+    paddingBlock: token('spacing.scale.250', '1.25rem'),
   }),
   'scale.300': css({
-    paddingBlock: token('spacing.scale.300', '24px'),
+    paddingBlock: token('spacing.scale.300', '1.5rem'),
   }),
   'scale.400': css({
-    paddingBlock: token('spacing.scale.400', '32px'),
+    paddingBlock: token('spacing.scale.400', '2rem'),
   }),
   'scale.500': css({
-    paddingBlock: token('spacing.scale.500', '40px'),
+    paddingBlock: token('spacing.scale.500', '2.5rem'),
   }),
   'scale.600': css({
-    paddingBlock: token('spacing.scale.600', '48px'),
+    paddingBlock: token('spacing.scale.600', '3rem'),
   }),
 };
 
@@ -369,40 +369,40 @@ export type PaddingBlock = keyof typeof paddingBlockMap;
 
 const paddingInlineMap = {
   'scale.0': css({
-    paddingInline: token('spacing.scale.0', '0px'),
+    paddingInline: token('spacing.scale.0', '0'),
   }),
   'scale.025': css({
-    paddingInline: token('spacing.scale.025', '2px'),
+    paddingInline: token('spacing.scale.025', '0.125rem'),
   }),
   'scale.050': css({
-    paddingInline: token('spacing.scale.050', '4px'),
+    paddingInline: token('spacing.scale.050', '0.25rem'),
   }),
   'scale.075': css({
-    paddingInline: token('spacing.scale.075', '6px'),
+    paddingInline: token('spacing.scale.075', '0.375rem'),
   }),
   'scale.100': css({
-    paddingInline: token('spacing.scale.100', '8px'),
+    paddingInline: token('spacing.scale.100', '0.5rem'),
   }),
   'scale.150': css({
-    paddingInline: token('spacing.scale.150', '12px'),
+    paddingInline: token('spacing.scale.150', '0.75rem'),
   }),
   'scale.200': css({
-    paddingInline: token('spacing.scale.200', '16px'),
+    paddingInline: token('spacing.scale.200', '1rem'),
   }),
   'scale.250': css({
-    paddingInline: token('spacing.scale.250', '20px'),
+    paddingInline: token('spacing.scale.250', '1.25rem'),
   }),
   'scale.300': css({
-    paddingInline: token('spacing.scale.300', '24px'),
+    paddingInline: token('spacing.scale.300', '1.5rem'),
   }),
   'scale.400': css({
-    paddingInline: token('spacing.scale.400', '32px'),
+    paddingInline: token('spacing.scale.400', '2rem'),
   }),
   'scale.500': css({
-    paddingInline: token('spacing.scale.500', '40px'),
+    paddingInline: token('spacing.scale.500', '2.5rem'),
   }),
   'scale.600': css({
-    paddingInline: token('spacing.scale.600', '48px'),
+    paddingInline: token('spacing.scale.600', '3rem'),
   }),
 };
 
@@ -410,40 +410,40 @@ export type PaddingInline = keyof typeof paddingInlineMap;
 
 const widthMap = {
   'scale.0': css({
-    width: token('spacing.scale.0', '0px'),
+    width: token('spacing.scale.0', '0'),
   }),
   'scale.025': css({
-    width: token('spacing.scale.025', '2px'),
+    width: token('spacing.scale.025', '0.125rem'),
   }),
   'scale.050': css({
-    width: token('spacing.scale.050', '4px'),
+    width: token('spacing.scale.050', '0.25rem'),
   }),
   'scale.075': css({
-    width: token('spacing.scale.075', '6px'),
+    width: token('spacing.scale.075', '0.375rem'),
   }),
   'scale.100': css({
-    width: token('spacing.scale.100', '8px'),
+    width: token('spacing.scale.100', '0.5rem'),
   }),
   'scale.150': css({
-    width: token('spacing.scale.150', '12px'),
+    width: token('spacing.scale.150', '0.75rem'),
   }),
   'scale.200': css({
-    width: token('spacing.scale.200', '16px'),
+    width: token('spacing.scale.200', '1rem'),
   }),
   'scale.250': css({
-    width: token('spacing.scale.250', '20px'),
+    width: token('spacing.scale.250', '1.25rem'),
   }),
   'scale.300': css({
-    width: token('spacing.scale.300', '24px'),
+    width: token('spacing.scale.300', '1.5rem'),
   }),
   'scale.400': css({
-    width: token('spacing.scale.400', '32px'),
+    width: token('spacing.scale.400', '2rem'),
   }),
   'scale.500': css({
-    width: token('spacing.scale.500', '40px'),
+    width: token('spacing.scale.500', '2.5rem'),
   }),
   'scale.600': css({
-    width: token('spacing.scale.600', '48px'),
+    width: token('spacing.scale.600', '3rem'),
   }),
 };
 
@@ -451,40 +451,40 @@ export type Width = keyof typeof widthMap;
 
 const heightMap = {
   'scale.0': css({
-    height: token('spacing.scale.0', '0px'),
+    height: token('spacing.scale.0', '0'),
   }),
   'scale.025': css({
-    height: token('spacing.scale.025', '2px'),
+    height: token('spacing.scale.025', '0.125rem'),
   }),
   'scale.050': css({
-    height: token('spacing.scale.050', '4px'),
+    height: token('spacing.scale.050', '0.25rem'),
   }),
   'scale.075': css({
-    height: token('spacing.scale.075', '6px'),
+    height: token('spacing.scale.075', '0.375rem'),
   }),
   'scale.100': css({
-    height: token('spacing.scale.100', '8px'),
+    height: token('spacing.scale.100', '0.5rem'),
   }),
   'scale.150': css({
-    height: token('spacing.scale.150', '12px'),
+    height: token('spacing.scale.150', '0.75rem'),
   }),
   'scale.200': css({
-    height: token('spacing.scale.200', '16px'),
+    height: token('spacing.scale.200', '1rem'),
   }),
   'scale.250': css({
-    height: token('spacing.scale.250', '20px'),
+    height: token('spacing.scale.250', '1.25rem'),
   }),
   'scale.300': css({
-    height: token('spacing.scale.300', '24px'),
+    height: token('spacing.scale.300', '1.5rem'),
   }),
   'scale.400': css({
-    height: token('spacing.scale.400', '32px'),
+    height: token('spacing.scale.400', '2rem'),
   }),
   'scale.500': css({
-    height: token('spacing.scale.500', '40px'),
+    height: token('spacing.scale.500', '2.5rem'),
   }),
   'scale.600': css({
-    height: token('spacing.scale.600', '48px'),
+    height: token('spacing.scale.600', '3rem'),
   }),
 };
 
@@ -496,11 +496,11 @@ export type Height = keyof typeof heightMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::832d4f0a888302a4fd097946cd7c582c>>
+ * @codegen <<SignedSource::781636715c2bee941d6836a5a90fed5b>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["border", "background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 const borderColorMap = {
   'color.border': css({

package/src/components/inline.partial.tsx

@@ -122,48 +122,48 @@ export default Inline;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::cff5655983f2243060cade5b107d7762>>
+ * @codegen <<SignedSource::a3c9f0528d75060e7cf9617878520e18>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["columnGap"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 const columnGapMap = {
   'scale.0': css({
-    columnGap: token('spacing.scale.0', '0px'),
+    columnGap: token('spacing.scale.0', '0'),
   }),
   'scale.025': css({
-    columnGap: token('spacing.scale.025', '2px'),
+    columnGap: token('spacing.scale.025', '0.125rem'),
   }),
   'scale.050': css({
-    columnGap: token('spacing.scale.050', '4px'),
+    columnGap: token('spacing.scale.050', '0.25rem'),
   }),
   'scale.075': css({
-    columnGap: token('spacing.scale.075', '6px'),
+    columnGap: token('spacing.scale.075', '0.375rem'),
   }),
   'scale.100': css({
-    columnGap: token('spacing.scale.100', '8px'),
+    columnGap: token('spacing.scale.100', '0.5rem'),
   }),
   'scale.150': css({
-    columnGap: token('spacing.scale.150', '12px'),
+    columnGap: token('spacing.scale.150', '0.75rem'),
   }),
   'scale.200': css({
-    columnGap: token('spacing.scale.200', '16px'),
+    columnGap: token('spacing.scale.200', '1rem'),
   }),
   'scale.250': css({
-    columnGap: token('spacing.scale.250', '20px'),
+    columnGap: token('spacing.scale.250', '1.25rem'),
   }),
   'scale.300': css({
-    columnGap: token('spacing.scale.300', '24px'),
+    columnGap: token('spacing.scale.300', '1.5rem'),
   }),
   'scale.400': css({
-    columnGap: token('spacing.scale.400', '32px'),
+    columnGap: token('spacing.scale.400', '2rem'),
   }),
   'scale.500': css({
-    columnGap: token('spacing.scale.500', '40px'),
+    columnGap: token('spacing.scale.500', '2.5rem'),
   }),
   'scale.600': css({
-    columnGap: token('spacing.scale.600', '48px'),
+    columnGap: token('spacing.scale.600', '3rem'),
   }),
 };
 

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

@@ -70,11 +70,11 @@ export default InteractionSurface;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::1bad97ad2c03ae813521797686ac780d>>
+ * @codegen <<SignedSource::5289ea44928c279ad02274850623c9d1>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 const backgroundActiveColorMap = {
   'inverse.subtle': css({

package/src/components/stack.partial.tsx

@@ -105,48 +105,48 @@ export default Stack;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c486b14097494305925c3c989823d602>>
+ * @codegen <<SignedSource::cdcf4cb57de0e4673d92627810e3e095>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["rowGap"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 const rowGapMap = {
   'scale.0': css({
-    rowGap: token('spacing.scale.0', '0px'),
+    rowGap: token('spacing.scale.0', '0'),
   }),
   'scale.025': css({
-    rowGap: token('spacing.scale.025', '2px'),
+    rowGap: token('spacing.scale.025', '0.125rem'),
   }),
   'scale.050': css({
-    rowGap: token('spacing.scale.050', '4px'),
+    rowGap: token('spacing.scale.050', '0.25rem'),
   }),
   'scale.075': css({
-    rowGap: token('spacing.scale.075', '6px'),
+    rowGap: token('spacing.scale.075', '0.375rem'),
   }),
   'scale.100': css({
-    rowGap: token('spacing.scale.100', '8px'),
+    rowGap: token('spacing.scale.100', '0.5rem'),
   }),
   'scale.150': css({
-    rowGap: token('spacing.scale.150', '12px'),
+    rowGap: token('spacing.scale.150', '0.75rem'),
   }),
   'scale.200': css({
-    rowGap: token('spacing.scale.200', '16px'),
+    rowGap: token('spacing.scale.200', '1rem'),
   }),
   'scale.250': css({
-    rowGap: token('spacing.scale.250', '20px'),
+    rowGap: token('spacing.scale.250', '1.25rem'),
   }),
   'scale.300': css({
-    rowGap: token('spacing.scale.300', '24px'),
+    rowGap: token('spacing.scale.300', '1.5rem'),
   }),
   'scale.400': css({
-    rowGap: token('spacing.scale.400', '32px'),
+    rowGap: token('spacing.scale.400', '2rem'),
   }),
   'scale.500': css({
-    rowGap: token('spacing.scale.500', '40px'),
+    rowGap: token('spacing.scale.500', '2.5rem'),
   }),
   'scale.600': css({
-    rowGap: token('spacing.scale.600', '48px'),
+    rowGap: token('spacing.scale.600', '3rem'),
   }),
 };
 

package/src/components/text.partial.tsx

@@ -26,6 +26,10 @@ export interface TextProps extends BasePrimitiveProps {
    * Text color
    */
   color?: TextColor;
+  /**
+   * The HTML id attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+   */
+  id?: string;
   /**
    * Font size https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
    */
@@ -162,6 +166,7 @@ const Text: FC<TextProps> = ({ children, ...props }) => {
     verticalAlign,
     testId,
     UNSAFE_style,
+    id,
   } = props;
   invariant(
     asAllowlist.includes(Component),
@@ -193,6 +198,7 @@ const Text: FC<TextProps> = ({ children, ...props }) => {
         verticalAlign && verticalAlignMap[verticalAlign],
       ]}
       data-testid={testId}
+      id={id}
     >
       {children}
     </Component>
@@ -212,11 +218,11 @@ export default Text;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::21771f01de3c37646642de03274f0738>>
+ * @codegen <<SignedSource::3d4d694e49f72e72f83ec28c1feafb76>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 const textColorMap = {
   'color.text': css({

package/src/internal/color-map.tsx

@@ -3,9 +3,9 @@
  *
  * The color map is used to map a background color token to a matching text color that will meet contrast.
  *
- * @codegen <<SignedSource::c9429c38d12f88de9f5be644bf5e704a>>
+ * @codegen <<SignedSource::b80b2a3d75c3215df8be35a6f5bda68d>>
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 export default {
   'neutral.bold': 'inverse',

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

@@ -542,6 +542,7 @@ export interface UNSAFE_TextProps extends BasePrimitiveProps {
     color?: TextColor;
     fontSize?: FontSize;
     fontWeight?: FontWeight;
+    id?: string;
     lineHeight?: LineHeight;
     shouldTruncate?: boolean;
     textAlign?: TextAlign;