@wistia/ui 0.6.6 → 0.6.7

package/dist/index.d.mts

@@ -2493,9 +2493,13 @@ type WistiaLogoProps = Omit<ComponentPropsWithoutRef<'svg'>, 'href'> & {
      * Style of the logo
      */
     variant?: 'dark' | 'light' | 'standard';
+    /**
+     * If true, the logo will be optically centered within its container
+     */
+    opticallyCentered?: boolean;
 };
 declare const WistiaLogo: {
-    ({ description, height, hoverColor, href, iconOnly, title, variant, ...otherProps }: WistiaLogoProps): react_jsx_runtime.JSX.Element;
+    ({ description, height, hoverColor, href, iconOnly, opticallyCentered, title, variant, ...otherProps }: WistiaLogoProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/index.d.ts

@@ -2493,9 +2493,13 @@ type WistiaLogoProps = Omit<ComponentPropsWithoutRef<'svg'>, 'href'> & {
      * Style of the logo
      */
     variant?: 'dark' | 'light' | 'standard';
+    /**
+     * If true, the logo will be optically centered within its container
+     */
+    opticallyCentered?: boolean;
 };
 declare const WistiaLogo: {
-    ({ description, height, hoverColor, href, iconOnly, title, variant, ...otherProps }: WistiaLogoProps): react_jsx_runtime.JSX.Element;
+    ({ description, height, hoverColor, href, iconOnly, opticallyCentered, title, variant, ...otherProps }: WistiaLogoProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.6
+ * @license @wistia/ui v0.6.7
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -9555,8 +9555,9 @@ var SelectedItemIndicatorDiv = styled47.div`
   left: 0;
   position: absolute;
   top: 0;
+  box-shadow: var(--wui-elevation-01);
   transition:
-    transform var(--wui-motion-duration-03) var(--wui-motion-ease-out),
+    transform var(--wui-motion-duration-02) var(--wui-motion-ease-out),
     width var(--wui-motion-duration-02) var(--wui-motion-ease-out);
   z-index: ${Z_INDEX_TO_SIT_BEHIND_SIBLINGS};
 `;
@@ -9664,13 +9665,16 @@ var segmentedControlItemStyles = css27`
   color: var(--wui-color-text-secondary);
   cursor: pointer;
   display: flex;
+  gap: 2px;
   flex-grow: 1;
   flex-shrink: 1;
   font-size: var(--wui-typography-label-3-size);
   font-weight: var(--wui-typography-label-3-weight);
+  line-height: var(--wui-typography-label-3-line-height);
   justify-content: center;
-  padding: 6px ${({ $hasLabel }) => $hasLabel ? "8px" : "6px"};
+  padding: 6px ${({ $hasLabel }) => $hasLabel ? "12px" : "6px"};
   user-select: none;
+  transition: background-color var(--wui-motion-duration-01) var(--wui-motion-ease);
 
   /* Icon component */
   svg {
@@ -9694,13 +9698,9 @@ var segmentedControlItemStyles = css27`
   &[data-state='active'] {
     color: var(--wui-color-text-selected);
     cursor: default;
-  }
 
-  &:focus-visible,
-  &[data-state='on'],
-  &[data-state='active'] {
     svg path {
-      fill: var(--wui-color-focus-ring);
+      fill: var(--wui-color-icon-selected);
     }
   }
 
@@ -10217,7 +10217,7 @@ var Tag = forwardRef24(
 Tag.displayName = "Tag";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import styled55 from "styled-components";
+import styled55, { css as css28 } from "styled-components";
 import { isNotNil as isNotNil23 } from "@wistia/type-guards";
 import { jsx as jsx221, jsxs as jsxs35 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
@@ -10271,6 +10271,21 @@ var WistiaLogoComponent = styled55.svg`
       ${({ $hoverColor }) => $hoverColor !== void 0 ? `fill: ${$hoverColor}` : null};
     }
   }
+
+  ${({ $opticallyCentered, $iconOnly }) => {
+  if ($opticallyCentered) {
+    if ($iconOnly) {
+      return css28`
+          aspect-ratio: 1;
+          padding: 11.85% 3.12% 13.91%;
+        `;
+    }
+    return css28`
+        aspect-ratio: 127 / 32;
+      `;
+  }
+  return null;
+}}
 `;
 var WistiaLogo = ({
   description = void 0,
@@ -10278,6 +10293,7 @@ var WistiaLogo = ({
   hoverColor = void 0,
   href = void 0,
   iconOnly = false,
+  opticallyCentered = false,
   title = "Wistia Logo",
   variant = "standard",
   ...otherProps
@@ -10305,7 +10321,10 @@ var WistiaLogo = ({
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,
+      $iconOnly: iconOnly,
+      $opticallyCentered: opticallyCentered,
       height,
+      preserveAspectRatio: opticallyCentered ? "xMidYMin" : void 0,
       role: "img",
       viewBox: computedViewBox(iconOnly),
       xmlns: "http://www.w3.org/2000/svg",