@wistia/ui 0.10.11 → 0.10.12

package/dist/index.cjs

@@ -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.
  *
@@ -7906,10 +7906,10 @@ var getGapStyle = (gap) => {
   if ((0, import_type_guards20.isNotNil)(gap)) {
     if ((0, import_type_guards20.isRecord)(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;
 };
@@ -9050,7 +9050,7 @@ var StyledLegend = import_styled_components41.default.legend`
   margin-bottom: var(--space-01);
 `;
 var FormGroup = ({ children, label, ...props }) => {
-  const ref = (0, import_react35.useRef)();
+  const ref = (0, import_react35.useRef)(null);
   return /* @__PURE__ */ (0, import_jsx_runtime215.jsxs)(
     Stack,
     {
@@ -9118,7 +9118,7 @@ var FormComponent = ({
 }, forwardedRef) => {
   const [errors, setErrors] = (0, import_react36.useState)({});
   const [hasSubmitted, setHasSubmitted] = (0, import_react36.useState)(false);
-  const innerRef = (0, import_react36.useRef)();
+  const innerRef = (0, import_react36.useRef)(null);
   const ref = forwardedRef ?? innerRef;
   const autoId = (0, import_react36.useId)();
   const id = props.id ?? autoId;
@@ -12788,13 +12788,15 @@ var segmentedControlItemStyles = import_styled_components79.css`
     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;