@uniformdev/design-system 20.50.2-alpha.109 → 20.50.2-alpha.146

package/dist/esm/index.js

@@ -1,4 +1,5 @@
-import "./chunk-6NI3O2RY.js";
+'use client';
+import "./chunk-ZICJ6DRF.js";
 
 // src/styles/Theme.tsx
 import { Fragment, jsx as jsx2, jsxs } from "@emotion/react/jsx-runtime";
@@ -897,6 +898,62 @@ var BetaDecorator = (Story) => /* @__PURE__ */ jsxs5(VerticalRhythm, { children:
   /* @__PURE__ */ jsx10(Story, {})
 ] });
 
+// src/components/utils/nativeButton.ts
+import * as React2 from "react";
+
+// src/components/utils/suppressBaseUiNativeButtonWarning.ts
+var NATIVE_BUTTON_WARNING_MARKER = "acts as a button expected";
+var INSTALLED_FLAG = Symbol.for("uniform.designSystem.baseUiNativeButtonWarningFilterInstalled");
+function installBaseUiNativeButtonWarningFilter() {
+  if (process.env.NODE_ENV === "production") {
+    return;
+  }
+  const globalScope = globalThis;
+  if (globalScope[INSTALLED_FLAG]) {
+    return;
+  }
+  globalScope[INSTALLED_FLAG] = true;
+  const originalConsoleError = console.error;
+  console.error = function filteredConsoleError(...args) {
+    if (typeof args[0] === "string" && args[0].includes(NATIVE_BUTTON_WARNING_MARKER)) {
+      return;
+    }
+    originalConsoleError.apply(console, args);
+  };
+}
+
+// src/components/utils/nativeButton.ts
+installBaseUiNativeButtonWarningFilter();
+function markNativeButton(component) {
+  component.renderNativeButton = true;
+  return component;
+}
+function isNativeButtonTrigger(element) {
+  if (!React2.isValidElement(element)) {
+    return false;
+  }
+  if (element.type === "button") {
+    return true;
+  }
+  if (typeof element.type !== "string") {
+    if (element.type.renderNativeButton) {
+      return true;
+    }
+    const props = element.props;
+    if ((props == null ? void 0 : props.type) === "button") {
+      return true;
+    }
+    const emotionType = props == null ? void 0 : props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__;
+    if (emotionType === "button") {
+      return true;
+    }
+    if (emotionType && typeof emotionType !== "string" && emotionType.renderNativeButton) {
+      return true;
+    }
+  }
+  return false;
+}
+
 // src/utils/debounce.ts
 var debounce = (fn, ms = 300) => {
   let timeoutId;
@@ -1241,7 +1298,7 @@ import { GenIcon } from "@react-icons/all-files";
 import { MdSettings } from "@react-icons/all-files/md/MdSettings";
 
 // src/components/Icons/Icon.tsx
-import React2 from "react";
+import React3 from "react";
 
 // src/components/Icons/Icon.styles.ts
 import { css as css11 } from "@emotion/react";
@@ -1305,7 +1362,7 @@ function IconsProvider({ children }) {
   const [isLoading, setIsLoading] = useState(true);
   const [iconsMap, setIconsMap] = useState({});
   const initializeIconsMap = async () => {
-    const { importedIcons } = await import("./importedIcons-NFIA4IOK.js");
+    const { importedIcons } = await import("./importedIcons-ZMQQFG4N.js");
     setIconsMap({ ...importedIcons, ...customIcons });
     setIsLoading(false);
   };
@@ -1354,7 +1411,7 @@ var IconInner = ({ icon, iconColor = "default", size = "1.5rem", ...otherProps }
     }
   );
 };
-var Icon = React2.memo(IconInner);
+var Icon = React3.memo(IconInner);
 
 // src/components/Icons/customIcons.tsx
 import { jsx as jsx13 } from "@emotion/react/jsx-runtime";
@@ -3199,31 +3256,6 @@ function Tooltip({
   ] });
 }
 
-// src/components/utils/nativeButton.ts
-import * as React4 from "react";
-function markNativeButton(component) {
-  component.renderNativeButton = true;
-  return component;
-}
-function isNativeButtonTrigger(element) {
-  var _a;
-  if (!React4.isValidElement(element)) {
-    return false;
-  }
-  if (element.type === "button") {
-    return true;
-  }
-  if (typeof element.type !== "string") {
-    if (element.type.renderNativeButton) {
-      return true;
-    }
-    if (((_a = element.props) == null ? void 0 : _a.type) === "button") {
-      return true;
-    }
-  }
-  return false;
-}
-
 // src/components/Button/hooks/useButtonStyles.ts
 var btnSize = {
   zero: "padding: 0; font-size: var(--fs-sm);",
@@ -5187,7 +5219,15 @@ var Menu = React8.forwardRef(function Menu2({
   );
   if (isNested) {
     return /* @__PURE__ */ jsxs17(BaseUIMenu.SubmenuRoot, { open: controlledOpen, onOpenChange: handleOpenChange, disabled: disabled2, children: [
-      /* @__PURE__ */ jsx28(SubmenuTriggerModeContext.Provider, { value: true, children: /* @__PURE__ */ jsx28(BaseUIMenu.SubmenuTrigger, { render: submenuTriggerElement, disabled: disabled2, closeDelay: 100 }) }),
+      /* @__PURE__ */ jsx28(SubmenuTriggerModeContext.Provider, { value: true, children: /* @__PURE__ */ jsx28(
+        BaseUIMenu.SubmenuTrigger,
+        {
+          render: submenuTriggerElement,
+          disabled: disabled2,
+          closeDelay: 100,
+          nativeButton: isNativeButtonTrigger(submenuTriggerElement)
+        }
+      ) }),
       /* @__PURE__ */ jsx28(BaseUIMenu.Portal, { container: portalContainer, children: menuContent })
     ] });
   }
@@ -5263,6 +5303,7 @@ var MenuItem = React9.forwardRef(
         css: [menuItem(textColor2, active2), typeof className === "object" ? className : void 0],
         className: typeof className === "string" ? className : void 0,
         render,
+        nativeButton: isNativeButtonTrigger(render),
         ...props,
         onClick: onClickHandler,
         disabled: disabledValue,
@@ -7482,8 +7523,20 @@ var PageHeaderSection = ({
   level = 2,
   linkProps,
   linkManagerComponent,
+  afterTitle,
+  afterTitleGap = "sm",
+  afterTitleAlign = "center",
   ...htmlProps
 }) => {
+  const HeaderContent = () => {
+    if (afterTitle) {
+      return /* @__PURE__ */ jsxs37(HorizontalRhythm, { css: PageHeaderSectionTitle, gap: afterTitleGap, align: afterTitleAlign, children: [
+        /* @__PURE__ */ jsx55(Heading2, { level, ...htmlProps, "data-testid": "page-header-section", withMarginBottom: false, children: title }),
+        afterTitle
+      ] });
+    }
+    return /* @__PURE__ */ jsx55(Heading2, { level, css: PageHeaderSectionTitle, ...htmlProps, "data-testid": "page-header-section", children: title });
+  };
   if (linkText && linkProps && !linkManagerComponent) {
     throw Error("You must provide a linkManagerComponent");
   }
@@ -7502,7 +7555,7 @@ var PageHeaderSection = ({
           }
         )
       ] }) : null,
-      /* @__PURE__ */ jsx55(Heading2, { level, css: PageHeaderSectionTitle, ...htmlProps, "data-testid": "page-header-section", children: title }),
+      /* @__PURE__ */ jsx55(HeaderContent, {}),
       desc
     ] }),
     children ? /* @__PURE__ */ jsx55("div", { css: PageHeaderSectionChildContainer, children }) : null
@@ -8844,6 +8897,7 @@ var DateTimePicker = ({
                 render: /* @__PURE__ */ jsx66(Button, { buttonType: "ghostUnimportant" }),
                 disabled: disabled2,
                 "data-testid": `${testId}-trigger`,
+                nativeButton: true,
                 children: /* @__PURE__ */ jsx66(DateTimePickerSummary, { value, placeholder })
               }
             ),
@@ -8963,8 +9017,22 @@ var DescriptionList = React14.forwardRef(
         css: variant === "vertical" ? descriptionListVertical : descriptionListHorizontal,
         ...listProps,
         children: items == null ? void 0 : items.map(({ label: label2, value }) => /* @__PURE__ */ jsxs45(React14.Fragment, { children: [
-          /* @__PURE__ */ jsx67("dt", { css: descriptionListLabelStyles, children: label2 }),
-          /* @__PURE__ */ jsx67("dd", { css: descriptionListValueStyles, children: typeof value === "boolean" ? /* @__PURE__ */ jsx67(DescriptionListValueBoolean, { value }) : value })
+          /* @__PURE__ */ jsx67(
+            "dt",
+            {
+              css: descriptionListLabelStyles,
+              "data-testid": `meta-field-label-${label2.toLowerCase().replace(/\s+/g, "-")}`,
+              children: label2
+            }
+          ),
+          /* @__PURE__ */ jsx67(
+            "dd",
+            {
+              css: descriptionListValueStyles,
+              "data-testid": `meta-field-value-${label2.toLowerCase().replace(/\s+/g, "-")}`,
+              children: typeof value === "boolean" ? /* @__PURE__ */ jsx67(DescriptionListValueBoolean, { value }) : value
+            }
+          )
         ] }, label2))
       }
     );
@@ -9737,10 +9805,12 @@ var variants = {
 
 // src/components/IconButton/IconButton.tsx
 import { jsx as jsx77 } from "@emotion/react/jsx-runtime";
-var IconButton = forwardRef19(
-  ({ children, size = "md", variant = "square", ...props }, ref) => {
-    return /* @__PURE__ */ jsx77(Button, { ref, css: [iconButton, variants[variant], sizes2[size]], ...props, children });
-  }
+var IconButton = markNativeButton(
+  forwardRef19(
+    ({ children, size = "md", variant = "square", ...props }, ref) => {
+      return /* @__PURE__ */ jsx77(Button, { ref, css: [iconButton, variants[variant], sizes2[size]], ...props, children });
+    }
+  )
 );
 IconButton.displayName = "IconButton";
 
@@ -13306,7 +13376,7 @@ var ObjectListItemTitleColumnContent = css89`
 `;
 var objectListItemContentWrapperColumns = (minContainerQueryWidth, hasCover) => css89`
   ${cq(minContainerQueryWidth)} {
-    grid-template-columns: ${hasCover ? "minmax(0, auto) " : ""}minmax (0, 1fr) minmax(0, auto);
+    grid-template-columns: ${hasCover ? "minmax(0, auto) minmax(0, 1fr) minmax(0, auto)" : "minmax(0, 1fr) minmax(0, auto)"};
   }
 `;
 var ObjectListItemRightSlot = css89`
@@ -13314,8 +13384,8 @@ var ObjectListItemRightSlot = css89`
   gap: var(--spacing-sm);
 `;
 var ObjectListItemContainer = css89`
-  > [role='listitem']:not(:first-child) {
-    border-top: 1px solid var(--gray-200);
+  > [role='listitem']:not(:last-child) {
+    border-bottom: 1px solid var(--gray-200);
   }
 `;
 var ObjectListItemCover = css89`
@@ -13615,37 +13685,45 @@ var ObjectListSubText2 = ({ children, ...props }) => {
 import * as React20 from "react";
 import Paginate from "react-paginate";
 
-// src/components/Pagination/Pagniation.styles.ts
-import { css as css92 } from "@emotion/css";
-var wrapper = css92`
+// src/components/Pagination/Pagination.styles.ts
+import { css as css92 } from "@emotion/react";
+var container2 = "ud-pagination-container";
+var disabled = "ud-pagination-disabled";
+var disabledLink = "ud-pagination-disabled-link";
+var pageLink = "ud-pagination-page-link";
+var prevNextControls = "ud-pagination-prev-next";
+var active = "ud-pagination-active";
+var page = "ud-pagination-page";
+var paginationStyles = css92`
   display: inline-flex;
   max-width: 100%;
   overflow-x: auto;
-`;
-var container2 = css92`
-  align-items: center;
-  display: flex;
-`;
-var disabled = css92`
-  opacity: var(--opacity-50);
-`;
-var disabledLink = css92`
-  cursor: pointer-default;
-`;
-var pageLink = css92`
-  display: block;
-  padding: var(--spacing-sm) var(--spacing-base);
-`;
-var prevNextControls = css92`
-  padding: var(--spacing-sm) var(--spacing-base);
-`;
-var active = css92`
-  border-radius: var(--rounded-base);
-  background: var(--gray-200);
-`;
-var page = css92`
-  margin-left: var(--spacing-xs);
-  margin-right: var(--spacing-xs);
+
+  .${container2} {
+    align-items: center;
+    display: flex;
+  }
+  .${container2} .${disabled} {
+    opacity: var(--opacity-50);
+  }
+  .${container2} .${disabledLink} {
+    cursor: pointer-default;
+  }
+  .${container2} .${pageLink} {
+    display: block;
+    padding: var(--spacing-sm) var(--spacing-base);
+  }
+  .${container2} .${prevNextControls} {
+    padding: var(--spacing-sm) var(--spacing-base);
+  }
+  .${container2} .${active} {
+    border-radius: var(--rounded-base);
+    background: var(--gray-200);
+  }
+  .${container2} .${page} {
+    margin-left: var(--spacing-xs);
+    margin-right: var(--spacing-xs);
+  }
 `;
 
 // src/components/Pagination/usePaginationDisplayRange.ts
@@ -13747,7 +13825,7 @@ function Pagination({
   if (limit < 1 || pageCount <= 1) {
     return null;
   }
-  return /* @__PURE__ */ jsx122("div", { ref: containerRef, className: wrapper, children: /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsx122("div", { ref: containerRef, css: paginationStyles, children: /* @__PURE__ */ jsx122(
     Paginate,
     {
       forcePage: currentPage,
@@ -15749,7 +15827,6 @@ ParameterNumberSlider.displayName = "ParameterNumberSlider";
 ParameterNumberSliderInner.displayName = "ParameterNumberSliderInner";
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { css as css107 } from "@emotion/react";
 import { ListItemNode, ListNode as ListNode3 } from "@lexical/list";
 import {
   CODE,
@@ -15931,245 +16008,252 @@ function DisableStylesPlugin() {
 }
 
 // src/components/ParameterInputs/rich-text/editorStyles.ts
-import { css as css102 } from "@emotion/css";
-var textBold = css102`
-  font-weight: 700;
-`;
-var textItalic = css102`
-  font-style: italic;
-`;
-var textUnderline = css102`
-  text-decoration: underline;
-`;
-var textStrikethrough = css102`
-  text-decoration: line-through;
-`;
-var textUnderlineStrikethrough = css102`
-  text-decoration: underline line-through;
-`;
-var textCode = css102`
-  background-color: var(--gray-100);
-  border-radius: var(--rounded-sm);
-  display: inline-block;
-  font-family: var(--ff-mono);
-  font-feature-settings: 'liga' 0;
-  font-variant-ligatures: none;
-  font-size: var(--fs-sm);
-  padding-left: var(--spacing-xs);
-  padding-right: var(--spacing-xs);
-`;
-var textSuperscript = css102`
-  vertical-align: super;
-  font-size: smaller;
-`;
-var textSubscript = css102`
-  vertical-align: sub;
-  font-size: smaller;
-`;
-var linkElement = css102`
-  ${link}
-  ${linkColorDefault}
-  text-decoration: underline;
-`;
-var h12 = css102`
-  font-size: clamp(1.35rem, var(--fluid-font-base), 1.7rem);
-`;
-var h22 = css102`
-  font-size: clamp(1.35rem, var(--fluid-font-base), 1.6rem);
-`;
-var h32 = css102`
-  font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
-`;
-var h42 = css102`
-  font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
-`;
-var h52 = css102`
-  font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
-`;
-var h62 = css102`
-  font-size: var(--fs-base);
-`;
-var heading1Element = css102`
-  ${h12}
-  ${commonHeadingAttr(true)}
-  ${commonLineHeight}
-`;
-var heading2Element = css102`
-  ${h22}
-  ${commonHeadingAttr(true)}
-  ${commonLineHeight}
-`;
-var heading3Element = css102`
-  ${h32}
-  ${commonHeadingAttr(true)}
-  ${commonLineHeight}
-`;
-var heading4Element = css102`
-  ${h42}
-  ${commonHeadingAttr(true)}
-  ${commonLineHeight}
-`;
-var heading5Element = css102`
-  ${h52}
-  ${commonHeadingAttr(true)}
-  ${commonLineHeight}
-`;
-var heading6Element = css102`
-  ${h62}
-  ${commonHeadingAttr(true)}
-  ${commonLineHeight}
-`;
-var paragraphElement = css102`
-  line-height: 1.5;
-  margin-bottom: var(--spacing-base);
-
-  &:last-child {
-    margin-bottom: 0;
+import { css as css102 } from "@emotion/react";
+var textBold = "ud-editor-text-bold";
+var textItalic = "ud-editor-text-italic";
+var textUnderline = "ud-editor-text-underline";
+var textStrikethrough = "ud-editor-text-strikethrough";
+var textUnderlineStrikethrough = "ud-editor-text-underline-strikethrough";
+var textCode = "ud-editor-text-code";
+var textSuperscript = "ud-editor-text-superscript";
+var textSubscript = "ud-editor-text-subscript";
+var linkElement = "ud-editor-link";
+var heading1Element = "ud-editor-h1";
+var heading2Element = "ud-editor-h2";
+var heading3Element = "ud-editor-h3";
+var heading4Element = "ud-editor-h4";
+var heading5Element = "ud-editor-h5";
+var heading6Element = "ud-editor-h6";
+var paragraphElement = "ud-editor-paragraph";
+var orderedListElement = "ud-editor-ol";
+var unorderedListElement = "ud-editor-ul";
+var listItemElement = "ud-editor-listitem";
+var nestedListItemElement = "ud-editor-nested-listitem";
+var blockquoteElement = "ud-editor-blockquote";
+var codeElement = "ud-editor-code";
+var tableElement = "ud-editor-table";
+var tableCellElement = "ud-editor-table-cell";
+var tableHeaderElement = "ud-editor-table-header";
+var editorThemeStyles = css102`
+  .${textBold} {
+    font-weight: 700;
+  }
+  .${textItalic} {
+    font-style: italic;
   }
-`;
-var orderedListElement = css102`
-  ${commonLineHeight}
-  display: block;
-  list-style: decimal;
-  list-style-position: outside;
-  margin-bottom: var(--spacing-base);
-  margin-top: 0;
-  padding: 0;
+  .${textUnderline} {
+    text-decoration: underline;
+  }
+  .${textStrikethrough} {
+    text-decoration: line-through;
+  }
+  .${textUnderlineStrikethrough} {
+    text-decoration: underline line-through;
+  }
+  .${textCode} {
+    background-color: var(--gray-100);
+    border-radius: var(--rounded-sm);
+    display: inline-block;
+    font-family: var(--ff-mono);
+    font-feature-settings: 'liga' 0;
+    font-variant-ligatures: none;
+    font-size: var(--fs-sm);
+    padding-left: var(--spacing-xs);
+    padding-right: var(--spacing-xs);
+  }
+  .${textSuperscript} {
+    vertical-align: super;
+    font-size: smaller;
+  }
+  .${textSubscript} {
+    vertical-align: sub;
+    font-size: smaller;
+  }
+  .${linkElement} {
+    ${link}
+    ${linkColorDefault}
+    text-decoration: underline;
+  }
+  .${heading1Element} {
+    font-size: clamp(1.35rem, var(--fluid-font-base), 1.7rem);
+    ${commonHeadingAttr(true)}
+    ${commonLineHeight}
+  }
+  .${heading2Element} {
+    font-size: clamp(1.35rem, var(--fluid-font-base), 1.6rem);
+    ${commonHeadingAttr(true)}
+    ${commonLineHeight}
+  }
+  .${heading3Element} {
+    font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
+    ${commonHeadingAttr(true)}
+    ${commonLineHeight}
+  }
+  .${heading4Element} {
+    font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
+    ${commonHeadingAttr(true)}
+    ${commonLineHeight}
+  }
+  .${heading5Element} {
+    font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
+    ${commonHeadingAttr(true)}
+    ${commonLineHeight}
+  }
+  .${heading6Element} {
+    font-size: var(--fs-base);
+    ${commonHeadingAttr(true)}
+    ${commonLineHeight}
+  }
+  .${paragraphElement} {
+    line-height: 1.5;
+    margin-bottom: var(--spacing-base);
 
-  &:last-child {
-    margin-bottom: 0;
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
+  .${orderedListElement} {
+    ${commonLineHeight}
+    display: block;
+    list-style: decimal;
+    list-style-position: outside;
+    margin-bottom: var(--spacing-base);
+    margin-top: 0;
+    padding: 0;
 
-  ol {
-    list-style-type: upper-alpha;
+    &:last-child {
+      margin-bottom: 0;
+    }
 
     ol {
-      list-style-type: lower-alpha;
+      list-style-type: upper-alpha;
 
       ol {
-        list-style-type: upper-roman;
+        list-style-type: lower-alpha;
 
         ol {
-          list-style-type: lower-roman;
+          list-style-type: upper-roman;
+
+          ol {
+            list-style-type: lower-roman;
+          }
         }
       }
     }
   }
-`;
-var unorderedListElement = css102`
-  ${commonLineHeight}
-  display: block;
-  list-style: disc;
-  list-style-position: outside;
-  margin-bottom: var(--spacing-base);
-  margin-top: 0;
-  padding: 0;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
+  .${unorderedListElement} {
+    ${commonLineHeight}
+    display: block;
+    list-style: disc;
+    list-style-position: outside;
+    margin-bottom: var(--spacing-base);
+    margin-top: 0;
+    padding: 0;
 
-  ul {
-    list-style-type: circle;
+    &:last-child {
+      margin-bottom: 0;
+    }
 
     ul {
-      list-style-type: square;
+      list-style-type: circle;
+
+      ul {
+        list-style-type: square;
+      }
     }
   }
-`;
-var listItemElement = css102`
-  margin-left: var(--spacing-md);
-`;
-var nestedListItemElement = css102`
-  list-style-type: none;
-`;
-var blockquoteElement = css102`
-  border-left: 0.25rem solid var(--gray-300);
-  color: var(--gray-600);
-  margin-bottom: var(--spacing-base);
-  padding-left: var(--spacing-base);
-
-  &:last-child {
-    margin-bottom: 0;
+  .${listItemElement} {
+    margin-left: var(--spacing-md);
   }
-`;
-var codeElement = css102`
-  background-color: var(--gray-100);
-  border-radius: var(--rounded-sm);
-  display: block;
-  font-family: var(--ff-mono);
-  font-feature-settings: 'liga' 0;
-  font-variant-ligatures: none;
-  font-size: var(--fs-sm);
-  margin-bottom: var(--spacing-base);
-  padding: var(--spacing-sm);
+  .${nestedListItemElement} {
+    list-style-type: none;
+  }
+  .${blockquoteElement} {
+    border-left: 0.25rem solid var(--gray-300);
+    color: var(--gray-600);
+    margin-bottom: var(--spacing-base);
+    padding-left: var(--spacing-base);
 
-  &:last-child {
-    margin-bottom: 0;
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
-`;
-var tableElement = css102`
-  border-collapse: collapse;
-  border-spacing: 0;
-  border-color: var(--gray-300);
-  border-width: 1px;
-  border-style: solid;
-  margin-bottom: var(--spacing-base);
-  margin-top: 0;
+  .${codeElement} {
+    background-color: var(--gray-100);
+    border-radius: var(--rounded-sm);
+    display: block;
+    font-family: var(--ff-mono);
+    font-feature-settings: 'liga' 0;
+    font-variant-ligatures: none;
+    font-size: var(--fs-sm);
+    margin-bottom: var(--spacing-base);
+    padding: var(--spacing-sm);
 
-  &:last-child {
-    margin-bottom: 0;
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
-`;
-var tableCellElement = css102`
-  background-color: var(--white);
-  border-color: var(--gray-300);
-  border-style: solid;
-  border-width: 1px;
-  box-sizing: unset;
-  min-width: 2rem;
-  outline: none;
-  padding: var(--spacing-sm);
-  position: relative;
-  text-align: start;
-  vertical-align: top;
-  width: 7rem;
+  .${tableElement} {
+    border-collapse: collapse;
+    border-spacing: 0;
+    border-color: var(--gray-300);
+    border-width: 1px;
+    border-style: solid;
+    margin-bottom: var(--spacing-base);
+    margin-top: 0;
 
-  /* Used by the table resizer plugin to not change the hovered cell immediately
-  upon going with the mouse over the neighboring cell */
-  &::after {
-    content: '';
-    height: 5px;
-    left: 0;
-    position: absolute;
-    top: 100%;
-    width: 100%;
-    z-index: 1;
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
+  .${tableCellElement} {
+    background-color: var(--white);
+    border-color: var(--gray-300);
+    border-style: solid;
+    border-width: 1px;
+    box-sizing: unset;
+    min-width: 2rem;
+    outline: none;
+    padding: var(--spacing-sm);
+    position: relative;
+    text-align: start;
+    vertical-align: top;
+    width: 7rem;
 
-  &::before {
-    content: '';
-    width: 5px;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 100%;
-    z-index: 1;
+    &::after {
+      content: '';
+      height: 5px;
+      left: 0;
+      position: absolute;
+      top: 100%;
+      width: 100%;
+      z-index: 1;
+    }
+
+    &::before {
+      content: '';
+      width: 5px;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 100%;
+      z-index: 1;
+    }
+  }
+  .${tableHeaderElement} {
+    background-color: var(--gray-100);
+    border-color: var(--gray-300);
+    border-style: solid;
+    border-width: 1px;
+    box-sizing: unset;
+    font-weight: normal;
+    min-width: 2rem;
+    outline: none;
+    padding: var(--spacing-sm);
+    text-align: start;
+    vertical-align: top;
+    width: 7rem;
   }
-`;
-var tableHeaderElement = css102`
-  background-color: var(--gray-100);
-  border-color: var(--gray-300);
-  border-style: solid;
-  border-width: 1px;
-  box-sizing: unset;
-  font-weight: normal;
-  min-width: 2rem;
-  outline: none;
-  padding: var(--spacing-sm);
-  text-align: start;
-  vertical-align: top;
-  width: 7rem;
 `;
 
 // src/components/ParameterInputs/rich-text/ImprovedAssetSelectionPlugin.tsx
@@ -17914,7 +17998,7 @@ var toolbarGroup = css106`
   gap: var(--spacing-xs);
   position: relative;
 
-  &:not(:first-child)::before {
+  &:not(:first-of-type)::before {
     background-color: var(--gray-300);
     content: '';
     display: block;
@@ -18248,41 +18332,8 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
 };
 var RichTextToolbar_default = RichTextToolbar;
 
-// src/components/ParameterInputs/ParameterRichText.tsx
-import { Fragment as Fragment21, jsx as jsx144, jsxs as jsxs97 } from "@emotion/react/jsx-runtime";
-var ParameterRichText = ({
-  label: label2,
-  labelLeadingIcon,
-  hiddenLabel,
-  id,
-  errorMessage,
-  caption,
-  errorTestId,
-  captionTestId,
-  menuItems,
-  children,
-  ...innerProps
-}) => {
-  return /* @__PURE__ */ jsxs97(
-    ParameterShell,
-    {
-      "data-testid": "parameter-richtext",
-      label: label2,
-      hiddenLabel,
-      labelLeadingIcon,
-      id,
-      errorMessage,
-      caption,
-      errorTestId,
-      captionTestId,
-      menuItems,
-      children: [
-        /* @__PURE__ */ jsx144(ParameterRichTextInner, { ...innerProps, children }),
-        menuItems ? /* @__PURE__ */ jsx144(ParameterMenuButton, { label: `${label2} menu`, children: /* @__PURE__ */ jsx144(Fragment21, { children: menuItems }) }) : null
-      ]
-    }
-  );
-};
+// src/components/ParameterInputs/styles/ParameterRichText.styles.ts
+import { css as css107 } from "@emotion/react";
 var editorContainerWrapper = css107`
   position: relative;
 
@@ -18364,6 +18415,42 @@ var editorInput = css107`
     outline: none;
   }
 `;
+
+// src/components/ParameterInputs/ParameterRichText.tsx
+import { Fragment as Fragment21, jsx as jsx144, jsxs as jsxs97 } from "@emotion/react/jsx-runtime";
+var ParameterRichText = ({
+  label: label2,
+  labelLeadingIcon,
+  hiddenLabel,
+  id,
+  errorMessage,
+  caption,
+  errorTestId,
+  captionTestId,
+  menuItems,
+  children,
+  ...innerProps
+}) => {
+  return /* @__PURE__ */ jsxs97(
+    ParameterShell,
+    {
+      "data-testid": "parameter-richtext",
+      label: label2,
+      hiddenLabel,
+      labelLeadingIcon,
+      id,
+      errorMessage,
+      caption,
+      errorTestId,
+      captionTestId,
+      menuItems,
+      children: [
+        /* @__PURE__ */ jsx144(ParameterRichTextInner, { ...innerProps, children }),
+        menuItems ? /* @__PURE__ */ jsx144(ParameterMenuButton, { label: `${label2} menu`, children: /* @__PURE__ */ jsx144(Fragment21, { children: menuItems }) }) : null
+      ]
+    }
+  );
+};
 var ParameterRichTextInner = ({
   value,
   editorFooter,
@@ -18429,7 +18516,7 @@ var ParameterRichTextInner = ({
     editable: !richTextProps.readOnly
   };
   return /* @__PURE__ */ jsxs97(Fragment21, { children: [
-    /* @__PURE__ */ jsx144("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx144(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx144(RichText, { ...richTextProps, children }) }) }),
+    /* @__PURE__ */ jsx144("div", { css: [editorWrapper, editorThemeStyles], className: editorWrapperClassName, children: /* @__PURE__ */ jsx144(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx144(RichText, { ...richTextProps, children }) }) }),
     editorFooter ? editorFooter : null
   ] });
 };
@@ -20868,10 +20955,12 @@ export {
   input,
   inputError,
   inputSelect,
+  isNativeButtonTrigger,
   isSecureURL,
   isValidUrl,
   jsonIcon,
   labelText,
+  markNativeButton,
   mq,
   numberInput,
   popTopLayerDialog,