@uniformdev/design-system 20.23.0 → 20.23.1-alpha.5
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/esm/index.js +933 -871
- package/dist/index.d.mts +31 -2
- package/dist/index.d.ts +31 -2
- package/dist/index.js +1106 -1031
- package/package.json +4 -4
package/dist/esm/index.js
CHANGED
|
@@ -854,7 +854,7 @@ import { css as css9 } from "@emotion/react";
|
|
|
854
854
|
var VerticalRhythmContainer = (size) => css9`
|
|
855
855
|
display: flex;
|
|
856
856
|
flex-direction: column;
|
|
857
|
-
gap: var(--spacing-${size});
|
|
857
|
+
gap: ${size === "0" ? "0" : `var(--spacing-${size})`};
|
|
858
858
|
`;
|
|
859
859
|
|
|
860
860
|
// src/components/Layout/VerticalRhythm.tsx
|
|
@@ -8167,12 +8167,72 @@ var TakeoverDrawerRenderer = (props) => {
|
|
|
8167
8167
|
return /* @__PURE__ */ jsx71(DrawerRenderer, { ...props, stackId: TAKEOVER_STACK_ID });
|
|
8168
8168
|
};
|
|
8169
8169
|
|
|
8170
|
+
// src/components/FlexiCard/FlexiCard.styles.ts
|
|
8171
|
+
import { css as css56 } from "@emotion/react";
|
|
8172
|
+
var FlexiCardStyles = css56`
|
|
8173
|
+
background: var(--white);
|
|
8174
|
+
border: 1px solid var(--gray-200);
|
|
8175
|
+
border-radius: var(--rounded-2xl);
|
|
8176
|
+
padding: var(--spacing-lg);
|
|
8177
|
+
`;
|
|
8178
|
+
var FlexiCardOverflowStyles = css56`
|
|
8179
|
+
overflow-y: auto;
|
|
8180
|
+
overflow-x: hidden;
|
|
8181
|
+
${scrollbarStyles}
|
|
8182
|
+
`;
|
|
8183
|
+
|
|
8184
|
+
// src/components/FlexiCard/FlexiCard.tsx
|
|
8185
|
+
import { jsx as jsx72, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
|
|
8186
|
+
var FlexiCard = ({ heading, children, width, height, ...props }) => {
|
|
8187
|
+
const cssStyles = [
|
|
8188
|
+
width || height ? [
|
|
8189
|
+
FlexiCardOverflowStyles,
|
|
8190
|
+
{
|
|
8191
|
+
width,
|
|
8192
|
+
height
|
|
8193
|
+
}
|
|
8194
|
+
] : void 0
|
|
8195
|
+
];
|
|
8196
|
+
return /* @__PURE__ */ jsx72("div", { css: FlexiCardStyles, ...props, children: /* @__PURE__ */ jsxs46(VerticalRhythm, { children: [
|
|
8197
|
+
heading,
|
|
8198
|
+
/* @__PURE__ */ jsx72("div", { css: cssStyles, children })
|
|
8199
|
+
] }) });
|
|
8200
|
+
};
|
|
8201
|
+
|
|
8202
|
+
// src/components/FlexiCard/FlexiCardTitle.styles.ts
|
|
8203
|
+
import { css as css57 } from "@emotion/react";
|
|
8204
|
+
var FlexiCardTitleStyles = css57`
|
|
8205
|
+
font-size: var(--fs-base);
|
|
8206
|
+
margin: 0;
|
|
8207
|
+
`;
|
|
8208
|
+
var FlexCardLinkStyles = css57`
|
|
8209
|
+
color: var(--primary-action-default);
|
|
8210
|
+
|
|
8211
|
+
&:hover {
|
|
8212
|
+
color: var(--primary-action-hover);
|
|
8213
|
+
}
|
|
8214
|
+
`;
|
|
8215
|
+
var FlexiCardTitleWrapper = css57`
|
|
8216
|
+
align-items: center;
|
|
8217
|
+
display: flex;
|
|
8218
|
+
gap: var(--spacing-sm);
|
|
8219
|
+
`;
|
|
8220
|
+
|
|
8221
|
+
// src/components/FlexiCard/FlexiCardTitle.tsx
|
|
8222
|
+
import { jsx as jsx73, jsxs as jsxs47 } from "@emotion/react/jsx-runtime";
|
|
8223
|
+
var FlexiCardTitle = ({ icon, heading, ...props }) => {
|
|
8224
|
+
return /* @__PURE__ */ jsxs47("div", { css: FlexiCardTitleWrapper, ...props, children: [
|
|
8225
|
+
icon && /* @__PURE__ */ jsx73(Icon, { icon, size: "1rem", iconColor: "gray300" }),
|
|
8226
|
+
/* @__PURE__ */ jsx73("h2", { css: FlexiCardTitleStyles, children: heading })
|
|
8227
|
+
] });
|
|
8228
|
+
};
|
|
8229
|
+
|
|
8170
8230
|
// src/components/IconButton/IconButton.tsx
|
|
8171
8231
|
import { forwardRef as forwardRef16 } from "react";
|
|
8172
8232
|
|
|
8173
8233
|
// src/components/IconButton/IconButton.styles.ts
|
|
8174
|
-
import { css as
|
|
8175
|
-
var iconButton =
|
|
8234
|
+
import { css as css58 } from "@emotion/react";
|
|
8235
|
+
var iconButton = css58`
|
|
8176
8236
|
padding: 0;
|
|
8177
8237
|
max-width: unset;
|
|
8178
8238
|
justify-content: center;
|
|
@@ -8180,28 +8240,28 @@ var iconButton = css56`
|
|
|
8180
8240
|
height: var(--button-size);
|
|
8181
8241
|
`;
|
|
8182
8242
|
var sizes2 = {
|
|
8183
|
-
xs:
|
|
8243
|
+
xs: css58`
|
|
8184
8244
|
--button-size: 2rem;
|
|
8185
8245
|
`,
|
|
8186
|
-
sm:
|
|
8246
|
+
sm: css58`
|
|
8187
8247
|
--button-size: 2.25rem;
|
|
8188
8248
|
`,
|
|
8189
|
-
md:
|
|
8249
|
+
md: css58`
|
|
8190
8250
|
--button-size: 2.5rem;
|
|
8191
8251
|
`
|
|
8192
8252
|
};
|
|
8193
8253
|
var variants = {
|
|
8194
8254
|
square: null,
|
|
8195
|
-
rounded:
|
|
8255
|
+
rounded: css58`
|
|
8196
8256
|
border-radius: 50%;
|
|
8197
8257
|
`
|
|
8198
8258
|
};
|
|
8199
8259
|
|
|
8200
8260
|
// src/components/IconButton/IconButton.tsx
|
|
8201
|
-
import { jsx as
|
|
8261
|
+
import { jsx as jsx74 } from "@emotion/react/jsx-runtime";
|
|
8202
8262
|
var IconButton = forwardRef16(
|
|
8203
8263
|
({ children, size = "md", variant = "square", ...props }, ref) => {
|
|
8204
|
-
return /* @__PURE__ */
|
|
8264
|
+
return /* @__PURE__ */ jsx74(Button, { ref, css: [iconButton, variants[variant], sizes2[size]], ...props, children });
|
|
8205
8265
|
}
|
|
8206
8266
|
);
|
|
8207
8267
|
IconButton.displayName = "IconButton";
|
|
@@ -8210,8 +8270,8 @@ IconButton.displayName = "IconButton";
|
|
|
8210
8270
|
import { useCallback as useCallback6, useEffect as useEffect8, useState as useState9 } from "react";
|
|
8211
8271
|
|
|
8212
8272
|
// src/components/Image/Image.styles.ts
|
|
8213
|
-
import { css as
|
|
8214
|
-
var imageWrapper =
|
|
8273
|
+
import { css as css59 } from "@emotion/react";
|
|
8274
|
+
var imageWrapper = css59`
|
|
8215
8275
|
position: relative;
|
|
8216
8276
|
display: inline-flex;
|
|
8217
8277
|
flex-direction: column;
|
|
@@ -8219,10 +8279,10 @@ var imageWrapper = css57`
|
|
|
8219
8279
|
max-width: 100%;
|
|
8220
8280
|
max-height: 100%;
|
|
8221
8281
|
`;
|
|
8222
|
-
var imageWrapperLoading =
|
|
8282
|
+
var imageWrapperLoading = css59`
|
|
8223
8283
|
animation: ${skeletonLoading} var(--duration-slow) linear infinite alternate;
|
|
8224
8284
|
`;
|
|
8225
|
-
var img =
|
|
8285
|
+
var img = css59`
|
|
8226
8286
|
object-fit: contain;
|
|
8227
8287
|
max-width: 100%;
|
|
8228
8288
|
max-height: 100%;
|
|
@@ -8230,17 +8290,17 @@ var img = css57`
|
|
|
8230
8290
|
opacity: var(--opacity-0);
|
|
8231
8291
|
margin: 0 auto;
|
|
8232
8292
|
`;
|
|
8233
|
-
var imgLoading =
|
|
8293
|
+
var imgLoading = css59`
|
|
8234
8294
|
opacity: 0;
|
|
8235
8295
|
`;
|
|
8236
|
-
var imgLoaded =
|
|
8296
|
+
var imgLoaded = css59`
|
|
8237
8297
|
animation: ${fadeIn} var(--duration-fast) var(--timing-ease-out) forwards;
|
|
8238
8298
|
opacity: 1;
|
|
8239
8299
|
`;
|
|
8240
|
-
var brokenImage =
|
|
8300
|
+
var brokenImage = css59`
|
|
8241
8301
|
height: 160px;
|
|
8242
8302
|
`;
|
|
8243
|
-
var brokenImageMessage =
|
|
8303
|
+
var brokenImageMessage = css59`
|
|
8244
8304
|
position: absolute;
|
|
8245
8305
|
bottom: var(--spacing-xs);
|
|
8246
8306
|
left: var(--spacing-xs);
|
|
@@ -8249,21 +8309,21 @@ var brokenImageMessage = css57`
|
|
|
8249
8309
|
padding-inline: var(--spacing-xs);
|
|
8250
8310
|
font-size: var(--fs-sm);
|
|
8251
8311
|
`;
|
|
8252
|
-
var variantFillImageWrapper =
|
|
8312
|
+
var variantFillImageWrapper = css59`
|
|
8253
8313
|
display: flex;
|
|
8254
8314
|
justify-content: center;
|
|
8255
8315
|
height: 100%;
|
|
8256
8316
|
width: 100%;
|
|
8257
8317
|
`;
|
|
8258
|
-
var variantFillImageImg =
|
|
8318
|
+
var variantFillImageImg = css59`
|
|
8259
8319
|
height: inherit;
|
|
8260
8320
|
width: inherit;
|
|
8261
8321
|
`;
|
|
8262
8322
|
|
|
8263
8323
|
// src/components/Image/ImageBroken.tsx
|
|
8264
|
-
import { jsx as
|
|
8324
|
+
import { jsx as jsx75, jsxs as jsxs48 } from "@emotion/react/jsx-runtime";
|
|
8265
8325
|
var ImageBroken = ({ width, height, ...props }) => {
|
|
8266
|
-
return /* @__PURE__ */
|
|
8326
|
+
return /* @__PURE__ */ jsxs48(
|
|
8267
8327
|
"svg",
|
|
8268
8328
|
{
|
|
8269
8329
|
role: "img",
|
|
@@ -8276,11 +8336,11 @@ var ImageBroken = ({ width, height, ...props }) => {
|
|
|
8276
8336
|
"data-testid": "broken-image",
|
|
8277
8337
|
...props,
|
|
8278
8338
|
children: [
|
|
8279
|
-
/* @__PURE__ */
|
|
8280
|
-
/* @__PURE__ */
|
|
8281
|
-
/* @__PURE__ */
|
|
8282
|
-
/* @__PURE__ */
|
|
8283
|
-
/* @__PURE__ */
|
|
8339
|
+
/* @__PURE__ */ jsx75("rect", { width: "214", height: "214", fill: "#F9FAFB" }),
|
|
8340
|
+
/* @__PURE__ */ jsx75("rect", { width: "214", height: "214", fill: "url(#pattern0)" }),
|
|
8341
|
+
/* @__PURE__ */ jsxs48("defs", { children: [
|
|
8342
|
+
/* @__PURE__ */ jsx75("pattern", { id: "pattern0", patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsx75("use", { xlinkHref: "#image0_761_4353", transform: "scale(0.0025)" }) }),
|
|
8343
|
+
/* @__PURE__ */ jsx75(
|
|
8284
8344
|
"image",
|
|
8285
8345
|
{
|
|
8286
8346
|
id: "image0_761_4353",
|
|
@@ -8296,7 +8356,7 @@ var ImageBroken = ({ width, height, ...props }) => {
|
|
|
8296
8356
|
};
|
|
8297
8357
|
|
|
8298
8358
|
// src/components/Image/Image.tsx
|
|
8299
|
-
import { jsx as
|
|
8359
|
+
import { jsx as jsx76, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
|
|
8300
8360
|
var MIN_LOADING_MS = 100;
|
|
8301
8361
|
function Image({
|
|
8302
8362
|
alt,
|
|
@@ -8346,7 +8406,7 @@ function Image({
|
|
|
8346
8406
|
setLoadErrorText("The value you provided is not a valid image URL");
|
|
8347
8407
|
setLoading(false);
|
|
8348
8408
|
};
|
|
8349
|
-
return /* @__PURE__ */
|
|
8409
|
+
return /* @__PURE__ */ jsxs49(
|
|
8350
8410
|
"span",
|
|
8351
8411
|
{
|
|
8352
8412
|
className,
|
|
@@ -8356,7 +8416,7 @@ function Image({
|
|
|
8356
8416
|
variant === "fill-container" ? variantFillImageWrapper : null
|
|
8357
8417
|
],
|
|
8358
8418
|
children: [
|
|
8359
|
-
src && !loadErrorText ? /* @__PURE__ */
|
|
8419
|
+
src && !loadErrorText ? /* @__PURE__ */ jsx76(
|
|
8360
8420
|
"img",
|
|
8361
8421
|
{
|
|
8362
8422
|
...imgAttribs,
|
|
@@ -8375,7 +8435,7 @@ function Image({
|
|
|
8375
8435
|
onError: handleErrorEvent
|
|
8376
8436
|
}
|
|
8377
8437
|
) : null,
|
|
8378
|
-
src && loadErrorText ? /* @__PURE__ */
|
|
8438
|
+
src && loadErrorText ? /* @__PURE__ */ jsxs49(
|
|
8379
8439
|
"span",
|
|
8380
8440
|
{
|
|
8381
8441
|
style: {
|
|
@@ -8384,14 +8444,14 @@ function Image({
|
|
|
8384
8444
|
...variant === "fill-container" ? {} : { width, height }
|
|
8385
8445
|
},
|
|
8386
8446
|
children: [
|
|
8387
|
-
/* @__PURE__ */
|
|
8447
|
+
/* @__PURE__ */ jsx76(
|
|
8388
8448
|
ImageBroken,
|
|
8389
8449
|
{
|
|
8390
8450
|
css: [brokenImage, img, imgLoaded],
|
|
8391
8451
|
"data-testid": "broken-image"
|
|
8392
8452
|
}
|
|
8393
8453
|
),
|
|
8394
|
-
/* @__PURE__ */
|
|
8454
|
+
/* @__PURE__ */ jsx76(ErrorMessage, { message: loadErrorText, css: brokenImageMessage, truncated: true })
|
|
8395
8455
|
]
|
|
8396
8456
|
}
|
|
8397
8457
|
) : null
|
|
@@ -8401,13 +8461,13 @@ function Image({
|
|
|
8401
8461
|
}
|
|
8402
8462
|
|
|
8403
8463
|
// src/components/Tiles/CreateTeamIntegrationTile.tsx
|
|
8404
|
-
import { css as
|
|
8464
|
+
import { css as css61 } from "@emotion/react";
|
|
8405
8465
|
import { CgAdd as CgAdd2 } from "@react-icons/all-files/cg/CgAdd";
|
|
8406
8466
|
import { CgChevronRight as CgChevronRight2 } from "@react-icons/all-files/cg/CgChevronRight";
|
|
8407
8467
|
|
|
8408
8468
|
// src/components/Tiles/styles/IntegrationTile.styles.ts
|
|
8409
|
-
import { css as
|
|
8410
|
-
var IntegrationTileContainer =
|
|
8469
|
+
import { css as css60 } from "@emotion/react";
|
|
8470
|
+
var IntegrationTileContainer = css60`
|
|
8411
8471
|
align-items: center;
|
|
8412
8472
|
box-sizing: border-box;
|
|
8413
8473
|
border-radius: var(--rounded-base);
|
|
@@ -8438,22 +8498,22 @@ var IntegrationTileContainer = css58`
|
|
|
8438
8498
|
}
|
|
8439
8499
|
}
|
|
8440
8500
|
`;
|
|
8441
|
-
var IntegrationTileBtnDashedBorder =
|
|
8501
|
+
var IntegrationTileBtnDashedBorder = css60`
|
|
8442
8502
|
border: 1px dashed var(--gray-800);
|
|
8443
8503
|
`;
|
|
8444
|
-
var IntegrationTileTitle =
|
|
8504
|
+
var IntegrationTileTitle = css60`
|
|
8445
8505
|
display: block;
|
|
8446
8506
|
font-weight: var(--fw-bold);
|
|
8447
8507
|
margin: 0 0 var(--spacing-base);
|
|
8448
8508
|
max-width: 13rem;
|
|
8449
8509
|
`;
|
|
8450
|
-
var IntegrationTitleLogo =
|
|
8510
|
+
var IntegrationTitleLogo = css60`
|
|
8451
8511
|
display: block;
|
|
8452
8512
|
max-width: 10rem;
|
|
8453
8513
|
max-height: 4rem;
|
|
8454
8514
|
margin: 0 auto;
|
|
8455
8515
|
`;
|
|
8456
|
-
var IntegrationTileName =
|
|
8516
|
+
var IntegrationTileName = css60`
|
|
8457
8517
|
color: var(--gray-500);
|
|
8458
8518
|
display: -webkit-box;
|
|
8459
8519
|
-webkit-line-clamp: 1;
|
|
@@ -8466,7 +8526,7 @@ var IntegrationTileName = css58`
|
|
|
8466
8526
|
position: absolute;
|
|
8467
8527
|
bottom: calc(var(--spacing-base) * 3.8);
|
|
8468
8528
|
`;
|
|
8469
|
-
var IntegrationAddedText =
|
|
8529
|
+
var IntegrationAddedText = css60`
|
|
8470
8530
|
align-items: center;
|
|
8471
8531
|
background: var(--brand-secondary-3);
|
|
8472
8532
|
border-radius: 0 var(--rounded-md) 0 var(--rounded-md);
|
|
@@ -8481,7 +8541,7 @@ var IntegrationAddedText = css58`
|
|
|
8481
8541
|
top: 0;
|
|
8482
8542
|
right: 0;
|
|
8483
8543
|
`;
|
|
8484
|
-
var IntegrationCustomBadgeText = (theme) =>
|
|
8544
|
+
var IntegrationCustomBadgeText = (theme) => css60`
|
|
8485
8545
|
align-items: center;
|
|
8486
8546
|
border-radius: var(--rounded-sm) 0 var(--rounded-sm) 0;
|
|
8487
8547
|
background: ${theme === "gray" ? "var(--brand-secondary-2)" : "var(--typography-base)"};
|
|
@@ -8495,26 +8555,26 @@ var IntegrationCustomBadgeText = (theme) => css58`
|
|
|
8495
8555
|
top: 0;
|
|
8496
8556
|
left: 0;
|
|
8497
8557
|
`;
|
|
8498
|
-
var IntegrationAuthorBadgeIcon =
|
|
8558
|
+
var IntegrationAuthorBadgeIcon = css60`
|
|
8499
8559
|
position: absolute;
|
|
8500
8560
|
bottom: var(--spacing-sm);
|
|
8501
8561
|
right: var(--spacing-xs);
|
|
8502
8562
|
max-height: 1rem;
|
|
8503
8563
|
`;
|
|
8504
|
-
var IntegrationTitleFakeButton =
|
|
8564
|
+
var IntegrationTitleFakeButton = css60`
|
|
8505
8565
|
font-size: var(--fs-xs);
|
|
8506
8566
|
gap: var(--spacing-sm);
|
|
8507
8567
|
padding: var(--spacing-sm) var(--spacing-base);
|
|
8508
8568
|
text-transform: uppercase;
|
|
8509
8569
|
`;
|
|
8510
|
-
var IntegrationTileFloatingButton =
|
|
8570
|
+
var IntegrationTileFloatingButton = css60`
|
|
8511
8571
|
position: absolute;
|
|
8512
8572
|
bottom: var(--spacing-base);
|
|
8513
8573
|
gap: var(--spacing-sm);
|
|
8514
8574
|
font-size: var(--fs-xs);
|
|
8515
8575
|
overflow: hidden;
|
|
8516
8576
|
`;
|
|
8517
|
-
var IntegrationTileFloatingButtonMessage = (clicked) =>
|
|
8577
|
+
var IntegrationTileFloatingButtonMessage = (clicked) => css60`
|
|
8518
8578
|
strong,
|
|
8519
8579
|
span:first-of-type {
|
|
8520
8580
|
transition: opacity var(--duration-fast) var(--timing-ease-out);
|
|
@@ -8535,7 +8595,7 @@ var IntegrationTileFloatingButtonMessage = (clicked) => css58`
|
|
|
8535
8595
|
`;
|
|
8536
8596
|
|
|
8537
8597
|
// src/components/Tiles/CreateTeamIntegrationTile.tsx
|
|
8538
|
-
import { jsx as
|
|
8598
|
+
import { jsx as jsx77, jsxs as jsxs50 } from "@emotion/react/jsx-runtime";
|
|
8539
8599
|
var CreateTeamIntegrationTile = ({
|
|
8540
8600
|
title = "Create a custom integration for your team",
|
|
8541
8601
|
buttonText = "Add Integration",
|
|
@@ -8543,9 +8603,9 @@ var CreateTeamIntegrationTile = ({
|
|
|
8543
8603
|
asDeepLink = false,
|
|
8544
8604
|
...props
|
|
8545
8605
|
}) => {
|
|
8546
|
-
return /* @__PURE__ */
|
|
8547
|
-
/* @__PURE__ */
|
|
8548
|
-
/* @__PURE__ */
|
|
8606
|
+
return /* @__PURE__ */ jsxs50("div", { css: [IntegrationTileContainer, IntegrationTileBtnDashedBorder], ...props, children: [
|
|
8607
|
+
/* @__PURE__ */ jsx77("span", { css: IntegrationTileTitle, title, children: title }),
|
|
8608
|
+
/* @__PURE__ */ jsxs50(
|
|
8549
8609
|
Button,
|
|
8550
8610
|
{
|
|
8551
8611
|
buttonType: "tertiary",
|
|
@@ -8555,23 +8615,23 @@ var CreateTeamIntegrationTile = ({
|
|
|
8555
8615
|
css: IntegrationTitleFakeButton,
|
|
8556
8616
|
children: [
|
|
8557
8617
|
buttonText,
|
|
8558
|
-
asDeepLink ? /* @__PURE__ */
|
|
8618
|
+
asDeepLink ? /* @__PURE__ */ jsx77(
|
|
8559
8619
|
Icon,
|
|
8560
8620
|
{
|
|
8561
8621
|
icon: CgChevronRight2,
|
|
8562
8622
|
iconColor: "currentColor",
|
|
8563
8623
|
size: 20,
|
|
8564
|
-
css:
|
|
8624
|
+
css: css61`
|
|
8565
8625
|
order: 1;
|
|
8566
8626
|
`
|
|
8567
8627
|
}
|
|
8568
|
-
) : /* @__PURE__ */
|
|
8628
|
+
) : /* @__PURE__ */ jsx77(
|
|
8569
8629
|
Icon,
|
|
8570
8630
|
{
|
|
8571
8631
|
icon: CgAdd2,
|
|
8572
8632
|
iconColor: "currentColor",
|
|
8573
8633
|
size: 16,
|
|
8574
|
-
css:
|
|
8634
|
+
css: css61`
|
|
8575
8635
|
order: -1;
|
|
8576
8636
|
`
|
|
8577
8637
|
}
|
|
@@ -8586,31 +8646,31 @@ var CreateTeamIntegrationTile = ({
|
|
|
8586
8646
|
import { CgCheck as CgCheck2 } from "@react-icons/all-files/cg/CgCheck";
|
|
8587
8647
|
import { CgLock } from "@react-icons/all-files/cg/CgLock";
|
|
8588
8648
|
import { CgSandClock } from "@react-icons/all-files/cg/CgSandClock";
|
|
8589
|
-
import { jsx as
|
|
8649
|
+
import { jsx as jsx78, jsxs as jsxs51 } from "@emotion/react/jsx-runtime";
|
|
8590
8650
|
var IntegrationedAddedBadge = ({ text = "Added" }) => {
|
|
8591
|
-
return /* @__PURE__ */
|
|
8592
|
-
/* @__PURE__ */
|
|
8651
|
+
return /* @__PURE__ */ jsxs51("span", { "data-testid": "integration-icon-installed", css: IntegrationAddedText, children: [
|
|
8652
|
+
/* @__PURE__ */ jsx78(Icon, { icon: CgCheck2, iconColor: "currentColor" }),
|
|
8593
8653
|
text
|
|
8594
8654
|
] });
|
|
8595
8655
|
};
|
|
8596
8656
|
var IntegrationCustomBadge = ({ text = "Custom" }) => {
|
|
8597
|
-
return /* @__PURE__ */
|
|
8657
|
+
return /* @__PURE__ */ jsx78("span", { "data-testid": "integration-is-private", css: IntegrationCustomBadgeText("gray"), children: text });
|
|
8598
8658
|
};
|
|
8599
8659
|
var IntegrationPremiumBadge = ({ text = "Premium" }) => {
|
|
8600
|
-
return /* @__PURE__ */
|
|
8601
|
-
/* @__PURE__ */
|
|
8660
|
+
return /* @__PURE__ */ jsxs51("span", { css: IntegrationCustomBadgeText("blue"), children: [
|
|
8661
|
+
/* @__PURE__ */ jsx78(Icon, { icon: CgLock, iconColor: "currentColor", size: 12 }),
|
|
8602
8662
|
text
|
|
8603
8663
|
] });
|
|
8604
8664
|
};
|
|
8605
8665
|
var IntegrationComingSoonBadge = ({ text = "Coming soon" }) => {
|
|
8606
|
-
return /* @__PURE__ */
|
|
8607
|
-
/* @__PURE__ */
|
|
8666
|
+
return /* @__PURE__ */ jsxs51("span", { css: IntegrationCustomBadgeText("blue"), children: [
|
|
8667
|
+
/* @__PURE__ */ jsx78(Icon, { icon: CgSandClock, iconColor: "currentColor", size: 12 }),
|
|
8608
8668
|
text
|
|
8609
8669
|
] });
|
|
8610
8670
|
};
|
|
8611
8671
|
|
|
8612
8672
|
// src/components/Tiles/ResolveIcon.tsx
|
|
8613
|
-
import { jsx as
|
|
8673
|
+
import { jsx as jsx79 } from "@emotion/react/jsx-runtime";
|
|
8614
8674
|
var ResolveIcon = ({ icon, name, styleType = "logo", ...props }) => {
|
|
8615
8675
|
const CompIcon = icon && typeof icon !== "string" ? icon : null;
|
|
8616
8676
|
const mapClassName = {
|
|
@@ -8618,13 +8678,13 @@ var ResolveIcon = ({ icon, name, styleType = "logo", ...props }) => {
|
|
|
8618
8678
|
logo: IntegrationTitleLogo
|
|
8619
8679
|
};
|
|
8620
8680
|
if (icon) {
|
|
8621
|
-
return CompIcon ? /* @__PURE__ */
|
|
8681
|
+
return CompIcon ? /* @__PURE__ */ jsx79(CompIcon, { css: mapClassName[styleType], ...props }) : /* @__PURE__ */ jsx79("img", { src: icon, alt: name, css: mapClassName[styleType], ...props });
|
|
8622
8682
|
}
|
|
8623
8683
|
return null;
|
|
8624
8684
|
};
|
|
8625
8685
|
|
|
8626
8686
|
// src/components/Tiles/EditTeamIntegrationTile.tsx
|
|
8627
|
-
import { jsx as
|
|
8687
|
+
import { jsx as jsx80, jsxs as jsxs52 } from "@emotion/react/jsx-runtime";
|
|
8628
8688
|
var EditTeamIntegrationTile = ({
|
|
8629
8689
|
id,
|
|
8630
8690
|
icon,
|
|
@@ -8633,17 +8693,17 @@ var EditTeamIntegrationTile = ({
|
|
|
8633
8693
|
isPublic,
|
|
8634
8694
|
canEdit = false
|
|
8635
8695
|
}) => {
|
|
8636
|
-
return /* @__PURE__ */
|
|
8696
|
+
return /* @__PURE__ */ jsxs52(
|
|
8637
8697
|
"div",
|
|
8638
8698
|
{
|
|
8639
8699
|
css: IntegrationTileContainer,
|
|
8640
8700
|
"data-testid": "configure-integration-container",
|
|
8641
8701
|
"integration-id": `${id.toLocaleLowerCase()}`,
|
|
8642
8702
|
children: [
|
|
8643
|
-
/* @__PURE__ */
|
|
8644
|
-
/* @__PURE__ */
|
|
8645
|
-
!isPublic ? /* @__PURE__ */
|
|
8646
|
-
canEdit ? /* @__PURE__ */
|
|
8703
|
+
/* @__PURE__ */ jsx80(ResolveIcon, { icon, name, "data-testid": "integration-logo" }),
|
|
8704
|
+
/* @__PURE__ */ jsx80("span", { css: IntegrationTileName, "data-testid": "integration-card-name", children: name }),
|
|
8705
|
+
!isPublic ? /* @__PURE__ */ jsx80(IntegrationCustomBadge, {}) : null,
|
|
8706
|
+
canEdit ? /* @__PURE__ */ jsx80(
|
|
8647
8707
|
Button,
|
|
8648
8708
|
{
|
|
8649
8709
|
buttonType: "unimportant",
|
|
@@ -8661,10 +8721,10 @@ var EditTeamIntegrationTile = ({
|
|
|
8661
8721
|
};
|
|
8662
8722
|
|
|
8663
8723
|
// src/components/Tiles/IntegrationComingSoon.tsx
|
|
8664
|
-
import { css as
|
|
8724
|
+
import { css as css62 } from "@emotion/react";
|
|
8665
8725
|
import { CgHeart } from "@react-icons/all-files/cg/CgHeart";
|
|
8666
8726
|
import { useEffect as useEffect9, useState as useState10 } from "react";
|
|
8667
|
-
import { jsx as
|
|
8727
|
+
import { jsx as jsx81, jsxs as jsxs53 } from "@emotion/react/jsx-runtime";
|
|
8668
8728
|
var IntegrationComingSoon = ({
|
|
8669
8729
|
name,
|
|
8670
8730
|
icon,
|
|
@@ -8686,17 +8746,17 @@ var IntegrationComingSoon = ({
|
|
|
8686
8746
|
};
|
|
8687
8747
|
}
|
|
8688
8748
|
}, [upVote, setUpVote, timing]);
|
|
8689
|
-
return /* @__PURE__ */
|
|
8749
|
+
return /* @__PURE__ */ jsxs53(
|
|
8690
8750
|
"div",
|
|
8691
8751
|
{
|
|
8692
8752
|
css: IntegrationTileContainer,
|
|
8693
8753
|
"data-testid": `coming-soon-${id.toLowerCase()}-integration`,
|
|
8694
8754
|
...props,
|
|
8695
8755
|
children: [
|
|
8696
|
-
/* @__PURE__ */
|
|
8697
|
-
/* @__PURE__ */
|
|
8698
|
-
/* @__PURE__ */
|
|
8699
|
-
/* @__PURE__ */
|
|
8756
|
+
/* @__PURE__ */ jsx81(IntegrationComingSoonBadge, {}),
|
|
8757
|
+
/* @__PURE__ */ jsx81(ResolveIcon, { icon, name }),
|
|
8758
|
+
/* @__PURE__ */ jsx81("span", { css: IntegrationTileName, title: name, children: name }),
|
|
8759
|
+
/* @__PURE__ */ jsxs53(
|
|
8700
8760
|
Button,
|
|
8701
8761
|
{
|
|
8702
8762
|
buttonType: "unimportant",
|
|
@@ -8706,19 +8766,19 @@ var IntegrationComingSoon = ({
|
|
|
8706
8766
|
role: "link",
|
|
8707
8767
|
css: [IntegrationTileFloatingButton, IntegrationTileFloatingButtonMessage(upVote)],
|
|
8708
8768
|
children: [
|
|
8709
|
-
/* @__PURE__ */
|
|
8710
|
-
/* @__PURE__ */
|
|
8769
|
+
/* @__PURE__ */ jsx81("strong", { children: "+1" }),
|
|
8770
|
+
/* @__PURE__ */ jsx81(
|
|
8711
8771
|
"span",
|
|
8712
8772
|
{
|
|
8713
|
-
css:
|
|
8773
|
+
css: css62`
|
|
8714
8774
|
text-transform: uppercase;
|
|
8715
8775
|
color: var(--gray-500);
|
|
8716
8776
|
`,
|
|
8717
8777
|
children: "(I want this)"
|
|
8718
8778
|
}
|
|
8719
8779
|
),
|
|
8720
|
-
/* @__PURE__ */
|
|
8721
|
-
/* @__PURE__ */
|
|
8780
|
+
/* @__PURE__ */ jsxs53("span", { "aria-hidden": !upVote, children: [
|
|
8781
|
+
/* @__PURE__ */ jsx81(Icon, { icon: CgHeart, iconColor: "currentColor", size: 18 }),
|
|
8722
8782
|
"Thanks!"
|
|
8723
8783
|
] })
|
|
8724
8784
|
]
|
|
@@ -8730,8 +8790,8 @@ var IntegrationComingSoon = ({
|
|
|
8730
8790
|
};
|
|
8731
8791
|
|
|
8732
8792
|
// src/components/Tiles/styles/IntegrationLoadingTile.styles.ts
|
|
8733
|
-
import { css as
|
|
8734
|
-
var IntegrationLoadingTileContainer =
|
|
8793
|
+
import { css as css63 } from "@emotion/react";
|
|
8794
|
+
var IntegrationLoadingTileContainer = css63`
|
|
8735
8795
|
align-items: center;
|
|
8736
8796
|
box-sizing: border-box;
|
|
8737
8797
|
border-radius: var(--rounded-base);
|
|
@@ -8758,39 +8818,39 @@ var IntegrationLoadingTileContainer = css61`
|
|
|
8758
8818
|
}
|
|
8759
8819
|
}
|
|
8760
8820
|
`;
|
|
8761
|
-
var IntegrationLoadingTileImg =
|
|
8821
|
+
var IntegrationLoadingTileImg = css63`
|
|
8762
8822
|
width: 10rem;
|
|
8763
8823
|
height: 4rem;
|
|
8764
8824
|
margin: 0 auto;
|
|
8765
8825
|
`;
|
|
8766
|
-
var IntegrationLoadingTileText =
|
|
8826
|
+
var IntegrationLoadingTileText = css63`
|
|
8767
8827
|
width: 5rem;
|
|
8768
8828
|
height: var(--spacing-sm);
|
|
8769
8829
|
margin: var(--spacing-sm) 0;
|
|
8770
8830
|
`;
|
|
8771
|
-
var IntegrationLoadingFrame =
|
|
8831
|
+
var IntegrationLoadingFrame = css63`
|
|
8772
8832
|
animation: ${skeletonLoading} 1s linear infinite alternate;
|
|
8773
8833
|
border-radius: var(--rounded-base);
|
|
8774
8834
|
`;
|
|
8775
8835
|
|
|
8776
8836
|
// src/components/Tiles/IntegrationLoadingTile.tsx
|
|
8777
|
-
import { Fragment as Fragment8, jsx as
|
|
8837
|
+
import { Fragment as Fragment8, jsx as jsx82, jsxs as jsxs54 } from "@emotion/react/jsx-runtime";
|
|
8778
8838
|
var IntegrationLoadingTile = ({ count = 1 }) => {
|
|
8779
8839
|
const componentCount = Array.from(Array(count).keys());
|
|
8780
|
-
return /* @__PURE__ */
|
|
8781
|
-
/* @__PURE__ */
|
|
8782
|
-
/* @__PURE__ */
|
|
8840
|
+
return /* @__PURE__ */ jsx82(Fragment8, { children: componentCount.map((i) => /* @__PURE__ */ jsxs54("div", { css: IntegrationLoadingTileContainer, children: [
|
|
8841
|
+
/* @__PURE__ */ jsx82("div", { css: [IntegrationLoadingTileImg, IntegrationLoadingFrame], role: "presentation" }),
|
|
8842
|
+
/* @__PURE__ */ jsx82("div", { css: [IntegrationLoadingTileText, IntegrationLoadingFrame] })
|
|
8783
8843
|
] }, i)) });
|
|
8784
8844
|
};
|
|
8785
8845
|
|
|
8786
8846
|
// src/components/Tiles/styles/IntegrationModalIcon.styles.ts
|
|
8787
|
-
import { css as
|
|
8788
|
-
var IntegrationModalIconContainer =
|
|
8847
|
+
import { css as css64 } from "@emotion/react";
|
|
8848
|
+
var IntegrationModalIconContainer = css64`
|
|
8789
8849
|
position: relative;
|
|
8790
8850
|
width: 50px;
|
|
8791
8851
|
margin-bottom: var(--spacing-base);
|
|
8792
8852
|
`;
|
|
8793
|
-
var IntegrationModalImage =
|
|
8853
|
+
var IntegrationModalImage = css64`
|
|
8794
8854
|
position: absolute;
|
|
8795
8855
|
inset: 0;
|
|
8796
8856
|
margin: auto;
|
|
@@ -8799,7 +8859,7 @@ var IntegrationModalImage = css62`
|
|
|
8799
8859
|
`;
|
|
8800
8860
|
|
|
8801
8861
|
// src/components/Tiles/IntegrationModalIcon.tsx
|
|
8802
|
-
import { jsx as
|
|
8862
|
+
import { jsx as jsx83, jsxs as jsxs55 } from "@emotion/react/jsx-runtime";
|
|
8803
8863
|
var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
|
|
8804
8864
|
const CompIcon = icon && typeof icon !== "string" ? icon : null;
|
|
8805
8865
|
let iconSrc = void 0;
|
|
@@ -8815,9 +8875,9 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
|
|
|
8815
8875
|
}
|
|
8816
8876
|
}
|
|
8817
8877
|
}
|
|
8818
|
-
return /* @__PURE__ */
|
|
8819
|
-
/* @__PURE__ */
|
|
8820
|
-
/* @__PURE__ */
|
|
8878
|
+
return /* @__PURE__ */ jsxs55("div", { css: IntegrationModalIconContainer, children: [
|
|
8879
|
+
/* @__PURE__ */ jsxs55("svg", { width: "49", height: "57", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", children: [
|
|
8880
|
+
/* @__PURE__ */ jsx83(
|
|
8821
8881
|
"path",
|
|
8822
8882
|
{
|
|
8823
8883
|
d: "m24.367 1.813 22.786 13.322V41.78L24.367 55.102 1.581 41.78V15.135L24.367 1.814Z",
|
|
@@ -8826,12 +8886,12 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
|
|
|
8826
8886
|
strokeWidth: "2"
|
|
8827
8887
|
}
|
|
8828
8888
|
),
|
|
8829
|
-
/* @__PURE__ */
|
|
8830
|
-
/* @__PURE__ */
|
|
8831
|
-
/* @__PURE__ */
|
|
8889
|
+
/* @__PURE__ */ jsx83("defs", { children: /* @__PURE__ */ jsxs55("linearGradient", { id: "a", x1: "41.353", y1: "49.107", x2: "8.048", y2: "4.478", gradientUnits: "userSpaceOnUse", children: [
|
|
8890
|
+
/* @__PURE__ */ jsx83("stop", { stopColor: "#1768B2" }),
|
|
8891
|
+
/* @__PURE__ */ jsx83("stop", { offset: "1", stopColor: "#B3EFE4" })
|
|
8832
8892
|
] }) })
|
|
8833
8893
|
] }),
|
|
8834
|
-
CompIcon ? /* @__PURE__ */
|
|
8894
|
+
CompIcon ? /* @__PURE__ */ jsx83(CompIcon, { role: "img", css: IntegrationModalImage, ...imgProps }) : iconSrc ? /* @__PURE__ */ jsx83(
|
|
8835
8895
|
"img",
|
|
8836
8896
|
{
|
|
8837
8897
|
src: iconSrc,
|
|
@@ -8845,7 +8905,7 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
|
|
|
8845
8905
|
};
|
|
8846
8906
|
|
|
8847
8907
|
// src/components/Tiles/IntegrationTile.tsx
|
|
8848
|
-
import { jsx as
|
|
8908
|
+
import { jsx as jsx84, jsxs as jsxs56 } from "@emotion/react/jsx-runtime";
|
|
8849
8909
|
var IntegrationTile = ({
|
|
8850
8910
|
id,
|
|
8851
8911
|
icon,
|
|
@@ -8857,7 +8917,7 @@ var IntegrationTile = ({
|
|
|
8857
8917
|
authorIcon,
|
|
8858
8918
|
...btnProps
|
|
8859
8919
|
}) => {
|
|
8860
|
-
return /* @__PURE__ */
|
|
8920
|
+
return /* @__PURE__ */ jsxs56(
|
|
8861
8921
|
"button",
|
|
8862
8922
|
{
|
|
8863
8923
|
type: "button",
|
|
@@ -8867,12 +8927,12 @@ var IntegrationTile = ({
|
|
|
8867
8927
|
"aria-label": name,
|
|
8868
8928
|
...btnProps,
|
|
8869
8929
|
children: [
|
|
8870
|
-
/* @__PURE__ */
|
|
8871
|
-
/* @__PURE__ */
|
|
8872
|
-
isInstalled ? /* @__PURE__ */
|
|
8873
|
-
requiedEntitlement && isPublic ? /* @__PURE__ */
|
|
8874
|
-
!isPublic ? /* @__PURE__ */
|
|
8875
|
-
authorIcon ? /* @__PURE__ */
|
|
8930
|
+
/* @__PURE__ */ jsx84(ResolveIcon, { icon, name }),
|
|
8931
|
+
/* @__PURE__ */ jsx84("span", { css: IntegrationTileName, title: name, children: name }),
|
|
8932
|
+
isInstalled ? /* @__PURE__ */ jsx84(IntegrationedAddedBadge, {}) : null,
|
|
8933
|
+
requiedEntitlement && isPublic ? /* @__PURE__ */ jsx84(IntegrationPremiumBadge, {}) : null,
|
|
8934
|
+
!isPublic ? /* @__PURE__ */ jsx84(IntegrationCustomBadge, {}) : null,
|
|
8935
|
+
authorIcon ? /* @__PURE__ */ jsx84(ResolveIcon, { icon: authorIcon, name }) : null
|
|
8876
8936
|
]
|
|
8877
8937
|
}
|
|
8878
8938
|
);
|
|
@@ -8882,11 +8942,11 @@ var IntegrationTile = ({
|
|
|
8882
8942
|
import { forwardRef as forwardRef17 } from "react";
|
|
8883
8943
|
|
|
8884
8944
|
// src/components/Tiles/styles/Tile.styles.ts
|
|
8885
|
-
import { css as
|
|
8945
|
+
import { css as css65 } from "@emotion/react";
|
|
8886
8946
|
var tileBorderSize = "1px";
|
|
8887
8947
|
var tileBorderRadius = "var(--rounded-2xl)";
|
|
8888
8948
|
var tileBorderColor = "var(--gray-300)";
|
|
8889
|
-
var Tile =
|
|
8949
|
+
var Tile = css65`
|
|
8890
8950
|
background: var(--white);
|
|
8891
8951
|
cursor: pointer;
|
|
8892
8952
|
border: ${tileBorderSize} solid var(--tile-border-color, ${tileBorderColor});
|
|
@@ -8917,26 +8977,26 @@ var Tile = css63`
|
|
|
8917
8977
|
}
|
|
8918
8978
|
}
|
|
8919
8979
|
`;
|
|
8920
|
-
var LinkTile =
|
|
8980
|
+
var LinkTile = css65`
|
|
8921
8981
|
text-decoration: none;
|
|
8922
8982
|
color: currentColor;
|
|
8923
8983
|
`;
|
|
8924
|
-
var TileIsSelected =
|
|
8984
|
+
var TileIsSelected = css65`
|
|
8925
8985
|
border: calc(${tileBorderSize} + 1px) solid var(--primary-action-active);
|
|
8926
8986
|
z-index: 1; // Used to elevate active state border over other Tile borders
|
|
8927
8987
|
`;
|
|
8928
|
-
var TileHorizontal =
|
|
8988
|
+
var TileHorizontal = css65`
|
|
8929
8989
|
flex-direction: row;
|
|
8930
8990
|
justify-content: flex-start;
|
|
8931
8991
|
`;
|
|
8932
8992
|
|
|
8933
8993
|
// src/components/Tiles/LinkTile.tsx
|
|
8934
|
-
import { jsx as
|
|
8994
|
+
import { jsx as jsx85 } from "@emotion/react/jsx-runtime";
|
|
8935
8995
|
var LinkTile2 = forwardRef17(
|
|
8936
8996
|
({ orientation = "vertical", children, ...props }, ref) => {
|
|
8937
8997
|
if ("linkManagerComponent" in props) {
|
|
8938
8998
|
const { linkManagerComponent: LinkManager, ...rest } = props;
|
|
8939
|
-
return /* @__PURE__ */
|
|
8999
|
+
return /* @__PURE__ */ jsx85(
|
|
8940
9000
|
LinkManager,
|
|
8941
9001
|
{
|
|
8942
9002
|
css: [
|
|
@@ -8950,7 +9010,7 @@ var LinkTile2 = forwardRef17(
|
|
|
8950
9010
|
}
|
|
8951
9011
|
);
|
|
8952
9012
|
}
|
|
8953
|
-
return /* @__PURE__ */
|
|
9013
|
+
return /* @__PURE__ */ jsx85(
|
|
8954
9014
|
"a",
|
|
8955
9015
|
{
|
|
8956
9016
|
ref,
|
|
@@ -8963,9 +9023,9 @@ var LinkTile2 = forwardRef17(
|
|
|
8963
9023
|
);
|
|
8964
9024
|
|
|
8965
9025
|
// src/components/Tiles/Tile.tsx
|
|
8966
|
-
import { jsx as
|
|
9026
|
+
import { jsx as jsx86 } from "@emotion/react/jsx-runtime";
|
|
8967
9027
|
var Tile2 = ({ children, disabled: disabled2, isSelected, orientation = "vertical", ...props }) => {
|
|
8968
|
-
return /* @__PURE__ */
|
|
9028
|
+
return /* @__PURE__ */ jsx86(
|
|
8969
9029
|
"button",
|
|
8970
9030
|
{
|
|
8971
9031
|
type: "button",
|
|
@@ -8982,12 +9042,12 @@ var Tile2 = ({ children, disabled: disabled2, isSelected, orientation = "vertica
|
|
|
8982
9042
|
};
|
|
8983
9043
|
|
|
8984
9044
|
// src/components/Tiles/styles/TileContainer.styles.ts
|
|
8985
|
-
import { css as
|
|
8986
|
-
var TileContainerWrapper = (theme, padding) =>
|
|
9045
|
+
import { css as css66 } from "@emotion/react";
|
|
9046
|
+
var TileContainerWrapper = (theme, padding) => css66`
|
|
8987
9047
|
background: ${theme};
|
|
8988
9048
|
padding: ${padding != "none" ? `var(--spacing-${padding})` : "0"};
|
|
8989
9049
|
`;
|
|
8990
|
-
var TileContainerInner = (gap, templateColumns) =>
|
|
9050
|
+
var TileContainerInner = (gap, templateColumns) => css66`
|
|
8991
9051
|
/* We remove the border radius from the tiles when used inside TileContainer */
|
|
8992
9052
|
--tile-border-radius: 0;
|
|
8993
9053
|
--tile-border-color: ${tileBorderColor};
|
|
@@ -9021,7 +9081,7 @@ var TileContainerInner = (gap, templateColumns) => css64`
|
|
|
9021
9081
|
margin-left: -${tileBorderSize};
|
|
9022
9082
|
}
|
|
9023
9083
|
`;
|
|
9024
|
-
var TileContainerInnerWithoutGrouping =
|
|
9084
|
+
var TileContainerInnerWithoutGrouping = css66`
|
|
9025
9085
|
overflow: visible;
|
|
9026
9086
|
|
|
9027
9087
|
&::after {
|
|
@@ -9030,7 +9090,7 @@ var TileContainerInnerWithoutGrouping = css64`
|
|
|
9030
9090
|
`;
|
|
9031
9091
|
|
|
9032
9092
|
// src/components/Tiles/TileContainer.tsx
|
|
9033
|
-
import { jsx as
|
|
9093
|
+
import { jsx as jsx87 } from "@emotion/react/jsx-runtime";
|
|
9034
9094
|
var TileContainer = ({
|
|
9035
9095
|
bgColor = "var(--brand-secondary-2)",
|
|
9036
9096
|
containerPadding = "base",
|
|
@@ -9040,7 +9100,7 @@ var TileContainer = ({
|
|
|
9040
9100
|
withoutGrouping = false,
|
|
9041
9101
|
...props
|
|
9042
9102
|
}) => {
|
|
9043
|
-
return /* @__PURE__ */
|
|
9103
|
+
return /* @__PURE__ */ jsx87("div", { css: TileContainerWrapper(bgColor, containerPadding), ...props, children: /* @__PURE__ */ jsx87(
|
|
9044
9104
|
"div",
|
|
9045
9105
|
{
|
|
9046
9106
|
css: [
|
|
@@ -9053,21 +9113,21 @@ var TileContainer = ({
|
|
|
9053
9113
|
};
|
|
9054
9114
|
|
|
9055
9115
|
// src/components/Tiles/styles/TileText.styles.ts
|
|
9056
|
-
import { css as
|
|
9057
|
-
var TileHeading =
|
|
9116
|
+
import { css as css67 } from "@emotion/react";
|
|
9117
|
+
var TileHeading = css67`
|
|
9058
9118
|
font-size: var(--fs-base);
|
|
9059
9119
|
`;
|
|
9060
|
-
var TileText =
|
|
9120
|
+
var TileText = css67`
|
|
9061
9121
|
color: var(--gray-500);
|
|
9062
9122
|
font-size: var(--fs-sm);
|
|
9063
9123
|
line-height: 1.2;
|
|
9064
9124
|
`;
|
|
9065
9125
|
|
|
9066
9126
|
// src/components/Tiles/TileText.tsx
|
|
9067
|
-
import { jsx as
|
|
9127
|
+
import { jsx as jsx88 } from "@emotion/react/jsx-runtime";
|
|
9068
9128
|
var TileText2 = ({ as = "heading", children, ...props }) => {
|
|
9069
9129
|
const isHeading = as === "heading";
|
|
9070
|
-
return /* @__PURE__ */
|
|
9130
|
+
return /* @__PURE__ */ jsx88(
|
|
9071
9131
|
"span",
|
|
9072
9132
|
{
|
|
9073
9133
|
role: isHeading ? "heading" : void 0,
|
|
@@ -9079,32 +9139,32 @@ var TileText2 = ({ as = "heading", children, ...props }) => {
|
|
|
9079
9139
|
};
|
|
9080
9140
|
|
|
9081
9141
|
// src/components/IntegrationModalHeader/IntegrationModalHeader.styles.ts
|
|
9082
|
-
import { css as
|
|
9083
|
-
var IntegrationModalHeaderSVGBackground =
|
|
9142
|
+
import { css as css68 } from "@emotion/react";
|
|
9143
|
+
var IntegrationModalHeaderSVGBackground = css68`
|
|
9084
9144
|
position: absolute;
|
|
9085
9145
|
top: 0;
|
|
9086
9146
|
left: 0;
|
|
9087
9147
|
`;
|
|
9088
|
-
var IntegrationModalHeaderGroup =
|
|
9148
|
+
var IntegrationModalHeaderGroup = css68`
|
|
9089
9149
|
align-items: center;
|
|
9090
9150
|
display: flex;
|
|
9091
9151
|
gap: var(--spacing-sm);
|
|
9092
9152
|
margin: 0 0 var(--spacing-md);
|
|
9093
9153
|
position: relative;
|
|
9094
9154
|
`;
|
|
9095
|
-
var IntegrationModalHeaderTitleGroup =
|
|
9155
|
+
var IntegrationModalHeaderTitleGroup = css68`
|
|
9096
9156
|
align-items: center;
|
|
9097
9157
|
display: flex;
|
|
9098
9158
|
gap: var(--spacing-base);
|
|
9099
9159
|
padding: 0 var(--spacing-base);
|
|
9100
9160
|
`;
|
|
9101
|
-
var IntegrationModalHeaderTitle =
|
|
9161
|
+
var IntegrationModalHeaderTitle = css68`
|
|
9102
9162
|
margin-top: 0;
|
|
9103
9163
|
`;
|
|
9104
|
-
var IntegrationModalHeaderMenuPlacement =
|
|
9164
|
+
var IntegrationModalHeaderMenuPlacement = css68`
|
|
9105
9165
|
margin-bottom: var(--spacing-base);
|
|
9106
9166
|
`;
|
|
9107
|
-
var IntegrationModalHeaderContentWrapper =
|
|
9167
|
+
var IntegrationModalHeaderContentWrapper = css68`
|
|
9108
9168
|
background: var(--white);
|
|
9109
9169
|
display: flex;
|
|
9110
9170
|
padding: var(--spacing-base);
|
|
@@ -9116,9 +9176,9 @@ var IntegrationModalHeaderContentWrapper = css66`
|
|
|
9116
9176
|
`;
|
|
9117
9177
|
|
|
9118
9178
|
// src/components/IntegrationModalHeader/IntegrationModalHeader.tsx
|
|
9119
|
-
import { Fragment as Fragment9, jsx as
|
|
9179
|
+
import { Fragment as Fragment9, jsx as jsx89, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
|
|
9120
9180
|
var HexModalBackground = ({ ...props }) => {
|
|
9121
|
-
return /* @__PURE__ */
|
|
9181
|
+
return /* @__PURE__ */ jsxs57(
|
|
9122
9182
|
"svg",
|
|
9123
9183
|
{
|
|
9124
9184
|
width: "236",
|
|
@@ -9128,7 +9188,7 @@ var HexModalBackground = ({ ...props }) => {
|
|
|
9128
9188
|
xmlns: "http://www.w3.org/2000/svg",
|
|
9129
9189
|
...props,
|
|
9130
9190
|
children: [
|
|
9131
|
-
/* @__PURE__ */
|
|
9191
|
+
/* @__PURE__ */ jsx89(
|
|
9132
9192
|
"path",
|
|
9133
9193
|
{
|
|
9134
9194
|
fillRule: "evenodd",
|
|
@@ -9137,7 +9197,7 @@ var HexModalBackground = ({ ...props }) => {
|
|
|
9137
9197
|
fill: "url(#paint0_linear_196_2737)"
|
|
9138
9198
|
}
|
|
9139
9199
|
),
|
|
9140
|
-
/* @__PURE__ */
|
|
9200
|
+
/* @__PURE__ */ jsx89("defs", { children: /* @__PURE__ */ jsxs57(
|
|
9141
9201
|
"linearGradient",
|
|
9142
9202
|
{
|
|
9143
9203
|
id: "paint0_linear_196_2737",
|
|
@@ -9147,8 +9207,8 @@ var HexModalBackground = ({ ...props }) => {
|
|
|
9147
9207
|
y2: "-95.2742",
|
|
9148
9208
|
gradientUnits: "userSpaceOnUse",
|
|
9149
9209
|
children: [
|
|
9150
|
-
/* @__PURE__ */
|
|
9151
|
-
/* @__PURE__ */
|
|
9210
|
+
/* @__PURE__ */ jsx89("stop", { stopColor: "#81DCDE" }),
|
|
9211
|
+
/* @__PURE__ */ jsx89("stop", { offset: "1", stopColor: "#428ED4" })
|
|
9152
9212
|
]
|
|
9153
9213
|
}
|
|
9154
9214
|
) })
|
|
@@ -9157,23 +9217,23 @@ var HexModalBackground = ({ ...props }) => {
|
|
|
9157
9217
|
);
|
|
9158
9218
|
};
|
|
9159
9219
|
var IntegrationModalHeader = ({ icon, name, menu, children }) => {
|
|
9160
|
-
return /* @__PURE__ */
|
|
9161
|
-
/* @__PURE__ */
|
|
9162
|
-
/* @__PURE__ */
|
|
9163
|
-
icon ? /* @__PURE__ */
|
|
9164
|
-
/* @__PURE__ */
|
|
9165
|
-
menu ? /* @__PURE__ */
|
|
9220
|
+
return /* @__PURE__ */ jsxs57(Fragment9, { children: [
|
|
9221
|
+
/* @__PURE__ */ jsx89(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
|
|
9222
|
+
/* @__PURE__ */ jsx89("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ jsxs57("div", { css: IntegrationModalHeaderTitleGroup, children: [
|
|
9223
|
+
icon ? /* @__PURE__ */ jsx89(IntegrationModalIcon, { icon, name: name || "" }) : null,
|
|
9224
|
+
/* @__PURE__ */ jsx89(Heading2, { level: 3, css: IntegrationModalHeaderTitle, "data-testid": "integration-modal-title", children: name || "Create Team Integration" }),
|
|
9225
|
+
menu ? /* @__PURE__ */ jsxs57("div", { css: IntegrationModalHeaderMenuPlacement, children: [
|
|
9166
9226
|
menu,
|
|
9167
9227
|
" "
|
|
9168
9228
|
] }) : null
|
|
9169
9229
|
] }) }),
|
|
9170
|
-
/* @__PURE__ */
|
|
9230
|
+
/* @__PURE__ */ jsx89("div", { css: IntegrationModalHeaderContentWrapper, children })
|
|
9171
9231
|
] });
|
|
9172
9232
|
};
|
|
9173
9233
|
|
|
9174
9234
|
// src/components/JsonEditor/JsonEditor.tsx
|
|
9175
9235
|
import MonacoEditor from "@monaco-editor/react";
|
|
9176
|
-
import { jsx as
|
|
9236
|
+
import { jsx as jsx90 } from "@emotion/react/jsx-runtime";
|
|
9177
9237
|
var minEditorHeightPx = 150;
|
|
9178
9238
|
var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
|
|
9179
9239
|
let effectiveHeight = height;
|
|
@@ -9183,7 +9243,7 @@ var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
|
|
|
9183
9243
|
if (typeof effectiveHeight === "number" && effectiveHeight < minEditorHeightPx) {
|
|
9184
9244
|
effectiveHeight = minEditorHeightPx;
|
|
9185
9245
|
}
|
|
9186
|
-
return /* @__PURE__ */
|
|
9246
|
+
return /* @__PURE__ */ jsx90(
|
|
9187
9247
|
MonacoEditor,
|
|
9188
9248
|
{
|
|
9189
9249
|
height: effectiveHeight,
|
|
@@ -9289,12 +9349,12 @@ function useDebouncedCallback(callback, deps, delay, maxWait = 0) {
|
|
|
9289
9349
|
}
|
|
9290
9350
|
|
|
9291
9351
|
// src/components/KeyValueInput/KeyValueInput.styles.ts
|
|
9292
|
-
import { css as
|
|
9293
|
-
var LabelStyles =
|
|
9352
|
+
import { css as css69 } from "@emotion/react";
|
|
9353
|
+
var LabelStyles = css69`
|
|
9294
9354
|
text-transform: uppercase;
|
|
9295
9355
|
font-weight: var(--fw-medium);
|
|
9296
9356
|
`;
|
|
9297
|
-
var SelectKeyValueRowStyles =
|
|
9357
|
+
var SelectKeyValueRowStyles = css69`
|
|
9298
9358
|
animation: var(--duration-fast) var(--timing-ease-out);
|
|
9299
9359
|
align-items: flex-start;
|
|
9300
9360
|
display: grid;
|
|
@@ -9303,14 +9363,14 @@ var SelectKeyValueRowStyles = css67`
|
|
|
9303
9363
|
background-color: white;
|
|
9304
9364
|
flex: 1;
|
|
9305
9365
|
`;
|
|
9306
|
-
var rowWrapper =
|
|
9366
|
+
var rowWrapper = css69`
|
|
9307
9367
|
display: flex;
|
|
9308
9368
|
background-color: white;
|
|
9309
9369
|
border-radius: var(--rounded-sm);
|
|
9310
9370
|
`;
|
|
9311
9371
|
|
|
9312
9372
|
// src/components/KeyValueInput/KeyValueInput.tsx
|
|
9313
|
-
import { jsx as
|
|
9373
|
+
import { jsx as jsx91, jsxs as jsxs58 } from "@emotion/react/jsx-runtime";
|
|
9314
9374
|
var initialSelectOptionValue = { key: "", value: "" };
|
|
9315
9375
|
var generateItemId = (item, index) => item.uniqueId || item.value || item.key || `$index-${index}`;
|
|
9316
9376
|
var KeyValueInput = ({
|
|
@@ -9395,12 +9455,12 @@ var KeyValueInput = ({
|
|
|
9395
9455
|
lastRowFirstInputRef.current.focus();
|
|
9396
9456
|
}
|
|
9397
9457
|
}, [value.length]);
|
|
9398
|
-
return /* @__PURE__ */
|
|
9399
|
-
/* @__PURE__ */
|
|
9400
|
-
/* @__PURE__ */
|
|
9401
|
-
/* @__PURE__ */
|
|
9402
|
-
/* @__PURE__ */
|
|
9403
|
-
!keyInfoPopover ? null : /* @__PURE__ */
|
|
9458
|
+
return /* @__PURE__ */ jsxs58(VerticalRhythm, { gap: "xs", children: [
|
|
9459
|
+
/* @__PURE__ */ jsx91(HorizontalRhythm, { align: "center", justify: "space-between", css: { marginBottom: "var(--spacing-xs)" }, children: /* @__PURE__ */ jsx91("span", { css: LabelStyles, children: label }) }),
|
|
9460
|
+
/* @__PURE__ */ jsxs58("div", { css: [SelectKeyValueRowStyles, { paddingLeft: "var(--spacing-base)" }], children: [
|
|
9461
|
+
/* @__PURE__ */ jsxs58(HorizontalRhythm, { align: "center", gap: "xs", children: [
|
|
9462
|
+
/* @__PURE__ */ jsx91("span", { children: keyLabel }),
|
|
9463
|
+
!keyInfoPopover ? null : /* @__PURE__ */ jsx91(
|
|
9404
9464
|
Popover3,
|
|
9405
9465
|
{
|
|
9406
9466
|
buttonText: `${keyLabel} info`,
|
|
@@ -9411,9 +9471,9 @@ var KeyValueInput = ({
|
|
|
9411
9471
|
}
|
|
9412
9472
|
)
|
|
9413
9473
|
] }),
|
|
9414
|
-
/* @__PURE__ */
|
|
9415
|
-
/* @__PURE__ */
|
|
9416
|
-
!valueInfoPopover ? null : /* @__PURE__ */
|
|
9474
|
+
/* @__PURE__ */ jsxs58(HorizontalRhythm, { align: "center", gap: "xs", children: [
|
|
9475
|
+
/* @__PURE__ */ jsx91("span", { children: valueLabel }),
|
|
9476
|
+
!valueInfoPopover ? null : /* @__PURE__ */ jsx91(
|
|
9417
9477
|
Popover3,
|
|
9418
9478
|
{
|
|
9419
9479
|
buttonText: `${valueLabel} info`,
|
|
@@ -9425,7 +9485,7 @@ var KeyValueInput = ({
|
|
|
9425
9485
|
)
|
|
9426
9486
|
] })
|
|
9427
9487
|
] }),
|
|
9428
|
-
/* @__PURE__ */
|
|
9488
|
+
/* @__PURE__ */ jsx91(VerticalRhythm, { gap: "sm", children: /* @__PURE__ */ jsx91(
|
|
9429
9489
|
DndContext,
|
|
9430
9490
|
{
|
|
9431
9491
|
sensors,
|
|
@@ -9434,7 +9494,7 @@ var KeyValueInput = ({
|
|
|
9434
9494
|
onDragStart: handleDragStart,
|
|
9435
9495
|
onDragCancel: handleDragCancel,
|
|
9436
9496
|
modifiers: [restrictToParentElement],
|
|
9437
|
-
children: /* @__PURE__ */
|
|
9497
|
+
children: /* @__PURE__ */ jsx91(SortableContext, { items: valueWithIds, strategy: verticalListSortingStrategy, children: valueWithIds.map(({ id, ...item }, index) => /* @__PURE__ */ jsx91(
|
|
9438
9498
|
KeyValueInputItem,
|
|
9439
9499
|
{
|
|
9440
9500
|
id,
|
|
@@ -9456,7 +9516,7 @@ var KeyValueInput = ({
|
|
|
9456
9516
|
)) })
|
|
9457
9517
|
}
|
|
9458
9518
|
) }),
|
|
9459
|
-
/* @__PURE__ */
|
|
9519
|
+
/* @__PURE__ */ jsxs58(
|
|
9460
9520
|
Button,
|
|
9461
9521
|
{
|
|
9462
9522
|
"data-testid": "add-input-row-action",
|
|
@@ -9466,7 +9526,7 @@ var KeyValueInput = ({
|
|
|
9466
9526
|
disabled: disabled2,
|
|
9467
9527
|
css: { marginTop: "var(--spacing-base)" },
|
|
9468
9528
|
children: [
|
|
9469
|
-
/* @__PURE__ */
|
|
9529
|
+
/* @__PURE__ */ jsx91(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.85rem" }),
|
|
9470
9530
|
" Add option"
|
|
9471
9531
|
]
|
|
9472
9532
|
}
|
|
@@ -9501,10 +9561,10 @@ var KeyValueInputItem = ({
|
|
|
9501
9561
|
onEnter();
|
|
9502
9562
|
}
|
|
9503
9563
|
};
|
|
9504
|
-
return /* @__PURE__ */
|
|
9505
|
-
/* @__PURE__ */
|
|
9506
|
-
/* @__PURE__ */
|
|
9507
|
-
/* @__PURE__ */
|
|
9564
|
+
return /* @__PURE__ */ jsxs58("div", { css: rowWrapper, ref: setNodeRef, style, children: [
|
|
9565
|
+
/* @__PURE__ */ jsx91(DragHandle, { disableDnd: disabledDnd, ref: setActivatorNodeRef, ...attributes, ...listeners }),
|
|
9566
|
+
/* @__PURE__ */ jsxs58("div", { css: SelectKeyValueRowStyles, "data-testid": "key-value-input-item", children: [
|
|
9567
|
+
/* @__PURE__ */ jsx91(
|
|
9508
9568
|
Input,
|
|
9509
9569
|
{
|
|
9510
9570
|
ref: firstInputRef,
|
|
@@ -9526,7 +9586,7 @@ var KeyValueInputItem = ({
|
|
|
9526
9586
|
"data-testid": "key"
|
|
9527
9587
|
}
|
|
9528
9588
|
),
|
|
9529
|
-
/* @__PURE__ */
|
|
9589
|
+
/* @__PURE__ */ jsx91(
|
|
9530
9590
|
Input,
|
|
9531
9591
|
{
|
|
9532
9592
|
label: valueLabel,
|
|
@@ -9546,7 +9606,7 @@ var KeyValueInputItem = ({
|
|
|
9546
9606
|
"data-testid": "value"
|
|
9547
9607
|
}
|
|
9548
9608
|
),
|
|
9549
|
-
/* @__PURE__ */
|
|
9609
|
+
/* @__PURE__ */ jsx91("div", { css: { marginTop: "1rem" }, children: /* @__PURE__ */ jsx91(
|
|
9550
9610
|
Button,
|
|
9551
9611
|
{
|
|
9552
9612
|
type: "button",
|
|
@@ -9555,7 +9615,7 @@ var KeyValueInputItem = ({
|
|
|
9555
9615
|
onClick: onDelete,
|
|
9556
9616
|
disabled: disabled2 || disabledDelete,
|
|
9557
9617
|
size: "zero",
|
|
9558
|
-
children: /* @__PURE__ */
|
|
9618
|
+
children: /* @__PURE__ */ jsx91(Icon, { icon: "trash", size: 16, iconColor: "currentColor" })
|
|
9559
9619
|
}
|
|
9560
9620
|
) })
|
|
9561
9621
|
] })
|
|
@@ -9563,39 +9623,39 @@ var KeyValueInputItem = ({
|
|
|
9563
9623
|
};
|
|
9564
9624
|
|
|
9565
9625
|
// src/components/LimitsBar/LimitsBar.styles.ts
|
|
9566
|
-
import { css as
|
|
9567
|
-
var LimitsBarContainer =
|
|
9626
|
+
import { css as css70 } from "@emotion/react";
|
|
9627
|
+
var LimitsBarContainer = css70`
|
|
9568
9628
|
margin-block: var(--spacing-sm);
|
|
9569
9629
|
`;
|
|
9570
|
-
var LimitsBarProgressBar =
|
|
9630
|
+
var LimitsBarProgressBar = css70`
|
|
9571
9631
|
background: var(--gray-100);
|
|
9572
9632
|
margin-top: var(--spacing-sm);
|
|
9573
9633
|
position: relative;
|
|
9574
9634
|
overflow: hidden;
|
|
9575
9635
|
height: 0.25rem;
|
|
9576
9636
|
`;
|
|
9577
|
-
var LimitsBarProgressBarLine =
|
|
9637
|
+
var LimitsBarProgressBarLine = css70`
|
|
9578
9638
|
position: absolute;
|
|
9579
9639
|
inset: 0;
|
|
9580
9640
|
transition: transform var(--duration-fast) var(--timing-ease-out);
|
|
9581
9641
|
`;
|
|
9582
|
-
var LimitsBarLabelContainer =
|
|
9642
|
+
var LimitsBarLabelContainer = css70`
|
|
9583
9643
|
display: flex;
|
|
9584
9644
|
justify-content: space-between;
|
|
9585
9645
|
font-weight: var(--fw-bold);
|
|
9586
9646
|
`;
|
|
9587
|
-
var LimitsBarLabel =
|
|
9647
|
+
var LimitsBarLabel = css70`
|
|
9588
9648
|
font-size: var(--fs-baase);
|
|
9589
9649
|
`;
|
|
9590
|
-
var LimitsBarBgColor = (statusColor) =>
|
|
9650
|
+
var LimitsBarBgColor = (statusColor) => css70`
|
|
9591
9651
|
background: ${statusColor};
|
|
9592
9652
|
`;
|
|
9593
|
-
var LimitsBarTextColor = (statusColor) =>
|
|
9653
|
+
var LimitsBarTextColor = (statusColor) => css70`
|
|
9594
9654
|
color: ${statusColor};
|
|
9595
9655
|
`;
|
|
9596
9656
|
|
|
9597
9657
|
// src/components/LimitsBar/LimitsBar.tsx
|
|
9598
|
-
import { jsx as
|
|
9658
|
+
import { jsx as jsx92, jsxs as jsxs59 } from "@emotion/react/jsx-runtime";
|
|
9599
9659
|
var LimitsBar = ({ current, max, label }) => {
|
|
9600
9660
|
const maxPercentage = 100;
|
|
9601
9661
|
const progressBarValue = Math.ceil(current / max * maxPercentage);
|
|
@@ -9606,16 +9666,16 @@ var LimitsBar = ({ current, max, label }) => {
|
|
|
9606
9666
|
danger: "var(--brand-secondary-5)"
|
|
9607
9667
|
};
|
|
9608
9668
|
const statusColor = progressBarValue === 100 ? colorMap.danger : progressBarValue >= 75 ? colorMap.warn : colorMap.base;
|
|
9609
|
-
return /* @__PURE__ */
|
|
9610
|
-
/* @__PURE__ */
|
|
9611
|
-
/* @__PURE__ */
|
|
9612
|
-
/* @__PURE__ */
|
|
9669
|
+
return /* @__PURE__ */ jsxs59("div", { css: LimitsBarContainer, children: [
|
|
9670
|
+
/* @__PURE__ */ jsxs59("div", { css: LimitsBarLabelContainer, children: [
|
|
9671
|
+
/* @__PURE__ */ jsx92("span", { css: LimitsBarLabel, children: label }),
|
|
9672
|
+
/* @__PURE__ */ jsxs59("span", { css: [LimitsBarLabel, LimitsBarTextColor(statusColor)], children: [
|
|
9613
9673
|
current,
|
|
9614
9674
|
" of ",
|
|
9615
9675
|
max
|
|
9616
9676
|
] })
|
|
9617
9677
|
] }),
|
|
9618
|
-
/* @__PURE__ */
|
|
9678
|
+
/* @__PURE__ */ jsx92(
|
|
9619
9679
|
"div",
|
|
9620
9680
|
{
|
|
9621
9681
|
role: "progressbar",
|
|
@@ -9624,7 +9684,7 @@ var LimitsBar = ({ current, max, label }) => {
|
|
|
9624
9684
|
"aria-valuemax": max,
|
|
9625
9685
|
"aria-valuetext": `${current} of ${max}`,
|
|
9626
9686
|
css: LimitsBarProgressBar,
|
|
9627
|
-
children: /* @__PURE__ */
|
|
9687
|
+
children: /* @__PURE__ */ jsx92(
|
|
9628
9688
|
"span",
|
|
9629
9689
|
{
|
|
9630
9690
|
role: "presentation",
|
|
@@ -9640,13 +9700,13 @@ var LimitsBar = ({ current, max, label }) => {
|
|
|
9640
9700
|
};
|
|
9641
9701
|
|
|
9642
9702
|
// src/components/LinkList/LinkList.styles.ts
|
|
9643
|
-
import { css as
|
|
9644
|
-
var LinkListContainer =
|
|
9703
|
+
import { css as css71 } from "@emotion/react";
|
|
9704
|
+
var LinkListContainer = css71`
|
|
9645
9705
|
display: flex block;
|
|
9646
9706
|
flex-direction: column;
|
|
9647
9707
|
gap: var(--spacing-sm);
|
|
9648
9708
|
`;
|
|
9649
|
-
var LinkListTitle =
|
|
9709
|
+
var LinkListTitle = css71`
|
|
9650
9710
|
color: var(--gray-400);
|
|
9651
9711
|
font-weight: var(--fw-medium);
|
|
9652
9712
|
font-size: var(--fs-sm);
|
|
@@ -9654,23 +9714,23 @@ var LinkListTitle = css69`
|
|
|
9654
9714
|
`;
|
|
9655
9715
|
|
|
9656
9716
|
// src/components/LinkList/LinkList.tsx
|
|
9657
|
-
import { jsx as
|
|
9717
|
+
import { jsx as jsx93, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
|
|
9658
9718
|
var LinkList = ({ title, children, ...props }) => {
|
|
9659
|
-
return /* @__PURE__ */
|
|
9660
|
-
/* @__PURE__ */
|
|
9719
|
+
return /* @__PURE__ */ jsxs60("div", { css: LinkListContainer, ...props, children: [
|
|
9720
|
+
/* @__PURE__ */ jsx93(Heading2, { level: 3, css: LinkListTitle, withMarginBottom: false, children: title }),
|
|
9661
9721
|
children
|
|
9662
9722
|
] });
|
|
9663
9723
|
};
|
|
9664
9724
|
|
|
9665
9725
|
// src/components/List/ScrollableList.tsx
|
|
9666
|
-
import { css as
|
|
9726
|
+
import { css as css73 } from "@emotion/react";
|
|
9667
9727
|
|
|
9668
9728
|
// src/components/List/styles/ScrollableList.styles.ts
|
|
9669
|
-
import { css as
|
|
9670
|
-
var ScrollableListContainer =
|
|
9729
|
+
import { css as css72 } from "@emotion/react";
|
|
9730
|
+
var ScrollableListContainer = css72`
|
|
9671
9731
|
position: relative;
|
|
9672
9732
|
`;
|
|
9673
|
-
var ScrollableListInner =
|
|
9733
|
+
var ScrollableListInner = css72`
|
|
9674
9734
|
background: var(--gray-50);
|
|
9675
9735
|
border-top: 1px solid var(--gray-200);
|
|
9676
9736
|
border-bottom: 1px solid var(--gray-200);
|
|
@@ -9693,19 +9753,19 @@ var ScrollableListInner = css70`
|
|
|
9693
9753
|
`;
|
|
9694
9754
|
|
|
9695
9755
|
// src/components/List/ScrollableList.tsx
|
|
9696
|
-
import { jsx as
|
|
9756
|
+
import { jsx as jsx94, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
|
|
9697
9757
|
var ScrollableList = ({ label, children, ...props }) => {
|
|
9698
|
-
return /* @__PURE__ */
|
|
9699
|
-
label ? /* @__PURE__ */
|
|
9758
|
+
return /* @__PURE__ */ jsxs61("div", { css: [ScrollableListContainer, scrollbarStyles], ...props, children: [
|
|
9759
|
+
label ? /* @__PURE__ */ jsx94(
|
|
9700
9760
|
"span",
|
|
9701
9761
|
{
|
|
9702
|
-
css:
|
|
9762
|
+
css: css73`
|
|
9703
9763
|
${labelText}
|
|
9704
9764
|
`,
|
|
9705
9765
|
children: label
|
|
9706
9766
|
}
|
|
9707
9767
|
) : null,
|
|
9708
|
-
/* @__PURE__ */
|
|
9768
|
+
/* @__PURE__ */ jsx94("div", { css: [ScrollableListInner, scrollbarStyles], children })
|
|
9709
9769
|
] });
|
|
9710
9770
|
};
|
|
9711
9771
|
|
|
@@ -9713,8 +9773,8 @@ var ScrollableList = ({ label, children, ...props }) => {
|
|
|
9713
9773
|
import { CgCheck as CgCheck3 } from "@react-icons/all-files/cg/CgCheck";
|
|
9714
9774
|
|
|
9715
9775
|
// src/components/List/styles/ScrollableListItem.styles.ts
|
|
9716
|
-
import { css as
|
|
9717
|
-
var ScrollableListItemContainer =
|
|
9776
|
+
import { css as css74 } from "@emotion/react";
|
|
9777
|
+
var ScrollableListItemContainer = css74`
|
|
9718
9778
|
align-items: center;
|
|
9719
9779
|
background: var(--white);
|
|
9720
9780
|
border-radius: var(--rounded-base);
|
|
@@ -9723,13 +9783,13 @@ var ScrollableListItemContainer = css72`
|
|
|
9723
9783
|
min-height: 52px;
|
|
9724
9784
|
transition: border-color var(--duration-fast) var(--timing-ease-out);
|
|
9725
9785
|
`;
|
|
9726
|
-
var ScrollableListItemShadow =
|
|
9786
|
+
var ScrollableListItemShadow = css74`
|
|
9727
9787
|
box-shadow: var(--shadow-base);
|
|
9728
9788
|
`;
|
|
9729
|
-
var ScrollableListItemActive =
|
|
9789
|
+
var ScrollableListItemActive = css74`
|
|
9730
9790
|
border-color: var(--brand-secondary-3);
|
|
9731
9791
|
`;
|
|
9732
|
-
var ScrollableListItemBtn =
|
|
9792
|
+
var ScrollableListItemBtn = css74`
|
|
9733
9793
|
align-items: center;
|
|
9734
9794
|
border: none;
|
|
9735
9795
|
background: transparent;
|
|
@@ -9744,27 +9804,27 @@ var ScrollableListItemBtn = css72`
|
|
|
9744
9804
|
outline: none;
|
|
9745
9805
|
}
|
|
9746
9806
|
`;
|
|
9747
|
-
var ScrollableListInputLabel =
|
|
9807
|
+
var ScrollableListInputLabel = css74`
|
|
9748
9808
|
align-items: center;
|
|
9749
9809
|
cursor: pointer;
|
|
9750
9810
|
display: flex;
|
|
9751
9811
|
padding: var(--spacing-xs) var(--spacing-base) var(--spacing-xs);
|
|
9752
9812
|
flex-grow: 1;
|
|
9753
9813
|
`;
|
|
9754
|
-
var ScrollableListInputText =
|
|
9814
|
+
var ScrollableListInputText = css74`
|
|
9755
9815
|
align-items: center;
|
|
9756
9816
|
display: flex;
|
|
9757
9817
|
gap: var(--spacing-sm);
|
|
9758
9818
|
flex-grow: 1;
|
|
9759
9819
|
flex-wrap: wrap;
|
|
9760
9820
|
`;
|
|
9761
|
-
var ScrollableListHiddenInput =
|
|
9821
|
+
var ScrollableListHiddenInput = css74`
|
|
9762
9822
|
position: absolute;
|
|
9763
9823
|
height: 0;
|
|
9764
9824
|
width: 0;
|
|
9765
9825
|
opacity: 0;
|
|
9766
9826
|
`;
|
|
9767
|
-
var ScrollableListIcon =
|
|
9827
|
+
var ScrollableListIcon = css74`
|
|
9768
9828
|
border-radius: var(--rounded-full);
|
|
9769
9829
|
background: var(--brand-secondary-3);
|
|
9770
9830
|
color: var(--white);
|
|
@@ -9772,12 +9832,12 @@ var ScrollableListIcon = css72`
|
|
|
9772
9832
|
min-width: 24px;
|
|
9773
9833
|
opacity: 0;
|
|
9774
9834
|
`;
|
|
9775
|
-
var ScrollableListIconVisible =
|
|
9835
|
+
var ScrollableListIconVisible = css74`
|
|
9776
9836
|
animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
|
|
9777
9837
|
`;
|
|
9778
9838
|
|
|
9779
9839
|
// src/components/List/ScrollableListInputItem.tsx
|
|
9780
|
-
import { jsx as
|
|
9840
|
+
import { jsx as jsx95, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
|
|
9781
9841
|
var ScrollableListInputItem = ({
|
|
9782
9842
|
label,
|
|
9783
9843
|
icon,
|
|
@@ -9787,7 +9847,7 @@ var ScrollableListInputItem = ({
|
|
|
9787
9847
|
labelTestId,
|
|
9788
9848
|
...props
|
|
9789
9849
|
}) => {
|
|
9790
|
-
return /* @__PURE__ */
|
|
9850
|
+
return /* @__PURE__ */ jsx95(
|
|
9791
9851
|
"div",
|
|
9792
9852
|
{
|
|
9793
9853
|
css: [
|
|
@@ -9796,13 +9856,13 @@ var ScrollableListInputItem = ({
|
|
|
9796
9856
|
active2 ? ScrollableListItemActive : void 0
|
|
9797
9857
|
],
|
|
9798
9858
|
...props,
|
|
9799
|
-
children: /* @__PURE__ */
|
|
9800
|
-
/* @__PURE__ */
|
|
9859
|
+
children: /* @__PURE__ */ jsxs62("label", { "data-testid": labelTestId, css: ScrollableListInputLabel, children: [
|
|
9860
|
+
/* @__PURE__ */ jsxs62("span", { css: ScrollableListInputText, children: [
|
|
9801
9861
|
icon,
|
|
9802
9862
|
label
|
|
9803
9863
|
] }),
|
|
9804
|
-
/* @__PURE__ */
|
|
9805
|
-
/* @__PURE__ */
|
|
9864
|
+
/* @__PURE__ */ jsx95("div", { css: ScrollableListHiddenInput, children }),
|
|
9865
|
+
/* @__PURE__ */ jsx95(
|
|
9806
9866
|
Icon,
|
|
9807
9867
|
{
|
|
9808
9868
|
icon: CgCheck3,
|
|
@@ -9820,7 +9880,7 @@ var ScrollableListInputItem = ({
|
|
|
9820
9880
|
|
|
9821
9881
|
// src/components/List/ScrollableListItem.tsx
|
|
9822
9882
|
import { CgCheck as CgCheck4 } from "@react-icons/all-files/cg/CgCheck";
|
|
9823
|
-
import { jsx as
|
|
9883
|
+
import { jsx as jsx96, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
|
|
9824
9884
|
var ScrollableListItem = ({
|
|
9825
9885
|
buttonText,
|
|
9826
9886
|
icon,
|
|
@@ -9828,7 +9888,7 @@ var ScrollableListItem = ({
|
|
|
9828
9888
|
disableShadow,
|
|
9829
9889
|
...props
|
|
9830
9890
|
}) => {
|
|
9831
|
-
return /* @__PURE__ */
|
|
9891
|
+
return /* @__PURE__ */ jsx96(
|
|
9832
9892
|
"div",
|
|
9833
9893
|
{
|
|
9834
9894
|
css: [
|
|
@@ -9836,12 +9896,12 @@ var ScrollableListItem = ({
|
|
|
9836
9896
|
disableShadow ? void 0 : ScrollableListItemShadow,
|
|
9837
9897
|
active2 ? ScrollableListItemActive : void 0
|
|
9838
9898
|
],
|
|
9839
|
-
children: /* @__PURE__ */
|
|
9840
|
-
/* @__PURE__ */
|
|
9899
|
+
children: /* @__PURE__ */ jsxs63("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
|
|
9900
|
+
/* @__PURE__ */ jsxs63(HorizontalRhythm, { gap: "xs", align: "center", children: [
|
|
9841
9901
|
icon,
|
|
9842
|
-
/* @__PURE__ */
|
|
9902
|
+
/* @__PURE__ */ jsx96("span", { children: buttonText })
|
|
9843
9903
|
] }),
|
|
9844
|
-
/* @__PURE__ */
|
|
9904
|
+
/* @__PURE__ */ jsx96(
|
|
9845
9905
|
Icon,
|
|
9846
9906
|
{
|
|
9847
9907
|
icon: CgCheck4,
|
|
@@ -9856,7 +9916,7 @@ var ScrollableListItem = ({
|
|
|
9856
9916
|
};
|
|
9857
9917
|
|
|
9858
9918
|
// src/components/LoadingIndicator/LoadingIndicator.styles.ts
|
|
9859
|
-
import { css as
|
|
9919
|
+
import { css as css75, keyframes as keyframes3 } from "@emotion/react";
|
|
9860
9920
|
function bounceFade(size) {
|
|
9861
9921
|
const bounceHeight = size === "lg" ? 10 : 5;
|
|
9862
9922
|
return keyframes3`
|
|
@@ -9877,13 +9937,13 @@ function bounceFade(size) {
|
|
|
9877
9937
|
}
|
|
9878
9938
|
`;
|
|
9879
9939
|
}
|
|
9880
|
-
var loader =
|
|
9940
|
+
var loader = css75`
|
|
9881
9941
|
display: inline-flex;
|
|
9882
9942
|
justify-content: center;
|
|
9883
9943
|
`;
|
|
9884
9944
|
function loadingDot(size, backgroundColor) {
|
|
9885
9945
|
const dotSize = size === "lg" ? 8 : 4;
|
|
9886
|
-
return
|
|
9946
|
+
return css75`
|
|
9887
9947
|
background-color: ${backgroundColor};
|
|
9888
9948
|
display: block;
|
|
9889
9949
|
border-radius: var(--rounded-full);
|
|
@@ -9908,7 +9968,7 @@ function loadingDot(size, backgroundColor) {
|
|
|
9908
9968
|
}
|
|
9909
9969
|
|
|
9910
9970
|
// src/components/LoadingIndicator/LoadingIndicator.tsx
|
|
9911
|
-
import { jsx as
|
|
9971
|
+
import { jsx as jsx97, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
|
|
9912
9972
|
var cssColorMap = {
|
|
9913
9973
|
gray: "var(--gray-700)",
|
|
9914
9974
|
"accent-alt": "var(--accent-alt-dark)"
|
|
@@ -9916,44 +9976,44 @@ var cssColorMap = {
|
|
|
9916
9976
|
var LoadingIndicator = ({ size = "lg", color = "gray", ...props }) => {
|
|
9917
9977
|
const cssColor = cssColorMap[color];
|
|
9918
9978
|
const dotStyle = loadingDot(size, cssColor);
|
|
9919
|
-
return /* @__PURE__ */
|
|
9920
|
-
/* @__PURE__ */
|
|
9921
|
-
/* @__PURE__ */
|
|
9922
|
-
/* @__PURE__ */
|
|
9979
|
+
return /* @__PURE__ */ jsxs64("div", { role: "alert", css: loader, "data-testid": "loading-indicator", ...props, children: [
|
|
9980
|
+
/* @__PURE__ */ jsx97("span", { css: dotStyle }),
|
|
9981
|
+
/* @__PURE__ */ jsx97("span", { css: dotStyle }),
|
|
9982
|
+
/* @__PURE__ */ jsx97("span", { css: dotStyle })
|
|
9923
9983
|
] });
|
|
9924
9984
|
};
|
|
9925
9985
|
|
|
9926
9986
|
// src/components/LoadingOverlay/LoadingOverlay.styles.ts
|
|
9927
|
-
import { css as
|
|
9928
|
-
var loadingOverlayContainer =
|
|
9987
|
+
import { css as css76 } from "@emotion/react";
|
|
9988
|
+
var loadingOverlayContainer = css76`
|
|
9929
9989
|
inset: 0;
|
|
9930
9990
|
overflow: hidden;
|
|
9931
9991
|
justify-content: center;
|
|
9932
9992
|
padding: var(--spacing-xl);
|
|
9933
9993
|
overflow-y: auto;
|
|
9934
9994
|
`;
|
|
9935
|
-
var loadingOverlayVisible =
|
|
9995
|
+
var loadingOverlayVisible = css76`
|
|
9936
9996
|
display: flex;
|
|
9937
9997
|
`;
|
|
9938
|
-
var loadingOverlayHidden =
|
|
9998
|
+
var loadingOverlayHidden = css76`
|
|
9939
9999
|
display: none;
|
|
9940
10000
|
`;
|
|
9941
|
-
var loadingOverlayBackground = (bgColor) =>
|
|
10001
|
+
var loadingOverlayBackground = (bgColor) => css76`
|
|
9942
10002
|
background: ${bgColor};
|
|
9943
10003
|
opacity: 0.92;
|
|
9944
10004
|
position: absolute;
|
|
9945
10005
|
inset: 0 0;
|
|
9946
10006
|
`;
|
|
9947
|
-
var loadingOverlayBody =
|
|
10007
|
+
var loadingOverlayBody = css76`
|
|
9948
10008
|
align-items: center;
|
|
9949
10009
|
display: flex;
|
|
9950
10010
|
flex-direction: column;
|
|
9951
10011
|
`;
|
|
9952
|
-
var loadingOverlayMessage =
|
|
10012
|
+
var loadingOverlayMessage = css76`
|
|
9953
10013
|
color: var(--gray-600);
|
|
9954
10014
|
margin: var(--spacing-base) 0 0;
|
|
9955
10015
|
`;
|
|
9956
|
-
var loaderAnimationContainer =
|
|
10016
|
+
var loaderAnimationContainer = css76`
|
|
9957
10017
|
aspect-ratio: 1/1;
|
|
9958
10018
|
position: relative;
|
|
9959
10019
|
transition: filter var(--duration-xslow) ease-in-out;
|
|
@@ -10144,7 +10204,7 @@ var loaderAnimationContainer = css74`
|
|
|
10144
10204
|
`;
|
|
10145
10205
|
|
|
10146
10206
|
// src/components/LoadingOverlay/LoadingOverlay.tsx
|
|
10147
|
-
import { jsx as
|
|
10207
|
+
import { jsx as jsx98, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
|
|
10148
10208
|
var LoadingOverlay = ({
|
|
10149
10209
|
isActive,
|
|
10150
10210
|
statusMessage,
|
|
@@ -10156,7 +10216,7 @@ var LoadingOverlay = ({
|
|
|
10156
10216
|
children,
|
|
10157
10217
|
position = "absolute"
|
|
10158
10218
|
}) => {
|
|
10159
|
-
return /* @__PURE__ */
|
|
10219
|
+
return /* @__PURE__ */ jsxs65(
|
|
10160
10220
|
"div",
|
|
10161
10221
|
{
|
|
10162
10222
|
role: "alert",
|
|
@@ -10169,11 +10229,11 @@ var LoadingOverlay = ({
|
|
|
10169
10229
|
"aria-hidden": !isActive,
|
|
10170
10230
|
"aria-busy": isActive && !isPaused,
|
|
10171
10231
|
children: [
|
|
10172
|
-
/* @__PURE__ */
|
|
10173
|
-
/* @__PURE__ */
|
|
10174
|
-
/* @__PURE__ */
|
|
10175
|
-
statusMessage ? /* @__PURE__ */
|
|
10176
|
-
/* @__PURE__ */
|
|
10232
|
+
/* @__PURE__ */ jsx98("div", { css: loadingOverlayBackground(overlayBackgroundColor) }),
|
|
10233
|
+
/* @__PURE__ */ jsx98("div", { css: { position: "relative", maxWidth: "100%", margin: isTopAligned ? "0" : "auto" }, children: /* @__PURE__ */ jsxs65("div", { css: loadingOverlayBody, children: [
|
|
10234
|
+
/* @__PURE__ */ jsx98(LoadingAnimation, { label: "Loading...", isPaused, width: loaderSize }),
|
|
10235
|
+
statusMessage ? /* @__PURE__ */ jsx98("div", { css: loadingOverlayMessage, children: statusMessage }) : null,
|
|
10236
|
+
/* @__PURE__ */ jsx98("div", { css: { width: "100%", marginTop: "var(--spacing-md)" }, children })
|
|
10177
10237
|
] }) })
|
|
10178
10238
|
]
|
|
10179
10239
|
}
|
|
@@ -10182,10 +10242,10 @@ var LoadingOverlay = ({
|
|
|
10182
10242
|
var LoadingAnimation = ({
|
|
10183
10243
|
label,
|
|
10184
10244
|
width,
|
|
10185
|
-
css:
|
|
10245
|
+
css: css110,
|
|
10186
10246
|
isPaused
|
|
10187
10247
|
}) => {
|
|
10188
|
-
return /* @__PURE__ */
|
|
10248
|
+
return /* @__PURE__ */ jsxs65(
|
|
10189
10249
|
"div",
|
|
10190
10250
|
{
|
|
10191
10251
|
"aria-label": label,
|
|
@@ -10193,41 +10253,41 @@ var LoadingAnimation = ({
|
|
|
10193
10253
|
width: typeof width === "number" ? `${width}px` : width,
|
|
10194
10254
|
height: typeof width === "number" ? `${width}px` : width
|
|
10195
10255
|
},
|
|
10196
|
-
css: [loaderAnimationContainer,
|
|
10256
|
+
css: [loaderAnimationContainer, css110],
|
|
10197
10257
|
className: `loader-container${isPaused ? " paused" : ""}`,
|
|
10198
10258
|
children: [
|
|
10199
|
-
/* @__PURE__ */
|
|
10200
|
-
/* @__PURE__ */
|
|
10201
|
-
/* @__PURE__ */
|
|
10202
|
-
/* @__PURE__ */
|
|
10203
|
-
/* @__PURE__ */
|
|
10259
|
+
/* @__PURE__ */ jsxs65("div", { className: "bottom-cubes", children: [
|
|
10260
|
+
/* @__PURE__ */ jsxs65("div", { className: "cube cube-1 bottom-cube", children: [
|
|
10261
|
+
/* @__PURE__ */ jsx98("div", { className: "face left" }),
|
|
10262
|
+
/* @__PURE__ */ jsx98("div", { className: "face right" }),
|
|
10263
|
+
/* @__PURE__ */ jsx98("div", { className: "face top" })
|
|
10204
10264
|
] }),
|
|
10205
|
-
/* @__PURE__ */
|
|
10206
|
-
/* @__PURE__ */
|
|
10207
|
-
/* @__PURE__ */
|
|
10208
|
-
/* @__PURE__ */
|
|
10265
|
+
/* @__PURE__ */ jsxs65("div", { className: "cube cube-2 bottom-cube", children: [
|
|
10266
|
+
/* @__PURE__ */ jsx98("div", { className: "face left" }),
|
|
10267
|
+
/* @__PURE__ */ jsx98("div", { className: "face right" }),
|
|
10268
|
+
/* @__PURE__ */ jsx98("div", { className: "face top" })
|
|
10209
10269
|
] }),
|
|
10210
|
-
/* @__PURE__ */
|
|
10211
|
-
/* @__PURE__ */
|
|
10212
|
-
/* @__PURE__ */
|
|
10213
|
-
/* @__PURE__ */
|
|
10270
|
+
/* @__PURE__ */ jsxs65("div", { className: "cube cube-3 bottom-cube", children: [
|
|
10271
|
+
/* @__PURE__ */ jsx98("div", { className: "face left" }),
|
|
10272
|
+
/* @__PURE__ */ jsx98("div", { className: "face right" }),
|
|
10273
|
+
/* @__PURE__ */ jsx98("div", { className: "face top" })
|
|
10214
10274
|
] })
|
|
10215
10275
|
] }),
|
|
10216
|
-
/* @__PURE__ */
|
|
10217
|
-
/* @__PURE__ */
|
|
10218
|
-
/* @__PURE__ */
|
|
10219
|
-
/* @__PURE__ */
|
|
10220
|
-
/* @__PURE__ */
|
|
10276
|
+
/* @__PURE__ */ jsxs65("div", { className: "top-cubes", children: [
|
|
10277
|
+
/* @__PURE__ */ jsxs65("div", { className: "cube cube-1", children: [
|
|
10278
|
+
/* @__PURE__ */ jsx98("div", { className: "face left" }),
|
|
10279
|
+
/* @__PURE__ */ jsx98("div", { className: "face right" }),
|
|
10280
|
+
/* @__PURE__ */ jsx98("div", { className: "face top" })
|
|
10221
10281
|
] }),
|
|
10222
|
-
/* @__PURE__ */
|
|
10223
|
-
/* @__PURE__ */
|
|
10224
|
-
/* @__PURE__ */
|
|
10225
|
-
/* @__PURE__ */
|
|
10282
|
+
/* @__PURE__ */ jsxs65("div", { className: "cube cube-2", children: [
|
|
10283
|
+
/* @__PURE__ */ jsx98("div", { className: "face left" }),
|
|
10284
|
+
/* @__PURE__ */ jsx98("div", { className: "face right" }),
|
|
10285
|
+
/* @__PURE__ */ jsx98("div", { className: "face top" })
|
|
10226
10286
|
] }),
|
|
10227
|
-
/* @__PURE__ */
|
|
10228
|
-
/* @__PURE__ */
|
|
10229
|
-
/* @__PURE__ */
|
|
10230
|
-
/* @__PURE__ */
|
|
10287
|
+
/* @__PURE__ */ jsxs65("div", { className: "cube cube-3", children: [
|
|
10288
|
+
/* @__PURE__ */ jsx98("div", { className: "face left" }),
|
|
10289
|
+
/* @__PURE__ */ jsx98("div", { className: "face right" }),
|
|
10290
|
+
/* @__PURE__ */ jsx98("div", { className: "face top" })
|
|
10231
10291
|
] })
|
|
10232
10292
|
] })
|
|
10233
10293
|
]
|
|
@@ -10235,7 +10295,7 @@ var LoadingAnimation = ({
|
|
|
10235
10295
|
);
|
|
10236
10296
|
};
|
|
10237
10297
|
var LoadingIcon = ({ height, width, ...props }) => {
|
|
10238
|
-
return /* @__PURE__ */
|
|
10298
|
+
return /* @__PURE__ */ jsx98(
|
|
10239
10299
|
"svg",
|
|
10240
10300
|
{
|
|
10241
10301
|
viewBox: "0 0 38 38",
|
|
@@ -10245,9 +10305,9 @@ var LoadingIcon = ({ height, width, ...props }) => {
|
|
|
10245
10305
|
stroke: "currentColor",
|
|
10246
10306
|
...props,
|
|
10247
10307
|
"data-testid": "loading-icon",
|
|
10248
|
-
children: /* @__PURE__ */
|
|
10249
|
-
/* @__PURE__ */
|
|
10250
|
-
/* @__PURE__ */
|
|
10308
|
+
children: /* @__PURE__ */ jsx98("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs65("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
|
|
10309
|
+
/* @__PURE__ */ jsx98("circle", { strokeOpacity: ".25", cx: "18", cy: "18", r: "18" }),
|
|
10310
|
+
/* @__PURE__ */ jsx98("path", { d: "M36 18c0-9.94-8.06-18-18-18", transform: "rotate(166.645 18 18)", children: /* @__PURE__ */ jsx98(
|
|
10251
10311
|
"animateTransform",
|
|
10252
10312
|
{
|
|
10253
10313
|
attributeName: "transform",
|
|
@@ -10269,8 +10329,8 @@ import { CgClose as CgClose4 } from "@react-icons/all-files/cg/CgClose";
|
|
|
10269
10329
|
import React17, { useEffect as useEffect12, useRef as useRef7 } from "react";
|
|
10270
10330
|
|
|
10271
10331
|
// src/components/Modal/Modal.styles.ts
|
|
10272
|
-
import { css as
|
|
10273
|
-
var modalStyles =
|
|
10332
|
+
import { css as css77 } from "@emotion/react";
|
|
10333
|
+
var modalStyles = css77`
|
|
10274
10334
|
border: none;
|
|
10275
10335
|
position: relative;
|
|
10276
10336
|
max-width: calc(100% - var(--spacing-base) * 2);
|
|
@@ -10284,16 +10344,16 @@ var modalStyles = css75`
|
|
|
10284
10344
|
opacity: 0.4;
|
|
10285
10345
|
}
|
|
10286
10346
|
`;
|
|
10287
|
-
var modalSizeSmall =
|
|
10347
|
+
var modalSizeSmall = css77`
|
|
10288
10348
|
width: clamp(280px, 100vw, 400px);
|
|
10289
10349
|
`;
|
|
10290
|
-
var modalSizeMedium =
|
|
10350
|
+
var modalSizeMedium = css77`
|
|
10291
10351
|
width: clamp(280px, 100vw, 600px);
|
|
10292
10352
|
`;
|
|
10293
|
-
var modalSizeLarge =
|
|
10353
|
+
var modalSizeLarge = css77`
|
|
10294
10354
|
width: clamp(280px, 100vw, 800px);
|
|
10295
10355
|
`;
|
|
10296
|
-
var modalInnerStyles =
|
|
10356
|
+
var modalInnerStyles = css77`
|
|
10297
10357
|
position: relative;
|
|
10298
10358
|
width: 100%;
|
|
10299
10359
|
display: flex;
|
|
@@ -10306,7 +10366,7 @@ var modalInnerStyles = css75`
|
|
|
10306
10366
|
box-shadow: var(--elevation-500);
|
|
10307
10367
|
border-radius: var(--rounded-base);
|
|
10308
10368
|
`;
|
|
10309
|
-
var modalHeaderStyles =
|
|
10369
|
+
var modalHeaderStyles = css77`
|
|
10310
10370
|
display: flex;
|
|
10311
10371
|
align-items: flex-start;
|
|
10312
10372
|
gap: var(--spacing-base);
|
|
@@ -10314,10 +10374,10 @@ var modalHeaderStyles = css75`
|
|
|
10314
10374
|
font-family: var(--ff-base);
|
|
10315
10375
|
line-height: 1.2;
|
|
10316
10376
|
`;
|
|
10317
|
-
var modalHeaderHeaderStyles =
|
|
10377
|
+
var modalHeaderHeaderStyles = css77`
|
|
10318
10378
|
max-width: calc(100% - 3rem);
|
|
10319
10379
|
`;
|
|
10320
|
-
var modalCloseButtonStyles =
|
|
10380
|
+
var modalCloseButtonStyles = css77`
|
|
10321
10381
|
background: transparent;
|
|
10322
10382
|
border: none;
|
|
10323
10383
|
color: var(--gray-300);
|
|
@@ -10332,7 +10392,7 @@ var modalCloseButtonStyles = css75`
|
|
|
10332
10392
|
color: var(--gray-400);
|
|
10333
10393
|
}
|
|
10334
10394
|
`;
|
|
10335
|
-
var modalContentStyles =
|
|
10395
|
+
var modalContentStyles = css77`
|
|
10336
10396
|
position: relative;
|
|
10337
10397
|
flex: 1;
|
|
10338
10398
|
overflow: auto;
|
|
@@ -10341,11 +10401,11 @@ var modalContentStyles = css75`
|
|
|
10341
10401
|
border-radius: var(--rounded-sm);
|
|
10342
10402
|
${scrollbarStyles}
|
|
10343
10403
|
`;
|
|
10344
|
-
var modalDialogWrapper = (hasCloseButton) =>
|
|
10404
|
+
var modalDialogWrapper = (hasCloseButton) => css77`
|
|
10345
10405
|
height: 100%;
|
|
10346
10406
|
padding: ${hasCloseButton ? 0 : "var(--spacing-md)"} var(--spacing-lg) var(--spacing-md);
|
|
10347
10407
|
`;
|
|
10348
|
-
var modalDialogInnerStyles =
|
|
10408
|
+
var modalDialogInnerStyles = css77`
|
|
10349
10409
|
// we need to override the gap of the modalInnerStyles when using a modal dialog
|
|
10350
10410
|
> div {
|
|
10351
10411
|
gap: 0;
|
|
@@ -10353,7 +10413,7 @@ var modalDialogInnerStyles = css75`
|
|
|
10353
10413
|
`;
|
|
10354
10414
|
|
|
10355
10415
|
// src/components/Modal/Modal.tsx
|
|
10356
|
-
import { jsx as
|
|
10416
|
+
import { jsx as jsx99, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
|
|
10357
10417
|
var defaultModalWidth = "75rem";
|
|
10358
10418
|
var defaultModalHeight = "51rem";
|
|
10359
10419
|
var Modal = React17.forwardRef(
|
|
@@ -10397,7 +10457,7 @@ var Modal = React17.forwardRef(
|
|
|
10397
10457
|
(_a2 = dialogRef.current) == null ? void 0 : _a2.close();
|
|
10398
10458
|
};
|
|
10399
10459
|
}, []);
|
|
10400
|
-
return /* @__PURE__ */
|
|
10460
|
+
return /* @__PURE__ */ jsx99(
|
|
10401
10461
|
"dialog",
|
|
10402
10462
|
{
|
|
10403
10463
|
ref: (element) => {
|
|
@@ -10435,7 +10495,7 @@ var Modal = React17.forwardRef(
|
|
|
10435
10495
|
e.preventDefault();
|
|
10436
10496
|
},
|
|
10437
10497
|
...modalProps,
|
|
10438
|
-
children: /* @__PURE__ */
|
|
10498
|
+
children: /* @__PURE__ */ jsx99(PortalContext.Provider, { value: dialogRef.current, children: /* @__PURE__ */ jsxs66(
|
|
10439
10499
|
"div",
|
|
10440
10500
|
{
|
|
10441
10501
|
css: [modalInnerStyles, { height: height === "auto" ? "auto" : "100%" }],
|
|
@@ -10444,9 +10504,9 @@ var Modal = React17.forwardRef(
|
|
|
10444
10504
|
mouseDownInsideModal.current = true;
|
|
10445
10505
|
},
|
|
10446
10506
|
children: [
|
|
10447
|
-
header2 || onRequestClose ? /* @__PURE__ */
|
|
10448
|
-
header2 ? /* @__PURE__ */
|
|
10449
|
-
onRequestClose ? /* @__PURE__ */
|
|
10507
|
+
header2 || onRequestClose ? /* @__PURE__ */ jsxs66("div", { css: modalHeaderStyles, children: [
|
|
10508
|
+
header2 ? /* @__PURE__ */ jsx99("div", { css: modalHeaderHeaderStyles, children: header2 }) : null,
|
|
10509
|
+
onRequestClose ? /* @__PURE__ */ jsx99(
|
|
10450
10510
|
Button,
|
|
10451
10511
|
{
|
|
10452
10512
|
type: "button",
|
|
@@ -10455,11 +10515,11 @@ var Modal = React17.forwardRef(
|
|
|
10455
10515
|
title: "Close dialog",
|
|
10456
10516
|
buttonType: "ghost",
|
|
10457
10517
|
"data-testid": "close-dialog",
|
|
10458
|
-
children: /* @__PURE__ */
|
|
10518
|
+
children: /* @__PURE__ */ jsx99(Icon, { icon: CgClose4, iconColor: "currentColor", size: 24 })
|
|
10459
10519
|
}
|
|
10460
10520
|
) : null
|
|
10461
10521
|
] }) : null,
|
|
10462
|
-
/* @__PURE__ */
|
|
10522
|
+
/* @__PURE__ */ jsx99(
|
|
10463
10523
|
"div",
|
|
10464
10524
|
{
|
|
10465
10525
|
css: [
|
|
@@ -10471,7 +10531,7 @@ var Modal = React17.forwardRef(
|
|
|
10471
10531
|
children
|
|
10472
10532
|
}
|
|
10473
10533
|
),
|
|
10474
|
-
buttonGroup ? /* @__PURE__ */
|
|
10534
|
+
buttonGroup ? /* @__PURE__ */ jsx99(HorizontalRhythm, { children: buttonGroup }) : null
|
|
10475
10535
|
]
|
|
10476
10536
|
}
|
|
10477
10537
|
) })
|
|
@@ -10483,10 +10543,10 @@ Modal.displayName = "Modal";
|
|
|
10483
10543
|
|
|
10484
10544
|
// src/components/Modal/ModalDialog.tsx
|
|
10485
10545
|
import { forwardRef as forwardRef18 } from "react";
|
|
10486
|
-
import { jsx as
|
|
10546
|
+
import { jsx as jsx100, jsxs as jsxs67 } from "@emotion/react/jsx-runtime";
|
|
10487
10547
|
var ModalDialog = forwardRef18(
|
|
10488
10548
|
({ header: header2, buttonGroup, modalSize = "lg", children, height = "auto", onRequestClose, ...props }, ref) => {
|
|
10489
|
-
return /* @__PURE__ */
|
|
10549
|
+
return /* @__PURE__ */ jsx100(
|
|
10490
10550
|
Modal,
|
|
10491
10551
|
{
|
|
10492
10552
|
...props,
|
|
@@ -10498,10 +10558,10 @@ var ModalDialog = forwardRef18(
|
|
|
10498
10558
|
withoutContentPadding: true,
|
|
10499
10559
|
css: modalDialogInnerStyles,
|
|
10500
10560
|
width: "",
|
|
10501
|
-
children: /* @__PURE__ */
|
|
10502
|
-
/* @__PURE__ */
|
|
10503
|
-
/* @__PURE__ */
|
|
10504
|
-
/* @__PURE__ */
|
|
10561
|
+
children: /* @__PURE__ */ jsxs67(VerticalRhythm, { css: modalDialogWrapper(Boolean(onRequestClose)), children: [
|
|
10562
|
+
/* @__PURE__ */ jsx100("div", { css: modalHeaderStyles, children: header2 }),
|
|
10563
|
+
/* @__PURE__ */ jsx100("div", { css: { flex: 1 }, children }),
|
|
10564
|
+
/* @__PURE__ */ jsx100(HorizontalRhythm, { children: buttonGroup })
|
|
10505
10565
|
] })
|
|
10506
10566
|
}
|
|
10507
10567
|
);
|
|
@@ -10513,18 +10573,18 @@ ModalDialog.displayName = "ModalDialog";
|
|
|
10513
10573
|
import { forwardRef as forwardRef19 } from "react";
|
|
10514
10574
|
|
|
10515
10575
|
// src/components/Objects/styles/ObjectGridContainer.styles.ts
|
|
10516
|
-
import { css as
|
|
10517
|
-
var ObjectGridContainer = (gridCount) =>
|
|
10576
|
+
import { css as css78 } from "@emotion/react";
|
|
10577
|
+
var ObjectGridContainer = (gridCount) => css78`
|
|
10518
10578
|
display: grid;
|
|
10519
10579
|
grid-template-columns: repeat(${gridCount}, minmax(250px, 1fr));
|
|
10520
10580
|
gap: var(--spacing-base);
|
|
10521
10581
|
`;
|
|
10522
10582
|
|
|
10523
10583
|
// src/components/Objects/ObjectGridContainer.tsx
|
|
10524
|
-
import { jsx as
|
|
10584
|
+
import { jsx as jsx101 } from "@emotion/react/jsx-runtime";
|
|
10525
10585
|
var ObjectGridContainer2 = forwardRef19(
|
|
10526
10586
|
({ gridCount = 3, children, ...props }, ref) => {
|
|
10527
|
-
return /* @__PURE__ */
|
|
10587
|
+
return /* @__PURE__ */ jsx101(
|
|
10528
10588
|
"div",
|
|
10529
10589
|
{
|
|
10530
10590
|
ref,
|
|
@@ -10538,8 +10598,8 @@ var ObjectGridContainer2 = forwardRef19(
|
|
|
10538
10598
|
);
|
|
10539
10599
|
|
|
10540
10600
|
// src/components/Objects/styles/ObjectGridItem.styles.ts
|
|
10541
|
-
import { css as
|
|
10542
|
-
var ObjectGridItem =
|
|
10601
|
+
import { css as css79 } from "@emotion/react";
|
|
10602
|
+
var ObjectGridItem = css79`
|
|
10543
10603
|
border: 1px solid var(--gray-300);
|
|
10544
10604
|
border-radius: var(--rounded-base);
|
|
10545
10605
|
background: var(--white);
|
|
@@ -10558,7 +10618,7 @@ var ObjectGridItem = css77`
|
|
|
10558
10618
|
}
|
|
10559
10619
|
}
|
|
10560
10620
|
`;
|
|
10561
|
-
var ObjectGridWithOnClick =
|
|
10621
|
+
var ObjectGridWithOnClick = css79`
|
|
10562
10622
|
cursor: pointer;
|
|
10563
10623
|
&:hover,
|
|
10564
10624
|
&:focus {
|
|
@@ -10566,12 +10626,12 @@ var ObjectGridWithOnClick = css77`
|
|
|
10566
10626
|
transition: border-color var(--duration-fast) var(--timing-ease-out);
|
|
10567
10627
|
}
|
|
10568
10628
|
`;
|
|
10569
|
-
var ObjectGridItemMediaWrapper =
|
|
10629
|
+
var ObjectGridItemMediaWrapper = css79`
|
|
10570
10630
|
display: flex;
|
|
10571
10631
|
flex: 1 1 0;
|
|
10572
10632
|
position: relative;
|
|
10573
10633
|
`;
|
|
10574
|
-
var ObjectGridItemMediaInner =
|
|
10634
|
+
var ObjectGridItemMediaInner = css79`
|
|
10575
10635
|
background: var(--gray-50);
|
|
10576
10636
|
border-radius: var(--rounded-base) var(--rounded-base) 0 0;
|
|
10577
10637
|
position: relative;
|
|
@@ -10583,7 +10643,7 @@ var ObjectGridItemMediaInner = css77`
|
|
|
10583
10643
|
height: 100%;
|
|
10584
10644
|
z-index: 0;
|
|
10585
10645
|
`;
|
|
10586
|
-
var ObjectGridItemContentWrapper =
|
|
10646
|
+
var ObjectGridItemContentWrapper = css79`
|
|
10587
10647
|
display: grid;
|
|
10588
10648
|
grid-template-columns: 1fr auto;
|
|
10589
10649
|
padding: var(--spacing-sm);
|
|
@@ -10591,15 +10651,15 @@ var ObjectGridItemContentWrapper = css77`
|
|
|
10591
10651
|
min-height: 52px;
|
|
10592
10652
|
width: 100%;
|
|
10593
10653
|
`;
|
|
10594
|
-
var ObjectGridItemInnerWrapper =
|
|
10654
|
+
var ObjectGridItemInnerWrapper = css79`
|
|
10595
10655
|
min-width: 0;
|
|
10596
10656
|
`;
|
|
10597
|
-
var ObjectGridItemImage =
|
|
10657
|
+
var ObjectGridItemImage = css79`
|
|
10598
10658
|
object-fit: cover;
|
|
10599
10659
|
width: 100%;
|
|
10600
10660
|
height: auto;
|
|
10601
10661
|
`;
|
|
10602
|
-
var ObjectGridItemSubtitle =
|
|
10662
|
+
var ObjectGridItemSubtitle = css79`
|
|
10603
10663
|
color: var(--gray-500);
|
|
10604
10664
|
font-size: var(--fs-sm);
|
|
10605
10665
|
white-space: nowrap;
|
|
@@ -10609,7 +10669,7 @@ var ObjectGridItemSubtitle = css77`
|
|
|
10609
10669
|
`;
|
|
10610
10670
|
|
|
10611
10671
|
// src/components/Objects/ObjectGridItem.tsx
|
|
10612
|
-
import { jsx as
|
|
10672
|
+
import { jsx as jsx102, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
|
|
10613
10673
|
var ObjectGridItem2 = ({
|
|
10614
10674
|
header: header2,
|
|
10615
10675
|
cover,
|
|
@@ -10624,20 +10684,20 @@ var ObjectGridItem2 = ({
|
|
|
10624
10684
|
const onStopPropagation = (e) => {
|
|
10625
10685
|
e.stopPropagation();
|
|
10626
10686
|
};
|
|
10627
|
-
return /* @__PURE__ */
|
|
10687
|
+
return /* @__PURE__ */ jsxs68(
|
|
10628
10688
|
"div",
|
|
10629
10689
|
{
|
|
10630
10690
|
css: [ObjectGridItem, props.onClick ? ObjectGridWithOnClick : void 0],
|
|
10631
10691
|
"aria-selected": isSelected,
|
|
10632
10692
|
...props,
|
|
10633
10693
|
children: [
|
|
10634
|
-
/* @__PURE__ */
|
|
10635
|
-
/* @__PURE__ */
|
|
10636
|
-
/* @__PURE__ */
|
|
10637
|
-
/* @__PURE__ */
|
|
10638
|
-
/* @__PURE__ */
|
|
10694
|
+
/* @__PURE__ */ jsx102("div", { css: ObjectGridItemMediaWrapper, children: /* @__PURE__ */ jsx102("div", { css: ObjectGridItemMediaInner, children: cover }) }),
|
|
10695
|
+
/* @__PURE__ */ jsxs68("div", { css: ObjectGridItemContentWrapper, children: [
|
|
10696
|
+
/* @__PURE__ */ jsxs68(VerticalRhythm, { gap: "0", css: ObjectGridItemInnerWrapper, children: [
|
|
10697
|
+
/* @__PURE__ */ jsx102(HorizontalRhythm, { gap: "xs", align: "center", children: header2 }),
|
|
10698
|
+
/* @__PURE__ */ jsx102("div", { css: ObjectGridItemSubtitle, children })
|
|
10639
10699
|
] }),
|
|
10640
|
-
/* @__PURE__ */
|
|
10700
|
+
/* @__PURE__ */ jsxs68(
|
|
10641
10701
|
HorizontalRhythm,
|
|
10642
10702
|
{
|
|
10643
10703
|
gap: "xs",
|
|
@@ -10646,10 +10706,10 @@ var ObjectGridItem2 = ({
|
|
|
10646
10706
|
onClick: hasOnClick ? onStopPropagation : void 0,
|
|
10647
10707
|
children: [
|
|
10648
10708
|
rightSlot,
|
|
10649
|
-
menuItems ? /* @__PURE__ */
|
|
10709
|
+
menuItems ? /* @__PURE__ */ jsx102(
|
|
10650
10710
|
Menu,
|
|
10651
10711
|
{
|
|
10652
|
-
menuTrigger: /* @__PURE__ */
|
|
10712
|
+
menuTrigger: /* @__PURE__ */ jsx102(MenuThreeDots, { "data-testid": menuTestId != null ? menuTestId : "object-grid-item-menu-btn" }),
|
|
10653
10713
|
placement: "bottom-end",
|
|
10654
10714
|
children: menuItems
|
|
10655
10715
|
}
|
|
@@ -10664,8 +10724,8 @@ var ObjectGridItem2 = ({
|
|
|
10664
10724
|
};
|
|
10665
10725
|
|
|
10666
10726
|
// src/components/Objects/styles/ObjectGridItemCardCover.styles.ts
|
|
10667
|
-
import { css as
|
|
10668
|
-
var CoverImage =
|
|
10727
|
+
import { css as css80 } from "@emotion/react";
|
|
10728
|
+
var CoverImage = css80`
|
|
10669
10729
|
aspect-ratio: 16/9;
|
|
10670
10730
|
max-width: 100%;
|
|
10671
10731
|
max-height: 100%;
|
|
@@ -10674,12 +10734,12 @@ var CoverImage = css78`
|
|
|
10674
10734
|
padding: var(--spacing-sm);
|
|
10675
10735
|
object-fit: contain;
|
|
10676
10736
|
`;
|
|
10677
|
-
var CoverContainer =
|
|
10737
|
+
var CoverContainer = css80`
|
|
10678
10738
|
aspect-ratio: 16/9;
|
|
10679
10739
|
width: 100%;
|
|
10680
10740
|
height: 100%;
|
|
10681
10741
|
`;
|
|
10682
|
-
var CoverIconWrapper =
|
|
10742
|
+
var CoverIconWrapper = css80`
|
|
10683
10743
|
position: relative;
|
|
10684
10744
|
display: flex;
|
|
10685
10745
|
align-items: center;
|
|
@@ -10687,7 +10747,7 @@ var CoverIconWrapper = css78`
|
|
|
10687
10747
|
flex: 1;
|
|
10688
10748
|
height: 100%;
|
|
10689
10749
|
`;
|
|
10690
|
-
var CoverIconGhost =
|
|
10750
|
+
var CoverIconGhost = css80`
|
|
10691
10751
|
position: absolute;
|
|
10692
10752
|
width: 60%;
|
|
10693
10753
|
height: auto;
|
|
@@ -10695,7 +10755,7 @@ var CoverIconGhost = css78`
|
|
|
10695
10755
|
opacity: 0.05;
|
|
10696
10756
|
transform: rotateZ(-15deg) translate(35%, 30%);
|
|
10697
10757
|
`;
|
|
10698
|
-
var CoverSlot =
|
|
10758
|
+
var CoverSlot = css80`
|
|
10699
10759
|
align-items: center;
|
|
10700
10760
|
background: var(--gray-50);
|
|
10701
10761
|
display: flex;
|
|
@@ -10706,15 +10766,15 @@ var CoverSlot = css78`
|
|
|
10706
10766
|
width: 24px;
|
|
10707
10767
|
height: 24px;
|
|
10708
10768
|
`;
|
|
10709
|
-
var CoverSlotLeft =
|
|
10769
|
+
var CoverSlotLeft = css80`
|
|
10710
10770
|
border-bottom-right-radius: var(--rounded-base);
|
|
10711
10771
|
left: var(--spacing-sm);
|
|
10712
10772
|
`;
|
|
10713
|
-
var CoverSlotRight =
|
|
10773
|
+
var CoverSlotRight = css80`
|
|
10714
10774
|
border-bottom-left-radius: var(--rounded-base);
|
|
10715
10775
|
right: var(--spacing-sm);
|
|
10716
10776
|
`;
|
|
10717
|
-
var CoverButton =
|
|
10777
|
+
var CoverButton = css80`
|
|
10718
10778
|
align-items: stretch;
|
|
10719
10779
|
border: none;
|
|
10720
10780
|
background: none;
|
|
@@ -10727,27 +10787,27 @@ var CoverButton = css78`
|
|
|
10727
10787
|
outline: none;
|
|
10728
10788
|
}
|
|
10729
10789
|
`;
|
|
10730
|
-
var CoverSlotBottom =
|
|
10790
|
+
var CoverSlotBottom = css80`
|
|
10731
10791
|
position: absolute;
|
|
10732
10792
|
bottom: var(--spacing-base);
|
|
10733
10793
|
`;
|
|
10734
|
-
var CoverSlotBottomLeft =
|
|
10794
|
+
var CoverSlotBottomLeft = css80`
|
|
10735
10795
|
left: var(--spacing-base);
|
|
10736
10796
|
`;
|
|
10737
|
-
var CoverSlotBottomRight =
|
|
10797
|
+
var CoverSlotBottomRight = css80`
|
|
10738
10798
|
right: var(--spacing-base);
|
|
10739
10799
|
`;
|
|
10740
|
-
var CoverSelectedChip =
|
|
10800
|
+
var CoverSelectedChip = css80`
|
|
10741
10801
|
animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
|
|
10742
10802
|
opacity: 0;
|
|
10743
10803
|
`;
|
|
10744
10804
|
|
|
10745
10805
|
// src/components/Objects/ObjectGridItemCardCover.tsx
|
|
10746
|
-
import { Fragment as Fragment10, jsx as
|
|
10806
|
+
import { Fragment as Fragment10, jsx as jsx103, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
|
|
10747
10807
|
var ObjectGridItemCardCover = (props) => {
|
|
10748
10808
|
if ("imageUrl" in props && props.imageUrl) {
|
|
10749
10809
|
const { imageUrl, srcSet, alt } = props;
|
|
10750
|
-
return /* @__PURE__ */
|
|
10810
|
+
return /* @__PURE__ */ jsx103("div", { css: CoverContainer, children: /* @__PURE__ */ jsx103(
|
|
10751
10811
|
"img",
|
|
10752
10812
|
{
|
|
10753
10813
|
src: imageUrl,
|
|
@@ -10762,9 +10822,9 @@ var ObjectGridItemCardCover = (props) => {
|
|
|
10762
10822
|
}
|
|
10763
10823
|
if ("icon" in props && props.icon) {
|
|
10764
10824
|
const { icon, iconColor } = props;
|
|
10765
|
-
return /* @__PURE__ */
|
|
10766
|
-
/* @__PURE__ */
|
|
10767
|
-
/* @__PURE__ */
|
|
10825
|
+
return /* @__PURE__ */ jsx103("div", { css: CoverContainer, children: /* @__PURE__ */ jsxs69("div", { css: CoverIconWrapper, "data-testid": "object-grid-item-thumbnail", children: [
|
|
10826
|
+
/* @__PURE__ */ jsx103(Icon, { icon, iconColor: iconColor != null ? iconColor : "currentColor", css: CoverIconGhost }),
|
|
10827
|
+
/* @__PURE__ */ jsx103(Icon, { icon, iconColor: iconColor != null ? iconColor : "currentColor", size: 48 })
|
|
10768
10828
|
] }) });
|
|
10769
10829
|
}
|
|
10770
10830
|
};
|
|
@@ -10775,12 +10835,12 @@ var ObjectGridItemCover = ({
|
|
|
10775
10835
|
coverSlotBottomRight,
|
|
10776
10836
|
...props
|
|
10777
10837
|
}) => {
|
|
10778
|
-
return /* @__PURE__ */
|
|
10779
|
-
coverSlotLeft ? /* @__PURE__ */
|
|
10780
|
-
/* @__PURE__ */
|
|
10781
|
-
coverSlotRight ? /* @__PURE__ */
|
|
10782
|
-
coverSlotBottomLeft ? /* @__PURE__ */
|
|
10783
|
-
coverSlotBottomRight ? /* @__PURE__ */
|
|
10838
|
+
return /* @__PURE__ */ jsxs69(Fragment10, { children: [
|
|
10839
|
+
coverSlotLeft ? /* @__PURE__ */ jsx103("div", { css: [CoverSlot, CoverSlotLeft], children: coverSlotLeft }) : null,
|
|
10840
|
+
/* @__PURE__ */ jsx103(ObjectGridItemCardCover, { ...props }),
|
|
10841
|
+
coverSlotRight ? /* @__PURE__ */ jsx103("div", { css: [CoverSlot, CoverSlotRight], children: coverSlotRight }) : null,
|
|
10842
|
+
coverSlotBottomLeft ? /* @__PURE__ */ jsx103("div", { css: [CoverSlotBottom, CoverSlotBottomLeft], children: coverSlotBottomLeft }) : null,
|
|
10843
|
+
coverSlotBottomRight ? /* @__PURE__ */ jsx103("div", { css: [CoverSlotBottom, CoverSlotBottomRight], children: coverSlotBottomRight }) : null
|
|
10784
10844
|
] });
|
|
10785
10845
|
};
|
|
10786
10846
|
var ObjectGridItemCoverButton = ({
|
|
@@ -10790,7 +10850,7 @@ var ObjectGridItemCoverButton = ({
|
|
|
10790
10850
|
selectedText = "selected",
|
|
10791
10851
|
...props
|
|
10792
10852
|
}) => {
|
|
10793
|
-
return /* @__PURE__ */
|
|
10853
|
+
return /* @__PURE__ */ jsx103(
|
|
10794
10854
|
"button",
|
|
10795
10855
|
{
|
|
10796
10856
|
type: "button",
|
|
@@ -10800,11 +10860,11 @@ var ObjectGridItemCoverButton = ({
|
|
|
10800
10860
|
onSelection(id);
|
|
10801
10861
|
},
|
|
10802
10862
|
"aria-selected": isSelected,
|
|
10803
|
-
children: /* @__PURE__ */
|
|
10863
|
+
children: /* @__PURE__ */ jsx103(
|
|
10804
10864
|
ObjectGridItemCover,
|
|
10805
10865
|
{
|
|
10806
10866
|
...props,
|
|
10807
|
-
coverSlotBottomRight: isSelected ? /* @__PURE__ */
|
|
10867
|
+
coverSlotBottomRight: isSelected ? /* @__PURE__ */ jsx103("div", { css: CoverSelectedChip, children: /* @__PURE__ */ jsx103(Chip, { text: selectedText, size: "xs", theme: "accent-dark" }) }) : null
|
|
10808
10868
|
}
|
|
10809
10869
|
)
|
|
10810
10870
|
}
|
|
@@ -10815,8 +10875,8 @@ var ObjectGridItemCoverButton = ({
|
|
|
10815
10875
|
import { useEffect as useEffect13, useRef as useRef8, useState as useState12 } from "react";
|
|
10816
10876
|
|
|
10817
10877
|
// src/components/Objects/styles/ObjectGridItemHeading.styles.ts
|
|
10818
|
-
import { css as
|
|
10819
|
-
var ObjectGridItemHeading =
|
|
10878
|
+
import { css as css81 } from "@emotion/react";
|
|
10879
|
+
var ObjectGridItemHeading = css81`
|
|
10820
10880
|
color: var(--gray-500);
|
|
10821
10881
|
overflow: hidden;
|
|
10822
10882
|
text-overflow: ellipsis;
|
|
@@ -10825,12 +10885,12 @@ var ObjectGridItemHeading = css79`
|
|
|
10825
10885
|
max-width: 100%;
|
|
10826
10886
|
font-size: var(--fs-sm);
|
|
10827
10887
|
`;
|
|
10828
|
-
var PopoverContent =
|
|
10888
|
+
var PopoverContent = css81`
|
|
10829
10889
|
min-width: 50px;
|
|
10830
10890
|
`;
|
|
10831
10891
|
|
|
10832
10892
|
// src/components/Objects/ObjectGridItemHeading.tsx
|
|
10833
|
-
import { jsx as
|
|
10893
|
+
import { jsx as jsx104, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
|
|
10834
10894
|
var ObjectGridItemHeading2 = ({
|
|
10835
10895
|
heading,
|
|
10836
10896
|
beforeHeadingSlot,
|
|
@@ -10860,15 +10920,15 @@ var ObjectGridItemHeading2 = ({
|
|
|
10860
10920
|
}
|
|
10861
10921
|
};
|
|
10862
10922
|
}, []);
|
|
10863
|
-
return /* @__PURE__ */
|
|
10864
|
-
beforeHeadingSlot ? /* @__PURE__ */
|
|
10865
|
-
/* @__PURE__ */
|
|
10866
|
-
afterHeadingSlot ? /* @__PURE__ */
|
|
10923
|
+
return /* @__PURE__ */ jsxs70(HorizontalRhythm, { align: "center", gap: "xs", css: { minWidth: 0 }, children: [
|
|
10924
|
+
beforeHeadingSlot ? /* @__PURE__ */ jsx104(HorizontalRhythm, { gap: "xs", align: "center", onClick: onStopPropagation, children: beforeHeadingSlot }) : null,
|
|
10925
|
+
/* @__PURE__ */ jsx104(Tooltip, { title: hasTruncation && tooltip ? tooltip : "", children: /* @__PURE__ */ jsx104("div", { role: "heading", css: ObjectGridItemHeading, ref: headingRef, ...props, children: heading }) }),
|
|
10926
|
+
afterHeadingSlot ? /* @__PURE__ */ jsx104(HorizontalRhythm, { gap: "xs", align: "center", onClick: onStopPropagation, children: afterHeadingSlot }) : null
|
|
10867
10927
|
] });
|
|
10868
10928
|
};
|
|
10869
10929
|
|
|
10870
10930
|
// src/components/Objects/ObjectGridItemIconWithTooltip.tsx
|
|
10871
|
-
import { jsx as
|
|
10931
|
+
import { jsx as jsx105 } from "@emotion/react/jsx-runtime";
|
|
10872
10932
|
var ObjectGridItemIconWithTooltip = ({
|
|
10873
10933
|
tooltipTitle,
|
|
10874
10934
|
placement = "bottom-start",
|
|
@@ -10876,19 +10936,19 @@ var ObjectGridItemIconWithTooltip = ({
|
|
|
10876
10936
|
iconColor = "accent-dark",
|
|
10877
10937
|
...props
|
|
10878
10938
|
}) => {
|
|
10879
|
-
return /* @__PURE__ */
|
|
10939
|
+
return /* @__PURE__ */ jsx105(Tooltip, { title: tooltipTitle, placement, ...props, css: { minWidth: "max-content" }, children: /* @__PURE__ */ jsx105("span", { css: { whiteSpace: "nowrap" }, children: /* @__PURE__ */ jsx105(Icon, { icon, iconColor, size: "1rem" }) }) });
|
|
10880
10940
|
};
|
|
10881
10941
|
|
|
10882
10942
|
// src/components/Objects/styles/ObjectGridItemLoadingSkeleton.styles.ts
|
|
10883
|
-
import { css as
|
|
10884
|
-
var ObjectGridItemLoadingSkeleton =
|
|
10943
|
+
import { css as css82 } from "@emotion/react";
|
|
10944
|
+
var ObjectGridItemLoadingSkeleton = css82`
|
|
10885
10945
|
border-radius: var(--rounded-base);
|
|
10886
10946
|
display: flex;
|
|
10887
10947
|
flex-direction: column;
|
|
10888
10948
|
gap: var(--spacing-sm);
|
|
10889
10949
|
transition: border-color var(--duration-fast) var(--timing-ease-out);
|
|
10890
10950
|
`;
|
|
10891
|
-
var ObjectGridItemLoadingText = (textLength) =>
|
|
10951
|
+
var ObjectGridItemLoadingText = (textLength) => css82`
|
|
10892
10952
|
animation: ${fadeIn} 1s linear infinite alternate;
|
|
10893
10953
|
border-radius: var(--rounded-base);
|
|
10894
10954
|
background: var(--gray-300);
|
|
@@ -10896,7 +10956,7 @@ var ObjectGridItemLoadingText = (textLength) => css80`
|
|
|
10896
10956
|
width: clamp(24px, 100%, ${textLength});
|
|
10897
10957
|
height: var(--fs-base);
|
|
10898
10958
|
`;
|
|
10899
|
-
var ObjectGridItemLoadingImageWrapper =
|
|
10959
|
+
var ObjectGridItemLoadingImageWrapper = css82`
|
|
10900
10960
|
aspect-ratio: 16/9;
|
|
10901
10961
|
max-width: 100%;
|
|
10902
10962
|
max-height: 100%;
|
|
@@ -10904,7 +10964,7 @@ var ObjectGridItemLoadingImageWrapper = css80`
|
|
|
10904
10964
|
padding: var(--spacing-sm);
|
|
10905
10965
|
overflow: hidden;
|
|
10906
10966
|
`;
|
|
10907
|
-
var ObjectGridItemLoadingImage =
|
|
10967
|
+
var ObjectGridItemLoadingImage = css82`
|
|
10908
10968
|
animation: ${fadeIn} 1s linear infinite alternate;
|
|
10909
10969
|
border-radius: var(--rounded-base);
|
|
10910
10970
|
background: var(--gray-300);
|
|
@@ -10913,21 +10973,21 @@ var ObjectGridItemLoadingImage = css80`
|
|
|
10913
10973
|
height: auto;
|
|
10914
10974
|
aspect-ratio: 1;
|
|
10915
10975
|
`;
|
|
10916
|
-
var ObjectGridItemLoadingContentWrapper =
|
|
10976
|
+
var ObjectGridItemLoadingContentWrapper = css82`
|
|
10917
10977
|
padding: 0 var(--spacing-sm) var(--spacing-sm);
|
|
10918
10978
|
min-height: 52px;
|
|
10919
10979
|
`;
|
|
10920
|
-
var ObjectGridItemLoadingContentContainer =
|
|
10980
|
+
var ObjectGridItemLoadingContentContainer = css82`
|
|
10921
10981
|
flex-grow: 1;
|
|
10922
10982
|
gap: var(--spacing-xs);
|
|
10923
10983
|
`;
|
|
10924
10984
|
|
|
10925
10985
|
// src/components/Objects/ObjectGridItemLoadingSkeleton.tsx
|
|
10926
|
-
import { jsx as
|
|
10986
|
+
import { jsx as jsx106, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
|
|
10927
10987
|
var ObjectGridItemLoadingSkeleton2 = () => {
|
|
10928
|
-
return /* @__PURE__ */
|
|
10929
|
-
/* @__PURE__ */
|
|
10930
|
-
/* @__PURE__ */
|
|
10988
|
+
return /* @__PURE__ */ jsxs71("div", { css: ObjectGridItemLoadingSkeleton, children: [
|
|
10989
|
+
/* @__PURE__ */ jsx106("div", { css: ObjectGridItemLoadingImageWrapper, "data-testid": "object-grid-item-cover-skeleton", children: /* @__PURE__ */ jsx106("span", { css: ObjectGridItemLoadingImage, role: "presentation" }) }),
|
|
10990
|
+
/* @__PURE__ */ jsxs71(
|
|
10931
10991
|
HorizontalRhythm,
|
|
10932
10992
|
{
|
|
10933
10993
|
css: ObjectGridItemLoadingContentWrapper,
|
|
@@ -10935,13 +10995,13 @@ var ObjectGridItemLoadingSkeleton2 = () => {
|
|
|
10935
10995
|
justify: "space-between",
|
|
10936
10996
|
gap: "sm",
|
|
10937
10997
|
children: [
|
|
10938
|
-
/* @__PURE__ */
|
|
10939
|
-
/* @__PURE__ */
|
|
10940
|
-
/* @__PURE__ */
|
|
10998
|
+
/* @__PURE__ */ jsxs71(VerticalRhythm, { css: ObjectGridItemLoadingContentContainer, gap: "0", children: [
|
|
10999
|
+
/* @__PURE__ */ jsx106(HorizontalRhythm, { gap: "xs", align: "center", children: /* @__PURE__ */ jsx106("span", { role: "presentation", css: ObjectGridItemLoadingText("18ch") }) }),
|
|
11000
|
+
/* @__PURE__ */ jsx106("span", { role: "presentation", css: ObjectGridItemLoadingText("12ch") })
|
|
10941
11001
|
] }),
|
|
10942
|
-
/* @__PURE__ */
|
|
10943
|
-
/* @__PURE__ */
|
|
10944
|
-
/* @__PURE__ */
|
|
11002
|
+
/* @__PURE__ */ jsxs71(HorizontalRhythm, { css: ObjectGridItemLoadingContentContainer, gap: "xs", justify: "flex-end", children: [
|
|
11003
|
+
/* @__PURE__ */ jsx106("span", { role: "presentation", css: ObjectGridItemLoadingText("6ch") }),
|
|
11004
|
+
/* @__PURE__ */ jsx106("span", { role: "presentation", css: ObjectGridItemLoadingText("24px") })
|
|
10945
11005
|
] })
|
|
10946
11006
|
]
|
|
10947
11007
|
}
|
|
@@ -10950,8 +11010,8 @@ var ObjectGridItemLoadingSkeleton2 = () => {
|
|
|
10950
11010
|
};
|
|
10951
11011
|
|
|
10952
11012
|
// src/components/Objects/styles/ObjectListItem.styles.ts
|
|
10953
|
-
import { css as
|
|
10954
|
-
var ObjectListItem =
|
|
11013
|
+
import { css as css83 } from "@emotion/react";
|
|
11014
|
+
var ObjectListItem = css83`
|
|
10955
11015
|
background: var(--white);
|
|
10956
11016
|
display: grid;
|
|
10957
11017
|
gap: var(--spacing-sm);
|
|
@@ -10964,25 +11024,25 @@ var ObjectListItem = css81`
|
|
|
10964
11024
|
background: var(--gray-50);
|
|
10965
11025
|
}
|
|
10966
11026
|
`;
|
|
10967
|
-
var ObjectListItemSingle =
|
|
11027
|
+
var ObjectListItemSingle = css83`
|
|
10968
11028
|
align-items: center;
|
|
10969
11029
|
`;
|
|
10970
|
-
var ObjectListItemContentWrapper =
|
|
11030
|
+
var ObjectListItemContentWrapper = css83`
|
|
10971
11031
|
display: grid;
|
|
10972
11032
|
gap: var(--spacing-sm);
|
|
10973
11033
|
justify-content: space-between;
|
|
10974
11034
|
flex-grow: 1;
|
|
10975
11035
|
`;
|
|
10976
|
-
var ObjectListItemRightSlot =
|
|
11036
|
+
var ObjectListItemRightSlot = css83`
|
|
10977
11037
|
display: flex;
|
|
10978
11038
|
gap: var(--spacing-sm);
|
|
10979
11039
|
`;
|
|
10980
|
-
var ObjectListItemContainer =
|
|
11040
|
+
var ObjectListItemContainer = css83`
|
|
10981
11041
|
> [role='listitem']:not(:first-of-type) {
|
|
10982
11042
|
border-top: 1px solid var(--gray-200);
|
|
10983
11043
|
}
|
|
10984
11044
|
`;
|
|
10985
|
-
var ObjectListItemCover =
|
|
11045
|
+
var ObjectListItemCover = css83`
|
|
10986
11046
|
align-items: center;
|
|
10987
11047
|
background: var(--gray-100);
|
|
10988
11048
|
color: var(--gray-500);
|
|
@@ -10992,12 +11052,12 @@ var ObjectListItemCover = css81`
|
|
|
10992
11052
|
text-align: center;
|
|
10993
11053
|
font-size: var(--fs-xs);
|
|
10994
11054
|
`;
|
|
10995
|
-
var ObjectListItemImage =
|
|
11055
|
+
var ObjectListItemImage = css83`
|
|
10996
11056
|
object-fit: cover;
|
|
10997
11057
|
width: 100%;
|
|
10998
11058
|
height: 100%;
|
|
10999
11059
|
`;
|
|
11000
|
-
var ObjectListItemLoading =
|
|
11060
|
+
var ObjectListItemLoading = css83`
|
|
11001
11061
|
animation: ${skeletonLoading} 1s linear infinite alternate;
|
|
11002
11062
|
background: var(--white);
|
|
11003
11063
|
display: flex;
|
|
@@ -11005,10 +11065,10 @@ var ObjectListItemLoading = css81`
|
|
|
11005
11065
|
flex-grow: 1;
|
|
11006
11066
|
padding: var(--spacing-sm);
|
|
11007
11067
|
`;
|
|
11008
|
-
var ObjectListItemLoadingInner =
|
|
11068
|
+
var ObjectListItemLoadingInner = css83`
|
|
11009
11069
|
flex-grow: 1;
|
|
11010
11070
|
`;
|
|
11011
|
-
var ObjectListItemLoadingText = (textLength) =>
|
|
11071
|
+
var ObjectListItemLoadingText = (textLength) => css83`
|
|
11012
11072
|
animation: ${fadeIn} 1s linear infinite alternate;
|
|
11013
11073
|
border-radius: var(--rounded-base);
|
|
11014
11074
|
background: var(--gray-300);
|
|
@@ -11016,7 +11076,7 @@ var ObjectListItemLoadingText = (textLength) => css81`
|
|
|
11016
11076
|
width: clamp(10ch, 100%, ${textLength});
|
|
11017
11077
|
height: var(--fs-base);
|
|
11018
11078
|
`;
|
|
11019
|
-
var ObjectListItemLoadingImage =
|
|
11079
|
+
var ObjectListItemLoadingImage = css83`
|
|
11020
11080
|
animation: ${fadeIn} 1s linear infinite alternate;
|
|
11021
11081
|
border-radius: var(--rounded-base);
|
|
11022
11082
|
background: var(--gray-300);
|
|
@@ -11024,18 +11084,18 @@ var ObjectListItemLoadingImage = css81`
|
|
|
11024
11084
|
width: 80px;
|
|
11025
11085
|
height: 55px;
|
|
11026
11086
|
`;
|
|
11027
|
-
var ObjectListItemHeadingWrapper =
|
|
11087
|
+
var ObjectListItemHeadingWrapper = css83`
|
|
11028
11088
|
display: flex;
|
|
11029
11089
|
gap: var(--spacing-xs);
|
|
11030
11090
|
`;
|
|
11031
11091
|
|
|
11032
11092
|
// src/components/Objects/ObjectItemLoadingSkeleton.tsx
|
|
11033
|
-
import { jsx as
|
|
11093
|
+
import { jsx as jsx107, jsxs as jsxs72 } from "@emotion/react/jsx-runtime";
|
|
11034
11094
|
var ObjectItemLoadingSkeleton = ({
|
|
11035
11095
|
showCover,
|
|
11036
11096
|
renderAs = "single"
|
|
11037
11097
|
}) => {
|
|
11038
|
-
return /* @__PURE__ */
|
|
11098
|
+
return /* @__PURE__ */ jsxs72(
|
|
11039
11099
|
"div",
|
|
11040
11100
|
{
|
|
11041
11101
|
css: [
|
|
@@ -11045,10 +11105,10 @@ var ObjectItemLoadingSkeleton = ({
|
|
|
11045
11105
|
}
|
|
11046
11106
|
],
|
|
11047
11107
|
children: [
|
|
11048
|
-
showCover ? /* @__PURE__ */
|
|
11049
|
-
/* @__PURE__ */
|
|
11050
|
-
/* @__PURE__ */
|
|
11051
|
-
renderAs === "single" ? null : /* @__PURE__ */
|
|
11108
|
+
showCover ? /* @__PURE__ */ jsx107("div", { "data-testid": "object-list-item-cover-skeleton", children: /* @__PURE__ */ jsx107("span", { role: "presentation", css: ObjectListItemLoadingImage }) }) : null,
|
|
11109
|
+
/* @__PURE__ */ jsx107(VerticalRhythm, { css: ObjectListItemLoadingInner, justify: "space-between", gap: "sm", children: /* @__PURE__ */ jsxs72(VerticalRhythm, { gap: "xs", children: [
|
|
11110
|
+
/* @__PURE__ */ jsx107(HorizontalRhythm, { gap: "xs", align: "center", children: /* @__PURE__ */ jsx107("span", { role: "presentation", css: ObjectListItemLoadingText("30ch") }) }),
|
|
11111
|
+
renderAs === "single" ? null : /* @__PURE__ */ jsx107("span", { role: "presentation", css: ObjectListItemLoadingText("20ch") })
|
|
11052
11112
|
] }) })
|
|
11053
11113
|
]
|
|
11054
11114
|
}
|
|
@@ -11056,7 +11116,7 @@ var ObjectItemLoadingSkeleton = ({
|
|
|
11056
11116
|
};
|
|
11057
11117
|
|
|
11058
11118
|
// src/components/Objects/ObjectListItem.tsx
|
|
11059
|
-
import { jsx as
|
|
11119
|
+
import { jsx as jsx108, jsxs as jsxs73 } from "@emotion/react/jsx-runtime";
|
|
11060
11120
|
var ObjectListItem2 = ({ minContainerQueryWidth = "34rem", ...props }) => {
|
|
11061
11121
|
const {
|
|
11062
11122
|
renderAs,
|
|
@@ -11069,7 +11129,7 @@ var ObjectListItem2 = ({ minContainerQueryWidth = "34rem", ...props }) => {
|
|
|
11069
11129
|
portalElement,
|
|
11070
11130
|
...divProps
|
|
11071
11131
|
} = props;
|
|
11072
|
-
return /* @__PURE__ */
|
|
11132
|
+
return /* @__PURE__ */ jsxs73(
|
|
11073
11133
|
"div",
|
|
11074
11134
|
{
|
|
11075
11135
|
role: "listitem",
|
|
@@ -11078,8 +11138,8 @@ var ObjectListItem2 = ({ minContainerQueryWidth = "34rem", ...props }) => {
|
|
|
11078
11138
|
"aria-selected": isSelected,
|
|
11079
11139
|
...divProps,
|
|
11080
11140
|
children: [
|
|
11081
|
-
/* @__PURE__ */
|
|
11082
|
-
/* @__PURE__ */
|
|
11141
|
+
/* @__PURE__ */ jsx108(HorizontalRhythm, { gap: "sm", align: "center", children: dragHandle }),
|
|
11142
|
+
/* @__PURE__ */ jsxs73(
|
|
11083
11143
|
"div",
|
|
11084
11144
|
{
|
|
11085
11145
|
css: [
|
|
@@ -11089,15 +11149,15 @@ var ObjectListItem2 = ({ minContainerQueryWidth = "34rem", ...props }) => {
|
|
|
11089
11149
|
}`
|
|
11090
11150
|
],
|
|
11091
11151
|
children: [
|
|
11092
|
-
cover ? /* @__PURE__ */
|
|
11093
|
-
/* @__PURE__ */
|
|
11152
|
+
cover ? /* @__PURE__ */ jsx108(HorizontalRhythm, { gap: "sm", align: "center", children: cover }) : null,
|
|
11153
|
+
/* @__PURE__ */ jsxs73(
|
|
11094
11154
|
VerticalRhythm,
|
|
11095
11155
|
{
|
|
11096
11156
|
gap: "0",
|
|
11097
11157
|
justify: renderAs === "multi" ? "flex-start" : "center",
|
|
11098
11158
|
"data-testid": "title-container",
|
|
11099
11159
|
children: [
|
|
11100
|
-
/* @__PURE__ */
|
|
11160
|
+
/* @__PURE__ */ jsx108(
|
|
11101
11161
|
HorizontalRhythm,
|
|
11102
11162
|
{
|
|
11103
11163
|
gap: "xs",
|
|
@@ -11110,14 +11170,14 @@ var ObjectListItem2 = ({ minContainerQueryWidth = "34rem", ...props }) => {
|
|
|
11110
11170
|
]
|
|
11111
11171
|
}
|
|
11112
11172
|
),
|
|
11113
|
-
/* @__PURE__ */
|
|
11173
|
+
/* @__PURE__ */ jsx108(HorizontalRhythm, { gap: "xs", align: renderAs === "multi" ? "flex-start" : "center", children: rightSlot })
|
|
11114
11174
|
]
|
|
11115
11175
|
}
|
|
11116
11176
|
),
|
|
11117
|
-
menuItems ? /* @__PURE__ */
|
|
11177
|
+
menuItems ? /* @__PURE__ */ jsx108(HorizontalRhythm, { gap: "0", align: "flex-start", children: /* @__PURE__ */ jsx108(
|
|
11118
11178
|
Menu,
|
|
11119
11179
|
{
|
|
11120
|
-
menuTrigger: /* @__PURE__ */
|
|
11180
|
+
menuTrigger: /* @__PURE__ */ jsx108(MenuThreeDots, { "data-testid": "object-list-item-menu-btn" }),
|
|
11121
11181
|
placement: "bottom-end",
|
|
11122
11182
|
portalElement,
|
|
11123
11183
|
children: menuItems
|
|
@@ -11129,22 +11189,22 @@ var ObjectListItem2 = ({ minContainerQueryWidth = "34rem", ...props }) => {
|
|
|
11129
11189
|
};
|
|
11130
11190
|
|
|
11131
11191
|
// src/components/Objects/ObjectListItemContainer.tsx
|
|
11132
|
-
import { jsx as
|
|
11192
|
+
import { jsx as jsx109 } from "@emotion/react/jsx-runtime";
|
|
11133
11193
|
var ObjectListItemContainer2 = ({ children, gap = "0", ...props }) => {
|
|
11134
|
-
return /* @__PURE__ */
|
|
11194
|
+
return /* @__PURE__ */ jsx109(VerticalRhythm, { gap, css: ObjectListItemContainer, role: "list", ...props, children });
|
|
11135
11195
|
};
|
|
11136
11196
|
|
|
11137
11197
|
// src/components/Objects/ObjectListItemCover.tsx
|
|
11138
|
-
import { jsx as
|
|
11198
|
+
import { jsx as jsx110 } from "@emotion/react/jsx-runtime";
|
|
11139
11199
|
var ObjectListItemCover2 = ({
|
|
11140
11200
|
imageUrl,
|
|
11141
11201
|
noImageText = "Image not available",
|
|
11142
11202
|
...props
|
|
11143
11203
|
}) => {
|
|
11144
11204
|
if (!imageUrl) {
|
|
11145
|
-
return /* @__PURE__ */
|
|
11205
|
+
return /* @__PURE__ */ jsx110("div", { css: ObjectListItemCover, role: "presentation", "data-testid": "object-list-item-thumbnail", children: noImageText });
|
|
11146
11206
|
}
|
|
11147
|
-
return /* @__PURE__ */
|
|
11207
|
+
return /* @__PURE__ */ jsx110("div", { css: ObjectListItemCover, children: /* @__PURE__ */ jsx110(
|
|
11148
11208
|
"img",
|
|
11149
11209
|
{
|
|
11150
11210
|
src: imageUrl,
|
|
@@ -11157,8 +11217,8 @@ var ObjectListItemCover2 = ({
|
|
|
11157
11217
|
};
|
|
11158
11218
|
|
|
11159
11219
|
// src/components/Objects/styles/ObjectListItemHeading.styles.ts
|
|
11160
|
-
import { css as
|
|
11161
|
-
var ObjectListItemHeading =
|
|
11220
|
+
import { css as css84 } from "@emotion/react";
|
|
11221
|
+
var ObjectListItemHeading = css84`
|
|
11162
11222
|
display: flex;
|
|
11163
11223
|
flex-direction: column;
|
|
11164
11224
|
gap: var(--spacing-xs);
|
|
@@ -11168,22 +11228,22 @@ var ObjectListItemHeading = css82`
|
|
|
11168
11228
|
flex-direction: row;
|
|
11169
11229
|
}
|
|
11170
11230
|
`;
|
|
11171
|
-
var ObjectListItemHeadingAfterWrapper =
|
|
11231
|
+
var ObjectListItemHeadingAfterWrapper = css84`
|
|
11172
11232
|
line-height: 1.25;
|
|
11173
11233
|
`;
|
|
11174
11234
|
|
|
11175
11235
|
// src/components/Objects/ObjectListItemHeading.tsx
|
|
11176
|
-
import { jsx as
|
|
11236
|
+
import { jsx as jsx111, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
|
|
11177
11237
|
var ObjectListItemHeading2 = ({
|
|
11178
11238
|
heading,
|
|
11179
11239
|
beforeHeadingSlot,
|
|
11180
11240
|
afterHeadingSlot,
|
|
11181
11241
|
...props
|
|
11182
11242
|
}) => {
|
|
11183
|
-
return /* @__PURE__ */
|
|
11184
|
-
beforeHeadingSlot ? /* @__PURE__ */
|
|
11185
|
-
/* @__PURE__ */
|
|
11186
|
-
/* @__PURE__ */
|
|
11243
|
+
return /* @__PURE__ */ jsxs74("div", { css: ObjectListItemHeading, ...props, children: [
|
|
11244
|
+
beforeHeadingSlot ? /* @__PURE__ */ jsx111(HorizontalRhythm, { gap: "xs", align: "center", children: beforeHeadingSlot }) : null,
|
|
11245
|
+
/* @__PURE__ */ jsxs74(HorizontalRhythm, { css: ObjectListItemHeadingAfterWrapper, gap: "xs", align: "flex-start", children: [
|
|
11246
|
+
/* @__PURE__ */ jsx111("div", { role: "heading", "data-testid": "reference-item-name", children: heading }),
|
|
11187
11247
|
afterHeadingSlot
|
|
11188
11248
|
] })
|
|
11189
11249
|
] });
|
|
@@ -11193,35 +11253,35 @@ var ObjectListItemHeading2 = ({
|
|
|
11193
11253
|
import Paginate from "react-paginate";
|
|
11194
11254
|
|
|
11195
11255
|
// src/components/Pagination/Pagniation.styles.ts
|
|
11196
|
-
import { css as
|
|
11197
|
-
var container2 =
|
|
11256
|
+
import { css as css85 } from "@emotion/css";
|
|
11257
|
+
var container2 = css85`
|
|
11198
11258
|
align-items: center;
|
|
11199
11259
|
display: flex;
|
|
11200
11260
|
`;
|
|
11201
|
-
var disabled =
|
|
11261
|
+
var disabled = css85`
|
|
11202
11262
|
opacity: var(--opacity-50);
|
|
11203
11263
|
`;
|
|
11204
|
-
var disabledLink =
|
|
11264
|
+
var disabledLink = css85`
|
|
11205
11265
|
cursor: pointer-default;
|
|
11206
11266
|
`;
|
|
11207
|
-
var pageLink =
|
|
11267
|
+
var pageLink = css85`
|
|
11208
11268
|
display: block;
|
|
11209
11269
|
padding: var(--spacing-sm) var(--spacing-base);
|
|
11210
11270
|
`;
|
|
11211
|
-
var prevNextControls =
|
|
11271
|
+
var prevNextControls = css85`
|
|
11212
11272
|
padding: var(--spacing-sm) var(--spacing-base);
|
|
11213
11273
|
`;
|
|
11214
|
-
var active =
|
|
11274
|
+
var active = css85`
|
|
11215
11275
|
border-radius: var(--rounded-base);
|
|
11216
11276
|
background: var(--gray-200);
|
|
11217
11277
|
`;
|
|
11218
|
-
var page =
|
|
11278
|
+
var page = css85`
|
|
11219
11279
|
margin-left: var(--spacing-xs);
|
|
11220
11280
|
margin-right: var(--spacing-xs);
|
|
11221
11281
|
`;
|
|
11222
11282
|
|
|
11223
11283
|
// src/components/Pagination/Pagination.tsx
|
|
11224
|
-
import { jsx as
|
|
11284
|
+
import { jsx as jsx112 } from "@emotion/react/jsx-runtime";
|
|
11225
11285
|
function Pagination({
|
|
11226
11286
|
limit,
|
|
11227
11287
|
offset,
|
|
@@ -11236,12 +11296,12 @@ function Pagination({
|
|
|
11236
11296
|
if (pageCount <= 1) {
|
|
11237
11297
|
return null;
|
|
11238
11298
|
}
|
|
11239
|
-
return /* @__PURE__ */
|
|
11299
|
+
return /* @__PURE__ */ jsx112(
|
|
11240
11300
|
Paginate,
|
|
11241
11301
|
{
|
|
11242
11302
|
forcePage: currentPage,
|
|
11243
|
-
previousLabel: /* @__PURE__ */
|
|
11244
|
-
nextLabel: /* @__PURE__ */
|
|
11303
|
+
previousLabel: /* @__PURE__ */ jsx112("div", { className: prevNextControls, children: "<" }),
|
|
11304
|
+
nextLabel: /* @__PURE__ */ jsx112("div", { className: prevNextControls, children: ">" }),
|
|
11245
11305
|
breakLabel: "...",
|
|
11246
11306
|
pageCount,
|
|
11247
11307
|
marginPagesDisplayed: 2,
|
|
@@ -11281,8 +11341,8 @@ var useParameterShell = () => {
|
|
|
11281
11341
|
};
|
|
11282
11342
|
|
|
11283
11343
|
// src/components/ParameterInputs/styles/LabelLeadingIcon.styles.ts
|
|
11284
|
-
import { css as
|
|
11285
|
-
var inputIconBtn =
|
|
11344
|
+
import { css as css86 } from "@emotion/react";
|
|
11345
|
+
var inputIconBtn = css86`
|
|
11286
11346
|
align-items: center;
|
|
11287
11347
|
border: none;
|
|
11288
11348
|
border-radius: var(--rounded-base);
|
|
@@ -11310,7 +11370,7 @@ var inputIconBtn = css84`
|
|
|
11310
11370
|
`;
|
|
11311
11371
|
|
|
11312
11372
|
// src/components/ParameterInputs/LabelLeadingIcon.tsx
|
|
11313
|
-
import { jsx as
|
|
11373
|
+
import { jsx as jsx113, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
|
|
11314
11374
|
var LabelLeadingIcon = ({
|
|
11315
11375
|
icon,
|
|
11316
11376
|
iconColor,
|
|
@@ -11321,7 +11381,7 @@ var LabelLeadingIcon = ({
|
|
|
11321
11381
|
...props
|
|
11322
11382
|
}) => {
|
|
11323
11383
|
const titleFr = title != null ? title : isLocked ? "Read-only pattern parameter" : "Click to connect to external content";
|
|
11324
|
-
return /* @__PURE__ */
|
|
11384
|
+
return /* @__PURE__ */ jsx113(Tooltip, { title: titleFr, children: /* @__PURE__ */ jsxs75(
|
|
11325
11385
|
"button",
|
|
11326
11386
|
{
|
|
11327
11387
|
css: inputIconBtn,
|
|
@@ -11331,7 +11391,7 @@ var LabelLeadingIcon = ({
|
|
|
11331
11391
|
...props,
|
|
11332
11392
|
"data-testid": "lock-button",
|
|
11333
11393
|
children: [
|
|
11334
|
-
/* @__PURE__ */
|
|
11394
|
+
/* @__PURE__ */ jsx113(
|
|
11335
11395
|
Icon,
|
|
11336
11396
|
{
|
|
11337
11397
|
icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
|
|
@@ -11346,20 +11406,20 @@ var LabelLeadingIcon = ({
|
|
|
11346
11406
|
};
|
|
11347
11407
|
|
|
11348
11408
|
// src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
|
|
11349
|
-
import { css as
|
|
11350
|
-
var ParameterDrawerHeaderContainer =
|
|
11409
|
+
import { css as css87 } from "@emotion/react";
|
|
11410
|
+
var ParameterDrawerHeaderContainer = css87`
|
|
11351
11411
|
align-items: center;
|
|
11352
11412
|
display: flex;
|
|
11353
11413
|
gap: var(--spacing-base);
|
|
11354
11414
|
justify-content: space-between;
|
|
11355
11415
|
margin-bottom: var(--spacing-sm);
|
|
11356
11416
|
`;
|
|
11357
|
-
var ParameterDrawerHeaderTitleGroup =
|
|
11417
|
+
var ParameterDrawerHeaderTitleGroup = css87`
|
|
11358
11418
|
align-items: center;
|
|
11359
11419
|
display: flex;
|
|
11360
11420
|
gap: var(--spacing-sm);
|
|
11361
11421
|
`;
|
|
11362
|
-
var ParameterDrawerHeaderTitle =
|
|
11422
|
+
var ParameterDrawerHeaderTitle = css87`
|
|
11363
11423
|
text-overflow: ellipsis;
|
|
11364
11424
|
white-space: nowrap;
|
|
11365
11425
|
overflow: hidden;
|
|
@@ -11367,12 +11427,12 @@ var ParameterDrawerHeaderTitle = css85`
|
|
|
11367
11427
|
`;
|
|
11368
11428
|
|
|
11369
11429
|
// src/components/ParameterInputs/ParameterDrawerHeader.tsx
|
|
11370
|
-
import { jsx as
|
|
11430
|
+
import { jsx as jsx114, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
|
|
11371
11431
|
var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
|
|
11372
|
-
return /* @__PURE__ */
|
|
11373
|
-
/* @__PURE__ */
|
|
11432
|
+
return /* @__PURE__ */ jsxs76("div", { css: ParameterDrawerHeaderContainer, children: [
|
|
11433
|
+
/* @__PURE__ */ jsxs76("header", { css: ParameterDrawerHeaderTitleGroup, children: [
|
|
11374
11434
|
iconBeforeTitle,
|
|
11375
|
-
/* @__PURE__ */
|
|
11435
|
+
/* @__PURE__ */ jsx114(Heading2, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title, children: title })
|
|
11376
11436
|
] }),
|
|
11377
11437
|
children
|
|
11378
11438
|
] });
|
|
@@ -11382,8 +11442,8 @@ var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
|
|
|
11382
11442
|
import { forwardRef as forwardRef20 } from "react";
|
|
11383
11443
|
|
|
11384
11444
|
// src/components/ParameterInputs/styles/ParameterGroup.styles.ts
|
|
11385
|
-
import { css as
|
|
11386
|
-
var fieldsetStyles =
|
|
11445
|
+
import { css as css88 } from "@emotion/react";
|
|
11446
|
+
var fieldsetStyles = css88`
|
|
11387
11447
|
&:disabled,
|
|
11388
11448
|
[readonly] {
|
|
11389
11449
|
pointer-events: none;
|
|
@@ -11394,7 +11454,7 @@ var fieldsetStyles = css86`
|
|
|
11394
11454
|
}
|
|
11395
11455
|
}
|
|
11396
11456
|
`;
|
|
11397
|
-
var fieldsetLegend2 =
|
|
11457
|
+
var fieldsetLegend2 = css88`
|
|
11398
11458
|
display: block;
|
|
11399
11459
|
font-weight: var(--fw-medium);
|
|
11400
11460
|
margin-bottom: var(--spacing-sm);
|
|
@@ -11402,11 +11462,11 @@ var fieldsetLegend2 = css86`
|
|
|
11402
11462
|
`;
|
|
11403
11463
|
|
|
11404
11464
|
// src/components/ParameterInputs/ParameterGroup.tsx
|
|
11405
|
-
import { jsx as
|
|
11465
|
+
import { jsx as jsx115, jsxs as jsxs77 } from "@emotion/react/jsx-runtime";
|
|
11406
11466
|
var ParameterGroup = forwardRef20(
|
|
11407
11467
|
({ legend, isDisabled, children, ...props }, ref) => {
|
|
11408
|
-
return /* @__PURE__ */
|
|
11409
|
-
/* @__PURE__ */
|
|
11468
|
+
return /* @__PURE__ */ jsxs77("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
|
|
11469
|
+
/* @__PURE__ */ jsx115("legend", { css: fieldsetLegend2, children: legend }),
|
|
11410
11470
|
children
|
|
11411
11471
|
] });
|
|
11412
11472
|
}
|
|
@@ -11420,15 +11480,15 @@ import { useState as useState13 } from "react";
|
|
|
11420
11480
|
import { createPortal as createPortal2 } from "react-dom";
|
|
11421
11481
|
|
|
11422
11482
|
// src/components/ParameterInputs/styles/ParameterImage.styles.ts
|
|
11423
|
-
import { css as
|
|
11424
|
-
var previewWrapper =
|
|
11483
|
+
import { css as css89 } from "@emotion/react";
|
|
11484
|
+
var previewWrapper = css89`
|
|
11425
11485
|
margin-top: var(--spacing-xs);
|
|
11426
11486
|
background: var(--gray-50);
|
|
11427
11487
|
padding: var(--spacing-sm);
|
|
11428
11488
|
border: solid 1px var(--gray-300);
|
|
11429
11489
|
border-radius: var(--rounded-sm);
|
|
11430
11490
|
`;
|
|
11431
|
-
var previewLink =
|
|
11491
|
+
var previewLink = css89`
|
|
11432
11492
|
display: block;
|
|
11433
11493
|
width: 100%;
|
|
11434
11494
|
|
|
@@ -11436,7 +11496,7 @@ var previewLink = css87`
|
|
|
11436
11496
|
max-height: 9rem;
|
|
11437
11497
|
}
|
|
11438
11498
|
`;
|
|
11439
|
-
var previewModalWrapper =
|
|
11499
|
+
var previewModalWrapper = css89`
|
|
11440
11500
|
background: var(--gray-50);
|
|
11441
11501
|
display: flex;
|
|
11442
11502
|
height: 100%;
|
|
@@ -11445,7 +11505,7 @@ var previewModalWrapper = css87`
|
|
|
11445
11505
|
border: solid 1px var(--gray-300);
|
|
11446
11506
|
border-radius: var(--rounded-sm);
|
|
11447
11507
|
`;
|
|
11448
|
-
var previewModalImage =
|
|
11508
|
+
var previewModalImage = css89`
|
|
11449
11509
|
display: flex;
|
|
11450
11510
|
height: 100%;
|
|
11451
11511
|
width: 100%;
|
|
@@ -11457,32 +11517,32 @@ var previewModalImage = css87`
|
|
|
11457
11517
|
`;
|
|
11458
11518
|
|
|
11459
11519
|
// src/components/ParameterInputs/ParameterImagePreview.tsx
|
|
11460
|
-
import { Fragment as Fragment11, jsx as
|
|
11520
|
+
import { Fragment as Fragment11, jsx as jsx116, jsxs as jsxs78 } from "@emotion/react/jsx-runtime";
|
|
11461
11521
|
function ParameterImagePreview({ imageSrc }) {
|
|
11462
11522
|
const [showModal, setShowModal] = useState13(false);
|
|
11463
|
-
return imageSrc ? /* @__PURE__ */
|
|
11464
|
-
/* @__PURE__ */
|
|
11465
|
-
/* @__PURE__ */
|
|
11523
|
+
return imageSrc ? /* @__PURE__ */ jsxs78("div", { css: previewWrapper, children: [
|
|
11524
|
+
/* @__PURE__ */ jsx116(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
|
|
11525
|
+
/* @__PURE__ */ jsx116(
|
|
11466
11526
|
"button",
|
|
11467
11527
|
{
|
|
11468
11528
|
css: previewLink,
|
|
11469
11529
|
onClick: () => {
|
|
11470
11530
|
setShowModal(true);
|
|
11471
11531
|
},
|
|
11472
|
-
children: /* @__PURE__ */
|
|
11532
|
+
children: /* @__PURE__ */ jsx116(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
|
|
11473
11533
|
}
|
|
11474
11534
|
)
|
|
11475
11535
|
] }) : null;
|
|
11476
11536
|
}
|
|
11477
11537
|
var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
|
|
11478
|
-
return open ? /* @__PURE__ */
|
|
11479
|
-
/* @__PURE__ */
|
|
11538
|
+
return open ? /* @__PURE__ */ jsx116(Fragment11, { children: createPortal2(
|
|
11539
|
+
/* @__PURE__ */ jsx116(
|
|
11480
11540
|
Modal,
|
|
11481
11541
|
{
|
|
11482
11542
|
header: "Image Preview",
|
|
11483
11543
|
onRequestClose,
|
|
11484
|
-
buttonGroup: /* @__PURE__ */
|
|
11485
|
-
children: /* @__PURE__ */
|
|
11544
|
+
buttonGroup: /* @__PURE__ */ jsx116(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
|
|
11545
|
+
children: /* @__PURE__ */ jsx116("div", { css: previewModalWrapper, children: /* @__PURE__ */ jsx116(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
|
|
11486
11546
|
}
|
|
11487
11547
|
),
|
|
11488
11548
|
document.body
|
|
@@ -11490,12 +11550,12 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
|
|
|
11490
11550
|
};
|
|
11491
11551
|
|
|
11492
11552
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
11493
|
-
import { css as
|
|
11553
|
+
import { css as css92 } from "@emotion/react";
|
|
11494
11554
|
import { useState as useState14 } from "react";
|
|
11495
11555
|
|
|
11496
11556
|
// src/components/ParameterInputs/styles/ParameterInput.styles.ts
|
|
11497
|
-
import { css as
|
|
11498
|
-
var inputContainer2 =
|
|
11557
|
+
import { css as css90 } from "@emotion/react";
|
|
11558
|
+
var inputContainer2 = css90`
|
|
11499
11559
|
position: relative;
|
|
11500
11560
|
scroll-margin: var(--spacing-2xl);
|
|
11501
11561
|
|
|
@@ -11508,14 +11568,14 @@ var inputContainer2 = css88`
|
|
|
11508
11568
|
}
|
|
11509
11569
|
}
|
|
11510
11570
|
`;
|
|
11511
|
-
var labelText2 =
|
|
11571
|
+
var labelText2 = css90`
|
|
11512
11572
|
align-items: center;
|
|
11513
11573
|
display: flex;
|
|
11514
11574
|
gap: var(--spacing-xs);
|
|
11515
11575
|
font-weight: var(--fw-regular);
|
|
11516
11576
|
margin: 0 0 var(--spacing-xs);
|
|
11517
11577
|
`;
|
|
11518
|
-
var input3 =
|
|
11578
|
+
var input3 = css90`
|
|
11519
11579
|
display: block;
|
|
11520
11580
|
appearance: none;
|
|
11521
11581
|
box-sizing: border-box;
|
|
@@ -11563,18 +11623,18 @@ var input3 = css88`
|
|
|
11563
11623
|
color: var(--gray-400);
|
|
11564
11624
|
}
|
|
11565
11625
|
`;
|
|
11566
|
-
var selectInput =
|
|
11626
|
+
var selectInput = css90`
|
|
11567
11627
|
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z' fill='currentColor' /%3E%3C/svg%3E");
|
|
11568
11628
|
background-position: right var(--spacing-sm) center;
|
|
11569
11629
|
background-repeat: no-repeat;
|
|
11570
11630
|
background-size: 1rem;
|
|
11571
11631
|
padding-right: var(--spacing-xl);
|
|
11572
11632
|
`;
|
|
11573
|
-
var inputWrapper =
|
|
11633
|
+
var inputWrapper = css90`
|
|
11574
11634
|
display: flex; // used to correct overflow with chrome textarea
|
|
11575
11635
|
position: relative;
|
|
11576
11636
|
`;
|
|
11577
|
-
var inputIcon2 =
|
|
11637
|
+
var inputIcon2 = css90`
|
|
11578
11638
|
align-items: center;
|
|
11579
11639
|
background: var(--white);
|
|
11580
11640
|
border-radius: var(--rounded-md) 0 0 var(--rounded-md);
|
|
@@ -11590,7 +11650,7 @@ var inputIcon2 = css88`
|
|
|
11590
11650
|
width: var(--spacing-lg);
|
|
11591
11651
|
z-index: var(--z-10);
|
|
11592
11652
|
`;
|
|
11593
|
-
var inputToggleLabel2 =
|
|
11653
|
+
var inputToggleLabel2 = css90`
|
|
11594
11654
|
--inline-label-color: var(--typography-base);
|
|
11595
11655
|
align-items: center;
|
|
11596
11656
|
cursor: pointer;
|
|
@@ -11605,7 +11665,7 @@ var inputToggleLabel2 = css88`
|
|
|
11605
11665
|
--inline-label-color: var(--gray-400);
|
|
11606
11666
|
}
|
|
11607
11667
|
`;
|
|
11608
|
-
var toggleInput2 =
|
|
11668
|
+
var toggleInput2 = css90`
|
|
11609
11669
|
appearance: none;
|
|
11610
11670
|
border: 1px solid var(--gray-200);
|
|
11611
11671
|
background: var(--white);
|
|
@@ -11659,7 +11719,7 @@ var toggleInput2 = css88`
|
|
|
11659
11719
|
border-color: var(--gray-300);
|
|
11660
11720
|
}
|
|
11661
11721
|
`;
|
|
11662
|
-
var inlineLabel2 =
|
|
11722
|
+
var inlineLabel2 = css90`
|
|
11663
11723
|
color: var(--inline-label-color);
|
|
11664
11724
|
padding-left: var(--spacing-md);
|
|
11665
11725
|
font-size: var(--fs-sm);
|
|
@@ -11676,7 +11736,7 @@ var inlineLabel2 = css88`
|
|
|
11676
11736
|
}
|
|
11677
11737
|
}
|
|
11678
11738
|
`;
|
|
11679
|
-
var inputMenu =
|
|
11739
|
+
var inputMenu = css90`
|
|
11680
11740
|
background: none;
|
|
11681
11741
|
border: none;
|
|
11682
11742
|
padding: var(--spacing-2xs);
|
|
@@ -11684,10 +11744,10 @@ var inputMenu = css88`
|
|
|
11684
11744
|
top: calc(var(--spacing-md) * -1.2);
|
|
11685
11745
|
right: 0;
|
|
11686
11746
|
`;
|
|
11687
|
-
var inputActionItems =
|
|
11747
|
+
var inputActionItems = css90`
|
|
11688
11748
|
display: flex;
|
|
11689
11749
|
`;
|
|
11690
|
-
var inputMenuHover =
|
|
11750
|
+
var inputMenuHover = css90`
|
|
11691
11751
|
opacity: var(--opacity-50);
|
|
11692
11752
|
transition: background-color var(--duration-fast) var(--timing-ease-out);
|
|
11693
11753
|
|
|
@@ -11697,11 +11757,11 @@ var inputMenuHover = css88`
|
|
|
11697
11757
|
background-color: var(--gray-200);
|
|
11698
11758
|
}
|
|
11699
11759
|
`;
|
|
11700
|
-
var textarea2 =
|
|
11760
|
+
var textarea2 = css90`
|
|
11701
11761
|
resize: vertical;
|
|
11702
11762
|
min-height: 2rem;
|
|
11703
11763
|
`;
|
|
11704
|
-
var dataConnectButton =
|
|
11764
|
+
var dataConnectButton = css90`
|
|
11705
11765
|
align-items: center;
|
|
11706
11766
|
appearance: none;
|
|
11707
11767
|
box-sizing: border-box;
|
|
@@ -11737,7 +11797,7 @@ var dataConnectButton = css88`
|
|
|
11737
11797
|
pointer-events: none;
|
|
11738
11798
|
}
|
|
11739
11799
|
`;
|
|
11740
|
-
var linkParameterBtn =
|
|
11800
|
+
var linkParameterBtn = css90`
|
|
11741
11801
|
border-radius: var(--rounded-base);
|
|
11742
11802
|
background: transparent;
|
|
11743
11803
|
border: none;
|
|
@@ -11746,7 +11806,7 @@ var linkParameterBtn = css88`
|
|
|
11746
11806
|
font-size: var(--fs-sm);
|
|
11747
11807
|
line-height: 1;
|
|
11748
11808
|
`;
|
|
11749
|
-
var linkParameterControls =
|
|
11809
|
+
var linkParameterControls = css90`
|
|
11750
11810
|
position: absolute;
|
|
11751
11811
|
inset: 0 0 0 auto;
|
|
11752
11812
|
padding: 0 var(--spacing-base);
|
|
@@ -11755,7 +11815,7 @@ var linkParameterControls = css88`
|
|
|
11755
11815
|
justify-content: center;
|
|
11756
11816
|
gap: var(--spacing-base);
|
|
11757
11817
|
`;
|
|
11758
|
-
var linkParameterInput = (withExternalLinkIcon) =>
|
|
11818
|
+
var linkParameterInput = (withExternalLinkIcon) => css90`
|
|
11759
11819
|
padding-right: calc(
|
|
11760
11820
|
${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
|
|
11761
11821
|
var(--spacing-base)
|
|
@@ -11768,7 +11828,7 @@ var linkParameterInput = (withExternalLinkIcon) => css88`
|
|
|
11768
11828
|
}
|
|
11769
11829
|
}
|
|
11770
11830
|
`;
|
|
11771
|
-
var linkParameterIcon =
|
|
11831
|
+
var linkParameterIcon = css90`
|
|
11772
11832
|
align-items: center;
|
|
11773
11833
|
color: var(--brand-secondary-3);
|
|
11774
11834
|
display: flex;
|
|
@@ -11783,20 +11843,20 @@ var linkParameterIcon = css88`
|
|
|
11783
11843
|
`;
|
|
11784
11844
|
|
|
11785
11845
|
// src/components/ParameterInputs/ParameterLabel.tsx
|
|
11786
|
-
import { jsx as
|
|
11846
|
+
import { jsx as jsx117 } from "@emotion/react/jsx-runtime";
|
|
11787
11847
|
var ParameterLabel = ({ id, asSpan, children, testId, ...props }) => {
|
|
11788
|
-
return !asSpan ? /* @__PURE__ */
|
|
11848
|
+
return !asSpan ? /* @__PURE__ */ jsx117("label", { ...props, htmlFor: id, css: labelText2, "data-testid": testId, children }) : /* @__PURE__ */ jsx117("span", { "aria-labelledby": id, css: labelText2, children });
|
|
11789
11849
|
};
|
|
11790
11850
|
|
|
11791
11851
|
// src/components/ParameterInputs/ParameterMenuButton.tsx
|
|
11792
11852
|
import { forwardRef as forwardRef21 } from "react";
|
|
11793
|
-
import { jsx as
|
|
11853
|
+
import { jsx as jsx118 } from "@emotion/react/jsx-runtime";
|
|
11794
11854
|
var ParameterMenuButton = forwardRef21(
|
|
11795
11855
|
({ label, children }, ref) => {
|
|
11796
|
-
return /* @__PURE__ */
|
|
11856
|
+
return /* @__PURE__ */ jsx118(
|
|
11797
11857
|
Menu,
|
|
11798
11858
|
{
|
|
11799
|
-
menuTrigger: /* @__PURE__ */
|
|
11859
|
+
menuTrigger: /* @__PURE__ */ jsx118(
|
|
11800
11860
|
"button",
|
|
11801
11861
|
{
|
|
11802
11862
|
className: "parameter-menu",
|
|
@@ -11804,7 +11864,7 @@ var ParameterMenuButton = forwardRef21(
|
|
|
11804
11864
|
type: "button",
|
|
11805
11865
|
"aria-label": `${label} options`,
|
|
11806
11866
|
ref,
|
|
11807
|
-
children: /* @__PURE__ */
|
|
11867
|
+
children: /* @__PURE__ */ jsx118(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
|
|
11808
11868
|
}
|
|
11809
11869
|
),
|
|
11810
11870
|
children
|
|
@@ -11814,14 +11874,14 @@ var ParameterMenuButton = forwardRef21(
|
|
|
11814
11874
|
);
|
|
11815
11875
|
|
|
11816
11876
|
// src/components/ParameterInputs/styles/ParameterShell.styles.ts
|
|
11817
|
-
import { css as
|
|
11818
|
-
var emptyParameterShell =
|
|
11877
|
+
import { css as css91 } from "@emotion/react";
|
|
11878
|
+
var emptyParameterShell = css91`
|
|
11819
11879
|
border-radius: var(--rounded-sm);
|
|
11820
11880
|
flex-grow: 1;
|
|
11821
11881
|
position: relative;
|
|
11822
11882
|
max-width: 100%;
|
|
11823
11883
|
`;
|
|
11824
|
-
var emptyParameterShellText =
|
|
11884
|
+
var emptyParameterShellText = css91`
|
|
11825
11885
|
background: var(--brand-secondary-6);
|
|
11826
11886
|
border-radius: var(--rounded-sm);
|
|
11827
11887
|
padding: var(--spacing-sm);
|
|
@@ -11829,7 +11889,7 @@ var emptyParameterShellText = css89`
|
|
|
11829
11889
|
font-size: var(--fs-sm);
|
|
11830
11890
|
margin: 0;
|
|
11831
11891
|
`;
|
|
11832
|
-
var overrideMarker =
|
|
11892
|
+
var overrideMarker = css91`
|
|
11833
11893
|
border-radius: var(--rounded-sm);
|
|
11834
11894
|
border: 10px solid var(--gray-300);
|
|
11835
11895
|
border-left-color: transparent;
|
|
@@ -11840,7 +11900,7 @@ var overrideMarker = css89`
|
|
|
11840
11900
|
`;
|
|
11841
11901
|
|
|
11842
11902
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
11843
|
-
import { jsx as
|
|
11903
|
+
import { jsx as jsx119, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
|
|
11844
11904
|
var extractParameterProps = (props) => {
|
|
11845
11905
|
const {
|
|
11846
11906
|
id,
|
|
@@ -11903,33 +11963,33 @@ var ParameterShell = ({
|
|
|
11903
11963
|
const [manualErrorMessage, setManualErrorMessage] = useState14(void 0);
|
|
11904
11964
|
const setErrorMessage = (message) => setManualErrorMessage(message);
|
|
11905
11965
|
const errorMessaging = errorMessage || manualErrorMessage;
|
|
11906
|
-
return /* @__PURE__ */
|
|
11907
|
-
hiddenLabel || title ? null : /* @__PURE__ */
|
|
11966
|
+
return /* @__PURE__ */ jsxs79("div", { css: inputContainer2, ...props, id, children: [
|
|
11967
|
+
hiddenLabel || title ? null : /* @__PURE__ */ jsxs79(ParameterLabel, { id, css: labelText2, children: [
|
|
11908
11968
|
labelLeadingIcon != null ? labelLeadingIcon : null,
|
|
11909
11969
|
label,
|
|
11910
11970
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
11911
11971
|
] }),
|
|
11912
|
-
!title ? null : /* @__PURE__ */
|
|
11972
|
+
!title ? null : /* @__PURE__ */ jsxs79(ParameterLabel, { id, asSpan: true, testId: "parameter-label", children: [
|
|
11913
11973
|
labelLeadingIcon != null ? labelLeadingIcon : null,
|
|
11914
11974
|
title,
|
|
11915
11975
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
11916
11976
|
] }),
|
|
11917
|
-
/* @__PURE__ */
|
|
11918
|
-
actionItems ? /* @__PURE__ */
|
|
11977
|
+
/* @__PURE__ */ jsxs79("div", { css: inputWrapper, children: [
|
|
11978
|
+
actionItems ? /* @__PURE__ */ jsx119(
|
|
11919
11979
|
"div",
|
|
11920
11980
|
{
|
|
11921
11981
|
css: [
|
|
11922
11982
|
inputMenu,
|
|
11923
11983
|
inputActionItems,
|
|
11924
|
-
menuItems ?
|
|
11984
|
+
menuItems ? css92`
|
|
11925
11985
|
right: var(--spacing-md);
|
|
11926
11986
|
` : void 0
|
|
11927
11987
|
],
|
|
11928
11988
|
children: actionItems
|
|
11929
11989
|
}
|
|
11930
11990
|
) : null,
|
|
11931
|
-
menuItems ? /* @__PURE__ */
|
|
11932
|
-
/* @__PURE__ */
|
|
11991
|
+
menuItems ? /* @__PURE__ */ jsx119(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
|
|
11992
|
+
/* @__PURE__ */ jsx119(
|
|
11933
11993
|
ParameterShellContext.Provider,
|
|
11934
11994
|
{
|
|
11935
11995
|
value: {
|
|
@@ -11939,14 +11999,14 @@ var ParameterShell = ({
|
|
|
11939
11999
|
errorMessage: errorMessaging,
|
|
11940
12000
|
handleManuallySetErrorMessage: (message) => setErrorMessage(message)
|
|
11941
12001
|
},
|
|
11942
|
-
children: isParameterGroup ? /* @__PURE__ */
|
|
12002
|
+
children: isParameterGroup ? /* @__PURE__ */ jsx119("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ jsxs79(ParameterShellPlaceholder, { children: [
|
|
11943
12003
|
children,
|
|
11944
|
-
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */
|
|
12004
|
+
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx119(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
|
|
11945
12005
|
] })
|
|
11946
12006
|
}
|
|
11947
12007
|
)
|
|
11948
12008
|
] }),
|
|
11949
|
-
/* @__PURE__ */
|
|
12009
|
+
/* @__PURE__ */ jsx119(
|
|
11950
12010
|
FieldMessage,
|
|
11951
12011
|
{
|
|
11952
12012
|
helperMessageTestId: captionTestId,
|
|
@@ -11960,17 +12020,17 @@ var ParameterShell = ({
|
|
|
11960
12020
|
] });
|
|
11961
12021
|
};
|
|
11962
12022
|
var ParameterShellPlaceholder = ({ children }) => {
|
|
11963
|
-
return /* @__PURE__ */
|
|
12023
|
+
return /* @__PURE__ */ jsx119("div", { css: emptyParameterShell, children });
|
|
11964
12024
|
};
|
|
11965
|
-
var ParameterOverrideMarker = (props) => /* @__PURE__ */
|
|
12025
|
+
var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx119(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx119("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx119("span", { hidden: true, children: "reset overridden value to default" }) }) });
|
|
11966
12026
|
|
|
11967
12027
|
// src/components/ParameterInputs/ParameterImage.tsx
|
|
11968
|
-
import { Fragment as Fragment12, jsx as
|
|
12028
|
+
import { Fragment as Fragment12, jsx as jsx120, jsxs as jsxs80 } from "@emotion/react/jsx-runtime";
|
|
11969
12029
|
var ParameterImage = forwardRef22(
|
|
11970
12030
|
({ children, ...props }, ref) => {
|
|
11971
12031
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
11972
|
-
return /* @__PURE__ */
|
|
11973
|
-
/* @__PURE__ */
|
|
12032
|
+
return /* @__PURE__ */ jsxs80(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
|
|
12033
|
+
/* @__PURE__ */ jsx120(ParameterImageInner, { ref, ...innerProps }),
|
|
11974
12034
|
children
|
|
11975
12035
|
] });
|
|
11976
12036
|
}
|
|
@@ -11979,8 +12039,8 @@ var ParameterImageInner = forwardRef22((props, ref) => {
|
|
|
11979
12039
|
const { value } = props;
|
|
11980
12040
|
const { id, label, hiddenLabel, errorMessage } = useParameterShell();
|
|
11981
12041
|
const deferredValue = useDeferredValue(value);
|
|
11982
|
-
return /* @__PURE__ */
|
|
11983
|
-
/* @__PURE__ */
|
|
12042
|
+
return /* @__PURE__ */ jsxs80(Fragment12, { children: [
|
|
12043
|
+
/* @__PURE__ */ jsx120(
|
|
11984
12044
|
"input",
|
|
11985
12045
|
{
|
|
11986
12046
|
css: input3,
|
|
@@ -11992,21 +12052,21 @@ var ParameterImageInner = forwardRef22((props, ref) => {
|
|
|
11992
12052
|
...props
|
|
11993
12053
|
}
|
|
11994
12054
|
),
|
|
11995
|
-
errorMessage || props.disablePreview ? null : /* @__PURE__ */
|
|
12055
|
+
errorMessage || props.disablePreview ? null : /* @__PURE__ */ jsx120(ParameterImagePreview, { imageSrc: deferredValue })
|
|
11996
12056
|
] });
|
|
11997
12057
|
});
|
|
11998
12058
|
|
|
11999
12059
|
// src/components/ParameterInputs/ParameterInput.tsx
|
|
12000
12060
|
import { forwardRef as forwardRef23 } from "react";
|
|
12001
|
-
import { jsx as
|
|
12061
|
+
import { jsx as jsx121 } from "@emotion/react/jsx-runtime";
|
|
12002
12062
|
var ParameterInput = forwardRef23((props, ref) => {
|
|
12003
12063
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
12004
|
-
return /* @__PURE__ */
|
|
12064
|
+
return /* @__PURE__ */ jsx121(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx121(ParameterInputInner, { ref, ...innerProps }) });
|
|
12005
12065
|
});
|
|
12006
12066
|
var ParameterInputInner = forwardRef23(
|
|
12007
12067
|
({ ...props }, ref) => {
|
|
12008
12068
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
12009
|
-
return /* @__PURE__ */
|
|
12069
|
+
return /* @__PURE__ */ jsx121(
|
|
12010
12070
|
"input",
|
|
12011
12071
|
{
|
|
12012
12072
|
css: input3,
|
|
@@ -12023,18 +12083,18 @@ var ParameterInputInner = forwardRef23(
|
|
|
12023
12083
|
|
|
12024
12084
|
// src/components/ParameterInputs/ParameterLink.tsx
|
|
12025
12085
|
import { forwardRef as forwardRef24 } from "react";
|
|
12026
|
-
import { jsx as
|
|
12086
|
+
import { jsx as jsx122, jsxs as jsxs81 } from "@emotion/react/jsx-runtime";
|
|
12027
12087
|
var ParameterLink = forwardRef24(
|
|
12028
12088
|
({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
|
|
12029
12089
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
12030
|
-
return /* @__PURE__ */
|
|
12090
|
+
return /* @__PURE__ */ jsx122(
|
|
12031
12091
|
ParameterShell,
|
|
12032
12092
|
{
|
|
12033
12093
|
"data-testid": "link-parameter-editor",
|
|
12034
12094
|
...shellProps,
|
|
12035
12095
|
label: innerProps.value ? shellProps.label : "",
|
|
12036
12096
|
title: !innerProps.value && typeof shellProps.label === "string" ? shellProps.label : void 0,
|
|
12037
|
-
children: /* @__PURE__ */
|
|
12097
|
+
children: /* @__PURE__ */ jsx122(
|
|
12038
12098
|
ParameterLinkInner,
|
|
12039
12099
|
{
|
|
12040
12100
|
onConnectLink,
|
|
@@ -12051,9 +12111,9 @@ var ParameterLinkInner = forwardRef24(
|
|
|
12051
12111
|
({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
|
|
12052
12112
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
12053
12113
|
if (!props.value)
|
|
12054
|
-
return /* @__PURE__ */
|
|
12055
|
-
return /* @__PURE__ */
|
|
12056
|
-
/* @__PURE__ */
|
|
12114
|
+
return /* @__PURE__ */ jsx122("button", { type: "button", css: dataConnectButton, disabled: disabled2, onClick: onConnectLink, children: buttonText });
|
|
12115
|
+
return /* @__PURE__ */ jsxs81("div", { css: inputWrapper, children: [
|
|
12116
|
+
/* @__PURE__ */ jsx122(
|
|
12057
12117
|
"input",
|
|
12058
12118
|
{
|
|
12059
12119
|
type: "text",
|
|
@@ -12065,8 +12125,8 @@ var ParameterLinkInner = forwardRef24(
|
|
|
12065
12125
|
...props
|
|
12066
12126
|
}
|
|
12067
12127
|
),
|
|
12068
|
-
/* @__PURE__ */
|
|
12069
|
-
/* @__PURE__ */
|
|
12128
|
+
/* @__PURE__ */ jsxs81("div", { css: linkParameterControls, children: [
|
|
12129
|
+
/* @__PURE__ */ jsx122(
|
|
12070
12130
|
"button",
|
|
12071
12131
|
{
|
|
12072
12132
|
type: "button",
|
|
@@ -12078,7 +12138,7 @@ var ParameterLinkInner = forwardRef24(
|
|
|
12078
12138
|
children: "edit"
|
|
12079
12139
|
}
|
|
12080
12140
|
),
|
|
12081
|
-
externalLink ? /* @__PURE__ */
|
|
12141
|
+
externalLink ? /* @__PURE__ */ jsx122(
|
|
12082
12142
|
"a",
|
|
12083
12143
|
{
|
|
12084
12144
|
href: externalLink,
|
|
@@ -12086,7 +12146,7 @@ var ParameterLinkInner = forwardRef24(
|
|
|
12086
12146
|
title: "Open link in new tab",
|
|
12087
12147
|
target: "_blank",
|
|
12088
12148
|
rel: "noopener noreferrer",
|
|
12089
|
-
children: /* @__PURE__ */
|
|
12149
|
+
children: /* @__PURE__ */ jsx122(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
|
|
12090
12150
|
}
|
|
12091
12151
|
) : null
|
|
12092
12152
|
] })
|
|
@@ -12095,15 +12155,15 @@ var ParameterLinkInner = forwardRef24(
|
|
|
12095
12155
|
);
|
|
12096
12156
|
|
|
12097
12157
|
// src/components/ParameterInputs/ParameterMultiSelect.tsx
|
|
12098
|
-
import { jsx as
|
|
12158
|
+
import { jsx as jsx123 } from "@emotion/react/jsx-runtime";
|
|
12099
12159
|
var ParameterMultiSelect = ({ disabled: disabled2 = false, ...props }) => {
|
|
12100
12160
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
12101
|
-
return /* @__PURE__ */
|
|
12161
|
+
return /* @__PURE__ */ jsx123(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx123(ParameterMultiSelectInner, { isDisabled: disabled2, ...innerProps }) });
|
|
12102
12162
|
};
|
|
12103
12163
|
var ParameterMultiSelectInner = (props) => {
|
|
12104
12164
|
var _a;
|
|
12105
12165
|
const { id, label } = useParameterShell();
|
|
12106
|
-
return /* @__PURE__ */
|
|
12166
|
+
return /* @__PURE__ */ jsx123(
|
|
12107
12167
|
InputComboBox,
|
|
12108
12168
|
{
|
|
12109
12169
|
menuPortalTarget: document.body,
|
|
@@ -12153,7 +12213,7 @@ var ParameterMultiSelectInner = (props) => {
|
|
|
12153
12213
|
};
|
|
12154
12214
|
|
|
12155
12215
|
// src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
|
|
12156
|
-
import { Fragment as Fragment13, jsx as
|
|
12216
|
+
import { Fragment as Fragment13, jsx as jsx124, jsxs as jsxs82 } from "@emotion/react/jsx-runtime";
|
|
12157
12217
|
var ParameterNameAndPublicIdInput = ({
|
|
12158
12218
|
id,
|
|
12159
12219
|
onBlur,
|
|
@@ -12179,8 +12239,8 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
12179
12239
|
navigator.clipboard.writeText(values[publicIdFieldName]);
|
|
12180
12240
|
};
|
|
12181
12241
|
autoFocus == null ? void 0 : autoFocus();
|
|
12182
|
-
return /* @__PURE__ */
|
|
12183
|
-
/* @__PURE__ */
|
|
12242
|
+
return /* @__PURE__ */ jsxs82(Fragment13, { children: [
|
|
12243
|
+
/* @__PURE__ */ jsx124(
|
|
12184
12244
|
ParameterInput,
|
|
12185
12245
|
{
|
|
12186
12246
|
id: nameIdField,
|
|
@@ -12199,7 +12259,7 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
12199
12259
|
value: values[nameIdField]
|
|
12200
12260
|
}
|
|
12201
12261
|
),
|
|
12202
|
-
/* @__PURE__ */
|
|
12262
|
+
/* @__PURE__ */ jsx124(
|
|
12203
12263
|
ParameterInput,
|
|
12204
12264
|
{
|
|
12205
12265
|
id: publicIdFieldName,
|
|
@@ -12213,11 +12273,11 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
12213
12273
|
caption: !publicIdError ? publicIdCaption : void 0,
|
|
12214
12274
|
placeholder: publicIdPlaceholderText,
|
|
12215
12275
|
errorMessage: publicIdError,
|
|
12216
|
-
menuItems: /* @__PURE__ */
|
|
12276
|
+
menuItems: /* @__PURE__ */ jsx124(
|
|
12217
12277
|
MenuItem,
|
|
12218
12278
|
{
|
|
12219
12279
|
disabled: !values[publicIdFieldName],
|
|
12220
|
-
icon: /* @__PURE__ */
|
|
12280
|
+
icon: /* @__PURE__ */ jsx124(Icon, { icon: "path-trim", iconColor: "currentColor" }),
|
|
12221
12281
|
onClick: handleCopyPidFieldValue,
|
|
12222
12282
|
children: "Copy"
|
|
12223
12283
|
}
|
|
@@ -12225,12 +12285,12 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
12225
12285
|
value: values[publicIdFieldName]
|
|
12226
12286
|
}
|
|
12227
12287
|
),
|
|
12228
|
-
(warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */
|
|
12288
|
+
(warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx124(Callout, { type: "caution", children: warnOverLength.message }) : null
|
|
12229
12289
|
] });
|
|
12230
12290
|
};
|
|
12231
12291
|
|
|
12232
12292
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
12233
|
-
import { css as
|
|
12293
|
+
import { css as css98 } from "@emotion/react";
|
|
12234
12294
|
import { ListItemNode, ListNode as ListNode3 } from "@lexical/list";
|
|
12235
12295
|
import {
|
|
12236
12296
|
CODE,
|
|
@@ -12398,23 +12458,23 @@ function DisableStylesPlugin() {
|
|
|
12398
12458
|
}
|
|
12399
12459
|
|
|
12400
12460
|
// src/components/ParameterInputs/rich-text/editorStyles.ts
|
|
12401
|
-
import { css as
|
|
12402
|
-
var textBold =
|
|
12461
|
+
import { css as css93 } from "@emotion/css";
|
|
12462
|
+
var textBold = css93`
|
|
12403
12463
|
font-weight: 700;
|
|
12404
12464
|
`;
|
|
12405
|
-
var textItalic =
|
|
12465
|
+
var textItalic = css93`
|
|
12406
12466
|
font-style: italic;
|
|
12407
12467
|
`;
|
|
12408
|
-
var textUnderline =
|
|
12468
|
+
var textUnderline = css93`
|
|
12409
12469
|
text-decoration: underline;
|
|
12410
12470
|
`;
|
|
12411
|
-
var textStrikethrough =
|
|
12471
|
+
var textStrikethrough = css93`
|
|
12412
12472
|
text-decoration: line-through;
|
|
12413
12473
|
`;
|
|
12414
|
-
var textUnderlineStrikethrough =
|
|
12474
|
+
var textUnderlineStrikethrough = css93`
|
|
12415
12475
|
text-decoration: underline line-through;
|
|
12416
12476
|
`;
|
|
12417
|
-
var textCode =
|
|
12477
|
+
var textCode = css93`
|
|
12418
12478
|
background-color: var(--gray-100);
|
|
12419
12479
|
border-radius: var(--rounded-sm);
|
|
12420
12480
|
display: inline-block;
|
|
@@ -12425,68 +12485,68 @@ var textCode = css91`
|
|
|
12425
12485
|
padding-left: var(--spacing-xs);
|
|
12426
12486
|
padding-right: var(--spacing-xs);
|
|
12427
12487
|
`;
|
|
12428
|
-
var textSuperscript =
|
|
12488
|
+
var textSuperscript = css93`
|
|
12429
12489
|
vertical-align: super;
|
|
12430
12490
|
font-size: smaller;
|
|
12431
12491
|
`;
|
|
12432
|
-
var textSubscript =
|
|
12492
|
+
var textSubscript = css93`
|
|
12433
12493
|
vertical-align: sub;
|
|
12434
12494
|
font-size: smaller;
|
|
12435
12495
|
`;
|
|
12436
|
-
var linkElement =
|
|
12496
|
+
var linkElement = css93`
|
|
12437
12497
|
${link}
|
|
12438
12498
|
${linkColorDefault}
|
|
12439
12499
|
text-decoration: underline;
|
|
12440
12500
|
`;
|
|
12441
|
-
var h12 =
|
|
12501
|
+
var h12 = css93`
|
|
12442
12502
|
font-size: clamp(1.35rem, var(--fluid-font-base), 1.7rem);
|
|
12443
12503
|
`;
|
|
12444
|
-
var h22 =
|
|
12504
|
+
var h22 = css93`
|
|
12445
12505
|
font-size: clamp(1.35rem, var(--fluid-font-base), 1.6rem);
|
|
12446
12506
|
`;
|
|
12447
|
-
var h32 =
|
|
12507
|
+
var h32 = css93`
|
|
12448
12508
|
font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
|
|
12449
12509
|
`;
|
|
12450
|
-
var h42 =
|
|
12510
|
+
var h42 = css93`
|
|
12451
12511
|
font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
|
|
12452
12512
|
`;
|
|
12453
|
-
var h52 =
|
|
12513
|
+
var h52 = css93`
|
|
12454
12514
|
font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
|
|
12455
12515
|
`;
|
|
12456
|
-
var h62 =
|
|
12516
|
+
var h62 = css93`
|
|
12457
12517
|
font-size: var(--fs-base);
|
|
12458
12518
|
`;
|
|
12459
|
-
var heading1Element =
|
|
12519
|
+
var heading1Element = css93`
|
|
12460
12520
|
${h12}
|
|
12461
12521
|
${commonHeadingAttr(true)}
|
|
12462
12522
|
${commonLineHeight}
|
|
12463
12523
|
`;
|
|
12464
|
-
var heading2Element =
|
|
12524
|
+
var heading2Element = css93`
|
|
12465
12525
|
${h22}
|
|
12466
12526
|
${commonHeadingAttr(true)}
|
|
12467
12527
|
${commonLineHeight}
|
|
12468
12528
|
`;
|
|
12469
|
-
var heading3Element =
|
|
12529
|
+
var heading3Element = css93`
|
|
12470
12530
|
${h32}
|
|
12471
12531
|
${commonHeadingAttr(true)}
|
|
12472
12532
|
${commonLineHeight}
|
|
12473
12533
|
`;
|
|
12474
|
-
var heading4Element =
|
|
12534
|
+
var heading4Element = css93`
|
|
12475
12535
|
${h42}
|
|
12476
12536
|
${commonHeadingAttr(true)}
|
|
12477
12537
|
${commonLineHeight}
|
|
12478
12538
|
`;
|
|
12479
|
-
var heading5Element =
|
|
12539
|
+
var heading5Element = css93`
|
|
12480
12540
|
${h52}
|
|
12481
12541
|
${commonHeadingAttr(true)}
|
|
12482
12542
|
${commonLineHeight}
|
|
12483
12543
|
`;
|
|
12484
|
-
var heading6Element =
|
|
12544
|
+
var heading6Element = css93`
|
|
12485
12545
|
${h62}
|
|
12486
12546
|
${commonHeadingAttr(true)}
|
|
12487
12547
|
${commonLineHeight}
|
|
12488
12548
|
`;
|
|
12489
|
-
var paragraphElement =
|
|
12549
|
+
var paragraphElement = css93`
|
|
12490
12550
|
line-height: 1.5;
|
|
12491
12551
|
margin-bottom: var(--spacing-base);
|
|
12492
12552
|
|
|
@@ -12494,7 +12554,7 @@ var paragraphElement = css91`
|
|
|
12494
12554
|
margin-bottom: 0;
|
|
12495
12555
|
}
|
|
12496
12556
|
`;
|
|
12497
|
-
var orderedListElement =
|
|
12557
|
+
var orderedListElement = css93`
|
|
12498
12558
|
${commonLineHeight}
|
|
12499
12559
|
display: block;
|
|
12500
12560
|
list-style: decimal;
|
|
@@ -12523,7 +12583,7 @@ var orderedListElement = css91`
|
|
|
12523
12583
|
}
|
|
12524
12584
|
}
|
|
12525
12585
|
`;
|
|
12526
|
-
var unorderedListElement =
|
|
12586
|
+
var unorderedListElement = css93`
|
|
12527
12587
|
${commonLineHeight}
|
|
12528
12588
|
display: block;
|
|
12529
12589
|
list-style: disc;
|
|
@@ -12544,13 +12604,13 @@ var unorderedListElement = css91`
|
|
|
12544
12604
|
}
|
|
12545
12605
|
}
|
|
12546
12606
|
`;
|
|
12547
|
-
var listItemElement =
|
|
12607
|
+
var listItemElement = css93`
|
|
12548
12608
|
margin-left: var(--spacing-md);
|
|
12549
12609
|
`;
|
|
12550
|
-
var nestedListItemElement =
|
|
12610
|
+
var nestedListItemElement = css93`
|
|
12551
12611
|
list-style-type: none;
|
|
12552
12612
|
`;
|
|
12553
|
-
var blockquoteElement =
|
|
12613
|
+
var blockquoteElement = css93`
|
|
12554
12614
|
border-left: 0.25rem solid var(--gray-300);
|
|
12555
12615
|
color: var(--gray-600);
|
|
12556
12616
|
margin-bottom: var(--spacing-base);
|
|
@@ -12560,7 +12620,7 @@ var blockquoteElement = css91`
|
|
|
12560
12620
|
margin-bottom: 0;
|
|
12561
12621
|
}
|
|
12562
12622
|
`;
|
|
12563
|
-
var codeElement =
|
|
12623
|
+
var codeElement = css93`
|
|
12564
12624
|
background-color: var(--gray-100);
|
|
12565
12625
|
border-radius: var(--rounded-sm);
|
|
12566
12626
|
display: block;
|
|
@@ -12575,7 +12635,7 @@ var codeElement = css91`
|
|
|
12575
12635
|
margin-bottom: 0;
|
|
12576
12636
|
}
|
|
12577
12637
|
`;
|
|
12578
|
-
var tableElement =
|
|
12638
|
+
var tableElement = css93`
|
|
12579
12639
|
border-collapse: collapse;
|
|
12580
12640
|
border-spacing: 0;
|
|
12581
12641
|
border-color: var(--gray-300);
|
|
@@ -12588,7 +12648,7 @@ var tableElement = css91`
|
|
|
12588
12648
|
margin-bottom: 0;
|
|
12589
12649
|
}
|
|
12590
12650
|
`;
|
|
12591
|
-
var tableCellElement =
|
|
12651
|
+
var tableCellElement = css93`
|
|
12592
12652
|
background-color: var(--white);
|
|
12593
12653
|
border-color: var(--gray-300);
|
|
12594
12654
|
border-style: solid;
|
|
@@ -12624,7 +12684,7 @@ var tableCellElement = css91`
|
|
|
12624
12684
|
z-index: 1;
|
|
12625
12685
|
}
|
|
12626
12686
|
`;
|
|
12627
|
-
var tableHeaderElement =
|
|
12687
|
+
var tableHeaderElement = css93`
|
|
12628
12688
|
background-color: var(--gray-100);
|
|
12629
12689
|
border-color: var(--gray-300);
|
|
12630
12690
|
border-style: solid;
|
|
@@ -12694,7 +12754,7 @@ var ImprovedAssetSelectionPlugin = () => {
|
|
|
12694
12754
|
var ImprovedAssetSelectionPlugin_default = ImprovedAssetSelectionPlugin;
|
|
12695
12755
|
|
|
12696
12756
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
12697
|
-
import { css as
|
|
12757
|
+
import { css as css94 } from "@emotion/react";
|
|
12698
12758
|
import { useLexicalComposerContext as useLexicalComposerContext3 } from "@lexical/react/LexicalComposerContext";
|
|
12699
12759
|
import { NodeEventPlugin } from "@lexical/react/LexicalNodeEventPlugin";
|
|
12700
12760
|
import {
|
|
@@ -12754,7 +12814,7 @@ var getSelectedNode = (selection) => {
|
|
|
12754
12814
|
};
|
|
12755
12815
|
|
|
12756
12816
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
12757
|
-
import { Fragment as Fragment14, jsx as
|
|
12817
|
+
import { Fragment as Fragment14, jsx as jsx125, jsxs as jsxs83 } from "@emotion/react/jsx-runtime";
|
|
12758
12818
|
var isProjectMapLinkValue = (value) => {
|
|
12759
12819
|
return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
|
|
12760
12820
|
value.nodeId && value.path && value.projectMapId
|
|
@@ -13043,17 +13103,17 @@ var OPEN_LINK_NODE_MODAL_COMMAND = createCommand(
|
|
|
13043
13103
|
);
|
|
13044
13104
|
var LINK_POPOVER_OFFSET_X = 0;
|
|
13045
13105
|
var LINK_POPOVER_OFFSET_Y = 8;
|
|
13046
|
-
var linkPopover =
|
|
13106
|
+
var linkPopover = css94`
|
|
13047
13107
|
position: absolute;
|
|
13048
13108
|
z-index: 11;
|
|
13049
13109
|
`;
|
|
13050
|
-
var linkPopoverContainer =
|
|
13110
|
+
var linkPopoverContainer = css94`
|
|
13051
13111
|
${Popover};
|
|
13052
13112
|
${PopoverVariantSmall};
|
|
13053
13113
|
align-items: center;
|
|
13054
13114
|
display: flex;
|
|
13055
13115
|
`;
|
|
13056
|
-
var linkPopoverAnchor =
|
|
13116
|
+
var linkPopoverAnchor = css94`
|
|
13057
13117
|
${link}
|
|
13058
13118
|
${linkColorDefault}
|
|
13059
13119
|
`;
|
|
@@ -13241,8 +13301,8 @@ function LinkNodePlugin({
|
|
|
13241
13301
|
});
|
|
13242
13302
|
});
|
|
13243
13303
|
};
|
|
13244
|
-
return /* @__PURE__ */
|
|
13245
|
-
/* @__PURE__ */
|
|
13304
|
+
return /* @__PURE__ */ jsxs83(Fragment14, { children: [
|
|
13305
|
+
/* @__PURE__ */ jsx125(
|
|
13246
13306
|
NodeEventPlugin,
|
|
13247
13307
|
{
|
|
13248
13308
|
nodeType: LinkNode,
|
|
@@ -13252,7 +13312,7 @@ function LinkNodePlugin({
|
|
|
13252
13312
|
}
|
|
13253
13313
|
}
|
|
13254
13314
|
),
|
|
13255
|
-
linkPopoverState ? /* @__PURE__ */
|
|
13315
|
+
linkPopoverState ? /* @__PURE__ */ jsx125(
|
|
13256
13316
|
"div",
|
|
13257
13317
|
{
|
|
13258
13318
|
css: linkPopover,
|
|
@@ -13261,8 +13321,8 @@ function LinkNodePlugin({
|
|
|
13261
13321
|
top: linkPopoverState.position.y
|
|
13262
13322
|
},
|
|
13263
13323
|
ref: linkPopoverElRef,
|
|
13264
|
-
children: /* @__PURE__ */
|
|
13265
|
-
linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */
|
|
13324
|
+
children: /* @__PURE__ */ jsxs83("div", { css: linkPopoverContainer, children: [
|
|
13325
|
+
linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx125(
|
|
13266
13326
|
"a",
|
|
13267
13327
|
{
|
|
13268
13328
|
href: parsePath(
|
|
@@ -13274,7 +13334,7 @@ function LinkNodePlugin({
|
|
|
13274
13334
|
children: parsePath(linkPopoverState.node.__link.path)
|
|
13275
13335
|
}
|
|
13276
13336
|
),
|
|
13277
|
-
/* @__PURE__ */
|
|
13337
|
+
/* @__PURE__ */ jsx125(
|
|
13278
13338
|
Button,
|
|
13279
13339
|
{
|
|
13280
13340
|
size: "xs",
|
|
@@ -13282,7 +13342,7 @@ function LinkNodePlugin({
|
|
|
13282
13342
|
onEditLinkNode(linkPopoverState.node);
|
|
13283
13343
|
},
|
|
13284
13344
|
buttonType: "ghost",
|
|
13285
|
-
children: /* @__PURE__ */
|
|
13345
|
+
children: /* @__PURE__ */ jsx125(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
|
|
13286
13346
|
}
|
|
13287
13347
|
)
|
|
13288
13348
|
] })
|
|
@@ -13420,7 +13480,7 @@ function ListIndentPlugin({ maxDepth }) {
|
|
|
13420
13480
|
}
|
|
13421
13481
|
|
|
13422
13482
|
// src/components/ParameterInputs/rich-text/TableActionMenuPlugin.tsx
|
|
13423
|
-
import { css as
|
|
13483
|
+
import { css as css95 } from "@emotion/react";
|
|
13424
13484
|
import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
|
|
13425
13485
|
import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
|
|
13426
13486
|
import {
|
|
@@ -13441,7 +13501,7 @@ import {
|
|
|
13441
13501
|
} from "@lexical/table";
|
|
13442
13502
|
import { $getRoot as $getRoot2, $getSelection as $getSelection3, $isRangeSelection as $isRangeSelection3 } from "lexical";
|
|
13443
13503
|
import { forwardRef as forwardRef25, useCallback as useCallback9, useEffect as useEffect18, useLayoutEffect, useState as useState16 } from "react";
|
|
13444
|
-
import { jsx as
|
|
13504
|
+
import { jsx as jsx126, jsxs as jsxs84 } from "@emotion/react/jsx-runtime";
|
|
13445
13505
|
function computeSelectionCount(selection) {
|
|
13446
13506
|
const selectionShape = selection.getShape();
|
|
13447
13507
|
return {
|
|
@@ -13449,7 +13509,7 @@ function computeSelectionCount(selection) {
|
|
|
13449
13509
|
rows: selectionShape.toY - selectionShape.fromY + 1
|
|
13450
13510
|
};
|
|
13451
13511
|
}
|
|
13452
|
-
var tableActionMenuTrigger =
|
|
13512
|
+
var tableActionMenuTrigger = css95`
|
|
13453
13513
|
position: absolute;
|
|
13454
13514
|
transform: translate(calc(-100% - 1px), 1px);
|
|
13455
13515
|
`;
|
|
@@ -13463,7 +13523,7 @@ var TableActionMenuTrigger = forwardRef25((props, ref) => {
|
|
|
13463
13523
|
const relativeY = rect.top - parentRect.top + positioningAnchorEl.scrollTop;
|
|
13464
13524
|
setCoordinates({ x: relativeX, y: relativeY });
|
|
13465
13525
|
}, [tableCellEl, positioningAnchorEl]);
|
|
13466
|
-
return /* @__PURE__ */
|
|
13526
|
+
return /* @__PURE__ */ jsx126(
|
|
13467
13527
|
IconButton,
|
|
13468
13528
|
{
|
|
13469
13529
|
ref,
|
|
@@ -13477,7 +13537,7 @@ var TableActionMenuTrigger = forwardRef25((props, ref) => {
|
|
|
13477
13537
|
size: "xs",
|
|
13478
13538
|
buttonType: "unimportant",
|
|
13479
13539
|
...rest,
|
|
13480
|
-
children: /* @__PURE__ */
|
|
13540
|
+
children: /* @__PURE__ */ jsx126(Icon, { icon: "chevron-down", size: "1rem", iconColor: "currentColor" })
|
|
13481
13541
|
}
|
|
13482
13542
|
);
|
|
13483
13543
|
});
|
|
@@ -13628,13 +13688,13 @@ function TableActionMenu({
|
|
|
13628
13688
|
clearTableSelection();
|
|
13629
13689
|
});
|
|
13630
13690
|
}, [editor, tableCellNode, clearTableSelection]);
|
|
13631
|
-
const menuItemCss =
|
|
13691
|
+
const menuItemCss = css95({
|
|
13632
13692
|
fontSize: "var(--fs-sm)"
|
|
13633
13693
|
});
|
|
13634
|
-
return /* @__PURE__ */
|
|
13694
|
+
return /* @__PURE__ */ jsxs84(
|
|
13635
13695
|
Menu,
|
|
13636
13696
|
{
|
|
13637
|
-
menuTrigger: /* @__PURE__ */
|
|
13697
|
+
menuTrigger: /* @__PURE__ */ jsx126(
|
|
13638
13698
|
TableActionMenuTrigger,
|
|
13639
13699
|
{
|
|
13640
13700
|
tableCellEl,
|
|
@@ -13645,7 +13705,7 @@ function TableActionMenu({
|
|
|
13645
13705
|
portalElement: menuPortalEl,
|
|
13646
13706
|
maxMenuHeight: "300px",
|
|
13647
13707
|
children: [
|
|
13648
|
-
/* @__PURE__ */
|
|
13708
|
+
/* @__PURE__ */ jsxs84(
|
|
13649
13709
|
MenuItem,
|
|
13650
13710
|
{
|
|
13651
13711
|
onClick: () => {
|
|
@@ -13659,33 +13719,33 @@ function TableActionMenu({
|
|
|
13659
13719
|
]
|
|
13660
13720
|
}
|
|
13661
13721
|
),
|
|
13662
|
-
/* @__PURE__ */
|
|
13722
|
+
/* @__PURE__ */ jsxs84(MenuItem, { onClick: () => insertTableRowAtSelection(true), css: menuItemCss, children: [
|
|
13663
13723
|
"Insert ",
|
|
13664
13724
|
selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
|
|
13665
13725
|
" below"
|
|
13666
13726
|
] }),
|
|
13667
|
-
/* @__PURE__ */
|
|
13668
|
-
/* @__PURE__ */
|
|
13727
|
+
/* @__PURE__ */ jsx126(MenuItemSeparator, {}),
|
|
13728
|
+
/* @__PURE__ */ jsxs84(MenuItem, { onClick: () => insertTableColumnAtSelection(false), css: menuItemCss, children: [
|
|
13669
13729
|
"Insert ",
|
|
13670
13730
|
selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
|
|
13671
13731
|
" left"
|
|
13672
13732
|
] }),
|
|
13673
|
-
/* @__PURE__ */
|
|
13733
|
+
/* @__PURE__ */ jsxs84(MenuItem, { onClick: () => insertTableColumnAtSelection(true), css: menuItemCss, children: [
|
|
13674
13734
|
"Insert ",
|
|
13675
13735
|
selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
|
|
13676
13736
|
" right"
|
|
13677
13737
|
] }),
|
|
13678
|
-
/* @__PURE__ */
|
|
13679
|
-
/* @__PURE__ */
|
|
13680
|
-
/* @__PURE__ */
|
|
13681
|
-
/* @__PURE__ */
|
|
13682
|
-
/* @__PURE__ */
|
|
13683
|
-
/* @__PURE__ */
|
|
13738
|
+
/* @__PURE__ */ jsx126(MenuItemSeparator, {}),
|
|
13739
|
+
/* @__PURE__ */ jsx126(MenuItem, { onClick: () => deleteTableColumnAtSelection(), css: menuItemCss, children: "Delete column" }),
|
|
13740
|
+
/* @__PURE__ */ jsx126(MenuItem, { onClick: () => deleteTableRowAtSelection(), css: menuItemCss, children: "Delete row" }),
|
|
13741
|
+
/* @__PURE__ */ jsx126(MenuItem, { onClick: () => deleteTableAtSelection(), css: menuItemCss, children: "Delete table" }),
|
|
13742
|
+
/* @__PURE__ */ jsx126(MenuItemSeparator, {}),
|
|
13743
|
+
/* @__PURE__ */ jsxs84(MenuItem, { onClick: () => toggleTableRowIsHeader(), css: menuItemCss, children: [
|
|
13684
13744
|
(tableCellNode.__headerState & TableCellHeaderStates.ROW) === TableCellHeaderStates.ROW ? "Remove" : "Add",
|
|
13685
13745
|
" ",
|
|
13686
13746
|
"row header"
|
|
13687
13747
|
] }),
|
|
13688
|
-
/* @__PURE__ */
|
|
13748
|
+
/* @__PURE__ */ jsxs84(MenuItem, { onClick: () => toggleTableColumnIsHeader(), css: menuItemCss, children: [
|
|
13689
13749
|
(tableCellNode.__headerState & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN ? "Remove" : "Add",
|
|
13690
13750
|
" ",
|
|
13691
13751
|
"column header"
|
|
@@ -13753,7 +13813,7 @@ function TableCellActionMenuContainer({
|
|
|
13753
13813
|
});
|
|
13754
13814
|
});
|
|
13755
13815
|
});
|
|
13756
|
-
return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */
|
|
13816
|
+
return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ jsx126(
|
|
13757
13817
|
TableActionMenu,
|
|
13758
13818
|
{
|
|
13759
13819
|
tableCellNode,
|
|
@@ -13769,11 +13829,11 @@ function TableActionMenuPlugin({
|
|
|
13769
13829
|
menuPortalEl
|
|
13770
13830
|
}) {
|
|
13771
13831
|
const isEditable = useLexicalEditable();
|
|
13772
|
-
return isEditable ? /* @__PURE__ */
|
|
13832
|
+
return isEditable ? /* @__PURE__ */ jsx126(TableCellActionMenuContainer, { menuPortalEl, positioningAnchorEl }) : null;
|
|
13773
13833
|
}
|
|
13774
13834
|
|
|
13775
13835
|
// src/components/ParameterInputs/rich-text/TableCellResizerPlugin.tsx
|
|
13776
|
-
import { css as
|
|
13836
|
+
import { css as css96 } from "@emotion/react";
|
|
13777
13837
|
import { useLexicalComposerContext as useLexicalComposerContext6 } from "@lexical/react/LexicalComposerContext";
|
|
13778
13838
|
import { useLexicalEditable as useLexicalEditable2 } from "@lexical/react/useLexicalEditable";
|
|
13779
13839
|
import {
|
|
@@ -13787,10 +13847,10 @@ import { calculateZoomLevel } from "@lexical/utils";
|
|
|
13787
13847
|
import { $getNearestNodeFromDOMNode } from "lexical";
|
|
13788
13848
|
import { useCallback as useCallback10, useEffect as useEffect19, useMemo as useMemo6, useRef as useRef11, useState as useState17 } from "react";
|
|
13789
13849
|
import { createPortal as createPortal3 } from "react-dom";
|
|
13790
|
-
import { Fragment as Fragment15, jsx as
|
|
13850
|
+
import { Fragment as Fragment15, jsx as jsx127, jsxs as jsxs85 } from "@emotion/react/jsx-runtime";
|
|
13791
13851
|
var MIN_ROW_HEIGHT = 33;
|
|
13792
13852
|
var MIN_COLUMN_WIDTH = 50;
|
|
13793
|
-
var tableResizer =
|
|
13853
|
+
var tableResizer = css96`
|
|
13794
13854
|
position: absolute;
|
|
13795
13855
|
z-index: var(--z-10);
|
|
13796
13856
|
`;
|
|
@@ -14088,8 +14148,8 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
14088
14148
|
};
|
|
14089
14149
|
}, [activeCell, draggingDirection, mouseCurrentPos, positioningAnchorEl]);
|
|
14090
14150
|
const resizerStyles = getResizers();
|
|
14091
|
-
return /* @__PURE__ */
|
|
14092
|
-
/* @__PURE__ */
|
|
14151
|
+
return /* @__PURE__ */ jsx127("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ jsxs85(Fragment15, { children: [
|
|
14152
|
+
/* @__PURE__ */ jsx127(
|
|
14093
14153
|
"div",
|
|
14094
14154
|
{
|
|
14095
14155
|
css: tableResizer,
|
|
@@ -14097,7 +14157,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
14097
14157
|
onMouseDown: toggleResize("right")
|
|
14098
14158
|
}
|
|
14099
14159
|
),
|
|
14100
|
-
/* @__PURE__ */
|
|
14160
|
+
/* @__PURE__ */ jsx127(
|
|
14101
14161
|
"div",
|
|
14102
14162
|
{
|
|
14103
14163
|
css: tableResizer,
|
|
@@ -14112,7 +14172,7 @@ function TableCellResizerPlugin({ positioningAnchorEl }) {
|
|
|
14112
14172
|
const isEditable = useLexicalEditable2();
|
|
14113
14173
|
return useMemo6(
|
|
14114
14174
|
() => isEditable ? createPortal3(
|
|
14115
|
-
/* @__PURE__ */
|
|
14175
|
+
/* @__PURE__ */ jsx127(TableCellResizer, { editor, positioningAnchorEl }),
|
|
14116
14176
|
positioningAnchorEl
|
|
14117
14177
|
) : null,
|
|
14118
14178
|
[editor, isEditable, positioningAnchorEl]
|
|
@@ -14178,7 +14238,7 @@ var TableSelectionPlugin = () => {
|
|
|
14178
14238
|
var TableSelectionPlugin_default = TableSelectionPlugin;
|
|
14179
14239
|
|
|
14180
14240
|
// src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
|
|
14181
|
-
import { css as
|
|
14241
|
+
import { css as css97 } from "@emotion/react";
|
|
14182
14242
|
import { $createCodeNode } from "@lexical/code";
|
|
14183
14243
|
import {
|
|
14184
14244
|
$isListNode as $isListNode2,
|
|
@@ -14348,8 +14408,8 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
14348
14408
|
};
|
|
14349
14409
|
|
|
14350
14410
|
// src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
|
|
14351
|
-
import { Fragment as Fragment16, jsx as
|
|
14352
|
-
var toolbar =
|
|
14411
|
+
import { Fragment as Fragment16, jsx as jsx128, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
|
|
14412
|
+
var toolbar = css97`
|
|
14353
14413
|
${scrollbarStyles}
|
|
14354
14414
|
background: var(--gray-50);
|
|
14355
14415
|
border-radius: var(--rounded-base);
|
|
@@ -14363,7 +14423,7 @@ var toolbar = css95`
|
|
|
14363
14423
|
top: calc(var(--spacing-sm) * -2);
|
|
14364
14424
|
z-index: 10;
|
|
14365
14425
|
`;
|
|
14366
|
-
var toolbarGroup =
|
|
14426
|
+
var toolbarGroup = css97`
|
|
14367
14427
|
display: flex;
|
|
14368
14428
|
flex-shrink: 0;
|
|
14369
14429
|
gap: var(--spacing-xs);
|
|
@@ -14380,7 +14440,7 @@ var toolbarGroup = css95`
|
|
|
14380
14440
|
width: 1px;
|
|
14381
14441
|
}
|
|
14382
14442
|
`;
|
|
14383
|
-
var richTextToolbarButton =
|
|
14443
|
+
var richTextToolbarButton = css97`
|
|
14384
14444
|
align-items: center;
|
|
14385
14445
|
appearance: none;
|
|
14386
14446
|
border: 0;
|
|
@@ -14394,21 +14454,21 @@ var richTextToolbarButton = css95`
|
|
|
14394
14454
|
min-width: 32px;
|
|
14395
14455
|
padding: 0 var(--spacing-sm);
|
|
14396
14456
|
`;
|
|
14397
|
-
var richTextToolbarButtonActive =
|
|
14457
|
+
var richTextToolbarButtonActive = css97`
|
|
14398
14458
|
background: var(--gray-200);
|
|
14399
14459
|
`;
|
|
14400
|
-
var textStyleButton =
|
|
14460
|
+
var textStyleButton = css97`
|
|
14401
14461
|
justify-content: space-between;
|
|
14402
14462
|
min-width: 7rem;
|
|
14403
14463
|
`;
|
|
14404
|
-
var toolbarIcon =
|
|
14464
|
+
var toolbarIcon = css97`
|
|
14405
14465
|
color: inherit;
|
|
14406
14466
|
`;
|
|
14407
|
-
var toolbarChevron =
|
|
14467
|
+
var toolbarChevron = css97`
|
|
14408
14468
|
margin-left: var(--spacing-xs);
|
|
14409
14469
|
`;
|
|
14410
14470
|
var RichTextToolbarIcon = ({ icon }) => {
|
|
14411
|
-
return /* @__PURE__ */
|
|
14471
|
+
return /* @__PURE__ */ jsx128(Icon, { icon, css: toolbarIcon, size: "1rem" });
|
|
14412
14472
|
};
|
|
14413
14473
|
var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset }) => {
|
|
14414
14474
|
const [editor] = useLexicalComposerContext8();
|
|
@@ -14522,14 +14582,14 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14522
14582
|
});
|
|
14523
14583
|
});
|
|
14524
14584
|
}, [editor, updateToolbar]);
|
|
14525
|
-
return /* @__PURE__ */
|
|
14526
|
-
/* @__PURE__ */
|
|
14585
|
+
return /* @__PURE__ */ jsxs86("div", { css: toolbar, "data-testid": "rich-text-toolbar", children: [
|
|
14586
|
+
/* @__PURE__ */ jsxs86(
|
|
14527
14587
|
Menu,
|
|
14528
14588
|
{
|
|
14529
|
-
menuTrigger: /* @__PURE__ */
|
|
14589
|
+
menuTrigger: /* @__PURE__ */ jsxs86("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", children: [
|
|
14530
14590
|
visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
|
|
14531
14591
|
" ",
|
|
14532
|
-
/* @__PURE__ */
|
|
14592
|
+
/* @__PURE__ */ jsx128(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
14533
14593
|
] }),
|
|
14534
14594
|
placement: "bottom-start",
|
|
14535
14595
|
children: [
|
|
@@ -14539,7 +14599,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14539
14599
|
type: "paragraph"
|
|
14540
14600
|
},
|
|
14541
14601
|
...visibleTextualElements
|
|
14542
|
-
].map((element) => /* @__PURE__ */
|
|
14602
|
+
].map((element) => /* @__PURE__ */ jsx128(
|
|
14543
14603
|
MenuItem,
|
|
14544
14604
|
{
|
|
14545
14605
|
"data-testid": "menu-item",
|
|
@@ -14550,12 +14610,12 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14550
14610
|
},
|
|
14551
14611
|
element.type
|
|
14552
14612
|
)),
|
|
14553
|
-
visibleTextualElements.length === 0 ? /* @__PURE__ */
|
|
14613
|
+
visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx128(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
|
|
14554
14614
|
]
|
|
14555
14615
|
}
|
|
14556
14616
|
),
|
|
14557
|
-
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */
|
|
14558
|
-
visibleFormatsWithIcon.map((format) => /* @__PURE__ */
|
|
14617
|
+
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs86("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-formatting", children: [
|
|
14618
|
+
visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx128(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx128(
|
|
14559
14619
|
"button",
|
|
14560
14620
|
{
|
|
14561
14621
|
"data-testid": `formatting-button-${format.type}`,
|
|
@@ -14566,15 +14626,15 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14566
14626
|
richTextToolbarButton,
|
|
14567
14627
|
activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
|
|
14568
14628
|
],
|
|
14569
|
-
children: /* @__PURE__ */
|
|
14629
|
+
children: /* @__PURE__ */ jsx128(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
|
|
14570
14630
|
}
|
|
14571
14631
|
) }, format.type)),
|
|
14572
|
-
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */
|
|
14632
|
+
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx128(
|
|
14573
14633
|
Menu,
|
|
14574
14634
|
{
|
|
14575
|
-
menuTrigger: /* @__PURE__ */
|
|
14635
|
+
menuTrigger: /* @__PURE__ */ jsx128("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx128(Icon, { icon: "more-alt", css: toolbarIcon }) }),
|
|
14576
14636
|
placement: "bottom-start",
|
|
14577
|
-
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */
|
|
14637
|
+
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx128(
|
|
14578
14638
|
MenuItem,
|
|
14579
14639
|
{
|
|
14580
14640
|
onClick: () => {
|
|
@@ -14587,8 +14647,8 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14587
14647
|
}
|
|
14588
14648
|
) : null
|
|
14589
14649
|
] }) : null,
|
|
14590
|
-
visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */
|
|
14591
|
-
linkElementVisible ? /* @__PURE__ */
|
|
14650
|
+
visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */ jsxs86("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-elements", children: [
|
|
14651
|
+
linkElementVisible ? /* @__PURE__ */ jsx128(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx128(
|
|
14592
14652
|
"button",
|
|
14593
14653
|
{
|
|
14594
14654
|
"data-testid": "element-link",
|
|
@@ -14600,11 +14660,11 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14600
14660
|
}
|
|
14601
14661
|
},
|
|
14602
14662
|
css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
|
|
14603
|
-
children: /* @__PURE__ */
|
|
14663
|
+
children: /* @__PURE__ */ jsx128(RichTextToolbarIcon, { icon: "link" })
|
|
14604
14664
|
}
|
|
14605
14665
|
) }) : null,
|
|
14606
|
-
visibleLists.size > 0 ? /* @__PURE__ */
|
|
14607
|
-
visibleLists.has("unorderedList") ? /* @__PURE__ */
|
|
14666
|
+
visibleLists.size > 0 ? /* @__PURE__ */ jsxs86(Fragment16, { children: [
|
|
14667
|
+
visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx128(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx128(
|
|
14608
14668
|
"button",
|
|
14609
14669
|
{
|
|
14610
14670
|
"data-testid": "element-unordered-list",
|
|
@@ -14619,10 +14679,10 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14619
14679
|
richTextToolbarButton,
|
|
14620
14680
|
activeElement === "unorderedList" ? richTextToolbarButtonActive : null
|
|
14621
14681
|
],
|
|
14622
|
-
children: /* @__PURE__ */
|
|
14682
|
+
children: /* @__PURE__ */ jsx128(RichTextToolbarIcon, { icon: "layout-list" })
|
|
14623
14683
|
}
|
|
14624
14684
|
) }) : null,
|
|
14625
|
-
visibleLists.has("orderedList") ? /* @__PURE__ */
|
|
14685
|
+
visibleLists.has("orderedList") ? /* @__PURE__ */ jsx128(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx128(
|
|
14626
14686
|
"button",
|
|
14627
14687
|
{
|
|
14628
14688
|
"data-testid": "element-ordered-list",
|
|
@@ -14637,58 +14697,58 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14637
14697
|
richTextToolbarButton,
|
|
14638
14698
|
activeElement === "orderedList" ? richTextToolbarButtonActive : null
|
|
14639
14699
|
],
|
|
14640
|
-
children: /* @__PURE__ */
|
|
14700
|
+
children: /* @__PURE__ */ jsx128(RichTextToolbarIcon, { icon: "layout-list-numbered" })
|
|
14641
14701
|
}
|
|
14642
14702
|
) }) : null
|
|
14643
14703
|
] }) : null,
|
|
14644
14704
|
customControls ? customControls : null
|
|
14645
14705
|
] }) : null,
|
|
14646
|
-
visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */
|
|
14706
|
+
visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ jsx128("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-insert", children: /* @__PURE__ */ jsxs86(
|
|
14647
14707
|
Menu,
|
|
14648
14708
|
{
|
|
14649
|
-
menuTrigger: /* @__PURE__ */
|
|
14709
|
+
menuTrigger: /* @__PURE__ */ jsxs86("button", { css: richTextToolbarButton, title: "Insert block element", children: [
|
|
14650
14710
|
"Insert",
|
|
14651
|
-
/* @__PURE__ */
|
|
14711
|
+
/* @__PURE__ */ jsx128(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
14652
14712
|
] }),
|
|
14653
14713
|
placement: "bottom-start",
|
|
14654
14714
|
children: [
|
|
14655
|
-
quoteElementVisible ? /* @__PURE__ */
|
|
14715
|
+
quoteElementVisible ? /* @__PURE__ */ jsx128(
|
|
14656
14716
|
MenuItem,
|
|
14657
14717
|
{
|
|
14658
14718
|
onClick: () => {
|
|
14659
14719
|
onSelectElement("quote");
|
|
14660
14720
|
},
|
|
14661
|
-
icon: /* @__PURE__ */
|
|
14721
|
+
icon: /* @__PURE__ */ jsx128(Icon, { icon: "quote", iconColor: "currentColor" }),
|
|
14662
14722
|
children: "Quote"
|
|
14663
14723
|
}
|
|
14664
14724
|
) : null,
|
|
14665
|
-
codeElementVisible ? /* @__PURE__ */
|
|
14725
|
+
codeElementVisible ? /* @__PURE__ */ jsx128(
|
|
14666
14726
|
MenuItem,
|
|
14667
14727
|
{
|
|
14668
14728
|
onClick: () => {
|
|
14669
14729
|
onSelectElement("code");
|
|
14670
14730
|
},
|
|
14671
|
-
icon: /* @__PURE__ */
|
|
14731
|
+
icon: /* @__PURE__ */ jsx128(Icon, { icon: "code-slash", iconColor: "currentColor" }),
|
|
14672
14732
|
children: "Code"
|
|
14673
14733
|
}
|
|
14674
14734
|
) : null,
|
|
14675
|
-
tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */
|
|
14735
|
+
tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ jsx128(
|
|
14676
14736
|
MenuItem,
|
|
14677
14737
|
{
|
|
14678
14738
|
onClick: () => {
|
|
14679
14739
|
onSelectElement("table");
|
|
14680
14740
|
},
|
|
14681
|
-
icon: /* @__PURE__ */
|
|
14741
|
+
icon: /* @__PURE__ */ jsx128(Icon, { icon: "view-grid", iconColor: "currentColor" }),
|
|
14682
14742
|
children: "Table"
|
|
14683
14743
|
}
|
|
14684
14744
|
) : null,
|
|
14685
|
-
assetElementVisible && onInsertAsset !== void 0 ? /* @__PURE__ */
|
|
14745
|
+
assetElementVisible && onInsertAsset !== void 0 ? /* @__PURE__ */ jsx128(
|
|
14686
14746
|
MenuItem,
|
|
14687
14747
|
{
|
|
14688
14748
|
onClick: () => {
|
|
14689
14749
|
onSelectElement("asset");
|
|
14690
14750
|
},
|
|
14691
|
-
icon: /* @__PURE__ */
|
|
14751
|
+
icon: /* @__PURE__ */ jsx128(Icon, { icon: "image", iconColor: "currentColor" }),
|
|
14692
14752
|
children: "Asset"
|
|
14693
14753
|
}
|
|
14694
14754
|
) : null
|
|
@@ -14700,7 +14760,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14700
14760
|
var RichTextToolbar_default = RichTextToolbar;
|
|
14701
14761
|
|
|
14702
14762
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
14703
|
-
import { Fragment as Fragment17, jsx as
|
|
14763
|
+
import { Fragment as Fragment17, jsx as jsx129, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
|
|
14704
14764
|
var ParameterRichText = ({
|
|
14705
14765
|
label,
|
|
14706
14766
|
labelLeadingIcon,
|
|
@@ -14729,7 +14789,7 @@ var ParameterRichText = ({
|
|
|
14729
14789
|
onInsertAsset,
|
|
14730
14790
|
minimalInteractivity
|
|
14731
14791
|
}) => {
|
|
14732
|
-
return /* @__PURE__ */
|
|
14792
|
+
return /* @__PURE__ */ jsxs87(
|
|
14733
14793
|
ParameterShell,
|
|
14734
14794
|
{
|
|
14735
14795
|
"data-testid": "parameter-richtext",
|
|
@@ -14743,7 +14803,7 @@ var ParameterRichText = ({
|
|
|
14743
14803
|
captionTestId,
|
|
14744
14804
|
menuItems,
|
|
14745
14805
|
children: [
|
|
14746
|
-
/* @__PURE__ */
|
|
14806
|
+
/* @__PURE__ */ jsx129(
|
|
14747
14807
|
ParameterRichTextInner,
|
|
14748
14808
|
{
|
|
14749
14809
|
value,
|
|
@@ -14765,12 +14825,12 @@ var ParameterRichText = ({
|
|
|
14765
14825
|
children
|
|
14766
14826
|
}
|
|
14767
14827
|
),
|
|
14768
|
-
menuItems ? /* @__PURE__ */
|
|
14828
|
+
menuItems ? /* @__PURE__ */ jsx129(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx129(Fragment17, { children: menuItems }) }) : null
|
|
14769
14829
|
]
|
|
14770
14830
|
}
|
|
14771
14831
|
);
|
|
14772
14832
|
};
|
|
14773
|
-
var editorContainerWrapper =
|
|
14833
|
+
var editorContainerWrapper = css98`
|
|
14774
14834
|
position: relative;
|
|
14775
14835
|
|
|
14776
14836
|
&::before {
|
|
@@ -14786,12 +14846,12 @@ var editorContainerWrapper = css96`
|
|
|
14786
14846
|
z-index: 2;
|
|
14787
14847
|
}
|
|
14788
14848
|
`;
|
|
14789
|
-
var editorWrapper =
|
|
14849
|
+
var editorWrapper = css98`
|
|
14790
14850
|
display: flex;
|
|
14791
14851
|
flex-flow: column;
|
|
14792
14852
|
flex-grow: 1;
|
|
14793
14853
|
`;
|
|
14794
|
-
var editorContainer =
|
|
14854
|
+
var editorContainer = css98`
|
|
14795
14855
|
${scrollbarStyles}
|
|
14796
14856
|
background: var(--white);
|
|
14797
14857
|
border-radius: var(--rounded-sm);
|
|
@@ -14823,7 +14883,7 @@ var editorContainer = css96`
|
|
|
14823
14883
|
max-height: unset;
|
|
14824
14884
|
}
|
|
14825
14885
|
`;
|
|
14826
|
-
var editorContainerOverflowWrapper =
|
|
14886
|
+
var editorContainerOverflowWrapper = css98`
|
|
14827
14887
|
overflow: hidden;
|
|
14828
14888
|
pointer-events: none;
|
|
14829
14889
|
|
|
@@ -14831,7 +14891,7 @@ var editorContainerOverflowWrapper = css96`
|
|
|
14831
14891
|
pointer-events: auto;
|
|
14832
14892
|
}
|
|
14833
14893
|
`;
|
|
14834
|
-
var editorPlaceholder =
|
|
14894
|
+
var editorPlaceholder = css98`
|
|
14835
14895
|
color: var(--gray-500);
|
|
14836
14896
|
font-style: italic;
|
|
14837
14897
|
/* 1px is added to make sure caret is clearly visible when field is focused
|
|
@@ -14842,7 +14902,7 @@ var editorPlaceholder = css96`
|
|
|
14842
14902
|
top: calc(1rem + var(--spacing-sm));
|
|
14843
14903
|
user-select: none;
|
|
14844
14904
|
`;
|
|
14845
|
-
var editorInput =
|
|
14905
|
+
var editorInput = css98`
|
|
14846
14906
|
min-height: 100%;
|
|
14847
14907
|
flex-grow: 1;
|
|
14848
14908
|
|
|
@@ -14926,8 +14986,8 @@ var ParameterRichTextInner = ({
|
|
|
14926
14986
|
},
|
|
14927
14987
|
editable: !readOnly
|
|
14928
14988
|
};
|
|
14929
|
-
return /* @__PURE__ */
|
|
14930
|
-
/* @__PURE__ */
|
|
14989
|
+
return /* @__PURE__ */ jsxs87(Fragment17, { children: [
|
|
14990
|
+
/* @__PURE__ */ jsx129("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx129(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx129(
|
|
14931
14991
|
RichText,
|
|
14932
14992
|
{
|
|
14933
14993
|
onChange,
|
|
@@ -15005,8 +15065,8 @@ var RichText = ({
|
|
|
15005
15065
|
setPortalContainerRef(_portalContainerRef);
|
|
15006
15066
|
}
|
|
15007
15067
|
};
|
|
15008
|
-
return /* @__PURE__ */
|
|
15009
|
-
readOnly || minimalInteractivity ? null : /* @__PURE__ */
|
|
15068
|
+
return /* @__PURE__ */ jsxs87(Fragment17, { children: [
|
|
15069
|
+
readOnly || minimalInteractivity ? null : /* @__PURE__ */ jsx129(
|
|
15010
15070
|
RichTextToolbar_default,
|
|
15011
15071
|
{
|
|
15012
15072
|
config,
|
|
@@ -15015,8 +15075,8 @@ var RichText = ({
|
|
|
15015
15075
|
onInsertAsset
|
|
15016
15076
|
}
|
|
15017
15077
|
),
|
|
15018
|
-
/* @__PURE__ */
|
|
15019
|
-
/* @__PURE__ */
|
|
15078
|
+
/* @__PURE__ */ jsxs87("div", { css: editorContainerWrapper, ref: onPortalContainerRef, children: [
|
|
15079
|
+
/* @__PURE__ */ jsxs87(
|
|
15020
15080
|
"div",
|
|
15021
15081
|
{
|
|
15022
15082
|
css: editorContainer,
|
|
@@ -15024,33 +15084,33 @@ var RichText = ({
|
|
|
15024
15084
|
ref: onEditorContainerRef,
|
|
15025
15085
|
"data-testid": "value-container",
|
|
15026
15086
|
children: [
|
|
15027
|
-
/* @__PURE__ */
|
|
15087
|
+
/* @__PURE__ */ jsx129(
|
|
15028
15088
|
RichTextPlugin,
|
|
15029
15089
|
{
|
|
15030
|
-
contentEditable: /* @__PURE__ */
|
|
15031
|
-
placeholder: /* @__PURE__ */
|
|
15090
|
+
contentEditable: /* @__PURE__ */ jsx129(ContentEditable, { css: editorInput, className: editorInputClassName }),
|
|
15091
|
+
placeholder: /* @__PURE__ */ jsx129("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
|
|
15032
15092
|
ErrorBoundary: LexicalErrorBoundary
|
|
15033
15093
|
}
|
|
15034
15094
|
),
|
|
15035
|
-
/* @__PURE__ */
|
|
15036
|
-
/* @__PURE__ */
|
|
15037
|
-
/* @__PURE__ */
|
|
15038
|
-
/* @__PURE__ */
|
|
15095
|
+
/* @__PURE__ */ jsx129(ListPlugin, {}),
|
|
15096
|
+
/* @__PURE__ */ jsx129(ListIndentPlugin, { maxDepth: 4 }),
|
|
15097
|
+
/* @__PURE__ */ jsx129(TablePlugin, { hasCellMerge: false, hasCellBackgroundColor: false }),
|
|
15098
|
+
/* @__PURE__ */ jsx129("div", { css: editorContainerOverflowWrapper, "data-testid": "table-action-menu-plugin", children: editorContainerRef && portalContainerRef && !minimalInteractivity ? /* @__PURE__ */ jsx129(
|
|
15039
15099
|
TableActionMenuPlugin,
|
|
15040
15100
|
{
|
|
15041
15101
|
positioningAnchorEl: editorContainerRef,
|
|
15042
15102
|
menuPortalEl: portalContainerRef
|
|
15043
15103
|
}
|
|
15044
15104
|
) : null }),
|
|
15045
|
-
editorContainerRef && !minimalInteractivity ? /* @__PURE__ */
|
|
15046
|
-
readOnly ? null : /* @__PURE__ */
|
|
15047
|
-
/* @__PURE__ */
|
|
15048
|
-
/* @__PURE__ */
|
|
15105
|
+
editorContainerRef && !minimalInteractivity ? /* @__PURE__ */ jsx129(TableCellResizerPlugin, { positioningAnchorEl: editorContainerRef }) : null,
|
|
15106
|
+
readOnly ? null : /* @__PURE__ */ jsx129(HistoryPlugin, {}),
|
|
15107
|
+
/* @__PURE__ */ jsx129(DisableStylesPlugin, {}),
|
|
15108
|
+
/* @__PURE__ */ jsx129(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS })
|
|
15049
15109
|
]
|
|
15050
15110
|
}
|
|
15051
15111
|
),
|
|
15052
|
-
/* @__PURE__ */
|
|
15053
|
-
editorContainerRef ? /* @__PURE__ */
|
|
15112
|
+
/* @__PURE__ */ jsx129(Fragment17, { children }),
|
|
15113
|
+
editorContainerRef ? /* @__PURE__ */ jsx129(
|
|
15054
15114
|
LinkNodePlugin,
|
|
15055
15115
|
{
|
|
15056
15116
|
onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
|
|
@@ -15061,25 +15121,25 @@ var RichText = ({
|
|
|
15061
15121
|
positioningAnchorEl: editorContainerRef
|
|
15062
15122
|
}
|
|
15063
15123
|
) : null,
|
|
15064
|
-
/* @__PURE__ */
|
|
15065
|
-
/* @__PURE__ */
|
|
15124
|
+
/* @__PURE__ */ jsx129(TableSelectionPlugin_default, {}),
|
|
15125
|
+
/* @__PURE__ */ jsx129(ImprovedAssetSelectionPlugin_default, {})
|
|
15066
15126
|
] })
|
|
15067
15127
|
] });
|
|
15068
15128
|
};
|
|
15069
15129
|
|
|
15070
15130
|
// src/components/ParameterInputs/ParameterSelect.tsx
|
|
15071
15131
|
import { forwardRef as forwardRef26 } from "react";
|
|
15072
|
-
import { jsx as
|
|
15132
|
+
import { jsx as jsx130, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
|
|
15073
15133
|
var ParameterSelect = forwardRef26(
|
|
15074
15134
|
({ defaultOption, options, ...props }, ref) => {
|
|
15075
15135
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
15076
|
-
return /* @__PURE__ */
|
|
15136
|
+
return /* @__PURE__ */ jsx130(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx130(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
|
|
15077
15137
|
}
|
|
15078
15138
|
);
|
|
15079
15139
|
var ParameterSelectInner = forwardRef26(
|
|
15080
15140
|
({ defaultOption, options, ...props }, ref) => {
|
|
15081
15141
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
15082
|
-
return /* @__PURE__ */
|
|
15142
|
+
return /* @__PURE__ */ jsxs88(
|
|
15083
15143
|
"select",
|
|
15084
15144
|
{
|
|
15085
15145
|
css: [input3, selectInput],
|
|
@@ -15088,10 +15148,10 @@ var ParameterSelectInner = forwardRef26(
|
|
|
15088
15148
|
ref,
|
|
15089
15149
|
...props,
|
|
15090
15150
|
children: [
|
|
15091
|
-
defaultOption ? /* @__PURE__ */
|
|
15151
|
+
defaultOption ? /* @__PURE__ */ jsx130("option", { value: "", children: defaultOption }) : null,
|
|
15092
15152
|
options.map((option) => {
|
|
15093
15153
|
var _a;
|
|
15094
|
-
return /* @__PURE__ */
|
|
15154
|
+
return /* @__PURE__ */ jsx130("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
|
|
15095
15155
|
})
|
|
15096
15156
|
]
|
|
15097
15157
|
}
|
|
@@ -15101,14 +15161,14 @@ var ParameterSelectInner = forwardRef26(
|
|
|
15101
15161
|
|
|
15102
15162
|
// src/components/ParameterInputs/ParameterTextarea.tsx
|
|
15103
15163
|
import { forwardRef as forwardRef27 } from "react";
|
|
15104
|
-
import { jsx as
|
|
15164
|
+
import { jsx as jsx131 } from "@emotion/react/jsx-runtime";
|
|
15105
15165
|
var ParameterTextarea = forwardRef27((props, ref) => {
|
|
15106
15166
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
15107
|
-
return /* @__PURE__ */
|
|
15167
|
+
return /* @__PURE__ */ jsx131(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx131(ParameterTextareaInner, { ref, ...innerProps }) });
|
|
15108
15168
|
});
|
|
15109
15169
|
var ParameterTextareaInner = forwardRef27(({ ...props }, ref) => {
|
|
15110
15170
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
15111
|
-
return /* @__PURE__ */
|
|
15171
|
+
return /* @__PURE__ */ jsx131(
|
|
15112
15172
|
"textarea",
|
|
15113
15173
|
{
|
|
15114
15174
|
css: [input3, textarea2],
|
|
@@ -15122,17 +15182,17 @@ var ParameterTextareaInner = forwardRef27(({ ...props }, ref) => {
|
|
|
15122
15182
|
|
|
15123
15183
|
// src/components/ParameterInputs/ParameterToggle.tsx
|
|
15124
15184
|
import { forwardRef as forwardRef28 } from "react";
|
|
15125
|
-
import { jsx as
|
|
15185
|
+
import { jsx as jsx132, jsxs as jsxs89 } from "@emotion/react/jsx-runtime";
|
|
15126
15186
|
var ParameterToggle = forwardRef28((props, ref) => {
|
|
15127
15187
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
15128
|
-
return /* @__PURE__ */
|
|
15188
|
+
return /* @__PURE__ */ jsx132(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx132(ParameterToggleInner, { ref, ...innerProps }) });
|
|
15129
15189
|
});
|
|
15130
15190
|
var ParameterToggleInner = forwardRef28(
|
|
15131
15191
|
({ children, ...props }, ref) => {
|
|
15132
15192
|
const { id, label } = useParameterShell();
|
|
15133
|
-
return /* @__PURE__ */
|
|
15134
|
-
/* @__PURE__ */
|
|
15135
|
-
/* @__PURE__ */
|
|
15193
|
+
return /* @__PURE__ */ jsxs89("label", { css: inputToggleLabel2, children: [
|
|
15194
|
+
/* @__PURE__ */ jsx132("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
|
|
15195
|
+
/* @__PURE__ */ jsx132("span", { css: inlineLabel2, children: label }),
|
|
15136
15196
|
children
|
|
15137
15197
|
] });
|
|
15138
15198
|
}
|
|
@@ -15147,7 +15207,7 @@ import {
|
|
|
15147
15207
|
usePopoverStore as usePopoverStore2
|
|
15148
15208
|
} from "@ariakit/react";
|
|
15149
15209
|
import { useEffect as useEffect23 } from "react";
|
|
15150
|
-
import { Fragment as Fragment18, jsx as
|
|
15210
|
+
import { Fragment as Fragment18, jsx as jsx133, jsxs as jsxs90 } from "@emotion/react/jsx-runtime";
|
|
15151
15211
|
var Popover3 = ({
|
|
15152
15212
|
iconColor = "action",
|
|
15153
15213
|
icon = "info",
|
|
@@ -15167,20 +15227,20 @@ var Popover3 = ({
|
|
|
15167
15227
|
useEffect23(() => {
|
|
15168
15228
|
onInit == null ? void 0 : onInit({ store: popover2 });
|
|
15169
15229
|
}, [popover2]);
|
|
15170
|
-
return /* @__PURE__ */
|
|
15171
|
-
/* @__PURE__ */
|
|
15230
|
+
return /* @__PURE__ */ jsxs90(PopoverProvider2, { store: popover2, children: [
|
|
15231
|
+
/* @__PURE__ */ jsx133(
|
|
15172
15232
|
PopoverDisclosure2,
|
|
15173
15233
|
{
|
|
15174
15234
|
css: [PopoverBtn, trigger2 ? void 0 : PopoverDefaulterTriggerBtn],
|
|
15175
15235
|
title: buttonText,
|
|
15176
15236
|
"data-testid": testId,
|
|
15177
|
-
children: trigger2 ? trigger2 : /* @__PURE__ */
|
|
15178
|
-
/* @__PURE__ */
|
|
15179
|
-
/* @__PURE__ */
|
|
15237
|
+
children: trigger2 ? trigger2 : /* @__PURE__ */ jsxs90(Fragment18, { children: [
|
|
15238
|
+
/* @__PURE__ */ jsx133(Icon, { icon, iconColor, size: iconSize }),
|
|
15239
|
+
/* @__PURE__ */ jsx133("span", { hidden: true, children: buttonText })
|
|
15180
15240
|
] })
|
|
15181
15241
|
}
|
|
15182
15242
|
),
|
|
15183
|
-
/* @__PURE__ */
|
|
15243
|
+
/* @__PURE__ */ jsx133(
|
|
15184
15244
|
AriakitPopover,
|
|
15185
15245
|
{
|
|
15186
15246
|
unmountOnHide: true,
|
|
@@ -15201,8 +15261,8 @@ var usePopoverComponentContext = () => {
|
|
|
15201
15261
|
};
|
|
15202
15262
|
|
|
15203
15263
|
// src/components/ProgressBar/ProgressBar.styles.ts
|
|
15204
|
-
import { css as
|
|
15205
|
-
var container3 =
|
|
15264
|
+
import { css as css99, keyframes as keyframes4 } from "@emotion/react";
|
|
15265
|
+
var container3 = css99`
|
|
15206
15266
|
background: var(--gray-50);
|
|
15207
15267
|
margin-block: var(--spacing-sm);
|
|
15208
15268
|
position: relative;
|
|
@@ -15212,13 +15272,13 @@ var container3 = css97`
|
|
|
15212
15272
|
border: solid 1px var(--gray-300);
|
|
15213
15273
|
`;
|
|
15214
15274
|
var themeMap = {
|
|
15215
|
-
primary:
|
|
15275
|
+
primary: css99`
|
|
15216
15276
|
--progress-color: var(--accent-light);
|
|
15217
15277
|
`,
|
|
15218
|
-
secondary:
|
|
15278
|
+
secondary: css99`
|
|
15219
15279
|
--progress-color: var(--accent-alt-light);
|
|
15220
15280
|
`,
|
|
15221
|
-
destructive:
|
|
15281
|
+
destructive: css99`
|
|
15222
15282
|
--progress-color: var(--brand-secondary-5);
|
|
15223
15283
|
`
|
|
15224
15284
|
};
|
|
@@ -15230,10 +15290,10 @@ var slidingBackgroundPosition = keyframes4`
|
|
|
15230
15290
|
background-position: 64px 0;
|
|
15231
15291
|
}
|
|
15232
15292
|
`;
|
|
15233
|
-
var determinate =
|
|
15293
|
+
var determinate = css99`
|
|
15234
15294
|
background-color: var(--progress-color);
|
|
15235
15295
|
`;
|
|
15236
|
-
var indeterminate =
|
|
15296
|
+
var indeterminate = css99`
|
|
15237
15297
|
background-image: linear-gradient(
|
|
15238
15298
|
45deg,
|
|
15239
15299
|
var(--progress-color) 25%,
|
|
@@ -15247,7 +15307,7 @@ var indeterminate = css97`
|
|
|
15247
15307
|
background-size: 64px 64px;
|
|
15248
15308
|
animation: ${slidingBackgroundPosition} 1s linear infinite;
|
|
15249
15309
|
`;
|
|
15250
|
-
var bar =
|
|
15310
|
+
var bar = css99`
|
|
15251
15311
|
position: absolute;
|
|
15252
15312
|
inset: 0;
|
|
15253
15313
|
transition: transform var(--duration-fast) var(--timing-ease-out);
|
|
@@ -15255,7 +15315,7 @@ var bar = css97`
|
|
|
15255
15315
|
`;
|
|
15256
15316
|
|
|
15257
15317
|
// src/components/ProgressBar/ProgressBar.tsx
|
|
15258
|
-
import { jsx as
|
|
15318
|
+
import { jsx as jsx134 } from "@emotion/react/jsx-runtime";
|
|
15259
15319
|
function ProgressBar({
|
|
15260
15320
|
current,
|
|
15261
15321
|
max,
|
|
@@ -15265,7 +15325,7 @@ function ProgressBar({
|
|
|
15265
15325
|
}) {
|
|
15266
15326
|
const valueNow = Math.min(current, max);
|
|
15267
15327
|
const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
|
|
15268
|
-
return /* @__PURE__ */
|
|
15328
|
+
return /* @__PURE__ */ jsx134(
|
|
15269
15329
|
"div",
|
|
15270
15330
|
{
|
|
15271
15331
|
css: container3,
|
|
@@ -15276,7 +15336,7 @@ function ProgressBar({
|
|
|
15276
15336
|
"aria-valuemax": max,
|
|
15277
15337
|
"aria-valuenow": valueNow,
|
|
15278
15338
|
...props,
|
|
15279
|
-
children: /* @__PURE__ */
|
|
15339
|
+
children: /* @__PURE__ */ jsx134(
|
|
15280
15340
|
"div",
|
|
15281
15341
|
{
|
|
15282
15342
|
css: [
|
|
@@ -15295,28 +15355,28 @@ function ProgressBar({
|
|
|
15295
15355
|
}
|
|
15296
15356
|
|
|
15297
15357
|
// src/components/ProgressList/ProgressList.tsx
|
|
15298
|
-
import { css as
|
|
15358
|
+
import { css as css101 } from "@emotion/react";
|
|
15299
15359
|
import { CgCheckO as CgCheckO2 } from "@react-icons/all-files/cg/CgCheckO";
|
|
15300
15360
|
import { CgRadioCheck } from "@react-icons/all-files/cg/CgRadioCheck";
|
|
15301
15361
|
import { CgRecord } from "@react-icons/all-files/cg/CgRecord";
|
|
15302
15362
|
import { useMemo as useMemo8 } from "react";
|
|
15303
15363
|
|
|
15304
15364
|
// src/components/ProgressList/styles/ProgressList.styles.ts
|
|
15305
|
-
import { css as
|
|
15306
|
-
var progressListStyles =
|
|
15365
|
+
import { css as css100 } from "@emotion/react";
|
|
15366
|
+
var progressListStyles = css100`
|
|
15307
15367
|
display: flex;
|
|
15308
15368
|
flex-direction: column;
|
|
15309
15369
|
gap: var(--spacing-sm);
|
|
15310
15370
|
list-style-type: none;
|
|
15311
15371
|
`;
|
|
15312
|
-
var progressListItemStyles =
|
|
15372
|
+
var progressListItemStyles = css100`
|
|
15313
15373
|
display: flex;
|
|
15314
15374
|
gap: var(--spacing-base);
|
|
15315
15375
|
align-items: center;
|
|
15316
15376
|
`;
|
|
15317
15377
|
|
|
15318
15378
|
// src/components/ProgressList/ProgressList.tsx
|
|
15319
|
-
import { jsx as
|
|
15379
|
+
import { jsx as jsx135, jsxs as jsxs91 } from "@emotion/react/jsx-runtime";
|
|
15320
15380
|
var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
15321
15381
|
const itemsWithStatus = useMemo8(() => {
|
|
15322
15382
|
const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
|
|
@@ -15330,8 +15390,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
|
15330
15390
|
return { ...item, status };
|
|
15331
15391
|
});
|
|
15332
15392
|
}, [items, inProgressId]);
|
|
15333
|
-
return /* @__PURE__ */
|
|
15334
|
-
return /* @__PURE__ */
|
|
15393
|
+
return /* @__PURE__ */ jsx135("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
|
|
15394
|
+
return /* @__PURE__ */ jsx135(
|
|
15335
15395
|
ProgressListItem,
|
|
15336
15396
|
{
|
|
15337
15397
|
status,
|
|
@@ -15364,12 +15424,12 @@ var ProgressListItem = ({
|
|
|
15364
15424
|
}, [status, error]);
|
|
15365
15425
|
const statusStyles = useMemo8(() => {
|
|
15366
15426
|
if (error) {
|
|
15367
|
-
return errorLevel === "caution" ?
|
|
15427
|
+
return errorLevel === "caution" ? css101`
|
|
15368
15428
|
color: rgb(161, 98, 7);
|
|
15369
15429
|
& svg {
|
|
15370
15430
|
color: rgb(250, 204, 21);
|
|
15371
15431
|
}
|
|
15372
|
-
` :
|
|
15432
|
+
` : css101`
|
|
15373
15433
|
color: rgb(185, 28, 28);
|
|
15374
15434
|
& svg {
|
|
15375
15435
|
color: var(--brand-primary-2);
|
|
@@ -15377,38 +15437,38 @@ var ProgressListItem = ({
|
|
|
15377
15437
|
`;
|
|
15378
15438
|
}
|
|
15379
15439
|
const colorPerStatus = {
|
|
15380
|
-
completed:
|
|
15440
|
+
completed: css101`
|
|
15381
15441
|
opacity: 0.75;
|
|
15382
15442
|
`,
|
|
15383
|
-
inProgress:
|
|
15443
|
+
inProgress: css101`
|
|
15384
15444
|
-webkit-text-stroke-width: thin;
|
|
15385
15445
|
`,
|
|
15386
|
-
queued:
|
|
15446
|
+
queued: css101`
|
|
15387
15447
|
opacity: 0.5;
|
|
15388
15448
|
`
|
|
15389
15449
|
};
|
|
15390
15450
|
return colorPerStatus[status];
|
|
15391
15451
|
}, [status, error, errorLevel]);
|
|
15392
|
-
return /* @__PURE__ */
|
|
15393
|
-
/* @__PURE__ */
|
|
15394
|
-
/* @__PURE__ */
|
|
15452
|
+
return /* @__PURE__ */ jsxs91("li", { css: [progressListItemStyles, statusStyles], children: [
|
|
15453
|
+
/* @__PURE__ */ jsx135(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx135("div", { children: /* @__PURE__ */ jsx135(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
|
|
15454
|
+
/* @__PURE__ */ jsxs91("div", { children: [
|
|
15395
15455
|
children,
|
|
15396
|
-
/* @__PURE__ */
|
|
15456
|
+
/* @__PURE__ */ jsx135("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
|
|
15397
15457
|
] })
|
|
15398
15458
|
] });
|
|
15399
15459
|
};
|
|
15400
15460
|
|
|
15401
15461
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
15402
|
-
import { css as
|
|
15462
|
+
import { css as css103 } from "@emotion/react";
|
|
15403
15463
|
import { CgCheck as CgCheck5 } from "@react-icons/all-files/cg/CgCheck";
|
|
15404
15464
|
import { useCallback as useCallback12, useEffect as useEffect24, useMemo as useMemo9, useRef as useRef12, useState as useState21 } from "react";
|
|
15405
15465
|
|
|
15406
15466
|
// src/components/SegmentedControl/SegmentedControl.styles.ts
|
|
15407
|
-
import { css as
|
|
15408
|
-
var segmentedControlRootStyles =
|
|
15467
|
+
import { css as css102 } from "@emotion/react";
|
|
15468
|
+
var segmentedControlRootStyles = css102`
|
|
15409
15469
|
position: relative;
|
|
15410
15470
|
`;
|
|
15411
|
-
var segmentedControlScrollIndicatorsStyles =
|
|
15471
|
+
var segmentedControlScrollIndicatorsStyles = css102`
|
|
15412
15472
|
position: absolute;
|
|
15413
15473
|
inset: 0;
|
|
15414
15474
|
z-index: 1;
|
|
@@ -15436,17 +15496,17 @@ var segmentedControlScrollIndicatorsStyles = css100`
|
|
|
15436
15496
|
background: linear-gradient(to left, var(--background-color) 10%, transparent);
|
|
15437
15497
|
}
|
|
15438
15498
|
`;
|
|
15439
|
-
var segmentedControlScrollIndicatorStartVisibleStyles =
|
|
15499
|
+
var segmentedControlScrollIndicatorStartVisibleStyles = css102`
|
|
15440
15500
|
&::before {
|
|
15441
15501
|
opacity: 1;
|
|
15442
15502
|
}
|
|
15443
15503
|
`;
|
|
15444
|
-
var segmentedControlScrollIndicatorEndVisibleStyles =
|
|
15504
|
+
var segmentedControlScrollIndicatorEndVisibleStyles = css102`
|
|
15445
15505
|
&::after {
|
|
15446
15506
|
opacity: 1;
|
|
15447
15507
|
}
|
|
15448
15508
|
`;
|
|
15449
|
-
var segmentedControlWrapperStyles =
|
|
15509
|
+
var segmentedControlWrapperStyles = css102`
|
|
15450
15510
|
overflow-y: auto;
|
|
15451
15511
|
scroll-behavior: smooth;
|
|
15452
15512
|
scrollbar-width: none;
|
|
@@ -15455,7 +15515,7 @@ var segmentedControlWrapperStyles = css100`
|
|
|
15455
15515
|
height: 0px;
|
|
15456
15516
|
}
|
|
15457
15517
|
`;
|
|
15458
|
-
var segmentedControlStyles =
|
|
15518
|
+
var segmentedControlStyles = css102`
|
|
15459
15519
|
--segmented-control-rounded-value: var(--rounded-base);
|
|
15460
15520
|
--segmented-control-border-width: 1px;
|
|
15461
15521
|
--segmented-control-selected-color: var(--brand-secondary-3);
|
|
@@ -15474,14 +15534,14 @@ var segmentedControlStyles = css100`
|
|
|
15474
15534
|
border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
|
|
15475
15535
|
font-size: var(--fs-xs);
|
|
15476
15536
|
`;
|
|
15477
|
-
var segmentedControlVerticalStyles =
|
|
15537
|
+
var segmentedControlVerticalStyles = css102`
|
|
15478
15538
|
flex-direction: column;
|
|
15479
15539
|
--segmented-control-first-border-radius: var(--segmented-control-rounded-value)
|
|
15480
15540
|
var(--segmented-control-rounded-value) 0 0;
|
|
15481
15541
|
--segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
|
|
15482
15542
|
var(--segmented-control-rounded-value);
|
|
15483
15543
|
`;
|
|
15484
|
-
var segmentedControlItemStyles =
|
|
15544
|
+
var segmentedControlItemStyles = css102`
|
|
15485
15545
|
&:first-of-type label {
|
|
15486
15546
|
border-radius: var(--segmented-control-first-border-radius);
|
|
15487
15547
|
}
|
|
@@ -15489,10 +15549,10 @@ var segmentedControlItemStyles = css100`
|
|
|
15489
15549
|
border-radius: var(--segmented-control-last-border-radius);
|
|
15490
15550
|
}
|
|
15491
15551
|
`;
|
|
15492
|
-
var segmentedControlInputStyles =
|
|
15552
|
+
var segmentedControlInputStyles = css102`
|
|
15493
15553
|
${accessibleHidden}
|
|
15494
15554
|
`;
|
|
15495
|
-
var segmentedControlLabelStyles = (checked, disabled2) =>
|
|
15555
|
+
var segmentedControlLabelStyles = (checked, disabled2) => css102`
|
|
15496
15556
|
position: relative;
|
|
15497
15557
|
display: flex;
|
|
15498
15558
|
align-items: center;
|
|
@@ -15556,25 +15616,25 @@ var segmentedControlLabelStyles = (checked, disabled2) => css100`
|
|
|
15556
15616
|
`}
|
|
15557
15617
|
}
|
|
15558
15618
|
`;
|
|
15559
|
-
var segmentedControlLabelIconOnlyStyles =
|
|
15619
|
+
var segmentedControlLabelIconOnlyStyles = css102`
|
|
15560
15620
|
padding-inline: 0.5em;
|
|
15561
15621
|
`;
|
|
15562
|
-
var segmentedControlLabelCheckStyles =
|
|
15622
|
+
var segmentedControlLabelCheckStyles = css102`
|
|
15563
15623
|
opacity: 0.5;
|
|
15564
15624
|
`;
|
|
15565
|
-
var segmentedControlLabelContentStyles =
|
|
15625
|
+
var segmentedControlLabelContentStyles = css102`
|
|
15566
15626
|
display: flex;
|
|
15567
15627
|
align-items: center;
|
|
15568
15628
|
justify-content: center;
|
|
15569
15629
|
gap: var(--spacing-sm);
|
|
15570
15630
|
height: 100%;
|
|
15571
15631
|
`;
|
|
15572
|
-
var segmentedControlLabelTextStyles =
|
|
15632
|
+
var segmentedControlLabelTextStyles = css102`
|
|
15573
15633
|
white-space: nowrap;
|
|
15574
15634
|
`;
|
|
15575
15635
|
|
|
15576
15636
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
15577
|
-
import { jsx as
|
|
15637
|
+
import { jsx as jsx136, jsxs as jsxs92 } from "@emotion/react/jsx-runtime";
|
|
15578
15638
|
var SegmentedControl = ({
|
|
15579
15639
|
name,
|
|
15580
15640
|
options,
|
|
@@ -15602,10 +15662,10 @@ var SegmentedControl = ({
|
|
|
15602
15662
|
);
|
|
15603
15663
|
const sizeStyles = useMemo9(() => {
|
|
15604
15664
|
const map = {
|
|
15605
|
-
sm:
|
|
15606
|
-
md:
|
|
15607
|
-
lg:
|
|
15608
|
-
xl:
|
|
15665
|
+
sm: css103({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
|
|
15666
|
+
md: css103({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
|
|
15667
|
+
lg: css103({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
|
|
15668
|
+
xl: css103({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
|
|
15609
15669
|
};
|
|
15610
15670
|
return map[size];
|
|
15611
15671
|
}, [size]);
|
|
@@ -15633,8 +15693,8 @@ var SegmentedControl = ({
|
|
|
15633
15693
|
wrapperElement == null ? void 0 : wrapperElement.removeEventListener("scroll", onScroll);
|
|
15634
15694
|
};
|
|
15635
15695
|
}, []);
|
|
15636
|
-
return /* @__PURE__ */
|
|
15637
|
-
/* @__PURE__ */
|
|
15696
|
+
return /* @__PURE__ */ jsxs92("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
|
|
15697
|
+
/* @__PURE__ */ jsx136("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ jsx136(
|
|
15638
15698
|
"div",
|
|
15639
15699
|
{
|
|
15640
15700
|
css: [
|
|
@@ -15651,12 +15711,12 @@ var SegmentedControl = ({
|
|
|
15651
15711
|
const text = option.label ? option.label : option.icon ? null : String(option.value);
|
|
15652
15712
|
const isDisabled = disabled2 || option.disabled;
|
|
15653
15713
|
const isChecked = option.value === value;
|
|
15654
|
-
return /* @__PURE__ */
|
|
15714
|
+
return /* @__PURE__ */ jsx136(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx136(
|
|
15655
15715
|
"div",
|
|
15656
15716
|
{
|
|
15657
15717
|
css: segmentedControlItemStyles,
|
|
15658
15718
|
"data-testid": option["data-testid"] ? option["data-testid"] : "container-segmented-control",
|
|
15659
|
-
children: /* @__PURE__ */
|
|
15719
|
+
children: /* @__PURE__ */ jsxs92(
|
|
15660
15720
|
"label",
|
|
15661
15721
|
{
|
|
15662
15722
|
css: [
|
|
@@ -15665,7 +15725,7 @@ var SegmentedControl = ({
|
|
|
15665
15725
|
isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
|
|
15666
15726
|
],
|
|
15667
15727
|
children: [
|
|
15668
|
-
/* @__PURE__ */
|
|
15728
|
+
/* @__PURE__ */ jsx136(
|
|
15669
15729
|
"input",
|
|
15670
15730
|
{
|
|
15671
15731
|
css: segmentedControlInputStyles,
|
|
@@ -15677,10 +15737,10 @@ var SegmentedControl = ({
|
|
|
15677
15737
|
disabled: isDisabled
|
|
15678
15738
|
}
|
|
15679
15739
|
),
|
|
15680
|
-
option.value !== value || noCheckmark ? null : /* @__PURE__ */
|
|
15681
|
-
/* @__PURE__ */
|
|
15682
|
-
!option.icon ? null : /* @__PURE__ */
|
|
15683
|
-
!text || hideOptionText ? null : /* @__PURE__ */
|
|
15740
|
+
option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx136(CgCheck5, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
|
|
15741
|
+
/* @__PURE__ */ jsxs92("span", { css: segmentedControlLabelContentStyles, children: [
|
|
15742
|
+
!option.icon ? null : /* @__PURE__ */ jsx136(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
|
|
15743
|
+
!text || hideOptionText ? null : /* @__PURE__ */ jsx136("span", { css: segmentedControlLabelTextStyles, children: text })
|
|
15684
15744
|
] })
|
|
15685
15745
|
]
|
|
15686
15746
|
}
|
|
@@ -15690,7 +15750,7 @@ var SegmentedControl = ({
|
|
|
15690
15750
|
})
|
|
15691
15751
|
}
|
|
15692
15752
|
) }),
|
|
15693
|
-
/* @__PURE__ */
|
|
15753
|
+
/* @__PURE__ */ jsx136(
|
|
15694
15754
|
"div",
|
|
15695
15755
|
{
|
|
15696
15756
|
css: [
|
|
@@ -15704,18 +15764,18 @@ var SegmentedControl = ({
|
|
|
15704
15764
|
};
|
|
15705
15765
|
|
|
15706
15766
|
// src/components/Skeleton/Skeleton.styles.ts
|
|
15707
|
-
import { css as
|
|
15767
|
+
import { css as css104, keyframes as keyframes5 } from "@emotion/react";
|
|
15708
15768
|
var lightFadingOut = keyframes5`
|
|
15709
15769
|
from { opacity: 0.1; }
|
|
15710
15770
|
to { opacity: 0.025; }
|
|
15711
15771
|
`;
|
|
15712
|
-
var skeletonStyles =
|
|
15772
|
+
var skeletonStyles = css104`
|
|
15713
15773
|
animation: ${lightFadingOut} 1s ease-out infinite alternate;
|
|
15714
15774
|
background-color: var(--gray-900);
|
|
15715
15775
|
`;
|
|
15716
15776
|
|
|
15717
15777
|
// src/components/Skeleton/Skeleton.tsx
|
|
15718
|
-
import { jsx as
|
|
15778
|
+
import { jsx as jsx137 } from "@emotion/react/jsx-runtime";
|
|
15719
15779
|
var Skeleton = ({
|
|
15720
15780
|
width = "100%",
|
|
15721
15781
|
height = "1.25rem",
|
|
@@ -15723,7 +15783,7 @@ var Skeleton = ({
|
|
|
15723
15783
|
circle = false,
|
|
15724
15784
|
children,
|
|
15725
15785
|
...otherProps
|
|
15726
|
-
}) => /* @__PURE__ */
|
|
15786
|
+
}) => /* @__PURE__ */ jsx137(
|
|
15727
15787
|
"div",
|
|
15728
15788
|
{
|
|
15729
15789
|
css: [
|
|
@@ -15746,8 +15806,8 @@ var Skeleton = ({
|
|
|
15746
15806
|
import { useEffect as useEffect25, useRef as useRef13 } from "react";
|
|
15747
15807
|
|
|
15748
15808
|
// src/components/Spinner/Spinner.styles.ts
|
|
15749
|
-
import { css as
|
|
15750
|
-
var SpinnerStyles =
|
|
15809
|
+
import { css as css105 } from "@emotion/react";
|
|
15810
|
+
var SpinnerStyles = css105`
|
|
15751
15811
|
--color: #00b4ff;
|
|
15752
15812
|
--speed: 5s;
|
|
15753
15813
|
--red: rgb(218, 63, 50);
|
|
@@ -16177,7 +16237,7 @@ var SpinnerStyles = css103`
|
|
|
16177
16237
|
`;
|
|
16178
16238
|
|
|
16179
16239
|
// src/components/Spinner/Spinner.tsx
|
|
16180
|
-
import { jsx as
|
|
16240
|
+
import { jsx as jsx138, jsxs as jsxs93 } from "@emotion/react/jsx-runtime";
|
|
16181
16241
|
var Spinner = ({
|
|
16182
16242
|
width,
|
|
16183
16243
|
label,
|
|
@@ -16188,7 +16248,7 @@ var Spinner = ({
|
|
|
16188
16248
|
var _a, _b, _c;
|
|
16189
16249
|
(_c = ref.current) == null ? void 0 : _c.style.setProperty("--pyramid-size", ((_b = (_a = ref.current) == null ? void 0 : _a.clientWidth) != null ? _b : 200) / 6 + "px");
|
|
16190
16250
|
}, [width]);
|
|
16191
|
-
return /* @__PURE__ */
|
|
16251
|
+
return /* @__PURE__ */ jsxs93(
|
|
16192
16252
|
"div",
|
|
16193
16253
|
{
|
|
16194
16254
|
ref,
|
|
@@ -16200,51 +16260,51 @@ var Spinner = ({
|
|
|
16200
16260
|
css: SpinnerStyles,
|
|
16201
16261
|
className: `container${isPaused ? " paused" : ""}`,
|
|
16202
16262
|
children: [
|
|
16203
|
-
/* @__PURE__ */
|
|
16204
|
-
/* @__PURE__ */
|
|
16205
|
-
/* @__PURE__ */
|
|
16206
|
-
/* @__PURE__ */
|
|
16207
|
-
/* @__PURE__ */
|
|
16208
|
-
/* @__PURE__ */
|
|
16209
|
-
/* @__PURE__ */
|
|
16210
|
-
/* @__PURE__ */
|
|
16211
|
-
/* @__PURE__ */
|
|
16212
|
-
/* @__PURE__ */
|
|
16263
|
+
/* @__PURE__ */ jsx138("div", { className: "pyramid-container", children: /* @__PURE__ */ jsxs93("div", { className: "pyramid top", children: [
|
|
16264
|
+
/* @__PURE__ */ jsx138("div", { className: "side one" }),
|
|
16265
|
+
/* @__PURE__ */ jsx138("div", { className: "side two" }),
|
|
16266
|
+
/* @__PURE__ */ jsx138("div", { className: "side three" }),
|
|
16267
|
+
/* @__PURE__ */ jsx138("div", { className: "side four" }),
|
|
16268
|
+
/* @__PURE__ */ jsxs93("div", { className: "bottom-pyramid", children: [
|
|
16269
|
+
/* @__PURE__ */ jsx138("div", { className: "side five" }),
|
|
16270
|
+
/* @__PURE__ */ jsx138("div", { className: "side six" }),
|
|
16271
|
+
/* @__PURE__ */ jsx138("div", { className: "side seven" }),
|
|
16272
|
+
/* @__PURE__ */ jsx138("div", { className: "side eight" })
|
|
16213
16273
|
] })
|
|
16214
16274
|
] }) }),
|
|
16215
|
-
/* @__PURE__ */
|
|
16216
|
-
/* @__PURE__ */
|
|
16217
|
-
/* @__PURE__ */
|
|
16218
|
-
/* @__PURE__ */
|
|
16219
|
-
/* @__PURE__ */
|
|
16220
|
-
/* @__PURE__ */
|
|
16221
|
-
/* @__PURE__ */
|
|
16275
|
+
/* @__PURE__ */ jsx138("div", { className: "turning-circle" }),
|
|
16276
|
+
/* @__PURE__ */ jsxs93("div", { className: "pulsating-star delay-top-right", children: [
|
|
16277
|
+
/* @__PURE__ */ jsx138("div", { className: "star-inner star-center" }),
|
|
16278
|
+
/* @__PURE__ */ jsx138("div", { className: "star-inner star-top" }),
|
|
16279
|
+
/* @__PURE__ */ jsx138("div", { className: "star-inner star-bottom" }),
|
|
16280
|
+
/* @__PURE__ */ jsx138("div", { className: "star-inner star-left" }),
|
|
16281
|
+
/* @__PURE__ */ jsx138("div", { className: "star-inner star-right" })
|
|
16222
16282
|
] }),
|
|
16223
|
-
/* @__PURE__ */
|
|
16224
|
-
/* @__PURE__ */
|
|
16225
|
-
/* @__PURE__ */
|
|
16226
|
-
/* @__PURE__ */
|
|
16227
|
-
/* @__PURE__ */
|
|
16228
|
-
/* @__PURE__ */
|
|
16283
|
+
/* @__PURE__ */ jsxs93("div", { className: "pulsating-star delay-top-left-2", children: [
|
|
16284
|
+
/* @__PURE__ */ jsx138("div", { className: "star-inner star-center" }),
|
|
16285
|
+
/* @__PURE__ */ jsx138("div", { className: "star-inner star-top" }),
|
|
16286
|
+
/* @__PURE__ */ jsx138("div", { className: "star-inner star-bottom" }),
|
|
16287
|
+
/* @__PURE__ */ jsx138("div", { className: "star-inner star-left" }),
|
|
16288
|
+
/* @__PURE__ */ jsx138("div", { className: "star-inner star-right" })
|
|
16229
16289
|
] }),
|
|
16230
|
-
/* @__PURE__ */
|
|
16231
|
-
/* @__PURE__ */
|
|
16232
|
-
/* @__PURE__ */
|
|
16233
|
-
/* @__PURE__ */
|
|
16234
|
-
/* @__PURE__ */
|
|
16290
|
+
/* @__PURE__ */ jsxs93("div", { className: "pulsating-star delay-top-left", children: [
|
|
16291
|
+
/* @__PURE__ */ jsx138("div", { className: "star-inner star-top" }),
|
|
16292
|
+
/* @__PURE__ */ jsx138("div", { className: "star-inner star-bottom" }),
|
|
16293
|
+
/* @__PURE__ */ jsx138("div", { className: "star-inner star-left" }),
|
|
16294
|
+
/* @__PURE__ */ jsx138("div", { className: "star-inner star-right" })
|
|
16235
16295
|
] }),
|
|
16236
|
-
/* @__PURE__ */
|
|
16237
|
-
/* @__PURE__ */
|
|
16238
|
-
/* @__PURE__ */
|
|
16239
|
-
/* @__PURE__ */
|
|
16240
|
-
/* @__PURE__ */
|
|
16296
|
+
/* @__PURE__ */ jsxs93("div", { className: "pulsating-star delay-bottom-right", children: [
|
|
16297
|
+
/* @__PURE__ */ jsx138("div", { className: "star-inner star-top" }),
|
|
16298
|
+
/* @__PURE__ */ jsx138("div", { className: "star-inner star-bottom" }),
|
|
16299
|
+
/* @__PURE__ */ jsx138("div", { className: "star-inner star-left" }),
|
|
16300
|
+
/* @__PURE__ */ jsx138("div", { className: "star-inner star-right" })
|
|
16241
16301
|
] }),
|
|
16242
|
-
/* @__PURE__ */
|
|
16243
|
-
/* @__PURE__ */
|
|
16244
|
-
/* @__PURE__ */
|
|
16245
|
-
/* @__PURE__ */
|
|
16246
|
-
/* @__PURE__ */
|
|
16247
|
-
/* @__PURE__ */
|
|
16302
|
+
/* @__PURE__ */ jsxs93("div", { className: "pulsating-star delay-bottom-left", children: [
|
|
16303
|
+
/* @__PURE__ */ jsx138("div", { className: "star-inner star-center" }),
|
|
16304
|
+
/* @__PURE__ */ jsx138("div", { className: "star-inner star-top" }),
|
|
16305
|
+
/* @__PURE__ */ jsx138("div", { className: "star-inner star-bottom" }),
|
|
16306
|
+
/* @__PURE__ */ jsx138("div", { className: "star-inner star-left" }),
|
|
16307
|
+
/* @__PURE__ */ jsx138("div", { className: "star-inner star-right" })
|
|
16248
16308
|
] })
|
|
16249
16309
|
]
|
|
16250
16310
|
}
|
|
@@ -16255,8 +16315,8 @@ var Spinner = ({
|
|
|
16255
16315
|
import { forwardRef as forwardRef29 } from "react";
|
|
16256
16316
|
|
|
16257
16317
|
// src/components/Switch/Switch.styles.ts
|
|
16258
|
-
import { css as
|
|
16259
|
-
var SwitchInputContainer =
|
|
16318
|
+
import { css as css106 } from "@emotion/react";
|
|
16319
|
+
var SwitchInputContainer = css106`
|
|
16260
16320
|
cursor: pointer;
|
|
16261
16321
|
display: inline-block;
|
|
16262
16322
|
position: relative;
|
|
@@ -16266,7 +16326,7 @@ var SwitchInputContainer = css104`
|
|
|
16266
16326
|
user-select: none;
|
|
16267
16327
|
z-index: 0;
|
|
16268
16328
|
`;
|
|
16269
|
-
var SwitchInput = (size) =>
|
|
16329
|
+
var SwitchInput = (size) => css106`
|
|
16270
16330
|
appearance: none;
|
|
16271
16331
|
border-radius: var(--rounded-full);
|
|
16272
16332
|
background-color: var(--white);
|
|
@@ -16306,7 +16366,7 @@ var SwitchInput = (size) => css104`
|
|
|
16306
16366
|
cursor: not-allowed;
|
|
16307
16367
|
}
|
|
16308
16368
|
`;
|
|
16309
|
-
var SwitchInputDisabled =
|
|
16369
|
+
var SwitchInputDisabled = css106`
|
|
16310
16370
|
opacity: var(--opacity-50);
|
|
16311
16371
|
cursor: not-allowed;
|
|
16312
16372
|
|
|
@@ -16314,7 +16374,7 @@ var SwitchInputDisabled = css104`
|
|
|
16314
16374
|
cursor: not-allowed;
|
|
16315
16375
|
}
|
|
16316
16376
|
`;
|
|
16317
|
-
var SwitchInputLabel = (size) =>
|
|
16377
|
+
var SwitchInputLabel = (size) => css106`
|
|
16318
16378
|
align-items: center;
|
|
16319
16379
|
color: var(--typography-base);
|
|
16320
16380
|
display: inline-flex;
|
|
@@ -16336,40 +16396,40 @@ var SwitchInputLabel = (size) => css104`
|
|
|
16336
16396
|
top: 0;
|
|
16337
16397
|
}
|
|
16338
16398
|
`;
|
|
16339
|
-
var SwitchText = (size) =>
|
|
16399
|
+
var SwitchText = (size) => css106`
|
|
16340
16400
|
color: var(--gray-500);
|
|
16341
16401
|
font-size: var(--fs-sm);
|
|
16342
16402
|
padding-inline: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"} 0;
|
|
16343
16403
|
`;
|
|
16344
16404
|
|
|
16345
16405
|
// src/components/Switch/Switch.tsx
|
|
16346
|
-
import { Fragment as Fragment19, jsx as
|
|
16406
|
+
import { Fragment as Fragment19, jsx as jsx139, jsxs as jsxs94 } from "@emotion/react/jsx-runtime";
|
|
16347
16407
|
var Switch = forwardRef29(
|
|
16348
16408
|
({ label, infoText, toggleText, children, switchSize = "base", ...inputProps }, ref) => {
|
|
16349
16409
|
let additionalText = infoText;
|
|
16350
16410
|
if (infoText && toggleText) {
|
|
16351
16411
|
additionalText = inputProps.checked ? toggleText : infoText;
|
|
16352
16412
|
}
|
|
16353
|
-
return /* @__PURE__ */
|
|
16354
|
-
/* @__PURE__ */
|
|
16413
|
+
return /* @__PURE__ */ jsxs94(Fragment19, { children: [
|
|
16414
|
+
/* @__PURE__ */ jsxs94(
|
|
16355
16415
|
"label",
|
|
16356
16416
|
{
|
|
16357
16417
|
css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0],
|
|
16358
16418
|
children: [
|
|
16359
|
-
/* @__PURE__ */
|
|
16360
|
-
/* @__PURE__ */
|
|
16419
|
+
/* @__PURE__ */ jsx139("input", { type: "checkbox", css: SwitchInput(switchSize), ...inputProps, ref }),
|
|
16420
|
+
/* @__PURE__ */ jsx139("span", { css: SwitchInputLabel(switchSize), children: label })
|
|
16361
16421
|
]
|
|
16362
16422
|
}
|
|
16363
16423
|
),
|
|
16364
|
-
additionalText ? /* @__PURE__ */
|
|
16424
|
+
additionalText ? /* @__PURE__ */ jsx139("p", { css: SwitchText(switchSize), children: additionalText }) : null,
|
|
16365
16425
|
children
|
|
16366
16426
|
] });
|
|
16367
16427
|
}
|
|
16368
16428
|
);
|
|
16369
16429
|
|
|
16370
16430
|
// src/components/Table/Table.styles.ts
|
|
16371
|
-
import { css as
|
|
16372
|
-
var table = ({ cellPadding = "var(--spacing-sm)" }) =>
|
|
16431
|
+
import { css as css107 } from "@emotion/react";
|
|
16432
|
+
var table = ({ cellPadding = "var(--spacing-sm)" }) => css107`
|
|
16373
16433
|
border-bottom: 1px solid var(--gray-400);
|
|
16374
16434
|
border-collapse: collapse;
|
|
16375
16435
|
min-width: 100%;
|
|
@@ -16390,22 +16450,22 @@ var table = ({ cellPadding = "var(--spacing-sm)" }) => css105`
|
|
|
16390
16450
|
background-color: var(--gray-50);
|
|
16391
16451
|
}
|
|
16392
16452
|
`;
|
|
16393
|
-
var tableHead =
|
|
16453
|
+
var tableHead = css107`
|
|
16394
16454
|
color: var(--typography-base);
|
|
16395
16455
|
text-align: left;
|
|
16396
16456
|
`;
|
|
16397
|
-
var tableRow =
|
|
16457
|
+
var tableRow = css107`
|
|
16398
16458
|
border-bottom: 1px solid var(--gray-200);
|
|
16399
16459
|
vertical-align: top;
|
|
16400
16460
|
font-size: var(--fs-sm);
|
|
16401
16461
|
`;
|
|
16402
|
-
var tableCellHead =
|
|
16462
|
+
var tableCellHead = css107`
|
|
16403
16463
|
font-size: var(--fs-sm);
|
|
16404
16464
|
font-weight: var(--fw-regular);
|
|
16405
16465
|
line-height: 1.2;
|
|
16406
16466
|
}
|
|
16407
16467
|
`;
|
|
16408
|
-
var responsiveTableContainer =
|
|
16468
|
+
var responsiveTableContainer = css107`
|
|
16409
16469
|
max-width: calc(100vw - var(--spacing-md) * 2);
|
|
16410
16470
|
overflow-x: auto;
|
|
16411
16471
|
${scrollbarStyles}
|
|
@@ -16424,47 +16484,47 @@ var responsiveTableContainer = css105`
|
|
|
16424
16484
|
`;
|
|
16425
16485
|
|
|
16426
16486
|
// src/components/Table/ResponsiveTableContainer.tsx
|
|
16427
|
-
import { jsx as
|
|
16487
|
+
import { jsx as jsx140 } from "@emotion/react/jsx-runtime";
|
|
16428
16488
|
var ResponsiveTableContainer = ({ children }) => {
|
|
16429
|
-
return /* @__PURE__ */
|
|
16489
|
+
return /* @__PURE__ */ jsx140("div", { css: responsiveTableContainer, children });
|
|
16430
16490
|
};
|
|
16431
16491
|
|
|
16432
16492
|
// src/components/Table/Table.tsx
|
|
16433
16493
|
import * as React21 from "react";
|
|
16434
|
-
import { jsx as
|
|
16494
|
+
import { jsx as jsx141 } from "@emotion/react/jsx-runtime";
|
|
16435
16495
|
var Table = React21.forwardRef(
|
|
16436
16496
|
({ children, cellPadding, ...otherProps }, ref) => {
|
|
16437
|
-
return /* @__PURE__ */
|
|
16497
|
+
return /* @__PURE__ */ jsx141("table", { ref, css: table({ cellPadding }), ...otherProps, children });
|
|
16438
16498
|
}
|
|
16439
16499
|
);
|
|
16440
16500
|
var TableHead = React21.forwardRef(
|
|
16441
16501
|
({ children, ...otherProps }, ref) => {
|
|
16442
|
-
return /* @__PURE__ */
|
|
16502
|
+
return /* @__PURE__ */ jsx141("thead", { ref, css: tableHead, ...otherProps, children });
|
|
16443
16503
|
}
|
|
16444
16504
|
);
|
|
16445
16505
|
var TableBody = React21.forwardRef(
|
|
16446
16506
|
({ children, ...otherProps }, ref) => {
|
|
16447
|
-
return /* @__PURE__ */
|
|
16507
|
+
return /* @__PURE__ */ jsx141("tbody", { ref, ...otherProps, children });
|
|
16448
16508
|
}
|
|
16449
16509
|
);
|
|
16450
16510
|
var TableFoot = React21.forwardRef(
|
|
16451
16511
|
({ children, ...otherProps }, ref) => {
|
|
16452
|
-
return /* @__PURE__ */
|
|
16512
|
+
return /* @__PURE__ */ jsx141("tfoot", { ref, ...otherProps, children });
|
|
16453
16513
|
}
|
|
16454
16514
|
);
|
|
16455
16515
|
var TableRow = React21.forwardRef(
|
|
16456
16516
|
({ children, ...otherProps }, ref) => {
|
|
16457
|
-
return /* @__PURE__ */
|
|
16517
|
+
return /* @__PURE__ */ jsx141("tr", { ref, css: tableRow, ...otherProps, children });
|
|
16458
16518
|
}
|
|
16459
16519
|
);
|
|
16460
16520
|
var TableCellHead = React21.forwardRef(
|
|
16461
16521
|
({ children, ...otherProps }, ref) => {
|
|
16462
|
-
return /* @__PURE__ */
|
|
16522
|
+
return /* @__PURE__ */ jsx141("th", { ref, css: tableCellHead, ...otherProps, children });
|
|
16463
16523
|
}
|
|
16464
16524
|
);
|
|
16465
16525
|
var TableCellData = React21.forwardRef(
|
|
16466
16526
|
({ children, ...otherProps }, ref) => {
|
|
16467
|
-
return /* @__PURE__ */
|
|
16527
|
+
return /* @__PURE__ */ jsx141("td", { ref, ...otherProps, children });
|
|
16468
16528
|
}
|
|
16469
16529
|
);
|
|
16470
16530
|
|
|
@@ -16479,8 +16539,8 @@ import {
|
|
|
16479
16539
|
import { useCallback as useCallback13, useMemo as useMemo10 } from "react";
|
|
16480
16540
|
|
|
16481
16541
|
// src/components/Tabs/Tabs.styles.ts
|
|
16482
|
-
import { css as
|
|
16483
|
-
var tabButtonStyles =
|
|
16542
|
+
import { css as css108 } from "@emotion/react";
|
|
16543
|
+
var tabButtonStyles = css108`
|
|
16484
16544
|
align-items: center;
|
|
16485
16545
|
border: 0;
|
|
16486
16546
|
height: 2.5rem;
|
|
@@ -16497,14 +16557,14 @@ var tabButtonStyles = css106`
|
|
|
16497
16557
|
box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
|
|
16498
16558
|
}
|
|
16499
16559
|
`;
|
|
16500
|
-
var tabButtonGroupStyles =
|
|
16560
|
+
var tabButtonGroupStyles = css108`
|
|
16501
16561
|
display: flex;
|
|
16502
16562
|
gap: var(--spacing-base);
|
|
16503
16563
|
border-bottom: 1px solid var(--gray-300);
|
|
16504
16564
|
`;
|
|
16505
16565
|
|
|
16506
16566
|
// src/components/Tabs/Tabs.tsx
|
|
16507
|
-
import { jsx as
|
|
16567
|
+
import { jsx as jsx142 } from "@emotion/react/jsx-runtime";
|
|
16508
16568
|
var useCurrentTab = () => {
|
|
16509
16569
|
const context = useAriakitTabStore();
|
|
16510
16570
|
if (!context) {
|
|
@@ -16535,28 +16595,28 @@ var Tabs = ({
|
|
|
16535
16595
|
},
|
|
16536
16596
|
[onSelectedIdChange, useHashForState]
|
|
16537
16597
|
);
|
|
16538
|
-
return /* @__PURE__ */
|
|
16598
|
+
return /* @__PURE__ */ jsx142(AriakitTabProvider, { selectedId: selected, selectOnMove: !manual, setSelectedId: onTabSelect, ...props, children });
|
|
16539
16599
|
};
|
|
16540
16600
|
var TabButtonGroup = ({ children, ...props }) => {
|
|
16541
|
-
return /* @__PURE__ */
|
|
16601
|
+
return /* @__PURE__ */ jsx142(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
|
|
16542
16602
|
};
|
|
16543
16603
|
var TabButton = ({
|
|
16544
16604
|
children,
|
|
16545
16605
|
id,
|
|
16546
16606
|
...props
|
|
16547
16607
|
}) => {
|
|
16548
|
-
return /* @__PURE__ */
|
|
16608
|
+
return /* @__PURE__ */ jsx142(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
|
|
16549
16609
|
};
|
|
16550
16610
|
var TabContent = ({
|
|
16551
16611
|
children,
|
|
16552
16612
|
...props
|
|
16553
16613
|
}) => {
|
|
16554
|
-
return /* @__PURE__ */
|
|
16614
|
+
return /* @__PURE__ */ jsx142(AriakitTabPanel, { ...props, children });
|
|
16555
16615
|
};
|
|
16556
16616
|
|
|
16557
16617
|
// src/components/Validation/StatusBullet.styles.ts
|
|
16558
|
-
import { css as
|
|
16559
|
-
var StatusBulletContainer =
|
|
16618
|
+
import { css as css109 } from "@emotion/react";
|
|
16619
|
+
var StatusBulletContainer = css109`
|
|
16560
16620
|
align-items: center;
|
|
16561
16621
|
align-self: center;
|
|
16562
16622
|
color: var(--gray-500);
|
|
@@ -16572,33 +16632,33 @@ var StatusBulletContainer = css107`
|
|
|
16572
16632
|
display: block;
|
|
16573
16633
|
}
|
|
16574
16634
|
`;
|
|
16575
|
-
var StatusBulletBase =
|
|
16635
|
+
var StatusBulletBase = css109`
|
|
16576
16636
|
font-size: var(--fs-sm);
|
|
16577
16637
|
&:before {
|
|
16578
16638
|
width: var(--fs-xs);
|
|
16579
16639
|
height: var(--fs-xs);
|
|
16580
16640
|
}
|
|
16581
16641
|
`;
|
|
16582
|
-
var StatusBulletSmall =
|
|
16642
|
+
var StatusBulletSmall = css109`
|
|
16583
16643
|
font-size: var(--fs-xs);
|
|
16584
16644
|
&:before {
|
|
16585
16645
|
width: var(--fs-xxs);
|
|
16586
16646
|
height: var(--fs-xxs);
|
|
16587
16647
|
}
|
|
16588
16648
|
`;
|
|
16589
|
-
var StatusDraft =
|
|
16649
|
+
var StatusDraft = css109`
|
|
16590
16650
|
&:before {
|
|
16591
16651
|
background: var(--white);
|
|
16592
16652
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
16593
16653
|
}
|
|
16594
16654
|
`;
|
|
16595
|
-
var StatusModified =
|
|
16655
|
+
var StatusModified = css109`
|
|
16596
16656
|
&:before {
|
|
16597
16657
|
background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
|
|
16598
16658
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
16599
16659
|
}
|
|
16600
16660
|
`;
|
|
16601
|
-
var StatusError =
|
|
16661
|
+
var StatusError = css109`
|
|
16602
16662
|
color: var(--error);
|
|
16603
16663
|
&:before {
|
|
16604
16664
|
/* TODO: replace this with an svg icon */
|
|
@@ -16611,29 +16671,29 @@ var StatusError = css107`
|
|
|
16611
16671
|
);
|
|
16612
16672
|
}
|
|
16613
16673
|
`;
|
|
16614
|
-
var StatusPublished =
|
|
16674
|
+
var StatusPublished = css109`
|
|
16615
16675
|
&:before {
|
|
16616
16676
|
background: var(--accent-dark);
|
|
16617
16677
|
}
|
|
16618
16678
|
`;
|
|
16619
|
-
var StatusOrphan =
|
|
16679
|
+
var StatusOrphan = css109`
|
|
16620
16680
|
&:before {
|
|
16621
16681
|
background: var(--brand-secondary-5);
|
|
16622
16682
|
}
|
|
16623
16683
|
`;
|
|
16624
|
-
var StatusUnknown =
|
|
16684
|
+
var StatusUnknown = css109`
|
|
16625
16685
|
&:before {
|
|
16626
16686
|
background: var(--gray-800);
|
|
16627
16687
|
}
|
|
16628
16688
|
`;
|
|
16629
|
-
var StatusDeleted =
|
|
16689
|
+
var StatusDeleted = css109`
|
|
16630
16690
|
&:before {
|
|
16631
16691
|
background: var(--error);
|
|
16632
16692
|
}
|
|
16633
16693
|
`;
|
|
16634
16694
|
|
|
16635
16695
|
// src/components/Validation/StatusBullet.tsx
|
|
16636
|
-
import { jsx as
|
|
16696
|
+
import { jsx as jsx143 } from "@emotion/react/jsx-runtime";
|
|
16637
16697
|
var StatusBullet = ({
|
|
16638
16698
|
status,
|
|
16639
16699
|
hideText = false,
|
|
@@ -16654,7 +16714,7 @@ var StatusBullet = ({
|
|
|
16654
16714
|
Deleted: StatusDeleted
|
|
16655
16715
|
};
|
|
16656
16716
|
const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
|
|
16657
|
-
const StatusComponent = () => /* @__PURE__ */
|
|
16717
|
+
const StatusComponent = () => /* @__PURE__ */ jsx143(
|
|
16658
16718
|
"span",
|
|
16659
16719
|
{
|
|
16660
16720
|
role: "status",
|
|
@@ -16664,9 +16724,9 @@ var StatusBullet = ({
|
|
|
16664
16724
|
}
|
|
16665
16725
|
);
|
|
16666
16726
|
if (compact) {
|
|
16667
|
-
return /* @__PURE__ */
|
|
16727
|
+
return /* @__PURE__ */ jsx143(StatusComponent, {});
|
|
16668
16728
|
}
|
|
16669
|
-
return /* @__PURE__ */
|
|
16729
|
+
return /* @__PURE__ */ jsx143(Tooltip, { title: message != null ? message : status, children: /* @__PURE__ */ jsx143("div", { children: /* @__PURE__ */ jsx143(StatusComponent, {}) }) });
|
|
16670
16730
|
};
|
|
16671
16731
|
export {
|
|
16672
16732
|
AddButton,
|
|
@@ -16708,6 +16768,8 @@ export {
|
|
|
16708
16768
|
ErrorMessage,
|
|
16709
16769
|
FieldMessage,
|
|
16710
16770
|
Fieldset,
|
|
16771
|
+
FlexiCard,
|
|
16772
|
+
FlexiCardTitle,
|
|
16711
16773
|
Heading2 as Heading,
|
|
16712
16774
|
HexModalBackground,
|
|
16713
16775
|
HorizontalRhythm,
|