@ledgerhq/react-ui 0.38.0 → 0.39.0

package/lib/cjs/pre-ldls/components/MarketPercentIndicator/MarketPercentIndicator.js

@@ -79,7 +79,15 @@ const MarketPercentIndicator = ({ percent }) => {
       borderRadius: "4px",
       backgroundColor: percentageDisplay.backgroundColor
     },
-    /* @__PURE__ */ import_react.default.createElement(import_components.Text, { color: percentageDisplay.color, fontSize: "12px" }, percentageDisplay.text)
+    /* @__PURE__ */ import_react.default.createElement(
+      import_components.Text,
+      {
+        "data-testid": "market-percent-indicator-value",
+        color: percentageDisplay.color,
+        fontSize: "12px"
+      },
+      percentageDisplay.text
+    )
   );
 };
 //# sourceMappingURL=MarketPercentIndicator.js.map

package/lib/cjs/pre-ldls/components/MarketPercentIndicator/MarketPercentIndicator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/MarketPercentIndicator/MarketPercentIndicator.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport { Flex, Text } from \"../../../components\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\n\nconst Wrapper = styled(Flex)`\n  ${withTokens(\n    \"colors-surface-status-success-default\",\n    \"colors-surface-status-success-strong-default\",\n    \"colors-surface-status-error-default\",\n    \"colors-surface-status-error-strong-default\",\n    \"colors-surface-transparent-hover\",\n    \"colors-content-default-default\",\n  )}\n`;\n\nconst getPercentageDisplay = (percent: number) => {\n  if (percent > 0) {\n    return {\n      backgroundColor: \"var(--colors-surface-status-success-default)\",\n      color: \"var(--colors-surface-status-success-strong-default)\",\n      text: `+${percent}%`,\n    };\n  }\n  if (percent < 0) {\n    return {\n      backgroundColor: \"var(--colors-surface-status-error-default)\",\n      color: \"var(--colors-surface-status-error-strong-default)\",\n      text: `-${Math.abs(percent)}%`,\n    };\n  }\n  return {\n    backgroundColor: \"var(--colors-surface-transparent-hover)\",\n    color: \"var(--colors-content-default-default)\",\n    text: `${percent}%`,\n  };\n};\n\nexport const MarketPercentIndicator = ({ percent }: { percent: number }) => {\n  const percentageDisplay = getPercentageDisplay(percent);\n\n  return (\n    <Wrapper\n      data-testid=\"market-percent-indicator\"\n      flexDirection=\"column\"\n      alignItems=\"flex-end\"\n      width=\"fit-content\"\n      p=\"4px\"\n      borderRadius=\"4px\"\n      backgroundColor={percentageDisplay.backgroundColor}\n    >\n      <Text color={percentageDisplay.color} fontSize=\"12px\">\n        {percentageDisplay.text}\n      </Text>\n    </Wrapper>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,wBAA2B;AAC3B,+BAAmB;AACnB,kBAA2B;AAE3B,MAAM,cAAU,yBAAAA,SAAO,sBAAI;AAAA,QACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAGH,MAAM,uBAAuB,CAAC,YAAoB;AAChD,MAAI,UAAU,GAAG;AACf,WAAO;AAAA,MACL,iBAAiB;AAAA,MACjB,OAAO;AAAA,MACP,MAAM,IAAI,OAAO;AAAA,IACnB;AAAA,EACF;AACA,MAAI,UAAU,GAAG;AACf,WAAO;AAAA,MACL,iBAAiB;AAAA,MACjB,OAAO;AAAA,MACP,MAAM,IAAI,KAAK,IAAI,OAAO,CAAC;AAAA,IAC7B;AAAA,EACF;AACA,SAAO;AAAA,IACL,iBAAiB;AAAA,IACjB,OAAO;AAAA,IACP,MAAM,GAAG,OAAO;AAAA,EAClB;AACF;AAEO,MAAM,yBAAyB,CAAC,EAAE,QAAQ,MAA2B;AAC1E,QAAM,oBAAoB,qBAAqB,OAAO;AAEtD,SACE,6BAAAC,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,eAAc;AAAA,MACd,YAAW;AAAA,MACX,OAAM;AAAA,MACN,GAAE;AAAA,MACF,cAAa;AAAA,MACb,iBAAiB,kBAAkB;AAAA;AAAA,IAEnC,6BAAAA,QAAA,cAAC,0BAAK,OAAO,kBAAkB,OAAO,UAAS,UAC5C,kBAAkB,IACrB;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import React from \"react\";\nimport { Flex, Text } from \"../../../components\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\n\nconst Wrapper = styled(Flex)`\n  ${withTokens(\n    \"colors-surface-status-success-default\",\n    \"colors-surface-status-success-strong-default\",\n    \"colors-surface-status-error-default\",\n    \"colors-surface-status-error-strong-default\",\n    \"colors-surface-transparent-hover\",\n    \"colors-content-default-default\",\n  )}\n`;\n\nconst getPercentageDisplay = (percent: number) => {\n  if (percent > 0) {\n    return {\n      backgroundColor: \"var(--colors-surface-status-success-default)\",\n      color: \"var(--colors-surface-status-success-strong-default)\",\n      text: `+${percent}%`,\n    };\n  }\n  if (percent < 0) {\n    return {\n      backgroundColor: \"var(--colors-surface-status-error-default)\",\n      color: \"var(--colors-surface-status-error-strong-default)\",\n      text: `-${Math.abs(percent)}%`,\n    };\n  }\n  return {\n    backgroundColor: \"var(--colors-surface-transparent-hover)\",\n    color: \"var(--colors-content-default-default)\",\n    text: `${percent}%`,\n  };\n};\n\nexport const MarketPercentIndicator = ({ percent }: { percent: number }) => {\n  const percentageDisplay = getPercentageDisplay(percent);\n\n  return (\n    <Wrapper\n      data-testid=\"market-percent-indicator\"\n      flexDirection=\"column\"\n      alignItems=\"flex-end\"\n      width=\"fit-content\"\n      p=\"4px\"\n      borderRadius=\"4px\"\n      backgroundColor={percentageDisplay.backgroundColor}\n    >\n      <Text\n        data-testid=\"market-percent-indicator-value\"\n        color={percentageDisplay.color}\n        fontSize=\"12px\"\n      >\n        {percentageDisplay.text}\n      </Text>\n    </Wrapper>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,wBAA2B;AAC3B,+BAAmB;AACnB,kBAA2B;AAE3B,MAAM,cAAU,yBAAAA,SAAO,sBAAI;AAAA,QACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAGH,MAAM,uBAAuB,CAAC,YAAoB;AAChD,MAAI,UAAU,GAAG;AACf,WAAO;AAAA,MACL,iBAAiB;AAAA,MACjB,OAAO;AAAA,MACP,MAAM,IAAI,OAAO;AAAA,IACnB;AAAA,EACF;AACA,MAAI,UAAU,GAAG;AACf,WAAO;AAAA,MACL,iBAAiB;AAAA,MACjB,OAAO;AAAA,MACP,MAAM,IAAI,KAAK,IAAI,OAAO,CAAC;AAAA,IAC7B;AAAA,EACF;AACA,SAAO;AAAA,IACL,iBAAiB;AAAA,IACjB,OAAO;AAAA,IACP,MAAM,GAAG,OAAO;AAAA,EAClB;AACF;AAEO,MAAM,yBAAyB,CAAC,EAAE,QAAQ,MAA2B;AAC1E,QAAM,oBAAoB,qBAAqB,OAAO;AAEtD,SACE,6BAAAC,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,eAAc;AAAA,MACd,YAAW;AAAA,MACX,OAAM;AAAA,MACN,GAAE;AAAA,MACF,cAAa;AAAA,MACb,iBAAiB,kBAAkB;AAAA;AAAA,IAEnC,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,OAAO,kBAAkB;AAAA,QACzB,UAAS;AAAA;AAAA,MAER,kBAAkB;AAAA,IACrB;AAAA,EACF;AAEJ;",
   "names": ["styled", "React"]
 }

package/lib/cjs/pre-ldls/components/MarketPriceIndicator/MarketPriceIndicator.js

@@ -52,7 +52,7 @@ const getPercentageDisplay = (percent) => {
   if (percent < 0) {
     return {
       color: "var(--colors-surface-status-error-strong-default)",
-      text: `-${percent}%`
+      text: `-${Math.abs(percent)}%`
     };
   }
   return {
@@ -70,8 +70,25 @@ const MarketPriceIndicator = ({ percent, price }) => {
       alignItems: "flex-end",
       width: "fit-content"
     },
-    /* @__PURE__ */ import_react.default.createElement(import_components.Text, { variant: "body", fontWeight: "semiBold", mb: "4px" }, price),
-    /* @__PURE__ */ import_react.default.createElement(import_components.Text, { color: percentageDisplay.color, fontSize: "12px" }, percentageDisplay.text)
+    /* @__PURE__ */ import_react.default.createElement(
+      import_components.Text,
+      {
+        "data-testid": "market-price-indicator-value",
+        variant: "body",
+        fontWeight: "semiBold",
+        mb: "4px"
+      },
+      price
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_components.Text,
+      {
+        "data-testid": "market-price-indicator-percent",
+        color: percentageDisplay.color,
+        fontSize: "12px"
+      },
+      percentageDisplay.text
+    )
   );
 };
 //# sourceMappingURL=MarketPriceIndicator.js.map

package/lib/cjs/pre-ldls/components/MarketPriceIndicator/MarketPriceIndicator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/MarketPriceIndicator/MarketPriceIndicator.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport { Flex, Text } from \"../../../components\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\n\nconst Wrapper = styled(Flex)`\n  ${withTokens(\n    \"colors-surface-status-success-strong-default\",\n    \"colors-surface-status-error-strong-default\",\n    \"colors-content-default-default\",\n  )}\n`;\n\nconst getPercentageDisplay = (percent: number) => {\n  if (percent > 0) {\n    return {\n      color: \"var(--colors-surface-status-success-strong-default)\",\n      text: `+${percent}%`,\n    };\n  }\n  if (percent < 0) {\n    return {\n      color: \"var(--colors-surface-status-error-strong-default)\",\n      text: `-${percent}%`,\n    };\n  }\n  return {\n    color: \"var(--colors-content-default-default)\",\n    text: `${percent}%`,\n  };\n};\n\nexport const MarketPriceIndicator = ({ percent, price }: { percent: number; price: string }) => {\n  const percentageDisplay = getPercentageDisplay(percent);\n\n  return (\n    <Wrapper\n      data-testid=\"market-price-indicator\"\n      flexDirection=\"column\"\n      alignItems=\"flex-end\"\n      width=\"fit-content\"\n    >\n      <Text variant=\"body\" fontWeight=\"semiBold\" mb=\"4px\">\n        {price}\n      </Text>\n      <Text color={percentageDisplay.color} fontSize=\"12px\">\n        {percentageDisplay.text}\n      </Text>\n    </Wrapper>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,wBAA2B;AAC3B,+BAAmB;AACnB,kBAA2B;AAE3B,MAAM,cAAU,yBAAAA,SAAO,sBAAI;AAAA,QACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAGH,MAAM,uBAAuB,CAAC,YAAoB;AAChD,MAAI,UAAU,GAAG;AACf,WAAO;AAAA,MACL,OAAO;AAAA,MACP,MAAM,IAAI,OAAO;AAAA,IACnB;AAAA,EACF;AACA,MAAI,UAAU,GAAG;AACf,WAAO;AAAA,MACL,OAAO;AAAA,MACP,MAAM,IAAI,OAAO;AAAA,IACnB;AAAA,EACF;AACA,SAAO;AAAA,IACL,OAAO;AAAA,IACP,MAAM,GAAG,OAAO;AAAA,EAClB;AACF;AAEO,MAAM,uBAAuB,CAAC,EAAE,SAAS,MAAM,MAA0C;AAC9F,QAAM,oBAAoB,qBAAqB,OAAO;AAEtD,SACE,6BAAAC,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,eAAc;AAAA,MACd,YAAW;AAAA,MACX,OAAM;AAAA;AAAA,IAEN,6BAAAA,QAAA,cAAC,0BAAK,SAAQ,QAAO,YAAW,YAAW,IAAG,SAC3C,KACH;AAAA,IACA,6BAAAA,QAAA,cAAC,0BAAK,OAAO,kBAAkB,OAAO,UAAS,UAC5C,kBAAkB,IACrB;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import React from \"react\";\nimport { Flex, Text } from \"../../../components\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\n\nconst Wrapper = styled(Flex)`\n  ${withTokens(\n    \"colors-surface-status-success-strong-default\",\n    \"colors-surface-status-error-strong-default\",\n    \"colors-content-default-default\",\n  )}\n`;\n\nconst getPercentageDisplay = (percent: number) => {\n  if (percent > 0) {\n    return {\n      color: \"var(--colors-surface-status-success-strong-default)\",\n      text: `+${percent}%`,\n    };\n  }\n  if (percent < 0) {\n    return {\n      color: \"var(--colors-surface-status-error-strong-default)\",\n      text: `-${Math.abs(percent)}%`,\n    };\n  }\n  return {\n    color: \"var(--colors-content-default-default)\",\n    text: `${percent}%`,\n  };\n};\n\nexport const MarketPriceIndicator = ({ percent, price }: { percent: number; price: string }) => {\n  const percentageDisplay = getPercentageDisplay(percent);\n\n  return (\n    <Wrapper\n      data-testid=\"market-price-indicator\"\n      flexDirection=\"column\"\n      alignItems=\"flex-end\"\n      width=\"fit-content\"\n    >\n      <Text\n        data-testid=\"market-price-indicator-value\"\n        variant=\"body\"\n        fontWeight=\"semiBold\"\n        mb=\"4px\"\n      >\n        {price}\n      </Text>\n      <Text\n        data-testid=\"market-price-indicator-percent\"\n        color={percentageDisplay.color}\n        fontSize=\"12px\"\n      >\n        {percentageDisplay.text}\n      </Text>\n    </Wrapper>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,wBAA2B;AAC3B,+BAAmB;AACnB,kBAA2B;AAE3B,MAAM,cAAU,yBAAAA,SAAO,sBAAI;AAAA,QACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAGH,MAAM,uBAAuB,CAAC,YAAoB;AAChD,MAAI,UAAU,GAAG;AACf,WAAO;AAAA,MACL,OAAO;AAAA,MACP,MAAM,IAAI,OAAO;AAAA,IACnB;AAAA,EACF;AACA,MAAI,UAAU,GAAG;AACf,WAAO;AAAA,MACL,OAAO;AAAA,MACP,MAAM,IAAI,KAAK,IAAI,OAAO,CAAC;AAAA,IAC7B;AAAA,EACF;AACA,SAAO;AAAA,IACL,OAAO;AAAA,IACP,MAAM,GAAG,OAAO;AAAA,EAClB;AACF;AAEO,MAAM,uBAAuB,CAAC,EAAE,SAAS,MAAM,MAA0C;AAC9F,QAAM,oBAAoB,qBAAqB,OAAO;AAEtD,SACE,6BAAAC,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,eAAc;AAAA,MACd,YAAW;AAAA,MACX,OAAM;AAAA;AAAA,IAEN,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,SAAQ;AAAA,QACR,YAAW;AAAA,QACX,IAAG;AAAA;AAAA,MAEF;AAAA,IACH;AAAA,IACA,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,OAAO,kBAAkB;AAAA,QACzB,UAAS;AAAA;AAAA,MAER,kBAAkB;AAAA,IACrB;AAAA,EACF;AAEJ;",
   "names": ["styled", "React"]
 }

package/lib/pre-ldls/components/MarketPercentIndicator/MarketPercentIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarketPercentIndicator.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/MarketPercentIndicator/MarketPercentIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAsC1B,eAAO,MAAM,sBAAsB;aAA4B,MAAM;uBAkBpE,CAAC"}
+{"version":3,"file":"MarketPercentIndicator.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/MarketPercentIndicator/MarketPercentIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAsC1B,eAAO,MAAM,sBAAsB;aAA4B,MAAM;uBAsBpE,CAAC"}

package/lib/pre-ldls/components/MarketPercentIndicator/MarketPercentIndicator.js

@@ -29,6 +29,6 @@ const getPercentageDisplay = (percent) => {
 export const MarketPercentIndicator = ({ percent }) => {
     const percentageDisplay = getPercentageDisplay(percent);
     return (React.createElement(Wrapper, { "data-testid": "market-percent-indicator", flexDirection: "column", alignItems: "flex-end", width: "fit-content", p: "4px", borderRadius: "4px", backgroundColor: percentageDisplay.backgroundColor },
-        React.createElement(Text, { color: percentageDisplay.color, fontSize: "12px" }, percentageDisplay.text)));
+        React.createElement(Text, { "data-testid": "market-percent-indicator-value", color: percentageDisplay.color, fontSize: "12px" }, percentageDisplay.text)));
 };
 //# sourceMappingURL=MarketPercentIndicator.js.map

package/lib/pre-ldls/components/MarketPercentIndicator/MarketPercentIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarketPercentIndicator.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/MarketPercentIndicator/MarketPercentIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExC,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IACxB,UAAU,CACV,uCAAuC,EACvC,8CAA8C,EAC9C,qCAAqC,EACrC,4CAA4C,EAC5C,kCAAkC,EAClC,gCAAgC,CACjC;CACF,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAAC,OAAe,EAAE,EAAE;IAC/C,IAAI,OAAO,GAAG,CAAC,EAAE,CAAC;QAChB,OAAO;YACL,eAAe,EAAE,8CAA8C;YAC/D,KAAK,EAAE,qDAAqD;YAC5D,IAAI,EAAE,IAAI,OAAO,GAAG;SACrB,CAAC;IACJ,CAAC;IACD,IAAI,OAAO,GAAG,CAAC,EAAE,CAAC;QAChB,OAAO;YACL,eAAe,EAAE,4CAA4C;YAC7D,KAAK,EAAE,mDAAmD;YAC1D,IAAI,EAAE,IAAI,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG;SAC/B,CAAC;IACJ,CAAC;IACD,OAAO;QACL,eAAe,EAAE,yCAAyC;QAC1D,KAAK,EAAE,uCAAuC;QAC9C,IAAI,EAAE,GAAG,OAAO,GAAG;KACpB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EAAE,OAAO,EAAuB,EAAE,EAAE;IACzE,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAExD,OAAO,CACL,oBAAC,OAAO,mBACM,0BAA0B,EACtC,aAAa,EAAC,QAAQ,EACtB,UAAU,EAAC,UAAU,EACrB,KAAK,EAAC,aAAa,EACnB,CAAC,EAAC,KAAK,EACP,YAAY,EAAC,KAAK,EAClB,eAAe,EAAE,iBAAiB,CAAC,eAAe;QAElD,oBAAC,IAAI,IAAC,KAAK,EAAE,iBAAiB,CAAC,KAAK,EAAE,QAAQ,EAAC,MAAM,IAClD,iBAAiB,CAAC,IAAI,CAClB,CACC,CACX,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"MarketPercentIndicator.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/MarketPercentIndicator/MarketPercentIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExC,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IACxB,UAAU,CACV,uCAAuC,EACvC,8CAA8C,EAC9C,qCAAqC,EACrC,4CAA4C,EAC5C,kCAAkC,EAClC,gCAAgC,CACjC;CACF,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAAC,OAAe,EAAE,EAAE;IAC/C,IAAI,OAAO,GAAG,CAAC,EAAE,CAAC;QAChB,OAAO;YACL,eAAe,EAAE,8CAA8C;YAC/D,KAAK,EAAE,qDAAqD;YAC5D,IAAI,EAAE,IAAI,OAAO,GAAG;SACrB,CAAC;IACJ,CAAC;IACD,IAAI,OAAO,GAAG,CAAC,EAAE,CAAC;QAChB,OAAO;YACL,eAAe,EAAE,4CAA4C;YAC7D,KAAK,EAAE,mDAAmD;YAC1D,IAAI,EAAE,IAAI,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG;SAC/B,CAAC;IACJ,CAAC;IACD,OAAO;QACL,eAAe,EAAE,yCAAyC;QAC1D,KAAK,EAAE,uCAAuC;QAC9C,IAAI,EAAE,GAAG,OAAO,GAAG;KACpB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EAAE,OAAO,EAAuB,EAAE,EAAE;IACzE,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAExD,OAAO,CACL,oBAAC,OAAO,mBACM,0BAA0B,EACtC,aAAa,EAAC,QAAQ,EACtB,UAAU,EAAC,UAAU,EACrB,KAAK,EAAC,aAAa,EACnB,CAAC,EAAC,KAAK,EACP,YAAY,EAAC,KAAK,EAClB,eAAe,EAAE,iBAAiB,CAAC,eAAe;QAElD,oBAAC,IAAI,mBACS,gCAAgC,EAC5C,KAAK,EAAE,iBAAiB,CAAC,KAAK,EAC9B,QAAQ,EAAC,MAAM,IAEd,iBAAiB,CAAC,IAAI,CAClB,CACC,CACX,CAAC;AACJ,CAAC,CAAC"}

package/lib/pre-ldls/components/MarketPriceIndicator/MarketPriceIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarketPriceIndicator.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/MarketPriceIndicator/MarketPriceIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgC1B,eAAO,MAAM,oBAAoB;aAAmC,MAAM;WAAS,MAAM;uBAkBxF,CAAC"}
+{"version":3,"file":"MarketPriceIndicator.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/MarketPriceIndicator/MarketPriceIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgC1B,eAAO,MAAM,oBAAoB;aAAmC,MAAM;WAAS,MAAM;uBA2BxF,CAAC"}

package/lib/pre-ldls/components/MarketPriceIndicator/MarketPriceIndicator.js

@@ -15,7 +15,7 @@ const getPercentageDisplay = (percent) => {
     if (percent < 0) {
         return {
             color: "var(--colors-surface-status-error-strong-default)",
-            text: `-${percent}%`,
+            text: `-${Math.abs(percent)}%`,
         };
     }
     return {
@@ -26,7 +26,7 @@ const getPercentageDisplay = (percent) => {
 export const MarketPriceIndicator = ({ percent, price }) => {
     const percentageDisplay = getPercentageDisplay(percent);
     return (React.createElement(Wrapper, { "data-testid": "market-price-indicator", flexDirection: "column", alignItems: "flex-end", width: "fit-content" },
-        React.createElement(Text, { variant: "body", fontWeight: "semiBold", mb: "4px" }, price),
-        React.createElement(Text, { color: percentageDisplay.color, fontSize: "12px" }, percentageDisplay.text)));
+        React.createElement(Text, { "data-testid": "market-price-indicator-value", variant: "body", fontWeight: "semiBold", mb: "4px" }, price),
+        React.createElement(Text, { "data-testid": "market-price-indicator-percent", color: percentageDisplay.color, fontSize: "12px" }, percentageDisplay.text)));
 };
 //# sourceMappingURL=MarketPriceIndicator.js.map

package/lib/pre-ldls/components/MarketPriceIndicator/MarketPriceIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarketPriceIndicator.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/MarketPriceIndicator/MarketPriceIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExC,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IACxB,UAAU,CACV,8CAA8C,EAC9C,4CAA4C,EAC5C,gCAAgC,CACjC;CACF,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAAC,OAAe,EAAE,EAAE;IAC/C,IAAI,OAAO,GAAG,CAAC,EAAE,CAAC;QAChB,OAAO;YACL,KAAK,EAAE,qDAAqD;YAC5D,IAAI,EAAE,IAAI,OAAO,GAAG;SACrB,CAAC;IACJ,CAAC;IACD,IAAI,OAAO,GAAG,CAAC,EAAE,CAAC;QAChB,OAAO;YACL,KAAK,EAAE,mDAAmD;YAC1D,IAAI,EAAE,IAAI,OAAO,GAAG;SACrB,CAAC;IACJ,CAAC;IACD,OAAO;QACL,KAAK,EAAE,uCAAuC;QAC9C,IAAI,EAAE,GAAG,OAAO,GAAG;KACpB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EAAE,OAAO,EAAE,KAAK,EAAsC,EAAE,EAAE;IAC7F,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAExD,OAAO,CACL,oBAAC,OAAO,mBACM,wBAAwB,EACpC,aAAa,EAAC,QAAQ,EACtB,UAAU,EAAC,UAAU,EACrB,KAAK,EAAC,aAAa;QAEnB,oBAAC,IAAI,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,UAAU,EAAC,EAAE,EAAC,KAAK,IAChD,KAAK,CACD;QACP,oBAAC,IAAI,IAAC,KAAK,EAAE,iBAAiB,CAAC,KAAK,EAAE,QAAQ,EAAC,MAAM,IAClD,iBAAiB,CAAC,IAAI,CAClB,CACC,CACX,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"MarketPriceIndicator.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/MarketPriceIndicator/MarketPriceIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExC,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IACxB,UAAU,CACV,8CAA8C,EAC9C,4CAA4C,EAC5C,gCAAgC,CACjC;CACF,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAAC,OAAe,EAAE,EAAE;IAC/C,IAAI,OAAO,GAAG,CAAC,EAAE,CAAC;QAChB,OAAO;YACL,KAAK,EAAE,qDAAqD;YAC5D,IAAI,EAAE,IAAI,OAAO,GAAG;SACrB,CAAC;IACJ,CAAC;IACD,IAAI,OAAO,GAAG,CAAC,EAAE,CAAC;QAChB,OAAO;YACL,KAAK,EAAE,mDAAmD;YAC1D,IAAI,EAAE,IAAI,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG;SAC/B,CAAC;IACJ,CAAC;IACD,OAAO;QACL,KAAK,EAAE,uCAAuC;QAC9C,IAAI,EAAE,GAAG,OAAO,GAAG;KACpB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EAAE,OAAO,EAAE,KAAK,EAAsC,EAAE,EAAE;IAC7F,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAExD,OAAO,CACL,oBAAC,OAAO,mBACM,wBAAwB,EACpC,aAAa,EAAC,QAAQ,EACtB,UAAU,EAAC,UAAU,EACrB,KAAK,EAAC,aAAa;QAEnB,oBAAC,IAAI,mBACS,8BAA8B,EAC1C,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,UAAU,EACrB,EAAE,EAAC,KAAK,IAEP,KAAK,CACD;QACP,oBAAC,IAAI,mBACS,gCAAgC,EAC5C,KAAK,EAAE,iBAAiB,CAAC,KAAK,EAC9B,QAAQ,EAAC,MAAM,IAEd,iBAAiB,CAAC,IAAI,CAClB,CACC,CACX,CAAC;AACJ,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/react-ui",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "description": "Ledger Live - Desktop UI",
   "author": "Ledger Live Team <team-live@ledger.fr>",
   "repository": {
@@ -75,9 +75,9 @@
     "react-transition-group": "^4.4.2",
     "react-window": "^1.8.6",
     "styled-system": "^5.1.5",
-    "@ledgerhq/crypto-icons-ui": "^1.19.0",
-    "@ledgerhq/icons-ui": "^0.14.0",
-    "@ledgerhq/ui-shared": "^0.4.0"
+    "@ledgerhq/crypto-icons-ui": "^1.20.0",
+    "@ledgerhq/ui-shared": "^0.4.0",
+    "@ledgerhq/icons-ui": "^0.14.0"
   },
   "peerDependencies": {
     "react": ">=17.0.2",