@loomhq/lens 11.32.0 → 12.1.0

package/dist/cjs/index.js

@@ -141,7 +141,8 @@ __export(src_exports, {
   Popover: () => popover_default,
   Radio: () => radio_default,
   Select: () => select_default,
-  SkeletonText: () => skeleton_text_default,
+  SkeletonContainer: () => SkeletonContainer,
+  SkeletonText: () => SkeletonText,
   Spacer: () => spacer_default,
   Split: () => split_default,
   SplitSection: () => SplitSection,
@@ -157,7 +158,7 @@ __export(src_exports, {
   TooltipBox: () => TooltipBox,
   accessibilityRules: () => accessibilityRules,
   alignSelfRules: () => alignSelfRules,
-  alpha: () => alpha,
+  alphaFunction: () => alphaFunction,
   arrayToBreakpoints: () => arrayToBreakpoints,
   backgroundColorRules: () => backgroundColorRules,
   borderRules: () => borderRules,
@@ -187,6 +188,7 @@ __export(src_exports, {
   getFontWeight: () => getFontWeight,
   getListContainer: () => getListContainer,
   getMediaCss: () => getMediaCss,
+  getOffsetFocusRing: () => getOffsetFocusRing,
   getPlacement: () => getPlacement,
   getRadius: () => getRadius,
   getResponsiveBoolean: () => getResponsiveBoolean,
@@ -251,7 +253,7 @@ __export(src_exports, {
   widthRules: () => widthRules
 });
 module.exports = __toCommonJS(src_exports);
-var import_core8 = require("@emotion/core");
+var import_react55 = require("@emotion/react");
 
 // src/colors.ts
 var percent = (number, percentage) => Math.round(number * percentage / 100);
@@ -264,129 +266,382 @@ var lighten = (color, percentage) => __spreadProps(__spreadValues({}, color), {
 var saturate = (color, percentage) => __spreadProps(__spreadValues({}, color), {
   s: color.s + percent(color.s, percentage)
 });
-var alpha = (color, alpha2) => __spreadProps(__spreadValues({}, color), {
-  a: alpha2
+var alphaFunction = (color, alpha) => __spreadProps(__spreadValues({}, color), {
+  a: alpha
 });
 var hoverIncrease = 15.8;
 var activeIncrease = 31.6;
-var borderAlpha = 0.2;
-var backdropAlpha = 0.5;
+var borderAlpha = 0.14;
+var backdropAlpha = 0.46;
 var backdropDarkAlpha = 0.9;
 var backdropTwilightAlpha = 0.8;
-var focusRingAlpha = 0.5;
+var focusRingAlpha = 0.8;
 var buttonBorderAlpha = 0.25;
-var tabBackgroundAlpha = 0.15;
+var tabBackgroundAlpha = 0.06;
+var highlightAlpha = 0.15;
 var hslaBaseColors = {
-  red: { h: 11, s: 80, l: 45, a: 1 },
+  red: { h: 4, s: 64, l: 48, a: 1 },
   blurpleLight: { h: 240, s: 83.3, l: 95.3, a: 1 },
   blurpleMedium: { h: 242, s: 81, l: 87.6, a: 1 },
   blurple: { h: 242, s: 88.4, l: 66.3, a: 1 },
   blurpleDark: { h: 242, s: 87.6, l: 62, a: 1 },
-  blurpleStrong: { h: 252, s: 46, l: 33, a: 1 },
-  offWhite: { h: 45, s: 36.4, l: 95.7, a: 1 },
-  blueLight: { h: 206, s: 58.3, l: 85.9, a: 1 },
-  blue: { h: 206, s: 100, l: 73.3, a: 1 },
-  blueDark: { h: 206, s: 29.5, l: 33.9, a: 1 },
-  orangeLight: { h: 6, s: 100, l: 89.6, a: 1 },
+  blurpleStrong: { h: 242, s: 55, l: 36, a: 1 },
+  offWhite: { h: 0, s: 0, l: 97.25, a: 1 },
+  blueLight: { h: 216.5, s: 92, l: 90.2, a: 1 },
+  blue: { h: 215.4, s: 80, l: 47.65, a: 1 },
+  blueDark: { h: 216.3, s: 69.2, l: 23, a: 1 },
+  orangeLight: { h: 4, s: 100, l: 91.2, a: 1 },
   orange: { h: 11, s: 100, l: 62.2, a: 1 },
-  orangeDark: { h: 11, s: 79.9, l: 64.9, a: 1 },
-  tealLight: { h: 180, s: 20, l: 67.6, a: 1 },
-  teal: { h: 180, s: 51.4, l: 51.6, a: 1 },
-  tealDark: { h: 180, s: 16.2, l: 22.9, a: 1 },
-  yellowLight: { h: 39, s: 100, l: 87.8, a: 1 },
-  yellow: { h: 50, s: 100, l: 57.3, a: 1 },
-  yellowDark: { h: 39, s: 100, l: 68, a: 1 }
+  orangeDark: { h: 10.9, s: 100, l: 42.2, a: 1 },
+  tealLight: { h: 155, s: 70, l: 84, a: 1 },
+  teal: { h: 155, s: 62, l: 32, a: 1 },
+  tealDark: { h: 155, s: 55, l: 19, a: 1 },
+  yellowLight: { h: 43, s: 93, l: 82, a: 1 },
+  yellow: { h: 45.5, s: 96, l: 57, a: 1 },
+  yellowDark: { h: 39.8, s: 100, l: 49.4, a: 1 }
 };
 var hslaGreys = {
-  grey8: { h: 0, s: 0, l: 13, a: 1 },
-  grey7: { h: 246, s: 16, l: 26, a: 1 },
-  grey6: { h: 252, s: 13, l: 46, a: 1 },
-  grey5: { h: 240, s: 7, l: 62, a: 1 },
-  grey4: { h: 259, s: 12, l: 75, a: 1 },
-  grey3: { h: 260, s: 11, l: 85, a: 1 },
-  grey2: { h: 260, s: 11, l: 95, a: 1 },
-  grey1: { h: 240, s: 7, l: 97, a: 1 },
+  grey8: { h: 228, s: 6, l: 17, a: 1 },
+  grey7: { h: 223, s: 6, l: 24.5, a: 1 },
+  grey6: { h: 224, s: 5, l: 44, a: 1 },
+  grey5: { h: 224, s: 5, l: 57, a: 1 },
+  grey4: { h: 223, s: 5, l: 73, a: 1 },
+  grey3: { h: 225, s: 6, l: 87.5, a: 1 },
+  grey2: { h: 210, s: 7, l: 94.5, a: 1 },
+  grey1: { h: 0, s: 0, l: 97.25, a: 1 },
   white: { h: 0, s: 0, l: 100, a: 1 }
 };
 var themeSharedColors = {
-  focusRing: alpha(hslaBaseColors.blurple, focusRingAlpha),
   record: hslaBaseColors.orange,
   recordHover: darken(hslaBaseColors.orange, hoverIncrease),
   recordActive: darken(hslaBaseColors.orange, activeIncrease),
-  info: hslaBaseColors.blue,
-  success: hslaBaseColors.teal,
-  warning: hslaBaseColors.yellowDark,
-  danger: hslaBaseColors.red,
-  dangerHover: darken(hslaBaseColors.red, hoverIncrease),
-  dangerActive: darken(hslaBaseColors.red, activeIncrease),
-  backdrop: alpha(hslaGreys.grey8, backdropAlpha),
-  backdropDark: alpha(hslaGreys.grey8, backdropDarkAlpha),
-  backdropTwilight: alpha(
-    { h: 245, s: 44.8, l: 46.9, a: 1 },
+  focusRing: alphaFunction(hslaBaseColors.blurple, focusRingAlpha),
+  backdropDark: alphaFunction(hslaGreys.grey8, backdropDarkAlpha),
+  backdropTwilight: alphaFunction(
+    hslaBaseColors.blurpleStrong,
     backdropTwilightAlpha
   ),
-  disabledContent: hslaGreys.grey5,
-  highlight: {
-    h: hslaBaseColors.blurpleLight.h,
-    s: hslaBaseColors.blurpleLight.s,
-    l: 66.3,
-    a: 0.15
+  highlight: alphaFunction(hslaBaseColors.blurple, highlightAlpha),
+  warning: {
+    h: 45.5,
+    s: 96,
+    l: 57,
+    a: 1,
+    ads: "--ds-background-warning-bold"
   }
 };
 var themeColors = {
   light: __spreadProps(__spreadValues({
     primary: hslaBaseColors.blurple,
-    primaryHover: darken(hslaBaseColors.blurple, hoverIncrease),
-    primaryActive: darken(hslaBaseColors.blurple, activeIncrease),
-    body: hslaGreys.grey8,
-    bodyDimmed: hslaGreys.grey6,
-    background: hslaGreys.white,
-    backgroundHover: alpha(hslaGreys.grey7, 0.1),
-    backgroundActive: alpha(hslaGreys.grey7, 0.3),
-    backgroundSecondary: alpha(hslaGreys.grey7, 0.04),
-    backgroundSecondary2: { h: 45, s: 34, l: 78, a: 0.2 },
-    overlay: hslaGreys.white,
-    border: alpha(hslaGreys.grey6, borderAlpha)
+    primaryHover: hslaBaseColors.blurpleDark,
+    primaryActive: hslaBaseColors.blurpleStrong,
+    body: { h: 228, s: 6, l: 17, a: 1, ads: "--ds-text" },
+    bodyDimmed: { h: 224, s: 5, l: 44, a: 1, ads: "--ds-text-subtlest" },
+    bodyInverse: { h: 0, s: 0, l: 100, a: 1, ads: "--ds-text-inverse" },
+    background: { h: 0, s: 0, l: 100, a: 1, ads: "--ds-surface" },
+    backgroundHover: {
+      h: 209,
+      s: 75.6,
+      l: 8,
+      a: 0.06,
+      ads: "--ds-background-neutral-subtle-hovered"
+    },
+    backgroundActive: {
+      h: 225.5,
+      s: 56.9,
+      l: 10,
+      a: 0.14,
+      ads: "--ds-background-neutral-subtle-pressed"
+    },
+    backgroundSecondary: {
+      h: 0,
+      s: 0,
+      l: 97.25,
+      a: 1,
+      ads: "--ds-surface-sunken"
+    },
+    backgroundSecondary2: {
+      h: 0,
+      s: 0,
+      l: 97.25,
+      a: 1,
+      ads: "--ds-surface-sunken"
+    },
+    backgroundInverse: {
+      h: 228,
+      s: 6,
+      l: 17,
+      a: 1,
+      ads: "--ds-background-neutral-bold"
+    },
+    overlay: { h: 0, s: 0, l: 100, a: 1, ads: "--ds-surface-overlay" },
+    backdrop: { h: 224, s: 72, l: 7, a: backdropAlpha, ads: "--ds-blanket" },
+    border: { h: 225.5, s: 57, l: 10, a: borderAlpha, ads: "--ds-border" }
   }, themeSharedColors), {
-    disabledBackground: hslaGreys.grey2,
-    formFieldBorder: hslaGreys.grey3,
-    formFieldBackground: hslaGreys.white,
-    buttonBorder: alpha(hslaGreys.grey6, buttonBorderAlpha),
-    upgrade: { h: 206, s: 100, l: 93, a: 1 },
-    upgradeHover: darken({ h: 206, s: 100, l: 93, a: 1 }, 9),
-    upgradeActive: darken({ h: 206, s: 100, l: 93, a: 1 }, 17),
-    tabBackground: alpha(hslaGreys.grey6, tabBackgroundAlpha),
-    discoveryBackground: { h: 206, s: 100, l: 93, a: 1 },
-    discoveryLightBackground: { h: 206, s: 100, l: 97, a: 1 },
-    discoveryTitle: hslaGreys.grey8,
-    discoveryHighlight: { h: 206, s: 100, l: 77, a: 0.3 }
+    info: {
+      h: 215,
+      s: 80.25,
+      l: 47.65,
+      a: 1,
+      ads: "--ds-background-information-bold"
+    },
+    success: {
+      h: 155,
+      s: 62,
+      l: 32,
+      a: 1,
+      ads: "--ds-background-accent-green-bolder"
+    },
+    danger: { h: 4, s: 64, l: 48, a: 1, ads: "--ds-background-danger-bold" },
+    dangerHover: {
+      h: 4.3,
+      s: 65.7,
+      l: 41.2,
+      a: 1,
+      ads: "--ds-background-danger-bold-hovered"
+    },
+    dangerActive: {
+      h: 4.5,
+      s: 56.3,
+      l: 23.3,
+      a: 1,
+      ads: "--ds-background-danger-bold-pressed"
+    },
+    disabledContent: {
+      h: 223,
+      s: 5,
+      l: 73,
+      a: 1,
+      ads: "--ds-text-disabled"
+    },
+    disabledBackground: {
+      h: 0,
+      s: 0,
+      l: 9,
+      a: 0.03,
+      ads: "--ds-background-disabled"
+    },
+    formFieldBorder: { h: 223.6, s: 5, l: 57, a: 1, ads: "--ds-border-input" },
+    formFieldBackground: {
+      h: 0,
+      s: 0,
+      l: 100,
+      a: 1,
+      ads: "--ds-background-input"
+    },
+    buttonBorder: {
+      h: 252,
+      s: 13,
+      l: 46,
+      a: buttonBorderAlpha,
+      ads: "--ds-border"
+    },
+    tabBackground: {
+      h: 209,
+      s: 75.6,
+      l: 8,
+      a: tabBackgroundAlpha,
+      ads: "--ds-background-neutral"
+    },
+    upgrade: {
+      h: 277.5,
+      s: 89,
+      l: 96.5,
+      a: 1,
+      ads: "--ds-background-discovery"
+    },
+    upgradeHover: {
+      h: 277,
+      s: 86,
+      l: 91.6,
+      a: 1,
+      ads: "--ds-background-discovery-hovered"
+    },
+    upgradeActive: {
+      h: 278.6,
+      s: 84.5,
+      l: 79.8,
+      a: 1,
+      ads: "--ds-background-discovery-pressed"
+    },
+    discoveryBackground: {
+      h: 278.6,
+      s: 48.4,
+      l: 52.2,
+      a: 1,
+      ads: "--ds-background-discovery-bold"
+    },
+    discoveryLightBackground: {
+      h: 277.5,
+      s: 89,
+      l: 96.5,
+      a: 1,
+      ads: "--ds-background-discovery"
+    },
+    discoveryTitle: { h: 228, s: 6, l: 17, a: 1, ads: "--ds-text" },
+    discoveryHighlight: {
+      h: 277.5,
+      s: 89,
+      l: 96.5,
+      a: 1,
+      ads: "--ds-background-discovery"
+    }
   }),
   dark: __spreadProps(__spreadValues({
     primary: { h: 242, s: 87, l: 73, a: 1 },
-    primaryHover: darken(hslaBaseColors.blurple, hoverIncrease),
-    primaryActive: darken(hslaBaseColors.blurple, activeIncrease),
-    body: hslaGreys.grey1,
-    bodyDimmed: hslaGreys.grey5,
-    background: hslaGreys.grey8,
-    backgroundHover: alpha(hslaGreys.white, 0.1),
-    backgroundActive: alpha(hslaGreys.white, 0.2),
-    backgroundSecondary: alpha(hslaGreys.white, 0.04),
-    backgroundSecondary2: { h: 45, s: 13, l: 44, a: 0.2 },
-    overlay: lighten(hslaGreys.grey8, 50),
-    border: alpha(hslaGreys.grey4, borderAlpha)
+    primaryHover: hslaBaseColors.blurpleDark,
+    primaryActive: hslaBaseColors.blurpleStrong,
+    body: { h: 225, s: 4.3, l: 81.6, a: 1, ads: "--ds-text" },
+    bodyDimmed: { h: 217.5, s: 4, l: 60.4, a: 1, ads: "--ds-text-subtlest" },
+    bodyInverse: { h: 240, s: 3, l: 12.5, a: 1, ads: "--ds-text-inverse" },
+    background: { h: 240, s: 3, l: 12.5, a: 1, ads: "--ds-surface" },
+    backgroundHover: {
+      h: 240,
+      s: 12.6,
+      l: 83,
+      a: 0.07,
+      ads: "--ds-background-neutral-subtle-hovered"
+    },
+    backgroundActive: {
+      h: 236,
+      s: 36.6,
+      l: 92,
+      a: 0.12,
+      ads: "--ds-background-neutral-subtle-pressed"
+    },
+    backgroundSecondary: {
+      h: 210,
+      s: 4,
+      l: 9.8,
+      a: 1,
+      ads: "--ds-surface-sunken"
+    },
+    backgroundSecondary2: {
+      h: 210,
+      s: 4,
+      l: 9.8,
+      a: 1,
+      ads: "--ds-surface-sunken"
+    },
+    backgroundInverse: {
+      h: 225,
+      s: 4.3,
+      l: 81.6,
+      a: 1,
+      ads: "--ds-background-neutral-bold"
+    },
+    overlay: { h: 225, s: 4, l: 17.6, a: 1, ads: "--ds-surface-overlay" },
+    backdrop: { h: 210, s: 11, l: 7, a: 0.6, ads: "--ds-blanket" },
+    border: { h: 236, s: 36.6, l: 92, a: 0.12, ads: "--ds-border" }
   }, themeSharedColors), {
-    disabledBackground: darken(hslaGreys.grey6, 50),
-    formFieldBorder: hslaGreys.grey6,
-    formFieldBackground: hslaGreys.grey8,
-    buttonBorder: alpha(hslaGreys.white, buttonBorderAlpha),
-    upgrade: { h: 206, s: 92, l: 81, a: 1 },
-    upgradeHover: darken({ h: 206, s: 92, l: 81, a: 1 }, 9),
-    upgradeActive: darken({ h: 206, s: 92, l: 81, a: 1 }, 17),
-    tabBackground: alpha(hslaGreys.white, tabBackgroundAlpha),
-    discoveryBackground: { h: 206, s: 92, l: 81, a: 1 },
-    discoveryLightBackground: hslaGreys.grey8,
-    discoveryTitle: hslaBaseColors.blue,
-    discoveryHighlight: { h: 206, s: 100, l: 77, a: 0.3 }
+    info: {
+      h: 216.3,
+      s: 83,
+      l: 67.25,
+      a: 1,
+      ads: "--ds-background-information-bold"
+    },
+    success: {
+      h: 155,
+      s: 57,
+      l: 55,
+      a: 1,
+      ads: "--ds-background-accent-green-bolder"
+    },
+    danger: { h: 3.75, s: 91, l: 69, a: 1, ads: "--ds-background-danger-bold" },
+    dangerHover: {
+      h: 4,
+      s: 96,
+      l: 78,
+      a: 1,
+      ads: "--ds-background-danger-bold-hovered"
+    },
+    dangerActive: {
+      h: 4,
+      s: 100,
+      l: 91.2,
+      a: 1,
+      ads: "--ds-background-danger-bold-pressed"
+    },
+    disabledContent: {
+      h: 225,
+      s: 5,
+      l: 33,
+      a: 1,
+      ads: "--ds-text-disabled"
+    },
+    disabledBackground: {
+      h: 0,
+      s: 0,
+      l: 1,
+      a: 0.46,
+      ads: "--ds-background-disabled"
+    },
+    formFieldBorder: { h: 222, s: 4, l: 51.4, a: 1, ads: "--ds-border-input" },
+    formFieldBackground: {
+      h: 225,
+      s: 5,
+      l: 15,
+      a: 1,
+      ads: "--ds-background-input"
+    },
+    buttonBorder: {
+      h: 0,
+      s: 0,
+      l: 100,
+      a: buttonBorderAlpha,
+      ads: "--ds-border"
+    },
+    tabBackground: {
+      h: 240,
+      s: 12.6,
+      l: 83,
+      a: 0.07,
+      ads: "--ds-background-neutral"
+    },
+    upgrade: {
+      h: 277.8,
+      s: 27.3,
+      l: 19.4,
+      a: 1,
+      ads: "--ds-background-discovery"
+    },
+    upgradeHover: {
+      h: 278,
+      s: 44.2,
+      l: 25.3,
+      a: 1,
+      ads: "--ds-background-discovery-hovered"
+    },
+    upgradeActive: {
+      h: 278,
+      s: 45,
+      l: 44.7,
+      a: 1,
+      ads: "--ds-background-discovery-pressed"
+    },
+    discoveryBackground: {
+      h: 278.5,
+      s: 84.5,
+      l: 72.2,
+      a: 1,
+      ads: "--ds-background-discovery-bold"
+    },
+    discoveryLightBackground: {
+      h: 277.8,
+      s: 27.3,
+      l: 19.4,
+      a: 1,
+      ads: "--ds-background-discovery"
+    },
+    discoveryTitle: { h: 225, s: 4.3, l: 81.6, a: 1, ads: "--ds-text" },
+    discoveryHighlight: {
+      h: 277.8,
+      s: 27.3,
+      l: 19.4,
+      a: 1,
+      ads: "--ds-background-discovery"
+    }
   })
 };
 var hslaColors = __spreadValues(__spreadValues({}, hslaBaseColors), hslaGreys);
@@ -396,8 +651,8 @@ var colorsNames = [
 ];
 
 // src/utilities/color.ts
-var getColorAlpha = (color, alpha2) => {
-  return `hsla(${hslaColors[color].h},${hslaColors[color].s}%,${hslaColors[color].l}%,${alpha2})`;
+var getColorAlpha = (color, alpha) => {
+  return `hsla(${hslaColors[color].h},${hslaColors[color].s}%,${hslaColors[color].l}%,${alpha})`;
 };
 var getColorScale = (color, scaleType, scaleIncrement) => {
   const scaledValue = () => {
@@ -420,6 +675,25 @@ var getColorValue = (color) => {
   }
 };
 
+// src/hooks/use-media.js
+var import_debounce = __toESM(require("lodash/debounce"));
+var import_react = __toESM(require("react"));
+function useMedia(queries, values, defaultValue) {
+  const match = import_react.default.useCallback(() => {
+    if (typeof window === "undefined") {
+      return defaultValue;
+    }
+    return values[queries.findIndex((q) => matchMedia(q).matches)] || defaultValue;
+  }, [defaultValue, queries, values]);
+  const [value, set] = import_react.default.useState(match);
+  import_react.default.useEffect(() => {
+    const handler = (0, import_debounce.default)(() => set(match), 150);
+    window.addEventListener("resize", handler);
+    return () => window.removeEventListener("resize", handler);
+  }, [match]);
+  return value;
+}
+
 // src/utilities/size.ts
 var u = (amount) => amount && `calc(${amount} * var(--lns-unit, ${unit}px))`;
 var getSizeValue = (size) => {
@@ -455,25 +729,6 @@ var getSize = (property, size) => {
   }
 };
 
-// src/hooks/use-media.js
-var import_debounce = __toESM(require("lodash/debounce"));
-var import_react = __toESM(require("react"));
-function useMedia(queries, values, defaultValue) {
-  const match = import_react.default.useCallback(() => {
-    if (typeof window === "undefined") {
-      return defaultValue;
-    }
-    return values[queries.findIndex((q) => matchMedia(q).matches)] || defaultValue;
-  }, [defaultValue, queries, values]);
-  const [value, set] = import_react.default.useState(match);
-  import_react.default.useEffect(() => {
-    const handler = (0, import_debounce.default)(() => set(match), 150);
-    window.addEventListener("resize", handler);
-    return () => window.removeEventListener("resize", handler);
-  }, [match]);
-  return value;
-}
-
 // src/utilities/responsive.ts
 var getMediaCss = (widthType, breakpoint, declaration) => `@media(${widthType}: ${breakpoint}){${declaration}}`;
 var arrayToBreakpoints = (values) => {
@@ -589,6 +844,7 @@ var Media = ({ children, queries, values, defaultValue }) => {
 var getTextSize = (size) => size && `
   font-size: var(--lns-fontSize-${size});
   line-height: var(--lns-lineHeight-${size});
+  letter-spacing: var(--lns-letterSpacing-${size});
 `;
 var getRadius = (size) => size && `border-radius: var(--lns-radius-${size});`;
 var getFontWeight = (fontWeight) => fontWeight && `font-weight: var(--lns-fontWeight-${fontWeight});`;
@@ -597,6 +853,13 @@ var getFocusRing = (color, position) => {
   const focusColor = color ? color : getColorValue("focusRing");
   return `box-shadow:${position ? position : ""} 0 0 0 2px ${focusColor};`;
 };
+var getOffsetFocusRing = (color) => {
+  const focusColor = color ? color : getColorValue("focusRing");
+  return `
+  outline: 2px solid ${focusColor};
+  outline-offset: 1px;
+  `;
+};
 var getListContainer = (tag) => {
   if (tag === "ol" || tag === "ul") {
     return `
@@ -637,61 +900,84 @@ var unit = 8;
 var textSizes = {
   small: {
     fontSize: 1.5,
-    lineHeight: 1.5
+    lineHeight: 1.5,
+    letterSpacing: "normal"
   },
   "body-sm": {
     fontSize: 1.5,
-    lineHeight: 1.5
+    lineHeight: 1.5,
+    letterSpacing: "normal"
   },
   medium: {
     fontSize: 1.75,
-    lineHeight: 1.6
+    lineHeight: 1.57,
+    letterSpacing: "normal"
   },
   "body-md": {
     fontSize: 1.75,
-    lineHeight: 1.6
+    lineHeight: 1.57,
+    letterSpacing: "normal"
   },
   large: {
     fontSize: 2.25,
-    lineHeight: 1.45
+    lineHeight: 1.44,
+    letterSpacing: "-0.2px"
   },
   "body-lg": {
     fontSize: 2.25,
-    lineHeight: 1.45
+    lineHeight: 1.44,
+    letterSpacing: "-0.2px"
   },
   xlarge: {
     fontSize: 3,
-    lineHeight: 1.35
+    lineHeight: 1.16,
+    letterSpacing: "-0.2px"
   },
   "heading-sm": {
     fontSize: 3,
-    lineHeight: 1.35
+    lineHeight: 1.16,
+    letterSpacing: "-0.2px"
   },
   xxlarge: {
     fontSize: 4,
-    lineHeight: 1.2
+    lineHeight: 1.125,
+    letterSpacing: "-0.5px"
   },
   "heading-md": {
     fontSize: 4,
-    lineHeight: 1.2
+    lineHeight: 1.125,
+    letterSpacing: "-0.5px"
   },
   xxxlarge: {
     fontSize: 6,
-    lineHeight: 1.15
+    lineHeight: 1.16,
+    letterSpacing: "-1.2px"
   },
   "heading-lg": {
     fontSize: 6,
-    lineHeight: 1.15
+    lineHeight: 1.16,
+    letterSpacing: "-1.2px"
   }
 };
 var fontWeights = {
   book: 400,
-  bold: 700
+  regular: 400,
+  medium: 500,
+  bold: 653
 };
 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)
 };
 var shadows = {
@@ -719,8 +1005,8 @@ var gradients = {
 };
 
 // src/components/text/text.tsx
-var import_react2 = __toESM(require("react"));
 var import_styled = __toESM(require("@emotion/styled"));
+var import_react2 = __toESM(require("react"));
 
 // src/console-messages.js
 var textIsDimmedDeprecated = `Lens: Text prop 'isDimmed' is deprecated, use color="bodyDimmed" instead.`;
@@ -733,7 +1019,7 @@ var dimAmount = 0.6;
 var variants = {
   body: {
     size: "body-md",
-    fontWeight: "book"
+    fontWeight: "regular"
   },
   title: {
     size: "body-lg",
@@ -803,7 +1089,7 @@ var Text = (_a) => {
     color,
     isInline,
     isDimmed,
-    fontWeight = "book",
+    fontWeight = "regular",
     hasEllipsis,
     ellipsisLines,
     noWrap,
@@ -829,6 +1115,9 @@ var Text = (_a) => {
   if (isDimmed) {
     console.warn(textIsDimmedDeprecated);
   }
+  if (size.includes("heading-")) {
+    fontWeight = "bold";
+  }
   return /* @__PURE__ */ import_react2.default.createElement(
     TextWrapper,
     __spreadValues({
@@ -891,6 +1180,17 @@ var textSizeRules = Object.keys(textSizes).map((size) => {
       {
         property: "line-height",
         value: `var(--lns-lineHeight-${size})`
+      },
+      {
+        property: "letter-spacing",
+        value: `var(--lns-letterSpacing-${size})`
+      },
+      size.includes("heading-") || size.includes("xlarge") ? {
+        property: "font-weight",
+        value: "var(--lns-fontWeight-bold)"
+      } : {
+        property: "font-weight",
+        value: "var(--lns-fontWeight-regular)"
       }
     ]
   };
@@ -1386,11 +1686,14 @@ var getTextSizesObject = () => {
   Object.entries(textSizes).forEach(([textSizeKey, textSizeValue]) => {
     const fontSizesObj = {};
     const lineHeightsObj = {};
+    const letterSpacingObj = {};
     const fontSizeValue = `fontSize-${textSizeKey}`;
     const lineHeightValue = `lineHeight-${textSizeKey}`;
+    const letterSpacingValue = `letterSpacing-${textSizeKey}`;
     fontSizesObj[fontSizeValue] = u(textSizeValue.fontSize);
     fontSizesObj[lineHeightValue] = textSizeValue.lineHeight;
-    Object.assign(resultObj, fontSizesObj, lineHeightsObj);
+    fontSizesObj[letterSpacingValue] = textSizeValue.letterSpacing;
+    Object.assign(resultObj, fontSizesObj, lineHeightsObj, letterSpacingObj);
   });
   return resultObj;
 };
@@ -1414,7 +1717,7 @@ var getThemeColorsObject = () => {
   const reducer = (colors, prefix) => Object.keys(colors).reduce((accumulator, name) => {
     const color = colors[name];
     const value = `${prefix}-color-${name}`;
-    accumulator[value] = `hsla(${color.h},${color.s}%,${color.l}%,${color.a})`;
+    accumulator[value] = color.ads ? `var(${color.ads}, hsla(${color.h},${color.s}%,${color.l}%,${color.a}))` : `hsla(${color.h},${color.s}%,${color.l}%,${color.a})`;
     return accumulator;
   }, {});
   return __spreadValues(__spreadValues({}, reducer(themeColors.light, "themeLight")), reducer(themeColors.dark, "themeDark"));
@@ -1432,12 +1735,15 @@ var textSizeVariables = getCssVarsFromObject(
 );
 var radiusVariables = getCssVarsFromObject("radius", radii);
 var shadowVariables = getCssVarsFromObject("shadow", shadows);
-var spaceVariables = getCssVarsFromObject(void 0, getSpacesObject());
+var spaceVariables = getCssVarsFromObject(
+  void 0,
+  getSpacesObject()
+);
 var formFieldVariables = getCssVarsFromObject(void 0, {
   formFieldBorderWidth: "1px",
   formFieldBorderWidthFocus: "2px",
   formFieldHeight: u(4.5),
-  formFieldRadius: u(2.25),
+  formFieldRadius: "var(--lns-radius-175)",
   formFieldHorizontalPadding: u(2),
   formFieldBorderShadow: `
     inset 0 0 0 var(--lns-formFieldBorderWidth) var(--lns-color-formFieldBorder)
@@ -1527,9 +1833,38 @@ var getAllCssVarsString = (customRootElement) => {
 };
 
 // src/components/avatar/avatar.tsx
-var import_react3 = __toESM(require("react"));
 var import_styled2 = __toESM(require("@emotion/styled"));
-var getLetterSize = (wrapperSize) => `calc(${wrapperSize} / 1.75)`;
+var import_react3 = __toESM(require("react"));
+var getColorMapping = (color) => {
+  switch (color) {
+    case "orange":
+      return {
+        background: "orangeLight",
+        text: "dangerHover"
+      };
+    case "blue":
+      return {
+        background: "blueLight",
+        text: "blueDark"
+      };
+    case "yellow":
+      return {
+        background: "yellowLight",
+        text: "#9E4C00"
+      };
+    case "teal":
+      return {
+        background: "tealLight",
+        text: "tealDark"
+      };
+    default:
+      return {
+        background: "orangeLight",
+        text: "dangerHover"
+      };
+  }
+};
+var getLetterSize = (wrapperSize) => `calc(${wrapperSize} / 2)`;
 var getAvatarSize = (avatarSize) => {
   let width;
   let height;
@@ -1553,7 +1888,7 @@ var getAvatarSize = (avatarSize) => {
 };
 var AvatarWrapper = import_styled2.default.span`
   display: block;
-  color: var(--lns-color-orangeDark);
+  color: ${(props) => props.color ? props.color.startsWith("#") ? props.color : `var(--lns-color-${props.color})` : "var(--lns-color-blueLight)"};
   background-color: var(--lns-color-background);
   ${getRadius("full")};
   overflow: hidden;
@@ -1584,9 +1919,8 @@ var AvatarWrapper = import_styled2.default.span`
     position: absolute;
     left: 0;
     top: 0;
-    opacity: 0.2;
     z-index: -1;
-    ${(props) => props.hasBackgroundColor && `background-color: var(--lns-color-orangeDark)`};
+    background-color: ${(props) => props.hasBackgroundColor && (props.backgroundColor ? `var(--lns-color-${props.backgroundColor})` : "var(--lns-color-orange)")};
   }
 `;
 var AvatarImage = import_styled2.default.img`
@@ -1610,13 +1944,15 @@ var Avatar = (_a) => {
     size = 4,
     letter,
     imageSrc,
-    children
+    children,
+    themeColor = "blue"
   } = _b, props = __objRest(_b, [
     "altText",
     "size",
     "letter",
     "imageSrc",
-    "children"
+    "children",
+    "themeColor"
   ]);
   const getContent = () => {
     if (children) {
@@ -1644,11 +1980,14 @@ var Avatar = (_a) => {
     }
   };
   const hasBackgroundColor = letter && !imageSrc && !children;
+  const colorMapping = getColorMapping(themeColor || "blue");
   return /* @__PURE__ */ import_react3.default.createElement(
     AvatarWrapper,
     __spreadValues({
       hasBackgroundColor,
-      size
+      size,
+      backgroundColor: colorMapping.background,
+      color: colorMapping.text
     }, props),
     getContent()
   );
@@ -1656,19 +1995,21 @@ var Avatar = (_a) => {
 var avatar_default = Avatar;
 
 // src/components/base-styles/base-styles.tsx
-var import_core = require("@emotion/core");
-var import_react4 = __toESM(require("react"));
+var import_react4 = require("@emotion/react");
+var import_react5 = __toESM(require("react"));
 var buildGlobalStylesheet = (rootElement = ":root", bodyElement = "body") => {
   return `
     ${rootElement} {
       font-size: 100%;
     }
     ${bodyElement} {
-      font-family: circular, -apple-system, BlinkMacSystemFont, Segoe UI,
-        sans-serif;
-      color: ${getColorValue("body")};
-      ${getTextSize("medium")};
-      font-feature-settings: 'ss08' on;
+      --lns-fontFamily-body: "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+      --lns-fontFamily-heading: "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+      --lns-fontFamily-code: "Atlassian Mono", ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace;
+
+      font-family: var(--lns-fontFamily-body);
+      color: var(--ds-text, ${getColorValue("body")});
+      ${getTextSize("body-md")};
     }
 
     ${bodyElement} *,
@@ -1680,7 +2021,6 @@ var buildGlobalStylesheet = (rootElement = ":root", bodyElement = "body") => {
     ${bodyElement} * {
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
-      letter-spacing: calc(0.6px - 0.05em);
     }
 
     ${getThemeStylesString(rootElement)}
@@ -1690,12 +2030,18 @@ var buildGlobalStylesheet = (rootElement = ":root", bodyElement = "body") => {
     ${cssUtilities()}
   `;
 };
-var BaseStyles = () => /* @__PURE__ */ import_react4.default.createElement(import_core.Global, { styles: (0, import_core.css)(buildGlobalStylesheet()) });
+var BaseStyles = () => /* @__PURE__ */ import_react5.default.createElement(import_react4.Global, { styles: (0, import_react4.css)(buildGlobalStylesheet()) });
 var base_styles_default = BaseStyles;
 
+// src/components/button/button.tsx
+var import_react9 = require("@emotion/react");
+var import_styled5 = __toESM(require("@emotion/styled"));
+var import_react10 = __toESM(require("react"));
+var import_trace_press = __toESM(require("@atlaskit/react-ufo/trace-press"));
+
 // src/components/icon/icon.tsx
-var import_react5 = __toESM(require("react"));
 var import_styled3 = __toESM(require("@emotion/styled"));
+var import_react6 = __toESM(require("react"));
 var defaultIconSize = 3;
 var IconWrapper = import_styled3.default.span`
   display: block;
@@ -1704,48 +2050,43 @@ var IconWrapper = import_styled3.default.span`
   & > svg,
   & > img {
     display: block;
-    ${(props) => !props.hasWidthOffset && getSize("width", props.size)};
+    ${(props) => getSize("width", props.size)};
     ${(props) => getSize("height", props.size)};
   }
+
+  // TODO: remove data-testid once all icons are using ADS
+  [data-testid='ads-refreshed-icon'] {
+    display: block;
+    ${(props) => getSize("width", props.size)};
+    ${(props) => getSize("height", props.size)};
+
+    svg {
+      padding: 8%;
+      height: 100%;
+      width: 100%;
+    }
+  }
 `;
 var Icon = (_a) => {
   var _b = _a, {
     altText,
     icon,
     color = "body",
-    size = defaultIconSize,
-    hasWidthOffset
+    size = defaultIconSize
   } = _b, props = __objRest(_b, [
     "altText",
     "icon",
     "color",
-    "size",
-    "hasWidthOffset"
+    "size"
   ]);
-  const ref = import_react5.default.useRef(null);
-  const defaultIconSizePx = defaultIconSize * unit;
-  import_react5.default.useEffect(() => {
-    if (!hasWidthOffset) {
-      return;
-    }
-    const svg = ref.current.querySelector("svg");
-    if (!svg) {
-      return;
-    }
-    const bBox = svg.getBBox();
-    svg.setAttribute(
-      "viewBox",
-      `${bBox.x} 0 ${bBox.width || defaultIconSizePx} ${defaultIconSizePx}`
-    );
-  }, []);
-  return /* @__PURE__ */ import_react5.default.createElement(
+  const ref = import_react6.default.useRef(null);
+  return /* @__PURE__ */ import_react6.default.createElement(
     IconWrapper,
     __spreadValues({
       ref,
       "aria-label": altText,
       color,
-      size,
-      hasWidthOffset
+      size
     }, props),
     icon
   );
@@ -1753,9 +2094,9 @@ var Icon = (_a) => {
 var icon_default = Icon;
 
 // src/components/loader/loader.tsx
-var import_react6 = __toESM(require("react"));
+var import_react7 = require("@emotion/react");
 var import_styled4 = __toESM(require("@emotion/styled"));
-var import_core2 = require("@emotion/core");
+var import_react8 = __toESM(require("react"));
 var speed = 1;
 var dotsAmount = 8;
 var sizes = {
@@ -1775,7 +2116,7 @@ var getDotSize = (props) => {
 var getTotalSize = (props) => {
   return sizes[props.size].totalSize;
 };
-var dotScale = import_core2.keyframes`
+var dotScale = import_react7.keyframes`
   50% {
     transform: scale(1);
   }
@@ -1810,7 +2151,7 @@ var DotWrapper = import_styled4.default.span`
       ${(props) => props.position * speed / dotsAmount}s ease-in-out infinite;
   }
 `;
-var Dot = ({ position, color, size }) => /* @__PURE__ */ import_react6.default.createElement(DotWrapper, { color, position, size });
+var Dot = ({ position, color, size }) => /* @__PURE__ */ import_react8.default.createElement(DotWrapper, { color, position, size });
 var Loader = (_a) => {
   var _b = _a, {
     color = "body",
@@ -1822,38 +2163,38 @@ var Loader = (_a) => {
   let i;
   const dotsList = [];
   for (i = 0; i < dotsAmount; i++) {
-    dotsList.push(/* @__PURE__ */ import_react6.default.createElement(Dot, { color, position: i, size, key: i }));
+    dotsList.push(/* @__PURE__ */ import_react8.default.createElement(Dot, { color, position: i, size, key: i }));
   }
-  return /* @__PURE__ */ import_react6.default.createElement(LoaderWrapper, __spreadValues({ size }, props), /* @__PURE__ */ import_react6.default.createElement(Dots, null, dotsList));
+  return /* @__PURE__ */ import_react8.default.createElement(LoaderWrapper, __spreadValues({ size }, props), /* @__PURE__ */ import_react8.default.createElement(Dots, null, dotsList));
 };
 var availableSizes = Object.keys(sizes);
 var loader_default = Loader;
 
 // src/components/button/button.tsx
-var import_react7 = __toESM(require("react"));
-var import_core3 = require("@emotion/core");
-var import_styled5 = __toESM(require("@emotion/styled"));
 var sizesStyles = {
   small: {
     height: u(4),
     textSize: "small",
     iconSize: 2,
-    xSpace: u(1.5)
+    xSpace: u(1.5),
+    radius: "var(--lns-radius-150)"
   },
   medium: {
     height: u(4.5),
     textSize: "medium",
     iconSize: 3,
-    xSpace: u(2)
+    xSpace: u(2),
+    radius: "var(--lns-radius-175)"
   },
   large: {
     height: u(7),
     textSize: "large",
     iconSize: 4,
-    xSpace: u(2.5)
+    xSpace: u(2.5),
+    radius: "var(--lns-radius-250)"
   }
 };
-var hasLoaderStyles = (props) => import_core3.css`
+var hasLoaderStyles = (props) => import_react9.css`
   ${props.hasLoader && `display: none`};
 `;
 var variantStyles = {
@@ -1886,7 +2227,7 @@ var variantStyles = {
     active: getColorValue("recordActive")
   },
   upgrade: {
-    color: getColorValue("grey7"),
+    color: getColorValue("body"),
     background: getColorValue("upgrade"),
     borderColor: null,
     hover: getColorValue("upgradeHover"),
@@ -1894,7 +2235,7 @@ var variantStyles = {
     focusRing: getFocusRing()
   },
   danger: {
-    color: getColorValue("white"),
+    color: getColorValue("bodyInverse"),
     background: getColorValue("danger"),
     borderColor: null,
     hover: getColorValue("dangerHover"),
@@ -1909,10 +2250,10 @@ var variantStyles = {
   }
 };
 var statusStyles = {
-  enabled: import_core3.css`
+  enabled: import_react9.css`
     cursor: pointer;
   `,
-  disabled: import_core3.css`
+  disabled: import_react9.css`
     pointer-events: none;
     background-color: ${getColorValue("disabledBackground")};
     color: ${getColorValue("disabledContent")};
@@ -1926,13 +2267,15 @@ var ButtonWrapper = import_styled5.default.button`
     ${(props) => props.hasChildren ? sizesStyles[props.size].xSpace : 0};
   font: inherit;
   text-decoration: none;
-  transition: 0.6s background, 0.6s border-color;
+  transition:
+    0.6s background,
+    0.6s border-color;
   align-items: center;
   justify-content: center;
   vertical-align: middle;
   white-space: nowrap;
   ${getFontWeight("bold")};
-  ${getRadius("full")};
+  border-radius: ${(props) => sizesStyles[props.size].radius};
   ${(props) => props.hasFullWidth ? "display: flex; width: 100%" : "display: inline-flex"};
   height: ${(props) => sizesStyles[props.size].height};
   min-width: ${(props) => sizesStyles[props.size].height};
@@ -1947,20 +2290,23 @@ var ButtonWrapper = import_styled5.default.button`
   `};
 
   &:hover {
-    transition: 0.3s background, 0.3s border-color;
+    transition:
+      0.3s background,
+      0.3s border-color;
     background: ${(props) => variantStyles[props.variant].hover};
     background-position: 75% center;
   }
 
   &:active {
-    transition: 0s background, 0s border-color;
+    transition:
+      0s background,
+      0s border-color;
     background: ${(props) => variantStyles[props.variant].active};
     background-position: right;
   }
 
   &:focus-visible {
-    outline: 1px solid transparent;
-    ${getFocusRing()};
+    ${getOffsetFocusRing()};
   }
 
   &::-moz-focus-inner {
@@ -2000,6 +2346,8 @@ var Button = (_a) => {
     hasLoader,
     isDisabled,
     htmlTag = "button",
+    interactionName,
+    onClick,
     refHandler
   } = _b, props = __objRest(_b, [
     "size",
@@ -2012,28 +2360,38 @@ var Button = (_a) => {
     "hasLoader",
     "isDisabled",
     "htmlTag",
+    "interactionName",
+    "onClick",
     "refHandler"
   ]);
-  const buttonIcon = /* @__PURE__ */ import_react7.default.createElement(
+  const buttonIcon = /* @__PURE__ */ import_react10.default.createElement(
     IconSection,
     {
       hasLoader,
       paddingLeft: children && iconPosition === "right" && iconGap,
       paddingRight: children && iconPosition === "left" && iconGap
     },
-    /* @__PURE__ */ import_react7.default.createElement(
+    /* @__PURE__ */ import_react10.default.createElement(
       icon_default,
       {
         icon,
         color: "currentColor",
-        hasWidthOffset: true,
         size: sizesStyles[size].iconSize
       }
     )
   );
-  return /* @__PURE__ */ import_react7.default.createElement(
+  const onClickWithPressTracing = (0, import_react10.useCallback)(
+    (event) => {
+      if (interactionName) {
+        (0, import_trace_press.default)(interactionName);
+      }
+      onClick == null ? void 0 : onClick(event);
+    },
+    [onClick, interactionName]
+  );
+  return /* @__PURE__ */ import_react10.default.createElement(
     ButtonWrapper,
-    __spreadValues({
+    __spreadProps(__spreadValues({
       size,
       variant,
       hasFullWidth,
@@ -2044,14 +2402,16 @@ var Button = (_a) => {
       as: htmlTag,
       hasChildren: children,
       ref: (ref) => refHandler && refHandler(ref)
-    }, props),
-    hasLoader && /* @__PURE__ */ import_react7.default.createElement(LoaderSection, null, /* @__PURE__ */ import_react7.default.createElement(loader_default, { color: "currentColor" })),
+    }, props), {
+      onClick: interactionName === void 0 ? onClick : onClickWithPressTracing
+    }),
+    hasLoader && /* @__PURE__ */ import_react10.default.createElement(LoaderSection, null, /* @__PURE__ */ import_react10.default.createElement(loader_default, { color: "currentColor" })),
     icon && iconPosition === "left" && buttonIcon,
-    logoSrc && /* @__PURE__ */ import_react7.default.createElement(
+    logoSrc && /* @__PURE__ */ import_react10.default.createElement(
       LogoImage,
       {
         alt: "",
-        hasSpacing: children,
+        hasSpacing: Boolean(children),
         src: logoSrc,
         size,
         height: sizesStyles[size].height,
@@ -2059,7 +2419,7 @@ var Button = (_a) => {
         hasLoader
       }
     ),
-    /* @__PURE__ */ import_react7.default.createElement(ChildrenSection, { hasLoader }, children),
+    /* @__PURE__ */ import_react10.default.createElement(ChildrenSection, { hasLoader }, children),
     icon && iconPosition === "right" && buttonIcon
   );
 };
@@ -2068,8 +2428,8 @@ var availableVariants = Object.keys(variantStyles);
 var button_default = Button;
 
 // src/components/spacer/spacer.tsx
-var import_react8 = __toESM(require("react"));
 var import_styled6 = __toESM(require("@emotion/styled"));
+var import_react11 = __toESM(require("react"));
 var SpacerWrapper = import_styled6.default.div`
   display: ${(props) => props.isInline ? "inline-block" : "block"};
   vertical-align: middle;
@@ -2101,7 +2461,7 @@ var Spacer = (_a) => {
     "left",
     "isInline"
   ]);
-  return /* @__PURE__ */ import_react8.default.createElement(
+  return /* @__PURE__ */ import_react11.default.createElement(
     SpacerWrapper,
     __spreadValues({
       all,
@@ -2117,8 +2477,8 @@ var Spacer = (_a) => {
 var spacer_default = Spacer;
 
 // src/components/text-input/text-input.tsx
-var import_react9 = __toESM(require("react"));
 var import_styled7 = __toESM(require("@emotion/styled"));
+var import_react12 = __toESM(require("react"));
 var sizesStyles2 = {
   small: {
     height: u(4),
@@ -2127,7 +2487,8 @@ var sizesStyles2 = {
     padding: u(1.75),
     withIconPadding: u(4.5),
     passwordAdditionalPadding: u(0.5),
-    textSize: "small"
+    textSize: "small",
+    radius: "var(--lns-radius-150)"
   },
   medium: {
     height: "var(--lns-formFieldHeight)",
@@ -2136,7 +2497,8 @@ var sizesStyles2 = {
     padding: "var(--lns-formFieldHorizontalPadding)",
     withIconPadding: u(5.5),
     passwordAdditionalPadding: u(0.5),
-    textSize: "medium"
+    textSize: "medium",
+    radius: "var(--lns-radius-175)"
   },
   large: {
     height: u(7),
@@ -2145,7 +2507,8 @@ var sizesStyles2 = {
     padding: "var(--lns-formFieldHorizontalPadding)",
     withIconPadding: u(5.5),
     passwordAdditionalPadding: u(0.5),
-    textSize: "large"
+    textSize: "large",
+    radius: "var(--lns-radius-250)"
   }
 };
 var inputRightPadding = (props) => {
@@ -2168,7 +2531,7 @@ var InputField = import_styled7.default.input`
   padding-bottom: 0;
   padding-left: ${(props) => props.icon ? sizesStyles2[props.inputSize].withIconPadding : sizesStyles2[props.inputSize].padding};
   padding-right: ${(props) => inputRightPadding(props)};
-  border-radius: var(--lns-radius-full);
+  border-radius: ${(props) => sizesStyles2[props.inputSize].radius};
   box-shadow: inset 0 0 0
     ${(props) => props.hasError ? "var(--lns-formFieldBorderWidthFocus) var(--lns-color-danger)" : "var(--lns-formFieldBorderWidth) var(--lns-color-formFieldBorder)"};
 
@@ -2195,12 +2558,7 @@ var InputField = import_styled7.default.input`
   }
 
   &::placeholder {
-    color: ${getColorValue("grey5")};
-  }
-
-  [data-lens-theme='dark'] &::-webkit-calendar-picker-indicator,
-  .theme-dark &::-webkit-calendar-picker-indicator {
-    filter: invert(1);
+    color: ${getColorValue("bodyDimmed")};
   }
 `;
 var InputFieldWrapper = import_styled7.default.div`
@@ -2228,7 +2586,7 @@ var AddOnWrapper = import_styled7.default.div`
   top: 50%;
   transform: translateY(-50%);
 `;
-var TextInput = (0, import_react9.forwardRef)(
+var TextInput = (0, import_react12.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       placeholder,
@@ -2257,7 +2615,7 @@ var TextInput = (0, import_react9.forwardRef)(
       "size",
       "addOn"
     ]);
-    const inputField = /* @__PURE__ */ import_react9.default.createElement(
+    const inputField = /* @__PURE__ */ import_react12.default.createElement(
       InputField,
       __spreadValues({
         type,
@@ -2275,21 +2633,21 @@ var TextInput = (0, import_react9.forwardRef)(
         addOn
       }, props)
     );
-    return icon || addOn ? /* @__PURE__ */ import_react9.default.createElement(InputFieldWrapper, null, icon && /* @__PURE__ */ import_react9.default.createElement(IconSection2, { size }, /* @__PURE__ */ import_react9.default.createElement(
+    return icon || addOn ? /* @__PURE__ */ import_react12.default.createElement(InputFieldWrapper, null, icon && /* @__PURE__ */ import_react12.default.createElement(IconSection2, { size }, /* @__PURE__ */ import_react12.default.createElement(
       icon_default,
       {
         icon,
         size: sizesStyles2[size].iconSize,
         color: getColorValue(isDisabled ? "disabledContent" : "body")
       }
-    )), inputField, addOn && /* @__PURE__ */ import_react9.default.createElement(AddOnWrapper, { size }, addOn)) : inputField;
+    )), inputField, addOn && /* @__PURE__ */ import_react12.default.createElement(AddOnWrapper, { size }, addOn)) : inputField;
   }
 );
 var text_input_default = TextInput;
 
 // src/components/distribute/distribute.tsx
-var import_react10 = __toESM(require("react"));
 var import_styled8 = __toESM(require("@emotion/styled"));
+var import_react13 = __toESM(require("react"));
 var alignments2 = {
   start: "flex-start",
   center: "center",
@@ -2367,7 +2725,7 @@ var Distribute = (_a) => {
     console.warn(distributeDeprecatedWarning);
     alreadyWarned = true;
   }
-  return /* @__PURE__ */ import_react10.default.createElement(
+  return /* @__PURE__ */ import_react13.default.createElement(
     DistributeWrapper,
     __spreadValues({
       gap,
@@ -2383,8 +2741,8 @@ var availableAlignments = Object.keys(alignments2);
 var distribute_default = Distribute;
 
 // src/components/container/container.tsx
-var import_react11 = __toESM(require("react"));
 var import_styled9 = __toESM(require("@emotion/styled"));
+var import_react14 = __toESM(require("react"));
 var getBorderSideAndColor = (side, color, width) => {
   const borderColor = color ? color : "border";
   const borderWidth = getSizeValue(width);
@@ -2511,7 +2869,7 @@ var Container = (_a) => {
     "right",
     "refHandler"
   ]);
-  return /* @__PURE__ */ import_react11.default.createElement(
+  return /* @__PURE__ */ import_react14.default.createElement(
     ContainerWrapper,
     __spreadValues({
       backgroundColor,
@@ -2554,11 +2912,12 @@ var Container = (_a) => {
 var container_default = Container;
 
 // src/components/error-container/error-container.tsx
-var import_react13 = __toESM(require("react"));
+var import_styled11 = __toESM(require("@emotion/styled"));
+var import_react16 = __toESM(require("react"));
 
 // src/components/arrange/arrange.tsx
-var import_react12 = __toESM(require("react"));
 var import_styled10 = __toESM(require("@emotion/styled"));
+var import_react15 = __toESM(require("react"));
 var ArrangeWrapper = import_styled10.default.div`
   display: grid;
   ${(props) => getResponsiveOneOf("align-items", props.alignItems)};
@@ -2623,7 +2982,7 @@ var Arrange = (_a) => {
   if (className || style) {
     console.warn(customStylesWarning);
   }
-  return /* @__PURE__ */ import_react12.default.createElement(
+  return /* @__PURE__ */ import_react15.default.createElement(
     ArrangeWrapper,
     __spreadValues({
       alignItems,
@@ -2648,21 +3007,13 @@ var Arrange = (_a) => {
 var arrange_default = Arrange;
 
 // src/components/icon/available-icons/alert-triangle.tsx
+var import_warning = __toESM(require("@atlaskit/icon/core/warning"));
 var React13 = __toESM(require("react"));
-function SvgAlertTriangle(props) {
-  return /* @__PURE__ */ React13.createElement("svg", __spreadValues({ viewBox: "0 0 24 24", fill: "none" }, props), /* @__PURE__ */ React13.createElement(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M10.664 3.35a2.723 2.723 0 013.664.96l.003.005 7.296 12.18.008.015a2.722 2.722 0 01-2.328 4.084H4.693a2.723 2.723 0 01-2.328-4.084l.008-.014L9.672 4.31c.243-.4.584-.731.992-.96zM12 5a.723.723 0 00-.617.346l-7.29 12.17a.723.723 0 00.618 1.078h14.578a.723.723 0 00.617-1.079L12.618 5.348l-.001-.002A.723.723 0 0012 5zm0 3.257a1 1 0 011 1v3.446a1 1 0 01-2 0V9.257a1 1 0 011-1zm-1 7.891a1 1 0 011-1h.01a1 1 0 010 2H12a1 1 0 01-1-1z",
-      fill: "currentColor"
-    }
-  ));
+function SvgAlertTriangle() {
+  return /* @__PURE__ */ React13.createElement(import_warning.default, { label: "", testId: "ads-refreshed-icon" });
 }
 
 // src/components/error-container/error-container.tsx
-var import_styled11 = __toESM(require("@emotion/styled"));
 var ErrorContainerBorder = import_styled11.default.div`
   position: relative;
   ::before {
@@ -2683,15 +3034,15 @@ var ErrorContainer = ({
   errorMessage = "Oops, that didn't work. Try again."
 }) => {
   if (!errorActive) {
-    return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, children);
+    return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, children);
   }
-  return /* @__PURE__ */ import_react13.default.createElement(ErrorContainerBorder, null, /* @__PURE__ */ import_react13.default.createElement(arrange_default, { autoFlow: "row", gap: "small" }, children, errorMessage ? /* @__PURE__ */ import_react13.default.createElement(arrange_default, { gap: "xsmall" }, /* @__PURE__ */ import_react13.default.createElement(icon_default, { icon: /* @__PURE__ */ import_react13.default.createElement(SvgAlertTriangle, null), size: 2, color: "danger" }), /* @__PURE__ */ import_react13.default.createElement(text_default, { size: "body-sm", color: "danger" }, errorMessage)) : null));
+  return /* @__PURE__ */ import_react16.default.createElement(ErrorContainerBorder, null, /* @__PURE__ */ import_react16.default.createElement(arrange_default, { autoFlow: "row", gap: "small" }, children, errorMessage ? /* @__PURE__ */ import_react16.default.createElement(arrange_default, { gap: "xsmall" }, /* @__PURE__ */ import_react16.default.createElement(icon_default, { icon: /* @__PURE__ */ import_react16.default.createElement(SvgAlertTriangle, null), size: 2, color: "danger" }), /* @__PURE__ */ import_react16.default.createElement(text_default, { size: "body-sm", color: "danger" }, errorMessage)) : null));
 };
 var error_container_default = ErrorContainer;
 
 // src/components/layout/layout.tsx
-var import_react14 = __toESM(require("react"));
 var import_styled12 = __toESM(require("@emotion/styled"));
+var import_react17 = __toESM(require("react"));
 var alignments3 = {
   start: "flex-start",
   center: "center",
@@ -2723,32 +3074,35 @@ var LayoutSection = (_a) => {
     "children"
   ]);
   console.warn(layoutDeprecatedWarning);
-  return /* @__PURE__ */ import_react14.default.createElement(LayoutSectionWrapper, __spreadValues({ width, maxWidth }, props), children);
+  return /* @__PURE__ */ import_react17.default.createElement(LayoutSectionWrapper, __spreadValues({ width, maxWidth }, props), children);
 };
-var Layout = class extends import_react14.Component {
+var Layout = class extends import_react17.Component {
   render() {
     console.warn(layoutDeprecatedWarning);
-    return /* @__PURE__ */ import_react14.default.createElement(LayoutWrapper, __spreadValues({}, this.props), this.props.children);
+    return /* @__PURE__ */ import_react17.default.createElement(LayoutWrapper, __spreadValues({}, this.props), this.props.children);
   }
 };
 Layout.Section = LayoutSection;
 var layout_default = Layout;
 
 // src/components/icon-button/icon-button.tsx
-var import_react15 = __toESM(require("react"));
 var import_styled13 = __toESM(require("@emotion/styled"));
+var import_react18 = __toESM(require("react"));
 var sizeStyles = {
   small: {
     size: u(3),
-    iconSize: 2.25
+    iconSize: 2.25,
+    radius: "var(--lns-radius-100)"
   },
   medium: {
     size: u(4),
-    iconSize: 3
+    iconSize: 3,
+    radius: "var(--lns-radius-150)"
   },
   large: {
     size: u(5),
-    iconSize: 4
+    iconSize: 4,
+    radius: "var(--lns-radius-175)"
   }
 };
 var IconButtonBox = import_styled13.default.button`
@@ -2768,7 +3122,7 @@ var IconButtonBox = import_styled13.default.button`
   justify-content: center;
   align-items: center;
   vertical-align: middle;
-  ${getRadius("full")};
+  border-radius: ${(props) => sizeStyles[props.size].radius};
   font: inherit;
 
   &:hover {
@@ -2793,10 +3147,11 @@ var IconButtonBox = import_styled13.default.button`
     display: block;
     position: absolute;
     top: 0;
-    ${getRadius("full")};
+    border-radius: ${(props) => sizeStyles[props.size].radius};
   }
 
-  &:focus-visible:before {
+  &:focus-visible:before,
+  &:focus:before {
     ${getFocusRing()};
   }
 
@@ -2804,52 +3159,56 @@ var IconButtonBox = import_styled13.default.button`
     border: 0;
   }
 `;
-var IconButton = (_a) => {
-  var _b = _a, {
-    altText,
-    icon,
-    onClick,
-    iconColor = "body",
-    backgroundColor,
-    isActive,
-    isDisabled,
-    size = "medium"
-  } = _b, props = __objRest(_b, [
-    "altText",
-    "icon",
-    "onClick",
-    "iconColor",
-    "backgroundColor",
-    "isActive",
-    "isDisabled",
-    "size"
-  ]);
-  return /* @__PURE__ */ import_react15.default.createElement(
-    IconButtonBox,
-    __spreadValues({
-      "aria-label": altText,
+var IconButton = import_react18.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      altText,
+      icon,
       onClick,
+      iconColor = "body",
+      backgroundColor,
       isActive,
-      disabled: isDisabled,
-      size,
-      backgroundColor
-    }, props),
-    /* @__PURE__ */ import_react15.default.createElement(
-      icon_default,
-      {
-        icon,
-        size: sizeStyles[size].iconSize,
-        color: isDisabled ? "disabledContent" : iconColor
-      }
-    )
-  );
-};
+      isDisabled,
+      size = "medium"
+    } = _b, props = __objRest(_b, [
+      "altText",
+      "icon",
+      "onClick",
+      "iconColor",
+      "backgroundColor",
+      "isActive",
+      "isDisabled",
+      "size"
+    ]);
+    return /* @__PURE__ */ import_react18.default.createElement(
+      IconButtonBox,
+      __spreadValues({
+        "aria-label": altText,
+        onClick,
+        isActive,
+        disabled: isDisabled,
+        size,
+        backgroundColor,
+        ref
+      }, props),
+      /* @__PURE__ */ import_react18.default.createElement(
+        icon_default,
+        {
+          icon,
+          size: sizeStyles[size].iconSize,
+          color: isDisabled ? "disabledContent" : iconColor
+        }
+      )
+    );
+  }
+);
+IconButton.displayName = "IconButton";
 var icon_button_default = IconButton;
 
 // src/components/checkbox/checkbox.tsx
-var import_react16 = __toESM(require("react"));
 var import_styled14 = __toESM(require("@emotion/styled"));
-var SvgCheckboxCheck = (props) => /* @__PURE__ */ import_react16.default.createElement("svg", __spreadValues({ width: 12, height: 9, viewBox: "0 0 12 9", fill: "none" }, props), /* @__PURE__ */ import_react16.default.createElement(
+var import_react19 = __toESM(require("react"));
+var SvgCheckboxCheck = (props) => /* @__PURE__ */ import_react19.default.createElement("svg", __spreadValues({ width: 12, height: 9, viewBox: "0 0 12 9", fill: "none" }, props), /* @__PURE__ */ import_react19.default.createElement(
   "path",
   {
     fillRule: "evenodd",
@@ -2858,7 +3217,7 @@ var SvgCheckboxCheck = (props) => /* @__PURE__ */ import_react16.default.createE
     fill: "currentColor"
   }
 ));
-var SvgCheckboxMinus = (props) => /* @__PURE__ */ import_react16.default.createElement("svg", __spreadValues({ width: 12, height: 2, viewBox: "0 0 12 2", fill: "none" }, props), /* @__PURE__ */ import_react16.default.createElement(
+var SvgCheckboxMinus = (props) => /* @__PURE__ */ import_react19.default.createElement("svg", __spreadValues({ width: 12, height: 2, viewBox: "0 0 12 2", fill: "none" }, props), /* @__PURE__ */ import_react19.default.createElement(
   "path",
   {
     fillRule: "evenodd",
@@ -2931,7 +3290,7 @@ var CheckboxBox = import_styled14.default.span`
   justify-content: center;
   user-select: none;
 `;
-var Checkbox = (0, import_react16.forwardRef)(
+var Checkbox = (0, import_react19.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       isDisabled,
@@ -2948,15 +3307,15 @@ var Checkbox = (0, import_react16.forwardRef)(
       "onChange",
       "onBlur"
     ]);
-    const defaultRef = (0, import_react16.useRef)();
+    const defaultRef = (0, import_react19.useRef)();
     const checkboxRef = ref || defaultRef;
     const iconColor = getColorValue(
       isDisabled ? "disabledContent" : "currentColor"
     );
-    (0, import_react16.useEffect)(() => {
+    (0, import_react19.useEffect)(() => {
       checkboxRef.current.indeterminate = isIndeterminate;
     });
-    return /* @__PURE__ */ import_react16.default.createElement(CheckboxWrapper, null, /* @__PURE__ */ import_react16.default.createElement(
+    return /* @__PURE__ */ import_react19.default.createElement(CheckboxWrapper, null, /* @__PURE__ */ import_react19.default.createElement(
       CheckboxInput,
       __spreadValues({
         role: "checkbox",
@@ -2969,36 +3328,39 @@ var Checkbox = (0, import_react16.forwardRef)(
         ref: checkboxRef,
         "aria-checked": isChecked
       }, props)
-    ), /* @__PURE__ */ import_react16.default.createElement(CheckboxBox, { className: "CheckboxBox" }, /* @__PURE__ */ import_react16.default.createElement(SvgCheckboxMinus, { className: "Icon IconMinus", color: iconColor }), /* @__PURE__ */ import_react16.default.createElement(SvgCheckboxCheck, { className: "Icon IconCheck", color: iconColor })));
+    ), /* @__PURE__ */ import_react19.default.createElement(CheckboxBox, { className: "CheckboxBox" }, /* @__PURE__ */ import_react19.default.createElement(SvgCheckboxMinus, { className: "Icon IconMinus", color: iconColor }), /* @__PURE__ */ import_react19.default.createElement(SvgCheckboxCheck, { className: "Icon IconCheck", color: iconColor })));
   }
 );
 var checkbox_default = Checkbox;
 
 // src/components/text-button/text-button.tsx
-var import_react17 = __toESM(require("react"));
 var import_styled15 = __toESM(require("@emotion/styled"));
+var import_react20 = __toESM(require("react"));
 var sizeStyles2 = {
   small: {
     textSize: "small",
     iconSize: 2.25,
     height: u(3),
-    xSpace: u(1)
+    xSpace: u(1),
+    radius: "var(--lns-radius-100)"
   },
   medium: {
     textSize: "medium",
     iconSize: 3,
     height: u(4),
-    xSpace: u(1.5)
+    xSpace: u(1.5),
+    radius: "var(--lns-radius-150)"
   },
   large: {
     textSize: "large",
     iconSize: 4,
     height: u(6),
-    xSpace: u(3)
+    xSpace: u(3),
+    radius: "var(--lns-radius-200)"
   }
 };
 var TextButtonWrapper = import_styled15.default.button`
-  background-color: transparent;
+  background-color: ${(props) => props.isActive ? getColorValue("backgroundActive") : "transparent"};
   display: inline-flex;
   vertical-align: middle;
   align-items: center;
@@ -3011,7 +3373,7 @@ var TextButtonWrapper = import_styled15.default.button`
   transition: 0.6s background-color;
   color: ${getColorValue("body")};
   ${getFontWeight("bold")};
-  ${getRadius("full")};
+  border-radius: ${(props) => sizeStyles2[props.size].radius};
   ${(props) => getTextSize(sizeStyles2[props.size].textSize)};
   padding: 0 ${(props) => sizeStyles2[props.size].xSpace};
   ${(props) => props.offsetSide && `margin-${props.offsetSide}: calc(-1 * ${sizeStyles2[props.size].xSpace})`};
@@ -3031,7 +3393,7 @@ var TextButtonWrapper = import_styled15.default.button`
 
   &:hover {
     transition: 0.3s background-color;
-    background-color: ${getColorValue("backgroundHover")};
+    background-color: ${(props) => getColorValue(props.isActive ? "backgroundActive" : "backgroundHover")};
   }
 
   &:active {
@@ -3044,80 +3406,115 @@ var TextButtonWrapper = import_styled15.default.button`
     pointer-events: none;
   }
 `;
-var TextButton = (_a) => {
-  var _b = _a, {
-    onClick,
-    size = "medium",
-    children,
-    icon,
-    iconPosition = "left",
-    isDisabled,
-    htmlTag,
-    offsetSide
-  } = _b, props = __objRest(_b, [
-    "onClick",
-    "size",
-    "children",
-    "icon",
-    "iconPosition",
-    "isDisabled",
-    "htmlTag",
-    "offsetSide"
-  ]);
-  const iconComponent = /* @__PURE__ */ import_react17.default.createElement(
-    container_default,
-    {
-      paddingLeft: iconPosition === "right" && "small",
-      paddingRight: iconPosition === "left" && "small",
-      htmlTag: "span"
-    },
-    /* @__PURE__ */ import_react17.default.createElement(
-      icon_default,
-      {
-        icon,
-        size: sizeStyles2[size].iconSize,
-        color: isDisabled ? "disabledColor" : void 0,
-        hasWidthOffset: true
-      }
-    )
-  );
-  return /* @__PURE__ */ import_react17.default.createElement(
-    TextButtonWrapper,
-    __spreadValues({
+var TextButton = import_react20.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
       onClick,
-      size,
+      size = "medium",
+      children,
       icon,
-      iconPosition,
-      disabled: isDisabled,
-      as: htmlTag,
+      iconPosition = "left",
+      isActive,
+      isDisabled,
+      htmlTag,
       offsetSide
-    }, props),
-    icon && iconPosition === "left" && iconComponent,
-    children,
-    icon && iconPosition === "right" && iconComponent
-  );
-};
+    } = _b, props = __objRest(_b, [
+      "onClick",
+      "size",
+      "children",
+      "icon",
+      "iconPosition",
+      "isActive",
+      "isDisabled",
+      "htmlTag",
+      "offsetSide"
+    ]);
+    const iconComponent = /* @__PURE__ */ import_react20.default.createElement(
+      container_default,
+      {
+        paddingLeft: iconPosition === "right" && "small",
+        paddingRight: iconPosition === "left" && "small",
+        htmlTag: "span"
+      },
+      /* @__PURE__ */ import_react20.default.createElement(
+        icon_default,
+        {
+          icon,
+          size: sizeStyles2[size].iconSize,
+          color: isDisabled ? "disabledColor" : void 0
+        }
+      )
+    );
+    return /* @__PURE__ */ import_react20.default.createElement(
+      TextButtonWrapper,
+      __spreadValues({
+        onClick,
+        size,
+        icon,
+        iconPosition,
+        disabled: isDisabled,
+        isActive,
+        as: htmlTag,
+        offsetSide,
+        ref
+      }, props),
+      icon && iconPosition === "left" && iconComponent,
+      children,
+      icon && iconPosition === "right" && iconComponent
+    );
+  }
+);
+TextButton.displayName = "TextButton";
 var text_button_default = TextButton;
 
-// src/components/menu/menu.tsx
-var import_react18 = __toESM(require("react"));
+// src/components/select/select.tsx
+var import_styled17 = __toESM(require("@emotion/styled"));
+var import_downshift = __toESM(require("downshift"));
+var import_react22 = __toESM(require("react"));
+var import_react_laag = require("react-laag");
+var import_resize_observer_polyfill = __toESM(require("resize-observer-polyfill"));
 
-// src/components/icon/available-icons/check.tsx
+// src/utilities/downshift.js
+var getDownshiftEnvironment = (container) => {
+  var _a, _b;
+  const rootNode = (_b = (_a = container == null ? void 0 : container()) == null ? void 0 : _a.getRootNode) == null ? void 0 : _b.call(_a);
+  if (String(rootNode) === "[object ShadowRoot]") {
+    rootNode.createElement = (...args) => rootNode.ownerDocument.createElement(...args);
+    const downshiftPolyfill = rootNode.createElement("div");
+    downshiftPolyfill.id = "a11y-status-message";
+    downshiftPolyfill.style.display = "none";
+    rootNode.appendChild(downshiftPolyfill);
+    return {
+      document: rootNode,
+      addEventListener: rootNode.addEventListener.bind(rootNode),
+      removeEventListener: rootNode.removeEventListener.bind(rootNode)
+    };
+  }
+  if (typeof window === "undefined") {
+    return null;
+  }
+  return window;
+};
+
+// src/components/icon/available-icons/chevron-down.tsx
+var import_chevron_down = __toESM(require("@atlaskit/icon/utility/chevron-down"));
 var React19 = __toESM(require("react"));
-function SvgCheck(props) {
-  return /* @__PURE__ */ React19.createElement("svg", __spreadValues({ viewBox: "0 0 24 24", fill: "none" }, props), /* @__PURE__ */ React19.createElement(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M20.707 5.293a1 1 0 010 1.414l-11 11a1 1 0 01-1.414 0l-5-5a1 1 0 111.414-1.414L9 15.586 19.293 5.293a1 1 0 011.414 0z",
-      fill: "currentColor"
-    }
-  ));
+function SvgChevronDown() {
+  return /* @__PURE__ */ React19.createElement(import_chevron_down.default, { label: "", spacing: "compact", testId: "ads-refreshed-icon" });
 }
 
 // src/components/menu/menu.tsx
 var import_styled16 = __toESM(require("@emotion/styled"));
+var import_react21 = __toESM(require("react"));
+
+// src/components/icon/available-icons/check.tsx
+var import_check_mark = __toESM(require("@atlaskit/icon/core/check-mark"));
+var React20 = __toESM(require("react"));
+function SvgCheck() {
+  return /* @__PURE__ */ React20.createElement(import_check_mark.default, { label: "", testId: "ads-refreshed-icon" });
+}
+
+// src/components/menu/menu.tsx
 var menuPositions = {
   left: "bottom-start",
   right: "bottom-end",
@@ -3138,14 +3535,14 @@ var MenuWrapper = import_styled16.default.ul`
   overflow: auto;
   border: 1px solid ${getColorValue("border")};
   ${getShadow("medium")};
-  ${getRadius("large")};
+  ${getRadius("250")};
 `;
 var MenuItemWrapper = import_styled16.default.li`
   display: ${({ hidden }) => hidden ? "none" : "grid"};
   grid-auto-flow: column;
   grid-template-columns: ${(props) => props.columns};
   ${getSize("grid-gap", "small")};
-  ${getRadius("xlarge")};
+  ${getRadius("175")};
   align-items: center;
   min-height: ${u(5)};
   padding: 0 ${u(2)};
@@ -3186,7 +3583,7 @@ var MenuItem = (_a) => {
   const iconColumn = icon ? "auto" : "";
   const columns = `${iconColumn} 1fr ${checkColumn}`;
   const color = isDisabled ? "disabledContent" : void 0;
-  return /* @__PURE__ */ import_react18.default.createElement(
+  return /* @__PURE__ */ import_react21.default.createElement(
     MenuItemWrapper,
     __spreadValues({
       isHighlighted,
@@ -3194,9 +3591,9 @@ var MenuItem = (_a) => {
       columns,
       hasDivider
     }, props),
-    icon && /* @__PURE__ */ import_react18.default.createElement(icon_default, { icon, color }),
-    /* @__PURE__ */ import_react18.default.createElement(text_default, { color, hasEllipsis: true }, children),
-    isSelected && /* @__PURE__ */ import_react18.default.createElement(icon_default, { icon: /* @__PURE__ */ import_react18.default.createElement(SvgCheck, null), color })
+    icon && /* @__PURE__ */ import_react21.default.createElement(icon_default, { icon, color }),
+    /* @__PURE__ */ import_react21.default.createElement(text_default, { color, hasEllipsis: true }, children),
+    isSelected && /* @__PURE__ */ import_react21.default.createElement(icon_default, { icon: /* @__PURE__ */ import_react21.default.createElement(SvgCheck, null), color })
   );
 };
 var Menu = (_a) => {
@@ -3217,7 +3614,7 @@ var Menu = (_a) => {
     "children",
     "downshiftMenuProps"
   ]);
-  return /* @__PURE__ */ import_react18.default.createElement(
+  return /* @__PURE__ */ import_react21.default.createElement(
     MenuWrapper,
     __spreadValues(__spreadValues({
       zIndex,
@@ -3232,49 +3629,6 @@ var Menu = (_a) => {
 var menu_default = Menu;
 
 // src/components/select/select.tsx
-var import_react19 = __toESM(require("react"));
-var import_downshift = __toESM(require("downshift"));
-var import_resize_observer_polyfill = __toESM(require("resize-observer-polyfill"));
-
-// src/components/icon/available-icons/chevron-small-down.tsx
-var React21 = __toESM(require("react"));
-function SvgChevronSmallDown(props) {
-  return /* @__PURE__ */ React21.createElement("svg", __spreadValues({ viewBox: "0 0 24 24", fill: "none" }, props), /* @__PURE__ */ React21.createElement(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289L12 13.5858L16.2929 9.29289C16.6834 8.90237 17.3166 8.90237 17.7071 9.29289C18.0976 9.68342 18.0976 10.3166 17.7071 10.7071L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L6.29289 10.7071C5.90237 10.3166 5.90237 9.68342 6.29289 9.29289Z",
-      fill: "currentColor"
-    }
-  ));
-}
-
-// src/utilities/downshift.js
-var getDownshiftEnvironment = (container) => {
-  var _a, _b;
-  const rootNode = (_b = (_a = container == null ? void 0 : container()) == null ? void 0 : _a.getRootNode) == null ? void 0 : _b.call(_a);
-  if (String(rootNode) === "[object ShadowRoot]") {
-    rootNode.createElement = (...args) => rootNode.ownerDocument.createElement(...args);
-    const downshiftPolyfill = rootNode.createElement("div");
-    downshiftPolyfill.id = "a11y-status-message";
-    downshiftPolyfill.style.display = "none";
-    rootNode.appendChild(downshiftPolyfill);
-    return {
-      document: rootNode,
-      addEventListener: rootNode.addEventListener.bind(rootNode),
-      removeEventListener: rootNode.removeEventListener.bind(rootNode)
-    };
-  }
-  if (typeof window === "undefined") {
-    return null;
-  }
-  return window;
-};
-
-// src/components/select/select.tsx
-var import_styled17 = __toESM(require("@emotion/styled"));
-var import_react_laag = require("react-laag");
 var SelectWrapper = import_styled17.default.div`
   position: relative;
 `;
@@ -3343,6 +3697,20 @@ var getTitle = ({
   }
   return selectPlaceholder;
 };
+var getHeaderAccessibilityProps = ({
+  selectedItem,
+  getInputProps,
+  getToggleButtonProps,
+  ariaMenuName
+}) => {
+  const valueLabel = selectedItem ? `selected value is ${selectedItem.title}` : "no value selected";
+  return {
+    // Ensures all options within the list of selections can be narrated by a screen reader
+    "aria-activedescendant": getInputProps()["aria-activedescendant"],
+    // The existing aria-label includes whether or not the menu is open or closed, and we add the valueLabel to make a screen reader narrate what is selected
+    "aria-label": `${ariaMenuName ? `${ariaMenuName}, ` : ""}${getToggleButtonProps()["aria-label"]}, ${valueLabel}`
+  };
+};
 var SelectHeader = ({
   getToggleButtonProps,
   inputValue,
@@ -3350,7 +3718,9 @@ var SelectHeader = ({
   selectedOptionValue,
   selectPlaceholder,
   isDisabled,
-  options
+  options,
+  getInputProps,
+  ariaMenuName
 }) => {
   const hasIcon = Boolean(
     getIcon({ options, selectedItem, selectedOptionValue })
@@ -3359,33 +3729,32 @@ var SelectHeader = ({
   const iconColumn = hasIcon ? "auto" : "";
   const columns = `${iconColumn} 1fr auto`;
   const color = isDisabled ? "disabledContent" : void 0;
-  return /* @__PURE__ */ import_react19.default.createElement(
+  return /* @__PURE__ */ import_react22.default.createElement(
     SelectHeaderWrapper,
-    __spreadProps(__spreadValues({}, getToggleButtonProps({
-      onKeyDown: (event) => {
-        if (event.key === "Escape") {
-          event.nativeEvent.preventDownshiftDefault = true;
-        }
-      }
+    __spreadProps(__spreadValues(__spreadValues({}, getToggleButtonProps()), getHeaderAccessibilityProps({
+      selectedItem,
+      getInputProps,
+      getToggleButtonProps,
+      ariaMenuName
     })), {
       hasValue: inputValue || selectedOptionValue,
       disabled: isDisabled,
       columns
     }),
-    hasIcon && /* @__PURE__ */ import_react19.default.createElement(
+    hasIcon && /* @__PURE__ */ import_react22.default.createElement(
       icon_default,
       {
         icon: getIcon({ options, selectedItem, selectedOptionValue }),
         color
       }
     ),
-    /* @__PURE__ */ import_react19.default.createElement(text_default, { hasEllipsis: true, color: hasPlaceholder ? "grey5" : "inherit" }, getTitle({
+    /* @__PURE__ */ import_react22.default.createElement(text_default, { hasEllipsis: true, color: hasPlaceholder ? "bodyDimmed" : "inherit" }, getTitle({
       options,
       selectedItem,
       selectedOptionValue,
       selectPlaceholder
     })),
-    /* @__PURE__ */ import_react19.default.createElement(icon_default, { icon: /* @__PURE__ */ import_react19.default.createElement(SvgChevronSmallDown, null), color })
+    /* @__PURE__ */ import_react22.default.createElement(icon_default, { icon: /* @__PURE__ */ import_react22.default.createElement(SvgChevronDown, null), color })
   );
 };
 var CustomHeader = ({
@@ -3395,15 +3764,16 @@ var CustomHeader = ({
   getToggleButtonProps,
   options,
   selectPlaceholder,
-  isDisabled
+  isDisabled,
+  getInputProps,
+  ariaMenuName
 }) => {
   const buttonProps = () => {
-    return __spreadValues({}, getToggleButtonProps({
-      onKeyDown: (event) => {
-        if (event.key === "Escape") {
-          event.nativeEvent.preventDownshiftDefault = true;
-        }
-      }
+    return __spreadValues(__spreadValues({}, getToggleButtonProps()), getHeaderAccessibilityProps({
+      selectedItem,
+      getInputProps,
+      getToggleButtonProps,
+      ariaMenuName
     }));
   };
   const getTriggerTitle = () => {
@@ -3444,6 +3814,7 @@ var Select = (_a) => {
     menuMaxWidth,
     menuMaxHeight = 34,
     menuMinWidth,
+    ariaMenuName,
     selectedOptionValue,
     onOuterClick,
     options,
@@ -3459,6 +3830,7 @@ var Select = (_a) => {
     "menuMaxWidth",
     "menuMaxHeight",
     "menuMinWidth",
+    "ariaMenuName",
     "selectedOptionValue",
     "onOuterClick",
     "options",
@@ -3469,11 +3841,11 @@ var Select = (_a) => {
     "trigger"
   ]);
   const environment = getDownshiftEnvironment(container);
-  const [downshiftIsOpen, setDownshiftIsOpen] = (0, import_react19.useState)(false);
-  const [prevSelectedItem, setPrevSelectedItem] = (0, import_react19.useState)(
+  const [downshiftIsOpen, setDownshiftIsOpen] = (0, import_react22.useState)(false);
+  const [prevSelectedItem, setPrevSelectedItem] = (0, import_react22.useState)(
     getSelectedOption(selectedOptionValue, options)
   );
-  const [selectedItem, setSelectedItem] = (0, import_react19.useState)(prevSelectedItem);
+  const [selectedItem, setSelectedItem] = (0, import_react22.useState)(prevSelectedItem);
   const onDownshiftChange = (item) => {
     setSelectedItem(item);
     onChange && onChange(item ? item : "");
@@ -3496,24 +3868,29 @@ var Select = (_a) => {
     auto: true,
     snap: true
   });
-  (0, import_react19.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (didSelectedOptionValueChange(selectedOptionValue, prevSelectedItem)) {
       const selectedItem2 = getSelectedOption(selectedOptionValue, options);
       setPrevSelectedItem(selectedItem2);
       setSelectedItem(selectedItem2);
     }
   }, [selectedOptionValue, options, prevSelectedItem]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     onOpenChange && onOpenChange(downshiftIsOpen);
   }, [downshiftIsOpen, onOpenChange]);
   const stateReducer = (state, changes) => {
     if (changes.isOpen !== void 0) {
+      if (changes.type === import_downshift.default.stateChangeTypes.keyDownEscape) {
+        setDownshiftIsOpen(false);
+        return { isOpen: false };
+      }
       setDownshiftIsOpen(changes.isOpen);
     }
     return changes;
   };
-  return /* @__PURE__ */ import_react19.default.createElement(SelectWrapper, __spreadValues({}, props), /* @__PURE__ */ import_react19.default.createElement(import_downshift.default, __spreadProps(__spreadValues({}, downshiftProps), { stateReducer }), ({
+  return /* @__PURE__ */ import_react22.default.createElement(SelectWrapper, __spreadValues({}, props), /* @__PURE__ */ import_react22.default.createElement(import_downshift.default, __spreadProps(__spreadValues({}, downshiftProps), { stateReducer }), ({
     getItemProps,
+    getInputProps,
     getMenuProps,
     getToggleButtonProps,
     isOpen,
@@ -3521,85 +3898,95 @@ var Select = (_a) => {
     highlightedIndex,
     selectedItem: selectedItem2
   }) => {
-    return /* @__PURE__ */ import_react19.default.createElement("div", null, /* @__PURE__ */ import_react19.default.createElement("div", __spreadValues({}, triggerProps), trigger ? /* @__PURE__ */ import_react19.default.createElement(
-      CustomHeader,
-      {
-        getToggleButtonProps,
-        selectedItem: selectedItem2,
-        selectedOptionValue,
-        selectPlaceholder: placeholder,
-        isDisabled,
-        options,
-        trigger
-      }
-    ) : /* @__PURE__ */ import_react19.default.createElement(
-      SelectHeader,
-      {
-        getToggleButtonProps,
-        selectedItem: selectedItem2,
-        selectedOptionValue,
-        selectPlaceholder: placeholder,
-        options,
-        inputValue,
-        isDisabled
-      }
-    )), downshiftIsOpen && isOpen && renderLayer(
-      /* @__PURE__ */ import_react19.default.createElement(
-        "div",
-        __spreadProps(__spreadValues({}, layerProps), {
-          style: __spreadProps(__spreadValues({}, layerProps.style), {
-            zIndex: menuZIndex,
-            width: menuMinWidth ? "auto" : triggerBounds == null ? void 0 : triggerBounds.width
-          })
-        }),
-        /* @__PURE__ */ import_react19.default.createElement(
-          menu_default,
-          {
-            position: menuPosition,
-            downshiftMenuProps: getMenuProps,
-            maxWidth: menuMaxWidth,
-            maxHeight: menuMaxHeight,
-            minWidth: menuMinWidth
-          },
-          options.map((item, index) => {
-            return /* @__PURE__ */ import_react19.default.createElement(
-              MenuItem,
-              __spreadProps(__spreadValues({
-                key: index,
-                getItemProps,
-                icon: item.icon,
-                hidden: item.hidden
-              }, getItemProps({
-                key: `${item.value}-${index}`,
-                index,
-                item,
-                disabled: item.isDisabled
-              })), {
-                isDisabled: item.isDisabled,
-                hasDivider: item.hasDivider,
-                isHighlighted: highlightedIndex === index,
-                isSelected: !selectedItem2 && item.value === selectedOptionValue || selectedItem2 && selectedItem2.value === item.value
-              }),
-              item.title
-            );
-          })
+    return (
+      // Don't set the role to combobox to ensure a consistent experience for screen readers
+      /* @__PURE__ */ import_react22.default.createElement("div", { role: null }, /* @__PURE__ */ import_react22.default.createElement("div", __spreadValues({}, triggerProps), trigger ? /* @__PURE__ */ import_react22.default.createElement(
+        CustomHeader,
+        {
+          getToggleButtonProps,
+          selectedItem: selectedItem2,
+          selectedOptionValue,
+          selectPlaceholder: placeholder,
+          isDisabled,
+          options,
+          trigger,
+          getInputProps,
+          ariaMenuName
+        }
+      ) : /* @__PURE__ */ import_react22.default.createElement(
+        SelectHeader,
+        {
+          getToggleButtonProps,
+          selectedItem: selectedItem2,
+          selectedOptionValue,
+          selectPlaceholder: placeholder,
+          options,
+          inputValue,
+          isDisabled,
+          getInputProps,
+          ariaMenuName
+        }
+      )), downshiftIsOpen && isOpen && renderLayer(
+        /* @__PURE__ */ import_react22.default.createElement(
+          "div",
+          __spreadProps(__spreadValues({}, layerProps), {
+            style: __spreadProps(__spreadValues({}, layerProps.style), {
+              zIndex: menuZIndex,
+              width: menuMinWidth ? "auto" : triggerBounds == null ? void 0 : triggerBounds.width
+            })
+          }),
+          /* @__PURE__ */ import_react22.default.createElement(
+            menu_default,
+            {
+              position: menuPosition,
+              downshiftMenuProps: getMenuProps,
+              maxWidth: menuMaxWidth,
+              maxHeight: menuMaxHeight,
+              minWidth: menuMinWidth
+            },
+            options.map((item, index) => {
+              const isSelected = !selectedItem2 && item.value === selectedOptionValue || selectedItem2 && selectedItem2.value === item.value;
+              return /* @__PURE__ */ import_react22.default.createElement(
+                MenuItem,
+                __spreadProps(__spreadValues({
+                  key: index,
+                  getItemProps,
+                  icon: item.icon,
+                  hidden: item.hidden
+                }, getItemProps({
+                  key: `${item.value}-${index}`,
+                  index,
+                  item,
+                  disabled: item.isDisabled,
+                  "aria-selected": isSelected
+                  // Downshift sets aria-selected to true on hover, which makes screen readers narrate that the item is selected when it is really not, so we override aria-selected here
+                })), {
+                  isDisabled: item.isDisabled,
+                  hasDivider: item.hasDivider,
+                  isHighlighted: highlightedIndex === index,
+                  isSelected
+                }),
+                item.title
+              );
+            })
+          )
         )
-      )
-    ));
+      ))
+    );
   }));
 };
 var select_default = Select;
 
 // src/components/backdrop/backdrop.tsx
-var import_react21 = __toESM(require("react"));
 var import_styled18 = __toESM(require("@emotion/styled"));
+var import_react24 = __toESM(require("react"));
 var import_transition_hook = require("transition-hook");
 
 // src/hooks/use-prevent-scroll.ts
-var import_react20 = require("react");
+var import_react23 = require("react");
 function usePreventScroll(level, enabled) {
   const safeDocument = document;
-  (0, import_react20.useLayoutEffect)(() => {
+  (0, import_react23.useLayoutEffect)(() => {
     const html = safeDocument == null ? void 0 : safeDocument.documentElement;
     const body = safeDocument == null ? void 0 : safeDocument.body;
     if (safeDocument == void 0 || !html || !body) {
@@ -3686,7 +4073,7 @@ var Backdrop = (_a) => {
   ]);
   const { stage, shouldMount } = (0, import_transition_hook.useTransition)(isOpen, duration);
   use_prevent_scroll_default("html", isOpen);
-  return /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, shouldMount && /* @__PURE__ */ import_react21.default.createElement(
+  return /* @__PURE__ */ import_react24.default.createElement(import_react24.default.Fragment, null, shouldMount && /* @__PURE__ */ import_react24.default.createElement(
     BackdropWrapper,
     __spreadValues({
       backgroundColor,
@@ -3696,31 +4083,24 @@ var Backdrop = (_a) => {
         opacity: stage === "enter" ? 1 : 0
       }
     }, props),
-    /* @__PURE__ */ import_react21.default.createElement(ChildrenWrapper, null, children)
+    /* @__PURE__ */ import_react24.default.createElement(ChildrenWrapper, null, children)
   ));
 };
 var backdrop_default = Backdrop;
 
 // src/components/modal/modal.tsx
+var import_styled19 = __toESM(require("@emotion/styled"));
 var import_focus_trap_react = __toESM(require("focus-trap-react"));
-var import_react22 = __toESM(require("react"));
+var import_react25 = __toESM(require("react"));
 
 // src/components/icon/available-icons/close.tsx
+var import_close = __toESM(require("@atlaskit/icon/core/close"));
 var React24 = __toESM(require("react"));
-function SvgClose(props) {
-  return /* @__PURE__ */ React24.createElement("svg", __spreadValues({ viewBox: "0 0 24 24", fill: "none" }, props), /* @__PURE__ */ React24.createElement(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M13.21 12l4.54-4.54c.33-.33.33-.88 0-1.21a.863.863 0 00-1.21 0L12 10.79 7.46 6.25a.863.863 0 00-1.21 0c-.33.33-.33.88 0 1.21L10.79 12l-4.54 4.54c-.33.33-.33.88 0 1.21.33.33.88.33 1.21 0L12 13.21l4.54 4.54c.33.33.88.33 1.21 0 .33-.33.33-.88 0-1.21L13.21 12z",
-      fill: "currentColor"
-    }
-  ));
+function SvgClose() {
+  return /* @__PURE__ */ React24.createElement(import_close.default, { label: "", testId: "ads-refreshed-icon" });
 }
 
 // src/components/modal/modal.tsx
-var import_styled19 = __toESM(require("@emotion/styled"));
 var DEFAULT_MODAL_CARD_HEIGHT = "70vh";
 var ContentWrapper = import_styled19.default.div`
   display: grid;
@@ -3816,6 +4196,8 @@ var ModalCard = (_a) => {
     maxHeight = DEFAULT_MODAL_CARD_HEIGHT,
     placement = "center",
     ariaLabel,
+    ariaModal,
+    ariaLabelledBy,
     ref,
     removeClose
   } = _b, props = __objRest(_b, [
@@ -3826,10 +4208,12 @@ var ModalCard = (_a) => {
     "maxHeight",
     "placement",
     "ariaLabel",
+    "ariaModal",
+    "ariaLabelledBy",
     "ref",
     "removeClose"
   ]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     const keyListener = (e) => {
       if (e.key === "Escape") {
         e.preventDefault();
@@ -3844,7 +4228,7 @@ var ModalCard = (_a) => {
     };
   }, [isOpen, onCloseClick]);
   use_prevent_scroll_default("html", isOpen);
-  return /* @__PURE__ */ import_react22.default.createElement(
+  return /* @__PURE__ */ import_react25.default.createElement(
     import_focus_trap_react.default,
     {
       active: isOpen,
@@ -3853,7 +4237,7 @@ var ModalCard = (_a) => {
         allowOutsideClick: true
       }
     },
-    /* @__PURE__ */ import_react22.default.createElement(
+    /* @__PURE__ */ import_react25.default.createElement(
       ModalCardWrapper,
       __spreadValues({
         open: isOpen,
@@ -3862,17 +4246,20 @@ var ModalCard = (_a) => {
         placement,
         onClick: (e) => e.stopPropagation(),
         ref,
-        "aria-label": ariaLabel
+        role: "dialog",
+        "aria-label": ariaLabel,
+        "aria-modal": ariaModal,
+        "aria-labelledby": ariaLabelledBy
       }, props),
-      !removeClose && onCloseClick && /* @__PURE__ */ import_react22.default.createElement(CloseIconSection, null, /* @__PURE__ */ import_react22.default.createElement(
+      !removeClose && onCloseClick && /* @__PURE__ */ import_react25.default.createElement(CloseIconSection, null, /* @__PURE__ */ import_react25.default.createElement(
         icon_button_default,
         {
           altText: "Close",
-          icon: /* @__PURE__ */ import_react22.default.createElement(SvgClose, null),
+          icon: /* @__PURE__ */ import_react25.default.createElement(SvgClose, null),
           onClick: onCloseClick
         }
       )),
-      /* @__PURE__ */ import_react22.default.createElement(
+      /* @__PURE__ */ import_react25.default.createElement(
         ModalCardChildrenSection,
         {
           tabIndex: removeClose ? 0 : -1,
@@ -3883,7 +4270,7 @@ var ModalCard = (_a) => {
     )
   );
 };
-var Modal = import_react22.default.forwardRef(
+var Modal = import_react25.default.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -3902,7 +4289,9 @@ var Modal = import_react22.default.forwardRef(
       maxWidth = 60,
       placement = "center",
       zIndex = 1e3,
-      ariaLabel
+      ariaLabel,
+      ariaModal = true,
+      ariaLabelledBy
     } = _b, props = __objRest(_b, [
       "children",
       "id",
@@ -3920,8 +4309,11 @@ var Modal = import_react22.default.forwardRef(
       "maxWidth",
       "placement",
       "zIndex",
-      "ariaLabel"
+      "ariaLabel",
+      "ariaModal",
+      "ariaLabelledBy"
     ]);
+    var _a2;
     const titleId = id ? `${id}-modal-title` : "modal-title";
     const hasButtons = mainButton || secondaryButton || alternativeButton ? true : false;
     const closeClickHandler = (e) => {
@@ -3932,15 +4324,14 @@ var Modal = import_react22.default.forwardRef(
       }
       onCloseClick(e);
     };
-    return /* @__PURE__ */ import_react22.default.createElement(backdrop_default, __spreadValues({ isOpen, zIndex }, props), /* @__PURE__ */ import_react22.default.createElement(
+    return /* @__PURE__ */ import_react25.default.createElement(backdrop_default, __spreadValues({ isOpen, zIndex }, props), /* @__PURE__ */ import_react25.default.createElement(
       container_default,
       {
         height: "100%",
         onClick: closeClickHandler,
-        onKeyDown,
-        "aria-labelledby": titleId
+        onKeyDown
       },
-      /* @__PURE__ */ import_react22.default.createElement(
+      /* @__PURE__ */ import_react25.default.createElement(
         ModalCard,
         {
           ref,
@@ -3950,22 +4341,23 @@ var Modal = import_react22.default.forwardRef(
           maxWidth,
           placement,
           onCloseClick,
-          ariaLabel
+          ariaLabel,
+          ariaModal,
+          ariaLabelledBy: (_a2 = ariaLabelledBy != null ? ariaLabelledBy : titleId) != null ? _a2 : void 0
         },
-        /* @__PURE__ */ import_react22.default.createElement(
+        /* @__PURE__ */ import_react25.default.createElement(
           ContentWrapper,
           {
             rows: `${title ? "auto " : ""} ${children ? "1fr " : ""} ${hasButtons ? "auto" : ""}`
           },
-          title && /* @__PURE__ */ import_react22.default.createElement(
+          title && /* @__PURE__ */ import_react25.default.createElement(
             TitleSection,
             {
-              bottom: children ? "var(--lns-space-medium)" : "var(--lns-space-xlarge)",
-              id: titleId
+              bottom: children ? "var(--lns-space-medium)" : "var(--lns-space-xlarge)"
             },
-            /* @__PURE__ */ import_react22.default.createElement(text_default, { variant: "title" }, title)
+            /* @__PURE__ */ import_react25.default.createElement(text_default, { htmlTag: "h1", variant: "title", id: titleId }, title)
           ),
-          /* @__PURE__ */ import_react22.default.createElement(
+          /* @__PURE__ */ import_react25.default.createElement(
             ChildrenSection2,
             {
               noPadding,
@@ -3975,14 +4367,14 @@ var Modal = import_react22.default.forwardRef(
             },
             children && children
           ),
-          hasButtons && /* @__PURE__ */ import_react22.default.createElement(
+          hasButtons && /* @__PURE__ */ import_react25.default.createElement(
             ButtonsSection,
             {
               top: children ? "var(--lns-space-xlarge)" : 0,
               hasDividers
             },
             alternativeButton,
-            /* @__PURE__ */ import_react22.default.createElement(RightButtonsSection, null, secondaryButton && /* @__PURE__ */ import_react22.default.createElement(spacer_default, { right: "small", isInline: true }, secondaryButton), mainButton)
+            /* @__PURE__ */ import_react25.default.createElement(RightButtonsSection, null, secondaryButton && /* @__PURE__ */ import_react25.default.createElement(spacer_default, { right: "small", isInline: true }, secondaryButton), mainButton)
           )
         )
       )
@@ -3992,8 +4384,8 @@ var Modal = import_react22.default.forwardRef(
 var modal_default = Modal;
 
 // src/components/align/align.tsx
-var import_react23 = __toESM(require("react"));
 var import_styled20 = __toESM(require("@emotion/styled"));
+var import_react26 = __toESM(require("react"));
 var alignmentsPlaceItems = {
   topLeft: "start",
   topCenter: "start center",
@@ -4036,36 +4428,43 @@ var Align = (_a) => {
     "alignment",
     "htmlTag"
   ]);
-  return /* @__PURE__ */ import_react23.default.createElement(AlignWrapper, __spreadValues({ alignment, as: htmlTag }, props), children);
+  return /* @__PURE__ */ import_react26.default.createElement(AlignWrapper, __spreadValues({ alignment, as: htmlTag }, props), children);
 };
 var availableAlignments2 = Object.keys(alignmentsPlaceItems);
 var align_default = Align;
 
 // src/components/link/link.tsx
-var import_react24 = __toESM(require("react"));
+var import_react27 = require("@emotion/react");
 var import_styled21 = __toESM(require("@emotion/styled"));
-var import_core4 = require("@emotion/core");
+var import_react28 = __toESM(require("react"));
 var variants2 = {
   neutral: {
     color: getColorValue("inherit"),
-    focusRing: getFocusRing()
+    focusRing: getFocusRing(),
+    underline: "inactive"
   },
   primary: {
     color: getColorValue("primary"),
-    focusRing: getFocusRing()
+    focusRing: getFocusRing(),
+    underline: "inactive"
+  },
+  subtle: {
+    color: getColorValue("body"),
+    focusRing: getFocusRing(),
+    underline: "hover"
   }
 };
 var statusStyles2 = {
-  enabled: import_core4.css`
+  enabled: import_react27.css`
     cursor: pointer;
   `,
-  disabled: import_core4.css`
+  disabled: import_react27.css`
     pointer-events: none;
     color: ${getColorValue("disabledContent")};
   `
 };
 var buttonStyles = {
-  isButton: import_core4.css`
+  isButton: import_react27.css`
     background: none;
     border: none;
     font: inherit;
@@ -4075,11 +4474,14 @@ var LinkWrapper = import_styled21.default.a`
   ${(props) => !props.disabled && `color: ${variants2[props.variant].color}`};
   ${(props) => props.disabled ? statusStyles2.disabled : statusStyles2.enabled};
   ${(props) => props.as === "button" && buttonStyles.isButton};
+  ${(props) => `text-decoration: ${variants2[props.variant].underline === "inactive" ? "underline" : "none"}`};
   border-radius: 0.28em;
   box-shadow: 0 0 0 1px transparent;
-  text-decoration: underline;
   text-underline-offset: 0.35em;
   transition: 0.3s box-shadow;
+  &:hover {
+    ${(props) => `text-decoration: ${variants2[props.variant].underline === "hover" ? "underline" : "none"}`};
+  }
   &:focus,
   &:focus-visible {
     outline: 1px solid transparent;
@@ -4105,7 +4507,7 @@ var Link = (_a) => {
     "htmlTag",
     "isDisabled"
   ]);
-  return /* @__PURE__ */ import_react24.default.createElement(
+  return /* @__PURE__ */ import_react28.default.createElement(
     LinkWrapper,
     __spreadValues({
       href,
@@ -4120,8 +4522,8 @@ var availableVariants2 = Object.keys(variants2);
 var link_default = Link;
 
 // src/components/textarea/textarea.tsx
-var import_react25 = __toESM(require("react"));
 var import_styled22 = __toESM(require("@emotion/styled"));
+var import_react29 = __toESM(require("react"));
 var sizesStyles3 = {
   small: {
     padding: `${u(1.5)} ${u(1.75)}`,
@@ -4168,10 +4570,10 @@ var TextareaWrapper = import_styled22.default.textarea`
   }
 
   &::placeholder {
-    color: ${getColorValue("grey5")};
+    color: ${getColorValue("bodyDimmed")};
   }
 `;
-var Textarea = import_react25.default.forwardRef(
+var Textarea = import_react29.default.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       onChange,
@@ -4192,7 +4594,7 @@ var Textarea = import_react25.default.forwardRef(
       "resize",
       "error"
     ]);
-    return /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, /* @__PURE__ */ import_react25.default.createElement(
+    return /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, /* @__PURE__ */ import_react29.default.createElement(
       TextareaWrapper,
       __spreadValues({
         disabled: isDisabled,
@@ -4205,27 +4607,42 @@ var Textarea = import_react25.default.forwardRef(
         resize,
         error
       }, props)
-    ), error ? /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, /* @__PURE__ */ import_react25.default.createElement(spacer_default, { bottom: "xmsall" }), /* @__PURE__ */ import_react25.default.createElement(text_default, { color: "danger", fontWeight: "book", size: "body-md" }, error)) : null);
+    ), error ? /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, /* @__PURE__ */ import_react29.default.createElement(spacer_default, { bottom: "xmsall" }), /* @__PURE__ */ import_react29.default.createElement(text_default, { color: "danger", fontWeight: "regular", size: "body-md" }, error)) : null);
   }
 );
 var textarea_default = Textarea;
 
 // src/components/dropdown/dropdown.tsx
-var import_react26 = __toESM(require("react"));
-var import_downshift3 = __toESM(require("downshift"));
-var import_resize_observer_polyfill2 = __toESM(require("resize-observer-polyfill"));
 var import_styled23 = __toESM(require("@emotion/styled"));
+var import_downshift3 = __toESM(require("downshift"));
+var import_react30 = __toESM(require("react"));
 var import_react_laag2 = require("react-laag");
+var import_resize_observer_polyfill2 = __toESM(require("resize-observer-polyfill"));
+var getAccessibilityProps = ({
+  ariaMenuName,
+  getInputProps,
+  isOpen
+}) => {
+  return {
+    // Ensures all options within the list of selections can be narrated by a screen reader
+    "aria-activedescendant": getInputProps()["aria-activedescendant"],
+    "aria-expanded": isOpen,
+    // Provides a screen-readable label for the dropdown
+    "aria-label": ariaMenuName ? ariaMenuName : ""
+  };
+};
 var TriggerSection = import_styled23.default.div`
   display: inline-block;
   vertical-align: middle;
 `;
 var Dropdown = (_a) => {
   var _b = _a, {
+    ariaMenuName,
     menuPosition = "left",
     menuZIndex = 1100,
     options,
     trigger,
+    triggerCallback,
     isOpen: isOpenFromProps,
     menuMinWidth = 24,
     menuMaxWidth = 48,
@@ -4235,10 +4652,12 @@ var Dropdown = (_a) => {
     triggerOffset = 0,
     onOpenChange
   } = _b, props = __objRest(_b, [
+    "ariaMenuName",
     "menuPosition",
     "menuZIndex",
     "options",
     "trigger",
+    "triggerCallback",
     "isOpen",
     "menuMinWidth",
     "menuMaxWidth",
@@ -4249,7 +4668,7 @@ var Dropdown = (_a) => {
     "onOpenChange"
   ]);
   const environment = getDownshiftEnvironment(container);
-  const [downshiftIsOpen, setDownshiftIsOpen] = (0, import_react26.useState)(false);
+  const [downshiftIsOpen, setDownshiftIsOpen] = (0, import_react30.useState)(false);
   const isOpen = isOpenFromProps || downshiftIsOpen;
   const { layerProps, triggerProps, renderLayer } = (0, import_react_laag2.useLayer)({
     isOpen,
@@ -4260,7 +4679,7 @@ var Dropdown = (_a) => {
     snap: true,
     triggerOffset
   });
-  (0, import_react26.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     onOpenChange && onOpenChange(isOpen);
   }, [isOpen, onOpenChange]);
   const stateReducer = (state, changes) => {
@@ -4269,7 +4688,7 @@ var Dropdown = (_a) => {
     }
     return changes;
   };
-  return /* @__PURE__ */ import_react26.default.createElement(
+  return /* @__PURE__ */ import_react30.default.createElement(
     import_downshift3.default,
     {
       stateReducer,
@@ -4279,146 +4698,401 @@ var Dropdown = (_a) => {
       environment
     },
     ({
+      getInputProps,
       getItemProps,
       getMenuProps,
       getToggleButtonProps,
-      highlightedIndex
-    }) => /* @__PURE__ */ import_react26.default.createElement("div", __spreadValues({}, props), /* @__PURE__ */ import_react26.default.createElement("div", __spreadValues({}, triggerProps), /* @__PURE__ */ import_react26.default.createElement(TriggerSection, __spreadValues({}, getToggleButtonProps({})), trigger)), isOpen && renderLayer(
-      /* @__PURE__ */ import_react26.default.createElement(
-        "div",
-        __spreadProps(__spreadValues({}, layerProps), {
-          style: __spreadProps(__spreadValues({}, layerProps.style), { zIndex: menuZIndex })
-        }),
-        /* @__PURE__ */ import_react26.default.createElement(
-          menu_default,
-          {
-            position: menuPosition,
-            minWidth: menuMinWidth,
-            maxWidth: menuMaxWidth,
-            maxHeight: menuMaxHeight,
-            downshiftMenuProps: getMenuProps
-          },
-          options.map((item, index) => {
-            return /* @__PURE__ */ import_react26.default.createElement(
-              MenuItem,
-              __spreadValues({
-                key: index,
-                isHighlighted: highlightedIndex === index,
-                isDisabled: item.disabled,
-                icon: item.icon,
-                hasDivider: item.hasDivider,
-                getItemProps,
-                index
-              }, getItemProps({
-                key: index,
-                index,
-                item,
-                disabled: item.disabled
-              })),
-              item.title
-            );
-          })
+      highlightedIndex,
+      isOpen: isOpen2
+    }) => /* @__PURE__ */ import_react30.default.createElement(
+      "div",
+      __spreadValues(__spreadValues({}, props), triggerCallback ? {
+        // the Downshift component appears to set the following props,
+        // which we do not want applied to this element
+        role: null,
+        "aria-haspopup": null,
+        "aria-expanded": null,
+        "aria-labelledby": null
+      } : {}),
+      /* @__PURE__ */ import_react30.default.createElement("div", __spreadValues({}, triggerProps), triggerCallback ? triggerCallback(__spreadValues(__spreadValues({}, getToggleButtonProps()), getAccessibilityProps({
+        ariaMenuName,
+        getInputProps,
+        isOpen: isOpen2
+      }))) : /* @__PURE__ */ import_react30.default.createElement(TriggerSection, __spreadValues({}, getToggleButtonProps({})), trigger)),
+      isOpen2 && renderLayer(
+        /* @__PURE__ */ import_react30.default.createElement(
+          "div",
+          __spreadProps(__spreadValues({}, layerProps), {
+            style: __spreadProps(__spreadValues({}, layerProps.style), { zIndex: menuZIndex })
+          }),
+          /* @__PURE__ */ import_react30.default.createElement(
+            menu_default,
+            {
+              position: menuPosition,
+              minWidth: menuMinWidth,
+              maxWidth: menuMaxWidth,
+              maxHeight: menuMaxHeight,
+              downshiftMenuProps: getMenuProps
+            },
+            options.map((item, index) => {
+              return /* @__PURE__ */ import_react30.default.createElement(
+                MenuItem,
+                __spreadValues({
+                  key: index,
+                  isHighlighted: highlightedIndex === index,
+                  isDisabled: item.disabled,
+                  icon: item.icon,
+                  hasDivider: item.hasDivider,
+                  getItemProps,
+                  index
+                }, getItemProps({
+                  key: index,
+                  index,
+                  item,
+                  disabled: item.disabled
+                })),
+                item.title
+              );
+            })
+          )
         )
       )
-    ))
+    )
   );
 };
 var dropdown_default = Dropdown;
 
 // src/components/form-field/form-field.tsx
-var import_react27 = __toESM(require("react"));
+var import_styled26 = __toESM(require("@emotion/styled"));
+var import_react33 = __toESM(require("react"));
+
+// src/components/radio/radio.tsx
 var import_styled24 = __toESM(require("@emotion/styled"));
-var directionStyles = {
-  row: {
-    wrapper: {
-      display: "grid",
-      gridTemplateColumns: "auto 1fr",
-      alignItems: "center"
-    },
-    label: { marginLeft: "var(--lns-space-small)" },
-    errorMessage: { marginLeft: "var(--lns-space-small)" }
-  },
-  column: {
-    wrapper: {},
-    label: { marginBottom: "var(--lns-space-xsmall)" }
-  }
-};
-var FormFieldWrapper = import_styled24.default.div`
-  ${(props) => props.direction && directionStyles[props.direction].wrapper};
-`;
-var Label = import_styled24.default.label`
-  display: block;
-  ${(props) => props.direction && directionStyles[props.direction].label};
-`;
-var ErrorMessage = import_styled24.default.span`
-  color: var(--lns-color-red);
-  margin-top: var(--lns-space-xsmall);
+var import_react31 = __toESM(require("react"));
+var RadioLabel = import_styled24.default.label`
   display: block;
-  width: 100%;
-  grid-column-start: 1;
-  grid-column-end: 3;
+  position: relative;
+
+  .RadioBox:after {
+    background-color: transparent;
+  }
 `;
-var FormField = (_a) => {
-  var _b = _a, {
-    label,
-    children,
-    errorMessage,
-    labelFor,
-    direction = "column"
-  } = _b, props = __objRest(_b, [
-    "label",
-    "children",
-    "errorMessage",
-    "labelFor",
-    "direction"
-  ]);
-  const labelElement = label && /* @__PURE__ */ import_react27.default.createElement(Label, { direction, htmlFor: labelFor }, label);
-  return /* @__PURE__ */ import_react27.default.createElement(FormFieldWrapper, __spreadValues({ direction }, props), direction === "row" && /* @__PURE__ */ import_react27.default.createElement(import_react27.default.Fragment, null, children, labelElement), direction === "column" && /* @__PURE__ */ import_react27.default.createElement(import_react27.default.Fragment, null, labelElement, children), errorMessage && /* @__PURE__ */ import_react27.default.createElement(ErrorMessage, null, errorMessage));
-};
-var form_field_default = FormField;
+var RadioInput = import_styled24.default.input`
+  position: absolute;
+  opacity: 0;
 
-// src/components/notification-bar/notification-bar.tsx
-var import_react32 = __toESM(require("react"));
-var import_styled25 = __toESM(require("@emotion/styled"));
+  &:not(:disabled) {
+    cursor: pointer;
 
-// src/components/icon/available-icons/info.tsx
-var React31 = __toESM(require("react"));
-function SvgInfo(props) {
-  return /* @__PURE__ */ React31.createElement("svg", __spreadValues({ viewBox: "0 0 24 24", fill: "none" }, props), /* @__PURE__ */ React31.createElement(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M12 5a7 7 0 100 14 7 7 0 000-14zm-9 7a9 9 0 1118 0 9 9 0 01-18 0z",
-      fill: "currentColor"
+    & ~ .RadioBox {
+      border: 2px solid ${getColorValue("body")};
+    }
+
+    &:checked ~ .RadioBox {
+      border: 2px solid ${getColorValue("body")};
     }
-  ), /* @__PURE__ */ React31.createElement(
-    "path",
+  }
+
+  &:disabled,
+  &:disabled ~ .RadioBox {
+    pointer-events: none;
+  }
+
+  &:disabled ~ .RadioBox {
+    background-color: ${getColorValue("disabledBackground")};
+  }
+
+  &:checked {
+    & ~ .RadioBox:after {
+      background-color: ${getColorValue("blurple")};
+    }
+
+    &:disabled ~ .RadioBox:after {
+      background-color: ${getColorValue("disabledContent")};
+    }
+  }
+
+  &:focus-visible ~ .RadioBox {
+    ${getFocusRing()};
+  }
+`;
+var RadioBox = import_styled24.default.span`
+  cursor: pointer;
+  width: ${u(2.25)};
+  height: ${u(2.25)};
+  ${getRadius("full")};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+
+  &:after {
+    content: '';
+    width: ${u(1)};
+    height: ${u(1)};
+    ${getRadius("full")};
+    background-color: ${getColorValue("white")};
+  }
+`;
+var Radio = (0, import_react31.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      isDisabled,
+      isChecked,
+      onFocus,
+      onChange,
+      onBlur
+    } = _b, props = __objRest(_b, [
+      "isDisabled",
+      "isChecked",
+      "onFocus",
+      "onChange",
+      "onBlur"
+    ]);
+    return /* @__PURE__ */ import_react31.default.createElement(RadioLabel, null, /* @__PURE__ */ import_react31.default.createElement(
+      RadioInput,
+      __spreadValues({
+        type: "radio",
+        disabled: isDisabled,
+        checked: isChecked,
+        onFocus,
+        onChange,
+        onBlur,
+        ref
+      }, props)
+    ), /* @__PURE__ */ import_react31.default.createElement(RadioBox, { className: "RadioBox" }));
+  }
+);
+var radio_default = Radio;
+
+// src/components/switch/switch.tsx
+var import_styled25 = __toESM(require("@emotion/styled"));
+var import_react32 = __toESM(require("react"));
+var sizes2 = {
+  medium: {
+    switchHeight: 16,
+    switchWidth: 32,
+    knobOffset: 2
+  },
+  large: {
+    switchHeight: 20,
+    switchWidth: 36,
+    knobOffset: 2
+  }
+};
+var colorStyles = {
+  knob: {
+    active: {
+      enabled: getColorValue("white"),
+      disabled: getColorValue("disabledContent")
+    },
+    inactive: {
+      enabled: getColorValue("white"),
+      disabled: getColorValue("disabledContent")
+    }
+  },
+  track: {
+    active: {
+      enabled: getColorValue("blurple"),
+      disabled: getColorValue("disabledBackground")
+    },
+    inactive: {
+      enabled: getColorValue("grey6"),
+      disabled: getColorValue("disabledBackground")
+    }
+  }
+};
+var getKnobTravel = (props) => {
+  return sizes2[props.switchSize].switchWidth - sizes2[props.switchSize].switchHeight;
+};
+var getKnobSize = (props) => {
+  return sizes2[props.switchSize].switchHeight - sizes2[props.switchSize].knobOffset * 2;
+};
+var SwitchLabel = import_styled25.default.label`
+  display: block;
+  position: relative;
+`;
+var SwitchInput = import_styled25.default.input`
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+
+  // to overlap SwitchBox and occupy the same space
+  z-index: 1;
+  margin: 0;
+  width: ${(props) => sizes2[props.switchSize].switchWidth}px;
+  height: ${(props) => sizes2[props.switchSize].switchHeight}px;
+
+  &:focus-visible ~ .SwitchBox {
+    ${getFocusRing()};
+  }
+  &:not(:checked) {
+    & + .SwitchBox {
+      background-color: ${colorStyles.track.inactive.enabled};
+    }
+    &:disabled + .SwitchBox {
+      background-color: ${colorStyles.track.inactive.disabled};
+    }
+  }
+  &:checked {
+    & + .SwitchBox {
+      background-color: ${colorStyles.track.active.enabled};
+    }
+    &:disabled + .SwitchBox {
+      background-color: ${colorStyles.track.active.disabled};
+    }
+    & + .SwitchBox:after {
+      transform: translateX(${(props) => getKnobTravel(props)}px);
+    }
+  }
+  &:disabled {
+    pointer-events: none;
+  }
+`;
+var SwitchBox = import_styled25.default.div`
+  width: ${(props) => sizes2[props.switchSize].switchWidth}px;
+  height: ${(props) => sizes2[props.switchSize].switchHeight}px;
+  position: relative;
+  border-radius: var(--lns-radius-full);
+  transition: 0.2s;
+  cursor: ${(props) => props.isDisabled ? "default" : "pointer"};
+  &:after {
+    content: '';
+    position: absolute;
+    top: ${(props) => sizes2[props.switchSize].knobOffset}px;
+    left: ${(props) => sizes2[props.switchSize].knobOffset}px;
+    width: ${(props) => getKnobSize(props)}px;
+    height: ${(props) => getKnobSize(props)}px;
+    border-radius: var(--lns-radius-full);
+    transition: 0.15s;
+    background-color: ${(props) => props.isDisabled ? colorStyles.knob.active.disabled : colorStyles.knob.active.enabled};
+  }
+`;
+var Switch = (_a) => {
+  var _b = _a, {
+    isActive,
+    isDisabled,
+    onChange,
+    size = "medium",
+    ariaLabelledby,
+    ariaLabel
+  } = _b, props = __objRest(_b, [
+    "isActive",
+    "isDisabled",
+    "onChange",
+    "size",
+    "ariaLabelledby",
+    "ariaLabel"
+  ]);
+  if (ariaLabelledby && ariaLabel) {
+    throw new Error(
+      "ariaLabelledby and ariaLabel serve the same purpose and therefore cannot be used at the same time. Choose the one that best suites your needs."
+    );
+  }
+  return /* @__PURE__ */ import_react32.default.createElement(SwitchLabel, null, /* @__PURE__ */ import_react32.default.createElement(
+    SwitchInput,
+    __spreadProps(__spreadValues({}, props), {
+      checked: isActive,
+      disabled: isDisabled,
+      onChange,
+      type: "checkbox",
+      switchSize: size,
+      "aria-labelledby": ariaLabelledby,
+      "aria-label": ariaLabel,
+      "aria-checked": isActive
+    })
+  ), /* @__PURE__ */ import_react32.default.createElement(
+    SwitchBox,
     {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M13 11v5.2h-2V11h2zM10.5 8.8A1.5 1.5 0 0112 7.3h.01a1.5 1.5 0 010 3H12a1.5 1.5 0 01-1.5-1.5z",
-      fill: "currentColor"
+      className: "SwitchBox",
+      isDisabled,
+      isActive,
+      switchSize: size
     }
   ));
-}
+};
+var switch_default = Switch;
 
-// src/components/icon/available-icons/warning-alert.tsx
-var import_react28 = __toESM(require("react"));
-var SvgWarningAlert = (props) => /* @__PURE__ */ import_react28.default.createElement("svg", __spreadValues({ viewBox: "0 0 24 24", fill: "none" }, props), /* @__PURE__ */ import_react28.default.createElement(
-  "path",
-  {
-    fill: "currentColor",
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M7.42 2.293A1 1 0 0 1 8.127 2h7.245a1 1 0 0 1 .708.293l5.127 5.127a1 1 0 0 1 .293.707v7.245a1 1 0 0 1-.293.708l-5.127 5.127a1 1 0 0 1-.707.293H8.128a1 1 0 0 1-.708-.293L2.293 16.08A1 1 0 0 1 2 15.373V8.128a1 1 0 0 1 .293-.708L7.42 2.293ZM8.542 4 4 8.542v6.416L8.542 19.5h6.416l4.542-4.542V8.542L14.958 4H8.542Zm2.208 11.25a1 1 0 0 1 1-1h.009a1 1 0 1 1 0 2h-.009a1 1 0 0 1-1-1Zm2-7a1 1 0 1 0-2 0v3.5a1 1 0 1 0 2 0v-3.5Z"
+// src/components/form-field/form-field.tsx
+var directionStyles = {
+  row: {
+    wrapper: {
+      display: "grid",
+      gridTemplateColumns: "auto 1fr",
+      alignItems: "center"
+    },
+    label: { marginLeft: "var(--lns-space-small)" },
+    errorMessage: { marginLeft: "var(--lns-space-small)" }
+  },
+  column: {
+    wrapper: {},
+    label: { marginBottom: "var(--lns-space-xsmall)" }
   }
-));
+};
+var FormFieldWrapper = import_styled26.default.div`
+  ${(props) => props.direction && directionStyles[props.direction].wrapper};
+`;
+var Label = import_styled26.default.label`
+  display: block;
+  ${(props) => props.direction && directionStyles[props.direction].label};
+  ${(props) => props.isLabelClickable && "cursor: pointer"};
+`;
+var ErrorMessage = import_styled26.default.span`
+  color: var(--lns-color-red);
+  margin-top: var(--lns-space-xsmall);
+  display: block;
+  width: 100%;
+  grid-column-start: 1;
+  grid-column-end: 3;
+`;
+var interactiveComponents = [
+  radio_default,
+  checkbox_default,
+  switch_default
+];
+var isInteractiveComponent = (component) => {
+  return interactiveComponents.includes(component);
+};
+var FormField = (_a) => {
+  var _b = _a, {
+    label,
+    children,
+    errorMessage,
+    labelFor,
+    direction = "column"
+  } = _b, props = __objRest(_b, [
+    "label",
+    "children",
+    "errorMessage",
+    "labelFor",
+    "direction"
+  ]);
+  const isLabelClickable = import_react33.default.Children.toArray(children).some(
+    (child) => (0, import_react33.isValidElement)(child) && // The child might be a div, span, etc (type string) so we
+    // have to typeguard before we check if our child is of interactive
+    typeof child.type !== "string" && isInteractiveComponent(child.type)
+  );
+  const labelElement = label && /* @__PURE__ */ import_react33.default.createElement(
+    Label,
+    {
+      direction,
+      htmlFor: labelFor,
+      isLabelClickable
+    },
+    label
+  );
+  return /* @__PURE__ */ import_react33.default.createElement(FormFieldWrapper, __spreadValues({ direction }, props), direction === "row" && /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, children, labelElement), direction === "column" && /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, labelElement, children), errorMessage && /* @__PURE__ */ import_react33.default.createElement(ErrorMessage, null, errorMessage));
+};
+var form_field_default = FormField;
+
+// src/components/notification-bar/notification-bar.tsx
+var import_styled27 = __toESM(require("@emotion/styled"));
+var import_react38 = __toESM(require("react"));
 
 // src/hooks/use-on-click-outside.js
-var import_react29 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 function useOnClickOutside(ref, handler) {
-  import_react29.default.useEffect(() => {
+  import_react34.default.useEffect(() => {
     const listener = (event) => {
       if (!ref.current || ref.current.contains(event.target)) {
         return;
@@ -4435,10 +5109,10 @@ function useOnClickOutside(ref, handler) {
 }
 
 // src/hooks/use-focused-element.tsx
-var import_react30 = require("react");
+var import_react35 = require("react");
 function useFocusedElement(ref) {
-  const [isFocused, setIsFocused] = (0, import_react30.useState)(false);
-  const handleFocus = (0, import_react30.useCallback)(
+  const [isFocused, setIsFocused] = (0, import_react35.useState)(false);
+  const handleFocus = (0, import_react35.useCallback)(
     (e) => {
       const currentRef = ref.current;
       if (e.type === "focusin" && e.target === currentRef) {
@@ -4447,7 +5121,7 @@ function useFocusedElement(ref) {
     },
     [ref]
   );
-  const handleBlur = (0, import_react30.useCallback)(
+  const handleBlur = (0, import_react35.useCallback)(
     (e) => {
       const currentRef = ref.current;
       if (e.type === "focusout" && e.target === currentRef) {
@@ -4456,7 +5130,7 @@ function useFocusedElement(ref) {
     },
     [ref]
   );
-  (0, import_react30.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     document.addEventListener("focusin", handleFocus);
     document.addEventListener("focusout", handleBlur);
     return () => {
@@ -4468,10 +5142,10 @@ function useFocusedElement(ref) {
 }
 
 // src/hooks/use-push-page-down.ts
-var import_react31 = require("react");
+var import_react36 = require("react");
 function usePushPageDown(enabled) {
   const safeDocument = document;
-  (0, import_react31.useLayoutEffect)(() => {
+  (0, import_react36.useLayoutEffect)(() => {
     const html = safeDocument == null ? void 0 : safeDocument.documentElement;
     const body = safeDocument == null ? void 0 : safeDocument.body;
     if (safeDocument == void 0 || !html || !body) {
@@ -4488,35 +5162,54 @@ function usePushPageDown(enabled) {
 }
 var use_push_page_down_default = usePushPageDown;
 
+// src/components/icon/available-icons/info.tsx
+var import_information_circle = __toESM(require("@atlaskit/icon/core/information-circle"));
+var React34 = __toESM(require("react"));
+function SvgInfo() {
+  return /* @__PURE__ */ React34.createElement(import_information_circle.default, { label: "", testId: "ads-refreshed-icon" });
+}
+
+// src/components/icon/available-icons/warning-alert.tsx
+var import_react37 = __toESM(require("react"));
+var SvgWarningAlert = (props) => /* @__PURE__ */ import_react37.default.createElement("svg", __spreadValues({ viewBox: "0 0 24 24", fill: "none" }, props), /* @__PURE__ */ import_react37.default.createElement(
+  "path",
+  {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M7.42 2.293A1 1 0 0 1 8.127 2h7.245a1 1 0 0 1 .708.293l5.127 5.127a1 1 0 0 1 .293.707v7.245a1 1 0 0 1-.293.708l-5.127 5.127a1 1 0 0 1-.707.293H8.128a1 1 0 0 1-.708-.293L2.293 16.08A1 1 0 0 1 2 15.373V8.128a1 1 0 0 1 .293-.708L7.42 2.293ZM8.542 4 4 8.542v6.416L8.542 19.5h6.416l4.542-4.542V8.542L14.958 4H8.542Zm2.208 11.25a1 1 0 0 1 1-1h.009a1 1 0 1 1 0 2h-.009a1 1 0 0 1-1-1Zm2-7a1 1 0 1 0-2 0v3.5a1 1 0 1 0 2 0v-3.5Z"
+  }
+));
+
 // src/components/notification-bar/notification-bar.tsx
 var severityStyles = {
   info: {
     bgColor: "var(--lns-color-blurple)",
-    icon: /* @__PURE__ */ import_react32.default.createElement(SvgInfo, null),
+    icon: /* @__PURE__ */ import_react38.default.createElement(SvgInfo, null),
     color: "var(--lns-color-white)",
     fontFamily: "inherit"
   },
   warning: {
     bgColor: "var(--lns-color-warning)",
-    icon: /* @__PURE__ */ import_react32.default.createElement(SvgWarningAlert, null),
+    icon: /* @__PURE__ */ import_react38.default.createElement(SvgWarningAlert, null),
     color: "var(--lns-color-grey8)",
     fontFamily: "inherit"
   },
   error: {
     bgColor: "var(--lns-color-danger)",
-    icon: /* @__PURE__ */ import_react32.default.createElement(SvgAlertTriangle, null),
+    icon: /* @__PURE__ */ import_react38.default.createElement(SvgAlertTriangle, null),
     color: "var(--lns-color-white)",
     fontFamily: "inherit"
   },
   internal: {
-    icon: /* @__PURE__ */ import_react32.default.createElement("span", { role: "img" }, "\u{1F514}"),
-    color: "var(--lns-color-teal)",
+    icon: /* @__PURE__ */ import_react38.default.createElement("span", { role: "img" }, "\u{1F514}"),
+    color: "var(--lns-color-tealLight)",
     bgColor: "var(--lns-color-grey8)",
-    fontFamily: "Roboto Mono, Lucida Mono, monospace"
+    fontFamily: "var(--lns-fontFamily-code)"
   }
 };
 var DURATION = 350;
-var NotificationBarWrapper = import_styled25.default.aside`
+var NotificationBarWrapper = import_styled27.default.aside`
   --paddingXOffset: var(--lns-space-large);
   --alignItems: start;
 
@@ -4532,7 +5225,9 @@ var NotificationBarWrapper = import_styled25.default.aside`
   padding: var(--lns-space-medium) var(--paddingXOffset);
   top: 0;
   left: 0;
-  transition: ${DURATION}ms box-shadow, ${DURATION}ms transform;
+  transition:
+    ${DURATION}ms box-shadow,
+    ${DURATION}ms transform;
   width: 100%;
   box-sizing: border-box;
   z-index: 1100;
@@ -4550,7 +5245,7 @@ var NotificationBar = ({
   id
 }) => {
   var _a, _b, _c;
-  (0, import_react32.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (!isOpen) {
       return;
     }
@@ -4567,7 +5262,7 @@ var NotificationBar = ({
   }, [isOpen, onCloseClick]);
   use_push_page_down_default(isOpen);
   const isInternalAlert = severity === "internal";
-  return isOpen ? /* @__PURE__ */ import_react32.default.createElement(NotificationBarWrapper, { isOpen, severity, id }, /* @__PURE__ */ import_react32.default.createElement(
+  return isOpen ? /* @__PURE__ */ import_react38.default.createElement(NotificationBarWrapper, { isOpen, severity, id }, /* @__PURE__ */ import_react38.default.createElement(
     arrange_default,
     {
       alignItems: { default: "start", small: "center" },
@@ -4575,21 +5270,21 @@ var NotificationBar = ({
       autoFlow: isInternalAlert ? "column" : void 0,
       columns: !isInternalAlert ? ["1fr auto"] : void 0
     },
-    /* @__PURE__ */ import_react32.default.createElement(
+    /* @__PURE__ */ import_react38.default.createElement(
       container_default,
       {
         paddingY: { default: "xsmall", xsmall: 0 },
         paddingLeft: !isInternalAlert ? { default: 0, medium: u(3.5) } : void 0,
         width: "100%"
       },
-      /* @__PURE__ */ import_react32.default.createElement(
+      /* @__PURE__ */ import_react38.default.createElement(
         arrange_default,
         {
           autoFlow: "column",
           gap: isInternalAlert ? "medium" : "small",
           justifyContent: "center"
         },
-        ((_a = severityStyles[severity]) == null ? void 0 : _a.icon) ? /* @__PURE__ */ import_react32.default.createElement(align_default, { alignment: "topLeft" }, /* @__PURE__ */ import_react32.default.createElement(
+        ((_a = severityStyles[severity]) == null ? void 0 : _a.icon) ? /* @__PURE__ */ import_react38.default.createElement(align_default, { alignment: "topLeft" }, /* @__PURE__ */ import_react38.default.createElement(
           icon_default,
           {
             icon: severityStyles[severity].icon,
@@ -4600,13 +5295,13 @@ var NotificationBar = ({
         children
       )
     )
-  ), onCloseClick && /* @__PURE__ */ import_react32.default.createElement(
+  ), onCloseClick && /* @__PURE__ */ import_react38.default.createElement(
     icon_button_default,
     {
       iconColor: (_c = severityStyles[severity].color) != null ? _c : "var(--lns-color-white)",
       tabIndex: 0,
       altText: "Close",
-      icon: /* @__PURE__ */ import_react32.default.createElement(SvgClose, null),
+      icon: /* @__PURE__ */ import_react38.default.createElement(SvgClose, null),
       onClick: onCloseClick
     }
   )) : null;
@@ -4614,13 +5309,13 @@ var NotificationBar = ({
 var notification_bar_default = NotificationBar;
 
 // src/components/toast/toast.tsx
-var import_react33 = __toESM(require("react"));
-var import_core5 = require("@emotion/core");
-var import_styled26 = __toESM(require("@emotion/styled"));
+var import_react39 = require("@emotion/react");
+var import_styled28 = __toESM(require("@emotion/styled"));
+var import_react40 = __toESM(require("react"));
 var WEBAPP = "web-app";
 var CHROME_EXTENSION = "chrome-extension";
 var toastDurations = { short: 3e3, long: 8e3 };
-var enter = (toastDuration, platform) => import_core5.keyframes`
+var enter = (toastDuration, platform) => import_react39.keyframes`
   0% {
     opacity: 0;
     transform: translate(-50%, ${u(platform === CHROME_EXTENSION ? -8 : 8)});
@@ -4658,15 +5353,15 @@ var getBottom = (platform) => {
       return u(4);
   }
 };
-var ToastWrapper = import_styled26.default.div`
+var ToastWrapper = import_styled28.default.div`
   animation: ${(props) => enter(props.toastDuration, props.platform)}
     ${(props) => props.toastDuration}ms forwards;
-  background-color: ${getColorValue("background")};
-  border-radius: 1.75rem; // Height of single line toast (56px) divided by 2 so one line toasts appear fully rounded
+  background-color: ${getColorValue("backgroundInverse")};
+  ${getRadius("250")};
   top: ${(props) => getTop(props.platform)};
   bottom: ${(props) => getBottom(props.platform)};
   ${getShadow("large")};
-  color: ${getColorValue("body")};
+  color: ${getColorValue("bodyInverse")};
   display: grid;
   grid-auto-flow: column;
   gap: var(--lns-space-small);
@@ -4680,7 +5375,7 @@ var ToastWrapper = import_styled26.default.div`
   width: max-content;
   z-index: ${(props) => props.zIndex};
 `;
-var ChildrenSection3 = import_styled26.default.div`
+var ChildrenSection3 = import_styled28.default.div`
   align-self: center;
 `;
 var Toast = ({
@@ -4692,7 +5387,7 @@ var Toast = ({
   platform = "web-app"
 }) => {
   const toastDuration = toastDurations[duration2];
-  (0, import_react33.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     const timer = setTimeout(() => {
       if (isOpen) {
         onCloseClick();
@@ -4700,23 +5395,23 @@ var Toast = ({
     }, toastDuration);
     return () => clearTimeout(timer);
   }, [isOpen]);
-  return /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, isOpen && /* @__PURE__ */ import_react33.default.createElement(
+  return /* @__PURE__ */ import_react40.default.createElement(import_react40.default.Fragment, null, isOpen && /* @__PURE__ */ import_react40.default.createElement(
     ToastWrapper,
     {
-      "data-lens-theme": "dark",
       onClick: (e) => e.stopPropagation(),
       zIndex,
       isOpen,
       toastDuration,
       platform
     },
-    /* @__PURE__ */ import_react33.default.createElement(ChildrenSection3, { "aria-live": "polite" }, children),
-    onCloseClick && /* @__PURE__ */ import_react33.default.createElement(
+    /* @__PURE__ */ import_react40.default.createElement(ChildrenSection3, { "aria-live": "polite" }, children),
+    onCloseClick && /* @__PURE__ */ import_react40.default.createElement(
       icon_button_default,
       {
         altText: "Close",
-        icon: /* @__PURE__ */ import_react33.default.createElement(SvgClose, null),
-        onClick: onCloseClick
+        icon: /* @__PURE__ */ import_react40.default.createElement(SvgClose, null),
+        onClick: onCloseClick,
+        iconColor: "bodyInverse"
       }
     )
   ));
@@ -4724,10 +5419,10 @@ var Toast = ({
 var toast_default = Toast;
 
 // src/components/tooltip/tooltip.tsx
-var import_react34 = __toESM(require("react"));
+var import_styled29 = __toESM(require("@emotion/styled"));
+var import_react41 = __toESM(require("react"));
 var import_react_laag3 = require("react-laag");
 var import_resize_observer_polyfill3 = __toESM(require("resize-observer-polyfill"));
-var import_styled27 = __toESM(require("@emotion/styled"));
 var placements = {
   topLeft: "top-start",
   topCenter: "top-center",
@@ -4745,10 +5440,10 @@ var placements = {
 var tooltipMinHeight = 4;
 var textHeight = textSizes.small.fontSize * textSizes.small.lineHeight;
 var tooltipYPadding = (tooltipMinHeight - textHeight) / 2;
-var TooltipBoxWrapper = import_styled27.default.div`
-  background-color: ${getColorValue("background")};
-  color: ${getColorValue("body")};
-  ${getRadius("large")};
+var TooltipBoxWrapper = import_styled29.default.div`
+  background-color: ${getColorValue("backgroundInverse")};
+  color: ${getColorValue("bodyInverse")};
+  ${getRadius("150")};
   ${getFontWeight("bold")};
   ${getTextSize("small")};
   ${getShadow("medium")};
@@ -4757,8 +5452,8 @@ var TooltipBoxWrapper = import_styled27.default.div`
   padding: ${u(tooltipYPadding)} ${u(1.5)};
   z-index: ${(props) => props.zIndex};
 `;
-var ShortcutWrapper = import_styled27.default.div`
-  background-color: ${getColorValue("backgroundActive")};
+var ShortcutWrapper = import_styled29.default.div`
+  background-color: ${getColorValue("grey7")};
   border-radius: 3px;
   color: ${getColorValue("grey3")};
   ${getFontWeight("bold")};
@@ -4768,7 +5463,7 @@ var ShortcutWrapper = import_styled27.default.div`
 `;
 var ShortcutBox = ({
   children
-}) => /* @__PURE__ */ import_react34.default.createElement(ShortcutWrapper, null, children);
+}) => /* @__PURE__ */ import_react41.default.createElement(ShortcutWrapper, null, children);
 var TooltipBox = (_a) => {
   var _b = _a, {
     children,
@@ -4785,10 +5480,9 @@ var TooltipBox = (_a) => {
     "layerProps",
     "zIndex"
   ]);
-  return /* @__PURE__ */ import_react34.default.createElement(
+  return /* @__PURE__ */ import_react41.default.createElement(
     TooltipBoxWrapper,
     __spreadValues(__spreadValues({
-      "data-lens-theme": "dark",
       maxWidth,
       onMouseEnter,
       onMouseLeave,
@@ -4797,7 +5491,7 @@ var TooltipBox = (_a) => {
     children
   );
 };
-var TooltipChildren = import_styled27.default.div`
+var TooltipChildren = import_styled29.default.div`
   display: ${(props) => props.isInline ? "inline-block" : "block"};
   ${(props) => props.verticalAlign && `vertical-align: ${props.verticalAlign}`};
   &:focus-visible {
@@ -4833,7 +5527,8 @@ var Tooltip = (_a) => {
     tabIndex = 0,
     zIndex = 1100,
     verticalAlign = "middle",
-    delay = "immediate"
+    delay = "immediate",
+    tooltipId
   } = _b, rest = __objRest(_b, [
     "ariaLive",
     "children",
@@ -4849,259 +5544,137 @@ var Tooltip = (_a) => {
     "tabIndex",
     "zIndex",
     "verticalAlign",
-    "delay"
+    "delay",
+    "tooltipId"
   ]);
   const [show, hoverProps] = (0, import_react_laag3.useHover)({
     delayEnter: getInitialDelaySpeed(delay),
     delayLeave: 200
   });
-  const [isOverTooltip, setIsOverTooltip] = (0, import_react34.useState)(false);
-  const [isOpen, setIsOpen] = (0, import_react34.useState)(false);
-  const focusRef = (0, import_react34.useRef)();
+  const [isOverTooltip, setIsOverTooltip] = (0, import_react41.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react41.useState)(false);
+  const focusRef = (0, import_react41.useRef)();
   const isTooltipDisabled = !content || isDisabled;
-  (0, import_react34.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (isTooltipDisabled) {
       setIsOpen(false);
       return;
     }
     const keepTooltipOpenOnHover = isOverTooltip && keepOpen;
-    if (show || keepTooltipOpenOnHover) {
-      setIsOpen(true);
-    }
-    if (!show && !keepTooltipOpenOnHover) {
-      setIsOpen(false);
-    }
-  }, [
-    content,
-    isDisabled,
-    isOverTooltip,
-    isTooltipDisabled,
-    keepOpen,
-    setIsOpen,
-    show
-  ]);
-  const handleFocus = () => {
-    if (!isTooltipDisabled) {
-      setIsOpen(true);
-    }
-  };
-  const handleBlur = () => {
-    setIsOpen(false);
-  };
-  (0, import_react34.useEffect)(() => {
-    if (!isOpen) {
-      return;
-    }
-    const keyListener = (e) => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        handleBlur();
-      }
-    };
-    window.addEventListener("keydown", keyListener);
-    return () => {
-      window.removeEventListener("keydown", keyListener);
-    };
-  }, [isOpen, setIsOpen]);
-  const { layerProps, triggerProps, renderLayer } = (0, import_react_laag3.useLayer)({
-    isOpen,
-    placement: placements[placement],
-    ResizeObserver: import_resize_observer_polyfill3.default,
-    triggerOffset,
-    container,
-    auto: true
-  });
-  return /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, /* @__PURE__ */ import_react34.default.createElement(
-    TooltipChildren,
-    __spreadProps(__spreadValues(__spreadValues({}, triggerProps), hoverProps), {
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      isInline,
-      verticalAlign,
-      tabIndex: isTooltipDisabled ? -1 : tabIndex,
-      ref: (0, import_react_laag3.mergeRefs)(triggerProps.ref, focusRef)
-    }),
-    children
-  ), ariaLive && /* @__PURE__ */ import_react34.default.createElement("span", { className: "srOnly", "aria-live": "polite" }, isOpen && content), isOpen && renderLayer(
-    /* @__PURE__ */ import_react34.default.createElement("div", __spreadProps(__spreadValues({}, layerProps), { style: __spreadProps(__spreadValues({}, layerProps.style), { zIndex }) }), /* @__PURE__ */ import_react34.default.createElement(
-      TooltipBox,
-      __spreadValues({
-        maxWidth,
-        onMouseEnter: () => setIsOverTooltip(true),
-        onMouseLeave: () => setIsOverTooltip(false)
-      }, rest),
-      /* @__PURE__ */ import_react34.default.createElement(arrange_default, { gap: "small" }, /* @__PURE__ */ import_react34.default.createElement(text_default, { size: "small", fontWeight: "bold" }, content), shortcut && /* @__PURE__ */ import_react34.default.createElement(arrange_default, { gap: "xsmall" }, shortcut.map((char, index) => /* @__PURE__ */ import_react34.default.createElement(ShortcutBox, { key: index }, char))))
-    ))
-  ));
-};
-var availablePlacements = Object.keys(placements);
-var tooltip_default = Tooltip;
-
-// src/components/switch/switch.tsx
-var import_react35 = __toESM(require("react"));
-var import_styled28 = __toESM(require("@emotion/styled"));
-var sizes2 = {
-  medium: {
-    switchHeight: 16,
-    switchWidth: 32,
-    knobOffset: 2
-  },
-  large: {
-    switchHeight: 28,
-    switchWidth: 56,
-    knobOffset: 4
-  }
-};
-var colorStyles = {
-  knob: {
-    active: {
-      enabled: getColorValue("white"),
-      disabled: getColorValue("disabledContent")
-    },
-    inactive: {
-      enabled: getColorValue("white"),
-      disabled: getColorValue("disabledContent")
-    }
-  },
-  track: {
-    active: {
-      enabled: getColorValue("blurple"),
-      disabled: getColorValue("disabledBackground")
-    },
-    inactive: {
-      enabled: getColorValue("grey6"),
-      disabled: getColorValue("disabledBackground")
-    }
-  }
-};
-var getKnobTravel = (props) => {
-  return sizes2[props.switchSize].switchWidth - sizes2[props.switchSize].switchHeight;
-};
-var getKnobSize = (props) => {
-  return sizes2[props.switchSize].switchHeight - sizes2[props.switchSize].knobOffset * 2;
-};
-var SwitchLabel = import_styled28.default.label`
-  display: block;
-  position: relative;
-`;
-var SwitchInput = import_styled28.default.input`
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-
-  // to overlap SwitchBox and occupy the same space
-  z-index: 1;
-  margin: 0;
-  width: ${(props) => sizes2[props.switchSize].switchWidth}px;
-  height: ${(props) => sizes2[props.switchSize].switchHeight}px;
-
-  &:focus-visible ~ .SwitchBox {
-    ${getFocusRing()};
-  }
-  &:not(:checked) {
-    & + .SwitchBox {
-      background-color: ${colorStyles.track.inactive.enabled};
-    }
-    &:disabled + .SwitchBox {
-      background-color: ${colorStyles.track.inactive.disabled};
-    }
-  }
-  &:checked {
-    & + .SwitchBox {
-      background-color: ${colorStyles.track.active.enabled};
-    }
-    &:disabled + .SwitchBox {
-      background-color: ${colorStyles.track.active.disabled};
-    }
-    & + .SwitchBox:after {
-      transform: translateX(${(props) => getKnobTravel(props)}px);
-    }
-  }
-  &:disabled {
-    pointer-events: none;
-  }
-`;
-var SwitchBox = import_styled28.default.div`
-  width: ${(props) => sizes2[props.switchSize].switchWidth}px;
-  height: ${(props) => sizes2[props.switchSize].switchHeight}px;
-  position: relative;
-  border-radius: var(--lns-radius-full);
-  transition: 0.2s;
-  cursor: ${(props) => props.isDisabled ? "default" : "pointer"};
-  &:after {
-    content: '';
-    position: absolute;
-    top: ${(props) => sizes2[props.switchSize].knobOffset}px;
-    left: ${(props) => sizes2[props.switchSize].knobOffset}px;
-    width: ${(props) => getKnobSize(props)}px;
-    height: ${(props) => getKnobSize(props)}px;
-    border-radius: var(--lns-radius-full);
-    transition: 0.15s;
-    background-color: ${(props) => props.isDisabled ? colorStyles.knob.active.disabled : colorStyles.knob.active.enabled};
-  }
-`;
-var Switch = (_a) => {
-  var _b = _a, {
-    isActive,
-    isDisabled,
-    onChange,
-    size = "medium",
-    ariaLabelledby,
-    ariaLabel
-  } = _b, props = __objRest(_b, [
-    "isActive",
-    "isDisabled",
-    "onChange",
-    "size",
-    "ariaLabelledby",
-    "ariaLabel"
+    if (show || keepTooltipOpenOnHover) {
+      setIsOpen(true);
+    }
+    if (!show && !keepTooltipOpenOnHover) {
+      setIsOpen(false);
+    }
+  }, [
+    content,
+    isDisabled,
+    isOverTooltip,
+    isTooltipDisabled,
+    keepOpen,
+    setIsOpen,
+    show
   ]);
-  if (ariaLabelledby && ariaLabel) {
-    throw new Error(
-      "ariaLabelledby and ariaLabel serve the same purpose and therefore cannot be used at the same time. Choose the one that best suites your needs."
-    );
-  }
-  return /* @__PURE__ */ import_react35.default.createElement(SwitchLabel, null, /* @__PURE__ */ import_react35.default.createElement(
-    SwitchInput,
-    __spreadProps(__spreadValues({}, props), {
-      checked: isActive,
-      disabled: isDisabled,
-      onChange,
-      type: "checkbox",
-      switchSize: size,
-      "aria-labelledby": ariaLabelledby,
-      "aria-label": ariaLabel,
-      "aria-checked": isActive
-    })
-  ), /* @__PURE__ */ import_react35.default.createElement(
-    SwitchBox,
-    {
-      className: "SwitchBox",
-      isDisabled,
-      isActive,
-      switchSize: size
+  const handleFocus = () => {
+    if (!isTooltipDisabled) {
+      setIsOpen(true);
+    }
+  };
+  const handleBlur = () => {
+    setIsOpen(false);
+  };
+  (0, import_react41.useEffect)(() => {
+    if (!isOpen) {
+      return;
     }
+    const keyListener = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        handleBlur();
+      }
+    };
+    window.addEventListener("keydown", keyListener);
+    return () => {
+      window.removeEventListener("keydown", keyListener);
+    };
+  }, [isOpen, setIsOpen]);
+  const { layerProps, triggerProps, renderLayer } = (0, import_react_laag3.useLayer)({
+    isOpen,
+    placement: placements[placement],
+    ResizeObserver: import_resize_observer_polyfill3.default,
+    triggerOffset,
+    container,
+    auto: true
+  });
+  return /* @__PURE__ */ import_react41.default.createElement(import_react41.default.Fragment, null, /* @__PURE__ */ import_react41.default.createElement(
+    TooltipChildren,
+    __spreadProps(__spreadValues(__spreadValues({}, triggerProps), hoverProps), {
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      isInline,
+      verticalAlign,
+      tabIndex: isTooltipDisabled ? -1 : tabIndex,
+      ref: (0, import_react_laag3.mergeRefs)(triggerProps.ref, focusRef)
+    }),
+    children
+  ), ariaLive && /* @__PURE__ */ import_react41.default.createElement("span", { className: "srOnly", "aria-live": "polite" }, isOpen && content), isOpen && renderLayer(
+    /* @__PURE__ */ import_react41.default.createElement("div", __spreadProps(__spreadValues({}, layerProps), { style: __spreadProps(__spreadValues({}, layerProps.style), { zIndex }) }), /* @__PURE__ */ import_react41.default.createElement(
+      TooltipBox,
+      __spreadValues({
+        maxWidth,
+        onMouseEnter: () => setIsOverTooltip(true),
+        onMouseLeave: () => setIsOverTooltip(false),
+        role: "tooltip",
+        id: tooltipId
+      }, rest),
+      /* @__PURE__ */ import_react41.default.createElement(arrange_default, { gap: "small" }, /* @__PURE__ */ import_react41.default.createElement(text_default, { size: "small", fontWeight: "bold" }, content), shortcut && /* @__PURE__ */ import_react41.default.createElement(arrange_default, { gap: "xsmall" }, shortcut.map((char, index) => /* @__PURE__ */ import_react41.default.createElement(ShortcutBox, { key: index }, char))))
+    ))
   ));
 };
-var switch_default = Switch;
+var availablePlacements = Object.keys(placements);
+var tooltip_default = Tooltip;
 
-// src/components/skeleton-text/skeleton-text.tsx
-var import_react36 = __toESM(require("react"));
-var import_styled29 = __toESM(require("@emotion/styled"));
-var SkeletonTextWrapper = import_styled29.default.div`
+// src/components/skeleton/skeleton.tsx
+var import_react42 = require("@emotion/react");
+var import_styled30 = __toESM(require("@emotion/styled"));
+var import_react43 = __toESM(require("react"));
+var SkeletonAnimation = import_react42.css`
+  @media (prefers-reduced-motion: no-preference) {
+    animation: shimmer 2s infinite linear;
+    background: linear-gradient(
+      to right,
+      var(--lns-color-disabledBackground) 4%,
+      var(--lns-color-backgroundHover) 25%,
+      var(--lns-color-disabledBackground) 36%
+    );
+    background-size: 1000px 100%;
+    @keyframes shimmer {
+      0% {
+        background-position: -1000px 0;
+      }
+      100% {
+        background-position: 1000px 0;
+      }
+    }
+  }
+`;
+var SkeletonTextWrapper = import_styled30.default.div`
   ${(props) => getTextSize(props.size)};
   color: transparent;
   position: relative;
   &::after {
-    content '';
+    content: '';
     position: absolute;
     background-color: var(--lns-color-disabledBackground);
     border-radius: var(--lns-radius-full);
     width: 100%;
     display: block;
     height: 71.45%;
-    top: .2em;
+    top: 0.2em;
+    ${(props) => props.animated && SkeletonAnimation}
   }
+
   ${(props) => props.lines > 1 && `
       &:nth-of-type(3n+1) {
         width: calc(100% - 2.25rem);
@@ -5112,19 +5685,51 @@ var SkeletonTextWrapper = import_styled29.default.div`
     }
   `};
 `;
+var SkeletonContainerWrapper = import_styled30.default.div`
+  background-color: var(--lns-color-disabledBackground);
+  ${(props) => getRadius(props.radius)};
+  height: ${(props) => props.height};
+  width: ${(props) => props.width};
+  ${(props) => props.animated && SkeletonAnimation}
+`;
 var SkeletonText = ({
   size = "body-md",
-  lines = 1
+  lines = 1,
+  animated = false
+}) => {
+  return /* @__PURE__ */ import_react43.default.createElement(import_react43.default.Fragment, null, [...Array(lines)].map((_, i) => /* @__PURE__ */ import_react43.default.createElement(
+    SkeletonTextWrapper,
+    {
+      key: i,
+      size,
+      lines,
+      animated
+    },
+    "Loading"
+  )));
+};
+var SkeletonContainer = ({
+  animated = false,
+  height = "40px",
+  radius = "full",
+  width = "40px"
 }) => {
-  return /* @__PURE__ */ import_react36.default.createElement(import_react36.default.Fragment, null, [...Array(lines)].map((_, i) => /* @__PURE__ */ import_react36.default.createElement(SkeletonTextWrapper, { key: i, size, lines }, "Loading")));
+  return /* @__PURE__ */ import_react43.default.createElement(import_react43.default.Fragment, null, /* @__PURE__ */ import_react43.default.createElement(
+    SkeletonContainerWrapper,
+    {
+      animated,
+      height,
+      radius,
+      width
+    }
+  ));
 };
-var skeleton_text_default = SkeletonText;
 
 // src/components/logo/logo.tsx
-var import_react37 = __toESM(require("react"));
-var import_styled30 = __toESM(require("@emotion/styled"));
+var import_styled31 = __toESM(require("@emotion/styled"));
+var import_react44 = __toESM(require("react"));
 var LoomAiGradientDef = (customId) => {
-  return /* @__PURE__ */ import_react37.default.createElement("defs", null, /* @__PURE__ */ import_react37.default.createElement(
+  return /* @__PURE__ */ import_react44.default.createElement("defs", null, /* @__PURE__ */ import_react44.default.createElement(
     "radialGradient",
     {
       id: `ai-logo-${customId}-gradient-1`,
@@ -5134,12 +5739,12 @@ var LoomAiGradientDef = (customId) => {
       fx: "0%",
       fy: "0%"
     },
-    /* @__PURE__ */ import_react37.default.createElement("stop", { offset: "30%", stopColor: "#97ACFD" }),
-    /* @__PURE__ */ import_react37.default.createElement("stop", { offset: "33%", stopColor: "#B3B2F4" }),
-    /* @__PURE__ */ import_react37.default.createElement("stop", { offset: "43%", stopColor: "#DEB0E0" }),
-    /* @__PURE__ */ import_react37.default.createElement("stop", { offset: "50%", stopColor: "#DFC6E5" }),
-    /* @__PURE__ */ import_react37.default.createElement("stop", { offset: "72%", stopColor: "#6663F6" })
-  ), /* @__PURE__ */ import_react37.default.createElement(
+    /* @__PURE__ */ import_react44.default.createElement("stop", { offset: "30%", stopColor: "#97ACFD" }),
+    /* @__PURE__ */ import_react44.default.createElement("stop", { offset: "33%", stopColor: "#B3B2F4" }),
+    /* @__PURE__ */ import_react44.default.createElement("stop", { offset: "43%", stopColor: "#DEB0E0" }),
+    /* @__PURE__ */ import_react44.default.createElement("stop", { offset: "50%", stopColor: "#DFC6E5" }),
+    /* @__PURE__ */ import_react44.default.createElement("stop", { offset: "72%", stopColor: "#6663F6" })
+  ), /* @__PURE__ */ import_react44.default.createElement(
     "radialGradient",
     {
       id: `ai-logo-${customId}-gradient-2`,
@@ -5147,10 +5752,10 @@ var LoomAiGradientDef = (customId) => {
       fx: "40%",
       fy: "72%"
     },
-    /* @__PURE__ */ import_react37.default.createElement("stop", { offset: "20%", stopColor: "#615CF500" }),
-    /* @__PURE__ */ import_react37.default.createElement("stop", { offset: "32%", stopColor: "#615CF550" }),
-    /* @__PURE__ */ import_react37.default.createElement("stop", { offset: "48%", stopColor: "#6663F6" })
-  ), /* @__PURE__ */ import_react37.default.createElement(
+    /* @__PURE__ */ import_react44.default.createElement("stop", { offset: "20%", stopColor: "#615CF500" }),
+    /* @__PURE__ */ import_react44.default.createElement("stop", { offset: "32%", stopColor: "#615CF550" }),
+    /* @__PURE__ */ import_react44.default.createElement("stop", { offset: "48%", stopColor: "#6663F6" })
+  ), /* @__PURE__ */ import_react44.default.createElement(
     "radialGradient",
     {
       id: `ai-logo-${customId}-gradient-3`,
@@ -5158,9 +5763,9 @@ var LoomAiGradientDef = (customId) => {
       fx: "0%",
       fy: "100%"
     },
-    /* @__PURE__ */ import_react37.default.createElement("stop", { offset: "25%", stopColor: "#6663F6" }),
-    /* @__PURE__ */ import_react37.default.createElement("stop", { offset: "38%", stopColor: "#6E68F450" }),
-    /* @__PURE__ */ import_react37.default.createElement("stop", { offset: "45%", stopColor: "#6E68F400" })
+    /* @__PURE__ */ import_react44.default.createElement("stop", { offset: "25%", stopColor: "#6663F6" }),
+    /* @__PURE__ */ import_react44.default.createElement("stop", { offset: "38%", stopColor: "#6E68F450" }),
+    /* @__PURE__ */ import_react44.default.createElement("stop", { offset: "45%", stopColor: "#6E68F400" })
   ));
 };
 var symbolLogoPath = "M30 15.4433C30 16.6091 29.0933 16.8581 27.9562 16.9301C22.5158 17.2323 16.7962 22.686 16.4795 28.112C16.422 29.2634 16.173 30.1702 15.0072 30.1702C13.8414 30.1702 13.578 29.2634 13.5205 28.0976C13.2038 22.686 7.48416 17.2323 2.05814 16.9301C0.906735 16.8581 0 16.6091 0 15.4433C0 14.2775 0.906735 14.043 2.05814 13.971C7.48416 13.6687 13.2038 7.65433 13.5205 2.22831C13.578 1.0769 13.827 0.170166 15.0072 0.170166C16.1874 0.170166 16.422 1.0769 16.4795 2.22831C16.7962 7.65433 22.5158 13.6687 27.9419 13.971C29.0933 14.043 30 14.2919 30 15.4433Z";
@@ -5168,16 +5773,30 @@ var SymbolLogoSvg = (_a) => {
   var _b = _a, { brand, symbolColor, customId, title } = _b, props = __objRest(_b, ["brand", "symbolColor", "customId", "title"]);
   switch (brand) {
     case "ai":
-      return /* @__PURE__ */ import_react37.default.createElement("svg", __spreadValues({ viewBox: "0 0 30 31", fill: "none" }, props), title && /* @__PURE__ */ import_react37.default.createElement("title", null, title), !symbolColor ? /* @__PURE__ */ import_react37.default.createElement(import_react37.default.Fragment, null, LoomAiGradientDef(customId), [...Array(3)].map((_, i) => /* @__PURE__ */ import_react37.default.createElement(
+      return /* @__PURE__ */ import_react44.default.createElement("svg", __spreadValues({ viewBox: "0 0 30 31", fill: "none" }, props), title && /* @__PURE__ */ import_react44.default.createElement("title", null, title), !symbolColor ? /* @__PURE__ */ import_react44.default.createElement(import_react44.default.Fragment, null, LoomAiGradientDef(customId), [...Array(3)].map((_, i) => /* @__PURE__ */ import_react44.default.createElement(
         "path",
         {
           key: i,
           d: symbolLogoPath,
           fill: `url(#ai-logo-${customId}-gradient-${i + 1}`
         }
-      ))) : /* @__PURE__ */ import_react37.default.createElement("path", { d: symbolLogoPath, fill: getColorValue(symbolColor) }));
+      ))) : /* @__PURE__ */ import_react44.default.createElement("path", { d: symbolLogoPath, fill: getColorValue(symbolColor) }));
+    case "apptile":
+      return /* @__PURE__ */ import_react44.default.createElement("svg", __spreadValues({ viewBox: "0 0 40 40", fill: "none" }, props), title && /* @__PURE__ */ import_react44.default.createElement("title", null, title), /* @__PURE__ */ import_react44.default.createElement(
+        "path",
+        {
+          d: "M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z",
+          fill: symbolColor ? getColorValue(symbolColor) : getColorValue("blurple")
+        }
+      ), /* @__PURE__ */ import_react44.default.createElement(
+        "path",
+        {
+          d: "M32.3962 18.6213H25.1467L31.4251 14.9965L30.0463 12.6077L23.768 16.2325L27.392 9.95464L25.0032 8.57506L21.3792 14.8529V7.604H18.6215V14.8536L14.9961 8.57506L12.6081 9.95395L16.2327 16.2318L9.95437 12.6077L8.57552 14.9958L14.8539 18.6206H7.60449V21.3784H14.8532L8.57552 25.0032L9.95437 27.392L16.2321 23.7679L12.6074 30.0457L14.9961 31.4246L18.6208 25.1461V32.3957H21.3785V25.1468L25.0025 31.4246L27.3912 30.0457L23.7665 23.7672L30.0449 27.392L31.4238 25.0032L25.1461 21.3791H32.3947V18.6213H32.3962ZM20.0003 23.7505C17.921 23.7505 16.2355 22.0651 16.2355 19.9856C16.2355 17.9062 17.921 16.2207 20.0003 16.2207C22.0797 16.2207 23.7651 17.9062 23.7651 19.9856C23.7651 22.0651 22.0797 23.7505 20.0003 23.7505Z",
+          fill: "white"
+        }
+      ));
     default:
-      return /* @__PURE__ */ import_react37.default.createElement("svg", __spreadValues({ viewBox: "0 0 31 30", fill: "none" }, props), title && /* @__PURE__ */ import_react37.default.createElement("title", null, title), /* @__PURE__ */ import_react37.default.createElement(
+      return /* @__PURE__ */ import_react44.default.createElement("svg", __spreadValues({ viewBox: "0 0 31 30", fill: "none" }, props), title && /* @__PURE__ */ import_react44.default.createElement("title", null, title), /* @__PURE__ */ import_react44.default.createElement(
         "path",
         {
           d: "M30.01 13.43h-9.142l7.917-4.57-1.57-2.72-7.918 4.57 4.57-7.915-2.72-1.57-4.571 7.913V0h-3.142v9.139L8.863 1.225l-2.721 1.57 4.57 7.913L2.796 6.14 1.225 8.86l7.917 4.57H0v3.141h9.141l-7.916 4.57 1.57 2.72 7.918-4.57-4.571 7.915 2.72 1.57 4.572-7.914V30h3.142v-9.334l4.655 8.06 2.551-1.472-4.656-8.062 8.087 4.668 1.571-2.72-7.916-4.57h9.141v-3.14h.001zm-15.005 5.84a4.271 4.271 0 11-.001-8.542 4.271 4.271 0 01.001 8.542z",
@@ -5190,9 +5809,9 @@ var WordmarkLogoSvg = (_a) => {
   var _b = _a, { brand, wordmarkColor, title } = _b, props = __objRest(_b, ["brand", "wordmarkColor", "title"]);
   switch (brand) {
     case "ai":
-      return /* @__PURE__ */ import_react37.default.createElement("svg", __spreadValues({ viewBox: "0 0 94 23", fill: wordmarkColor }, props), title && /* @__PURE__ */ import_react37.default.createElement("title", null, title), /* @__PURE__ */ import_react37.default.createElement("path", { d: "M4.12637 22.4624H0V0H4.12637V22.4624Z" }), /* @__PURE__ */ import_react37.default.createElement("path", { d: "M13.3999 19.1737C15.4166 19.1737 17.2781 17.7155 17.2781 14.8301C17.2781 11.9448 15.4166 10.4866 13.3999 10.4866C11.3833 10.4866 9.52175 11.9448 9.52175 14.8301C9.52175 17.6845 11.3833 19.1737 13.3999 19.1737ZM13.3999 6.7325C17.9606 6.7325 21.4045 10.1143 21.4045 14.8301C21.4045 19.515 17.9606 22.9277 13.3999 22.9277C8.83919 22.9277 5.39538 19.515 5.39538 14.8301C5.39538 10.1143 8.83919 6.7325 13.3999 6.7325Z" }), /* @__PURE__ */ import_react37.default.createElement("path", { d: "M29.7548 19.1737C31.7714 19.1737 33.6329 17.7155 33.6329 14.8301C33.6329 11.9448 31.7714 10.4866 29.7548 10.4866C27.7381 10.4866 25.8766 11.9448 25.8766 14.8301C25.8766 17.6845 27.7381 19.1737 29.7548 19.1737ZM29.7548 6.7325C34.3155 6.7325 37.7593 10.1143 37.7593 14.8301C37.7593 19.515 34.3155 22.9277 29.7548 22.9277C25.194 22.9277 21.7502 19.515 21.7502 14.8301C21.7502 10.1143 25.194 6.7325 29.7548 6.7325Z" }), /* @__PURE__ */ import_react37.default.createElement("path", { d: "M43.1622 22.4624H39.0358V7.19788H42.976V9.05941C43.8137 7.57019 45.7683 6.76353 47.4437 6.76353C49.5224 6.76353 51.1978 7.66326 51.9734 9.30761C53.1834 7.44609 54.7967 6.76353 56.8134 6.76353C59.6367 6.76353 62.3359 8.46992 62.3359 12.5653V22.4624H58.3336V13.403C58.3336 11.7586 57.5269 10.5176 55.6344 10.5176C53.8659 10.5176 52.8111 11.8827 52.8111 13.5271V22.4624H48.7157V13.403C48.7157 11.7586 47.878 10.5176 46.0165 10.5176C44.2171 10.5176 43.1622 11.8517 43.1622 13.5271V22.4624Z" }), /* @__PURE__ */ import_react37.default.createElement("path", { d: "M84.1324 22.4624L82.3019 17.4363H73.3666L71.5361 22.4624H67.0064L75.4453 0.46538H80.4093L88.7862 22.4624H84.1324ZM77.8342 5.21226L74.7937 13.5271H80.8747L77.8342 5.21226Z" }), /* @__PURE__ */ import_react37.default.createElement("path", { d: "M94 22.4624H89.6565V0.46538H94V22.4624Z" }));
+      return /* @__PURE__ */ import_react44.default.createElement("svg", __spreadValues({ viewBox: "0 0 94 23", fill: wordmarkColor }, props), title && /* @__PURE__ */ import_react44.default.createElement("title", null, title), /* @__PURE__ */ import_react44.default.createElement("path", { d: "M4.12637 22.4624H0V0H4.12637V22.4624Z" }), /* @__PURE__ */ import_react44.default.createElement("path", { d: "M13.3999 19.1737C15.4166 19.1737 17.2781 17.7155 17.2781 14.8301C17.2781 11.9448 15.4166 10.4866 13.3999 10.4866C11.3833 10.4866 9.52175 11.9448 9.52175 14.8301C9.52175 17.6845 11.3833 19.1737 13.3999 19.1737ZM13.3999 6.7325C17.9606 6.7325 21.4045 10.1143 21.4045 14.8301C21.4045 19.515 17.9606 22.9277 13.3999 22.9277C8.83919 22.9277 5.39538 19.515 5.39538 14.8301C5.39538 10.1143 8.83919 6.7325 13.3999 6.7325Z" }), /* @__PURE__ */ import_react44.default.createElement("path", { d: "M29.7548 19.1737C31.7714 19.1737 33.6329 17.7155 33.6329 14.8301C33.6329 11.9448 31.7714 10.4866 29.7548 10.4866C27.7381 10.4866 25.8766 11.9448 25.8766 14.8301C25.8766 17.6845 27.7381 19.1737 29.7548 19.1737ZM29.7548 6.7325C34.3155 6.7325 37.7593 10.1143 37.7593 14.8301C37.7593 19.515 34.3155 22.9277 29.7548 22.9277C25.194 22.9277 21.7502 19.515 21.7502 14.8301C21.7502 10.1143 25.194 6.7325 29.7548 6.7325Z" }), /* @__PURE__ */ import_react44.default.createElement("path", { d: "M43.1622 22.4624H39.0358V7.19788H42.976V9.05941C43.8137 7.57019 45.7683 6.76353 47.4437 6.76353C49.5224 6.76353 51.1978 7.66326 51.9734 9.30761C53.1834 7.44609 54.7967 6.76353 56.8134 6.76353C59.6367 6.76353 62.3359 8.46992 62.3359 12.5653V22.4624H58.3336V13.403C58.3336 11.7586 57.5269 10.5176 55.6344 10.5176C53.8659 10.5176 52.8111 11.8827 52.8111 13.5271V22.4624H48.7157V13.403C48.7157 11.7586 47.878 10.5176 46.0165 10.5176C44.2171 10.5176 43.1622 11.8517 43.1622 13.5271V22.4624Z" }), /* @__PURE__ */ import_react44.default.createElement("path", { d: "M84.1324 22.4624L82.3019 17.4363H73.3666L71.5361 22.4624H67.0064L75.4453 0.46538H80.4093L88.7862 22.4624H84.1324ZM77.8342 5.21226L74.7937 13.5271H80.8747L77.8342 5.21226Z" }), /* @__PURE__ */ import_react44.default.createElement("path", { d: "M94 22.4624H89.6565V0.46538H94V22.4624Z" }));
     default:
-      return /* @__PURE__ */ import_react37.default.createElement("svg", __spreadValues({ viewBox: "0 0 62 23", fill: wordmarkColor }, props), title && /* @__PURE__ */ import_react37.default.createElement("title", null, title), /* @__PURE__ */ import_react37.default.createElement("path", { d: "M.109 21.973V.027h4.028v21.946H.109zM38.742 7.059h3.846v1.82c.818-1.456 2.727-2.244 4.362-2.244 2.03 0 3.665.88 4.422 2.485 1.18-1.82 2.756-2.485 4.725-2.485 2.756 0 5.39 1.667 5.39 5.668v9.67h-3.906v-8.851c0-1.607-.788-2.82-2.636-2.82-1.727 0-2.757 1.335-2.757 2.942v8.73h-3.997v-8.852c0-1.607-.817-2.82-2.635-2.82-1.757 0-2.787 1.305-2.787 2.942v8.73h-4.027V7.059zM13.24 22.405c-4.537 0-7.824-3.367-7.824-7.889 0-4.45 3.276-7.896 7.824-7.896 4.57 0 7.824 3.478 7.824 7.896 0 4.49-3.288 7.889-7.824 7.889zm0-12.135a4.25 4.25 0 00-4.244 4.247 4.25 4.25 0 004.244 4.247 4.25 4.25 0 004.243-4.247 4.25 4.25 0 00-4.243-4.247zM29.667 22.405c-4.538 0-7.824-3.367-7.824-7.889 0-4.45 3.276-7.896 7.824-7.896 4.57 0 7.824 3.478 7.824 7.896 0 4.49-3.29 7.889-7.824 7.889zm0-12.186a4.3 4.3 0 00-4.293 4.296 4.3 4.3 0 004.293 4.296 4.3 4.3 0 004.293-4.296 4.3 4.3 0 00-4.293-4.296z" }));
+      return /* @__PURE__ */ import_react44.default.createElement("svg", __spreadValues({ viewBox: "0 0 62 23", fill: wordmarkColor }, props), title && /* @__PURE__ */ import_react44.default.createElement("title", null, title), /* @__PURE__ */ import_react44.default.createElement("path", { d: "M.109 21.973V.027h4.028v21.946H.109zM38.742 7.059h3.846v1.82c.818-1.456 2.727-2.244 4.362-2.244 2.03 0 3.665.88 4.422 2.485 1.18-1.82 2.756-2.485 4.725-2.485 2.756 0 5.39 1.667 5.39 5.668v9.67h-3.906v-8.851c0-1.607-.788-2.82-2.636-2.82-1.727 0-2.757 1.335-2.757 2.942v8.73h-3.997v-8.852c0-1.607-.817-2.82-2.635-2.82-1.757 0-2.787 1.305-2.787 2.942v8.73h-4.027V7.059zM13.24 22.405c-4.537 0-7.824-3.367-7.824-7.889 0-4.45 3.276-7.896 7.824-7.896 4.57 0 7.824 3.478 7.824 7.896 0 4.49-3.288 7.889-7.824 7.889zm0-12.135a4.25 4.25 0 00-4.244 4.247 4.25 4.25 0 004.244 4.247 4.25 4.25 0 004.243-4.247 4.25 4.25 0 00-4.243-4.247zM29.667 22.405c-4.538 0-7.824-3.367-7.824-7.889 0-4.45 3.276-7.896 7.824-7.896 4.57 0 7.824 3.478 7.824 7.896 0 4.49-3.29 7.889-7.824 7.889zm0-12.186a4.3 4.3 0 00-4.293 4.296 4.3 4.3 0 004.293 4.296 4.3 4.3 0 004.293-4.296 4.3 4.3 0 00-4.293-4.296z" }));
   }
 };
 var combinedLogoPath = "M100 7.76427C100 8.35691 99.539 8.48348 98.961 8.52007C96.1953 8.67371 93.2877 11.4461 93.1267 14.2045C93.0975 14.7898 92.9709 15.2508 92.3783 15.2508C91.7856 15.2508 91.6517 14.7898 91.6225 14.1972C91.4615 11.4461 88.5539 8.67371 85.7955 8.52007C85.2102 8.48348 84.7492 8.35691 84.7492 7.76427C84.7492 7.17162 85.2102 7.05237 85.7955 7.01578C88.5539 6.86213 91.4615 3.80464 91.6225 1.04628C91.6517 0.460948 91.7783 0 92.3783 0C92.9782 0 93.0975 0.460948 93.1267 1.04628C93.2877 3.80464 96.1953 6.86213 98.9537 7.01578C99.539 7.05237 100 7.17894 100 7.76427Z";
@@ -5212,22 +5831,36 @@ var CombinedLogoSvg = (_a) => {
   ]);
   switch (brand) {
     case "ai":
-      return /* @__PURE__ */ import_react37.default.createElement("svg", __spreadValues({ viewBox: "0 0 100 30", fill: "none" }, props), title && /* @__PURE__ */ import_react37.default.createElement("title", null, title), !symbolColor ? /* @__PURE__ */ import_react37.default.createElement(import_react37.default.Fragment, null, LoomAiGradientDef(customId), [...Array(3)].map((_, i) => /* @__PURE__ */ import_react37.default.createElement(
+      return /* @__PURE__ */ import_react44.default.createElement("svg", __spreadValues({ viewBox: "0 0 100 30", fill: "none" }, props), title && /* @__PURE__ */ import_react44.default.createElement("title", null, title), !symbolColor ? /* @__PURE__ */ import_react44.default.createElement(import_react44.default.Fragment, null, LoomAiGradientDef(customId), [...Array(3)].map((_, i) => /* @__PURE__ */ import_react44.default.createElement(
         "path",
         {
           key: i,
           d: combinedLogoPath,
           fill: `url(#ai-logo-${customId}-gradient-${i + 1}`
         }
-      ))) : /* @__PURE__ */ import_react37.default.createElement("path", { d: combinedLogoPath, fill: getColorValue(symbolColor) }), /* @__PURE__ */ import_react37.default.createElement("g", { fill: wordmarkColor }, /* @__PURE__ */ import_react37.default.createElement("path", { d: "M4.1997 29.5909H0.570312V9.83386H4.1997V29.5909Z" }), /* @__PURE__ */ import_react37.default.createElement("path", { d: "M12.3563 26.6983C14.1301 26.6983 15.7674 25.4157 15.7674 22.8778C15.7674 20.34 14.1301 19.0574 12.3563 19.0574C10.5826 19.0574 8.94526 20.34 8.94526 22.8778C8.94526 25.3884 10.5826 26.6983 12.3563 26.6983ZM12.3563 15.7555C16.3678 15.7555 19.3968 18.73 19.3968 22.8778C19.3968 26.9984 16.3678 30.0002 12.3563 30.0002C8.34491 30.0002 5.31587 26.9984 5.31587 22.8778C5.31587 18.73 8.34491 15.7555 12.3563 15.7555Z" }), /* @__PURE__ */ import_react37.default.createElement("path", { d: "M26.7414 26.6983C28.5152 26.6983 30.1525 25.4157 30.1525 22.8778C30.1525 20.34 28.5152 19.0574 26.7414 19.0574C24.9676 19.0574 23.3303 20.34 23.3303 22.8778C23.3303 25.3884 24.9676 26.6983 26.7414 26.6983ZM26.7414 15.7555C30.7528 15.7555 33.7819 18.73 33.7819 22.8778C33.7819 26.9984 30.7528 30.0002 26.7414 30.0002C22.73 30.0002 19.7009 26.9984 19.7009 22.8778C19.7009 18.73 22.73 15.7555 26.7414 15.7555Z" }), /* @__PURE__ */ import_react37.default.createElement("path", { d: "M38.534 29.5909H34.9047V16.1648H38.3703V17.8022C39.1071 16.4923 40.8263 15.7828 42.2999 15.7828C44.1282 15.7828 45.6018 16.5742 46.284 18.0205C47.3483 16.3831 48.7673 15.7828 50.5411 15.7828C53.0243 15.7828 55.3984 17.2837 55.3984 20.8858V29.5909H51.8782V21.6226C51.8782 20.1763 51.1687 19.0847 49.5041 19.0847C47.9486 19.0847 47.0208 20.2854 47.0208 21.7317V29.5909H43.4187V21.6226C43.4187 20.1763 42.6819 19.0847 41.0446 19.0847C39.4619 19.0847 38.534 20.2581 38.534 21.7317V29.5909Z" }), /* @__PURE__ */ import_react37.default.createElement("path", { d: "M74.5698 29.5909L72.9598 25.1701H65.1006L63.4906 29.5909H59.5064L66.929 10.2432H71.2951L78.6631 29.5909H74.5698ZM69.0302 14.4184L66.3559 21.7317H71.7045L69.0302 14.4184Z" }), /* @__PURE__ */ import_react37.default.createElement("path", { d: "M83.249 29.5909H79.4285V10.2432H83.249V29.5909Z" })));
+      ))) : /* @__PURE__ */ import_react44.default.createElement("path", { d: combinedLogoPath, fill: getColorValue(symbolColor) }), /* @__PURE__ */ import_react44.default.createElement("g", { fill: wordmarkColor }, /* @__PURE__ */ import_react44.default.createElement("path", { d: "M4.1997 29.5909H0.570312V9.83386H4.1997V29.5909Z" }), /* @__PURE__ */ import_react44.default.createElement("path", { d: "M12.3563 26.6983C14.1301 26.6983 15.7674 25.4157 15.7674 22.8778C15.7674 20.34 14.1301 19.0574 12.3563 19.0574C10.5826 19.0574 8.94526 20.34 8.94526 22.8778C8.94526 25.3884 10.5826 26.6983 12.3563 26.6983ZM12.3563 15.7555C16.3678 15.7555 19.3968 18.73 19.3968 22.8778C19.3968 26.9984 16.3678 30.0002 12.3563 30.0002C8.34491 30.0002 5.31587 26.9984 5.31587 22.8778C5.31587 18.73 8.34491 15.7555 12.3563 15.7555Z" }), /* @__PURE__ */ import_react44.default.createElement("path", { d: "M26.7414 26.6983C28.5152 26.6983 30.1525 25.4157 30.1525 22.8778C30.1525 20.34 28.5152 19.0574 26.7414 19.0574C24.9676 19.0574 23.3303 20.34 23.3303 22.8778C23.3303 25.3884 24.9676 26.6983 26.7414 26.6983ZM26.7414 15.7555C30.7528 15.7555 33.7819 18.73 33.7819 22.8778C33.7819 26.9984 30.7528 30.0002 26.7414 30.0002C22.73 30.0002 19.7009 26.9984 19.7009 22.8778C19.7009 18.73 22.73 15.7555 26.7414 15.7555Z" }), /* @__PURE__ */ import_react44.default.createElement("path", { d: "M38.534 29.5909H34.9047V16.1648H38.3703V17.8022C39.1071 16.4923 40.8263 15.7828 42.2999 15.7828C44.1282 15.7828 45.6018 16.5742 46.284 18.0205C47.3483 16.3831 48.7673 15.7828 50.5411 15.7828C53.0243 15.7828 55.3984 17.2837 55.3984 20.8858V29.5909H51.8782V21.6226C51.8782 20.1763 51.1687 19.0847 49.5041 19.0847C47.9486 19.0847 47.0208 20.2854 47.0208 21.7317V29.5909H43.4187V21.6226C43.4187 20.1763 42.6819 19.0847 41.0446 19.0847C39.4619 19.0847 38.534 20.2581 38.534 21.7317V29.5909Z" }), /* @__PURE__ */ import_react44.default.createElement("path", { d: "M74.5698 29.5909L72.9598 25.1701H65.1006L63.4906 29.5909H59.5064L66.929 10.2432H71.2951L78.6631 29.5909H74.5698ZM69.0302 14.4184L66.3559 21.7317H71.7045L69.0302 14.4184Z" }), /* @__PURE__ */ import_react44.default.createElement("path", { d: "M83.249 29.5909H79.4285V10.2432H83.249V29.5909Z" })));
+    case "apptile":
+      return /* @__PURE__ */ import_react44.default.createElement("svg", __spreadValues({ viewBox: "0 0 103 40", fill: "none" }, props), title && /* @__PURE__ */ import_react44.default.createElement("title", null, title), /* @__PURE__ */ import_react44.default.createElement(
+        "path",
+        {
+          d: "M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z",
+          fill: symbolColor ? getColorValue(symbolColor) : getColorValue("blurple")
+        }
+      ), /* @__PURE__ */ import_react44.default.createElement(
+        "path",
+        {
+          d: "M32.3962 18.6213H25.1467L31.4251 14.9965L30.0463 12.6077L23.768 16.2325L27.392 9.95464L25.0032 8.57506L21.3792 14.8529V7.604H18.6215V14.8536L14.9961 8.57506L12.6081 9.95395L16.2327 16.2318L9.95437 12.6077L8.57552 14.9958L14.8539 18.6206H7.60449V21.3784H14.8532L8.57552 25.0032L9.95437 27.392L16.2321 23.7679L12.6074 30.0457L14.9961 31.4246L18.6208 25.1461V32.3957H21.3785V25.1468L25.0025 31.4246L27.3912 30.0457L23.7665 23.7672L30.0449 27.392L31.4238 25.0032L25.1461 21.3791H32.3947V18.6213H32.3962ZM20.0003 23.7505C17.921 23.7505 16.2355 22.0651 16.2355 19.9856C16.2355 17.9062 17.921 16.2207 20.0003 16.2207C22.0797 16.2207 23.7651 17.9062 23.7651 19.9856C23.7651 22.0651 22.0797 23.7505 20.0003 23.7505Z",
+          fill: "white"
+        }
+      ), /* @__PURE__ */ import_react44.default.createElement("g", { fill: wordmarkColor }, /* @__PURE__ */ import_react44.default.createElement("path", { d: "M47.6001 29.5076V10H51.1816V29.5076H47.6001Z" }), /* @__PURE__ */ import_react44.default.createElement("path", { d: "M81.9516 16.2509H85.3718V17.8682C86.0987 16.575 87.7961 15.8739 89.2499 15.8739C91.0549 15.8739 92.5086 16.6556 93.1818 18.0832C94.2314 16.4659 95.633 15.8739 97.3834 15.8739C99.8338 15.8739 102.177 17.356 102.177 20.9122V29.5076H98.7027V21.6402C98.7027 20.2119 98.0019 19.1345 96.3591 19.1345C94.8238 19.1345 93.9079 20.3202 93.9079 21.7485V29.5084H90.3541V21.6402C90.3541 20.2119 89.6272 19.1345 88.0104 19.1345C86.4483 19.1345 85.5323 20.2933 85.5323 21.7485V29.5084H81.9516V16.2509Z" }), /* @__PURE__ */ import_react44.default.createElement("path", { d: "M59.2755 29.8916C55.2407 29.8916 52.3189 26.899 52.3189 22.8795C52.3189 18.9241 55.2312 15.8603 59.2755 15.8603C63.3394 15.8603 66.232 18.9526 66.232 22.8795C66.232 26.8697 63.3086 29.8916 59.2755 29.8916ZM59.2755 19.1051C57.1944 19.1051 55.5018 20.7983 55.5018 22.8803C55.5018 24.9624 57.1944 26.6555 59.2755 26.6555C61.3565 26.6555 63.0484 24.9624 63.0484 22.8803C63.0484 20.7983 61.3565 19.1051 59.2755 19.1051Z" }), /* @__PURE__ */ import_react44.default.createElement("path", { d: "M73.8823 29.8916C69.8476 29.8916 66.9258 26.899 66.9258 22.8795C66.9258 18.9241 69.8381 15.8603 73.8823 15.8603C77.9463 15.8603 80.8389 18.9526 80.8389 22.8795C80.8389 26.8697 77.9139 29.8916 73.8823 29.8916ZM73.8823 19.0601C71.7776 19.0601 70.0652 20.7738 70.0652 22.8788C70.0652 24.9837 71.7776 26.6974 73.8823 26.6974C75.9871 26.6974 77.6995 24.9837 77.6995 22.8788C77.6988 20.7738 75.9863 19.0601 73.8823 19.0601Z" })));
     default:
-      return /* @__PURE__ */ import_react37.default.createElement("svg", __spreadValues({ viewBox: "0 0 100 30", fill: "none" }, props), title && /* @__PURE__ */ import_react37.default.createElement("title", null, title), /* @__PURE__ */ import_react37.default.createElement(
+      return /* @__PURE__ */ import_react44.default.createElement("svg", __spreadValues({ viewBox: "0 0 100 30", fill: "none" }, props), title && /* @__PURE__ */ import_react44.default.createElement("title", null, title), /* @__PURE__ */ import_react44.default.createElement(
         "path",
         {
           d: "M30.01 13.43h-9.142l7.917-4.57-1.57-2.72-7.918 4.57 4.57-7.915-2.72-1.57-4.571 7.913V0h-3.142v9.139L8.863 1.225l-2.721 1.57 4.57 7.913L2.796 6.14 1.225 8.86l7.917 4.57H0v3.141h9.141l-7.916 4.57 1.57 2.72 7.918-4.57-4.571 7.915 2.72 1.57 4.572-7.914V30h3.142v-9.334l4.655 8.06 2.551-1.472-4.656-8.062 8.087 4.668 1.571-2.72-7.916-4.57h9.141v-3.14h.001zm-15.005 5.84a4.271 4.271 0 11-.001-8.542 4.271 4.271 0 01.001 8.542z",
           fill: symbolColor ? getColorValue(symbolColor) : getColorValue("primary")
         }
-      ), /* @__PURE__ */ import_react37.default.createElement(
+      ), /* @__PURE__ */ import_react44.default.createElement(
         "path",
         {
           d: "M38.109 25.973V4.027h4.028v21.946h-4.028zM76.742 11.059h3.846v1.82c.818-1.455 2.727-2.244 4.362-2.244 2.03 0 3.665.88 4.422 2.485 1.18-1.82 2.756-2.485 4.725-2.485 2.756 0 5.39 1.667 5.39 5.668v9.67h-3.906v-8.851c0-1.607-.788-2.82-2.636-2.82-1.727 0-2.757 1.335-2.757 2.942v8.73h-3.996v-8.852c0-1.607-.818-2.82-2.636-2.82-1.757 0-2.787 1.305-2.787 2.942v8.73h-4.027V11.059zM51.24 26.405c-4.538 0-7.824-3.367-7.824-7.889 0-4.45 3.276-7.896 7.824-7.896 4.57 0 7.824 3.478 7.824 7.896 0 4.49-3.288 7.889-7.824 7.889zm0-12.135a4.25 4.25 0 00-4.244 4.247 4.25 4.25 0 004.244 4.247 4.25 4.25 0 004.243-4.247 4.25 4.25 0 00-4.243-4.247zM67.667 26.405c-4.538 0-7.824-3.367-7.824-7.889 0-4.45 3.276-7.896 7.824-7.896 4.57 0 7.824 3.478 7.824 7.896 0 4.49-3.29 7.889-7.824 7.889zm0-12.186a4.3 4.3 0 00-4.293 4.296 4.3 4.3 0 004.293 4.296 4.3 4.3 0 004.293-4.296 4.3 4.3 0 00-4.293-4.296z",
@@ -5236,7 +5869,7 @@ var CombinedLogoSvg = (_a) => {
       ));
   }
 };
-var LogoWrapper = import_styled30.default.span`
+var LogoWrapper = import_styled31.default.span`
   display: block;
   ${(props) => props.maxWidth && getSize("max-width", props.maxWidth)};
 
@@ -5265,7 +5898,7 @@ var Logo = (_a) => {
     "customId",
     "title"
   ]);
-  return /* @__PURE__ */ import_react37.default.createElement(LogoWrapper, __spreadValues({ variant, maxWidth }, props), variant === "combined" && /* @__PURE__ */ import_react37.default.createElement(
+  return /* @__PURE__ */ import_react44.default.createElement(LogoWrapper, __spreadValues({ variant, maxWidth }, props), variant === "combined" && /* @__PURE__ */ import_react44.default.createElement(
     CombinedLogoSvg,
     {
       brand,
@@ -5275,7 +5908,7 @@ var Logo = (_a) => {
       className: "lns-logoSvg",
       title
     }
-  ), variant === "symbol" && /* @__PURE__ */ import_react37.default.createElement(
+  ), variant === "symbol" && /* @__PURE__ */ import_react44.default.createElement(
     SymbolLogoSvg,
     {
       brand,
@@ -5284,7 +5917,7 @@ var Logo = (_a) => {
       className: "lns-logoSvg",
       title
     }
-  ), variant === "wordmark" && /* @__PURE__ */ import_react37.default.createElement(
+  ), variant === "wordmark" && /* @__PURE__ */ import_react44.default.createElement(
     WordmarkLogoSvg,
     {
       brand,
@@ -5297,8 +5930,8 @@ var Logo = (_a) => {
 var logo_default = Logo;
 
 // src/components/logo-loader/logo-loader.tsx
-var import_react38 = __toESM(require("react"));
-var import_styled31 = __toESM(require("@emotion/styled"));
+var import_styled32 = __toESM(require("@emotion/styled"));
+var import_react45 = __toESM(require("react"));
 
 // src/constants/routes.ts
 var LENS_CDN = "https://cdn.loom.com/assets/lens";
@@ -5308,7 +5941,7 @@ var sizeToPx = {
   small: "40px",
   medium: "80px"
 };
-var LogoLoaderWrapper = import_styled31.default.span`
+var LogoLoaderWrapper = import_styled32.default.span`
   animation: ${(props) => props.animation};
   background-image: url(${LENS_CDN}/${(props) => props.brand}-loader.svg);
   background-size: cover;
@@ -5328,116 +5961,17 @@ var LogoLoader = ({
   brand = "loom",
   size = "medium"
 }) => {
-  return /* @__PURE__ */ import_react38.default.createElement(LogoLoaderWrapper, { animation, brand, size });
+  return /* @__PURE__ */ import_react45.default.createElement(LogoLoaderWrapper, { animation, brand, size });
 };
 var logo_loader_default = LogoLoader;
 
-// src/components/radio/radio.tsx
-var import_react39 = __toESM(require("react"));
-var import_styled32 = __toESM(require("@emotion/styled"));
-var RadioLabel = import_styled32.default.label`
-  display: block;
-  position: relative;
-
-  .RadioBox:after {
-    background-color: transparent;
-  }
-`;
-var RadioInput = import_styled32.default.input`
-  position: absolute;
-  opacity: 0;
-
-  &:not(:disabled) {
-    cursor: pointer;
-
-    & ~ .RadioBox {
-      border: 2px solid ${getColorValue("body")};
-    }
-
-    &:checked ~ .RadioBox {
-      border: 2px solid ${getColorValue("body")};
-    }
-  }
-
-  &:disabled,
-  &:disabled ~ .RadioBox {
-    pointer-events: none;
-  }
-
-  &:disabled ~ .RadioBox {
-    background-color: ${getColorValue("disabledBackground")};
-  }
-
-  &:checked {
-    & ~ .RadioBox:after {
-      background-color: ${getColorValue("blurple")};
-    }
-
-    &:disabled ~ .RadioBox:after {
-      background-color: ${getColorValue("disabledContent")};
-    }
-  }
-
-  &:focus-visible ~ .RadioBox {
-    ${getFocusRing()};
-  }
-`;
-var RadioBox = import_styled32.default.span`
-  cursor: pointer;
-  width: ${u(2.25)};
-  height: ${u(2.25)};
-  ${getRadius("full")};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  user-select: none;
-
-  &:after {
-    content: '';
-    width: ${u(1)};
-    height: ${u(1)};
-    ${getRadius("full")};
-    background-color: ${getColorValue("white")};
-  }
-`;
-var Radio = (0, import_react39.forwardRef)(
-  (_a, ref) => {
-    var _b = _a, {
-      isDisabled,
-      isChecked,
-      onFocus,
-      onChange,
-      onBlur
-    } = _b, props = __objRest(_b, [
-      "isDisabled",
-      "isChecked",
-      "onFocus",
-      "onChange",
-      "onBlur"
-    ]);
-    return /* @__PURE__ */ import_react39.default.createElement(RadioLabel, null, /* @__PURE__ */ import_react39.default.createElement(
-      RadioInput,
-      __spreadValues({
-        type: "radio",
-        disabled: isDisabled,
-        checked: isChecked,
-        onFocus,
-        onChange,
-        onBlur,
-        ref
-      }, props)
-    ), /* @__PURE__ */ import_react39.default.createElement(RadioBox, { className: "RadioBox" }));
-  }
-);
-var radio_default = Radio;
-
 // src/components/list/list.tsx
-var import_react40 = __toESM(require("react"));
-var import_core6 = require("@emotion/core");
+var import_react46 = require("@emotion/react");
 var import_styled33 = __toESM(require("@emotion/styled"));
+var import_react47 = __toESM(require("react"));
 var ssrComment = `/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */`;
 var variantStyles2 = {
-  border: import_core6.css`
+  border: import_react46.css`
     .ListRowWrapper:last-child {
       border-bottom: 1px solid ${getColorValue("border")};
     }
@@ -5447,7 +5981,7 @@ var variantStyles2 = {
       border-top: 1px solid ${getColorValue("border")};
     }
   `,
-  stripe: import_core6.css`
+  stripe: import_react46.css`
     .ListRowWrapper {
       &:nth-child(odd) ${ssrComment} {
         background-color: ${getColorValue("backgroundSecondary")};
@@ -5458,7 +5992,7 @@ var variantStyles2 = {
       ${getRadius("medium")};
     }
   `,
-  clear: import_core6.css``
+  clear: import_react46.css``
 };
 var ListWrapper = import_styled33.default.div`
   .ListRowWrapper {
@@ -5525,7 +6059,7 @@ var ListRow = (_a) => {
     "href"
   ]);
   const classNameFromProp = className ? ` ${className}` : ``;
-  return /* @__PURE__ */ import_react40.default.createElement(
+  return /* @__PURE__ */ import_react47.default.createElement(
     ListRowWrapper,
     __spreadValues({
       className: `ListRowWrapper${classNameFromProp}`,
@@ -5550,7 +6084,7 @@ var List = (_a) => {
     "gap",
     "variant"
   ]);
-  return /* @__PURE__ */ import_react40.default.createElement(
+  return /* @__PURE__ */ import_react47.default.createElement(
     ListWrapper,
     __spreadValues({
       columns: columns && formatColumns(columns),
@@ -5563,9 +6097,9 @@ var List = (_a) => {
 var list_default = List;
 
 // src/components/tabs/tabs.tsx
-var import_react41 = __toESM(require("react"));
 var import_styled34 = __toESM(require("@emotion/styled"));
-var TabsContext = import_react41.default.createContext({});
+var import_react48 = __toESM(require("react"));
+var TabsContext = import_react48.default.createContext({});
 var negativeScrollOffset = (scrollOffset) => `calc(-1 * ${getSizeValue(scrollOffset)})`;
 var Wrapper = import_styled34.default.div`
   ${(props) => props.scrollOffset && `margin: 0 ${negativeScrollOffset(props.scrollOffset)};
@@ -5587,22 +6121,33 @@ var TabsNav = import_styled34.default.nav`
     display: none;
   }
 
-  & > * {
+  li {
     ${(props) => props.hasFullTabs && `flex: 1 0`};
+    &:not(:first-of-type) {
+      margin-left: 1rem;
+    }
   }
 
-  & > * + * {
-    margin-left: ${u(2)};
+  li > * {
+    width: 100%;
   }
 
-  &:after {
+  ul {
+    display: flex;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+  }
+
+  ul:after {
     content: '';
     flex-shrink: 0;
     ${(props) => props.scrollOffset && getSize("width", props.scrollOffset)};
   }
 `;
 var TabsNavPilled = import_styled34.default.nav`
-  ${getRadius("full")};
+  ${getRadius("200")};
   background-color: var(--lns-color-backgroundSecondary);
 
   padding: var(--lns-space-xsmall);
@@ -5617,15 +6162,23 @@ var TabsNavPilled = import_styled34.default.nav`
     display: none;
   }
 
-  & > * {
+  li {
     flex: 1 0;
   }
 
-  & > * + * {
-    margin-left: ${u(2)};
+  li > * {
+    width: 100%;
   }
 
-  &:after {
+  ul {
+    display: flex;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+  }
+
+  ul:after {
     content: '';
     flex-shrink: 0;
     ${(props) => props.scrollOffset && getSize("width", props.scrollOffset)};
@@ -5685,7 +6238,7 @@ var TabWrapperPilled = import_styled34.default.button`
   font: inherit;
   background: transparent;
   border: none;
-  ${getRadius("full")};
+  ${getRadius("175")};
   cursor: pointer;
   display: inline-flex;
   align-items: center;
@@ -5729,11 +6282,20 @@ var Tab = (_a) => {
     "htmlTag",
     "icon"
   ]);
-  const { isPilledDesign } = import_react41.default.useContext(TabsContext);
+  const { isPilledDesign } = import_react48.default.useContext(TabsContext);
   if (isPilledDesign) {
-    return /* @__PURE__ */ import_react41.default.createElement(TabWrapperPilled, __spreadValues({ as: htmlTag, isActive, icon }, props), icon && /* @__PURE__ */ import_react41.default.createElement(container_default, { htmlTag: "span", paddingRight: children && "small" }, /* @__PURE__ */ import_react41.default.createElement(icon_default, { icon, color: "currentColor", hasWidthOffset: true })), children);
+    return /* @__PURE__ */ import_react48.default.createElement("li", null, /* @__PURE__ */ import_react48.default.createElement(
+      TabWrapperPilled,
+      __spreadValues({
+        as: htmlTag,
+        isActive,
+        icon
+      }, props),
+      icon && /* @__PURE__ */ import_react48.default.createElement(container_default, { htmlTag: "span", paddingRight: children && "small" }, /* @__PURE__ */ import_react48.default.createElement(icon_default, { icon, color: "currentColor" })),
+      children
+    ));
   }
-  return /* @__PURE__ */ import_react41.default.createElement(TabWrapper, __spreadValues({ as: htmlTag, isActive, icon }, props), icon && /* @__PURE__ */ import_react41.default.createElement(container_default, { htmlTag: "span", paddingRight: children && "small" }, /* @__PURE__ */ import_react41.default.createElement(icon_default, { icon, color: "currentColor", hasWidthOffset: true })), children);
+  return /* @__PURE__ */ import_react48.default.createElement("li", null, /* @__PURE__ */ import_react48.default.createElement(TabWrapper, __spreadValues({ as: htmlTag, isActive, icon }, props), icon && /* @__PURE__ */ import_react48.default.createElement(container_default, { htmlTag: "span", paddingRight: children && "small" }, /* @__PURE__ */ import_react48.default.createElement(icon_default, { icon, color: "currentColor" })), children));
 };
 var Tabs = (_a) => {
   var _b = _a, {
@@ -5749,32 +6311,32 @@ var Tabs = (_a) => {
     "isPilledDesign",
     "hasBottomBorder"
   ]);
-  const tabsContent = isPilledDesign ? /* @__PURE__ */ import_react41.default.createElement(
+  const tabsContent = isPilledDesign ? /* @__PURE__ */ import_react48.default.createElement(
     TabsNavPilled,
     __spreadValues({
       hasFullTabs,
       scrollOffset
     }, props),
-    children
-  ) : /* @__PURE__ */ import_react41.default.createElement(
+    /* @__PURE__ */ import_react48.default.createElement("ul", null, children)
+  ) : /* @__PURE__ */ import_react48.default.createElement(
     TabsNav,
     __spreadValues({
       hasFullTabs,
       scrollOffset,
       hasBottomBorder
     }, props),
-    children
+    /* @__PURE__ */ import_react48.default.createElement("ul", null, children)
   );
   if (scrollOffset) {
-    return /* @__PURE__ */ import_react41.default.createElement(Wrapper, { scrollOffset }, tabsContent);
+    return /* @__PURE__ */ import_react48.default.createElement(Wrapper, { scrollOffset }, tabsContent);
   }
-  return /* @__PURE__ */ import_react41.default.createElement(TabsContext.Provider, { value: { isPilledDesign } }, tabsContent);
+  return /* @__PURE__ */ import_react48.default.createElement(TabsContext.Provider, { value: { isPilledDesign } }, tabsContent);
 };
 var tabs_default = Tabs;
 
 // src/components/pill/pill.tsx
-var import_react42 = __toESM(require("react"));
 var import_styled35 = __toESM(require("@emotion/styled"));
+var import_react49 = __toESM(require("react"));
 var PillWrapper = import_styled35.default.div`
   display: inline-grid;
   grid-auto-flow: column;
@@ -5784,7 +6346,7 @@ var PillWrapper = import_styled35.default.div`
   min-height: ${u(3.25)};
   color: ${(props) => getColorValue(props.color)};
   background-color: ${(props) => getColorValue(props.backgroundColor)};
-  ${getRadius("full")};
+  ${getRadius("100")};
   ${getTextSize("small")};
   ${getFontWeight("bold")};
   ${getSize("gap", "xsmall")};
@@ -5803,24 +6365,24 @@ var Pill = (_a) => {
     "icon",
     "iconPosition"
   ]);
-  const iconComponent = /* @__PURE__ */ import_react42.default.createElement(
+  const iconComponent = /* @__PURE__ */ import_react49.default.createElement(
     container_default,
     {
       htmlTag: "span",
       paddingLeft: iconPosition === "right" && "xsmall",
       paddingRight: iconPosition === "left" && "xsmall"
     },
-    /* @__PURE__ */ import_react42.default.createElement(icon_default, { icon, color: "currentColor", size: 2, hasWidthOffset: true })
+    /* @__PURE__ */ import_react49.default.createElement(icon_default, { icon, color: "currentColor", size: 2 })
   );
-  return /* @__PURE__ */ import_react42.default.createElement(PillWrapper, __spreadValues({ color, backgroundColor }, props), icon && iconPosition === "left" && iconComponent, children, icon && iconPosition === "right" && iconComponent);
+  return /* @__PURE__ */ import_react49.default.createElement(PillWrapper, __spreadValues({ color, backgroundColor }, props), icon && iconPosition === "left" && iconComponent, children, icon && iconPosition === "right" && iconComponent);
 };
 var pill_default = Pill;
 
 // src/components/popover/popover.tsx
+var import_styled36 = __toESM(require("@emotion/styled"));
 var import_react_dom = require("@floating-ui/react-dom");
-var import_react43 = __toESM(require("react"));
+var import_react50 = __toESM(require("react"));
 var import_react_dom2 = __toESM(require("react-dom"));
-var import_styled36 = __toESM(require("@emotion/styled"));
 var import_transition_hook2 = require("transition-hook");
 var placements2 = {
   topLeft: "top-start",
@@ -5902,7 +6464,7 @@ var Popover = (_a) => {
     ],
     strategy: "fixed"
   });
-  (0, import_react43.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     if (!refs.reference.current || !refs.floating.current) {
       return;
     }
@@ -5919,16 +6481,16 @@ var Popover = (_a) => {
       opacity: stage === "enter" ? 1 : 0
     }
   };
-  return /* @__PURE__ */ import_react43.default.createElement(Wrapper2, __spreadValues({ ref: reference }, props), children, shouldMount && /* @__PURE__ */ import_react43.default.createElement(import_react43.default.Fragment, null, !rootNode && /* @__PURE__ */ import_react43.default.createElement(ContentWrapper2, __spreadValues({}, contentProps), content), rootNode && import_react_dom2.default.createPortal(
-    /* @__PURE__ */ import_react43.default.createElement(ContentWrapper2, __spreadValues({}, contentProps), content),
+  return /* @__PURE__ */ import_react50.default.createElement(Wrapper2, __spreadValues({ ref: reference }, props), children, shouldMount && /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, !rootNode && /* @__PURE__ */ import_react50.default.createElement(ContentWrapper2, __spreadValues({}, contentProps), content), rootNode && import_react_dom2.default.createPortal(
+    /* @__PURE__ */ import_react50.default.createElement(ContentWrapper2, __spreadValues({}, contentProps), content),
     rootNode
   )));
 };
 var popover_default = Popover;
 
 // src/components/illustration/illustration.tsx
-var import_react44 = __toESM(require("react"));
 var import_styled37 = __toESM(require("@emotion/styled"));
+var import_react51 = __toESM(require("react"));
 var IllustrationWrapper = import_styled37.default.span`
   display: block;
   color: ${(props) => props.color ? getColorValue(props.color) : getColorValue("grey8")};
@@ -5945,7 +6507,7 @@ var Illustration = (_a) => {
   var _b = _a, {
     altText,
     illustration,
-    color = "orangeDark",
+    color = "orange",
     size = 12
   } = _b, props = __objRest(_b, [
     "altText",
@@ -5953,9 +6515,10 @@ var Illustration = (_a) => {
     "color",
     "size"
   ]);
-  return /* @__PURE__ */ import_react44.default.createElement(
+  return /* @__PURE__ */ import_react51.default.createElement(
     IllustrationWrapper,
     __spreadValues({
+      "aria-hidden": "true",
       "aria-label": altText,
       color,
       size
@@ -5966,10 +6529,10 @@ var Illustration = (_a) => {
 var illustration_default = Illustration;
 
 // src/components/split/split.tsx
-var import_react45 = __toESM(require("react"));
-var import_core7 = require("@emotion/core");
+var import_react52 = require("@emotion/react");
 var import_styled38 = __toESM(require("@emotion/styled"));
-var getSizeStyles = (props) => import_core7.css`
+var import_react53 = __toESM(require("react"));
+var getSizeStyles = (props) => import_react52.css`
   ${getSize("width", props.width)};
   ${getSize("height", props.height)};
   ${getSize("min-width", props.minWidth)};
@@ -6029,7 +6592,7 @@ var SplitSection = (_a) => {
   if (className || style) {
     console.warn(customStylesWarning);
   }
-  return /* @__PURE__ */ import_react45.default.createElement(
+  return /* @__PURE__ */ import_react53.default.createElement(
     SplitSectionWrapper,
     __spreadValues({
       as: htmlTag,
@@ -6087,7 +6650,7 @@ var Split = (_a) => {
   if (className || style) {
     console.warn(customStylesWarning);
   }
-  return /* @__PURE__ */ import_react45.default.createElement(
+  return /* @__PURE__ */ import_react53.default.createElement(
     SplitWrapper,
     __spreadValues({
       as: htmlTag,
@@ -6105,9 +6668,9 @@ var Split = (_a) => {
       maxWidth,
       maxHeight
     }, props),
-    htmlTag === "ul" || htmlTag === "ol" ? import_react45.Children.map(children, (child) => {
+    htmlTag === "ul" || htmlTag === "ol" ? import_react53.Children.map(children, (child) => {
       if (child.type === SplitSection || child.type === Split) {
-        return (0, import_react45.cloneElement)(child, { htmlTag: "li" });
+        return (0, import_react53.cloneElement)(child, { htmlTag: "li" });
       }
       return child;
     }) : children
@@ -6116,9 +6679,9 @@ var Split = (_a) => {
 var split_default = Split;
 
 // src/components/color-picker/color-picker.tsx
-var import_react46 = __toESM(require("react"));
-var import_react_colorful = require("react-colorful");
 var import_styled39 = __toESM(require("@emotion/styled"));
+var import_react54 = __toESM(require("react"));
+var import_react_colorful = require("react-colorful");
 var ColorfulWrapper = import_styled39.default.div`
   padding: var(--lns-space-medium);
   & .react-colorful {
@@ -6129,7 +6692,7 @@ var ColorfulWrapper = import_styled39.default.div`
     height: ${u(14)};
     border-bottom: none;
     box-shadow: inset 0 0 0 1px var(--lns-color-border);
-    border-radius: var(--lns-radius-medium);
+    ${getRadius(100)};
     margin-bottom: var(--lns-space-small);
   }
 
@@ -6137,7 +6700,7 @@ var ColorfulWrapper = import_styled39.default.div`
     height: ${u(2)};
     width: 100%;
     box-shadow: inset 0 0 0 1px var(--lns-color-border);
-    border-radius: 3px;
+    ${getRadius("50")};
     margin-bottom: var(--lns-space-medium);
   }
 
@@ -6162,8 +6725,10 @@ var ColorPickerContainer = import_styled39.default.div`
   position: relative;
   width: ${u(31)};
   background-color: var(--lns-color-overlay);
-  border-radius: var(--lns-radius-medium);
-  box-shadow: 0 0 0 1px var(--lns-color-border), var(--lns-shadow-medium);
+  ${getRadius("250")};
+  box-shadow:
+    0 0 0 1px var(--lns-color-border),
+    var(--lns-shadow-medium);
 `;
 var InputContainer = import_styled39.default.div`
   position: relative;
@@ -6178,7 +6743,7 @@ var InputContainer = import_styled39.default.div`
     border: none;
     box-shadow: inset 0 0 0 var(--lns-formFieldBorderWidth)
       var(--lns-color-formFieldBorder);
-    border-radius: var(--lns-formFieldRadius);
+    ${getRadius("150")};
     transition: 0.3s box-shadow;
     background-color: var(--lns-color-overlay);
     color: var(--lns-color-body);
@@ -6201,7 +6766,7 @@ var ColorBox = import_styled39.default.div`
   left: var(--lns-space-xsmall);
   top: var(--lns-space-xsmall);
   border: 1px solid rgba(0, 0, 0, 0.1);
-  ${getRadius("full")};
+  ${getRadius("100")};
   background-color: ${(props) => props.color};
 `;
 var ButtonWrapper2 = import_styled39.default.div`
@@ -6221,14 +6786,14 @@ var Swatch = import_styled39.default.div`
   cursor: pointer;
   width: ${u(3)};
   height: ${u(3)};
-  border-radius: 2px;
+  ${getRadius("100")};
   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)"};
 `;
 var SwatchSelector = ({ swatches, currentColor, onSwatchClick }) => {
   const selectedSwatch = swatches.includes(currentColor) && currentColor;
-  return /* @__PURE__ */ import_react46.default.createElement(SwatchesContainer, null, swatches.map((swatch) => /* @__PURE__ */ import_react46.default.createElement(
+  return /* @__PURE__ */ import_react54.default.createElement(SwatchesContainer, null, swatches.map((swatch) => /* @__PURE__ */ import_react54.default.createElement(
     Swatch,
     {
       key: swatch,
@@ -6239,7 +6804,7 @@ var SwatchSelector = ({ swatches, currentColor, onSwatchClick }) => {
   )));
 };
 var ColorSelector = ({ color, setColor }) => {
-  return /* @__PURE__ */ import_react46.default.createElement(ColorfulWrapper, null, /* @__PURE__ */ import_react46.default.createElement(import_react_colorful.HexColorPicker, { color, onChange: setColor }), /* @__PURE__ */ import_react46.default.createElement(InputContainer, null, /* @__PURE__ */ import_react46.default.createElement(import_react_colorful.HexColorInput, { prefixed: true, color, onChange: setColor }), /* @__PURE__ */ import_react46.default.createElement(ColorBox, { color })));
+  return /* @__PURE__ */ import_react54.default.createElement(ColorfulWrapper, null, /* @__PURE__ */ import_react54.default.createElement(import_react_colorful.HexColorPicker, { color, onChange: setColor }), /* @__PURE__ */ import_react54.default.createElement(InputContainer, null, /* @__PURE__ */ import_react54.default.createElement(import_react_colorful.HexColorInput, { prefixed: true, color, onChange: setColor }), /* @__PURE__ */ import_react54.default.createElement(ColorBox, { color })));
 };
 var ColorPicker = (_a) => {
   var _b = _a, {
@@ -6253,7 +6818,7 @@ var ColorPicker = (_a) => {
     "swatches",
     "onChange"
   ]);
-  const [tempColor, setTempColor] = (0, import_react46.useState)(
+  const [tempColor, setTempColor] = (0, import_react54.useState)(
     defaultColor ? defaultColor : "#FFFFFF"
   );
   const handleOnChange = (hex) => {
@@ -6263,14 +6828,14 @@ var ColorPicker = (_a) => {
   const onSwatchClick = (swatch) => {
     handleOnChange(swatch);
   };
-  return /* @__PURE__ */ import_react46.default.createElement(ColorPickerContainer, __spreadValues({}, props), swatches && /* @__PURE__ */ import_react46.default.createElement(
+  return /* @__PURE__ */ import_react54.default.createElement(ColorPickerContainer, __spreadValues({}, props), swatches && /* @__PURE__ */ import_react54.default.createElement(
     SwatchSelector,
     {
       swatches,
       currentColor: tempColor,
       onSwatchClick
     }
-  ), /* @__PURE__ */ import_react46.default.createElement(ColorSelector, { color: tempColor, setColor: handleOnChange }), confirmButton && /* @__PURE__ */ import_react46.default.createElement(ButtonWrapper2, null, confirmButton));
+  ), /* @__PURE__ */ import_react54.default.createElement(ColorSelector, { color: tempColor, setColor: handleOnChange }), confirmButton && /* @__PURE__ */ import_react54.default.createElement(ButtonWrapper2, null, confirmButton));
 };
 var color_picker_default = ColorPicker;
 
@@ -7669,3 +8234,4 @@ function IllustrationChromeNotificationsEmptyState(props) {
   );
 }
 var chrome_notifications_empty_state_default = IllustrationChromeNotificationsEmptyState;
+//# sourceMappingURL=index.js.map