@cambly/syntax-core 18.10.0 → 18.11.1
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/Avatar/Avatar.cjs +2 -2
- package/dist/Avatar/Avatar.js +1 -1
- package/dist/Badge/Badge.d.ts +1 -1
- package/dist/Heading/Heading.d.ts +1 -1
- package/dist/Icon/Icon.cjs +2 -2
- package/dist/Icon/Icon.d.ts +1 -1
- package/dist/Icon/Icon.js +1 -1
- package/dist/RichSelect/RichSelectList.cjs +3 -3
- package/dist/RichSelect/RichSelectList.js +2 -2
- package/dist/SelectList/SelectList.cjs +3 -3
- package/dist/SelectList/SelectList.js +2 -2
- package/dist/Typography/Typography.d.ts +1 -1
- package/dist/__chunks/{E5A7QN33.cjs → 3OADGNUP.cjs} +5 -5
- package/dist/__chunks/{PE6RT2GK.cjs → 5IZ4JQU2.cjs} +18 -7
- package/dist/__chunks/5IZ4JQU2.cjs.map +1 -0
- package/dist/__chunks/{FRQEPBPS.js → 6PJ5OHZK.js} +1 -1
- package/dist/__chunks/{FRQEPBPS.js.map → 6PJ5OHZK.js.map} +1 -1
- package/dist/__chunks/{MPIUJXFD.cjs → AZYW4BBJ.cjs} +1 -1
- package/dist/__chunks/{MPIUJXFD.cjs.map → AZYW4BBJ.cjs.map} +1 -1
- package/dist/__chunks/{TYVC4QEV.cjs → IBT4YOI5.cjs} +2 -2
- package/dist/__chunks/{TYVC4QEV.cjs.map → IBT4YOI5.cjs.map} +1 -1
- package/dist/__chunks/{QTTRDMPZ.js → MBIARDDJ.js} +2 -2
- package/dist/__chunks/{TTHO5EMR.js → P4XC5C2X.js} +18 -7
- package/dist/__chunks/P4XC5C2X.js.map +1 -0
- package/dist/__chunks/{Y2DE7Y6C.cjs → QROHGWQ7.cjs} +5 -5
- package/dist/__chunks/{E2EADLLG.js → WPQECZRJ.js} +2 -2
- package/dist/__chunks/{E2EADLLG.js.map → WPQECZRJ.js.map} +1 -1
- package/dist/__chunks/{JJKHUZDD.js → ZEMKIIBU.js} +2 -2
- package/dist/colors/allColors.cjs +1 -0
- package/dist/colors/allColors.cjs.map +1 -1
- package/dist/colors/allColors.d.ts +1 -1
- package/dist/colors/allColors.js +1 -0
- package/dist/colors/allColors.js.map +1 -1
- package/dist/index.cjs +6 -6
- package/dist/index.js +5 -5
- package/package.json +1 -1
- package/dist/__chunks/PE6RT2GK.cjs.map +0 -1
- package/dist/__chunks/TTHO5EMR.js.map +0 -1
- /package/dist/__chunks/{E5A7QN33.cjs.map → 3OADGNUP.cjs.map} +0 -0
- /package/dist/__chunks/{QTTRDMPZ.js.map → MBIARDDJ.js.map} +0 -0
- /package/dist/__chunks/{Y2DE7Y6C.cjs.map → QROHGWQ7.cjs.map} +0 -0
- /package/dist/__chunks/{JJKHUZDD.js.map → ZEMKIIBU.js.map} +0 -0
package/dist/Avatar/Avatar.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _5IZ4JQU2cjs = require('../__chunks/5IZ4JQU2.cjs');
|
|
5
5
|
require('../__chunks/GEXK47GR.cjs');
|
|
6
6
|
require('../__chunks/QODNNCT2.cjs');
|
|
7
7
|
require('../__chunks/WFVGNGEP.cjs');
|
|
@@ -12,5 +12,5 @@ require('../__chunks/2XIVACBM.cjs');
|
|
|
12
12
|
require('../__chunks/X2SDR4SD.cjs');
|
|
13
13
|
|
|
14
14
|
|
|
15
|
-
exports.default =
|
|
15
|
+
exports.default = _5IZ4JQU2cjs.Avatar_default;
|
|
16
16
|
//# sourceMappingURL=Avatar.cjs.map
|
package/dist/Avatar/Avatar.js
CHANGED
package/dist/Badge/Badge.d.ts
CHANGED
|
@@ -10,7 +10,7 @@ declare const Badge: ({ icon: Icon, text, color, }: {
|
|
|
10
10
|
icon?: React.ComponentType<{
|
|
11
11
|
className?: string | undefined;
|
|
12
12
|
}> | React.ComponentType<{
|
|
13
|
-
color?: "black" | "destructive100" | "destructive200" | "destructive300" | "destructive700" | "destructive800" | "destructive900" | "gray10" | "gray100" | "gray200" | "gray30" | "gray60" | "gray300" | "gray700" | "gray80" | "gray800" | "gray900" | "orange100" | "orange200" | "orange300" | "orange700" | "orange800" | "orange900" | "primary100" | "primary200" | "primary300" | "primary700" | "primary800" | "primary900" | "purple100" | "purple200" | "purple300" | "purple700" | "purple800" | "purple900" | "success100" | "success200" | "success300" | "success700" | "success800" | "success900" | "white" | "white40" | "white70" | "yellow100" | "yellow200" | "yellow300" | "yellow700" | "yellow800" | "yellow900" | "gray270" | "gray370" | "gray870" | "cream" | "lilac" | "navy" | "orange" | "pink" | "purple" | "red" | "sky" | "slate" | "tan" | "teal" | "thistle" | undefined;
|
|
13
|
+
color?: "inherit" | "black" | "destructive100" | "destructive200" | "destructive300" | "destructive700" | "destructive800" | "destructive900" | "gray10" | "gray100" | "gray200" | "gray30" | "gray60" | "gray300" | "gray700" | "gray80" | "gray800" | "gray900" | "orange100" | "orange200" | "orange300" | "orange700" | "orange800" | "orange900" | "primary100" | "primary200" | "primary300" | "primary700" | "primary800" | "primary900" | "purple100" | "purple200" | "purple300" | "purple700" | "purple800" | "purple900" | "success100" | "success200" | "success300" | "success700" | "success800" | "success900" | "white" | "white40" | "white70" | "yellow100" | "yellow200" | "yellow300" | "yellow700" | "yellow800" | "yellow900" | "gray270" | "gray370" | "gray870" | "cream" | "lilac" | "navy" | "orange" | "pink" | "purple" | "red" | "sky" | "slate" | "tan" | "teal" | "thistle" | undefined;
|
|
14
14
|
size?: 100 | 200 | 300 | 400 | 700 | 800 | 900 | 500 | 600 | 1000 | undefined;
|
|
15
15
|
path?: string | undefined;
|
|
16
16
|
} & React.RefAttributes<SVGSVGElement>> | undefined;
|
|
@@ -27,7 +27,7 @@ declare const Heading: ({ align, as, children, color, "data-testid": dataTestId,
|
|
|
27
27
|
*
|
|
28
28
|
* @defaultValue "gray900"
|
|
29
29
|
*/
|
|
30
|
-
color?: "
|
|
30
|
+
color?: "inherit" | "gray700" | "gray900" | "white" | "primary" | "destructive-primary" | "success" | undefined;
|
|
31
31
|
/**
|
|
32
32
|
* Test id for the text.
|
|
33
33
|
*/
|
package/dist/Icon/Icon.cjs
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _IBT4YOI5cjs = require('../__chunks/IBT4YOI5.cjs');
|
|
5
5
|
require('../__chunks/2XIVACBM.cjs');
|
|
6
6
|
require('../__chunks/WFVGNGEP.cjs');
|
|
7
7
|
require('../__chunks/X2SDR4SD.cjs');
|
|
8
8
|
|
|
9
9
|
|
|
10
|
-
exports.default =
|
|
10
|
+
exports.default = _IBT4YOI5cjs.Icon_default;
|
|
11
11
|
//# sourceMappingURL=Icon.cjs.map
|
package/dist/Icon/Icon.d.ts
CHANGED
package/dist/Icon/Icon.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _3OADGNUPcjs = require('../__chunks/3OADGNUP.cjs');
|
|
5
5
|
require('../__chunks/B6775YJ4.cjs');
|
|
6
6
|
require('../__chunks/B3RYP36U.cjs');
|
|
7
7
|
require('../__chunks/3RX4RMGC.cjs');
|
|
8
8
|
require('../__chunks/PZEDDYBZ.cjs');
|
|
9
9
|
require('../__chunks/WFVGNGEP.cjs');
|
|
10
|
-
require('../__chunks/
|
|
10
|
+
require('../__chunks/AZYW4BBJ.cjs');
|
|
11
11
|
require('../__chunks/UON4NESK.cjs');
|
|
12
12
|
require('../__chunks/C5XPZTFO.cjs');
|
|
13
13
|
require('../__chunks/RIAJV3ZH.cjs');
|
|
@@ -47,5 +47,5 @@ require('../__chunks/E5P6WRJD.cjs');
|
|
|
47
47
|
require('../__chunks/X2SDR4SD.cjs');
|
|
48
48
|
|
|
49
49
|
|
|
50
|
-
exports.default =
|
|
50
|
+
exports.default = _3OADGNUPcjs.RichSelectList_default;
|
|
51
51
|
//# sourceMappingURL=RichSelectList.cjs.map
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
RichSelectList_default
|
|
4
|
-
} from "../__chunks/
|
|
4
|
+
} from "../__chunks/ZEMKIIBU.js";
|
|
5
5
|
import "../__chunks/TTCJEHHX.js";
|
|
6
6
|
import "../__chunks/3D6LFUMA.js";
|
|
7
7
|
import "../__chunks/CXENLD6O.js";
|
|
8
8
|
import "../__chunks/HVGNETJV.js";
|
|
9
9
|
import "../__chunks/4U4UW4AK.js";
|
|
10
|
-
import "../__chunks/
|
|
10
|
+
import "../__chunks/6PJ5OHZK.js";
|
|
11
11
|
import "../__chunks/KKV5SSD5.js";
|
|
12
12
|
import "../__chunks/BOX3VY3Q.js";
|
|
13
13
|
import "../__chunks/BIW5AZCF.js";
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
5
|
-
require('../__chunks/
|
|
4
|
+
var _QROHGWQ7cjs = require('../__chunks/QROHGWQ7.cjs');
|
|
5
|
+
require('../__chunks/AZYW4BBJ.cjs');
|
|
6
6
|
require('../__chunks/XLUVINJW.cjs');
|
|
7
7
|
require('../__chunks/QODNNCT2.cjs');
|
|
8
8
|
require('../__chunks/JVGX637E.cjs');
|
|
@@ -18,5 +18,5 @@ require('../__chunks/NOELZTQX.cjs');
|
|
|
18
18
|
require('../__chunks/X2SDR4SD.cjs');
|
|
19
19
|
|
|
20
20
|
|
|
21
|
-
exports.default =
|
|
21
|
+
exports.default = _QROHGWQ7cjs.SelectList;
|
|
22
22
|
//# sourceMappingURL=SelectList.cjs.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
SelectList
|
|
4
|
-
} from "../__chunks/
|
|
5
|
-
import "../__chunks/
|
|
4
|
+
} from "../__chunks/MBIARDDJ.js";
|
|
5
|
+
import "../__chunks/6PJ5OHZK.js";
|
|
6
6
|
import "../__chunks/KKADUD65.js";
|
|
7
7
|
import "../__chunks/IB6JZQF3.js";
|
|
8
8
|
import "../__chunks/SPQ7DQHG.js";
|
|
@@ -28,7 +28,7 @@ declare const Typography: React.ForwardRefExoticComponent<{
|
|
|
28
28
|
*
|
|
29
29
|
* @defaultValue "gray900"
|
|
30
30
|
*/
|
|
31
|
-
color?: "
|
|
31
|
+
color?: "inherit" | "gray700" | "gray900" | "white" | "primary" | "destructive-primary" | "destructive-darkBackground" | "success" | "success-darkBackground" | "white-secondary" | undefined;
|
|
32
32
|
/**
|
|
33
33
|
* Test id for the text
|
|
34
34
|
*/
|
|
@@ -9,7 +9,7 @@ var _3RX4RMGCcjs = require('./3RX4RMGC.cjs');
|
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _AZYW4BBJcjs = require('./AZYW4BBJ.cjs');
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
|
|
@@ -147,12 +147,12 @@ function RichSelectList(props) {
|
|
|
147
147
|
};
|
|
148
148
|
const getArrowIconColor = () => {
|
|
149
149
|
if (errorText) {
|
|
150
|
-
return
|
|
150
|
+
return _AZYW4BBJcjs.ColorBaseDestructive700;
|
|
151
151
|
} else {
|
|
152
152
|
if (color === "clear") {
|
|
153
|
-
return
|
|
153
|
+
return _AZYW4BBJcjs.ColorCambioWhite100;
|
|
154
154
|
} else {
|
|
155
|
-
return
|
|
155
|
+
return _AZYW4BBJcjs.ColorBaseGray700;
|
|
156
156
|
}
|
|
157
157
|
}
|
|
158
158
|
};
|
|
@@ -286,4 +286,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
|
|
|
286
286
|
|
|
287
287
|
|
|
288
288
|
exports.RichSelectList_default = RichSelectList_default;
|
|
289
|
-
//# sourceMappingURL=
|
|
289
|
+
//# sourceMappingURL=3OADGNUP.cjs.map
|
|
@@ -18,11 +18,11 @@ var Avatar_module_default = { "avatar": "_avatar_gvbh2_1", "avatarImage": "_avat
|
|
|
18
18
|
// src/Avatar/Avatar.tsx
|
|
19
19
|
var _jsxruntime = require('react/jsx-runtime');
|
|
20
20
|
var sizeToIconStyles = {
|
|
21
|
-
xs: { bottom:
|
|
22
|
-
sm: { bottom:
|
|
23
|
-
md: { bottom:
|
|
24
|
-
lg: { bottom:
|
|
25
|
-
xl: { bottom:
|
|
21
|
+
xs: { bottom: 4, marginInlineEnd: 0, height: 8, width: 8 },
|
|
22
|
+
sm: { bottom: 4, marginInlineEnd: 0, height: 10, width: 10 },
|
|
23
|
+
md: { bottom: 4, marginInlineEnd: 0, height: 12, width: 12 },
|
|
24
|
+
lg: { bottom: 4, marginInlineEnd: 0, height: 16, width: 16 },
|
|
25
|
+
xl: { bottom: 4, marginInlineEnd: 4, height: 16, width: 16 }
|
|
26
26
|
};
|
|
27
27
|
var sizeToMargin = {
|
|
28
28
|
xs: -10,
|
|
@@ -38,6 +38,17 @@ function AvatarInternal({
|
|
|
38
38
|
size = "md",
|
|
39
39
|
src
|
|
40
40
|
}) {
|
|
41
|
+
function getBorderSize() {
|
|
42
|
+
switch (size) {
|
|
43
|
+
case "xs":
|
|
44
|
+
case "sm":
|
|
45
|
+
return 0.5;
|
|
46
|
+
case "md":
|
|
47
|
+
case "lg":
|
|
48
|
+
case "xl":
|
|
49
|
+
return 1;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
41
52
|
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _classnames2.default.call(void 0, Avatar_module_default.avatar, Avatar_module_default[size]), children: [
|
|
42
53
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
43
54
|
"img",
|
|
@@ -61,7 +72,7 @@ function AvatarInternal({
|
|
|
61
72
|
backgroundColor: "white",
|
|
62
73
|
dangerouslySetInlineStyle: {
|
|
63
74
|
__style: _X2SDR4SDcjs.__spreadValues.call(void 0, {
|
|
64
|
-
border:
|
|
75
|
+
border: `${getBorderSize()}px solid white`
|
|
65
76
|
}, sizeToIconStyles[size])
|
|
66
77
|
},
|
|
67
78
|
rounding: "full",
|
|
@@ -125,4 +136,4 @@ var Avatar_default = Avatar;
|
|
|
125
136
|
|
|
126
137
|
|
|
127
138
|
exports.Avatar_default = Avatar_default;
|
|
128
|
-
//# sourceMappingURL=
|
|
139
|
+
//# sourceMappingURL=5IZ4JQU2.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Avatar/Avatar.tsx","css-module:./Avatar.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,gBAAgB;;;ACDqE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,eAAc,wBAAuB,sBAAqB,gCAA+B,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,MAAK,eAAc;;;AD+C/T,SACE,KADF;AAzCJ,IAAM,mBAAmB;AAAA,EACvB,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,GAAG,OAAO,EAAE;AAAA,EACzD,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,IAAI,OAAO,GAAG;AAAA,EAC3D,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,IAAI,OAAO,GAAG;AAAA,EAC3D,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,IAAI,OAAO,GAAG;AAAA,EAC3D,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,IAAI,OAAO,GAAG;AAC7D;AAEA,IAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,GAMiB;AACf,WAAS,gBAAgB;AACvB,YAAQ,MAAM;AAAA,MACZ,KAAK;AAAA,MACL,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AACH,eAAO;AAAA,IACX;AAAA,EACF;AACA,SACE,qBAAC,SAAI,WAAW,WAAW,sBAAO,QAAQ,sBAAO,IAAI,CAAC,GACpD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,WAAW;AAAA,UACT,sBAAO;AAAA,UACP,WAAW,sBAAO;AAAA,UAClB,sBAAO,IAAI;AAAA,QACb;AAAA;AAAA,IACF;AAAA,IACC,QACC,oBAAC,eAAI,SAAQ,QAAO,UAAS,YAAW,gBAAe,OACrD;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,YAAW;AAAA,QACX,gBAAe;AAAA,QACf,UAAS;AAAA,QACT,iBAAgB;AAAA,QAChB,2BAA2B;AAAA,UACzB,SAAS;AAAA,YACP,QAAQ,GAAG,cAAc;AAAA,aACtB,iBAAiB,IAAI;AAAA,QAE5B;AAAA,QACA,UAAS;AAAA,QAER;AAAA;AAAA,IACH,GACF;AAAA,KAEJ;AAEJ;AAKA,IAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,MA0BmB;AACjB,QAAM,qBAAqB,eAAe;AAE1C,MAAI,uBAAuB,MAAM;AAC/B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,2BAA2B;AAAA,UACzB,SAAS;AAAA,YACP,iBAAiB,aAAa,mBAAmB,IAAI;AAAA,UACvD;AAAA,QACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,YAAW;AAAA,YACX,gBAAe;AAAA,YACf,iBAAgB;AAAA,YAChB,UAAS;AAAA,YAET;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA,SAAO;AAAA,gBACP,MAAM,mBAAmB;AAAA,gBACzB;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,iBAAQ","sourcesContent":["import { type ReactElement } from \"react\";\nimport classNames from \"classnames\";\nimport styles from \"./Avatar.module.css\";\nimport Box from \"../Box/Box\";\nimport { useAvatarGroup } from \"../AvatarGroup/AvatarGroup\";\n\nconst sizeToIconStyles = {\n xs: { bottom: 4, marginInlineEnd: 0, height: 8, width: 8 },\n sm: { bottom: 4, marginInlineEnd: 0, height: 10, width: 10 },\n md: { bottom: 4, marginInlineEnd: 0, height: 12, width: 12 },\n lg: { bottom: 4, marginInlineEnd: 0, height: 16, width: 16 },\n xl: { bottom: 4, marginInlineEnd: 4, height: 16, width: 16 },\n} as const;\n\nconst sizeToMargin = {\n xs: -10,\n sm: -14,\n md: -22,\n lg: -28,\n xl: -34,\n} as const;\n\nfunction AvatarInternal({\n accessibilityLabel,\n icon,\n outline,\n size = \"md\",\n src,\n}: {\n accessibilityLabel: string;\n icon?: React.ReactElement;\n outline?: boolean;\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n src: string;\n}): ReactElement {\n function getBorderSize() {\n switch (size) {\n case \"xs\":\n case \"sm\":\n return 0.5;\n case \"md\":\n case \"lg\":\n case \"xl\":\n return 1;\n }\n }\n return (\n <div className={classNames(styles.avatar, styles[size])}>\n <img\n alt={accessibilityLabel}\n src={src}\n className={classNames(\n styles.avatarImage,\n outline && styles.avatarImageOutline,\n styles[size],\n )}\n />\n {icon && (\n <Box display=\"flex\" position=\"relative\" justifyContent=\"end\">\n <Box\n display=\"flex\"\n alignItems=\"center\"\n justifyContent=\"center\"\n position=\"absolute\"\n backgroundColor=\"white\"\n dangerouslySetInlineStyle={{\n __style: {\n border: `${getBorderSize()}px solid white`,\n ...sizeToIconStyles[size],\n },\n }}\n rounding=\"full\"\n >\n {icon}\n </Box>\n </Box>\n )}\n </div>\n );\n}\n\n/**\n * [Avatar](https://cambly-syntax.vercel.app/?path=/docs/components-avatar--docs) is a circular image that represents a user.\n */\nconst Avatar = ({\n accessibilityLabel,\n icon,\n size = \"md\",\n src,\n}: {\n /**\n * Alt text to use for the image.\n * This should describe the image to people using screen readers.\n */\n accessibilityLabel: string;\n /**\n * optional icon that appears on the bottom corner of the avatar\n */\n icon?: React.ReactElement;\n /**\n * Size of the avatar.\n *\n * * `xs`: 24px\n * * `sm`: 32px\n * * `md`: 48px\n * * `lg`: 64px\n * * `xl`: 80px\n *\n * @defaultValue `md`\n */\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n /**\n * URL of the image to display as the avatar.\n */\n src: string;\n}): JSX.Element => {\n const avatarGroupContext = useAvatarGroup();\n\n if (avatarGroupContext !== null) {\n return (\n <Box\n position=\"relative\"\n dangerouslySetInlineStyle={{\n __style: {\n marginInlineEnd: sizeToMargin[avatarGroupContext.size],\n },\n }}\n >\n <Box\n display=\"flex\"\n alignItems=\"center\"\n justifyContent=\"center\"\n backgroundColor=\"white\"\n rounding=\"full\"\n >\n <AvatarInternal\n accessibilityLabel={accessibilityLabel}\n icon={icon}\n outline\n size={avatarGroupContext.size}\n src={src}\n />\n </Box>\n </Box>\n );\n }\n\n return (\n <AvatarInternal\n accessibilityLabel={accessibilityLabel}\n icon={icon}\n size={size}\n src={src}\n />\n );\n};\n\nexport default Avatar;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Avatar/Avatar.module.css\"; export default {\"avatar\":\"_avatar_gvbh2_1\",\"avatarImage\":\"_avatarImage_gvbh2_5\",\"avatarImageOutline\":\"_avatarImageOutline_gvbh2_13\",\"xs\":\"_xs_gvbh2_17\",\"sm\":\"_sm_gvbh2_22\",\"md\":\"_md_gvbh2_27\",\"lg\":\"_lg_gvbh2_32\",\"xl\":\"_xl_gvbh2_37\"}"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on
|
|
1
|
+
{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Tue, 30 Jul 2024 23:41:56 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite40 = \"#ffffff\";\nexport const ColorCambioWhite70 = \"#ffffff\";\nexport const ColorCambioWhite100 = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray270 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#5e5952\";\nexport const ColorCambioGray800 = \"#363432\";\nexport const ColorCambioGray870 = \"#5e5952\";\nexport const ColorCambioGray900 = \"#262625\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\nexport const SyntaxFontSansSerif = \"-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\nexport const ShadowInteractive = \"0px 3px 16px 0px rgba(144, 134, 130, 0.05), 0px 2px 30px 0px rgba(144, 134, 130, 0.02)\";\n"],"mappings":";;;AASO,IAAM,0BAA0B;AAUhC,IAAM,mBAAmB;AAqCzB,IAAM,sBAAsB;","names":[]}
|
|
@@ -10,4 +10,4 @@ var ColorCambioWhite100 = "#ffffff";
|
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
exports.ColorBaseDestructive700 = ColorBaseDestructive700; exports.ColorBaseGray700 = ColorBaseGray700; exports.ColorCambioWhite100 = ColorCambioWhite100;
|
|
13
|
-
//# sourceMappingURL=
|
|
13
|
+
//# sourceMappingURL=AZYW4BBJ.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";;;AASO,IAAM,0BAA0B;AAUhC,IAAM,mBAAmB;AAqCzB,IAAM,sBAAsB","sourcesContent":["/**\n * Do not edit directly\n * Generated on
|
|
1
|
+
{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";;;AASO,IAAM,0BAA0B;AAUhC,IAAM,mBAAmB;AAqCzB,IAAM,sBAAsB","sourcesContent":["/**\n * Do not edit directly\n * Generated on Tue, 30 Jul 2024 23:41:56 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite40 = \"#ffffff\";\nexport const ColorCambioWhite70 = \"#ffffff\";\nexport const ColorCambioWhite100 = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray270 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#5e5952\";\nexport const ColorCambioGray800 = \"#363432\";\nexport const ColorCambioGray870 = \"#5e5952\";\nexport const ColorCambioGray900 = \"#262625\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\nexport const SyntaxFontSansSerif = \"-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\nexport const ShadowInteractive = \"0px 3px 16px 0px rgba(144, 134, 130, 0.05), 0px 2px 30px 0px rgba(144, 134, 130, 0.02)\";\n"]}
|
|
@@ -13,7 +13,7 @@ var Icon_module_default = { "icon": "_icon_1vyva_1", "icon100": "_icon100_1vyva_
|
|
|
13
13
|
// src/Icon/Icon.tsx
|
|
14
14
|
var _jsxruntime = require('react/jsx-runtime');
|
|
15
15
|
var Icon = _react.forwardRef.call(void 0,
|
|
16
|
-
({ color = "
|
|
16
|
+
({ color = "inherit", path, size = 200 }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
17
17
|
"svg",
|
|
18
18
|
{
|
|
19
19
|
className: _classnames2.default.call(void 0,
|
|
@@ -34,4 +34,4 @@ var Icon_default = Icon;
|
|
|
34
34
|
|
|
35
35
|
|
|
36
36
|
exports.Icon_default = Icon_default;
|
|
37
|
-
//# sourceMappingURL=
|
|
37
|
+
//# sourceMappingURL=IBT4YOI5.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Icon/Icon.tsx","css-module:./Icon.module.css#css-module"],"names":[],"mappings":";;;;;;AAAA,SAAS,kBAAkB;AAC3B,OAAO,gBAAgB;;;ACDiE,IAAO,sBAAQ,EAAC,QAAO,iBAAgB,WAAU,oBAAmB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,YAAW,qBAAoB;;;ADuDra;AAZN,IAAM,OAAO;AAAA,EACX,CAAC,EAAE,QAAQ,WAAW,MAAM,OAAO,IAAI,GAAc,QACnD;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,oBAAO;AAAA,QACP,sBAAY,GAAG,YAAY;AAAA,QAC3B,oBAAO,OAAO,MAAM;AAAA,MACtB;AAAA,MACA;AAAA,MACA,SAAQ;AAAA,MACR,OAAM;AAAA,MAEN,8BAAC,UAAK,GAAG,MAAM;AAAA;AAAA,EACjB;AAEJ;AAEA,KAAK,cAAc;AAEnB,IAAO,eAAQ","sourcesContent":["import { forwardRef } from \"react\";\nimport classnames from \"classnames\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport styles from \"./Icon.module.css\";\nimport type allColors from \"../colors/allColors\";\n\ntype IconProps = {\n /**\n * The color of the Icon.\n *\n * @defaultValue \"
|
|
1
|
+
{"version":3,"sources":["../../src/Icon/Icon.tsx","css-module:./Icon.module.css#css-module"],"names":[],"mappings":";;;;;;AAAA,SAAS,kBAAkB;AAC3B,OAAO,gBAAgB;;;ACDiE,IAAO,sBAAQ,EAAC,QAAO,iBAAgB,WAAU,oBAAmB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,YAAW,qBAAoB;;;ADuDra;AAZN,IAAM,OAAO;AAAA,EACX,CAAC,EAAE,QAAQ,WAAW,MAAM,OAAO,IAAI,GAAc,QACnD;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,oBAAO;AAAA,QACP,sBAAY,GAAG,YAAY;AAAA,QAC3B,oBAAO,OAAO,MAAM;AAAA,MACtB;AAAA,MACA;AAAA,MACA,SAAQ;AAAA,MACR,OAAM;AAAA,MAEN,8BAAC,UAAK,GAAG,MAAM;AAAA;AAAA,EACjB;AAEJ;AAEA,KAAK,cAAc;AAEnB,IAAO,eAAQ","sourcesContent":["import { forwardRef } from \"react\";\nimport classnames from \"classnames\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport styles from \"./Icon.module.css\";\nimport type allColors from \"../colors/allColors\";\n\ntype IconProps = {\n /**\n * The color of the Icon.\n *\n * @defaultValue \"inherit\"\n */\n color?: (typeof allColors)[number];\n /**\n * The size of the Icon.\n * * 100: 16px x 16px\n * * 200: 20px x 20px\n * * 300: 24px x 24px\n * * 400: 28px x 28px\n * * 500: 48px x 48px\n * * 600: 72px x 72px\n * * 700: 100px x 100px\n * * 800: 140px x 140px\n * * 900: 200px x 200px\n * * 1000: 280px x 280px\n *\n * @defaultValue 200\n */\n size?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;\n /**\n * The svg path of the icon. You should not use this prop directly, instead use the specific icon components.\n */\n path?: string;\n};\n\n/**\n * [Icon](http://localhost:6006/?path=/docs/icons-icons--docs) is the base component that renders an icon.\n * You shouldn't use this component directly, instead use the specific icon components.\n * @example\n * `import Book from \"@cambly/syntax-icons/Book\";`\n *\n * You can click on the icon to copy the import statement!\n */\nconst Icon = forwardRef<SVGSVGElement, IconProps>(\n ({ color = \"inherit\", path, size = 200 }: IconProps, ref) => (\n <svg\n className={classnames(\n styles.icon,\n colorStyles[`${color}Color`],\n styles[`icon${size}`],\n )}\n ref={ref}\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d={path} />\n </svg>\n ),\n);\n\nIcon.displayName = \"Icon\";\n\nexport default Icon;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Icon/Icon.module.css\"; export default {\"icon\":\"_icon_1vyva_1\",\"icon100\":\"_icon100_1vyva_8\",\"icon200\":\"_icon200_1vyva_13\",\"icon300\":\"_icon300_1vyva_18\",\"icon400\":\"_icon400_1vyva_23\",\"icon500\":\"_icon500_1vyva_28\",\"icon600\":\"_icon600_1vyva_33\",\"icon700\":\"_icon700_1vyva_38\",\"icon800\":\"_icon800_1vyva_43\",\"icon900\":\"_icon900_1vyva_48\",\"icon1000\":\"_icon1000_1vyva_53\"}"]}
|
|
@@ -3,7 +3,7 @@ import {
|
|
|
3
3
|
ColorBaseDestructive700,
|
|
4
4
|
ColorBaseGray700,
|
|
5
5
|
ColorCambioWhite100
|
|
6
|
-
} from "./
|
|
6
|
+
} from "./6PJ5OHZK.js";
|
|
7
7
|
import {
|
|
8
8
|
Focus_module_default
|
|
9
9
|
} from "./KKADUD65.js";
|
|
@@ -148,4 +148,4 @@ SelectList.Option = SelectOption_default;
|
|
|
148
148
|
export {
|
|
149
149
|
SelectList
|
|
150
150
|
};
|
|
151
|
-
//# sourceMappingURL=
|
|
151
|
+
//# sourceMappingURL=MBIARDDJ.js.map
|
|
@@ -18,11 +18,11 @@ var Avatar_module_default = { "avatar": "_avatar_gvbh2_1", "avatarImage": "_avat
|
|
|
18
18
|
// src/Avatar/Avatar.tsx
|
|
19
19
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
20
20
|
var sizeToIconStyles = {
|
|
21
|
-
xs: { bottom:
|
|
22
|
-
sm: { bottom:
|
|
23
|
-
md: { bottom:
|
|
24
|
-
lg: { bottom:
|
|
25
|
-
xl: { bottom:
|
|
21
|
+
xs: { bottom: 4, marginInlineEnd: 0, height: 8, width: 8 },
|
|
22
|
+
sm: { bottom: 4, marginInlineEnd: 0, height: 10, width: 10 },
|
|
23
|
+
md: { bottom: 4, marginInlineEnd: 0, height: 12, width: 12 },
|
|
24
|
+
lg: { bottom: 4, marginInlineEnd: 0, height: 16, width: 16 },
|
|
25
|
+
xl: { bottom: 4, marginInlineEnd: 4, height: 16, width: 16 }
|
|
26
26
|
};
|
|
27
27
|
var sizeToMargin = {
|
|
28
28
|
xs: -10,
|
|
@@ -38,6 +38,17 @@ function AvatarInternal({
|
|
|
38
38
|
size = "md",
|
|
39
39
|
src
|
|
40
40
|
}) {
|
|
41
|
+
function getBorderSize() {
|
|
42
|
+
switch (size) {
|
|
43
|
+
case "xs":
|
|
44
|
+
case "sm":
|
|
45
|
+
return 0.5;
|
|
46
|
+
case "md":
|
|
47
|
+
case "lg":
|
|
48
|
+
case "xl":
|
|
49
|
+
return 1;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
41
52
|
return /* @__PURE__ */ jsxs("div", { className: classNames(Avatar_module_default.avatar, Avatar_module_default[size]), children: [
|
|
42
53
|
/* @__PURE__ */ jsx(
|
|
43
54
|
"img",
|
|
@@ -61,7 +72,7 @@ function AvatarInternal({
|
|
|
61
72
|
backgroundColor: "white",
|
|
62
73
|
dangerouslySetInlineStyle: {
|
|
63
74
|
__style: __spreadValues({
|
|
64
|
-
border:
|
|
75
|
+
border: `${getBorderSize()}px solid white`
|
|
65
76
|
}, sizeToIconStyles[size])
|
|
66
77
|
},
|
|
67
78
|
rounding: "full",
|
|
@@ -125,4 +136,4 @@ var Avatar_default = Avatar;
|
|
|
125
136
|
export {
|
|
126
137
|
Avatar_default
|
|
127
138
|
};
|
|
128
|
-
//# sourceMappingURL=
|
|
139
|
+
//# sourceMappingURL=P4XC5C2X.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Avatar/Avatar.tsx","css-module:./Avatar.module.css#css-module"],"sourcesContent":["import { type ReactElement } from \"react\";\nimport classNames from \"classnames\";\nimport styles from \"./Avatar.module.css\";\nimport Box from \"../Box/Box\";\nimport { useAvatarGroup } from \"../AvatarGroup/AvatarGroup\";\n\nconst sizeToIconStyles = {\n xs: { bottom: 4, marginInlineEnd: 0, height: 8, width: 8 },\n sm: { bottom: 4, marginInlineEnd: 0, height: 10, width: 10 },\n md: { bottom: 4, marginInlineEnd: 0, height: 12, width: 12 },\n lg: { bottom: 4, marginInlineEnd: 0, height: 16, width: 16 },\n xl: { bottom: 4, marginInlineEnd: 4, height: 16, width: 16 },\n} as const;\n\nconst sizeToMargin = {\n xs: -10,\n sm: -14,\n md: -22,\n lg: -28,\n xl: -34,\n} as const;\n\nfunction AvatarInternal({\n accessibilityLabel,\n icon,\n outline,\n size = \"md\",\n src,\n}: {\n accessibilityLabel: string;\n icon?: React.ReactElement;\n outline?: boolean;\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n src: string;\n}): ReactElement {\n function getBorderSize() {\n switch (size) {\n case \"xs\":\n case \"sm\":\n return 0.5;\n case \"md\":\n case \"lg\":\n case \"xl\":\n return 1;\n }\n }\n return (\n <div className={classNames(styles.avatar, styles[size])}>\n <img\n alt={accessibilityLabel}\n src={src}\n className={classNames(\n styles.avatarImage,\n outline && styles.avatarImageOutline,\n styles[size],\n )}\n />\n {icon && (\n <Box display=\"flex\" position=\"relative\" justifyContent=\"end\">\n <Box\n display=\"flex\"\n alignItems=\"center\"\n justifyContent=\"center\"\n position=\"absolute\"\n backgroundColor=\"white\"\n dangerouslySetInlineStyle={{\n __style: {\n border: `${getBorderSize()}px solid white`,\n ...sizeToIconStyles[size],\n },\n }}\n rounding=\"full\"\n >\n {icon}\n </Box>\n </Box>\n )}\n </div>\n );\n}\n\n/**\n * [Avatar](https://cambly-syntax.vercel.app/?path=/docs/components-avatar--docs) is a circular image that represents a user.\n */\nconst Avatar = ({\n accessibilityLabel,\n icon,\n size = \"md\",\n src,\n}: {\n /**\n * Alt text to use for the image.\n * This should describe the image to people using screen readers.\n */\n accessibilityLabel: string;\n /**\n * optional icon that appears on the bottom corner of the avatar\n */\n icon?: React.ReactElement;\n /**\n * Size of the avatar.\n *\n * * `xs`: 24px\n * * `sm`: 32px\n * * `md`: 48px\n * * `lg`: 64px\n * * `xl`: 80px\n *\n * @defaultValue `md`\n */\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n /**\n * URL of the image to display as the avatar.\n */\n src: string;\n}): JSX.Element => {\n const avatarGroupContext = useAvatarGroup();\n\n if (avatarGroupContext !== null) {\n return (\n <Box\n position=\"relative\"\n dangerouslySetInlineStyle={{\n __style: {\n marginInlineEnd: sizeToMargin[avatarGroupContext.size],\n },\n }}\n >\n <Box\n display=\"flex\"\n alignItems=\"center\"\n justifyContent=\"center\"\n backgroundColor=\"white\"\n rounding=\"full\"\n >\n <AvatarInternal\n accessibilityLabel={accessibilityLabel}\n icon={icon}\n outline\n size={avatarGroupContext.size}\n src={src}\n />\n </Box>\n </Box>\n );\n }\n\n return (\n <AvatarInternal\n accessibilityLabel={accessibilityLabel}\n icon={icon}\n size={size}\n src={src}\n />\n );\n};\n\nexport default Avatar;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Avatar/Avatar.module.css\"; export default {\"avatar\":\"_avatar_gvbh2_1\",\"avatarImage\":\"_avatarImage_gvbh2_5\",\"avatarImageOutline\":\"_avatarImageOutline_gvbh2_13\",\"xs\":\"_xs_gvbh2_17\",\"sm\":\"_sm_gvbh2_22\",\"md\":\"_md_gvbh2_27\",\"lg\":\"_lg_gvbh2_32\",\"xl\":\"_xl_gvbh2_37\"}"],"mappings":";;;;;;;;;;;;AACA,OAAO,gBAAgB;;;ACDqE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,eAAc,wBAAuB,sBAAqB,gCAA+B,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,MAAK,eAAc;;;AD+C/T,SACE,KADF;AAzCJ,IAAM,mBAAmB;AAAA,EACvB,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,GAAG,OAAO,EAAE;AAAA,EACzD,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,IAAI,OAAO,GAAG;AAAA,EAC3D,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,IAAI,OAAO,GAAG;AAAA,EAC3D,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,IAAI,OAAO,GAAG;AAAA,EAC3D,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,IAAI,OAAO,GAAG;AAC7D;AAEA,IAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,GAMiB;AACf,WAAS,gBAAgB;AACvB,YAAQ,MAAM;AAAA,MACZ,KAAK;AAAA,MACL,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AACH,eAAO;AAAA,IACX;AAAA,EACF;AACA,SACE,qBAAC,SAAI,WAAW,WAAW,sBAAO,QAAQ,sBAAO,IAAI,CAAC,GACpD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,WAAW;AAAA,UACT,sBAAO;AAAA,UACP,WAAW,sBAAO;AAAA,UAClB,sBAAO,IAAI;AAAA,QACb;AAAA;AAAA,IACF;AAAA,IACC,QACC,oBAAC,eAAI,SAAQ,QAAO,UAAS,YAAW,gBAAe,OACrD;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,YAAW;AAAA,QACX,gBAAe;AAAA,QACf,UAAS;AAAA,QACT,iBAAgB;AAAA,QAChB,2BAA2B;AAAA,UACzB,SAAS;AAAA,YACP,QAAQ,GAAG,cAAc;AAAA,aACtB,iBAAiB,IAAI;AAAA,QAE5B;AAAA,QACA,UAAS;AAAA,QAER;AAAA;AAAA,IACH,GACF;AAAA,KAEJ;AAEJ;AAKA,IAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,MA0BmB;AACjB,QAAM,qBAAqB,eAAe;AAE1C,MAAI,uBAAuB,MAAM;AAC/B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,2BAA2B;AAAA,UACzB,SAAS;AAAA,YACP,iBAAiB,aAAa,mBAAmB,IAAI;AAAA,UACvD;AAAA,QACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,YAAW;AAAA,YACX,gBAAe;AAAA,YACf,iBAAgB;AAAA,YAChB,UAAS;AAAA,YAET;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA,SAAO;AAAA,gBACP,MAAM,mBAAmB;AAAA,gBACzB;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,iBAAQ;","names":[]}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
var
|
|
6
|
+
var _AZYW4BBJcjs = require('./AZYW4BBJ.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
var _XLUVINJWcjs = require('./XLUVINJW.cjs');
|
|
@@ -68,12 +68,12 @@ function SelectList({
|
|
|
68
68
|
};
|
|
69
69
|
const getArrowIconColor = () => {
|
|
70
70
|
if (errorText) {
|
|
71
|
-
return
|
|
71
|
+
return _AZYW4BBJcjs.ColorBaseDestructive700;
|
|
72
72
|
} else {
|
|
73
73
|
if (color === "clear") {
|
|
74
|
-
return
|
|
74
|
+
return _AZYW4BBJcjs.ColorCambioWhite100;
|
|
75
75
|
} else {
|
|
76
|
-
return
|
|
76
|
+
return _AZYW4BBJcjs.ColorBaseGray700;
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
79
|
};
|
|
@@ -148,4 +148,4 @@ SelectList.Option = _JVGX637Ecjs.SelectOption_default;
|
|
|
148
148
|
|
|
149
149
|
|
|
150
150
|
exports.SelectList = SelectList;
|
|
151
|
-
//# sourceMappingURL=
|
|
151
|
+
//# sourceMappingURL=QROHGWQ7.cjs.map
|
|
@@ -13,7 +13,7 @@ var Icon_module_default = { "icon": "_icon_1vyva_1", "icon100": "_icon100_1vyva_
|
|
|
13
13
|
// src/Icon/Icon.tsx
|
|
14
14
|
import { jsx } from "react/jsx-runtime";
|
|
15
15
|
var Icon = forwardRef(
|
|
16
|
-
({ color = "
|
|
16
|
+
({ color = "inherit", path, size = 200 }, ref) => /* @__PURE__ */ jsx(
|
|
17
17
|
"svg",
|
|
18
18
|
{
|
|
19
19
|
className: classnames(
|
|
@@ -34,4 +34,4 @@ var Icon_default = Icon;
|
|
|
34
34
|
export {
|
|
35
35
|
Icon_default
|
|
36
36
|
};
|
|
37
|
-
//# sourceMappingURL=
|
|
37
|
+
//# sourceMappingURL=WPQECZRJ.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Icon/Icon.tsx","css-module:./Icon.module.css#css-module"],"sourcesContent":["import { forwardRef } from \"react\";\nimport classnames from \"classnames\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport styles from \"./Icon.module.css\";\nimport type allColors from \"../colors/allColors\";\n\ntype IconProps = {\n /**\n * The color of the Icon.\n *\n * @defaultValue \"
|
|
1
|
+
{"version":3,"sources":["../../src/Icon/Icon.tsx","css-module:./Icon.module.css#css-module"],"sourcesContent":["import { forwardRef } from \"react\";\nimport classnames from \"classnames\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport styles from \"./Icon.module.css\";\nimport type allColors from \"../colors/allColors\";\n\ntype IconProps = {\n /**\n * The color of the Icon.\n *\n * @defaultValue \"inherit\"\n */\n color?: (typeof allColors)[number];\n /**\n * The size of the Icon.\n * * 100: 16px x 16px\n * * 200: 20px x 20px\n * * 300: 24px x 24px\n * * 400: 28px x 28px\n * * 500: 48px x 48px\n * * 600: 72px x 72px\n * * 700: 100px x 100px\n * * 800: 140px x 140px\n * * 900: 200px x 200px\n * * 1000: 280px x 280px\n *\n * @defaultValue 200\n */\n size?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;\n /**\n * The svg path of the icon. You should not use this prop directly, instead use the specific icon components.\n */\n path?: string;\n};\n\n/**\n * [Icon](http://localhost:6006/?path=/docs/icons-icons--docs) is the base component that renders an icon.\n * You shouldn't use this component directly, instead use the specific icon components.\n * @example\n * `import Book from \"@cambly/syntax-icons/Book\";`\n *\n * You can click on the icon to copy the import statement!\n */\nconst Icon = forwardRef<SVGSVGElement, IconProps>(\n ({ color = \"inherit\", path, size = 200 }: IconProps, ref) => (\n <svg\n className={classnames(\n styles.icon,\n colorStyles[`${color}Color`],\n styles[`icon${size}`],\n )}\n ref={ref}\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d={path} />\n </svg>\n ),\n);\n\nIcon.displayName = \"Icon\";\n\nexport default Icon;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Icon/Icon.module.css\"; export default {\"icon\":\"_icon_1vyva_1\",\"icon100\":\"_icon100_1vyva_8\",\"icon200\":\"_icon200_1vyva_13\",\"icon300\":\"_icon300_1vyva_18\",\"icon400\":\"_icon400_1vyva_23\",\"icon500\":\"_icon500_1vyva_28\",\"icon600\":\"_icon600_1vyva_33\",\"icon700\":\"_icon700_1vyva_38\",\"icon800\":\"_icon800_1vyva_43\",\"icon900\":\"_icon900_1vyva_48\",\"icon1000\":\"_icon1000_1vyva_53\"}"],"mappings":";;;;;;AAAA,SAAS,kBAAkB;AAC3B,OAAO,gBAAgB;;;ACDiE,IAAO,sBAAQ,EAAC,QAAO,iBAAgB,WAAU,oBAAmB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,YAAW,qBAAoB;;;ADuDra;AAZN,IAAM,OAAO;AAAA,EACX,CAAC,EAAE,QAAQ,WAAW,MAAM,OAAO,IAAI,GAAc,QACnD;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,oBAAO;AAAA,QACP,sBAAY,GAAG,YAAY;AAAA,QAC3B,oBAAO,OAAO,MAAM;AAAA,MACtB;AAAA,MACA;AAAA,MACA,SAAQ;AAAA,MACR,OAAM;AAAA,MAEN,8BAAC,UAAK,GAAG,MAAM;AAAA;AAAA,EACjB;AAEJ;AAEA,KAAK,cAAc;AAEnB,IAAO,eAAQ;","names":[]}
|
|
@@ -9,7 +9,7 @@ import {
|
|
|
9
9
|
ColorBaseDestructive700,
|
|
10
10
|
ColorBaseGray700,
|
|
11
11
|
ColorCambioWhite100
|
|
12
|
-
} from "./
|
|
12
|
+
} from "./6PJ5OHZK.js";
|
|
13
13
|
import {
|
|
14
14
|
RichSelectBoxContext,
|
|
15
15
|
RichSelectBox_default,
|
|
@@ -286,4 +286,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
|
|
|
286
286
|
export {
|
|
287
287
|
RichSelectList_default
|
|
288
288
|
};
|
|
289
|
-
//# sourceMappingURL=
|
|
289
|
+
//# sourceMappingURL=ZEMKIIBU.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/colors/allColors.ts"],"names":[],"mappings":";;;;AAAA,IAAM,SAAS;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,IAAO,oBAAQ","sourcesContent":["const colors = [\n \"black\",\n \"destructive100\",\n \"destructive200\",\n \"destructive300\",\n \"destructive700\",\n \"destructive800\",\n \"destructive900\",\n \"gray10\",\n \"gray100\",\n \"gray200\",\n \"gray30\",\n \"gray60\",\n \"gray300\",\n \"gray700\",\n \"gray80\",\n \"gray800\",\n \"gray900\",\n \"orange100\",\n \"orange200\",\n \"orange300\",\n \"orange700\",\n \"orange800\",\n \"orange900\",\n \"primary100\",\n \"primary200\",\n \"primary300\",\n \"primary700\",\n \"primary800\",\n \"primary900\",\n \"purple100\",\n \"purple200\",\n \"purple300\",\n \"purple700\",\n \"purple800\",\n \"purple900\",\n \"success100\",\n \"success200\",\n \"success300\",\n \"success700\",\n \"success800\",\n \"success900\",\n \"white\",\n \"white40\",\n \"white70\",\n \"yellow100\",\n \"yellow200\",\n \"yellow300\",\n \"yellow700\",\n \"yellow800\",\n \"yellow900\",\n\n // Cambio specific colors\n \"white40\",\n \"white70\",\n \"gray270\",\n \"gray370\",\n \"gray870\",\n \"cream\",\n \"lilac\",\n \"navy\",\n \"orange\",\n \"pink\",\n \"purple\",\n \"red\",\n \"sky\",\n \"slate\",\n \"tan\",\n \"teal\",\n \"thistle\",\n] as const;\n\nexport default colors;\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/colors/allColors.ts"],"names":[],"mappings":";;;;AAAA,IAAM,SAAS;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,IAAO,oBAAQ","sourcesContent":["const colors = [\n \"inherit\",\n \"black\",\n \"destructive100\",\n \"destructive200\",\n \"destructive300\",\n \"destructive700\",\n \"destructive800\",\n \"destructive900\",\n \"gray10\",\n \"gray100\",\n \"gray200\",\n \"gray30\",\n \"gray60\",\n \"gray300\",\n \"gray700\",\n \"gray80\",\n \"gray800\",\n \"gray900\",\n \"orange100\",\n \"orange200\",\n \"orange300\",\n \"orange700\",\n \"orange800\",\n \"orange900\",\n \"primary100\",\n \"primary200\",\n \"primary300\",\n \"primary700\",\n \"primary800\",\n \"primary900\",\n \"purple100\",\n \"purple200\",\n \"purple300\",\n \"purple700\",\n \"purple800\",\n \"purple900\",\n \"success100\",\n \"success200\",\n \"success300\",\n \"success700\",\n \"success800\",\n \"success900\",\n \"white\",\n \"white40\",\n \"white70\",\n \"yellow100\",\n \"yellow200\",\n \"yellow300\",\n \"yellow700\",\n \"yellow800\",\n \"yellow900\",\n\n // Cambio specific colors\n \"white40\",\n \"white70\",\n \"gray270\",\n \"gray370\",\n \"gray870\",\n \"cream\",\n \"lilac\",\n \"navy\",\n \"orange\",\n \"pink\",\n \"purple\",\n \"red\",\n \"sky\",\n \"slate\",\n \"tan\",\n \"teal\",\n \"thistle\",\n] as const;\n\nexport default colors;\n"]}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
declare const colors: readonly ["black", "destructive100", "destructive200", "destructive300", "destructive700", "destructive800", "destructive900", "gray10", "gray100", "gray200", "gray30", "gray60", "gray300", "gray700", "gray80", "gray800", "gray900", "orange100", "orange200", "orange300", "orange700", "orange800", "orange900", "primary100", "primary200", "primary300", "primary700", "primary800", "primary900", "purple100", "purple200", "purple300", "purple700", "purple800", "purple900", "success100", "success200", "success300", "success700", "success800", "success900", "white", "white40", "white70", "yellow100", "yellow200", "yellow300", "yellow700", "yellow800", "yellow900", "white40", "white70", "gray270", "gray370", "gray870", "cream", "lilac", "navy", "orange", "pink", "purple", "red", "sky", "slate", "tan", "teal", "thistle"];
|
|
1
|
+
declare const colors: readonly ["inherit", "black", "destructive100", "destructive200", "destructive300", "destructive700", "destructive800", "destructive900", "gray10", "gray100", "gray200", "gray30", "gray60", "gray300", "gray700", "gray80", "gray800", "gray900", "orange100", "orange200", "orange300", "orange700", "orange800", "orange900", "primary100", "primary200", "primary300", "primary700", "primary800", "primary900", "purple100", "purple200", "purple300", "purple700", "purple800", "purple900", "success100", "success200", "success300", "success700", "success800", "success900", "white", "white40", "white70", "yellow100", "yellow200", "yellow300", "yellow700", "yellow800", "yellow900", "white40", "white70", "gray270", "gray370", "gray870", "cream", "lilac", "navy", "orange", "pink", "purple", "red", "sky", "slate", "tan", "teal", "thistle"];
|
|
2
2
|
|
|
3
3
|
export { colors as default };
|
package/dist/colors/allColors.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/colors/allColors.ts"],"sourcesContent":["const colors = [\n \"black\",\n \"destructive100\",\n \"destructive200\",\n \"destructive300\",\n \"destructive700\",\n \"destructive800\",\n \"destructive900\",\n \"gray10\",\n \"gray100\",\n \"gray200\",\n \"gray30\",\n \"gray60\",\n \"gray300\",\n \"gray700\",\n \"gray80\",\n \"gray800\",\n \"gray900\",\n \"orange100\",\n \"orange200\",\n \"orange300\",\n \"orange700\",\n \"orange800\",\n \"orange900\",\n \"primary100\",\n \"primary200\",\n \"primary300\",\n \"primary700\",\n \"primary800\",\n \"primary900\",\n \"purple100\",\n \"purple200\",\n \"purple300\",\n \"purple700\",\n \"purple800\",\n \"purple900\",\n \"success100\",\n \"success200\",\n \"success300\",\n \"success700\",\n \"success800\",\n \"success900\",\n \"white\",\n \"white40\",\n \"white70\",\n \"yellow100\",\n \"yellow200\",\n \"yellow300\",\n \"yellow700\",\n \"yellow800\",\n \"yellow900\",\n\n // Cambio specific colors\n \"white40\",\n \"white70\",\n \"gray270\",\n \"gray370\",\n \"gray870\",\n \"cream\",\n \"lilac\",\n \"navy\",\n \"orange\",\n \"pink\",\n \"purple\",\n \"red\",\n \"sky\",\n \"slate\",\n \"tan\",\n \"teal\",\n \"thistle\",\n] as const;\n\nexport default colors;\n"],"mappings":";;;;AAAA,IAAM,SAAS;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,IAAO,oBAAQ;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/colors/allColors.ts"],"sourcesContent":["const colors = [\n \"inherit\",\n \"black\",\n \"destructive100\",\n \"destructive200\",\n \"destructive300\",\n \"destructive700\",\n \"destructive800\",\n \"destructive900\",\n \"gray10\",\n \"gray100\",\n \"gray200\",\n \"gray30\",\n \"gray60\",\n \"gray300\",\n \"gray700\",\n \"gray80\",\n \"gray800\",\n \"gray900\",\n \"orange100\",\n \"orange200\",\n \"orange300\",\n \"orange700\",\n \"orange800\",\n \"orange900\",\n \"primary100\",\n \"primary200\",\n \"primary300\",\n \"primary700\",\n \"primary800\",\n \"primary900\",\n \"purple100\",\n \"purple200\",\n \"purple300\",\n \"purple700\",\n \"purple800\",\n \"purple900\",\n \"success100\",\n \"success200\",\n \"success300\",\n \"success700\",\n \"success800\",\n \"success900\",\n \"white\",\n \"white40\",\n \"white70\",\n \"yellow100\",\n \"yellow200\",\n \"yellow300\",\n \"yellow700\",\n \"yellow800\",\n \"yellow900\",\n\n // Cambio specific colors\n \"white40\",\n \"white70\",\n \"gray270\",\n \"gray370\",\n \"gray870\",\n \"cream\",\n \"lilac\",\n \"navy\",\n \"orange\",\n \"pink\",\n \"purple\",\n \"red\",\n \"sky\",\n \"slate\",\n \"tan\",\n \"teal\",\n \"thistle\",\n] as const;\n\nexport default colors;\n"],"mappings":";;;;AAAA,IAAM,SAAS;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,IAAO,oBAAQ;","names":[]}
|
package/dist/index.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _5IZ4JQU2cjs = require('./__chunks/5IZ4JQU2.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
var _E3A6VFMBcjs = require('./__chunks/E3A6VFMB.cjs');
|
|
@@ -10,7 +10,7 @@ var _E3A6VFMBcjs = require('./__chunks/E3A6VFMB.cjs');
|
|
|
10
10
|
var _GEXK47GRcjs = require('./__chunks/GEXK47GR.cjs');
|
|
11
11
|
|
|
12
12
|
|
|
13
|
-
var
|
|
13
|
+
var _IBT4YOI5cjs = require('./__chunks/IBT4YOI5.cjs');
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
var _RNYDANOZcjs = require('./__chunks/RNYDANOZ.cjs');
|
|
@@ -35,10 +35,10 @@ var _RUXLZWRZcjs = require('./__chunks/RUXLZWRZ.cjs');
|
|
|
35
35
|
require('./__chunks/TH4TA3JN.cjs');
|
|
36
36
|
|
|
37
37
|
|
|
38
|
-
var
|
|
38
|
+
var _QROHGWQ7cjs = require('./__chunks/QROHGWQ7.cjs');
|
|
39
39
|
|
|
40
40
|
|
|
41
|
-
var
|
|
41
|
+
var _3OADGNUPcjs = require('./__chunks/3OADGNUP.cjs');
|
|
42
42
|
|
|
43
43
|
|
|
44
44
|
var _B6775YJ4cjs = require('./__chunks/B6775YJ4.cjs');
|
|
@@ -48,7 +48,7 @@ require('./__chunks/3RX4RMGC.cjs');
|
|
|
48
48
|
|
|
49
49
|
var _PZEDDYBZcjs = require('./__chunks/PZEDDYBZ.cjs');
|
|
50
50
|
require('./__chunks/WFVGNGEP.cjs');
|
|
51
|
-
require('./__chunks/
|
|
51
|
+
require('./__chunks/AZYW4BBJ.cjs');
|
|
52
52
|
require('./__chunks/UON4NESK.cjs');
|
|
53
53
|
|
|
54
54
|
|
|
@@ -151,5 +151,5 @@ require('./__chunks/X2SDR4SD.cjs');
|
|
|
151
151
|
|
|
152
152
|
|
|
153
153
|
|
|
154
|
-
exports.Avatar =
|
|
154
|
+
exports.Avatar = _5IZ4JQU2cjs.Avatar_default; exports.AvatarGroup = _GEXK47GRcjs.AvatarGroup; exports.Badge = _E3A6VFMBcjs.Badge_default; exports.Box = _QODNNCT2cjs.Box_default; exports.Button = _RIAJV3ZHcjs.Button_default; exports.ButtonGroup = _C5XPZTFOcjs.ButtonGroup_default; exports.Card = _AVJQ2E2Gcjs.Card_default; exports.Checkbox = _RNYDANOZcjs.Checkbox_default; exports.Chip = _IHGDCH62cjs.Chip_default; exports.Divider = _A3B4YKGNcjs.Divider; exports.Heading = _CCKTB7L5cjs.Heading_default; exports.Icon = _IBT4YOI5cjs.Icon_default; exports.IconButton = _PZEDDYBZcjs.IconButton_default; exports.IconLinkButton = _RUXLZWRZcjs.IconLinkButton_default; exports.LinkButton = _JOTFTEBXcjs.LinkButton_default; exports.Modal = _3Y6HGWJGcjs.Modal; exports.Popover = _B6775YJ4cjs.Popover_default; exports.RadioButton = _24C55LXAcjs.RadioButton_default; exports.RichSelectList = _3OADGNUPcjs.RichSelectList_default; exports.SelectList = _QROHGWQ7cjs.SelectList; exports.Tabs = _6VFQ76T5cjs.Tabs; exports.TapArea = _3UEOKPM2cjs.TapArea_default; exports.TextArea = _AUO7CEJIcjs.TextArea_default; exports.TextField = _5NI7VPKScjs.TextField; exports.ThemeProvider = _36JMUQOLcjs.ThemeProvider; exports.Tooltip = _UXSGTOGUcjs.Tooltip_default; exports.Typography = _5NQO6SP3cjs.Typography_default;
|
|
155
155
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
Avatar_default
|
|
4
|
-
} from "./__chunks/
|
|
4
|
+
} from "./__chunks/P4XC5C2X.js";
|
|
5
5
|
import {
|
|
6
6
|
Badge_default
|
|
7
7
|
} from "./__chunks/OYIKKE7V.js";
|
|
@@ -10,7 +10,7 @@ import {
|
|
|
10
10
|
} from "./__chunks/FPROMKT3.js";
|
|
11
11
|
import {
|
|
12
12
|
Icon_default
|
|
13
|
-
} from "./__chunks/
|
|
13
|
+
} from "./__chunks/WPQECZRJ.js";
|
|
14
14
|
import {
|
|
15
15
|
Checkbox_default
|
|
16
16
|
} from "./__chunks/WFOUJAMP.js";
|
|
@@ -35,10 +35,10 @@ import {
|
|
|
35
35
|
import "./__chunks/YLWWTB4I.js";
|
|
36
36
|
import {
|
|
37
37
|
SelectList
|
|
38
|
-
} from "./__chunks/
|
|
38
|
+
} from "./__chunks/MBIARDDJ.js";
|
|
39
39
|
import {
|
|
40
40
|
RichSelectList_default
|
|
41
|
-
} from "./__chunks/
|
|
41
|
+
} from "./__chunks/ZEMKIIBU.js";
|
|
42
42
|
import {
|
|
43
43
|
Popover_default
|
|
44
44
|
} from "./__chunks/TTCJEHHX.js";
|
|
@@ -48,7 +48,7 @@ import {
|
|
|
48
48
|
IconButton_default
|
|
49
49
|
} from "./__chunks/HVGNETJV.js";
|
|
50
50
|
import "./__chunks/4U4UW4AK.js";
|
|
51
|
-
import "./__chunks/
|
|
51
|
+
import "./__chunks/6PJ5OHZK.js";
|
|
52
52
|
import "./__chunks/KKV5SSD5.js";
|
|
53
53
|
import {
|
|
54
54
|
ButtonGroup_default
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Avatar/Avatar.tsx","css-module:./Avatar.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,gBAAgB;;;ACDqE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,eAAc,wBAAuB,sBAAqB,gCAA+B,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,MAAK,eAAc;;;ADoC/T,SACE,KADF;AA9BJ,IAAM,mBAAmB;AAAA,EACvB,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,GAAG,OAAO,EAAE;AAAA,EACzD,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,GAAG,OAAO,EAAE;AAAA,EACzD,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,GAAG,OAAO,EAAE;AAAA,EACzD,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,IAAI,OAAO,GAAG;AAAA,EAC3D,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,IAAI,OAAO,GAAG;AAC7D;AAEA,IAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,GAMiB;AACf,SACE,qBAAC,SAAI,WAAW,WAAW,sBAAO,QAAQ,sBAAO,IAAI,CAAC,GACpD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,WAAW;AAAA,UACT,sBAAO;AAAA,UACP,WAAW,sBAAO;AAAA,UAClB,sBAAO,IAAI;AAAA,QACb;AAAA;AAAA,IACF;AAAA,IACC,QACC,oBAAC,eAAI,SAAQ,QAAO,UAAS,YAAW,gBAAe,OACrD;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,YAAW;AAAA,QACX,gBAAe;AAAA,QACf,UAAS;AAAA,QACT,iBAAgB;AAAA,QAChB,2BAA2B;AAAA,UACzB,SAAS;AAAA,YACP,QAAQ;AAAA,aACL,iBAAiB,IAAI;AAAA,QAE5B;AAAA,QACA,UAAS;AAAA,QAER;AAAA;AAAA,IACH,GACF;AAAA,KAEJ;AAEJ;AAKA,IAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,MA0BmB;AACjB,QAAM,qBAAqB,eAAe;AAE1C,MAAI,uBAAuB,MAAM;AAC/B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,2BAA2B;AAAA,UACzB,SAAS;AAAA,YACP,iBAAiB,aAAa,mBAAmB,IAAI;AAAA,UACvD;AAAA,QACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,YAAW;AAAA,YACX,gBAAe;AAAA,YACf,iBAAgB;AAAA,YAChB,UAAS;AAAA,YAET;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA,SAAO;AAAA,gBACP,MAAM,mBAAmB;AAAA,gBACzB;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,iBAAQ","sourcesContent":["import { type ReactElement } from \"react\";\nimport classNames from \"classnames\";\nimport styles from \"./Avatar.module.css\";\nimport Box from \"../Box/Box\";\nimport { useAvatarGroup } from \"../AvatarGroup/AvatarGroup\";\n\nconst sizeToIconStyles = {\n xs: { bottom: 6, marginInlineEnd: 2, height: 4, width: 4 },\n sm: { bottom: 6, marginInlineEnd: 2, height: 4, width: 4 },\n md: { bottom: 6, marginInlineEnd: 2, height: 8, width: 8 },\n lg: { bottom: 6, marginInlineEnd: 6, height: 12, width: 12 },\n xl: { bottom: 8, marginInlineEnd: 6, height: 12, width: 12 },\n} as const;\n\nconst sizeToMargin = {\n xs: -10,\n sm: -14,\n md: -22,\n lg: -28,\n xl: -34,\n} as const;\n\nfunction AvatarInternal({\n accessibilityLabel,\n icon,\n outline,\n size = \"md\",\n src,\n}: {\n accessibilityLabel: string;\n icon?: React.ReactElement;\n outline?: boolean;\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n src: string;\n}): ReactElement {\n return (\n <div className={classNames(styles.avatar, styles[size])}>\n <img\n alt={accessibilityLabel}\n src={src}\n className={classNames(\n styles.avatarImage,\n outline && styles.avatarImageOutline,\n styles[size],\n )}\n />\n {icon && (\n <Box display=\"flex\" position=\"relative\" justifyContent=\"end\">\n <Box\n display=\"flex\"\n alignItems=\"center\"\n justifyContent=\"center\"\n position=\"absolute\"\n backgroundColor=\"white\"\n dangerouslySetInlineStyle={{\n __style: {\n border: \"1px solid white\",\n ...sizeToIconStyles[size],\n },\n }}\n rounding=\"full\"\n >\n {icon}\n </Box>\n </Box>\n )}\n </div>\n );\n}\n\n/**\n * [Avatar](https://cambly-syntax.vercel.app/?path=/docs/components-avatar--docs) is a circular image that represents a user.\n */\nconst Avatar = ({\n accessibilityLabel,\n icon,\n size = \"md\",\n src,\n}: {\n /**\n * Alt text to use for the image.\n * This should describe the image to people using screen readers.\n */\n accessibilityLabel: string;\n /**\n * optional icon that appears on the bottom corner of the avatar\n */\n icon?: React.ReactElement;\n /**\n * Size of the avatar.\n *\n * * `xs`: 24px\n * * `sm`: 32px\n * * `md`: 48px\n * * `lg`: 64px\n * * `xl`: 80px\n *\n * @defaultValue `md`\n */\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n /**\n * URL of the image to display as the avatar.\n */\n src: string;\n}): JSX.Element => {\n const avatarGroupContext = useAvatarGroup();\n\n if (avatarGroupContext !== null) {\n return (\n <Box\n position=\"relative\"\n dangerouslySetInlineStyle={{\n __style: {\n marginInlineEnd: sizeToMargin[avatarGroupContext.size],\n },\n }}\n >\n <Box\n display=\"flex\"\n alignItems=\"center\"\n justifyContent=\"center\"\n backgroundColor=\"white\"\n rounding=\"full\"\n >\n <AvatarInternal\n accessibilityLabel={accessibilityLabel}\n icon={icon}\n outline\n size={avatarGroupContext.size}\n src={src}\n />\n </Box>\n </Box>\n );\n }\n\n return (\n <AvatarInternal\n accessibilityLabel={accessibilityLabel}\n icon={icon}\n size={size}\n src={src}\n />\n );\n};\n\nexport default Avatar;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Avatar/Avatar.module.css\"; export default {\"avatar\":\"_avatar_gvbh2_1\",\"avatarImage\":\"_avatarImage_gvbh2_5\",\"avatarImageOutline\":\"_avatarImageOutline_gvbh2_13\",\"xs\":\"_xs_gvbh2_17\",\"sm\":\"_sm_gvbh2_22\",\"md\":\"_md_gvbh2_27\",\"lg\":\"_lg_gvbh2_32\",\"xl\":\"_xl_gvbh2_37\"}"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Avatar/Avatar.tsx","css-module:./Avatar.module.css#css-module"],"sourcesContent":["import { type ReactElement } from \"react\";\nimport classNames from \"classnames\";\nimport styles from \"./Avatar.module.css\";\nimport Box from \"../Box/Box\";\nimport { useAvatarGroup } from \"../AvatarGroup/AvatarGroup\";\n\nconst sizeToIconStyles = {\n xs: { bottom: 6, marginInlineEnd: 2, height: 4, width: 4 },\n sm: { bottom: 6, marginInlineEnd: 2, height: 4, width: 4 },\n md: { bottom: 6, marginInlineEnd: 2, height: 8, width: 8 },\n lg: { bottom: 6, marginInlineEnd: 6, height: 12, width: 12 },\n xl: { bottom: 8, marginInlineEnd: 6, height: 12, width: 12 },\n} as const;\n\nconst sizeToMargin = {\n xs: -10,\n sm: -14,\n md: -22,\n lg: -28,\n xl: -34,\n} as const;\n\nfunction AvatarInternal({\n accessibilityLabel,\n icon,\n outline,\n size = \"md\",\n src,\n}: {\n accessibilityLabel: string;\n icon?: React.ReactElement;\n outline?: boolean;\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n src: string;\n}): ReactElement {\n return (\n <div className={classNames(styles.avatar, styles[size])}>\n <img\n alt={accessibilityLabel}\n src={src}\n className={classNames(\n styles.avatarImage,\n outline && styles.avatarImageOutline,\n styles[size],\n )}\n />\n {icon && (\n <Box display=\"flex\" position=\"relative\" justifyContent=\"end\">\n <Box\n display=\"flex\"\n alignItems=\"center\"\n justifyContent=\"center\"\n position=\"absolute\"\n backgroundColor=\"white\"\n dangerouslySetInlineStyle={{\n __style: {\n border: \"1px solid white\",\n ...sizeToIconStyles[size],\n },\n }}\n rounding=\"full\"\n >\n {icon}\n </Box>\n </Box>\n )}\n </div>\n );\n}\n\n/**\n * [Avatar](https://cambly-syntax.vercel.app/?path=/docs/components-avatar--docs) is a circular image that represents a user.\n */\nconst Avatar = ({\n accessibilityLabel,\n icon,\n size = \"md\",\n src,\n}: {\n /**\n * Alt text to use for the image.\n * This should describe the image to people using screen readers.\n */\n accessibilityLabel: string;\n /**\n * optional icon that appears on the bottom corner of the avatar\n */\n icon?: React.ReactElement;\n /**\n * Size of the avatar.\n *\n * * `xs`: 24px\n * * `sm`: 32px\n * * `md`: 48px\n * * `lg`: 64px\n * * `xl`: 80px\n *\n * @defaultValue `md`\n */\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n /**\n * URL of the image to display as the avatar.\n */\n src: string;\n}): JSX.Element => {\n const avatarGroupContext = useAvatarGroup();\n\n if (avatarGroupContext !== null) {\n return (\n <Box\n position=\"relative\"\n dangerouslySetInlineStyle={{\n __style: {\n marginInlineEnd: sizeToMargin[avatarGroupContext.size],\n },\n }}\n >\n <Box\n display=\"flex\"\n alignItems=\"center\"\n justifyContent=\"center\"\n backgroundColor=\"white\"\n rounding=\"full\"\n >\n <AvatarInternal\n accessibilityLabel={accessibilityLabel}\n icon={icon}\n outline\n size={avatarGroupContext.size}\n src={src}\n />\n </Box>\n </Box>\n );\n }\n\n return (\n <AvatarInternal\n accessibilityLabel={accessibilityLabel}\n icon={icon}\n size={size}\n src={src}\n />\n );\n};\n\nexport default Avatar;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Avatar/Avatar.module.css\"; export default {\"avatar\":\"_avatar_gvbh2_1\",\"avatarImage\":\"_avatarImage_gvbh2_5\",\"avatarImageOutline\":\"_avatarImageOutline_gvbh2_13\",\"xs\":\"_xs_gvbh2_17\",\"sm\":\"_sm_gvbh2_22\",\"md\":\"_md_gvbh2_27\",\"lg\":\"_lg_gvbh2_32\",\"xl\":\"_xl_gvbh2_37\"}"],"mappings":";;;;;;;;;;;;AACA,OAAO,gBAAgB;;;ACDqE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,eAAc,wBAAuB,sBAAqB,gCAA+B,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,MAAK,eAAc;;;ADoC/T,SACE,KADF;AA9BJ,IAAM,mBAAmB;AAAA,EACvB,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,GAAG,OAAO,EAAE;AAAA,EACzD,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,GAAG,OAAO,EAAE;AAAA,EACzD,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,GAAG,OAAO,EAAE;AAAA,EACzD,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,IAAI,OAAO,GAAG;AAAA,EAC3D,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,IAAI,OAAO,GAAG;AAC7D;AAEA,IAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,GAMiB;AACf,SACE,qBAAC,SAAI,WAAW,WAAW,sBAAO,QAAQ,sBAAO,IAAI,CAAC,GACpD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,WAAW;AAAA,UACT,sBAAO;AAAA,UACP,WAAW,sBAAO;AAAA,UAClB,sBAAO,IAAI;AAAA,QACb;AAAA;AAAA,IACF;AAAA,IACC,QACC,oBAAC,eAAI,SAAQ,QAAO,UAAS,YAAW,gBAAe,OACrD;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,YAAW;AAAA,QACX,gBAAe;AAAA,QACf,UAAS;AAAA,QACT,iBAAgB;AAAA,QAChB,2BAA2B;AAAA,UACzB,SAAS;AAAA,YACP,QAAQ;AAAA,aACL,iBAAiB,IAAI;AAAA,QAE5B;AAAA,QACA,UAAS;AAAA,QAER;AAAA;AAAA,IACH,GACF;AAAA,KAEJ;AAEJ;AAKA,IAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,MA0BmB;AACjB,QAAM,qBAAqB,eAAe;AAE1C,MAAI,uBAAuB,MAAM;AAC/B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,2BAA2B;AAAA,UACzB,SAAS;AAAA,YACP,iBAAiB,aAAa,mBAAmB,IAAI;AAAA,UACvD;AAAA,QACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,YAAW;AAAA,YACX,gBAAe;AAAA,YACf,iBAAgB;AAAA,YAChB,UAAS;AAAA,YAET;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA,SAAO;AAAA,gBACP,MAAM,mBAAmB;AAAA,gBACzB;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,iBAAQ;","names":[]}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|