@ledgerhq/react-ui 0.27.0-nightly.1 → 0.27.0-nightly.2

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.
@@ -55,6 +55,11 @@ const Wrapper = import_styled_components.default.div`
55
55
  border-radius: var(--radius-s, 8px);
56
56
  justify-content: space-between;
57
57
  align-items: center;
58
+ width: 100%;
59
+ box-sizing: border-box;
60
+ max-width: 100%;
61
+ min-width: 200px;
62
+ overflow: hidden;
58
63
 
59
64
  :hover {
60
65
  background-color: var(--colors-surface-transparent-hover);
@@ -64,41 +69,82 @@ const Wrapper = import_styled_components.default.div`
64
69
  background-color: var(--colors-surface-transparent-pressed);
65
70
  }
66
71
  `;
72
+ const ContentContainer = import_styled_components.default.div`
73
+ display: flex;
74
+ justify-content: space-between;
75
+ align-items: center;
76
+ min-width: 0;
77
+ flex: 1;
78
+ width: 100%;
79
+ overflow: hidden;
80
+ `;
81
+ const AccountInfoContainer = import_styled_components.default.div`
82
+ display: flex;
83
+ flex-direction: column;
84
+ justify-content: center;
85
+ min-width: 0;
86
+ flex: 1;
87
+ overflow: hidden;
88
+ `;
89
+ const NameRow = import_styled_components.default.div`
90
+ display: flex;
91
+ flex-direction: row;
92
+ align-items: center;
93
+ margin-bottom: var(--spacing-xxxs);
94
+ min-width: 0;
95
+ width: 100%;
96
+ `;
97
+ const NameDiv = import_styled_components.default.div`
98
+ white-space: nowrap;
99
+ overflow: hidden;
100
+ text-overflow: ellipsis;
101
+ min-width: 0;
102
+ flex: 1;
103
+ max-width: fit-content;
104
+ `;
105
+ const TagWrapper = import_styled_components.default.div`
106
+ flex-shrink: 0;
107
+ margin-left: var(--spacing-xxs);
108
+ display: flex;
109
+ flex: 1;
110
+ max-width: fit-content;
111
+ align-items: center;
112
+ `;
113
+ const BalanceContainer = import_styled_components.default.div`
114
+ display: flex;
115
+ flex-direction: column;
116
+ text-align: right;
117
+ flex-shrink: 0;
118
+ margin-left: var(--spacing-xs);
119
+ `;
67
120
  const AccountItem = ({ onClick, account, showIcon = true }) => {
68
- const { name, balance, fiatValue, protocol, address, ticker, cryptoId } = account;
69
- return /* @__PURE__ */ import_react.default.createElement(Wrapper, { onClick }, /* @__PURE__ */ import_react.default.createElement(
70
- "div",
121
+ const { name, balance, fiatValue, protocol, address, ticker, cryptoId, parentId } = account;
122
+ return /* @__PURE__ */ import_react.default.createElement(Wrapper, { onClick }, /* @__PURE__ */ import_react.default.createElement(ContentContainer, null, /* @__PURE__ */ import_react.default.createElement(AccountInfoContainer, null, /* @__PURE__ */ import_react.default.createElement(NameRow, null, /* @__PURE__ */ import_react.default.createElement(NameDiv, null, /* @__PURE__ */ import_react.default.createElement(
123
+ import_components.Text,
71
124
  {
125
+ variant: "largeLineHeight",
126
+ fontWeight: "semiBold",
127
+ color: "var(--colors-content-default-default)",
128
+ fontSize: "14px",
129
+ lineHeight: "20px",
130
+ title: name,
72
131
  style: {
73
- display: "flex",
74
- justifyContent: "space-between",
75
- alignItems: "center"
132
+ display: "block",
133
+ whiteSpace: "nowrap",
134
+ overflow: "hidden",
135
+ textOverflow: "ellipsis"
76
136
  }
77
137
  },
78
- /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", justifyContent: "center" } }, /* @__PURE__ */ import_react.default.createElement(
79
- "div",
80
- {
81
- style: {
82
- display: "flex",
83
- flexDirection: "row",
84
- alignItems: "center",
85
- marginBottom: "var(--spacing-xxxs)"
86
- }
87
- },
88
- /* @__PURE__ */ import_react.default.createElement(
89
- import_components.Text,
90
- {
91
- variant: "largeLineHeight",
92
- fontWeight: "semiBold",
93
- color: "var(--colors-content-default-default)",
94
- marginRight: "var(--spacing-xxs)",
95
- fontSize: "14px",
96
- lineHeight: "20px"
97
- },
98
- name
99
- ),
100
- protocol && /* @__PURE__ */ import_react.default.createElement(import_Tag.Tag, { textTransform: "capitalize" }, protocol)
101
- ), /* @__PURE__ */ import_react.default.createElement(import_Address.Address, { address, cryptoId, ticker, showIcon }))
102
- ), /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", textAlign: "right" } }, /* @__PURE__ */ import_react.default.createElement(import_components.Text, { fontSize: "14px" }, fiatValue), /* @__PURE__ */ import_react.default.createElement(import_components.Text, { fontSize: "12px", color: "var(--colors-content-subdued-default-default)" }, balance)));
138
+ name
139
+ )), protocol && /* @__PURE__ */ import_react.default.createElement(TagWrapper, null, /* @__PURE__ */ import_react.default.createElement(import_Tag.Tag, { textTransform: "uppercase" }, protocol))), /* @__PURE__ */ import_react.default.createElement(
140
+ import_Address.Address,
141
+ {
142
+ address,
143
+ cryptoId,
144
+ ticker,
145
+ parentId,
146
+ showIcon
147
+ }
148
+ )), /* @__PURE__ */ import_react.default.createElement(BalanceContainer, null, /* @__PURE__ */ import_react.default.createElement(import_components.Text, { fontSize: "14px" }, fiatValue), /* @__PURE__ */ import_react.default.createElement(import_components.Text, { fontSize: "12px", color: "var(--colors-content-subdued-default-default)" }, balance))));
103
149
  };
104
150
  //# sourceMappingURL=AccountItem.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/pre-ldls/components/AccountItem/AccountItem.tsx"],
4
- "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { Text } from \"../../../components\";\nimport { Tag } from \"../Tag/Tag\";\nimport { Address } from \"../Address/Address\";\n\nexport type Account = {\n name: string;\n id: string;\n balance: string;\n fiatValue: string;\n address: string;\n protocol?: string;\n cryptoId?: string;\n ticker?: string;\n};\n\ntype AccountItemProps = {\n onClick: () => void;\n showIcon?: boolean;\n account: Account;\n};\n\nconst Wrapper = styled.div`\n ${withTokens(\n \"spacing-xxxs\",\n \"spacing-xxs\",\n \"spacing-xs\",\n \"radius-s\",\n \"colors-content-default-default\",\n \"colors-surface-transparent-hover\",\n \"colors-surface-transparent-pressed\",\n \"colors-content-subdued-default-default\",\n )}\n\n display: flex;\n padding: var(--spacing-xs) var(--spacing-xxs);\n cursor: pointer;\n border-radius: var(--radius-s, 8px);\n justify-content: space-between;\n align-items: center;\n\n :hover {\n background-color: var(--colors-surface-transparent-hover);\n }\n\n :active {\n background-color: var(--colors-surface-transparent-pressed);\n }\n`;\n\nexport const AccountItem = ({ onClick, account, showIcon = true }: AccountItemProps) => {\n const { name, balance, fiatValue, protocol, address, ticker, cryptoId } = account;\n\n return (\n <Wrapper onClick={onClick}>\n <div\n style={{\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n }}\n >\n <div style={{ display: \"flex\", flexDirection: \"column\", justifyContent: \"center\" }}>\n <div\n style={{\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n marginBottom: \"var(--spacing-xxxs)\",\n }}\n >\n <Text\n variant=\"largeLineHeight\"\n fontWeight=\"semiBold\"\n color=\"var(--colors-content-default-default)\"\n marginRight=\"var(--spacing-xxs)\"\n fontSize=\"14px\"\n lineHeight=\"20px\"\n >\n {name}\n </Text>\n {protocol && <Tag textTransform=\"capitalize\">{protocol}</Tag>}\n </div>\n <Address address={address} cryptoId={cryptoId} ticker={ticker} showIcon={showIcon} />\n </div>\n </div>\n <div style={{ display: \"flex\", flexDirection: \"column\", textAlign: \"right\" }}>\n <Text fontSize=\"14px\">{fiatValue}</Text>\n <Text fontSize=\"12px\" color=\"var(--colors-content-subdued-default-default)\">\n {balance}\n </Text>\n </div>\n </Wrapper>\n );\n};\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAAqB;AACrB,iBAAoB;AACpB,qBAAwB;AAmBxB,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBI,MAAM,cAAc,CAAC,EAAE,SAAS,SAAS,WAAW,KAAK,MAAwB;AACtF,QAAM,EAAE,MAAM,SAAS,WAAW,UAAU,SAAS,QAAQ,SAAS,IAAI;AAE1E,SACE,6BAAAC,QAAA,cAAC,WAAQ,WACP,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,YAAY;AAAA,MACd;AAAA;AAAA,IAEA,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,gBAAgB,SAAS,KAC/E,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,SAAS;AAAA,UACT,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,cAAc;AAAA,QAChB;AAAA;AAAA,MAEA,6BAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,YAAW;AAAA,UACX,OAAM;AAAA,UACN,aAAY;AAAA,UACZ,UAAS;AAAA,UACT,YAAW;AAAA;AAAA,QAEV;AAAA,MACH;AAAA,MACC,YAAY,6BAAAA,QAAA,cAAC,kBAAI,eAAc,gBAAc,QAAS;AAAA,IACzD,GACA,6BAAAA,QAAA,cAAC,0BAAQ,SAAkB,UAAoB,QAAgB,UAAoB,CACrF;AAAA,EACF,GACA,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,WAAW,QAAQ,KACzE,6BAAAA,QAAA,cAAC,0BAAK,UAAS,UAAQ,SAAU,GACjC,6BAAAA,QAAA,cAAC,0BAAK,UAAS,QAAO,OAAM,mDACzB,OACH,CACF,CACF;AAEJ;",
4
+ "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { Text } from \"../../../components\";\nimport { Tag } from \"../Tag/Tag\";\nimport { Address } from \"../Address/Address\";\n\nexport type Account = {\n name: string;\n id: string;\n balance: string;\n fiatValue: string;\n address: string;\n protocol?: string;\n cryptoId?: string;\n ticker?: string;\n parentId?: string;\n};\n\ntype AccountItemProps = {\n onClick: () => void;\n showIcon?: boolean;\n account: Account;\n};\n\nconst Wrapper = styled.div`\n ${withTokens(\n \"spacing-xxxs\",\n \"spacing-xxs\",\n \"spacing-xs\",\n \"radius-s\",\n \"colors-content-default-default\",\n \"colors-surface-transparent-hover\",\n \"colors-surface-transparent-pressed\",\n \"colors-content-subdued-default-default\",\n )}\n\n display: flex;\n padding: var(--spacing-xs) var(--spacing-xxs);\n cursor: pointer;\n border-radius: var(--radius-s, 8px);\n justify-content: space-between;\n align-items: center;\n width: 100%;\n box-sizing: border-box;\n max-width: 100%;\n min-width: 200px;\n overflow: hidden;\n\n :hover {\n background-color: var(--colors-surface-transparent-hover);\n }\n\n :active {\n background-color: var(--colors-surface-transparent-pressed);\n }\n`;\n\nconst ContentContainer = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n min-width: 0;\n flex: 1;\n width: 100%;\n overflow: hidden;\n`;\n\nconst AccountInfoContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n min-width: 0;\n flex: 1;\n overflow: hidden;\n`;\n\nconst NameRow = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: var(--spacing-xxxs);\n min-width: 0;\n width: 100%;\n`;\n\nconst NameDiv = styled.div`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n flex: 1;\n max-width: fit-content;\n`;\n\nconst TagWrapper = styled.div`\n flex-shrink: 0;\n margin-left: var(--spacing-xxs);\n display: flex;\n flex: 1;\n max-width: fit-content;\n align-items: center;\n`;\n\nconst BalanceContainer = styled.div`\n display: flex;\n flex-direction: column;\n text-align: right;\n flex-shrink: 0;\n margin-left: var(--spacing-xs);\n`;\n\nexport const AccountItem = ({ onClick, account, showIcon = true }: AccountItemProps) => {\n const { name, balance, fiatValue, protocol, address, ticker, cryptoId, parentId } = account;\n\n return (\n <Wrapper onClick={onClick}>\n <ContentContainer>\n <AccountInfoContainer>\n <NameRow>\n <NameDiv>\n <Text\n variant=\"largeLineHeight\"\n fontWeight=\"semiBold\"\n color=\"var(--colors-content-default-default)\"\n fontSize=\"14px\"\n lineHeight=\"20px\"\n title={name}\n style={{\n display: \"block\",\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n }}\n >\n {name}\n </Text>\n </NameDiv>\n {protocol && (\n <TagWrapper>\n <Tag textTransform=\"uppercase\">{protocol}</Tag>\n </TagWrapper>\n )}\n </NameRow>\n <Address\n address={address}\n cryptoId={cryptoId}\n ticker={ticker}\n parentId={parentId}\n showIcon={showIcon}\n />\n </AccountInfoContainer>\n <BalanceContainer>\n <Text fontSize=\"14px\">{fiatValue}</Text>\n <Text fontSize=\"12px\" color=\"var(--colors-content-subdued-default-default)\">\n {balance}\n </Text>\n </BalanceContainer>\n </ContentContainer>\n </Wrapper>\n );\n};\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAAqB;AACrB,iBAAoB;AACpB,qBAAwB;AAoBxB,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBH,MAAM,mBAAmB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUhC,MAAM,uBAAuB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASpC,MAAM,UAAU,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASvB,MAAM,UAAU,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASvB,MAAM,aAAa,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS1B,MAAM,mBAAmB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQzB,MAAM,cAAc,CAAC,EAAE,SAAS,SAAS,WAAW,KAAK,MAAwB;AACtF,QAAM,EAAE,MAAM,SAAS,WAAW,UAAU,SAAS,QAAQ,UAAU,SAAS,IAAI;AAEpF,SACE,6BAAAC,QAAA,cAAC,WAAQ,WACP,6BAAAA,QAAA,cAAC,wBACC,6BAAAA,QAAA,cAAC,4BACC,6BAAAA,QAAA,cAAC,eACC,6BAAAA,QAAA,cAAC,eACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAM;AAAA,MACN,UAAS;AAAA,MACT,YAAW;AAAA,MACX,OAAO;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,cAAc;AAAA,MAChB;AAAA;AAAA,IAEC;AAAA,EACH,CACF,GACC,YACC,6BAAAA,QAAA,cAAC,kBACC,6BAAAA,QAAA,cAAC,kBAAI,eAAc,eAAa,QAAS,CAC3C,CAEJ,GACA,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,CACF,GACA,6BAAAA,QAAA,cAAC,wBACC,6BAAAA,QAAA,cAAC,0BAAK,UAAS,UAAQ,SAAU,GACjC,6BAAAA,QAAA,cAAC,0BAAK,UAAS,QAAO,OAAM,mDACzB,OACH,CACF,CACF,CACF;AAEJ;",
6
6
  "names": ["styled", "React"]
7
7
  }
@@ -47,7 +47,8 @@ const Address = ({
47
47
  address,
48
48
  showIcon,
49
49
  cryptoId,
50
- ticker
50
+ ticker,
51
+ parentId
51
52
  }) => {
52
53
  return /* @__PURE__ */ import_react.default.createElement(Wrapper, null, /* @__PURE__ */ import_react.default.createElement(
53
54
  import_components.Text,
@@ -57,6 +58,6 @@ const Address = ({
57
58
  color: "var(--colors-content-subdued-default-default)"
58
59
  },
59
60
  address
60
- ), showIcon && /* @__PURE__ */ import_react.default.createElement(import_CryptoIcon.CryptoIcon, { ledgerId: cryptoId, ticker }));
61
+ ), showIcon && /* @__PURE__ */ import_react.default.createElement(import_CryptoIcon.CryptoIcon, { ledgerId: cryptoId, ticker, network: parentId }));
61
62
  };
62
63
  //# sourceMappingURL=Address.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/pre-ldls/components/Address/Address.tsx"],
4
- "sourcesContent": ["import React from \"react\";\nimport { Text } from \"../../../components\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { CryptoIcon } from \"../CryptoIcon/CryptoIcon\";\n\nconst Wrapper = styled.div`\n ${withTokens(\"spacing-xxxs\", \"colors-content-subdued-default-default\")}\n\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nexport const Address = ({\n address,\n showIcon,\n cryptoId,\n ticker,\n}: {\n address: string;\n showIcon: boolean;\n cryptoId?: string;\n ticker?: string;\n}) => {\n return (\n <Wrapper>\n <Text\n marginRight=\"var(--spacing-xxxs)\"\n fontSize=\"12px\"\n color=\"var(--colors-content-subdued-default-default)\"\n >\n {address}\n </Text>\n {showIcon && <CryptoIcon ledgerId={cryptoId} ticker={ticker} />}\n </Wrapper>\n );\n};\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,wBAAqB;AACrB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAA2B;AAE3B,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB,wBAAW,gBAAgB,wCAAwC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjE,MAAM,UAAU,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAKM;AACJ,SACE,6BAAAC,QAAA,cAAC,eACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,aAAY;AAAA,MACZ,UAAS;AAAA,MACT,OAAM;AAAA;AAAA,IAEL;AAAA,EACH,GACC,YAAY,6BAAAA,QAAA,cAAC,gCAAW,UAAU,UAAU,QAAgB,CAC/D;AAEJ;",
4
+ "sourcesContent": ["import React from \"react\";\nimport { Text } from \"../../../components\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { CryptoIcon } from \"../CryptoIcon/CryptoIcon\";\n\nconst Wrapper = styled.div`\n ${withTokens(\"spacing-xxxs\", \"colors-content-subdued-default-default\")}\n\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nexport const Address = ({\n address,\n showIcon,\n cryptoId,\n ticker,\n parentId,\n}: {\n address: string;\n showIcon: boolean;\n cryptoId?: string;\n ticker?: string;\n parentId?: string;\n}) => {\n return (\n <Wrapper>\n <Text\n marginRight=\"var(--spacing-xxxs)\"\n fontSize=\"12px\"\n color=\"var(--colors-content-subdued-default-default)\"\n >\n {address}\n </Text>\n {showIcon && <CryptoIcon ledgerId={cryptoId} ticker={ticker} network={parentId} />}\n </Wrapper>\n );\n};\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,wBAAqB;AACrB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAA2B;AAE3B,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB,wBAAW,gBAAgB,wCAAwC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjE,MAAM,UAAU,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAMM;AACJ,SACE,6BAAAC,QAAA,cAAC,eACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,aAAY;AAAA,MACZ,UAAS;AAAA,MACT,OAAM;AAAA;AAAA,IAEL;AAAA,EACH,GACC,YAAY,6BAAAA,QAAA,cAAC,gCAAW,UAAU,UAAU,QAAgB,SAAS,UAAU,CAClF;AAEJ;",
6
6
  "names": ["styled", "React"]
7
7
  }
@@ -47,6 +47,7 @@ const Wrapper = import_styled_components.default.div`
47
47
  border-radius: var(--radius-xs);
48
48
  display: inline-flex;
49
49
  background-color: var(--colors-surface-transparent-subdued-default);
50
+ flex-shrink: 0;
50
51
  `;
51
52
  const Tag = ({
52
53
  textTransform = "none",
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/pre-ldls/components/Tag/Tag.tsx"],
4
- "sourcesContent": ["import React, { ReactNode } from \"react\";\nimport { Text } from \"../../../components\";\nimport { withTokens } from \"../../libs\";\nimport styled from \"styled-components\";\n\nconst Wrapper = styled.div`\n ${withTokens(\n \"colors-surface-transparent-subdued-default\",\n \"colors-content-subdued-default-default\",\n \"radius-xs\",\n \"spacing-xxxs\",\n )}\n\n padding: 1px var(--spacing-xxxs);\n border-radius: var(--radius-xs);\n display: inline-flex;\n background-color: var(--colors-surface-transparent-subdued-default);\n`;\n\nexport const Tag = ({\n textTransform = \"none\",\n children,\n}: {\n textTransform?: string;\n children: ReactNode;\n}) => {\n return (\n <Wrapper data-testid=\"tag\">\n <Text\n color=\"var(--colors-content-subdued-default-default)\"\n fontSize=\"10px\"\n lineHeight=\"16px\"\n textTransform={textTransform}\n >\n {children}\n </Text>\n </Wrapper>\n );\n};\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAiC;AACjC,wBAAqB;AACrB,kBAA2B;AAC3B,+BAAmB;AAEnB,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQI,MAAM,MAAM,CAAC;AAAA,EAClB,gBAAgB;AAAA,EAChB;AACF,MAGM;AACJ,SACE,6BAAAC,QAAA,cAAC,WAAQ,eAAY,SACnB,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,UAAS;AAAA,MACT,YAAW;AAAA,MACX;AAAA;AAAA,IAEC;AAAA,EACH,CACF;AAEJ;",
4
+ "sourcesContent": ["import React, { ReactNode } from \"react\";\nimport { Text } from \"../../../components\";\nimport { withTokens } from \"../../libs\";\nimport styled from \"styled-components\";\n\nconst Wrapper = styled.div`\n ${withTokens(\n \"colors-surface-transparent-subdued-default\",\n \"colors-content-subdued-default-default\",\n \"radius-xs\",\n \"spacing-xxxs\",\n )}\n\n padding: 1px var(--spacing-xxxs);\n border-radius: var(--radius-xs);\n display: inline-flex;\n background-color: var(--colors-surface-transparent-subdued-default);\n flex-shrink: 0;\n`;\n\nexport const Tag = ({\n textTransform = \"none\",\n children,\n}: {\n textTransform?: string;\n children: ReactNode;\n}) => {\n return (\n <Wrapper data-testid=\"tag\">\n <Text\n color=\"var(--colors-content-subdued-default-default)\"\n fontSize=\"10px\"\n lineHeight=\"16px\"\n textTransform={textTransform}\n >\n {children}\n </Text>\n </Wrapper>\n );\n};\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAiC;AACjC,wBAAqB;AACrB,kBAA2B;AAC3B,+BAAmB;AAEnB,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASI,MAAM,MAAM,CAAC;AAAA,EAClB,gBAAgB;AAAA,EAChB;AACF,MAGM;AACJ,SACE,6BAAAC,QAAA,cAAC,WAAQ,eAAY,SACnB,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,UAAS;AAAA,MACT,YAAW;AAAA,MACX;AAAA;AAAA,IAEC;AAAA,EACH,CACF;AAEJ;",
6
6
  "names": ["styled", "React"]
7
7
  }
@@ -8,6 +8,7 @@ export type Account = {
8
8
  protocol?: string;
9
9
  cryptoId?: string;
10
10
  ticker?: string;
11
+ parentId?: string;
11
12
  };
12
13
  type AccountItemProps = {
13
14
  onClick: () => void;
@@ -1 +1 @@
1
- {"version":3,"file":"AccountItem.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountItem/AccountItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,MAAM,OAAO,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AA8BF,eAAO,MAAM,WAAW,mCAA2C,gBAAgB,sBA4ClF,CAAC"}
1
+ {"version":3,"file":"AccountItem.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountItem/AccountItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,MAAM,OAAO,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAyFF,eAAO,MAAM,WAAW,mCAA2C,gBAAgB,sBAiDlF,CAAC"}
@@ -13,6 +13,11 @@ const Wrapper = styled.div `
13
13
  border-radius: var(--radius-s, 8px);
14
14
  justify-content: space-between;
15
15
  align-items: center;
16
+ width: 100%;
17
+ box-sizing: border-box;
18
+ max-width: 100%;
19
+ min-width: 200px;
20
+ overflow: hidden;
16
21
 
17
22
  :hover {
18
23
  background-color: var(--colors-surface-transparent-hover);
@@ -22,26 +27,72 @@ const Wrapper = styled.div `
22
27
  background-color: var(--colors-surface-transparent-pressed);
23
28
  }
24
29
  `;
30
+ const ContentContainer = styled.div `
31
+ display: flex;
32
+ justify-content: space-between;
33
+ align-items: center;
34
+ min-width: 0;
35
+ flex: 1;
36
+ width: 100%;
37
+ overflow: hidden;
38
+ `;
39
+ const AccountInfoContainer = styled.div `
40
+ display: flex;
41
+ flex-direction: column;
42
+ justify-content: center;
43
+ min-width: 0;
44
+ flex: 1;
45
+ overflow: hidden;
46
+ `;
47
+ const NameRow = styled.div `
48
+ display: flex;
49
+ flex-direction: row;
50
+ align-items: center;
51
+ margin-bottom: var(--spacing-xxxs);
52
+ min-width: 0;
53
+ width: 100%;
54
+ `;
55
+ const NameDiv = styled.div `
56
+ white-space: nowrap;
57
+ overflow: hidden;
58
+ text-overflow: ellipsis;
59
+ min-width: 0;
60
+ flex: 1;
61
+ max-width: fit-content;
62
+ `;
63
+ const TagWrapper = styled.div `
64
+ flex-shrink: 0;
65
+ margin-left: var(--spacing-xxs);
66
+ display: flex;
67
+ flex: 1;
68
+ max-width: fit-content;
69
+ align-items: center;
70
+ `;
71
+ const BalanceContainer = styled.div `
72
+ display: flex;
73
+ flex-direction: column;
74
+ text-align: right;
75
+ flex-shrink: 0;
76
+ margin-left: var(--spacing-xs);
77
+ `;
25
78
  export const AccountItem = ({ onClick, account, showIcon = true }) => {
26
- const { name, balance, fiatValue, protocol, address, ticker, cryptoId } = account;
79
+ const { name, balance, fiatValue, protocol, address, ticker, cryptoId, parentId } = account;
27
80
  return (React.createElement(Wrapper, { onClick: onClick },
28
- React.createElement("div", { style: {
29
- display: "flex",
30
- justifyContent: "space-between",
31
- alignItems: "center",
32
- } },
33
- React.createElement("div", { style: { display: "flex", flexDirection: "column", justifyContent: "center" } },
34
- React.createElement("div", { style: {
35
- display: "flex",
36
- flexDirection: "row",
37
- alignItems: "center",
38
- marginBottom: "var(--spacing-xxxs)",
39
- } },
40
- React.createElement(Text, { variant: "largeLineHeight", fontWeight: "semiBold", color: "var(--colors-content-default-default)", marginRight: "var(--spacing-xxs)", fontSize: "14px", lineHeight: "20px" }, name),
41
- protocol && React.createElement(Tag, { textTransform: "capitalize" }, protocol)),
42
- React.createElement(Address, { address: address, cryptoId: cryptoId, ticker: ticker, showIcon: showIcon }))),
43
- React.createElement("div", { style: { display: "flex", flexDirection: "column", textAlign: "right" } },
44
- React.createElement(Text, { fontSize: "14px" }, fiatValue),
45
- React.createElement(Text, { fontSize: "12px", color: "var(--colors-content-subdued-default-default)" }, balance))));
81
+ React.createElement(ContentContainer, null,
82
+ React.createElement(AccountInfoContainer, null,
83
+ React.createElement(NameRow, null,
84
+ React.createElement(NameDiv, null,
85
+ React.createElement(Text, { variant: "largeLineHeight", fontWeight: "semiBold", color: "var(--colors-content-default-default)", fontSize: "14px", lineHeight: "20px", title: name, style: {
86
+ display: "block",
87
+ whiteSpace: "nowrap",
88
+ overflow: "hidden",
89
+ textOverflow: "ellipsis",
90
+ } }, name)),
91
+ protocol && (React.createElement(TagWrapper, null,
92
+ React.createElement(Tag, { textTransform: "uppercase" }, protocol)))),
93
+ React.createElement(Address, { address: address, cryptoId: cryptoId, ticker: ticker, parentId: parentId, showIcon: showIcon })),
94
+ React.createElement(BalanceContainer, null,
95
+ React.createElement(Text, { fontSize: "14px" }, fiatValue),
96
+ React.createElement(Text, { fontSize: "12px", color: "var(--colors-content-subdued-default-default)" }, balance)))));
46
97
  };
47
98
  //# sourceMappingURL=AccountItem.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"AccountItem.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountItem/AccountItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAmB7C,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CACV,cAAc,EACd,aAAa,EACb,YAAY,EACZ,UAAU,EACV,gCAAgC,EAChC,kCAAkC,EAClC,oCAAoC,EACpC,wCAAwC,CACzC;;;;;;;;;;;;;;;;CAgBF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,GAAG,IAAI,EAAoB,EAAE,EAAE;IACrF,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC;IAElF,OAAO,CACL,oBAAC,OAAO,IAAC,OAAO,EAAE,OAAO;QACvB,6BACE,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM;gBACf,cAAc,EAAE,eAAe;gBAC/B,UAAU,EAAE,QAAQ;aACrB;YAED,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE;gBAChF,6BACE,KAAK,EAAE;wBACL,OAAO,EAAE,MAAM;wBACf,aAAa,EAAE,KAAK;wBACpB,UAAU,EAAE,QAAQ;wBACpB,YAAY,EAAE,qBAAqB;qBACpC;oBAED,oBAAC,IAAI,IACH,OAAO,EAAC,iBAAiB,EACzB,UAAU,EAAC,UAAU,EACrB,KAAK,EAAC,uCAAuC,EAC7C,WAAW,EAAC,oBAAoB,EAChC,QAAQ,EAAC,MAAM,EACf,UAAU,EAAC,MAAM,IAEhB,IAAI,CACA;oBACN,QAAQ,IAAI,oBAAC,GAAG,IAAC,aAAa,EAAC,YAAY,IAAE,QAAQ,CAAO,CACzD;gBACN,oBAAC,OAAO,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAI,CACjF,CACF;QACN,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE;YAC1E,oBAAC,IAAI,IAAC,QAAQ,EAAC,MAAM,IAAE,SAAS,CAAQ;YACxC,oBAAC,IAAI,IAAC,QAAQ,EAAC,MAAM,EAAC,KAAK,EAAC,+CAA+C,IACxE,OAAO,CACH,CACH,CACE,CACX,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"AccountItem.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountItem/AccountItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAoB7C,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CACV,cAAc,EACd,aAAa,EACb,YAAY,EACZ,UAAU,EACV,gCAAgC,EAChC,kCAAkC,EAClC,oCAAoC,EACpC,wCAAwC,CACzC;;;;;;;;;;;;;;;;;;;;;CAqBF,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;CAQlC,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOtC,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOzB,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOzB,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO5B,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMlC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,GAAG,IAAI,EAAoB,EAAE,EAAE;IACrF,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC;IAE5F,OAAO,CACL,oBAAC,OAAO,IAAC,OAAO,EAAE,OAAO;QACvB,oBAAC,gBAAgB;YACf,oBAAC,oBAAoB;gBACnB,oBAAC,OAAO;oBACN,oBAAC,OAAO;wBACN,oBAAC,IAAI,IACH,OAAO,EAAC,iBAAiB,EACzB,UAAU,EAAC,UAAU,EACrB,KAAK,EAAC,uCAAuC,EAC7C,QAAQ,EAAC,MAAM,EACf,UAAU,EAAC,MAAM,EACjB,KAAK,EAAE,IAAI,EACX,KAAK,EAAE;gCACL,OAAO,EAAE,OAAO;gCAChB,UAAU,EAAE,QAAQ;gCACpB,QAAQ,EAAE,QAAQ;gCAClB,YAAY,EAAE,UAAU;6BACzB,IAEA,IAAI,CACA,CACC;oBACT,QAAQ,IAAI,CACX,oBAAC,UAAU;wBACT,oBAAC,GAAG,IAAC,aAAa,EAAC,WAAW,IAAE,QAAQ,CAAO,CACpC,CACd,CACO;gBACV,oBAAC,OAAO,IACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAClB,CACmB;YACvB,oBAAC,gBAAgB;gBACf,oBAAC,IAAI,IAAC,QAAQ,EAAC,MAAM,IAAE,SAAS,CAAQ;gBACxC,oBAAC,IAAI,IAAC,QAAQ,EAAC,MAAM,EAAC,KAAK,EAAC,+CAA+C,IACxE,OAAO,CACH,CACU,CACF,CACX,CACX,CAAC;AACJ,CAAC,CAAC"}
@@ -1,8 +1,9 @@
1
1
  import React from "react";
2
- export declare const Address: ({ address, showIcon, cryptoId, ticker, }: {
2
+ export declare const Address: ({ address, showIcon, cryptoId, ticker, parentId, }: {
3
3
  address: string;
4
4
  showIcon: boolean;
5
5
  cryptoId?: string | undefined;
6
6
  ticker?: string | undefined;
7
+ parentId?: string | undefined;
7
8
  }) => React.JSX.Element;
8
9
  //# sourceMappingURL=Address.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Address.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Address/Address.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,eAAO,MAAM,OAAO;aAMT,MAAM;cACL,OAAO;;;uBAgBlB,CAAC"}
1
+ {"version":3,"file":"Address.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Address/Address.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,eAAO,MAAM,OAAO;aAOT,MAAM;cACL,OAAO;;;;uBAiBlB,CAAC"}
@@ -10,9 +10,9 @@ const Wrapper = styled.div `
10
10
  flex-direction: row;
11
11
  align-items: center;
12
12
  `;
13
- export const Address = ({ address, showIcon, cryptoId, ticker, }) => {
13
+ export const Address = ({ address, showIcon, cryptoId, ticker, parentId, }) => {
14
14
  return (React.createElement(Wrapper, null,
15
15
  React.createElement(Text, { marginRight: "var(--spacing-xxxs)", fontSize: "12px", color: "var(--colors-content-subdued-default-default)" }, address),
16
- showIcon && React.createElement(CryptoIcon, { ledgerId: cryptoId, ticker: ticker })));
16
+ showIcon && React.createElement(CryptoIcon, { ledgerId: cryptoId, ticker: ticker, network: parentId })));
17
17
  };
18
18
  //# sourceMappingURL=Address.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Address.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Address/Address.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CAAC,cAAc,EAAE,wCAAwC,CAAC;;;;;CAKvE,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,MAAM,GAMP,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,OAAO;QACN,oBAAC,IAAI,IACH,WAAW,EAAC,qBAAqB,EACjC,QAAQ,EAAC,MAAM,EACf,KAAK,EAAC,+CAA+C,IAEpD,OAAO,CACH;QACN,QAAQ,IAAI,oBAAC,UAAU,IAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,GAAI,CACvD,CACX,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"Address.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Address/Address.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CAAC,cAAc,EAAE,wCAAwC,CAAC;;;;;CAKvE,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,QAAQ,GAOT,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,OAAO;QACN,oBAAC,IAAI,IACH,WAAW,EAAC,qBAAqB,EACjC,QAAQ,EAAC,MAAM,EACf,KAAK,EAAC,+CAA+C,IAEpD,OAAO,CACH;QACN,QAAQ,IAAI,oBAAC,UAAU,IAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,GAAI,CAC1E,CACX,CAAC;AACJ,CAAC,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAmBzC,eAAO,MAAM,GAAG;;cAKJ,SAAS;uBAcpB,CAAC"}
1
+ {"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAoBzC,eAAO,MAAM,GAAG;;cAKJ,SAAS;uBAcpB,CAAC"}
@@ -9,6 +9,7 @@ const Wrapper = styled.div `
9
9
  border-radius: var(--radius-xs);
10
10
  display: inline-flex;
11
11
  background-color: var(--colors-surface-transparent-subdued-default);
12
+ flex-shrink: 0;
12
13
  `;
13
14
  export const Tag = ({ textTransform = "none", children, }) => {
14
15
  return (React.createElement(Wrapper, { "data-testid": "tag" },
@@ -1 +1 @@
1
- {"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CACV,4CAA4C,EAC5C,wCAAwC,EACxC,WAAW,EACX,cAAc,CACf;;;;;;CAMF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,EAClB,aAAa,GAAG,MAAM,EACtB,QAAQ,GAIT,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,OAAO,mBAAa,KAAK;QACxB,oBAAC,IAAI,IACH,KAAK,EAAC,+CAA+C,EACrD,QAAQ,EAAC,MAAM,EACf,UAAU,EAAC,MAAM,EACjB,aAAa,EAAE,aAAa,IAE3B,QAAQ,CACJ,CACC,CACX,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CACV,4CAA4C,EAC5C,wCAAwC,EACxC,WAAW,EACX,cAAc,CACf;;;;;;;CAOF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,EAClB,aAAa,GAAG,MAAM,EACtB,QAAQ,GAIT,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,OAAO,mBAAa,KAAK;QACxB,oBAAC,IAAI,IACH,KAAK,EAAC,+CAA+C,EACrD,QAAQ,EAAC,MAAM,EACf,UAAU,EAAC,MAAM,EACjB,aAAa,EAAE,aAAa,IAE3B,QAAQ,CACJ,CACC,CACX,CAAC;AACJ,CAAC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ledgerhq/react-ui",
3
- "version": "0.27.0-nightly.1",
3
+ "version": "0.27.0-nightly.2",
4
4
  "description": "Ledger Live - Desktop UI",
5
5
  "author": "Ledger Live Team <team-live@ledger.fr>",
6
6
  "repository": {
@@ -76,8 +76,8 @@
76
76
  "react-window": "^1.8.6",
77
77
  "styled-system": "^5.1.5",
78
78
  "@ledgerhq/crypto-icons-ui": "^1.14.0",
79
- "@ledgerhq/icons-ui": "^0.10.0",
80
- "@ledgerhq/ui-shared": "^0.3.0"
79
+ "@ledgerhq/ui-shared": "^0.3.0",
80
+ "@ledgerhq/icons-ui": "^0.10.0"
81
81
  },
82
82
  "peerDependencies": {
83
83
  "react": ">=17.0.2",