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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/esm/index.js CHANGED
@@ -12449,7 +12449,6 @@ var Menu = React7.forwardRef(function Menu2({
12449
12449
  menuItemsContainerCssClasses,
12450
12450
  testId,
12451
12451
  maxMenuHeight,
12452
- portalElement,
12453
12452
  ...props
12454
12453
  }, ref) {
12455
12454
  const placementOverride = legacyPlacements.includes(placement) ? void 0 : placement;
@@ -12460,7 +12459,6 @@ var Menu = React7.forwardRef(function Menu2({
12460
12459
  BaseMenu,
12461
12460
  {
12462
12461
  portal: !withoutPortal,
12463
- portalElement,
12464
12462
  unmountOnHide: true,
12465
12463
  gutter: 0,
12466
12464
  shift: menu.parent ? -4 : 0,
@@ -20247,7 +20245,7 @@ var ParameterNameAndPublicIdInput = ({
20247
20245
  };
20248
20246
 
20249
20247
  // src/components/ParameterInputs/ParameterRichText.tsx
20250
- import { css as css100 } from "@emotion/react";
20248
+ import { css as css98 } from "@emotion/react";
20251
20249
  import { ListItemNode, ListNode as ListNode2 } from "@lexical/list";
20252
20250
  import {
20253
20251
  CODE,
@@ -20259,16 +20257,14 @@ import {
20259
20257
  UNORDERED_LIST
20260
20258
  } from "@lexical/markdown";
20261
20259
  import { LexicalComposer } from "@lexical/react/LexicalComposer";
20262
- import { useLexicalComposerContext as useLexicalComposerContext7 } from "@lexical/react/LexicalComposerContext";
20260
+ import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
20263
20261
  import { ContentEditable } from "@lexical/react/LexicalContentEditable";
20264
20262
  import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
20265
20263
  import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
20266
20264
  import { ListPlugin } from "@lexical/react/LexicalListPlugin";
20267
20265
  import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
20268
20266
  import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
20269
- import { TablePlugin } from "@lexical/react/LexicalTablePlugin";
20270
20267
  import { HeadingNode, QuoteNode } from "@lexical/rich-text";
20271
- import { TableCellNode as TableCellNode2, TableNode, TableRowNode as TableRowNode2 } from "@lexical/table";
20272
20268
 
20273
20269
  // ../richtext/dist/index.mjs
20274
20270
  var richTextBuiltInElements = [
@@ -20316,10 +20312,6 @@ var richTextBuiltInElements = [
20316
20312
  label: "Code Block",
20317
20313
  type: "code"
20318
20314
  },
20319
- {
20320
- label: "Table",
20321
- type: "table"
20322
- },
20323
20315
  {
20324
20316
  label: "Dynamic Token",
20325
20317
  type: "variable"
@@ -20367,7 +20359,7 @@ var getLabelForElement = (type) => {
20367
20359
  // src/components/ParameterInputs/ParameterRichText.tsx
20368
20360
  import { deepEqual as deepEqual2 } from "fast-equals";
20369
20361
  import { ParagraphNode as ParagraphNode2 } from "lexical";
20370
- import { useEffect as useEffect23, useState as useState20 } from "react";
20362
+ import { useEffect as useEffect21, useRef as useRef12 } from "react";
20371
20363
 
20372
20364
  // src/components/ParameterInputs/rich-text/CustomCodeNode.ts
20373
20365
  import { CodeNode } from "@lexical/code";
@@ -20582,46 +20574,6 @@ var codeElement = css95`
20582
20574
  margin-bottom: 0;
20583
20575
  }
20584
20576
  `;
20585
- var tableElement = css95`
20586
- border-collapse: collapse;
20587
- border-spacing: 0;
20588
- border-color: var(--gray-300);
20589
- border-width: 1px;
20590
- border-style: solid;
20591
- margin-bottom: var(--spacing-base);
20592
- margin-top: 0;
20593
-
20594
- &:last-child {
20595
- margin-bottom: 0;
20596
- }
20597
- `;
20598
- var tableCellElement = css95`
20599
- background-color: var(--white);
20600
- border-color: var(--gray-300);
20601
- border-style: solid;
20602
- border-width: 1px;
20603
- box-sizing: unset;
20604
- min-width: 2rem;
20605
- outline: none;
20606
- padding: var(--spacing-sm);
20607
- text-align: start;
20608
- vertical-align: top;
20609
- width: 7rem;
20610
- `;
20611
- var tableHeaderElement = css95`
20612
- background-color: var(--gray-100);
20613
- border-color: var(--gray-300);
20614
- border-style: solid;
20615
- border-width: 1px;
20616
- box-sizing: unset;
20617
- font-weight: normal;
20618
- min-width: 2rem;
20619
- outline: none;
20620
- padding: var(--spacing-sm);
20621
- text-align: start;
20622
- vertical-align: top;
20623
- width: 7rem;
20624
- `;
20625
20577
 
20626
20578
  // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
20627
20579
  import { css as css96 } from "@emotion/react";
@@ -20977,11 +20929,7 @@ var linkPopoverAnchor = css96`
20977
20929
  ${link}
20978
20930
  ${linkColorDefault}
20979
20931
  `;
20980
- function LinkNodePlugin({
20981
- onConnectLink,
20982
- getBoundPath,
20983
- positioningAnchorEl
20984
- }) {
20932
+ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
20985
20933
  const parsePath = getBoundPath != null ? getBoundPath : function(path) {
20986
20934
  return path;
20987
20935
  };
@@ -21085,11 +21033,9 @@ function LinkNodePlugin({
21085
21033
  setLinkPopoverState(void 0);
21086
21034
  return;
21087
21035
  }
21088
- const elementRect = element.getBoundingClientRect();
21089
- const positioningAnchorRect = positioningAnchorEl.getBoundingClientRect();
21090
21036
  const { x, y } = {
21091
- x: elementRect.left - positioningAnchorRect.left + LINK_POPOVER_OFFSET_X,
21092
- y: elementRect.top + elementRect.height - positioningAnchorRect.top + LINK_POPOVER_OFFSET_Y
21037
+ x: element.offsetLeft + LINK_POPOVER_OFFSET_X,
21038
+ y: element.offsetTop + element.clientHeight + LINK_POPOVER_OFFSET_Y
21093
21039
  };
21094
21040
  setLinkPopoverState({
21095
21041
  node: linkNode,
@@ -21098,7 +21044,7 @@ function LinkNodePlugin({
21098
21044
  y
21099
21045
  }
21100
21046
  });
21101
- }, [editor, positioningAnchorEl]);
21047
+ }, [editor]);
21102
21048
  useEffect18(() => {
21103
21049
  return editor.registerUpdateListener(({ editorState }) => {
21104
21050
  requestAnimationFrame(() => {
@@ -21238,7 +21184,6 @@ import {
21238
21184
  import { useLexicalComposerContext as useLexicalComposerContext4 } from "@lexical/react/LexicalComposerContext";
21239
21185
  import { $createHeadingNode, $createQuoteNode, $isHeadingNode } from "@lexical/rich-text";
21240
21186
  import { $setBlocksType } from "@lexical/selection";
21241
- import { $createTableNodeWithDimensions } from "@lexical/table";
21242
21187
  import { $findMatchingParent, $getNearestNodeOfType } from "@lexical/utils";
21243
21188
  import {
21244
21189
  $createParagraphNode,
@@ -21252,14 +21197,12 @@ import {
21252
21197
  import { useCallback as useCallback11, useEffect as useEffect20, useMemo as useMemo6, useState as useState17 } from "react";
21253
21198
  import { Fragment as Fragment19, jsx as jsx130, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
21254
21199
  var toolbar = css97`
21255
- ${scrollbarStyles}
21256
21200
  background: var(--gray-50);
21257
21201
  border-radius: var(--rounded-base);
21258
21202
  display: flex;
21259
21203
  /* We add 1px because we use a 1px wide separator */
21260
21204
  gap: calc(var(--spacing-sm) + 1px);
21261
21205
  margin: calc(var(--spacing-sm) + var(--spacing-xs)) 0;
21262
- overflow: auto;
21263
21206
  padding: var(--spacing-sm);
21264
21207
  position: sticky;
21265
21208
  top: calc(var(--spacing-sm) * -2);
@@ -21267,7 +21210,6 @@ var toolbar = css97`
21267
21210
  `;
21268
21211
  var toolbarGroup = css97`
21269
21212
  display: flex;
21270
- flex-shrink: 0;
21271
21213
  gap: var(--spacing-xs);
21272
21214
  position: relative;
21273
21215
 
@@ -21290,7 +21232,6 @@ var richTextToolbarButton = css97`
21290
21232
  box-shadow: none;
21291
21233
  color: var(--gray-900);
21292
21234
  display: flex;
21293
- flex-shrink: 0;
21294
21235
  height: 32px;
21295
21236
  justify-content: center;
21296
21237
  min-width: 32px;
@@ -21299,10 +21240,6 @@ var richTextToolbarButton = css97`
21299
21240
  var richTextToolbarButtonActive = css97`
21300
21241
  background: var(--gray-200);
21301
21242
  `;
21302
- var textStyleButton = css97`
21303
- justify-content: space-between;
21304
- min-width: 7rem;
21305
- `;
21306
21243
  var toolbarIcon = css97`
21307
21244
  color: inherit;
21308
21245
  `;
@@ -21323,7 +21260,7 @@ var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
21323
21260
  ]);
21324
21261
  var HEADING_ELEMENTS = ["h1", "h2", "h3", "h4", "h5", "h6"];
21325
21262
  var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
21326
- var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
21263
+ var RichTextToolbar = ({ config, customControls }) => {
21327
21264
  const [editor] = useLexicalComposerContext4();
21328
21265
  const {
21329
21266
  activeElement,
@@ -21339,39 +21276,26 @@ var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
21339
21276
  visibleLists,
21340
21277
  codeElementVisible,
21341
21278
  quoteElementVisible,
21342
- visibleElementsWithIcons,
21343
- visibleInsertElementsWithIcons,
21344
- tableElementVisible
21279
+ visibleElementsWithIcons
21345
21280
  } = useRichTextToolbarState({ config });
21346
21281
  const onSelectElement = (type) => {
21347
21282
  if (activeElement === type) {
21348
21283
  return;
21349
21284
  }
21350
- editor.focus(() => {
21351
- editor.update(() => {
21352
- const selection = $getSelection3();
21353
- if (HEADING_ELEMENTS.includes(type)) {
21354
- $setBlocksType(selection, () => $createHeadingNode(type));
21355
- } else if (type === "paragraph") {
21356
- $setBlocksType(selection, () => $createParagraphNode());
21357
- } else if (type === "quote") {
21358
- $setBlocksType(selection, () => $createQuoteNode());
21359
- } else if (type === "code") {
21360
- $setBlocksType(selection, () => $createCodeNode());
21361
- } else if (type === "table" && onInsertTable) {
21362
- onInsertTable().then((dimensions) => {
21363
- if (!dimensions) {
21364
- return;
21365
- }
21366
- const { rows, columns } = dimensions;
21367
- editor.focus(() => {
21368
- editor.update(() => {
21369
- $setBlocksType(selection, () => $createTableNodeWithDimensions(rows, columns, false));
21370
- });
21371
- });
21372
- });
21373
- }
21374
- });
21285
+ editor.update(() => {
21286
+ const selection = $getSelection3();
21287
+ if (!$isRangeSelection3(selection)) {
21288
+ return;
21289
+ }
21290
+ if (HEADING_ELEMENTS.includes(type)) {
21291
+ $setBlocksType(selection, () => $createHeadingNode(type));
21292
+ } else if (type === "paragraph") {
21293
+ $setBlocksType(selection, () => $createParagraphNode());
21294
+ } else if (type === "quote") {
21295
+ $setBlocksType(selection, () => $createQuoteNode());
21296
+ } else if (type === "code") {
21297
+ $setBlocksType(selection, () => $createCodeNode());
21298
+ }
21375
21299
  });
21376
21300
  };
21377
21301
  const updateToolbar = useCallback11(() => {
@@ -21436,7 +21360,8 @@ var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
21436
21360
  /* @__PURE__ */ jsxs86(
21437
21361
  Menu,
21438
21362
  {
21439
- menuTrigger: /* @__PURE__ */ jsxs86("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", children: [
21363
+ menuLabel: "Elements",
21364
+ menuTrigger: /* @__PURE__ */ jsxs86("button", { css: richTextToolbarButton, title: "Text styles", children: [
21440
21365
  visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
21441
21366
  " ",
21442
21367
  /* @__PURE__ */ jsx130(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
@@ -21496,7 +21421,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
21496
21421
  }
21497
21422
  ) : null
21498
21423
  ] }) : null,
21499
- visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */ jsxs86("div", { css: toolbarGroup, children: [
21424
+ visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ jsxs86("div", { css: toolbarGroup, children: [
21500
21425
  linkElementVisible ? /* @__PURE__ */ jsx130(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx130(
21501
21426
  "button",
21502
21427
  {
@@ -21535,50 +21460,28 @@ var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
21535
21460
  }
21536
21461
  ) }) : null
21537
21462
  ] }) : null,
21538
- customControls ? customControls : null
21463
+ quoteElementVisible ? /* @__PURE__ */ jsx130(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ jsx130(
21464
+ "button",
21465
+ {
21466
+ onClick: () => {
21467
+ activeElement === "quote" ? onSelectElement("paragraph") : onSelectElement("quote");
21468
+ },
21469
+ css: [richTextToolbarButton, activeElement === "quote" ? richTextToolbarButtonActive : null],
21470
+ children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "quote" })
21471
+ }
21472
+ ) }) : null,
21473
+ codeElementVisible ? /* @__PURE__ */ jsx130(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ jsx130(
21474
+ "button",
21475
+ {
21476
+ onClick: () => {
21477
+ activeElement === "code" ? onSelectElement("paragraph") : onSelectElement("code");
21478
+ },
21479
+ css: [richTextToolbarButton, activeElement === "code" ? richTextToolbarButtonActive : null],
21480
+ children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "code-slash" })
21481
+ }
21482
+ ) }) : null
21539
21483
  ] }) : null,
21540
- visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ jsx130("div", { css: toolbarGroup, children: /* @__PURE__ */ jsxs86(
21541
- Menu,
21542
- {
21543
- menuTrigger: /* @__PURE__ */ jsxs86("button", { css: richTextToolbarButton, title: "Insert block element", children: [
21544
- "Insert",
21545
- /* @__PURE__ */ jsx130(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
21546
- ] }),
21547
- placement: "bottom-start",
21548
- children: [
21549
- quoteElementVisible ? /* @__PURE__ */ jsx130(
21550
- MenuItem,
21551
- {
21552
- onClick: () => {
21553
- onSelectElement("quote");
21554
- },
21555
- icon: /* @__PURE__ */ jsx130(Icon, { icon: "quote", iconColor: "currentColor" }),
21556
- children: "Quote"
21557
- }
21558
- ) : null,
21559
- codeElementVisible ? /* @__PURE__ */ jsx130(
21560
- MenuItem,
21561
- {
21562
- onClick: () => {
21563
- onSelectElement("code");
21564
- },
21565
- icon: /* @__PURE__ */ jsx130(Icon, { icon: "code-slash", iconColor: "currentColor" }),
21566
- children: "Code"
21567
- }
21568
- ) : null,
21569
- tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ jsx130(
21570
- MenuItem,
21571
- {
21572
- onClick: () => {
21573
- onSelectElement("table");
21574
- },
21575
- icon: /* @__PURE__ */ jsx130(Icon, { icon: "view-grid", iconColor: "currentColor" }),
21576
- children: "Table"
21577
- }
21578
- ) : null
21579
- ]
21580
- }
21581
- ) }) : null
21484
+ customControls ? /* @__PURE__ */ jsx130("div", { css: toolbarGroup, children: customControls }) : null
21582
21485
  ] });
21583
21486
  };
21584
21487
  var RichTextToolbar_default = RichTextToolbar;
@@ -21655,9 +21558,6 @@ var useRichTextToolbarState = ({ config }) => {
21655
21558
  const codeElementVisible = useMemo6(() => {
21656
21559
  return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
21657
21560
  }, [activeElement, enabledBuiltInElements]);
21658
- const tableElementVisible = useMemo6(() => {
21659
- return enabledBuiltInElements.some((element) => element.type === "table") || activeElement === "table";
21660
- }, [activeElement, enabledBuiltInElements]);
21661
21561
  const visibleElementsWithIcons = useMemo6(() => {
21662
21562
  const visibleElements = /* @__PURE__ */ new Set();
21663
21563
  if (linkElementVisible) {
@@ -21668,21 +21568,14 @@ var useRichTextToolbarState = ({ config }) => {
21668
21568
  visibleElements.add(type);
21669
21569
  });
21670
21570
  }
21671
- return visibleElements;
21672
- }, [linkElementVisible, visibleLists]);
21673
- const visibleInsertElementsWithIcons = useMemo6(() => {
21674
- const visibleElements = /* @__PURE__ */ new Set();
21675
21571
  if (quoteElementVisible) {
21676
21572
  visibleElements.add("quote");
21677
21573
  }
21678
21574
  if (codeElementVisible) {
21679
21575
  visibleElements.add("code");
21680
21576
  }
21681
- if (tableElementVisible) {
21682
- visibleElements.add("table");
21683
- }
21684
21577
  return visibleElements;
21685
- }, [codeElementVisible, quoteElementVisible, tableElementVisible]);
21578
+ }, [codeElementVisible, linkElementVisible, quoteElementVisible, visibleLists]);
21686
21579
  return {
21687
21580
  activeFormats,
21688
21581
  setActiveFormats,
@@ -21697,718 +21590,12 @@ var useRichTextToolbarState = ({ config }) => {
21697
21590
  visibleLists,
21698
21591
  quoteElementVisible,
21699
21592
  codeElementVisible,
21700
- tableElementVisible,
21701
- visibleElementsWithIcons,
21702
- visibleInsertElementsWithIcons
21593
+ visibleElementsWithIcons
21703
21594
  };
21704
21595
  };
21705
21596
 
21706
- // src/components/ParameterInputs/rich-text/TableActionMenuPlugin.tsx
21707
- import { css as css98 } from "@emotion/react";
21708
- import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
21709
- import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
21710
- import {
21711
- $deleteTableColumn__EXPERIMENTAL,
21712
- $deleteTableRow__EXPERIMENTAL,
21713
- $getTableCellNodeFromLexicalNode,
21714
- $getTableColumnIndexFromTableCellNode,
21715
- $getTableNodeFromLexicalNodeOrThrow,
21716
- $getTableRowIndexFromTableCellNode,
21717
- $insertTableColumn__EXPERIMENTAL,
21718
- $insertTableRow__EXPERIMENTAL,
21719
- $isTableCellNode,
21720
- $isTableRowNode,
21721
- $isTableSelection,
21722
- getTableObserverFromTableElement,
21723
- TableCellHeaderStates,
21724
- TableCellNode
21725
- } from "@lexical/table";
21726
- import { $getRoot, $getSelection as $getSelection4, $isRangeSelection as $isRangeSelection4 } from "lexical";
21727
- import { forwardRef as forwardRef22, useCallback as useCallback12, useEffect as useEffect21, useLayoutEffect, useState as useState18 } from "react";
21728
- import { jsx as jsx131, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
21729
- function computeSelectionCount(selection) {
21730
- const selectionShape = selection.getShape();
21731
- return {
21732
- columns: selectionShape.toX - selectionShape.fromX + 1,
21733
- rows: selectionShape.toY - selectionShape.fromY + 1
21734
- };
21735
- }
21736
- var tableActionMenuTrigger = css98`
21737
- position: absolute;
21738
- transform: translate(calc(-100% - 1px), 1px);
21739
- `;
21740
- var TableActionMenuTrigger = forwardRef22((props, ref) => {
21741
- const { tableCellEl, positioningAnchorEl, ...rest } = props;
21742
- const [coordinates, setCoordinates] = useState18({ x: 0, y: 0 });
21743
- useLayoutEffect(() => {
21744
- const rect = tableCellEl.getBoundingClientRect();
21745
- const parentRect = positioningAnchorEl.getBoundingClientRect();
21746
- const relativeX = rect.right - parentRect.left;
21747
- const relativeY = rect.top - parentRect.top;
21748
- setCoordinates({ x: relativeX, y: relativeY });
21749
- }, [tableCellEl, positioningAnchorEl]);
21750
- return /* @__PURE__ */ jsx131(
21751
- IconButton,
21752
- {
21753
- ref,
21754
- css: [
21755
- tableActionMenuTrigger,
21756
- {
21757
- top: coordinates.y,
21758
- left: coordinates.x
21759
- }
21760
- ],
21761
- size: "xs",
21762
- buttonType: "unimportant",
21763
- ...rest,
21764
- children: /* @__PURE__ */ jsx131(Icon, { icon: "chevron-down", size: "1rem", iconColor: "currentColor" })
21765
- }
21766
- );
21767
- });
21768
- TableActionMenuTrigger.displayName = "TableActionMenuTrigger";
21769
- function TableActionMenu({
21770
- tableCellNode: _tableCellNode,
21771
- menuPortalEl,
21772
- tableCellEl,
21773
- positioningAnchorEl
21774
- }) {
21775
- const [editor] = useLexicalComposerContext5();
21776
- const [tableCellNode, updateTableCellNode] = useState18(_tableCellNode);
21777
- const [selectionCounts, updateSelectionCounts] = useState18({
21778
- columns: 1,
21779
- rows: 1
21780
- });
21781
- const [menuTriggerKey, setMenuTriggerKey] = useState18(0);
21782
- const incrementMenuTriggerKey = () => {
21783
- setMenuTriggerKey((key) => key += 1);
21784
- };
21785
- useEffect21(() => {
21786
- return editor.registerMutationListener(
21787
- TableCellNode,
21788
- (nodeMutations) => {
21789
- const nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === "updated";
21790
- if (nodeUpdated) {
21791
- editor.getEditorState().read(() => {
21792
- updateTableCellNode(tableCellNode.getLatest());
21793
- });
21794
- }
21795
- },
21796
- { skipInitialization: true }
21797
- );
21798
- }, [editor, tableCellNode]);
21799
- useEffect21(() => {
21800
- editor.getEditorState().read(() => {
21801
- const selection = $getSelection4();
21802
- if ($isTableSelection(selection)) {
21803
- updateSelectionCounts(computeSelectionCount(selection));
21804
- }
21805
- });
21806
- }, [editor]);
21807
- const clearTableSelection = useCallback12(() => {
21808
- editor.update(() => {
21809
- if (tableCellNode.isAttached()) {
21810
- const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
21811
- const tableElement2 = editor.getElementByKey(
21812
- tableNode.getKey()
21813
- );
21814
- if (!tableElement2) {
21815
- throw new Error("Expected to find tableElement in DOM");
21816
- }
21817
- const tableSelection = getTableObserverFromTableElement(tableElement2);
21818
- if (tableSelection !== null) {
21819
- tableSelection.clearHighlight();
21820
- }
21821
- tableNode.markDirty();
21822
- updateTableCellNode(tableCellNode.getLatest());
21823
- }
21824
- const rootNode = $getRoot();
21825
- rootNode.selectStart();
21826
- });
21827
- }, [editor, tableCellNode]);
21828
- const insertTableRowAtSelection = useCallback12(
21829
- (shouldInsertAfter) => {
21830
- editor.update(() => {
21831
- $insertTableRow__EXPERIMENTAL(shouldInsertAfter);
21832
- });
21833
- incrementMenuTriggerKey();
21834
- },
21835
- [editor]
21836
- );
21837
- const insertTableColumnAtSelection = useCallback12(
21838
- (shouldInsertAfter) => {
21839
- editor.update(() => {
21840
- for (let i = 0; i < selectionCounts.columns; i++) {
21841
- $insertTableColumn__EXPERIMENTAL(shouldInsertAfter);
21842
- }
21843
- });
21844
- incrementMenuTriggerKey();
21845
- },
21846
- [editor, selectionCounts.columns]
21847
- );
21848
- const deleteTableRowAtSelection = useCallback12(() => {
21849
- editor.update(() => {
21850
- $deleteTableRow__EXPERIMENTAL();
21851
- });
21852
- incrementMenuTriggerKey();
21853
- }, [editor]);
21854
- const deleteTableAtSelection = useCallback12(() => {
21855
- editor.update(() => {
21856
- const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
21857
- tableNode.remove();
21858
- clearTableSelection();
21859
- });
21860
- }, [editor, tableCellNode, clearTableSelection]);
21861
- const deleteTableColumnAtSelection = useCallback12(() => {
21862
- editor.update(() => {
21863
- $deleteTableColumn__EXPERIMENTAL();
21864
- clearTableSelection();
21865
- });
21866
- incrementMenuTriggerKey();
21867
- }, [editor, clearTableSelection]);
21868
- const toggleTableRowIsHeader = useCallback12(() => {
21869
- editor.update(() => {
21870
- const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
21871
- const tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
21872
- const tableRows = tableNode.getChildren();
21873
- if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
21874
- throw new Error("Expected table cell to be inside of table row.");
21875
- }
21876
- const tableRow2 = tableRows[tableRowIndex];
21877
- if (!$isTableRowNode(tableRow2)) {
21878
- throw new Error("Expected table row");
21879
- }
21880
- tableRow2.getChildren().forEach((tableCell) => {
21881
- if (!$isTableCellNode(tableCell)) {
21882
- throw new Error("Expected table cell");
21883
- }
21884
- tableCell.toggleHeaderStyle(TableCellHeaderStates.ROW);
21885
- });
21886
- clearTableSelection();
21887
- });
21888
- }, [editor, tableCellNode, clearTableSelection]);
21889
- const toggleTableColumnIsHeader = useCallback12(() => {
21890
- editor.update(() => {
21891
- const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
21892
- const tableColumnIndex = $getTableColumnIndexFromTableCellNode(tableCellNode);
21893
- const tableRows = tableNode.getChildren();
21894
- const maxRowsLength = Math.max(...tableRows.map((row) => row.getChildren().length));
21895
- if (tableColumnIndex >= maxRowsLength || tableColumnIndex < 0) {
21896
- throw new Error("Expected table cell to be inside of table row.");
21897
- }
21898
- for (let r = 0; r < tableRows.length; r++) {
21899
- const tableRow2 = tableRows[r];
21900
- if (!$isTableRowNode(tableRow2)) {
21901
- throw new Error("Expected table row");
21902
- }
21903
- const tableCells = tableRow2.getChildren();
21904
- if (tableColumnIndex >= tableCells.length) {
21905
- continue;
21906
- }
21907
- const tableCell = tableCells[tableColumnIndex];
21908
- if (!$isTableCellNode(tableCell)) {
21909
- throw new Error("Expected table cell");
21910
- }
21911
- tableCell.toggleHeaderStyle(TableCellHeaderStates.COLUMN);
21912
- }
21913
- clearTableSelection();
21914
- });
21915
- }, [editor, tableCellNode, clearTableSelection]);
21916
- const menuItemCss = css98({
21917
- fontSize: "var(--fs-sm)"
21918
- });
21919
- return /* @__PURE__ */ jsxs87(
21920
- Menu,
21921
- {
21922
- menuTrigger: /* @__PURE__ */ jsx131(
21923
- TableActionMenuTrigger,
21924
- {
21925
- tableCellEl,
21926
- positioningAnchorEl
21927
- },
21928
- menuTriggerKey
21929
- ),
21930
- portalElement: menuPortalEl,
21931
- maxMenuHeight: "300px",
21932
- children: [
21933
- /* @__PURE__ */ jsxs87(
21934
- MenuItem,
21935
- {
21936
- onClick: () => {
21937
- insertTableRowAtSelection(false);
21938
- },
21939
- css: menuItemCss,
21940
- children: [
21941
- "Insert ",
21942
- selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
21943
- " above"
21944
- ]
21945
- }
21946
- ),
21947
- /* @__PURE__ */ jsxs87(MenuItem, { onClick: () => insertTableRowAtSelection(true), css: menuItemCss, children: [
21948
- "Insert ",
21949
- selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
21950
- " below"
21951
- ] }),
21952
- /* @__PURE__ */ jsx131(MenuItemSeparator, {}),
21953
- /* @__PURE__ */ jsxs87(MenuItem, { onClick: () => insertTableColumnAtSelection(false), css: menuItemCss, children: [
21954
- "Insert ",
21955
- selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
21956
- " left"
21957
- ] }),
21958
- /* @__PURE__ */ jsxs87(MenuItem, { onClick: () => insertTableColumnAtSelection(true), css: menuItemCss, children: [
21959
- "Insert ",
21960
- selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
21961
- " right"
21962
- ] }),
21963
- /* @__PURE__ */ jsx131(MenuItemSeparator, {}),
21964
- /* @__PURE__ */ jsx131(MenuItem, { onClick: () => deleteTableColumnAtSelection(), css: menuItemCss, children: "Delete column" }),
21965
- /* @__PURE__ */ jsx131(MenuItem, { onClick: () => deleteTableRowAtSelection(), css: menuItemCss, children: "Delete row" }),
21966
- /* @__PURE__ */ jsx131(MenuItem, { onClick: () => deleteTableAtSelection(), css: menuItemCss, children: "Delete table" }),
21967
- /* @__PURE__ */ jsx131(MenuItemSeparator, {}),
21968
- /* @__PURE__ */ jsxs87(MenuItem, { onClick: () => toggleTableRowIsHeader(), css: menuItemCss, children: [
21969
- (tableCellNode.__headerState & TableCellHeaderStates.ROW) === TableCellHeaderStates.ROW ? "Remove" : "Add",
21970
- " ",
21971
- "row header"
21972
- ] }),
21973
- /* @__PURE__ */ jsxs87(MenuItem, { onClick: () => toggleTableColumnIsHeader(), css: menuItemCss, children: [
21974
- (tableCellNode.__headerState & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN ? "Remove" : "Add",
21975
- " ",
21976
- "column header"
21977
- ] })
21978
- ]
21979
- }
21980
- );
21981
- }
21982
- function TableCellActionMenuContainer({
21983
- menuPortalEl,
21984
- positioningAnchorEl
21985
- }) {
21986
- const [editor] = useLexicalComposerContext5();
21987
- const [tableCellNode, setTableMenuCellNode] = useState18(null);
21988
- const [tableCellNodeEl, _setTableMenuCellNodeEl] = useState18(null);
21989
- const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = useState18(null);
21990
- useEffect21(() => {
21991
- const newPortalEl = document.createElement("div");
21992
- setTableMenuCellMenuPortalEl(newPortalEl);
21993
- menuPortalEl.appendChild(newPortalEl);
21994
- return () => {
21995
- newPortalEl.remove();
21996
- };
21997
- }, [menuPortalEl]);
21998
- const setTableMenuCellNodeElem = useCallback12((elem) => {
21999
- if (elem) {
22000
- _setTableMenuCellNodeEl(elem);
22001
- } else {
22002
- _setTableMenuCellNodeEl(null);
22003
- }
22004
- }, []);
22005
- const $moveMenu = useCallback12(() => {
22006
- const selection = $getSelection4();
22007
- const nativeSelection = window.getSelection();
22008
- const activeElement = document.activeElement;
22009
- if (selection == null) {
22010
- setTableMenuCellNode(null);
22011
- return;
22012
- }
22013
- const rootElement = editor.getRootElement();
22014
- if ($isRangeSelection4(selection) && rootElement !== null && nativeSelection !== null && rootElement.contains(nativeSelection.anchorNode)) {
22015
- const tableCellNodeFromSelection = $getTableCellNodeFromLexicalNode(selection.anchor.getNode());
22016
- if (tableCellNodeFromSelection == null) {
22017
- setTableMenuCellNode(null);
22018
- setTableMenuCellNodeElem(null);
22019
- return;
22020
- }
22021
- const tableCellParentNodeDOM = editor.getElementByKey(tableCellNodeFromSelection.getKey());
22022
- if (tableCellParentNodeDOM == null) {
22023
- setTableMenuCellNode(null);
22024
- setTableMenuCellNodeElem(null);
22025
- return;
22026
- }
22027
- setTableMenuCellNode(tableCellNodeFromSelection);
22028
- setTableMenuCellNodeElem(tableCellParentNodeDOM);
22029
- } else if (!activeElement) {
22030
- setTableMenuCellNode(null);
22031
- setTableMenuCellNodeElem(null);
22032
- }
22033
- }, [editor, setTableMenuCellNodeElem]);
22034
- useEffect21(() => {
22035
- return editor.registerUpdateListener(() => {
22036
- editor.getEditorState().read(() => {
22037
- $moveMenu();
22038
- });
22039
- });
22040
- });
22041
- return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ jsx131(
22042
- TableActionMenu,
22043
- {
22044
- tableCellNode,
22045
- menuPortalEl: tableCellMenuPortalEl,
22046
- tableCellEl: tableCellNodeEl,
22047
- positioningAnchorEl
22048
- },
22049
- tableCellNode.getKey()
22050
- );
22051
- }
22052
- function TableActionMenuPlugin({ positioningAnchorEl }) {
22053
- const isEditable = useLexicalEditable();
22054
- return isEditable ? /* @__PURE__ */ jsx131(
22055
- TableCellActionMenuContainer,
22056
- {
22057
- menuPortalEl: positioningAnchorEl,
22058
- positioningAnchorEl
22059
- }
22060
- ) : null;
22061
- }
22062
-
22063
- // src/components/ParameterInputs/rich-text/TableCellResizerPlugin.tsx
22064
- import { css as css99 } from "@emotion/react";
22065
- import { useLexicalComposerContext as useLexicalComposerContext6 } from "@lexical/react/LexicalComposerContext";
22066
- import { useLexicalEditable as useLexicalEditable2 } from "@lexical/react/useLexicalEditable";
22067
- import {
22068
- $computeTableMapSkipCellCheck,
22069
- $getTableNodeFromLexicalNodeOrThrow as $getTableNodeFromLexicalNodeOrThrow2,
22070
- $getTableRowIndexFromTableCellNode as $getTableRowIndexFromTableCellNode2,
22071
- $isTableCellNode as $isTableCellNode2,
22072
- $isTableRowNode as $isTableRowNode2
22073
- } from "@lexical/table";
22074
- import { calculateZoomLevel } from "@lexical/utils";
22075
- import { $getNearestNodeFromDOMNode } from "lexical";
22076
- import { useCallback as useCallback13, useEffect as useEffect22, useMemo as useMemo7, useRef as useRef12, useState as useState19 } from "react";
22077
- import { createPortal as createPortal3 } from "react-dom";
22078
- import { Fragment as Fragment20, jsx as jsx132, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
22079
- var MIN_ROW_HEIGHT = 33;
22080
- var MIN_COLUMN_WIDTH = 50;
22081
- var tableResizer = css99`
22082
- position: absolute;
22083
- z-index: var(--z-10);
22084
- `;
22085
- var fixedGetDOMCellFromTarget = (node) => {
22086
- let currentNode = node;
22087
- while (currentNode != null) {
22088
- const nodeName = currentNode.nodeName;
22089
- if (nodeName === "TD" || nodeName === "TH") {
22090
- const cell2 = currentNode._cell;
22091
- if (cell2 === void 0) {
22092
- return {
22093
- elem: currentNode
22094
- };
22095
- }
22096
- return cell2;
22097
- }
22098
- currentNode = currentNode.parentNode;
22099
- }
22100
- return null;
22101
- };
22102
- function TableCellResizer({ editor, positioningAnchorEl }) {
22103
- const targetRef = useRef12(null);
22104
- const resizerRef = useRef12(null);
22105
- const tableRectRef = useRef12(null);
22106
- const mouseStartPosRef = useRef12(null);
22107
- const [mouseCurrentPos, updateMouseCurrentPos] = useState19(null);
22108
- const [activeCell, updateActiveCell] = useState19(null);
22109
- const [isMouseDown, updateIsMouseDown] = useState19(false);
22110
- const [draggingDirection, updateDraggingDirection] = useState19(null);
22111
- const resetState = useCallback13(() => {
22112
- updateActiveCell(null);
22113
- targetRef.current = null;
22114
- updateDraggingDirection(null);
22115
- mouseStartPosRef.current = null;
22116
- tableRectRef.current = null;
22117
- }, []);
22118
- const isMouseDownOnEvent = (event) => {
22119
- return (event.buttons & 1) === 1;
22120
- };
22121
- useEffect22(() => {
22122
- const onMouseMove = (event) => {
22123
- setTimeout(() => {
22124
- const target = event.target;
22125
- if (draggingDirection) {
22126
- updateMouseCurrentPos({
22127
- x: event.clientX,
22128
- y: event.clientY
22129
- });
22130
- return;
22131
- }
22132
- updateIsMouseDown(isMouseDownOnEvent(event));
22133
- if (resizerRef.current && resizerRef.current.contains(target)) {
22134
- return;
22135
- }
22136
- if (targetRef.current !== target) {
22137
- targetRef.current = target;
22138
- const cell2 = fixedGetDOMCellFromTarget(target);
22139
- if (cell2 && activeCell !== cell2) {
22140
- editor.update(() => {
22141
- const tableCellNode = $getNearestNodeFromDOMNode(cell2.elem);
22142
- if (!tableCellNode) {
22143
- throw new Error("TableCellResizer: Table cell node not found.");
22144
- }
22145
- const tableNode = $getTableNodeFromLexicalNodeOrThrow2(tableCellNode);
22146
- const tableElement2 = editor.getElementByKey(tableNode.getKey());
22147
- if (!tableElement2) {
22148
- throw new Error("TableCellResizer: Table element not found.");
22149
- }
22150
- targetRef.current = target;
22151
- tableRectRef.current = tableElement2.getBoundingClientRect();
22152
- updateActiveCell(cell2);
22153
- });
22154
- } else if (cell2 == null) {
22155
- resetState();
22156
- }
22157
- }
22158
- }, 0);
22159
- };
22160
- const onMouseDown = () => {
22161
- setTimeout(() => {
22162
- updateIsMouseDown(true);
22163
- }, 0);
22164
- };
22165
- const onMouseUp = () => {
22166
- setTimeout(() => {
22167
- updateIsMouseDown(false);
22168
- }, 0);
22169
- };
22170
- const removeRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
22171
- rootElement == null ? void 0 : rootElement.addEventListener("mousemove", onMouseMove);
22172
- rootElement == null ? void 0 : rootElement.addEventListener("mousedown", onMouseDown);
22173
- rootElement == null ? void 0 : rootElement.addEventListener("mouseup", onMouseUp);
22174
- prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousemove", onMouseMove);
22175
- prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousedown", onMouseDown);
22176
- prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mouseup", onMouseUp);
22177
- });
22178
- return () => {
22179
- removeRootListener();
22180
- };
22181
- }, [activeCell, draggingDirection, editor, resetState]);
22182
- const isHeightChanging = (direction) => {
22183
- if (direction === "bottom") {
22184
- return true;
22185
- }
22186
- return false;
22187
- };
22188
- const updateRowHeight = useCallback13(
22189
- (heightChange) => {
22190
- if (!activeCell) {
22191
- throw new Error("TableCellResizer: Expected active cell.");
22192
- }
22193
- editor.update(
22194
- () => {
22195
- const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
22196
- if (!$isTableCellNode2(tableCellNode)) {
22197
- throw new Error("TableCellResizer: Table cell node not found.");
22198
- }
22199
- const tableNode = $getTableNodeFromLexicalNodeOrThrow2(tableCellNode);
22200
- const tableRowIndex = $getTableRowIndexFromTableCellNode2(tableCellNode);
22201
- const tableRows = tableNode.getChildren();
22202
- if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
22203
- throw new Error("Expected table cell to be inside of table row.");
22204
- }
22205
- const tableRow2 = tableRows[tableRowIndex];
22206
- if (!$isTableRowNode2(tableRow2)) {
22207
- throw new Error("Expected table row");
22208
- }
22209
- let height = tableRow2.getHeight();
22210
- if (height === void 0) {
22211
- const rowCells = tableRow2.getChildren();
22212
- height = Math.min(...rowCells.map((cell2) => {
22213
- var _a;
22214
- return (_a = getCellNodeHeight(cell2, editor)) != null ? _a : Infinity;
22215
- }));
22216
- }
22217
- const newHeight = Math.max(height + heightChange, MIN_ROW_HEIGHT);
22218
- tableRow2.setHeight(newHeight);
22219
- },
22220
- { tag: "skip-scroll-into-view" }
22221
- );
22222
- },
22223
- [activeCell, editor]
22224
- );
22225
- const getCellNodeWidth = (cell2, activeEditor) => {
22226
- const width = cell2.getWidth();
22227
- if (width !== void 0) {
22228
- return width;
22229
- }
22230
- const domCellNode = activeEditor.getElementByKey(cell2.getKey());
22231
- if (domCellNode == null) {
22232
- return void 0;
22233
- }
22234
- const computedStyle = getComputedStyle(domCellNode);
22235
- return domCellNode.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight);
22236
- };
22237
- const getCellNodeHeight = (cell2, activeEditor) => {
22238
- const domCellNode = activeEditor.getElementByKey(cell2.getKey());
22239
- return domCellNode == null ? void 0 : domCellNode.clientHeight;
22240
- };
22241
- const getCellColumnIndex = (tableCellNode, tableMap) => {
22242
- for (let row = 0; row < tableMap.length; row++) {
22243
- for (let column = 0; column < tableMap[row].length; column++) {
22244
- if (tableMap[row][column].cell === tableCellNode) {
22245
- return column;
22246
- }
22247
- }
22248
- }
22249
- };
22250
- const updateColumnWidth = useCallback13(
22251
- (widthChange) => {
22252
- if (!activeCell) {
22253
- throw new Error("TableCellResizer: Expected active cell.");
22254
- }
22255
- editor.update(
22256
- () => {
22257
- const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
22258
- if (!$isTableCellNode2(tableCellNode)) {
22259
- throw new Error("TableCellResizer: Table cell node not found.");
22260
- }
22261
- const tableNode = $getTableNodeFromLexicalNodeOrThrow2(tableCellNode);
22262
- const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
22263
- const columnIndex = getCellColumnIndex(tableCellNode, tableMap);
22264
- if (columnIndex === void 0) {
22265
- throw new Error("TableCellResizer: Table column not found.");
22266
- }
22267
- for (let row = 0; row < tableMap.length; row++) {
22268
- const cell2 = tableMap[row][columnIndex];
22269
- if (cell2.startRow === row && (columnIndex === tableMap[row].length - 1 || tableMap[row][columnIndex].cell !== tableMap[row][columnIndex + 1].cell)) {
22270
- const width = getCellNodeWidth(cell2.cell, editor);
22271
- if (width === void 0) {
22272
- continue;
22273
- }
22274
- const newWidth = Math.max(width + widthChange, MIN_COLUMN_WIDTH);
22275
- cell2.cell.setWidth(newWidth);
22276
- }
22277
- }
22278
- },
22279
- { tag: "skip-scroll-into-view" }
22280
- );
22281
- },
22282
- [activeCell, editor]
22283
- );
22284
- const mouseUpHandler = useCallback13(
22285
- (direction) => {
22286
- const handler = (event) => {
22287
- event.preventDefault();
22288
- event.stopPropagation();
22289
- if (!activeCell) {
22290
- throw new Error("TableCellResizer: Expected active cell.");
22291
- }
22292
- if (mouseStartPosRef.current) {
22293
- const { x, y } = mouseStartPosRef.current;
22294
- if (activeCell === null) {
22295
- return;
22296
- }
22297
- const zoom = calculateZoomLevel(event.target);
22298
- if (isHeightChanging(direction)) {
22299
- const heightChange = (event.clientY - y) / zoom;
22300
- updateRowHeight(heightChange);
22301
- } else {
22302
- const widthChange = (event.clientX - x) / zoom;
22303
- updateColumnWidth(widthChange);
22304
- }
22305
- resetState();
22306
- document.removeEventListener("mouseup", handler);
22307
- }
22308
- };
22309
- return handler;
22310
- },
22311
- [activeCell, resetState, updateColumnWidth, updateRowHeight]
22312
- );
22313
- const toggleResize = useCallback13(
22314
- (direction) => (event) => {
22315
- event.preventDefault();
22316
- event.stopPropagation();
22317
- if (!activeCell) {
22318
- throw new Error("TableCellResizer: Expected active cell.");
22319
- }
22320
- mouseStartPosRef.current = {
22321
- x: event.clientX,
22322
- y: event.clientY
22323
- };
22324
- updateMouseCurrentPos(mouseStartPosRef.current);
22325
- updateDraggingDirection(direction);
22326
- document.addEventListener("mouseup", mouseUpHandler(direction));
22327
- },
22328
- [activeCell, mouseUpHandler]
22329
- );
22330
- const getResizers = useCallback13(() => {
22331
- if (activeCell) {
22332
- const { height, width, top, left } = activeCell.elem.getBoundingClientRect();
22333
- const parentRect = positioningAnchorEl.getBoundingClientRect();
22334
- const zoom = calculateZoomLevel(activeCell.elem);
22335
- const zoneWidth = 10;
22336
- const styles = {
22337
- bottom: {
22338
- backgroundColor: "none",
22339
- cursor: "row-resize",
22340
- height: `${zoneWidth}px`,
22341
- left: `${left - parentRect.left}px`,
22342
- top: `${top - parentRect.top + height - zoneWidth / 2}px`,
22343
- width: `${width}px`
22344
- },
22345
- right: {
22346
- backgroundColor: "none",
22347
- cursor: "col-resize",
22348
- height: `${height}px`,
22349
- left: `${left - parentRect.left + width - zoneWidth / 2}px`,
22350
- top: `${top - parentRect.top}px`,
22351
- width: `${zoneWidth}px`
22352
- }
22353
- };
22354
- const tableRect = tableRectRef.current;
22355
- if (draggingDirection && mouseCurrentPos && tableRect) {
22356
- if (isHeightChanging(draggingDirection)) {
22357
- styles[draggingDirection].left = `${tableRect.left - parentRect.left}px`;
22358
- styles[draggingDirection].top = `${(mouseCurrentPos.y - parentRect.top) / zoom}px`;
22359
- styles[draggingDirection].height = "3px";
22360
- styles[draggingDirection].width = `${tableRect.width}px`;
22361
- } else {
22362
- styles[draggingDirection].top = `${tableRect.top - parentRect.top}px`;
22363
- styles[draggingDirection].left = `${(mouseCurrentPos.x - parentRect.left) / zoom}px`;
22364
- styles[draggingDirection].width = "3px";
22365
- styles[draggingDirection].height = `${tableRect.height}px`;
22366
- }
22367
- styles[draggingDirection].backgroundColor = "#adf";
22368
- }
22369
- return styles;
22370
- }
22371
- return {
22372
- bottom: null,
22373
- left: null,
22374
- right: null,
22375
- top: null
22376
- };
22377
- }, [activeCell, draggingDirection, mouseCurrentPos, positioningAnchorEl]);
22378
- const resizerStyles = getResizers();
22379
- return /* @__PURE__ */ jsx132("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ jsxs88(Fragment20, { children: [
22380
- /* @__PURE__ */ jsx132(
22381
- "div",
22382
- {
22383
- css: tableResizer,
22384
- style: resizerStyles.right || void 0,
22385
- onMouseDown: toggleResize("right")
22386
- }
22387
- ),
22388
- /* @__PURE__ */ jsx132(
22389
- "div",
22390
- {
22391
- css: tableResizer,
22392
- style: resizerStyles.bottom || void 0,
22393
- onMouseDown: toggleResize("bottom")
22394
- }
22395
- )
22396
- ] }) });
22397
- }
22398
- function TableCellResizerPlugin({ positioningAnchorEl }) {
22399
- const [editor] = useLexicalComposerContext6();
22400
- const isEditable = useLexicalEditable2();
22401
- return useMemo7(
22402
- () => isEditable ? createPortal3(
22403
- /* @__PURE__ */ jsx132(TableCellResizer, { editor, positioningAnchorEl }),
22404
- positioningAnchorEl
22405
- ) : null,
22406
- [editor, isEditable, positioningAnchorEl]
22407
- );
22408
- }
22409
-
22410
21597
  // src/components/ParameterInputs/ParameterRichText.tsx
22411
- import { Fragment as Fragment21, jsx as jsx133, jsxs as jsxs89 } from "@emotion/react/jsx-runtime";
21598
+ import { Fragment as Fragment20, jsx as jsx131, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
22412
21599
  var ParameterRichText = ({
22413
21600
  label,
22414
21601
  labelLeadingIcon,
@@ -22427,16 +21614,13 @@ var ParameterRichText = ({
22427
21614
  readOnly,
22428
21615
  editorWrapperClassName,
22429
21616
  editorInputClassName,
22430
- editorInputWrapperClassName,
22431
21617
  editorFooter,
22432
21618
  customNodes,
22433
21619
  children,
22434
21620
  variables,
22435
- customControls,
22436
- onInsertTable,
22437
- minimalInteractivity
21621
+ customControls
22438
21622
  }) => {
22439
- return /* @__PURE__ */ jsxs89(
21623
+ return /* @__PURE__ */ jsxs87(
22440
21624
  ParameterShell,
22441
21625
  {
22442
21626
  "data-testid": "parameter-richtext",
@@ -22450,7 +21634,7 @@ var ParameterRichText = ({
22450
21634
  captionTestId,
22451
21635
  menuItems,
22452
21636
  children: [
22453
- /* @__PURE__ */ jsx133(
21637
+ /* @__PURE__ */ jsx131(
22454
21638
  ParameterRichTextInner,
22455
21639
  {
22456
21640
  value,
@@ -22461,33 +21645,30 @@ var ParameterRichText = ({
22461
21645
  readOnly,
22462
21646
  editorWrapperClassName,
22463
21647
  editorInputClassName,
22464
- editorInputWrapperClassName,
22465
21648
  editorFooter,
22466
21649
  customNodes,
22467
21650
  variables,
22468
21651
  customControls,
22469
- onInsertTable,
22470
- minimalInteractivity,
22471
21652
  children
22472
21653
  }
22473
21654
  ),
22474
- menuItems ? /* @__PURE__ */ jsx133(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx133(Fragment21, { children: menuItems }) }) : null
21655
+ menuItems ? /* @__PURE__ */ jsx131(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx131(Fragment20, { children: menuItems }) }) : null
22475
21656
  ]
22476
21657
  }
22477
21658
  );
22478
21659
  };
22479
- var editorWrapper = css100`
21660
+ var editorWrapper = css98`
22480
21661
  display: flex;
22481
21662
  flex-flow: column;
22482
21663
  flex-grow: 1;
22483
21664
  `;
22484
- var editorContainer = css100`
21665
+ var editorContainer = css98`
22485
21666
  display: flex;
22486
21667
  flex-flow: column;
22487
21668
  flex-grow: 1;
22488
21669
  position: relative;
22489
21670
  `;
22490
- var editorPlaceholder = css100`
21671
+ var editorPlaceholder = css98`
22491
21672
  color: var(--gray-500);
22492
21673
  font-style: italic;
22493
21674
  /* 1px is added to make sure caret is clearly visible when field is focused
@@ -22498,7 +21679,7 @@ var editorPlaceholder = css100`
22498
21679
  top: var(--spacing-sm);
22499
21680
  user-select: none;
22500
21681
  `;
22501
- var editorInput = css100`
21682
+ var editorInput = css98`
22502
21683
  background: var(--white);
22503
21684
  border: 1px solid var(--gray-200);
22504
21685
  border-radius: var(--rounded-sm);
@@ -22526,14 +21707,11 @@ var ParameterRichTextInner = ({
22526
21707
  readOnly,
22527
21708
  editorWrapperClassName,
22528
21709
  editorInputClassName,
22529
- editorInputWrapperClassName,
22530
21710
  editorFooter,
22531
21711
  children,
22532
21712
  customNodes,
22533
21713
  variables,
22534
- customControls,
22535
- onInsertTable,
22536
- minimalInteractivity
21714
+ customControls
22537
21715
  }) => {
22538
21716
  const lexicalConfig = {
22539
21717
  namespace: "uniform",
@@ -22549,9 +21727,6 @@ var ParameterRichTextInner = ({
22549
21727
  QuoteNode,
22550
21728
  ParagraphNode2,
22551
21729
  CustomCodeNode,
22552
- TableNode,
22553
- TableCellNode2,
22554
- TableRowNode2,
22555
21730
  ...customNodes != null ? customNodes : []
22556
21731
  ],
22557
21732
  theme: {
@@ -22584,15 +21759,12 @@ var ParameterRichTextInner = ({
22584
21759
  }
22585
21760
  },
22586
21761
  quote: blockquoteElement,
22587
- code: codeElement,
22588
- table: tableElement,
22589
- tableCell: tableCellElement,
22590
- tableCellHeader: tableHeaderElement
21762
+ code: codeElement
22591
21763
  },
22592
21764
  editable: !readOnly
22593
21765
  };
22594
- return /* @__PURE__ */ jsxs89(Fragment21, { children: [
22595
- /* @__PURE__ */ jsx133("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx133(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx133(
21766
+ return /* @__PURE__ */ jsxs87(Fragment20, { children: [
21767
+ /* @__PURE__ */ jsx131("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx131(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx131(
22596
21768
  RichText,
22597
21769
  {
22598
21770
  onChange,
@@ -22601,11 +21773,8 @@ var ParameterRichTextInner = ({
22601
21773
  onRichTextInit,
22602
21774
  readOnly,
22603
21775
  editorInputClassName,
22604
- editorInputWrapperClassName,
22605
21776
  variables,
22606
21777
  customControls,
22607
- onInsertTable,
22608
- minimalInteractivity,
22609
21778
  children
22610
21779
  }
22611
21780
  ) }) }),
@@ -22628,20 +21797,18 @@ var RichText = ({
22628
21797
  onRichTextInit,
22629
21798
  readOnly,
22630
21799
  editorInputClassName,
22631
- editorInputWrapperClassName,
22632
21800
  children,
22633
21801
  variables,
22634
- customControls,
22635
- onInsertTable,
22636
- minimalInteractivity
21802
+ customControls
22637
21803
  }) => {
22638
- const [editor] = useLexicalComposerContext7();
22639
- useEffect23(() => {
21804
+ const editorContainerRef = useRef12(null);
21805
+ const [editor] = useLexicalComposerContext5();
21806
+ useEffect21(() => {
22640
21807
  if (onRichTextInit) {
22641
21808
  onRichTextInit(editor);
22642
21809
  }
22643
21810
  }, [editor, onRichTextInit]);
22644
- useEffect23(() => {
21811
+ useEffect21(() => {
22645
21812
  const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState }) => {
22646
21813
  requestAnimationFrame(() => {
22647
21814
  if (!deepEqual2(editorState.toJSON(), prevEditorState.toJSON())) {
@@ -22653,72 +21820,53 @@ var RichText = ({
22653
21820
  removeUpdateListener();
22654
21821
  };
22655
21822
  }, [editor, onChange]);
22656
- useEffect23(() => {
21823
+ useEffect21(() => {
22657
21824
  editor.setEditable(!readOnly);
22658
21825
  }, [editor, readOnly]);
22659
- const [editorContainerRef, setEditorContainerRef] = useState20(null);
22660
- const onRef = (_editorContainerRef) => {
22661
- if (_editorContainerRef !== null) {
22662
- setEditorContainerRef(_editorContainerRef);
22663
- }
22664
- };
22665
- return /* @__PURE__ */ jsxs89(Fragment21, { children: [
22666
- readOnly || minimalInteractivity ? null : /* @__PURE__ */ jsx133(RichTextToolbar_default, { config, customControls, onInsertTable }),
22667
- /* @__PURE__ */ jsxs89(
22668
- "div",
22669
- {
22670
- css: editorContainer,
22671
- className: editorInputWrapperClassName,
22672
- ref: onRef,
22673
- "data-testid": "value-container",
22674
- children: [
22675
- /* @__PURE__ */ jsx133(
22676
- RichTextPlugin,
22677
- {
22678
- contentEditable: /* @__PURE__ */ jsx133(ContentEditable, { css: editorInput, className: editorInputClassName }),
22679
- placeholder: /* @__PURE__ */ jsx133("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
22680
- ErrorBoundary: LexicalErrorBoundary
22681
- }
22682
- ),
22683
- /* @__PURE__ */ jsx133(ListPlugin, {}),
22684
- /* @__PURE__ */ jsx133(TablePlugin, {}),
22685
- editorContainerRef && !minimalInteractivity ? /* @__PURE__ */ jsx133(TableActionMenuPlugin, { positioningAnchorEl: editorContainerRef }) : null,
22686
- editorContainerRef && !minimalInteractivity ? /* @__PURE__ */ jsx133(TableCellResizerPlugin, { positioningAnchorEl: editorContainerRef }) : null,
22687
- readOnly ? null : /* @__PURE__ */ jsx133(HistoryPlugin, {}),
22688
- editorContainerRef ? /* @__PURE__ */ jsx133(
22689
- LinkNodePlugin,
22690
- {
22691
- onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
22692
- getBoundPath: (variables == null ? void 0 : variables.bindVariables) ? (path) => {
22693
- var _a, _b;
22694
- return (_b = (_a = variables.bindVariables) == null ? void 0 : _a.call(variables, path)) != null ? _b : path;
22695
- } : void 0,
22696
- positioningAnchorEl: editorContainerRef
22697
- }
22698
- ) : null,
22699
- /* @__PURE__ */ jsx133(ListIndentPlugin, { maxDepth: 4 }),
22700
- /* @__PURE__ */ jsx133(DisableStylesPlugin, {}),
22701
- /* @__PURE__ */ jsx133(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
22702
- /* @__PURE__ */ jsx133(Fragment21, { children })
22703
- ]
22704
- }
22705
- )
21826
+ return /* @__PURE__ */ jsxs87(Fragment20, { children: [
21827
+ readOnly ? null : /* @__PURE__ */ jsx131(RichTextToolbar_default, { config, customControls }),
21828
+ /* @__PURE__ */ jsxs87("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
21829
+ /* @__PURE__ */ jsx131(
21830
+ RichTextPlugin,
21831
+ {
21832
+ contentEditable: /* @__PURE__ */ jsx131(ContentEditable, { css: editorInput, className: editorInputClassName }),
21833
+ placeholder: /* @__PURE__ */ jsx131("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
21834
+ ErrorBoundary: LexicalErrorBoundary
21835
+ }
21836
+ ),
21837
+ /* @__PURE__ */ jsx131(ListPlugin, {}),
21838
+ readOnly ? null : /* @__PURE__ */ jsx131(HistoryPlugin, {}),
21839
+ /* @__PURE__ */ jsx131(
21840
+ LinkNodePlugin,
21841
+ {
21842
+ onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
21843
+ getBoundPath: (variables == null ? void 0 : variables.bindVariables) ? (path) => {
21844
+ var _a, _b;
21845
+ return (_b = (_a = variables.bindVariables) == null ? void 0 : _a.call(variables, path)) != null ? _b : path;
21846
+ } : void 0
21847
+ }
21848
+ ),
21849
+ /* @__PURE__ */ jsx131(ListIndentPlugin, { maxDepth: 4 }),
21850
+ /* @__PURE__ */ jsx131(DisableStylesPlugin, {}),
21851
+ /* @__PURE__ */ jsx131(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
21852
+ /* @__PURE__ */ jsx131(Fragment20, { children })
21853
+ ] })
22706
21854
  ] });
22707
21855
  };
22708
21856
 
22709
21857
  // src/components/ParameterInputs/ParameterSelect.tsx
22710
- import { forwardRef as forwardRef23 } from "react";
22711
- import { jsx as jsx134, jsxs as jsxs90 } from "@emotion/react/jsx-runtime";
22712
- var ParameterSelect = forwardRef23(
21858
+ import { forwardRef as forwardRef22 } from "react";
21859
+ import { jsx as jsx132, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
21860
+ var ParameterSelect = forwardRef22(
22713
21861
  ({ defaultOption, options, ...props }, ref) => {
22714
21862
  const { shellProps, innerProps } = extractParameterProps(props);
22715
- return /* @__PURE__ */ jsx134(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx134(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
21863
+ return /* @__PURE__ */ jsx132(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx132(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
22716
21864
  }
22717
21865
  );
22718
- var ParameterSelectInner = forwardRef23(
21866
+ var ParameterSelectInner = forwardRef22(
22719
21867
  ({ defaultOption, options, ...props }, ref) => {
22720
21868
  const { id, label, hiddenLabel } = useParameterShell();
22721
- return /* @__PURE__ */ jsxs90(
21869
+ return /* @__PURE__ */ jsxs88(
22722
21870
  "select",
22723
21871
  {
22724
21872
  css: [input3, selectInput],
@@ -22727,10 +21875,10 @@ var ParameterSelectInner = forwardRef23(
22727
21875
  ref,
22728
21876
  ...props,
22729
21877
  children: [
22730
- defaultOption ? /* @__PURE__ */ jsx134("option", { value: "", children: defaultOption }) : null,
21878
+ defaultOption ? /* @__PURE__ */ jsx132("option", { value: "", children: defaultOption }) : null,
22731
21879
  options.map((option) => {
22732
21880
  var _a;
22733
- return /* @__PURE__ */ jsx134("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
21881
+ return /* @__PURE__ */ jsx132("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
22734
21882
  })
22735
21883
  ]
22736
21884
  }
@@ -22739,15 +21887,15 @@ var ParameterSelectInner = forwardRef23(
22739
21887
  );
22740
21888
 
22741
21889
  // src/components/ParameterInputs/ParameterTextarea.tsx
22742
- import { forwardRef as forwardRef24 } from "react";
22743
- import { jsx as jsx135 } from "@emotion/react/jsx-runtime";
22744
- var ParameterTextarea = forwardRef24((props, ref) => {
21890
+ import { forwardRef as forwardRef23 } from "react";
21891
+ import { jsx as jsx133 } from "@emotion/react/jsx-runtime";
21892
+ var ParameterTextarea = forwardRef23((props, ref) => {
22745
21893
  const { shellProps, innerProps } = extractParameterProps(props);
22746
- return /* @__PURE__ */ jsx135(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx135(ParameterTextareaInner, { ref, ...innerProps }) });
21894
+ return /* @__PURE__ */ jsx133(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx133(ParameterTextareaInner, { ref, ...innerProps }) });
22747
21895
  });
22748
- var ParameterTextareaInner = forwardRef24(({ ...props }, ref) => {
21896
+ var ParameterTextareaInner = forwardRef23(({ ...props }, ref) => {
22749
21897
  const { id, label, hiddenLabel } = useParameterShell();
22750
- return /* @__PURE__ */ jsx135(
21898
+ return /* @__PURE__ */ jsx133(
22751
21899
  "textarea",
22752
21900
  {
22753
21901
  css: [input3, textarea2],
@@ -22760,26 +21908,26 @@ var ParameterTextareaInner = forwardRef24(({ ...props }, ref) => {
22760
21908
  });
22761
21909
 
22762
21910
  // src/components/ParameterInputs/ParameterToggle.tsx
22763
- import { forwardRef as forwardRef25 } from "react";
22764
- import { jsx as jsx136, jsxs as jsxs91 } from "@emotion/react/jsx-runtime";
22765
- var ParameterToggle = forwardRef25((props, ref) => {
21911
+ import { forwardRef as forwardRef24 } from "react";
21912
+ import { jsx as jsx134, jsxs as jsxs89 } from "@emotion/react/jsx-runtime";
21913
+ var ParameterToggle = forwardRef24((props, ref) => {
22766
21914
  const { shellProps, innerProps } = extractParameterProps(props);
22767
- return /* @__PURE__ */ jsx136(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx136(ParameterToggleInner, { ref, ...innerProps }) });
21915
+ return /* @__PURE__ */ jsx134(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx134(ParameterToggleInner, { ref, ...innerProps }) });
22768
21916
  });
22769
- var ParameterToggleInner = forwardRef25(
21917
+ var ParameterToggleInner = forwardRef24(
22770
21918
  ({ children, ...props }, ref) => {
22771
21919
  const { id, label } = useParameterShell();
22772
- return /* @__PURE__ */ jsxs91("label", { css: inputToggleLabel2, children: [
22773
- /* @__PURE__ */ jsx136("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
22774
- /* @__PURE__ */ jsx136("span", { css: inlineLabel2, children: label }),
21920
+ return /* @__PURE__ */ jsxs89("label", { css: inputToggleLabel2, children: [
21921
+ /* @__PURE__ */ jsx134("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
21922
+ /* @__PURE__ */ jsx134("span", { css: inlineLabel2, children: label }),
22775
21923
  children
22776
21924
  ] });
22777
21925
  }
22778
21926
  );
22779
21927
 
22780
21928
  // src/components/ProgressBar/ProgressBar.styles.ts
22781
- import { css as css101, keyframes as keyframes4 } from "@emotion/react";
22782
- var container3 = css101`
21929
+ import { css as css99, keyframes as keyframes4 } from "@emotion/react";
21930
+ var container3 = css99`
22783
21931
  background: var(--gray-50);
22784
21932
  margin-block: var(--spacing-sm);
22785
21933
  position: relative;
@@ -22789,13 +21937,13 @@ var container3 = css101`
22789
21937
  border: solid 1px var(--gray-300);
22790
21938
  `;
22791
21939
  var themeMap = {
22792
- primary: css101`
21940
+ primary: css99`
22793
21941
  --progress-color: var(--accent-light);
22794
21942
  `,
22795
- secondary: css101`
21943
+ secondary: css99`
22796
21944
  --progress-color: var(--accent-alt-light);
22797
21945
  `,
22798
- destructive: css101`
21946
+ destructive: css99`
22799
21947
  --progress-color: var(--brand-secondary-5);
22800
21948
  `
22801
21949
  };
@@ -22807,10 +21955,10 @@ var slidingBackgroundPosition = keyframes4`
22807
21955
  background-position: 64px 0;
22808
21956
  }
22809
21957
  `;
22810
- var determinate = css101`
21958
+ var determinate = css99`
22811
21959
  background-color: var(--progress-color);
22812
21960
  `;
22813
- var indeterminate = css101`
21961
+ var indeterminate = css99`
22814
21962
  background-image: linear-gradient(
22815
21963
  45deg,
22816
21964
  var(--progress-color) 25%,
@@ -22824,7 +21972,7 @@ var indeterminate = css101`
22824
21972
  background-size: 64px 64px;
22825
21973
  animation: ${slidingBackgroundPosition} 1s linear infinite;
22826
21974
  `;
22827
- var bar = css101`
21975
+ var bar = css99`
22828
21976
  position: absolute;
22829
21977
  inset: 0;
22830
21978
  transition: transform var(--duration-fast) var(--timing-ease-out);
@@ -22832,7 +21980,7 @@ var bar = css101`
22832
21980
  `;
22833
21981
 
22834
21982
  // src/components/ProgressBar/ProgressBar.tsx
22835
- import { jsx as jsx137 } from "@emotion/react/jsx-runtime";
21983
+ import { jsx as jsx135 } from "@emotion/react/jsx-runtime";
22836
21984
  function ProgressBar({
22837
21985
  current,
22838
21986
  max,
@@ -22842,7 +21990,7 @@ function ProgressBar({
22842
21990
  }) {
22843
21991
  const valueNow = Math.min(current, max);
22844
21992
  const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
22845
- return /* @__PURE__ */ jsx137(
21993
+ return /* @__PURE__ */ jsx135(
22846
21994
  "div",
22847
21995
  {
22848
21996
  css: container3,
@@ -22853,7 +22001,7 @@ function ProgressBar({
22853
22001
  "aria-valuemax": max,
22854
22002
  "aria-valuenow": valueNow,
22855
22003
  ...props,
22856
- children: /* @__PURE__ */ jsx137(
22004
+ children: /* @__PURE__ */ jsx135(
22857
22005
  "div",
22858
22006
  {
22859
22007
  css: [
@@ -22872,30 +22020,30 @@ function ProgressBar({
22872
22020
  }
22873
22021
 
22874
22022
  // src/components/ProgressList/ProgressList.tsx
22875
- import { css as css103 } from "@emotion/react";
22023
+ import { css as css101 } from "@emotion/react";
22876
22024
  import { CgCheckO as CgCheckO2 } from "@react-icons/all-files/cg/CgCheckO";
22877
22025
  import { CgRadioCheck } from "@react-icons/all-files/cg/CgRadioCheck";
22878
22026
  import { CgRecord } from "@react-icons/all-files/cg/CgRecord";
22879
- import { useMemo as useMemo8 } from "react";
22027
+ import { useMemo as useMemo7 } from "react";
22880
22028
 
22881
22029
  // src/components/ProgressList/styles/ProgressList.styles.ts
22882
- import { css as css102 } from "@emotion/react";
22883
- var progressListStyles = css102`
22030
+ import { css as css100 } from "@emotion/react";
22031
+ var progressListStyles = css100`
22884
22032
  display: flex;
22885
22033
  flex-direction: column;
22886
22034
  gap: var(--spacing-sm);
22887
22035
  list-style-type: none;
22888
22036
  `;
22889
- var progressListItemStyles = css102`
22037
+ var progressListItemStyles = css100`
22890
22038
  display: flex;
22891
22039
  gap: var(--spacing-base);
22892
22040
  align-items: center;
22893
22041
  `;
22894
22042
 
22895
22043
  // src/components/ProgressList/ProgressList.tsx
22896
- import { jsx as jsx138, jsxs as jsxs92 } from "@emotion/react/jsx-runtime";
22044
+ import { jsx as jsx136, jsxs as jsxs90 } from "@emotion/react/jsx-runtime";
22897
22045
  var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
22898
- const itemsWithStatus = useMemo8(() => {
22046
+ const itemsWithStatus = useMemo7(() => {
22899
22047
  const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
22900
22048
  return items.map((item, index) => {
22901
22049
  let status = "queued";
@@ -22907,8 +22055,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
22907
22055
  return { ...item, status };
22908
22056
  });
22909
22057
  }, [items, inProgressId]);
22910
- return /* @__PURE__ */ jsx138("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
22911
- return /* @__PURE__ */ jsx138(
22058
+ return /* @__PURE__ */ jsx136("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
22059
+ return /* @__PURE__ */ jsx136(
22912
22060
  ProgressListItem,
22913
22061
  {
22914
22062
  status,
@@ -22928,7 +22076,7 @@ var ProgressListItem = ({
22928
22076
  errorLevel = "danger",
22929
22077
  autoEllipsis = false
22930
22078
  }) => {
22931
- const icon = useMemo8(() => {
22079
+ const icon = useMemo7(() => {
22932
22080
  if (error) {
22933
22081
  return warningIcon;
22934
22082
  }
@@ -22939,14 +22087,14 @@ var ProgressListItem = ({
22939
22087
  };
22940
22088
  return iconPerStatus[status];
22941
22089
  }, [status, error]);
22942
- const statusStyles = useMemo8(() => {
22090
+ const statusStyles = useMemo7(() => {
22943
22091
  if (error) {
22944
- return errorLevel === "caution" ? css103`
22092
+ return errorLevel === "caution" ? css101`
22945
22093
  color: rgb(161, 98, 7);
22946
22094
  & svg {
22947
22095
  color: rgb(250, 204, 21);
22948
22096
  }
22949
- ` : css103`
22097
+ ` : css101`
22950
22098
  color: rgb(185, 28, 28);
22951
22099
  & svg {
22952
22100
  color: var(--brand-primary-2);
@@ -22954,38 +22102,38 @@ var ProgressListItem = ({
22954
22102
  `;
22955
22103
  }
22956
22104
  const colorPerStatus = {
22957
- completed: css103`
22105
+ completed: css101`
22958
22106
  opacity: 0.75;
22959
22107
  `,
22960
- inProgress: css103`
22108
+ inProgress: css101`
22961
22109
  -webkit-text-stroke-width: thin;
22962
22110
  `,
22963
- queued: css103`
22111
+ queued: css101`
22964
22112
  opacity: 0.5;
22965
22113
  `
22966
22114
  };
22967
22115
  return colorPerStatus[status];
22968
22116
  }, [status, error, errorLevel]);
22969
- return /* @__PURE__ */ jsxs92("li", { css: [progressListItemStyles, statusStyles], children: [
22970
- /* @__PURE__ */ jsx138(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx138("div", { children: /* @__PURE__ */ jsx138(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
22971
- /* @__PURE__ */ jsxs92("div", { children: [
22117
+ return /* @__PURE__ */ jsxs90("li", { css: [progressListItemStyles, statusStyles], children: [
22118
+ /* @__PURE__ */ jsx136(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx136("div", { children: /* @__PURE__ */ jsx136(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
22119
+ /* @__PURE__ */ jsxs90("div", { children: [
22972
22120
  children,
22973
- /* @__PURE__ */ jsx138("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
22121
+ /* @__PURE__ */ jsx136("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
22974
22122
  ] })
22975
22123
  ] });
22976
22124
  };
22977
22125
 
22978
22126
  // src/components/SegmentedControl/SegmentedControl.tsx
22979
- import { css as css105 } from "@emotion/react";
22127
+ import { css as css103 } from "@emotion/react";
22980
22128
  import { CgCheck as CgCheck5 } from "@react-icons/all-files/cg/CgCheck";
22981
- import { useCallback as useCallback14, useEffect as useEffect24, useMemo as useMemo9, useRef as useRef13, useState as useState21 } from "react";
22129
+ import { useCallback as useCallback12, useEffect as useEffect22, useMemo as useMemo8, useRef as useRef13, useState as useState18 } from "react";
22982
22130
 
22983
22131
  // src/components/SegmentedControl/SegmentedControl.styles.ts
22984
- import { css as css104 } from "@emotion/react";
22985
- var segmentedControlRootStyles = css104`
22132
+ import { css as css102 } from "@emotion/react";
22133
+ var segmentedControlRootStyles = css102`
22986
22134
  position: relative;
22987
22135
  `;
22988
- var segmentedControlScrollIndicatorsStyles = css104`
22136
+ var segmentedControlScrollIndicatorsStyles = css102`
22989
22137
  position: absolute;
22990
22138
  inset: 0;
22991
22139
  z-index: 1;
@@ -23013,17 +22161,17 @@ var segmentedControlScrollIndicatorsStyles = css104`
23013
22161
  background: linear-gradient(to left, var(--background-color) 10%, transparent);
23014
22162
  }
23015
22163
  `;
23016
- var segmentedControlScrollIndicatorStartVisibleStyles = css104`
22164
+ var segmentedControlScrollIndicatorStartVisibleStyles = css102`
23017
22165
  &::before {
23018
22166
  opacity: 1;
23019
22167
  }
23020
22168
  `;
23021
- var segmentedControlScrollIndicatorEndVisibleStyles = css104`
22169
+ var segmentedControlScrollIndicatorEndVisibleStyles = css102`
23022
22170
  &::after {
23023
22171
  opacity: 1;
23024
22172
  }
23025
22173
  `;
23026
- var segmentedControlWrapperStyles = css104`
22174
+ var segmentedControlWrapperStyles = css102`
23027
22175
  overflow-y: auto;
23028
22176
  scroll-behavior: smooth;
23029
22177
  scrollbar-width: none;
@@ -23032,7 +22180,7 @@ var segmentedControlWrapperStyles = css104`
23032
22180
  height: 0px;
23033
22181
  }
23034
22182
  `;
23035
- var segmentedControlStyles = css104`
22183
+ var segmentedControlStyles = css102`
23036
22184
  --segmented-control-rounded-value: var(--rounded-base);
23037
22185
  --segmented-control-border-width: 1px;
23038
22186
  --segmented-control-selected-color: var(--brand-secondary-3);
@@ -23051,14 +22199,14 @@ var segmentedControlStyles = css104`
23051
22199
  border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
23052
22200
  font-size: var(--fs-xs);
23053
22201
  `;
23054
- var segmentedControlVerticalStyles = css104`
22202
+ var segmentedControlVerticalStyles = css102`
23055
22203
  flex-direction: column;
23056
22204
  --segmented-control-first-border-radius: var(--segmented-control-rounded-value)
23057
22205
  var(--segmented-control-rounded-value) 0 0;
23058
22206
  --segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
23059
22207
  var(--segmented-control-rounded-value);
23060
22208
  `;
23061
- var segmentedControlItemStyles = css104`
22209
+ var segmentedControlItemStyles = css102`
23062
22210
  &:first-of-type label {
23063
22211
  border-radius: var(--segmented-control-first-border-radius);
23064
22212
  }
@@ -23066,10 +22214,10 @@ var segmentedControlItemStyles = css104`
23066
22214
  border-radius: var(--segmented-control-last-border-radius);
23067
22215
  }
23068
22216
  `;
23069
- var segmentedControlInputStyles = css104`
22217
+ var segmentedControlInputStyles = css102`
23070
22218
  ${accessibleHidden}
23071
22219
  `;
23072
- var segmentedControlLabelStyles = (checked, disabled2) => css104`
22220
+ var segmentedControlLabelStyles = (checked, disabled2) => css102`
23073
22221
  position: relative;
23074
22222
  display: flex;
23075
22223
  align-items: center;
@@ -23136,25 +22284,25 @@ var segmentedControlLabelStyles = (checked, disabled2) => css104`
23136
22284
  `}
23137
22285
  }
23138
22286
  `;
23139
- var segmentedControlLabelIconOnlyStyles = css104`
22287
+ var segmentedControlLabelIconOnlyStyles = css102`
23140
22288
  padding-inline: 0.5em;
23141
22289
  `;
23142
- var segmentedControlLabelCheckStyles = css104`
22290
+ var segmentedControlLabelCheckStyles = css102`
23143
22291
  opacity: 0.5;
23144
22292
  `;
23145
- var segmentedControlLabelContentStyles = css104`
22293
+ var segmentedControlLabelContentStyles = css102`
23146
22294
  display: flex;
23147
22295
  align-items: center;
23148
22296
  justify-content: center;
23149
22297
  gap: var(--spacing-sm);
23150
22298
  height: 100%;
23151
22299
  `;
23152
- var segmentedControlLabelTextStyles = css104`
22300
+ var segmentedControlLabelTextStyles = css102`
23153
22301
  white-space: nowrap;
23154
22302
  `;
23155
22303
 
23156
22304
  // src/components/SegmentedControl/SegmentedControl.tsx
23157
- import { jsx as jsx139, jsxs as jsxs93 } from "@emotion/react/jsx-runtime";
22305
+ import { jsx as jsx137, jsxs as jsxs91 } from "@emotion/react/jsx-runtime";
23158
22306
  var SegmentedControl = ({
23159
22307
  name,
23160
22308
  options,
@@ -23170,9 +22318,9 @@ var SegmentedControl = ({
23170
22318
  ...props
23171
22319
  }) => {
23172
22320
  const wrapperRef = useRef13(null);
23173
- const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = useState21(false);
23174
- const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = useState21(false);
23175
- const onOptionChange = useCallback14(
22321
+ const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = useState18(false);
22322
+ const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = useState18(false);
22323
+ const onOptionChange = useCallback12(
23176
22324
  (event) => {
23177
22325
  if (event.target.checked) {
23178
22326
  onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
@@ -23180,19 +22328,19 @@ var SegmentedControl = ({
23180
22328
  },
23181
22329
  [options, onChange]
23182
22330
  );
23183
- const sizeStyles = useMemo9(() => {
22331
+ const sizeStyles = useMemo8(() => {
23184
22332
  const map = {
23185
- sm: css105({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
23186
- md: css105({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
23187
- lg: css105({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
23188
- xl: css105({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
22333
+ sm: css103({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
22334
+ md: css103({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
22335
+ lg: css103({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
22336
+ xl: css103({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
23189
22337
  };
23190
22338
  return map[size];
23191
22339
  }, [size]);
23192
- const isIconOnly = useMemo9(() => {
22340
+ const isIconOnly = useMemo8(() => {
23193
22341
  return options.every((option) => option && option.icon && !option.label);
23194
22342
  }, [options]);
23195
- useEffect24(() => {
22343
+ useEffect22(() => {
23196
22344
  const wrapperElement = wrapperRef.current;
23197
22345
  const onScroll = () => {
23198
22346
  if (!wrapperElement) {
@@ -23213,8 +22361,8 @@ var SegmentedControl = ({
23213
22361
  wrapperElement == null ? void 0 : wrapperElement.removeEventListener("scroll", onScroll);
23214
22362
  };
23215
22363
  }, []);
23216
- return /* @__PURE__ */ jsxs93("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
23217
- /* @__PURE__ */ jsx139("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ jsx139(
22364
+ return /* @__PURE__ */ jsxs91("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
22365
+ /* @__PURE__ */ jsx137("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ jsx137(
23218
22366
  "div",
23219
22367
  {
23220
22368
  css: [
@@ -23230,12 +22378,12 @@ var SegmentedControl = ({
23230
22378
  }
23231
22379
  const text = option.label ? option.label : option.icon ? null : String(option.value);
23232
22380
  const isDisabled = disabled2 || option.disabled;
23233
- return /* @__PURE__ */ jsx139(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx139(
22381
+ return /* @__PURE__ */ jsx137(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx137(
23234
22382
  "div",
23235
22383
  {
23236
22384
  css: segmentedControlItemStyles,
23237
22385
  "data-testid": option["data-testid"] ? option["data-testid"] : "container-segmented-control",
23238
- children: /* @__PURE__ */ jsxs93(
22386
+ children: /* @__PURE__ */ jsxs91(
23239
22387
  "label",
23240
22388
  {
23241
22389
  css: [
@@ -23244,7 +22392,7 @@ var SegmentedControl = ({
23244
22392
  isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
23245
22393
  ],
23246
22394
  children: [
23247
- /* @__PURE__ */ jsx139(
22395
+ /* @__PURE__ */ jsx137(
23248
22396
  "input",
23249
22397
  {
23250
22398
  css: segmentedControlInputStyles,
@@ -23256,10 +22404,10 @@ var SegmentedControl = ({
23256
22404
  disabled: isDisabled
23257
22405
  }
23258
22406
  ),
23259
- option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx139(CgCheck5, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
23260
- /* @__PURE__ */ jsxs93("span", { css: segmentedControlLabelContentStyles, children: [
23261
- !option.icon ? null : /* @__PURE__ */ jsx139(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
23262
- !text || hideOptionText ? null : /* @__PURE__ */ jsx139("span", { css: segmentedControlLabelTextStyles, children: text })
22407
+ option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx137(CgCheck5, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
22408
+ /* @__PURE__ */ jsxs91("span", { css: segmentedControlLabelContentStyles, children: [
22409
+ !option.icon ? null : /* @__PURE__ */ jsx137(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
22410
+ !text || hideOptionText ? null : /* @__PURE__ */ jsx137("span", { css: segmentedControlLabelTextStyles, children: text })
23263
22411
  ] })
23264
22412
  ]
23265
22413
  }
@@ -23269,7 +22417,7 @@ var SegmentedControl = ({
23269
22417
  })
23270
22418
  }
23271
22419
  ) }),
23272
- /* @__PURE__ */ jsx139(
22420
+ /* @__PURE__ */ jsx137(
23273
22421
  "div",
23274
22422
  {
23275
22423
  css: [
@@ -23283,18 +22431,18 @@ var SegmentedControl = ({
23283
22431
  };
23284
22432
 
23285
22433
  // src/components/Skeleton/Skeleton.styles.ts
23286
- import { css as css106, keyframes as keyframes5 } from "@emotion/react";
22434
+ import { css as css104, keyframes as keyframes5 } from "@emotion/react";
23287
22435
  var lightFadingOut = keyframes5`
23288
22436
  from { opacity: 0.1; }
23289
22437
  to { opacity: 0.025; }
23290
22438
  `;
23291
- var skeletonStyles = css106`
22439
+ var skeletonStyles = css104`
23292
22440
  animation: ${lightFadingOut} 1s ease-out infinite alternate;
23293
22441
  background-color: var(--gray-900);
23294
22442
  `;
23295
22443
 
23296
22444
  // src/components/Skeleton/Skeleton.tsx
23297
- import { jsx as jsx140 } from "@emotion/react/jsx-runtime";
22445
+ import { jsx as jsx138 } from "@emotion/react/jsx-runtime";
23298
22446
  var Skeleton = ({
23299
22447
  width = "100%",
23300
22448
  height = "1.25rem",
@@ -23302,7 +22450,7 @@ var Skeleton = ({
23302
22450
  circle = false,
23303
22451
  children,
23304
22452
  ...otherProps
23305
- }) => /* @__PURE__ */ jsx140(
22453
+ }) => /* @__PURE__ */ jsx138(
23306
22454
  "div",
23307
22455
  {
23308
22456
  css: [
@@ -23322,11 +22470,11 @@ var Skeleton = ({
23322
22470
  );
23323
22471
 
23324
22472
  // src/components/Switch/Switch.tsx
23325
- import { forwardRef as forwardRef26 } from "react";
22473
+ import { forwardRef as forwardRef25 } from "react";
23326
22474
 
23327
22475
  // src/components/Switch/Switch.styles.ts
23328
- import { css as css107 } from "@emotion/react";
23329
- var SwitchInputContainer = css107`
22476
+ import { css as css105 } from "@emotion/react";
22477
+ var SwitchInputContainer = css105`
23330
22478
  cursor: pointer;
23331
22479
  display: inline-block;
23332
22480
  position: relative;
@@ -23335,7 +22483,7 @@ var SwitchInputContainer = css107`
23335
22483
  vertical-align: middle;
23336
22484
  user-select: none;
23337
22485
  `;
23338
- var SwitchInput = (size) => css107`
22486
+ var SwitchInput = (size) => css105`
23339
22487
  appearance: none;
23340
22488
  border-radius: var(--rounded-full);
23341
22489
  background-color: var(--white);
@@ -23374,7 +22522,7 @@ var SwitchInput = (size) => css107`
23374
22522
  cursor: not-allowed;
23375
22523
  }
23376
22524
  `;
23377
- var SwitchInputDisabled = css107`
22525
+ var SwitchInputDisabled = css105`
23378
22526
  opacity: var(--opacity-50);
23379
22527
  cursor: not-allowed;
23380
22528
 
@@ -23382,7 +22530,7 @@ var SwitchInputDisabled = css107`
23382
22530
  cursor: not-allowed;
23383
22531
  }
23384
22532
  `;
23385
- var SwitchInputLabel = (size) => css107`
22533
+ var SwitchInputLabel = (size) => css105`
23386
22534
  align-items: center;
23387
22535
  color: var(--typography-base);
23388
22536
  display: inline-flex;
@@ -23404,32 +22552,32 @@ var SwitchInputLabel = (size) => css107`
23404
22552
  top: 0;
23405
22553
  }
23406
22554
  `;
23407
- var SwitchText = (size) => css107`
22555
+ var SwitchText = (size) => css105`
23408
22556
  color: var(--gray-500);
23409
22557
  font-size: var(--fs-sm);
23410
22558
  padding-inline: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"} 0;
23411
22559
  `;
23412
22560
 
23413
22561
  // src/components/Switch/Switch.tsx
23414
- import { Fragment as Fragment22, jsx as jsx141, jsxs as jsxs94 } from "@emotion/react/jsx-runtime";
23415
- var Switch = forwardRef26(
22562
+ import { Fragment as Fragment21, jsx as jsx139, jsxs as jsxs92 } from "@emotion/react/jsx-runtime";
22563
+ var Switch = forwardRef25(
23416
22564
  ({ label, infoText, toggleText, children, switchSize = "base", ...inputProps }, ref) => {
23417
22565
  let additionalText = infoText;
23418
22566
  if (infoText && toggleText) {
23419
22567
  additionalText = inputProps.checked ? toggleText : infoText;
23420
22568
  }
23421
- return /* @__PURE__ */ jsxs94(Fragment22, { children: [
23422
- /* @__PURE__ */ jsxs94(
22569
+ return /* @__PURE__ */ jsxs92(Fragment21, { children: [
22570
+ /* @__PURE__ */ jsxs92(
23423
22571
  "label",
23424
22572
  {
23425
22573
  css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0],
23426
22574
  children: [
23427
- /* @__PURE__ */ jsx141("input", { type: "checkbox", css: SwitchInput(switchSize), ...inputProps, ref }),
23428
- /* @__PURE__ */ jsx141("span", { css: SwitchInputLabel(switchSize), children: label })
22575
+ /* @__PURE__ */ jsx139("input", { type: "checkbox", css: SwitchInput(switchSize), ...inputProps, ref }),
22576
+ /* @__PURE__ */ jsx139("span", { css: SwitchInputLabel(switchSize), children: label })
23429
22577
  ]
23430
22578
  }
23431
22579
  ),
23432
- additionalText ? /* @__PURE__ */ jsx141("p", { css: SwitchText(switchSize), children: additionalText }) : null,
22580
+ additionalText ? /* @__PURE__ */ jsx139("p", { css: SwitchText(switchSize), children: additionalText }) : null,
23433
22581
  children
23434
22582
  ] });
23435
22583
  }
@@ -23439,8 +22587,8 @@ var Switch = forwardRef26(
23439
22587
  import * as React24 from "react";
23440
22588
 
23441
22589
  // src/components/Table/Table.styles.ts
23442
- import { css as css108 } from "@emotion/react";
23443
- var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => css108`
22590
+ import { css as css106 } from "@emotion/react";
22591
+ var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => css106`
23444
22592
  border-bottom: 1px solid var(--gray-400);
23445
22593
  border-collapse: collapse;
23446
22594
  min-width: 100%;
@@ -23460,54 +22608,54 @@ var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => css108`
23460
22608
  background-color: var(--gray-50);
23461
22609
  }
23462
22610
  `;
23463
- var tableHead = css108`
22611
+ var tableHead = css106`
23464
22612
  color: var(--typography-base);
23465
22613
  text-align: left;
23466
22614
  `;
23467
- var tableRow = css108`
22615
+ var tableRow = css106`
23468
22616
  border-bottom: 1px solid var(--gray-100);
23469
22617
  `;
23470
- var tableCellHead = css108`
22618
+ var tableCellHead = css106`
23471
22619
  font-size: var(--fs-sm);
23472
22620
  text-transform: uppercase;
23473
22621
  font-weight: var(--fw-bold);
23474
22622
  `;
23475
22623
 
23476
22624
  // src/components/Table/Table.tsx
23477
- import { jsx as jsx142 } from "@emotion/react/jsx-runtime";
22625
+ import { jsx as jsx140 } from "@emotion/react/jsx-runtime";
23478
22626
  var Table = React24.forwardRef(
23479
22627
  ({ children, cellPadding, ...otherProps }, ref) => {
23480
- return /* @__PURE__ */ jsx142("table", { ref, css: table({ cellPadding }), ...otherProps, children });
22628
+ return /* @__PURE__ */ jsx140("table", { ref, css: table({ cellPadding }), ...otherProps, children });
23481
22629
  }
23482
22630
  );
23483
22631
  var TableHead = React24.forwardRef(
23484
22632
  ({ children, ...otherProps }, ref) => {
23485
- return /* @__PURE__ */ jsx142("thead", { ref, css: tableHead, ...otherProps, children });
22633
+ return /* @__PURE__ */ jsx140("thead", { ref, css: tableHead, ...otherProps, children });
23486
22634
  }
23487
22635
  );
23488
22636
  var TableBody = React24.forwardRef(
23489
22637
  ({ children, ...otherProps }, ref) => {
23490
- return /* @__PURE__ */ jsx142("tbody", { ref, ...otherProps, children });
22638
+ return /* @__PURE__ */ jsx140("tbody", { ref, ...otherProps, children });
23491
22639
  }
23492
22640
  );
23493
22641
  var TableFoot = React24.forwardRef(
23494
22642
  ({ children, ...otherProps }, ref) => {
23495
- return /* @__PURE__ */ jsx142("tfoot", { ref, ...otherProps, children });
22643
+ return /* @__PURE__ */ jsx140("tfoot", { ref, ...otherProps, children });
23496
22644
  }
23497
22645
  );
23498
22646
  var TableRow = React24.forwardRef(
23499
22647
  ({ children, ...otherProps }, ref) => {
23500
- return /* @__PURE__ */ jsx142("tr", { ref, css: tableRow, ...otherProps, children });
22648
+ return /* @__PURE__ */ jsx140("tr", { ref, css: tableRow, ...otherProps, children });
23501
22649
  }
23502
22650
  );
23503
22651
  var TableCellHead = React24.forwardRef(
23504
22652
  ({ children, ...otherProps }, ref) => {
23505
- return /* @__PURE__ */ jsx142("th", { ref, css: tableCellHead, ...otherProps, children });
22653
+ return /* @__PURE__ */ jsx140("th", { ref, css: tableCellHead, ...otherProps, children });
23506
22654
  }
23507
22655
  );
23508
22656
  var TableCellData = React24.forwardRef(
23509
22657
  ({ children, ...otherProps }, ref) => {
23510
- return /* @__PURE__ */ jsx142("td", { ref, ...otherProps, children });
22658
+ return /* @__PURE__ */ jsx140("td", { ref, ...otherProps, children });
23511
22659
  }
23512
22660
  );
23513
22661
 
@@ -23519,11 +22667,11 @@ import {
23519
22667
  TabProvider as AriakitTabProvider,
23520
22668
  useTabStore as useAriakitTabStore
23521
22669
  } from "@ariakit/react";
23522
- import { useCallback as useCallback15, useEffect as useEffect25, useMemo as useMemo10 } from "react";
22670
+ import { useCallback as useCallback13, useEffect as useEffect23, useMemo as useMemo9 } from "react";
23523
22671
 
23524
22672
  // src/components/Tabs/Tabs.styles.ts
23525
- import { css as css109 } from "@emotion/react";
23526
- var tabButtonStyles = css109`
22673
+ import { css as css107 } from "@emotion/react";
22674
+ var tabButtonStyles = css107`
23527
22675
  align-items: center;
23528
22676
  border: 0;
23529
22677
  height: 2.5rem;
@@ -23540,14 +22688,14 @@ var tabButtonStyles = css109`
23540
22688
  box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
23541
22689
  }
23542
22690
  `;
23543
- var tabButtonGroupStyles = css109`
22691
+ var tabButtonGroupStyles = css107`
23544
22692
  display: flex;
23545
22693
  gap: var(--spacing-base);
23546
22694
  border-bottom: 1px solid var(--gray-300);
23547
22695
  `;
23548
22696
 
23549
22697
  // src/components/Tabs/Tabs.tsx
23550
- import { jsx as jsx143 } from "@emotion/react/jsx-runtime";
22698
+ import { jsx as jsx141 } from "@emotion/react/jsx-runtime";
23551
22699
  var useCurrentTab = () => {
23552
22700
  const context = useAriakitTabStore();
23553
22701
  if (!context) {
@@ -23563,12 +22711,12 @@ var Tabs = ({
23563
22711
  manual,
23564
22712
  ...props
23565
22713
  }) => {
23566
- const selected = useMemo10(() => {
22714
+ const selected = useMemo9(() => {
23567
22715
  if (selectedId) return selectedId;
23568
22716
  return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
23569
22717
  }, [selectedId, useHashForState]);
23570
22718
  const tab = useAriakitTabStore({ ...props, selectOnMove: !manual, selectedId: selected });
23571
- const onTabSelect = useCallback15(
22719
+ const onTabSelect = useCallback13(
23572
22720
  (value) => {
23573
22721
  const selectedValueWithoutNull = value != null ? value : void 0;
23574
22722
  onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -23579,33 +22727,33 @@ var Tabs = ({
23579
22727
  },
23580
22728
  [onSelectedIdChange, useHashForState]
23581
22729
  );
23582
- useEffect25(() => {
22730
+ useEffect23(() => {
23583
22731
  if (selected && selected !== tab.getState().activeId) {
23584
22732
  tab.setSelectedId(selected);
23585
22733
  }
23586
22734
  }, [selected, tab]);
23587
- return /* @__PURE__ */ jsx143(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
22735
+ return /* @__PURE__ */ jsx141(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
23588
22736
  };
23589
22737
  var TabButtonGroup = ({ children, ...props }) => {
23590
- return /* @__PURE__ */ jsx143(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
22738
+ return /* @__PURE__ */ jsx141(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
23591
22739
  };
23592
22740
  var TabButton = ({
23593
22741
  children,
23594
22742
  id,
23595
22743
  ...props
23596
22744
  }) => {
23597
- return /* @__PURE__ */ jsx143(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
22745
+ return /* @__PURE__ */ jsx141(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
23598
22746
  };
23599
22747
  var TabContent = ({
23600
22748
  children,
23601
22749
  ...props
23602
22750
  }) => {
23603
- return /* @__PURE__ */ jsx143(AriakitTabPanel, { ...props, children });
22751
+ return /* @__PURE__ */ jsx141(AriakitTabPanel, { ...props, children });
23604
22752
  };
23605
22753
 
23606
22754
  // src/components/Validation/StatusBullet.styles.ts
23607
- import { css as css110 } from "@emotion/react";
23608
- var StatusBulletContainer = css110`
22755
+ import { css as css108 } from "@emotion/react";
22756
+ var StatusBulletContainer = css108`
23609
22757
  align-items: center;
23610
22758
  align-self: center;
23611
22759
  color: var(--gray-500);
@@ -23622,33 +22770,33 @@ var StatusBulletContainer = css110`
23622
22770
  display: block;
23623
22771
  }
23624
22772
  `;
23625
- var StatusBulletBase = css110`
22773
+ var StatusBulletBase = css108`
23626
22774
  font-size: var(--fs-sm);
23627
22775
  &:before {
23628
22776
  width: var(--fs-xs);
23629
22777
  height: var(--fs-xs);
23630
22778
  }
23631
22779
  `;
23632
- var StatusBulletSmall = css110`
22780
+ var StatusBulletSmall = css108`
23633
22781
  font-size: var(--fs-xs);
23634
22782
  &:before {
23635
22783
  width: var(--fs-xxs);
23636
22784
  height: var(--fs-xxs);
23637
22785
  }
23638
22786
  `;
23639
- var StatusDraft = css110`
22787
+ var StatusDraft = css108`
23640
22788
  &:before {
23641
22789
  background: var(--white);
23642
22790
  box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
23643
22791
  }
23644
22792
  `;
23645
- var StatusModified = css110`
22793
+ var StatusModified = css108`
23646
22794
  &:before {
23647
22795
  background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
23648
22796
  box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
23649
22797
  }
23650
22798
  `;
23651
- var StatusError = css110`
22799
+ var StatusError = css108`
23652
22800
  color: var(--error);
23653
22801
  &:before {
23654
22802
  /* TODO: replace this with an svg icon */
@@ -23661,29 +22809,29 @@ var StatusError = css110`
23661
22809
  );
23662
22810
  }
23663
22811
  `;
23664
- var StatusPublished = css110`
22812
+ var StatusPublished = css108`
23665
22813
  &:before {
23666
22814
  background: var(--accent-dark);
23667
22815
  }
23668
22816
  `;
23669
- var StatusOrphan = css110`
22817
+ var StatusOrphan = css108`
23670
22818
  &:before {
23671
22819
  background: var(--brand-secondary-5);
23672
22820
  }
23673
22821
  `;
23674
- var StatusUnknown = css110`
22822
+ var StatusUnknown = css108`
23675
22823
  &:before {
23676
22824
  background: var(--gray-800);
23677
22825
  }
23678
22826
  `;
23679
- var StatusDeleted = css110`
22827
+ var StatusDeleted = css108`
23680
22828
  &:before {
23681
22829
  background: var(--error);
23682
22830
  }
23683
22831
  `;
23684
22832
 
23685
22833
  // src/components/Validation/StatusBullet.tsx
23686
- import { jsx as jsx144 } from "@emotion/react/jsx-runtime";
22834
+ import { jsx as jsx142 } from "@emotion/react/jsx-runtime";
23687
22835
  var StatusBullet = ({
23688
22836
  status,
23689
22837
  hideText = false,
@@ -23703,7 +22851,7 @@ var StatusBullet = ({
23703
22851
  Deleted: StatusDeleted
23704
22852
  };
23705
22853
  const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
23706
- return /* @__PURE__ */ jsx144(
22854
+ return /* @__PURE__ */ jsx142(
23707
22855
  "span",
23708
22856
  {
23709
22857
  role: "status",