npm - @ledgerhq/react-ui - Versions diffs - 0.9.2 → 0.10.0-next.0 - Mend

@ledgerhq/react-ui 0.9.2 → 0.10.0-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (117) hide show

package/lib/cjs/components/asorted/Text/styles.js CHANGED Viewed

@@ -87,26 +87,48 @@ const textVariantStyle = {
     fontWeight: 500,
     "text-transform": "uppercase"
   },
+  h1Inter: {
+    fontFamily: "Inter, Sans",
+    fontWeight: 500,
+    "text-transform": "uppercase"
+  },
   h2: {
     fontFamily: "Alpha, Inter, Sans",
     fontWeight: 500,
     "text-transform": "uppercase"
   },
+  h2Inter: {
+    fontFamily: "Inter, Sans",
+    fontWeight: 500,
+    "text-transform": "uppercase"
+  },
   h3: {
     fontFamily: "Alpha, Inter, Sans",
     fontWeight: 500,
     "text-transform": "uppercase"
   },
+  h3Inter: {
+    fontFamily: "Inter, Sans",
+    fontWeight: 500
+  },
   h4: {
     fontFamily: "Alpha, Inter, Sans",
     fontWeight: 500,
     "text-transform": "uppercase"
   },
+  h4Inter: {
+    fontFamily: "Inter, Sans",
+    fontWeight: 600
+  },
   h5: {
     fontFamily: "Alpha, Inter, Sans",
     fontWeight: 500,
     "text-transform": "uppercase"
   },
+  h5Inter: {
+    fontFamily: "Inter, Sans",
+    fontWeight: 500
+  },
   large: {
     fontFamily: "Inter, Sans"
   },

package/lib/cjs/components/asorted/Text/styles.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/asorted/Text/styles.ts"],
-  "sourcesContent": ["import { GlobalStyleProps } from \"../../../styles/global\";\nimport { css } from \"styled-components\";\nimport { TextVariants } from \"../../../styles/theme\";\n\nconst getFontSource = (name: string) => (props: GlobalStyleProps) => {\n  const fontsPath = props.fontsPath ?? \"assets/fonts\";\n  const fontName = (props.fontMappings && props.fontMappings(name)) || `${name}.woff2`;\n  return `url(\"${fontsPath}/${fontName}\") format(\"woff2\")`;\n};\n\nexport const fontStyles = css`\n  @font-face {\n    font-family: \"Inter\";\n    src: ${getFontSource(\"Inter-ExtraLight-BETA\")};\n    font-weight: 100;\n    font-style: normal;\n  }\n\n  @font-face {\n    font-family: \"Inter\";\n    src: ${getFontSource(\"Inter-Light-BETA\")};\n    font-weight: 300;\n    font-style: normal;\n  }\n\n  @font-face {\n    font-family: \"Inter\";\n    src: ${getFontSource(\"Inter-Regular\")};\n    font-weight: 400;\n    font-style: normal;\n  }\n\n  @font-face {\n    font-family: \"Inter\";\n    src: ${getFontSource(\"Inter-Medium\")};\n    font-weight: 500;\n    font-style: normal;\n  }\n\n  @font-face {\n    font-family: \"Inter\";\n    src: ${getFontSource(\"Inter-SemiBold\")};\n    font-weight: 600;\n    font-style: normal;\n  }\n\n  @font-face {\n    font-family: \"Inter\";\n    src: ${getFontSource(\"Inter-ExtraBold\")};\n    font-weight: 900;\n    font-style: normal;\n  }\n\n  @font-face {\n    font-family: \"Alpha\";\n    src: ${getFontSource(\"HMAlphaMono-Medium\")};\n    font-weight: 500;\n    font-style: normal;\n  }\n`;\n\nexport const textVariantStyle: Record<\n  TextVariants,\n  {\n    fontFamily: string;\n    lineHeight?: string | number;\n    fontWeight?: number;\n    \"text-transform\"?: string;\n  }\n> = {\n  h1: {\n    fontFamily: \"Alpha, Inter, Sans\",\n    fontWeight: 500,\n    \"text-transform\": \"uppercase\",\n  },\n  h2: {\n    fontFamily: \"Alpha, Inter, Sans\",\n    fontWeight: 500,\n    \"text-transform\": \"uppercase\",\n  },\n  h3: {\n    fontFamily: \"Alpha, Inter, Sans\",\n    fontWeight: 500,\n    \"text-transform\": \"uppercase\",\n  },\n  h4: {\n    fontFamily: \"Alpha, Inter, Sans\",\n    fontWeight: 500,\n    \"text-transform\": \"uppercase\",\n  },\n  h5: {\n    fontFamily: \"Alpha, Inter, Sans\",\n    fontWeight: 500,\n    \"text-transform\": \"uppercase\",\n  },\n  large: {\n    fontFamily: \"Inter, Sans\",\n  },\n  largeLineHeight: {\n    fontFamily: \"Inter, Sans\",\n    lineHeight: 1.7,\n  },\n  body: {\n    fontFamily: \"Inter, Sans\",\n  },\n  bodyLineHeight: {\n    fontFamily: \"Inter, Sans\",\n    lineHeight: 1.7,\n  },\n  paragraph: {\n    fontFamily: \"Inter, Sans\",\n  },\n  paragraphLineHeight: {\n    fontFamily: \"Inter, Sans\",\n    lineHeight: 1.7,\n  },\n  small: {\n    fontFamily: \"Inter, Sans\",\n  },\n  extraSmall: {\n    fontFamily: \"Inter, Sans\",\n  },\n  tiny: {\n    fontFamily: \"Inter, Sans\",\n  },\n  micro: {\n    fontFamily: \"Inter, Sans\",\n  },\n  subtitle: {\n    fontFamily: \"Inter, Sans\",\n    fontWeight: 600,\n    \"text-transform\": \"uppercase\",\n  },\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AACA,+BAAoB;AAGpB,MAAM,gBAAgB,CAAC,SAAiB,CAAC,UAA4B;AACnE,QAAM,YAAY,MAAM,aAAa;AACrC,QAAM,WAAY,MAAM,gBAAgB,MAAM,aAAa,SAAU,GAAG;AACxE,SAAO,QAAQ,aAAa;AAAA;AAGvB,MAAM,aAAa;AAAA;AAAA;AAAA,WAGf,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOd,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOd,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOd,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOd,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOd,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOd,cAAc;AAAA;AAAA;AAAA;AAAA;AAMlB,MAAM,mBAQT;AAAA,EACF,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,kBAAkB;AAAA;AAAA,EAEpB,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,kBAAkB;AAAA;AAAA,EAEpB,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,kBAAkB;AAAA;AAAA,EAEpB,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,kBAAkB;AAAA;AAAA,EAEpB,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,kBAAkB;AAAA;AAAA,EAEpB,OAAO;AAAA,IACL,YAAY;AAAA;AAAA,EAEd,iBAAiB;AAAA,IACf,YAAY;AAAA,IACZ,YAAY;AAAA;AAAA,EAEd,MAAM;AAAA,IACJ,YAAY;AAAA;AAAA,EAEd,gBAAgB;AAAA,IACd,YAAY;AAAA,IACZ,YAAY;AAAA;AAAA,EAEd,WAAW;AAAA,IACT,YAAY;AAAA;AAAA,EAEd,qBAAqB;AAAA,IACnB,YAAY;AAAA,IACZ,YAAY;AAAA;AAAA,EAEd,OAAO;AAAA,IACL,YAAY;AAAA;AAAA,EAEd,YAAY;AAAA,IACV,YAAY;AAAA;AAAA,EAEd,MAAM;AAAA,IACJ,YAAY;AAAA;AAAA,EAEd,OAAO;AAAA,IACL,YAAY;AAAA;AAAA,EAEd,UAAU;AAAA,IACR,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,kBAAkB;AAAA;AAAA;",
+  "sourcesContent": ["import { GlobalStyleProps } from \"../../../styles/global\";\nimport { css } from \"styled-components\";\nimport { TextVariants } from \"../../../styles/theme\";\n\nconst getFontSource = (name: string) => (props: GlobalStyleProps) => {\n  const fontsPath = props.fontsPath ?? \"assets/fonts\";\n  const fontName = (props.fontMappings && props.fontMappings(name)) || `${name}.woff2`;\n  return `url(\"${fontsPath}/${fontName}\") format(\"woff2\")`;\n};\n\nexport const fontStyles = css`\n  @font-face {\n    font-family: \"Inter\";\n    src: ${getFontSource(\"Inter-ExtraLight-BETA\")};\n    font-weight: 100;\n    font-style: normal;\n  }\n\n  @font-face {\n    font-family: \"Inter\";\n    src: ${getFontSource(\"Inter-Light-BETA\")};\n    font-weight: 300;\n    font-style: normal;\n  }\n\n  @font-face {\n    font-family: \"Inter\";\n    src: ${getFontSource(\"Inter-Regular\")};\n    font-weight: 400;\n    font-style: normal;\n  }\n\n  @font-face {\n    font-family: \"Inter\";\n    src: ${getFontSource(\"Inter-Medium\")};\n    font-weight: 500;\n    font-style: normal;\n  }\n\n  @font-face {\n    font-family: \"Inter\";\n    src: ${getFontSource(\"Inter-SemiBold\")};\n    font-weight: 600;\n    font-style: normal;\n  }\n\n  @font-face {\n    font-family: \"Inter\";\n    src: ${getFontSource(\"Inter-ExtraBold\")};\n    font-weight: 900;\n    font-style: normal;\n  }\n\n  @font-face {\n    font-family: \"Alpha\";\n    src: ${getFontSource(\"HMAlphaMono-Medium\")};\n    font-weight: 500;\n    font-style: normal;\n  }\n`;\n\nexport const textVariantStyle: Record<\n  TextVariants,\n  {\n    fontFamily: string;\n    lineHeight?: string | number;\n    fontWeight?: number;\n    \"text-transform\"?: string;\n  }\n> = {\n  h1: {\n    fontFamily: \"Alpha, Inter, Sans\",\n    fontWeight: 500,\n    \"text-transform\": \"uppercase\",\n  },\n  h1Inter: {\n    fontFamily: \"Inter, Sans\",\n    fontWeight: 500,\n    \"text-transform\": \"uppercase\",\n  },\n  h2: {\n    fontFamily: \"Alpha, Inter, Sans\",\n    fontWeight: 500,\n    \"text-transform\": \"uppercase\",\n  },\n  h2Inter: {\n    fontFamily: \"Inter, Sans\",\n    fontWeight: 500,\n    \"text-transform\": \"uppercase\",\n  },\n  h3: {\n    fontFamily: \"Alpha, Inter, Sans\",\n    fontWeight: 500,\n    \"text-transform\": \"uppercase\",\n  },\n  h3Inter: {\n    fontFamily: \"Inter, Sans\",\n    fontWeight: 500,\n  },\n  h4: {\n    fontFamily: \"Alpha, Inter, Sans\",\n    fontWeight: 500,\n    \"text-transform\": \"uppercase\",\n  },\n  h4Inter: {\n    fontFamily: \"Inter, Sans\",\n    fontWeight: 600,\n  },\n  h5: {\n    fontFamily: \"Alpha, Inter, Sans\",\n    fontWeight: 500,\n    \"text-transform\": \"uppercase\",\n  },\n  h5Inter: {\n    fontFamily: \"Inter, Sans\",\n    fontWeight: 500,\n  },\n  large: {\n    fontFamily: \"Inter, Sans\",\n  },\n  largeLineHeight: {\n    fontFamily: \"Inter, Sans\",\n    lineHeight: 1.7,\n  },\n  body: {\n    fontFamily: \"Inter, Sans\",\n  },\n  bodyLineHeight: {\n    fontFamily: \"Inter, Sans\",\n    lineHeight: 1.7,\n  },\n  paragraph: {\n    fontFamily: \"Inter, Sans\",\n  },\n  paragraphLineHeight: {\n    fontFamily: \"Inter, Sans\",\n    lineHeight: 1.7,\n  },\n  small: {\n    fontFamily: \"Inter, Sans\",\n  },\n  extraSmall: {\n    fontFamily: \"Inter, Sans\",\n  },\n  tiny: {\n    fontFamily: \"Inter, Sans\",\n  },\n  micro: {\n    fontFamily: \"Inter, Sans\",\n  },\n  subtitle: {\n    fontFamily: \"Inter, Sans\",\n    fontWeight: 600,\n    \"text-transform\": \"uppercase\",\n  },\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AACA,+BAAoB;AAGpB,MAAM,gBAAgB,CAAC,SAAiB,CAAC,UAA4B;AACnE,QAAM,YAAY,MAAM,aAAa;AACrC,QAAM,WAAY,MAAM,gBAAgB,MAAM,aAAa,SAAU,GAAG;AACxE,SAAO,QAAQ,aAAa;AAAA;AAGvB,MAAM,aAAa;AAAA;AAAA;AAAA,WAGf,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOd,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOd,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOd,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOd,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOd,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOd,cAAc;AAAA;AAAA;AAAA;AAAA;AAMlB,MAAM,mBAQT;AAAA,EACF,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,kBAAkB;AAAA;AAAA,EAEpB,SAAS;AAAA,IACP,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,kBAAkB;AAAA;AAAA,EAEpB,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,kBAAkB;AAAA;AAAA,EAEpB,SAAS;AAAA,IACP,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,kBAAkB;AAAA;AAAA,EAEpB,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,kBAAkB;AAAA;AAAA,EAEpB,SAAS;AAAA,IACP,YAAY;AAAA,IACZ,YAAY;AAAA;AAAA,EAEd,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,kBAAkB;AAAA;AAAA,EAEpB,SAAS;AAAA,IACP,YAAY;AAAA,IACZ,YAAY;AAAA;AAAA,EAEd,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,kBAAkB;AAAA;AAAA,EAEpB,SAAS;AAAA,IACP,YAAY;AAAA,IACZ,YAAY;AAAA;AAAA,EAEd,OAAO;AAAA,IACL,YAAY;AAAA;AAAA,EAEd,iBAAiB;AAAA,IACf,YAAY;AAAA,IACZ,YAAY;AAAA;AAAA,EAEd,MAAM;AAAA,IACJ,YAAY;AAAA;AAAA,EAEd,gBAAgB;AAAA,IACd,YAAY;AAAA,IACZ,YAAY;AAAA;AAAA,EAEd,WAAW;AAAA,IACT,YAAY;AAAA;AAAA,EAEd,qBAAqB;AAAA,IACnB,YAAY;AAAA,IACZ,YAAY;AAAA;AAAA,EAEd,OAAO;AAAA,IACL,YAAY;AAAA;AAAA,EAEd,YAAY;AAAA,IACV,YAAY;AAAA;AAAA,EAEd,MAAM;AAAA,IACJ,YAAY;AAAA;AAAA,EAEd,OAAO;AAAA,IACL,YAAY;AAAA;AAAA,EAEd,UAAU;AAAA,IACR,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,kBAAkB;AAAA;AAAA;",
   "names": []
 }

package/lib/cjs/components/asorted/index.js CHANGED Viewed

@@ -25,8 +25,11 @@ __export(exports, {
   BoxedIcon: () => import_Icon.BoxedIcon,
   CryptoIcon: () => import_Icon.CryptoIcon,
   Divider: () => import_Divider.default,
+  FlagIcon: () => import_Icon.FlagIcon,
   Icon: () => import_Icon.default,
   IconBox: () => import_Icon.IconBox,
+  PaymentIcon: () => import_Icon.PaymentIcon,
+  ProviderIcon: () => import_Icon.ProviderIcon,
   Text: () => import_Text.default
 });
 var import_Divider = __toModule(require("./Divider"));

package/lib/cjs/components/asorted/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/asorted/index.ts"],
-  "sourcesContent": ["export { default as Divider } from \"./Divider\";\nexport { default as Icon, IconBox, BoxedIcon, CryptoIcon } from \"./Icon\";\nexport { default as Text } from \"./Text\";\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAmC;AACnC,kBAAgE;AAChE,kBAAgC;",
+  "sourcesContent": ["export { default as Divider } from \"./Divider\";\nexport {\n  default as Icon,\n  IconBox,\n  BoxedIcon,\n  CryptoIcon,\n  ProviderIcon,\n  PaymentIcon,\n  FlagIcon,\n} from \"./Icon\";\nexport { default as Text } from \"./Text\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAmC;AACnC,kBAQO;AACP,kBAAgC;",
   "names": []
 }

package/lib/cjs/components/cta/Button/index.js CHANGED Viewed

@@ -66,7 +66,6 @@ const getVariantColors = (p) => ({
   shade: `
       border-color: ${p.theme.colors.neutral.c40};
       color: ${p.theme.colors.neutral.c100};
-      background-color: ${p.theme.colors.neutral.c00};
       &:focus {
         border-color: ${p.theme.colors.primary.c80};
       }
@@ -99,6 +98,13 @@ const getVariantColors = (p) => ({
       }
     `
   },
+  neutral: `
+    color: ${p.theme.colors.neutral.c100};
+    background-color: ${p.theme.colors.neutral.c30};
+    &:hover {
+      background-color: ${p.theme.colors.neutral.c40};
+    }
+  `,
   color: {
     outline: `
       border-color: ${p.theme.colors.primary.c80};
@@ -191,13 +197,15 @@ const Base = import_styled.default.button.attrs((p) => ({
       return p.outline ? variants.error.outline : variants.error.filled;
     case "color":
       return p.outline ? variants.color.outline : variants.color.filled;
+    case "neutral":
+      return variants.neutral;
     case "default":
     default:
       return variants.default;
   }
 }}
   ${(p) => p.iconButton ? import_styled_components.css`
-          width: ${p.theme.space[13]}px;
+          width: ${p.theme.space[12]}px;
           padding: 0;
           ${IconContainer} {
             margin: 0;

package/lib/cjs/components/cta/Button/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/cta/Button/index.tsx"],
-  "sourcesContent": ["import React, { useState, useMemo } from \"react\";\nimport styled, { css, StyledProps } from \"styled-components\";\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\nimport { fontSize, border, BordersProps, compose } from \"styled-system\";\nimport fontFamily from \"../../../styles/styled/fontFamily\";\nimport { fontSizes } from \"../../../styles/theme\";\nimport { rgba } from \"../../../styles/helpers\";\nimport ChevronBottom from \"@ledgerhq/icons-ui/react/ChevronBottomRegular\";\nimport IconComponent from \"../../asorted/Icon\";\n\nexport type ButtonVariants = \"main\" | \"shade\" | \"error\" | \"color\";\nexport type IconPosition = \"right\" | \"left\";\ninterface BaseProps extends BaseStyledProps, BordersProps {\n  ff?: string;\n  color?: string;\n  backgroundColor?: string;\n  size?: \"small\" | \"medium\" | \"large\";\n  fontSize?: number;\n  variant?: ButtonVariants;\n  outline?: boolean;\n  iconPosition?: IconPosition;\n  iconButton?: boolean;\n  disabled?: boolean;\n  whiteSpace?: string;\n}\n\nexport interface ButtonProps extends BaseProps, React.RefAttributes<HTMLButtonElement> {\n  iconName?: string;\n  Icon?: React.ComponentType<{ size: number; color?: string }>;\n  children?: React.ReactNode;\n  onClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;\n  iconSize?: number;\n  style?: React.CSSProperties;\n}\nconst IconContainer = styled.div<{\n  iconPosition: IconPosition;\n}>`\n  display: inline-block;\n  ${(p) => `${p.iconPosition === \"left\" ? \"margin-right\" : \"margin-left\"}: ${p.theme.space[4]}px;`}\n  padding-top: 0.2em;\n`;\n\nconst getVariantColors = (p: StyledProps<BaseProps>) => ({\n  main: {\n    outline: `\n        border-color: ${p.theme.colors.neutral.c100};\n        color: ${p.theme.colors.neutral.c100};\n        background-color: transparent;\n        &:hover, &:focus {\n          background-color: ${rgba(p.theme.colors.neutral.c100, 0.03)};\n        }\n        &:active {\n          background-color: ${rgba(p.theme.colors.neutral.c100, 0.05)};\n        }\n      `,\n    filled: `\n        color: ${p.theme.colors.neutral.c00};\n        background-color: ${p.theme.colors.neutral.c100};\n        &:hover, &:focus {\n          background-color: ${p.theme.colors.neutral.c90};\n        }\n      `,\n  },\n  shade: `\n      border-color: ${p.theme.colors.neutral.c40};\n      color: ${p.theme.colors.neutral.c100};\n      background-color: ${p.theme.colors.neutral.c00};\n      &:focus {\n        border-color: ${p.theme.colors.primary.c80};\n      }\n\n      &:hover, &:focus {\n        background-color: ${p.theme.colors.neutral.c20};\n      }\n\n      &:active {\n        background-color: ${p.theme.colors.neutral.c30};\n      }\n    `,\n  error: {\n    outline: `\n      border-color: ${p.theme.colors.error.c100};\n      color: ${p.theme.colors.error.c100};\n      background-color: transparent;\n      &:hover {\n        background-color: ${rgba(p.theme.colors.error.c100, 0.02)};\n      }\n      &:active {\n        background-color: ${rgba(p.theme.colors.error.c100, 0.05)};\n      }\n    `,\n    filled: `\n      color: ${p.theme.colors.neutral.c00};\n      background-color: ${p.theme.colors.error.c100};\n      &:hover {\n        background-color: ${p.theme.colors.error.c80};\n      }\n    `,\n  },\n  color: {\n    outline: `\n      border-color: ${p.theme.colors.primary.c80};\n      color: ${p.theme.colors.primary.c80};\n      background-color: transparent;\n      &:hover {\n        background-color: ${rgba(p.theme.colors.primary.c100, 0.02)};\n      }\n      &:active {\n        background-color: ${rgba(p.theme.colors.primary.c100, 0.05)};\n      }\n    `,\n    filled: `\n      color: ${p.theme.colors.neutral.c00};\n      background-color: ${p.theme.colors.primary.c80};\n      &:hover {\n        background-color: ${p.theme.colors.primary.c70};\n      }\n    `,\n  },\n  disabled: {\n    outline: `\n        border-color: ${p.theme.colors.neutral.c50};\n        color: ${p.theme.colors.neutral.c50};\n        background-color: transparent;\n      `,\n    filled: `\n        color: ${p.theme.colors.neutral.c50};\n        background-color: ${p.theme.colors.neutral.c30};\n      `,\n  },\n  default: `\n    color: ${p.theme.colors.neutral.c100};\n    background-color: transparent;\n    &:hover {\n      text-decoration: underline;\n    }\n  `,\n});\n\nexport const ButtonUnstyled = baseStyled.button`\n  all: unset;\n  cursor: pointer;\n\n  &:disabled {\n    cursor: default;\n  }\n`;\n\nexport const Base = baseStyled.button.attrs((p: BaseProps) => ({\n  fontFamily: \"Inter\",\n  fontSize: p.fontSize ?? 4,\n}))<BaseProps>`\n  background-color: transparent;\n  border-color: transparent;\n  border-radius: ${(p) => p.theme.space[13]}px;\n  border-style: solid;\n  border-width: ${(p) => (p.outline || p.variant === \"shade\" ? 1 : 0)}px;\n  font-weight: 600;\n  ${compose(fontFamily, fontSize, border)};\n  line-height: ${(p) => p.theme.fontSizes[p.fontSize]}px;\n  text-align: center;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  ${(p) => buttonSizeStyle[p.size || \"medium\"]}\n  text-overflow: ellipsis;\n  white-space: ${(p) => (p.whiteSpace ? p.whiteSpace : \"nowrap\")};\n  max-width: 100%;\n  position: relative;\n  cursor: ${(p) => (p.disabled ? \"default\" : \"pointer\")};\n  &:active {\n    box-shadow: 0 0 0 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.4)};\n  }\n  &:focus, &:hover {\n    box-shadow: 0 0 0 2px ${(p) => rgba(p.theme.colors.primary.c60, 0.4)};\n  }\n\n  ${(p) => {\n    const variants = getVariantColors(p);\n    if (p.disabled) {\n      return p.outline || p.variant === \"shade\"\n        ? variants.disabled.outline\n        : variants.disabled.filled;\n    }\n\n    const variant: ButtonVariants | \"default\" =\n      p.variant ?? (\"default\" as ButtonVariants | \"default\");\n    switch (variant) {\n      case \"main\":\n        return p.outline ? variants.main.outline : variants.main.filled;\n      case \"shade\":\n        return variants.shade;\n\n      case \"error\":\n        return p.outline ? variants.error.outline : variants.error.filled;\n\n      case \"color\":\n        return p.outline ? variants.color.outline : variants.color.filled;\n\n      case \"default\":\n      default:\n        return variants.default;\n    }\n  }}\n  ${(p) =>\n    p.iconButton\n      ? css`\n          width: ${p.theme.space[13]}px;\n          padding: 0;\n          ${IconContainer} {\n            margin: 0;\n          }\n        `\n      : \"\"}\n  ${(p) => p.theme.transition([\"background-color\", \"color\", \"border-color\", \"box-shadow\"], \"0.2s\")}\n`;\n\nconst ContentContainer = styled.div``;\n\nconst Button = (\n  {\n    Icon,\n    iconPosition = \"right\",\n    iconSize = 16,\n    children,\n    onClick,\n    iconName,\n    ...props\n  }: ButtonProps,\n  ref?: React.ForwardedRef<HTMLButtonElement>,\n): React.ReactElement => {\n  const iconNodeSize = iconSize || fontSizes[props.fontSize ?? 4];\n  const IconNode = useMemo(\n    () =>\n      (iconName && <IconComponent name={iconName} size={iconNodeSize} />) ||\n      (Icon && <Icon size={iconNodeSize} />),\n    [iconName, iconNodeSize, Icon],\n  );\n\n  return (\n    <Base {...props} ref={ref} iconButton={!(Icon == null) && !children} onClick={onClick}>\n      {iconPosition === \"right\" ? <ContentContainer>{children}</ContentContainer> : null}\n      {IconNode && <IconContainer iconPosition={iconPosition}>{IconNode}</IconContainer>}\n      {iconPosition === \"left\" ? <ContentContainer>{children}</ContentContainer> : null}\n    </Base>\n  );\n};\nconst ButtonWithRef = React.forwardRef(Button) as unknown as typeof Button;\n\nexport type ButtonExpandProps = React.PropsWithChildren<\n  ButtonProps & {\n    onToggle?: (arg0: boolean) => void;\n  }\n>;\n\nconst StyledButtonExpand = styled(ButtonWithRef).attrs((props) => ({\n  Icon: props.Icon != null || ChevronBottom,\n  iconPosition: props.iconPosition || \"right\",\n}))<{ expanded: boolean }>`\n  ${IconContainer} {\n    transition: transform 0.25s;\n    ${(p) => (p.expanded ? \"transform: rotate(180deg)\" : \"\")}\n  }\n`;\nexport function ButtonExpand(\n  { onToggle, onClick, ...props }: ButtonExpandProps,\n  ref?: React.ForwardedRef<HTMLButtonElement>,\n): React.ReactElement {\n  const [expanded, setExpanded] = useState(false);\n  return (\n    <StyledButtonExpand\n      {...props}\n      ref={ref}\n      expanded={expanded}\n      onClick={(event: React.SyntheticEvent<HTMLButtonElement>) => {\n        setExpanded((expanded) => !expanded);\n        onToggle != null && onToggle(!expanded);\n        onClick != null && onClick(event);\n      }}\n    />\n  );\n}\n\nexport const buttonSizeStyle: {\n  [index: string]: {\n    padding: string;\n    height: string;\n  };\n} = {\n  small: {\n    padding: \"0 20px\",\n    height: \"32px\",\n  },\n  medium: {\n    padding: \"0 24px\",\n    height: \"40px\",\n  },\n  large: {\n    padding: \"0 28px\",\n    height: \"48px\",\n  },\n};\n\nButton.Unstyled = ButtonUnstyled;\nButton.Expand = React.forwardRef(ButtonExpand);\nButtonWithRef.Unstyled = Button.Unstyled;\nButtonWithRef.Expand = Button.Expand;\nexport default ButtonWithRef;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useState, useMemo } from \"react\";\nimport styled, { css, StyledProps } from \"styled-components\";\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\nimport { fontSize, border, BordersProps, compose } from \"styled-system\";\nimport fontFamily from \"../../../styles/styled/fontFamily\";\nimport { fontSizes } from \"../../../styles/theme\";\nimport { rgba } from \"../../../styles/helpers\";\nimport ChevronBottom from \"@ledgerhq/icons-ui/react/ChevronBottomRegular\";\nimport IconComponent from \"../../asorted/Icon\";\n\nexport type ButtonVariants = \"main\" | \"shade\" | \"error\" | \"color\" | \"neutral\";\nexport type IconPosition = \"right\" | \"left\";\ninterface BaseProps extends BaseStyledProps, BordersProps {\n  ff?: string;\n  color?: string;\n  backgroundColor?: string;\n  size?: \"small\" | \"medium\" | \"large\";\n  fontSize?: number;\n  variant?: ButtonVariants;\n  outline?: boolean;\n  iconPosition?: IconPosition;\n  iconButton?: boolean;\n  disabled?: boolean;\n  whiteSpace?: string;\n}\n\nexport interface ButtonProps extends BaseProps, React.RefAttributes<HTMLButtonElement> {\n  iconName?: string;\n  Icon?: React.ComponentType<{ size: number; color?: string }>;\n  children?: React.ReactNode;\n  onClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;\n  iconSize?: number;\n  style?: React.CSSProperties;\n}\nconst IconContainer = styled.div<{\n  iconPosition: IconPosition;\n}>`\n  display: inline-block;\n  ${(p) => `${p.iconPosition === \"left\" ? \"margin-right\" : \"margin-left\"}: ${p.theme.space[4]}px;`}\n  padding-top: 0.2em;\n`;\n\nconst getVariantColors = (p: StyledProps<BaseProps>) => ({\n  main: {\n    outline: `\n        border-color: ${p.theme.colors.neutral.c100};\n        color: ${p.theme.colors.neutral.c100};\n        background-color: transparent;\n        &:hover, &:focus {\n          background-color: ${rgba(p.theme.colors.neutral.c100, 0.03)};\n        }\n        &:active {\n          background-color: ${rgba(p.theme.colors.neutral.c100, 0.05)};\n        }\n      `,\n    filled: `\n        color: ${p.theme.colors.neutral.c00};\n        background-color: ${p.theme.colors.neutral.c100};\n        &:hover, &:focus {\n          background-color: ${p.theme.colors.neutral.c90};\n        }\n      `,\n  },\n  shade: `\n      border-color: ${p.theme.colors.neutral.c40};\n      color: ${p.theme.colors.neutral.c100};\n      &:focus {\n        border-color: ${p.theme.colors.primary.c80};\n      }\n\n      &:hover, &:focus {\n        background-color: ${p.theme.colors.neutral.c20};\n      }\n\n      &:active {\n        background-color: ${p.theme.colors.neutral.c30};\n      }\n    `,\n  error: {\n    outline: `\n      border-color: ${p.theme.colors.error.c100};\n      color: ${p.theme.colors.error.c100};\n      background-color: transparent;\n      &:hover {\n        background-color: ${rgba(p.theme.colors.error.c100, 0.02)};\n      }\n      &:active {\n        background-color: ${rgba(p.theme.colors.error.c100, 0.05)};\n      }\n    `,\n    filled: `\n      color: ${p.theme.colors.neutral.c00};\n      background-color: ${p.theme.colors.error.c100};\n      &:hover {\n        background-color: ${p.theme.colors.error.c80};\n      }\n    `,\n  },\n  neutral: `\n    color: ${p.theme.colors.neutral.c100};\n    background-color: ${p.theme.colors.neutral.c30};\n    &:hover {\n      background-color: ${p.theme.colors.neutral.c40};\n    }\n  `,\n  color: {\n    outline: `\n      border-color: ${p.theme.colors.primary.c80};\n      color: ${p.theme.colors.primary.c80};\n      background-color: transparent;\n      &:hover {\n        background-color: ${rgba(p.theme.colors.primary.c100, 0.02)};\n      }\n      &:active {\n        background-color: ${rgba(p.theme.colors.primary.c100, 0.05)};\n      }\n    `,\n    filled: `\n      color: ${p.theme.colors.neutral.c00};\n      background-color: ${p.theme.colors.primary.c80};\n      &:hover {\n        background-color: ${p.theme.colors.primary.c70};\n      }\n    `,\n  },\n  disabled: {\n    outline: `\n        border-color: ${p.theme.colors.neutral.c50};\n        color: ${p.theme.colors.neutral.c50};\n        background-color: transparent;\n      `,\n    filled: `\n        color: ${p.theme.colors.neutral.c50};\n        background-color: ${p.theme.colors.neutral.c30};\n      `,\n  },\n  default: `\n    color: ${p.theme.colors.neutral.c100};\n    background-color: transparent;\n    &:hover {\n      text-decoration: underline;\n    }\n  `,\n});\n\nexport const ButtonUnstyled = baseStyled.button`\n  all: unset;\n  cursor: pointer;\n\n  &:disabled {\n    cursor: default;\n  }\n`;\n\nexport const Base = baseStyled.button.attrs((p: BaseProps) => ({\n  fontFamily: \"Inter\",\n  fontSize: p.fontSize ?? 4,\n}))<BaseProps>`\n  background-color: transparent;\n  border-color: transparent;\n  border-radius: ${(p) => p.theme.space[13]}px;\n  border-style: solid;\n  border-width: ${(p) => (p.outline || p.variant === \"shade\" ? 1 : 0)}px;\n  font-weight: 600;\n  ${compose(fontFamily, fontSize, border)};\n  line-height: ${(p) => p.theme.fontSizes[p.fontSize]}px;\n  text-align: center;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  ${(p) => buttonSizeStyle[p.size || \"medium\"]}\n  text-overflow: ellipsis;\n  white-space: ${(p) => (p.whiteSpace ? p.whiteSpace : \"nowrap\")};\n  max-width: 100%;\n  position: relative;\n  cursor: ${(p) => (p.disabled ? \"default\" : \"pointer\")};\n  &:active {\n    box-shadow: 0 0 0 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.4)};\n  }\n  &:focus, &:hover {\n    box-shadow: 0 0 0 2px ${(p) => rgba(p.theme.colors.primary.c60, 0.4)};\n  }\n\n  ${(p) => {\n    const variants = getVariantColors(p);\n    if (p.disabled) {\n      return p.outline || p.variant === \"shade\"\n        ? variants.disabled.outline\n        : variants.disabled.filled;\n    }\n\n    const variant: ButtonVariants | \"default\" =\n      p.variant ?? (\"default\" as ButtonVariants | \"default\");\n    switch (variant) {\n      case \"main\":\n        return p.outline ? variants.main.outline : variants.main.filled;\n      case \"shade\":\n        return variants.shade;\n\n      case \"error\":\n        return p.outline ? variants.error.outline : variants.error.filled;\n\n      case \"color\":\n        return p.outline ? variants.color.outline : variants.color.filled;\n\n      case \"neutral\":\n        return variants.neutral;\n\n      case \"default\":\n      default:\n        return variants.default;\n    }\n  }}\n  ${(p) =>\n    p.iconButton\n      ? css`\n          width: ${p.theme.space[12]}px;\n          padding: 0;\n          ${IconContainer} {\n            margin: 0;\n          }\n        `\n      : \"\"}\n  ${(p) => p.theme.transition([\"background-color\", \"color\", \"border-color\", \"box-shadow\"], \"0.2s\")}\n`;\n\nconst ContentContainer = styled.div``;\n\nconst Button = (\n  {\n    Icon,\n    iconPosition = \"right\",\n    iconSize = 16,\n    children,\n    onClick,\n    iconName,\n    ...props\n  }: ButtonProps,\n  ref?: React.ForwardedRef<HTMLButtonElement>,\n): React.ReactElement => {\n  const iconNodeSize = iconSize || fontSizes[props.fontSize ?? 4];\n  const IconNode = useMemo(\n    () =>\n      (iconName && <IconComponent name={iconName} size={iconNodeSize} />) ||\n      (Icon && <Icon size={iconNodeSize} />),\n    [iconName, iconNodeSize, Icon],\n  );\n\n  return (\n    <Base {...props} ref={ref} iconButton={!(Icon == null) && !children} onClick={onClick}>\n      {iconPosition === \"right\" ? <ContentContainer>{children}</ContentContainer> : null}\n      {IconNode && <IconContainer iconPosition={iconPosition}>{IconNode}</IconContainer>}\n      {iconPosition === \"left\" ? <ContentContainer>{children}</ContentContainer> : null}\n    </Base>\n  );\n};\nconst ButtonWithRef = React.forwardRef(Button) as unknown as typeof Button;\n\nexport type ButtonExpandProps = React.PropsWithChildren<\n  ButtonProps & {\n    onToggle?: (arg0: boolean) => void;\n  }\n>;\n\nconst StyledButtonExpand = styled(ButtonWithRef).attrs((props) => ({\n  Icon: props.Icon != null || ChevronBottom,\n  iconPosition: props.iconPosition || \"right\",\n}))<{ expanded: boolean }>`\n  ${IconContainer} {\n    transition: transform 0.25s;\n    ${(p) => (p.expanded ? \"transform: rotate(180deg)\" : \"\")}\n  }\n`;\nexport function ButtonExpand(\n  { onToggle, onClick, ...props }: ButtonExpandProps,\n  ref?: React.ForwardedRef<HTMLButtonElement>,\n): React.ReactElement {\n  const [expanded, setExpanded] = useState(false);\n  return (\n    <StyledButtonExpand\n      {...props}\n      ref={ref}\n      expanded={expanded}\n      onClick={(event: React.SyntheticEvent<HTMLButtonElement>) => {\n        setExpanded((expanded) => !expanded);\n        onToggle != null && onToggle(!expanded);\n        onClick != null && onClick(event);\n      }}\n    />\n  );\n}\n\nexport const buttonSizeStyle: {\n  [index: string]: {\n    padding: string;\n    height: string;\n  };\n} = {\n  small: {\n    padding: \"0 20px\",\n    height: \"32px\",\n  },\n  medium: {\n    padding: \"0 24px\",\n    height: \"40px\",\n  },\n  large: {\n    padding: \"0 28px\",\n    height: \"48px\",\n  },\n};\n\nButton.Unstyled = ButtonUnstyled;\nButton.Expand = React.forwardRef(ButtonExpand);\nButtonWithRef.Unstyled = Button.Unstyled;\nButtonWithRef.Expand = Button.Expand;\nexport default ButtonWithRef;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyC;AACzC,+BAAyC;AACzC,oBAA4C;AAC5C,2BAAwD;AACxD,wBAAuB;AACvB,mBAA0B;AAC1B,qBAAqB;AACrB,kCAA0B;AAC1B,kBAA0B;AA0B1B,MAAM,gBAAgB,iCAAO;AAAA;AAAA,IAIzB,CAAC,MAAM,GAAG,EAAE,iBAAiB,SAAS,iBAAiB,kBAAkB,EAAE,MAAM,MAAM;AAAA;AAAA;AAI3F,MAAM,mBAAmB,CAAC,MAA+B;AAAA,EACvD,MAAM;AAAA,IACJ,SAAS;AAAA,wBACW,EAAE,MAAM,OAAO,QAAQ;AAAA,iBAC9B,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,8BAGV,yBAAK,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA;AAAA;AAAA,8BAGlC,yBAAK,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA;AAAA;AAAA,IAG5D,QAAQ;AAAA,iBACK,EAAE,MAAM,OAAO,QAAQ;AAAA,4BACZ,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA,8BAErB,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,EAInD,OAAO;AAAA,sBACa,EAAE,MAAM,OAAO,QAAQ;AAAA,eAC9B,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA,wBAEd,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,4BAInB,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,4BAIvB,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,EAGjD,OAAO;AAAA,IACL,SAAS;AAAA,sBACS,EAAE,MAAM,OAAO,MAAM;AAAA,eAC5B,EAAE,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,4BAGR,yBAAK,EAAE,MAAM,OAAO,MAAM,MAAM;AAAA;AAAA;AAAA,4BAGhC,yBAAK,EAAE,MAAM,OAAO,MAAM,MAAM;AAAA;AAAA;AAAA,IAGxD,QAAQ;AAAA,eACG,EAAE,MAAM,OAAO,QAAQ;AAAA,0BACZ,EAAE,MAAM,OAAO,MAAM;AAAA;AAAA,4BAEnB,EAAE,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA,EAI/C,SAAS;AAAA,aACE,EAAE,MAAM,OAAO,QAAQ;AAAA,wBACZ,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA,0BAErB,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,EAG/C,OAAO;AAAA,IACL,SAAS;AAAA,sBACS,EAAE,MAAM,OAAO,QAAQ;AAAA,eAC9B,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,4BAGV,yBAAK,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA;AAAA;AAAA,4BAGlC,yBAAK,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA;AAAA;AAAA,IAG1D,QAAQ;AAAA,eACG,EAAE,MAAM,OAAO,QAAQ;AAAA,0BACZ,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA,4BAErB,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,EAIjD,UAAU;AAAA,IACR,SAAS;AAAA,wBACW,EAAE,MAAM,OAAO,QAAQ;AAAA,iBAC9B,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,IAGpC,QAAQ;AAAA,iBACK,EAAE,MAAM,OAAO,QAAQ;AAAA,4BACZ,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,EAGjD,SAAS;AAAA,aACE,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ7B,MAAM,iBAAiB,sBAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlC,MAAM,OAAO,sBAAW,OAAO,MAAM,CAAC,MAAkB;AAAA,EAC7D,YAAY;AAAA,EACZ,UAAU,EAAE,YAAY;AAAA;AAAA;AAAA;AAAA,mBAIP,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA,kBAEtB,CAAC,MAAO,EAAE,WAAW,EAAE,YAAY,UAAU,IAAI;AAAA;AAAA,IAE/D,kCAAQ,2BAAY,+BAAU;AAAA,iBACjB,CAAC,MAAM,EAAE,MAAM,UAAU,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMxC,CAAC,MAAM,gBAAgB,EAAE,QAAQ;AAAA;AAAA,iBAEpB,CAAC,MAAO,EAAE,aAAa,EAAE,aAAa;AAAA;AAAA;AAAA,YAG3C,CAAC,MAAO,EAAE,WAAW,YAAY;AAAA;AAAA,4BAEjB,CAAC,MAAM,yBAAK,EAAE,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA,4BAGxC,CAAC,MAAM,yBAAK,EAAE,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA,IAGhE,CAAC,MAAM;AACP,QAAM,WAAW,iBAAiB;AAClC,MAAI,EAAE,UAAU;AACd,WAAO,EAAE,WAAW,EAAE,YAAY,UAC9B,SAAS,SAAS,UAClB,SAAS,SAAS;AAAA;AAGxB,QAAM,UACJ,EAAE,WAAY;AAChB,UAAQ;AAAA,SACD;AACH,aAAO,EAAE,UAAU,SAAS,KAAK,UAAU,SAAS,KAAK;AAAA,SACtD;AACH,aAAO,SAAS;AAAA,SAEb;AACH,aAAO,EAAE,UAAU,SAAS,MAAM,UAAU,SAAS,MAAM;AAAA,SAExD;AACH,aAAO,EAAE,UAAU,SAAS,MAAM,UAAU,SAAS,MAAM;AAAA,SAExD;AACH,aAAO,SAAS;AAAA,SAEb;AAAA;AAEH,aAAO,SAAS;AAAA;AAAA;AAAA,IAGpB,CAAC,MACD,EAAE,aACE;AAAA,mBACW,EAAE,MAAM,MAAM;AAAA;AAAA,YAErB;AAAA;AAAA;AAAA,YAIJ;AAAA,IACJ,CAAC,MAAM,EAAE,MAAM,WAAW,CAAC,oBAAoB,SAAS,gBAAgB,eAAe;AAAA;AAG3F,MAAM,mBAAmB,iCAAO;AAEhC,MAAM,SAAS,CACb;AAAA,EACE;AAAA,EACA,eAAe;AAAA,EACf,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,KACG;AAAA,GAEL,QACuB;AACvB,QAAM,eAAe,YAAY,uBAAU,MAAM,YAAY;AAC7D,QAAM,WAAW,0BACf,MACG,YAAY,mDAAC,qBAAD;AAAA,IAAe,MAAM;AAAA,IAAU,MAAM;AAAA,QACjD,QAAQ,mDAAC,MAAD;AAAA,IAAM,MAAM;AAAA,MACvB,CAAC,UAAU,cAAc;AAG3B,SACE,mDAAC,MAAD;AAAA,OAAU;AAAA,IAAO;AAAA,IAAU,YAAY,CAAE,SAAQ,SAAS,CAAC;AAAA,IAAU;AAAA,KAClE,iBAAiB,UAAU,mDAAC,kBAAD,MAAmB,YAA+B,MAC7E,YAAY,mDAAC,eAAD;AAAA,IAAe;AAAA,KAA6B,WACxD,iBAAiB,SAAS,mDAAC,kBAAD,MAAmB,YAA+B;AAAA;AAInF,MAAM,gBAAgB,qBAAM,WAAW;AAQvC,MAAM,qBAAqB,sCAAO,eAAe,MAAM,CAAC,UAAW;AAAA,EACjE,MAAM,MAAM,QAAQ,QAAQ;AAAA,EAC5B,cAAc,MAAM,gBAAgB;AAAA;AAAA,IAElC;AAAA;AAAA,MAEE,CAAC,MAAO,EAAE,WAAW,8BAA8B;AAAA;AAAA;AAGlD,sBACL,EAAE,UAAU,YAAY,SACxB,KACoB;AACpB,QAAM,CAAC,UAAU,eAAe,2BAAS;AACzC,SACE,mDAAC,oBAAD;AAAA,OACM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS,CAAC,UAAmD;AAC3D,kBAAY,CAAC,cAAa,CAAC;AAC3B,kBAAY,QAAQ,SAAS,CAAC;AAC9B,iBAAW,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAM5B,MAAM,kBAKT;AAAA,EACF,OAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA;AAAA,EAEV,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,QAAQ;AAAA;AAAA,EAEV,OAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA;AAAA;AAIZ,OAAO,WAAW;AAClB,OAAO,SAAS,qBAAM,WAAW;AACjC,cAAc,WAAW,OAAO;AAChC,cAAc,SAAS,OAAO;AAC9B,IAAO,iBAAQ;",
   "names": []
 }

package/lib/cjs/components/form/Checkbox/Checkbox.js CHANGED Viewed

@@ -29,7 +29,7 @@ var import_styled_components = __toModule(require("styled-components"));
 var import_Text = __toModule(require("../../asorted/Text"));
 var import_CheckAloneRegular = __toModule(require("@ledgerhq/icons-ui/react/CheckAloneRegular"));
 var import_server = __toModule(require("react-dom/server"));
-const Icon = () => import_react.default.cloneElement((0, import_CheckAloneRegular.default)({ size: 13, color: "white" }), {
+const Icon = () => import_react.default.cloneElement((0, import_CheckAloneRegular.default)({ size: 13, color: "currentColor" }), {
   xmlns: "http://www.w3.org/2000/svg"
 });
 const CheckMarkIcon = encodeURIComponent((0, import_server.renderToStaticMarkup)(/* @__PURE__ */ import_react.default.createElement(Icon, null)));
@@ -55,6 +55,7 @@ const Input = import_styled_components.default.input`
     width: ${(p) => p.theme.space[7]}px;
     height: ${(p) => p.theme.space[7]}px;
     display: inline-block;
+    color: ${(props) => props.theme.colors.neutral.c00};
     background-image: url("data:image/svg+xml,${CheckMarkIcon}");
     background-position: center;
@@ -113,14 +114,14 @@ const Checkbox = ({
   onChange
 }) => /* @__PURE__ */ import_react.default.createElement(Container, {
   "data-variant": variant,
-  "data-disabled": isDisabled
+  "data-disabled": isDisabled,
+  onClick: () => onChange(!isChecked)
 }, /* @__PURE__ */ import_react.default.createElement(Input, {
   type: "checkbox",
   name,
   id: name,
   checked: isChecked,
-  disabled: isDisabled,
-  onChange
+  disabled: isDisabled
 }), label ? /* @__PURE__ */ import_react.default.createElement(Label, {
   as: "label",
   htmlFor: name

package/lib/cjs/components/form/Checkbox/Checkbox.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/Checkbox/Checkbox.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport CheckAloneRegular from \"@ledgerhq/icons-ui/react/CheckAloneRegular\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\n\nconst Icon = () =>\n  React.cloneElement(CheckAloneRegular({ size: 13, color: \"white\" }), {\n    // the xmlns attribute is required to properly display the checkbox\n    xmlns: \"http://www.w3.org/2000/svg\",\n  });\nconst CheckMarkIcon = encodeURIComponent(renderToStaticMarkup(<Icon />));\n\nconst Input = styled.input`\n  background-color: transparent;\n\n  border-radius: ${(p) => `${p.theme.radii[1]}px`};\n  position: relative;\n\n  min-width: ${(p) => p.theme.space[7]}px;\n  height: ${(p) => p.theme.space[7]}px;\n  appearance: none;\n  border: 1px solid ${(props) => props.theme.colors.neutral.c90};\n  box-shadow: none;\n\n  &:checked {\n    background-color: currentColor;\n    border-color: currentColor;\n  }\n\n  &:checked::after {\n    content: \" \";\n    width: ${(p) => p.theme.space[7]}px;\n    height: ${(p) => p.theme.space[7]}px;\n    display: inline-block;\n\n    background-image: url(\"data:image/svg+xml,${CheckMarkIcon}\");\n    background-position: center;\n    background-repeat: no-repeat;\n\n    /* Trick to center the check mark by taking into account the border */\n    position: absolute;\n    top: -1px;\n    left: -1px;\n  }\n`;\n\nconst Label = styled(Text).attrs({ type: \"body\", fontWeight: \"500\" })`\n  color: ${(props) => props.theme.colors.neutral.c80};\n\n  /* Version when the input is checked */\n  ${Input}:checked + & {\n    color: currentColor;\n  }\n\n  &:first-letter {\n    text-transform: uppercase;\n  }\n`;\n\nconst Container = styled.div`\n  --ll-checkbox-color: unset;\n  color: var(--ll-checkbox-color, ${(props) => props.theme.colors.primary.c90});\n\n  display: inline-flex;\n  column-gap: ${(p) => p.theme.space[5]}px;\n  align-items: center;\n  cursor: pointer;\n\n  &[data-variant=\"default\"] {\n    --ll-checkbox-color: ${(props) => props.theme.colors.primary.c90};\n  }\n\n  &[data-variant=\"success\"] {\n    --ll-checkbox-color: ${(props) => props.theme.colors.success.c100};\n  }\n\n  &[data-variant=\"error\"] {\n    --ll-checkbox-color: ${(props) => props.theme.colors.error.c100};\n  }\n\n  &[data-disabled=\"true\"] {\n    --ll-checkbox-color: ${(props) => props.theme.colors.neutral.c80};\n    cursor: unset;\n  }\n`;\n\nexport type CheckboxProps = {\n  isDisabled?: boolean;\n  isChecked: boolean;\n  variant?: \"default\" | \"success\" | \"error\";\n  label?: React.ReactNode;\n  name: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n};\n\nconst Checkbox = ({\n  isDisabled = false,\n  variant = \"default\",\n  label,\n  isChecked,\n  name,\n  onChange,\n}: CheckboxProps): JSX.Element => (\n  <Container data-variant={variant} data-disabled={isDisabled}>\n    <Input\n      type=\"checkbox\"\n      name={name}\n      id={name}\n      checked={isChecked}\n      disabled={isDisabled}\n      onChange={onChange}\n    />\n    {label ? (\n      <Label as=\"label\" htmlFor={name}>\n        {label}\n      </Label>\n    ) : null}\n  </Container>\n);\n\nexport default Checkbox;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AACjB,+BAA8B;AAC9B,oBAAqC;AAErC,MAAM,OAAO,MACX,qBAAM,aAAa,sCAAkB,EAAE,MAAM,IAAI,OAAO,YAAY;AAAA,EAElE,OAAO;AAAA;AAEX,MAAM,gBAAgB,mBAAmB,wCAAqB,mDAAC,MAAD;AAE9D,MAAM,QAAQ,iCAAO;AAAA;AAAA;AAAA,mBAGF,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA,eAG5B,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA,YACxB,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA,sBAEX,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAU/C,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA,cACpB,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA,gDAGa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWhD,MAAM,QAAQ,sCAAO,qBAAM,MAAM,EAAE,MAAM,QAAQ,YAAY;AAAA,WAClD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,IAG7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASJ,MAAM,YAAY,iCAAO;AAAA;AAAA,oCAEW,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,gBAG1D,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKV,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,2BAItC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,2BAItC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA,2BAIpC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAcjE,MAAM,WAAW,CAAC;AAAA,EAChB,aAAa;AAAA,EACb,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAEA,mDAAC,WAAD;AAAA,EAAW,gBAAc;AAAA,EAAS,iBAAe;AAAA,GAC/C,mDAAC,OAAD;AAAA,EACE,MAAK;AAAA,EACL;AAAA,EACA,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,UAAU;AAAA,EACV;AAAA,IAED,QACC,mDAAC,OAAD;AAAA,EAAO,IAAG;AAAA,EAAQ,SAAS;AAAA,GACxB,SAED;AAIR,IAAO,mBAAQ;",
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport CheckAloneRegular from \"@ledgerhq/icons-ui/react/CheckAloneRegular\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\n\nconst Icon = () =>\n  React.cloneElement(CheckAloneRegular({ size: 13, color: \"currentColor\" }), {\n    // the xmlns attribute is required to properly display the checkbox\n    xmlns: \"http://www.w3.org/2000/svg\",\n  });\nconst CheckMarkIcon = encodeURIComponent(renderToStaticMarkup(<Icon />));\n\nconst Input = styled.input`\n  background-color: transparent;\n\n  border-radius: ${(p) => `${p.theme.radii[1]}px`};\n  position: relative;\n\n  min-width: ${(p) => p.theme.space[7]}px;\n  height: ${(p) => p.theme.space[7]}px;\n  appearance: none;\n  border: 1px solid ${(props) => props.theme.colors.neutral.c90};\n  box-shadow: none;\n\n  &:checked {\n    background-color: currentColor;\n    border-color: currentColor;\n  }\n\n  &:checked::after {\n    content: \" \";\n    width: ${(p) => p.theme.space[7]}px;\n    height: ${(p) => p.theme.space[7]}px;\n    display: inline-block;\n    color: ${(props) => props.theme.colors.neutral.c00};\n\n    background-image: url(\"data:image/svg+xml,${CheckMarkIcon}\");\n    background-position: center;\n    background-repeat: no-repeat;\n\n    /* Trick to center the check mark by taking into account the border */\n    position: absolute;\n    top: -1px;\n    left: -1px;\n  }\n`;\n\nconst Label = styled(Text).attrs({ type: \"body\", fontWeight: \"500\" })`\n  color: ${(props) => props.theme.colors.neutral.c80};\n\n  /* Version when the input is checked */\n  ${Input}:checked + & {\n    color: currentColor;\n  }\n\n  &:first-letter {\n    text-transform: uppercase;\n  }\n`;\n\nconst Container = styled.div`\n  --ll-checkbox-color: unset;\n  color: var(--ll-checkbox-color, ${(props) => props.theme.colors.primary.c90});\n\n  display: inline-flex;\n  column-gap: ${(p) => p.theme.space[5]}px;\n  align-items: center;\n  cursor: pointer;\n\n  &[data-variant=\"default\"] {\n    --ll-checkbox-color: ${(props) => props.theme.colors.primary.c90};\n  }\n\n  &[data-variant=\"success\"] {\n    --ll-checkbox-color: ${(props) => props.theme.colors.success.c100};\n  }\n\n  &[data-variant=\"error\"] {\n    --ll-checkbox-color: ${(props) => props.theme.colors.error.c100};\n  }\n\n  &[data-disabled=\"true\"] {\n    --ll-checkbox-color: ${(props) => props.theme.colors.neutral.c80};\n    cursor: unset;\n  }\n`;\n\nexport type CheckboxProps = {\n  isDisabled?: boolean;\n  isChecked: boolean;\n  variant?: \"default\" | \"success\" | \"error\";\n  label?: React.ReactNode;\n  name: string;\n  onChange: (value: boolean) => void;\n};\n\nconst Checkbox = ({\n  isDisabled = false,\n  variant = \"default\",\n  label,\n  isChecked,\n  name,\n  onChange,\n}: CheckboxProps): JSX.Element => (\n  <Container data-variant={variant} data-disabled={isDisabled} onClick={() => onChange(!isChecked)}>\n    <Input type=\"checkbox\" name={name} id={name} checked={isChecked} disabled={isDisabled} />\n    {label ? (\n      <Label as=\"label\" htmlFor={name}>\n        {label}\n      </Label>\n    ) : null}\n  </Container>\n);\n\nexport default Checkbox;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AACjB,+BAA8B;AAC9B,oBAAqC;AAErC,MAAM,OAAO,MACX,qBAAM,aAAa,sCAAkB,EAAE,MAAM,IAAI,OAAO,mBAAmB;AAAA,EAEzE,OAAO;AAAA;AAEX,MAAM,gBAAgB,mBAAmB,wCAAqB,mDAAC,MAAD;AAE9D,MAAM,QAAQ,iCAAO;AAAA;AAAA;AAAA,mBAGF,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA,eAG5B,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA,YACxB,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA,sBAEX,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAU/C,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA,cACpB,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA,aAEtB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,gDAEH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWhD,MAAM,QAAQ,sCAAO,qBAAM,MAAM,EAAE,MAAM,QAAQ,YAAY;AAAA,WAClD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,IAG7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASJ,MAAM,YAAY,iCAAO;AAAA;AAAA,oCAEW,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,gBAG1D,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKV,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,2BAItC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,2BAItC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA,2BAIpC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAcjE,MAAM,WAAW,CAAC;AAAA,EAChB,aAAa;AAAA,EACb,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAEA,mDAAC,WAAD;AAAA,EAAW,gBAAc;AAAA,EAAS,iBAAe;AAAA,EAAY,SAAS,MAAM,SAAS,CAAC;AAAA,GACpF,mDAAC,OAAD;AAAA,EAAO,MAAK;AAAA,EAAW;AAAA,EAAY,IAAI;AAAA,EAAM,SAAS;AAAA,EAAW,UAAU;AAAA,IAC1E,QACC,mDAAC,OAAD;AAAA,EAAO,IAAG;AAAA,EAAQ,SAAS;AAAA,GACxB,SAED;AAIR,IAAO,mBAAQ;",
   "names": []
 }

package/lib/cjs/components/layout/Drawer/index.js CHANGED Viewed

@@ -35,6 +35,7 @@ var import_ArrowLeftRegular = __toModule(require("@ledgerhq/icons-ui/react/Arrow
 var import_TransitionSlide = __toModule(require("../../transitions/TransitionSlide"));
 var import_TransitionInOut = __toModule(require("../../transitions/TransitionInOut"));
 var import_Text = __toModule(require("../../asorted/Text"));
+var import_Button = __toModule(require("../../cta/Button"));
 var Direction;
 (function(Direction2) {
   Direction2["Left"] = "left";
@@ -70,13 +71,7 @@ const ScrollWrapper = (0, import_styled_components.default)(import_Flex.default)
   }
 `;
 const ButtonPlaceholder = import_styled_components.default.div`
-  min-width: ${(p) => p.theme.space[13]}px;
-`;
-const Button = import_styled_components.default.button`
-  background: unset;
-  border: unset;
-  cursor: pointer;
-  color: ${(p) => p.theme.colors.neutral.c100};
+  min-width: ${(p) => p.theme.space[12]}px;
 `;
 const DrawerContent = import_react.default.forwardRef(({
   isOpen,
@@ -136,19 +131,21 @@ const DrawerContent = import_react.default.forwardRef(({
     p: 12,
     pb: 10,
     ...extraHeaderProps
-  }, !hideNavigation && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, onBack != null ? /* @__PURE__ */ import_react.default.createElement(Button, {
-    onClick: onBack
-  }, /* @__PURE__ */ import_react.default.createElement(import_ArrowLeftRegular.default, {
-    size: 21
-  })) : /* @__PURE__ */ import_react.default.createElement(ButtonPlaceholder, null)), /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
+  }, !hideNavigation && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, onBack != null ? /* @__PURE__ */ import_react.default.createElement(import_Button.default, {
+    variant: "neutral",
+    onClick: onBack,
+    Icon: import_ArrowLeftRegular.default
+  }) : /* @__PURE__ */ import_react.default.createElement(ButtonPlaceholder, null)), /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
     variant: "h3",
     flex: 1,
     textAlign: "center"
   }, title) || /* @__PURE__ */ import_react.default.createElement("div", null), /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
     alignSelf: "flex-start"
-  }, /* @__PURE__ */ import_react.default.createElement(Button, {
-    onClick: onClose
-  }, /* @__PURE__ */ import_react.default.createElement(import_CloseMedium.default, null)))), /* @__PURE__ */ import_react.default.createElement(ScrollWrapper, {
+  }, /* @__PURE__ */ import_react.default.createElement(import_Button.default, {
+    variant: "neutral",
+    onClick: onClose,
+    Icon: import_CloseMedium.default
+  }))), /* @__PURE__ */ import_react.default.createElement(ScrollWrapper, {
     flexDirection: "column",
     alignItems: "stretch",
     overflow: "scroll",

package/lib/cjs/components/layout/Drawer/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/layout/Drawer/index.tsx"],
-  "sourcesContent": ["import React, { useCallback } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport styled from \"styled-components\";\nimport FlexBox, { FlexBoxProps } from \"../Flex\";\nimport Divider, { Props as DividerProps } from \"../../asorted/Divider\";\nimport Close from \"@ledgerhq/icons-ui/react/CloseMedium\";\nimport ArrowLeft from \"@ledgerhq/icons-ui/react/ArrowLeftRegular\";\nimport TransitionSlide from \"../../transitions/TransitionSlide\";\nimport TransitionInOut from \"../../transitions/TransitionInOut\";\nimport Text from \"../../asorted/Text\";\n\nexport enum Direction {\n  Left = \"left\",\n  Right = \"right\",\n}\n\nconst Container = styled(FlexBox)`\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n`;\n\nconst Wrapper = styled(FlexBox)<{\n  big?: boolean;\n}>`\n  height: 100%;\n  width: ${(p) =>\n    p.big ? p.theme.sizes.drawer.side.big.width : p.theme.sizes.drawer.side.small.width}px;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: space-between;\n  z-index: ${(p) => p.theme.zIndexes[8]};\n`;\nconst Overlay = styled.div<{ direction: Direction }>`\n  display: flex;\n  position: fixed;\n  justify-content: ${(p) => (p.direction === Direction.Left ? \"flex-end\" : \"flex-start\")};\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: 999;\n  background-color: ${(p) => p.theme.colors.constant.overlay};\n`;\nconst ScrollWrapper = styled(FlexBox)`\n  &::-webkit-scrollbar {\n    display: none;\n  }\n`;\nconst ButtonPlaceholder = styled.div`\n  min-width: ${(p) => p.theme.space[13]}px;\n`;\nconst Button = styled.button`\n  background: unset;\n  border: unset;\n  cursor: pointer;\n  color: ${(p) => p.theme.colors.neutral.c100};\n`;\n\nexport interface DrawerProps {\n  isOpen: boolean;\n  children: React.ReactNode;\n  title?: React.ReactNode;\n  footer?: React.ReactNode;\n  big?: boolean;\n  ignoreBackdropClick?: boolean;\n  backgroundColor?: string;\n  onClose: () => void;\n  onBack?: () => void;\n  setTransitionsEnabled?: (arg0: boolean) => void;\n  hideNavigation?: boolean;\n  menuPortalTarget?: Element | null;\n  direction?: Direction;\n  extraContainerProps?: Partial<FlexBoxProps>;\n  extraHeaderProps?: Partial<FlexBoxProps>;\n  extraFooterProps?: Partial<FlexBoxProps>;\n  extraFooterDividerProps?: Partial<DividerProps>;\n}\n\nconst DrawerContent = React.forwardRef(\n  (\n    {\n      isOpen,\n      title,\n      children,\n      footer,\n      big,\n      onClose,\n      backgroundColor,\n      setTransitionsEnabled = () => 0,\n      onBack,\n      extraContainerProps,\n      extraHeaderProps,\n      extraFooterProps,\n      extraFooterDividerProps,\n      ignoreBackdropClick = false,\n      hideNavigation = true,\n      direction = Direction.Left,\n    }: DrawerProps,\n    ref?: React.ForwardedRef<HTMLDivElement>,\n  ) => {\n    const disableChildAnimations = useCallback(\n      () => setTransitionsEnabled(false),\n      [setTransitionsEnabled],\n    );\n    const enableChildAnimations = useCallback(\n      () => setTransitionsEnabled(true),\n      [setTransitionsEnabled],\n    );\n\n    const handleBackdropClick = useCallback(() => {\n      if (!ignoreBackdropClick) {\n        onClose();\n      }\n    }, [onClose, ignoreBackdropClick]);\n\n    const stopClickPropagation = useCallback((e: React.MouseEvent) => {\n      e.stopPropagation();\n    }, []);\n\n    return (\n      <TransitionInOut\n        in={isOpen}\n        appear\n        mountOnEnter\n        unmountOnExit\n        onEntering={disableChildAnimations}\n        onEntered={enableChildAnimations}\n        onExiting={disableChildAnimations}\n      >\n        <Overlay direction={direction} onClick={handleBackdropClick} ref={ref}>\n          <TransitionSlide\n            in={isOpen}\n            direction={direction}\n            fixed\n            reverseExit\n            appear\n            mountOnEnter\n            unmountOnExit\n          >\n            <Wrapper\n              big={big}\n              onClick={stopClickPropagation}\n              backgroundColor={backgroundColor ?? \"background.main\"}\n            >\n              <Container>\n                <FlexBox\n                  justifyContent=\"space-between\"\n                  alignItems=\"center\"\n                  p={12}\n                  pb={10}\n                  {...extraHeaderProps}\n                >\n                  {!hideNavigation && (\n                    <>\n                      {onBack != null ? (\n                        <Button onClick={onBack}>\n                          <ArrowLeft size={21} />\n                        </Button>\n                      ) : (\n                        <ButtonPlaceholder />\n                      )}\n                    </>\n                  )}\n                  {(\n                    <Text variant={\"h3\"} flex={1} textAlign=\"center\">\n                      {title}\n                    </Text>\n                  ) || <div />}\n                  <FlexBox alignSelf=\"flex-start\">\n                    <Button onClick={onClose}>\n                      <Close />\n                    </Button>\n                  </FlexBox>\n                </FlexBox>\n                <ScrollWrapper\n                  flexDirection=\"column\"\n                  alignItems=\"stretch\"\n                  overflow=\"scroll\"\n                  position=\"relative\"\n                  p={12}\n                  pt={0}\n                  flex={1}\n                  {...extraContainerProps}\n                >\n                  {children}\n                </ScrollWrapper>\n                {footer && (\n                  <>\n                    <Divider variant=\"light\" {...extraFooterDividerProps} />\n                    <FlexBox alignItems=\"center\" py={8} px={12} {...extraFooterProps}>\n                      {footer}\n                    </FlexBox>\n                  </>\n                )}\n              </Container>\n            </Wrapper>\n          </TransitionSlide>\n        </Overlay>\n      </TransitionInOut>\n    );\n  },\n);\n\nconst Drawer = (\n  { children, menuPortalTarget, ...sideProps }: DrawerProps,\n  ref?: React.ForwardedRef<HTMLDivElement>,\n): React.ReactElement => {\n  const $root = React.useMemo(\n    () =>\n      menuPortalTarget === undefined && typeof document !== undefined\n        ? document.querySelector(\"body\")\n        : menuPortalTarget,\n    [menuPortalTarget],\n  );\n  if (!$root) {\n    return (\n      <DrawerContent ref={ref} {...sideProps}>\n        {children}\n      </DrawerContent>\n    );\n  } else {\n    return ReactDOM.createPortal(\n      <DrawerContent ref={ref} {...sideProps}>\n        {children}\n      </DrawerContent>,\n      $root,\n    );\n  }\n};\n\nexport default React.forwardRef(Drawer);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AACnC,uBAAqB;AACrB,+BAAmB;AACnB,kBAAsC;AACtC,qBAA+C;AAC/C,yBAAkB;AAClB,8BAAsB;AACtB,6BAA4B;AAC5B,6BAA4B;AAC5B,kBAAiB;AAEV,IAAK;AAAL,UAAK,YAAL;AACL,uBAAO;AACP,wBAAQ;AAAA,GAFE;AAKZ,MAAM,YAAY,sCAAO;AAAA;AAAA;AAAA;AAAA;AAMzB,MAAM,UAAU,sCAAO;AAAA;AAAA,WAIZ,CAAC,MACR,EAAE,MAAM,EAAE,MAAM,MAAM,OAAO,KAAK,IAAI,QAAQ,EAAE,MAAM,MAAM,OAAO,KAAK,MAAM;AAAA;AAAA;AAAA;AAAA,aAIrE,CAAC,MAAM,EAAE,MAAM,SAAS;AAAA;AAErC,MAAM,UAAU,iCAAO;AAAA;AAAA;AAAA,qBAGF,CAAC,MAAO,EAAE,cAAc,UAAU,OAAO,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMrD,CAAC,MAAM,EAAE,MAAM,OAAO,SAAS;AAAA;AAErD,MAAM,gBAAgB,sCAAO;AAAA;AAAA;AAAA;AAAA;AAK7B,MAAM,oBAAoB,iCAAO;AAAA,eAClB,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAEpC,MAAM,SAAS,iCAAO;AAAA;AAAA;AAAA;AAAA,WAIX,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAuBzC,MAAM,gBAAgB,qBAAM,WAC1B,CACE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,wBAAwB,MAAM;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,sBAAsB;AAAA,EACtB,iBAAiB;AAAA,EACjB,YAAY,UAAU;AAAA,GAExB,QACG;AACH,QAAM,yBAAyB,8BAC7B,MAAM,sBAAsB,QAC5B,CAAC;AAEH,QAAM,wBAAwB,8BAC5B,MAAM,sBAAsB,OAC5B,CAAC;AAGH,QAAM,sBAAsB,8BAAY,MAAM;AAC5C,QAAI,CAAC,qBAAqB;AACxB;AAAA;AAAA,KAED,CAAC,SAAS;AAEb,QAAM,uBAAuB,8BAAY,CAAC,MAAwB;AAChE,MAAE;AAAA,KACD;AAEH,SACE,mDAAC,gCAAD;AAAA,IACE,IAAI;AAAA,IACJ,QAAM;AAAA,IACN,cAAY;AAAA,IACZ,eAAa;AAAA,IACb,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,WAAW;AAAA,KAEX,mDAAC,SAAD;AAAA,IAAS;AAAA,IAAsB,SAAS;AAAA,IAAqB;AAAA,KAC3D,mDAAC,gCAAD;AAAA,IACE,IAAI;AAAA,IACJ;AAAA,IACA,OAAK;AAAA,IACL,aAAW;AAAA,IACX,QAAM;AAAA,IACN,cAAY;AAAA,IACZ,eAAa;AAAA,KAEb,mDAAC,SAAD;AAAA,IACE;AAAA,IACA,SAAS;AAAA,IACT,iBAAiB,mBAAmB;AAAA,KAEpC,mDAAC,WAAD,MACE,mDAAC,qBAAD;AAAA,IACE,gBAAe;AAAA,IACf,YAAW;AAAA,IACX,GAAG;AAAA,IACH,IAAI;AAAA,OACA;AAAA,KAEH,CAAC,kBACA,wFACG,UAAU,OACT,mDAAC,QAAD;AAAA,IAAQ,SAAS;AAAA,KACf,mDAAC,iCAAD;AAAA,IAAW,MAAM;AAAA,QAGnB,mDAAC,mBAAD,QAKJ,mDAAC,qBAAD;AAAA,IAAM,SAAS;AAAA,IAAM,MAAM;AAAA,IAAG,WAAU;AAAA,KACrC,UAEA,mDAAC,OAAD,OACL,mDAAC,qBAAD;AAAA,IAAS,WAAU;AAAA,KACjB,mDAAC,QAAD;AAAA,IAAQ,SAAS;AAAA,KACf,mDAAC,4BAAD,UAIN,mDAAC,eAAD;AAAA,IACE,eAAc;AAAA,IACd,YAAW;AAAA,IACX,UAAS;AAAA,IACT,UAAS;AAAA,IACT,GAAG;AAAA,IACH,IAAI;AAAA,IACJ,MAAM;AAAA,OACF;AAAA,KAEH,WAEF,UACC,wFACE,mDAAC,wBAAD;AAAA,IAAS,SAAQ;AAAA,OAAY;AAAA,MAC7B,mDAAC,qBAAD;AAAA,IAAS,YAAW;AAAA,IAAS,IAAI;AAAA,IAAG,IAAI;AAAA,OAAQ;AAAA,KAC7C;AAAA;AAavB,MAAM,SAAS,CACb,EAAE,UAAU,qBAAqB,aACjC,QACuB;AACvB,QAAM,QAAQ,qBAAM,QAClB,MACE,qBAAqB,UAAa,OAAO,aAAa,SAClD,SAAS,cAAc,UACvB,kBACN,CAAC;AAEH,MAAI,CAAC,OAAO;AACV,WACE,mDAAC,eAAD;AAAA,MAAe;AAAA,SAAc;AAAA,OAC1B;AAAA,SAGA;AACL,WAAO,yBAAS,aACd,mDAAC,eAAD;AAAA,MAAe;AAAA,SAAc;AAAA,OAC1B,WAEH;AAAA;AAAA;AAKN,IAAO,iBAAQ,qBAAM,WAAW;",
+  "sourcesContent": ["import React, { useCallback } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport styled from \"styled-components\";\nimport FlexBox, { FlexBoxProps } from \"../Flex\";\nimport Divider, { Props as DividerProps } from \"../../asorted/Divider\";\nimport Close from \"@ledgerhq/icons-ui/react/CloseMedium\";\nimport ArrowLeft from \"@ledgerhq/icons-ui/react/ArrowLeftRegular\";\n\nimport TransitionSlide from \"../../transitions/TransitionSlide\";\nimport TransitionInOut from \"../../transitions/TransitionInOut\";\nimport Text from \"../../asorted/Text\";\nimport Button from \"../../cta/Button\";\n\nexport enum Direction {\n  Left = \"left\",\n  Right = \"right\",\n}\n\nconst Container = styled(FlexBox)`\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n`;\n\nconst Wrapper = styled(FlexBox)<{\n  big?: boolean;\n}>`\n  height: 100%;\n  width: ${(p) =>\n    p.big ? p.theme.sizes.drawer.side.big.width : p.theme.sizes.drawer.side.small.width}px;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: space-between;\n  z-index: ${(p) => p.theme.zIndexes[8]};\n`;\n\nconst Overlay = styled.div<{ direction: Direction }>`\n  display: flex;\n  position: fixed;\n  justify-content: ${(p) => (p.direction === Direction.Left ? \"flex-end\" : \"flex-start\")};\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: 999;\n  background-color: ${(p) => p.theme.colors.constant.overlay};\n`;\n\nconst ScrollWrapper = styled(FlexBox)`\n  &::-webkit-scrollbar {\n    display: none;\n  }\n`;\n\nconst ButtonPlaceholder = styled.div`\n  min-width: ${(p) => p.theme.space[12]}px;\n`;\n\nexport interface DrawerProps {\n  isOpen: boolean;\n  children: React.ReactNode;\n  title?: React.ReactNode;\n  footer?: React.ReactNode;\n  big?: boolean;\n  ignoreBackdropClick?: boolean;\n  backgroundColor?: string;\n  onClose: () => void;\n  onBack?: () => void;\n  setTransitionsEnabled?: (arg0: boolean) => void;\n  hideNavigation?: boolean;\n  menuPortalTarget?: Element | null;\n  direction?: Direction;\n  extraContainerProps?: Partial<FlexBoxProps>;\n  extraHeaderProps?: Partial<FlexBoxProps>;\n  extraFooterProps?: Partial<FlexBoxProps>;\n  extraFooterDividerProps?: Partial<DividerProps>;\n}\n\nconst DrawerContent = React.forwardRef(\n  (\n    {\n      isOpen,\n      title,\n      children,\n      footer,\n      big,\n      onClose,\n      backgroundColor,\n      setTransitionsEnabled = () => 0,\n      onBack,\n      extraContainerProps,\n      extraHeaderProps,\n      extraFooterProps,\n      extraFooterDividerProps,\n      ignoreBackdropClick = false,\n      hideNavigation = true,\n      direction = Direction.Left,\n    }: DrawerProps,\n    ref?: React.ForwardedRef<HTMLDivElement>,\n  ) => {\n    const disableChildAnimations = useCallback(\n      () => setTransitionsEnabled(false),\n      [setTransitionsEnabled],\n    );\n    const enableChildAnimations = useCallback(\n      () => setTransitionsEnabled(true),\n      [setTransitionsEnabled],\n    );\n\n    const handleBackdropClick = useCallback(() => {\n      if (!ignoreBackdropClick) {\n        onClose();\n      }\n    }, [onClose, ignoreBackdropClick]);\n\n    const stopClickPropagation = useCallback((e: React.MouseEvent) => {\n      e.stopPropagation();\n    }, []);\n\n    return (\n      <TransitionInOut\n        in={isOpen}\n        appear\n        mountOnEnter\n        unmountOnExit\n        onEntering={disableChildAnimations}\n        onEntered={enableChildAnimations}\n        onExiting={disableChildAnimations}\n      >\n        <Overlay direction={direction} onClick={handleBackdropClick} ref={ref}>\n          <TransitionSlide\n            in={isOpen}\n            direction={direction}\n            fixed\n            reverseExit\n            appear\n            mountOnEnter\n            unmountOnExit\n          >\n            <Wrapper\n              big={big}\n              onClick={stopClickPropagation}\n              backgroundColor={backgroundColor ?? \"background.main\"}\n            >\n              <Container>\n                <FlexBox\n                  justifyContent=\"space-between\"\n                  alignItems=\"center\"\n                  p={12}\n                  pb={10}\n                  {...extraHeaderProps}\n                >\n                  {!hideNavigation && (\n                    <>\n                      {onBack != null ? (\n                        <Button variant=\"neutral\" onClick={onBack} Icon={ArrowLeft} />\n                      ) : (\n                        <ButtonPlaceholder />\n                      )}\n                    </>\n                  )}\n                  {(\n                    <Text variant={\"h3\"} flex={1} textAlign=\"center\">\n                      {title}\n                    </Text>\n                  ) || <div />}\n                  <FlexBox alignSelf=\"flex-start\">\n                    <Button variant=\"neutral\" onClick={onClose} Icon={Close} />\n                  </FlexBox>\n                </FlexBox>\n                <ScrollWrapper\n                  flexDirection=\"column\"\n                  alignItems=\"stretch\"\n                  overflow=\"scroll\"\n                  position=\"relative\"\n                  p={12}\n                  pt={0}\n                  flex={1}\n                  {...extraContainerProps}\n                >\n                  {children}\n                </ScrollWrapper>\n                {footer && (\n                  <>\n                    <Divider variant=\"light\" {...extraFooterDividerProps} />\n                    <FlexBox alignItems=\"center\" py={8} px={12} {...extraFooterProps}>\n                      {footer}\n                    </FlexBox>\n                  </>\n                )}\n              </Container>\n            </Wrapper>\n          </TransitionSlide>\n        </Overlay>\n      </TransitionInOut>\n    );\n  },\n);\n\nconst Drawer = (\n  { children, menuPortalTarget, ...sideProps }: DrawerProps,\n  ref?: React.ForwardedRef<HTMLDivElement>,\n): React.ReactElement => {\n  const $root = React.useMemo(\n    () =>\n      menuPortalTarget === undefined && typeof document !== undefined\n        ? document.querySelector(\"body\")\n        : menuPortalTarget,\n    [menuPortalTarget],\n  );\n  if (!$root) {\n    return (\n      <DrawerContent ref={ref} {...sideProps}>\n        {children}\n      </DrawerContent>\n    );\n  } else {\n    return ReactDOM.createPortal(\n      <DrawerContent ref={ref} {...sideProps}>\n        {children}\n      </DrawerContent>,\n      $root,\n    );\n  }\n};\n\nexport default React.forwardRef(Drawer);\n"],
+  "mappings": "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",
   "names": []
 }

package/lib/cjs/components/layout/List/VerticalTimeline/TimelineItem.js CHANGED Viewed

@@ -54,7 +54,6 @@ const getContainerBorder = (theme, status, isLastItem) => {
 };
 const Container = (0, import_styled_components.default)(import__2.Flex)`
   flex: 1;
-  width: 404px;
   border-radius: ${(p) => p.theme.radii[2]}px;
   background: ${(p) => getContainerBackground(p.theme, p.status, p.isLastItem)};
   border: 1px solid ${(p) => getContainerBorder(p.theme, p.status, p.isLastItem)};
@@ -86,10 +85,9 @@ function TimelineItem({ item, isFirstItem, isLastItem }) {
     active: true,
     disabled: true,
     textProps: { color: colors.neutral.c100 }
-  }, `${item.estimatedTime / 60} min`)), item.renderBody && item.status === "active" && /* @__PURE__ */ import_react.default.createElement(import__2.Flex, {
-    position: "relative"
-  }, /* @__PURE__ */ import_react.default.createElement(import__2.Flex, {
+  }, `${item.estimatedTime / 60} min`)), item.renderBody && item.status === "active" && /* @__PURE__ */ import_react.default.createElement(import__2.Box, {
+    position: "relative",
     pt: 6
-  }, item.renderBody(item.status === "active")))));
+  }, item.renderBody(item.status === "active"))));
 }
 //# sourceMappingURL=TimelineItem.js.map

package/lib/cjs/components/layout/List/VerticalTimeline/TimelineItem.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/layout/List/VerticalTimeline/TimelineItem.tsx"],
-  "sourcesContent": ["import React from \"react\";\n\nimport { Theme } from \"src/styles/theme\";\nimport styled, { useTheme } from \"styled-components\";\n\nimport { Item, ItemStatus } from \".\";\nimport { Flex } from \"../..\";\nimport { Text } from \"../../..\";\nimport Tag from \"../../../Tag\";\n\nimport TimelineIndicator from \"./TimelineIndicator\";\n\nexport type Props = {\n  item: Item;\n  isFirstItem?: boolean;\n  isLastItem?: boolean;\n};\n\nconst getContainerBackground = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n  if (isLastItem && status === \"completed\") {\n    return theme.colors.success.c30;\n  } else if (status === \"completed\") {\n    return theme.colors.primary.c20;\n  } else if (status === \"active\") {\n    return theme.colors.neutral.c20;\n  }\n  return theme.colors.neutral.c30;\n};\n\nconst getContainerBorder = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n  if (isLastItem && status === \"completed\") {\n    return theme.colors.success.c30;\n  } else if (isLastItem && status === \"active\") {\n    return theme.colors.success.c100;\n  } else if (status === \"completed\") {\n    return theme.colors.primary.c20;\n  } else if (status === \"active\") {\n    return theme.colors.primary.c80;\n  }\n  return theme.colors.neutral.c30;\n};\n\nconst Container = styled(Flex)<{ status: ItemStatus; isLastItem?: boolean }>`\n  flex: 1;\n  width: 404px;\n  border-radius: ${(p) => p.theme.radii[2]}px;\n  background: ${(p) => getContainerBackground(p.theme, p.status, p.isLastItem)};\n  border: 1px solid ${(p) => getContainerBorder(p.theme, p.status, p.isLastItem)};\n  padding: 20px 16px;\n`;\n\nconst TimelineIndicatorContentHeader = styled(Flex)`\n  justify-content: space-between;\n`;\n\nexport default function TimelineItem({ item, isFirstItem, isLastItem }: Props) {\n  const { colors } = useTheme();\n\n  return (\n    <Flex flexDirection=\"row\">\n      <TimelineIndicator\n        status={item.status}\n        isFirstItem={isFirstItem}\n        isLastItem={isLastItem}\n        mr={4}\n      />\n      <Container status={item.status} isLastItem={isLastItem} mb={4} flexDirection=\"column\">\n        <TimelineIndicatorContentHeader>\n          <Text\n            variant=\"body\"\n            color={\n              item.status === \"inactive\"\n                ? \"neutral.c80\"\n                : isLastItem\n                ? \"success.c100\"\n                : \"primary.c90\"\n            }\n          >\n            {item.title}\n          </Text>\n          {item?.estimatedTime && item.status === \"active\" && (\n            <Tag\n              size=\"small\"\n              type=\"opacity\"\n              active\n              disabled\n              textProps={{ color: colors.neutral.c100 }}\n            >{`${item.estimatedTime / 60} min`}</Tag>\n          )}\n        </TimelineIndicatorContentHeader>\n        {item.renderBody && item.status === \"active\" && (\n          <Flex position=\"relative\">\n            <Flex pt={6}>{item.renderBody(item.status === \"active\")}</Flex>\n          </Flex>\n        )}\n      </Container>\n    </Flex>\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,+BAAiC;AAGjC,gBAAqB;AACrB,gBAAqB;AACrB,iBAAgB;AAEhB,+BAA8B;AAQ9B,MAAM,yBAAyB,CAAC,OAAc,QAAoB,eAAyB;AACzF,MAAI,cAAc,WAAW,aAAa;AACxC,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,WAAW,aAAa;AACjC,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA;AAE9B,SAAO,MAAM,OAAO,QAAQ;AAAA;AAG9B,MAAM,qBAAqB,CAAC,OAAc,QAAoB,eAAyB;AACrF,MAAI,cAAc,WAAW,aAAa;AACxC,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,cAAc,WAAW,UAAU;AAC5C,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,WAAW,aAAa;AACjC,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA;AAE9B,SAAO,MAAM,OAAO,QAAQ;AAAA;AAG9B,MAAM,YAAY,sCAAO;AAAA;AAAA;AAAA,mBAGN,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA,gBACxB,CAAC,MAAM,uBAAuB,EAAE,OAAO,EAAE,QAAQ,EAAE;AAAA,sBAC7C,CAAC,MAAM,mBAAmB,EAAE,OAAO,EAAE,QAAQ,EAAE;AAAA;AAAA;AAIrE,MAAM,iCAAiC,sCAAO;AAAA;AAAA;AAI/B,sBAAsB,EAAE,MAAM,aAAa,cAAqB;AAC7E,QAAM,EAAE,WAAW;AAEnB,SACE,mDAAC,gBAAD;AAAA,IAAM,eAAc;AAAA,KAClB,mDAAC,kCAAD;AAAA,IACE,QAAQ,KAAK;AAAA,IACb;AAAA,IACA;AAAA,IACA,IAAI;AAAA,MAEN,mDAAC,WAAD;AAAA,IAAW,QAAQ,KAAK;AAAA,IAAQ;AAAA,IAAwB,IAAI;AAAA,IAAG,eAAc;AAAA,KAC3E,mDAAC,gCAAD,MACE,mDAAC,gBAAD;AAAA,IACE,SAAQ;AAAA,IACR,OACE,KAAK,WAAW,aACZ,gBACA,aACA,iBACA;AAAA,KAGL,KAAK,QAEP,MAAM,iBAAiB,KAAK,WAAW,YACtC,mDAAC,oBAAD;AAAA,IACE,MAAK;AAAA,IACL,MAAK;AAAA,IACL,QAAM;AAAA,IACN,UAAQ;AAAA,IACR,WAAW,EAAE,OAAO,OAAO,QAAQ;AAAA,KACnC,GAAG,KAAK,gBAAgB,YAG7B,KAAK,cAAc,KAAK,WAAW,YAClC,mDAAC,gBAAD;AAAA,IAAM,UAAS;AAAA,KACb,mDAAC,gBAAD;AAAA,IAAM,IAAI;AAAA,KAAI,KAAK,WAAW,KAAK,WAAW;AAAA;",
+  "sourcesContent": ["import React from \"react\";\n\nimport { Theme } from \"src/styles/theme\";\nimport styled, { useTheme } from \"styled-components\";\n\nimport { Item, ItemStatus } from \".\";\nimport { Flex, Box } from \"../..\";\nimport { Text } from \"../../..\";\nimport Tag from \"../../../Tag\";\n\nimport TimelineIndicator from \"./TimelineIndicator\";\n\nexport type Props = {\n  item: Item;\n  isFirstItem?: boolean;\n  isLastItem?: boolean;\n};\n\nconst getContainerBackground = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n  if (isLastItem && status === \"completed\") {\n    return theme.colors.success.c30;\n  } else if (status === \"completed\") {\n    return theme.colors.primary.c20;\n  } else if (status === \"active\") {\n    return theme.colors.neutral.c20;\n  }\n  return theme.colors.neutral.c30;\n};\n\nconst getContainerBorder = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n  if (isLastItem && status === \"completed\") {\n    return theme.colors.success.c30;\n  } else if (isLastItem && status === \"active\") {\n    return theme.colors.success.c100;\n  } else if (status === \"completed\") {\n    return theme.colors.primary.c20;\n  } else if (status === \"active\") {\n    return theme.colors.primary.c80;\n  }\n  return theme.colors.neutral.c30;\n};\n\nconst Container = styled(Flex)<{ status: ItemStatus; isLastItem?: boolean }>`\n  flex: 1;\n  border-radius: ${(p) => p.theme.radii[2]}px;\n  background: ${(p) => getContainerBackground(p.theme, p.status, p.isLastItem)};\n  border: 1px solid ${(p) => getContainerBorder(p.theme, p.status, p.isLastItem)};\n  padding: 20px 16px;\n`;\n\nconst TimelineIndicatorContentHeader = styled(Flex)`\n  justify-content: space-between;\n`;\n\nexport default function TimelineItem({ item, isFirstItem, isLastItem }: Props) {\n  const { colors } = useTheme();\n\n  return (\n    <Flex flexDirection=\"row\">\n      <TimelineIndicator\n        status={item.status}\n        isFirstItem={isFirstItem}\n        isLastItem={isLastItem}\n        mr={4}\n      />\n      <Container status={item.status} isLastItem={isLastItem} mb={4} flexDirection=\"column\">\n        <TimelineIndicatorContentHeader>\n          <Text\n            variant=\"body\"\n            color={\n              item.status === \"inactive\"\n                ? \"neutral.c80\"\n                : isLastItem\n                ? \"success.c100\"\n                : \"primary.c90\"\n            }\n          >\n            {item.title}\n          </Text>\n          {item?.estimatedTime && item.status === \"active\" && (\n            <Tag\n              size=\"small\"\n              type=\"opacity\"\n              active\n              disabled\n              textProps={{ color: colors.neutral.c100 }}\n            >{`${item.estimatedTime / 60} min`}</Tag>\n          )}\n        </TimelineIndicatorContentHeader>\n        {item.renderBody && item.status === \"active\" && (\n          <Box position=\"relative\" pt={6}>\n            {item.renderBody(item.status === \"active\")}\n          </Box>\n        )}\n      </Container>\n    </Flex>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,+BAAiC;AAGjC,gBAA0B;AAC1B,gBAAqB;AACrB,iBAAgB;AAEhB,+BAA8B;AAQ9B,MAAM,yBAAyB,CAAC,OAAc,QAAoB,eAAyB;AACzF,MAAI,cAAc,WAAW,aAAa;AACxC,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,WAAW,aAAa;AACjC,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA;AAE9B,SAAO,MAAM,OAAO,QAAQ;AAAA;AAG9B,MAAM,qBAAqB,CAAC,OAAc,QAAoB,eAAyB;AACrF,MAAI,cAAc,WAAW,aAAa;AACxC,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,cAAc,WAAW,UAAU;AAC5C,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,WAAW,aAAa;AACjC,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA;AAE9B,SAAO,MAAM,OAAO,QAAQ;AAAA;AAG9B,MAAM,YAAY,sCAAO;AAAA;AAAA,mBAEN,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA,gBACxB,CAAC,MAAM,uBAAuB,EAAE,OAAO,EAAE,QAAQ,EAAE;AAAA,sBAC7C,CAAC,MAAM,mBAAmB,EAAE,OAAO,EAAE,QAAQ,EAAE;AAAA;AAAA;AAIrE,MAAM,iCAAiC,sCAAO;AAAA;AAAA;AAI/B,sBAAsB,EAAE,MAAM,aAAa,cAAqB;AAC7E,QAAM,EAAE,WAAW;AAEnB,SACE,mDAAC,gBAAD;AAAA,IAAM,eAAc;AAAA,KAClB,mDAAC,kCAAD;AAAA,IACE,QAAQ,KAAK;AAAA,IACb;AAAA,IACA;AAAA,IACA,IAAI;AAAA,MAEN,mDAAC,WAAD;AAAA,IAAW,QAAQ,KAAK;AAAA,IAAQ;AAAA,IAAwB,IAAI;AAAA,IAAG,eAAc;AAAA,KAC3E,mDAAC,gCAAD,MACE,mDAAC,gBAAD;AAAA,IACE,SAAQ;AAAA,IACR,OACE,KAAK,WAAW,aACZ,gBACA,aACA,iBACA;AAAA,KAGL,KAAK,QAEP,MAAM,iBAAiB,KAAK,WAAW,YACtC,mDAAC,oBAAD;AAAA,IACE,MAAK;AAAA,IACL,MAAK;AAAA,IACL,QAAM;AAAA,IACN,UAAQ;AAAA,IACR,WAAW,EAAE,OAAO,OAAO,QAAQ;AAAA,KACnC,GAAG,KAAK,gBAAgB,YAG7B,KAAK,cAAc,KAAK,WAAW,YAClC,mDAAC,eAAD;AAAA,IAAK,UAAS;AAAA,IAAW,IAAI;AAAA,KAC1B,KAAK,WAAW,KAAK,WAAW;AAAA;",
   "names": []
 }

package/lib/cjs/styles/palettes/colors.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/styles/palettes/colors.stories.tsx"],
-  "sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../components/asorted/Text\";\nimport Flex from \"../../components/layout/Flex\";\nimport { palettes, ColorPalette } from \"@ledgerhq/ui-shared\";\n\nexport default { title: \"Particles\" };\n\nconst ColorArea = styled.div<{ type: keyof ColorPalette; shade: string }>`\n  width: 200px;\n  aspect-ratio: 1;\n  background-color: ${(p) => {\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore next-line\n    return p.theme.colors[p.type][p.shade];\n  }};\n  cursor: pointer;\n  border-radius: 2px;\n`;\n\ntype CardColorProps = { shade: string; type: string; value: string };\nconst CardColor = ({ shade, type, value }: CardColorProps): JSX.Element => {\n  const [isHovered, setIsHovered] = useState(false);\n\n  const onClick = (type: string, shade: string): void => {\n    navigator.clipboard.writeText(`p.theme.colors.${type}.${shade}`);\n  };\n\n  return (\n    <Flex\n      flexDirection=\"column\"\n      alignItems=\"center\"\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <ColorArea\n        type={type as keyof ColorPalette}\n        shade={shade}\n        onClick={() => onClick(type, shade)}\n      />\n      <Text variant=\"tiny\">{isHovered ? value : shade}</Text>\n    </Flex>\n  );\n};\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst { type: _, ...palette } = palettes.light;\n\nexport const Colors = (): JSX.Element => (\n  <Flex flexDirection=\"column\" rowGap=\"2rem\">\n    {Object.entries(palette).map(([type, shades]: [string, Array<string>]) => (\n      <Flex flexDirection=\"column\" rowGap=\"1rem\">\n        <Text variant=\"h2\" textTransform=\"uppercase\">\n          {type}\n        </Text>\n        <Flex columnGap=\"0.5rem\" rowGap=\"0.5rem\" flexWrap=\"wrap\">\n          {Object.entries(shades).map(([shade, value]) => (\n            <CardColor key={shade} shade={shade} type={type} value={value} />\n          ))}\n        </Flex>\n      </Flex>\n    ))}\n  </Flex>\n);\n"],
+  "sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../components/asorted/Text\";\nimport Flex from \"../../components/layout/Flex\";\nimport { palettes, ColorPalette } from \"@ledgerhq/ui-shared\";\n\nexport default { title: \"Particles\" };\n\nconst ColorArea = styled.div<{ type: keyof ColorPalette; shade: string }>`\n  width: 200px;\n  aspect-ratio: 1;\n  background-color: ${(p) => {\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore next-line\n    return p.theme.colors[p.type][p.shade];\n  }};\n  cursor: pointer;\n  border-radius: 2px;\n`;\n\ntype CardColorProps = { shade: string; type: string; value: string };\nconst CardColor = ({ shade, type, value }: CardColorProps): JSX.Element => {\n  const [isHovered, setIsHovered] = useState(false);\n\n  const onClick = (type: string, shade: string): void => {\n    navigator.clipboard.writeText(`p.theme.colors.${type}.${shade}`);\n  };\n\n  return (\n    <Flex\n      flexDirection=\"column\"\n      alignItems=\"center\"\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <ColorArea\n        type={type as keyof ColorPalette}\n        shade={shade}\n        onClick={() => onClick(type, shade)}\n      />\n      <Text variant=\"tiny\">{isHovered ? value : shade}</Text>\n    </Flex>\n  );\n};\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst { type: _, ...palette } = palettes.light;\n\nexport const Colors = (): JSX.Element => (\n  <Flex flexDirection=\"column\" rowGap=\"2rem\">\n    {Object.entries(palette).map(([type, shades]) => (\n      <Flex flexDirection=\"column\" rowGap=\"1rem\">\n        <Text variant=\"h2\" textTransform=\"uppercase\">\n          {type}\n        </Text>\n        <Flex columnGap=\"0.5rem\" rowGap=\"0.5rem\" flexWrap=\"wrap\">\n          {Object.entries(shades).map(([shade, value]) => (\n            <CardColor key={shade} shade={shade} type={type} value={value} />\n          ))}\n        </Flex>\n      </Flex>\n    ))}\n  </Flex>\n);\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,kBAAiB;AACjB,kBAAiB;AACjB,uBAAuC;AAEvC,IAAO,yBAAQ,EAAE,OAAO;AAExB,MAAM,YAAY,iCAAO;AAAA;AAAA;AAAA,sBAGH,CAAC,MAAM;AAGzB,SAAO,EAAE,MAAM,OAAO,EAAE,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAOpC,MAAM,YAAY,CAAC,EAAE,OAAO,MAAM,YAAyC;AACzE,QAAM,CAAC,WAAW,gBAAgB,2BAAS;AAE3C,QAAM,UAAU,CAAC,OAAc,WAAwB;AACrD,cAAU,UAAU,UAAU,kBAAkB,SAAQ;AAAA;AAG1D,SACE,mDAAC,qBAAD;AAAA,IACE,eAAc;AAAA,IACd,YAAW;AAAA,IACX,cAAc,MAAM,aAAa;AAAA,IACjC,cAAc,MAAM,aAAa;AAAA,KAEjC,mDAAC,WAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,SAAS,MAAM,QAAQ,MAAM;AAAA,MAE/B,mDAAC,qBAAD;AAAA,IAAM,SAAQ;AAAA,KAAQ,YAAY,QAAQ;AAAA;AAMhD,MAAM,EAAE,MAAM,MAAM,YAAY,0BAAS;AAElC,MAAM,SAAS,MACpB,mDAAC,qBAAD;AAAA,EAAM,eAAc;AAAA,EAAS,QAAO;AAAA,GACjC,OAAO,QAAQ,SAAS,IAAI,CAAC,CAAC,MAAM,YACnC,mDAAC,qBAAD;AAAA,EAAM,eAAc;AAAA,EAAS,QAAO;AAAA,GAClC,mDAAC,qBAAD;AAAA,EAAM,SAAQ;AAAA,EAAK,eAAc;AAAA,GAC9B,OAEH,mDAAC,qBAAD;AAAA,EAAM,WAAU;AAAA,EAAS,QAAO;AAAA,EAAS,UAAS;AAAA,GAC/C,OAAO,QAAQ,QAAQ,IAAI,CAAC,CAAC,OAAO,WACnC,mDAAC,WAAD;AAAA,EAAW,KAAK;AAAA,EAAO;AAAA,EAAc;AAAA,EAAY;AAAA;",
   "names": []
 }

package/lib/cjs/styles/theme.js CHANGED Viewed

@@ -83,6 +83,11 @@ fontSizes.largeLineHeight = fontSizes.large;
 fontSizes.bodyLineHeight = fontSizes.body;
 fontSizes.paragraphLineHeight = fontSizes.paragraph;
 fontSizes.subtitle = fontSizes.extraSmall;
+fontSizes.h1Inter = fontSizes.h1;
+fontSizes.h2Inter = fontSizes.h2;
+fontSizes.h3Inter = fontSizes.h3;
+fontSizes.h4Inter = fontSizes.h4;
+fontSizes.h5Inter = fontSizes.h5;
 const fontWeights = {
   extraLight: "100",
   light: "300",

package/lib/cjs/styles/theme.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/styles/theme.ts"],
-  "sourcesContent": ["import { keyframes, css, DefaultTheme } from \"styled-components\";\nimport { palettes, ColorPalette } from \"@ledgerhq/ui-shared\";\n\nexport type screensBreakpoints = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\";\n\nexport const breakpoints = {\n  sm: \"640px\",\n  md: \"768px\",\n  lg: \"1024px\",\n  xl: \"1280px\",\n  xxl: \"1536px\",\n} as Record<screensBreakpoints, string>;\n\n/* space indexes:\n  0, 1, 2, 3, 4,  5,  6,  7,  8,  9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21\n */\nexport const space = [\n  0, 2, 4, 8, 10, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 68, 72, 76,\n];\n\nexport type TextVariants =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"large\"\n  | \"largeLineHeight\"\n  | \"body\"\n  | \"bodyLineHeight\"\n  | \"paragraph\"\n  | \"paragraphLineHeight\"\n  | \"small\"\n  | \"extraSmall\"\n  | \"tiny\"\n  | \"micro\"\n  | \"subtitle\";\n\nexport type ThemeScale<Type, Aliases extends string> = Array<Type> & Record<Aliases, Type>;\n\nexport const fontSizes = [8, 10, 11, 12, 13, 14, 16, 20, 24, 28, 32, 36] as ThemeScale<\n  number,\n  TextVariants\n>;\n\n[\n  fontSizes.micro,\n  fontSizes.tiny,\n  fontSizes.extraSmall,\n  fontSizes.small,\n  fontSizes.paragraph,\n  fontSizes.body,\n  fontSizes.large,\n  fontSizes.h5,\n  fontSizes.h4,\n  fontSizes.h3,\n  fontSizes.h2,\n  fontSizes.h1,\n] = fontSizes;\nfontSizes.largeLineHeight = fontSizes.large;\nfontSizes.bodyLineHeight = fontSizes.body;\nfontSizes.paragraphLineHeight = fontSizes.paragraph;\nfontSizes.subtitle = fontSizes.extraSmall;\n\nconst fontWeights = {\n  extraLight: \"100\",\n  light: \"300\",\n  regular: \"400\",\n  medium: \"500\",\n  semiBold: \"600\",\n  bold: \"700\",\n  extraBold: \"800\",\n};\n\nexport const radii = [0, 4, 8, 12, 16, 20];\nexport const shadows = [\"0 4px 8px 0 rgba(0, 0, 0, 0.03)\"];\nexport const zIndexes = [-1, 0, 1, 9, 10, 90, 100, 900, 1000];\n\n// Those fonts are now defined in global.css, this is just a mapping for styled-system\nexport const fontFamilies = {\n  Inter: {\n    ExtraLight: {\n      weight: 100,\n      style: \"normal\",\n    },\n    Light: {\n      weight: 300,\n      style: \"normal\",\n    },\n    Regular: {\n      weight: 400,\n      style: \"normal\",\n    },\n    Medium: {\n      weight: 500,\n      style: \"normal\",\n    },\n    SemiBold: {\n      weight: 600,\n      style: \"normal\",\n    },\n    Bold: {\n      weight: 700,\n      style: \"normal\",\n    },\n    ExtraBold: {\n      weight: 800,\n      style: \"normal\",\n    },\n  },\n  Alpha: {\n    Medium: {\n      weight: 500,\n      style: \"normal\",\n    },\n  },\n};\n\nconst animationDuration = \"0.33s\";\nconst easings = {\n  outQuadratic: \"cubic-bezier(0.25, 0.46, 0.45, 0.94)\",\n};\n\nconst transition = (\n  properties = [\"all\"],\n  duration = animationDuration,\n  easing = easings.outQuadratic,\n) => css`\n  transition-property: ${properties.join(\",\")};\n  transition-duration: ${duration};\n  transition-timing-function: ${easing};\n`;\n\nconst fadeIn = keyframes`\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  `;\nconst fadeOut = keyframes`\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n  `;\nconst fadeInGrowX = keyframes`\n    0% {\n      opacity: 0;\n      transform: scaleX(0);\n    }\n    100% {\n      opacity: 1;\n      transform: scaleX(1);\n    }\n`;\nconst fadeInUp = keyframes`\n    0% {\n      opacity: 0;\n      transform: translateY(66%);\n    }\n    100% {\n      opacity: 1;\n      transform: translateY(0%);\n    }\n  `;\nconst animations = {\n  fadeIn: () =>\n    css`\n      ${fadeIn} ${animationDuration} ${easings.outQuadratic} forwards\n    `,\n  fadeOut: () =>\n    css`\n      ${fadeOut} ${animationDuration} ${easings.outQuadratic} forwards\n    `,\n  fadeInGrowX: () =>\n    css`\n      ${fadeInGrowX} 0.6s ${easings.outQuadratic} forwards\n    `,\n  fadeInUp: () =>\n    css`\n      ${fadeInUp} ${animationDuration} ${easings.outQuadratic} forwards\n    `,\n};\nconst overflow = {\n  x: css`\n    overflow-y: hidden;\n    overflow-x: scroll;\n    will-change: transform;\n    &:hover {\n      --track-color: ${(p) => p.theme.colors.neutral.c30};\n    }\n  `,\n  y: css`\n    overflow-x: hidden;\n    overflow-y: scroll;\n    will-change: transform;\n    &:hover {\n      --track-color: ${(p) => p.theme.colors.neutral.c30};\n    }\n  `,\n  yAuto: css`\n    overflow-x: hidden;\n    overflow-y: auto;\n    will-change: transform;\n    &:hover {\n      --track-color: ${(p) => p.theme.colors.neutral.c30};\n    }\n  `,\n  xy: css`\n    overflow: scroll;\n    will-change: transform;\n    &:hover {\n      --track-color: ${(p) => p.theme.colors.neutral.c30};\n    }\n  `,\n  trackSize: 12,\n};\n\ndeclare module \"styled-components\" {\n  export interface Font {\n    weight: number;\n    style: string;\n  }\n  export interface DefaultTheme {\n    theme: string;\n    animations: typeof animations;\n    transition: typeof transition;\n    overflow: typeof overflow;\n    sizes: {\n      topBarHeight: number;\n      sideBarWidth: number;\n      drawer: {\n        side: {\n          big: {\n            width: number;\n          };\n          small: {\n            width: number;\n          };\n        };\n        popin: {\n          min: {\n            height: number;\n            width: number;\n          };\n          max: {\n            height: number;\n            width: number;\n          };\n        };\n      };\n    };\n    radii: number[];\n    fontFamilies: Record<string, Record<string, Font>>;\n    fontSizes: number[];\n    space: number[];\n    shadows: string[];\n    colors: ColorPalette & {\n      /**\n       * @deprecated Do not use the .palette prefix anymore!\n       */\n      palette: ColorPalette;\n    };\n    fontWeights: Record<string, string>;\n    breakpoints: Record<screensBreakpoints, string>;\n    zIndexes: number[];\n  }\n}\n\nconst theme: DefaultTheme = {\n  theme: \"light\",\n  sizes: {\n    drawer: {\n      side: {\n        big: {\n          width: 580,\n        },\n        small: {\n          width: 420,\n        },\n      },\n      popin: {\n        min: {\n          height: 158,\n          width: 462,\n        },\n        max: {\n          height: 522,\n          width: 622,\n        },\n      },\n    },\n    topBarHeight: 58,\n    sideBarWidth: 230,\n  },\n  radii,\n  fontFamilies,\n  fontSizes,\n  fontWeights,\n  space,\n  shadows,\n  colors: {\n    palette: palettes.light,\n    ...palettes.light,\n  },\n  animations,\n  overflow,\n  transition,\n  zIndexes,\n  breakpoints,\n};\n\nexport default theme;\nexport type Theme = DefaultTheme;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { keyframes, css, DefaultTheme } from \"styled-components\";\nimport { palettes, ColorPalette } from \"@ledgerhq/ui-shared\";\n\nexport type screensBreakpoints = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\";\n\nexport const breakpoints = {\n  sm: \"640px\",\n  md: \"768px\",\n  lg: \"1024px\",\n  xl: \"1280px\",\n  xxl: \"1536px\",\n} as Record<screensBreakpoints, string>;\n\nexport const space = [\n  /* space indexes:\n  0, 1, 2, 3, 4,  5,  6,  7,  8,  9,  10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21 */\n  0, 2, 4, 8, 10, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 68, 72, 76,\n];\n\nexport type TextVariants =\n  | \"h1\"\n  | \"h1Inter\"\n  | \"h2\"\n  | \"h2Inter\"\n  | \"h3\"\n  | \"h3Inter\"\n  | \"h4\"\n  | \"h4Inter\"\n  | \"h5\"\n  | \"h5Inter\"\n  | \"large\"\n  | \"largeLineHeight\"\n  | \"body\"\n  | \"bodyLineHeight\"\n  | \"paragraph\"\n  | \"paragraphLineHeight\"\n  | \"small\"\n  | \"extraSmall\"\n  | \"tiny\"\n  | \"micro\"\n  | \"subtitle\";\n\nexport type ThemeScale<Type, Aliases extends string> = Array<Type> & Record<Aliases, Type>;\n\nexport const fontSizes = [8, 10, 11, 12, 13, 14, 16, 20, 24, 28, 32, 36] as ThemeScale<\n  number,\n  TextVariants\n>;\n\n[\n  fontSizes.micro,\n  fontSizes.tiny,\n  fontSizes.extraSmall,\n  fontSizes.small,\n  fontSizes.paragraph,\n  fontSizes.body,\n  fontSizes.large,\n  fontSizes.h5,\n  fontSizes.h4,\n  fontSizes.h3,\n  fontSizes.h2,\n  fontSizes.h1,\n] = fontSizes;\nfontSizes.largeLineHeight = fontSizes.large;\nfontSizes.bodyLineHeight = fontSizes.body;\nfontSizes.paragraphLineHeight = fontSizes.paragraph;\nfontSizes.subtitle = fontSizes.extraSmall;\nfontSizes.h1Inter = fontSizes.h1;\nfontSizes.h2Inter = fontSizes.h2;\nfontSizes.h3Inter = fontSizes.h3;\nfontSizes.h4Inter = fontSizes.h4;\nfontSizes.h5Inter = fontSizes.h5;\n\nconst fontWeights = {\n  extraLight: \"100\",\n  light: \"300\",\n  regular: \"400\",\n  medium: \"500\",\n  semiBold: \"600\",\n  bold: \"700\",\n  extraBold: \"800\",\n};\n\nexport const radii = [0, 4, 8, 12, 16, 20];\nexport const shadows = [\"0 4px 8px 0 rgba(0, 0, 0, 0.03)\"];\nexport const zIndexes = [-1, 0, 1, 9, 10, 90, 100, 900, 1000];\n\n// Those fonts are now defined in global.css, this is just a mapping for styled-system\nexport const fontFamilies = {\n  Inter: {\n    ExtraLight: {\n      weight: 100,\n      style: \"normal\",\n    },\n    Light: {\n      weight: 300,\n      style: \"normal\",\n    },\n    Regular: {\n      weight: 400,\n      style: \"normal\",\n    },\n    Medium: {\n      weight: 500,\n      style: \"normal\",\n    },\n    SemiBold: {\n      weight: 600,\n      style: \"normal\",\n    },\n    Bold: {\n      weight: 700,\n      style: \"normal\",\n    },\n    ExtraBold: {\n      weight: 800,\n      style: \"normal\",\n    },\n  },\n  Alpha: {\n    Medium: {\n      weight: 500,\n      style: \"normal\",\n    },\n  },\n};\n\nconst animationDuration = \"0.33s\";\nconst easings = {\n  outQuadratic: \"cubic-bezier(0.25, 0.46, 0.45, 0.94)\",\n};\n\nconst transition = (\n  properties = [\"all\"],\n  duration = animationDuration,\n  easing = easings.outQuadratic,\n) => css`\n  transition-property: ${properties.join(\",\")};\n  transition-duration: ${duration};\n  transition-timing-function: ${easing};\n`;\n\nconst fadeIn = keyframes`\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  `;\nconst fadeOut = keyframes`\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n  `;\nconst fadeInGrowX = keyframes`\n    0% {\n      opacity: 0;\n      transform: scaleX(0);\n    }\n    100% {\n      opacity: 1;\n      transform: scaleX(1);\n    }\n`;\nconst fadeInUp = keyframes`\n    0% {\n      opacity: 0;\n      transform: translateY(66%);\n    }\n    100% {\n      opacity: 1;\n      transform: translateY(0%);\n    }\n  `;\nconst animations = {\n  fadeIn: () =>\n    css`\n      ${fadeIn} ${animationDuration} ${easings.outQuadratic} forwards\n    `,\n  fadeOut: () =>\n    css`\n      ${fadeOut} ${animationDuration} ${easings.outQuadratic} forwards\n    `,\n  fadeInGrowX: () =>\n    css`\n      ${fadeInGrowX} 0.6s ${easings.outQuadratic} forwards\n    `,\n  fadeInUp: () =>\n    css`\n      ${fadeInUp} ${animationDuration} ${easings.outQuadratic} forwards\n    `,\n};\nconst overflow = {\n  x: css`\n    overflow-y: hidden;\n    overflow-x: scroll;\n    will-change: transform;\n    &:hover {\n      --track-color: ${(p) => p.theme.colors.neutral.c30};\n    }\n  `,\n  y: css`\n    overflow-x: hidden;\n    overflow-y: scroll;\n    will-change: transform;\n    &:hover {\n      --track-color: ${(p) => p.theme.colors.neutral.c30};\n    }\n  `,\n  yAuto: css`\n    overflow-x: hidden;\n    overflow-y: auto;\n    will-change: transform;\n    &:hover {\n      --track-color: ${(p) => p.theme.colors.neutral.c30};\n    }\n  `,\n  xy: css`\n    overflow: scroll;\n    will-change: transform;\n    &:hover {\n      --track-color: ${(p) => p.theme.colors.neutral.c30};\n    }\n  `,\n  trackSize: 12,\n};\n\ndeclare module \"styled-components\" {\n  export interface Font {\n    weight: number;\n    style: string;\n  }\n  export interface DefaultTheme {\n    theme: string;\n    animations: typeof animations;\n    transition: typeof transition;\n    overflow: typeof overflow;\n    sizes: {\n      topBarHeight: number;\n      sideBarWidth: number;\n      drawer: {\n        side: {\n          big: {\n            width: number;\n          };\n          small: {\n            width: number;\n          };\n        };\n        popin: {\n          min: {\n            height: number;\n            width: number;\n          };\n          max: {\n            height: number;\n            width: number;\n          };\n        };\n      };\n    };\n    radii: number[];\n    fontFamilies: Record<string, Record<string, Font>>;\n    fontSizes: number[];\n    space: number[];\n    shadows: string[];\n    colors: ColorPalette & {\n      /**\n       * @deprecated Do not use the .palette prefix anymore!\n       */\n      palette: ColorPalette;\n    };\n    fontWeights: Record<string, string>;\n    breakpoints: Record<screensBreakpoints, string>;\n    zIndexes: number[];\n  }\n}\n\nconst theme: DefaultTheme = {\n  theme: \"light\",\n  sizes: {\n    drawer: {\n      side: {\n        big: {\n          width: 580,\n        },\n        small: {\n          width: 420,\n        },\n      },\n      popin: {\n        min: {\n          height: 158,\n          width: 462,\n        },\n        max: {\n          height: 522,\n          width: 622,\n        },\n      },\n    },\n    topBarHeight: 58,\n    sideBarWidth: 230,\n  },\n  radii,\n  fontFamilies,\n  fontSizes,\n  fontWeights,\n  space,\n  shadows,\n  colors: {\n    palette: palettes.light,\n    ...palettes.light,\n  },\n  animations,\n  overflow,\n  transition,\n  zIndexes,\n  breakpoints,\n};\n\nexport default theme;\nexport type Theme = DefaultTheme;\n"],
+  "mappings": "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",
   "names": []
 }

package/lib/components/Chart/index.d.ts CHANGED Viewed

@@ -9,9 +9,9 @@ export declare type Props = Omit<ChartProps, "type" | "data" | "options"> & {
     valueKey?: string;
     timeOptions?: timeOptions;
 };
-declare const _default: ({ data, color, variant, valueKey, timeOptions, ...chartProps }: Props) => JSX.Element;
 /**
  * @remarks This component must have a parent that has only it as a child and it must be in relative position!
  * @privateRemarks Don't name this component "Chart", that will conflict with the Chart.js library cuz of the adapter
  */
+declare const _default: ({ data, color, variant, valueKey, timeOptions, ...chartProps }: Props) => JSX.Element;
 export default _default;

package/lib/components/asorted/Icon/FlagIcon.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import * as flags from "@ledgerhq/icons-ui/react/_Flags";
+import * as flags from "@ledgerhq/icons-ui/react/_Flags/index";
 import React from "react";
 export const sizes = {
     XXS: 16,

package/lib/components/asorted/Icon/PaymentIcon.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 export declare const sizes: {
     XXS: number;
     XS: number;
@@ -13,5 +13,9 @@ export declare type Props = {
     size?: PaymentIconSizes;
 };
 export declare const iconNames: string[];
+export declare type IconGetterProps = {
+    search: string;
+    object: Record<string, React.ReactNode>;
+};
 declare const PaymentIcon: ({ name, size }: Props) => JSX.Element | null;
 export default PaymentIcon;