@loomhq/lens 12.18.0 → 12.20.2

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,18 +967,21 @@ var fontSettings = {
 };
 var radii = {
   none: u(0),
-  50: u(0.5),
-  100: u(1),
-  medium: u(1),
-  150: u(1.5),
-  175: u(1.75),
-  200: u(2),
-  large: u(2),
-  250: u(2.5),
-  300: u(3),
-  xlarge: u(3),
-  round: u(999),
-  full: u(999)
+  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.5)})`,
+  200: `var(--ds-radius-xxlarge, ${u(2)})`,
+  large: `var(--ds-radius-xxlarge, ${u(2)})`,
+  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 = {
   small: `0 ${u(0.5)} ${u(1.25)} hsla(0, 0%, 0%, 0.05)`,
@@ -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)
@@ -2002,6 +1991,7 @@ var Avatar = (_a) => {
     size = 4,
     letter,
     imageSrc,
+    imageLoading,
     children,
     themeColor = "blue"
   } = _b, props = __objRest(_b, [
@@ -2009,6 +1999,7 @@ var Avatar = (_a) => {
     "size",
     "letter",
     "imageSrc",
+    "imageLoading",
     "children",
     "themeColor"
   ]);
@@ -2026,7 +2017,8 @@ var Avatar = (_a) => {
           alt: altText,
           src: imageSrc,
           height,
-          width
+          width,
+          loading: imageLoading
         }
       );
     }
@@ -2076,11 +2068,6 @@ var buildGlobalStylesheet = (rootElement = ":root", bodyElement = "body") => {
       box-sizing: border-box;
     }
 
-    ${bodyElement} * {
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-    }
-
     ${getThemeStylesString(rootElement)}
 
     ${getAllCssVarsString(rootElement)}
@@ -2232,24 +2219,27 @@ var loader_default = Loader;
 var sizesStyles = {
   small: {
     height: u(4),
-    textSize: "small",
+    textSize: "medium",
     iconSize: 2,
     xSpace: u(1.5),
-    radius: "var(--lns-radius-150)"
+    radius: "var(--ds-radius-medium)",
+    iconGap: `var(--ds-space-075, ${u(1)})`
   },
   medium: {
     height: u(4.5),
     textSize: "medium",
     iconSize: 3,
-    xSpace: u(2),
-    radius: "var(--lns-radius-175)"
+    xSpace: `var(--ds-space-150)`,
+    radius: "var(--ds-radius-large)",
+    iconGap: `var(--ds-space-075)`
   },
   large: {
     height: u(7),
     textSize: "large",
     iconSize: 4,
-    xSpace: u(2.5),
-    radius: "var(--lns-radius-250)"
+    xSpace: `var(--ds-space-200)`,
+    radius: "var(--ds-radius-xlarge)",
+    iconGap: u(1)
   }
 };
 var hasLoaderStyles = (props) => css2`
@@ -2317,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;
@@ -2344,7 +2337,6 @@ var widthStyles = (props) => ({
     min-width: max-content;
   `
 });
-var iconGap = u(1);
 var ButtonWrapper = styled5.button`
   appearance: none;
   padding: 0
@@ -2358,7 +2350,7 @@ var ButtonWrapper = styled5.button`
   justify-content: center;
   vertical-align: middle;
   white-space: nowrap;
-  ${getFontWeight("bold")};
+  font-weight: var(--ds-font-weight-medium);
   border-radius: ${(props) => sizesStyles[props.size].radius};
   // TODO: remove hasFullWidth after deprecation period
   ${(props) => props.hasFullWidth ? "display: flex; width: 100%" : "display: inline-flex"};
@@ -2464,7 +2456,7 @@ var Button = (_a) => {
     {
       hasLoader,
       paddingLeft: "0",
-      paddingRight: children ? iconGap : "0"
+      paddingRight: children ? sizesStyles[size].iconGap : "0"
     },
     /* @__PURE__ */ React8.createElement(
       icon_default,
@@ -2480,7 +2472,7 @@ var Button = (_a) => {
     IconSection,
     {
       hasLoader,
-      paddingLeft: children ? iconGap : "0",
+      paddingLeft: children ? sizesStyles[size].iconGap : "0",
       paddingRight: "unset"
     },
     /* @__PURE__ */ React8.createElement(
@@ -2821,21 +2813,21 @@ var sizesStyles2 = {
     height: u(4),
     width: u(5),
     iconSize: 2,
-    padding: u(1.75),
+    padding: `var(--ds-space-150)`,
     withIconPadding: u(4.5),
     passwordAdditionalPadding: u(0.5),
     textSize: "small",
-    radius: "var(--lns-radius-150)"
+    radius: "var(--ds-radius-medium)"
   },
   medium: {
     height: "var(--lns-formFieldHeight)",
     width: u(6),
     iconSize: 3,
-    padding: "var(--lns-formFieldHorizontalPadding)",
+    padding: "var(--ds-space-150)",
     withIconPadding: u(5.5),
     passwordAdditionalPadding: u(0.5),
     textSize: "medium",
-    radius: "var(--lns-radius-175)"
+    radius: "var(--ds-radius-large)"
   },
   large: {
     height: u(7),
@@ -2845,7 +2837,7 @@ var sizesStyles2 = {
     withIconPadding: u(5.5),
     passwordAdditionalPadding: u(0.5),
     textSize: "large",
-    radius: "var(--lns-radius-250)"
+    radius: "var(--ds-radius-xlarge)"
   }
 };
 var inputRightPadding = (props) => {
@@ -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;
@@ -3275,17 +3265,17 @@ var sizeStyles = {
   small: {
     size: u(3),
     iconSize: 2.25,
-    radius: "var(--lns-radius-100)"
+    radius: "var(--ds-radius-small)"
   },
   medium: {
     size: u(4),
     iconSize: 3,
-    radius: "var(--lns-radius-150)"
+    radius: "var(--ds-radius-medium)"
   },
   large: {
     size: u(5),
     iconSize: 4,
-    radius: "var(--lns-radius-175)"
+    radius: "var(--ds-radius-large)"
   }
 };
 var IconButtonBox = styled14.button`
@@ -3426,7 +3416,7 @@ var CheckboxInput = styled15.input`
     cursor: pointer;
 
     & ~ .CheckboxBox {
-      border: 2px solid ${getColorValue("body")};
+      border: 2px solid ${(props) => getColorValue(props.borderColor || "body")};
     }
 
     &:checked ~ .CheckboxBox,
@@ -3483,14 +3473,16 @@ var Checkbox = forwardRef2(
       isIndeterminate,
       onFocus,
       onChange,
-      onBlur
+      onBlur,
+      borderColor
     } = _b, props = __objRest(_b, [
       "isDisabled",
       "isChecked",
       "isIndeterminate",
       "onFocus",
       "onChange",
-      "onBlur"
+      "onBlur",
+      "borderColor"
     ]);
     const defaultRef = useRef2();
     const checkboxRef = ref || defaultRef;
@@ -3510,7 +3502,8 @@ var Checkbox = forwardRef2(
         onChange,
         onBlur,
         ref: checkboxRef,
-        "aria-checked": isChecked
+        "aria-checked": isChecked,
+        borderColor
       }, props)
     ), /* @__PURE__ */ React19.createElement(CheckboxBox, { className: "CheckboxBox" }, /* @__PURE__ */ React19.createElement(SvgCheckboxMinus, { className: "Icon IconMinus", color: iconColor }), /* @__PURE__ */ React19.createElement(SvgCheckboxCheck, { className: "Icon IconCheck", color: iconColor })));
   }
@@ -3526,21 +3519,21 @@ var sizeStyles2 = {
     iconSize: 2.25,
     height: u(3),
     xSpace: u(1),
-    radius: "var(--lns-radius-100)"
+    radius: "var(--ds-radius-small)"
   },
   medium: {
     textSize: "medium",
     iconSize: 3,
     height: u(4),
     xSpace: u(1.5),
-    radius: "var(--lns-radius-150)"
+    radius: "var(--ds-radius-medium)"
   },
   large: {
     textSize: "large",
     iconSize: 4,
     height: u(6),
-    xSpace: u(3),
-    radius: "var(--lns-radius-200)"
+    xSpace: `var(--ds-space-200)`,
+    radius: "var(--ds-radius-large)"
   }
 };
 var TextButtonWrapper = styled16.button`
@@ -3556,7 +3549,7 @@ var TextButtonWrapper = styled16.button`
   cursor: pointer;
   transition: 0.6s background-color;
   color: ${(props) => getColorValue(props.color || "body")};
-  ${getFontWeight("bold")};
+  font-weight: var(--ds-font-weight-medium);
   border-radius: ${(props) => sizeStyles2[props.size].radius};
   ${(props) => getTextSize(sizeStyles2[props.size].textSize)};
   padding: 0 ${(props) => sizeStyles2[props.size].xSpace};
@@ -3762,7 +3755,7 @@ var MenuContainer = styled17.div`
   z-index: ${(props) => props.zIndex};
   border: 1px solid ${getColorValue("border")};
   ${getShadow("medium")};
-  ${getRadius("250")};
+  border-radius: var(--ds-radius-large);
   overflow: hidden;
 `;
 var SearchWrapper = styled17.div`
@@ -3781,10 +3774,10 @@ var MenuItemWrapper = styled17.li`
   grid-auto-flow: column;
   grid-template-columns: ${(props) => props.columns};
   ${getSize("grid-gap", "small")};
-  ${getRadius("175")};
+  border-radius: var(--ds-radius-medium);
   align-items: center;
   min-height: ${u(5)};
-  padding: 0 ${u(2)};
+  padding: 0 var(--ds-space-150);
   cursor: ${(props) => props.isDisabled ? "default" : "pointer"};
   &:focus-visible {
     outline: 1px solid transparent;
@@ -3879,7 +3872,7 @@ var MenuItem = (_a) => {
       showDeselectIcon
     }, updatedProps),
     icon && (typeof icon === "string" ? /* @__PURE__ */ React25.createElement(container_default, { radius: "50", width: 3, height: 3, overflow: "hidden" }, /* @__PURE__ */ React25.createElement(align_default, { alignment: "center" }, /* @__PURE__ */ React25.createElement(Image2, { src: icon, alt: "", isDisabled }))) : /* @__PURE__ */ React25.createElement(icon_default, { icon, color })),
-    /* @__PURE__ */ React25.createElement(text_default, { color, hasEllipsis: true }, children),
+    /* @__PURE__ */ React25.createElement(text_default, { fontWeight: "medium", color, hasEllipsis: true }, children),
     isSelected && /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement("span", { className: "check-icon", "aria-hidden": "true" }, /* @__PURE__ */ React25.createElement(icon_default, { icon: /* @__PURE__ */ React25.createElement(SvgCheck, null), color })), /* @__PURE__ */ React25.createElement("span", { className: "deselect-icon", "aria-hidden": "true" }, /* @__PURE__ */ React25.createElement(icon_default, { icon: /* @__PURE__ */ React25.createElement(SvgClose, null), color })))
   );
 };
@@ -3988,12 +3981,12 @@ var SelectHeaderWrapper = styled19.button`
   cursor: pointer;
   width: 100%;
   min-height: ${u(4.5)};
-  padding: 0 ${u(1.5)} 0 var(--lns-formFieldHorizontalPadding);
+  padding: 0 ${u(1.5)} 0 var(--ds-space-150);
   color: ${getColorValue("body")};
   border: none;
   background-color: ${getColorValue("formFieldBackground")};
   transition: 0.3s box-shadow;
-  border-radius: var(--lns-formFieldRadius);
+  border-radius: var(--ds-radius-large);
   box-shadow: inset 0 0 0
     ${(props) => props.hasError ? "var(--lns-formFieldBorderWidthFocus) var(--lns-color-danger)" : "var(--lns-formFieldBorderWidth) var(--lns-color-formFieldBorder)"};
 
@@ -4697,7 +4690,7 @@ var ModalCardWrapper = styled21.dialog`
   color: ${getColorValue("body")};
   bottom: ${(props) => getPlacement(props.maxHeight, props.placement).bottom};
   ${getShadow("large")};
-  ${getRadius("xlarge")};
+  border-radius: var(--ds-radius-xlarge);
   // Unsets bottom-radius for bottom-aligned modals
   border-bottom-left-radius: ${(props) => props.placement === "bottom" ? "initial" : void 0};
   border-bottom-right-radius: ${(props) => props.placement === "bottom" ? "initial" : void 0};
@@ -5100,11 +5093,11 @@ import styled23 from "@emotion/styled";
 import React32 from "react";
 var sizesStyles3 = {
   small: {
-    padding: `${u(1.5)} ${u(1.75)}`,
+    padding: `var(--ds-space-100) var(--ds-space-150)`,
     textSize: "small"
   },
   medium: {
-    padding: `${u(1.5)} var(--lns-formFieldHorizontalPadding)`,
+    padding: `var(--ds-space-100) var(--ds-space-150)`,
     textSize: "medium"
   }
 };
@@ -5116,7 +5109,7 @@ var TextareaWrapper = styled23.textarea`
   background-color: ${getColorValue("formFieldBackground")};
   transition: 0.3s box-shadow;
   padding: ${(props) => sizesStyles3[props.size].padding};
-  ${getRadius("250")};
+  border-radius: var(--ds-radius-large);
   box-shadow: inset 0 0 0 var(--lns-formFieldBorderWidth)
     ${(props) => props.error ? "var(--lns-color-danger)" : "var(--lns-color-formFieldBorder)"};
   ${(props) => getTextSize(sizesStyles3[props.size].textSize)};
@@ -5297,9 +5290,9 @@ var TypeaheadInputField = styled24.input`
   padding-top: 0;
   padding-bottom: 0;
   id: ${(props) => props.id};
-  padding-left: ${(props) => props.hasIcon ? u(5.5) : "var(--lns-formFieldHorizontalPadding)"};
-  padding-right: ${(props) => props.hasAddOn ? u(5.5) : "var(--lns-formFieldHorizontalPadding)"};
-  border-radius: var(--lns-formFieldRadius);
+  padding-left: ${(props) => props.hasIcon ? u(5.5) : "var(--ds-space-150)"};
+  padding-right: ${(props) => props.hasAddOn ? u(5.5) : "var(--ds-space-150)"};
+  border-radius: var(--ds-radius-large, var(--lns-formFieldRadius));
   box-shadow: inset 0 0 0
     ${(props) => props.hasError ? "var(--lns-formFieldBorderWidthFocus) var(--lns-color-danger)" : "var(--lns-formFieldBorderWidth) var(--lns-color-formFieldBorder)"};
 
@@ -6326,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";
 
@@ -6448,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);
@@ -6461,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;
   }
@@ -6482,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;
 
@@ -6597,7 +6635,7 @@ var ToastWrapper = styled30.div`
   animation: ${(props) => enter(props.toastDuration, props.platform)}
     ${(props) => props.toastDuration}ms forwards;
   background-color: ${getColorValue("backgroundInverse")};
-  ${getRadius("250")};
+  border-radius: var(--ds-radius-large);
   top: ${(props) => getTop(props.platform)};
   bottom: ${(props) => getBottom(props.platform)};
   ${getShadow("large")};
@@ -6609,7 +6647,7 @@ var ToastWrapper = styled30.div`
   left: 50%;
   max-width: ${u(50)}; // Fallback when min() function is not supported
   max-width: min(90%, ${u(50)});
-  padding: ${u(1.5)} var(--lns-space-medium) ${u(1.5)} var(--lns-space-large);
+  padding: ${u(1.5)} var(--ds-space-150) ${u(1.5)} var(--ds-space-200);
   position: fixed;
   transform: translateX(-50%);
   width: max-content;
@@ -6684,8 +6722,8 @@ var tooltipYPadding = (tooltipMinHeight - textHeight) / 2;
 var TooltipBoxWrapper = styled31.div`
   background-color: ${getColorValue("backgroundInverse")};
   color: ${getColorValue("bodyInverse")};
-  ${getRadius("150")};
-  ${getFontWeight("bold")};
+  border-radius: var(--ds-radius-medium);
+  font-weight: var(--ds-font-weight-medium);
   ${getTextSize("small")};
   ${getShadow("medium")};
   ${(props) => getSize("max-width", props.maxWidth)};
@@ -6695,9 +6733,9 @@ var TooltipBoxWrapper = styled31.div`
 `;
 var ShortcutWrapper = styled31.div`
   background-color: ${getColorValue("grey7")};
-  border-radius: 3px;
+  border-radius: var(--ds-radius-xsmall);
   color: ${getColorValue("grey3")};
-  ${getFontWeight("bold")};
+  font-weight: var(--ds-font-weight-medium);
   ${getTextSize("small")};
   padding-left: ${u(0.5)};
   padding-right: ${u(0.5)};
@@ -6883,7 +6921,7 @@ var Tooltip = (_a) => {
         role: "tooltip",
         id: tooltipId
       }, rest),
-      /* @__PURE__ */ React43.createElement(arrange_default, { gap: "small" }, /* @__PURE__ */ React43.createElement(text_default, { size: "small", fontWeight: "bold" }, content), shortcut && /* @__PURE__ */ React43.createElement(arrange_default, { gap: "xsmall" }, shortcut.map((char, index) => /* @__PURE__ */ React43.createElement(ShortcutBox, { key: index }, char))))
+      /* @__PURE__ */ React43.createElement(arrange_default, { gap: "small" }, /* @__PURE__ */ React43.createElement(text_default, { size: "small", fontWeight: "medium" }, content), shortcut && /* @__PURE__ */ React43.createElement(arrange_default, { gap: "xsmall" }, shortcut.map((char, index) => /* @__PURE__ */ React43.createElement(ShortcutBox, { key: index }, char))))
     ))
   ));
 };
@@ -6891,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(
@@ -7469,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")};
     }
@@ -7484,7 +7522,7 @@ var variantStyles2 = {
       border-top: 1px solid ${getColorValue("border")};
     }
   `,
-  stripe: css5`
+  stripe: css6`
     .ListRowWrapper {
       &:nth-child(odd) ${ssrComment} {
         background-color: ${getColorValue("backgroundSecondary")};
@@ -7495,7 +7533,7 @@ var variantStyles2 = {
       ${getRadius("medium")};
     }
   `,
-  clear: css5``
+  clear: css6``
 };
 var ListWrapper = styled35.div`
   .ListRowWrapper {
@@ -7692,7 +7730,7 @@ var TabsNav = styled36.div`
   }
 `;
 var TabsNavPilled = styled36.div`
-  ${getRadius("200")};
+  border-radius: var(--ds-radius-xlarge, var(--lns-radius-200));
   background-color: var(--lns-color-backgroundSecondary);
 
   padding: var(--lns-space-xsmall);
@@ -7737,7 +7775,7 @@ var TabWrapper = styled36.button`
   color: inherit;
   text-decoration: none;
   flex-shrink: 0;
-  ${getFontWeight("bold")};
+  font-weight: var(--ds-font-weight-medium);
   transition: 0.6s color;
   white-space: nowrap;
   color: ${(props) => getColorValue(
@@ -7762,7 +7800,7 @@ var TabWrapper = styled36.button`
 
   &::after {
     bottom: 0;
-    ${getRadius("medium")};
+    border-radius: 0;
     content: '';
     height: var(--activeIndicatorHeight);
     position: absolute;
@@ -7777,7 +7815,7 @@ var TabWrapperPilled = styled36.button`
   font: inherit;
   background: transparent;
   border: none;
-  ${getRadius("175")};
+  border-radius: var(--ds-radius-large, var(--lns-radius-175));
   cursor: pointer;
   display: inline-flex;
   align-items: center;
@@ -7787,7 +7825,7 @@ var TabWrapperPilled = styled36.button`
   color: inherit;
   text-decoration: none;
   flex-shrink: 0;
-  ${getFontWeight("bold")};
+  font-weight: var(--ds-font-weight-medium);
 
   transition: 0.6s color;
   white-space: nowrap;
@@ -8063,13 +8101,13 @@ var PillWrapper = styled37.div`
   grid-auto-flow: column;
   align-items: center;
   vertical-align: middle;
-  padding: 0 ${u(1.5)};
+  padding: 0 var(--ds-space-100);
   min-height: ${u(3.25)};
   color: ${(props) => getColorValue(props.color)};
   background-color: ${(props) => getColorValue(props.backgroundColor)};
-  ${getRadius("100")};
+  border-radius: var(--ds-radius-medium);
   ${getTextSize("small")};
-  ${getFontWeight("bold")};
+  font-weight: var(--ds-font-weight-medium);
   ${getSize("gap", "xsmall")};
 `;
 var Pill = (_a) => {
@@ -8128,9 +8166,9 @@ var placements2 = {
 };
 var Wrapper2 = styled38.div`
   position: relative;
-  width: fit-content;
   // transform forces the popover to calculate the position from the trigger instead of the viewport
   transform: translate(0);
+  width: ${(props) => props.width};
   z-index: ${(props) => props.childrenZIndex};
 `;
 var ContentWrapper2 = styled38.div`
@@ -8149,7 +8187,8 @@ var Popover = (_a) => {
     rootId,
     boundaryElement = "body",
     transitionDuration = 0,
-    transitionDelay = 0
+    transitionDelay = 0,
+    width = "fit-content"
   } = _b, props = __objRest(_b, [
     "children",
     "content",
@@ -8162,7 +8201,8 @@ var Popover = (_a) => {
     "rootId",
     "boundaryElement",
     "transitionDuration",
-    "transitionDelay"
+    "transitionDelay",
+    "width"
   ]);
   const unitOffset = offset * unit;
   const unitBoundaryOffset = boundaryOffset * unit;
@@ -8211,10 +8251,20 @@ var Popover = (_a) => {
       opacity: stage === "enter" ? 1 : 0
     }
   };
-  return /* @__PURE__ */ React50.createElement(Wrapper2, __spreadProps(__spreadValues({ ref: reference }, props), { childrenZIndex }), children, shouldMount && /* @__PURE__ */ React50.createElement(React50.Fragment, null, !rootNode && /* @__PURE__ */ React50.createElement(ContentWrapper2, __spreadValues({}, contentProps), content), rootNode && ReactDOM.createPortal(
-    /* @__PURE__ */ React50.createElement(ContentWrapper2, __spreadValues({}, contentProps), content),
-    rootNode
-  )));
+  return /* @__PURE__ */ React50.createElement(
+    Wrapper2,
+    __spreadProps(__spreadValues({
+      ref: reference
+    }, props), {
+      childrenZIndex,
+      width
+    }),
+    children,
+    shouldMount && /* @__PURE__ */ React50.createElement(React50.Fragment, null, !rootNode && /* @__PURE__ */ React50.createElement(ContentWrapper2, __spreadValues({}, contentProps), content), rootNode && ReactDOM.createPortal(
+      /* @__PURE__ */ React50.createElement(ContentWrapper2, __spreadValues({}, contentProps), content),
+      rootNode
+    ))
+  );
 };
 var popover_default = Popover;
 
@@ -8261,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)};
@@ -8424,7 +8474,7 @@ var ColorfulWrapper = styled41.div`
     height: ${u(14)};
     border-bottom: none;
     box-shadow: inset 0 0 0 1px var(--lns-color-border);
-    ${getRadius(100)};
+    border-radius: var(--ds-radius-small);
     margin-bottom: var(--lns-space-small);
   }
 
@@ -8457,7 +8507,7 @@ var ColorPickerContainer = styled41.div`
   position: relative;
   width: ${u(31)};
   background-color: var(--lns-color-overlay);
-  ${getRadius("250")};
+  border-radius: var(--ds-radius-large);
   box-shadow:
     0 0 0 1px var(--lns-color-border),
     var(--lns-shadow-medium);
@@ -8475,7 +8525,7 @@ var InputContainer = styled41.div`
     border: none;
     box-shadow: inset 0 0 0 var(--lns-formFieldBorderWidth)
       var(--lns-color-formFieldBorder);
-    ${getRadius("150")};
+    border-radius: var(--ds-radius-medium);
     transition: 0.3s box-shadow;
     background-color: var(--lns-color-overlay);
     color: var(--lns-color-body);
@@ -8498,7 +8548,7 @@ var ColorBox = styled41.div`
   left: var(--lns-space-xsmall);
   top: var(--lns-space-xsmall);
   border: 1px solid rgba(0, 0, 0, 0.1);
-  ${getRadius("100")};
+  border-radius: var(--ds-radius-medium);
   background-color: ${(props) => props.color};
 `;
 var ButtonWrapper2 = styled41.div`
@@ -8518,7 +8568,7 @@ var Swatch = styled41.div`
   cursor: pointer;
   width: ${u(3)};
   height: ${u(3)};
-  ${getRadius("100")};
+  border-radius: var(--ds-radius-medium);
   background-color: ${(props) => props.color};
   border: ${(props) => props.selected === props.color ? "1px solid white" : "1px solid var(--lns-color-border)"};
   box-shadow: ${(props) => props.selected === props.color && "0 0 0 2px var(--lns-color-focusRing)"};