@uniformdev/design-system 20.72.2-alpha.3 → 20.72.2

package/dist/esm/index.js

@@ -3530,6 +3530,87 @@ var inputError = css15`
     border-color: var(--action-destructive-hover);
   }
 `;
+var inputPrefixGroup = css15`
+  align-items: center;
+  background-color: var(--white);
+  border: 1px solid var(--gray-200);
+  border-radius: var(--rounded-sm);
+  display: flex;
+  min-height: 50px;
+  padding-left: var(--spacing-sm);
+  position: relative;
+  transition:
+    background var(--duration-fast) var(--timing-ease-out),
+    border-color var(--duration-fast) var(--timing-ease-out),
+    box-shadow var(--duration-fast) var(--timing-ease-out);
+
+  &:hover {
+    border-color: var(--accent-dark-hover);
+  }
+
+  &:focus-within {
+    border-color: var(--accent-dark-active);
+    box-shadow: var(--elevation-100);
+    outline: none;
+  }
+
+  &:has(input:disabled) {
+    border-color: var(--gray-200);
+  }
+
+  &:has(input:disabled) [data-input-prefix] {
+    color: var(--gray-300);
+  }
+`;
+var inputPrefixGroupError = css15`
+  border-color: var(--action-destructive-default);
+  box-shadow: var(--elevation-100);
+
+  &:hover {
+    border-color: var(--action-destructive-hover);
+  }
+`;
+var inputPrefixSlot = css15`
+  color: var(--gray-300);
+  flex: none;
+  font-size: 1rem;
+  padding-right: var(--spacing-sm);
+  pointer-events: none;
+  white-space: nowrap;
+`;
+var inputInPrefixGroup = css15`
+  appearance: none;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  color: var(--gray-700);
+  flex: 1;
+  min-height: 50px;
+  min-width: 0;
+  padding: 12px var(--spacing-base) 12px 0;
+  width: 100%;
+
+  &::placeholder {
+    color: var(--gray-400);
+  }
+
+  &:hover,
+  &:focus,
+  &:focus-visible {
+    border: 0;
+    box-shadow: none;
+    outline: none;
+  }
+
+  &:disabled,
+  &:disabled::placeholder {
+    cursor: not-allowed;
+    color: var(--gray-300);
+  }
+`;
+var inputInPrefixGroupWithIcon = css15`
+  padding-right: var(--spacing-2xl);
+`;
 var inputIcon = css15`
   align-items: center;
   display: flex;
@@ -5715,11 +5796,12 @@ var Label = ({ children, className, testId, ...props }) => {
 };
 
 // src/components/Input/Input.tsx
-import { jsx as jsx39, jsxs as jsxs25 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx39, jsxs as jsxs25 } from "@emotion/react/jsx-runtime";
 var Input = forwardRef9(
   ({
     label: label2,
     icon,
+    prefix,
     id,
     caption,
     showLabel = true,
@@ -5737,6 +5819,24 @@ var Input = forwardRef9(
     ...props
   }, ref) => {
     const isNumberInputAndMouseWheelDisabled = enableMouseWheel !== true && props.type === "number";
+    const inputElement = /* @__PURE__ */ jsx39(
+      "input",
+      {
+        id,
+        css: [
+          prefix ? inputInPrefixGroup : input("nowrap"),
+          prefix && icon ? inputInPrefixGroupWithIcon : void 0,
+          !prefix && errorMessage ? inputError : void 0,
+          !prefix && icon ? inputWithIcon : "",
+          typeof classNameControl === "object" ? classNameControl : void 0
+        ],
+        "aria-label": showLabel || typeof label2 !== "string" ? void 0 : label2,
+        className: typeof classNameControl === "string" ? classNameControl : "",
+        onWheel: isNumberInputAndMouseWheelDisabled ? disableMouseWheelEvent : void 0,
+        ...props,
+        ref
+      }
+    );
     return /* @__PURE__ */ jsxs25(
       "div",
       {
@@ -5753,31 +5853,27 @@ var Input = forwardRef9(
               children: label2
             }
           ) : null,
-          /* @__PURE__ */ jsxs25(
+          /* @__PURE__ */ jsx39(
             "div",
             {
               css: [inputContainer, typeof classNameContainer === "object" ? classNameContainer : void 0],
               className: typeof classNameContainer === "string" ? classNameContainer : "",
-              children: [
-                /* @__PURE__ */ jsx39(
-                  "input",
-                  {
-                    id,
-                    css: [
-                      input("nowrap"),
-                      typeof classNameControl === "object" ? classNameControl : void 0,
-                      errorMessage ? inputError : void 0,
-                      icon ? inputWithIcon : ""
-                    ],
-                    "aria-label": showLabel || typeof label2 !== "string" ? void 0 : label2,
-                    className: typeof classNameControl === "string" ? classNameControl : "",
-                    onWheel: isNumberInputAndMouseWheelDisabled ? disableMouseWheelEvent : void 0,
-                    ...props,
-                    ref
-                  }
-                ),
+              children: prefix ? /* @__PURE__ */ jsxs25(
+                "div",
+                {
+                  css: [inputPrefixGroup, errorMessage ? inputPrefixGroupError : void 0],
+                  "data-input-prefix-group": true,
+                  "data-testid": "input-prefix-group",
+                  children: [
+                    /* @__PURE__ */ jsx39("span", { css: inputPrefixSlot, "aria-hidden": "true", "data-input-prefix": true, children: prefix }),
+                    inputElement,
+                    icon ? /* @__PURE__ */ jsx39("div", { css: inputIcon, children: icon }) : null
+                  ]
+                }
+              ) : /* @__PURE__ */ jsxs25(Fragment4, { children: [
+                inputElement,
                 icon ? /* @__PURE__ */ jsx39("div", { css: inputIcon, children: icon }) : null
-              ]
+              ] })
             }
           ),
           /* @__PURE__ */ jsx39(
@@ -6294,7 +6390,7 @@ var DebouncedInputKeywordSearch = forwardRef10(
 
 // src/components/Input/InputSelect.tsx
 import { forwardRef as forwardRef11 } from "react";
-import { Fragment as Fragment4, jsx as jsx43, jsxs as jsxs27 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx43, jsxs as jsxs27 } from "@emotion/react/jsx-runtime";
 var InputSelect = forwardRef11(
   ({
     label: label2,
@@ -6318,7 +6414,7 @@ var InputSelect = forwardRef11(
         css: [inputContainer, typeof classNameContainer === "object" ? classNameContainer : void 0],
         className: typeof classNameContainer === "string" ? classNameContainer : "",
         children: [
-          showLabel ? /* @__PURE__ */ jsx43(Fragment4, { children: /* @__PURE__ */ jsxs27(
+          showLabel ? /* @__PURE__ */ jsx43(Fragment5, { children: /* @__PURE__ */ jsxs27(
             Label,
             {
               htmlFor: props.id,
@@ -6754,10 +6850,10 @@ var SuccessMessage = ({ message, testId, ...props }) => {
 
 // src/components/Input/Textarea.tsx
 import { forwardRef as forwardRef14 } from "react";
-import { Fragment as Fragment5, jsx as jsx49, jsxs as jsxs32 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx49, jsxs as jsxs32 } from "@emotion/react/jsx-runtime";
 var Textarea = forwardRef14(
   ({ label: label2, icon, id, caption, showLabel = true, errorMessage, warningMessage, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs32(Fragment5, { children: [
+    return /* @__PURE__ */ jsxs32(Fragment6, { children: [
       showLabel ? /* @__PURE__ */ jsx49("label", { htmlFor: id, css: [labelText], children: label2 }) : null,
       /* @__PURE__ */ jsxs32("div", { css: [inputContainer], children: [
         /* @__PURE__ */ jsx49(
@@ -7150,7 +7246,7 @@ var wholeButtonWithMenuIconOffset = css39`
 `;
 
 // src/components/ButtonWithMenu/ButtonWithMenu.tsx
-import { Fragment as Fragment6, jsx as jsx52, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx52, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
 var buttonTheme2 = {
   primary: buttonPrimary2,
   secondary: buttonSecondary2,
@@ -7263,7 +7359,7 @@ var ButtonWithMenu = ({
         "data-testid": "multioptions-button",
         "aria-disabled": isButtonDisabled,
         children: [
-          tip ? /* @__PURE__ */ jsx52(Tooltip, { title: /* @__PURE__ */ jsx52(Fragment6, { children: tip }), children: /* @__PURE__ */ jsx52("span", { children: primaryButton }) }) : /* @__PURE__ */ jsx52("span", { children: primaryButton }),
+          tip ? /* @__PURE__ */ jsx52(Tooltip, { title: /* @__PURE__ */ jsx52(Fragment7, { children: tip }), children: /* @__PURE__ */ jsx52("span", { children: primaryButton }) }) : /* @__PURE__ */ jsx52("span", { children: primaryButton }),
           isButtonDisabled ? menuButton : /* @__PURE__ */ jsx52(
             Menu,
             {
@@ -7748,7 +7844,7 @@ var paragraph = css44`
 `;
 
 // src/components/Typography/Paragraph.tsx
-import { Fragment as Fragment7, jsx as jsx57 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx57 } from "@emotion/react/jsx-runtime";
 import { createElement } from "@emotion/react";
 var Paragraph = ({ className, htmlContent, children, ...pAttributes }) => {
   if (htmlContent && Array.isArray(htmlContent)) {
@@ -7762,7 +7858,7 @@ var Paragraph = ({ className, htmlContent, children, ...pAttributes }) => {
         dangerouslySetInnerHTML: { __html: html }
       }
     ));
-    return /* @__PURE__ */ jsx57(Fragment7, { children: paragraphContent });
+    return /* @__PURE__ */ jsx57(Fragment8, { children: paragraphContent });
   }
   return htmlContent ? /* @__PURE__ */ jsx57(
     "p",
@@ -8867,7 +8963,7 @@ var DateTimePickerVariant = /* @__PURE__ */ ((DateTimePickerVariant2) => {
 })(DateTimePickerVariant || {});
 
 // src/components/DateTimePicker/DateTimePicker.tsx
-import { Fragment as Fragment8, jsx as jsx67, jsxs as jsxs45 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx67, jsxs as jsxs45 } from "@emotion/react/jsx-runtime";
 var timeZoneOptions = typeof Intl !== "undefined" && typeof Intl.supportedValuesOf === "function" ? Intl.supportedValuesOf("timeZone") : ["Etc/UTC"];
 function getTimezoneOffset(tz) {
   const now = /* @__PURE__ */ new Date();
@@ -8927,7 +9023,7 @@ var DateTimePickerPopoverContent = ({
   handleTimezoneChange,
   handleSelectClick,
   setOpen
-}) => /* @__PURE__ */ jsxs45(Fragment8, { children: [
+}) => /* @__PURE__ */ jsxs45(Fragment9, { children: [
   /* @__PURE__ */ jsxs45("div", { css: popoverInnerContent, children: [
     /* @__PURE__ */ jsx67("div", { css: calendarSection, children: /* @__PURE__ */ jsx67(
       Calendar,
@@ -9764,7 +9860,7 @@ var DrawerContent2 = ({ children, buttonGroup, noPadding = false, ...props }) =>
 
 // src/components/Drawer/DrawerRenderer.tsx
 import { useEffect as useEffect9, useMemo as useMemo4 } from "react";
-import { Fragment as Fragment9, jsx as jsx74, jsxs as jsxs50 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx74, jsxs as jsxs50 } from "@emotion/react/jsx-runtime";
 var drawerWidth = {
   narrow: "29rem",
   medium: "43rem",
@@ -9857,7 +9953,7 @@ var DrawerWrapper = ({
     offsetInPx = Math.round(maxLayeringInPx * relativeLevel);
   }
   const calculatedWidth = `calc(${width} - ${offsetInPx}px)`;
-  return /* @__PURE__ */ jsxs50(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs50(Fragment10, { children: [
     /* @__PURE__ */ jsx74("div", { css: drawerWrapperOverlayStyles, onClick: onOverlayClick }),
     /* @__PURE__ */ jsx74(
       "div",
@@ -10591,10 +10687,10 @@ var IntegrationLoadingFrame = css67`
 `;
 
 // src/components/Tiles/IntegrationLoadingTile.tsx
-import { Fragment as Fragment10, jsx as jsx86, jsxs as jsxs59 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx86, jsxs as jsxs59 } from "@emotion/react/jsx-runtime";
 var IntegrationLoadingTile = ({ count = 1 }) => {
   const componentCount = Array.from(Array(count).keys());
-  return /* @__PURE__ */ jsx86(Fragment10, { children: componentCount.map((i) => /* @__PURE__ */ jsxs59("div", { css: IntegrationLoadingTileContainer, children: [
+  return /* @__PURE__ */ jsx86(Fragment11, { children: componentCount.map((i) => /* @__PURE__ */ jsxs59("div", { css: IntegrationLoadingTileContainer, children: [
     /* @__PURE__ */ jsx86("div", { css: [IntegrationLoadingTileImg, IntegrationLoadingFrame], role: "presentation" }),
     /* @__PURE__ */ jsx86("div", { css: [IntegrationLoadingTileText, IntegrationLoadingFrame] })
   ] }, i)) });
@@ -10934,7 +11030,7 @@ var IntegrationModalHeaderContentWrapper = css72`
 `;
 
 // src/components/IntegrationModalHeader/IntegrationModalHeader.tsx
-import { Fragment as Fragment11, jsx as jsx93, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx93, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
 var HexModalBackground = ({ ...props }) => {
   return /* @__PURE__ */ jsxs62(
     "svg",
@@ -10975,7 +11071,7 @@ var HexModalBackground = ({ ...props }) => {
   );
 };
 var IntegrationModalHeader = ({ icon, name, menu, children }) => {
-  return /* @__PURE__ */ jsxs62(Fragment11, { children: [
+  return /* @__PURE__ */ jsxs62(Fragment12, { children: [
     /* @__PURE__ */ jsx93(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
     /* @__PURE__ */ jsx93("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ jsxs62("div", { css: IntegrationModalHeaderTitleGroup, children: [
       icon ? /* @__PURE__ */ jsx93(IntegrationModalIcon, { icon, name: name || "" }) : null,
@@ -12112,7 +12208,7 @@ var QuickFilter = ({
 };
 
 // src/components/LabelsQuickFilter/LabelsQuickFilter.tsx
-import { Fragment as Fragment12, jsx as jsx100, jsxs as jsxs67 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx100, jsxs as jsxs67 } from "@emotion/react/jsx-runtime";
 var LabelsQuickFilter = ({
   buttonText,
   addButtonText,
@@ -12328,7 +12424,7 @@ var LabelsQuickFilter = ({
           }
           return renderLabelItem(item);
         }),
-        canCreateLabel && onCreateLabel ? /* @__PURE__ */ jsxs67(Fragment12, { children: [
+        canCreateLabel && onCreateLabel ? /* @__PURE__ */ jsxs67(Fragment13, { children: [
           filteredItems.length > 0 ? /* @__PURE__ */ jsx100(MenuItemSeparator, {}) : null,
           /* @__PURE__ */ jsx100(MenuItem, { hideOnClick: false, disabled: isCreateDisabled, onClick: () => onCreateLabel(searchTerm), children: /* @__PURE__ */ jsxs67(HorizontalRhythm, { align: "center", gap: "sm", css: { fontSize: "var(--fs-sm)" }, children: [
             /* @__PURE__ */ jsx100("span", { css: { width: "var(--spacing-base)", flexShrink: 0 } }),
@@ -12383,7 +12479,7 @@ var PopoverBody2 = ({
 };
 
 // src/components/Popover/Popover.tsx
-import { Fragment as Fragment13, jsx as jsx102, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx102, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
 var PopoverComponentContext = createContext7(null);
 var Popover2 = ({
   iconColor = "action",
@@ -12473,7 +12569,7 @@ var Popover2 = ({
         title: buttonText,
         "data-testid": testId,
         disabled: disabled2,
-        children: trigger2 ? trigger2 : /* @__PURE__ */ jsxs68(Fragment13, { children: [
+        children: trigger2 ? trigger2 : /* @__PURE__ */ jsxs68(Fragment14, { children: [
           /* @__PURE__ */ jsx102(Icon, { icon, iconColor, size: iconSize2 }),
           /* @__PURE__ */ jsx102("span", { hidden: true, children: buttonText })
         ] })
@@ -13382,7 +13478,7 @@ var CoverSelectedChip = css86`
 `;
 
 // src/components/Objects/ObjectGridItemCardCover.tsx
-import { Fragment as Fragment14, jsx as jsx113, jsxs as jsxs78 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx113, jsxs as jsxs78 } from "@emotion/react/jsx-runtime";
 var ObjectGridItemCardCover = (props) => {
   if ("imageUrl" in props && props.imageUrl) {
     const { imageUrl, srcSet, alt, errorFallbackSrc } = props;
@@ -13416,7 +13512,7 @@ var ObjectGridItemCover = ({
   coverSlotBottomRight,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs78(Fragment14, { children: [
+  return /* @__PURE__ */ jsxs78(Fragment15, { children: [
     coverSlotLeft ? /* @__PURE__ */ jsx113("div", { css: [CoverSlot, CoverSlotLeft], children: coverSlotLeft }) : null,
     /* @__PURE__ */ jsx113(ObjectGridItemCardCover, { ...props }),
     coverSlotRight ? /* @__PURE__ */ jsx113("div", { css: [CoverSlot, CoverSlotRight], children: coverSlotRight }) : null,
@@ -14443,7 +14539,7 @@ var previewModalImage = css97`
 `;
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
-import { Fragment as Fragment15, jsx as jsx128, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx128, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
 function ParameterImagePreview({ imageSrc }) {
   const [showModal, setShowModal] = useState24(false);
   return imageSrc ? /* @__PURE__ */ jsxs88("div", { css: previewWrapper, children: [
@@ -14462,7 +14558,7 @@ function ParameterImagePreview({ imageSrc }) {
   ] }) : null;
 }
 var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
-  return open ? /* @__PURE__ */ jsx128(Fragment15, { children: createPortal2(
+  return open ? /* @__PURE__ */ jsx128(Fragment16, { children: createPortal2(
     /* @__PURE__ */ jsx128(
       Modal,
       {
@@ -15013,7 +15109,7 @@ var ParameterShellPlaceholder = ({ children }) => {
 var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx131(Tooltip, { title: "The default value has been overridden", ...props.tooltipProps, children: /* @__PURE__ */ jsx131("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx131("span", { hidden: true, children: "reset overridden value to default" }) }) });
 
 // src/components/ParameterInputs/ParameterImage.tsx
-import { Fragment as Fragment16, jsx as jsx132, jsxs as jsxs90 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx132, jsxs as jsxs90 } from "@emotion/react/jsx-runtime";
 var ParameterImage = forwardRef25(
   ({ children, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
@@ -15027,7 +15123,7 @@ var ParameterImageInner = forwardRef25((props, ref) => {
   const { value } = props;
   const { id, label: label2, hiddenLabel, errorMessage } = useParameterShell();
   const deferredValue = useDeferredValue(value);
-  return /* @__PURE__ */ jsxs90(Fragment16, { children: [
+  return /* @__PURE__ */ jsxs90(Fragment17, { children: [
     /* @__PURE__ */ jsx132(
       "input",
       {
@@ -15366,7 +15462,7 @@ var ParameterMultiSelectInner = (props) => {
 };
 
 // src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
-import { Fragment as Fragment17, jsx as jsx137, jsxs as jsxs92 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx137, jsxs as jsxs92 } from "@emotion/react/jsx-runtime";
 var ParameterNameAndPublicIdInput = ({
   id,
   onBlur,
@@ -15392,7 +15488,7 @@ var ParameterNameAndPublicIdInput = ({
     navigator.clipboard.writeText(values[publicIdFieldName]);
   };
   autoFocus == null ? void 0 : autoFocus();
-  return /* @__PURE__ */ jsxs92(Fragment17, { children: [
+  return /* @__PURE__ */ jsxs92(Fragment18, { children: [
     /* @__PURE__ */ jsx137(
       ParameterInput,
       {
@@ -16677,7 +16773,7 @@ var normalizeStateForDeepEqualComparison = (editorState) => {
 };
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-import { Fragment as Fragment18, jsx as jsx141, jsxs as jsxs94 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx141, jsxs as jsxs94 } from "@emotion/react/jsx-runtime";
 var isProjectMapLinkValue = (value) => {
   return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
     value.nodeId && value.path && value.projectMapId
@@ -16750,12 +16846,28 @@ function convertAnchorElement(domNode) {
   } else if (type === "tel" && path.startsWith("tel:")) {
     path = path.replace("tel:", "");
   }
+  let attributes = void 0;
+  if (linkFromAttribute && typeof linkFromAttribute === "object") {
+    if ("attributes" in linkFromAttribute && linkFromAttribute.attributes !== null && typeof linkFromAttribute.attributes === "object") {
+      const raw = linkFromAttribute.attributes;
+      const parsed = {};
+      for (const [k, v] of Object.entries(raw)) {
+        if (typeof v === "string") {
+          parsed[k] = v;
+        }
+      }
+      if (Object.keys(parsed).length > 0) {
+        attributes = parsed;
+      }
+    }
+  }
   const value = {
     type,
     path,
     projectMapId,
     nodeId,
-    dynamicInputValues
+    dynamicInputValues,
+    attributes
   };
   if (isProjectMapLinkValue(value) || isNonProjectMapLinkValue(value)) {
     node = $createLinkNode(value);
@@ -17165,7 +17277,7 @@ function LinkNodePlugin({
       });
     });
   };
-  return /* @__PURE__ */ jsxs94(Fragment18, { children: [
+  return /* @__PURE__ */ jsxs94(Fragment19, { children: [
     /* @__PURE__ */ jsx141(
       NodeEventPlugin,
       {
@@ -17699,7 +17811,7 @@ import { calculateZoomLevel } from "@lexical/utils";
 import { $getNearestNodeFromDOMNode } from "lexical";
 import { useCallback as useCallback15, useEffect as useEffect26, useMemo as useMemo11, useRef as useRef18, useState as useState29 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { Fragment as Fragment19, jsx as jsx143, jsxs as jsxs96 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx143, jsxs as jsxs96 } from "@emotion/react/jsx-runtime";
 var MIN_ROW_HEIGHT = 33;
 var MIN_COLUMN_WIDTH = 50;
 var tableResizer = css105`
@@ -18000,7 +18112,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
     };
   }, [activeCell, draggingDirection, mouseCurrentPos, positioningAnchorEl]);
   const resizerStyles = getResizers();
-  return /* @__PURE__ */ jsx143("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ jsxs96(Fragment19, { children: [
+  return /* @__PURE__ */ jsx143("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ jsxs96(Fragment20, { children: [
     /* @__PURE__ */ jsx143(
       "div",
       {
@@ -18260,7 +18372,7 @@ var useRichTextToolbarState = ({ config }) => {
 };
 
 // src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
-import { Fragment as Fragment20, jsx as jsx144, jsxs as jsxs97 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx144, jsxs as jsxs97 } from "@emotion/react/jsx-runtime";
 var toolbar = css106`
   ${scrollbarStyles}
   background: var(--gray-50);
@@ -18517,7 +18629,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
           children: /* @__PURE__ */ jsx144(RichTextToolbarIcon, { icon: "link" })
         }
       ) }) : null,
-      visibleLists.size > 0 ? /* @__PURE__ */ jsxs97(Fragment20, { children: [
+      visibleLists.size > 0 ? /* @__PURE__ */ jsxs97(Fragment21, { children: [
         visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx144(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx144(
           "button",
           {
@@ -18700,7 +18812,7 @@ var editorInput = css107`
 `;
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { Fragment as Fragment21, jsx as jsx145, jsxs as jsxs98 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx145, jsxs as jsxs98 } from "@emotion/react/jsx-runtime";
 var ParameterRichText = ({
   label: label2,
   labelLeadingIcon,
@@ -18729,7 +18841,7 @@ var ParameterRichText = ({
       menuItems,
       children: [
         /* @__PURE__ */ jsx145(ParameterRichTextInner, { ...innerProps, children }),
-        menuItems ? /* @__PURE__ */ jsx145(ParameterMenuButton, { label: `${label2} menu`, children: /* @__PURE__ */ jsx145(Fragment21, { children: menuItems }) }) : null
+        menuItems ? /* @__PURE__ */ jsx145(ParameterMenuButton, { label: `${label2} menu`, children: /* @__PURE__ */ jsx145(Fragment22, { children: menuItems }) }) : null
       ]
     }
   );
@@ -18798,7 +18910,7 @@ var ParameterRichTextInner = ({
     },
     editable: !richTextProps.readOnly
   };
-  return /* @__PURE__ */ jsxs98(Fragment21, { children: [
+  return /* @__PURE__ */ jsxs98(Fragment22, { children: [
     /* @__PURE__ */ jsx145("div", { css: [editorWrapper, editorThemeStyles], className: editorWrapperClassName, children: /* @__PURE__ */ jsx145(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx145(RichText, { ...richTextProps, children }) }) }),
     editorFooter ? editorFooter : null
   ] });
@@ -18866,7 +18978,7 @@ var RichText = ({
       setPortalContainerRef(_portalContainerRef);
     }
   };
-  return /* @__PURE__ */ jsxs98(Fragment21, { children: [
+  return /* @__PURE__ */ jsxs98(Fragment22, { children: [
     readOnly || minimalInteractivity ? null : /* @__PURE__ */ jsx145(
       RichTextToolbar_default,
       {
@@ -18916,7 +19028,7 @@ var RichText = ({
               ]
             }
           ),
-          /* @__PURE__ */ jsx145(Fragment21, { children }),
+          /* @__PURE__ */ jsx145(Fragment22, { children }),
           editorContainerRef ? /* @__PURE__ */ jsx145(
             LinkNodePlugin,
             {
@@ -20341,9 +20453,9 @@ function AnimatedHeaderItem({ index, children }) {
 }
 
 // src/components/StackedModal/StackedModalStep.tsx
-import { Fragment as Fragment22, jsx as jsx157, jsxs as jsxs104 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx157, jsxs as jsxs104 } from "@emotion/react/jsx-runtime";
 function StackedModalStep({ children, buttonGroup }) {
-  return /* @__PURE__ */ jsxs104(Fragment22, { children: [
+  return /* @__PURE__ */ jsxs104(Fragment23, { children: [
     /* @__PURE__ */ jsx157("div", { css: stepContentStyles, children }),
     buttonGroup ? /* @__PURE__ */ jsx157(
       HorizontalRhythm,
@@ -20549,7 +20661,7 @@ var SwitchInputContainerAlignmentRight = css116`
 `;
 
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment23, jsx as jsx160, jsxs as jsxs106 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx160, jsxs as jsxs106 } from "@emotion/react/jsx-runtime";
 var Switch = forwardRef35(
   ({
     label: label2,
@@ -20578,7 +20690,7 @@ var Switch = forwardRef35(
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
-    return /* @__PURE__ */ jsxs106(Fragment23, { children: [
+    return /* @__PURE__ */ jsxs106(Fragment24, { children: [
       /* @__PURE__ */ jsxs106(
         "label",
         {

package/dist/index.d.mts

@@ -2283,13 +2283,20 @@ type InfoMessageProps = React.HTMLAttributes<HTMLSpanElement> & {
  */
 declare const InfoMessage: ({ message, testId, icon, ...props }: InfoMessageProps) => _emotion_react_jsx_runtime.JSX.Element | null;
 
-type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> & {
     /** (optional) sets the label value */
     label?: string | ReactNode;
     /** (optional) sets caption text value */
     caption?: string | ReactNode;
     /** (optional) add an input icon to the input field */
     icon?: ReactElement;
+    /**
+     * Static leading text adornment inside the input border (e.g. "#", "$").
+     * Decorative; not part of the input value. Intended for plain text inputs only —
+     * the prefixed layout uses a separate inner input style, so `aria-invalid` on the
+     * control alone won't apply error border styling; use `errorMessage` instead.
+     */
+    prefix?: string;
     /** (optional) sets whether to show the label or hide it and add a aria-label attributes to the input field directly */
     showLabel?: boolean;
     /** (optional) sets and shows the the error message value */
@@ -2330,13 +2337,20 @@ type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
  * Input Component
  * @example - <Input label="my label" id="some-id" name="some-name" caption="some help text" errorMessage={hasError ? 'something went wrong' : undefined} />
  */
-declare const Input: React$1.ForwardRefExoticComponent<React$1.InputHTMLAttributes<HTMLInputElement> & {
+declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "prefix"> & {
     /** (optional) sets the label value */
     label?: string | ReactNode;
     /** (optional) sets caption text value */
     caption?: string | ReactNode;
     /** (optional) add an input icon to the input field */
     icon?: ReactElement;
+    /**
+     * Static leading text adornment inside the input border (e.g. "#", "$").
+     * Decorative; not part of the input value. Intended for plain text inputs only —
+     * the prefixed layout uses a separate inner input style, so `aria-invalid` on the
+     * control alone won't apply error border styling; use `errorMessage` instead.
+     */
+    prefix?: string;
     /** (optional) sets whether to show the label or hide it and add a aria-label attributes to the input field directly */
     showLabel?: boolean;
     /** (optional) sets and shows the the error message value */

package/dist/index.d.ts

@@ -2283,13 +2283,20 @@ type InfoMessageProps = React.HTMLAttributes<HTMLSpanElement> & {
  */
 declare const InfoMessage: ({ message, testId, icon, ...props }: InfoMessageProps) => _emotion_react_jsx_runtime.JSX.Element | null;
 
-type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> & {
     /** (optional) sets the label value */
     label?: string | ReactNode;
     /** (optional) sets caption text value */
     caption?: string | ReactNode;
     /** (optional) add an input icon to the input field */
     icon?: ReactElement;
+    /**
+     * Static leading text adornment inside the input border (e.g. "#", "$").
+     * Decorative; not part of the input value. Intended for plain text inputs only —
+     * the prefixed layout uses a separate inner input style, so `aria-invalid` on the
+     * control alone won't apply error border styling; use `errorMessage` instead.
+     */
+    prefix?: string;
     /** (optional) sets whether to show the label or hide it and add a aria-label attributes to the input field directly */
     showLabel?: boolean;
     /** (optional) sets and shows the the error message value */
@@ -2330,13 +2337,20 @@ type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
  * Input Component
  * @example - <Input label="my label" id="some-id" name="some-name" caption="some help text" errorMessage={hasError ? 'something went wrong' : undefined} />
  */
-declare const Input: React$1.ForwardRefExoticComponent<React$1.InputHTMLAttributes<HTMLInputElement> & {
+declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "prefix"> & {
     /** (optional) sets the label value */
     label?: string | ReactNode;
     /** (optional) sets caption text value */
     caption?: string | ReactNode;
     /** (optional) add an input icon to the input field */
     icon?: ReactElement;
+    /**
+     * Static leading text adornment inside the input border (e.g. "#", "$").
+     * Decorative; not part of the input value. Intended for plain text inputs only —
+     * the prefixed layout uses a separate inner input style, so `aria-invalid` on the
+     * control alone won't apply error border styling; use `errorMessage` instead.
+     */
+    prefix?: string;
     /** (optional) sets whether to show the label or hide it and add a aria-label attributes to the input field directly */
     showLabel?: boolean;
     /** (optional) sets and shows the the error message value */

package/dist/index.js

@@ -5299,6 +5299,87 @@ var inputError = import_react22.css`
     border-color: var(--action-destructive-hover);
   }
 `;
+var inputPrefixGroup = import_react22.css`
+  align-items: center;
+  background-color: var(--white);
+  border: 1px solid var(--gray-200);
+  border-radius: var(--rounded-sm);
+  display: flex;
+  min-height: 50px;
+  padding-left: var(--spacing-sm);
+  position: relative;
+  transition:
+    background var(--duration-fast) var(--timing-ease-out),
+    border-color var(--duration-fast) var(--timing-ease-out),
+    box-shadow var(--duration-fast) var(--timing-ease-out);
+
+  &:hover {
+    border-color: var(--accent-dark-hover);
+  }
+
+  &:focus-within {
+    border-color: var(--accent-dark-active);
+    box-shadow: var(--elevation-100);
+    outline: none;
+  }
+
+  &:has(input:disabled) {
+    border-color: var(--gray-200);
+  }
+
+  &:has(input:disabled) [data-input-prefix] {
+    color: var(--gray-300);
+  }
+`;
+var inputPrefixGroupError = import_react22.css`
+  border-color: var(--action-destructive-default);
+  box-shadow: var(--elevation-100);
+
+  &:hover {
+    border-color: var(--action-destructive-hover);
+  }
+`;
+var inputPrefixSlot = import_react22.css`
+  color: var(--gray-300);
+  flex: none;
+  font-size: 1rem;
+  padding-right: var(--spacing-sm);
+  pointer-events: none;
+  white-space: nowrap;
+`;
+var inputInPrefixGroup = import_react22.css`
+  appearance: none;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  color: var(--gray-700);
+  flex: 1;
+  min-height: 50px;
+  min-width: 0;
+  padding: 12px var(--spacing-base) 12px 0;
+  width: 100%;
+
+  &::placeholder {
+    color: var(--gray-400);
+  }
+
+  &:hover,
+  &:focus,
+  &:focus-visible {
+    border: 0;
+    box-shadow: none;
+    outline: none;
+  }
+
+  &:disabled,
+  &:disabled::placeholder {
+    cursor: not-allowed;
+    color: var(--gray-300);
+  }
+`;
+var inputInPrefixGroupWithIcon = import_react22.css`
+  padding-right: var(--spacing-2xl);
+`;
 var inputIcon = import_react22.css`
   align-items: center;
   display: flex;
@@ -7553,6 +7634,7 @@ var Input = (0, import_react49.forwardRef)(
   ({
     label: label2,
     icon,
+    prefix,
     id,
     caption,
     showLabel = true,
@@ -7570,6 +7652,24 @@ var Input = (0, import_react49.forwardRef)(
     ...props
   }, ref) => {
     const isNumberInputAndMouseWheelDisabled = enableMouseWheel !== true && props.type === "number";
+    const inputElement = /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      "input",
+      {
+        id,
+        css: [
+          prefix ? inputInPrefixGroup : input("nowrap"),
+          prefix && icon ? inputInPrefixGroupWithIcon : void 0,
+          !prefix && errorMessage ? inputError : void 0,
+          !prefix && icon ? inputWithIcon : "",
+          typeof classNameControl === "object" ? classNameControl : void 0
+        ],
+        "aria-label": showLabel || typeof label2 !== "string" ? void 0 : label2,
+        className: typeof classNameControl === "string" ? classNameControl : "",
+        onWheel: isNumberInputAndMouseWheelDisabled ? disableMouseWheelEvent : void 0,
+        ...props,
+        ref
+      }
+    );
     return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
       "div",
       {
@@ -7586,31 +7686,27 @@ var Input = (0, import_react49.forwardRef)(
               children: label2
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             "div",
             {
               css: [inputContainer, typeof classNameContainer === "object" ? classNameContainer : void 0],
               className: typeof classNameContainer === "string" ? classNameContainer : "",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                  "input",
-                  {
-                    id,
-                    css: [
-                      input("nowrap"),
-                      typeof classNameControl === "object" ? classNameControl : void 0,
-                      errorMessage ? inputError : void 0,
-                      icon ? inputWithIcon : ""
-                    ],
-                    "aria-label": showLabel || typeof label2 !== "string" ? void 0 : label2,
-                    className: typeof classNameControl === "string" ? classNameControl : "",
-                    onWheel: isNumberInputAndMouseWheelDisabled ? disableMouseWheelEvent : void 0,
-                    ...props,
-                    ref
-                  }
-                ),
+              children: prefix ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+                "div",
+                {
+                  css: [inputPrefixGroup, errorMessage ? inputPrefixGroupError : void 0],
+                  "data-input-prefix-group": true,
+                  "data-testid": "input-prefix-group",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { css: inputPrefixSlot, "aria-hidden": "true", "data-input-prefix": true, children: prefix }),
+                    inputElement,
+                    icon ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { css: inputIcon, children: icon }) : null
+                  ]
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+                inputElement,
                 icon ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { css: inputIcon, children: icon }) : null
-              ]
+              ] })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
@@ -18763,12 +18859,28 @@ function convertAnchorElement(domNode) {
   } else if (type === "tel" && path.startsWith("tel:")) {
     path = path.replace("tel:", "");
   }
+  let attributes = void 0;
+  if (linkFromAttribute && typeof linkFromAttribute === "object") {
+    if ("attributes" in linkFromAttribute && linkFromAttribute.attributes !== null && typeof linkFromAttribute.attributes === "object") {
+      const raw = linkFromAttribute.attributes;
+      const parsed = {};
+      for (const [k, v] of Object.entries(raw)) {
+        if (typeof v === "string") {
+          parsed[k] = v;
+        }
+      }
+      if (Object.keys(parsed).length > 0) {
+        attributes = parsed;
+      }
+    }
+  }
   const value = {
     type,
     path,
     projectMapId,
     nodeId,
-    dynamicInputValues
+    dynamicInputValues,
+    attributes
   };
   if (isProjectMapLinkValue(value) || isNonProjectMapLinkValue(value)) {
     node = $createLinkNode(value);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "20.72.2-alpha.3+a1f072e7b4",
+  "version": "20.72.2",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "exports": {
@@ -34,8 +34,8 @@
     "@storybook/react-vite": "10.4.6",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
-    "@uniformdev/canvas": "^20.72.2-alpha.3+a1f072e7b4",
-    "@uniformdev/richtext": "^20.72.2-alpha.3+a1f072e7b4",
+    "@uniformdev/canvas": "^20.72.2",
+    "@uniformdev/richtext": "^20.72.2",
     "autoprefixer": "10.5.0",
     "hygen": "6.2.11",
     "jsdom": "29.1.1",
@@ -82,5 +82,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a1f072e7b42ac4b3c694ebdd2e75216efd74a9c2"
+  "gitHead": "8b65535fb3ec81e23f9eb8e0ed0b0be478f6e0e8"
 }