@wistia/ui 0.13.1 → 0.13.2-beta.0f8bc2be.fe66503

package/dist/index.d.mts

@@ -1528,6 +1528,62 @@ declare const Divider: {
     displayName: string;
 };
 
+type AlignmentTypes$1 = 'center' | 'justify' | 'left' | 'right';
+declare const variantStyleMap$1: {
+    hero: styled_components.FlattenSimpleInterpolation;
+    heading1: styled_components.FlattenSimpleInterpolation;
+    heading2: styled_components.FlattenSimpleInterpolation;
+    heading3: styled_components.FlattenSimpleInterpolation;
+    heading4: styled_components.FlattenSimpleInterpolation;
+    heading5: styled_components.FlattenSimpleInterpolation;
+    heading6: styled_components.FlattenSimpleInterpolation;
+};
+declare const DEFAULT_ELEMENT = "h1";
+type HeadingProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT> & {
+    /**
+     * The horizontal alignment
+     * <br />
+     * _Note: this only affects block elements_
+     */
+    align?: AlignmentTypes$1;
+    /**
+     * The content of the heading
+     */
+    children: ReactNode;
+    /**
+     * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * Styles to text as disabled
+     */
+    disabled?: boolean;
+    /**
+     * Display the text as inline content
+     */
+    inline?: boolean;
+    /**
+     * Prevents text from being highlighted and copied
+     */
+    preventUserSelect?: boolean;
+    renderAs?: ElementType;
+    /**
+     * Number of lines to display before truncating with an ellipsis.
+     * Set to 1 to truncate after a single line, 2 for two lines, etc.
+     * <br />
+     * _Note: this only affects block elements_
+     */
+    truncate?: number;
+    /**
+     * The text style to display. This will also affect what element (h1, h2, etc) is rendered, unless the `renderAs` prop is used
+     */
+    variant?: keyof typeof variantStyleMap$1;
+};
+/**
+ * Displaying heading text, both visually and semantically
+ */
+declare const Heading: (<C extends ElementType = "h1">(props: PolymorphicComponentProps<C, HeadingProps>) => react.ReactElement | null) & UnknownRecord;
+
 type EditableHeadingProps = {
     /**
      * The initial text content of the heading.
@@ -1552,6 +1608,10 @@ type EditableHeadingProps = {
      * Sets an aria-label for the input and label for the screen reader only button.
      */
     ariaLabel?: string;
+    /**
+     * The text style to display. This will also affect what element (h1, h2, etc) is rendered, unless the renderAs prop is used
+     */
+    variant?: HeadingProps['variant'];
     /**
      * Force editing state for testing purposes
      * @ignore
@@ -1569,7 +1629,7 @@ type EditableHeadingProps = {
  * an accessible button that enables editing mode. The component handles empty values, keyboard
  * navigation (Enter to save, Escape to cancel), and provides callbacks for value and state changes.
  */
-declare const EditableHeading: ({ children, onValueChange, onEditingChange, tooltipText, ariaLabel, __forceEditing, editingDisabled, }: EditableHeadingProps) => JSX.Element;
+declare const EditableHeading: ({ children, onValueChange, onEditingChange, tooltipText, ariaLabel, variant, __forceEditing, editingDisabled, }: EditableHeadingProps) => JSX.Element;
 
 type EllipsisProps = ComponentPropsWithoutRef<'span'> & {
     /**
@@ -1772,62 +1832,6 @@ type GridProps = ComponentPropsWithoutRef<'div'> & {
 };
 declare const Grid: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, GridProps>) => react.ReactElement | null) & UnknownRecord;
 
-type AlignmentTypes$1 = 'center' | 'justify' | 'left' | 'right';
-declare const variantStyleMap$1: {
-    hero: styled_components.FlattenSimpleInterpolation;
-    heading1: styled_components.FlattenSimpleInterpolation;
-    heading2: styled_components.FlattenSimpleInterpolation;
-    heading3: styled_components.FlattenSimpleInterpolation;
-    heading4: styled_components.FlattenSimpleInterpolation;
-    heading5: styled_components.FlattenSimpleInterpolation;
-    heading6: styled_components.FlattenSimpleInterpolation;
-};
-declare const DEFAULT_ELEMENT = "h1";
-type HeadingProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT> & {
-    /**
-     * The horizontal alignment
-     * <br />
-     * _Note: this only affects block elements_
-     */
-    align?: AlignmentTypes$1;
-    /**
-     * The content of the heading
-     */
-    children: ReactNode;
-    /**
-     * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
-     */
-    colorScheme?: ColorSchemeTypes;
-    /**
-     * Styles to text as disabled
-     */
-    disabled?: boolean;
-    /**
-     * Display the text as inline content
-     */
-    inline?: boolean;
-    /**
-     * Prevents text from being highlighted and copied
-     */
-    preventUserSelect?: boolean;
-    renderAs?: ElementType;
-    /**
-     * Number of lines to display before truncating with an ellipsis.
-     * Set to 1 to truncate after a single line, 2 for two lines, etc.
-     * <br />
-     * _Note: this only affects block elements_
-     */
-    truncate?: number;
-    /**
-     * The text style to display. This will also affect what element (h1, h2, etc) is rendered, unless the `renderAs` prop is used
-     */
-    variant?: keyof typeof variantStyleMap$1;
-};
-/**
- * Displaying heading text, both visually and semantically
- */
-declare const Heading: (<C extends ElementType = "h1">(props: PolymorphicComponentProps<C, HeadingProps>) => react.ReactElement | null) & UnknownRecord;
-
 type IconButtonProps = {
     /**
      * Accessible text for screen readers.

package/dist/index.d.ts

@@ -1528,6 +1528,62 @@ declare const Divider: {
     displayName: string;
 };
 
+type AlignmentTypes$1 = 'center' | 'justify' | 'left' | 'right';
+declare const variantStyleMap$1: {
+    hero: styled_components.FlattenSimpleInterpolation;
+    heading1: styled_components.FlattenSimpleInterpolation;
+    heading2: styled_components.FlattenSimpleInterpolation;
+    heading3: styled_components.FlattenSimpleInterpolation;
+    heading4: styled_components.FlattenSimpleInterpolation;
+    heading5: styled_components.FlattenSimpleInterpolation;
+    heading6: styled_components.FlattenSimpleInterpolation;
+};
+declare const DEFAULT_ELEMENT = "h1";
+type HeadingProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT> & {
+    /**
+     * The horizontal alignment
+     * <br />
+     * _Note: this only affects block elements_
+     */
+    align?: AlignmentTypes$1;
+    /**
+     * The content of the heading
+     */
+    children: ReactNode;
+    /**
+     * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * Styles to text as disabled
+     */
+    disabled?: boolean;
+    /**
+     * Display the text as inline content
+     */
+    inline?: boolean;
+    /**
+     * Prevents text from being highlighted and copied
+     */
+    preventUserSelect?: boolean;
+    renderAs?: ElementType;
+    /**
+     * Number of lines to display before truncating with an ellipsis.
+     * Set to 1 to truncate after a single line, 2 for two lines, etc.
+     * <br />
+     * _Note: this only affects block elements_
+     */
+    truncate?: number;
+    /**
+     * The text style to display. This will also affect what element (h1, h2, etc) is rendered, unless the `renderAs` prop is used
+     */
+    variant?: keyof typeof variantStyleMap$1;
+};
+/**
+ * Displaying heading text, both visually and semantically
+ */
+declare const Heading: (<C extends ElementType = "h1">(props: PolymorphicComponentProps<C, HeadingProps>) => react.ReactElement | null) & UnknownRecord;
+
 type EditableHeadingProps = {
     /**
      * The initial text content of the heading.
@@ -1552,6 +1608,10 @@ type EditableHeadingProps = {
      * Sets an aria-label for the input and label for the screen reader only button.
      */
     ariaLabel?: string;
+    /**
+     * The text style to display. This will also affect what element (h1, h2, etc) is rendered, unless the renderAs prop is used
+     */
+    variant?: HeadingProps['variant'];
     /**
      * Force editing state for testing purposes
      * @ignore
@@ -1569,7 +1629,7 @@ type EditableHeadingProps = {
  * an accessible button that enables editing mode. The component handles empty values, keyboard
  * navigation (Enter to save, Escape to cancel), and provides callbacks for value and state changes.
  */
-declare const EditableHeading: ({ children, onValueChange, onEditingChange, tooltipText, ariaLabel, __forceEditing, editingDisabled, }: EditableHeadingProps) => JSX.Element;
+declare const EditableHeading: ({ children, onValueChange, onEditingChange, tooltipText, ariaLabel, variant, __forceEditing, editingDisabled, }: EditableHeadingProps) => JSX.Element;
 
 type EllipsisProps = ComponentPropsWithoutRef<'span'> & {
     /**
@@ -1772,62 +1832,6 @@ type GridProps = ComponentPropsWithoutRef<'div'> & {
 };
 declare const Grid: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, GridProps>) => react.ReactElement | null) & UnknownRecord;
 
-type AlignmentTypes$1 = 'center' | 'justify' | 'left' | 'right';
-declare const variantStyleMap$1: {
-    hero: styled_components.FlattenSimpleInterpolation;
-    heading1: styled_components.FlattenSimpleInterpolation;
-    heading2: styled_components.FlattenSimpleInterpolation;
-    heading3: styled_components.FlattenSimpleInterpolation;
-    heading4: styled_components.FlattenSimpleInterpolation;
-    heading5: styled_components.FlattenSimpleInterpolation;
-    heading6: styled_components.FlattenSimpleInterpolation;
-};
-declare const DEFAULT_ELEMENT = "h1";
-type HeadingProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT> & {
-    /**
-     * The horizontal alignment
-     * <br />
-     * _Note: this only affects block elements_
-     */
-    align?: AlignmentTypes$1;
-    /**
-     * The content of the heading
-     */
-    children: ReactNode;
-    /**
-     * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
-     */
-    colorScheme?: ColorSchemeTypes;
-    /**
-     * Styles to text as disabled
-     */
-    disabled?: boolean;
-    /**
-     * Display the text as inline content
-     */
-    inline?: boolean;
-    /**
-     * Prevents text from being highlighted and copied
-     */
-    preventUserSelect?: boolean;
-    renderAs?: ElementType;
-    /**
-     * Number of lines to display before truncating with an ellipsis.
-     * Set to 1 to truncate after a single line, 2 for two lines, etc.
-     * <br />
-     * _Note: this only affects block elements_
-     */
-    truncate?: number;
-    /**
-     * The text style to display. This will also affect what element (h1, h2, etc) is rendered, unless the `renderAs` prop is used
-     */
-    variant?: keyof typeof variantStyleMap$1;
-};
-/**
- * Displaying heading text, both visually and semantically
- */
-declare const Heading: (<C extends ElementType = "h1">(props: PolymorphicComponentProps<C, HeadingProps>) => react.ReactElement | null) & UnknownRecord;
-
 type IconButtonProps = {
     /**
      * Accessible text for screen readers.

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.13.1
+ * @license @wistia/ui v0.13.2-beta.0f8bc2be.fe66503
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -10480,10 +10480,7 @@ var Input = forwardRef14(
     ...props
   }, externalRef) => {
     const internalRef = useRef11();
-    const ref = (
-      // eslint-disable-next-line react-compiler/react-compiler
-      isNotNil20(externalRef) && isRecord4(externalRef) && "current" in externalRef ? externalRef : internalRef
-    );
+    const ref = isNotNil20(externalRef) && isRecord4(externalRef) && "current" in externalRef ? externalRef : internalRef;
     let leftIconToDisplay = leftIcon;
     if (isNil14(leftIcon) && type === "search") {
       leftIconToDisplay = /* @__PURE__ */ jsx232(Icon, { type: "search" });
@@ -10550,11 +10547,13 @@ var StyledInput = styled39(Input)`
   }
 
   && {
-    --wui-input-font-size: var(--wui-typography-heading-1-size);
-    --wui-input-font-weight: var(--wui-typography-heading-1-weight);
-    --wui-input-line-height: var(--wui-typography-heading-1-line-height);
+    ${({ $variant }) => variantStyleMap[$variant]}
+    /* The input font styles (edit mode) needs the same font styles as Heading */
+    --wui-input-font-size: var(--font-size);
+    --wui-input-font-weight: var(--font-weight);
+    --wui-input-line-height: var(--line-height);
 
-    font-family: var(--wui-typography-heading-1-family);
+    font-family: var(--font-family);
     width: 100%;
     padding: var(--wui-space-02);
     border: none;
@@ -10586,6 +10585,7 @@ var EditableHeading = ({
   onEditingChange,
   tooltipText = "Click to edit title",
   ariaLabel = "Edit title",
+  variant = "heading1",
   __forceEditing = false,
   editingDisabled = false
 }) => {
@@ -10632,7 +10632,7 @@ var EditableHeading = ({
       ref: headingRef,
       $editingDisabled: editingDisabled,
       onClick: () => handleSetEditing(true),
-      variant: "heading1",
+      variant,
       children: value
     }
   );
@@ -10644,6 +10644,7 @@ var EditableHeading = ({
       StyledInput,
       {
         $height: headingHeight,
+        $variant: variant,
         autoFocus: true,
         fullWidth: true,
         onBlur: handleFinishEditing,