@uniformdev/design-system 19.14.0 → 19.14.1-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 CHANGED
@@ -1386,6 +1386,115 @@ var queryStringIcon = GenIcon({
1386
1386
  }
1387
1387
  ]
1388
1388
  });
1389
+ var formatBoldIcon = GenIcon({
1390
+ tag: "svg",
1391
+ attr: {
1392
+ role: "img",
1393
+ viewBox: "0 0 24 24"
1394
+ },
1395
+ child: [
1396
+ {
1397
+ tag: "path",
1398
+ attr: {
1399
+ stroke: "currentColor",
1400
+ strokeWidth: "1.5",
1401
+ d: "M 6.9590764,5.7378392 H 8.375 V 19.078125 H 6.9590764 Z m 6.1482616,13.3327078 -4.7292032,10e-7 -0.011048,-1.333333 h 4.7402522 c 1.472733,0 2.666667,-1.193907 2.666667,-2.666667 0,-1.472733 -1.193934,-2.666667 -2.666667,-2.666667 H 9.1073387 v -1.333333 h 3.9999993 c 2.209133,-1e-6 4,1.790867 4,4 -10e-7,2.20914 -1.790867,3.999999 -4,3.999999 z m -2.148261,-6.666042 -4.0000007,10e-7 v -1.333333 h 4.0000007 c 1.472733,-10e-7 2.666667,-1.1939074 2.666667,-2.6666667 0,-1.4727336 -1.193934,-2.666667 -2.666667,-2.6666669 l -4.0000007,-3e-7 v -1.333333 h 4.0000007 c 2.209133,-7e-7 4,1.7908664 4,3.9999999 -1e-6,2.20914 -1.790867,3.999999 -4,3.999999 z"
1402
+ },
1403
+ child: []
1404
+ }
1405
+ ]
1406
+ });
1407
+ var layoutListNumberedIcon = GenIcon({
1408
+ tag: "svg",
1409
+ attr: {
1410
+ role: "img",
1411
+ viewBox: "0 0 24 24"
1412
+ },
1413
+ child: [
1414
+ {
1415
+ tag: "path",
1416
+ attr: {
1417
+ fill: "currentColor",
1418
+ d: "M11 15v2h6v-2h-6ZM17 13v-2h-6v2h6ZM17 7v2h-6V7h6ZM6.733 11.252V6.304l-1.027.241V5.67L7.215 5h.706v6.252H6.733ZM5 19v-.83c.381-.316.75-.629 1.107-.938.364-.31.685-.617.965-.92.286-.304.512-.599.679-.885.173-.291.259-.574.259-.848 0-.256-.072-.482-.214-.679-.137-.196-.367-.295-.688-.295-.328 0-.575.108-.741.322-.167.214-.25.473-.25.777H5.008c.012-.459.113-.84.304-1.143.19-.31.443-.54.759-.688.315-.155.67-.232 1.063-.232.637 0 1.131.175 1.482.527.358.345.536.795.536 1.348 0 .346-.08.682-.241 1.01-.155.327-.36.643-.616.946-.256.304-.533.59-.83.858-.299.262-.587.506-.867.732h2.706V19H5Z"
1419
+ },
1420
+ child: []
1421
+ }
1422
+ ]
1423
+ });
1424
+ var formatCode = GenIcon({
1425
+ tag: "svg",
1426
+ attr: {
1427
+ role: "img",
1428
+ viewBox: "0 0 24 24"
1429
+ },
1430
+ child: [
1431
+ {
1432
+ tag: "path",
1433
+ attr: {
1434
+ fill: "currentColor",
1435
+ d: "m9.953 16.912-1.36 1.449-6.562-6.16L8.19 5.64l1.458 1.369-4.79 5.104 5.094 4.781v.02ZM14.047 16.912l1.36 1.449 6.562-6.16L15.81 5.64l-1.458 1.369 4.79 5.104-5.094 4.781v.02Z"
1436
+ },
1437
+ child: []
1438
+ }
1439
+ ]
1440
+ });
1441
+ var formatStrike = GenIcon({
1442
+ tag: "svg",
1443
+ attr: {
1444
+ role: "img",
1445
+ viewBox: "0 0 24 24"
1446
+ },
1447
+ child: [
1448
+ {
1449
+ tag: "path",
1450
+ attr: {
1451
+ fill: "currentColor",
1452
+ fillRule: "evenodd",
1453
+ clipRule: "evenodd",
1454
+ d: "M12.171 18.878c-.975 0-1.836-.165-2.584-.494-.747-.342-1.336-.823-1.767-1.444-.43-.633-.652-1.4-.665-2.299H9.72c.025.62.247 1.146.665 1.577.43.418 1.02.627 1.767.627.646 0 1.16-.152 1.54-.456.38-.317.57-.735.57-1.254 0-.545-.172-.969-.514-1.273a2.857 2.857 0 0 0-.41-.313h3.273c.156.403.234.874.234 1.415a3.72 3.72 0 0 1-.532 1.938c-.354.595-.88 1.077-1.577 1.444-.697.355-1.552.532-2.565.532ZM7.523 9.55a4.207 4.207 0 0 1-.045-.627c-.013-.785.171-1.457.551-2.014a3.789 3.789 0 0 1 1.596-1.31c.671-.318 1.444-.476 2.318-.476.887 0 1.666.158 2.337.475.684.317 1.216.76 1.596 1.33.393.57.602 1.248.627 2.033H13.9c-.013-.469-.196-.88-.55-1.235-.343-.367-.824-.55-1.445-.55-.532-.014-.981.12-1.349.398-.354.266-.532.659-.532 1.178 0 .31.068.575.203.798H7.523Zm11.71 1h-15v2h15v-2Z"
1455
+ },
1456
+ child: []
1457
+ }
1458
+ ]
1459
+ });
1460
+ var formatSuperscript = GenIcon({
1461
+ tag: "svg",
1462
+ attr: {
1463
+ role: "img",
1464
+ viewBox: "0 0 24 24"
1465
+ },
1466
+ child: [
1467
+ {
1468
+ tag: "path",
1469
+ attr: {
1470
+ fill: "currentColor",
1471
+ fillRule: "evenodd",
1472
+ clipRule: "evenodd",
1473
+ d: "M16.192 8.058v.777h4.028v-.878h-2.532c.262-.211.532-.44.81-.685.28-.25.538-.518.778-.802.24-.285.432-.58.576-.886a2.12 2.12 0 0 0 .226-.945c0-.518-.167-.939-.501-1.262-.33-.329-.792-.493-1.388-.493-.368 0-.7.072-.994.217-.296.14-.533.354-.71.644-.18.284-.274.64-.285 1.07h1.036c0-.285.078-.527.234-.728.156-.2.388-.3.694-.3.301 0 .515.091.644.275.133.184.2.396.2.636 0 .256-.08.52-.242.794a4.639 4.639 0 0 1-.635.827c-.262.284-.563.571-.903.861-.334.29-.68.582-1.037.878Zm-8.194 3.716L3.838 18.5h2.735l2.736-4.693L12.33 18.5h2.793l-4.256-6.612L15.028 5.2h-2.736L9.556 9.836 6.573 5.2H3.78l4.218 6.574Z"
1474
+ },
1475
+ child: []
1476
+ }
1477
+ ]
1478
+ });
1479
+ var formatSubscript = GenIcon({
1480
+ tag: "svg",
1481
+ attr: {
1482
+ role: "img",
1483
+ viewBox: "0 0 24 24"
1484
+ },
1485
+ child: [
1486
+ {
1487
+ tag: "path",
1488
+ attr: {
1489
+ fill: "currentColor",
1490
+ fillRule: "evenodd",
1491
+ clipRule: "evenodd",
1492
+ d: "M7.998 11.774 3.838 18.5h2.735l2.736-4.693L12.33 18.5h2.793l-4.256-6.612L15.028 5.2h-2.736L9.556 9.836 6.573 5.2H3.78l4.218 6.574Zm8.194 8.157v.777h4.028v-.877h-2.532c.262-.212.532-.44.81-.686.28-.25.538-.518.778-.802.24-.284.432-.58.576-.886a2.12 2.12 0 0 0 .226-.944c0-.519-.167-.94-.501-1.263-.33-.328-.792-.493-1.388-.493-.368 0-.7.073-.994.218-.296.139-.533.354-.71.643-.18.284-.274.641-.285 1.07h1.036c0-.284.078-.526.234-.727.156-.2.388-.301.694-.301.301 0 .515.092.644.276.133.184.2.395.2.635 0 .256-.08.521-.242.794a4.638 4.638 0 0 1-.635.828 10.4 10.4 0 0 1-.903.86c-.334.29-.68.583-1.037.878Z"
1493
+ },
1494
+ child: []
1495
+ }
1496
+ ]
1497
+ });
1389
1498
  var customIcons = {
1390
1499
  "rectangle-rounded": rectangleRoundedIcon,
1391
1500
  card: cardIcon,
@@ -1398,7 +1507,13 @@ var customIcons = {
1398
1507
  warning: warningIcon,
1399
1508
  "info-filled": infoFilledIcon,
1400
1509
  settings,
1401
- "query-string": queryStringIcon
1510
+ "query-string": queryStringIcon,
1511
+ "format-bold": formatBoldIcon,
1512
+ "format-code": formatCode,
1513
+ "format-strike": formatStrike,
1514
+ "format-superscript": formatSuperscript,
1515
+ "format-subscript": formatSubscript,
1516
+ "layout-list-numbered": layoutListNumberedIcon
1402
1517
  };
1403
1518
 
1404
1519
  // src/components/AddListButton/AddListButton.styles.ts
@@ -15300,142 +15415,272 @@ var ParameterNameAndPublicIdInput = ({
15300
15415
  };
15301
15416
 
15302
15417
  // src/components/ParameterInputs/ParameterRichText.tsx
15303
- import { forwardRef as forwardRef13 } from "react";
15304
- import { Fragment as Fragment13, jsx as jsx88, jsxs as jsxs59 } from "@emotion/react/jsx-runtime";
15305
- var ParameterRichText = forwardRef13(
15306
- ({
15307
- label,
15308
- labelLeadingIcon,
15309
- hiddenLabel,
15310
- id,
15311
- errorMessage,
15312
- caption,
15313
- errorTestId,
15314
- captionTestId,
15315
- menuItems,
15316
- ...props
15317
- }, ref) => {
15318
- return /* @__PURE__ */ jsxs59(
15319
- ParameterShell,
15320
- {
15321
- "data-test-id": "parameter-input",
15322
- label,
15323
- labelLeadingIcon,
15324
- id,
15325
- errorMessage,
15326
- caption,
15327
- errorTestId,
15328
- captionTestId,
15329
- menuItems,
15330
- children: [
15331
- /* @__PURE__ */ jsx88(ParameterRichTextInner, { ref, ...props }),
15332
- menuItems ? /* @__PURE__ */ jsx88(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx88(Fragment13, { children: menuItems }) }) : null
15333
- ]
15334
- }
15335
- );
15418
+ import { css as css73 } from "@emotion/react";
15419
+ import { ListItemNode, ListNode as ListNode2 } from "@lexical/list";
15420
+ import { LexicalComposer } from "@lexical/react/LexicalComposer";
15421
+ import { useLexicalComposerContext as useLexicalComposerContext4 } from "@lexical/react/LexicalComposerContext";
15422
+ import { ContentEditable } from "@lexical/react/LexicalContentEditable";
15423
+ import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
15424
+ import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
15425
+ import { ListPlugin } from "@lexical/react/LexicalListPlugin";
15426
+ import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
15427
+ import { HeadingNode } from "@lexical/rich-text";
15428
+ import { deepEqual as deepEqual2 } from "fast-equals";
15429
+ import { ParagraphNode } from "lexical";
15430
+ import { useEffect as useEffect13, useRef as useRef6 } from "react";
15431
+
15432
+ // src/components/ParameterInputs/rich-text/builtInElements.ts
15433
+ var richTextBuiltInElements = [
15434
+ {
15435
+ label: "Heading 1",
15436
+ type: "h1"
15437
+ },
15438
+ {
15439
+ label: "Heading 2",
15440
+ type: "h2"
15441
+ },
15442
+ {
15443
+ label: "Heading 3",
15444
+ type: "h3"
15445
+ },
15446
+ {
15447
+ label: "Heading 4",
15448
+ type: "h4"
15449
+ },
15450
+ {
15451
+ label: "Heading 5",
15452
+ type: "h5"
15453
+ },
15454
+ {
15455
+ label: "Heading 6",
15456
+ type: "h6"
15457
+ },
15458
+ {
15459
+ label: "Bullet List",
15460
+ type: "unorderedList"
15461
+ },
15462
+ {
15463
+ label: "Numbered List",
15464
+ type: "orderedList"
15465
+ },
15466
+ {
15467
+ label: "Link",
15468
+ type: "link"
15336
15469
  }
15337
- );
15338
- var ParameterRichTextInner = forwardRef13(({ ...props }, ref) => {
15339
- const { id, label, hiddenLabel } = useParameterShell();
15340
- return /* @__PURE__ */ jsx88(
15341
- "textarea",
15342
- {
15343
- css: [input2, textarea2],
15344
- id,
15345
- ref,
15346
- "aria-label": hiddenLabel ? label : void 0,
15347
- ...props
15348
- }
15349
- );
15350
- });
15470
+ ];
15351
15471
 
15352
- // src/components/ParameterInputs/ParameterSelect.tsx
15353
- import { forwardRef as forwardRef14 } from "react";
15354
- import { jsx as jsx89, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
15355
- var ParameterSelect = forwardRef14(
15356
- ({ defaultOption, options, ...props }, ref) => {
15357
- const { shellProps, innerProps } = extractParameterProps(props);
15358
- return /* @__PURE__ */ jsx89(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx89(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
15359
- }
15360
- );
15361
- var ParameterSelectInner = forwardRef14(
15362
- ({ defaultOption, options, ...props }, ref) => {
15363
- const { id, label, hiddenLabel } = useParameterShell();
15364
- return /* @__PURE__ */ jsxs60(
15365
- "select",
15366
- {
15367
- css: [input2, selectInput],
15368
- id,
15369
- "aria-label": hiddenLabel ? label : void 0,
15370
- ref,
15371
- ...props,
15372
- children: [
15373
- defaultOption ? /* @__PURE__ */ jsx89("option", { value: "", children: defaultOption }) : null,
15374
- options.map((option) => {
15375
- var _a;
15376
- return /* @__PURE__ */ jsx89("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
15377
- })
15378
- ]
15379
- }
15380
- );
15472
+ // src/components/ParameterInputs/rich-text/builtInFormats.ts
15473
+ var richTextBuiltInFormats = [
15474
+ {
15475
+ label: "Bold",
15476
+ type: "bold"
15477
+ },
15478
+ {
15479
+ label: "Italic",
15480
+ type: "italic"
15481
+ },
15482
+ {
15483
+ label: "Underline",
15484
+ type: "underline"
15485
+ },
15486
+ {
15487
+ label: "Strikethrough",
15488
+ type: "strikethrough"
15489
+ },
15490
+ {
15491
+ label: "Code",
15492
+ type: "code"
15493
+ },
15494
+ {
15495
+ label: "Superscript",
15496
+ type: "superscript"
15497
+ },
15498
+ {
15499
+ label: "Subscript",
15500
+ type: "subscript"
15381
15501
  }
15382
- );
15502
+ ];
15383
15503
 
15384
- // src/components/ParameterInputs/ParameterTextarea.tsx
15385
- import { forwardRef as forwardRef15 } from "react";
15386
- import { jsx as jsx90 } from "@emotion/react/jsx-runtime";
15387
- var ParameterTextarea = forwardRef15((props, ref) => {
15388
- const { shellProps, innerProps } = extractParameterProps(props);
15389
- return /* @__PURE__ */ jsx90(ParameterShell, { "data-test-id": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx90(ParameterTextareaInner, { ref, ...innerProps }) });
15390
- });
15391
- var ParameterTextareaInner = forwardRef15(({ ...props }, ref) => {
15392
- const { id, label, hiddenLabel } = useParameterShell();
15393
- return /* @__PURE__ */ jsx90(
15394
- "textarea",
15395
- {
15396
- css: [input2, textarea2],
15397
- id,
15398
- ref,
15399
- "aria-label": hiddenLabel ? label : void 0,
15400
- ...props
15401
- }
15402
- );
15403
- });
15504
+ // src/components/ParameterInputs/rich-text/editorStyles.ts
15505
+ import { css as css69 } from "@emotion/css";
15506
+ var textBold = css69`
15507
+ font-weight: 700;
15508
+ `;
15509
+ var textItalic = css69`
15510
+ font-style: italic;
15511
+ `;
15512
+ var textUnderline = css69`
15513
+ text-decoration: underline;
15514
+ `;
15515
+ var textStrikethrough = css69`
15516
+ text-decoration: line-through;
15517
+ `;
15518
+ var textUnderlineStrikethrough = css69`
15519
+ text-decoration: underline line-through;
15520
+ `;
15521
+ var textCode = css69`
15522
+ background-color: var(--gray-100);
15523
+ border-radius: var(--rounded-sm);
15524
+ display: inline-block;
15525
+ font-family: var(--ff-mono);
15526
+ font-size: 94%;
15527
+ padding-left: var(--spacing-xs);
15528
+ padding-right: var(--spacing-xs);
15529
+ `;
15530
+ var textSuperscript = css69`
15531
+ vertical-align: super;
15532
+ font-size: smaller;
15533
+ `;
15534
+ var textSubscript = css69`
15535
+ vertical-align: sub;
15536
+ font-size: smaller;
15537
+ `;
15538
+ var linkElement = css69`
15539
+ ${link}
15540
+ ${linkColorDefault}
15541
+ text-decoration: underline;
15542
+ `;
15543
+ var h12 = css69`
15544
+ font-size: clamp(1.35rem, var(--fluid-font-base), 1.7rem);
15545
+ `;
15546
+ var h22 = css69`
15547
+ font-size: clamp(1.35rem, var(--fluid-font-base), 1.6rem);
15548
+ `;
15549
+ var h32 = css69`
15550
+ font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
15551
+ `;
15552
+ var h42 = css69`
15553
+ font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
15554
+ `;
15555
+ var h52 = css69`
15556
+ font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
15557
+ `;
15558
+ var h62 = css69`
15559
+ font-size: var(--fs-base);
15560
+ `;
15561
+ var heading1Element = css69`
15562
+ ${h12}
15563
+ ${commonHeadingAttr(true)}
15564
+ ${commonLineHeight}
15565
+ `;
15566
+ var heading2Element = css69`
15567
+ ${h22}
15568
+ ${commonHeadingAttr(true)}
15569
+ ${commonLineHeight}
15570
+ `;
15571
+ var heading3Element = css69`
15572
+ ${h32}
15573
+ ${commonHeadingAttr(true)}
15574
+ ${commonLineHeight}
15575
+ `;
15576
+ var heading4Element = css69`
15577
+ ${h42}
15578
+ ${commonHeadingAttr(true)}
15579
+ ${commonLineHeight}
15580
+ `;
15581
+ var heading5Element = css69`
15582
+ ${h52}
15583
+ ${commonHeadingAttr(true)}
15584
+ ${commonLineHeight}
15585
+ `;
15586
+ var heading6Element = css69`
15587
+ ${h62}
15588
+ ${commonHeadingAttr(true)}
15589
+ ${commonLineHeight}
15590
+ `;
15591
+ var paragraphElement = css69`
15592
+ line-height: 1.5;
15593
+ margin-bottom: var(--spacing-base);
15404
15594
 
15405
- // src/components/ParameterInputs/ParameterToggle.tsx
15406
- import { forwardRef as forwardRef16 } from "react";
15407
- import { jsx as jsx91, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
15408
- var ParameterToggle = forwardRef16((props, ref) => {
15409
- const { shellProps, innerProps } = extractParameterProps(props);
15410
- return /* @__PURE__ */ jsx91(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx91(ParameterToggleInner, { ref, ...innerProps }) });
15411
- });
15412
- var ParameterToggleInner = forwardRef16(
15413
- ({ ...props }, ref) => {
15414
- const { id, label } = useParameterShell();
15415
- return /* @__PURE__ */ jsxs61("label", { css: inputToggleLabel2, children: [
15416
- /* @__PURE__ */ jsx91("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
15417
- /* @__PURE__ */ jsx91("span", { css: inlineLabel2, children: label })
15418
- ] });
15595
+ &:last-child {
15596
+ margin-bottom: 0;
15419
15597
  }
15420
- );
15598
+ `;
15599
+ var orderedListElement = css69`
15600
+ ${commonLineHeight}
15601
+ display: block;
15602
+ list-style: decimal;
15603
+ list-style-position: outside;
15604
+ margin-bottom: var(--spacing-base);
15605
+ margin-top: 0;
15606
+ padding: 0;
15421
15607
 
15422
- // src/components/Popover/Popover.tsx
15423
- import {
15424
- Popover as ReakitPopover,
15425
- PopoverDisclosure,
15426
- usePopoverState
15427
- } from "reakit/Popover";
15428
- import { Portal as Portal2 } from "reakit/Portal";
15608
+ &:last-child {
15609
+ margin-bottom: 0;
15610
+ }
15429
15611
 
15430
- // src/components/Popover/Popover.styles.ts
15431
- import { css as css69 } from "@emotion/react";
15432
- var PopoverBtn = css69`
15433
- border: none;
15434
- background: none;
15435
- padding: 0;
15612
+ ol {
15613
+ list-style-type: upper-alpha;
15614
+
15615
+ ol {
15616
+ list-style-type: lower-alpha;
15617
+
15618
+ ol {
15619
+ list-style-type: upper-roman;
15620
+
15621
+ ol {
15622
+ list-style-type: lower-roman;
15623
+ }
15624
+ }
15625
+ }
15626
+ }
15436
15627
  `;
15437
- var Popover = css69`
15438
- border-left: var(--spacing-xs) solid var(--brand-secondary-3);
15628
+ var unorderedListElement = css69`
15629
+ ${commonLineHeight}
15630
+ display: block;
15631
+ list-style: disc;
15632
+ list-style-position: outside;
15633
+ margin-bottom: var(--spacing-base);
15634
+ margin-top: 0;
15635
+ padding: 0;
15636
+
15637
+ &:last-child {
15638
+ margin-bottom: 0;
15639
+ }
15640
+
15641
+ ul {
15642
+ list-style-type: circle;
15643
+
15644
+ ul {
15645
+ list-style-type: square;
15646
+ }
15647
+ }
15648
+ `;
15649
+ var listItemElement = css69`
15650
+ margin-left: var(--spacing-md);
15651
+ `;
15652
+ var nestedListItemElement = css69`
15653
+ list-style-type: none;
15654
+ `;
15655
+
15656
+ // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
15657
+ import { css as css71 } from "@emotion/react";
15658
+ import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
15659
+ import { NodeEventPlugin } from "@lexical/react/LexicalNodeEventPlugin";
15660
+ import { addClassNamesToElement, isHTMLAnchorElement, mergeRegister } from "@lexical/utils";
15661
+ import { deepEqual } from "fast-equals";
15662
+ import {
15663
+ $applyNodeReplacement,
15664
+ $getSelection,
15665
+ $isElementNode as $isElementNode2,
15666
+ $isRangeSelection,
15667
+ BLUR_COMMAND,
15668
+ COMMAND_PRIORITY_EDITOR,
15669
+ createCommand,
15670
+ ElementNode as ElementNode2,
15671
+ FOCUS_COMMAND
15672
+ } from "lexical";
15673
+ import { useCallback as useCallback4, useEffect as useEffect10, useRef as useRef5, useState as useState9 } from "react";
15674
+
15675
+ // src/components/Popover/Popover.styles.ts
15676
+ import { css as css70 } from "@emotion/react";
15677
+ var PopoverBtn = css70`
15678
+ border: none;
15679
+ background: none;
15680
+ padding: 0;
15681
+ `;
15682
+ var Popover = css70`
15683
+ border-left: var(--spacing-xs) solid var(--brand-secondary-3);
15439
15684
  border-radius: var(--rounded-base);
15440
15685
  box-shadow: var(--shadow-base);
15441
15686
  background: var(--white);
@@ -15446,8 +15691,1156 @@ var Popover = css69`
15446
15691
  max-width: 220px;
15447
15692
  `;
15448
15693
 
15694
+ // src/components/ParameterInputs/rich-text/utils.ts
15695
+ import { $isAtNodeEnd } from "@lexical/selection";
15696
+ import {
15697
+ $isElementNode
15698
+ } from "lexical";
15699
+ var getElementNodesInSelection = (selection) => {
15700
+ const nodesInSelection = selection.getNodes();
15701
+ if (nodesInSelection.length === 0) {
15702
+ return /* @__PURE__ */ new Set([
15703
+ selection.anchor.getNode().getParentOrThrow(),
15704
+ selection.focus.getNode().getParentOrThrow()
15705
+ ]);
15706
+ }
15707
+ return new Set(nodesInSelection.map((node) => $isElementNode(node) ? node : node.getParentOrThrow()));
15708
+ };
15709
+ var getAncestor = (node, predicate) => {
15710
+ let parent = node;
15711
+ while (parent !== null && (parent = parent.getParent()) !== null && !predicate(parent))
15712
+ ;
15713
+ return parent;
15714
+ };
15715
+ var getSelectedNode = (selection) => {
15716
+ const anchor = selection.anchor;
15717
+ const focus = selection.focus;
15718
+ const anchorNode = selection.anchor.getNode();
15719
+ const focusNode = selection.focus.getNode();
15720
+ if (anchorNode === focusNode) {
15721
+ return anchorNode;
15722
+ }
15723
+ const isBackward = selection.isBackward();
15724
+ if (isBackward) {
15725
+ return $isAtNodeEnd(focus) ? anchorNode : focusNode;
15726
+ } else {
15727
+ return $isAtNodeEnd(anchor) ? anchorNode : focusNode;
15728
+ }
15729
+ };
15730
+ var richTextIsValueConsideredEmpty = (value) => {
15731
+ if (!value) {
15732
+ return true;
15733
+ }
15734
+ if (value.root.children.length === 0) {
15735
+ return true;
15736
+ }
15737
+ if (value.root.children.length > 1) {
15738
+ return false;
15739
+ }
15740
+ const child = value.root.children[0];
15741
+ if (child.type !== "paragraph") {
15742
+ return false;
15743
+ }
15744
+ return child.children.length === 0;
15745
+ };
15746
+
15747
+ // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
15748
+ import { Fragment as Fragment13, jsx as jsx88, jsxs as jsxs59 } from "@emotion/react/jsx-runtime";
15749
+ var isProjectMapLinkValue = (value) => {
15750
+ return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
15751
+ value.nodeId && value.path && value.projectMapId
15752
+ );
15753
+ };
15754
+ var isNonProjectMapLinkValue = (value) => {
15755
+ return typeof (value == null ? void 0 : value.type) === "string" && ["url", "tel", "email"].includes(value.type) && Boolean(value.path);
15756
+ };
15757
+ var guessLinkTypeFromPath = (path) => {
15758
+ if (path.startsWith("http://") || path.startsWith("https://")) {
15759
+ return "url";
15760
+ }
15761
+ if (path.startsWith("mailto:") || path.includes("@")) {
15762
+ return "email";
15763
+ }
15764
+ if (path.startsWith("tel:") || path.startsWith("+")) {
15765
+ return "tel";
15766
+ }
15767
+ return "url";
15768
+ };
15769
+ function convertAnchorElement(domNode) {
15770
+ let node = null;
15771
+ if (!isHTMLAnchorElement(domNode)) {
15772
+ return { node };
15773
+ }
15774
+ const textContent = domNode.textContent;
15775
+ if (textContent === null || textContent === "") {
15776
+ return { node };
15777
+ }
15778
+ let linkFromAttribute = domNode.getAttribute("data-link");
15779
+ if (linkFromAttribute) {
15780
+ try {
15781
+ linkFromAttribute = JSON.parse(linkFromAttribute);
15782
+ } catch (e) {
15783
+ }
15784
+ }
15785
+ let path = domNode.getAttribute("href");
15786
+ let projectMapId = void 0;
15787
+ let nodeId = void 0;
15788
+ let type = void 0;
15789
+ let dynamicInputValues = void 0;
15790
+ if (linkFromAttribute && typeof linkFromAttribute === "object") {
15791
+ if ("path" in linkFromAttribute && typeof linkFromAttribute.path === "string") {
15792
+ path = linkFromAttribute.path;
15793
+ }
15794
+ if ("type" in linkFromAttribute && typeof linkFromAttribute.type === "string") {
15795
+ type = linkFromAttribute.type;
15796
+ }
15797
+ if ("projectMapId" in linkFromAttribute && typeof linkFromAttribute.projectMapId === "string") {
15798
+ projectMapId = linkFromAttribute.projectMapId;
15799
+ }
15800
+ if ("nodeId" in linkFromAttribute && typeof linkFromAttribute.nodeId === "string") {
15801
+ nodeId = linkFromAttribute.nodeId;
15802
+ }
15803
+ if ("dynamicInputValues" in linkFromAttribute && typeof linkFromAttribute.dynamicInputValues === "string") {
15804
+ try {
15805
+ dynamicInputValues = JSON.parse(linkFromAttribute.dynamicInputValues);
15806
+ } catch (e) {
15807
+ }
15808
+ }
15809
+ }
15810
+ if (!path) {
15811
+ return { node: null };
15812
+ }
15813
+ if (!type) {
15814
+ type = guessLinkTypeFromPath(path);
15815
+ }
15816
+ if (type === "email" && path.startsWith("mailto:")) {
15817
+ path = path.replace("mailto:", "");
15818
+ } else if (type === "tel" && path.startsWith("tel:")) {
15819
+ path = path.replace("tel:", "");
15820
+ }
15821
+ const value = {
15822
+ type,
15823
+ path,
15824
+ projectMapId,
15825
+ nodeId,
15826
+ dynamicInputValues
15827
+ };
15828
+ if (isProjectMapLinkValue(value)) {
15829
+ node = $createLinkNode(value);
15830
+ } else if (isNonProjectMapLinkValue(value)) {
15831
+ node = $createLinkNode(value);
15832
+ }
15833
+ return { node };
15834
+ }
15835
+ var LinkNode = class extends ElementNode2 {
15836
+ constructor(props, key) {
15837
+ super(key);
15838
+ this.__link = props;
15839
+ }
15840
+ static getType() {
15841
+ return "link";
15842
+ }
15843
+ getLink() {
15844
+ return this.getLatest().__link;
15845
+ }
15846
+ setLink(link2) {
15847
+ const writable = this.getWritable();
15848
+ writable.__link = link2;
15849
+ }
15850
+ static clone(node) {
15851
+ return new LinkNode(node.__link, node.__key);
15852
+ }
15853
+ static importJSON(serializedNode) {
15854
+ const node = $createLinkNode(serializedNode.link);
15855
+ node.setFormat(serializedNode.format);
15856
+ node.setIndent(serializedNode.indent);
15857
+ node.setDirection(serializedNode.direction);
15858
+ return node;
15859
+ }
15860
+ exportJSON() {
15861
+ return {
15862
+ ...super.exportJSON(),
15863
+ link: this.getLink(),
15864
+ type: this.getType(),
15865
+ version: 1
15866
+ };
15867
+ }
15868
+ createDOM(config) {
15869
+ const element = document.createElement("a");
15870
+ element.setAttribute("data-link", JSON.stringify(this.__link));
15871
+ if (isNonProjectMapLinkValue(this.__link)) {
15872
+ if (this.__link.type === "url") {
15873
+ element.setAttribute("href", this.__link.path);
15874
+ } else if (this.__link.type === "tel") {
15875
+ element.setAttribute("href", `tel:${this.__link.path}`);
15876
+ } else if (this.__link.type === "email") {
15877
+ element.setAttribute("href", `mailto:${this.__link.path}`);
15878
+ }
15879
+ }
15880
+ addClassNamesToElement(element, config.theme.link);
15881
+ return element;
15882
+ }
15883
+ updateDOM(prevNode, a) {
15884
+ if (!deepEqual(prevNode.__link, this.__link)) {
15885
+ a.setAttribute("data-link", JSON.stringify(this.__link));
15886
+ if (isNonProjectMapLinkValue(this.__link)) {
15887
+ if (this.__link.type === "url") {
15888
+ a.setAttribute("href", this.__link.path);
15889
+ } else if (this.__link.type === "tel") {
15890
+ a.setAttribute("href", `tel:${this.__link.path}`);
15891
+ } else if (this.__link.type === "email") {
15892
+ a.setAttribute("href", `mailto:${this.__link.path}`);
15893
+ }
15894
+ }
15895
+ }
15896
+ return false;
15897
+ }
15898
+ static importDOM() {
15899
+ return {
15900
+ a: () => ({
15901
+ conversion: convertAnchorElement,
15902
+ priority: 1
15903
+ })
15904
+ };
15905
+ }
15906
+ insertNewAfter(selection, restoreSelection = true) {
15907
+ const element = this.getParentOrThrow().insertNewAfter(selection, restoreSelection);
15908
+ if ($isElementNode2(element)) {
15909
+ const linkNode = $createLinkNode(
15910
+ "nodeId" in this.__link ? {
15911
+ nodeId: this.__link.nodeId,
15912
+ projectMapId: this.__link.projectMapId,
15913
+ path: this.__link.path,
15914
+ type: this.__link.type
15915
+ } : {
15916
+ path: this.__link.path,
15917
+ type: this.__link.type
15918
+ }
15919
+ );
15920
+ element.append(linkNode);
15921
+ return linkNode;
15922
+ }
15923
+ return null;
15924
+ }
15925
+ canInsertTextBefore() {
15926
+ return false;
15927
+ }
15928
+ canInsertTextAfter() {
15929
+ return false;
15930
+ }
15931
+ canBeEmpty() {
15932
+ return false;
15933
+ }
15934
+ isInline() {
15935
+ return true;
15936
+ }
15937
+ };
15938
+ function $createLinkNode(props) {
15939
+ return $applyNodeReplacement(new LinkNode(props));
15940
+ }
15941
+ function $isLinkNode(node) {
15942
+ return node instanceof LinkNode;
15943
+ }
15944
+ function removeLinkNode(node) {
15945
+ const children = node.getChildren();
15946
+ for (const child of children) {
15947
+ node.insertBefore(child);
15948
+ }
15949
+ node.remove();
15950
+ }
15951
+ function upsertLinkNode(props) {
15952
+ var _a, _b, _c, _d, _e;
15953
+ const selection = $getSelection();
15954
+ if (!$isRangeSelection(selection)) {
15955
+ return;
15956
+ }
15957
+ const nodes = selection.extract();
15958
+ const touchedNodes = [];
15959
+ for (const node of nodes) {
15960
+ if ($isElementNode2(node) && !node.isInline()) {
15961
+ continue;
15962
+ }
15963
+ const linkNodeAncestor = getLinkAncestor(node);
15964
+ if (!linkNodeAncestor) {
15965
+ const newLinkNode = $createLinkNode(props);
15966
+ node.insertBefore(newLinkNode);
15967
+ newLinkNode.append(node);
15968
+ touchedNodes.push(...[newLinkNode, node]);
15969
+ continue;
15970
+ }
15971
+ if (touchedNodes.some((touchedNode) => touchedNode.is(linkNodeAncestor))) {
15972
+ continue;
15973
+ }
15974
+ linkNodeAncestor.setLink(props);
15975
+ touchedNodes.push(node);
15976
+ }
15977
+ const nodesAlreadyMerged = [];
15978
+ for (const node of touchedNodes) {
15979
+ if (nodesAlreadyMerged.some((mergedNode) => mergedNode.is(node))) {
15980
+ continue;
15981
+ }
15982
+ const candidatesForMerging = $isLinkNode(node) ? (_b = (_a = node.getParent()) == null ? void 0 : _a.getChildren()) != null ? _b : [] : (_e = (_d = (_c = getLinkAncestor(node)) == null ? void 0 : _c.getParent()) == null ? void 0 : _d.getChildren()) != null ? _e : [];
15983
+ for (const candidate of candidatesForMerging) {
15984
+ if (nodesAlreadyMerged.some((mergedNode) => mergedNode.is(candidate))) {
15985
+ continue;
15986
+ }
15987
+ if (!$isLinkNode(candidate)) {
15988
+ break;
15989
+ }
15990
+ const siblings = candidate.getNextSiblings();
15991
+ for (const sibling of siblings) {
15992
+ if (nodesAlreadyMerged.some((mergedNode) => mergedNode.is(sibling))) {
15993
+ continue;
15994
+ }
15995
+ if (!$isLinkNode(sibling)) {
15996
+ break;
15997
+ }
15998
+ if (!deepEqual(sibling.getLink(), candidate.getLink())) {
15999
+ break;
16000
+ }
16001
+ candidate.append(...sibling.getChildren());
16002
+ sibling.remove();
16003
+ nodesAlreadyMerged.push(sibling);
16004
+ }
16005
+ }
16006
+ }
16007
+ }
16008
+ var UPSERT_LINK_NODE_COMMAND = createCommand("UPSERT_LINK_NODE_COMMAND");
16009
+ var OPEN_LINK_NODE_MODAL_COMMAND = createCommand(
16010
+ "OPEN_LINK_NODE_MODAL_COMMAND"
16011
+ );
16012
+ var LINK_POPOVER_OFFSET_X = 0;
16013
+ var LINK_POPOVER_OFFSET_Y = 8;
16014
+ var linkPopover = css71`
16015
+ position: absolute;
16016
+ z-index: 5;
16017
+ `;
16018
+ var linkPopoverContainer = css71`
16019
+ ${Popover};
16020
+ align-items: center;
16021
+ display: flex;
16022
+ `;
16023
+ var linkPopoverAnchor = css71`
16024
+ ${link}
16025
+ ${linkColorDefault}
16026
+ `;
16027
+ function LinkNodePlugin({ onConnectLink }) {
16028
+ const [editor] = useLexicalComposerContext();
16029
+ const [linkPopoverState, setLinkPopoverState] = useState9();
16030
+ const linkPopoverElRef = useRef5(null);
16031
+ const [isEditorFocused, setIsEditorFocused] = useState9(false);
16032
+ const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState9(false);
16033
+ useEffect10(() => {
16034
+ if (!isEditorFocused && !isLinkPopoverFocused) {
16035
+ setLinkPopoverState(void 0);
16036
+ return;
16037
+ }
16038
+ }, [isEditorFocused, isLinkPopoverFocused]);
16039
+ useEffect10(() => {
16040
+ if (!editor.hasNodes([LinkNode])) {
16041
+ throw new Error("LinkNode not registered on editor");
16042
+ }
16043
+ return mergeRegister(
16044
+ editor.registerCommand(
16045
+ UPSERT_LINK_NODE_COMMAND,
16046
+ (payload) => {
16047
+ upsertLinkNode(payload);
16048
+ return true;
16049
+ },
16050
+ COMMAND_PRIORITY_EDITOR
16051
+ ),
16052
+ editor.registerCommand(
16053
+ OPEN_LINK_NODE_MODAL_COMMAND,
16054
+ () => {
16055
+ onConnectLink({
16056
+ key: "",
16057
+ value: void 0,
16058
+ onSetValue: (newLinkValue) => {
16059
+ editor.update(() => {
16060
+ if (newLinkValue === void 0) {
16061
+ return;
16062
+ }
16063
+ upsertLinkNode(newLinkValue);
16064
+ });
16065
+ }
16066
+ });
16067
+ return true;
16068
+ },
16069
+ COMMAND_PRIORITY_EDITOR
16070
+ ),
16071
+ editor.registerCommand(
16072
+ FOCUS_COMMAND,
16073
+ () => {
16074
+ setIsEditorFocused(true);
16075
+ return true;
16076
+ },
16077
+ COMMAND_PRIORITY_EDITOR
16078
+ ),
16079
+ editor.registerCommand(
16080
+ BLUR_COMMAND,
16081
+ () => {
16082
+ requestAnimationFrame(() => {
16083
+ if (linkPopoverElRef.current !== null) {
16084
+ const selection = window.getSelection();
16085
+ const range = selection == null ? void 0 : selection.getRangeAt(0);
16086
+ const elementWithinLinkPopoverWasSelected = range !== null && range !== void 0 && range.commonAncestorContainer !== null && linkPopoverElRef.current.contains(range.commonAncestorContainer);
16087
+ const elementWithinLinkPopoverWasFocused = document.activeElement !== null && document.activeElement !== void 0 && linkPopoverElRef.current.contains(document.activeElement);
16088
+ setIsLinkPopoverFocused(
16089
+ elementWithinLinkPopoverWasSelected || elementWithinLinkPopoverWasFocused
16090
+ );
16091
+ }
16092
+ setIsEditorFocused(false);
16093
+ });
16094
+ return true;
16095
+ },
16096
+ COMMAND_PRIORITY_EDITOR
16097
+ )
16098
+ );
16099
+ }, [editor, onConnectLink]);
16100
+ const maybeShowLinkToolbar = useCallback4(() => {
16101
+ if (!editor.isEditable()) {
16102
+ return;
16103
+ }
16104
+ const selection = $getSelection();
16105
+ if (!$isRangeSelection(selection)) {
16106
+ setLinkPopoverState(void 0);
16107
+ return;
16108
+ }
16109
+ const node = getSelectedNode(selection);
16110
+ const linkNode = getLinkAncestor(node);
16111
+ if (linkNode === null) {
16112
+ setLinkPopoverState(void 0);
16113
+ return;
16114
+ }
16115
+ const element = editor.getElementByKey(linkNode.getKey());
16116
+ if (!element) {
16117
+ setLinkPopoverState(void 0);
16118
+ return;
16119
+ }
16120
+ const { x, y } = {
16121
+ x: element.offsetLeft + LINK_POPOVER_OFFSET_X,
16122
+ y: element.offsetTop + element.clientHeight + LINK_POPOVER_OFFSET_Y
16123
+ };
16124
+ setLinkPopoverState({
16125
+ node: linkNode,
16126
+ position: {
16127
+ x,
16128
+ y
16129
+ }
16130
+ });
16131
+ }, [editor]);
16132
+ useEffect10(() => {
16133
+ return editor.registerUpdateListener(({ editorState }) => {
16134
+ requestAnimationFrame(() => {
16135
+ editorState.read(() => {
16136
+ maybeShowLinkToolbar();
16137
+ });
16138
+ });
16139
+ });
16140
+ }, [editor, maybeShowLinkToolbar]);
16141
+ const onEditLinkNode = (node) => {
16142
+ editor.getEditorState().read(() => {
16143
+ onConnectLink({
16144
+ key: node.getKey(),
16145
+ value: node.getLink(),
16146
+ onSetValue: (newLinkValue) => {
16147
+ editor.update(() => {
16148
+ editor.focus();
16149
+ if (newLinkValue === void 0) {
16150
+ removeLinkNode(node);
16151
+ return;
16152
+ }
16153
+ upsertLinkNode(newLinkValue);
16154
+ });
16155
+ }
16156
+ });
16157
+ });
16158
+ };
16159
+ return /* @__PURE__ */ jsxs59(Fragment13, { children: [
16160
+ /* @__PURE__ */ jsx88(
16161
+ NodeEventPlugin,
16162
+ {
16163
+ nodeType: LinkNode,
16164
+ eventType: "click",
16165
+ eventListener: (e) => {
16166
+ e.preventDefault();
16167
+ }
16168
+ }
16169
+ ),
16170
+ linkPopoverState ? /* @__PURE__ */ jsx88(
16171
+ "div",
16172
+ {
16173
+ css: linkPopover,
16174
+ style: {
16175
+ left: linkPopoverState.position.x,
16176
+ top: linkPopoverState.position.y
16177
+ },
16178
+ ref: linkPopoverElRef,
16179
+ children: /* @__PURE__ */ jsxs59("div", { css: linkPopoverContainer, children: [
16180
+ linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx88(
16181
+ "a",
16182
+ {
16183
+ href: `${linkPopoverState.node.__link.type === "email" ? "mailto:" : linkPopoverState.node.__link.type === "tel" ? "tel:" : ""}${linkPopoverState.node.__link.path}`,
16184
+ css: linkPopoverAnchor,
16185
+ target: "_blank",
16186
+ rel: "noopener noreferrer",
16187
+ children: linkPopoverState.node.__link.path
16188
+ }
16189
+ ),
16190
+ /* @__PURE__ */ jsx88(
16191
+ Button,
16192
+ {
16193
+ size: "xs",
16194
+ onClick: () => {
16195
+ onEditLinkNode(linkPopoverState.node);
16196
+ },
16197
+ buttonType: "ghost",
16198
+ children: /* @__PURE__ */ jsx88(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
16199
+ }
16200
+ )
16201
+ ] })
16202
+ }
16203
+ ) : null
16204
+ ] });
16205
+ }
16206
+ function getLinkAncestor(node) {
16207
+ return getAncestor(node, (ancestor) => {
16208
+ return $isLinkNode(ancestor);
16209
+ });
16210
+ }
16211
+
16212
+ // src/components/ParameterInputs/rich-text/ListIndentPlugin.tsx
16213
+ import { $getListDepth, $isListItemNode, $isListNode } from "@lexical/list";
16214
+ import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexical/react/LexicalComposerContext";
16215
+ import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin";
16216
+ import {
16217
+ $getSelection as $getSelection2,
16218
+ $isRangeSelection as $isRangeSelection2,
16219
+ COMMAND_PRIORITY_CRITICAL,
16220
+ INDENT_CONTENT_COMMAND
16221
+ } from "lexical";
16222
+ import { useEffect as useEffect11 } from "react";
16223
+ import { jsx as jsx89 } from "@emotion/react/jsx-runtime";
16224
+ function isIndentPermitted(maxDepth) {
16225
+ const selection = $getSelection2();
16226
+ if (!$isRangeSelection2(selection)) {
16227
+ return false;
16228
+ }
16229
+ const elementNodesInSelection = getElementNodesInSelection(selection);
16230
+ let totalDepth = 0;
16231
+ for (const elementNode of elementNodesInSelection) {
16232
+ if ($isListNode(elementNode)) {
16233
+ totalDepth = Math.max($getListDepth(elementNode) + 1, totalDepth);
16234
+ } else if ($isListItemNode(elementNode)) {
16235
+ const parent = elementNode.getParent();
16236
+ if (!$isListNode(parent)) {
16237
+ throw new Error("ListMaxIndentLevelPlugin: A ListItemNode must have a ListNode for a parent.");
16238
+ }
16239
+ totalDepth = Math.max($getListDepth(parent) + 1, totalDepth);
16240
+ }
16241
+ }
16242
+ return totalDepth <= maxDepth;
16243
+ }
16244
+ function ListIndentPlugin({ maxDepth }) {
16245
+ const [editor] = useLexicalComposerContext2();
16246
+ useEffect11(() => {
16247
+ return editor.registerCommand(
16248
+ INDENT_CONTENT_COMMAND,
16249
+ () => !isIndentPermitted(maxDepth),
16250
+ COMMAND_PRIORITY_CRITICAL
16251
+ );
16252
+ }, [editor, maxDepth]);
16253
+ return /* @__PURE__ */ jsx89(TabIndentationPlugin, {});
16254
+ }
16255
+
16256
+ // src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
16257
+ import { css as css72 } from "@emotion/react";
16258
+ import {
16259
+ $isListNode as $isListNode2,
16260
+ INSERT_ORDERED_LIST_COMMAND,
16261
+ INSERT_UNORDERED_LIST_COMMAND,
16262
+ ListNode,
16263
+ REMOVE_LIST_COMMAND
16264
+ } from "@lexical/list";
16265
+ import { useLexicalComposerContext as useLexicalComposerContext3 } from "@lexical/react/LexicalComposerContext";
16266
+ import { $createHeadingNode, $isHeadingNode } from "@lexical/rich-text";
16267
+ import { $setBlocksType } from "@lexical/selection";
16268
+ import { $findMatchingParent, $getNearestNodeOfType } from "@lexical/utils";
16269
+ import {
16270
+ $createParagraphNode,
16271
+ $getSelection as $getSelection3,
16272
+ $isRangeSelection as $isRangeSelection3,
16273
+ $isRootOrShadowRoot,
16274
+ COMMAND_PRIORITY_CRITICAL as COMMAND_PRIORITY_CRITICAL2,
16275
+ FORMAT_TEXT_COMMAND,
16276
+ SELECTION_CHANGE_COMMAND
16277
+ } from "lexical";
16278
+ import { useCallback as useCallback5, useEffect as useEffect12, useMemo as useMemo2, useState as useState10 } from "react";
16279
+ import { Fragment as Fragment14, jsx as jsx90, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
16280
+ var toolbar = css72`
16281
+ background: var(--gray-50);
16282
+ border-radius: var(--rounded-base);
16283
+ display: flex;
16284
+ /* We add 1px because we use a 1px wide separator */
16285
+ gap: calc(var(--spacing-sm) + 1px);
16286
+ margin: calc(var(--spacing-sm) + var(--spacing-xs)) var(--spacing-sm);
16287
+ padding: var(--spacing-sm);
16288
+ position: sticky;
16289
+ top: 0;
16290
+ z-index: 10;
16291
+ `;
16292
+ var toolbarGroup = css72`
16293
+ display: flex;
16294
+ gap: var(--spacing-xs);
16295
+ position: relative;
16296
+
16297
+ &:not(:first-child)::before {
16298
+ background-color: var(--gray-300);
16299
+ content: '';
16300
+ display: block;
16301
+ height: 24px;
16302
+ left: calc(var(--spacing-xs) * -1);
16303
+ position: absolute;
16304
+ top: 4px;
16305
+ width: 1px;
16306
+ }
16307
+ `;
16308
+ var toolbarButton = css72`
16309
+ align-items: center;
16310
+ appearance: none;
16311
+ border: 0;
16312
+ border-radius: var(--rounded-sm);
16313
+ box-shadow: none;
16314
+ color: var(--gray-900);
16315
+ display: flex;
16316
+ height: 32px;
16317
+ justify-content: center;
16318
+ min-width: 32px;
16319
+ padding: 0 var(--spacing-sm);
16320
+ `;
16321
+ var toolbarButtonActive = css72`
16322
+ background: var(--gray-200);
16323
+ `;
16324
+ var toolbarIcon = css72`
16325
+ color: inherit;
16326
+ `;
16327
+ var toolbarChevron = css72`
16328
+ margin-left: var(--spacing-xs);
16329
+ `;
16330
+ var ToolbarIcon = ({ icon }) => {
16331
+ return /* @__PURE__ */ jsx90(Icon, { icon, css: toolbarIcon, size: "1rem" });
16332
+ };
16333
+ var RichTextToolbar = ({ config }) => {
16334
+ const [editor] = useLexicalComposerContext3();
16335
+ const enabledBuiltInFormats = richTextBuiltInFormats.filter(
16336
+ (format) => {
16337
+ var _a, _b;
16338
+ return (_b = (_a = config == null ? void 0 : config.formatting) == null ? void 0 : _a.builtIn) == null ? void 0 : _b.includes(format.type);
16339
+ }
16340
+ );
16341
+ const enabledBuiltInElements = richTextBuiltInElements.filter(
16342
+ (element) => {
16343
+ var _a, _b;
16344
+ return (_b = (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn) == null ? void 0 : _b.includes(element.type);
16345
+ }
16346
+ );
16347
+ const showToolbar = enabledBuiltInFormats.length > 0 || enabledBuiltInElements.length > 0;
16348
+ const formatsWithIcon = /* @__PURE__ */ new Map([
16349
+ ["bold", "format-bold"],
16350
+ ["italic", "format-italic"],
16351
+ ["underline", "format-underline"],
16352
+ ["strikethrough", "format-strike"],
16353
+ ["code", "format-code"],
16354
+ ["superscript", "format-superscript"],
16355
+ ["subscript", "format-subscript"]
16356
+ ]);
16357
+ const enabledBuiltInFormatsWithIcon = enabledBuiltInFormats.filter(
16358
+ (format) => formatsWithIcon.has(format.type)
16359
+ );
16360
+ const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
16361
+ (format) => !formatsWithIcon.has(format.type)
16362
+ );
16363
+ const [activeFormats, setActiveFormats] = useState10([]);
16364
+ const [activeElement, setActiveElement] = useState10("paragraph");
16365
+ const enabledTextualElements = enabledBuiltInElements.filter(
16366
+ (element) => ["h1", "h2", "h3", "h4", "h5", "h6"].includes(element.type)
16367
+ );
16368
+ const elementTypeToLabel = (type) => {
16369
+ var _a;
16370
+ if (type === "paragraph") {
16371
+ return "Normal";
16372
+ }
16373
+ const element = enabledBuiltInElements.find((element2) => element2.type === type);
16374
+ return (_a = element == null ? void 0 : element.label) != null ? _a : type;
16375
+ };
16376
+ const onSelectElement = (type) => {
16377
+ if (activeElement === type) {
16378
+ return;
16379
+ }
16380
+ editor.update(() => {
16381
+ const selection = $getSelection3();
16382
+ if (!$isRangeSelection3(selection)) {
16383
+ return;
16384
+ }
16385
+ if (["h1", "h2", "h3", "h4", "h5", "h6"].includes(type)) {
16386
+ $setBlocksType(selection, () => $createHeadingNode(type));
16387
+ } else if (type === "paragraph") {
16388
+ $setBlocksType(selection, () => $createParagraphNode());
16389
+ }
16390
+ });
16391
+ };
16392
+ const [isLink, setIsLink] = useState10(false);
16393
+ const linkElementEnabled = useMemo2(() => {
16394
+ return enabledBuiltInElements.some((element) => element.type === "link");
16395
+ }, [enabledBuiltInElements]);
16396
+ const enabledLists = useMemo2(() => {
16397
+ return new Set(
16398
+ enabledBuiltInElements.filter((element) => ["orderedList", "unorderedList"].includes(element.type)).map((element) => element.type)
16399
+ );
16400
+ }, [enabledBuiltInElements]);
16401
+ const updateToolbar = useCallback5(() => {
16402
+ const selection = $getSelection3();
16403
+ if (!$isRangeSelection3(selection)) {
16404
+ return;
16405
+ }
16406
+ const newActiveFormats = [];
16407
+ for (const format of enabledBuiltInFormats) {
16408
+ if (selection.hasFormat(format.type)) {
16409
+ newActiveFormats.push(format.type);
16410
+ }
16411
+ }
16412
+ setActiveFormats(newActiveFormats);
16413
+ const anchorNode = selection.anchor.getNode();
16414
+ let element = anchorNode.getKey() === "root" ? anchorNode : $findMatchingParent(anchorNode, (e) => {
16415
+ const parent = e.getParent();
16416
+ return parent !== null && $isRootOrShadowRoot(parent);
16417
+ });
16418
+ if (element === null) {
16419
+ element = anchorNode.getTopLevelElementOrThrow();
16420
+ }
16421
+ const elementKey = element.getKey();
16422
+ const elementDOM = editor.getElementByKey(elementKey);
16423
+ if (elementDOM !== null) {
16424
+ if ($isListNode2(element)) {
16425
+ const parentList = $getNearestNodeOfType(anchorNode, ListNode);
16426
+ const type = parentList ? parentList.getListType() : element.getListType();
16427
+ setActiveElement(type === "bullet" ? "unorderedList" : "orderedList");
16428
+ } else {
16429
+ const type = $isHeadingNode(element) ? element.getTag() : element.getType();
16430
+ setActiveElement(type);
16431
+ }
16432
+ }
16433
+ const node = getSelectedNode(selection);
16434
+ if (getLinkAncestor(node) !== null) {
16435
+ setIsLink(true);
16436
+ } else {
16437
+ setIsLink(false);
16438
+ }
16439
+ }, [editor, enabledBuiltInFormats]);
16440
+ useEffect12(() => {
16441
+ return editor.registerCommand(
16442
+ SELECTION_CHANGE_COMMAND,
16443
+ (_payload) => {
16444
+ updateToolbar();
16445
+ return false;
16446
+ },
16447
+ COMMAND_PRIORITY_CRITICAL2
16448
+ );
16449
+ }, [editor, updateToolbar]);
16450
+ useEffect12(() => {
16451
+ return editor.registerUpdateListener(({ editorState }) => {
16452
+ requestAnimationFrame(() => {
16453
+ editorState.read(() => {
16454
+ updateToolbar();
16455
+ });
16456
+ });
16457
+ });
16458
+ }, [editor, updateToolbar]);
16459
+ if (!showToolbar) {
16460
+ return null;
16461
+ }
16462
+ return /* @__PURE__ */ jsxs60("div", { css: toolbar, children: [
16463
+ enabledTextualElements.length > 0 ? /* @__PURE__ */ jsx90(
16464
+ Menu,
16465
+ {
16466
+ menuLabel: "Elements",
16467
+ menuTrigger: /* @__PURE__ */ jsxs60("button", { css: toolbarButton, title: "Text formatting", children: [
16468
+ enabledTextualElements.some((textualElement) => textualElement.type === activeElement) ? elementTypeToLabel(activeElement) : elementTypeToLabel("paragraph"),
16469
+ " ",
16470
+ /* @__PURE__ */ jsx90(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
16471
+ ] }),
16472
+ placement: "bottom-start",
16473
+ children: [
16474
+ {
16475
+ label: "Normal",
16476
+ type: "paragraph"
16477
+ },
16478
+ ...enabledTextualElements
16479
+ ].map((element) => /* @__PURE__ */ jsx90(
16480
+ MenuItem,
16481
+ {
16482
+ onClick: () => {
16483
+ onSelectElement(element.type);
16484
+ },
16485
+ children: element.label
16486
+ },
16487
+ element.type
16488
+ ))
16489
+ }
16490
+ ) : null,
16491
+ enabledBuiltInFormatsWithIcon.length > 0 || enabledBuiltInFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs60("div", { css: toolbarGroup, children: [
16492
+ enabledBuiltInFormatsWithIcon.map((format) => /* @__PURE__ */ jsx90(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx90(
16493
+ "button",
16494
+ {
16495
+ onClick: () => {
16496
+ editor.dispatchCommand(FORMAT_TEXT_COMMAND, format.type);
16497
+ },
16498
+ css: [toolbarButton, activeFormats.includes(format.type) ? toolbarButtonActive : null],
16499
+ children: /* @__PURE__ */ jsx90(ToolbarIcon, { icon: formatsWithIcon.get(format.type) })
16500
+ }
16501
+ ) }, format.type)),
16502
+ enabledBuiltInFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx90(
16503
+ Menu,
16504
+ {
16505
+ menuLabel: "Text formatting",
16506
+ menuTrigger: /* @__PURE__ */ jsx90("button", { css: toolbarButton, title: "Text formatting", children: /* @__PURE__ */ jsx90(Icon, { icon: "more-alt", css: toolbarIcon }) }),
16507
+ placement: "bottom-start",
16508
+ children: enabledBuiltInFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx90(
16509
+ MenuItem,
16510
+ {
16511
+ onClick: () => {
16512
+ editor.dispatchCommand(FORMAT_TEXT_COMMAND, format.type);
16513
+ },
16514
+ children: format.label
16515
+ },
16516
+ format.type
16517
+ ))
16518
+ }
16519
+ ) : null
16520
+ ] }) : null,
16521
+ linkElementEnabled || enabledLists.size > 0 ? /* @__PURE__ */ jsxs60("div", { css: toolbarGroup, children: [
16522
+ linkElementEnabled ? /* @__PURE__ */ jsx90(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx90(
16523
+ "button",
16524
+ {
16525
+ onClick: () => {
16526
+ editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
16527
+ },
16528
+ css: [toolbarButton, isLink ? toolbarButtonActive : null],
16529
+ children: /* @__PURE__ */ jsx90(ToolbarIcon, { icon: "link" })
16530
+ }
16531
+ ) }) : null,
16532
+ enabledLists.size > 0 ? /* @__PURE__ */ jsxs60(Fragment14, { children: [
16533
+ enabledLists.has("unorderedList") ? /* @__PURE__ */ jsx90(Tooltip, { title: "Bullet list", placement: "top", children: /* @__PURE__ */ jsx90(
16534
+ "button",
16535
+ {
16536
+ onClick: () => {
16537
+ activeElement === "unorderedList" ? editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0);
16538
+ },
16539
+ css: [toolbarButton, activeElement === "unorderedList" ? toolbarButtonActive : null],
16540
+ children: /* @__PURE__ */ jsx90(ToolbarIcon, { icon: "layout-list" })
16541
+ }
16542
+ ) }) : null,
16543
+ enabledLists.has("orderedList") ? /* @__PURE__ */ jsx90(Tooltip, { title: "Numbered list", placement: "top", children: /* @__PURE__ */ jsx90(
16544
+ "button",
16545
+ {
16546
+ onClick: () => {
16547
+ activeElement === "orderedList" ? editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0);
16548
+ },
16549
+ css: [toolbarButton, activeElement === "orderedList" ? toolbarButtonActive : null],
16550
+ children: /* @__PURE__ */ jsx90(ToolbarIcon, { icon: "layout-list-numbered" })
16551
+ }
16552
+ ) }) : null
16553
+ ] }) : null
16554
+ ] }) : null
16555
+ ] });
16556
+ };
16557
+ var RichTextToolbar_default = RichTextToolbar;
16558
+
16559
+ // src/components/ParameterInputs/ParameterRichText.tsx
16560
+ import { Fragment as Fragment15, jsx as jsx91, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
16561
+ var ParameterRichText = ({
16562
+ label,
16563
+ labelLeadingIcon,
16564
+ hiddenLabel,
16565
+ id,
16566
+ errorMessage,
16567
+ caption,
16568
+ errorTestId,
16569
+ captionTestId,
16570
+ menuItems,
16571
+ value,
16572
+ onChange,
16573
+ onConnectLink,
16574
+ config,
16575
+ onRichTextInit,
16576
+ readOnly,
16577
+ editorWrapperClassName,
16578
+ editorInputClassName,
16579
+ editorFooter
16580
+ }) => {
16581
+ return /* @__PURE__ */ jsxs61(
16582
+ ParameterShell,
16583
+ {
16584
+ "data-test-id": "parameter-input",
16585
+ label,
16586
+ hiddenLabel,
16587
+ labelLeadingIcon,
16588
+ id,
16589
+ errorMessage,
16590
+ caption,
16591
+ errorTestId,
16592
+ captionTestId,
16593
+ menuItems,
16594
+ children: [
16595
+ /* @__PURE__ */ jsx91(
16596
+ ParameterRichTextInner,
16597
+ {
16598
+ value,
16599
+ onChange,
16600
+ onConnectLink,
16601
+ config,
16602
+ onRichTextInit,
16603
+ readOnly,
16604
+ editorWrapperClassName,
16605
+ editorInputClassName,
16606
+ editorFooter
16607
+ }
16608
+ ),
16609
+ menuItems ? /* @__PURE__ */ jsx91(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx91(Fragment15, { children: menuItems }) }) : null
16610
+ ]
16611
+ }
16612
+ );
16613
+ };
16614
+ var editorWrapper = css73`
16615
+ display: flex;
16616
+ flex-flow: column;
16617
+ flex-grow: 1;
16618
+ `;
16619
+ var editorContainer = css73`
16620
+ display: flex;
16621
+ flex-flow: column;
16622
+ flex-grow: 1;
16623
+ position: relative;
16624
+ `;
16625
+ var editorPlaceholder = css73`
16626
+ color: var(--gray-500);
16627
+ font-style: italic;
16628
+ /* 1px is added to make sure caret is clearly visible when field is focused
16629
+ instead of going under the placeholder */
16630
+ left: calc(var(--spacing-sm) + 1px);
16631
+ pointer-events: none;
16632
+ position: absolute;
16633
+ top: var(--spacing-xs);
16634
+ user-select: none;
16635
+ `;
16636
+ var editorInput = css73`
16637
+ background: var(--white);
16638
+ border: 1px solid var(--white);
16639
+ border-radius: var(--rounded-sm);
16640
+ color: var(--gray-700);
16641
+ flex-grow: 1;
16642
+ font-size: var(--fs-base);
16643
+ line-height: 1.2;
16644
+ min-height: 2rem;
16645
+ padding: var(--spacing-xs) var(--spacing-sm);
16646
+
16647
+ &:focus,
16648
+ &:focus-within {
16649
+ border-radius: var(--rounded-md);
16650
+ box-shadow: none;
16651
+ border: 1px solid var(--gray-300);
16652
+ outline: none;
16653
+ }
16654
+ `;
16655
+ var ParameterRichTextInner = ({
16656
+ value,
16657
+ onChange,
16658
+ onConnectLink,
16659
+ config,
16660
+ onRichTextInit,
16661
+ readOnly,
16662
+ editorWrapperClassName,
16663
+ editorInputClassName,
16664
+ editorFooter
16665
+ }) => {
16666
+ const lexicalConfig = {
16667
+ namespace: "uniform",
16668
+ onError: (error) => {
16669
+ console.error(error);
16670
+ },
16671
+ editorState: value ? JSON.stringify(value) : void 0,
16672
+ nodes: [ListNode2, ListItemNode, LinkNode, HeadingNode, ParagraphNode],
16673
+ theme: {
16674
+ text: {
16675
+ bold: textBold,
16676
+ italic: textItalic,
16677
+ underline: textUnderline,
16678
+ subscript: textSubscript,
16679
+ superscript: textSuperscript,
16680
+ strikethrough: textStrikethrough,
16681
+ underlineStrikethrough: textUnderlineStrikethrough,
16682
+ code: textCode
16683
+ },
16684
+ link: linkElement,
16685
+ heading: {
16686
+ h1: heading1Element,
16687
+ h2: heading2Element,
16688
+ h3: heading3Element,
16689
+ h4: heading4Element,
16690
+ h5: heading5Element,
16691
+ h6: heading6Element
16692
+ },
16693
+ paragraph: paragraphElement,
16694
+ list: {
16695
+ ol: orderedListElement,
16696
+ ul: unorderedListElement,
16697
+ listitem: listItemElement,
16698
+ nested: {
16699
+ listitem: nestedListItemElement
16700
+ }
16701
+ }
16702
+ },
16703
+ editable: !readOnly
16704
+ };
16705
+ return /* @__PURE__ */ jsxs61(Fragment15, { children: [
16706
+ /* @__PURE__ */ jsx91("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx91(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx91(
16707
+ RichText,
16708
+ {
16709
+ onChange,
16710
+ onConnectLink,
16711
+ config,
16712
+ onRichTextInit,
16713
+ readOnly,
16714
+ editorInputClassName
16715
+ }
16716
+ ) }) }),
16717
+ editorFooter ? editorFooter : null
16718
+ ] });
16719
+ };
16720
+ var RichText = ({
16721
+ onChange,
16722
+ onConnectLink,
16723
+ config,
16724
+ onRichTextInit,
16725
+ readOnly,
16726
+ editorInputClassName
16727
+ }) => {
16728
+ const editorContainerRef = useRef6(null);
16729
+ const [editor] = useLexicalComposerContext4();
16730
+ useEffect13(() => {
16731
+ if (onRichTextInit) {
16732
+ onRichTextInit(editor);
16733
+ }
16734
+ }, [editor, onRichTextInit]);
16735
+ useEffect13(() => {
16736
+ const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState }) => {
16737
+ requestAnimationFrame(() => {
16738
+ if (!deepEqual2(editorState.toJSON(), prevEditorState.toJSON())) {
16739
+ onChange == null ? void 0 : onChange(editorState.toJSON());
16740
+ }
16741
+ });
16742
+ });
16743
+ return () => {
16744
+ removeUpdateListener();
16745
+ };
16746
+ }, []);
16747
+ return /* @__PURE__ */ jsxs61(Fragment15, { children: [
16748
+ readOnly ? null : /* @__PURE__ */ jsx91(RichTextToolbar_default, { config }),
16749
+ /* @__PURE__ */ jsxs61("div", { css: editorContainer, ref: editorContainerRef, children: [
16750
+ /* @__PURE__ */ jsx91(
16751
+ RichTextPlugin,
16752
+ {
16753
+ contentEditable: /* @__PURE__ */ jsx91(ContentEditable, { css: editorInput, className: editorInputClassName }),
16754
+ placeholder: /* @__PURE__ */ jsx91("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
16755
+ ErrorBoundary: LexicalErrorBoundary
16756
+ }
16757
+ ),
16758
+ /* @__PURE__ */ jsx91(ListPlugin, {}),
16759
+ readOnly ? null : /* @__PURE__ */ jsx91(HistoryPlugin, {}),
16760
+ /* @__PURE__ */ jsx91(LinkNodePlugin, { onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve() }),
16761
+ /* @__PURE__ */ jsx91(ListIndentPlugin, { maxDepth: 4 })
16762
+ ] })
16763
+ ] });
16764
+ };
16765
+
16766
+ // src/components/ParameterInputs/ParameterSelect.tsx
16767
+ import { forwardRef as forwardRef13 } from "react";
16768
+ import { jsx as jsx92, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
16769
+ var ParameterSelect = forwardRef13(
16770
+ ({ defaultOption, options, ...props }, ref) => {
16771
+ const { shellProps, innerProps } = extractParameterProps(props);
16772
+ return /* @__PURE__ */ jsx92(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx92(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
16773
+ }
16774
+ );
16775
+ var ParameterSelectInner = forwardRef13(
16776
+ ({ defaultOption, options, ...props }, ref) => {
16777
+ const { id, label, hiddenLabel } = useParameterShell();
16778
+ return /* @__PURE__ */ jsxs62(
16779
+ "select",
16780
+ {
16781
+ css: [input2, selectInput],
16782
+ id,
16783
+ "aria-label": hiddenLabel ? label : void 0,
16784
+ ref,
16785
+ ...props,
16786
+ children: [
16787
+ defaultOption ? /* @__PURE__ */ jsx92("option", { value: "", children: defaultOption }) : null,
16788
+ options.map((option) => {
16789
+ var _a;
16790
+ return /* @__PURE__ */ jsx92("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
16791
+ })
16792
+ ]
16793
+ }
16794
+ );
16795
+ }
16796
+ );
16797
+
16798
+ // src/components/ParameterInputs/ParameterTextarea.tsx
16799
+ import { forwardRef as forwardRef14 } from "react";
16800
+ import { jsx as jsx93 } from "@emotion/react/jsx-runtime";
16801
+ var ParameterTextarea = forwardRef14((props, ref) => {
16802
+ const { shellProps, innerProps } = extractParameterProps(props);
16803
+ return /* @__PURE__ */ jsx93(ParameterShell, { "data-test-id": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx93(ParameterTextareaInner, { ref, ...innerProps }) });
16804
+ });
16805
+ var ParameterTextareaInner = forwardRef14(({ ...props }, ref) => {
16806
+ const { id, label, hiddenLabel } = useParameterShell();
16807
+ return /* @__PURE__ */ jsx93(
16808
+ "textarea",
16809
+ {
16810
+ css: [input2, textarea2],
16811
+ id,
16812
+ ref,
16813
+ "aria-label": hiddenLabel ? label : void 0,
16814
+ ...props
16815
+ }
16816
+ );
16817
+ });
16818
+
16819
+ // src/components/ParameterInputs/ParameterToggle.tsx
16820
+ import { forwardRef as forwardRef15 } from "react";
16821
+ import { jsx as jsx94, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
16822
+ var ParameterToggle = forwardRef15((props, ref) => {
16823
+ const { shellProps, innerProps } = extractParameterProps(props);
16824
+ return /* @__PURE__ */ jsx94(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx94(ParameterToggleInner, { ref, ...innerProps }) });
16825
+ });
16826
+ var ParameterToggleInner = forwardRef15(
16827
+ ({ ...props }, ref) => {
16828
+ const { id, label } = useParameterShell();
16829
+ return /* @__PURE__ */ jsxs63("label", { css: inputToggleLabel2, children: [
16830
+ /* @__PURE__ */ jsx94("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
16831
+ /* @__PURE__ */ jsx94("span", { css: inlineLabel2, children: label })
16832
+ ] });
16833
+ }
16834
+ );
16835
+
15449
16836
  // src/components/Popover/Popover.tsx
15450
- import { Fragment as Fragment14, jsx as jsx92, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
16837
+ import {
16838
+ Popover as ReakitPopover,
16839
+ PopoverDisclosure,
16840
+ usePopoverState
16841
+ } from "reakit/Popover";
16842
+ import { Portal as Portal2 } from "reakit/Portal";
16843
+ import { Fragment as Fragment16, jsx as jsx95, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
15451
16844
  var Popover2 = ({
15452
16845
  iconColor = "action",
15453
16846
  icon = "info",
@@ -15459,38 +16852,38 @@ var Popover2 = ({
15459
16852
  children
15460
16853
  }) => {
15461
16854
  const popover = usePopoverState({ placement });
15462
- return /* @__PURE__ */ jsxs62(Fragment14, { children: [
15463
- /* @__PURE__ */ jsxs62(PopoverDisclosure, { ...popover, css: PopoverBtn, title: buttonText, "data-test-id": testId, children: [
15464
- /* @__PURE__ */ jsx92(Icon, { icon, iconColor, size: iconSize }),
15465
- /* @__PURE__ */ jsx92("span", { hidden: true, children: buttonText })
16855
+ return /* @__PURE__ */ jsxs64(Fragment16, { children: [
16856
+ /* @__PURE__ */ jsxs64(PopoverDisclosure, { ...popover, css: PopoverBtn, title: buttonText, "data-test-id": testId, children: [
16857
+ /* @__PURE__ */ jsx95(Icon, { icon, iconColor, size: iconSize }),
16858
+ /* @__PURE__ */ jsx95("span", { hidden: true, children: buttonText })
15466
16859
  ] }),
15467
- /* @__PURE__ */ jsx92(Portal2, { children: /* @__PURE__ */ jsx92(ReakitPopover, { css: Popover, ...popover, "aria-label": ariaLabel, children }) })
16860
+ /* @__PURE__ */ jsx95(Portal2, { children: /* @__PURE__ */ jsx95(ReakitPopover, { css: Popover, ...popover, "aria-label": ariaLabel, children }) })
15468
16861
  ] });
15469
16862
  };
15470
16863
 
15471
16864
  // src/components/ProgressList/ProgressList.tsx
15472
- import { css as css71 } from "@emotion/react";
15473
- import { useMemo as useMemo2 } from "react";
16865
+ import { css as css75 } from "@emotion/react";
16866
+ import { useMemo as useMemo3 } from "react";
15474
16867
  import { CgCheckO as CgCheckO2, CgRadioCheck, CgRecord } from "react-icons/cg";
15475
16868
 
15476
16869
  // src/components/ProgressList/styles/ProgressList.styles.ts
15477
- import { css as css70 } from "@emotion/react";
15478
- var progressListStyles = css70`
16870
+ import { css as css74 } from "@emotion/react";
16871
+ var progressListStyles = css74`
15479
16872
  display: flex;
15480
16873
  flex-direction: column;
15481
16874
  gap: var(--spacing-sm);
15482
16875
  list-style-type: none;
15483
16876
  `;
15484
- var progressListItemStyles = css70`
16877
+ var progressListItemStyles = css74`
15485
16878
  display: flex;
15486
16879
  gap: var(--spacing-base);
15487
16880
  align-items: center;
15488
16881
  `;
15489
16882
 
15490
16883
  // src/components/ProgressList/ProgressList.tsx
15491
- import { jsx as jsx93, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
16884
+ import { jsx as jsx96, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
15492
16885
  var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
15493
- const itemsWithStatus = useMemo2(() => {
16886
+ const itemsWithStatus = useMemo3(() => {
15494
16887
  const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
15495
16888
  return items.map((item, index) => {
15496
16889
  let status = "queued";
@@ -15502,8 +16895,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
15502
16895
  return { ...item, status };
15503
16896
  });
15504
16897
  }, [items, inProgressId]);
15505
- return /* @__PURE__ */ jsx93("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
15506
- return /* @__PURE__ */ jsx93(
16898
+ return /* @__PURE__ */ jsx96("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
16899
+ return /* @__PURE__ */ jsx96(
15507
16900
  ProgressListItem,
15508
16901
  {
15509
16902
  status,
@@ -15523,7 +16916,7 @@ var ProgressListItem = ({
15523
16916
  errorLevel = "danger",
15524
16917
  autoEllipsis = false
15525
16918
  }) => {
15526
- const Icon2 = useMemo2(() => {
16919
+ const Icon2 = useMemo3(() => {
15527
16920
  if (error) {
15528
16921
  return warningIcon;
15529
16922
  }
@@ -15534,14 +16927,14 @@ var ProgressListItem = ({
15534
16927
  };
15535
16928
  return iconPerStatus[status];
15536
16929
  }, [status, error]);
15537
- const statusStyles = useMemo2(() => {
16930
+ const statusStyles = useMemo3(() => {
15538
16931
  if (error) {
15539
- return errorLevel === "caution" ? css71`
16932
+ return errorLevel === "caution" ? css75`
15540
16933
  color: rgb(161, 98, 7);
15541
16934
  & svg {
15542
16935
  color: rgb(250, 204, 21);
15543
16936
  }
15544
- ` : css71`
16937
+ ` : css75`
15545
16938
  color: rgb(185, 28, 28);
15546
16939
  & svg {
15547
16940
  color: var(--brand-primary-2);
@@ -15549,35 +16942,35 @@ var ProgressListItem = ({
15549
16942
  `;
15550
16943
  }
15551
16944
  const colorPerStatus = {
15552
- completed: css71`
16945
+ completed: css75`
15553
16946
  opacity: 0.75;
15554
16947
  `,
15555
- inProgress: css71`
16948
+ inProgress: css75`
15556
16949
  -webkit-text-stroke-width: thin;
15557
16950
  `,
15558
- queued: css71`
16951
+ queued: css75`
15559
16952
  opacity: 0.5;
15560
16953
  `
15561
16954
  };
15562
16955
  return colorPerStatus[status];
15563
16956
  }, [status, error, errorLevel]);
15564
- return /* @__PURE__ */ jsxs63("li", { css: [progressListItemStyles, statusStyles], children: [
15565
- /* @__PURE__ */ jsx93(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx93("div", { children: /* @__PURE__ */ jsx93(Icon2, { size: 20 }) }) }),
15566
- /* @__PURE__ */ jsxs63("div", { children: [
16957
+ return /* @__PURE__ */ jsxs65("li", { css: [progressListItemStyles, statusStyles], children: [
16958
+ /* @__PURE__ */ jsx96(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx96("div", { children: /* @__PURE__ */ jsx96(Icon2, { size: 20 }) }) }),
16959
+ /* @__PURE__ */ jsxs65("div", { children: [
15567
16960
  children,
15568
- /* @__PURE__ */ jsx93("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
16961
+ /* @__PURE__ */ jsx96("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
15569
16962
  ] })
15570
16963
  ] });
15571
16964
  };
15572
16965
 
15573
16966
  // src/components/SegmentedControl/SegmentedControl.tsx
15574
- import { css as css73 } from "@emotion/react";
15575
- import { useCallback as useCallback4, useMemo as useMemo3 } from "react";
16967
+ import { css as css77 } from "@emotion/react";
16968
+ import { useCallback as useCallback6, useMemo as useMemo4 } from "react";
15576
16969
  import { CgCheck as CgCheck4 } from "react-icons/cg";
15577
16970
 
15578
16971
  // src/components/SegmentedControl/SegmentedControl.styles.ts
15579
- import { css as css72 } from "@emotion/react";
15580
- var segmentedControlStyles = css72`
16972
+ import { css as css76 } from "@emotion/react";
16973
+ var segmentedControlStyles = css76`
15581
16974
  --segmented-control-rounded-value: var(--rounded-base);
15582
16975
  --segmented-control-border-width: 1px;
15583
16976
  --segmented-control-selected-color: var(--brand-secondary-3);
@@ -15596,14 +16989,14 @@ var segmentedControlStyles = css72`
15596
16989
  border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
15597
16990
  font-size: var(--fs-xs);
15598
16991
  `;
15599
- var segmentedControlVerticalStyles = css72`
16992
+ var segmentedControlVerticalStyles = css76`
15600
16993
  flex-direction: column;
15601
16994
  --segmented-control-first-border-radius: var(--segmented-control-rounded-value)
15602
16995
  var(--segmented-control-rounded-value) 0 0;
15603
16996
  --segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
15604
16997
  var(--segmented-control-rounded-value);
15605
16998
  `;
15606
- var segmentedControlItemStyles = css72`
16999
+ var segmentedControlItemStyles = css76`
15607
17000
  &:first-of-type label {
15608
17001
  border-radius: var(--segmented-control-first-border-radius);
15609
17002
  }
@@ -15611,10 +17004,10 @@ var segmentedControlItemStyles = css72`
15611
17004
  border-radius: var(--segmented-control-last-border-radius);
15612
17005
  }
15613
17006
  `;
15614
- var segmentedControlInputStyles = css72`
17007
+ var segmentedControlInputStyles = css76`
15615
17008
  ${accessibleHidden}
15616
17009
  `;
15617
- var segmentedControlLabelStyles = css72`
17010
+ var segmentedControlLabelStyles = css76`
15618
17011
  position: relative;
15619
17012
  display: flex;
15620
17013
  align-items: center;
@@ -15651,23 +17044,23 @@ var segmentedControlLabelStyles = css72`
15651
17044
  background-color: var(--gray-400);
15652
17045
  }
15653
17046
  `;
15654
- var segmentedControlLabelIconOnlyStyles = css72`
17047
+ var segmentedControlLabelIconOnlyStyles = css76`
15655
17048
  padding-inline: 0.5em;
15656
17049
  `;
15657
- var segmentedControlLabelCheckStyles = css72`
17050
+ var segmentedControlLabelCheckStyles = css76`
15658
17051
  opacity: 0.5;
15659
17052
  `;
15660
- var segmentedControlLabelContentStyles = css72`
17053
+ var segmentedControlLabelContentStyles = css76`
15661
17054
  display: flex;
15662
17055
  align-items: center;
15663
17056
  justify-content: center;
15664
17057
  gap: var(--spacing-sm);
15665
17058
  height: 100%;
15666
17059
  `;
15667
- var segmentedControlLabelTextStyles = css72``;
17060
+ var segmentedControlLabelTextStyles = css76``;
15668
17061
 
15669
17062
  // src/components/SegmentedControl/SegmentedControl.tsx
15670
- import { jsx as jsx94, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
17063
+ import { jsx as jsx97, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
15671
17064
  var SegmentedControl = ({
15672
17065
  name,
15673
17066
  options,
@@ -15679,7 +17072,7 @@ var SegmentedControl = ({
15679
17072
  size = "md",
15680
17073
  ...props
15681
17074
  }) => {
15682
- const onOptionChange = useCallback4(
17075
+ const onOptionChange = useCallback6(
15683
17076
  (event) => {
15684
17077
  if (event.target.checked) {
15685
17078
  onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
@@ -15687,18 +17080,18 @@ var SegmentedControl = ({
15687
17080
  },
15688
17081
  [options, onChange]
15689
17082
  );
15690
- const sizeStyles = useMemo3(() => {
17083
+ const sizeStyles = useMemo4(() => {
15691
17084
  const map = {
15692
- sm: css73({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
15693
- md: css73({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
15694
- lg: css73({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
17085
+ sm: css77({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
17086
+ md: css77({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
17087
+ lg: css77({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
15695
17088
  };
15696
17089
  return map[size];
15697
17090
  }, [size]);
15698
- const isIconOnly = useMemo3(() => {
17091
+ const isIconOnly = useMemo4(() => {
15699
17092
  return options.every((option) => option.icon && !option.label);
15700
17093
  }, [options]);
15701
- return /* @__PURE__ */ jsx94(
17094
+ return /* @__PURE__ */ jsx97(
15702
17095
  "div",
15703
17096
  {
15704
17097
  css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
@@ -15706,11 +17099,11 @@ var SegmentedControl = ({
15706
17099
  children: options.map((option, index) => {
15707
17100
  const text = option.label ? option.label : option.icon ? null : String(option.value);
15708
17101
  const isDisabled = disabled || option.disabled;
15709
- return /* @__PURE__ */ jsx94(
17102
+ return /* @__PURE__ */ jsx97(
15710
17103
  Tooltip,
15711
17104
  {
15712
17105
  title: isDisabled || !option.tooltip ? "" : option.tooltip,
15713
- children: /* @__PURE__ */ jsx94("div", { css: segmentedControlItemStyles, "data-test-id": "container-segmented-control", children: /* @__PURE__ */ jsxs64(
17106
+ children: /* @__PURE__ */ jsx97("div", { css: segmentedControlItemStyles, "data-test-id": "container-segmented-control", children: /* @__PURE__ */ jsxs66(
15714
17107
  "label",
15715
17108
  {
15716
17109
  css: [
@@ -15719,7 +17112,7 @@ var SegmentedControl = ({
15719
17112
  isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
15720
17113
  ],
15721
17114
  children: [
15722
- /* @__PURE__ */ jsx94(
17115
+ /* @__PURE__ */ jsx97(
15723
17116
  "input",
15724
17117
  {
15725
17118
  css: segmentedControlInputStyles,
@@ -15731,10 +17124,10 @@ var SegmentedControl = ({
15731
17124
  disabled: isDisabled
15732
17125
  }
15733
17126
  ),
15734
- option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx94(CgCheck4, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
15735
- /* @__PURE__ */ jsxs64("span", { css: segmentedControlLabelContentStyles, children: [
15736
- !option.icon ? null : /* @__PURE__ */ jsx94(option.icon, { size: "1.5em" }),
15737
- !text ? null : /* @__PURE__ */ jsx94("span", { css: segmentedControlLabelTextStyles, children: text })
17127
+ option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx97(CgCheck4, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
17128
+ /* @__PURE__ */ jsxs66("span", { css: segmentedControlLabelContentStyles, children: [
17129
+ !option.icon ? null : /* @__PURE__ */ jsx97(option.icon, { size: "1.5em" }),
17130
+ !text ? null : /* @__PURE__ */ jsx97("span", { css: segmentedControlLabelTextStyles, children: text })
15738
17131
  ] })
15739
17132
  ]
15740
17133
  }
@@ -15748,18 +17141,18 @@ var SegmentedControl = ({
15748
17141
  };
15749
17142
 
15750
17143
  // src/components/Skeleton/Skeleton.styles.ts
15751
- import { css as css74, keyframes as keyframes4 } from "@emotion/react";
17144
+ import { css as css78, keyframes as keyframes4 } from "@emotion/react";
15752
17145
  var lightFadingOut = keyframes4`
15753
17146
  from { opacity: 0.1; }
15754
17147
  to { opacity: 0.025; }
15755
17148
  `;
15756
- var skeletonStyles = css74`
17149
+ var skeletonStyles = css78`
15757
17150
  animation: ${lightFadingOut} 1s ease-out infinite alternate;
15758
17151
  background-color: var(--gray-900);
15759
17152
  `;
15760
17153
 
15761
17154
  // src/components/Skeleton/Skeleton.tsx
15762
- import { jsx as jsx95 } from "@emotion/react/jsx-runtime";
17155
+ import { jsx as jsx98 } from "@emotion/react/jsx-runtime";
15763
17156
  var Skeleton = ({
15764
17157
  width = "100%",
15765
17158
  height = "1.25rem",
@@ -15767,7 +17160,7 @@ var Skeleton = ({
15767
17160
  circle = false,
15768
17161
  children,
15769
17162
  ...otherProps
15770
- }) => /* @__PURE__ */ jsx95(
17163
+ }) => /* @__PURE__ */ jsx98(
15771
17164
  "div",
15772
17165
  {
15773
17166
  css: [
@@ -15790,8 +17183,8 @@ var Skeleton = ({
15790
17183
  import * as React19 from "react";
15791
17184
 
15792
17185
  // src/components/Switch/Switch.styles.ts
15793
- import { css as css75 } from "@emotion/react";
15794
- var SwitchInputContainer = css75`
17186
+ import { css as css79 } from "@emotion/react";
17187
+ var SwitchInputContainer = css79`
15795
17188
  cursor: pointer;
15796
17189
  display: inline-block;
15797
17190
  position: relative;
@@ -15800,7 +17193,7 @@ var SwitchInputContainer = css75`
15800
17193
  vertical-align: middle;
15801
17194
  user-select: none;
15802
17195
  `;
15803
- var SwitchInput = css75`
17196
+ var SwitchInput = css79`
15804
17197
  appearance: none;
15805
17198
  border-radius: var(--rounded-full);
15806
17199
  background-color: var(--white);
@@ -15838,7 +17231,7 @@ var SwitchInput = css75`
15838
17231
  cursor: not-allowed;
15839
17232
  }
15840
17233
  `;
15841
- var SwitchInputDisabled = css75`
17234
+ var SwitchInputDisabled = css79`
15842
17235
  opacity: var(--opacity-50);
15843
17236
  cursor: not-allowed;
15844
17237
 
@@ -15846,7 +17239,7 @@ var SwitchInputDisabled = css75`
15846
17239
  cursor: not-allowed;
15847
17240
  }
15848
17241
  `;
15849
- var SwitchInputLabel = css75`
17242
+ var SwitchInputLabel = css79`
15850
17243
  align-items: center;
15851
17244
  color: var(--brand-secondary-1);
15852
17245
  display: inline-flex;
@@ -15868,26 +17261,26 @@ var SwitchInputLabel = css75`
15868
17261
  top: 0;
15869
17262
  }
15870
17263
  `;
15871
- var SwitchText = css75`
17264
+ var SwitchText = css79`
15872
17265
  color: var(--gray-500);
15873
17266
  font-size: var(--fs-sm);
15874
17267
  padding-inline: var(--spacing-2xl) 0;
15875
17268
  `;
15876
17269
 
15877
17270
  // src/components/Switch/Switch.tsx
15878
- import { Fragment as Fragment15, jsx as jsx96, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
17271
+ import { Fragment as Fragment17, jsx as jsx99, jsxs as jsxs67 } from "@emotion/react/jsx-runtime";
15879
17272
  var Switch = React19.forwardRef(
15880
17273
  ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
15881
17274
  let additionalText = infoText;
15882
17275
  if (infoText && toggleText) {
15883
17276
  additionalText = inputProps.checked ? toggleText : infoText;
15884
17277
  }
15885
- return /* @__PURE__ */ jsxs65(Fragment15, { children: [
15886
- /* @__PURE__ */ jsxs65("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
15887
- /* @__PURE__ */ jsx96("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
15888
- /* @__PURE__ */ jsx96("span", { css: SwitchInputLabel, children: label })
17278
+ return /* @__PURE__ */ jsxs67(Fragment17, { children: [
17279
+ /* @__PURE__ */ jsxs67("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
17280
+ /* @__PURE__ */ jsx99("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
17281
+ /* @__PURE__ */ jsx99("span", { css: SwitchInputLabel, children: label })
15889
17282
  ] }),
15890
- additionalText ? /* @__PURE__ */ jsx96("p", { css: SwitchText, children: additionalText }) : null,
17283
+ additionalText ? /* @__PURE__ */ jsx99("p", { css: SwitchText, children: additionalText }) : null,
15891
17284
  children
15892
17285
  ] });
15893
17286
  }
@@ -15897,69 +17290,69 @@ var Switch = React19.forwardRef(
15897
17290
  import * as React20 from "react";
15898
17291
 
15899
17292
  // src/components/Table/Table.styles.ts
15900
- import { css as css76 } from "@emotion/react";
15901
- var table = css76`
17293
+ import { css as css80 } from "@emotion/react";
17294
+ var table = css80`
15902
17295
  border-bottom: 1px solid var(--gray-400);
15903
17296
  border-collapse: collapse;
15904
17297
  min-width: 100%;
15905
17298
  table-layout: auto;
15906
17299
  `;
15907
- var tableHead = css76`
17300
+ var tableHead = css80`
15908
17301
  background: var(--gray-100);
15909
17302
  color: var(--brand-secondary-1);
15910
17303
  text-align: left;
15911
17304
  `;
15912
- var tableRow = css76`
17305
+ var tableRow = css80`
15913
17306
  border-bottom: 1px solid var(--gray-200);
15914
17307
  `;
15915
- var tableCellHead = css76`
17308
+ var tableCellHead = css80`
15916
17309
  font-size: var(--fs-sm);
15917
17310
  padding: var(--spacing-base) var(--spacing-md);
15918
17311
  text-transform: uppercase;
15919
17312
  font-weight: var(--fw-bold);
15920
17313
  `;
15921
- var tableCellData = css76`
17314
+ var tableCellData = css80`
15922
17315
  padding: var(--spacing-base) var(--spacing-md);
15923
17316
  `;
15924
17317
 
15925
17318
  // src/components/Table/Table.tsx
15926
- import { jsx as jsx97 } from "@emotion/react/jsx-runtime";
17319
+ import { jsx as jsx100 } from "@emotion/react/jsx-runtime";
15927
17320
  var Table = React20.forwardRef(({ children, ...otherProps }, ref) => {
15928
- return /* @__PURE__ */ jsx97("table", { ref, css: table, ...otherProps, children });
17321
+ return /* @__PURE__ */ jsx100("table", { ref, css: table, ...otherProps, children });
15929
17322
  });
15930
17323
  var TableHead = React20.forwardRef(
15931
17324
  ({ children, ...otherProps }, ref) => {
15932
- return /* @__PURE__ */ jsx97("thead", { ref, css: tableHead, ...otherProps, children });
17325
+ return /* @__PURE__ */ jsx100("thead", { ref, css: tableHead, ...otherProps, children });
15933
17326
  }
15934
17327
  );
15935
17328
  var TableBody = React20.forwardRef(
15936
17329
  ({ children, ...otherProps }, ref) => {
15937
- return /* @__PURE__ */ jsx97("tbody", { ref, ...otherProps, children });
17330
+ return /* @__PURE__ */ jsx100("tbody", { ref, ...otherProps, children });
15938
17331
  }
15939
17332
  );
15940
17333
  var TableFoot = React20.forwardRef(
15941
17334
  ({ children, ...otherProps }, ref) => {
15942
- return /* @__PURE__ */ jsx97("tfoot", { ref, ...otherProps, children });
17335
+ return /* @__PURE__ */ jsx100("tfoot", { ref, ...otherProps, children });
15943
17336
  }
15944
17337
  );
15945
17338
  var TableRow = React20.forwardRef(
15946
17339
  ({ children, ...otherProps }, ref) => {
15947
- return /* @__PURE__ */ jsx97("tr", { ref, css: tableRow, ...otherProps, children });
17340
+ return /* @__PURE__ */ jsx100("tr", { ref, css: tableRow, ...otherProps, children });
15948
17341
  }
15949
17342
  );
15950
17343
  var TableCellHead = React20.forwardRef(
15951
17344
  ({ children, ...otherProps }, ref) => {
15952
- return /* @__PURE__ */ jsx97("th", { ref, css: tableCellHead, ...otherProps, children });
17345
+ return /* @__PURE__ */ jsx100("th", { ref, css: tableCellHead, ...otherProps, children });
15953
17346
  }
15954
17347
  );
15955
17348
  var TableCellData = React20.forwardRef(
15956
17349
  ({ children, ...otherProps }, ref) => {
15957
- return /* @__PURE__ */ jsx97("td", { ref, css: tableCellData, ...otherProps, children });
17350
+ return /* @__PURE__ */ jsx100("td", { ref, css: tableCellData, ...otherProps, children });
15958
17351
  }
15959
17352
  );
15960
17353
 
15961
17354
  // src/components/Tabs/Tabs.tsx
15962
- import { createContext as createContext6, useContext as useContext7, useEffect as useEffect10, useMemo as useMemo4 } from "react";
17355
+ import { createContext as createContext6, useContext as useContext7, useEffect as useEffect14, useMemo as useMemo5 } from "react";
15963
17356
  import {
15964
17357
  Tab as ReakitTab,
15965
17358
  TabList as ReakitTabList,
@@ -15968,8 +17361,8 @@ import {
15968
17361
  } from "reakit/Tab";
15969
17362
 
15970
17363
  // src/components/Tabs/Tabs.styles.ts
15971
- import { css as css77 } from "@emotion/react";
15972
- var tabButtonStyles = css77`
17364
+ import { css as css81 } from "@emotion/react";
17365
+ var tabButtonStyles = css81`
15973
17366
  align-items: center;
15974
17367
  border: 0;
15975
17368
  height: 2.5rem;
@@ -15986,14 +17379,14 @@ var tabButtonStyles = css77`
15986
17379
  box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
15987
17380
  }
15988
17381
  `;
15989
- var tabButtonGroupStyles = css77`
17382
+ var tabButtonGroupStyles = css81`
15990
17383
  display: flex;
15991
17384
  gap: var(--spacing-base);
15992
17385
  border-bottom: 1px solid var(--gray-300);
15993
17386
  `;
15994
17387
 
15995
17388
  // src/components/Tabs/Tabs.tsx
15996
- import { jsx as jsx98 } from "@emotion/react/jsx-runtime";
17389
+ import { jsx as jsx101 } from "@emotion/react/jsx-runtime";
15997
17390
  var CurrentTabContext = createContext6(null);
15998
17391
  var useCurrentTab = () => {
15999
17392
  const context = useContext7(CurrentTabContext);
@@ -16003,13 +17396,13 @@ var useCurrentTab = () => {
16003
17396
  return context;
16004
17397
  };
16005
17398
  var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...props }) => {
16006
- const selected = useMemo4(() => {
17399
+ const selected = useMemo5(() => {
16007
17400
  if (selectedId)
16008
17401
  return selectedId;
16009
17402
  return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
16010
17403
  }, [selectedId, useHashForState]);
16011
17404
  const tab = useTabState({ ...props, selectedId: selected });
16012
- useEffect10(() => {
17405
+ useEffect14(() => {
16013
17406
  var _a;
16014
17407
  const selectedValueWithoutNull = (_a = tab.selectedId) != null ? _a : void 0;
16015
17408
  onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -16017,29 +17410,29 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
16017
17410
  window.location.hash = selectedValueWithoutNull != null ? selectedValueWithoutNull : "";
16018
17411
  }
16019
17412
  }, [tab.selectedId, onSelectedIdChange, useHashForState]);
16020
- useEffect10(() => {
17413
+ useEffect14(() => {
16021
17414
  if (selected && selected !== tab.selectedId) {
16022
17415
  tab.setSelectedId(selected);
16023
17416
  }
16024
17417
  }, [selected]);
16025
- return /* @__PURE__ */ jsx98(CurrentTabContext.Provider, { value: tab, children });
17418
+ return /* @__PURE__ */ jsx101(CurrentTabContext.Provider, { value: tab, children });
16026
17419
  };
16027
17420
  var TabButtonGroup = ({ children, ...props }) => {
16028
17421
  const currentTab = useCurrentTab();
16029
- return /* @__PURE__ */ jsx98(ReakitTabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
17422
+ return /* @__PURE__ */ jsx101(ReakitTabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
16030
17423
  };
16031
17424
  var TabButton = ({ children, id, ...props }) => {
16032
17425
  const currentTab = useCurrentTab();
16033
- return /* @__PURE__ */ jsx98(ReakitTab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
17426
+ return /* @__PURE__ */ jsx101(ReakitTab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
16034
17427
  };
16035
17428
  var TabContent = ({ children, ...props }) => {
16036
17429
  const currentTab = useCurrentTab();
16037
- return /* @__PURE__ */ jsx98(ReakitTabPanel, { ...props, ...currentTab, children });
17430
+ return /* @__PURE__ */ jsx101(ReakitTabPanel, { ...props, ...currentTab, children });
16038
17431
  };
16039
17432
 
16040
17433
  // src/components/Validation/StatusBullet.styles.ts
16041
- import { css as css78 } from "@emotion/react";
16042
- var StatusBulletContainer = css78`
17434
+ import { css as css82 } from "@emotion/react";
17435
+ var StatusBulletContainer = css82`
16043
17436
  align-items: center;
16044
17437
  align-self: center;
16045
17438
  color: var(--gray-500);
@@ -16056,51 +17449,51 @@ var StatusBulletContainer = css78`
16056
17449
  display: block;
16057
17450
  }
16058
17451
  `;
16059
- var StatusBulletBase = css78`
17452
+ var StatusBulletBase = css82`
16060
17453
  font-size: var(--fs-sm);
16061
17454
  &:before {
16062
17455
  width: var(--fs-xs);
16063
17456
  height: var(--fs-xs);
16064
17457
  }
16065
17458
  `;
16066
- var StatusBulletSmall = css78`
17459
+ var StatusBulletSmall = css82`
16067
17460
  font-size: var(--fs-xs);
16068
17461
  &:before {
16069
17462
  width: var(--fs-xxs);
16070
17463
  height: var(--fs-xxs);
16071
17464
  }
16072
17465
  `;
16073
- var StatusDraft = css78`
17466
+ var StatusDraft = css82`
16074
17467
  &:before {
16075
17468
  background: var(--white);
16076
17469
  box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
16077
17470
  }
16078
17471
  `;
16079
- var StatusModified = css78`
17472
+ var StatusModified = css82`
16080
17473
  &:before {
16081
17474
  background: linear-gradient(to right, var(--white) 50%, var(--primary-action-default) 50% 100%);
16082
17475
  box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
16083
17476
  }
16084
17477
  `;
16085
- var StatusError = css78`
17478
+ var StatusError = css82`
16086
17479
  color: var(--error);
16087
17480
  &:before {
16088
17481
  background: linear-gradient(120deg, var(--error) 40%, var(--white) 50%, var(--error) 60%);
16089
17482
  }
16090
17483
  `;
16091
- var StatusPublished = css78`
17484
+ var StatusPublished = css82`
16092
17485
  &:before {
16093
17486
  background: var(--primary-action-default);
16094
17487
  }
16095
17488
  `;
16096
- var StatusOrphan = css78`
17489
+ var StatusOrphan = css82`
16097
17490
  &:before {
16098
17491
  background: var(--brand-secondary-5);
16099
17492
  }
16100
17493
  `;
16101
17494
 
16102
17495
  // src/components/Validation/StatusBullet.tsx
16103
- import { jsx as jsx99 } from "@emotion/react/jsx-runtime";
17496
+ import { jsx as jsx102 } from "@emotion/react/jsx-runtime";
16104
17497
  var StatusBullet = ({
16105
17498
  status,
16106
17499
  hideText = false,
@@ -16117,7 +17510,7 @@ var StatusBullet = ({
16117
17510
  Draft: StatusDraft
16118
17511
  };
16119
17512
  const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
16120
- return /* @__PURE__ */ jsx99(
17513
+ return /* @__PURE__ */ jsx102(
16121
17514
  "span",
16122
17515
  {
16123
17516
  role: "status",
@@ -16181,6 +17574,7 @@ export {
16181
17574
  LimitsBar,
16182
17575
  Link,
16183
17576
  LinkList,
17577
+ LinkNode,
16184
17578
  LinkWithRef,
16185
17579
  LoadingCardSkeleton2 as LoadingCardSkeleton,
16186
17580
  LoadingIcon,
@@ -16294,6 +17688,9 @@ export {
16294
17688
  queryStringIcon,
16295
17689
  rectangleRoundedIcon,
16296
17690
  replaceUnderscoreInString,
17691
+ richTextBuiltInElements,
17692
+ richTextBuiltInFormats,
17693
+ richTextIsValueConsideredEmpty,
16297
17694
  ripple,
16298
17695
  scrollbarStyles,
16299
17696
  settings,