@multiplatform.one/components 6.1.0 → 6.4.0

package/dist/esm/charts/useChartTheme.mjs

@@ -0,0 +1,61 @@
+import { useChartPalette, useResolvedKnobs } from "@multiplatform.one/theme";
+import * as Colors from "@tamagui/colors";
+import { useMemo } from "react";
+import { getConfig, getVariableValue, useTheme as useTamaguiTheme, useThemeName } from "tamagui";
+const labelFontSizeBySizeToken = {
+  $3: 11,
+  $4: 12,
+  $5: 13
+};
+const barRadiusByKnob = {
+  $0: 0,
+  $2: 2,
+  $4: 3,
+  $6: 5,
+  $12: Number.POSITIVE_INFINITY
+};
+function resolveFontFamily(fontToken) {
+  if (typeof fontToken !== "string") return void 0;
+  try {
+    const fonts = getConfig()?.fontsParsed;
+    const family = fonts?.[fontToken]?.family;
+    const value = getVariableValue(family);
+    return typeof value === "string" ? value : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function useChartTheme() {
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  const palette = useChartPalette();
+  const themeName = useThemeName();
+  const theme = useTamaguiTheme();
+  const scheme = themeName?.startsWith("dark") ? "dark" : "light";
+  const gray = scheme === "dark" ? Colors.grayDark : Colors.gray;
+  const axisColor = theme.color6?.val ?? gray.gray6;
+  const gridColor = theme.color4?.val ?? gray.gray4;
+  const labelColor = theme.color11?.val ?? gray.gray11;
+  const bodyFontToken = knobProps.body.fontFamily;
+  const sizeToken = String(knobProps.sizeToken);
+  const radiusToken = String(knobProps.borderRadius.borderRadius);
+  const transition = knobProps.transition;
+  return useMemo(() => {
+    const barRadiusBase = barRadiusByKnob[radiusToken] ?? 3;
+    return {
+      scheme,
+      palette,
+      axisColor,
+      gridColor,
+      labelColor,
+      labelFontFamily: resolveFontFamily(bodyFontToken),
+      labelFontSize: labelFontSizeBySizeToken[sizeToken] ?? 12,
+      transition,
+      animationEnabled: transition !== null && transition !== void 0,
+      barCornerRadius: (bandWidth, barHeight) => Math.max(0, Math.min(barRadiusBase, bandWidth / 2, barHeight / 2))
+    };
+  }, [scheme, palette, axisColor, gridColor, labelColor, bodyFontToken, sizeToken, radiusToken, transition]);
+}
+export { useChartTheme };
+//# sourceMappingURL=useChartTheme.mjs.map

package/dist/esm/charts/useChartTheme.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["useChartPalette","useResolvedKnobs","Colors","useMemo","getConfig","getVariableValue","useTheme","useTamaguiTheme","useThemeName","labelFontSizeBySizeToken","$3","$4","$5","barRadiusByKnob","$0","$2","$6","$12","Number","POSITIVE_INFINITY","resolveFontFamily","fontToken","fonts","fontsParsed","family","value","useChartTheme","knobProps","palette","themeName","theme","scheme","startsWith","gray","grayDark","axisColor","color6","val","gray6","gridColor","color4","gray4","labelColor","color11","gray11","bodyFontToken","body","fontFamily","sizeToken","String","radiusToken","borderRadius","transition","barRadiusBase","labelFontFamily","labelFontSize","animationEnabled","barCornerRadius","bandWidth","barHeight","Math","max","min"],"sources":["../../../src/charts/useChartTheme.ts"],"sourcesContent":[null],"mappings":"AAoBA,SAASA,eAAA,EAAiBC,gBAAA,QAA2C;AACrE,YAAYC,MAAA,MAAY;AACxB,SAASC,OAAA,QAAe;AACxB,SACEC,SAAA,EACAC,gBAAA,EACAC,QAAA,IAAYC,eAAA,EACZC,YAAA,QAEK;AAwBP,MAAMC,wBAAA,GAAmD;EACvDC,EAAA,EAAI;EACJC,EAAA,EAAI;EACJC,EAAA,EAAI;AACN;AAGA,MAAMC,eAAA,GAA0C;EAC9CC,EAAA,EAAI;EACJC,EAAA,EAAI;EACJJ,EAAA,EAAI;EACJK,EAAA,EAAI;EACJC,GAAA,EAAKC,MAAA,CAAOC;AACd;AAEA,SAASC,kBAAkBC,SAAA,EAAwC;EACjE,IAAI,OAAOA,SAAA,KAAc,UAAU,OAAO;EAC1C,IAAI;IACF,MAAMC,KAAA,GAAQlB,SAAA,CAAU,GAAGmB,WAAA;IAG3B,MAAMC,MAAA,GAASF,KAAA,GAAQD,SAAS,GAAGG,MAAA;IACnC,MAAMC,KAAA,GAAQpB,gBAAA,CAAiBmB,MAAgD;IAC/E,OAAO,OAAOC,KAAA,KAAU,WAAWA,KAAA,GAAQ;EAC7C,QAAQ;IACN,OAAO;EACT;AACF;AAEO,SAASC,cAAA,EAA4B;EAC1C,MAAM;IAAEC;EAAU,IAAI1B,gBAAA,CAAiB;EACvC,MAAM2B,OAAA,GAAU5B,eAAA,CAAgB;EAChC,MAAM6B,SAAA,GAAYrB,YAAA,CAAa;EAC/B,MAAMsB,KAAA,GAAQvB,eAAA,CAAgB;EAC9B,MAAMwB,MAAA,GAA2BF,SAAA,EAAWG,UAAA,CAAW,MAAM,IAAI,SAAS;EAI1E,MAAMC,IAAA,GAAOF,MAAA,KAAW,SAAS7B,MAAA,CAAOgC,QAAA,GAAWhC,MAAA,CAAO+B,IAAA;EAC1D,MAAME,SAAA,GAAYL,KAAA,CAAMM,MAAA,EAAQC,GAAA,IAAOJ,IAAA,CAAKK,KAAA;EAC5C,MAAMC,SAAA,GAAYT,KAAA,CAAMU,MAAA,EAAQH,GAAA,IAAOJ,IAAA,CAAKQ,KAAA;EAC5C,MAAMC,UAAA,GAAaZ,KAAA,CAAMa,OAAA,EAASN,GAAA,IAAOJ,IAAA,CAAKW,MAAA;EAE9C,MAAMC,aAAA,GAAgBlB,SAAA,CAAUmB,IAAA,CAAKC,UAAA;EACrC,MAAMC,SAAA,GAAYC,MAAA,CAAOtB,SAAA,CAAUqB,SAAS;EAC5C,MAAME,WAAA,GAAcD,MAAA,CAAOtB,SAAA,CAAUwB,YAAA,CAAaA,YAAY;EAC9D,MAAMC,UAAA,GAAazB,SAAA,CAAUyB,UAAA;EAE7B,OAAOjD,OAAA,CAAQ,MAAM;IACnB,MAAMkD,aAAA,GAAgBxC,eAAA,CAAgBqC,WAAW,KAAK;IACtD,OAAO;MACLnB,MAAA;MACAH,OAAA;MACAO,SAAA;MACAI,SAAA;MACAG,UAAA;MACAY,eAAA,EAAiBlC,iBAAA,CAAkByB,aAAa;MAChDU,aAAA,EAAe9C,wBAAA,CAAyBuC,SAAS,KAAK;MACtDI,UAAA;MACAI,gBAAA,EAAkBJ,UAAA,KAAe,QAAQA,UAAA,KAAe;MACxDK,eAAA,EAAiBA,CAACC,SAAA,EAAmBC,SAAA,KACnCC,IAAA,CAAKC,GAAA,CAAI,GAAGD,IAAA,CAAKE,GAAA,CAAIT,aAAA,EAAeK,SAAA,GAAY,GAAGC,SAAA,GAAY,CAAC,CAAC;IACrE;EACF,GAAG,CACD5B,MAAA,EACAH,OAAA,EACAO,SAAA,EACAI,SAAA,EACAG,UAAA,EACAG,aAAA,EACAG,SAAA,EACAE,WAAA,EACAE,UAAA,CACD;AACH","ignoreList":[]}

package/dist/esm/charts/useChartTheme.native.js

@@ -0,0 +1,67 @@
+import { useChartPalette, useResolvedKnobs } from "@multiplatform.one/theme";
+import * as Colors from "@tamagui/colors";
+import { useMemo } from "react";
+import { getConfig, getVariableValue, useTheme as useTamaguiTheme, useThemeName } from "tamagui";
+var labelFontSizeBySizeToken = {
+  $3: 11,
+  $4: 12,
+  $5: 13
+};
+var barRadiusByKnob = {
+  $0: 0,
+  $2: 2,
+  $4: 3,
+  $6: 5,
+  $12: Number.POSITIVE_INFINITY
+};
+function resolveFontFamily(fontToken) {
+  if (typeof fontToken !== "string") return void 0;
+  try {
+    var _getConfig, _fonts_fontToken;
+    var fonts = (_getConfig = getConfig()) === null || _getConfig === void 0 ? void 0 : _getConfig.fontsParsed;
+    var family = fonts === null || fonts === void 0 ? void 0 : (_fonts_fontToken = fonts[fontToken]) === null || _fonts_fontToken === void 0 ? void 0 : _fonts_fontToken.family;
+    var value = getVariableValue(family);
+    return typeof value === "string" ? value : void 0;
+  } catch (unused) {
+    return void 0;
+  }
+}
+function useChartTheme() {
+  var _ref, _ref1, _ref2;
+  var _theme_color6, _theme_color4, _theme_color11;
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  var palette = useChartPalette();
+  var themeName = useThemeName();
+  var theme = useTamaguiTheme();
+  var scheme = (themeName === null || themeName === void 0 ? void 0 : themeName.startsWith("dark")) ? "dark" : "light";
+  var gray = scheme === "dark" ? Colors.grayDark : Colors.gray;
+  var axisColor = (_ref = (_theme_color6 = theme.color6) === null || _theme_color6 === void 0 ? void 0 : _theme_color6.val) !== null && _ref !== void 0 ? _ref : gray.gray6;
+  var gridColor = (_ref1 = (_theme_color4 = theme.color4) === null || _theme_color4 === void 0 ? void 0 : _theme_color4.val) !== null && _ref1 !== void 0 ? _ref1 : gray.gray4;
+  var labelColor = (_ref2 = (_theme_color11 = theme.color11) === null || _theme_color11 === void 0 ? void 0 : _theme_color11.val) !== null && _ref2 !== void 0 ? _ref2 : gray.gray11;
+  var bodyFontToken = knobProps.body.fontFamily;
+  var sizeToken = String(knobProps.sizeToken);
+  var radiusToken = String(knobProps.borderRadius.borderRadius);
+  var transition = knobProps.transition;
+  return useMemo(function () {
+    var _barRadiusByKnob_radiusToken, _labelFontSizeBySizeToken_sizeToken;
+    var barRadiusBase = (_barRadiusByKnob_radiusToken = barRadiusByKnob[radiusToken]) !== null && _barRadiusByKnob_radiusToken !== void 0 ? _barRadiusByKnob_radiusToken : 3;
+    return {
+      scheme,
+      palette,
+      axisColor,
+      gridColor,
+      labelColor,
+      labelFontFamily: resolveFontFamily(bodyFontToken),
+      labelFontSize: (_labelFontSizeBySizeToken_sizeToken = labelFontSizeBySizeToken[sizeToken]) !== null && _labelFontSizeBySizeToken_sizeToken !== void 0 ? _labelFontSizeBySizeToken_sizeToken : 12,
+      transition,
+      animationEnabled: transition !== null && transition !== void 0,
+      barCornerRadius: function barCornerRadius(bandWidth, barHeight) {
+        return Math.max(0, Math.min(barRadiusBase, bandWidth / 2, barHeight / 2));
+      }
+    };
+  }, [scheme, palette, axisColor, gridColor, labelColor, bodyFontToken, sizeToken, radiusToken, transition]);
+}
+export { useChartTheme };
+//# sourceMappingURL=useChartTheme.native.js.map

package/dist/esm/charts/useChartTheme.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useChartPalette","useResolvedKnobs","Colors","useMemo","getConfig","getVariableValue","useTheme","useTamaguiTheme","useThemeName","labelFontSizeBySizeToken","$3","$4","$5","barRadiusByKnob","$0","$2","$6","$12","Number","POSITIVE_INFINITY","resolveFontFamily","fontToken","_getConfig","_fonts_fontToken","fonts","fontsParsed","family","value","unused","useChartTheme","_ref","_ref1","_ref2","_theme_color6","_theme_color4","_theme_color11","knobProps","palette","themeName","theme","scheme","startsWith","gray","grayDark","axisColor","color6","val","gray6","gridColor","color4","gray4","labelColor","color11","gray11","bodyFontToken","body","fontFamily","sizeToken","String","radiusToken","borderRadius","transition","_barRadiusByKnob_radiusToken","_labelFontSizeBySizeToken_sizeToken","barRadiusBase","labelFontFamily","labelFontSize","animationEnabled","barCornerRadius","bandWidth","barHeight","Math","max","min"],"sources":["../../../src/charts/useChartTheme.ts"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/code/Code/index.mjs

@@ -7,7 +7,6 @@ const CodeFrame = styled(Paragraph, {
   render: "code",
   fontFamily: "$mono",
   size: "$3",
-  lineHeight: 18,
   cursor: "inherit",
   whiteSpace: "pre",
   padding: "$1",
@@ -28,14 +27,20 @@ const Code = CodeFrame.styleable((props, ref) => {
   return /* @__PURE__ */jsx(CodeFrame, {
     ref,
     ...knobProps.borderRadius,
-    ...knobProps.body,
-    ...props
+    size: knobProps.sizeToken,
+    ...props,
+    fontFamily: "$mono",
+    letterSpacing: 0
   });
 });
-const CodeInline = styled(Paragraph, {
+const CodeInlineFrame = styled(Paragraph, {
   name: "CodeInline",
   render: "code",
   fontFamily: "$mono",
+  // letter-spacing inherits in CSS: without this pin, inline code picks up
+  // the surrounding prose tracking (font-knob condensed curves included)
+  // while block code stays immune. Code text is always normal-tracked mono.
+  letterSpacing: 0,
   color: componentColors.code.foreground,
   backgroundColor: componentColors.code.background,
   cursor: "inherit",
@@ -47,5 +52,18 @@ const CodeInline = styled(Paragraph, {
   marginHorizontal: "-0.1%",
   whiteSpace: "pre"
 });
+const CodeInline = CodeInlineFrame.styleable((props, ref) => {
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  return /* @__PURE__ */jsx(CodeInlineFrame, {
+    ref,
+    ...knobProps.borderRadius,
+    borderWidth: 0,
+    ...props,
+    fontFamily: "$mono",
+    letterSpacing: 0
+  });
+});
 export { Code, CodeInline };
 //# sourceMappingURL=index.mjs.map

package/dist/esm/code/Code/index.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["useResolvedKnobs","Paragraph","styled","componentColors","jsx","CodeFrame","name","render","fontFamily","size","lineHeight","cursor","whiteSpace","padding","borderRadius","variants","colored","true","color","backgroundColor","Code","styleable","props","ref","knobProps","body","CodeInline","code","foreground","background","fontSize","paddingHorizontal","paddingVertical","marginHorizontal"],"sources":["../../../../src/code/Code/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,gBAAA,QAAwB;AAGjC,SAASC,SAAA,EAAWC,MAAA,QAAc;AAClC,SAASC,eAAA,QAAuB;AAyBvB,SAAAC,GAAA;AAvBT,MAAMC,SAAA,GAAYH,MAAA,CAAOD,SAAA,EAAW;EAClCK,IAAA,EAAM;EACNC,MAAA,EAAQ;EACRC,UAAA,EAAY;EACZC,IAAA,EAAM;EACNC,UAAA,EAAY;EACZC,MAAA,EAAQ;EACRC,UAAA,EAAY;EACZC,OAAA,EAAS;EACTC,YAAA,EAAc;EAEdC,QAAA,EAAU;IACRC,OAAA,EAAS;MACPC,IAAA,EAAM;QACJC,KAAA,EAAO;QACPC,eAAA,EAAiB;MACnB;IACF;EACF;AACF,CAAC;AAEM,MAAMC,IAAA,GAAOf,SAAA,CAAUgB,SAAA,CAAU,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACtD,MAAM;IAAEC;EAAU,IAAIxB,gBAAA,CAAiB;EACvC,OAAO,eAAAI,GAAA,CAACC,SAAA;IAAUkB,GAAA;IAAW,GAAGC,SAAA,CAAUV,YAAA;IAAe,GAAGU,SAAA,CAAUC,IAAA;IAAO,GAAGH;EAAA,CAAO;AACzF,CAAC;AAEM,MAAMI,UAAA,GAAaxB,MAAA,CAAOD,SAAA,EAAW;EAC1CK,IAAA,EAAM;EACNC,MAAA,EAAQ;EACRC,UAAA,EAAY;EACZU,KAAA,EAAOf,eAAA,CAAgBwB,IAAA,CAAKC,UAAA;EAC5BT,eAAA,EAAiBhB,eAAA,CAAgBwB,IAAA,CAAKE,UAAA;EACtClB,MAAA,EAAQ;EACRG,YAAA,EAAc;EACdgB,QAAA,EAAU;EACVpB,UAAA,EAAY;EACZqB,iBAAA,EAAmB;EACnBC,eAAA,EAAiB;EACjBC,gBAAA,EAAkB;EAClBrB,UAAA,EAAY;AACd,CAAC","ignoreList":[]}
+{"version":3,"names":["useResolvedKnobs","Paragraph","styled","componentColors","jsx","CodeFrame","name","render","fontFamily","size","cursor","whiteSpace","padding","borderRadius","variants","colored","true","color","backgroundColor","Code","styleable","props","ref","knobProps","sizeToken","letterSpacing","CodeInlineFrame","code","foreground","background","fontSize","lineHeight","paddingHorizontal","paddingVertical","marginHorizontal","CodeInline","borderWidth"],"sources":["../../../../src/code/Code/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,gBAAA,QAAwB;AAGjC,SAASC,SAAA,EAAWC,MAAA,QAAc;AAClC,SAASC,eAAA,QAAuB;AA8B5B,SAAAC,GAAA;AA5BJ,MAAMC,SAAA,GAAYH,MAAA,CAAOD,SAAA,EAAW;EAClCK,IAAA,EAAM;EACNC,MAAA,EAAQ;EACRC,UAAA,EAAY;EACZC,IAAA,EAAM;EACNC,MAAA,EAAQ;EACRC,UAAA,EAAY;EACZC,OAAA,EAAS;EACTC,YAAA,EAAc;EAEdC,QAAA,EAAU;IACRC,OAAA,EAAS;MACPC,IAAA,EAAM;QACJC,KAAA,EAAO;QACPC,eAAA,EAAiB;MACnB;IACF;EACF;AACF,CAAC;AAEM,MAAMC,IAAA,GAAOd,SAAA,CAAUe,SAAA,CAAU,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACtD,MAAM;IAAEC;EAAU,IAAIvB,gBAAA,CAAiB;EAMvC,OACE,eAAAI,GAAA,CAACC,SAAA;IACCiB,GAAA;IACC,GAAGC,SAAA,CAAUV,YAAA;IACdJ,IAAA,EAAMc,SAAA,CAAUC,SAAA;IACf,GAAGH,KAAA;IACJb,UAAA,EAAW;IACXiB,aAAA,EAAe;EAAA,CACjB;AAEJ,CAAC;AAED,MAAMC,eAAA,GAAkBxB,MAAA,CAAOD,SAAA,EAAW;EACxCK,IAAA,EAAM;EACNC,MAAA,EAAQ;EACRC,UAAA,EAAY;EAAA;EAAA;EAAA;EAIZiB,aAAA,EAAe;EACfR,KAAA,EAAOd,eAAA,CAAgBwB,IAAA,CAAKC,UAAA;EAC5BV,eAAA,EAAiBf,eAAA,CAAgBwB,IAAA,CAAKE,UAAA;EACtCnB,MAAA,EAAQ;EACRG,YAAA,EAAc;EACdiB,QAAA,EAAU;EACVC,UAAA,EAAY;EACZC,iBAAA,EAAmB;EACnBC,eAAA,EAAiB;EACjBC,gBAAA,EAAkB;EAClBvB,UAAA,EAAY;AACd,CAAC;AAKM,MAAMwB,UAAA,GAAaT,eAAA,CAAgBN,SAAA,CAAU,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAClE,MAAM;IAAEC;EAAU,IAAIvB,gBAAA,CAAiB;EACvC,OACE,eAAAI,GAAA,CAACsB,eAAA;IACCJ,GAAA;IACC,GAAGC,SAAA,CAAUV,YAAA;IACduB,WAAA,EAAa;IACZ,GAAGf,KAAA;IACJb,UAAA,EAAW;IACXiB,aAAA,EAAe;EAAA,CACjB;AAEJ,CAAC","ignoreList":[]}

package/dist/esm/code/Code/index.native.js

@@ -7,7 +7,6 @@ var CodeFrame = styled(Paragraph, {
   render: "code",
   fontFamily: "$mono",
   size: "$3",
-  lineHeight: 18,
   cursor: "inherit",
   whiteSpace: "pre",
   padding: "$1",
@@ -28,14 +27,20 @@ var Code = CodeFrame.styleable(function (props, ref) {
   return /* @__PURE__ */_jsx(CodeFrame, {
     ref,
     ...knobProps.borderRadius,
-    ...knobProps.body,
-    ...props
+    size: knobProps.sizeToken,
+    ...props,
+    fontFamily: "$mono",
+    letterSpacing: 0
   });
 });
-var CodeInline = styled(Paragraph, {
+var CodeInlineFrame = styled(Paragraph, {
   name: "CodeInline",
   render: "code",
   fontFamily: "$mono",
+  // letter-spacing inherits in CSS: without this pin, inline code picks up
+  // the surrounding prose tracking (font-knob condensed curves included)
+  // while block code stays immune. Code text is always normal-tracked mono.
+  letterSpacing: 0,
   color: componentColors.code.foreground,
   backgroundColor: componentColors.code.background,
   cursor: "inherit",
@@ -47,5 +52,18 @@ var CodeInline = styled(Paragraph, {
   marginHorizontal: "-0.1%",
   whiteSpace: "pre"
 });
+var CodeInline = CodeInlineFrame.styleable(function (props, ref) {
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  return /* @__PURE__ */_jsx(CodeInlineFrame, {
+    ref,
+    ...knobProps.borderRadius,
+    borderWidth: 0,
+    ...props,
+    fontFamily: "$mono",
+    letterSpacing: 0
+  });
+});
 export { Code, CodeInline };
 //# sourceMappingURL=index.native.js.map

package/dist/esm/code/Code/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","useResolvedKnobs","Paragraph","styled","componentColors","CodeFrame","name","render","fontFamily","size","lineHeight","cursor","whiteSpace","padding","borderRadius","variants","colored","true","color","backgroundColor","Code","styleable","props","ref","knobProps","body","CodeInline","code","foreground","background","fontSize"],"sources":["../../../../src/code/Code/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,2BAAwB;AAGjC,SAASC,gBAAW,kCAAc;AAClC,SAASC,SAAA,EAAAC,MAAA,QAAuB;AAyBvB,SAAAC,eAAA;AAvBT,IAAAC,SAAM,GAAAF,MAAY,CAAAD,SAAO;EACvBI,IAAA,EAAM;EACNC,MAAA,EAAQ;EACRC,UAAA,EAAY;EACZC,IAAA,EAAM;EACNC,UAAA,EAAY;EACZC,MAAA,EAAQ;EACRC,UAAA,EAAY;EACZC,OAAA,EAAS;EACTC,YAAA,EAAc;EAEdC,QAAA,EAAU;IACRC,OAAA,EAAS;MACPC,IAAA,EAAM;QACJC,KAAA,EAAO;QACPC,eAAA,EAAiB;MACnB;IACF;EACF;AACF,CAAC;AAEM,IAAAC,IAAM,GAAAf,SAAO,CAAAgB,SAAU,WAAWC,KAAO,EAAAC,GAAQ;EACtD;IAAMC;EAAE,IAAUvB,gBAAI;EACtB,OAAO,eAAAD,IAAC,CAAAK,SAAA;IACTkB,GAAA;IAEM,GAAMC,SAAA,CAAAV,YAAoB;IAC/B,GAAAU,SAAM,CAAAC,IAAA;IACN,GAAAH;EACA;AAAY,EACZ;AAA4B,IAC5BI,UAAA,GAAAvB,MAAiB,CAAAD,SAAA,EAAgB;EACjCI,IAAA,cAAQ;EACRC,MAAA,QAAc;EACdC,UAAU;EACVU,KAAA,EAAAd,eAAY,CAAAuB,IAAA,CAAAC,UAAA;EACZT,eAAA,EAAAf,eAAmB,CAAAuB,IAAA,CAAAE,UAAA;EACnBlB,MAAA,WAAiB;EACjBG,YAAA,MAAkB;EAClBgB,QAAA,OAAY;EACbpB,UAAA","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","useResolvedKnobs","Paragraph","styled","componentColors","CodeFrame","name","render","fontFamily","size","cursor","whiteSpace","padding","borderRadius","variants","colored","true","color","backgroundColor","Code","styleable","props","ref","knobProps","sizeToken","letterSpacing","CodeInlineFrame","code","foreground","background","fontSize","lineHeight","paddingHorizontal","paddingVertical","marginHorizontal","CodeInline","borderWidth"],"sources":["../../../../src/code/Code/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,2BAAwB;AAGjC,SAASC,gBAAW,kCAAc;AAClC,SAASC,SAAA,EAAAC,MAAA,QAAuB;AA8B5B,SAAAC,eAAA;AA5BJ,IAAAC,SAAM,GAAAF,MAAY,CAAAD,SAAO;EACvBI,IAAA,EAAM;EACNC,MAAA,EAAQ;EACRC,UAAA,EAAY;EACZC,IAAA,EAAM;EACNC,MAAA,EAAQ;EACRC,UAAA,EAAY;EACZC,OAAA,EAAS;EACTC,YAAA,EAAc;EAEdC,QAAA,EAAU;IACRC,OAAA,EAAS;MACPC,IAAA,EAAM;QACJC,KAAA,EAAO;QACPC,eAAA,EAAiB;MACnB;IACF;EACF;AACF,CAAC;AAEM,IAAAC,IAAM,GAAAd,SAAO,CAAAe,SAAU,WAAWC,KAAO,EAAAC,GAAQ;EACtD;IAAMC;EAAE,IAAUtB,gBAAI;EAMtB,OACE,eAAAD,IAAA,CAAAK,SAAA;IAACiB,GAAA;IAAA,GAAAC,SAAA,CAAAV,YAAA;IAAAJ,IACC,EAAAc,SAAA,CAAAC,SAAA;IAAA,GACCH,KAAG;IAAUb,UACR,SAAU;IAAAiB,aACZ;EAAA;AACO;AACI,IAAAC,eAAA,GAAAvB,MAAA,CAAAD,SAAA;EACjBI,IAAA;EAEHC,MAAA;EAEDC,UAAM;EACJ;EACA;EACA;EAAYiB,aAAA;EAAAR,KAAA,EAAAb,eAAA,CAAAuB,IAAA,CAAAC,UAAA;EAAAV,eAAA,EAAAd,eAAA,CAAAuB,IAAA,CAAAE,UAAA;EAIZnB,MAAA,WAAe;EACfG,YAAO;EACPiB,QAAA;EACAC,UAAQ;EACRC,iBAAc;EACdC,eAAU;EACVC,gBAAY;EACZvB,UAAA;AAAmB,EACnB;AAAiB,IACjBwB,UAAA,GAAAT,eAAkB,CAAAN,SAAA,WAAAC,KAAA,EAAAC,GAAA;EAClB;IAAAC;EAAY,IAAAtB,gBAAA;EACb,sBAAAD,IAAA,CAAA0B,eAAA;IAKMJ,GAAM;IACX,GAAAC,SAAQ,CAAAV,YAAc;IACtBuB,WACE;IAAC,GAAAf,KAAA;IAAAb,UAAA;IAAAiB,aACC;EAAA;AACc;AACD,SACTN,IACJ,EAAWgB,UACX","ignoreList":[]}

package/dist/esm/code/CodeBlock/index.mjs

@@ -1,7 +1,8 @@
 import { LinearGradient } from "@tamagui/linear-gradient";
-import { CheckCircleIcon, ClipboardIcon } from "@phosphor-icons/react";
+import { CheckCircleIcon, ClipboardIcon, WarningCircleIcon } from "@phosphor-icons/react";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { ScrollView } from "tamagui";
 import { Button, zIndex } from "@multiplatform.one/forms";
 import { Spacer, TooltipSimple, XStack, YStack } from "tamagui";
@@ -21,9 +22,13 @@ function CodeBlock({
   disableCopy,
   size
 }) {
+  const {
+    t
+  } = useTranslation();
   const {
     knobProps
   } = useResolvedKnobs();
+  const codeSize = size ?? knobProps.sizeToken;
   const codeText = children.trim();
   const tokens = useShikiTokens(codeText, language, theme);
   const lines = tokens?.length ?? codeText.split("\n").length;
@@ -32,6 +37,7 @@ function CodeBlock({
   const [isCutoff, setIsCutoff] = useState(isLong);
   const {
     hasCopied,
+    hasCopyFailed,
     onCopy
   } = useClipboard(codeText);
   return /* @__PURE__ */jsx(YStack, {
@@ -78,13 +84,14 @@ function CodeBlock({
             children: /* @__PURE__ */jsx(Code, {
               backgroundColor: "transparent",
               flex: 1,
+              borderWidth: 0,
               ...knobProps.panelPadding,
-              ...knobProps.body,
-              size: size ?? "$5",
+              size: codeSize,
               children: /* @__PURE__ */jsx(HighlightedCode, {
                 tokens,
                 highlightLines,
                 showLineNumbers,
+                fontSize: codeSize,
                 children: codeText
               })
             })
@@ -92,15 +99,15 @@ function CodeBlock({
         }), !disableCopy && /* @__PURE__ */jsx(XStack, {
           position: "absolute",
           top: "$3",
-          right: "$3",
+          insetInlineEnd: "$3",
           children: /* @__PURE__ */jsx(TooltipSimple, {
-            label: hasCopied ? "Copied" : "Copy to clipboard",
+            label: hasCopied ? t("Copied") : hasCopyFailed ? t("Copy failed") : t("Copy to clipboard"),
             children: /* @__PURE__ */jsx(Button, {
-              "aria-label": "Copy code to clipboard",
+              "aria-label": t("Copy code to clipboard"),
               size: "$2",
-              icon: hasCopied ? CheckCircleIcon : ClipboardIcon,
+              icon: hasCopied ? CheckCircleIcon : hasCopyFailed ? WarningCircleIcon : ClipboardIcon,
               onPress: onCopy,
-              $xs: {
+              "$max-xs": {
                 display: "none"
               }
             })

package/dist/esm/code/CodeBlock/index.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["LinearGradient","CheckCircleIcon","ClipboardIcon","useResolvedKnobs","useState","ScrollView","Button","zIndex","Spacer","TooltipSimple","XStack","YStack","ErrorBoundary","Code","HighlightedCode","useShikiTokens","Pre","useClipboard","jsx","jsxs","CodeBlock","children","language","theme","showLineNumbers","propShowLineNumbers","highlightLines","disableCopy","size","knobProps","codeText","trim","tokens","lines","length","split","isLong","isCutoff","setIsCutoff","hasCopied","onCopy","position","marginBottom","maxHeight","overflow","borderRadius","bottom","left","right","height","colors","localTop","flex","onPress","alignSelf","padding","style","width","contentContainerStyle","minWidth","horizontal","showsHorizontalScrollIndicator","backgroundColor","panelPadding","body","top","label","icon","$xs","display"],"sources":["../../../../src/code/CodeBlock/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["LinearGradient","CheckCircleIcon","ClipboardIcon","WarningCircleIcon","useResolvedKnobs","useState","useTranslation","ScrollView","Button","zIndex","Spacer","TooltipSimple","XStack","YStack","ErrorBoundary","Code","HighlightedCode","useShikiTokens","Pre","useClipboard","jsx","jsxs","CodeBlock","children","language","theme","showLineNumbers","propShowLineNumbers","highlightLines","disableCopy","size","t","knobProps","codeSize","sizeToken","codeText","trim","tokens","lines","length","split","isLong","isCutoff","setIsCutoff","hasCopied","hasCopyFailed","onCopy","position","marginBottom","maxHeight","overflow","borderRadius","bottom","left","right","height","colors","localTop","flex","onPress","alignSelf","padding","style","width","contentContainerStyle","minWidth","horizontal","showsHorizontalScrollIndicator","backgroundColor","borderWidth","panelPadding","fontSize","top","insetInlineEnd","label","icon","display"],"sources":["../../../../src/code/CodeBlock/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/code/CodeBlock/index.native.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LinearGradient } from "@tamagui/linear-gradient";
-import { CheckCircleIcon, ClipboardIcon } from "@phosphor-icons/react";
+import { CheckCircleIcon, ClipboardIcon, WarningCircleIcon } from "@phosphor-icons/react";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { ScrollView } from "tamagui";
 import { Button, zIndex } from "@multiplatform.one/forms";
 import { Spacer, TooltipSimple, XStack, YStack } from "tamagui";
@@ -23,9 +24,13 @@ function CodeBlock(param) {
     size
   } = param;
   var _ref;
+  var {
+    t
+  } = useTranslation();
   var {
     knobProps
   } = useResolvedKnobs();
+  var codeSize = size !== null && size !== void 0 ? size : knobProps.sizeToken;
   var codeText = children.trim();
   var tokens = useShikiTokens(codeText, language, theme);
   var lines = (_ref = tokens === null || tokens === void 0 ? void 0 : tokens.length) !== null && _ref !== void 0 ? _ref : codeText.split("\n").length;
@@ -34,6 +39,7 @@ function CodeBlock(param) {
   var [isCutoff, setIsCutoff] = useState(isLong);
   var {
     hasCopied,
+    hasCopyFailed,
     onCopy
   } = useClipboard(codeText);
   return /* @__PURE__ */_jsx(YStack, {
@@ -82,13 +88,14 @@ function CodeBlock(param) {
             children: /* @__PURE__ */_jsx(Code, {
               backgroundColor: "transparent",
               flex: 1,
+              borderWidth: 0,
               ...knobProps.panelPadding,
-              ...knobProps.body,
-              size: size !== null && size !== void 0 ? size : "$5",
+              size: codeSize,
               children: /* @__PURE__ */_jsx(HighlightedCode, {
                 tokens,
                 highlightLines,
                 showLineNumbers,
+                fontSize: codeSize,
                 children: codeText
               })
             })
@@ -96,15 +103,15 @@ function CodeBlock(param) {
         }), !disableCopy && /* @__PURE__ */_jsx(XStack, {
           position: "absolute",
           top: "$3",
-          right: "$3",
+          insetInlineEnd: "$3",
           children: /* @__PURE__ */_jsx(TooltipSimple, {
-            label: hasCopied ? "Copied" : "Copy to clipboard",
+            label: hasCopied ? t("Copied") : hasCopyFailed ? t("Copy failed") : t("Copy to clipboard"),
             children: /* @__PURE__ */_jsx(Button, {
-              "aria-label": "Copy code to clipboard",
+              "aria-label": t("Copy code to clipboard"),
               size: "$2",
-              icon: hasCopied ? CheckCircleIcon : ClipboardIcon,
+              icon: hasCopied ? CheckCircleIcon : hasCopyFailed ? WarningCircleIcon : ClipboardIcon,
               onPress: onCopy,
-              $xs: {
+              "$max-xs": {
                 display: "none"
               }
             })

package/dist/esm/code/CodeBlock/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","LinearGradient","CheckCircleIcon","ClipboardIcon","useResolvedKnobs","useState","ScrollView","Button","zIndex","Spacer","TooltipSimple","XStack","YStack","ErrorBoundary","Code","HighlightedCode","useShikiTokens","Pre","useClipboard","CodeBlock","param","children","language","theme","showLineNumbers","propShowLineNumbers","highlightLines","disableCopy","size","_ref","knobProps","codeText","trim","tokens","lines","length","split","isLong","isCutoff","setIsCutoff","hasCopied","onCopy","position","marginBottom","maxHeight","overflow","borderRadius","bottom","left","right","height","colors","localTop","flex","onPress","alignSelf","padding","style","width","contentContainerStyle","minWidth","horizontal","showsHorizontalScrollIndicator","backgroundColor","panelPadding","body","top","label","icon"],"sources":["../../../../src/code/CodeBlock/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","LinearGradient","CheckCircleIcon","ClipboardIcon","WarningCircleIcon","useResolvedKnobs","useState","useTranslation","ScrollView","Button","zIndex","Spacer","TooltipSimple","XStack","YStack","ErrorBoundary","Code","HighlightedCode","useShikiTokens","Pre","useClipboard","CodeBlock","param","children","language","theme","showLineNumbers","propShowLineNumbers","highlightLines","disableCopy","size","_ref","t","knobProps","codeSize","sizeToken","codeText","trim","tokens","lines","length","split","isLong","isCutoff","setIsCutoff","hasCopied","hasCopyFailed","onCopy","position","marginBottom","maxHeight","overflow","borderRadius","bottom","left","right","height","colors","localTop","flex","onPress","alignSelf","padding","style","width","contentContainerStyle","minWidth","horizontal","showsHorizontalScrollIndicator","backgroundColor","borderWidth","panelPadding","fontSize","top","insetInlineEnd","label","icon","display"],"sources":["../../../../src/code/CodeBlock/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/code/HighlightedCode/index.mjs

@@ -1,5 +1,5 @@
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { Text } from "tamagui";
+import { Text, isWeb } from "tamagui";
 import { componentColors } from "../../componentColors.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function HighlightedCode({
@@ -12,6 +12,7 @@ function HighlightedCode({
   const {
     knobProps
   } = useResolvedKnobs();
+  const resolvedFontSize = fontSize ?? knobProps.sizeToken;
   if (!tokens) {
     return /* @__PURE__ */jsx(Fragment, {
       children
@@ -25,16 +26,16 @@ function HighlightedCode({
         ...(isHighlighted && {
           backgroundColor: componentColors.code.highlightLine
         }),
-        fontSize,
-        ...knobProps.body,
+        fontSize: resolvedFontSize,
+        fontFamily: "$mono",
+        letterSpacing: 0,
         children: [showLineNumbers && /* @__PURE__ */jsx(Text, {
-          color: componentColors.code.lineNumber,
-          opacity: 0.5,
-          fontSize,
+          color: componentColors.text.secondary,
+          fontSize: resolvedFontSize,
           width: 40,
           display: "inline-flex",
-          textAlign: "right",
-          marginRight: "$2",
+          textAlign: isWeb ? "end" : "right",
+          marginInlineEnd: "$2",
           userSelect: "none",
           children: lineNumber
         }), line.map((token, tokenIndex) => /* @__PURE__ */jsx(Text, {
@@ -45,7 +46,7 @@ function HighlightedCode({
           ...(token.fontStyle && token.fontStyle & 2 ? {
             fontWeight: "bold"
           } : {}),
-          fontSize,
+          fontSize: resolvedFontSize,
           children: token.content
         }, tokenIndex)), "\n"]
       }, lineIndex);

package/dist/esm/code/HighlightedCode/index.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["useResolvedKnobs","Text","componentColors","Fragment","jsx","jsxs","HighlightedCode","tokens","children","highlightLines","showLineNumbers","fontSize","knobProps","map","line","lineIndex","lineNumber","isHighlighted","includes","backgroundColor","code","highlightLine","body","color","opacity","width","display","textAlign","marginRight","userSelect","token","tokenIndex","fontStyle","fontWeight","content"],"sources":["../../../../src/code/HighlightedCode/index.tsx"],"sourcesContent":[null],"mappings":"AASA,SAASA,gBAAA,QAAwB;AAEjC,SAASC,IAAA,QAAY;AAErB,SAASC,eAAA,QAAuB;AA0BrB,SAAAC,QAAA,EAAAC,GAAA,EAUDC,IAAA,QAVC;AAXJ,SAASC,gBAAgB;EAC9BC,MAAA;EACAC,QAAA;EACAC,cAAA,GAAiB,EAAC;EAClBC,eAAA,GAAkB;EAClBC;AACF,GAAyB;EACvB,MAAM;IAAEC;EAAU,IAAIZ,gBAAA,CAAiB;EAGvC,IAAI,CAACO,MAAA,EAAQ;IACX,OAAO,eAAAH,GAAA,CAAAD,QAAA;MAAGK;IAAA,CAAS;EACrB;EAEA,OACE,eAAAJ,GAAA,CAAAD,QAAA;IACGK,QAAA,EAAAD,MAAA,CAAOM,GAAA,CAAI,CAACC,IAAA,EAAMC,SAAA,KAAc;MAC/B,MAAMC,UAAA,GAAaD,SAAA,GAAY;MAC/B,MAAME,aAAA,GAAgBR,cAAA,CAAeS,QAAA,CAASF,UAAU;MAExD,OACE,eAAAX,IAAA,CAACJ,IAAA;QAEE,IAAIgB,aAAA,IAAiB;UACpBE,eAAA,EAAiBjB,eAAA,CAAgBkB,IAAA,CAAKC;QACxC;QACAV,QAAA;QACC,GAAGC,SAAA,CAAUU,IAAA;QAEbd,QAAA,GAAAE,eAAA,IACC,eAAAN,GAAA,CAACH,IAAA;UACCsB,KAAA,EAAOrB,eAAA,CAAgBkB,IAAA,CAAKJ,UAAA;UAC5BQ,OAAA,EAAS;UACTb,QAAA;UACAc,KAAA,EAAO;UACPC,OAAA,EAAQ;UACRC,SAAA,EAAU;UACVC,WAAA,EAAY;UACZC,UAAA,EAAW;UAEVrB,QAAA,EAAAQ;QAAA,CACH,GAEDF,IAAA,CAAKD,GAAA,CAAI,CAACiB,KAAA,EAAOC,UAAA,KAChB,eAAA3B,GAAA,CAACH,IAAA;UAECsB,KAAA,EAAOO,KAAA,CAAMP,KAAA;UACZ,IAAIO,KAAA,CAAME,SAAA,IAAaF,KAAA,CAAME,SAAA,GAAY,IAAI;YAAEA,SAAA,EAAW;UAAS,IAAI,CAAC;UACxE,IAAIF,KAAA,CAAME,SAAA,IAAaF,KAAA,CAAME,SAAA,GAAY,IAAI;YAAEC,UAAA,EAAY;UAAO,IAAI,CAAC;UACxEtB,QAAA;UAECH,QAAA,EAAAsB,KAAA,CAAMI;QAAA,GANFH,UAOP,CACD,GACA;MAAA,GAhCIhB,SAiCP;IAEJ,CAAC;EAAA,CACH;AAEJ","ignoreList":[]}
+{"version":3,"names":["useResolvedKnobs","Text","isWeb","componentColors","Fragment","jsx","jsxs","HighlightedCode","tokens","children","highlightLines","showLineNumbers","fontSize","knobProps","resolvedFontSize","sizeToken","map","line","lineIndex","lineNumber","isHighlighted","includes","backgroundColor","code","highlightLine","fontFamily","letterSpacing","color","text","secondary","width","display","textAlign","marginInlineEnd","userSelect","token","tokenIndex","fontStyle","fontWeight","content"],"sources":["../../../../src/code/HighlightedCode/index.tsx"],"sourcesContent":[null],"mappings":"AASA,SAASA,gBAAA,QAAwB;AAEjC,SAASC,IAAA,EAAMC,KAAA,QAAa;AAE5B,SAASC,eAAA,QAAuB;AA4BrB,SAAAC,QAAA,EAAAC,GAAA,EAUDC,IAAA,QAVC;AAbJ,SAASC,gBAAgB;EAC9BC,MAAA;EACAC,QAAA;EACAC,cAAA,GAAiB,EAAC;EAClBC,eAAA,GAAkB;EAClBC;AACF,GAAyB;EACvB,MAAM;IAAEC;EAAU,IAAIb,gBAAA,CAAiB;EAGvC,MAAMc,gBAAA,GAAmBF,QAAA,IAAYC,SAAA,CAAUE,SAAA;EAE/C,IAAI,CAACP,MAAA,EAAQ;IACX,OAAO,eAAAH,GAAA,CAAAD,QAAA;MAAGK;IAAA,CAAS;EACrB;EAEA,OACE,eAAAJ,GAAA,CAAAD,QAAA;IACGK,QAAA,EAAAD,MAAA,CAAOQ,GAAA,CAAI,CAACC,IAAA,EAAMC,SAAA,KAAc;MAC/B,MAAMC,UAAA,GAAaD,SAAA,GAAY;MAC/B,MAAME,aAAA,GAAgBV,cAAA,CAAeW,QAAA,CAASF,UAAU;MAExD,OACE,eAAAb,IAAA,CAACL,IAAA;QAEE,IAAImB,aAAA,IAAiB;UACpBE,eAAA,EAAiBnB,eAAA,CAAgBoB,IAAA,CAAKC;QACxC;QACAZ,QAAA,EAAUE,gBAAA;QAGVW,UAAA,EAAW;QACXC,aAAA,EAAe;QAEdjB,QAAA,GAAAE,eAAA,IACC,eAAAN,GAAA,CAACJ,IAAA;UACC0B,KAAA,EAAOxB,eAAA,CAAgByB,IAAA,CAAKC,SAAA;UAC5BjB,QAAA,EAAUE,gBAAA;UACVgB,KAAA,EAAO;UACPC,OAAA,EAAQ;UAERC,SAAA,EAAY9B,KAAA,GAAQ,QAAQ;UAC5B+B,eAAA,EAAgB;UAChBC,UAAA,EAAW;UAEVzB,QAAA,EAAAU;QAAA,CACH,GAEDF,IAAA,CAAKD,GAAA,CAAI,CAACmB,KAAA,EAAOC,UAAA,KAChB,eAAA/B,GAAA,CAACJ,IAAA;UAEC0B,KAAA,EAAOQ,KAAA,CAAMR,KAAA;UACZ,IAAIQ,KAAA,CAAME,SAAA,IAAaF,KAAA,CAAME,SAAA,GAAY,IAAI;YAAEA,SAAA,EAAW;UAAS,IAAI,CAAC;UACxE,IAAIF,KAAA,CAAME,SAAA,IAAaF,KAAA,CAAME,SAAA,GAAY,IAAI;YAAEC,UAAA,EAAY;UAAO,IAAI,CAAC;UACxE1B,QAAA,EAAUE,gBAAA;UAETL,QAAA,EAAA0B,KAAA,CAAMI;QAAA,GANFH,UAOP,CACD,GACA;MAAA,GAnCIlB,SAoCP;IAEJ,CAAC;EAAA,CACH;AAEJ","ignoreList":[]}

package/dist/esm/code/HighlightedCode/index.native.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { Text } from "tamagui";
+import { Text, isWeb } from "tamagui";
 import { componentColors } from "../../componentColors.native.js";
 function HighlightedCode(param) {
   var {
@@ -13,6 +13,7 @@ function HighlightedCode(param) {
   var {
     knobProps
   } = useResolvedKnobs();
+  var resolvedFontSize = fontSize !== null && fontSize !== void 0 ? fontSize : knobProps.sizeToken;
   if (!tokens) {
     return /* @__PURE__ */_jsx(_Fragment, {
       children
@@ -26,16 +27,19 @@ function HighlightedCode(param) {
         ...(isHighlighted && {
           backgroundColor: componentColors.code.highlightLine
         }),
-        fontSize,
-        ...knobProps.body,
+        fontSize: resolvedFontSize,
+        // Code text stays mono with normal tracking; the bodyFont /
+        // fontWeight knobs never restyle code content.
+        fontFamily: "$mono",
+        letterSpacing: 0,
         children: [showLineNumbers && /* @__PURE__ */_jsx(Text, {
-          color: componentColors.code.lineNumber,
-          opacity: 0.5,
-          fontSize,
+          color: componentColors.text.secondary,
+          fontSize: resolvedFontSize,
           width: 40,
           display: "inline-flex",
-          textAlign: "right",
-          marginRight: "$2",
+          // "end" is web-only CSS; native textAlign has no logical values
+          textAlign: isWeb ? "end" : "right",
+          marginInlineEnd: "$2",
           userSelect: "none",
           children: lineNumber
         }), line.map(function (token, tokenIndex) {
@@ -47,7 +51,7 @@ function HighlightedCode(param) {
             ...(token.fontStyle && token.fontStyle & 2 ? {
               fontWeight: "bold"
             } : {}),
-            fontSize,
+            fontSize: resolvedFontSize,
             children: token.content
           }, tokenIndex);
         }), "\n"]

package/dist/esm/code/HighlightedCode/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","useResolvedKnobs","Text","componentColors","HighlightedCode","param","tokens","children","highlightLines","showLineNumbers","fontSize","knobProps","map","line","lineIndex","lineNumber","isHighlighted","includes","backgroundColor","code","highlightLine","body","color","opacity","width","display","textAlign","marginRight","userSelect","token","tokenIndex","fontStyle","fontWeight","content"],"sources":["../../../../src/code/HighlightedCode/index.tsx"],"sourcesContent":[null],"mappings":"AASA,SAASA,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAwB,EAAAC,QAAA,IAAAC,SAAA;AAEjC,SAASC,gBAAY;AAErB,SAASC,IAAA;AA0BE,SAAAC,eAUD,yCAVC;AAXJ,SAASC,gBAAgBC,KAAA;EAC9B;IAAAC,MAAA;IAAAC,QAAA;IAAAC,cAAA;IAAAC,eAAA;IAAAC;EAAA,IAAAL,KAAA;EACA;IAAAM;EAAA,IAAAV,gBAAA;EACA,KAAAK,MAAA;IACA,sBAAkBV,IAAA,CAAAI,SAAA;MAClBO;IACuB;EACvB;EAGA,OAAK,eAAQX,IAAA,CAAAI,SAAA;IACXO,QAAO,EAAAD,MAAA,CAAAM,GAAA,WAAAC,IAAA,EAAAC,SAAG;MACZ,IAAAC,UAAA,GAAAD,SAAA;MAEA,IACEE,aAAA,GAAAR,cAAA,CACGS,QAAA,CAAAF,UAAO;MACN,OAAM,eAAajB,KAAA,CAAYI,IAAA;QAC/B,IAAMc,aAAA,IAAgB;UAEtBE,eACE,EAAAf,eAAA,CAAAgB,IAAA,CAAAC;QAAC;QAAAV,QAAA;QAEE,GAAIC,SAAA,CAAAU,IAAA;QAAiBd,QACpB,GACFE,eAAA,mBAAAb,IAAA,CAAAM,IAAA;UACAoB,KAAA,EAAAnB,eAAA,CAAAgB,IAAA,CAAAJ,UAAA;UACIQ,OAAA,EAAU;UAEbb,QAAA;UAAAc,KAAA;UACEC,OAAA;UAAAC,SAAA;UAAAC,WACQ;UAAqBC,UAC5B,EAAS;UAAArB,QACT,EAAAQ;QAAA,IACOF,IACP,CAAAD,GAAA,WAAQiB,KAAA,EAAAC,UAAA;UAAA,OACR,eAAUlC,IAAA,CAAAM,IAAA;YACVoB,KAAA,EAAAO,KAAA,CAAYP,KAAA;YACZ,IAAAO,KAAA,CAAAE,SAAW,IAAAF,KAAA,CAAAE,SAAA;cAEVA,SAAA;YAAA;YACH,IAAAF,KAAA,CAAAE,SAAA,IAAAF,KAAA,CAAAE,SAAA;cAEIC,UAAK,EAAO;YACf;YAAAtB,QAAA;YAECH,QAAO,EAAAsB,KAAM,CAAAI;UAAA,GACZH,UAAU;QAA8D,IACD,IACxE;MAEO,GAAAhB,SAAA;IAAA;EANF;AAQR;AACA,SAAAV,eAAA","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","useResolvedKnobs","Text","isWeb","componentColors","HighlightedCode","param","tokens","children","highlightLines","showLineNumbers","fontSize","knobProps","resolvedFontSize","sizeToken","map","line","lineIndex","lineNumber","isHighlighted","includes","backgroundColor","code","highlightLine","fontFamily","letterSpacing","color","text","secondary","width","display","textAlign","marginInlineEnd","userSelect","token","tokenIndex","fontStyle","fontWeight","content"],"sources":["../../../../src/code/HighlightedCode/index.tsx"],"sourcesContent":[null],"mappings":"AASA,SAASA,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAwB,EAAAC,QAAA,IAAAC,SAAA;AAEjC,SAASC,gBAAM,QAAa;AAE5B,SAASC,IAAA,EAAAC,KAAA,iBAAuB;AA4BrB,SAAAC,eAUD,yCAVC;AAbJ,SAASC,gBAAgBC,KAAA;EAC9B;IAAAC,MAAA;IAAAC,QAAA;IAAAC,cAAA;IAAAC,eAAA;IAAAC;EAAA,IAAAL,KAAA;EACA;IAAAM;EAAA,IAAAX,gBAAA;EACA,IAAAY,gBAAkB,GAAAF,QAAA,aAAAA,QAAA,cAAAA,QAAA,GAAAC,SAAA,CAAAE,SAAA;EAClB,KAAAP,MAAA;IACA,sBAAAX,IAAA,CAAAI,SAAA;MACuBQ;IACvB;EAGA;EAEA,OAAK,eAAQZ,IAAA,CAAAI,SAAA;IACXQ,QAAO,EAAAD,MAAA,CAAAQ,GAAA,WAAAC,IAAA,EAAAC,SAAG;MACZ,IAAAC,UAAA,GAAAD,SAAA;MAEA,IACEE,aAAA,GAAAV,cAAA,CACGW,QAAA,CAAAF,UAAO;MACN,OAAM,eAAapB,KAAA,CAAYI,IAAA;QAC/B,IAAMiB,aAAA,IAAgB;UAEtBE,eACE,EAAAjB,eAAA,CAAAkB,IAAA,CAAAC;QAAC;QAAAZ,QAAA,EAAAE,gBAAA;QAEE;QAAqB;QAEtBW,UAAA;QACAC,aAAU;QAGVjB,QAAA,GACAE,eAAe,mBAAAd,IAAA,CAAAM,IAAA;UAEdwB,KAAA,EAAAtB,eAAA,CAAAuB,IAAA,CAAAC,SAAA;UAAAjB,QAAA,EAAAE,gBACC;UAACgB,KAAA;UAAAC,OAAA;UAAA;UAC6BC,SAC5B,EAAA5B,KAAU;UAAA6B,eACH;UAAAC,UACP,EAAQ;UAAAzB,QAER,EAAAU;QAA4B,IACZF,IAChB,CAAAD,GAAA,WAAWmB,KAAA,EAAAC,UAAA;UAAA,OAEV,eAAAvC,IAAA,CAAAM,IAAA;YAAAwB,KAAA,EAAAQ,KAAA,CAAAR,KAAA;YACH,IAAAQ,KAAA,CAAAE,SAAA,IAAAF,KAAA,CAAAE,SAAA;cAEIA,SAAK,EAAO;YACf;YAAA,IAAAF,KAAA,CAAAE,SAAA,IAAAF,KAAA,CAAAE,SAAA;cAECC,UAAO,EAAM;YACZ,IAAI;YACJ1B,QAAI,EAAME,gBAAa;YACxBL,QAAA,EAAU0B,KAAA,CAAAI;UAAA,GAETH,UAAA;QAAM,QANF;MAQR,GAAAlB,SACA;IAAA;EAAA;AAAA;AAnCI,SAsCXZ,eACF","ignoreList":[]}