@aivenio/aquarium 1.2.0 → 1.2.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/atoms.cjs CHANGED
@@ -1118,166 +1118,6 @@ var require_search = __commonJS({
1118
1118
  }
1119
1119
  });
1120
1120
 
1121
- // src/icons/slash.js
1122
- var require_slash = __commonJS({
1123
- "src/icons/slash.js"(exports) {
1124
- "use strict";
1125
- var data = {
1126
- "body": '<path fill="currentColor" fill-rule="evenodd" d="M12 2c-.46 0-.85.32-.97.74L7.04 16.7c-.02.1-.04.2-.04.3 0 .55.45 1 1 1 .46 0 .85-.32.97-.74L12.96 3.3c.02-.1.04-.2.04-.3 0-.55-.45-1-1-1Z" clip-rule="evenodd"/>',
1127
- "left": 0,
1128
- "top": 0,
1129
- "width": 20,
1130
- "height": 20
1131
- };
1132
- exports.__esModule = true;
1133
- exports.default = data;
1134
- }
1135
- });
1136
-
1137
- // src/icons/lock.js
1138
- var require_lock = __commonJS({
1139
- "src/icons/lock.js"(exports) {
1140
- "use strict";
1141
- var data = {
1142
- "body": '<path fill="currentColor" d="M15.93 9H14V4.99c0-2.21-1.79-4-4-4s-4 1.79-4 4V9H3.93c-.55 0-.93.44-.93.99v8c0 .55.38 1.01.93 1.01h12c.55 0 1.07-.46 1.07-1.01v-8c0-.55-.52-.99-1.07-.99ZM8 9V4.99c0-1.1.9-2 2-2s2 .9 2 2V9H8Z"/>',
1143
- "left": 0,
1144
- "top": 0,
1145
- "width": 20,
1146
- "height": 20
1147
- };
1148
- exports.__esModule = true;
1149
- exports.default = data;
1150
- }
1151
- });
1152
-
1153
- // src/icons/chevronLeft.js
1154
- var require_chevronLeft = __commonJS({
1155
- "src/icons/chevronLeft.js"(exports) {
1156
- "use strict";
1157
- var data = {
1158
- "body": '<path fill="currentColor" fill-rule="evenodd" d="m8.41 10 5.29-5.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71l-6 6c-.18.18-.29.43-.29.71 0 .28.11.53.29.71l6 6a1.003 1.003 0 001.42-1.42L8.41 10Z" clip-rule="evenodd"/>',
1159
- "left": 0,
1160
- "top": 0,
1161
- "width": 20,
1162
- "height": 20
1163
- };
1164
- exports.__esModule = true;
1165
- exports.default = data;
1166
- }
1167
- });
1168
-
1169
- // src/icons/chevronRight.js
1170
- var require_chevronRight = __commonJS({
1171
- "src/icons/chevronRight.js"(exports) {
1172
- "use strict";
1173
- var data = {
1174
- "body": '<path fill="currentColor" fill-rule="evenodd" d="m13.71 9.29-6-6a1.003 1.003 0 00-1.42 1.42l5.3 5.29-5.29 5.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l6-6c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71Z" clip-rule="evenodd"/>',
1175
- "left": 0,
1176
- "top": 0,
1177
- "width": 20,
1178
- "height": 20
1179
- };
1180
- exports.__esModule = true;
1181
- exports.default = data;
1182
- }
1183
- });
1184
-
1185
- // src/icons/questionMark.js
1186
- var require_questionMark = __commonJS({
1187
- "src/icons/questionMark.js"(exports) {
1188
- "use strict";
1189
- var data = {
1190
- "body": '<path fill="currentColor" d="M7 0C3.136 0 0 3.136 0 7s3.136 7 7 7 7-3.136 7-7-3.136-7-7-7ZM5.187 3.234c.455-.378 1.057-.574 1.792-.574a2.9 2.9 0 011.036.175c.308.119.581.273.798.476.224.203.392.441.518.714.119.273.182.574.182.889 0 .315-.056.609-.168.861-.112.259-.28.511-.497.777l-.847 1.106c-.098.119-.196.231-.224.336a1.285 1.285 0 00-.077.42v.679H6.3v-1.4s.042-.406.168-.567l.847-1.148c.175-.21.287-.392.357-.539.07-.147.098-.308.098-.469a.825.825 0 00-.224-.595c-.147-.154-.35-.231-.616-.231-.259 0-.469.077-.623.231-.154.161-.259.378-.322.658-.021.084-.077.119-.161.112l-1.365-.203c-.084-.007-.112-.056-.098-.154.091-.651.364-1.169.826-1.554ZM6.3 9.8h1.414L7.7 11.2H6.3V9.8Z"/>',
1191
- "left": 0,
1192
- "top": 0,
1193
- "width": 14,
1194
- "height": 14
1195
- };
1196
- exports.__esModule = true;
1197
- exports.default = data;
1198
- }
1199
- });
1200
-
1201
- // src/icons/smallCross.js
1202
- var require_smallCross = __commonJS({
1203
- "src/icons/smallCross.js"(exports) {
1204
- "use strict";
1205
- var data = {
1206
- "body": '<path fill="currentColor" fill-rule="evenodd" d="m11.41 10 3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L10 8.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L8.59 10 5.3 13.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l3.29-3.3 3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L11.41 10Z" clip-rule="evenodd"/>',
1207
- "left": 0,
1208
- "top": 0,
1209
- "width": 20,
1210
- "height": 20
1211
- };
1212
- exports.__esModule = true;
1213
- exports.default = data;
1214
- }
1215
- });
1216
-
1217
- // src/icons/caretDown.js
1218
- var require_caretDown = __commonJS({
1219
- "src/icons/caretDown.js"(exports) {
1220
- "use strict";
1221
- var data = {
1222
- "body": '<path fill="currentColor" fill-rule="evenodd" d="M16 7c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1 0 .24.1.46.24.63l-.01.01 5 6 .01-.01c.19.22.45.37.76.37s.57-.15.76-.37l.01.01 5-6-.01-.01c.14-.17.24-.39.24-.63Z" clip-rule="evenodd"/>',
1223
- "left": 0,
1224
- "top": 0,
1225
- "width": 20,
1226
- "height": 20
1227
- };
1228
- exports.__esModule = true;
1229
- exports.default = data;
1230
- }
1231
- });
1232
-
1233
- // src/icons/chevronForward.js
1234
- var require_chevronForward = __commonJS({
1235
- "src/icons/chevronForward.js"(exports) {
1236
- "use strict";
1237
- var data = {
1238
- "body": '<path fill="currentColor" fill-rule="evenodd" d="M13 3c-.55 0-1 .45-1 1v4.59l-5.29-5.3a1.003 1.003 0 00-1.42 1.42l5.3 5.29-5.29 5.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l5.29-5.3V16c0 .55.45 1 1 1s1-.45 1-1V4c0-.55-.45-1-1-1Z" clip-rule="evenodd"/>',
1239
- "left": 0,
1240
- "top": 0,
1241
- "width": 20,
1242
- "height": 20
1243
- };
1244
- exports.__esModule = true;
1245
- exports.default = data;
1246
- }
1247
- });
1248
-
1249
- // src/icons/chevronBackward.js
1250
- var require_chevronBackward = __commonJS({
1251
- "src/icons/chevronBackward.js"(exports) {
1252
- "use strict";
1253
- var data = {
1254
- "body": '<path fill="currentColor" fill-rule="evenodd" d="m8.41 10 5.29-5.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L7 8.59V4c0-.55-.45-1-1-1s-1 .45-1 1v12c0 .55.45 1 1 1s1-.45 1-1v-4.59l5.29 5.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L8.41 10Z" clip-rule="evenodd"/>',
1255
- "left": 0,
1256
- "top": 0,
1257
- "width": 20,
1258
- "height": 20
1259
- };
1260
- exports.__esModule = true;
1261
- exports.default = data;
1262
- }
1263
- });
1264
-
1265
- // src/icons/time.js
1266
- var require_time = __commonJS({
1267
- "src/icons/time.js"(exports) {
1268
- "use strict";
1269
- var data = {
1270
- "body": '<path fill="currentColor" fill-rule="evenodd" d="M11 9.59V4c0-.55-.45-1-1-1s-1 .45-1 1v6c0 .28.11.53.29.71l3 3a1.003 1.003 0 001.42-1.42L11 9.59ZM10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0Zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8Z" clip-rule="evenodd"/>',
1271
- "left": 0,
1272
- "top": 0,
1273
- "width": 20,
1274
- "height": 20
1275
- };
1276
- exports.__esModule = true;
1277
- exports.default = data;
1278
- }
1279
- });
1280
-
1281
1121
  // src/common/index.ts
1282
1122
  var common_exports = {};
1283
1123
  __export(common_exports, {
@@ -1295,7 +1135,7 @@ __export(common_exports, {
1295
1135
  Select: () => Select,
1296
1136
  Table: () => Table,
1297
1137
  cellClassNames: () => cellClassNames,
1298
- getAlignClassNames: () => getAlignClassNames2,
1138
+ getAlignClassNames: () => getAlignClassNames,
1299
1139
  getBodyCellClassNames: () => getBodyCellClassNames,
1300
1140
  getHeadCellClassNames: () => getHeadCellClassNames,
1301
1141
  getOptionLabelBuiltin: () => getOptionLabelBuiltin,
@@ -1312,8 +1152,8 @@ var import_react12 = __toESM(require("react"));
1312
1152
 
1313
1153
  // src/utils/tailwind.ts
1314
1154
  var import_classnames = __toESM(require("classnames"));
1315
- function cleanClassNames(classNames4) {
1316
- const tokens = classNames4.split(/\s+/);
1155
+ function cleanClassNames(classNames2) {
1156
+ const tokens = classNames2.split(/\s+/);
1317
1157
  return tokens.filter((item) => item).join(" ");
1318
1158
  }
1319
1159
  function tw(classesOrModifiers1, classesOrModifiers2, classesOrModifiers3, classesOrModifiers4, classesOrModifiers5, classesOrModifiers6, classesOrModifiers7, classesOrModifiers8, classesOrModifiers9, classesOrModifiers10) {
@@ -3386,3948 +3226,108 @@ var Select = {
3386
3226
  };
3387
3227
 
3388
3228
  // src/common/Table/Table.tsx
3389
- var import_react93 = __toESM(require("react"));
3390
- var import_chevronUp3 = __toESM(require_chevronUp());
3391
- var import_chevronDown4 = __toESM(require_chevronDown());
3392
-
3393
- // src/components/Badge/Badge.tsx
3394
- var import_react25 = __toESM(require("react"));
3395
- var import_omit = __toESM(require("lodash/omit"));
3396
-
3397
- // src/components/Skeleton/Skeleton.tsx
3398
3229
  var import_react24 = __toESM(require("react"));
3399
- var import_isNumber = __toESM(require("lodash/isNumber"));
3400
- var Skeleton = ({
3401
- width,
3402
- height,
3403
- display = "block",
3404
- className,
3405
- animate = true,
3406
- rounded = false
3407
- }) => {
3408
- const styles = {
3409
- width: (0, import_isNumber.default)(width) ? `${width}px` : width,
3410
- height: (0, import_isNumber.default)(height) ? `${height}px` : height
3411
- };
3412
- return /* @__PURE__ */ import_react24.default.createElement("div", {
3413
- style: styles,
3414
- className: classNames(
3415
- tw("bg-grey-5", {
3416
- "rounded-full": rounded,
3417
- "block": display === "block",
3418
- "inline-block": display === "inline-block",
3419
- "animate-pulse": animate
3420
- }),
3421
- className
3422
- )
3423
- });
3424
- };
3425
-
3426
- // src/components/Badge/Badge.tsx
3427
- var isChipBadgeProps = (props) => "dense" in props;
3428
- var createBadge = (type, displayName) => {
3429
- const Component = (props) => {
3430
- var _b;
3431
- const _a = props, { kind = "filled", value, textClassname } = _a, rest = __objRest(_a, ["kind", "value", "textClassname"]);
3432
- const valueStr = value.toString();
3433
- const dense = isChipBadgeProps(props) ? (_b = props.dense) != null ? _b : false : false;
3434
- return /* @__PURE__ */ import_react25.default.createElement("span", __spreadProps(__spreadValues({}, (0, import_omit.default)(rest, "dense")), {
3435
- className: tw("inline-block text-center", {
3436
- "rounded-full": type === "default" || type === "chip",
3437
- "rounded": type === "tab",
3438
- "border border-current": kind === "outlined",
3439
- "bg-current": kind === "filled" && type !== "chip",
3440
- "bg-white": type === "chip",
3441
- "typography-caption-small leading-none py-1 px-2": !dense,
3442
- "text-[8px]": dense,
3443
- "px-1": dense && valueStr.length > 1,
3444
- "px-[4px]": dense && valueStr.length === 1
3445
- })
3446
- }), /* @__PURE__ */ import_react25.default.createElement("span", {
3447
- className: classNames(
3448
- textClassname,
3449
- tw("inline-block", {
3450
- "text-white": !textClassname && kind === "filled",
3451
- "m-[1px]": kind === "filled"
3452
- })
3453
- )
3454
- }, valueStr));
3455
- };
3456
- Component.displayName = displayName;
3457
- Component.Skeleton = () => /* @__PURE__ */ import_react25.default.createElement(Skeleton, {
3458
- height: 16,
3459
- width: 16,
3460
- display: "inline-block",
3461
- className: tw(type === "tab" ? "rounded" : "rounded-full")
3462
- });
3463
- return Component;
3464
- };
3465
- var Badge = createBadge("default", "Badge");
3466
- var TabBadge = createBadge("tab", "TabBadge");
3467
- var ChipBadge = createBadge("chip", "ChipBadge");
3468
-
3469
- // src/components/Alert/Alert.tsx
3470
- var import_react26 = __toESM(require("react"));
3471
- var import_omit2 = __toESM(require("lodash/omit"));
3472
-
3473
- // src/components/Avatar/Avatar.tsx
3474
- var import_react30 = __toESM(require("react"));
3475
-
3476
- // src/components/Box/Box.tsx
3477
- var import_react29 = __toESM(require("react"));
3478
-
3479
- // src/components/Element/Element.tsx
3480
- var import_react27 = __toESM(require("react"));
3481
- var Element = (_a) => {
3482
- var _b = _a, { component } = _b, rest = __objRest(_b, ["component"]);
3483
- const Component = component || "div";
3484
- return import_react27.default.createElement(Component, rest);
3485
- };
3486
-
3487
- // src/components/Box/Box.tsx
3488
- var import_isUndefined6 = __toESM(require("lodash/isUndefined"));
3489
-
3490
- // src/utils/createComponent.tsx
3491
- var import_react28 = __toESM(require("react"));
3492
- var hasClassName = (val) => {
3493
- return val.className !== void 0;
3494
- };
3495
- var createSimpleComponent = (Component, defaultProps, displayName) => {
3496
- const defaultClassName = hasClassName(defaultProps) ? defaultProps.className : "";
3497
- const Curried = (props) => {
3498
- const propsClassName = hasClassName(props) ? props.className : "";
3499
- const className = defaultClassName || propsClassName ? classNames(defaultClassName, propsClassName) : void 0;
3500
- return /* @__PURE__ */ import_react28.default.createElement(Component, __spreadProps(__spreadValues(__spreadValues({}, defaultProps), props), {
3501
- className
3502
- }));
3503
- };
3504
- Curried.displayName = displayName;
3505
- return Curried;
3506
- };
3507
-
3508
- // src/components/Box/Box.tsx
3509
- var Box = (_a) => {
3510
- var _b = _a, {
3511
- style,
3512
- color,
3513
- borderColor,
3514
- borderRadius,
3515
- borderWidth,
3516
- justifyContent,
3517
- alignContent,
3518
- alignItems,
3519
- alignSelf,
3520
- flexDirection,
3521
- flexWrap,
3522
- flex,
3523
- grow,
3524
- shrink,
3525
- display,
3526
- padding,
3527
- paddingX,
3528
- paddingY,
3529
- paddingTop,
3530
- paddingRight,
3531
- paddingBottom,
3532
- paddingLeft,
3533
- margin,
3534
- marginX,
3535
- marginY,
3536
- marginTop,
3537
- marginRight,
3538
- marginBottom,
3539
- marginLeft,
3540
- backgroundColor,
3541
- width,
3542
- height,
3543
- maxWidth,
3544
- maxHeight,
3545
- minWidth,
3546
- minHeight,
3547
- gap,
3548
- colGap,
3549
- rowGap
3550
- } = _b, rest = __objRest(_b, [
3551
- "style",
3552
- "color",
3553
- "borderColor",
3554
- "borderRadius",
3555
- "borderWidth",
3556
- "justifyContent",
3557
- "alignContent",
3558
- "alignItems",
3559
- "alignSelf",
3560
- "flexDirection",
3561
- "flexWrap",
3562
- "flex",
3563
- "grow",
3564
- "shrink",
3565
- "display",
3566
- "padding",
3567
- "paddingX",
3568
- "paddingY",
3569
- "paddingTop",
3570
- "paddingRight",
3571
- "paddingBottom",
3572
- "paddingLeft",
3573
- "margin",
3574
- "marginX",
3575
- "marginY",
3576
- "marginTop",
3577
- "marginRight",
3578
- "marginBottom",
3579
- "marginLeft",
3580
- "backgroundColor",
3581
- "width",
3582
- "height",
3583
- "maxWidth",
3584
- "maxHeight",
3585
- "minWidth",
3586
- "minHeight",
3587
- "gap",
3588
- "colGap",
3589
- "rowGap"
3590
- ]);
3591
- const styles = useStyle({
3592
- padding,
3593
- display,
3594
- color,
3595
- borderColor: borderColor ? tailwind_theme_default.backgroundColor[borderColor] : "",
3596
- borderRadius,
3597
- borderWidth,
3598
- justifyContent,
3599
- alignContent,
3600
- alignItems,
3601
- alignSelf,
3602
- flexDirection,
3603
- flexWrap,
3604
- paddingTop: (0, import_isUndefined6.default)(paddingY) ? paddingTop : paddingY,
3605
- paddingRight: (0, import_isUndefined6.default)(paddingX) ? paddingRight : paddingX,
3606
- paddingBottom: (0, import_isUndefined6.default)(paddingY) ? paddingBottom : paddingY,
3607
- paddingLeft: (0, import_isUndefined6.default)(paddingX) ? paddingLeft : paddingX,
3608
- margin,
3609
- marginTop: (0, import_isUndefined6.default)(marginY) ? marginTop : marginY,
3610
- marginRight: (0, import_isUndefined6.default)(marginX) ? marginRight : marginX,
3611
- marginBottom: (0, import_isUndefined6.default)(marginY) ? marginBottom : marginY,
3612
- marginLeft: (0, import_isUndefined6.default)(marginX) ? marginLeft : marginX,
3613
- backgroundColor,
3614
- width,
3615
- height,
3616
- maxWidth,
3617
- maxHeight,
3618
- minWidth,
3619
- minHeight,
3620
- flexGrow: grow,
3621
- flexShrink: shrink,
3622
- flex,
3623
- gap,
3624
- columnGap: colGap,
3625
- rowGap
3626
- });
3627
- return /* @__PURE__ */ import_react29.default.createElement(Element, __spreadValues({
3628
- style: __spreadValues(__spreadValues({}, styles), style)
3629
- }, rest));
3630
- };
3631
- var BorderBox = createSimpleComponent(
3632
- Box,
3633
- { className: "rounded border", borderColor: "grey-10" },
3634
- "BorderBox"
3635
- );
3636
-
3637
- // src/components/Avatar/Avatar.tsx
3638
- var AvatarStack = ({ images }) => /* @__PURE__ */ import_react30.default.createElement(Box, {
3639
- display: "flex",
3640
- className: tw("[&>*:not(:first-child)]:-ml-3")
3641
- }, images.map((image) => image ? /* @__PURE__ */ import_react30.default.createElement(Avatar, {
3642
- key: image,
3643
- image
3644
- }) : /* @__PURE__ */ import_react30.default.createElement(Avatar.Skeleton, {
3645
- key: image
3646
- })));
3647
- var Avatar = ({ image }) => /* @__PURE__ */ import_react30.default.createElement("img", {
3648
- src: image,
3649
- className: classNames(tw("w-[32px] h-[32px]"))
3650
- });
3651
- var AvatarSkeleton = () => /* @__PURE__ */ import_react30.default.createElement(Skeleton, {
3652
- height: 32,
3653
- width: 32,
3654
- className: tw("rounded-full")
3655
- });
3656
- Avatar.Skeleton = AvatarSkeleton;
3657
-
3658
- // src/components/Banner/Banner.tsx
3659
- var import_react32 = __toESM(require("react"));
3660
-
3661
- // src/common/Banner/Banner.tsx
3662
- var import_react31 = __toESM(require("react"));
3663
- var spacing = {
3664
- spacingAroundBanner: "p-6",
3665
- omitSpacingAroundBanner: "-6"
3666
- };
3667
- var Banner = (_a) => {
3668
- var _b = _a, {
3669
- children,
3670
- className,
3671
- layout,
3672
- variant
3673
- } = _b, rest = __objRest(_b, [
3674
- "children",
3675
- "className",
3676
- "layout",
3677
- "variant"
3678
- ]);
3679
- return /* @__PURE__ */ import_react31.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
3680
- className: classNames(
3681
- className,
3682
- tw(`rounded flex justify-between gap-7 flex-nowrap ${spacing.spacingAroundBanner}`, {
3683
- "items-center": layout === "horizontal",
3684
- "bg-grey-0": variant === "default",
3685
- "bg-white border border-grey-5": variant === "outlined"
3686
- })
3687
- )
3688
- }), children);
3689
- };
3690
- Banner.Title = (_a) => {
3691
- var _b = _a, { children, className, layout, titleVariant = "primary" } = _b, rest = __objRest(_b, ["children", "className", "layout", "titleVariant"]);
3692
- return /* @__PURE__ */ import_react31.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
3693
- variant: "heading-large",
3694
- fontWeight: 600,
3695
- color: titleVariant === "secondary" ? "primary-80" : "grey-100",
3696
- className: classNames(
3697
- className,
3698
- tw("whitespace-nowrap", {
3699
- "mb-3": layout === "vertical"
3700
- })
3701
- )
3702
- }), children);
3703
- };
3704
- Banner.Description = (_a) => {
3705
- var _b = _a, { flexGrow, children, className } = _b, rest = __objRest(_b, ["flexGrow", "children", "className"]);
3706
- return /* @__PURE__ */ import_react31.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
3707
- variant: "body-default",
3708
- color: "grey-90",
3709
- className: classNames(className, tw({ "flex-grow": flexGrow }))
3230
+ var import_chevronUp2 = __toESM(require_chevronUp());
3231
+ var import_chevronDown3 = __toESM(require_chevronDown());
3232
+ var HeadContext = import_react24.default.createContext(null);
3233
+ var tableClassNames = tw("w-full relative typography-body-default border-spacing-0");
3234
+ var Table = (_a) => {
3235
+ var _b = _a, { children, ariaLabel, className } = _b, rest = __objRest(_b, ["children", "ariaLabel", "className"]);
3236
+ return /* @__PURE__ */ import_react24.default.createElement("table", __spreadProps(__spreadValues({}, rest), {
3237
+ className: classNames(tableClassNames, className),
3238
+ "aria-label": ariaLabel
3710
3239
  }), children);
3711
3240
  };
3712
- Banner.ContentContainer = (_a) => {
3713
- var _b = _a, { layout, children, className } = _b, rest = __objRest(_b, ["layout", "children", "className"]);
3714
- return /* @__PURE__ */ import_react31.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
3715
- className: classNames(
3716
- className,
3717
- tw("flex w-full", {
3718
- "flex-col": layout === "vertical",
3719
- "flex-row flex-nowrap gap-7 items-center": layout === "horizontal"
3720
- })
3721
- )
3722
- }), children);
3241
+ var TableHead = (_a) => {
3242
+ var _b = _a, { children, sticky } = _b, rest = __objRest(_b, ["children", "sticky"]);
3243
+ return /* @__PURE__ */ import_react24.default.createElement("thead", __spreadValues({}, rest), /* @__PURE__ */ import_react24.default.createElement("tr", null, /* @__PURE__ */ import_react24.default.createElement(HeadContext.Provider, {
3244
+ value: { children, sticky }
3245
+ }, children)));
3723
3246
  };
3724
- Banner.ImageContainer = (_a) => {
3247
+ var TableBody = (_a) => {
3725
3248
  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
3726
- return /* @__PURE__ */ import_react31.default.createElement(Box, __spreadProps(__spreadValues({}, rest), {
3727
- display: "inline-flex",
3728
- alignItems: "center",
3729
- margin: spacing.omitSpacingAroundBanner,
3730
- marginLeft: "0"
3731
- }), children);
3249
+ return /* @__PURE__ */ import_react24.default.createElement("tbody", __spreadValues({}, rest), children);
3732
3250
  };
3733
- Banner.Actions = (_a) => {
3734
- var _b = _a, { children, className, layout } = _b, rest = __objRest(_b, ["children", "className", "layout"]);
3735
- return /* @__PURE__ */ import_react31.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
3736
- className: classNames(className, tw("flex gap-4", { "mt-5": layout === "vertical" }))
3251
+ var rowClassNames = tw("children:border-grey-10 children:last:border-b-0 hover:bg-grey-0");
3252
+ var TableRow = (_a) => {
3253
+ var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
3254
+ return /* @__PURE__ */ import_react24.default.createElement("tr", __spreadProps(__spreadValues({}, rest), {
3255
+ className: classNames(rowClassNames, className)
3737
3256
  }), children);
3738
3257
  };
3739
- Banner.DismissContainer = (_a) => {
3740
- var _b = _a, { layout, children, className } = _b, rest = __objRest(_b, ["layout", "children", "className"]);
3741
- return /* @__PURE__ */ import_react31.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
3258
+ var cellClassNames = tw("px-4 border-b typography-body-small leading-[18px]");
3259
+ var getBodyCellClassNames = (table = true) => tw("text-grey-70 py-3", {
3260
+ "h-[50px]": table,
3261
+ "min-h-[50px]": !table
3262
+ });
3263
+ var getAlignClassNames = (align) => tw({ "text-right": align === "right", "text-center": align === "center" });
3264
+ var getHeadCellClassNames = (sticky = true) => {
3265
+ const common = tw("py-[14px] text-left bg-white border-grey-40 text-grey-50 font-normal");
3266
+ return sticky ? classNames(common, tw("sticky top-0")) : common;
3267
+ };
3268
+ var TableCell = (_a) => {
3269
+ var _b = _a, { children, className, align = "left" } = _b, rest = __objRest(_b, ["children", "className", "align"]);
3270
+ const headContext = import_react24.default.useContext(HeadContext);
3271
+ return headContext ? /* @__PURE__ */ import_react24.default.createElement("th", __spreadProps(__spreadValues({}, rest), {
3742
3272
  className: classNames(
3743
- className,
3744
- tw({ "self-start": layout === "vertical", "self-center": layout === "horizontal" })
3273
+ cellClassNames,
3274
+ getHeadCellClassNames(headContext.sticky),
3275
+ getAlignClassNames(align),
3276
+ className
3745
3277
  )
3278
+ }), children) : /* @__PURE__ */ import_react24.default.createElement("td", __spreadProps(__spreadValues({}, rest), {
3279
+ className: classNames(cellClassNames, getBodyCellClassNames(), getAlignClassNames(align), className)
3746
3280
  }), children);
3747
3281
  };
3748
-
3749
- // src/components/Banner/Banner.tsx
3750
- var import_omit3 = __toESM(require("lodash/omit"));
3751
- var import_cross2 = __toESM(require_cross());
3752
- var BannerImageSkeleton = () => /* @__PURE__ */ import_react32.default.createElement(Skeleton, {
3753
- width: 225,
3754
- className: tw("h-full")
3755
- });
3756
- var createBanner = (displayName, opts = {}) => {
3757
- const BannerComponent = (props) => {
3758
- const { title, description, layout: layoutProp, action, onDismiss, variant = "default" } = props;
3759
- const layout = opts.isOneLineBanner ? "horizontal" : layoutProp || "vertical";
3760
- const isDismissable = onDismiss !== void 0;
3761
- return /* @__PURE__ */ import_react32.default.createElement(Banner, {
3762
- layout,
3763
- variant
3764
- }, /* @__PURE__ */ import_react32.default.createElement(Banner.ContentContainer, {
3765
- layout
3766
- }, /* @__PURE__ */ import_react32.default.createElement(Banner.Title, {
3767
- layout,
3768
- titleVariant: opts.isOneLineBanner ? "secondary" : "primary"
3769
- }, title), /* @__PURE__ */ import_react32.default.createElement(Banner.Description, {
3770
- flexGrow: isDismissable ? false : true
3771
- }, description), action && /* @__PURE__ */ import_react32.default.createElement(Banner.Actions, {
3772
- layout
3773
- }, /* @__PURE__ */ import_react32.default.createElement(GhostButton, __spreadValues({
3774
- dense: true
3775
- }, (0, import_omit3.default)(action, "text")), action.text))), (props.layout === "vertical" || props.layout === void 0) && props.image !== void 0 && /* @__PURE__ */ import_react32.default.createElement(Banner.ImageContainer, null, props.image ? /* @__PURE__ */ import_react32.default.createElement("img", {
3776
- src: props.image,
3777
- alt: props.imageAlt,
3778
- className: tw("w-full bg-cover object-cover"),
3779
- style: { width: props.imageWidth, height: props.imageHeight }
3780
- }) : /* @__PURE__ */ import_react32.default.createElement(BannerImageSkeleton, null)), isDismissable && /* @__PURE__ */ import_react32.default.createElement(Banner.DismissContainer, {
3781
- layout
3782
- }, /* @__PURE__ */ import_react32.default.createElement(IconButton, {
3783
- type: "button",
3784
- tooltip: "Dismiss",
3785
- icon: import_cross2.default,
3786
- onClick: onDismiss
3787
- })));
3788
- };
3789
- BannerComponent.displayName = displayName;
3790
- return BannerComponent;
3282
+ var TableSelectCell = (_a) => {
3283
+ var _b = _a, { ariaLabel } = _b, props = __objRest(_b, ["ariaLabel"]);
3284
+ return /* @__PURE__ */ import_react24.default.createElement(Table.Cell, {
3285
+ className: tw("leading-[0px]")
3286
+ }, props.type === "radio" ? /* @__PURE__ */ import_react24.default.createElement(RadioButton, __spreadValues({
3287
+ "aria-label": ariaLabel
3288
+ }, props)) : /* @__PURE__ */ import_react24.default.createElement(Checkbox, __spreadValues({
3289
+ "aria-label": ariaLabel
3290
+ }, props)));
3791
3291
  };
3792
- var Banner2 = createBanner("Banner");
3793
- var OneLineBannerBase = createBanner("OneLineBanner", {
3794
- isOneLineBanner: true
3795
- });
3796
-
3797
- // src/components/Breadcrumbs/Breadcrumbs.tsx
3798
- var import_react33 = __toESM(require("react"));
3799
- var import_slash = __toESM(require_slash());
3800
- var import_classnames2 = __toESM(require("classnames"));
3801
- var Breadcrumbs = (props) => {
3802
- const { children, className } = props;
3803
- const crumbs = import_react33.default.Children.toArray(children).filter(
3804
- (c) => Boolean(c)
3805
- );
3806
- return /* @__PURE__ */ import_react33.default.createElement("nav", {
3807
- className,
3808
- "aria-label": "Breadcrumbs"
3809
- }, /* @__PURE__ */ import_react33.default.createElement("ol", {
3810
- className: tw("flex flex-row flex-nowrap items-center typography-caption-default")
3811
- }, crumbs.map((crumb, index) => {
3812
- const isLast = index === crumbs.length - 1;
3813
- return /* @__PURE__ */ import_react33.default.createElement("li", {
3814
- key: index,
3815
- className: tw("flex flex-row items-center")
3816
- }, !!index && /* @__PURE__ */ import_react33.default.createElement(Icon, {
3817
- "aria-hidden": true,
3818
- className: tw("mx-2 text-grey-30"),
3819
- icon: import_slash.default
3820
- }), !isLast && crumb, isLast && /* @__PURE__ */ import_react33.default.createElement(ActiveCrumb, {
3821
- "aria-disabled": true,
3822
- "aria-current": "page",
3823
- icon: crumb.props.icon
3824
- }, crumb.props.children));
3825
- })));
3826
- };
3827
- var asCrumb = (Component, displayName, options = { isActive: false }) => {
3828
- const Crumb2 = import_react33.default.forwardRef((_a, ref) => {
3829
- var _b = _a, { icon, children } = _b, rest = __objRest(_b, ["icon", "children"]);
3830
- return /* @__PURE__ */ import_react33.default.createElement(Component, __spreadProps(__spreadValues({
3831
- ref
3832
- }, rest), {
3833
- role: "link"
3834
- }), /* @__PURE__ */ import_react33.default.createElement("span", {
3835
- className: (0, import_classnames2.default)(
3836
- tw("flex flex-row flex-nowrap items-center gap-x-3 ", {
3837
- "text-primary-80 underline underline-offset-2 hover:no-underline hover:text-primary-70": !options.isActive,
3838
- "text-grey-90": options.isActive
3839
- })
3840
- )
3841
- }, icon && /* @__PURE__ */ import_react33.default.createElement(Icon, {
3842
- icon
3843
- }), children));
3844
- });
3845
- Crumb2.displayName = displayName;
3846
- return Crumb2;
3847
- };
3848
- var Crumb = asCrumb("a", "Crumb");
3849
- var ActiveCrumb = asCrumb("span", "ActiveCrumb", { isActive: true });
3850
- Breadcrumbs.Crumb = Crumb;
3851
-
3852
- // src/components/Card/Card.tsx
3853
- var import_react36 = __toESM(require("react"));
3854
-
3855
- // src/components/Chip/Chip.tsx
3856
- var import_react35 = __toESM(require("react"));
3857
- var import_isNumber2 = __toESM(require("lodash/isNumber"));
3858
- var import_cross3 = __toESM(require_cross());
3859
- var import_lock = __toESM(require_lock());
3860
-
3861
- // types/utils.ts
3862
- var import_react34 = require("react");
3863
- var isComponentType = (c, type) => (0, import_react34.isValidElement)(c) && c.type === type;
3864
-
3865
- // src/components/Chip/Chip.tsx
3866
- var getStatusClassNames = (status = "neutral") => {
3867
- switch (status) {
3868
- case "info":
3869
- return tw("text-info-100 bg-info-5");
3870
- case "warning":
3871
- return tw("text-secondary-80 bg-secondary-5");
3872
- case "danger":
3873
- return tw("text-error-100 bg-error-5");
3874
- case "success":
3875
- return tw("text-success-100 bg-success-5");
3876
- case "neutral":
3877
- default:
3878
- return tw("text-grey-70 bg-grey-5");
3879
- }
3880
- };
3881
- var Chip2 = (_a) => {
3882
- var _b = _a, {
3883
- icon,
3884
- text,
3885
- dense = false,
3886
- locked = false,
3887
- badge,
3888
- onClose
3889
- } = _b, rest = __objRest(_b, [
3890
- "icon",
3891
- "text",
3892
- "dense",
3893
- "locked",
3894
- "badge",
3895
- "onClose"
3896
- ]);
3897
- return /* @__PURE__ */ import_react35.default.createElement(Chip.Container, __spreadValues({
3898
- dense,
3899
- className: tw({
3900
- "bg-grey-0 text-grey-70": !locked,
3901
- "bg-grey-5 text-grey-40": locked
3902
- })
3903
- }, rest), icon && /* @__PURE__ */ import_react35.default.createElement(InlineIcon, {
3904
- icon
3905
- }), text, (0, import_isNumber2.default)(badge) && /* @__PURE__ */ import_react35.default.createElement(ChipBadge, {
3906
- dense,
3907
- value: badge,
3908
- textClassname: tw("text-grey-50")
3909
- }), onClose && /* @__PURE__ */ import_react35.default.createElement(InlineIcon, {
3910
- role: "button",
3911
- "aria-hidden": false,
3912
- icon: import_cross3.default,
3913
- className: tw({ "cursor-pointer": onClose !== void 0 }),
3914
- onClick: () => onClose == null ? void 0 : onClose()
3915
- }), locked && /* @__PURE__ */ import_react35.default.createElement(InlineIcon, {
3916
- icon: import_lock.default
3917
- }));
3918
- };
3919
- var ChipSkeleton = ({ dense = false, width = dense ? 34 : 56 }) => /* @__PURE__ */ import_react35.default.createElement(Skeleton, {
3920
- width,
3921
- height: dense ? 20 : 28
3922
- });
3923
- Chip2.Skeleton = ChipSkeleton;
3924
- var StatusChip = import_react35.default.forwardRef(
3925
- (_a, ref) => {
3926
- var _b = _a, { UNSAFE_icon: icon, text, dense = false, status } = _b, rest = __objRest(_b, ["UNSAFE_icon", "text", "dense", "status"]);
3927
- return /* @__PURE__ */ import_react35.default.createElement(Chip.Container, __spreadProps(__spreadValues({
3928
- ref,
3929
- dense
3930
- }, rest), {
3931
- className: getStatusClassNames(status)
3932
- }), icon && /* @__PURE__ */ import_react35.default.createElement(InlineIcon, {
3933
- icon
3934
- }), text);
3935
- }
3936
- );
3937
- var ChipContainer = ({ dense, children }) => /* @__PURE__ */ import_react35.default.createElement("div", {
3938
- className: tw("flex items-center", {
3939
- "gap-x-3": !dense,
3940
- "gap-x-2": Boolean(dense)
3941
- })
3942
- }, import_react35.default.Children.map(
3943
- children,
3944
- (child) => isComponentType(child, Chip2) || isComponentType(child, StatusChip) ? import_react35.default.cloneElement(child, { dense }) : void 0
3945
- ));
3946
-
3947
- // src/components/Card/Card.tsx
3948
- var import_omit4 = __toESM(require("lodash/omit"));
3949
- var Card = ({
3950
- title,
3951
- description,
3952
- chips = [],
3953
- icons = [],
3954
- image,
3955
- imageAlt,
3956
- color,
3957
- action,
3958
- link,
3959
- onClick,
3960
- disabled
3961
- }) => /* @__PURE__ */ import_react36.default.createElement(CardContainer, {
3962
- onClick,
3963
- color,
3964
- disabled
3965
- }, chips.length > 0 && /* @__PURE__ */ import_react36.default.createElement(ChipContainer, {
3966
- dense: true
3967
- }, chips.map((chip) => /* @__PURE__ */ import_react36.default.createElement(Chip2, {
3968
- key: chip,
3969
- text: chip
3970
- }))), icons.length > 0 && /* @__PURE__ */ import_react36.default.createElement(AvatarStack, {
3971
- images: icons
3972
- }), image !== void 0 && /* @__PURE__ */ import_react36.default.createElement(CardImage, {
3973
- image,
3974
- imageAlt,
3975
- fullSize: chips.length === 0
3976
- }), /* @__PURE__ */ import_react36.default.createElement(CardContent, null, /* @__PURE__ */ import_react36.default.createElement(CardTitle, null, title), /* @__PURE__ */ import_react36.default.createElement(CardBody, null, description)), (action || link) && /* @__PURE__ */ import_react36.default.createElement(CardActions, null, action && /* @__PURE__ */ import_react36.default.createElement(SecondaryButton, __spreadValues({
3977
- dense: true
3978
- }, (0, import_omit4.default)(action, "text")), action.text), link && /* @__PURE__ */ import_react36.default.createElement(ExternalLinkButton, __spreadValues({
3979
- dense: true,
3980
- kind: "ghost"
3981
- }, (0, import_omit4.default)(link, "text")), link.text)));
3982
- var CardSkeleton = ({ chips = true, icons = false, image = !icons, actions = true }) => /* @__PURE__ */ import_react36.default.createElement(CardContainer, null, chips && /* @__PURE__ */ import_react36.default.createElement(ChipContainer, {
3983
- dense: true
3984
- }, Array.from({ length: 5 }).map((_, idx) => /* @__PURE__ */ import_react36.default.createElement(Chip2.Skeleton, {
3985
- key: idx
3986
- }))), icons && /* @__PURE__ */ import_react36.default.createElement(AvatarStack, {
3987
- images: [null]
3988
- }), image && /* @__PURE__ */ import_react36.default.createElement(CardImage, {
3989
- image: null,
3990
- fullSize: !chips
3991
- }), /* @__PURE__ */ import_react36.default.createElement(CardContent, null, /* @__PURE__ */ import_react36.default.createElement(Skeleton, {
3992
- width: 145,
3993
- height: 25
3994
- }), /* @__PURE__ */ import_react36.default.createElement(Skeleton, {
3995
- width: 145,
3996
- height: 16
3997
- })), actions && /* @__PURE__ */ import_react36.default.createElement(CardActions, null, /* @__PURE__ */ import_react36.default.createElement(Skeleton, {
3998
- width: 115,
3999
- height: 25
4000
- }), /* @__PURE__ */ import_react36.default.createElement(Skeleton, {
4001
- width: 60,
4002
- height: 25
4003
- })));
4004
- Card.Skeleton = CardSkeleton;
4005
- var CardContainer = ({
4006
- children,
4007
- onClick,
4008
- color,
4009
- disabled
4010
- }) => /* @__PURE__ */ import_react36.default.createElement(Box, {
4011
- borderWidth: 1,
4012
- borderRadius: 2,
4013
- className: classNames(
4014
- tw("w-[280px] border-grey-5 focus:border-info-70", {
4015
- "active:bg-grey-5 cursor-pointer hover:border-grey-50": Boolean(onClick && !disabled),
4016
- "bg-grey-0 cursor-not-allowed focus:border-transparent": Boolean(disabled)
4017
- })
4018
- ),
4019
- onClick: disabled ? void 0 : onClick,
4020
- tabIndex: onClick ? 0 : -1,
4021
- disabled
4022
- }, color && /* @__PURE__ */ import_react36.default.createElement(Box, {
4023
- backgroundColor: color,
4024
- height: "1",
4025
- width: "full"
4026
- }), /* @__PURE__ */ import_react36.default.createElement(Box, {
4027
- padding: "5",
4028
- display: "flex",
4029
- flexDirection: "column",
4030
- gap: "5"
4031
- }, children));
4032
- var CardImage = ({ image, imageAlt, fullSize }) => /* @__PURE__ */ import_react36.default.createElement(Box, {
4033
- marginX: "-4",
4034
- marginTop: fullSize ? "-4" : void 0
4035
- }, image ? /* @__PURE__ */ import_react36.default.createElement("img", {
4036
- src: image,
4037
- alt: imageAlt,
4038
- className: tw("w-full bg-cover object-cover h-[174px]", {
4039
- "h-[225px]": fullSize
4040
- })
4041
- }) : /* @__PURE__ */ import_react36.default.createElement(CardImage.Skeleton, {
4042
- fullSize
4043
- }));
4044
- var CardImageSkeleton = ({ fullSize }) => /* @__PURE__ */ import_react36.default.createElement(Skeleton, {
4045
- height: fullSize ? 225 : 174,
4046
- className: tw("w-full")
4047
- });
4048
- CardImage.Skeleton = CardImageSkeleton;
4049
- var CardContent = ({ children }) => /* @__PURE__ */ import_react36.default.createElement(Box, {
4050
- display: "flex",
4051
- flexDirection: "column",
4052
- gap: "4"
4053
- }, children);
4054
- var CardBody = ({ children }) => /* @__PURE__ */ import_react36.default.createElement(Typography2, {
4055
- variant: "caption-default",
4056
- color: "grey-70"
4057
- }, children);
4058
- var CardTitle = ({ children }) => /* @__PURE__ */ import_react36.default.createElement(Typography2, {
4059
- variant: "body-default-medium",
4060
- fontWeight: 500
4061
- }, children);
4062
- var CardActions = ({ children }) => /* @__PURE__ */ import_react36.default.createElement(Box, {
4063
- paddingTop: "3",
4064
- display: "flex",
4065
- gap: "3",
4066
- alignItems: "center"
4067
- }, children);
4068
-
4069
- // src/components/Carousel/Carousel.tsx
4070
- var import_react37 = __toESM(require("react"));
4071
- var import_chevronLeft = __toESM(require_chevronLeft());
4072
- var import_chevronRight = __toESM(require_chevronRight());
4073
-
4074
- // src/components/Checkbox/Checkbox.tsx
4075
- var import_react39 = __toESM(require("react"));
4076
-
4077
- // src/components/ControlLabel/ControlLabel.tsx
4078
- var import_react38 = __toESM(require("react"));
4079
- var ControlLabel = (_a) => {
4080
- var _b = _a, {
4081
- label,
4082
- caption,
4083
- disabled = false,
4084
- readOnly = false,
4085
- children,
4086
- style
4087
- } = _b, rest = __objRest(_b, [
4088
- "label",
4089
- "caption",
4090
- "disabled",
4091
- "readOnly",
4092
- "children",
4093
- "style"
4094
- ]);
4095
- const textClass = disabled ? "text-grey-40" : "text-grey-100";
4096
- return /* @__PURE__ */ import_react38.default.createElement("label", __spreadValues({
4097
- className: tw(
4098
- "inline-grid grid-cols-[auto_1fr]",
4099
- {
4100
- "cursor-pointer": !disabled && !readOnly,
4101
- "cursor-not-allowed": disabled
4102
- },
4103
- textClass
4104
- ),
4105
- style: __spreadValues({}, style)
4106
- }, rest), children, label && /* @__PURE__ */ import_react38.default.createElement("span", {
4107
- className: tw("typography-body-small self-center")
4108
- }, label), caption && /* @__PURE__ */ import_react38.default.createElement(Typography2, {
4109
- className: tw("col-start-2"),
4110
- variant: "caption-default",
4111
- color: disabled ? "grey-40" : "grey-50"
4112
- }, caption));
4113
- };
4114
-
4115
- // src/components/Checkbox/Checkbox.tsx
4116
- var Checkbox2 = import_react39.default.forwardRef(
4117
- (_a, ref) => {
4118
- var _b = _a, {
4119
- id,
4120
- name,
4121
- caption,
4122
- checked: _checked,
4123
- defaultChecked,
4124
- onChange,
4125
- readOnly = false,
4126
- disabled = false,
4127
- children,
4128
- "aria-label": ariaLabel
4129
- } = _b, props = __objRest(_b, [
4130
- "id",
4131
- "name",
4132
- "caption",
4133
- "checked",
4134
- "defaultChecked",
4135
- "onChange",
4136
- "readOnly",
4137
- "disabled",
4138
- "children",
4139
- "aria-label"
4140
- ]);
4141
- var _a2;
4142
- const [checked, setChecked] = import_react39.default.useState((_a2 = _checked != null ? _checked : defaultChecked) != null ? _a2 : false);
4143
- if (_checked !== void 0 && checked !== _checked) {
4144
- setChecked(_checked);
4145
- }
4146
- return !readOnly || checked ? /* @__PURE__ */ import_react39.default.createElement(ControlLabel, {
4147
- htmlFor: id,
4148
- label: children,
4149
- "aria-label": ariaLabel,
4150
- caption,
4151
- readOnly,
4152
- disabled,
4153
- style: { gap: "0 8px" }
4154
- }, !readOnly && /* @__PURE__ */ import_react39.default.createElement(Checkbox, __spreadProps(__spreadValues({
4155
- id,
4156
- ref,
4157
- name
4158
- }, props), {
4159
- checked,
4160
- readOnly,
4161
- disabled,
4162
- onChange: (e) => {
4163
- setChecked(e.target.checked);
4164
- onChange == null ? void 0 : onChange(e);
4165
- }
4166
- }))) : null;
4167
- }
4168
- );
4169
- var CheckboxSkeleton = () => /* @__PURE__ */ import_react39.default.createElement("div", {
4170
- className: tw("flex gap-3")
4171
- }, /* @__PURE__ */ import_react39.default.createElement(Skeleton, {
4172
- height: 20,
4173
- width: 20
4174
- }), /* @__PURE__ */ import_react39.default.createElement(Skeleton, {
4175
- height: 20,
4176
- width: 150
4177
- }));
4178
- Checkbox2.Skeleton = CheckboxSkeleton;
4179
-
4180
- // src/components/CheckboxGroup/CheckboxGroup.tsx
4181
- var import_react44 = __toESM(require("react"));
4182
- var import_uniqueId = __toESM(require("lodash/uniqueId"));
4183
-
4184
- // src/utils/form/Label/Label.tsx
4185
- var import_react43 = __toESM(require("react"));
4186
- var import_questionMark = __toESM(require_questionMark());
4187
-
4188
- // src/utils/form/FormControl/FormControl.tsx
4189
- var import_react40 = __toESM(require("react"));
4190
- var FormControl = ({ className, inline, children }) => {
4191
- return /* @__PURE__ */ import_react40.default.createElement(Flexbox, {
4192
- direction: "column",
4193
- display: inline ? "inline-flex" : "flex",
4194
- className
4195
- }, children);
4196
- };
4197
-
4198
- // src/utils/form/HelperText/HelperText.tsx
4199
- var import_react42 = __toESM(require("react"));
4200
- var import_isNumber3 = __toESM(require("lodash/isNumber"));
4201
-
4202
- // src/utils/form/CharCounter/CharCounter.tsx
4203
- var import_react41 = __toESM(require("react"));
4204
- var CharCounter = ({ dense = true, length, maxLength, valid = true }) => {
4205
- return /* @__PURE__ */ import_react41.default.createElement("span", {
4206
- className: tw(
4207
- `whitespace-nowrap`,
4208
- valid ? "text-grey-50" : "text-error-70",
4209
- dense ? "typography-caption-default" : "typography-body-small"
4210
- )
4211
- }, `${length} / ${maxLength}`);
4212
- };
4213
-
4214
- // src/utils/form/HelperText/HelperText.tsx
4215
- var import_classnames3 = __toESM(require("classnames"));
4216
- var HelperText = ({
4217
- messageId,
4218
- error: error2 = false,
4219
- helperText,
4220
- length,
4221
- maxLength,
4222
- reserveSpaceForError = true
4223
- }) => {
4224
- const hasError = error2 && helperText;
4225
- const hasMaxLength = (0, import_isNumber3.default)(maxLength) && maxLength > 0;
4226
- const showMessage = hasError || hasMaxLength;
4227
- if (!showMessage) {
4228
- return reserveSpaceForError ? /* @__PURE__ */ import_react42.default.createElement("p", {
4229
- className: tw("block mt-1 mb-3 typography-caption-default")
4230
- }, "\xA0") : null;
4231
- }
4232
- return /* @__PURE__ */ import_react42.default.createElement(Grid, {
4233
- cols: "1",
4234
- rows: "1",
4235
- colGap: "3",
4236
- alignItems: "start",
4237
- autoCols: "min",
4238
- className: tw("mt-1 mb-3")
4239
- }, /* @__PURE__ */ import_react42.default.createElement(GridItem, {
4240
- colStart: "1",
4241
- colEnd: "2"
4242
- }, hasError && /* @__PURE__ */ import_react42.default.createElement("p", {
4243
- id: messageId,
4244
- className: tw("text-error-50 block typography-caption-default")
4245
- }, helperText)), /* @__PURE__ */ import_react42.default.createElement(GridItem, {
4246
- colStart: "2",
4247
- colEnd: "3",
4248
- display: "flex"
4249
- }, (0, import_isNumber3.default)(length) && hasMaxLength && /* @__PURE__ */ import_react42.default.createElement(CharCounter, {
4250
- length,
4251
- maxLength,
4252
- valid: !error2
4253
- })));
4254
- };
4255
- var Skeleton2 = ({ className, children }) => /* @__PURE__ */ import_react42.default.createElement("div", {
4256
- className: (0, import_classnames3.default)(className, "h-[25px]")
4257
- }, children);
4258
- HelperText.Skeleton = Skeleton2;
4259
-
4260
- // src/utils/form/Label/Label.tsx
4261
- var LabelText = ({
4262
- variant = "default",
4263
- labelText,
4264
- required,
4265
- helpTooltip,
4266
- helpTooltipPlacement
4267
- }) => {
4268
- return /* @__PURE__ */ import_react43.default.createElement("span", {
4269
- className: tw("inline-block mb-2 font-medium typography-body-small", {
4270
- "text-grey-60": variant === "default",
4271
- "text-error-50": variant === "error",
4272
- "text-grey-40": variant === "disabled"
4273
- })
4274
- }, labelText, required && /* @__PURE__ */ import_react43.default.createElement("span", {
4275
- className: tw("text-error-50")
4276
- }, "*"), helpTooltip && /* @__PURE__ */ import_react43.default.createElement(Tooltip, {
4277
- content: helpTooltip,
4278
- placement: helpTooltipPlacement
4279
- }, /* @__PURE__ */ import_react43.default.createElement("span", {
4280
- className: tw("text-grey-30 flex items-center cursor-pointer ml-2")
4281
- }, /* @__PURE__ */ import_react43.default.createElement(InlineIcon, {
4282
- icon: import_questionMark.default,
4283
- "data-testid": "icon-info"
4284
- }))));
4285
- };
4286
- var Label = (props) => {
4287
- const _a = props, { id, htmlFor, labelText, labelProps: _b = {} } = _a, labelProps = __objRest(_b, []), { "data-testid": dataTestid, children } = _a;
4288
- return /* @__PURE__ */ import_react43.default.createElement("label", __spreadValues({
4289
- id,
4290
- className: tw("w-full"),
4291
- "data-testid": dataTestid,
4292
- htmlFor
4293
- }, labelProps), labelText && /* @__PURE__ */ import_react43.default.createElement(LabelText, __spreadValues({}, props)), children);
4294
- };
4295
- var LabelSkeleton = () => {
4296
- return /* @__PURE__ */ import_react43.default.createElement(Skeleton, {
4297
- height: 20,
4298
- width: 100,
4299
- className: tw("mb-[7px]")
4300
- });
4301
- };
4302
- Label.Skeleton = LabelSkeleton;
4303
- var LabelControl = (_a) => {
4304
- var _b = _a, {
4305
- messageId,
4306
- error: error2,
4307
- helperText = error2,
4308
- length,
4309
- maxLength,
4310
- reserveSpaceForError,
4311
- fieldset = false,
4312
- children,
4313
- valid,
4314
- disabled
4315
- } = _b, rest = __objRest(_b, [
4316
- "messageId",
4317
- "error",
4318
- "helperText",
4319
- "length",
4320
- "maxLength",
4321
- "reserveSpaceForError",
4322
- "fieldset",
4323
- "children",
4324
- "valid",
4325
- "disabled"
4326
- ]);
4327
- const legacyError = error2 !== void 0 && valid === false;
4328
- const variant = !valid || legacyError ? "error" : disabled ? "disabled" : "default";
4329
- return /* @__PURE__ */ import_react43.default.createElement(FormControl, null, !fieldset && /* @__PURE__ */ import_react43.default.createElement(Label, __spreadProps(__spreadValues({}, rest), {
4330
- variant
4331
- }), children), fieldset && /* @__PURE__ */ import_react43.default.createElement("fieldset", {
4332
- id: rest.id
4333
- }, /* @__PURE__ */ import_react43.default.createElement("legend", {
4334
- className: tw("w-full mb-2")
4335
- }, /* @__PURE__ */ import_react43.default.createElement(LabelText, __spreadProps(__spreadValues({}, rest), {
4336
- variant
4337
- }))), children), /* @__PURE__ */ import_react43.default.createElement(HelperText, {
4338
- messageId,
4339
- error: !valid,
4340
- helperText,
4341
- length,
4342
- maxLength,
4343
- reserveSpaceForError
4344
- }));
4345
- };
4346
- var LabelControlSkeleton = ({ children }) => /* @__PURE__ */ import_react43.default.createElement("div", null, /* @__PURE__ */ import_react43.default.createElement(Label.Skeleton, null), children, /* @__PURE__ */ import_react43.default.createElement(HelperText.Skeleton, null));
4347
- LabelControl.Skeleton = LabelControlSkeleton;
4348
- var getLabelControlProps = (_a) => {
4349
- var _b = _a, {
4350
- labelText,
4351
- required,
4352
- valid = true,
4353
- disabled = false,
4354
- labelProps: _c = {}
4355
- } = _b, labelProps = __objRest(_c, []), {
4356
- helpTooltip,
4357
- helpTooltipPlacement,
4358
- maxLength,
4359
- error: error2,
4360
- helperText,
4361
- reserveSpaceForError,
4362
- "data-testid": dataTestId
4363
- } = _b;
4364
- return {
4365
- labelText,
4366
- required,
4367
- valid,
4368
- disabled,
4369
- labelProps,
4370
- helpTooltip,
4371
- helpTooltipPlacement,
4372
- error: error2,
4373
- helperText,
4374
- maxLength,
4375
- reserveSpaceForError,
4376
- "data-testid": dataTestId
4377
- };
4378
- };
4379
-
4380
- // src/components/CheckboxGroup/CheckboxGroup.tsx
4381
- var isCheckbox = (c) => {
4382
- return import_react44.default.isValidElement(c) && c.type === Checkbox2;
4383
- };
4384
- var CheckboxGroup = (_a) => {
4385
- var _b = _a, {
4386
- value,
4387
- defaultValue,
4388
- onChange,
4389
- readOnly = false,
4390
- cols,
4391
- children
4392
- } = _b, props = __objRest(_b, [
4393
- "value",
4394
- "defaultValue",
4395
- "onChange",
4396
- "readOnly",
4397
- "cols",
4398
- "children"
4399
- ]);
4400
- var _a2;
4401
- const [selectedItems, setSelectedItems] = (0, import_react44.useState)((_a2 = value != null ? value : defaultValue) != null ? _a2 : []);
4402
- if (value !== void 0 && value !== selectedItems) {
4403
- setSelectedItems(value);
4404
- }
4405
- const errorMessageId = (0, import_uniqueId.default)();
4406
- const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
4407
- const labelControlProps = getLabelControlProps(props);
4408
- const handleChange = (e) => {
4409
- const { value: value2 } = e.target;
4410
- const updated = e.target.checked ? [...selectedItems, value2] : selectedItems.filter((v) => v !== value2);
4411
- setSelectedItems(updated);
4412
- onChange == null ? void 0 : onChange(updated);
4413
- };
4414
- return /* @__PURE__ */ import_react44.default.createElement(LabelControl, __spreadValues(__spreadValues({
4415
- fieldset: true
4416
- }, labelControlProps), errorProps), /* @__PURE__ */ import_react44.default.createElement(InputGroup, {
4417
- cols
4418
- }, import_react44.default.Children.map(children, (c) => {
4419
- var _a3, _b2;
4420
- if (!isCheckbox(c)) {
4421
- return null;
4422
- }
4423
- const str = (_a3 = c.props.value) == null ? void 0 : _a3.toString();
4424
- const defaultChecked = defaultValue === void 0 ? void 0 : str !== void 0 && defaultValue.includes(str);
4425
- const checked = value === void 0 ? void 0 : str !== void 0 && value.includes(str);
4426
- return import_react44.default.cloneElement(c, {
4427
- defaultChecked,
4428
- checked,
4429
- onChange: (_b2 = c.props.onChange) != null ? _b2 : handleChange,
4430
- disabled: props.disabled || c.props.disabled,
4431
- readOnly
4432
- });
4433
- })));
4434
- };
4435
- var CheckboxGroupSkeleton = ({ options = 2 }) => {
4436
- return /* @__PURE__ */ import_react44.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react44.default.createElement("div", {
4437
- className: tw("flex flex-wrap flex-col gap-2")
4438
- }, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ import_react44.default.createElement(Checkbox2.Skeleton, {
4439
- key
4440
- }))));
4441
- };
4442
- CheckboxGroup.Skeleton = CheckboxGroupSkeleton;
4443
-
4444
- // src/components/ChoiceChip/ChoiceChip.tsx
4445
- var import_react45 = __toESM(require("react"));
4446
-
4447
- // src/components/Combobox/Combobox.tsx
4448
- var import_react47 = __toESM(require("react"));
4449
- var import_downshift = require("downshift");
4450
- var import_match_sorter = require("match-sorter");
4451
- var import_uniqueId2 = __toESM(require("lodash/uniqueId"));
4452
- var import_omit5 = __toESM(require("lodash/omit"));
4453
- var import_overlays5 = require("@react-aria/overlays");
4454
-
4455
- // src/components/Popover/PopoverWrapper.tsx
4456
- var import_react46 = __toESM(require("react"));
4457
- var import_focus = require("@react-aria/focus");
4458
- var import_overlays4 = require("@react-aria/overlays");
4459
- var import_utils3 = require("@react-aria/utils");
4460
- var PopoverWrapper = import_react46.default.forwardRef((props, ref) => {
4461
- const _a = props, {
4462
- id,
4463
- children,
4464
- placement,
4465
- arrowProps,
4466
- isOpen,
4467
- hideArrow,
4468
- shouldCloseOnBlur,
4469
- isKeyboardDismissDisabled,
4470
- isNonModal = true,
4471
- isDismissable,
4472
- autoFocus,
4473
- containFocus
4474
- } = _a, otherProps = __objRest(_a, [
4475
- "id",
4476
- "children",
4477
- "placement",
4478
- "arrowProps",
4479
- "isOpen",
4480
- "hideArrow",
4481
- "shouldCloseOnBlur",
4482
- "isKeyboardDismissDisabled",
4483
- "isNonModal",
4484
- "isDismissable",
4485
- "autoFocus",
4486
- "containFocus"
4487
- ]);
4488
- const { overlayProps } = (0, import_overlays4.useOverlay)(
4489
- __spreadProps(__spreadValues({}, props), { isDismissable: isDismissable && isOpen }),
4490
- ref
4491
- );
4492
- const { modalProps } = (0, import_overlays4.useModal)({
4493
- isDisabled: isNonModal
4494
- });
4495
- if (!props.isOpen) {
4496
- return null;
4497
- }
4498
- return /* @__PURE__ */ import_react46.default.createElement(import_overlays4.OverlayContainer, null, /* @__PURE__ */ import_react46.default.createElement(import_focus.FocusScope, {
4499
- restoreFocus: true,
4500
- autoFocus,
4501
- contain: containFocus
4502
- }, /* @__PURE__ */ import_react46.default.createElement(Popover.Panel, __spreadProps(__spreadValues({
4503
- ref,
4504
- role: "dialog"
4505
- }, (0, import_utils3.mergeProps)(otherProps, modalProps, overlayProps)), {
4506
- id: id != null ? id : overlayProps.id
4507
- }), children, /* @__PURE__ */ import_react46.default.createElement(import_overlays4.DismissButton, {
4508
- onDismiss: props.onClose
4509
- }))));
4510
- });
4511
-
4512
- // src/components/Combobox/Combobox.tsx
4513
- var ComboboxBase = (_a) => {
4514
- var _b = _a, {
4515
- id,
4516
- name,
4517
- placeholder,
4518
- maxHeight,
4519
- options,
4520
- optionKeys = ["label", "value"],
4521
- noResults,
4522
- optionToString: itemToString = getOptionLabelBuiltin,
4523
- createOption,
4524
- renderOption = (opt) => itemToString(opt),
4525
- isOptionDisabled = isOptionDisabledBuiltin,
4526
- defaultValue,
4527
- value,
4528
- onChange,
4529
- children,
4530
- valid = true,
4531
- disabled = false,
4532
- readOnly = false
4533
- } = _b, props = __objRest(_b, [
4534
- "id",
4535
- "name",
4536
- "placeholder",
4537
- "maxHeight",
4538
- "options",
4539
- "optionKeys",
4540
- "noResults",
4541
- "optionToString",
4542
- "createOption",
4543
- "renderOption",
4544
- "isOptionDisabled",
4545
- "defaultValue",
4546
- "value",
4547
- "onChange",
4548
- "children",
4549
- "valid",
4550
- "disabled",
4551
- "readOnly"
4552
- ]);
4553
- var _a2;
4554
- const targetRef = (0, import_react47.useRef)(null);
4555
- const overlayRef = (0, import_react47.useRef)(null);
4556
- const [inputItems, setInputItems] = (0, import_react47.useState)(options);
4557
- const [hasFocus, setFocus] = (0, import_react47.useState)(false);
4558
- const updateInputItems = (query) => {
4559
- const keys = typeof options[0] === "string" ? void 0 : optionKeys;
4560
- setInputItems(query ? (0, import_match_sorter.matchSorter)(options, query, { keys }) : options);
4561
- };
4562
- const {
4563
- isOpen,
4564
- getToggleButtonProps,
4565
- getMenuProps,
4566
- getInputProps,
4567
- highlightedIndex,
4568
- inputValue,
4569
- getItemProps,
4570
- selectedItem,
4571
- closeMenu
4572
- } = (0, import_downshift.useCombobox)({
4573
- id,
4574
- selectedItem: value,
4575
- defaultSelectedItem: defaultValue,
4576
- itemToString,
4577
- items: inputItems,
4578
- stateReducer: (_, actionChanges) => {
4579
- const { changes, type } = actionChanges;
4580
- switch (type) {
4581
- case import_downshift.useCombobox.stateChangeTypes.InputBlur: {
4582
- return __spreadProps(__spreadValues({}, changes), {
4583
- selectedItem: createOption ? createOption == null ? void 0 : createOption(changes.inputValue) : changes.selectedItem
4584
- });
4585
- }
4586
- }
4587
- return changes;
4588
- },
4589
- onSelectedItemChange: (e) => onChange == null ? void 0 : onChange(e.selectedItem),
4590
- onInputValueChange: ({ inputValue: inputValue2 }) => updateInputItems(inputValue2)
4591
- });
4592
- const { overlayProps } = (0, import_overlays5.useOverlayPosition)({
4593
- targetRef,
4594
- overlayRef,
4595
- placement: "bottom start",
4596
- shouldFlip: true,
4597
- isOpen
4598
- });
4599
- (0, import_react47.useEffect)(() => {
4600
- updateInputItems(inputValue);
4601
- }, [JSON.stringify(options)]);
4602
- const inputProps = getInputProps({ disabled: disabled || readOnly });
4603
- const hasNoResults = options.length === 0 || inputItems.length === 0;
4604
- const width = (_a2 = targetRef.current) == null ? void 0 : _a2.offsetWidth;
4605
- const style = isOpen ? __spreadProps(__spreadValues({}, overlayProps.style), { width }) : { display: "none" };
4606
- return /* @__PURE__ */ import_react47.default.createElement("div", {
4607
- className: tw("relative")
4608
- }, /* @__PURE__ */ import_react47.default.createElement(Select.InputContainer, {
4609
- ref: targetRef,
4610
- variant: disabled ? "disabled" : !valid ? "error" : readOnly ? "readOnly" : hasFocus ? "focused" : "default"
4611
- }, /* @__PURE__ */ import_react47.default.createElement(Select.Input, __spreadProps(__spreadValues(__spreadValues({
4612
- id,
4613
- name,
4614
- placeholder: readOnly ? void 0 : placeholder
4615
- }, inputProps), props), {
4616
- disabled,
4617
- readOnly,
4618
- onFocus: (e) => {
4619
- var _a3;
4620
- setFocus(true);
4621
- (_a3 = inputProps.onFocus) == null ? void 0 : _a3.call(inputProps, e);
4622
- },
4623
- onBlur: (e) => {
4624
- var _a3;
4625
- setFocus(false);
4626
- (_a3 = inputProps.onBlur) == null ? void 0 : _a3.call(inputProps, e);
4627
- },
4628
- onKeyDown: (e) => {
4629
- var _a3;
4630
- e.stopPropagation();
4631
- (_a3 = inputProps.onKeyDown) == null ? void 0 : _a3.call(inputProps, e);
4632
- },
4633
- onKeyUp: (e) => e.stopPropagation()
4634
- })), !readOnly && /* @__PURE__ */ import_react47.default.createElement(Select.Toggle, __spreadValues({
4635
- hasFocus,
4636
- isOpen
4637
- }, getToggleButtonProps({ disabled })))), /* @__PURE__ */ import_react47.default.createElement(PopoverWrapper, __spreadProps(__spreadValues({
4638
- isOpen: true,
4639
- isDismissable: true,
4640
- autoFocus: true
4641
- }, getMenuProps({ ref: overlayRef })), {
4642
- style,
4643
- onClose: closeMenu
4644
- }), /* @__PURE__ */ import_react47.default.createElement(Select.Menu, {
4645
- maxHeight
4646
- }, isOpen && hasNoResults && /* @__PURE__ */ import_react47.default.createElement(Select.NoResults, null, noResults), isOpen && inputItems.map((item, index) => /* @__PURE__ */ import_react47.default.createElement(Select.Item, __spreadValues({
4647
- key: itemToString(item),
4648
- selected: item === selectedItem,
4649
- highlighted: index === highlightedIndex
4650
- }, getItemProps({ item, index, disabled: isOptionDisabled(item, index) })), renderOption(item))))));
4651
- };
4652
- var ComboboxSkeleton = () => /* @__PURE__ */ import_react47.default.createElement(Skeleton, {
4653
- height: 38
4654
- });
4655
- ComboboxBase.Skeleton = ComboboxSkeleton;
4656
- var Combobox = (_a) => {
4657
- var _b = _a, {
4658
- options,
4659
- noResults
4660
- } = _b, props = __objRest(_b, [
4661
- "options",
4662
- "noResults"
4663
- ]);
4664
- var _a2;
4665
- const id = (0, import_react47.useRef)((_a2 = props.id) != null ? _a2 : `combobox-${(0, import_uniqueId2.default)()}`);
4666
- const errorMessageId = (0, import_uniqueId2.default)();
4667
- const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
4668
- const labelControlProps = getLabelControlProps(props);
4669
- const baseProps = (0, import_omit5.default)(props, Object.keys(labelControlProps));
4670
- return /* @__PURE__ */ import_react47.default.createElement(LabelControl, __spreadValues({
4671
- id: `${id.current}-label`,
4672
- htmlFor: `${id.current}-input`,
4673
- messageId: errorMessageId
4674
- }, labelControlProps), /* @__PURE__ */ import_react47.default.createElement(ComboboxBase, __spreadProps(__spreadValues(__spreadValues({}, baseProps), errorProps), {
4675
- id: id.current,
4676
- options,
4677
- noResults,
4678
- disabled: props.disabled,
4679
- valid: props.valid
4680
- })));
4681
- };
4682
- Combobox.Skeleton = () => /* @__PURE__ */ import_react47.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react47.default.createElement(ComboboxBase.Skeleton, null));
4683
-
4684
- // src/components/DataList/DataList.tsx
4685
- var import_react51 = __toESM(require("react"));
4686
-
4687
- // src/common/DataList/DataList.tsx
4688
- var import_react48 = __toESM(require("react"));
4689
- var import_chevronUp2 = __toESM(require_chevronUp());
4690
- var import_chevronDown3 = __toESM(require_chevronDown());
4691
- var getAlignClassNames = (align) => tw("flex items-center", {
4692
- "justify-end": align === "right",
4693
- "justify-center": align === "center",
4694
- "justify-start": align === "left" || align === void 0
4695
- });
4696
- var DataList = (_a) => {
4697
- var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
4698
- return /* @__PURE__ */ import_react48.default.createElement("div", __spreadValues({}, rest));
4699
- };
4700
- var HeadCell = (_a) => {
4701
- var _b = _a, {
4702
- className,
4703
- sticky,
4704
- align
4705
- } = _b, rest = __objRest(_b, [
4706
- "className",
4707
- "sticky",
4708
- "align"
4709
- ]);
4710
- return /* @__PURE__ */ import_react48.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
4711
- role: "cell",
4712
- className: classNames(cellClassNames, getHeadCellClassNames(sticky), getAlignClassNames(align), className)
4713
- }));
4714
- };
4715
- var Cell = (_a) => {
4716
- var _b = _a, { className, align } = _b, rest = __objRest(_b, ["className", "align"]);
4717
- return /* @__PURE__ */ import_react48.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
4718
- role: "cell",
4719
- className: classNames(
4720
- cellClassNames,
4721
- getBodyCellClassNames(false),
4722
- getAlignClassNames(align),
4723
- tw("border-grey-10 group-hover:bg-grey-0 group-last:border-b-0"),
4724
- className
4725
- )
4726
- }));
4727
- };
4728
- var Row = (_a) => {
4729
- var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
4730
- return /* @__PURE__ */ import_react48.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
4731
- className: classNames(tw("contents group"), className),
4732
- role: "row"
4733
- }));
4734
- };
4735
- var SortCell = (_a) => {
4736
- var _b = _a, { children, direction = "none", onClick } = _b, rest = __objRest(_b, ["children", "direction", "onClick"]);
4737
- return /* @__PURE__ */ import_react48.default.createElement(HeadCell, __spreadProps(__spreadValues({}, rest), {
4738
- "aria-sort": direction,
4739
- role: "cell"
4740
- }), /* @__PURE__ */ import_react48.default.createElement("span", {
4741
- className: getSortCellButtonClassNames(rest.align),
4742
- role: "button",
4743
- tabIndex: -1,
4744
- onClick
4745
- }, children, /* @__PURE__ */ import_react48.default.createElement("div", {
4746
- "data-sort-icons": true,
4747
- className: tw("flex flex-col", {
4748
- "invisible group-hover:visible": direction === "none"
4749
- })
4750
- }, /* @__PURE__ */ import_react48.default.createElement(InlineIcon, {
4751
- icon: import_chevronUp2.default,
4752
- className: getSortCellIconClassNames(direction === "descending")
4753
- }), /* @__PURE__ */ import_react48.default.createElement(InlineIcon, {
4754
- icon: import_chevronDown3.default,
4755
- className: getSortCellIconClassNames(direction === "ascending")
4756
- }))));
4757
- };
4758
- DataList.HeadCell = HeadCell;
4759
- DataList.SortCell = SortCell;
4760
- DataList.Cell = Cell;
4761
- DataList.Row = Row;
4762
-
4763
- // src/components/Template/Template.tsx
4764
- var import_react49 = __toESM(require("react"));
4765
-
4766
- // src/components/DataList/DataList.tsx
4767
- var import_orderBy2 = __toESM(require("lodash/orderBy"));
4768
-
4769
- // src/utils/table/useTableSort.tsx
4770
- var import_react50 = __toESM(require("react"));
4771
-
4772
- // src/components/DataTable/DataTable.tsx
4773
- var import_react54 = __toESM(require("react"));
4774
-
4775
- // src/components/Table/Table.tsx
4776
- var import_react53 = __toESM(require("react"));
4777
-
4778
- // src/utils/table/useScrollTarget.ts
4779
- var import_react52 = __toESM(require("react"));
4780
- var useScrollTarget = (callback) => {
4781
- const targetRef = import_react52.default.useRef(null);
4782
- import_react52.default.useLayoutEffect(() => {
4783
- const observer = new IntersectionObserver((entries) => entries[0].isIntersecting && callback && callback(), {
4784
- root: null,
4785
- rootMargin: `0px 0px 200px 0px`
4786
- });
4787
- if (targetRef.current) {
4788
- observer.observe(targetRef.current);
4789
- }
4790
- return () => observer.disconnect();
4791
- }, []);
4792
- return targetRef;
4793
- };
4794
-
4795
- // src/components/Table/Table.tsx
4796
- var Table2 = (_a) => {
4797
- var _b = _a, { children, onPrev, onNext } = _b, rest = __objRest(_b, ["children", "onPrev", "onNext"]);
4798
- const bottomRef = useScrollTarget(onNext);
4799
- const topRef = useScrollTarget(onPrev);
4800
- return /* @__PURE__ */ import_react53.default.createElement("div", {
4801
- className: "relative w-full"
4802
- }, /* @__PURE__ */ import_react53.default.createElement("div", {
4803
- ref: topRef,
4804
- className: tw("absolute top-0 h-1 w-full left-0 bg-transparent")
4805
- }), /* @__PURE__ */ import_react53.default.createElement(Table, __spreadValues({}, rest), children), /* @__PURE__ */ import_react53.default.createElement("div", {
4806
- ref: bottomRef,
4807
- className: tw("absolute bottom-0 h-1 w-full left-0 bg-transparent")
4808
- }));
4809
- };
4810
- Table2.Head = Table.Head;
4811
- Table2.Body = Table.Body;
4812
- Table2.Row = Table.Row;
4813
- Table2.Cell = Table.Cell;
4814
- Table2.SortCell = Table.SortCell;
4815
- Table2.SelectCell = Table.SelectCell;
4816
-
4817
- // src/components/DataTable/DataTable.tsx
4818
- var import_orderBy3 = __toESM(require("lodash/orderBy"));
4819
-
4820
- // src/components/Dialog/Dialog.tsx
4821
- var import_react55 = __toESM(require("react"));
4822
- var import_omit6 = __toESM(require("lodash/omit"));
4823
- var import_overlays6 = require("@react-aria/overlays");
4824
- var import_dialog = require("@react-aria/dialog");
4825
- var import_focus2 = require("@react-aria/focus");
4826
- var import_utils4 = require("@react-aria/utils");
4827
- var import_overlays7 = require("@react-stately/overlays");
4828
-
4829
- // src/components/Divider/Divider.tsx
4830
- var import_react56 = __toESM(require("react"));
4831
-
4832
- // src/components/Dropdown/Dropdown.tsx
4833
- var import_react59 = __toESM(require("react"));
4834
-
4835
- // src/components/Popover/Popover.tsx
4836
- var import_react58 = __toESM(require("react"));
4837
- var import_interactions = require("@react-aria/interactions");
4838
- var import_overlays8 = require("@react-aria/overlays");
4839
- var import_utils5 = require("@react-aria/utils");
4840
- var import_overlays9 = require("@react-stately/overlays");
4841
-
4842
- // src/components/Popover/PopoverContext.tsx
4843
- var import_react57 = require("react");
4844
- var PopoverContext = (0, import_react57.createContext)(null);
4845
- var usePopoverContext = () => {
4846
- const ctx = (0, import_react57.useContext)(PopoverContext);
4847
- if (ctx === null) {
4848
- throw new Error("PopoverContext was used outside of provider.");
4849
- }
4850
- return ctx;
4851
- };
4852
-
4853
- // src/components/Popover/Popover.tsx
4854
- var Popover2 = (props) => {
4855
- var _a;
4856
- const {
4857
- id,
4858
- placement: _placement = "bottom-left",
4859
- isDismissable = true,
4860
- isKeyboardDismissDisabled,
4861
- autoFocus = true,
4862
- containFocus = false,
4863
- targetRef
4864
- } = props;
4865
- const triggerRef = (0, import_react58.useRef)(null);
4866
- const overlayRef = (0, import_react58.useRef)(null);
4867
- const state = (0, import_overlays9.useOverlayTriggerState)(props);
4868
- const {
4869
- overlayProps: popoverProps,
4870
- placement,
4871
- arrowProps
4872
- } = (0, import_overlays8.useOverlayPosition)({
4873
- targetRef: targetRef != null ? targetRef : triggerRef,
4874
- overlayRef,
4875
- placement: _placement.replace("-", " "),
4876
- offset: props.offset,
4877
- shouldFlip: props.shouldFlip,
4878
- isOpen: state.isOpen
4879
- });
4880
- const { triggerProps, overlayProps: otherOverlayProps } = (0, import_overlays8.useOverlayTrigger)(
4881
- { type: (_a = props.type) != null ? _a : "dialog" },
4882
- state,
4883
- triggerRef
4884
- );
4885
- return /* @__PURE__ */ import_react58.default.createElement(PopoverContext.Provider, {
4886
- value: {
4887
- state
4888
- }
4889
- }, import_react58.default.Children.map(props.children, (child) => {
4890
- if (isComponentType(child, Popover2.Trigger)) {
4891
- return /* @__PURE__ */ import_react58.default.createElement(import_interactions.PressResponder, __spreadValues({
4892
- ref: triggerRef,
4893
- onPress: state.toggle
4894
- }, triggerProps), /* @__PURE__ */ import_react58.default.createElement(PopoverTriggerWrapper, {
4895
- "data-testid": props["data-testid"],
4896
- "aria-controls": id
4897
- }, child.props.children));
4898
- }
4899
- if (isComponentType(child, Popover2.Panel)) {
4900
- return /* @__PURE__ */ import_react58.default.createElement(PopoverWrapper, __spreadProps(__spreadValues(__spreadValues({
4901
- ref: overlayRef,
4902
- isOpen: state.isOpen,
4903
- onClose: state.close,
4904
- placement,
4905
- arrowProps,
4906
- isDismissable,
4907
- isKeyboardDismissDisabled,
4908
- autoFocus,
4909
- containFocus
4910
- }, popoverProps), otherOverlayProps), {
4911
- id
4912
- }), child.props.children);
4913
- }
4914
- throw new Error("Invalid children element type");
4915
- }));
4916
- };
4917
- var Trigger = () => null;
4918
- Trigger.displayName = "Popover.Trigger";
4919
- Popover2.Trigger = Trigger;
4920
- var Panel = () => null;
4921
- Panel.displayName = "Popover.Panel";
4922
- Popover2.Panel = Panel;
4923
- var asPopoverButton = (Component, displayName) => {
4924
- const PopoverButton2 = (props) => {
4925
- const { onClick } = props;
4926
- const { state } = usePopoverContext();
4927
- const handleClick = (e) => {
4928
- state.close();
4929
- onClick == null ? void 0 : onClick(e);
4930
- };
4931
- return /* @__PURE__ */ import_react58.default.createElement(Component, __spreadProps(__spreadValues({}, props), {
4932
- onClick: handleClick
4933
- }));
4934
- };
4935
- PopoverButton2.displayName = displayName;
4936
- return PopoverButton2;
4937
- };
4938
- var PopoverButton = asPopoverButton(Button, "PopoverButton");
4939
- Popover2.Button = PopoverButton;
4940
- var PopoverTriggerWrapper = (_a) => {
4941
- var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
4942
- var _a2;
4943
- const ref = (0, import_react58.useRef)(null);
4944
- const trigger = import_react58.default.Children.only(children);
4945
- const { pressProps } = (0, import_interactions.usePress)(__spreadProps(__spreadValues({}, rest), { ref }));
4946
- return import_react58.default.cloneElement(trigger, __spreadProps(__spreadValues({
4947
- "ref": ref
4948
- }, (0, import_utils5.mergeProps)(pressProps, trigger.props)), {
4949
- "aria-controls": (_a2 = rest["aria-controls"]) != null ? _a2 : pressProps["aria-controls"]
4950
- }));
4951
- };
4952
-
4953
- // src/components/Dropdown/Dropdown.tsx
4954
- var Dropdown = ({ children, content, placement = "bottom-left" }) => {
4955
- return /* @__PURE__ */ import_react59.default.createElement(Popover2, {
4956
- type: "menu",
4957
- placement,
4958
- autoFocus: true
4959
- }, /* @__PURE__ */ import_react59.default.createElement(Popover2.Trigger, null, children), /* @__PURE__ */ import_react59.default.createElement(Popover2.Panel, null, content));
4960
- };
4961
- var DropdownMenu2 = ({
4962
- title,
4963
- children,
4964
- contentId,
4965
- triggerId,
4966
- setClose = () => void 0
4967
- }) => {
4968
- const menuRef = import_react59.default.useRef(null);
4969
- import_react59.default.useEffect(() => {
4970
- const id = setTimeout(() => {
4971
- var _a, _b, _c;
4972
- return (_c = (_b = (_a = menuRef.current) == null ? void 0 : _a.children) == null ? void 0 : _b[0]) == null ? void 0 : _c.focus();
4973
- });
4974
- return () => clearTimeout(id);
4975
- }, [menuRef.current]);
4976
- return /* @__PURE__ */ import_react59.default.createElement("div", {
4977
- style: { minWidth: "250px" },
4978
- className: tw("py-3 bg-white")
4979
- }, !!title && /* @__PURE__ */ import_react59.default.createElement("div", {
4980
- className: tw("px-4 py-4 text-left text-grey-100 typography-body-default-medium font-semibold")
4981
- }, title), /* @__PURE__ */ import_react59.default.createElement("ol", {
4982
- role: "menu",
4983
- ref: menuRef,
4984
- id: contentId,
4985
- "aria-labelledby": triggerId
4986
- }, import_react59.default.Children.map(children, (child) => {
4987
- return import_react59.default.cloneElement(child, { setClose });
4988
- })));
4989
- };
4990
- var DropdownItem = (_a) => {
4991
- var _b = _a, {
4992
- children,
4993
- disabled = false,
4994
- tooltip,
4995
- tooltipPlacement,
4996
- color = "default",
4997
- onSelect,
4998
- setClose = () => void 0
4999
- } = _b, props = __objRest(_b, [
5000
- "children",
5001
- "disabled",
5002
- "tooltip",
5003
- "tooltipPlacement",
5004
- "color",
5005
- "onSelect",
5006
- "setClose"
5007
- ]);
5008
- const { state } = usePopoverContext();
5009
- const handleSelect = () => {
5010
- onSelect == null ? void 0 : onSelect();
5011
- state.close();
5012
- setClose();
5013
- };
5014
- const handleKeyDown = (event) => {
5015
- const target = event.target;
5016
- const parent = target.parentElement;
5017
- const first = parent.firstChild;
5018
- const last = parent.lastChild;
5019
- const next = target.nextElementSibling;
5020
- const prev = target.previousElementSibling;
5021
- if (event.key === "ArrowUp") {
5022
- prev ? prev.focus() : last.focus();
5023
- } else if (event.key === "ArrowDown") {
5024
- next ? next.focus() : first.focus();
5025
- } else if (event.key === "Tab") {
5026
- event.preventDefault();
5027
- event.stopPropagation();
5028
- } else if (event.key === "Home" || event.key === "PageUp") {
5029
- first.focus();
5030
- } else if (event.key === "End" || event.key === "PageDown") {
5031
- last.focus();
5032
- } else if (event.key === "Enter") {
5033
- !disabled && handleSelect();
5034
- }
5035
- };
5036
- const handleClick = (e) => {
5037
- e.stopPropagation();
5038
- if (!disabled) {
5039
- handleSelect();
5040
- }
5041
- };
5042
- const itemContent = /* @__PURE__ */ import_react59.default.createElement("div", {
5043
- className: tw("py-3 px-4")
5044
- }, children);
5045
- return /* @__PURE__ */ import_react59.default.createElement("li", __spreadProps(__spreadValues({
5046
- role: "menuitem",
5047
- tabIndex: -1,
5048
- onClick: handleClick,
5049
- onKeyDown: handleKeyDown
5050
- }, props), {
5051
- className: tw("typography-body-small flex items-center focus:ring-0", {
5052
- "text-grey-70 cursor-pointer hover:bg-grey-0": !disabled,
5053
- "text-grey-10 cursor-not-allowed": disabled,
5054
- "text-primary-70 hover:text-primary-80": color === "danger" && !disabled
5055
- })
5056
- }), tooltip ? /* @__PURE__ */ import_react59.default.createElement(Tooltip, {
5057
- content: tooltip,
5058
- placement: tooltipPlacement,
5059
- inline: false
5060
- }, itemContent) : itemContent);
5061
- };
5062
- Dropdown.Menu = DropdownMenu2;
5063
- Dropdown.Item = DropdownItem;
5064
-
5065
- // src/components/DropdownMenu/DropdownMenu.tsx
5066
- var import_react62 = __toESM(require("react"));
5067
- var import_i18n = require("@react-aria/i18n");
5068
- var import_collections = require("@react-stately/collections");
5069
- var import_tree = require("@react-stately/tree");
5070
- var import_menu = require("@react-stately/menu");
5071
- var import_overlays10 = require("@react-aria/overlays");
5072
- var import_menu2 = require("@react-aria/menu");
5073
- var import_separator = require("@react-aria/separator");
5074
- var import_interactions2 = require("@react-aria/interactions");
5075
- var import_utils7 = require("@react-aria/utils");
5076
-
5077
- // src/components/Input/Input.tsx
5078
- var import_uniqueId3 = __toESM(require("lodash/uniqueId"));
5079
- var import_toString = __toESM(require("lodash/toString"));
5080
- var import_omit7 = __toESM(require("lodash/omit"));
5081
- var import_react61 = __toESM(require("react"));
5082
-
5083
- // src/utils/constants.ts
5084
- var getCommonInputStyles = ({ readOnly, valid }) => tw(
5085
- "block w-full rounded-sm disabled:cursor-not-allowed disabled:border-grey-20 disabled:bg-grey-5 typography-body-small text-grey-70 disabled:text-grey-40 placeholder:text-grey-40 focus:outline-none",
5086
- {
5087
- "px-3 py-3": !readOnly,
5088
- "border-none resize-none cursor-default": readOnly,
5089
- "border border-error-50": !valid && !readOnly,
5090
- "border border-grey-20 hover:border-grey-50 focus:border-info-70": valid && !readOnly
5091
- }
5092
- );
5093
-
5094
- // src/utils/form/InputAdornment/InputAdornment.tsx
5095
- var import_react60 = __toESM(require("react"));
5096
- var import_tick4 = __toESM(require_tick());
5097
- var import_error3 = __toESM(require_error());
5098
- var import_search2 = __toESM(require_search());
5099
- var import_cross4 = __toESM(require_cross());
5100
- var InputAdornment = ({ placement = "right", className, dense, children }) => {
5101
- return /* @__PURE__ */ import_react60.default.createElement("span", {
5102
- className: classNames(className, "absolute inset-y-0 grow-0 text-grey-40 flex items-center mx-3", {
5103
- "right-0": placement === "right",
5104
- "left-0": placement === "left",
5105
- "typography-body-small": dense,
5106
- "typography-body-default-medium": !dense
5107
- })
5108
- }, /* @__PURE__ */ import_react60.default.createElement(Flexbox, {
5109
- gap: "3",
5110
- wrap: "wrap"
5111
- }, children));
5112
- };
5113
- var SearchIcon = ({ onClick }) => /* @__PURE__ */ import_react60.default.createElement(Icon, {
5114
- icon: import_search2.default,
5115
- color: "grey-30",
5116
- "data-testid": "icon-search",
5117
- onClick
5118
- });
5119
- var ResetIcon = ({ onClick }) => /* @__PURE__ */ import_react60.default.createElement(Icon, {
5120
- className: "hover:cursor-pointer",
5121
- icon: import_cross4.default,
5122
- color: "grey-30",
5123
- "data-testid": "icon-reset",
5124
- onClick
5125
- });
5126
-
5127
- // src/components/Input/Input.tsx
5128
- var createInput = (displayName, opts = {}) => {
5129
- const InputComponent = (0, import_react61.forwardRef)(
5130
- (_a, ref) => {
5131
- var _b = _a, {
5132
- type = "text",
5133
- maxLength,
5134
- valid = true,
5135
- required = false,
5136
- endAdornment,
5137
- disabled = false,
5138
- readOnly = false
5139
- } = _b, props = __objRest(_b, [
5140
- "type",
5141
- "maxLength",
5142
- "valid",
5143
- "required",
5144
- "endAdornment",
5145
- "disabled",
5146
- "readOnly"
5147
- ]);
5148
- var _a2;
5149
- const inputRef = import_react61.default.useRef(null);
5150
- (0, import_react61.useImperativeHandle)(ref, () => inputRef.current);
5151
- const handleReset = () => {
5152
- var _a3;
5153
- const el = inputRef.current;
5154
- if (el) {
5155
- const lastValue = el.value;
5156
- el.value = "";
5157
- (_a3 = el._valueTracker) == null ? void 0 : _a3.setValue(lastValue);
5158
- el.dispatchEvent(new Event("change", { bubbles: true }));
5159
- el.focus();
5160
- }
5161
- };
5162
- return /* @__PURE__ */ import_react61.default.createElement("span", {
5163
- className: tw("relative block")
5164
- }, opts.adornment && /* @__PURE__ */ import_react61.default.createElement(InputAdornment, {
5165
- placement: "left"
5166
- }, opts.adornment), /* @__PURE__ */ import_react61.default.createElement("input", __spreadProps(__spreadValues({
5167
- ref: inputRef,
5168
- type
5169
- }, props), {
5170
- disabled,
5171
- maxLength,
5172
- required,
5173
- readOnly,
5174
- className: classNames(
5175
- {
5176
- "pl-7": opts.adornment
5177
- },
5178
- getCommonInputStyles({ readOnly, valid }),
5179
- props.className
5180
- )
5181
- })), opts.canReset && (props.value || ((_a2 = inputRef.current) == null ? void 0 : _a2.value)) && /* @__PURE__ */ import_react61.default.createElement(InputAdornment, null, /* @__PURE__ */ import_react61.default.createElement(ResetIcon, {
5182
- onClick: handleReset
5183
- })), !opts.canReset && endAdornment && /* @__PURE__ */ import_react61.default.createElement(InputAdornment, null, endAdornment));
5184
- }
5185
- );
5186
- InputComponent.displayName = displayName;
5187
- InputComponent.Skeleton = () => /* @__PURE__ */ import_react61.default.createElement(Skeleton, {
5188
- height: 38
5189
- });
5190
- return InputComponent;
5191
- };
5192
- var InputBase = createInput("InputBase");
5193
- var SearchInput = createInput("SearchInput", { adornment: /* @__PURE__ */ import_react61.default.createElement(SearchIcon, null), canReset: true });
5194
- var Input2 = import_react61.default.forwardRef((_a, ref) => {
5195
- var _b = _a, { readOnly = false } = _b, props = __objRest(_b, ["readOnly"]);
5196
- var _a2, _b2, _c;
5197
- const [value, setValue] = (0, import_react61.useState)((_b2 = (_a2 = props.value) != null ? _a2 : props.defaultValue) != null ? _b2 : "");
5198
- const id = (0, import_react61.useRef)((_c = props.id) != null ? _c : `input-${(0, import_uniqueId3.default)()}`);
5199
- const errorMessageId = (0, import_uniqueId3.default)();
5200
- const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
5201
- const _d = getLabelControlProps(props), { "data-testid": dataTestId } = _d, labelControlProps = __objRest(_d, ["data-testid"]);
5202
- const baseProps = (0, import_omit7.default)(props, Object.keys(labelControlProps));
5203
- return /* @__PURE__ */ import_react61.default.createElement(LabelControl, __spreadValues({
5204
- id: `${id.current}-label`,
5205
- htmlFor: id.current,
5206
- messageId: errorMessageId,
5207
- length: value !== void 0 ? (0, import_toString.default)(value).length : void 0
5208
- }, labelControlProps), /* @__PURE__ */ import_react61.default.createElement(InputBase, __spreadProps(__spreadValues(__spreadValues({
5209
- ref
5210
- }, baseProps), errorProps), {
5211
- id: id.current,
5212
- "data-testid": dataTestId,
5213
- onChange: (e) => {
5214
- var _a3;
5215
- setValue(e.currentTarget.value);
5216
- (_a3 = props.onChange) == null ? void 0 : _a3.call(props, e);
5217
- },
5218
- disabled: props.disabled,
5219
- maxLength: props.maxLength,
5220
- required: props.required,
5221
- valid: props.valid,
5222
- readOnly
5223
- })));
5224
- });
5225
- Input2.displayName = "Input";
5226
- Input2.Skeleton = () => /* @__PURE__ */ import_react61.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react61.default.createElement(InputBase.Skeleton, null));
5227
- Input2.Skeleton.displayName = "Input.Skeleton";
5228
-
5229
- // src/components/DropdownMenu/utils.ts
5230
- var import_list = require("@react-stately/list");
5231
- var filterCollection = (collection, inputValue, filter) => {
5232
- return new import_list.ListCollection(filterNodes(collection, inputValue, filter));
5233
- };
5234
- var filterNodes = (nodes, inputValue, filter) => {
5235
- const filteredNode = [];
5236
- for (const node of nodes) {
5237
- if (node.type === "section" && node.hasChildNodes) {
5238
- const filtered = filterNodes(node.childNodes, inputValue, filter);
5239
- if ([...filtered].length > 0) {
5240
- filteredNode.push(__spreadProps(__spreadValues({}, node), { childNodes: filtered }));
5241
- }
5242
- } else if (node.type !== "section" && filter(node.textValue, inputValue)) {
5243
- filteredNode.push(__spreadValues({}, node));
5244
- }
5245
- }
5246
- return filteredNode;
5247
- };
5248
-
5249
- // src/components/DropdownMenu/DropdownMenu.tsx
5250
- var DropdownMenu3 = (_a) => {
5251
- var _b = _a, {
5252
- onAction,
5253
- selectionMode,
5254
- selection,
5255
- onSelectionChange,
5256
- placement = "bottom-left",
5257
- minWidth,
5258
- maxWidth,
5259
- searchable = false,
5260
- emptyState,
5261
- header,
5262
- footer,
5263
- children
5264
- } = _b, props = __objRest(_b, [
5265
- "onAction",
5266
- "selectionMode",
5267
- "selection",
5268
- "onSelectionChange",
5269
- "placement",
5270
- "minWidth",
5271
- "maxWidth",
5272
- "searchable",
5273
- "emptyState",
5274
- "header",
5275
- "footer",
5276
- "children"
5277
- ]);
5278
- const triggerRef = import_react62.default.useRef(null);
5279
- const overlayRef = import_react62.default.useRef(null);
5280
- const [trigger, items] = extractTriggerAndItems(children);
5281
- const state = (0, import_menu.useMenuTriggerState)(props);
5282
- const { menuTriggerProps, menuProps } = (0, import_menu2.useMenuTrigger)({}, state, triggerRef);
5283
- const { overlayProps } = (0, import_overlays10.useOverlayPosition)({
5284
- targetRef: triggerRef,
5285
- overlayRef,
5286
- placement: placement.replace("-", " "),
5287
- shouldFlip: true,
5288
- isOpen: state.isOpen
5289
- });
5290
- return /* @__PURE__ */ import_react62.default.createElement("div", null, /* @__PURE__ */ import_react62.default.createElement(import_interactions2.PressResponder, __spreadValues({
5291
- ref: triggerRef,
5292
- onPress: () => state.toggle()
5293
- }, menuTriggerProps), /* @__PURE__ */ import_react62.default.createElement(TriggerWrapper, null, trigger.props.children)), /* @__PURE__ */ import_react62.default.createElement(PopoverWrapper, __spreadValues({
5294
- ref: overlayRef,
5295
- isDismissable: true,
5296
- autoFocus: true,
5297
- containFocus: true,
5298
- isOpen: state.isOpen,
5299
- onClose: state.close
5300
- }, overlayProps), /* @__PURE__ */ import_react62.default.createElement(MenuWrapper, __spreadValues({
5301
- onAction,
5302
- selectionMode,
5303
- selection,
5304
- onSelectionChange,
5305
- searchable,
5306
- emptyState,
5307
- minWidth,
5308
- maxWidth,
5309
- header,
5310
- footer
5311
- }, menuProps), items.props.children)));
5312
- };
5313
- var MenuTrigger = () => null;
5314
- var MenuItems = () => null;
5315
- DropdownMenu3.Trigger = MenuTrigger;
5316
- DropdownMenu3.Items = MenuItems;
5317
- DropdownMenu3.Item = import_collections.Item;
5318
- DropdownMenu3.Section = import_collections.Section;
5319
- var TriggerWrapper = (_a) => {
5320
- var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
5321
- const ref = import_react62.default.useRef(null);
5322
- const { pressProps } = (0, import_interactions2.usePress)(__spreadProps(__spreadValues({}, props), { ref }));
5323
- const trigger = import_react62.default.Children.only(children);
5324
- if (!trigger || !import_react62.default.isValidElement(trigger)) {
5325
- throw new Error("<DropdownMenu.Trigger> must have valid child");
5326
- }
5327
- return import_react62.default.cloneElement(trigger, __spreadValues({ ref }, (0, import_utils7.mergeProps)(pressProps, props)));
5328
- };
5329
- var isSectionNode = (item) => item.type === "section";
5330
- var isItemNode = (item) => item.type === "item";
5331
- var MenuWrapper = (_a) => {
5332
- var _b = _a, {
5333
- selection: selectedKeys,
5334
- minWidth,
5335
- maxWidth,
5336
- searchable,
5337
- emptyState,
5338
- header,
5339
- footer
5340
- } = _b, props = __objRest(_b, [
5341
- "selection",
5342
- "minWidth",
5343
- "maxWidth",
5344
- "searchable",
5345
- "emptyState",
5346
- "header",
5347
- "footer"
5348
- ]);
5349
- const ref = import_react62.default.useRef(null);
5350
- const disabledKeys = getDisabledItemKeys(props.children);
5351
- const state = (0, import_tree.useTreeState)(__spreadValues({
5352
- disabledKeys,
5353
- selectedKeys
5354
- }, props));
5355
- const { menuProps } = (0, import_menu2.useMenu)(props, state, ref);
5356
- const { contains } = (0, import_i18n.useFilter)({ sensitivity: "base" });
5357
- const [search, setSearch] = import_react62.default.useState("");
5358
- const filteredCollection = import_react62.default.useMemo(
5359
- () => searchable ? filterCollection(state.collection, search, contains) : state.collection,
5360
- [state.collection, search, contains]
5361
- );
5362
- return /* @__PURE__ */ import_react62.default.createElement(DropdownMenu, {
5363
- minWidth: minWidth !== void 0 ? `${minWidth}px` : void 0,
5364
- maxWidth: maxWidth !== void 0 ? `${maxWidth}px` : void 0
5365
- }, header, /* @__PURE__ */ import_react62.default.createElement(DropdownMenu.ContentContainer, null, searchable && /* @__PURE__ */ import_react62.default.createElement(SearchInput, {
5366
- "aria-label": "search",
5367
- value: search,
5368
- onChange: (e) => setSearch(e.target.value),
5369
- className: tw("mb-5")
5370
- }), filteredCollection.size === 0 && emptyState && /* @__PURE__ */ import_react62.default.createElement(DropdownMenu.EmptyStateContainer, null, emptyState), /* @__PURE__ */ import_react62.default.createElement(DropdownMenu.List, __spreadValues({
5371
- ref
5372
- }, menuProps), Array.from(filteredCollection).map((item) => {
5373
- if (isSectionNode(item)) {
5374
- return /* @__PURE__ */ import_react62.default.createElement(SectionWrapper, {
5375
- key: item.key,
5376
- section: item,
5377
- state
5378
- });
5379
- } else if (isItemNode(item)) {
5380
- return /* @__PURE__ */ import_react62.default.createElement(ItemWrapper, {
5381
- key: item.key,
5382
- item,
5383
- state
5384
- });
5385
- }
5386
- }))), footer);
5387
- };
5388
- var ItemWrapper = ({ item, state }) => {
5389
- const ref = import_react62.default.useRef(null);
5390
- const { menuItemProps, descriptionProps, isSelected, isFocused, isDisabled } = (0, import_menu2.useMenuItem)(
5391
- { key: item.key },
5392
- state,
5393
- ref
5394
- );
5395
- const { icon, description, kind = "default" } = item.props;
5396
- return /* @__PURE__ */ import_react62.default.createElement(DropdownMenu.Item, __spreadProps(__spreadValues({
5397
- ref
5398
- }, menuItemProps), {
5399
- kind,
5400
- selected: isSelected,
5401
- highlighted: isFocused,
5402
- disabled: isDisabled,
5403
- icon
5404
- }), item.rendered, description && /* @__PURE__ */ import_react62.default.createElement(DropdownMenu.Description, __spreadValues({
5405
- disabled: isDisabled
5406
- }, descriptionProps), description));
5407
- };
5408
- var SectionWrapper = ({ section, state }) => {
5409
- const { itemProps, headingProps, groupProps } = (0, import_menu2.useMenuSection)({
5410
- "heading": section.rendered,
5411
- "aria-label": section["aria-label"]
5412
- });
5413
- const { separatorProps } = (0, import_separator.useSeparator)({
5414
- elementType: "li"
5415
- });
5416
- return /* @__PURE__ */ import_react62.default.createElement(import_react62.default.Fragment, null, section.key !== state.collection.getFirstKey() && /* @__PURE__ */ import_react62.default.createElement(DropdownMenu.Separator, __spreadValues({}, separatorProps)), /* @__PURE__ */ import_react62.default.createElement(DropdownMenu.Group, __spreadValues({
5417
- title: section.rendered,
5418
- titleProps: headingProps
5419
- }, itemProps), /* @__PURE__ */ import_react62.default.createElement("ul", __spreadValues({}, groupProps), Array.from(section.childNodes).map((node) => /* @__PURE__ */ import_react62.default.createElement(ItemWrapper, {
5420
- key: node.key,
5421
- item: node,
5422
- state
5423
- })))));
5424
- };
5425
- var extractTriggerAndItems = (children) => {
5426
- const [trigger, items] = import_react62.default.Children.toArray(children);
5427
- if (!isComponentType(trigger, MenuTrigger) || !isComponentType(items, MenuItems)) {
5428
- throw new Error("<DropdownMenu> must have <DropdownMenu.Trigger> and <DropdownMenu.Items> defined");
5429
- }
5430
- return [trigger, items];
5431
- };
5432
- var getDisabledItemKeys = (children) => {
5433
- const keys = import_react62.default.Children.map(children, (child) => {
5434
- var _a, _b;
5435
- if (!child || typeof child === "function") {
5436
- return null;
5437
- }
5438
- if (isComponentType(child, import_collections.Item) && child.props.disabled) {
5439
- return (_b = (_a = child.key) == null ? void 0 : _a.toString()) != null ? _b : null;
5440
- }
5441
- if (isComponentType(child, import_collections.Section)) {
5442
- return getDisabledItemKeys(child.props.children);
5443
- }
5444
- return null;
5445
- });
5446
- return keys.flat().filter((key) => key !== null);
5447
- };
5448
-
5449
- // src/components/EmptyState/EmptyState.tsx
5450
- var import_react64 = __toESM(require("react"));
5451
-
5452
- // src/components/Flexbox/FlexboxItem.tsx
5453
- var import_react63 = __toESM(require("react"));
5454
- var FlexboxItem = Tailwindify(
5455
- ({ htmlTag = "div", className, style, children, display, flex, grow, shrink, order, alignSelf }) => {
5456
- const hookStyle = useStyle({
5457
- display,
5458
- flex,
5459
- flexGrow: grow,
5460
- flexShrink: shrink,
5461
- order,
5462
- alignSelf
5463
- });
5464
- const HtmlElement = htmlTag;
5465
- return /* @__PURE__ */ import_react63.default.createElement(HtmlElement, {
5466
- style: __spreadValues(__spreadValues({}, hookStyle), style),
5467
- className
5468
- }, children);
5469
- }
5470
- );
5471
-
5472
- // src/components/EmptyState/EmptyState.tsx
5473
- var import_omit8 = __toESM(require("lodash/omit"));
5474
-
5475
- // src/components/Grid/GridItem.tsx
5476
- var import_react65 = __toESM(require("react"));
5477
- var GridItem = Tailwindify(
5478
- ({
5479
- htmlTag = "div",
5480
- className,
5481
- style,
5482
- children,
5483
- display,
5484
- justifySelf,
5485
- alignSelf,
5486
- placeSelf,
5487
- colSpan,
5488
- colStart,
5489
- colEnd,
5490
- rowSpan,
5491
- rowStart,
5492
- rowEnd
5493
- }) => {
5494
- const hookStyle = useStyle({
5495
- display,
5496
- justifySelf,
5497
- alignSelf,
5498
- placeSelf,
5499
- gridColumn: colSpan,
5500
- gridColumnStart: colStart,
5501
- gridColumnEnd: colEnd,
5502
- gridRow: rowSpan,
5503
- gridRowStart: rowStart,
5504
- gridRowEnd: rowEnd
5505
- });
5506
- const HtmlElement = htmlTag;
5507
- return /* @__PURE__ */ import_react65.default.createElement(HtmlElement, {
5508
- style: __spreadValues(__spreadValues({}, hookStyle), style),
5509
- className
5510
- }, children);
5511
- }
5512
- );
5513
-
5514
- // src/components/List/List.tsx
5515
- var import_react66 = __toESM(require("react"));
5516
-
5517
- // src/components/ListItem/ListItem.tsx
5518
- var import_react67 = __toESM(require("react"));
5519
-
5520
- // src/components/Modal/Modal.tsx
5521
- var import_react69 = __toESM(require("react"));
5522
- var import_castArray = __toESM(require("lodash/castArray"));
5523
- var import_omit9 = __toESM(require("lodash/omit"));
5524
- var import_overlays11 = require("@react-aria/overlays");
5525
- var import_dialog2 = require("@react-aria/dialog");
5526
- var import_focus3 = require("@react-aria/focus");
5527
- var import_utils10 = require("@react-aria/utils");
5528
- var import_overlays12 = require("@react-stately/overlays");
5529
-
5530
- // src/components/Tabs/Tabs.tsx
5531
- var import_react68 = __toESM(require("react"));
5532
- var import_kebabCase = __toESM(require("lodash/kebabCase"));
5533
- var import_isNumber4 = __toESM(require("lodash/isNumber"));
5534
- var import_warningSign3 = __toESM(require_warningSign());
5535
- var import_chevronLeft2 = __toESM(require_chevronLeft());
5536
- var import_chevronRight2 = __toESM(require_chevronRight());
5537
- var isTabComponent = (c) => {
5538
- return import_react68.default.isValidElement(c) && (c.type === Tab || c.type === ModalTab);
5539
- };
5540
- var Tab = import_react68.default.forwardRef(
5541
- ({ className, id, title, children }, ref) => {
5542
- return /* @__PURE__ */ import_react68.default.createElement("div", {
5543
- ref,
5544
- id: `${id != null ? id : (0, import_kebabCase.default)(title)}-panel`,
5545
- className,
5546
- role: "tabpanel",
5547
- tabIndex: 0,
5548
- "aria-labelledby": `${id != null ? id : (0, import_kebabCase.default)(title)}-tab`
5549
- }, children);
5550
- }
5551
- );
5552
- var TabContainer = (_a) => {
5553
- var _b = _a, { className, children } = _b, rest = __objRest(_b, ["className", "children"]);
5554
- return /* @__PURE__ */ import_react68.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
5555
- className: classNames("py-6 z-0", className)
5556
- }), children);
5557
- };
5558
- var ModalTab = Tab;
5559
- var ModalTabContainer = TabContainer;
5560
- var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
5561
- const Tab2 = import_react68.default.forwardRef(
5562
- (_a, ref) => {
5563
- var _b = _a, {
5564
- id,
5565
- value,
5566
- status = "default",
5567
- disabled,
5568
- badge,
5569
- tooltip,
5570
- title,
5571
- index,
5572
- selected,
5573
- onSelected,
5574
- className
5575
- } = _b, rest = __objRest(_b, [
5576
- "id",
5577
- "value",
5578
- "status",
5579
- "disabled",
5580
- "badge",
5581
- "tooltip",
5582
- "title",
5583
- "index",
5584
- "selected",
5585
- "onSelected",
5586
- "className"
5587
- ]);
5588
- const _id = id != null ? id : (0, import_kebabCase.default)(title);
5589
- let statusIcon = void 0;
5590
- if (status === "warning") {
5591
- statusIcon = /* @__PURE__ */ import_react68.default.createElement(InlineIcon, {
5592
- icon: import_warningSign3.default,
5593
- color: "warning-80"
5594
- });
5595
- } else if (status === "error") {
5596
- statusIcon = /* @__PURE__ */ import_react68.default.createElement(InlineIcon, {
5597
- icon: import_warningSign3.default,
5598
- color: "error-50"
5599
- });
5600
- }
5601
- const tab = /* @__PURE__ */ import_react68.default.createElement(Component, __spreadValues({
5602
- ref,
5603
- id: `${_id}-tab`,
5604
- onClick: () => !disabled && onSelected(value != null ? value : index),
5605
- className: classNames(className, "px-5 py-3 z-10 no-underline appearance-none outline-none h-full", {
5606
- "cursor-default": disabled,
5607
- "text-grey-80 focus:text-primary-80": !selected,
5608
- "hover:bg-grey-0 hover:border-grey-20": !selected && !disabled,
5609
- "border-b-2": !defaultUnderlineHidden || selected,
5610
- "border-grey-10": !selected,
5611
- "border-primary-80": selected
5612
- }),
5613
- type: "button",
5614
- role: "tab",
5615
- "aria-selected": selected,
5616
- "aria-controls": `${_id}-panel`,
5617
- tabIndex: disabled ? void 0 : 0
5618
- }, rest), /* @__PURE__ */ import_react68.default.createElement(Typography2, {
5619
- htmlTag: "div",
5620
- variant: "body-small",
5621
- color: selected ? "primary-80" : disabled ? "grey-20" : "current",
5622
- className: tw("inline-flex items-center gap-3")
5623
- }, /* @__PURE__ */ import_react68.default.createElement("span", {
5624
- className: tw("whitespace-nowrap")
5625
- }, title), (0, import_isNumber4.default)(badge) && /* @__PURE__ */ import_react68.default.createElement(Typography2, {
5626
- htmlTag: "span",
5627
- variant: "body-small",
5628
- color: selected ? "primary-80" : "grey-5",
5629
- className: "leading-none"
5630
- }, /* @__PURE__ */ import_react68.default.createElement(TabBadge, {
5631
- kind: "filled",
5632
- value: badge,
5633
- textClassname: classNames({ "text-white": selected, "text-grey-50": !selected })
5634
- })), statusIcon));
5635
- return tooltip ? /* @__PURE__ */ import_react68.default.createElement(Tooltip, {
5636
- content: tooltip
5637
- }, tab) : tab;
5638
- }
5639
- );
5640
- Tab2.displayName = displayName;
5641
- return Tab2;
5642
- };
5643
- var TabItem = asTabItem("button", "TabItem");
5644
- var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderChildren) => {
5645
- const Tabs2 = (props) => {
5646
- var _a, _b;
5647
- const { className, value, defaultValue, onChange, children } = props;
5648
- const childArr = import_react68.default.Children.toArray(children);
5649
- const firstTab = childArr[0];
5650
- const firstTabValue = isTabComponent(firstTab) ? firstTab.props.value : -1;
5651
- const [selected, setSelected] = (0, import_react68.useState)((_b = (_a = value != null ? value : defaultValue) != null ? _a : firstTabValue) != null ? _b : 0);
5652
- const [leftCaret, showLeftCaret] = (0, import_react68.useState)(false);
5653
- const [rightCaret, showRightCaret] = (0, import_react68.useState)(false);
5654
- const parentRef = (0, import_react68.useRef)(null);
5655
- const containerRef = (0, import_react68.useRef)(null);
5656
- const tabsRef = (0, import_react68.useRef)(null);
5657
- (0, import_react68.useEffect)(() => {
5658
- if (value !== void 0) {
5659
- setSelected(value);
5660
- }
5661
- }, [value]);
5662
- (0, import_react68.useLayoutEffect)(() => {
5663
- var _a2;
5664
- const updateCarets = () => {
5665
- const pEl = parentRef.current;
5666
- const el = containerRef.current;
5667
- if (!pEl || !el) {
5668
- return;
5669
- }
5670
- const { width } = pEl.getBoundingClientRect();
5671
- showLeftCaret(el.scrollWidth > width && el.scrollLeft !== 0);
5672
- showRightCaret(
5673
- el.scrollWidth > width && Math.round(el.scrollLeft + el.getBoundingClientRect().width) !== Math.round(el.scrollWidth)
5674
- );
5675
- };
5676
- updateCarets();
5677
- (_a2 = containerRef.current) == null ? void 0 : _a2.addEventListener("scroll", updateCarets);
5678
- window.addEventListener("resize", updateCarets);
5679
- return () => {
5680
- var _a3;
5681
- (_a3 = containerRef.current) == null ? void 0 : _a3.removeEventListener("scroll", updateCarets);
5682
- window.removeEventListener("resize", updateCarets);
5683
- };
5684
- }, [parentRef.current, containerRef.current]);
5685
- const handleScrollToNext = (direction) => {
5686
- const container = containerRef.current;
5687
- const tabs = tabsRef.current;
5688
- if (!container || !tabs) {
5689
- return;
5690
- }
5691
- const { width: containerWidth, x: containerX } = container.getBoundingClientRect();
5692
- const children2 = Array.from(tabs.childNodes).filter(
5693
- (c) => c instanceof HTMLElement
5694
- );
5695
- if (direction === "right") {
5696
- const next = children2.find((c) => {
5697
- const { x, width } = c.getBoundingClientRect();
5698
- return Math.round(x + width - containerX - containerWidth) > 0;
5699
- });
5700
- if (next instanceof HTMLElement) {
5701
- const { x, width } = next.getBoundingClientRect();
5702
- container.scrollTo({
5703
- left: container.scrollLeft + Math.ceil(x + width - containerX - containerWidth),
5704
- behavior: "smooth"
5705
- });
5706
- }
5707
- } else {
5708
- const next = children2.find((c) => {
5709
- const { x, width } = c.getBoundingClientRect();
5710
- return Math.round(x + width - containerX) >= 0;
5711
- });
5712
- if (next instanceof HTMLElement) {
5713
- const { x } = next.getBoundingClientRect();
5714
- container.scrollTo({ left: container.scrollLeft - Math.abs(x - containerX), behavior: "smooth" });
5715
- }
5716
- }
5717
- };
5718
- const handleKeyDown = (event) => {
5719
- const target = event.target;
5720
- const parent = target.parentElement;
5721
- const first = parent.firstChild;
5722
- const last = parent.lastChild;
5723
- const next = target.nextElementSibling;
5724
- const prev = target.previousElementSibling;
5725
- if (event.key === "ArrowRight") {
5726
- (next != null ? next : first).focus();
5727
- } else if (event.key === "ArrowLeft") {
5728
- (prev != null ? prev : last).focus();
5729
- }
5730
- };
5731
- const handleSelected = (key) => {
5732
- (onChange != null ? onChange : setSelected)(key);
5733
- };
5734
- import_react68.default.Children.forEach(children, (c) => {
5735
- if (c && !isTabComponent(c)) {
5736
- throw new Error("<Tabs> can only have <Tabs.Tab> components as children");
5737
- }
5738
- });
5739
- return /* @__PURE__ */ import_react68.default.createElement("div", {
5740
- ref: parentRef,
5741
- className: classNames(tw("h-full"), className)
5742
- }, /* @__PURE__ */ import_react68.default.createElement("div", {
5743
- className: tw("relative flex items-center h-full border-b-2 border-grey-10")
5744
- }, /* @__PURE__ */ import_react68.default.createElement("div", {
5745
- ref: containerRef,
5746
- className: tw("overflow-y-auto scrollbar-hide h-full mb-[-2px]")
5747
- }, /* @__PURE__ */ import_react68.default.createElement("div", {
5748
- ref: tabsRef,
5749
- role: "tablist",
5750
- "aria-label": "tabs",
5751
- className: tw("inline-flex items-center cursor-pointer font-normal h-full")
5752
- }, import_react68.default.Children.map(
5753
- children,
5754
- (tab, index) => tab ? /* @__PURE__ */ import_react68.default.createElement(TabItemComponent, __spreadProps(__spreadValues({
5755
- key: tab.props.value
5756
- }, tab.props), {
5757
- index,
5758
- selected: tab.props.value !== void 0 ? tab.props.value === selected : index === selected,
5759
- onKeyDown: handleKeyDown,
5760
- onSelected: handleSelected
5761
- })) : void 0
5762
- ))), leftCaret && /* @__PURE__ */ import_react68.default.createElement("div", {
5763
- className: tw("absolute left-0 bg-gradient-to-r from-white via-white z-20 py-3 pr-4")
5764
- }, /* @__PURE__ */ import_react68.default.createElement("div", {
5765
- onClick: () => handleScrollToNext("left"),
5766
- className: tw("hover:bg-grey-0 p-2 leading-none cursor-pointer")
5767
- }, /* @__PURE__ */ import_react68.default.createElement(InlineIcon, {
5768
- icon: import_chevronLeft2.default
5769
- }))), rightCaret && /* @__PURE__ */ import_react68.default.createElement("div", {
5770
- onClick: () => handleScrollToNext("right"),
5771
- className: tw("absolute right-0 bg-gradient-to-l from-white via-white z-20 py-3 pl-4")
5772
- }, /* @__PURE__ */ import_react68.default.createElement("div", {
5773
- onClick: () => handleScrollToNext("right"),
5774
- className: tw("hover:bg-grey-0 p-2 leading-none cursor-pointer")
5775
- }, /* @__PURE__ */ import_react68.default.createElement(InlineIcon, {
5776
- icon: import_chevronRight2.default
5777
- })))), renderChildren(children, selected, props));
5778
- };
5779
- Tabs2.displayName = displayName;
5780
- Tabs2.Tab = TabComponent;
5781
- return Tabs2;
5782
- };
5783
- var Tabs = createTabsComponent(Tab, TabItem, "Tabs", (children, selected) => /* @__PURE__ */ import_react68.default.createElement(TabContainer, null, children.find(
5784
- (node, index) => (node == null ? void 0 : node.props.value) === selected || index === selected
5785
- )));
5786
-
5787
- // src/components/Modal/Modal.tsx
5788
- var import_cross5 = __toESM(require_cross());
5789
- var ModalTabs = createTabsComponent(
5790
- ModalTab,
5791
- TabItem,
5792
- "ModalTabs",
5793
- (children, selected, props) => /* @__PURE__ */ import_react69.default.createElement(Modal.Body, {
5794
- maxHeight: props.maxHeight
5795
- }, /* @__PURE__ */ import_react69.default.createElement(ModalTabContainer, null, children.find(
5796
- (node, index) => (node == null ? void 0 : node.props.value) === selected || index === selected
5797
- )))
5798
- );
5799
-
5800
- // src/components/MultiInput/MultiInput.tsx
5801
- var import_castArray2 = __toESM(require("lodash/castArray"));
5802
- var import_identity = __toESM(require("lodash/identity"));
5803
- var import_uniqueId4 = __toESM(require("lodash/uniqueId"));
5804
- var import_omit10 = __toESM(require("lodash/omit"));
5805
- var import_react71 = __toESM(require("react"));
5806
-
5807
- // src/components/MultiInput/InputChip.tsx
5808
- var import_smallCross = __toESM(require_smallCross());
5809
- var import_react70 = __toESM(require("react"));
5810
- var InputChip = import_react70.default.forwardRef(
5811
- (_a, ref) => {
5812
- var _b = _a, { invalid = false, disabled, readOnly, className, onClick: _onClick, children } = _b, props = __objRest(_b, ["invalid", "disabled", "readOnly", "className", "onClick", "children"]);
5813
- const onClick = (e) => {
5814
- if (!disabled && !readOnly) {
5815
- _onClick == null ? void 0 : _onClick(e);
5816
- }
5817
- };
5818
- return /* @__PURE__ */ import_react70.default.createElement("div", __spreadValues({
5819
- ref,
5820
- role: "button",
5821
- className: classNames(className, "inline-flex align-middle mx-1 px-2 py-1 items-center rounded-sm break-all", {
5822
- "bg-error-0 ": invalid,
5823
- "bg-grey-0": !invalid && !disabled,
5824
- "cursor-default": readOnly,
5825
- "bg-grey-5 pointer-events-none": disabled
5826
- }),
5827
- onClick
5828
- }, props), /* @__PURE__ */ import_react70.default.createElement(Typography2, {
5829
- variant: "body-small",
5830
- color: invalid ? "error-80" : disabled ? "grey-40" : "grey-70"
5831
- }, children), !readOnly && /* @__PURE__ */ import_react70.default.createElement("div", null, /* @__PURE__ */ import_react70.default.createElement(Icon, {
5832
- icon: import_smallCross.default,
5833
- className: tw("ml-2", {
5834
- "text-error-70": invalid,
5835
- "text-grey-70": !invalid
5836
- })
5837
- })));
5838
- }
5839
- );
5840
-
5841
- // src/components/MultiInput/MultiInput.tsx
5842
- var MultiInputBase = (_a) => {
5843
- var _b = _a, {
5844
- id,
5845
- name,
5846
- type,
5847
- placeholder,
5848
- autoFocus,
5849
- delimiter = "enter",
5850
- defaultValue,
5851
- value,
5852
- endAdornment,
5853
- max,
5854
- maxLength = max,
5855
- inline = true,
5856
- itemToString = (val) => String(val),
5857
- createItem = (val) => val,
5858
- onChange,
5859
- onInputChange,
5860
- isItemValid,
5861
- disabled = false,
5862
- readOnly = false,
5863
- valid = true
5864
- } = _b, props = __objRest(_b, [
5865
- "id",
5866
- "name",
5867
- "type",
5868
- "placeholder",
5869
- "autoFocus",
5870
- "delimiter",
5871
- "defaultValue",
5872
- "value",
5873
- "endAdornment",
5874
- "max",
5875
- "maxLength",
5876
- "inline",
5877
- "itemToString",
5878
- "createItem",
5879
- "onChange",
5880
- "onInputChange",
5881
- "isItemValid",
5882
- "disabled",
5883
- "readOnly",
5884
- "valid"
5885
- ]);
5886
- var _a2;
5887
- const inputRef = (0, import_react71.useRef)(null);
5888
- const [items, setItems] = (0, import_react71.useState)((_a2 = value != null ? value : defaultValue) != null ? _a2 : []);
5889
- const [hasFocus, setFocus] = (0, import_react71.useState)(false);
5890
- const keyCodes = [delimiter !== "enter" ? " " : null, delimiter !== "space" ? "Enter" : null].filter(import_identity.default);
5891
- (0, import_react71.useEffect)(() => {
5892
- const requiresUpdate = value !== void 0 || defaultValue === void 0;
5893
- if (requiresUpdate && JSON.stringify(value) !== JSON.stringify(items)) {
5894
- setItems(value != null ? value : []);
5895
- }
5896
- }, [JSON.stringify(value)]);
5897
- const handleKeyDown = (e) => {
5898
- var _a3, _b2, _c;
5899
- switch (e.key) {
5900
- case "Enter":
5901
- case " ": {
5902
- if (keyCodes.includes(e.key) && inputRef.current) {
5903
- e.stopPropagation();
5904
- const value2 = inputRef.current.value.trim();
5905
- handleAddItem(value2);
5906
- }
5907
- break;
5908
- }
5909
- case "Backspace": {
5910
- const length = (_a3 = items == null ? void 0 : items.length) != null ? _a3 : 0;
5911
- if (inline && !((_c = (_b2 = inputRef.current) == null ? void 0 : _b2.value) == null ? void 0 : _c.length) && length > 0) {
5912
- handleRemoveItem(length - 1);
5913
- }
5914
- break;
5915
- }
5916
- default:
5917
- break;
5918
- }
5919
- };
5920
- const handleKeyUp = (e) => {
5921
- if (keyCodes.includes(e.key)) {
5922
- e.stopPropagation();
5923
- }
5924
- };
5925
- const handleAddItem = (value2) => {
5926
- if (inputRef.current) {
5927
- inputRef.current.value = "";
5928
- }
5929
- if (value2) {
5930
- const newItems = (0, import_castArray2.default)(value2).map(createItem).filter((item) => !items.includes(item));
5931
- if (newItems.length > 0 && items.length + newItems.length <= (maxLength != null ? maxLength : Number.MAX_SAFE_INTEGER)) {
5932
- const updated = (items != null ? items : []).concat(newItems);
5933
- setItems(updated);
5934
- onChange == null ? void 0 : onChange(updated);
5935
- }
5936
- }
5937
- };
5938
- const handleRemoveItem = (idx) => {
5939
- const updated = [...items != null ? items : []];
5940
- updated.splice(idx, 1);
5941
- setItems(updated);
5942
- onChange == null ? void 0 : onChange(updated);
5943
- };
5944
- const handlePaste = (e) => {
5945
- e.preventDefault();
5946
- const copiedText = e.clipboardData.getData("text/plain");
5947
- const spaceSeparated = copiedText.split(" ");
5948
- const newLineSeparated = copiedText.split("\n");
5949
- const commaSeparated = copiedText.split(",");
5950
- const separatedText = [spaceSeparated, newLineSeparated, commaSeparated].filter((items2) => items2.length > 1).shift() || [copiedText];
5951
- const itemsToAdd = separatedText.map((value2) => value2.trim()).filter(import_identity.default);
5952
- handleAddItem(itemsToAdd);
5953
- };
5954
- const handleFocus = () => {
5955
- setFocus(true);
5956
- };
5957
- const handleBlur = () => {
5958
- var _a3;
5959
- setFocus(false);
5960
- const value2 = (_a3 = inputRef.current) == null ? void 0 : _a3.value;
5961
- if (value2) {
5962
- handleAddItem(value2);
5963
- }
5964
- };
5965
- const renderChips = () => items == null ? void 0 : items.map((item, index) => {
5966
- var _a3;
5967
- return /* @__PURE__ */ import_react71.default.createElement(InputChip, {
5968
- key: `${itemToString(item)}.${index}`,
5969
- invalid: !((_a3 = isItemValid == null ? void 0 : isItemValid(item, index)) != null ? _a3 : true),
5970
- readOnly,
5971
- disabled,
5972
- onClick: (e) => {
5973
- e.stopPropagation();
5974
- handleRemoveItem(index);
5975
- }
5976
- }, itemToString(item));
5977
- });
5978
- return /* @__PURE__ */ import_react71.default.createElement("div", null, /* @__PURE__ */ import_react71.default.createElement(Select.InputContainer, {
5979
- variant: disabled ? "disabled" : valid === false ? "error" : readOnly ? "readOnly" : hasFocus ? "focused" : "default"
5980
- }, /* @__PURE__ */ import_react71.default.createElement("div", {
5981
- className: "grow inline-flex flex-row flex-wrap gap-y-2"
5982
- }, inline && renderChips(), /* @__PURE__ */ import_react71.default.createElement(Select.Input, __spreadProps(__spreadValues({
5983
- ref: inputRef,
5984
- id: id != null ? id : name,
5985
- name,
5986
- type
5987
- }, props), {
5988
- onChange: onInputChange,
5989
- autoFocus,
5990
- disabled,
5991
- readOnly,
5992
- placeholder: !inline || (items == null ? void 0 : items.length) === 0 ? placeholder : "",
5993
- onKeyDown: handleKeyDown,
5994
- onKeyUp: handleKeyUp,
5995
- onPaste: handlePaste,
5996
- onFocus: handleFocus,
5997
- onBlur: handleBlur,
5998
- autoComplete: "off"
5999
- }))), endAdornment && /* @__PURE__ */ import_react71.default.createElement(InputAdornment, null, endAdornment)), !inline && /* @__PURE__ */ import_react71.default.createElement("div", {
6000
- className: tw("flex flex-row flex-wrap gap-y-2 mt-2")
6001
- }, renderChips()));
6002
- };
6003
- var BaseMultiInputSkeleton = () => /* @__PURE__ */ import_react71.default.createElement(Skeleton, {
6004
- height: 38
6005
- });
6006
- MultiInputBase.Skeleton = BaseMultiInputSkeleton;
6007
- var MultiInput = (props) => {
6008
- var _a, _b, _c, _d, _e;
6009
- const maxLength = (_a = props.maxLength) != null ? _a : props.max;
6010
- const [value, setValue] = (0, import_react71.useState)((_c = (_b = props.value) != null ? _b : props.defaultValue) != null ? _c : []);
6011
- (0, import_react71.useEffect)(() => {
6012
- var _a2;
6013
- setValue((_a2 = props.value) != null ? _a2 : []);
6014
- }, [JSON.stringify(props.value)]);
6015
- const id = (0, import_react71.useRef)((_e = (_d = props.id) != null ? _d : props.name) != null ? _e : `multiinput-${(0, import_uniqueId4.default)()}`);
6016
- const errorMessageId = (0, import_uniqueId4.default)();
6017
- const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
6018
- const labelControlProps = getLabelControlProps(props);
6019
- const baseProps = (0, import_omit10.default)(props, Object.keys(labelControlProps));
6020
- return /* @__PURE__ */ import_react71.default.createElement(LabelControl, __spreadProps(__spreadValues({
6021
- id: `${id.current}-label`,
6022
- htmlFor: `${id.current}-input`,
6023
- messageId: errorMessageId
6024
- }, labelControlProps), {
6025
- length: value.length,
6026
- maxLength
6027
- }), /* @__PURE__ */ import_react71.default.createElement(MultiInputBase, __spreadProps(__spreadValues(__spreadValues({}, baseProps), errorProps), {
6028
- id: `${id.current}-input`,
6029
- onChange: (value2) => {
6030
- var _a2;
6031
- setValue(value2 != null ? value2 : []);
6032
- (_a2 = props.onChange) == null ? void 0 : _a2.call(props, value2);
6033
- },
6034
- disabled: props.disabled,
6035
- maxLength: props.maxLength,
6036
- valid: props.valid
6037
- })));
6038
- };
6039
- var MultiInputSkeleton = () => /* @__PURE__ */ import_react71.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react71.default.createElement(MultiInputBase.Skeleton, null));
6040
- MultiInput.Skeleton = MultiInputSkeleton;
6041
- MultiInput.Skeleton.displayName = "MultiInput.Skeleton";
6042
-
6043
- // src/components/MultiSelect/MultiSelect.tsx
6044
- var import_downshift2 = require("downshift");
6045
- var import_isNil = __toESM(require("lodash/isNil"));
6046
- var import_omit11 = __toESM(require("lodash/omit"));
6047
- var import_omitBy = __toESM(require("lodash/omitBy"));
6048
- var import_uniqueId5 = __toESM(require("lodash/uniqueId"));
6049
- var import_match_sorter2 = require("match-sorter");
6050
- var import_react72 = __toESM(require("react"));
6051
- var import_overlays13 = require("@react-aria/overlays");
6052
- var MultiSelectBase = (_a) => {
6053
- var _b = _a, {
6054
- id,
6055
- name,
6056
- placeholder,
6057
- maxHeight,
6058
- closeOnSelect = true,
6059
- hideChips = false,
6060
- inline = true,
6061
- options,
6062
- optionKeys = ["label", "value"],
6063
- noResults,
6064
- optionToString: itemToString = getOptionLabelBuiltin,
6065
- renderOption = (opt) => itemToString(opt),
6066
- isOptionDisabled = isOptionDisabledBuiltin,
6067
- createOption,
6068
- defaultValue,
6069
- value,
6070
- onChange,
6071
- valid = true,
6072
- disabled = false,
6073
- readOnly = false,
6074
- children
6075
- } = _b, props = __objRest(_b, [
6076
- "id",
6077
- "name",
6078
- "placeholder",
6079
- "maxHeight",
6080
- "closeOnSelect",
6081
- "hideChips",
6082
- "inline",
6083
- "options",
6084
- "optionKeys",
6085
- "noResults",
6086
- "optionToString",
6087
- "renderOption",
6088
- "isOptionDisabled",
6089
- "createOption",
6090
- "defaultValue",
6091
- "value",
6092
- "onChange",
6093
- "valid",
6094
- "disabled",
6095
- "readOnly",
6096
- "children"
6097
- ]);
6098
- var _a2;
6099
- const targetRef = (0, import_react72.useRef)(null);
6100
- const overlayRef = (0, import_react72.useRef)(null);
6101
- const [inputValue, setInputValue] = (0, import_react72.useState)("");
6102
- const [hasFocus, setFocus] = (0, import_react72.useState)(false);
6103
- const { selectedItems, addSelectedItem, removeSelectedItem, getDropdownProps, getSelectedItemProps } = (0, import_downshift2.useMultipleSelection)(
6104
- (0, import_omitBy.default)(
6105
- {
6106
- selectedItems: value,
6107
- defaultSelectedItems: defaultValue,
6108
- onSelectedItemsChange: (e) => onChange == null ? void 0 : onChange(e.selectedItems)
6109
- },
6110
- import_isNil.default
6111
- )
6112
- );
6113
- const keys = typeof options[0] === "string" ? void 0 : optionKeys;
6114
- const selectedItemsAsStrings = selectedItems.map(itemToString);
6115
- const filteredOptions = (inputValue ? (0, import_match_sorter2.matchSorter)(options, inputValue, { keys }) : options).filter(
6116
- (opt) => !selectedItemsAsStrings.includes(itemToString(opt))
6117
- );
6118
- const { isOpen, closeMenu, highlightedIndex, getInputProps, getMenuProps, getToggleButtonProps, getItemProps } = (0, import_downshift2.useCombobox)({
6119
- id,
6120
- inputValue,
6121
- defaultHighlightedIndex: 0,
6122
- selectedItem: null,
6123
- items: filteredOptions,
6124
- stateReducer: (_, actionChanges) => {
6125
- const { changes, type } = actionChanges;
6126
- switch (type) {
6127
- case import_downshift2.useCombobox.stateChangeTypes.InputKeyDownEnter:
6128
- case import_downshift2.useCombobox.stateChangeTypes.ItemClick: {
6129
- return __spreadProps(__spreadValues({}, changes), {
6130
- isOpen: !closeOnSelect
6131
- });
6132
- }
6133
- }
6134
- return changes;
6135
- },
6136
- onStateChange: ({ inputValue: inputValue2, selectedItem, type }) => {
6137
- switch (type) {
6138
- case import_downshift2.useCombobox.stateChangeTypes.InputChange: {
6139
- setInputValue(inputValue2 != null ? inputValue2 : "");
6140
- break;
6141
- }
6142
- case import_downshift2.useCombobox.stateChangeTypes.InputKeyDownEnter:
6143
- case import_downshift2.useCombobox.stateChangeTypes.ItemClick:
6144
- case import_downshift2.useCombobox.stateChangeTypes.InputBlur: {
6145
- if (selectedItem && !isOptionDisabled(selectedItem, options.indexOf(selectedItem))) {
6146
- setInputValue("");
6147
- addSelectedItem(selectedItem);
6148
- }
6149
- break;
6150
- }
6151
- }
6152
- }
6153
- });
6154
- const { overlayProps } = (0, import_overlays13.useOverlayPosition)({
6155
- targetRef,
6156
- overlayRef,
6157
- placement: "bottom start",
6158
- shouldFlip: true,
6159
- isOpen
6160
- });
6161
- const inputProps = getInputProps(getDropdownProps({ preventKeyAction: isOpen, disabled: disabled || readOnly }));
6162
- const renderChips = () => {
6163
- return selectedItems.map((selectedItem, index) => /* @__PURE__ */ import_react72.default.createElement(InputChip, __spreadProps(__spreadValues({
6164
- key: `${itemToString(selectedItem)}.chip`,
6165
- className: tw("mx-0"),
6166
- disabled,
6167
- readOnly
6168
- }, getSelectedItemProps({ selectedItem, index })), {
6169
- onClick: (e) => {
6170
- e.stopPropagation();
6171
- removeSelectedItem(selectedItem);
6172
- }
6173
- }), itemToString(selectedItem)));
6174
- };
6175
- const hasNoResults = options.length === 0 || filteredOptions.length === 0;
6176
- const width = (_a2 = targetRef.current) == null ? void 0 : _a2.offsetWidth;
6177
- const style = isOpen ? __spreadProps(__spreadValues({}, overlayProps.style), { width }) : { display: "none" };
6178
- return /* @__PURE__ */ import_react72.default.createElement("div", {
6179
- className: tw("relative")
6180
- }, /* @__PURE__ */ import_react72.default.createElement(Select.InputContainer, {
6181
- ref: targetRef,
6182
- variant: disabled ? "disabled" : !valid ? "error" : readOnly ? "readOnly" : hasFocus ? "focused" : "default"
6183
- }, /* @__PURE__ */ import_react72.default.createElement("div", {
6184
- className: "grow inline-flex flex-row flex-wrap gap-2"
6185
- }, !hideChips && inline && renderChips(), /* @__PURE__ */ import_react72.default.createElement(Select.Input, __spreadProps(__spreadValues(__spreadValues({
6186
- id,
6187
- name,
6188
- placeholder: selectedItems.length === 0 && !readOnly ? placeholder : "",
6189
- value: inputValue != null ? inputValue : ""
6190
- }, inputProps), props), {
6191
- disabled,
6192
- readOnly,
6193
- onKeyDown: (e) => {
6194
- var _a3;
6195
- e.stopPropagation();
6196
- (_a3 = inputProps.onKeyDown) == null ? void 0 : _a3.call(inputProps, e);
6197
- },
6198
- onKeyUp: (e) => e.stopPropagation(),
6199
- onFocus: () => setFocus(true),
6200
- onBlur: () => setFocus(false)
6201
- }))), !readOnly && /* @__PURE__ */ import_react72.default.createElement(Select.Toggle, __spreadValues({
6202
- hasFocus,
6203
- isOpen
6204
- }, getToggleButtonProps({ disabled })))), !hideChips && !inline && /* @__PURE__ */ import_react72.default.createElement("div", {
6205
- className: tw("flex flex-row flex-wrap gap-2 mt-2")
6206
- }, renderChips()), /* @__PURE__ */ import_react72.default.createElement(PopoverWrapper, __spreadProps(__spreadValues({
6207
- isOpen: true,
6208
- isDismissable: true,
6209
- autoFocus: true
6210
- }, getMenuProps({ ref: overlayRef })), {
6211
- style,
6212
- onClose: closeMenu
6213
- }), /* @__PURE__ */ import_react72.default.createElement(Select.Menu, {
6214
- maxHeight
6215
- }, isOpen && hasNoResults && /* @__PURE__ */ import_react72.default.createElement(Select.NoResults, null, noResults), isOpen && filteredOptions.map((item, index) => /* @__PURE__ */ import_react72.default.createElement(Select.Item, __spreadValues({
6216
- key: itemToString(item),
6217
- highlighted: index === highlightedIndex,
6218
- selected: selectedItems.includes(item)
6219
- }, getItemProps({ item, index, disabled: isOptionDisabled(item, index) })), renderOption(item))))));
6220
- };
6221
- var MultiSelectBaseSkeleton = () => /* @__PURE__ */ import_react72.default.createElement(Skeleton, {
6222
- height: 38
6223
- });
6224
- MultiSelectBase.Skeleton = MultiSelectBaseSkeleton;
6225
- var MultiSelect = (_a) => {
6226
- var _b = _a, {
6227
- options,
6228
- noResults
6229
- } = _b, props = __objRest(_b, [
6230
- "options",
6231
- "noResults"
6232
- ]);
6233
- var _a2;
6234
- const id = (0, import_react72.useRef)((_a2 = props.id) != null ? _a2 : `multiselect-${(0, import_uniqueId5.default)()}`);
6235
- const errorMessageId = (0, import_uniqueId5.default)();
6236
- const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
6237
- const labelControlProps = getLabelControlProps(props);
6238
- const baseProps = (0, import_omit11.default)(props, Object.keys(labelControlProps));
6239
- return /* @__PURE__ */ import_react72.default.createElement(LabelControl, __spreadValues({
6240
- id: `${id.current}-label`,
6241
- htmlFor: `${id.current}-input`,
6242
- messageId: errorMessageId
6243
- }, labelControlProps), /* @__PURE__ */ import_react72.default.createElement(MultiSelectBase, __spreadProps(__spreadValues(__spreadValues({}, baseProps), errorProps), {
6244
- id: id.current,
6245
- options,
6246
- noResults,
6247
- disabled: props.disabled,
6248
- valid: props.valid
6249
- })));
6250
- };
6251
- var MultiSelectSkeleton = () => /* @__PURE__ */ import_react72.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react72.default.createElement(MultiSelectBase.Skeleton, null));
6252
- MultiSelect.Skeleton = MultiSelectSkeleton;
6253
- MultiSelect.Skeleton.displayName = "MultiSelect.Skeleton";
6254
-
6255
- // src/components/NativeSelect/NativeSelect.tsx
6256
- var import_react73 = __toESM(require("react"));
6257
- var import_uniqueId6 = __toESM(require("lodash/uniqueId"));
6258
- var import_omit12 = __toESM(require("lodash/omit"));
6259
- var import_caretDown = __toESM(require_caretDown());
6260
- var NativeSelectBase = import_react73.default.forwardRef(
6261
- (_a, ref) => {
6262
- var _b = _a, { children, disabled = false, required = false, valid = true, readOnly = false, emptyDefault } = _b, props = __objRest(_b, ["children", "disabled", "required", "valid", "readOnly", "emptyDefault"]);
6263
- return /* @__PURE__ */ import_react73.default.createElement("span", {
6264
- className: tw("relative block")
6265
- }, !readOnly && /* @__PURE__ */ import_react73.default.createElement("span", {
6266
- className: tw(
6267
- "absolute right-0 inset-y-0 mr-4 text-grey-40 flex ml-3 pointer-events-none typography-body-default-medium mt-4"
6268
- )
6269
- }, /* @__PURE__ */ import_react73.default.createElement(Icon, {
6270
- icon: import_caretDown.default,
6271
- "data-testid": "icon-dropdown"
6272
- })), /* @__PURE__ */ import_react73.default.createElement("select", __spreadProps(__spreadValues({
6273
- ref,
6274
- disabled: disabled || readOnly,
6275
- required
6276
- }, props), {
6277
- className: classNames(
6278
- tw(
6279
- "block w-full rounded-sm appearance-none disabled:cursor-not-allowed typography-body-small text-grey-70 placeholder:text-grey-40 focus:outline-none",
6280
- {
6281
- "px-3 py-3 disabled:border-grey-20 disabled:bg-grey-5 disabled:text-grey-40": !readOnly,
6282
- "px-0 py-3 border-none": readOnly,
6283
- "border border-error-50": !valid && !readOnly,
6284
- "border border-grey-20 hover:border-grey-50 focus:border-info-70": valid && !readOnly
6285
- }
6286
- ),
6287
- props.className
6288
- )
6289
- }), emptyDefault && /* @__PURE__ */ import_react73.default.createElement("option", {
6290
- value: "",
6291
- className: tw("hidden")
6292
- }), children));
6293
- }
6294
- );
6295
- NativeSelectBase.Skeleton = () => /* @__PURE__ */ import_react73.default.createElement(Skeleton, {
6296
- height: 38
6297
- });
6298
- var NativeSelect = import_react73.default.forwardRef(
6299
- (_a, ref) => {
6300
- var _b = _a, { readOnly } = _b, props = __objRest(_b, ["readOnly"]);
6301
- var _a2;
6302
- const id = (0, import_react73.useRef)((_a2 = props.id) != null ? _a2 : `nativeselect-${(0, import_uniqueId6.default)()}`);
6303
- const errorMessageId = (0, import_uniqueId6.default)();
6304
- const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
6305
- const _b2 = getLabelControlProps(props), { "data-testid": dataTestId } = _b2, labelControlProps = __objRest(_b2, ["data-testid"]);
6306
- const baseProps = (0, import_omit12.default)(props, Object.keys(labelControlProps));
6307
- return /* @__PURE__ */ import_react73.default.createElement(LabelControl, __spreadValues({
6308
- id: `${id.current}-label`,
6309
- htmlFor: id.current,
6310
- messageId: errorMessageId
6311
- }, labelControlProps), /* @__PURE__ */ import_react73.default.createElement(NativeSelectBase, __spreadProps(__spreadValues(__spreadValues({
6312
- ref
6313
- }, baseProps), errorProps), {
6314
- id: id.current,
6315
- "data-testid": dataTestId,
6316
- disabled: props.disabled,
6317
- required: props.required,
6318
- valid: props.valid,
6319
- readOnly
6320
- })));
6321
- }
6322
- );
6323
- var Option = import_react73.default.forwardRef((_a, ref) => {
6324
- var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
6325
- return /* @__PURE__ */ import_react73.default.createElement("option", __spreadValues({
6326
- ref
6327
- }, props), children);
6328
- });
6329
- var NativeSelectSkeleton = () => /* @__PURE__ */ import_react73.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react73.default.createElement(NativeSelectBase.Skeleton, null), /* @__PURE__ */ import_react73.default.createElement("div", {
6330
- style: { height: "1px" }
6331
- }));
6332
- NativeSelect.Skeleton = NativeSelectSkeleton;
6333
- NativeSelect.Skeleton.displayName = "NativeSelect.Skeleton";
6334
-
6335
- // src/components/PageHeader/PageHeader.tsx
6336
- var import_react74 = __toESM(require("react"));
6337
- var import_castArray3 = __toESM(require("lodash/castArray"));
6338
- var import_omit13 = __toESM(require("lodash/omit"));
6339
-
6340
- // src/components/Pagination/Pagination.tsx
6341
- var import_react76 = __toESM(require("react"));
6342
-
6343
- // src/components/Select/Select.tsx
6344
- var import_react75 = __toESM(require("react"));
6345
- var import_isNil2 = __toESM(require("lodash/isNil"));
6346
- var import_isArray = __toESM(require("lodash/isArray"));
6347
- var import_defaults = __toESM(require("lodash/defaults"));
6348
- var import_uniqueId7 = __toESM(require("lodash/uniqueId"));
6349
- var import_omit14 = __toESM(require("lodash/omit"));
6350
- var import_downshift3 = require("downshift");
6351
- var import_overlays14 = require("@react-aria/overlays");
6352
- var hasIconProperty = (val) => {
6353
- var _a;
6354
- return typeof val === "string" || ((_a = val == null ? void 0 : val.icon) == null ? void 0 : _a.body) !== void 0;
6355
- };
6356
- var hasOptionGroups = (val) => {
6357
- return !val.some((opt) => (opt == null ? void 0 : opt.label) === void 0 || !(0, import_isArray.default)(opt == null ? void 0 : opt.options));
6358
- };
6359
- var defaultRenderOption = (item, props, { selectedItem }, { getOptionKey, getValue, optionToString = getOptionLabelBuiltin }) => {
6360
- var _a, _b;
6361
- return /* @__PURE__ */ import_react75.default.createElement(Select.Item, __spreadValues({
6362
- key: (_b = (_a = getOptionKey == null ? void 0 : getOptionKey(item)) != null ? _a : getValue == null ? void 0 : getValue(item)) != null ? _b : optionToString(item),
6363
- selected: item === selectedItem
6364
- }, props), hasIconProperty(item) && /* @__PURE__ */ import_react75.default.createElement(InlineIcon, {
6365
- icon: item.icon
6366
- }), optionToString(item));
6367
- };
6368
- var defaultGetValue = (opt) => {
6369
- if (typeof opt === "string") {
6370
- return opt;
6371
- }
6372
- if (typeof opt.value === "string") {
6373
- return opt.value;
6374
- }
6375
- return "";
6376
- };
6377
- var _SelectBase = (props) => {
6378
- var _b;
6379
- const withDefaults = (0, import_defaults.default)({}, props, {
6380
- disabled: false,
6381
- valid: true,
6382
- readOnly: false,
6383
- required: false,
6384
- optionToString: getOptionLabelBuiltin,
6385
- getValue: defaultGetValue,
6386
- UNSAFE_renderOption: defaultRenderOption,
6387
- isOptionDisabled: isOptionDisabledBuiltin,
6388
- actions: []
6389
- });
6390
- const _a = withDefaults, {
6391
- id,
6392
- name,
6393
- placeholder,
6394
- disabled,
6395
- readOnly,
6396
- maxHeight,
6397
- options,
6398
- optionToString: itemToString,
6399
- getValue,
6400
- getOptionKey,
6401
- UNSAFE_renderOption,
6402
- isOptionDisabled,
6403
- defaultValue,
6404
- value,
6405
- onChange,
6406
- valid,
6407
- emptyState,
6408
- actions,
6409
- required,
6410
- children,
6411
- labelWrapper
6412
- } = _a, rest = __objRest(_a, [
6413
- "id",
6414
- "name",
6415
- "placeholder",
6416
- "disabled",
6417
- "readOnly",
6418
- "maxHeight",
6419
- "options",
6420
- "optionToString",
6421
- "getValue",
6422
- "getOptionKey",
6423
- "UNSAFE_renderOption",
6424
- "isOptionDisabled",
6425
- "defaultValue",
6426
- "value",
6427
- "onChange",
6428
- "valid",
6429
- "emptyState",
6430
- "actions",
6431
- "required",
6432
- "children",
6433
- "labelWrapper"
6434
- ]);
6435
- const [hasFocus, setFocus] = (0, import_react75.useState)(false);
6436
- const targetRef = (0, import_react75.useRef)(null);
6437
- const overlayRef = (0, import_react75.useRef)(null);
6438
- const items = hasOptionGroups(options) ? options.flatMap((g) => g.options) : options;
6439
- const findItemByValue = (val) => {
6440
- if (val === null) {
6441
- return null;
6442
- }
6443
- return val === void 0 ? void 0 : items.find((opt) => getValue(opt) === getValue(val));
6444
- };
6445
- const {
6446
- isOpen,
6447
- closeMenu,
6448
- selectItem,
6449
- selectedItem,
6450
- highlightedIndex,
6451
- getToggleButtonProps,
6452
- getMenuProps,
6453
- getItemProps,
6454
- setHighlightedIndex
6455
- } = (0, import_downshift3.useSelect)({
6456
- selectedItem: findItemByValue(value),
6457
- defaultSelectedItem: findItemByValue(defaultValue),
6458
- items,
6459
- itemToString,
6460
- onSelectedItemChange: (e) => onChange == null ? void 0 : onChange(e.selectedItem)
6461
- });
6462
- const { overlayProps } = (0, import_overlays14.useOverlayPosition)({
6463
- targetRef,
6464
- overlayRef,
6465
- placement: "bottom start",
6466
- shouldFlip: true,
6467
- isOpen
6468
- });
6469
- const renderItem = (item, index) => UNSAFE_renderOption(
6470
- item,
6471
- __spreadValues({
6472
- highlighted: index === highlightedIndex
6473
- }, getItemProps({ item, index, disabled: isOptionDisabled(item, index) })),
6474
- {
6475
- selectedItem,
6476
- closeMenu,
6477
- selectOption: selectItem
6478
- },
6479
- withDefaults
6480
- );
6481
- const renderGroup = (group) => /* @__PURE__ */ import_react75.default.createElement(import_react75.default.Fragment, {
6482
- key: group.label
6483
- }, /* @__PURE__ */ import_react75.default.createElement(Select.Group, null, group.label), group.options.map((opt) => renderItem(opt, items.indexOf(opt))));
6484
- const input = /* @__PURE__ */ import_react75.default.createElement(Select.InputContainer, __spreadProps(__spreadValues({}, getToggleButtonProps({ disabled: disabled || readOnly, ref: targetRef })), {
6485
- variant: disabled ? "disabled" : !valid ? "error" : readOnly ? "readOnly" : hasFocus ? "focused" : "default",
6486
- tabIndex: 0
6487
- }), /* @__PURE__ */ import_react75.default.createElement(Select.Input, __spreadProps(__spreadValues({
6488
- id,
6489
- name
6490
- }, rest), {
6491
- className: !disabled && !readOnly ? "cursor-pointer" : void 0,
6492
- disabled,
6493
- readOnly: true,
6494
- placeholder: readOnly ? void 0 : placeholder,
6495
- value: !(0, import_isNil2.default)(selectedItem) ? itemToString(selectedItem) : "",
6496
- tabIndex: -1,
6497
- onFocus: () => setFocus(true),
6498
- onBlur: () => setFocus(false)
6499
- })), !readOnly && /* @__PURE__ */ import_react75.default.createElement(Select.Toggle, {
6500
- disabled,
6501
- isOpen,
6502
- tabIndex: -1
6503
- }));
6504
- const width = (_b = targetRef.current) == null ? void 0 : _b.offsetWidth;
6505
- const style = isOpen ? __spreadProps(__spreadValues({}, overlayProps.style), { width }) : { display: "none" };
6506
- return /* @__PURE__ */ import_react75.default.createElement("div", {
6507
- className: tw("relative")
6508
- }, labelWrapper ? import_react75.default.cloneElement(labelWrapper, { children: input }) : input, /* @__PURE__ */ import_react75.default.createElement(PopoverWrapper, __spreadProps(__spreadValues({
6509
- isOpen: true,
6510
- isDismissable: true,
6511
- autoFocus: true
6512
- }, getMenuProps({ ref: overlayRef })), {
6513
- style,
6514
- onClose: closeMenu
6515
- }), /* @__PURE__ */ import_react75.default.createElement(Select.Menu, {
6516
- maxHeight
6517
- }, isOpen && options.length === 0 && /* @__PURE__ */ import_react75.default.createElement(Select.EmptyStateContainer, null, emptyState), isOpen && options.length > 0 && !hasOptionGroups(options) && options.map(renderItem), isOpen && options.length > 0 && hasOptionGroups(options) && options.map(renderGroup), isOpen && actions.length > 0 && /* @__PURE__ */ import_react75.default.createElement(import_react75.default.Fragment, null, /* @__PURE__ */ import_react75.default.createElement(Select.Divider, {
6518
- onMouseOver: () => setHighlightedIndex(-1)
6519
- }), actions.map((act, index) => /* @__PURE__ */ import_react75.default.createElement(Select.ActionItem, __spreadProps(__spreadValues({
6520
- key: `${index}`
6521
- }, act), {
6522
- onMouseOver: () => setHighlightedIndex(-1),
6523
- onClick: () => {
6524
- act.onClick();
6525
- closeMenu();
6526
- }
6527
- }), act.label))))));
6528
- };
6529
- var SelectBase = (props) => /* @__PURE__ */ import_react75.default.createElement(_SelectBase, __spreadProps(__spreadValues({}, props), {
6530
- labelWrapper: void 0
6531
- }));
6532
- var SelectBaseSkeleton = () => /* @__PURE__ */ import_react75.default.createElement(Skeleton, {
6533
- height: 38
6534
- });
6535
- SelectBase.Skeleton = SelectBaseSkeleton;
6536
- var Select2 = (_a) => {
6537
- var _b = _a, {
6538
- options
6539
- } = _b, props = __objRest(_b, [
6540
- "options"
6541
- ]);
6542
- var _a2;
6543
- const id = (0, import_react75.useRef)((_a2 = props.id) != null ? _a2 : `select-${(0, import_uniqueId7.default)()}`);
6544
- const errorMessageId = (0, import_uniqueId7.default)();
6545
- const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
6546
- const labelProps = getLabelControlProps(props);
6547
- const baseProps = (0, import_omit14.default)(props, Object.keys(labelProps));
6548
- const legacyError = labelProps.error !== void 0 && labelProps.valid === false;
6549
- const variant = !labelProps.valid || legacyError ? "error" : labelProps.disabled ? "disabled" : "default";
6550
- const label = /* @__PURE__ */ import_react75.default.createElement(Label, __spreadValues({
6551
- id: `${id.current}-label`,
6552
- htmlFor: `${id.current}-input`,
6553
- variant,
6554
- messageId: errorMessageId
6555
- }, labelProps));
6556
- return /* @__PURE__ */ import_react75.default.createElement(FormControl, null, /* @__PURE__ */ import_react75.default.createElement(_SelectBase, __spreadProps(__spreadValues(__spreadValues({}, baseProps), errorProps), {
6557
- id: `${id.current}-input`,
6558
- options,
6559
- disabled: props.disabled,
6560
- valid: props.valid,
6561
- labelWrapper: label
6562
- })), /* @__PURE__ */ import_react75.default.createElement(HelperText, {
6563
- messageId: errorMessageId,
6564
- error: !labelProps.valid,
6565
- helperText: labelProps.helperText,
6566
- length: labelProps.length,
6567
- maxLength: labelProps.maxLength,
6568
- reserveSpaceForError: labelProps.reserveSpaceForError
6569
- }));
6570
- };
6571
- var SelectSkeleton = () => /* @__PURE__ */ import_react75.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react75.default.createElement(SelectBase.Skeleton, null));
6572
- Select2.Skeleton = SelectSkeleton;
6573
-
6574
- // src/components/Pagination/Pagination.tsx
6575
- var import_clamp = __toESM(require("lodash/clamp"));
6576
- var import_chevronLeft3 = __toESM(require_chevronLeft());
6577
- var import_chevronRight3 = __toESM(require_chevronRight());
6578
- var import_chevronForward = __toESM(require_chevronForward());
6579
- var import_chevronBackward = __toESM(require_chevronBackward());
6580
-
6581
- // src/components/PopoverDialog/PopoverDialog.tsx
6582
- var import_react77 = __toESM(require("react"));
6583
- var import_omit15 = __toESM(require("lodash/omit"));
6584
- var PopoverDialog2 = ({ placement, open, title, secondaryAction, primaryAction, children }) => {
6585
- const wrapPromptWithBody = (child) => {
6586
- if (isComponentType(child, PopoverDialog2.Prompt)) {
6587
- return /* @__PURE__ */ import_react77.default.createElement(Popover2.Panel, {
6588
- className: tw("max-w-[300px]")
6589
- }, /* @__PURE__ */ import_react77.default.createElement(PopoverDialog.Header, null, /* @__PURE__ */ import_react77.default.createElement(PopoverDialog.Title, null, title)), child, /* @__PURE__ */ import_react77.default.createElement(PopoverDialog.Footer, null, /* @__PURE__ */ import_react77.default.createElement(PopoverDialog.Actions, null, secondaryAction && /* @__PURE__ */ import_react77.default.createElement(Popover2.Button, __spreadValues({
6590
- kind: "secondary-ghost",
6591
- key: secondaryAction.text,
6592
- dense: true
6593
- }, (0, import_omit15.default)(secondaryAction, "text")), secondaryAction.text), /* @__PURE__ */ import_react77.default.createElement(Popover2.Button, __spreadValues({
6594
- kind: "ghost",
6595
- key: primaryAction.text,
6596
- dense: true
6597
- }, (0, import_omit15.default)(primaryAction, "text")), primaryAction.text))));
6598
- }
6599
- return child;
6600
- };
6601
- return /* @__PURE__ */ import_react77.default.createElement(Popover2, {
6602
- type: "dialog",
6603
- isOpen: open,
6604
- placement,
6605
- isDismissable: true,
6606
- isKeyboardDismissDisabled: false,
6607
- autoFocus: true,
6608
- containFocus: true
6609
- }, import_react77.default.Children.map(children, wrapPromptWithBody));
6610
- };
6611
- PopoverDialog2.Trigger = Popover2.Trigger;
6612
- var Prompt = ({ children }) => /* @__PURE__ */ import_react77.default.createElement(PopoverDialog.Body, null, children);
6613
- Prompt.displayName = "PopoverDialog.Prompt";
6614
- PopoverDialog2.Prompt = Prompt;
6615
-
6616
- // src/components/Portal/Portal.tsx
6617
- var import_react_dom = require("react-dom");
6618
-
6619
- // src/components/ProgressBar/ProgressBar.tsx
6620
- var import_react79 = __toESM(require("react"));
6621
-
6622
- // src/common/ProgressBar/ProgressBar.tsx
6623
- var import_react78 = __toESM(require("react"));
6624
- var import_clamp2 = __toESM(require("lodash/clamp"));
6625
- var ProgressBar = (_a) => {
6626
- var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
6627
- return /* @__PURE__ */ import_react78.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
6628
- className: classNames(
6629
- tw("relative flex items-center w-full bg-grey-0 h-2 rounded-full overflow-hidden"),
6630
- className
6631
- )
6632
- }), children);
6633
- };
6634
- var STATUS_COLORS = {
6635
- info: tw("bg-info-50"),
6636
- warning: tw("bg-warning-70"),
6637
- success: tw("bg-success-70"),
6638
- error: tw("bg-error-70")
6639
- };
6640
- ProgressBar.Indicator = (_a) => {
6641
- var _b = _a, { min, max, value, "aria-label": ariaLabel, status, className } = _b, rest = __objRest(_b, ["min", "max", "value", "aria-label", "status", "className"]);
6642
- const completedPercentage = (0, import_clamp2.default)((value - min) / (max - min) * 100, 0, 100);
6643
- return /* @__PURE__ */ import_react78.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
6644
- className: classNames(
6645
- tw("h-2 rounded-full transition-all ease-in-out delay-150"),
6646
- STATUS_COLORS[status],
6647
- className
6648
- ),
6649
- style: { width: `${completedPercentage}%` },
6650
- role: "progressbar",
6651
- "aria-label": ariaLabel || value.toString(),
6652
- "aria-valuenow": value,
6653
- "aria-valuemin": min,
6654
- "aria-valuemax": max
6655
- }));
6656
- };
6657
- ProgressBar.Labels = (_a) => {
6658
- var _b = _a, { children, startLabel, endLabel, className } = _b, rest = __objRest(_b, ["children", "startLabel", "endLabel", "className"]);
6659
- return /* @__PURE__ */ import_react78.default.createElement("div", {
6660
- className: classNames(tw("flex flex-row"), className)
6661
- }, /* @__PURE__ */ import_react78.default.createElement("span", __spreadProps(__spreadValues({}, rest), {
6662
- className: tw("grow text-grey-70 typography-caption-default")
6663
- }), startLabel), /* @__PURE__ */ import_react78.default.createElement("span", __spreadProps(__spreadValues({}, rest), {
6664
- className: tw("grow text-grey-70 typography-caption-default text-right")
6665
- }), endLabel));
6666
- };
6667
-
6668
- // src/components/ProgressBar/ProgressBar.tsx
6669
- var ProgressBar2 = (props) => {
6670
- const {
6671
- value,
6672
- "aria-label": ariaLabel,
6673
- min = 0,
6674
- max = 100,
6675
- progresStatus = "info",
6676
- completedStatus = "success"
6677
- } = props;
6678
- if (min > max) {
6679
- throw new Error("`min` value provided to `ProgressBar` is greater than `max` value.");
6680
- }
6681
- const progress = /* @__PURE__ */ import_react79.default.createElement(ProgressBar, null, /* @__PURE__ */ import_react79.default.createElement(ProgressBar.Indicator, {
6682
- status: value === max ? completedStatus : progresStatus,
6683
- min,
6684
- max,
6685
- value,
6686
- "aria-label": ariaLabel
6687
- }));
6688
- if (props.dense) {
6689
- return progress;
6690
- }
6691
- return /* @__PURE__ */ import_react79.default.createElement("div", null, progress, /* @__PURE__ */ import_react79.default.createElement(ProgressBar.Labels, {
6692
- className: tw("py-2"),
6693
- startLabel: props.startLabel,
6694
- endLabel: props.endLabel
6695
- }));
6696
- };
6697
- ProgressBar2.Skeleton = () => /* @__PURE__ */ import_react79.default.createElement(Skeleton, {
6698
- height: 4,
6699
- display: "block"
6700
- });
6701
-
6702
- // src/components/RadioButton/RadioButton.tsx
6703
- var import_react80 = __toESM(require("react"));
6704
- var RadioButton2 = import_react80.default.forwardRef(
6705
- (_a, ref) => {
6706
- var _b = _a, {
6707
- name,
6708
- id,
6709
- checked: _checked,
6710
- defaultChecked,
6711
- onChange,
6712
- readOnly = false,
6713
- disabled = false,
6714
- caption,
6715
- children,
6716
- "aria-label": ariaLabel
6717
- } = _b, props = __objRest(_b, [
6718
- "name",
6719
- "id",
6720
- "checked",
6721
- "defaultChecked",
6722
- "onChange",
6723
- "readOnly",
6724
- "disabled",
6725
- "caption",
6726
- "children",
6727
- "aria-label"
6728
- ]);
6729
- var _a2;
6730
- const [checked, setChecked] = import_react80.default.useState((_a2 = _checked != null ? _checked : defaultChecked) != null ? _a2 : false);
6731
- if (_checked !== void 0 && checked !== _checked) {
6732
- setChecked(_checked);
6733
- }
6734
- return !readOnly || checked ? /* @__PURE__ */ import_react80.default.createElement(ControlLabel, {
6735
- htmlFor: id,
6736
- label: children,
6737
- "aria-label": ariaLabel,
6738
- caption,
6739
- readOnly,
6740
- disabled,
6741
- style: { gap: "0 8px" }
6742
- }, !readOnly && /* @__PURE__ */ import_react80.default.createElement(RadioButton, __spreadProps(__spreadValues({
6743
- id,
6744
- ref,
6745
- name
6746
- }, props), {
6747
- checked,
6748
- readOnly,
6749
- disabled,
6750
- onChange: (e) => {
6751
- setChecked(e.target.checked);
6752
- onChange == null ? void 0 : onChange(e);
6753
- }
6754
- }))) : null;
6755
- }
6756
- );
6757
- var RadioButtonSkeleton = () => /* @__PURE__ */ import_react80.default.createElement("div", {
6758
- className: tw("flex gap-3")
6759
- }, /* @__PURE__ */ import_react80.default.createElement(Skeleton, {
6760
- height: 20,
6761
- width: 20
6762
- }), /* @__PURE__ */ import_react80.default.createElement(Skeleton, {
6763
- height: 20,
6764
- width: 150
6765
- }));
6766
- RadioButton2.Skeleton = RadioButtonSkeleton;
6767
-
6768
- // src/components/RadioButtonGroup/RadioButtonGroup.tsx
6769
- var import_react81 = __toESM(require("react"));
6770
- var import_uniqueId8 = __toESM(require("lodash/uniqueId"));
6771
- var isRadioButton = (c) => {
6772
- return import_react81.default.isValidElement(c) && c.type === RadioButton2;
6773
- };
6774
- var RadioButtonGroup = (_a) => {
6775
- var _b = _a, {
6776
- name,
6777
- value: _value,
6778
- defaultValue,
6779
- onChange,
6780
- direction = "row",
6781
- cols,
6782
- readOnly,
6783
- children
6784
- } = _b, props = __objRest(_b, [
6785
- "name",
6786
- "value",
6787
- "defaultValue",
6788
- "onChange",
6789
- "direction",
6790
- "cols",
6791
- "readOnly",
6792
- "children"
6793
- ]);
6794
- var _a2;
6795
- const [value, setValue] = import_react81.default.useState((_a2 = _value != null ? _value : defaultValue) != null ? _a2 : "");
6796
- const errorMessageId = (0, import_uniqueId8.default)();
6797
- const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
6798
- const labelControlProps = getLabelControlProps(props);
6799
- if (_value !== void 0 && _value !== value) {
6800
- setValue(_value);
6801
- }
6802
- const handleChange = (e) => {
6803
- setValue(e.target.value);
6804
- onChange == null ? void 0 : onChange(e.target.value);
6805
- };
6806
- const content = import_react81.default.Children.map(children, (c) => {
6807
- var _a3, _b2, _c;
6808
- if (!isRadioButton(c)) {
6809
- return null;
6810
- }
6811
- const defaultChecked = defaultValue === void 0 ? void 0 : c.props.value === defaultValue;
6812
- const checked = value === void 0 ? void 0 : c.props.value === value;
6813
- return import_react81.default.cloneElement(c, {
6814
- name,
6815
- defaultChecked: (_a3 = c.props.defaultChecked) != null ? _a3 : defaultChecked,
6816
- checked: (_b2 = c.props.checked) != null ? _b2 : checked,
6817
- onChange: (_c = c.props.onChange) != null ? _c : handleChange,
6818
- disabled: props.disabled || c.props.disabled,
6819
- readOnly
6820
- });
6821
- });
6822
- return /* @__PURE__ */ import_react81.default.createElement(LabelControl, __spreadValues(__spreadValues({
6823
- fieldset: true
6824
- }, labelControlProps), errorProps), cols && /* @__PURE__ */ import_react81.default.createElement(InputGroup, {
6825
- cols
6826
- }, content), !cols && /* @__PURE__ */ import_react81.default.createElement(Flexbox, {
6827
- direction,
6828
- alignItems: "flex-start",
6829
- colGap: "8",
6830
- rowGap: "3",
6831
- wrap: "wrap"
6832
- }, content));
6833
- };
6834
- var RadioButtonGroupSkeleton = ({ direction = "row", options = 2 }) => {
6835
- return /* @__PURE__ */ import_react81.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react81.default.createElement("div", {
6836
- className: tw("flex flex-wrap", {
6837
- "flex-row gap-8": direction === "row",
6838
- "flex-col gap-2": direction === "column"
6839
- })
6840
- }, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ import_react81.default.createElement(RadioButton2.Skeleton, {
6841
- key
6842
- }))));
6843
- };
6844
- RadioButtonGroup.Skeleton = RadioButtonGroupSkeleton;
6845
-
6846
- // src/components/Section/Section.tsx
6847
- var import_react83 = __toESM(require("react"));
6848
-
6849
- // src/common/Section/Section.tsx
6850
- var import_react82 = __toESM(require("react"));
6851
- var Section2 = (_a) => {
6852
- var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
6853
- return /* @__PURE__ */ import_react82.default.createElement(Box, __spreadValues({
6854
- borderColor: "grey-5",
6855
- borderWidth: "1px"
6856
- }, rest), children);
6857
- };
6858
- Section2.Header = (_a) => {
6859
- var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
6860
- return /* @__PURE__ */ import_react82.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
6861
- className: classNames(tw("px-6 py-5 flex gap-5 justify-between items-center"), className)
6862
- }), children);
6863
- };
6864
- Section2.TitleContainer = (_a) => {
6865
- var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
6866
- return /* @__PURE__ */ import_react82.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
6867
- className: classNames(tw("flex flex-col grow gap-2"), className)
6868
- }), children);
6869
- };
6870
- Section2.Title = (_a) => {
6871
- var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
6872
- return /* @__PURE__ */ import_react82.default.createElement(Typography2.Subheading, __spreadProps(__spreadValues({}, rest), {
6873
- color: "black"
6874
- }), children);
6875
- };
6876
- Section2.Subtitle = (_a) => {
6877
- var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
6878
- return /* @__PURE__ */ import_react82.default.createElement(Typography2.SmallText, __spreadProps(__spreadValues({}, rest), {
6879
- color: "grey-70"
6880
- }), children);
6881
- };
6882
- Section2.Actions = (_a) => {
6883
- var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
6884
- return /* @__PURE__ */ import_react82.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
6885
- className: classNames(tw("flex gap-4 justify-end"), className)
6886
- }), children);
6887
- };
6888
- Section2.Body = (_a) => {
6889
- var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
6890
- return /* @__PURE__ */ import_react82.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
6891
- className: classNames(tw("p-6"), className)
6892
- }), /* @__PURE__ */ import_react82.default.createElement(Typography, {
6893
- htmlTag: "div",
6894
- color: "grey-70"
6895
- }, children));
6896
- };
6897
-
6898
- // src/components/Section/Section.tsx
6899
- var import_castArray4 = __toESM(require("lodash/castArray"));
6900
-
6901
- // src/components/SegmentedControl/SegmentedControl.tsx
6902
- var import_react84 = __toESM(require("react"));
6903
-
6904
- // src/components/Switch/Switch.tsx
6905
- var import_react85 = __toESM(require("react"));
6906
- var Switch = import_react85.default.forwardRef(
6907
- (_a, ref) => {
6908
- var _b = _a, {
6909
- id,
6910
- name,
6911
- caption,
6912
- checked: _checked,
6913
- defaultChecked,
6914
- onChange,
6915
- readOnly = false,
6916
- disabled = false,
6917
- children,
6918
- "aria-label": ariaLabel
6919
- } = _b, props = __objRest(_b, [
6920
- "id",
6921
- "name",
6922
- "caption",
6923
- "checked",
6924
- "defaultChecked",
6925
- "onChange",
6926
- "readOnly",
6927
- "disabled",
6928
- "children",
6929
- "aria-label"
6930
- ]);
6931
- var _a2;
6932
- const [checked, setChecked] = import_react85.default.useState((_a2 = _checked != null ? _checked : defaultChecked) != null ? _a2 : false);
6933
- if (_checked !== void 0 && checked !== _checked) {
6934
- setChecked(_checked);
6935
- }
6936
- return !readOnly || checked ? /* @__PURE__ */ import_react85.default.createElement(ControlLabel, {
6937
- htmlFor: id,
6938
- label: children,
6939
- "aria-label": ariaLabel,
6940
- caption,
6941
- readOnly,
6942
- disabled,
6943
- style: { gap: "0 8px" }
6944
- }, !readOnly && /* @__PURE__ */ import_react85.default.createElement(Box, {
6945
- component: "span",
6946
- display: "inline-flex",
6947
- justifyContent: "center",
6948
- alignItems: "center",
6949
- className: classNames(
6950
- tw("relative flex self-center group", {
6951
- "text-grey-30": disabled,
6952
- "text-grey-100 cursor-pointer": !disabled
6953
- })
6954
- )
6955
- }, /* @__PURE__ */ import_react85.default.createElement("input", __spreadProps(__spreadValues({
6956
- id,
6957
- ref,
6958
- type: "checkbox",
6959
- name
6960
- }, props), {
6961
- checked,
6962
- onChange: (e) => {
6963
- setChecked(e.target.checked);
6964
- onChange == null ? void 0 : onChange(e);
6965
- },
6966
- className: tw("appearance-none peer"),
6967
- readOnly,
6968
- disabled
6969
- })), /* @__PURE__ */ import_react85.default.createElement("span", {
6970
- className: tw(
6971
- "rounded-full inline-block w-[34px] h-[20px] transition duration-300 peer-focus:border border-info-70",
6972
- {
6973
- "bg-navyBlue-100": checked,
6974
- "bg-grey-20 group-hover:bg-grey-30": !disabled && !checked,
6975
- "bg-grey-5": disabled && !checked,
6976
- "opacity-40": disabled && checked
6977
- }
6978
- )
6979
- }), /* @__PURE__ */ import_react85.default.createElement("span", {
6980
- style: {
6981
- right: checked ? "20px" : void 0,
6982
- left: checked ? void 0 : "4px"
6983
- },
6984
- className: tw("rounded-full absolute inline-block transition duration-300 h-4 w-4", {
6985
- "transform translate-x-5": checked,
6986
- "bg-grey-0": disabled,
6987
- "bg-white shadow-4dp": !disabled
6988
- })
6989
- }))) : null;
6990
- }
6991
- );
6992
- var SwitchSkeleton = () => /* @__PURE__ */ import_react85.default.createElement("div", {
6993
- className: tw("flex gap-3")
6994
- }, /* @__PURE__ */ import_react85.default.createElement(Skeleton, {
6995
- height: 20,
6996
- width: 35
6997
- }), /* @__PURE__ */ import_react85.default.createElement(Skeleton, {
6998
- height: 20,
6999
- width: 150
7000
- }));
7001
- Switch.Skeleton = SwitchSkeleton;
7002
-
7003
- // src/components/SwitchGroup/SwitchGroup.tsx
7004
- var import_react86 = __toESM(require("react"));
7005
- var import_uniqueId9 = __toESM(require("lodash/uniqueId"));
7006
- var SwitchGroup = (_a) => {
7007
- var _b = _a, {
7008
- value,
7009
- defaultValue,
7010
- onChange,
7011
- readOnly = false,
7012
- cols,
7013
- children
7014
- } = _b, props = __objRest(_b, [
7015
- "value",
7016
- "defaultValue",
7017
- "onChange",
7018
- "readOnly",
7019
- "cols",
7020
- "children"
7021
- ]);
7022
- var _a2;
7023
- const [selectedItems, setSelectedItems] = (0, import_react86.useState)((_a2 = value != null ? value : defaultValue) != null ? _a2 : []);
7024
- if (value !== void 0 && value !== selectedItems) {
7025
- setSelectedItems(value);
7026
- }
7027
- const errorMessageId = (0, import_uniqueId9.default)();
7028
- const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
7029
- const labelControlProps = getLabelControlProps(props);
7030
- const handleChange = (e) => {
7031
- const { value: value2 } = e.target;
7032
- const updated = e.target.checked ? [...selectedItems, value2] : selectedItems.filter((v) => v !== value2);
7033
- setSelectedItems(updated);
7034
- onChange == null ? void 0 : onChange(updated);
7035
- };
7036
- return /* @__PURE__ */ import_react86.default.createElement(LabelControl, __spreadValues(__spreadValues({
7037
- fieldset: true
7038
- }, labelControlProps), errorProps), /* @__PURE__ */ import_react86.default.createElement(InputGroup, {
7039
- cols
7040
- }, import_react86.default.Children.map(children, (c) => {
7041
- var _a3, _b2, _c, _d;
7042
- if (!isComponentType(c, Switch)) {
7043
- return null;
7044
- }
7045
- const str = (_a3 = c.props.value) == null ? void 0 : _a3.toString();
7046
- const defaultChecked = defaultValue === void 0 ? void 0 : str !== void 0 && defaultValue.includes(str);
7047
- const checked = value === void 0 ? void 0 : str !== void 0 && value.includes(str);
7048
- return import_react86.default.cloneElement(c, {
7049
- defaultChecked: (_b2 = c.props.defaultChecked) != null ? _b2 : defaultChecked,
7050
- checked: (_c = c.props.checked) != null ? _c : checked,
7051
- onChange: (_d = c.props.onChange) != null ? _d : handleChange,
7052
- disabled: props.disabled || c.props.disabled,
7053
- readOnly
7054
- });
7055
- })));
7056
- };
7057
- var SwitchGroupSkeleton = ({ options = 2 }) => {
7058
- return /* @__PURE__ */ import_react86.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react86.default.createElement("div", {
7059
- className: tw("flex flex-wrap flex-col gap-2")
7060
- }, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ import_react86.default.createElement(Switch.Skeleton, {
7061
- key
7062
- }))));
7063
- };
7064
- SwitchGroup.Skeleton = SwitchGroupSkeleton;
7065
-
7066
- // src/components/TagLabel/TagLabel.tsx
7067
- var import_react87 = __toESM(require("react"));
7068
-
7069
- // src/components/Textarea/Textarea.tsx
7070
- var import_react88 = __toESM(require("react"));
7071
- var import_uniqueId10 = __toESM(require("lodash/uniqueId"));
7072
- var import_toString2 = __toESM(require("lodash/toString"));
7073
- var import_omit16 = __toESM(require("lodash/omit"));
7074
- var TextareaBase = import_react88.default.forwardRef(
7075
- (_a, ref) => {
7076
- var _b = _a, { readOnly = false, valid = true } = _b, props = __objRest(_b, ["readOnly", "valid"]);
7077
- return /* @__PURE__ */ import_react88.default.createElement("textarea", __spreadProps(__spreadValues({
7078
- ref
7079
- }, props), {
7080
- readOnly,
7081
- className: classNames(getCommonInputStyles({ readOnly, valid }), props.className)
7082
- }));
7083
- }
7084
- );
7085
- TextareaBase.Skeleton = () => /* @__PURE__ */ import_react88.default.createElement(Skeleton, {
7086
- height: 58
7087
- });
7088
- var Textarea = import_react88.default.forwardRef((props, ref) => {
7089
- var _a, _b, _c;
7090
- const [value, setValue] = (0, import_react88.useState)((_b = (_a = props.value) != null ? _a : props.defaultValue) != null ? _b : "");
7091
- const id = (0, import_react88.useRef)((_c = props.id) != null ? _c : `textarea-${(0, import_uniqueId10.default)()}`);
7092
- const errorMessageId = (0, import_uniqueId10.default)();
7093
- const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
7094
- const _d = getLabelControlProps(props), { "data-testid": dataTestId } = _d, labelControlProps = __objRest(_d, ["data-testid"]);
7095
- const baseProps = (0, import_omit16.default)(props, Object.keys(labelControlProps));
7096
- return /* @__PURE__ */ import_react88.default.createElement(LabelControl, __spreadValues({
7097
- id: `${id.current}-label`,
7098
- htmlFor: id.current,
7099
- messageId: errorMessageId,
7100
- length: value !== void 0 ? (0, import_toString2.default)(value).length : void 0
7101
- }, labelControlProps), /* @__PURE__ */ import_react88.default.createElement(TextareaBase, __spreadProps(__spreadValues(__spreadValues({
7102
- ref
7103
- }, baseProps), errorProps), {
7104
- id: id.current,
7105
- "data-testid": dataTestId,
7106
- onChange: (e) => {
7107
- var _a2;
7108
- setValue(e.currentTarget.value);
7109
- (_a2 = props.onChange) == null ? void 0 : _a2.call(props, e);
7110
- },
7111
- disabled: props.disabled,
7112
- maxLength: props.maxLength,
7113
- required: props.required,
7114
- valid: props.valid
7115
- })));
7116
- });
7117
- var TextAreaSkeleton = () => /* @__PURE__ */ import_react88.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react88.default.createElement(TextareaBase.Skeleton, null));
7118
- Textarea.Skeleton = TextAreaSkeleton;
7119
-
7120
- // src/components/Timeline/Timeline.tsx
7121
- var import_react90 = __toESM(require("react"));
7122
-
7123
- // src/common/Timeline/Timeline.tsx
7124
- var import_react89 = __toESM(require("react"));
7125
- var Timeline = (_a) => {
7126
- var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
7127
- return /* @__PURE__ */ import_react89.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
7128
- className: classNames(tw("grid grid-cols-[16px_1fr] gap-x-4"), className)
7129
- }));
7130
- };
7131
- var Content = (_a) => {
7132
- var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
7133
- return /* @__PURE__ */ import_react89.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
7134
- className: classNames(tw("pb-6"), className)
7135
- }));
7136
- };
7137
- var Separator2 = (_a) => {
7138
- var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
7139
- return /* @__PURE__ */ import_react89.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
7140
- className: classNames(tw("flex items-center justify-center h-5 w-5"), className)
7141
- }));
7142
- };
7143
- var LineContainer = (_a) => {
7144
- var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
7145
- return /* @__PURE__ */ import_react89.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
7146
- className: classNames(tw("flex justify-center py-1"), className)
7147
- }));
7148
- };
7149
- var Line = (_a) => {
7150
- var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
7151
- return /* @__PURE__ */ import_react89.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
7152
- className: classNames(tw("w-1 bg-grey-5 h-full justify-self-center"), className)
7153
- }));
7154
- };
7155
- var Dot = (_a) => {
7156
- var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
7157
- return /* @__PURE__ */ import_react89.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
7158
- className: classNames(tw("bg-grey-30 h-[6px] w-[6px] rounded"), className)
7159
- }));
7160
- };
7161
- Separator2.Dot = Dot;
7162
- LineContainer.Line = Line;
7163
- Timeline.Separator = Separator2;
7164
- Timeline.LineContainer = LineContainer;
7165
- Timeline.Content = Content;
7166
-
7167
- // src/components/Timeline/Timeline.tsx
7168
- var import_time = __toESM(require_time());
7169
- var import_warningSign4 = __toESM(require_warningSign());
7170
- var import_error4 = __toESM(require_error());
7171
- var TimelineItem = () => null;
7172
- var Timeline2 = ({ children }) => /* @__PURE__ */ import_react90.default.createElement("div", null, import_react90.default.Children.map(children, (item) => {
7173
- if (!isComponentType(item, TimelineItem)) {
7174
- throw new Error("<Timeline> can only have <Timeline.Item> components as children");
7175
- } else {
7176
- const { props, key } = item;
7177
- return /* @__PURE__ */ import_react90.default.createElement(Timeline, {
7178
- key: key != null ? key : props.title
7179
- }, /* @__PURE__ */ import_react90.default.createElement(Timeline.Separator, null, props.variant === "error" ? /* @__PURE__ */ import_react90.default.createElement(Icon, {
7180
- icon: import_error4.default,
7181
- color: "error-30"
7182
- }) : props.variant === "warning" ? /* @__PURE__ */ import_react90.default.createElement(Icon, {
7183
- icon: import_warningSign4.default,
7184
- color: "warning-30"
7185
- }) : props.variant === "info" ? /* @__PURE__ */ import_react90.default.createElement(Icon, {
7186
- icon: import_time.default,
7187
- color: "info-30"
7188
- }) : /* @__PURE__ */ import_react90.default.createElement(Timeline.Separator.Dot, null)), /* @__PURE__ */ import_react90.default.createElement(Typography2.Caption, {
7189
- fontWeight: 600
7190
- }, props.title), /* @__PURE__ */ import_react90.default.createElement(Timeline.LineContainer, null, /* @__PURE__ */ import_react90.default.createElement(Timeline.LineContainer.Line, null)), /* @__PURE__ */ import_react90.default.createElement(Timeline.Content, null, /* @__PURE__ */ import_react90.default.createElement(Typography2, null, props.children)));
7191
- }
7192
- }));
7193
- var TimelineItemSkeleton = () => /* @__PURE__ */ import_react90.default.createElement(Timeline, null, /* @__PURE__ */ import_react90.default.createElement(Timeline.Separator, null, /* @__PURE__ */ import_react90.default.createElement(Skeleton, {
7194
- width: 6,
7195
- height: 6,
7196
- rounded: true
7197
- })), /* @__PURE__ */ import_react90.default.createElement(Skeleton, {
7198
- height: 12,
7199
- width: 120
7200
- }), /* @__PURE__ */ import_react90.default.createElement(Timeline.LineContainer, null, /* @__PURE__ */ import_react90.default.createElement(Skeleton, {
7201
- width: 2
7202
- })), /* @__PURE__ */ import_react90.default.createElement(Timeline.Content, null, /* @__PURE__ */ import_react90.default.createElement(Box, {
7203
- display: "flex",
7204
- flexDirection: "column",
7205
- gap: "3"
7206
- }, /* @__PURE__ */ import_react90.default.createElement(Skeleton, {
7207
- height: 32,
7208
- width: "100%"
7209
- }), /* @__PURE__ */ import_react90.default.createElement(Skeleton, {
7210
- height: 32,
7211
- width: "73%"
7212
- }), /* @__PURE__ */ import_react90.default.createElement(Skeleton, {
7213
- height: 32,
7214
- width: "80%"
7215
- }))));
7216
- var TimelineSkeleton = ({ items = 3 }) => /* @__PURE__ */ import_react90.default.createElement("div", null, Array.from({ length: items }).map((_, key) => /* @__PURE__ */ import_react90.default.createElement(TimelineItemSkeleton, {
7217
- key
7218
- })));
7219
- Timeline2.Item = TimelineItem;
7220
- Timeline2.Skeleton = TimelineSkeleton;
7221
-
7222
- // src/utils/table/useTableSelect.ts
7223
- var import_react91 = __toESM(require("react"));
7224
-
7225
- // src/components/Pagination/usePagination.tsx
7226
- var import_react92 = require("react");
7227
-
7228
- // src/components/index.ts
7229
- var SelectItem = Select.Item;
7230
-
7231
- // src/common/Table/Table.tsx
7232
- var HeadContext = import_react93.default.createContext(null);
7233
- var tableClassNames = tw("w-full relative typography-body-default border-spacing-0");
7234
- var Table = (_a) => {
7235
- var _b = _a, { children, ariaLabel, className } = _b, rest = __objRest(_b, ["children", "ariaLabel", "className"]);
7236
- return /* @__PURE__ */ import_react93.default.createElement("table", __spreadProps(__spreadValues({}, rest), {
7237
- className: classNames(tableClassNames, className),
7238
- "aria-label": ariaLabel
7239
- }), children);
7240
- };
7241
- var TableHead = (_a) => {
7242
- var _b = _a, { children, sticky } = _b, rest = __objRest(_b, ["children", "sticky"]);
7243
- return /* @__PURE__ */ import_react93.default.createElement("thead", __spreadValues({}, rest), /* @__PURE__ */ import_react93.default.createElement("tr", null, /* @__PURE__ */ import_react93.default.createElement(HeadContext.Provider, {
7244
- value: { children, sticky }
7245
- }, children)));
7246
- };
7247
- var TableBody = (_a) => {
7248
- var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
7249
- return /* @__PURE__ */ import_react93.default.createElement("tbody", __spreadValues({}, rest), children);
7250
- };
7251
- var rowClassNames = tw("children:border-grey-10 children:last:border-b-0 hover:bg-grey-0");
7252
- var TableRow = (_a) => {
7253
- var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
7254
- return /* @__PURE__ */ import_react93.default.createElement("tr", __spreadProps(__spreadValues({}, rest), {
7255
- className: classNames(rowClassNames, className)
7256
- }), children);
7257
- };
7258
- var cellClassNames = tw("px-4 border-b typography-body-small leading-[18px]");
7259
- var getBodyCellClassNames = (table = true) => tw("text-grey-70 py-3", {
7260
- "h-[50px]": table,
7261
- "min-h-[50px]": !table
7262
- });
7263
- var getAlignClassNames2 = (align) => tw({ "text-right": align === "right", "text-center": align === "center" });
7264
- var getHeadCellClassNames = (sticky = true) => {
7265
- const common = tw("py-[14px] text-left bg-white border-grey-40 text-grey-50 font-normal");
7266
- return sticky ? classNames(common, tw("sticky top-0")) : common;
7267
- };
7268
- var TableCell = (_a) => {
7269
- var _b = _a, { children, className, align = "left" } = _b, rest = __objRest(_b, ["children", "className", "align"]);
7270
- const headContext = import_react93.default.useContext(HeadContext);
7271
- return headContext ? /* @__PURE__ */ import_react93.default.createElement("th", __spreadProps(__spreadValues({}, rest), {
7272
- className: classNames(
7273
- cellClassNames,
7274
- getHeadCellClassNames(headContext.sticky),
7275
- getAlignClassNames2(align),
7276
- className
7277
- )
7278
- }), children) : /* @__PURE__ */ import_react93.default.createElement("td", __spreadProps(__spreadValues({}, rest), {
7279
- className: classNames(cellClassNames, getBodyCellClassNames(), getAlignClassNames2(align), className)
7280
- }), children);
7281
- };
7282
- var TableSelectCell = (_a) => {
7283
- var _b = _a, { ariaLabel } = _b, props = __objRest(_b, ["ariaLabel"]);
7284
- return /* @__PURE__ */ import_react93.default.createElement(Table.Cell, {
7285
- className: tw("leading-[0px]")
7286
- }, props.type === "radio" ? /* @__PURE__ */ import_react93.default.createElement(RadioButton, __spreadValues({
7287
- "aria-label": ariaLabel
7288
- }, props)) : /* @__PURE__ */ import_react93.default.createElement(Checkbox, __spreadValues({
7289
- "aria-label": ariaLabel
7290
- }, props)));
7291
- };
7292
- var getSortCellButtonClassNames = (align) => tw("group flex items-center gap-x-4 text-grey-50", { "flex-row-reverse": align === "right" });
7293
- var getSortCellIconClassNames = (active) => {
7294
- return tw("text-[9px]", active ? "text-grey-70" : "text-grey-30");
3292
+ var getSortCellButtonClassNames = (align) => tw("group flex items-center gap-x-4 text-grey-50", { "flex-row-reverse": align === "right" });
3293
+ var getSortCellIconClassNames = (active) => {
3294
+ return tw("text-[9px]", active ? "text-grey-70" : "text-grey-30");
7295
3295
  };
7296
3296
  var TableSortCell = (_a) => {
7297
3297
  var _b = _a, { children, direction = "none", onClick } = _b, rest = __objRest(_b, ["children", "direction", "onClick"]);
7298
- return /* @__PURE__ */ import_react93.default.createElement(Table.Cell, __spreadProps(__spreadValues({}, rest), {
3298
+ return /* @__PURE__ */ import_react24.default.createElement(Table.Cell, __spreadProps(__spreadValues({}, rest), {
7299
3299
  "aria-sort": direction
7300
- }), /* @__PURE__ */ import_react93.default.createElement("span", {
3300
+ }), /* @__PURE__ */ import_react24.default.createElement("span", {
7301
3301
  className: getSortCellButtonClassNames(rest.align),
7302
3302
  role: "button",
7303
3303
  tabIndex: -1,
7304
3304
  onClick
7305
- }, children, /* @__PURE__ */ import_react93.default.createElement("div", {
3305
+ }, children, /* @__PURE__ */ import_react24.default.createElement("div", {
7306
3306
  "data-sort-icons": true,
7307
3307
  className: tw("flex flex-col", {
7308
3308
  "invisible group-hover:visible": direction === "none"
7309
3309
  })
7310
- }, /* @__PURE__ */ import_react93.default.createElement(InlineIcon, {
7311
- icon: import_chevronUp3.default,
3310
+ }, /* @__PURE__ */ import_react24.default.createElement(InlineIcon, {
3311
+ icon: import_chevronUp2.default,
7312
3312
  className: getSortCellIconClassNames(direction === "descending")
7313
- }), /* @__PURE__ */ import_react93.default.createElement(InlineIcon, {
7314
- icon: import_chevronDown4.default,
3313
+ }), /* @__PURE__ */ import_react24.default.createElement(InlineIcon, {
3314
+ icon: import_chevronDown3.default,
7315
3315
  className: getSortCellIconClassNames(direction === "ascending")
7316
3316
  }))));
7317
3317
  };
7318
- var Item3 = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ import_react93.default.createElement("div", {
3318
+ var Item3 = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ import_react24.default.createElement("div", {
7319
3319
  className: tw("flex gap-4 items-center")
7320
- }, image && /* @__PURE__ */ import_react93.default.createElement("img", {
3320
+ }, image && /* @__PURE__ */ import_react24.default.createElement("img", {
7321
3321
  src: image,
7322
3322
  alt: imageAlt,
7323
3323
  style: { width: imageSize, height: imageSize }
7324
- }), /* @__PURE__ */ import_react93.default.createElement("div", null, title, caption && /* @__PURE__ */ import_react93.default.createElement(Typography2.Caption, null, caption)));
7325
- Table.Head = import_react93.default.memo(TableHead);
7326
- Table.Body = import_react93.default.memo(TableBody);
7327
- Table.Row = import_react93.default.memo(TableRow);
7328
- Table.Cell = import_react93.default.memo(TableCell);
7329
- Table.SortCell = import_react93.default.memo(TableSortCell);
7330
- Table.SelectCell = import_react93.default.memo(TableSelectCell);
3324
+ }), /* @__PURE__ */ import_react24.default.createElement("div", null, title, caption && /* @__PURE__ */ import_react24.default.createElement(Typography2.Caption, null, caption)));
3325
+ Table.Head = import_react24.default.memo(TableHead);
3326
+ Table.Body = import_react24.default.memo(TableBody);
3327
+ Table.Row = import_react24.default.memo(TableRow);
3328
+ Table.Cell = import_react24.default.memo(TableCell);
3329
+ Table.SortCell = import_react24.default.memo(TableSortCell);
3330
+ Table.SelectCell = import_react24.default.memo(TableSelectCell);
7331
3331
  // Annotate the CommonJS export names for ESM import in node:
7332
3332
  0 && (module.exports = {
7333
3333
  Alert,