@loomhq/lens 10.89.2 → 10.91.0

package/dist/components/error-container/error-container.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ErrorContainerProps {
+    children: React.ReactNode;
+    errorActive: boolean;
+    errorMessage?: string;
+}
+declare const ErrorContainer: ({ children, errorActive, errorMessage, }: ErrorContainerProps) => JSX.Element;
+export default ErrorContainer;

package/dist/components/error-container/error-container.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import Arrange from '../arrange/arrange';
+import Icon from '../icon/icon';
+import { SvgAlertTriangle } from '../icon/available-icons';
+import Text from '../text/text';
+import styled from '@emotion/styled';
+// the border below is a stand-alone component to avoid messing with the layout of the children
+// the calculations in width, height, top, and left are to add padding between the border and the children
+// pointer-events: none is to allow the children to be clickable
+const ErrorContainerBorder = styled.div `
+  position: relative;
+  ::before {
+    content: '';
+    width: calc(100% + var(--lns-space-medium));
+    height: calc(100% + var(--lns-space-medium));
+    position: absolute;
+    top: calc(-1 * var(--lns-space-small));
+    left: calc(-1 * var(--lns-space-small));
+    outline: 1px solid var(--lns-color-danger);
+    border-radius: var(--lns-radius-large);
+    pointer-events: none;
+  }
+`;
+const ErrorContainer = ({ children, errorActive, errorMessage = "Oops, that didn't work. Try again.", }) => {
+    if (!errorActive) {
+        return React.createElement(React.Fragment, null, children);
+    }
+    return (React.createElement(ErrorContainerBorder, null,
+        React.createElement(Arrange, { autoFlow: "row", gap: "small" },
+            children,
+            errorMessage ? (React.createElement(Arrange, { gap: "xsmall" },
+                React.createElement(Icon, { icon: React.createElement(SvgAlertTriangle, null), size: 2, color: "danger" }),
+                React.createElement(Text, { size: "body-sm", color: "danger" }, errorMessage))) : null)));
+};
+export default ErrorContainer;

package/dist/components/index.d.ts

@@ -6,6 +6,7 @@ export { default as Icon } from "./icon/icon";
 export { default as TextInput } from "./text-input/text-input";
 export { default as Distribute } from "./distribute/distribute";
 export { default as Container } from "./container/container";
+export { default as ErrorContainer } from "./error-container/error-container";
 export { default as Layout } from "./layout/layout";
 export { default as Loader } from "./loader/loader";
 export { default as Checkbox } from "./checkbox/checkbox";

package/dist/components/index.js

@@ -7,6 +7,7 @@ export { default as Icon } from './icon/icon';
 export { default as TextInput } from './text-input/text-input';
 export { default as Distribute } from './distribute/distribute';
 export { default as Container } from './container/container';
+export { default as ErrorContainer } from './error-container/error-container';
 export { default as Layout } from './layout/layout';
 export { default as IconButton } from './icon-button/icon-button';
 export { IconButtonBox } from './icon-button/icon-button';

package/dist/components/logo-loader/logo-loader.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 declare const LogoLoaderWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, LogoLoaderProps, object>;
-declare const LogoLoader: ({ animation, }: LogoLoaderProps & React.ComponentProps<typeof LogoLoaderWrapper>) => JSX.Element;
+declare const LogoLoader: ({ animation, brand, }: LogoLoaderProps & React.ComponentProps<typeof LogoLoaderWrapper>) => JSX.Element;
 declare type LogoLoaderProps = {
     animation?: string;
+    brand?: 'loom' | 'ai';
 };
 export default LogoLoader;

package/dist/components/logo-loader/logo-loader.js

@@ -3,13 +3,12 @@ import styled from '@emotion/styled';
 import { LENS_CDN } from '../../constants/routes';
 const LogoLoaderWrapper = styled.span `
   animation: ${props => props.animation};
-  background-image: url(${LENS_CDN}/logo-loader.svg);
+  background-image: url(${LENS_CDN}/${props => props.brand}-loader.svg);
   background-size: cover;
   background-position: left center;
   display: block;
   height: 80px;
   width: 80px;
-  transform: rotate(4deg);
 
   @keyframes spin {
     100% {
@@ -17,7 +16,7 @@ const LogoLoaderWrapper = styled.span `
     }
   }
 `;
-const LogoLoader = ({ animation = 'spin 2s infinite steps(49) forwards', }) => {
-    return React.createElement(LogoLoaderWrapper, { animation: animation });
+const LogoLoader = ({ animation = 'spin 2s infinite steps(49) forwards', brand = 'loom', }) => {
+    return React.createElement(LogoLoaderWrapper, { animation: animation, brand: brand });
 };
 export default LogoLoader;

package/package.json

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