@desynova-digital/components 9.2.2 → 9.2.4

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 (10) hide show
  1. package/atoms/cardV2/cardV2.js +3 -2
  2. package/atoms/cardV2/contentV2.js +42 -20
  3. package/atoms/cardV2/thumbnailV2.js +1 -1
  4. package/atoms/icon/icon.story.js +230 -203
  5. package/atoms/icon/icons.json +1 -1
  6. package/atoms/timeCodeInput/timeCodeMSInput.js +6 -4
  7. package/atoms/timeCodeInput/timeCodeMainInput.js +6 -4
  8. package/atoms/timeCodeInput/timeCodeStandardInput.js +6 -4
  9. package/molecules/richTextInputV2/RichTextInputV2.js +10 -2
  10. package/package.json +2 -2
package/atoms/icon/icon.story.js CHANGED
@@ -1,11 +1,14 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
4
5
  var _react = _interopRequireDefault(require("react"));
5
6
  var _react2 = require("@storybook/react");
6
7
  var _storyHelpers = require("../../_helpers/story-helpers");
7
8
  var _components = require("../../components");
8
9
  var _icons = require("./icons.json");
10
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
11
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
9
12
  var iconsArr = Object.keys(_icons.icons).map(function (icon) {
10
13
  var iconObj = {
11
14
  name: icon,
@@ -14,831 +17,855 @@ var iconsArr = Object.keys(_icons.icons).map(function (icon) {
14
17
  };
15
18
  return iconObj;
16
19
  });
17
- console.log(iconsArr);
18
- (0, _react2.storiesOf)('Icon').add('default', function () {
20
+ var IconWithTooltip = function IconWithTooltip(_ref) {
21
+ var name = _ref.name,
22
+ width = _ref.width,
23
+ height = _ref.height,
24
+ color = _ref.color,
25
+ stroke = _ref.stroke;
26
+ return /*#__PURE__*/_react["default"].createElement("div", {
27
+ title: name,
28
+ style: {
29
+ display: "inline-flex"
30
+ }
31
+ }, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
32
+ name: name,
33
+ width: width,
34
+ height: height,
35
+ color: color,
36
+ stroke: stroke
37
+ }));
38
+ };
39
+ var ScrollableWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-wrap: wrap;\n gap: 16px;\n padding: 20px;\n max-height: 80vh;\n overflow-y: auto;\n background: #121d29;\n border-radius: 8px;\n\n &::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n }\n\n &::-webkit-scrollbar-track {\n background: #2c2c2c;\n border-radius: 4px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #555;\n border-radius: 4px;\n }\n\n &::-webkit-scrollbar-thumb:hover {\n background: #777;\n }\n"])));
40
+ var IconWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 12px;\n background: rgba(19, 46, 85, 0.05);\n border-radius: 8px;\n transition: all 0.2s ease;\n\n &:hover {\n background: rgba(43, 65, 136, 0.1);\n transform: translateY(-2px);\n }\n"])));
41
+ var IconName = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n font-size: 12px;\n color: #fff;\n margin-top: 8px;\n font-family: monospace;\n opacity: 0.7;\n"])));
42
+ var SimpleScrollableWrapper = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-wrap: wrap;\n gap: 16px;\n padding: 20px;\n max-height: 80vh;\n overflow-y: auto;\n background: transparent;\n &::-webkit-scrollbar {\n width: 8px;\n }\n\n &::-webkit-scrollbar-track {\n background: #2c2c2c;\n border-radius: 4px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #555;\n border-radius: 4px;\n }\n\n &::-webkit-scrollbar-thumb:hover {\n background: #777;\n }\n"])));
43
+ (0, _react2.storiesOf)("Icon").add("default", function () {
19
44
  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
20
45
  title: "Icons",
21
46
  background: "dark"
22
- }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, iconsArr.map(function (icon) {
23
- return /*#__PURE__*/_react["default"].createElement(_components.Icon, {
47
+ }, /*#__PURE__*/_react["default"].createElement(ScrollableWrapper, null, iconsArr.map(function (icon) {
48
+ return /*#__PURE__*/_react["default"].createElement(IconWrapper, {
49
+ key: icon.name
50
+ }, /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
24
51
  name: icon.name,
25
52
  width: icon.width,
26
53
  height: icon.height,
27
54
  color: "#fff"
28
- });
55
+ }), /*#__PURE__*/_react["default"].createElement(IconName, null, icon.name));
29
56
  })));
30
57
  });
31
- (0, _react2.storiesOf)('Icon').add('default 1', function () {
58
+ (0, _react2.storiesOf)("Icon").add("default 1", function () {
32
59
  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
33
60
  title: "Icons",
34
61
  background: "dark"
35
- }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
62
+ }, /*#__PURE__*/_react["default"].createElement(SimpleScrollableWrapper, null, /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
36
63
  name: "stitching",
37
64
  width: 24,
38
65
  height: 24
39
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
66
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
40
67
  name: "publishing",
41
68
  width: 24,
42
69
  height: 24
43
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
70
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
44
71
  name: "hes",
45
72
  width: 24,
46
73
  height: 24
47
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
74
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
48
75
  name: "add",
49
76
  width: 14,
50
77
  height: 14
51
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
78
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
52
79
  name: "add-circle",
53
80
  width: 18,
54
81
  height: 18
55
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
82
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
56
83
  name: "arrow-left",
57
84
  width: 14,
58
85
  height: 14
59
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
86
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
60
87
  name: "arrow-right",
61
88
  width: 14,
62
89
  height: 14
63
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
90
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
64
91
  name: "chevron-down",
65
92
  width: 14,
66
93
  height: 14
67
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
94
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
68
95
  name: "calender",
69
96
  width: 14,
70
97
  height: 14
71
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
98
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
72
99
  name: "clip",
73
100
  width: 20,
74
101
  height: 15
75
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
102
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
76
103
  name: "cross",
77
104
  width: 15,
78
105
  height: 15
79
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
106
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
80
107
  name: "high-quality",
81
108
  width: 15,
82
109
  height: 15
83
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
110
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
84
111
  name: "info-filled",
85
112
  width: 18,
86
113
  height: 18,
87
114
  color: "#07D5CD"
88
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
115
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
89
116
  name: "info",
90
117
  width: 18,
91
118
  height: 18,
92
119
  color: "#07D5CD"
93
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
120
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
94
121
  name: "movie",
95
122
  width: 18,
96
123
  height: 18
97
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
124
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
98
125
  name: "okta-logo",
99
126
  width: 30,
100
127
  height: 30,
101
128
  color: "#07D5CD"
102
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
129
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
103
130
  name: "topaz-logo",
104
131
  width: 12,
105
132
  height: 36,
106
133
  color: "#07D5CD"
107
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
134
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
108
135
  name: "search",
109
136
  width: 16,
110
137
  height: 16
111
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
138
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
112
139
  name: "dashboard",
113
140
  width: 18,
114
141
  height: 17
115
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
142
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
116
143
  name: "connect",
117
144
  width: 18,
118
145
  height: 17
119
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
146
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
120
147
  name: "ingest-angle-right",
121
148
  width: 8,
122
149
  height: 11
123
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
150
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
124
151
  name: "notification",
125
152
  width: 24,
126
153
  height: 24,
127
154
  color: "#00cec6"
128
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
155
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
129
156
  name: "programs",
130
157
  width: 18,
131
158
  height: 18
132
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
159
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
133
160
  name: "onboard",
134
161
  width: 18,
135
162
  height: 18
136
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
163
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
137
164
  name: "upload",
138
165
  width: 12,
139
166
  height: 14,
140
167
  color: "#afb2ba"
141
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
168
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
142
169
  name: "manageAccess",
143
170
  width: 15,
144
171
  height: 18
145
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
172
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
146
173
  name: "schedular",
147
174
  width: 19,
148
175
  height: 19
149
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
176
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
150
177
  name: "storyboard",
151
178
  width: 14,
152
179
  height: 12
153
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
180
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
154
181
  name: "ott",
155
182
  width: 15,
156
183
  height: 15
157
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
184
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
158
185
  name: "manage-user",
159
186
  width: 17,
160
187
  height: 17
161
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
188
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
162
189
  name: "user-avatar",
163
190
  width: 14,
164
191
  height: 14
165
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
192
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
166
193
  name: "users-avatar",
167
194
  width: 16,
168
195
  height: 11
169
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
196
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
170
197
  name: "stack-vertical",
171
198
  width: 14,
172
199
  height: 14
173
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
200
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
174
201
  name: "permission-checked",
175
202
  width: 14,
176
203
  height: 14
177
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
204
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
178
205
  name: "angle-left",
179
206
  color: "none",
180
207
  stroke: "#fff"
181
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
208
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
182
209
  name: "angle-right",
183
210
  color: "none",
184
211
  stroke: "#fff"
185
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
212
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
186
213
  name: "angle-left-double",
187
214
  color: "none",
188
215
  stroke: "#fff"
189
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
216
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
190
217
  name: "angle-right-double",
191
218
  color: "none",
192
219
  stroke: "#fff"
193
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
220
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
194
221
  name: "angle-bottom",
195
222
  width: 14,
196
223
  height: 9,
197
224
  color: "none",
198
225
  stroke: "#fff"
199
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
226
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
200
227
  name: "first-page",
201
228
  color: "#fff",
202
229
  stroke: "#fff"
203
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
230
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
204
231
  name: "last-page",
205
232
  color: "#fff",
206
233
  stroke: "#fff"
207
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
234
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
208
235
  name: "play",
209
236
  width: 20,
210
237
  height: 26
211
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
238
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
212
239
  name: "pause",
213
240
  width: 25,
214
241
  height: 25
215
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
242
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
216
243
  name: "tablet",
217
244
  width: 18,
218
245
  height: 13
219
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
246
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
220
247
  name: "tv",
221
248
  width: 14,
222
249
  height: 14
223
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
250
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
224
251
  name: "triangle-double-left",
225
252
  width: 14,
226
253
  height: 13
227
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
254
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
228
255
  name: "triangle-double-right",
229
256
  width: 14,
230
257
  height: 13
231
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
258
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
232
259
  name: "delete",
233
260
  width: 12,
234
261
  height: 14
235
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
262
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
236
263
  name: "promo_review",
237
264
  width: 16,
238
265
  height: 14
239
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
266
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
240
267
  name: "data-refresh",
241
268
  width: 16,
242
269
  height: 18
243
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
270
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
244
271
  name: "back-to-back",
245
272
  width: 16,
246
273
  height: 18
247
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
274
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
248
275
  name: "enhance",
249
276
  width: 16,
250
277
  height: 16
251
278
  })));
252
279
  });
253
- (0, _react2.storiesOf)('Icon').add('default 2', function () {
280
+ (0, _react2.storiesOf)("Icon").add("default 2", function () {
254
281
  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
255
282
  title: "Icons",
256
283
  background: "dark"
257
- }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
284
+ }, /*#__PURE__*/_react["default"].createElement(SimpleScrollableWrapper, null, /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
258
285
  name: "dialogue-miss",
259
286
  width: 24,
260
287
  height: 24
261
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
288
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
262
289
  name: "voice-mismatch",
263
290
  width: 20,
264
291
  height: 20
265
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
292
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
266
293
  name: "me-issue",
267
294
  width: 24,
268
295
  height: 24
269
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
296
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
270
297
  name: "av-cut",
271
298
  width: 20,
272
299
  height: 20
273
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
300
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
274
301
  name: "short-replacement",
275
302
  width: 24,
276
303
  height: 24
277
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
304
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
278
305
  name: "meaning-error",
279
306
  width: 20,
280
307
  height: 20
281
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
308
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
282
309
  name: "pronunciation",
283
310
  width: 24,
284
311
  height: 24
285
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
312
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
286
313
  name: "volume",
287
314
  width: 18,
288
315
  height: 18
289
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
316
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
290
317
  name: "share",
291
318
  width: 18,
292
319
  height: 18
293
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
320
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
294
321
  name: "settings",
295
322
  width: 16,
296
323
  height: 16
297
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
324
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
298
325
  name: "fullscreen",
299
326
  width: 14,
300
327
  height: 14
301
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
328
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
302
329
  name: "send",
303
330
  width: 25,
304
331
  height: 25
305
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
332
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
306
333
  name: "reply",
307
334
  width: 25,
308
335
  height: 25
309
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
336
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
310
337
  name: "rewind-10",
311
338
  width: 24,
312
339
  height: 30
313
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
340
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
314
341
  name: "forward-10",
315
342
  width: 24,
316
343
  height: 30
317
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
344
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
318
345
  name: "pending",
319
346
  width: 12,
320
347
  height: 12
321
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
348
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
322
349
  name: "warning",
323
350
  width: 12,
324
351
  height: 12
325
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
352
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
326
353
  name: "tick",
327
354
  width: 12,
328
355
  height: 9
329
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
356
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
330
357
  name: "timeline",
331
358
  width: 12,
332
359
  height: 12
333
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
360
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
334
361
  name: "in-marker",
335
362
  width: 10,
336
363
  height: 18
337
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
364
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
338
365
  name: "out-marker",
339
366
  width: 10,
340
367
  height: 18
341
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
368
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
342
369
  name: "magnifier",
343
370
  width: 20,
344
371
  height: 20
345
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
372
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
346
373
  name: "tagging",
347
374
  width: 12,
348
375
  height: 13
349
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
376
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
350
377
  name: "restore",
351
378
  width: 18,
352
379
  height: 16
353
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
380
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
354
381
  name: "archive",
355
382
  width: 10,
356
383
  height: 10
357
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
384
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
358
385
  name: "update",
359
386
  width: 12,
360
387
  height: 14
361
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
388
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
362
389
  name: "marker",
363
390
  width: 9,
364
391
  height: 8
365
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
392
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
366
393
  name: "request",
367
394
  width: 14,
368
395
  height: 11
369
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
396
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
370
397
  name: "safe-area",
371
398
  width: 24,
372
399
  height: 24
373
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
400
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
374
401
  name: "playback-rate",
375
402
  width: 12,
376
403
  height: 12
377
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
404
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
378
405
  name: "subtitle-cc",
379
406
  width: 14,
380
407
  height: 13
381
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
408
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
382
409
  name: "audio-track",
383
410
  width: 16,
384
411
  height: 16
385
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
412
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
386
413
  name: "mic",
387
414
  width: 10,
388
415
  height: 17
389
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
416
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
390
417
  name: "check",
391
418
  width: 16,
392
419
  height: 13
393
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
420
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
394
421
  name: "error",
395
422
  width: 24,
396
423
  height: 24
397
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
424
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
398
425
  name: "clipping",
399
426
  width: 20,
400
427
  height: 16
401
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
428
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
402
429
  name: "qc",
403
430
  width: 20,
404
431
  height: 20
405
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
432
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
406
433
  name: "subtitle",
407
434
  width: 20,
408
435
  height: 16
409
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
436
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
410
437
  name: "align_bottom",
411
438
  width: 16,
412
439
  height: 16
413
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
440
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
414
441
  name: "align_center",
415
442
  width: 16,
416
443
  height: 16
417
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
444
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
418
445
  name: "align_top",
419
446
  width: 16,
420
447
  height: 16
421
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
448
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
422
449
  name: "align_left",
423
450
  width: 16,
424
451
  height: 16
425
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
452
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
426
453
  name: "align_middle",
427
454
  width: 16,
428
455
  height: 16
429
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
456
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
430
457
  name: "align_right",
431
458
  width: 16,
432
459
  height: 16
433
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
460
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
434
461
  name: "comment",
435
462
  width: 13,
436
463
  height: 13
437
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
464
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
438
465
  name: "cut",
439
466
  width: 14,
440
467
  height: 15
441
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
468
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
442
469
  name: "back-to-back",
443
470
  width: 14,
444
471
  height: 15
445
472
  })));
446
473
  });
447
- (0, _react2.storiesOf)('Icon').add('default 3', function () {
474
+ (0, _react2.storiesOf)("Icon").add("default 3", function () {
448
475
  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
449
476
  title: "Icons",
450
477
  background: "dark"
451
- }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
478
+ }, /*#__PURE__*/_react["default"].createElement(SimpleScrollableWrapper, null, /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
452
479
  name: "mute",
453
480
  width: 10,
454
481
  height: 18
455
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
482
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
456
483
  name: "mute-beep",
457
484
  width: 17,
458
485
  height: 18
459
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
486
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
460
487
  name: "collab",
461
488
  width: 16,
462
489
  height: 16
463
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
490
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
464
491
  name: "central",
465
492
  width: 16,
466
493
  height: 16
467
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
494
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
468
495
  name: "control",
469
496
  width: 16,
470
497
  height: 16
471
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
498
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
472
499
  name: "refresh",
473
500
  width: 14,
474
501
  height: 14
475
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
502
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
476
503
  name: "dots",
477
504
  width: 14,
478
505
  height: 4
479
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
506
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
480
507
  name: "snp_edit",
481
508
  width: 14,
482
509
  height: 14
483
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
510
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
484
511
  name: "more-ver",
485
512
  width: 12,
486
513
  height: 12
487
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
514
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
488
515
  name: "controls",
489
516
  width: 13,
490
517
  height: 12
491
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
518
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
492
519
  name: "default",
493
520
  width: 21,
494
521
  height: 21
495
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
522
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
496
523
  name: "blur",
497
524
  width: 14,
498
525
  height: 14
499
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
526
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
500
527
  name: "editor",
501
528
  width: 14,
502
529
  height: 14
503
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
530
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
504
531
  name: "expand",
505
532
  color: "none",
506
533
  stroke: "#fff"
507
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
534
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
508
535
  name: "collapse",
509
536
  color: "none",
510
537
  stroke: "#fff"
511
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
538
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
512
539
  name: "avatar",
513
540
  width: 24,
514
541
  height: 24,
515
542
  color: "#afb2ba"
516
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
543
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
517
544
  name: "filter",
518
545
  color: "#afb2ba"
519
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
546
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
520
547
  name: "request-access",
521
548
  width: 20,
522
549
  height: 18
523
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
550
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
524
551
  name: "lock",
525
552
  width: 18,
526
553
  height: 18
527
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
554
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
528
555
  name: "move",
529
556
  width: 12,
530
557
  height: 12
531
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
558
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
532
559
  name: "copy",
533
560
  width: 11,
534
561
  height: 13
535
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
562
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
536
563
  name: "approval",
537
564
  width: 18,
538
565
  height: 10
539
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
566
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
540
567
  name: "import",
541
568
  color: "#afb2ba"
542
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
569
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
543
570
  name: "download",
544
571
  width: 10,
545
572
  height: 13
546
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
573
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
547
574
  name: "add-users",
548
575
  width: 19,
549
576
  height: 10
550
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
577
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
551
578
  name: "collaborate",
552
579
  width: 20,
553
580
  height: 14
554
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
581
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
555
582
  name: "task",
556
583
  width: 19,
557
584
  height: 19
558
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
585
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
559
586
  name: "edit",
560
587
  width: 14,
561
588
  height: 14
562
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
589
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
563
590
  name: "carousel",
564
591
  width: 24,
565
592
  height: 24
566
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
593
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
567
594
  name: "date-picker",
568
595
  color: "#afb2ba"
569
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
596
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
570
597
  name: "show-password",
571
598
  color: "#999"
572
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
599
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
573
600
  name: "hide-password",
574
601
  color: "#999"
575
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
602
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
576
603
  name: "upload-image",
577
604
  width: 20,
578
605
  height: 19,
579
606
  color: "#fff"
580
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
607
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
581
608
  name: "cloud",
582
609
  width: 22,
583
610
  height: 16
584
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
611
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
585
612
  name: "long-arrow",
586
613
  width: 18,
587
614
  height: 12
588
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
615
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
589
616
  name: "upload-arrow",
590
617
  width: 12,
591
618
  height: 18
592
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
619
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
593
620
  name: "log-out",
594
621
  width: 12,
595
622
  height: 12
596
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
623
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
597
624
  name: "brief",
598
625
  width: 14,
599
626
  height: 12
600
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
627
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
601
628
  name: "upload-asset",
602
629
  width: 24,
603
630
  height: 24
604
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
631
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
605
632
  name: "back-to-back",
606
633
  width: 14,
607
634
  height: 15
608
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
635
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
609
636
  name: "clevr",
610
637
  width: 16,
611
638
  height: 16,
612
639
  color: "#999"
613
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
640
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
614
641
  name: "craft",
615
642
  width: 16,
616
643
  height: 16,
617
644
  color: "#999"
618
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
645
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
619
646
  name: "check-module",
620
647
  width: 16,
621
648
  height: 16,
622
649
  color: "#999"
623
650
  })));
624
651
  });
625
- (0, _react2.storiesOf)('Icon').add('nexc', function () {
652
+ (0, _react2.storiesOf)("Icon").add("nexc", function () {
626
653
  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
627
654
  title: "Icons",
628
655
  background: "dark"
629
- }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
656
+ }, /*#__PURE__*/_react["default"].createElement(SimpleScrollableWrapper, null, /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
630
657
  name: "stitching",
631
658
  width: 24,
632
659
  height: 24
633
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
660
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
634
661
  name: "publishing",
635
662
  width: 24,
636
663
  height: 24
637
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
664
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
638
665
  name: "hes",
639
666
  width: 24,
640
667
  height: 24
641
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
668
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
642
669
  name: "add",
643
670
  width: 14,
644
671
  height: 14
645
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
672
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
646
673
  name: "add-circle",
647
674
  width: 18,
648
675
  height: 18
649
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
676
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
650
677
  name: "arrow-left",
651
678
  width: 14,
652
679
  height: 14
653
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
680
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
654
681
  name: "arrow-right",
655
682
  width: 14,
656
683
  height: 14
657
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
684
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
658
685
  name: "chevron-down",
659
686
  width: 14,
660
687
  height: 14
661
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
688
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
662
689
  name: "calender",
663
690
  width: 14,
664
691
  height: 14
665
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
692
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
666
693
  name: "clip",
667
694
  width: 20,
668
695
  height: 15
669
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
696
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
670
697
  name: "cross",
671
698
  width: 15,
672
699
  height: 15
673
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
700
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
674
701
  name: "high-quality",
675
702
  width: 15,
676
703
  height: 15
677
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
704
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
678
705
  name: "info-filled",
679
706
  width: 18,
680
707
  height: 18,
681
708
  color: "#60BEF8"
682
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
709
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
683
710
  name: "info",
684
711
  width: 18,
685
712
  height: 18,
686
713
  color: "#60BEF8"
687
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
714
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
688
715
  name: "movie",
689
716
  width: 18,
690
717
  height: 18
691
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
718
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
692
719
  name: "okta-logo",
693
720
  width: 30,
694
721
  height: 30,
695
722
  color: "#60BEF8"
696
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
723
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
697
724
  name: "topaz-logo",
698
725
  width: 12,
699
726
  height: 36,
700
727
  color: "#60BEF8"
701
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
728
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
702
729
  name: "search",
703
730
  width: 16,
704
731
  height: 16
705
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
732
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
706
733
  name: "dashboard",
707
734
  width: 18,
708
735
  height: 17
709
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
736
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
710
737
  name: "connect",
711
738
  width: 18,
712
739
  height: 17
713
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
740
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
714
741
  name: "ingest-angle-right",
715
742
  width: 8,
716
743
  height: 11
717
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
744
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
718
745
  name: "notification",
719
746
  width: 24,
720
747
  height: 24,
721
748
  color: "#60BEF8"
722
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
749
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
723
750
  name: "programs",
724
751
  width: 18,
725
752
  height: 18
726
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
753
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
727
754
  name: "onboard",
728
755
  width: 18,
729
756
  height: 18
730
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
757
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
731
758
  name: "upload",
732
759
  width: 12,
733
760
  height: 14,
734
761
  color: "#afb2ba"
735
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
762
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
736
763
  name: "manageAccess",
737
764
  width: 15,
738
765
  height: 18
739
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
766
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
740
767
  name: "schedular",
741
768
  width: 19,
742
769
  height: 19
743
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
770
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
744
771
  name: "storyboard",
745
772
  width: 14,
746
773
  height: 12
747
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
774
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
748
775
  name: "ott",
749
776
  width: 15,
750
777
  height: 15
751
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
778
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
752
779
  name: "manage-user",
753
780
  width: 17,
754
781
  height: 17
755
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
782
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
756
783
  name: "user-avatar",
757
784
  width: 14,
758
785
  height: 14
759
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
786
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
760
787
  name: "users-avatar",
761
788
  width: 16,
762
789
  height: 11
763
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
790
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
764
791
  name: "stack-vertical",
765
792
  width: 14,
766
793
  height: 14
767
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
794
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
768
795
  name: "permission-checked",
769
796
  width: 14,
770
797
  height: 14
771
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
798
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
772
799
  name: "angle-left",
773
800
  color: "none",
774
801
  stroke: "#fff"
775
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
802
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
776
803
  name: "angle-right",
777
804
  color: "none",
778
805
  stroke: "#fff"
779
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
806
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
780
807
  name: "angle-left-double",
781
808
  color: "none",
782
809
  stroke: "#fff"
783
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
810
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
784
811
  name: "angle-right-double",
785
812
  color: "none",
786
813
  stroke: "#fff"
787
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
814
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
788
815
  name: "angle-bottom",
789
816
  width: 14,
790
817
  height: 9,
791
818
  color: "none",
792
819
  stroke: "#fff"
793
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
820
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
794
821
  name: "first-page",
795
822
  color: "#fff",
796
823
  stroke: "#fff"
797
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
824
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
798
825
  name: "last-page",
799
826
  color: "#fff",
800
827
  stroke: "#fff"
801
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
828
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
802
829
  name: "play",
803
830
  width: 20,
804
831
  height: 26
805
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
832
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
806
833
  name: "pause",
807
834
  width: 25,
808
835
  height: 25
809
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
836
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
810
837
  name: "tablet",
811
838
  width: 18,
812
839
  height: 13
813
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
840
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
814
841
  name: "tv",
815
842
  width: 14,
816
843
  height: 14
817
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
844
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
818
845
  name: "triangle-double-left",
819
846
  width: 14,
820
847
  height: 13
821
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
848
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
822
849
  name: "triangle-double-right",
823
850
  width: 14,
824
851
  height: 13
825
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
852
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
826
853
  name: "delete",
827
854
  width: 12,
828
855
  height: 14
829
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
856
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
830
857
  name: "promo_review",
831
858
  width: 16,
832
859
  height: 14
833
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
860
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
834
861
  name: "data-refresh",
835
862
  width: 16,
836
863
  height: 18
837
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
864
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
838
865
  name: "back-to-back",
839
866
  width: 16,
840
867
  height: 18
841
- }), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
868
+ }), /*#__PURE__*/_react["default"].createElement(IconWithTooltip, {
842
869
  name: "enhance",
843
870
  width: 16,
844
871
  height: 16