@loomhq/lens 10.81.0 → 10.82.1

package/dist/components/toast/toast.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 declare const ToastWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ToastWrapperProps, object>;
-declare const Toast: ({ children, isOpen, onCloseClick, zIndex, duration, ...props }: ToastProps & React.ComponentProps<typeof ToastWrapper>) => JSX.Element;
+declare const Toast: ({ children, isOpen, onCloseClick, zIndex, duration, }: ToastProps & React.ComponentProps<typeof ToastWrapper>) => JSX.Element;
 declare type ToastProps = {
     children?: React.ReactNode;
     isOpen?: boolean;

package/dist/components/toast/toast.js

@@ -1,64 +1,53 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React, { useEffect } from 'react';
-import { getColorValue, getRadius, getShadow, u } from '../../utilities';
+import { getColorValue, getShadow, u } from '../../utilities';
 import IconButton from '../icon-button/icon-button';
 import { SvgClose } from '../icon/available-icons';
 import { keyframes } from '@emotion/core';
 import styled from '@emotion/styled';
 const toastDurations = { short: 3000, long: 8000 };
-const enter = keyframes `
-  from {
+const enter = toastDuration => keyframes `
+  0% {
     opacity: 0;
-    transform: translateY(${u(-8)});
+    transform: translate(-50%, ${u(8)});
   }
-  10% {
+  // (300 / toastDuration) * 100 evaluates to 10% for short. Longer durations will have the same speed of animation
+  ${(300 / toastDuration) * 100}% {
     opacity: 1;
-    transform: translateY(0);
+    transform: translate(-50%, 0);
   }
-  90% {
+  // 100 - (300 / toastDuration) * 100 evaluates to 90% for short. Longer durations will have the same speed of animation
+  ${100 - (300 / toastDuration) * 100}% {
     opacity: 1;
   }
-  to {
+  100% {
     opacity: 0;
   }
 `;
 const ToastWrapper = styled.div `
+  animation: ${props => enter(props.toastDuration)}
+    ${props => props.toastDuration}ms forwards;
+  background-color: ${getColorValue('background')};
+  border-radius: 1.75rem; // Height of single line toast (56px) divided by 2 so one line toasts appear fully rounded
+  bottom: ${u(4)};
+  ${getShadow('large')};
+  color: ${getColorValue('body')};
   display: grid;
   grid-auto-flow: column;
   gap: var(--lns-space-small);
   justify-content: space-between;
-  background-color: ${getColorValue('overlay')};
-  color: ${getColorValue('body')};
-  ${getShadow('large')};
-  ${getRadius('large')};
-  width: calc(100% - var(--lns-space-medium));
+  left: 50%;
   min-width: ${u(35)};
   max-width: ${u(50)};
-  position: fixed;
-  top: ${u(9)};
-  right: var(--lns-space-small);
   padding: ${u(1.5)} var(--lns-space-medium) ${u(1.5)} var(--lns-space-large);
+  position: fixed;
+  transform: translateX(-50%);
+  width: calc(100% - var(--lns-space-medium));
   z-index: ${props => props.zIndex};
-  animation: ${enter} ${props => props.toastDuration}ms forwards;
-  @media (min-width: 800px) {
-    right: var(--lns-space-medium);
-  }
 `;
 const ChildrenSection = styled.div `
   align-self: center;
 `;
-const Toast = (_a) => {
-    var { children, isOpen, onCloseClick, zIndex = 1100, duration = 'short' } = _a, props = __rest(_a, ["children", "isOpen", "onCloseClick", "zIndex", "duration"]);
+const Toast = ({ children, isOpen, onCloseClick, zIndex = 1100, duration = 'short', }) => {
     const toastDuration = toastDurations[duration];
     useEffect(() => {
         const timer = setTimeout(() => {
@@ -68,7 +57,7 @@ const Toast = (_a) => {
         }, toastDuration);
         return () => clearTimeout(timer);
     }, [isOpen]);
-    return (React.createElement(React.Fragment, null, isOpen && (React.createElement(ToastWrapper, Object.assign({ "data-lens-theme": "dark", onClick: e => e.stopPropagation(), zIndex: zIndex, isOpen: isOpen, toastDuration: toastDuration }, props),
+    return (React.createElement(React.Fragment, null, isOpen && (React.createElement(ToastWrapper, { "data-lens-theme": "dark", onClick: e => e.stopPropagation(), zIndex: zIndex, isOpen: isOpen, toastDuration: toastDuration },
         React.createElement(ChildrenSection, { "aria-live": "polite" }, children),
         onCloseClick && (React.createElement(IconButton, { altText: "Close", icon: React.createElement(SvgClose, null), onClick: onCloseClick }))))));
 };

package/dist/constants/routes.d.ts

@@ -0,0 +1 @@
+export declare const LENS_CDN = "https://cdn.loom.com/assets/lens";

package/dist/constants/routes.js

@@ -0,0 +1 @@
+export const LENS_CDN = 'https://cdn.loom.com/assets/lens';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loomhq/lens",
-  "version": "10.81.0",
+  "version": "10.82.1",
   "scripts": {
     "dev": "next",
     "build:next": "next build",