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

package/dist/index.cjs

@@ -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.
  *
@@ -5921,7 +5921,6 @@ var StyledLink = import_styled_components19.default.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);
@@ -6193,8 +6192,10 @@ var StyledActionButton = (0, import_styled_components21.default)(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);
+      }
     }
   }
 `;
@@ -6205,9 +6206,11 @@ var StyledMainIcon = import_styled_components21.default.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 = import_styled_components21.default.div`
@@ -6229,9 +6232,11 @@ var StyledSecondaryIcon = import_styled_components21.default.div`
       }
     `};
 
-  svg {
-    width: 24px;
-    height: 24px;
+  && {
+    svg {
+      width: 24px;
+      height: 24px;
+    }
   }
 `;
 var StyledLabel = import_styled_components21.default.span`
@@ -7332,6 +7337,7 @@ var body1TextStyle = import_styled_components36.css`
   --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 = import_styled_components36.css`
@@ -7339,6 +7345,7 @@ var body2TextStyle = import_styled_components36.css`
   --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 = import_styled_components36.css`
@@ -7346,6 +7353,7 @@ var body3TextStyle = import_styled_components36.css`
   --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 = import_styled_components36.css`
@@ -7353,6 +7361,7 @@ var body4TextStyle = import_styled_components36.css`
   --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 = import_styled_components36.css`
@@ -7413,6 +7422,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 = import_styled_components36.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
@@ -7451,9 +7477,12 @@ var StyledText = import_styled_components36.default.div`
   `}
   ${({ as }) => as === "p" && import_styled_components36.css`
       display: block;
+
+      + p {
+        margin-top: var(--paragraph-spacing, var(--wui-space-04));
+      }
     `}
 `;
-var DEFAULT_ELEMENT3 = "div";
 var TextComponent = (0, import_react20.forwardRef)(
   ({
     align = "left",
@@ -7479,7 +7508,7 @@ var TextComponent = (0, import_react20.forwardRef)(
         $preventUserSelect: preventUserSelect,
         $prominence: prominence,
         $variant: variant,
-        as: renderAs ?? DEFAULT_ELEMENT3,
+        as: renderAs ?? variantElementMap2[variant],
         ...otherProps
       }
     );
@@ -7789,9 +7818,6 @@ var StyledInputContainer = import_styled_components41.default.div`
     padding-right: 32px;
   }
 `;
-var isValidRef2 = (ref) => {
-  return typeof ref === "object" && ref !== null && "current" in ref && (0, import_type_guards23.isNotNil)(ref.current);
-};
 var Input = (0, import_react21.forwardRef)(
   ({
     fullWidth = false,
@@ -7803,7 +7829,7 @@ var Input = (0, import_react21.forwardRef)(
     ...props
   }, externalRef) => {
     const internalRef = (0, import_react21.useRef)();
-    const ref = isValidRef2(externalRef) ? externalRef : internalRef;
+    const ref = (0, import_type_guards23.isNotNil)(externalRef) && (0, import_type_guards23.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef;
     let leftIconToDisplay = leftIcon;
     if ((0, import_type_guards23.isNil)(leftIcon) && type === "search") {
       leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(Icon, { type: "search" });
@@ -7825,7 +7851,7 @@ var Input = (0, import_react21.forwardRef)(
       if ((0, import_type_guards23.isNotNil)(props.onFocus)) {
         props.onFocus(event);
       }
-      if (autoSelect && ref && "current" in ref) {
+      if (autoSelect && isValidRef(ref) && "current" in ref) {
         requestAnimationFrame(() => {
           ref.current?.select();
         });
@@ -8661,18 +8687,22 @@ var StyledLeftIconContainer = import_styled_components50.default.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 = import_styled_components50.default.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 = import_styled_components50.default.div`