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

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

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

Files changed (198) hide show

package/lib/cjs/components/cards/Carousel/index.js CHANGED Viewed

@@ -133,10 +133,7 @@ const Carousel = ({
   const [index, setIndex] = (0, import_react.useState)(0);
   const [wantToDismiss, setWantToDismiss] = (0, import_react.useState)(false);
   const [paused, setPaused] = (0, import_react.useState)(false);
-  const childFactory = (0, import_react.useCallback)(
-    (child) => import_react.default.cloneElement(child, { direction }),
-    [direction]
-  );
+  const childFactory = (0, import_react.useCallback)((child) => import_react.default.cloneElement(child, { direction }), [direction]);
   const wrappedSetIndex = (0, import_react.useCallback)(
     (newIndex) => {
       setDirection(newIndex > index ? "left" : "right");

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/cards/Carousel/index.tsx"],
-  "sourcesContent": ["import React, { useRef, useCallback, useState, useEffect } from \"react\";\nimport styled from \"styled-components\";\nimport { TransitionGroup } from \"react-transition-group\";\nimport TransitionSlide from \"../../transitions/TransitionSlide\";\n\nimport Button from \"../../cta/Button\";\nimport Text from \"../../asorted/Text\";\nimport Flex from \"../../layout/Flex\";\nimport Slide, { Props as SlideProps } from \"./Slide\";\n\nimport IconLeft from \"@ledgerhq/icons-ui/react/ArrowLeftMedium\";\nimport IconRight from \"@ledgerhq/icons-ui/react/ArrowRightMedium\";\nimport IconClose from \"@ledgerhq/icons-ui/react/CloseMedium\";\n\nconst CarouselWrapper = styled.div`\n  width: 100%;\n  height: 180px;\n  border-radius: 8px;\n  overflow: hidden;\n  cursor: pointer;\n  position: relative;\n  flex: 1;\n  background: ${(p) => p.theme.colors.neutral.c100};\n`;\n\nconst Controllers = styled(Flex)`\n  position: absolute;\n  flex-direction: row;\n  right: ${(p) => p.theme.space[5]}px;\n  bottom: ${(p) => p.theme.space[4]}px;\n  column-gap: ${(p) => p.theme.space[4]}px;\n  color: ${(p) => p.theme.colors.neutral.c00};\n\n  > div {\n    &:hover {\n      opacity: 0.5;\n    }\n  }\n`;\n\nconst Bullets = styled.div<{ active?: number }>`\n  position: absolute;\n  display: flex;\n  left: ${(p) => p.theme.space[10]}px;\n  bottom: ${(p) => p.theme.space[8]}px;\n  column-gap: ${(p) => p.theme.space[2]}px;\n  flex-direction: row;\n\n  > div {\n    position: relative;\n    height: ${(p) => p.theme.space[1]}px;\n    width: ${(p) => p.theme.space[8]}px;\n    background: ${(p) => p.theme.colors.neutral.c00};\n    opacity: 0.5;\n    &:hover {\n      opacity: 0.75;\n    }\n\n    &:nth-child(${(p) => p.active}) {\n      opacity: 1;\n      &:hover {\n        opacity: 0.75;\n      }\n    }\n\n    ::after {\n      content: \"\";\n      position: absolute;\n      top: -${(p) => p.theme.space[4]}px;\n      height: ${(p) => p.theme.space[7]}px;\n      width: 100%;\n    }\n  }\n`;\n\nconst Close = styled.div`\n  position: absolute;\n  top: ${(p) => p.theme.space[7]}px;\n  right: ${(p) => p.theme.space[5]}px;\n  color: ${(p) => p.theme.colors.neutral.c00};\n  &:hover {\n    opacity: 0.5;\n  }\n`;\n\nconst DismissWrapper = styled.div`\n  color: white;\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  flex-direction: column;\n  padding: ${(p) => p.theme.space[13]}px;\n  row-gap: ${(p) => p.theme.space[7]}px;\n`;\n\nexport type Props = {\n  timeout?: number;\n  queue: SlideProps[];\n  isDismissed: boolean;\n  onDismiss: () => void;\n  dismissText?: React.ReactNode;\n  dismissConfirmText?: React.ReactNode;\n  dismissCancelText?: React.ReactNode;\n};\n\nconst DEFAULT_TIMEOUT = 7000;\nconst Carousel = ({\n  timeout = DEFAULT_TIMEOUT,\n  queue,\n  isDismissed,\n  onDismiss,\n  dismissText = \"This banner will not show up again until there is a new announcement\",\n  dismissConfirmText = \"Confirm\",\n  dismissCancelText = \"Show again\",\n}: Props): React.ReactElement | null => {\n  const intervalRef = useRef<ReturnType<typeof setInterval>>();\n\n  const [direction, setDirection] = useState(\"right\");\n  const [index, setIndex] = useState(0);\n  const [wantToDismiss, setWantToDismiss] = useState(false);\n  const [paused, setPaused] = useState(false);\n  const childFactory = useCallback(\n    (child) => React.cloneElement(child, { direction }),\n    [direction],\n  );\n\n  const wrappedSetIndex = useCallback(\n    (newIndex) => {\n      setDirection(newIndex > index ? \"left\" : \"right\");\n      setIndex(newIndex);\n    },\n    [index],\n  );\n\n  const onSlide = useCallback(\n    (direction = \"left\") => {\n      setDirection(direction);\n      const i = index + (direction === \"right\" ? -1 : 1);\n      setIndex(i < 0 ? queue.length - 1 : i >= queue.length ? 0 : i);\n    },\n    [index, queue],\n  );\n  const onPrevious = useCallback(() => onSlide(\"right\"), [onSlide]);\n  const onNext = useCallback(() => onSlide(\"left\"), [onSlide]);\n\n  const onWantToDismiss = () => setWantToDismiss(true);\n  const onCancelDismiss = () => setWantToDismiss(false);\n\n  const onMouseEnter = () => setPaused(true);\n  const onMouseLeave = () => setPaused(false);\n\n  useEffect(() => {\n    // Nb we pause automatic transitions when the mouse is within the carousel.\n    // Override passed timeout if lower than 1000ms\n    const _timeout = timeout < 1000 ? DEFAULT_TIMEOUT : timeout;\n    if (intervalRef.current) clearInterval(intervalRef.current);\n    if (!paused) intervalRef.current = setInterval(onSlide, _timeout);\n  }, [onSlide, paused, timeout]);\n\n  useEffect(() => {\n    if (isDismissed) setWantToDismiss(false);\n  }, [isDismissed]);\n\n  if (!queue?.length || isDismissed) return null;\n\n  return (\n    <CarouselWrapper id={\"carousel\"} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>\n      {wantToDismiss ? (\n        <DismissWrapper>\n          <Text color=\"neutral.c00\" fontWeight=\"medium\" variant={\"paragraph\"}>\n            {dismissText}\n          </Text>\n          <Flex columnGap={5}>\n            <Button color=\"neutral.c100\" backgroundColor=\"neutral.c00\" onClick={onDismiss}>\n              {dismissConfirmText}\n            </Button>\n            <Button\n              outline\n              color=\"neutral.c00\"\n              backgroundColor=\"neutral.c100\"\n              borderColor=\"neutral.c00\"\n              onClick={onCancelDismiss}\n            >\n              {dismissCancelText}\n            </Button>\n          </Flex>\n        </DismissWrapper>\n      ) : (\n        <div>\n          <TransitionGroup component={null} childFactory={childFactory}>\n            <TransitionSlide key={index} direction={direction}>\n              <Slide {...queue[index]} />\n            </TransitionSlide>\n          </TransitionGroup>\n\n          <Close id={\"carousel-dismiss\"} onClick={onWantToDismiss}>\n            <IconClose size={18} />\n          </Close>\n\n          <Bullets active={index + 1}>\n            {queue.map((_, i) => (\n              <div key={`bullet_${i}`} onClick={() => wrappedSetIndex(i)} />\n            ))}\n          </Bullets>\n\n          <Controllers>\n            <div onClick={onPrevious}>\n              <IconLeft size={20} />\n            </div>\n            <div onClick={onNext}>\n              <IconRight size={20} />\n            </div>\n          </Controllers>\n        </div>\n      )}\n    </CarouselWrapper>\n  );\n};\n\nexport default Carousel;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useRef, useCallback, useState, useEffect } from \"react\";\nimport styled from \"styled-components\";\nimport { TransitionGroup } from \"react-transition-group\";\nimport TransitionSlide from \"../../transitions/TransitionSlide\";\n\nimport Button from \"../../cta/Button\";\nimport Text from \"../../asorted/Text\";\nimport Flex from \"../../layout/Flex\";\nimport Slide, { Props as SlideProps } from \"./Slide\";\n\nimport IconLeft from \"@ledgerhq/icons-ui/react/ArrowLeftMedium\";\nimport IconRight from \"@ledgerhq/icons-ui/react/ArrowRightMedium\";\nimport IconClose from \"@ledgerhq/icons-ui/react/CloseMedium\";\n\nconst CarouselWrapper = styled.div`\n  width: 100%;\n  height: 180px;\n  border-radius: 8px;\n  overflow: hidden;\n  cursor: pointer;\n  position: relative;\n  flex: 1;\n  background: ${p => p.theme.colors.neutral.c100};\n`;\n\nconst Controllers = styled(Flex)`\n  position: absolute;\n  flex-direction: row;\n  right: ${p => p.theme.space[5]}px;\n  bottom: ${p => p.theme.space[4]}px;\n  column-gap: ${p => p.theme.space[4]}px;\n  color: ${p => p.theme.colors.neutral.c00};\n\n  > div {\n    &:hover {\n      opacity: 0.5;\n    }\n  }\n`;\n\nconst Bullets = styled.div<{ active?: number }>`\n  position: absolute;\n  display: flex;\n  left: ${p => p.theme.space[10]}px;\n  bottom: ${p => p.theme.space[8]}px;\n  column-gap: ${p => p.theme.space[2]}px;\n  flex-direction: row;\n\n  > div {\n    position: relative;\n    height: ${p => p.theme.space[1]}px;\n    width: ${p => p.theme.space[8]}px;\n    background: ${p => p.theme.colors.neutral.c00};\n    opacity: 0.5;\n    &:hover {\n      opacity: 0.75;\n    }\n\n    &:nth-child(${p => p.active}) {\n      opacity: 1;\n      &:hover {\n        opacity: 0.75;\n      }\n    }\n\n    ::after {\n      content: \"\";\n      position: absolute;\n      top: -${p => p.theme.space[4]}px;\n      height: ${p => p.theme.space[7]}px;\n      width: 100%;\n    }\n  }\n`;\n\nconst Close = styled.div`\n  position: absolute;\n  top: ${p => p.theme.space[7]}px;\n  right: ${p => p.theme.space[5]}px;\n  color: ${p => p.theme.colors.neutral.c00};\n  &:hover {\n    opacity: 0.5;\n  }\n`;\n\nconst DismissWrapper = styled.div`\n  color: white;\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  flex-direction: column;\n  padding: ${p => p.theme.space[13]}px;\n  row-gap: ${p => p.theme.space[7]}px;\n`;\n\nexport type Props = {\n  timeout?: number;\n  queue: SlideProps[];\n  isDismissed: boolean;\n  onDismiss: () => void;\n  dismissText?: React.ReactNode;\n  dismissConfirmText?: React.ReactNode;\n  dismissCancelText?: React.ReactNode;\n};\n\nconst DEFAULT_TIMEOUT = 7000;\nconst Carousel = ({\n  timeout = DEFAULT_TIMEOUT,\n  queue,\n  isDismissed,\n  onDismiss,\n  dismissText = \"This banner will not show up again until there is a new announcement\",\n  dismissConfirmText = \"Confirm\",\n  dismissCancelText = \"Show again\",\n}: Props): React.ReactElement | null => {\n  const intervalRef = useRef<ReturnType<typeof setInterval>>();\n\n  const [direction, setDirection] = useState(\"right\");\n  const [index, setIndex] = useState(0);\n  const [wantToDismiss, setWantToDismiss] = useState(false);\n  const [paused, setPaused] = useState(false);\n  const childFactory = useCallback(child => React.cloneElement(child, { direction }), [direction]);\n\n  const wrappedSetIndex = useCallback(\n    newIndex => {\n      setDirection(newIndex > index ? \"left\" : \"right\");\n      setIndex(newIndex);\n    },\n    [index],\n  );\n\n  const onSlide = useCallback(\n    (direction = \"left\") => {\n      setDirection(direction);\n      const i = index + (direction === \"right\" ? -1 : 1);\n      setIndex(i < 0 ? queue.length - 1 : i >= queue.length ? 0 : i);\n    },\n    [index, queue],\n  );\n  const onPrevious = useCallback(() => onSlide(\"right\"), [onSlide]);\n  const onNext = useCallback(() => onSlide(\"left\"), [onSlide]);\n\n  const onWantToDismiss = () => setWantToDismiss(true);\n  const onCancelDismiss = () => setWantToDismiss(false);\n\n  const onMouseEnter = () => setPaused(true);\n  const onMouseLeave = () => setPaused(false);\n\n  useEffect(() => {\n    // Nb we pause automatic transitions when the mouse is within the carousel.\n    // Override passed timeout if lower than 1000ms\n    const _timeout = timeout < 1000 ? DEFAULT_TIMEOUT : timeout;\n    if (intervalRef.current) clearInterval(intervalRef.current);\n    if (!paused) intervalRef.current = setInterval(onSlide, _timeout);\n  }, [onSlide, paused, timeout]);\n\n  useEffect(() => {\n    if (isDismissed) setWantToDismiss(false);\n  }, [isDismissed]);\n\n  if (!queue?.length || isDismissed) return null;\n\n  return (\n    <CarouselWrapper id={\"carousel\"} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>\n      {wantToDismiss ? (\n        <DismissWrapper>\n          <Text color=\"neutral.c00\" fontWeight=\"medium\" variant={\"paragraph\"}>\n            {dismissText}\n          </Text>\n          <Flex columnGap={5}>\n            <Button color=\"neutral.c100\" backgroundColor=\"neutral.c00\" onClick={onDismiss}>\n              {dismissConfirmText}\n            </Button>\n            <Button\n              outline\n              color=\"neutral.c00\"\n              backgroundColor=\"neutral.c100\"\n              borderColor=\"neutral.c00\"\n              onClick={onCancelDismiss}\n            >\n              {dismissCancelText}\n            </Button>\n          </Flex>\n        </DismissWrapper>\n      ) : (\n        <div>\n          <TransitionGroup component={null} childFactory={childFactory}>\n            <TransitionSlide key={index} direction={direction}>\n              <Slide {...queue[index]} />\n            </TransitionSlide>\n          </TransitionGroup>\n\n          <Close id={\"carousel-dismiss\"} onClick={onWantToDismiss}>\n            <IconClose size={18} />\n          </Close>\n\n          <Bullets active={index + 1}>\n            {queue.map((_, i) => (\n              <div key={`bullet_${i}`} onClick={() => wrappedSetIndex(i)} />\n            ))}\n          </Bullets>\n\n          <Controllers>\n            <div onClick={onPrevious}>\n              <IconLeft size={20} />\n            </div>\n            <div onClick={onNext}>\n              <IconRight size={20} />\n            </div>\n          </Controllers>\n        </div>\n      )}\n    </CarouselWrapper>\n  );\n};\n\nexport default Carousel;\n"],
+  "mappings": "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",
   "names": ["styled", "Flex", "React", "direction", "Text", "Button", "TransitionSlide", "Slide", "IconClose", "IconLeft", "IconRight"]
 }

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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",
+  "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"]
 }

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"],
-  "mappings": "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",
+  "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"],
+  "mappings": "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",
   "names": ["styled", "baseStyled", "fontFamily", "React", "ChevronBottom", "expanded"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/cta/Link/index.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { getLinkColors } from \"./getLinkStyle\";\nimport { ctaIconSize, ctaTextType } from \"../getCtaStyle\";\nimport { Text } from \"../../asorted\";\nimport { TextProps } from \"../../asorted/Text\";\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\n\nexport type LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &\n  BaseStyledProps & {\n    /**\n     * Component that takes `{size: number; color?: string}` as props\n     */\n    Icon?: React.ComponentType<{ size: number; color?: string }>;\n    /**\n     * Affects the colors of the text, icon & underline, can be overriden by the `color` prop\n     */\n    type?: \"main\" | \"shade\" | \"color\";\n    /**\n     * Affect the font variant & icon size\n     */\n    size?: \"small\" | \"medium\" | \"large\";\n    /**\n     * Color of the link, overrides colors defined by the `type` prop\n     */\n    color?: string;\n    /**\n     * Props passed to the rendered text\n     */\n    textProps?: TextProps;\n    /**\n     * If true text will always be underlined, else it will be underlined only on hover\n     */\n    alwaysUnderline?: boolean;\n    /**\n     * Position of the icon relative to the text\n     */\n    iconPosition?: \"right\" | \"left\";\n    disabled?: boolean;\n    children?: React.ReactNode;\n  };\n\nexport const DEFAULT_ICON_POSITION = \"right\";\nexport const DEFAULT_SIZE = \"medium\";\nexport const DEFAULT_TYPE = \"main\";\n\nconst IconContainer = styled.div<{\n  iconPosition: \"right\" | \"left\";\n  iconLink?: boolean;\n}>`\n  ${(p) =>\n    p.iconLink ? \"\" : p.iconPosition === \"left\" ? `margin-right: 6px;` : `margin-left: 6px;`}\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const Base = baseStyled.a<LinkProps>`\n  color: ${({ color, theme, disabled, type = \"main\" }) =>\n    color || getLinkColors(theme.colors)[disabled ? \"disabled\" : type][\"default\"]};\n  cursor: pointer;\n  display: inline-flex;\n  flex-direction: row;\n  text-align: center;\n  align-items: center;\n  justify-content: center;\n\n  :hover {\n    text-decoration: underline;\n  }\n  :active {\n    color: ${({ color, theme, type = \"main\" }) =>\n      color || getLinkColors(theme.colors)[type][\"pressed\"]};\n    text-decoration: underline;\n  }\n\n  text-decoration: ${(p) => (p.alwaysUnderline ? \"underline\" : \"none\")};\n\n`;\n\nconst LinkContainer = ({\n  Icon,\n  iconPosition = DEFAULT_ICON_POSITION,\n  children,\n  color,\n  size = DEFAULT_SIZE,\n  textProps,\n}: LinkProps): React.ReactElement => {\n  const text = (\n    <Text\n      variant={ctaTextType[size]}\n      fontWeight=\"semiBold\"\n      color={color || \"inherit\"}\n      {...textProps}\n    >\n      {children}\n    </Text>\n  );\n\n  return (\n    <>\n      {iconPosition === \"right\" && children ? text : null}\n      {Icon ? (\n        <IconContainer iconLink={!children} iconPosition={iconPosition}>\n          <Icon size={ctaIconSize[size]} color={color || \"currentcolor\"} />\n        </IconContainer>\n      ) : null}\n      {iconPosition === \"left\" && children ? text : null}\n    </>\n  );\n};\n\nconst Link = (props: LinkProps): React.ReactElement => {\n  const { type = DEFAULT_TYPE, size = DEFAULT_SIZE, color } = props;\n  return (\n    <Base color={color} {...props}>\n      <LinkContainer {...props} type={type} size={size} />\n    </Base>\n  );\n};\n\nexport default Link;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,0BAA8B;AAC9B,yBAAyC;AACzC,qBAAqB;AAErB,oBAA4C;AAoCrC,MAAM,wBAAwB;AAC9B,MAAM,eAAe;AACrB,MAAM,eAAe;AAE5B,MAAM,gBAAgB,yBAAAA,QAAO;AAAA,IAIzB,CAAC,MACD,EAAE,WAAW,KAAK,EAAE,iBAAiB,SAAS,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAMlE,MAAM,OAAO,cAAAC,QAAW;AAAA,WACpB,CAAC,EAAE,OAAO,OAAO,UAAU,OAAO,OAAO,MAChD,aAAS,mCAAc,MAAM,MAAM,EAAE,WAAW,aAAa,IAAI,EAAE,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAYnE,CAAC,EAAE,OAAO,OAAO,OAAO,OAAO,MACtC,aAAS,mCAAc,MAAM,MAAM,EAAE,IAAI,EAAE,SAAS;AAAA;AAAA;AAAA;AAAA,qBAIrC,CAAC,MAAO,EAAE,kBAAkB,cAAc;AAAA;AAAA;AAI/D,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,MAAqC;AACnC,QAAM,OACJ,6BAAAC,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,+BAAY,IAAI;AAAA,MACzB,YAAW;AAAA,MACX,OAAO,SAAS;AAAA,MACf,GAAG;AAAA;AAAA,IAEH;AAAA,EACH;AAGF,SACE,6BAAAA,QAAA,2BAAAA,QAAA,gBACG,iBAAiB,WAAW,WAAW,OAAO,MAC9C,OACC,6BAAAA,QAAA,cAAC,iBAAc,UAAU,CAAC,UAAU,gBAClC,6BAAAA,QAAA,cAAC,QAAK,MAAM,+BAAY,IAAI,GAAG,OAAO,SAAS,gBAAgB,CACjE,IACE,MACH,iBAAiB,UAAU,WAAW,OAAO,IAChD;AAEJ;AAEA,MAAM,OAAO,CAAC,UAAyC;AACrD,QAAM,EAAE,OAAO,cAAc,OAAO,cAAc,MAAM,IAAI;AAC5D,SACE,6BAAAA,QAAA,cAAC,QAAK,OAAe,GAAG,SACtB,6BAAAA,QAAA,cAAC,iBAAe,GAAG,OAAO,MAAY,MAAY,CACpD;AAEJ;AAEA,IAAO,eAAQ;",
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { getLinkColors } from \"./getLinkStyle\";\nimport { ctaIconSize, ctaTextType } from \"../getCtaStyle\";\nimport { Text } from \"../../asorted\";\nimport { TextProps } from \"../../asorted/Text\";\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\n\nexport type LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &\n  BaseStyledProps & {\n    /**\n     * Component that takes `{size: number; color?: string}` as props\n     */\n    Icon?: React.ComponentType<{ size: number; color?: string }>;\n    /**\n     * Affects the colors of the text, icon & underline, can be overriden by the `color` prop\n     */\n    type?: \"main\" | \"shade\" | \"color\";\n    /**\n     * Affect the font variant & icon size\n     */\n    size?: \"small\" | \"medium\" | \"large\";\n    /**\n     * Color of the link, overrides colors defined by the `type` prop\n     */\n    color?: string;\n    /**\n     * Props passed to the rendered text\n     */\n    textProps?: TextProps;\n    /**\n     * If true text will always be underlined, else it will be underlined only on hover\n     */\n    alwaysUnderline?: boolean;\n    /**\n     * Position of the icon relative to the text\n     */\n    iconPosition?: \"right\" | \"left\";\n    disabled?: boolean;\n    children?: React.ReactNode;\n  };\n\nexport const DEFAULT_ICON_POSITION = \"right\";\nexport const DEFAULT_SIZE = \"medium\";\nexport const DEFAULT_TYPE = \"main\";\n\nconst IconContainer = styled.div<{\n  iconPosition: \"right\" | \"left\";\n  iconLink?: boolean;\n}>`\n  ${p => (p.iconLink ? \"\" : p.iconPosition === \"left\" ? `margin-right: 6px;` : `margin-left: 6px;`)}\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const Base = baseStyled.a<LinkProps>`\n  color: ${({ color, theme, disabled, type = \"main\" }) =>\n    color || getLinkColors(theme.colors)[disabled ? \"disabled\" : type][\"default\"]};\n  cursor: pointer;\n  display: inline-flex;\n  flex-direction: row;\n  text-align: center;\n  align-items: center;\n  justify-content: center;\n\n  :hover {\n    text-decoration: underline;\n  }\n  :active {\n    color: ${({ color, theme, type = \"main\" }) =>\n      color || getLinkColors(theme.colors)[type][\"pressed\"]};\n    text-decoration: underline;\n  }\n\n  text-decoration: ${p => (p.alwaysUnderline ? \"underline\" : \"none\")};\n\n`;\n\nconst LinkContainer = ({\n  Icon,\n  iconPosition = DEFAULT_ICON_POSITION,\n  children,\n  color,\n  size = DEFAULT_SIZE,\n  textProps,\n}: LinkProps): React.ReactElement => {\n  const text = (\n    <Text\n      variant={ctaTextType[size]}\n      fontWeight=\"semiBold\"\n      color={color || \"inherit\"}\n      {...textProps}\n    >\n      {children}\n    </Text>\n  );\n\n  return (\n    <>\n      {iconPosition === \"right\" && children ? text : null}\n      {Icon ? (\n        <IconContainer iconLink={!children} iconPosition={iconPosition}>\n          <Icon size={ctaIconSize[size]} color={color || \"currentcolor\"} />\n        </IconContainer>\n      ) : null}\n      {iconPosition === \"left\" && children ? text : null}\n    </>\n  );\n};\n\nconst Link = (props: LinkProps): React.ReactElement => {\n  const { type = DEFAULT_TYPE, size = DEFAULT_SIZE, color } = props;\n  return (\n    <Base color={color} {...props}>\n      <LinkContainer {...props} type={type} size={size} />\n    </Base>\n  );\n};\n\nexport default Link;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,0BAA8B;AAC9B,yBAAyC;AACzC,qBAAqB;AAErB,oBAA4C;AAoCrC,MAAM,wBAAwB;AAC9B,MAAM,eAAe;AACrB,MAAM,eAAe;AAE5B,MAAM,gBAAgB,yBAAAA,QAAO;AAAA,IAIzB,OAAM,EAAE,WAAW,KAAK,EAAE,iBAAiB,SAAS,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAMxE,MAAM,OAAO,cAAAC,QAAW;AAAA,WACpB,CAAC,EAAE,OAAO,OAAO,UAAU,OAAO,OAAO,MAChD,aAAS,mCAAc,MAAM,MAAM,EAAE,WAAW,aAAa,IAAI,EAAE,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAYnE,CAAC,EAAE,OAAO,OAAO,OAAO,OAAO,MACtC,aAAS,mCAAc,MAAM,MAAM,EAAE,IAAI,EAAE,SAAS;AAAA;AAAA;AAAA;AAAA,qBAIrC,OAAM,EAAE,kBAAkB,cAAc;AAAA;AAAA;AAI7D,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,MAAqC;AACnC,QAAM,OACJ,6BAAAC,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,+BAAY,IAAI;AAAA,MACzB,YAAW;AAAA,MACX,OAAO,SAAS;AAAA,MACf,GAAG;AAAA;AAAA,IAEH;AAAA,EACH;AAGF,SACE,6BAAAA,QAAA,2BAAAA,QAAA,gBACG,iBAAiB,WAAW,WAAW,OAAO,MAC9C,OACC,6BAAAA,QAAA,cAAC,iBAAc,UAAU,CAAC,UAAU,gBAClC,6BAAAA,QAAA,cAAC,QAAK,MAAM,+BAAY,IAAI,GAAG,OAAO,SAAS,gBAAgB,CACjE,IACE,MACH,iBAAiB,UAAU,WAAW,OAAO,IAChD;AAEJ;AAEA,MAAM,OAAO,CAAC,UAAyC;AACrD,QAAM,EAAE,OAAO,cAAc,OAAO,cAAc,MAAM,IAAI;AAC5D,SACE,6BAAAA,QAAA,cAAC,QAAK,OAAe,GAAG,SACtB,6BAAAA,QAAA,cAAC,iBAAe,GAAG,OAAO,MAAY,MAAY,CACpD;AAEJ;AAEA,IAAO,eAAQ;",
   "names": ["styled", "baseStyled", "React"]
 }

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"],
-  "mappings": "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",
+  "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"],
+  "mappings": "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",
   "names": ["styled", "p", "Text", "FlexBox", "React", "CircledCrossSolidMedium"]
 }

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"],
-  "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,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA,eAG7B,CAAC,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA,YACzB,CAAC,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA,sBAEZ,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAU/C,CAAC,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA,cACrB,CAAC,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA,aAEvB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,gDAEH;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,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,IAG7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASJ,MAAM,YAAY,yBAAAD,QAAO;AAAA;AAAA,oCAEW,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,gBAG1D,CAAC,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKX,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,2BAItC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,2BAItC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA,2BAIpC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAcjE,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;",
+  "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"],
+  "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/Dropdown.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/Dropdown/Dropdown.stories.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport DropdownComponent, { Props as DropdownProps } from \".\";\n\nexport default {\n  title: \"Form/SelectAndDialogs/Dropdown\",\n  component: DropdownComponent,\n  argTypes: {\n    value: { table: { disable: true } },\n    renderLeft: { table: { disable: true } },\n    renderRight: { table: { disable: true } },\n    rowHeight: { table: { disable: true } },\n    isDisabled: { type: \"boolean\" },\n    error: { type: \"string\" },\n    menuIsOpen: { type: \"boolean\" },\n    label: { type: \"string\", defaultValue: \"Label\" },\n  },\n};\n\nconst options = [\n  { value: \"chocolate\", label: \"Chocolate\" },\n  { value: \"strawberry\", label: \"Strawberry\" },\n  { value: \"lemon\", label: \"Lemon\" },\n  { value: \"vanilla\", label: \"Vanilla\" },\n];\ntype Option = typeof options[0];\n\nexport const Dropdown = (args: DropdownProps<Option>): React.ReactNode => {\n  const [value, setValue] = React.useState<Option | null>(null);\n\n  return (\n    <DropdownComponent\n      options={options}\n      value={value}\n      onChange={setValue}\n      menuPortalTarget={document.body}\n      {...args}\n    />\n  );\n};\n"],
+  "sourcesContent": ["import React from \"react\";\nimport DropdownComponent, { Props as DropdownProps } from \".\";\n\nexport default {\n  title: \"Form/SelectAndDialogs/Dropdown\",\n  component: DropdownComponent,\n  argTypes: {\n    value: { table: { disable: true } },\n    renderLeft: { table: { disable: true } },\n    renderRight: { table: { disable: true } },\n    rowHeight: { table: { disable: true } },\n    isDisabled: { type: \"boolean\" },\n    error: { type: \"string\" },\n    menuIsOpen: { type: \"boolean\" },\n    label: { type: \"string\", defaultValue: \"Label\" },\n  },\n};\n\nconst options = [\n  { value: \"chocolate\", label: \"Chocolate\" },\n  { value: \"strawberry\", label: \"Strawberry\" },\n  { value: \"lemon\", label: \"Lemon\" },\n  { value: \"vanilla\", label: \"Vanilla\" },\n];\ntype Option = (typeof options)[0];\n\nexport const Dropdown = (args: DropdownProps<Option>): React.ReactNode => {\n  const [value, setValue] = React.useState<Option | null>(null);\n\n  return (\n    <DropdownComponent\n      options={options}\n      value={value}\n      onChange={setValue}\n      menuPortalTarget={document.body}\n      {...args}\n    />\n  );\n};\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,eAA0D;AAE1D,IAAO,2BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,SAAAA;AAAA,EACX,UAAU;AAAA,IACR,OAAO,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IAClC,YAAY,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IACvC,aAAa,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IACxC,WAAW,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IACtC,YAAY,EAAE,MAAM,UAAU;AAAA,IAC9B,OAAO,EAAE,MAAM,SAAS;AAAA,IACxB,YAAY,EAAE,MAAM,UAAU;AAAA,IAC9B,OAAO,EAAE,MAAM,UAAU,cAAc,QAAQ;AAAA,EACjD;AACF;AAEA,MAAM,UAAU;AAAA,EACd,EAAE,OAAO,aAAa,OAAO,YAAY;AAAA,EACzC,EAAE,OAAO,cAAc,OAAO,aAAa;AAAA,EAC3C,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,EACjC,EAAE,OAAO,WAAW,OAAO,UAAU;AACvC;AAGO,MAAM,WAAW,CAAC,SAAiD;AACxE,QAAM,CAAC,OAAO,QAAQ,IAAI,aAAAC,QAAM,SAAwB,IAAI;AAE5D,SACE,6BAAAA,QAAA;AAAA,IAAC,SAAAD;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,kBAAkB,SAAS;AAAA,MAC1B,GAAG;AAAA;AAAA,EACN;AAEJ;",
   "names": ["DropdownComponent", "React"]
 }

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,CAAC,cAAc;AAAA,UAC1B,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,CAAC,cAAc;AAAA,UACnB,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 { 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;",
   "names": ["React", "Text", "FlexBox", "SelectInput"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/DropdownGeneric/DropdownGeneric.stories.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport Flex from \"../../layout/Flex\";\nimport Box from \"../../layout/Box\";\nimport Text from \"../../asorted/Text\";\nimport Alert from \"../../message/Alert\";\nimport DropdownGenericComponent, { Props as DropdownGenericProps } from \".\";\nimport Divider from \"../../asorted/Divider\";\n\nconst SmallChild = () => (\n  <Flex\n    height={200}\n    width={180}\n    padding={10}\n    backgroundColor=\"neutral.c30\"\n    justifyContent=\"center\"\n    alignItems=\"center\"\n  >\n    <Text variant=\"small\" color=\"neutral.c60\" textAlign=\"center\">\n      I'm a simple div with a grey background and no margin passed as children of the dropdown\n      component.\n    </Text>\n  </Flex>\n);\n\nconst BigChild = ({ containerProps }: { containerProps?: Record<string, unknown> }) => (\n  <Box\n    padding={10}\n    flexDirection=\"column\"\n    width=\"300px\"\n    justifyContent=\"center\"\n    alignItems=\"center\"\n    {...containerProps}\n  >\n    <Text variant=\"small\" color=\"neutral.c60\" textAlign=\"center\">\n      If the children node of the dropdown is bigger than the available space, the dropdown will\n      restrict its own height to avoid overflowing and its inner container will scroll.\n    </Text>\n    <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c100\" />\n    <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c90\" />\n    <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c80\" />\n    <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c70\" />\n    <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c60\" />\n  </Box>\n);\n\nconst BottomPlaceholder = () => (\n  <Flex\n    width=\"100%\"\n    height=\"100px\"\n    backgroundColor=\"neutral.c30\"\n    justifyContent=\"center\"\n    alignItems=\"center\"\n    padding={20}\n  >\n    <Text variant=\"small\" color=\"palette.neutral.c50\" textAlign=\"center\">\n      Ignore me, I'm just an item placed below to illustrate that the dropdown is a floating\n      component\n    </Text>\n  </Flex>\n);\n\nconst DropdownStoryTemplate = (\n  props: Omit<DropdownGenericProps, \"children\"> & {\n    big?: boolean;\n    bigWithMaxHeight?: boolean;\n    containerProps: Record<string, unknown>;\n  },\n) => {\n  const { containerProps = {}, big = false, bigWithMaxHeight = false, ...rest } = props;\n  return (\n    <Flex flexDirection=\"column\" {...containerProps}>\n      <DropdownGenericComponent {...rest}>\n        {big ? (\n          bigWithMaxHeight ? (\n            <BigChild containerProps={{ maxHeight: \"400px\", overflow: \"scroll\" }} />\n          ) : (\n            <BigChild />\n          )\n        ) : (\n          <SmallChild />\n        )}\n      </DropdownGenericComponent>\n      <BottomPlaceholder />\n    </Flex>\n  );\n};\n\nexport const DropdownGeneric = (args: DropdownGenericProps): React.ReactNode => {\n  const alignItemsPossibilities = [\"flex-start\", \"center\", \"flex-end\"];\n  const containerPropsPossibilities = alignItemsPossibilities.map((alignItems) => ({ alignItems }));\n  return (\n    <Flex flexDirection=\"column\" rowGap={5}>\n      {/**\n       * Calling DropdownTemplate as a function here to trick storybook into displaying\n       * the actual code in \"show code\" instead of an opaque \"DropdownTemplate\" component\n       *  */}\n      <Text variant=\"h5\">Small content:</Text>\n      {containerPropsPossibilities.map((containerProps) =>\n        DropdownStoryTemplate({ ...args, containerProps }),\n      )}\n      <Divider />\n      <Text variant=\"h5\">Big content:</Text>\n      {containerPropsPossibilities.map((containerProps) =>\n        DropdownStoryTemplate({ ...args, big: true, containerProps }),\n      )}\n      <Divider />\n      <Text variant=\"h5\">Big content (max height on child)</Text>\n      <Alert\n        type=\"info\"\n        title=\"In the following examples, the component passed as a child has its own internal maxHeight\n        setup\"\n      ></Alert>\n      {containerPropsPossibilities.map((containerProps) =>\n        DropdownStoryTemplate({ ...args, big: true, bigWithMaxHeight: true, containerProps }),\n      )}\n    </Flex>\n  );\n};\n\nexport default {\n  title: \"Form/SelectAndDialogs\",\n  component: DropdownGenericComponent,\n  argTypes: {\n    label: { type: \"string\", defaultValue: \"Label\" },\n    placement: { control: { type: \"select\", defaultValue: \"bottom\" } },\n    closeOnClickOutside: { type: \"boolean\", defaultValue: true },\n    closeOnClickInside: { type: \"boolean\", defaultValue: false },\n    disabled: { type: \"boolean\", defaultValue: false },\n    flipDisabled: { type: \"boolean\", defaultValue: false },\n  },\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React from \"react\";\nimport Flex from \"../../layout/Flex\";\nimport Box from \"../../layout/Box\";\nimport Text from \"../../asorted/Text\";\nimport Alert from \"../../message/Alert\";\nimport DropdownGenericComponent, { Props as DropdownGenericProps } from \".\";\nimport Divider from \"../../asorted/Divider\";\n\nconst SmallChild = () => (\n  <Flex\n    height={200}\n    width={180}\n    padding={10}\n    backgroundColor=\"neutral.c30\"\n    justifyContent=\"center\"\n    alignItems=\"center\"\n  >\n    <Text variant=\"small\" color=\"neutral.c60\" textAlign=\"center\">\n      I'm a simple div with a grey background and no margin passed as children of the dropdown\n      component.\n    </Text>\n  </Flex>\n);\n\nconst BigChild = ({ containerProps }: { containerProps?: Record<string, unknown> }) => (\n  <Box\n    padding={10}\n    flexDirection=\"column\"\n    width=\"300px\"\n    justifyContent=\"center\"\n    alignItems=\"center\"\n    {...containerProps}\n  >\n    <Text variant=\"small\" color=\"neutral.c60\" textAlign=\"center\">\n      If the children node of the dropdown is bigger than the available space, the dropdown will\n      restrict its own height to avoid overflowing and its inner container will scroll.\n    </Text>\n    <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c100\" />\n    <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c90\" />\n    <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c80\" />\n    <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c70\" />\n    <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c60\" />\n  </Box>\n);\n\nconst BottomPlaceholder = () => (\n  <Flex\n    width=\"100%\"\n    height=\"100px\"\n    backgroundColor=\"neutral.c30\"\n    justifyContent=\"center\"\n    alignItems=\"center\"\n    padding={20}\n  >\n    <Text variant=\"small\" color=\"palette.neutral.c50\" textAlign=\"center\">\n      Ignore me, I'm just an item placed below to illustrate that the dropdown is a floating\n      component\n    </Text>\n  </Flex>\n);\n\nconst DropdownStoryTemplate = (\n  props: Omit<DropdownGenericProps, \"children\"> & {\n    big?: boolean;\n    bigWithMaxHeight?: boolean;\n    containerProps: Record<string, unknown>;\n  },\n) => {\n  const { containerProps = {}, big = false, bigWithMaxHeight = false, ...rest } = props;\n  return (\n    <Flex flexDirection=\"column\" {...containerProps}>\n      <DropdownGenericComponent {...rest}>\n        {big ? (\n          bigWithMaxHeight ? (\n            <BigChild containerProps={{ maxHeight: \"400px\", overflow: \"scroll\" }} />\n          ) : (\n            <BigChild />\n          )\n        ) : (\n          <SmallChild />\n        )}\n      </DropdownGenericComponent>\n      <BottomPlaceholder />\n    </Flex>\n  );\n};\n\nexport const DropdownGeneric = (args: DropdownGenericProps): React.ReactNode => {\n  const alignItemsPossibilities = [\"flex-start\", \"center\", \"flex-end\"];\n  const containerPropsPossibilities = alignItemsPossibilities.map(alignItems => ({ alignItems }));\n  return (\n    <Flex flexDirection=\"column\" rowGap={5}>\n      {/**\n       * Calling DropdownTemplate as a function here to trick storybook into displaying\n       * the actual code in \"show code\" instead of an opaque \"DropdownTemplate\" component\n       *  */}\n      <Text variant=\"h5\">Small content:</Text>\n      {containerPropsPossibilities.map(containerProps =>\n        DropdownStoryTemplate({ ...args, containerProps }),\n      )}\n      <Divider />\n      <Text variant=\"h5\">Big content:</Text>\n      {containerPropsPossibilities.map(containerProps =>\n        DropdownStoryTemplate({ ...args, big: true, containerProps }),\n      )}\n      <Divider />\n      <Text variant=\"h5\">Big content (max height on child)</Text>\n      <Alert\n        type=\"info\"\n        title=\"In the following examples, the component passed as a child has its own internal maxHeight\n        setup\"\n      ></Alert>\n      {containerPropsPossibilities.map(containerProps =>\n        DropdownStoryTemplate({ ...args, big: true, bigWithMaxHeight: true, containerProps }),\n      )}\n    </Flex>\n  );\n};\n\nexport default {\n  title: \"Form/SelectAndDialogs\",\n  component: DropdownGenericComponent,\n  argTypes: {\n    label: { type: \"string\", defaultValue: \"Label\" },\n    placement: { control: { type: \"select\", defaultValue: \"bottom\" } },\n    closeOnClickOutside: { type: \"boolean\", defaultValue: true },\n    closeOnClickInside: { type: \"boolean\", defaultValue: false },\n    disabled: { type: \"boolean\", defaultValue: false },\n    flipDisabled: { type: \"boolean\", defaultValue: false },\n  },\n};\n"],
+  "mappings": "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",
   "names": ["React", "Flex", "Text", "Box", "DropdownGenericComponent", "Divider", "Alert"]
 }

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 { 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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",
   "names": ["import_Flex", "styled", "Box", "Flex", "React", "Text"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/LegendInput/index.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport Input, { InputProps, InputRenderRightContainer } from \"../BaseInput\";\nimport Text from \"../../asorted/Text\";\nimport styled from \"styled-components\";\n\nexport type Props = InputProps & { legend: string };\n\nconst Legend = styled(Text)`\n  color: ${(props) => props.theme.colors.neutral.c70};\n\n  &[data-disabled=\"true\"] {\n    color: ${(props) => props.theme.colors.neutral.c50};\n  }\n`;\n\nfunction LegendInput(\n  { legend, ...inputProps }: Props,\n  ref?: React.ForwardedRef<HTMLInputElement>,\n): JSX.Element {\n  return (\n    <Input\n      ref={ref}\n      {...inputProps}\n      renderRight={\n        <InputRenderRightContainer>\n          <Legend variant=\"body\" data-disabled={inputProps.disabled}>\n            {legend}\n          </Legend>\n        </InputRenderRightContainer>\n      }\n    />\n  );\n}\n\nexport default React.forwardRef(LegendInput);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,uBAA6D;AAC7D,kBAAiB;AACjB,+BAAmB;AAInB,MAAM,aAAS,yBAAAA,SAAO,YAAAC,OAAI;AAAA,WACf,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,aAGpC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAInD,SAAS,YACP,EAAE,QAAQ,GAAG,WAAW,GACxB,KACa;AACb,SACE,6BAAAC,QAAA;AAAA,IAAC,iBAAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACC,GAAG;AAAA,MACJ,aACE,6BAAAD,QAAA,cAAC,kDACC,6BAAAA,QAAA,cAAC,UAAO,SAAQ,QAAO,iBAAe,WAAW,YAC9C,MACH,CACF;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,sBAAQ,aAAAA,QAAM,WAAW,WAAW;",
+  "sourcesContent": ["import React from \"react\";\nimport Input, { InputProps, InputRenderRightContainer } from \"../BaseInput\";\nimport Text from \"../../asorted/Text\";\nimport styled from \"styled-components\";\n\nexport type Props = InputProps & { legend: string };\n\nconst Legend = styled(Text)`\n  color: ${props => props.theme.colors.neutral.c70};\n\n  &[data-disabled=\"true\"] {\n    color: ${props => props.theme.colors.neutral.c50};\n  }\n`;\n\nfunction LegendInput(\n  { legend, ...inputProps }: Props,\n  ref?: React.ForwardedRef<HTMLInputElement>,\n): JSX.Element {\n  return (\n    <Input\n      ref={ref}\n      {...inputProps}\n      renderRight={\n        <InputRenderRightContainer>\n          <Legend variant=\"body\" data-disabled={inputProps.disabled}>\n            {legend}\n          </Legend>\n        </InputRenderRightContainer>\n      }\n    />\n  );\n}\n\nexport default React.forwardRef(LegendInput);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,uBAA6D;AAC7D,kBAAiB;AACjB,+BAAmB;AAInB,MAAM,aAAS,yBAAAA,SAAO,YAAAC,OAAI;AAAA,WACf,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,aAGlC,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAIjD,SAAS,YACP,EAAE,QAAQ,GAAG,WAAW,GACxB,KACa;AACb,SACE,6BAAAC,QAAA;AAAA,IAAC,iBAAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACC,GAAG;AAAA,MACJ,aACE,6BAAAD,QAAA,cAAC,kDACC,6BAAAA,QAAA,cAAC,UAAO,SAAQ,QAAO,iBAAe,WAAW,YAC9C,MACH,CACF;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,sBAAQ,aAAAA,QAAM,WAAW,WAAW;",
   "names": ["styled", "Text", "React", "Input"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/NumberInput/index.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport Input, { InputProps } from \"../BaseInput\";\nimport FlexBox from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\nimport styled from \"styled-components\";\n\n// TODO: Replace me with a real button as soon as they are designed\nconst MaxButton = styled.button<{ active?: boolean }>`\n  color: ${(p) => (p.active ? p.theme.colors.neutral.c00 : p.theme.colors.neutral.c70)};\n  background-color: ${(p) => (p.active ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c00)};\n  border-radius: 100px;\n  border-width: 0;\n  height: 31px;\n  padding-left: 13px;\n  padding-right: 13px;\n  cursor: pointer;\n\n  &:disabled {\n    color: ${(p) => p.theme.colors.neutral.c50};\n    background-color: ${(p) => (p.active ? p.theme.colors.neutral.c30 : \"transparent\")};\n    cursor: unset;\n  }\n`;\n\nfunction serialize(value?: number) {\n  return value ? \"\" + value : \"\";\n}\nfunction deserialize(value: string) {\n  try {\n    return parseFloat(value);\n  } catch (error) {\n    return undefined;\n  }\n}\n\nfunction NumberInput(\n  {\n    value,\n    onPercentClick,\n    max,\n    disabled,\n    ...inputProps\n  }: InputProps<number | undefined> & {\n    onPercentClick: (percent: number) => void;\n  },\n  ref?: React.ForwardedRef<HTMLInputElement>,\n): JSX.Element {\n  return (\n    <Input\n      ref={ref}\n      serialize={serialize}\n      deserialize={deserialize}\n      {...inputProps}\n      type={\"number\"}\n      value={value}\n      max={max}\n      disabled={disabled}\n      renderRight={\n        <FlexBox alignItems={\"center\"} justifyContent={\"center\"} py={\"3px\"} mr={\"8px\"}>\n          {[0.25, 0.5, 0.75, 1].map((percent) => (\n            <MaxButton\n              key={percent}\n              onClick={() => onPercentClick(percent)}\n              active={!!value && !!max && Number(value) === percent * Number(max)}\n              disabled={disabled}\n            >\n              <Text variant={\"tiny\"} color={\"inherit\"}>\n                {percent * 100}%\n              </Text>\n            </MaxButton>\n          ))}\n        </FlexBox>\n      }\n    />\n  );\n}\n\nexport default React.forwardRef(NumberInput);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,uBAAkC;AAClC,kBAAoB;AACpB,kBAAiB;AACjB,+BAAmB;AAGnB,MAAM,YAAY,yBAAAA,QAAO;AAAA,WACd,CAAC,MAAO,EAAE,SAAS,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,sBAC5D,CAAC,MAAO,EAAE,SAAS,EAAE,MAAM,OAAO,QAAQ,OAAO,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aASjF,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,wBACnB,CAAC,MAAO,EAAE,SAAS,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA;AAAA;AAAA;AAKxE,SAAS,UAAU,OAAgB;AACjC,SAAO,QAAQ,KAAK,QAAQ;AAC9B;AACA,SAAS,YAAY,OAAe;AAClC,MAAI;AACF,WAAO,WAAW,KAAK;AAAA,EACzB,SAAS,OAAP;AACA,WAAO;AAAA,EACT;AACF;AAEA,SAAS,YACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAGA,KACa;AACb,SACE,6BAAAC,QAAA;AAAA,IAAC,iBAAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA,aACE,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAQ,YAAY,UAAU,gBAAgB,UAAU,IAAI,OAAO,IAAI,SACrE,CAAC,MAAM,KAAK,MAAM,CAAC,EAAE,IAAI,CAAC,YACzB,6BAAAF,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,SAAS,MAAM,eAAe,OAAO;AAAA,UACrC,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC,OAAO,OAAO,KAAK,MAAM,UAAU,OAAO,GAAG;AAAA,UAClE;AAAA;AAAA,QAEA,6BAAAA,QAAA,cAAC,YAAAG,SAAA,EAAK,SAAS,QAAQ,OAAO,aAC3B,UAAU,KAAI,GACjB;AAAA,MACF,CACD,CACH;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,sBAAQ,aAAAH,QAAM,WAAW,WAAW;",
+  "sourcesContent": ["import React from \"react\";\nimport Input, { InputProps } from \"../BaseInput\";\nimport FlexBox from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\nimport styled from \"styled-components\";\n\n// TODO: Replace me with a real button as soon as they are designed\nconst MaxButton = styled.button<{ active?: boolean }>`\n  color: ${p => (p.active ? p.theme.colors.neutral.c00 : p.theme.colors.neutral.c70)};\n  background-color: ${p => (p.active ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c00)};\n  border-radius: 100px;\n  border-width: 0;\n  height: 31px;\n  padding-left: 13px;\n  padding-right: 13px;\n  cursor: pointer;\n\n  &:disabled {\n    color: ${p => p.theme.colors.neutral.c50};\n    background-color: ${p => (p.active ? p.theme.colors.neutral.c30 : \"transparent\")};\n    cursor: unset;\n  }\n`;\n\nfunction serialize(value?: number) {\n  return value ? \"\" + value : \"\";\n}\nfunction deserialize(value: string) {\n  try {\n    return parseFloat(value);\n  } catch (error) {\n    return undefined;\n  }\n}\n\nfunction NumberInput(\n  {\n    value,\n    onPercentClick,\n    max,\n    disabled,\n    ...inputProps\n  }: InputProps<number | undefined> & {\n    onPercentClick: (percent: number) => void;\n  },\n  ref?: React.ForwardedRef<HTMLInputElement>,\n): JSX.Element {\n  return (\n    <Input\n      ref={ref}\n      serialize={serialize}\n      deserialize={deserialize}\n      {...inputProps}\n      type={\"number\"}\n      value={value}\n      max={max}\n      disabled={disabled}\n      renderRight={\n        <FlexBox alignItems={\"center\"} justifyContent={\"center\"} py={\"3px\"} mr={\"8px\"}>\n          {[0.25, 0.5, 0.75, 1].map(percent => (\n            <MaxButton\n              key={percent}\n              onClick={() => onPercentClick(percent)}\n              active={!!value && !!max && Number(value) === percent * Number(max)}\n              disabled={disabled}\n            >\n              <Text variant={\"tiny\"} color={\"inherit\"}>\n                {percent * 100}%\n              </Text>\n            </MaxButton>\n          ))}\n        </FlexBox>\n      }\n    />\n  );\n}\n\nexport default React.forwardRef(NumberInput);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,uBAAkC;AAClC,kBAAoB;AACpB,kBAAiB;AACjB,+BAAmB;AAGnB,MAAM,YAAY,yBAAAA,QAAO;AAAA,WACd,OAAM,EAAE,SAAS,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,sBAC1D,OAAM,EAAE,SAAS,EAAE,MAAM,OAAO,QAAQ,OAAO,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAS/E,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA,wBACjB,OAAM,EAAE,SAAS,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA;AAAA;AAAA;AAKtE,SAAS,UAAU,OAAgB;AACjC,SAAO,QAAQ,KAAK,QAAQ;AAC9B;AACA,SAAS,YAAY,OAAe;AAClC,MAAI;AACF,WAAO,WAAW,KAAK;AAAA,EACzB,SAAS,OAAP;AACA,WAAO;AAAA,EACT;AACF;AAEA,SAAS,YACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAGA,KACa;AACb,SACE,6BAAAC,QAAA;AAAA,IAAC,iBAAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA,aACE,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAQ,YAAY,UAAU,gBAAgB,UAAU,IAAI,OAAO,IAAI,SACrE,CAAC,MAAM,KAAK,MAAM,CAAC,EAAE,IAAI,aACxB,6BAAAF,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,SAAS,MAAM,eAAe,OAAO;AAAA,UACrC,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC,OAAO,OAAO,KAAK,MAAM,UAAU,OAAO,GAAG;AAAA,UAClE;AAAA;AAAA,QAEA,6BAAAA,QAAA,cAAC,YAAAG,SAAA,EAAK,SAAS,QAAQ,OAAO,aAC3B,UAAU,KAAI,GACjB;AAAA,MACF,CACD,CACH;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,sBAAQ,aAAAH,QAAM,WAAW,WAAW;",
   "names": ["styled", "React", "Input", "FlexBox", "Text"]
 }

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"],
-  "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,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,sBACnB,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,wBAI5B,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,aACzC,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAK3C,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;",
+  "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"],
+  "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"]
 }