@atlaskit/tile 0.1.4 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/tile
 
+## 0.2.1
+
+### Patch Changes
+
+- [`e1c9823b0b420`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e1c9823b0b420) -
+  Fixed issue with sizing of certain `@atlaskit/emoji` assets within tiles.
+- Updated dependencies
+
+## 0.2.0
+
+### Minor Changes
+
+- [`f20393c20ed30`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f20393c20ed30) -
+  Added new Tile Skeleton to act as a placeholder while content loads.
+
 ## 0.1.4
 
 ### Patch Changes
@@ -18,8 +33,8 @@
 
 ### Patch Changes
 
-- [`9e77915865d6e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9e77915865d6e) - -
-  Corrected border width
+- [`9e77915865d6e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9e77915865d6e) -
+  - Corrected border width
   - Simplified labelling method
 
 ## 0.1.1
@@ -27,5 +42,5 @@
 ### Patch Changes
 
 - [`f6b3f669a74bf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f6b3f669a74bf) -
-  Prevented tile from resizing in flex containers, to maintain correct sizing.
-- Updated dependencies
+  - Prevented tile from resizing in flex containers, to maintain correct sizing.
+  - Updated dependencies

package/README.md

@@ -1,6 +1,6 @@
 # Image
 
-A tile is a rounded square that takes an asset (Image, Icon, Logo) and represents a noun.
+A tile is a rounded square that takes an asset and represents a noun.
 
 ## Installation
 

package/constellation/index/examples.mdx

@@ -0,0 +1,68 @@
+---
+order: 1
+---
+
+import TileDefault from '../../examples/constellation/tile-default';
+import TileSizes from '../../examples/constellation/tile-sizes';
+import TileBackgroundColor from '../../examples/constellation/tile-background-color';
+import TileBackgroundColorStatic from '../../examples/constellation/tile-background-color-static';
+import TileBorder from '../../examples/constellation/tile-border';
+import TileInset from '../../examples/constellation/tile-inset';
+import TileLabelling from '../../examples/constellation/tile-labelling';
+import TileThemed from '../../examples/constellation/tile-themed';
+
+## Default
+
+The default tile has a medium size, neutral background, and inset enabled – ready to accept any asset as content.
+
+<Example Component={TileDefault} packageName="@atlaskit/tile" />
+
+## Size
+
+Tiles can be set to six different sizes using the <inlineCode>size</inlineCode> prop, from <inlineCode>xxsmall</inlineCode> (16px) to <inlineCode>xlarge</inlineCode> (48px). This defaults to <inlineCode>medium</inlineCode> (32px).
+
+<Example Component={TileSizes} packageName="@atlaskit/tile" />
+
+## Background color
+
+Tiles support a variety of background colors using the <inlineCode>backgroundColor</inlineCode> prop, which can be set to <a href="/components/tokens/all-tokens">design tokens</a>. This defaults to <inlineCode>color.background.neutral</inlineCode>.
+
+<Example Component={TileBackgroundColor} packageName="@atlaskit/tile" />
+
+### Static colors
+
+Alternatively, static <inlineCode>white</inlineCode> or <inlineCode>black</inlineCode> background colors are supported. These will not change with the color mode, unlike design tokens.
+
+<Example Component={TileBackgroundColorStatic} packageName="@atlaskit/tile" />
+
+## Border
+
+Tiles can display a border around the tile with the <inlineCode>hasBorder</inlineCode> prop. This is disabled by default.
+
+<Example Component={TileBorder} packageName="@atlaskit/tile" />
+
+## Inset
+
+Tiles can be configured with or without internal inset (padding) using <inlineCode>isInset</inlineCode>. Disabling inset can be used for supplying assets with backgrounds, such as third-party logos.
+
+Inset is enabled by default to provide appropriate spacing for assets.
+
+<Example Component={TileInset} packageName="@atlaskit/tile" />
+
+## Labelling
+
+Use the <inlineCode>label</inlineCode> prop to provide accessible labelling for tiles. Use descriptive labels for meaningful tiles, or empty strings for decorative tiles.
+
+<Example Component={TileLabelling} packageName="@atlaskit/tile" />
+
+## Themed assets
+
+Tiles can swap assets between light and dark mode, by using existing theming capabilities within the design system.
+
+This may be useful if assets need more contrast in either light or dark mode.
+
+Alternatively, suitable SVG assets that use <inlineCode>currentColor</inlineCode> will inherit tile's <inlineCode>color</inlineCode>, which is already themed using the design token <inlineCode>color.text</inlineCode>.
+
+<Example Component={TileThemed} packageName="@atlaskit/tile" appearance="source-only" />
+
+

package/constellation/index/overview.mdx

@@ -0,0 +1,78 @@
+---
+order: 0
+---
+
+import { RelatedCard, RelatedCardGrid } from '@af/design-system-docs-ui';
+import Image from '@atlaskit/image';
+import Table, { Cell, HeadCell, Row, TBody, THead } from '@atlaskit/table';
+
+import tileOverviewLight from './images/tile-overview-light.png';
+import tileOverviewDark from './images/tile-overview-dark.png';
+import objectTile from './images/object-tile-thumbnail-light.png';
+import iconTile from './images/icon-tile-thumbnail-light.png';
+
+## Tile system
+
+The tile component sets the foundation of our tile system, setting a standard for size, space, and shape properties for all tile-shaped elements within Atlassian UI.
+
+So far, the properties of tile is inherited by the following components:
+- Icon tile
+- Object tile
+
+Makers should default to using these components, but in cases where a 'custom' tile is needed (for assets such as third-party logos or emojis), the tile component can be leveraged.
+
+Together, these components make a comprehensive system that brings flexibility and consistency to our apps.
+
+<Image src={tileOverviewLight} srcDark={tileOverviewDark} alt="An overview of the components in the tile system" />
+
+
+## Tile components
+
+<Table>
+	<THead>
+		<HeadCell>Component</HeadCell>
+		<HeadCell>Description</HeadCell>
+		<HeadCell>Used for</HeadCell>
+	</THead>
+	<TBody>
+		<Row key={1}>
+			<Cell width="18%"><a href="/components/tile/examples">Tile</a></Cell>
+			<Cell>A versatile, foundational container with baked-in sizing and radii properties for displaying elements in a tile shape. It is flexible and can be used as a container to add in any foreground element, background, or color as needed.</Cell>
+			<Cell>Anything that's not an icon or object, such as emojis and third-party logos</Cell>
+		</Row>
+		<Row key={2}>
+			<Cell width="18%"><a href="/components/icon/icon-tile/examples">Icon tile</a></Cell>
+			<Cell>Allows icons to be scaled larger than 16px. It has pre-set options for color and size to ensure accessibility and readability, and to prominently highlight icons in a layout.</Cell>
+			<Cell>Icons</Cell>
+		</Row>
+		<Row key={3}>
+			<Cell width="18%"><a href="/components/object/object-tile/examples">Object tile</a></Cell>
+			<Cell>Use instead of an icon tile to represent Atlassian-specific content icons, such as pages, live docs, whiteboard, or bugs. Each object tile has a specific color token that cannot be changed.</Cell>
+			<Cell>Objects</Cell>
+		</Row>
+	</TBody>
+</Table>
+
+## Related
+
+<RelatedCardGrid>
+	<RelatedCard
+		title="Object tile"
+		description="Represents Atlassian-specific content in a tile"
+		image={{
+			src: objectTile,
+			alt: '',
+		}}
+		href="/components/object/object-tile/examples"
+	/>
+	<RelatedCard
+		title="Icon tile"
+		description="An icon with properties determined by Tile"
+		image={{
+			src: iconTile,
+			alt: '',
+		}}
+		href="/components/icon/icon-tile/examples"
+	/>
+</RelatedCardGrid>
+

package/constellation/index/props.mdx

@@ -0,0 +1,14 @@
+---
+order: 2
+props:
+  packageName: '@atlaskit/tile'
+  includeInternal: true
+  exports:
+    - default
+---
+
+import Tile from '@atlaskit/tile';
+
+## Props
+
+<TSMorphProps exportName="default" packageName="@atlaskit/tile" />

package/constellation/index/usage.mdx

@@ -0,0 +1,90 @@
+---
+order: 3
+---
+
+import SectionMessage from '@atlaskit/section-message';
+import Image from '@atlaskit/image';
+
+
+import tileAnatomyLight from './images/tile-anatomy-light.png';
+import tileAnatomyDark from './images/tile-anatomy-dark.png';
+import tileReferenceDo from './images/do-donts/tile-reference-do.png';
+import tileReferenceDont from './images/do-donts/tile-reference-dont.png';
+import tileVariantDo from './images/do-donts/tile-variant-do.png';
+import tileVariantDont from './images/do-donts/tile-variant-dont.png';
+
+## Usage
+
+<SectionMessage appearance="warning">
+	Tile should only be used if existing components (e.g. <a href="/components/icon/icon-tile/examples">Icon tile</a>, <a href="/components/object/object-tile/examples">Object tile</a>, <a href="/components/avatar/examples#square">Square Avatars</a>) do not meet your needs.
+</SectionMessage>
+
+Tile is a versatile, foundational container with baked in sizing and radii properties for displaying elements in a tile shape. It is unopinionated in its content and can be used to slot in any asset, background, color or foreground element as needed.
+
+Both <a href="/components/icon/icon-tile/examples">Icon tile</a> and <a href="/components/object/object-tile/examples">Object tile</a> inherit properties of tile ensuring a consistent and cohesive tile system across various applications.
+
+Use tiles to slot in elements such as:
+
+- Emojis
+- Third-party logos
+
+## Anatomy
+
+<Image src={tileAnatomyLight} srcDark={tileAnatomyDark} alt="Anatomy of a tile" />
+
+1. **Tile background**: By default, the inset variant has a neutral background set to <inlineCode>color.background.neutral</inlineCode>. This can be switched out with other background tokens, white, or black.
+2. **Foreground element**: Place any element within the bounds of the slot.
+
+## Best practices
+
+### Always use the correct variant
+
+- Non-inset variant: suited for full bleed assets as it allows for an end-to-end fill
+- Inset variant: use for any other content
+
+<DoDont
+	type="do"
+	image={{
+		url: tileVariantDo,
+		alt: '',
+	}}
+>
+	Use the same variant when tiles are listed or grouped.
+</DoDont>
+<DoDont
+	type="dont"
+	image={{
+		url: tileVariantDont,
+		alt: '',
+	}}
+>
+	Avoid mixing inset and non-inset variables in a group.
+</DoDont>
+
+### Reference height of adjacent content for size
+
+Tiles support a range of sizes from 16px to 48px. As a general rule when selecting size, reference the size of the tile to the height of its adjacent content for visual balance.
+
+<DoDont
+	type="do"
+	image={{
+		url: tileReferenceDo,
+		alt: '',
+	}}
+>
+	Align tile sizing to closely match the height of its adjacent content.
+</DoDont>
+<DoDont
+	type="dont"
+	image={{
+		url: tileReferenceDont,
+		alt: '',
+	}}
+>
+	Avoid selecting tile sizes smaller than the height of its adjacent content.
+</DoDont>
+
+## Related
+
+- For icons with colored backgrounds, use <a href="/components/icon/icon-tile/examples">Icon tile</a>
+- For objects in a tile, use <a href="/components/object/object-tile/examples">Object tile</a>

package/dist/cjs/entry-point/skeleton.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _skeleton.default;
+  }
+});
+var _skeleton = _interopRequireDefault(require("../skeleton"));

package/dist/cjs/index.js

@@ -4,10 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "Skeleton", {
+  enumerable: true,
+  get: function get() {
+    return _skeleton.default;
+  }
+});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
     return _tile.default;
   }
 });
-var _tile = _interopRequireDefault(require("./tile"));
+var _tile = _interopRequireDefault(require("./tile"));
+var _skeleton = _interopRequireDefault(require("./entry-point/skeleton"));

package/dist/cjs/skeleton.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TileSkeleton;
+var _react = _interopRequireDefault(require("react"));
+var _skeleton = _interopRequireDefault(require("@atlaskit/skeleton"));
+var _tile = _interopRequireDefault(require("./tile"));
+/**
+ * __Skeleton__
+ *
+ * A skeleton is the loading state for the tile component.
+ *
+ */
+function TileSkeleton(_ref) {
+  var color = _ref.color,
+    isShimmering = _ref.isShimmering,
+    shimmeringEndColor = _ref.shimmeringEndColor,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    testId = _ref.testId;
+  return /*#__PURE__*/_react.default.createElement(_tile.default, {
+    label: "",
+    size: size,
+    testId: testId,
+    backgroundColor: "transparent"
+  }, /*#__PURE__*/_react.default.createElement(_skeleton.default, {
+    color: color,
+    isShimmering: isShimmering,
+    ShimmeringEndColor: shimmeringEndColor,
+    width: '100%',
+    height: '100%',
+    testId: testId ? "".concat(testId, "--skeleton") : undefined
+  }));
+}

package/dist/cjs/tile.compiled.css

@@ -14,9 +14,21 @@
 ._1bsbgktf{width:20px}
 ._1bsbzwfg{width:2pc}
 ._1e0c116y{display:inline-flex}
+._1hdc19el .emoji-common-emoji-sprite{min-width:10px!important}
+._1hdc1gpt .emoji-common-emoji-sprite{min-width:1pc!important}
+._1hdc1txs .emoji-common-emoji-sprite{min-width:20px!important}
+._1hdca982 .emoji-common-emoji-sprite{min-width:24px!important}
+._1hdcmccc .emoji-common-emoji-sprite{min-width:9pt!important}
+._1hdcwk7l .emoji-common-emoji-sprite{min-width:14px!important}
 ._1iia1osq div{height:100%}
 ._1iia1wug div{height:auto}
 ._1o9zidpf{flex-shrink:0}
+._1pc719el .emoji-common-emoji-sprite{height:10px!important}
+._1pc71gpt .emoji-common-emoji-sprite{height:1pc!important}
+._1pc71txs .emoji-common-emoji-sprite{height:20px!important}
+._1pc7a982 .emoji-common-emoji-sprite{height:24px!important}
+._1pc7mccc .emoji-common-emoji-sprite{height:9pt!important}
+._1pc7wk7l .emoji-common-emoji-sprite{height:14px!important}
 ._1qwg19bv div{width:10px}
 ._1qwg1crf div{width:9pt}
 ._1qwg1osq div{width:100%}
@@ -42,6 +54,12 @@
 ._4t3ickbl{height:3pc}
 ._4t3igktf{height:20px}
 ._4t3izwfg{height:2pc}
+._5ile19el .emoji-common-emoji-sprite{width:10px!important}
+._5ile1gpt .emoji-common-emoji-sprite{width:1pc!important}
+._5ile1txs .emoji-common-emoji-sprite{width:20px!important}
+._5ilea982 .emoji-common-emoji-sprite{width:24px!important}
+._5ilemccc .emoji-common-emoji-sprite{width:9pt!important}
+._5ilewk7l .emoji-common-emoji-sprite{width:14px!important}
 ._bfhk11bn{background-color:var(--ds-background-accent-gray-subtlest,#f1f2f4)}
 ._bfhk14wj{background-color:var(--ds-background-information-bold,#0c66e4)}
 ._bfhk15mt{background-color:var(--ds-background-brand-boldest,#1c2b41)}
@@ -51,6 +69,7 @@
 ._bfhk1g3m{background-color:var(--ds-background-accent-orange-subtlest,#fff3eb)}
 ._bfhk1g6e{background-color:var(--ds-background-accent-orange-subtle,#fea362)}
 ._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
+._bfhk1j28{background-color:transparent}
 ._bfhk1j89{background-color:var(--ds-background-accent-blue-subtle,#579dff)}
 ._bfhk1jkz{background-color:var(--ds-background-accent-purple-subtler,#dfd8fd)}
 ._bfhk1lri{background-color:var(--ds-background-discovery-bold,#6e5dc6)}
@@ -117,6 +136,12 @@
 ._mezj7vkz img{width:1pc}
 ._mezjdlk8 img{width:14px}
 ._mezjgktf img{width:20px}
+._pkax19el .emoji-common-emoji-sprite{min-height:10px!important}
+._pkax1gpt .emoji-common-emoji-sprite{min-height:1pc!important}
+._pkax1txs .emoji-common-emoji-sprite{min-height:20px!important}
+._pkaxa982 .emoji-common-emoji-sprite{min-height:24px!important}
+._pkaxmccc .emoji-common-emoji-sprite{min-height:9pt!important}
+._pkaxwk7l .emoji-common-emoji-sprite{min-height:14px!important}
 ._vchhusvi{box-sizing:border-box}
 ._w8l519bv svg{width:10px}
 ._w8l51crf svg{width:9pt}

package/dist/cjs/tile.js

@@ -1,4 +1,5 @@
 /* tile.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* eslint-disable @atlaskit/ui-styling-standard/no-important-styles */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -25,16 +26,17 @@ var sizeMap = {
   xlarge: "_1bsbckbl _4t3ickbl _1wyb1tcg"
 };
 var insetSizeMap = {
-  xxsmall: "_1qwg19bv _mezj19bv _e2oo19bv _w8l519bv",
-  xsmall: "_1qwg1crf _mezj1crf _e2oo1crf _w8l51crf",
-  small: "_1qwgdlk8 _mezjdlk8 _e2oodlk8 _w8l5dlk8",
-  medium: "_1qwg7vkz _mezj7vkz _e2oo7vkz _w8l57vkz",
-  large: "_1qwggktf _mezjgktf _e2oogktf _w8l5gktf",
-  xlarge: "_1qwg1tcg _mezj1tcg _e2oo1tcg _w8l51tcg"
+  xxsmall: "_1qwg19bv _mezj19bv _e2oo19bv _w8l519bv _5ile19el _1hdc19el _1pc719el _pkax19el",
+  xsmall: "_1qwg1crf _mezj1crf _e2oo1crf _w8l51crf _5ilemccc _1hdcmccc _1pc7mccc _pkaxmccc",
+  small: "_1qwgdlk8 _mezjdlk8 _e2oodlk8 _w8l5dlk8 _5ilewk7l _1hdcwk7l _1pc7wk7l _pkaxwk7l",
+  medium: "_1qwg7vkz _mezj7vkz _e2oo7vkz _w8l57vkz _5ile1gpt _1hdc1gpt _1pc71gpt _pkax1gpt",
+  large: "_1qwggktf _mezjgktf _e2oogktf _w8l5gktf _5ile1txs _1hdc1txs _1pc71txs _pkax1txs",
+  xlarge: "_1qwg1tcg _mezj1tcg _e2oo1tcg _w8l51tcg _5ilea982 _1hdca982 _1pc7a982 _pkaxa982"
 };
 var backgroundColorMap = {
   white: "_bfhku67f",
   black: "_bfhkr3uz",
+  transparent: "_bfhk1j28",
   'color.background.accent.lime.subtlest': "_bfhkm890",
   'color.background.accent.lime.subtler': "_bfhkz2ec",
   'color.background.accent.lime.subtle': "_bfhkbq5w",
@@ -96,7 +98,7 @@ var backgroundColorMap = {
 /**
  * __Tile__
  *
- * A tile is a rounded square that takes an asset (Image, Icon, Logo) and represents a noun.
+ * A tile is a rounded square that takes an asset and represents a noun.
  *
  */
 function Tile(props) {
@@ -111,6 +113,7 @@ function Tile(props) {
     testId = props.testId;
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": testId,
+    // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-jsx
     "aria-label": label !== '' ? label : undefined,
     role: label !== '' ? 'img' : undefined,
     className: (0, _runtime.ax)([styles.root, sizeMap[size], isInset ? styles.inset : styles.nonInset, isInset && insetSizeMap[size], backgroundColorMap[backgroundColor || 'color.background.neutral'], hasBorder && styles.border])

package/dist/es2019/entry-point/skeleton.js

@@ -0,0 +1 @@
+export { default } from '../skeleton';

package/dist/es2019/index.js

@@ -1 +1,2 @@
-export { default } from './tile';
+export { default } from './tile';
+export { default as Skeleton } from './entry-point/skeleton';

package/dist/es2019/skeleton.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import Skeleton from '@atlaskit/skeleton';
+import Tile from './tile';
+/**
+ * __Skeleton__
+ *
+ * A skeleton is the loading state for the tile component.
+ *
+ */
+export default function TileSkeleton({
+  color,
+  isShimmering,
+  shimmeringEndColor,
+  size = 'medium',
+  testId
+}) {
+  return /*#__PURE__*/React.createElement(Tile, {
+    label: "",
+    size: size,
+    testId: testId,
+    backgroundColor: "transparent"
+  }, /*#__PURE__*/React.createElement(Skeleton, {
+    color: color,
+    isShimmering: isShimmering,
+    ShimmeringEndColor: shimmeringEndColor,
+    width: '100%',
+    height: '100%',
+    testId: testId ? `${testId}--skeleton` : undefined
+  }));
+}

package/dist/es2019/tile.compiled.css

@@ -14,9 +14,21 @@
 ._1bsbgktf{width:20px}
 ._1bsbzwfg{width:2pc}
 ._1e0c116y{display:inline-flex}
+._1hdc19el .emoji-common-emoji-sprite{min-width:10px!important}
+._1hdc1gpt .emoji-common-emoji-sprite{min-width:1pc!important}
+._1hdc1txs .emoji-common-emoji-sprite{min-width:20px!important}
+._1hdca982 .emoji-common-emoji-sprite{min-width:24px!important}
+._1hdcmccc .emoji-common-emoji-sprite{min-width:9pt!important}
+._1hdcwk7l .emoji-common-emoji-sprite{min-width:14px!important}
 ._1iia1osq div{height:100%}
 ._1iia1wug div{height:auto}
 ._1o9zidpf{flex-shrink:0}
+._1pc719el .emoji-common-emoji-sprite{height:10px!important}
+._1pc71gpt .emoji-common-emoji-sprite{height:1pc!important}
+._1pc71txs .emoji-common-emoji-sprite{height:20px!important}
+._1pc7a982 .emoji-common-emoji-sprite{height:24px!important}
+._1pc7mccc .emoji-common-emoji-sprite{height:9pt!important}
+._1pc7wk7l .emoji-common-emoji-sprite{height:14px!important}
 ._1qwg19bv div{width:10px}
 ._1qwg1crf div{width:9pt}
 ._1qwg1osq div{width:100%}
@@ -42,6 +54,12 @@
 ._4t3ickbl{height:3pc}
 ._4t3igktf{height:20px}
 ._4t3izwfg{height:2pc}
+._5ile19el .emoji-common-emoji-sprite{width:10px!important}
+._5ile1gpt .emoji-common-emoji-sprite{width:1pc!important}
+._5ile1txs .emoji-common-emoji-sprite{width:20px!important}
+._5ilea982 .emoji-common-emoji-sprite{width:24px!important}
+._5ilemccc .emoji-common-emoji-sprite{width:9pt!important}
+._5ilewk7l .emoji-common-emoji-sprite{width:14px!important}
 ._bfhk11bn{background-color:var(--ds-background-accent-gray-subtlest,#f1f2f4)}
 ._bfhk14wj{background-color:var(--ds-background-information-bold,#0c66e4)}
 ._bfhk15mt{background-color:var(--ds-background-brand-boldest,#1c2b41)}
@@ -51,6 +69,7 @@
 ._bfhk1g3m{background-color:var(--ds-background-accent-orange-subtlest,#fff3eb)}
 ._bfhk1g6e{background-color:var(--ds-background-accent-orange-subtle,#fea362)}
 ._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
+._bfhk1j28{background-color:transparent}
 ._bfhk1j89{background-color:var(--ds-background-accent-blue-subtle,#579dff)}
 ._bfhk1jkz{background-color:var(--ds-background-accent-purple-subtler,#dfd8fd)}
 ._bfhk1lri{background-color:var(--ds-background-discovery-bold,#6e5dc6)}
@@ -117,6 +136,12 @@
 ._mezj7vkz img{width:1pc}
 ._mezjdlk8 img{width:14px}
 ._mezjgktf img{width:20px}
+._pkax19el .emoji-common-emoji-sprite{min-height:10px!important}
+._pkax1gpt .emoji-common-emoji-sprite{min-height:1pc!important}
+._pkax1txs .emoji-common-emoji-sprite{min-height:20px!important}
+._pkaxa982 .emoji-common-emoji-sprite{min-height:24px!important}
+._pkaxmccc .emoji-common-emoji-sprite{min-height:9pt!important}
+._pkaxwk7l .emoji-common-emoji-sprite{min-height:14px!important}
 ._vchhusvi{box-sizing:border-box}
 ._w8l519bv svg{width:10px}
 ._w8l51crf svg{width:9pt}

package/dist/es2019/tile.js

@@ -1,4 +1,5 @@
 /* tile.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* eslint-disable @atlaskit/ui-styling-standard/no-important-styles */
 import "./tile.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -17,16 +18,17 @@ const sizeMap = {
   xlarge: "_1bsbckbl _4t3ickbl _1wyb1tcg"
 };
 const insetSizeMap = {
-  xxsmall: "_1qwg19bv _mezj19bv _e2oo19bv _w8l519bv",
-  xsmall: "_1qwg1crf _mezj1crf _e2oo1crf _w8l51crf",
-  small: "_1qwgdlk8 _mezjdlk8 _e2oodlk8 _w8l5dlk8",
-  medium: "_1qwg7vkz _mezj7vkz _e2oo7vkz _w8l57vkz",
-  large: "_1qwggktf _mezjgktf _e2oogktf _w8l5gktf",
-  xlarge: "_1qwg1tcg _mezj1tcg _e2oo1tcg _w8l51tcg"
+  xxsmall: "_1qwg19bv _mezj19bv _e2oo19bv _w8l519bv _5ile19el _1hdc19el _1pc719el _pkax19el",
+  xsmall: "_1qwg1crf _mezj1crf _e2oo1crf _w8l51crf _5ilemccc _1hdcmccc _1pc7mccc _pkaxmccc",
+  small: "_1qwgdlk8 _mezjdlk8 _e2oodlk8 _w8l5dlk8 _5ilewk7l _1hdcwk7l _1pc7wk7l _pkaxwk7l",
+  medium: "_1qwg7vkz _mezj7vkz _e2oo7vkz _w8l57vkz _5ile1gpt _1hdc1gpt _1pc71gpt _pkax1gpt",
+  large: "_1qwggktf _mezjgktf _e2oogktf _w8l5gktf _5ile1txs _1hdc1txs _1pc71txs _pkax1txs",
+  xlarge: "_1qwg1tcg _mezj1tcg _e2oo1tcg _w8l51tcg _5ilea982 _1hdca982 _1pc7a982 _pkaxa982"
 };
 const backgroundColorMap = {
   white: "_bfhku67f",
   black: "_bfhkr3uz",
+  transparent: "_bfhk1j28",
   'color.background.accent.lime.subtlest': "_bfhkm890",
   'color.background.accent.lime.subtler': "_bfhkz2ec",
   'color.background.accent.lime.subtle': "_bfhkbq5w",
@@ -88,7 +90,7 @@ const backgroundColorMap = {
 /**
  * __Tile__
  *
- * A tile is a rounded square that takes an asset (Image, Icon, Logo) and represents a noun.
+ * A tile is a rounded square that takes an asset and represents a noun.
  *
  */
 export default function Tile(props) {
@@ -103,6 +105,7 @@ export default function Tile(props) {
   } = props;
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": testId,
+    // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-jsx
     "aria-label": label !== '' ? label : undefined,
     role: label !== '' ? 'img' : undefined,
     className: ax([styles.root, sizeMap[size], isInset ? styles.inset : styles.nonInset, isInset && insetSizeMap[size], backgroundColorMap[backgroundColor || 'color.background.neutral'], hasBorder && styles.border])

package/dist/esm/entry-point/skeleton.js

@@ -0,0 +1 @@
+export { default } from '../skeleton';

package/dist/esm/index.js

@@ -1 +1,2 @@
-export { default } from './tile';
+export { default } from './tile';
+export { default as Skeleton } from './entry-point/skeleton';

package/dist/esm/skeleton.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import Skeleton from '@atlaskit/skeleton';
+import Tile from './tile';
+/**
+ * __Skeleton__
+ *
+ * A skeleton is the loading state for the tile component.
+ *
+ */
+export default function TileSkeleton(_ref) {
+  var color = _ref.color,
+    isShimmering = _ref.isShimmering,
+    shimmeringEndColor = _ref.shimmeringEndColor,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(Tile, {
+    label: "",
+    size: size,
+    testId: testId,
+    backgroundColor: "transparent"
+  }, /*#__PURE__*/React.createElement(Skeleton, {
+    color: color,
+    isShimmering: isShimmering,
+    ShimmeringEndColor: shimmeringEndColor,
+    width: '100%',
+    height: '100%',
+    testId: testId ? "".concat(testId, "--skeleton") : undefined
+  }));
+}

package/dist/esm/tile.compiled.css

@@ -14,9 +14,21 @@
 ._1bsbgktf{width:20px}
 ._1bsbzwfg{width:2pc}
 ._1e0c116y{display:inline-flex}
+._1hdc19el .emoji-common-emoji-sprite{min-width:10px!important}
+._1hdc1gpt .emoji-common-emoji-sprite{min-width:1pc!important}
+._1hdc1txs .emoji-common-emoji-sprite{min-width:20px!important}
+._1hdca982 .emoji-common-emoji-sprite{min-width:24px!important}
+._1hdcmccc .emoji-common-emoji-sprite{min-width:9pt!important}
+._1hdcwk7l .emoji-common-emoji-sprite{min-width:14px!important}
 ._1iia1osq div{height:100%}
 ._1iia1wug div{height:auto}
 ._1o9zidpf{flex-shrink:0}
+._1pc719el .emoji-common-emoji-sprite{height:10px!important}
+._1pc71gpt .emoji-common-emoji-sprite{height:1pc!important}
+._1pc71txs .emoji-common-emoji-sprite{height:20px!important}
+._1pc7a982 .emoji-common-emoji-sprite{height:24px!important}
+._1pc7mccc .emoji-common-emoji-sprite{height:9pt!important}
+._1pc7wk7l .emoji-common-emoji-sprite{height:14px!important}
 ._1qwg19bv div{width:10px}
 ._1qwg1crf div{width:9pt}
 ._1qwg1osq div{width:100%}
@@ -42,6 +54,12 @@
 ._4t3ickbl{height:3pc}
 ._4t3igktf{height:20px}
 ._4t3izwfg{height:2pc}
+._5ile19el .emoji-common-emoji-sprite{width:10px!important}
+._5ile1gpt .emoji-common-emoji-sprite{width:1pc!important}
+._5ile1txs .emoji-common-emoji-sprite{width:20px!important}
+._5ilea982 .emoji-common-emoji-sprite{width:24px!important}
+._5ilemccc .emoji-common-emoji-sprite{width:9pt!important}
+._5ilewk7l .emoji-common-emoji-sprite{width:14px!important}
 ._bfhk11bn{background-color:var(--ds-background-accent-gray-subtlest,#f1f2f4)}
 ._bfhk14wj{background-color:var(--ds-background-information-bold,#0c66e4)}
 ._bfhk15mt{background-color:var(--ds-background-brand-boldest,#1c2b41)}
@@ -51,6 +69,7 @@
 ._bfhk1g3m{background-color:var(--ds-background-accent-orange-subtlest,#fff3eb)}
 ._bfhk1g6e{background-color:var(--ds-background-accent-orange-subtle,#fea362)}
 ._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
+._bfhk1j28{background-color:transparent}
 ._bfhk1j89{background-color:var(--ds-background-accent-blue-subtle,#579dff)}
 ._bfhk1jkz{background-color:var(--ds-background-accent-purple-subtler,#dfd8fd)}
 ._bfhk1lri{background-color:var(--ds-background-discovery-bold,#6e5dc6)}
@@ -117,6 +136,12 @@
 ._mezj7vkz img{width:1pc}
 ._mezjdlk8 img{width:14px}
 ._mezjgktf img{width:20px}
+._pkax19el .emoji-common-emoji-sprite{min-height:10px!important}
+._pkax1gpt .emoji-common-emoji-sprite{min-height:1pc!important}
+._pkax1txs .emoji-common-emoji-sprite{min-height:20px!important}
+._pkaxa982 .emoji-common-emoji-sprite{min-height:24px!important}
+._pkaxmccc .emoji-common-emoji-sprite{min-height:9pt!important}
+._pkaxwk7l .emoji-common-emoji-sprite{min-height:14px!important}
 ._vchhusvi{box-sizing:border-box}
 ._w8l519bv svg{width:10px}
 ._w8l51crf svg{width:9pt}

package/dist/esm/tile.js

@@ -1,4 +1,5 @@
 /* tile.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* eslint-disable @atlaskit/ui-styling-standard/no-important-styles */
 import "./tile.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -17,16 +18,17 @@ var sizeMap = {
   xlarge: "_1bsbckbl _4t3ickbl _1wyb1tcg"
 };
 var insetSizeMap = {
-  xxsmall: "_1qwg19bv _mezj19bv _e2oo19bv _w8l519bv",
-  xsmall: "_1qwg1crf _mezj1crf _e2oo1crf _w8l51crf",
-  small: "_1qwgdlk8 _mezjdlk8 _e2oodlk8 _w8l5dlk8",
-  medium: "_1qwg7vkz _mezj7vkz _e2oo7vkz _w8l57vkz",
-  large: "_1qwggktf _mezjgktf _e2oogktf _w8l5gktf",
-  xlarge: "_1qwg1tcg _mezj1tcg _e2oo1tcg _w8l51tcg"
+  xxsmall: "_1qwg19bv _mezj19bv _e2oo19bv _w8l519bv _5ile19el _1hdc19el _1pc719el _pkax19el",
+  xsmall: "_1qwg1crf _mezj1crf _e2oo1crf _w8l51crf _5ilemccc _1hdcmccc _1pc7mccc _pkaxmccc",
+  small: "_1qwgdlk8 _mezjdlk8 _e2oodlk8 _w8l5dlk8 _5ilewk7l _1hdcwk7l _1pc7wk7l _pkaxwk7l",
+  medium: "_1qwg7vkz _mezj7vkz _e2oo7vkz _w8l57vkz _5ile1gpt _1hdc1gpt _1pc71gpt _pkax1gpt",
+  large: "_1qwggktf _mezjgktf _e2oogktf _w8l5gktf _5ile1txs _1hdc1txs _1pc71txs _pkax1txs",
+  xlarge: "_1qwg1tcg _mezj1tcg _e2oo1tcg _w8l51tcg _5ilea982 _1hdca982 _1pc7a982 _pkaxa982"
 };
 var backgroundColorMap = {
   white: "_bfhku67f",
   black: "_bfhkr3uz",
+  transparent: "_bfhk1j28",
   'color.background.accent.lime.subtlest': "_bfhkm890",
   'color.background.accent.lime.subtler': "_bfhkz2ec",
   'color.background.accent.lime.subtle': "_bfhkbq5w",
@@ -88,7 +90,7 @@ var backgroundColorMap = {
 /**
  * __Tile__
  *
- * A tile is a rounded square that takes an asset (Image, Icon, Logo) and represents a noun.
+ * A tile is a rounded square that takes an asset and represents a noun.
  *
  */
 export default function Tile(props) {
@@ -103,6 +105,7 @@ export default function Tile(props) {
     testId = props.testId;
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": testId,
+    // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-jsx
     "aria-label": label !== '' ? label : undefined,
     role: label !== '' ? 'img' : undefined,
     className: ax([styles.root, sizeMap[size], isInset ? styles.inset : styles.nonInset, isInset && insetSizeMap[size], backgroundColorMap[backgroundColor || 'color.background.neutral'], hasBorder && styles.border])

package/dist/types/entry-point/skeleton.d.ts

@@ -0,0 +1,2 @@
+export { default } from '../skeleton';
+export { type SkeletonProps } from '../types';

package/dist/types/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './tile';
 export { type TileProps } from './types';
+export { default as Skeleton, type SkeletonProps } from './entry-point/skeleton';

package/dist/types/skeleton.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { SkeletonProps } from './types';
+/**
+ * __Skeleton__
+ *
+ * A skeleton is the loading state for the tile component.
+ *
+ */
+export default function TileSkeleton({ color, isShimmering, shimmeringEndColor, size, testId, }: SkeletonProps): React.JSX.Element;

package/dist/types/tile.d.ts

@@ -2,7 +2,7 @@ import { type TileProps } from './types';
 /**
  * __Tile__
  *
- * A tile is a rounded square that takes an asset (Image, Icon, Logo) and represents a noun.
+ * A tile is a rounded square that takes an asset and represents a noun.
  *
  */
 export default function Tile(props: TileProps): JSX.Element;

package/dist/types/types.d.ts

@@ -1,5 +1,5 @@
 export type TileSize = 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-export type TileBackgroundColor = 'color.background.accent.lime.subtlest' | 'color.background.accent.lime.subtler' | 'color.background.accent.lime.subtle' | 'color.background.accent.lime.bolder' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.bolder' | 'color.background.inverse.subtle' | 'color.background.neutral' | 'color.background.neutral.bold' | 'color.background.brand.subtlest' | 'color.background.brand.bold' | 'color.background.brand.boldest' | 'color.background.danger' | 'color.background.danger.bold' | 'color.background.warning' | 'color.background.warning.bold' | 'color.background.success' | 'color.background.success.bold' | 'color.background.discovery' | 'color.background.discovery.bold' | 'color.background.information' | 'color.background.information.bold' | 'white' | 'black';
+export type TileBackgroundColor = 'color.background.accent.lime.subtlest' | 'color.background.accent.lime.subtler' | 'color.background.accent.lime.subtle' | 'color.background.accent.lime.bolder' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.bolder' | 'color.background.inverse.subtle' | 'color.background.neutral' | 'color.background.neutral.bold' | 'color.background.brand.subtlest' | 'color.background.brand.bold' | 'color.background.brand.boldest' | 'color.background.danger' | 'color.background.danger.bold' | 'color.background.warning' | 'color.background.warning.bold' | 'color.background.success' | 'color.background.success.bold' | 'color.background.discovery' | 'color.background.discovery.bold' | 'color.background.information' | 'color.background.information.bold' | 'transparent' | 'white' | 'black';
 export type TileProps = {
     /**
      * The label for the icon.
@@ -47,3 +47,24 @@ export type TileProps = {
      */
     testId?: string;
 };
+export type SkeletonProps = {
+    /**
+     * Overrides the default color of skeleton, and overrides the default shimmering start color if ShimmeringEndColor also provided.
+     */
+    color?: string;
+    /**
+     * Overrides the default shimmering ending color of skeleton.
+     */
+    shimmeringEndColor?: string;
+    /**
+     * Enables the shimmering animation.
+     */
+    isShimmering?: boolean;
+    size?: TileProps['size'];
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
+};

package/dist/types-ts4.5/entry-point/skeleton.d.ts

@@ -0,0 +1,2 @@
+export { default } from '../skeleton';
+export { type SkeletonProps } from '../types';

package/dist/types-ts4.5/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './tile';
 export { type TileProps } from './types';
+export { default as Skeleton, type SkeletonProps } from './entry-point/skeleton';

package/dist/types-ts4.5/skeleton.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { SkeletonProps } from './types';
+/**
+ * __Skeleton__
+ *
+ * A skeleton is the loading state for the tile component.
+ *
+ */
+export default function TileSkeleton({ color, isShimmering, shimmeringEndColor, size, testId, }: SkeletonProps): React.JSX.Element;

package/dist/types-ts4.5/tile.d.ts

@@ -2,7 +2,7 @@ import { type TileProps } from './types';
 /**
  * __Tile__
  *
- * A tile is a rounded square that takes an asset (Image, Icon, Logo) and represents a noun.
+ * A tile is a rounded square that takes an asset and represents a noun.
  *
  */
 export default function Tile(props: TileProps): JSX.Element;

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

@@ -1,5 +1,5 @@
 export type TileSize = 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-export type TileBackgroundColor = 'color.background.accent.lime.subtlest' | 'color.background.accent.lime.subtler' | 'color.background.accent.lime.subtle' | 'color.background.accent.lime.bolder' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.bolder' | 'color.background.inverse.subtle' | 'color.background.neutral' | 'color.background.neutral.bold' | 'color.background.brand.subtlest' | 'color.background.brand.bold' | 'color.background.brand.boldest' | 'color.background.danger' | 'color.background.danger.bold' | 'color.background.warning' | 'color.background.warning.bold' | 'color.background.success' | 'color.background.success.bold' | 'color.background.discovery' | 'color.background.discovery.bold' | 'color.background.information' | 'color.background.information.bold' | 'white' | 'black';
+export type TileBackgroundColor = 'color.background.accent.lime.subtlest' | 'color.background.accent.lime.subtler' | 'color.background.accent.lime.subtle' | 'color.background.accent.lime.bolder' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.bolder' | 'color.background.inverse.subtle' | 'color.background.neutral' | 'color.background.neutral.bold' | 'color.background.brand.subtlest' | 'color.background.brand.bold' | 'color.background.brand.boldest' | 'color.background.danger' | 'color.background.danger.bold' | 'color.background.warning' | 'color.background.warning.bold' | 'color.background.success' | 'color.background.success.bold' | 'color.background.discovery' | 'color.background.discovery.bold' | 'color.background.information' | 'color.background.information.bold' | 'transparent' | 'white' | 'black';
 export type TileProps = {
     /**
      * The label for the icon.
@@ -47,3 +47,24 @@ export type TileProps = {
      */
     testId?: string;
 };
+export type SkeletonProps = {
+    /**
+     * Overrides the default color of skeleton, and overrides the default shimmering start color if ShimmeringEndColor also provided.
+     */
+    color?: string;
+    /**
+     * Overrides the default shimmering ending color of skeleton.
+     */
+    shimmeringEndColor?: string;
+    /**
+     * Enables the shimmering animation.
+     */
+    isShimmering?: boolean;
+    size?: TileProps['size'];
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
+};

package/package.json

@@ -3,10 +3,7 @@
 		"team": "Design System Team",
 		"website": {
 			"name": "Tile",
-			"category": "Images and icons",
-			"status": {
-				"type": "alpha"
-			}
+			"category": "Images and icons"
 		}
 	},
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
@@ -28,7 +25,8 @@
 	],
 	"atlaskit:src": "src/index.tsx",
 	"dependencies": {
-		"@atlaskit/tokens": "^6.3.0",
+		"@atlaskit/skeleton": "^2.1.0",
+		"@atlaskit/tokens": "^6.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3"
 	},
@@ -82,8 +80,8 @@
 		}
 	},
 	"name": "@atlaskit/tile",
-	"version": "0.1.4",
-	"description": "A tile is a rounded square that takes an asset (Image, Icon, Logo) and represents a noun.",
+	"version": "0.2.1",
+	"description": "A tile is a rounded square that takes an asset and represents a noun.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
 	"publishConfig": {

package/skeleton/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/tile/skeleton",
+  "main": "../dist/cjs/entry-point/skeleton.js",
+  "module": "../dist/esm/entry-point/skeleton.js",
+  "module:es2019": "../dist/es2019/entry-point/skeleton.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/entry-point/skeleton.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/entry-point/skeleton.d.ts"
+      ]
+    }
+  }
+}