@razorpay/blade 11.31.2 → 11.33.0

package/build/lib/web/development/components/TopNav/TabNav/utils.js

@@ -1,48 +1,35 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React__default from 'react';
 import { useIsomorphicLayoutEffect } from '../../../utils/useIsomorphicLayoutEffect.js';
 
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable consistent-return */
+
+
 /**
- * Check if an element has scroll overflow
+ * Hook to observe resize events on a given element
  */
-var useHasOverflow = function useHasOverflow(ref, callback) {
-  var observer = React__default.useRef(null);
-  var _React$useState = React__default.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    hasOverflow = _React$useState2[0],
-    setHasOverflow = _React$useState2[1];
+var useResize = function useResize(ref, callback) {
   useIsomorphicLayoutEffect(function () {
     if (!ref.current) return;
     var element = ref.current;
-    var trigger = function trigger() {
-      var hasOverflow = element.scrollWidth > element.clientWidth;
-      setHasOverflow(hasOverflow);
-      if (callback) callback(hasOverflow);
-    };
-    trigger();
-    if ('ResizeObserver' in window) {
-      observer.current = new ResizeObserver(trigger);
-      observer.current.observe(element);
-    }
+    if (!('ResizeObserver' in window)) return;
+    var observer = new ResizeObserver(function (entries) {
+      entries.forEach(function (entry) {
+        callback === null || callback === void 0 ? void 0 : callback(entry);
+      });
+    });
+    observer.observe(element);
 
     // destroy the observer
     return function () {
-      if ('ResizeObserver' in window) {
-        var _observer$current;
-        (_observer$current = observer.current) === null || _observer$current === void 0 ? void 0 : _observer$current.disconnect();
-      }
+      if (!('ResizeObserver' in window)) return;
+      observer === null || observer === void 0 ? void 0 : observer.disconnect();
     };
-  }, [callback, ref]);
-  return hasOverflow;
-};
-var approximatelyEqual = function approximatelyEqual(v1, v2) {
-  var tolerance = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-  return Math.abs(v1 - v2) < tolerance;
+  }, [callback]);
 };
 
 // Overlapping color of surface.background.gray.subtle + interactive.background.gray.default
 // TODO(future): design will tokenize or check if this is needed or not
 var MIXED_BG_COLOR = '#e1e7ef';
 
-export { MIXED_BG_COLOR, approximatelyEqual, useHasOverflow };
+export { MIXED_BG_COLOR, useResize };
 //# sourceMappingURL=utils.js.map

package/build/lib/web/development/components/TopNav/TabNav/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../../../../src/components/TopNav/TabNav/utils.ts"],"sourcesContent":["/* eslint-disable consistent-return */\nimport React from 'react';\nimport { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';\n\n/**\n * Check if an element has scroll overflow\n */\nconst useHasOverflow = (\n  ref: React.RefObject<HTMLDivElement>,\n  callback?: (hasOverflow: boolean) => void,\n): boolean => {\n  const observer = React.useRef<ResizeObserver | null>(null);\n  const [hasOverflow, setHasOverflow] = React.useState<boolean>(false);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) return;\n    const element = ref.current;\n\n    const trigger = (): void => {\n      const hasOverflow = element.scrollWidth > element.clientWidth;\n      setHasOverflow(hasOverflow);\n\n      if (callback) callback(hasOverflow);\n    };\n\n    trigger();\n    if ('ResizeObserver' in window) {\n      observer.current = new ResizeObserver(trigger);\n      observer.current.observe(element);\n    }\n\n    // destroy the observer\n    return (): void => {\n      if ('ResizeObserver' in window) {\n        observer.current?.disconnect();\n      }\n    };\n  }, [callback, ref]);\n\n  return hasOverflow;\n};\n\nconst approximatelyEqual = (v1: number, v2: number, tolerance = 1): boolean => {\n  return Math.abs(v1 - v2) < tolerance;\n};\n\n// Overlapping color of surface.background.gray.subtle + interactive.background.gray.default\n// TODO(future): design will tokenize or check if this is needed or not\nconst MIXED_BG_COLOR = '#e1e7ef';\n\nexport { useHasOverflow, approximatelyEqual, MIXED_BG_COLOR };\n"],"names":["useHasOverflow","ref","callback","observer","React","useRef","_React$useState","useState","_React$useState2","_slicedToArray","hasOverflow","setHasOverflow","useIsomorphicLayoutEffect","current","element","trigger","scrollWidth","clientWidth","window","ResizeObserver","observe","_observer$current","disconnect","approximatelyEqual","v1","v2","tolerance","arguments","length","undefined","Math","abs","MIXED_BG_COLOR"],"mappings":";;;;AAIA;AACA;AACA;AACMA,IAAAA,cAAc,GAAG,SAAjBA,cAAcA,CAClBC,GAAoC,EACpCC,QAAyC,EAC7B;AACZ,EAAA,IAAMC,QAAQ,GAAGC,cAAK,CAACC,MAAM,CAAwB,IAAI,CAAC,CAAA;AAC1D,EAAA,IAAAC,eAAA,GAAsCF,cAAK,CAACG,QAAQ,CAAU,KAAK,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAH,eAAA,EAAA,CAAA,CAAA;AAA7DI,IAAAA,WAAW,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,cAAc,GAAAH,gBAAA,CAAA,CAAA,CAAA,CAAA;AAElCI,EAAAA,yBAAyB,CAAC,YAAM;AAC9B,IAAA,IAAI,CAACX,GAAG,CAACY,OAAO,EAAE,OAAA;AAClB,IAAA,IAAMC,OAAO,GAAGb,GAAG,CAACY,OAAO,CAAA;AAE3B,IAAA,IAAME,OAAO,GAAG,SAAVA,OAAOA,GAAe;MAC1B,IAAML,WAAW,GAAGI,OAAO,CAACE,WAAW,GAAGF,OAAO,CAACG,WAAW,CAAA;MAC7DN,cAAc,CAACD,WAAW,CAAC,CAAA;AAE3B,MAAA,IAAIR,QAAQ,EAAEA,QAAQ,CAACQ,WAAW,CAAC,CAAA;KACpC,CAAA;AAEDK,IAAAA,OAAO,EAAE,CAAA;IACT,IAAI,gBAAgB,IAAIG,MAAM,EAAE;AAC9Bf,MAAAA,QAAQ,CAACU,OAAO,GAAG,IAAIM,cAAc,CAACJ,OAAO,CAAC,CAAA;AAC9CZ,MAAAA,QAAQ,CAACU,OAAO,CAACO,OAAO,CAACN,OAAO,CAAC,CAAA;AACnC,KAAA;;AAEA;AACA,IAAA,OAAO,YAAY;MACjB,IAAI,gBAAgB,IAAII,MAAM,EAAE;AAAA,QAAA,IAAAG,iBAAA,CAAA;AAC9B,QAAA,CAAAA,iBAAA,GAAAlB,QAAQ,CAACU,OAAO,MAAA,IAAA,IAAAQ,iBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAhBA,iBAAA,CAAkBC,UAAU,EAAE,CAAA;AAChC,OAAA;KACD,CAAA;AACH,GAAC,EAAE,CAACpB,QAAQ,EAAED,GAAG,CAAC,CAAC,CAAA;AAEnB,EAAA,OAAOS,WAAW,CAAA;AACpB,EAAC;AAEKa,IAAAA,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,EAAU,EAAEC,EAAU,EAA6B;AAAA,EAAA,IAA3BC,SAAS,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,CAAC,CAAA;EAC/D,OAAOG,IAAI,CAACC,GAAG,CAACP,EAAE,GAAGC,EAAE,CAAC,GAAGC,SAAS,CAAA;AACtC,EAAC;;AAED;AACA;AACMM,IAAAA,cAAc,GAAG;;;;"}
+{"version":3,"file":"utils.js","sources":["../../../../../../../src/components/TopNav/TabNav/utils.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/* eslint-disable consistent-return */\nimport type React from 'react';\nimport { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';\n\n/**\n * Hook to observe resize events on a given element\n */\nconst useResize = (\n  ref: React.RefObject<HTMLDivElement>,\n  callback?: (entry: ResizeObserverEntry) => void,\n) => {\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) return;\n    const element = ref.current;\n\n    if (!('ResizeObserver' in window)) return;\n\n    const observer = new ResizeObserver((entries) => {\n      entries.forEach((entry) => {\n        callback?.(entry);\n      });\n    });\n    observer.observe(element);\n\n    // destroy the observer\n    return (): void => {\n      if (!('ResizeObserver' in window)) return;\n      observer?.disconnect();\n    };\n  }, [callback]);\n};\n\n// Overlapping color of surface.background.gray.subtle + interactive.background.gray.default\n// TODO(future): design will tokenize or check if this is needed or not\nconst MIXED_BG_COLOR = '#e1e7ef';\n\nexport { useResize, MIXED_BG_COLOR };\n"],"names":["useResize","ref","callback","useIsomorphicLayoutEffect","current","element","window","observer","ResizeObserver","entries","forEach","entry","observe","disconnect","MIXED_BG_COLOR"],"mappings":";;AAAA;AACA;;;AAIA;AACA;AACA;AACMA,IAAAA,SAAS,GAAG,SAAZA,SAASA,CACbC,GAAoC,EACpCC,QAA+C,EAC5C;AACHC,EAAAA,yBAAyB,CAAC,YAAM;AAC9B,IAAA,IAAI,CAACF,GAAG,CAACG,OAAO,EAAE,OAAA;AAClB,IAAA,IAAMC,OAAO,GAAGJ,GAAG,CAACG,OAAO,CAAA;AAE3B,IAAA,IAAI,EAAE,gBAAgB,IAAIE,MAAM,CAAC,EAAE,OAAA;AAEnC,IAAA,IAAMC,QAAQ,GAAG,IAAIC,cAAc,CAAC,UAACC,OAAO,EAAK;AAC/CA,MAAAA,OAAO,CAACC,OAAO,CAAC,UAACC,KAAK,EAAK;AACzBT,QAAAA,QAAQ,aAARA,QAAQ,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAARA,QAAQ,CAAGS,KAAK,CAAC,CAAA;AACnB,OAAC,CAAC,CAAA;AACJ,KAAC,CAAC,CAAA;AACFJ,IAAAA,QAAQ,CAACK,OAAO,CAACP,OAAO,CAAC,CAAA;;AAEzB;AACA,IAAA,OAAO,YAAY;AACjB,MAAA,IAAI,EAAE,gBAAgB,IAAIC,MAAM,CAAC,EAAE,OAAA;AACnCC,MAAAA,QAAQ,aAARA,QAAQ,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAARA,QAAQ,CAAEM,UAAU,EAAE,CAAA;KACvB,CAAA;AACH,GAAC,EAAE,CAACX,QAAQ,CAAC,CAAC,CAAA;AAChB,EAAC;;AAED;AACA;AACMY,IAAAA,cAAc,GAAG;;;;"}

package/build/lib/web/development/components/TopNav/TopNav.web.js

@@ -1,98 +1,55 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import 'react';
-import { TopNavContext } from './TopNavContext.js';
 import '../Box/index.js';
 import '../Box/BaseBox/index.js';
-import '../Divider/index.js';
 import { SIDE_NAV_EXPANDED_L1_WIDTH_BASE, SIDE_NAV_EXPANDED_L1_WIDTH_XL } from '../SideNav/tokens.js';
 import '../../tokens/global/index.js';
 import '../../utils/index.js';
 import '../../utils/metaAttribute/index.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { componentZIndices } from '../../utils/componentZIndices.js';
+import { jsx } from 'react/jsx-runtime';
 import { size } from '../../tokens/global/size.js';
 import { Box } from '../Box/Box.js';
 import { makeSize } from '../../utils/makeSize/makeSize.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
-import { Divider } from '../Divider/Divider.js';
 
 var _excluded = ["children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var TOP_NAV_HEIGHT = size[56];
 var CONTENT_RIGHT_GAP = size[80];
-var RazorpayLinesSvg = function RazorpayLinesSvg() {
-  return /*#__PURE__*/jsxs("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "304",
-    height: "56",
-    viewBox: "0 0 304 56",
-    fill: "none",
-    children: [/*#__PURE__*/jsx("path", {
-      opacity: "0.17",
-      d: "M-20.1729 -528.246L-57.1316 -544.114C-61.2709 -545.885 -65.9797 -543.057 -65.9797 -538.799L-66 -515.846C-66 -511.217 -63.1422 -506.998 -58.6571 -505.045L21.4336 -470.072C23.427 -469.205 25.7255 -469.195 27.729 -470.062L92.7067 -498.197C97.5783 -500.302 103.141 -496.978 103.141 -491.949L103.141 -396.886C103.141 -388.781 98.1173 -381.418 90.2557 -378.018L-10.1145 -334.568C-14.986 -332.463 -20.5492 -335.787 -20.5492 -340.816V-436.66C-20.5492 -442.232 -14.3759 -445.918 -8.97546 -443.575L16.0637 -432.689C19.5724 -431.165 19.5725 -426.488 16.0739 -424.964L-55.067 -393.914C-61.7387 -391 -66 -384.742 -66 -377.847L-65.9695 -119.356C-65.9695 -115.585 -61.7895 -113.089 -58.1384 -114.68L-25.2072 -129.062C-22.0036 -130.462 -18.3015 -130.462 -15.0877 -129.071L106.416 -76.4016C110.393 -74.6777 110.403 -69.3822 106.426 -67.6392L31.7462 -35.047C28.5121 -33.6373 24.8203 -35.847 24.8203 -39.1805V-79.3637C24.8203 -87.4498 29.8342 -94.8027 37.6653 -98.2124L152.65 -148.215C156.993 -150.101 161.956 -147.139 161.956 -142.653L161.956 -56.6672C161.956 -53.9337 163.644 -51.4383 166.299 -50.2859L200.583 -35.3041C203.756 -33.9231 207.386 -36.0851 207.386 -39.3615L207.386 -59.2102C207.386 -67.3154 212.411 -74.6777 220.272 -78.0779L300.297 -112.675C305.169 -114.78 310.732 -111.456 310.732 -106.427L310.732 -11.3648C310.732 -3.25959 305.708 4.10269 297.846 7.50287L217.801 42.0905C212.929 44.1953 207.366 40.8714 207.366 35.8425V14.4604C207.366 10.1649 204.712 6.26945 200.562 4.4503L139.666 -21.9607C135.863 -23.6274 131.5 -21.0273 131.5 -17.0938L131.5 86.7882M166.281 98.6523C118.572 77.8195 44.1159 45.3065 44.1159 45.3065C41.6242 44.2208 41.6242 40.8968 44.1159 39.811L111.034 9.76487C113.2 8.82196 113.2 5.94561 111.034 5.0027L76.8005 -9.94099C73.1494 -11.5411 68.9185 -11.5411 65.2674 -9.94099L-65.3288 47.0907L25.583 86.7882L247.183 -9.55048C250.966 -11.1982 253.387 -14.7413 253.387 -18.6462L253.387 -204.704C253.387 -208.38 251.108 -211.733 247.549 -213.285L213.173 -228.296C210.468 -229.477 207.366 -227.629 207.366 -224.829L207.386 -164.397C207.386 -158.101 214.373 -153.93 220.465 -156.596L380.881 -226.658C384.766 -228.353 389.21 -225.696 389.21 -221.686L389.21 -121.242C389.21 -116.823 384.308 -113.899 380.026 -115.766L309.414 -146.577C302.611 -149.548 298.268 -155.939 298.268 -162.959V-221.752C298.268 -227.277 301.685 -232.296 307.035 -234.629L379.05 -266.079C382.915 -267.765 382.905 -272.908 379.04 -274.593L262.255 -325.234C258.278 -326.958 258.268 -332.254 262.245 -333.997L336.925 -366.589C340.159 -367.999 343.851 -365.789 343.851 -362.455L343.851 -303.224C343.851 -295.137 338.837 -287.785 331.006 -284.375L216.021 -234.372C211.678 -232.486 206.715 -235.448 206.715 -239.934L206.715 -344.969C206.715 -347.702 205.027 -350.198 202.373 -351.35L168.089 -366.332C164.916 -367.713 161.285 -365.551 161.285 -362.275V-342.426C161.285 -334.321 156.261 -326.958 148.399 -323.558L35.3262 -274.593C30.4546 -272.489 24.8915 -275.813 24.8915 -280.841L24.8915 -375.904C24.8915 -384.009 29.9156 -391.371 37.7772 -394.772L150.85 -443.737C155.722 -445.842 161.285 -442.518 161.285 -437.489V-416.106C161.285 -411.811 163.939 -407.915 168.089 -406.096L244.701 -372.599C248.505 -370.932 252.868 -373.532 252.868 -377.466L252.868 -481.348C252.868 -485.653 250.193 -489.568 246.023 -491.378L169.401 -524.56C165.597 -526.208 161.254 -523.608 161.254 -519.684V-496.578C161.254 -491.597 164.336 -487.073 169.157 -484.968L291.322 -431.622C293.813 -430.536 293.813 -427.212 291.322 -426.126L257.617 -411.411C255.451 -410.468 255.451 -407.591 257.617 -406.648L291.85 -391.705C295.502 -390.105 299.732 -390.105 303.383 -391.705L434 -448.699L343.088 -488.397L121.489 -392.076C117.705 -390.428 115.285 -386.885 115.285 -382.98L115.285 -196.923C115.285 -193.246 117.563 -189.894 121.122 -188.341L155.498 -173.331C158.203 -172.15 161.305 -173.997 161.305 -176.798L161.285 -237.23C161.285 -243.525 154.298 -247.697 148.206 -245.03L-12.2096 -174.978C-16.0946 -173.283 -20.539 -175.94 -20.539 -179.95L-20.539 -280.394C-20.539 -284.813 -15.6369 -287.737 -11.3552 -285.87L59.2567 -255.059C66.0606 -252.087 70.4034 -245.697 70.4034 -238.677L70.4034 -179.884C70.4034 -174.359 66.9861 -169.34 61.6366 -167.007L-8.56866 -136.348",
-      stroke: "url(#paint0_linear_89426_105396)",
-      strokeMiterlimit: "10"
-    }), /*#__PURE__*/jsx("defs", {
-      children: /*#__PURE__*/jsxs("linearGradient", {
-        id: "paint0_linear_89426_105396",
-        x1: "162.854",
-        y1: "63.9672",
-        x2: "160.504",
-        y2: "-544.656",
-        gradientUnits: "userSpaceOnUse",
-        children: [/*#__PURE__*/jsx("stop", {
-          stopColor: "#6F9ADA"
-        }), /*#__PURE__*/jsx("stop", {
-          offset: "1",
-          stopColor: "white"
-        })]
-      })
-    })]
-  });
-};
 var TopNav = function TopNav(_ref) {
   var children = _ref.children,
-    styledProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/jsx(TopNavContext.Provider, {
-    value: {
-      backgroundColor: styledProps.backgroundColor
+    boxProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread(_objectSpread({
+    display: "grid",
+    gridTemplateColumns: "auto minmax(0, 1fr) auto",
+    alignItems: "center",
+    position: "sticky",
+    top: "0px",
+    width: "100%",
+    paddingY: {
+      base: 'spacing.3',
+      m: 'spacing.0'
     },
-    children: /*#__PURE__*/jsxs(Box, _objectSpread(_objectSpread(_objectSpread({
-      display: "grid",
-      gridTemplateColumns: {
-        base: 'minmax(0, 1fr) auto',
-        m: 'auto minmax(0, 1fr) auto'
-      },
-      alignItems: "center",
-      position: "sticky",
-      top: "0px",
-      width: "100%",
-      paddingX: "spacing.3",
-      height: makeSize(TOP_NAV_HEIGHT),
-      zIndex: 1
-    }, styledProps), metaAttribute({
-      name: MetaConstants.TopNav
-    })), {}, {
-      children: [children, /*#__PURE__*/jsx(Box, {
-        position: "absolute",
-        top: "0px",
-        left: "0px",
-        pointerEvents: "none",
-        children: /*#__PURE__*/jsx(RazorpayLinesSvg, {})
-      })]
-    }))
-  });
+    paddingX: {
+      base: 'spacing.4',
+      m: 'spacing.3'
+    },
+    height: makeSize(TOP_NAV_HEIGHT),
+    zIndex: componentZIndices.topnav
+  }, boxProps), metaAttribute({
+    name: MetaConstants.TopNav
+  })), {}, {
+    children: children
+  }));
 };
 var TopNavBrand = function TopNavBrand(_ref2) {
   var children = _ref2.children;
-  return /*#__PURE__*/jsxs(Box, _objectSpread(_objectSpread({
-    display: {
-      base: 'none',
-      m: 'flex'
-    },
+  return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({
     flexDirection: "row",
     marginTop: "spacing.4",
     width: {
@@ -102,23 +59,11 @@ var TopNavBrand = function TopNavBrand(_ref2) {
   }, metaAttribute({
     name: MetaConstants.TopNavBrand
   })), {}, {
-    children: [/*#__PURE__*/jsx(BaseBox, {
+    children: /*#__PURE__*/jsx(BaseBox, {
       width: "100%",
       textAlign: "center",
       children: children
-    }), /*#__PURE__*/jsx(Box, {
-      alignSelf: "center",
-      display: {
-        base: 'none',
-        m: 'block'
-      },
-      children: /*#__PURE__*/jsx(Divider, {
-        marginRight: "-1px",
-        height: makeSize(size[20]),
-        alignSelf: "center",
-        orientation: "vertical"
-      })
-    })]
+    })
   }));
 };
 var TopNavContent = function TopNavContent(_ref3) {
@@ -126,10 +71,7 @@ var TopNavContent = function TopNavContent(_ref3) {
   return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
     display: "flex",
     alignItems: "center",
-    marginLeft: {
-      base: 'spacing.0',
-      m: 'spacing.4'
-    },
+    alignSelf: "end",
     paddingRight: {
       base: 'spacing.0',
       m: makeSize(CONTENT_RIGHT_GAP)
@@ -143,10 +85,15 @@ var TopNavContent = function TopNavContent(_ref3) {
 var TopNavActions = function TopNavActions(_ref4) {
   var children = _ref4.children;
   return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
+    alignSelf: "end",
     display: "flex",
     gap: "spacing.3",
     alignItems: "center",
-    marginTop: "spacing.1"
+    marginTop: "spacing.1",
+    padding: "spacing.3",
+    backgroundColor: "surface.background.gray.intense",
+    borderTopLeftRadius: "medium",
+    borderTopRightRadius: "medium"
   }, metaAttribute({
     name: MetaConstants.TopNavActions
   })), {}, {

package/build/lib/web/development/components/TopNav/TopNav.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"TopNav.web.js","sources":["../../../../../../src/components/TopNav/TopNav.web.tsx"],"sourcesContent":["import React from 'react';\nimport { TopNavContext } from './TopNavContext';\nimport type { BoxProps } from '~components/Box';\nimport { Box } from '~components/Box';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Divider } from '~components/Divider';\nimport {\n  SIDE_NAV_EXPANDED_L1_WIDTH_XL,\n  SIDE_NAV_EXPANDED_L1_WIDTH_BASE,\n} from '~components/SideNav/tokens';\nimport { size } from '~tokens/global';\nimport { makeSize } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\nconst TOP_NAV_HEIGHT = size[56];\nconst CONTENT_RIGHT_GAP = size[80];\n\nconst RazorpayLinesSvg = (): React.ReactElement => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"304\"\n      height=\"56\"\n      viewBox=\"0 0 304 56\"\n      fill=\"none\"\n    >\n      <path\n        opacity=\"0.17\"\n        d=\"M-20.1729 -528.246L-57.1316 -544.114C-61.2709 -545.885 -65.9797 -543.057 -65.9797 -538.799L-66 -515.846C-66 -511.217 -63.1422 -506.998 -58.6571 -505.045L21.4336 -470.072C23.427 -469.205 25.7255 -469.195 27.729 -470.062L92.7067 -498.197C97.5783 -500.302 103.141 -496.978 103.141 -491.949L103.141 -396.886C103.141 -388.781 98.1173 -381.418 90.2557 -378.018L-10.1145 -334.568C-14.986 -332.463 -20.5492 -335.787 -20.5492 -340.816V-436.66C-20.5492 -442.232 -14.3759 -445.918 -8.97546 -443.575L16.0637 -432.689C19.5724 -431.165 19.5725 -426.488 16.0739 -424.964L-55.067 -393.914C-61.7387 -391 -66 -384.742 -66 -377.847L-65.9695 -119.356C-65.9695 -115.585 -61.7895 -113.089 -58.1384 -114.68L-25.2072 -129.062C-22.0036 -130.462 -18.3015 -130.462 -15.0877 -129.071L106.416 -76.4016C110.393 -74.6777 110.403 -69.3822 106.426 -67.6392L31.7462 -35.047C28.5121 -33.6373 24.8203 -35.847 24.8203 -39.1805V-79.3637C24.8203 -87.4498 29.8342 -94.8027 37.6653 -98.2124L152.65 -148.215C156.993 -150.101 161.956 -147.139 161.956 -142.653L161.956 -56.6672C161.956 -53.9337 163.644 -51.4383 166.299 -50.2859L200.583 -35.3041C203.756 -33.9231 207.386 -36.0851 207.386 -39.3615L207.386 -59.2102C207.386 -67.3154 212.411 -74.6777 220.272 -78.0779L300.297 -112.675C305.169 -114.78 310.732 -111.456 310.732 -106.427L310.732 -11.3648C310.732 -3.25959 305.708 4.10269 297.846 7.50287L217.801 42.0905C212.929 44.1953 207.366 40.8714 207.366 35.8425V14.4604C207.366 10.1649 204.712 6.26945 200.562 4.4503L139.666 -21.9607C135.863 -23.6274 131.5 -21.0273 131.5 -17.0938L131.5 86.7882M166.281 98.6523C118.572 77.8195 44.1159 45.3065 44.1159 45.3065C41.6242 44.2208 41.6242 40.8968 44.1159 39.811L111.034 9.76487C113.2 8.82196 113.2 5.94561 111.034 5.0027L76.8005 -9.94099C73.1494 -11.5411 68.9185 -11.5411 65.2674 -9.94099L-65.3288 47.0907L25.583 86.7882L247.183 -9.55048C250.966 -11.1982 253.387 -14.7413 253.387 -18.6462L253.387 -204.704C253.387 -208.38 251.108 -211.733 247.549 -213.285L213.173 -228.296C210.468 -229.477 207.366 -227.629 207.366 -224.829L207.386 -164.397C207.386 -158.101 214.373 -153.93 220.465 -156.596L380.881 -226.658C384.766 -228.353 389.21 -225.696 389.21 -221.686L389.21 -121.242C389.21 -116.823 384.308 -113.899 380.026 -115.766L309.414 -146.577C302.611 -149.548 298.268 -155.939 298.268 -162.959V-221.752C298.268 -227.277 301.685 -232.296 307.035 -234.629L379.05 -266.079C382.915 -267.765 382.905 -272.908 379.04 -274.593L262.255 -325.234C258.278 -326.958 258.268 -332.254 262.245 -333.997L336.925 -366.589C340.159 -367.999 343.851 -365.789 343.851 -362.455L343.851 -303.224C343.851 -295.137 338.837 -287.785 331.006 -284.375L216.021 -234.372C211.678 -232.486 206.715 -235.448 206.715 -239.934L206.715 -344.969C206.715 -347.702 205.027 -350.198 202.373 -351.35L168.089 -366.332C164.916 -367.713 161.285 -365.551 161.285 -362.275V-342.426C161.285 -334.321 156.261 -326.958 148.399 -323.558L35.3262 -274.593C30.4546 -272.489 24.8915 -275.813 24.8915 -280.841L24.8915 -375.904C24.8915 -384.009 29.9156 -391.371 37.7772 -394.772L150.85 -443.737C155.722 -445.842 161.285 -442.518 161.285 -437.489V-416.106C161.285 -411.811 163.939 -407.915 168.089 -406.096L244.701 -372.599C248.505 -370.932 252.868 -373.532 252.868 -377.466L252.868 -481.348C252.868 -485.653 250.193 -489.568 246.023 -491.378L169.401 -524.56C165.597 -526.208 161.254 -523.608 161.254 -519.684V-496.578C161.254 -491.597 164.336 -487.073 169.157 -484.968L291.322 -431.622C293.813 -430.536 293.813 -427.212 291.322 -426.126L257.617 -411.411C255.451 -410.468 255.451 -407.591 257.617 -406.648L291.85 -391.705C295.502 -390.105 299.732 -390.105 303.383 -391.705L434 -448.699L343.088 -488.397L121.489 -392.076C117.705 -390.428 115.285 -386.885 115.285 -382.98L115.285 -196.923C115.285 -193.246 117.563 -189.894 121.122 -188.341L155.498 -173.331C158.203 -172.15 161.305 -173.997 161.305 -176.798L161.285 -237.23C161.285 -243.525 154.298 -247.697 148.206 -245.03L-12.2096 -174.978C-16.0946 -173.283 -20.539 -175.94 -20.539 -179.95L-20.539 -280.394C-20.539 -284.813 -15.6369 -287.737 -11.3552 -285.87L59.2567 -255.059C66.0606 -252.087 70.4034 -245.697 70.4034 -238.677L70.4034 -179.884C70.4034 -174.359 66.9861 -169.34 61.6366 -167.007L-8.56866 -136.348\"\n        stroke=\"url(#paint0_linear_89426_105396)\"\n        strokeMiterlimit=\"10\"\n      />\n      <defs>\n        <linearGradient\n          id=\"paint0_linear_89426_105396\"\n          x1=\"162.854\"\n          y1=\"63.9672\"\n          x2=\"160.504\"\n          y2=\"-544.656\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stopColor=\"#6F9ADA\" />\n          <stop offset=\"1\" stopColor=\"white\" />\n        </linearGradient>\n      </defs>\n    </svg>\n  );\n};\n\ntype TopNavProps = {\n  children: React.ReactNode;\n} & Pick<\n  BoxProps,\n  | 'padding'\n  | 'paddingTop'\n  | 'paddingBottom'\n  | 'paddingLeft'\n  | 'paddingRight'\n  | 'paddingX'\n  | 'paddingY'\n  | 'backgroundColor'\n  | 'position'\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right'\n  | 'width'\n  | 'zIndex'\n>;\n\nconst TopNav = ({ children, ...styledProps }: TopNavProps): React.ReactElement => {\n  return (\n    <TopNavContext.Provider value={{ backgroundColor: styledProps.backgroundColor }}>\n      <Box\n        display=\"grid\"\n        gridTemplateColumns={{ base: 'minmax(0, 1fr) auto', m: 'auto minmax(0, 1fr) auto' }}\n        alignItems=\"center\"\n        position=\"sticky\"\n        top=\"0px\"\n        width=\"100%\"\n        paddingX=\"spacing.3\"\n        height={makeSize(TOP_NAV_HEIGHT)}\n        zIndex={1}\n        {...styledProps}\n        {...metaAttribute({ name: MetaConstants.TopNav })}\n      >\n        {children}\n        <Box position=\"absolute\" top=\"0px\" left=\"0px\" pointerEvents=\"none\">\n          <RazorpayLinesSvg />\n        </Box>\n      </Box>\n    </TopNavContext.Provider>\n  );\n};\n\nconst TopNavBrand = ({ children }: { children: React.ReactNode }): React.ReactElement => {\n  return (\n    <Box\n      display={{\n        base: 'none',\n        m: 'flex',\n      }}\n      flexDirection=\"row\"\n      marginTop=\"spacing.4\"\n      width={{\n        base: makeSize(SIDE_NAV_EXPANDED_L1_WIDTH_BASE),\n        xl: makeSize(SIDE_NAV_EXPANDED_L1_WIDTH_XL),\n      }}\n      {...metaAttribute({ name: MetaConstants.TopNavBrand })}\n    >\n      <BaseBox width=\"100%\" textAlign=\"center\">\n        {children}\n      </BaseBox>\n      <Box alignSelf=\"center\" display={{ base: 'none', m: 'block' }}>\n        <Divider\n          marginRight=\"-1px\"\n          height={makeSize(size[20])}\n          alignSelf=\"center\"\n          orientation=\"vertical\"\n        />\n      </Box>\n    </Box>\n  );\n};\n\nconst TopNavContent = ({ children }: { children: React.ReactNode }): React.ReactElement => {\n  return (\n    <BaseBox\n      display=\"flex\"\n      alignItems=\"center\"\n      marginLeft={{ base: 'spacing.0', m: 'spacing.4' }}\n      paddingRight={{ base: 'spacing.0', m: makeSize(CONTENT_RIGHT_GAP) }}\n      {...metaAttribute({ name: MetaConstants.TopNavContent })}\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nconst TopNavActions = ({ children }: { children: React.ReactNode }): React.ReactElement => {\n  return (\n    <BaseBox\n      display=\"flex\"\n      gap=\"spacing.3\"\n      alignItems=\"center\"\n      marginTop=\"spacing.1\"\n      {...metaAttribute({ name: MetaConstants.TopNavActions })}\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nexport { TopNav, TopNavBrand, TopNavContent, TopNavActions };\nexport type { TopNavProps };\n"],"names":["TOP_NAV_HEIGHT","size","CONTENT_RIGHT_GAP","RazorpayLinesSvg","_jsxs","xmlns","width","height","viewBox","fill","children","_jsx","opacity","d","stroke","strokeMiterlimit","id","x1","y1","x2","y2","gradientUnits","stopColor","offset","TopNav","_ref","styledProps","_objectWithoutProperties","_excluded","TopNavContext","Provider","value","backgroundColor","Box","_objectSpread","display","gridTemplateColumns","base","m","alignItems","position","top","paddingX","makeSize","zIndex","metaAttribute","name","MetaConstants","left","pointerEvents","TopNavBrand","_ref2","flexDirection","marginTop","SIDE_NAV_EXPANDED_L1_WIDTH_BASE","xl","SIDE_NAV_EXPANDED_L1_WIDTH_XL","BaseBox","textAlign","alignSelf","Divider","marginRight","orientation","TopNavContent","_ref3","marginLeft","paddingRight","TopNavActions","_ref4","gap"],"mappings":"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"}
+{"version":3,"file":"TopNav.web.js","sources":["../../../../../../src/components/TopNav/TopNav.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { BoxProps } from '~components/Box';\nimport { Box } from '~components/Box';\nimport BaseBox from '~components/Box/BaseBox';\nimport {\n  SIDE_NAV_EXPANDED_L1_WIDTH_XL,\n  SIDE_NAV_EXPANDED_L1_WIDTH_BASE,\n} from '~components/SideNav/tokens';\nimport { size } from '~tokens/global';\nimport { makeSize } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { componentZIndices } from '~utils/componentZIndices';\n\nconst TOP_NAV_HEIGHT = size[56];\nconst CONTENT_RIGHT_GAP = size[80];\n\ntype TopNavProps = {\n  children: React.ReactNode;\n} & Pick<\n  BoxProps,\n  | 'padding'\n  | 'paddingTop'\n  | 'paddingBottom'\n  | 'paddingLeft'\n  | 'paddingRight'\n  | 'paddingX'\n  | 'paddingY'\n  | 'backgroundColor'\n  | 'position'\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right'\n  | 'width'\n  | 'zIndex'\n> &\n  StyledPropsBlade;\n\nconst TopNav = ({ children, ...boxProps }: TopNavProps): React.ReactElement => {\n  return (\n    <Box\n      display=\"grid\"\n      gridTemplateColumns=\"auto minmax(0, 1fr) auto\"\n      alignItems=\"center\"\n      position=\"sticky\"\n      top=\"0px\"\n      width=\"100%\"\n      paddingY={{ base: 'spacing.3', m: 'spacing.0' }}\n      paddingX={{ base: 'spacing.4', m: 'spacing.3' }}\n      height={makeSize(TOP_NAV_HEIGHT)}\n      zIndex={componentZIndices.topnav}\n      {...boxProps}\n      {...metaAttribute({ name: MetaConstants.TopNav })}\n    >\n      {children}\n    </Box>\n  );\n};\n\nconst TopNavBrand = ({ children }: { children: React.ReactNode }): React.ReactElement => {\n  return (\n    <Box\n      flexDirection=\"row\"\n      marginTop=\"spacing.4\"\n      width={{\n        base: makeSize(SIDE_NAV_EXPANDED_L1_WIDTH_BASE),\n        xl: makeSize(SIDE_NAV_EXPANDED_L1_WIDTH_XL),\n      }}\n      {...metaAttribute({ name: MetaConstants.TopNavBrand })}\n    >\n      <BaseBox width=\"100%\" textAlign=\"center\">\n        {children}\n      </BaseBox>\n    </Box>\n  );\n};\n\nconst TopNavContent = ({ children }: { children: React.ReactNode }): React.ReactElement => {\n  return (\n    <BaseBox\n      display=\"flex\"\n      alignItems=\"center\"\n      alignSelf=\"end\"\n      paddingRight={{ base: 'spacing.0', m: makeSize(CONTENT_RIGHT_GAP) }}\n      {...metaAttribute({ name: MetaConstants.TopNavContent })}\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nconst TopNavActions = ({ children }: { children: React.ReactNode }): React.ReactElement => {\n  return (\n    <BaseBox\n      alignSelf=\"end\"\n      display=\"flex\"\n      gap=\"spacing.3\"\n      alignItems=\"center\"\n      marginTop=\"spacing.1\"\n      padding=\"spacing.3\"\n      backgroundColor=\"surface.background.gray.intense\"\n      borderTopLeftRadius=\"medium\"\n      borderTopRightRadius=\"medium\"\n      {...metaAttribute({ name: MetaConstants.TopNavActions })}\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nexport { TopNav, TopNavBrand, TopNavContent, TopNavActions };\nexport type { TopNavProps };\n"],"names":["TOP_NAV_HEIGHT","size","CONTENT_RIGHT_GAP","TopNav","_ref","children","boxProps","_objectWithoutProperties","_excluded","_jsx","Box","_objectSpread","display","gridTemplateColumns","alignItems","position","top","width","paddingY","base","m","paddingX","height","makeSize","zIndex","componentZIndices","topnav","metaAttribute","name","MetaConstants","TopNavBrand","_ref2","flexDirection","marginTop","SIDE_NAV_EXPANDED_L1_WIDTH_BASE","xl","SIDE_NAV_EXPANDED_L1_WIDTH_XL","BaseBox","textAlign","TopNavContent","_ref3","alignSelf","paddingRight","TopNavActions","_ref4","gap","padding","backgroundColor","borderTopLeftRadius","borderTopRightRadius"],"mappings":"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"}

package/build/lib/web/development/components/index.js

@@ -513,7 +513,7 @@ export { Tooltip } from './Tooltip/Tooltip.web.js';
 export { TooltipInteractiveWrapper } from './Tooltip/TooltipInteractiveWrapper.web.js';
 export { ToastContainer } from './Toast/ToastContainer.web.js';
 export { useToast } from './Toast/useToast.js';
-export { TabNav } from './TopNav/TabNav/TabNav.web.js';
+export { TabNav, TabNavItems } from './TopNav/TabNav/TabNav.web.js';
 export { TabNavItem } from './TopNav/TabNav/TabNavItem.web.js';
 export { TopNav, TopNavActions, TopNavBrand, TopNavContent } from './TopNav/TopNav.web.js';
 export { Heading, getHeadingProps } from './Typography/Heading/Heading.js';

package/build/lib/web/development/tokens/global/size.js

@@ -76,6 +76,8 @@ var size = {
   176: 176,
   /** 200 px */
   200: 200,
+  /** 208 px */
+  208: 208,
   /** 240 px */
   240: 240,
   /** 245 px */

package/build/lib/web/development/tokens/global/size.js.map

@@ -1 +1 @@
-{"version":3,"file":"size.js","sources":["../../../../../../src/tokens/global/size.ts"],"sourcesContent":["/**\n * Size tokens are currently not exposed for users (therefore not available in theme)\n */\nexport const size = {\n  /** 0 px */\n  0: 0,\n  /** 1 px */\n  1: 1,\n  /** 2 px */\n  2: 2,\n  /** 3 px */\n  3: 3,\n  /** 4 px */\n  4: 4,\n  /** 5 px */\n  5: 5,\n  /** 6 px */\n  6: 6,\n  /** 7 px */\n  7: 7,\n  /** 8 px */\n  8: 8,\n  /** 10 px */\n  10: 10,\n  /** 12 px */\n  12: 12,\n  /** 14 px */\n  14: 14,\n  /** 15 px */\n  15: 15,\n  /** 16 px */\n  16: 16,\n  /** 18 px */\n  18: 18,\n  /** 20 px */\n  20: 20,\n  /** 24 px */\n  24: 24,\n  /** 28 px */\n  28: 28,\n  /** 32 px */\n  30: 30,\n  /** 32 px */\n  32: 32,\n  /** 33 px */\n  33: 33,\n  /** 36 px */\n  36: 36,\n  /** 40 px */\n  40: 40,\n  /** 44 px */\n  44: 44,\n  /** 48 px */\n  48: 48,\n  /** 52 px */\n  52: 52,\n  /** 56 px */\n  56: 56,\n  /** 60 px */\n  60: 60,\n  /** 64 px */\n  64: 64,\n  /** 72 px */\n  72: 72,\n  /** 80 px */\n  80: 80,\n  /** 100 px */\n  100: 100,\n  /** 120 px */\n  120: 120,\n  /** 140 px */\n  140: 140,\n  /** 160 px */\n  160: 160,\n  /** 176 px */\n  176: 176,\n  /** 200 px */\n  200: 200,\n  /** 240 px */\n  240: 240,\n  /** 245 px */\n  245: 245,\n  /** 256 px */\n  256: 256,\n  /** 264 px */\n  264: 264,\n  /** 300 px */\n  300: 300,\n  /** 314 px */\n  314: 314,\n  /** 360 px */\n  360: 360,\n  /** 400 px */\n  400: 400,\n  /** 584 px */\n  584: 584,\n  /** 640 px */\n  640: 640,\n  /** 760 px */\n  760: 760,\n  /** 800 px */\n  800: 800,\n  /** 1024 px */\n  1024: 1024,\n  /** 1136 px */\n  1136: 1136,\n} as const;\n\nexport type Size = typeof size;\n"],"names":["size"],"mappings":"AAAA;AACA;AACA;AACO,IAAMA,IAAI,GAAG;AAClB;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,IAAI,EAAE,IAAI;AACV;AACA,EAAA,IAAI,EAAE,IAAA;AACR;;;;"}
+{"version":3,"file":"size.js","sources":["../../../../../../src/tokens/global/size.ts"],"sourcesContent":["/**\n * Size tokens are currently not exposed for users (therefore not available in theme)\n */\nexport const size = {\n  /** 0 px */\n  0: 0,\n  /** 1 px */\n  1: 1,\n  /** 2 px */\n  2: 2,\n  /** 3 px */\n  3: 3,\n  /** 4 px */\n  4: 4,\n  /** 5 px */\n  5: 5,\n  /** 6 px */\n  6: 6,\n  /** 7 px */\n  7: 7,\n  /** 8 px */\n  8: 8,\n  /** 10 px */\n  10: 10,\n  /** 12 px */\n  12: 12,\n  /** 14 px */\n  14: 14,\n  /** 15 px */\n  15: 15,\n  /** 16 px */\n  16: 16,\n  /** 18 px */\n  18: 18,\n  /** 20 px */\n  20: 20,\n  /** 24 px */\n  24: 24,\n  /** 28 px */\n  28: 28,\n  /** 32 px */\n  30: 30,\n  /** 32 px */\n  32: 32,\n  /** 33 px */\n  33: 33,\n  /** 36 px */\n  36: 36,\n  /** 40 px */\n  40: 40,\n  /** 44 px */\n  44: 44,\n  /** 48 px */\n  48: 48,\n  /** 52 px */\n  52: 52,\n  /** 56 px */\n  56: 56,\n  /** 60 px */\n  60: 60,\n  /** 64 px */\n  64: 64,\n  /** 72 px */\n  72: 72,\n  /** 80 px */\n  80: 80,\n  /** 100 px */\n  100: 100,\n  /** 120 px */\n  120: 120,\n  /** 140 px */\n  140: 140,\n  /** 160 px */\n  160: 160,\n  /** 176 px */\n  176: 176,\n  /** 200 px */\n  200: 200,\n  /** 208 px */\n  208: 208,\n  /** 240 px */\n  240: 240,\n  /** 245 px */\n  245: 245,\n  /** 256 px */\n  256: 256,\n  /** 264 px */\n  264: 264,\n  /** 300 px */\n  300: 300,\n  /** 314 px */\n  314: 314,\n  /** 360 px */\n  360: 360,\n  /** 400 px */\n  400: 400,\n  /** 584 px */\n  584: 584,\n  /** 640 px */\n  640: 640,\n  /** 760 px */\n  760: 760,\n  /** 800 px */\n  800: 800,\n  /** 1024 px */\n  1024: 1024,\n  /** 1136 px */\n  1136: 1136,\n} as const;\n\nexport type Size = typeof size;\n"],"names":["size"],"mappings":"AAAA;AACA;AACA;AACO,IAAMA,IAAI,GAAG;AAClB;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,IAAI,EAAE,IAAI;AACV;AACA,EAAA,IAAI,EAAE,IAAA;AACR;;;;"}

package/build/lib/web/development/utils/componentZIndices.js

@@ -6,7 +6,8 @@ var componentZIndices = {
   dropdownOverlay: 1002,
   tourMask: 1100,
   popover: 1100,
-  tooltip: 1100
+  tooltip: 1100,
+  topnav: 100
 };
 
 export { componentZIndices };

package/build/lib/web/development/utils/componentZIndices.js.map

@@ -1 +1 @@
-{"version":3,"file":"componentZIndices.js","sources":["../../../../../src/utils/componentZIndices.ts"],"sourcesContent":["// TODO: Move these properly to tokens at some point\nexport const componentZIndices = {\n  bottomSheet: 100,\n  modal: 1000,\n  drawer: 1001,\n  dropdownOverlay: 1002,\n  tourMask: 1100,\n  popover: 1100,\n  tooltip: 1100,\n};\n"],"names":["componentZIndices","bottomSheet","modal","drawer","dropdownOverlay","tourMask","popover","tooltip"],"mappings":"AAAA;AACO,IAAMA,iBAAiB,GAAG;AAC/BC,EAAAA,WAAW,EAAE,GAAG;AAChBC,EAAAA,KAAK,EAAE,IAAI;AACXC,EAAAA,MAAM,EAAE,IAAI;AACZC,EAAAA,eAAe,EAAE,IAAI;AACrBC,EAAAA,QAAQ,EAAE,IAAI;AACdC,EAAAA,OAAO,EAAE,IAAI;AACbC,EAAAA,OAAO,EAAE,IAAA;AACX;;;;"}
+{"version":3,"file":"componentZIndices.js","sources":["../../../../../src/utils/componentZIndices.ts"],"sourcesContent":["// TODO: Move these properly to tokens at some point\nexport const componentZIndices = {\n  bottomSheet: 100,\n  modal: 1000,\n  drawer: 1001,\n  dropdownOverlay: 1002,\n  tourMask: 1100,\n  popover: 1100,\n  tooltip: 1100,\n  topnav: 100,\n};\n"],"names":["componentZIndices","bottomSheet","modal","drawer","dropdownOverlay","tourMask","popover","tooltip","topnav"],"mappings":"AAAA;AACO,IAAMA,iBAAiB,GAAG;AAC/BC,EAAAA,WAAW,EAAE,GAAG;AAChBC,EAAAA,KAAK,EAAE,IAAI;AACXC,EAAAA,MAAM,EAAE,IAAI;AACZC,EAAAA,eAAe,EAAE,IAAI;AACrBC,EAAAA,QAAQ,EAAE,IAAI;AACdC,EAAAA,OAAO,EAAE,IAAI;AACbC,EAAAA,OAAO,EAAE,IAAI;AACbC,EAAAA,MAAM,EAAE,GAAA;AACV;;;;"}

package/build/lib/web/production/components/Button/IconButton/IconButton.js

@@ -25,6 +25,7 @@ var _IconButton = function _IconButton(_ref, ref) {
     onPointerEnter = _ref.onPointerEnter,
     onTouchEnd = _ref.onTouchEnd,
     onTouchStart = _ref.onTouchStart,
+    isHighlighted = _ref.isHighlighted,
     _tabIndex = _ref._tabIndex;
   return /*#__PURE__*/jsx(StyledIconButton, {
     ref: ref,
@@ -35,6 +36,7 @@ var _IconButton = function _IconButton(_ref, ref) {
     tabIndex: _tabIndex,
     accessibilityLabel: accessibilityLabel,
     isDisabled: isDisabled,
+    isHighlighted: isHighlighted,
     onBlur: onBlur,
     onFocus: onFocus,
     onMouseLeave: onMouseLeave,

package/build/lib/web/production/components/Button/IconButton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../../../../../src/components/Button/IconButton/IconButton.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable react/display-name */\nimport React from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport StyledIconButton from './StyledIconButton';\nimport type { IconComponent } from '~components/Icons';\nimport type { BladeElementRef } from '~utils/types';\nimport type { BladeCommonEvents } from '~components/types';\nimport type { Platform } from '~utils';\nimport type { SubtleOrIntense } from '~tokens/theme/theme';\n\ntype IconButtonProps = {\n  /**\n   * Icon component to be rendered, eg. `CloseIcon`\n   */\n  icon: IconComponent;\n\n  /**\n   * Icon size\n   *\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Icon contrast\n   *\n   * @default 'intense'\n   */\n  emphasis?: SubtleOrIntense;\n\n  /**\n   * Sets aria-label to help users know what the action does, eg 'Dismiss alert'\n   */\n  accessibilityLabel: string;\n\n  /**\n   * Disabled state for IconButton\n   */\n  isDisabled?: boolean;\n\n  /**\n   * Sets tabindex property on button element\n   */\n  _tabIndex?: number;\n} & BladeCommonEvents &\n  Platform.Select<{\n    web: {\n      onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    };\n    native: {\n      onClick: (event: GestureResponderEvent) => void;\n    };\n  }>;\n\n/**\n * Component for making clickable icons with transparent background.\n * For other cases please use `Button` component with `icon` prop.\n */\nconst _IconButton: React.ForwardRefRenderFunction<BladeElementRef, IconButtonProps> = (\n  {\n    icon,\n    onClick,\n    size = 'medium',\n    emphasis = 'intense',\n    accessibilityLabel,\n    isDisabled,\n    onBlur,\n    onFocus,\n    onMouseLeave,\n    onMouseMove,\n    onPointerDown,\n    onPointerEnter,\n    onTouchEnd,\n    onTouchStart,\n    _tabIndex,\n  },\n  ref,\n) => {\n  return (\n    <StyledIconButton\n      ref={ref as any}\n      onClick={onClick}\n      emphasis={emphasis}\n      size={size}\n      icon={icon}\n      tabIndex={_tabIndex}\n      accessibilityLabel={accessibilityLabel}\n      isDisabled={isDisabled}\n      onBlur={onBlur}\n      onFocus={onFocus}\n      onMouseLeave={onMouseLeave}\n      onMouseMove={onMouseMove}\n      onPointerDown={onPointerDown}\n      onPointerEnter={onPointerEnter}\n      onTouchEnd={onTouchEnd}\n      onTouchStart={onTouchStart}\n    />\n  );\n};\n\nconst IconButton = React.forwardRef(_IconButton);\n\nexport type { IconButtonProps };\nexport { IconButton };\n"],"names":["_IconButton","_ref","ref","icon","onClick","_ref$size","size","_ref$emphasis","emphasis","accessibilityLabel","isDisabled","onBlur","onFocus","onMouseLeave","onMouseMove","onPointerDown","onPointerEnter","onTouchEnd","onTouchStart","_tabIndex","_jsx","StyledIconButton","tabIndex","IconButton","React","forwardRef"],"mappings":";;;;AAAA;AACA;AAsDA;AACA;AACA;AACA;AACA,IAAMA,WAA6E,GAAG,SAAhFA,WAA6EA,CAAAC,IAAA,EAkBjFC,GAAG,EACA;AAAA,EAAA,IAjBDC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IACJC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IAAAC,SAAA,GAAAJ,IAAA,CACPK,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA;IAAAE,aAAA,GAAAN,IAAA,CACfO,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,aAAA,KAAG,KAAA,CAAA,GAAA,SAAS,GAAAA,aAAA;IACpBE,kBAAkB,GAAAR,IAAA,CAAlBQ,kBAAkB;IAClBC,UAAU,GAAAT,IAAA,CAAVS,UAAU;IACVC,MAAM,GAAAV,IAAA,CAANU,MAAM;IACNC,OAAO,GAAAX,IAAA,CAAPW,OAAO;IACPC,YAAY,GAAAZ,IAAA,CAAZY,YAAY;IACZC,WAAW,GAAAb,IAAA,CAAXa,WAAW;IACXC,aAAa,GAAAd,IAAA,CAAbc,aAAa;IACbC,cAAc,GAAAf,IAAA,CAAde,cAAc;IACdC,UAAU,GAAAhB,IAAA,CAAVgB,UAAU;IACVC,YAAY,GAAAjB,IAAA,CAAZiB,YAAY;IACZC,SAAS,GAAAlB,IAAA,CAATkB,SAAS,CAAA;EAIX,oBACEC,GAAA,CAACC,gBAAgB,EAAA;AACfnB,IAAAA,GAAG,EAAEA,GAAW;AAChBE,IAAAA,OAAO,EAAEA,OAAQ;AACjBI,IAAAA,QAAQ,EAAEA,QAAS;AACnBF,IAAAA,IAAI,EAAEA,IAAK;AACXH,IAAAA,IAAI,EAAEA,IAAK;AACXmB,IAAAA,QAAQ,EAAEH,SAAU;AACpBV,IAAAA,kBAAkB,EAAEA,kBAAmB;AACvCC,IAAAA,UAAU,EAAEA,UAAW;AACvBC,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,YAAY,EAAEA,YAAa;AAC3BC,IAAAA,WAAW,EAAEA,WAAY;AACzBC,IAAAA,aAAa,EAAEA,aAAc;AAC7BC,IAAAA,cAAc,EAAEA,cAAe;AAC/BC,IAAAA,UAAU,EAAEA,UAAW;AACvBC,IAAAA,YAAY,EAAEA,YAAAA;AAAa,GAC5B,CAAC,CAAA;AAEN,CAAC,CAAA;AAED,IAAMK,UAAU,gBAAGC,cAAK,CAACC,UAAU,CAACzB,WAAW;;;;"}
+{"version":3,"file":"IconButton.js","sources":["../../../../../../../src/components/Button/IconButton/IconButton.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable react/display-name */\nimport React from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport StyledIconButton from './StyledIconButton';\nimport type { IconComponent } from '~components/Icons';\nimport type { BladeElementRef } from '~utils/types';\nimport type { BladeCommonEvents } from '~components/types';\nimport type { Platform } from '~utils';\nimport type { SubtleOrIntense } from '~tokens/theme/theme';\n\ntype IconButtonProps = {\n  /**\n   * Icon component to be rendered, eg. `CloseIcon`\n   */\n  icon: IconComponent;\n\n  /**\n   * Icon size\n   *\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Icon contrast\n   *\n   * @default 'intense'\n   */\n  emphasis?: SubtleOrIntense;\n\n  /**\n   * Sets aria-label to help users know what the action does, eg 'Dismiss alert'\n   */\n  accessibilityLabel: string;\n\n  /**\n   * Disabled state for IconButton\n   */\n  isDisabled?: boolean;\n\n  /**\n   * Sets tabindex property on button element\n   */\n  _tabIndex?: number;\n} & BladeCommonEvents &\n  Platform.Select<{\n    web: {\n      onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n      /**\n       * This changes the hover interaction to highlight icon more\n       *\n       * **Only available on web currently**\n       */\n      isHighlighted?: boolean;\n    };\n    native: {\n      onClick: (event: GestureResponderEvent) => void;\n      isHighlighted?: undefined;\n    };\n  }>;\n\n/**\n * Component for making clickable icons with transparent background.\n * For other cases please use `Button` component with `icon` prop.\n */\nconst _IconButton: React.ForwardRefRenderFunction<BladeElementRef, IconButtonProps> = (\n  {\n    icon,\n    onClick,\n    size = 'medium',\n    emphasis = 'intense',\n    accessibilityLabel,\n    isDisabled,\n    onBlur,\n    onFocus,\n    onMouseLeave,\n    onMouseMove,\n    onPointerDown,\n    onPointerEnter,\n    onTouchEnd,\n    onTouchStart,\n    isHighlighted,\n    _tabIndex,\n  },\n  ref,\n) => {\n  return (\n    <StyledIconButton\n      ref={ref as any}\n      onClick={onClick}\n      emphasis={emphasis}\n      size={size}\n      icon={icon}\n      tabIndex={_tabIndex}\n      accessibilityLabel={accessibilityLabel}\n      isDisabled={isDisabled}\n      isHighlighted={isHighlighted}\n      onBlur={onBlur}\n      onFocus={onFocus}\n      onMouseLeave={onMouseLeave}\n      onMouseMove={onMouseMove}\n      onPointerDown={onPointerDown}\n      onPointerEnter={onPointerEnter}\n      onTouchEnd={onTouchEnd}\n      onTouchStart={onTouchStart}\n    />\n  );\n};\n\nconst IconButton = React.forwardRef(_IconButton);\n\nexport type { IconButtonProps };\nexport { IconButton };\n"],"names":["_IconButton","_ref","ref","icon","onClick","_ref$size","size","_ref$emphasis","emphasis","accessibilityLabel","isDisabled","onBlur","onFocus","onMouseLeave","onMouseMove","onPointerDown","onPointerEnter","onTouchEnd","onTouchStart","isHighlighted","_tabIndex","_jsx","StyledIconButton","tabIndex","IconButton","React","forwardRef"],"mappings":";;;;AAAA;AACA;AA6DA;AACA;AACA;AACA;AACA,IAAMA,WAA6E,GAAG,SAAhFA,WAA6EA,CAAAC,IAAA,EAmBjFC,GAAG,EACA;AAAA,EAAA,IAlBDC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IACJC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IAAAC,SAAA,GAAAJ,IAAA,CACPK,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA;IAAAE,aAAA,GAAAN,IAAA,CACfO,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,aAAA,KAAG,KAAA,CAAA,GAAA,SAAS,GAAAA,aAAA;IACpBE,kBAAkB,GAAAR,IAAA,CAAlBQ,kBAAkB;IAClBC,UAAU,GAAAT,IAAA,CAAVS,UAAU;IACVC,MAAM,GAAAV,IAAA,CAANU,MAAM;IACNC,OAAO,GAAAX,IAAA,CAAPW,OAAO;IACPC,YAAY,GAAAZ,IAAA,CAAZY,YAAY;IACZC,WAAW,GAAAb,IAAA,CAAXa,WAAW;IACXC,aAAa,GAAAd,IAAA,CAAbc,aAAa;IACbC,cAAc,GAAAf,IAAA,CAAde,cAAc;IACdC,UAAU,GAAAhB,IAAA,CAAVgB,UAAU;IACVC,YAAY,GAAAjB,IAAA,CAAZiB,YAAY;IACZC,aAAa,GAAAlB,IAAA,CAAbkB,aAAa;IACbC,SAAS,GAAAnB,IAAA,CAATmB,SAAS,CAAA;EAIX,oBACEC,GAAA,CAACC,gBAAgB,EAAA;AACfpB,IAAAA,GAAG,EAAEA,GAAW;AAChBE,IAAAA,OAAO,EAAEA,OAAQ;AACjBI,IAAAA,QAAQ,EAAEA,QAAS;AACnBF,IAAAA,IAAI,EAAEA,IAAK;AACXH,IAAAA,IAAI,EAAEA,IAAK;AACXoB,IAAAA,QAAQ,EAAEH,SAAU;AACpBX,IAAAA,kBAAkB,EAAEA,kBAAmB;AACvCC,IAAAA,UAAU,EAAEA,UAAW;AACvBS,IAAAA,aAAa,EAAEA,aAAc;AAC7BR,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,YAAY,EAAEA,YAAa;AAC3BC,IAAAA,WAAW,EAAEA,WAAY;AACzBC,IAAAA,aAAa,EAAEA,aAAc;AAC7BC,IAAAA,cAAc,EAAEA,cAAe;AAC/BC,IAAAA,UAAU,EAAEA,UAAW;AACvBC,IAAAA,YAAY,EAAEA,YAAAA;AAAa,GAC5B,CAAC,CAAA;AAEN,CAAC,CAAA;AAED,IAAMM,UAAU,gBAAGC,cAAK,CAACC,UAAU,CAAC1B,WAAW;;;;"}

package/build/lib/web/production/components/Button/IconButton/StyledIconButton.web.js

@@ -1,12 +1,17 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import styled from 'styled-components';
 import React__default from 'react';
+import { highlightedButtonSizeMap, highlightedHoverColorMap } from './tokens.js';
 import '../../../utils/index.js';
 import '../../../utils/metaAttribute/index.js';
 import '../../../utils/makeAccessible/index.js';
 import '../../../utils/makeMotionTime/index.web.js';
 import '../../../utils/getFocusRingStyles/index.js';
+import '../../../utils/logger/index.js';
+import getIn from '../../../utils/lodashButBetter/get.js';
 import { jsx } from 'react/jsx-runtime';
+import { throwBladeError } from '../../../utils/logger/logger.js';
+import { makeSize } from '../../../utils/makeSize/makeSize.js';
 import { castWebType } from '../../../utils/platform/castUtils.js';
 import { makeMotionTime } from '../../../utils/makeMotionTime/makeMotionTime.web.js';
 import { getFocusRingStyles } from '../../../utils/getFocusRingStyles/getFocusRingStyles.web.js';
@@ -24,11 +29,24 @@ var StyledButton = /*#__PURE__*/styled.button.withConfig({
     emphasis = props.emphasis;
   var motionToken = theme.motion;
   var emphasisColor = emphasis === 'intense' ? 'gray' : 'staticWhite';
+  if (false) {
+    if (props.$size === 'large' && props.$isHighlighted) {
+      throwBladeError({
+        moduleName: 'IconButton',
+        message: 'size large is not allowed with isHighlighted true'
+      });
+      return null;
+    }
+  }
   return {
     border: 'none',
     cursor: props.disabled ? 'not-allowed' : 'pointer',
     padding: 0,
-    borderRadius: theme.border.radius.small,
+    height: props.$isHighlighted ?
+    // We throw error for size large on top
+    makeSize(highlightedButtonSizeMap[props.$size]) : undefined,
+    width: props.$isHighlighted ? makeSize(highlightedButtonSizeMap[props.$size]) : undefined,
+    borderRadius: props.$isHighlighted ? theme.border.radius.round : theme.border.radius.small,
     background: 'transparent',
     display: 'flex',
     alignItems: 'center',
@@ -37,8 +55,9 @@ var StyledButton = /*#__PURE__*/styled.button.withConfig({
     transitionProperty: 'color, box-shadow',
     transitionDuration: castWebType(makeMotionTime(motionToken.duration.xquick)),
     transitionTimingFunction: motionToken.easing.standard.effective,
-    '&:hover': {
-      color: theme.colors.interactive.icon[emphasisColor].subtle
+    '&:hover:not([disabled])': {
+      color: theme.colors.interactive.icon[emphasisColor].subtle,
+      backgroundColor: props.$isHighlighted ? getIn(theme.colors, highlightedHoverColorMap[emphasis]) : 'transparent'
     },
     '&:focus-visible': _objectSpread(_objectSpread({}, getFocusRingStyles({
       theme: theme
@@ -57,6 +76,7 @@ var StyledIconButton = /*#__PURE__*/React__default.forwardRef(function (_ref, re
     emphasis = _ref.emphasis,
     accessibilityLabel = _ref.accessibilityLabel,
     isDisabled = _ref.isDisabled,
+    isHighlighted = _ref.isHighlighted,
     testID = _ref.testID,
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
@@ -81,6 +101,8 @@ var StyledIconButton = /*#__PURE__*/React__default.forwardRef(function (_ref, re
     onTouchEnd: onTouchEnd,
     onTouchStart: onTouchStart,
     disabled: isDisabled,
+    $isHighlighted: isHighlighted,
+    $size: size,
     tabIndex: tabIndex
   }, makeAccessible({
     label: accessibilityLabel

package/build/lib/web/production/components/Button/IconButton/StyledIconButton.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"StyledIconButton.web.js","sources":["../../../../../../../src/components/Button/IconButton/StyledIconButton.web.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport styled from 'styled-components';\nimport type { ReactElement } from 'react';\nimport React from 'react';\nimport type { StyledIconButtonProps } from './types';\nimport { castWebType } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { SubtleOrIntense } from '~tokens/theme/theme';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { makeMotionTime } from '~utils/makeMotionTime';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\n\ntype StyledButtonProps = {\n  emphasis: SubtleOrIntense;\n};\n\nconst StyledButton = styled.button<StyledButtonProps>((props) => {\n  const { theme, emphasis } = props;\n  const motionToken = theme.motion;\n\n  const emphasisColor = emphasis === 'intense' ? 'gray' : 'staticWhite';\n\n  return {\n    border: 'none',\n    cursor: props.disabled ? 'not-allowed' : 'pointer',\n    padding: 0,\n    borderRadius: theme.border.radius.small,\n    background: 'transparent',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    color: props.disabled\n      ? theme.colors.interactive.icon[emphasisColor].disabled\n      : theme.colors.interactive.icon[emphasisColor].muted,\n    transitionProperty: 'color, box-shadow',\n    transitionDuration: castWebType(makeMotionTime(motionToken.duration.xquick)),\n    transitionTimingFunction: motionToken.easing.standard.effective as string,\n\n    '&:hover': {\n      color: theme.colors.interactive.icon[emphasisColor].subtle,\n    },\n\n    '&:focus-visible': {\n      ...getFocusRingStyles({ theme }),\n      color: theme.colors.interactive.icon[emphasisColor].subtle,\n    },\n\n    '&:active': {\n      color: theme.colors.interactive.icon[emphasisColor].subtle,\n    },\n  };\n});\n\nconst StyledIconButton = React.forwardRef<HTMLButtonElement, StyledIconButtonProps>(\n  (\n    {\n      icon: Icon,\n      onClick,\n      size,\n      emphasis,\n      accessibilityLabel,\n      isDisabled,\n      testID,\n      onBlur,\n      onFocus,\n      onMouseLeave,\n      onMouseMove,\n      onPointerDown,\n      onPointerEnter,\n      onTouchEnd,\n      onTouchStart,\n      tabIndex,\n    },\n    ref,\n  ): ReactElement => (\n    <StyledButton\n      ref={ref}\n      onClick={castWebType(onClick)}\n      emphasis={emphasis}\n      type=\"button\"\n      onBlur={onBlur}\n      onFocus={onFocus}\n      onMouseLeave={onMouseLeave}\n      onMouseMove={onMouseMove}\n      onPointerDown={onPointerDown}\n      onPointerEnter={onPointerEnter}\n      onTouchEnd={onTouchEnd}\n      onTouchStart={onTouchStart}\n      disabled={isDisabled}\n      tabIndex={tabIndex}\n      {...makeAccessible({ label: accessibilityLabel })}\n      {...metaAttribute({ name: MetaConstants.IconButton, testID })}\n    >\n      <Icon size={size} color={isDisabled ? 'interactive.icon.gray.disabled' : 'currentColor'} />\n    </StyledButton>\n  ),\n);\n\nexport default StyledIconButton;\n"],"names":["StyledButton","styled","button","withConfig","displayName","componentId","props","theme","emphasis","motionToken","motion","emphasisColor","border","cursor","disabled","padding","borderRadius","radius","small","background","display","alignItems","justifyContent","color","colors","interactive","icon","muted","transitionProperty","transitionDuration","castWebType","makeMotionTime","duration","xquick","transitionTimingFunction","easing","standard","effective","subtle","_objectSpread","getFocusRingStyles","StyledIconButton","React","forwardRef","_ref","ref","Icon","onClick","size","accessibilityLabel","isDisabled","testID","onBlur","onFocus","onMouseLeave","onMouseMove","onPointerDown","onPointerEnter","onTouchEnd","onTouchStart","tabIndex","_jsx","type","makeAccessible","label","metaAttribute","name","MetaConstants","IconButton","children"],"mappings":"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"}
+{"version":3,"file":"StyledIconButton.web.js","sources":["../../../../../../../src/components/Button/IconButton/StyledIconButton.web.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport styled from 'styled-components';\nimport type { ReactElement } from 'react';\nimport React from 'react';\nimport type { StyledIconButtonProps } from './types';\nimport { highlightedButtonSizeMap, highlightedHoverColorMap } from './tokens';\nimport { castWebType, makeSize } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { SubtleOrIntense } from '~tokens/theme/theme';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { makeMotionTime } from '~utils/makeMotionTime';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\nimport { throwBladeError } from '~utils/logger';\nimport getIn from '~utils/lodashButBetter/get';\n\ntype StyledButtonProps = {\n  emphasis: SubtleOrIntense;\n  $isHighlighted: StyledIconButtonProps['isHighlighted'];\n  $size: StyledIconButtonProps['size'];\n};\n\nconst StyledButton = styled.button<StyledButtonProps>((props) => {\n  const { theme, emphasis } = props;\n  const motionToken = theme.motion;\n\n  const emphasisColor = emphasis === 'intense' ? 'gray' : 'staticWhite';\n\n  if (__DEV__) {\n    if (props.$size === 'large' && props.$isHighlighted) {\n      throwBladeError({\n        moduleName: 'IconButton',\n        message: 'size large is not allowed with isHighlighted true',\n      });\n      return null;\n    }\n  }\n\n  return {\n    border: 'none',\n    cursor: props.disabled ? 'not-allowed' : 'pointer',\n    padding: 0,\n    height: props.$isHighlighted\n      ? // We throw error for size large on top\n        makeSize(highlightedButtonSizeMap[props.$size as 'small' | 'medium'])\n      : undefined,\n    width: props.$isHighlighted\n      ? makeSize(highlightedButtonSizeMap[props.$size as 'small' | 'medium'])\n      : undefined,\n    borderRadius: props.$isHighlighted ? theme.border.radius.round : theme.border.radius.small,\n    background: 'transparent',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    color: props.disabled\n      ? theme.colors.interactive.icon[emphasisColor].disabled\n      : theme.colors.interactive.icon[emphasisColor].muted,\n    transitionProperty: 'color, box-shadow',\n    transitionDuration: castWebType(makeMotionTime(motionToken.duration.xquick)),\n    transitionTimingFunction: motionToken.easing.standard.effective as string,\n\n    '&:hover:not([disabled])': {\n      color: theme.colors.interactive.icon[emphasisColor].subtle,\n      backgroundColor: props.$isHighlighted\n        ? getIn(theme.colors, highlightedHoverColorMap[emphasis])\n        : 'transparent',\n    },\n\n    '&:focus-visible': {\n      ...getFocusRingStyles({ theme }),\n      color: theme.colors.interactive.icon[emphasisColor].subtle,\n    },\n\n    '&:active': {\n      color: theme.colors.interactive.icon[emphasisColor].subtle,\n    },\n  };\n});\n\nconst StyledIconButton = React.forwardRef<HTMLButtonElement, StyledIconButtonProps>(\n  (\n    {\n      icon: Icon,\n      onClick,\n      size,\n      emphasis,\n      accessibilityLabel,\n      isDisabled,\n      isHighlighted,\n      testID,\n      onBlur,\n      onFocus,\n      onMouseLeave,\n      onMouseMove,\n      onPointerDown,\n      onPointerEnter,\n      onTouchEnd,\n      onTouchStart,\n      tabIndex,\n    },\n    ref,\n  ): ReactElement => (\n    <StyledButton\n      ref={ref}\n      onClick={castWebType(onClick)}\n      emphasis={emphasis}\n      type=\"button\"\n      onBlur={onBlur}\n      onFocus={onFocus}\n      onMouseLeave={onMouseLeave}\n      onMouseMove={onMouseMove}\n      onPointerDown={onPointerDown}\n      onPointerEnter={onPointerEnter}\n      onTouchEnd={onTouchEnd}\n      onTouchStart={onTouchStart}\n      disabled={isDisabled}\n      $isHighlighted={isHighlighted}\n      $size={size}\n      tabIndex={tabIndex}\n      {...makeAccessible({ label: accessibilityLabel })}\n      {...metaAttribute({ name: MetaConstants.IconButton, testID })}\n    >\n      <Icon size={size} color={isDisabled ? 'interactive.icon.gray.disabled' : 'currentColor'} />\n    </StyledButton>\n  ),\n);\n\nexport default StyledIconButton;\n"],"names":["StyledButton","styled","button","withConfig","displayName","componentId","props","theme","emphasis","motionToken","motion","emphasisColor","$size","$isHighlighted","throwBladeError","moduleName","message","border","cursor","disabled","padding","height","makeSize","highlightedButtonSizeMap","undefined","width","borderRadius","radius","round","small","background","display","alignItems","justifyContent","color","colors","interactive","icon","muted","transitionProperty","transitionDuration","castWebType","makeMotionTime","duration","xquick","transitionTimingFunction","easing","standard","effective","subtle","backgroundColor","getIn","highlightedHoverColorMap","_objectSpread","getFocusRingStyles","StyledIconButton","React","forwardRef","_ref","ref","Icon","onClick","size","accessibilityLabel","isDisabled","isHighlighted","testID","onBlur","onFocus","onMouseLeave","onMouseMove","onPointerDown","onPointerEnter","onTouchEnd","onTouchStart","tabIndex","_jsx","type","makeAccessible","label","metaAttribute","name","MetaConstants","IconButton","children"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAqBA,IAAMA,YAAY,gBAAGC,MAAM,CAACC,MAAM,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,mCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAoB,CAAA,CAAA,UAACC,KAAK,EAAK;AAC/D,EAAA,IAAQC,KAAK,GAAeD,KAAK,CAAzBC,KAAK;IAAEC,QAAQ,GAAKF,KAAK,CAAlBE,QAAQ,CAAA;AACvB,EAAA,IAAMC,WAAW,GAAGF,KAAK,CAACG,MAAM,CAAA;EAEhC,IAAMC,aAAa,GAAGH,QAAQ,KAAK,SAAS,GAAG,MAAM,GAAG,aAAa,CAAA;AAErE,EAAA,IAAI,KAAO,EAAE;IACX,IAAIF,KAAK,CAACM,KAAK,KAAK,OAAO,IAAIN,KAAK,CAACO,cAAc,EAAE;AACnDC,MAAAA,eAAe,CAAC;AACdC,QAAAA,UAAU,EAAE,YAAY;AACxBC,QAAAA,OAAO,EAAE,mDAAA;AACX,OAAC,CAAC,CAAA;AACF,MAAA,OAAO,IAAI,CAAA;AACb,KAAA;AACF,GAAA;EAEA,OAAO;AACLC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,MAAM,EAAEZ,KAAK,CAACa,QAAQ,GAAG,aAAa,GAAG,SAAS;AAClDC,IAAAA,OAAO,EAAE,CAAC;IACVC,MAAM,EAAEf,KAAK,CAACO,cAAc;AACxB;IACAS,QAAQ,CAACC,wBAAwB,CAACjB,KAAK,CAACM,KAAK,CAAuB,CAAC,GACrEY,SAAS;AACbC,IAAAA,KAAK,EAAEnB,KAAK,CAACO,cAAc,GACvBS,QAAQ,CAACC,wBAAwB,CAACjB,KAAK,CAACM,KAAK,CAAuB,CAAC,GACrEY,SAAS;AACbE,IAAAA,YAAY,EAAEpB,KAAK,CAACO,cAAc,GAAGN,KAAK,CAACU,MAAM,CAACU,MAAM,CAACC,KAAK,GAAGrB,KAAK,CAACU,MAAM,CAACU,MAAM,CAACE,KAAK;AAC1FC,IAAAA,UAAU,EAAE,aAAa;AACzBC,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,UAAU,EAAE,QAAQ;AACpBC,IAAAA,cAAc,EAAE,QAAQ;AACxBC,IAAAA,KAAK,EAAE5B,KAAK,CAACa,QAAQ,GACjBZ,KAAK,CAAC4B,MAAM,CAACC,WAAW,CAACC,IAAI,CAAC1B,aAAa,CAAC,CAACQ,QAAQ,GACrDZ,KAAK,CAAC4B,MAAM,CAACC,WAAW,CAACC,IAAI,CAAC1B,aAAa,CAAC,CAAC2B,KAAK;AACtDC,IAAAA,kBAAkB,EAAE,mBAAmB;IACvCC,kBAAkB,EAAEC,WAAW,CAACC,cAAc,CAACjC,WAAW,CAACkC,QAAQ,CAACC,MAAM,CAAC,CAAC;AAC5EC,IAAAA,wBAAwB,EAAEpC,WAAW,CAACqC,MAAM,CAACC,QAAQ,CAACC,SAAmB;AAEzE,IAAA,yBAAyB,EAAE;AACzBd,MAAAA,KAAK,EAAE3B,KAAK,CAAC4B,MAAM,CAACC,WAAW,CAACC,IAAI,CAAC1B,aAAa,CAAC,CAACsC,MAAM;AAC1DC,MAAAA,eAAe,EAAE5C,KAAK,CAACO,cAAc,GACjCsC,KAAK,CAAC5C,KAAK,CAAC4B,MAAM,EAAEiB,wBAAwB,CAAC5C,QAAQ,CAAC,CAAC,GACvD,aAAA;KACL;AAED,IAAA,iBAAiB,EAAA6C,aAAA,CAAAA,aAAA,CAAA,EAAA,EACZC,kBAAkB,CAAC;AAAE/C,MAAAA,KAAK,EAALA,KAAAA;AAAM,KAAC,CAAC,CAAA,EAAA,EAAA,EAAA;MAChC2B,KAAK,EAAE3B,KAAK,CAAC4B,MAAM,CAACC,WAAW,CAACC,IAAI,CAAC1B,aAAa,CAAC,CAACsC,MAAAA;KACrD,CAAA;AAED,IAAA,UAAU,EAAE;MACVf,KAAK,EAAE3B,KAAK,CAAC4B,MAAM,CAACC,WAAW,CAACC,IAAI,CAAC1B,aAAa,CAAC,CAACsC,MAAAA;AACtD,KAAA;GACD,CAAA;AACH,CAAC,CAAC,CAAA;AAEIM,IAAAA,gBAAgB,gBAAGC,cAAK,CAACC,UAAU,CACvC,UAAAC,IAAA,EAoBEC,GAAG,EAAA;AAAA,EAAA,IAlBKC,IAAI,GAAAF,IAAA,CAAVrB,IAAI;IACJwB,OAAO,GAAAH,IAAA,CAAPG,OAAO;IACPC,IAAI,GAAAJ,IAAA,CAAJI,IAAI;IACJtD,QAAQ,GAAAkD,IAAA,CAARlD,QAAQ;IACRuD,kBAAkB,GAAAL,IAAA,CAAlBK,kBAAkB;IAClBC,UAAU,GAAAN,IAAA,CAAVM,UAAU;IACVC,aAAa,GAAAP,IAAA,CAAbO,aAAa;IACbC,MAAM,GAAAR,IAAA,CAANQ,MAAM;IACNC,MAAM,GAAAT,IAAA,CAANS,MAAM;IACNC,OAAO,GAAAV,IAAA,CAAPU,OAAO;IACPC,YAAY,GAAAX,IAAA,CAAZW,YAAY;IACZC,WAAW,GAAAZ,IAAA,CAAXY,WAAW;IACXC,aAAa,GAAAb,IAAA,CAAba,aAAa;IACbC,cAAc,GAAAd,IAAA,CAAdc,cAAc;IACdC,UAAU,GAAAf,IAAA,CAAVe,UAAU;IACVC,YAAY,GAAAhB,IAAA,CAAZgB,YAAY;IACZC,QAAQ,GAAAjB,IAAA,CAARiB,QAAQ,CAAA;EAAA,oBAIVC,GAAA,CAAC5E,YAAY,EAAAqD,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACXM,IAAAA,GAAG,EAAEA,GAAI;AACTE,IAAAA,OAAO,EAAEpB,WAAW,CAACoB,OAAO,CAAE;AAC9BrD,IAAAA,QAAQ,EAAEA,QAAS;AACnBqE,IAAAA,IAAI,EAAC,QAAQ;AACbV,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,YAAY,EAAEA,YAAa;AAC3BC,IAAAA,WAAW,EAAEA,WAAY;AACzBC,IAAAA,aAAa,EAAEA,aAAc;AAC7BC,IAAAA,cAAc,EAAEA,cAAe;AAC/BC,IAAAA,UAAU,EAAEA,UAAW;AACvBC,IAAAA,YAAY,EAAEA,YAAa;AAC3BvD,IAAAA,QAAQ,EAAE6C,UAAW;AACrBnD,IAAAA,cAAc,EAAEoD,aAAc;AAC9BrD,IAAAA,KAAK,EAAEkD,IAAK;AACZa,IAAAA,QAAQ,EAAEA,QAAAA;AAAS,GAAA,EACfG,cAAc,CAAC;AAAEC,IAAAA,KAAK,EAAEhB,kBAAAA;GAAoB,CAAC,CAC7CiB,EAAAA,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACC,UAAU;AAAEjB,IAAAA,MAAM,EAANA,MAAAA;AAAO,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;IAAAkB,QAAA,eAE7DR,GAAA,CAAChB,IAAI,EAAA;AAACE,MAAAA,IAAI,EAAEA,IAAK;AAAC5B,MAAAA,KAAK,EAAE8B,UAAU,GAAG,gCAAgC,GAAG,cAAA;KAAiB,CAAA;AAAC,GAAA,CAC/E,CAAC,CAAA;AAAA,CAEnB;;;;"}

package/build/lib/web/production/components/Button/IconButton/tokens.js

@@ -0,0 +1,14 @@
+import '../../../tokens/global/index.js';
+import { size } from '../../../tokens/global/size.js';
+
+var highlightedButtonSizeMap = {
+  small: size['24'],
+  medium: size['32']
+};
+var highlightedHoverColorMap = {
+  intense: 'interactive.background.gray.fadedHighlighted',
+  subtle: 'interactive.background.staticWhite.faded'
+};
+
+export { highlightedButtonSizeMap, highlightedHoverColorMap };
+//# sourceMappingURL=tokens.js.map

package/build/lib/web/production/components/Button/IconButton/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sources":["../../../../../../../src/components/Button/IconButton/tokens.ts"],"sourcesContent":["import { size } from '~tokens/global';\n\nconst highlightedButtonSizeMap = {\n  small: size['24'],\n  medium: size['32'],\n} as const;\n\nconst highlightedHoverColorMap = {\n  intense: 'interactive.background.gray.fadedHighlighted',\n  subtle: 'interactive.background.staticWhite.faded',\n} as const;\n\nexport { highlightedButtonSizeMap, highlightedHoverColorMap };\n"],"names":["highlightedButtonSizeMap","small","size","medium","highlightedHoverColorMap","intense","subtle"],"mappings":";;;AAEA,IAAMA,wBAAwB,GAAG;AAC/BC,EAAAA,KAAK,EAAEC,IAAI,CAAC,IAAI,CAAC;EACjBC,MAAM,EAAED,IAAI,CAAC,IAAI,CAAA;AACnB,EAAU;AAEV,IAAME,wBAAwB,GAAG;AAC/BC,EAAAA,OAAO,EAAE,8CAA8C;AACvDC,EAAAA,MAAM,EAAE,0CAAA;AACV;;;;"}

package/build/lib/web/production/components/Menu/VisualSubComponents/MenuHeaderFooter.web.js

@@ -6,9 +6,9 @@ import { BaseHeader } from '../../BaseHeaderFooter/BaseHeader.js';
 import '../../../utils/assignWithoutSideEffects/index.js';
 import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
 import '../../Box/index.js';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Box } from '../../Box/Box.js';
+import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 
 /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
 var _MenuHeader = function _MenuHeader(_ref) {
@@ -18,7 +18,8 @@ var _MenuHeader = function _MenuHeader(_ref) {
     titleSuffix = _ref.titleSuffix,
     trailing = _ref.trailing,
     testID = _ref.testID;
-  return /*#__PURE__*/jsxs(Fragment, {
+  return /*#__PURE__*/jsxs(Box, {
+    marginBottom: "spacing.3",
     children: [/*#__PURE__*/jsx(BaseHeader, {
       title: title,
       subtitle: subtitle,
@@ -47,7 +48,7 @@ var _MenuFooter = function _MenuFooter(_ref2) {
   var children = _ref2.children,
     testID = _ref2.testID;
   return /*#__PURE__*/jsxs(Box, {
-    marginTop: "spacing.2",
+    marginTop: "spacing.3",
     children: [/*#__PURE__*/jsx(MenuDivider, {}), /*#__PURE__*/jsx(BaseFooter, {
       metaComponentName: MetaConstants.MenuFooter,
       showDivider: false,