@wistia/ui 0.8.24 → 0.8.25

package/dist/index.cjs

@@ -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.
  *
@@ -10978,6 +10978,36 @@ var useFocusRestore = () => {
 
 // src/components/Modal/ModalContent.tsx
 var import_jsx_runtime243 = require("react/jsx-runtime");
+var alignTopStyles = import_styled_components64.css`
+  --wui-modal-translate-y: 0;
+
+  top: 0;
+`;
+var alignVerticalCenterStyles = import_styled_components64.css`
+  --wui-modal-translate-y: -50%;
+
+  top: 50%;
+`;
+var alignBottomStyles = import_styled_components64.css`
+  --wui-modal-translate-y: 0;
+
+  bottom: 0;
+`;
+var alignHorizontalCenterStyles = import_styled_components64.css`
+  --wui-modal-translate-x: -50%;
+
+  left: 50%;
+`;
+var alignRightStyles = import_styled_components64.css`
+  --wui-modal-translate-x: 0;
+
+  right: 0;
+`;
+var alignLeftStyles = import_styled_components64.css`
+  --wui-modal-translate-x: 0;
+
+  left: 0;
+`;
 var StyledModalContent = (0, import_styled_components64.default)(import_react_dialog3.Content)`
   background-color: var(--wui-color-bg-app);
   box-sizing: border-box;
@@ -10993,39 +11023,48 @@ var StyledModalContent = (0, import_styled_components64.default)(import_react_di
   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 = (0, import_react52.forwardRef)(
-  ({ fullHeight, width, children, ...props }, ref) => {
+  ({ fullHeight, width, alignHorizontal, alignVertical, children, ...props }, ref) => {
     useFocusRestore();
     return /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
       StyledModalContent,
       {
         ref,
+        $alignHorizontal: alignHorizontal,
+        $alignVertical: alignVertical,
         $fullHeight: fullHeight,
         $width: width,
         "aria-describedby": void 0,
@@ -11040,7 +11079,6 @@ var ModalContent = (0, import_react52.forwardRef)(
 var import_react53 = require("react");
 var import_styled_components65 = __toESM(require("styled-components"));
 var import_jsx_runtime244 = require("react/jsx-runtime");
-var backdropAnimationDuration = 150;
 var alignVerticalMap = {
   stretch: "normal",
   top: "start",
@@ -11054,9 +11092,7 @@ var alignHorizontalMap = {
 };
 var BackdropComponent = import_styled_components65.default.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;
@@ -11100,6 +11136,7 @@ var DEFAULT_MODAL_WIDTH = "532px";
 var ModalBody = import_styled_components66.default.div`
   flex-direction: column;
   display: flex;
+  flex: 1 0 0;
   order: 2;
 `;
 var Modal = (0, import_react54.forwardRef)(
@@ -11113,6 +11150,8 @@ var Modal = (0, import_react54.forwardRef)(
     onRequestClose,
     title,
     width = DEFAULT_MODAL_WIDTH,
+    alignHorizontal = "center",
+    alignVertical = "center",
     ...props
   }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
@@ -11130,6 +11169,8 @@ var Modal = (0, import_react54.forwardRef)(
             ModalContent,
             {
               ref,
+              alignHorizontal,
+              alignVertical,
               fullHeight,
               onOpenAutoFocus: (event) => {
                 if ((0, import_type_guards42.isNotNil)(initialFocusRef) && initialFocusRef.current) {