@uniformdev/design-system 20.39.3-alpha.11 → 20.41.0

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,15 +2274,7 @@ var IconInner = ({ icon, iconColor = "default", size = "1.5rem", ...otherProps }
     );
     return null;
   }
-  return /* @__PURE__ */ jsx16(
-    IconComponent,
-    {
-      role: "img",
-      size,
-      ...otherProps,
-      css: [IconImg, iconColor ? functionalColors : void 0, customColor[iconColor]]
-    }
-  );
+  return /* @__PURE__ */ jsx16(IconComponent, { role: "img", size, ...otherProps, css: [IconImg, customColor[iconColor]] });
 };
 var Icon = React3.memo(IconInner);
 
@@ -4016,10 +4007,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 {
@@ -7111,13 +7103,12 @@ var Counter = ({
   if (typeof count === "undefined") {
     return null;
   }
-  const isNumber = typeof count === "number";
-  const isTripleDigits = isNumber && count > 99 ? /* @__PURE__ */ jsxs39("span", { css: counterTripleValue, title: `${count}`, children: [
+  const isTripleDigits = 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 || !isNumber)), sizeStyles[size]], ...props, children: [
+  return /* @__PURE__ */ jsxs39("div", { css: [counterContainer(bgColor, Boolean(icon)), sizeStyles[size]], ...props, children: [
     icon ? /* @__PURE__ */ jsx60(
       "span",
       {
@@ -9489,7 +9480,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";
@@ -9580,8 +9577,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, {
@@ -9591,13 +9592,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]
   );
@@ -9621,6 +9637,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);
@@ -9644,10 +9688,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(
@@ -9685,18 +9736,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"
+            ] })
           ] })
         ]
       }
@@ -9714,7 +9771,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}`,
@@ -9727,9 +9784,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
         )) })
@@ -9738,7 +9802,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)" }
@@ -9761,8 +9825,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,
@@ -9777,6 +9844,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(
@@ -9820,7 +9892,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,
@@ -9830,6 +9902,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"
@@ -9848,9 +9921,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"
@@ -16193,55 +16269,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, {})
+        ]
+      }
+    )
   ] });
 };
 
@@ -16883,7 +16967,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,10 +1502,8 @@ 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.
-     * String can be used for formatting purposes, e.g. "1.2k" or regionalized number, e.g. "1,200"
-     */
-    count: number | string | undefined;
+    /** 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 background color
      * @default 'transparent'
      */

package/dist/index.d.ts

@@ -1502,10 +1502,8 @@ 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.
-     * String can be used for formatting purposes, e.g. "1.2k" or regionalized number, e.g. "1,200"
-     */
-    count: number | string | undefined;
+    /** 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 background color
      * @default 'transparent'
      */

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,15 +3988,7 @@ 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, iconColor ? functionalColors : void 0, customColor[iconColor]]
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconComponent, { role: "img", size, ...otherProps, css: [IconImg, customColor[iconColor]] });
 };
 var Icon = import_react24.default.memo(IconInner);
 
@@ -5747,10 +5738,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();
@@ -8908,13 +8900,12 @@ var Counter = ({
   if (typeof count === "undefined") {
     return null;
   }
-  const isNumber = typeof count === "number";
-  const isTripleDigits = isNumber && count > 99 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { css: counterTripleValue, title: `${count}`, children: [
+  const isTripleDigits = 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 || !isNumber)), sizeStyles[size]], ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { css: [counterContainer(bgColor, Boolean(icon)), sizeStyles[size]], ...props, children: [
     icon ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       "span",
       {
@@ -11437,8 +11428,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, {
@@ -11448,13 +11443,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]
   );
@@ -11478,6 +11488,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);
@@ -11501,10 +11539,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)(
@@ -11542,18 +11587,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"
+            ] })
           ] })
         ]
       }
@@ -11571,7 +11622,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}`,
@@ -11584,9 +11635,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
         )) })
@@ -11595,7 +11653,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)" }
@@ -11618,8 +11676,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,
@@ -11634,6 +11695,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)(
@@ -11677,7 +11743,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,
@@ -11687,6 +11753,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"
@@ -11705,9 +11772,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"
@@ -18062,55 +18132,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, {})
+        ]
+      }
+    )
   ] });
 };
 
@@ -18768,7 +18846,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.39.3-alpha.11+b3ab5fb305",
+  "version": "20.41.0",
   "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.39.3-alpha.11+b3ab5fb305",
-    "@uniformdev/richtext": "^20.39.3-alpha.11+b3ab5fb305",
+    "@uniformdev/canvas": "^20.41.0",
+    "@uniformdev/richtext": "^20.41.0",
     "@vitest/coverage-v8": "3.2.4",
     "autoprefixer": "10.4.21",
     "hygen": "6.2.11",
@@ -93,5 +93,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b3ab5fb305533690de4bbd859a69196b6c26ee2f"
+  "gitHead": "0ec454ba75fa0b042566d38359e1db3bca61c30d"
 }