npm - @ledgerhq/react-ui - Versions diffs - 0.14.4 → 0.14.5-hotfix.0 - Mend

@ledgerhq/react-ui 0.14.4 → 0.14.5-hotfix.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 (107) hide show

package/lib/cjs/components/cta/Button/Button.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/cta/Button/Button.stories.tsx"],
-  "sourcesContent": ["import React, { Fragment } from \"react\";\nimport Button, { ButtonExpandProps, ButtonProps, ButtonVariants, IconPosition } from \"./index\";\nimport Text from \"../../asorted/Text\";\nimport { PlusMedium, WalletAddMedium } from \"@ledgerhq/icons-ui/react/\";\nimport { InvertTheme } from \"../../../styles/InvertTheme\";\nimport Flex from \"../../layout/Flex\";\nimport Grid from \"../../layout/Grid\";\nimport { StoryTemplate } from \"../../helpers\";\n\nconst iconPositions: IconPosition[] = [\"left\", \"right\"];\nconst buttonVariants: ButtonVariants[] = [\"main\", \"shade\", \"color\", \"error\"];\n\nexport default {\n  title: \"cta/Button\",\n  component: Button,\n  argTypes: {\n    variant: {\n      options: [undefined, ...buttonVariants],\n      control: {\n        type: \"radio\",\n      },\n    },\n    size: {\n      options: [undefined, \"small\", \"medium\", \"large\"],\n      control: { type: \"radio\" },\n    },\n    fontSize: {\n      options: [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8],\n      control: {\n        type: \"radio\",\n      },\n    },\n    children: {\n      type: \"text\",\n    },\n    iconPosition: {\n      options: iconPositions,\n      control: {\n        type: \"radio\",\n      },\n    },\n    disabled: {\n      type: \"boolean\",\n    },\n    outline: {\n      type: \"boolean\",\n    },\n  },\n};\n\nexport const Overview = ((args: ButtonProps) => {\n  const templateProps = { Icon: PlusMedium, children: \"Try me\", onClick: () => {} };\n  const propsArr = [\n    { ...templateProps, Icon: undefined },\n    { ...templateProps, iconPosition: iconPositions[0] },\n    { ...templateProps, iconPosition: iconPositions[1] },\n    { ...templateProps, children: \"\" },\n  ];\n  return (\n    <Grid columns=\"none\" gridTemplateColumns=\"max-content repeat(4, 1fr)\" columnGap={8} rowGap={8}>\n      {buttonVariants.flatMap((buttonType, i) =>\n        [false, true].map((outline, j) => (\n          <Fragment key={`${i}:${j}`}>\n            <Text variant=\"small\" color=\"neutral.c70\">\n              variant=\"{buttonType}\"<br />\n              outline={`{${outline.toString()}}`}\n            </Text>\n            {propsArr.map(buttonProps => (\n              <Flex flex={1} columnGap={4}>\n                {[false, true].map(disabled => (\n                  <Button\n                    size={args.size}\n                    variant={buttonType}\n                    outline={outline}\n                    disabled={disabled}\n                    {...buttonProps}\n                  />\n                ))}\n              </Flex>\n            ))}\n          </Fragment>\n        )),\n      )}\n    </Grid>\n  );\n}).bind({});\n\nexport const Default: StoryTemplate<ButtonProps> = args => {\n  return <Button {...args}>{args.children || \"Regular button\"}</Button>;\n};\n\nexport const Inverted: StoryTemplate<ButtonProps> = args => {\n  return (\n    <Flex flexDirection=\"column\">\n      <Flex flex=\"0 0 1\" p={4} alignItems=\"center\" bg=\"background.main\">\n        <Button {...args}>{args.children || \"Regular button\"}</Button>\n      </Flex>\n      <InvertTheme>\n        <Flex flex=\"0 0 1\" p={4} alignItems=\"center\" bg=\"background.main\">\n          <Button {...args}>{args.children || \"Inverted button\"}</Button>\n        </Flex>\n      </InvertTheme>\n    </Flex>\n  );\n};\n\nexport const IconButton: StoryTemplate<ButtonProps> = args => {\n  return <Button {...args}>{args.children || \"Regular button\"}</Button>;\n};\nIconButton.args = {\n  children: \"\",\n  Icon: WalletAddMedium,\n  iconPosition: \"right\",\n};\n\nexport const Expand: StoryTemplate<ButtonProps> = (args: ButtonExpandProps) => {\n  const [show, setShow] = React.useState(false);\n  return (\n    <>\n      <Button.Expand {...args} onToggle={setShow}>\n        {args.children}\n      </Button.Expand>\n      {show && (\n        <div\n          style={{\n            padding: \"1rem\",\n          }}\n        >\n          Hello world!\n        </div>\n      )}\n    </>\n  );\n};\nExpand.args = {\n  children: \"Show all\",\n};\n"],
-  "mappings": "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",
-  "names": ["import_react", "Button", "React", "Grid", "Text", "Flex"]
+  "sourcesContent": ["import React, { Fragment } from \"react\";\nimport Button, { ButtonExpandProps, ButtonProps, ButtonVariants, IconPosition } from \"./index\";\nimport Text from \"../../asorted/Text\";\nimport { PlusMedium, WalletAddMedium } from \"@ledgerhq/icons-ui/reactLegacy/\";\nimport { InvertTheme } from \"../../../styles/InvertTheme\";\nimport Flex from \"../../layout/Flex\";\nimport Grid from \"../../layout/Grid\";\nimport { StoryTemplate } from \"../../helpers\";\n\nconst iconPositions: IconPosition[] = [\"left\", \"right\"];\nconst buttonVariants: ButtonVariants[] = [\"main\", \"shade\", \"color\", \"error\"];\n\nexport default {\n  title: \"cta/Button\",\n  component: Button,\n  argTypes: {\n    variant: {\n      options: [undefined, ...buttonVariants],\n      control: {\n        type: \"radio\",\n      },\n    },\n    size: {\n      options: [undefined, \"small\", \"medium\", \"large\"],\n      control: { type: \"radio\" },\n    },\n    fontSize: {\n      options: [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8],\n      control: {\n        type: \"radio\",\n      },\n    },\n    children: {\n      type: \"text\",\n    },\n    iconPosition: {\n      options: iconPositions,\n      control: {\n        type: \"radio\",\n      },\n    },\n    disabled: {\n      type: \"boolean\",\n    },\n    outline: {\n      type: \"boolean\",\n    },\n  },\n};\n\nexport const Overview = ((args: ButtonProps) => {\n  const templateProps = { Icon: PlusMedium, children: \"Try me\", onClick: () => {} };\n  const propsArr = [\n    { ...templateProps, Icon: undefined },\n    { ...templateProps, iconPosition: iconPositions[0] },\n    { ...templateProps, iconPosition: iconPositions[1] },\n    { ...templateProps, children: \"\" },\n  ];\n  return (\n    <Grid columns=\"none\" gridTemplateColumns=\"max-content repeat(4, 1fr)\" columnGap={8} rowGap={8}>\n      {buttonVariants.flatMap((buttonType, i) =>\n        [false, true].map((outline, j) => (\n          <Fragment key={`${i}:${j}`}>\n            <Text variant=\"small\" color=\"neutral.c70\">\n              variant=\"{buttonType}\"<br />\n              outline={`{${outline.toString()}}`}\n            </Text>\n            {propsArr.map(buttonProps => (\n              <Flex flex={1} columnGap={4}>\n                {[false, true].map(disabled => (\n                  <Button\n                    size={args.size}\n                    variant={buttonType}\n                    outline={outline}\n                    disabled={disabled}\n                    {...buttonProps}\n                  />\n                ))}\n              </Flex>\n            ))}\n          </Fragment>\n        )),\n      )}\n    </Grid>\n  );\n}).bind({});\n\nexport const Default: StoryTemplate<ButtonProps> = args => {\n  return <Button {...args}>{args.children || \"Regular button\"}</Button>;\n};\n\nexport const Inverted: StoryTemplate<ButtonProps> = args => {\n  return (\n    <Flex flexDirection=\"column\">\n      <Flex flex=\"0 0 1\" p={4} alignItems=\"center\" bg=\"background.main\">\n        <Button {...args}>{args.children || \"Regular button\"}</Button>\n      </Flex>\n      <InvertTheme>\n        <Flex flex=\"0 0 1\" p={4} alignItems=\"center\" bg=\"background.main\">\n          <Button {...args}>{args.children || \"Inverted button\"}</Button>\n        </Flex>\n      </InvertTheme>\n    </Flex>\n  );\n};\n\nexport const IconButton: StoryTemplate<ButtonProps> = args => {\n  return <Button {...args}>{args.children || \"Regular button\"}</Button>;\n};\nIconButton.args = {\n  children: \"\",\n  Icon: WalletAddMedium,\n  iconPosition: \"right\",\n};\n\nexport const Expand: StoryTemplate<ButtonProps> = (args: ButtonExpandProps) => {\n  const [show, setShow] = React.useState(false);\n  return (\n    <>\n      <Button.Expand {...args} onToggle={setShow}>\n        {args.children}\n      </Button.Expand>\n      {show && (\n        <div\n          style={{\n            padding: \"1rem\",\n          }}\n        >\n          Hello world!\n        </div>\n      )}\n    </>\n  );\n};\nExpand.args = {\n  children: \"Show all\",\n};\n"],
+  "mappings": "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",
+  "names": ["Button", "React", "Grid", "Text", "Flex"]
 }

package/lib/cjs/components/cta/Button/index.js CHANGED Viewed

@@ -42,7 +42,7 @@ var import_styled_system = require("styled-system");
 var import_fontFamily = __toESM(require("../../../styles/styled/fontFamily"));
 var import_theme = require("../../../styles/theme");
 var import_helpers = require("../../../styles/helpers");
-var import_ChevronBottomMedium = __toESM(require("@ledgerhq/icons-ui/react/ChevronBottomMedium"));
+var import_ChevronBottomMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/ChevronBottomMedium"));
 const IconContainer = import_styled_components.default.div`
   display: inline-block;
   ${(p) => `${p.iconPosition === "left" ? "margin-right" : "margin-left"}: ${p.theme.space[4]}px;`}

package/lib/cjs/components/cta/Button/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/cta/Button/index.tsx"],
-  "sourcesContent": ["import React, { useState, useMemo } from \"react\";\nimport styled, { css, StyledProps } from \"styled-components\";\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\nimport { fontSize, border, BordersProps, compose } from \"styled-system\";\nimport fontFamily from \"../../../styles/styled/fontFamily\";\nimport { fontSizes } from \"../../../styles/theme\";\nimport { rgba } from \"../../../styles/helpers\";\nimport ChevronBottom from \"@ledgerhq/icons-ui/react/ChevronBottomMedium\";\n\nexport type ButtonVariants = \"main\" | \"shade\" | \"error\" | \"color\" | \"neutral\";\nexport type IconPosition = \"right\" | \"left\";\ninterface BaseProps extends BaseStyledProps, BordersProps {\n  ff?: string;\n  color?: string;\n  backgroundColor?: string;\n  size?: \"small\" | \"medium\" | \"large\";\n  fontSize?: number;\n  variant?: ButtonVariants;\n  outline?: boolean;\n  iconPosition?: IconPosition;\n  iconButton?: boolean;\n  disabled?: boolean;\n  whiteSpace?: string;\n}\n\nexport interface ButtonProps extends BaseProps, React.RefAttributes<HTMLButtonElement> {\n  Icon?: React.ComponentType<{ size: number; color?: string }>;\n  children?: React.ReactNode;\n  onClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;\n  iconSize?: number;\n  style?: React.CSSProperties;\n}\nconst IconContainer = styled.div<{\n  iconPosition: IconPosition;\n}>`\n  display: inline-block;\n  ${p => `${p.iconPosition === \"left\" ? \"margin-right\" : \"margin-left\"}: ${p.theme.space[4]}px;`}\n  padding-top: 0.2em;\n`;\n\nconst getVariantColors = (p: StyledProps<BaseProps>) => ({\n  main: {\n    outline: `\n        border-color: ${p.theme.colors.neutral.c100};\n        color: ${p.theme.colors.neutral.c100};\n        background-color: transparent;\n        &:hover, &:focus {\n          background-color: ${rgba(p.theme.colors.neutral.c100, 0.03)};\n        }\n        &:active {\n          background-color: ${rgba(p.theme.colors.neutral.c100, 0.05)};\n        }\n      `,\n    filled: `\n        color: ${p.theme.colors.neutral.c00};\n        background-color: ${p.theme.colors.neutral.c100};\n        &:hover, &:focus {\n          background-color: ${p.theme.colors.neutral.c90};\n        }\n      `,\n  },\n  shade: `\n      border-color: ${p.theme.colors.neutral.c40};\n      color: ${p.theme.colors.neutral.c100};\n      &:focus {\n        border-color: ${p.theme.colors.primary.c80};\n      }\n\n      &:hover, &:focus {\n        background-color: ${p.theme.colors.neutral.c20};\n      }\n\n      &:active {\n        background-color: ${p.theme.colors.neutral.c30};\n      }\n    `,\n  error: {\n    outline: `\n      border-color: ${p.theme.colors.error.c50};\n      color: ${p.theme.colors.error.c50};\n      background-color: transparent;\n      &:hover {\n        background-color: ${rgba(p.theme.colors.error.c50, 0.02)};\n      }\n      &:active {\n        background-color: ${rgba(p.theme.colors.error.c50, 0.05)};\n      }\n    `,\n    filled: `\n      color: ${p.theme.colors.neutral.c00};\n      background-color: ${p.theme.colors.error.c50};\n      &:hover {\n        background-color: ${p.theme.colors.error.c40};\n      }\n    `,\n  },\n  neutral: `\n    color: ${p.theme.colors.neutral.c100};\n    background-color: ${p.theme.colors.neutral.c30};\n    &:hover {\n      background-color: ${p.theme.colors.neutral.c40};\n    }\n  `,\n  color: {\n    outline: `\n      border-color: ${p.theme.colors.primary.c80};\n      color: ${p.theme.colors.primary.c80};\n      background-color: transparent;\n      &:hover {\n        background-color: ${rgba(p.theme.colors.primary.c100, 0.02)};\n      }\n      &:active {\n        background-color: ${rgba(p.theme.colors.primary.c100, 0.05)};\n      }\n    `,\n    filled: `\n      color: ${p.theme.colors.neutral.c00};\n      background-color: ${p.theme.colors.primary.c80};\n      &:hover {\n        background-color: ${p.theme.colors.primary.c70};\n      }\n    `,\n  },\n  disabled: {\n    outline: `\n        border-color: ${p.theme.colors.neutral.c50};\n        color: ${p.theme.colors.neutral.c50};\n        background-color: transparent;\n        &:focus, &:hover {\n          box-shadow: none;\n        }\n      `,\n    filled: `\n        color: ${p.theme.colors.neutral.c50};\n        background-color: ${p.theme.colors.neutral.c30};\n        &:focus, &:hover {\n          box-shadow: none;\n        }\n      `,\n  },\n  default: `\n    color: ${p.theme.colors.neutral.c100};\n    background-color: transparent;\n    &:hover {\n      text-decoration: underline;\n    }\n  `,\n});\n\nexport const ButtonUnstyled = baseStyled.button`\n  all: unset;\n  cursor: pointer;\n\n  &:disabled {\n    cursor: default;\n  }\n`;\n\nexport const Base = baseStyled.button.attrs((p: BaseProps) => ({\n  fontFamily: \"Inter\",\n  fontSize: p.fontSize ?? 4,\n}))<BaseProps>`\n  background-color: transparent;\n  border-color: transparent;\n  border-radius: ${p => p.theme.space[13]}px;\n  border-style: solid;\n  border-width: ${p => (p.outline || p.variant === \"shade\" ? 1 : 0)}px;\n  font-weight: 600;\n  ${compose(fontFamily, fontSize, border)};\n  line-height: ${p => p.theme.fontSizes[p.fontSize]}px;\n  text-align: center;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  ${p => buttonSizeStyle[p.size || \"medium\"]}\n  text-overflow: ellipsis;\n  white-space: ${p => (p.whiteSpace ? p.whiteSpace : \"nowrap\")};\n  max-width: 100%;\n  position: relative;\n  cursor: ${p => (p.disabled ? \"default\" : \"pointer\")};\n  &:active {\n    box-shadow: 0 0 0 4px ${p => rgba(p.theme.colors.primary.c60, 0.4)};\n  }\n  &:focus, &:hover {\n    box-shadow: 0 0 0 2px ${p => rgba(p.theme.colors.primary.c60, 0.4)};\n  }\n\n  ${p => {\n    const variants = getVariantColors(p);\n    if (p.disabled) {\n      return p.outline || p.variant === \"shade\"\n        ? variants.disabled.outline\n        : variants.disabled.filled;\n    }\n\n    const variant: ButtonVariants | \"default\" =\n      p.variant ?? (\"default\" as ButtonVariants | \"default\");\n    switch (variant) {\n      case \"main\":\n        return p.outline ? variants.main.outline : variants.main.filled;\n      case \"shade\":\n        return variants.shade;\n\n      case \"error\":\n        return p.outline ? variants.error.outline : variants.error.filled;\n\n      case \"color\":\n        return p.outline ? variants.color.outline : variants.color.filled;\n\n      case \"neutral\":\n        return variants.neutral;\n\n      case \"default\":\n      default:\n        return variants.default;\n    }\n  }}\n  ${p =>\n    p.iconButton\n      ? css`\n          width: ${p.theme.space[12]}px;\n          padding: 0;\n          ${IconContainer} {\n            margin: 0;\n          }\n        `\n      : \"\"}\n  ${p => p.theme.transition([\"background-color\", \"color\", \"border-color\", \"box-shadow\"], \"0.2s\")}\n`;\n\nconst ContentContainer = styled.div``;\n\nconst Button = (\n  { Icon, iconPosition = \"right\", iconSize = 16, children, onClick, ...props }: ButtonProps,\n  ref?: React.ForwardedRef<HTMLButtonElement>,\n): React.ReactElement => {\n  const iconNodeSize = iconSize || fontSizes[props.fontSize ?? 4];\n  const IconNode = useMemo(() => Icon && <Icon size={iconNodeSize} />, [iconNodeSize, Icon]);\n\n  return (\n    <Base {...props} ref={ref} iconButton={!(Icon == null) && !children} onClick={onClick}>\n      {iconPosition === \"right\" ? <ContentContainer>{children}</ContentContainer> : null}\n      {IconNode && <IconContainer iconPosition={iconPosition}>{IconNode}</IconContainer>}\n      {iconPosition === \"left\" ? <ContentContainer>{children}</ContentContainer> : null}\n    </Base>\n  );\n};\nconst ButtonWithRef = React.forwardRef(Button) as unknown as typeof Button;\n\nexport type ButtonExpandProps = React.PropsWithChildren<\n  ButtonProps & {\n    onToggle?: (arg0: boolean) => void;\n  }\n>;\n\nconst StyledButtonExpand = styled(ButtonWithRef).attrs(props => ({\n  Icon: props.Icon != null || ChevronBottom,\n  iconPosition: props.iconPosition || \"right\",\n}))<{ expanded: boolean }>`\n  ${IconContainer} {\n    transition: transform 0.25s;\n    ${p => (p.expanded ? \"transform: rotate(180deg)\" : \"\")}\n  }\n`;\nexport function ButtonExpand(\n  { onToggle, onClick, ...props }: ButtonExpandProps,\n  ref?: React.ForwardedRef<HTMLButtonElement>,\n): React.ReactElement {\n  const [expanded, setExpanded] = useState(false);\n  return (\n    <StyledButtonExpand\n      {...props}\n      ref={ref}\n      expanded={expanded}\n      onClick={(event: React.SyntheticEvent<HTMLButtonElement>) => {\n        setExpanded(expanded => !expanded);\n        onToggle != null && onToggle(!expanded);\n        onClick != null && onClick(event);\n      }}\n    />\n  );\n}\n\nexport const buttonSizeStyle: {\n  [index: string]: {\n    padding: string;\n    height: string;\n  };\n} = {\n  small: {\n    padding: \"0 20px\",\n    height: \"32px\",\n  },\n  medium: {\n    padding: \"0 24px\",\n    height: \"40px\",\n  },\n  large: {\n    padding: \"0 28px\",\n    height: \"48px\",\n  },\n};\n\nButton.Unstyled = ButtonUnstyled;\nButton.Expand = React.forwardRef(ButtonExpand);\nButtonWithRef.Unstyled = Button.Unstyled;\nButtonWithRef.Expand = Button.Expand;\nexport default ButtonWithRef;\n"],
+  "sourcesContent": ["import React, { useState, useMemo } from \"react\";\nimport styled, { css, StyledProps } from \"styled-components\";\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\nimport { fontSize, border, BordersProps, compose } from \"styled-system\";\nimport fontFamily from \"../../../styles/styled/fontFamily\";\nimport { fontSizes } from \"../../../styles/theme\";\nimport { rgba } from \"../../../styles/helpers\";\nimport ChevronBottom from \"@ledgerhq/icons-ui/reactLegacy/ChevronBottomMedium\";\n\nexport type ButtonVariants = \"main\" | \"shade\" | \"error\" | \"color\" | \"neutral\";\nexport type IconPosition = \"right\" | \"left\";\ninterface BaseProps extends BaseStyledProps, BordersProps {\n  ff?: string;\n  color?: string;\n  backgroundColor?: string;\n  size?: \"small\" | \"medium\" | \"large\";\n  fontSize?: number;\n  variant?: ButtonVariants;\n  outline?: boolean;\n  iconPosition?: IconPosition;\n  iconButton?: boolean;\n  disabled?: boolean;\n  whiteSpace?: string;\n}\n\nexport interface ButtonProps extends BaseProps, React.RefAttributes<HTMLButtonElement> {\n  Icon?: React.ComponentType<{ size: number; color?: string }>;\n  children?: React.ReactNode;\n  onClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;\n  iconSize?: number;\n  style?: React.CSSProperties;\n}\nconst IconContainer = styled.div<{\n  iconPosition: IconPosition;\n}>`\n  display: inline-block;\n  ${p => `${p.iconPosition === \"left\" ? \"margin-right\" : \"margin-left\"}: ${p.theme.space[4]}px;`}\n  padding-top: 0.2em;\n`;\n\nconst getVariantColors = (p: StyledProps<BaseProps>) => ({\n  main: {\n    outline: `\n        border-color: ${p.theme.colors.neutral.c100};\n        color: ${p.theme.colors.neutral.c100};\n        background-color: transparent;\n        &:hover, &:focus {\n          background-color: ${rgba(p.theme.colors.neutral.c100, 0.03)};\n        }\n        &:active {\n          background-color: ${rgba(p.theme.colors.neutral.c100, 0.05)};\n        }\n      `,\n    filled: `\n        color: ${p.theme.colors.neutral.c00};\n        background-color: ${p.theme.colors.neutral.c100};\n        &:hover, &:focus {\n          background-color: ${p.theme.colors.neutral.c90};\n        }\n      `,\n  },\n  shade: `\n      border-color: ${p.theme.colors.neutral.c40};\n      color: ${p.theme.colors.neutral.c100};\n      &:focus {\n        border-color: ${p.theme.colors.primary.c80};\n      }\n\n      &:hover, &:focus {\n        background-color: ${p.theme.colors.neutral.c20};\n      }\n\n      &:active {\n        background-color: ${p.theme.colors.neutral.c30};\n      }\n    `,\n  error: {\n    outline: `\n      border-color: ${p.theme.colors.error.c50};\n      color: ${p.theme.colors.error.c50};\n      background-color: transparent;\n      &:hover {\n        background-color: ${rgba(p.theme.colors.error.c50, 0.02)};\n      }\n      &:active {\n        background-color: ${rgba(p.theme.colors.error.c50, 0.05)};\n      }\n    `,\n    filled: `\n      color: ${p.theme.colors.neutral.c00};\n      background-color: ${p.theme.colors.error.c50};\n      &:hover {\n        background-color: ${p.theme.colors.error.c40};\n      }\n    `,\n  },\n  neutral: `\n    color: ${p.theme.colors.neutral.c100};\n    background-color: ${p.theme.colors.neutral.c30};\n    &:hover {\n      background-color: ${p.theme.colors.neutral.c40};\n    }\n  `,\n  color: {\n    outline: `\n      border-color: ${p.theme.colors.primary.c80};\n      color: ${p.theme.colors.primary.c80};\n      background-color: transparent;\n      &:hover {\n        background-color: ${rgba(p.theme.colors.primary.c100, 0.02)};\n      }\n      &:active {\n        background-color: ${rgba(p.theme.colors.primary.c100, 0.05)};\n      }\n    `,\n    filled: `\n      color: ${p.theme.colors.neutral.c00};\n      background-color: ${p.theme.colors.primary.c80};\n      &:hover {\n        background-color: ${p.theme.colors.primary.c70};\n      }\n    `,\n  },\n  disabled: {\n    outline: `\n        border-color: ${p.theme.colors.neutral.c50};\n        color: ${p.theme.colors.neutral.c50};\n        background-color: transparent;\n        &:focus, &:hover {\n          box-shadow: none;\n        }\n      `,\n    filled: `\n        color: ${p.theme.colors.neutral.c50};\n        background-color: ${p.theme.colors.neutral.c30};\n        &:focus, &:hover {\n          box-shadow: none;\n        }\n      `,\n  },\n  default: `\n    color: ${p.theme.colors.neutral.c100};\n    background-color: transparent;\n    &:hover {\n      text-decoration: underline;\n    }\n  `,\n});\n\nexport const ButtonUnstyled = baseStyled.button`\n  all: unset;\n  cursor: pointer;\n\n  &:disabled {\n    cursor: default;\n  }\n`;\n\nexport const Base = baseStyled.button.attrs((p: BaseProps) => ({\n  fontFamily: \"Inter\",\n  fontSize: p.fontSize ?? 4,\n}))<BaseProps>`\n  background-color: transparent;\n  border-color: transparent;\n  border-radius: ${p => p.theme.space[13]}px;\n  border-style: solid;\n  border-width: ${p => (p.outline || p.variant === \"shade\" ? 1 : 0)}px;\n  font-weight: 600;\n  ${compose(fontFamily, fontSize, border)};\n  line-height: ${p => p.theme.fontSizes[p.fontSize]}px;\n  text-align: center;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  ${p => buttonSizeStyle[p.size || \"medium\"]}\n  text-overflow: ellipsis;\n  white-space: ${p => (p.whiteSpace ? p.whiteSpace : \"nowrap\")};\n  max-width: 100%;\n  position: relative;\n  cursor: ${p => (p.disabled ? \"default\" : \"pointer\")};\n  &:active {\n    box-shadow: 0 0 0 4px ${p => rgba(p.theme.colors.primary.c60, 0.4)};\n  }\n  &:focus, &:hover {\n    box-shadow: 0 0 0 2px ${p => rgba(p.theme.colors.primary.c60, 0.4)};\n  }\n\n  ${p => {\n    const variants = getVariantColors(p);\n    if (p.disabled) {\n      return p.outline || p.variant === \"shade\"\n        ? variants.disabled.outline\n        : variants.disabled.filled;\n    }\n\n    const variant: ButtonVariants | \"default\" =\n      p.variant ?? (\"default\" as ButtonVariants | \"default\");\n    switch (variant) {\n      case \"main\":\n        return p.outline ? variants.main.outline : variants.main.filled;\n      case \"shade\":\n        return variants.shade;\n\n      case \"error\":\n        return p.outline ? variants.error.outline : variants.error.filled;\n\n      case \"color\":\n        return p.outline ? variants.color.outline : variants.color.filled;\n\n      case \"neutral\":\n        return variants.neutral;\n\n      case \"default\":\n      default:\n        return variants.default;\n    }\n  }}\n  ${p =>\n    p.iconButton\n      ? css`\n          width: ${p.theme.space[12]}px;\n          padding: 0;\n          ${IconContainer} {\n            margin: 0;\n          }\n        `\n      : \"\"}\n  ${p => p.theme.transition([\"background-color\", \"color\", \"border-color\", \"box-shadow\"], \"0.2s\")}\n`;\n\nconst ContentContainer = styled.div``;\n\nconst Button = (\n  { Icon, iconPosition = \"right\", iconSize = 16, children, onClick, ...props }: ButtonProps,\n  ref?: React.ForwardedRef<HTMLButtonElement>,\n): React.ReactElement => {\n  const iconNodeSize = iconSize || fontSizes[props.fontSize ?? 4];\n  const IconNode = useMemo(() => Icon && <Icon size={iconNodeSize} />, [iconNodeSize, Icon]);\n\n  return (\n    <Base {...props} ref={ref} iconButton={!(Icon == null) && !children} onClick={onClick}>\n      {iconPosition === \"right\" ? <ContentContainer>{children}</ContentContainer> : null}\n      {IconNode && <IconContainer iconPosition={iconPosition}>{IconNode}</IconContainer>}\n      {iconPosition === \"left\" ? <ContentContainer>{children}</ContentContainer> : null}\n    </Base>\n  );\n};\nconst ButtonWithRef = React.forwardRef(Button) as unknown as typeof Button;\n\nexport type ButtonExpandProps = React.PropsWithChildren<\n  ButtonProps & {\n    onToggle?: (arg0: boolean) => void;\n  }\n>;\n\nconst StyledButtonExpand = styled(ButtonWithRef).attrs(props => ({\n  Icon: props.Icon != null || ChevronBottom,\n  iconPosition: props.iconPosition || \"right\",\n}))<{ expanded: boolean }>`\n  ${IconContainer} {\n    transition: transform 0.25s;\n    ${p => (p.expanded ? \"transform: rotate(180deg)\" : \"\")}\n  }\n`;\nexport function ButtonExpand(\n  { onToggle, onClick, ...props }: ButtonExpandProps,\n  ref?: React.ForwardedRef<HTMLButtonElement>,\n): React.ReactElement {\n  const [expanded, setExpanded] = useState(false);\n  return (\n    <StyledButtonExpand\n      {...props}\n      ref={ref}\n      expanded={expanded}\n      onClick={(event: React.SyntheticEvent<HTMLButtonElement>) => {\n        setExpanded(expanded => !expanded);\n        onToggle != null && onToggle(!expanded);\n        onClick != null && onClick(event);\n      }}\n    />\n  );\n}\n\nexport const buttonSizeStyle: {\n  [index: string]: {\n    padding: string;\n    height: string;\n  };\n} = {\n  small: {\n    padding: \"0 20px\",\n    height: \"32px\",\n  },\n  medium: {\n    padding: \"0 24px\",\n    height: \"40px\",\n  },\n  large: {\n    padding: \"0 28px\",\n    height: \"48px\",\n  },\n};\n\nButton.Unstyled = ButtonUnstyled;\nButton.Expand = React.forwardRef(ButtonExpand);\nButtonWithRef.Unstyled = Button.Unstyled;\nButtonWithRef.Expand = Button.Expand;\nexport default ButtonWithRef;\n"],
   "mappings": "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",
   "names": ["styled", "baseStyled", "fontFamily", "React", "ChevronBottom", "expanded"]
 }

package/lib/cjs/components/cta/Link/Link.stories.js CHANGED Viewed

@@ -35,7 +35,7 @@ __export(Link_stories_exports, {
 module.exports = __toCommonJS(Link_stories_exports);
 var import_react = __toESM(require("react"));
 var import_index = __toESM(require("./index"));
-var import_react2 = require("@ledgerhq/icons-ui/react");
+var import_reactLegacy = require("@ledgerhq/icons-ui/reactLegacy");
 var Link_stories_default = {
   title: "cta/Link",
   component: import_index.default,
@@ -82,7 +82,7 @@ const Default = ({ ...args }) => {
   return /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args, href: "https://www.ledger.com" });
 };
 const WithIcon = ({ ...args }) => {
-  return /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args, href: "https://www.ledger.com", Icon: import_react2.PlusMedium });
+  return /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args, href: "https://www.ledger.com", Icon: import_reactLegacy.PlusMedium });
 };
 Default.args = { children: "Hello world" };
 WithIcon.args = { children: "Hello world" };

package/lib/cjs/components/cta/Link/Link.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/cta/Link/Link.stories.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport Link, { LinkProps, DEFAULT_ICON_POSITION, DEFAULT_SIZE, DEFAULT_TYPE } from \"./index\";\nimport { PlusMedium } from \"@ledgerhq/icons-ui/react\";\n\nexport default {\n  title: \"cta/Link\",\n  component: Link,\n  parameters: { actions: { argTypesRegex: false } },\n  argTypes: {\n    Icon: {\n      control: false,\n    },\n    type: {\n      options: [\"main\", \"shade\", \"color\", undefined],\n      defaultValue: DEFAULT_TYPE,\n      control: {\n        type: \"radio\",\n      },\n    },\n    size: {\n      options: [\"small\", \"medium\", \"large\", undefined],\n      defaultValue: DEFAULT_SIZE,\n      control: {\n        type: \"radio\",\n      },\n    },\n    children: {\n      type: \"text\",\n    },\n    iconPosition: {\n      defaultValue: DEFAULT_ICON_POSITION,\n      options: [\"left\", \"right\", undefined],\n    },\n    textProps: {},\n    disabled: {\n      type: \"boolean\",\n    },\n    color: {\n      type: \"string\",\n      control: { control: \"color\" },\n    },\n    alwaysUnderline: {\n      type: \"boolean\",\n    },\n  },\n};\n\nexport const Default = ({ ...args }: LinkProps) => {\n  return <Link {...args} href={\"https://www.ledger.com\"} />;\n};\n\nexport const WithIcon = ({ ...args }: LinkProps) => {\n  return <Link {...args} href={\"https://www.ledger.com\"} Icon={PlusMedium} />;\n};\n\nDefault.args = { children: \"Hello world\" };\nWithIcon.args = { children: \"Hello world\" };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,mBAAmF;AACnF,IAAAA,gBAA2B;AAE3B,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAC;AAAA,EACX,YAAY,EAAE,SAAS,EAAE,eAAe,MAAM,EAAE;AAAA,EAChD,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS,CAAC,QAAQ,SAAS,SAAS,MAAS;AAAA,MAC7C,cAAc;AAAA,MACd,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,SAAS,CAAC,SAAS,UAAU,SAAS,MAAS;AAAA,MAC/C,cAAc;AAAA,MACd,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,IACR;AAAA,IACA,cAAc;AAAA,MACZ,cAAc;AAAA,MACd,SAAS,CAAC,QAAQ,SAAS,MAAS;AAAA,IACtC;AAAA,IACA,WAAW,CAAC;AAAA,IACZ,UAAU;AAAA,MACR,MAAM;AAAA,IACR;AAAA,IACA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS,EAAE,SAAS,QAAQ;AAAA,IAC9B;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEO,MAAM,UAAU,CAAC,EAAE,GAAG,KAAK,MAAiB;AACjD,SAAO,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAM,GAAG,MAAM,MAAM,0BAA0B;AACzD;AAEO,MAAM,WAAW,CAAC,EAAE,GAAG,KAAK,MAAiB;AAClD,SAAO,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAM,GAAG,MAAM,MAAM,0BAA0B,MAAM,0BAAY;AAC3E;AAEA,QAAQ,OAAO,EAAE,UAAU,cAAc;AACzC,SAAS,OAAO,EAAE,UAAU,cAAc;",
-  "names": ["import_react", "Link", "React"]
+  "sourcesContent": ["import React from \"react\";\nimport Link, { LinkProps, DEFAULT_ICON_POSITION, DEFAULT_SIZE, DEFAULT_TYPE } from \"./index\";\nimport { PlusMedium } from \"@ledgerhq/icons-ui/reactLegacy\";\n\nexport default {\n  title: \"cta/Link\",\n  component: Link,\n  parameters: { actions: { argTypesRegex: false } },\n  argTypes: {\n    Icon: {\n      control: false,\n    },\n    type: {\n      options: [\"main\", \"shade\", \"color\", undefined],\n      defaultValue: DEFAULT_TYPE,\n      control: {\n        type: \"radio\",\n      },\n    },\n    size: {\n      options: [\"small\", \"medium\", \"large\", undefined],\n      defaultValue: DEFAULT_SIZE,\n      control: {\n        type: \"radio\",\n      },\n    },\n    children: {\n      type: \"text\",\n    },\n    iconPosition: {\n      defaultValue: DEFAULT_ICON_POSITION,\n      options: [\"left\", \"right\", undefined],\n    },\n    textProps: {},\n    disabled: {\n      type: \"boolean\",\n    },\n    color: {\n      type: \"string\",\n      control: { control: \"color\" },\n    },\n    alwaysUnderline: {\n      type: \"boolean\",\n    },\n  },\n};\n\nexport const Default = ({ ...args }: LinkProps) => {\n  return <Link {...args} href={\"https://www.ledger.com\"} />;\n};\n\nexport const WithIcon = ({ ...args }: LinkProps) => {\n  return <Link {...args} href={\"https://www.ledger.com\"} Icon={PlusMedium} />;\n};\n\nDefault.args = { children: \"Hello world\" };\nWithIcon.args = { children: \"Hello world\" };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,mBAAmF;AACnF,yBAA2B;AAE3B,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,YAAY,EAAE,SAAS,EAAE,eAAe,MAAM,EAAE;AAAA,EAChD,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS,CAAC,QAAQ,SAAS,SAAS,MAAS;AAAA,MAC7C,cAAc;AAAA,MACd,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,SAAS,CAAC,SAAS,UAAU,SAAS,MAAS;AAAA,MAC/C,cAAc;AAAA,MACd,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,IACR;AAAA,IACA,cAAc;AAAA,MACZ,cAAc;AAAA,MACd,SAAS,CAAC,QAAQ,SAAS,MAAS;AAAA,IACtC;AAAA,IACA,WAAW,CAAC;AAAA,IACZ,UAAU;AAAA,MACR,MAAM;AAAA,IACR;AAAA,IACA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS,EAAE,SAAS,QAAQ;AAAA,IAC9B;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEO,MAAM,UAAU,CAAC,EAAE,GAAG,KAAK,MAAiB;AACjD,SAAO,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAM,GAAG,MAAM,MAAM,0BAA0B;AACzD;AAEO,MAAM,WAAW,CAAC,EAAE,GAAG,KAAK,MAAiB;AAClD,SAAO,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAM,GAAG,MAAM,MAAM,0BAA0B,MAAM,+BAAY;AAC3E;AAEA,QAAQ,OAAO,EAAE,UAAU,cAAc;AACzC,SAAS,OAAO,EAAE,UAAU,cAAc;",
+  "names": ["Link", "React"]
 }

package/lib/cjs/components/form/BaseInput/index.js CHANGED Viewed

@@ -42,7 +42,7 @@ module.exports = __toCommonJS(BaseInput_exports);
 var import_styled_components = __toESM(require("styled-components"));
 var import_styled_system = require("styled-system");
 var import_react = __toESM(require("react"));
-var import_CircledCrossSolidMedium = __toESM(require("@ledgerhq/icons-ui/react/CircledCrossSolidMedium"));
+var import_CircledCrossSolidMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/CircledCrossSolidMedium"));
 var import_Flex = __toESM(require("../../layout/Flex"));
 var import_Text = __toESM(require("../../asorted/Text"));
 var import_helpers = require("../../../styles/helpers");

package/lib/cjs/components/form/BaseInput/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/BaseInput/index.tsx"],
-  "sourcesContent": ["import styled, { css } from \"styled-components\";\nimport { typography, TypographyProps } from \"styled-system\";\nimport React, { InputHTMLAttributes, useState, useMemo, useCallback } from \"react\";\nimport CircledCrossSolidMedium from \"@ledgerhq/icons-ui/react/CircledCrossSolidMedium\";\nimport FlexBox from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\nimport { rgba } from \"../../../styles/helpers\";\nimport { ButtonUnstyled } from \"../../cta/Button\";\n\ntype ValueType = HTMLInputElement[\"value\"];\n\nexport type CommonProps = InputHTMLAttributes<HTMLInputElement> &\n  TypographyProps & {\n    disabled?: boolean;\n    error?: React.ReactNode;\n    warning?: React.ReactNode;\n    info?: React.ReactNode;\n  };\n\nexport type InputProps<T = ValueType> = Omit<CommonProps, \"value\" | \"onChange\"> & {\n  value: T;\n  onChange?: (value: T) => void;\n  onChangeEvent?: InputHTMLAttributes<HTMLInputElement>[\"onChange\"];\n  renderLeft?: ((props: InputProps<T>) => React.ReactNode) | React.ReactNode;\n  renderRight?: ((props: InputProps<T>) => React.ReactNode) | React.ReactNode;\n  unwrapped?: boolean;\n  containerProps?: InputContainerProps;\n  clearable?: boolean;\n  /**\n   * A function can be provided to serialize a value of any type to a string.\n   *\n   * This can be useful to wrap the `<BaseInput />` component (which expects a string)\n   * and create higher-level components that will automatically perform the input/output\n   * conversion to other types.\n   *\n   * *A serializer function should always be used in conjunction with a deserializer function.*\n   */\n  serialize?: (value: T) => ValueType;\n  /**\n   * A deserializer can be provided to convert the html input value from a string to any other type.\n   *\n   * *A deserializer function should always be used in conjunction with a serializer function.*\n   */\n  deserialize?: (value: ValueType) => T;\n};\n\nexport type InputContainerProps = React.ComponentProps<typeof InputContainer>;\nexport const InputContainer = styled.div<Partial<CommonProps> & { focus?: boolean }>`\n  display: flex;\n  height: 48px;\n  border: ${p => `1px solid ${p.theme.colors.neutral.c40}`};\n  border-radius: 24px;\n  transition: all 0.2s ease;\n  color: ${p => p.theme.colors.neutral.c100};\n\n  ${p =>\n    p.focus &&\n    !p.error &&\n    !p.warning &&\n    css`\n      border: 1px solid ${p.theme.colors.primary.c80};\n      box-shadow: 0 0 0 4px ${rgba(p.theme.colors.primary.c60, 0.4)};\n    `};\n\n  ${p =>\n    p.error &&\n    !p.disabled &&\n    css`\n      border: 1px solid ${p.theme.colors.error.c50};\n    `};\n\n  ${p =>\n    !p.error &&\n    p.warning &&\n    !p.disabled &&\n    css`\n      border: 1px solid ${p.theme.colors.warning.c40};\n    `};\n\n  ${p =>\n    !p.error &&\n    !p.warning &&\n    !p.disabled &&\n    css`\n      &:hover {\n        border: ${!p.disabled && `1px solid ${p.theme.colors.primary.c80}`};\n      }\n    `};\n\n  ${p =>\n    p.disabled &&\n    css`\n      color: ${p.theme.colors.neutral.c60};\n      background: ${p => p.theme.colors.neutral.c20};\n    `};\n`;\n\nexport const BaseInput = styled.input.attrs<\n  Partial<CommonProps> & { focus?: boolean } & TypographyProps\n>({\n  fontSize: \"paragraph\",\n  fontWeight: \"medium\",\n})<Partial<CommonProps> & { focus?: boolean } & TypographyProps>`\n  height: 100%;\n  width: 100%;\n  border: 0;\n  caret-color: ${p => (p.error ? p.theme.colors.error.c50 : p.theme.colors.primary.c80)};\n  background: none;\n  outline: none;\n  cursor: ${p => (p.disabled ? \"not-allowed\" : \"text\")};\n  flex-shrink: 1;\n  padding-left: 20px;\n  padding-right: 20px;\n  &::placeholder {\n    color: ${p => (p.disabled ? p.theme.colors.neutral.c50 : p.theme.colors.neutral.c70)};\n  }\n\n  /* stylelint-disable property-no-vendor-prefix */\n\n  /* Hide type=number arrow for Chrome, Safari, Edge, Opera */\n  &::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  /* Hide type=number arrow for Firefox */\n  &[type=\"number\"] {\n    -moz-appearance: textfield;\n  }\n  /* stylelint-enable property-no-vendor-prefix */\n\n  ${typography}\n`;\n\nexport const InputErrorContainer = styled(Text)`\n  color: ${p => p.theme.colors.error.c50};\n  margin-left: 12px;\n`;\nexport const InputWarningContainer = styled(Text)`\n  color: ${p => p.theme.colors.warning.c40};\n  margin-left: 12px;\n`;\nexport const InputInfoContainer = styled(Text)`\n  color: ${p => p.theme.colors.neutral.c60};\n  margin-left: 12px;\n`;\n\nexport const InputRenderLeftContainer = styled(FlexBox).attrs(() => ({\n  alignItems: \"center\",\n  pl: \"16px\",\n}))``;\n\nexport const InputRenderRightContainer = styled(FlexBox).attrs(() => ({\n  alignItems: \"center\",\n  pr: \"16px\",\n}))``;\n\nexport const ClearableButtonUnstyled = styled(ButtonUnstyled)`\n  display: flex;\n`;\n\n// Yes, this is dirty. If you can figure out a better way please change the code :).\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst IDENTITY = (_: any): any => _;\n\nfunction Input<T = ValueType>(\n  props: InputProps<T>,\n  ref?: React.ForwardedRef<HTMLInputElement>,\n): JSX.Element {\n  const {\n    value,\n    disabled,\n    error,\n    warning,\n    info,\n    onChange,\n    onChangeEvent,\n    renderLeft,\n    renderRight,\n    unwrapped,\n    containerProps,\n    serialize = IDENTITY,\n    deserialize = IDENTITY,\n    clearable,\n    ...htmlInputProps\n  } = props;\n  const [focus, setFocus] = useState(false);\n  const inputValue = useMemo(() => serialize(value), [serialize, value]);\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange && onChange(deserialize(e.target.value));\n      onChangeEvent && onChangeEvent(e);\n    },\n    [onChange, onChangeEvent, deserialize],\n  );\n\n  const handleClear = useCallback(() => {\n    onChange && onChange(deserialize(\"\"));\n  }, [onChange, deserialize]);\n\n  const inner = (\n    <>\n      {typeof renderLeft === \"function\" ? renderLeft(props) : renderLeft}\n      <BaseInput\n        ref={ref}\n        {...htmlInputProps}\n        disabled={disabled}\n        error={error}\n        warning={warning}\n        info={info}\n        onChange={handleChange}\n        value={inputValue}\n        onFocus={(event: React.FocusEvent<HTMLInputElement>) => {\n          setFocus(true);\n          htmlInputProps.onFocus && htmlInputProps.onFocus(event);\n        }}\n        onBlur={(event: React.FocusEvent<HTMLInputElement>) => {\n          setFocus(false);\n          htmlInputProps.onBlur && htmlInputProps.onBlur(event);\n        }}\n      />\n      {clearable && inputValue && (\n        <FlexBox alignItems={\"center\"} mr={7}>\n          <ClearableButtonUnstyled onClick={handleClear}>\n            <CircledCrossSolidMedium size={18} color={\"neutral.c50\"} />\n          </ClearableButtonUnstyled>\n        </FlexBox>\n      )}\n      {typeof renderRight === \"function\" ? renderRight(props) : renderRight}\n    </>\n  );\n\n  if (unwrapped) {\n    return (\n      <FlexBox alignItems=\"stretch\" style={{ height: \"100%\" }}>\n        {inner}\n      </FlexBox>\n    );\n  }\n\n  return (\n    <div>\n      <InputContainer\n        disabled={disabled}\n        focus={focus}\n        error={error}\n        warning={warning}\n        {...containerProps}\n      >\n        {inner}\n      </InputContainer>\n      {(error || warning || info) && !disabled && (\n        <FlexBox flexDirection=\"column\" rowGap={2} mt={2}>\n          {error ? (\n            <InputErrorContainer variant=\"small\">{error}</InputErrorContainer>\n          ) : warning ? (\n            <InputWarningContainer variant=\"small\">{warning}</InputWarningContainer>\n          ) : info ? (\n            <InputInfoContainer variant=\"small\">{info}</InputInfoContainer>\n          ) : null}\n        </FlexBox>\n      )}\n    </div>\n  );\n}\n\nexport default React.forwardRef(Input) as <T>(\n  props: InputProps<T> & { ref?: React.ForwardedRef<HTMLInputElement> },\n) => ReturnType<typeof Input>;\n"],
+  "sourcesContent": ["import styled, { css } from \"styled-components\";\nimport { typography, TypographyProps } from \"styled-system\";\nimport React, { InputHTMLAttributes, useState, useMemo, useCallback } from \"react\";\nimport CircledCrossSolidMedium from \"@ledgerhq/icons-ui/reactLegacy/CircledCrossSolidMedium\";\nimport FlexBox from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\nimport { rgba } from \"../../../styles/helpers\";\nimport { ButtonUnstyled } from \"../../cta/Button\";\n\ntype ValueType = HTMLInputElement[\"value\"];\n\nexport type CommonProps = InputHTMLAttributes<HTMLInputElement> &\n  TypographyProps & {\n    disabled?: boolean;\n    error?: React.ReactNode;\n    warning?: React.ReactNode;\n    info?: React.ReactNode;\n  };\n\nexport type InputProps<T = ValueType> = Omit<CommonProps, \"value\" | \"onChange\"> & {\n  value: T;\n  onChange?: (value: T) => void;\n  onChangeEvent?: InputHTMLAttributes<HTMLInputElement>[\"onChange\"];\n  renderLeft?: ((props: InputProps<T>) => React.ReactNode) | React.ReactNode;\n  renderRight?: ((props: InputProps<T>) => React.ReactNode) | React.ReactNode;\n  unwrapped?: boolean;\n  containerProps?: InputContainerProps;\n  clearable?: boolean;\n  /**\n   * A function can be provided to serialize a value of any type to a string.\n   *\n   * This can be useful to wrap the `<BaseInput />` component (which expects a string)\n   * and create higher-level components that will automatically perform the input/output\n   * conversion to other types.\n   *\n   * *A serializer function should always be used in conjunction with a deserializer function.*\n   */\n  serialize?: (value: T) => ValueType;\n  /**\n   * A deserializer can be provided to convert the html input value from a string to any other type.\n   *\n   * *A deserializer function should always be used in conjunction with a serializer function.*\n   */\n  deserialize?: (value: ValueType) => T;\n};\n\nexport type InputContainerProps = React.ComponentProps<typeof InputContainer>;\nexport const InputContainer = styled.div<Partial<CommonProps> & { focus?: boolean }>`\n  display: flex;\n  height: 48px;\n  border: ${p => `1px solid ${p.theme.colors.neutral.c40}`};\n  border-radius: 24px;\n  transition: all 0.2s ease;\n  color: ${p => p.theme.colors.neutral.c100};\n\n  ${p =>\n    p.focus &&\n    !p.error &&\n    !p.warning &&\n    css`\n      border: 1px solid ${p.theme.colors.primary.c80};\n      box-shadow: 0 0 0 4px ${rgba(p.theme.colors.primary.c60, 0.4)};\n    `};\n\n  ${p =>\n    p.error &&\n    !p.disabled &&\n    css`\n      border: 1px solid ${p.theme.colors.error.c50};\n    `};\n\n  ${p =>\n    !p.error &&\n    p.warning &&\n    !p.disabled &&\n    css`\n      border: 1px solid ${p.theme.colors.warning.c40};\n    `};\n\n  ${p =>\n    !p.error &&\n    !p.warning &&\n    !p.disabled &&\n    css`\n      &:hover {\n        border: ${!p.disabled && `1px solid ${p.theme.colors.primary.c80}`};\n      }\n    `};\n\n  ${p =>\n    p.disabled &&\n    css`\n      color: ${p.theme.colors.neutral.c60};\n      background: ${p => p.theme.colors.neutral.c20};\n    `};\n`;\n\nexport const BaseInput = styled.input.attrs<\n  Partial<CommonProps> & { focus?: boolean } & TypographyProps\n>({\n  fontSize: \"paragraph\",\n  fontWeight: \"medium\",\n})<Partial<CommonProps> & { focus?: boolean } & TypographyProps>`\n  height: 100%;\n  width: 100%;\n  border: 0;\n  caret-color: ${p => (p.error ? p.theme.colors.error.c50 : p.theme.colors.primary.c80)};\n  background: none;\n  outline: none;\n  cursor: ${p => (p.disabled ? \"not-allowed\" : \"text\")};\n  flex-shrink: 1;\n  padding-left: 20px;\n  padding-right: 20px;\n  &::placeholder {\n    color: ${p => (p.disabled ? p.theme.colors.neutral.c50 : p.theme.colors.neutral.c70)};\n  }\n\n  /* stylelint-disable property-no-vendor-prefix */\n\n  /* Hide type=number arrow for Chrome, Safari, Edge, Opera */\n  &::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  /* Hide type=number arrow for Firefox */\n  &[type=\"number\"] {\n    -moz-appearance: textfield;\n  }\n  /* stylelint-enable property-no-vendor-prefix */\n\n  ${typography}\n`;\n\nexport const InputErrorContainer = styled(Text)`\n  color: ${p => p.theme.colors.error.c50};\n  margin-left: 12px;\n`;\nexport const InputWarningContainer = styled(Text)`\n  color: ${p => p.theme.colors.warning.c40};\n  margin-left: 12px;\n`;\nexport const InputInfoContainer = styled(Text)`\n  color: ${p => p.theme.colors.neutral.c60};\n  margin-left: 12px;\n`;\n\nexport const InputRenderLeftContainer = styled(FlexBox).attrs(() => ({\n  alignItems: \"center\",\n  pl: \"16px\",\n}))``;\n\nexport const InputRenderRightContainer = styled(FlexBox).attrs(() => ({\n  alignItems: \"center\",\n  pr: \"16px\",\n}))``;\n\nexport const ClearableButtonUnstyled = styled(ButtonUnstyled)`\n  display: flex;\n`;\n\n// Yes, this is dirty. If you can figure out a better way please change the code :).\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst IDENTITY = (_: any): any => _;\n\nfunction Input<T = ValueType>(\n  props: InputProps<T>,\n  ref?: React.ForwardedRef<HTMLInputElement>,\n): JSX.Element {\n  const {\n    value,\n    disabled,\n    error,\n    warning,\n    info,\n    onChange,\n    onChangeEvent,\n    renderLeft,\n    renderRight,\n    unwrapped,\n    containerProps,\n    serialize = IDENTITY,\n    deserialize = IDENTITY,\n    clearable,\n    ...htmlInputProps\n  } = props;\n  const [focus, setFocus] = useState(false);\n  const inputValue = useMemo(() => serialize(value), [serialize, value]);\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange && onChange(deserialize(e.target.value));\n      onChangeEvent && onChangeEvent(e);\n    },\n    [onChange, onChangeEvent, deserialize],\n  );\n\n  const handleClear = useCallback(() => {\n    onChange && onChange(deserialize(\"\"));\n  }, [onChange, deserialize]);\n\n  const inner = (\n    <>\n      {typeof renderLeft === \"function\" ? renderLeft(props) : renderLeft}\n      <BaseInput\n        ref={ref}\n        {...htmlInputProps}\n        disabled={disabled}\n        error={error}\n        warning={warning}\n        info={info}\n        onChange={handleChange}\n        value={inputValue}\n        onFocus={(event: React.FocusEvent<HTMLInputElement>) => {\n          setFocus(true);\n          htmlInputProps.onFocus && htmlInputProps.onFocus(event);\n        }}\n        onBlur={(event: React.FocusEvent<HTMLInputElement>) => {\n          setFocus(false);\n          htmlInputProps.onBlur && htmlInputProps.onBlur(event);\n        }}\n      />\n      {clearable && inputValue && (\n        <FlexBox alignItems={\"center\"} mr={7}>\n          <ClearableButtonUnstyled onClick={handleClear}>\n            <CircledCrossSolidMedium size={18} color={\"neutral.c50\"} />\n          </ClearableButtonUnstyled>\n        </FlexBox>\n      )}\n      {typeof renderRight === \"function\" ? renderRight(props) : renderRight}\n    </>\n  );\n\n  if (unwrapped) {\n    return (\n      <FlexBox alignItems=\"stretch\" style={{ height: \"100%\" }}>\n        {inner}\n      </FlexBox>\n    );\n  }\n\n  return (\n    <div>\n      <InputContainer\n        disabled={disabled}\n        focus={focus}\n        error={error}\n        warning={warning}\n        {...containerProps}\n      >\n        {inner}\n      </InputContainer>\n      {(error || warning || info) && !disabled && (\n        <FlexBox flexDirection=\"column\" rowGap={2} mt={2}>\n          {error ? (\n            <InputErrorContainer variant=\"small\">{error}</InputErrorContainer>\n          ) : warning ? (\n            <InputWarningContainer variant=\"small\">{warning}</InputWarningContainer>\n          ) : info ? (\n            <InputInfoContainer variant=\"small\">{info}</InputInfoContainer>\n          ) : null}\n        </FlexBox>\n      )}\n    </div>\n  );\n}\n\nexport default React.forwardRef(Input) as <T>(\n  props: InputProps<T> & { ref?: React.ForwardedRef<HTMLInputElement> },\n) => ReturnType<typeof Input>;\n"],
   "mappings": "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",
   "names": ["styled", "p", "Text", "FlexBox", "React", "CircledCrossSolidMedium"]
 }

package/lib/cjs/components/form/Checkbox/Checkbox.js CHANGED Viewed

@@ -34,7 +34,7 @@ module.exports = __toCommonJS(Checkbox_exports);
 var import_react = __toESM(require("react"));
 var import_styled_components = __toESM(require("styled-components"));
 var import_Text = __toESM(require("../../asorted/Text"));
-var import_CheckAloneMedium = __toESM(require("@ledgerhq/icons-ui/react/CheckAloneMedium"));
+var import_CheckAloneMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/CheckAloneMedium"));
 var import_server = require("react-dom/server");
 const Icon = () => import_react.default.cloneElement((0, import_CheckAloneMedium.default)({ size: 13, color: "currentColor" }), {
   // the xmlns attribute is required to properly display the checkbox

package/lib/cjs/components/form/Checkbox/Checkbox.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/Checkbox/Checkbox.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport CheckAloneMedium from \"@ledgerhq/icons-ui/react/CheckAloneMedium\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\n\nconst Icon = () =>\n  React.cloneElement(CheckAloneMedium({ size: 13, color: \"currentColor\" }), {\n    // the xmlns attribute is required to properly display the checkbox\n    xmlns: \"http://www.w3.org/2000/svg\",\n  });\nconst CheckMarkIcon = encodeURIComponent(renderToStaticMarkup(<Icon />));\n\nconst Input = styled.input`\n  background-color: transparent;\n\n  border-radius: ${p => `${p.theme.radii[1]}px`};\n  position: relative;\n\n  min-width: ${p => p.theme.space[7]}px;\n  height: ${p => p.theme.space[7]}px;\n  appearance: none;\n  border: 1px solid ${props => props.theme.colors.neutral.c90};\n  box-shadow: none;\n\n  &:checked {\n    background-color: currentColor;\n    border-color: currentColor;\n  }\n\n  &:checked::after {\n    content: \" \";\n    width: ${p => p.theme.space[7]}px;\n    height: ${p => p.theme.space[7]}px;\n    display: inline-block;\n    color: ${props => props.theme.colors.neutral.c00};\n\n    background-image: url(\"data:image/svg+xml,${CheckMarkIcon}\");\n    background-position: center;\n    background-repeat: no-repeat;\n\n    /* Trick to center the check mark by taking into account the border */\n    position: absolute;\n    top: -1px;\n    left: -1px;\n  }\n`;\n\nconst Label = styled(Text).attrs({ type: \"body\", fontWeight: \"500\" })`\n  color: ${props => props.theme.colors.neutral.c80};\n\n  /* Version when the input is checked */\n  ${Input}:checked + & {\n    color: currentColor;\n  }\n\n  &:first-letter {\n    text-transform: uppercase;\n  }\n`;\n\nconst Container = styled.div`\n  --ll-checkbox-color: unset;\n  color: var(--ll-checkbox-color, ${props => props.theme.colors.primary.c90});\n\n  display: inline-flex;\n  column-gap: ${p => p.theme.space[5]}px;\n  align-items: center;\n  cursor: pointer;\n\n  &[data-variant=\"default\"] {\n    --ll-checkbox-color: ${props => props.theme.colors.primary.c90};\n  }\n\n  &[data-variant=\"success\"] {\n    --ll-checkbox-color: ${props => props.theme.colors.success.c50};\n  }\n\n  &[data-variant=\"error\"] {\n    --ll-checkbox-color: ${props => props.theme.colors.error.c50};\n  }\n\n  &[data-disabled=\"true\"] {\n    --ll-checkbox-color: ${props => props.theme.colors.neutral.c80};\n    cursor: unset;\n  }\n`;\n\nexport type CheckboxProps = {\n  isDisabled?: boolean;\n  isChecked: boolean;\n  variant?: \"default\" | \"success\" | \"error\";\n  label?: React.ReactNode;\n  name: string;\n  onChange: (value: boolean) => void;\n};\n\nconst Checkbox = ({\n  isDisabled = false,\n  variant = \"default\",\n  label,\n  isChecked,\n  name,\n  onChange,\n}: CheckboxProps): JSX.Element => (\n  <Container data-variant={variant} data-disabled={isDisabled} onClick={() => onChange(!isChecked)}>\n    <Input type=\"checkbox\" name={name} id={name} checked={isChecked} disabled={isDisabled} />\n    {label ? (\n      <Label as=\"label\" htmlFor={name}>\n        {label}\n      </Label>\n    ) : null}\n  </Container>\n);\n\nexport default Checkbox;\n"],
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport CheckAloneMedium from \"@ledgerhq/icons-ui/reactLegacy/CheckAloneMedium\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\n\nconst Icon = () =>\n  React.cloneElement(CheckAloneMedium({ size: 13, color: \"currentColor\" }), {\n    // the xmlns attribute is required to properly display the checkbox\n    xmlns: \"http://www.w3.org/2000/svg\",\n  });\nconst CheckMarkIcon = encodeURIComponent(renderToStaticMarkup(<Icon />));\n\nconst Input = styled.input`\n  background-color: transparent;\n\n  border-radius: ${p => `${p.theme.radii[1]}px`};\n  position: relative;\n\n  min-width: ${p => p.theme.space[7]}px;\n  height: ${p => p.theme.space[7]}px;\n  appearance: none;\n  border: 1px solid ${props => props.theme.colors.neutral.c90};\n  box-shadow: none;\n\n  &:checked {\n    background-color: currentColor;\n    border-color: currentColor;\n  }\n\n  &:checked::after {\n    content: \" \";\n    width: ${p => p.theme.space[7]}px;\n    height: ${p => p.theme.space[7]}px;\n    display: inline-block;\n    color: ${props => props.theme.colors.neutral.c00};\n\n    background-image: url(\"data:image/svg+xml,${CheckMarkIcon}\");\n    background-position: center;\n    background-repeat: no-repeat;\n\n    /* Trick to center the check mark by taking into account the border */\n    position: absolute;\n    top: -1px;\n    left: -1px;\n  }\n`;\n\nconst Label = styled(Text).attrs({ type: \"body\", fontWeight: \"500\" })`\n  color: ${props => props.theme.colors.neutral.c80};\n\n  /* Version when the input is checked */\n  ${Input}:checked + & {\n    color: currentColor;\n  }\n\n  &:first-letter {\n    text-transform: uppercase;\n  }\n`;\n\nconst Container = styled.div`\n  --ll-checkbox-color: unset;\n  color: var(--ll-checkbox-color, ${props => props.theme.colors.primary.c90});\n\n  display: inline-flex;\n  column-gap: ${p => p.theme.space[5]}px;\n  align-items: center;\n  cursor: pointer;\n\n  &[data-variant=\"default\"] {\n    --ll-checkbox-color: ${props => props.theme.colors.primary.c90};\n  }\n\n  &[data-variant=\"success\"] {\n    --ll-checkbox-color: ${props => props.theme.colors.success.c50};\n  }\n\n  &[data-variant=\"error\"] {\n    --ll-checkbox-color: ${props => props.theme.colors.error.c50};\n  }\n\n  &[data-disabled=\"true\"] {\n    --ll-checkbox-color: ${props => props.theme.colors.neutral.c80};\n    cursor: unset;\n  }\n`;\n\nexport type CheckboxProps = {\n  isDisabled?: boolean;\n  isChecked: boolean;\n  variant?: \"default\" | \"success\" | \"error\";\n  label?: React.ReactNode;\n  name: string;\n  onChange: (value: boolean) => void;\n};\n\nconst Checkbox = ({\n  isDisabled = false,\n  variant = \"default\",\n  label,\n  isChecked,\n  name,\n  onChange,\n}: CheckboxProps): JSX.Element => (\n  <Container data-variant={variant} data-disabled={isDisabled} onClick={() => onChange(!isChecked)}>\n    <Input type=\"checkbox\" name={name} id={name} checked={isChecked} disabled={isDisabled} />\n    {label ? (\n      <Label as=\"label\" htmlFor={name}>\n        {label}\n      </Label>\n    ) : null}\n  </Container>\n);\n\nexport default Checkbox;\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AACjB,8BAA6B;AAC7B,oBAAqC;AAErC,MAAM,OAAO,MACX,aAAAA,QAAM,iBAAa,wBAAAC,SAAiB,EAAE,MAAM,IAAI,OAAO,eAAe,CAAC,GAAG;AAAA;AAAA,EAExE,OAAO;AACT,CAAC;AACH,MAAM,gBAAgB,uBAAmB,oCAAqB,6BAAAD,QAAA,cAAC,UAAK,CAAE,CAAC;AAEvE,MAAM,QAAQ,yBAAAE,QAAO;AAAA;AAAA;AAAA,mBAGF,OAAK,GAAG,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA,eAG3B,OAAK,EAAE,MAAM,MAAM,CAAC;AAAA,YACvB,OAAK,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA,sBAEV,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAU7C,OAAK,EAAE,MAAM,MAAM,CAAC;AAAA,cACnB,OAAK,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA,aAErB,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,gDAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWhD,MAAM,YAAQ,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAM,EAAE,MAAM,QAAQ,YAAY,MAAM,CAAC;AAAA,WACzD,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,IAG3C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASJ,MAAM,YAAY,yBAAAD,QAAO;AAAA;AAAA,oCAEW,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,gBAGxD,OAAK,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKT,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,2BAIpC,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,2BAIpC,WAAS,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA,2BAIlC,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAc/D,MAAM,WAAW,CAAC;AAAA,EAChB,aAAa;AAAA,EACb,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,6BAAAF,QAAA,cAAC,aAAU,gBAAc,SAAS,iBAAe,YAAY,SAAS,MAAM,SAAS,CAAC,SAAS,KAC7F,6BAAAA,QAAA,cAAC,SAAM,MAAK,YAAW,MAAY,IAAI,MAAM,SAAS,WAAW,UAAU,YAAY,GACtF,QACC,6BAAAA,QAAA,cAAC,SAAM,IAAG,SAAQ,SAAS,QACxB,KACH,IACE,IACN;AAGF,IAAO,mBAAQ;",
   "names": ["React", "CheckAloneMedium", "styled", "Text"]
 }

package/lib/cjs/components/form/Dropdown/index.js CHANGED Viewed

@@ -50,7 +50,7 @@ function DropdownValueContainer(props) {
     import_ValueContainer.ValueContainer,
     {
       ...props,
-      render: () => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { alignItems: "center" }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "paragraph", fontWeight: "medium", mr: 2 }, /* @__PURE__ */ import_react.default.createElement(import_Flex.default, null, props.children)), /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { alignItems: "center", style: { transform: isOpen ? "rotate(180deg)" : "" } }, /* @__PURE__ */ import_react.default.createElement(import__.Icons.DropdownMedium, { size: 20 })))
+      render: () => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { alignItems: "center" }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "paragraph", fontWeight: "medium", mr: 2 }, /* @__PURE__ */ import_react.default.createElement(import_Flex.default, null, props.children)), /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { alignItems: "center", style: { transform: isOpen ? "rotate(180deg)" : "" } }, /* @__PURE__ */ import_react.default.createElement(import__.IconsLegacy.DropdownMedium, { size: 20 })))
     }
   );
 }

package/lib/cjs/components/form/Dropdown/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/Dropdown/index.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport { components, GroupBase, ControlProps, ValueContainerProps } from \"react-select\";\nimport { useTheme } from \"styled-components\";\nimport SelectInput, { Props as SelectInputProps } from \"../../form/SelectInput\";\nimport Text from \"../../asorted/Text\";\nimport { Icons } from \"../../../\";\nimport { ValueContainer } from \"../../form/SelectInput/ValueContainer\";\nimport FlexBox from \"../../layout/Flex\";\n\nexport type Props<O> = SelectInputProps<O, false, GroupBase<O>> & {\n  label: string;\n};\n\nfunction DropdownControl<O, M extends boolean, G extends GroupBase<O>>(\n  props: ControlProps<O, M, G>,\n) {\n  const { selectProps, children } = props;\n  const { label } = selectProps as unknown as Props<O>;\n\n  return (\n    <components.Control {...props}>\n      <Text variant=\"paragraph\" fontWeight=\"medium\" color=\"neutral.c80\" mr={2}>\n        {label}\n      </Text>\n      {children}\n    </components.Control>\n  );\n}\n\nfunction DropdownValueContainer<O>(props: ValueContainerProps<O, false>) {\n  const isOpen = props.selectProps.menuIsOpen;\n\n  return (\n    <ValueContainer\n      {...props}\n      render={() => (\n        <FlexBox alignItems=\"center\">\n          <Text variant=\"paragraph\" fontWeight=\"medium\" mr={2}>\n            <FlexBox>{props.children}</FlexBox>\n          </Text>\n          <FlexBox alignItems=\"center\" style={{ transform: isOpen ? \"rotate(180deg)\" : \"\" }}>\n            <Icons.DropdownMedium size={20} />\n          </FlexBox>\n        </FlexBox>\n      )}\n    />\n  );\n}\n\nfunction DropdownIndicatorsContainer() {\n  return null;\n}\n\nexport default function Dropdown<O>(props: Props<O>): JSX.Element {\n  const theme = useTheme();\n  const { styles, ...rest } = props;\n\n  return (\n    <SelectInput\n      placeholder=\"\"\n      isSearchable={false}\n      styles={{\n        singleValue: provided => ({\n          ...provided,\n          color: theme.colors.neutral.c100,\n          margin: 0,\n          top: undefined,\n          position: undefined,\n          overflow: undefined,\n          maxWidth: undefined,\n          transform: undefined,\n        }),\n        input: () => ({ display: \"none\" }),\n        menu: provided => ({\n          ...provided,\n          border: 0,\n          boxShadow: \"none\",\n          background: \"none\",\n          width: \"auto\",\n          minWidth: \"200px\",\n        }),\n        ...styles,\n      }}\n      {...rest}\n      components={{\n        Control: DropdownControl,\n        ValueContainer: DropdownValueContainer,\n        IndicatorsContainer: DropdownIndicatorsContainer,\n      }}\n    />\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,0BAAyE;AACzE,+BAAyB;AACzB,yBAAuD;AACvD,kBAAiB;AACjB,eAAsB;AACtB,4BAA+B;AAC/B,kBAAoB;AAMpB,SAAS,gBACP,OACA;AACA,QAAM,EAAE,aAAa,SAAS,IAAI;AAClC,QAAM,EAAE,MAAM,IAAI;AAElB,SACE,6BAAAA,QAAA,cAAC,+BAAW,SAAX,EAAoB,GAAG,SACtB,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAQ,aAAY,YAAW,UAAS,OAAM,eAAc,IAAI,KACnE,KACH,GACC,QACH;AAEJ;AAEA,SAAS,uBAA0B,OAAsC;AACvE,QAAM,SAAS,MAAM,YAAY;AAEjC,SACE,6BAAAD,QAAA;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,QAAQ,MACN,6BAAAA,QAAA,cAAC,YAAAE,SAAA,EAAQ,YAAW,YAClB,6BAAAF,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAQ,aAAY,YAAW,UAAS,IAAI,KAChD,6BAAAD,QAAA,cAAC,YAAAE,SAAA,MAAS,MAAM,QAAS,CAC3B,GACA,6BAAAF,QAAA,cAAC,YAAAE,SAAA,EAAQ,YAAW,UAAS,OAAO,EAAE,WAAW,SAAS,mBAAmB,GAAG,KAC9E,6BAAAF,QAAA,cAAC,eAAM,gBAAN,EAAqB,MAAM,IAAI,CAClC,CACF;AAAA;AAAA,EAEJ;AAEJ;AAEA,SAAS,8BAA8B;AACrC,SAAO;AACT;AAEe,SAAR,SAA6B,OAA8B;AAChE,QAAM,YAAQ,mCAAS;AACvB,QAAM,EAAE,QAAQ,GAAG,KAAK,IAAI;AAE5B,SACE,6BAAAA,QAAA;AAAA,IAAC,mBAAAG;AAAA,IAAA;AAAA,MACC,aAAY;AAAA,MACZ,cAAc;AAAA,MACd,QAAQ;AAAA,QACN,aAAa,eAAa;AAAA,UACxB,GAAG;AAAA,UACH,OAAO,MAAM,OAAO,QAAQ;AAAA,UAC5B,QAAQ;AAAA,UACR,KAAK;AAAA,UACL,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,WAAW;AAAA,QACb;AAAA,QACA,OAAO,OAAO,EAAE,SAAS,OAAO;AAAA,QAChC,MAAM,eAAa;AAAA,UACjB,GAAG;AAAA,UACH,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,YAAY;AAAA,UACZ,OAAO;AAAA,UACP,UAAU;AAAA,QACZ;AAAA,QACA,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MACJ,YAAY;AAAA,QACV,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,qBAAqB;AAAA,MACvB;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import React from \"react\";\nimport { components, GroupBase, ControlProps, ValueContainerProps } from \"react-select\";\nimport { useTheme } from \"styled-components\";\nimport SelectInput, { Props as SelectInputProps } from \"../../form/SelectInput\";\nimport Text from \"../../asorted/Text\";\nimport { IconsLegacy } from \"../../../\";\nimport { ValueContainer } from \"../../form/SelectInput/ValueContainer\";\nimport FlexBox from \"../../layout/Flex\";\n\nexport type Props<O> = SelectInputProps<O, false, GroupBase<O>> & {\n  label: string;\n};\n\nfunction DropdownControl<O, M extends boolean, G extends GroupBase<O>>(\n  props: ControlProps<O, M, G>,\n) {\n  const { selectProps, children } = props;\n  const { label } = selectProps as unknown as Props<O>;\n\n  return (\n    <components.Control {...props}>\n      <Text variant=\"paragraph\" fontWeight=\"medium\" color=\"neutral.c80\" mr={2}>\n        {label}\n      </Text>\n      {children}\n    </components.Control>\n  );\n}\n\nfunction DropdownValueContainer<O>(props: ValueContainerProps<O, false>) {\n  const isOpen = props.selectProps.menuIsOpen;\n\n  return (\n    <ValueContainer\n      {...props}\n      render={() => (\n        <FlexBox alignItems=\"center\">\n          <Text variant=\"paragraph\" fontWeight=\"medium\" mr={2}>\n            <FlexBox>{props.children}</FlexBox>\n          </Text>\n          <FlexBox alignItems=\"center\" style={{ transform: isOpen ? \"rotate(180deg)\" : \"\" }}>\n            <IconsLegacy.DropdownMedium size={20} />\n          </FlexBox>\n        </FlexBox>\n      )}\n    />\n  );\n}\n\nfunction DropdownIndicatorsContainer() {\n  return null;\n}\n\nexport default function Dropdown<O>(props: Props<O>): JSX.Element {\n  const theme = useTheme();\n  const { styles, ...rest } = props;\n\n  return (\n    <SelectInput\n      placeholder=\"\"\n      isSearchable={false}\n      styles={{\n        singleValue: provided => ({\n          ...provided,\n          color: theme.colors.neutral.c100,\n          margin: 0,\n          top: undefined,\n          position: undefined,\n          overflow: undefined,\n          maxWidth: undefined,\n          transform: undefined,\n        }),\n        input: () => ({ display: \"none\" }),\n        menu: provided => ({\n          ...provided,\n          border: 0,\n          boxShadow: \"none\",\n          background: \"none\",\n          width: \"auto\",\n          minWidth: \"200px\",\n        }),\n        ...styles,\n      }}\n      {...rest}\n      components={{\n        Control: DropdownControl,\n        ValueContainer: DropdownValueContainer,\n        IndicatorsContainer: DropdownIndicatorsContainer,\n      }}\n    />\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,0BAAyE;AACzE,+BAAyB;AACzB,yBAAuD;AACvD,kBAAiB;AACjB,eAA4B;AAC5B,4BAA+B;AAC/B,kBAAoB;AAMpB,SAAS,gBACP,OACA;AACA,QAAM,EAAE,aAAa,SAAS,IAAI;AAClC,QAAM,EAAE,MAAM,IAAI;AAElB,SACE,6BAAAA,QAAA,cAAC,+BAAW,SAAX,EAAoB,GAAG,SACtB,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAQ,aAAY,YAAW,UAAS,OAAM,eAAc,IAAI,KACnE,KACH,GACC,QACH;AAEJ;AAEA,SAAS,uBAA0B,OAAsC;AACvE,QAAM,SAAS,MAAM,YAAY;AAEjC,SACE,6BAAAD,QAAA;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,QAAQ,MACN,6BAAAA,QAAA,cAAC,YAAAE,SAAA,EAAQ,YAAW,YAClB,6BAAAF,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAQ,aAAY,YAAW,UAAS,IAAI,KAChD,6BAAAD,QAAA,cAAC,YAAAE,SAAA,MAAS,MAAM,QAAS,CAC3B,GACA,6BAAAF,QAAA,cAAC,YAAAE,SAAA,EAAQ,YAAW,UAAS,OAAO,EAAE,WAAW,SAAS,mBAAmB,GAAG,KAC9E,6BAAAF,QAAA,cAAC,qBAAY,gBAAZ,EAA2B,MAAM,IAAI,CACxC,CACF;AAAA;AAAA,EAEJ;AAEJ;AAEA,SAAS,8BAA8B;AACrC,SAAO;AACT;AAEe,SAAR,SAA6B,OAA8B;AAChE,QAAM,YAAQ,mCAAS;AACvB,QAAM,EAAE,QAAQ,GAAG,KAAK,IAAI;AAE5B,SACE,6BAAAA,QAAA;AAAA,IAAC,mBAAAG;AAAA,IAAA;AAAA,MACC,aAAY;AAAA,MACZ,cAAc;AAAA,MACd,QAAQ;AAAA,QACN,aAAa,eAAa;AAAA,UACxB,GAAG;AAAA,UACH,OAAO,MAAM,OAAO,QAAQ;AAAA,UAC5B,QAAQ;AAAA,UACR,KAAK;AAAA,UACL,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,WAAW;AAAA,QACb;AAAA,QACA,OAAO,OAAO,EAAE,SAAS,OAAO;AAAA,QAChC,MAAM,eAAa;AAAA,UACjB,GAAG;AAAA,UACH,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,YAAY;AAAA,UACZ,OAAO;AAAA,UACP,UAAU;AAAA,QACZ;AAAA,QACA,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MACJ,YAAY;AAAA,QACV,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,qBAAqB;AAAA,MACvB;AAAA;AAAA,EACF;AAEJ;",
   "names": ["React", "Text", "FlexBox", "SelectInput"]
 }

package/lib/cjs/components/form/DropdownGeneric/index.js CHANGED Viewed

@@ -147,7 +147,7 @@ const DropdownGeneric = ({
       opened: opened && !disabled
     },
     /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "paragraph", fontWeight: "medium", color }, label),
-    /* @__PURE__ */ import_react.default.createElement(import__.Icons.DropdownMedium, { size: 20, color })
+    /* @__PURE__ */ import_react.default.createElement(import__.IconsLegacy.DropdownMedium, { size: 20, color })
   ), opened && !disabled && /* @__PURE__ */ import_react.default.createElement(
     DropdownContainer,
     {

package/lib/cjs/components/form/DropdownGeneric/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/DropdownGeneric/index.tsx"],
-  "sourcesContent": ["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useFloating, getScrollParents, shift, size, flip } from \"@floating-ui/react-dom\";\nimport styled from \"styled-components\";\nimport { Icons } from \"../../../\";\nimport Flex from \"../../layout/Flex\";\nimport Box from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\n\nconst ButtonContainer = styled(Box).attrs({\n  flexDirection: \"row\",\n  width: \"auto\",\n  alignItems: \"center\",\n  height: \"36px\",\n})<{ disabled?: boolean; opened: boolean }>`\n  cursor: ${p => !p.disabled && \"pointer\"};\n  > :last-child {\n    /* targeting the dropdown icon */\n    ${p => p.opened && \"transform: rotate(180deg);\"}\n    margin-left: ${p => p.theme.space[3]}px;\n  }\n`;\n\nconst DropdownContainer = styled(Flex).attrs(({ theme }) => {\n  const isLight = theme.colors.type === \"light\";\n  return {\n    zIndex: 1,\n    flexDirection: \"column\",\n    padding: 3,\n    border: `1px solid ${theme.colors.neutral[isLight ? \"c20\" : \"c30\"]}`,\n    borderRadius: \"8px\",\n    backgroundColor: isLight ? \"neutral.c00\" : \"neutral.c20\",\n    color: theme.colors.neutral.c80,\n  };\n})`\n  overflow-y: auto;\n  box-shadow: 0px 6px 12px rgba(0, 0, 0, ${p => (p.theme.colors.type === \"light\" ? 0.04 : 0.08)});\n`;\n\nexport const placements = [\"bottom-start\", \"bottom\", \"bottom-end\"] as const;\ntype Placement = (typeof placements)[number];\n\nexport type Props = {\n  /**\n   * Label of the dropdown button, displayed before the dropdown icon.\n   */\n  label: string | React.ReactNode;\n  /**\n   * Controls whether the dropdown can be open.\n   * Defaults to false.\n   */\n  disabled?: boolean;\n  /**\n   * Controls whether the dropdown will close on a click event happening outside of this component.\n   * Defaults to true.\n   */\n  closeOnClickOutside?: boolean;\n  /**\n   * Controls whether the dropdown will close on a click event happening inside the dropdown.\n   * Defaults to false.\n   */\n  closeOnClickInside?: boolean;\n  /**\n   * Content of the dropdown.\n   */\n  children: React.ReactNode;\n  /**\n   * Vertical alignment of the dropdown relative to the dropdown button.\n   * Will automatically adjust to the document to avoid overflowing.\n   * Defaults to \"bottom\".\n   */\n  placement?: Placement;\n  /**\n   * Controls whether the dropdown will flip its side to keep it in view\n   * in case there isn't enough space available. See https://floating-ui.com/docs/flip\n   * Defaults to false.\n   */\n  flipDisabled?: boolean;\n};\n\nconst DropdownGeneric = ({\n  label,\n  closeOnClickOutside = true,\n  closeOnClickInside = false,\n  disabled = false,\n  placement = \"bottom\",\n  flipDisabled = false,\n  children,\n}: Props) => {\n  const divRef = useRef<HTMLDivElement>(null);\n\n  const [maxHeight, setMaxHeight] = useState<number>();\n  const [maxWidth, setMaxWidth] = useState<number>();\n\n  const [opened, setOpened] = useState(false);\n\n  const handleClickButton = useCallback(() => {\n    if (!disabled) setOpened(!opened);\n  }, [opened, disabled]);\n\n  const handleClickInside = useCallback(() => {\n    if (closeOnClickInside) setOpened(false);\n  }, [setOpened, closeOnClickInside]);\n\n  const { x, y, reference, floating, strategy, update, refs } = useFloating({\n    placement: placements.includes(placement) ? placement : \"bottom\",\n    middleware: [\n      shift(),\n      ...(flipDisabled ? [] : [flip()]),\n      size({\n        padding: 6,\n        apply({ height, width }: { height: number; width: number }) {\n          setMaxHeight(height);\n          setMaxWidth(width);\n        },\n      }),\n    ],\n  });\n\n  const handleResizeOrScroll = useCallback(() => {\n    if (opened && !disabled) update();\n  }, [opened, disabled, update]);\n\n  useEffect(() => {\n    if (!refs.reference.current || !refs.floating.current) {\n      return;\n    }\n    const parents = [\n      ...getScrollParents(refs.reference.current),\n      ...getScrollParents(refs.floating.current),\n    ];\n    parents.forEach(parent => {\n      parent.addEventListener(\"scroll\", handleResizeOrScroll);\n      parent.addEventListener(\"resize\", handleResizeOrScroll);\n    });\n    return () => {\n      parents.forEach(parent => {\n        parent.removeEventListener(\"scroll\", handleResizeOrScroll);\n        parent.removeEventListener(\"resize\", handleResizeOrScroll);\n      });\n    };\n  }, [flipDisabled, refs.reference, refs.floating, handleResizeOrScroll]);\n\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent) {\n      if (\n        closeOnClickOutside &&\n        opened &&\n        divRef.current &&\n        !divRef.current.contains(event.target as Node)\n      ) {\n        setOpened(false);\n      }\n    }\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [closeOnClickOutside, opened, setOpened, divRef]);\n\n  const color = disabled ? \"neutral.c50\" : \"neutral.c100\";\n\n  return (\n    <Box ref={divRef}>\n      <ButtonContainer\n        ref={reference}\n        onClick={handleClickButton}\n        disabled={disabled}\n        opened={opened && !disabled}\n      >\n        <Text variant=\"paragraph\" fontWeight=\"medium\" color={color}>\n          {label}\n        </Text>\n        <Icons.DropdownMedium size={20} color={color} />\n      </ButtonContainer>\n      {opened && !disabled && (\n        <DropdownContainer\n          ref={floating}\n          style={{\n            position: strategy,\n            top: y ?? \"\",\n            left: x ?? \"\",\n            maxHeight: maxHeight ? `${maxHeight}px` : \"\",\n            maxWidth: maxWidth ? \"\" : \"\",\n            // maxWidth: maxWidth ? `${maxWidth}px` : \"\", /* TODO: fix this */\n          }}\n          onClick={handleClickInside}\n        >\n          {children}\n        </DropdownContainer>\n      )}\n    </Box>\n  );\n};\n\nexport default DropdownGeneric;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useFloating, getScrollParents, shift, size, flip } from \"@floating-ui/react-dom\";\nimport styled from \"styled-components\";\nimport { IconsLegacy } from \"../../../\";\nimport Flex from \"../../layout/Flex\";\nimport Box from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\n\nconst ButtonContainer = styled(Box).attrs({\n  flexDirection: \"row\",\n  width: \"auto\",\n  alignItems: \"center\",\n  height: \"36px\",\n})<{ disabled?: boolean; opened: boolean }>`\n  cursor: ${p => !p.disabled && \"pointer\"};\n  > :last-child {\n    /* targeting the dropdown icon */\n    ${p => p.opened && \"transform: rotate(180deg);\"}\n    margin-left: ${p => p.theme.space[3]}px;\n  }\n`;\n\nconst DropdownContainer = styled(Flex).attrs(({ theme }) => {\n  const isLight = theme.colors.type === \"light\";\n  return {\n    zIndex: 1,\n    flexDirection: \"column\",\n    padding: 3,\n    border: `1px solid ${theme.colors.neutral[isLight ? \"c20\" : \"c30\"]}`,\n    borderRadius: \"8px\",\n    backgroundColor: isLight ? \"neutral.c00\" : \"neutral.c20\",\n    color: theme.colors.neutral.c80,\n  };\n})`\n  overflow-y: auto;\n  box-shadow: 0px 6px 12px rgba(0, 0, 0, ${p => (p.theme.colors.type === \"light\" ? 0.04 : 0.08)});\n`;\n\nexport const placements = [\"bottom-start\", \"bottom\", \"bottom-end\"] as const;\ntype Placement = (typeof placements)[number];\n\nexport type Props = {\n  /**\n   * Label of the dropdown button, displayed before the dropdown icon.\n   */\n  label: string | React.ReactNode;\n  /**\n   * Controls whether the dropdown can be open.\n   * Defaults to false.\n   */\n  disabled?: boolean;\n  /**\n   * Controls whether the dropdown will close on a click event happening outside of this component.\n   * Defaults to true.\n   */\n  closeOnClickOutside?: boolean;\n  /**\n   * Controls whether the dropdown will close on a click event happening inside the dropdown.\n   * Defaults to false.\n   */\n  closeOnClickInside?: boolean;\n  /**\n   * Content of the dropdown.\n   */\n  children: React.ReactNode;\n  /**\n   * Vertical alignment of the dropdown relative to the dropdown button.\n   * Will automatically adjust to the document to avoid overflowing.\n   * Defaults to \"bottom\".\n   */\n  placement?: Placement;\n  /**\n   * Controls whether the dropdown will flip its side to keep it in view\n   * in case there isn't enough space available. See https://floating-ui.com/docs/flip\n   * Defaults to false.\n   */\n  flipDisabled?: boolean;\n};\n\nconst DropdownGeneric = ({\n  label,\n  closeOnClickOutside = true,\n  closeOnClickInside = false,\n  disabled = false,\n  placement = \"bottom\",\n  flipDisabled = false,\n  children,\n}: Props) => {\n  const divRef = useRef<HTMLDivElement>(null);\n\n  const [maxHeight, setMaxHeight] = useState<number>();\n  const [maxWidth, setMaxWidth] = useState<number>();\n\n  const [opened, setOpened] = useState(false);\n\n  const handleClickButton = useCallback(() => {\n    if (!disabled) setOpened(!opened);\n  }, [opened, disabled]);\n\n  const handleClickInside = useCallback(() => {\n    if (closeOnClickInside) setOpened(false);\n  }, [setOpened, closeOnClickInside]);\n\n  const { x, y, reference, floating, strategy, update, refs } = useFloating({\n    placement: placements.includes(placement) ? placement : \"bottom\",\n    middleware: [\n      shift(),\n      ...(flipDisabled ? [] : [flip()]),\n      size({\n        padding: 6,\n        apply({ height, width }: { height: number; width: number }) {\n          setMaxHeight(height);\n          setMaxWidth(width);\n        },\n      }),\n    ],\n  });\n\n  const handleResizeOrScroll = useCallback(() => {\n    if (opened && !disabled) update();\n  }, [opened, disabled, update]);\n\n  useEffect(() => {\n    if (!refs.reference.current || !refs.floating.current) {\n      return;\n    }\n    const parents = [\n      ...getScrollParents(refs.reference.current),\n      ...getScrollParents(refs.floating.current),\n    ];\n    parents.forEach(parent => {\n      parent.addEventListener(\"scroll\", handleResizeOrScroll);\n      parent.addEventListener(\"resize\", handleResizeOrScroll);\n    });\n    return () => {\n      parents.forEach(parent => {\n        parent.removeEventListener(\"scroll\", handleResizeOrScroll);\n        parent.removeEventListener(\"resize\", handleResizeOrScroll);\n      });\n    };\n  }, [flipDisabled, refs.reference, refs.floating, handleResizeOrScroll]);\n\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent) {\n      if (\n        closeOnClickOutside &&\n        opened &&\n        divRef.current &&\n        !divRef.current.contains(event.target as Node)\n      ) {\n        setOpened(false);\n      }\n    }\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [closeOnClickOutside, opened, setOpened, divRef]);\n\n  const color = disabled ? \"neutral.c50\" : \"neutral.c100\";\n\n  return (\n    <Box ref={divRef}>\n      <ButtonContainer\n        ref={reference}\n        onClick={handleClickButton}\n        disabled={disabled}\n        opened={opened && !disabled}\n      >\n        <Text variant=\"paragraph\" fontWeight=\"medium\" color={color}>\n          {label}\n        </Text>\n        <IconsLegacy.DropdownMedium size={20} color={color} />\n      </ButtonContainer>\n      {opened && !disabled && (\n        <DropdownContainer\n          ref={floating}\n          style={{\n            position: strategy,\n            top: y ?? \"\",\n            left: x ?? \"\",\n            maxHeight: maxHeight ? `${maxHeight}px` : \"\",\n            maxWidth: maxWidth ? \"\" : \"\",\n            // maxWidth: maxWidth ? `${maxWidth}px` : \"\", /* TODO: fix this */\n          }}\n          onClick={handleClickInside}\n        >\n          {children}\n        </DropdownContainer>\n      )}\n    </Box>\n  );\n};\n\nexport default DropdownGeneric;\n"],
+  "mappings": "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",
   "names": ["import_Flex", "styled", "Box", "Flex", "React", "Text"]
 }

package/lib/cjs/components/form/QrCodeInput/index.js CHANGED Viewed

@@ -34,7 +34,7 @@ module.exports = __toCommonJS(QrCodeInput_exports);
 var import_react = __toESM(require("react"));
 var import_BaseInput = __toESM(require("../BaseInput"));
 var import_Flex = __toESM(require("../../layout/Flex"));
-var import_QrCodeMedium = __toESM(require("@ledgerhq/icons-ui/react/QrCodeMedium"));
+var import_QrCodeMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/QrCodeMedium"));
 var import_styled_components = __toESM(require("styled-components"));
 const QrCodeButton = import_styled_components.default.button`
   display: flex;

package/lib/cjs/components/form/QrCodeInput/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/QrCodeInput/index.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport Input, { InputProps } from \"../BaseInput\";\nimport FlexBox from \"../../layout/Flex\";\nimport QrCodeMedium from \"@ledgerhq/icons-ui/react/QrCodeMedium\";\nimport styled from \"styled-components\";\n\nconst QrCodeButton = styled.button`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  border-width: 0;\n  color: ${p => p.theme.colors.neutral.c00};\n  background-color: ${p => p.theme.colors.neutral.c100};\n  cursor: pointer;\n\n  &:disabled {\n    background-color: ${p => p.theme.colors.neutral.c30};\n    color: ${p => p.theme.colors.neutral.c50};\n    cursor: unset;\n  }\n`;\n\nfunction QrCodeInput(\n  {\n    onQrCodeClick,\n    ...inputProps\n  }: InputProps & { onQrCodeClick?: (e: React.FormEvent<HTMLButtonElement>) => void },\n  ref?: React.ForwardedRef<HTMLInputElement>,\n): JSX.Element {\n  return (\n    <Input\n      ref={ref}\n      {...inputProps}\n      renderRight={\n        <FlexBox alignItems={\"center\"} justifyContent={\"center\"} pr={\"8px\"}>\n          <QrCodeButton onClick={onQrCodeClick} disabled={inputProps.disabled}>\n            <QrCodeMedium size=\"20px\" />\n          </QrCodeButton>\n        </FlexBox>\n      }\n    />\n  );\n}\n\nexport default React.forwardRef(QrCodeInput);\n"],
+  "sourcesContent": ["import React from \"react\";\nimport Input, { InputProps } from \"../BaseInput\";\nimport FlexBox from \"../../layout/Flex\";\nimport QrCodeMedium from \"@ledgerhq/icons-ui/reactLegacy/QrCodeMedium\";\nimport styled from \"styled-components\";\n\nconst QrCodeButton = styled.button`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  border-width: 0;\n  color: ${p => p.theme.colors.neutral.c00};\n  background-color: ${p => p.theme.colors.neutral.c100};\n  cursor: pointer;\n\n  &:disabled {\n    background-color: ${p => p.theme.colors.neutral.c30};\n    color: ${p => p.theme.colors.neutral.c50};\n    cursor: unset;\n  }\n`;\n\nfunction QrCodeInput(\n  {\n    onQrCodeClick,\n    ...inputProps\n  }: InputProps & { onQrCodeClick?: (e: React.FormEvent<HTMLButtonElement>) => void },\n  ref?: React.ForwardedRef<HTMLInputElement>,\n): JSX.Element {\n  return (\n    <Input\n      ref={ref}\n      {...inputProps}\n      renderRight={\n        <FlexBox alignItems={\"center\"} justifyContent={\"center\"} pr={\"8px\"}>\n          <QrCodeButton onClick={onQrCodeClick} disabled={inputProps.disabled}>\n            <QrCodeMedium size=\"20px\" />\n          </QrCodeButton>\n        </FlexBox>\n      }\n    />\n  );\n}\n\nexport default React.forwardRef(QrCodeInput);\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,uBAAkC;AAClC,kBAAoB;AACpB,0BAAyB;AACzB,+BAAmB;AAEnB,MAAM,eAAe,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQjB,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA,sBACjB,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,wBAI1B,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA,aACvC,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAKzC,SAAS,YACP;AAAA,EACE;AAAA,EACA,GAAG;AACL,GACA,KACa;AACb,SACE,6BAAAC,QAAA;AAAA,IAAC,iBAAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACC,GAAG;AAAA,MACJ,aACE,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAQ,YAAY,UAAU,gBAAgB,UAAU,IAAI,SAC3D,6BAAAF,QAAA,cAAC,gBAAa,SAAS,eAAe,UAAU,WAAW,YACzD,6BAAAA,QAAA,cAAC,oBAAAG,SAAA,EAAa,MAAK,QAAO,CAC5B,CACF;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,sBAAQ,aAAAH,QAAM,WAAW,WAAW;",
   "names": ["styled", "React", "Input", "FlexBox", "QrCodeMedium"]
 }

package/lib/cjs/components/form/SearchInput/index.js CHANGED Viewed

@@ -34,7 +34,7 @@ module.exports = __toCommonJS(SearchInput_exports);
 var import_react = __toESM(require("react"));
 var import_styled_components = require("styled-components");
 var import_BaseInput = __toESM(require("../BaseInput"));
-var import_SearchMedium = __toESM(require("@ledgerhq/icons-ui/react/SearchMedium"));
+var import_SearchMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/SearchMedium"));
 function SearchInput(props, ref) {
   const theme = (0, import_styled_components.useTheme)();
   return /* @__PURE__ */ import_react.default.createElement(

package/lib/cjs/components/form/SearchInput/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/SearchInput/index.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport { useTheme } from \"styled-components\";\nimport Input, { InputProps, InputRenderLeftContainer } from \"../BaseInput\";\nimport SearchMedium from \"@ledgerhq/icons-ui/react/SearchMedium\";\n\nfunction SearchInput(props: InputProps, ref?: React.ForwardedRef<HTMLInputElement>): JSX.Element {\n  const theme = useTheme();\n\n  return (\n    <Input\n      ref={ref}\n      {...props}\n      renderLeft={\n        <InputRenderLeftContainer>\n          <SearchMedium\n            color={props.disabled ? theme.colors.neutral.c50 : theme.colors.neutral.c70}\n          />\n        </InputRenderLeftContainer>\n      }\n    />\n  );\n}\n\nexport default React.forwardRef(SearchInput);\n"],
+  "sourcesContent": ["import React from \"react\";\nimport { useTheme } from \"styled-components\";\nimport Input, { InputProps, InputRenderLeftContainer } from \"../BaseInput\";\nimport SearchMedium from \"@ledgerhq/icons-ui/reactLegacy/SearchMedium\";\n\nfunction SearchInput(props: InputProps, ref?: React.ForwardedRef<HTMLInputElement>): JSX.Element {\n  const theme = useTheme();\n\n  return (\n    <Input\n      ref={ref}\n      {...props}\n      renderLeft={\n        <InputRenderLeftContainer>\n          <SearchMedium\n            color={props.disabled ? theme.colors.neutral.c50 : theme.colors.neutral.c70}\n          />\n        </InputRenderLeftContainer>\n      }\n    />\n  );\n}\n\nexport default React.forwardRef(SearchInput);\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAyB;AACzB,uBAA4D;AAC5D,0BAAyB;AAEzB,SAAS,YAAY,OAAmB,KAAyD;AAC/F,QAAM,YAAQ,mCAAS;AAEvB,SACE,6BAAAA,QAAA;AAAA,IAAC,iBAAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACC,GAAG;AAAA,MACJ,YACE,6BAAAD,QAAA,cAAC,iDACC,6BAAAA,QAAA;AAAA,QAAC,oBAAAE;AAAA,QAAA;AAAA,UACC,OAAO,MAAM,WAAW,MAAM,OAAO,QAAQ,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,MAC1E,CACF;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,sBAAQ,aAAAF,QAAM,WAAW,WAAW;",
   "names": ["React", "Input", "SearchMedium"]
 }

package/lib/cjs/components/form/SelectInput/DropdownIndicator.js CHANGED Viewed

@@ -36,7 +36,7 @@ var import_react = __toESM(require("react"));
 var import_react_select = require("react-select");
 var import_styled_components = require("styled-components");
 var import_Text = __toESM(require("../../asorted/Text"));
-var import_react2 = require("@ledgerhq/icons-ui/react");
+var import_reactLegacy = require("@ledgerhq/icons-ui/reactLegacy");
 function getStyles() {
   return (provided) => ({
     ...provided,
@@ -46,7 +46,7 @@ function getStyles() {
 function DropdownIndicator(props) {
   const theme = (0, import_styled_components.useTheme)();
   const { isDisabled } = props.selectProps;
-  const ChevronIcon = props.selectProps.menuIsOpen ? import_react2.ChevronTopMedium : import_react2.ChevronBottomMedium;
+  const ChevronIcon = props.selectProps.menuIsOpen ? import_reactLegacy.ChevronTopMedium : import_reactLegacy.ChevronBottomMedium;
   const color = isDisabled ? theme.colors.neutral.c60 : theme.colors.neutral.c100;
   return /* @__PURE__ */ import_react.default.createElement(import_react_select.components.DropdownIndicator, { ...props }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { as: "div", color, style: { display: "flex" } }, /* @__PURE__ */ import_react.default.createElement(ChevronIcon, { size: 12 })));
 }

package/lib/cjs/components/form/SelectInput/DropdownIndicator.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/SelectInput/DropdownIndicator.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport { components, GroupBase, StylesConfig, DropdownIndicatorProps } from \"react-select\";\nimport { useTheme } from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport { ChevronBottomMedium, ChevronTopMedium } from \"@ledgerhq/icons-ui/react\";\n\nexport function getStyles<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(): NonNullable<StylesConfig<O, M, G>[\"dropdownIndicator\"]> {\n  return provided => ({\n    ...provided,\n    padding: 0,\n  });\n}\n\nexport function DropdownIndicator<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(props: DropdownIndicatorProps<O, M, G>): JSX.Element {\n  const theme = useTheme();\n  const { isDisabled } = props.selectProps;\n\n  const ChevronIcon = props.selectProps.menuIsOpen ? ChevronTopMedium : ChevronBottomMedium;\n  const color = isDisabled ? theme.colors.neutral.c60 : theme.colors.neutral.c100;\n\n  return (\n    <components.DropdownIndicator {...props}>\n      <Text as=\"div\" color={color} style={{ display: \"flex\" }}>\n        <ChevronIcon size={12} />\n      </Text>\n    </components.DropdownIndicator>\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,0BAA4E;AAC5E,+BAAyB;AACzB,kBAAiB;AACjB,IAAAA,gBAAsD;AAE/C,SAAS,YAI6C;AAC3D,SAAO,eAAa;AAAA,IAClB,GAAG;AAAA,IACH,SAAS;AAAA,EACX;AACF;AAEO,SAAS,kBAId,OAAqD;AACrD,QAAM,YAAQ,mCAAS;AACvB,QAAM,EAAE,WAAW,IAAI,MAAM;AAE7B,QAAM,cAAc,MAAM,YAAY,aAAa,iCAAmB;AACtE,QAAM,QAAQ,aAAa,MAAM,OAAO,QAAQ,MAAM,MAAM,OAAO,QAAQ;AAE3E,SACE,6BAAAC,QAAA,cAAC,+BAAW,mBAAX,EAA8B,GAAG,SAChC,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAK,IAAG,OAAM,OAAc,OAAO,EAAE,SAAS,OAAO,KACpD,6BAAAD,QAAA,cAAC,eAAY,MAAM,IAAI,CACzB,CACF;AAEJ;",
-  "names": ["import_react", "React", "Text"]
+  "sourcesContent": ["import React from \"react\";\nimport { components, GroupBase, StylesConfig, DropdownIndicatorProps } from \"react-select\";\nimport { useTheme } from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport { ChevronBottomMedium, ChevronTopMedium } from \"@ledgerhq/icons-ui/reactLegacy\";\n\nexport function getStyles<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(): NonNullable<StylesConfig<O, M, G>[\"dropdownIndicator\"]> {\n  return provided => ({\n    ...provided,\n    padding: 0,\n  });\n}\n\nexport function DropdownIndicator<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(props: DropdownIndicatorProps<O, M, G>): JSX.Element {\n  const theme = useTheme();\n  const { isDisabled } = props.selectProps;\n\n  const ChevronIcon = props.selectProps.menuIsOpen ? ChevronTopMedium : ChevronBottomMedium;\n  const color = isDisabled ? theme.colors.neutral.c60 : theme.colors.neutral.c100;\n\n  return (\n    <components.DropdownIndicator {...props}>\n      <Text as=\"div\" color={color} style={{ display: \"flex\" }}>\n        <ChevronIcon size={12} />\n      </Text>\n    </components.DropdownIndicator>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,0BAA4E;AAC5E,+BAAyB;AACzB,kBAAiB;AACjB,yBAAsD;AAE/C,SAAS,YAI6C;AAC3D,SAAO,eAAa;AAAA,IAClB,GAAG;AAAA,IACH,SAAS;AAAA,EACX;AACF;AAEO,SAAS,kBAId,OAAqD;AACrD,QAAM,YAAQ,mCAAS;AACvB,QAAM,EAAE,WAAW,IAAI,MAAM;AAE7B,QAAM,cAAc,MAAM,YAAY,aAAa,sCAAmB;AACtE,QAAM,QAAQ,aAAa,MAAM,OAAO,QAAQ,MAAM,MAAM,OAAO,QAAQ;AAE3E,SACE,6BAAAA,QAAA,cAAC,+BAAW,mBAAX,EAA8B,GAAG,SAChC,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAK,IAAG,OAAM,OAAc,OAAO,EAAE,SAAS,OAAO,KACpD,6BAAAD,QAAA,cAAC,eAAY,MAAM,IAAI,CACzB,CACF;AAEJ;",
+  "names": ["React", "Text"]
 }

package/lib/cjs/components/form/SelectInput/Select.stories.js CHANGED Viewed

@@ -43,7 +43,7 @@ var import_styled_components = require("styled-components");
 var import_Text = __toESM(require("../../asorted/Text"));
 var import_Flex = __toESM(require("../../layout/Flex"));
 var import_Grid = __toESM(require("../../layout/Grid"));
-var import_SearchMedium = __toESM(require("@ledgerhq/icons-ui/react/SearchMedium"));
+var import_SearchMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/SearchMedium"));
 var import_index = __toESM(require("./index"));
 var import_Option = require("./Option");
 var import_VirtualMenuList = require("./VirtualMenuList");