@atlaskit/tokens 1.20.0 → 1.21.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/tokens
 
+## 1.21.0
+
+### Minor Changes
+
+- [`9eee297c402`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9eee297c402) - Added negative space tokens from -2px to -32px (space.negative.025 to space.negative.400).
+
+## 1.20.1
+
+### Patch Changes
+
+- [`4be033a9cb5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4be033a9cb5) - Update types
+
 ## 1.20.0
 
 ### Minor Changes

package/dist/cjs/artifacts/palettes-raw/spacing-scale.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::4cad6a8b4b676f9379fa2d4fca019b0e>>
+ * @codegen <<SignedSource::f1c7eb6fca38275b61cb71127efc2f1a>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -219,6 +219,141 @@ var tokens = [{
   },
   "name": "space.Space800",
   "path": ["space", "Space800"]
+}, {
+  "value": "-2px",
+  "attributes": {
+    "group": "spacing"
+  },
+  "filePath": "src/palettes/spacing-scale.tsx",
+  "isSource": true,
+  "original": {
+    "value": -2,
+    "attributes": {
+      "group": "spacing"
+    }
+  },
+  "name": "space.SpaceNegative025",
+  "path": ["space", "SpaceNegative025"]
+}, {
+  "value": "-4px",
+  "attributes": {
+    "group": "spacing"
+  },
+  "filePath": "src/palettes/spacing-scale.tsx",
+  "isSource": true,
+  "original": {
+    "value": -4,
+    "attributes": {
+      "group": "spacing"
+    }
+  },
+  "name": "space.SpaceNegative050",
+  "path": ["space", "SpaceNegative050"]
+}, {
+  "value": "-6px",
+  "attributes": {
+    "group": "spacing"
+  },
+  "filePath": "src/palettes/spacing-scale.tsx",
+  "isSource": true,
+  "original": {
+    "value": -6,
+    "attributes": {
+      "group": "spacing"
+    }
+  },
+  "name": "space.SpaceNegative075",
+  "path": ["space", "SpaceNegative075"]
+}, {
+  "value": "-8px",
+  "attributes": {
+    "group": "spacing"
+  },
+  "filePath": "src/palettes/spacing-scale.tsx",
+  "isSource": true,
+  "original": {
+    "value": -8,
+    "attributes": {
+      "group": "spacing"
+    }
+  },
+  "name": "space.SpaceNegative100",
+  "path": ["space", "SpaceNegative100"]
+}, {
+  "value": "-12px",
+  "attributes": {
+    "group": "spacing"
+  },
+  "filePath": "src/palettes/spacing-scale.tsx",
+  "isSource": true,
+  "original": {
+    "value": -12,
+    "attributes": {
+      "group": "spacing"
+    }
+  },
+  "name": "space.SpaceNegative150",
+  "path": ["space", "SpaceNegative150"]
+}, {
+  "value": "-16px",
+  "attributes": {
+    "group": "spacing"
+  },
+  "filePath": "src/palettes/spacing-scale.tsx",
+  "isSource": true,
+  "original": {
+    "value": -16,
+    "attributes": {
+      "group": "spacing"
+    }
+  },
+  "name": "space.SpaceNegative200",
+  "path": ["space", "SpaceNegative200"]
+}, {
+  "value": "-20px",
+  "attributes": {
+    "group": "spacing"
+  },
+  "filePath": "src/palettes/spacing-scale.tsx",
+  "isSource": true,
+  "original": {
+    "value": -20,
+    "attributes": {
+      "group": "spacing"
+    }
+  },
+  "name": "space.SpaceNegative250",
+  "path": ["space", "SpaceNegative250"]
+}, {
+  "value": "-24px",
+  "attributes": {
+    "group": "spacing"
+  },
+  "filePath": "src/palettes/spacing-scale.tsx",
+  "isSource": true,
+  "original": {
+    "value": -24,
+    "attributes": {
+      "group": "spacing"
+    }
+  },
+  "name": "space.SpaceNegative300",
+  "path": ["space", "SpaceNegative300"]
+}, {
+  "value": "-32px",
+  "attributes": {
+    "group": "spacing"
+  },
+  "filePath": "src/palettes/spacing-scale.tsx",
+  "isSource": true,
+  "original": {
+    "value": -32,
+    "attributes": {
+      "group": "spacing"
+    }
+  },
+  "name": "space.SpaceNegative400",
+  "path": ["space", "SpaceNegative400"]
 }];
 var _default = tokens;
 exports.default = _default;

package/dist/cjs/artifacts/themes/atlassian-spacing.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::36f0214aaedb62d3639cb79a9195eaf6>>
+ * @codegen <<SignedSource::50b812651f792cc85f9294bc1f28b366>>
  * @codegenCommand yarn build tokens
  */
-var _default = "\nhtml[data-theme~=\"spacing:spacing\"] {\n  --ds-space-0: 0rem;\n  --ds-space-025: 0.125rem;\n  --ds-space-050: 0.25rem;\n  --ds-space-075: 0.375rem;\n  --ds-space-100: 0.5rem;\n  --ds-space-150: 0.75rem;\n  --ds-space-200: 1rem;\n  --ds-space-250: 1.25rem;\n  --ds-space-300: 1.5rem;\n  --ds-space-400: 2rem;\n  --ds-space-500: 2.5rem;\n  --ds-space-600: 3rem;\n  --ds-space-800: 4rem;\n  --ds-space-1000: 5rem;\n}\n";
+var _default = "\nhtml[data-theme~=\"spacing:spacing\"] {\n  --ds-space-0: 0rem;\n  --ds-space-025: 0.125rem;\n  --ds-space-050: 0.25rem;\n  --ds-space-075: 0.375rem;\n  --ds-space-100: 0.5rem;\n  --ds-space-150: 0.75rem;\n  --ds-space-200: 1rem;\n  --ds-space-250: 1.25rem;\n  --ds-space-300: 1.5rem;\n  --ds-space-400: 2rem;\n  --ds-space-500: 2.5rem;\n  --ds-space-600: 3rem;\n  --ds-space-800: 4rem;\n  --ds-space-1000: 5rem;\n  --ds-space-negative-025: -0.125rem;\n  --ds-space-negative-050: -0.25rem;\n  --ds-space-negative-075: -0.375rem;\n  --ds-space-negative-100: -0.5rem;\n  --ds-space-negative-150: -0.75rem;\n  --ds-space-negative-200: -1rem;\n  --ds-space-negative-250: -1.25rem;\n  --ds-space-negative-300: -1.5rem;\n  --ds-space-negative-400: -2rem;\n}\n";
 exports.default = _default;

package/dist/cjs/artifacts/token-default-values.js

@@ -13,7 +13,7 @@ exports.default = void 0;
  * Token names mapped to their value in the default Atlassian themes ('light').
  * These default values are used by the Babel plugin to optionally provide automatic fallbacks.
  *
- * @codegen <<SignedSource::b5c908d96d2198b69df03d013b3c2b6a>>
+ * @codegen <<SignedSource::89d57f1ac024661bf2b7ee3c1e74dfa9>>
  * @codegenCommand yarn build tokens
  */
 var defaultTokenValues = {
@@ -429,6 +429,15 @@ var defaultTokenValues = {
   'space.600': '3rem',
   'space.800': '4rem',
   'space.1000': '5rem',
+  'space.negative.025': '-0.125rem',
+  'space.negative.050': '-0.25rem',
+  'space.negative.075': '-0.375rem',
+  'space.negative.100': '-0.5rem',
+  'space.negative.150': '-0.75rem',
+  'space.negative.200': '-1rem',
+  'space.negative.250': '-1.25rem',
+  'space.negative.300': '-1.5rem',
+  'space.negative.400': '-2rem',
   'font.body': 'normal 400 0.875rem/1.25rem ui-sans-serif, "Segoe UI", system-ui, Ubuntu, "Helvetica Neue", sans-serif',
   'font.body.lg': 'normal 400 1rem/1.5rem ui-sans-serif, "Segoe UI", system-ui, Ubuntu, "Helvetica Neue", sans-serif',
   'font.body.sm': 'normal 400 0.6875rem/1.25rem ui-sans-serif, "Segoe UI", system-ui, Ubuntu, "Helvetica Neue", sans-serif',

package/dist/cjs/artifacts/token-names.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::5688852b9c5bb12cbce375967cb93ef5>>
+ * @codegen <<SignedSource::487e60f0791ae39572ec7cc90e77eb13>>
  * @codegenCommand yarn build tokens
  */
 var tokens = {
@@ -422,6 +422,15 @@ var tokens = {
   'space.600': '--ds-space-600',
   'space.800': '--ds-space-800',
   'space.1000': '--ds-space-1000',
+  'space.negative.025': '--ds-space-negative-025',
+  'space.negative.050': '--ds-space-negative-050',
+  'space.negative.075': '--ds-space-negative-075',
+  'space.negative.100': '--ds-space-negative-100',
+  'space.negative.150': '--ds-space-negative-150',
+  'space.negative.200': '--ds-space-negative-200',
+  'space.negative.250': '--ds-space-negative-250',
+  'space.negative.300': '--ds-space-negative-300',
+  'space.negative.400': '--ds-space-negative-400',
   'font.body': '--ds-font-body',
   'font.body.lg': '--ds-font-body-lg',
   'font.body.sm': '--ds-font-body-sm',

package/dist/cjs/artifacts/tokens-raw/atlassian-spacing.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::93b85a1d24e82271f0bc792e089efef5>>
+ * @codegen <<SignedSource::54cdec07bc1ce255f26b8254ca514b76>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -335,6 +335,222 @@ var tokens = [{
   "name": "space.1000",
   "path": ["space", "1000"],
   "cleanName": "space.1000"
+}, {
+  "attributes": {
+    "group": "spacing",
+    "state": "active",
+    "suggest": ["-1px", "-3px"],
+    "introduced": "1.21.0",
+    "description": "Use to negate parent whitespace or overlap small pieces of UI."
+  },
+  "value": "-2px",
+  "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "spacing",
+      "state": "active",
+      "suggest": ["-1px", "-3px"],
+      "introduced": "1.21.0",
+      "description": "Use to negate parent whitespace or overlap small pieces of UI."
+    },
+    "value": "SpaceNegative025"
+  },
+  "name": "space.negative.025",
+  "path": ["space", "negative", "025"],
+  "cleanName": "space.negative.025"
+}, {
+  "attributes": {
+    "group": "spacing",
+    "state": "active",
+    "suggest": ["-3px", "-5px"],
+    "introduced": "1.21.0",
+    "description": "Use to negate parent whitespace or overlap small pieces of UI."
+  },
+  "value": "-4px",
+  "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "spacing",
+      "state": "active",
+      "suggest": ["-3px", "-5px"],
+      "introduced": "1.21.0",
+      "description": "Use to negate parent whitespace or overlap small pieces of UI."
+    },
+    "value": "SpaceNegative050"
+  },
+  "name": "space.negative.050",
+  "path": ["space", "negative", "050"],
+  "cleanName": "space.negative.050"
+}, {
+  "attributes": {
+    "group": "spacing",
+    "state": "active",
+    "suggest": ["-5px", "-7px"],
+    "introduced": "1.21.0",
+    "description": "Use to negate parent whitespace or overlap small pieces of UI."
+  },
+  "value": "-6px",
+  "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "spacing",
+      "state": "active",
+      "suggest": ["-5px", "-7px"],
+      "introduced": "1.21.0",
+      "description": "Use to negate parent whitespace or overlap small pieces of UI."
+    },
+    "value": "SpaceNegative075"
+  },
+  "name": "space.negative.075",
+  "path": ["space", "negative", "075"],
+  "cleanName": "space.negative.075"
+}, {
+  "attributes": {
+    "group": "spacing",
+    "state": "active",
+    "suggest": ["-7px", "-9px"],
+    "introduced": "1.21.0",
+    "description": "Use to negate parent whitespace or overlap small pieces of UI."
+  },
+  "value": "-8px",
+  "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "spacing",
+      "state": "active",
+      "suggest": ["-7px", "-9px"],
+      "introduced": "1.21.0",
+      "description": "Use to negate parent whitespace or overlap small pieces of UI."
+    },
+    "value": "SpaceNegative100"
+  },
+  "name": "space.negative.100",
+  "path": ["space", "negative", "100"],
+  "cleanName": "space.negative.100"
+}, {
+  "attributes": {
+    "group": "spacing",
+    "state": "active",
+    "suggest": ["-10px", "-11px", "-13px", "-14px"],
+    "introduced": "1.21.0",
+    "description": "Use to negate parent whitespace or overlap larger pieces of UI."
+  },
+  "value": "-12px",
+  "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "spacing",
+      "state": "active",
+      "suggest": ["-10px", "-11px", "-13px", "-14px"],
+      "introduced": "1.21.0",
+      "description": "Use to negate parent whitespace or overlap larger pieces of UI."
+    },
+    "value": "SpaceNegative150"
+  },
+  "name": "space.negative.150",
+  "path": ["space", "negative", "150"],
+  "cleanName": "space.negative.150"
+}, {
+  "attributes": {
+    "group": "spacing",
+    "state": "active",
+    "suggest": ["-14px", "-15px", "-17px", "-18px"],
+    "introduced": "1.21.0",
+    "description": "Use to negate parent whitespace or overlap larger pieces of UI."
+  },
+  "value": "-16px",
+  "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "spacing",
+      "state": "active",
+      "suggest": ["-14px", "-15px", "-17px", "-18px"],
+      "introduced": "1.21.0",
+      "description": "Use to negate parent whitespace or overlap larger pieces of UI."
+    },
+    "value": "SpaceNegative200"
+  },
+  "name": "space.negative.200",
+  "path": ["space", "negative", "200"],
+  "cleanName": "space.negative.200"
+}, {
+  "attributes": {
+    "group": "spacing",
+    "state": "active",
+    "suggest": ["-19px", "-21px", "-22px", "-23px"],
+    "introduced": "1.21.0",
+    "description": "Use to negate parent whitespace or overlap larger pieces of UI."
+  },
+  "value": "-20px",
+  "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "spacing",
+      "state": "active",
+      "suggest": ["-19px", "-21px", "-22px", "-23px"],
+      "introduced": "1.21.0",
+      "description": "Use to negate parent whitespace or overlap larger pieces of UI."
+    },
+    "value": "SpaceNegative250"
+  },
+  "name": "space.negative.250",
+  "path": ["space", "negative", "250"],
+  "cleanName": "space.negative.250"
+}, {
+  "attributes": {
+    "group": "spacing",
+    "state": "active",
+    "suggest": ["-23px", "-25px", "-26px", "-27px", "-28px"],
+    "introduced": "1.21.0",
+    "description": "Use to negate parent whitespace or overlap larger pieces of UI."
+  },
+  "value": "-24px",
+  "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "spacing",
+      "state": "active",
+      "suggest": ["-23px", "-25px", "-26px", "-27px", "-28px"],
+      "introduced": "1.21.0",
+      "description": "Use to negate parent whitespace or overlap larger pieces of UI."
+    },
+    "value": "SpaceNegative300"
+  },
+  "name": "space.negative.300",
+  "path": ["space", "negative", "300"],
+  "cleanName": "space.negative.300"
+}, {
+  "attributes": {
+    "group": "spacing",
+    "state": "active",
+    "suggest": ["-28px", "-29px", "-30px", "-31px", "-33px", "-34px", "-35px"],
+    "introduced": "1.21.0",
+    "description": "Use to negate parent whitespace or overlap the largest pieces of UI."
+  },
+  "value": "-32px",
+  "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "spacing",
+      "state": "active",
+      "suggest": ["-28px", "-29px", "-30px", "-31px", "-33px", "-34px", "-35px"],
+      "introduced": "1.21.0",
+      "description": "Use to negate parent whitespace or overlap the largest pieces of UI."
+    },
+    "value": "SpaceNegative400"
+  },
+  "name": "space.negative.400",
+  "path": ["space", "negative", "400"],
+  "cleanName": "space.negative.400"
 }];
 var _default = tokens;
 exports.default = _default;

package/dist/cjs/babel-plugin/plugin.js

@@ -45,6 +45,7 @@ function plugin() {
     visitor: {
       Program: {
         enter: function enter(path, state) {
+          // @ts-expect-error TS2339: Property 'file' does not exist on type 'Hub'
           var sourceFile = path.hub.file.opts.filename;
           if (sourceFile && sourceFile.includes('node_modules')) {
             return;

package/dist/cjs/get-token-value.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var name = "@atlaskit/tokens";
-var version = "1.20.0";
+var version = "1.21.0";
 /**
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
  * resulting CSS Custom Property.

package/dist/cjs/get-token.js

@@ -9,7 +9,7 @@ var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var _constants = require("./constants");
 var name = "@atlaskit/tokens";
-var version = "1.20.0";
+var version = "1.21.0";
 /**
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
  * This should be used to implement design decisions throughout your application.

package/dist/cjs/palettes/spacing-scale.js

@@ -92,6 +92,60 @@ var baseSpacingTokens = {
     attributes: {
       group: 'spacing'
     }
+  },
+  SpaceNegative025: {
+    value: -2,
+    attributes: {
+      group: 'spacing'
+    }
+  },
+  SpaceNegative050: {
+    value: -4,
+    attributes: {
+      group: 'spacing'
+    }
+  },
+  SpaceNegative075: {
+    value: -6,
+    attributes: {
+      group: 'spacing'
+    }
+  },
+  SpaceNegative100: {
+    value: -8,
+    attributes: {
+      group: 'spacing'
+    }
+  },
+  SpaceNegative150: {
+    value: -12,
+    attributes: {
+      group: 'spacing'
+    }
+  },
+  SpaceNegative200: {
+    value: -16,
+    attributes: {
+      group: 'spacing'
+    }
+  },
+  SpaceNegative250: {
+    value: -20,
+    attributes: {
+      group: 'spacing'
+    }
+  },
+  SpaceNegative300: {
+    value: -24,
+    attributes: {
+      group: 'spacing'
+    }
+  },
+  SpaceNegative400: {
+    value: -32,
+    attributes: {
+      group: 'spacing'
+    }
   }
 };
 var spacingPalette = {

package/dist/cjs/tokens/atlassian-spacing/spacing.js

@@ -54,6 +54,35 @@ var spacing = {
     },
     '1000': {
       value: 'Space1000'
+    },
+    negative: {
+      '025': {
+        value: 'SpaceNegative025'
+      },
+      '050': {
+        value: 'SpaceNegative050'
+      },
+      '075': {
+        value: 'SpaceNegative075'
+      },
+      '100': {
+        value: 'SpaceNegative100'
+      },
+      '150': {
+        value: 'SpaceNegative150'
+      },
+      '200': {
+        value: 'SpaceNegative200'
+      },
+      '250': {
+        value: 'SpaceNegative250'
+      },
+      '300': {
+        value: 'SpaceNegative300'
+      },
+      '400': {
+        value: 'SpaceNegative400'
+      }
     }
   }
 };

package/dist/cjs/tokens/default/spacing/spacing.js

@@ -131,6 +131,89 @@ var spacing = {
         introduced: '0.12.0',
         description: 'Use for the largest pieces of UI and for layout elements.'
       }
+    },
+    negative: {
+      '025': {
+        attributes: {
+          group: 'spacing',
+          state: 'active',
+          suggest: ['-1px', '-3px'],
+          introduced: '1.21.0',
+          description: 'Use to negate parent whitespace or overlap small pieces of UI.'
+        }
+      },
+      '050': {
+        attributes: {
+          group: 'spacing',
+          state: 'active',
+          suggest: ['-3px', '-5px'],
+          introduced: '1.21.0',
+          description: 'Use to negate parent whitespace or overlap small pieces of UI.'
+        }
+      },
+      '075': {
+        attributes: {
+          group: 'spacing',
+          state: 'active',
+          suggest: ['-5px', '-7px'],
+          introduced: '1.21.0',
+          description: 'Use to negate parent whitespace or overlap small pieces of UI.'
+        }
+      },
+      '100': {
+        attributes: {
+          group: 'spacing',
+          state: 'active',
+          suggest: ['-7px', '-9px'],
+          introduced: '1.21.0',
+          description: 'Use to negate parent whitespace or overlap small pieces of UI.'
+        }
+      },
+      '150': {
+        attributes: {
+          group: 'spacing',
+          state: 'active',
+          suggest: ['-10px', '-11px', '-13px', '-14px'],
+          introduced: '1.21.0',
+          description: 'Use to negate parent whitespace or overlap larger pieces of UI.'
+        }
+      },
+      '200': {
+        attributes: {
+          group: 'spacing',
+          state: 'active',
+          suggest: ['-14px', '-15px', '-17px', '-18px'],
+          introduced: '1.21.0',
+          description: 'Use to negate parent whitespace or overlap larger pieces of UI.'
+        }
+      },
+      '250': {
+        attributes: {
+          group: 'spacing',
+          state: 'active',
+          suggest: ['-19px', '-21px', '-22px', '-23px'],
+          introduced: '1.21.0',
+          description: 'Use to negate parent whitespace or overlap larger pieces of UI.'
+        }
+      },
+      '300': {
+        attributes: {
+          group: 'spacing',
+          state: 'active',
+          suggest: ['-23px', '-25px', '-26px', '-27px', '-28px'],
+          introduced: '1.21.0',
+          description: 'Use to negate parent whitespace or overlap larger pieces of UI.'
+        }
+      },
+      '400': {
+        attributes: {
+          group: 'spacing',
+          state: 'active',
+          suggest: ['-28px', '-29px', '-30px', '-31px', '-33px', '-34px', '-35px'],
+          introduced: '1.21.0',
+          description: 'Use to negate parent whitespace or overlap the largest pieces of UI.'
+        }
+      }
     }
   }
 };