@ledgerhq/react-ui 0.14.14-next.0 → 0.14.15-new-wc-test.0

package/lib/cjs/components/asorted/Icon/CryptoIcons.stories.js

@@ -96,11 +96,9 @@ const Story = {
     name: {
       type: "enum",
       description: "[Only for single icon], Icon name",
+      options: Object.keys(cryptoIcons),
       control: {
-        options: Object.keys(cryptoIcons),
-        control: {
-          type: "select"
-        }
+        type: "select"
       }
     },
     circleIcon: {

package/lib/cjs/components/asorted/Icon/CryptoIcons.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/asorted/Icon/CryptoIcons.stories.tsx"],
-  "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"],
-  "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;AAAA,QACP,SAAS,OAAO,KAAK,WAAW;AAAA,QAChC,SAAS;AAAA,UACP,MAAM;AAAA,QACR;AAAA,MACF;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,MACN,aAAa;AAAA,IACf;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,MACN,aAAa;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,MACN,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,WAAW;AAAA,EACb;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AACF;AACA,IAAO,8BAAQ;AAEf,MAAM,eAAe,CAAC,SAA2B;AAC/C,QAAM,QAAQ,KAAK,SAAS;AAC5B,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,EAAE;AACvC,QAAM,IAAI,OAAO,YAAY;AAC7B,QAAM,SAAS,IAAI,OAAO,GAAG,GAAG;AAEhC,QAAM,EAAE,WAAW,UAAU,YAAY,KAAK,IAAI;AAElD,SACE,6BAAAC,QAAA,cAAC,iBACC,6BAAAA,QAAA,cAAC,wBAAY,OAAO,QAAQ,UAAU,WAAW,GACjD,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,qBAAoB;AAAA,MACpB,kBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,IAAI;AAAA;AAAA,IAEH,OAAO,KAAK,WAAW,EACrB,KAAK,CAAC,GAAG,MAAM;AACd,aAAO,IAAI,EAAE,YAAY,EAAE,QAAQ,CAAC,IAAI,EAAE,YAAY,EAAE,QAAQ,CAAC,IAAI,EAAE,cAAc,CAAC;AAAA,IACxF,CAAC,EAEA,IAAI,CAAC,SAAmC;AACvC,YAAM,QAAQ,KAAK,MAAM,MAAM;AAC/B,YAAM,SAAS,KAAK;AACpB,YAAM,SAAQ,+BAAO,UAAS;AAC9B,aACE,6BAAAA,QAAA,cAAC,iBAAc,QAAQ,CAAC,CAAC,UACvB,6BAAAA,QAAA,cAAC,iBAAK,MAAM,GAAG,gBAAe,UAAS,YAAW,YAChD,6BAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF,CACF,GACA,6BAAAA,QAAA,cAAC,iBAAK,SAAQ,gBACX,SACC,6BAAAA,QAAA,2BAAAA,QAAA,gBACG,KAAK,OAAO,GAAG,KAAK,GACrB,6BAAAA,QAAA,cAAC,YAAM,KAAK,OAAO,OAAO,EAAE,MAAM,CAAE,GACnC,KAAK,OAAO,QAAQ,EAAE,MAAM,CAC/B,IAEA,IAEJ,CACF;AAAA,IAEJ,CAAC;AAAA,EACL,CACF;AAEJ;AACA,MAAM,eAAe,CAAC,SAA2B;AAC/C,QAAM,QAAQ,KAAK,SAAS;AAE5B,SAAO,6BAAAA,QAAA,cAAC,uBAAY,GAAG,MAAM,OAAc;AAC7C;AAEO,MAAM,kBAAkB,aAAa,KAAK,CAAC,CAAC;AAC5C,MAAM,mBAAmB,aAAa,KAAK,CAAC,CAAC;",
+  "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      control: {\n        type: \"select\",\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"],
+  "mappings": "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",
   "names": ["styled", "React"]
 }

package/lib/cjs/components/asorted/Icon/Icons.stories.js

@@ -70,58 +70,12 @@ IconGrid.args = {
 };
 IconGrid.argTypes = {
   size: {
+    options: ["XS", "S", "M", "L", "XL"],
     control: {
-      type: "select",
-      options: ["XS", "S", "M", "L", "XL"]
+      type: "select"
     }
   },
   color: { control: "color" },
   style: { control: "object" }
 };
-IconGrid.parameters = {
-  docs: {
-    description: {
-      component: `
-### Adding New Icons to @ledgerHQ/icons-ui Package
-
-1. **Access Figma Core File:**
-   - 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).
-
-2. **Export Medium-sized Icons as SVG:**
-   - In Figma, open the medium-sized icons.
-   - Select all the icons you want to export.
-   - Right-click and choose **Export**.
-   - Ensure that the export parameters are already set as needed (no modifications required).
-   - Export the selected icons as SVG files.
-
-3. **Drop Exported SVGs to icons Package:**
-   - Move all the exported SVG files to the \`libs/ui/packages/icons/src/svg\` directory in your project.
-
-4. **Build @ledgerHQ/icons-ui Package:**
-   - Run the command to build the \`@ledgerHQ/icons-ui\` package:
-    \`\`\`
-     cd libs/ui/packages/icons && pnpm build
-    \`\`\`
-   - Alternatively, you can build app dependencies using:
-     \`\`\`
-      pnpm build:llm:deps
-     \`\`\`
-   - This step ensures that the updated icons are built into the \`@ledgerHQ/icons-ui\` package.
-
-5. **Verify Changes Locally:**
-   - Start your local Storybook to ensure the new icons are rendering correctly:
-     \`\`\`
-      cd libs/ui/packages/react && pnpm storybook
-     \`\`\`
-   - Open your browser and navigate to [http://localhost:6006](http://localhost:6006).
-   - Check that the new icons are visible and functional in the Storybook UI.
-
-
-
-
-### Reference
-      `
-    }
-  }
-};
 //# sourceMappingURL=Icons.stories.js.map

package/lib/cjs/components/asorted/Icon/Icons.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/asorted/Icon/Icons.stories.tsx"],
-  "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"],
-  "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;",
+  "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    control: {\n      type: \"select\",\n    },\n  },\n  color: { control: \"color\" },\n  style: { control: \"object\" },\n};\n"],
+  "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,IACnC,SAAS;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,OAAO,EAAE,SAAS,QAAQ;AAAA,EAC1B,OAAO,EAAE,SAAS,SAAS;AAC7B;",
   "names": ["import_styled_components", "styled", "React"]
 }

package/lib/cjs/components/index.js

@@ -35,7 +35,6 @@ __export(components_exports, {
 });
 module.exports = __toCommonJS(components_exports);
 __reExport(components_exports, require("./asorted"), module.exports);
-__reExport(components_exports, require("./cards"), module.exports);
 var import_Chart = __toESM(require("./Chart"));
 __reExport(components_exports, require("./cta"), module.exports);
 __reExport(components_exports, require("./form"), module.exports);

package/lib/cjs/components/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/index.ts"],
-  "sourcesContent": ["export * from \"./asorted\";\nexport * from \"./cards\";\nexport { default as Chart } from \"./Chart\";\nexport * from \"./cta\";\nexport * from \"./form\";\nexport * from \"./layout\";\nexport * from \"./loaders\";\nexport * from \"./message\";\nexport * from \"./navigation\";\nexport { default as Table } from \"./Table\";\nexport * from \"./tabs\";\nexport { default as Tag } from \"./Tag\";\nexport * from \"./transitions\";\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAAc,sBAAd;AACA,+BAAc,oBADd;AAEA,mBAAiC;AACjC,+BAAc,kBAHd;AAIA,+BAAc,mBAJd;AAKA,+BAAc,qBALd;AAMA,+BAAc,sBANd;AAOA,+BAAc,sBAPd;AAQA,+BAAc,yBARd;AASA,mBAAiC;AACjC,+BAAc,mBAVd;AAWA,iBAA+B;AAC/B,+BAAc,0BAZd;",
+  "sourcesContent": ["export * from \"./asorted\";\nexport { default as Chart } from \"./Chart\";\nexport * from \"./cta\";\nexport * from \"./form\";\nexport * from \"./layout\";\nexport * from \"./loaders\";\nexport * from \"./message\";\nexport * from \"./navigation\";\nexport { default as Table } from \"./Table\";\nexport * from \"./tabs\";\nexport { default as Tag } from \"./Tag\";\nexport * from \"./transitions\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAAc,sBAAd;AACA,mBAAiC;AACjC,+BAAc,kBAFd;AAGA,+BAAc,mBAHd;AAIA,+BAAc,qBAJd;AAKA,+BAAc,sBALd;AAMA,+BAAc,sBANd;AAOA,+BAAc,yBAPd;AAQA,mBAAiC;AACjC,+BAAc,mBATd;AAUA,iBAA+B;AAC/B,+BAAc,0BAXd;",
   "names": []
 }

package/lib/cjs/components/layout/Carousel/Carousel.stories.js

@@ -0,0 +1,78 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Carousel_stories_exports = {};
+__export(Carousel_stories_exports, {
+  Default: () => Default,
+  default: () => Carousel_stories_default
+});
+module.exports = __toCommonJS(Carousel_stories_exports);
+var import_react = __toESM(require("react"));
+var import__ = __toESM(require("./"));
+const CarouselStory = (args) => {
+  const slides = [...Array(5)].map((_, index) => /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      key: index,
+      style: {
+        backgroundColor: "hsl(" + Math.random() * 360 + ", 100%, 75%)",
+        padding: "15px",
+        borderRadius: "5px"
+      }
+    },
+    "Slide ",
+    index
+  ));
+  return /* @__PURE__ */ import_react.default.createElement(import__.default, { variant: args.variant, children: slides });
+};
+var Carousel_stories_default = {
+  title: "Layout/Carousel",
+  argTypes: {
+    children: {
+      description: "The elements to be displayed."
+    },
+    variant: {
+      description: "Variant for the carousel.",
+      options: ["default", "content-card"],
+      defaultValue: "default",
+      control: { type: "select" }
+    }
+  },
+  args: {
+    variant: "default"
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "A simple Carousel component."
+      }
+    }
+  }
+};
+const Default = CarouselStory.bind({});
+//# sourceMappingURL=Carousel.stories.js.map

package/lib/cjs/components/layout/Carousel/Carousel.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/layout/Carousel/Carousel.stories.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport Carousel from \"./\";\nimport { Props } from \"./types\";\n\nconst CarouselStory = (args: Props) => {\n  const slides = [...Array(5)].map((_, index) => (\n    <div\n      key={index}\n      style={{\n        backgroundColor: \"hsl(\" + Math.random() * 360 + \", 100%, 75%)\",\n        padding: \"15px\",\n        borderRadius: \"5px\",\n      }}\n    >\n      Slide {index}\n    </div>\n  ));\n\n  return <Carousel variant={args.variant} children={slides} />;\n};\n\nexport default {\n  title: \"Layout/Carousel\",\n  argTypes: {\n    children: {\n      description: \"The elements to be displayed.\",\n    },\n    variant: {\n      description: \"Variant for the carousel.\",\n      options: [\"default\", \"content-card\"],\n      defaultValue: \"default\",\n      control: { type: \"select\" },\n    },\n  },\n  args: {\n    variant: \"default\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: \"A simple Carousel component.\",\n      },\n    },\n  },\n};\n\nexport const Default = CarouselStory.bind({});\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,eAAqB;AAGrB,MAAM,gBAAgB,CAAC,SAAgB;AACrC,QAAM,SAAS,CAAC,GAAG,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,UACnC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,OAAO;AAAA,QACL,iBAAiB,SAAS,KAAK,OAAO,IAAI,MAAM;AAAA,QAChD,SAAS;AAAA,QACT,cAAc;AAAA,MAChB;AAAA;AAAA,IACD;AAAA,IACQ;AAAA,EACT,CACD;AAED,SAAO,6BAAAA,QAAA,cAAC,SAAAC,SAAA,EAAS,SAAS,KAAK,SAAS,UAAU,QAAQ;AAC5D;AAEA,IAAO,2BAAQ;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,IACR,UAAU;AAAA,MACR,aAAa;AAAA,IACf;AAAA,IACA,SAAS;AAAA,MACP,aAAa;AAAA,MACb,SAAS,CAAC,WAAW,cAAc;AAAA,MACnC,cAAc;AAAA,MACd,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,EACX;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AACF;AAEO,MAAM,UAAU,cAAc,KAAK,CAAC,CAAC;",
+  "names": ["React", "Carousel"]
+}

package/lib/cjs/components/layout/Carousel/Footer/Pagination/bullets.js

@@ -0,0 +1,76 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var bullets_exports = {};
+__export(bullets_exports, {
+  default: () => bullets_default
+});
+module.exports = __toCommonJS(bullets_exports);
+var import_react = __toESM(require("react"));
+var import_react_spring = require("react-spring");
+var import_styled_components = require("styled-components");
+var import_types = require("./types");
+const defaultBulletStyle = {
+  height: "6px",
+  borderRadius: "1000px",
+  marginRight: "4px",
+  opacity: 1
+};
+const useBulletStyles = () => {
+  const { colors } = (0, import_styled_components.useTheme)();
+  const BulletStyle = {
+    [import_types.ItemStatus.active]: {
+      ...defaultBulletStyle,
+      width: "16px",
+      backgroundColor: colors.opacityDefault.c80
+    },
+    [import_types.ItemStatus.nearby]: {
+      ...defaultBulletStyle,
+      width: "8px",
+      backgroundColor: colors.opacityDefault.c30
+    },
+    [import_types.ItemStatus.far]: {
+      ...defaultBulletStyle,
+      width: "4px",
+      backgroundColor: colors.opacityDefault.c10
+    },
+    [import_types.ItemStatus.none]: {
+      ...defaultBulletStyle,
+      width: "0px",
+      opacity: 0,
+      backgroundColor: colors.opacityDefault.c10,
+      marginRight: "0px"
+    }
+  };
+  return BulletStyle;
+};
+const Bullet = ({ type }) => {
+  return /* @__PURE__ */ import_react.default.createElement(import_react_spring.animated.div, { style: (0, import_react_spring.useSpring)(useBulletStyles()[type]) });
+};
+var bullets_default = Bullet;
+//# sourceMappingURL=bullets.js.map

package/lib/cjs/components/layout/Carousel/Footer/Pagination/bullets.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/components/layout/Carousel/Footer/Pagination/bullets.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport { animated, useSpring } from \"react-spring\";\nimport { useTheme } from \"styled-components\";\nimport { ItemStatus } from \"./types\";\n\nconst defaultBulletStyle = {\n  height: \"6px\",\n  borderRadius: \"1000px\",\n  marginRight: \"4px\",\n  opacity: 1,\n};\n\nconst useBulletStyles = () => {\n  const { colors } = useTheme();\n\n  const BulletStyle: {\n    [key in ItemStatus]: {\n      width: string;\n      height: string;\n      backgroundColor: string;\n      borderRadius: string;\n      opacity?: number;\n      marginRight: string;\n    };\n  } = {\n    [ItemStatus.active]: {\n      ...defaultBulletStyle,\n      width: \"16px\",\n      backgroundColor: colors.opacityDefault.c80,\n    },\n    [ItemStatus.nearby]: {\n      ...defaultBulletStyle,\n      width: \"8px\",\n      backgroundColor: colors.opacityDefault.c30,\n    },\n    [ItemStatus.far]: {\n      ...defaultBulletStyle,\n      width: \"4px\",\n      backgroundColor: colors.opacityDefault.c10,\n    },\n    [ItemStatus.none]: {\n      ...defaultBulletStyle,\n      width: \"0px\",\n      opacity: 0,\n      backgroundColor: colors.opacityDefault.c10,\n      marginRight: \"0px\",\n    },\n  };\n\n  return BulletStyle;\n};\n\nconst Bullet = ({ type }: { type: ItemStatus }) => {\n  return <animated.div style={useSpring(useBulletStyles()[type])} />;\n};\n\nexport default Bullet;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,0BAAoC;AACpC,+BAAyB;AACzB,mBAA2B;AAE3B,MAAM,qBAAqB;AAAA,EACzB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,aAAa;AAAA,EACb,SAAS;AACX;AAEA,MAAM,kBAAkB,MAAM;AAC5B,QAAM,EAAE,OAAO,QAAI,mCAAS;AAE5B,QAAM,cASF;AAAA,IACF,CAAC,wBAAW,MAAM,GAAG;AAAA,MACnB,GAAG;AAAA,MACH,OAAO;AAAA,MACP,iBAAiB,OAAO,eAAe;AAAA,IACzC;AAAA,IACA,CAAC,wBAAW,MAAM,GAAG;AAAA,MACnB,GAAG;AAAA,MACH,OAAO;AAAA,MACP,iBAAiB,OAAO,eAAe;AAAA,IACzC;AAAA,IACA,CAAC,wBAAW,GAAG,GAAG;AAAA,MAChB,GAAG;AAAA,MACH,OAAO;AAAA,MACP,iBAAiB,OAAO,eAAe;AAAA,IACzC;AAAA,IACA,CAAC,wBAAW,IAAI,GAAG;AAAA,MACjB,GAAG;AAAA,MACH,OAAO;AAAA,MACP,SAAS;AAAA,MACT,iBAAiB,OAAO,eAAe;AAAA,MACvC,aAAa;AAAA,IACf;AAAA,EACF;AAEA,SAAO;AACT;AAEA,MAAM,SAAS,CAAC,EAAE,KAAK,MAA4B;AACjD,SAAO,6BAAAA,QAAA,cAAC,6BAAS,KAAT,EAAa,WAAO,+BAAU,gBAAgB,EAAE,IAAI,CAAC,GAAG;AAClE;AAEA,IAAO,kBAAQ;",
+  "names": ["React"]
+}

package/lib/cjs/components/{cards/Carousel/Slide.js → layout/Carousel/Footer/Pagination/index.js}

@@ -26,28 +26,21 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var Slide_exports = {};
-__export(Slide_exports, {
-  default: () => Slide_default
+var Pagination_exports = {};
+__export(Pagination_exports, {
+  default: () => Pagination_default
 });
-module.exports = __toCommonJS(Slide_exports);
+module.exports = __toCommonJS(Pagination_exports);
 var import_react = __toESM(require("react"));
 var import_styled_components = __toESM(require("styled-components"));
-var import_Text = __toESM(require("../../asorted/Text"));
-var import_Flex = __toESM(require("../../layout/Flex"));
-const Wrapper = (0, import_styled_components.default)(import_Flex.default)`
-  width: 100%;
-  height: 100%;
-  flex-direction: column;
-  padding: ${(p) => p.theme.space[8]}px ${(p) => p.theme.space[10]}px;
-  padding-right: 280px; /* Nb gives air to not overlap the illustration */
-  z-index: ${(p) => p.theme.zIndexes[8]};
-  background: url(${(p) => p.image}) no-repeat ${(p) => p.theme.colors.neutral.c100};
-  background-size: contain;
-  background-position: right 60px bottom;
+var import_bullets = __toESM(require("./bullets"));
+var import_utils = require("./utils");
+const FooterCarouselBullets = import_styled_components.default.div`
+  display: flex;
+  align-items: center;
 `;
-const Slide = ({ title, description, image, onClick }) => {
-  return /* @__PURE__ */ import_react.default.createElement(Wrapper, { key: "key", image, onClick }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "tiny", color: "neutral.c00", fontWeight: "regular" }, title), /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "h5", color: "neutral.c00", textTransform: "uppercase" }, description));
+const Pagination = ({ children, currentIndex }) => {
+  return /* @__PURE__ */ import_react.default.createElement(FooterCarouselBullets, null, children.map((child, index) => /* @__PURE__ */ import_react.default.createElement(import_bullets.default, { key: child.key, type: (0, import_utils.getItemStatus)(index, currentIndex) })));
 };
-var Slide_default = Slide;
-//# sourceMappingURL=Slide.js.map
+var Pagination_default = Pagination;
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/layout/Carousel/Footer/Pagination/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/components/layout/Carousel/Footer/Pagination/index.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { SubProps } from \"../../types\";\nimport Bullet from \"./bullets\";\nimport { getItemStatus } from \"./utils\";\n\nconst FooterCarouselBullets = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst Pagination = ({ children, currentIndex }: SubProps) => {\n  return (\n    <FooterCarouselBullets>\n      {children.map((child, index) => (\n        <Bullet key={child.key} type={getItemStatus(index, currentIndex)} />\n      ))}\n    </FooterCarouselBullets>\n  );\n};\n\nexport default Pagination;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AAEnB,qBAAmB;AACnB,mBAA8B;AAE9B,MAAM,wBAAwB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAKrC,MAAM,aAAa,CAAC,EAAE,UAAU,aAAa,MAAgB;AAC3D,SACE,6BAAAC,QAAA,cAAC,6BACE,SAAS,IAAI,CAAC,OAAO,UACpB,6BAAAA,QAAA,cAAC,eAAAC,SAAA,EAAO,KAAK,MAAM,KAAK,UAAM,4BAAc,OAAO,YAAY,GAAG,CACnE,CACH;AAEJ;AAEA,IAAO,qBAAQ;",
+  "names": ["styled", "React", "Bullet"]
+}

package/lib/cjs/components/layout/Carousel/Footer/Pagination/types.js

@@ -0,0 +1,31 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var types_exports = {};
+__export(types_exports, {
+  ItemStatus: () => ItemStatus
+});
+module.exports = __toCommonJS(types_exports);
+var ItemStatus = /* @__PURE__ */ ((ItemStatus2) => {
+  ItemStatus2[ItemStatus2["active"] = 0] = "active";
+  ItemStatus2[ItemStatus2["nearby"] = 1] = "nearby";
+  ItemStatus2[ItemStatus2["far"] = 2] = "far";
+  ItemStatus2[ItemStatus2["none"] = 3] = "none";
+  return ItemStatus2;
+})(ItemStatus || {});
+//# sourceMappingURL=types.js.map

package/lib/cjs/components/layout/Carousel/Footer/Pagination/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/components/layout/Carousel/Footer/Pagination/types.ts"],
+  "sourcesContent": ["export enum ItemStatus {\n  \"active\",\n  \"nearby\",\n  \"far\",\n  \"none\",\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,IAAK,aAAL,kBAAKA,gBAAL;AACL,EAAAA,wBAAA;AACA,EAAAA,wBAAA;AACA,EAAAA,wBAAA;AACA,EAAAA,wBAAA;AAJU,SAAAA;AAAA,GAAA;",
+  "names": ["ItemStatus"]
+}

package/lib/cjs/components/layout/Carousel/Footer/Pagination/utils.js

@@ -0,0 +1,38 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var utils_exports = {};
+__export(utils_exports, {
+  getItemStatus: () => getItemStatus
+});
+module.exports = __toCommonJS(utils_exports);
+var import_types = require("./types");
+const getItemStatus = (itemIndex, activeIndex) => {
+  const itemDistanceFromActiveIndex = Math.abs(itemIndex - activeIndex);
+  switch (itemDistanceFromActiveIndex) {
+    case 0:
+      return import_types.ItemStatus.active;
+    case 1:
+      return import_types.ItemStatus.nearby;
+    case 2:
+      return import_types.ItemStatus.far;
+    default:
+      return import_types.ItemStatus.none;
+  }
+};
+//# sourceMappingURL=utils.js.map

package/lib/cjs/components/layout/Carousel/Footer/Pagination/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/components/layout/Carousel/Footer/Pagination/utils.ts"],
+  "sourcesContent": ["import { ItemStatus } from \"./types\";\n\n/**\n * Returns the status of an indexed item from the carousel index.\n */\nexport const getItemStatus = (itemIndex: number, activeIndex: number) => {\n  const itemDistanceFromActiveIndex = Math.abs(itemIndex - activeIndex);\n\n  switch (itemDistanceFromActiveIndex) {\n    case 0:\n      return ItemStatus.active;\n    case 1:\n      return ItemStatus.nearby;\n    case 2:\n      return ItemStatus.far;\n    default:\n      return ItemStatus.none;\n  }\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2B;AAKpB,MAAM,gBAAgB,CAAC,WAAmB,gBAAwB;AACvE,QAAM,8BAA8B,KAAK,IAAI,YAAY,WAAW;AAEpE,UAAQ,6BAA6B;AAAA,IACnC,KAAK;AACH,aAAO,wBAAW;AAAA,IACpB,KAAK;AACH,aAAO,wBAAW;AAAA,IACpB,KAAK;AACH,aAAO,wBAAW;AAAA,IACpB;AACE,aAAO,wBAAW;AAAA,EACtB;AACF;",
+  "names": []
+}

package/lib/cjs/components/{cards → layout/Carousel/Footer}/index.js

@@ -26,10 +26,21 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var cards_exports = {};
-__export(cards_exports, {
-  Carousel: () => import_Carousel.default
+var Footer_exports = {};
+__export(Footer_exports, {
+  default: () => Footer_default
 });
-module.exports = __toCommonJS(cards_exports);
-var import_Carousel = __toESM(require("./Carousel"));
+module.exports = __toCommonJS(Footer_exports);
+var import_react = __toESM(require("react"));
+var import_variantContentCard = __toESM(require("./variantContentCard"));
+var import_variantDefault = __toESM(require("./variantDefault"));
+const Footers = {
+  "content-card": import_variantContentCard.default,
+  default: import_variantDefault.default
+};
+const Footer = (props) => {
+  const Component = Footers[props.variant];
+  return /* @__PURE__ */ import_react.default.createElement(Component, { ...props });
+};
+var Footer_default = Footer;
 //# sourceMappingURL=index.js.map

package/lib/cjs/components/layout/Carousel/Footer/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/layout/Carousel/Footer/index.tsx"],
+  "sourcesContent": ["import React, { FC } from \"react\";\nimport { SubProps, Variant } from \"../types\";\nimport FooterContentCard from \"./variantContentCard\";\nimport FooterDefault from \"./variantDefault\";\n\nconst Footers: { [key in Variant]: FC<SubProps> } = {\n  \"content-card\": FooterContentCard,\n  default: FooterDefault,\n};\n\nconst Footer = (props: SubProps) => {\n  const Component = Footers[props.variant];\n  return <Component {...props} />;\n};\n\nexport default Footer;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0B;AAE1B,gCAA8B;AAC9B,4BAA0B;AAE1B,MAAM,UAA8C;AAAA,EAClD,gBAAgB,0BAAAA;AAAA,EAChB,SAAS,sBAAAC;AACX;AAEA,MAAM,SAAS,CAAC,UAAoB;AAClC,QAAM,YAAY,QAAQ,MAAM,OAAO;AACvC,SAAO,6BAAAC,QAAA,cAAC,aAAW,GAAG,OAAO;AAC/B;AAEA,IAAO,iBAAQ;",
+  "names": ["FooterContentCard", "FooterDefault", "React"]
+}

package/lib/cjs/components/layout/Carousel/Footer/variantContentCard.js

@@ -0,0 +1,69 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var variantContentCard_exports = {};
+__export(variantContentCard_exports, {
+  default: () => variantContentCard_default
+});
+module.exports = __toCommonJS(variantContentCard_exports);
+var import_react = require("@ledgerhq/icons-ui/react");
+var import_react2 = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_Pagination = __toESM(require("./Pagination"));
+const FooterContainer = import_styled_components.default.div`
+  height: 32px;
+  border-top: 1px solid ${(p) => p.theme.colors.opacityDefault.c10};
+  display: flex;
+  justify-content: space-between;
+  padding: 6px 16px 6px 16px;
+`;
+const FooterArrowsContainer = import_styled_components.default.div`
+  display: flex;
+  gap: 8px;
+  align-items: center;
+`;
+const FooterArrowContainer = import_styled_components.default.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+`;
+const FooterContentCard = ({ children, emblaApi, currentIndex, variant }) => {
+  if (children.length === 1)
+    return null;
+  return /* @__PURE__ */ import_react2.default.createElement(FooterContainer, null, /* @__PURE__ */ import_react2.default.createElement(
+    import_Pagination.default,
+    {
+      variant,
+      children,
+      emblaApi,
+      currentIndex
+    }
+  ), /* @__PURE__ */ import_react2.default.createElement(FooterArrowsContainer, null, /* @__PURE__ */ import_react2.default.createElement(FooterArrowContainer, { onClick: () => emblaApi == null ? void 0 : emblaApi.scrollPrev() }, /* @__PURE__ */ import_react2.default.createElement(import_react.ArrowLeft, { size: "S" })), /* @__PURE__ */ import_react2.default.createElement(FooterArrowContainer, { onClick: () => emblaApi == null ? void 0 : emblaApi.scrollNext() }, /* @__PURE__ */ import_react2.default.createElement(import_react.ArrowRight, { size: "S" }))));
+};
+var variantContentCard_default = FooterContentCard;
+//# sourceMappingURL=variantContentCard.js.map

package/lib/cjs/components/layout/Carousel/Footer/variantContentCard.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/layout/Carousel/Footer/variantContentCard.tsx"],
+  "sourcesContent": ["import { ArrowLeft, ArrowRight } from \"@ledgerhq/icons-ui/react\";\nimport React from \"react\";\nimport styled from \"styled-components\";\nimport Pagination from \"./Pagination\";\nimport { SubProps } from \"../types\";\n\nconst FooterContainer = styled.div`\n  height: 32px;\n  border-top: 1px solid ${p => p.theme.colors.opacityDefault.c10};\n  display: flex;\n  justify-content: space-between;\n  padding: 6px 16px 6px 16px;\n`;\n\nconst FooterArrowsContainer = styled.div`\n  display: flex;\n  gap: 8px;\n  align-items: center;\n`;\n\nconst FooterArrowContainer = styled.div`\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n`;\n\nconst FooterContentCard = ({ children, emblaApi, currentIndex, variant }: SubProps) => {\n  if (children.length === 1) return null;\n\n  return (\n    <FooterContainer>\n      <Pagination\n        variant={variant}\n        children={children}\n        emblaApi={emblaApi}\n        currentIndex={currentIndex}\n      />\n\n      <FooterArrowsContainer>\n        <FooterArrowContainer onClick={() => emblaApi?.scrollPrev()}>\n          <ArrowLeft size=\"S\" />\n        </FooterArrowContainer>\n        <FooterArrowContainer onClick={() => emblaApi?.scrollNext()}>\n          <ArrowRight size=\"S\" />\n        </FooterArrowContainer>\n      </FooterArrowsContainer>\n    </FooterContainer>\n  );\n};\n\nexport default FooterContentCard;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsC;AACtC,IAAAA,gBAAkB;AAClB,+BAAmB;AACnB,wBAAuB;AAGvB,MAAM,kBAAkB,yBAAAC,QAAO;AAAA;AAAA,0BAEL,OAAK,EAAE,MAAM,OAAO,eAAe,GAAG;AAAA;AAAA;AAAA;AAAA;AAMhE,MAAM,wBAAwB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,uBAAuB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAMpC,MAAM,oBAAoB,CAAC,EAAE,UAAU,UAAU,cAAc,QAAQ,MAAgB;AACrF,MAAI,SAAS,WAAW;AAAG,WAAO;AAElC,SACE,8BAAAC,QAAA,cAAC,uBACC,8BAAAA,QAAA;AAAA,IAAC,kBAAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,GAEA,8BAAAD,QAAA,cAAC,6BACC,8BAAAA,QAAA,cAAC,wBAAqB,SAAS,MAAM,qCAAU,gBAC7C,8BAAAA,QAAA,cAAC,0BAAU,MAAK,KAAI,CACtB,GACA,8BAAAA,QAAA,cAAC,wBAAqB,SAAS,MAAM,qCAAU,gBAC7C,8BAAAA,QAAA,cAAC,2BAAW,MAAK,KAAI,CACvB,CACF,CACF;AAEJ;AAEA,IAAO,6BAAQ;",
+  "names": ["import_react", "styled", "React", "Pagination"]
+}