@revikornmann/muka-ui 0.27.1 → 0.27.3
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.
- package/dist/cjs/components/Avatar/Avatar.css +45 -11
- package/dist/cjs/components/Avatar/Avatar.js +4 -1
- package/dist/cjs/components/Avatar/Avatar.js.map +1 -1
- package/dist/cjs/components/Avatar/AvatarGroup.js +4 -2
- package/dist/cjs/components/Avatar/AvatarGroup.js.map +1 -1
- package/dist/cjs/components/Tabs/Tabs.js +6 -3
- package/dist/cjs/components/Tabs/Tabs.js.map +1 -1
- package/dist/esm/components/Avatar/Avatar.css +45 -11
- package/dist/esm/components/Avatar/Avatar.js +4 -1
- package/dist/esm/components/Avatar/Avatar.js.map +1 -1
- package/dist/esm/components/Avatar/AvatarGroup.js +4 -2
- package/dist/esm/components/Avatar/AvatarGroup.js.map +1 -1
- package/dist/esm/components/Tabs/Tabs.js +6 -3
- package/dist/esm/components/Tabs/Tabs.js.map +1 -1
- package/dist/styles/components/Avatar.css +45 -11
- package/dist/styles/index.css +766 -724
- package/dist/styles/muka-dark.css +766 -724
- package/dist/styles/muka-light.css +766 -724
- package/dist/styles/tokens-bouwplan-dark.css +15 -7
- package/dist/styles/tokens-bouwplan-light.css +15 -7
- package/dist/styles/tokens-fscl-dark.css +15 -7
- package/dist/styles/tokens-fscl-light.css +15 -7
- package/dist/styles/tokens-grip-dark.css +15 -7
- package/dist/styles/tokens-grip-light.css +15 -7
- package/dist/styles/tokens-muka-dark.css +15 -7
- package/dist/styles/tokens-muka-light.css +15 -7
- package/dist/styles/tokens-wireframe-dark.css +15 -7
- package/dist/styles/tokens-wireframe-light.css +15 -7
- package/dist/styles/wireframe-dark.css +766 -724
- package/dist/styles/wireframe-light.css +766 -724
- package/dist/types/components/Avatar/Avatar.d.ts +4 -1
- package/dist/types/components/Avatar/Avatar.d.ts.map +1 -1
- package/dist/types/components/Avatar/AvatarGroup.d.ts +8 -0
- package/dist/types/components/Avatar/AvatarGroup.d.ts.map +1 -1
- package/dist/types/components/Tabs/Tabs.d.ts.map +1 -1
- package/docs/consumers/brand.md +6 -2
- package/docs/consumers/setup-instructions.md +35 -3
- package/package.json +1 -1
- package/skills/setup-muka/SKILL.md +36 -3
- package/tokens/t4-components/avatar.json +46 -8
|
@@ -7,7 +7,8 @@
|
|
|
7
7
|
align-items: center;
|
|
8
8
|
justify-content: center;
|
|
9
9
|
flex-shrink: 0;
|
|
10
|
-
overflow:
|
|
10
|
+
/* No overflow clipping: the status dot sits on the edge. The image and the
|
|
11
|
+
loading shimmer round themselves to the avatar shape instead. */
|
|
11
12
|
user-select: none;
|
|
12
13
|
vertical-align: middle;
|
|
13
14
|
background-color: var(--avatar-color-background-default);
|
|
@@ -80,9 +81,10 @@
|
|
|
80
81
|
border-radius: var(--avatar-radius-square-sm);
|
|
81
82
|
}
|
|
82
83
|
|
|
83
|
-
/* 4xs is too small for initials, the fallback icon or a status dot:
|
|
84
|
+
/* 4xs is too small for initials, an icon, the fallback icon or a status dot:
|
|
84
85
|
it shows the picture, or the plain background */
|
|
85
86
|
.muka-avatar--4xs .muka-avatar__initials,
|
|
87
|
+
.muka-avatar--4xs .muka-avatar__icon,
|
|
86
88
|
.muka-avatar--4xs .muka-avatar__fallback,
|
|
87
89
|
.muka-avatar--4xs .muka-avatar__status {
|
|
88
90
|
display: none;
|
|
@@ -118,38 +120,59 @@
|
|
|
118
120
|
.muka-avatar__skeleton {
|
|
119
121
|
position: absolute;
|
|
120
122
|
inset: 0;
|
|
123
|
+
border-radius: inherit;
|
|
121
124
|
background: linear-gradient(
|
|
122
125
|
90deg,
|
|
123
126
|
transparent 0%,
|
|
124
127
|
var(--color-surface-level1) 50%,
|
|
125
128
|
transparent 100%
|
|
126
|
-
);
|
|
129
|
+
) no-repeat;
|
|
130
|
+
background-size: 50% 100%;
|
|
127
131
|
animation: avatar-loading 1.5s ease-in-out infinite;
|
|
128
132
|
}
|
|
129
133
|
|
|
134
|
+
/* The highlight sweeps by background position, so it stays inside the
|
|
135
|
+
rounded shape without the avatar clipping its overflow */
|
|
130
136
|
@keyframes avatar-loading {
|
|
131
137
|
0% {
|
|
132
|
-
|
|
138
|
+
background-position: -100% 0;
|
|
133
139
|
}
|
|
134
140
|
100% {
|
|
135
|
-
|
|
141
|
+
background-position: 200% 0;
|
|
136
142
|
}
|
|
137
143
|
}
|
|
138
144
|
|
|
139
145
|
/* Avatar content */
|
|
140
146
|
.muka-avatar__image {
|
|
147
|
+
border-radius: inherit;
|
|
141
148
|
width: 100%;
|
|
142
149
|
height: 100%;
|
|
143
150
|
object-fit: cover;
|
|
144
151
|
display: block;
|
|
145
152
|
}
|
|
146
153
|
|
|
154
|
+
/* Icon slot: a fixed icon size per avatar size, in the initials colour
|
|
155
|
+
(subtle text) */
|
|
147
156
|
.muka-avatar__icon {
|
|
148
|
-
width: 60%;
|
|
149
|
-
height: 60%;
|
|
150
157
|
display: flex;
|
|
151
158
|
align-items: center;
|
|
152
159
|
justify-content: center;
|
|
160
|
+
color: var(--avatar-color-foreground-default);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.muka-avatar--3xs .muka-avatar__icon { width: var(--avatar-icon-size-3xs); height: var(--avatar-icon-size-3xs); }
|
|
164
|
+
.muka-avatar--2xs .muka-avatar__icon { width: var(--avatar-icon-size-2xs); height: var(--avatar-icon-size-2xs); }
|
|
165
|
+
.muka-avatar--xs .muka-avatar__icon { width: var(--avatar-icon-size-xs); height: var(--avatar-icon-size-xs); }
|
|
166
|
+
.muka-avatar--sm .muka-avatar__icon { width: var(--avatar-icon-size-sm); height: var(--avatar-icon-size-sm); }
|
|
167
|
+
.muka-avatar--md .muka-avatar__icon { width: var(--avatar-icon-size-md); height: var(--avatar-icon-size-md); }
|
|
168
|
+
.muka-avatar--lg .muka-avatar__icon { width: var(--avatar-icon-size-lg); height: var(--avatar-icon-size-lg); }
|
|
169
|
+
.muka-avatar--xl .muka-avatar__icon { width: var(--avatar-icon-size-xl); height: var(--avatar-icon-size-xl); }
|
|
170
|
+
|
|
171
|
+
/* A Muka Icon fills the slot and takes its colour (its own `color` prop still wins) */
|
|
172
|
+
.muka-avatar__icon .muka-icon {
|
|
173
|
+
width: 100%;
|
|
174
|
+
height: 100%;
|
|
175
|
+
color: inherit;
|
|
153
176
|
}
|
|
154
177
|
|
|
155
178
|
.muka-avatar__icon svg {
|
|
@@ -256,9 +279,12 @@
|
|
|
256
279
|
|
|
257
280
|
/* Avatar Group (Figma "Avatar Stack") */
|
|
258
281
|
.muka-avatar-group {
|
|
282
|
+
position: relative;
|
|
259
283
|
display: inline-flex;
|
|
260
284
|
align-items: center;
|
|
261
285
|
flex-direction: row;
|
|
286
|
+
/* Never stretch to a grid cell or column, so the badge stays on the last avatar */
|
|
287
|
+
width: fit-content;
|
|
262
288
|
}
|
|
263
289
|
|
|
264
290
|
/* Later avatars sit on top of earlier ones (DOM order); a hovered one comes to the front */
|
|
@@ -278,7 +304,7 @@
|
|
|
278
304
|
box-shadow: 0 0 0 var(--avatar-group-ring-width) var(--avatar-group-ring-color);
|
|
279
305
|
}
|
|
280
306
|
|
|
281
|
-
/* Overlap. Figma specifies exact values for
|
|
307
|
+
/* Overlap. Figma specifies exact values for 40 / 32 / 24px avatars (xs / 2xs / 3xs);
|
|
282
308
|
other sizes use the same proportions: tight 2/3, compact 1/2, spacious 1/3. */
|
|
283
309
|
.muka-avatar-group--4xs { --muka-avatar-group-size: var(--avatar-size-4xs); }
|
|
284
310
|
.muka-avatar-group--3xs { --muka-avatar-group-size: var(--avatar-size-3xs); }
|
|
@@ -293,13 +319,13 @@
|
|
|
293
319
|
.muka-avatar-group--compact { --muka-avatar-group-overlap: calc(var(--muka-avatar-group-size) / 2); }
|
|
294
320
|
.muka-avatar-group--spacious { --muka-avatar-group-overlap: calc(var(--muka-avatar-group-size) / 3); }
|
|
295
321
|
|
|
296
|
-
.muka-avatar-group--tight.muka-avatar-group--
|
|
322
|
+
.muka-avatar-group--tight.muka-avatar-group--xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-tight-xs); }
|
|
297
323
|
.muka-avatar-group--tight.muka-avatar-group--2xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-tight-2xs); }
|
|
298
324
|
.muka-avatar-group--tight.muka-avatar-group--3xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-tight-3xs); }
|
|
299
|
-
.muka-avatar-group--compact.muka-avatar-group--
|
|
325
|
+
.muka-avatar-group--compact.muka-avatar-group--xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-compact-xs); }
|
|
300
326
|
.muka-avatar-group--compact.muka-avatar-group--2xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-compact-2xs); }
|
|
301
327
|
.muka-avatar-group--compact.muka-avatar-group--3xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-compact-3xs); }
|
|
302
|
-
.muka-avatar-group--spacious.muka-avatar-group--
|
|
328
|
+
.muka-avatar-group--spacious.muka-avatar-group--xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-spacious-xs); }
|
|
303
329
|
.muka-avatar-group--spacious.muka-avatar-group--2xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-spacious-2xs); }
|
|
304
330
|
.muka-avatar-group--spacious.muka-avatar-group--3xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-spacious-3xs); }
|
|
305
331
|
|
|
@@ -307,6 +333,14 @@
|
|
|
307
333
|
margin-left: calc(-1 * var(--muka-avatar-group-overlap));
|
|
308
334
|
}
|
|
309
335
|
|
|
336
|
+
/* Badge: a BadgeNumber on the top-right corner of the stack, above every avatar */
|
|
337
|
+
.muka-avatar-group__badge {
|
|
338
|
+
position: absolute;
|
|
339
|
+
top: calc(-1 * var(--avatar-group-badge-offset));
|
|
340
|
+
right: calc(-1 * var(--avatar-group-badge-offset));
|
|
341
|
+
z-index: 20;
|
|
342
|
+
}
|
|
343
|
+
|
|
310
344
|
/* Overflow avatar styling */
|
|
311
345
|
.muka-avatar--overflow {
|
|
312
346
|
background-color: var(--avatar-color-background-default);
|
|
@@ -32,7 +32,10 @@ function getInitials(name) {
|
|
|
32
32
|
* - Loading and error states
|
|
33
33
|
* - Clickable support
|
|
34
34
|
*
|
|
35
|
-
* @accessibility WCAG 2.1 AA
|
|
35
|
+
* @accessibility WCAG 2.1 AA, except initials contrast
|
|
36
|
+
* - Initials and "+N" use subtle text by design (Figma "Avatar"), about 2.5–3.4:1
|
|
37
|
+
* on the avatar fill, below the 4.5:1 AA text minimum. They are decorative:
|
|
38
|
+
* the accessible name comes from `name`, so always pass it
|
|
36
39
|
* - Requires alt text when using image
|
|
37
40
|
* - Uses role="img" with aria-label for non-image avatars
|
|
38
41
|
* - Status indicators include aria-label
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../components/Avatar/Avatar.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;AAEb,iCAA2D;AAC3D,6DAAgE;AAChE,wBAAsB;AA2CtB;;GAEG;AACH,SAAS,WAAW,CAAC,IAAY;IAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACvC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IAC1C,CAAC;IACD,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;AAChF,CAAC;AAED
|
|
1
|
+
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../components/Avatar/Avatar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
36
36
|
exports.AvatarGroup = void 0;
|
|
37
37
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
38
|
const react_1 = __importStar(require("react"));
|
|
39
|
+
const BadgeNumber_1 = require("../BadgeNumber");
|
|
39
40
|
require("./Avatar.css");
|
|
40
41
|
/**
|
|
41
42
|
* AvatarGroup Component
|
|
@@ -49,12 +50,13 @@ require("./Avatar.css");
|
|
|
49
50
|
* - Three spacing modes: tight, compact, spacious
|
|
50
51
|
* - Size propagation to child avatars
|
|
51
52
|
* - Overflow counter display
|
|
53
|
+
* - Optional number badge on the top-right corner
|
|
52
54
|
*
|
|
53
55
|
* @accessibility WCAG 2.1 AA compliant
|
|
54
56
|
* - Uses role="group" with aria-label
|
|
55
57
|
* - Overflow count includes accessible label
|
|
56
58
|
*/
|
|
57
|
-
const AvatarGroup = ({ children, max = 5, size = 'md', spacing = 'compact', className = '', 'aria-label': ariaLabel = 'Avatar group', ...props }) => {
|
|
59
|
+
const AvatarGroup = ({ children, max = 5, size = 'md', spacing = 'compact', badge, badgeLabel, className = '', 'aria-label': ariaLabel = 'Avatar group', ...props }) => {
|
|
58
60
|
const childArray = react_1.Children.toArray(children);
|
|
59
61
|
const totalCount = childArray.length;
|
|
60
62
|
const visibleCount = Math.min(max, totalCount);
|
|
@@ -81,7 +83,7 @@ const AvatarGroup = ({ children, max = 5, size = 'md', spacing = 'compact', clas
|
|
|
81
83
|
size: child.props.size || size,
|
|
82
84
|
...child.props,
|
|
83
85
|
}) }, index));
|
|
84
|
-
}), overflowCount > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "muka-avatar-group__item", children: (0, jsx_runtime_1.jsx)("div", { className: overflowClasses, role: "img", "aria-label": `${overflowCount} more ${overflowCount === 1 ? 'person' : 'people'}`, children: (0, jsx_runtime_1.jsxs)("span", { className: "muka-avatar__overflow-count", children: ["+", overflowCount] }) }) }))] }));
|
|
86
|
+
}), overflowCount > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "muka-avatar-group__item", children: (0, jsx_runtime_1.jsx)("div", { className: overflowClasses, role: "img", "aria-label": `${overflowCount} more ${overflowCount === 1 ? 'person' : 'people'}`, children: (0, jsx_runtime_1.jsxs)("span", { className: "muka-avatar__overflow-count", children: ["+", overflowCount] }) }) })), badge !== undefined && badge !== null && badge !== false && ((0, jsx_runtime_1.jsx)(BadgeNumber_1.BadgeNumber, { variant: "info", size: "2xs", className: "muka-avatar-group__badge", "aria-label": badgeLabel, children: badge }))] }));
|
|
85
87
|
};
|
|
86
88
|
exports.AvatarGroup = AvatarGroup;
|
|
87
89
|
exports.default = exports.AvatarGroup;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../../components/Avatar/AvatarGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AAExC,wBAAsB;
|
|
1
|
+
{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../../components/Avatar/AvatarGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AAExC,gDAA6C;AAC7C,wBAAsB;AAkCtB;;;;;;;;;;;;;;;;;GAiBG;AACI,MAAM,WAAW,GAA+B,CAAC,EACtD,QAAQ,EACR,GAAG,GAAG,CAAC,EACP,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,KAAK,EACL,UAAU,EACV,SAAS,GAAG,EAAE,EACd,YAAY,EAAE,SAAS,GAAG,cAAc,EACxC,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,gBAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC9C,MAAM,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC;IACrC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;IAC/C,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,GAAG,GAAG,CAAC,CAAC;IAEpD,MAAM,eAAe,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC;IAE1D,MAAM,YAAY,GAAG;QACnB,mBAAmB;QACnB,sBAAsB,OAAO,EAAE;QAC/B,sBAAsB,IAAI,EAAE;QAC5B,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,MAAM,eAAe,GAAG;QACtB,aAAa;QACb,uBAAuB;QACvB,gBAAgB,IAAI,EAAE;QACtB,qBAAqB;KACtB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,iCACE,SAAS,EAAE,YAAY,EACvB,IAAI,EAAC,OAAO,gBACA,SAAS,KACjB,KAAK,aAER,eAAe,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBACpC,IAAI,CAAC,eAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;oBACjC,OAAO,KAAK,CAAC;gBACf,CAAC;gBAED,sDAAsD;gBACtD,OAAO,CACL,gCAAiB,SAAS,EAAC,yBAAyB,YACjD,eAAK,CAAC,YAAY,CAAC,KAAK,EAAE;wBACzB,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI;wBAC9B,GAAG,KAAK,CAAC,KAAK;qBACY,CAAC,IAJrB,KAAK,CAKT,CACP,CAAC;YACJ,CAAC,CAAC,EAED,aAAa,GAAG,CAAC,IAAI,CACpB,gCAAK,SAAS,EAAC,yBAAyB,YACtC,gCACE,SAAS,EAAE,eAAe,EAC1B,IAAI,EAAC,KAAK,gBACE,GAAG,aAAa,SAAS,aAAa,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EAAE,YAEhF,kCAAM,SAAS,EAAC,6BAA6B,kBACzC,aAAa,IACV,GACH,GACF,CACP,EAEA,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,KAAK,IAAI,CAC3D,uBAAC,yBAAW,IACV,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,KAAK,EACV,SAAS,EAAC,0BAA0B,gBACxB,UAAU,YAErB,KAAK,GACM,CACf,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAjFW,QAAA,WAAW,eAiFtB;AAEF,kBAAe,mBAAW,CAAC"}
|
|
@@ -124,11 +124,14 @@ const TabList = ({ children, className = '' }) => {
|
|
|
124
124
|
return ((0, jsx_runtime_1.jsx)("div", { ref: listRef, className: `muka-tabs__list ${className}`.trim(), role: "tablist", "aria-orientation": "horizontal", onKeyDown: handleKeyDown, tabIndex: -1, children: children }));
|
|
125
125
|
};
|
|
126
126
|
exports.TabList = TabList;
|
|
127
|
-
/**
|
|
127
|
+
/**
|
|
128
|
+
* Leading-item sizes per tab size (Figma "Tab label": icon 16 / 20 / 24,
|
|
129
|
+
* avatar and avatar group 24 / 32 / 40).
|
|
130
|
+
*/
|
|
128
131
|
const LEADING_SIZES = {
|
|
129
|
-
sm: { avatar: '
|
|
132
|
+
sm: { avatar: '3xs', pieChart: 16 },
|
|
130
133
|
md: { avatar: '2xs', pieChart: 'xs' },
|
|
131
|
-
lg: { avatar: '
|
|
134
|
+
lg: { avatar: 'xs', pieChart: 'sm' },
|
|
132
135
|
};
|
|
133
136
|
const Tab = ({ value, children, leading, icon, disabled = false, className = '', }) => {
|
|
134
137
|
const { activeValue, setActiveValue, size } = useTabsContext();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../components/Tabs/Tabs.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../components/Tabs/Tabs.tsx"],"names":[],"mappings":"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"}
|
|
@@ -7,7 +7,8 @@
|
|
|
7
7
|
align-items: center;
|
|
8
8
|
justify-content: center;
|
|
9
9
|
flex-shrink: 0;
|
|
10
|
-
overflow:
|
|
10
|
+
/* No overflow clipping: the status dot sits on the edge. The image and the
|
|
11
|
+
loading shimmer round themselves to the avatar shape instead. */
|
|
11
12
|
user-select: none;
|
|
12
13
|
vertical-align: middle;
|
|
13
14
|
background-color: var(--avatar-color-background-default);
|
|
@@ -80,9 +81,10 @@
|
|
|
80
81
|
border-radius: var(--avatar-radius-square-sm);
|
|
81
82
|
}
|
|
82
83
|
|
|
83
|
-
/* 4xs is too small for initials, the fallback icon or a status dot:
|
|
84
|
+
/* 4xs is too small for initials, an icon, the fallback icon or a status dot:
|
|
84
85
|
it shows the picture, or the plain background */
|
|
85
86
|
.muka-avatar--4xs .muka-avatar__initials,
|
|
87
|
+
.muka-avatar--4xs .muka-avatar__icon,
|
|
86
88
|
.muka-avatar--4xs .muka-avatar__fallback,
|
|
87
89
|
.muka-avatar--4xs .muka-avatar__status {
|
|
88
90
|
display: none;
|
|
@@ -118,38 +120,59 @@
|
|
|
118
120
|
.muka-avatar__skeleton {
|
|
119
121
|
position: absolute;
|
|
120
122
|
inset: 0;
|
|
123
|
+
border-radius: inherit;
|
|
121
124
|
background: linear-gradient(
|
|
122
125
|
90deg,
|
|
123
126
|
transparent 0%,
|
|
124
127
|
var(--color-surface-level1) 50%,
|
|
125
128
|
transparent 100%
|
|
126
|
-
);
|
|
129
|
+
) no-repeat;
|
|
130
|
+
background-size: 50% 100%;
|
|
127
131
|
animation: avatar-loading 1.5s ease-in-out infinite;
|
|
128
132
|
}
|
|
129
133
|
|
|
134
|
+
/* The highlight sweeps by background position, so it stays inside the
|
|
135
|
+
rounded shape without the avatar clipping its overflow */
|
|
130
136
|
@keyframes avatar-loading {
|
|
131
137
|
0% {
|
|
132
|
-
|
|
138
|
+
background-position: -100% 0;
|
|
133
139
|
}
|
|
134
140
|
100% {
|
|
135
|
-
|
|
141
|
+
background-position: 200% 0;
|
|
136
142
|
}
|
|
137
143
|
}
|
|
138
144
|
|
|
139
145
|
/* Avatar content */
|
|
140
146
|
.muka-avatar__image {
|
|
147
|
+
border-radius: inherit;
|
|
141
148
|
width: 100%;
|
|
142
149
|
height: 100%;
|
|
143
150
|
object-fit: cover;
|
|
144
151
|
display: block;
|
|
145
152
|
}
|
|
146
153
|
|
|
154
|
+
/* Icon slot: a fixed icon size per avatar size, in the initials colour
|
|
155
|
+
(subtle text) */
|
|
147
156
|
.muka-avatar__icon {
|
|
148
|
-
width: 60%;
|
|
149
|
-
height: 60%;
|
|
150
157
|
display: flex;
|
|
151
158
|
align-items: center;
|
|
152
159
|
justify-content: center;
|
|
160
|
+
color: var(--avatar-color-foreground-default);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.muka-avatar--3xs .muka-avatar__icon { width: var(--avatar-icon-size-3xs); height: var(--avatar-icon-size-3xs); }
|
|
164
|
+
.muka-avatar--2xs .muka-avatar__icon { width: var(--avatar-icon-size-2xs); height: var(--avatar-icon-size-2xs); }
|
|
165
|
+
.muka-avatar--xs .muka-avatar__icon { width: var(--avatar-icon-size-xs); height: var(--avatar-icon-size-xs); }
|
|
166
|
+
.muka-avatar--sm .muka-avatar__icon { width: var(--avatar-icon-size-sm); height: var(--avatar-icon-size-sm); }
|
|
167
|
+
.muka-avatar--md .muka-avatar__icon { width: var(--avatar-icon-size-md); height: var(--avatar-icon-size-md); }
|
|
168
|
+
.muka-avatar--lg .muka-avatar__icon { width: var(--avatar-icon-size-lg); height: var(--avatar-icon-size-lg); }
|
|
169
|
+
.muka-avatar--xl .muka-avatar__icon { width: var(--avatar-icon-size-xl); height: var(--avatar-icon-size-xl); }
|
|
170
|
+
|
|
171
|
+
/* A Muka Icon fills the slot and takes its colour (its own `color` prop still wins) */
|
|
172
|
+
.muka-avatar__icon .muka-icon {
|
|
173
|
+
width: 100%;
|
|
174
|
+
height: 100%;
|
|
175
|
+
color: inherit;
|
|
153
176
|
}
|
|
154
177
|
|
|
155
178
|
.muka-avatar__icon svg {
|
|
@@ -256,9 +279,12 @@
|
|
|
256
279
|
|
|
257
280
|
/* Avatar Group (Figma "Avatar Stack") */
|
|
258
281
|
.muka-avatar-group {
|
|
282
|
+
position: relative;
|
|
259
283
|
display: inline-flex;
|
|
260
284
|
align-items: center;
|
|
261
285
|
flex-direction: row;
|
|
286
|
+
/* Never stretch to a grid cell or column, so the badge stays on the last avatar */
|
|
287
|
+
width: fit-content;
|
|
262
288
|
}
|
|
263
289
|
|
|
264
290
|
/* Later avatars sit on top of earlier ones (DOM order); a hovered one comes to the front */
|
|
@@ -278,7 +304,7 @@
|
|
|
278
304
|
box-shadow: 0 0 0 var(--avatar-group-ring-width) var(--avatar-group-ring-color);
|
|
279
305
|
}
|
|
280
306
|
|
|
281
|
-
/* Overlap. Figma specifies exact values for
|
|
307
|
+
/* Overlap. Figma specifies exact values for 40 / 32 / 24px avatars (xs / 2xs / 3xs);
|
|
282
308
|
other sizes use the same proportions: tight 2/3, compact 1/2, spacious 1/3. */
|
|
283
309
|
.muka-avatar-group--4xs { --muka-avatar-group-size: var(--avatar-size-4xs); }
|
|
284
310
|
.muka-avatar-group--3xs { --muka-avatar-group-size: var(--avatar-size-3xs); }
|
|
@@ -293,13 +319,13 @@
|
|
|
293
319
|
.muka-avatar-group--compact { --muka-avatar-group-overlap: calc(var(--muka-avatar-group-size) / 2); }
|
|
294
320
|
.muka-avatar-group--spacious { --muka-avatar-group-overlap: calc(var(--muka-avatar-group-size) / 3); }
|
|
295
321
|
|
|
296
|
-
.muka-avatar-group--tight.muka-avatar-group--
|
|
322
|
+
.muka-avatar-group--tight.muka-avatar-group--xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-tight-xs); }
|
|
297
323
|
.muka-avatar-group--tight.muka-avatar-group--2xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-tight-2xs); }
|
|
298
324
|
.muka-avatar-group--tight.muka-avatar-group--3xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-tight-3xs); }
|
|
299
|
-
.muka-avatar-group--compact.muka-avatar-group--
|
|
325
|
+
.muka-avatar-group--compact.muka-avatar-group--xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-compact-xs); }
|
|
300
326
|
.muka-avatar-group--compact.muka-avatar-group--2xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-compact-2xs); }
|
|
301
327
|
.muka-avatar-group--compact.muka-avatar-group--3xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-compact-3xs); }
|
|
302
|
-
.muka-avatar-group--spacious.muka-avatar-group--
|
|
328
|
+
.muka-avatar-group--spacious.muka-avatar-group--xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-spacious-xs); }
|
|
303
329
|
.muka-avatar-group--spacious.muka-avatar-group--2xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-spacious-2xs); }
|
|
304
330
|
.muka-avatar-group--spacious.muka-avatar-group--3xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-spacious-3xs); }
|
|
305
331
|
|
|
@@ -307,6 +333,14 @@
|
|
|
307
333
|
margin-left: calc(-1 * var(--muka-avatar-group-overlap));
|
|
308
334
|
}
|
|
309
335
|
|
|
336
|
+
/* Badge: a BadgeNumber on the top-right corner of the stack, above every avatar */
|
|
337
|
+
.muka-avatar-group__badge {
|
|
338
|
+
position: absolute;
|
|
339
|
+
top: calc(-1 * var(--avatar-group-badge-offset));
|
|
340
|
+
right: calc(-1 * var(--avatar-group-badge-offset));
|
|
341
|
+
z-index: 20;
|
|
342
|
+
}
|
|
343
|
+
|
|
310
344
|
/* Overflow avatar styling */
|
|
311
345
|
.muka-avatar--overflow {
|
|
312
346
|
background-color: var(--avatar-color-background-default);
|
|
@@ -29,7 +29,10 @@ function getInitials(name) {
|
|
|
29
29
|
* - Loading and error states
|
|
30
30
|
* - Clickable support
|
|
31
31
|
*
|
|
32
|
-
* @accessibility WCAG 2.1 AA
|
|
32
|
+
* @accessibility WCAG 2.1 AA, except initials contrast
|
|
33
|
+
* - Initials and "+N" use subtle text by design (Figma "Avatar"), about 2.5–3.4:1
|
|
34
|
+
* on the avatar fill, below the 4.5:1 AA text minimum. They are decorative:
|
|
35
|
+
* the accessible name comes from `name`, so always pass it
|
|
33
36
|
* - Requires alt text when using image
|
|
34
37
|
* - Uses role="img" with aria-label for non-image avatars
|
|
35
38
|
* - Status indicators include aria-label
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,cAAc,CAAC;AA2CtB;;GAEG;AACH,SAAS,WAAW,CAAC,IAAY;IAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACvC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IAC1C,CAAC;IACD,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;AAChF,CAAC;AAED
|
|
1
|
+
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../components/Avatar/Avatar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React, { Children } from 'react';
|
|
3
|
+
import { BadgeNumber } from '../BadgeNumber';
|
|
3
4
|
import './Avatar.css';
|
|
4
5
|
/**
|
|
5
6
|
* AvatarGroup Component
|
|
@@ -13,12 +14,13 @@ import './Avatar.css';
|
|
|
13
14
|
* - Three spacing modes: tight, compact, spacious
|
|
14
15
|
* - Size propagation to child avatars
|
|
15
16
|
* - Overflow counter display
|
|
17
|
+
* - Optional number badge on the top-right corner
|
|
16
18
|
*
|
|
17
19
|
* @accessibility WCAG 2.1 AA compliant
|
|
18
20
|
* - Uses role="group" with aria-label
|
|
19
21
|
* - Overflow count includes accessible label
|
|
20
22
|
*/
|
|
21
|
-
export const AvatarGroup = ({ children, max = 5, size = 'md', spacing = 'compact', className = '', 'aria-label': ariaLabel = 'Avatar group', ...props }) => {
|
|
23
|
+
export const AvatarGroup = ({ children, max = 5, size = 'md', spacing = 'compact', badge, badgeLabel, className = '', 'aria-label': ariaLabel = 'Avatar group', ...props }) => {
|
|
22
24
|
const childArray = Children.toArray(children);
|
|
23
25
|
const totalCount = childArray.length;
|
|
24
26
|
const visibleCount = Math.min(max, totalCount);
|
|
@@ -45,7 +47,7 @@ export const AvatarGroup = ({ children, max = 5, size = 'md', spacing = 'compact
|
|
|
45
47
|
size: child.props.size || size,
|
|
46
48
|
...child.props,
|
|
47
49
|
}) }, index));
|
|
48
|
-
}), overflowCount > 0 && (_jsx("div", { className: "muka-avatar-group__item", children: _jsx("div", { className: overflowClasses, role: "img", "aria-label": `${overflowCount} more ${overflowCount === 1 ? 'person' : 'people'}`, children: _jsxs("span", { className: "muka-avatar__overflow-count", children: ["+", overflowCount] }) }) }))] }));
|
|
50
|
+
}), overflowCount > 0 && (_jsx("div", { className: "muka-avatar-group__item", children: _jsx("div", { className: overflowClasses, role: "img", "aria-label": `${overflowCount} more ${overflowCount === 1 ? 'person' : 'people'}`, children: _jsxs("span", { className: "muka-avatar__overflow-count", children: ["+", overflowCount] }) }) })), badge !== undefined && badge !== null && badge !== false && (_jsx(BadgeNumber, { variant: "info", size: "2xs", className: "muka-avatar-group__badge", "aria-label": badgeLabel, children: badge }))] }));
|
|
49
51
|
};
|
|
50
52
|
export default AvatarGroup;
|
|
51
53
|
//# sourceMappingURL=AvatarGroup.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../../components/Avatar/AvatarGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../../components/Avatar/AvatarGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,cAAc,CAAC;AAkCtB;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EACtD,QAAQ,EACR,GAAG,GAAG,CAAC,EACP,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,KAAK,EACL,UAAU,EACV,SAAS,GAAG,EAAE,EACd,YAAY,EAAE,SAAS,GAAG,cAAc,EACxC,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC9C,MAAM,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC;IACrC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;IAC/C,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,GAAG,GAAG,CAAC,CAAC;IAEpD,MAAM,eAAe,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC;IAE1D,MAAM,YAAY,GAAG;QACnB,mBAAmB;QACnB,sBAAsB,OAAO,EAAE;QAC/B,sBAAsB,IAAI,EAAE;QAC5B,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,MAAM,eAAe,GAAG;QACtB,aAAa;QACb,uBAAuB;QACvB,gBAAgB,IAAI,EAAE;QACtB,qBAAqB;KACtB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,eACE,SAAS,EAAE,YAAY,EACvB,IAAI,EAAC,OAAO,gBACA,SAAS,KACjB,KAAK,aAER,eAAe,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBACpC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;oBACjC,OAAO,KAAK,CAAC;gBACf,CAAC;gBAED,sDAAsD;gBACtD,OAAO,CACL,cAAiB,SAAS,EAAC,yBAAyB,YACjD,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;wBACzB,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI;wBAC9B,GAAG,KAAK,CAAC,KAAK;qBACY,CAAC,IAJrB,KAAK,CAKT,CACP,CAAC;YACJ,CAAC,CAAC,EAED,aAAa,GAAG,CAAC,IAAI,CACpB,cAAK,SAAS,EAAC,yBAAyB,YACtC,cACE,SAAS,EAAE,eAAe,EAC1B,IAAI,EAAC,KAAK,gBACE,GAAG,aAAa,SAAS,aAAa,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EAAE,YAEhF,gBAAM,SAAS,EAAC,6BAA6B,kBACzC,aAAa,IACV,GACH,GACF,CACP,EAEA,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,KAAK,IAAI,CAC3D,KAAC,WAAW,IACV,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,KAAK,EACV,SAAS,EAAC,0BAA0B,gBACxB,UAAU,YAErB,KAAK,GACM,CACf,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -86,11 +86,14 @@ export const TabList = ({ children, className = '' }) => {
|
|
|
86
86
|
};
|
|
87
87
|
return (_jsx("div", { ref: listRef, className: `muka-tabs__list ${className}`.trim(), role: "tablist", "aria-orientation": "horizontal", onKeyDown: handleKeyDown, tabIndex: -1, children: children }));
|
|
88
88
|
};
|
|
89
|
-
/**
|
|
89
|
+
/**
|
|
90
|
+
* Leading-item sizes per tab size (Figma "Tab label": icon 16 / 20 / 24,
|
|
91
|
+
* avatar and avatar group 24 / 32 / 40).
|
|
92
|
+
*/
|
|
90
93
|
const LEADING_SIZES = {
|
|
91
|
-
sm: { avatar: '
|
|
94
|
+
sm: { avatar: '3xs', pieChart: 16 },
|
|
92
95
|
md: { avatar: '2xs', pieChart: 'xs' },
|
|
93
|
-
lg: { avatar: '
|
|
96
|
+
lg: { avatar: 'xs', pieChart: 'sm' },
|
|
94
97
|
};
|
|
95
98
|
export const Tab = ({ value, children, leading, icon, disabled = false, className = '', }) => {
|
|
96
99
|
const { activeValue, setActiveValue, size } = useTabsContext();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACnG,OAAO,EAAE,MAAM,EAAE,WAAW,EAAmB,MAAM,WAAW,CAAC;AACjE,OAAO,EAAE,YAAY,EAAyB,MAAM,iBAAiB,CAAC;AACtE,OAAO,YAAY,CAAC;AAWpB,MAAM,WAAW,GAAG,aAAa,CAA0B,IAAI,CAAC,CAAC;AAEjE,MAAM,cAAc,GAAG,GAAG,EAAE;IAC1B,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACxC,IAAI,CAAC,OAAO;QAAE,MAAM,IAAI,KAAK,CAAC,uDAAuD,CAAC,CAAC;IACvF,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAiCF;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EACxC,QAAQ,EACR,YAAY,GAAG,EAAE,EACjB,KAAK,EACL,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,SAAS,GAAG,MAAM,EAClB,OAAO,GAAG,SAAS,EACnB,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IAEjE,MAAM,WAAW,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC;IAEhE,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,QAAgB,EAAE,EAAE;QACnB,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACxB,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC7B,CAAC;QACD,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC;IACvB,CAAC,EACD,CAAC,KAAK,EAAE,QAAQ,CAAC,CAClB,CAAC;IAEF,MAAM,WAAW,GAAG;QAClB,WAAW;QACX,mBAAmB,IAAI,EAAE;QACzB,oBAAoB,SAAS,EAAE;QAC/B,sBAAsB,OAAO,EAAE;QAC/B,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE,IAAI,EAAE,YAChE,cAAK,SAAS,EAAE,WAAW,YACxB,QAAQ,GACL,GACe,CACxB,CAAC;AACJ,CAAC,CAAC;AAQF,MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,EAAE,QAAQ,EAAE,SAAS,GAAG,EAAE,EAAE,EAAE,EAAE;IAC9E,MAAM,EAAE,WAAW,EAAE,GAAG,cAAc,EAAE,CAAC;IACzC,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE7C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,CAAC,OAAO;YAAE,OAAO;QAC7B,MAAM,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,aAAa,CAAoB,wBAAwB,CAAC,CAAC;QAC7F,IAAI,SAAS,EAAE,CAAC;YACd,MAAM,SAAS,GACb,SAAS,CAAC,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC,WAAW,GAAG,CAAC,GAAG,SAAS,CAAC,WAAW,GAAG,CAAC,CAAC;YACrF,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC;gBACvB,IAAI,EAAE,SAAS;gBACf,QAAQ,EAAE,QAAQ;aACnB,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,aAAa,GAAG,CAAC,CAAsB,EAAE,EAAE;QAC/C,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,EAAE,gBAAgB,CAC5C,8BAA8B,CAC/B,CAAC;QACF,IAAI,CAAC,IAAI,EAAE,MAAM;YAAE,OAAO;QAE1B,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAClC,MAAM,YAAY,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,KAAK,QAAQ,CAAC,aAAa,CAAC,CAAC;QAEjF,IAAI,SAAS,GAAkB,IAAI,CAAC;QAEpC,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,EAAE,CAAC;YAC3B,SAAS,GAAG,CAAC,YAAY,GAAG,CAAC,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC;QACnD,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YACjC,SAAS,GAAG,CAAC,YAAY,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC;QACrE,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,MAAM,EAAE,CAAC;YAC5B,SAAS,GAAG,CAAC,CAAC;QAChB,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;YAC3B,SAAS,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;QAClC,CAAC;QAED,IAAI,SAAS,KAAK,IAAI,EAAE,CAAC;YACvB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,QAAQ,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,CAAC;YAC5B,QAAQ,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,CAAC;QAC9B,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,cACE,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,mBAAmB,SAAS,EAAE,CAAC,IAAI,EAAE,EAChD,IAAI,EAAC,SAAS,sBACG,YAAY,EAC7B,SAAS,EAAE,aAAa,EACxB,QAAQ,EAAE,CAAC,CAAC,YAEX,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC;AA6BF
|
|
1
|
+
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../components/Tabs/Tabs.tsx"],"names":[],"mappings":"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"}
|