@ledgerhq/react-ui 0.14.16-next.0 → 0.14.16
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.
|
@@ -96,9 +96,11 @@ const Story = {
|
|
|
96
96
|
name: {
|
|
97
97
|
type: "enum",
|
|
98
98
|
description: "[Only for single icon], Icon name",
|
|
99
|
-
options: Object.keys(cryptoIcons),
|
|
100
99
|
control: {
|
|
101
|
-
|
|
100
|
+
options: Object.keys(cryptoIcons),
|
|
101
|
+
control: {
|
|
102
|
+
type: "select"
|
|
103
|
+
}
|
|
102
104
|
}
|
|
103
105
|
},
|
|
104
106
|
circleIcon: {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/asorted/Icon/CryptoIcons.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport { Text, SearchInput, Flex, Grid, CryptoIcon } from \"../../..\";\nimport * as cryptoIcons from \"@ledgerhq/crypto-icons-ui/react\";\n\nconst description = `\n### A customizable crypto-icon component.\n\n### Props\n\n\\`\\`\\`tsx\ntype Props = {\n name: string;\n size?: number;\n color?: string;\n backgroundColor?: string; // overrides background color to ensure contrast with icon color\n circleIcon?: boolean; // if icon is in a circle or not\n tokenIcon?: string; // ref to the token icon to show as a sub icon\n disabled?: boolean;\n fallback?: JSX.Element; // fallback element if no icon found - defaults to an icon with first letter of icon name\n};\n\\`\\`\\`\n`;\n\ntype CryptoIconsProps = {\n name: keyof typeof cryptoIcons;\n size?: number;\n color?: string;\n circleIcon?: boolean;\n disabled?: boolean;\n tokenIcon?: string;\n};\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/CryptoIcons\",\n argTypes: {\n size: {\n type: \"number\",\n description: \"Icon size for preview\",\n },\n color: {\n type: \"string\",\n description: \"Color\",\n control: { control: \"color\" },\n },\n name: {\n type: \"enum\",\n description: \"[Only for single icon], Icon name\",\n options: Object.keys(cryptoIcons),\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,eAA0D;AAC1D,kBAA6B;AAE7B,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BpB,MAAM,iBAAa,yBAAAA,SAAO,aAAI;AAAA;AAAA;AAAA,IAG1B,OAAK,EAAE,MAAM,SAAS,CAAC;AAAA;AAG3B,MAAM,gBAAY,yBAAAA,SAAO,aAAI,EAAE,MAAM;AAAA,EACnC,MAAM;AAAA,EACN,eAAe;AAAA,EACf,GAAG;AACL,CAAC;AAAA;AAAA;AAAA;AAKD,MAAM,oBAAgB,yBAAAA,SAAO,aAAI,EAAE,MAA4B;AAAA,EAC7D,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,GAAG;AACL,CAAC;AAAA,IACG,OAAM,EAAE,SAAS,qBAAqB,EAAE,MAAM,OAAO,QAAQ,GAAG,MAAM,EAAG;AAAA;AAAA;AAAA;AAK7E,MAAM,OAAO,yBAAAA,QAAO;AAAA,WACT,OAAK,EAAE,MAAM,OAAO,QAAQ,GAAG;AAAA;AAG1C,MAAM,QAAQ;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,aAAa;AAAA,IACf;AAAA,IACA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,SAAS,EAAE,SAAS,QAAQ;AAAA,IAC9B;AAAA,IACA,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,aAAa;AAAA,MACb,SAAS,OAAO,KAAK,WAAW;AAAA,
|
|
4
|
+
"sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport { Text, SearchInput, Flex, Grid, CryptoIcon } from \"../../..\";\nimport * as cryptoIcons from \"@ledgerhq/crypto-icons-ui/react\";\n\nconst description = `\n### A customizable crypto-icon component.\n\n### Props\n\n\\`\\`\\`tsx\ntype Props = {\n name: string;\n size?: number;\n color?: string;\n backgroundColor?: string; // overrides background color to ensure contrast with icon color\n circleIcon?: boolean; // if icon is in a circle or not\n tokenIcon?: string; // ref to the token icon to show as a sub icon\n disabled?: boolean;\n fallback?: JSX.Element; // fallback element if no icon found - defaults to an icon with first letter of icon name\n};\n\\`\\`\\`\n`;\n\ntype CryptoIconsProps = {\n name: keyof typeof cryptoIcons;\n size?: number;\n color?: string;\n circleIcon?: boolean;\n disabled?: boolean;\n tokenIcon?: string;\n};\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/CryptoIcons\",\n argTypes: {\n size: {\n type: \"number\",\n description: \"Icon size for preview\",\n },\n color: {\n type: \"string\",\n description: \"Color\",\n control: { control: \"color\" },\n },\n name: {\n type: \"enum\",\n description: \"[Only for single icon], Icon name\",\n control: {\n options: Object.keys(cryptoIcons),\n control: {\n type: \"select\",\n },\n },\n },\n circleIcon: {\n type: \"boolean\",\n description: \"if icon is in a circle or not\",\n },\n disabled: {\n type: \"boolean\",\n description: \"if icon is in a disabled or not\",\n },\n tokenIcon: {\n type: \"string\",\n description: \"ref to the token icon to show as a sub icon\",\n },\n },\n args: {\n size: 32,\n name: \"BTC\",\n circleIcon: false,\n disabled: false,\n tokenIcon: \"\",\n },\n parameters: {\n docs: {\n description: {\n component: description,\n },\n },\n },\n};\nexport default Story;\n\nconst ListTemplate = (args: CryptoIconsProps) => {\n const color = args.color || undefined;\n const [search, setSearch] = useState(\"\");\n const s = search.toLowerCase();\n const regexp = new RegExp(s, \"i\");\n\n const { tokenIcon, disabled, circleIcon, size } = args;\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 {Object.keys(cryptoIcons)\n .sort((a, b) => {\n return s ? b.toLowerCase().indexOf(s) - a.toLowerCase().indexOf(s) : a.localeCompare(b);\n })\n // @ts-expect-error FIXME I don't know how to make you happy ts\n .map((name: keyof typeof cryptoIcons) => {\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 <CryptoIcon\n key={name}\n name={name}\n size={size}\n color={color}\n disabled={disabled}\n circleIcon={circleIcon}\n tokenIcon={tokenIcon}\n />\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 IconTemplate = (args: CryptoIconsProps) => {\n const color = args.color || undefined;\n\n return <CryptoIcon {...args} color={color} />;\n};\n\nexport const ListCryptoIcons = ListTemplate.bind({});\nexport const SingleCryptoIcon = IconTemplate.bind({});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["styled", "React"]
|
|
7
7
|
}
|
|
@@ -70,12 +70,58 @@ IconGrid.args = {
|
|
|
70
70
|
};
|
|
71
71
|
IconGrid.argTypes = {
|
|
72
72
|
size: {
|
|
73
|
-
options: ["XS", "S", "M", "L", "XL"],
|
|
74
73
|
control: {
|
|
75
|
-
type: "select"
|
|
74
|
+
type: "select",
|
|
75
|
+
options: ["XS", "S", "M", "L", "XL"]
|
|
76
76
|
}
|
|
77
77
|
},
|
|
78
78
|
color: { control: "color" },
|
|
79
79
|
style: { control: "object" }
|
|
80
80
|
};
|
|
81
|
+
IconGrid.parameters = {
|
|
82
|
+
docs: {
|
|
83
|
+
description: {
|
|
84
|
+
component: `
|
|
85
|
+
### Adding New Icons to @ledgerHQ/icons-ui Package
|
|
86
|
+
|
|
87
|
+
1. **Access Figma Core File:**
|
|
88
|
+
- Navigate to the [Figma Core Library](https://www.figma.com/file/lbUZsVWtBdZpuHSv6lTY9U/%E2%9A%9B%EF%B8%8F-Core-Library?type=design&node-id=12801-12882&mode=design&t=jx0X8jco5kW0wHSP-0).
|
|
89
|
+
|
|
90
|
+
2. **Export Medium-sized Icons as SVG:**
|
|
91
|
+
- In Figma, open the medium-sized icons.
|
|
92
|
+
- Select all the icons you want to export.
|
|
93
|
+
- Right-click and choose **Export**.
|
|
94
|
+
- Ensure that the export parameters are already set as needed (no modifications required).
|
|
95
|
+
- Export the selected icons as SVG files.
|
|
96
|
+
|
|
97
|
+
3. **Drop Exported SVGs to icons Package:**
|
|
98
|
+
- Move all the exported SVG files to the \`libs/ui/packages/icons/src/svg\` directory in your project.
|
|
99
|
+
|
|
100
|
+
4. **Build @ledgerHQ/icons-ui Package:**
|
|
101
|
+
- Run the command to build the \`@ledgerHQ/icons-ui\` package:
|
|
102
|
+
\`\`\`
|
|
103
|
+
cd libs/ui/packages/icons && pnpm build
|
|
104
|
+
\`\`\`
|
|
105
|
+
- Alternatively, you can build app dependencies using:
|
|
106
|
+
\`\`\`
|
|
107
|
+
pnpm build:llm:deps
|
|
108
|
+
\`\`\`
|
|
109
|
+
- This step ensures that the updated icons are built into the \`@ledgerHQ/icons-ui\` package.
|
|
110
|
+
|
|
111
|
+
5. **Verify Changes Locally:**
|
|
112
|
+
- Start your local Storybook to ensure the new icons are rendering correctly:
|
|
113
|
+
\`\`\`
|
|
114
|
+
cd libs/ui/packages/react && pnpm storybook
|
|
115
|
+
\`\`\`
|
|
116
|
+
- Open your browser and navigate to [http://localhost:6006](http://localhost:6006).
|
|
117
|
+
- Check that the new icons are visible and functional in the Storybook UI.
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
### Reference
|
|
123
|
+
`
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
};
|
|
81
127
|
//# sourceMappingURL=Icons.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/asorted/Icon/Icons.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport { Story, Meta } from \"@storybook/react\";\nimport * as Icons from \"@ledgerhq/icons-ui/react\";\nimport styled from \"styled-components\";\nimport { Flex, Text } from \"../../..\";\nimport { useTheme } from \"styled-components\";\n\ninterface SizeData {\n size: number;\n stroke: number;\n}\n\ninterface AvailableSizes {\n XS: SizeData;\n S: SizeData;\n M: SizeData;\n L: SizeData;\n XL: SizeData;\n}\n\nexport default {\n title: \"asorted/Icons\",\n component: null, // Since we're rendering multiple icons, we don't have a single component to import\n} as Meta;\n\ninterface IconProps {\n size?: keyof AvailableSizes;\n color?: string;\n style?: React.CSSProperties;\n}\n\nconst IconContainer = styled(Flex).attrs<{ active?: boolean }>({\n flexDirection: \"column\",\n justifyContent: \"flex-end\",\n alignItems: \"center\",\n p: 4,\n fill: \"black\",\n})<{ active?: boolean }>`\n ${p => (p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``)}\n border-radius: 4px;\n height: 100px;\n`;\n\nconst IconGridTemplate: React.FC<IconProps> = ({ size, color, style }) => {\n const iconNames = Object.keys(Icons) as (keyof typeof Icons)[];\n\n const theme = useTheme();\n const selectedColor = color || theme.colors.neutral.c100;\n\n return (\n <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(4, 1fr)\", gap: \"10px\" }}>\n {iconNames.map(iconName => {\n const IconComponent = Icons[iconName];\n return (\n <IconContainer key={iconName}>\n <IconComponent size={size} color={selectedColor} style={style} />\n <Text pt={6}>{iconName}</Text>\n </IconContainer>\n );\n })}\n </div>\n );\n};\n\nexport const IconGrid: Story<IconProps> = (args: IconProps) => <IconGridTemplate {...args} />;\n\nIconGrid.args = {\n size: \"M\",\n color: \"\",\n style: {},\n};\n\nIconGrid.argTypes = {\n size: {\n options: [\"XS\", \"S\", \"M\", \"L\", \"XL\"],\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,YAAuB;AACvB,+BAAmB;AACnB,eAA2B;AAC3B,IAAAA,4BAAyB;AAezB,IAAO,wBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA;AACb;AAQA,MAAM,oBAAgB,yBAAAC,SAAO,aAAI,EAAE,MAA4B;AAAA,EAC7D,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,GAAG;AAAA,EACH,MAAM;AACR,CAAC;AAAA,IACG,OAAM,EAAE,SAAS,qBAAqB,EAAE,MAAM,OAAO,QAAQ,GAAG,MAAM,EAAG;AAAA;AAAA;AAAA;AAK7E,MAAM,mBAAwC,CAAC,EAAE,MAAM,OAAO,MAAM,MAAM;AACxE,QAAM,YAAY,OAAO,KAAK,KAAK;AAEnC,QAAM,YAAQ,oCAAS;AACvB,QAAM,gBAAgB,SAAS,MAAM,OAAO,QAAQ;AAEpD,SACE,6BAAAC,QAAA,cAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,qBAAqB,kBAAkB,KAAK,OAAO,KAC/E,UAAU,IAAI,cAAY;AACzB,UAAM,gBAAgB,MAAM,QAAQ;AACpC,WACE,6BAAAA,QAAA,cAAC,iBAAc,KAAK,YAClB,6BAAAA,QAAA,cAAC,iBAAc,MAAY,OAAO,eAAe,OAAc,GAC/D,6BAAAA,QAAA,cAAC,iBAAK,IAAI,KAAI,QAAS,CACzB;AAAA,EAEJ,CAAC,CACH;AAEJ;AAEO,MAAM,WAA6B,CAAC,SAAoB,6BAAAA,QAAA,cAAC,oBAAkB,GAAG,MAAM;AAE3F,SAAS,OAAO;AAAA,EACd,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO,CAAC;AACV;AAEA,SAAS,WAAW;AAAA,EAClB,MAAM;AAAA,IACJ,SAAS,CAAC,MAAM,KAAK,KAAK,KAAK,IAAI;AAAA,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport { Story, Meta } from \"@storybook/react\";\nimport * as Icons from \"@ledgerhq/icons-ui/react\";\nimport styled from \"styled-components\";\nimport { Flex, Text } from \"../../..\";\nimport { useTheme } from \"styled-components\";\n\ninterface SizeData {\n size: number;\n stroke: number;\n}\n\ninterface AvailableSizes {\n XS: SizeData;\n S: SizeData;\n M: SizeData;\n L: SizeData;\n XL: SizeData;\n}\n\nexport default {\n title: \"asorted/Icons\",\n component: null, // Since we're rendering multiple icons, we don't have a single component to import\n} as Meta;\n\ninterface IconProps {\n size?: keyof AvailableSizes;\n color?: string;\n style?: React.CSSProperties;\n}\n\nconst IconContainer = styled(Flex).attrs<{ active?: boolean }>({\n flexDirection: \"column\",\n justifyContent: \"flex-end\",\n alignItems: \"center\",\n p: 4,\n fill: \"black\",\n})<{ active?: boolean }>`\n ${p => (p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``)}\n border-radius: 4px;\n height: 100px;\n`;\n\nconst IconGridTemplate: React.FC<IconProps> = ({ size, color, style }) => {\n const iconNames = Object.keys(Icons) as (keyof typeof Icons)[];\n\n const theme = useTheme();\n const selectedColor = color || theme.colors.neutral.c100;\n\n return (\n <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(4, 1fr)\", gap: \"10px\" }}>\n {iconNames.map(iconName => {\n const IconComponent = Icons[iconName];\n return (\n <IconContainer key={iconName}>\n <IconComponent size={size} color={selectedColor} style={style} />\n <Text pt={6}>{iconName}</Text>\n </IconContainer>\n );\n })}\n </div>\n );\n};\n\nexport const IconGrid: Story<IconProps> = (args: IconProps) => <IconGridTemplate {...args} />;\n\nIconGrid.args = {\n size: \"M\",\n color: \"\",\n style: {},\n};\n\nIconGrid.argTypes = {\n size: {\n control: {\n type: \"select\",\n options: [\"XS\", \"S\", \"M\", \"L\", \"XL\"],\n },\n },\n color: { control: \"color\" },\n style: { control: \"object\" },\n};\n\nIconGrid.parameters = {\n docs: {\n description: {\n component: `\n### Adding New Icons to @ledgerHQ/icons-ui Package\n\n1. **Access Figma Core File:**\n - Navigate to the [Figma Core Library](https://www.figma.com/file/lbUZsVWtBdZpuHSv6lTY9U/%E2%9A%9B%EF%B8%8F-Core-Library?type=design&node-id=12801-12882&mode=design&t=jx0X8jco5kW0wHSP-0).\n\n2. **Export Medium-sized Icons as SVG:**\n - In Figma, open the medium-sized icons.\n - Select all the icons you want to export.\n - Right-click and choose **Export**.\n - Ensure that the export parameters are already set as needed (no modifications required).\n - Export the selected icons as SVG files.\n\n3. **Drop Exported SVGs to icons Package:**\n - Move all the exported SVG files to the \\`libs/ui/packages/icons/src/svg\\` directory in your project.\n\n4. **Build @ledgerHQ/icons-ui Package:**\n - Run the command to build the \\`@ledgerHQ/icons-ui\\` package:\n \\`\\`\\`\n cd libs/ui/packages/icons && pnpm build\n \\`\\`\\`\n - Alternatively, you can build app dependencies using:\n \\`\\`\\`\n pnpm build:llm:deps\n \\`\\`\\`\n - This step ensures that the updated icons are built into the \\`@ledgerHQ/icons-ui\\` package.\n\n5. **Verify Changes Locally:**\n - Start your local Storybook to ensure the new icons are rendering correctly:\n \\`\\`\\`\n cd libs/ui/packages/react && pnpm storybook\n \\`\\`\\`\n - Open your browser and navigate to [http://localhost:6006](http://localhost:6006).\n - Check that the new icons are visible and functional in the Storybook UI.\n\\n\n\\n\n### Reference\n `,\n },\n },\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,YAAuB;AACvB,+BAAmB;AACnB,eAA2B;AAC3B,IAAAA,4BAAyB;AAezB,IAAO,wBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA;AACb;AAQA,MAAM,oBAAgB,yBAAAC,SAAO,aAAI,EAAE,MAA4B;AAAA,EAC7D,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,GAAG;AAAA,EACH,MAAM;AACR,CAAC;AAAA,IACG,OAAM,EAAE,SAAS,qBAAqB,EAAE,MAAM,OAAO,QAAQ,GAAG,MAAM,EAAG;AAAA;AAAA;AAAA;AAK7E,MAAM,mBAAwC,CAAC,EAAE,MAAM,OAAO,MAAM,MAAM;AACxE,QAAM,YAAY,OAAO,KAAK,KAAK;AAEnC,QAAM,YAAQ,oCAAS;AACvB,QAAM,gBAAgB,SAAS,MAAM,OAAO,QAAQ;AAEpD,SACE,6BAAAC,QAAA,cAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,qBAAqB,kBAAkB,KAAK,OAAO,KAC/E,UAAU,IAAI,cAAY;AACzB,UAAM,gBAAgB,MAAM,QAAQ;AACpC,WACE,6BAAAA,QAAA,cAAC,iBAAc,KAAK,YAClB,6BAAAA,QAAA,cAAC,iBAAc,MAAY,OAAO,eAAe,OAAc,GAC/D,6BAAAA,QAAA,cAAC,iBAAK,IAAI,KAAI,QAAS,CACzB;AAAA,EAEJ,CAAC,CACH;AAEJ;AAEO,MAAM,WAA6B,CAAC,SAAoB,6BAAAA,QAAA,cAAC,oBAAkB,GAAG,MAAM;AAE3F,SAAS,OAAO;AAAA,EACd,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO,CAAC;AACV;AAEA,SAAS,WAAW;AAAA,EAClB,MAAM;AAAA,IACJ,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS,CAAC,MAAM,KAAK,KAAK,KAAK,IAAI;AAAA,IACrC;AAAA,EACF;AAAA,EACA,OAAO,EAAE,SAAS,QAAQ;AAAA,EAC1B,OAAO,EAAE,SAAS,SAAS;AAC7B;AAEA,SAAS,aAAa;AAAA,EACpB,MAAM;AAAA,IACJ,aAAa;AAAA,MACX,WAAW;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;AAAA;AAAA;AAAA;AAAA;AAAA,IAsCb;AAAA,EACF;AACF;",
|
|
6
6
|
"names": ["import_styled_components", "styled", "React"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ledgerhq/react-ui",
|
|
3
|
-
"version": "0.14.16
|
|
3
|
+
"version": "0.14.16",
|
|
4
4
|
"description": "Ledger Live - Desktop UI",
|
|
5
5
|
"author": "Ledger Live Team <team-live@ledger.fr>",
|
|
6
6
|
"repository": {
|
|
@@ -70,8 +70,8 @@
|
|
|
70
70
|
"react-transition-group": "^4.4.2",
|
|
71
71
|
"react-window": "^1.8.6",
|
|
72
72
|
"styled-system": "^5.1.5",
|
|
73
|
-
"@ledgerhq/crypto-icons-ui": "^1.1.0
|
|
74
|
-
"@ledgerhq/icons-ui": "^0.6.3
|
|
73
|
+
"@ledgerhq/crypto-icons-ui": "^1.1.0",
|
|
74
|
+
"@ledgerhq/icons-ui": "^0.6.3",
|
|
75
75
|
"@ledgerhq/ui-shared": "^0.2.1"
|
|
76
76
|
},
|
|
77
77
|
"peerDependencies": {
|
|
@@ -89,8 +89,6 @@
|
|
|
89
89
|
"@storybook/addon-links": "^7.5.3",
|
|
90
90
|
"@storybook/react": "^7.5.3",
|
|
91
91
|
"@storybook/react-webpack5": "^7.5.3",
|
|
92
|
-
"@storybook/blocks": "^7.5.3",
|
|
93
|
-
"@storybook/manager-api": "7.5.3",
|
|
94
92
|
"@svgr/core": "^5.5.0",
|
|
95
93
|
"@svgr/plugin-svgo": "*",
|
|
96
94
|
"@types/color": "^3.0.2",
|