@uniformdev/design-system 20.7.1-alpha.83 → 20.7.1-alpha.84

package/dist/esm/index.js

@@ -665,7 +665,7 @@ var cq = (size) => `@container (min-width: ${size})`;
 var prefersReducedMotion = (cssProp) => `@media (prefers-reduced-motion: ${cssProp})`;
 
 // src/components/Layout/styles/AsideAndSectionLayout.styles.ts
-var AsideAdnSectionLayoutContainer = (withSidebar) => css5`
+var AsideAndSectionLayoutContainer = (withSidebar) => css5`
   display: grid;
   gap: var(--spacing-sm) 0;
   height: 100%;
@@ -674,19 +674,18 @@ var AsideAdnSectionLayoutContainer = (withSidebar) => css5`
   margin-left: ${withSidebar ? 0 : "var(--spacing-sm)"};
 
   ${mq("md")} {
-    grid-template-columns: ${withSidebar ? "200px 1fr" : "1fr"};
+    grid-template-columns: ${withSidebar ? "fit-content(25%) 1fr" : "1fr"};
   }
 `;
-var AsideAdnSectionLayoutAsideStyles = css5`
+var AsideAndSectionLayoutAsideStyles = css5`
   order: 1;
   padding: var(--spacing-base) 0 var(--spacing-base) var(--spacing-base);
 
   ${mq("md")} {
     order: 0;
-    grid-template-columns: minmax(0, 200px) 1fr;
   }
 `;
-var AsideAdnSectionLayoutSectionStyles = css5`
+var AsideAndSectionLayoutSectionStyles = css5`
   display: flex;
   background: var(--white);
   padding: var(--spacing-lg);
@@ -694,11 +693,11 @@ var AsideAdnSectionLayoutSectionStyles = css5`
   position: relative;
   overflow: hidden;
 `;
-var AsideAdnSectionLayoutSectionScrollable = css5`
+var AsideAndSectionLayoutSectionScrollable = css5`
   overflow: auto;
   ${scrollbarStyles}
 `;
-var AsideAdnSectionLayoutStickyAsideStyles = css5`
+var AsideAndSectionLayoutStickyAsideStyles = css5`
   position: sticky;
   top: var(--spacing-sm);
 `;
@@ -714,21 +713,21 @@ var AsideAndSectionLayout = ({
     "main",
     {
       css: [
-        AsideAdnSectionLayoutContainer(Boolean(sidebar)),
-        isStickyAside ? AsideAdnSectionLayoutSectionScrollable : null
+        AsideAndSectionLayoutContainer(Boolean(sidebar)),
+        isStickyAside ? AsideAndSectionLayoutSectionScrollable : null
       ],
       children: [
         sidebar ? /* @__PURE__ */ jsx5(
           "aside",
           {
             css: [
-              AsideAdnSectionLayoutAsideStyles,
-              isStickyAside ? AsideAdnSectionLayoutStickyAsideStyles : null
+              AsideAndSectionLayoutAsideStyles,
+              isStickyAside ? AsideAndSectionLayoutStickyAsideStyles : null
             ],
             children: sidebar
           }
         ) : null,
-        /* @__PURE__ */ jsx5("section", { css: AsideAdnSectionLayoutSectionStyles, children })
+        /* @__PURE__ */ jsx5("section", { css: AsideAndSectionLayoutSectionStyles, children })
       ]
     }
   );
@@ -2275,7 +2274,15 @@ var IconInner = ({ icon, iconColor = "default", size = "1.5rem", ...otherProps }
     );
     return null;
   }
-  return /* @__PURE__ */ jsx16(IconComponent, { role: "img", size, ...otherProps, css: [IconImg, customColor[iconColor]] });
+  return /* @__PURE__ */ jsx16(
+    IconComponent,
+    {
+      role: "img",
+      size,
+      ...otherProps,
+      css: [IconImg, iconColor ? functionalColors : void 0, customColor[iconColor]]
+    }
+  );
 };
 var Icon = React3.memo(IconInner);
 
@@ -4008,10 +4015,11 @@ var DropdownStyleMenuTrigger = forwardRef2(
     const buttonVariantStyle = variant === "ghost" ? ghostButtonStyle : outlineButtonStyle;
     return /* @__PURE__ */ jsx23("button", { ref, ...buttonProps, css: [buttonStyle(bgColor), buttonVariantStyle], type: "button", children: /* @__PURE__ */ jsxs13(HorizontalRhythm, { align: "center", gap: "xs", children: [
       /* @__PURE__ */ jsx23("div", { children }),
-      /* @__PURE__ */ jsx23(CgChevronDown, { iconColor: "currentColor", size: "1rem" })
+      /* @__PURE__ */ jsx23(Icon, { icon: CgChevronDown, iconColor: "currentColor", size: "1rem" })
     ] }) });
   }
 );
+DropdownStyleMenuTrigger.displayName = "DropdownStyleMenuTrigger";
 
 // src/components/Menu/Menu.tsx
 import {
@@ -7103,12 +7111,13 @@ var Counter = ({
   if (typeof count === "undefined") {
     return null;
   }
-  const isTripleDigits = count > 99 ? /* @__PURE__ */ jsxs39("span", { css: counterTripleValue, title: `${count}`, children: [
+  const isNumber = typeof count === "number";
+  const isTripleDigits = isNumber && count > 99 ? /* @__PURE__ */ jsxs39("span", { css: counterTripleValue, title: `${count}`, children: [
     "99",
     /* @__PURE__ */ jsx60(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.5rem", css: counterIcon.tripleValue })
   ] }) : count;
   const formatCount = count === 0 ? /* @__PURE__ */ jsx60("span", { css: counterZeroValue, title: `${count}` }) : isTripleDigits;
-  return /* @__PURE__ */ jsxs39("div", { css: [counterContainer(bgColor, Boolean(icon)), sizeStyles[size]], ...props, children: [
+  return /* @__PURE__ */ jsxs39("div", { css: [counterContainer(bgColor, Boolean(icon || !isNumber)), sizeStyles[size]], ...props, children: [
     icon ? /* @__PURE__ */ jsx60(
       "span",
       {
@@ -7641,7 +7650,6 @@ var descriptionListLabelStyles = css51`
 `;
 var descriptionListValueStyles = css51`
   display: flex;
-  align-items: center;
   margin: 0;
 `;
 
@@ -9480,7 +9488,13 @@ import {
   verticalListSortingStrategy
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { useCallback as useCallback7, useEffect as useEffect11, useMemo as useMemo5, useRef as useRef6, useState as useState11 } from "react";
+import {
+  useCallback as useCallback7,
+  useEffect as useEffect11,
+  useMemo as useMemo5,
+  useRef as useRef6,
+  useState as useState11
+} from "react";
 
 // src/utils/useDebouncedCallback.ts
 import { useEffect as useEffect10, useMemo as useMemo4, useRef as useRef5 } from "react";
@@ -9571,8 +9585,12 @@ var KeyValueInput = ({
   renderIconSelector
 }) => {
   const [isDragging, setIsDragging] = useState11(false);
+  const [indexToFocus, setIndexToFocus] = useState11(null);
   const popoverStoresMap = useRef6({});
-  const lastRowFirstInputRef = useRef6(null);
+  const keyInputRefsMap = useRef6({});
+  const [blockAutoGenerateForValues, setBlockAutoGenerateForValues] = useState11(
+    () => new Set(value.map((item) => item.value))
+  );
   const sensors = useSensors(
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, {
@@ -9582,13 +9600,28 @@ var KeyValueInput = ({
   const valueWithIds = useMemo5(() => {
     return value.map((item, index) => ({ ...item, id: generateItemId(item, index) }));
   }, [value]);
-  const handleAddOptionRow = useCallback7(() => {
-    onChange([...value, newItemDefault]);
-  }, [onChange, value, newItemDefault]);
+  const handleAddOptionRow = useCallback7(
+    (insertIndex) => {
+      const newValue = [...value];
+      newValue.splice(insertIndex + 1, 0, newItemDefault);
+      setIndexToFocus(insertIndex + 1);
+      onChange(newValue);
+    },
+    [onChange, value, newItemDefault]
+  );
   const handleDeleteOptionRow = useCallback7(
     (deleteIndex) => {
       const updatedOptions = value.filter((_, index) => index !== deleteIndex);
       onChange(updatedOptions);
+      setBlockAutoGenerateForValues((current) => {
+        const newSet = new Set(current);
+        newSet.delete(value[deleteIndex].value);
+        return newSet;
+      });
+      if (updatedOptions.length > 0) {
+        const focusIndex = deleteIndex >= updatedOptions.length ? updatedOptions.length - 1 : deleteIndex;
+        setIndexToFocus(focusIndex);
+      }
     },
     [value, onChange]
   );
@@ -9612,6 +9645,34 @@ var KeyValueInput = ({
     },
     [onChange, value]
   );
+  const handleKeyPaste = useCallback7(
+    (rowIndex, e) => {
+      const pastedText = e.clipboardData.getData("text");
+      const lines = pastedText.split("\n").filter((line) => line.trim() !== "");
+      if (lines.length <= 1) {
+        return;
+      }
+      e.preventDefault();
+      const newItems = [];
+      lines.forEach((line) => {
+        const linePieces = line.split(",");
+        const hasMultipleCommas = linePieces.length > 2;
+        if (linePieces.length > 1 && !hasMultipleCommas) {
+          const key = linePieces[0].trim();
+          const val = linePieces[1].trim();
+          newItems.push({ key, value: val });
+        } else {
+          const trimmedLine = line.trim();
+          newItems.push({ key: trimmedLine, value: trimmedLine });
+        }
+      });
+      const newValue = [...value];
+      newValue.splice(rowIndex, 1, ...newItems);
+      onChange(newValue);
+      setIndexToFocus(rowIndex + newItems.length - 1);
+    },
+    [onChange, value]
+  );
   const handleDragEnd = useCallback7(
     (e) => {
       setIsDragging(false);
@@ -9635,10 +9696,17 @@ var KeyValueInput = ({
     setIsDragging(false);
   }, [setIsDragging]);
   useEffect11(() => {
-    if (lastRowFirstInputRef.current && value.length > 1) {
-      lastRowFirstInputRef.current.focus();
-    }
-  }, [value.length]);
+    const timeoutId = setTimeout(() => {
+      var _a;
+      if (indexToFocus !== null && keyInputRefsMap.current[indexToFocus]) {
+        (_a = keyInputRefsMap.current[indexToFocus]) == null ? void 0 : _a.focus();
+        setIndexToFocus(null);
+      }
+    });
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [indexToFocus]);
   return /* @__PURE__ */ jsxs59(VerticalRhythm, { gap: "xs", children: [
     /* @__PURE__ */ jsx91(HorizontalRhythm, { align: "center", justify: "space-between", css: { marginBottom: "var(--spacing-xs)" }, children: /* @__PURE__ */ jsx91("span", { css: LabelStyles, children: label2 }) }),
     /* @__PURE__ */ jsxs59(
@@ -9676,18 +9744,24 @@ var KeyValueInput = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs59(HorizontalRhythm, { align: "center", gap: "xs", children: [
-            /* @__PURE__ */ jsx91("span", { children: valueLabel }),
-            !valueInfoPopover ? null : /* @__PURE__ */ jsx91(
-              Popover3,
-              {
-                buttonText: `${valueLabel} info`,
-                iconColor: "gray",
-                placement: "bottom-start",
-                onInit: ({ store }) => popoverStoresMap.current.value = store,
-                children: valueInfoPopover
-              }
-            )
+          /* @__PURE__ */ jsxs59(HorizontalRhythm, { align: "center", justify: "space-between", children: [
+            /* @__PURE__ */ jsxs59(HorizontalRhythm, { align: "center", gap: "xs", children: [
+              /* @__PURE__ */ jsx91("span", { children: valueLabel }),
+              !valueInfoPopover ? null : /* @__PURE__ */ jsx91(
+                Popover3,
+                {
+                  buttonText: `${valueLabel} info`,
+                  iconColor: "gray",
+                  placement: "bottom-start",
+                  onInit: ({ store }) => popoverStoresMap.current.value = store,
+                  children: valueInfoPopover
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs59(Caption, { css: { fontSize: "var(--fs-xs)" }, children: [
+              getFormattedShortcut("enter"),
+              " to insert row"
+            ] })
           ] })
         ]
       }
@@ -9705,7 +9779,7 @@ var KeyValueInput = ({
           KeyValueInputItem,
           {
             id,
-            firstInputRef: index === value.length - 1 ? lastRowFirstInputRef : null,
+            firstInputRef: (ref) => keyInputRefsMap.current[index] = ref,
             value: item,
             keyLabel: `${keyLabel}, row ${index}`,
             valueLabel: `${valueLabel}, row ${index}`,
@@ -9718,9 +9792,16 @@ var KeyValueInput = ({
             onDelete: () => handleDeleteOptionRow(index),
             onFocusChange: handleFocusChange,
             "data-testid": "key-value-input-item",
-            onEnter: handleAddOptionRow,
+            onEnter: () => handleAddOptionRow(index),
+            onKeyPaste: (e) => handleKeyPaste(index, e),
             showIconColumn,
-            renderIconSelector
+            renderIconSelector,
+            blockAutoGenerateValue: item.value !== "" && blockAutoGenerateForValues.has(item.value),
+            onBlurValue: (value2) => setBlockAutoGenerateForValues((current) => {
+              const newSet = new Set(current);
+              newSet.add(value2);
+              return newSet;
+            })
           },
           isDragging ? id : index
         )) })
@@ -9729,7 +9810,7 @@ var KeyValueInput = ({
     /* @__PURE__ */ jsx91(
       AddListButton,
       {
-        onButtonClick: handleAddOptionRow,
+        onButtonClick: () => handleAddOptionRow(value.length - 1),
         disabled: disabled2,
         "data-testid": "add-input-row-action",
         css: { marginTop: "var(--spacing-sm)", marginLeft: "var(--spacing-base)" }
@@ -9752,8 +9833,11 @@ var KeyValueInputItem = ({
   disabledDelete = false,
   disabledDnd = false,
   onEnter,
+  onKeyPaste,
   showIconColumn = false,
-  renderIconSelector
+  renderIconSelector,
+  blockAutoGenerateValue,
+  onBlurValue
 }) => {
   const { attributes, listeners, setNodeRef, transform, transition, setActivatorNodeRef, isSorting } = useSortable({
     id,
@@ -9768,6 +9852,11 @@ var KeyValueInputItem = ({
       onEnter();
     }
   };
+  const handleValueKeyDown = (e) => {
+    if (e.key === "Enter") {
+      onEnter();
+    }
+  };
   return /* @__PURE__ */ jsxs59("div", { css: rowWrapper, ref: setNodeRef, style, children: [
     /* @__PURE__ */ jsx91(DragHandle, { disableDnd: disabledDnd, ref: setActivatorNodeRef, ...attributes, ...listeners }),
     /* @__PURE__ */ jsxs59(
@@ -9811,7 +9900,7 @@ var KeyValueInputItem = ({
               showLabel: false,
               disabled: disabled2,
               onChange: (e) => {
-                const hasStoredValue = value.value !== value.key;
+                const hasStoredValue = value.value !== value.key || blockAutoGenerateValue;
                 onChange == null ? void 0 : onChange({
                   key: e.currentTarget.value,
                   value: hasStoredValue ? value.value : e.currentTarget.value,
@@ -9821,6 +9910,7 @@ var KeyValueInputItem = ({
               onBlur: () => onFocusChange == null ? void 0 : onFocusChange(false),
               onFocus: () => onFocusChange == null ? void 0 : onFocusChange(true),
               onKeyDown: handleEnter,
+              onPaste: onKeyPaste,
               value: value.key,
               errorMessage: isSorting ? void 0 : error == null ? void 0 : error.key,
               "data-testid": "key"
@@ -9839,9 +9929,12 @@ var KeyValueInputItem = ({
                   icon: value.icon
                 });
               },
-              onBlur: () => onFocusChange == null ? void 0 : onFocusChange(false),
+              onBlur: () => {
+                onFocusChange == null ? void 0 : onFocusChange(false);
+                onBlurValue == null ? void 0 : onBlurValue(value.value);
+              },
               onFocus: () => onFocusChange == null ? void 0 : onFocusChange(true),
-              onKeyDown: handleEnter,
+              onKeyDown: handleValueKeyDown,
               value: value.value,
               errorMessage: isSorting ? void 0 : error == null ? void 0 : error.value,
               "data-testid": "value"
@@ -12323,7 +12416,7 @@ var ParameterLabel = ({ id, asSpan, children, testId, ...props }) => {
 import { forwardRef as forwardRef21 } from "react";
 import { jsx as jsx120 } from "@emotion/react/jsx-runtime";
 var ParameterMenuButton = forwardRef21(
-  ({ label: label2, children, disabled: disabled2 }, ref) => {
+  ({ label: label2, children, disabled: disabled2, withoutPortal }, ref) => {
     return /* @__PURE__ */ jsx120(
       Menu,
       {
@@ -12340,6 +12433,7 @@ var ParameterMenuButton = forwardRef21(
             children: /* @__PURE__ */ jsx120(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
           }
         ),
+        withoutPortal,
         children
       }
     );
@@ -12431,6 +12525,7 @@ var ParameterShell = ({
   title,
   children,
   isParameterGroup = false,
+  menuWithoutPortal,
   ...props
 }) => {
   const [manualErrorMessage, setManualErrorMessage] = useState14(void 0);
@@ -12462,7 +12557,15 @@ var ParameterShell = ({
           children: actionItems
         }
       ) : null,
-      menuItems ? /* @__PURE__ */ jsx121(ParameterMenuButton, { label: `${label2} menu`, disabled: props.disabled, children: menuItems }) : null,
+      menuItems ? /* @__PURE__ */ jsx121(
+        ParameterMenuButton,
+        {
+          label: `${label2} menu`,
+          disabled: props.disabled,
+          withoutPortal: menuWithoutPortal,
+          children: menuItems
+        }
+      ) : null,
       /* @__PURE__ */ jsx121(
         ParameterShellContext.Provider,
         {
@@ -16174,55 +16277,63 @@ var RichText = ({
         onInsertAsset
       }
     ),
-    /* @__PURE__ */ jsxs90("div", { css: editorContainerWrapper, ref: onPortalContainerRef, children: [
-      /* @__PURE__ */ jsxs90(
-        "div",
-        {
-          css: editorContainer,
-          className: editorInputWrapperClassName,
-          ref: onEditorContainerRef,
-          "data-testid": "value-container",
-          children: [
-            /* @__PURE__ */ jsx134(
-              RichTextPlugin,
-              {
-                contentEditable: /* @__PURE__ */ jsx134(ContentEditable, { css: editorInput, className: editorInputClassName }),
-                placeholder: /* @__PURE__ */ jsx134("div", { css: editorPlaceholder, "data-placeholder": true, children: placeholder != null ? placeholder : readOnly ? "empty" : "start editing..." }),
-                ErrorBoundary: LexicalErrorBoundary
-              }
-            ),
-            /* @__PURE__ */ jsx134(ListPlugin, {}),
-            /* @__PURE__ */ jsx134(ListIndentPlugin, { maxDepth: 4 }),
-            /* @__PURE__ */ jsx134(TablePlugin, { hasCellMerge: false, hasCellBackgroundColor: false }),
-            /* @__PURE__ */ jsx134("div", { css: editorContainerOverflowWrapper, "data-testid": "table-action-menu-plugin", children: editorContainerRef && portalContainerRef && !minimalInteractivity ? /* @__PURE__ */ jsx134(
-              TableActionMenuPlugin,
-              {
-                positioningAnchorEl: editorContainerRef,
-                menuPortalEl: portalContainerRef
-              }
-            ) : null }),
-            editorContainerRef && !minimalInteractivity ? /* @__PURE__ */ jsx134(TableCellResizerPlugin, { positioningAnchorEl: editorContainerRef }) : null,
-            readOnly ? null : /* @__PURE__ */ jsx134(HistoryPlugin, {}),
-            /* @__PURE__ */ jsx134(DisableStylesPlugin, {}),
-            /* @__PURE__ */ jsx134(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx134(Fragment18, { children }),
-      editorContainerRef ? /* @__PURE__ */ jsx134(
-        LinkNodePlugin,
-        {
-          onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
-          getBoundPath: (variables == null ? void 0 : variables.bindVariables) ? (path) => {
-            var _a, _b;
-            return (_b = (_a = variables.bindVariables) == null ? void 0 : _a.call(variables, path)) != null ? _b : path;
-          } : void 0,
-          positioningAnchorEl: editorContainerRef
-        }
-      ) : null,
-      /* @__PURE__ */ jsx134(TableSelectionPlugin_default, {}),
-      /* @__PURE__ */ jsx134(ImprovedAssetSelectionPlugin_default, {})
-    ] })
+    /* @__PURE__ */ jsxs90(
+      "div",
+      {
+        css: editorContainerWrapper,
+        "data-editor-container-wrapper": true,
+        ref: onPortalContainerRef,
+        children: [
+          /* @__PURE__ */ jsxs90(
+            "div",
+            {
+              css: editorContainer,
+              className: editorInputWrapperClassName,
+              ref: onEditorContainerRef,
+              "data-testid": "value-container",
+              children: [
+                /* @__PURE__ */ jsx134(
+                  RichTextPlugin,
+                  {
+                    contentEditable: /* @__PURE__ */ jsx134(ContentEditable, { css: editorInput, className: editorInputClassName }),
+                    placeholder: /* @__PURE__ */ jsx134("div", { css: editorPlaceholder, "data-placeholder": true, children: placeholder != null ? placeholder : readOnly ? "empty" : "start editing..." }),
+                    ErrorBoundary: LexicalErrorBoundary
+                  }
+                ),
+                /* @__PURE__ */ jsx134(ListPlugin, {}),
+                /* @__PURE__ */ jsx134(ListIndentPlugin, { maxDepth: 4 }),
+                /* @__PURE__ */ jsx134(TablePlugin, { hasCellMerge: false, hasCellBackgroundColor: false }),
+                /* @__PURE__ */ jsx134("div", { css: editorContainerOverflowWrapper, "data-testid": "table-action-menu-plugin", children: editorContainerRef && portalContainerRef && !minimalInteractivity ? /* @__PURE__ */ jsx134(
+                  TableActionMenuPlugin,
+                  {
+                    positioningAnchorEl: editorContainerRef,
+                    menuPortalEl: portalContainerRef
+                  }
+                ) : null }),
+                editorContainerRef && !minimalInteractivity ? /* @__PURE__ */ jsx134(TableCellResizerPlugin, { positioningAnchorEl: editorContainerRef }) : null,
+                readOnly ? null : /* @__PURE__ */ jsx134(HistoryPlugin, {}),
+                /* @__PURE__ */ jsx134(DisableStylesPlugin, {}),
+                /* @__PURE__ */ jsx134(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx134(Fragment18, { children }),
+          editorContainerRef ? /* @__PURE__ */ jsx134(
+            LinkNodePlugin,
+            {
+              onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
+              getBoundPath: (variables == null ? void 0 : variables.bindVariables) ? (path) => {
+                var _a, _b;
+                return (_b = (_a = variables.bindVariables) == null ? void 0 : _a.call(variables, path)) != null ? _b : path;
+              } : void 0,
+              positioningAnchorEl: editorContainerRef
+            }
+          ) : null,
+          /* @__PURE__ */ jsx134(TableSelectionPlugin_default, {}),
+          /* @__PURE__ */ jsx134(ImprovedAssetSelectionPlugin_default, {})
+        ]
+      }
+    )
   ] });
 };
 
@@ -16864,7 +16975,7 @@ var lightFadingOut = keyframes5`
 `;
 var skeletonStyles = css106`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
-  background-color: var(--gray-900);
+  background-color: var(--gray-500);
 `;
 
 // src/components/Skeleton/Skeleton.tsx

package/dist/index.d.mts

@@ -1502,8 +1502,10 @@ declare const MultilineChip: ({ children, onClick, ...props }: MultilineChipProp
 type CounterBgColors = 'var(--white)' | 'var(--gray-50)' | 'var(--accent-light)' | 'var(--accent-dark)' | 'transparent';
 type CounterIconColors = 'auto' | 'var(--utility-caution-icon)' | 'var(--utility-danger-icon)' | 'var(--utility-info-icon)' | 'var(--utility-success-icon)' | 'red';
 type CounterProps = {
-    /** sets the count value, a 0 will show a dot instead of a number. Undefined will cause the counter to disappear. */
-    count: number | undefined;
+    /** sets the count value, a 0 will show a dot instead of a number. Undefined will cause the counter to disappear.
+     * String can be used for formatting purposes, e.g. "1.2k" or regionalized number, e.g. "1,200"
+     */
+    count: number | string | undefined;
     /** sets the background color
      * @default 'transparent'
      */
@@ -3372,6 +3374,8 @@ type ParameterMenuButtonProps = {
     label: string;
     children?: ReactNode;
     disabled?: boolean;
+    /** set to true to render the menu directly in the parent DOM */
+    withoutPortal?: boolean;
 };
 /** @example <ParameterMenuButton label="label value"><MenuItem>menu option component</MenuItem></ParameterMenuButton> */
 declare const ParameterMenuButton: React$1.ForwardRefExoticComponent<ParameterMenuButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
@@ -3734,12 +3738,15 @@ type ParameterShellOverrideProps = {
      */
     isParameterGroup?: boolean;
 };
-type ParameterShellProps = React.InputHTMLAttributes<HTMLDivElement> & CommonParameterInputProps & ParameterShellOverrideProps;
+type ParameterShellProps = React.InputHTMLAttributes<HTMLDivElement> & CommonParameterInputProps & ParameterShellOverrideProps & {
+    /** set to true to render the menu directly in the parent DOM */
+    menuWithoutPortal?: boolean;
+};
 /**
  * Uniform Parameter shell component
  * @example <ParameterShell label="my label" id="my-id"><ParameterInput onChange={() => {}} /></ParameterShell>
  */
-declare const ParameterShell: ({ label, labelLeadingIcon, labelTrailingIcon, hiddenLabel, id, errorMessage, warningMessage, infoMessage, caption, errorTestId, captionTestId, menuItems, actionItems, hasOverriddenValue, onResetOverriddenValue, title, children, isParameterGroup, ...props }: ParameterShellProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const ParameterShell: ({ label, labelLeadingIcon, labelTrailingIcon, hiddenLabel, id, errorMessage, warningMessage, infoMessage, caption, errorTestId, captionTestId, menuItems, actionItems, hasOverriddenValue, onResetOverriddenValue, title, children, isParameterGroup, menuWithoutPortal, ...props }: ParameterShellProps) => _emotion_react_jsx_runtime.JSX.Element;
 declare const ParameterShellPlaceholder: ({ children }: {
     children?: ReactNode;
 }) => _emotion_react_jsx_runtime.JSX.Element;

package/dist/index.d.ts

@@ -1502,8 +1502,10 @@ declare const MultilineChip: ({ children, onClick, ...props }: MultilineChipProp
 type CounterBgColors = 'var(--white)' | 'var(--gray-50)' | 'var(--accent-light)' | 'var(--accent-dark)' | 'transparent';
 type CounterIconColors = 'auto' | 'var(--utility-caution-icon)' | 'var(--utility-danger-icon)' | 'var(--utility-info-icon)' | 'var(--utility-success-icon)' | 'red';
 type CounterProps = {
-    /** sets the count value, a 0 will show a dot instead of a number. Undefined will cause the counter to disappear. */
-    count: number | undefined;
+    /** sets the count value, a 0 will show a dot instead of a number. Undefined will cause the counter to disappear.
+     * String can be used for formatting purposes, e.g. "1.2k" or regionalized number, e.g. "1,200"
+     */
+    count: number | string | undefined;
     /** sets the background color
      * @default 'transparent'
      */
@@ -3372,6 +3374,8 @@ type ParameterMenuButtonProps = {
     label: string;
     children?: ReactNode;
     disabled?: boolean;
+    /** set to true to render the menu directly in the parent DOM */
+    withoutPortal?: boolean;
 };
 /** @example <ParameterMenuButton label="label value"><MenuItem>menu option component</MenuItem></ParameterMenuButton> */
 declare const ParameterMenuButton: React$1.ForwardRefExoticComponent<ParameterMenuButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
@@ -3734,12 +3738,15 @@ type ParameterShellOverrideProps = {
      */
     isParameterGroup?: boolean;
 };
-type ParameterShellProps = React.InputHTMLAttributes<HTMLDivElement> & CommonParameterInputProps & ParameterShellOverrideProps;
+type ParameterShellProps = React.InputHTMLAttributes<HTMLDivElement> & CommonParameterInputProps & ParameterShellOverrideProps & {
+    /** set to true to render the menu directly in the parent DOM */
+    menuWithoutPortal?: boolean;
+};
 /**
  * Uniform Parameter shell component
  * @example <ParameterShell label="my label" id="my-id"><ParameterInput onChange={() => {}} /></ParameterShell>
  */
-declare const ParameterShell: ({ label, labelLeadingIcon, labelTrailingIcon, hiddenLabel, id, errorMessage, warningMessage, infoMessage, caption, errorTestId, captionTestId, menuItems, actionItems, hasOverriddenValue, onResetOverriddenValue, title, children, isParameterGroup, ...props }: ParameterShellProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const ParameterShell: ({ label, labelLeadingIcon, labelTrailingIcon, hiddenLabel, id, errorMessage, warningMessage, infoMessage, caption, errorTestId, captionTestId, menuItems, actionItems, hasOverriddenValue, onResetOverriddenValue, title, children, isParameterGroup, menuWithoutPortal, ...props }: ParameterShellProps) => _emotion_react_jsx_runtime.JSX.Element;
 declare const ParameterShellPlaceholder: ({ children }: {
     children?: ReactNode;
 }) => _emotion_react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -2337,7 +2337,7 @@ var cq = (size) => `@container (min-width: ${size})`;
 var prefersReducedMotion = (cssProp) => `@media (prefers-reduced-motion: ${cssProp})`;
 
 // src/components/Layout/styles/AsideAndSectionLayout.styles.ts
-var AsideAdnSectionLayoutContainer = (withSidebar) => import_react6.css`
+var AsideAndSectionLayoutContainer = (withSidebar) => import_react6.css`
   display: grid;
   gap: var(--spacing-sm) 0;
   height: 100%;
@@ -2346,19 +2346,18 @@ var AsideAdnSectionLayoutContainer = (withSidebar) => import_react6.css`
   margin-left: ${withSidebar ? 0 : "var(--spacing-sm)"};
 
   ${mq("md")} {
-    grid-template-columns: ${withSidebar ? "200px 1fr" : "1fr"};
+    grid-template-columns: ${withSidebar ? "fit-content(25%) 1fr" : "1fr"};
   }
 `;
-var AsideAdnSectionLayoutAsideStyles = import_react6.css`
+var AsideAndSectionLayoutAsideStyles = import_react6.css`
   order: 1;
   padding: var(--spacing-base) 0 var(--spacing-base) var(--spacing-base);
 
   ${mq("md")} {
     order: 0;
-    grid-template-columns: minmax(0, 200px) 1fr;
   }
 `;
-var AsideAdnSectionLayoutSectionStyles = import_react6.css`
+var AsideAndSectionLayoutSectionStyles = import_react6.css`
   display: flex;
   background: var(--white);
   padding: var(--spacing-lg);
@@ -2366,11 +2365,11 @@ var AsideAdnSectionLayoutSectionStyles = import_react6.css`
   position: relative;
   overflow: hidden;
 `;
-var AsideAdnSectionLayoutSectionScrollable = import_react6.css`
+var AsideAndSectionLayoutSectionScrollable = import_react6.css`
   overflow: auto;
   ${scrollbarStyles}
 `;
-var AsideAdnSectionLayoutStickyAsideStyles = import_react6.css`
+var AsideAndSectionLayoutStickyAsideStyles = import_react6.css`
   position: sticky;
   top: var(--spacing-sm);
 `;
@@ -2386,21 +2385,21 @@ var AsideAndSectionLayout = ({
     "main",
     {
       css: [
-        AsideAdnSectionLayoutContainer(Boolean(sidebar)),
-        isStickyAside ? AsideAdnSectionLayoutSectionScrollable : null
+        AsideAndSectionLayoutContainer(Boolean(sidebar)),
+        isStickyAside ? AsideAndSectionLayoutSectionScrollable : null
       ],
       children: [
         sidebar ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "aside",
           {
             css: [
-              AsideAdnSectionLayoutAsideStyles,
-              isStickyAside ? AsideAdnSectionLayoutStickyAsideStyles : null
+              AsideAndSectionLayoutAsideStyles,
+              isStickyAside ? AsideAndSectionLayoutStickyAsideStyles : null
             ],
             children: sidebar
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("section", { css: AsideAdnSectionLayoutSectionStyles, children })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("section", { css: AsideAndSectionLayoutSectionStyles, children })
       ]
     }
   );
@@ -3989,7 +3988,15 @@ var IconInner = ({ icon, iconColor = "default", size = "1.5rem", ...otherProps }
     );
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconComponent, { role: "img", size, ...otherProps, css: [IconImg, customColor[iconColor]] });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    IconComponent,
+    {
+      role: "img",
+      size,
+      ...otherProps,
+      css: [IconImg, iconColor ? functionalColors : void 0, customColor[iconColor]]
+    }
+  );
 };
 var Icon = import_react24.default.memo(IconInner);
 
@@ -5739,10 +5746,11 @@ var DropdownStyleMenuTrigger = (0, import_react31.forwardRef)(
     const buttonVariantStyle = variant === "ghost" ? ghostButtonStyle : outlineButtonStyle;
     return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { ref, ...buttonProps, css: [buttonStyle(bgColor), buttonVariantStyle], type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(HorizontalRhythm, { align: "center", gap: "xs", children: [
       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_CgChevronDown2.CgChevronDown, { iconColor: "currentColor", size: "1rem" })
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { icon: import_CgChevronDown2.CgChevronDown, iconColor: "currentColor", size: "1rem" })
     ] }) });
   }
 );
+DropdownStyleMenuTrigger.displayName = "DropdownStyleMenuTrigger";
 
 // src/components/Menu/Menu.tsx
 init_emotion_jsx_shim();
@@ -8900,12 +8908,13 @@ var Counter = ({
   if (typeof count === "undefined") {
     return null;
   }
-  const isTripleDigits = count > 99 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { css: counterTripleValue, title: `${count}`, children: [
+  const isNumber = typeof count === "number";
+  const isTripleDigits = isNumber && count > 99 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { css: counterTripleValue, title: `${count}`, children: [
     "99",
     /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.5rem", css: counterIcon.tripleValue })
   ] }) : count;
   const formatCount = count === 0 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { css: counterZeroValue, title: `${count}` }) : isTripleDigits;
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { css: [counterContainer(bgColor, Boolean(icon)), sizeStyles[size]], ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { css: [counterContainer(bgColor, Boolean(icon || !isNumber)), sizeStyles[size]], ...props, children: [
     icon ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       "span",
       {
@@ -9440,7 +9449,6 @@ var descriptionListLabelStyles = import_react75.css`
 `;
 var descriptionListValueStyles = import_react75.css`
   display: flex;
-  align-items: center;
   margin: 0;
 `;
 
@@ -11428,8 +11436,12 @@ var KeyValueInput = ({
   renderIconSelector
 }) => {
   const [isDragging, setIsDragging] = (0, import_react106.useState)(false);
+  const [indexToFocus, setIndexToFocus] = (0, import_react106.useState)(null);
   const popoverStoresMap = (0, import_react106.useRef)({});
-  const lastRowFirstInputRef = (0, import_react106.useRef)(null);
+  const keyInputRefsMap = (0, import_react106.useRef)({});
+  const [blockAutoGenerateForValues, setBlockAutoGenerateForValues] = (0, import_react106.useState)(
+    () => new Set(value.map((item) => item.value))
+  );
   const sensors = (0, import_core.useSensors)(
     (0, import_core.useSensor)(import_core.PointerSensor),
     (0, import_core.useSensor)(import_core.KeyboardSensor, {
@@ -11439,13 +11451,28 @@ var KeyValueInput = ({
   const valueWithIds = (0, import_react106.useMemo)(() => {
     return value.map((item, index) => ({ ...item, id: generateItemId(item, index) }));
   }, [value]);
-  const handleAddOptionRow = (0, import_react106.useCallback)(() => {
-    onChange([...value, newItemDefault]);
-  }, [onChange, value, newItemDefault]);
+  const handleAddOptionRow = (0, import_react106.useCallback)(
+    (insertIndex) => {
+      const newValue = [...value];
+      newValue.splice(insertIndex + 1, 0, newItemDefault);
+      setIndexToFocus(insertIndex + 1);
+      onChange(newValue);
+    },
+    [onChange, value, newItemDefault]
+  );
   const handleDeleteOptionRow = (0, import_react106.useCallback)(
     (deleteIndex) => {
       const updatedOptions = value.filter((_, index) => index !== deleteIndex);
       onChange(updatedOptions);
+      setBlockAutoGenerateForValues((current) => {
+        const newSet = new Set(current);
+        newSet.delete(value[deleteIndex].value);
+        return newSet;
+      });
+      if (updatedOptions.length > 0) {
+        const focusIndex = deleteIndex >= updatedOptions.length ? updatedOptions.length - 1 : deleteIndex;
+        setIndexToFocus(focusIndex);
+      }
     },
     [value, onChange]
   );
@@ -11469,6 +11496,34 @@ var KeyValueInput = ({
     },
     [onChange, value]
   );
+  const handleKeyPaste = (0, import_react106.useCallback)(
+    (rowIndex, e) => {
+      const pastedText = e.clipboardData.getData("text");
+      const lines = pastedText.split("\n").filter((line) => line.trim() !== "");
+      if (lines.length <= 1) {
+        return;
+      }
+      e.preventDefault();
+      const newItems = [];
+      lines.forEach((line) => {
+        const linePieces = line.split(",");
+        const hasMultipleCommas = linePieces.length > 2;
+        if (linePieces.length > 1 && !hasMultipleCommas) {
+          const key = linePieces[0].trim();
+          const val = linePieces[1].trim();
+          newItems.push({ key, value: val });
+        } else {
+          const trimmedLine = line.trim();
+          newItems.push({ key: trimmedLine, value: trimmedLine });
+        }
+      });
+      const newValue = [...value];
+      newValue.splice(rowIndex, 1, ...newItems);
+      onChange(newValue);
+      setIndexToFocus(rowIndex + newItems.length - 1);
+    },
+    [onChange, value]
+  );
   const handleDragEnd = (0, import_react106.useCallback)(
     (e) => {
       setIsDragging(false);
@@ -11492,10 +11547,17 @@ var KeyValueInput = ({
     setIsDragging(false);
   }, [setIsDragging]);
   (0, import_react106.useEffect)(() => {
-    if (lastRowFirstInputRef.current && value.length > 1) {
-      lastRowFirstInputRef.current.focus();
-    }
-  }, [value.length]);
+    const timeoutId = setTimeout(() => {
+      var _a;
+      if (indexToFocus !== null && keyInputRefsMap.current[indexToFocus]) {
+        (_a = keyInputRefsMap.current[indexToFocus]) == null ? void 0 : _a.focus();
+        setIndexToFocus(null);
+      }
+    });
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [indexToFocus]);
   return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(VerticalRhythm, { gap: "xs", children: [
     /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(HorizontalRhythm, { align: "center", justify: "space-between", css: { marginBottom: "var(--spacing-xs)" }, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { css: LabelStyles, children: label2 }) }),
     /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
@@ -11533,18 +11595,24 @@ var KeyValueInput = ({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(HorizontalRhythm, { align: "center", gap: "xs", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { children: valueLabel }),
-            !valueInfoPopover ? null : /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
-              Popover3,
-              {
-                buttonText: `${valueLabel} info`,
-                iconColor: "gray",
-                placement: "bottom-start",
-                onInit: ({ store }) => popoverStoresMap.current.value = store,
-                children: valueInfoPopover
-              }
-            )
+          /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(HorizontalRhythm, { align: "center", justify: "space-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(HorizontalRhythm, { align: "center", gap: "xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { children: valueLabel }),
+              !valueInfoPopover ? null : /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+                Popover3,
+                {
+                  buttonText: `${valueLabel} info`,
+                  iconColor: "gray",
+                  placement: "bottom-start",
+                  onInit: ({ store }) => popoverStoresMap.current.value = store,
+                  children: valueInfoPopover
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(Caption, { css: { fontSize: "var(--fs-xs)" }, children: [
+              getFormattedShortcut("enter"),
+              " to insert row"
+            ] })
           ] })
         ]
       }
@@ -11562,7 +11630,7 @@ var KeyValueInput = ({
           KeyValueInputItem,
           {
             id,
-            firstInputRef: index === value.length - 1 ? lastRowFirstInputRef : null,
+            firstInputRef: (ref) => keyInputRefsMap.current[index] = ref,
             value: item,
             keyLabel: `${keyLabel}, row ${index}`,
             valueLabel: `${valueLabel}, row ${index}`,
@@ -11575,9 +11643,16 @@ var KeyValueInput = ({
             onDelete: () => handleDeleteOptionRow(index),
             onFocusChange: handleFocusChange,
             "data-testid": "key-value-input-item",
-            onEnter: handleAddOptionRow,
+            onEnter: () => handleAddOptionRow(index),
+            onKeyPaste: (e) => handleKeyPaste(index, e),
             showIconColumn,
-            renderIconSelector
+            renderIconSelector,
+            blockAutoGenerateValue: item.value !== "" && blockAutoGenerateForValues.has(item.value),
+            onBlurValue: (value2) => setBlockAutoGenerateForValues((current) => {
+              const newSet = new Set(current);
+              newSet.add(value2);
+              return newSet;
+            })
           },
           isDragging ? id : index
         )) })
@@ -11586,7 +11661,7 @@ var KeyValueInput = ({
     /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
       AddListButton,
       {
-        onButtonClick: handleAddOptionRow,
+        onButtonClick: () => handleAddOptionRow(value.length - 1),
         disabled: disabled2,
         "data-testid": "add-input-row-action",
         css: { marginTop: "var(--spacing-sm)", marginLeft: "var(--spacing-base)" }
@@ -11609,8 +11684,11 @@ var KeyValueInputItem = ({
   disabledDelete = false,
   disabledDnd = false,
   onEnter,
+  onKeyPaste,
   showIconColumn = false,
-  renderIconSelector
+  renderIconSelector,
+  blockAutoGenerateValue,
+  onBlurValue
 }) => {
   const { attributes, listeners, setNodeRef, transform, transition, setActivatorNodeRef, isSorting } = (0, import_sortable.useSortable)({
     id,
@@ -11625,6 +11703,11 @@ var KeyValueInputItem = ({
       onEnter();
     }
   };
+  const handleValueKeyDown = (e) => {
+    if (e.key === "Enter") {
+      onEnter();
+    }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { css: rowWrapper, ref: setNodeRef, style, children: [
     /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(DragHandle, { disableDnd: disabledDnd, ref: setActivatorNodeRef, ...attributes, ...listeners }),
     /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
@@ -11668,7 +11751,7 @@ var KeyValueInputItem = ({
               showLabel: false,
               disabled: disabled2,
               onChange: (e) => {
-                const hasStoredValue = value.value !== value.key;
+                const hasStoredValue = value.value !== value.key || blockAutoGenerateValue;
                 onChange == null ? void 0 : onChange({
                   key: e.currentTarget.value,
                   value: hasStoredValue ? value.value : e.currentTarget.value,
@@ -11678,6 +11761,7 @@ var KeyValueInputItem = ({
               onBlur: () => onFocusChange == null ? void 0 : onFocusChange(false),
               onFocus: () => onFocusChange == null ? void 0 : onFocusChange(true),
               onKeyDown: handleEnter,
+              onPaste: onKeyPaste,
               value: value.key,
               errorMessage: isSorting ? void 0 : error == null ? void 0 : error.key,
               "data-testid": "key"
@@ -11696,9 +11780,12 @@ var KeyValueInputItem = ({
                   icon: value.icon
                 });
               },
-              onBlur: () => onFocusChange == null ? void 0 : onFocusChange(false),
+              onBlur: () => {
+                onFocusChange == null ? void 0 : onFocusChange(false);
+                onBlurValue == null ? void 0 : onBlurValue(value.value);
+              },
               onFocus: () => onFocusChange == null ? void 0 : onFocusChange(true),
-              onKeyDown: handleEnter,
+              onKeyDown: handleValueKeyDown,
               value: value.value,
               errorMessage: isSorting ? void 0 : error == null ? void 0 : error.value,
               "data-testid": "value"
@@ -14251,7 +14338,7 @@ init_emotion_jsx_shim();
 var import_react139 = require("react");
 var import_jsx_runtime120 = require("@emotion/react/jsx-runtime");
 var ParameterMenuButton = (0, import_react139.forwardRef)(
-  ({ label: label2, children, disabled: disabled2 }, ref) => {
+  ({ label: label2, children, disabled: disabled2, withoutPortal }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
       Menu,
       {
@@ -14268,6 +14355,7 @@ var ParameterMenuButton = (0, import_react139.forwardRef)(
             children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
           }
         ),
+        withoutPortal,
         children
       }
     );
@@ -14360,6 +14448,7 @@ var ParameterShell = ({
   title,
   children,
   isParameterGroup = false,
+  menuWithoutPortal,
   ...props
 }) => {
   const [manualErrorMessage, setManualErrorMessage] = (0, import_react142.useState)(void 0);
@@ -14391,7 +14480,15 @@ var ParameterShell = ({
           children: actionItems
         }
       ) : null,
-      menuItems ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ParameterMenuButton, { label: `${label2} menu`, disabled: props.disabled, children: menuItems }) : null,
+      menuItems ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+        ParameterMenuButton,
+        {
+          label: `${label2} menu`,
+          disabled: props.disabled,
+          withoutPortal: menuWithoutPortal,
+          children: menuItems
+        }
+      ) : null,
       /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
         ParameterShellContext.Provider,
         {
@@ -18043,55 +18140,63 @@ var RichText = ({
         onInsertAsset
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { css: editorContainerWrapper, ref: onPortalContainerRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
-        "div",
-        {
-          css: editorContainer,
-          className: editorInputWrapperClassName,
-          ref: onEditorContainerRef,
-          "data-testid": "value-container",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
-              import_LexicalRichTextPlugin.RichTextPlugin,
-              {
-                contentEditable: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalContentEditable.ContentEditable, { css: editorInput, className: editorInputClassName }),
-                placeholder: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { css: editorPlaceholder, "data-placeholder": true, children: placeholder != null ? placeholder : readOnly ? "empty" : "start editing..." }),
-                ErrorBoundary: import_LexicalErrorBoundary.default
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalListPlugin.ListPlugin, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ListIndentPlugin, { maxDepth: 4 }),
-            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalTablePlugin.TablePlugin, { hasCellMerge: false, hasCellBackgroundColor: false }),
-            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { css: editorContainerOverflowWrapper, "data-testid": "table-action-menu-plugin", children: editorContainerRef && portalContainerRef && !minimalInteractivity ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
-              TableActionMenuPlugin,
-              {
-                positioningAnchorEl: editorContainerRef,
-                menuPortalEl: portalContainerRef
-              }
-            ) : null }),
-            editorContainerRef && !minimalInteractivity ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(TableCellResizerPlugin, { positioningAnchorEl: editorContainerRef }) : null,
-            readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalHistoryPlugin.HistoryPlugin, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DisableStylesPlugin, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS })
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_jsx_runtime134.Fragment, { children }),
-      editorContainerRef ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
-        LinkNodePlugin,
-        {
-          onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
-          getBoundPath: (variables == null ? void 0 : variables.bindVariables) ? (path) => {
-            var _a, _b;
-            return (_b = (_a = variables.bindVariables) == null ? void 0 : _a.call(variables, path)) != null ? _b : path;
-          } : void 0,
-          positioningAnchorEl: editorContainerRef
-        }
-      ) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(TableSelectionPlugin_default, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ImprovedAssetSelectionPlugin_default, {})
-    ] })
+    /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
+      "div",
+      {
+        css: editorContainerWrapper,
+        "data-editor-container-wrapper": true,
+        ref: onPortalContainerRef,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
+            "div",
+            {
+              css: editorContainer,
+              className: editorInputWrapperClassName,
+              ref: onEditorContainerRef,
+              "data-testid": "value-container",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+                  import_LexicalRichTextPlugin.RichTextPlugin,
+                  {
+                    contentEditable: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalContentEditable.ContentEditable, { css: editorInput, className: editorInputClassName }),
+                    placeholder: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { css: editorPlaceholder, "data-placeholder": true, children: placeholder != null ? placeholder : readOnly ? "empty" : "start editing..." }),
+                    ErrorBoundary: import_LexicalErrorBoundary.default
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalListPlugin.ListPlugin, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ListIndentPlugin, { maxDepth: 4 }),
+                /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalTablePlugin.TablePlugin, { hasCellMerge: false, hasCellBackgroundColor: false }),
+                /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { css: editorContainerOverflowWrapper, "data-testid": "table-action-menu-plugin", children: editorContainerRef && portalContainerRef && !minimalInteractivity ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+                  TableActionMenuPlugin,
+                  {
+                    positioningAnchorEl: editorContainerRef,
+                    menuPortalEl: portalContainerRef
+                  }
+                ) : null }),
+                editorContainerRef && !minimalInteractivity ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(TableCellResizerPlugin, { positioningAnchorEl: editorContainerRef }) : null,
+                readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalHistoryPlugin.HistoryPlugin, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DisableStylesPlugin, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_jsx_runtime134.Fragment, { children }),
+          editorContainerRef ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+            LinkNodePlugin,
+            {
+              onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
+              getBoundPath: (variables == null ? void 0 : variables.bindVariables) ? (path) => {
+                var _a, _b;
+                return (_b = (_a = variables.bindVariables) == null ? void 0 : _a.call(variables, path)) != null ? _b : path;
+              } : void 0,
+              positioningAnchorEl: editorContainerRef
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(TableSelectionPlugin_default, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ImprovedAssetSelectionPlugin_default, {})
+        ]
+      }
+    )
   ] });
 };
 
@@ -18749,7 +18854,7 @@ var lightFadingOut = import_react176.keyframes`
 `;
 var skeletonStyles = import_react176.css`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
-  background-color: var(--gray-900);
+  background-color: var(--gray-500);
 `;
 
 // src/components/Skeleton/Skeleton.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "20.7.1-alpha.83+9085e999d1",
+  "version": "20.7.1-alpha.84+047b6dcb94",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "exports": {
@@ -38,8 +38,8 @@
     "@storybook/theming": "^8.3.3",
     "@types/react": "18.3.24",
     "@types/react-dom": "18.3.7",
-    "@uniformdev/canvas": "^20.7.1-alpha.83+9085e999d1",
-    "@uniformdev/richtext": "^20.7.1-alpha.83+9085e999d1",
+    "@uniformdev/canvas": "^20.7.1-alpha.84+047b6dcb94",
+    "@uniformdev/richtext": "^20.7.1-alpha.84+047b6dcb94",
     "@vitest/coverage-v8": "3.2.4",
     "autoprefixer": "10.4.21",
     "hygen": "6.2.11",
@@ -93,5 +93,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9085e999d1c99bc2d084085dc9983eb5df91f556"
+  "gitHead": "047b6dcb9431790be9151a1762ae0880ebe02276"
 }