@loomhq/lens 10.89.1 → 10.90.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/icon/available-icons/task.js

@@ -1,7 +1,7 @@
 import React from 'react';
 const SvgTask = () => (React.createElement("svg", { viewBox: "0 0 21 23", fill: "none" },
-    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.5 20C15.7467 20 20 15.7467 20 10.5C20 5.25329 15.7467 1 10.5 1C5.25329 1 1 5.25329 1 10.5V20.6209C1 21.7814 2.44382 22.3155 3.19907 21.4344L5.59598 18.638C7.02754 19.5025 8.70568 20 10.5 20Z", fill: "var(--lns-color-grey8)" }),
+    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.5 20C15.7467 20 20 15.7467 20 10.5C20 5.25329 15.7467 1 10.5 1C5.25329 1 1 5.25329 1 10.5V20.6209C1 21.7814 2.44382 22.3155 3.19907 21.4344L5.59598 18.638C7.02754 19.5025 8.70568 20 10.5 20Z", fill: "currentColor" }),
     React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M21 10.5C21 16.299 16.299 21 10.5 21C8.82262 21 7.23509 20.606 5.82696 19.9051L3.95833 22.0852C2.59888 23.6712 0 22.7098 0 20.6209V10.5C0 4.70101 4.70101 0 10.5 0C16.299 0 21 4.70101 21 10.5ZM5.59598 18.638L3.19907 21.4344C2.44382 22.3155 1 21.7814 1 20.6209V10.5C1 5.25329 5.25329 1 10.5 1C15.7467 1 20 5.25329 20 10.5C20 15.7467 15.7467 20 10.5 20C8.70568 20 7.02754 19.5025 5.59598 18.638Z", fill: "white", fillOpacity: "0.65" }),
-    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.6186 7.09759C15.8471 7.32614 15.8471 7.69669 15.6186 7.92524L9.18096 14.3629C8.95241 14.5914 8.58186 14.5914 8.35331 14.3629L5.42712 11.4367C5.19857 11.2081 5.19857 10.8376 5.42712 10.609C5.65567 10.3805 6.02622 10.3805 6.25477 10.609L8.76714 13.1214L14.7909 7.09759C15.0195 6.86904 15.39 6.86904 15.6186 7.09759Z", fill: "var(--lns-color-grey8)" }),
+    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.6186 7.09759C15.8471 7.32614 15.8471 7.69669 15.6186 7.92524L9.18096 14.3629C8.95241 14.5914 8.58186 14.5914 8.35331 14.3629L5.42712 11.4367C5.19857 11.2081 5.19857 10.8376 5.42712 10.609C5.65567 10.3805 6.02622 10.3805 6.25477 10.609L8.76714 13.1214L14.7909 7.09759C15.0195 6.86904 15.39 6.86904 15.6186 7.09759Z", fill: "currentColor" }),
     React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.76846 14.5343C8.76758 14.5343 8.7667 14.5343 8.76581 14.5343C8.61648 14.5339 8.46725 14.4768 8.35331 14.3629L5.42712 11.4367C5.19857 11.2081 5.19857 10.8376 5.42712 10.609C5.65567 10.3805 6.02622 10.3805 6.25477 10.609L8.76714 13.1214L14.7909 7.09759C15.0195 6.86904 15.39 6.86904 15.6186 7.09759C15.8471 7.32614 15.8471 7.69669 15.6186 7.92524L9.18096 14.3629M9.18096 14.3629C9.06703 14.4768 8.9178 14.5339 8.76846 14.5343Z", fill: "white" })));
 export default SvgTask;

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/package.json

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