@wistia/ui 0.8.24 → 0.8.25

package/dist/index.d.mts

@@ -2317,6 +2317,14 @@ type ModalProps = ComponentPropsWithoutRef<'div'> & {
      * The content of the modal.
      */
     children: ReactNode;
+    /**
+     * Horizontally align modal to the left, center, or right of the container
+     */
+    alignHorizontal?: 'center' | 'left' | 'right';
+    /**
+     * Vertically align modal to the top, center, or bottom of the container
+     */
+    alignVertical?: 'bottom' | 'center' | 'top';
     /**
      * Whether or not the modal should take up the full height of the viewport
      */
@@ -2361,6 +2369,14 @@ declare const Modal: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProp
      * The content of the modal.
      */
     children: ReactNode;
+    /**
+     * Horizontally align modal to the left, center, or right of the container
+     */
+    alignHorizontal?: "center" | "left" | "right";
+    /**
+     * Vertically align modal to the top, center, or bottom of the container
+     */
+    alignVertical?: "bottom" | "center" | "top";
     /**
      * Whether or not the modal should take up the full height of the viewport
      */

package/dist/index.d.ts

@@ -2317,6 +2317,14 @@ type ModalProps = ComponentPropsWithoutRef<'div'> & {
      * The content of the modal.
      */
     children: ReactNode;
+    /**
+     * Horizontally align modal to the left, center, or right of the container
+     */
+    alignHorizontal?: 'center' | 'left' | 'right';
+    /**
+     * Vertically align modal to the top, center, or bottom of the container
+     */
+    alignVertical?: 'bottom' | 'center' | 'top';
     /**
      * Whether or not the modal should take up the full height of the viewport
      */
@@ -2361,6 +2369,14 @@ declare const Modal: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProp
      * The content of the modal.
      */
     children: ReactNode;
+    /**
+     * Horizontally align modal to the left, center, or right of the container
+     */
+    alignHorizontal?: "center" | "left" | "right";
+    /**
+     * Vertically align modal to the top, center, or bottom of the container
+     */
+    alignVertical?: "bottom" | "center" | "top";
     /**
      * Whether or not the modal should take up the full height of the viewport
      */

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.8.24
+ * @license @wistia/ui v0.8.25
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -10849,7 +10849,7 @@ var ModalHeader = ({
 
 // src/components/Modal/ModalContent.tsx
 import { forwardRef as forwardRef17 } from "react";
-import styled47 from "styled-components";
+import styled47, { css as css30 } from "styled-components";
 import { Content as DialogContent } from "@radix-ui/react-dialog";
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
@@ -10873,6 +10873,36 @@ var useFocusRestore = () => {
 
 // src/components/Modal/ModalContent.tsx
 import { jsx as jsx243 } from "react/jsx-runtime";
+var alignTopStyles = css30`
+  --wui-modal-translate-y: 0;
+
+  top: 0;
+`;
+var alignVerticalCenterStyles = css30`
+  --wui-modal-translate-y: -50%;
+
+  top: 50%;
+`;
+var alignBottomStyles = css30`
+  --wui-modal-translate-y: 0;
+
+  bottom: 0;
+`;
+var alignHorizontalCenterStyles = css30`
+  --wui-modal-translate-x: -50%;
+
+  left: 50%;
+`;
+var alignRightStyles = css30`
+  --wui-modal-translate-x: 0;
+
+  right: 0;
+`;
+var alignLeftStyles = css30`
+  --wui-modal-translate-x: 0;
+
+  left: 0;
+`;
 var StyledModalContent = styled47(DialogContent)`
   background-color: var(--wui-color-bg-app);
   box-sizing: border-box;
@@ -10888,39 +10918,48 @@ var StyledModalContent = styled47(DialogContent)`
   z-index: var(--wui-zindex-modal);
 
   ${mq.smAndUp} {
-    animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+    --wui-modal-screen-offset: var(--wui-space-05);
+    --wui-modal-max-height: calc(100vh - var(--wui-modal-screen-offset) * 2);
+    --wui-modal-max-width: calc(100vw - var(--wui-modal-screen-offset) * 2);
+
+    top: unset;
+    left: unset;
+    ${({ $alignVertical }) => $alignVertical === "top" && alignTopStyles}
+    ${({ $alignVertical }) => $alignVertical === "center" && alignVerticalCenterStyles}
+    ${({ $alignVertical }) => $alignVertical === "bottom" && alignBottomStyles}
+    ${({ $alignHorizontal }) => $alignHorizontal === "center" && alignHorizontalCenterStyles}
+    ${({ $alignHorizontal }) => $alignHorizontal === "right" && alignRightStyles}
+    ${({ $alignHorizontal }) => $alignHorizontal === "left" && alignLeftStyles}
+    animation: contentShow var(--wui-motion-duration-03) var(--wui-motion-ease-out);
     border-radius: var(--wui-border-radius-03);
-    left: 50%;
-    margin: var(--wui-space-02);
     height: ${({ $fullHeight }) => $fullHeight ? "min-content" : "auto"};
-    max-height: 90vh;
+    max-height: var(--wui-modal-max-height);
     ${({ $fullHeight }) => $fullHeight ? "min-height: calc(100vh - 48px);" : ""}
-    max-width: 90vw;
-    top: 50%;
-    transform: translate(-50%, -50%);
+    max-width: var(--wui-modal-max-width);
+    translate: var(--wui-modal-translate-x) var(--wui-modal-translate-y);
     min-width: ${({ $width }) => $width ?? DEFAULT_MODAL_WIDTH};
     width: ${({ $width }) => $width ?? DEFAULT_MODAL_WIDTH};
   }
 
   @keyframes contentShow {
     from {
-      opacity: 0;
-      transform: translate(-50%, -48%) scale(0.96);
+      scale: 0.96;
     }
 
     to {
-      opacity: 1;
-      transform: translate(-50%, -50%) scale(1);
+      scale: 1;
     }
   }
 `;
 var ModalContent = forwardRef17(
-  ({ fullHeight, width, children, ...props }, ref) => {
+  ({ fullHeight, width, alignHorizontal, alignVertical, children, ...props }, ref) => {
     useFocusRestore();
     return /* @__PURE__ */ jsx243(
       StyledModalContent,
       {
         ref,
+        $alignHorizontal: alignHorizontal,
+        $alignVertical: alignVertical,
         $fullHeight: fullHeight,
         $width: width,
         "aria-describedby": void 0,
@@ -10935,7 +10974,6 @@ var ModalContent = forwardRef17(
 import { forwardRef as forwardRef18 } from "react";
 import styled48 from "styled-components";
 import { jsx as jsx244 } from "react/jsx-runtime";
-var backdropAnimationDuration = 150;
 var alignVerticalMap = {
   stretch: "normal",
   top: "start",
@@ -10949,9 +10987,7 @@ var alignHorizontalMap = {
 };
 var BackdropComponent = styled48.div`
   align-items: ${({ $alignVertical }) => alignVerticalMap[$alignVertical]};
-  animation-name: backdropShow;
-  animation-duration: ${() => `${backdropAnimationDuration}ms`};
-  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  animation-name: backdropShow var(--wui-motion-duration-03) var(--wui-motion-ease-out);
   background: var(--wui-color-backdrop);
   display: flex;
   inset: 0;
@@ -10995,6 +11031,7 @@ var DEFAULT_MODAL_WIDTH = "532px";
 var ModalBody = styled49.div`
   flex-direction: column;
   display: flex;
+  flex: 1 0 0;
   order: 2;
 `;
 var Modal = forwardRef19(
@@ -11008,6 +11045,8 @@ var Modal = forwardRef19(
     onRequestClose,
     title,
     width = DEFAULT_MODAL_WIDTH,
+    alignHorizontal = "center",
+    alignVertical = "center",
     ...props
   }, ref) => {
     return /* @__PURE__ */ jsx245(
@@ -11025,6 +11064,8 @@ var Modal = forwardRef19(
             ModalContent,
             {
               ref,
+              alignHorizontal,
+              alignVertical,
               fullHeight,
               onOpenAutoFocus: (event) => {
                 if (isNotNil24(initialFocusRef) && initialFocusRef.current) {
@@ -11058,7 +11099,7 @@ Modal.displayName = "Modal";
 
 // src/components/Popover/Popover.tsx
 import { Root, Trigger as Trigger2, Portal, Content as Content2, Close } from "@radix-ui/react-popover";
-import styled51, { css as css31 } from "styled-components";
+import styled51, { css as css32 } from "styled-components";
 
 // src/private/helpers/getControls/getControlProps.tsx
 import { isNotNil as isNotNil25 } from "@wistia/type-guards";
@@ -11068,7 +11109,7 @@ var getControlProps = (isOpen, onOpenChange) => {
 
 // src/components/Popover/PopoverArrow.tsx
 import { PopoverArrow as RadixPopoverArrow } from "@radix-ui/react-popover";
-import styled50, { css as css30, keyframes as keyframes4 } from "styled-components";
+import styled50, { css as css31, keyframes as keyframes4 } from "styled-components";
 import { jsx as jsx246, jsxs as jsxs33 } from "react/jsx-runtime";
 var StyledPath = styled50.path`
   fill: var(--wui-color-border-secondary);
@@ -11102,7 +11143,7 @@ var StyledCircle = styled50.circle`
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    ${({ $isAnimated }) => $isAnimated && css30`
+    ${({ $isAnimated }) => $isAnimated && css31`
         animation-name: ${circleAnimation};
       `}
   }
@@ -11150,7 +11191,7 @@ PopoverArrow.displayName = "PopoverArrow";
 import { jsx as jsx247, jsxs as jsxs34 } from "react/jsx-runtime";
 var StyledContent2 = styled51(Content2)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
-  ${({ $unstyled }) => !$unstyled && css31`
+  ${({ $unstyled }) => !$unstyled && css32`
       border-radius: var(--wui-border-radius-02);
       padding: var(--wui-space-04);
       max-width: var(--wui-popover-max-width, 320px);
@@ -11296,7 +11337,7 @@ ProgressBar.displayName = "ProgressBar";
 
 // src/components/Radio/Radio.tsx
 import { forwardRef as forwardRef20, useId as useId3 } from "react";
-import styled53, { css as css32 } from "styled-components";
+import styled53, { css as css33 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString3 } from "@wistia/type-guards";
 import { jsx as jsx249, jsxs as jsxs36 } from "react/jsx-runtime";
 var RadioIcon = () => /* @__PURE__ */ jsx249(
@@ -11318,7 +11359,7 @@ var RadioIcon = () => /* @__PURE__ */ jsx249(
     )
   }
 );
-var sizeSmall2 = css32`
+var sizeSmall2 = css33`
   width: 14px;
   height: 14px;
   min-width: 14px;
@@ -11329,7 +11370,7 @@ var sizeSmall2 = css32`
     height: 7px;
   }
 `;
-var sizeMedium2 = css32`
+var sizeMedium2 = css33`
   width: 16px;
   height: 16px;
   min-width: 16px;
@@ -11340,7 +11381,7 @@ var sizeMedium2 = css32`
     height: 8px;
   }
 `;
-var sizeLarge2 = css32`
+var sizeLarge2 = css33`
   width: 20px;
   height: 20px;
   min-width: 20px;
@@ -11464,7 +11505,7 @@ Radio.displayName = "Radio";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { forwardRef as forwardRef21 } from "react";
-import styled55, { css as css33 } from "styled-components";
+import styled55, { css as css34 } from "styled-components";
 import { Root as ToggleGroupRoot } from "@radix-ui/react-toggle-group";
 import { isNil as isNil14 } from "@wistia/type-guards";
 
@@ -11543,7 +11584,7 @@ var SelectedItemIndicator = () => {
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { jsx as jsx252, jsxs as jsxs37 } from "react/jsx-runtime";
-var segmentedControlStyles = css33`
+var segmentedControlStyles = css34`
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
   border-radius: var(--wui-border-radius-rounded);
@@ -11593,11 +11634,11 @@ SegmentedControl.displayName = "SegmentedControl";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 import { forwardRef as forwardRef22, useEffect as useEffect11, useRef as useRef12 } from "react";
-import styled56, { css as css34 } from "styled-components";
+import styled56, { css as css35 } from "styled-components";
 import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
 import { isNotNil as isNotNil27 } from "@wistia/type-guards";
 import { jsxs as jsxs38 } from "react/jsx-runtime";
-var segmentedControlItemStyles = css34`
+var segmentedControlItemStyles = css35`
   all: unset; /* ToggleGroupItem is a button element */
   align-items: center;
   border-radius: var(--wui-border-radius-rounded);
@@ -11922,10 +11963,10 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
 
 // src/components/Switch/Switch.tsx
 import { forwardRef as forwardRef25, useId as useId4 } from "react";
-import styled60, { css as css35 } from "styled-components";
+import styled60, { css as css36 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
 import { jsx as jsx256, jsxs as jsxs42 } from "react/jsx-runtime";
-var sizeSmall3 = css35`
+var sizeSmall3 = css36`
   --wui-size-small-width: 24px;
   --wui-size-small-height: 14px;
 
@@ -11940,7 +11981,7 @@ var sizeSmall3 = css35`
     height: calc(var(--wui-size-small-width) / 2);
   }
 `;
-var sizeMedium3 = css35`
+var sizeMedium3 = css36`
   --wui-size-medium-width: 32px;
   --wui-size-medium-height: 18px;
 
@@ -11955,7 +11996,7 @@ var sizeMedium3 = css35`
     height: calc(var(--wui-size-medium-width) / 2);
   }
 `;
-var sizeLarge3 = css35`
+var sizeLarge3 = css36`
   --wui-size-large-width: 40px;
   --wui-size-large-height: 22px;
 
@@ -12084,25 +12125,25 @@ var Switch = forwardRef25(
 Switch.displayName = "Switch";
 
 // src/components/Table/Table.tsx
-import styled61, { css as css36 } from "styled-components";
+import styled61, { css as css37 } from "styled-components";
 import { jsx as jsx257 } from "react/jsx-runtime";
 var StyledTable = styled61.table`
   width: 100%;
   border-collapse: collapse;
 
-  ${({ $divided }) => $divided && css36`
+  ${({ $divided }) => $divided && css37`
       tr {
         border-bottom: 1px solid var(--wui-color-border);
       }
     `}
 
-  ${({ $striped }) => $striped && css36`
+  ${({ $striped }) => $striped && css37`
       tbody tr:nth-child(even) {
         background-color: var(--wui-color-bg-surface-secondary);
       }
     `}
 
-  ${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader && css36`
+  ${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader && css37`
       thead {
         ${visuallyHiddenStyle}
       }
@@ -12143,9 +12184,9 @@ var TableBody = ({ children, ...props }) => {
 
 // src/components/Table/TableCell.tsx
 import { useContext as useContext8 } from "react";
-import styled63, { css as css37 } from "styled-components";
+import styled63, { css as css38 } from "styled-components";
 import { jsx as jsx259 } from "react/jsx-runtime";
-var sharedStyles = css37`
+var sharedStyles = css38`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
   text-align: left;
@@ -12685,9 +12726,9 @@ import { isNil as isNil17, isNotNil as isNotNil34 } from "@wistia/type-guards";
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
 import { isNotNil as isNotNil33 } from "@wistia/type-guards";
-import { css as css38 } from "styled-components";
+import { css as css39 } from "styled-components";
 var gradients = {
-  defaultDarkOne: css38`
+  defaultDarkOne: css39`
     background-color: #222d66;
     background-image:
       radial-gradient(farthest-corner at top right, #222d66, transparent 70%),
@@ -12695,7 +12736,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #6b84ff, transparent 57%),
       radial-gradient(farthest-corner at top left, #2949e5, transparent 68%);
   `,
-  defaultDarkTwo: css38`
+  defaultDarkTwo: css39`
     background-color: #222d66;
     background-image:
       radial-gradient(farthest-corner at top left, #6b84ff, transparent 100%),
@@ -12703,7 +12744,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  defaultLightOne: css38`
+  defaultLightOne: css39`
     background-color: #ccd5ff;
     background-image:
       radial-gradient(farthest-corner at bottom right, #ccd5ff, transparent 55%),
@@ -12711,13 +12752,13 @@ var gradients = {
       radial-gradient(farthest-corner at top right, #6b84ff, transparent 50%),
       radial-gradient(farthest-corner at bottom left, #f7f8ff, transparent 50%);
   `,
-  defaultLightTwo: css38`
+  defaultLightTwo: css39`
     background-color: #ccd5ff;
     background-image:
       radial-gradient(ellipse at top, #ccd5ff, transparent),
       radial-gradient(ellipse at bottom, #6b84ff, transparent);
   `,
-  defaultMidOne: css38`
+  defaultMidOne: css39`
     background-color: #6b84ff;
     background-image:
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%),
@@ -12725,13 +12766,13 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #6b84ff, transparent 80%),
       radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%);
   `,
-  defaultMidTwo: css38`
+  defaultMidTwo: css39`
     background-color: #6b84ff;
     background-image:
       radial-gradient(ellipse at top, #2949e5, transparent),
       radial-gradient(ellipse at bottom, #ccd5ff, transparent);
   `,
-  green: css38`
+  green: css39`
     background-color: #fafffa;
     background-image:
       radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
@@ -12739,7 +12780,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
   `,
-  greenWithPop: css38`
+  greenWithPop: css39`
     background-color: #fafffa;
     background-image:
       radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
@@ -12747,7 +12788,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
   `,
-  pink: css38`
+  pink: css39`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 50%),
@@ -12755,7 +12796,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%);
   `,
-  pinkWithPop: css38`
+  pinkWithPop: css39`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
@@ -12763,7 +12804,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%),
       radial-gradient(farthest-corner at bottom left, #2949e5, transparent 50%);
   `,
-  playfulGradientOne: css38`
+  playfulGradientOne: css39`
     background-color: #f7f8ff;
     background-image:
       radial-gradient(farthest-corner at top left, #d65cff, transparent 68%),
@@ -12771,7 +12812,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 57%),
       radial-gradient(farthest-corner at top right, #ffcaba, transparent 70%);
   `,
-  playfulGradientTwo: css38`
+  playfulGradientTwo: css39`
     background-color: #f7f8ff;
     background-image:
       radial-gradient(farthest-corner at top left, #44b62d, transparent 68%),
@@ -12779,13 +12820,13 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #ccd5ff, transparent 57%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  purple: css38`
+  purple: css39`
     background-color: #f2caff;
     background-image:
       radial-gradient(ellipse at 0% 100%, #f9e5ff, transparent 50%),
       radial-gradient(ellipse at 100% 0%, #e093fa, transparent 70%);
   `,
-  purpleWithPop: css38`
+  purpleWithPop: css39`
     background-color: #f2caff;
     background-image:
       radial-gradient(farthest-corner at bottom left, #f2caff, transparent 50%),
@@ -12793,7 +12834,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #d65cff, transparent 55%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  yellow: css38`
+  yellow: css39`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
@@ -12801,7 +12842,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #e8ec1e, transparent 55%);
   `,
-  yellowWithPop: css38`
+  yellowWithPop: css39`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
@@ -13009,7 +13050,7 @@ var ThumbnailCollage = ({
 };
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import styled76, { css as css39 } from "styled-components";
+import styled76, { css as css40 } from "styled-components";
 import { isNotNil as isNotNil35 } from "@wistia/type-guards";
 import { jsx as jsx272, jsxs as jsxs48 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
@@ -13067,12 +13108,12 @@ var WistiaLogoComponent = styled76.svg`
   ${({ $opticallyCentered, $iconOnly }) => {
   if ($opticallyCentered) {
     if ($iconOnly) {
-      return css39`
+      return css40`
           aspect-ratio: 1;
           padding: 11.85% 3.12% 13.91%;
         `;
     }
-    return css39`
+    return css40`
         aspect-ratio: 127 / 32;
       `;
   }