@ledgerhq/react-ui 0.9.2 → 0.9.3-nightly.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.
- package/lib/cjs/components/asorted/Icon/ProviderIcon.js +13 -1
- package/lib/cjs/components/asorted/Icon/ProviderIcon.js.map +2 -2
- package/lib/cjs/components/asorted/Icon/Providers.stories.js +7 -1
- package/lib/cjs/components/asorted/Icon/Providers.stories.js.map +2 -2
- package/lib/cjs/components/asorted/Icon/ProvidersFavicons/index.d.js +92 -0
- package/lib/cjs/components/asorted/Icon/ProvidersFavicons/index.d.js.map +7 -0
- package/lib/cjs/components/asorted/Text/styles.js +4 -0
- package/lib/cjs/components/asorted/Text/styles.js.map +2 -2
- package/lib/cjs/components/cta/Button/index.js +0 -1
- package/lib/cjs/components/cta/Button/index.js.map +2 -2
- package/lib/cjs/styles/theme.js +1 -0
- package/lib/cjs/styles/theme.js.map +2 -2
- package/lib/components/asorted/Icon/ProviderIcon.d.ts +2 -1
- package/lib/components/asorted/Icon/ProviderIcon.js +10 -1
- package/lib/components/asorted/Icon/ProvidersFavicons/index.d.ts +35 -0
- package/lib/components/asorted/Icon/ProvidersFavicons/index.js +34 -0
- package/lib/components/asorted/Text/styles.js +4 -0
- package/lib/components/cta/Button/index.js +0 -1
- package/lib/styles/theme.d.ts +1 -1
- package/lib/styles/theme.js +3 -3
- package/package.json +1 -1
|
@@ -27,7 +27,9 @@ __export(exports, {
|
|
|
27
27
|
sizes: () => sizes
|
|
28
28
|
});
|
|
29
29
|
var providers = __toModule(require("@ledgerhq/icons-ui/react/_ProvidersLogos"));
|
|
30
|
+
var favicons = __toModule(require("./ProvidersFavicons"));
|
|
30
31
|
var import_react = __toModule(require("react"));
|
|
32
|
+
var import_styled_components = __toModule(require("styled-components"));
|
|
31
33
|
const sizes = {
|
|
32
34
|
XXS: 16,
|
|
33
35
|
XS: 24,
|
|
@@ -42,8 +44,18 @@ const iconNames = Array.from(Object.keys(providers).reduce((set, rawKey) => {
|
|
|
42
44
|
set.add(key);
|
|
43
45
|
return set;
|
|
44
46
|
}, new Set()));
|
|
45
|
-
const
|
|
47
|
+
const Favicon = import_styled_components.default.img`
|
|
48
|
+
border-radius: 8px;
|
|
49
|
+
`;
|
|
50
|
+
const ProviderIcon = ({ name, size = "S", boxed = false }) => {
|
|
46
51
|
const maybeIconName = `${name}`;
|
|
52
|
+
if (boxed) {
|
|
53
|
+
return /* @__PURE__ */ import_react.default.createElement(Favicon, {
|
|
54
|
+
width: sizes[size],
|
|
55
|
+
height: sizes[size],
|
|
56
|
+
src: favicons[maybeIconName]
|
|
57
|
+
});
|
|
58
|
+
}
|
|
47
59
|
if (maybeIconName in providers) {
|
|
48
60
|
const Component = providers[maybeIconName];
|
|
49
61
|
return /* @__PURE__ */ import_react.default.createElement(Component, {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/asorted/Icon/ProviderIcon.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as providers from \"@ledgerhq/icons-ui/react/_ProvidersLogos\";\nimport React from \"react\";\n\nexport const sizes = {\n XXS: 16,\n XS: 24,\n S: 32,\n M: 40,\n L: 48,\n XL: 56,\n};\n\nexport type ProviderSizes = keyof typeof sizes;\n\nexport type Props = {\n name: string;\n size?: ProviderSizes;\n};\n\nexport const iconNames = Array.from(\n Object.keys(providers).reduce((set, rawKey) => {\n const key = rawKey\n .replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, \"$1\")\n .replace(/(.+)(Ultra)+$/g, \"$1\");\n if (!set.has(key)) set.add(key);\n return set;\n }, new Set<string>()),\n);\n\nconst ProviderIcon = ({ name, size = \"S\" }: Props): JSX.Element | null => {\n const maybeIconName = `${name}`;\n if (maybeIconName in providers) {\n // @ts-expect-error FIXME I don't know how to make you happy ts\n const Component = providers[maybeIconName];\n return <Component size={sizes[size]} />;\n }\n return null;\n};\n\nexport default ProviderIcon;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAA2B;AAC3B,mBAAkB;
|
|
4
|
+
"sourcesContent": ["import * as providers from \"@ledgerhq/icons-ui/react/_ProvidersLogos\";\nimport * as favicons from \"./ProvidersFavicons\";\n\nimport React from \"react\";\nimport styled from \"styled-components\";\n\nexport const sizes = {\n XXS: 16,\n XS: 24,\n S: 32,\n M: 40,\n L: 48,\n XL: 56,\n};\n\nexport type ProviderSizes = keyof typeof sizes;\n\nexport type Props = {\n name: string;\n size?: ProviderSizes;\n boxed?: boolean;\n};\n\nexport const iconNames = Array.from(\n Object.keys(providers).reduce((set, rawKey) => {\n const key = rawKey\n .replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, \"$1\")\n .replace(/(.+)(Ultra)+$/g, \"$1\");\n if (!set.has(key)) set.add(key);\n return set;\n }, new Set<string>()),\n);\n\nconst Favicon = styled.img`\n border-radius: 8px;\n`;\n\nconst ProviderIcon = ({ name, size = \"S\", boxed = false }: Props): JSX.Element | null => {\n const maybeIconName = `${name}`;\n if (boxed) {\n // @ts-expect-error FIXME I don't know how to make you happy ts\n return <Favicon width={sizes[size]} height={sizes[size]} src={favicons[maybeIconName]} />;\n }\n if (maybeIconName in providers) {\n // @ts-expect-error FIXME I don't know how to make you happy ts\n const Component = providers[maybeIconName];\n return <Component size={sizes[size]} />;\n }\n return null;\n};\n\nexport default ProviderIcon;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAA2B;AAC3B,eAA0B;AAE1B,mBAAkB;AAClB,+BAAmB;AAEZ,MAAM,QAAQ;AAAA,EACnB,KAAK;AAAA,EACL,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA;AAWC,MAAM,YAAY,MAAM,KAC7B,OAAO,KAAK,WAAW,OAAO,CAAC,KAAK,WAAW;AAC7C,QAAM,MAAM,OACT,QAAQ,iDAAiD,MACzD,QAAQ,kBAAkB;AAC7B,MAAI,CAAC,IAAI,IAAI;AAAM,QAAI,IAAI;AAC3B,SAAO;AAAA,GACN,IAAI;AAGT,MAAM,UAAU,iCAAO;AAAA;AAAA;AAIvB,MAAM,eAAe,CAAC,EAAE,MAAM,OAAO,KAAK,QAAQ,YAAuC;AACvF,QAAM,gBAAgB,GAAG;AACzB,MAAI,OAAO;AAET,WAAO,mDAAC,SAAD;AAAA,MAAS,OAAO,MAAM;AAAA,MAAO,QAAQ,MAAM;AAAA,MAAO,KAAK,SAAS;AAAA;AAAA;AAEzE,MAAI,iBAAiB,WAAW;AAE9B,UAAM,YAAY,UAAU;AAC5B,WAAO,mDAAC,WAAD;AAAA,MAAW,MAAM,MAAM;AAAA;AAAA;AAEhC,SAAO;AAAA;AAGT,IAAO,uBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -67,6 +67,11 @@ const Story = {
|
|
|
67
67
|
options: Object.keys(import_ProviderIcon.sizes)
|
|
68
68
|
}
|
|
69
69
|
},
|
|
70
|
+
boxed: {
|
|
71
|
+
type: "boolean",
|
|
72
|
+
description: "Boxed",
|
|
73
|
+
defaultValue: false
|
|
74
|
+
},
|
|
70
75
|
name: {
|
|
71
76
|
type: "enum",
|
|
72
77
|
defaultValue: "France",
|
|
@@ -108,7 +113,8 @@ const ListTemplate = (args) => {
|
|
|
108
113
|
}, /* @__PURE__ */ import_react.default.createElement(import_ProviderIcon.default, {
|
|
109
114
|
key: name,
|
|
110
115
|
name,
|
|
111
|
-
size: args.size
|
|
116
|
+
size: args.size,
|
|
117
|
+
boxed: args.boxed
|
|
112
118
|
})), /* @__PURE__ */ import_react.default.createElement(import__.Text, {
|
|
113
119
|
variant: "extraSmall"
|
|
114
120
|
}, active ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, name.substr(0, index), /* @__PURE__ */ import_react.default.createElement(Bold, null, name.substr(index, s.length)), name.substr(index + s.length)) : name));
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/asorted/Icon/Providers.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport ProviderIcon, {\n iconNames,\n Props as ProviderIconProps,\n sizes as providerSizes,\n} from \"./ProviderIcon\";\nimport { Text, SearchInput, Flex, Grid } from \"../../..\";\n\nconst ScrollArea = styled(Grid)`\n flex: 1;\n height: auto;\n ${(p) => p.theme.overflow.y};\n`;\n\nconst Container = styled(Flex).attrs({\n flex: 1,\n flexDirection: \"column\",\n p: 4,\n})`\n overflow: hidden;\n height: calc(100vh - 4em);\n`;\n\nconst IconContainer = styled(Flex).attrs<{ active?: boolean }>({\n flexDirection: \"column\",\n justifyContent: \"flex-end\",\n alignItems: \"center\",\n p: 4,\n})<{ active?: boolean }>`\n ${(p) => (p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``)}\n border-radius: 4px;\n height: 100px;\n`;\n\nconst Bold = styled.b`\n color: ${(p) => p.theme.colors.primary.c80};\n`;\n\nconst Story = {\n title: \"Asorted/Icons/ProviderIcons\",\n argTypes: {\n size: {\n type: \"enum\",\n description: \"Icon size\",\n defaultValue: \"L\",\n control: {\n options: Object.keys(providerSizes),\n },\n },\n name: {\n type: \"enum\",\n defaultValue: \"France\",\n description: \"[Only for single icon], Icon name\",\n control: {\n options: iconNames,\n control: {\n type: \"select\",\n },\n },\n },\n },\n};\nexport default Story;\n\nconst ListTemplate = (args: ProviderIconProps) => {\n const [search, setSearch] = useState(\"\");\n const s = search.toLowerCase();\n const regexp = new RegExp(s, \"i\");\n\n return (\n <Container>\n <SearchInput value={search} onChange={setSearch} />\n <ScrollArea\n gridTemplateColumns=\"repeat(auto-fill, 100px);\"\n gridTemplateRows=\"repeat(auto-fill, 100px);\"\n gridGap={4}\n mt={4}\n >\n {iconNames\n .sort((a: string, b: string) => {\n return s ? b.toLowerCase().indexOf(s) - a.toLowerCase().indexOf(s) : a.localeCompare(b);\n })\n .map((name) => {\n const match = name.match(regexp);\n const active = s && match;\n const index = match?.index ?? 0;\n return (\n <IconContainer active={!!active}>\n <Flex flex={1} justifyContent=\"center\" alignItems=\"center\">\n <ProviderIcon key={name} name={name} size={args.size} />\n </Flex>\n <Text variant=\"extraSmall\">\n {active ? (\n <>\n {name.substr(0, index)}\n <Bold>{name.substr(index, s.length)}</Bold>\n {name.substr(index + s.length)}\n </>\n ) : (\n name\n )}\n </Text>\n </IconContainer>\n );\n })}\n </ScrollArea>\n </Container>\n );\n};\nconst FlagTemplate = (args: ProviderIconProps) => {\n return <ProviderIcon {...args} />;\n};\n\nexport const List = ListTemplate.bind({});\nexport const SingleIcon = FlagTemplate.bind({});\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,0BAIO;AACP,eAA8C;AAE9C,MAAM,aAAa,sCAAO;AAAA;AAAA;AAAA,IAGtB,CAAC,MAAM,EAAE,MAAM,SAAS;AAAA;AAG5B,MAAM,YAAY,sCAAO,eAAM,MAAM;AAAA,EACnC,MAAM;AAAA,EACN,eAAe;AAAA,EACf,GAAG;AAAA;AAAA;AAAA;AAAA;AAML,MAAM,gBAAgB,sCAAO,eAAM,MAA4B;AAAA,EAC7D,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,GAAG;AAAA;AAAA,IAED,CAAC,MAAO,EAAE,SAAS,qBAAqB,EAAE,MAAM,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAK5E,MAAM,OAAO,iCAAO;AAAA,WACT,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAGzC,MAAM,QAAQ;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,QACP,SAAS,OAAO,KAAK;AAAA;AAAA;AAAA,IAGzB,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aAAa;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,UACP,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAMhB,IAAO,4BAAQ;AAEf,MAAM,eAAe,CAAC,SAA4B;AAChD,QAAM,CAAC,QAAQ,aAAa,2BAAS;AACrC,QAAM,IAAI,OAAO;AACjB,QAAM,SAAS,IAAI,OAAO,GAAG;AAE7B,SACE,mDAAC,WAAD,MACE,mDAAC,sBAAD;AAAA,IAAa,OAAO;AAAA,IAAQ,UAAU;AAAA,MACtC,mDAAC,YAAD;AAAA,IACE,qBAAoB;AAAA,IACpB,kBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,IAAI;AAAA,KAEH,8BACE,KAAK,CAAC,GAAW,MAAc;AAC9B,WAAO,IAAI,EAAE,cAAc,QAAQ,KAAK,EAAE,cAAc,QAAQ,KAAK,EAAE,cAAc;AAAA,KAEtF,IAAI,CAAC,SAAS;AACb,UAAM,QAAQ,KAAK,MAAM;AACzB,UAAM,SAAS,KAAK;AACpB,UAAM,QAAQ,OAAO,SAAS;AAC9B,WACE,mDAAC,eAAD;AAAA,MAAe,QAAQ,CAAC,CAAC;AAAA,OACvB,mDAAC,eAAD;AAAA,MAAM,MAAM;AAAA,MAAG,gBAAe;AAAA,MAAS,YAAW;AAAA,OAChD,mDAAC,6BAAD;AAAA,MAAc,KAAK;AAAA,MAAM;AAAA,MAAY,MAAM,KAAK;AAAA,
|
|
4
|
+
"sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport ProviderIcon, {\n iconNames,\n Props as ProviderIconProps,\n sizes as providerSizes,\n} from \"./ProviderIcon\";\nimport { Text, SearchInput, Flex, Grid } from \"../../..\";\n\nconst ScrollArea = styled(Grid)`\n flex: 1;\n height: auto;\n ${(p) => p.theme.overflow.y};\n`;\n\nconst Container = styled(Flex).attrs({\n flex: 1,\n flexDirection: \"column\",\n p: 4,\n})`\n overflow: hidden;\n height: calc(100vh - 4em);\n`;\n\nconst IconContainer = styled(Flex).attrs<{ active?: boolean }>({\n flexDirection: \"column\",\n justifyContent: \"flex-end\",\n alignItems: \"center\",\n p: 4,\n})<{ active?: boolean }>`\n ${(p) => (p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``)}\n border-radius: 4px;\n height: 100px;\n`;\n\nconst Bold = styled.b`\n color: ${(p) => p.theme.colors.primary.c80};\n`;\n\nconst Story = {\n title: \"Asorted/Icons/ProviderIcons\",\n argTypes: {\n size: {\n type: \"enum\",\n description: \"Icon size\",\n defaultValue: \"L\",\n control: {\n options: Object.keys(providerSizes),\n },\n },\n boxed: {\n type: \"boolean\",\n description: \"Boxed\",\n defaultValue: false,\n },\n name: {\n type: \"enum\",\n defaultValue: \"France\",\n description: \"[Only for single icon], Icon name\",\n control: {\n options: iconNames,\n control: {\n type: \"select\",\n },\n },\n },\n },\n};\nexport default Story;\n\nconst ListTemplate = (args: ProviderIconProps) => {\n const [search, setSearch] = useState(\"\");\n const s = search.toLowerCase();\n const regexp = new RegExp(s, \"i\");\n\n return (\n <Container>\n <SearchInput value={search} onChange={setSearch} />\n <ScrollArea\n gridTemplateColumns=\"repeat(auto-fill, 100px);\"\n gridTemplateRows=\"repeat(auto-fill, 100px);\"\n gridGap={4}\n mt={4}\n >\n {iconNames\n .sort((a: string, b: string) => {\n return s ? b.toLowerCase().indexOf(s) - a.toLowerCase().indexOf(s) : a.localeCompare(b);\n })\n .map((name) => {\n const match = name.match(regexp);\n const active = s && match;\n const index = match?.index ?? 0;\n return (\n <IconContainer active={!!active}>\n <Flex flex={1} justifyContent=\"center\" alignItems=\"center\">\n <ProviderIcon key={name} name={name} size={args.size} boxed={args.boxed} />\n </Flex>\n <Text variant=\"extraSmall\">\n {active ? (\n <>\n {name.substr(0, index)}\n <Bold>{name.substr(index, s.length)}</Bold>\n {name.substr(index + s.length)}\n </>\n ) : (\n name\n )}\n </Text>\n </IconContainer>\n );\n })}\n </ScrollArea>\n </Container>\n );\n};\nconst FlagTemplate = (args: ProviderIconProps) => {\n return <ProviderIcon {...args} />;\n};\n\nexport const List = ListTemplate.bind({});\nexport const SingleIcon = FlagTemplate.bind({});\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,0BAIO;AACP,eAA8C;AAE9C,MAAM,aAAa,sCAAO;AAAA;AAAA;AAAA,IAGtB,CAAC,MAAM,EAAE,MAAM,SAAS;AAAA;AAG5B,MAAM,YAAY,sCAAO,eAAM,MAAM;AAAA,EACnC,MAAM;AAAA,EACN,eAAe;AAAA,EACf,GAAG;AAAA;AAAA;AAAA;AAAA;AAML,MAAM,gBAAgB,sCAAO,eAAM,MAA4B;AAAA,EAC7D,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,GAAG;AAAA;AAAA,IAED,CAAC,MAAO,EAAE,SAAS,qBAAqB,EAAE,MAAM,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAK5E,MAAM,OAAO,iCAAO;AAAA,WACT,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAGzC,MAAM,QAAQ;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,QACP,SAAS,OAAO,KAAK;AAAA;AAAA;AAAA,IAGzB,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA;AAAA,IAEhB,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aAAa;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,UACP,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAMhB,IAAO,4BAAQ;AAEf,MAAM,eAAe,CAAC,SAA4B;AAChD,QAAM,CAAC,QAAQ,aAAa,2BAAS;AACrC,QAAM,IAAI,OAAO;AACjB,QAAM,SAAS,IAAI,OAAO,GAAG;AAE7B,SACE,mDAAC,WAAD,MACE,mDAAC,sBAAD;AAAA,IAAa,OAAO;AAAA,IAAQ,UAAU;AAAA,MACtC,mDAAC,YAAD;AAAA,IACE,qBAAoB;AAAA,IACpB,kBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,IAAI;AAAA,KAEH,8BACE,KAAK,CAAC,GAAW,MAAc;AAC9B,WAAO,IAAI,EAAE,cAAc,QAAQ,KAAK,EAAE,cAAc,QAAQ,KAAK,EAAE,cAAc;AAAA,KAEtF,IAAI,CAAC,SAAS;AACb,UAAM,QAAQ,KAAK,MAAM;AACzB,UAAM,SAAS,KAAK;AACpB,UAAM,QAAQ,OAAO,SAAS;AAC9B,WACE,mDAAC,eAAD;AAAA,MAAe,QAAQ,CAAC,CAAC;AAAA,OACvB,mDAAC,eAAD;AAAA,MAAM,MAAM;AAAA,MAAG,gBAAe;AAAA,MAAS,YAAW;AAAA,OAChD,mDAAC,6BAAD;AAAA,MAAc,KAAK;AAAA,MAAM;AAAA,MAAY,MAAM,KAAK;AAAA,MAAM,OAAO,KAAK;AAAA,SAEpE,mDAAC,eAAD;AAAA,MAAM,SAAQ;AAAA,OACX,SACC,wFACG,KAAK,OAAO,GAAG,QAChB,mDAAC,MAAD,MAAO,KAAK,OAAO,OAAO,EAAE,UAC3B,KAAK,OAAO,QAAQ,EAAE,WAGzB;AAAA;AAAA;AAUpB,MAAM,eAAe,CAAC,SAA4B;AAChD,SAAO,mDAAC,6BAAD;AAAA,OAAkB;AAAA;AAAA;AAGpB,MAAM,OAAO,aAAa,KAAK;AAC/B,MAAM,aAAa,aAAa,KAAK;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
__markAsModule(target);
|
|
10
|
+
for (var name in all)
|
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
|
+
};
|
|
13
|
+
var __reExport = (target, module2, desc) => {
|
|
14
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
15
|
+
for (let key of __getOwnPropNames(module2))
|
|
16
|
+
if (!__hasOwnProp.call(target, key) && key !== "default")
|
|
17
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
18
|
+
}
|
|
19
|
+
return target;
|
|
20
|
+
};
|
|
21
|
+
var __toModule = (module2) => {
|
|
22
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
23
|
+
};
|
|
24
|
+
__export(exports, {
|
|
25
|
+
Aave: () => import_Aave.default,
|
|
26
|
+
Baanx: () => import_Baanx.default,
|
|
27
|
+
Banxa: () => import_Banxa.default,
|
|
28
|
+
Bitrefill: () => import_Bitrefill.default,
|
|
29
|
+
BtcDirect: () => import_BtcDirect.default,
|
|
30
|
+
Changelly: () => import_Changelly.default,
|
|
31
|
+
CoinGecko: () => import_CoinGecko.default,
|
|
32
|
+
Coinify: () => import_Coinify.default,
|
|
33
|
+
Compound: () => import_Compound.default,
|
|
34
|
+
Deversifi: () => import_Deversifi.default,
|
|
35
|
+
Ftx: () => import_Ftx.default,
|
|
36
|
+
Ftxus: () => import_Ftxus.default,
|
|
37
|
+
Kiln: () => import_Kiln.default,
|
|
38
|
+
LedgerBlack: () => import_LedgerBlack.default,
|
|
39
|
+
LedgerCard: () => import_LedgerCard.default,
|
|
40
|
+
LedgerWhite: () => import_LedgerWhite.default,
|
|
41
|
+
Lido: () => import_Lido.default,
|
|
42
|
+
LoopiPay: () => import_LoopiPay.default,
|
|
43
|
+
Mercuryo: () => import_Mercuryo.default,
|
|
44
|
+
Moonpay: () => import_Moonpay.default,
|
|
45
|
+
Opensea: () => import_Opensea.default,
|
|
46
|
+
PancakeSwap: () => import_PancakeSwap.default,
|
|
47
|
+
Paraswap: () => import_Paraswap.default,
|
|
48
|
+
Poap: () => import_Poap.default,
|
|
49
|
+
RainbowMe: () => import_RainbowMe.default,
|
|
50
|
+
Ramp: () => import_Ramp.default,
|
|
51
|
+
Rarible: () => import_Rarible.default,
|
|
52
|
+
Simplex: () => import_Simplex.default,
|
|
53
|
+
SushiSwap: () => import_SushiSwap.default,
|
|
54
|
+
Transak: () => import_Transak.default,
|
|
55
|
+
Wyre: () => import_Wyre.default,
|
|
56
|
+
Zerion: () => import_Zerion.default,
|
|
57
|
+
_1Inch: () => import_Inch.default
|
|
58
|
+
});
|
|
59
|
+
var import_Inch = __toModule(require("./_1Inch.png"));
|
|
60
|
+
var import_Aave = __toModule(require("./Aave.png"));
|
|
61
|
+
var import_Baanx = __toModule(require("./Baanx.png"));
|
|
62
|
+
var import_Banxa = __toModule(require("./Banxa.png"));
|
|
63
|
+
var import_Bitrefill = __toModule(require("./Bitrefill.png"));
|
|
64
|
+
var import_BtcDirect = __toModule(require("./BtcDirect.png"));
|
|
65
|
+
var import_Changelly = __toModule(require("./Changelly.png"));
|
|
66
|
+
var import_CoinGecko = __toModule(require("./CoinGecko.png"));
|
|
67
|
+
var import_Coinify = __toModule(require("./Coinify.png"));
|
|
68
|
+
var import_Compound = __toModule(require("./Compound.png"));
|
|
69
|
+
var import_Deversifi = __toModule(require("./Deversifi.png"));
|
|
70
|
+
var import_Ftx = __toModule(require("./Ftx.png"));
|
|
71
|
+
var import_Ftxus = __toModule(require("./Ftxus.png"));
|
|
72
|
+
var import_Kiln = __toModule(require("./Kiln.png"));
|
|
73
|
+
var import_LedgerBlack = __toModule(require("./LedgerBlack.png"));
|
|
74
|
+
var import_LedgerWhite = __toModule(require("./LedgerWhite.png"));
|
|
75
|
+
var import_LedgerCard = __toModule(require("./LedgerCard.png"));
|
|
76
|
+
var import_Lido = __toModule(require("./Lido.png"));
|
|
77
|
+
var import_LoopiPay = __toModule(require("./LoopiPay.png"));
|
|
78
|
+
var import_Mercuryo = __toModule(require("./Mercuryo.png"));
|
|
79
|
+
var import_Moonpay = __toModule(require("./Moonpay.png"));
|
|
80
|
+
var import_Opensea = __toModule(require("./Opensea.png"));
|
|
81
|
+
var import_PancakeSwap = __toModule(require("./PancakeSwap.png"));
|
|
82
|
+
var import_Paraswap = __toModule(require("./Paraswap.png"));
|
|
83
|
+
var import_Poap = __toModule(require("./Poap.png"));
|
|
84
|
+
var import_RainbowMe = __toModule(require("./RainbowMe.png"));
|
|
85
|
+
var import_Ramp = __toModule(require("./Ramp.png"));
|
|
86
|
+
var import_Rarible = __toModule(require("./Rarible.png"));
|
|
87
|
+
var import_Simplex = __toModule(require("./Simplex.png"));
|
|
88
|
+
var import_SushiSwap = __toModule(require("./SushiSwap.png"));
|
|
89
|
+
var import_Transak = __toModule(require("./Transak.png"));
|
|
90
|
+
var import_Wyre = __toModule(require("./Wyre.png"));
|
|
91
|
+
var import_Zerion = __toModule(require("./Zerion.png"));
|
|
92
|
+
//# sourceMappingURL=index.d.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../src/components/asorted/Icon/ProvidersFavicons/index.d.ts"],
|
|
4
|
+
"sourcesContent": ["declare module \"*.png\" {\n const value: any;\n export = value;\n}\n\nimport _1Inch from \"./_1Inch.png\";\nimport Aave from \"./Aave.png\";\nimport Baanx from \"./Baanx.png\";\nimport Banxa from \"./Banxa.png\";\nimport Bitrefill from \"./Bitrefill.png\";\nimport BtcDirect from \"./BtcDirect.png\";\nimport Changelly from \"./Changelly.png\";\nimport CoinGecko from \"./CoinGecko.png\";\nimport Coinify from \"./Coinify.png\";\nimport Compound from \"./Compound.png\";\nimport Deversifi from \"./Deversifi.png\";\nimport Ftx from \"./Ftx.png\";\nimport Ftxus from \"./Ftxus.png\";\nimport Kiln from \"./Kiln.png\";\nimport LedgerBlack from \"./LedgerBlack.png\";\nimport LedgerWhite from \"./LedgerWhite.png\";\nimport LedgerCard from \"./LedgerCard.png\";\nimport Lido from \"./Lido.png\";\nimport LoopiPay from \"./LoopiPay.png\";\nimport Mercuryo from \"./Mercuryo.png\";\nimport Moonpay from \"./Moonpay.png\";\nimport Opensea from \"./Opensea.png\";\nimport PancakeSwap from \"./PancakeSwap.png\";\nimport Paraswap from \"./Paraswap.png\";\nimport Poap from \"./Poap.png\";\nimport RainbowMe from \"./RainbowMe.png\";\nimport Ramp from \"./Ramp.png\";\nimport Rarible from \"./Rarible.png\";\nimport Simplex from \"./Simplex.png\";\nimport SushiSwap from \"./SushiSwap.png\";\nimport Transak from \"./Transak.png\";\nimport Wyre from \"./Wyre.png\";\nimport Zerion from \"./Zerion.png\";\n\nexport {\n _1Inch,\n Aave,\n Baanx,\n Banxa,\n Bitrefill,\n BtcDirect,\n Changelly,\n CoinGecko,\n Coinify,\n Compound,\n Deversifi,\n Ftx,\n Ftxus,\n Kiln,\n LedgerBlack,\n LedgerWhite,\n LedgerCard,\n Lido,\n LoopiPay,\n Mercuryo,\n Moonpay,\n Opensea,\n PancakeSwap,\n Paraswap,\n Poap,\n RainbowMe,\n Ramp,\n Rarible,\n Simplex,\n SushiSwap,\n Transak,\n Wyre,\n Zerion,\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA,kBAAmB;AACnB,kBAAiB;AACjB,mBAAkB;AAClB,mBAAkB;AAClB,uBAAsB;AACtB,uBAAsB;AACtB,uBAAsB;AACtB,uBAAsB;AACtB,qBAAoB;AACpB,sBAAqB;AACrB,uBAAsB;AACtB,iBAAgB;AAChB,mBAAkB;AAClB,kBAAiB;AACjB,yBAAwB;AACxB,yBAAwB;AACxB,wBAAuB;AACvB,kBAAiB;AACjB,sBAAqB;AACrB,sBAAqB;AACrB,qBAAoB;AACpB,qBAAoB;AACpB,yBAAwB;AACxB,sBAAqB;AACrB,kBAAiB;AACjB,uBAAsB;AACtB,kBAAiB;AACjB,qBAAoB;AACpB,qBAAoB;AACpB,uBAAsB;AACtB,qBAAoB;AACpB,kBAAiB;AACjB,oBAAmB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/asorted/Text/styles.ts"],
|
|
4
|
-
"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"],
|
|
5
|
-
"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;",
|
|
4
|
+
"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 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 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"],
|
|
5
|
+
"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,SAAS;AAAA,IACP,YAAY;AAAA,IACZ,YAAY;AAAA;AAAA,EAEd,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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/cta/Button/index.tsx"],
|
|
4
|
-
"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
|
|
5
|
-
"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
|
|
4
|
+
"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 &: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"],
|
|
5
|
+
"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,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;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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/lib/cjs/styles/theme.js
CHANGED
|
@@ -83,6 +83,7 @@ fontSizes.largeLineHeight = fontSizes.large;
|
|
|
83
83
|
fontSizes.bodyLineHeight = fontSizes.body;
|
|
84
84
|
fontSizes.paragraphLineHeight = fontSizes.paragraph;
|
|
85
85
|
fontSizes.subtitle = fontSizes.extraSmall;
|
|
86
|
+
fontSizes.h4Inter = fontSizes.h4;
|
|
86
87
|
const fontWeights = {
|
|
87
88
|
extraLight: "100",
|
|
88
89
|
light: "300",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/styles/theme.ts"],
|
|
4
|
-
"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,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAA6C;AAC7C,uBAAuC;AAIhC,MAAM,cAAc;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AAAA;
|
|
4
|
+
"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 | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h4Inter\"\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;\nfontSizes.h4Inter = fontSizes.h4;\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -11,7 +11,8 @@ export declare type ProviderSizes = keyof typeof sizes;
|
|
|
11
11
|
export declare type Props = {
|
|
12
12
|
name: string;
|
|
13
13
|
size?: ProviderSizes;
|
|
14
|
+
boxed?: boolean;
|
|
14
15
|
};
|
|
15
16
|
export declare const iconNames: string[];
|
|
16
|
-
declare const ProviderIcon: ({ name, size }: Props) => JSX.Element | null;
|
|
17
|
+
declare const ProviderIcon: ({ name, size, boxed }: Props) => JSX.Element | null;
|
|
17
18
|
export default ProviderIcon;
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import * as providers from "@ledgerhq/icons-ui/react/_ProvidersLogos";
|
|
2
|
+
import * as favicons from "./ProvidersFavicons";
|
|
2
3
|
import React from "react";
|
|
4
|
+
import styled from "styled-components";
|
|
3
5
|
export const sizes = {
|
|
4
6
|
XXS: 16,
|
|
5
7
|
XS: 24,
|
|
@@ -16,8 +18,15 @@ export const iconNames = Array.from(Object.keys(providers).reduce((set, rawKey)
|
|
|
16
18
|
set.add(key);
|
|
17
19
|
return set;
|
|
18
20
|
}, new Set()));
|
|
19
|
-
const
|
|
21
|
+
const Favicon = styled.img `
|
|
22
|
+
border-radius: 8px;
|
|
23
|
+
`;
|
|
24
|
+
const ProviderIcon = ({ name, size = "S", boxed = false }) => {
|
|
20
25
|
const maybeIconName = `${name}`;
|
|
26
|
+
if (boxed) {
|
|
27
|
+
// @ts-expect-error FIXME I don't know how to make you happy ts
|
|
28
|
+
return React.createElement(Favicon, { width: sizes[size], height: sizes[size], src: favicons[maybeIconName] });
|
|
29
|
+
}
|
|
21
30
|
if (maybeIconName in providers) {
|
|
22
31
|
// @ts-expect-error FIXME I don't know how to make you happy ts
|
|
23
32
|
const Component = providers[maybeIconName];
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/// <reference types="src/assets/images/images" />
|
|
2
|
+
import _1Inch from "*.png";
|
|
3
|
+
import Aave from "*.png";
|
|
4
|
+
import Baanx from "*.png";
|
|
5
|
+
import Banxa from "*.png";
|
|
6
|
+
import Bitrefill from "*.png";
|
|
7
|
+
import BtcDirect from "*.png";
|
|
8
|
+
import Changelly from "*.png";
|
|
9
|
+
import CoinGecko from "*.png";
|
|
10
|
+
import Coinify from "*.png";
|
|
11
|
+
import Compound from "*.png";
|
|
12
|
+
import Deversifi from "*.png";
|
|
13
|
+
import Ftx from "*.png";
|
|
14
|
+
import Ftxus from "*.png";
|
|
15
|
+
import Kiln from "*.png";
|
|
16
|
+
import LedgerBlack from "*.png";
|
|
17
|
+
import LedgerWhite from "*.png";
|
|
18
|
+
import LedgerCard from "*.png";
|
|
19
|
+
import Lido from "*.png";
|
|
20
|
+
import LoopiPay from "*.png";
|
|
21
|
+
import Mercuryo from "*.png";
|
|
22
|
+
import Moonpay from "*.png";
|
|
23
|
+
import Opensea from "*.png";
|
|
24
|
+
import PancakeSwap from "*.png";
|
|
25
|
+
import Paraswap from "*.png";
|
|
26
|
+
import Poap from "*.png";
|
|
27
|
+
import RainbowMe from "*.png";
|
|
28
|
+
import Ramp from "*.png";
|
|
29
|
+
import Rarible from "*.png";
|
|
30
|
+
import Simplex from "*.png";
|
|
31
|
+
import SushiSwap from "*.png";
|
|
32
|
+
import Transak from "*.png";
|
|
33
|
+
import Wyre from "*.png";
|
|
34
|
+
import Zerion from "*.png";
|
|
35
|
+
export { _1Inch, Aave, Baanx, Banxa, Bitrefill, BtcDirect, Changelly, CoinGecko, Coinify, Compound, Deversifi, Ftx, Ftxus, Kiln, LedgerBlack, LedgerWhite, LedgerCard, Lido, LoopiPay, Mercuryo, Moonpay, Opensea, PancakeSwap, Paraswap, Poap, RainbowMe, Ramp, Rarible, Simplex, SushiSwap, Transak, Wyre, Zerion };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import _1Inch from "./_1Inch.png";
|
|
2
|
+
import Aave from "./Aave.png";
|
|
3
|
+
import Baanx from "./Baanx.png";
|
|
4
|
+
import Banxa from "./Banxa.png";
|
|
5
|
+
import Bitrefill from "./Bitrefill.png";
|
|
6
|
+
import BtcDirect from "./BtcDirect.png";
|
|
7
|
+
import Changelly from "./Changelly.png";
|
|
8
|
+
import CoinGecko from "./CoinGecko.png";
|
|
9
|
+
import Coinify from "./Coinify.png";
|
|
10
|
+
import Compound from "./Compound.png";
|
|
11
|
+
import Deversifi from "./Deversifi.png";
|
|
12
|
+
import Ftx from "./Ftx.png";
|
|
13
|
+
import Ftxus from "./Ftxus.png";
|
|
14
|
+
import Kiln from "./Kiln.png";
|
|
15
|
+
import LedgerBlack from "./LedgerBlack.png";
|
|
16
|
+
import LedgerWhite from "./LedgerWhite.png";
|
|
17
|
+
import LedgerCard from "./LedgerCard.png";
|
|
18
|
+
import Lido from "./Lido.png";
|
|
19
|
+
import LoopiPay from "./LoopiPay.png";
|
|
20
|
+
import Mercuryo from "./Mercuryo.png";
|
|
21
|
+
import Moonpay from "./Moonpay.png";
|
|
22
|
+
import Opensea from "./Opensea.png";
|
|
23
|
+
import PancakeSwap from "./PancakeSwap.png";
|
|
24
|
+
import Paraswap from "./Paraswap.png";
|
|
25
|
+
import Poap from "./Poap.png";
|
|
26
|
+
import RainbowMe from "./RainbowMe.png";
|
|
27
|
+
import Ramp from "./Ramp.png";
|
|
28
|
+
import Rarible from "./Rarible.png";
|
|
29
|
+
import Simplex from "./Simplex.png";
|
|
30
|
+
import SushiSwap from "./SushiSwap.png";
|
|
31
|
+
import Transak from "./Transak.png";
|
|
32
|
+
import Wyre from "./Wyre.png";
|
|
33
|
+
import Zerion from "./Zerion.png";
|
|
34
|
+
export { _1Inch, Aave, Baanx, Banxa, Bitrefill, BtcDirect, Changelly, CoinGecko, Coinify, Compound, Deversifi, Ftx, Ftxus, Kiln, LedgerBlack, LedgerWhite, LedgerCard, Lido, LoopiPay, Mercuryo, Moonpay, Opensea, PancakeSwap, Paraswap, Poap, RainbowMe, Ramp, Rarible, Simplex, SushiSwap, Transak, Wyre, Zerion, };
|
package/lib/styles/theme.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import { ColorPalette } from "@ledgerhq/ui-shared";
|
|
|
3
3
|
export declare type screensBreakpoints = "sm" | "md" | "lg" | "xl" | "xxl";
|
|
4
4
|
export declare const breakpoints: Record<screensBreakpoints, string>;
|
|
5
5
|
export declare const space: number[];
|
|
6
|
-
export declare type TextVariants = "h1" | "h2" | "h3" | "h4" | "h5" | "large" | "largeLineHeight" | "body" | "bodyLineHeight" | "paragraph" | "paragraphLineHeight" | "small" | "extraSmall" | "tiny" | "micro" | "subtitle";
|
|
6
|
+
export declare type TextVariants = "h1" | "h2" | "h3" | "h4" | "h4Inter" | "h5" | "large" | "largeLineHeight" | "body" | "bodyLineHeight" | "paragraph" | "paragraphLineHeight" | "small" | "extraSmall" | "tiny" | "micro" | "subtitle";
|
|
7
7
|
export declare type ThemeScale<Type, Aliases extends string> = Array<Type> & Record<Aliases, Type>;
|
|
8
8
|
export declare const fontSizes: ThemeScale<number, TextVariants>;
|
|
9
9
|
export declare const radii: number[];
|
package/lib/styles/theme.js
CHANGED
|
@@ -7,10 +7,9 @@ export const breakpoints = {
|
|
|
7
7
|
xl: "1280px",
|
|
8
8
|
xxl: "1536px",
|
|
9
9
|
};
|
|
10
|
-
/* space indexes:
|
|
11
|
-
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21
|
|
12
|
-
*/
|
|
13
10
|
export const space = [
|
|
11
|
+
/* space indexes:
|
|
12
|
+
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21 */
|
|
14
13
|
0, 2, 4, 8, 10, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 68, 72, 76,
|
|
15
14
|
];
|
|
16
15
|
export const fontSizes = [8, 10, 11, 12, 13, 14, 16, 20, 24, 28, 32, 36];
|
|
@@ -32,6 +31,7 @@ fontSizes.largeLineHeight = fontSizes.large;
|
|
|
32
31
|
fontSizes.bodyLineHeight = fontSizes.body;
|
|
33
32
|
fontSizes.paragraphLineHeight = fontSizes.paragraph;
|
|
34
33
|
fontSizes.subtitle = fontSizes.extraSmall;
|
|
34
|
+
fontSizes.h4Inter = fontSizes.h4;
|
|
35
35
|
const fontWeights = {
|
|
36
36
|
extraLight: "100",
|
|
37
37
|
light: "300",
|