@loomhq/lens 12.19.0 → 12.20.2

package/dist/esm/icons/playlist-add.js

@@ -1,21 +1,10 @@
 import "./chunk-2NMEKWO5.js";
 
 // src/components/icon/available-icons/playlist-add.tsx
+import PlaylistAddIcon from "@atlaskit/icon-lab/core/playlist-add";
 import * as React from "react";
 function SvgPlaylistAdd() {
-  return /* @__PURE__ */ React.createElement("svg", { fill: "none", viewBox: "0 0 16 16" }, /* @__PURE__ */ React.createElement(
-    "path",
-    {
-      fill: "currentcolor",
-      d: "M10.75 7v2.25H13v1.5h-2.25V13h-1.5v-2.25H7v-1.5h2.25V7z"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    "path",
-    {
-      fill: "currentcolor",
-      d: "M3.999 6.624A2.626 2.626 0 0 1 6.624 4h4.053l-.341-1.6a1.124 1.124 0 0 0-1.334-.866L2.399 2.937a1.124 1.124 0 0 0-.866 1.334l1.403 6.602c.11.517.558.873 1.063.889zm1.5 6.75c0 .621.504 1.125 1.125 1.125h6.75c.621 0 1.125-.503 1.125-1.125v-6.75c0-.62-.504-1.125-1.125-1.125h-6.75c-.621 0-1.125.504-1.125 1.125zm10.5 0A2.625 2.625 0 0 1 13.374 16h-6.75a2.625 2.625 0 0 1-2.625-2.625v-.112a2.624 2.624 0 0 1-2.53-2.077L.064 4.582A2.626 2.626 0 0 1 2.088 1.47L8.689.066a2.626 2.626 0 0 1 3.114 2.022L12.21 4h1.164a2.625 2.625 0 0 1 2.625 2.625z"
-    }
-  ));
+  return /* @__PURE__ */ React.createElement(PlaylistAddIcon, { label: "Add to playlist icon", testId: "ads-refreshed-icon" });
 }
 export {
   SvgPlaylistAdd

package/dist/esm/icons/playlist-add.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/icon/available-icons/playlist-add.tsx"],
-  "sourcesContent": ["import * as React from 'react';\n\n// TODO update ADS icons to get new icons\n// import PlaylistAddIcon from '@atlaskit/icon-lab/core/playlist-add';\n\nexport function SvgPlaylistAdd() {\n  return (\n    <svg fill=\"none\" viewBox=\"0 0 16 16\">\n      <path\n        fill=\"currentcolor\"\n        d=\"M10.75 7v2.25H13v1.5h-2.25V13h-1.5v-2.25H7v-1.5h2.25V7z\"\n      ></path>\n      <path\n        fill=\"currentcolor\"\n        d=\"M3.999 6.624A2.626 2.626 0 0 1 6.624 4h4.053l-.341-1.6a1.124 1.124 0 0 0-1.334-.866L2.399 2.937a1.124 1.124 0 0 0-.866 1.334l1.403 6.602c.11.517.558.873 1.063.889zm1.5 6.75c0 .621.504 1.125 1.125 1.125h6.75c.621 0 1.125-.503 1.125-1.125v-6.75c0-.62-.504-1.125-1.125-1.125h-6.75c-.621 0-1.125.504-1.125 1.125zm10.5 0A2.625 2.625 0 0 1 13.374 16h-6.75a2.625 2.625 0 0 1-2.625-2.625v-.112a2.624 2.624 0 0 1-2.53-2.077L.064 4.582A2.626 2.626 0 0 1 2.088 1.47L8.689.066a2.626 2.626 0 0 1 3.114 2.022L12.21 4h1.164a2.625 2.625 0 0 1 2.625 2.625z\"\n      ></path>\n    </svg>\n  );\n}\n"],
-  "mappings": ";;;AAAA,YAAY,WAAW;AAKhB,SAAS,iBAAiB;AAC/B,SACE,oCAAC,SAAI,MAAK,QAAO,SAAQ,eACvB;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,GAAE;AAAA;AAAA,EACH,GACD;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,GAAE;AAAA;AAAA,EACH,CACH;AAEJ;",
+  "sourcesContent": ["import PlaylistAddIcon from '@atlaskit/icon-lab/core/playlist-add';\nimport * as React from 'react';\n\nexport function SvgPlaylistAdd() {\n  return (\n    <PlaylistAddIcon label=\"Add to playlist icon\" testId=\"ads-refreshed-icon\" />\n  );\n}\n"],
+  "mappings": ";;;AAAA,OAAO,qBAAqB;AAC5B,YAAY,WAAW;AAEhB,SAAS,iBAAiB;AAC/B,SACE,oCAAC,mBAAgB,OAAM,wBAAuB,QAAO,sBAAqB;AAE9E;",
   "names": []
 }

package/dist/esm/icons/playlist-added.js

@@ -1,21 +1,16 @@
 import "./chunk-2NMEKWO5.js";
 
 // src/components/icon/available-icons/playlist-added.tsx
+import PlaylistAddedIcon from "@atlaskit/icon-lab/core/playlist-added";
 import * as React from "react";
 function SvgPlaylistAdded() {
-  return /* @__PURE__ */ React.createElement("svg", { fill: "none", viewBox: "0 0 16 16" }, /* @__PURE__ */ React.createElement(
-    "path",
+  return /* @__PURE__ */ React.createElement(
+    PlaylistAddedIcon,
     {
-      fill: "currentcolor",
-      d: "m13.32 8.238-3.75 4.375a.75.75 0 0 1-1.162-.027l-1.75-2.25 1.184-.922 1.185 1.526 3.154-3.678z"
+      label: "Playlist added icon",
+      testId: "ads-refreshed-icon"
     }
-  ), /* @__PURE__ */ React.createElement(
-    "path",
-    {
-      fill: "currentcolor",
-      d: "M3.999 6.624A2.626 2.626 0 0 1 6.624 4h4.053l-.341-1.6a1.124 1.124 0 0 0-1.334-.866L2.399 2.937a1.124 1.124 0 0 0-.866 1.334l1.403 6.602c.11.517.558.873 1.063.889zm1.5 6.75c0 .621.504 1.125 1.125 1.125h6.75c.621 0 1.125-.503 1.125-1.125v-6.75c0-.62-.504-1.125-1.125-1.125h-6.75c-.621 0-1.125.504-1.125 1.125zm10.5 0A2.625 2.625 0 0 1 13.374 16h-6.75a2.625 2.625 0 0 1-2.625-2.625v-.112a2.624 2.624 0 0 1-2.53-2.077L.064 4.582A2.626 2.626 0 0 1 2.088 1.47L8.689.066a2.626 2.626 0 0 1 3.114 2.022L12.21 4h1.164a2.625 2.625 0 0 1 2.625 2.625z"
-    }
-  ));
+  );
 }
 export {
   SvgPlaylistAdded

package/dist/esm/icons/playlist-added.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/icon/available-icons/playlist-added.tsx"],
-  "sourcesContent": ["import * as React from 'react';\n\n// TODO update ADS icons to get new icons\n// import PlaylistAddedIcon from '@atlaskit/icon-lab/core/playlist-added';\n\nexport function SvgPlaylistAdded() {\n  return (\n    <svg fill=\"none\" viewBox=\"0 0 16 16\">\n      <path\n        fill=\"currentcolor\"\n        d=\"m13.32 8.238-3.75 4.375a.75.75 0 0 1-1.162-.027l-1.75-2.25 1.184-.922 1.185 1.526 3.154-3.678z\"\n      ></path>\n      <path\n        fill=\"currentcolor\"\n        d=\"M3.999 6.624A2.626 2.626 0 0 1 6.624 4h4.053l-.341-1.6a1.124 1.124 0 0 0-1.334-.866L2.399 2.937a1.124 1.124 0 0 0-.866 1.334l1.403 6.602c.11.517.558.873 1.063.889zm1.5 6.75c0 .621.504 1.125 1.125 1.125h6.75c.621 0 1.125-.503 1.125-1.125v-6.75c0-.62-.504-1.125-1.125-1.125h-6.75c-.621 0-1.125.504-1.125 1.125zm10.5 0A2.625 2.625 0 0 1 13.374 16h-6.75a2.625 2.625 0 0 1-2.625-2.625v-.112a2.624 2.624 0 0 1-2.53-2.077L.064 4.582A2.626 2.626 0 0 1 2.088 1.47L8.689.066a2.626 2.626 0 0 1 3.114 2.022L12.21 4h1.164a2.625 2.625 0 0 1 2.625 2.625z\"\n      ></path>\n    </svg>\n  );\n}\n"],
-  "mappings": ";;;AAAA,YAAY,WAAW;AAKhB,SAAS,mBAAmB;AACjC,SACE,oCAAC,SAAI,MAAK,QAAO,SAAQ,eACvB;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,GAAE;AAAA;AAAA,EACH,GACD;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,GAAE;AAAA;AAAA,EACH,CACH;AAEJ;",
+  "sourcesContent": ["import PlaylistAddedIcon from '@atlaskit/icon-lab/core/playlist-added';\nimport * as React from 'react';\n\nexport function SvgPlaylistAdded() {\n  return (\n    <PlaylistAddedIcon\n      label=\"Playlist added icon\"\n      testId=\"ads-refreshed-icon\"\n    />\n  );\n}\n"],
+  "mappings": ";;;AAAA,OAAO,uBAAuB;AAC9B,YAAY,WAAW;AAEhB,SAAS,mBAAmB;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA;AAAA,EACT;AAEJ;",
   "names": []
 }

package/dist/esm/icons/playlist.js

@@ -1,6 +1,6 @@
 import {
   SvgPlaylist
-} from "./chunk-DNFVTET2.js";
+} from "./chunk-VPTDJX3V.js";
 import "./chunk-2NMEKWO5.js";
 export {
   SvgPlaylist

package/dist/esm/index.js

@@ -74,7 +74,7 @@ var hslaBaseColors = {
   magenta: { h: 323, s: 42, l: 48, a: 1 },
   magentaDark: { h: 324, s: 37, l: 23, a: 1 },
   orangeLight: { h: 4, s: 100, l: 91.2, a: 1 },
-  orange: { h: 11, s: 100, l: 62.2, a: 1 },
+  orange: { h: 11.2, s: 100, l: 58, a: 1 },
   orangeDark: { h: 10.9, s: 100, l: 42.2, a: 1 },
   purpleLight: { h: 277.3, s: 86.05, l: 91.57, a: 1 },
   purple: { h: 278.33, s: 85.71, l: 67.06, a: 1 },
@@ -170,13 +170,6 @@ var themeColors = {
       a: 1,
       ads: "--ds-surface-sunken"
     },
-    backgroundSecondary2: {
-      h: 0,
-      s: 0,
-      l: 97.25,
-      a: 1,
-      ads: "--ds-surface-sunken"
-    },
     backgroundNeutral: {
       h: 209,
       s: 76,
@@ -385,13 +378,6 @@ var themeColors = {
       a: 1,
       ads: "--ds-surface-sunken"
     },
-    backgroundSecondary2: {
-      h: 210,
-      s: 4,
-      l: 9.8,
-      a: 1,
-      ads: "--ds-surface-sunken"
-    },
     // Same base hsl to backgroundHover
     backgroundNeutral: {
       h: 240,
@@ -597,34 +583,6 @@ var colorsNames = [
   ...Object.keys(themeColors.light)
 ];
 
-// src/utilities/color.ts
-var getColorAlpha = (color, alpha) => {
-  return `hsla(${hslaColors[color].h},${hslaColors[color].s}%,${hslaColors[color].l}%,${alpha})`;
-};
-var getColorScale = (color, scaleType, scaleIncrement) => {
-  const scaledValue = () => {
-    if (scaleType === "dark") {
-      return hslaColors[color].l - hslaColors[color].l * scaleIncrement;
-    } else if (scaleType === "light") {
-      return hslaColors[color].l + hslaColors[color].l * scaleIncrement;
-    }
-  };
-  return `hsla(${hslaColors[color].h},${hslaColors[color].s}%,${Math.round(
-    scaledValue()
-  )}%,${hslaColors[color].a})`;
-};
-var getColorValue = (color) => {
-  if (color) {
-    if (color in hslaColors || color in themeColors.light) {
-      return `var(--lns-color-${color})`;
-    }
-    if (color in gradients) {
-      return `var(--lns-gradient-${color})`;
-    }
-    return color;
-  }
-};
-
 // src/hooks/use-media.ts
 import _debounce from "lodash/debounce";
 import React from "react";
@@ -644,41 +602,6 @@ function useMedia(queries, values, defaultValue) {
   return value;
 }
 
-// src/utilities/size.ts
-var u = (amount) => amount && `calc(${amount} * var(--lns-unit, ${unit}px))`;
-var getSizeValue = (size) => {
-  if (size in spaces) {
-    return `var(--lns-space-${size})`;
-  }
-  if (size && isNaN(size)) {
-    return `${size}`;
-  }
-  if (size === 0) {
-    return `0`;
-  }
-  if (size) {
-    return `${u(size)}`;
-  }
-};
-var getSize = (property, size) => {
-  if (size || size === 0) {
-    if (Array.isArray(size)) {
-      const rulesetsArray = size.map((sizeItem) => {
-        return `${property}: ${getSizeValue(sizeItem)}`;
-      });
-      return arrayToBreakpoints(rulesetsArray);
-    }
-    if (typeof size === "object") {
-      const sizeValesObject = {};
-      Object.entries(size).forEach(
-        ([key, value]) => sizeValesObject[key] = getSizeValue(value)
-      );
-      return objectToBreakpoints(property, sizeValesObject);
-    }
-    return `${property}: ${getSizeValue(size)};`;
-  }
-};
-
 // src/utilities/responsive.ts
 var getMediaCss = (widthType, breakpoint, declaration) => `@media(${widthType}: ${breakpoint}){${declaration}}`;
 var arrayToBreakpoints = (values) => {
@@ -790,6 +713,34 @@ var Media = ({ children, queries, values, defaultValue }) => {
   return children(value);
 };
 
+// src/utilities/color.ts
+var getColorAlpha = (color, alpha) => {
+  return `hsla(${hslaColors[color].h},${hslaColors[color].s}%,${hslaColors[color].l}%,${alpha})`;
+};
+var getColorScale = (color, scaleType, scaleIncrement) => {
+  const scaledValue = () => {
+    if (scaleType === "dark") {
+      return hslaColors[color].l - hslaColors[color].l * scaleIncrement;
+    } else if (scaleType === "light") {
+      return hslaColors[color].l + hslaColors[color].l * scaleIncrement;
+    }
+  };
+  return `hsla(${hslaColors[color].h},${hslaColors[color].s}%,${Math.round(
+    scaledValue()
+  )}%,${hslaColors[color].a})`;
+};
+var getColorValue = (color) => {
+  if (color) {
+    if (color in hslaColors || color in themeColors.light) {
+      return `var(--lns-color-${color})`;
+    }
+    if (color in gradients) {
+      return `var(--lns-gradient-${color})`;
+    }
+    return color;
+  }
+};
+
 // src/utilities/styles.ts
 var getTextSize = (size) => size && `
   font-size: var(--lns-fontSize-${size});
@@ -821,7 +772,7 @@ var getListContainer = (tag) => {
   }
 };
 var getPlacement = (maxHeight, placement) => {
-  const placementStyles = {
+  const placementStyles2 = {
     center: {
       bottom: 0,
       top: `calc((100vh - ${maxHeight}) / 2)`,
@@ -838,7 +789,7 @@ var getPlacement = (maxHeight, placement) => {
       position: "relative"
     }
   };
-  return placementStyles[placement];
+  return placementStyles2[placement];
 };
 
 // src/utilities/case.ts
@@ -905,6 +856,41 @@ function StyleProvider({
   return /* @__PURE__ */ React2.createElement(React2.Fragment, null, children);
 }
 
+// src/utilities/size.ts
+var u = (amount) => amount && `calc(${amount} * var(--lns-unit, ${unit}px))`;
+var getSizeValue = (size) => {
+  if (size in spaces) {
+    return `var(--lns-space-${size})`;
+  }
+  if (size && isNaN(size)) {
+    return `${size}`;
+  }
+  if (size === 0) {
+    return `0`;
+  }
+  if (size) {
+    return `${u(size)}`;
+  }
+};
+var getSize = (property, size) => {
+  if (size || size === 0) {
+    if (Array.isArray(size)) {
+      const rulesetsArray = size.map((sizeItem) => {
+        return `${property}: ${getSizeValue(sizeItem)}`;
+      });
+      return arrayToBreakpoints(rulesetsArray);
+    }
+    if (typeof size === "object") {
+      const sizeValesObject = {};
+      Object.entries(size).forEach(
+        ([key, value]) => sizeValesObject[key] = getSizeValue(value)
+      );
+      return objectToBreakpoints(property, sizeValesObject);
+    }
+    return `${property}: ${getSizeValue(size)};`;
+  }
+};
+
 // src/variables.ts
 var unit = 8;
 var textSizes = {
@@ -981,17 +967,20 @@ var fontSettings = {
 };
 var radii = {
   none: u(0),
+  25: `var(--ds-radius-xsmall, ${u(0.25)})`,
   50: `var(--ds-radius-small, ${u(0.5)})`,
+  75: `var(--ds-radius-medium, ${u(0.75)})`,
   100: `var(--ds-radius-large, ${u(1)})`,
   medium: `var(--ds-radius-large, ${u(1)})`,
   150: `var(--ds-radius-xlarge, ${u(1.5)})`,
-  175: `var(--ds-radius-xlarge, ${u(1.75)})`,
+  175: `var(--ds-radius-xlarge, ${u(1.5)})`,
   200: `var(--ds-radius-xxlarge, ${u(2)})`,
   large: `var(--ds-radius-xxlarge, ${u(2)})`,
-  250: `var(--ds-radius-xxlarge, ${u(2.5)})`,
-  300: `var(--ds-radius-xxlarge, ${u(3)})`,
-  xlarge: `var(--ds-radius-xxlarge, ${u(3)})`,
+  250: `var(--ds-radius-xxlarge, ${u(2)})`,
+  300: `var(--ds-radius-xxlarge, ${u(2)})`,
+  xlarge: `var(--ds-radius-xxlarge, ${u(2)})`,
   round: `var(--ds-radius-full, ${u(999)})`,
+  tile: `var(--ds-radius-tile, 25%)`,
   full: `var(--ds-radius-full, ${u(999)})`
 };
 var shadows = {
@@ -1781,7 +1770,7 @@ var formFieldVariables = getCssVarsFromObject(void 0, {
   formFieldBorderWidth: "1px",
   formFieldBorderWidthFocus: "2px",
   formFieldHeight: u(4.5),
-  formFieldRadius: "var(--lns-radius-175)",
+  formFieldRadius: "var(--lns-radius-100)",
   formFieldHorizontalPadding: u(2),
   formFieldBorderShadow: `
     inset 0 0 0 var(--lns-formFieldBorderWidth) var(--lns-color-formFieldBorder)
@@ -2318,18 +2307,21 @@ var variantStyles = {
     active: null
   }
 };
-var statusStyles = (props) => ({
-  enabled: css2`
-    cursor: pointer;
-  `,
-  disabled: css2`
-    ${props.ariaDisabled && `aria-disabled: true`};
-    pointer-events: none;
-    background-color: ${getColorValue("disabledBackground")};
-    color: ${getColorValue("disabledContent")};
-    border: none;
-  `
-});
+var statusStyles = (props) => {
+  const useFloatingDisabledColors = props.isFloating && props.disabled;
+  return {
+    enabled: css2`
+      cursor: pointer;
+    `,
+    disabled: css2`
+      ${props.ariaDisabled && `aria-disabled: true`};
+      pointer-events: none;
+      background-color: ${useFloatingDisabledColors ? props.variant === "neutral" ? variantStyles[props.variant].floatingActive : variantStyles[props.variant].active || getColorValue("disabledBackground") : getColorValue("disabledBackground")};
+      color: ${useFloatingDisabledColors ? variantStyles[props.variant].color : getColorValue("disabledContent")};
+      border: ${variantStyles[props.variant].borderColor ? `1px solid ${variantStyles[props.variant].borderColor}` : "none"};
+    `
+  };
+};
 var widthStyles = (props) => ({
   auto: css2`
     display: inline-flex;
@@ -3225,7 +3217,7 @@ var error_container_default = ErrorContainer;
 
 // src/components/layout/layout.tsx
 import styled13 from "@emotion/styled";
-import React17, { Component } from "react";
+import React17 from "react";
 var alignments3 = {
   start: "flex-start",
   center: "center",
@@ -3259,11 +3251,9 @@ var LayoutSection = (_a) => {
   console.warn(layoutDeprecatedWarning);
   return /* @__PURE__ */ React17.createElement(LayoutSectionWrapper, __spreadValues({ width, maxWidth }, props), children);
 };
-var Layout = class extends Component {
-  render() {
-    console.warn(layoutDeprecatedWarning);
-    return /* @__PURE__ */ React17.createElement(LayoutWrapper, __spreadValues({}, this.props), this.props.children);
-  }
+var Layout = (props) => {
+  console.warn(layoutDeprecatedWarning);
+  return /* @__PURE__ */ React17.createElement(LayoutWrapper, __spreadValues({}, props), props.children);
 };
 Layout.Section = LayoutSection;
 var layout_default = Layout;
@@ -6329,6 +6319,7 @@ var FormField = (_a) => {
 var form_field_default = FormField;
 
 // src/components/notification-bar/notification-bar.tsx
+import { css as css4 } from "@emotion/react";
 import styled29 from "@emotion/styled";
 import React41, { useEffect as useEffect8 } from "react";
 
@@ -6451,6 +6442,27 @@ var severityStyles = {
     fontFamily: "var(--lns-fontFamily-code)"
   }
 };
+var placementStyles = {
+  pageTop: {
+    wrapper: css4`
+      position: fixed;
+      padding: var(--lns-space-medium) var(--paddingXOffset);
+      top: 0;
+      bottom: auto;
+    `,
+    closedTransform: "translateY(-100%)"
+  },
+  containerBottom: {
+    wrapper: css4`
+      position: absolute;
+      padding: var(--lns-space-medium);
+      top: auto;
+      bottom: 0;
+    `,
+    closedTransform: "translateY(100%)"
+  }
+};
+var getPlacementStyles = (placement = "pageTop") => placementStyles[placement];
 var DURATION = 350;
 var NotificationBarWrapper = styled29.aside`
   --paddingXOffset: var(--lns-space-large);
@@ -6464,18 +6476,22 @@ var NotificationBarWrapper = styled29.aside`
   ${(props) => `font-family: ${severityStyles[props.severity].fontFamily}`};
 
   ${(props) => `color: ${severityStyles[props.severity].color}`};
-  position: fixed;
-  padding: var(--lns-space-medium) var(--paddingXOffset);
-  top: 0;
+  ${(props) => getPlacementStyles(props.placement).wrapper};
   left: 0;
   transition:
     ${DURATION}ms box-shadow,
     ${DURATION}ms transform;
+  pointer-events: ${(props) => props.isOpen ? "auto" : "none"};
   width: 100%;
   box-sizing: border-box;
   z-index: 1100;
   opacity: ${(props) => props.isOpen ? "1" : "0"};
-  transform: ${(props) => props.isOpen ? "translateY(0px)" : "translateY(-100%)"};
+  transform: ${(props) => {
+  if (props.isOpen) {
+    return "translateY(0px)";
+  }
+  return getPlacementStyles(props.placement).closedTransform;
+}};
   @media (min-width: 872px) {
     --alignItems: center;
   }
@@ -6485,69 +6501,88 @@ var NotificationBar = ({
   onCloseClick,
   isOpen,
   severity = "info",
-  id
+  placement = "pageTop",
+  id,
+  keepMounted = false
 }) => {
   var _a, _b, _c;
   useEffect8(() => {
-    if (!isOpen) {
+    if (!isOpen || !onCloseClick) {
       return;
     }
     const keyListener = (e) => {
       if (e.key === "Escape") {
-        e.preventDefault();
-        onCloseClick && onCloseClick();
+        if (placement === "pageTop") {
+          e.preventDefault();
+        }
+        onCloseClick();
       }
     };
     window.addEventListener("keydown", keyListener);
     return () => {
       window.removeEventListener("keydown", keyListener);
     };
-  }, [isOpen, onCloseClick]);
-  use_push_page_down_default(isOpen);
+  }, [isOpen, onCloseClick, placement]);
+  use_push_page_down_default(placement === "pageTop" && isOpen === true);
   const isInternalAlert = severity === "internal";
-  return isOpen ? /* @__PURE__ */ React41.createElement(NotificationBarWrapper, { isOpen, severity, id }, /* @__PURE__ */ React41.createElement(
-    arrange_default,
+  const isContainerBottom = placement === "containerBottom";
+  if (isOpen !== true && !keepMounted) {
+    return null;
+  }
+  return /* @__PURE__ */ React41.createElement(
+    NotificationBarWrapper,
     {
-      alignItems: { default: "start", small: "center" },
-      justifyContent: "space-between",
-      autoFlow: isInternalAlert ? "column" : void 0,
-      columns: !isInternalAlert ? ["1fr auto"] : void 0
+      "aria-hidden": isOpen === true ? void 0 : true,
+      isOpen: isOpen === true,
+      severity,
+      placement,
+      id
     },
     /* @__PURE__ */ React41.createElement(
-      container_default,
+      arrange_default,
       {
-        paddingY: { default: "xsmall", xsmall: 0 },
-        paddingLeft: !isInternalAlert ? { default: 0, medium: u(3.5) } : void 0,
-        width: "100%"
+        alignItems: { default: "start", small: "center" },
+        justifyContent: "space-between",
+        autoFlow: isInternalAlert ? "column" : void 0,
+        columns: !isInternalAlert ? ["1fr auto"] : void 0
       },
       /* @__PURE__ */ React41.createElement(
-        arrange_default,
+        container_default,
         {
-          autoFlow: "column",
-          gap: isInternalAlert ? "medium" : "small",
-          justifyContent: "center"
+          paddingY: { default: "xsmall", xsmall: 0 },
+          paddingLeft: !isInternalAlert && !isContainerBottom ? { default: 0, medium: u(3.5) } : void 0,
+          width: "100%"
         },
-        ((_a = severityStyles[severity]) == null ? void 0 : _a.icon) ? /* @__PURE__ */ React41.createElement(align_default, { alignment: "topLeft" }, /* @__PURE__ */ React41.createElement(
-          icon_default,
+        /* @__PURE__ */ React41.createElement(
+          arrange_default,
           {
-            icon: severityStyles[severity].icon,
-            color: (_b = severityStyles[severity].color) != null ? _b : "var(--lns-color-white)"
-          }
-        )) : null,
-        " ",
-        children
+            autoFlow: "column",
+            gap: isInternalAlert ? "medium" : "small",
+            justifyContent: isContainerBottom ? "start" : "center"
+          },
+          ((_a = severityStyles[severity]) == null ? void 0 : _a.icon) ? /* @__PURE__ */ React41.createElement(align_default, { alignment: "topLeft" }, /* @__PURE__ */ React41.createElement(
+            icon_default,
+            {
+              icon: severityStyles[severity].icon,
+              color: (_b = severityStyles[severity].color) != null ? _b : "var(--lns-color-white)"
+            }
+          )) : null,
+          " ",
+          children
+        )
       )
+    ),
+    isOpen === true && onCloseClick && /* @__PURE__ */ React41.createElement(
+      icon_button_default,
+      {
+        iconColor: (_c = severityStyles[severity].color) != null ? _c : "var(--lns-color-white)",
+        tabIndex: 0,
+        altText: "Close",
+        icon: /* @__PURE__ */ React41.createElement(SvgClose, null),
+        onClick: onCloseClick
+      }
     )
-  ), onCloseClick && /* @__PURE__ */ React41.createElement(
-    icon_button_default,
-    {
-      iconColor: (_c = severityStyles[severity].color) != null ? _c : "var(--lns-color-white)",
-      tabIndex: 0,
-      altText: "Close",
-      icon: /* @__PURE__ */ React41.createElement(SvgClose, null),
-      onClick: onCloseClick
-    }
-  )) : null;
+  );
 };
 var notification_bar_default = NotificationBar;
 
@@ -6894,10 +6929,10 @@ var availablePlacements = Object.keys(placements);
 var tooltip_default = Tooltip;
 
 // src/components/skeleton/skeleton.tsx
-import { css as css4 } from "@emotion/react";
+import { css as css5 } from "@emotion/react";
 import styled32 from "@emotion/styled";
 import React44 from "react";
-var SkeletonAnimation = css4`
+var SkeletonAnimation = css5`
   @media (prefers-reduced-motion: no-preference) {
     animation: shimmer 2s infinite linear;
     background: linear-gradient(
@@ -7472,12 +7507,12 @@ var LogoLoader = ({
 var logo_loader_default = LogoLoader;
 
 // src/components/list/list.tsx
-import { css as css5 } from "@emotion/react";
+import { css as css6 } from "@emotion/react";
 import styled35 from "@emotion/styled";
 import React47 from "react";
 var ssrComment = `/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */`;
 var variantStyles2 = {
-  border: css5`
+  border: css6`
     .ListRowWrapper:last-child {
       border-bottom: 1px solid ${getColorValue("border")};
     }
@@ -7487,7 +7522,7 @@ var variantStyles2 = {
       border-top: 1px solid ${getColorValue("border")};
     }
   `,
-  stripe: css5`
+  stripe: css6`
     .ListRowWrapper {
       &:nth-child(odd) ${ssrComment} {
         background-color: ${getColorValue("backgroundSecondary")};
@@ -7498,7 +7533,7 @@ var variantStyles2 = {
       ${getRadius("medium")};
     }
   `,
-  clear: css5``
+  clear: css6``
 };
 var ListWrapper = styled35.div`
   .ListRowWrapper {
@@ -8276,10 +8311,10 @@ var Illustration = (_a) => {
 var illustration_default = Illustration;
 
 // src/components/split/split.tsx
-import { css as css6 } from "@emotion/react";
+import { css as css7 } from "@emotion/react";
 import styled40 from "@emotion/styled";
 import React52, { Children, cloneElement } from "react";
-var getSizeStyles = (props) => css6`
+var getSizeStyles = (props) => css7`
   ${getSize("width", props.width)};
   ${getSize("height", props.height)};
   ${getSize("min-width", props.minWidth)};