@uniformdev/design-system 19.178.2-alpha.25 → 19.179.1-alpha.1

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