@razorpay/blade 12.68.0 → 12.89.1

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

@@ -1,15 +1,21 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React__default from 'react';
+import { TopNavContext, useTopNavContext } from './TopNavContext.js';
+import '../BladeProvider/index.js';
 import '../Box/BaseBox/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 '../../tokens/theme/index.js';
 import '../../utils/index.js';
-import '../../utils/metaAttribute/index.js';
 import { componentZIndices } from '../../utils/componentZIndices.js';
 import '../../utils/makeAnalyticsAttribute/index.js';
+import '../../utils/metaAttribute/index.js';
 import { jsx } from 'react/jsx-runtime';
 import { size } from '../../tokens/global/size.js';
+import useTheme from '../BladeProvider/useTheme.js';
+import { BladeProvider } from '../BladeProvider/BladeProvider.web.js';
+import bladeTheme from '../../tokens/theme/bladeTheme.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { makeSize } from '../../utils/makeSize/makeSize.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
@@ -20,41 +26,51 @@ 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 _TopNav = function _TopNav(_ref, ref) {
   var children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
-    ref: ref,
-    display: "grid",
-    gridTemplateColumns: "auto minmax(0, 1fr) auto",
-    alignItems: "center",
-    position: "sticky",
-    top: "0px",
-    width: "100%",
-    paddingY: {
-      base: 'spacing.3',
-      m: 'spacing.0'
+  var _useTheme = useTheme(),
+    colorScheme = _useTheme.colorScheme;
+  return /*#__PURE__*/jsx(TopNavContext.Provider, {
+    value: {
+      colorScheme: colorScheme
     },
-    paddingX: {
-      base: 'spacing.4',
-      m: 'spacing.3'
-    },
-    height: makeSize(TOP_NAV_HEIGHT),
-    zIndex: componentZIndices.topnav
-  }, rest), metaAttribute({
-    name: MetaConstants.TopNav,
-    testID: rest.testID
-  })), makeAnalyticsAttribute(rest)), {}, {
-    children: children
-  }));
+    children: /*#__PURE__*/jsx(BladeProvider, {
+      themeTokens: bladeTheme,
+      colorScheme: "dark",
+      children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+        ref: ref,
+        display: "grid",
+        gridTemplateColumns: "auto minmax(0, 1fr) auto",
+        alignItems: "center",
+        position: "sticky",
+        top: "0px",
+        width: "100%",
+        paddingY: {
+          base: 'spacing.3',
+          m: 'spacing.0'
+        },
+        paddingX: {
+          base: 'spacing.4',
+          m: 'spacing.3'
+        },
+        height: makeSize(TOP_NAV_HEIGHT),
+        zIndex: componentZIndices.topnav,
+        backgroundColor: "interactive.background.staticBlack.default"
+      }, rest), metaAttribute({
+        name: MetaConstants.TopNav,
+        testID: rest.testID
+      })), makeAnalyticsAttribute(rest)), {}, {
+        children: children
+      }))
+    })
+  });
 };
 var TopNav = /*#__PURE__*/React__default.forwardRef(_TopNav);
 var TopNavBrand = function TopNavBrand(_ref2) {
   var children = _ref2.children;
   return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
     flexDirection: "row",
-    marginTop: "spacing.4",
     width: {
       base: makeSize(SIDE_NAV_EXPANDED_L1_WIDTH_BASE),
       xl: makeSize(SIDE_NAV_EXPANDED_L1_WIDTH_XL)
@@ -62,9 +78,10 @@ var TopNavBrand = function TopNavBrand(_ref2) {
   }, metaAttribute({
     name: MetaConstants.TopNavBrand
   })), {}, {
+    paddingY: "spacing.5",
+    marginLeft: "spacing.6",
     children: /*#__PURE__*/jsx(BaseBox, {
       width: "100%",
-      textAlign: "center",
       children: children
     })
   }));
@@ -74,11 +91,8 @@ var TopNavContent = function TopNavContent(_ref3) {
   return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
     display: "flex",
     alignItems: "center",
-    alignSelf: "end",
-    paddingRight: {
-      base: 'spacing.0',
-      m: makeSize(CONTENT_RIGHT_GAP)
-    }
+    alignSelf: "center",
+    justifyContent: "center"
   }, metaAttribute({
     name: MetaConstants.TopNavContent
   })), {}, {
@@ -87,13 +101,17 @@ var TopNavContent = function TopNavContent(_ref3) {
 };
 var TopNavActions = function TopNavActions(_ref4) {
   var children = _ref4.children;
-  return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
-    alignSelf: "end",
+  var topNavContext = useTopNavContext();
+  var _useTheme2 = useTheme(),
+    colorScheme = _useTheme2.colorScheme;
+  var topNavActions = /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
+    alignSelf: "flex-start",
     display: "flex",
     gap: "spacing.3",
     alignItems: "center",
     marginTop: "spacing.1",
     padding: "spacing.3",
+    paddingRight: "spacing.2",
     borderTopLeftRadius: "medium",
     borderTopRightRadius: "medium"
   }, metaAttribute({
@@ -101,6 +119,19 @@ var TopNavActions = function TopNavActions(_ref4) {
   })), {}, {
     children: children
   }));
+  if (topNavContext) {
+    return topNavActions;
+  }
+  return /*#__PURE__*/jsx(TopNavContext.Provider, {
+    value: {
+      colorScheme: colorScheme
+    },
+    children: /*#__PURE__*/jsx(BladeProvider, {
+      themeTokens: bladeTheme,
+      colorScheme: "dark",
+      children: topNavActions
+    })
+  });
 };
 
 export { TopNav, TopNavActions, TopNavBrand, TopNavContent };

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 type { BoxProps } 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';\nimport type { DataAnalyticsAttribute, BladeElementRef, TestID } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\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  | keyof DataAnalyticsAttribute\n> &\n  TestID &\n  StyledPropsBlade;\n\nconst _TopNav = (\n  { children, ...rest }: TopNavProps,\n  ref: React.Ref<BladeElementRef>,\n): React.ReactElement => {\n  return (\n    <BaseBox\n      ref={ref as never}\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      {...rest}\n      {...metaAttribute({ name: MetaConstants.TopNav, testID: rest.testID })}\n      {...makeAnalyticsAttribute(rest)}\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nconst TopNav = React.forwardRef(_TopNav);\n\nconst TopNavBrand = ({ children }: { children: React.ReactNode }): React.ReactElement => {\n  return (\n    <BaseBox\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    </BaseBox>\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      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","ref","children","rest","_objectWithoutProperties","_excluded","_jsx","BaseBox","_objectSpread","display","gridTemplateColumns","alignItems","position","top","width","paddingY","base","m","paddingX","height","makeSize","zIndex","componentZIndices","topnav","metaAttribute","name","MetaConstants","TopNav","testID","makeAnalyticsAttribute","React","forwardRef","TopNavBrand","_ref2","flexDirection","marginTop","SIDE_NAV_EXPANDED_L1_WIDTH_BASE","xl","SIDE_NAV_EXPANDED_L1_WIDTH_XL","textAlign","TopNavContent","_ref3","alignSelf","paddingRight","TopNavActions","_ref4","gap","padding","borderTopLeftRadius","borderTopRightRadius"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAeA,IAAMA,cAAc,GAAGC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC/B,IAAMC,iBAAiB,GAAGD,IAAI,CAAC,EAAE,CAAC,CAAA;AA0BlC,IAAME,OAAO,GAAG,SAAVA,OAAOA,CAAAC,IAAA,EAEXC,GAA+B,EACR;AAAA,EAAA,IAFrBC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;AAAKC,IAAAA,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA,CAAA,CAAA;EAGnB,oBACEC,GAAA,CAACC,OAAO,EAAAC,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACNP,IAAAA,GAAG,EAAEA,GAAa;AAClBQ,IAAAA,OAAO,EAAC,MAAM;AACdC,IAAAA,mBAAmB,EAAC,0BAA0B;AAC9CC,IAAAA,UAAU,EAAC,QAAQ;AACnBC,IAAAA,QAAQ,EAAC,QAAQ;AACjBC,IAAAA,GAAG,EAAC,KAAK;AACTC,IAAAA,KAAK,EAAC,MAAM;AACZC,IAAAA,QAAQ,EAAE;AAAEC,MAAAA,IAAI,EAAE,WAAW;AAAEC,MAAAA,CAAC,EAAE,WAAA;KAAc;AAChDC,IAAAA,QAAQ,EAAE;AAAEF,MAAAA,IAAI,EAAE,WAAW;AAAEC,MAAAA,CAAC,EAAE,WAAA;KAAc;AAChDE,IAAAA,MAAM,EAAEC,QAAQ,CAACxB,cAAc,CAAE;IACjCyB,MAAM,EAAEC,iBAAiB,CAACC,MAAAA;GACtBpB,EAAAA,IAAI,CACJqB,EAAAA,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACC,MAAM;IAAEC,MAAM,EAAEzB,IAAI,CAACyB,MAAAA;AAAO,GAAC,CAAC,CAAA,EAClEC,sBAAsB,CAAC1B,IAAI,CAAC,CAAA,EAAA,EAAA,EAAA;AAAAD,IAAAA,QAAA,EAE/BA,QAAAA;AAAQ,GAAA,CACF,CAAC,CAAA;AAEd,CAAC,CAAA;AAED,IAAMyB,MAAM,gBAAGG,cAAK,CAACC,UAAU,CAAChC,OAAO,EAAC;AAExC,IAAMiC,WAAW,GAAG,SAAdA,WAAWA,CAAAC,KAAA,EAAwE;AAAA,EAAA,IAAlE/B,QAAQ,GAAA+B,KAAA,CAAR/B,QAAQ,CAAA;AAC7B,EAAA,oBACEI,GAAA,CAACC,OAAO,EAAAC,aAAA,CAAAA,aAAA,CAAA;AACN0B,IAAAA,aAAa,EAAC,KAAK;AACnBC,IAAAA,SAAS,EAAC,WAAW;AACrBrB,IAAAA,KAAK,EAAE;AACLE,MAAAA,IAAI,EAAEI,QAAQ,CAACgB,+BAA+B,CAAC;MAC/CC,EAAE,EAAEjB,QAAQ,CAACkB,6BAA6B,CAAA;AAC5C,KAAA;AAAE,GAAA,EACEd,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACM,WAAAA;AAAY,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;IAAA9B,QAAA,eAEtDI,GAAA,CAACC,OAAO,EAAA;AAACO,MAAAA,KAAK,EAAC,MAAM;AAACyB,MAAAA,SAAS,EAAC,QAAQ;AAAArC,MAAAA,QAAA,EACrCA,QAAAA;KACM,CAAA;AAAC,GAAA,CACH,CAAC,CAAA;AAEd,EAAC;AAED,IAAMsC,aAAa,GAAG,SAAhBA,aAAaA,CAAAC,KAAA,EAAwE;AAAA,EAAA,IAAlEvC,QAAQ,GAAAuC,KAAA,CAARvC,QAAQ,CAAA;AAC/B,EAAA,oBACEI,GAAA,CAACC,OAAO,EAAAC,aAAA,CAAAA,aAAA,CAAA;AACNC,IAAAA,OAAO,EAAC,MAAM;AACdE,IAAAA,UAAU,EAAC,QAAQ;AACnB+B,IAAAA,SAAS,EAAC,KAAK;AACfC,IAAAA,YAAY,EAAE;AAAE3B,MAAAA,IAAI,EAAE,WAAW;MAAEC,CAAC,EAAEG,QAAQ,CAACtB,iBAAiB,CAAA;AAAE,KAAA;AAAE,GAAA,EAChE0B,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACc,aAAAA;AAAc,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AAAAtC,IAAAA,QAAA,EAEvDA,QAAAA;AAAQ,GAAA,CACF,CAAC,CAAA;AAEd,EAAC;AAED,IAAM0C,aAAa,GAAG,SAAhBA,aAAaA,CAAAC,KAAA,EAAwE;AAAA,EAAA,IAAlE3C,QAAQ,GAAA2C,KAAA,CAAR3C,QAAQ,CAAA;AAC/B,EAAA,oBACEI,GAAA,CAACC,OAAO,EAAAC,aAAA,CAAAA,aAAA,CAAA;AACNkC,IAAAA,SAAS,EAAC,KAAK;AACfjC,IAAAA,OAAO,EAAC,MAAM;AACdqC,IAAAA,GAAG,EAAC,WAAW;AACfnC,IAAAA,UAAU,EAAC,QAAQ;AACnBwB,IAAAA,SAAS,EAAC,WAAW;AACrBY,IAAAA,OAAO,EAAC,WAAW;AACnBC,IAAAA,mBAAmB,EAAC,QAAQ;AAC5BC,IAAAA,oBAAoB,EAAC,QAAA;AAAQ,GAAA,EACzBzB,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACkB,aAAAA;AAAc,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AAAA1C,IAAAA,QAAA,EAEvDA,QAAAA;AAAQ,GAAA,CACF,CAAC,CAAA;AAEd;;;;"}
+{"version":3,"file":"TopNav.web.js","sources":["../../../../../../src/components/TopNav/TopNav.web.tsx"],"sourcesContent":["import React from 'react';\nimport { TopNavContext, useTopNavContext } from './TopNavContext';\nimport type { BoxProps } from '~components/Box';\nimport { BladeProvider, useTheme } from '~components/BladeProvider';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\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 { bladeTheme } from '~tokens/theme';\nimport { makeSize } from '~utils';\nimport { componentZIndices } from '~utils/componentZIndices';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { DataAnalyticsAttribute, BladeElementRef, TestID } from '~utils/types';\n\nconst TOP_NAV_HEIGHT = size[56];\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  | keyof DataAnalyticsAttribute\n> &\n  TestID &\n  StyledPropsBlade;\n\nconst _TopNav = (\n  { children, ...rest }: TopNavProps,\n  ref: React.Ref<BladeElementRef>,\n): React.ReactElement => {\n  const { colorScheme } = useTheme();\n\n  return (\n    <TopNavContext.Provider value={{ colorScheme }}>\n      {/* We are forcing the theme to dark here because the TopNav is always in dark mode. \n       we also want components inside the TopNav to be in the same theme as the TopNav.\n      */}\n      <BladeProvider themeTokens={bladeTheme} colorScheme=\"dark\">\n        <BaseBox\n          ref={ref as never}\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          backgroundColor=\"interactive.background.staticBlack.default\"\n          {...rest}\n          {...metaAttribute({ name: MetaConstants.TopNav, testID: rest.testID })}\n          {...makeAnalyticsAttribute(rest)}\n        >\n          {children}\n        </BaseBox>\n      </BladeProvider>\n    </TopNavContext.Provider>\n  );\n};\n\nconst TopNav = React.forwardRef(_TopNav);\n\nconst TopNavBrand = ({ children }: { children: React.ReactNode }): React.ReactElement => {\n  return (\n    <BaseBox\n      flexDirection=\"row\"\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      paddingY=\"spacing.5\"\n      marginLeft=\"spacing.6\"\n    >\n      <BaseBox width=\"100%\">{children}</BaseBox>\n    </BaseBox>\n  );\n};\n\nconst TopNavContent = ({ children }: { children: React.ReactNode }): React.ReactElement => {\n  return (\n    <BaseBox\n      display=\"flex\"\n      alignItems=\"center\"\n      alignSelf=\"center\"\n      justifyContent=\"center\"\n      {...metaAttribute({ name: MetaConstants.TopNavContent })}\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nconst TopNavActions = ({ children }: { children: React.ReactNode }): React.ReactElement => {\n  const topNavContext = useTopNavContext();\n  const { colorScheme } = useTheme();\n  const topNavActions = (\n    <BaseBox\n      alignSelf=\"flex-start\"\n      display=\"flex\"\n      gap=\"spacing.3\"\n      alignItems=\"center\"\n      marginTop=\"spacing.1\"\n      padding=\"spacing.3\"\n      paddingRight=\"spacing.2\"\n      borderTopLeftRadius=\"medium\"\n      borderTopRightRadius=\"medium\"\n      {...metaAttribute({ name: MetaConstants.TopNavActions })}\n    >\n      {children}\n    </BaseBox>\n  );\n\n  if (topNavContext) {\n    return topNavActions;\n  }\n\n  return (\n    <TopNavContext.Provider value={{ colorScheme }}>\n      <BladeProvider themeTokens={bladeTheme} colorScheme=\"dark\">\n        {topNavActions}\n      </BladeProvider>\n    </TopNavContext.Provider>\n  );\n};\n\nexport { TopNav, TopNavBrand, TopNavContent, TopNavActions };\nexport type { TopNavProps };\n"],"names":["TOP_NAV_HEIGHT","size","_TopNav","_ref","ref","children","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","colorScheme","_jsx","TopNavContext","Provider","value","BladeProvider","themeTokens","bladeTheme","BaseBox","_objectSpread","display","gridTemplateColumns","alignItems","position","top","width","paddingY","base","m","paddingX","height","makeSize","zIndex","componentZIndices","topnav","backgroundColor","metaAttribute","name","MetaConstants","TopNav","testID","makeAnalyticsAttribute","React","forwardRef","TopNavBrand","_ref2","flexDirection","SIDE_NAV_EXPANDED_L1_WIDTH_BASE","xl","SIDE_NAV_EXPANDED_L1_WIDTH_XL","marginLeft","TopNavContent","_ref3","alignSelf","justifyContent","TopNavActions","_ref4","topNavContext","useTopNavContext","_useTheme2","topNavActions","gap","marginTop","padding","paddingRight","borderTopLeftRadius","borderTopRightRadius"],"mappings":"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"}

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

@@ -0,0 +1,16 @@
+import React__default from 'react';
+
+var TopNavContext = /*#__PURE__*/React__default.createContext(null);
+
+/**
+ * Returns the TopNav context if inside a TopNav, otherwise null.
+ * Stores the original app colorScheme so that overlay components
+ * (Menu, Popover, etc.) rendered inside TopNav can reset back to
+ * the app's colorScheme instead of inheriting TopNav's dark theme.
+ */
+var useTopNavContext = function useTopNavContext() {
+  return React__default.useContext(TopNavContext);
+};
+
+export { TopNavContext, useTopNavContext };
+//# sourceMappingURL=TopNavContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TopNavContext.js","sources":["../../../../../../src/components/TopNav/TopNavContext.tsx"],"sourcesContent":["import React from 'react';\nimport type { ColorSchemeNames } from '~tokens/theme';\n\ntype TopNavContextProps = {\n  colorScheme: ColorSchemeNames;\n};\n\nconst TopNavContext = React.createContext<TopNavContextProps | null>(null);\n\n/**\n * Returns the TopNav context if inside a TopNav, otherwise null.\n * Stores the original app colorScheme so that overlay components\n * (Menu, Popover, etc.) rendered inside TopNav can reset back to\n * the app's colorScheme instead of inheriting TopNav's dark theme.\n */\nconst useTopNavContext = (): TopNavContextProps | null => {\n  return React.useContext(TopNavContext);\n};\n\nexport type { TopNavContextProps };\nexport { TopNavContext, useTopNavContext };\n"],"names":["TopNavContext","React","createContext","useTopNavContext","useContext"],"mappings":";;AAOA,IAAMA,aAAa,gBAAGC,cAAK,CAACC,aAAa,CAA4B,IAAI,EAAC;;AAE1E;AACA;AACA;AACA;AACA;AACA;AACA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,GAAoC;AACxD,EAAA,OAAOF,cAAK,CAACG,UAAU,CAACJ,aAAa,CAAC,CAAA;AACxC;;;;"}

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

@@ -0,0 +1,72 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import React__default from 'react';
+import { ThemeProvider } from 'styled-components';
+import { useTopNavContext } from './TopNavContext.js';
+import '../../tokens/theme/index.js';
+import '../BladeProvider/index.js';
+import useTheme, { ThemeContext } from '../BladeProvider/useTheme.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import bladeTheme from '../../tokens/theme/bladeTheme.js';
+import { BladeProvider } from '../BladeProvider/BladeProvider.web.js';
+
+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; }
+/**
+ * Wraps children with the correct theme when rendered inside TopNav.
+ *
+ * TopNav forces a dark theme, but overlay/child components should render
+ * in the app's original colorScheme. This wrapper centralises that logic.
+ *
+ * - Without `shouldOverrideTheme` (default): wraps with BladeProvider using
+ *   the app's original colorScheme (for portalled overlays like Popover, Menu).
+ * - With `shouldOverrideTheme={false}`: stays in TopNav's dark theme.
+ * - With `shouldOverrideTheme={true}`: switches to the app's original colorScheme
+ *   via ThemeContext + StyledThemeProvider (for inline theme switches like SearchInput).
+ *
+ * Outside TopNav this is a no-op passthrough.
+ */
+var TopNavOverlayThemeOverride = function TopNavOverlayThemeOverride(_ref) {
+  var children = _ref.children,
+    shouldOverrideTheme = _ref.shouldOverrideTheme;
+  var topNavContext = useTopNavContext();
+  var _useTheme = useTheme(),
+    platform = _useTheme.platform;
+  var isDark = shouldOverrideTheme ? (topNavContext === null || topNavContext === void 0 ? void 0 : topNavContext.colorScheme) === 'dark' : true;
+  var overrideTheme = React__default.useMemo(function () {
+    return _objectSpread(_objectSpread({}, bladeTheme), {}, {
+      colors: isDark ? bladeTheme.colors.onDark : bladeTheme.colors.onLight,
+      elevation: isDark ? bladeTheme.elevation.onDark : bladeTheme.elevation.onLight,
+      typography: bladeTheme.typography[platform]
+    });
+  }, [isDark, platform]);
+  if (!topNavContext) {
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return /*#__PURE__*/jsx(Fragment, {
+      children: children
+    });
+  }
+  if (shouldOverrideTheme !== undefined) {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    var noop = function noop() {};
+    return /*#__PURE__*/jsx(ThemeContext.Provider, {
+      value: {
+        theme: overrideTheme,
+        colorScheme: shouldOverrideTheme ? topNavContext.colorScheme : 'dark',
+        setColorScheme: noop,
+        platform: platform
+      },
+      children: /*#__PURE__*/jsx(ThemeProvider, {
+        theme: overrideTheme,
+        children: children
+      })
+    });
+  }
+  return /*#__PURE__*/jsx(BladeProvider, {
+    themeTokens: bladeTheme,
+    colorScheme: topNavContext.colorScheme,
+    children: children
+  });
+};
+
+export { TopNavOverlayThemeOverride };
+//# sourceMappingURL=TopNavOverlayThemeOverride.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TopNavOverlayThemeOverride.js","sources":["../../../../../../src/components/TopNav/TopNavOverlayThemeOverride.tsx"],"sourcesContent":["import React from 'react';\nimport { ThemeProvider as StyledThemeProvider } from 'styled-components';\nimport { useTopNavContext } from './TopNavContext';\nimport { bladeTheme } from '~tokens/theme';\nimport { BladeProvider, useTheme } from '~components/BladeProvider';\nimport type { Theme } from '~components/BladeProvider';\nimport { ThemeContext } from '~components/BladeProvider/useTheme';\n\ntype TopNavOverlayThemeOverrideProps = {\n  children: React.ReactNode;\n  /**\n   * When `true`, switches the theme to the app's original colorScheme\n   * (stored in TopNavContext) instead of TopNav's default dark theme.\n   *\n   * Used by SearchInput to toggle between dark (unfocused) and the\n   * original app theme (focused) while inside TopNav.\n   *\n   * @default false — stays in dark theme (TopNav's default)\n   */\n  shouldOverrideTheme?: boolean;\n};\n\n/**\n * Wraps children with the correct theme when rendered inside TopNav.\n *\n * TopNav forces a dark theme, but overlay/child components should render\n * in the app's original colorScheme. This wrapper centralises that logic.\n *\n * - Without `shouldOverrideTheme` (default): wraps with BladeProvider using\n *   the app's original colorScheme (for portalled overlays like Popover, Menu).\n * - With `shouldOverrideTheme={false}`: stays in TopNav's dark theme.\n * - With `shouldOverrideTheme={true}`: switches to the app's original colorScheme\n *   via ThemeContext + StyledThemeProvider (for inline theme switches like SearchInput).\n *\n * Outside TopNav this is a no-op passthrough.\n */\nconst TopNavOverlayThemeOverride = ({\n  children,\n  shouldOverrideTheme,\n}: TopNavOverlayThemeOverrideProps): React.ReactElement => {\n  const topNavContext = useTopNavContext();\n  const { platform } = useTheme();\n\n  const isDark = shouldOverrideTheme ? topNavContext?.colorScheme === 'dark' : true;\n  const overrideTheme: Theme = React.useMemo(\n    () => ({\n      ...bladeTheme,\n      colors: isDark ? bladeTheme.colors.onDark : bladeTheme.colors.onLight,\n      elevation: isDark ? bladeTheme.elevation.onDark : bladeTheme.elevation.onLight,\n      typography: bladeTheme.typography[platform],\n    }),\n    [isDark, platform],\n  );\n\n  if (!topNavContext) {\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    return <>{children}</>;\n  }\n\n  if (shouldOverrideTheme !== undefined) {\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    const noop = (): void => {};\n\n    return (\n      <ThemeContext.Provider\n        value={{\n          theme: overrideTheme,\n          colorScheme: shouldOverrideTheme ? topNavContext.colorScheme : 'dark',\n          setColorScheme: noop,\n          platform,\n        }}\n      >\n        <StyledThemeProvider theme={overrideTheme}>{children}</StyledThemeProvider>\n      </ThemeContext.Provider>\n    );\n  }\n\n  return (\n    <BladeProvider themeTokens={bladeTheme} colorScheme={topNavContext.colorScheme}>\n      {children}\n    </BladeProvider>\n  );\n};\n\nexport { TopNavOverlayThemeOverride };\n"],"names":["TopNavOverlayThemeOverride","_ref","children","shouldOverrideTheme","topNavContext","useTopNavContext","_useTheme","useTheme","platform","isDark","colorScheme","overrideTheme","React","useMemo","_objectSpread","bladeTheme","colors","onDark","onLight","elevation","typography","_jsx","_Fragment","undefined","noop","ThemeContext","Provider","value","theme","setColorScheme","StyledThemeProvider","BladeProvider","themeTokens"],"mappings":";;;;;;;;;;;;;AAsBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMA,0BAA0B,GAAG,SAA7BA,0BAA0BA,CAAAC,IAAA,EAG2B;AAAA,EAAA,IAFzDC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,mBAAmB,GAAAF,IAAA,CAAnBE,mBAAmB,CAAA;AAEnB,EAAA,IAAMC,aAAa,GAAGC,gBAAgB,EAAE,CAAA;AACxC,EAAA,IAAAC,SAAA,GAAqBC,QAAQ,EAAE;IAAvBC,QAAQ,GAAAF,SAAA,CAARE,QAAQ,CAAA;AAEhB,EAAA,IAAMC,MAAM,GAAGN,mBAAmB,GAAG,CAAAC,aAAa,KAAA,IAAA,IAAbA,aAAa,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAbA,aAAa,CAAEM,WAAW,MAAK,MAAM,GAAG,IAAI,CAAA;AACjF,EAAA,IAAMC,aAAoB,GAAGC,cAAK,CAACC,OAAO,CACxC,YAAA;AAAA,IAAA,OAAAC,aAAA,CAAAA,aAAA,CAAA,EAAA,EACKC,UAAU,CAAA,EAAA,EAAA,EAAA;AACbC,MAAAA,MAAM,EAAEP,MAAM,GAAGM,UAAU,CAACC,MAAM,CAACC,MAAM,GAAGF,UAAU,CAACC,MAAM,CAACE,OAAO;AACrEC,MAAAA,SAAS,EAAEV,MAAM,GAAGM,UAAU,CAACI,SAAS,CAACF,MAAM,GAAGF,UAAU,CAACI,SAAS,CAACD,OAAO;AAC9EE,MAAAA,UAAU,EAAEL,UAAU,CAACK,UAAU,CAACZ,QAAQ,CAAA;AAAC,KAAA,CAAA,CAAA;AAAA,GAC3C,EACF,CAACC,MAAM,EAAED,QAAQ,CACnB,CAAC,CAAA;EAED,IAAI,CAACJ,aAAa,EAAE;AAClB;IACA,oBAAOiB,GAAA,CAAAC,QAAA,EAAA;AAAApB,MAAAA,QAAA,EAAGA,QAAAA;AAAQ,KAAG,CAAC,CAAA;AACxB,GAAA;EAEA,IAAIC,mBAAmB,KAAKoB,SAAS,EAAE;AACrC;AACA,IAAA,IAAMC,IAAI,GAAG,SAAPA,IAAIA,GAAe,EAAE,CAAA;AAE3B,IAAA,oBACEH,GAAA,CAACI,YAAY,CAACC,QAAQ,EAAA;AACpBC,MAAAA,KAAK,EAAE;AACLC,QAAAA,KAAK,EAAEjB,aAAa;AACpBD,QAAAA,WAAW,EAAEP,mBAAmB,GAAGC,aAAa,CAACM,WAAW,GAAG,MAAM;AACrEmB,QAAAA,cAAc,EAAEL,IAAI;AACpBhB,QAAAA,QAAQ,EAARA,QAAAA;OACA;MAAAN,QAAA,eAEFmB,GAAA,CAACS,aAAmB,EAAA;AAACF,QAAAA,KAAK,EAAEjB,aAAc;AAAAT,QAAAA,QAAA,EAAEA,QAAAA;OAA8B,CAAA;AAAC,KACtD,CAAC,CAAA;AAE5B,GAAA;EAEA,oBACEmB,GAAA,CAACU,aAAa,EAAA;AAACC,IAAAA,WAAW,EAAEjB,UAAW;IAACL,WAAW,EAAEN,aAAa,CAACM,WAAY;AAAAR,IAAAA,QAAA,EAC5EA,QAAAA;AAAQ,GACI,CAAC,CAAA;AAEpB;;;;"}

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

@@ -1,3 +1,5 @@
 import './TabNav/index.js';
 export { TopNav, TopNavActions, TopNavBrand, TopNavContent } from './TopNav.web.js';
+export { useTopNavContext } from './TopNavContext.js';
+export { TopNavOverlayThemeOverride } from './TopNavOverlayThemeOverride.js';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/build/lib/web/development/components/Typography/BaseText/getBaseTextStyles.js

@@ -1,11 +1,14 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import getIn from '../../../utils/lodashButBetter/get.js';
 import '../../../utils/makeTypographySize/index.web.js';
+import { DOTTED_UNDERLINE_STYLES } from './tokens.js';
+import getIn from '../../../utils/lodashButBetter/get.js';
 import '../../../utils/index.js';
 import '../../../utils/makeLetterSpacing/index.js';
+import '../../../utils/logger/index.js';
 import { makeTypographySize } from '../../../utils/makeTypographySize/makeTypographySize.web.js';
 import { makeLetterSpacing } from '../../../utils/makeLetterSpacing/makeLetterSpacing.js';
 import { isReactNative } from '../../../utils/platform/isReactNative.js';
+import { logger } from '../../../utils/logger/logger.js';
 
 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; }
@@ -63,14 +66,31 @@ var getBaseTextStyles = function getBaseTextStyles(_ref) {
       };
     }
   }
-  return _objectSpread(_objectSpread(_objectSpread({
+
+  // Handle 'dotted' as a special case - it creates a dotted underline
+  // Both RN and Web use 'underline' when dotted, just different styling
+  var isDotted = textDecorationLine === 'dotted';
+  var actualTextDecorationLine = isDotted ? 'underline' : textDecorationLine;
+
+  // Warn on React Native since dotted styling isn't supported
+  if (isDotted && isReactNative()) {
+    logger({
+      message: 'textDecorationLine="dotted" is not supported on React Native. Falling back to "underline".',
+      moduleName: 'BaseText',
+      type: 'warn'
+    });
+  }
+
+  // Apply dotted styles only on web
+  var dottedStyles = isDotted && !isReactNative() ? DOTTED_UNDERLINE_STYLES : {};
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({
     color: textColor,
     fontFamily: themeFontFamily,
     fontSize: themeFontSize,
     fontWeight: themeFontWeight,
     fontStyle: fontStyle,
-    textDecorationLine: textDecorationLine
-  }, textDecorationLine !== 'none' && {
+    textDecorationLine: actualTextDecorationLine
+  }, dottedStyles), textDecorationLine !== 'none' && {
     textDecorationColor: textColor
   }), {}, {
     lineHeight: themeLineHeight,

package/build/lib/web/development/components/Typography/BaseText/getBaseTextStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"getBaseTextStyles.js","sources":["../../../../../../../src/components/Typography/BaseText/getBaseTextStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\nimport type { StyledBaseTextProps } from './types';\nimport getIn from '~utils/lodashButBetter/get';\nimport { makeTypographySize } from '~utils/makeTypographySize';\nimport { isReactNative } from '~utils';\nimport { makeLetterSpacing } from '~utils/makeLetterSpacing';\n\nconst getBaseTextStyles = ({\n  color = 'surface.text.gray.normal',\n  fontFamily = 'text',\n  fontSize = 200,\n  fontWeight = 'regular',\n  fontStyle = 'normal',\n  textDecorationLine = 'none',\n  numberOfLines,\n  wordBreak,\n  lineHeight = 100,\n  letterSpacing = 100,\n  textAlign,\n  opacity,\n  theme,\n  textTransform,\n}: StyledBaseTextProps): CSSObject => {\n  const textColor = color === 'currentColor' ? 'currentColor' : getIn(theme.colors, color);\n  const themeFontFamily = theme.typography.fonts.family[fontFamily];\n  const themeFontSize = makeTypographySize(theme.typography.fonts.size[fontSize]);\n  const themeFontWeight = theme.typography.fonts.weight[fontWeight];\n  const themeLineHeight = makeTypographySize(theme.typography.lineHeights[lineHeight]);\n  const themeLetterSpacing = makeLetterSpacing(\n    theme.typography.letterSpacings[letterSpacing],\n    theme.typography.fonts.size[fontSize],\n  );\n  let truncateStyles: CSSObject = {};\n  let wordBreakStyles: CSSObject = {};\n  if (numberOfLines !== undefined) {\n    if (isReactNative()) {\n      truncateStyles = {};\n    } else {\n      truncateStyles = {\n        overflow: 'hidden',\n        display: '-webkit-box',\n        'line-clamp': `${numberOfLines}`,\n        '-webkit-line-clamp': `${numberOfLines}`,\n        '-webkit-box-orient': 'vertical',\n        overflowWrap: 'break-word',\n      };\n    }\n  }\n  if (wordBreak !== undefined) {\n    if (isReactNative()) {\n      wordBreakStyles = {};\n    } else {\n      wordBreakStyles = {\n        wordBreak,\n      };\n    }\n  }\n\n  return {\n    color: textColor,\n    fontFamily: themeFontFamily,\n    fontSize: themeFontSize,\n    fontWeight: themeFontWeight,\n    fontStyle,\n    textDecorationLine,\n    ...(textDecorationLine !== 'none' && {\n      textDecorationColor: textColor,\n    }),\n    lineHeight: themeLineHeight,\n    letterSpacing: themeLetterSpacing,\n    textAlign,\n    margin: 0,\n    padding: 0,\n    opacity,\n    textTransform,\n    ...truncateStyles,\n    ...wordBreakStyles,\n  };\n};\n\nexport default getBaseTextStyles;\n"],"names":["getBaseTextStyles","_ref","_ref$color","color","_ref$fontFamily","fontFamily","_ref$fontSize","fontSize","_ref$fontWeight","fontWeight","_ref$fontStyle","fontStyle","_ref$textDecorationLi","textDecorationLine","numberOfLines","wordBreak","_ref$lineHeight","lineHeight","_ref$letterSpacing","letterSpacing","textAlign","opacity","theme","textTransform","textColor","getIn","colors","themeFontFamily","typography","fonts","family","themeFontSize","makeTypographySize","size","themeFontWeight","weight","themeLineHeight","lineHeights","themeLetterSpacing","makeLetterSpacing","letterSpacings","truncateStyles","wordBreakStyles","undefined","isReactNative","overflow","display","concat","overflowWrap","_objectSpread","textDecorationColor","margin","padding"],"mappings":"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"}
+{"version":3,"file":"getBaseTextStyles.js","sources":["../../../../../../../src/components/Typography/BaseText/getBaseTextStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\nimport { makeTypographySize } from '~utils/makeTypographySize';\nimport type { StyledBaseTextProps } from './types';\nimport { DOTTED_UNDERLINE_STYLES } from './tokens';\nimport getIn from '~utils/lodashButBetter/get';\nimport { isReactNative } from '~utils';\nimport { makeLetterSpacing } from '~utils/makeLetterSpacing';\nimport { logger } from '~utils/logger';\n\nconst getBaseTextStyles = ({\n  color = 'surface.text.gray.normal',\n  fontFamily = 'text',\n  fontSize = 200,\n  fontWeight = 'regular',\n  fontStyle = 'normal',\n  textDecorationLine = 'none',\n  numberOfLines,\n  wordBreak,\n  lineHeight = 100,\n  letterSpacing = 100,\n  textAlign,\n  opacity,\n  theme,\n  textTransform,\n}: StyledBaseTextProps): CSSObject => {\n  const textColor = color === 'currentColor' ? 'currentColor' : getIn(theme.colors, color);\n  const themeFontFamily = theme.typography.fonts.family[fontFamily];\n  const themeFontSize = makeTypographySize(theme.typography.fonts.size[fontSize]);\n  const themeFontWeight = theme.typography.fonts.weight[fontWeight];\n  const themeLineHeight = makeTypographySize(theme.typography.lineHeights[lineHeight]);\n  const themeLetterSpacing = makeLetterSpacing(\n    theme.typography.letterSpacings[letterSpacing],\n    theme.typography.fonts.size[fontSize],\n  );\n  let truncateStyles: CSSObject = {};\n  let wordBreakStyles: CSSObject = {};\n  if (numberOfLines !== undefined) {\n    if (isReactNative()) {\n      truncateStyles = {};\n    } else {\n      truncateStyles = {\n        overflow: 'hidden',\n        display: '-webkit-box',\n        'line-clamp': `${numberOfLines}`,\n        '-webkit-line-clamp': `${numberOfLines}`,\n        '-webkit-box-orient': 'vertical',\n        overflowWrap: 'break-word',\n      };\n    }\n  }\n  if (wordBreak !== undefined) {\n    if (isReactNative()) {\n      wordBreakStyles = {};\n    } else {\n      wordBreakStyles = {\n        wordBreak,\n      };\n    }\n  }\n\n  // Handle 'dotted' as a special case - it creates a dotted underline\n  // Both RN and Web use 'underline' when dotted, just different styling\n  const isDotted = textDecorationLine === 'dotted';\n  const actualTextDecorationLine = isDotted ? 'underline' : textDecorationLine;\n\n  // Warn on React Native since dotted styling isn't supported\n  if (isDotted && isReactNative()) {\n    logger({\n      message:\n        'textDecorationLine=\"dotted\" is not supported on React Native. Falling back to \"underline\".',\n      moduleName: 'BaseText',\n      type: 'warn',\n    });\n  }\n\n  // Apply dotted styles only on web\n  const dottedStyles = isDotted && !isReactNative() ? DOTTED_UNDERLINE_STYLES : {};\n\n  return {\n    color: textColor,\n    fontFamily: themeFontFamily,\n    fontSize: themeFontSize,\n    fontWeight: themeFontWeight,\n    fontStyle,\n    textDecorationLine: actualTextDecorationLine,\n    ...dottedStyles,\n    ...(textDecorationLine !== 'none' && {\n      textDecorationColor: textColor,\n    }),\n    lineHeight: themeLineHeight,\n    letterSpacing: themeLetterSpacing,\n    textAlign,\n    margin: 0,\n    padding: 0,\n    opacity,\n    textTransform,\n    ...truncateStyles,\n    ...wordBreakStyles,\n  };\n};\n\nexport default getBaseTextStyles;\n"],"names":["getBaseTextStyles","_ref","_ref$color","color","_ref$fontFamily","fontFamily","_ref$fontSize","fontSize","_ref$fontWeight","fontWeight","_ref$fontStyle","fontStyle","_ref$textDecorationLi","textDecorationLine","numberOfLines","wordBreak","_ref$lineHeight","lineHeight","_ref$letterSpacing","letterSpacing","textAlign","opacity","theme","textTransform","textColor","getIn","colors","themeFontFamily","typography","fonts","family","themeFontSize","makeTypographySize","size","themeFontWeight","weight","themeLineHeight","lineHeights","themeLetterSpacing","makeLetterSpacing","letterSpacings","truncateStyles","wordBreakStyles","undefined","isReactNative","overflow","display","concat","overflowWrap","isDotted","actualTextDecorationLine","logger","message","moduleName","type","dottedStyles","DOTTED_UNDERLINE_STYLES","_objectSpread","textDecorationColor","margin","padding"],"mappings":"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"}

package/build/lib/web/development/components/Typography/BaseText/tokens.js

@@ -0,0 +1,9 @@
+var DOTTED_UNDERLINE_STYLES = {
+  textDecorationStyle: 'dotted',
+  textDecorationSkipInk: 'none',
+  textDecorationThickness: '10%',
+  textUnderlineOffset: '20%'
+};
+
+export { DOTTED_UNDERLINE_STYLES };
+//# sourceMappingURL=tokens.js.map

package/build/lib/web/development/components/Typography/BaseText/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sources":["../../../../../../../src/components/Typography/BaseText/tokens.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\n\nconst DOTTED_UNDERLINE_STYLES: CSSObject = {\n  textDecorationStyle: 'dotted',\n  textDecorationSkipInk: 'none',\n  textDecorationThickness: '10%',\n  textUnderlineOffset: '20%',\n};\n\nexport { DOTTED_UNDERLINE_STYLES };\n"],"names":["DOTTED_UNDERLINE_STYLES","textDecorationStyle","textDecorationSkipInk","textDecorationThickness","textUnderlineOffset"],"mappings":"AAEA,IAAMA,uBAAkC,GAAG;AACzCC,EAAAA,mBAAmB,EAAE,QAAQ;AAC7BC,EAAAA,qBAAqB,EAAE,MAAM;AAC7BC,EAAAA,uBAAuB,EAAE,KAAK;AAC9BC,EAAAA,mBAAmB,EAAE,KAAA;AACvB;;;;"}

package/build/lib/web/development/components/Typography/Code/Code.js

@@ -2,13 +2,13 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React__default from 'react';
 import styled from 'styled-components';
+import '../../../utils/makeTypographySize/index.web.js';
 import '../BaseText/index.js';
 import '../../Box/BaseBox/index.js';
 import '../../Box/styledProps/index.js';
 import '../../../utils/index.js';
 import '../../../utils/metaAttribute/index.js';
 import '../../../utils/makeSpace/index.js';
-import '../../../utils/makeTypographySize/index.web.js';
 import '../../../utils/logger/index.js';
 import { jsx } from 'react/jsx-runtime';
 import { getPlatformType } from '../../../utils/getPlatformType/getPlatformType.js';
@@ -31,12 +31,14 @@ var getCodeFontSizeAndLineHeight = function getCodeFontSizeAndLineHeight(size) {
     case 'medium':
       return {
         fontSize: 75,
-        lineHeight: 75
+        lineHeight: 75,
+        letterSpacing: 100
       };
     case 'small':
       return {
         fontSize: 25,
-        lineHeight: 25
+        lineHeight: 25,
+        letterSpacing: 100
       };
     default:
       if (true) {
@@ -56,7 +58,7 @@ var CodeContainer = /*#__PURE__*/styled(BaseBox).withConfig({
   return {
     padding: padding,
     backgroundColor: props.isHighlighted ? props.theme.colors.feedback.background.neutral.subtle : undefined,
-    borderRadius: props.theme.border.radius.medium,
+    borderRadius: props.theme.border.radius.xsmall,
     display: isPlatformWeb ? 'inline-block' : 'flex',
     alignSelf: isPlatformWeb ? undefined : 'center',
     verticalAlign: 'middle',
@@ -96,7 +98,8 @@ var _Code = function _Code(_ref2, ref) {
     styledProps = _objectWithoutProperties(_ref2, _excluded);
   var _ref3 = getCodeFontSizeAndLineHeight(size),
     fontSize = _ref3.fontSize,
-    lineHeight = _ref3.lineHeight;
+    lineHeight = _ref3.lineHeight,
+    letterSpacing = _ref3.letterSpacing;
   var codeTextColor = React__default.useMemo(function () {
     return getCodeColor({
       isHighlighted: isHighlighted,
@@ -119,6 +122,7 @@ var _Code = function _Code(_ref2, ref) {
       fontWeight: weight,
       as: isPlatformWeb ? 'code' : undefined,
       lineHeight: lineHeight,
+      letterSpacing: letterSpacing,
       textTransform: textTransform,
       children: children
     })

package/build/lib/web/development/components/Typography/Code/Code.js.map

@@ -1 +1 @@
-{"version":3,"file":"Code.js","sources":["../../../../../../../src/components/Typography/Code/Code.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { BaseText } from '../BaseText';\nimport type { BaseTextProps, BaseTextSizes } from '../BaseText/types';\nimport BaseBox from '~components/Box/BaseBox';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { getPlatformType } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { FontSize, Typography } from '~tokens/global';\nimport type { BladeElementRef, StringChildrenType, TestID } from '~utils/types';\nimport { makeSpace } from '~utils/makeSpace';\nimport { makeTypographySize } from '~utils/makeTypographySize';\nimport { throwBladeError } from '~utils/logger';\n\ntype CodeCommonProps = {\n  /**\n   * Sets the color of the Heading component.\n   */\n  children: StringChildrenType;\n  /**\n   * Decides the fontSize and padding of Code\n   *\n   * @default small\n   */\n  size?: Extract<BaseTextSizes, 'small' | 'medium'>;\n  weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'bold'>;\n  isHighlighted?: boolean;\n  textTransform?: BaseTextProps['textTransform'];\n  color?: BaseTextProps['color'];\n} & TestID &\n  StyledPropsBlade;\n\ntype CodeHighlightedProps = CodeCommonProps & {\n  /**\n   * Adds background color to highlight the text\n   *\n   * @default true\n   */\n  isHighlighted?: true;\n  /**\n   * color prop can only be added when `isHighlighted` is set to `false`\n   */\n  color?: undefined;\n};\n\ntype CodeNonHighlightedProps = CodeCommonProps & {\n  /**\n   * Adds background color to highlight the text\n   *\n   * @default true\n   */\n  isHighlighted: false;\n  /**\n   * color prop to set color of text when `isHighlighted` is set to false\n   */\n  color?: BaseTextProps['color'];\n};\n\nexport type CodeProps = CodeHighlightedProps | CodeNonHighlightedProps;\n\ntype CodeContainerProps = {\n  size: CodeProps['size'];\n  isHighlighted: CodeProps['isHighlighted'];\n};\n\nconst platformType = getPlatformType();\nconst isPlatformWeb = platformType === 'browser' || platformType === 'node';\n\nconst getCodeFontSizeAndLineHeight = (\n  size: CodeProps['size'],\n): { fontSize: keyof FontSize; lineHeight: keyof Typography['lineHeights'] } | undefined => {\n  switch (size) {\n    case 'medium':\n      return { fontSize: 75, lineHeight: 75 };\n    case 'small':\n      return { fontSize: 25, lineHeight: 25 };\n    default:\n      if (__DEV__) {\n        throwBladeError({\n          moduleName: 'Code',\n          message: `Unexpected size: ${size}`,\n        });\n      }\n      return undefined;\n  }\n};\n\nconst CodeContainer = styled(BaseBox)<CodeContainerProps>((props) => {\n  const padding = `${makeSpace(props.theme.spacing[0])} ${makeSpace(props.theme.spacing[2])}`;\n  return {\n    padding,\n    backgroundColor: props.isHighlighted\n      ? props.theme.colors.feedback.background.neutral.subtle\n      : undefined,\n    borderRadius: props.theme.border.radius.medium,\n    display: isPlatformWeb ? 'inline-block' : 'flex',\n    alignSelf: isPlatformWeb ? undefined : 'center',\n    verticalAlign: 'middle',\n    lineHeight: makeTypographySize(props.theme.typography.lineHeights[0]),\n  };\n});\n\nconst getCodeColor = ({\n  isHighlighted,\n  color,\n}: Pick<CodeProps, 'isHighlighted' | 'color'>): CodeProps['color'] => {\n  if (isHighlighted) {\n    if (__DEV__) {\n      if (color) {\n        throwBladeError({\n          moduleName: 'Code',\n          message: '`color` prop cannot be used without `isHighlighted={false}`',\n        });\n      }\n    }\n\n    return 'surface.text.gray.subtle';\n  }\n\n  if (color) {\n    return color;\n  }\n\n  return 'surface.text.gray.normal';\n};\n\nconst _Code = (\n  {\n    children,\n    size = 'small',\n    weight = 'regular',\n    isHighlighted = true,\n    color,\n    testID,\n    textTransform,\n    ...styledProps\n  }: CodeProps,\n  ref: React.Ref<BladeElementRef>,\n): React.ReactElement => {\n  const { fontSize, lineHeight } = getCodeFontSizeAndLineHeight(size)!;\n  const codeTextColor = React.useMemo<CodeProps['color']>(\n    () => getCodeColor({ isHighlighted, color }),\n    [isHighlighted, color],\n  );\n\n  return (\n    <CodeContainer\n      ref={ref as never}\n      size={size}\n      isHighlighted={isHighlighted}\n      as={isPlatformWeb ? 'span' : undefined}\n      {...metaAttribute({ name: MetaConstants.Code, testID })}\n      {...getStyledProps(styledProps)}\n    >\n      <BaseText\n        color={codeTextColor}\n        fontFamily=\"code\"\n        fontSize={fontSize}\n        fontWeight={weight}\n        as={isPlatformWeb ? 'code' : undefined}\n        lineHeight={lineHeight}\n        textTransform={textTransform}\n      >\n        {children}\n      </BaseText>\n    </CodeContainer>\n  );\n};\n\n/**\n * Code component can be used for displaying token, variable names, or inlined code snippets.\n *\n * ## Usage\n *\n * ### In Web\n * In web, you can use it inside `Text` component or individually. The component is set to display `inline-block`\n *\n * ```tsx\n * <Text>\n *  Lorem ipsum <Code>SENTRY_TOKEN</Code> normal text\n * </Text>\n * ```\n *\n * ### In React Native\n *\n * In React Native, you would have to align it using flex to make sure the Code and the surrounding text is correctly aligned\n *\n * ```tsx\n *  <Box flexWrap=\"wrap\" flexDirection=\"row\" alignItems=\"flex-start\">\n *   <Text>Lorem ipsum </Text>\n *   <Code>SENTRY_TOKEN</Code>\n *   <Text> normal text</Text>\n * </Box>\n * ```\n */\nconst Code = React.forwardRef(_Code);\n\nexport { Code };\n"],"names":["platformType","getPlatformType","isPlatformWeb","getCodeFontSizeAndLineHeight","size","fontSize","lineHeight","throwBladeError","moduleName","message","concat","undefined","CodeContainer","styled","BaseBox","withConfig","displayName","componentId","props","padding","makeSpace","theme","spacing","backgroundColor","isHighlighted","colors","feedback","background","neutral","subtle","borderRadius","border","radius","medium","display","alignSelf","verticalAlign","makeTypographySize","typography","lineHeights","getCodeColor","_ref","color","_Code","_ref2","ref","children","_ref2$size","_ref2$weight","weight","_ref2$isHighlighted","testID","textTransform","styledProps","_objectWithoutProperties","_excluded","_ref3","codeTextColor","React","useMemo","_jsx","_objectSpread","as","metaAttribute","name","MetaConstants","Code","getStyledProps","BaseText","fontFamily","fontWeight","forwardRef"],"mappings":"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"}
+{"version":3,"file":"Code.js","sources":["../../../../../../../src/components/Typography/Code/Code.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { makeTypographySize } from '~utils/makeTypographySize';\nimport { BaseText } from '../BaseText';\nimport type { BaseTextProps, BaseTextSizes } from '../BaseText/types';\nimport BaseBox from '~components/Box/BaseBox';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { getPlatformType } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { FontSize, Typography } from '~tokens/global';\nimport type { BladeElementRef, StringChildrenType, TestID } from '~utils/types';\nimport { makeSpace } from '~utils/makeSpace';\nimport { throwBladeError } from '~utils/logger';\n\ntype CodeCommonProps = {\n  /**\n   * Sets the color of the Heading component.\n   */\n  children: StringChildrenType;\n  /**\n   * Decides the fontSize and padding of Code\n   *\n   * @default small\n   */\n  size?: Extract<BaseTextSizes, 'small' | 'medium'>;\n  weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'bold'>;\n  isHighlighted?: boolean;\n  textTransform?: BaseTextProps['textTransform'];\n  color?: BaseTextProps['color'];\n} & TestID &\n  StyledPropsBlade;\n\ntype CodeHighlightedProps = CodeCommonProps & {\n  /**\n   * Adds background color to highlight the text\n   *\n   * @default true\n   */\n  isHighlighted?: true;\n  /**\n   * color prop can only be added when `isHighlighted` is set to `false`\n   */\n  color?: undefined;\n};\n\ntype CodeNonHighlightedProps = CodeCommonProps & {\n  /**\n   * Adds background color to highlight the text\n   *\n   * @default true\n   */\n  isHighlighted: false;\n  /**\n   * color prop to set color of text when `isHighlighted` is set to false\n   */\n  color?: BaseTextProps['color'];\n};\n\nexport type CodeProps = CodeHighlightedProps | CodeNonHighlightedProps;\n\ntype CodeContainerProps = {\n  size: CodeProps['size'];\n  isHighlighted: CodeProps['isHighlighted'];\n};\n\nconst platformType = getPlatformType();\nconst isPlatformWeb = platformType === 'browser' || platformType === 'node';\n\nconst getCodeFontSizeAndLineHeight = (\n  size: CodeProps['size'],\n):\n  | {\n      fontSize: keyof FontSize;\n      lineHeight: keyof Typography['lineHeights'];\n      letterSpacing: keyof Typography['letterSpacings'];\n    }\n  | undefined => {\n  switch (size) {\n    case 'medium':\n      return { fontSize: 75, lineHeight: 75, letterSpacing: 100 };\n    case 'small':\n      return { fontSize: 25, lineHeight: 25, letterSpacing: 100 };\n    default:\n      if (__DEV__) {\n        throwBladeError({\n          moduleName: 'Code',\n          message: `Unexpected size: ${size}`,\n        });\n      }\n      return undefined;\n  }\n};\n\nconst CodeContainer = styled(BaseBox)<CodeContainerProps>((props) => {\n  const padding = `${makeSpace(props.theme.spacing[0])} ${makeSpace(props.theme.spacing[2])}`;\n  return {\n    padding,\n    backgroundColor: props.isHighlighted\n      ? props.theme.colors.feedback.background.neutral.subtle\n      : undefined,\n    borderRadius: props.theme.border.radius.xsmall,\n    display: isPlatformWeb ? 'inline-block' : 'flex',\n    alignSelf: isPlatformWeb ? undefined : 'center',\n    verticalAlign: 'middle',\n    lineHeight: makeTypographySize(props.theme.typography.lineHeights[0]),\n  };\n});\n\nconst getCodeColor = ({\n  isHighlighted,\n  color,\n}: Pick<CodeProps, 'isHighlighted' | 'color'>): CodeProps['color'] => {\n  if (isHighlighted) {\n    if (__DEV__) {\n      if (color) {\n        throwBladeError({\n          moduleName: 'Code',\n          message: '`color` prop cannot be used without `isHighlighted={false}`',\n        });\n      }\n    }\n\n    return 'surface.text.gray.subtle';\n  }\n\n  if (color) {\n    return color;\n  }\n\n  return 'surface.text.gray.normal';\n};\n\nconst _Code = (\n  {\n    children,\n    size = 'small',\n    weight = 'regular',\n    isHighlighted = true,\n    color,\n    testID,\n    textTransform,\n    ...styledProps\n  }: CodeProps,\n  ref: React.Ref<BladeElementRef>,\n): React.ReactElement => {\n  const { fontSize, lineHeight, letterSpacing } = getCodeFontSizeAndLineHeight(size)!;\n  const codeTextColor = React.useMemo<CodeProps['color']>(\n    () => getCodeColor({ isHighlighted, color }),\n    [isHighlighted, color],\n  );\n\n  return (\n    <CodeContainer\n      ref={ref as never}\n      size={size}\n      isHighlighted={isHighlighted}\n      as={isPlatformWeb ? 'span' : undefined}\n      {...metaAttribute({ name: MetaConstants.Code, testID })}\n      {...getStyledProps(styledProps)}\n    >\n      <BaseText\n        color={codeTextColor}\n        fontFamily=\"code\"\n        fontSize={fontSize}\n        fontWeight={weight}\n        as={isPlatformWeb ? 'code' : undefined}\n        lineHeight={lineHeight}\n        letterSpacing={letterSpacing}\n        textTransform={textTransform}\n      >\n        {children}\n      </BaseText>\n    </CodeContainer>\n  );\n};\n\n/**\n * Code component can be used for displaying token, variable names, or inlined code snippets.\n *\n * ## Usage\n *\n * ### In Web\n * In web, you can use it inside `Text` component or individually. The component is set to display `inline-block`\n *\n * ```tsx\n * <Text>\n *  Lorem ipsum <Code>SENTRY_TOKEN</Code> normal text\n * </Text>\n * ```\n *\n * ### In React Native\n *\n * In React Native, you would have to align it using flex to make sure the Code and the surrounding text is correctly aligned\n *\n * ```tsx\n *  <Box flexWrap=\"wrap\" flexDirection=\"row\" alignItems=\"flex-start\">\n *   <Text>Lorem ipsum </Text>\n *   <Code>SENTRY_TOKEN</Code>\n *   <Text> normal text</Text>\n * </Box>\n * ```\n */\nconst Code = React.forwardRef(_Code);\n\nexport { Code };\n"],"names":["platformType","getPlatformType","isPlatformWeb","getCodeFontSizeAndLineHeight","size","fontSize","lineHeight","letterSpacing","throwBladeError","moduleName","message","concat","undefined","CodeContainer","styled","BaseBox","withConfig","displayName","componentId","props","padding","makeSpace","theme","spacing","backgroundColor","isHighlighted","colors","feedback","background","neutral","subtle","borderRadius","border","radius","xsmall","display","alignSelf","verticalAlign","makeTypographySize","typography","lineHeights","getCodeColor","_ref","color","_Code","_ref2","ref","children","_ref2$size","_ref2$weight","weight","_ref2$isHighlighted","testID","textTransform","styledProps","_objectWithoutProperties","_excluded","_ref3","codeTextColor","React","useMemo","_jsx","_objectSpread","as","metaAttribute","name","MetaConstants","Code","getStyledProps","BaseText","fontFamily","fontWeight","forwardRef"],"mappings":"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"}

package/build/lib/web/development/components/Typography/Text/Text.js

@@ -56,18 +56,22 @@ var getTextProps = function getTextProps(_ref) {
     if (size === 'xsmall') {
       props.fontSize = 25;
       props.lineHeight = 25;
+      props.letterSpacing = 50;
     }
     if (size === 'small') {
       props.fontSize = 75;
       props.lineHeight = 75;
+      props.letterSpacing = 50;
     }
     if (size === 'medium') {
       props.fontSize = 100;
       props.lineHeight = 100;
+      props.letterSpacing = 50;
     }
     if (size === 'large') {
       props.fontSize = 200;
       props.lineHeight = 200;
+      props.letterSpacing = 25;
     }
   }
   if (variant === 'caption') {
@@ -75,11 +79,13 @@ var getTextProps = function getTextProps(_ref) {
       props.fontSize = 50;
       props.lineHeight = 50;
       props.fontWeight = 'regular';
+      props.letterSpacing = 50;
     }
     if (size === 'medium') {
       props.fontSize = 100;
       props.lineHeight = 50;
       props.fontWeight = 'regular';
+      props.letterSpacing = 50;
     }
   }
   return props;