@uniformdev/design-system 19.178.2-alpha.25 → 19.179.2-alpha.22

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
@@ -1593,12 +1593,16 @@ __export(src_exports, {
1593
1593
  supports: () => supports,
1594
1594
  textInput: () => textInput,
1595
1595
  toast: () => import_react_toastify.toast,
1596
+ uniformAiIcon: () => uniformAiIcon,
1596
1597
  uniformComponentIcon: () => uniformComponentIcon,
1597
1598
  uniformComponentPatternIcon: () => uniformComponentPatternIcon,
1598
1599
  uniformCompositionPatternIcon: () => uniformCompositionPatternIcon,
1600
+ uniformConditionalValuesIcon: () => uniformConditionalValuesIcon,
1599
1601
  uniformContentTypeIcon: () => uniformContentTypeIcon,
1600
1602
  uniformEntryIcon: () => uniformEntryIcon,
1601
1603
  uniformEntryPatternIcon: () => uniformEntryPatternIcon,
1604
+ uniformLocaleDisabledIcon: () => uniformLocaleDisabledIcon,
1605
+ uniformLocaleIcon: () => uniformLocaleIcon,
1602
1606
  useBreakpoint: () => useBreakpoint,
1603
1607
  useCloseCurrentDrawer: () => useCloseCurrentDrawer,
1604
1608
  useCurrentDrawer: () => useCurrentDrawer,
@@ -1609,7 +1613,6 @@ __export(src_exports, {
1609
1613
  useOutsideClick: () => useOutsideClick,
1610
1614
  useParameterShell: () => useParameterShell,
1611
1615
  usePopoverComponentContext: () => usePopoverComponentContext,
1612
- useRichTextToolbarState: () => useRichTextToolbarState,
1613
1616
  useShortcut: () => useShortcut,
1614
1617
  utilityColors: () => functionalColors,
1615
1618
  warningIcon: () => warningIcon,
@@ -2513,7 +2516,8 @@ var button = import_react10.css`
2513
2516
  cursor: pointer;
2514
2517
  display: inline-flex;
2515
2518
  font-weight: var(--fw-medium);
2516
- transition: color var(--duration-fast) var(--timing-ease-out),
2519
+ transition:
2520
+ color var(--duration-fast) var(--timing-ease-out),
2517
2521
  border-color var(--duration-fast) var(--timing-ease-out);
2518
2522
  max-width: max-content;
2519
2523
  gap: var(--spacing-sm);
@@ -3300,9 +3304,11 @@ var input = (whiteSpaceWrap) => import_react17.css`
3300
3304
  width: 100%;
3301
3305
  position: relative;
3302
3306
  white-space: ${whiteSpaceWrap};
3303
- transition: background var(--duration-fast) var(--timing-ease-out),
3307
+ transition:
3308
+ background var(--duration-fast) var(--timing-ease-out),
3304
3309
  border-color var(--duration-fast) var(--timing-ease-out),
3305
- color var(--duration-fast) var(--timing-ease-out), box-shadow var(--duration-fast) var(--timing-ease-out);
3310
+ color var(--duration-fast) var(--timing-ease-out),
3311
+ box-shadow var(--duration-fast) var(--timing-ease-out);
3306
3312
 
3307
3313
  &::placeholder {
3308
3314
  color: var(--gray-400);
@@ -3422,7 +3428,8 @@ var toggleInput = import_react17.css`
3422
3428
  background: var(--white);
3423
3429
  width: var(--spacing-md);
3424
3430
  height: var(--spacing-md);
3425
- transition: background var(--duration-fast) var(--timing-ease-out),
3431
+ transition:
3432
+ background var(--duration-fast) var(--timing-ease-out),
3426
3433
  border-color var(--duration-fast) var(--timing-ease-out),
3427
3434
  color var(--duration-fast) var(--timing-ease-out);
3428
3435
 
@@ -3666,7 +3673,9 @@ var addButton = import_react21.css`
3666
3673
  cursor: pointer;
3667
3674
  display: inline-flex;
3668
3675
  padding: 0;
3669
- transition: transform var(--duration-fast) var(--timing-ease-out), background var(--duration-slow);
3676
+ transition:
3677
+ transform var(--duration-fast) var(--timing-ease-out),
3678
+ background var(--duration-slow);
3670
3679
  transform: scale(0.95);
3671
3680
  width: var(--max-size);
3672
3681
  height: var(--max-size);
@@ -4789,10 +4798,37 @@ var customIcons = {
4789
4798
  // src/components/Icons/systemIcons.tsx
4790
4799
  init_emotion_jsx_shim();
4791
4800
  var import_all_files2 = require("@react-icons/all-files");
4801
+ var import_CgGlobeAlt2 = require("@react-icons/all-files/cg/CgGlobeAlt");
4792
4802
  var import_CgList2 = require("@react-icons/all-files/cg/CgList");
4793
4803
  var import_CgPen2 = require("@react-icons/all-files/cg/CgPen");
4804
+ var import_TbBinaryTree2 = require("@react-icons/all-files/tb/TbBinaryTree2");
4794
4805
  var import_TbBox = require("@react-icons/all-files/tb/TbBox");
4795
4806
  var uniformComponentIcon = import_TbBox.TbBox;
4807
+ var uniformConditionalValuesIcon = import_TbBinaryTree2.TbBinaryTree2;
4808
+ var uniformAiIcon = customIcons["magic-wand"];
4809
+ var uniformLocaleIcon = import_CgGlobeAlt2.CgGlobeAlt;
4810
+ var uniformLocaleDisabledIcon = (0, import_all_files2.GenIcon)({
4811
+ tag: "svg",
4812
+ attr: { fill: "currentColor", viewBox: "0 0 24 24", role: "img" },
4813
+ child: [
4814
+ {
4815
+ tag: "path",
4816
+ attr: {
4817
+ fillRule: "evenodd",
4818
+ d: "M20.123 15.88A9 9 0 0 0 8.12 3.877l2.787 2.787c.03-.073.06-.145.092-.216.294-.661.592-1.073.823-1.292a.988.988 0 0 1 .178-.14.991.991 0 0 1 .178.14c.23.22.528.63.823 1.292.366.825.665 1.901.838 3.148l3.593 3.594a9.739 9.739 0 0 0 1.548-.665 6.968 6.968 0 0 1-.385 1.827l1.528 1.528ZM14.805 5.585c.691 1.53 1.136 3.62 1.19 5.945a9.939 9.939 0 0 0 1.557-.53c.6-.266.994-.536 1.226-.756a7.016 7.016 0 0 0-3.973-4.66ZM3.877 8.12A9 9 0 0 0 15.88 20.123l-2.787-2.787a7.89 7.89 0 0 1-.092.216c-.294.661-.593 1.073-.823 1.292a.996.996 0 0 1-.178.14.99.99 0 0 1-.178-.14c-.23-.22-.529-.63-.823-1.292-.367-.825-.666-1.901-.838-3.148L6.967 11.21a8.334 8.334 0 0 1-.519-.21c-.6-.266-.995-.536-1.226-.756a6.95 6.95 0 0 1 .183-.596L3.877 8.12Zm5.317 10.295c-.577-1.278-.982-2.947-1.131-4.817-1.183-.256-2.22-.624-3.044-1.073a7.004 7.004 0 0 0 4.175 5.89Z",
4819
+ clipRule: "evenodd"
4820
+ },
4821
+ child: []
4822
+ },
4823
+ {
4824
+ tag: "path",
4825
+ attr: {
4826
+ d: "M20.031 20.031a1.5 1.5 0 0 1-2.121 0L3.06 5.182a1.5 1.5 0 0 1 2.122-2.121L20.03 17.91a1.5 1.5 0 0 1 0 2.121Z"
4827
+ },
4828
+ child: []
4829
+ }
4830
+ ]
4831
+ });
4796
4832
  var uniformComponentPatternIcon = (0, import_all_files2.GenIcon)({
4797
4833
  tag: "svg",
4798
4834
  attr: {
@@ -13908,7 +13944,8 @@ var buttonStyle = (bgColor) => import_react32.css`
13908
13944
  display: block;
13909
13945
  font-size: var(--fs-sm);
13910
13946
  line-height: 1.5;
13911
- transition: background-color var(--duration-fast) var(--timing-ease-out),
13947
+ transition:
13948
+ background-color var(--duration-fast) var(--timing-ease-out),
13912
13949
  outline var(--duration-fast) var(--timing-ease-out);
13913
13950
  outline: 1px solid transparent;
13914
13951
 
@@ -14151,7 +14188,6 @@ var Menu = React7.forwardRef(function Menu2({
14151
14188
  menuItemsContainerCssClasses,
14152
14189
  testId,
14153
14190
  maxMenuHeight,
14154
- portalElement,
14155
14191
  ...props
14156
14192
  }, ref) {
14157
14193
  const placementOverride = legacyPlacements.includes(placement) ? void 0 : placement;
@@ -14162,7 +14198,6 @@ var Menu = React7.forwardRef(function Menu2({
14162
14198
  import_react37.Menu,
14163
14199
  {
14164
14200
  portal: !withoutPortal,
14165
- portalElement,
14166
14201
  unmountOnHide: true,
14167
14202
  gutter: 0,
14168
14203
  shift: menu.parent ? -4 : 0,
@@ -14337,7 +14372,8 @@ var CheckboxWithInfoInput = import_react41.css`
14337
14372
  border-radius: var(--rounded-sm);
14338
14373
  width: calc(var(--spacing-base) - 2px);
14339
14374
  height: calc(var(--spacing-base) - 2px);
14340
- transition: background var(--duration-fast) var(--timing-ease-out),
14375
+ transition:
14376
+ background var(--duration-fast) var(--timing-ease-out),
14341
14377
  border-color var(--duration-fast) var(--timing-ease-out),
14342
14378
  color var(--duration-fast) var(--timing-ease-out);
14343
14379
 
@@ -15595,7 +15631,8 @@ var ButtonWithMenuContainer = import_react57.css`
15595
15631
  display: inline-flex;
15596
15632
  position: relative;
15597
15633
  min-height: 24px;
15598
- transition: color var(--duration-fast) var(--timing-ease-out),
15634
+ transition:
15635
+ color var(--duration-fast) var(--timing-ease-out),
15599
15636
  border-color var(--duration-fast) var(--timing-ease-out),
15600
15637
  background-color var(--duration-fast) var(--timing-ease-out);
15601
15638
 
@@ -16599,7 +16636,8 @@ var import_react69 = require("@emotion/react");
16599
16636
  var ChipContainer = import_react69.css`
16600
16637
  border-radius: var(--rounded-full);
16601
16638
  display: inline-flex;
16602
- transition: background var(--duration-fast) var(--timing-ease-out),
16639
+ transition:
16640
+ background var(--duration-fast) var(--timing-ease-out),
16603
16641
  color var(--duration-fast) var(--timing-ease-out);
16604
16642
  position: relative;
16605
16643
 
@@ -16879,7 +16917,8 @@ var MultilineChipContainer = import_react70.css`
16879
16917
  --gradient-rgb: var(--accent-primary-dark-rgb);
16880
16918
  --gradient-rgb-hover: var(--accent-primary-dark-hover-rgb);
16881
16919
  border-radius: var(--rounded-full);
16882
- background: radial-gradient(
16920
+ background:
16921
+ radial-gradient(
16883
16922
  farthest-side at 100%,
16884
16923
  rgba(var(--gradient-rgb), 0) 0%,
16885
16924
  rgba(var(--gradient-rgb), 0.2) 80%,
@@ -16912,7 +16951,8 @@ var MultilineChipContainer = import_react70.css`
16912
16951
  border: none;
16913
16952
  &:hover,
16914
16953
  &:focus {
16915
- background: radial-gradient(
16954
+ background:
16955
+ radial-gradient(
16916
16956
  farthest-side at 100%,
16917
16957
  rgba(var(--gradient-rgb-hover), 0) 0%,
16918
16958
  rgba(var(--gradient-rgb-hover), 0.2) 80%,
@@ -16969,17 +17009,19 @@ init_emotion_jsx_shim();
16969
17009
  // src/components/Counter/Counter.styles.ts
16970
17010
  init_emotion_jsx_shim();
16971
17011
  var import_react71 = require("@emotion/react");
16972
- var counterContainer = (bgColor) => import_react71.css`
17012
+ var counterContainer = (bgColor, hasIcon) => import_react71.css`
16973
17013
  align-items: center;
16974
17014
  border-radius: var(--rounded-full);
16975
17015
  border: 1px solid var(--gray-300);
16976
17016
  background: ${bgColor};
16977
- color: var(--typography-base);
17017
+ color: ${bgColor === "var(--accent-dark)" ? "white" : "var(--typography-base)"};
16978
17018
  display: inline-flex;
16979
- font-size: var(--fs-xxs);
17019
+ gap: var(--spacing-xs);
17020
+ font-size: var(--fs-xs);
16980
17021
  font-weight: var(--fw-regular);
16981
17022
  justify-content: center;
16982
- width: var(--spacing-base);
17023
+ padding: 4px;
17024
+ width: ${hasIcon ? "auto" : "var(--spacing-base)"};
16983
17025
  height: var(--spacing-base);
16984
17026
  `;
16985
17027
  var counterZeroValue = import_react71.css`
@@ -17003,7 +17045,13 @@ var counterIcon = import_react71.css`
17003
17045
 
17004
17046
  // src/components/Counter/Counter.tsx
17005
17047
  var import_jsx_runtime63 = require("@emotion/react/jsx-runtime");
17006
- var Counter = ({ count, bgColor = "transparent", ...props }) => {
17048
+ var Counter = ({
17049
+ count,
17050
+ bgColor = "transparent",
17051
+ icon,
17052
+ iconColor = "auto",
17053
+ ...props
17054
+ }) => {
17007
17055
  if (typeof count === "undefined") {
17008
17056
  return null;
17009
17057
  }
@@ -17012,7 +17060,19 @@ var Counter = ({ count, bgColor = "transparent", ...props }) => {
17012
17060
  /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.5rem", css: counterIcon })
17013
17061
  ] }) : count;
17014
17062
  const formatCount = count === 0 ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { css: counterZeroValue, title: `${count}` }) : isTripleDigits;
17015
- return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { css: counterContainer(bgColor), ...props, children: formatCount });
17063
+ return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { css: counterContainer(bgColor, Boolean(icon)), ...props, children: [
17064
+ icon ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
17065
+ "span",
17066
+ {
17067
+ css: [
17068
+ iconColor ? functionalColors : void 0,
17069
+ { color: iconColor ? iconColor === "red" ? "var(--brand-secondary-5)" : iconColor : "inherit" }
17070
+ ],
17071
+ children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon, { icon, iconColor: "currentColor", size: "0.6rem" })
17072
+ }
17073
+ ) : null,
17074
+ /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: formatCount })
17075
+ ] });
17016
17076
  };
17017
17077
 
17018
17078
  // src/components/DashedBox/DashedBox.tsx
@@ -21153,7 +21213,8 @@ var inputIconBtn = import_react130.css`
21153
21213
  color: var(--gray-500);
21154
21214
  background: none;
21155
21215
  display: flex;
21156
- transition: background var(--duration-fast) var(--timing-ease-out),
21216
+ transition:
21217
+ background var(--duration-fast) var(--timing-ease-out),
21157
21218
  color var(--duration-fast) var(--timing-ease-out);
21158
21219
 
21159
21220
  &:hover,
@@ -21331,7 +21392,8 @@ var toggleInput2 = import_react131.css`
21331
21392
  background: var(--white);
21332
21393
  width: var(--spacing-base);
21333
21394
  height: var(--spacing-base);
21334
- transition: background var(--duration-fast) var(--timing-ease-out),
21395
+ transition:
21396
+ background var(--duration-fast) var(--timing-ease-out),
21335
21397
  border-color var(--duration-fast) var(--timing-ease-out),
21336
21398
  color var(--duration-fast) var(--timing-ease-out);
21337
21399
  font-size: var(--fs-sm);
@@ -21431,7 +21493,8 @@ var dataConnectButton = import_react131.css`
21431
21493
  display: flex;
21432
21494
  padding: var(--spacing-sm);
21433
21495
  position: relative;
21434
- transition: background var(--duration-fast) var(--timing-ease-out),
21496
+ transition:
21497
+ background var(--duration-fast) var(--timing-ease-out),
21435
21498
  outline-color var(--duration-fast) var(--timing-ease-out),
21436
21499
  color var(--duration-fast) var(--timing-ease-out);
21437
21500
  width: 100%;
@@ -22148,20 +22211,18 @@ var ParameterNameAndPublicIdInput = ({
22148
22211
 
22149
22212
  // src/components/ParameterInputs/ParameterRichText.tsx
22150
22213
  init_emotion_jsx_shim();
22151
- var import_react154 = require("@emotion/react");
22214
+ var import_react150 = require("@emotion/react");
22152
22215
  var import_list3 = require("@lexical/list");
22153
22216
  var import_markdown = require("@lexical/markdown");
22154
22217
  var import_LexicalComposer = require("@lexical/react/LexicalComposer");
22155
- var import_LexicalComposerContext7 = require("@lexical/react/LexicalComposerContext");
22218
+ var import_LexicalComposerContext5 = require("@lexical/react/LexicalComposerContext");
22156
22219
  var import_LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
22157
22220
  var import_LexicalErrorBoundary = __toESM(require("@lexical/react/LexicalErrorBoundary"));
22158
22221
  var import_LexicalHistoryPlugin = require("@lexical/react/LexicalHistoryPlugin");
22159
22222
  var import_LexicalListPlugin = require("@lexical/react/LexicalListPlugin");
22160
22223
  var import_LexicalMarkdownShortcutPlugin = require("@lexical/react/LexicalMarkdownShortcutPlugin");
22161
22224
  var import_LexicalRichTextPlugin = require("@lexical/react/LexicalRichTextPlugin");
22162
- var import_LexicalTablePlugin = require("@lexical/react/LexicalTablePlugin");
22163
22225
  var import_rich_text2 = require("@lexical/rich-text");
22164
- var import_table4 = require("@lexical/table");
22165
22226
 
22166
22227
  // ../richtext/dist/index.mjs
22167
22228
  init_emotion_jsx_shim();
@@ -22210,10 +22271,6 @@ var richTextBuiltInElements = [
22210
22271
  label: "Code Block",
22211
22272
  type: "code"
22212
22273
  },
22213
- {
22214
- label: "Table",
22215
- type: "table"
22216
- },
22217
22274
  {
22218
22275
  label: "Dynamic Token",
22219
22276
  type: "variable"
@@ -22260,8 +22317,8 @@ var getLabelForElement = (type) => {
22260
22317
 
22261
22318
  // src/components/ParameterInputs/ParameterRichText.tsx
22262
22319
  var import_fast_equals2 = require("fast-equals");
22263
- var import_lexical8 = require("lexical");
22264
- var import_react155 = require("react");
22320
+ var import_lexical6 = require("lexical");
22321
+ var import_react151 = require("react");
22265
22322
 
22266
22323
  // src/components/ParameterInputs/rich-text/CustomCodeNode.ts
22267
22324
  init_emotion_jsx_shim();
@@ -22479,46 +22536,6 @@ var codeElement = import_css2.css`
22479
22536
  margin-bottom: 0;
22480
22537
  }
22481
22538
  `;
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
22539
 
22523
22540
  // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
22524
22541
  init_emotion_jsx_shim();
@@ -22866,11 +22883,7 @@ var linkPopoverAnchor = import_react145.css`
22866
22883
  ${link}
22867
22884
  ${linkColorDefault}
22868
22885
  `;
22869
- function LinkNodePlugin({
22870
- onConnectLink,
22871
- getBoundPath,
22872
- positioningAnchorEl
22873
- }) {
22886
+ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
22874
22887
  const parsePath = getBoundPath != null ? getBoundPath : function(path) {
22875
22888
  return path;
22876
22889
  };
@@ -22974,11 +22987,9 @@ function LinkNodePlugin({
22974
22987
  setLinkPopoverState(void 0);
22975
22988
  return;
22976
22989
  }
22977
- const elementRect = element.getBoundingClientRect();
22978
- const positioningAnchorRect = positioningAnchorEl.getBoundingClientRect();
22979
22990
  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
22991
+ x: element.offsetLeft + LINK_POPOVER_OFFSET_X,
22992
+ y: element.offsetTop + element.clientHeight + LINK_POPOVER_OFFSET_Y
22982
22993
  };
22983
22994
  setLinkPopoverState({
22984
22995
  node: linkNode,
@@ -22987,7 +22998,7 @@ function LinkNodePlugin({
22987
22998
  y
22988
22999
  }
22989
23000
  });
22990
- }, [editor, positioningAnchorEl]);
23001
+ }, [editor]);
22991
23002
  (0, import_react146.useEffect)(() => {
22992
23003
  return editor.registerUpdateListener(({ editorState }) => {
22993
23004
  requestAnimationFrame(() => {
@@ -23118,20 +23129,17 @@ var import_list2 = require("@lexical/list");
23118
23129
  var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerContext");
23119
23130
  var import_rich_text = require("@lexical/rich-text");
23120
23131
  var import_selection2 = require("@lexical/selection");
23121
- var import_table = require("@lexical/table");
23122
23132
  var import_utils9 = require("@lexical/utils");
23123
23133
  var import_lexical5 = require("lexical");
23124
23134
  var import_react149 = require("react");
23125
23135
  var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
23126
23136
  var toolbar = import_react148.css`
23127
- ${scrollbarStyles}
23128
23137
  background: var(--gray-50);
23129
23138
  border-radius: var(--rounded-base);
23130
23139
  display: flex;
23131
23140
  /* We add 1px because we use a 1px wide separator */
23132
23141
  gap: calc(var(--spacing-sm) + 1px);
23133
23142
  margin: calc(var(--spacing-sm) + var(--spacing-xs)) 0;
23134
- overflow: auto;
23135
23143
  padding: var(--spacing-sm);
23136
23144
  position: sticky;
23137
23145
  top: calc(var(--spacing-sm) * -2);
@@ -23139,7 +23147,6 @@ var toolbar = import_react148.css`
23139
23147
  `;
23140
23148
  var toolbarGroup = import_react148.css`
23141
23149
  display: flex;
23142
- flex-shrink: 0;
23143
23150
  gap: var(--spacing-xs);
23144
23151
  position: relative;
23145
23152
 
@@ -23162,7 +23169,6 @@ var richTextToolbarButton = import_react148.css`
23162
23169
  box-shadow: none;
23163
23170
  color: var(--gray-900);
23164
23171
  display: flex;
23165
- flex-shrink: 0;
23166
23172
  height: 32px;
23167
23173
  justify-content: center;
23168
23174
  min-width: 32px;
@@ -23171,10 +23177,6 @@ var richTextToolbarButton = import_react148.css`
23171
23177
  var richTextToolbarButtonActive = import_react148.css`
23172
23178
  background: var(--gray-200);
23173
23179
  `;
23174
- var textStyleButton = import_react148.css`
23175
- justify-content: space-between;
23176
- min-width: 7rem;
23177
- `;
23178
23180
  var toolbarIcon = import_react148.css`
23179
23181
  color: inherit;
23180
23182
  `;
@@ -23195,7 +23197,7 @@ var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
23195
23197
  ]);
23196
23198
  var HEADING_ELEMENTS = ["h1", "h2", "h3", "h4", "h5", "h6"];
23197
23199
  var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
23198
- var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
23200
+ var RichTextToolbar = ({ config, customControls }) => {
23199
23201
  const [editor] = (0, import_LexicalComposerContext4.useLexicalComposerContext)();
23200
23202
  const {
23201
23203
  activeElement,
@@ -23211,39 +23213,26 @@ var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
23211
23213
  visibleLists,
23212
23214
  codeElementVisible,
23213
23215
  quoteElementVisible,
23214
- visibleElementsWithIcons,
23215
- visibleInsertElementsWithIcons,
23216
- tableElementVisible
23216
+ visibleElementsWithIcons
23217
23217
  } = useRichTextToolbarState({ config });
23218
23218
  const onSelectElement = (type) => {
23219
23219
  if (activeElement === type) {
23220
23220
  return;
23221
23221
  }
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
- });
23222
+ editor.update(() => {
23223
+ const selection = (0, import_lexical5.$getSelection)();
23224
+ if (!(0, import_lexical5.$isRangeSelection)(selection)) {
23225
+ return;
23226
+ }
23227
+ if (HEADING_ELEMENTS.includes(type)) {
23228
+ (0, import_selection2.$setBlocksType)(selection, () => (0, import_rich_text.$createHeadingNode)(type));
23229
+ } else if (type === "paragraph") {
23230
+ (0, import_selection2.$setBlocksType)(selection, () => (0, import_lexical5.$createParagraphNode)());
23231
+ } else if (type === "quote") {
23232
+ (0, import_selection2.$setBlocksType)(selection, () => (0, import_rich_text.$createQuoteNode)());
23233
+ } else if (type === "code") {
23234
+ (0, import_selection2.$setBlocksType)(selection, () => (0, import_code2.$createCodeNode)());
23235
+ }
23247
23236
  });
23248
23237
  };
23249
23238
  const updateToolbar = (0, import_react149.useCallback)(() => {
@@ -23308,7 +23297,8 @@ var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
23308
23297
  /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
23309
23298
  Menu,
23310
23299
  {
23311
- menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", children: [
23300
+ menuLabel: "Elements",
23301
+ menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("button", { css: richTextToolbarButton, title: "Text styles", children: [
23312
23302
  visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
23313
23303
  " ",
23314
23304
  /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
@@ -23368,7 +23358,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
23368
23358
  }
23369
23359
  ) : null
23370
23360
  ] }) : null,
23371
- visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { css: toolbarGroup, children: [
23361
+ visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { css: toolbarGroup, children: [
23372
23362
  linkElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23373
23363
  "button",
23374
23364
  {
@@ -23407,50 +23397,28 @@ var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
23407
23397
  }
23408
23398
  ) }) : null
23409
23399
  ] }) : null,
23410
- customControls ? customControls : null
23400
+ quoteElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23401
+ "button",
23402
+ {
23403
+ onClick: () => {
23404
+ activeElement === "quote" ? onSelectElement("paragraph") : onSelectElement("quote");
23405
+ },
23406
+ css: [richTextToolbarButton, activeElement === "quote" ? richTextToolbarButtonActive : null],
23407
+ children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: "quote" })
23408
+ }
23409
+ ) }) : null,
23410
+ codeElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23411
+ "button",
23412
+ {
23413
+ onClick: () => {
23414
+ activeElement === "code" ? onSelectElement("paragraph") : onSelectElement("code");
23415
+ },
23416
+ css: [richTextToolbarButton, activeElement === "code" ? richTextToolbarButtonActive : null],
23417
+ children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: "code-slash" })
23418
+ }
23419
+ ) }) : null
23411
23420
  ] }) : 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
23421
+ customControls ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { css: toolbarGroup, children: customControls }) : null
23454
23422
  ] });
23455
23423
  };
23456
23424
  var RichTextToolbar_default = RichTextToolbar;
@@ -23527,9 +23495,6 @@ var useRichTextToolbarState = ({ config }) => {
23527
23495
  const codeElementVisible = (0, import_react149.useMemo)(() => {
23528
23496
  return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
23529
23497
  }, [activeElement, enabledBuiltInElements]);
23530
- const tableElementVisible = (0, import_react149.useMemo)(() => {
23531
- return enabledBuiltInElements.some((element) => element.type === "table") || activeElement === "table";
23532
- }, [activeElement, enabledBuiltInElements]);
23533
23498
  const visibleElementsWithIcons = (0, import_react149.useMemo)(() => {
23534
23499
  const visibleElements = /* @__PURE__ */ new Set();
23535
23500
  if (linkElementVisible) {
@@ -23540,21 +23505,14 @@ var useRichTextToolbarState = ({ config }) => {
23540
23505
  visibleElements.add(type);
23541
23506
  });
23542
23507
  }
23543
- return visibleElements;
23544
- }, [linkElementVisible, visibleLists]);
23545
- const visibleInsertElementsWithIcons = (0, import_react149.useMemo)(() => {
23546
- const visibleElements = /* @__PURE__ */ new Set();
23547
23508
  if (quoteElementVisible) {
23548
23509
  visibleElements.add("quote");
23549
23510
  }
23550
23511
  if (codeElementVisible) {
23551
23512
  visibleElements.add("code");
23552
23513
  }
23553
- if (tableElementVisible) {
23554
- visibleElements.add("table");
23555
- }
23556
23514
  return visibleElements;
23557
- }, [codeElementVisible, quoteElementVisible, tableElementVisible]);
23515
+ }, [codeElementVisible, linkElementVisible, quoteElementVisible, visibleLists]);
23558
23516
  return {
23559
23517
  activeFormats,
23560
23518
  setActiveFormats,
@@ -23569,699 +23527,12 @@ var useRichTextToolbarState = ({ config }) => {
23569
23527
  visibleLists,
23570
23528
  quoteElementVisible,
23571
23529
  codeElementVisible,
23572
- tableElementVisible,
23573
- visibleElementsWithIcons,
23574
- visibleInsertElementsWithIcons
23530
+ visibleElementsWithIcons
23575
23531
  };
23576
23532
  };
23577
23533
 
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
23534
  // src/components/ParameterInputs/ParameterRichText.tsx
24264
- var import_jsx_runtime133 = require("@emotion/react/jsx-runtime");
23535
+ var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
24265
23536
  var ParameterRichText = ({
24266
23537
  label,
24267
23538
  labelLeadingIcon,
@@ -24280,16 +23551,13 @@ var ParameterRichText = ({
24280
23551
  readOnly,
24281
23552
  editorWrapperClassName,
24282
23553
  editorInputClassName,
24283
- editorInputWrapperClassName,
24284
23554
  editorFooter,
24285
23555
  customNodes,
24286
23556
  children,
24287
23557
  variables,
24288
- customControls,
24289
- onInsertTable,
24290
- minimalInteractivity
23558
+ customControls
24291
23559
  }) => {
24292
- return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
23560
+ return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
24293
23561
  ParameterShell,
24294
23562
  {
24295
23563
  "data-testid": "parameter-richtext",
@@ -24303,7 +23571,7 @@ var ParameterRichText = ({
24303
23571
  captionTestId,
24304
23572
  menuItems,
24305
23573
  children: [
24306
- /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
23574
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
24307
23575
  ParameterRichTextInner,
24308
23576
  {
24309
23577
  value,
@@ -24314,33 +23582,30 @@ var ParameterRichText = ({
24314
23582
  readOnly,
24315
23583
  editorWrapperClassName,
24316
23584
  editorInputClassName,
24317
- editorInputWrapperClassName,
24318
23585
  editorFooter,
24319
23586
  customNodes,
24320
23587
  variables,
24321
23588
  customControls,
24322
- onInsertTable,
24323
- minimalInteractivity,
24324
23589
  children
24325
23590
  }
24326
23591
  ),
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
23592
+ 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
23593
  ]
24329
23594
  }
24330
23595
  );
24331
23596
  };
24332
- var editorWrapper = import_react154.css`
23597
+ var editorWrapper = import_react150.css`
24333
23598
  display: flex;
24334
23599
  flex-flow: column;
24335
23600
  flex-grow: 1;
24336
23601
  `;
24337
- var editorContainer = import_react154.css`
23602
+ var editorContainer = import_react150.css`
24338
23603
  display: flex;
24339
23604
  flex-flow: column;
24340
23605
  flex-grow: 1;
24341
23606
  position: relative;
24342
23607
  `;
24343
- var editorPlaceholder = import_react154.css`
23608
+ var editorPlaceholder = import_react150.css`
24344
23609
  color: var(--gray-500);
24345
23610
  font-style: italic;
24346
23611
  /* 1px is added to make sure caret is clearly visible when field is focused
@@ -24351,7 +23616,7 @@ var editorPlaceholder = import_react154.css`
24351
23616
  top: var(--spacing-sm);
24352
23617
  user-select: none;
24353
23618
  `;
24354
- var editorInput = import_react154.css`
23619
+ var editorInput = import_react150.css`
24355
23620
  background: var(--white);
24356
23621
  border: 1px solid var(--gray-200);
24357
23622
  border-radius: var(--rounded-sm);
@@ -24379,14 +23644,11 @@ var ParameterRichTextInner = ({
24379
23644
  readOnly,
24380
23645
  editorWrapperClassName,
24381
23646
  editorInputClassName,
24382
- editorInputWrapperClassName,
24383
23647
  editorFooter,
24384
23648
  children,
24385
23649
  customNodes,
24386
23650
  variables,
24387
- customControls,
24388
- onInsertTable,
24389
- minimalInteractivity
23651
+ customControls
24390
23652
  }) => {
24391
23653
  const lexicalConfig = {
24392
23654
  namespace: "uniform",
@@ -24400,11 +23662,8 @@ var ParameterRichTextInner = ({
24400
23662
  LinkNode,
24401
23663
  import_rich_text2.HeadingNode,
24402
23664
  import_rich_text2.QuoteNode,
24403
- import_lexical8.ParagraphNode,
23665
+ import_lexical6.ParagraphNode,
24404
23666
  CustomCodeNode,
24405
- import_table4.TableNode,
24406
- import_table4.TableCellNode,
24407
- import_table4.TableRowNode,
24408
23667
  ...customNodes != null ? customNodes : []
24409
23668
  ],
24410
23669
  theme: {
@@ -24437,15 +23696,12 @@ var ParameterRichTextInner = ({
24437
23696
  }
24438
23697
  },
24439
23698
  quote: blockquoteElement,
24440
- code: codeElement,
24441
- table: tableElement,
24442
- tableCell: tableCellElement,
24443
- tableCellHeader: tableHeaderElement
23699
+ code: codeElement
24444
23700
  },
24445
23701
  editable: !readOnly
24446
23702
  };
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)(
23703
+ return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
23704
+ /* @__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
23705
  RichText,
24450
23706
  {
24451
23707
  onChange,
@@ -24454,11 +23710,8 @@ var ParameterRichTextInner = ({
24454
23710
  onRichTextInit,
24455
23711
  readOnly,
24456
23712
  editorInputClassName,
24457
- editorInputWrapperClassName,
24458
23713
  variables,
24459
23714
  customControls,
24460
- onInsertTable,
24461
- minimalInteractivity,
24462
23715
  children
24463
23716
  }
24464
23717
  ) }) }),
@@ -24481,20 +23734,18 @@ var RichText = ({
24481
23734
  onRichTextInit,
24482
23735
  readOnly,
24483
23736
  editorInputClassName,
24484
- editorInputWrapperClassName,
24485
23737
  children,
24486
23738
  variables,
24487
- customControls,
24488
- onInsertTable,
24489
- minimalInteractivity
23739
+ customControls
24490
23740
  }) => {
24491
- const [editor] = (0, import_LexicalComposerContext7.useLexicalComposerContext)();
24492
- (0, import_react155.useEffect)(() => {
23741
+ const editorContainerRef = (0, import_react151.useRef)(null);
23742
+ const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
23743
+ (0, import_react151.useEffect)(() => {
24493
23744
  if (onRichTextInit) {
24494
23745
  onRichTextInit(editor);
24495
23746
  }
24496
23747
  }, [editor, onRichTextInit]);
24497
- (0, import_react155.useEffect)(() => {
23748
+ (0, import_react151.useEffect)(() => {
24498
23749
  const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState }) => {
24499
23750
  requestAnimationFrame(() => {
24500
23751
  if (!(0, import_fast_equals2.deepEqual)(editorState.toJSON(), prevEditorState.toJSON())) {
@@ -24506,73 +23757,54 @@ var RichText = ({
24506
23757
  removeUpdateListener();
24507
23758
  };
24508
23759
  }, [editor, onChange]);
24509
- (0, import_react155.useEffect)(() => {
23760
+ (0, import_react151.useEffect)(() => {
24510
23761
  editor.setEditable(!readOnly);
24511
23762
  }, [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
- )
23763
+ return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
23764
+ readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(RichTextToolbar_default, { config, customControls }),
23765
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
23766
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
23767
+ import_LexicalRichTextPlugin.RichTextPlugin,
23768
+ {
23769
+ contentEditable: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalContentEditable.ContentEditable, { css: editorInput, className: editorInputClassName }),
23770
+ placeholder: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
23771
+ ErrorBoundary: import_LexicalErrorBoundary.default
23772
+ }
23773
+ ),
23774
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalListPlugin.ListPlugin, {}),
23775
+ readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalHistoryPlugin.HistoryPlugin, {}),
23776
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
23777
+ LinkNodePlugin,
23778
+ {
23779
+ onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
23780
+ getBoundPath: (variables == null ? void 0 : variables.bindVariables) ? (path) => {
23781
+ var _a, _b;
23782
+ return (_b = (_a = variables.bindVariables) == null ? void 0 : _a.call(variables, path)) != null ? _b : path;
23783
+ } : void 0
23784
+ }
23785
+ ),
23786
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ListIndentPlugin, { maxDepth: 4 }),
23787
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(DisableStylesPlugin, {}),
23788
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
23789
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_jsx_runtime131.Fragment, { children })
23790
+ ] })
24559
23791
  ] });
24560
23792
  };
24561
23793
 
24562
23794
  // src/components/ParameterInputs/ParameterSelect.tsx
24563
23795
  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)(
23796
+ var import_react152 = require("react");
23797
+ var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
23798
+ var ParameterSelect = (0, import_react152.forwardRef)(
24567
23799
  ({ defaultOption, options, ...props }, ref) => {
24568
23800
  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 }) });
23801
+ return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
24570
23802
  }
24571
23803
  );
24572
- var ParameterSelectInner = (0, import_react156.forwardRef)(
23804
+ var ParameterSelectInner = (0, import_react152.forwardRef)(
24573
23805
  ({ defaultOption, options, ...props }, ref) => {
24574
23806
  const { id, label, hiddenLabel } = useParameterShell();
24575
- return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
23807
+ return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
24576
23808
  "select",
24577
23809
  {
24578
23810
  css: [input3, selectInput],
@@ -24581,10 +23813,10 @@ var ParameterSelectInner = (0, import_react156.forwardRef)(
24581
23813
  ref,
24582
23814
  ...props,
24583
23815
  children: [
24584
- defaultOption ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("option", { value: "", children: defaultOption }) : null,
23816
+ defaultOption ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("option", { value: "", children: defaultOption }) : null,
24585
23817
  options.map((option) => {
24586
23818
  var _a;
24587
- return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
23819
+ return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
24588
23820
  })
24589
23821
  ]
24590
23822
  }
@@ -24594,15 +23826,15 @@ var ParameterSelectInner = (0, import_react156.forwardRef)(
24594
23826
 
24595
23827
  // src/components/ParameterInputs/ParameterTextarea.tsx
24596
23828
  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) => {
23829
+ var import_react153 = require("react");
23830
+ var import_jsx_runtime133 = require("@emotion/react/jsx-runtime");
23831
+ var ParameterTextarea = (0, import_react153.forwardRef)((props, ref) => {
24600
23832
  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 }) });
23833
+ return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
24602
23834
  });
24603
- var ParameterTextareaInner = (0, import_react157.forwardRef)(({ ...props }, ref) => {
23835
+ var ParameterTextareaInner = (0, import_react153.forwardRef)(({ ...props }, ref) => {
24604
23836
  const { id, label, hiddenLabel } = useParameterShell();
24605
- return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
23837
+ return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
24606
23838
  "textarea",
24607
23839
  {
24608
23840
  css: [input3, textarea2],
@@ -24616,18 +23848,18 @@ var ParameterTextareaInner = (0, import_react157.forwardRef)(({ ...props }, ref)
24616
23848
 
24617
23849
  // src/components/ParameterInputs/ParameterToggle.tsx
24618
23850
  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) => {
23851
+ var import_react154 = require("react");
23852
+ var import_jsx_runtime134 = require("@emotion/react/jsx-runtime");
23853
+ var ParameterToggle = (0, import_react154.forwardRef)((props, ref) => {
24622
23854
  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 }) });
23855
+ return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
24624
23856
  });
24625
- var ParameterToggleInner = (0, import_react158.forwardRef)(
23857
+ var ParameterToggleInner = (0, import_react154.forwardRef)(
24626
23858
  ({ children, ...props }, ref) => {
24627
23859
  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 }),
23860
+ return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("label", { css: inputToggleLabel2, children: [
23861
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
23862
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", { css: inlineLabel2, children: label }),
24631
23863
  children
24632
23864
  ] });
24633
23865
  }
@@ -24638,8 +23870,8 @@ init_emotion_jsx_shim();
24638
23870
 
24639
23871
  // src/components/ProgressBar/ProgressBar.styles.ts
24640
23872
  init_emotion_jsx_shim();
24641
- var import_react159 = require("@emotion/react");
24642
- var container3 = import_react159.css`
23873
+ var import_react155 = require("@emotion/react");
23874
+ var container3 = import_react155.css`
24643
23875
  background: var(--gray-50);
24644
23876
  margin-block: var(--spacing-sm);
24645
23877
  position: relative;
@@ -24649,17 +23881,17 @@ var container3 = import_react159.css`
24649
23881
  border: solid 1px var(--gray-300);
24650
23882
  `;
24651
23883
  var themeMap = {
24652
- primary: import_react159.css`
23884
+ primary: import_react155.css`
24653
23885
  --progress-color: var(--accent-light);
24654
23886
  `,
24655
- secondary: import_react159.css`
23887
+ secondary: import_react155.css`
24656
23888
  --progress-color: var(--accent-alt-light);
24657
23889
  `,
24658
- destructive: import_react159.css`
23890
+ destructive: import_react155.css`
24659
23891
  --progress-color: var(--brand-secondary-5);
24660
23892
  `
24661
23893
  };
24662
- var slidingBackgroundPosition = import_react159.keyframes`
23894
+ var slidingBackgroundPosition = import_react155.keyframes`
24663
23895
  from {
24664
23896
  background-position: 0 0;
24665
23897
  }
@@ -24667,10 +23899,10 @@ var slidingBackgroundPosition = import_react159.keyframes`
24667
23899
  background-position: 64px 0;
24668
23900
  }
24669
23901
  `;
24670
- var determinate = import_react159.css`
23902
+ var determinate = import_react155.css`
24671
23903
  background-color: var(--progress-color);
24672
23904
  `;
24673
- var indeterminate = import_react159.css`
23905
+ var indeterminate = import_react155.css`
24674
23906
  background-image: linear-gradient(
24675
23907
  45deg,
24676
23908
  var(--progress-color) 25%,
@@ -24684,7 +23916,7 @@ var indeterminate = import_react159.css`
24684
23916
  background-size: 64px 64px;
24685
23917
  animation: ${slidingBackgroundPosition} 1s linear infinite;
24686
23918
  `;
24687
- var bar = import_react159.css`
23919
+ var bar = import_react155.css`
24688
23920
  position: absolute;
24689
23921
  inset: 0;
24690
23922
  transition: transform var(--duration-fast) var(--timing-ease-out);
@@ -24692,7 +23924,7 @@ var bar = import_react159.css`
24692
23924
  `;
24693
23925
 
24694
23926
  // src/components/ProgressBar/ProgressBar.tsx
24695
- var import_jsx_runtime137 = require("@emotion/react/jsx-runtime");
23927
+ var import_jsx_runtime135 = require("@emotion/react/jsx-runtime");
24696
23928
  function ProgressBar({
24697
23929
  current,
24698
23930
  max,
@@ -24702,7 +23934,7 @@ function ProgressBar({
24702
23934
  }) {
24703
23935
  const valueNow = Math.min(current, max);
24704
23936
  const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
24705
- return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
23937
+ return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
24706
23938
  "div",
24707
23939
  {
24708
23940
  css: container3,
@@ -24713,7 +23945,7 @@ function ProgressBar({
24713
23945
  "aria-valuemax": max,
24714
23946
  "aria-valuenow": valueNow,
24715
23947
  ...props,
24716
- children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
23948
+ children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
24717
23949
  "div",
24718
23950
  {
24719
23951
  css: [
@@ -24733,31 +23965,31 @@ function ProgressBar({
24733
23965
 
24734
23966
  // src/components/ProgressList/ProgressList.tsx
24735
23967
  init_emotion_jsx_shim();
24736
- var import_react161 = require("@emotion/react");
23968
+ var import_react157 = require("@emotion/react");
24737
23969
  var import_CgCheckO3 = require("@react-icons/all-files/cg/CgCheckO");
24738
23970
  var import_CgRadioCheck2 = require("@react-icons/all-files/cg/CgRadioCheck");
24739
23971
  var import_CgRecord2 = require("@react-icons/all-files/cg/CgRecord");
24740
- var import_react162 = require("react");
23972
+ var import_react158 = require("react");
24741
23973
 
24742
23974
  // src/components/ProgressList/styles/ProgressList.styles.ts
24743
23975
  init_emotion_jsx_shim();
24744
- var import_react160 = require("@emotion/react");
24745
- var progressListStyles = import_react160.css`
23976
+ var import_react156 = require("@emotion/react");
23977
+ var progressListStyles = import_react156.css`
24746
23978
  display: flex;
24747
23979
  flex-direction: column;
24748
23980
  gap: var(--spacing-sm);
24749
23981
  list-style-type: none;
24750
23982
  `;
24751
- var progressListItemStyles = import_react160.css`
23983
+ var progressListItemStyles = import_react156.css`
24752
23984
  display: flex;
24753
23985
  gap: var(--spacing-base);
24754
23986
  align-items: center;
24755
23987
  `;
24756
23988
 
24757
23989
  // src/components/ProgressList/ProgressList.tsx
24758
- var import_jsx_runtime138 = require("@emotion/react/jsx-runtime");
23990
+ var import_jsx_runtime136 = require("@emotion/react/jsx-runtime");
24759
23991
  var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
24760
- const itemsWithStatus = (0, import_react162.useMemo)(() => {
23992
+ const itemsWithStatus = (0, import_react158.useMemo)(() => {
24761
23993
  const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
24762
23994
  return items.map((item, index) => {
24763
23995
  let status = "queued";
@@ -24769,8 +24001,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
24769
24001
  return { ...item, status };
24770
24002
  });
24771
24003
  }, [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)(
24004
+ return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
24005
+ return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
24774
24006
  ProgressListItem,
24775
24007
  {
24776
24008
  status,
@@ -24790,7 +24022,7 @@ var ProgressListItem = ({
24790
24022
  errorLevel = "danger",
24791
24023
  autoEllipsis = false
24792
24024
  }) => {
24793
- const icon = (0, import_react162.useMemo)(() => {
24025
+ const icon = (0, import_react158.useMemo)(() => {
24794
24026
  if (error) {
24795
24027
  return warningIcon;
24796
24028
  }
@@ -24801,14 +24033,14 @@ var ProgressListItem = ({
24801
24033
  };
24802
24034
  return iconPerStatus[status];
24803
24035
  }, [status, error]);
24804
- const statusStyles = (0, import_react162.useMemo)(() => {
24036
+ const statusStyles = (0, import_react158.useMemo)(() => {
24805
24037
  if (error) {
24806
- return errorLevel === "caution" ? import_react161.css`
24038
+ return errorLevel === "caution" ? import_react157.css`
24807
24039
  color: rgb(161, 98, 7);
24808
24040
  & svg {
24809
24041
  color: rgb(250, 204, 21);
24810
24042
  }
24811
- ` : import_react161.css`
24043
+ ` : import_react157.css`
24812
24044
  color: rgb(185, 28, 28);
24813
24045
  & svg {
24814
24046
  color: var(--brand-primary-2);
@@ -24816,40 +24048,40 @@ var ProgressListItem = ({
24816
24048
  `;
24817
24049
  }
24818
24050
  const colorPerStatus = {
24819
- completed: import_react161.css`
24051
+ completed: import_react157.css`
24820
24052
  opacity: 0.75;
24821
24053
  `,
24822
- inProgress: import_react161.css`
24054
+ inProgress: import_react157.css`
24823
24055
  -webkit-text-stroke-width: thin;
24824
24056
  `,
24825
- queued: import_react161.css`
24057
+ queued: import_react157.css`
24826
24058
  opacity: 0.5;
24827
24059
  `
24828
24060
  };
24829
24061
  return colorPerStatus[status];
24830
24062
  }, [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: [
24063
+ return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("li", { css: [progressListItemStyles, statusStyles], children: [
24064
+ /* @__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" }) }) }),
24065
+ /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { children: [
24834
24066
  children,
24835
- /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
24067
+ /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
24836
24068
  ] })
24837
24069
  ] });
24838
24070
  };
24839
24071
 
24840
24072
  // src/components/SegmentedControl/SegmentedControl.tsx
24841
24073
  init_emotion_jsx_shim();
24842
- var import_react164 = require("@emotion/react");
24074
+ var import_react160 = require("@emotion/react");
24843
24075
  var import_CgCheck6 = require("@react-icons/all-files/cg/CgCheck");
24844
- var import_react165 = require("react");
24076
+ var import_react161 = require("react");
24845
24077
 
24846
24078
  // src/components/SegmentedControl/SegmentedControl.styles.ts
24847
24079
  init_emotion_jsx_shim();
24848
- var import_react163 = require("@emotion/react");
24849
- var segmentedControlRootStyles = import_react163.css`
24080
+ var import_react159 = require("@emotion/react");
24081
+ var segmentedControlRootStyles = import_react159.css`
24850
24082
  position: relative;
24851
24083
  `;
24852
- var segmentedControlScrollIndicatorsStyles = import_react163.css`
24084
+ var segmentedControlScrollIndicatorsStyles = import_react159.css`
24853
24085
  position: absolute;
24854
24086
  inset: 0;
24855
24087
  z-index: 1;
@@ -24877,17 +24109,17 @@ var segmentedControlScrollIndicatorsStyles = import_react163.css`
24877
24109
  background: linear-gradient(to left, var(--background-color) 10%, transparent);
24878
24110
  }
24879
24111
  `;
24880
- var segmentedControlScrollIndicatorStartVisibleStyles = import_react163.css`
24112
+ var segmentedControlScrollIndicatorStartVisibleStyles = import_react159.css`
24881
24113
  &::before {
24882
24114
  opacity: 1;
24883
24115
  }
24884
24116
  `;
24885
- var segmentedControlScrollIndicatorEndVisibleStyles = import_react163.css`
24117
+ var segmentedControlScrollIndicatorEndVisibleStyles = import_react159.css`
24886
24118
  &::after {
24887
24119
  opacity: 1;
24888
24120
  }
24889
24121
  `;
24890
- var segmentedControlWrapperStyles = import_react163.css`
24122
+ var segmentedControlWrapperStyles = import_react159.css`
24891
24123
  overflow-y: auto;
24892
24124
  scroll-behavior: smooth;
24893
24125
  scrollbar-width: none;
@@ -24896,7 +24128,7 @@ var segmentedControlWrapperStyles = import_react163.css`
24896
24128
  height: 0px;
24897
24129
  }
24898
24130
  `;
24899
- var segmentedControlStyles = import_react163.css`
24131
+ var segmentedControlStyles = import_react159.css`
24900
24132
  --segmented-control-rounded-value: var(--rounded-base);
24901
24133
  --segmented-control-border-width: 1px;
24902
24134
  --segmented-control-selected-color: var(--brand-secondary-3);
@@ -24915,14 +24147,14 @@ var segmentedControlStyles = import_react163.css`
24915
24147
  border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
24916
24148
  font-size: var(--fs-xs);
24917
24149
  `;
24918
- var segmentedControlVerticalStyles = import_react163.css`
24150
+ var segmentedControlVerticalStyles = import_react159.css`
24919
24151
  flex-direction: column;
24920
24152
  --segmented-control-first-border-radius: var(--segmented-control-rounded-value)
24921
24153
  var(--segmented-control-rounded-value) 0 0;
24922
24154
  --segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
24923
24155
  var(--segmented-control-rounded-value);
24924
24156
  `;
24925
- var segmentedControlItemStyles = import_react163.css`
24157
+ var segmentedControlItemStyles = import_react159.css`
24926
24158
  &:first-of-type label {
24927
24159
  border-radius: var(--segmented-control-first-border-radius);
24928
24160
  }
@@ -24930,10 +24162,10 @@ var segmentedControlItemStyles = import_react163.css`
24930
24162
  border-radius: var(--segmented-control-last-border-radius);
24931
24163
  }
24932
24164
  `;
24933
- var segmentedControlInputStyles = import_react163.css`
24165
+ var segmentedControlInputStyles = import_react159.css`
24934
24166
  ${accessibleHidden}
24935
24167
  `;
24936
- var segmentedControlLabelStyles = (checked, disabled2) => import_react163.css`
24168
+ var segmentedControlLabelStyles = (checked, disabled2) => import_react159.css`
24937
24169
  position: relative;
24938
24170
  display: flex;
24939
24171
  align-items: center;
@@ -25000,25 +24232,25 @@ var segmentedControlLabelStyles = (checked, disabled2) => import_react163.css`
25000
24232
  `}
25001
24233
  }
25002
24234
  `;
25003
- var segmentedControlLabelIconOnlyStyles = import_react163.css`
24235
+ var segmentedControlLabelIconOnlyStyles = import_react159.css`
25004
24236
  padding-inline: 0.5em;
25005
24237
  `;
25006
- var segmentedControlLabelCheckStyles = import_react163.css`
24238
+ var segmentedControlLabelCheckStyles = import_react159.css`
25007
24239
  opacity: 0.5;
25008
24240
  `;
25009
- var segmentedControlLabelContentStyles = import_react163.css`
24241
+ var segmentedControlLabelContentStyles = import_react159.css`
25010
24242
  display: flex;
25011
24243
  align-items: center;
25012
24244
  justify-content: center;
25013
24245
  gap: var(--spacing-sm);
25014
24246
  height: 100%;
25015
24247
  `;
25016
- var segmentedControlLabelTextStyles = import_react163.css`
24248
+ var segmentedControlLabelTextStyles = import_react159.css`
25017
24249
  white-space: nowrap;
25018
24250
  `;
25019
24251
 
25020
24252
  // src/components/SegmentedControl/SegmentedControl.tsx
25021
- var import_jsx_runtime139 = require("@emotion/react/jsx-runtime");
24253
+ var import_jsx_runtime137 = require("@emotion/react/jsx-runtime");
25022
24254
  var SegmentedControl = ({
25023
24255
  name,
25024
24256
  options,
@@ -25033,10 +24265,10 @@ var SegmentedControl = ({
25033
24265
  currentBackgroundColor = "white",
25034
24266
  ...props
25035
24267
  }) => {
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)(
24268
+ const wrapperRef = (0, import_react161.useRef)(null);
24269
+ const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0, import_react161.useState)(false);
24270
+ const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0, import_react161.useState)(false);
24271
+ const onOptionChange = (0, import_react161.useCallback)(
25040
24272
  (event) => {
25041
24273
  if (event.target.checked) {
25042
24274
  onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
@@ -25044,19 +24276,19 @@ var SegmentedControl = ({
25044
24276
  },
25045
24277
  [options, onChange]
25046
24278
  );
25047
- const sizeStyles = (0, import_react165.useMemo)(() => {
24279
+ const sizeStyles = (0, import_react161.useMemo)(() => {
25048
24280
  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)" })
24281
+ sm: (0, import_react160.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
24282
+ md: (0, import_react160.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
24283
+ lg: (0, import_react160.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
24284
+ xl: (0, import_react160.css)({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
25053
24285
  };
25054
24286
  return map[size];
25055
24287
  }, [size]);
25056
- const isIconOnly = (0, import_react165.useMemo)(() => {
24288
+ const isIconOnly = (0, import_react161.useMemo)(() => {
25057
24289
  return options.every((option) => option && option.icon && !option.label);
25058
24290
  }, [options]);
25059
- (0, import_react165.useEffect)(() => {
24291
+ (0, import_react161.useEffect)(() => {
25060
24292
  const wrapperElement = wrapperRef.current;
25061
24293
  const onScroll = () => {
25062
24294
  if (!wrapperElement) {
@@ -25077,8 +24309,8 @@ var SegmentedControl = ({
25077
24309
  wrapperElement == null ? void 0 : wrapperElement.removeEventListener("scroll", onScroll);
25078
24310
  };
25079
24311
  }, []);
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)(
24312
+ return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
24313
+ /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
25082
24314
  "div",
25083
24315
  {
25084
24316
  css: [
@@ -25094,12 +24326,12 @@ var SegmentedControl = ({
25094
24326
  }
25095
24327
  const text = option.label ? option.label : option.icon ? null : String(option.value);
25096
24328
  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)(
24329
+ return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
25098
24330
  "div",
25099
24331
  {
25100
24332
  css: segmentedControlItemStyles,
25101
24333
  "data-testid": option["data-testid"] ? option["data-testid"] : "container-segmented-control",
25102
- children: /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
24334
+ children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
25103
24335
  "label",
25104
24336
  {
25105
24337
  css: [
@@ -25108,7 +24340,7 @@ var SegmentedControl = ({
25108
24340
  isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
25109
24341
  ],
25110
24342
  children: [
25111
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
24343
+ /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
25112
24344
  "input",
25113
24345
  {
25114
24346
  css: segmentedControlInputStyles,
@@ -25120,10 +24352,10 @@ var SegmentedControl = ({
25120
24352
  disabled: isDisabled
25121
24353
  }
25122
24354
  ),
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 })
24355
+ option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_CgCheck6.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
24356
+ /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
24357
+ !option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
24358
+ !text || hideOptionText ? null : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
25127
24359
  ] })
25128
24360
  ]
25129
24361
  }
@@ -25133,7 +24365,7 @@ var SegmentedControl = ({
25133
24365
  })
25134
24366
  }
25135
24367
  ) }),
25136
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
24368
+ /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
25137
24369
  "div",
25138
24370
  {
25139
24371
  css: [
@@ -25151,18 +24383,18 @@ init_emotion_jsx_shim();
25151
24383
 
25152
24384
  // src/components/Skeleton/Skeleton.styles.ts
25153
24385
  init_emotion_jsx_shim();
25154
- var import_react166 = require("@emotion/react");
25155
- var lightFadingOut = import_react166.keyframes`
24386
+ var import_react162 = require("@emotion/react");
24387
+ var lightFadingOut = import_react162.keyframes`
25156
24388
  from { opacity: 0.1; }
25157
24389
  to { opacity: 0.025; }
25158
24390
  `;
25159
- var skeletonStyles = import_react166.css`
24391
+ var skeletonStyles = import_react162.css`
25160
24392
  animation: ${lightFadingOut} 1s ease-out infinite alternate;
25161
24393
  background-color: var(--gray-900);
25162
24394
  `;
25163
24395
 
25164
24396
  // src/components/Skeleton/Skeleton.tsx
25165
- var import_jsx_runtime140 = require("@emotion/react/jsx-runtime");
24397
+ var import_jsx_runtime138 = require("@emotion/react/jsx-runtime");
25166
24398
  var Skeleton = ({
25167
24399
  width = "100%",
25168
24400
  height = "1.25rem",
@@ -25170,7 +24402,7 @@ var Skeleton = ({
25170
24402
  circle = false,
25171
24403
  children,
25172
24404
  ...otherProps
25173
- }) => /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
24405
+ }) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
25174
24406
  "div",
25175
24407
  {
25176
24408
  css: [
@@ -25191,12 +24423,12 @@ var Skeleton = ({
25191
24423
 
25192
24424
  // src/components/Switch/Switch.tsx
25193
24425
  init_emotion_jsx_shim();
25194
- var import_react168 = require("react");
24426
+ var import_react164 = require("react");
25195
24427
 
25196
24428
  // src/components/Switch/Switch.styles.ts
25197
24429
  init_emotion_jsx_shim();
25198
- var import_react167 = require("@emotion/react");
25199
- var SwitchInputContainer = import_react167.css`
24430
+ var import_react163 = require("@emotion/react");
24431
+ var SwitchInputContainer = import_react163.css`
25200
24432
  cursor: pointer;
25201
24433
  display: inline-block;
25202
24434
  position: relative;
@@ -25205,7 +24437,7 @@ var SwitchInputContainer = import_react167.css`
25205
24437
  vertical-align: middle;
25206
24438
  user-select: none;
25207
24439
  `;
25208
- var SwitchInput = (size) => import_react167.css`
24440
+ var SwitchInput = (size) => import_react163.css`
25209
24441
  appearance: none;
25210
24442
  border-radius: var(--rounded-full);
25211
24443
  background-color: var(--white);
@@ -25216,7 +24448,8 @@ var SwitchInput = (size) => import_react167.css`
25216
24448
  width: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
25217
24449
  height: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
25218
24450
  margin-top: ${size === "sm" ? "var(--spacing-xs)" : "none"};
25219
- transition: transform var(--duration-fast) var(--timing-ease-out),
24451
+ transition:
24452
+ transform var(--duration-fast) var(--timing-ease-out),
25220
24453
  background-color var(--duration-fast) var(--timing-ease-out),
25221
24454
  background-image var(--duration-fast) var(--timing-ease-out);
25222
24455
  z-index: var(--z-10);
@@ -25244,7 +24477,7 @@ var SwitchInput = (size) => import_react167.css`
25244
24477
  cursor: not-allowed;
25245
24478
  }
25246
24479
  `;
25247
- var SwitchInputDisabled = import_react167.css`
24480
+ var SwitchInputDisabled = import_react163.css`
25248
24481
  opacity: var(--opacity-50);
25249
24482
  cursor: not-allowed;
25250
24483
 
@@ -25252,7 +24485,7 @@ var SwitchInputDisabled = import_react167.css`
25252
24485
  cursor: not-allowed;
25253
24486
  }
25254
24487
  `;
25255
- var SwitchInputLabel = (size) => import_react167.css`
24488
+ var SwitchInputLabel = (size) => import_react163.css`
25256
24489
  align-items: center;
25257
24490
  color: var(--typography-base);
25258
24491
  display: inline-flex;
@@ -25274,32 +24507,32 @@ var SwitchInputLabel = (size) => import_react167.css`
25274
24507
  top: 0;
25275
24508
  }
25276
24509
  `;
25277
- var SwitchText = (size) => import_react167.css`
24510
+ var SwitchText = (size) => import_react163.css`
25278
24511
  color: var(--gray-500);
25279
24512
  font-size: var(--fs-sm);
25280
24513
  padding-inline: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"} 0;
25281
24514
  `;
25282
24515
 
25283
24516
  // src/components/Switch/Switch.tsx
25284
- var import_jsx_runtime141 = require("@emotion/react/jsx-runtime");
25285
- var Switch = (0, import_react168.forwardRef)(
24517
+ var import_jsx_runtime139 = require("@emotion/react/jsx-runtime");
24518
+ var Switch = (0, import_react164.forwardRef)(
25286
24519
  ({ label, infoText, toggleText, children, switchSize = "base", ...inputProps }, ref) => {
25287
24520
  let additionalText = infoText;
25288
24521
  if (infoText && toggleText) {
25289
24522
  additionalText = inputProps.checked ? toggleText : infoText;
25290
24523
  }
25291
- return /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_jsx_runtime141.Fragment, { children: [
25292
- /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
24524
+ return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(import_jsx_runtime139.Fragment, { children: [
24525
+ /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
25293
24526
  "label",
25294
24527
  {
25295
24528
  css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0],
25296
24529
  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 })
24530
+ /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("input", { type: "checkbox", css: SwitchInput(switchSize), ...inputProps, ref }),
24531
+ /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("span", { css: SwitchInputLabel(switchSize), children: label })
25299
24532
  ]
25300
24533
  }
25301
24534
  ),
25302
- additionalText ? /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("p", { css: SwitchText(switchSize), children: additionalText }) : null,
24535
+ additionalText ? /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("p", { css: SwitchText(switchSize), children: additionalText }) : null,
25303
24536
  children
25304
24537
  ] });
25305
24538
  }
@@ -25311,8 +24544,8 @@ var React24 = __toESM(require("react"));
25311
24544
 
25312
24545
  // src/components/Table/Table.styles.ts
25313
24546
  init_emotion_jsx_shim();
25314
- var import_react169 = require("@emotion/react");
25315
- var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_react169.css`
24547
+ var import_react165 = require("@emotion/react");
24548
+ var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_react165.css`
25316
24549
  border-bottom: 1px solid var(--gray-400);
25317
24550
  border-collapse: collapse;
25318
24551
  min-width: 100%;
@@ -25332,66 +24565,66 @@ var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_
25332
24565
  background-color: var(--gray-50);
25333
24566
  }
25334
24567
  `;
25335
- var tableHead = import_react169.css`
24568
+ var tableHead = import_react165.css`
25336
24569
  color: var(--typography-base);
25337
24570
  text-align: left;
25338
24571
  `;
25339
- var tableRow = import_react169.css`
24572
+ var tableRow = import_react165.css`
25340
24573
  border-bottom: 1px solid var(--gray-100);
25341
24574
  `;
25342
- var tableCellHead = import_react169.css`
24575
+ var tableCellHead = import_react165.css`
25343
24576
  font-size: var(--fs-sm);
25344
24577
  text-transform: uppercase;
25345
24578
  font-weight: var(--fw-bold);
25346
24579
  `;
25347
24580
 
25348
24581
  // src/components/Table/Table.tsx
25349
- var import_jsx_runtime142 = require("@emotion/react/jsx-runtime");
24582
+ var import_jsx_runtime140 = require("@emotion/react/jsx-runtime");
25350
24583
  var Table = React24.forwardRef(
25351
24584
  ({ children, cellPadding, ...otherProps }, ref) => {
25352
- return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
24585
+ return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
25353
24586
  }
25354
24587
  );
25355
24588
  var TableHead = React24.forwardRef(
25356
24589
  ({ children, ...otherProps }, ref) => {
25357
- return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
24590
+ return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
25358
24591
  }
25359
24592
  );
25360
24593
  var TableBody = React24.forwardRef(
25361
24594
  ({ children, ...otherProps }, ref) => {
25362
- return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("tbody", { ref, ...otherProps, children });
24595
+ return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("tbody", { ref, ...otherProps, children });
25363
24596
  }
25364
24597
  );
25365
24598
  var TableFoot = React24.forwardRef(
25366
24599
  ({ children, ...otherProps }, ref) => {
25367
- return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("tfoot", { ref, ...otherProps, children });
24600
+ return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("tfoot", { ref, ...otherProps, children });
25368
24601
  }
25369
24602
  );
25370
24603
  var TableRow = React24.forwardRef(
25371
24604
  ({ children, ...otherProps }, ref) => {
25372
- return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
24605
+ return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
25373
24606
  }
25374
24607
  );
25375
24608
  var TableCellHead = React24.forwardRef(
25376
24609
  ({ children, ...otherProps }, ref) => {
25377
- return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
24610
+ return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
25378
24611
  }
25379
24612
  );
25380
24613
  var TableCellData = React24.forwardRef(
25381
24614
  ({ children, ...otherProps }, ref) => {
25382
- return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("td", { ref, ...otherProps, children });
24615
+ return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("td", { ref, ...otherProps, children });
25383
24616
  }
25384
24617
  );
25385
24618
 
25386
24619
  // src/components/Tabs/Tabs.tsx
25387
24620
  init_emotion_jsx_shim();
25388
- var import_react171 = require("@ariakit/react");
25389
- var import_react172 = require("react");
24621
+ var import_react167 = require("@ariakit/react");
24622
+ var import_react168 = require("react");
25390
24623
 
25391
24624
  // src/components/Tabs/Tabs.styles.ts
25392
24625
  init_emotion_jsx_shim();
25393
- var import_react170 = require("@emotion/react");
25394
- var tabButtonStyles = import_react170.css`
24626
+ var import_react166 = require("@emotion/react");
24627
+ var tabButtonStyles = import_react166.css`
25395
24628
  align-items: center;
25396
24629
  border: 0;
25397
24630
  height: 2.5rem;
@@ -25408,16 +24641,16 @@ var tabButtonStyles = import_react170.css`
25408
24641
  box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
25409
24642
  }
25410
24643
  `;
25411
- var tabButtonGroupStyles = import_react170.css`
24644
+ var tabButtonGroupStyles = import_react166.css`
25412
24645
  display: flex;
25413
24646
  gap: var(--spacing-base);
25414
24647
  border-bottom: 1px solid var(--gray-300);
25415
24648
  `;
25416
24649
 
25417
24650
  // src/components/Tabs/Tabs.tsx
25418
- var import_jsx_runtime143 = require("@emotion/react/jsx-runtime");
24651
+ var import_jsx_runtime141 = require("@emotion/react/jsx-runtime");
25419
24652
  var useCurrentTab = () => {
25420
- const context = (0, import_react171.useTabStore)();
24653
+ const context = (0, import_react167.useTabStore)();
25421
24654
  if (!context) {
25422
24655
  throw new Error("This component can only be used inside <Tabs>");
25423
24656
  }
@@ -25431,12 +24664,12 @@ var Tabs = ({
25431
24664
  manual,
25432
24665
  ...props
25433
24666
  }) => {
25434
- const selected = (0, import_react172.useMemo)(() => {
24667
+ const selected = (0, import_react168.useMemo)(() => {
25435
24668
  if (selectedId) return selectedId;
25436
24669
  return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
25437
24670
  }, [selectedId, useHashForState]);
25438
- const tab = (0, import_react171.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
25439
- const onTabSelect = (0, import_react172.useCallback)(
24671
+ const tab = (0, import_react167.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
24672
+ const onTabSelect = (0, import_react168.useCallback)(
25440
24673
  (value) => {
25441
24674
  const selectedValueWithoutNull = value != null ? value : void 0;
25442
24675
  onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -25447,28 +24680,28 @@ var Tabs = ({
25447
24680
  },
25448
24681
  [onSelectedIdChange, useHashForState]
25449
24682
  );
25450
- (0, import_react172.useEffect)(() => {
24683
+ (0, import_react168.useEffect)(() => {
25451
24684
  if (selected && selected !== tab.getState().activeId) {
25452
24685
  tab.setSelectedId(selected);
25453
24686
  }
25454
24687
  }, [selected, tab]);
25455
- return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react171.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
24688
+ return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react167.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
25456
24689
  };
25457
24690
  var TabButtonGroup = ({ children, ...props }) => {
25458
- return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react171.TabList, { ...props, css: tabButtonGroupStyles, children });
24691
+ return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react167.TabList, { ...props, css: tabButtonGroupStyles, children });
25459
24692
  };
25460
24693
  var TabButton = ({
25461
24694
  children,
25462
24695
  id,
25463
24696
  ...props
25464
24697
  }) => {
25465
- return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react171.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
24698
+ return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react167.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
25466
24699
  };
25467
24700
  var TabContent = ({
25468
24701
  children,
25469
24702
  ...props
25470
24703
  }) => {
25471
- return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react171.TabPanel, { ...props, children });
24704
+ return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react167.TabPanel, { ...props, children });
25472
24705
  };
25473
24706
 
25474
24707
  // src/components/Validation/StatusBullet.tsx
@@ -25476,8 +24709,8 @@ init_emotion_jsx_shim();
25476
24709
 
25477
24710
  // src/components/Validation/StatusBullet.styles.ts
25478
24711
  init_emotion_jsx_shim();
25479
- var import_react173 = require("@emotion/react");
25480
- var StatusBulletContainer = import_react173.css`
24712
+ var import_react169 = require("@emotion/react");
24713
+ var StatusBulletContainer = import_react169.css`
25481
24714
  align-items: center;
25482
24715
  align-self: center;
25483
24716
  color: var(--gray-500);
@@ -25494,33 +24727,33 @@ var StatusBulletContainer = import_react173.css`
25494
24727
  display: block;
25495
24728
  }
25496
24729
  `;
25497
- var StatusBulletBase = import_react173.css`
24730
+ var StatusBulletBase = import_react169.css`
25498
24731
  font-size: var(--fs-sm);
25499
24732
  &:before {
25500
24733
  width: var(--fs-xs);
25501
24734
  height: var(--fs-xs);
25502
24735
  }
25503
24736
  `;
25504
- var StatusBulletSmall = import_react173.css`
24737
+ var StatusBulletSmall = import_react169.css`
25505
24738
  font-size: var(--fs-xs);
25506
24739
  &:before {
25507
24740
  width: var(--fs-xxs);
25508
24741
  height: var(--fs-xxs);
25509
24742
  }
25510
24743
  `;
25511
- var StatusDraft = import_react173.css`
24744
+ var StatusDraft = import_react169.css`
25512
24745
  &:before {
25513
24746
  background: var(--white);
25514
24747
  box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
25515
24748
  }
25516
24749
  `;
25517
- var StatusModified = import_react173.css`
24750
+ var StatusModified = import_react169.css`
25518
24751
  &:before {
25519
24752
  background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
25520
24753
  box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
25521
24754
  }
25522
24755
  `;
25523
- var StatusError = import_react173.css`
24756
+ var StatusError = import_react169.css`
25524
24757
  color: var(--error);
25525
24758
  &:before {
25526
24759
  /* TODO: replace this with an svg icon */
@@ -25533,29 +24766,29 @@ var StatusError = import_react173.css`
25533
24766
  );
25534
24767
  }
25535
24768
  `;
25536
- var StatusPublished = import_react173.css`
24769
+ var StatusPublished = import_react169.css`
25537
24770
  &:before {
25538
24771
  background: var(--accent-dark);
25539
24772
  }
25540
24773
  `;
25541
- var StatusOrphan = import_react173.css`
24774
+ var StatusOrphan = import_react169.css`
25542
24775
  &:before {
25543
24776
  background: var(--brand-secondary-5);
25544
24777
  }
25545
24778
  `;
25546
- var StatusUnknown = import_react173.css`
24779
+ var StatusUnknown = import_react169.css`
25547
24780
  &:before {
25548
24781
  background: var(--gray-800);
25549
24782
  }
25550
24783
  `;
25551
- var StatusDeleted = import_react173.css`
24784
+ var StatusDeleted = import_react169.css`
25552
24785
  &:before {
25553
24786
  background: var(--error);
25554
24787
  }
25555
24788
  `;
25556
24789
 
25557
24790
  // src/components/Validation/StatusBullet.tsx
25558
- var import_jsx_runtime144 = require("@emotion/react/jsx-runtime");
24791
+ var import_jsx_runtime142 = require("@emotion/react/jsx-runtime");
25559
24792
  var StatusBullet = ({
25560
24793
  status,
25561
24794
  hideText = false,
@@ -25575,7 +24808,7 @@ var StatusBullet = ({
25575
24808
  Deleted: StatusDeleted
25576
24809
  };
25577
24810
  const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
25578
- return /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
24811
+ return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
25579
24812
  "span",
25580
24813
  {
25581
24814
  role: "status",
@@ -25835,12 +25068,16 @@ var StatusBullet = ({
25835
25068
  supports,
25836
25069
  textInput,
25837
25070
  toast,
25071
+ uniformAiIcon,
25838
25072
  uniformComponentIcon,
25839
25073
  uniformComponentPatternIcon,
25840
25074
  uniformCompositionPatternIcon,
25075
+ uniformConditionalValuesIcon,
25841
25076
  uniformContentTypeIcon,
25842
25077
  uniformEntryIcon,
25843
25078
  uniformEntryPatternIcon,
25079
+ uniformLocaleDisabledIcon,
25080
+ uniformLocaleIcon,
25844
25081
  useBreakpoint,
25845
25082
  useCloseCurrentDrawer,
25846
25083
  useCurrentDrawer,
@@ -25851,7 +25088,6 @@ var StatusBullet = ({
25851
25088
  useOutsideClick,
25852
25089
  useParameterShell,
25853
25090
  usePopoverComponentContext,
25854
- useRichTextToolbarState,
25855
25091
  useShortcut,
25856
25092
  utilityColors,
25857
25093
  warningIcon,