@loomhq/lens 10.80.0 → 10.80.2

package/dist/components/icon/available-icons/index.d.ts

@@ -64,7 +64,7 @@ export { default as SvgDeleteForever } from "./delete-forever.js";
 export { default as SvgDesktopMac } from "./desktop-mac.js";
 export { default as SvgDomain } from "./domain.js";
 export { default as SvgDownload } from "./download.js";
-export { default as SvgEdge } from "./edge-logo.js";
+export { default as SvgEdgeLogo } from "./edge-logo.js";
 export { default as SvgEdit } from "./edit.js";
 export { default as SvgEditBorder } from "./edit-border.js";
 export { default as SvgExitToApp } from "./exit-to-app.js";
@@ -146,7 +146,7 @@ export { default as SvgReplyLeft } from "./reply-left.js";
 export { default as SvgReplyRight } from "./reply-right.js";
 export { default as SvgRotateCcw } from "./rotate-ccw.js";
 export { default as SvgRotateLeft } from "./rotate-left.js";
-export { default as SvgSafari } from "./safari-logo.js";
+export { default as SvgSafariLogo } from "./safari-logo.js";
 export { default as SvgScissors } from "./scissors.js";
 export { default as SvgSearch } from "./search.js";
 export { default as SvgSend } from "./send.js";

package/dist/components/icon/available-icons/index.js

@@ -64,7 +64,7 @@ export { default as SvgDeleteForever } from './delete-forever.js';
 export { default as SvgDesktopMac } from './desktop-mac.js';
 export { default as SvgDomain } from './domain.js';
 export { default as SvgDownload } from './download.js';
-export { default as SvgEdge } from './edge-logo.js';
+export { default as SvgEdgeLogo } from './edge-logo.js';
 export { default as SvgEdit } from './edit.js';
 export { default as SvgEditBorder } from './edit-border.js';
 export { default as SvgExitToApp } from './exit-to-app.js';
@@ -146,7 +146,7 @@ export { default as SvgReplyLeft } from './reply-left.js';
 export { default as SvgReplyRight } from './reply-right.js';
 export { default as SvgRotateCcw } from './rotate-ccw.js';
 export { default as SvgRotateLeft } from './rotate-left.js';
-export { default as SvgSafari } from './safari-logo.js';
+export { default as SvgSafariLogo } from './safari-logo.js';
 export { default as SvgScissors } from './scissors.js';
 export { default as SvgSearch } from './search.js';
 export { default as SvgSend } from './send.js';

package/dist/components/icon/available-icons/safari-logo.js

@@ -13,10 +13,10 @@ function SvgSafariLogo(props) {
             React.createElement("path", { d: "M52.7887 51.245L43.2113 41.2153L18.8143 74.0996L52.7887 51.245Z", fill: "#F1F1F1" }),
             React.createElement("path", { opacity: "0.243", d: "M18.8143 74.0996L52.7887 51.245L77.1857 18.3607L18.8143 74.0996Z", fill: "black" })),
         React.createElement("defs", null,
-            React.createElement("filter", { id: "filter0_f_2_3913", x: "-4.7342", y: "-1.16092", width: "105.473", height: "102.228", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+            React.createElement("filter", { id: "filter0_f_2_3913", x: "-0.73067", y: "2.8426", width: "97.4657", height: "94.2207", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
                 React.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
                 React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
-                React.createElement("feGaussianBlur", { stdDeviation: "4.47676", result: "effect1_foregroundBlur_2_3913" })),
+                React.createElement("feGaussianBlur", { stdDeviation: "2.475", result: "effect1_foregroundBlur_2_3913" })),
             React.createElement("filter", { id: "filter1_f_2_3913", x: "19.5389", y: "19.2569", width: "59.6289", height: "57.7613", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
                 React.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
                 React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),

package/dist/components/notification-bar/notification-bar.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SeverityLevels } from './types';
-declare const NotificationBarOuterWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, NotificationBarWrapperProps, object>;
-declare const NotificationBar: ({ children, onCloseClick, isOpen, severity, ...props }: NotificationBarProps & React.ComponentProps<typeof NotificationBarOuterWrapper>) => JSX.Element;
+declare const NotificationBarWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, NotificationBarWrapperProps, object>;
+declare const NotificationBar: ({ children, onCloseClick, isOpen, severity, ...props }: NotificationBarProps & React.ComponentProps<typeof NotificationBarWrapper>) => JSX.Element;
 declare type NotificationBarProps = {
     children?: React.ReactNode;
     isOpen?: boolean;

package/dist/components/notification-bar/notification-bar.js

@@ -10,6 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useEffect } from 'react';
+import { u } from '../../utilities';
 import styled from '@emotion/styled';
 import { SvgClose, SvgAlertTriangle, SvgInfo, SvgWarningAlert, } from '../icon/available-icons';
 import Align from '../align/align';
@@ -45,32 +46,30 @@ const severityStyles = {
     },
 };
 const DURATION = 350;
-const NotificationBarOuterWrapper = styled.aside `
+const NotificationBarWrapper = styled.aside `
+  --paddingXOffset: var(--lns-space-large);
+  --alignItems: start;
+
   display: grid;
-  align-content: center;
+  align-items: var(--alignItems);
+  justify-content: space-between;
+  grid-template-columns: 1fr auto;
   ${props => `background-color: ${severityStyles[props.severity].bgColor}`};
   ${props => `font-family: ${severityStyles[props.severity].fontFamily}`};
 
   ${props => `color: ${severityStyles[props.severity].color}`};
   position: fixed;
-  padding: var(--lns-space-medium) 0;
+  padding: var(--lns-space-medium) var(--paddingXOffset);
   top: 0;
   left: 0;
   transition: ${DURATION}ms box-shadow, ${DURATION}ms transform;
-  width: 100vw;
+  width: 100%;
+  box-sizing: border-box;
   z-index: 1100;
   opacity: ${props => (props.isOpen ? '1' : '0')};
   transform: ${props => props.isOpen ? 'translateY(0px)' : 'translateY(-100%)'};
-`;
-const NotificationBarInnerWrapper = styled.div `
-  --responsive-padding: var(--lns-space-small);
-  margin: 0 auto;
-  max-width: 1600px;
-  padding-left: var(--responsive-padding);
-  padding-right: var(--responsive-padding);
-  width: calc(100% - (2 * var(--responsive-padding)));
-  @media (min-width: 800px) {
-    --responsive-padding: var(--lns-space-medium);
+  @media (min-width: 872px) {
+    --alignItems: center;
   }
 `;
 const NotificationBar = (_a) => {
@@ -92,16 +91,18 @@ const NotificationBar = (_a) => {
         };
     }, [isOpen, onCloseClick]);
     usePushPageDown(isOpen);
-    return isOpen ? (React.createElement(NotificationBarOuterWrapper, Object.assign({ isOpen: isOpen, severity: severity }, props),
-        React.createElement(NotificationBarInnerWrapper, null,
-            React.createElement(Arrange, { alignItems: { default: 'start', small: 'center' }, justifyContent: "space-between", columns: ['1fr auto'] },
-                React.createElement(Container, { paddingY: { default: 'xsmall', xsmall: 0 }, width: "100%" },
-                    React.createElement(Arrange, { autoFlow: "column", gap: "small", justifyContent: "center" },
-                        ((_b = severityStyles[severity]) === null || _b === void 0 ? void 0 : _b.icon) ? (React.createElement(Align, { alignment: "topLeft" },
-                            React.createElement(Icon, { icon: severityStyles[severity].icon, color: (_c = severityStyles[severity].color) !== null && _c !== void 0 ? _c : 'var(--lns-color-white)' }))) : null,
-                        ' ',
-                        children),
-                    props.button),
-                React.createElement(IconButton, { iconColor: (_d = severityStyles[severity].color) !== null && _d !== void 0 ? _d : 'var(--lns-color-white)', tabIndex: 0, altText: "Close", icon: React.createElement(SvgClose, null), onClick: onCloseClick }))))) : null;
+    // NOTE: The UI for internal alert is slightly different.
+    const isInternalAlert = severity === 'internal';
+    return isOpen ? (React.createElement(NotificationBarWrapper, Object.assign({ isOpen: isOpen, severity: severity }, props),
+        React.createElement(Arrange, { alignItems: { default: 'start', small: 'center' }, justifyContent: "space-between", autoFlow: isInternalAlert ? 'column' : undefined, columns: !isInternalAlert ? ['1fr auto'] : undefined },
+            React.createElement(Container, { paddingY: { default: 'xsmall', xsmall: 0 }, 
+                // Visually offsets the close X so that text appears centre-aligned
+                paddingLeft: !isInternalAlert ? { default: 0, medium: u(3.5) } : undefined, width: "100%" },
+                React.createElement(Arrange, { autoFlow: "column", gap: isInternalAlert ? 'medium' : 'small', justifyContent: "center" },
+                    ((_b = severityStyles[severity]) === null || _b === void 0 ? void 0 : _b.icon) ? (React.createElement(Align, { alignment: "topLeft" },
+                        React.createElement(Icon, { icon: severityStyles[severity].icon, color: (_c = severityStyles[severity].color) !== null && _c !== void 0 ? _c : 'var(--lns-color-white)' }))) : null,
+                    ' ',
+                    children))),
+        React.createElement(IconButton, { iconColor: (_d = severityStyles[severity].color) !== null && _d !== void 0 ? _d : 'var(--lns-color-white)', tabIndex: 0, altText: "Close", icon: React.createElement(SvgClose, null), onClick: onCloseClick }))) : null;
 };
 export default NotificationBar;

package/package.json

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