@wistia/ui 0.5.4 → 0.5.5-beta.05a00a72.6b7da9c

package/dist/index.d.mts

@@ -1699,7 +1699,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) & UnknownRecord;
+declare const Text: (<C extends ElementType = "p">(props: PolymorphicComponentProps<C, TextProps>) => react.ReactElement | null) & UnknownRecord;
 
 type MenuItemLabelProps = {
     /**

package/dist/index.d.ts

@@ -1699,7 +1699,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) & UnknownRecord;
+declare const Text: (<C extends ElementType = "p">(props: PolymorphicComponentProps<C, TextProps>) => react.ReactElement | null) & UnknownRecord;
 
 type MenuItemLabelProps = {
     /**

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.5.4
+ * @license @wistia/ui v0.5.5-beta.05a00a72.6b7da9c
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -5818,7 +5818,6 @@ var StyledLink = styled4.a`
   align-items: baseline;
   gap: var(--wui-space-01);
 
-  /* This ensure that the icon is the corect color when the style is solid or the button is disabled */
   && {
     svg {
       width: var(--link-icon-size);
@@ -6090,8 +6089,10 @@ var StyledActionButton = styled6(Button)`
     outline-color: var(--wui-color-focus-ring-disabled);
     cursor: not-allowed;
 
-    svg {
-      color: var(--wui-color-icon-disabled);
+    && {
+      svg {
+        color: var(--wui-color-icon-disabled);
+      }
     }
   }
 `;
@@ -6102,9 +6103,11 @@ var StyledMainIcon = styled6.div`
   height: 24px;
   transition: color var(--wui-motion-duration-02) var(--wui-motion-ease);
 
-  svg {
-    width: 24px;
-    height: 24px;
+  && {
+    svg {
+      width: 24px;
+      height: 24px;
+    }
   }
 `;
 var StyledSecondaryIcon = styled6.div`
@@ -6126,9 +6129,11 @@ var StyledSecondaryIcon = styled6.div`
       }
     `};
 
-  svg {
-    width: 24px;
-    height: 24px;
+  && {
+    svg {
+      width: 24px;
+      height: 24px;
+    }
   }
 `;
 var StyledLabel = styled6.span`
@@ -7229,6 +7234,7 @@ var body1TextStyle = css19`
   --font-size: var(--wui-typography-body-1-size);
   --font-weight: var(--wui-typography-body-1-weight);
   --line-height: var(--wui-typography-body-1-line-height);
+  --paragraph-spacing: var(--wui-typography-body-1-paragraph-spacing);
   ${bodyBoldStyles}
 `;
 var body2TextStyle = css19`
@@ -7236,6 +7242,7 @@ var body2TextStyle = css19`
   --font-size: var(--wui-typography-body-2-size);
   --font-weight: var(--wui-typography-body-2-weight);
   --line-height: var(--wui-typography-body-2-line-height);
+  --paragraph-spacing: var(--wui-typography-body-2-paragraph-spacing);
   ${bodyBoldStyles}
 `;
 var body3TextStyle = css19`
@@ -7243,6 +7250,7 @@ var body3TextStyle = css19`
   --font-size: var(--wui-typography-body-3-size);
   --font-weight: var(--wui-typography-body-3-weight);
   --line-height: var(--wui-typography-body-3-line-height);
+  --paragraph-spacing: var(--wui-typography-body-3-paragraph-spacing);
   ${bodyBoldStyles}
 `;
 var body4TextStyle = css19`
@@ -7250,6 +7258,7 @@ var body4TextStyle = css19`
   --font-size: var(--wui-typography-body-4-size);
   --font-weight: var(--wui-typography-body-4-weight);
   --line-height: var(--wui-typography-body-4-line-height);
+  --paragraph-spacing: var(--wui-typography-body-4-paragraph-spacing);
   ${bodyBoldStyles}
 `;
 var label1TextStyle = css19`
@@ -7310,6 +7319,23 @@ var variantStyleMap2 = {
   label3: label3TextStyle,
   label4: label4TextStyle
 };
+var bodyElement = "p";
+var labelElement = "span";
+var DEFAULT_ELEMENT3 = bodyElement;
+var variantElementMap2 = {
+  body1: DEFAULT_ELEMENT3,
+  body2: DEFAULT_ELEMENT3,
+  body3: DEFAULT_ELEMENT3,
+  body4: DEFAULT_ELEMENT3,
+  body1Mono: DEFAULT_ELEMENT3,
+  body2Mono: DEFAULT_ELEMENT3,
+  body3Mono: DEFAULT_ELEMENT3,
+  body4Mono: DEFAULT_ELEMENT3,
+  label1: labelElement,
+  label2: labelElement,
+  label3: labelElement,
+  label4: labelElement
+};
 var StyledText = styled21.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
@@ -7348,9 +7374,12 @@ var StyledText = styled21.div`
   `}
   ${({ as }) => as === "p" && css19`
       display: block;
+
+      + p {
+        margin-top: var(--paragraph-spacing, var(--wui-space-04));
+      }
     `}
 `;
-var DEFAULT_ELEMENT3 = "div";
 var TextComponent = forwardRef8(
   ({
     align = "left",
@@ -7376,7 +7405,7 @@ var TextComponent = forwardRef8(
         $preventUserSelect: preventUserSelect,
         $prominence: prominence,
         $variant: variant,
-        as: renderAs ?? DEFAULT_ELEMENT3,
+        as: renderAs ?? variantElementMap2[variant],
         ...otherProps
       }
     );
@@ -7605,7 +7634,7 @@ Tooltip.displayName = "Tooltip";
 // src/components/Input/Input.tsx
 import { forwardRef as forwardRef9, cloneElement as cloneElement3, useRef as useRef3 } from "react";
 import styled26, { css as css22 } from "styled-components";
-import { isNil as isNil12, isNotNil as isNotNil9 } from "@wistia/type-guards";
+import { isNil as isNil12, isNotNil as isNotNil9, isRecord as isRecord4 } from "@wistia/type-guards";
 import { jsx as jsx183, jsxs as jsxs15 } from "react/jsx-runtime";
 var inputStyles = css22`
   --wui-input-color-bg: var(--wui-color-bg-surface);
@@ -7692,9 +7721,6 @@ var StyledInputContainer = styled26.div`
     padding-right: 32px;
   }
 `;
-var isValidRef2 = (ref) => {
-  return typeof ref === "object" && ref !== null && "current" in ref && isNotNil9(ref.current);
-};
 var Input = forwardRef9(
   ({
     fullWidth = false,
@@ -7706,7 +7732,7 @@ var Input = forwardRef9(
     ...props
   }, externalRef) => {
     const internalRef = useRef3();
-    const ref = isValidRef2(externalRef) ? externalRef : internalRef;
+    const ref = isNotNil9(externalRef) && isRecord4(externalRef) && "current" in externalRef ? externalRef : internalRef;
     let leftIconToDisplay = leftIcon;
     if (isNil12(leftIcon) && type === "search") {
       leftIconToDisplay = /* @__PURE__ */ jsx183(Icon, { type: "search" });
@@ -7728,7 +7754,7 @@ var Input = forwardRef9(
       if (isNotNil9(props.onFocus)) {
         props.onFocus(event);
       }
-      if (autoSelect && ref && "current" in ref) {
+      if (autoSelect && isValidRef(ref) && "current" in ref) {
         requestAnimationFrame(() => {
           ref.current?.select();
         });
@@ -8576,18 +8602,22 @@ var StyledLeftIconContainer = styled35.div`
   height: var(--menu-item-left-icon-size);
   width: var(--menu-item-left-icon-size);
 
-  svg {
-    height: var(--menu-item-left-icon-size);
-    width: var(--menu-item-left-icon-size);
+  && {
+    svg {
+      height: var(--menu-item-left-icon-size);
+      width: var(--menu-item-left-icon-size);
+    }
   }
 `;
 var StyledRightIconContainer = styled35.div`
   height: var(--menu-item-right-icon-size);
   width: var(--menu-item-right-icon-size);
 
-  svg {
-    height: var(--menu-item-right-icon-size);
-    width: var(--menu-item-right-icon-size);
+  && {
+    svg {
+      height: var(--menu-item-right-icon-size);
+      width: var(--menu-item-right-icon-size);
+    }
   }
 `;
 var StyledLabelAndDescriptionContainer = styled35.div`