@wistia/ui 0.10.9 → 0.10.10-beta.2369e96e.0f9bc32

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.10.9
+ * @license @wistia/ui v0.10.10-beta.2369e96e.0f9bc32
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -7468,7 +7468,7 @@ var StyledActionButton = (0, import_styled_components22.default)(Button)`
   }
 
   &:hover,
-  :focus-visible {
+  &:focus-visible {
     --wui-color-text: var(--wui-color-text-button);
 
     ${({ $hoverColorScheme }) => getColorScheme($hoverColorScheme)};
@@ -7976,24 +7976,25 @@ var getFlexStyle = (flexMode) => {
   }
 };
 var StyledBoxComponent = import_styled_components27.default.div`
+  /* properties meant for Box parent (flex container) */
   align-content: ${({ $alignContent }) => $alignContent};
   align-items: ${({ $alignItems }) => $alignItems};
-  align-self: ${({ $alignSelf }) => $alignSelf ?? null};
   display: ${({ $inline }) => (0, import_type_guards20.isNotNil)($inline) && $inline ? "inline-flex" : "flex"};
-  flex-basis: ${({ $basis }) => (0, import_type_guards20.isNotNil)($basis) ? $basis : null};
   flex-direction: ${({ $flexDirection }) => $flexDirection};
+  flex-wrap: ${({ $wrapItems }) => $wrapItems ? "wrap" : "nowrap"};
+  justify-content: ${({ $justifyContent }) => $justifyContent};
+  height: ${({ $height }) => $height ?? null};
+  width: ${({ $width }) => $width ?? null};
   ${({ $fillBox: fill }) => getFillStyle2(fill)};
   ${({ $fillViewport }) => getFillViewportStyle($fillViewport)};
   ${({ $flexMode }) => getFlexStyle($flexMode)};
   ${({ $gap }) => getGapStyle($gap)};
-  height: ${({ $height }) => $height ?? null};
-  width: ${({ $width }) => $width ?? null};
 
-  /* Box children styles */
+  /* properties meant for Box children (flex items) */
+  align-self: ${({ $alignSelf }) => $alignSelf ?? null};
+  flex-basis: ${({ $basis }) => (0, import_type_guards20.isNotNil)($basis) ? $basis : null};
   flex-grow: ${({ $grow }) => (0, import_type_guards20.isNotNil)($grow) ? $grow : null};
   flex-shrink: ${({ $shrink }) => (0, import_type_guards20.isNotNil)($shrink) ? $shrink : null};
-  flex-wrap: ${({ $wrapItems }) => $wrapItems ? "wrap" : "nowrap"};
-  justify-content: ${({ $justifyContent }) => $justifyContent};
   order: ${({ $order }) => (0, import_type_guards20.isNotNil)($order) ? $order : null};
 `;
 var DEFAULT_ELEMENT = "div";
@@ -8196,7 +8197,7 @@ var HeadingComponent = (0, import_react28.forwardRef)(
       $preventUserSelect: preventUserSelect,
       $truncate: truncate,
       $variant: variant,
-      as: renderAs ?? variantElementMap[variant],
+      as: renderAs ?? variantElementMap[variant] ?? DEFAULT_ELEMENT2,
       ...props
     }
   )
@@ -8405,7 +8406,7 @@ var TextComponent = (0, import_react29.forwardRef)(
         $prominence: prominence,
         $truncate: truncate,
         $variant: variant,
-        as: renderAs ?? variantElementMap2[variant],
+        as: renderAs ?? variantElementMap2[variant] ?? DEFAULT_ELEMENT3,
         ...props
       }
     );
@@ -9431,22 +9432,22 @@ var TagLabel = import_styled_components46.default.a`
     width: 12px;
   }
 
-  :not(:only-child) {
+  &:focus-visible {
+    outline: unset;
+    box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
+  }
+
+  &:not(:only-child) {
     padding-right: var(--wui-space-01);
   }
 
-  :is(a):hover {
+  &:is(a):hover {
     background: var(--wui-color-bg-surface-secondary-hover);
   }
 
-  :is(a):active {
+  &:is(a):active {
     background: var(--wui-color-bg-surface-secondary-active);
   }
-
-  :focus-visible {
-    outline: unset;
-    box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
-  }
 `;
 var TagDivider = import_styled_components46.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -9470,15 +9471,15 @@ var StyledRemoveButton = import_styled_components46.default.button`
     fill: var(--wui-color-icon);
   }
 
-  :hover {
+  &:hover {
     background: var(--wui-color-bg-surface-secondary-hover);
   }
 
-  :active {
+  &:active {
     background: var(--wui-color-bg-surface-secondary-active);
   }
 
-  :focus-visible {
+  &:focus-visible {
     outline: unset;
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
@@ -10362,8 +10363,8 @@ var StyledInputContainer = import_styled_components54.default.div`
     transform: translateY(-50%);
   }
 
-  :has(.wui-input-left-icon) input,
-  :has(.wui-input-left-icon) textarea {
+  &:has(.wui-input-left-icon) input,
+  &:has(.wui-input-left-icon) textarea {
     padding-left: 32px;
   }
 
@@ -10376,8 +10377,8 @@ var StyledInputContainer = import_styled_components54.default.div`
     transform: translateY(-50%);
   }
 
-  :has(.wui-input-right-icon) input,
-  :has(.wui-input-right-icon) textarea {
+  &:has(.wui-input-right-icon) input,
+  &:has(.wui-input-right-icon) textarea {
     padding-right: 32px;
   }
 `;
@@ -10591,7 +10592,6 @@ var StyledForm = import_styled_components56.default.form`
   --form-default-width: 690px;
 
   max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
-  align-items: ${({ $fullWidth }) => $fullWidth ? "stretch" : "flex-start"};
 `;
 var FormContext = (0, import_react45.createContext)({
   values: {},
@@ -10672,6 +10672,7 @@ var FormComponent = ({
         ...props,
         ref,
         $fullWidth: fullWidth,
+        alignItems: fullWidth ? "stretch" : "flex-start",
         as: StyledForm,
         gap: "space-05",
         id,
@@ -11533,7 +11534,7 @@ var StyledButton3 = (0, import_styled_components65.default)(Button)`
   line-height: var(--menu-label-line-height);
   transition: background-color var(--wui-motion-duration-01) var(--wui-motion-ease);
 
-  :active {
+  &:active {
     background-color: var(--wui-color-bg-surface-active);
   }