@uniformdev/design-system 19.177.2-alpha.10 → 19.178.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -14150,7 +14150,6 @@ var Menu = React7.forwardRef(function Menu2({
14150
14150
  menuItemsContainerCssClasses,
14151
14151
  testId,
14152
14152
  maxMenuHeight,
14153
- portalElement,
14154
14153
  ...props
14155
14154
  }, ref) {
14156
14155
  const placementOverride = legacyPlacements.includes(placement) ? void 0 : placement;
@@ -14161,7 +14160,6 @@ var Menu = React7.forwardRef(function Menu2({
14161
14160
  import_react37.Menu,
14162
14161
  {
14163
14162
  portal: !withoutPortal,
14164
- portalElement,
14165
14163
  unmountOnHide: true,
14166
14164
  gutter: 0,
14167
14165
  shift: menu.parent ? -4 : 0,
@@ -22147,20 +22145,18 @@ var ParameterNameAndPublicIdInput = ({
22147
22145
 
22148
22146
  // src/components/ParameterInputs/ParameterRichText.tsx
22149
22147
  init_emotion_jsx_shim();
22150
- var import_react154 = require("@emotion/react");
22148
+ var import_react150 = require("@emotion/react");
22151
22149
  var import_list3 = require("@lexical/list");
22152
22150
  var import_markdown = require("@lexical/markdown");
22153
22151
  var import_LexicalComposer = require("@lexical/react/LexicalComposer");
22154
- var import_LexicalComposerContext7 = require("@lexical/react/LexicalComposerContext");
22152
+ var import_LexicalComposerContext5 = require("@lexical/react/LexicalComposerContext");
22155
22153
  var import_LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
22156
22154
  var import_LexicalErrorBoundary = __toESM(require("@lexical/react/LexicalErrorBoundary"));
22157
22155
  var import_LexicalHistoryPlugin = require("@lexical/react/LexicalHistoryPlugin");
22158
22156
  var import_LexicalListPlugin = require("@lexical/react/LexicalListPlugin");
22159
22157
  var import_LexicalMarkdownShortcutPlugin = require("@lexical/react/LexicalMarkdownShortcutPlugin");
22160
22158
  var import_LexicalRichTextPlugin = require("@lexical/react/LexicalRichTextPlugin");
22161
- var import_LexicalTablePlugin = require("@lexical/react/LexicalTablePlugin");
22162
22159
  var import_rich_text2 = require("@lexical/rich-text");
22163
- var import_table4 = require("@lexical/table");
22164
22160
 
22165
22161
  // ../richtext/dist/index.mjs
22166
22162
  init_emotion_jsx_shim();
@@ -22209,10 +22205,6 @@ var richTextBuiltInElements = [
22209
22205
  label: "Code Block",
22210
22206
  type: "code"
22211
22207
  },
22212
- {
22213
- label: "Table",
22214
- type: "table"
22215
- },
22216
22208
  {
22217
22209
  label: "Dynamic Token",
22218
22210
  type: "variable"
@@ -22259,8 +22251,8 @@ var getLabelForElement = (type) => {
22259
22251
 
22260
22252
  // src/components/ParameterInputs/ParameterRichText.tsx
22261
22253
  var import_fast_equals2 = require("fast-equals");
22262
- var import_lexical8 = require("lexical");
22263
- var import_react155 = require("react");
22254
+ var import_lexical6 = require("lexical");
22255
+ var import_react151 = require("react");
22264
22256
 
22265
22257
  // src/components/ParameterInputs/rich-text/CustomCodeNode.ts
22266
22258
  init_emotion_jsx_shim();
@@ -22478,46 +22470,6 @@ var codeElement = import_css2.css`
22478
22470
  margin-bottom: 0;
22479
22471
  }
22480
22472
  `;
22481
- var tableElement = import_css2.css`
22482
- border-collapse: collapse;
22483
- border-spacing: 0;
22484
- border-color: var(--gray-300);
22485
- border-width: 1px;
22486
- border-style: solid;
22487
- margin-bottom: var(--spacing-base);
22488
- margin-top: 0;
22489
-
22490
- &:last-child {
22491
- margin-bottom: 0;
22492
- }
22493
- `;
22494
- var tableCellElement = import_css2.css`
22495
- background-color: var(--white);
22496
- border-color: var(--gray-300);
22497
- border-style: solid;
22498
- border-width: 1px;
22499
- box-sizing: unset;
22500
- min-width: 2rem;
22501
- outline: none;
22502
- padding: var(--spacing-sm);
22503
- text-align: start;
22504
- vertical-align: top;
22505
- width: 7rem;
22506
- `;
22507
- var tableHeaderElement = import_css2.css`
22508
- background-color: var(--gray-100);
22509
- border-color: var(--gray-300);
22510
- border-style: solid;
22511
- border-width: 1px;
22512
- box-sizing: unset;
22513
- font-weight: normal;
22514
- min-width: 2rem;
22515
- outline: none;
22516
- padding: var(--spacing-sm);
22517
- text-align: start;
22518
- vertical-align: top;
22519
- width: 7rem;
22520
- `;
22521
22473
 
22522
22474
  // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
22523
22475
  init_emotion_jsx_shim();
@@ -22865,11 +22817,7 @@ var linkPopoverAnchor = import_react145.css`
22865
22817
  ${link}
22866
22818
  ${linkColorDefault}
22867
22819
  `;
22868
- function LinkNodePlugin({
22869
- onConnectLink,
22870
- getBoundPath,
22871
- positioningAnchorEl
22872
- }) {
22820
+ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
22873
22821
  const parsePath = getBoundPath != null ? getBoundPath : function(path) {
22874
22822
  return path;
22875
22823
  };
@@ -22973,11 +22921,9 @@ function LinkNodePlugin({
22973
22921
  setLinkPopoverState(void 0);
22974
22922
  return;
22975
22923
  }
22976
- const elementRect = element.getBoundingClientRect();
22977
- const positioningAnchorRect = positioningAnchorEl.getBoundingClientRect();
22978
22924
  const { x, y } = {
22979
- x: elementRect.left - positioningAnchorRect.left + LINK_POPOVER_OFFSET_X,
22980
- y: elementRect.top + elementRect.height - positioningAnchorRect.top + LINK_POPOVER_OFFSET_Y
22925
+ x: element.offsetLeft + LINK_POPOVER_OFFSET_X,
22926
+ y: element.offsetTop + element.clientHeight + LINK_POPOVER_OFFSET_Y
22981
22927
  };
22982
22928
  setLinkPopoverState({
22983
22929
  node: linkNode,
@@ -22986,7 +22932,7 @@ function LinkNodePlugin({
22986
22932
  y
22987
22933
  }
22988
22934
  });
22989
- }, [editor, positioningAnchorEl]);
22935
+ }, [editor]);
22990
22936
  (0, import_react146.useEffect)(() => {
22991
22937
  return editor.registerUpdateListener(({ editorState }) => {
22992
22938
  requestAnimationFrame(() => {
@@ -23117,20 +23063,17 @@ var import_list2 = require("@lexical/list");
23117
23063
  var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerContext");
23118
23064
  var import_rich_text = require("@lexical/rich-text");
23119
23065
  var import_selection2 = require("@lexical/selection");
23120
- var import_table = require("@lexical/table");
23121
23066
  var import_utils9 = require("@lexical/utils");
23122
23067
  var import_lexical5 = require("lexical");
23123
23068
  var import_react149 = require("react");
23124
23069
  var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
23125
23070
  var toolbar = import_react148.css`
23126
- ${scrollbarStyles}
23127
23071
  background: var(--gray-50);
23128
23072
  border-radius: var(--rounded-base);
23129
23073
  display: flex;
23130
23074
  /* We add 1px because we use a 1px wide separator */
23131
23075
  gap: calc(var(--spacing-sm) + 1px);
23132
23076
  margin: calc(var(--spacing-sm) + var(--spacing-xs)) 0;
23133
- overflow: auto;
23134
23077
  padding: var(--spacing-sm);
23135
23078
  position: sticky;
23136
23079
  top: calc(var(--spacing-sm) * -2);
@@ -23138,7 +23081,6 @@ var toolbar = import_react148.css`
23138
23081
  `;
23139
23082
  var toolbarGroup = import_react148.css`
23140
23083
  display: flex;
23141
- flex-shrink: 0;
23142
23084
  gap: var(--spacing-xs);
23143
23085
  position: relative;
23144
23086
 
@@ -23161,7 +23103,6 @@ var richTextToolbarButton = import_react148.css`
23161
23103
  box-shadow: none;
23162
23104
  color: var(--gray-900);
23163
23105
  display: flex;
23164
- flex-shrink: 0;
23165
23106
  height: 32px;
23166
23107
  justify-content: center;
23167
23108
  min-width: 32px;
@@ -23170,10 +23111,6 @@ var richTextToolbarButton = import_react148.css`
23170
23111
  var richTextToolbarButtonActive = import_react148.css`
23171
23112
  background: var(--gray-200);
23172
23113
  `;
23173
- var textStyleButton = import_react148.css`
23174
- justify-content: space-between;
23175
- min-width: 7rem;
23176
- `;
23177
23114
  var toolbarIcon = import_react148.css`
23178
23115
  color: inherit;
23179
23116
  `;
@@ -23194,7 +23131,7 @@ var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
23194
23131
  ]);
23195
23132
  var HEADING_ELEMENTS = ["h1", "h2", "h3", "h4", "h5", "h6"];
23196
23133
  var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
23197
- var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
23134
+ var RichTextToolbar = ({ config, customControls }) => {
23198
23135
  const [editor] = (0, import_LexicalComposerContext4.useLexicalComposerContext)();
23199
23136
  const {
23200
23137
  activeElement,
@@ -23210,39 +23147,26 @@ var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
23210
23147
  visibleLists,
23211
23148
  codeElementVisible,
23212
23149
  quoteElementVisible,
23213
- visibleElementsWithIcons,
23214
- visibleInsertElementsWithIcons,
23215
- tableElementVisible
23150
+ visibleElementsWithIcons
23216
23151
  } = useRichTextToolbarState({ config });
23217
23152
  const onSelectElement = (type) => {
23218
23153
  if (activeElement === type) {
23219
23154
  return;
23220
23155
  }
23221
- editor.focus(() => {
23222
- editor.update(() => {
23223
- const selection = (0, import_lexical5.$getSelection)();
23224
- if (HEADING_ELEMENTS.includes(type)) {
23225
- (0, import_selection2.$setBlocksType)(selection, () => (0, import_rich_text.$createHeadingNode)(type));
23226
- } else if (type === "paragraph") {
23227
- (0, import_selection2.$setBlocksType)(selection, () => (0, import_lexical5.$createParagraphNode)());
23228
- } else if (type === "quote") {
23229
- (0, import_selection2.$setBlocksType)(selection, () => (0, import_rich_text.$createQuoteNode)());
23230
- } else if (type === "code") {
23231
- (0, import_selection2.$setBlocksType)(selection, () => (0, import_code2.$createCodeNode)());
23232
- } else if (type === "table" && onInsertTable) {
23233
- onInsertTable().then((dimensions) => {
23234
- if (!dimensions) {
23235
- return;
23236
- }
23237
- const { rows, columns } = dimensions;
23238
- editor.focus(() => {
23239
- editor.update(() => {
23240
- (0, import_selection2.$setBlocksType)(selection, () => (0, import_table.$createTableNodeWithDimensions)(rows, columns, false));
23241
- });
23242
- });
23243
- });
23244
- }
23245
- });
23156
+ editor.update(() => {
23157
+ const selection = (0, import_lexical5.$getSelection)();
23158
+ if (!(0, import_lexical5.$isRangeSelection)(selection)) {
23159
+ return;
23160
+ }
23161
+ if (HEADING_ELEMENTS.includes(type)) {
23162
+ (0, import_selection2.$setBlocksType)(selection, () => (0, import_rich_text.$createHeadingNode)(type));
23163
+ } else if (type === "paragraph") {
23164
+ (0, import_selection2.$setBlocksType)(selection, () => (0, import_lexical5.$createParagraphNode)());
23165
+ } else if (type === "quote") {
23166
+ (0, import_selection2.$setBlocksType)(selection, () => (0, import_rich_text.$createQuoteNode)());
23167
+ } else if (type === "code") {
23168
+ (0, import_selection2.$setBlocksType)(selection, () => (0, import_code2.$createCodeNode)());
23169
+ }
23246
23170
  });
23247
23171
  };
23248
23172
  const updateToolbar = (0, import_react149.useCallback)(() => {
@@ -23307,7 +23231,8 @@ var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
23307
23231
  /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
23308
23232
  Menu,
23309
23233
  {
23310
- menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", children: [
23234
+ menuLabel: "Elements",
23235
+ menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("button", { css: richTextToolbarButton, title: "Text styles", children: [
23311
23236
  visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
23312
23237
  " ",
23313
23238
  /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
@@ -23367,7 +23292,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
23367
23292
  }
23368
23293
  ) : null
23369
23294
  ] }) : null,
23370
- visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { css: toolbarGroup, children: [
23295
+ visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { css: toolbarGroup, children: [
23371
23296
  linkElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23372
23297
  "button",
23373
23298
  {
@@ -23406,50 +23331,28 @@ var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
23406
23331
  }
23407
23332
  ) }) : null
23408
23333
  ] }) : null,
23409
- customControls ? customControls : null
23334
+ quoteElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23335
+ "button",
23336
+ {
23337
+ onClick: () => {
23338
+ activeElement === "quote" ? onSelectElement("paragraph") : onSelectElement("quote");
23339
+ },
23340
+ css: [richTextToolbarButton, activeElement === "quote" ? richTextToolbarButtonActive : null],
23341
+ children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: "quote" })
23342
+ }
23343
+ ) }) : null,
23344
+ codeElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23345
+ "button",
23346
+ {
23347
+ onClick: () => {
23348
+ activeElement === "code" ? onSelectElement("paragraph") : onSelectElement("code");
23349
+ },
23350
+ css: [richTextToolbarButton, activeElement === "code" ? richTextToolbarButtonActive : null],
23351
+ children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: "code-slash" })
23352
+ }
23353
+ ) }) : null
23410
23354
  ] }) : null,
23411
- visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { css: toolbarGroup, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
23412
- Menu,
23413
- {
23414
- menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("button", { css: richTextToolbarButton, title: "Insert block element", children: [
23415
- "Insert",
23416
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
23417
- ] }),
23418
- placement: "bottom-start",
23419
- children: [
23420
- quoteElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23421
- MenuItem,
23422
- {
23423
- onClick: () => {
23424
- onSelectElement("quote");
23425
- },
23426
- icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "quote", iconColor: "currentColor" }),
23427
- children: "Quote"
23428
- }
23429
- ) : null,
23430
- codeElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23431
- MenuItem,
23432
- {
23433
- onClick: () => {
23434
- onSelectElement("code");
23435
- },
23436
- icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "code-slash", iconColor: "currentColor" }),
23437
- children: "Code"
23438
- }
23439
- ) : null,
23440
- tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23441
- MenuItem,
23442
- {
23443
- onClick: () => {
23444
- onSelectElement("table");
23445
- },
23446
- icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "view-grid", iconColor: "currentColor" }),
23447
- children: "Table"
23448
- }
23449
- ) : null
23450
- ]
23451
- }
23452
- ) }) : null
23355
+ customControls ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { css: toolbarGroup, children: customControls }) : null
23453
23356
  ] });
23454
23357
  };
23455
23358
  var RichTextToolbar_default = RichTextToolbar;
@@ -23526,9 +23429,6 @@ var useRichTextToolbarState = ({ config }) => {
23526
23429
  const codeElementVisible = (0, import_react149.useMemo)(() => {
23527
23430
  return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
23528
23431
  }, [activeElement, enabledBuiltInElements]);
23529
- const tableElementVisible = (0, import_react149.useMemo)(() => {
23530
- return enabledBuiltInElements.some((element) => element.type === "table") || activeElement === "table";
23531
- }, [activeElement, enabledBuiltInElements]);
23532
23432
  const visibleElementsWithIcons = (0, import_react149.useMemo)(() => {
23533
23433
  const visibleElements = /* @__PURE__ */ new Set();
23534
23434
  if (linkElementVisible) {
@@ -23539,21 +23439,14 @@ var useRichTextToolbarState = ({ config }) => {
23539
23439
  visibleElements.add(type);
23540
23440
  });
23541
23441
  }
23542
- return visibleElements;
23543
- }, [linkElementVisible, visibleLists]);
23544
- const visibleInsertElementsWithIcons = (0, import_react149.useMemo)(() => {
23545
- const visibleElements = /* @__PURE__ */ new Set();
23546
23442
  if (quoteElementVisible) {
23547
23443
  visibleElements.add("quote");
23548
23444
  }
23549
23445
  if (codeElementVisible) {
23550
23446
  visibleElements.add("code");
23551
23447
  }
23552
- if (tableElementVisible) {
23553
- visibleElements.add("table");
23554
- }
23555
23448
  return visibleElements;
23556
- }, [codeElementVisible, quoteElementVisible, tableElementVisible]);
23449
+ }, [codeElementVisible, linkElementVisible, quoteElementVisible, visibleLists]);
23557
23450
  return {
23558
23451
  activeFormats,
23559
23452
  setActiveFormats,
@@ -23568,699 +23461,12 @@ var useRichTextToolbarState = ({ config }) => {
23568
23461
  visibleLists,
23569
23462
  quoteElementVisible,
23570
23463
  codeElementVisible,
23571
- tableElementVisible,
23572
- visibleElementsWithIcons,
23573
- visibleInsertElementsWithIcons
23464
+ visibleElementsWithIcons
23574
23465
  };
23575
23466
  };
23576
23467
 
23577
- // src/components/ParameterInputs/rich-text/TableActionMenuPlugin.tsx
23578
- init_emotion_jsx_shim();
23579
- var import_react150 = require("@emotion/react");
23580
- var import_LexicalComposerContext5 = require("@lexical/react/LexicalComposerContext");
23581
- var import_useLexicalEditable = require("@lexical/react/useLexicalEditable");
23582
- var import_table2 = require("@lexical/table");
23583
- var import_lexical6 = require("lexical");
23584
- var import_react151 = require("react");
23585
- var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
23586
- function computeSelectionCount(selection) {
23587
- const selectionShape = selection.getShape();
23588
- return {
23589
- columns: selectionShape.toX - selectionShape.fromX + 1,
23590
- rows: selectionShape.toY - selectionShape.fromY + 1
23591
- };
23592
- }
23593
- var tableActionMenuTrigger = import_react150.css`
23594
- position: absolute;
23595
- transform: translate(calc(-100% - 1px), 1px);
23596
- `;
23597
- var TableActionMenuTrigger = (0, import_react151.forwardRef)((props, ref) => {
23598
- const { tableCellEl, positioningAnchorEl, ...rest } = props;
23599
- const [coordinates, setCoordinates] = (0, import_react151.useState)({ x: 0, y: 0 });
23600
- (0, import_react151.useLayoutEffect)(() => {
23601
- const rect = tableCellEl.getBoundingClientRect();
23602
- const parentRect = positioningAnchorEl.getBoundingClientRect();
23603
- const relativeX = rect.right - parentRect.left;
23604
- const relativeY = rect.top - parentRect.top;
23605
- setCoordinates({ x: relativeX, y: relativeY });
23606
- }, [tableCellEl, positioningAnchorEl]);
23607
- return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
23608
- IconButton,
23609
- {
23610
- ref,
23611
- css: [
23612
- tableActionMenuTrigger,
23613
- {
23614
- top: coordinates.y,
23615
- left: coordinates.x
23616
- }
23617
- ],
23618
- size: "xs",
23619
- buttonType: "unimportant",
23620
- ...rest,
23621
- children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Icon, { icon: "chevron-down", size: "1rem", iconColor: "currentColor" })
23622
- }
23623
- );
23624
- });
23625
- TableActionMenuTrigger.displayName = "TableActionMenuTrigger";
23626
- function TableActionMenu({
23627
- tableCellNode: _tableCellNode,
23628
- menuPortalEl,
23629
- tableCellEl,
23630
- positioningAnchorEl
23631
- }) {
23632
- const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
23633
- const [tableCellNode, updateTableCellNode] = (0, import_react151.useState)(_tableCellNode);
23634
- const [selectionCounts, updateSelectionCounts] = (0, import_react151.useState)({
23635
- columns: 1,
23636
- rows: 1
23637
- });
23638
- const [menuTriggerKey, setMenuTriggerKey] = (0, import_react151.useState)(0);
23639
- const incrementMenuTriggerKey = () => {
23640
- setMenuTriggerKey((key) => key += 1);
23641
- };
23642
- (0, import_react151.useEffect)(() => {
23643
- return editor.registerMutationListener(
23644
- import_table2.TableCellNode,
23645
- (nodeMutations) => {
23646
- const nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === "updated";
23647
- if (nodeUpdated) {
23648
- editor.getEditorState().read(() => {
23649
- updateTableCellNode(tableCellNode.getLatest());
23650
- });
23651
- }
23652
- },
23653
- { skipInitialization: true }
23654
- );
23655
- }, [editor, tableCellNode]);
23656
- (0, import_react151.useEffect)(() => {
23657
- editor.getEditorState().read(() => {
23658
- const selection = (0, import_lexical6.$getSelection)();
23659
- if ((0, import_table2.$isTableSelection)(selection)) {
23660
- updateSelectionCounts(computeSelectionCount(selection));
23661
- }
23662
- });
23663
- }, [editor]);
23664
- const clearTableSelection = (0, import_react151.useCallback)(() => {
23665
- editor.update(() => {
23666
- if (tableCellNode.isAttached()) {
23667
- const tableNode = (0, import_table2.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
23668
- const tableElement2 = editor.getElementByKey(
23669
- tableNode.getKey()
23670
- );
23671
- if (!tableElement2) {
23672
- throw new Error("Expected to find tableElement in DOM");
23673
- }
23674
- const tableSelection = (0, import_table2.getTableObserverFromTableElement)(tableElement2);
23675
- if (tableSelection !== null) {
23676
- tableSelection.clearHighlight();
23677
- }
23678
- tableNode.markDirty();
23679
- updateTableCellNode(tableCellNode.getLatest());
23680
- }
23681
- const rootNode = (0, import_lexical6.$getRoot)();
23682
- rootNode.selectStart();
23683
- });
23684
- }, [editor, tableCellNode]);
23685
- const insertTableRowAtSelection = (0, import_react151.useCallback)(
23686
- (shouldInsertAfter) => {
23687
- editor.update(() => {
23688
- (0, import_table2.$insertTableRow__EXPERIMENTAL)(shouldInsertAfter);
23689
- });
23690
- incrementMenuTriggerKey();
23691
- },
23692
- [editor]
23693
- );
23694
- const insertTableColumnAtSelection = (0, import_react151.useCallback)(
23695
- (shouldInsertAfter) => {
23696
- editor.update(() => {
23697
- for (let i = 0; i < selectionCounts.columns; i++) {
23698
- (0, import_table2.$insertTableColumn__EXPERIMENTAL)(shouldInsertAfter);
23699
- }
23700
- });
23701
- incrementMenuTriggerKey();
23702
- },
23703
- [editor, selectionCounts.columns]
23704
- );
23705
- const deleteTableRowAtSelection = (0, import_react151.useCallback)(() => {
23706
- editor.update(() => {
23707
- (0, import_table2.$deleteTableRow__EXPERIMENTAL)();
23708
- });
23709
- incrementMenuTriggerKey();
23710
- }, [editor]);
23711
- const deleteTableAtSelection = (0, import_react151.useCallback)(() => {
23712
- editor.update(() => {
23713
- const tableNode = (0, import_table2.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
23714
- tableNode.remove();
23715
- clearTableSelection();
23716
- });
23717
- }, [editor, tableCellNode, clearTableSelection]);
23718
- const deleteTableColumnAtSelection = (0, import_react151.useCallback)(() => {
23719
- editor.update(() => {
23720
- (0, import_table2.$deleteTableColumn__EXPERIMENTAL)();
23721
- clearTableSelection();
23722
- });
23723
- incrementMenuTriggerKey();
23724
- }, [editor, clearTableSelection]);
23725
- const toggleTableRowIsHeader = (0, import_react151.useCallback)(() => {
23726
- editor.update(() => {
23727
- const tableNode = (0, import_table2.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
23728
- const tableRowIndex = (0, import_table2.$getTableRowIndexFromTableCellNode)(tableCellNode);
23729
- const tableRows = tableNode.getChildren();
23730
- if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
23731
- throw new Error("Expected table cell to be inside of table row.");
23732
- }
23733
- const tableRow2 = tableRows[tableRowIndex];
23734
- if (!(0, import_table2.$isTableRowNode)(tableRow2)) {
23735
- throw new Error("Expected table row");
23736
- }
23737
- tableRow2.getChildren().forEach((tableCell) => {
23738
- if (!(0, import_table2.$isTableCellNode)(tableCell)) {
23739
- throw new Error("Expected table cell");
23740
- }
23741
- tableCell.toggleHeaderStyle(import_table2.TableCellHeaderStates.ROW);
23742
- });
23743
- clearTableSelection();
23744
- });
23745
- }, [editor, tableCellNode, clearTableSelection]);
23746
- const toggleTableColumnIsHeader = (0, import_react151.useCallback)(() => {
23747
- editor.update(() => {
23748
- const tableNode = (0, import_table2.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
23749
- const tableColumnIndex = (0, import_table2.$getTableColumnIndexFromTableCellNode)(tableCellNode);
23750
- const tableRows = tableNode.getChildren();
23751
- const maxRowsLength = Math.max(...tableRows.map((row) => row.getChildren().length));
23752
- if (tableColumnIndex >= maxRowsLength || tableColumnIndex < 0) {
23753
- throw new Error("Expected table cell to be inside of table row.");
23754
- }
23755
- for (let r = 0; r < tableRows.length; r++) {
23756
- const tableRow2 = tableRows[r];
23757
- if (!(0, import_table2.$isTableRowNode)(tableRow2)) {
23758
- throw new Error("Expected table row");
23759
- }
23760
- const tableCells = tableRow2.getChildren();
23761
- if (tableColumnIndex >= tableCells.length) {
23762
- continue;
23763
- }
23764
- const tableCell = tableCells[tableColumnIndex];
23765
- if (!(0, import_table2.$isTableCellNode)(tableCell)) {
23766
- throw new Error("Expected table cell");
23767
- }
23768
- tableCell.toggleHeaderStyle(import_table2.TableCellHeaderStates.COLUMN);
23769
- }
23770
- clearTableSelection();
23771
- });
23772
- }, [editor, tableCellNode, clearTableSelection]);
23773
- const menuItemCss = (0, import_react150.css)({
23774
- fontSize: "var(--fs-sm)"
23775
- });
23776
- return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
23777
- Menu,
23778
- {
23779
- menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
23780
- TableActionMenuTrigger,
23781
- {
23782
- tableCellEl,
23783
- positioningAnchorEl
23784
- },
23785
- menuTriggerKey
23786
- ),
23787
- portalElement: menuPortalEl,
23788
- maxMenuHeight: "300px",
23789
- children: [
23790
- /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
23791
- MenuItem,
23792
- {
23793
- onClick: () => {
23794
- insertTableRowAtSelection(false);
23795
- },
23796
- css: menuItemCss,
23797
- children: [
23798
- "Insert ",
23799
- selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
23800
- " above"
23801
- ]
23802
- }
23803
- ),
23804
- /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => insertTableRowAtSelection(true), css: menuItemCss, children: [
23805
- "Insert ",
23806
- selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
23807
- " below"
23808
- ] }),
23809
- /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItemSeparator, {}),
23810
- /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => insertTableColumnAtSelection(false), css: menuItemCss, children: [
23811
- "Insert ",
23812
- selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
23813
- " left"
23814
- ] }),
23815
- /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => insertTableColumnAtSelection(true), css: menuItemCss, children: [
23816
- "Insert ",
23817
- selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
23818
- " right"
23819
- ] }),
23820
- /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItemSeparator, {}),
23821
- /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItem, { onClick: () => deleteTableColumnAtSelection(), css: menuItemCss, children: "Delete column" }),
23822
- /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItem, { onClick: () => deleteTableRowAtSelection(), css: menuItemCss, children: "Delete row" }),
23823
- /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItem, { onClick: () => deleteTableAtSelection(), css: menuItemCss, children: "Delete table" }),
23824
- /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItemSeparator, {}),
23825
- /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => toggleTableRowIsHeader(), css: menuItemCss, children: [
23826
- (tableCellNode.__headerState & import_table2.TableCellHeaderStates.ROW) === import_table2.TableCellHeaderStates.ROW ? "Remove" : "Add",
23827
- " ",
23828
- "row header"
23829
- ] }),
23830
- /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => toggleTableColumnIsHeader(), css: menuItemCss, children: [
23831
- (tableCellNode.__headerState & import_table2.TableCellHeaderStates.COLUMN) === import_table2.TableCellHeaderStates.COLUMN ? "Remove" : "Add",
23832
- " ",
23833
- "column header"
23834
- ] })
23835
- ]
23836
- }
23837
- );
23838
- }
23839
- function TableCellActionMenuContainer({
23840
- menuPortalEl,
23841
- positioningAnchorEl
23842
- }) {
23843
- const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
23844
- const [tableCellNode, setTableMenuCellNode] = (0, import_react151.useState)(null);
23845
- const [tableCellNodeEl, _setTableMenuCellNodeEl] = (0, import_react151.useState)(null);
23846
- const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = (0, import_react151.useState)(null);
23847
- (0, import_react151.useEffect)(() => {
23848
- const newPortalEl = document.createElement("div");
23849
- setTableMenuCellMenuPortalEl(newPortalEl);
23850
- menuPortalEl.appendChild(newPortalEl);
23851
- return () => {
23852
- newPortalEl.remove();
23853
- };
23854
- }, [menuPortalEl]);
23855
- const setTableMenuCellNodeElem = (0, import_react151.useCallback)((elem) => {
23856
- if (elem) {
23857
- _setTableMenuCellNodeEl(elem);
23858
- } else {
23859
- _setTableMenuCellNodeEl(null);
23860
- }
23861
- }, []);
23862
- const $moveMenu = (0, import_react151.useCallback)(() => {
23863
- const selection = (0, import_lexical6.$getSelection)();
23864
- const nativeSelection = window.getSelection();
23865
- const activeElement = document.activeElement;
23866
- if (selection == null) {
23867
- setTableMenuCellNode(null);
23868
- return;
23869
- }
23870
- const rootElement = editor.getRootElement();
23871
- if ((0, import_lexical6.$isRangeSelection)(selection) && rootElement !== null && nativeSelection !== null && rootElement.contains(nativeSelection.anchorNode)) {
23872
- const tableCellNodeFromSelection = (0, import_table2.$getTableCellNodeFromLexicalNode)(selection.anchor.getNode());
23873
- if (tableCellNodeFromSelection == null) {
23874
- setTableMenuCellNode(null);
23875
- setTableMenuCellNodeElem(null);
23876
- return;
23877
- }
23878
- const tableCellParentNodeDOM = editor.getElementByKey(tableCellNodeFromSelection.getKey());
23879
- if (tableCellParentNodeDOM == null) {
23880
- setTableMenuCellNode(null);
23881
- setTableMenuCellNodeElem(null);
23882
- return;
23883
- }
23884
- setTableMenuCellNode(tableCellNodeFromSelection);
23885
- setTableMenuCellNodeElem(tableCellParentNodeDOM);
23886
- } else if (!activeElement) {
23887
- setTableMenuCellNode(null);
23888
- setTableMenuCellNodeElem(null);
23889
- }
23890
- }, [editor, setTableMenuCellNodeElem]);
23891
- (0, import_react151.useEffect)(() => {
23892
- return editor.registerUpdateListener(() => {
23893
- editor.getEditorState().read(() => {
23894
- $moveMenu();
23895
- });
23896
- });
23897
- });
23898
- return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
23899
- TableActionMenu,
23900
- {
23901
- tableCellNode,
23902
- menuPortalEl: tableCellMenuPortalEl,
23903
- tableCellEl: tableCellNodeEl,
23904
- positioningAnchorEl
23905
- },
23906
- tableCellNode.getKey()
23907
- );
23908
- }
23909
- function TableActionMenuPlugin({ positioningAnchorEl }) {
23910
- const isEditable = (0, import_useLexicalEditable.useLexicalEditable)();
23911
- return isEditable ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
23912
- TableCellActionMenuContainer,
23913
- {
23914
- menuPortalEl: positioningAnchorEl,
23915
- positioningAnchorEl
23916
- }
23917
- ) : null;
23918
- }
23919
-
23920
- // src/components/ParameterInputs/rich-text/TableCellResizerPlugin.tsx
23921
- init_emotion_jsx_shim();
23922
- var import_react152 = require("@emotion/react");
23923
- var import_LexicalComposerContext6 = require("@lexical/react/LexicalComposerContext");
23924
- var import_useLexicalEditable2 = require("@lexical/react/useLexicalEditable");
23925
- var import_table3 = require("@lexical/table");
23926
- var import_utils11 = require("@lexical/utils");
23927
- var import_lexical7 = require("lexical");
23928
- var import_react153 = require("react");
23929
- var import_react_dom3 = require("react-dom");
23930
- var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
23931
- var MIN_ROW_HEIGHT = 33;
23932
- var MIN_COLUMN_WIDTH = 50;
23933
- var tableResizer = import_react152.css`
23934
- position: absolute;
23935
- z-index: var(--z-10);
23936
- `;
23937
- var fixedGetDOMCellFromTarget = (node) => {
23938
- let currentNode = node;
23939
- while (currentNode != null) {
23940
- const nodeName = currentNode.nodeName;
23941
- if (nodeName === "TD" || nodeName === "TH") {
23942
- const cell2 = currentNode._cell;
23943
- if (cell2 === void 0) {
23944
- return {
23945
- elem: currentNode
23946
- };
23947
- }
23948
- return cell2;
23949
- }
23950
- currentNode = currentNode.parentNode;
23951
- }
23952
- return null;
23953
- };
23954
- function TableCellResizer({ editor, positioningAnchorEl }) {
23955
- const targetRef = (0, import_react153.useRef)(null);
23956
- const resizerRef = (0, import_react153.useRef)(null);
23957
- const tableRectRef = (0, import_react153.useRef)(null);
23958
- const mouseStartPosRef = (0, import_react153.useRef)(null);
23959
- const [mouseCurrentPos, updateMouseCurrentPos] = (0, import_react153.useState)(null);
23960
- const [activeCell, updateActiveCell] = (0, import_react153.useState)(null);
23961
- const [isMouseDown, updateIsMouseDown] = (0, import_react153.useState)(false);
23962
- const [draggingDirection, updateDraggingDirection] = (0, import_react153.useState)(null);
23963
- const resetState = (0, import_react153.useCallback)(() => {
23964
- updateActiveCell(null);
23965
- targetRef.current = null;
23966
- updateDraggingDirection(null);
23967
- mouseStartPosRef.current = null;
23968
- tableRectRef.current = null;
23969
- }, []);
23970
- const isMouseDownOnEvent = (event) => {
23971
- return (event.buttons & 1) === 1;
23972
- };
23973
- (0, import_react153.useEffect)(() => {
23974
- const onMouseMove = (event) => {
23975
- setTimeout(() => {
23976
- const target = event.target;
23977
- if (draggingDirection) {
23978
- updateMouseCurrentPos({
23979
- x: event.clientX,
23980
- y: event.clientY
23981
- });
23982
- return;
23983
- }
23984
- updateIsMouseDown(isMouseDownOnEvent(event));
23985
- if (resizerRef.current && resizerRef.current.contains(target)) {
23986
- return;
23987
- }
23988
- if (targetRef.current !== target) {
23989
- targetRef.current = target;
23990
- const cell2 = fixedGetDOMCellFromTarget(target);
23991
- if (cell2 && activeCell !== cell2) {
23992
- editor.update(() => {
23993
- const tableCellNode = (0, import_lexical7.$getNearestNodeFromDOMNode)(cell2.elem);
23994
- if (!tableCellNode) {
23995
- throw new Error("TableCellResizer: Table cell node not found.");
23996
- }
23997
- const tableNode = (0, import_table3.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
23998
- const tableElement2 = editor.getElementByKey(tableNode.getKey());
23999
- if (!tableElement2) {
24000
- throw new Error("TableCellResizer: Table element not found.");
24001
- }
24002
- targetRef.current = target;
24003
- tableRectRef.current = tableElement2.getBoundingClientRect();
24004
- updateActiveCell(cell2);
24005
- });
24006
- } else if (cell2 == null) {
24007
- resetState();
24008
- }
24009
- }
24010
- }, 0);
24011
- };
24012
- const onMouseDown = () => {
24013
- setTimeout(() => {
24014
- updateIsMouseDown(true);
24015
- }, 0);
24016
- };
24017
- const onMouseUp = () => {
24018
- setTimeout(() => {
24019
- updateIsMouseDown(false);
24020
- }, 0);
24021
- };
24022
- const removeRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
24023
- rootElement == null ? void 0 : rootElement.addEventListener("mousemove", onMouseMove);
24024
- rootElement == null ? void 0 : rootElement.addEventListener("mousedown", onMouseDown);
24025
- rootElement == null ? void 0 : rootElement.addEventListener("mouseup", onMouseUp);
24026
- prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousemove", onMouseMove);
24027
- prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousedown", onMouseDown);
24028
- prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mouseup", onMouseUp);
24029
- });
24030
- return () => {
24031
- removeRootListener();
24032
- };
24033
- }, [activeCell, draggingDirection, editor, resetState]);
24034
- const isHeightChanging = (direction) => {
24035
- if (direction === "bottom") {
24036
- return true;
24037
- }
24038
- return false;
24039
- };
24040
- const updateRowHeight = (0, import_react153.useCallback)(
24041
- (heightChange) => {
24042
- if (!activeCell) {
24043
- throw new Error("TableCellResizer: Expected active cell.");
24044
- }
24045
- editor.update(
24046
- () => {
24047
- const tableCellNode = (0, import_lexical7.$getNearestNodeFromDOMNode)(activeCell.elem);
24048
- if (!(0, import_table3.$isTableCellNode)(tableCellNode)) {
24049
- throw new Error("TableCellResizer: Table cell node not found.");
24050
- }
24051
- const tableNode = (0, import_table3.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
24052
- const tableRowIndex = (0, import_table3.$getTableRowIndexFromTableCellNode)(tableCellNode);
24053
- const tableRows = tableNode.getChildren();
24054
- if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
24055
- throw new Error("Expected table cell to be inside of table row.");
24056
- }
24057
- const tableRow2 = tableRows[tableRowIndex];
24058
- if (!(0, import_table3.$isTableRowNode)(tableRow2)) {
24059
- throw new Error("Expected table row");
24060
- }
24061
- let height = tableRow2.getHeight();
24062
- if (height === void 0) {
24063
- const rowCells = tableRow2.getChildren();
24064
- height = Math.min(...rowCells.map((cell2) => {
24065
- var _a;
24066
- return (_a = getCellNodeHeight(cell2, editor)) != null ? _a : Infinity;
24067
- }));
24068
- }
24069
- const newHeight = Math.max(height + heightChange, MIN_ROW_HEIGHT);
24070
- tableRow2.setHeight(newHeight);
24071
- },
24072
- { tag: "skip-scroll-into-view" }
24073
- );
24074
- },
24075
- [activeCell, editor]
24076
- );
24077
- const getCellNodeWidth = (cell2, activeEditor) => {
24078
- const width = cell2.getWidth();
24079
- if (width !== void 0) {
24080
- return width;
24081
- }
24082
- const domCellNode = activeEditor.getElementByKey(cell2.getKey());
24083
- if (domCellNode == null) {
24084
- return void 0;
24085
- }
24086
- const computedStyle = getComputedStyle(domCellNode);
24087
- return domCellNode.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight);
24088
- };
24089
- const getCellNodeHeight = (cell2, activeEditor) => {
24090
- const domCellNode = activeEditor.getElementByKey(cell2.getKey());
24091
- return domCellNode == null ? void 0 : domCellNode.clientHeight;
24092
- };
24093
- const getCellColumnIndex = (tableCellNode, tableMap) => {
24094
- for (let row = 0; row < tableMap.length; row++) {
24095
- for (let column = 0; column < tableMap[row].length; column++) {
24096
- if (tableMap[row][column].cell === tableCellNode) {
24097
- return column;
24098
- }
24099
- }
24100
- }
24101
- };
24102
- const updateColumnWidth = (0, import_react153.useCallback)(
24103
- (widthChange) => {
24104
- if (!activeCell) {
24105
- throw new Error("TableCellResizer: Expected active cell.");
24106
- }
24107
- editor.update(
24108
- () => {
24109
- const tableCellNode = (0, import_lexical7.$getNearestNodeFromDOMNode)(activeCell.elem);
24110
- if (!(0, import_table3.$isTableCellNode)(tableCellNode)) {
24111
- throw new Error("TableCellResizer: Table cell node not found.");
24112
- }
24113
- const tableNode = (0, import_table3.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
24114
- const [tableMap] = (0, import_table3.$computeTableMapSkipCellCheck)(tableNode, null, null);
24115
- const columnIndex = getCellColumnIndex(tableCellNode, tableMap);
24116
- if (columnIndex === void 0) {
24117
- throw new Error("TableCellResizer: Table column not found.");
24118
- }
24119
- for (let row = 0; row < tableMap.length; row++) {
24120
- const cell2 = tableMap[row][columnIndex];
24121
- if (cell2.startRow === row && (columnIndex === tableMap[row].length - 1 || tableMap[row][columnIndex].cell !== tableMap[row][columnIndex + 1].cell)) {
24122
- const width = getCellNodeWidth(cell2.cell, editor);
24123
- if (width === void 0) {
24124
- continue;
24125
- }
24126
- const newWidth = Math.max(width + widthChange, MIN_COLUMN_WIDTH);
24127
- cell2.cell.setWidth(newWidth);
24128
- }
24129
- }
24130
- },
24131
- { tag: "skip-scroll-into-view" }
24132
- );
24133
- },
24134
- [activeCell, editor]
24135
- );
24136
- const mouseUpHandler = (0, import_react153.useCallback)(
24137
- (direction) => {
24138
- const handler = (event) => {
24139
- event.preventDefault();
24140
- event.stopPropagation();
24141
- if (!activeCell) {
24142
- throw new Error("TableCellResizer: Expected active cell.");
24143
- }
24144
- if (mouseStartPosRef.current) {
24145
- const { x, y } = mouseStartPosRef.current;
24146
- if (activeCell === null) {
24147
- return;
24148
- }
24149
- const zoom = (0, import_utils11.calculateZoomLevel)(event.target);
24150
- if (isHeightChanging(direction)) {
24151
- const heightChange = (event.clientY - y) / zoom;
24152
- updateRowHeight(heightChange);
24153
- } else {
24154
- const widthChange = (event.clientX - x) / zoom;
24155
- updateColumnWidth(widthChange);
24156
- }
24157
- resetState();
24158
- document.removeEventListener("mouseup", handler);
24159
- }
24160
- };
24161
- return handler;
24162
- },
24163
- [activeCell, resetState, updateColumnWidth, updateRowHeight]
24164
- );
24165
- const toggleResize = (0, import_react153.useCallback)(
24166
- (direction) => (event) => {
24167
- event.preventDefault();
24168
- event.stopPropagation();
24169
- if (!activeCell) {
24170
- throw new Error("TableCellResizer: Expected active cell.");
24171
- }
24172
- mouseStartPosRef.current = {
24173
- x: event.clientX,
24174
- y: event.clientY
24175
- };
24176
- updateMouseCurrentPos(mouseStartPosRef.current);
24177
- updateDraggingDirection(direction);
24178
- document.addEventListener("mouseup", mouseUpHandler(direction));
24179
- },
24180
- [activeCell, mouseUpHandler]
24181
- );
24182
- const getResizers = (0, import_react153.useCallback)(() => {
24183
- if (activeCell) {
24184
- const { height, width, top, left } = activeCell.elem.getBoundingClientRect();
24185
- const parentRect = positioningAnchorEl.getBoundingClientRect();
24186
- const zoom = (0, import_utils11.calculateZoomLevel)(activeCell.elem);
24187
- const zoneWidth = 10;
24188
- const styles = {
24189
- bottom: {
24190
- backgroundColor: "none",
24191
- cursor: "row-resize",
24192
- height: `${zoneWidth}px`,
24193
- left: `${left - parentRect.left}px`,
24194
- top: `${top - parentRect.top + height - zoneWidth / 2}px`,
24195
- width: `${width}px`
24196
- },
24197
- right: {
24198
- backgroundColor: "none",
24199
- cursor: "col-resize",
24200
- height: `${height}px`,
24201
- left: `${left - parentRect.left + width - zoneWidth / 2}px`,
24202
- top: `${top - parentRect.top}px`,
24203
- width: `${zoneWidth}px`
24204
- }
24205
- };
24206
- const tableRect = tableRectRef.current;
24207
- if (draggingDirection && mouseCurrentPos && tableRect) {
24208
- if (isHeightChanging(draggingDirection)) {
24209
- styles[draggingDirection].left = `${tableRect.left - parentRect.left}px`;
24210
- styles[draggingDirection].top = `${(mouseCurrentPos.y - parentRect.top) / zoom}px`;
24211
- styles[draggingDirection].height = "3px";
24212
- styles[draggingDirection].width = `${tableRect.width}px`;
24213
- } else {
24214
- styles[draggingDirection].top = `${tableRect.top - parentRect.top}px`;
24215
- styles[draggingDirection].left = `${(mouseCurrentPos.x - parentRect.left) / zoom}px`;
24216
- styles[draggingDirection].width = "3px";
24217
- styles[draggingDirection].height = `${tableRect.height}px`;
24218
- }
24219
- styles[draggingDirection].backgroundColor = "#adf";
24220
- }
24221
- return styles;
24222
- }
24223
- return {
24224
- bottom: null,
24225
- left: null,
24226
- right: null,
24227
- top: null
24228
- };
24229
- }, [activeCell, draggingDirection, mouseCurrentPos, positioningAnchorEl]);
24230
- const resizerStyles = getResizers();
24231
- return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_jsx_runtime132.Fragment, { children: [
24232
- /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
24233
- "div",
24234
- {
24235
- css: tableResizer,
24236
- style: resizerStyles.right || void 0,
24237
- onMouseDown: toggleResize("right")
24238
- }
24239
- ),
24240
- /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
24241
- "div",
24242
- {
24243
- css: tableResizer,
24244
- style: resizerStyles.bottom || void 0,
24245
- onMouseDown: toggleResize("bottom")
24246
- }
24247
- )
24248
- ] }) });
24249
- }
24250
- function TableCellResizerPlugin({ positioningAnchorEl }) {
24251
- const [editor] = (0, import_LexicalComposerContext6.useLexicalComposerContext)();
24252
- const isEditable = (0, import_useLexicalEditable2.useLexicalEditable)();
24253
- return (0, import_react153.useMemo)(
24254
- () => isEditable ? (0, import_react_dom3.createPortal)(
24255
- /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(TableCellResizer, { editor, positioningAnchorEl }),
24256
- positioningAnchorEl
24257
- ) : null,
24258
- [editor, isEditable, positioningAnchorEl]
24259
- );
24260
- }
24261
-
24262
23468
  // src/components/ParameterInputs/ParameterRichText.tsx
24263
- var import_jsx_runtime133 = require("@emotion/react/jsx-runtime");
23469
+ var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
24264
23470
  var ParameterRichText = ({
24265
23471
  label,
24266
23472
  labelLeadingIcon,
@@ -24279,16 +23485,13 @@ var ParameterRichText = ({
24279
23485
  readOnly,
24280
23486
  editorWrapperClassName,
24281
23487
  editorInputClassName,
24282
- editorInputWrapperClassName,
24283
23488
  editorFooter,
24284
23489
  customNodes,
24285
23490
  children,
24286
23491
  variables,
24287
- customControls,
24288
- onInsertTable,
24289
- minimalInteractivity
23492
+ customControls
24290
23493
  }) => {
24291
- return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
23494
+ return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
24292
23495
  ParameterShell,
24293
23496
  {
24294
23497
  "data-testid": "parameter-richtext",
@@ -24302,7 +23505,7 @@ var ParameterRichText = ({
24302
23505
  captionTestId,
24303
23506
  menuItems,
24304
23507
  children: [
24305
- /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
23508
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
24306
23509
  ParameterRichTextInner,
24307
23510
  {
24308
23511
  value,
@@ -24313,33 +23516,30 @@ var ParameterRichText = ({
24313
23516
  readOnly,
24314
23517
  editorWrapperClassName,
24315
23518
  editorInputClassName,
24316
- editorInputWrapperClassName,
24317
23519
  editorFooter,
24318
23520
  customNodes,
24319
23521
  variables,
24320
23522
  customControls,
24321
- onInsertTable,
24322
- minimalInteractivity,
24323
23523
  children
24324
23524
  }
24325
23525
  ),
24326
- menuItems ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_jsx_runtime133.Fragment, { children: menuItems }) }) : null
23526
+ menuItems ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_jsx_runtime131.Fragment, { children: menuItems }) }) : null
24327
23527
  ]
24328
23528
  }
24329
23529
  );
24330
23530
  };
24331
- var editorWrapper = import_react154.css`
23531
+ var editorWrapper = import_react150.css`
24332
23532
  display: flex;
24333
23533
  flex-flow: column;
24334
23534
  flex-grow: 1;
24335
23535
  `;
24336
- var editorContainer = import_react154.css`
23536
+ var editorContainer = import_react150.css`
24337
23537
  display: flex;
24338
23538
  flex-flow: column;
24339
23539
  flex-grow: 1;
24340
23540
  position: relative;
24341
23541
  `;
24342
- var editorPlaceholder = import_react154.css`
23542
+ var editorPlaceholder = import_react150.css`
24343
23543
  color: var(--gray-500);
24344
23544
  font-style: italic;
24345
23545
  /* 1px is added to make sure caret is clearly visible when field is focused
@@ -24350,7 +23550,7 @@ var editorPlaceholder = import_react154.css`
24350
23550
  top: var(--spacing-sm);
24351
23551
  user-select: none;
24352
23552
  `;
24353
- var editorInput = import_react154.css`
23553
+ var editorInput = import_react150.css`
24354
23554
  background: var(--white);
24355
23555
  border: 1px solid var(--gray-200);
24356
23556
  border-radius: var(--rounded-sm);
@@ -24378,14 +23578,11 @@ var ParameterRichTextInner = ({
24378
23578
  readOnly,
24379
23579
  editorWrapperClassName,
24380
23580
  editorInputClassName,
24381
- editorInputWrapperClassName,
24382
23581
  editorFooter,
24383
23582
  children,
24384
23583
  customNodes,
24385
23584
  variables,
24386
- customControls,
24387
- onInsertTable,
24388
- minimalInteractivity
23585
+ customControls
24389
23586
  }) => {
24390
23587
  const lexicalConfig = {
24391
23588
  namespace: "uniform",
@@ -24399,11 +23596,8 @@ var ParameterRichTextInner = ({
24399
23596
  LinkNode,
24400
23597
  import_rich_text2.HeadingNode,
24401
23598
  import_rich_text2.QuoteNode,
24402
- import_lexical8.ParagraphNode,
23599
+ import_lexical6.ParagraphNode,
24403
23600
  CustomCodeNode,
24404
- import_table4.TableNode,
24405
- import_table4.TableCellNode,
24406
- import_table4.TableRowNode,
24407
23601
  ...customNodes != null ? customNodes : []
24408
23602
  ],
24409
23603
  theme: {
@@ -24436,15 +23630,12 @@ var ParameterRichTextInner = ({
24436
23630
  }
24437
23631
  },
24438
23632
  quote: blockquoteElement,
24439
- code: codeElement,
24440
- table: tableElement,
24441
- tableCell: tableCellElement,
24442
- tableCellHeader: tableHeaderElement
23633
+ code: codeElement
24443
23634
  },
24444
23635
  editable: !readOnly
24445
23636
  };
24446
- return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_jsx_runtime133.Fragment, { children: [
24447
- /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_LexicalComposer.LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
23637
+ return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
23638
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalComposer.LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
24448
23639
  RichText,
24449
23640
  {
24450
23641
  onChange,
@@ -24453,11 +23644,8 @@ var ParameterRichTextInner = ({
24453
23644
  onRichTextInit,
24454
23645
  readOnly,
24455
23646
  editorInputClassName,
24456
- editorInputWrapperClassName,
24457
23647
  variables,
24458
23648
  customControls,
24459
- onInsertTable,
24460
- minimalInteractivity,
24461
23649
  children
24462
23650
  }
24463
23651
  ) }) }),
@@ -24480,20 +23668,18 @@ var RichText = ({
24480
23668
  onRichTextInit,
24481
23669
  readOnly,
24482
23670
  editorInputClassName,
24483
- editorInputWrapperClassName,
24484
23671
  children,
24485
23672
  variables,
24486
- customControls,
24487
- onInsertTable,
24488
- minimalInteractivity
23673
+ customControls
24489
23674
  }) => {
24490
- const [editor] = (0, import_LexicalComposerContext7.useLexicalComposerContext)();
24491
- (0, import_react155.useEffect)(() => {
23675
+ const editorContainerRef = (0, import_react151.useRef)(null);
23676
+ const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
23677
+ (0, import_react151.useEffect)(() => {
24492
23678
  if (onRichTextInit) {
24493
23679
  onRichTextInit(editor);
24494
23680
  }
24495
23681
  }, [editor, onRichTextInit]);
24496
- (0, import_react155.useEffect)(() => {
23682
+ (0, import_react151.useEffect)(() => {
24497
23683
  const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState }) => {
24498
23684
  requestAnimationFrame(() => {
24499
23685
  if (!(0, import_fast_equals2.deepEqual)(editorState.toJSON(), prevEditorState.toJSON())) {
@@ -24505,73 +23691,54 @@ var RichText = ({
24505
23691
  removeUpdateListener();
24506
23692
  };
24507
23693
  }, [editor, onChange]);
24508
- (0, import_react155.useEffect)(() => {
23694
+ (0, import_react151.useEffect)(() => {
24509
23695
  editor.setEditable(!readOnly);
24510
23696
  }, [editor, readOnly]);
24511
- const [editorContainerRef, setEditorContainerRef] = (0, import_react155.useState)(null);
24512
- const onRef = (_editorContainerRef) => {
24513
- if (_editorContainerRef !== null) {
24514
- setEditorContainerRef(_editorContainerRef);
24515
- }
24516
- };
24517
- return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_jsx_runtime133.Fragment, { children: [
24518
- readOnly || minimalInteractivity ? null : /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(RichTextToolbar_default, { config, customControls, onInsertTable }),
24519
- /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
24520
- "div",
24521
- {
24522
- css: editorContainer,
24523
- className: editorInputWrapperClassName,
24524
- ref: onRef,
24525
- "data-testid": "value-container",
24526
- children: [
24527
- /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
24528
- import_LexicalRichTextPlugin.RichTextPlugin,
24529
- {
24530
- contentEditable: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_LexicalContentEditable.ContentEditable, { css: editorInput, className: editorInputClassName }),
24531
- placeholder: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
24532
- ErrorBoundary: import_LexicalErrorBoundary.default
24533
- }
24534
- ),
24535
- /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_LexicalListPlugin.ListPlugin, {}),
24536
- /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_LexicalTablePlugin.TablePlugin, {}),
24537
- editorContainerRef && !minimalInteractivity ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(TableActionMenuPlugin, { positioningAnchorEl: editorContainerRef }) : null,
24538
- editorContainerRef && !minimalInteractivity ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(TableCellResizerPlugin, { positioningAnchorEl: editorContainerRef }) : null,
24539
- readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_LexicalHistoryPlugin.HistoryPlugin, {}),
24540
- editorContainerRef ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
24541
- LinkNodePlugin,
24542
- {
24543
- onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
24544
- getBoundPath: (variables == null ? void 0 : variables.bindVariables) ? (path) => {
24545
- var _a, _b;
24546
- return (_b = (_a = variables.bindVariables) == null ? void 0 : _a.call(variables, path)) != null ? _b : path;
24547
- } : void 0,
24548
- positioningAnchorEl: editorContainerRef
24549
- }
24550
- ) : null,
24551
- /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(ListIndentPlugin, { maxDepth: 4 }),
24552
- /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(DisableStylesPlugin, {}),
24553
- /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
24554
- /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_jsx_runtime133.Fragment, { children })
24555
- ]
24556
- }
24557
- )
23697
+ return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
23698
+ readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(RichTextToolbar_default, { config, customControls }),
23699
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
23700
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
23701
+ import_LexicalRichTextPlugin.RichTextPlugin,
23702
+ {
23703
+ contentEditable: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalContentEditable.ContentEditable, { css: editorInput, className: editorInputClassName }),
23704
+ placeholder: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
23705
+ ErrorBoundary: import_LexicalErrorBoundary.default
23706
+ }
23707
+ ),
23708
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalListPlugin.ListPlugin, {}),
23709
+ readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalHistoryPlugin.HistoryPlugin, {}),
23710
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
23711
+ LinkNodePlugin,
23712
+ {
23713
+ onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
23714
+ getBoundPath: (variables == null ? void 0 : variables.bindVariables) ? (path) => {
23715
+ var _a, _b;
23716
+ return (_b = (_a = variables.bindVariables) == null ? void 0 : _a.call(variables, path)) != null ? _b : path;
23717
+ } : void 0
23718
+ }
23719
+ ),
23720
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ListIndentPlugin, { maxDepth: 4 }),
23721
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(DisableStylesPlugin, {}),
23722
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
23723
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_jsx_runtime131.Fragment, { children })
23724
+ ] })
24558
23725
  ] });
24559
23726
  };
24560
23727
 
24561
23728
  // src/components/ParameterInputs/ParameterSelect.tsx
24562
23729
  init_emotion_jsx_shim();
24563
- var import_react156 = require("react");
24564
- var import_jsx_runtime134 = require("@emotion/react/jsx-runtime");
24565
- var ParameterSelect = (0, import_react156.forwardRef)(
23730
+ var import_react152 = require("react");
23731
+ var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
23732
+ var ParameterSelect = (0, import_react152.forwardRef)(
24566
23733
  ({ defaultOption, options, ...props }, ref) => {
24567
23734
  const { shellProps, innerProps } = extractParameterProps(props);
24568
- return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
23735
+ return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
24569
23736
  }
24570
23737
  );
24571
- var ParameterSelectInner = (0, import_react156.forwardRef)(
23738
+ var ParameterSelectInner = (0, import_react152.forwardRef)(
24572
23739
  ({ defaultOption, options, ...props }, ref) => {
24573
23740
  const { id, label, hiddenLabel } = useParameterShell();
24574
- return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
23741
+ return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
24575
23742
  "select",
24576
23743
  {
24577
23744
  css: [input3, selectInput],
@@ -24580,10 +23747,10 @@ var ParameterSelectInner = (0, import_react156.forwardRef)(
24580
23747
  ref,
24581
23748
  ...props,
24582
23749
  children: [
24583
- defaultOption ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("option", { value: "", children: defaultOption }) : null,
23750
+ defaultOption ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("option", { value: "", children: defaultOption }) : null,
24584
23751
  options.map((option) => {
24585
23752
  var _a;
24586
- return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
23753
+ return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
24587
23754
  })
24588
23755
  ]
24589
23756
  }
@@ -24593,15 +23760,15 @@ var ParameterSelectInner = (0, import_react156.forwardRef)(
24593
23760
 
24594
23761
  // src/components/ParameterInputs/ParameterTextarea.tsx
24595
23762
  init_emotion_jsx_shim();
24596
- var import_react157 = require("react");
24597
- var import_jsx_runtime135 = require("@emotion/react/jsx-runtime");
24598
- var ParameterTextarea = (0, import_react157.forwardRef)((props, ref) => {
23763
+ var import_react153 = require("react");
23764
+ var import_jsx_runtime133 = require("@emotion/react/jsx-runtime");
23765
+ var ParameterTextarea = (0, import_react153.forwardRef)((props, ref) => {
24599
23766
  const { shellProps, innerProps } = extractParameterProps(props);
24600
- return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
23767
+ return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
24601
23768
  });
24602
- var ParameterTextareaInner = (0, import_react157.forwardRef)(({ ...props }, ref) => {
23769
+ var ParameterTextareaInner = (0, import_react153.forwardRef)(({ ...props }, ref) => {
24603
23770
  const { id, label, hiddenLabel } = useParameterShell();
24604
- return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
23771
+ return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
24605
23772
  "textarea",
24606
23773
  {
24607
23774
  css: [input3, textarea2],
@@ -24615,18 +23782,18 @@ var ParameterTextareaInner = (0, import_react157.forwardRef)(({ ...props }, ref)
24615
23782
 
24616
23783
  // src/components/ParameterInputs/ParameterToggle.tsx
24617
23784
  init_emotion_jsx_shim();
24618
- var import_react158 = require("react");
24619
- var import_jsx_runtime136 = require("@emotion/react/jsx-runtime");
24620
- var ParameterToggle = (0, import_react158.forwardRef)((props, ref) => {
23785
+ var import_react154 = require("react");
23786
+ var import_jsx_runtime134 = require("@emotion/react/jsx-runtime");
23787
+ var ParameterToggle = (0, import_react154.forwardRef)((props, ref) => {
24621
23788
  const { shellProps, innerProps } = extractParameterProps(props);
24622
- return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
23789
+ return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
24623
23790
  });
24624
- var ParameterToggleInner = (0, import_react158.forwardRef)(
23791
+ var ParameterToggleInner = (0, import_react154.forwardRef)(
24625
23792
  ({ children, ...props }, ref) => {
24626
23793
  const { id, label } = useParameterShell();
24627
- return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("label", { css: inputToggleLabel2, children: [
24628
- /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
24629
- /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { css: inlineLabel2, children: label }),
23794
+ return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("label", { css: inputToggleLabel2, children: [
23795
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
23796
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", { css: inlineLabel2, children: label }),
24630
23797
  children
24631
23798
  ] });
24632
23799
  }
@@ -24637,8 +23804,8 @@ init_emotion_jsx_shim();
24637
23804
 
24638
23805
  // src/components/ProgressBar/ProgressBar.styles.ts
24639
23806
  init_emotion_jsx_shim();
24640
- var import_react159 = require("@emotion/react");
24641
- var container3 = import_react159.css`
23807
+ var import_react155 = require("@emotion/react");
23808
+ var container3 = import_react155.css`
24642
23809
  background: var(--gray-50);
24643
23810
  margin-block: var(--spacing-sm);
24644
23811
  position: relative;
@@ -24648,17 +23815,17 @@ var container3 = import_react159.css`
24648
23815
  border: solid 1px var(--gray-300);
24649
23816
  `;
24650
23817
  var themeMap = {
24651
- primary: import_react159.css`
23818
+ primary: import_react155.css`
24652
23819
  --progress-color: var(--accent-light);
24653
23820
  `,
24654
- secondary: import_react159.css`
23821
+ secondary: import_react155.css`
24655
23822
  --progress-color: var(--accent-alt-light);
24656
23823
  `,
24657
- destructive: import_react159.css`
23824
+ destructive: import_react155.css`
24658
23825
  --progress-color: var(--brand-secondary-5);
24659
23826
  `
24660
23827
  };
24661
- var slidingBackgroundPosition = import_react159.keyframes`
23828
+ var slidingBackgroundPosition = import_react155.keyframes`
24662
23829
  from {
24663
23830
  background-position: 0 0;
24664
23831
  }
@@ -24666,10 +23833,10 @@ var slidingBackgroundPosition = import_react159.keyframes`
24666
23833
  background-position: 64px 0;
24667
23834
  }
24668
23835
  `;
24669
- var determinate = import_react159.css`
23836
+ var determinate = import_react155.css`
24670
23837
  background-color: var(--progress-color);
24671
23838
  `;
24672
- var indeterminate = import_react159.css`
23839
+ var indeterminate = import_react155.css`
24673
23840
  background-image: linear-gradient(
24674
23841
  45deg,
24675
23842
  var(--progress-color) 25%,
@@ -24683,7 +23850,7 @@ var indeterminate = import_react159.css`
24683
23850
  background-size: 64px 64px;
24684
23851
  animation: ${slidingBackgroundPosition} 1s linear infinite;
24685
23852
  `;
24686
- var bar = import_react159.css`
23853
+ var bar = import_react155.css`
24687
23854
  position: absolute;
24688
23855
  inset: 0;
24689
23856
  transition: transform var(--duration-fast) var(--timing-ease-out);
@@ -24691,7 +23858,7 @@ var bar = import_react159.css`
24691
23858
  `;
24692
23859
 
24693
23860
  // src/components/ProgressBar/ProgressBar.tsx
24694
- var import_jsx_runtime137 = require("@emotion/react/jsx-runtime");
23861
+ var import_jsx_runtime135 = require("@emotion/react/jsx-runtime");
24695
23862
  function ProgressBar({
24696
23863
  current,
24697
23864
  max,
@@ -24701,7 +23868,7 @@ function ProgressBar({
24701
23868
  }) {
24702
23869
  const valueNow = Math.min(current, max);
24703
23870
  const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
24704
- return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
23871
+ return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
24705
23872
  "div",
24706
23873
  {
24707
23874
  css: container3,
@@ -24712,7 +23879,7 @@ function ProgressBar({
24712
23879
  "aria-valuemax": max,
24713
23880
  "aria-valuenow": valueNow,
24714
23881
  ...props,
24715
- children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
23882
+ children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
24716
23883
  "div",
24717
23884
  {
24718
23885
  css: [
@@ -24732,31 +23899,31 @@ function ProgressBar({
24732
23899
 
24733
23900
  // src/components/ProgressList/ProgressList.tsx
24734
23901
  init_emotion_jsx_shim();
24735
- var import_react161 = require("@emotion/react");
23902
+ var import_react157 = require("@emotion/react");
24736
23903
  var import_CgCheckO3 = require("@react-icons/all-files/cg/CgCheckO");
24737
23904
  var import_CgRadioCheck2 = require("@react-icons/all-files/cg/CgRadioCheck");
24738
23905
  var import_CgRecord2 = require("@react-icons/all-files/cg/CgRecord");
24739
- var import_react162 = require("react");
23906
+ var import_react158 = require("react");
24740
23907
 
24741
23908
  // src/components/ProgressList/styles/ProgressList.styles.ts
24742
23909
  init_emotion_jsx_shim();
24743
- var import_react160 = require("@emotion/react");
24744
- var progressListStyles = import_react160.css`
23910
+ var import_react156 = require("@emotion/react");
23911
+ var progressListStyles = import_react156.css`
24745
23912
  display: flex;
24746
23913
  flex-direction: column;
24747
23914
  gap: var(--spacing-sm);
24748
23915
  list-style-type: none;
24749
23916
  `;
24750
- var progressListItemStyles = import_react160.css`
23917
+ var progressListItemStyles = import_react156.css`
24751
23918
  display: flex;
24752
23919
  gap: var(--spacing-base);
24753
23920
  align-items: center;
24754
23921
  `;
24755
23922
 
24756
23923
  // src/components/ProgressList/ProgressList.tsx
24757
- var import_jsx_runtime138 = require("@emotion/react/jsx-runtime");
23924
+ var import_jsx_runtime136 = require("@emotion/react/jsx-runtime");
24758
23925
  var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
24759
- const itemsWithStatus = (0, import_react162.useMemo)(() => {
23926
+ const itemsWithStatus = (0, import_react158.useMemo)(() => {
24760
23927
  const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
24761
23928
  return items.map((item, index) => {
24762
23929
  let status = "queued";
@@ -24768,8 +23935,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
24768
23935
  return { ...item, status };
24769
23936
  });
24770
23937
  }, [items, inProgressId]);
24771
- return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
24772
- return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
23938
+ return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
23939
+ return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
24773
23940
  ProgressListItem,
24774
23941
  {
24775
23942
  status,
@@ -24789,7 +23956,7 @@ var ProgressListItem = ({
24789
23956
  errorLevel = "danger",
24790
23957
  autoEllipsis = false
24791
23958
  }) => {
24792
- const icon = (0, import_react162.useMemo)(() => {
23959
+ const icon = (0, import_react158.useMemo)(() => {
24793
23960
  if (error) {
24794
23961
  return warningIcon;
24795
23962
  }
@@ -24800,14 +23967,14 @@ var ProgressListItem = ({
24800
23967
  };
24801
23968
  return iconPerStatus[status];
24802
23969
  }, [status, error]);
24803
- const statusStyles = (0, import_react162.useMemo)(() => {
23970
+ const statusStyles = (0, import_react158.useMemo)(() => {
24804
23971
  if (error) {
24805
- return errorLevel === "caution" ? import_react161.css`
23972
+ return errorLevel === "caution" ? import_react157.css`
24806
23973
  color: rgb(161, 98, 7);
24807
23974
  & svg {
24808
23975
  color: rgb(250, 204, 21);
24809
23976
  }
24810
- ` : import_react161.css`
23977
+ ` : import_react157.css`
24811
23978
  color: rgb(185, 28, 28);
24812
23979
  & svg {
24813
23980
  color: var(--brand-primary-2);
@@ -24815,40 +23982,40 @@ var ProgressListItem = ({
24815
23982
  `;
24816
23983
  }
24817
23984
  const colorPerStatus = {
24818
- completed: import_react161.css`
23985
+ completed: import_react157.css`
24819
23986
  opacity: 0.75;
24820
23987
  `,
24821
- inProgress: import_react161.css`
23988
+ inProgress: import_react157.css`
24822
23989
  -webkit-text-stroke-width: thin;
24823
23990
  `,
24824
- queued: import_react161.css`
23991
+ queued: import_react157.css`
24825
23992
  opacity: 0.5;
24826
23993
  `
24827
23994
  };
24828
23995
  return colorPerStatus[status];
24829
23996
  }, [status, error, errorLevel]);
24830
- return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("li", { css: [progressListItemStyles, statusStyles], children: [
24831
- /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
24832
- /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { children: [
23997
+ return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("li", { css: [progressListItemStyles, statusStyles], children: [
23998
+ /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
23999
+ /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { children: [
24833
24000
  children,
24834
- /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
24001
+ /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
24835
24002
  ] })
24836
24003
  ] });
24837
24004
  };
24838
24005
 
24839
24006
  // src/components/SegmentedControl/SegmentedControl.tsx
24840
24007
  init_emotion_jsx_shim();
24841
- var import_react164 = require("@emotion/react");
24008
+ var import_react160 = require("@emotion/react");
24842
24009
  var import_CgCheck6 = require("@react-icons/all-files/cg/CgCheck");
24843
- var import_react165 = require("react");
24010
+ var import_react161 = require("react");
24844
24011
 
24845
24012
  // src/components/SegmentedControl/SegmentedControl.styles.ts
24846
24013
  init_emotion_jsx_shim();
24847
- var import_react163 = require("@emotion/react");
24848
- var segmentedControlRootStyles = import_react163.css`
24014
+ var import_react159 = require("@emotion/react");
24015
+ var segmentedControlRootStyles = import_react159.css`
24849
24016
  position: relative;
24850
24017
  `;
24851
- var segmentedControlScrollIndicatorsStyles = import_react163.css`
24018
+ var segmentedControlScrollIndicatorsStyles = import_react159.css`
24852
24019
  position: absolute;
24853
24020
  inset: 0;
24854
24021
  z-index: 1;
@@ -24876,17 +24043,17 @@ var segmentedControlScrollIndicatorsStyles = import_react163.css`
24876
24043
  background: linear-gradient(to left, var(--background-color) 10%, transparent);
24877
24044
  }
24878
24045
  `;
24879
- var segmentedControlScrollIndicatorStartVisibleStyles = import_react163.css`
24046
+ var segmentedControlScrollIndicatorStartVisibleStyles = import_react159.css`
24880
24047
  &::before {
24881
24048
  opacity: 1;
24882
24049
  }
24883
24050
  `;
24884
- var segmentedControlScrollIndicatorEndVisibleStyles = import_react163.css`
24051
+ var segmentedControlScrollIndicatorEndVisibleStyles = import_react159.css`
24885
24052
  &::after {
24886
24053
  opacity: 1;
24887
24054
  }
24888
24055
  `;
24889
- var segmentedControlWrapperStyles = import_react163.css`
24056
+ var segmentedControlWrapperStyles = import_react159.css`
24890
24057
  overflow-y: auto;
24891
24058
  scroll-behavior: smooth;
24892
24059
  scrollbar-width: none;
@@ -24895,7 +24062,7 @@ var segmentedControlWrapperStyles = import_react163.css`
24895
24062
  height: 0px;
24896
24063
  }
24897
24064
  `;
24898
- var segmentedControlStyles = import_react163.css`
24065
+ var segmentedControlStyles = import_react159.css`
24899
24066
  --segmented-control-rounded-value: var(--rounded-base);
24900
24067
  --segmented-control-border-width: 1px;
24901
24068
  --segmented-control-selected-color: var(--brand-secondary-3);
@@ -24914,14 +24081,14 @@ var segmentedControlStyles = import_react163.css`
24914
24081
  border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
24915
24082
  font-size: var(--fs-xs);
24916
24083
  `;
24917
- var segmentedControlVerticalStyles = import_react163.css`
24084
+ var segmentedControlVerticalStyles = import_react159.css`
24918
24085
  flex-direction: column;
24919
24086
  --segmented-control-first-border-radius: var(--segmented-control-rounded-value)
24920
24087
  var(--segmented-control-rounded-value) 0 0;
24921
24088
  --segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
24922
24089
  var(--segmented-control-rounded-value);
24923
24090
  `;
24924
- var segmentedControlItemStyles = import_react163.css`
24091
+ var segmentedControlItemStyles = import_react159.css`
24925
24092
  &:first-of-type label {
24926
24093
  border-radius: var(--segmented-control-first-border-radius);
24927
24094
  }
@@ -24929,10 +24096,10 @@ var segmentedControlItemStyles = import_react163.css`
24929
24096
  border-radius: var(--segmented-control-last-border-radius);
24930
24097
  }
24931
24098
  `;
24932
- var segmentedControlInputStyles = import_react163.css`
24099
+ var segmentedControlInputStyles = import_react159.css`
24933
24100
  ${accessibleHidden}
24934
24101
  `;
24935
- var segmentedControlLabelStyles = (checked, disabled2) => import_react163.css`
24102
+ var segmentedControlLabelStyles = (checked, disabled2) => import_react159.css`
24936
24103
  position: relative;
24937
24104
  display: flex;
24938
24105
  align-items: center;
@@ -24999,25 +24166,25 @@ var segmentedControlLabelStyles = (checked, disabled2) => import_react163.css`
24999
24166
  `}
25000
24167
  }
25001
24168
  `;
25002
- var segmentedControlLabelIconOnlyStyles = import_react163.css`
24169
+ var segmentedControlLabelIconOnlyStyles = import_react159.css`
25003
24170
  padding-inline: 0.5em;
25004
24171
  `;
25005
- var segmentedControlLabelCheckStyles = import_react163.css`
24172
+ var segmentedControlLabelCheckStyles = import_react159.css`
25006
24173
  opacity: 0.5;
25007
24174
  `;
25008
- var segmentedControlLabelContentStyles = import_react163.css`
24175
+ var segmentedControlLabelContentStyles = import_react159.css`
25009
24176
  display: flex;
25010
24177
  align-items: center;
25011
24178
  justify-content: center;
25012
24179
  gap: var(--spacing-sm);
25013
24180
  height: 100%;
25014
24181
  `;
25015
- var segmentedControlLabelTextStyles = import_react163.css`
24182
+ var segmentedControlLabelTextStyles = import_react159.css`
25016
24183
  white-space: nowrap;
25017
24184
  `;
25018
24185
 
25019
24186
  // src/components/SegmentedControl/SegmentedControl.tsx
25020
- var import_jsx_runtime139 = require("@emotion/react/jsx-runtime");
24187
+ var import_jsx_runtime137 = require("@emotion/react/jsx-runtime");
25021
24188
  var SegmentedControl = ({
25022
24189
  name,
25023
24190
  options,
@@ -25032,10 +24199,10 @@ var SegmentedControl = ({
25032
24199
  currentBackgroundColor = "white",
25033
24200
  ...props
25034
24201
  }) => {
25035
- const wrapperRef = (0, import_react165.useRef)(null);
25036
- const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0, import_react165.useState)(false);
25037
- const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0, import_react165.useState)(false);
25038
- const onOptionChange = (0, import_react165.useCallback)(
24202
+ const wrapperRef = (0, import_react161.useRef)(null);
24203
+ const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0, import_react161.useState)(false);
24204
+ const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0, import_react161.useState)(false);
24205
+ const onOptionChange = (0, import_react161.useCallback)(
25039
24206
  (event) => {
25040
24207
  if (event.target.checked) {
25041
24208
  onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
@@ -25043,19 +24210,19 @@ var SegmentedControl = ({
25043
24210
  },
25044
24211
  [options, onChange]
25045
24212
  );
25046
- const sizeStyles = (0, import_react165.useMemo)(() => {
24213
+ const sizeStyles = (0, import_react161.useMemo)(() => {
25047
24214
  const map = {
25048
- sm: (0, import_react164.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
25049
- md: (0, import_react164.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
25050
- lg: (0, import_react164.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
25051
- xl: (0, import_react164.css)({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
24215
+ sm: (0, import_react160.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
24216
+ md: (0, import_react160.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
24217
+ lg: (0, import_react160.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
24218
+ xl: (0, import_react160.css)({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
25052
24219
  };
25053
24220
  return map[size];
25054
24221
  }, [size]);
25055
- const isIconOnly = (0, import_react165.useMemo)(() => {
24222
+ const isIconOnly = (0, import_react161.useMemo)(() => {
25056
24223
  return options.every((option) => option && option.icon && !option.label);
25057
24224
  }, [options]);
25058
- (0, import_react165.useEffect)(() => {
24225
+ (0, import_react161.useEffect)(() => {
25059
24226
  const wrapperElement = wrapperRef.current;
25060
24227
  const onScroll = () => {
25061
24228
  if (!wrapperElement) {
@@ -25076,8 +24243,8 @@ var SegmentedControl = ({
25076
24243
  wrapperElement == null ? void 0 : wrapperElement.removeEventListener("scroll", onScroll);
25077
24244
  };
25078
24245
  }, []);
25079
- return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
25080
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
24246
+ return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
24247
+ /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
25081
24248
  "div",
25082
24249
  {
25083
24250
  css: [
@@ -25093,12 +24260,12 @@ var SegmentedControl = ({
25093
24260
  }
25094
24261
  const text = option.label ? option.label : option.icon ? null : String(option.value);
25095
24262
  const isDisabled = disabled2 || option.disabled;
25096
- return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
24263
+ return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
25097
24264
  "div",
25098
24265
  {
25099
24266
  css: segmentedControlItemStyles,
25100
24267
  "data-testid": option["data-testid"] ? option["data-testid"] : "container-segmented-control",
25101
- children: /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
24268
+ children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
25102
24269
  "label",
25103
24270
  {
25104
24271
  css: [
@@ -25107,7 +24274,7 @@ var SegmentedControl = ({
25107
24274
  isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
25108
24275
  ],
25109
24276
  children: [
25110
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
24277
+ /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
25111
24278
  "input",
25112
24279
  {
25113
24280
  css: segmentedControlInputStyles,
@@ -25119,10 +24286,10 @@ var SegmentedControl = ({
25119
24286
  disabled: isDisabled
25120
24287
  }
25121
24288
  ),
25122
- option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_CgCheck6.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
25123
- /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
25124
- !option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
25125
- !text || hideOptionText ? null : /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
24289
+ option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_CgCheck6.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
24290
+ /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
24291
+ !option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
24292
+ !text || hideOptionText ? null : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
25126
24293
  ] })
25127
24294
  ]
25128
24295
  }
@@ -25132,7 +24299,7 @@ var SegmentedControl = ({
25132
24299
  })
25133
24300
  }
25134
24301
  ) }),
25135
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
24302
+ /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
25136
24303
  "div",
25137
24304
  {
25138
24305
  css: [
@@ -25150,18 +24317,18 @@ init_emotion_jsx_shim();
25150
24317
 
25151
24318
  // src/components/Skeleton/Skeleton.styles.ts
25152
24319
  init_emotion_jsx_shim();
25153
- var import_react166 = require("@emotion/react");
25154
- var lightFadingOut = import_react166.keyframes`
24320
+ var import_react162 = require("@emotion/react");
24321
+ var lightFadingOut = import_react162.keyframes`
25155
24322
  from { opacity: 0.1; }
25156
24323
  to { opacity: 0.025; }
25157
24324
  `;
25158
- var skeletonStyles = import_react166.css`
24325
+ var skeletonStyles = import_react162.css`
25159
24326
  animation: ${lightFadingOut} 1s ease-out infinite alternate;
25160
24327
  background-color: var(--gray-900);
25161
24328
  `;
25162
24329
 
25163
24330
  // src/components/Skeleton/Skeleton.tsx
25164
- var import_jsx_runtime140 = require("@emotion/react/jsx-runtime");
24331
+ var import_jsx_runtime138 = require("@emotion/react/jsx-runtime");
25165
24332
  var Skeleton = ({
25166
24333
  width = "100%",
25167
24334
  height = "1.25rem",
@@ -25169,7 +24336,7 @@ var Skeleton = ({
25169
24336
  circle = false,
25170
24337
  children,
25171
24338
  ...otherProps
25172
- }) => /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
24339
+ }) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
25173
24340
  "div",
25174
24341
  {
25175
24342
  css: [
@@ -25190,12 +24357,12 @@ var Skeleton = ({
25190
24357
 
25191
24358
  // src/components/Switch/Switch.tsx
25192
24359
  init_emotion_jsx_shim();
25193
- var import_react168 = require("react");
24360
+ var import_react164 = require("react");
25194
24361
 
25195
24362
  // src/components/Switch/Switch.styles.ts
25196
24363
  init_emotion_jsx_shim();
25197
- var import_react167 = require("@emotion/react");
25198
- var SwitchInputContainer = import_react167.css`
24364
+ var import_react163 = require("@emotion/react");
24365
+ var SwitchInputContainer = import_react163.css`
25199
24366
  cursor: pointer;
25200
24367
  display: inline-block;
25201
24368
  position: relative;
@@ -25204,7 +24371,7 @@ var SwitchInputContainer = import_react167.css`
25204
24371
  vertical-align: middle;
25205
24372
  user-select: none;
25206
24373
  `;
25207
- var SwitchInput = (size) => import_react167.css`
24374
+ var SwitchInput = (size) => import_react163.css`
25208
24375
  appearance: none;
25209
24376
  border-radius: var(--rounded-full);
25210
24377
  background-color: var(--white);
@@ -25243,7 +24410,7 @@ var SwitchInput = (size) => import_react167.css`
25243
24410
  cursor: not-allowed;
25244
24411
  }
25245
24412
  `;
25246
- var SwitchInputDisabled = import_react167.css`
24413
+ var SwitchInputDisabled = import_react163.css`
25247
24414
  opacity: var(--opacity-50);
25248
24415
  cursor: not-allowed;
25249
24416
 
@@ -25251,7 +24418,7 @@ var SwitchInputDisabled = import_react167.css`
25251
24418
  cursor: not-allowed;
25252
24419
  }
25253
24420
  `;
25254
- var SwitchInputLabel = (size) => import_react167.css`
24421
+ var SwitchInputLabel = (size) => import_react163.css`
25255
24422
  align-items: center;
25256
24423
  color: var(--typography-base);
25257
24424
  display: inline-flex;
@@ -25273,32 +24440,32 @@ var SwitchInputLabel = (size) => import_react167.css`
25273
24440
  top: 0;
25274
24441
  }
25275
24442
  `;
25276
- var SwitchText = (size) => import_react167.css`
24443
+ var SwitchText = (size) => import_react163.css`
25277
24444
  color: var(--gray-500);
25278
24445
  font-size: var(--fs-sm);
25279
24446
  padding-inline: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"} 0;
25280
24447
  `;
25281
24448
 
25282
24449
  // src/components/Switch/Switch.tsx
25283
- var import_jsx_runtime141 = require("@emotion/react/jsx-runtime");
25284
- var Switch = (0, import_react168.forwardRef)(
24450
+ var import_jsx_runtime139 = require("@emotion/react/jsx-runtime");
24451
+ var Switch = (0, import_react164.forwardRef)(
25285
24452
  ({ label, infoText, toggleText, children, switchSize = "base", ...inputProps }, ref) => {
25286
24453
  let additionalText = infoText;
25287
24454
  if (infoText && toggleText) {
25288
24455
  additionalText = inputProps.checked ? toggleText : infoText;
25289
24456
  }
25290
- return /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_jsx_runtime141.Fragment, { children: [
25291
- /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
24457
+ return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(import_jsx_runtime139.Fragment, { children: [
24458
+ /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
25292
24459
  "label",
25293
24460
  {
25294
24461
  css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0],
25295
24462
  children: [
25296
- /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("input", { type: "checkbox", css: SwitchInput(switchSize), ...inputProps, ref }),
25297
- /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("span", { css: SwitchInputLabel(switchSize), children: label })
24463
+ /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("input", { type: "checkbox", css: SwitchInput(switchSize), ...inputProps, ref }),
24464
+ /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("span", { css: SwitchInputLabel(switchSize), children: label })
25298
24465
  ]
25299
24466
  }
25300
24467
  ),
25301
- additionalText ? /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("p", { css: SwitchText(switchSize), children: additionalText }) : null,
24468
+ additionalText ? /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("p", { css: SwitchText(switchSize), children: additionalText }) : null,
25302
24469
  children
25303
24470
  ] });
25304
24471
  }
@@ -25310,8 +24477,8 @@ var React24 = __toESM(require("react"));
25310
24477
 
25311
24478
  // src/components/Table/Table.styles.ts
25312
24479
  init_emotion_jsx_shim();
25313
- var import_react169 = require("@emotion/react");
25314
- var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_react169.css`
24480
+ var import_react165 = require("@emotion/react");
24481
+ var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_react165.css`
25315
24482
  border-bottom: 1px solid var(--gray-400);
25316
24483
  border-collapse: collapse;
25317
24484
  min-width: 100%;
@@ -25331,66 +24498,66 @@ var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_
25331
24498
  background-color: var(--gray-50);
25332
24499
  }
25333
24500
  `;
25334
- var tableHead = import_react169.css`
24501
+ var tableHead = import_react165.css`
25335
24502
  color: var(--typography-base);
25336
24503
  text-align: left;
25337
24504
  `;
25338
- var tableRow = import_react169.css`
24505
+ var tableRow = import_react165.css`
25339
24506
  border-bottom: 1px solid var(--gray-100);
25340
24507
  `;
25341
- var tableCellHead = import_react169.css`
24508
+ var tableCellHead = import_react165.css`
25342
24509
  font-size: var(--fs-sm);
25343
24510
  text-transform: uppercase;
25344
24511
  font-weight: var(--fw-bold);
25345
24512
  `;
25346
24513
 
25347
24514
  // src/components/Table/Table.tsx
25348
- var import_jsx_runtime142 = require("@emotion/react/jsx-runtime");
24515
+ var import_jsx_runtime140 = require("@emotion/react/jsx-runtime");
25349
24516
  var Table = React24.forwardRef(
25350
24517
  ({ children, cellPadding, ...otherProps }, ref) => {
25351
- return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
24518
+ return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
25352
24519
  }
25353
24520
  );
25354
24521
  var TableHead = React24.forwardRef(
25355
24522
  ({ children, ...otherProps }, ref) => {
25356
- return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
24523
+ return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
25357
24524
  }
25358
24525
  );
25359
24526
  var TableBody = React24.forwardRef(
25360
24527
  ({ children, ...otherProps }, ref) => {
25361
- return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("tbody", { ref, ...otherProps, children });
24528
+ return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("tbody", { ref, ...otherProps, children });
25362
24529
  }
25363
24530
  );
25364
24531
  var TableFoot = React24.forwardRef(
25365
24532
  ({ children, ...otherProps }, ref) => {
25366
- return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("tfoot", { ref, ...otherProps, children });
24533
+ return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("tfoot", { ref, ...otherProps, children });
25367
24534
  }
25368
24535
  );
25369
24536
  var TableRow = React24.forwardRef(
25370
24537
  ({ children, ...otherProps }, ref) => {
25371
- return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
24538
+ return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
25372
24539
  }
25373
24540
  );
25374
24541
  var TableCellHead = React24.forwardRef(
25375
24542
  ({ children, ...otherProps }, ref) => {
25376
- return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
24543
+ return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
25377
24544
  }
25378
24545
  );
25379
24546
  var TableCellData = React24.forwardRef(
25380
24547
  ({ children, ...otherProps }, ref) => {
25381
- return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("td", { ref, ...otherProps, children });
24548
+ return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("td", { ref, ...otherProps, children });
25382
24549
  }
25383
24550
  );
25384
24551
 
25385
24552
  // src/components/Tabs/Tabs.tsx
25386
24553
  init_emotion_jsx_shim();
25387
- var import_react171 = require("@ariakit/react");
25388
- var import_react172 = require("react");
24554
+ var import_react167 = require("@ariakit/react");
24555
+ var import_react168 = require("react");
25389
24556
 
25390
24557
  // src/components/Tabs/Tabs.styles.ts
25391
24558
  init_emotion_jsx_shim();
25392
- var import_react170 = require("@emotion/react");
25393
- var tabButtonStyles = import_react170.css`
24559
+ var import_react166 = require("@emotion/react");
24560
+ var tabButtonStyles = import_react166.css`
25394
24561
  align-items: center;
25395
24562
  border: 0;
25396
24563
  height: 2.5rem;
@@ -25407,16 +24574,16 @@ var tabButtonStyles = import_react170.css`
25407
24574
  box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
25408
24575
  }
25409
24576
  `;
25410
- var tabButtonGroupStyles = import_react170.css`
24577
+ var tabButtonGroupStyles = import_react166.css`
25411
24578
  display: flex;
25412
24579
  gap: var(--spacing-base);
25413
24580
  border-bottom: 1px solid var(--gray-300);
25414
24581
  `;
25415
24582
 
25416
24583
  // src/components/Tabs/Tabs.tsx
25417
- var import_jsx_runtime143 = require("@emotion/react/jsx-runtime");
24584
+ var import_jsx_runtime141 = require("@emotion/react/jsx-runtime");
25418
24585
  var useCurrentTab = () => {
25419
- const context = (0, import_react171.useTabStore)();
24586
+ const context = (0, import_react167.useTabStore)();
25420
24587
  if (!context) {
25421
24588
  throw new Error("This component can only be used inside <Tabs>");
25422
24589
  }
@@ -25430,12 +24597,12 @@ var Tabs = ({
25430
24597
  manual,
25431
24598
  ...props
25432
24599
  }) => {
25433
- const selected = (0, import_react172.useMemo)(() => {
24600
+ const selected = (0, import_react168.useMemo)(() => {
25434
24601
  if (selectedId) return selectedId;
25435
24602
  return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
25436
24603
  }, [selectedId, useHashForState]);
25437
- const tab = (0, import_react171.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
25438
- const onTabSelect = (0, import_react172.useCallback)(
24604
+ const tab = (0, import_react167.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
24605
+ const onTabSelect = (0, import_react168.useCallback)(
25439
24606
  (value) => {
25440
24607
  const selectedValueWithoutNull = value != null ? value : void 0;
25441
24608
  onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -25446,28 +24613,28 @@ var Tabs = ({
25446
24613
  },
25447
24614
  [onSelectedIdChange, useHashForState]
25448
24615
  );
25449
- (0, import_react172.useEffect)(() => {
24616
+ (0, import_react168.useEffect)(() => {
25450
24617
  if (selected && selected !== tab.getState().activeId) {
25451
24618
  tab.setSelectedId(selected);
25452
24619
  }
25453
24620
  }, [selected, tab]);
25454
- return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react171.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
24621
+ return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react167.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
25455
24622
  };
25456
24623
  var TabButtonGroup = ({ children, ...props }) => {
25457
- return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react171.TabList, { ...props, css: tabButtonGroupStyles, children });
24624
+ return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react167.TabList, { ...props, css: tabButtonGroupStyles, children });
25458
24625
  };
25459
24626
  var TabButton = ({
25460
24627
  children,
25461
24628
  id,
25462
24629
  ...props
25463
24630
  }) => {
25464
- return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react171.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
24631
+ return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react167.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
25465
24632
  };
25466
24633
  var TabContent = ({
25467
24634
  children,
25468
24635
  ...props
25469
24636
  }) => {
25470
- return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react171.TabPanel, { ...props, children });
24637
+ return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react167.TabPanel, { ...props, children });
25471
24638
  };
25472
24639
 
25473
24640
  // src/components/Validation/StatusBullet.tsx
@@ -25475,8 +24642,8 @@ init_emotion_jsx_shim();
25475
24642
 
25476
24643
  // src/components/Validation/StatusBullet.styles.ts
25477
24644
  init_emotion_jsx_shim();
25478
- var import_react173 = require("@emotion/react");
25479
- var StatusBulletContainer = import_react173.css`
24645
+ var import_react169 = require("@emotion/react");
24646
+ var StatusBulletContainer = import_react169.css`
25480
24647
  align-items: center;
25481
24648
  align-self: center;
25482
24649
  color: var(--gray-500);
@@ -25493,33 +24660,33 @@ var StatusBulletContainer = import_react173.css`
25493
24660
  display: block;
25494
24661
  }
25495
24662
  `;
25496
- var StatusBulletBase = import_react173.css`
24663
+ var StatusBulletBase = import_react169.css`
25497
24664
  font-size: var(--fs-sm);
25498
24665
  &:before {
25499
24666
  width: var(--fs-xs);
25500
24667
  height: var(--fs-xs);
25501
24668
  }
25502
24669
  `;
25503
- var StatusBulletSmall = import_react173.css`
24670
+ var StatusBulletSmall = import_react169.css`
25504
24671
  font-size: var(--fs-xs);
25505
24672
  &:before {
25506
24673
  width: var(--fs-xxs);
25507
24674
  height: var(--fs-xxs);
25508
24675
  }
25509
24676
  `;
25510
- var StatusDraft = import_react173.css`
24677
+ var StatusDraft = import_react169.css`
25511
24678
  &:before {
25512
24679
  background: var(--white);
25513
24680
  box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
25514
24681
  }
25515
24682
  `;
25516
- var StatusModified = import_react173.css`
24683
+ var StatusModified = import_react169.css`
25517
24684
  &:before {
25518
24685
  background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
25519
24686
  box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
25520
24687
  }
25521
24688
  `;
25522
- var StatusError = import_react173.css`
24689
+ var StatusError = import_react169.css`
25523
24690
  color: var(--error);
25524
24691
  &:before {
25525
24692
  /* TODO: replace this with an svg icon */
@@ -25532,29 +24699,29 @@ var StatusError = import_react173.css`
25532
24699
  );
25533
24700
  }
25534
24701
  `;
25535
- var StatusPublished = import_react173.css`
24702
+ var StatusPublished = import_react169.css`
25536
24703
  &:before {
25537
24704
  background: var(--accent-dark);
25538
24705
  }
25539
24706
  `;
25540
- var StatusOrphan = import_react173.css`
24707
+ var StatusOrphan = import_react169.css`
25541
24708
  &:before {
25542
24709
  background: var(--brand-secondary-5);
25543
24710
  }
25544
24711
  `;
25545
- var StatusUnknown = import_react173.css`
24712
+ var StatusUnknown = import_react169.css`
25546
24713
  &:before {
25547
24714
  background: var(--gray-800);
25548
24715
  }
25549
24716
  `;
25550
- var StatusDeleted = import_react173.css`
24717
+ var StatusDeleted = import_react169.css`
25551
24718
  &:before {
25552
24719
  background: var(--error);
25553
24720
  }
25554
24721
  `;
25555
24722
 
25556
24723
  // src/components/Validation/StatusBullet.tsx
25557
- var import_jsx_runtime144 = require("@emotion/react/jsx-runtime");
24724
+ var import_jsx_runtime142 = require("@emotion/react/jsx-runtime");
25558
24725
  var StatusBullet = ({
25559
24726
  status,
25560
24727
  hideText = false,
@@ -25574,7 +24741,7 @@ var StatusBullet = ({
25574
24741
  Deleted: StatusDeleted
25575
24742
  };
25576
24743
  const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
25577
- return /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
24744
+ return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
25578
24745
  "span",
25579
24746
  {
25580
24747
  role: "status",