npm - @ledgerhq/react-ui - Versions diffs - 0.14.1 → 0.14.2-next.0 - Mend

@ledgerhq/react-ui 0.14.1 → 0.14.2-next.0

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

Files changed (198) hide show

package/lib/cjs/components/Chart/utils.js CHANGED Viewed

@@ -28,9 +28,9 @@ const valueFormatter = (value) => {
     { value: 1e3, unit: "K" },
     { value: 1, unit: "" }
   ];
-  const item = breakpoints.find((item2) => value >= item2.value);
-  const formatedValue = typeof value === "number" ? value : parseFloat(value);
-  return item ? `${(formatedValue / item.value).toFixed(1).replace(".0", "")} ${item.unit}` : "0";
+  const formattedValue = typeof value === "number" ? value : parseFloat(value);
+  const item = breakpoints.find((item2) => formattedValue >= item2.value);
+  return item ? `${(formattedValue / item.value).toFixed(1).replace(".0", "")} ${item.unit}` : "0";
 };
 const fontConfig = {
   family: "Inter, Arial",

package/lib/cjs/components/Chart/utils.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/Chart/utils.ts"],
-  "sourcesContent": ["/**\n * Returns the value fixed to 1 decimals when needed with his associated unit (e.g. \"1.5K\" or \"1.5M\")\n * @param value - Value displayed on the y-axis as a tick\n * @example\n * ```\n * valueFormatter(1500) // \"1.5K\"\n * valueFormatter(1567) // \"1.5K\"\n * valueFormatter(1567657) // \"1.5M\"\n * valueFormatter(156) // \"156\"\n * ```\n */\nexport const valueFormatter = (value: string | number): string => {\n  const breakpoints = [\n    { value: 1e6, unit: \"M\" },\n    { value: 1e3, unit: \"K\" },\n    { value: 1, unit: \"\" },\n  ];\n\n  const item = breakpoints.find((item) => value >= item.value);\n  const formatedValue = typeof value === \"number\" ? value : parseFloat(value);\n  return item ? `${(formatedValue / item.value).toFixed(1).replace(\".0\", \"\")} ${item.unit}` : \"0\";\n};\n\n// set default font configuration for the chart - I used ll-text_subTitle class from our theme\nexport const fontConfig: {\n  family: string;\n  size: number;\n  weight: string;\n  lineHeight: number;\n  style: \"normal\" | \"italic\";\n} = {\n  family: \"Inter, Arial\",\n  size: 11,\n  weight: \"600\",\n  lineHeight: 1.21,\n  style: \"normal\",\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWO,MAAM,iBAAiB,CAAC,UAAmC;AAChE,QAAM,cAAc;AAAA,IAClB,EAAE,OAAO,KAAK,MAAM,IAAI;AAAA,IACxB,EAAE,OAAO,KAAK,MAAM,IAAI;AAAA,IACxB,EAAE,OAAO,GAAG,MAAM,GAAG;AAAA,EACvB;AAEA,QAAM,OAAO,YAAY,KAAK,CAACA,UAAS,SAASA,MAAK,KAAK;AAC3D,QAAM,gBAAgB,OAAO,UAAU,WAAW,QAAQ,WAAW,KAAK;AAC1E,SAAO,OAAO,IAAI,gBAAgB,KAAK,OAAO,QAAQ,CAAC,EAAE,QAAQ,MAAM,EAAE,KAAK,KAAK,SAAS;AAC9F;AAGO,MAAM,aAMT;AAAA,EACF,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,OAAO;AACT;",
+  "sourcesContent": ["/**\n * Returns the value fixed to 1 decimals when needed with his associated unit (e.g. \"1.5K\" or \"1.5M\")\n * @param value - Value displayed on the y-axis as a tick\n * @example\n * ```\n * valueFormatter(1500) // \"1.5K\"\n * valueFormatter(1567) // \"1.5K\"\n * valueFormatter(1567657) // \"1.5M\"\n * valueFormatter(156) // \"156\"\n * ```\n */\nexport const valueFormatter = (value: string | number): string => {\n  const breakpoints = [\n    { value: 1e6, unit: \"M\" },\n    { value: 1e3, unit: \"K\" },\n    { value: 1, unit: \"\" },\n  ];\n  const formattedValue = typeof value === \"number\" ? value : parseFloat(value);\n  const item = breakpoints.find(item => formattedValue >= item.value);\n  return item ? `${(formattedValue / item.value).toFixed(1).replace(\".0\", \"\")} ${item.unit}` : \"0\";\n};\n\n// set default font configuration for the chart - I used ll-text_subTitle class from our theme\nexport const fontConfig: {\n  family: string;\n  size: number;\n  weight: string;\n  lineHeight: number;\n  style: \"normal\" | \"italic\";\n} = {\n  family: \"Inter, Arial\",\n  size: 11,\n  weight: \"600\",\n  lineHeight: 1.21,\n  style: \"normal\",\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWO,MAAM,iBAAiB,CAAC,UAAmC;AAChE,QAAM,cAAc;AAAA,IAClB,EAAE,OAAO,KAAK,MAAM,IAAI;AAAA,IACxB,EAAE,OAAO,KAAK,MAAM,IAAI;AAAA,IACxB,EAAE,OAAO,GAAG,MAAM,GAAG;AAAA,EACvB;AACA,QAAM,iBAAiB,OAAO,UAAU,WAAW,QAAQ,WAAW,KAAK;AAC3E,QAAM,OAAO,YAAY,KAAK,CAAAA,UAAQ,kBAAkBA,MAAK,KAAK;AAClE,SAAO,OAAO,IAAI,iBAAiB,KAAK,OAAO,QAAQ,CAAC,EAAE,QAAQ,MAAM,EAAE,KAAK,KAAK,SAAS;AAC/F;AAGO,MAAM,aAMT;AAAA,EACF,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,OAAO;AACT;",
   "names": ["item"]
 }

package/lib/cjs/components/Table/Table.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/Table/Table.stories.tsx"],
-  "sourcesContent": ["import React, { useState, useCallback } from \"react\";\nimport styled, { useTheme } from \"styled-components\";\n\nimport Button from \"../cta/Button\";\nimport Flex from \"../layout/Flex\";\nimport Text from \"../asorted/Text\";\nimport Table, { RowContainerProps, Rows, Column, Props } from \"./index\";\nimport { balance, BalanceElement, accounts, Account } from \"./stories.helper\";\nimport { StoryTemplate } from \"../helpers\";\n\nconst description = `\n### A flexible table component.\n\nDefine columns and pass some data to the component that will render it appropriately.\n\n## Usage\n\n\\`\\`\\`js\n\nimport { Table } from \"@ledgerhq/react-ui\"\n\n\\`\\`\\`\n\n### Define columns\n\nTo use the Table component the first thing to do is to define an array of columns.\n\nA column is an object that specifies:\n\n- how cells are rendered\n- how the header is rendered\n- the cells layout\n\n<details>\n<summary>Column object shape</summary>\n\\`\\`\\`ts\n// Note for typescript users, these types are importable from \"@ledgerhq/react-ui/components/Table/Columns\"\n// <T> is the type the data that will be rendered by the table.\n\ninterface Column<T> {\n  /**\n   * A function called to render each cell of the column.\n   */\n  render: (props: CellProps<T>) => React.ReactNode;\n  /**\n   * A valid grid template [value](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns#values).\n   * This layout is applied to every cell of the column.\n   * Default to \"min-content\" - the largest minimal content contribution of the grid item.\n   */\n  layout?: string;\n  /**\n   * A function called to render the header cell.\n   * If omitted the rendered header element will be an empty div.\n   */\n  header?: () => React.ReactNode;\n}\n\ninterface CellProps<T> {\n  /**\n   * The cell element.\n   */\n  elt: T;\n  /**\n   * The row index.\n   */\n  rowIndex: number;\n  /**\n   * The column index.\n   */\n  columnIndex: number;\n}\n\\`\\`\\`\n</details>\n\nYou can either define custom columns or reuse predefined ones that take care of the style\nand the layout and match the global look and feel.\n\n<details>\n<summary>Predefined columns</summary>\n\\`\\`\\`tsx\nTable.Columns.text(args: {\n  /**\n   * An optional title.\n   */\n  title?: (elt: T) => React.ReactNode;\n  /**\n   * An optional subtitle.\n   */\n  subtitle?: (elt: T) => React.ReactNode;\n  /**\n   * An optional render function to display the column header.\n   */\n  header?: () => React.ReactNode;\n  /**\n   * The grid column layout, by default \"auto\".\n   */\n  layout?: string;\n  /**\n   * Optional extra props passed to the title <Text /> wrapper.\n   */\n  titleProps?: (elt: T) => Partial<React.ComponentProps<typeof Text>>;\n  /**\n   * Optional extra props passed to the subtitle <Text /> wrapper.\n   */\n  subtitleProps?: (elt: T) => Partial<React.ComponentProps<typeof Text>>;\n})\n\nTable.Columns.icon(args: {\n  /**\n   * An object containing the unerlying <Text /> wrapper props as well as\n   * the \"name\" and \"weight\" props of the unerlying <Icon />.\n   */\n  props: (elt: T) => Pick<IconProps, \"name\" | \"weight\"> & TextProps;\n  /**\n   * An optional render function to display the column header.\n   */\n  header?: () => React.ReactNode;\n  /**\n   * The grid column layout, by default \"min-content\".\n   */\n  layout?: string;\n})\n\\`\\`\\`\n</details>\n\n\\`\\`\\`tsx\nconst columns = [\n  // Custom column. (layout is optional)\n  {\n    layout: \"64px\",\n    render: ({ elt }) => <div>elt.value</div>\n  },\n  // Predefined columns.\n  Table.Columns.text({\n    layout: \"2fr\",\n    title: (elt) => elt.name,\n    subtitle: (elt) => elt.currency.name,\n  }),\n  Table.Columns.icon({\n    props: (elt) => ({\n      name: elt.synchronized ? \"CircledCheck\" : \"Clock\",\n      color: elt.synchronized ? \"success.c50\" : \"neutral.c80\",\n    }),\n  }),\n]\n\\`\\`\\`\n\n### Minimal Working Example\n\n\\`\\`\\`tsx\n// An array of 12 items - each mapped to a row in the table.\nconst data = new Array(12).fill(0).map((_, idx) => ({\n  value: idx,\n}));\n\n// We have 4 columns here.\nconst NB_OF_COLUMNS = 4;\nconst columns: Column<typeof data[0]>[] = Array(NB_OF_COLUMNS)\n  .fill(0)\n  .map((_, idx) => ({\n    // The header will be a letter based on the column (A / B / C / D).\n    // 65 is the char code for the letter 'A'.\n    header: () => <Text variant=\"h5\">{String.fromCharCode(65 + idx)}</Text>,\n    // Each cell will contain an incremental number as well as the cell position.\n    render: ({ elt, rowIndex, columnIndex }) => (\n      <Flex alignItems=\"baseline\">\n        <Text mr={4}>{elt.value * NB_OF_COLUMNS + columnIndex}</Text>\n        <Text variant=\"extraSmall\">\n          ({rowIndex} / {columnIndex})\n        </Text>\n      </Flex>\n    ),\n  }));\n\nfunction MinimalExample(args) {\n  return <Table {...args} data={data} columns={columns} />;\n};\n\\`\\`\\`\n`;\n\n/* Default minimal example */\n\n// An array of 12 items - each mapped to a row in the table.\nconst data = new Array(12).fill(0).map((_, idx) => ({\n  value: idx,\n}));\n\n// We have 4 columns here.\nconst NB_OF_COLUMNS = 4;\nconst columns: Column<typeof data[0]>[] = Array(NB_OF_COLUMNS)\n  .fill(0)\n  .map((_, idx) => ({\n    // The header will be a letter based on the column (A / B / C / D).\n    // 65 is the char code for the letter 'A'.\n    header: () => <Text variant=\"h5\">{String.fromCharCode(65 + idx)}</Text>,\n    // Each cell will contain an incremental number as well as the cell position.\n    render: ({ elt, rowIndex, columnIndex }) => (\n      <Flex alignItems=\"baseline\">\n        <Text mr={4}>{elt.value * NB_OF_COLUMNS + columnIndex}</Text>\n        <Text variant=\"extraSmall\">\n          ({rowIndex} / {columnIndex})\n        </Text>\n      </Flex>\n    ),\n  }));\n\nexport const Default: StoryTemplate<Props<typeof data[0]>> = (args) => {\n  return <Table {...args} data={data} columns={columns} />;\n};\n\n/* Styled example */\n\nconst styledExampleDescription = `\nA more advanced example that applies some styles to the table and uses predefined columns.\n\nAdditional props passed to the Table are applied to the outer container which is\nan instance of the \\`Grid\\` component.\n\nIn this example we are taking advantage of that by using the \\`p\\`, \\`gridRowGap\\`, \\`gridColumnGap\\`,\n\\`borderRadius\\` and \\`backgroundColor\\` props to style the table container.\n`;\n\nexport const Styled: StoryTemplate<Props<BalanceElement>> = (args) => {\n  return (\n    <>\n      <Table\n        {...args}\n        data={balance.data}\n        columns={balance.columns}\n        p={8}\n        gridRowGap={8}\n        gridColumnGap={6}\n        borderRadius={8}\n        backgroundColor=\"neutral.c20\"\n      />\n    </>\n  );\n};\n\nStyled.parameters = {\n  docs: {\n    description: {\n      story: styledExampleDescription,\n    },\n  },\n};\n\n/* Nested example */\n\nconst nestedExampleDescription = `\nA complex example that takes in entry nested data and conditonally adds a custom additional row to the table.\n\nThe data has the following shape:\n\n\\`\\`\\`ts\ntype Account = {\n  name: string;\n  currency: { name: string; abbrev: string };\n  synchronized: boolean;\n  amount: number;\n  evolution: number;\n  starred: boolean;\n  // The interesting thing is that an account can contain sub-accounts\n  subAccounts?: Account[];\n};\n\\`\\`\\`\n\nThe table used in this example adds an extra row containing a nested table when an account contains sub-accounts.\n\nIn order to achieve that the \\`extraRender\\` prop is used and set to a function that will render the extra row.\n\nYou can use the \\`ExtraRowContainer\\` wrapper as the row container if you want the extra content to span the entire row.\nOtherwise be careful not to disturb the grid layout order.\n\n\\`\\`\\`tsx\n<Table\n  /* ... */\n  extraRender={(account) =>\n    // If there are sub accounts\u2026\n    account.subAccounts &&\n    account.subAccounts.length > 0 && (\n      // \u2026render the extra row.\n      // ExtraRowContainer is a component that will span to the whole row.\n      <Table.ExtraRowContainer>{/* stuff */}</Table.ExtraRowContainer>\n    )\n  }\n/>\n\\`\\`\\`\n\n`;\n\nfunction SubAccounts({\n  account,\n  columns,\n}: {\n  account: Account;\n  columns: Column<Account>[];\n}): JSX.Element | null {\n  const theme = useTheme();\n  const [expanded, setExpanded] = useState(false);\n  const { subAccounts } = account;\n  if (!subAccounts) return null;\n\n  return (\n    <>\n      {expanded && (\n        <Rows\n          data={subAccounts}\n          columns={columns}\n          render={({ columnIndex, children }) =>\n            columnIndex === 0 ? (\n              <Flex alignItems=\"center\" justifyContent=\"flex-end\">\n                <div\n                  style={{\n                    width: \"1px\",\n                    height: \"2em\",\n                    marginRight: `${theme.space[6]}px`,\n                    borderLeft: `1px solid ${theme.colors.neutral.c40}`,\n                  }}\n                />\n                {children}\n              </Flex>\n            ) : (\n              children\n            )\n          }\n        />\n      )}\n      <Table.ExtraRowContainer>\n        <Flex justifyContent=\"center\" mt={-8}>\n          <Button.Expand onToggle={setExpanded}>\n            <Text variant={\"paragraph\"}>\n              {expanded ? \"Hide\" : \"Show\"} tokens ({subAccounts.length})\n            </Text>\n          </Button.Expand>\n        </Flex>\n      </Table.ExtraRowContainer>\n    </>\n  );\n}\n\nexport function Nested(args: Props<Account>): JSX.Element {\n  return (\n    <Table\n      {...args}\n      data={accounts.data}\n      columns={accounts.columns}\n      gridRowGap={8}\n      gridColumnGap={6}\n      p={8}\n      borderRadius={8}\n      backgroundColor=\"neutral.c20\"\n      extraRender={(account) =>\n        account.subAccounts &&\n        account.subAccounts.length > 0 && (\n          <SubAccounts account={account} columns={accounts.columns} />\n        )\n      }\n    />\n  );\n}\n\nNested.parameters = {\n  docs: {\n    description: {\n      story: nestedExampleDescription,\n    },\n  },\n};\n\n/* Custom row example */\n\nconst customRowExampleDescription = `\nThis example showcases how to styles rows, wrap them inside custom containers and add event handlers.\n\n#### Row containers and event handlers\n\nThe \\`renderRow\\` prop is a render function that allows to customize the jsx output for each row of the table.\n\nNote that the container should have the [\\`display: contents\\`](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout#grid_and_display_contents) css rule\nin order to preserve the table grid layout order.\n\n\\`\\`\\`tsx\nconst renderRow = React.useCallback(\n  (rowIndex, children) => (\n    // RowContainer is a convenience component having \"display: contents\" hardcoded.\n    // You can pass any event handler here.\n    <Table.RowContainer onClick={() => alert(rowIndex)}>\n      {children}\n    </Table.RowContainer>\n  ),\n  [],\n);\n\n<Table\n  /* ... */\n  renderRow={renderRow}\n/>\n\\`\\`\\`\n\n#### Styling\n\nStyling the container itself will not work.\nSince it has the \\`display: contents\\` rule the element will not produce a content box.\n\nOne working solution is to style the children instead.\n\n\\`\\`\\`ts\nconst CustomRowContainer = styled(Table.RowContainer).attrs(\n  ({ onClick }) => ({\n    onClick,\n  }),\n)\\`\n  & > * {\n    padding-left: \\${(p) => p.theme.space[5]}px;\n    padding-right: \\${(p) => p.theme.space[5]}px;\n    padding-top: \\${(p) => p.theme.space[5]}px;\n    padding-bottom: \\${(p) => p.theme.space[5]}px;\n\n    &:first-child {\n      padding-left: \\${(p) => p.theme.space[8]}px;\n    }\n    &:last-child {\n      padding-right: \\${(p) => p.theme.space[8]}px;\n    }\n  }\n\n  &:hover > * {\n    transition: background-color 0.2s;\n    cursor: pointer;\n    background-color: \\${(p) =>\n      p.rowIndex % 2 === 0\n        ? p.theme.colors.neutral.c30\n        : p.theme.colors.primary.c20};\n  }\n\\`;\n\\`\\`\\`\n`;\n\nconst CustomRowContainer = styled(Table.RowContainer).attrs<{ onClick: () => void }>(\n  ({ onClick }) => ({\n    onClick,\n  }),\n)<RowContainerProps>`\n  & > * {\n    padding-left: ${(p) => p.theme.space[5]}px;\n    padding-right: ${(p) => p.theme.space[5]}px;\n    padding-top: ${(p) => p.theme.space[5]}px;\n    padding-bottom: ${(p) => p.theme.space[5]}px;\n\n    &:first-child {\n      padding-left: ${(p) => p.theme.space[8]}px;\n    }\n    &:last-child {\n      padding-right: ${(p) => p.theme.space[8]}px;\n    }\n  }\n\n  &:hover > * {\n    transition: background-color 0.2s;\n    cursor: pointer;\n    background-color: ${(p) =>\n      p.rowIndex % 2 === 0 ? p.theme.colors.neutral.c30 : p.theme.colors.primary.c20};\n  }\n`;\n\nexport const CustomRows: StoryTemplate<Props<BalanceElement>> = (args) => {\n  const [selectedRowIndex, setSelectedRowIndex] = useState(null);\n\n  const renderRow = useCallback(\n    (rowIndex, children) => (\n      <CustomRowContainer rowIndex={rowIndex} onClick={() => setSelectedRowIndex(rowIndex)}>\n        {children}\n      </CustomRowContainer>\n    ),\n    [],\n  );\n\n  return (\n    <>\n      <Flex mb={8}>\n        <Text variant=\"h5\">Selected index: {selectedRowIndex ?? \"none\"}</Text>\n      </Flex>\n      <Table\n        {...args}\n        data={balance.data}\n        columns={balance.columns}\n        renderRow={renderRow}\n        borderRadius={8}\n        justifyItems=\"stretch\"\n        alignItems=\"stretch\"\n        border=\"1px solid\"\n        borderColor=\"neutral.c50\"\n        overflow=\"hidden\"\n        withHeaders={false}\n      />\n    </>\n  );\n};\n\nCustomRows.parameters = {\n  docs: {\n    description: {\n      story: customRowExampleDescription,\n    },\n  },\n};\n\n/* Export */\n\nexport default {\n  title: \"Tables/Table\",\n  component: Table,\n  argTypes: {\n    withHeaders: { type: \"boolean\", defaultValue: false },\n    data: { control: false },\n    columns: { control: false },\n    rows: { table: { disable: true } },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: description,\n      },\n    },\n  },\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useState, useCallback } from \"react\";\nimport styled, { useTheme } from \"styled-components\";\n\nimport Button from \"../cta/Button\";\nimport Flex from \"../layout/Flex\";\nimport Text from \"../asorted/Text\";\nimport Table, { RowContainerProps, Rows, Column, Props } from \"./index\";\nimport { balance, BalanceElement, accounts, Account } from \"./stories.helper\";\nimport { StoryTemplate } from \"../helpers\";\n\nconst description = `\n### A flexible table component.\n\nDefine columns and pass some data to the component that will render it appropriately.\n\n## Usage\n\n\\`\\`\\`js\n\nimport { Table } from \"@ledgerhq/react-ui\"\n\n\\`\\`\\`\n\n### Define columns\n\nTo use the Table component the first thing to do is to define an array of columns.\n\nA column is an object that specifies:\n\n- how cells are rendered\n- how the header is rendered\n- the cells layout\n\n<details>\n<summary>Column object shape</summary>\n\\`\\`\\`ts\n// Note for typescript users, these types are importable from \"@ledgerhq/react-ui/components/Table/Columns\"\n// <T> is the type the data that will be rendered by the table.\n\ninterface Column<T> {\n  /**\n   * A function called to render each cell of the column.\n   */\n  render: (props: CellProps<T>) => React.ReactNode;\n  /**\n   * A valid grid template [value](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns#values).\n   * This layout is applied to every cell of the column.\n   * Default to \"min-content\" - the largest minimal content contribution of the grid item.\n   */\n  layout?: string;\n  /**\n   * A function called to render the header cell.\n   * If omitted the rendered header element will be an empty div.\n   */\n  header?: () => React.ReactNode;\n}\n\ninterface CellProps<T> {\n  /**\n   * The cell element.\n   */\n  elt: T;\n  /**\n   * The row index.\n   */\n  rowIndex: number;\n  /**\n   * The column index.\n   */\n  columnIndex: number;\n}\n\\`\\`\\`\n</details>\n\nYou can either define custom columns or reuse predefined ones that take care of the style\nand the layout and match the global look and feel.\n\n<details>\n<summary>Predefined columns</summary>\n\\`\\`\\`tsx\nTable.Columns.text(args: {\n  /**\n   * An optional title.\n   */\n  title?: (elt: T) => React.ReactNode;\n  /**\n   * An optional subtitle.\n   */\n  subtitle?: (elt: T) => React.ReactNode;\n  /**\n   * An optional render function to display the column header.\n   */\n  header?: () => React.ReactNode;\n  /**\n   * The grid column layout, by default \"auto\".\n   */\n  layout?: string;\n  /**\n   * Optional extra props passed to the title <Text /> wrapper.\n   */\n  titleProps?: (elt: T) => Partial<React.ComponentProps<typeof Text>>;\n  /**\n   * Optional extra props passed to the subtitle <Text /> wrapper.\n   */\n  subtitleProps?: (elt: T) => Partial<React.ComponentProps<typeof Text>>;\n})\n\nTable.Columns.icon(args: {\n  /**\n   * An object containing the unerlying <Text /> wrapper props as well as\n   * the \"name\" and \"weight\" props of the unerlying <Icon />.\n   */\n  props: (elt: T) => Pick<IconProps, \"name\" | \"weight\"> & TextProps;\n  /**\n   * An optional render function to display the column header.\n   */\n  header?: () => React.ReactNode;\n  /**\n   * The grid column layout, by default \"min-content\".\n   */\n  layout?: string;\n})\n\\`\\`\\`\n</details>\n\n\\`\\`\\`tsx\nconst columns = [\n  // Custom column. (layout is optional)\n  {\n    layout: \"64px\",\n    render: ({ elt }) => <div>elt.value</div>\n  },\n  // Predefined columns.\n  Table.Columns.text({\n    layout: \"2fr\",\n    title: (elt) => elt.name,\n    subtitle: (elt) => elt.currency.name,\n  }),\n  Table.Columns.icon({\n    props: (elt) => ({\n      name: elt.synchronized ? \"CircledCheck\" : \"Clock\",\n      color: elt.synchronized ? \"success.c50\" : \"neutral.c80\",\n    }),\n  }),\n]\n\\`\\`\\`\n\n### Minimal Working Example\n\n\\`\\`\\`tsx\n// An array of 12 items - each mapped to a row in the table.\nconst data = new Array(12).fill(0).map((_, idx) => ({\n  value: idx,\n}));\n\n// We have 4 columns here.\nconst NB_OF_COLUMNS = 4;\nconst columns: Column<typeof data[0]>[] = Array(NB_OF_COLUMNS)\n  .fill(0)\n  .map((_, idx) => ({\n    // The header will be a letter based on the column (A / B / C / D).\n    // 65 is the char code for the letter 'A'.\n    header: () => <Text variant=\"h5\">{String.fromCharCode(65 + idx)}</Text>,\n    // Each cell will contain an incremental number as well as the cell position.\n    render: ({ elt, rowIndex, columnIndex }) => (\n      <Flex alignItems=\"baseline\">\n        <Text mr={4}>{elt.value * NB_OF_COLUMNS + columnIndex}</Text>\n        <Text variant=\"extraSmall\">\n          ({rowIndex} / {columnIndex})\n        </Text>\n      </Flex>\n    ),\n  }));\n\nfunction MinimalExample(args) {\n  return <Table {...args} data={data} columns={columns} />;\n};\n\\`\\`\\`\n`;\n\n/* Default minimal example */\n\n// An array of 12 items - each mapped to a row in the table.\nconst data = new Array(12).fill(0).map((_, idx) => ({\n  value: idx,\n}));\n\n// We have 4 columns here.\nconst NB_OF_COLUMNS = 4;\nconst columns: Column<(typeof data)[0]>[] = Array(NB_OF_COLUMNS)\n  .fill(0)\n  .map((_, idx) => ({\n    // The header will be a letter based on the column (A / B / C / D).\n    // 65 is the char code for the letter 'A'.\n    header: () => <Text variant=\"h5\">{String.fromCharCode(65 + idx)}</Text>,\n    // Each cell will contain an incremental number as well as the cell position.\n    render: ({ elt, rowIndex, columnIndex }) => (\n      <Flex alignItems=\"baseline\">\n        <Text mr={4}>{elt.value * NB_OF_COLUMNS + columnIndex}</Text>\n        <Text variant=\"extraSmall\">\n          ({rowIndex} / {columnIndex})\n        </Text>\n      </Flex>\n    ),\n  }));\n\nexport const Default: StoryTemplate<Props<(typeof data)[0]>> = args => {\n  return <Table {...args} data={data} columns={columns} />;\n};\n\n/* Styled example */\n\nconst styledExampleDescription = `\nA more advanced example that applies some styles to the table and uses predefined columns.\n\nAdditional props passed to the Table are applied to the outer container which is\nan instance of the \\`Grid\\` component.\n\nIn this example we are taking advantage of that by using the \\`p\\`, \\`gridRowGap\\`, \\`gridColumnGap\\`,\n\\`borderRadius\\` and \\`backgroundColor\\` props to style the table container.\n`;\n\nexport const Styled: StoryTemplate<Props<BalanceElement>> = args => {\n  return (\n    <>\n      <Table\n        {...args}\n        data={balance.data}\n        columns={balance.columns}\n        p={8}\n        gridRowGap={8}\n        gridColumnGap={6}\n        borderRadius={8}\n        backgroundColor=\"neutral.c20\"\n      />\n    </>\n  );\n};\n\nStyled.parameters = {\n  docs: {\n    description: {\n      story: styledExampleDescription,\n    },\n  },\n};\n\n/* Nested example */\n\nconst nestedExampleDescription = `\nA complex example that takes in entry nested data and conditonally adds a custom additional row to the table.\n\nThe data has the following shape:\n\n\\`\\`\\`ts\ntype Account = {\n  name: string;\n  currency: { name: string; abbrev: string };\n  synchronized: boolean;\n  amount: number;\n  evolution: number;\n  starred: boolean;\n  // The interesting thing is that an account can contain sub-accounts\n  subAccounts?: Account[];\n};\n\\`\\`\\`\n\nThe table used in this example adds an extra row containing a nested table when an account contains sub-accounts.\n\nIn order to achieve that the \\`extraRender\\` prop is used and set to a function that will render the extra row.\n\nYou can use the \\`ExtraRowContainer\\` wrapper as the row container if you want the extra content to span the entire row.\nOtherwise be careful not to disturb the grid layout order.\n\n\\`\\`\\`tsx\n<Table\n  /* ... */\n  extraRender={(account) =>\n    // If there are sub accounts\u2026\n    account.subAccounts &&\n    account.subAccounts.length > 0 && (\n      // \u2026render the extra row.\n      // ExtraRowContainer is a component that will span to the whole row.\n      <Table.ExtraRowContainer>{/* stuff */}</Table.ExtraRowContainer>\n    )\n  }\n/>\n\\`\\`\\`\n\n`;\n\nfunction SubAccounts({\n  account,\n  columns,\n}: {\n  account: Account;\n  columns: Column<Account>[];\n}): JSX.Element | null {\n  const theme = useTheme();\n  const [expanded, setExpanded] = useState(false);\n  const { subAccounts } = account;\n  if (!subAccounts) return null;\n\n  return (\n    <>\n      {expanded && (\n        <Rows\n          data={subAccounts}\n          columns={columns}\n          render={({ columnIndex, children }) =>\n            columnIndex === 0 ? (\n              <Flex alignItems=\"center\" justifyContent=\"flex-end\">\n                <div\n                  style={{\n                    width: \"1px\",\n                    height: \"2em\",\n                    marginRight: `${theme.space[6]}px`,\n                    borderLeft: `1px solid ${theme.colors.neutral.c40}`,\n                  }}\n                />\n                {children}\n              </Flex>\n            ) : (\n              children\n            )\n          }\n        />\n      )}\n      <Table.ExtraRowContainer>\n        <Flex justifyContent=\"center\" mt={-8}>\n          <Button.Expand onToggle={setExpanded}>\n            <Text variant={\"paragraph\"}>\n              {expanded ? \"Hide\" : \"Show\"} tokens ({subAccounts.length})\n            </Text>\n          </Button.Expand>\n        </Flex>\n      </Table.ExtraRowContainer>\n    </>\n  );\n}\n\nexport function Nested(args: Props<Account>): JSX.Element {\n  return (\n    <Table\n      {...args}\n      data={accounts.data}\n      columns={accounts.columns}\n      gridRowGap={8}\n      gridColumnGap={6}\n      p={8}\n      borderRadius={8}\n      backgroundColor=\"neutral.c20\"\n      extraRender={account =>\n        account.subAccounts &&\n        account.subAccounts.length > 0 && (\n          <SubAccounts account={account} columns={accounts.columns} />\n        )\n      }\n    />\n  );\n}\n\nNested.parameters = {\n  docs: {\n    description: {\n      story: nestedExampleDescription,\n    },\n  },\n};\n\n/* Custom row example */\n\nconst customRowExampleDescription = `\nThis example showcases how to styles rows, wrap them inside custom containers and add event handlers.\n\n#### Row containers and event handlers\n\nThe \\`renderRow\\` prop is a render function that allows to customize the jsx output for each row of the table.\n\nNote that the container should have the [\\`display: contents\\`](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout#grid_and_display_contents) css rule\nin order to preserve the table grid layout order.\n\n\\`\\`\\`tsx\nconst renderRow = React.useCallback(\n  (rowIndex, children) => (\n    // RowContainer is a convenience component having \"display: contents\" hardcoded.\n    // You can pass any event handler here.\n    <Table.RowContainer onClick={() => alert(rowIndex)}>\n      {children}\n    </Table.RowContainer>\n  ),\n  [],\n);\n\n<Table\n  /* ... */\n  renderRow={renderRow}\n/>\n\\`\\`\\`\n\n#### Styling\n\nStyling the container itself will not work.\nSince it has the \\`display: contents\\` rule the element will not produce a content box.\n\nOne working solution is to style the children instead.\n\n\\`\\`\\`ts\nconst CustomRowContainer = styled(Table.RowContainer).attrs(\n  ({ onClick }) => ({\n    onClick,\n  }),\n)\\`\n  & > * {\n    padding-left: \\${(p) => p.theme.space[5]}px;\n    padding-right: \\${(p) => p.theme.space[5]}px;\n    padding-top: \\${(p) => p.theme.space[5]}px;\n    padding-bottom: \\${(p) => p.theme.space[5]}px;\n\n    &:first-child {\n      padding-left: \\${(p) => p.theme.space[8]}px;\n    }\n    &:last-child {\n      padding-right: \\${(p) => p.theme.space[8]}px;\n    }\n  }\n\n  &:hover > * {\n    transition: background-color 0.2s;\n    cursor: pointer;\n    background-color: \\${(p) =>\n      p.rowIndex % 2 === 0\n        ? p.theme.colors.neutral.c30\n        : p.theme.colors.primary.c20};\n  }\n\\`;\n\\`\\`\\`\n`;\n\nconst CustomRowContainer = styled(Table.RowContainer).attrs<{ onClick: () => void }>(\n  ({ onClick }) => ({\n    onClick,\n  }),\n)<RowContainerProps>`\n  & > * {\n    padding-left: ${p => p.theme.space[5]}px;\n    padding-right: ${p => p.theme.space[5]}px;\n    padding-top: ${p => p.theme.space[5]}px;\n    padding-bottom: ${p => p.theme.space[5]}px;\n\n    &:first-child {\n      padding-left: ${p => p.theme.space[8]}px;\n    }\n    &:last-child {\n      padding-right: ${p => p.theme.space[8]}px;\n    }\n  }\n\n  &:hover > * {\n    transition: background-color 0.2s;\n    cursor: pointer;\n    background-color: ${p =>\n      p.rowIndex % 2 === 0 ? p.theme.colors.neutral.c30 : p.theme.colors.primary.c20};\n  }\n`;\n\nexport const CustomRows: StoryTemplate<Props<BalanceElement>> = args => {\n  const [selectedRowIndex, setSelectedRowIndex] = useState(null);\n\n  const renderRow = useCallback(\n    (rowIndex, children) => (\n      <CustomRowContainer rowIndex={rowIndex} onClick={() => setSelectedRowIndex(rowIndex)}>\n        {children}\n      </CustomRowContainer>\n    ),\n    [],\n  );\n\n  return (\n    <>\n      <Flex mb={8}>\n        <Text variant=\"h5\">Selected index: {selectedRowIndex ?? \"none\"}</Text>\n      </Flex>\n      <Table\n        {...args}\n        data={balance.data}\n        columns={balance.columns}\n        renderRow={renderRow}\n        borderRadius={8}\n        justifyItems=\"stretch\"\n        alignItems=\"stretch\"\n        border=\"1px solid\"\n        borderColor=\"neutral.c50\"\n        overflow=\"hidden\"\n        withHeaders={false}\n      />\n    </>\n  );\n};\n\nCustomRows.parameters = {\n  docs: {\n    description: {\n      story: customRowExampleDescription,\n    },\n  },\n};\n\n/* Export */\n\nexport default {\n  title: \"Tables/Table\",\n  component: Table,\n  argTypes: {\n    withHeaders: { type: \"boolean\", defaultValue: false },\n    data: { control: false },\n    columns: { control: false },\n    rows: { table: { disable: true } },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: description,\n      },\n    },\n  },\n};\n"],
+  "mappings": "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",
   "names": ["React", "Text", "Flex", "Table", "columns", "Button", "styled"]
 }

package/lib/cjs/components/Table/stories.helper.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/Table/stories.helper.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport { useTheme } from \"styled-components\";\nimport Text from \"../asorted/Text\";\nimport Table, { Column } from \"./index\";\nimport { CellProps } from \"./Columns\";\nconst { Columns } = Table;\n\nfunction Header({ children }: { children: React.ReactNode }) {\n  const theme = useTheme();\n  return (\n    <Text\n      fontWeight=\"semiBold\"\n      variant={\"paragraph\"}\n      style={{ borderBottom: `1px solid ${theme.colors.neutral.c40}` }}\n      mx={-4}\n      px={4}\n      pb={8}\n    >\n      {children}\n    </Text>\n  );\n}\n\nexport type BalanceElement = {\n  currency: string;\n  amount: number;\n  counterValue: number;\n  address: string;\n  evolution: number;\n  starred: boolean;\n};\n\nexport const balance: { data: BalanceElement[]; columns: Column<BalanceElement>[] } = {\n  data: [\n    {\n      currency: \"Ethereum Classic\",\n      amount: 128.26484,\n      counterValue: 53.29,\n      address: \"0x32Be343B94f860124dC4fEe278FDCBD38C102D88\",\n      evolution: 0.1,\n      starred: false,\n    },\n    {\n      currency: \"Ethereum\",\n      amount: 1.23,\n      counterValue: 3029.29,\n      address: \"0xa910f92acdaf488fa6ef02174fb86208ad7722ba\",\n      evolution: 3.0,\n      starred: true,\n    },\n    {\n      currency: \"Bitcoin\",\n      amount: 0.003,\n      counterValue: 1920.23,\n      address: \"1F1tAaz5x1HUXrCNLbtMDqcw6o5GNn4xqX\",\n      evolution: -2.1,\n      starred: true,\n    },\n    {\n      currency: \"Dai\",\n      amount: 128,\n      counterValue: 128,\n      address: \"0x380389E04f7671AB849baF10bd89C75C3bf99cbB\",\n      evolution: 0.2,\n      starred: false,\n    },\n  ],\n  columns: [\n    Columns.text({\n      header: () => <Header>Currency</Header>,\n      title: (elt) => elt.currency,\n    }),\n    Columns.text({\n      header: () => <Header>Amount</Header>,\n      title: (elt) => elt.amount,\n      subtitle: (elt) => elt.counterValue,\n    }),\n    Columns.text({\n      header: () => <Header>Address</Header>,\n      subtitle: (elt) => elt.address,\n    }),\n    Columns.text({\n      header: () => <Header>Evolution</Header>,\n      subtitle: (elt) => (elt.evolution > 0 ? \"+\" : \"\") + elt.evolution,\n      subtitleProps: (elt) => ({\n        color: elt.evolution < 0 ? \"error.c50\" : \"success.c50\",\n      }),\n    }),\n    Columns.icon({\n      header: () => <Header>&nbsp;</Header>,\n      props: (elt) => ({\n        name: \"StarSolid\",\n        color: elt.starred ? \"neutral.c100\" : \"neutral.c70\",\n      }),\n    }),\n  ],\n};\n\nexport type Account = {\n  name: string;\n  currency: { name: string; abbrev: string };\n  synchronized: boolean;\n  amount: number;\n  evolution: number;\n  starred: boolean;\n  subAccounts?: Account[];\n};\n\nexport const accounts: { data: Account[]; columns: Column<Account>[] } = {\n  data: [\n    {\n      name: \"Bitcoin 1\",\n      currency: { name: \"Bitcoin\", abbrev: \"BTC\" },\n      synchronized: false,\n      amount: 0.304,\n      evolution: 1.3,\n      starred: false,\n    },\n    {\n      name: \"Bitcoin 2\",\n      currency: { name: \"Bitcoin\", abbrev: \"BTC\" },\n      synchronized: true,\n      amount: 0.409,\n      evolution: 1.1,\n      starred: false,\n    },\n    {\n      name: \"Bitcoin 3\",\n      currency: { name: \"Bitcoin\", abbrev: \"BTC\" },\n      synchronized: true,\n      amount: 2.304,\n      evolution: -1.3,\n      starred: true,\n    },\n    {\n      name: \"Ethereum 1\",\n      currency: { name: \"Ethereum\", abbrev: \"ETH\" },\n      synchronized: true,\n      amount: 1.23,\n      evolution: 4,\n      starred: true,\n      subAccounts: [\n        {\n          name: \"Tether\",\n          currency: { name: \"Tether\", abbrev: \"USDT\" },\n          synchronized: false,\n          amount: 0.304,\n          evolution: 1.3,\n          starred: false,\n        },\n        {\n          name: \"Tether 2\",\n          currency: { name: \"Tether\", abbrev: \"USDT\" },\n          synchronized: false,\n          amount: 0.904,\n          evolution: 8.3,\n          starred: true,\n        },\n      ],\n    },\n    {\n      name: \"Ethereum 2\",\n      currency: { name: \"Ethereum\", abbrev: \"ETH\" },\n      synchronized: false,\n      amount: 0.23,\n      evolution: -3,\n      starred: false,\n    },\n  ],\n  columns: [\n    {\n      layout: \"64px\",\n      render: ({ elt }: CellProps<Account>): JSX.Element =>\n        elt.currency.abbrev === \"BTC\" ? svgBtc : elt.currency.abbrev === \"ETH\" ? svgEth : svgUsdt,\n    },\n    Columns.text({\n      layout: \"2fr\",\n      title: (elt) => elt.name,\n      subtitle: (elt) => elt.currency.name,\n    }),\n    Columns.icon({\n      props: (elt) => ({\n        name: elt.synchronized ? \"CircledCheck\" : \"Clock\",\n        color: elt.synchronized ? \"success.c50\" : \"neutral.c80\",\n      }),\n    }),\n    Columns.text({\n      layout: \"1fr\",\n      subtitle: (elt) => elt.currency.abbrev,\n    }),\n    Columns.text({\n      layout: \"1fr\",\n      title: (elt) => elt.amount,\n    }),\n    Columns.text({\n      layout: \"1fr\",\n      subtitle: (elt) => (elt.evolution > 0 ? \"+\" : \"\") + elt.evolution,\n      subtitleProps: (elt) => ({\n        color: elt.evolution < 0 ? \"error.c50\" : \"success.c50\",\n      }),\n    }),\n    Columns.icon({\n      props: (elt) => ({\n        name: \"StarSolid\",\n        color: elt.starred ? \"neutral.c100\" : \"neutral.c70\",\n      }),\n    }),\n  ],\n};\n\nconst svgBtc = (\n  <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z\"\n      fill=\"#F7931A\"\n    />\n    <path\n      d=\"M21.8917 14.3672C22.154 12.616 20.8198 11.6745 18.9968 11.0462L19.5883 8.67348L18.1446 8.31423L17.5682 10.6243C17.1889 10.529 16.7995 10.4405 16.4111 10.3519L16.9917 8.02683L15.548 7.66675L14.9565 10.0386C14.6424 9.96678 14.3333 9.8966 14.0342 9.82141L14.0358 9.81389L12.0441 9.31679L11.6598 10.8591C11.6598 10.8591 12.7317 11.1047 12.7091 11.1197C13.2939 11.2659 13.3992 11.6527 13.3817 11.9602L12.7083 14.6629C12.7484 14.6729 12.8002 14.688 12.8587 14.7105L12.7058 14.6729L11.7617 18.4593C11.6899 18.6364 11.5086 18.9029 11.0992 18.8018C11.1142 18.8227 10.0498 18.5403 10.0498 18.5403L9.33301 20.1929L11.2128 20.6616C11.562 20.7493 11.9046 20.8412 12.2413 20.9272L11.6439 23.3267L13.0867 23.6859L13.6783 21.3132C14.0726 21.4193 14.4552 21.5179 14.8295 21.6115L14.2397 23.9742L15.6834 24.3334L16.2807 21.939C18.7437 22.4052 20.5951 22.2172 21.3745 19.9898C22.0028 18.1969 21.3436 17.1618 20.0478 16.4876C20.9919 16.2704 21.7021 15.6496 21.8917 14.3672ZM18.5916 18.994C18.1463 20.7877 15.1261 19.8177 14.147 19.5746L14.9406 16.3957C15.9198 16.6405 19.0586 17.1242 18.5916 18.994ZM19.0386 14.3413C18.6317 15.9729 16.1186 15.1433 15.3041 14.9403L16.0226 12.0579C16.8371 12.261 19.463 12.6394 19.0386 14.3413Z\"\n      fill=\"white\"\n    />\n  </svg>\n);\n\nconst svgEth = (\n  <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z\"\n      fill=\"#0EBDCD\"\n    />\n    <path\n      d=\"M21.2066 15.5834L15.9992 7.66669L10.7916 15.5834L15.9992 18.6067L21.2066 15.5834Z\"\n      fill=\"white\"\n    />\n    <path\n      d=\"M15.9992 24.3333L21.21 17.1241L15.9992 20.147L10.7916 17.1241L15.9992 24.3333Z\"\n      fill=\"white\"\n    />\n  </svg>\n);\n\nconst svgUsdt = (\n  <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z\"\n      fill=\"#00A478\"\n    />\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M17.7205 16.6265V16.6246C17.6175 16.6321 17.0863 16.6639 15.9013 16.6639C14.9551 16.6639 14.289 16.6358 14.0548 16.6246V16.6274C10.4125 16.4672 7.69393 15.833 7.69393 15.0742C7.69393 14.3163 10.4125 13.6821 14.0548 13.5191V15.996C14.2928 16.0128 14.9748 16.0531 15.9172 16.0531C17.0479 16.0531 17.6147 16.0063 17.7205 15.9969V13.521C21.3553 13.683 24.0674 14.3172 24.0674 15.0742C24.0674 15.833 21.3553 16.4653 17.7205 16.6265ZM17.7205 13.2633V11.0469H22.7924V7.66687H8.98297V11.0469H14.0548V13.2624C9.93289 13.4516 6.83301 14.2685 6.83301 15.2465C6.83301 16.2246 9.93289 17.0405 14.0548 17.2307V24.3335H17.7205V17.2288C21.8359 17.0396 24.9283 16.2236 24.9283 15.2465C24.9283 14.2695 21.8359 13.4535 17.7205 13.2633Z\"\n      fill=\"white\"\n    />\n  </svg>\n);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React from \"react\";\nimport { useTheme } from \"styled-components\";\nimport Text from \"../asorted/Text\";\nimport Table, { Column } from \"./index\";\nimport { CellProps } from \"./Columns\";\nconst { Columns } = Table;\n\nfunction Header({ children }: { children: React.ReactNode }) {\n  const theme = useTheme();\n  return (\n    <Text\n      fontWeight=\"semiBold\"\n      variant={\"paragraph\"}\n      style={{ borderBottom: `1px solid ${theme.colors.neutral.c40}` }}\n      mx={-4}\n      px={4}\n      pb={8}\n    >\n      {children}\n    </Text>\n  );\n}\n\nexport type BalanceElement = {\n  currency: string;\n  amount: number;\n  counterValue: number;\n  address: string;\n  evolution: number;\n  starred: boolean;\n};\n\nexport const balance: { data: BalanceElement[]; columns: Column<BalanceElement>[] } = {\n  data: [\n    {\n      currency: \"Ethereum Classic\",\n      amount: 128.26484,\n      counterValue: 53.29,\n      address: \"0x32Be343B94f860124dC4fEe278FDCBD38C102D88\",\n      evolution: 0.1,\n      starred: false,\n    },\n    {\n      currency: \"Ethereum\",\n      amount: 1.23,\n      counterValue: 3029.29,\n      address: \"0xa910f92acdaf488fa6ef02174fb86208ad7722ba\",\n      evolution: 3.0,\n      starred: true,\n    },\n    {\n      currency: \"Bitcoin\",\n      amount: 0.003,\n      counterValue: 1920.23,\n      address: \"1F1tAaz5x1HUXrCNLbtMDqcw6o5GNn4xqX\",\n      evolution: -2.1,\n      starred: true,\n    },\n    {\n      currency: \"Dai\",\n      amount: 128,\n      counterValue: 128,\n      address: \"0x380389E04f7671AB849baF10bd89C75C3bf99cbB\",\n      evolution: 0.2,\n      starred: false,\n    },\n  ],\n  columns: [\n    Columns.text({\n      header: () => <Header>Currency</Header>,\n      title: elt => elt.currency,\n    }),\n    Columns.text({\n      header: () => <Header>Amount</Header>,\n      title: elt => elt.amount,\n      subtitle: elt => elt.counterValue,\n    }),\n    Columns.text({\n      header: () => <Header>Address</Header>,\n      subtitle: elt => elt.address,\n    }),\n    Columns.text({\n      header: () => <Header>Evolution</Header>,\n      subtitle: elt => (elt.evolution > 0 ? \"+\" : \"\") + elt.evolution,\n      subtitleProps: elt => ({\n        color: elt.evolution < 0 ? \"error.c50\" : \"success.c50\",\n      }),\n    }),\n    Columns.icon({\n      header: () => <Header>&nbsp;</Header>,\n      props: elt => ({\n        name: \"StarSolid\",\n        color: elt.starred ? \"neutral.c100\" : \"neutral.c70\",\n      }),\n    }),\n  ],\n};\n\nexport type Account = {\n  name: string;\n  currency: { name: string; abbrev: string };\n  synchronized: boolean;\n  amount: number;\n  evolution: number;\n  starred: boolean;\n  subAccounts?: Account[];\n};\n\nexport const accounts: { data: Account[]; columns: Column<Account>[] } = {\n  data: [\n    {\n      name: \"Bitcoin 1\",\n      currency: { name: \"Bitcoin\", abbrev: \"BTC\" },\n      synchronized: false,\n      amount: 0.304,\n      evolution: 1.3,\n      starred: false,\n    },\n    {\n      name: \"Bitcoin 2\",\n      currency: { name: \"Bitcoin\", abbrev: \"BTC\" },\n      synchronized: true,\n      amount: 0.409,\n      evolution: 1.1,\n      starred: false,\n    },\n    {\n      name: \"Bitcoin 3\",\n      currency: { name: \"Bitcoin\", abbrev: \"BTC\" },\n      synchronized: true,\n      amount: 2.304,\n      evolution: -1.3,\n      starred: true,\n    },\n    {\n      name: \"Ethereum 1\",\n      currency: { name: \"Ethereum\", abbrev: \"ETH\" },\n      synchronized: true,\n      amount: 1.23,\n      evolution: 4,\n      starred: true,\n      subAccounts: [\n        {\n          name: \"Tether\",\n          currency: { name: \"Tether\", abbrev: \"USDT\" },\n          synchronized: false,\n          amount: 0.304,\n          evolution: 1.3,\n          starred: false,\n        },\n        {\n          name: \"Tether 2\",\n          currency: { name: \"Tether\", abbrev: \"USDT\" },\n          synchronized: false,\n          amount: 0.904,\n          evolution: 8.3,\n          starred: true,\n        },\n      ],\n    },\n    {\n      name: \"Ethereum 2\",\n      currency: { name: \"Ethereum\", abbrev: \"ETH\" },\n      synchronized: false,\n      amount: 0.23,\n      evolution: -3,\n      starred: false,\n    },\n  ],\n  columns: [\n    {\n      layout: \"64px\",\n      render: ({ elt }: CellProps<Account>): JSX.Element =>\n        elt.currency.abbrev === \"BTC\" ? svgBtc : elt.currency.abbrev === \"ETH\" ? svgEth : svgUsdt,\n    },\n    Columns.text({\n      layout: \"2fr\",\n      title: elt => elt.name,\n      subtitle: elt => elt.currency.name,\n    }),\n    Columns.icon({\n      props: elt => ({\n        name: elt.synchronized ? \"CircledCheck\" : \"Clock\",\n        color: elt.synchronized ? \"success.c50\" : \"neutral.c80\",\n      }),\n    }),\n    Columns.text({\n      layout: \"1fr\",\n      subtitle: elt => elt.currency.abbrev,\n    }),\n    Columns.text({\n      layout: \"1fr\",\n      title: elt => elt.amount,\n    }),\n    Columns.text({\n      layout: \"1fr\",\n      subtitle: elt => (elt.evolution > 0 ? \"+\" : \"\") + elt.evolution,\n      subtitleProps: elt => ({\n        color: elt.evolution < 0 ? \"error.c50\" : \"success.c50\",\n      }),\n    }),\n    Columns.icon({\n      props: elt => ({\n        name: \"StarSolid\",\n        color: elt.starred ? \"neutral.c100\" : \"neutral.c70\",\n      }),\n    }),\n  ],\n};\n\nconst svgBtc = (\n  <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z\"\n      fill=\"#F7931A\"\n    />\n    <path\n      d=\"M21.8917 14.3672C22.154 12.616 20.8198 11.6745 18.9968 11.0462L19.5883 8.67348L18.1446 8.31423L17.5682 10.6243C17.1889 10.529 16.7995 10.4405 16.4111 10.3519L16.9917 8.02683L15.548 7.66675L14.9565 10.0386C14.6424 9.96678 14.3333 9.8966 14.0342 9.82141L14.0358 9.81389L12.0441 9.31679L11.6598 10.8591C11.6598 10.8591 12.7317 11.1047 12.7091 11.1197C13.2939 11.2659 13.3992 11.6527 13.3817 11.9602L12.7083 14.6629C12.7484 14.6729 12.8002 14.688 12.8587 14.7105L12.7058 14.6729L11.7617 18.4593C11.6899 18.6364 11.5086 18.9029 11.0992 18.8018C11.1142 18.8227 10.0498 18.5403 10.0498 18.5403L9.33301 20.1929L11.2128 20.6616C11.562 20.7493 11.9046 20.8412 12.2413 20.9272L11.6439 23.3267L13.0867 23.6859L13.6783 21.3132C14.0726 21.4193 14.4552 21.5179 14.8295 21.6115L14.2397 23.9742L15.6834 24.3334L16.2807 21.939C18.7437 22.4052 20.5951 22.2172 21.3745 19.9898C22.0028 18.1969 21.3436 17.1618 20.0478 16.4876C20.9919 16.2704 21.7021 15.6496 21.8917 14.3672ZM18.5916 18.994C18.1463 20.7877 15.1261 19.8177 14.147 19.5746L14.9406 16.3957C15.9198 16.6405 19.0586 17.1242 18.5916 18.994ZM19.0386 14.3413C18.6317 15.9729 16.1186 15.1433 15.3041 14.9403L16.0226 12.0579C16.8371 12.261 19.463 12.6394 19.0386 14.3413Z\"\n      fill=\"white\"\n    />\n  </svg>\n);\n\nconst svgEth = (\n  <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z\"\n      fill=\"#0EBDCD\"\n    />\n    <path\n      d=\"M21.2066 15.5834L15.9992 7.66669L10.7916 15.5834L15.9992 18.6067L21.2066 15.5834Z\"\n      fill=\"white\"\n    />\n    <path\n      d=\"M15.9992 24.3333L21.21 17.1241L15.9992 20.147L10.7916 17.1241L15.9992 24.3333Z\"\n      fill=\"white\"\n    />\n  </svg>\n);\n\nconst svgUsdt = (\n  <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z\"\n      fill=\"#00A478\"\n    />\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M17.7205 16.6265V16.6246C17.6175 16.6321 17.0863 16.6639 15.9013 16.6639C14.9551 16.6639 14.289 16.6358 14.0548 16.6246V16.6274C10.4125 16.4672 7.69393 15.833 7.69393 15.0742C7.69393 14.3163 10.4125 13.6821 14.0548 13.5191V15.996C14.2928 16.0128 14.9748 16.0531 15.9172 16.0531C17.0479 16.0531 17.6147 16.0063 17.7205 15.9969V13.521C21.3553 13.683 24.0674 14.3172 24.0674 15.0742C24.0674 15.833 21.3553 16.4653 17.7205 16.6265ZM17.7205 13.2633V11.0469H22.7924V7.66687H8.98297V11.0469H14.0548V13.2624C9.93289 13.4516 6.83301 14.2685 6.83301 15.2465C6.83301 16.2246 9.93289 17.0405 14.0548 17.2307V24.3335H17.7205V17.2288C21.8359 17.0396 24.9283 16.2236 24.9283 15.2465C24.9283 14.2695 21.8359 13.4535 17.7205 13.2633Z\"\n      fill=\"white\"\n    />\n  </svg>\n);\n"],
+  "mappings": "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",
   "names": ["Table", "React", "Text"]
 }

package/lib/cjs/components/Tag/Tag.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/Tag/Tag.stories.tsx"],
-  "sourcesContent": ["import React from \"react\";\n\nimport { StoryTemplate } from \"../helpers\";\nimport Tag, { Type, Size, TagProps } from \"./index\";\nimport Text from \"../asorted/Text\";\nimport Flex from \"../layout/Flex\";\n\nconst sizes: Size[] = [\"large\", \"medium\", \"small\"];\nconst types: Type[] = [\"plain\", \"opacity\", \"outlined\", \"outlinedOpacity\"];\nconst states = [{}, { disabled: true }];\n\nexport default {\n  title: \"Toasts/Tag\",\n  component: Tag,\n  argTypes: {\n    active: {\n      control: {\n        type: \"boolean\",\n      },\n    },\n    type: {\n      options: types,\n    },\n    size: {\n      options: sizes,\n    },\n    children: {\n      type: \"string\",\n    },\n  },\n};\n\nexport const Overview = ((): JSX.Element => (\n  <Flex flexDirection=\"column\">\n    {sizes.map((size) => (\n      <Flex flexDirection=\"column\" marginBottom={5}>\n        <Text variant=\"h5\" marginBottom={5}>\n          size=\"{size}\"\n        </Text>\n        {types.map((type) => (\n          <Flex flexDirection=\"row\" alignItems=\"center\" mb={5}>\n            <div style={{ width: \"150px\" }}>\n              <Text variant=\"small\" color=\"neutral.c70\">\n                type=\"{type}\"\n              </Text>\n            </div>\n            <Flex flexDirection=\"row\" mt=\"5px\" columnGap=\"16px\">\n              {states.map((state) =>\n                [true, false].map((active: boolean) => (\n                  <Tag size={size} type={type} active={active} {...state}>\n                    {active ? \"Active\" : \"Inactive\"}\n                  </Tag>\n                )),\n              )}\n            </Flex>\n          </Flex>\n        ))}\n      </Flex>\n    ))}\n  </Flex>\n)).bind({});\n\nconst Template: StoryTemplate<TagProps> = (args: TagProps): JSX.Element => (\n  <Tag {...args}>{args.children}</Tag>\n);\n\nconst defaultArgs = {\n  active: true,\n  children: \"Label\",\n  type: \"large\",\n};\n\nexport const Plain = Template.bind({});\nPlain.args = {\n  ...defaultArgs,\n  type: \"plain\",\n};\nexport const Opacity = Template.bind({});\nOpacity.args = {\n  ...defaultArgs,\n  type: \"opacity\",\n};\nexport const Outlined = Template.bind({});\nOutlined.args = {\n  ...defaultArgs,\n  type: \"outlined\",\n};\nexport const OutlinedOpacity = Template.bind({});\nOutlined.args = {\n  ...defaultArgs,\n  type: \"outlinedOpacity\",\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,mBAA0C;AAC1C,kBAAiB;AACjB,kBAAiB;AAEjB,MAAM,QAAgB,CAAC,SAAS,UAAU,OAAO;AACjD,MAAM,QAAgB,CAAC,SAAS,WAAW,YAAY,iBAAiB;AACxE,MAAM,SAAS,CAAC,CAAC,GAAG,EAAE,UAAU,KAAK,CAAC;AAEtC,IAAO,sBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEO,MAAM,YAAY,MACvB,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,YACjB,MAAM,IAAI,CAAC,SACV,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,UAAS,cAAc,KACzC,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,MAAK,cAAc,KAAG,UAC3B,MAAK,GACd,GACC,MAAM,IAAI,CAAC,SACV,6BAAAF,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,OAAM,YAAW,UAAS,IAAI,KAChD,6BAAAD,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,KAC3B,6BAAAA,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,SAAQ,OAAM,iBAAc,UACjC,MAAK,GACd,CACF,GACA,6BAAAF,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,OAAM,IAAG,OAAM,WAAU,UAC1C,OAAO;AAAA,EAAI,CAAC,UACX,CAAC,MAAM,KAAK,EAAE,IAAI,CAAC,WACjB,6BAAAD,QAAA,cAAC,aAAAD,SAAA,EAAI,MAAY,MAAY,QAAiB,GAAG,SAC9C,SAAS,WAAW,UACvB,CACD;AACH,CACF,CACF,CACD,CACH,CACD,CACH,GACC,KAAK,CAAC,CAAC;AAEV,MAAM,WAAoC,CAAC,SACzC,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAK,GAAG,QAAO,KAAK,QAAS;AAGhC,MAAM,cAAc;AAAA,EAClB,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM;AACR;AAEO,MAAM,QAAQ,SAAS,KAAK,CAAC,CAAC;AACrC,MAAM,OAAO;AAAA,EACX,GAAG;AAAA,EACH,MAAM;AACR;AACO,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;AACvC,QAAQ,OAAO;AAAA,EACb,GAAG;AAAA,EACH,MAAM;AACR;AACO,MAAM,WAAW,SAAS,KAAK,CAAC,CAAC;AACxC,SAAS,OAAO;AAAA,EACd,GAAG;AAAA,EACH,MAAM;AACR;AACO,MAAM,kBAAkB,SAAS,KAAK,CAAC,CAAC;AAC/C,SAAS,OAAO;AAAA,EACd,GAAG;AAAA,EACH,MAAM;AACR;",
+  "sourcesContent": ["import React from \"react\";\n\nimport { StoryTemplate } from \"../helpers\";\nimport Tag, { Type, Size, TagProps } from \"./index\";\nimport Text from \"../asorted/Text\";\nimport Flex from \"../layout/Flex\";\n\nconst sizes: Size[] = [\"large\", \"medium\", \"small\"];\nconst types: Type[] = [\"plain\", \"opacity\", \"outlined\", \"outlinedOpacity\"];\nconst states = [{}, { disabled: true }];\n\nexport default {\n  title: \"Toasts/Tag\",\n  component: Tag,\n  argTypes: {\n    active: {\n      control: {\n        type: \"boolean\",\n      },\n    },\n    type: {\n      options: types,\n    },\n    size: {\n      options: sizes,\n    },\n    children: {\n      type: \"string\",\n    },\n  },\n};\n\nexport const Overview = ((): JSX.Element => (\n  <Flex flexDirection=\"column\">\n    {sizes.map(size => (\n      <Flex flexDirection=\"column\" marginBottom={5}>\n        <Text variant=\"h5\" marginBottom={5}>\n          size=\"{size}\"\n        </Text>\n        {types.map(type => (\n          <Flex flexDirection=\"row\" alignItems=\"center\" mb={5}>\n            <div style={{ width: \"150px\" }}>\n              <Text variant=\"small\" color=\"neutral.c70\">\n                type=\"{type}\"\n              </Text>\n            </div>\n            <Flex flexDirection=\"row\" mt=\"5px\" columnGap=\"16px\">\n              {states.map(state =>\n                [true, false].map((active: boolean) => (\n                  <Tag size={size} type={type} active={active} {...state}>\n                    {active ? \"Active\" : \"Inactive\"}\n                  </Tag>\n                )),\n              )}\n            </Flex>\n          </Flex>\n        ))}\n      </Flex>\n    ))}\n  </Flex>\n)).bind({});\n\nconst Template: StoryTemplate<TagProps> = (args: TagProps): JSX.Element => (\n  <Tag {...args}>{args.children}</Tag>\n);\n\nconst defaultArgs = {\n  active: true,\n  children: \"Label\",\n  type: \"large\",\n};\n\nexport const Plain = Template.bind({});\nPlain.args = {\n  ...defaultArgs,\n  type: \"plain\",\n};\nexport const Opacity = Template.bind({});\nOpacity.args = {\n  ...defaultArgs,\n  type: \"opacity\",\n};\nexport const Outlined = Template.bind({});\nOutlined.args = {\n  ...defaultArgs,\n  type: \"outlined\",\n};\nexport const OutlinedOpacity = Template.bind({});\nOutlined.args = {\n  ...defaultArgs,\n  type: \"outlinedOpacity\",\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,mBAA0C;AAC1C,kBAAiB;AACjB,kBAAiB;AAEjB,MAAM,QAAgB,CAAC,SAAS,UAAU,OAAO;AACjD,MAAM,QAAgB,CAAC,SAAS,WAAW,YAAY,iBAAiB;AACxE,MAAM,SAAS,CAAC,CAAC,GAAG,EAAE,UAAU,KAAK,CAAC;AAEtC,IAAO,sBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEO,MAAM,YAAY,MACvB,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,YACjB,MAAM,IAAI,UACT,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,UAAS,cAAc,KACzC,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,MAAK,cAAc,KAAG,UAC3B,MAAK,GACd,GACC,MAAM,IAAI,UACT,6BAAAF,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,OAAM,YAAW,UAAS,IAAI,KAChD,6BAAAD,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,KAC3B,6BAAAA,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,SAAQ,OAAM,iBAAc,UACjC,MAAK,GACd,CACF,GACA,6BAAAF,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,OAAM,IAAG,OAAM,WAAU,UAC1C,OAAO;AAAA,EAAI,WACV,CAAC,MAAM,KAAK,EAAE,IAAI,CAAC,WACjB,6BAAAD,QAAA,cAAC,aAAAD,SAAA,EAAI,MAAY,MAAY,QAAiB,GAAG,SAC9C,SAAS,WAAW,UACvB,CACD;AACH,CACF,CACF,CACD,CACH,CACD,CACH,GACC,KAAK,CAAC,CAAC;AAEV,MAAM,WAAoC,CAAC,SACzC,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAK,GAAG,QAAO,KAAK,QAAS;AAGhC,MAAM,cAAc;AAAA,EAClB,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM;AACR;AAEO,MAAM,QAAQ,SAAS,KAAK,CAAC,CAAC;AACrC,MAAM,OAAO;AAAA,EACX,GAAG;AAAA,EACH,MAAM;AACR;AACO,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;AACvC,QAAQ,OAAO;AAAA,EACb,GAAG;AAAA,EACH,MAAM;AACR;AACO,MAAM,WAAW,SAAS,KAAK,CAAC,CAAC;AACxC,SAAS,OAAO;AAAA,EACd,GAAG;AAAA,EACH,MAAM;AACR;AACO,MAAM,kBAAkB,SAAS,KAAK,CAAC,CAAC;AAC/C,SAAS,OAAO;AAAA,EACd,GAAG;AAAA,EACH,MAAM;AACR;",
   "names": ["Tag", "React", "Flex", "Text"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/Tag/index.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport { TextVariants } from \"src/styles/theme\";\nimport { border, BorderProps } from \"styled-system\";\nimport Text, { TextProps } from \"../asorted/Text\";\nimport baseStyled, { BaseStyledProps } from \"../styled\";\n\nexport type Size = \"large\" | \"medium\" | \"small\";\nexport type Type = \"plain\" | \"opacity\" | \"outlined\" | \"outlinedOpacity\";\n\nexport type TagProps = BaseStyledProps &\n  React.HTMLAttributes<HTMLDivElement> &\n  BorderProps &\n  React.PropsWithChildren<{\n    /**\n     * Changes the appearance based on the active state.\n     */\n    active?: boolean;\n    /**\n     * Tag style.\n     */\n    type?: Type;\n    /**\n     * Size of the tag, affects the padding and the casing (uppercase for small and medium)\n     */\n    size?: Size;\n    /**\n     * Props passed to the text component, overriding props set internally by Tag component\n     */\n    textProps?: TextProps;\n\n    disabled?: boolean;\n  }>;\n\nfunction getColor({ type, active, disabled }: TagProps) {\n  switch (type) {\n    case \"plain\":\n      if (disabled) return active ? \"neutral.c00\" : \"neutral.c70\";\n      return active ? \"neutral.c00\" : \"primary.c90\";\n    default:\n      return disabled ? \"neutral.c70\" : \"primary.c90\";\n  }\n}\n\nfunction getBgColor({ type, active, disabled }: TagProps) {\n  switch (type) {\n    case \"plain\":\n      return active ? (disabled ? \"neutral.c70\" : \"primary.c90\") : undefined;\n    case \"opacity\":\n      return active ? (disabled ? \"neutral.c30\" : \"primary.c20\") : undefined;\n    default:\n      return;\n  }\n}\n\nfunction getBorderColor({ type, active, disabled }: TagProps) {\n  if (!active) return;\n  switch (type) {\n    case \"outlined\":\n      return disabled ? \"neutral.c70\" : \"primary.c90\";\n    case \"outlinedOpacity\":\n      return disabled ? \"neutral.c40\" : \"primary.c40\";\n  }\n}\n\nfunction getPadding({ size }: TagProps) {\n  switch (size) {\n    case \"small\":\n      return \"3px 5px\";\n    case \"medium\":\n      return \"6px 8px\";\n    case \"large\":\n    default:\n      return \"9px 10px 10px\";\n  }\n}\n\nfunction getTextProps({ size }: TagProps): {\n  variant: TextVariants;\n  fontWeight?: string;\n  uppercase?: boolean;\n} {\n  switch (size) {\n    case \"small\":\n    case \"medium\":\n      return {\n        variant: \"tiny\",\n        fontWeight: \"semiBold\",\n      };\n    case \"large\":\n    default:\n      return {\n        variant: \"extraSmall\",\n        fontWeight: \"semiBold\",\n      };\n  }\n}\n\nconst TagContainer = baseStyled.div.attrs<TagProps, TagProps>((props) => ({\n  backgroundColor: props.bg || props.backgroundColor || getBgColor(props),\n  color: props.color || getColor(props),\n  borderColor: getBorderColor(props),\n}))`\n  display: inline-flex;\n  justify-content: center;\n  border: 1px solid transparent;\n  border-radius: ${(p) => `${p.theme.radii[1]}px`};\n  padding: ${(p) => getPadding(p)};\n  ${border}\n`;\n\nexport default function Tag({\n  children,\n  textProps,\n  size = \"large\",\n  ...props\n}: TagProps): JSX.Element {\n  const textColor = getColor(props);\n  const baseTextProps = getTextProps({ size, ...props });\n  return (\n    <TagContainer size={size} {...props}>\n      <Text {...baseTextProps} color={textColor} {...(textProps ? textProps : {})}>\n        {children}\n      </Text>\n    </TagContainer>\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,2BAAoC;AACpC,kBAAgC;AAChC,oBAA4C;AA6B5C,SAAS,SAAS,EAAE,MAAM,QAAQ,SAAS,GAAa;AACtD,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,UAAI;AAAU,eAAO,SAAS,gBAAgB;AAC9C,aAAO,SAAS,gBAAgB;AAAA,IAClC;AACE,aAAO,WAAW,gBAAgB;AAAA,EACtC;AACF;AAEA,SAAS,WAAW,EAAE,MAAM,QAAQ,SAAS,GAAa;AACxD,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,SAAU,WAAW,gBAAgB,gBAAiB;AAAA,IAC/D,KAAK;AACH,aAAO,SAAU,WAAW,gBAAgB,gBAAiB;AAAA,IAC/D;AACE;AAAA,EACJ;AACF;AAEA,SAAS,eAAe,EAAE,MAAM,QAAQ,SAAS,GAAa;AAC5D,MAAI,CAAC;AAAQ;AACb,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,WAAW,gBAAgB;AAAA,IACpC,KAAK;AACH,aAAO,WAAW,gBAAgB;AAAA,EACtC;AACF;AAEA,SAAS,WAAW,EAAE,KAAK,GAAa;AACtC,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF;AAEA,SAAS,aAAa,EAAE,KAAK,GAI3B;AACA,UAAQ,MAAM;AAAA,IACZ,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,MACd;AAAA,IACF,KAAK;AAAA,IACL;AACE,aAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,MACd;AAAA,EACJ;AACF;AAEA,MAAM,eAAe,cAAAA,QAAW,IAAI,MAA0B,CAAC,WAAW;AAAA,EACxE,iBAAiB,MAAM,MAAM,MAAM,mBAAmB,WAAW,KAAK;AAAA,EACtE,OAAO,MAAM,SAAS,SAAS,KAAK;AAAA,EACpC,aAAa,eAAe,KAAK;AACnC,EAAE;AAAA;AAAA;AAAA;AAAA,mBAIiB,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM,CAAC;AAAA,aAC/B,CAAC,MAAM,WAAW,CAAC;AAAA,IAC5B;AAAA;AAGW,SAAR,IAAqB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GAA0B;AACxB,QAAM,YAAY,SAAS,KAAK;AAChC,QAAM,gBAAgB,aAAa,EAAE,MAAM,GAAG,MAAM,CAAC;AACrD,SACE,6BAAAC,QAAA,cAAC,gBAAa,MAAa,GAAG,SAC5B,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAM,GAAG,eAAe,OAAO,WAAY,GAAI,YAAY,YAAY,CAAC,KACtE,QACH,CACF;AAEJ;",
+  "sourcesContent": ["import React from \"react\";\nimport { TextVariants } from \"src/styles/theme\";\nimport { border, BorderProps } from \"styled-system\";\nimport Text, { TextProps } from \"../asorted/Text\";\nimport baseStyled, { BaseStyledProps } from \"../styled\";\n\nexport type Size = \"large\" | \"medium\" | \"small\";\nexport type Type = \"plain\" | \"opacity\" | \"outlined\" | \"outlinedOpacity\";\n\nexport type TagProps = BaseStyledProps &\n  React.HTMLAttributes<HTMLDivElement> &\n  BorderProps &\n  React.PropsWithChildren<{\n    /**\n     * Changes the appearance based on the active state.\n     */\n    active?: boolean;\n    /**\n     * Tag style.\n     */\n    type?: Type;\n    /**\n     * Size of the tag, affects the padding and the casing (uppercase for small and medium)\n     */\n    size?: Size;\n    /**\n     * Props passed to the text component, overriding props set internally by Tag component\n     */\n    textProps?: TextProps;\n\n    disabled?: boolean;\n  }>;\n\nfunction getColor({ type, active, disabled }: TagProps) {\n  switch (type) {\n    case \"plain\":\n      if (disabled) return active ? \"neutral.c00\" : \"neutral.c70\";\n      return active ? \"neutral.c00\" : \"primary.c90\";\n    default:\n      return disabled ? \"neutral.c70\" : \"primary.c90\";\n  }\n}\n\nfunction getBgColor({ type, active, disabled }: TagProps) {\n  switch (type) {\n    case \"plain\":\n      return active ? (disabled ? \"neutral.c70\" : \"primary.c90\") : undefined;\n    case \"opacity\":\n      return active ? (disabled ? \"neutral.c30\" : \"primary.c20\") : undefined;\n    default:\n      return;\n  }\n}\n\nfunction getBorderColor({ type, active, disabled }: TagProps) {\n  if (!active) return;\n  switch (type) {\n    case \"outlined\":\n      return disabled ? \"neutral.c70\" : \"primary.c90\";\n    case \"outlinedOpacity\":\n      return disabled ? \"neutral.c40\" : \"primary.c40\";\n  }\n}\n\nfunction getPadding({ size }: TagProps) {\n  switch (size) {\n    case \"small\":\n      return \"3px 5px\";\n    case \"medium\":\n      return \"6px 8px\";\n    case \"large\":\n    default:\n      return \"9px 10px 10px\";\n  }\n}\n\nfunction getTextProps({ size }: TagProps): {\n  variant: TextVariants;\n  fontWeight?: string;\n  uppercase?: boolean;\n} {\n  switch (size) {\n    case \"small\":\n    case \"medium\":\n      return {\n        variant: \"tiny\",\n        fontWeight: \"semiBold\",\n      };\n    case \"large\":\n    default:\n      return {\n        variant: \"extraSmall\",\n        fontWeight: \"semiBold\",\n      };\n  }\n}\n\nconst TagContainer = baseStyled.div.attrs<TagProps, TagProps>(props => ({\n  backgroundColor: props.bg || props.backgroundColor || getBgColor(props),\n  color: props.color || getColor(props),\n  borderColor: getBorderColor(props),\n}))`\n  display: inline-flex;\n  justify-content: center;\n  border: 1px solid transparent;\n  border-radius: ${p => `${p.theme.radii[1]}px`};\n  padding: ${p => getPadding(p)};\n  ${border}\n`;\n\nexport default function Tag({\n  children,\n  textProps,\n  size = \"large\",\n  ...props\n}: TagProps): JSX.Element {\n  const textColor = getColor(props);\n  const baseTextProps = getTextProps({ size, ...props });\n  return (\n    <TagContainer size={size} {...props}>\n      <Text {...baseTextProps} color={textColor} {...(textProps ? textProps : {})}>\n        {children}\n      </Text>\n    </TagContainer>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,2BAAoC;AACpC,kBAAgC;AAChC,oBAA4C;AA6B5C,SAAS,SAAS,EAAE,MAAM,QAAQ,SAAS,GAAa;AACtD,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,UAAI;AAAU,eAAO,SAAS,gBAAgB;AAC9C,aAAO,SAAS,gBAAgB;AAAA,IAClC;AACE,aAAO,WAAW,gBAAgB;AAAA,EACtC;AACF;AAEA,SAAS,WAAW,EAAE,MAAM,QAAQ,SAAS,GAAa;AACxD,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,SAAU,WAAW,gBAAgB,gBAAiB;AAAA,IAC/D,KAAK;AACH,aAAO,SAAU,WAAW,gBAAgB,gBAAiB;AAAA,IAC/D;AACE;AAAA,EACJ;AACF;AAEA,SAAS,eAAe,EAAE,MAAM,QAAQ,SAAS,GAAa;AAC5D,MAAI,CAAC;AAAQ;AACb,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,WAAW,gBAAgB;AAAA,IACpC,KAAK;AACH,aAAO,WAAW,gBAAgB;AAAA,EACtC;AACF;AAEA,SAAS,WAAW,EAAE,KAAK,GAAa;AACtC,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF;AAEA,SAAS,aAAa,EAAE,KAAK,GAI3B;AACA,UAAQ,MAAM;AAAA,IACZ,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,MACd;AAAA,IACF,KAAK;AAAA,IACL;AACE,aAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,MACd;AAAA,EACJ;AACF;AAEA,MAAM,eAAe,cAAAA,QAAW,IAAI,MAA0B,YAAU;AAAA,EACtE,iBAAiB,MAAM,MAAM,MAAM,mBAAmB,WAAW,KAAK;AAAA,EACtE,OAAO,MAAM,SAAS,SAAS,KAAK;AAAA,EACpC,aAAa,eAAe,KAAK;AACnC,EAAE;AAAA;AAAA;AAAA;AAAA,mBAIiB,OAAK,GAAG,EAAE,MAAM,MAAM,CAAC;AAAA,aAC7B,OAAK,WAAW,CAAC;AAAA,IAC1B;AAAA;AAGW,SAAR,IAAqB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GAA0B;AACxB,QAAM,YAAY,SAAS,KAAK;AAChC,QAAM,gBAAgB,aAAa,EAAE,MAAM,GAAG,MAAM,CAAC;AACrD,SACE,6BAAAC,QAAA,cAAC,gBAAa,MAAa,GAAG,SAC5B,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAM,GAAG,eAAe,OAAO,WAAY,GAAI,YAAY,YAAY,CAAC,KACtE,QACH,CACF;AAEJ;",
   "names": ["baseStyled", "React", "Text"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/asorted/Divider/index.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Flex, { FlexBoxProps } from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\n\nexport type Props = FlexBoxProps & { text?: string };\nconst DividerBase = styled(Flex).attrs<FlexBoxProps>((p: FlexBoxProps) => ({\n  my: p.my || 0,\n  height: 1,\n  backgroundColor: \"neutral.c40\",\n}))`\n  &[data-variant=\"light\"] {\n    background: ${(p) => p.theme.colors.neutral.c30};\n  }\n`;\n\nconst Divider: React.FC<Props> = (props) => {\n  if (!props.text) return <DividerBase {...props} />;\n  return (\n    <Flex {...props} flexDirection=\"row\" alignItems=\"center\">\n      <DividerBase my={6} flex={1} />\n      <Text variant=\"bodyLineHeight\" color=\"neutral.c60\" mx={6}>\n        {props.text}\n      </Text>\n      <DividerBase my={6} flex={1} />\n    </Flex>\n  );\n};\n\nexport default Divider;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAmC;AACnC,kBAAiB;AAGjB,MAAM,kBAAc,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAoB,CAAC,OAAqB;AAAA,EACzE,IAAI,EAAE,MAAM;AAAA,EACZ,QAAQ;AAAA,EACR,iBAAiB;AACnB,EAAE;AAAA;AAAA,kBAEgB,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAIhD,MAAM,UAA2B,CAAC,UAAU;AAC1C,MAAI,CAAC,MAAM;AAAM,WAAO,6BAAAC,QAAA,cAAC,eAAa,GAAG,OAAO;AAChD,SACE,6BAAAA,QAAA,cAAC,YAAAD,SAAA,EAAM,GAAG,OAAO,eAAc,OAAM,YAAW,YAC9C,6BAAAC,QAAA,cAAC,eAAY,IAAI,GAAG,MAAM,GAAG,GAC7B,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAQ,kBAAiB,OAAM,eAAc,IAAI,KACpD,MAAM,IACT,GACA,6BAAAD,QAAA,cAAC,eAAY,IAAI,GAAG,MAAM,GAAG,CAC/B;AAEJ;AAEA,IAAO,kBAAQ;",
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Flex, { FlexBoxProps } from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\n\nexport type Props = FlexBoxProps & { text?: string };\nconst DividerBase = styled(Flex).attrs<FlexBoxProps>((p: FlexBoxProps) => ({\n  my: p.my || 0,\n  height: 1,\n  backgroundColor: \"neutral.c40\",\n}))`\n  &[data-variant=\"light\"] {\n    background: ${p => p.theme.colors.neutral.c30};\n  }\n`;\n\nconst Divider: React.FC<Props> = props => {\n  if (!props.text) return <DividerBase {...props} />;\n  return (\n    <Flex {...props} flexDirection=\"row\" alignItems=\"center\">\n      <DividerBase my={6} flex={1} />\n      <Text variant=\"bodyLineHeight\" color=\"neutral.c60\" mx={6}>\n        {props.text}\n      </Text>\n      <DividerBase my={6} flex={1} />\n    </Flex>\n  );\n};\n\nexport default Divider;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAmC;AACnC,kBAAiB;AAGjB,MAAM,kBAAc,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAoB,CAAC,OAAqB;AAAA,EACzE,IAAI,EAAE,MAAM;AAAA,EACZ,QAAQ;AAAA,EACR,iBAAiB;AACnB,EAAE;AAAA;AAAA,kBAEgB,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI9C,MAAM,UAA2B,WAAS;AACxC,MAAI,CAAC,MAAM;AAAM,WAAO,6BAAAC,QAAA,cAAC,eAAa,GAAG,OAAO;AAChD,SACE,6BAAAA,QAAA,cAAC,YAAAD,SAAA,EAAM,GAAG,OAAO,eAAc,OAAM,YAAW,YAC9C,6BAAAC,QAAA,cAAC,eAAY,IAAI,GAAG,MAAM,GAAG,GAC7B,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAQ,kBAAiB,OAAM,eAAc,IAAI,KACpD,MAAM,IACT,GACA,6BAAAD,QAAA,cAAC,eAAY,IAAI,GAAG,MAAM,GAAG,CAC/B;AAEJ;AAEA,IAAO,kBAAQ;",
   "names": ["styled", "Flex", "React", "Text"]
 }

package/lib/cjs/components/asorted/Icon/BoxedIcon.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/asorted/Icon/BoxedIcon.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Flex from \"../../layout/Flex\";\n\nexport const DEFAULT_BOX_SIZE = 40;\nexport const DEFAULT_ICON_SIZE = 16;\nexport const DEFAULT_BADGE_SIZE = 20;\n\nfunction getClipRectangleSize(badgeSize: number): number {\n  return (3 / 4) * badgeSize;\n}\n\nconst getTopRightSquareClippedPolygon = (boxSize: number, rectangleSize: number) => {\n  // clipping path that hides top right square of size `${rectangleSize}px`\n  const diff = boxSize - rectangleSize;\n  return `polygon(0 0, 0 0, 0 0, ${diff}px 0, ${diff}px ${rectangleSize}px, 100% ${rectangleSize}px, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 100%)`;\n};\n\nconst Container = styled(Flex).attrs((p: { size: number }) => ({\n  heigth: p.size,\n  width: p.size,\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  position: \"relative\",\n}))<{ size: number }>``;\n\nconst IconBoxBackground = styled(Flex)<{ size: number; badgeSize: number; hasBadge: boolean }>`\n  position: absolute;\n  height: ${(p) => p.size}px;\n  width: ${(p) => p.size}px;\n  ${(p) => {\n    return (\n      p.hasBadge &&\n      `clip-path: ${getTopRightSquareClippedPolygon(p.size, getClipRectangleSize(p.badgeSize))};`\n    );\n  }};\n  border-radius: ${(p) => p.theme.radii[2]}px;\n`;\n\nconst BadgeContainer = styled.div<{ badgeSize: number }>`\n  position: absolute;\n  ${(p) => `\n    top: -${p.badgeSize / 2 - 2}px;\n    right: -${p.badgeSize / 2 - 2}px;`}\n`;\n\nexport type IconProps = {\n  size?: number;\n  color?: string;\n};\n\nexport type IconBoxProps = {\n  /**\n   * Component that takes `{size?: number; color?: string}` as props. Will be rendered at the top right with the size provided in `badgeSize` or a default size.\n   */\n  Badge?: React.ComponentType<IconProps> | ((props: IconProps) => JSX.Element);\n  /**\n   * Color of the border\n   */\n  borderColor?: string;\n  /**\n   * Badge color, will be applied to the component provided in the `Badge` prop\n   */\n  badgeColor?: string;\n  /**\n   * Badge size, will be applied to the component provided in the `Badge` prop\n   */\n  badgeSize?: number;\n  children?: JSX.Element;\n  /**\n   * Box size for preview\n   */\n  size?: number;\n};\n\nexport type BoxedIconProps = IconBoxProps & {\n  /**\n   * Component that takes `{size?: number; color?: string}` as props. Will be rendered at the top right with the size provided in `iconSize` or a default size.\n   */\n  Icon: React.ComponentType<IconProps> | ((props: IconProps) => JSX.Element);\n  /**\n   * Icon size, will be applied to the component provided in the `Icon` prop\n   */\n  iconSize?: number;\n  /**\n   * Icon color, will be applied to the component provided in the `Icon` prop\n   */\n  iconColor?: string;\n};\n\nexport const IconBox = ({\n  Badge,\n  size = DEFAULT_BOX_SIZE,\n  children,\n  borderColor = \"neutral.c40\",\n  badgeColor,\n  badgeSize = DEFAULT_BADGE_SIZE,\n}: IconBoxProps) => {\n  const hasBadge = !!Badge;\n  return (\n    <Container size={size}>\n      <IconBoxBackground\n        size={size}\n        badgeSize={badgeSize}\n        hasBadge={hasBadge}\n        border=\"1px solid\"\n        borderColor={borderColor}\n      />\n      {children}\n      {hasBadge && (\n        <BadgeContainer badgeSize={badgeSize}>\n          <Badge size={badgeSize} color={badgeColor} />\n        </BadgeContainer>\n      )}\n    </Container>\n  );\n};\n\nconst BoxedIcon = ({\n  Icon,\n  iconSize = DEFAULT_ICON_SIZE,\n  iconColor,\n  ...iconBoxProps\n}: BoxedIconProps) => {\n  return (\n    <IconBox {...iconBoxProps}>\n      <Icon size={iconSize || DEFAULT_ICON_SIZE} color={iconColor} />\n    </IconBox>\n  );\n};\n\nexport default BoxedIcon;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AAEV,MAAM,mBAAmB;AACzB,MAAM,oBAAoB;AAC1B,MAAM,qBAAqB;AAElC,SAAS,qBAAqB,WAA2B;AACvD,SAAQ,IAAI,IAAK;AACnB;AAEA,MAAM,kCAAkC,CAAC,SAAiB,kBAA0B;AAElF,QAAM,OAAO,UAAU;AACvB,SAAO,0BAA0B,aAAa,UAAU,yBAAyB;AACnF;AAEA,MAAM,gBAAY,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAM,CAAC,OAAyB;AAAA,EAC7D,QAAQ,EAAE;AAAA,EACV,OAAO,EAAE;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,UAAU;AACZ,EAAE;AAEF,MAAM,wBAAoB,yBAAAD,SAAO,YAAAC,OAAI;AAAA;AAAA,YAEzB,CAAC,MAAM,EAAE;AAAA,WACV,CAAC,MAAM,EAAE;AAAA,IAChB,CAAC,MAAM;AACP,SACE,EAAE,YACF,cAAc,gCAAgC,EAAE,MAAM,qBAAqB,EAAE,SAAS,CAAC;AAE3F;AAAA,mBACiB,CAAC,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA;AAGzC,MAAM,iBAAiB,yBAAAD,QAAO;AAAA;AAAA,IAE1B,CAAC,MAAM;AAAA,YACC,EAAE,YAAY,IAAI;AAAA,cAChB,EAAE,YAAY,IAAI;AAAA;AA+CzB,MAAM,UAAU,CAAC;AAAA,EACtB;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,YAAY;AACd,MAAoB;AAClB,QAAM,WAAW,CAAC,CAAC;AACnB,SACE,6BAAAE,QAAA,cAAC,aAAU,QACT,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAO;AAAA,MACP;AAAA;AAAA,EACF,GACC,UACA,YACC,6BAAAA,QAAA,cAAC,kBAAe,aACd,6BAAAA,QAAA,cAAC,SAAM,MAAM,WAAW,OAAO,YAAY,CAC7C,CAEJ;AAEJ;AAEA,MAAM,YAAY,CAAC;AAAA,EACjB;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,MAAsB;AACpB,SACE,6BAAAA,QAAA,cAAC,WAAS,GAAG,gBACX,6BAAAA,QAAA,cAAC,QAAK,MAAM,YAAY,mBAAmB,OAAO,WAAW,CAC/D;AAEJ;AAEA,IAAO,oBAAQ;",
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Flex from \"../../layout/Flex\";\n\nexport const DEFAULT_BOX_SIZE = 40;\nexport const DEFAULT_ICON_SIZE = 16;\nexport const DEFAULT_BADGE_SIZE = 20;\n\nfunction getClipRectangleSize(badgeSize: number): number {\n  return (3 / 4) * badgeSize;\n}\n\nconst getTopRightSquareClippedPolygon = (boxSize: number, rectangleSize: number) => {\n  // clipping path that hides top right square of size `${rectangleSize}px`\n  const diff = boxSize - rectangleSize;\n  return `polygon(0 0, 0 0, 0 0, ${diff}px 0, ${diff}px ${rectangleSize}px, 100% ${rectangleSize}px, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 100%)`;\n};\n\nconst Container = styled(Flex).attrs((p: { size: number }) => ({\n  heigth: p.size,\n  width: p.size,\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  position: \"relative\",\n}))<{ size: number }>``;\n\nconst IconBoxBackground = styled(Flex)<{ size: number; badgeSize: number; hasBadge: boolean }>`\n  position: absolute;\n  height: ${p => p.size}px;\n  width: ${p => p.size}px;\n  ${p => {\n    return (\n      p.hasBadge &&\n      `clip-path: ${getTopRightSquareClippedPolygon(p.size, getClipRectangleSize(p.badgeSize))};`\n    );\n  }};\n  border-radius: ${p => p.theme.radii[2]}px;\n`;\n\nconst BadgeContainer = styled.div<{ badgeSize: number }>`\n  position: absolute;\n  ${p => `\n    top: -${p.badgeSize / 2 - 2}px;\n    right: -${p.badgeSize / 2 - 2}px;`}\n`;\n\nexport type IconProps = {\n  size?: number;\n  color?: string;\n};\n\nexport type IconBoxProps = {\n  /**\n   * Component that takes `{size?: number; color?: string}` as props. Will be rendered at the top right with the size provided in `badgeSize` or a default size.\n   */\n  Badge?: React.ComponentType<IconProps> | ((props: IconProps) => JSX.Element);\n  /**\n   * Color of the border\n   */\n  borderColor?: string;\n  /**\n   * Badge color, will be applied to the component provided in the `Badge` prop\n   */\n  badgeColor?: string;\n  /**\n   * Badge size, will be applied to the component provided in the `Badge` prop\n   */\n  badgeSize?: number;\n  children?: JSX.Element;\n  /**\n   * Box size for preview\n   */\n  size?: number;\n};\n\nexport type BoxedIconProps = IconBoxProps & {\n  /**\n   * Component that takes `{size?: number; color?: string}` as props. Will be rendered at the top right with the size provided in `iconSize` or a default size.\n   */\n  Icon: React.ComponentType<IconProps> | ((props: IconProps) => JSX.Element);\n  /**\n   * Icon size, will be applied to the component provided in the `Icon` prop\n   */\n  iconSize?: number;\n  /**\n   * Icon color, will be applied to the component provided in the `Icon` prop\n   */\n  iconColor?: string;\n};\n\nexport const IconBox = ({\n  Badge,\n  size = DEFAULT_BOX_SIZE,\n  children,\n  borderColor = \"neutral.c40\",\n  badgeColor,\n  badgeSize = DEFAULT_BADGE_SIZE,\n}: IconBoxProps) => {\n  const hasBadge = !!Badge;\n  return (\n    <Container size={size}>\n      <IconBoxBackground\n        size={size}\n        badgeSize={badgeSize}\n        hasBadge={hasBadge}\n        border=\"1px solid\"\n        borderColor={borderColor}\n      />\n      {children}\n      {hasBadge && (\n        <BadgeContainer badgeSize={badgeSize}>\n          <Badge size={badgeSize} color={badgeColor} />\n        </BadgeContainer>\n      )}\n    </Container>\n  );\n};\n\nconst BoxedIcon = ({\n  Icon,\n  iconSize = DEFAULT_ICON_SIZE,\n  iconColor,\n  ...iconBoxProps\n}: BoxedIconProps) => {\n  return (\n    <IconBox {...iconBoxProps}>\n      <Icon size={iconSize || DEFAULT_ICON_SIZE} color={iconColor} />\n    </IconBox>\n  );\n};\n\nexport default BoxedIcon;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AAEV,MAAM,mBAAmB;AACzB,MAAM,oBAAoB;AAC1B,MAAM,qBAAqB;AAElC,SAAS,qBAAqB,WAA2B;AACvD,SAAQ,IAAI,IAAK;AACnB;AAEA,MAAM,kCAAkC,CAAC,SAAiB,kBAA0B;AAElF,QAAM,OAAO,UAAU;AACvB,SAAO,0BAA0B,aAAa,UAAU,yBAAyB;AACnF;AAEA,MAAM,gBAAY,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAM,CAAC,OAAyB;AAAA,EAC7D,QAAQ,EAAE;AAAA,EACV,OAAO,EAAE;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,UAAU;AACZ,EAAE;AAEF,MAAM,wBAAoB,yBAAAD,SAAO,YAAAC,OAAI;AAAA;AAAA,YAEzB,OAAK,EAAE;AAAA,WACR,OAAK,EAAE;AAAA,IACd,OAAK;AACL,SACE,EAAE,YACF,cAAc,gCAAgC,EAAE,MAAM,qBAAqB,EAAE,SAAS,CAAC;AAE3F;AAAA,mBACiB,OAAK,EAAE,MAAM,MAAM,CAAC;AAAA;AAGvC,MAAM,iBAAiB,yBAAAD,QAAO;AAAA;AAAA,IAE1B,OAAK;AAAA,YACG,EAAE,YAAY,IAAI;AAAA,cAChB,EAAE,YAAY,IAAI;AAAA;AA+CzB,MAAM,UAAU,CAAC;AAAA,EACtB;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,YAAY;AACd,MAAoB;AAClB,QAAM,WAAW,CAAC,CAAC;AACnB,SACE,6BAAAE,QAAA,cAAC,aAAU,QACT,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAO;AAAA,MACP;AAAA;AAAA,EACF,GACC,UACA,YACC,6BAAAA,QAAA,cAAC,kBAAe,aACd,6BAAAA,QAAA,cAAC,SAAM,MAAM,WAAW,OAAO,YAAY,CAC7C,CAEJ;AAEJ;AAEA,MAAM,YAAY,CAAC;AAAA,EACjB;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,MAAsB;AACpB,SACE,6BAAAA,QAAA,cAAC,WAAS,GAAG,gBACX,6BAAAA,QAAA,cAAC,QAAK,MAAM,YAAY,mBAAmB,OAAO,WAAW,CAC/D;AAEJ;AAEA,IAAO,oBAAQ;",
   "names": ["styled", "Flex", "React"]
 }

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

@@ -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      defaultValue: 32,\n    },\n    color: {\n      type: \"string\",\n      description: \"Color\",\n      control: { control: \"color\" },\n    },\n    name: {\n      type: \"enum\",\n      defaultValue: \"BTC\",\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      defaultValue: false,\n    },\n    disabled: {\n      type: \"boolean\",\n      description: \"if icon is in a disabled or not\",\n      defaultValue: false,\n    },\n    tokenIcon: {\n      type: \"string\",\n      description: \"ref to the token icon to show as a sub icon\",\n      defaultValue: \"\",\n    },\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,CAAC,MAAM,EAAE,MAAM,SAAS;AAAA;AAG5B,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,CAAC,MAAO,EAAE,SAAS,qBAAqB,EAAE,MAAM,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAK5E,MAAM,OAAO,yBAAAA,QAAO;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,IAChB;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,cAAc;AAAA,MACd,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,MACb,cAAc;AAAA,IAChB;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA,IAChB;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA,IAChB;AAAA,EACF;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      defaultValue: 32,\n    },\n    color: {\n      type: \"string\",\n      description: \"Color\",\n      control: { control: \"color\" },\n    },\n    name: {\n      type: \"enum\",\n      defaultValue: \"BTC\",\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      defaultValue: false,\n    },\n    disabled: {\n      type: \"boolean\",\n      description: \"if icon is in a disabled or not\",\n      defaultValue: false,\n    },\n    tokenIcon: {\n      type: \"string\",\n      description: \"ref to the token icon to show as a sub icon\",\n      defaultValue: \"\",\n    },\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.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/asorted/Icon/Icons.stories.tsx"],
-  "sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport Icon, { iconNames, Props as IconProps } from \"./Icon\";\nimport { useTheme } from \"styled-components\";\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\",\n  argTypes: {\n    weight: {\n      type: \"enum\",\n      description: \"Weight (Deprecated)\",\n      defaultValue: \"Medium\",\n      control: {\n        options: [\"Medium\"],\n        control: {\n          type: \"select\",\n        },\n      },\n    },\n    size: {\n      type: \"number\",\n      description: \"Icon size for preview\",\n      defaultValue: 32,\n    },\n    color: {\n      type: \"string\",\n      description: \"Color\",\n      control: { control: \"color\" },\n    },\n    name: {\n      type: \"enum\",\n      defaultValue: \"Activity\",\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: IconProps) => {\n  const theme = useTheme();\n  const color = args.color || theme.colors.neutral.c100;\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                  <Icon\n                    key={name}\n                    name={name}\n                    weight={args.weight}\n                    size={args.size}\n                    color={color}\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: IconProps) => {\n  const theme = useTheme();\n  const color = args.color || theme.colors.neutral.c100;\n\n  return <Icon {...args} color={color} />;\n};\n\nexport const List = ListTemplate.bind({});\nexport const SingleIcon = IconTemplate.bind({});\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,kBAAoD;AACpD,IAAAA,4BAAyB;AACzB,eAA8C;AAE9C,MAAM,iBAAa,yBAAAC,SAAO,aAAI;AAAA;AAAA;AAAA,IAG1B,CAAC,MAAM,EAAE,MAAM,SAAS;AAAA;AAG5B,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,CAAC,MAAO,EAAE,SAAS,qBAAqB,EAAE,MAAM,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAK5E,MAAM,OAAO,yBAAAA,QAAO;AAAA,WACT,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAGzC,MAAM,QAAQ;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,QACP,SAAS,CAAC,QAAQ;AAAA,QAClB,SAAS;AAAA,UACP,MAAM;AAAA,QACR;AAAA,MACF;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA,IAChB;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,cAAc;AAAA,MACd,aAAa;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,UACP,MAAM;AAAA,QACR;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AACA,IAAO,wBAAQ;AAEf,MAAM,eAAe,CAAC,SAAoB;AACxC,QAAM,YAAQ,oCAAS;AACvB,QAAM,QAAQ,KAAK,SAAS,MAAM,OAAO,QAAQ;AACjD,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,EAAE;AACvC,QAAM,IAAI,OAAO,YAAY;AAC7B,QAAM,SAAS,IAAI,OAAO,GAAG,GAAG;AAEhC,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,sBACE,KAAK,CAAC,GAAW,MAAc;AAC9B,aAAO,IAAI,EAAE,YAAY,EAAE,QAAQ,CAAC,IAAI,EAAE,YAAY,EAAE,QAAQ,CAAC,IAAI,EAAE,cAAc,CAAC;AAAA,IACxF,CAAC,EACA,IAAI,CAAC,SAAS;AACb,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,YAAAC;AAAA,QAAA;AAAA,UACC,KAAK;AAAA,UACL;AAAA,UACA,QAAQ,KAAK;AAAA,UACb,MAAM,KAAK;AAAA,UACX;AAAA;AAAA,MACF,CACF,GACA,6BAAAD,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,SAAoB;AACxC,QAAM,YAAQ,oCAAS;AACvB,QAAM,QAAQ,KAAK,SAAS,MAAM,OAAO,QAAQ;AAEjD,SAAO,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAM,GAAG,MAAM,OAAc;AACvC;AAEO,MAAM,OAAO,aAAa,KAAK,CAAC,CAAC;AACjC,MAAM,aAAa,aAAa,KAAK,CAAC,CAAC;",
+  "sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport Icon, { iconNames, Props as IconProps } from \"./Icon\";\nimport { useTheme } from \"styled-components\";\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\",\n  argTypes: {\n    weight: {\n      type: \"enum\",\n      description: \"Weight (Deprecated)\",\n      defaultValue: \"Medium\",\n      control: {\n        options: [\"Medium\"],\n        control: {\n          type: \"select\",\n        },\n      },\n    },\n    size: {\n      type: \"number\",\n      description: \"Icon size for preview\",\n      defaultValue: 32,\n    },\n    color: {\n      type: \"string\",\n      description: \"Color\",\n      control: { control: \"color\" },\n    },\n    name: {\n      type: \"enum\",\n      defaultValue: \"Activity\",\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: IconProps) => {\n  const theme = useTheme();\n  const color = args.color || theme.colors.neutral.c100;\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                  <Icon\n                    key={name}\n                    name={name}\n                    weight={args.weight}\n                    size={args.size}\n                    color={color}\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: IconProps) => {\n  const theme = useTheme();\n  const color = args.color || theme.colors.neutral.c100;\n\n  return <Icon {...args} color={color} />;\n};\n\nexport const List = ListTemplate.bind({});\nexport const SingleIcon = IconTemplate.bind({});\n"],
+  "mappings": "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",
   "names": ["import_styled_components", "styled", "React", "Icon"]
 }

package/lib/cjs/components/asorted/Icon/ProviderIcon.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/asorted/Icon/ProviderIcon.tsx"],
-  "sourcesContent": ["import * as providers from \"@ledgerhq/icons-ui/react/Providers/index\";\nimport * as providersBoxed from \"@ledgerhq/icons-ui/react/ProvidersBoxed/index\";\n\nimport React from \"react\";\nimport FlexBox from \"../../layout/Flex\";\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      .replace(/^_/, \"\");\n    if (!set.has(key)) set.add(key);\n    return set;\n  }, new Set<string>()),\n);\n\nexport type IconGetterProps = {\n  search: string;\n  object: Record<string, React.ReactNode>;\n};\n\nconst getIconCaseInsensitive = ({ search, object }: IconGetterProps) => {\n  const asLower = search.toLowerCase();\n  const key = Object.keys(object).find((key) => key.toLowerCase().replace(/^_/, \"\") === asLower);\n  return key ? object[key] : null;\n};\n\nconst ProviderIcon = ({ name, size = \"S\", boxed = false }: Props): JSX.Element | null => {\n  const maybeIconName = `${name}`;\n\n  if (boxed) {\n    const BoxedComponent = getIconCaseInsensitive({\n      search: maybeIconName,\n      object: providersBoxed,\n    }) as React.ElementType;\n    if (BoxedComponent) {\n      return (\n        <FlexBox width={sizes[size]} height={sizes[size]} borderRadius={8} overflow={\"hidden\"}>\n          <BoxedComponent size={sizes[size]} />\n        </FlexBox>\n      );\n    }\n    return null;\n  }\n  const Component = getIconCaseInsensitive({\n    search: maybeIconName,\n    object: providers,\n  }) as React.ElementType;\n  if (Component) {\n    return <Component size={sizes[size]} />;\n  }\n  return null;\n};\n\nexport default ProviderIcon;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAA2B;AAC3B,qBAAgC;AAEhC,mBAAkB;AAClB,kBAAoB;AAEb,MAAM,QAAQ;AAAA,EACnB,KAAK;AAAA,EACL,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AACN;AAUO,MAAM,YAAY,MAAM;AAAA,EAC7B,OAAO,KAAK,SAAS,EAAE,OAAO,CAAC,KAAK,WAAW;AAC7C,UAAM,MAAM,OACT,QAAQ,iDAAiD,IAAI,EAC7D,QAAQ,kBAAkB,IAAI,EAC9B,QAAQ,MAAM,EAAE;AACnB,QAAI,CAAC,IAAI,IAAI,GAAG;AAAG,UAAI,IAAI,GAAG;AAC9B,WAAO;AAAA,EACT,GAAG,oBAAI,IAAY,CAAC;AACtB;AAOA,MAAM,yBAAyB,CAAC,EAAE,QAAQ,OAAO,MAAuB;AACtE,QAAM,UAAU,OAAO,YAAY;AACnC,QAAM,MAAM,OAAO,KAAK,MAAM,EAAE,KAAK,CAACA,SAAQA,KAAI,YAAY,EAAE,QAAQ,MAAM,EAAE,MAAM,OAAO;AAC7F,SAAO,MAAM,OAAO,GAAG,IAAI;AAC7B;AAEA,MAAM,eAAe,CAAC,EAAE,MAAM,OAAO,KAAK,QAAQ,MAAM,MAAiC;AACvF,QAAM,gBAAgB,GAAG;AAEzB,MAAI,OAAO;AACT,UAAM,iBAAiB,uBAAuB;AAAA,MAC5C,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV,CAAC;AACD,QAAI,gBAAgB;AAClB,aACE,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAQ,OAAO,MAAM,IAAI,GAAG,QAAQ,MAAM,IAAI,GAAG,cAAc,GAAG,UAAU,YAC3E,6BAAAD,QAAA,cAAC,kBAAe,MAAM,MAAM,IAAI,GAAG,CACrC;AAAA,IAEJ;AACA,WAAO;AAAA,EACT;AACA,QAAM,YAAY,uBAAuB;AAAA,IACvC,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV,CAAC;AACD,MAAI,WAAW;AACb,WAAO,6BAAAA,QAAA,cAAC,aAAU,MAAM,MAAM,IAAI,GAAG;AAAA,EACvC;AACA,SAAO;AACT;AAEA,IAAO,uBAAQ;",
+  "sourcesContent": ["import * as providers from \"@ledgerhq/icons-ui/react/Providers/index\";\nimport * as providersBoxed from \"@ledgerhq/icons-ui/react/ProvidersBoxed/index\";\n\nimport React from \"react\";\nimport FlexBox from \"../../layout/Flex\";\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      .replace(/^_/, \"\");\n    if (!set.has(key)) set.add(key);\n    return set;\n  }, new Set<string>()),\n);\n\nexport type IconGetterProps = {\n  search: string;\n  object: Record<string, React.ReactNode>;\n};\n\nconst getIconCaseInsensitive = ({ search, object }: IconGetterProps) => {\n  const asLower = search.toLowerCase();\n  const key = Object.keys(object).find(key => key.toLowerCase().replace(/^_/, \"\") === asLower);\n  return key ? object[key] : null;\n};\n\nconst ProviderIcon = ({ name, size = \"S\", boxed = false }: Props): JSX.Element | null => {\n  const maybeIconName = `${name}`;\n\n  if (boxed) {\n    const BoxedComponent = getIconCaseInsensitive({\n      search: maybeIconName,\n      object: providersBoxed,\n    }) as React.ElementType;\n    if (BoxedComponent) {\n      return (\n        <FlexBox width={sizes[size]} height={sizes[size]} borderRadius={8} overflow={\"hidden\"}>\n          <BoxedComponent size={sizes[size]} />\n        </FlexBox>\n      );\n    }\n    return null;\n  }\n  const Component = getIconCaseInsensitive({\n    search: maybeIconName,\n    object: providers,\n  }) as React.ElementType;\n  if (Component) {\n    return <Component size={sizes[size]} />;\n  }\n  return null;\n};\n\nexport default ProviderIcon;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAA2B;AAC3B,qBAAgC;AAEhC,mBAAkB;AAClB,kBAAoB;AAEb,MAAM,QAAQ;AAAA,EACnB,KAAK;AAAA,EACL,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AACN;AAUO,MAAM,YAAY,MAAM;AAAA,EAC7B,OAAO,KAAK,SAAS,EAAE,OAAO,CAAC,KAAK,WAAW;AAC7C,UAAM,MAAM,OACT,QAAQ,iDAAiD,IAAI,EAC7D,QAAQ,kBAAkB,IAAI,EAC9B,QAAQ,MAAM,EAAE;AACnB,QAAI,CAAC,IAAI,IAAI,GAAG;AAAG,UAAI,IAAI,GAAG;AAC9B,WAAO;AAAA,EACT,GAAG,oBAAI,IAAY,CAAC;AACtB;AAOA,MAAM,yBAAyB,CAAC,EAAE,QAAQ,OAAO,MAAuB;AACtE,QAAM,UAAU,OAAO,YAAY;AACnC,QAAM,MAAM,OAAO,KAAK,MAAM,EAAE,KAAK,CAAAA,SAAOA,KAAI,YAAY,EAAE,QAAQ,MAAM,EAAE,MAAM,OAAO;AAC3F,SAAO,MAAM,OAAO,GAAG,IAAI;AAC7B;AAEA,MAAM,eAAe,CAAC,EAAE,MAAM,OAAO,KAAK,QAAQ,MAAM,MAAiC;AACvF,QAAM,gBAAgB,GAAG;AAEzB,MAAI,OAAO;AACT,UAAM,iBAAiB,uBAAuB;AAAA,MAC5C,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV,CAAC;AACD,QAAI,gBAAgB;AAClB,aACE,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAQ,OAAO,MAAM,IAAI,GAAG,QAAQ,MAAM,IAAI,GAAG,cAAc,GAAG,UAAU,YAC3E,6BAAAD,QAAA,cAAC,kBAAe,MAAM,MAAM,IAAI,GAAG,CACrC;AAAA,IAEJ;AACA,WAAO;AAAA,EACT;AACA,QAAM,YAAY,uBAAuB;AAAA,IACvC,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV,CAAC;AACD,MAAI,WAAW;AACb,WAAO,6BAAAA,QAAA,cAAC,aAAU,MAAM,MAAM,IAAI,GAAG;AAAA,EACvC;AACA,SAAO;AACT;AAEA,IAAO,uBAAQ;",
   "names": ["key", "React", "FlexBox"]
 }

package/lib/cjs/components/asorted/Icon/Providers.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/asorted/Icon/Providers.stories.tsx"],
-  "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: \"string\",\n      // defaultValue: \"Aave\",\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"],
-  "mappings": "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",
+  "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: \"string\",\n      // defaultValue: \"Aave\",\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"],
+  "mappings": "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",
   "names": ["styled", "providerSizes", "React", "ProviderIcon"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/asorted/Text/Text.stories.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport Text, { TextProps } from \"./index\";\nimport Flex from \"../../layout/Flex\";\nimport { TextVariants } from \"../../../styles/theme\";\n\nconst headerVariants: TextVariants[] = [\"h1\", \"h2\", \"h3\", \"h4\", \"h5\"];\n\nconst mainVariants: TextVariants[] = [\n  \"large\",\n  \"largeLineHeight\",\n  \"body\",\n  \"bodyLineHeight\",\n  \"paragraph\",\n  \"paragraphLineHeight\",\n  \"small\",\n  \"extraSmall\",\n  \"tiny\",\n  \"micro\",\n];\n\nconst subtitleVariants: TextVariants[] = [\"subtitle\"];\n\nconst variants: TextVariants[] = [...headerVariants, ...mainVariants, ...subtitleVariants];\n\nconst makeIsInCategory = (variantsArray: TextVariants[]) => (variant: TextVariants) =>\n  variantsArray.includes(variant);\nconst isHeader = makeIsInCategory(headerVariants);\nconst isSubtitle = makeIsInCategory(subtitleVariants);\n\nconst mainFontWeights = [\"medium\", \"semiBold\", \"bold\"];\n\nconst fontWeights = [undefined, \"extraLight\", \"light\", \"regular\", ...mainFontWeights, \"extraBold\"];\n\nexport default {\n  title: \"Asorted/Typography/Text\",\n  component: Text,\n  parameters: { actions: { argTypesRegex: false } },\n  argTypes: {\n    variant: {\n      options: [undefined, ...variants],\n      control: {\n        type: \"radio\",\n      },\n    },\n    fontWeight: {\n      options: [undefined, ...fontWeights],\n      control: {\n        type: \"radio\",\n      },\n    },\n    content: {\n      type: \"text\",\n    },\n  },\n};\n\nexport const Overview = (() => {\n  return (\n    <Flex flexDirection=\"column\">\n      {variants.map((variant) => {\n        const fontWeightsToShow: string[] = isHeader(variant)\n          ? [\"medium\"]\n          : isSubtitle(variant)\n          ? [\"semiBold\"]\n          : mainFontWeights;\n        const decorationsToShow: string[] =\n          isHeader(variant) || isSubtitle(variant) ? [\"none\"] : [\"none\", \"underline\"];\n        return (\n          <Flex flexDirection=\"row\" columnGap={8} mb={8}>\n            <div style={{ minWidth: 250 }}>\n              <Text variant=\"small\" color=\"neutral.c90\">\n                variant=\"{variant}\"\n              </Text>\n              <br />\n              <Text variant=\"tiny\" color=\"neutral.c70\">\n                fontWeights: {JSON.stringify(fontWeightsToShow)}\n              </Text>\n            </div>\n            {fontWeightsToShow.flatMap((fontWeight) =>\n              decorationsToShow.map((textDecorationLine) => (\n                <div style={{ flex: 1 }}>\n                  <Text variant={variant} fontWeight={fontWeight} style={{ textDecorationLine }}>\n                    Lend stablecoins to the Compound protocol...\n                  </Text>\n                </div>\n              )),\n            )}\n          </Flex>\n        );\n      })}\n    </Flex>\n  );\n}).bind({});\n\nconst Template = (args: TextProps & { content: string }) => <Text {...args}>{args.content}</Text>;\n\nexport const Default = Template.bind({});\n// @ts-expect-error FIXME\nDefault.args = {\n  type: \"h1\",\n  content: \"Lend stablecoins to the Compound protocol...\",\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,mBAAgC;AAChC,kBAAiB;AAGjB,MAAM,iBAAiC,CAAC,MAAM,MAAM,MAAM,MAAM,IAAI;AAEpE,MAAM,eAA+B;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,mBAAmC,CAAC,UAAU;AAEpD,MAAM,WAA2B,CAAC,GAAG,gBAAgB,GAAG,cAAc,GAAG,gBAAgB;AAEzF,MAAM,mBAAmB,CAAC,kBAAkC,CAAC,YAC3D,cAAc,SAAS,OAAO;AAChC,MAAM,WAAW,iBAAiB,cAAc;AAChD,MAAM,aAAa,iBAAiB,gBAAgB;AAEpD,MAAM,kBAAkB,CAAC,UAAU,YAAY,MAAM;AAErD,MAAM,cAAc,CAAC,QAAW,cAAc,SAAS,WAAW,GAAG,iBAAiB,WAAW;AAEjG,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,YAAY,EAAE,SAAS,EAAE,eAAe,MAAM,EAAE;AAAA,EAChD,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,QAAW,GAAG,QAAQ;AAAA,MAChC,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,SAAS,CAAC,QAAW,GAAG,WAAW;AAAA,MACnC,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEO,MAAM,YAAY,MAAM;AAC7B,SACE,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,YACjB,SAAS,IAAI,CAAC,YAAY;AACzB,UAAM,oBAA8B,SAAS,OAAO,IAChD,CAAC,QAAQ,IACT,WAAW,OAAO,IAClB,CAAC,UAAU,IACX;AACJ,UAAM,oBACJ,SAAS,OAAO,KAAK,WAAW,OAAO,IAAI,CAAC,MAAM,IAAI,CAAC,QAAQ,WAAW;AAC5E,WACE,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,OAAM,WAAW,GAAG,IAAI,KAC1C,6BAAAD,QAAA,cAAC,SAAI,OAAO,EAAE,UAAU,IAAI,KAC1B,6BAAAA,QAAA,cAAC,aAAAD,SAAA,EAAK,SAAQ,SAAQ,OAAM,iBAAc,aAC9B,SAAQ,GACpB,GACA,6BAAAC,QAAA,cAAC,UAAG,GACJ,6BAAAA,QAAA,cAAC,aAAAD,SAAA,EAAK,SAAQ,QAAO,OAAM,iBAAc,iBACzB,KAAK,UAAU,iBAAiB,CAChD,CACF,GACC,kBAAkB;AAAA,MAAQ,CAAC,eAC1B,kBAAkB,IAAI,CAAC,uBACrB,6BAAAC,QAAA,cAAC,SAAI,OAAO,EAAE,MAAM,EAAE,KACpB,6BAAAA,QAAA,cAAC,aAAAD,SAAA,EAAK,SAAkB,YAAwB,OAAO,EAAE,mBAAmB,KAAG,8CAE/E,CACF,CACD;AAAA,IACH,CACF;AAAA,EAEJ,CAAC,CACH;AAEJ,GAAG,KAAK,CAAC,CAAC;AAEV,MAAM,WAAW,CAAC,SAA0C,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAM,GAAG,QAAO,KAAK,OAAQ;AAEnF,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;AAEvC,QAAQ,OAAO;AAAA,EACb,MAAM;AAAA,EACN,SAAS;AACX;",
+  "sourcesContent": ["import React from \"react\";\nimport Text, { TextProps } from \"./index\";\nimport Flex from \"../../layout/Flex\";\nimport { TextVariants } from \"../../../styles/theme\";\n\nconst headerVariants: TextVariants[] = [\"h1\", \"h2\", \"h3\", \"h4\", \"h5\"];\n\nconst mainVariants: TextVariants[] = [\n  \"large\",\n  \"largeLineHeight\",\n  \"body\",\n  \"bodyLineHeight\",\n  \"paragraph\",\n  \"paragraphLineHeight\",\n  \"small\",\n  \"extraSmall\",\n  \"tiny\",\n  \"micro\",\n];\n\nconst subtitleVariants: TextVariants[] = [\"subtitle\"];\n\nconst variants: TextVariants[] = [...headerVariants, ...mainVariants, ...subtitleVariants];\n\nconst makeIsInCategory = (variantsArray: TextVariants[]) => (variant: TextVariants) =>\n  variantsArray.includes(variant);\nconst isHeader = makeIsInCategory(headerVariants);\nconst isSubtitle = makeIsInCategory(subtitleVariants);\n\nconst mainFontWeights = [\"medium\", \"semiBold\", \"bold\"];\n\nconst fontWeights = [undefined, \"extraLight\", \"light\", \"regular\", ...mainFontWeights, \"extraBold\"];\n\nexport default {\n  title: \"Asorted/Typography/Text\",\n  component: Text,\n  parameters: { actions: { argTypesRegex: false } },\n  argTypes: {\n    variant: {\n      options: [undefined, ...variants],\n      control: {\n        type: \"radio\",\n      },\n    },\n    fontWeight: {\n      options: [undefined, ...fontWeights],\n      control: {\n        type: \"radio\",\n      },\n    },\n    content: {\n      type: \"text\",\n    },\n  },\n};\n\nexport const Overview = (() => {\n  return (\n    <Flex flexDirection=\"column\">\n      {variants.map(variant => {\n        const fontWeightsToShow: string[] = isHeader(variant)\n          ? [\"medium\"]\n          : isSubtitle(variant)\n          ? [\"semiBold\"]\n          : mainFontWeights;\n        const decorationsToShow: string[] =\n          isHeader(variant) || isSubtitle(variant) ? [\"none\"] : [\"none\", \"underline\"];\n        return (\n          <Flex flexDirection=\"row\" columnGap={8} mb={8}>\n            <div style={{ minWidth: 250 }}>\n              <Text variant=\"small\" color=\"neutral.c90\">\n                variant=\"{variant}\"\n              </Text>\n              <br />\n              <Text variant=\"tiny\" color=\"neutral.c70\">\n                fontWeights: {JSON.stringify(fontWeightsToShow)}\n              </Text>\n            </div>\n            {fontWeightsToShow.flatMap(fontWeight =>\n              decorationsToShow.map(textDecorationLine => (\n                <div style={{ flex: 1 }}>\n                  <Text variant={variant} fontWeight={fontWeight} style={{ textDecorationLine }}>\n                    Lend stablecoins to the Compound protocol...\n                  </Text>\n                </div>\n              )),\n            )}\n          </Flex>\n        );\n      })}\n    </Flex>\n  );\n}).bind({});\n\nconst Template = (args: TextProps & { content: string }) => <Text {...args}>{args.content}</Text>;\n\nexport const Default = Template.bind({});\n// @ts-expect-error FIXME\nDefault.args = {\n  type: \"h1\",\n  content: \"Lend stablecoins to the Compound protocol...\",\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,mBAAgC;AAChC,kBAAiB;AAGjB,MAAM,iBAAiC,CAAC,MAAM,MAAM,MAAM,MAAM,IAAI;AAEpE,MAAM,eAA+B;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,mBAAmC,CAAC,UAAU;AAEpD,MAAM,WAA2B,CAAC,GAAG,gBAAgB,GAAG,cAAc,GAAG,gBAAgB;AAEzF,MAAM,mBAAmB,CAAC,kBAAkC,CAAC,YAC3D,cAAc,SAAS,OAAO;AAChC,MAAM,WAAW,iBAAiB,cAAc;AAChD,MAAM,aAAa,iBAAiB,gBAAgB;AAEpD,MAAM,kBAAkB,CAAC,UAAU,YAAY,MAAM;AAErD,MAAM,cAAc,CAAC,QAAW,cAAc,SAAS,WAAW,GAAG,iBAAiB,WAAW;AAEjG,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,YAAY,EAAE,SAAS,EAAE,eAAe,MAAM,EAAE;AAAA,EAChD,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,QAAW,GAAG,QAAQ;AAAA,MAChC,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,SAAS,CAAC,QAAW,GAAG,WAAW;AAAA,MACnC,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEO,MAAM,YAAY,MAAM;AAC7B,SACE,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,YACjB,SAAS,IAAI,aAAW;AACvB,UAAM,oBAA8B,SAAS,OAAO,IAChD,CAAC,QAAQ,IACT,WAAW,OAAO,IAClB,CAAC,UAAU,IACX;AACJ,UAAM,oBACJ,SAAS,OAAO,KAAK,WAAW,OAAO,IAAI,CAAC,MAAM,IAAI,CAAC,QAAQ,WAAW;AAC5E,WACE,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,OAAM,WAAW,GAAG,IAAI,KAC1C,6BAAAD,QAAA,cAAC,SAAI,OAAO,EAAE,UAAU,IAAI,KAC1B,6BAAAA,QAAA,cAAC,aAAAD,SAAA,EAAK,SAAQ,SAAQ,OAAM,iBAAc,aAC9B,SAAQ,GACpB,GACA,6BAAAC,QAAA,cAAC,UAAG,GACJ,6BAAAA,QAAA,cAAC,aAAAD,SAAA,EAAK,SAAQ,QAAO,OAAM,iBAAc,iBACzB,KAAK,UAAU,iBAAiB,CAChD,CACF,GACC,kBAAkB;AAAA,MAAQ,gBACzB,kBAAkB,IAAI,wBACpB,6BAAAC,QAAA,cAAC,SAAI,OAAO,EAAE,MAAM,EAAE,KACpB,6BAAAA,QAAA,cAAC,aAAAD,SAAA,EAAK,SAAkB,YAAwB,OAAO,EAAE,mBAAmB,KAAG,8CAE/E,CACF,CACD;AAAA,IACH,CACF;AAAA,EAEJ,CAAC,CACH;AAEJ,GAAG,KAAK,CAAC,CAAC;AAEV,MAAM,WAAW,CAAC,SAA0C,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAM,GAAG,QAAO,KAAK,OAAQ;AAEnF,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;AAEvC,QAAQ,OAAO;AAAA,EACb,MAAM;AAAA,EACN,SAAS;AACX;",
   "names": ["Text", "React", "Flex"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/asorted/Text/index.tsx"],
-  "sourcesContent": ["import baseStyled, { BaseStyledProps } from \"../../styled\";\nimport {\n  compose,\n  fontSize,\n  fontWeight,\n  textAlign,\n  lineHeight,\n  letterSpacing,\n  system,\n} from \"styled-system\";\nimport fontFamily from \"../../../styles/styled/fontFamily\";\nimport { TextVariants } from \"../../../styles/theme\";\nimport { textVariantStyle } from \"./styles\";\n\nconst uppercase = system({\n  uppercase: {\n    property: \"textTransform\",\n    transform: (value) => (value ? \"uppercase\" : \"none\"),\n  },\n});\n\ntype FontFamilies =\n  | \"Inter|ExtraLight\"\n  | \"Inter|Light\"\n  | \"Inter|Regular\"\n  | \"Inter|Medium\"\n  | \"Inter|SemiBold\"\n  | \"Inter|Bold\"\n  | \"Inter|ExtraBold\"\n  | \"Alpha|Medium\";\n\ntype WhiteSpace = \"normal\" | \"nowrap\" | \"pre\" | \"pre-line\" | \"pre-wrap\";\n\nexport interface TextProps extends BaseStyledProps {\n  fontFamily?: string;\n  ff?: FontFamilies;\n  fontSize?: number | string | TextVariants;\n  variant?: TextVariants;\n  textAlign?: string;\n  fontWeight?: string;\n  lineHeight?: string;\n  textTransform?: string;\n  textOverflow?: string;\n  uppercase?: boolean;\n  whiteSpace?: WhiteSpace;\n}\n\nconst Text = baseStyled.span.attrs<TextProps, TextProps>(\n  ({ variant = \"body\", fontSize, color }) => ({\n    fontSize: fontSize ? fontSize : variant,\n    color: color || \"neutral.c100\",\n  }),\n)`\n  font-weight: 500;\n  white-space: ${(props) => props.whiteSpace ?? \"normal\"};\n  ${(p: TextProps) => textVariantStyle[p.variant || \"body\"]}\n  ${compose(\n    uppercase,\n    lineHeight,\n    fontFamily,\n    fontSize,\n    textAlign,\n    fontWeight,\n    letterSpacing,\n    system({\n      textOverflow: true,\n    }),\n  )}\n  ${(p) => (p.textTransform ? `text-transform: ${p.textTransform};` : \"\")}\n`;\n\nexport default Text;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA4C;AAC5C,2BAQO;AACP,wBAAuB;AAEvB,oBAAiC;AAEjC,MAAM,gBAAY,6BAAO;AAAA,EACvB,WAAW;AAAA,IACT,UAAU;AAAA,IACV,WAAW,CAAC,UAAW,QAAQ,cAAc;AAAA,EAC/C;AACF,CAAC;AA4BD,MAAM,OAAO,cAAAA,QAAW,KAAK;AAAA,EAC3B,CAAC,EAAE,UAAU,QAAQ,UAAAC,WAAU,MAAM,OAAO;AAAA,IAC1C,UAAUA,YAAWA,YAAW;AAAA,IAChC,OAAO,SAAS;AAAA,EAClB;AACF;AAAA;AAAA,iBAEiB,CAAC,UAAU,MAAM,cAAc;AAAA,IAC5C,CAAC,MAAiB,+BAAiB,EAAE,WAAW,MAAM;AAAA,QACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAAC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACA,6BAAO;AAAA,IACL,cAAc;AAAA,EAChB,CAAC;AACH;AAAA,IACE,CAAC,MAAO,EAAE,gBAAgB,mBAAmB,EAAE,mBAAmB;AAAA;AAGtE,IAAO,eAAQ;",
+  "sourcesContent": ["import baseStyled, { BaseStyledProps } from \"../../styled\";\nimport {\n  compose,\n  fontSize,\n  fontWeight,\n  textAlign,\n  lineHeight,\n  letterSpacing,\n  system,\n} from \"styled-system\";\nimport fontFamily from \"../../../styles/styled/fontFamily\";\nimport { TextVariants } from \"../../../styles/theme\";\nimport { textVariantStyle } from \"./styles\";\n\nconst uppercase = system({\n  uppercase: {\n    property: \"textTransform\",\n    transform: value => (value ? \"uppercase\" : \"none\"),\n  },\n});\n\ntype FontFamilies =\n  | \"Inter|ExtraLight\"\n  | \"Inter|Light\"\n  | \"Inter|Regular\"\n  | \"Inter|Medium\"\n  | \"Inter|SemiBold\"\n  | \"Inter|Bold\"\n  | \"Inter|ExtraBold\"\n  | \"Alpha|Medium\";\n\ntype WhiteSpace = \"normal\" | \"nowrap\" | \"pre\" | \"pre-line\" | \"pre-wrap\";\n\nexport interface TextProps extends BaseStyledProps {\n  fontFamily?: string;\n  ff?: FontFamilies;\n  fontSize?: number | string | TextVariants;\n  variant?: TextVariants;\n  textAlign?: string;\n  fontWeight?: string;\n  lineHeight?: string;\n  textTransform?: string;\n  textOverflow?: string;\n  uppercase?: boolean;\n  whiteSpace?: WhiteSpace;\n}\n\nconst Text = baseStyled.span.attrs<TextProps, TextProps>(\n  ({ variant = \"body\", fontSize, color }) => ({\n    fontSize: fontSize ? fontSize : variant,\n    color: color || \"neutral.c100\",\n  }),\n)`\n  font-weight: 500;\n  white-space: ${props => props.whiteSpace ?? \"normal\"};\n  ${(p: TextProps) => textVariantStyle[p.variant || \"body\"]}\n  ${compose(\n    uppercase,\n    lineHeight,\n    fontFamily,\n    fontSize,\n    textAlign,\n    fontWeight,\n    letterSpacing,\n    system({\n      textOverflow: true,\n    }),\n  )}\n  ${p => (p.textTransform ? `text-transform: ${p.textTransform};` : \"\")}\n`;\n\nexport default Text;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA4C;AAC5C,2BAQO;AACP,wBAAuB;AAEvB,oBAAiC;AAEjC,MAAM,gBAAY,6BAAO;AAAA,EACvB,WAAW;AAAA,IACT,UAAU;AAAA,IACV,WAAW,WAAU,QAAQ,cAAc;AAAA,EAC7C;AACF,CAAC;AA4BD,MAAM,OAAO,cAAAA,QAAW,KAAK;AAAA,EAC3B,CAAC,EAAE,UAAU,QAAQ,UAAAC,WAAU,MAAM,OAAO;AAAA,IAC1C,UAAUA,YAAWA,YAAW;AAAA,IAChC,OAAO,SAAS;AAAA,EAClB;AACF;AAAA;AAAA,iBAEiB,WAAS,MAAM,cAAc;AAAA,IAC1C,CAAC,MAAiB,+BAAiB,EAAE,WAAW,MAAM;AAAA,QACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAAC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACA,6BAAO;AAAA,IACL,cAAc;AAAA,EAChB,CAAC;AACH;AAAA,IACE,OAAM,EAAE,gBAAgB,mBAAmB,EAAE,mBAAmB;AAAA;AAGpE,IAAO,eAAQ;",
   "names": ["baseStyled", "fontSize", "fontFamily"]
 }

package/lib/cjs/components/cards/Carousel/Slide.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/cards/Carousel/Slide.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport Flex from \"../../layout/Flex\";\n\nconst Wrapper = styled(Flex)<{ image?: string }>`\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  padding: ${(p) => p.theme.space[8]}px ${(p) => p.theme.space[10]}px;\n  padding-right: 280px; /* Nb gives air to not overlap the illustration */\n  z-index: ${(p) => p.theme.zIndexes[8]};\n  background: url(${(p) => p.image}) no-repeat ${(p) => p.theme.colors.neutral.c100};\n  background-size: contain;\n  background-position: right 60px bottom;\n`;\n\nexport type Props = {\n  onClick: () => void;\n  title: string;\n  description: string;\n  image?: string;\n};\n\nconst Slide = ({ title, description, image, onClick }: Props): React.ReactElement => {\n  return (\n    <Wrapper key={\"key\"} image={image} onClick={onClick}>\n      <Text variant={\"tiny\"} color=\"neutral.c00\" fontWeight=\"regular\">\n        {title}\n      </Text>\n      <Text variant={\"h5\"} color=\"neutral.c00\" textTransform=\"uppercase\">\n        {description}\n      </Text>\n    </Wrapper>\n  );\n};\n\nexport default Slide;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AACjB,kBAAiB;AAEjB,MAAM,cAAU,yBAAAA,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA;AAAA,aAId,CAAC,MAAM,EAAE,MAAM,MAAM,CAAC,OAAO,CAAC,MAAM,EAAE,MAAM,MAAM,EAAE;AAAA;AAAA,aAEpD,CAAC,MAAM,EAAE,MAAM,SAAS,CAAC;AAAA,oBAClB,CAAC,MAAM,EAAE,oBAAoB,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAY/E,MAAM,QAAQ,CAAC,EAAE,OAAO,aAAa,OAAO,QAAQ,MAAiC;AACnF,SACE,6BAAAC,QAAA,cAAC,WAAQ,KAAK,OAAO,OAAc,WACjC,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAS,QAAQ,OAAM,eAAc,YAAW,aACnD,KACH,GACA,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAS,MAAM,OAAM,eAAc,eAAc,eACpD,WACH,CACF;AAEJ;AAEA,IAAO,gBAAQ;",
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport Flex from \"../../layout/Flex\";\n\nconst Wrapper = styled(Flex)<{ image?: string }>`\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  padding: ${p => p.theme.space[8]}px ${p => p.theme.space[10]}px;\n  padding-right: 280px; /* Nb gives air to not overlap the illustration */\n  z-index: ${p => p.theme.zIndexes[8]};\n  background: url(${p => p.image}) no-repeat ${p => p.theme.colors.neutral.c100};\n  background-size: contain;\n  background-position: right 60px bottom;\n`;\n\nexport type Props = {\n  onClick: () => void;\n  title: string;\n  description: string;\n  image?: string;\n};\n\nconst Slide = ({ title, description, image, onClick }: Props): React.ReactElement => {\n  return (\n    <Wrapper key={\"key\"} image={image} onClick={onClick}>\n      <Text variant={\"tiny\"} color=\"neutral.c00\" fontWeight=\"regular\">\n        {title}\n      </Text>\n      <Text variant={\"h5\"} color=\"neutral.c00\" textTransform=\"uppercase\">\n        {description}\n      </Text>\n    </Wrapper>\n  );\n};\n\nexport default Slide;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AACjB,kBAAiB;AAEjB,MAAM,cAAU,yBAAAA,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA;AAAA,aAId,OAAK,EAAE,MAAM,MAAM,CAAC,OAAO,OAAK,EAAE,MAAM,MAAM,EAAE;AAAA;AAAA,aAEhD,OAAK,EAAE,MAAM,SAAS,CAAC;AAAA,oBAChB,OAAK,EAAE,oBAAoB,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAY3E,MAAM,QAAQ,CAAC,EAAE,OAAO,aAAa,OAAO,QAAQ,MAAiC;AACnF,SACE,6BAAAC,QAAA,cAAC,WAAQ,KAAK,OAAO,OAAc,WACjC,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAS,QAAQ,OAAM,eAAc,YAAW,aACnD,KACH,GACA,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAS,MAAM,OAAM,eAAc,eAAc,eACpD,WACH,CACF;AAEJ;AAEA,IAAO,gBAAQ;",
   "names": ["styled", "Flex", "React", "Text"]
 }