@wistia/ui 0.10.11 → 0.10.12

package/dist/index.d.mts

@@ -7,7 +7,6 @@ import * as react_router from 'react-router';
 import { LinkProps as LinkProps$1 } from 'react-router-dom';
 import { CollapsibleContentProps as CollapsibleContentProps$1 } from '@radix-ui/react-collapsible';
 import * as styled_components from 'styled-components';
-import { FlattenSimpleInterpolation } from 'styled-components';
 import { DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu';
 import { PopoverContentProps } from '@radix-ui/react-popover';
 import { ToggleGroupSingleProps } from '@radix-ui/react-toggle-group';
@@ -3281,22 +3280,22 @@ declare const ThumbnailBadge: {
 };
 
 declare const gradients: {
-    defaultDarkOne: FlattenSimpleInterpolation;
-    defaultDarkTwo: FlattenSimpleInterpolation;
-    defaultLightOne: FlattenSimpleInterpolation;
-    defaultLightTwo: FlattenSimpleInterpolation;
-    defaultMidOne: FlattenSimpleInterpolation;
-    defaultMidTwo: FlattenSimpleInterpolation;
-    green: FlattenSimpleInterpolation;
-    greenWithPop: FlattenSimpleInterpolation;
-    pink: FlattenSimpleInterpolation;
-    pinkWithPop: FlattenSimpleInterpolation;
-    playfulGradientOne: FlattenSimpleInterpolation;
-    playfulGradientTwo: FlattenSimpleInterpolation;
-    purple: FlattenSimpleInterpolation;
-    purpleWithPop: FlattenSimpleInterpolation;
-    yellow: FlattenSimpleInterpolation;
-    yellowWithPop: FlattenSimpleInterpolation;
+    defaultDarkOne: styled_components.FlattenSimpleInterpolation;
+    defaultDarkTwo: styled_components.FlattenSimpleInterpolation;
+    defaultLightOne: styled_components.FlattenSimpleInterpolation;
+    defaultLightTwo: styled_components.FlattenSimpleInterpolation;
+    defaultMidOne: styled_components.FlattenSimpleInterpolation;
+    defaultMidTwo: styled_components.FlattenSimpleInterpolation;
+    green: styled_components.FlattenSimpleInterpolation;
+    greenWithPop: styled_components.FlattenSimpleInterpolation;
+    pink: styled_components.FlattenSimpleInterpolation;
+    pinkWithPop: styled_components.FlattenSimpleInterpolation;
+    playfulGradientOne: styled_components.FlattenSimpleInterpolation;
+    playfulGradientTwo: styled_components.FlattenSimpleInterpolation;
+    purple: styled_components.FlattenSimpleInterpolation;
+    purpleWithPop: styled_components.FlattenSimpleInterpolation;
+    yellow: styled_components.FlattenSimpleInterpolation;
+    yellowWithPop: styled_components.FlattenSimpleInterpolation;
 };
 type GradientNameType = keyof typeof gradients;
 

package/dist/index.d.ts

@@ -7,7 +7,6 @@ import * as react_router from 'react-router';
 import { LinkProps as LinkProps$1 } from 'react-router-dom';
 import { CollapsibleContentProps as CollapsibleContentProps$1 } from '@radix-ui/react-collapsible';
 import * as styled_components from 'styled-components';
-import { FlattenSimpleInterpolation } from 'styled-components';
 import { DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu';
 import { PopoverContentProps } from '@radix-ui/react-popover';
 import { ToggleGroupSingleProps } from '@radix-ui/react-toggle-group';
@@ -3281,22 +3280,22 @@ declare const ThumbnailBadge: {
 };
 
 declare const gradients: {
-    defaultDarkOne: FlattenSimpleInterpolation;
-    defaultDarkTwo: FlattenSimpleInterpolation;
-    defaultLightOne: FlattenSimpleInterpolation;
-    defaultLightTwo: FlattenSimpleInterpolation;
-    defaultMidOne: FlattenSimpleInterpolation;
-    defaultMidTwo: FlattenSimpleInterpolation;
-    green: FlattenSimpleInterpolation;
-    greenWithPop: FlattenSimpleInterpolation;
-    pink: FlattenSimpleInterpolation;
-    pinkWithPop: FlattenSimpleInterpolation;
-    playfulGradientOne: FlattenSimpleInterpolation;
-    playfulGradientTwo: FlattenSimpleInterpolation;
-    purple: FlattenSimpleInterpolation;
-    purpleWithPop: FlattenSimpleInterpolation;
-    yellow: FlattenSimpleInterpolation;
-    yellowWithPop: FlattenSimpleInterpolation;
+    defaultDarkOne: styled_components.FlattenSimpleInterpolation;
+    defaultDarkTwo: styled_components.FlattenSimpleInterpolation;
+    defaultLightOne: styled_components.FlattenSimpleInterpolation;
+    defaultLightTwo: styled_components.FlattenSimpleInterpolation;
+    defaultMidOne: styled_components.FlattenSimpleInterpolation;
+    defaultMidTwo: styled_components.FlattenSimpleInterpolation;
+    green: styled_components.FlattenSimpleInterpolation;
+    greenWithPop: styled_components.FlattenSimpleInterpolation;
+    pink: styled_components.FlattenSimpleInterpolation;
+    pinkWithPop: styled_components.FlattenSimpleInterpolation;
+    playfulGradientOne: styled_components.FlattenSimpleInterpolation;
+    playfulGradientTwo: styled_components.FlattenSimpleInterpolation;
+    purple: styled_components.FlattenSimpleInterpolation;
+    purpleWithPop: styled_components.FlattenSimpleInterpolation;
+    yellow: styled_components.FlattenSimpleInterpolation;
+    yellowWithPop: styled_components.FlattenSimpleInterpolation;
 };
 type GradientNameType = keyof typeof gradients;
 

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.10.11
+ * @license @wistia/ui v0.10.12
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -7769,10 +7769,10 @@ var getGapStyle = (gap) => {
   if (isNotNil10(gap)) {
     if (isRecord3(gap)) {
       return Object.entries(gap).map(([key, value]) => {
-        return `${key}-gap: var(--wui-${value})};`;
+        return `${key}-gap: var(--wui-${value});`;
       }).join("");
     }
-    return `gap: var(--wui-${gap.toString()})};`;
+    return `gap: var(--wui-${gap.toString()});`;
   }
   return void 0;
 };
@@ -8913,7 +8913,7 @@ var StyledLegend = styled25.legend`
   margin-bottom: var(--space-01);
 `;
 var FormGroup = ({ children, label, ...props }) => {
-  const ref = useRef7();
+  const ref = useRef7(null);
   return /* @__PURE__ */ jsxs16(
     Stack,
     {
@@ -8981,7 +8981,7 @@ var FormComponent = ({
 }, forwardedRef) => {
   const [errors, setErrors] = useState11({});
   const [hasSubmitted, setHasSubmitted] = useState11(false);
-  const innerRef = useRef8();
+  const innerRef = useRef8(null);
   const ref = forwardedRef ?? innerRef;
   const autoId = useId();
   const id = props.id ?? autoId;
@@ -12685,13 +12685,15 @@ var segmentedControlItemStyles = css38`
     outline: 2px solid var(--wui-color-focus-ring);
   }
 
-  &:hover:not([data-state='on'], [data-state='active'], [aria-selected='true']) {
+  /* note: react-toggle-group uses 'aria-selected' and react-tabs uses "active" */
+
+  /* we can't style off of 'data-state' since that gets overridden when wrapped in a Tooltip */
+  &:hover:not([aria-checked='true'], [aria-selected='true']) {
     background-color: var(--wui-color-bg-surface-secondary-hover);
   }
 
-  /* note: react-toggle-group uses "on" and react-tabs uses "active" */
-  &[data-state='on'],
-  &[data-state='active'] {
+  &[aria-checked='true'],
+  &[aria-selected='true'] {
     color: var(--wui-color-text-selected);
     cursor: default;
     transition: none;