@uniformdev/design-system 19.161.0 → 19.161.2-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +681 -382
- package/dist/index.d.mts +66 -1
- package/dist/index.d.ts +66 -1
- package/dist/index.js +719 -398
- package/package.json +4 -4
package/dist/esm/index.js
CHANGED
|
@@ -18129,39 +18129,323 @@ var ModalDialog = forwardRef15(
|
|
|
18129
18129
|
);
|
|
18130
18130
|
ModalDialog.displayName = "ModalDialog";
|
|
18131
18131
|
|
|
18132
|
+
// src/components/Objects/styles/ObjectGridContainer.styles.ts
|
|
18133
|
+
import { css as css78 } from "@emotion/react";
|
|
18134
|
+
var ObjectGridContainer = (gridCount) => css78`
|
|
18135
|
+
display: grid;
|
|
18136
|
+
grid-template-columns: repeat(${gridCount}, minmax(250px, 1fr));
|
|
18137
|
+
gap: var(--spacing-base);
|
|
18138
|
+
`;
|
|
18139
|
+
|
|
18140
|
+
// src/components/Objects/ObjectGridContainer.tsx
|
|
18141
|
+
import { jsx as jsx101 } from "@emotion/react/jsx-runtime";
|
|
18142
|
+
var ObjectGridContainer2 = ({ gridCount = 3, children }) => {
|
|
18143
|
+
return /* @__PURE__ */ jsx101("div", { "data-testid": "object-grid-container", css: ObjectGridContainer(gridCount), children });
|
|
18144
|
+
};
|
|
18145
|
+
|
|
18146
|
+
// src/components/Objects/styles/ObjectGridItem.styles.ts
|
|
18147
|
+
import { css as css79 } from "@emotion/react";
|
|
18148
|
+
var ObjectGridItem = css79`
|
|
18149
|
+
border: 1px solid var(--gray-300);
|
|
18150
|
+
border-radius: var(--rounded-base);
|
|
18151
|
+
background: var(--white);
|
|
18152
|
+
display: flex;
|
|
18153
|
+
flex-direction: column;
|
|
18154
|
+
transition: border-color var(--duration-fast) var(--timing-ease-out);
|
|
18155
|
+
|
|
18156
|
+
&[aria-selected='true'] {
|
|
18157
|
+
border: 1px solid var(--accent-dark);
|
|
18158
|
+
}
|
|
18159
|
+
|
|
18160
|
+
&[aria-selected='false'] {
|
|
18161
|
+
&:hover {
|
|
18162
|
+
border: 1px solid var(--accent-dark);
|
|
18163
|
+
}
|
|
18164
|
+
}
|
|
18165
|
+
`;
|
|
18166
|
+
var ObjectGridItemMediaWrapper = css79`
|
|
18167
|
+
display: flex;
|
|
18168
|
+
flex: 1 1 0;
|
|
18169
|
+
position: relative;
|
|
18170
|
+
`;
|
|
18171
|
+
var ObjectGridItemContentWrapper = css79`
|
|
18172
|
+
padding: 0 var(--spacing-sm) var(--spacing-sm);
|
|
18173
|
+
min-height: 52px;
|
|
18174
|
+
`;
|
|
18175
|
+
var ObjectGridItemImage = css79`
|
|
18176
|
+
object-fit: cover;
|
|
18177
|
+
width: 100%;
|
|
18178
|
+
height: auto;
|
|
18179
|
+
`;
|
|
18180
|
+
var MenuBtn = css79`
|
|
18181
|
+
border: none;
|
|
18182
|
+
background: transparent;
|
|
18183
|
+
padding: var(--spacing-xs);
|
|
18184
|
+
color: var(--gray-300);
|
|
18185
|
+
transition: color var(--duration-fast) var(--timing-ease-out);
|
|
18186
|
+
|
|
18187
|
+
&:focus,
|
|
18188
|
+
&:hover {
|
|
18189
|
+
outline: none;
|
|
18190
|
+
color: var(--gray-500);
|
|
18191
|
+
}
|
|
18192
|
+
`;
|
|
18193
|
+
|
|
18194
|
+
// src/components/Objects/ObjectGridItem.tsx
|
|
18195
|
+
import { jsx as jsx102, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
|
|
18196
|
+
var ObjectGridItem2 = ({
|
|
18197
|
+
header: header2,
|
|
18198
|
+
cover,
|
|
18199
|
+
rightSlot,
|
|
18200
|
+
menuItems,
|
|
18201
|
+
isSelected,
|
|
18202
|
+
children
|
|
18203
|
+
}) => {
|
|
18204
|
+
return /* @__PURE__ */ jsxs68("div", { css: ObjectGridItem, "aria-selected": isSelected, children: [
|
|
18205
|
+
/* @__PURE__ */ jsx102("div", { css: ObjectGridItemMediaWrapper, children: cover }),
|
|
18206
|
+
/* @__PURE__ */ jsxs68(HorizontalRhythm, { css: ObjectGridItemContentWrapper, justify: "space-between", gap: "sm", children: [
|
|
18207
|
+
/* @__PURE__ */ jsxs68(VerticalRhythm, { gap: "0", children: [
|
|
18208
|
+
/* @__PURE__ */ jsx102(HorizontalRhythm, { gap: "xs", align: "center", children: header2 }),
|
|
18209
|
+
children
|
|
18210
|
+
] }),
|
|
18211
|
+
/* @__PURE__ */ jsxs68(HorizontalRhythm, { gap: "xs", align: "flex-start", children: [
|
|
18212
|
+
rightSlot,
|
|
18213
|
+
menuItems ? /* @__PURE__ */ jsx102(
|
|
18214
|
+
Menu,
|
|
18215
|
+
{
|
|
18216
|
+
menuTrigger: (
|
|
18217
|
+
// TODO: once insights lands we should be able to replace this with MenuTrigger component
|
|
18218
|
+
/* @__PURE__ */ jsx102(
|
|
18219
|
+
"button",
|
|
18220
|
+
{
|
|
18221
|
+
type: "button",
|
|
18222
|
+
"data-testid": "object-grid-item-menu-btn",
|
|
18223
|
+
title: "menu options",
|
|
18224
|
+
css: MenuBtn,
|
|
18225
|
+
children: /* @__PURE__ */ jsx102(Icon, { icon: "more-alt", size: "1rem", iconColor: "currentColor" })
|
|
18226
|
+
}
|
|
18227
|
+
)
|
|
18228
|
+
),
|
|
18229
|
+
placement: "bottom-end",
|
|
18230
|
+
children: menuItems
|
|
18231
|
+
}
|
|
18232
|
+
) : null
|
|
18233
|
+
] })
|
|
18234
|
+
] })
|
|
18235
|
+
] });
|
|
18236
|
+
};
|
|
18237
|
+
|
|
18238
|
+
// src/components/Objects/styles/ObjectGridItemCardCover.styles.ts
|
|
18239
|
+
import { css as css80 } from "@emotion/react";
|
|
18240
|
+
var CoverImage = css80`
|
|
18241
|
+
aspect-ratio: 16/9;
|
|
18242
|
+
max-width: 100%;
|
|
18243
|
+
max-height: 100%;
|
|
18244
|
+
height: auto;
|
|
18245
|
+
padding: var(--spacing-sm);
|
|
18246
|
+
`;
|
|
18247
|
+
var CoverIconWrapper = css80`
|
|
18248
|
+
position: relative;
|
|
18249
|
+
display: flex;
|
|
18250
|
+
align-items: center;
|
|
18251
|
+
justify-content: center;
|
|
18252
|
+
flex: 1;
|
|
18253
|
+
overflow: hidden;
|
|
18254
|
+
`;
|
|
18255
|
+
var CoverIconGhost = css80`
|
|
18256
|
+
position: absolute;
|
|
18257
|
+
width: 60%;
|
|
18258
|
+
height: auto;
|
|
18259
|
+
aspect-ratio: 1;
|
|
18260
|
+
opacity: 0.05;
|
|
18261
|
+
transform: rotateZ(-15deg) translate(35%, 30%);
|
|
18262
|
+
`;
|
|
18263
|
+
var CoverSlot = css80`
|
|
18264
|
+
align-items: center;
|
|
18265
|
+
background: var(--white);
|
|
18266
|
+
display: flex;
|
|
18267
|
+
justify-content: center;
|
|
18268
|
+
position: absolute;
|
|
18269
|
+
top: var(--spacing-sm);
|
|
18270
|
+
z-index: 1;
|
|
18271
|
+
width: 24px;
|
|
18272
|
+
height: 24px;
|
|
18273
|
+
`;
|
|
18274
|
+
var CoverSlotLeft = css80`
|
|
18275
|
+
border-bottom-right-radius: var(--rounded-base);
|
|
18276
|
+
left: var(--spacing-sm);
|
|
18277
|
+
`;
|
|
18278
|
+
var CoverSlotRight = css80`
|
|
18279
|
+
border-bottom-left-radius: var(--rounded-base);
|
|
18280
|
+
right: var(--spacing-sm);
|
|
18281
|
+
`;
|
|
18282
|
+
var CoverButton = css80`
|
|
18283
|
+
align-items: stretch;
|
|
18284
|
+
border: none;
|
|
18285
|
+
background: none;
|
|
18286
|
+
display: flex;
|
|
18287
|
+
flex: 1 1 0;
|
|
18288
|
+
padding: 0;
|
|
18289
|
+
|
|
18290
|
+
&:focus,
|
|
18291
|
+
&:hover {
|
|
18292
|
+
outline: none;
|
|
18293
|
+
}
|
|
18294
|
+
`;
|
|
18295
|
+
var CoverSelectedChip = css80`
|
|
18296
|
+
animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
|
|
18297
|
+
opacity: 0;
|
|
18298
|
+
position: absolute;
|
|
18299
|
+
bottom: var(--spacing-base);
|
|
18300
|
+
right: var(--spacing-base);
|
|
18301
|
+
`;
|
|
18302
|
+
|
|
18303
|
+
// src/components/Objects/ObjectGridItemCardCover.tsx
|
|
18304
|
+
import { Fragment as Fragment14, jsx as jsx103, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
|
|
18305
|
+
var ObjectGridItemCardCover = (props) => {
|
|
18306
|
+
if ("imageUrl" in props && props.imageUrl) {
|
|
18307
|
+
const { imageUrl } = props;
|
|
18308
|
+
return /* @__PURE__ */ jsx103(
|
|
18309
|
+
"img",
|
|
18310
|
+
{
|
|
18311
|
+
src: imageUrl,
|
|
18312
|
+
css: CoverImage,
|
|
18313
|
+
loading: "lazy",
|
|
18314
|
+
role: "presentation",
|
|
18315
|
+
"data-testid": "object-grid-item-thumbnail"
|
|
18316
|
+
}
|
|
18317
|
+
);
|
|
18318
|
+
}
|
|
18319
|
+
if ("icon" in props && props.icon) {
|
|
18320
|
+
const { icon } = props;
|
|
18321
|
+
return /* @__PURE__ */ jsxs69("div", { css: CoverIconWrapper, "data-testid": "object-grid-item-thumbnail", children: [
|
|
18322
|
+
/* @__PURE__ */ jsx103(Icon, { icon, iconColor: "currentColor", css: CoverIconGhost }),
|
|
18323
|
+
/* @__PURE__ */ jsx103(Icon, { icon, iconColor: "currentColor", size: 48 })
|
|
18324
|
+
] });
|
|
18325
|
+
}
|
|
18326
|
+
};
|
|
18327
|
+
var ObjectGridItemCover = ({
|
|
18328
|
+
coverSlotLeft,
|
|
18329
|
+
coverSlotRight,
|
|
18330
|
+
...props
|
|
18331
|
+
}) => {
|
|
18332
|
+
return /* @__PURE__ */ jsxs69(Fragment14, { children: [
|
|
18333
|
+
coverSlotLeft ? /* @__PURE__ */ jsx103("div", { css: [CoverSlot, CoverSlotLeft], children: coverSlotLeft }) : null,
|
|
18334
|
+
/* @__PURE__ */ jsx103(ObjectGridItemCardCover, { ...props }),
|
|
18335
|
+
coverSlotRight ? /* @__PURE__ */ jsx103("div", { css: [CoverSlot, CoverSlotRight], children: coverSlotRight }) : null
|
|
18336
|
+
] });
|
|
18337
|
+
};
|
|
18338
|
+
var ObjectGridItemCoverButton = ({
|
|
18339
|
+
id,
|
|
18340
|
+
isSelected,
|
|
18341
|
+
onSelection,
|
|
18342
|
+
coverSlotLeft,
|
|
18343
|
+
coverSlotRight,
|
|
18344
|
+
selectedText = "selected",
|
|
18345
|
+
...props
|
|
18346
|
+
}) => {
|
|
18347
|
+
return /* @__PURE__ */ jsxs69("button", { type: "button", css: CoverButton, onClick: () => onSelection(id), "aria-selected": isSelected, children: [
|
|
18348
|
+
coverSlotLeft ? /* @__PURE__ */ jsx103("div", { css: [CoverSlot, CoverSlotLeft], children: coverSlotLeft }) : null,
|
|
18349
|
+
/* @__PURE__ */ jsx103(ObjectGridItemCardCover, { ...props }),
|
|
18350
|
+
coverSlotRight ? /* @__PURE__ */ jsx103("div", { css: [CoverSlot, CoverSlotRight], children: coverSlotRight }) : null,
|
|
18351
|
+
isSelected ? /* @__PURE__ */ jsx103("div", { css: CoverSelectedChip, children: /* @__PURE__ */ jsx103(Chip, { text: selectedText, size: "xs", theme: "accent-dark" }) }) : null
|
|
18352
|
+
] });
|
|
18353
|
+
};
|
|
18354
|
+
|
|
18355
|
+
// src/components/Objects/ObjectGridItemHeading.tsx
|
|
18356
|
+
import { useEffect as useEffect14, useRef as useRef8, useState as useState12 } from "react";
|
|
18357
|
+
|
|
18358
|
+
// src/components/Objects/styles/ObjectGridItemHeading.styles.ts
|
|
18359
|
+
import { css as css81 } from "@emotion/react";
|
|
18360
|
+
var ObjectGridItemHeading = css81`
|
|
18361
|
+
overflow: hidden;
|
|
18362
|
+
text-overflow: ellipsis;
|
|
18363
|
+
white-space: initial;
|
|
18364
|
+
display: -webkit-box;
|
|
18365
|
+
-webkit-line-clamp: 1;
|
|
18366
|
+
-webkit-box-orient: vertical;
|
|
18367
|
+
`;
|
|
18368
|
+
var PopoverContent = css81`
|
|
18369
|
+
min-width: 50px;
|
|
18370
|
+
`;
|
|
18371
|
+
|
|
18372
|
+
// src/components/Objects/ObjectGridItemHeading.tsx
|
|
18373
|
+
import { jsx as jsx104, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
|
|
18374
|
+
var ObjectGridItemHeading2 = ({
|
|
18375
|
+
heading,
|
|
18376
|
+
beforeHeadingSlot,
|
|
18377
|
+
afterHeadingSlot
|
|
18378
|
+
}) => {
|
|
18379
|
+
const [hasTruncation, setHasTruncation] = useState12(false);
|
|
18380
|
+
const headingRef = useRef8(null);
|
|
18381
|
+
useEffect14(() => {
|
|
18382
|
+
const currentHeading = headingRef.current;
|
|
18383
|
+
const observer = new ResizeObserver((entries) => {
|
|
18384
|
+
for (const entry of entries) {
|
|
18385
|
+
const isHeadingTruncated = entry.target.scrollHeight > entry.target.clientHeight;
|
|
18386
|
+
setHasTruncation(isHeadingTruncated);
|
|
18387
|
+
}
|
|
18388
|
+
});
|
|
18389
|
+
if (currentHeading) {
|
|
18390
|
+
observer.observe(currentHeading);
|
|
18391
|
+
}
|
|
18392
|
+
return () => {
|
|
18393
|
+
if (currentHeading) {
|
|
18394
|
+
observer.unobserve(currentHeading);
|
|
18395
|
+
}
|
|
18396
|
+
};
|
|
18397
|
+
}, []);
|
|
18398
|
+
return /* @__PURE__ */ jsxs70(HorizontalRhythm, { align: "center", gap: "xs", children: [
|
|
18399
|
+
beforeHeadingSlot,
|
|
18400
|
+
/* @__PURE__ */ jsx104(Tooltip, { title: hasTruncation ? heading : "", children: /* @__PURE__ */ jsx104("div", { role: "heading", css: ObjectGridItemHeading, ref: headingRef, children: heading }) }),
|
|
18401
|
+
afterHeadingSlot
|
|
18402
|
+
] });
|
|
18403
|
+
};
|
|
18404
|
+
|
|
18405
|
+
// src/components/Objects/ObjectGridItemIconWithTooltip.tsx
|
|
18406
|
+
import { jsx as jsx105 } from "@emotion/react/jsx-runtime";
|
|
18407
|
+
var ObjectGridItemIconWithTooltip = ({
|
|
18408
|
+
tooltipTitle,
|
|
18409
|
+
placement = "bottom-start",
|
|
18410
|
+
icon,
|
|
18411
|
+
iconColor = "accent-dark"
|
|
18412
|
+
}) => {
|
|
18413
|
+
return /* @__PURE__ */ jsx105(Tooltip, { title: tooltipTitle, placement, children: /* @__PURE__ */ jsx105("span", { children: /* @__PURE__ */ jsx105(Icon, { icon, iconColor, size: "1rem" }) }) });
|
|
18414
|
+
};
|
|
18415
|
+
|
|
18132
18416
|
// src/components/Pagination/Pagination.tsx
|
|
18133
18417
|
import Paginate from "react-paginate";
|
|
18134
18418
|
|
|
18135
18419
|
// src/components/Pagination/Pagniation.styles.ts
|
|
18136
|
-
import { css as
|
|
18137
|
-
var container2 =
|
|
18420
|
+
import { css as css82 } from "@emotion/css";
|
|
18421
|
+
var container2 = css82`
|
|
18138
18422
|
align-items: center;
|
|
18139
18423
|
display: flex;
|
|
18140
18424
|
`;
|
|
18141
|
-
var disabled =
|
|
18425
|
+
var disabled = css82`
|
|
18142
18426
|
opacity: var(--opacity-50);
|
|
18143
18427
|
`;
|
|
18144
|
-
var disabledLink =
|
|
18428
|
+
var disabledLink = css82`
|
|
18145
18429
|
cursor: pointer-default;
|
|
18146
18430
|
`;
|
|
18147
|
-
var pageLink =
|
|
18431
|
+
var pageLink = css82`
|
|
18148
18432
|
display: block;
|
|
18149
18433
|
padding: var(--spacing-sm) var(--spacing-base);
|
|
18150
18434
|
`;
|
|
18151
|
-
var prevNextControls =
|
|
18435
|
+
var prevNextControls = css82`
|
|
18152
18436
|
padding: var(--spacing-sm) var(--spacing-base);
|
|
18153
18437
|
`;
|
|
18154
|
-
var active =
|
|
18438
|
+
var active = css82`
|
|
18155
18439
|
border-radius: var(--rounded-base);
|
|
18156
18440
|
background: var(--gray-200);
|
|
18157
18441
|
`;
|
|
18158
|
-
var page =
|
|
18442
|
+
var page = css82`
|
|
18159
18443
|
margin-left: var(--spacing-xs);
|
|
18160
18444
|
margin-right: var(--spacing-xs);
|
|
18161
18445
|
`;
|
|
18162
18446
|
|
|
18163
18447
|
// src/components/Pagination/Pagination.tsx
|
|
18164
|
-
import { jsx as
|
|
18448
|
+
import { jsx as jsx106 } from "@emotion/react/jsx-runtime";
|
|
18165
18449
|
function Pagination({
|
|
18166
18450
|
limit,
|
|
18167
18451
|
offset,
|
|
@@ -18176,12 +18460,12 @@ function Pagination({
|
|
|
18176
18460
|
if (pageCount <= 1) {
|
|
18177
18461
|
return null;
|
|
18178
18462
|
}
|
|
18179
|
-
return /* @__PURE__ */
|
|
18463
|
+
return /* @__PURE__ */ jsx106(
|
|
18180
18464
|
Paginate,
|
|
18181
18465
|
{
|
|
18182
18466
|
forcePage: currentPage,
|
|
18183
|
-
previousLabel: /* @__PURE__ */
|
|
18184
|
-
nextLabel: /* @__PURE__ */
|
|
18467
|
+
previousLabel: /* @__PURE__ */ jsx106("div", { className: prevNextControls, children: "<" }),
|
|
18468
|
+
nextLabel: /* @__PURE__ */ jsx106("div", { className: prevNextControls, children: ">" }),
|
|
18185
18469
|
breakLabel: "...",
|
|
18186
18470
|
pageCount,
|
|
18187
18471
|
marginPagesDisplayed: 2,
|
|
@@ -18221,8 +18505,8 @@ var useParameterShell = () => {
|
|
|
18221
18505
|
};
|
|
18222
18506
|
|
|
18223
18507
|
// src/components/ParameterInputs/styles/LabelLeadingIcon.styles.ts
|
|
18224
|
-
import { css as
|
|
18225
|
-
var inputIconBtn =
|
|
18508
|
+
import { css as css83 } from "@emotion/react";
|
|
18509
|
+
var inputIconBtn = css83`
|
|
18226
18510
|
align-items: center;
|
|
18227
18511
|
border: none;
|
|
18228
18512
|
border-radius: var(--rounded-base);
|
|
@@ -18248,7 +18532,7 @@ var inputIconBtn = css79`
|
|
|
18248
18532
|
`;
|
|
18249
18533
|
|
|
18250
18534
|
// src/components/ParameterInputs/LabelLeadingIcon.tsx
|
|
18251
|
-
import { jsx as
|
|
18535
|
+
import { jsx as jsx107, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
|
|
18252
18536
|
var LabelLeadingIcon = ({
|
|
18253
18537
|
icon,
|
|
18254
18538
|
iconColor,
|
|
@@ -18260,7 +18544,7 @@ var LabelLeadingIcon = ({
|
|
|
18260
18544
|
...props
|
|
18261
18545
|
}) => {
|
|
18262
18546
|
const titleFr = title2 != null ? title2 : isLocked ? "Read-only pattern parameter" : isBound ? "Connected to external content. Click to edit" : "Click to connect to external content";
|
|
18263
|
-
return /* @__PURE__ */
|
|
18547
|
+
return /* @__PURE__ */ jsx107(Tooltip, { title: titleFr, children: /* @__PURE__ */ jsxs71(
|
|
18264
18548
|
"button",
|
|
18265
18549
|
{
|
|
18266
18550
|
css: inputIconBtn,
|
|
@@ -18270,7 +18554,7 @@ var LabelLeadingIcon = ({
|
|
|
18270
18554
|
...props,
|
|
18271
18555
|
"data-testid": "lock-button",
|
|
18272
18556
|
children: [
|
|
18273
|
-
/* @__PURE__ */
|
|
18557
|
+
/* @__PURE__ */ jsx107(
|
|
18274
18558
|
Icon,
|
|
18275
18559
|
{
|
|
18276
18560
|
icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
|
|
@@ -18286,8 +18570,8 @@ var LabelLeadingIcon = ({
|
|
|
18286
18570
|
var ConnectToDataElementButton = LabelLeadingIcon;
|
|
18287
18571
|
|
|
18288
18572
|
// src/components/ParameterInputs/styles/ParameterInput.styles.ts
|
|
18289
|
-
import { css as
|
|
18290
|
-
var inputContainer2 =
|
|
18573
|
+
import { css as css84 } from "@emotion/react";
|
|
18574
|
+
var inputContainer2 = css84`
|
|
18291
18575
|
position: relative;
|
|
18292
18576
|
scroll-margin: var(--spacing-2xl);
|
|
18293
18577
|
|
|
@@ -18300,14 +18584,14 @@ var inputContainer2 = css80`
|
|
|
18300
18584
|
}
|
|
18301
18585
|
}
|
|
18302
18586
|
`;
|
|
18303
|
-
var labelText2 =
|
|
18587
|
+
var labelText2 = css84`
|
|
18304
18588
|
align-items: center;
|
|
18305
18589
|
display: flex;
|
|
18306
18590
|
gap: var(--spacing-xs);
|
|
18307
18591
|
font-weight: var(--fw-regular);
|
|
18308
18592
|
margin: 0 0 var(--spacing-xs);
|
|
18309
18593
|
`;
|
|
18310
|
-
var input3 =
|
|
18594
|
+
var input3 = css84`
|
|
18311
18595
|
display: block;
|
|
18312
18596
|
appearance: none;
|
|
18313
18597
|
box-sizing: border-box;
|
|
@@ -18355,18 +18639,18 @@ var input3 = css80`
|
|
|
18355
18639
|
color: var(--gray-400);
|
|
18356
18640
|
}
|
|
18357
18641
|
`;
|
|
18358
|
-
var selectInput =
|
|
18642
|
+
var selectInput = css84`
|
|
18359
18643
|
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");
|
|
18360
18644
|
background-position: right var(--spacing-sm) center;
|
|
18361
18645
|
background-repeat: no-repeat;
|
|
18362
18646
|
background-size: 1rem;
|
|
18363
18647
|
padding-right: var(--spacing-xl);
|
|
18364
18648
|
`;
|
|
18365
|
-
var inputWrapper =
|
|
18649
|
+
var inputWrapper = css84`
|
|
18366
18650
|
display: flex; // used to correct overflow with chrome textarea
|
|
18367
18651
|
position: relative;
|
|
18368
18652
|
`;
|
|
18369
|
-
var inputIcon2 =
|
|
18653
|
+
var inputIcon2 = css84`
|
|
18370
18654
|
align-items: center;
|
|
18371
18655
|
background: var(--white);
|
|
18372
18656
|
border-radius: var(--rounded-md) 0 0 var(--rounded-md);
|
|
@@ -18382,7 +18666,7 @@ var inputIcon2 = css80`
|
|
|
18382
18666
|
width: var(--spacing-lg);
|
|
18383
18667
|
z-index: var(--z-10);
|
|
18384
18668
|
`;
|
|
18385
|
-
var inputToggleLabel2 =
|
|
18669
|
+
var inputToggleLabel2 = css84`
|
|
18386
18670
|
--inline-label-color: var(--typography-base);
|
|
18387
18671
|
align-items: center;
|
|
18388
18672
|
cursor: pointer;
|
|
@@ -18397,7 +18681,7 @@ var inputToggleLabel2 = css80`
|
|
|
18397
18681
|
--inline-label-color: var(--gray-400);
|
|
18398
18682
|
}
|
|
18399
18683
|
`;
|
|
18400
|
-
var toggleInput2 =
|
|
18684
|
+
var toggleInput2 = css84`
|
|
18401
18685
|
appearance: none;
|
|
18402
18686
|
border: 1px solid var(--gray-200);
|
|
18403
18687
|
background: var(--white);
|
|
@@ -18450,7 +18734,7 @@ var toggleInput2 = css80`
|
|
|
18450
18734
|
border-color: var(--gray-300);
|
|
18451
18735
|
}
|
|
18452
18736
|
`;
|
|
18453
|
-
var inlineLabel2 =
|
|
18737
|
+
var inlineLabel2 = css84`
|
|
18454
18738
|
color: var(--inline-label-color);
|
|
18455
18739
|
padding-left: var(--spacing-md);
|
|
18456
18740
|
font-size: var(--fs-sm);
|
|
@@ -18467,7 +18751,7 @@ var inlineLabel2 = css80`
|
|
|
18467
18751
|
}
|
|
18468
18752
|
}
|
|
18469
18753
|
`;
|
|
18470
|
-
var inputMenu =
|
|
18754
|
+
var inputMenu = css84`
|
|
18471
18755
|
background: none;
|
|
18472
18756
|
border: none;
|
|
18473
18757
|
padding: var(--spacing-2xs);
|
|
@@ -18475,10 +18759,10 @@ var inputMenu = css80`
|
|
|
18475
18759
|
top: calc(var(--spacing-md) * -1.2);
|
|
18476
18760
|
right: 0;
|
|
18477
18761
|
`;
|
|
18478
|
-
var inputActionItems =
|
|
18762
|
+
var inputActionItems = css84`
|
|
18479
18763
|
display: flex;
|
|
18480
18764
|
`;
|
|
18481
|
-
var inputMenuHover =
|
|
18765
|
+
var inputMenuHover = css84`
|
|
18482
18766
|
opacity: var(--opacity-50);
|
|
18483
18767
|
transition: background-color var(--duration-fast) var(--timing-ease-out);
|
|
18484
18768
|
|
|
@@ -18488,11 +18772,11 @@ var inputMenuHover = css80`
|
|
|
18488
18772
|
background-color: var(--gray-200);
|
|
18489
18773
|
}
|
|
18490
18774
|
`;
|
|
18491
|
-
var textarea2 =
|
|
18775
|
+
var textarea2 = css84`
|
|
18492
18776
|
resize: vertical;
|
|
18493
18777
|
min-height: 2rem;
|
|
18494
18778
|
`;
|
|
18495
|
-
var dataConnectButton =
|
|
18779
|
+
var dataConnectButton = css84`
|
|
18496
18780
|
align-items: center;
|
|
18497
18781
|
appearance: none;
|
|
18498
18782
|
box-sizing: border-box;
|
|
@@ -18527,7 +18811,7 @@ var dataConnectButton = css80`
|
|
|
18527
18811
|
pointer-events: none;
|
|
18528
18812
|
}
|
|
18529
18813
|
`;
|
|
18530
|
-
var linkParameterBtn =
|
|
18814
|
+
var linkParameterBtn = css84`
|
|
18531
18815
|
border-radius: var(--rounded-base);
|
|
18532
18816
|
background: transparent;
|
|
18533
18817
|
border: none;
|
|
@@ -18536,7 +18820,7 @@ var linkParameterBtn = css80`
|
|
|
18536
18820
|
font-size: var(--fs-sm);
|
|
18537
18821
|
line-height: 1;
|
|
18538
18822
|
`;
|
|
18539
|
-
var linkParameterControls =
|
|
18823
|
+
var linkParameterControls = css84`
|
|
18540
18824
|
position: absolute;
|
|
18541
18825
|
inset: 0 0 0 auto;
|
|
18542
18826
|
padding: 0 var(--spacing-base);
|
|
@@ -18545,7 +18829,7 @@ var linkParameterControls = css80`
|
|
|
18545
18829
|
justify-content: center;
|
|
18546
18830
|
gap: var(--spacing-base);
|
|
18547
18831
|
`;
|
|
18548
|
-
var linkParameterInput = (withExternalLinkIcon) =>
|
|
18832
|
+
var linkParameterInput = (withExternalLinkIcon) => css84`
|
|
18549
18833
|
padding-right: calc(
|
|
18550
18834
|
${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
|
|
18551
18835
|
var(--spacing-base)
|
|
@@ -18558,7 +18842,7 @@ var linkParameterInput = (withExternalLinkIcon) => css80`
|
|
|
18558
18842
|
}
|
|
18559
18843
|
}
|
|
18560
18844
|
`;
|
|
18561
|
-
var linkParameterIcon =
|
|
18845
|
+
var linkParameterIcon = css84`
|
|
18562
18846
|
align-items: center;
|
|
18563
18847
|
color: var(--brand-secondary-3);
|
|
18564
18848
|
display: flex;
|
|
@@ -18573,7 +18857,7 @@ var linkParameterIcon = css80`
|
|
|
18573
18857
|
`;
|
|
18574
18858
|
|
|
18575
18859
|
// src/components/ParameterInputs/ParameterDataResource.tsx
|
|
18576
|
-
import { jsx as
|
|
18860
|
+
import { jsx as jsx108, jsxs as jsxs72 } from "@emotion/react/jsx-runtime";
|
|
18577
18861
|
function ParameterDataResource({
|
|
18578
18862
|
label,
|
|
18579
18863
|
labelLeadingIcon,
|
|
@@ -18583,12 +18867,12 @@ function ParameterDataResource({
|
|
|
18583
18867
|
disabled: disabled2,
|
|
18584
18868
|
children
|
|
18585
18869
|
}) {
|
|
18586
|
-
return /* @__PURE__ */
|
|
18587
|
-
/* @__PURE__ */
|
|
18870
|
+
return /* @__PURE__ */ jsxs72("div", { "data-testid": "parameter-data-connect-button", children: [
|
|
18871
|
+
/* @__PURE__ */ jsxs72("span", { css: labelText2, children: [
|
|
18588
18872
|
labelLeadingIcon ? labelLeadingIcon : null,
|
|
18589
18873
|
label
|
|
18590
18874
|
] }),
|
|
18591
|
-
/* @__PURE__ */
|
|
18875
|
+
/* @__PURE__ */ jsxs72(
|
|
18592
18876
|
"button",
|
|
18593
18877
|
{
|
|
18594
18878
|
type: "button",
|
|
@@ -18597,30 +18881,30 @@ function ParameterDataResource({
|
|
|
18597
18881
|
disabled: disabled2,
|
|
18598
18882
|
onClick: onConnectDatasource,
|
|
18599
18883
|
children: [
|
|
18600
|
-
/* @__PURE__ */
|
|
18884
|
+
/* @__PURE__ */ jsx108("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ jsx108(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
|
|
18601
18885
|
children
|
|
18602
18886
|
]
|
|
18603
18887
|
}
|
|
18604
18888
|
),
|
|
18605
|
-
caption ? /* @__PURE__ */
|
|
18889
|
+
caption ? /* @__PURE__ */ jsx108(Caption, { children: caption }) : null
|
|
18606
18890
|
] });
|
|
18607
18891
|
}
|
|
18608
18892
|
|
|
18609
18893
|
// src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
|
|
18610
|
-
import { css as
|
|
18611
|
-
var ParameterDrawerHeaderContainer =
|
|
18894
|
+
import { css as css85 } from "@emotion/react";
|
|
18895
|
+
var ParameterDrawerHeaderContainer = css85`
|
|
18612
18896
|
align-items: center;
|
|
18613
18897
|
display: flex;
|
|
18614
18898
|
gap: var(--spacing-base);
|
|
18615
18899
|
justify-content: space-between;
|
|
18616
18900
|
margin-bottom: var(--spacing-sm);
|
|
18617
18901
|
`;
|
|
18618
|
-
var ParameterDrawerHeaderTitleGroup =
|
|
18902
|
+
var ParameterDrawerHeaderTitleGroup = css85`
|
|
18619
18903
|
align-items: center;
|
|
18620
18904
|
display: flex;
|
|
18621
18905
|
gap: var(--spacing-sm);
|
|
18622
18906
|
`;
|
|
18623
|
-
var ParameterDrawerHeaderTitle =
|
|
18907
|
+
var ParameterDrawerHeaderTitle = css85`
|
|
18624
18908
|
text-overflow: ellipsis;
|
|
18625
18909
|
white-space: nowrap;
|
|
18626
18910
|
overflow: hidden;
|
|
@@ -18628,12 +18912,12 @@ var ParameterDrawerHeaderTitle = css81`
|
|
|
18628
18912
|
`;
|
|
18629
18913
|
|
|
18630
18914
|
// src/components/ParameterInputs/ParameterDrawerHeader.tsx
|
|
18631
|
-
import { jsx as
|
|
18915
|
+
import { jsx as jsx109, jsxs as jsxs73 } from "@emotion/react/jsx-runtime";
|
|
18632
18916
|
var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
|
|
18633
|
-
return /* @__PURE__ */
|
|
18634
|
-
/* @__PURE__ */
|
|
18917
|
+
return /* @__PURE__ */ jsxs73("div", { css: ParameterDrawerHeaderContainer, children: [
|
|
18918
|
+
/* @__PURE__ */ jsxs73("header", { css: ParameterDrawerHeaderTitleGroup, children: [
|
|
18635
18919
|
iconBeforeTitle,
|
|
18636
|
-
/* @__PURE__ */
|
|
18920
|
+
/* @__PURE__ */ jsx109(Heading2, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title: title2, children: title2 })
|
|
18637
18921
|
] }),
|
|
18638
18922
|
children
|
|
18639
18923
|
] });
|
|
@@ -18643,8 +18927,8 @@ var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
|
|
|
18643
18927
|
import { forwardRef as forwardRef16 } from "react";
|
|
18644
18928
|
|
|
18645
18929
|
// src/components/ParameterInputs/styles/ParameterGroup.styles.ts
|
|
18646
|
-
import { css as
|
|
18647
|
-
var fieldsetStyles =
|
|
18930
|
+
import { css as css86 } from "@emotion/react";
|
|
18931
|
+
var fieldsetStyles = css86`
|
|
18648
18932
|
&:disabled,
|
|
18649
18933
|
[readonly] {
|
|
18650
18934
|
pointer-events: none;
|
|
@@ -18655,7 +18939,7 @@ var fieldsetStyles = css82`
|
|
|
18655
18939
|
}
|
|
18656
18940
|
}
|
|
18657
18941
|
`;
|
|
18658
|
-
var fieldsetLegend2 =
|
|
18942
|
+
var fieldsetLegend2 = css86`
|
|
18659
18943
|
display: block;
|
|
18660
18944
|
font-weight: var(--fw-medium);
|
|
18661
18945
|
margin-bottom: var(--spacing-sm);
|
|
@@ -18663,11 +18947,11 @@ var fieldsetLegend2 = css82`
|
|
|
18663
18947
|
`;
|
|
18664
18948
|
|
|
18665
18949
|
// src/components/ParameterInputs/ParameterGroup.tsx
|
|
18666
|
-
import { jsx as
|
|
18950
|
+
import { jsx as jsx110, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
|
|
18667
18951
|
var ParameterGroup = forwardRef16(
|
|
18668
18952
|
({ legend, isDisabled, children, ...props }, ref) => {
|
|
18669
|
-
return /* @__PURE__ */
|
|
18670
|
-
/* @__PURE__ */
|
|
18953
|
+
return /* @__PURE__ */ jsxs74("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
|
|
18954
|
+
/* @__PURE__ */ jsx110("legend", { css: fieldsetLegend2, children: legend }),
|
|
18671
18955
|
children
|
|
18672
18956
|
] });
|
|
18673
18957
|
}
|
|
@@ -18677,19 +18961,19 @@ var ParameterGroup = forwardRef16(
|
|
|
18677
18961
|
import { forwardRef as forwardRef18, useDeferredValue } from "react";
|
|
18678
18962
|
|
|
18679
18963
|
// src/components/ParameterInputs/ParameterImagePreview.tsx
|
|
18680
|
-
import { useState as
|
|
18964
|
+
import { useState as useState13 } from "react";
|
|
18681
18965
|
import { createPortal as createPortal2 } from "react-dom";
|
|
18682
18966
|
|
|
18683
18967
|
// src/components/ParameterInputs/styles/ParameterImage.styles.ts
|
|
18684
|
-
import { css as
|
|
18685
|
-
var previewWrapper =
|
|
18968
|
+
import { css as css87 } from "@emotion/react";
|
|
18969
|
+
var previewWrapper = css87`
|
|
18686
18970
|
margin-top: var(--spacing-xs);
|
|
18687
18971
|
background: var(--gray-50);
|
|
18688
18972
|
padding: var(--spacing-sm);
|
|
18689
18973
|
border: solid 1px var(--gray-300);
|
|
18690
18974
|
border-radius: var(--rounded-sm);
|
|
18691
18975
|
`;
|
|
18692
|
-
var previewLink =
|
|
18976
|
+
var previewLink = css87`
|
|
18693
18977
|
display: block;
|
|
18694
18978
|
width: 100%;
|
|
18695
18979
|
|
|
@@ -18697,7 +18981,7 @@ var previewLink = css83`
|
|
|
18697
18981
|
max-height: 9rem;
|
|
18698
18982
|
}
|
|
18699
18983
|
`;
|
|
18700
|
-
var previewModalWrapper =
|
|
18984
|
+
var previewModalWrapper = css87`
|
|
18701
18985
|
background: var(--gray-50);
|
|
18702
18986
|
display: flex;
|
|
18703
18987
|
height: 100%;
|
|
@@ -18706,7 +18990,7 @@ var previewModalWrapper = css83`
|
|
|
18706
18990
|
border: solid 1px var(--gray-300);
|
|
18707
18991
|
border-radius: var(--rounded-sm);
|
|
18708
18992
|
`;
|
|
18709
|
-
var previewModalImage =
|
|
18993
|
+
var previewModalImage = css87`
|
|
18710
18994
|
display: flex;
|
|
18711
18995
|
height: 100%;
|
|
18712
18996
|
width: 100%;
|
|
@@ -18718,32 +19002,32 @@ var previewModalImage = css83`
|
|
|
18718
19002
|
`;
|
|
18719
19003
|
|
|
18720
19004
|
// src/components/ParameterInputs/ParameterImagePreview.tsx
|
|
18721
|
-
import { Fragment as
|
|
19005
|
+
import { Fragment as Fragment15, jsx as jsx111, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
|
|
18722
19006
|
function ParameterImagePreview({ imageSrc }) {
|
|
18723
|
-
const [showModal, setShowModal] =
|
|
18724
|
-
return imageSrc ? /* @__PURE__ */
|
|
18725
|
-
/* @__PURE__ */
|
|
18726
|
-
/* @__PURE__ */
|
|
19007
|
+
const [showModal, setShowModal] = useState13(false);
|
|
19008
|
+
return imageSrc ? /* @__PURE__ */ jsxs75("div", { css: previewWrapper, children: [
|
|
19009
|
+
/* @__PURE__ */ jsx111(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
|
|
19010
|
+
/* @__PURE__ */ jsx111(
|
|
18727
19011
|
"button",
|
|
18728
19012
|
{
|
|
18729
19013
|
css: previewLink,
|
|
18730
19014
|
onClick: () => {
|
|
18731
19015
|
setShowModal(true);
|
|
18732
19016
|
},
|
|
18733
|
-
children: /* @__PURE__ */
|
|
19017
|
+
children: /* @__PURE__ */ jsx111(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
|
|
18734
19018
|
}
|
|
18735
19019
|
)
|
|
18736
19020
|
] }) : null;
|
|
18737
19021
|
}
|
|
18738
19022
|
var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
|
|
18739
|
-
return open ? /* @__PURE__ */
|
|
18740
|
-
/* @__PURE__ */
|
|
19023
|
+
return open ? /* @__PURE__ */ jsx111(Fragment15, { children: createPortal2(
|
|
19024
|
+
/* @__PURE__ */ jsx111(
|
|
18741
19025
|
Modal,
|
|
18742
19026
|
{
|
|
18743
19027
|
header: "Image Preview",
|
|
18744
19028
|
onRequestClose,
|
|
18745
|
-
buttonGroup: /* @__PURE__ */
|
|
18746
|
-
children: /* @__PURE__ */
|
|
19029
|
+
buttonGroup: /* @__PURE__ */ jsx111(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
|
|
19030
|
+
children: /* @__PURE__ */ jsx111("div", { css: previewModalWrapper, children: /* @__PURE__ */ jsx111(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
|
|
18747
19031
|
}
|
|
18748
19032
|
),
|
|
18749
19033
|
document.body
|
|
@@ -18751,25 +19035,25 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
|
|
|
18751
19035
|
};
|
|
18752
19036
|
|
|
18753
19037
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
18754
|
-
import { css as
|
|
18755
|
-
import { useState as
|
|
19038
|
+
import { css as css89 } from "@emotion/react";
|
|
19039
|
+
import { useState as useState14 } from "react";
|
|
18756
19040
|
|
|
18757
19041
|
// src/components/ParameterInputs/ParameterLabel.tsx
|
|
18758
|
-
import { jsx as
|
|
19042
|
+
import { jsx as jsx112 } from "@emotion/react/jsx-runtime";
|
|
18759
19043
|
var ParameterLabel = ({ id, asSpan, children, ...props }) => {
|
|
18760
|
-
return !asSpan ? /* @__PURE__ */
|
|
19044
|
+
return !asSpan ? /* @__PURE__ */ jsx112("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ jsx112("span", { "aria-labelledby": id, css: labelText2, children });
|
|
18761
19045
|
};
|
|
18762
19046
|
|
|
18763
19047
|
// src/components/ParameterInputs/ParameterMenuButton.tsx
|
|
18764
19048
|
import { forwardRef as forwardRef17 } from "react";
|
|
18765
|
-
import { jsx as
|
|
19049
|
+
import { jsx as jsx113 } from "@emotion/react/jsx-runtime";
|
|
18766
19050
|
var ParameterMenuButton = forwardRef17(
|
|
18767
19051
|
({ label, children }, ref) => {
|
|
18768
|
-
return /* @__PURE__ */
|
|
19052
|
+
return /* @__PURE__ */ jsx113(
|
|
18769
19053
|
Menu,
|
|
18770
19054
|
{
|
|
18771
19055
|
menuLabel: `${label} menu`,
|
|
18772
|
-
menuTrigger: /* @__PURE__ */
|
|
19056
|
+
menuTrigger: /* @__PURE__ */ jsx113(
|
|
18773
19057
|
"button",
|
|
18774
19058
|
{
|
|
18775
19059
|
className: "parameter-menu",
|
|
@@ -18777,7 +19061,7 @@ var ParameterMenuButton = forwardRef17(
|
|
|
18777
19061
|
type: "button",
|
|
18778
19062
|
"aria-label": `${label} options`,
|
|
18779
19063
|
ref,
|
|
18780
|
-
children: /* @__PURE__ */
|
|
19064
|
+
children: /* @__PURE__ */ jsx113(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
|
|
18781
19065
|
}
|
|
18782
19066
|
),
|
|
18783
19067
|
children
|
|
@@ -18787,14 +19071,14 @@ var ParameterMenuButton = forwardRef17(
|
|
|
18787
19071
|
);
|
|
18788
19072
|
|
|
18789
19073
|
// src/components/ParameterInputs/styles/ParameterShell.styles.ts
|
|
18790
|
-
import { css as
|
|
18791
|
-
var emptyParameterShell =
|
|
19074
|
+
import { css as css88 } from "@emotion/react";
|
|
19075
|
+
var emptyParameterShell = css88`
|
|
18792
19076
|
border-radius: var(--rounded-sm);
|
|
18793
19077
|
flex-grow: 1;
|
|
18794
19078
|
position: relative;
|
|
18795
19079
|
max-width: 100%;
|
|
18796
19080
|
`;
|
|
18797
|
-
var emptyParameterShellText =
|
|
19081
|
+
var emptyParameterShellText = css88`
|
|
18798
19082
|
background: var(--brand-secondary-6);
|
|
18799
19083
|
border-radius: var(--rounded-sm);
|
|
18800
19084
|
padding: var(--spacing-sm);
|
|
@@ -18802,7 +19086,7 @@ var emptyParameterShellText = css84`
|
|
|
18802
19086
|
font-size: var(--fs-sm);
|
|
18803
19087
|
margin: 0;
|
|
18804
19088
|
`;
|
|
18805
|
-
var overrideMarker =
|
|
19089
|
+
var overrideMarker = css88`
|
|
18806
19090
|
border-radius: var(--rounded-sm);
|
|
18807
19091
|
border: 10px solid var(--gray-300);
|
|
18808
19092
|
border-left-color: transparent;
|
|
@@ -18813,7 +19097,7 @@ var overrideMarker = css84`
|
|
|
18813
19097
|
`;
|
|
18814
19098
|
|
|
18815
19099
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
18816
|
-
import { jsx as
|
|
19100
|
+
import { jsx as jsx114, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
|
|
18817
19101
|
var extractParameterProps = (props) => {
|
|
18818
19102
|
const {
|
|
18819
19103
|
id,
|
|
@@ -18873,36 +19157,36 @@ var ParameterShell = ({
|
|
|
18873
19157
|
isParameterGroup = false,
|
|
18874
19158
|
...props
|
|
18875
19159
|
}) => {
|
|
18876
|
-
const [manualErrorMessage, setManualErrorMessage] =
|
|
19160
|
+
const [manualErrorMessage, setManualErrorMessage] = useState14(void 0);
|
|
18877
19161
|
const setErrorMessage = (message) => setManualErrorMessage(message);
|
|
18878
19162
|
const errorMessaging = errorMessage || manualErrorMessage;
|
|
18879
|
-
return /* @__PURE__ */
|
|
18880
|
-
hiddenLabel || title2 ? null : /* @__PURE__ */
|
|
19163
|
+
return /* @__PURE__ */ jsxs76("div", { css: inputContainer2, ...props, id, children: [
|
|
19164
|
+
hiddenLabel || title2 ? null : /* @__PURE__ */ jsxs76(ParameterLabel, { id, css: labelText2, children: [
|
|
18881
19165
|
labelLeadingIcon != null ? labelLeadingIcon : null,
|
|
18882
19166
|
label,
|
|
18883
19167
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
18884
19168
|
] }),
|
|
18885
|
-
!title2 ? null : /* @__PURE__ */
|
|
19169
|
+
!title2 ? null : /* @__PURE__ */ jsxs76(ParameterLabel, { id, asSpan: true, children: [
|
|
18886
19170
|
labelLeadingIcon != null ? labelLeadingIcon : null,
|
|
18887
19171
|
title2,
|
|
18888
19172
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
18889
19173
|
] }),
|
|
18890
|
-
/* @__PURE__ */
|
|
18891
|
-
actionItems ? /* @__PURE__ */
|
|
19174
|
+
/* @__PURE__ */ jsxs76("div", { css: inputWrapper, children: [
|
|
19175
|
+
actionItems ? /* @__PURE__ */ jsx114(
|
|
18892
19176
|
"div",
|
|
18893
19177
|
{
|
|
18894
19178
|
css: [
|
|
18895
19179
|
inputMenu,
|
|
18896
19180
|
inputActionItems,
|
|
18897
|
-
menuItems ?
|
|
19181
|
+
menuItems ? css89`
|
|
18898
19182
|
right: var(--spacing-md);
|
|
18899
19183
|
` : void 0
|
|
18900
19184
|
],
|
|
18901
19185
|
children: actionItems
|
|
18902
19186
|
}
|
|
18903
19187
|
) : null,
|
|
18904
|
-
menuItems ? /* @__PURE__ */
|
|
18905
|
-
/* @__PURE__ */
|
|
19188
|
+
menuItems ? /* @__PURE__ */ jsx114(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
|
|
19189
|
+
/* @__PURE__ */ jsx114(
|
|
18906
19190
|
ParameterShellContext.Provider,
|
|
18907
19191
|
{
|
|
18908
19192
|
value: {
|
|
@@ -18912,14 +19196,14 @@ var ParameterShell = ({
|
|
|
18912
19196
|
errorMessage: errorMessaging,
|
|
18913
19197
|
handleManuallySetErrorMessage: (message) => setErrorMessage(message)
|
|
18914
19198
|
},
|
|
18915
|
-
children: isParameterGroup ? /* @__PURE__ */
|
|
19199
|
+
children: isParameterGroup ? /* @__PURE__ */ jsx114("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ jsxs76(ParameterShellPlaceholder, { children: [
|
|
18916
19200
|
children,
|
|
18917
|
-
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */
|
|
19201
|
+
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx114(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
|
|
18918
19202
|
] })
|
|
18919
19203
|
}
|
|
18920
19204
|
)
|
|
18921
19205
|
] }),
|
|
18922
|
-
/* @__PURE__ */
|
|
19206
|
+
/* @__PURE__ */ jsx114(
|
|
18923
19207
|
FieldMessage,
|
|
18924
19208
|
{
|
|
18925
19209
|
helperMessageTestId: captionTestId,
|
|
@@ -18933,17 +19217,17 @@ var ParameterShell = ({
|
|
|
18933
19217
|
] });
|
|
18934
19218
|
};
|
|
18935
19219
|
var ParameterShellPlaceholder = ({ children }) => {
|
|
18936
|
-
return /* @__PURE__ */
|
|
19220
|
+
return /* @__PURE__ */ jsx114("div", { css: emptyParameterShell, children });
|
|
18937
19221
|
};
|
|
18938
|
-
var ParameterOverrideMarker = (props) => /* @__PURE__ */
|
|
19222
|
+
var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx114(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx114("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx114("span", { hidden: true, children: "reset overridden value to default" }) }) });
|
|
18939
19223
|
|
|
18940
19224
|
// src/components/ParameterInputs/ParameterImage.tsx
|
|
18941
|
-
import { Fragment as
|
|
19225
|
+
import { Fragment as Fragment16, jsx as jsx115, jsxs as jsxs77 } from "@emotion/react/jsx-runtime";
|
|
18942
19226
|
var ParameterImage = forwardRef18(
|
|
18943
19227
|
({ children, ...props }, ref) => {
|
|
18944
19228
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
18945
|
-
return /* @__PURE__ */
|
|
18946
|
-
/* @__PURE__ */
|
|
19229
|
+
return /* @__PURE__ */ jsxs77(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
|
|
19230
|
+
/* @__PURE__ */ jsx115(ParameterImageInner, { ref, ...innerProps }),
|
|
18947
19231
|
children
|
|
18948
19232
|
] });
|
|
18949
19233
|
}
|
|
@@ -18952,8 +19236,8 @@ var ParameterImageInner = forwardRef18((props, ref) => {
|
|
|
18952
19236
|
const { value } = props;
|
|
18953
19237
|
const { id, label, hiddenLabel, errorMessage } = useParameterShell();
|
|
18954
19238
|
const deferredValue = useDeferredValue(value);
|
|
18955
|
-
return /* @__PURE__ */
|
|
18956
|
-
/* @__PURE__ */
|
|
19239
|
+
return /* @__PURE__ */ jsxs77(Fragment16, { children: [
|
|
19240
|
+
/* @__PURE__ */ jsx115(
|
|
18957
19241
|
"input",
|
|
18958
19242
|
{
|
|
18959
19243
|
css: input3,
|
|
@@ -18965,21 +19249,21 @@ var ParameterImageInner = forwardRef18((props, ref) => {
|
|
|
18965
19249
|
...props
|
|
18966
19250
|
}
|
|
18967
19251
|
),
|
|
18968
|
-
errorMessage || props.disablePreview ? null : /* @__PURE__ */
|
|
19252
|
+
errorMessage || props.disablePreview ? null : /* @__PURE__ */ jsx115(ParameterImagePreview, { imageSrc: deferredValue })
|
|
18969
19253
|
] });
|
|
18970
19254
|
});
|
|
18971
19255
|
|
|
18972
19256
|
// src/components/ParameterInputs/ParameterInput.tsx
|
|
18973
19257
|
import { forwardRef as forwardRef19 } from "react";
|
|
18974
|
-
import { jsx as
|
|
19258
|
+
import { jsx as jsx116 } from "@emotion/react/jsx-runtime";
|
|
18975
19259
|
var ParameterInput = forwardRef19((props, ref) => {
|
|
18976
19260
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
18977
|
-
return /* @__PURE__ */
|
|
19261
|
+
return /* @__PURE__ */ jsx116(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx116(ParameterInputInner, { ref, ...innerProps }) });
|
|
18978
19262
|
});
|
|
18979
19263
|
var ParameterInputInner = forwardRef19(
|
|
18980
19264
|
({ ...props }, ref) => {
|
|
18981
19265
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
18982
|
-
return /* @__PURE__ */
|
|
19266
|
+
return /* @__PURE__ */ jsx116(
|
|
18983
19267
|
"input",
|
|
18984
19268
|
{
|
|
18985
19269
|
css: input3,
|
|
@@ -18996,18 +19280,18 @@ var ParameterInputInner = forwardRef19(
|
|
|
18996
19280
|
|
|
18997
19281
|
// src/components/ParameterInputs/ParameterLink.tsx
|
|
18998
19282
|
import { forwardRef as forwardRef20 } from "react";
|
|
18999
|
-
import { jsx as
|
|
19283
|
+
import { jsx as jsx117, jsxs as jsxs78 } from "@emotion/react/jsx-runtime";
|
|
19000
19284
|
var ParameterLink = forwardRef20(
|
|
19001
19285
|
({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
|
|
19002
19286
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
19003
|
-
return /* @__PURE__ */
|
|
19287
|
+
return /* @__PURE__ */ jsx117(
|
|
19004
19288
|
ParameterShell,
|
|
19005
19289
|
{
|
|
19006
19290
|
"data-testid": "link-parameter-editor",
|
|
19007
19291
|
...shellProps,
|
|
19008
19292
|
label: innerProps.value ? shellProps.label : "",
|
|
19009
19293
|
title: !innerProps.value ? shellProps.label : void 0,
|
|
19010
|
-
children: /* @__PURE__ */
|
|
19294
|
+
children: /* @__PURE__ */ jsx117(
|
|
19011
19295
|
ParameterLinkInner,
|
|
19012
19296
|
{
|
|
19013
19297
|
onConnectLink,
|
|
@@ -19024,9 +19308,9 @@ var ParameterLinkInner = forwardRef20(
|
|
|
19024
19308
|
({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
|
|
19025
19309
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
19026
19310
|
if (!props.value)
|
|
19027
|
-
return /* @__PURE__ */
|
|
19028
|
-
return /* @__PURE__ */
|
|
19029
|
-
/* @__PURE__ */
|
|
19311
|
+
return /* @__PURE__ */ jsx117("button", { type: "button", css: dataConnectButton, disabled: disabled2, onClick: onConnectLink, children: buttonText });
|
|
19312
|
+
return /* @__PURE__ */ jsxs78("div", { css: inputWrapper, children: [
|
|
19313
|
+
/* @__PURE__ */ jsx117(
|
|
19030
19314
|
"input",
|
|
19031
19315
|
{
|
|
19032
19316
|
type: "text",
|
|
@@ -19038,8 +19322,8 @@ var ParameterLinkInner = forwardRef20(
|
|
|
19038
19322
|
...props
|
|
19039
19323
|
}
|
|
19040
19324
|
),
|
|
19041
|
-
/* @__PURE__ */
|
|
19042
|
-
/* @__PURE__ */
|
|
19325
|
+
/* @__PURE__ */ jsxs78("div", { css: linkParameterControls, children: [
|
|
19326
|
+
/* @__PURE__ */ jsx117(
|
|
19043
19327
|
"button",
|
|
19044
19328
|
{
|
|
19045
19329
|
type: "button",
|
|
@@ -19050,7 +19334,7 @@ var ParameterLinkInner = forwardRef20(
|
|
|
19050
19334
|
children: "edit"
|
|
19051
19335
|
}
|
|
19052
19336
|
),
|
|
19053
|
-
externalLink ? /* @__PURE__ */
|
|
19337
|
+
externalLink ? /* @__PURE__ */ jsx117(
|
|
19054
19338
|
"a",
|
|
19055
19339
|
{
|
|
19056
19340
|
href: externalLink,
|
|
@@ -19058,7 +19342,7 @@ var ParameterLinkInner = forwardRef20(
|
|
|
19058
19342
|
title: "Open link in new tab",
|
|
19059
19343
|
target: "_blank",
|
|
19060
19344
|
rel: "noopener noreferrer",
|
|
19061
|
-
children: /* @__PURE__ */
|
|
19345
|
+
children: /* @__PURE__ */ jsx117(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
|
|
19062
19346
|
}
|
|
19063
19347
|
) : null
|
|
19064
19348
|
] })
|
|
@@ -19067,15 +19351,15 @@ var ParameterLinkInner = forwardRef20(
|
|
|
19067
19351
|
);
|
|
19068
19352
|
|
|
19069
19353
|
// src/components/ParameterInputs/ParameterMultiSelect.tsx
|
|
19070
|
-
import { jsx as
|
|
19354
|
+
import { jsx as jsx118 } from "@emotion/react/jsx-runtime";
|
|
19071
19355
|
var ParameterMultiSelect = ({ disabled: disabled2 = false, ...props }) => {
|
|
19072
19356
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
19073
|
-
return /* @__PURE__ */
|
|
19357
|
+
return /* @__PURE__ */ jsx118(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx118(ParameterMultiSelectInner, { isDisabled: disabled2, ...innerProps }) });
|
|
19074
19358
|
};
|
|
19075
19359
|
var ParameterMultiSelectInner = (props) => {
|
|
19076
19360
|
var _a;
|
|
19077
19361
|
const { id, label } = useParameterShell();
|
|
19078
|
-
return /* @__PURE__ */
|
|
19362
|
+
return /* @__PURE__ */ jsx118(
|
|
19079
19363
|
InputComboBox,
|
|
19080
19364
|
{
|
|
19081
19365
|
menuPortalTarget: document.body,
|
|
@@ -19125,7 +19409,7 @@ var ParameterMultiSelectInner = (props) => {
|
|
|
19125
19409
|
};
|
|
19126
19410
|
|
|
19127
19411
|
// src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
|
|
19128
|
-
import { Fragment as
|
|
19412
|
+
import { Fragment as Fragment17, jsx as jsx119, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
|
|
19129
19413
|
var ParameterNameAndPublicIdInput = ({
|
|
19130
19414
|
id,
|
|
19131
19415
|
onBlur,
|
|
@@ -19151,8 +19435,8 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
19151
19435
|
navigator.clipboard.writeText(values[publicIdFieldName]);
|
|
19152
19436
|
};
|
|
19153
19437
|
autoFocus == null ? void 0 : autoFocus();
|
|
19154
|
-
return /* @__PURE__ */
|
|
19155
|
-
/* @__PURE__ */
|
|
19438
|
+
return /* @__PURE__ */ jsxs79(Fragment17, { children: [
|
|
19439
|
+
/* @__PURE__ */ jsx119(
|
|
19156
19440
|
ParameterInput,
|
|
19157
19441
|
{
|
|
19158
19442
|
id: nameIdField,
|
|
@@ -19171,7 +19455,7 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
19171
19455
|
value: values[nameIdField]
|
|
19172
19456
|
}
|
|
19173
19457
|
),
|
|
19174
|
-
/* @__PURE__ */
|
|
19458
|
+
/* @__PURE__ */ jsx119(
|
|
19175
19459
|
ParameterInput,
|
|
19176
19460
|
{
|
|
19177
19461
|
id: publicIdFieldName,
|
|
@@ -19185,11 +19469,11 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
19185
19469
|
caption: !publicIdError ? publicIdCaption : void 0,
|
|
19186
19470
|
placeholder: publicIdPlaceholderText,
|
|
19187
19471
|
errorMessage: publicIdError,
|
|
19188
|
-
menuItems: /* @__PURE__ */
|
|
19472
|
+
menuItems: /* @__PURE__ */ jsx119(
|
|
19189
19473
|
MenuItem,
|
|
19190
19474
|
{
|
|
19191
19475
|
disabled: !values[publicIdFieldName],
|
|
19192
|
-
icon: /* @__PURE__ */
|
|
19476
|
+
icon: /* @__PURE__ */ jsx119(Icon, { icon: "path-trim", iconColor: "currentColor" }),
|
|
19193
19477
|
onClick: handleCopyPidFieldValue,
|
|
19194
19478
|
children: "Copy"
|
|
19195
19479
|
}
|
|
@@ -19197,12 +19481,12 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
19197
19481
|
value: values[publicIdFieldName]
|
|
19198
19482
|
}
|
|
19199
19483
|
),
|
|
19200
|
-
(warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */
|
|
19484
|
+
(warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx119(Callout, { type: "caution", children: warnOverLength.message }) : null
|
|
19201
19485
|
] });
|
|
19202
19486
|
};
|
|
19203
19487
|
|
|
19204
19488
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
19205
|
-
import { css as
|
|
19489
|
+
import { css as css93 } from "@emotion/react";
|
|
19206
19490
|
import { ListItemNode, ListNode as ListNode2 } from "@lexical/list";
|
|
19207
19491
|
import {
|
|
19208
19492
|
CODE,
|
|
@@ -19316,7 +19600,7 @@ var getLabelForElement = (type) => {
|
|
|
19316
19600
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
19317
19601
|
import { deepEqual as deepEqual2 } from "fast-equals";
|
|
19318
19602
|
import { ParagraphNode as ParagraphNode2 } from "lexical";
|
|
19319
|
-
import { useEffect as
|
|
19603
|
+
import { useEffect as useEffect19, useRef as useRef10 } from "react";
|
|
19320
19604
|
|
|
19321
19605
|
// src/components/ParameterInputs/rich-text/CustomCodeNode.ts
|
|
19322
19606
|
import { CodeNode } from "@lexical/code";
|
|
@@ -19337,10 +19621,10 @@ CustomCodeNode.importDOM = function() {
|
|
|
19337
19621
|
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
|
|
19338
19622
|
import { mergeRegister } from "@lexical/utils";
|
|
19339
19623
|
import { ParagraphNode } from "lexical";
|
|
19340
|
-
import { useEffect as
|
|
19624
|
+
import { useEffect as useEffect15 } from "react";
|
|
19341
19625
|
function DisableStylesPlugin() {
|
|
19342
19626
|
const [editor] = useLexicalComposerContext();
|
|
19343
|
-
|
|
19627
|
+
useEffect15(() => {
|
|
19344
19628
|
return mergeRegister(
|
|
19345
19629
|
// Disable text alignment on paragraph nodes
|
|
19346
19630
|
editor.registerNodeTransform(ParagraphNode, (node) => {
|
|
@@ -19354,23 +19638,23 @@ function DisableStylesPlugin() {
|
|
|
19354
19638
|
}
|
|
19355
19639
|
|
|
19356
19640
|
// src/components/ParameterInputs/rich-text/editorStyles.ts
|
|
19357
|
-
import { css as
|
|
19358
|
-
var textBold =
|
|
19641
|
+
import { css as css90 } from "@emotion/css";
|
|
19642
|
+
var textBold = css90`
|
|
19359
19643
|
font-weight: 700;
|
|
19360
19644
|
`;
|
|
19361
|
-
var textItalic =
|
|
19645
|
+
var textItalic = css90`
|
|
19362
19646
|
font-style: italic;
|
|
19363
19647
|
`;
|
|
19364
|
-
var textUnderline =
|
|
19648
|
+
var textUnderline = css90`
|
|
19365
19649
|
text-decoration: underline;
|
|
19366
19650
|
`;
|
|
19367
|
-
var textStrikethrough =
|
|
19651
|
+
var textStrikethrough = css90`
|
|
19368
19652
|
text-decoration: line-through;
|
|
19369
19653
|
`;
|
|
19370
|
-
var textUnderlineStrikethrough =
|
|
19654
|
+
var textUnderlineStrikethrough = css90`
|
|
19371
19655
|
text-decoration: underline line-through;
|
|
19372
19656
|
`;
|
|
19373
|
-
var textCode =
|
|
19657
|
+
var textCode = css90`
|
|
19374
19658
|
background-color: var(--gray-100);
|
|
19375
19659
|
border-radius: var(--rounded-sm);
|
|
19376
19660
|
display: inline-block;
|
|
@@ -19381,68 +19665,68 @@ var textCode = css86`
|
|
|
19381
19665
|
padding-left: var(--spacing-xs);
|
|
19382
19666
|
padding-right: var(--spacing-xs);
|
|
19383
19667
|
`;
|
|
19384
|
-
var textSuperscript =
|
|
19668
|
+
var textSuperscript = css90`
|
|
19385
19669
|
vertical-align: super;
|
|
19386
19670
|
font-size: smaller;
|
|
19387
19671
|
`;
|
|
19388
|
-
var textSubscript =
|
|
19672
|
+
var textSubscript = css90`
|
|
19389
19673
|
vertical-align: sub;
|
|
19390
19674
|
font-size: smaller;
|
|
19391
19675
|
`;
|
|
19392
|
-
var linkElement =
|
|
19676
|
+
var linkElement = css90`
|
|
19393
19677
|
${link}
|
|
19394
19678
|
${linkColorDefault}
|
|
19395
19679
|
text-decoration: underline;
|
|
19396
19680
|
`;
|
|
19397
|
-
var h12 =
|
|
19681
|
+
var h12 = css90`
|
|
19398
19682
|
font-size: clamp(1.35rem, var(--fluid-font-base), 1.7rem);
|
|
19399
19683
|
`;
|
|
19400
|
-
var h22 =
|
|
19684
|
+
var h22 = css90`
|
|
19401
19685
|
font-size: clamp(1.35rem, var(--fluid-font-base), 1.6rem);
|
|
19402
19686
|
`;
|
|
19403
|
-
var h32 =
|
|
19687
|
+
var h32 = css90`
|
|
19404
19688
|
font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
|
|
19405
19689
|
`;
|
|
19406
|
-
var h42 =
|
|
19690
|
+
var h42 = css90`
|
|
19407
19691
|
font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
|
|
19408
19692
|
`;
|
|
19409
|
-
var h52 =
|
|
19693
|
+
var h52 = css90`
|
|
19410
19694
|
font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
|
|
19411
19695
|
`;
|
|
19412
|
-
var h62 =
|
|
19696
|
+
var h62 = css90`
|
|
19413
19697
|
font-size: var(--fs-base);
|
|
19414
19698
|
`;
|
|
19415
|
-
var heading1Element =
|
|
19699
|
+
var heading1Element = css90`
|
|
19416
19700
|
${h12}
|
|
19417
19701
|
${commonHeadingAttr(true)}
|
|
19418
19702
|
${commonLineHeight}
|
|
19419
19703
|
`;
|
|
19420
|
-
var heading2Element =
|
|
19704
|
+
var heading2Element = css90`
|
|
19421
19705
|
${h22}
|
|
19422
19706
|
${commonHeadingAttr(true)}
|
|
19423
19707
|
${commonLineHeight}
|
|
19424
19708
|
`;
|
|
19425
|
-
var heading3Element =
|
|
19709
|
+
var heading3Element = css90`
|
|
19426
19710
|
${h32}
|
|
19427
19711
|
${commonHeadingAttr(true)}
|
|
19428
19712
|
${commonLineHeight}
|
|
19429
19713
|
`;
|
|
19430
|
-
var heading4Element =
|
|
19714
|
+
var heading4Element = css90`
|
|
19431
19715
|
${h42}
|
|
19432
19716
|
${commonHeadingAttr(true)}
|
|
19433
19717
|
${commonLineHeight}
|
|
19434
19718
|
`;
|
|
19435
|
-
var heading5Element =
|
|
19719
|
+
var heading5Element = css90`
|
|
19436
19720
|
${h52}
|
|
19437
19721
|
${commonHeadingAttr(true)}
|
|
19438
19722
|
${commonLineHeight}
|
|
19439
19723
|
`;
|
|
19440
|
-
var heading6Element =
|
|
19724
|
+
var heading6Element = css90`
|
|
19441
19725
|
${h62}
|
|
19442
19726
|
${commonHeadingAttr(true)}
|
|
19443
19727
|
${commonLineHeight}
|
|
19444
19728
|
`;
|
|
19445
|
-
var paragraphElement =
|
|
19729
|
+
var paragraphElement = css90`
|
|
19446
19730
|
line-height: 1.5;
|
|
19447
19731
|
margin-bottom: var(--spacing-base);
|
|
19448
19732
|
|
|
@@ -19450,7 +19734,7 @@ var paragraphElement = css86`
|
|
|
19450
19734
|
margin-bottom: 0;
|
|
19451
19735
|
}
|
|
19452
19736
|
`;
|
|
19453
|
-
var orderedListElement =
|
|
19737
|
+
var orderedListElement = css90`
|
|
19454
19738
|
${commonLineHeight}
|
|
19455
19739
|
display: block;
|
|
19456
19740
|
list-style: decimal;
|
|
@@ -19479,7 +19763,7 @@ var orderedListElement = css86`
|
|
|
19479
19763
|
}
|
|
19480
19764
|
}
|
|
19481
19765
|
`;
|
|
19482
|
-
var unorderedListElement =
|
|
19766
|
+
var unorderedListElement = css90`
|
|
19483
19767
|
${commonLineHeight}
|
|
19484
19768
|
display: block;
|
|
19485
19769
|
list-style: disc;
|
|
@@ -19500,13 +19784,13 @@ var unorderedListElement = css86`
|
|
|
19500
19784
|
}
|
|
19501
19785
|
}
|
|
19502
19786
|
`;
|
|
19503
|
-
var listItemElement =
|
|
19787
|
+
var listItemElement = css90`
|
|
19504
19788
|
margin-left: var(--spacing-md);
|
|
19505
19789
|
`;
|
|
19506
|
-
var nestedListItemElement =
|
|
19790
|
+
var nestedListItemElement = css90`
|
|
19507
19791
|
list-style-type: none;
|
|
19508
19792
|
`;
|
|
19509
|
-
var blockquoteElement =
|
|
19793
|
+
var blockquoteElement = css90`
|
|
19510
19794
|
border-left: 0.25rem solid var(--gray-300);
|
|
19511
19795
|
color: var(--gray-600);
|
|
19512
19796
|
margin-bottom: var(--spacing-base);
|
|
@@ -19516,7 +19800,7 @@ var blockquoteElement = css86`
|
|
|
19516
19800
|
margin-bottom: 0;
|
|
19517
19801
|
}
|
|
19518
19802
|
`;
|
|
19519
|
-
var codeElement =
|
|
19803
|
+
var codeElement = css90`
|
|
19520
19804
|
background-color: var(--gray-100);
|
|
19521
19805
|
border-radius: var(--rounded-sm);
|
|
19522
19806
|
display: block;
|
|
@@ -19533,7 +19817,7 @@ var codeElement = css86`
|
|
|
19533
19817
|
`;
|
|
19534
19818
|
|
|
19535
19819
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
19536
|
-
import { css as
|
|
19820
|
+
import { css as css91 } from "@emotion/react";
|
|
19537
19821
|
import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexical/react/LexicalComposerContext";
|
|
19538
19822
|
import { NodeEventPlugin } from "@lexical/react/LexicalNodeEventPlugin";
|
|
19539
19823
|
import { addClassNamesToElement, isHTMLAnchorElement, mergeRegister as mergeRegister2 } from "@lexical/utils";
|
|
@@ -19549,7 +19833,7 @@ import {
|
|
|
19549
19833
|
ElementNode as ElementNode2,
|
|
19550
19834
|
FOCUS_COMMAND
|
|
19551
19835
|
} from "lexical";
|
|
19552
|
-
import { useCallback as useCallback9, useEffect as
|
|
19836
|
+
import { useCallback as useCallback9, useEffect as useEffect16, useRef as useRef9, useState as useState15 } from "react";
|
|
19553
19837
|
|
|
19554
19838
|
// src/components/ParameterInputs/rich-text/utils.ts
|
|
19555
19839
|
import { $isAtNodeEnd } from "@lexical/selection";
|
|
@@ -19587,7 +19871,7 @@ var getSelectedNode = (selection) => {
|
|
|
19587
19871
|
};
|
|
19588
19872
|
|
|
19589
19873
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
19590
|
-
import { Fragment as
|
|
19874
|
+
import { Fragment as Fragment18, jsx as jsx120, jsxs as jsxs80 } from "@emotion/react/jsx-runtime";
|
|
19591
19875
|
var isProjectMapLinkValue = (value) => {
|
|
19592
19876
|
return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
|
|
19593
19877
|
value.nodeId && value.path && value.projectMapId
|
|
@@ -19874,16 +20158,16 @@ var OPEN_LINK_NODE_MODAL_COMMAND = createCommand(
|
|
|
19874
20158
|
);
|
|
19875
20159
|
var LINK_POPOVER_OFFSET_X = 0;
|
|
19876
20160
|
var LINK_POPOVER_OFFSET_Y = 8;
|
|
19877
|
-
var linkPopover =
|
|
20161
|
+
var linkPopover = css91`
|
|
19878
20162
|
position: absolute;
|
|
19879
20163
|
z-index: 5;
|
|
19880
20164
|
`;
|
|
19881
|
-
var linkPopoverContainer =
|
|
20165
|
+
var linkPopoverContainer = css91`
|
|
19882
20166
|
${Popover};
|
|
19883
20167
|
align-items: center;
|
|
19884
20168
|
display: flex;
|
|
19885
20169
|
`;
|
|
19886
|
-
var linkPopoverAnchor =
|
|
20170
|
+
var linkPopoverAnchor = css91`
|
|
19887
20171
|
${link}
|
|
19888
20172
|
${linkColorDefault}
|
|
19889
20173
|
`;
|
|
@@ -19892,17 +20176,17 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
19892
20176
|
return path;
|
|
19893
20177
|
};
|
|
19894
20178
|
const [editor] = useLexicalComposerContext2();
|
|
19895
|
-
const [linkPopoverState, setLinkPopoverState] =
|
|
19896
|
-
const linkPopoverElRef =
|
|
19897
|
-
const [isEditorFocused, setIsEditorFocused] =
|
|
19898
|
-
const [isLinkPopoverFocused, setIsLinkPopoverFocused] =
|
|
19899
|
-
|
|
20179
|
+
const [linkPopoverState, setLinkPopoverState] = useState15();
|
|
20180
|
+
const linkPopoverElRef = useRef9(null);
|
|
20181
|
+
const [isEditorFocused, setIsEditorFocused] = useState15(false);
|
|
20182
|
+
const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState15(false);
|
|
20183
|
+
useEffect16(() => {
|
|
19900
20184
|
if (!isEditorFocused && !isLinkPopoverFocused) {
|
|
19901
20185
|
setLinkPopoverState(void 0);
|
|
19902
20186
|
return;
|
|
19903
20187
|
}
|
|
19904
20188
|
}, [isEditorFocused, isLinkPopoverFocused]);
|
|
19905
|
-
|
|
20189
|
+
useEffect16(() => {
|
|
19906
20190
|
if (!editor.hasNodes([LinkNode])) {
|
|
19907
20191
|
throw new Error("LinkNode not registered on editor");
|
|
19908
20192
|
}
|
|
@@ -20003,7 +20287,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
20003
20287
|
}
|
|
20004
20288
|
});
|
|
20005
20289
|
}, [editor]);
|
|
20006
|
-
|
|
20290
|
+
useEffect16(() => {
|
|
20007
20291
|
return editor.registerUpdateListener(({ editorState }) => {
|
|
20008
20292
|
requestAnimationFrame(() => {
|
|
20009
20293
|
editorState.read(() => {
|
|
@@ -20030,8 +20314,8 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
20030
20314
|
});
|
|
20031
20315
|
});
|
|
20032
20316
|
};
|
|
20033
|
-
return /* @__PURE__ */
|
|
20034
|
-
/* @__PURE__ */
|
|
20317
|
+
return /* @__PURE__ */ jsxs80(Fragment18, { children: [
|
|
20318
|
+
/* @__PURE__ */ jsx120(
|
|
20035
20319
|
NodeEventPlugin,
|
|
20036
20320
|
{
|
|
20037
20321
|
nodeType: LinkNode,
|
|
@@ -20041,7 +20325,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
20041
20325
|
}
|
|
20042
20326
|
}
|
|
20043
20327
|
),
|
|
20044
|
-
linkPopoverState ? /* @__PURE__ */
|
|
20328
|
+
linkPopoverState ? /* @__PURE__ */ jsx120(
|
|
20045
20329
|
"div",
|
|
20046
20330
|
{
|
|
20047
20331
|
css: linkPopover,
|
|
@@ -20050,8 +20334,8 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
20050
20334
|
top: linkPopoverState.position.y
|
|
20051
20335
|
},
|
|
20052
20336
|
ref: linkPopoverElRef,
|
|
20053
|
-
children: /* @__PURE__ */
|
|
20054
|
-
linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */
|
|
20337
|
+
children: /* @__PURE__ */ jsxs80("div", { css: linkPopoverContainer, children: [
|
|
20338
|
+
linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx120(
|
|
20055
20339
|
"a",
|
|
20056
20340
|
{
|
|
20057
20341
|
href: parsePath(
|
|
@@ -20063,7 +20347,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
20063
20347
|
children: parsePath(linkPopoverState.node.__link.path)
|
|
20064
20348
|
}
|
|
20065
20349
|
),
|
|
20066
|
-
/* @__PURE__ */
|
|
20350
|
+
/* @__PURE__ */ jsx120(
|
|
20067
20351
|
Button,
|
|
20068
20352
|
{
|
|
20069
20353
|
size: "xs",
|
|
@@ -20071,7 +20355,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
20071
20355
|
onEditLinkNode(linkPopoverState.node);
|
|
20072
20356
|
},
|
|
20073
20357
|
buttonType: "ghost",
|
|
20074
|
-
children: /* @__PURE__ */
|
|
20358
|
+
children: /* @__PURE__ */ jsx120(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
|
|
20075
20359
|
}
|
|
20076
20360
|
)
|
|
20077
20361
|
] })
|
|
@@ -20095,8 +20379,8 @@ import {
|
|
|
20095
20379
|
COMMAND_PRIORITY_CRITICAL,
|
|
20096
20380
|
INDENT_CONTENT_COMMAND
|
|
20097
20381
|
} from "lexical";
|
|
20098
|
-
import { useEffect as
|
|
20099
|
-
import { jsx as
|
|
20382
|
+
import { useEffect as useEffect17 } from "react";
|
|
20383
|
+
import { jsx as jsx121 } from "@emotion/react/jsx-runtime";
|
|
20100
20384
|
function isIndentPermitted(maxDepth) {
|
|
20101
20385
|
const selection = $getSelection2();
|
|
20102
20386
|
if (!$isRangeSelection2(selection)) {
|
|
@@ -20119,18 +20403,18 @@ function isIndentPermitted(maxDepth) {
|
|
|
20119
20403
|
}
|
|
20120
20404
|
function ListIndentPlugin({ maxDepth }) {
|
|
20121
20405
|
const [editor] = useLexicalComposerContext3();
|
|
20122
|
-
|
|
20406
|
+
useEffect17(() => {
|
|
20123
20407
|
return editor.registerCommand(
|
|
20124
20408
|
INDENT_CONTENT_COMMAND,
|
|
20125
20409
|
() => !isIndentPermitted(maxDepth),
|
|
20126
20410
|
COMMAND_PRIORITY_CRITICAL
|
|
20127
20411
|
);
|
|
20128
20412
|
}, [editor, maxDepth]);
|
|
20129
|
-
return /* @__PURE__ */
|
|
20413
|
+
return /* @__PURE__ */ jsx121(TabIndentationPlugin, {});
|
|
20130
20414
|
}
|
|
20131
20415
|
|
|
20132
20416
|
// src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
|
|
20133
|
-
import { css as
|
|
20417
|
+
import { css as css92 } from "@emotion/react";
|
|
20134
20418
|
import { $createCodeNode } from "@lexical/code";
|
|
20135
20419
|
import {
|
|
20136
20420
|
$isListNode as $isListNode2,
|
|
@@ -20152,9 +20436,9 @@ import {
|
|
|
20152
20436
|
FORMAT_TEXT_COMMAND,
|
|
20153
20437
|
SELECTION_CHANGE_COMMAND
|
|
20154
20438
|
} from "lexical";
|
|
20155
|
-
import { useCallback as useCallback10, useEffect as
|
|
20156
|
-
import { Fragment as
|
|
20157
|
-
var toolbar =
|
|
20439
|
+
import { useCallback as useCallback10, useEffect as useEffect18, useMemo as useMemo4, useState as useState16 } from "react";
|
|
20440
|
+
import { Fragment as Fragment19, jsx as jsx122, jsxs as jsxs81 } from "@emotion/react/jsx-runtime";
|
|
20441
|
+
var toolbar = css92`
|
|
20158
20442
|
background: var(--gray-50);
|
|
20159
20443
|
border-radius: var(--rounded-base);
|
|
20160
20444
|
display: flex;
|
|
@@ -20166,7 +20450,7 @@ var toolbar = css88`
|
|
|
20166
20450
|
top: calc(var(--spacing-sm) * -2);
|
|
20167
20451
|
z-index: 10;
|
|
20168
20452
|
`;
|
|
20169
|
-
var toolbarGroup =
|
|
20453
|
+
var toolbarGroup = css92`
|
|
20170
20454
|
display: flex;
|
|
20171
20455
|
gap: var(--spacing-xs);
|
|
20172
20456
|
position: relative;
|
|
@@ -20182,7 +20466,7 @@ var toolbarGroup = css88`
|
|
|
20182
20466
|
width: 1px;
|
|
20183
20467
|
}
|
|
20184
20468
|
`;
|
|
20185
|
-
var richTextToolbarButton =
|
|
20469
|
+
var richTextToolbarButton = css92`
|
|
20186
20470
|
align-items: center;
|
|
20187
20471
|
appearance: none;
|
|
20188
20472
|
border: 0;
|
|
@@ -20195,17 +20479,17 @@ var richTextToolbarButton = css88`
|
|
|
20195
20479
|
min-width: 32px;
|
|
20196
20480
|
padding: 0 var(--spacing-sm);
|
|
20197
20481
|
`;
|
|
20198
|
-
var richTextToolbarButtonActive =
|
|
20482
|
+
var richTextToolbarButtonActive = css92`
|
|
20199
20483
|
background: var(--gray-200);
|
|
20200
20484
|
`;
|
|
20201
|
-
var toolbarIcon =
|
|
20485
|
+
var toolbarIcon = css92`
|
|
20202
20486
|
color: inherit;
|
|
20203
20487
|
`;
|
|
20204
|
-
var toolbarChevron =
|
|
20488
|
+
var toolbarChevron = css92`
|
|
20205
20489
|
margin-left: var(--spacing-xs);
|
|
20206
20490
|
`;
|
|
20207
20491
|
var RichTextToolbarIcon = ({ icon }) => {
|
|
20208
|
-
return /* @__PURE__ */
|
|
20492
|
+
return /* @__PURE__ */ jsx122(Icon, { icon, css: toolbarIcon, size: "1rem" });
|
|
20209
20493
|
};
|
|
20210
20494
|
var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
|
|
20211
20495
|
["bold", "format-bold"],
|
|
@@ -20295,7 +20579,7 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
20295
20579
|
setIsLink(false);
|
|
20296
20580
|
}
|
|
20297
20581
|
}, [editor, setActiveElement, setActiveFormats, setIsLink]);
|
|
20298
|
-
|
|
20582
|
+
useEffect18(() => {
|
|
20299
20583
|
return editor.registerCommand(
|
|
20300
20584
|
SELECTION_CHANGE_COMMAND,
|
|
20301
20585
|
(_payload) => {
|
|
@@ -20305,7 +20589,7 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
20305
20589
|
COMMAND_PRIORITY_CRITICAL2
|
|
20306
20590
|
);
|
|
20307
20591
|
}, [editor, updateToolbar]);
|
|
20308
|
-
|
|
20592
|
+
useEffect18(() => {
|
|
20309
20593
|
return editor.registerUpdateListener(({ editorState }) => {
|
|
20310
20594
|
requestAnimationFrame(() => {
|
|
20311
20595
|
editorState.read(() => {
|
|
@@ -20314,15 +20598,15 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
20314
20598
|
});
|
|
20315
20599
|
});
|
|
20316
20600
|
}, [editor, updateToolbar]);
|
|
20317
|
-
return /* @__PURE__ */
|
|
20318
|
-
/* @__PURE__ */
|
|
20601
|
+
return /* @__PURE__ */ jsxs81("div", { css: toolbar, children: [
|
|
20602
|
+
/* @__PURE__ */ jsxs81(
|
|
20319
20603
|
Menu,
|
|
20320
20604
|
{
|
|
20321
20605
|
menuLabel: "Elements",
|
|
20322
|
-
menuTrigger: /* @__PURE__ */
|
|
20606
|
+
menuTrigger: /* @__PURE__ */ jsxs81("button", { css: richTextToolbarButton, title: "Text styles", children: [
|
|
20323
20607
|
visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
|
|
20324
20608
|
" ",
|
|
20325
|
-
/* @__PURE__ */
|
|
20609
|
+
/* @__PURE__ */ jsx122(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
20326
20610
|
] }),
|
|
20327
20611
|
placement: "bottom-start",
|
|
20328
20612
|
children: [
|
|
@@ -20332,7 +20616,7 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
20332
20616
|
type: "paragraph"
|
|
20333
20617
|
},
|
|
20334
20618
|
...visibleTextualElements
|
|
20335
|
-
].map((element) => /* @__PURE__ */
|
|
20619
|
+
].map((element) => /* @__PURE__ */ jsx122(
|
|
20336
20620
|
MenuItem,
|
|
20337
20621
|
{
|
|
20338
20622
|
onClick: () => {
|
|
@@ -20342,12 +20626,12 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
20342
20626
|
},
|
|
20343
20627
|
element.type
|
|
20344
20628
|
)),
|
|
20345
|
-
visibleTextualElements.length === 0 ? /* @__PURE__ */
|
|
20629
|
+
visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx122(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
|
|
20346
20630
|
]
|
|
20347
20631
|
}
|
|
20348
20632
|
),
|
|
20349
|
-
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */
|
|
20350
|
-
visibleFormatsWithIcon.map((format) => /* @__PURE__ */
|
|
20633
|
+
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs81("div", { css: toolbarGroup, children: [
|
|
20634
|
+
visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx122(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx122(
|
|
20351
20635
|
"button",
|
|
20352
20636
|
{
|
|
20353
20637
|
onClick: () => {
|
|
@@ -20357,16 +20641,16 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
20357
20641
|
richTextToolbarButton,
|
|
20358
20642
|
activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
|
|
20359
20643
|
],
|
|
20360
|
-
children: /* @__PURE__ */
|
|
20644
|
+
children: /* @__PURE__ */ jsx122(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
|
|
20361
20645
|
}
|
|
20362
20646
|
) }, format.type)),
|
|
20363
|
-
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */
|
|
20647
|
+
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx122(
|
|
20364
20648
|
Menu,
|
|
20365
20649
|
{
|
|
20366
20650
|
menuLabel: "Alternative text styles",
|
|
20367
|
-
menuTrigger: /* @__PURE__ */
|
|
20651
|
+
menuTrigger: /* @__PURE__ */ jsx122("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx122(Icon, { icon: "more-alt", css: toolbarIcon }) }),
|
|
20368
20652
|
placement: "bottom-start",
|
|
20369
|
-
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */
|
|
20653
|
+
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx122(
|
|
20370
20654
|
MenuItem,
|
|
20371
20655
|
{
|
|
20372
20656
|
onClick: () => {
|
|
@@ -20379,19 +20663,19 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
20379
20663
|
}
|
|
20380
20664
|
) : null
|
|
20381
20665
|
] }) : null,
|
|
20382
|
-
visibleElementsWithIcons.size > 0 ? /* @__PURE__ */
|
|
20383
|
-
linkElementVisible ? /* @__PURE__ */
|
|
20666
|
+
visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ jsxs81("div", { css: toolbarGroup, children: [
|
|
20667
|
+
linkElementVisible ? /* @__PURE__ */ jsx122(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx122(
|
|
20384
20668
|
"button",
|
|
20385
20669
|
{
|
|
20386
20670
|
onClick: () => {
|
|
20387
20671
|
isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
|
|
20388
20672
|
},
|
|
20389
20673
|
css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
|
|
20390
|
-
children: /* @__PURE__ */
|
|
20674
|
+
children: /* @__PURE__ */ jsx122(RichTextToolbarIcon, { icon: "link" })
|
|
20391
20675
|
}
|
|
20392
20676
|
) }) : null,
|
|
20393
|
-
visibleLists.size > 0 ? /* @__PURE__ */
|
|
20394
|
-
visibleLists.has("unorderedList") ? /* @__PURE__ */
|
|
20677
|
+
visibleLists.size > 0 ? /* @__PURE__ */ jsxs81(Fragment19, { children: [
|
|
20678
|
+
visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx122(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx122(
|
|
20395
20679
|
"button",
|
|
20396
20680
|
{
|
|
20397
20681
|
onClick: () => {
|
|
@@ -20401,10 +20685,10 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
20401
20685
|
richTextToolbarButton,
|
|
20402
20686
|
activeElement === "unorderedList" ? richTextToolbarButtonActive : null
|
|
20403
20687
|
],
|
|
20404
|
-
children: /* @__PURE__ */
|
|
20688
|
+
children: /* @__PURE__ */ jsx122(RichTextToolbarIcon, { icon: "layout-list" })
|
|
20405
20689
|
}
|
|
20406
20690
|
) }) : null,
|
|
20407
|
-
visibleLists.has("orderedList") ? /* @__PURE__ */
|
|
20691
|
+
visibleLists.has("orderedList") ? /* @__PURE__ */ jsx122(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx122(
|
|
20408
20692
|
"button",
|
|
20409
20693
|
{
|
|
20410
20694
|
onClick: () => {
|
|
@@ -20414,32 +20698,32 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
20414
20698
|
richTextToolbarButton,
|
|
20415
20699
|
activeElement === "orderedList" ? richTextToolbarButtonActive : null
|
|
20416
20700
|
],
|
|
20417
|
-
children: /* @__PURE__ */
|
|
20701
|
+
children: /* @__PURE__ */ jsx122(RichTextToolbarIcon, { icon: "layout-list-numbered" })
|
|
20418
20702
|
}
|
|
20419
20703
|
) }) : null
|
|
20420
20704
|
] }) : null,
|
|
20421
|
-
quoteElementVisible ? /* @__PURE__ */
|
|
20705
|
+
quoteElementVisible ? /* @__PURE__ */ jsx122(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ jsx122(
|
|
20422
20706
|
"button",
|
|
20423
20707
|
{
|
|
20424
20708
|
onClick: () => {
|
|
20425
20709
|
activeElement === "quote" ? onSelectElement("paragraph") : onSelectElement("quote");
|
|
20426
20710
|
},
|
|
20427
20711
|
css: [richTextToolbarButton, activeElement === "quote" ? richTextToolbarButtonActive : null],
|
|
20428
|
-
children: /* @__PURE__ */
|
|
20712
|
+
children: /* @__PURE__ */ jsx122(RichTextToolbarIcon, { icon: "quote" })
|
|
20429
20713
|
}
|
|
20430
20714
|
) }) : null,
|
|
20431
|
-
codeElementVisible ? /* @__PURE__ */
|
|
20715
|
+
codeElementVisible ? /* @__PURE__ */ jsx122(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ jsx122(
|
|
20432
20716
|
"button",
|
|
20433
20717
|
{
|
|
20434
20718
|
onClick: () => {
|
|
20435
20719
|
activeElement === "code" ? onSelectElement("paragraph") : onSelectElement("code");
|
|
20436
20720
|
},
|
|
20437
20721
|
css: [richTextToolbarButton, activeElement === "code" ? richTextToolbarButtonActive : null],
|
|
20438
|
-
children: /* @__PURE__ */
|
|
20722
|
+
children: /* @__PURE__ */ jsx122(RichTextToolbarIcon, { icon: "code-slash" })
|
|
20439
20723
|
}
|
|
20440
20724
|
) }) : null
|
|
20441
20725
|
] }) : null,
|
|
20442
|
-
customControls ? /* @__PURE__ */
|
|
20726
|
+
customControls ? /* @__PURE__ */ jsx122("div", { css: toolbarGroup, children: customControls }) : null
|
|
20443
20727
|
] });
|
|
20444
20728
|
};
|
|
20445
20729
|
var RichTextToolbar_default = RichTextToolbar;
|
|
@@ -20463,7 +20747,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
20463
20747
|
const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
|
|
20464
20748
|
(format) => !FORMATS_WITH_ICON.has(format.type)
|
|
20465
20749
|
);
|
|
20466
|
-
const [activeFormats, setActiveFormats] =
|
|
20750
|
+
const [activeFormats, setActiveFormats] = useState16([]);
|
|
20467
20751
|
const visibleFormatsWithIcon = useMemo4(() => {
|
|
20468
20752
|
const visibleFormats = /* @__PURE__ */ new Set();
|
|
20469
20753
|
activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
|
|
@@ -20484,7 +20768,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
20484
20768
|
});
|
|
20485
20769
|
return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
|
|
20486
20770
|
}, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
|
|
20487
|
-
const [activeElement, setActiveElement] =
|
|
20771
|
+
const [activeElement, setActiveElement] = useState16("paragraph");
|
|
20488
20772
|
const enabledTextualElements = enabledBuiltInElements.filter(
|
|
20489
20773
|
(element) => TEXTUAL_ELEMENTS.includes(element.type)
|
|
20490
20774
|
);
|
|
@@ -20499,7 +20783,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
20499
20783
|
}
|
|
20500
20784
|
);
|
|
20501
20785
|
}, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
|
|
20502
|
-
const [isLink, setIsLink] =
|
|
20786
|
+
const [isLink, setIsLink] = useState16(false);
|
|
20503
20787
|
const linkElementVisible = useMemo4(() => {
|
|
20504
20788
|
return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
|
|
20505
20789
|
}, [isLink, enabledBuiltInElements]);
|
|
@@ -20553,7 +20837,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
20553
20837
|
};
|
|
20554
20838
|
|
|
20555
20839
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
20556
|
-
import { Fragment as
|
|
20840
|
+
import { Fragment as Fragment20, jsx as jsx123, jsxs as jsxs82 } from "@emotion/react/jsx-runtime";
|
|
20557
20841
|
var ParameterRichText = ({
|
|
20558
20842
|
label,
|
|
20559
20843
|
labelLeadingIcon,
|
|
@@ -20578,7 +20862,7 @@ var ParameterRichText = ({
|
|
|
20578
20862
|
variables,
|
|
20579
20863
|
customControls
|
|
20580
20864
|
}) => {
|
|
20581
|
-
return /* @__PURE__ */
|
|
20865
|
+
return /* @__PURE__ */ jsxs82(
|
|
20582
20866
|
ParameterShell,
|
|
20583
20867
|
{
|
|
20584
20868
|
"data-testid": "parameter-richtext",
|
|
@@ -20592,7 +20876,7 @@ var ParameterRichText = ({
|
|
|
20592
20876
|
captionTestId,
|
|
20593
20877
|
menuItems,
|
|
20594
20878
|
children: [
|
|
20595
|
-
/* @__PURE__ */
|
|
20879
|
+
/* @__PURE__ */ jsx123(
|
|
20596
20880
|
ParameterRichTextInner,
|
|
20597
20881
|
{
|
|
20598
20882
|
value,
|
|
@@ -20610,23 +20894,23 @@ var ParameterRichText = ({
|
|
|
20610
20894
|
children
|
|
20611
20895
|
}
|
|
20612
20896
|
),
|
|
20613
|
-
menuItems ? /* @__PURE__ */
|
|
20897
|
+
menuItems ? /* @__PURE__ */ jsx123(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx123(Fragment20, { children: menuItems }) }) : null
|
|
20614
20898
|
]
|
|
20615
20899
|
}
|
|
20616
20900
|
);
|
|
20617
20901
|
};
|
|
20618
|
-
var editorWrapper =
|
|
20902
|
+
var editorWrapper = css93`
|
|
20619
20903
|
display: flex;
|
|
20620
20904
|
flex-flow: column;
|
|
20621
20905
|
flex-grow: 1;
|
|
20622
20906
|
`;
|
|
20623
|
-
var editorContainer =
|
|
20907
|
+
var editorContainer = css93`
|
|
20624
20908
|
display: flex;
|
|
20625
20909
|
flex-flow: column;
|
|
20626
20910
|
flex-grow: 1;
|
|
20627
20911
|
position: relative;
|
|
20628
20912
|
`;
|
|
20629
|
-
var editorPlaceholder =
|
|
20913
|
+
var editorPlaceholder = css93`
|
|
20630
20914
|
color: var(--gray-500);
|
|
20631
20915
|
font-style: italic;
|
|
20632
20916
|
/* 1px is added to make sure caret is clearly visible when field is focused
|
|
@@ -20637,7 +20921,7 @@ var editorPlaceholder = css89`
|
|
|
20637
20921
|
top: var(--spacing-sm);
|
|
20638
20922
|
user-select: none;
|
|
20639
20923
|
`;
|
|
20640
|
-
var editorInput =
|
|
20924
|
+
var editorInput = css93`
|
|
20641
20925
|
background: var(--white);
|
|
20642
20926
|
border: 1px solid var(--gray-200);
|
|
20643
20927
|
border-radius: var(--rounded-sm);
|
|
@@ -20721,8 +21005,8 @@ var ParameterRichTextInner = ({
|
|
|
20721
21005
|
},
|
|
20722
21006
|
editable: !readOnly
|
|
20723
21007
|
};
|
|
20724
|
-
return /* @__PURE__ */
|
|
20725
|
-
/* @__PURE__ */
|
|
21008
|
+
return /* @__PURE__ */ jsxs82(Fragment20, { children: [
|
|
21009
|
+
/* @__PURE__ */ jsx123("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx123(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx123(
|
|
20726
21010
|
RichText,
|
|
20727
21011
|
{
|
|
20728
21012
|
onChange,
|
|
@@ -20759,14 +21043,14 @@ var RichText = ({
|
|
|
20759
21043
|
variables,
|
|
20760
21044
|
customControls
|
|
20761
21045
|
}) => {
|
|
20762
|
-
const editorContainerRef =
|
|
21046
|
+
const editorContainerRef = useRef10(null);
|
|
20763
21047
|
const [editor] = useLexicalComposerContext5();
|
|
20764
|
-
|
|
21048
|
+
useEffect19(() => {
|
|
20765
21049
|
if (onRichTextInit) {
|
|
20766
21050
|
onRichTextInit(editor);
|
|
20767
21051
|
}
|
|
20768
21052
|
}, [editor, onRichTextInit]);
|
|
20769
|
-
|
|
21053
|
+
useEffect19(() => {
|
|
20770
21054
|
const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState }) => {
|
|
20771
21055
|
requestAnimationFrame(() => {
|
|
20772
21056
|
if (!deepEqual2(editorState.toJSON(), prevEditorState.toJSON())) {
|
|
@@ -20778,23 +21062,23 @@ var RichText = ({
|
|
|
20778
21062
|
removeUpdateListener();
|
|
20779
21063
|
};
|
|
20780
21064
|
}, [editor, onChange]);
|
|
20781
|
-
|
|
21065
|
+
useEffect19(() => {
|
|
20782
21066
|
editor.setEditable(!readOnly);
|
|
20783
21067
|
}, [editor, readOnly]);
|
|
20784
|
-
return /* @__PURE__ */
|
|
20785
|
-
readOnly ? null : /* @__PURE__ */
|
|
20786
|
-
/* @__PURE__ */
|
|
20787
|
-
/* @__PURE__ */
|
|
21068
|
+
return /* @__PURE__ */ jsxs82(Fragment20, { children: [
|
|
21069
|
+
readOnly ? null : /* @__PURE__ */ jsx123(RichTextToolbar_default, { config, customControls }),
|
|
21070
|
+
/* @__PURE__ */ jsxs82("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
|
|
21071
|
+
/* @__PURE__ */ jsx123(
|
|
20788
21072
|
RichTextPlugin,
|
|
20789
21073
|
{
|
|
20790
|
-
contentEditable: /* @__PURE__ */
|
|
20791
|
-
placeholder: /* @__PURE__ */
|
|
21074
|
+
contentEditable: /* @__PURE__ */ jsx123(ContentEditable, { css: editorInput, className: editorInputClassName }),
|
|
21075
|
+
placeholder: /* @__PURE__ */ jsx123("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
|
|
20792
21076
|
ErrorBoundary: LexicalErrorBoundary
|
|
20793
21077
|
}
|
|
20794
21078
|
),
|
|
20795
|
-
/* @__PURE__ */
|
|
20796
|
-
readOnly ? null : /* @__PURE__ */
|
|
20797
|
-
/* @__PURE__ */
|
|
21079
|
+
/* @__PURE__ */ jsx123(ListPlugin, {}),
|
|
21080
|
+
readOnly ? null : /* @__PURE__ */ jsx123(HistoryPlugin, {}),
|
|
21081
|
+
/* @__PURE__ */ jsx123(
|
|
20798
21082
|
LinkNodePlugin,
|
|
20799
21083
|
{
|
|
20800
21084
|
onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
|
|
@@ -20804,27 +21088,27 @@ var RichText = ({
|
|
|
20804
21088
|
} : void 0
|
|
20805
21089
|
}
|
|
20806
21090
|
),
|
|
20807
|
-
/* @__PURE__ */
|
|
20808
|
-
/* @__PURE__ */
|
|
20809
|
-
/* @__PURE__ */
|
|
20810
|
-
/* @__PURE__ */
|
|
21091
|
+
/* @__PURE__ */ jsx123(ListIndentPlugin, { maxDepth: 4 }),
|
|
21092
|
+
/* @__PURE__ */ jsx123(DisableStylesPlugin, {}),
|
|
21093
|
+
/* @__PURE__ */ jsx123(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
|
|
21094
|
+
/* @__PURE__ */ jsx123(Fragment20, { children })
|
|
20811
21095
|
] })
|
|
20812
21096
|
] });
|
|
20813
21097
|
};
|
|
20814
21098
|
|
|
20815
21099
|
// src/components/ParameterInputs/ParameterSelect.tsx
|
|
20816
21100
|
import { forwardRef as forwardRef21 } from "react";
|
|
20817
|
-
import { jsx as
|
|
21101
|
+
import { jsx as jsx124, jsxs as jsxs83 } from "@emotion/react/jsx-runtime";
|
|
20818
21102
|
var ParameterSelect = forwardRef21(
|
|
20819
21103
|
({ defaultOption, options, ...props }, ref) => {
|
|
20820
21104
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
20821
|
-
return /* @__PURE__ */
|
|
21105
|
+
return /* @__PURE__ */ jsx124(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx124(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
|
|
20822
21106
|
}
|
|
20823
21107
|
);
|
|
20824
21108
|
var ParameterSelectInner = forwardRef21(
|
|
20825
21109
|
({ defaultOption, options, ...props }, ref) => {
|
|
20826
21110
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
20827
|
-
return /* @__PURE__ */
|
|
21111
|
+
return /* @__PURE__ */ jsxs83(
|
|
20828
21112
|
"select",
|
|
20829
21113
|
{
|
|
20830
21114
|
css: [input3, selectInput],
|
|
@@ -20833,10 +21117,10 @@ var ParameterSelectInner = forwardRef21(
|
|
|
20833
21117
|
ref,
|
|
20834
21118
|
...props,
|
|
20835
21119
|
children: [
|
|
20836
|
-
defaultOption ? /* @__PURE__ */
|
|
21120
|
+
defaultOption ? /* @__PURE__ */ jsx124("option", { value: "", children: defaultOption }) : null,
|
|
20837
21121
|
options.map((option) => {
|
|
20838
21122
|
var _a;
|
|
20839
|
-
return /* @__PURE__ */
|
|
21123
|
+
return /* @__PURE__ */ jsx124("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
|
|
20840
21124
|
})
|
|
20841
21125
|
]
|
|
20842
21126
|
}
|
|
@@ -20846,14 +21130,14 @@ var ParameterSelectInner = forwardRef21(
|
|
|
20846
21130
|
|
|
20847
21131
|
// src/components/ParameterInputs/ParameterTextarea.tsx
|
|
20848
21132
|
import { forwardRef as forwardRef22 } from "react";
|
|
20849
|
-
import { jsx as
|
|
21133
|
+
import { jsx as jsx125 } from "@emotion/react/jsx-runtime";
|
|
20850
21134
|
var ParameterTextarea = forwardRef22((props, ref) => {
|
|
20851
21135
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
20852
|
-
return /* @__PURE__ */
|
|
21136
|
+
return /* @__PURE__ */ jsx125(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx125(ParameterTextareaInner, { ref, ...innerProps }) });
|
|
20853
21137
|
});
|
|
20854
21138
|
var ParameterTextareaInner = forwardRef22(({ ...props }, ref) => {
|
|
20855
21139
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
20856
|
-
return /* @__PURE__ */
|
|
21140
|
+
return /* @__PURE__ */ jsx125(
|
|
20857
21141
|
"textarea",
|
|
20858
21142
|
{
|
|
20859
21143
|
css: [input3, textarea2],
|
|
@@ -20867,25 +21151,25 @@ var ParameterTextareaInner = forwardRef22(({ ...props }, ref) => {
|
|
|
20867
21151
|
|
|
20868
21152
|
// src/components/ParameterInputs/ParameterToggle.tsx
|
|
20869
21153
|
import { forwardRef as forwardRef23 } from "react";
|
|
20870
|
-
import { jsx as
|
|
21154
|
+
import { jsx as jsx126, jsxs as jsxs84 } from "@emotion/react/jsx-runtime";
|
|
20871
21155
|
var ParameterToggle = forwardRef23((props, ref) => {
|
|
20872
21156
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
20873
|
-
return /* @__PURE__ */
|
|
21157
|
+
return /* @__PURE__ */ jsx126(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx126(ParameterToggleInner, { ref, ...innerProps }) });
|
|
20874
21158
|
});
|
|
20875
21159
|
var ParameterToggleInner = forwardRef23(
|
|
20876
21160
|
({ children, ...props }, ref) => {
|
|
20877
21161
|
const { id, label } = useParameterShell();
|
|
20878
|
-
return /* @__PURE__ */
|
|
20879
|
-
/* @__PURE__ */
|
|
20880
|
-
/* @__PURE__ */
|
|
21162
|
+
return /* @__PURE__ */ jsxs84("label", { css: inputToggleLabel2, children: [
|
|
21163
|
+
/* @__PURE__ */ jsx126("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
|
|
21164
|
+
/* @__PURE__ */ jsx126("span", { css: inlineLabel2, children: label }),
|
|
20881
21165
|
children
|
|
20882
21166
|
] });
|
|
20883
21167
|
}
|
|
20884
21168
|
);
|
|
20885
21169
|
|
|
20886
21170
|
// src/components/ProgressBar/ProgressBar.styles.ts
|
|
20887
|
-
import { css as
|
|
20888
|
-
var container3 =
|
|
21171
|
+
import { css as css94, keyframes as keyframes4 } from "@emotion/react";
|
|
21172
|
+
var container3 = css94`
|
|
20889
21173
|
background: var(--gray-50);
|
|
20890
21174
|
margin-block: var(--spacing-sm);
|
|
20891
21175
|
position: relative;
|
|
@@ -20895,13 +21179,13 @@ var container3 = css90`
|
|
|
20895
21179
|
border: solid 1px var(--gray-300);
|
|
20896
21180
|
`;
|
|
20897
21181
|
var themeMap = {
|
|
20898
|
-
primary:
|
|
21182
|
+
primary: css94`
|
|
20899
21183
|
--progress-color: var(--accent-light);
|
|
20900
21184
|
`,
|
|
20901
|
-
secondary:
|
|
21185
|
+
secondary: css94`
|
|
20902
21186
|
--progress-color: var(--accent-alt-light);
|
|
20903
21187
|
`,
|
|
20904
|
-
destructive:
|
|
21188
|
+
destructive: css94`
|
|
20905
21189
|
--progress-color: var(--brand-secondary-5);
|
|
20906
21190
|
`
|
|
20907
21191
|
};
|
|
@@ -20913,10 +21197,10 @@ var slidingBackgroundPosition = keyframes4`
|
|
|
20913
21197
|
background-position: 64px 0;
|
|
20914
21198
|
}
|
|
20915
21199
|
`;
|
|
20916
|
-
var determinate =
|
|
21200
|
+
var determinate = css94`
|
|
20917
21201
|
background-color: var(--progress-color);
|
|
20918
21202
|
`;
|
|
20919
|
-
var indeterminate =
|
|
21203
|
+
var indeterminate = css94`
|
|
20920
21204
|
background-image: linear-gradient(
|
|
20921
21205
|
45deg,
|
|
20922
21206
|
var(--progress-color) 25%,
|
|
@@ -20930,7 +21214,7 @@ var indeterminate = css90`
|
|
|
20930
21214
|
background-size: 64px 64px;
|
|
20931
21215
|
animation: ${slidingBackgroundPosition} 1s linear infinite;
|
|
20932
21216
|
`;
|
|
20933
|
-
var bar =
|
|
21217
|
+
var bar = css94`
|
|
20934
21218
|
position: absolute;
|
|
20935
21219
|
inset: 0;
|
|
20936
21220
|
transition: transform var(--duration-fast) var(--timing-ease-out);
|
|
@@ -20938,7 +21222,7 @@ var bar = css90`
|
|
|
20938
21222
|
`;
|
|
20939
21223
|
|
|
20940
21224
|
// src/components/ProgressBar/ProgressBar.tsx
|
|
20941
|
-
import { jsx as
|
|
21225
|
+
import { jsx as jsx127 } from "@emotion/react/jsx-runtime";
|
|
20942
21226
|
function ProgressBar({
|
|
20943
21227
|
current,
|
|
20944
21228
|
max,
|
|
@@ -20948,7 +21232,7 @@ function ProgressBar({
|
|
|
20948
21232
|
}) {
|
|
20949
21233
|
const valueNow = Math.min(current, max);
|
|
20950
21234
|
const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
|
|
20951
|
-
return /* @__PURE__ */
|
|
21235
|
+
return /* @__PURE__ */ jsx127(
|
|
20952
21236
|
"div",
|
|
20953
21237
|
{
|
|
20954
21238
|
css: container3,
|
|
@@ -20959,7 +21243,7 @@ function ProgressBar({
|
|
|
20959
21243
|
"aria-valuemax": max,
|
|
20960
21244
|
"aria-valuenow": valueNow,
|
|
20961
21245
|
...props,
|
|
20962
|
-
children: /* @__PURE__ */
|
|
21246
|
+
children: /* @__PURE__ */ jsx127(
|
|
20963
21247
|
"div",
|
|
20964
21248
|
{
|
|
20965
21249
|
css: [
|
|
@@ -20978,28 +21262,28 @@ function ProgressBar({
|
|
|
20978
21262
|
}
|
|
20979
21263
|
|
|
20980
21264
|
// src/components/ProgressList/ProgressList.tsx
|
|
20981
|
-
import { css as
|
|
21265
|
+
import { css as css96 } from "@emotion/react";
|
|
20982
21266
|
import { CgCheckO as CgCheckO2 } from "@react-icons/all-files/cg/CgCheckO";
|
|
20983
21267
|
import { CgRadioCheck } from "@react-icons/all-files/cg/CgRadioCheck";
|
|
20984
21268
|
import { CgRecord } from "@react-icons/all-files/cg/CgRecord";
|
|
20985
21269
|
import { useMemo as useMemo5 } from "react";
|
|
20986
21270
|
|
|
20987
21271
|
// src/components/ProgressList/styles/ProgressList.styles.ts
|
|
20988
|
-
import { css as
|
|
20989
|
-
var progressListStyles =
|
|
21272
|
+
import { css as css95 } from "@emotion/react";
|
|
21273
|
+
var progressListStyles = css95`
|
|
20990
21274
|
display: flex;
|
|
20991
21275
|
flex-direction: column;
|
|
20992
21276
|
gap: var(--spacing-sm);
|
|
20993
21277
|
list-style-type: none;
|
|
20994
21278
|
`;
|
|
20995
|
-
var progressListItemStyles =
|
|
21279
|
+
var progressListItemStyles = css95`
|
|
20996
21280
|
display: flex;
|
|
20997
21281
|
gap: var(--spacing-base);
|
|
20998
21282
|
align-items: center;
|
|
20999
21283
|
`;
|
|
21000
21284
|
|
|
21001
21285
|
// src/components/ProgressList/ProgressList.tsx
|
|
21002
|
-
import { jsx as
|
|
21286
|
+
import { jsx as jsx128, jsxs as jsxs85 } from "@emotion/react/jsx-runtime";
|
|
21003
21287
|
var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
21004
21288
|
const itemsWithStatus = useMemo5(() => {
|
|
21005
21289
|
const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
|
|
@@ -21013,8 +21297,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
|
21013
21297
|
return { ...item, status };
|
|
21014
21298
|
});
|
|
21015
21299
|
}, [items, inProgressId]);
|
|
21016
|
-
return /* @__PURE__ */
|
|
21017
|
-
return /* @__PURE__ */
|
|
21300
|
+
return /* @__PURE__ */ jsx128("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
|
|
21301
|
+
return /* @__PURE__ */ jsx128(
|
|
21018
21302
|
ProgressListItem,
|
|
21019
21303
|
{
|
|
21020
21304
|
status,
|
|
@@ -21047,12 +21331,12 @@ var ProgressListItem = ({
|
|
|
21047
21331
|
}, [status, error]);
|
|
21048
21332
|
const statusStyles = useMemo5(() => {
|
|
21049
21333
|
if (error) {
|
|
21050
|
-
return errorLevel === "caution" ?
|
|
21334
|
+
return errorLevel === "caution" ? css96`
|
|
21051
21335
|
color: rgb(161, 98, 7);
|
|
21052
21336
|
& svg {
|
|
21053
21337
|
color: rgb(250, 204, 21);
|
|
21054
21338
|
}
|
|
21055
|
-
` :
|
|
21339
|
+
` : css96`
|
|
21056
21340
|
color: rgb(185, 28, 28);
|
|
21057
21341
|
& svg {
|
|
21058
21342
|
color: var(--brand-primary-2);
|
|
@@ -21060,38 +21344,38 @@ var ProgressListItem = ({
|
|
|
21060
21344
|
`;
|
|
21061
21345
|
}
|
|
21062
21346
|
const colorPerStatus = {
|
|
21063
|
-
completed:
|
|
21347
|
+
completed: css96`
|
|
21064
21348
|
opacity: 0.75;
|
|
21065
21349
|
`,
|
|
21066
|
-
inProgress:
|
|
21350
|
+
inProgress: css96`
|
|
21067
21351
|
-webkit-text-stroke-width: thin;
|
|
21068
21352
|
`,
|
|
21069
|
-
queued:
|
|
21353
|
+
queued: css96`
|
|
21070
21354
|
opacity: 0.5;
|
|
21071
21355
|
`
|
|
21072
21356
|
};
|
|
21073
21357
|
return colorPerStatus[status];
|
|
21074
21358
|
}, [status, error, errorLevel]);
|
|
21075
|
-
return /* @__PURE__ */
|
|
21076
|
-
/* @__PURE__ */
|
|
21077
|
-
/* @__PURE__ */
|
|
21359
|
+
return /* @__PURE__ */ jsxs85("li", { css: [progressListItemStyles, statusStyles], children: [
|
|
21360
|
+
/* @__PURE__ */ jsx128(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx128("div", { children: /* @__PURE__ */ jsx128(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
|
|
21361
|
+
/* @__PURE__ */ jsxs85("div", { children: [
|
|
21078
21362
|
children,
|
|
21079
|
-
/* @__PURE__ */
|
|
21363
|
+
/* @__PURE__ */ jsx128("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
|
|
21080
21364
|
] })
|
|
21081
21365
|
] });
|
|
21082
21366
|
};
|
|
21083
21367
|
|
|
21084
21368
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
21085
|
-
import { css as
|
|
21369
|
+
import { css as css98 } from "@emotion/react";
|
|
21086
21370
|
import { CgCheck as CgCheck5 } from "@react-icons/all-files/cg/CgCheck";
|
|
21087
|
-
import { useCallback as useCallback11, useEffect as
|
|
21371
|
+
import { useCallback as useCallback11, useEffect as useEffect20, useMemo as useMemo6, useRef as useRef11, useState as useState17 } from "react";
|
|
21088
21372
|
|
|
21089
21373
|
// src/components/SegmentedControl/SegmentedControl.styles.ts
|
|
21090
|
-
import { css as
|
|
21091
|
-
var segmentedControlRootStyles =
|
|
21374
|
+
import { css as css97 } from "@emotion/react";
|
|
21375
|
+
var segmentedControlRootStyles = css97`
|
|
21092
21376
|
position: relative;
|
|
21093
21377
|
`;
|
|
21094
|
-
var segmentedControlScrollIndicatorsStyles =
|
|
21378
|
+
var segmentedControlScrollIndicatorsStyles = css97`
|
|
21095
21379
|
position: absolute;
|
|
21096
21380
|
inset: 0;
|
|
21097
21381
|
z-index: 1;
|
|
@@ -21119,17 +21403,17 @@ var segmentedControlScrollIndicatorsStyles = css93`
|
|
|
21119
21403
|
background: linear-gradient(to left, var(--background-color) 10%, transparent);
|
|
21120
21404
|
}
|
|
21121
21405
|
`;
|
|
21122
|
-
var segmentedControlScrollIndicatorStartVisibleStyles =
|
|
21406
|
+
var segmentedControlScrollIndicatorStartVisibleStyles = css97`
|
|
21123
21407
|
&::before {
|
|
21124
21408
|
opacity: 1;
|
|
21125
21409
|
}
|
|
21126
21410
|
`;
|
|
21127
|
-
var segmentedControlScrollIndicatorEndVisibleStyles =
|
|
21411
|
+
var segmentedControlScrollIndicatorEndVisibleStyles = css97`
|
|
21128
21412
|
&::after {
|
|
21129
21413
|
opacity: 1;
|
|
21130
21414
|
}
|
|
21131
21415
|
`;
|
|
21132
|
-
var segmentedControlWrapperStyles =
|
|
21416
|
+
var segmentedControlWrapperStyles = css97`
|
|
21133
21417
|
overflow-y: auto;
|
|
21134
21418
|
scroll-behavior: smooth;
|
|
21135
21419
|
scrollbar-width: none;
|
|
@@ -21138,7 +21422,7 @@ var segmentedControlWrapperStyles = css93`
|
|
|
21138
21422
|
height: 0px;
|
|
21139
21423
|
}
|
|
21140
21424
|
`;
|
|
21141
|
-
var segmentedControlStyles =
|
|
21425
|
+
var segmentedControlStyles = css97`
|
|
21142
21426
|
--segmented-control-rounded-value: var(--rounded-base);
|
|
21143
21427
|
--segmented-control-border-width: 1px;
|
|
21144
21428
|
--segmented-control-selected-color: var(--brand-secondary-3);
|
|
@@ -21157,14 +21441,14 @@ var segmentedControlStyles = css93`
|
|
|
21157
21441
|
border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
|
|
21158
21442
|
font-size: var(--fs-xs);
|
|
21159
21443
|
`;
|
|
21160
|
-
var segmentedControlVerticalStyles =
|
|
21444
|
+
var segmentedControlVerticalStyles = css97`
|
|
21161
21445
|
flex-direction: column;
|
|
21162
21446
|
--segmented-control-first-border-radius: var(--segmented-control-rounded-value)
|
|
21163
21447
|
var(--segmented-control-rounded-value) 0 0;
|
|
21164
21448
|
--segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
|
|
21165
21449
|
var(--segmented-control-rounded-value);
|
|
21166
21450
|
`;
|
|
21167
|
-
var segmentedControlItemStyles =
|
|
21451
|
+
var segmentedControlItemStyles = css97`
|
|
21168
21452
|
&:first-of-type label {
|
|
21169
21453
|
border-radius: var(--segmented-control-first-border-radius);
|
|
21170
21454
|
}
|
|
@@ -21172,10 +21456,10 @@ var segmentedControlItemStyles = css93`
|
|
|
21172
21456
|
border-radius: var(--segmented-control-last-border-radius);
|
|
21173
21457
|
}
|
|
21174
21458
|
`;
|
|
21175
|
-
var segmentedControlInputStyles =
|
|
21459
|
+
var segmentedControlInputStyles = css97`
|
|
21176
21460
|
${accessibleHidden}
|
|
21177
21461
|
`;
|
|
21178
|
-
var segmentedControlLabelStyles = (checked, disabled2) =>
|
|
21462
|
+
var segmentedControlLabelStyles = (checked, disabled2) => css97`
|
|
21179
21463
|
position: relative;
|
|
21180
21464
|
display: flex;
|
|
21181
21465
|
align-items: center;
|
|
@@ -21242,25 +21526,25 @@ var segmentedControlLabelStyles = (checked, disabled2) => css93`
|
|
|
21242
21526
|
`}
|
|
21243
21527
|
}
|
|
21244
21528
|
`;
|
|
21245
|
-
var segmentedControlLabelIconOnlyStyles =
|
|
21529
|
+
var segmentedControlLabelIconOnlyStyles = css97`
|
|
21246
21530
|
padding-inline: 0.5em;
|
|
21247
21531
|
`;
|
|
21248
|
-
var segmentedControlLabelCheckStyles =
|
|
21532
|
+
var segmentedControlLabelCheckStyles = css97`
|
|
21249
21533
|
opacity: 0.5;
|
|
21250
21534
|
`;
|
|
21251
|
-
var segmentedControlLabelContentStyles =
|
|
21535
|
+
var segmentedControlLabelContentStyles = css97`
|
|
21252
21536
|
display: flex;
|
|
21253
21537
|
align-items: center;
|
|
21254
21538
|
justify-content: center;
|
|
21255
21539
|
gap: var(--spacing-sm);
|
|
21256
21540
|
height: 100%;
|
|
21257
21541
|
`;
|
|
21258
|
-
var segmentedControlLabelTextStyles =
|
|
21542
|
+
var segmentedControlLabelTextStyles = css97`
|
|
21259
21543
|
white-space: nowrap;
|
|
21260
21544
|
`;
|
|
21261
21545
|
|
|
21262
21546
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
21263
|
-
import { jsx as
|
|
21547
|
+
import { jsx as jsx129, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
|
|
21264
21548
|
var SegmentedControl = ({
|
|
21265
21549
|
name,
|
|
21266
21550
|
options,
|
|
@@ -21275,9 +21559,9 @@ var SegmentedControl = ({
|
|
|
21275
21559
|
currentBackgroundColor = "white",
|
|
21276
21560
|
...props
|
|
21277
21561
|
}) => {
|
|
21278
|
-
const wrapperRef =
|
|
21279
|
-
const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] =
|
|
21280
|
-
const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] =
|
|
21562
|
+
const wrapperRef = useRef11(null);
|
|
21563
|
+
const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = useState17(false);
|
|
21564
|
+
const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = useState17(false);
|
|
21281
21565
|
const onOptionChange = useCallback11(
|
|
21282
21566
|
(event) => {
|
|
21283
21567
|
if (event.target.checked) {
|
|
@@ -21288,17 +21572,17 @@ var SegmentedControl = ({
|
|
|
21288
21572
|
);
|
|
21289
21573
|
const sizeStyles = useMemo6(() => {
|
|
21290
21574
|
const map = {
|
|
21291
|
-
sm:
|
|
21292
|
-
md:
|
|
21293
|
-
lg:
|
|
21294
|
-
xl:
|
|
21575
|
+
sm: css98({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
|
|
21576
|
+
md: css98({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
|
|
21577
|
+
lg: css98({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
|
|
21578
|
+
xl: css98({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
|
|
21295
21579
|
};
|
|
21296
21580
|
return map[size];
|
|
21297
21581
|
}, [size]);
|
|
21298
21582
|
const isIconOnly = useMemo6(() => {
|
|
21299
21583
|
return options.every((option) => option && option.icon && !option.label);
|
|
21300
21584
|
}, [options]);
|
|
21301
|
-
|
|
21585
|
+
useEffect20(() => {
|
|
21302
21586
|
const wrapperElement = wrapperRef.current;
|
|
21303
21587
|
const onScroll = () => {
|
|
21304
21588
|
if (!wrapperElement) {
|
|
@@ -21319,8 +21603,8 @@ var SegmentedControl = ({
|
|
|
21319
21603
|
wrapperElement == null ? void 0 : wrapperElement.removeEventListener("scroll", onScroll);
|
|
21320
21604
|
};
|
|
21321
21605
|
}, []);
|
|
21322
|
-
return /* @__PURE__ */
|
|
21323
|
-
/* @__PURE__ */
|
|
21606
|
+
return /* @__PURE__ */ jsxs86("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
|
|
21607
|
+
/* @__PURE__ */ jsx129("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ jsx129(
|
|
21324
21608
|
"div",
|
|
21325
21609
|
{
|
|
21326
21610
|
css: [
|
|
@@ -21336,12 +21620,12 @@ var SegmentedControl = ({
|
|
|
21336
21620
|
}
|
|
21337
21621
|
const text = option.label ? option.label : option.icon ? null : String(option.value);
|
|
21338
21622
|
const isDisabled = disabled2 || option.disabled;
|
|
21339
|
-
return /* @__PURE__ */
|
|
21623
|
+
return /* @__PURE__ */ jsx129(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx129(
|
|
21340
21624
|
"div",
|
|
21341
21625
|
{
|
|
21342
21626
|
css: segmentedControlItemStyles,
|
|
21343
21627
|
"data-testid": option["data-testid"] ? option["data-testid"] : "container-segmented-control",
|
|
21344
|
-
children: /* @__PURE__ */
|
|
21628
|
+
children: /* @__PURE__ */ jsxs86(
|
|
21345
21629
|
"label",
|
|
21346
21630
|
{
|
|
21347
21631
|
css: [
|
|
@@ -21350,7 +21634,7 @@ var SegmentedControl = ({
|
|
|
21350
21634
|
isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
|
|
21351
21635
|
],
|
|
21352
21636
|
children: [
|
|
21353
|
-
/* @__PURE__ */
|
|
21637
|
+
/* @__PURE__ */ jsx129(
|
|
21354
21638
|
"input",
|
|
21355
21639
|
{
|
|
21356
21640
|
css: segmentedControlInputStyles,
|
|
@@ -21362,10 +21646,10 @@ var SegmentedControl = ({
|
|
|
21362
21646
|
disabled: isDisabled
|
|
21363
21647
|
}
|
|
21364
21648
|
),
|
|
21365
|
-
option.value !== value || noCheckmark ? null : /* @__PURE__ */
|
|
21366
|
-
/* @__PURE__ */
|
|
21367
|
-
!option.icon ? null : /* @__PURE__ */
|
|
21368
|
-
!text || hideOptionText ? null : /* @__PURE__ */
|
|
21649
|
+
option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx129(CgCheck5, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
|
|
21650
|
+
/* @__PURE__ */ jsxs86("span", { css: segmentedControlLabelContentStyles, children: [
|
|
21651
|
+
!option.icon ? null : /* @__PURE__ */ jsx129(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
|
|
21652
|
+
!text || hideOptionText ? null : /* @__PURE__ */ jsx129("span", { css: segmentedControlLabelTextStyles, children: text })
|
|
21369
21653
|
] })
|
|
21370
21654
|
]
|
|
21371
21655
|
}
|
|
@@ -21375,7 +21659,7 @@ var SegmentedControl = ({
|
|
|
21375
21659
|
})
|
|
21376
21660
|
}
|
|
21377
21661
|
) }),
|
|
21378
|
-
/* @__PURE__ */
|
|
21662
|
+
/* @__PURE__ */ jsx129(
|
|
21379
21663
|
"div",
|
|
21380
21664
|
{
|
|
21381
21665
|
css: [
|
|
@@ -21389,18 +21673,18 @@ var SegmentedControl = ({
|
|
|
21389
21673
|
};
|
|
21390
21674
|
|
|
21391
21675
|
// src/components/Skeleton/Skeleton.styles.ts
|
|
21392
|
-
import { css as
|
|
21676
|
+
import { css as css99, keyframes as keyframes5 } from "@emotion/react";
|
|
21393
21677
|
var lightFadingOut = keyframes5`
|
|
21394
21678
|
from { opacity: 0.1; }
|
|
21395
21679
|
to { opacity: 0.025; }
|
|
21396
21680
|
`;
|
|
21397
|
-
var skeletonStyles =
|
|
21681
|
+
var skeletonStyles = css99`
|
|
21398
21682
|
animation: ${lightFadingOut} 1s ease-out infinite alternate;
|
|
21399
21683
|
background-color: var(--gray-900);
|
|
21400
21684
|
`;
|
|
21401
21685
|
|
|
21402
21686
|
// src/components/Skeleton/Skeleton.tsx
|
|
21403
|
-
import { jsx as
|
|
21687
|
+
import { jsx as jsx130 } from "@emotion/react/jsx-runtime";
|
|
21404
21688
|
var Skeleton = ({
|
|
21405
21689
|
width = "100%",
|
|
21406
21690
|
height = "1.25rem",
|
|
@@ -21408,7 +21692,7 @@ var Skeleton = ({
|
|
|
21408
21692
|
circle = false,
|
|
21409
21693
|
children,
|
|
21410
21694
|
...otherProps
|
|
21411
|
-
}) => /* @__PURE__ */
|
|
21695
|
+
}) => /* @__PURE__ */ jsx130(
|
|
21412
21696
|
"div",
|
|
21413
21697
|
{
|
|
21414
21698
|
css: [
|
|
@@ -21431,8 +21715,8 @@ var Skeleton = ({
|
|
|
21431
21715
|
import * as React24 from "react";
|
|
21432
21716
|
|
|
21433
21717
|
// src/components/Switch/Switch.styles.ts
|
|
21434
|
-
import { css as
|
|
21435
|
-
var SwitchInputContainer =
|
|
21718
|
+
import { css as css100 } from "@emotion/react";
|
|
21719
|
+
var SwitchInputContainer = css100`
|
|
21436
21720
|
cursor: pointer;
|
|
21437
21721
|
display: inline-block;
|
|
21438
21722
|
position: relative;
|
|
@@ -21441,7 +21725,7 @@ var SwitchInputContainer = css96`
|
|
|
21441
21725
|
vertical-align: middle;
|
|
21442
21726
|
user-select: none;
|
|
21443
21727
|
`;
|
|
21444
|
-
var SwitchInput =
|
|
21728
|
+
var SwitchInput = css100`
|
|
21445
21729
|
appearance: none;
|
|
21446
21730
|
border-radius: var(--rounded-full);
|
|
21447
21731
|
background-color: var(--white);
|
|
@@ -21479,7 +21763,7 @@ var SwitchInput = css96`
|
|
|
21479
21763
|
cursor: not-allowed;
|
|
21480
21764
|
}
|
|
21481
21765
|
`;
|
|
21482
|
-
var SwitchInputDisabled =
|
|
21766
|
+
var SwitchInputDisabled = css100`
|
|
21483
21767
|
opacity: var(--opacity-50);
|
|
21484
21768
|
cursor: not-allowed;
|
|
21485
21769
|
|
|
@@ -21487,7 +21771,7 @@ var SwitchInputDisabled = css96`
|
|
|
21487
21771
|
cursor: not-allowed;
|
|
21488
21772
|
}
|
|
21489
21773
|
`;
|
|
21490
|
-
var SwitchInputLabel =
|
|
21774
|
+
var SwitchInputLabel = css100`
|
|
21491
21775
|
align-items: center;
|
|
21492
21776
|
color: var(--typography-base);
|
|
21493
21777
|
display: inline-flex;
|
|
@@ -21508,26 +21792,26 @@ var SwitchInputLabel = css96`
|
|
|
21508
21792
|
top: 0;
|
|
21509
21793
|
}
|
|
21510
21794
|
`;
|
|
21511
|
-
var SwitchText =
|
|
21795
|
+
var SwitchText = css100`
|
|
21512
21796
|
color: var(--gray-500);
|
|
21513
21797
|
font-size: var(--fs-sm);
|
|
21514
21798
|
padding-inline: var(--spacing-2xl) 0;
|
|
21515
21799
|
`;
|
|
21516
21800
|
|
|
21517
21801
|
// src/components/Switch/Switch.tsx
|
|
21518
|
-
import { Fragment as
|
|
21802
|
+
import { Fragment as Fragment21, jsx as jsx131, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
|
|
21519
21803
|
var Switch = React24.forwardRef(
|
|
21520
21804
|
({ label, infoText, toggleText, children, ...inputProps }, ref) => {
|
|
21521
21805
|
let additionalText = infoText;
|
|
21522
21806
|
if (infoText && toggleText) {
|
|
21523
21807
|
additionalText = inputProps.checked ? toggleText : infoText;
|
|
21524
21808
|
}
|
|
21525
|
-
return /* @__PURE__ */
|
|
21526
|
-
/* @__PURE__ */
|
|
21527
|
-
/* @__PURE__ */
|
|
21528
|
-
/* @__PURE__ */
|
|
21809
|
+
return /* @__PURE__ */ jsxs87(Fragment21, { children: [
|
|
21810
|
+
/* @__PURE__ */ jsxs87("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
|
|
21811
|
+
/* @__PURE__ */ jsx131("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
|
|
21812
|
+
/* @__PURE__ */ jsx131("span", { css: SwitchInputLabel, children: label })
|
|
21529
21813
|
] }),
|
|
21530
|
-
additionalText ? /* @__PURE__ */
|
|
21814
|
+
additionalText ? /* @__PURE__ */ jsx131("p", { css: SwitchText, children: additionalText }) : null,
|
|
21531
21815
|
children
|
|
21532
21816
|
] });
|
|
21533
21817
|
}
|
|
@@ -21537,67 +21821,75 @@ var Switch = React24.forwardRef(
|
|
|
21537
21821
|
import * as React25 from "react";
|
|
21538
21822
|
|
|
21539
21823
|
// src/components/Table/Table.styles.ts
|
|
21540
|
-
import { css as
|
|
21541
|
-
var table = ({ cellPadding = "var(--spacing-
|
|
21824
|
+
import { css as css101 } from "@emotion/react";
|
|
21825
|
+
var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => css101`
|
|
21542
21826
|
border-bottom: 1px solid var(--gray-400);
|
|
21543
21827
|
border-collapse: collapse;
|
|
21544
21828
|
min-width: 100%;
|
|
21545
21829
|
table-layout: auto;
|
|
21830
|
+
transition: background-color var(--duration-fast) var(--timing-ease-out);
|
|
21546
21831
|
|
|
21547
21832
|
th,
|
|
21548
21833
|
td {
|
|
21549
21834
|
padding: ${cellPadding};
|
|
21550
21835
|
}
|
|
21836
|
+
|
|
21837
|
+
thead tr {
|
|
21838
|
+
border-color: var(--gray-300);
|
|
21839
|
+
}
|
|
21840
|
+
|
|
21841
|
+
tbody tr:hover {
|
|
21842
|
+
background-color: var(--gray-50);
|
|
21843
|
+
}
|
|
21551
21844
|
`;
|
|
21552
|
-
var tableHead =
|
|
21553
|
-
background: var(--gray-100);
|
|
21845
|
+
var tableHead = css101`
|
|
21554
21846
|
color: var(--typography-base);
|
|
21555
21847
|
text-align: left;
|
|
21556
21848
|
`;
|
|
21557
|
-
var tableRow =
|
|
21558
|
-
border-bottom: 1px solid var(--gray-
|
|
21849
|
+
var tableRow = css101`
|
|
21850
|
+
border-bottom: 1px solid var(--gray-100);
|
|
21559
21851
|
`;
|
|
21560
|
-
var tableCellHead =
|
|
21852
|
+
var tableCellHead = css101`
|
|
21561
21853
|
font-size: var(--fs-sm);
|
|
21562
21854
|
text-transform: uppercase;
|
|
21563
21855
|
font-weight: var(--fw-bold);
|
|
21564
21856
|
`;
|
|
21565
21857
|
|
|
21566
21858
|
// src/components/Table/Table.tsx
|
|
21567
|
-
import { jsx as
|
|
21859
|
+
import { jsx as jsx132 } from "@emotion/react/jsx-runtime";
|
|
21568
21860
|
var Table = React25.forwardRef(
|
|
21569
21861
|
({ children, cellPadding, ...otherProps }, ref) => {
|
|
21570
|
-
return /* @__PURE__ */
|
|
21862
|
+
return /* @__PURE__ */ jsx132("table", { ref, css: table({ cellPadding }), ...otherProps, children });
|
|
21571
21863
|
}
|
|
21572
21864
|
);
|
|
21573
21865
|
var TableHead = React25.forwardRef(
|
|
21574
21866
|
({ children, ...otherProps }, ref) => {
|
|
21575
|
-
return /* @__PURE__ */
|
|
21867
|
+
return /* @__PURE__ */ jsx132("thead", { ref, css: tableHead, ...otherProps, children });
|
|
21576
21868
|
}
|
|
21577
21869
|
);
|
|
21578
21870
|
var TableBody = React25.forwardRef(
|
|
21579
21871
|
({ children, ...otherProps }, ref) => {
|
|
21580
|
-
return /* @__PURE__ */
|
|
21872
|
+
return /* @__PURE__ */ jsx132("tbody", { ref, ...otherProps, children });
|
|
21581
21873
|
}
|
|
21582
21874
|
);
|
|
21583
21875
|
var TableFoot = React25.forwardRef(
|
|
21584
21876
|
({ children, ...otherProps }, ref) => {
|
|
21585
|
-
return /* @__PURE__ */
|
|
21877
|
+
return /* @__PURE__ */ jsx132("tfoot", { ref, ...otherProps, children });
|
|
21586
21878
|
}
|
|
21587
21879
|
);
|
|
21588
21880
|
var TableRow = React25.forwardRef(
|
|
21589
21881
|
({ children, ...otherProps }, ref) => {
|
|
21590
|
-
return /* @__PURE__ */
|
|
21882
|
+
return /* @__PURE__ */ jsx132("tr", { ref, css: tableRow, ...otherProps, children });
|
|
21591
21883
|
}
|
|
21592
21884
|
);
|
|
21593
21885
|
var TableCellHead = React25.forwardRef(
|
|
21594
21886
|
({ children, ...otherProps }, ref) => {
|
|
21595
|
-
return /* @__PURE__ */
|
|
21887
|
+
return /* @__PURE__ */ jsx132("th", { ref, css: tableCellHead, ...otherProps, children });
|
|
21596
21888
|
}
|
|
21597
21889
|
);
|
|
21598
21890
|
var TableCellData = React25.forwardRef(
|
|
21599
21891
|
({ children, ...otherProps }, ref) => {
|
|
21600
|
-
return /* @__PURE__ */
|
|
21892
|
+
return /* @__PURE__ */ jsx132("td", { ref, ...otherProps, children });
|
|
21601
21893
|
}
|
|
21602
21894
|
);
|
|
21603
21895
|
|
|
@@ -21609,11 +21901,11 @@ import {
|
|
|
21609
21901
|
TabProvider as AriakitTabProvider,
|
|
21610
21902
|
useTabStore as useAriakitTabStore
|
|
21611
21903
|
} from "@ariakit/react";
|
|
21612
|
-
import { useCallback as useCallback12, useEffect as
|
|
21904
|
+
import { useCallback as useCallback12, useEffect as useEffect21, useMemo as useMemo7 } from "react";
|
|
21613
21905
|
|
|
21614
21906
|
// src/components/Tabs/Tabs.styles.ts
|
|
21615
|
-
import { css as
|
|
21616
|
-
var tabButtonStyles =
|
|
21907
|
+
import { css as css102 } from "@emotion/react";
|
|
21908
|
+
var tabButtonStyles = css102`
|
|
21617
21909
|
align-items: center;
|
|
21618
21910
|
border: 0;
|
|
21619
21911
|
height: 2.5rem;
|
|
@@ -21630,14 +21922,14 @@ var tabButtonStyles = css98`
|
|
|
21630
21922
|
box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
|
|
21631
21923
|
}
|
|
21632
21924
|
`;
|
|
21633
|
-
var tabButtonGroupStyles =
|
|
21925
|
+
var tabButtonGroupStyles = css102`
|
|
21634
21926
|
display: flex;
|
|
21635
21927
|
gap: var(--spacing-base);
|
|
21636
21928
|
border-bottom: 1px solid var(--gray-300);
|
|
21637
21929
|
`;
|
|
21638
21930
|
|
|
21639
21931
|
// src/components/Tabs/Tabs.tsx
|
|
21640
|
-
import { jsx as
|
|
21932
|
+
import { jsx as jsx133 } from "@emotion/react/jsx-runtime";
|
|
21641
21933
|
var useCurrentTab = () => {
|
|
21642
21934
|
const context = useAriakitTabStore();
|
|
21643
21935
|
if (!context) {
|
|
@@ -21670,33 +21962,33 @@ var Tabs = ({
|
|
|
21670
21962
|
},
|
|
21671
21963
|
[onSelectedIdChange, useHashForState]
|
|
21672
21964
|
);
|
|
21673
|
-
|
|
21965
|
+
useEffect21(() => {
|
|
21674
21966
|
if (selected && selected !== tab.getState().activeId) {
|
|
21675
21967
|
tab.setSelectedId(selected);
|
|
21676
21968
|
}
|
|
21677
21969
|
}, [selected, tab]);
|
|
21678
|
-
return /* @__PURE__ */
|
|
21970
|
+
return /* @__PURE__ */ jsx133(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
|
|
21679
21971
|
};
|
|
21680
21972
|
var TabButtonGroup = ({ children, ...props }) => {
|
|
21681
|
-
return /* @__PURE__ */
|
|
21973
|
+
return /* @__PURE__ */ jsx133(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
|
|
21682
21974
|
};
|
|
21683
21975
|
var TabButton = ({
|
|
21684
21976
|
children,
|
|
21685
21977
|
id,
|
|
21686
21978
|
...props
|
|
21687
21979
|
}) => {
|
|
21688
|
-
return /* @__PURE__ */
|
|
21980
|
+
return /* @__PURE__ */ jsx133(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
|
|
21689
21981
|
};
|
|
21690
21982
|
var TabContent = ({
|
|
21691
21983
|
children,
|
|
21692
21984
|
...props
|
|
21693
21985
|
}) => {
|
|
21694
|
-
return /* @__PURE__ */
|
|
21986
|
+
return /* @__PURE__ */ jsx133(AriakitTabPanel, { ...props, children });
|
|
21695
21987
|
};
|
|
21696
21988
|
|
|
21697
21989
|
// src/components/Validation/StatusBullet.styles.ts
|
|
21698
|
-
import { css as
|
|
21699
|
-
var StatusBulletContainer =
|
|
21990
|
+
import { css as css103 } from "@emotion/react";
|
|
21991
|
+
var StatusBulletContainer = css103`
|
|
21700
21992
|
align-items: center;
|
|
21701
21993
|
align-self: center;
|
|
21702
21994
|
color: var(--gray-500);
|
|
@@ -21713,33 +22005,33 @@ var StatusBulletContainer = css99`
|
|
|
21713
22005
|
display: block;
|
|
21714
22006
|
}
|
|
21715
22007
|
`;
|
|
21716
|
-
var StatusBulletBase =
|
|
22008
|
+
var StatusBulletBase = css103`
|
|
21717
22009
|
font-size: var(--fs-sm);
|
|
21718
22010
|
&:before {
|
|
21719
22011
|
width: var(--fs-xs);
|
|
21720
22012
|
height: var(--fs-xs);
|
|
21721
22013
|
}
|
|
21722
22014
|
`;
|
|
21723
|
-
var StatusBulletSmall =
|
|
22015
|
+
var StatusBulletSmall = css103`
|
|
21724
22016
|
font-size: var(--fs-xs);
|
|
21725
22017
|
&:before {
|
|
21726
22018
|
width: var(--fs-xxs);
|
|
21727
22019
|
height: var(--fs-xxs);
|
|
21728
22020
|
}
|
|
21729
22021
|
`;
|
|
21730
|
-
var StatusDraft =
|
|
22022
|
+
var StatusDraft = css103`
|
|
21731
22023
|
&:before {
|
|
21732
22024
|
background: var(--white);
|
|
21733
22025
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
21734
22026
|
}
|
|
21735
22027
|
`;
|
|
21736
|
-
var StatusModified =
|
|
22028
|
+
var StatusModified = css103`
|
|
21737
22029
|
&:before {
|
|
21738
22030
|
background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
|
|
21739
22031
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
21740
22032
|
}
|
|
21741
22033
|
`;
|
|
21742
|
-
var StatusError =
|
|
22034
|
+
var StatusError = css103`
|
|
21743
22035
|
color: var(--error);
|
|
21744
22036
|
&:before {
|
|
21745
22037
|
/* TODO: replace this with an svg icon */
|
|
@@ -21752,29 +22044,29 @@ var StatusError = css99`
|
|
|
21752
22044
|
);
|
|
21753
22045
|
}
|
|
21754
22046
|
`;
|
|
21755
|
-
var StatusPublished =
|
|
22047
|
+
var StatusPublished = css103`
|
|
21756
22048
|
&:before {
|
|
21757
22049
|
background: var(--accent-dark);
|
|
21758
22050
|
}
|
|
21759
22051
|
`;
|
|
21760
|
-
var StatusOrphan =
|
|
22052
|
+
var StatusOrphan = css103`
|
|
21761
22053
|
&:before {
|
|
21762
22054
|
background: var(--brand-secondary-5);
|
|
21763
22055
|
}
|
|
21764
22056
|
`;
|
|
21765
|
-
var StatusUnknown =
|
|
22057
|
+
var StatusUnknown = css103`
|
|
21766
22058
|
&:before {
|
|
21767
22059
|
background: var(--gray-800);
|
|
21768
22060
|
}
|
|
21769
22061
|
`;
|
|
21770
|
-
var StatusDeleted =
|
|
22062
|
+
var StatusDeleted = css103`
|
|
21771
22063
|
&:before {
|
|
21772
22064
|
background: var(--error);
|
|
21773
22065
|
}
|
|
21774
22066
|
`;
|
|
21775
22067
|
|
|
21776
22068
|
// src/components/Validation/StatusBullet.tsx
|
|
21777
|
-
import { jsx as
|
|
22069
|
+
import { jsx as jsx134 } from "@emotion/react/jsx-runtime";
|
|
21778
22070
|
var StatusBullet = ({
|
|
21779
22071
|
status,
|
|
21780
22072
|
hideText = false,
|
|
@@ -21794,7 +22086,7 @@ var StatusBullet = ({
|
|
|
21794
22086
|
Deleted: StatusDeleted
|
|
21795
22087
|
};
|
|
21796
22088
|
const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
|
|
21797
|
-
return /* @__PURE__ */
|
|
22089
|
+
return /* @__PURE__ */ jsx134(
|
|
21798
22090
|
"span",
|
|
21799
22091
|
{
|
|
21800
22092
|
role: "status",
|
|
@@ -21894,6 +22186,13 @@ export {
|
|
|
21894
22186
|
Modal,
|
|
21895
22187
|
ModalDialog,
|
|
21896
22188
|
MultilineChip,
|
|
22189
|
+
ObjectGridContainer2 as ObjectGridContainer,
|
|
22190
|
+
ObjectGridItem2 as ObjectGridItem,
|
|
22191
|
+
ObjectGridItemCardCover,
|
|
22192
|
+
ObjectGridItemCover,
|
|
22193
|
+
ObjectGridItemCoverButton,
|
|
22194
|
+
ObjectGridItemHeading2 as ObjectGridItemHeading,
|
|
22195
|
+
ObjectGridItemIconWithTooltip,
|
|
21897
22196
|
PageHeaderSection,
|
|
21898
22197
|
Pagination,
|
|
21899
22198
|
Paragraph,
|