@wistia/ui 0.8.24-beta.04ae01e6.4365e98 → 0.8.24

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.8.24-beta.04ae01e6.4365e98
+ * @license @wistia/ui v0.8.24
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -10978,36 +10978,6 @@ 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;
@@ -11023,48 +10993,39 @@ var StyledModalContent = (0, import_styled_components64.default)(import_react_di
   z-index: var(--wui-zindex-modal);
 
   ${mq.smAndUp} {
-    --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);
+    animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
     border-radius: var(--wui-border-radius-03);
+    left: 50%;
+    margin: var(--wui-space-02);
     height: ${({ $fullHeight }) => $fullHeight ? "min-content" : "auto"};
-    max-height: var(--wui-modal-max-height);
+    max-height: 90vh;
     ${({ $fullHeight }) => $fullHeight ? "min-height: calc(100vh - 48px);" : ""}
-    max-width: var(--wui-modal-max-width);
-    translate: var(--wui-modal-translate-x) var(--wui-modal-translate-y);
+    max-width: 90vw;
+    top: 50%;
+    transform: translate(-50%, -50%);
     min-width: ${({ $width }) => $width ?? DEFAULT_MODAL_WIDTH};
     width: ${({ $width }) => $width ?? DEFAULT_MODAL_WIDTH};
   }
 
   @keyframes contentShow {
     from {
-      scale: 0.96;
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
     }
 
     to {
-      scale: 1;
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
     }
   }
 `;
 var ModalContent = (0, import_react52.forwardRef)(
-  ({ fullHeight, width, alignHorizontal, alignVertical, children, ...props }, ref) => {
+  ({ fullHeight, width, 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,
@@ -11079,6 +11040,7 @@ 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",
@@ -11092,7 +11054,9 @@ var alignHorizontalMap = {
 };
 var BackdropComponent = import_styled_components65.default.div`
   align-items: ${({ $alignVertical }) => alignVerticalMap[$alignVertical]};
-  animation-name: backdropShow var(--wui-motion-duration-03) var(--wui-motion-ease-out);
+  animation-name: backdropShow;
+  animation-duration: ${() => `${backdropAnimationDuration}ms`};
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
   background: var(--wui-color-backdrop);
   display: flex;
   inset: 0;
@@ -11136,7 +11100,6 @@ 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)(
@@ -11150,8 +11113,6 @@ 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)(
@@ -11169,8 +11130,6 @@ var Modal = (0, import_react54.forwardRef)(
             ModalContent,
             {
               ref,
-              alignHorizontal,
-              alignVertical,
               fullHeight,
               onOpenAutoFocus: (event) => {
                 if ((0, import_type_guards42.isNotNil)(initialFocusRef) && initialFocusRef.current) {