@ecohouse/ui 0.1.3 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +497 -75
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +102 -4
- package/dist/index.d.ts +102 -4
- package/dist/index.js +491 -78
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Avatar/Avatar.stories.tsx +133 -0
- package/src/components/Avatar/Avatar.tsx +389 -0
- package/src/components/Avatar/index.ts +2 -0
- package/src/components/Select/Select.tsx +1 -1
- package/src/components/index.ts +3 -0
- package/src/icons/Calendar/CalendarIcon.tsx +21 -0
- package/src/icons/Calendar/CalendarIcon.web.tsx +27 -0
- package/src/icons/Calendar/calendarPath.ts +3 -0
- package/src/icons/Calendar/index.ts +1 -0
- package/src/icons/Heart/HeartIcon.tsx +23 -0
- package/src/icons/Heart/HeartIcon.web.tsx +29 -0
- package/src/icons/Heart/heartPath.ts +3 -0
- package/src/icons/Heart/index.ts +1 -0
- package/src/icons/HelpCircle/HelpCircleIcon.tsx +25 -0
- package/src/icons/HelpCircle/HelpCircleIcon.web.tsx +31 -0
- package/src/icons/HelpCircle/helpCirclePath.ts +3 -0
- package/src/icons/HelpCircle/index.ts +1 -0
- package/src/icons/LayoutGrid/LayoutGridIcon.tsx +25 -0
- package/src/icons/LayoutGrid/LayoutGridIcon.web.tsx +31 -0
- package/src/icons/LayoutGrid/index.ts +1 -0
- package/src/icons/LayoutGrid/layoutGridPath.ts +3 -0
- package/src/icons/LogOut/LogOutIcon.tsx +21 -0
- package/src/icons/LogOut/LogOutIcon.web.tsx +27 -0
- package/src/icons/LogOut/index.ts +1 -0
- package/src/icons/LogOut/logOutPath.ts +3 -0
- package/src/icons/Settings/SettingsIcon.tsx +21 -0
- package/src/icons/Settings/SettingsIcon.web.tsx +27 -0
- package/src/icons/Settings/index.ts +1 -0
- package/src/icons/Settings/settingsPath.ts +3 -0
- package/src/icons/Video/VideoIcon.tsx +24 -0
- package/src/icons/Video/VideoIcon.web.tsx +30 -0
- package/src/icons/Video/index.ts +1 -0
- package/src/icons/Video/videoPath.ts +5 -0
- package/src/icons/index.ts +7 -0
- package/src/icons/registry.ts +17 -2
- package/src/index.ts +11 -1
- package/src/theme/colors.ts +1 -0
- package/src/theme/index.ts +1 -0
- package/src/theme/typography.ts +25 -0
package/dist/index.cjs
CHANGED
|
@@ -9,7 +9,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
|
9
9
|
|
|
10
10
|
var Svg__default = /*#__PURE__*/_interopDefault(Svg);
|
|
11
11
|
|
|
12
|
-
// src/components/
|
|
12
|
+
// src/components/Avatar/Avatar.tsx
|
|
13
13
|
|
|
14
14
|
// src/icons/ArrowRight/arrowRightPath.ts
|
|
15
15
|
var ARROW_RIGHT_PATH = "M4.16667 10H15.8333M15.8333 10L10 4.16667M15.8333 10L10 15.8333";
|
|
@@ -41,6 +41,7 @@ var colors = {
|
|
|
41
41
|
lightGrey: "#B7B7B7",
|
|
42
42
|
primaryMuted: "#B464360F",
|
|
43
43
|
redMuted: "#A63E3E0F",
|
|
44
|
+
redHover: "#A63E3E33",
|
|
44
45
|
grey0: grey["0"],
|
|
45
46
|
grey50: grey["0.5"],
|
|
46
47
|
grey100: grey["1"],
|
|
@@ -124,6 +125,29 @@ var selectTypography = {
|
|
|
124
125
|
letterSpacing: 0.36
|
|
125
126
|
}
|
|
126
127
|
};
|
|
128
|
+
var avatarTypography = {
|
|
129
|
+
name: {
|
|
130
|
+
fontFamily: fonts.sans,
|
|
131
|
+
fontSize: 14,
|
|
132
|
+
fontWeight: "600",
|
|
133
|
+
lineHeight: 14,
|
|
134
|
+
letterSpacing: 0
|
|
135
|
+
},
|
|
136
|
+
email: {
|
|
137
|
+
fontFamily: fonts.sans,
|
|
138
|
+
fontSize: 12,
|
|
139
|
+
fontWeight: "400",
|
|
140
|
+
lineHeight: 12,
|
|
141
|
+
letterSpacing: 0
|
|
142
|
+
},
|
|
143
|
+
menuItem: {
|
|
144
|
+
fontFamily: fonts.sans,
|
|
145
|
+
fontSize: 12,
|
|
146
|
+
fontWeight: "600",
|
|
147
|
+
lineHeight: 12,
|
|
148
|
+
letterSpacing: 0
|
|
149
|
+
}
|
|
150
|
+
};
|
|
127
151
|
var textareaTypography = {
|
|
128
152
|
label: {
|
|
129
153
|
fontFamily: fonts.sans,
|
|
@@ -209,6 +233,21 @@ function BuildingIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
|
|
|
209
233
|
) });
|
|
210
234
|
}
|
|
211
235
|
|
|
236
|
+
// src/icons/Calendar/calendarPath.ts
|
|
237
|
+
var CALENDAR_PATH = "M14 6.66668H2M14 8.33334V5.86668C14 4.74657 14 4.18652 13.782 3.7587C13.5903 3.38237 13.2843 3.07641 12.908 2.88466C12.4802 2.66668 11.9201 2.66668 10.8 2.66668H5.2C4.0799 2.66668 3.51984 2.66668 3.09202 2.88466C2.71569 3.07641 2.40973 3.38237 2.21799 3.7587C2 4.18652 2 4.74657 2 5.86668V11.4667C2 12.5868 2 13.1468 2.21799 13.5747C2.40973 13.951 2.71569 14.2569 3.09202 14.4487C3.51984 14.6667 4.0799 14.6667 5.2 14.6667H8M10.6667 1.33334V4.00001M5.33333 1.33334V4.00001M9.66667 12.6667L11 14L14 11";
|
|
238
|
+
function CalendarIcon({ size = 20, color = colors.primary, strokeWidth = 1.5 }) {
|
|
239
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
240
|
+
Svg.Path,
|
|
241
|
+
{
|
|
242
|
+
d: CALENDAR_PATH,
|
|
243
|
+
stroke: color,
|
|
244
|
+
strokeWidth,
|
|
245
|
+
strokeLinecap: "round",
|
|
246
|
+
strokeLinejoin: "round"
|
|
247
|
+
}
|
|
248
|
+
) });
|
|
249
|
+
}
|
|
250
|
+
|
|
212
251
|
// src/icons/Camera/cameraPath.ts
|
|
213
252
|
var CAMERA_PATH = "M9.48898 7H6.2002C5.08009 7 4.51962 7 4.0918 7.21799C3.71547 7.40973 3.40973 7.71547 3.21799 8.0918C3 8.51962 3 9.08009 3 10.2002V15.8002C3 16.9203 3 17.4796 3.21799 17.9074C3.40973 18.2837 3.71547 18.5905 4.0918 18.7822C4.5192 19 5.07899 19 6.19691 19H17.8031C18.921 19 19.48 19 19.9074 18.7822C20.2837 18.5905 20.5905 18.2837 20.7822 17.9074C21 17.48 21 16.921 21 15.8031V10.1969C21 9.07899 21 8.5192 20.7822 8.0918C20.5905 7.71547 20.2837 7.40973 19.9074 7.21799C19.4796 7 18.9203 7 17.8002 7H14.5108M9.48898 7H9.55078M9.48898 7C9.50151 7.00001 9.51468 7 9.52857 7L9.55078 7M9.48898 7C9.38286 6.99995 9.32339 6.99941 9.27637 6.99414C8.68878 6.92835 8.28578 6.36908 8.40918 5.79084C8.42066 5.73703 8.44336 5.66894 8.4883 5.53412L8.49023 5.52841C8.54156 5.37443 8.56723 5.29743 8.59558 5.22949C8.88586 4.53389 9.54322 4.06083 10.2949 4.00541C10.3683 4 10.449 4 10.6113 4H13.3886C13.5509 4 13.6322 4 13.7057 4.00541C14.4574 4.06083 15.114 4.53389 15.4043 5.22949C15.4326 5.29743 15.4584 5.37434 15.5098 5.52832C15.556 5.66699 15.5791 5.73636 15.5908 5.79093C15.7142 6.36917 15.3118 6.92835 14.7242 6.99414C14.6772 6.99941 14.6171 6.99995 14.5108 7M9.55078 7H14.449M14.449 7H14.5108M14.449 7L14.4712 7C14.4851 7 14.4983 7.00001 14.5108 7M12 16C10.3431 16 9 14.6569 9 13C9 11.3431 10.3431 10 12 10C13.6569 10 15 11.3431 15 13C15 14.6569 13.6569 16 12 16Z";
|
|
214
253
|
function CameraIcon({ size = 24, color = colors.primary, strokeWidth = 2 }) {
|
|
@@ -294,6 +333,42 @@ function FacebookIcon({ size = 20, color = colors.white }) {
|
|
|
294
333
|
return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(Svg.Path, { d: FACEBOOK_PATH, fill: color }) });
|
|
295
334
|
}
|
|
296
335
|
|
|
336
|
+
// src/icons/Heart/heartPath.ts
|
|
337
|
+
var HEART_PATH = "M7.99547 3.42388C6.66257 1.8656 4.43987 1.44643 2.76984 2.87334C1.0998 4.30026 0.864686 6.68598 2.17617 8.3736C3.26659 9.77674 6.56656 12.7361 7.64811 13.6939C7.76911 13.801 7.82961 13.8546 7.90018 13.8757C7.96178 13.8941 8.02917 13.8941 8.09077 13.8757C8.16134 13.8546 8.22184 13.801 8.34284 13.6939C9.42439 12.7361 12.7244 9.77674 13.8148 8.3736C15.1263 6.68598 14.9199 4.28525 13.2211 2.87334C11.5224 1.46144 9.32838 1.8656 7.99547 3.42388Z";
|
|
338
|
+
function HeartIcon({ size = 20, color = colors.primary, strokeWidth = 1.5 }) {
|
|
339
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
340
|
+
Svg.Path,
|
|
341
|
+
{
|
|
342
|
+
d: HEART_PATH,
|
|
343
|
+
stroke: color,
|
|
344
|
+
strokeWidth,
|
|
345
|
+
strokeLinecap: "round",
|
|
346
|
+
strokeLinejoin: "round",
|
|
347
|
+
fillRule: "evenodd",
|
|
348
|
+
clipRule: "evenodd"
|
|
349
|
+
}
|
|
350
|
+
) });
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
// src/icons/HelpCircle/helpCirclePath.ts
|
|
354
|
+
var HELP_CIRCLE_PATH = "M6.99971 6.00149C7.11717 5.66757 7.34902 5.386 7.6542 5.20665C7.95937 5.0273 8.31817 4.96174 8.66705 5.02158C9.01593 5.08142 9.33238 5.2628 9.56034 5.5336C9.7883 5.8044 9.91306 6.14714 9.91254 6.50112C9.91254 7.50037 8.41365 8 8.41365 8M8.43298 10H8.43964M8.33304 13.3333C11.4627 13.3333 13.9997 10.7963 13.9997 7.66667C13.9997 4.53705 11.4627 2 8.33304 2C5.20343 2 2.66638 4.53705 2.66638 7.66667C2.66638 8.3 2.77027 8.90906 2.96196 9.47774C3.03409 9.69175 3.07016 9.79875 3.07666 9.88095C3.08309 9.96213 3.07823 10.019 3.05814 10.098C3.03781 10.1779 2.99291 10.261 2.9031 10.4272L1.81267 12.4456C1.65713 12.7335 1.57936 12.8774 1.59676 12.9885C1.61192 13.0853 1.66887 13.1705 1.75249 13.2215C1.84849 13.2801 2.01124 13.2632 2.33674 13.2296L5.75075 12.8767C5.85414 12.866 5.90583 12.8606 5.95295 12.8624C5.99929 12.8642 6.03201 12.8686 6.0772 12.879C6.12315 12.8896 6.18092 12.9118 6.29648 12.9564C6.92851 13.1999 7.61519 13.3333 8.33304 13.3333Z";
|
|
355
|
+
function HelpCircleIcon({
|
|
356
|
+
size = 20,
|
|
357
|
+
color = colors.primary,
|
|
358
|
+
strokeWidth = 1.5
|
|
359
|
+
}) {
|
|
360
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
361
|
+
Svg.Path,
|
|
362
|
+
{
|
|
363
|
+
d: HELP_CIRCLE_PATH,
|
|
364
|
+
stroke: color,
|
|
365
|
+
strokeWidth,
|
|
366
|
+
strokeLinecap: "round",
|
|
367
|
+
strokeLinejoin: "round"
|
|
368
|
+
}
|
|
369
|
+
) });
|
|
370
|
+
}
|
|
371
|
+
|
|
297
372
|
// src/icons/Home/homePath.ts
|
|
298
373
|
var HOME_PATH = "M1.66675 16.6667H3.33341M3.33341 16.6667H8.33341M3.33341 16.6667V9.54352C3.33341 9.09823 3.33341 8.87548 3.38756 8.66828C3.43554 8.48466 3.51491 8.31089 3.6215 8.15387C3.74178 7.97668 3.90895 7.82974 4.24406 7.53652L8.24538 4.03537C8.86662 3.49178 9.17726 3.21997 9.5271 3.11652C9.83559 3.02529 10.1644 3.02529 10.4729 3.11652C10.823 3.22005 11.1341 3.49212 11.7563 4.03652L15.7563 7.53652C16.0914 7.82974 16.2586 7.97668 16.3789 8.15387C16.4855 8.31089 16.5642 8.48466 16.6122 8.66828C16.6664 8.87548 16.6667 9.09824 16.6667 9.54352V16.6667M8.33341 16.6667H11.6667M8.33341 16.6667V13.3334C8.33341 12.4129 9.07961 11.6667 10.0001 11.6667C10.9206 11.6667 11.6667 12.4129 11.6667 13.3334V16.6667M11.6667 16.6667H16.6667M16.6667 16.6667H18.3334";
|
|
299
374
|
function HomeIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
|
|
@@ -330,12 +405,46 @@ function KeyIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
|
|
|
330
405
|
) });
|
|
331
406
|
}
|
|
332
407
|
|
|
408
|
+
// src/icons/LayoutGrid/layoutGridPath.ts
|
|
409
|
+
var LAYOUT_GRID_PATH = "M4.33333 4.33333H4.34M11.6667 4.33333H11.6733M4.33333 11.6667H4.34M8.66667 8.66667H8.67333M11.6667 11.6667H11.6733M11.3333 14H14V11.3333M9.33333 11V14M14 9.33333H11M10.4 6.66667H12.9333C13.3067 6.66667 13.4934 6.66667 13.636 6.594C13.7614 6.53009 13.8634 6.4281 13.9273 6.30266C14 6.16005 14 5.97337 14 5.6V3.06667C14 2.6933 14 2.50661 13.9273 2.36401C13.8634 2.23856 13.7614 2.13658 13.636 2.07266C13.4934 2 13.3067 2 12.9333 2H10.4C10.0266 2 9.83995 2 9.69734 2.07266C9.5719 2.13658 9.46991 2.23856 9.406 2.36401C9.33333 2.50661 9.33333 2.6933 9.33333 3.06667V5.6C9.33333 5.97337 9.33333 6.16005 9.406 6.30266C9.46991 6.4281 9.5719 6.53009 9.69734 6.594C9.83995 6.66667 10.0266 6.66667 10.4 6.66667ZM3.06667 6.66667H5.6C5.97337 6.66667 6.16005 6.66667 6.30266 6.594C6.4281 6.53009 6.53009 6.4281 6.594 6.30266C6.66667 6.16005 6.66667 5.97337 6.66667 5.6V3.06667C6.66667 2.6933 6.66667 2.50661 6.594 2.36401C6.53009 2.23856 6.4281 2.13658 6.30266 2.07266C6.16005 2 5.97337 2 5.6 2H3.06667C2.6933 2 2.50661 2 2.36401 2.07266C2.23856 2.13658 2.13658 2.23856 2.07266 2.36401C2 2.50661 2 2.6933 2 3.06667V5.6C2 5.97337 2 6.16005 2.07266 6.30266C2.13658 6.4281 2.23856 6.53009 2.36401 6.594C2.50661 6.66667 2.6933 6.66667 3.06667 6.66667ZM3.06667 14H5.6C5.97337 14 6.16005 14 6.30266 13.9273C6.4281 13.8634 6.53009 13.7614 6.594 13.636C6.66667 13.4934 6.66667 13.3067 6.66667 12.9333V10.4C6.66667 10.0266 6.66667 9.83995 6.594 9.69734C6.53009 9.5719 6.4281 9.46991 6.30266 9.406C6.16005 9.33333 5.97337 9.33333 5.6 9.33333H3.06667C2.6933 9.33333 2.50661 9.33333 2.36401 9.406C2.23856 9.46991 2.13658 9.5719 2.07266 9.69734C2 9.83995 2 10.0266 2 10.4V12.9333C2 13.3067 2 13.4934 2.07266 13.636C2.13658 13.7614 2.23856 13.8634 2.36401 13.9273C2.50661 14 2.6933 14 3.06667 14Z";
|
|
410
|
+
function LayoutGridIcon({
|
|
411
|
+
size = 20,
|
|
412
|
+
color = colors.primary,
|
|
413
|
+
strokeWidth = 1.5
|
|
414
|
+
}) {
|
|
415
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
416
|
+
Svg.Path,
|
|
417
|
+
{
|
|
418
|
+
d: LAYOUT_GRID_PATH,
|
|
419
|
+
stroke: color,
|
|
420
|
+
strokeWidth,
|
|
421
|
+
strokeLinecap: "round",
|
|
422
|
+
strokeLinejoin: "round"
|
|
423
|
+
}
|
|
424
|
+
) });
|
|
425
|
+
}
|
|
426
|
+
|
|
333
427
|
// src/icons/LinkedIn/linkedinPath.ts
|
|
334
428
|
var LINKEDIN_PATH = "M15.8333 2.50098C16.2754 2.50098 16.6993 2.67657 17.0118 2.98913C17.3244 3.30169 17.5 3.72562 17.5 4.16764V15.8343C17.5 16.2763 17.3244 16.7003 17.0118 17.0128C16.6993 17.3254 16.2754 17.501 15.8333 17.501H4.16667C3.72464 17.501 3.30072 17.3254 2.98816 17.0128C2.67559 16.7003 2.5 16.2763 2.5 15.8343V4.16764C2.5 3.72562 2.67559 3.30169 2.98816 2.98913C3.30072 2.67657 3.72464 2.50098 4.16667 2.50098H15.8333ZM15.4167 15.4176V11.001C15.4167 10.2805 15.1304 9.58948 14.621 9.08C14.1115 8.57053 13.4205 8.28431 12.7 8.28431C11.9917 8.28431 11.1667 8.71764 10.7667 9.36764V8.44264H8.44167V15.4176H10.7667V11.3093C10.7667 10.6676 11.2833 10.1426 11.925 10.1426C12.2344 10.1426 12.5312 10.2656 12.75 10.4844C12.9687 10.7031 13.0917 10.9999 13.0917 11.3093V15.4176H15.4167ZM5.73333 7.13431C6.10464 7.13431 6.46073 6.98681 6.72328 6.72426C6.98583 6.46171 7.13333 6.10561 7.13333 5.73431C7.13333 4.95931 6.50833 4.32598 5.73333 4.32598C5.35982 4.32598 5.0016 4.47435 4.73749 4.73847C4.47338 5.00258 4.325 5.3608 4.325 5.73431C4.325 6.50931 4.95833 7.13431 5.73333 7.13431ZM6.89167 15.4176V8.44264H4.58333V15.4176H6.89167Z";
|
|
335
429
|
function LinkedInIcon({ size = 20, color = colors.white }) {
|
|
336
430
|
return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(Svg.Path, { d: LINKEDIN_PATH, fill: color }) });
|
|
337
431
|
}
|
|
338
432
|
|
|
433
|
+
// src/icons/LogOut/logOutPath.ts
|
|
434
|
+
var LOG_OUT_PATH = "M10.6667 4.66667L14 8L10.6667 11.3333M14 8H6M8 11.3333C8 11.5304 8 11.6289 7.99268 11.7143C7.91655 12.6013 7.26324 13.3312 6.39002 13.5049C6.30602 13.5216 6.20801 13.5324 6.01223 13.5542L5.3313 13.6299C4.30832 13.7435 3.7968 13.8004 3.39044 13.6703C2.84862 13.4969 2.40628 13.101 2.17412 12.5817C2 12.1921 2 11.6775 2 10.6482V5.3518C2 4.32251 2 3.80787 2.17412 3.41835C2.40628 2.89899 2.84862 2.50307 3.39044 2.32969C3.79681 2.19965 4.3083 2.25648 5.33129 2.37015L6.01223 2.44581C6.20808 2.46757 6.306 2.47845 6.39002 2.49515C7.26324 2.66877 7.91655 3.39869 7.99268 4.28574C8 4.37109 8 4.46962 8 4.66667";
|
|
435
|
+
function LogOutIcon({ size = 20, color = colors.red, strokeWidth = 1.5 }) {
|
|
436
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
437
|
+
Svg.Path,
|
|
438
|
+
{
|
|
439
|
+
d: LOG_OUT_PATH,
|
|
440
|
+
stroke: color,
|
|
441
|
+
strokeWidth,
|
|
442
|
+
strokeLinecap: "round",
|
|
443
|
+
strokeLinejoin: "round"
|
|
444
|
+
}
|
|
445
|
+
) });
|
|
446
|
+
}
|
|
447
|
+
|
|
339
448
|
// src/icons/Mail/mailPath.ts
|
|
340
449
|
var MAIL_PATH = "M3.33333 4.99984L8.42303 8.84339L8.42473 8.8448C8.98987 9.25924 9.27261 9.46658 9.5823 9.54668C9.85602 9.61748 10.1438 9.61748 10.4175 9.54668C10.7274 9.46651 11.011 9.25856 11.5771 8.84339C11.5771 8.84339 14.8417 6.33812 16.6667 4.99984M2.5 13.1667V6.83333C2.5 5.89991 2.5 5.43285 2.68166 5.07633C2.84144 4.76273 3.09623 4.50795 3.40983 4.34816C3.76635 4.1665 4.23341 4.1665 5.16683 4.1665H14.8335C15.7669 4.1665 16.233 4.1665 16.5895 4.34816C16.9031 4.50795 17.1587 4.76273 17.3185 5.07633C17.5 5.43251 17.5 5.899 17.5 6.8306V13.1695C17.5 14.1011 17.5 14.5669 17.3185 14.9231C17.1587 15.2367 16.9031 15.4919 16.5895 15.6517C16.2333 15.8332 15.7675 15.8332 14.8359 15.8332H5.16409C4.23249 15.8332 3.766 15.8332 3.40983 15.6517C3.09623 15.4919 2.84144 15.2367 2.68166 14.9231C2.5 14.5666 2.5 14.1001 2.5 13.1667Z";
|
|
341
450
|
function MailIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
|
|
@@ -413,6 +522,21 @@ function SearchIcon({
|
|
|
413
522
|
] });
|
|
414
523
|
}
|
|
415
524
|
|
|
525
|
+
// src/icons/Settings/settingsPath.ts
|
|
526
|
+
var SETTINGS_PATH = "M8.00004 10C9.10461 10 10 9.10457 10 8C10 6.89543 9.10461 6 8.00004 6C6.89547 6 6.00004 6.89543 6.00004 8C6.00004 9.10457 6.89547 10 8.00004 10Z M12.4849 9.81818C12.4042 10.001 12.3801 10.2038 12.4158 10.4004C12.4514 10.597 12.5452 10.7784 12.6849 10.9212L12.7213 10.9576C12.834 11.0702 12.9234 11.2038 12.9844 11.351C13.0454 11.4981 13.0768 11.6559 13.0768 11.8152C13.0768 11.9744 13.0454 12.1322 12.9844 12.2793C12.9234 12.4265 12.834 12.5602 12.7213 12.6727C12.6087 12.7854 12.475 12.8748 12.3278 12.9358C12.1807 12.9968 12.023 13.0282 11.8637 13.0282C11.7044 13.0282 11.5467 12.9968 11.3995 12.9358C11.2524 12.8748 11.1187 12.7854 11.0061 12.6727L10.9697 12.6364C10.8269 12.4966 10.6455 12.4029 10.4489 12.3673C10.2523 12.3316 10.0495 12.3557 9.86671 12.4364C9.68745 12.5132 9.53458 12.6408 9.42689 12.8034C9.31921 12.966 9.26142 13.1565 9.26065 13.3515V13.4545C9.26065 13.776 9.13294 14.0843 8.90562 14.3116C8.67831 14.539 8.37 14.6667 8.04853 14.6667C7.72705 14.6667 7.41874 14.539 7.19143 14.3116C6.96411 14.0843 6.8364 13.776 6.8364 13.4545V13.4C6.83171 13.1994 6.76678 13.0048 6.65005 12.8416C6.53331 12.6784 6.37018 12.5541 6.18186 12.4848C5.99906 12.4042 5.79629 12.3801 5.59968 12.4158C5.40308 12.4514 5.22166 12.5451 5.07883 12.6849L5.04246 12.7212C4.92989 12.8339 4.79621 12.9233 4.64906 12.9843C4.50191 13.0453 4.34418 13.0767 4.18489 13.0767C4.0256 13.0767 3.86787 13.0453 3.72072 12.9843C3.57357 12.9233 3.43989 12.8339 3.32731 12.7212C3.21461 12.6086 3.12521 12.475 3.06421 12.3278C3.00321 12.1807 2.97181 12.0229 2.97181 11.8636C2.97181 11.7043 3.00321 11.5466 3.06421 11.3995C3.12521 11.2523 3.21461 11.1186 3.32731 11.0061L3.36368 10.9697C3.5034 10.8269 3.59712 10.6454 3.63277 10.4488C3.66842 10.2522 3.64435 10.0495 3.56368 9.86667C3.48685 9.68741 3.35929 9.53454 3.19669 9.42686C3.03409 9.31917 2.84355 9.26139 2.64853 9.26061H2.5455C2.22402 9.26061 1.91571 9.1329 1.6884 8.90559C1.46108 8.67827 1.33337 8.36996 1.33337 8.04849C1.33337 7.72701 1.46108 7.4187 1.6884 7.19139C1.91571 6.96407 2.22402 6.83637 2.5455 6.83637H2.60004C2.80064 6.83167 2.9952 6.76674 3.1584 6.65001C3.32161 6.53328 3.44593 6.37014 3.51519 6.18182C3.59587 5.99902 3.61993 5.79625 3.58429 5.59965C3.54864 5.40304 3.45491 5.22163 3.31519 5.07879L3.27883 5.04243C3.16613 4.92985 3.07672 4.79617 3.01573 4.64902C2.95473 4.50187 2.92333 4.34414 2.92333 4.18485C2.92333 4.02556 2.95473 3.86783 3.01573 3.72068C3.07672 3.57353 3.16613 3.43985 3.27883 3.32728C3.3914 3.21458 3.52509 3.12517 3.67223 3.06417C3.81938 3.00317 3.97711 2.97178 4.1364 2.97178C4.2957 2.97178 4.45343 3.00317 4.60057 3.06417C4.74772 3.12517 4.88141 3.21458 4.99398 3.32728L5.03034 3.36364C5.17318 3.50336 5.3546 3.59708 5.5512 3.63273C5.7478 3.66838 5.95058 3.64431 6.13337 3.56364H6.18186C6.36111 3.48681 6.51399 3.35925 6.62167 3.19665C6.72935 3.03405 6.78714 2.84351 6.78792 2.64849V2.54546C6.78792 2.22398 6.91562 1.91567 7.14294 1.68836C7.37026 1.46104 7.67857 1.33334 8.00004 1.33334C8.32151 1.33334 8.62982 1.46104 8.85714 1.68836C9.08446 1.91567 9.21216 2.22398 9.21216 2.54546V2.6C9.21294 2.79502 9.27073 2.98556 9.37841 3.14816C9.48609 3.31076 9.63897 3.43833 9.81822 3.51515C10.001 3.59583 10.2038 3.6199 10.4004 3.58425C10.597 3.5486 10.7784 3.45487 10.9213 3.31515L10.9576 3.27879C11.0702 3.16609 11.2039 3.07669 11.351 3.01569C11.4982 2.95469 11.6559 2.92329 11.8152 2.92329C11.9745 2.92329 12.1322 2.95469 12.2794 3.01569C12.4265 3.07669 12.5602 3.16609 12.6728 3.27879C12.7855 3.39136 12.8749 3.52505 12.9359 3.6722C12.9969 3.81935 13.0283 3.97707 13.0283 4.13637C13.0283 4.29566 12.9969 4.45339 12.9359 4.60054C12.8749 4.74769 12.7855 4.88137 12.6728 4.99394L12.6364 5.03031C12.4967 5.17314 12.403 5.35456 12.3673 5.55116C12.3317 5.74776 12.3557 5.95054 12.4364 6.13334V6.18182C12.5132 6.36107 12.6408 6.51395 12.8034 6.62163C12.966 6.72932 13.1565 6.7871 13.3516 6.78788H13.4546C13.7761 6.78788 14.0844 6.91559 14.3117 7.1429C14.539 7.37022 14.6667 7.67853 14.6667 8C14.6667 8.32148 14.539 8.62978 14.3117 8.8571C14.0844 9.08442 13.7761 9.21212 13.4546 9.21212H13.4C13.205 9.2129 13.0145 9.27069 12.8519 9.37837C12.6893 9.48605 12.5617 9.63893 12.4849 9.81818Z";
|
|
527
|
+
function SettingsIcon({ size = 20, color = colors.primary, strokeWidth = 1.5 }) {
|
|
528
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
529
|
+
Svg.Path,
|
|
530
|
+
{
|
|
531
|
+
d: SETTINGS_PATH,
|
|
532
|
+
stroke: color,
|
|
533
|
+
strokeWidth,
|
|
534
|
+
strokeLinecap: "round",
|
|
535
|
+
strokeLinejoin: "round"
|
|
536
|
+
}
|
|
537
|
+
) });
|
|
538
|
+
}
|
|
539
|
+
|
|
416
540
|
// src/icons/Show/showPath.ts
|
|
417
541
|
var SHOW_PATH = "M1.66669 10C1.66669 10 4.16669 4.16667 10 4.16667C15.8334 4.16667 18.3334 10 18.3334 10C18.3334 10 15.8334 15.8333 10 15.8333C4.16669 15.8333 1.66669 10 1.66669 10Z";
|
|
418
542
|
var SHOW_PUPIL_PATH = "M10 12.5C11.3807 12.5 12.5 11.3807 12.5 10C12.5 8.61929 11.3807 7.5 10 7.5C8.61929 7.5 7.5 8.61929 7.5 10C7.5 11.3807 8.61929 12.5 10 12.5Z";
|
|
@@ -456,36 +580,63 @@ function UserIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
|
|
|
456
580
|
) });
|
|
457
581
|
}
|
|
458
582
|
|
|
583
|
+
// src/icons/Video/videoPath.ts
|
|
584
|
+
var VIDEO_PATHS = [
|
|
585
|
+
"M14.6667 5.95424C14.6667 5.55036 14.6667 5.34843 14.5868 5.25492C14.5175 5.17378 14.4136 5.13072 14.3072 5.13909C14.1846 5.14874 14.0418 5.29153 13.7563 5.57712L11.3334 7.99999L13.7563 10.4229C14.0418 10.7085 14.1846 10.8512 14.3072 10.8609C14.4136 10.8693 14.5175 10.8262 14.5868 10.7451C14.6667 10.6516 14.6667 10.4496 14.6667 10.0457V5.95424Z",
|
|
586
|
+
"M1.33337 6.53333C1.33337 5.41322 1.33337 4.85317 1.55136 4.42535C1.74311 4.04902 2.04907 3.74306 2.42539 3.55132C2.85322 3.33333 3.41327 3.33333 4.53337 3.33333H8.13337C9.25348 3.33333 9.81353 3.33333 10.2414 3.55132C10.6177 3.74306 10.9236 4.04902 11.1154 4.42535C11.3334 4.85317 11.3334 5.41322 11.3334 6.53333V9.46666C11.3334 10.5868 11.3334 11.1468 11.1154 11.5746C10.9236 11.951 10.6177 12.2569 10.2414 12.4487C9.81353 12.6667 9.25348 12.6667 8.13337 12.6667H4.53337C3.41327 12.6667 2.85322 12.6667 2.42539 12.4487C2.04907 12.2569 1.74311 11.951 1.55136 11.5746C1.33337 11.1468 1.33337 10.5868 1.33337 9.46666V6.53333Z"
|
|
587
|
+
];
|
|
588
|
+
function VideoIcon({ size = 20, color = colors.primary, strokeWidth = 1.5 }) {
|
|
589
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: VIDEO_PATHS.map((path) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
590
|
+
Svg.Path,
|
|
591
|
+
{
|
|
592
|
+
d: path,
|
|
593
|
+
stroke: color,
|
|
594
|
+
strokeWidth,
|
|
595
|
+
strokeLinecap: "round",
|
|
596
|
+
strokeLinejoin: "round"
|
|
597
|
+
},
|
|
598
|
+
path
|
|
599
|
+
)) });
|
|
600
|
+
}
|
|
601
|
+
|
|
459
602
|
// src/icons/registry.ts
|
|
460
603
|
var icons = {
|
|
461
604
|
arrowRight: ArrowRightIcon,
|
|
462
605
|
bag: BagIcon,
|
|
463
606
|
bell: BellIcon,
|
|
464
607
|
building: BuildingIcon,
|
|
608
|
+
calendar: CalendarIcon,
|
|
465
609
|
camera: CameraIcon,
|
|
466
610
|
check: CheckIcon,
|
|
467
611
|
checkBadge: CheckBadgeIcon,
|
|
468
612
|
chevronDown: ChevronDownIcon,
|
|
469
613
|
clock: ClockIcon,
|
|
470
614
|
facebook: FacebookIcon,
|
|
615
|
+
heart: HeartIcon,
|
|
616
|
+
helpCircle: HelpCircleIcon,
|
|
471
617
|
home: HomeIcon,
|
|
472
618
|
instagram: InstagramIcon,
|
|
473
619
|
key: KeyIcon,
|
|
620
|
+
layoutGrid: LayoutGridIcon,
|
|
474
621
|
linkedin: LinkedInIcon,
|
|
622
|
+
logOut: LogOutIcon,
|
|
475
623
|
mail: MailIcon,
|
|
476
624
|
navigate: NavigateIcon,
|
|
477
625
|
phone: PhoneIcon,
|
|
478
626
|
search: SearchIcon,
|
|
627
|
+
settings: SettingsIcon,
|
|
479
628
|
show: ShowIcon,
|
|
480
|
-
user: UserIcon
|
|
629
|
+
user: UserIcon,
|
|
630
|
+
video: VideoIcon
|
|
481
631
|
};
|
|
482
632
|
var iconNames = Object.keys(icons);
|
|
483
633
|
var iconGroups = {
|
|
484
634
|
navigation: ["arrowRight", "chevronDown", "home", "navigate"],
|
|
485
|
-
actions: ["show", "bell", "camera", "key", "check", "checkBadge", "search"],
|
|
486
|
-
objects: ["bag", "building", "clock", "user"],
|
|
635
|
+
actions: ["show", "bell", "camera", "key", "check", "checkBadge", "search", "calendar", "heart"],
|
|
636
|
+
objects: ["bag", "building", "clock", "user", "video"],
|
|
487
637
|
communication: ["mail", "phone"],
|
|
488
|
-
social: ["facebook", "instagram", "linkedin"]
|
|
638
|
+
social: ["facebook", "instagram", "linkedin"],
|
|
639
|
+
interface: ["layoutGrid", "settings", "helpCircle", "logOut"]
|
|
489
640
|
};
|
|
490
641
|
var iconGroupNames = Object.keys(iconGroups);
|
|
491
642
|
function getIconsByGroup(group) {
|
|
@@ -547,6 +698,268 @@ function useApplyWebClassName(ref, className, enabled = true) {
|
|
|
547
698
|
};
|
|
548
699
|
}, [ref, className, enabled]);
|
|
549
700
|
}
|
|
701
|
+
var IMAGE_SIZE = 48;
|
|
702
|
+
var CONTAINER_RADIUS = 71;
|
|
703
|
+
var CHEVRON_SIZE = 20;
|
|
704
|
+
var FALLBACK_ICON_SIZE = 20;
|
|
705
|
+
var MENU_RADIUS = 16;
|
|
706
|
+
var MENU_ITEM_RADIUS = 12;
|
|
707
|
+
var MENU_ITEM_ICON_SIZE = 16;
|
|
708
|
+
var Avatar = react.forwardRef(function Avatar2({
|
|
709
|
+
name,
|
|
710
|
+
email,
|
|
711
|
+
imageUrl,
|
|
712
|
+
onPress,
|
|
713
|
+
disabled = false,
|
|
714
|
+
showChevron = true,
|
|
715
|
+
menuItems,
|
|
716
|
+
open: openProp,
|
|
717
|
+
defaultOpen = false,
|
|
718
|
+
onOpenChange,
|
|
719
|
+
menuWidth,
|
|
720
|
+
style,
|
|
721
|
+
className,
|
|
722
|
+
accessibilityLabel,
|
|
723
|
+
hitSlop = 8,
|
|
724
|
+
...rest
|
|
725
|
+
}, forwardedRef) {
|
|
726
|
+
const wrapperRef = react.useRef(null);
|
|
727
|
+
const containerRef = react.useRef(null);
|
|
728
|
+
const setContainerRef = react.useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
|
|
729
|
+
const [imageFailed, setImageFailed] = react.useState(false);
|
|
730
|
+
const [hoveredKey, setHoveredKey] = react.useState(null);
|
|
731
|
+
const hasMenu = Boolean(menuItems && menuItems.length > 0);
|
|
732
|
+
const isInteractive = onPress != null || hasMenu;
|
|
733
|
+
const isOpenControlled = typeof openProp === "boolean";
|
|
734
|
+
const [uncontrolledOpen, setUncontrolledOpen] = react.useState(defaultOpen);
|
|
735
|
+
const isOpen = hasMenu && (isOpenControlled ? openProp : uncontrolledOpen);
|
|
736
|
+
useApplyWebClassName(containerRef, className);
|
|
737
|
+
const setOpen = react.useCallback(
|
|
738
|
+
(next) => {
|
|
739
|
+
if (!isOpenControlled) setUncontrolledOpen(next);
|
|
740
|
+
onOpenChange?.(next);
|
|
741
|
+
if (!next) setHoveredKey(null);
|
|
742
|
+
},
|
|
743
|
+
[isOpenControlled, onOpenChange]
|
|
744
|
+
);
|
|
745
|
+
const focusTrigger = react.useCallback(() => {
|
|
746
|
+
const node = containerRef.current;
|
|
747
|
+
node?.focus?.();
|
|
748
|
+
}, []);
|
|
749
|
+
const closeAndFocusTrigger = react.useCallback(() => {
|
|
750
|
+
setOpen(false);
|
|
751
|
+
focusTrigger();
|
|
752
|
+
}, [focusTrigger, setOpen]);
|
|
753
|
+
const handlePress = (event) => {
|
|
754
|
+
onPress?.(event);
|
|
755
|
+
if (hasMenu) setOpen(!isOpen);
|
|
756
|
+
};
|
|
757
|
+
const handleItemPress = react.useCallback(
|
|
758
|
+
(item) => {
|
|
759
|
+
if (item.disabled) return;
|
|
760
|
+
item.onPress();
|
|
761
|
+
closeAndFocusTrigger();
|
|
762
|
+
},
|
|
763
|
+
[closeAndFocusTrigger]
|
|
764
|
+
);
|
|
765
|
+
react.useEffect(() => {
|
|
766
|
+
if (reactNative.Platform.OS !== "web" || !isOpen) return;
|
|
767
|
+
const handlePointerDown = (event) => {
|
|
768
|
+
const wrapper = wrapperRef.current;
|
|
769
|
+
const target = event.target;
|
|
770
|
+
if (wrapper?.contains && target instanceof Node && !wrapper.contains(target)) {
|
|
771
|
+
setOpen(false);
|
|
772
|
+
}
|
|
773
|
+
};
|
|
774
|
+
document.addEventListener("mousedown", handlePointerDown);
|
|
775
|
+
document.addEventListener("touchstart", handlePointerDown);
|
|
776
|
+
return () => {
|
|
777
|
+
document.removeEventListener("mousedown", handlePointerDown);
|
|
778
|
+
document.removeEventListener("touchstart", handlePointerDown);
|
|
779
|
+
};
|
|
780
|
+
}, [isOpen, setOpen]);
|
|
781
|
+
react.useEffect(() => {
|
|
782
|
+
if (reactNative.Platform.OS !== "web" || !isOpen) return;
|
|
783
|
+
const handleKeyDown = (event) => {
|
|
784
|
+
if (event.key === "Escape") {
|
|
785
|
+
event.preventDefault();
|
|
786
|
+
closeAndFocusTrigger();
|
|
787
|
+
}
|
|
788
|
+
};
|
|
789
|
+
document.addEventListener("keydown", handleKeyDown);
|
|
790
|
+
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
791
|
+
}, [isOpen, closeAndFocusTrigger]);
|
|
792
|
+
const hasImage = Boolean(imageUrl) && !imageFailed;
|
|
793
|
+
const resolvedAccessibilityLabel = accessibilityLabel ?? [name, email].filter(Boolean).join(", ");
|
|
794
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: wrapperRef, style: [styles.wrapper, isOpen && styles.wrapperOpen], children: [
|
|
795
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
796
|
+
reactNative.Pressable,
|
|
797
|
+
{
|
|
798
|
+
...rest,
|
|
799
|
+
ref: setContainerRef,
|
|
800
|
+
onPress: handlePress,
|
|
801
|
+
disabled: disabled || !isInteractive,
|
|
802
|
+
hitSlop: isInteractive ? hitSlop : void 0,
|
|
803
|
+
accessibilityRole: isInteractive ? "button" : void 0,
|
|
804
|
+
accessibilityLabel: resolvedAccessibilityLabel,
|
|
805
|
+
accessibilityState: isInteractive ? { disabled, expanded: hasMenu ? isOpen : void 0 } : void 0,
|
|
806
|
+
style: [styles.root, disabled && styles.disabled, style],
|
|
807
|
+
children: [
|
|
808
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles.imageWrap, children: hasImage ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
809
|
+
reactNative.Image,
|
|
810
|
+
{
|
|
811
|
+
source: { uri: imageUrl ?? void 0 },
|
|
812
|
+
style: styles.image,
|
|
813
|
+
onError: () => setImageFailed(true)
|
|
814
|
+
}
|
|
815
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles.imageFallback, children: /* @__PURE__ */ jsxRuntime.jsx(UserIcon, { size: FALLBACK_ICON_SIZE, color: colors.primary }) }) }),
|
|
816
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles.textColumn, children: [
|
|
817
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.name, numberOfLines: 1, children: name }),
|
|
818
|
+
email ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.email, numberOfLines: 1, children: email }) : null
|
|
819
|
+
] }),
|
|
820
|
+
showChevron ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles.chevronSlot, isOpen && styles.chevronOpen], children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: CHEVRON_SIZE, color: isOpen ? colors.primary : colors.grey100 }) }) : null
|
|
821
|
+
]
|
|
822
|
+
}
|
|
823
|
+
),
|
|
824
|
+
hasMenu && isOpen ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles.menu, menuWidth != null && { right: void 0, width: menuWidth }], children: menuItems.map((item) => {
|
|
825
|
+
const itemKey = item.key ?? item.label;
|
|
826
|
+
const isHovered = hoveredKey === itemKey;
|
|
827
|
+
const backgroundColor = isHovered ? item.hoverColor ?? colors.grey600 : item.backgroundColor ?? "transparent";
|
|
828
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
829
|
+
reactNative.Pressable,
|
|
830
|
+
{
|
|
831
|
+
onPress: () => handleItemPress(item),
|
|
832
|
+
disabled: item.disabled,
|
|
833
|
+
onHoverIn: () => setHoveredKey(itemKey),
|
|
834
|
+
onHoverOut: () => setHoveredKey((current) => current === itemKey ? null : current),
|
|
835
|
+
onPressIn: () => setHoveredKey(itemKey),
|
|
836
|
+
onPressOut: () => setHoveredKey((current) => current === itemKey ? null : current),
|
|
837
|
+
accessibilityRole: "menuitem",
|
|
838
|
+
accessibilityState: { disabled: item.disabled },
|
|
839
|
+
style: [
|
|
840
|
+
styles.menuItem,
|
|
841
|
+
{ backgroundColor },
|
|
842
|
+
item.disabled && styles.menuItemDisabled
|
|
843
|
+
],
|
|
844
|
+
children: [
|
|
845
|
+
item.icon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles.menuItemIcon, children: item.icon }) : null,
|
|
846
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.menuItemLabel, numberOfLines: 1, children: item.label })
|
|
847
|
+
]
|
|
848
|
+
},
|
|
849
|
+
itemKey
|
|
850
|
+
);
|
|
851
|
+
}) }) : null
|
|
852
|
+
] });
|
|
853
|
+
});
|
|
854
|
+
var styles = reactNative.StyleSheet.create({
|
|
855
|
+
wrapper: {
|
|
856
|
+
position: "relative",
|
|
857
|
+
alignSelf: "flex-start"
|
|
858
|
+
},
|
|
859
|
+
wrapperOpen: {
|
|
860
|
+
zIndex: 20
|
|
861
|
+
},
|
|
862
|
+
root: {
|
|
863
|
+
flexDirection: "row",
|
|
864
|
+
alignItems: "center",
|
|
865
|
+
alignSelf: "flex-start",
|
|
866
|
+
gap: 12,
|
|
867
|
+
paddingTop: 4,
|
|
868
|
+
paddingBottom: 4,
|
|
869
|
+
paddingLeft: 4,
|
|
870
|
+
paddingRight: 12,
|
|
871
|
+
borderRadius: CONTAINER_RADIUS,
|
|
872
|
+
backgroundColor: colors.grey700
|
|
873
|
+
},
|
|
874
|
+
disabled: {
|
|
875
|
+
opacity: 0.6
|
|
876
|
+
},
|
|
877
|
+
imageWrap: {
|
|
878
|
+
width: IMAGE_SIZE,
|
|
879
|
+
height: IMAGE_SIZE,
|
|
880
|
+
borderRadius: IMAGE_SIZE / 2,
|
|
881
|
+
overflow: "hidden",
|
|
882
|
+
flexShrink: 0
|
|
883
|
+
},
|
|
884
|
+
image: {
|
|
885
|
+
width: IMAGE_SIZE,
|
|
886
|
+
height: IMAGE_SIZE
|
|
887
|
+
},
|
|
888
|
+
imageFallback: {
|
|
889
|
+
width: IMAGE_SIZE,
|
|
890
|
+
height: IMAGE_SIZE,
|
|
891
|
+
alignItems: "center",
|
|
892
|
+
justifyContent: "center",
|
|
893
|
+
backgroundColor: colors.grey600
|
|
894
|
+
},
|
|
895
|
+
textColumn: {
|
|
896
|
+
minWidth: 0,
|
|
897
|
+
flexShrink: 1,
|
|
898
|
+
gap: 3
|
|
899
|
+
},
|
|
900
|
+
name: {
|
|
901
|
+
...avatarTypography.name,
|
|
902
|
+
color: colors.white
|
|
903
|
+
},
|
|
904
|
+
email: {
|
|
905
|
+
...avatarTypography.email,
|
|
906
|
+
color: colors.grey0
|
|
907
|
+
},
|
|
908
|
+
chevronSlot: {
|
|
909
|
+
width: CHEVRON_SIZE,
|
|
910
|
+
height: CHEVRON_SIZE,
|
|
911
|
+
alignItems: "center",
|
|
912
|
+
justifyContent: "center",
|
|
913
|
+
flexShrink: 0
|
|
914
|
+
},
|
|
915
|
+
chevronOpen: {
|
|
916
|
+
transform: [{ rotate: "180deg" }]
|
|
917
|
+
},
|
|
918
|
+
menu: {
|
|
919
|
+
position: "absolute",
|
|
920
|
+
top: "100%",
|
|
921
|
+
left: 0,
|
|
922
|
+
right: 0,
|
|
923
|
+
marginTop: 8,
|
|
924
|
+
zIndex: 10,
|
|
925
|
+
borderRadius: MENU_RADIUS,
|
|
926
|
+
padding: 8,
|
|
927
|
+
gap: 8,
|
|
928
|
+
backgroundColor: colors.grey700,
|
|
929
|
+
...reactNative.Platform.select({
|
|
930
|
+
web: {
|
|
931
|
+
boxShadow: `0 8px 24px ${colors.black}73`
|
|
932
|
+
},
|
|
933
|
+
default: {
|
|
934
|
+
elevation: 8
|
|
935
|
+
}
|
|
936
|
+
})
|
|
937
|
+
},
|
|
938
|
+
menuItem: {
|
|
939
|
+
minHeight: 40,
|
|
940
|
+
borderRadius: MENU_ITEM_RADIUS,
|
|
941
|
+
paddingVertical: 12,
|
|
942
|
+
paddingHorizontal: 12,
|
|
943
|
+
flexDirection: "row",
|
|
944
|
+
alignItems: "center",
|
|
945
|
+
gap: 8
|
|
946
|
+
},
|
|
947
|
+
menuItemDisabled: {
|
|
948
|
+
opacity: 0.5
|
|
949
|
+
},
|
|
950
|
+
menuItemIcon: {
|
|
951
|
+
width: MENU_ITEM_ICON_SIZE,
|
|
952
|
+
height: MENU_ITEM_ICON_SIZE,
|
|
953
|
+
alignItems: "center",
|
|
954
|
+
justifyContent: "center",
|
|
955
|
+
flexShrink: 0
|
|
956
|
+
},
|
|
957
|
+
menuItemLabel: {
|
|
958
|
+
...avatarTypography.menuItem,
|
|
959
|
+
color: colors.white,
|
|
960
|
+
flex: 1
|
|
961
|
+
}
|
|
962
|
+
});
|
|
550
963
|
var variantConfig = {
|
|
551
964
|
primary: {
|
|
552
965
|
backgroundColor: colors.primary,
|
|
@@ -619,7 +1032,7 @@ var Button = react.forwardRef(
|
|
|
619
1032
|
useApplyWebClassName(textRef, textClassName);
|
|
620
1033
|
const iconNode = customIcon ?? /* @__PURE__ */ jsxRuntime.jsx(ArrowRightIcon, { size: metrics.iconSize, color: preset.iconColor });
|
|
621
1034
|
const containerStyle = [
|
|
622
|
-
|
|
1035
|
+
styles2.base,
|
|
623
1036
|
{
|
|
624
1037
|
minHeight: metrics.minHeight,
|
|
625
1038
|
borderRadius: metrics.borderRadius,
|
|
@@ -630,15 +1043,15 @@ var Button = react.forwardRef(
|
|
|
630
1043
|
paddingRight: hasIcon ? metrics.paddingRightWithIcon : metrics.paddingRight,
|
|
631
1044
|
gap: hasIcon ? metrics.gap : 0
|
|
632
1045
|
},
|
|
633
|
-
disabled &&
|
|
1046
|
+
disabled && styles2.disabled,
|
|
634
1047
|
style
|
|
635
1048
|
];
|
|
636
1049
|
const labelStyle = [
|
|
637
|
-
|
|
1050
|
+
styles2.label,
|
|
638
1051
|
metrics.text,
|
|
639
1052
|
{ color: preset.textColor },
|
|
640
|
-
reactNative.Platform.OS === "android" ?
|
|
641
|
-
!hasIcon &&
|
|
1053
|
+
reactNative.Platform.OS === "android" ? styles2.labelAndroid : null,
|
|
1054
|
+
!hasIcon && styles2.labelCentered,
|
|
642
1055
|
textStyle
|
|
643
1056
|
];
|
|
644
1057
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -659,7 +1072,7 @@ var Button = react.forwardRef(
|
|
|
659
1072
|
reactNative.View,
|
|
660
1073
|
{
|
|
661
1074
|
style: [
|
|
662
|
-
|
|
1075
|
+
styles2.iconContainer,
|
|
663
1076
|
{
|
|
664
1077
|
width: metrics.iconContainerSize,
|
|
665
1078
|
height: metrics.iconContainerSize,
|
|
@@ -675,7 +1088,7 @@ var Button = react.forwardRef(
|
|
|
675
1088
|
);
|
|
676
1089
|
}
|
|
677
1090
|
);
|
|
678
|
-
var
|
|
1091
|
+
var styles2 = reactNative.StyleSheet.create({
|
|
679
1092
|
base: {
|
|
680
1093
|
flexDirection: "row",
|
|
681
1094
|
alignItems: "center",
|
|
@@ -753,13 +1166,13 @@ var Checkbox = react.forwardRef(function Checkbox2({
|
|
|
753
1166
|
accessibilityRole: "checkbox",
|
|
754
1167
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
755
1168
|
accessibilityState: { checked: isActive, disabled },
|
|
756
|
-
style: [
|
|
1169
|
+
style: [styles3.root, disabled && styles3.disabled, style],
|
|
757
1170
|
children: [
|
|
758
1171
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
759
1172
|
reactNative.View,
|
|
760
1173
|
{
|
|
761
1174
|
style: [
|
|
762
|
-
|
|
1175
|
+
styles3.box,
|
|
763
1176
|
{
|
|
764
1177
|
backgroundColor: chrome.backgroundColor,
|
|
765
1178
|
borderColor: chrome.borderColor
|
|
@@ -768,12 +1181,12 @@ var Checkbox = react.forwardRef(function Checkbox2({
|
|
|
768
1181
|
children: isActive ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { size: CHECK_SIZE, color: colors.primary, strokeWidth: CHECK_STROKE }) : null
|
|
769
1182
|
}
|
|
770
1183
|
),
|
|
771
|
-
labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
1184
|
+
labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles3.label, labelStyle], children: labelContent }) : labelContent : null
|
|
772
1185
|
]
|
|
773
1186
|
}
|
|
774
1187
|
);
|
|
775
1188
|
});
|
|
776
|
-
var
|
|
1189
|
+
var styles3 = reactNative.StyleSheet.create({
|
|
777
1190
|
root: {
|
|
778
1191
|
flexDirection: "row",
|
|
779
1192
|
alignItems: "center",
|
|
@@ -921,13 +1334,13 @@ var Input = react.forwardRef(function Input2({
|
|
|
921
1334
|
const rightIconNode = rightIcon ?? /* @__PURE__ */ jsxRuntime.jsx(ShowIcon, { size: metrics.iconSize, color: chrome.rightIconColor });
|
|
922
1335
|
useApplyWebClassName(rootRef, className);
|
|
923
1336
|
useApplyWebClassName(inputRef, inputClassName);
|
|
924
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [
|
|
925
|
-
showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
1337
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [styles4.root, disabled && styles4.disabled, style], children: [
|
|
1338
|
+
showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.label, { color: chrome.labelColor }], children: label }) : null,
|
|
926
1339
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
927
1340
|
reactNative.View,
|
|
928
1341
|
{
|
|
929
1342
|
style: [
|
|
930
|
-
|
|
1343
|
+
styles4.field,
|
|
931
1344
|
{
|
|
932
1345
|
height: metrics.height,
|
|
933
1346
|
borderRadius: metrics.borderRadius,
|
|
@@ -942,7 +1355,7 @@ var Input = react.forwardRef(function Input2({
|
|
|
942
1355
|
fieldStyle
|
|
943
1356
|
],
|
|
944
1357
|
children: [
|
|
945
|
-
hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [
|
|
1358
|
+
hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles4.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: leftIconNode }) : null,
|
|
946
1359
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
947
1360
|
reactNative.TextInput,
|
|
948
1361
|
{
|
|
@@ -966,11 +1379,11 @@ var Input = react.forwardRef(function Input2({
|
|
|
966
1379
|
onBlur?.(event);
|
|
967
1380
|
},
|
|
968
1381
|
style: [
|
|
969
|
-
|
|
1382
|
+
styles4.input,
|
|
970
1383
|
metrics.text,
|
|
971
1384
|
{ color: chrome.textColor },
|
|
972
|
-
reactNative.Platform.OS === "web" ?
|
|
973
|
-
reactNative.Platform.OS === "android" ?
|
|
1385
|
+
reactNative.Platform.OS === "web" ? styles4.inputWeb : null,
|
|
1386
|
+
reactNative.Platform.OS === "android" ? styles4.inputAndroid : null,
|
|
974
1387
|
inputStyle
|
|
975
1388
|
],
|
|
976
1389
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
@@ -982,20 +1395,20 @@ var Input = react.forwardRef(function Input2({
|
|
|
982
1395
|
{
|
|
983
1396
|
onPress: onRightIconPress,
|
|
984
1397
|
disabled,
|
|
985
|
-
style: [
|
|
1398
|
+
style: [styles4.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }],
|
|
986
1399
|
accessibilityRole: "button",
|
|
987
1400
|
accessibilityLabel: rightIconAccessibilityLabel,
|
|
988
1401
|
hitSlop: 8,
|
|
989
1402
|
children: rightIconNode
|
|
990
1403
|
}
|
|
991
|
-
) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [
|
|
1404
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles4.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: rightIconNode }) : null
|
|
992
1405
|
]
|
|
993
1406
|
}
|
|
994
1407
|
),
|
|
995
|
-
showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
1408
|
+
showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.hint, { color: chrome.hintColor }], children: hint }) : null
|
|
996
1409
|
] });
|
|
997
1410
|
});
|
|
998
|
-
var
|
|
1411
|
+
var styles4 = reactNative.StyleSheet.create({
|
|
999
1412
|
root: {
|
|
1000
1413
|
width: DEFAULT_WIDTH,
|
|
1001
1414
|
gap: 8,
|
|
@@ -1035,7 +1448,7 @@ var styles3 = reactNative.StyleSheet.create({
|
|
|
1035
1448
|
var DEFAULT_WIDTH2 = 308;
|
|
1036
1449
|
var TRIGGER_HEIGHT = 44;
|
|
1037
1450
|
var TRIGGER_RADIUS = 60;
|
|
1038
|
-
var
|
|
1451
|
+
var MENU_RADIUS2 = 24;
|
|
1039
1452
|
var MENU_MAX_LIST_HEIGHT = 248;
|
|
1040
1453
|
var ITEM_RADIUS = 12;
|
|
1041
1454
|
var ICON_SIZE = 20;
|
|
@@ -1111,25 +1524,25 @@ function MultiValueChips({ options, disabled, onRemove }) {
|
|
|
1111
1524
|
const next = Math.ceil(event.nativeEvent.layout.width);
|
|
1112
1525
|
setEllipsisWidth((current) => current === next ? current : next);
|
|
1113
1526
|
};
|
|
1114
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
1115
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { pointerEvents: "none", style:
|
|
1527
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.multiValueRoot, children: [
|
|
1528
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { pointerEvents: "none", style: styles5.measureRow, children: [
|
|
1116
1529
|
options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1117
1530
|
reactNative.View,
|
|
1118
1531
|
{
|
|
1119
|
-
style:
|
|
1532
|
+
style: styles5.chip,
|
|
1120
1533
|
onLayout: (event) => handleChipLayout(option.value, event),
|
|
1121
1534
|
children: [
|
|
1122
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style:
|
|
1123
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style:
|
|
1535
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles5.chipLabel, numberOfLines: 1, children: option.label }),
|
|
1536
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles5.chipRemove, children: "\xD7" })
|
|
1124
1537
|
]
|
|
1125
1538
|
},
|
|
1126
1539
|
`measure-${option.value}`
|
|
1127
1540
|
)),
|
|
1128
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
1541
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles5.ellipsis, onLayout: handleEllipsisLayout, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles5.ellipsisText, children: "..." }) })
|
|
1129
1542
|
] }),
|
|
1130
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
1131
|
-
visible.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
1132
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style:
|
|
1543
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.chipsRow, onLayout: handleContainerLayout, children: [
|
|
1544
|
+
visible.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.chip, children: [
|
|
1545
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles5.chipLabel, numberOfLines: 1, children: option.label }),
|
|
1133
1546
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1134
1547
|
reactNative.Pressable,
|
|
1135
1548
|
{
|
|
@@ -1141,11 +1554,11 @@ function MultiValueChips({ options, disabled, onRemove }) {
|
|
|
1141
1554
|
hitSlop: 6,
|
|
1142
1555
|
accessibilityRole: "button",
|
|
1143
1556
|
accessibilityLabel: `Remove ${option.label}`,
|
|
1144
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style:
|
|
1557
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles5.chipRemove, children: "\xD7" })
|
|
1145
1558
|
}
|
|
1146
1559
|
)
|
|
1147
1560
|
] }, option.value)),
|
|
1148
|
-
hasOverflow ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
1561
|
+
hasOverflow ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles5.ellipsis, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles5.ellipsisText, children: "..." }) }) : null
|
|
1149
1562
|
] })
|
|
1150
1563
|
] });
|
|
1151
1564
|
}
|
|
@@ -1372,11 +1785,11 @@ var Select = react.forwardRef(
|
|
|
1372
1785
|
{
|
|
1373
1786
|
...rest,
|
|
1374
1787
|
ref: setRootRef,
|
|
1375
|
-
style: [
|
|
1788
|
+
style: [styles5.root, isOpen && styles5.rootOpen, disabled && styles5.disabled, style],
|
|
1376
1789
|
accessibilityState: { disabled, expanded: isOpen },
|
|
1377
1790
|
children: [
|
|
1378
|
-
showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
1379
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [
|
|
1791
|
+
showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.label, { color: labelColor }], children: label }) : null,
|
|
1792
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles5.triggerWrap, isOpen && styles5.triggerWrapOpen], children: [
|
|
1380
1793
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1381
1794
|
reactNative.Pressable,
|
|
1382
1795
|
{
|
|
@@ -1387,29 +1800,29 @@ var Select = react.forwardRef(
|
|
|
1387
1800
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
1388
1801
|
accessibilityState: { disabled, expanded: isOpen },
|
|
1389
1802
|
style: [
|
|
1390
|
-
|
|
1803
|
+
styles5.trigger,
|
|
1391
1804
|
{
|
|
1392
1805
|
borderColor: triggerBorderColor,
|
|
1393
1806
|
backgroundColor: colors.grey700
|
|
1394
1807
|
}
|
|
1395
1808
|
],
|
|
1396
1809
|
children: [
|
|
1397
|
-
hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
1398
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
1810
|
+
hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles5.iconSlot, children: leftIconNode }) : null,
|
|
1811
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles5.triggerContent, children: multiple && hasValue ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1399
1812
|
MultiValueChips,
|
|
1400
1813
|
{
|
|
1401
1814
|
options: selectedOptions,
|
|
1402
1815
|
disabled,
|
|
1403
1816
|
onRemove: handleRemoveChip
|
|
1404
1817
|
}
|
|
1405
|
-
) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
1406
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [
|
|
1818
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: multiple ? placeholder : singleLabel }) }),
|
|
1819
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles5.iconSlot, isOpen && styles5.chevronOpen], children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: ICON_SIZE, color: isOpen ? colors.primary : colors.grey100 }) })
|
|
1407
1820
|
]
|
|
1408
1821
|
}
|
|
1409
1822
|
),
|
|
1410
|
-
isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
1411
|
-
showSearch ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
1412
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
1823
|
+
isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.menu, children: [
|
|
1824
|
+
showSearch ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.searchField, children: [
|
|
1825
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles5.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { size: ICON_SIZE, color: colors.grey100 }) }),
|
|
1413
1826
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1414
1827
|
reactNative.TextInput,
|
|
1415
1828
|
{
|
|
@@ -1420,9 +1833,9 @@ var Select = react.forwardRef(
|
|
|
1420
1833
|
placeholder: searchPlaceholder,
|
|
1421
1834
|
placeholderTextColor: colors.grey100,
|
|
1422
1835
|
style: [
|
|
1423
|
-
|
|
1424
|
-
reactNative.Platform.OS === "web" ?
|
|
1425
|
-
reactNative.Platform.OS === "android" ?
|
|
1836
|
+
styles5.searchInput,
|
|
1837
|
+
reactNative.Platform.OS === "web" ? styles5.searchInputWeb : null,
|
|
1838
|
+
reactNative.Platform.OS === "android" ? styles5.searchInputAndroid : null
|
|
1426
1839
|
],
|
|
1427
1840
|
accessibilityLabel: searchPlaceholder
|
|
1428
1841
|
}
|
|
@@ -1431,12 +1844,12 @@ var Select = react.forwardRef(
|
|
|
1431
1844
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1432
1845
|
reactNative.ScrollView,
|
|
1433
1846
|
{
|
|
1434
|
-
style:
|
|
1435
|
-
contentContainerStyle:
|
|
1847
|
+
style: styles5.optionList,
|
|
1848
|
+
contentContainerStyle: styles5.optionListContent,
|
|
1436
1849
|
keyboardShouldPersistTaps: "handled",
|
|
1437
1850
|
showsVerticalScrollIndicator: false,
|
|
1438
1851
|
children: [
|
|
1439
|
-
loading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
1852
|
+
loading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles5.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles5.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles5.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles5.statusText, children: emptyText }) }) : null,
|
|
1440
1853
|
!loading && filteredOptions.map((option) => {
|
|
1441
1854
|
const isSelected = selectedValues.includes(option.value);
|
|
1442
1855
|
const isHovered = hoveredValue === option.value;
|
|
@@ -1453,14 +1866,14 @@ var Select = react.forwardRef(
|
|
|
1453
1866
|
accessibilityRole: multiple ? "checkbox" : "button",
|
|
1454
1867
|
accessibilityState: { selected: isSelected, checked: isSelected, disabled },
|
|
1455
1868
|
style: [
|
|
1456
|
-
|
|
1869
|
+
styles5.item,
|
|
1457
1870
|
{
|
|
1458
1871
|
backgroundColor: itemBackground(visualState)
|
|
1459
1872
|
}
|
|
1460
1873
|
],
|
|
1461
1874
|
children: [
|
|
1462
|
-
multiple ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style:
|
|
1463
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style:
|
|
1875
|
+
multiple ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: styles5.itemCheckbox, children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
|
|
1876
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles5.itemLabel, numberOfLines: 1, children: option.label })
|
|
1464
1877
|
]
|
|
1465
1878
|
},
|
|
1466
1879
|
option.value
|
|
@@ -1471,13 +1884,13 @@ var Select = react.forwardRef(
|
|
|
1471
1884
|
)
|
|
1472
1885
|
] }) : null
|
|
1473
1886
|
] }),
|
|
1474
|
-
showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
1887
|
+
showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.hint, { color: hintColor }], children: hint }) : null
|
|
1475
1888
|
]
|
|
1476
1889
|
}
|
|
1477
1890
|
);
|
|
1478
1891
|
}
|
|
1479
1892
|
);
|
|
1480
|
-
var
|
|
1893
|
+
var styles5 = reactNative.StyleSheet.create({
|
|
1481
1894
|
root: {
|
|
1482
1895
|
width: DEFAULT_WIDTH2,
|
|
1483
1896
|
gap: 8,
|
|
@@ -1583,7 +1996,7 @@ var styles4 = reactNative.StyleSheet.create({
|
|
|
1583
1996
|
right: 0,
|
|
1584
1997
|
marginTop: 8,
|
|
1585
1998
|
zIndex: 10,
|
|
1586
|
-
borderRadius:
|
|
1999
|
+
borderRadius: MENU_RADIUS2,
|
|
1587
2000
|
padding: 12,
|
|
1588
2001
|
gap: 8,
|
|
1589
2002
|
backgroundColor: colors.grey700,
|
|
@@ -1739,13 +2152,13 @@ var Textarea = react.forwardRef(function Textarea2({
|
|
|
1739
2152
|
const resolvedAccessibilityLabel = accessibilityLabel ?? (showLabel ? void 0 : label);
|
|
1740
2153
|
useApplyWebClassName(rootRef, className);
|
|
1741
2154
|
useApplyWebClassName(inputRef, inputClassName);
|
|
1742
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [
|
|
1743
|
-
showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
2155
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [styles6.root, disabled && styles6.disabled, style], children: [
|
|
2156
|
+
showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.label, { color: chrome.labelColor }], children: label }) : null,
|
|
1744
2157
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1745
2158
|
reactNative.View,
|
|
1746
2159
|
{
|
|
1747
2160
|
style: [
|
|
1748
|
-
|
|
2161
|
+
styles6.field,
|
|
1749
2162
|
{
|
|
1750
2163
|
borderColor: chrome.borderColor,
|
|
1751
2164
|
backgroundColor: chrome.backgroundColor
|
|
@@ -1777,11 +2190,11 @@ var Textarea = react.forwardRef(function Textarea2({
|
|
|
1777
2190
|
onBlur?.(event);
|
|
1778
2191
|
},
|
|
1779
2192
|
style: [
|
|
1780
|
-
|
|
2193
|
+
styles6.input,
|
|
1781
2194
|
textareaTypography.field,
|
|
1782
2195
|
{ color: chrome.textColor },
|
|
1783
|
-
reactNative.Platform.OS === "web" ?
|
|
1784
|
-
reactNative.Platform.OS === "android" ?
|
|
2196
|
+
reactNative.Platform.OS === "web" ? styles6.inputWeb : null,
|
|
2197
|
+
reactNative.Platform.OS === "android" ? styles6.inputAndroid : null,
|
|
1785
2198
|
inputStyle
|
|
1786
2199
|
],
|
|
1787
2200
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
@@ -1790,10 +2203,10 @@ var Textarea = react.forwardRef(function Textarea2({
|
|
|
1790
2203
|
)
|
|
1791
2204
|
}
|
|
1792
2205
|
),
|
|
1793
|
-
showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
2206
|
+
showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.hint, { color: chrome.hintColor }], children: hint }) : null
|
|
1794
2207
|
] });
|
|
1795
2208
|
});
|
|
1796
|
-
var
|
|
2209
|
+
var styles6 = reactNative.StyleSheet.create({
|
|
1797
2210
|
root: {
|
|
1798
2211
|
width: DEFAULT_WIDTH3,
|
|
1799
2212
|
gap: 8,
|
|
@@ -1893,13 +2306,13 @@ var Toggle = react.forwardRef(function Toggle2({
|
|
|
1893
2306
|
accessibilityRole: "switch",
|
|
1894
2307
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
1895
2308
|
accessibilityState: { checked: isActive, disabled },
|
|
1896
|
-
style: [
|
|
2309
|
+
style: [styles7.pressable, disabled && styles7.disabled, style],
|
|
1897
2310
|
children: [
|
|
1898
2311
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1899
2312
|
reactNative.Animated.View,
|
|
1900
2313
|
{
|
|
1901
2314
|
style: [
|
|
1902
|
-
|
|
2315
|
+
styles7.track,
|
|
1903
2316
|
{
|
|
1904
2317
|
backgroundColor: trackBackgroundColor
|
|
1905
2318
|
}
|
|
@@ -1908,7 +2321,7 @@ var Toggle = react.forwardRef(function Toggle2({
|
|
|
1908
2321
|
reactNative.Animated.View,
|
|
1909
2322
|
{
|
|
1910
2323
|
style: [
|
|
1911
|
-
|
|
2324
|
+
styles7.thumb,
|
|
1912
2325
|
{
|
|
1913
2326
|
transform: [{ translateX: thumbTranslateX }]
|
|
1914
2327
|
}
|
|
@@ -1917,12 +2330,12 @@ var Toggle = react.forwardRef(function Toggle2({
|
|
|
1917
2330
|
)
|
|
1918
2331
|
}
|
|
1919
2332
|
),
|
|
1920
|
-
labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
2333
|
+
labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles7.label, labelStyle], children: labelContent }) : labelContent : null
|
|
1921
2334
|
]
|
|
1922
2335
|
}
|
|
1923
2336
|
);
|
|
1924
2337
|
});
|
|
1925
|
-
var
|
|
2338
|
+
var styles7 = reactNative.StyleSheet.create({
|
|
1926
2339
|
pressable: {
|
|
1927
2340
|
flexDirection: "row",
|
|
1928
2341
|
alignItems: "center",
|
|
@@ -1952,10 +2365,12 @@ var styles6 = reactNative.StyleSheet.create({
|
|
|
1952
2365
|
});
|
|
1953
2366
|
|
|
1954
2367
|
exports.ArrowRightIcon = ArrowRightIcon;
|
|
2368
|
+
exports.Avatar = Avatar;
|
|
1955
2369
|
exports.BagIcon = BagIcon;
|
|
1956
2370
|
exports.BellIcon = BellIcon;
|
|
1957
2371
|
exports.BuildingIcon = BuildingIcon;
|
|
1958
2372
|
exports.Button = Button;
|
|
2373
|
+
exports.CalendarIcon = CalendarIcon;
|
|
1959
2374
|
exports.CameraIcon = CameraIcon;
|
|
1960
2375
|
exports.CheckBadgeIcon = CheckBadgeIcon;
|
|
1961
2376
|
exports.CheckIcon = CheckIcon;
|
|
@@ -1963,21 +2378,28 @@ exports.Checkbox = Checkbox;
|
|
|
1963
2378
|
exports.ChevronDownIcon = ChevronDownIcon;
|
|
1964
2379
|
exports.ClockIcon = ClockIcon;
|
|
1965
2380
|
exports.FacebookIcon = FacebookIcon;
|
|
2381
|
+
exports.HeartIcon = HeartIcon;
|
|
2382
|
+
exports.HelpCircleIcon = HelpCircleIcon;
|
|
1966
2383
|
exports.HomeIcon = HomeIcon;
|
|
1967
2384
|
exports.Icon = Icon;
|
|
1968
2385
|
exports.Input = Input;
|
|
1969
2386
|
exports.InstagramIcon = InstagramIcon;
|
|
1970
2387
|
exports.KeyIcon = KeyIcon;
|
|
2388
|
+
exports.LayoutGridIcon = LayoutGridIcon;
|
|
1971
2389
|
exports.LinkedInIcon = LinkedInIcon;
|
|
2390
|
+
exports.LogOutIcon = LogOutIcon;
|
|
1972
2391
|
exports.MailIcon = MailIcon;
|
|
1973
2392
|
exports.NavigateIcon = NavigateIcon;
|
|
1974
2393
|
exports.PhoneIcon = PhoneIcon;
|
|
1975
2394
|
exports.SearchIcon = SearchIcon;
|
|
1976
2395
|
exports.Select = Select;
|
|
2396
|
+
exports.SettingsIcon = SettingsIcon;
|
|
1977
2397
|
exports.ShowIcon = ShowIcon;
|
|
1978
2398
|
exports.Textarea = Textarea;
|
|
1979
2399
|
exports.Toggle = Toggle;
|
|
1980
2400
|
exports.UserIcon = UserIcon;
|
|
2401
|
+
exports.VideoIcon = VideoIcon;
|
|
2402
|
+
exports.avatarTypography = avatarTypography;
|
|
1981
2403
|
exports.buttonTypography = buttonTypography;
|
|
1982
2404
|
exports.colors = colors;
|
|
1983
2405
|
exports.fonts = fonts;
|