@atlaskit/tile 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/CHANGELOG.md +1 -0
  2. package/LICENSE.md +11 -0
  3. package/README.md +15 -0
  4. package/dist/cjs/index.js +13 -0
  5. package/dist/cjs/ui/index.compiled.css +96 -0
  6. package/dist/cjs/ui/index.js +118 -0
  7. package/dist/cjs/ui/types.js +1 -0
  8. package/dist/es2019/index.js +1 -0
  9. package/dist/es2019/ui/index.compiled.css +96 -0
  10. package/dist/es2019/ui/index.js +109 -0
  11. package/dist/es2019/ui/types.js +0 -0
  12. package/dist/esm/index.js +1 -0
  13. package/dist/esm/ui/index.compiled.css +96 -0
  14. package/dist/esm/ui/index.js +109 -0
  15. package/dist/esm/ui/types.js +0 -0
  16. package/dist/types/index.d.ts +2 -0
  17. package/dist/types/ui/index.d.ts +8 -0
  18. package/dist/types/ui/types.d.ts +49 -0
  19. package/dist/types-ts4.5/index.d.ts +2 -0
  20. package/dist/types-ts4.5/ui/index.d.ts +8 -0
  21. package/dist/types-ts4.5/ui/types.d.ts +49 -0
  22. package/package.json +101 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1 @@
1
+ # @atlaskit/tile
package/LICENSE.md ADDED
@@ -0,0 +1,11 @@
1
+ Copyright 2023 Atlassian Pty Ltd
2
+
3
+ Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in
4
+ compliance with the License. You may obtain a copy of the License at
5
+
6
+ http://www.apache.org/licenses/LICENSE-2.0
7
+
8
+ Unless required by applicable law or agreed to in writing, software distributed under the License is
9
+ distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
10
+ implied. See the License for the specific language governing permissions and limitations under the
11
+ License.
package/README.md ADDED
@@ -0,0 +1,15 @@
1
+ # Image
2
+
3
+ A tile is a rounded square that takes an asset (Image, Icon, Logo) and represents a noun.
4
+
5
+ ## Installation
6
+
7
+ ```sh
8
+ yarn add @atlaskit/tile
9
+ ```
10
+
11
+ ## Usage
12
+
13
+ `import Tile from '@atlaskit/tile';`
14
+
15
+ [View documentation](https://atlassian.design/components/tile/).
package/dist/cjs/index.js ADDED
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ Object.defineProperty(exports, "default", {
8
+ enumerable: true,
9
+ get: function get() {
10
+ return _index.default;
11
+ }
12
+ });
13
+ var _index = _interopRequireDefault(require("./ui/index"));
package/dist/cjs/ui/index.compiled.css ADDED
@@ -0,0 +1,96 @@
1
+
2
+ ._2rko1x1l{border-radius:25%}
3
+ ._1dqonqa1{border-style:solid}
4
+ ._1h6dmuej{border-color:var(--ds-border,#091e4224)}._18m915vq{overflow-y:hidden}
5
+ ._1bah1h6o{justify-content:center}
6
+ ._1bsb1tcg{width:24px}
7
+ ._1bsb1ylp{width:40px}
8
+ ._1bsb7vkz{width:1pc}
9
+ ._1bsbckbl{width:3pc}
10
+ ._1bsbgktf{width:20px}
11
+ ._1bsbzwfg{width:2pc}
12
+ ._1e0c116y{display:inline-flex}
13
+ ._1iia1osq div, ._bna71osq img, ._1xjx1osq span, ._17521osq svg{height:100%}
14
+ ._1iia1wug div, ._bna71wug img, ._1xjx1wug span, ._17521wug svg{height:auto}
15
+ ._1it5e4h9{border-size:var(--ds-border-width,1px)}
16
+ ._1qwg19bv div, ._mezj19bv img, ._e2oo19bv span, ._w8l519bv svg{width:10px}
17
+ ._1qwg1crf div, ._mezj1crf img, ._e2oo1crf span, ._w8l51crf svg{width:9pt}
18
+ ._1qwg1osq div, ._mezj1osq img, ._e2oo1osq span, ._w8l51osq svg{width:100%}
19
+ ._1qwg1tcg div, ._mezj1tcg img, ._e2oo1tcg span, ._w8l51tcg svg{width:24px}
20
+ ._1qwg7vkz div, ._mezj7vkz img, ._e2oo7vkz span, ._w8l57vkz svg{width:1pc}
21
+ ._1qwgdlk8 div, ._mezjdlk8 img, ._e2oodlk8 span, ._w8l5dlk8 svg{width:14px}
22
+ ._1qwggktf div, ._mezjgktf img, ._e2oogktf span, ._w8l5gktf svg{width:20px}
23
+ ._1reo15vq{overflow-x:hidden}
24
+ ._1wyb19bv{font-size:10px}
25
+ ._1wyb1crf{font-size:9pt}
26
+ ._1wyb1tcg{font-size:24px}
27
+ ._1wyb7vkz{font-size:1pc}
28
+ ._1wybdlk8{font-size:14px}
29
+ ._1wybgktf{font-size:20px}
30
+ ._4cvr1h6o{align-items:center}
31
+ ._4t3i1tcg{height:24px}
32
+ ._4t3i1ylp{height:40px}
33
+ ._4t3i7vkz{height:1pc}
34
+ ._4t3ickbl{height:3pc}
35
+ ._4t3igktf{height:20px}
36
+ ._4t3izwfg{height:2pc}
37
+ ._bfhk11bn{background-color:var(--ds-background-accent-gray-subtlest,#f1f2f4)}
38
+ ._bfhk14wj{background-color:var(--ds-background-information-bold,#0c66e4)}
39
+ ._bfhk15mt{background-color:var(--ds-background-brand-boldest,#1c2b41)}
40
+ ._bfhk190i{background-color:var(--ds-background-warning-bold,#f5cd47)}
41
+ ._bfhk1a17{background-color:var(--ds-background-accent-teal-subtler,#c6edfb)}
42
+ ._bfhk1e5c{background-color:var(--ds-background-accent-green-bolder,#1f845a)}
43
+ ._bfhk1g3m{background-color:var(--ds-background-accent-orange-subtlest,#fff3eb)}
44
+ ._bfhk1g6e{background-color:var(--ds-background-accent-orange-subtle,#fea362)}
45
+ ._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
46
+ ._bfhk1j89{background-color:var(--ds-background-accent-blue-subtle,#579dff)}
47
+ ._bfhk1jkz{background-color:var(--ds-background-accent-purple-subtler,#dfd8fd)}
48
+ ._bfhk1lri{background-color:var(--ds-background-discovery-bold,#6e5dc6)}
49
+ ._bfhk1mi6{background-color:var(--ds-background-accent-magenta-subtle,#e774bb)}
50
+ ._bfhk1nvp{background-color:var(--ds-background-discovery,#f3f0ff)}
51
+ ._bfhk1ozg{background-color:var(--ds-background-accent-yellow-subtlest,#fff7d6)}
52
+ ._bfhk1rsu{background-color:var(--ds-background-accent-green-subtle,#4bce97)}
53
+ ._bfhk1rtt{background-color:var(--ds-background-accent-red-subtler,#ffd5d2)}
54
+ ._bfhk1t05{background-color:var(--ds-background-accent-gray-subtle,#8590a2)}
55
+ ._bfhk1t1b{background-color:var(--ds-background-accent-gray-bolder,#626f86)}
56
+ ._bfhk1tzq{background-color:var(--ds-background-warning,#fff7d6)}
57
+ ._bfhk1v33{background-color:var(--ds-background-accent-gray-subtler,#dcdfe4)}
58
+ ._bfhk1vck{background-color:var(--ds-background-inverse-subtle,#00000029)}
59
+ ._bfhk1vk5{background-color:var(--ds-background-accent-red-subtlest,#ffeceb)}
60
+ ._bfhk1vop{background-color:var(--ds-background-accent-yellow-bolder,#946f00)}
61
+ ._bfhk1wnw{background-color:var(--ds-background-accent-green-subtler,#baf3db)}
62
+ ._bfhk2c8p{background-color:var(--ds-background-accent-teal-bolder,#227d9b)}
63
+ ._bfhk33gi{background-color:var(--ds-background-information,#e9f2ff)}
64
+ ._bfhk3fv2{background-color:var(--ds-background-accent-yellow-subtler,#f8e6a0)}
65
+ ._bfhk3wxy{background-color:var(--ds-background-brand-subtlest,#e9f2ff)}
66
+ ._bfhk4v9p{background-color:var(--ds-background-accent-blue-subtler,#cce0ff)}
67
+ ._bfhk7xuz{background-color:var(--ds-background-accent-teal-subtlest,#e7f9ff)}
68
+ ._bfhk8emd{background-color:var(--ds-background-success-bold,#1f845a)}
69
+ ._bfhk8tvm{background-color:var(--ds-background-accent-magenta-subtlest,#ffecf8)}
70
+ ._bfhkavxe{background-color:var(--ds-background-accent-blue-subtlest,#e9f2ff)}
71
+ ._bfhkb29m{background-color:var(--ds-background-brand-bold,#0c66e4)}
72
+ ._bfhkbq5w{background-color:var(--ds-background-accent-lime-subtle,#94c748)}
73
+ ._bfhkc3uk{background-color:var(--ds-background-accent-magenta-bolder,#ae4787)}
74
+ ._bfhkc8cv{background-color:var(--ds-background-accent-blue-bolder,#0c66e4)}
75
+ ._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
76
+ ._bfhkdh45{background-color:var(--ds-background-accent-purple-subtle,#9f8fef)}
77
+ ._bfhkf2vu{background-color:var(--ds-background-accent-orange-subtler,#fedec8)}
78
+ ._bfhkjgng{background-color:var(--ds-background-accent-orange-bolder,#c25100)}
79
+ ._bfhkkrt9{background-color:var(--ds-background-accent-red-subtle,#f87168)}
80
+ ._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
81
+ ._bfhkm890{background-color:var(--ds-background-accent-lime-subtlest,#efffd6)}
82
+ ._bfhkmv6i{background-color:var(--ds-background-success,#dcfff1)}
83
+ ._bfhkn729{background-color:var(--ds-background-accent-green-subtlest,#dcfff1)}
84
+ ._bfhkp7j4{background-color:var(--ds-background-accent-purple-subtlest,#f3f0ff)}
85
+ ._bfhkr3uz{background-color:#000}
86
+ ._bfhkry5t{background-color:var(--ds-background-accent-yellow-subtle,#f5cd47)}
87
+ ._bfhktde4{background-color:var(--ds-background-accent-lime-bolder,#5b7f24)}
88
+ ._bfhktdv8{background-color:var(--ds-background-accent-teal-subtle,#6cc3e0)}
89
+ ._bfhku67f{background-color:#fff}
90
+ ._bfhkuibq{background-color:var(--ds-background-accent-red-bolder,#c9372c)}
91
+ ._bfhkv9ra{background-color:var(--ds-background-accent-magenta-subtler,#fdd0ec)}
92
+ ._bfhkybec{background-color:var(--ds-background-danger-bold,#c9372c)}
93
+ ._bfhkygwo{background-color:var(--ds-background-accent-purple-bolder,#6e5dc6)}
94
+ ._bfhkz2ec{background-color:var(--ds-background-accent-lime-subtler,#d3f1a7)}
95
+ ._kqswh2mm{position:relative}
96
+ ._vchhusvi{box-sizing:border-box}
package/dist/cjs/ui/index.js ADDED
@@ -0,0 +1,118 @@
1
+ /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
2
+ "use strict";
3
+
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
6
+ Object.defineProperty(exports, "__esModule", {
7
+ value: true
8
+ });
9
+ exports.default = Tile;
10
+ require("./index.compiled.css");
11
+ var React = _interopRequireWildcard(require("react"));
12
+ var _runtime = require("@compiled/react/runtime");
13
+ var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
14
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
15
+ var styles = {
16
+ root: "_2rko1x1l _1reo15vq _18m915vq _kqswh2mm _1e0c116y _vchhusvi _4cvr1h6o _1bah1h6o",
17
+ border: "_1dqonqa1 _1h6dmuej _1it5e4h9",
18
+ inset: "_1iia1wug _bna71wug _1xjx1wug _17521wug",
19
+ nonInset: "_1qwg1osq _mezj1osq _e2oo1osq _w8l51osq _1iia1osq _bna71osq _1xjx1osq _17521osq"
20
+ };
21
+ var sizeMap = {
22
+ xxsmall: "_1bsb7vkz _4t3i7vkz _1wyb19bv",
23
+ xsmall: "_1bsbgktf _4t3igktf _1wyb1crf",
24
+ small: "_1bsb1tcg _4t3i1tcg _1wybdlk8",
25
+ medium: "_1bsbzwfg _4t3izwfg _1wyb7vkz",
26
+ large: "_1bsb1ylp _4t3i1ylp _1wybgktf",
27
+ xlarge: "_1bsbckbl _4t3ickbl _1wyb1tcg"
28
+ };
29
+ var insetSizeMap = {
30
+ xxsmall: "_1qwg19bv _mezj19bv _e2oo19bv _w8l519bv",
31
+ xsmall: "_1qwg1crf _mezj1crf _e2oo1crf _w8l51crf",
32
+ small: "_1qwgdlk8 _mezjdlk8 _e2oodlk8 _w8l5dlk8",
33
+ medium: "_1qwg7vkz _mezj7vkz _e2oo7vkz _w8l57vkz",
34
+ large: "_1qwggktf _mezjgktf _e2oogktf _w8l5gktf",
35
+ xlarge: "_1qwg1tcg _mezj1tcg _e2oo1tcg _w8l51tcg"
36
+ };
37
+ var backgroundColorMap = {
38
+ white: "_bfhku67f",
39
+ black: "_bfhkr3uz",
40
+ 'color.background.accent.lime.subtlest': "_bfhkm890",
41
+ 'color.background.accent.lime.subtler': "_bfhkz2ec",
42
+ 'color.background.accent.lime.subtle': "_bfhkbq5w",
43
+ 'color.background.accent.lime.bolder': "_bfhktde4",
44
+ 'color.background.accent.red.subtlest': "_bfhk1vk5",
45
+ 'color.background.accent.red.subtler': "_bfhk1rtt",
46
+ 'color.background.accent.red.subtle': "_bfhkkrt9",
47
+ 'color.background.accent.red.bolder': "_bfhkuibq",
48
+ 'color.background.accent.orange.subtlest': "_bfhk1g3m",
49
+ 'color.background.accent.orange.subtler': "_bfhkf2vu",
50
+ 'color.background.accent.orange.subtle': "_bfhk1g6e",
51
+ 'color.background.accent.orange.bolder': "_bfhkjgng",
52
+ 'color.background.accent.yellow.subtlest': "_bfhk1ozg",
53
+ 'color.background.accent.yellow.subtler': "_bfhk3fv2",
54
+ 'color.background.accent.yellow.subtle': "_bfhkry5t",
55
+ 'color.background.accent.yellow.bolder': "_bfhk1vop",
56
+ 'color.background.accent.green.subtlest': "_bfhkn729",
57
+ 'color.background.accent.green.subtler': "_bfhk1wnw",
58
+ 'color.background.accent.green.subtle': "_bfhk1rsu",
59
+ 'color.background.accent.green.bolder': "_bfhk1e5c",
60
+ 'color.background.accent.teal.subtlest': "_bfhk7xuz",
61
+ 'color.background.accent.teal.subtler': "_bfhk1a17",
62
+ 'color.background.accent.teal.subtle': "_bfhktdv8",
63
+ 'color.background.accent.teal.bolder': "_bfhk2c8p",
64
+ 'color.background.accent.blue.subtlest': "_bfhkavxe",
65
+ 'color.background.accent.blue.subtler': "_bfhk4v9p",
66
+ 'color.background.accent.blue.subtle': "_bfhk1j89",
67
+ 'color.background.accent.blue.bolder': "_bfhkc8cv",
68
+ 'color.background.accent.purple.subtlest': "_bfhkp7j4",
69
+ 'color.background.accent.purple.subtler': "_bfhk1jkz",
70
+ 'color.background.accent.purple.subtle': "_bfhkdh45",
71
+ 'color.background.accent.purple.bolder': "_bfhkygwo",
72
+ 'color.background.accent.magenta.subtlest': "_bfhk8tvm",
73
+ 'color.background.accent.magenta.subtler': "_bfhkv9ra",
74
+ 'color.background.accent.magenta.subtle': "_bfhk1mi6",
75
+ 'color.background.accent.magenta.bolder': "_bfhkc3uk",
76
+ 'color.background.accent.gray.subtlest': "_bfhk11bn",
77
+ 'color.background.accent.gray.subtler': "_bfhk1v33",
78
+ 'color.background.accent.gray.subtle': "_bfhk1t05",
79
+ 'color.background.accent.gray.bolder': "_bfhk1t1b",
80
+ 'color.background.inverse.subtle': "_bfhk1vck",
81
+ 'color.background.neutral': "_bfhkm7j4",
82
+ 'color.background.neutral.bold': "_bfhkcdhy",
83
+ 'color.background.brand.subtlest': "_bfhk3wxy",
84
+ 'color.background.brand.bold': "_bfhkb29m",
85
+ 'color.background.brand.boldest': "_bfhk15mt",
86
+ 'color.background.danger': "_bfhk1gly",
87
+ 'color.background.danger.bold': "_bfhkybec",
88
+ 'color.background.warning': "_bfhk1tzq",
89
+ 'color.background.warning.bold': "_bfhk190i",
90
+ 'color.background.success': "_bfhkmv6i",
91
+ 'color.background.success.bold': "_bfhk8emd",
92
+ 'color.background.discovery': "_bfhk1nvp",
93
+ 'color.background.discovery.bold': "_bfhk1lri",
94
+ 'color.background.information': "_bfhk33gi",
95
+ 'color.background.information.bold': "_bfhk14wj"
96
+ };
97
+
98
+ /**
99
+ * __Tile__
100
+ *
101
+ * A tile is a rounded square that takes an asset (Image, Icon, Logo) and represents a noun.
102
+ *
103
+ */
104
+ function Tile(props) {
105
+ var children = props.children,
106
+ label = props.label,
107
+ _props$size = props.size,
108
+ size = _props$size === void 0 ? 'medium' : _props$size,
109
+ backgroundColor = props.backgroundColor,
110
+ hasBorder = props.hasBorder,
111
+ _props$isInset = props.isInset,
112
+ isInset = _props$isInset === void 0 ? true : _props$isInset,
113
+ testId = props.testId;
114
+ return /*#__PURE__*/React.createElement("span", {
115
+ "data-testid": testId,
116
+ className: (0, _runtime.ax)([styles.root, sizeMap[size], isInset ? styles.inset : styles.nonInset, isInset && insetSizeMap[size], backgroundColorMap[backgroundColor || 'color.background.neutral'], hasBorder && styles.border])
117
+ }, children, /*#__PURE__*/React.createElement(_visuallyHidden.default, null, label));
118
+ }
package/dist/cjs/ui/types.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";
package/dist/es2019/index.js ADDED
@@ -0,0 +1 @@
1
+ export { default } from './ui/index';
package/dist/es2019/ui/index.compiled.css ADDED
@@ -0,0 +1,96 @@
1
+
2
+ ._2rko1x1l{border-radius:25%}
3
+ ._1dqonqa1{border-style:solid}
4
+ ._1h6dmuej{border-color:var(--ds-border,#091e4224)}._18m915vq{overflow-y:hidden}
5
+ ._1bah1h6o{justify-content:center}
6
+ ._1bsb1tcg{width:24px}
7
+ ._1bsb1ylp{width:40px}
8
+ ._1bsb7vkz{width:1pc}
9
+ ._1bsbckbl{width:3pc}
10
+ ._1bsbgktf{width:20px}
11
+ ._1bsbzwfg{width:2pc}
12
+ ._1e0c116y{display:inline-flex}
13
+ ._1iia1osq div, ._bna71osq img, ._1xjx1osq span, ._17521osq svg{height:100%}
14
+ ._1iia1wug div, ._bna71wug img, ._1xjx1wug span, ._17521wug svg{height:auto}
15
+ ._1it5e4h9{border-size:var(--ds-border-width,1px)}
16
+ ._1qwg19bv div, ._mezj19bv img, ._e2oo19bv span, ._w8l519bv svg{width:10px}
17
+ ._1qwg1crf div, ._mezj1crf img, ._e2oo1crf span, ._w8l51crf svg{width:9pt}
18
+ ._1qwg1osq div, ._mezj1osq img, ._e2oo1osq span, ._w8l51osq svg{width:100%}
19
+ ._1qwg1tcg div, ._mezj1tcg img, ._e2oo1tcg span, ._w8l51tcg svg{width:24px}
20
+ ._1qwg7vkz div, ._mezj7vkz img, ._e2oo7vkz span, ._w8l57vkz svg{width:1pc}
21
+ ._1qwgdlk8 div, ._mezjdlk8 img, ._e2oodlk8 span, ._w8l5dlk8 svg{width:14px}
22
+ ._1qwggktf div, ._mezjgktf img, ._e2oogktf span, ._w8l5gktf svg{width:20px}
23
+ ._1reo15vq{overflow-x:hidden}
24
+ ._1wyb19bv{font-size:10px}
25
+ ._1wyb1crf{font-size:9pt}
26
+ ._1wyb1tcg{font-size:24px}
27
+ ._1wyb7vkz{font-size:1pc}
28
+ ._1wybdlk8{font-size:14px}
29
+ ._1wybgktf{font-size:20px}
30
+ ._4cvr1h6o{align-items:center}
31
+ ._4t3i1tcg{height:24px}
32
+ ._4t3i1ylp{height:40px}
33
+ ._4t3i7vkz{height:1pc}
34
+ ._4t3ickbl{height:3pc}
35
+ ._4t3igktf{height:20px}
36
+ ._4t3izwfg{height:2pc}
37
+ ._bfhk11bn{background-color:var(--ds-background-accent-gray-subtlest,#f1f2f4)}
38
+ ._bfhk14wj{background-color:var(--ds-background-information-bold,#0c66e4)}
39
+ ._bfhk15mt{background-color:var(--ds-background-brand-boldest,#1c2b41)}
40
+ ._bfhk190i{background-color:var(--ds-background-warning-bold,#f5cd47)}
41
+ ._bfhk1a17{background-color:var(--ds-background-accent-teal-subtler,#c6edfb)}
42
+ ._bfhk1e5c{background-color:var(--ds-background-accent-green-bolder,#1f845a)}
43
+ ._bfhk1g3m{background-color:var(--ds-background-accent-orange-subtlest,#fff3eb)}
44
+ ._bfhk1g6e{background-color:var(--ds-background-accent-orange-subtle,#fea362)}
45
+ ._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
46
+ ._bfhk1j89{background-color:var(--ds-background-accent-blue-subtle,#579dff)}
47
+ ._bfhk1jkz{background-color:var(--ds-background-accent-purple-subtler,#dfd8fd)}
48
+ ._bfhk1lri{background-color:var(--ds-background-discovery-bold,#6e5dc6)}
49
+ ._bfhk1mi6{background-color:var(--ds-background-accent-magenta-subtle,#e774bb)}
50
+ ._bfhk1nvp{background-color:var(--ds-background-discovery,#f3f0ff)}
51
+ ._bfhk1ozg{background-color:var(--ds-background-accent-yellow-subtlest,#fff7d6)}
52
+ ._bfhk1rsu{background-color:var(--ds-background-accent-green-subtle,#4bce97)}
53
+ ._bfhk1rtt{background-color:var(--ds-background-accent-red-subtler,#ffd5d2)}
54
+ ._bfhk1t05{background-color:var(--ds-background-accent-gray-subtle,#8590a2)}
55
+ ._bfhk1t1b{background-color:var(--ds-background-accent-gray-bolder,#626f86)}
56
+ ._bfhk1tzq{background-color:var(--ds-background-warning,#fff7d6)}
57
+ ._bfhk1v33{background-color:var(--ds-background-accent-gray-subtler,#dcdfe4)}
58
+ ._bfhk1vck{background-color:var(--ds-background-inverse-subtle,#00000029)}
59
+ ._bfhk1vk5{background-color:var(--ds-background-accent-red-subtlest,#ffeceb)}
60
+ ._bfhk1vop{background-color:var(--ds-background-accent-yellow-bolder,#946f00)}
61
+ ._bfhk1wnw{background-color:var(--ds-background-accent-green-subtler,#baf3db)}
62
+ ._bfhk2c8p{background-color:var(--ds-background-accent-teal-bolder,#227d9b)}
63
+ ._bfhk33gi{background-color:var(--ds-background-information,#e9f2ff)}
64
+ ._bfhk3fv2{background-color:var(--ds-background-accent-yellow-subtler,#f8e6a0)}
65
+ ._bfhk3wxy{background-color:var(--ds-background-brand-subtlest,#e9f2ff)}
66
+ ._bfhk4v9p{background-color:var(--ds-background-accent-blue-subtler,#cce0ff)}
67
+ ._bfhk7xuz{background-color:var(--ds-background-accent-teal-subtlest,#e7f9ff)}
68
+ ._bfhk8emd{background-color:var(--ds-background-success-bold,#1f845a)}
69
+ ._bfhk8tvm{background-color:var(--ds-background-accent-magenta-subtlest,#ffecf8)}
70
+ ._bfhkavxe{background-color:var(--ds-background-accent-blue-subtlest,#e9f2ff)}
71
+ ._bfhkb29m{background-color:var(--ds-background-brand-bold,#0c66e4)}
72
+ ._bfhkbq5w{background-color:var(--ds-background-accent-lime-subtle,#94c748)}
73
+ ._bfhkc3uk{background-color:var(--ds-background-accent-magenta-bolder,#ae4787)}
74
+ ._bfhkc8cv{background-color:var(--ds-background-accent-blue-bolder,#0c66e4)}
75
+ ._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
76
+ ._bfhkdh45{background-color:var(--ds-background-accent-purple-subtle,#9f8fef)}
77
+ ._bfhkf2vu{background-color:var(--ds-background-accent-orange-subtler,#fedec8)}
78
+ ._bfhkjgng{background-color:var(--ds-background-accent-orange-bolder,#c25100)}
79
+ ._bfhkkrt9{background-color:var(--ds-background-accent-red-subtle,#f87168)}
80
+ ._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
81
+ ._bfhkm890{background-color:var(--ds-background-accent-lime-subtlest,#efffd6)}
82
+ ._bfhkmv6i{background-color:var(--ds-background-success,#dcfff1)}
83
+ ._bfhkn729{background-color:var(--ds-background-accent-green-subtlest,#dcfff1)}
84
+ ._bfhkp7j4{background-color:var(--ds-background-accent-purple-subtlest,#f3f0ff)}
85
+ ._bfhkr3uz{background-color:#000}
86
+ ._bfhkry5t{background-color:var(--ds-background-accent-yellow-subtle,#f5cd47)}
87
+ ._bfhktde4{background-color:var(--ds-background-accent-lime-bolder,#5b7f24)}
88
+ ._bfhktdv8{background-color:var(--ds-background-accent-teal-subtle,#6cc3e0)}
89
+ ._bfhku67f{background-color:#fff}
90
+ ._bfhkuibq{background-color:var(--ds-background-accent-red-bolder,#c9372c)}
91
+ ._bfhkv9ra{background-color:var(--ds-background-accent-magenta-subtler,#fdd0ec)}
92
+ ._bfhkybec{background-color:var(--ds-background-danger-bold,#c9372c)}
93
+ ._bfhkygwo{background-color:var(--ds-background-accent-purple-bolder,#6e5dc6)}
94
+ ._bfhkz2ec{background-color:var(--ds-background-accent-lime-subtler,#d3f1a7)}
95
+ ._kqswh2mm{position:relative}
96
+ ._vchhusvi{box-sizing:border-box}
package/dist/es2019/ui/index.js ADDED
@@ -0,0 +1,109 @@
1
+ /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
2
+ import "./index.compiled.css";
3
+ import * as React from 'react';
4
+ import { ax, ix } from "@compiled/react/runtime";
5
+ import VisuallyHidden from '@atlaskit/visually-hidden';
6
+ const styles = {
7
+ root: "_2rko1x1l _1reo15vq _18m915vq _kqswh2mm _1e0c116y _vchhusvi _4cvr1h6o _1bah1h6o",
8
+ border: "_1dqonqa1 _1h6dmuej _1it5e4h9",
9
+ inset: "_1iia1wug _bna71wug _1xjx1wug _17521wug",
10
+ nonInset: "_1qwg1osq _mezj1osq _e2oo1osq _w8l51osq _1iia1osq _bna71osq _1xjx1osq _17521osq"
11
+ };
12
+ const sizeMap = {
13
+ xxsmall: "_1bsb7vkz _4t3i7vkz _1wyb19bv",
14
+ xsmall: "_1bsbgktf _4t3igktf _1wyb1crf",
15
+ small: "_1bsb1tcg _4t3i1tcg _1wybdlk8",
16
+ medium: "_1bsbzwfg _4t3izwfg _1wyb7vkz",
17
+ large: "_1bsb1ylp _4t3i1ylp _1wybgktf",
18
+ xlarge: "_1bsbckbl _4t3ickbl _1wyb1tcg"
19
+ };
20
+ const insetSizeMap = {
21
+ xxsmall: "_1qwg19bv _mezj19bv _e2oo19bv _w8l519bv",
22
+ xsmall: "_1qwg1crf _mezj1crf _e2oo1crf _w8l51crf",
23
+ small: "_1qwgdlk8 _mezjdlk8 _e2oodlk8 _w8l5dlk8",
24
+ medium: "_1qwg7vkz _mezj7vkz _e2oo7vkz _w8l57vkz",
25
+ large: "_1qwggktf _mezjgktf _e2oogktf _w8l5gktf",
26
+ xlarge: "_1qwg1tcg _mezj1tcg _e2oo1tcg _w8l51tcg"
27
+ };
28
+ const backgroundColorMap = {
29
+ white: "_bfhku67f",
30
+ black: "_bfhkr3uz",
31
+ 'color.background.accent.lime.subtlest': "_bfhkm890",
32
+ 'color.background.accent.lime.subtler': "_bfhkz2ec",
33
+ 'color.background.accent.lime.subtle': "_bfhkbq5w",
34
+ 'color.background.accent.lime.bolder': "_bfhktde4",
35
+ 'color.background.accent.red.subtlest': "_bfhk1vk5",
36
+ 'color.background.accent.red.subtler': "_bfhk1rtt",
37
+ 'color.background.accent.red.subtle': "_bfhkkrt9",
38
+ 'color.background.accent.red.bolder': "_bfhkuibq",
39
+ 'color.background.accent.orange.subtlest': "_bfhk1g3m",
40
+ 'color.background.accent.orange.subtler': "_bfhkf2vu",
41
+ 'color.background.accent.orange.subtle': "_bfhk1g6e",
42
+ 'color.background.accent.orange.bolder': "_bfhkjgng",
43
+ 'color.background.accent.yellow.subtlest': "_bfhk1ozg",
44
+ 'color.background.accent.yellow.subtler': "_bfhk3fv2",
45
+ 'color.background.accent.yellow.subtle': "_bfhkry5t",
46
+ 'color.background.accent.yellow.bolder': "_bfhk1vop",
47
+ 'color.background.accent.green.subtlest': "_bfhkn729",
48
+ 'color.background.accent.green.subtler': "_bfhk1wnw",
49
+ 'color.background.accent.green.subtle': "_bfhk1rsu",
50
+ 'color.background.accent.green.bolder': "_bfhk1e5c",
51
+ 'color.background.accent.teal.subtlest': "_bfhk7xuz",
52
+ 'color.background.accent.teal.subtler': "_bfhk1a17",
53
+ 'color.background.accent.teal.subtle': "_bfhktdv8",
54
+ 'color.background.accent.teal.bolder': "_bfhk2c8p",
55
+ 'color.background.accent.blue.subtlest': "_bfhkavxe",
56
+ 'color.background.accent.blue.subtler': "_bfhk4v9p",
57
+ 'color.background.accent.blue.subtle': "_bfhk1j89",
58
+ 'color.background.accent.blue.bolder': "_bfhkc8cv",
59
+ 'color.background.accent.purple.subtlest': "_bfhkp7j4",
60
+ 'color.background.accent.purple.subtler': "_bfhk1jkz",
61
+ 'color.background.accent.purple.subtle': "_bfhkdh45",
62
+ 'color.background.accent.purple.bolder': "_bfhkygwo",
63
+ 'color.background.accent.magenta.subtlest': "_bfhk8tvm",
64
+ 'color.background.accent.magenta.subtler': "_bfhkv9ra",
65
+ 'color.background.accent.magenta.subtle': "_bfhk1mi6",
66
+ 'color.background.accent.magenta.bolder': "_bfhkc3uk",
67
+ 'color.background.accent.gray.subtlest': "_bfhk11bn",
68
+ 'color.background.accent.gray.subtler': "_bfhk1v33",
69
+ 'color.background.accent.gray.subtle': "_bfhk1t05",
70
+ 'color.background.accent.gray.bolder': "_bfhk1t1b",
71
+ 'color.background.inverse.subtle': "_bfhk1vck",
72
+ 'color.background.neutral': "_bfhkm7j4",
73
+ 'color.background.neutral.bold': "_bfhkcdhy",
74
+ 'color.background.brand.subtlest': "_bfhk3wxy",
75
+ 'color.background.brand.bold': "_bfhkb29m",
76
+ 'color.background.brand.boldest': "_bfhk15mt",
77
+ 'color.background.danger': "_bfhk1gly",
78
+ 'color.background.danger.bold': "_bfhkybec",
79
+ 'color.background.warning': "_bfhk1tzq",
80
+ 'color.background.warning.bold': "_bfhk190i",
81
+ 'color.background.success': "_bfhkmv6i",
82
+ 'color.background.success.bold': "_bfhk8emd",
83
+ 'color.background.discovery': "_bfhk1nvp",
84
+ 'color.background.discovery.bold': "_bfhk1lri",
85
+ 'color.background.information': "_bfhk33gi",
86
+ 'color.background.information.bold': "_bfhk14wj"
87
+ };
88
+
89
+ /**
90
+ * __Tile__
91
+ *
92
+ * A tile is a rounded square that takes an asset (Image, Icon, Logo) and represents a noun.
93
+ *
94
+ */
95
+ export default function Tile(props) {
96
+ const {
97
+ children,
98
+ label,
99
+ size = 'medium',
100
+ backgroundColor,
101
+ hasBorder,
102
+ isInset = true,
103
+ testId
104
+ } = props;
105
+ return /*#__PURE__*/React.createElement("span", {
106
+ "data-testid": testId,
107
+ className: ax([styles.root, sizeMap[size], isInset ? styles.inset : styles.nonInset, isInset && insetSizeMap[size], backgroundColorMap[backgroundColor || 'color.background.neutral'], hasBorder && styles.border])
108
+ }, children, /*#__PURE__*/React.createElement(VisuallyHidden, null, label));
109
+ }
package/dist/es2019/ui/types.js ADDED
File without changes
package/dist/esm/index.js ADDED
@@ -0,0 +1 @@
1
+ export { default } from './ui/index';
package/dist/esm/ui/index.compiled.css ADDED
@@ -0,0 +1,96 @@
1
+
2
+ ._2rko1x1l{border-radius:25%}
3
+ ._1dqonqa1{border-style:solid}
4
+ ._1h6dmuej{border-color:var(--ds-border,#091e4224)}._18m915vq{overflow-y:hidden}
5
+ ._1bah1h6o{justify-content:center}
6
+ ._1bsb1tcg{width:24px}
7
+ ._1bsb1ylp{width:40px}
8
+ ._1bsb7vkz{width:1pc}
9
+ ._1bsbckbl{width:3pc}
10
+ ._1bsbgktf{width:20px}
11
+ ._1bsbzwfg{width:2pc}
12
+ ._1e0c116y{display:inline-flex}
13
+ ._1iia1osq div, ._bna71osq img, ._1xjx1osq span, ._17521osq svg{height:100%}
14
+ ._1iia1wug div, ._bna71wug img, ._1xjx1wug span, ._17521wug svg{height:auto}
15
+ ._1it5e4h9{border-size:var(--ds-border-width,1px)}
16
+ ._1qwg19bv div, ._mezj19bv img, ._e2oo19bv span, ._w8l519bv svg{width:10px}
17
+ ._1qwg1crf div, ._mezj1crf img, ._e2oo1crf span, ._w8l51crf svg{width:9pt}
18
+ ._1qwg1osq div, ._mezj1osq img, ._e2oo1osq span, ._w8l51osq svg{width:100%}
19
+ ._1qwg1tcg div, ._mezj1tcg img, ._e2oo1tcg span, ._w8l51tcg svg{width:24px}
20
+ ._1qwg7vkz div, ._mezj7vkz img, ._e2oo7vkz span, ._w8l57vkz svg{width:1pc}
21
+ ._1qwgdlk8 div, ._mezjdlk8 img, ._e2oodlk8 span, ._w8l5dlk8 svg{width:14px}
22
+ ._1qwggktf div, ._mezjgktf img, ._e2oogktf span, ._w8l5gktf svg{width:20px}
23
+ ._1reo15vq{overflow-x:hidden}
24
+ ._1wyb19bv{font-size:10px}
25
+ ._1wyb1crf{font-size:9pt}
26
+ ._1wyb1tcg{font-size:24px}
27
+ ._1wyb7vkz{font-size:1pc}
28
+ ._1wybdlk8{font-size:14px}
29
+ ._1wybgktf{font-size:20px}
30
+ ._4cvr1h6o{align-items:center}
31
+ ._4t3i1tcg{height:24px}
32
+ ._4t3i1ylp{height:40px}
33
+ ._4t3i7vkz{height:1pc}
34
+ ._4t3ickbl{height:3pc}
35
+ ._4t3igktf{height:20px}
36
+ ._4t3izwfg{height:2pc}
37
+ ._bfhk11bn{background-color:var(--ds-background-accent-gray-subtlest,#f1f2f4)}
38
+ ._bfhk14wj{background-color:var(--ds-background-information-bold,#0c66e4)}
39
+ ._bfhk15mt{background-color:var(--ds-background-brand-boldest,#1c2b41)}
40
+ ._bfhk190i{background-color:var(--ds-background-warning-bold,#f5cd47)}
41
+ ._bfhk1a17{background-color:var(--ds-background-accent-teal-subtler,#c6edfb)}
42
+ ._bfhk1e5c{background-color:var(--ds-background-accent-green-bolder,#1f845a)}
43
+ ._bfhk1g3m{background-color:var(--ds-background-accent-orange-subtlest,#fff3eb)}
44
+ ._bfhk1g6e{background-color:var(--ds-background-accent-orange-subtle,#fea362)}
45
+ ._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
46
+ ._bfhk1j89{background-color:var(--ds-background-accent-blue-subtle,#579dff)}
47
+ ._bfhk1jkz{background-color:var(--ds-background-accent-purple-subtler,#dfd8fd)}
48
+ ._bfhk1lri{background-color:var(--ds-background-discovery-bold,#6e5dc6)}
49
+ ._bfhk1mi6{background-color:var(--ds-background-accent-magenta-subtle,#e774bb)}
50
+ ._bfhk1nvp{background-color:var(--ds-background-discovery,#f3f0ff)}
51
+ ._bfhk1ozg{background-color:var(--ds-background-accent-yellow-subtlest,#fff7d6)}
52
+ ._bfhk1rsu{background-color:var(--ds-background-accent-green-subtle,#4bce97)}
53
+ ._bfhk1rtt{background-color:var(--ds-background-accent-red-subtler,#ffd5d2)}
54
+ ._bfhk1t05{background-color:var(--ds-background-accent-gray-subtle,#8590a2)}
55
+ ._bfhk1t1b{background-color:var(--ds-background-accent-gray-bolder,#626f86)}
56
+ ._bfhk1tzq{background-color:var(--ds-background-warning,#fff7d6)}
57
+ ._bfhk1v33{background-color:var(--ds-background-accent-gray-subtler,#dcdfe4)}
58
+ ._bfhk1vck{background-color:var(--ds-background-inverse-subtle,#00000029)}
59
+ ._bfhk1vk5{background-color:var(--ds-background-accent-red-subtlest,#ffeceb)}
60
+ ._bfhk1vop{background-color:var(--ds-background-accent-yellow-bolder,#946f00)}
61
+ ._bfhk1wnw{background-color:var(--ds-background-accent-green-subtler,#baf3db)}
62
+ ._bfhk2c8p{background-color:var(--ds-background-accent-teal-bolder,#227d9b)}
63
+ ._bfhk33gi{background-color:var(--ds-background-information,#e9f2ff)}
64
+ ._bfhk3fv2{background-color:var(--ds-background-accent-yellow-subtler,#f8e6a0)}
65
+ ._bfhk3wxy{background-color:var(--ds-background-brand-subtlest,#e9f2ff)}
66
+ ._bfhk4v9p{background-color:var(--ds-background-accent-blue-subtler,#cce0ff)}
67
+ ._bfhk7xuz{background-color:var(--ds-background-accent-teal-subtlest,#e7f9ff)}
68
+ ._bfhk8emd{background-color:var(--ds-background-success-bold,#1f845a)}
69
+ ._bfhk8tvm{background-color:var(--ds-background-accent-magenta-subtlest,#ffecf8)}
70
+ ._bfhkavxe{background-color:var(--ds-background-accent-blue-subtlest,#e9f2ff)}
71
+ ._bfhkb29m{background-color:var(--ds-background-brand-bold,#0c66e4)}
72
+ ._bfhkbq5w{background-color:var(--ds-background-accent-lime-subtle,#94c748)}
73
+ ._bfhkc3uk{background-color:var(--ds-background-accent-magenta-bolder,#ae4787)}
74
+ ._bfhkc8cv{background-color:var(--ds-background-accent-blue-bolder,#0c66e4)}
75
+ ._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
76
+ ._bfhkdh45{background-color:var(--ds-background-accent-purple-subtle,#9f8fef)}
77
+ ._bfhkf2vu{background-color:var(--ds-background-accent-orange-subtler,#fedec8)}
78
+ ._bfhkjgng{background-color:var(--ds-background-accent-orange-bolder,#c25100)}
79
+ ._bfhkkrt9{background-color:var(--ds-background-accent-red-subtle,#f87168)}
80
+ ._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
81
+ ._bfhkm890{background-color:var(--ds-background-accent-lime-subtlest,#efffd6)}
82
+ ._bfhkmv6i{background-color:var(--ds-background-success,#dcfff1)}
83
+ ._bfhkn729{background-color:var(--ds-background-accent-green-subtlest,#dcfff1)}
84
+ ._bfhkp7j4{background-color:var(--ds-background-accent-purple-subtlest,#f3f0ff)}
85
+ ._bfhkr3uz{background-color:#000}
86
+ ._bfhkry5t{background-color:var(--ds-background-accent-yellow-subtle,#f5cd47)}
87
+ ._bfhktde4{background-color:var(--ds-background-accent-lime-bolder,#5b7f24)}
88
+ ._bfhktdv8{background-color:var(--ds-background-accent-teal-subtle,#6cc3e0)}
89
+ ._bfhku67f{background-color:#fff}
90
+ ._bfhkuibq{background-color:var(--ds-background-accent-red-bolder,#c9372c)}
91
+ ._bfhkv9ra{background-color:var(--ds-background-accent-magenta-subtler,#fdd0ec)}
92
+ ._bfhkybec{background-color:var(--ds-background-danger-bold,#c9372c)}
93
+ ._bfhkygwo{background-color:var(--ds-background-accent-purple-bolder,#6e5dc6)}
94
+ ._bfhkz2ec{background-color:var(--ds-background-accent-lime-subtler,#d3f1a7)}
95
+ ._kqswh2mm{position:relative}
96
+ ._vchhusvi{box-sizing:border-box}
package/dist/esm/ui/index.js ADDED
@@ -0,0 +1,109 @@
1
+ /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
2
+ import "./index.compiled.css";
3
+ import * as React from 'react';
4
+ import { ax, ix } from "@compiled/react/runtime";
5
+ import VisuallyHidden from '@atlaskit/visually-hidden';
6
+ var styles = {
7
+ root: "_2rko1x1l _1reo15vq _18m915vq _kqswh2mm _1e0c116y _vchhusvi _4cvr1h6o _1bah1h6o",
8
+ border: "_1dqonqa1 _1h6dmuej _1it5e4h9",
9
+ inset: "_1iia1wug _bna71wug _1xjx1wug _17521wug",
10
+ nonInset: "_1qwg1osq _mezj1osq _e2oo1osq _w8l51osq _1iia1osq _bna71osq _1xjx1osq _17521osq"
11
+ };
12
+ var sizeMap = {
13
+ xxsmall: "_1bsb7vkz _4t3i7vkz _1wyb19bv",
14
+ xsmall: "_1bsbgktf _4t3igktf _1wyb1crf",
15
+ small: "_1bsb1tcg _4t3i1tcg _1wybdlk8",
16
+ medium: "_1bsbzwfg _4t3izwfg _1wyb7vkz",
17
+ large: "_1bsb1ylp _4t3i1ylp _1wybgktf",
18
+ xlarge: "_1bsbckbl _4t3ickbl _1wyb1tcg"
19
+ };
20
+ var insetSizeMap = {
21
+ xxsmall: "_1qwg19bv _mezj19bv _e2oo19bv _w8l519bv",
22
+ xsmall: "_1qwg1crf _mezj1crf _e2oo1crf _w8l51crf",
23
+ small: "_1qwgdlk8 _mezjdlk8 _e2oodlk8 _w8l5dlk8",
24
+ medium: "_1qwg7vkz _mezj7vkz _e2oo7vkz _w8l57vkz",
25
+ large: "_1qwggktf _mezjgktf _e2oogktf _w8l5gktf",
26
+ xlarge: "_1qwg1tcg _mezj1tcg _e2oo1tcg _w8l51tcg"
27
+ };
28
+ var backgroundColorMap = {
29
+ white: "_bfhku67f",
30
+ black: "_bfhkr3uz",
31
+ 'color.background.accent.lime.subtlest': "_bfhkm890",
32
+ 'color.background.accent.lime.subtler': "_bfhkz2ec",
33
+ 'color.background.accent.lime.subtle': "_bfhkbq5w",
34
+ 'color.background.accent.lime.bolder': "_bfhktde4",
35
+ 'color.background.accent.red.subtlest': "_bfhk1vk5",
36
+ 'color.background.accent.red.subtler': "_bfhk1rtt",
37
+ 'color.background.accent.red.subtle': "_bfhkkrt9",
38
+ 'color.background.accent.red.bolder': "_bfhkuibq",
39
+ 'color.background.accent.orange.subtlest': "_bfhk1g3m",
40
+ 'color.background.accent.orange.subtler': "_bfhkf2vu",
41
+ 'color.background.accent.orange.subtle': "_bfhk1g6e",
42
+ 'color.background.accent.orange.bolder': "_bfhkjgng",
43
+ 'color.background.accent.yellow.subtlest': "_bfhk1ozg",
44
+ 'color.background.accent.yellow.subtler': "_bfhk3fv2",
45
+ 'color.background.accent.yellow.subtle': "_bfhkry5t",
46
+ 'color.background.accent.yellow.bolder': "_bfhk1vop",
47
+ 'color.background.accent.green.subtlest': "_bfhkn729",
48
+ 'color.background.accent.green.subtler': "_bfhk1wnw",
49
+ 'color.background.accent.green.subtle': "_bfhk1rsu",
50
+ 'color.background.accent.green.bolder': "_bfhk1e5c",
51
+ 'color.background.accent.teal.subtlest': "_bfhk7xuz",
52
+ 'color.background.accent.teal.subtler': "_bfhk1a17",
53
+ 'color.background.accent.teal.subtle': "_bfhktdv8",
54
+ 'color.background.accent.teal.bolder': "_bfhk2c8p",
55
+ 'color.background.accent.blue.subtlest': "_bfhkavxe",
56
+ 'color.background.accent.blue.subtler': "_bfhk4v9p",
57
+ 'color.background.accent.blue.subtle': "_bfhk1j89",
58
+ 'color.background.accent.blue.bolder': "_bfhkc8cv",
59
+ 'color.background.accent.purple.subtlest': "_bfhkp7j4",
60
+ 'color.background.accent.purple.subtler': "_bfhk1jkz",
61
+ 'color.background.accent.purple.subtle': "_bfhkdh45",
62
+ 'color.background.accent.purple.bolder': "_bfhkygwo",
63
+ 'color.background.accent.magenta.subtlest': "_bfhk8tvm",
64
+ 'color.background.accent.magenta.subtler': "_bfhkv9ra",
65
+ 'color.background.accent.magenta.subtle': "_bfhk1mi6",
66
+ 'color.background.accent.magenta.bolder': "_bfhkc3uk",
67
+ 'color.background.accent.gray.subtlest': "_bfhk11bn",
68
+ 'color.background.accent.gray.subtler': "_bfhk1v33",
69
+ 'color.background.accent.gray.subtle': "_bfhk1t05",
70
+ 'color.background.accent.gray.bolder': "_bfhk1t1b",
71
+ 'color.background.inverse.subtle': "_bfhk1vck",
72
+ 'color.background.neutral': "_bfhkm7j4",
73
+ 'color.background.neutral.bold': "_bfhkcdhy",
74
+ 'color.background.brand.subtlest': "_bfhk3wxy",
75
+ 'color.background.brand.bold': "_bfhkb29m",
76
+ 'color.background.brand.boldest': "_bfhk15mt",
77
+ 'color.background.danger': "_bfhk1gly",
78
+ 'color.background.danger.bold': "_bfhkybec",
79
+ 'color.background.warning': "_bfhk1tzq",
80
+ 'color.background.warning.bold': "_bfhk190i",
81
+ 'color.background.success': "_bfhkmv6i",
82
+ 'color.background.success.bold': "_bfhk8emd",
83
+ 'color.background.discovery': "_bfhk1nvp",
84
+ 'color.background.discovery.bold': "_bfhk1lri",
85
+ 'color.background.information': "_bfhk33gi",
86
+ 'color.background.information.bold': "_bfhk14wj"
87
+ };
88
+
89
+ /**
90
+ * __Tile__
91
+ *
92
+ * A tile is a rounded square that takes an asset (Image, Icon, Logo) and represents a noun.
93
+ *
94
+ */
95
+ export default function Tile(props) {
96
+ var children = props.children,
97
+ label = props.label,
98
+ _props$size = props.size,
99
+ size = _props$size === void 0 ? 'medium' : _props$size,
100
+ backgroundColor = props.backgroundColor,
101
+ hasBorder = props.hasBorder,
102
+ _props$isInset = props.isInset,
103
+ isInset = _props$isInset === void 0 ? true : _props$isInset,
104
+ testId = props.testId;
105
+ return /*#__PURE__*/React.createElement("span", {
106
+ "data-testid": testId,
107
+ className: ax([styles.root, sizeMap[size], isInset ? styles.inset : styles.nonInset, isInset && insetSizeMap[size], backgroundColorMap[backgroundColor || 'color.background.neutral'], hasBorder && styles.border])
108
+ }, children, /*#__PURE__*/React.createElement(VisuallyHidden, null, label));
109
+ }
package/dist/esm/ui/types.js ADDED
File without changes
package/dist/types/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { default } from './ui/index';
2
+ export { type TileProps } from './ui/types';
package/dist/types/ui/index.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { type TileProps } from './types';
2
+ /**
3
+ * __Tile__
4
+ *
5
+ * A tile is a rounded square that takes an asset (Image, Icon, Logo) and represents a noun.
6
+ *
7
+ */
8
+ export default function Tile(props: TileProps): JSX.Element;
package/dist/types/ui/types.d.ts ADDED
@@ -0,0 +1,49 @@
1
+ export type TileSize = 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
2
+ 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';
3
+ export type TileProps = {
4
+ /**
5
+ * The label for the icon.
6
+ *
7
+ * If the tile is decorative, this can be set to an empty string.
8
+ */
9
+ label: string;
10
+ /**
11
+ * The size of the tile.
12
+ *
13
+ * - `xxsmall`: 16px
14
+ * - `xsmall`: 20px
15
+ * - `small`: 24px
16
+ * - `medium`: 32px
17
+ * - `large`: 40px
18
+ * - `xlarge`: 48px
19
+ */
20
+ size?: TileSize;
21
+ /**
22
+ * Whether the tile applies internal inset / padding. Used to provide appropriate spacing for assets when needed. Defaults to `true`.
23
+ */
24
+ isInset?: boolean;
25
+ /**
26
+ * Whether the tile has a border.
27
+ *
28
+ * Defaults to `false`.
29
+ */
30
+ hasBorder?: boolean;
31
+ /**
32
+ * The background color of the tile.
33
+ *
34
+ * Accepts design tokens representing background color.
35
+ * Defaults to `color.background.neutral`.
36
+ */
37
+ backgroundColor?: TileBackgroundColor;
38
+ /**
39
+ * The asset to be displayed inside the tile.
40
+ * This should represent a noun.
41
+ */
42
+ children?: React.ReactNode;
43
+ /**
44
+ * A `testId` prop is provided for specified elements, which is a unique
45
+ * string that appears as a data attribute `data-testid` in the rendered code,
46
+ * serving as a hook for automated tests.
47
+ */
48
+ testId?: string;
49
+ };
package/dist/types-ts4.5/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { default } from './ui/index';
2
+ export { type TileProps } from './ui/types';
package/dist/types-ts4.5/ui/index.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { type TileProps } from './types';
2
+ /**
3
+ * __Tile__
4
+ *
5
+ * A tile is a rounded square that takes an asset (Image, Icon, Logo) and represents a noun.
6
+ *
7
+ */
8
+ export default function Tile(props: TileProps): JSX.Element;
package/dist/types-ts4.5/ui/types.d.ts ADDED
@@ -0,0 +1,49 @@
1
+ export type TileSize = 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
2
+ 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';
3
+ export type TileProps = {
4
+ /**
5
+ * The label for the icon.
6
+ *
7
+ * If the tile is decorative, this can be set to an empty string.
8
+ */
9
+ label: string;
10
+ /**
11
+ * The size of the tile.
12
+ *
13
+ * - `xxsmall`: 16px
14
+ * - `xsmall`: 20px
15
+ * - `small`: 24px
16
+ * - `medium`: 32px
17
+ * - `large`: 40px
18
+ * - `xlarge`: 48px
19
+ */
20
+ size?: TileSize;
21
+ /**
22
+ * Whether the tile applies internal inset / padding. Used to provide appropriate spacing for assets when needed. Defaults to `true`.
23
+ */
24
+ isInset?: boolean;
25
+ /**
26
+ * Whether the tile has a border.
27
+ *
28
+ * Defaults to `false`.
29
+ */
30
+ hasBorder?: boolean;
31
+ /**
32
+ * The background color of the tile.
33
+ *
34
+ * Accepts design tokens representing background color.
35
+ * Defaults to `color.background.neutral`.
36
+ */
37
+ backgroundColor?: TileBackgroundColor;
38
+ /**
39
+ * The asset to be displayed inside the tile.
40
+ * This should represent a noun.
41
+ */
42
+ children?: React.ReactNode;
43
+ /**
44
+ * A `testId` prop is provided for specified elements, which is a unique
45
+ * string that appears as a data attribute `data-testid` in the rendered code,
46
+ * serving as a hook for automated tests.
47
+ */
48
+ testId?: string;
49
+ };
package/package.json ADDED
@@ -0,0 +1,101 @@
1
+ {
2
+ "atlassian": {
3
+ "team": "Design System Team",
4
+ "website": {
5
+ "name": "Tile",
6
+ "category": "Images and icons",
7
+ "status": {
8
+ "type": "alpha"
9
+ }
10
+ }
11
+ },
12
+ "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
13
+ "homepage": "https://atlassian.design/components/tile/",
14
+ "main": "dist/cjs/index.js",
15
+ "module": "dist/esm/index.js",
16
+ "module:es2019": "dist/es2019/index.js",
17
+ "types": "dist/types/index.d.ts",
18
+ "typesVersions": {
19
+ ">=4.5 <5.9": {
20
+ "*": [
21
+ "dist/types-ts4.5/*",
22
+ "dist/types-ts4.5/index.d.ts"
23
+ ]
24
+ }
25
+ },
26
+ "sideEffects": [
27
+ "*.compiled.css"
28
+ ],
29
+ "atlaskit:src": "src/index.tsx",
30
+ "af:exports": {
31
+ ".": "./src/index.tsx"
32
+ },
33
+ "dependencies": {
34
+ "@atlaskit/css": "^0.13.0",
35
+ "@atlaskit/primitives": "^14.13.0",
36
+ "@atlaskit/tokens": "^6.2.0",
37
+ "@atlaskit/visually-hidden": "^3.0.0",
38
+ "@babel/runtime": "^7.0.0",
39
+ "@compiled/react": "^0.18.3"
40
+ },
41
+ "peerDependencies": {
42
+ "react": "^18.2.0"
43
+ },
44
+ "devDependencies": {
45
+ "@af/accessibility-testing": "workspace:^",
46
+ "@af/integration-testing": "workspace:^",
47
+ "@af/visual-regression": "workspace:^",
48
+ "@atlaskit/ds-lib": "^5.0.0",
49
+ "@atlaskit/ssr": "workspace:^",
50
+ "@testing-library/react": "^13.4.0",
51
+ "react-dom": "^18.2.0"
52
+ },
53
+ "techstack": {
54
+ "@atlassian/frontend": {
55
+ "code-structure": [
56
+ "tangerine-next"
57
+ ],
58
+ "import-structure": [
59
+ "atlassian-conventions"
60
+ ],
61
+ "circular-dependencies": [
62
+ "file-and-folder-level"
63
+ ]
64
+ },
65
+ "@repo/internal": {
66
+ "design-system": "v1",
67
+ "dom-events": "use-bind-event-listener",
68
+ "analytics": [
69
+ "analytics-next"
70
+ ],
71
+ "design-tokens": [
72
+ "color",
73
+ "spacing"
74
+ ],
75
+ "theming": [
76
+ "react-context"
77
+ ],
78
+ "ui-components": [
79
+ "lite-mode"
80
+ ],
81
+ "deprecation": [
82
+ "no-deprecated-imports"
83
+ ],
84
+ "styling": [
85
+ "static",
86
+ "compiled"
87
+ ],
88
+ "imports": [
89
+ "import-no-extraneous-disable-for-examples-and-docs"
90
+ ]
91
+ }
92
+ },
93
+ "name": "@atlaskit/tile",
94
+ "version": "0.1.0",
95
+ "description": "A tile is a rounded square that takes an asset (Image, Icon, Logo) and represents a noun.",
96
+ "author": "Atlassian Pty Ltd",
97
+ "license": "Apache-2.0",
98
+ "publishConfig": {
99
+ "registry": "https://registry.npmjs.org/"
100
+ }
101
+ }