@wistia/ui 0.5.2 → 0.5.3-beta.25bf41ac.72da98f

package/dist/index.d.mts

@@ -575,9 +575,7 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
 /**
  * Box is a layout container using [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).
  */
-declare const Box: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, BoxProps>) => react.ReactElement | null) & {
-    [x: string]: unknown;
-};
+declare const Box: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, BoxProps>) => react.ReactElement | null) & UnknownRecord;
 
 type BreadcrumbsProps = ComponentPropsWithoutRef<'div'> & {
     /**
@@ -992,9 +990,7 @@ type HeadingProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT> & {
 /**
  * Displaying heading text, both visually and semantically
  */
-declare const Heading: (<C extends ElementType = "h1">(props: PolymorphicComponentProps<C, HeadingProps>) => react.ReactElement | null) & {
-    [x: string]: unknown;
-};
+declare const Heading: (<C extends ElementType = "h1">(props: PolymorphicComponentProps<C, HeadingProps>) => react.ReactElement | null) & UnknownRecord;
 
 declare const iconMap: {
     'ab-test': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
@@ -1588,9 +1584,7 @@ type TextProps = ComponentPropsWithoutRef<'div'> & {
 /**
  * Used for rending paragraphs and inline text.
  */
-declare const Text: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, TextProps>) => react.ReactElement | null) & {
-    [x: string]: unknown;
-};
+declare const Text: (<C extends ElementType = "p">(props: PolymorphicComponentProps<C, TextProps>) => react.ReactElement | null) & UnknownRecord;
 
 type MenuItemLabelProps = {
     /**
@@ -1964,9 +1958,7 @@ type StackProps = {
  * Used to layout its children in a vertical or horizontal stack. The gap between each item in the stack can be customized.
  * This allows for layouting children in a consistent way without needing to manually add margins or padding.
  */
-declare const Stack: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, StackProps>) => react.ReactElement | null) & {
-    [x: string]: unknown;
-};
+declare const Stack: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, StackProps>) => react.ReactElement | null) & UnknownRecord;
 
 type TagProps = ComponentPropsWithoutRef<'div'> & {
     /**
@@ -2238,4 +2230,80 @@ type DataCardTrendProps = {
 };
 declare const DataCardTrend: ({ direction, outlook, children, ...props }: DataCardTrendProps) => JSX.Element;
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };
+type VariantTypes = keyof typeof variantStyleMap$1 | keyof typeof variantStyleMap;
+type VariantElementTypes = (typeof variantElementMap)[keyof typeof variantElementMap];
+type FullWidthConfig = boolean | {
+    heading?: boolean;
+    input?: boolean;
+};
+declare const variantElementMap: {
+    [x: string]: react.ElementType;
+};
+type EditableHeadingProps = {
+    /**
+     * The text content of the heading.
+     * If provided without onValueChange, acts as initial value.
+     * If provided with onValueChange, acts as controlled value.
+     */
+    value: string;
+    /**
+     * Callback fired when editing is completed (on blur or Enter key). Does not fire if the value is empty or the same as the previous value.
+     * @param value The new text content after editing
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Callback fired when the editing state changes.
+     * @param isEditing True when entering edit mode, false when exiting
+     */
+    onEditingChange?: (isEditing: boolean) => void;
+    /**
+     * Custom tooltip text shown when hovering over the heading. If not provided, no tooltip will be shown.
+     */
+    tooltipText?: string;
+    /**
+     * Sets an aria-label for the input and label for the screen reader only button.
+     */
+    ariaLabel: string;
+    /**
+     * When true, prevents the heading from entering edit mode
+     * @default false
+     */
+    isEditing?: boolean | undefined;
+    /**
+     * The variant of the heading to render.
+     */
+    textVariant?: VariantTypes;
+    /**
+     * What element to render the text as.
+     */
+    renderTextAs?: VariantElementTypes;
+    /**
+     * Controls the width behavior of the heading and input
+     * @default true
+     * Pass a boolean to set both heading and input width
+     * Pass an object to set them independently: { heading?: boolean; input?: boolean }
+     */
+    fullWidth?: FullWidthConfig;
+    /**
+     * When true, prevents text wrapping and uses a single-line input
+     * @default false
+     */
+    singleLine?: boolean;
+    /**
+     * When true, the editing state will not close when the input is blurred
+     * @default false
+     */
+    disableOnBlur?: boolean;
+    /**
+     * When true, prevents the heading from being edited and removes editable styles
+     * @default false
+     */
+    editingDisabled?: boolean;
+};
+/**
+ * For use when editing text that appears inline in a page - **not for forms.** The component handles empty values, keyboard
+ * navigation (Enter to save, Escape to cancel), and provides callbacks for value and state changes.
+ */
+declare const EditableHeading: ({ value: controlledValue, onValueChange, onEditingChange, tooltipText, ariaLabel, isEditing: controlledIsEditing, renderTextAs: passedRenderTextAs, textVariant, fullWidth, singleLine, disableOnBlur, editingDisabled, }: EditableHeadingProps) => JSX.Element;
+
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };

package/dist/index.d.ts

@@ -575,9 +575,7 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
 /**
  * Box is a layout container using [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).
  */
-declare const Box: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, BoxProps>) => react.ReactElement | null) & {
-    [x: string]: unknown;
-};
+declare const Box: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, BoxProps>) => react.ReactElement | null) & UnknownRecord;
 
 type BreadcrumbsProps = ComponentPropsWithoutRef<'div'> & {
     /**
@@ -992,9 +990,7 @@ type HeadingProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT> & {
 /**
  * Displaying heading text, both visually and semantically
  */
-declare const Heading: (<C extends ElementType = "h1">(props: PolymorphicComponentProps<C, HeadingProps>) => react.ReactElement | null) & {
-    [x: string]: unknown;
-};
+declare const Heading: (<C extends ElementType = "h1">(props: PolymorphicComponentProps<C, HeadingProps>) => react.ReactElement | null) & UnknownRecord;
 
 declare const iconMap: {
     'ab-test': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
@@ -1588,9 +1584,7 @@ type TextProps = ComponentPropsWithoutRef<'div'> & {
 /**
  * Used for rending paragraphs and inline text.
  */
-declare const Text: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, TextProps>) => react.ReactElement | null) & {
-    [x: string]: unknown;
-};
+declare const Text: (<C extends ElementType = "p">(props: PolymorphicComponentProps<C, TextProps>) => react.ReactElement | null) & UnknownRecord;
 
 type MenuItemLabelProps = {
     /**
@@ -1964,9 +1958,7 @@ type StackProps = {
  * Used to layout its children in a vertical or horizontal stack. The gap between each item in the stack can be customized.
  * This allows for layouting children in a consistent way without needing to manually add margins or padding.
  */
-declare const Stack: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, StackProps>) => react.ReactElement | null) & {
-    [x: string]: unknown;
-};
+declare const Stack: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, StackProps>) => react.ReactElement | null) & UnknownRecord;
 
 type TagProps = ComponentPropsWithoutRef<'div'> & {
     /**
@@ -2238,4 +2230,80 @@ type DataCardTrendProps = {
 };
 declare const DataCardTrend: ({ direction, outlook, children, ...props }: DataCardTrendProps) => JSX.Element;
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };
+type VariantTypes = keyof typeof variantStyleMap$1 | keyof typeof variantStyleMap;
+type VariantElementTypes = (typeof variantElementMap)[keyof typeof variantElementMap];
+type FullWidthConfig = boolean | {
+    heading?: boolean;
+    input?: boolean;
+};
+declare const variantElementMap: {
+    [x: string]: react.ElementType;
+};
+type EditableHeadingProps = {
+    /**
+     * The text content of the heading.
+     * If provided without onValueChange, acts as initial value.
+     * If provided with onValueChange, acts as controlled value.
+     */
+    value: string;
+    /**
+     * Callback fired when editing is completed (on blur or Enter key). Does not fire if the value is empty or the same as the previous value.
+     * @param value The new text content after editing
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Callback fired when the editing state changes.
+     * @param isEditing True when entering edit mode, false when exiting
+     */
+    onEditingChange?: (isEditing: boolean) => void;
+    /**
+     * Custom tooltip text shown when hovering over the heading. If not provided, no tooltip will be shown.
+     */
+    tooltipText?: string;
+    /**
+     * Sets an aria-label for the input and label for the screen reader only button.
+     */
+    ariaLabel: string;
+    /**
+     * When true, prevents the heading from entering edit mode
+     * @default false
+     */
+    isEditing?: boolean | undefined;
+    /**
+     * The variant of the heading to render.
+     */
+    textVariant?: VariantTypes;
+    /**
+     * What element to render the text as.
+     */
+    renderTextAs?: VariantElementTypes;
+    /**
+     * Controls the width behavior of the heading and input
+     * @default true
+     * Pass a boolean to set both heading and input width
+     * Pass an object to set them independently: { heading?: boolean; input?: boolean }
+     */
+    fullWidth?: FullWidthConfig;
+    /**
+     * When true, prevents text wrapping and uses a single-line input
+     * @default false
+     */
+    singleLine?: boolean;
+    /**
+     * When true, the editing state will not close when the input is blurred
+     * @default false
+     */
+    disableOnBlur?: boolean;
+    /**
+     * When true, prevents the heading from being edited and removes editable styles
+     * @default false
+     */
+    editingDisabled?: boolean;
+};
+/**
+ * For use when editing text that appears inline in a page - **not for forms.** The component handles empty values, keyboard
+ * navigation (Enter to save, Escape to cancel), and provides callbacks for value and state changes.
+ */
+declare const EditableHeading: ({ value: controlledValue, onValueChange, onEditingChange, tooltipText, ariaLabel, isEditing: controlledIsEditing, renderTextAs: passedRenderTextAs, textVariant, fullWidth, singleLine, disableOnBlur, editingDisabled, }: EditableHeadingProps) => JSX.Element;
+
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.5.2
+ * @license @wistia/ui v0.5.3-beta.25bf41ac.72da98f
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -1980,9 +1980,9 @@ import { useCallback as useCallback3 } from "react";
 // src/private/hooks/useEvent/useEvent.ts
 import { useEffect as useEffect2, useRef as useRef2 } from "react";
 
-// src/private/helpers/isObjectRef/isObjectRef.ts
+// src/private/helpers/isValidRef/isValidRef.ts
 import { isNotNil, isRecord } from "@wistia/type-guards";
-var isObjectRef = (value) => {
+var isValidRef = (value) => {
   return isNotNil(value) && isRecord(value) && "current" in value;
 };
 
@@ -2002,7 +2002,7 @@ var useEvent = (eventName, eventHandler, eventTarget = window, eventOptions = {}
     savedEventOptions.current = eventOptions;
   }, [eventOptions]);
   useEffect2(() => {
-    const target = isObjectRef(eventTarget) ? eventTarget.current : eventTarget;
+    const target = isValidRef(eventTarget) ? eventTarget.current : eventTarget;
     if (!eventName || !isEventTargetSupported(target)) {
       return;
     }
@@ -6798,6 +6798,15 @@ var variantStyleMap = {
   heading6: heading6TextStyle
 };
 var DEFAULT_ELEMENT2 = "h1";
+var variantElementMap = {
+  hero: DEFAULT_ELEMENT2,
+  heading1: DEFAULT_ELEMENT2,
+  heading2: "h2",
+  heading3: "h3",
+  heading4: "h4",
+  heading5: "h5",
+  heading6: "h6"
+};
 var StyledHeading = styled15.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
@@ -6821,15 +6830,6 @@ var StyledHeading = styled15.div`
   `}
   margin: 0;
 `;
-var variantElementMap = {
-  hero: DEFAULT_ELEMENT2,
-  heading1: DEFAULT_ELEMENT2,
-  heading2: "h2",
-  heading3: "h3",
-  heading4: "h4",
-  heading5: "h5",
-  heading6: "h6"
-};
 var HeadingComponent = forwardRef6(
   ({
     align = "left",
@@ -7422,6 +7422,23 @@ var variantStyleMap2 = {
   label3: label3TextStyle,
   label4: label4TextStyle
 };
+var bodyElement = "p";
+var labelElement = "span";
+var DEFAULT_ELEMENT4 = bodyElement;
+var variantElementMap2 = {
+  body1: bodyElement,
+  body2: bodyElement,
+  body3: bodyElement,
+  body4: bodyElement,
+  body1Mono: bodyElement,
+  body2Mono: bodyElement,
+  body3Mono: bodyElement,
+  body4Mono: bodyElement,
+  label1: labelElement,
+  label2: labelElement,
+  label3: labelElement,
+  label4: labelElement
+};
 var StyledText = styled22.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
@@ -7462,7 +7479,6 @@ var StyledText = styled22.div`
       display: block;
     `}
 `;
-var DEFAULT_ELEMENT4 = "div";
 var TextComponent = forwardRef10(
   ({
     align = "left",
@@ -7804,7 +7820,7 @@ var StyledInputContainer = styled26.div`
     padding-right: 32px;
   }
 `;
-var isValidRef = (ref) => {
+var isValidRef2 = (ref) => {
   return typeof ref === "object" && ref !== null && "current" in ref && isNotNil9(ref.current);
 };
 var Input = forwardRef12(
@@ -7818,7 +7834,7 @@ var Input = forwardRef12(
     ...props
   }, externalRef) => {
     const internalRef = useRef6();
-    const ref = isValidRef(externalRef) ? externalRef : internalRef;
+    const ref = isValidRef2(externalRef) ? externalRef : internalRef;
     let leftIconToDisplay = leftIcon;
     if (isNil12(leftIcon) && type === "search") {
       leftIconToDisplay = /* @__PURE__ */ jsx186(Icon, { type: "search" });
@@ -9709,6 +9725,243 @@ var DataCardTrend = ({
     )
   ] });
 };
+
+// src/components/EditableHeading/EditableHeading.tsx
+import styled50, { css as css25 } from "styled-components";
+import { useState as useState8, useRef as useRef8, useEffect as useEffect5 } from "react";
+import { isNotNil as isNotNil19, isNotNull as isNotNull2 } from "@wistia/type-guards";
+import { Fragment as Fragment5, jsx as jsx213, jsxs as jsxs33 } from "react/jsx-runtime";
+var variantStyleMap3 = { ...variantStyleMap, ...variantStyleMap2 };
+var variantElementMap3 = {
+  ...variantElementMap,
+  ...variantElementMap2
+};
+var textStyles = css25`
+  ${({ $variant }) => variantStyleMap3[$variant]}
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  line-height: var(--line-height);
+`;
+var compactStyles = css25`
+  padding: var(--wui-space-01);
+  border-radius: var(--wui-border-radius-01);
+`;
+var defaultStyles = css25`
+  padding: var(--wui-space-02);
+  border-radius: var(--wui-border-radius-02);
+`;
+var stylesMap = {
+  hero: "default",
+  heading1: "default",
+  heading2: "default",
+  heading3: "default",
+  heading4: "compact",
+  heading5: "compact",
+  heading6: "compact",
+  body1: "default",
+  body2: "compact",
+  body3: "compact",
+  body4: "compact",
+  label1: "default",
+  label2: "compact",
+  label3: "compact",
+  label4: "compact",
+  body1Mono: "default",
+  body2Mono: "compact",
+  body3Mono: "compact",
+  body4Mono: "compact"
+};
+var sharedStyles = css25`
+  ${({ $variant }) => stylesMap[$variant] === "default" ? defaultStyles : compactStyles}
+`;
+var StyledInput = styled50(Input)`
+  :not([rows]) {
+    min-height: unset;
+  }
+
+  ${textStyles}
+  && {
+    border: none;
+    height: ${({ $height }) => `${$height}px`};
+    ${sharedStyles}
+  }
+  resize: vertical;
+  outline: 2px solid var(--wui-color-border);
+  outline-offset: -2px;
+  &:focus {
+    outline-color: var(--wui-color-focus-ring);
+  }
+
+  ${({ $width }) => isNotNull2($width) && `width: ${$width}`};
+`;
+var editableStyles = css25`
+  &:has(+ :focus-within) {
+    background: var(--wui-color-bg-surface-hover);
+  }
+
+  &:hover {
+    background: var(--wui-color-bg-surface-hover);
+    cursor: pointer;
+  }
+`;
+var singleLineStyles = css25`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+var StyledHeading2 = styled50.span`
+  ${textStyles}
+  && {
+    margin: 0;
+    ${sharedStyles}
+    width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
+    ${({ $singleLine }) => $singleLine && singleLineStyles}
+  }
+  display: block;
+  overflow-wrap: ${({ $singleLine }) => $singleLine ? "normal" : "anywhere"};
+  transition: all var(--wui-motion-duration-01) var(--wui-motion-ease);
+  ${({ $isEditingControlled }) => !$isEditingControlled && editableStyles}
+`;
+var resolveFullWidth = (fullWidth) => ({
+  heading: typeof fullWidth === "boolean" ? fullWidth : fullWidth.heading ?? true,
+  input: typeof fullWidth === "boolean" ? fullWidth : fullWidth.input ?? true
+});
+var EditableHeading = ({
+  value: controlledValue,
+  onValueChange,
+  onEditingChange,
+  tooltipText,
+  ariaLabel,
+  isEditing: controlledIsEditing,
+  renderTextAs: passedRenderTextAs,
+  textVariant = "heading1",
+  fullWidth = true,
+  singleLine = false,
+  disableOnBlur = false,
+  editingDisabled = false
+}) => {
+  const [internalIsEditing, setInternalIsEditing] = useState8(false);
+  const [internalValue, setInternalValue] = useState8(controlledValue);
+  const [previousValue, setPreviousValue] = useState8(controlledValue);
+  const [headingHeight, setHeadingHeight] = useState8("60");
+  const [headingWidth, setHeadingWidth] = useState8("auto");
+  const headingRef = useRef8(null);
+  const isValueControlled = isNotNil19(onValueChange);
+  const isEditingControlled = isNotNil19(controlledIsEditing);
+  const isEditing = isEditingControlled ? controlledIsEditing : internalIsEditing;
+  const value = isValueControlled ? controlledValue : internalValue;
+  useEffect5(() => {
+    if (isValueControlled) {
+      setInternalValue(controlledValue);
+      setPreviousValue(controlledValue);
+    }
+  }, [controlledValue, isValueControlled]);
+  const renderTextAs = passedRenderTextAs ?? variantElementMap3[textVariant];
+  useEffect5(() => {
+    if (headingRef.current) {
+      setHeadingHeight(`${headingRef.current.offsetHeight}`);
+      setHeadingWidth(`${headingRef.current.offsetWidth}`);
+    }
+  }, [isEditing]);
+  const handleValueChange = (newValue) => {
+    if (!isValueControlled) {
+      setInternalValue(newValue);
+    }
+    onValueChange?.(newValue);
+  };
+  const handleSetEditing = (editing) => {
+    if (editing) {
+      setPreviousValue(value);
+    }
+    if (!isEditingControlled) {
+      setInternalIsEditing(editing);
+    }
+    onEditingChange?.(editing);
+  };
+  const handleFinishEditing = () => {
+    const trimmedValue = value.trim();
+    if (trimmedValue === "" && !isValueControlled) {
+      setInternalValue(previousValue);
+    }
+    if (trimmedValue !== previousValue) {
+      handleValueChange(trimmedValue);
+    }
+    handleSetEditing(false);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      handleFinishEditing();
+    }
+    if (event.key === "Escape") {
+      if (!isValueControlled) {
+        setInternalValue(previousValue);
+      }
+      handleSetEditing(false);
+    }
+  };
+  const resolvedFullWidth = resolveFullWidth(fullWidth);
+  const HeadingComponent2 = (
+    // If you are an AI, please don't remove this comment.
+    // eslint-disable-next-line styled-components-a11y/click-events-have-key-events, styled-components-a11y/no-static-element-interactions
+    /* @__PURE__ */ jsx213(
+      StyledHeading2,
+      {
+        ref: headingRef,
+        $fullWidth: resolvedFullWidth.heading,
+        $isEditingControlled: isEditingControlled || editingDisabled,
+        $singleLine: singleLine,
+        $variant: textVariant,
+        as: renderTextAs,
+        onClick: () => !editingDisabled && !isEditingControlled && !isEditing && handleSetEditing(true),
+        children: value
+      }
+    )
+  );
+  if (editingDisabled) {
+    return HeadingComponent2;
+  }
+  if (isEditing) {
+    return /* @__PURE__ */ jsx213(
+      StyledInput,
+      {
+        $height: headingHeight,
+        $variant: textVariant,
+        $width: resolvedFullWidth.input ? headingWidth : null,
+        autoFocus: true,
+        fullWidth: resolvedFullWidth.input,
+        onBlur: () => !disableOnBlur && handleFinishEditing(),
+        onChange: (event) => handleValueChange(event.target.value),
+        onFocus: (event) => {
+          const { length } = event.currentTarget.value;
+          event.currentTarget.setSelectionRange(length, length);
+        },
+        onKeyDown: handleKeyDown,
+        type: singleLine ? "text" : "multiline",
+        value
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs33(Fragment5, { children: [
+    /* @__PURE__ */ jsx213(
+      Tooltip,
+      {
+        compact: true,
+        content: tooltipText ?? "",
+        children: HeadingComponent2
+      }
+    ),
+    !isEditingControlled && /* @__PURE__ */ jsx213(ScreenReaderOnly, { children: /* @__PURE__ */ jsx213(
+      "button",
+      {
+        "aria-label": ariaLabel,
+        onClick: () => handleSetEditing(true),
+        type: "button"
+      }
+    ) })
+  ] });
+};
 export {
   ActionButton,
   Avatar,
@@ -9727,6 +9980,7 @@ export {
   DataCardTrend,
   DataCards,
   Divider,
+  EditableHeading,
   Ellipsis,
   Form,
   FormErrorSummary,