@wistia/ui 0.20.11 → 0.20.12-beta.194021cb.7ecdb1f

package/dist/index.d.ts

@@ -237,6 +237,10 @@ type BaseProps$2 = {
      * Disables the link
      */
     disabled?: boolean;
+    /**
+     * When true, the link will inherit its color from the parent element instead of using the default link color
+     */
+    inheritColor?: boolean;
     /**
      * Icon to display on the left side of the link. Must be an instance of [Icon](?path=/docs/components-icon--docs)
      */
@@ -381,6 +385,7 @@ declare const Button: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & re
     children: ReactNode;
     colorScheme?: ColorSchemeTypes;
     disabled?: boolean;
+    inheritColor?: boolean;
     leftIcon?: ReactNode | undefined;
     rightIcon?: ReactNode | undefined;
     type?: LinkTypes | undefined;
@@ -412,6 +417,7 @@ declare const Button: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & re
     children: ReactNode;
     colorScheme?: ColorSchemeTypes;
     disabled?: boolean;
+    inheritColor?: boolean;
     leftIcon?: ReactNode | undefined;
     rightIcon?: ReactNode | undefined;
     type?: LinkTypes | undefined;
@@ -2933,6 +2939,7 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemPr
     children: react.ReactNode;
     colorScheme?: ColorSchemeTypes;
     disabled?: boolean;
+    inheritColor?: boolean;
     leftIcon?: react.ReactNode | undefined;
     rightIcon?: react.ReactNode | undefined;
     type?: LinkTypes | undefined;
@@ -2974,6 +2981,7 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemPr
     children: react.ReactNode;
     colorScheme?: ColorSchemeTypes;
     disabled?: boolean;
+    inheritColor?: boolean;
     leftIcon?: react.ReactNode | undefined;
     rightIcon?: react.ReactNode | undefined;
     type?: LinkTypes | undefined;
@@ -3646,6 +3654,10 @@ type SegmentedControlProps = Omit<ToggleGroupSingleProps, 'type'> & {
      * `SegmentedControlItem`s that will be rendered in grouping
      */
     children?: ReactNode;
+    /**
+     * Determines the color scheme for the SegmentedControl and its children.
+     */
+    colorScheme?: ColorSchemeTypes;
     /**
      * Set the entire `SegmentedControl` to be disabled
      */
@@ -3877,6 +3889,14 @@ type StackProps = {
      * @type 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch' | ResponsiveObject<'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch'>
      */
     alignItems?: AlignItemsType | ResponsiveObject<AlignItemsType>;
+    /**
+     * Padding to apply to the stack container. Use `x` for horizontal (left/right) padding and `y` for vertical (top/bottom) padding.
+     * Each value can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
+     */
+    padding?: {
+        x?: ResponsiveObject<Spacings> | Spacings;
+        y?: ResponsiveObject<Spacings> | Spacings;
+    };
     renderAs?: ElementType;
 };
 /**

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.20.11
+ * @license @wistia/ui v0.20.12-beta.194021cb.7ecdb1f
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -8042,18 +8042,21 @@ var StyledLink = styled5.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
   font-family: inherit;
-  color: ${({ $disabled }) => $disabled ? "var(--wui-color-text-disabled)" : "var(--wui-color-text-link)"};
+  color: ${({ $disabled, $inheritColor }) => {
+  if ($disabled) return "var(--wui-color-text-disabled)";
+  if ($inheritColor) return "inherit";
+  return "var(--wui-color-text-link)";
+}};
   text-decoration: ${({ $underline }) => $underline === "always" ? "underline" : "none"};
-  display: inline-flex;
-  align-items: baseline;
-  gap: var(--wui-space-01);
+  display: ${({ $hasIcons }) => $hasIcons ? "inline-flex" : "inline"};
+  align-items: ${({ $hasIcons }) => $hasIcons ? "baseline" : "initial"};
+  gap: ${({ $hasIcons }) => $hasIcons ? "var(--wui-space-01)" : "0"};
 
   &:hover {
     text-decoration: ${({ $underline }) => $underline === "hover" || $underline === "always" ? "underline" : "none"};
   }
 
   button& {
-    display: inline;
     line-height: inherit;
     vertical-align: baseline;
   }
@@ -8074,6 +8077,7 @@ var Link = forwardRef(
     disabled = false,
     colorScheme = "inherit",
     underline = "none",
+    inheritColor = false,
     leftIcon,
     rightIcon,
     "aria-disabled": ariaDisabled,
@@ -8083,6 +8087,7 @@ var Link = forwardRef(
     const inRouterContext = useInRouterContext();
     const to = generateHref(props.href, type, disabled);
     const shouldUseReactRouterLink = inRouterContext && type !== "external" && !to?.startsWith("http");
+    const hasIcons = isNotNil5(leftIcon) || isNotNil5(rightIcon);
     const handleClick = async (event) => {
       if (disabled) {
         event.preventDefault();
@@ -8111,6 +8116,8 @@ var Link = forwardRef(
       $colorScheme: colorScheme,
       $disabled: disabled,
       $underline: underline,
+      $inheritColor: inheritColor,
+      $hasIcons: hasIcons,
       onClick: handleClick,
       "aria-disabled": ariaDisabled ?? (disabled ? "true" : void 0)
     };
@@ -10050,12 +10057,23 @@ var StyledStack = styled26.div`
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ $gap }) => `var(--wui-${$gap})`};
   align-items: ${({ $alignItems }) => $alignItems};
+  ${({ $paddingX }) => $paddingX && `padding-left: var(--wui-${$paddingX}); padding-right: var(--wui-${$paddingX});`}
+  ${({ $paddingY }) => $paddingY && `padding-top: var(--wui-${$paddingY}); padding-bottom: var(--wui-${$paddingY});`}
 `;
 var StackComponent = forwardRef10(
-  ({ renderAs, direction = "vertical", gap = "space-02", alignItems = "stretch", ...props }, ref) => {
+  ({
+    renderAs,
+    direction = "vertical",
+    gap = "space-02",
+    alignItems = "stretch",
+    padding,
+    ...props
+  }, ref) => {
     const responsiveGap = useResponsiveProp(gap);
     const responsiveDirection = useResponsiveProp(direction);
     const responsiveAlignItems = useResponsiveProp(alignItems);
+    const responsivePaddingX = useResponsiveProp(padding?.x);
+    const responsivePaddingY = useResponsiveProp(padding?.y);
     return /* @__PURE__ */ jsx240(
       StyledStack,
       {
@@ -10063,6 +10081,8 @@ var StackComponent = forwardRef10(
         $alignItems: responsiveAlignItems,
         $direction: responsiveDirection,
         $gap: responsiveGap,
+        $paddingX: responsivePaddingX,
+        $paddingY: responsivePaddingY,
         as: renderAs ?? DEFAULT_ELEMENT4,
         ...props
       }
@@ -17561,6 +17581,9 @@ var SelectedItemIndicator = () => {
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { jsx as jsx330, jsxs as jsxs60 } from "react/jsx-runtime";
 var segmentedControlStyles = css46`
+  ${({ $colorScheme }) => $colorScheme && getColorScheme($colorScheme)};
+  --wui-color-text-selected: var(--wui-color-text-link);
+
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
   border-radius: var(--wui-border-radius-rounded);
@@ -17577,6 +17600,7 @@ var StyledSegmentedControl = styled92(ToggleGroupRoot2)`
 var SegmentedControl = forwardRef32(
   ({
     children,
+    colorScheme = "inherit",
     disabled = false,
     fullWidth = false,
     selectedValue,
@@ -17590,6 +17614,7 @@ var SegmentedControl = forwardRef32(
       StyledSegmentedControl,
       {
         ref,
+        $colorScheme: colorScheme,
         $fullWidth: fullWidth,
         disabled,
         loop: true,