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

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

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

Files changed (198) hide show

package/lib/cjs/components/layout/Drawer/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/layout/Drawer/index.tsx"],
-  "sourcesContent": ["import React, { useCallback } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport styled from \"styled-components\";\nimport FlexBox, { FlexBoxProps } from \"../Flex\";\nimport Divider, { Props as DividerProps } from \"../../asorted/Divider\";\nimport Close from \"@ledgerhq/icons-ui/react/CloseMedium\";\nimport ArrowLeft from \"@ledgerhq/icons-ui/react/ArrowLeftMedium\";\n\nimport TransitionSlide from \"../../transitions/TransitionSlide\";\nimport TransitionInOut from \"../../transitions/TransitionInOut\";\nimport Text from \"../../asorted/Text\";\nimport Button from \"../../cta/Button\";\n\nexport enum Direction {\n  Left = \"left\",\n  Right = \"right\",\n}\n\nconst Container = styled(FlexBox)`\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n`;\n\nconst Wrapper = styled(FlexBox)<{\n  big?: boolean;\n}>`\n  height: 100%;\n  width: ${(p) =>\n    p.big ? p.theme.sizes.drawer.side.big.width : p.theme.sizes.drawer.side.small.width}px;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: space-between;\n  z-index: ${(p) => p.theme.zIndexes[8]};\n`;\n\nconst Overlay = styled.div<{ direction: Direction }>`\n  display: flex;\n  position: fixed;\n  justify-content: ${(p) => (p.direction === Direction.Left ? \"flex-end\" : \"flex-start\")};\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: 999;\n  background-color: ${(p) => p.theme.colors.constant.overlay};\n`;\n\nconst ScrollWrapper = styled(FlexBox)`\n  &::-webkit-scrollbar {\n    display: none;\n  }\n`;\n\nconst ButtonPlaceholder = styled.div`\n  min-width: ${(p) => p.theme.space[12]}px;\n`;\n\nexport interface DrawerProps {\n  isOpen: boolean;\n  children: React.ReactNode;\n  title?: React.ReactNode;\n  footer?: React.ReactNode;\n  big?: boolean;\n  ignoreBackdropClick?: boolean;\n  backgroundColor?: string;\n  onClose: () => void;\n  onBack?: () => void;\n  setTransitionsEnabled?: (arg0: boolean) => void;\n  hideNavigation?: boolean;\n  menuPortalTarget?: Element | null;\n  direction?: Direction;\n  extraContainerProps?: Partial<FlexBoxProps>;\n  extraHeaderProps?: Partial<FlexBoxProps>;\n  extraFooterProps?: Partial<FlexBoxProps>;\n  extraFooterDividerProps?: Partial<DividerProps>;\n}\n\nconst DrawerContent = React.forwardRef(\n  (\n    {\n      isOpen,\n      title,\n      children,\n      footer,\n      big,\n      onClose,\n      backgroundColor,\n      setTransitionsEnabled = () => 0,\n      onBack,\n      extraContainerProps,\n      extraHeaderProps,\n      extraFooterProps,\n      extraFooterDividerProps,\n      ignoreBackdropClick = false,\n      hideNavigation = true,\n      direction = Direction.Left,\n    }: DrawerProps,\n    ref?: React.ForwardedRef<HTMLDivElement>,\n  ) => {\n    const disableChildAnimations = useCallback(\n      () => setTransitionsEnabled(false),\n      [setTransitionsEnabled],\n    );\n    const enableChildAnimations = useCallback(\n      () => setTransitionsEnabled(true),\n      [setTransitionsEnabled],\n    );\n\n    const handleBackdropClick = useCallback(() => {\n      if (!ignoreBackdropClick) {\n        onClose();\n      }\n    }, [onClose, ignoreBackdropClick]);\n\n    const stopClickPropagation = useCallback((e: React.MouseEvent) => {\n      e.stopPropagation();\n    }, []);\n\n    return (\n      <TransitionInOut\n        in={isOpen}\n        appear\n        mountOnEnter\n        unmountOnExit\n        onEntering={disableChildAnimations}\n        onEntered={enableChildAnimations}\n        onExiting={disableChildAnimations}\n      >\n        <Overlay direction={direction} onClick={handleBackdropClick} ref={ref}>\n          <TransitionSlide\n            in={isOpen}\n            direction={direction}\n            fixed\n            reverseExit\n            appear\n            mountOnEnter\n            unmountOnExit\n          >\n            <Wrapper\n              big={big}\n              onClick={stopClickPropagation}\n              backgroundColor={backgroundColor ?? \"background.main\"}\n            >\n              <Container>\n                <FlexBox\n                  justifyContent=\"space-between\"\n                  alignItems=\"center\"\n                  p={12}\n                  pb={10}\n                  {...extraHeaderProps}\n                >\n                  {!hideNavigation && (\n                    <>\n                      {onBack != null ? (\n                        <Button variant=\"neutral\" onClick={onBack} Icon={ArrowLeft} />\n                      ) : (\n                        <ButtonPlaceholder />\n                      )}\n                    </>\n                  )}\n                  {(\n                    <Text variant={\"h3\"} flex={1} textAlign=\"center\">\n                      {title}\n                    </Text>\n                  ) || <div />}\n                  <FlexBox alignSelf=\"flex-start\">\n                    <Button variant=\"neutral\" onClick={onClose} Icon={Close} />\n                  </FlexBox>\n                </FlexBox>\n                <ScrollWrapper\n                  flexDirection=\"column\"\n                  alignItems=\"stretch\"\n                  overflow=\"scroll\"\n                  position=\"relative\"\n                  p={12}\n                  pt={0}\n                  flex={1}\n                  {...extraContainerProps}\n                >\n                  {children}\n                </ScrollWrapper>\n                {footer && (\n                  <>\n                    <Divider {...extraFooterDividerProps} />\n                    <FlexBox alignItems=\"center\" py={8} px={12} {...extraFooterProps}>\n                      {footer}\n                    </FlexBox>\n                  </>\n                )}\n              </Container>\n            </Wrapper>\n          </TransitionSlide>\n        </Overlay>\n      </TransitionInOut>\n    );\n  },\n);\n\nconst Drawer = (\n  { children, menuPortalTarget, ...sideProps }: DrawerProps,\n  ref?: React.ForwardedRef<HTMLDivElement>,\n): React.ReactElement => {\n  const $root = React.useMemo(\n    () =>\n      menuPortalTarget === undefined && typeof document !== undefined\n        ? document.querySelector(\"body\")\n        : menuPortalTarget,\n    [menuPortalTarget],\n  );\n  if (!$root) {\n    return (\n      <DrawerContent ref={ref} {...sideProps}>\n        {children}\n      </DrawerContent>\n    );\n  } else {\n    return ReactDOM.createPortal(\n      <DrawerContent ref={ref} {...sideProps}>\n        {children}\n      </DrawerContent>,\n      $root,\n    );\n  }\n};\n\nexport default React.forwardRef(Drawer);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useCallback } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport styled from \"styled-components\";\nimport FlexBox, { FlexBoxProps } from \"../Flex\";\nimport Divider, { Props as DividerProps } from \"../../asorted/Divider\";\nimport Close from \"@ledgerhq/icons-ui/react/CloseMedium\";\nimport ArrowLeft from \"@ledgerhq/icons-ui/react/ArrowLeftMedium\";\n\nimport TransitionSlide from \"../../transitions/TransitionSlide\";\nimport TransitionInOut from \"../../transitions/TransitionInOut\";\nimport Text from \"../../asorted/Text\";\nimport Button from \"../../cta/Button\";\n\nexport enum Direction {\n  Left = \"left\",\n  Right = \"right\",\n}\n\nconst Container = styled(FlexBox)`\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n`;\n\nconst Wrapper = styled(FlexBox)<{\n  big?: boolean;\n}>`\n  height: 100%;\n  width: ${p =>\n    p.big ? p.theme.sizes.drawer.side.big.width : p.theme.sizes.drawer.side.small.width}px;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: space-between;\n  z-index: ${p => p.theme.zIndexes[8]};\n`;\n\nconst Overlay = styled.div<{ direction: Direction }>`\n  display: flex;\n  position: fixed;\n  justify-content: ${p => (p.direction === Direction.Left ? \"flex-end\" : \"flex-start\")};\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: 999;\n  background-color: ${p => p.theme.colors.constant.overlay};\n`;\n\nconst ScrollWrapper = styled(FlexBox)`\n  &::-webkit-scrollbar {\n    display: none;\n  }\n`;\n\nconst ButtonPlaceholder = styled.div`\n  min-width: ${p => p.theme.space[12]}px;\n`;\n\nexport interface DrawerProps {\n  isOpen: boolean;\n  children: React.ReactNode;\n  title?: React.ReactNode;\n  footer?: React.ReactNode;\n  big?: boolean;\n  ignoreBackdropClick?: boolean;\n  backgroundColor?: string;\n  onClose: () => void;\n  onBack?: () => void;\n  setTransitionsEnabled?: (arg0: boolean) => void;\n  hideNavigation?: boolean;\n  menuPortalTarget?: Element | null;\n  direction?: Direction;\n  extraContainerProps?: Partial<FlexBoxProps>;\n  extraHeaderProps?: Partial<FlexBoxProps>;\n  extraFooterProps?: Partial<FlexBoxProps>;\n  extraFooterDividerProps?: Partial<DividerProps>;\n}\n\nconst DrawerContent = React.forwardRef(\n  (\n    {\n      isOpen,\n      title,\n      children,\n      footer,\n      big,\n      onClose,\n      backgroundColor,\n      setTransitionsEnabled = () => 0,\n      onBack,\n      extraContainerProps,\n      extraHeaderProps,\n      extraFooterProps,\n      extraFooterDividerProps,\n      ignoreBackdropClick = false,\n      hideNavigation = true,\n      direction = Direction.Left,\n    }: DrawerProps,\n    ref?: React.ForwardedRef<HTMLDivElement>,\n  ) => {\n    const disableChildAnimations = useCallback(\n      () => setTransitionsEnabled(false),\n      [setTransitionsEnabled],\n    );\n    const enableChildAnimations = useCallback(\n      () => setTransitionsEnabled(true),\n      [setTransitionsEnabled],\n    );\n\n    const handleBackdropClick = useCallback(() => {\n      if (!ignoreBackdropClick) {\n        onClose();\n      }\n    }, [onClose, ignoreBackdropClick]);\n\n    const stopClickPropagation = useCallback((e: React.MouseEvent) => {\n      e.stopPropagation();\n    }, []);\n\n    return (\n      <TransitionInOut\n        in={isOpen}\n        appear\n        mountOnEnter\n        unmountOnExit\n        onEntering={disableChildAnimations}\n        onEntered={enableChildAnimations}\n        onExiting={disableChildAnimations}\n      >\n        <Overlay direction={direction} onClick={handleBackdropClick} ref={ref}>\n          <TransitionSlide\n            in={isOpen}\n            direction={direction}\n            fixed\n            reverseExit\n            appear\n            mountOnEnter\n            unmountOnExit\n          >\n            <Wrapper\n              big={big}\n              onClick={stopClickPropagation}\n              backgroundColor={backgroundColor ?? \"background.main\"}\n            >\n              <Container>\n                <FlexBox\n                  justifyContent=\"space-between\"\n                  alignItems=\"center\"\n                  p={12}\n                  pb={10}\n                  {...extraHeaderProps}\n                >\n                  {!hideNavigation && (\n                    <>\n                      {onBack != null ? (\n                        <Button variant=\"neutral\" onClick={onBack} Icon={ArrowLeft} />\n                      ) : (\n                        <ButtonPlaceholder />\n                      )}\n                    </>\n                  )}\n                  {(\n                    <Text variant={\"h3\"} flex={1} textAlign=\"center\">\n                      {title}\n                    </Text>\n                  ) || <div />}\n                  <FlexBox alignSelf=\"flex-start\">\n                    <Button variant=\"neutral\" onClick={onClose} Icon={Close} />\n                  </FlexBox>\n                </FlexBox>\n                <ScrollWrapper\n                  flexDirection=\"column\"\n                  alignItems=\"stretch\"\n                  overflow=\"scroll\"\n                  position=\"relative\"\n                  p={12}\n                  pt={0}\n                  flex={1}\n                  {...extraContainerProps}\n                >\n                  {children}\n                </ScrollWrapper>\n                {footer && (\n                  <>\n                    <Divider {...extraFooterDividerProps} />\n                    <FlexBox alignItems=\"center\" py={8} px={12} {...extraFooterProps}>\n                      {footer}\n                    </FlexBox>\n                  </>\n                )}\n              </Container>\n            </Wrapper>\n          </TransitionSlide>\n        </Overlay>\n      </TransitionInOut>\n    );\n  },\n);\n\nconst Drawer = (\n  { children, menuPortalTarget, ...sideProps }: DrawerProps,\n  ref?: React.ForwardedRef<HTMLDivElement>,\n): React.ReactElement => {\n  const $root = React.useMemo(\n    () =>\n      menuPortalTarget === undefined && typeof document !== undefined\n        ? document.querySelector(\"body\")\n        : menuPortalTarget,\n    [menuPortalTarget],\n  );\n  if (!$root) {\n    return (\n      <DrawerContent ref={ref} {...sideProps}>\n        {children}\n      </DrawerContent>\n    );\n  } else {\n    return ReactDOM.createPortal(\n      <DrawerContent ref={ref} {...sideProps}>\n        {children}\n      </DrawerContent>,\n      $root,\n    );\n  }\n};\n\nexport default React.forwardRef(Drawer);\n"],
+  "mappings": "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",
   "names": ["Direction", "styled", "FlexBox", "React", "TransitionInOut", "TransitionSlide", "Button", "ArrowLeft", "Text", "Close", "Divider", "ReactDOM"]
 }

package/lib/cjs/components/layout/List/VerticalTimeline/TimelineIndicator.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/layout/List/VerticalTimeline/TimelineIndicator.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport CircledCheckSolidMedium from \"@ledgerhq/icons-ui/react/CircledCheckSolidMedium\";\nimport styled, { useTheme } from \"styled-components\";\n\nimport Flex, { FlexBoxProps as FlexProps } from \"../../Flex\";\nimport { ItemStatus } from \"./index\";\nimport { Theme } from \"src/styles/theme\";\n\nconst linesWidth = 2;\n\nconst BottomSegment = styled(Flex)<{ status: ItemStatus; hidden?: boolean }>`\n  flex: 1;\n  border-left-width: ${(p) => (p.hidden ? 0 : linesWidth)}px;\n  border-right-width: 0;\n  border-style: dashed;\n  border-color: ${(p) =>\n    p.status === \"completed\" ? p.theme.colors.primary.c80 : p.theme.colors.neutral.c40};\n  background: ${(p) => p.status === \"completed\" && p.theme.colors.primary.c80};\n`;\n\nconst getIconBackground = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n  if (isLastItem) {\n    if (status === \"inactive\") return theme.colors.success.c10;\n    return \"transparent\";\n  } else if (status === \"active\") {\n    return theme.colors.neutral.c40;\n  } else {\n    return \"transparent\";\n  }\n};\n\nconst getIconBorder = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n  if (isLastItem) {\n    return theme.colors.success.c70;\n  } else if (status === \"inactive\") {\n    return theme.colors.neutral.c40;\n  }\n  return theme.colors.primary.c80;\n};\n\nconst CenterCircle = styled(Flex)<{ status: ItemStatus; isLastItem?: boolean }>`\n  border-radius: 9999px;\n  width: 100%;\n  background: ${(p) => getIconBackground(p.theme, p.status, p.isLastItem)};\n  border: 2px solid ${(p) => getIconBorder(p.theme, p.status, p.isLastItem)};\n  align-items: center;\n  justify-content: center;\n  position: relative;\n`;\n\nconst IconWrapper = styled(Flex)`\n  height: 16px;\n  width: 16px;\n`;\n\nexport type Props = FlexProps & {\n  status: \"inactive\" | \"active\" | \"completed\";\n  isFirstItem?: boolean;\n  isLastItem?: boolean;\n};\n\nconst topSegmentDefaultHeight = 23;\n\nconst Container = styled(Flex)`\n  flex-direction: column;\n  align-items: center;\n  margin-bottom: ${-topSegmentDefaultHeight}px;\n  padding-top: ${topSegmentDefaultHeight}px;\n`;\n\nfunction TimelineIndicator({ status, isLastItem, ...props }: Props) {\n  const { colors } = useTheme();\n\n  return (\n    <Container {...props}>\n      <IconWrapper>\n        <CenterCircle status={status} isLastItem={isLastItem}>\n          {status === \"completed\" && (\n            <Flex position=\"absolute\">\n              <CircledCheckSolidMedium\n                color={isLastItem ? colors.success.c70 : colors.primary.c80}\n                size={20}\n              />\n            </Flex>\n          )}\n        </CenterCircle>\n      </IconWrapper>\n      {isLastItem ? null : <BottomSegment status={status} />}\n    </Container>\n  );\n}\n\nexport default React.memo(TimelineIndicator);\n\nTimelineIndicator.topSegmentDefaultHeight = topSegmentDefaultHeight;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,qCAAoC;AACpC,+BAAiC;AAEjC,kBAAgD;AAIhD,MAAM,aAAa;AAEnB,MAAM,oBAAgB,yBAAAA,SAAO,YAAAC,OAAI;AAAA;AAAA,uBAEV,CAAC,MAAO,EAAE,SAAS,IAAI;AAAA;AAAA;AAAA,kBAG5B,CAAC,MACf,EAAE,WAAW,cAAc,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,gBACnE,CAAC,MAAM,EAAE,WAAW,eAAe,EAAE,MAAM,OAAO,QAAQ;AAAA;AAG1E,MAAM,oBAAoB,CAAC,OAAc,QAAoB,eAAyB;AACpF,MAAI,YAAY;AACd,QAAI,WAAW;AAAY,aAAO,MAAM,OAAO,QAAQ;AACvD,WAAO;AAAA,EACT,WAAW,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B,OAAO;AACL,WAAO;AAAA,EACT;AACF;AAEA,MAAM,gBAAgB,CAAC,OAAc,QAAoB,eAAyB;AAChF,MAAI,YAAY;AACd,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B,WAAW,WAAW,YAAY;AAChC,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AACA,SAAO,MAAM,OAAO,QAAQ;AAC9B;AAEA,MAAM,mBAAe,yBAAAD,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA,gBAGhB,CAAC,MAAM,kBAAkB,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU;AAAA,sBAClD,CAAC,MAAM,cAAc,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU;AAAA;AAAA;AAAA;AAAA;AAM1E,MAAM,kBAAc,yBAAAD,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA;AAW/B,MAAM,0BAA0B;AAEhC,MAAM,gBAAY,yBAAAD,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA,mBAGV,CAAC;AAAA,iBACH;AAAA;AAGjB,SAAS,kBAAkB,EAAE,QAAQ,YAAY,GAAG,MAAM,GAAU;AAClE,QAAM,EAAE,OAAO,QAAI,mCAAS;AAE5B,SACE,6BAAAC,QAAA,cAAC,aAAW,GAAG,SACb,6BAAAA,QAAA,cAAC,mBACC,6BAAAA,QAAA,cAAC,gBAAa,QAAgB,cAC3B,WAAW,eACV,6BAAAA,QAAA,cAAC,YAAAD,SAAA,EAAK,UAAS,cACb,6BAAAC,QAAA;AAAA,IAAC,+BAAAC;AAAA,IAAA;AAAA,MACC,OAAO,aAAa,OAAO,QAAQ,MAAM,OAAO,QAAQ;AAAA,MACxD,MAAM;AAAA;AAAA,EACR,CACF,CAEJ,CACF,GACC,aAAa,OAAO,6BAAAD,QAAA,cAAC,iBAAc,QAAgB,CACtD;AAEJ;AAEA,IAAO,4BAAQ,aAAAA,QAAM,KAAK,iBAAiB;AAE3C,kBAAkB,0BAA0B;",
+  "sourcesContent": ["import React from \"react\";\nimport CircledCheckSolidMedium from \"@ledgerhq/icons-ui/react/CircledCheckSolidMedium\";\nimport styled, { useTheme } from \"styled-components\";\n\nimport Flex, { FlexBoxProps as FlexProps } from \"../../Flex\";\nimport { ItemStatus } from \"./index\";\nimport { Theme } from \"src/styles/theme\";\n\nconst linesWidth = 2;\n\nconst BottomSegment = styled(Flex)<{ status: ItemStatus; hidden?: boolean }>`\n  flex: 1;\n  border-left-width: ${p => (p.hidden ? 0 : linesWidth)}px;\n  border-right-width: 0;\n  border-style: dashed;\n  border-color: ${p =>\n    p.status === \"completed\" ? p.theme.colors.primary.c80 : p.theme.colors.neutral.c40};\n  background: ${p => p.status === \"completed\" && p.theme.colors.primary.c80};\n`;\n\nconst getIconBackground = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n  if (isLastItem) {\n    if (status === \"inactive\") return theme.colors.success.c10;\n    return \"transparent\";\n  } else if (status === \"active\") {\n    return theme.colors.neutral.c40;\n  } else {\n    return \"transparent\";\n  }\n};\n\nconst getIconBorder = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n  if (isLastItem) {\n    return theme.colors.success.c70;\n  } else if (status === \"inactive\") {\n    return theme.colors.neutral.c40;\n  }\n  return theme.colors.primary.c80;\n};\n\nconst CenterCircle = styled(Flex)<{ status: ItemStatus; isLastItem?: boolean }>`\n  border-radius: 9999px;\n  width: 100%;\n  background: ${p => getIconBackground(p.theme, p.status, p.isLastItem)};\n  border: 2px solid ${p => getIconBorder(p.theme, p.status, p.isLastItem)};\n  align-items: center;\n  justify-content: center;\n  position: relative;\n`;\n\nconst IconWrapper = styled(Flex)`\n  height: 16px;\n  width: 16px;\n`;\n\nexport type Props = FlexProps & {\n  status: \"inactive\" | \"active\" | \"completed\";\n  isFirstItem?: boolean;\n  isLastItem?: boolean;\n};\n\nconst topSegmentDefaultHeight = 23;\n\nconst Container = styled(Flex)`\n  flex-direction: column;\n  align-items: center;\n  margin-bottom: ${-topSegmentDefaultHeight}px;\n  padding-top: ${topSegmentDefaultHeight}px;\n`;\n\nfunction TimelineIndicator({ status, isLastItem, ...props }: Props) {\n  const { colors } = useTheme();\n\n  return (\n    <Container {...props}>\n      <IconWrapper>\n        <CenterCircle status={status} isLastItem={isLastItem}>\n          {status === \"completed\" && (\n            <Flex position=\"absolute\">\n              <CircledCheckSolidMedium\n                color={isLastItem ? colors.success.c70 : colors.primary.c80}\n                size={20}\n              />\n            </Flex>\n          )}\n        </CenterCircle>\n      </IconWrapper>\n      {isLastItem ? null : <BottomSegment status={status} />}\n    </Container>\n  );\n}\n\nexport default React.memo(TimelineIndicator);\n\nTimelineIndicator.topSegmentDefaultHeight = topSegmentDefaultHeight;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,qCAAoC;AACpC,+BAAiC;AAEjC,kBAAgD;AAIhD,MAAM,aAAa;AAEnB,MAAM,oBAAgB,yBAAAA,SAAO,YAAAC,OAAI;AAAA;AAAA,uBAEV,OAAM,EAAE,SAAS,IAAI;AAAA;AAAA;AAAA,kBAG1B,OACd,EAAE,WAAW,cAAc,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,gBACnE,OAAK,EAAE,WAAW,eAAe,EAAE,MAAM,OAAO,QAAQ;AAAA;AAGxE,MAAM,oBAAoB,CAAC,OAAc,QAAoB,eAAyB;AACpF,MAAI,YAAY;AACd,QAAI,WAAW;AAAY,aAAO,MAAM,OAAO,QAAQ;AACvD,WAAO;AAAA,EACT,WAAW,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B,OAAO;AACL,WAAO;AAAA,EACT;AACF;AAEA,MAAM,gBAAgB,CAAC,OAAc,QAAoB,eAAyB;AAChF,MAAI,YAAY;AACd,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B,WAAW,WAAW,YAAY;AAChC,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AACA,SAAO,MAAM,OAAO,QAAQ;AAC9B;AAEA,MAAM,mBAAe,yBAAAD,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA,gBAGhB,OAAK,kBAAkB,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU;AAAA,sBAChD,OAAK,cAAc,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU;AAAA;AAAA;AAAA;AAAA;AAMxE,MAAM,kBAAc,yBAAAD,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA;AAW/B,MAAM,0BAA0B;AAEhC,MAAM,gBAAY,yBAAAD,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA,mBAGV,CAAC;AAAA,iBACH;AAAA;AAGjB,SAAS,kBAAkB,EAAE,QAAQ,YAAY,GAAG,MAAM,GAAU;AAClE,QAAM,EAAE,OAAO,QAAI,mCAAS;AAE5B,SACE,6BAAAC,QAAA,cAAC,aAAW,GAAG,SACb,6BAAAA,QAAA,cAAC,mBACC,6BAAAA,QAAA,cAAC,gBAAa,QAAgB,cAC3B,WAAW,eACV,6BAAAA,QAAA,cAAC,YAAAD,SAAA,EAAK,UAAS,cACb,6BAAAC,QAAA;AAAA,IAAC,+BAAAC;AAAA,IAAA;AAAA,MACC,OAAO,aAAa,OAAO,QAAQ,MAAM,OAAO,QAAQ;AAAA,MACxD,MAAM;AAAA;AAAA,EACR,CACF,CAEJ,CACF,GACC,aAAa,OAAO,6BAAAD,QAAA,cAAC,iBAAc,QAAgB,CACtD;AAEJ;AAEA,IAAO,4BAAQ,aAAAA,QAAM,KAAK,iBAAiB;AAE3C,kBAAkB,0BAA0B;",
   "names": ["styled", "Flex", "React", "CircledCheckSolidMedium"]
 }

package/lib/cjs/components/layout/List/VerticalTimeline/TimelineItem.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/layout/List/VerticalTimeline/TimelineItem.tsx"],
-  "sourcesContent": ["import React from \"react\";\n\nimport { Theme } from \"src/styles/theme\";\nimport styled, { useTheme } from \"styled-components\";\n\nimport { Item, ItemStatus } from \".\";\nimport { Flex, Box } from \"../..\";\nimport { Text } from \"../../..\";\nimport Tag from \"../../../Tag\";\n\nimport TimelineIndicator from \"./TimelineIndicator\";\n\nexport type Props = {\n  item: Item;\n  isFirstItem?: boolean;\n  isLastItem?: boolean;\n  onClick?: () => void;\n};\n\nconst getContainerBackground = (theme: Theme, status: ItemStatus) => {\n  if (status === \"completed\") {\n    return \"transparent\";\n  } else if (status === \"active\") {\n    return theme.colors.neutral.c20;\n  }\n  return \"transparent\";\n};\n\nconst getContainerBorder = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n  if (status === \"completed\") {\n    return \"transparent\";\n  } else if (isLastItem && status === \"active\") {\n    return theme.colors.success.c50;\n  } else if (status === \"active\") {\n    return theme.colors.neutral.c40;\n  }\n  return \"transparent\";\n};\n\nconst Container = styled(Flex)<{ status: ItemStatus; isLastItem?: boolean }>`\n  flex: 1;\n  border-radius: ${(p) => p.theme.radii[2]}px;\n  background: ${(p) => getContainerBackground(p.theme, p.status)};\n  border: 1px solid ${(p) => getContainerBorder(p.theme, p.status, p.isLastItem)};\n  padding: 20px 16px;\n`;\n\nconst TimelineIndicatorContentHeader = styled(Flex)`\n  justify-content: space-between;\n  align-items: center;\n`;\n\nfunction TimelineItem({ item, isFirstItem, isLastItem, onClick }: Props) {\n  const { colors } = useTheme();\n\n  return (\n    <Flex flexDirection=\"row\" onClick={onClick} flex={1}>\n      <TimelineIndicator\n        status={item.status}\n        isFirstItem={isFirstItem}\n        isLastItem={isLastItem}\n        mr={4}\n      />\n      <Container status={item.status} isLastItem={isLastItem} mb={4} flexDirection=\"column\">\n        <TimelineIndicatorContentHeader height=\"20px\">\n          <Text\n            variant=\"body\"\n            fontWeight={item.status === \"active\" ? \"semiBold\" : \"medium\"}\n            color={\n              item.status !== \"inactive\" && isLastItem\n                ? \"success.c70\"\n                : item.status === \"active\"\n                ? \"primary.c80\"\n                : \"neutral.c70\"\n            }\n          >\n            {item.title}\n          </Text>\n          {item?.estimatedTime && item.status === \"active\" && (\n            <Tag\n              size=\"small\"\n              type=\"opacity\"\n              active\n              disabled\n              textProps={{ color: colors.neutral.c100 }}\n            >{`${item.estimatedTime / 60} min`}</Tag>\n          )}\n        </TimelineIndicatorContentHeader>\n        {item.renderBody && item.status === \"active\" && (\n          <Box position=\"relative\" pt={6}>\n            {item.renderBody(item.status === \"active\")}\n          </Box>\n        )}\n      </Container>\n    </Flex>\n  );\n}\n\nexport default React.memo(TimelineItem);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,+BAAiC;AAGjC,IAAAA,YAA0B;AAC1B,IAAAA,YAAqB;AACrB,iBAAgB;AAEhB,+BAA8B;AAS9B,MAAM,yBAAyB,CAAC,OAAc,WAAuB;AACnE,MAAI,WAAW,aAAa;AAC1B,WAAO;AAAA,EACT,WAAW,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AACA,SAAO;AACT;AAEA,MAAM,qBAAqB,CAAC,OAAc,QAAoB,eAAyB;AACrF,MAAI,WAAW,aAAa;AAC1B,WAAO;AAAA,EACT,WAAW,cAAc,WAAW,UAAU;AAC5C,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B,WAAW,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AACA,SAAO;AACT;AAEA,MAAM,gBAAY,yBAAAC,SAAO,cAAI;AAAA;AAAA,mBAEV,CAAC,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA,gBACzB,CAAC,MAAM,uBAAuB,EAAE,OAAO,EAAE,MAAM;AAAA,sBACzC,CAAC,MAAM,mBAAmB,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU;AAAA;AAAA;AAI/E,MAAM,qCAAiC,yBAAAA,SAAO,cAAI;AAAA;AAAA;AAAA;AAKlD,SAAS,aAAa,EAAE,MAAM,aAAa,YAAY,QAAQ,GAAU;AACvE,QAAM,EAAE,OAAO,QAAI,mCAAS;AAE5B,SACE,6BAAAC,QAAA,cAAC,kBAAK,eAAc,OAAM,SAAkB,MAAM,KAChD,6BAAAA,QAAA;AAAA,IAAC,yBAAAC;AAAA,IAAA;AAAA,MACC,QAAQ,KAAK;AAAA,MACb;AAAA,MACA;AAAA,MACA,IAAI;AAAA;AAAA,EACN,GACA,6BAAAD,QAAA,cAAC,aAAU,QAAQ,KAAK,QAAQ,YAAwB,IAAI,GAAG,eAAc,YAC3E,6BAAAA,QAAA,cAAC,kCAA+B,QAAO,UACrC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAY,KAAK,WAAW,WAAW,aAAa;AAAA,MACpD,OACE,KAAK,WAAW,cAAc,aAC1B,gBACA,KAAK,WAAW,WAChB,gBACA;AAAA;AAAA,IAGL,KAAK;AAAA,EACR,IACC,6BAAM,kBAAiB,KAAK,WAAW,YACtC,6BAAAA,QAAA;AAAA,IAAC,WAAAE;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL,QAAM;AAAA,MACN,UAAQ;AAAA,MACR,WAAW,EAAE,OAAO,OAAO,QAAQ,KAAK;AAAA;AAAA,IACxC,GAAG,KAAK,gBAAgB;AAAA,EAAS,CAEvC,GACC,KAAK,cAAc,KAAK,WAAW,YAClC,6BAAAF,QAAA,cAAC,iBAAI,UAAS,YAAW,IAAI,KAC1B,KAAK,WAAW,KAAK,WAAW,QAAQ,CAC3C,CAEJ,CACF;AAEJ;AAEA,IAAO,uBAAQ,aAAAA,QAAM,KAAK,YAAY;",
+  "sourcesContent": ["import React from \"react\";\n\nimport { Theme } from \"src/styles/theme\";\nimport styled, { useTheme } from \"styled-components\";\n\nimport { Item, ItemStatus } from \".\";\nimport { Flex, Box } from \"../..\";\nimport { Text } from \"../../..\";\nimport Tag from \"../../../Tag\";\n\nimport TimelineIndicator from \"./TimelineIndicator\";\n\nexport type Props = {\n  item: Item;\n  isFirstItem?: boolean;\n  isLastItem?: boolean;\n  onClick?: () => void;\n};\n\nconst getContainerBackground = (theme: Theme, status: ItemStatus) => {\n  if (status === \"completed\") {\n    return \"transparent\";\n  } else if (status === \"active\") {\n    return theme.colors.neutral.c20;\n  }\n  return \"transparent\";\n};\n\nconst getContainerBorder = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n  if (status === \"completed\") {\n    return \"transparent\";\n  } else if (isLastItem && status === \"active\") {\n    return theme.colors.success.c50;\n  } else if (status === \"active\") {\n    return theme.colors.neutral.c40;\n  }\n  return \"transparent\";\n};\n\nconst Container = styled(Flex)<{ status: ItemStatus; isLastItem?: boolean }>`\n  flex: 1;\n  border-radius: ${p => p.theme.radii[2]}px;\n  background: ${p => getContainerBackground(p.theme, p.status)};\n  border: 1px solid ${p => getContainerBorder(p.theme, p.status, p.isLastItem)};\n  padding: 20px 16px;\n`;\n\nconst TimelineIndicatorContentHeader = styled(Flex)`\n  justify-content: space-between;\n  align-items: center;\n`;\n\nfunction TimelineItem({ item, isFirstItem, isLastItem, onClick }: Props) {\n  const { colors } = useTheme();\n\n  return (\n    <Flex flexDirection=\"row\" onClick={onClick} flex={1}>\n      <TimelineIndicator\n        status={item.status}\n        isFirstItem={isFirstItem}\n        isLastItem={isLastItem}\n        mr={4}\n      />\n      <Container status={item.status} isLastItem={isLastItem} mb={4} flexDirection=\"column\">\n        <TimelineIndicatorContentHeader height=\"20px\">\n          <Text\n            variant=\"body\"\n            fontWeight={item.status === \"active\" ? \"semiBold\" : \"medium\"}\n            color={\n              item.status !== \"inactive\" && isLastItem\n                ? \"success.c70\"\n                : item.status === \"active\"\n                ? \"primary.c80\"\n                : \"neutral.c70\"\n            }\n          >\n            {item.title}\n          </Text>\n          {item?.estimatedTime && item.status === \"active\" && (\n            <Tag\n              size=\"small\"\n              type=\"opacity\"\n              active\n              disabled\n              textProps={{ color: colors.neutral.c100 }}\n            >{`${item.estimatedTime / 60} min`}</Tag>\n          )}\n        </TimelineIndicatorContentHeader>\n        {item.renderBody && item.status === \"active\" && (\n          <Box position=\"relative\" pt={6}>\n            {item.renderBody(item.status === \"active\")}\n          </Box>\n        )}\n      </Container>\n    </Flex>\n  );\n}\n\nexport default React.memo(TimelineItem);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,+BAAiC;AAGjC,IAAAA,YAA0B;AAC1B,IAAAA,YAAqB;AACrB,iBAAgB;AAEhB,+BAA8B;AAS9B,MAAM,yBAAyB,CAAC,OAAc,WAAuB;AACnE,MAAI,WAAW,aAAa;AAC1B,WAAO;AAAA,EACT,WAAW,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AACA,SAAO;AACT;AAEA,MAAM,qBAAqB,CAAC,OAAc,QAAoB,eAAyB;AACrF,MAAI,WAAW,aAAa;AAC1B,WAAO;AAAA,EACT,WAAW,cAAc,WAAW,UAAU;AAC5C,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B,WAAW,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AACA,SAAO;AACT;AAEA,MAAM,gBAAY,yBAAAC,SAAO,cAAI;AAAA;AAAA,mBAEV,OAAK,EAAE,MAAM,MAAM,CAAC;AAAA,gBACvB,OAAK,uBAAuB,EAAE,OAAO,EAAE,MAAM;AAAA,sBACvC,OAAK,mBAAmB,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU;AAAA;AAAA;AAI7E,MAAM,qCAAiC,yBAAAA,SAAO,cAAI;AAAA;AAAA;AAAA;AAKlD,SAAS,aAAa,EAAE,MAAM,aAAa,YAAY,QAAQ,GAAU;AACvE,QAAM,EAAE,OAAO,QAAI,mCAAS;AAE5B,SACE,6BAAAC,QAAA,cAAC,kBAAK,eAAc,OAAM,SAAkB,MAAM,KAChD,6BAAAA,QAAA;AAAA,IAAC,yBAAAC;AAAA,IAAA;AAAA,MACC,QAAQ,KAAK;AAAA,MACb;AAAA,MACA;AAAA,MACA,IAAI;AAAA;AAAA,EACN,GACA,6BAAAD,QAAA,cAAC,aAAU,QAAQ,KAAK,QAAQ,YAAwB,IAAI,GAAG,eAAc,YAC3E,6BAAAA,QAAA,cAAC,kCAA+B,QAAO,UACrC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAY,KAAK,WAAW,WAAW,aAAa;AAAA,MACpD,OACE,KAAK,WAAW,cAAc,aAC1B,gBACA,KAAK,WAAW,WAChB,gBACA;AAAA;AAAA,IAGL,KAAK;AAAA,EACR,IACC,6BAAM,kBAAiB,KAAK,WAAW,YACtC,6BAAAA,QAAA;AAAA,IAAC,WAAAE;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL,QAAM;AAAA,MACN,UAAQ;AAAA,MACR,WAAW,EAAE,OAAO,OAAO,QAAQ,KAAK;AAAA;AAAA,IACxC,GAAG,KAAK,gBAAgB;AAAA,EAAS,CAEvC,GACC,KAAK,cAAc,KAAK,WAAW,YAClC,6BAAAF,QAAA,cAAC,iBAAI,UAAS,YAAW,IAAI,KAC1B,KAAK,WAAW,KAAK,WAAW,QAAQ,CAC3C,CAEJ,CACF;AAEJ;AAEA,IAAO,uBAAQ,aAAAA,QAAM,KAAK,YAAY;",
   "names": ["import__", "styled", "React", "TimelineIndicator", "Tag"]
 }

package/lib/cjs/components/layout/List/VerticalTimeline/VerticalTimeline.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/layout/List/VerticalTimeline/VerticalTimeline.stories.tsx"],
-  "sourcesContent": ["import React, { useEffect, useMemo, useState } from \"react\";\nimport Flex from \"../../Flex\";\nimport { Switch } from \"../../../form\";\nimport { Text, Divider } from \"../../../asorted\";\nimport Button from \"../../../cta/Button\";\nimport ContinueOnDevice from \"../../../message/ContinueOnDevice\";\nimport VerticalTimeline from \".\";\nimport type { Item } from \".\";\nconst description = `\n### A Vertical Timeline\n\nThis components accepts an Array of object like this:\n## Usage\n\n\\`\\`\\`js\n\nconst steps = [\n    {\n      /**\n       * status is an ItemStatus which can be inactive, active or completed\n       */\n      status: ItemStatus;\n      /**\n       * title is the title of the step\n       */\n      title: string;\n      /**\n       * renderBody is an optional prop which is a ReactNode to be rendered next to the title\n       */\n      renderBody?: (isDisplayed?: boolean) => ReactNode;\n      /**\n       * estimatedTime is an optional prop that take the estimated time to complete the time in second and display it in a tag in minute\n       */\n       estimatedTime?: number;\n    },\n    {  \n      status: ItemStatus;\n      title: string;\n      renderBody?: (isDisplayed?: boolean) => ReactNode;\n      estimatedTime?: number;\n    }\n  ];\n\n<VerticalTimeline steps={steps as any} />\n\\`\\`\\`\n`;\n\nexport default {\n  title: \"Layout/List/VerticalTimeline\",\n  argTypes: {\n    steps: {\n      control: \"disabled\",\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: description,\n      },\n    },\n  },\n};\n\nconst { BodyText, SubtitleText } = VerticalTimeline;\n\nconst defaultItems: Item[] = [\n  {\n    status: \"active\",\n    title: \"step's {title} prop\",\n    renderBody: () => (\n      <Flex flexDirection=\"column\" flex={1} border=\"1px solid\" borderColor=\"neutral.c100\" p={3}>\n        <BodyText>{`This box is the React node returned by the step's {renderBody} prop`}</BodyText>\n        <Divider my={6} text=\"`Divider` component\" />\n        <SubtitleText>This subtitle text component is `VerticalTimeline.SubtitleText`</SubtitleText>\n        <BodyText>This body text component is `VerticalTimeline.BodyText`</BodyText>\n        <ContinueOnDevice\n          Icon={({ size }) => (\n            <Flex height={size} width={size} borderRadius={size} bg=\"neutral.c40\" />\n          )}\n          text=\"This component is `ContinueOnDevice`.\"\n        />\n      </Flex>\n    ),\n  },\n  {\n    status: \"inactive\",\n    title: \"Set your PIN\",\n    estimatedTime: 120,\n    renderBody: () => (\n      <Flex flexDirection=\"column\">\n        <BodyText>\n          {`Your PIN can be 4 to 8 digits long. Anyone with access to your Nano and to your PIN can also access all your crypto and NFT assets.`}\n        </BodyText>\n        <ContinueOnDevice\n          Icon={({ size }) => (\n            <Flex height={size} width={size} borderRadius={size} bg=\"neutral.c40\" />\n          )}\n          text=\"Set PIN on your Ledger Stax.\"\n        />\n      </Flex>\n    ),\n  },\n  {\n    status: \"inactive\",\n    title: \"Recovery phrase\",\n    estimatedTime: 300,\n    renderBody: () => (\n      <Flex flexDirection=\"column\">\n        <SubtitleText>{`Generate a new phrase`}</SubtitleText>\n        <BodyText>\n          {`Your device will generate a new secret recovery phrase. For your eyes only.`}\n        </BodyText>\n        <Divider text=\"OR\" my={6} />\n        <SubtitleText>{`Restore using Secret Recovery Phrase`}</SubtitleText>\n        <BodyText>\n          {`Make sure to use a Phrase generated by a Ledger for the guaranteed security of your assets. `}\n        </BodyText>\n      </Flex>\n    ),\n  },\n  {\n    status: \"inactive\",\n    title: \"Software check\",\n    renderBody: () => (\n      <Flex flexDirection=\"column\">\n        <BodyText>{`We'll verify whether your Nano is genuine. This should be quick and easy!`}</BodyText>\n      </Flex>\n    ),\n  },\n  {\n    status: \"inactive\",\n    title: \"Install apps\",\n    renderBody: () => (\n      <Flex flexDirection=\"column\">\n        <BodyText>{`Installing apps`}</BodyText>\n      </Flex>\n    ),\n  },\n  {\n    status: \"inactive\",\n    title: \"Nano is ready\",\n    renderBody: () => <BodyText>Almost there ...</BodyText>,\n  },\n];\n\nconst Template = () => {\n  const [autoAnimate, setAutoAnimate] = useState(false);\n  const [currentIndex, setCurrentIndex] = useState(1);\n\n  useEffect(() => {\n    let timeout: ReturnType<typeof setTimeout> | null = null;\n    if (autoAnimate) {\n      timeout = setTimeout(() => {\n        if (currentIndex === defaultItems.length) {\n          setCurrentIndex(0);\n          return;\n        }\n        setCurrentIndex(currentIndex + 1);\n      }, 1000);\n    }\n    return () => {\n      timeout && clearTimeout(timeout);\n    };\n  }, [autoAnimate, currentIndex]);\n\n  const items: Item[] = useMemo(\n    () =>\n      defaultItems.map((item, index) => ({\n        ...item,\n        status: index < currentIndex ? \"completed\" : index > currentIndex ? \"inactive\" : \"active\",\n      })),\n    [currentIndex],\n  );\n\n  return (\n    <Flex flexDirection=\"column\" flex={1} alignItems=\"center\">\n      <Flex\n        flexDirection=\"column\"\n        p={6}\n        rowGap={3}\n        alignSelf=\"stretch\"\n        alignItems=\"flex-start\"\n        flex={1}\n        borderColor=\"neutral.c100\"\n        border=\"1px solid\"\n      >\n        <Text variant=\"h5Inter\">Controls:</Text>\n        <Switch\n          name=\"Auto animate\"\n          label=\"Auto animate steps\"\n          checked={autoAnimate}\n          onChange={() => setAutoAnimate(!autoAnimate)}\n        />\n        <Button my={3} variant=\"main\" outline onClick={() => setCurrentIndex(items.length)}>\n          Set last step complete\n        </Button>\n        <Text variant=\"body\">\n          Click on a step to make it the active one (this is only for the storybook, not a native\n          feature of this component, although you can implement `onClickIndex` to do that)\n        </Text>\n      </Flex>\n\n      <Flex width={432} mt={10}>\n        <VerticalTimeline steps={items} onClickIndex={(index) => setCurrentIndex(index)} />\n      </Flex>\n    </Flex>\n  );\n};\n\nexport const Default = Template.bind({});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useEffect, useMemo, useState } from \"react\";\nimport Flex from \"../../Flex\";\nimport { Switch } from \"../../../form\";\nimport { Text, Divider } from \"../../../asorted\";\nimport Button from \"../../../cta/Button\";\nimport ContinueOnDevice from \"../../../message/ContinueOnDevice\";\nimport VerticalTimeline from \".\";\nimport type { Item } from \".\";\nconst description = `\n### A Vertical Timeline\n\nThis components accepts an Array of object like this:\n## Usage\n\n\\`\\`\\`js\n\nconst steps = [\n    {\n      /**\n       * status is an ItemStatus which can be inactive, active or completed\n       */\n      status: ItemStatus;\n      /**\n       * title is the title of the step\n       */\n      title: string;\n      /**\n       * renderBody is an optional prop which is a ReactNode to be rendered next to the title\n       */\n      renderBody?: (isDisplayed?: boolean) => ReactNode;\n      /**\n       * estimatedTime is an optional prop that take the estimated time to complete the time in second and display it in a tag in minute\n       */\n       estimatedTime?: number;\n    },\n    {  \n      status: ItemStatus;\n      title: string;\n      renderBody?: (isDisplayed?: boolean) => ReactNode;\n      estimatedTime?: number;\n    }\n  ];\n\n<VerticalTimeline steps={steps as any} />\n\\`\\`\\`\n`;\n\nexport default {\n  title: \"Layout/List/VerticalTimeline\",\n  argTypes: {\n    steps: {\n      control: \"disabled\",\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: description,\n      },\n    },\n  },\n};\n\nconst { BodyText, SubtitleText } = VerticalTimeline;\n\nconst defaultItems: Item[] = [\n  {\n    status: \"active\",\n    title: \"step's {title} prop\",\n    renderBody: () => (\n      <Flex flexDirection=\"column\" flex={1} border=\"1px solid\" borderColor=\"neutral.c100\" p={3}>\n        <BodyText>{`This box is the React node returned by the step's {renderBody} prop`}</BodyText>\n        <Divider my={6} text=\"`Divider` component\" />\n        <SubtitleText>This subtitle text component is `VerticalTimeline.SubtitleText`</SubtitleText>\n        <BodyText>This body text component is `VerticalTimeline.BodyText`</BodyText>\n        <ContinueOnDevice\n          Icon={({ size }) => (\n            <Flex height={size} width={size} borderRadius={size} bg=\"neutral.c40\" />\n          )}\n          text=\"This component is `ContinueOnDevice`.\"\n        />\n      </Flex>\n    ),\n  },\n  {\n    status: \"inactive\",\n    title: \"Set your PIN\",\n    estimatedTime: 120,\n    renderBody: () => (\n      <Flex flexDirection=\"column\">\n        <BodyText>\n          {`Your PIN can be 4 to 8 digits long. Anyone with access to your Nano and to your PIN can also access all your crypto and NFT assets.`}\n        </BodyText>\n        <ContinueOnDevice\n          Icon={({ size }) => (\n            <Flex height={size} width={size} borderRadius={size} bg=\"neutral.c40\" />\n          )}\n          text=\"Set PIN on your Ledger Stax.\"\n        />\n      </Flex>\n    ),\n  },\n  {\n    status: \"inactive\",\n    title: \"Recovery phrase\",\n    estimatedTime: 300,\n    renderBody: () => (\n      <Flex flexDirection=\"column\">\n        <SubtitleText>{`Generate a new phrase`}</SubtitleText>\n        <BodyText>\n          {`Your device will generate a new secret recovery phrase. For your eyes only.`}\n        </BodyText>\n        <Divider text=\"OR\" my={6} />\n        <SubtitleText>{`Restore using Secret Recovery Phrase`}</SubtitleText>\n        <BodyText>\n          {`Make sure to use a Phrase generated by a Ledger for the guaranteed security of your assets. `}\n        </BodyText>\n      </Flex>\n    ),\n  },\n  {\n    status: \"inactive\",\n    title: \"Software check\",\n    renderBody: () => (\n      <Flex flexDirection=\"column\">\n        <BodyText>{`We'll verify whether your Nano is genuine. This should be quick and easy!`}</BodyText>\n      </Flex>\n    ),\n  },\n  {\n    status: \"inactive\",\n    title: \"Install apps\",\n    renderBody: () => (\n      <Flex flexDirection=\"column\">\n        <BodyText>{`Installing apps`}</BodyText>\n      </Flex>\n    ),\n  },\n  {\n    status: \"inactive\",\n    title: \"Nano is ready\",\n    renderBody: () => <BodyText>Almost there ...</BodyText>,\n  },\n];\n\nconst Template = () => {\n  const [autoAnimate, setAutoAnimate] = useState(false);\n  const [currentIndex, setCurrentIndex] = useState(1);\n\n  useEffect(() => {\n    let timeout: ReturnType<typeof setTimeout> | null = null;\n    if (autoAnimate) {\n      timeout = setTimeout(() => {\n        if (currentIndex === defaultItems.length) {\n          setCurrentIndex(0);\n          return;\n        }\n        setCurrentIndex(currentIndex + 1);\n      }, 1000);\n    }\n    return () => {\n      timeout && clearTimeout(timeout);\n    };\n  }, [autoAnimate, currentIndex]);\n\n  const items: Item[] = useMemo(\n    () =>\n      defaultItems.map((item, index) => ({\n        ...item,\n        status: index < currentIndex ? \"completed\" : index > currentIndex ? \"inactive\" : \"active\",\n      })),\n    [currentIndex],\n  );\n\n  return (\n    <Flex flexDirection=\"column\" flex={1} alignItems=\"center\">\n      <Flex\n        flexDirection=\"column\"\n        p={6}\n        rowGap={3}\n        alignSelf=\"stretch\"\n        alignItems=\"flex-start\"\n        flex={1}\n        borderColor=\"neutral.c100\"\n        border=\"1px solid\"\n      >\n        <Text variant=\"h5Inter\">Controls:</Text>\n        <Switch\n          name=\"Auto animate\"\n          label=\"Auto animate steps\"\n          checked={autoAnimate}\n          onChange={() => setAutoAnimate(!autoAnimate)}\n        />\n        <Button my={3} variant=\"main\" outline onClick={() => setCurrentIndex(items.length)}>\n          Set last step complete\n        </Button>\n        <Text variant=\"body\">\n          Click on a step to make it the active one (this is only for the storybook, not a native\n          feature of this component, although you can implement `onClickIndex` to do that)\n        </Text>\n      </Flex>\n\n      <Flex width={432} mt={10}>\n        <VerticalTimeline steps={items} onClickIndex={index => setCurrentIndex(index)} />\n      </Flex>\n    </Flex>\n  );\n};\n\nexport const Default = Template.bind({});\n"],
+  "mappings": "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",
   "names": ["VerticalTimeline", "React", "Flex", "ContinueOnDevice", "Button"]
 }

package/lib/cjs/components/layout/List/VerticalTimeline/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/layout/List/VerticalTimeline/index.tsx"],
-  "sourcesContent": ["import React, { ReactNode } from \"react\";\n\nimport TimelineItem from \"./TimelineItem\";\nimport { Flex } from \"../..\";\nimport Text, { TextProps } from \"../../../asorted/Text\";\nimport { BaseStyledProps } from \"src/components/styled\";\n\nexport type ItemStatus = \"inactive\" | \"active\" | \"completed\";\n\nexport type Item = {\n  status: ItemStatus;\n  title: string;\n  renderBody?: (isDisplayed?: boolean) => ReactNode;\n  estimatedTime?: number;\n};\n\nexport type Props = BaseStyledProps & {\n  steps?: Item[];\n  onClickIndex?: (index: number) => void;\n};\n\nexport default function VerticalTimeline({ steps, onClickIndex, ...props }: Props) {\n  return (\n    <Flex {...props} flexDirection=\"column\" flex={1}>\n      {steps?.map((step, index) => (\n        <TimelineItem\n          key={index}\n          item={step}\n          isFirstItem={index === 0}\n          isLastItem={index === steps.length - 1}\n          onClick={onClickIndex ? () => onClickIndex(index) : undefined}\n        />\n      ))}\n    </Flex>\n  );\n}\n\nconst SubtitleText: React.FC<TextProps> = (props) => (\n  <Text variant=\"body\" fontWeight=\"semiBold\" color=\"neutral.c100\" mb={3} {...props} />\n);\n\nconst BodyText: React.FC<TextProps> = (props) => (\n  <Text variant=\"bodyLineHeight\" fontWeight=\"medium\" color=\"neutral.c80\" {...props} />\n);\n\nVerticalTimeline.BodyText = BodyText;\nVerticalTimeline.SubtitleText = SubtitleText;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAiC;AAEjC,0BAAyB;AACzB,eAAqB;AACrB,kBAAgC;AAiBjB,SAAR,iBAAkC,EAAE,OAAO,cAAc,GAAG,MAAM,GAAU;AACjF,SACE,6BAAAA,QAAA,cAAC,iBAAM,GAAG,OAAO,eAAc,UAAS,MAAM,KAC3C,+BAAO,IAAI,CAAC,MAAM,UACjB,6BAAAA,QAAA;AAAA,IAAC,oBAAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAM;AAAA,MACN,aAAa,UAAU;AAAA,MACvB,YAAY,UAAU,MAAM,SAAS;AAAA,MACrC,SAAS,eAAe,MAAM,aAAa,KAAK,IAAI;AAAA;AAAA,EACtD,EAEJ;AAEJ;AAEA,MAAM,eAAoC,CAAC,UACzC,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,QAAO,YAAW,YAAW,OAAM,gBAAe,IAAI,GAAI,GAAG,OAAO;AAGpF,MAAM,WAAgC,CAAC,UACrC,6BAAAF,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,kBAAiB,YAAW,UAAS,OAAM,eAAe,GAAG,OAAO;AAGpF,iBAAiB,WAAW;AAC5B,iBAAiB,eAAe;",
+  "sourcesContent": ["import React, { ReactNode } from \"react\";\n\nimport TimelineItem from \"./TimelineItem\";\nimport { Flex } from \"../..\";\nimport Text, { TextProps } from \"../../../asorted/Text\";\nimport { BaseStyledProps } from \"src/components/styled\";\n\nexport type ItemStatus = \"inactive\" | \"active\" | \"completed\";\n\nexport type Item = {\n  status: ItemStatus;\n  title: string;\n  renderBody?: (isDisplayed?: boolean) => ReactNode;\n  estimatedTime?: number;\n};\n\nexport type Props = BaseStyledProps & {\n  steps?: Item[];\n  onClickIndex?: (index: number) => void;\n};\n\nexport default function VerticalTimeline({ steps, onClickIndex, ...props }: Props) {\n  return (\n    <Flex {...props} flexDirection=\"column\" flex={1}>\n      {steps?.map((step, index) => (\n        <TimelineItem\n          key={index}\n          item={step}\n          isFirstItem={index === 0}\n          isLastItem={index === steps.length - 1}\n          onClick={onClickIndex ? () => onClickIndex(index) : undefined}\n        />\n      ))}\n    </Flex>\n  );\n}\n\nconst SubtitleText: React.FC<TextProps> = props => (\n  <Text variant=\"body\" fontWeight=\"semiBold\" color=\"neutral.c100\" mb={3} {...props} />\n);\n\nconst BodyText: React.FC<TextProps> = props => (\n  <Text variant=\"bodyLineHeight\" fontWeight=\"medium\" color=\"neutral.c80\" {...props} />\n);\n\nVerticalTimeline.BodyText = BodyText;\nVerticalTimeline.SubtitleText = SubtitleText;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAiC;AAEjC,0BAAyB;AACzB,eAAqB;AACrB,kBAAgC;AAiBjB,SAAR,iBAAkC,EAAE,OAAO,cAAc,GAAG,MAAM,GAAU;AACjF,SACE,6BAAAA,QAAA,cAAC,iBAAM,GAAG,OAAO,eAAc,UAAS,MAAM,KAC3C,+BAAO,IAAI,CAAC,MAAM,UACjB,6BAAAA,QAAA;AAAA,IAAC,oBAAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAM;AAAA,MACN,aAAa,UAAU;AAAA,MACvB,YAAY,UAAU,MAAM,SAAS;AAAA,MACrC,SAAS,eAAe,MAAM,aAAa,KAAK,IAAI;AAAA;AAAA,EACtD,EAEJ;AAEJ;AAEA,MAAM,eAAoC,WACxC,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,QAAO,YAAW,YAAW,OAAM,gBAAe,IAAI,GAAI,GAAG,OAAO;AAGpF,MAAM,WAAgC,WACpC,6BAAAF,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,kBAAiB,YAAW,UAAS,OAAM,eAAe,GAAG,OAAO;AAGpF,iBAAiB,WAAW;AAC5B,iBAAiB,eAAe;",
   "names": ["React", "TimelineItem", "Text"]
 }

package/lib/cjs/components/layout/Popin/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/layout/Popin/index.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport styled from \"styled-components\";\nimport CloseIcon from \"@ledgerhq/icons-ui/react/CloseMedium\";\nimport ArrowLeftIcon from \"@ledgerhq/icons-ui/react/ArrowLeftMedium\";\n\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\nimport Flex from \"../../layout/Flex\";\nimport type { FlexBoxProps } from \"../../layout/Flex\";\nimport Button from \"../../cta/Button\";\nimport TransitionInOut from \"../../transitions/TransitionInOut\";\nimport TransitionScale from \"../../transitions/TransitionScale\";\n\nexport interface PopinProps extends FlexBoxProps {\n  isOpen: boolean;\n  children: React.ReactNode;\n  menuPortalTarget?: Element | null;\n}\n\nexport type PopinHeaderProps = BaseStyledProps & {\n  onClose?: () => void;\n  onBack?: () => void;\n  children: React.ReactNode;\n};\n\nconst ICON_SIZE = 20;\n\nconst Wrapper = styled(Flex).attrs<FlexBoxProps>((p) => ({\n  flexDirection: \"column\",\n  alignItems: \"stretch\",\n  justifyContent: \"space-between\",\n  height: p.height || `${p.theme.sizes.drawer.popin.max.height}px`,\n  width: p.width || `${p.theme.sizes.drawer.popin.max.width}px`,\n  minHeight: `${p.theme.sizes.drawer.popin.min.height}px`,\n  minWidth: `${p.theme.sizes.drawer.popin.min.width}px`,\n  maxHeight: `${p.theme.sizes.drawer.popin.max.height}px`,\n  maxWidth: `${p.theme.sizes.drawer.popin.max.width}px`,\n  zIndex: p.theme.zIndexes[8],\n  p: p.p !== undefined ? p.p : p.theme.space[10],\n  rowGap: 6,\n  backgroundColor: \"background.main\",\n}))``;\n\nconst Overlay = styled(Flex).attrs((p) => ({\n  justifyContent: \"center\",\n  alignItems: \"center\",\n  width: \"100vw\",\n  height: \"100vh\",\n  zIndex: p.theme.zIndexes[8],\n  position: \"fixed\",\n  top: 0,\n  left: 0,\n  backgroundColor: \"constant.overlay\",\n}))``;\n\nconst Header = baseStyled.section`\n  display: grid;\n  grid-template-columns: [icon] ${ICON_SIZE}px [title] 1fr [icon] ${ICON_SIZE}px;\n  column-gap: 12px;\n`;\n\nconst HeaderTitleContainer = styled(Flex).attrs(() => ({\n  justifyContent: \"center\",\n}))``;\n\nconst PopinBody = baseStyled(Flex).attrs({\n  as: \"section\",\n  flexDirection: \"column\",\n  flex: 1,\n  overflow: \"auto\",\n})``;\n\nconst PopinFooter = baseStyled(Flex).attrs({ as: \"section\" })``;\n\nconst IconContainer = styled(Button.Unstyled)`\n  display: flex;\n  align-items: center;\n`;\n\nconst PopinHeader = ({ children, onClose, onBack, ...props }: PopinHeaderProps) => (\n  <Header {...props}>\n    <Flex>\n      {onBack ? (\n        <IconContainer onClick={onBack}>\n          <ArrowLeftIcon size={ICON_SIZE} color=\"neutral.c100\" />\n        </IconContainer>\n      ) : null}\n    </Flex>\n    <HeaderTitleContainer>{children}</HeaderTitleContainer>\n    <Flex>\n      {onClose ? (\n        <IconContainer onClick={onClose}>\n          <CloseIcon size={ICON_SIZE} color=\"neutral.c100\" />\n        </IconContainer>\n      ) : null}\n    </Flex>\n  </Header>\n);\n\nconst Popin = ({ isOpen, children, width, height, ...props }: PopinProps) => (\n  <TransitionInOut in={isOpen} appear mountOnEnter unmountOnExit>\n    <Overlay>\n      <TransitionScale in={isOpen} appear>\n        <Wrapper width={width} height={height} {...props}>\n          {children}\n        </Wrapper>\n      </TransitionScale>\n    </Overlay>\n  </TransitionInOut>\n);\n\nconst PopinWrapper = ({\n  children,\n  menuPortalTarget,\n  ...popinProps\n}: PopinProps): React.ReactElement => {\n  const $root = React.useMemo(\n    () =>\n      menuPortalTarget === undefined && typeof document !== undefined\n        ? document.querySelector(\"body\")\n        : menuPortalTarget,\n    [menuPortalTarget],\n  );\n  if (!$root) {\n    return <Popin {...popinProps}>{children}</Popin>;\n  } else {\n    return ReactDOM.createPortal(<Popin {...popinProps}>{children}</Popin>, $root);\n  }\n};\n\nPopinWrapper.Header = PopinHeader;\nPopinWrapper.Body = PopinBody;\nPopinWrapper.Footer = PopinFooter;\n\nexport default PopinWrapper;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport styled from \"styled-components\";\nimport CloseIcon from \"@ledgerhq/icons-ui/react/CloseMedium\";\nimport ArrowLeftIcon from \"@ledgerhq/icons-ui/react/ArrowLeftMedium\";\n\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\nimport Flex from \"../../layout/Flex\";\nimport type { FlexBoxProps } from \"../../layout/Flex\";\nimport Button from \"../../cta/Button\";\nimport TransitionInOut from \"../../transitions/TransitionInOut\";\nimport TransitionScale from \"../../transitions/TransitionScale\";\n\nexport interface PopinProps extends FlexBoxProps {\n  isOpen: boolean;\n  children: React.ReactNode;\n  menuPortalTarget?: Element | null;\n}\n\nexport type PopinHeaderProps = BaseStyledProps & {\n  onClose?: () => void;\n  onBack?: () => void;\n  children: React.ReactNode;\n};\n\nconst ICON_SIZE = 20;\n\nconst Wrapper = styled(Flex).attrs<FlexBoxProps>(p => ({\n  flexDirection: \"column\",\n  alignItems: \"stretch\",\n  justifyContent: \"space-between\",\n  height: p.height || `${p.theme.sizes.drawer.popin.max.height}px`,\n  width: p.width || `${p.theme.sizes.drawer.popin.max.width}px`,\n  minHeight: `${p.theme.sizes.drawer.popin.min.height}px`,\n  minWidth: `${p.theme.sizes.drawer.popin.min.width}px`,\n  maxHeight: `${p.theme.sizes.drawer.popin.max.height}px`,\n  maxWidth: `${p.theme.sizes.drawer.popin.max.width}px`,\n  zIndex: p.theme.zIndexes[8],\n  p: p.p !== undefined ? p.p : p.theme.space[10],\n  rowGap: 6,\n  backgroundColor: \"background.main\",\n}))``;\n\nconst Overlay = styled(Flex).attrs(p => ({\n  justifyContent: \"center\",\n  alignItems: \"center\",\n  width: \"100vw\",\n  height: \"100vh\",\n  zIndex: p.theme.zIndexes[8],\n  position: \"fixed\",\n  top: 0,\n  left: 0,\n  backgroundColor: \"constant.overlay\",\n}))``;\n\nconst Header = baseStyled.section`\n  display: grid;\n  grid-template-columns: [icon] ${ICON_SIZE}px [title] 1fr [icon] ${ICON_SIZE}px;\n  column-gap: 12px;\n`;\n\nconst HeaderTitleContainer = styled(Flex).attrs(() => ({\n  justifyContent: \"center\",\n}))``;\n\nconst PopinBody = baseStyled(Flex).attrs({\n  as: \"section\",\n  flexDirection: \"column\",\n  flex: 1,\n  overflow: \"auto\",\n})``;\n\nconst PopinFooter = baseStyled(Flex).attrs({ as: \"section\" })``;\n\nconst IconContainer = styled(Button.Unstyled)`\n  display: flex;\n  align-items: center;\n`;\n\nconst PopinHeader = ({ children, onClose, onBack, ...props }: PopinHeaderProps) => (\n  <Header {...props}>\n    <Flex>\n      {onBack ? (\n        <IconContainer onClick={onBack}>\n          <ArrowLeftIcon size={ICON_SIZE} color=\"neutral.c100\" />\n        </IconContainer>\n      ) : null}\n    </Flex>\n    <HeaderTitleContainer>{children}</HeaderTitleContainer>\n    <Flex>\n      {onClose ? (\n        <IconContainer onClick={onClose}>\n          <CloseIcon size={ICON_SIZE} color=\"neutral.c100\" />\n        </IconContainer>\n      ) : null}\n    </Flex>\n  </Header>\n);\n\nconst Popin = ({ isOpen, children, width, height, ...props }: PopinProps) => (\n  <TransitionInOut in={isOpen} appear mountOnEnter unmountOnExit>\n    <Overlay>\n      <TransitionScale in={isOpen} appear>\n        <Wrapper width={width} height={height} {...props}>\n          {children}\n        </Wrapper>\n      </TransitionScale>\n    </Overlay>\n  </TransitionInOut>\n);\n\nconst PopinWrapper = ({\n  children,\n  menuPortalTarget,\n  ...popinProps\n}: PopinProps): React.ReactElement => {\n  const $root = React.useMemo(\n    () =>\n      menuPortalTarget === undefined && typeof document !== undefined\n        ? document.querySelector(\"body\")\n        : menuPortalTarget,\n    [menuPortalTarget],\n  );\n  if (!$root) {\n    return <Popin {...popinProps}>{children}</Popin>;\n  } else {\n    return ReactDOM.createPortal(<Popin {...popinProps}>{children}</Popin>, $root);\n  }\n};\n\nPopinWrapper.Header = PopinHeader;\nPopinWrapper.Body = PopinBody;\nPopinWrapper.Footer = PopinFooter;\n\nexport default PopinWrapper;\n"],
+  "mappings": "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",
   "names": ["styled", "Flex", "baseStyled", "Button", "React", "ArrowLeftIcon", "CloseIcon", "TransitionInOut", "TransitionScale", "ReactDOM"]
 }

package/lib/cjs/components/layout/Side/Side.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/layout/Side/Side.stories.tsx"],
-  "sourcesContent": ["import React, { useCallback, useEffect } from \"react\";\nimport styled from \"styled-components\";\n\nimport Button from \"../../cta/Button\";\nimport { lipsum } from \"../../helpers\";\nimport Side, { SideProps } from \"./index\";\nimport SideProvider, { setSide } from \"./Provider\";\n\nconst DummyContentWrapper = styled.div`\n  width: 100%;\n  background-color: ${(p) => p.color};\n  align-items: center;\n  padding: ${(p) => p.theme.space[4]}px;\n`;\n\nconst onBackLvl1 = () =>\n  setSide<SideProps & { left: boolean }>(DummyContent, {\n    left: true,\n  });\n\nconst onBackLvl2 = () =>\n  setSide(DummySubContentLvl1, {\n    onBack: onBackLvl1,\n    left: true,\n  });\n\nconst DummyContent = () => (\n  <DummyContentWrapper color={\"#957DAD\"}>\n    <Button\n      onClick={() =>\n        setSide(DummySubContentLvl1, {\n          onBack: onBackLvl1,\n          left: true,\n        })\n      }\n    >\n      {\"Go to level 2\"}\n    </Button>\n  </DummyContentWrapper>\n);\n\nconst DummySubContentLvl1 = () => (\n  <DummyContentWrapper color={\"#E0BBE4\"}>\n    <Button\n      onClick={() =>\n        setSide(DummySubContentLvl2, {\n          onBack: onBackLvl2,\n          left: true,\n        })\n      }\n    >\n      {\"Go to level 3\"}\n    </Button>\n    <div>{lipsum}</div>\n  </DummyContentWrapper>\n);\n\nconst DummySubContentLvl2 = () => (\n  <DummyContentWrapper color={\"#FEC8D8\"}>\n    <div>{lipsum}</div>\n  </DummyContentWrapper>\n);\n\nconst components = {\n  DummyContent,\n  DummySubContentLvl1,\n  DummySubContentLvl2,\n};\n\nexport default {\n  title: \"Layout/Drawer/Side\",\n  component: Side,\n  argTypes: {\n    isOpen: {\n      type: \"boolean\",\n      value: true,\n      description: \"Is open\",\n      required: false,\n      control: {\n        type: \"boolean\",\n      },\n    },\n    title: {\n      type: \"text\",\n      description: \"Side default title\",\n      defaultValue: \"Default title\",\n      control: {\n        type: \"text\",\n      },\n      required: false,\n    },\n    big: {\n      type: \"boolean\",\n      value: true,\n      description: \"Larger width side drawer.\",\n      required: false,\n      control: {\n        type: \"boolean\",\n      },\n    },\n  },\n};\n\nconst Template = (args: SideProps & { isOpen: boolean }) => {\n  const onClose = useCallback(() => setSide(null), []);\n  const onOpen = useCallback(() => setSide(components.DummyContent), []);\n\n  useEffect(() => {\n    if (args.isOpen) onOpen();\n    if (!args.isOpen) onClose();\n  }, [args.isOpen, onClose, onOpen]);\n\n  return (\n    <SideProvider>\n      <Side {...args} />\n    </SideProvider>\n  );\n};\n\nexport const Default = Template.bind({});\n// @ts-expect-error FIXME\nDefault.args = {};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8C;AAC9C,+BAAmB;AAEnB,oBAAmB;AACnB,qBAAuB;AACvB,mBAAgC;AAChC,sBAAsC;AAEtC,MAAM,sBAAsB,yBAAAA,QAAO;AAAA;AAAA,sBAEb,CAAC,MAAM,EAAE;AAAA;AAAA,aAElB,CAAC,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA;AAGnC,MAAM,aAAa,UACjB,yBAAuC,cAAc;AAAA,EACnD,MAAM;AACR,CAAC;AAEH,MAAM,aAAa,UACjB,yBAAQ,qBAAqB;AAAA,EAC3B,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;AAEH,MAAM,eAAe,MACnB,6BAAAC,QAAA,cAAC,uBAAoB,OAAO,aAC1B,6BAAAA,QAAA;AAAA,EAAC,cAAAC;AAAA,EAAA;AAAA,IACC,SAAS,UACP,yBAAQ,qBAAqB;AAAA,MAC3B,QAAQ;AAAA,MACR,MAAM;AAAA,IACR,CAAC;AAAA;AAAA,EAGF;AACH,CACF;AAGF,MAAM,sBAAsB,MAC1B,6BAAAD,QAAA,cAAC,uBAAoB,OAAO,aAC1B,6BAAAA,QAAA;AAAA,EAAC,cAAAC;AAAA,EAAA;AAAA,IACC,SAAS,UACP,yBAAQ,qBAAqB;AAAA,MAC3B,QAAQ;AAAA,MACR,MAAM;AAAA,IACR,CAAC;AAAA;AAAA,EAGF;AACH,GACA,6BAAAD,QAAA,cAAC,aAAK,qBAAO,CACf;AAGF,MAAM,sBAAsB,MAC1B,6BAAAA,QAAA,cAAC,uBAAoB,OAAO,aAC1B,6BAAAA,QAAA,cAAC,aAAK,qBAAO,CACf;AAGF,MAAM,aAAa;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AACF;AAEA,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAE;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,IACA,KAAK;AAAA,MACH,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;AAEA,MAAM,WAAW,CAAC,SAA0C;AAC1D,QAAM,cAAU,0BAAY,UAAM,yBAAQ,IAAI,GAAG,CAAC,CAAC;AACnD,QAAM,aAAS,0BAAY,UAAM,yBAAQ,WAAW,YAAY,GAAG,CAAC,CAAC;AAErE,8BAAU,MAAM;AACd,QAAI,KAAK;AAAQ,aAAO;AACxB,QAAI,CAAC,KAAK;AAAQ,cAAQ;AAAA,EAC5B,GAAG,CAAC,KAAK,QAAQ,SAAS,MAAM,CAAC;AAEjC,SACE,6BAAAF,QAAA,cAAC,gBAAAG,SAAA,MACC,6BAAAH,QAAA,cAAC,aAAAE,SAAA,EAAM,GAAG,MAAM,CAClB;AAEJ;AAEO,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;AAEvC,QAAQ,OAAO,CAAC;",
+  "sourcesContent": ["import React, { useCallback, useEffect } from \"react\";\nimport styled from \"styled-components\";\n\nimport Button from \"../../cta/Button\";\nimport { lipsum } from \"../../helpers\";\nimport Side, { SideProps } from \"./index\";\nimport SideProvider, { setSide } from \"./Provider\";\n\nconst DummyContentWrapper = styled.div`\n  width: 100%;\n  background-color: ${p => p.color};\n  align-items: center;\n  padding: ${p => p.theme.space[4]}px;\n`;\n\nconst onBackLvl1 = () =>\n  setSide<SideProps & { left: boolean }>(DummyContent, {\n    left: true,\n  });\n\nconst onBackLvl2 = () =>\n  setSide(DummySubContentLvl1, {\n    onBack: onBackLvl1,\n    left: true,\n  });\n\nconst DummyContent = () => (\n  <DummyContentWrapper color={\"#957DAD\"}>\n    <Button\n      onClick={() =>\n        setSide(DummySubContentLvl1, {\n          onBack: onBackLvl1,\n          left: true,\n        })\n      }\n    >\n      {\"Go to level 2\"}\n    </Button>\n  </DummyContentWrapper>\n);\n\nconst DummySubContentLvl1 = () => (\n  <DummyContentWrapper color={\"#E0BBE4\"}>\n    <Button\n      onClick={() =>\n        setSide(DummySubContentLvl2, {\n          onBack: onBackLvl2,\n          left: true,\n        })\n      }\n    >\n      {\"Go to level 3\"}\n    </Button>\n    <div>{lipsum}</div>\n  </DummyContentWrapper>\n);\n\nconst DummySubContentLvl2 = () => (\n  <DummyContentWrapper color={\"#FEC8D8\"}>\n    <div>{lipsum}</div>\n  </DummyContentWrapper>\n);\n\nconst components = {\n  DummyContent,\n  DummySubContentLvl1,\n  DummySubContentLvl2,\n};\n\nexport default {\n  title: \"Layout/Drawer/Side\",\n  component: Side,\n  argTypes: {\n    isOpen: {\n      type: \"boolean\",\n      value: true,\n      description: \"Is open\",\n      required: false,\n      control: {\n        type: \"boolean\",\n      },\n    },\n    title: {\n      type: \"text\",\n      description: \"Side default title\",\n      defaultValue: \"Default title\",\n      control: {\n        type: \"text\",\n      },\n      required: false,\n    },\n    big: {\n      type: \"boolean\",\n      value: true,\n      description: \"Larger width side drawer.\",\n      required: false,\n      control: {\n        type: \"boolean\",\n      },\n    },\n  },\n};\n\nconst Template = (args: SideProps & { isOpen: boolean }) => {\n  const onClose = useCallback(() => setSide(null), []);\n  const onOpen = useCallback(() => setSide(components.DummyContent), []);\n\n  useEffect(() => {\n    if (args.isOpen) onOpen();\n    if (!args.isOpen) onClose();\n  }, [args.isOpen, onClose, onOpen]);\n\n  return (\n    <SideProvider>\n      <Side {...args} />\n    </SideProvider>\n  );\n};\n\nexport const Default = Template.bind({});\n// @ts-expect-error FIXME\nDefault.args = {};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8C;AAC9C,+BAAmB;AAEnB,oBAAmB;AACnB,qBAAuB;AACvB,mBAAgC;AAChC,sBAAsC;AAEtC,MAAM,sBAAsB,yBAAAA,QAAO;AAAA;AAAA,sBAEb,OAAK,EAAE;AAAA;AAAA,aAEhB,OAAK,EAAE,MAAM,MAAM,CAAC;AAAA;AAGjC,MAAM,aAAa,UACjB,yBAAuC,cAAc;AAAA,EACnD,MAAM;AACR,CAAC;AAEH,MAAM,aAAa,UACjB,yBAAQ,qBAAqB;AAAA,EAC3B,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;AAEH,MAAM,eAAe,MACnB,6BAAAC,QAAA,cAAC,uBAAoB,OAAO,aAC1B,6BAAAA,QAAA;AAAA,EAAC,cAAAC;AAAA,EAAA;AAAA,IACC,SAAS,UACP,yBAAQ,qBAAqB;AAAA,MAC3B,QAAQ;AAAA,MACR,MAAM;AAAA,IACR,CAAC;AAAA;AAAA,EAGF;AACH,CACF;AAGF,MAAM,sBAAsB,MAC1B,6BAAAD,QAAA,cAAC,uBAAoB,OAAO,aAC1B,6BAAAA,QAAA;AAAA,EAAC,cAAAC;AAAA,EAAA;AAAA,IACC,SAAS,UACP,yBAAQ,qBAAqB;AAAA,MAC3B,QAAQ;AAAA,MACR,MAAM;AAAA,IACR,CAAC;AAAA;AAAA,EAGF;AACH,GACA,6BAAAD,QAAA,cAAC,aAAK,qBAAO,CACf;AAGF,MAAM,sBAAsB,MAC1B,6BAAAA,QAAA,cAAC,uBAAoB,OAAO,aAC1B,6BAAAA,QAAA,cAAC,aAAK,qBAAO,CACf;AAGF,MAAM,aAAa;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AACF;AAEA,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAE;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,IACA,KAAK;AAAA,MACH,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;AAEA,MAAM,WAAW,CAAC,SAA0C;AAC1D,QAAM,cAAU,0BAAY,UAAM,yBAAQ,IAAI,GAAG,CAAC,CAAC;AACnD,QAAM,aAAS,0BAAY,UAAM,yBAAQ,WAAW,YAAY,GAAG,CAAC,CAAC;AAErE,8BAAU,MAAM;AACd,QAAI,KAAK;AAAQ,aAAO;AACxB,QAAI,CAAC,KAAK;AAAQ,cAAQ;AAAA,EAC5B,GAAG,CAAC,KAAK,QAAQ,SAAS,MAAM,CAAC;AAEjC,SACE,6BAAAF,QAAA,cAAC,gBAAAG,SAAA,MACC,6BAAAH,QAAA,cAAC,aAAAE,SAAA,EAAM,GAAG,MAAM,CAClB;AAEJ;AAEO,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;AAEvC,QAAQ,OAAO,CAAC;",
   "names": ["styled", "React", "Button", "Side", "SideProvider"]
 }

package/lib/cjs/components/layout/Side/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/layout/Side/index.tsx"],
-  "sourcesContent": ["import React, { useRef, useCallback, useEffect, useState } from \"react\";\nimport { TransitionGroup } from \"react-transition-group\";\nimport Drawer from \"../Drawer\";\nimport TransitionSlide from \"../../transitions/TransitionSlide\";\nimport { useSide } from \"./Provider\";\n\nexport interface SideProps {\n  onBack?: () => void;\n}\n\nexport const SideWrapper = (props: SideProps): JSX.Element => {\n  // Nb Note that it's not a real queue and we need to handle where we go from each _slide_\n  const { state, setSide } = useSide();\n  const [queue, setQueue] = useState<\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    Array<{ Component: React.ComponentType | null | undefined; props?: any; key: number }>\n  >([]);\n  const [direction, setDirection] = useState(\"left\");\n  const [transitionsEnabled, setTransitionsEnabled] = useState(false);\n  const nonce = useRef(0);\n  const onClose = useCallback(() => setSide(), [setSide]);\n\n  useEffect(() => {\n    setQueue((q) => {\n      if (!state.open || !state.Component) return [];\n      return q.concat([{ ...state, key: nonce.current++ }]);\n    });\n  }, [state]);\n\n  useEffect(() => {\n    let timeout: number;\n\n    if (queue.length > 1) {\n      const [, ...rest] = queue;\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore mismatch between nodejs and dom types\n      timeout = setTimeout(() => {\n        setQueue(rest);\n        setDirection(\"left\");\n      }, 0);\n    }\n\n    return () => {\n      if (timeout) clearTimeout(timeout);\n    };\n  }, [queue]);\n\n  const wrappedOnBack = useCallback(() => {\n    setDirection(\"right\");\n    const onBack = state?.props?.onBack;\n    onBack && onBack();\n  }, [state?.props]);\n\n  return (\n    <Drawer\n      {...props}\n      isOpen={!!state.open}\n      onClose={onClose}\n      onBack={state?.props?.onBack ? wrappedOnBack : undefined}\n      setTransitionsEnabled={setTransitionsEnabled}\n      hideNavigation={false}\n    >\n      <TransitionGroup enter={transitionsEnabled} exit={transitionsEnabled} component={null}>\n        {queue.map(({ Component, props, key }) => (\n          <TransitionSlide key={key} direction={direction}>\n            {Component && <Component {...props} />}\n          </TransitionSlide>\n        ))}\n      </TransitionGroup>\n    </Drawer>\n  );\n};\n\nexport default SideWrapper;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgE;AAChE,oCAAgC;AAChC,oBAAmB;AACnB,6BAA4B;AAC5B,sBAAwB;AAMjB,MAAM,cAAc,CAAC,UAAkC;AAV9D;AAYE,QAAM,EAAE,OAAO,QAAQ,QAAI,yBAAQ;AACnC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAGxB,CAAC,CAAC;AACJ,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,MAAM;AACjD,QAAM,CAAC,oBAAoB,qBAAqB,QAAI,uBAAS,KAAK;AAClE,QAAM,YAAQ,qBAAO,CAAC;AACtB,QAAM,cAAU,0BAAY,MAAM,QAAQ,GAAG,CAAC,OAAO,CAAC;AAEtD,8BAAU,MAAM;AACd,aAAS,CAAC,MAAM;AACd,UAAI,CAAC,MAAM,QAAQ,CAAC,MAAM;AAAW,eAAO,CAAC;AAC7C,aAAO,EAAE,OAAO,CAAC,EAAE,GAAG,OAAO,KAAK,MAAM,UAAU,CAAC,CAAC;AAAA,IACtD,CAAC;AAAA,EACH,GAAG,CAAC,KAAK,CAAC;AAEV,8BAAU,MAAM;AACd,QAAI;AAEJ,QAAI,MAAM,SAAS,GAAG;AACpB,YAAM,CAAC,EAAE,GAAG,IAAI,IAAI;AAGpB,gBAAU,WAAW,MAAM;AACzB,iBAAS,IAAI;AACb,qBAAa,MAAM;AAAA,MACrB,GAAG,CAAC;AAAA,IACN;AAEA,WAAO,MAAM;AACX,UAAI;AAAS,qBAAa,OAAO;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,oBAAgB,0BAAY,MAAM;AA/C1C,QAAAA;AAgDI,iBAAa,OAAO;AACpB,UAAM,UAASA,MAAA,+BAAO,UAAP,gBAAAA,IAAc;AAC7B,cAAU,OAAO;AAAA,EACnB,GAAG,CAAC,+BAAO,KAAK,CAAC;AAEjB,SACE,6BAAAC,QAAA;AAAA,IAAC,cAAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,QAAQ,CAAC,CAAC,MAAM;AAAA,MAChB;AAAA,MACA,UAAQ,oCAAO,UAAP,mBAAc,UAAS,gBAAgB;AAAA,MAC/C;AAAA,MACA,gBAAgB;AAAA;AAAA,IAEhB,6BAAAD,QAAA,cAAC,iDAAgB,OAAO,oBAAoB,MAAM,oBAAoB,WAAW,QAC9E,MAAM,IAAI,CAAC,EAAE,WAAW,OAAAE,QAAO,IAAI,MAClC,6BAAAF,QAAA,cAAC,uBAAAG,SAAA,EAAgB,KAAU,aACxB,aAAa,6BAAAH,QAAA,cAAC,aAAW,GAAGE,QAAO,CACtC,CACD,CACH;AAAA,EACF;AAEJ;AAEA,IAAO,eAAQ;",
+  "sourcesContent": ["import React, { useRef, useCallback, useEffect, useState } from \"react\";\nimport { TransitionGroup } from \"react-transition-group\";\nimport Drawer from \"../Drawer\";\nimport TransitionSlide from \"../../transitions/TransitionSlide\";\nimport { useSide } from \"./Provider\";\n\nexport interface SideProps {\n  onBack?: () => void;\n}\n\nexport const SideWrapper = (props: SideProps): JSX.Element => {\n  // Nb Note that it's not a real queue and we need to handle where we go from each _slide_\n  const { state, setSide } = useSide();\n  const [queue, setQueue] = useState<\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    Array<{ Component: React.ComponentType | null | undefined; props?: any; key: number }>\n  >([]);\n  const [direction, setDirection] = useState(\"left\");\n  const [transitionsEnabled, setTransitionsEnabled] = useState(false);\n  const nonce = useRef(0);\n  const onClose = useCallback(() => setSide(), [setSide]);\n\n  useEffect(() => {\n    setQueue(q => {\n      if (!state.open || !state.Component) return [];\n      return q.concat([{ ...state, key: nonce.current++ }]);\n    });\n  }, [state]);\n\n  useEffect(() => {\n    let timeout: number;\n\n    if (queue.length > 1) {\n      const [, ...rest] = queue;\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore mismatch between nodejs and dom types\n      timeout = setTimeout(() => {\n        setQueue(rest);\n        setDirection(\"left\");\n      }, 0);\n    }\n\n    return () => {\n      if (timeout) clearTimeout(timeout);\n    };\n  }, [queue]);\n\n  const wrappedOnBack = useCallback(() => {\n    setDirection(\"right\");\n    const onBack = state?.props?.onBack;\n    onBack && onBack();\n  }, [state?.props]);\n\n  return (\n    <Drawer\n      {...props}\n      isOpen={!!state.open}\n      onClose={onClose}\n      onBack={state?.props?.onBack ? wrappedOnBack : undefined}\n      setTransitionsEnabled={setTransitionsEnabled}\n      hideNavigation={false}\n    >\n      <TransitionGroup enter={transitionsEnabled} exit={transitionsEnabled} component={null}>\n        {queue.map(({ Component, props, key }) => (\n          <TransitionSlide key={key} direction={direction}>\n            {Component && <Component {...props} />}\n          </TransitionSlide>\n        ))}\n      </TransitionGroup>\n    </Drawer>\n  );\n};\n\nexport default SideWrapper;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgE;AAChE,oCAAgC;AAChC,oBAAmB;AACnB,6BAA4B;AAC5B,sBAAwB;AAMjB,MAAM,cAAc,CAAC,UAAkC;AAV9D;AAYE,QAAM,EAAE,OAAO,QAAQ,QAAI,yBAAQ;AACnC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAGxB,CAAC,CAAC;AACJ,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,MAAM;AACjD,QAAM,CAAC,oBAAoB,qBAAqB,QAAI,uBAAS,KAAK;AAClE,QAAM,YAAQ,qBAAO,CAAC;AACtB,QAAM,cAAU,0BAAY,MAAM,QAAQ,GAAG,CAAC,OAAO,CAAC;AAEtD,8BAAU,MAAM;AACd,aAAS,OAAK;AACZ,UAAI,CAAC,MAAM,QAAQ,CAAC,MAAM;AAAW,eAAO,CAAC;AAC7C,aAAO,EAAE,OAAO,CAAC,EAAE,GAAG,OAAO,KAAK,MAAM,UAAU,CAAC,CAAC;AAAA,IACtD,CAAC;AAAA,EACH,GAAG,CAAC,KAAK,CAAC;AAEV,8BAAU,MAAM;AACd,QAAI;AAEJ,QAAI,MAAM,SAAS,GAAG;AACpB,YAAM,CAAC,EAAE,GAAG,IAAI,IAAI;AAGpB,gBAAU,WAAW,MAAM;AACzB,iBAAS,IAAI;AACb,qBAAa,MAAM;AAAA,MACrB,GAAG,CAAC;AAAA,IACN;AAEA,WAAO,MAAM;AACX,UAAI;AAAS,qBAAa,OAAO;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,oBAAgB,0BAAY,MAAM;AA/C1C,QAAAA;AAgDI,iBAAa,OAAO;AACpB,UAAM,UAASA,MAAA,+BAAO,UAAP,gBAAAA,IAAc;AAC7B,cAAU,OAAO;AAAA,EACnB,GAAG,CAAC,+BAAO,KAAK,CAAC;AAEjB,SACE,6BAAAC,QAAA;AAAA,IAAC,cAAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,QAAQ,CAAC,CAAC,MAAM;AAAA,MAChB;AAAA,MACA,UAAQ,oCAAO,UAAP,mBAAc,UAAS,gBAAgB;AAAA,MAC/C;AAAA,MACA,gBAAgB;AAAA;AAAA,IAEhB,6BAAAD,QAAA,cAAC,iDAAgB,OAAO,oBAAoB,MAAM,oBAAoB,WAAW,QAC9E,MAAM,IAAI,CAAC,EAAE,WAAW,OAAAE,QAAO,IAAI,MAClC,6BAAAF,QAAA,cAAC,uBAAAG,SAAA,EAAgB,KAAU,aACxB,aAAa,6BAAAH,QAAA,cAAC,aAAW,GAAGE,QAAO,CACtC,CACD,CACH;AAAA,EACF;AAEJ;AAEA,IAAO,eAAQ;",
   "names": ["_a", "React", "Drawer", "props", "TransitionSlide"]
 }

package/lib/cjs/components/loaders/ProgressLoader/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/loaders/ProgressLoader/index.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\n\nexport interface Props {\n  /**\n   * Radius of the progress ring.\n   */\n  radius?: number;\n\n  /**\n   * Thickness of the progress ring.\n   */\n  stroke?: number;\n\n  /**\n   * Progress of the loader, in percent, between 0 and 100.\n   */\n  progress?: number;\n\n  /**\n   * Whether to make it infinite, with spinning and whatnot.\n   */\n  infinite?: boolean;\n\n  /**\n   * Whether to display the progress, defaults to true.\n   */\n  showPercentage?: boolean;\n\n  /**\n   * Percentage text color\n   */\n  textColor?: string;\n\n  /**\n   * Front stroke color.\n   */\n  frontStrokeColor?: string;\n\n  /**\n   * Front stroke linecap.\n   * https://developer.mozilla.org/fr/docs/Web/SVG/Attribute/stroke-linecap\n   */\n  frontStrokeLinecap?: \"butt\" | \"round\";\n\n  /**\n   * Background stroke color.\n   */\n  backgroundStrokeColor?: string;\n}\n\nconst StyledCircle = styled.circle.attrs({\n  fill: \"transparent\",\n  cx: \"50%\",\n  cy: \"50%\",\n})`\n  transition: stroke-dashoffset 0.35s;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n`;\n\nconst StyledCircleBackground = styled(StyledCircle).attrs((props) => ({\n  stroke: props.stroke || props.theme.colors.primary.c30,\n}))``;\n\nconst StyledCircleFront = styled(StyledCircle).attrs((props) => ({\n  stroke: props.stroke || props.theme.colors.primary.c80,\n}))``;\n\nconst StyledCenteredText = styled(Text)`\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  text-align: center;\n`;\n\nconst StyledProgressLoaderContainer = styled.div`\n  display: flex;\n  position: absolute;\n`;\nconst StyledSpinningContainer = styled.div`\n  animation: rotation 1s infinite linear;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  @keyframes rotation {\n    from {\n      transform: rotate(0deg);\n    }\n    to {\n      transform: rotate(360deg);\n    }\n  }\n`;\n\nfunction ProgressCircleSvg({\n  radius,\n  stroke,\n  progress,\n  backgroundStrokeColor,\n  frontStrokeColor,\n  frontStrokeLinecap,\n}: {\n  radius: number;\n  stroke: number;\n  progress: number;\n  backgroundStrokeColor?: string;\n  frontStrokeColor?: string;\n  frontStrokeLinecap?: \"butt\" | \"round\" | \"square\";\n}) {\n  const normalizedRadius = radius - stroke / 2;\n  const circumference = normalizedRadius * 2 * Math.PI;\n  const strokeDashoffset = circumference - (progress / 100) * circumference;\n  return (\n    <svg height={radius * 2} width={radius * 2}>\n      <StyledCircleBackground\n        strokeWidth={stroke}\n        strokeDasharray={circumference + \" \" + circumference}\n        style={{ strokeDashoffset: 0 }}\n        stroke={backgroundStrokeColor}\n        r={normalizedRadius}\n      />\n      <StyledCircleFront\n        strokeWidth={stroke}\n        strokeDasharray={circumference + \" \" + circumference}\n        style={{ strokeDashoffset }}\n        stroke={frontStrokeColor}\n        strokeLinecap={frontStrokeLinecap}\n        r={normalizedRadius}\n      />\n    </svg>\n  );\n}\n\nexport default function ProgressLoader({\n  radius = 32,\n  stroke = 6,\n  progress = 0,\n  showPercentage = true,\n  infinite,\n  textColor,\n  frontStrokeColor,\n  frontStrokeLinecap,\n  backgroundStrokeColor,\n}: Props): JSX.Element {\n  return (\n    <StyledProgressLoaderContainer>\n      {showPercentage && (\n        <StyledCenteredText variant=\"body\" color={textColor || \"primary.c80\"}>\n          {progress}%\n        </StyledCenteredText>\n      )}\n      {infinite ? (\n        <StyledSpinningContainer>\n          <ProgressCircleSvg\n            radius={radius}\n            stroke={stroke}\n            progress={25}\n            frontStrokeColor={frontStrokeColor}\n            frontStrokeLinecap={frontStrokeLinecap}\n            backgroundStrokeColor={backgroundStrokeColor}\n          />\n        </StyledSpinningContainer>\n      ) : (\n        <ProgressCircleSvg\n          radius={radius}\n          stroke={stroke}\n          progress={progress}\n          frontStrokeColor={frontStrokeColor}\n          frontStrokeLinecap={frontStrokeLinecap}\n          backgroundStrokeColor={backgroundStrokeColor}\n        />\n      )}\n    </StyledProgressLoaderContainer>\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AAkDjB,MAAM,eAAe,yBAAAA,QAAO,OAAO,MAAM;AAAA,EACvC,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AACN,CAAC;AAAA;AAAA;AAAA;AAAA;AAMD,MAAM,6BAAyB,yBAAAA,SAAO,YAAY,EAAE,MAAM,CAAC,WAAW;AAAA,EACpE,QAAQ,MAAM,UAAU,MAAM,MAAM,OAAO,QAAQ;AACrD,EAAE;AAEF,MAAM,wBAAoB,yBAAAA,SAAO,YAAY,EAAE,MAAM,CAAC,WAAW;AAAA,EAC/D,QAAQ,MAAM,UAAU,MAAM,MAAM,OAAO,QAAQ;AACrD,EAAE;AAEF,MAAM,yBAAqB,yBAAAA,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQtC,MAAM,gCAAgC,yBAAAD,QAAO;AAAA;AAAA;AAAA;AAI7C,MAAM,0BAA0B,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAevC,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,QAAM,mBAAmB,SAAS,SAAS;AAC3C,QAAM,gBAAgB,mBAAmB,IAAI,KAAK;AAClD,QAAM,mBAAmB,gBAAiB,WAAW,MAAO;AAC5D,SACE,6BAAAE,QAAA,cAAC,SAAI,QAAQ,SAAS,GAAG,OAAO,SAAS,KACvC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,iBAAiB,gBAAgB,MAAM;AAAA,MACvC,OAAO,EAAE,kBAAkB,EAAE;AAAA,MAC7B,QAAQ;AAAA,MACR,GAAG;AAAA;AAAA,EACL,GACA,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,iBAAiB,gBAAgB,MAAM;AAAA,MACvC,OAAO,EAAE,iBAAiB;AAAA,MAC1B,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,GAAG;AAAA;AAAA,EACL,CACF;AAEJ;AAEe,SAAR,eAAgC;AAAA,EACrC,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuB;AACrB,SACE,6BAAAA,QAAA,cAAC,qCACE,kBACC,6BAAAA,QAAA,cAAC,sBAAmB,SAAQ,QAAO,OAAO,aAAa,iBACpD,UAAS,GACZ,GAED,WACC,6BAAAA,QAAA,cAAC,+BACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,CACF,IAEA,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,CAEJ;AAEJ;",
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\n\nexport interface Props {\n  /**\n   * Radius of the progress ring.\n   */\n  radius?: number;\n\n  /**\n   * Thickness of the progress ring.\n   */\n  stroke?: number;\n\n  /**\n   * Progress of the loader, in percent, between 0 and 100.\n   */\n  progress?: number;\n\n  /**\n   * Whether to make it infinite, with spinning and whatnot.\n   */\n  infinite?: boolean;\n\n  /**\n   * Whether to display the progress, defaults to true.\n   */\n  showPercentage?: boolean;\n\n  /**\n   * Percentage text color\n   */\n  textColor?: string;\n\n  /**\n   * Front stroke color.\n   */\n  frontStrokeColor?: string;\n\n  /**\n   * Front stroke linecap.\n   * https://developer.mozilla.org/fr/docs/Web/SVG/Attribute/stroke-linecap\n   */\n  frontStrokeLinecap?: \"butt\" | \"round\";\n\n  /**\n   * Background stroke color.\n   */\n  backgroundStrokeColor?: string;\n}\n\nconst StyledCircle = styled.circle.attrs({\n  fill: \"transparent\",\n  cx: \"50%\",\n  cy: \"50%\",\n})`\n  transition: stroke-dashoffset 0.35s;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n`;\n\nconst StyledCircleBackground = styled(StyledCircle).attrs(props => ({\n  stroke: props.stroke || props.theme.colors.primary.c30,\n}))``;\n\nconst StyledCircleFront = styled(StyledCircle).attrs(props => ({\n  stroke: props.stroke || props.theme.colors.primary.c80,\n}))``;\n\nconst StyledCenteredText = styled(Text)`\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  text-align: center;\n`;\n\nconst StyledProgressLoaderContainer = styled.div`\n  display: flex;\n  position: absolute;\n`;\nconst StyledSpinningContainer = styled.div`\n  animation: rotation 1s infinite linear;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  @keyframes rotation {\n    from {\n      transform: rotate(0deg);\n    }\n    to {\n      transform: rotate(360deg);\n    }\n  }\n`;\n\nfunction ProgressCircleSvg({\n  radius,\n  stroke,\n  progress,\n  backgroundStrokeColor,\n  frontStrokeColor,\n  frontStrokeLinecap,\n}: {\n  radius: number;\n  stroke: number;\n  progress: number;\n  backgroundStrokeColor?: string;\n  frontStrokeColor?: string;\n  frontStrokeLinecap?: \"butt\" | \"round\" | \"square\";\n}) {\n  const normalizedRadius = radius - stroke / 2;\n  const circumference = normalizedRadius * 2 * Math.PI;\n  const strokeDashoffset = circumference - (progress / 100) * circumference;\n  return (\n    <svg height={radius * 2} width={radius * 2}>\n      <StyledCircleBackground\n        strokeWidth={stroke}\n        strokeDasharray={circumference + \" \" + circumference}\n        style={{ strokeDashoffset: 0 }}\n        stroke={backgroundStrokeColor}\n        r={normalizedRadius}\n      />\n      <StyledCircleFront\n        strokeWidth={stroke}\n        strokeDasharray={circumference + \" \" + circumference}\n        style={{ strokeDashoffset }}\n        stroke={frontStrokeColor}\n        strokeLinecap={frontStrokeLinecap}\n        r={normalizedRadius}\n      />\n    </svg>\n  );\n}\n\nexport default function ProgressLoader({\n  radius = 32,\n  stroke = 6,\n  progress = 0,\n  showPercentage = true,\n  infinite,\n  textColor,\n  frontStrokeColor,\n  frontStrokeLinecap,\n  backgroundStrokeColor,\n}: Props): JSX.Element {\n  return (\n    <StyledProgressLoaderContainer>\n      {showPercentage && (\n        <StyledCenteredText variant=\"body\" color={textColor || \"primary.c80\"}>\n          {progress}%\n        </StyledCenteredText>\n      )}\n      {infinite ? (\n        <StyledSpinningContainer>\n          <ProgressCircleSvg\n            radius={radius}\n            stroke={stroke}\n            progress={25}\n            frontStrokeColor={frontStrokeColor}\n            frontStrokeLinecap={frontStrokeLinecap}\n            backgroundStrokeColor={backgroundStrokeColor}\n          />\n        </StyledSpinningContainer>\n      ) : (\n        <ProgressCircleSvg\n          radius={radius}\n          stroke={stroke}\n          progress={progress}\n          frontStrokeColor={frontStrokeColor}\n          frontStrokeLinecap={frontStrokeLinecap}\n          backgroundStrokeColor={backgroundStrokeColor}\n        />\n      )}\n    </StyledProgressLoaderContainer>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AAkDjB,MAAM,eAAe,yBAAAA,QAAO,OAAO,MAAM;AAAA,EACvC,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AACN,CAAC;AAAA;AAAA;AAAA;AAAA;AAMD,MAAM,6BAAyB,yBAAAA,SAAO,YAAY,EAAE,MAAM,YAAU;AAAA,EAClE,QAAQ,MAAM,UAAU,MAAM,MAAM,OAAO,QAAQ;AACrD,EAAE;AAEF,MAAM,wBAAoB,yBAAAA,SAAO,YAAY,EAAE,MAAM,YAAU;AAAA,EAC7D,QAAQ,MAAM,UAAU,MAAM,MAAM,OAAO,QAAQ;AACrD,EAAE;AAEF,MAAM,yBAAqB,yBAAAA,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQtC,MAAM,gCAAgC,yBAAAD,QAAO;AAAA;AAAA;AAAA;AAI7C,MAAM,0BAA0B,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAevC,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,QAAM,mBAAmB,SAAS,SAAS;AAC3C,QAAM,gBAAgB,mBAAmB,IAAI,KAAK;AAClD,QAAM,mBAAmB,gBAAiB,WAAW,MAAO;AAC5D,SACE,6BAAAE,QAAA,cAAC,SAAI,QAAQ,SAAS,GAAG,OAAO,SAAS,KACvC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,iBAAiB,gBAAgB,MAAM;AAAA,MACvC,OAAO,EAAE,kBAAkB,EAAE;AAAA,MAC7B,QAAQ;AAAA,MACR,GAAG;AAAA;AAAA,EACL,GACA,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,iBAAiB,gBAAgB,MAAM;AAAA,MACvC,OAAO,EAAE,iBAAiB;AAAA,MAC1B,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,GAAG;AAAA;AAAA,EACL,CACF;AAEJ;AAEe,SAAR,eAAgC;AAAA,EACrC,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuB;AACrB,SACE,6BAAAA,QAAA,cAAC,qCACE,kBACC,6BAAAA,QAAA,cAAC,sBAAmB,SAAQ,QAAO,OAAO,aAAa,iBACpD,UAAS,GACZ,GAED,WACC,6BAAAA,QAAA,cAAC,+BACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,CACF,IAEA,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,CAEJ;AAEJ;",
   "names": ["styled", "Text", "React"]
 }

package/lib/cjs/components/message/Alert/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/message/Alert/index.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport styled, { useTheme, DefaultTheme } from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport { TextVariants } from \"../../../styles/theme\";\nimport Flex from \"../../layout/Flex\";\nimport InfoAltFillMedium from \"@ledgerhq/icons-ui/react/InfoAltFillMedium\";\nimport CircledCheckSolidMedium from \"@ledgerhq/icons-ui/react/CircledCheckSolidMedium\";\nimport WarningSolidMedium from \"@ledgerhq/icons-ui/react/WarningSolidMedium\";\nimport CircledCrossSolidMedium from \"@ledgerhq/icons-ui/react/CircledCrossSolidMedium\";\n\ntype AlertType = \"info\" | \"secondary\" | \"success\" | \"warning\" | \"error\";\n\ntype RenderProps = (props: {\n  textProps: { variant?: TextVariants; fontWeight?: string };\n}) => JSX.Element;\n\nexport interface AlertProps {\n  /**\n   * Affects the colors of the background & text and what icon can be displayed.\n   */\n  type?: AlertType;\n  /**\n   * Title of the Alert.\n   */\n  title?: string;\n  /**\n   * Method for rendering additional content under the title. `{ color: string; textProps: { variant?: TextVariants; fontWeight?: string } }` is passed as props to easily style text elements.\n   */\n  renderContent?: RenderProps;\n\n  /**\n   * Method for rendering additional content to the right. `{ color: string; textProps: { variant?: TextVariants; fontWeight?: string } }` is passed as props to easily style text elements.\n   */\n  renderRight?: RenderProps;\n\n  /**\n   * Additional props to be passed to the top level container (containing icon + content).\n   */\n  containerProps?: Record<string, unknown>;\n\n  /**\n   * Whether or not to display an icon\n   */\n  showIcon?: boolean;\n}\n\nconst StyledIconContainer = styled.div`\n  margin-right: 8px;\n  display: flex;\n  align-items: center;\n`;\n\nconst icons = {\n  info: <InfoAltFillMedium size={24} />,\n  secondary: <InfoAltFillMedium size={24} />,\n  success: <CircledCheckSolidMedium size={24} />,\n  warning: <WarningSolidMedium size={24} />,\n  error: <CircledCrossSolidMedium size={24} />,\n};\n\nconst getColors = ({ theme, type }: { theme: DefaultTheme; type?: AlertType }) => {\n  switch (type) {\n    case \"secondary\":\n      return {\n        background: theme.colors.opacityDefault.c05,\n        iconColor: theme.colors.neutral.c80,\n      };\n    case \"success\":\n      return {\n        background: theme.colors.success.c10,\n        iconColor: theme.colors.success.c50,\n      };\n    case \"warning\":\n      return {\n        background: theme.colors.warning.c10,\n        iconColor: theme.colors.warning.c70,\n      };\n    case \"error\":\n      return {\n        background: theme.colors.error.c10,\n        iconColor: theme.colors.error.c50,\n      };\n    case \"info\":\n    default:\n      return {\n        background: theme.colors.primary.c10,\n        iconColor: theme.colors.primary.c80,\n      };\n  }\n};\n\nconst StyledAlertContainer = styled(Flex)<{ background?: string; color?: string }>`\n  border-radius: ${(p) => `${p.theme.radii[2]}px`};\n  align-items: start;\n`;\n\nconst AlertBodyText = styled(Text).attrs({\n  flexShrink: 1,\n  variant: \"bodyLineHeight\",\n  fontWeight: \"semiBold\",\n})``;\n\nconst AlertUnderlinedText = styled(AlertBodyText)`\n  text-decoration-line: underline;\n`;\n\nfunction Alert({\n  type = \"info\",\n  title,\n  showIcon = true,\n  renderContent,\n  renderRight,\n  containerProps,\n}: AlertProps): JSX.Element {\n  const theme = useTheme();\n  const { iconColor, background } = getColors({ theme, type });\n  const textProps: { variant?: TextVariants; fontWeight?: string } = {\n    variant: \"bodyLineHeight\",\n    fontWeight: \"semiBold\",\n  };\n  const textColor = \"neutral.c100\";\n  return (\n    <StyledAlertContainer\n      color={textColor}\n      backgroundColor={background}\n      padding={6}\n      {...containerProps}\n    >\n      {showIcon && !!icons[type] && (\n        <Flex color={iconColor}>\n          <StyledIconContainer>{icons[type]}</StyledIconContainer>\n        </Flex>\n      )}\n      <Flex flexDirection=\"column\" flex={1} alignItems=\"flex-start\" rowGap=\"6px\">\n        {title && (\n          <Text {...textProps} color={textColor}>\n            {title}\n          </Text>\n        )}\n        {renderContent && renderContent({ textProps })}\n      </Flex>\n      <Flex alignSelf=\"center\">{renderRight && renderRight({ textProps })}</Flex>\n    </StyledAlertContainer>\n  );\n}\n\nAlert.BodyText = AlertBodyText;\nAlert.UnderlinedText = AlertUnderlinedText;\n\nexport default Alert;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React from \"react\";\nimport styled, { useTheme, DefaultTheme } from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport { TextVariants } from \"../../../styles/theme\";\nimport Flex from \"../../layout/Flex\";\nimport InfoAltFillMedium from \"@ledgerhq/icons-ui/react/InfoAltFillMedium\";\nimport CircledCheckSolidMedium from \"@ledgerhq/icons-ui/react/CircledCheckSolidMedium\";\nimport WarningSolidMedium from \"@ledgerhq/icons-ui/react/WarningSolidMedium\";\nimport CircledCrossSolidMedium from \"@ledgerhq/icons-ui/react/CircledCrossSolidMedium\";\n\ntype AlertType = \"info\" | \"secondary\" | \"success\" | \"warning\" | \"error\";\n\ntype RenderProps = (props: {\n  textProps: { variant?: TextVariants; fontWeight?: string };\n}) => JSX.Element;\n\nexport interface AlertProps {\n  /**\n   * Affects the colors of the background & text and what icon can be displayed.\n   */\n  type?: AlertType;\n  /**\n   * Title of the Alert.\n   */\n  title?: string;\n  /**\n   * Method for rendering additional content under the title. `{ color: string; textProps: { variant?: TextVariants; fontWeight?: string } }` is passed as props to easily style text elements.\n   */\n  renderContent?: RenderProps;\n\n  /**\n   * Method for rendering additional content to the right. `{ color: string; textProps: { variant?: TextVariants; fontWeight?: string } }` is passed as props to easily style text elements.\n   */\n  renderRight?: RenderProps;\n\n  /**\n   * Additional props to be passed to the top level container (containing icon + content).\n   */\n  containerProps?: Record<string, unknown>;\n\n  /**\n   * Whether or not to display an icon\n   */\n  showIcon?: boolean;\n}\n\nconst StyledIconContainer = styled.div`\n  margin-right: 8px;\n  display: flex;\n  align-items: center;\n`;\n\nconst icons = {\n  info: <InfoAltFillMedium size={24} />,\n  secondary: <InfoAltFillMedium size={24} />,\n  success: <CircledCheckSolidMedium size={24} />,\n  warning: <WarningSolidMedium size={24} />,\n  error: <CircledCrossSolidMedium size={24} />,\n};\n\nconst getColors = ({ theme, type }: { theme: DefaultTheme; type?: AlertType }) => {\n  switch (type) {\n    case \"secondary\":\n      return {\n        background: theme.colors.opacityDefault.c05,\n        iconColor: theme.colors.neutral.c80,\n      };\n    case \"success\":\n      return {\n        background: theme.colors.success.c10,\n        iconColor: theme.colors.success.c50,\n      };\n    case \"warning\":\n      return {\n        background: theme.colors.warning.c10,\n        iconColor: theme.colors.warning.c70,\n      };\n    case \"error\":\n      return {\n        background: theme.colors.error.c10,\n        iconColor: theme.colors.error.c50,\n      };\n    case \"info\":\n    default:\n      return {\n        background: theme.colors.primary.c10,\n        iconColor: theme.colors.primary.c80,\n      };\n  }\n};\n\nconst StyledAlertContainer = styled(Flex)<{ background?: string; color?: string }>`\n  border-radius: ${p => `${p.theme.radii[2]}px`};\n  align-items: start;\n`;\n\nconst AlertBodyText = styled(Text).attrs({\n  flexShrink: 1,\n  variant: \"bodyLineHeight\",\n  fontWeight: \"semiBold\",\n})``;\n\nconst AlertUnderlinedText = styled(AlertBodyText)`\n  text-decoration-line: underline;\n`;\n\nfunction Alert({\n  type = \"info\",\n  title,\n  showIcon = true,\n  renderContent,\n  renderRight,\n  containerProps,\n}: AlertProps): JSX.Element {\n  const theme = useTheme();\n  const { iconColor, background } = getColors({ theme, type });\n  const textProps: { variant?: TextVariants; fontWeight?: string } = {\n    variant: \"bodyLineHeight\",\n    fontWeight: \"semiBold\",\n  };\n  const textColor = \"neutral.c100\";\n  return (\n    <StyledAlertContainer\n      color={textColor}\n      backgroundColor={background}\n      padding={6}\n      {...containerProps}\n    >\n      {showIcon && !!icons[type] && (\n        <Flex color={iconColor}>\n          <StyledIconContainer>{icons[type]}</StyledIconContainer>\n        </Flex>\n      )}\n      <Flex flexDirection=\"column\" flex={1} alignItems=\"flex-start\" rowGap=\"6px\">\n        {title && (\n          <Text {...textProps} color={textColor}>\n            {title}\n          </Text>\n        )}\n        {renderContent && renderContent({ textProps })}\n      </Flex>\n      <Flex alignSelf=\"center\">{renderRight && renderRight({ textProps })}</Flex>\n    </StyledAlertContainer>\n  );\n}\n\nAlert.BodyText = AlertBodyText;\nAlert.UnderlinedText = AlertUnderlinedText;\n\nexport default Alert;\n"],
+  "mappings": "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",
   "names": ["styled", "React", "InfoAltFillMedium", "CircledCheckSolidMedium", "WarningSolidMedium", "CircledCrossSolidMedium", "Flex", "Text"]
 }

package/lib/cjs/components/message/Log/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/message/Log/index.tsx"],
-  "sourcesContent": ["import React, { memo } from \"react\";\nimport styled from \"styled-components\";\n\nimport Text, { TextProps } from \"../../asorted/Text\";\nimport FlexBox, { FlexBoxProps } from \"../../layout/Flex\";\nimport { BracketRight, BracketLeft } from \"./Brackets\";\n\nexport type Props = React.PropsWithChildren<\n  FlexBoxProps & {\n    extraTextProps?: TextProps;\n  }\n>;\n\nconst Container = styled(FlexBox)`\n  justify-content: center;\n  flex-wrap: wrap;\n  align-items: stretch;\n  min-height: ${(p) => p.theme.space[12]}px;\n`;\n\nconst TextContainer = styled(FlexBox).attrs(() => ({\n  flex: \"1\",\n  justifyContent: \"center\",\n  alignItems: \"center\",\n}))`\n  ${Text} {\n    flex: 1;\n  }\n`;\n\nfunction Log({ children, extraTextProps, ...props }: Props): JSX.Element {\n  return (\n    <Container color=\"neutral.c100\" {...props}>\n      <BracketLeft />\n      <TextContainer flex=\"1\" alignItems=\"center\" justifyContent=\"center\">\n        <Text\n          variant=\"h3\"\n          textTransform=\"uppercase\"\n          textAlign=\"center\"\n          color=\"inherit\"\n          {...extraTextProps}\n        >\n          {children}\n        </Text>\n      </TextContainer>\n      <BracketRight />\n    </Container>\n  );\n}\n\nexport default memo(Log);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA4B;AAC5B,+BAAmB;AAEnB,kBAAgC;AAChC,kBAAsC;AACtC,sBAA0C;AAQ1C,MAAM,gBAAY,yBAAAA,SAAO,YAAAC,OAAO;AAAA;AAAA;AAAA;AAAA,gBAIhB,CAAC,MAAM,EAAE,MAAM,MAAM,EAAE;AAAA;AAGvC,MAAM,oBAAgB,yBAAAD,SAAO,YAAAC,OAAO,EAAE,MAAM,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,YAAY;AACd,EAAE;AAAA,IACE,YAAAC;AAAA;AAAA;AAAA;AAKJ,SAAS,IAAI,EAAE,UAAU,gBAAgB,GAAG,MAAM,GAAuB;AACvE,SACE,6BAAAC,QAAA,cAAC,aAAU,OAAM,gBAAgB,GAAG,SAClC,6BAAAA,QAAA,cAAC,iCAAY,GACb,6BAAAA,QAAA,cAAC,iBAAc,MAAK,KAAI,YAAW,UAAS,gBAAe,YACzD,6BAAAA,QAAA;AAAA,IAAC,YAAAD;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,eAAc;AAAA,MACd,WAAU;AAAA,MACV,OAAM;AAAA,MACL,GAAG;AAAA;AAAA,IAEH;AAAA,EACH,CACF,GACA,6BAAAC,QAAA,cAAC,kCAAa,CAChB;AAEJ;AAEA,IAAO,kBAAQ,mBAAK,GAAG;",
+  "sourcesContent": ["import React, { memo } from \"react\";\nimport styled from \"styled-components\";\n\nimport Text, { TextProps } from \"../../asorted/Text\";\nimport FlexBox, { FlexBoxProps } from \"../../layout/Flex\";\nimport { BracketRight, BracketLeft } from \"./Brackets\";\n\nexport type Props = React.PropsWithChildren<\n  FlexBoxProps & {\n    extraTextProps?: TextProps;\n  }\n>;\n\nconst Container = styled(FlexBox)`\n  justify-content: center;\n  flex-wrap: wrap;\n  align-items: stretch;\n  min-height: ${p => p.theme.space[12]}px;\n`;\n\nconst TextContainer = styled(FlexBox).attrs(() => ({\n  flex: \"1\",\n  justifyContent: \"center\",\n  alignItems: \"center\",\n}))`\n  ${Text} {\n    flex: 1;\n  }\n`;\n\nfunction Log({ children, extraTextProps, ...props }: Props): JSX.Element {\n  return (\n    <Container color=\"neutral.c100\" {...props}>\n      <BracketLeft />\n      <TextContainer flex=\"1\" alignItems=\"center\" justifyContent=\"center\">\n        <Text\n          variant=\"h3\"\n          textTransform=\"uppercase\"\n          textAlign=\"center\"\n          color=\"inherit\"\n          {...extraTextProps}\n        >\n          {children}\n        </Text>\n      </TextContainer>\n      <BracketRight />\n    </Container>\n  );\n}\n\nexport default memo(Log);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA4B;AAC5B,+BAAmB;AAEnB,kBAAgC;AAChC,kBAAsC;AACtC,sBAA0C;AAQ1C,MAAM,gBAAY,yBAAAA,SAAO,YAAAC,OAAO;AAAA;AAAA;AAAA;AAAA,gBAIhB,OAAK,EAAE,MAAM,MAAM,EAAE;AAAA;AAGrC,MAAM,oBAAgB,yBAAAD,SAAO,YAAAC,OAAO,EAAE,MAAM,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,YAAY;AACd,EAAE;AAAA,IACE,YAAAC;AAAA;AAAA;AAAA;AAKJ,SAAS,IAAI,EAAE,UAAU,gBAAgB,GAAG,MAAM,GAAuB;AACvE,SACE,6BAAAC,QAAA,cAAC,aAAU,OAAM,gBAAgB,GAAG,SAClC,6BAAAA,QAAA,cAAC,iCAAY,GACb,6BAAAA,QAAA,cAAC,iBAAc,MAAK,KAAI,YAAW,UAAS,gBAAe,YACzD,6BAAAA,QAAA;AAAA,IAAC,YAAAD;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,eAAc;AAAA,MACd,WAAU;AAAA,MACV,OAAM;AAAA,MACL,GAAG;AAAA;AAAA,IAEH;AAAA,EACH,CACF,GACA,6BAAAC,QAAA,cAAC,kCAAa,CAChB;AAEJ;AAEA,IAAO,kBAAQ,mBAAK,GAAG;",
   "names": ["styled", "FlexBox", "Text", "React"]
 }

package/lib/cjs/components/message/Notification/Badge.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/message/Notification/Badge.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { color, position, shadow, border, background, layout } from \"styled-system\";\n\nconst ActiveCircle = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 10px;\n  width: 10px;\n  border-radius: 9999px;\n  box-sizing: content-box;\n  background-color: ${(p) => p.theme.colors.error.c50};\n\n  border: 2px solid\n    var(\n      --notification-badge-border,\n      ${(p) => {\n        /* The CSS variable is dynamically set by the Notification component */\n        return p.theme.colors.background.main;\n      }}\n    );\n`;\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border-radius: 9999px;\n  ${color}\n  ${position}\n  ${shadow}\n  ${border}\n  ${background}\n  ${layout}\n`;\n\nexport type Props = {\n  /* If true a notification bubble will be displayed in the top right corner of the badge. */\n  active?: boolean;\n  /* JSX filling up the space inside the badge, usually an <Icon />. */\n  icon: JSX.Element;\n} & React.ComponentProps<typeof Wrapper>;\nexport default function Badge({ active, icon, ...props }: Props): JSX.Element {\n  return (\n    <Wrapper {...props}>\n      {icon}\n      {active && <ActiveCircle />}\n    </Wrapper>\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,2BAAoE;AAEpE,MAAM,eAAe,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAQN,CAAC,MAAM,EAAE,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,QAK1C,CAAC,MAAM;AAEP,SAAO,EAAE,MAAM,OAAO,WAAW;AACnC;AAAA;AAAA;AAIN,MAAM,UAAU,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AASW,SAAR,MAAuB,EAAE,QAAQ,MAAM,GAAG,MAAM,GAAuB;AAC5E,SACE,6BAAAC,QAAA,cAAC,WAAS,GAAG,SACV,MACA,UAAU,6BAAAA,QAAA,cAAC,kBAAa,CAC3B;AAEJ;",
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { color, position, shadow, border, background, layout } from \"styled-system\";\n\nconst ActiveCircle = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 10px;\n  width: 10px;\n  border-radius: 9999px;\n  box-sizing: content-box;\n  background-color: ${p => p.theme.colors.error.c50};\n\n  border: 2px solid\n    var(\n      --notification-badge-border,\n      ${p => {\n        /* The CSS variable is dynamically set by the Notification component */\n        return p.theme.colors.background.main;\n      }}\n    );\n`;\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border-radius: 9999px;\n  ${color}\n  ${position}\n  ${shadow}\n  ${border}\n  ${background}\n  ${layout}\n`;\n\nexport type Props = {\n  /* If true a notification bubble will be displayed in the top right corner of the badge. */\n  active?: boolean;\n  /* JSX filling up the space inside the badge, usually an <Icon />. */\n  icon: JSX.Element;\n} & React.ComponentProps<typeof Wrapper>;\nexport default function Badge({ active, icon, ...props }: Props): JSX.Element {\n  return (\n    <Wrapper {...props}>\n      {icon}\n      {active && <ActiveCircle />}\n    </Wrapper>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,2BAAoE;AAEpE,MAAM,eAAe,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAQN,OAAK,EAAE,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,QAKxC,OAAK;AAEL,SAAO,EAAE,MAAM,OAAO,WAAW;AACnC;AAAA;AAAA;AAIN,MAAM,UAAU,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AASW,SAAR,MAAuB,EAAE,QAAQ,MAAM,GAAG,MAAM,GAAuB;AAC5E,SACE,6BAAAC,QAAA,cAAC,WAAS,GAAG,SACV,MACA,UAAU,6BAAAA,QAAA,cAAC,kBAAa,CAC3B;AAEJ;",
   "names": ["styled", "React"]
 }

package/lib/cjs/components/message/Notification/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/message/Notification/index.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport FlexBox, { FlexBoxProps } from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\nimport Badge from \"./Badge\";\nimport Link, { LinkProps } from \"../../cta/Link\";\nimport { ExternalLinkMedium } from \"@ledgerhq/icons-ui/react\";\n\ninterface ContainerProps extends FlexBoxProps {\n  /* Add the pre-selected background. */\n  hasBackground?: boolean;\n}\n\nexport interface Props extends ContainerProps {\n  /* The title to be displayed. */\n  title: string;\n  /* JSX that should be rendered by a call to the <Notification.Badge /> component.*/\n  badge: React.ReactNode;\n  /* An optional description. */\n  description?: string;\n  /* An optional link. */\n  link?: string;\n  /* A callback to perform when clicking on the link. */\n  onLinkClick?: LinkProps[\"onClick\"];\n}\n\nconst Container = styled(FlexBox).attrs<ContainerProps>({\n  p: 6,\n  columnGap: 8,\n  alignItems: \"center\",\n})<ContainerProps>`\n  --notification-badge-border: ${(p) => {\n    /* Set a CSS variable that will be consumed by the Badge component */\n    return p.hasBackground ? p.theme.colors.neutral.c30 : p.theme.colors.background.main;\n  }};\n  background-color: ${(p) => (p.hasBackground ? p.theme.colors.neutral.c30 : \"transparent\")};\n\n  border-radius: 8px;\n`;\n\nfunction Notification({\n  title,\n  description,\n  badge,\n  link,\n  onLinkClick,\n  hasBackground = false,\n  ...containerProps\n}: Props): JSX.Element {\n  return (\n    <Container hasBackground={hasBackground} {...containerProps}>\n      {badge}\n      <FlexBox flexDirection=\"column\" rowGap={3} flex=\"auto\">\n        <Text variant={\"large\"} fontWeight=\"medium\" color=\"neutral.c100\">\n          {title}\n        </Text>\n        {description && (\n          <Text variant={\"paragraph\"} fontWeight=\"medium\" color=\"neutral.c80\" whiteSpace=\"pre-wrap\">\n            {description}\n          </Text>\n        )}\n        {link && (\n          <FlexBox justifyContent={\"flex-start\"}>\n            <Link onClick={(event) => onLinkClick && onLinkClick(event)} Icon={ExternalLinkMedium}>\n              {link}\n            </Link>\n          </FlexBox>\n        )}\n      </FlexBox>\n    </Container>\n  );\n}\nNotification.Badge = Badge;\n\nexport type NotificationType = { (p: Props): JSX.Element; Badge: typeof Badge };\nexport default Notification as NotificationType;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAsC;AACtC,kBAAiB;AACjB,mBAAkB;AAClB,kBAAgC;AAChC,IAAAA,gBAAmC;AAoBnC,MAAM,gBAAY,yBAAAC,SAAO,YAAAC,OAAO,EAAE,MAAsB;AAAA,EACtD,GAAG;AAAA,EACH,WAAW;AAAA,EACX,YAAY;AACd,CAAC;AAAA,iCACgC,CAAC,MAAM;AAEpC,SAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,WAAW;AAClF;AAAA,sBACoB,CAAC,MAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA;AAAA;AAAA;AAK7E,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,GAAG;AACL,GAAuB;AACrB,SACE,6BAAAC,QAAA,cAAC,aAAU,eAA+B,GAAG,kBAC1C,OACD,6BAAAA,QAAA,cAAC,YAAAD,SAAA,EAAQ,eAAc,UAAS,QAAQ,GAAG,MAAK,UAC9C,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAS,SAAS,YAAW,UAAS,OAAM,kBAC/C,KACH,GACC,eACC,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAS,aAAa,YAAW,UAAS,OAAM,eAAc,YAAW,cAC5E,WACH,GAED,QACC,6BAAAD,QAAA,cAAC,YAAAD,SAAA,EAAQ,gBAAgB,gBACvB,6BAAAC,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAS,CAAC,UAAU,eAAe,YAAY,KAAK,GAAG,MAAM,oCAChE,IACH,CACF,CAEJ,CACF;AAEJ;AACA,aAAa,QAAQ,aAAAC;AAGrB,IAAO,uBAAQ;",
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport FlexBox, { FlexBoxProps } from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\nimport Badge from \"./Badge\";\nimport Link, { LinkProps } from \"../../cta/Link\";\nimport { ExternalLinkMedium } from \"@ledgerhq/icons-ui/react\";\n\ninterface ContainerProps extends FlexBoxProps {\n  /* Add the pre-selected background. */\n  hasBackground?: boolean;\n}\n\nexport interface Props extends ContainerProps {\n  /* The title to be displayed. */\n  title: string;\n  /* JSX that should be rendered by a call to the <Notification.Badge /> component.*/\n  badge: React.ReactNode;\n  /* An optional description. */\n  description?: string;\n  /* An optional link. */\n  link?: string;\n  /* A callback to perform when clicking on the link. */\n  onLinkClick?: LinkProps[\"onClick\"];\n}\n\nconst Container = styled(FlexBox).attrs<ContainerProps>({\n  p: 6,\n  columnGap: 8,\n  alignItems: \"center\",\n})<ContainerProps>`\n  --notification-badge-border: ${p => {\n    /* Set a CSS variable that will be consumed by the Badge component */\n    return p.hasBackground ? p.theme.colors.neutral.c30 : p.theme.colors.background.main;\n  }};\n  background-color: ${p => (p.hasBackground ? p.theme.colors.neutral.c30 : \"transparent\")};\n\n  border-radius: 8px;\n`;\n\nfunction Notification({\n  title,\n  description,\n  badge,\n  link,\n  onLinkClick,\n  hasBackground = false,\n  ...containerProps\n}: Props): JSX.Element {\n  return (\n    <Container hasBackground={hasBackground} {...containerProps}>\n      {badge}\n      <FlexBox flexDirection=\"column\" rowGap={3} flex=\"auto\">\n        <Text variant={\"large\"} fontWeight=\"medium\" color=\"neutral.c100\">\n          {title}\n        </Text>\n        {description && (\n          <Text variant={\"paragraph\"} fontWeight=\"medium\" color=\"neutral.c80\" whiteSpace=\"pre-wrap\">\n            {description}\n          </Text>\n        )}\n        {link && (\n          <FlexBox justifyContent={\"flex-start\"}>\n            <Link onClick={event => onLinkClick && onLinkClick(event)} Icon={ExternalLinkMedium}>\n              {link}\n            </Link>\n          </FlexBox>\n        )}\n      </FlexBox>\n    </Container>\n  );\n}\nNotification.Badge = Badge;\n\nexport type NotificationType = { (p: Props): JSX.Element; Badge: typeof Badge };\nexport default Notification as NotificationType;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAsC;AACtC,kBAAiB;AACjB,mBAAkB;AAClB,kBAAgC;AAChC,IAAAA,gBAAmC;AAoBnC,MAAM,gBAAY,yBAAAC,SAAO,YAAAC,OAAO,EAAE,MAAsB;AAAA,EACtD,GAAG;AAAA,EACH,WAAW;AAAA,EACX,YAAY;AACd,CAAC;AAAA,iCACgC,OAAK;AAElC,SAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,WAAW;AAClF;AAAA,sBACoB,OAAM,EAAE,gBAAgB,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA;AAAA;AAAA;AAK3E,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,GAAG;AACL,GAAuB;AACrB,SACE,6BAAAC,QAAA,cAAC,aAAU,eAA+B,GAAG,kBAC1C,OACD,6BAAAA,QAAA,cAAC,YAAAD,SAAA,EAAQ,eAAc,UAAS,QAAQ,GAAG,MAAK,UAC9C,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAS,SAAS,YAAW,UAAS,OAAM,kBAC/C,KACH,GACC,eACC,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAS,aAAa,YAAW,UAAS,OAAM,eAAc,YAAW,cAC5E,WACH,GAED,QACC,6BAAAD,QAAA,cAAC,YAAAD,SAAA,EAAQ,gBAAgB,gBACvB,6BAAAC,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAS,WAAS,eAAe,YAAY,KAAK,GAAG,MAAM,oCAC9D,IACH,CACF,CAEJ,CACF;AAEJ;AACA,aAAa,QAAQ,aAAAC;AAGrB,IAAO,uBAAQ;",
   "names": ["import_react", "styled", "FlexBox", "React", "Text", "Link", "Badge"]
 }

package/lib/cjs/components/message/StatusNotification/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/message/StatusNotification/index.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport FlexBox, { FlexBoxProps } from \"../../layout/Flex\";\nimport Log from \"../Log/\";\n\ninterface ContainerProps extends FlexBoxProps {\n  /* Add the pre-selected border. */\n  hasBorder?: boolean;\n}\n\nexport interface Props extends ContainerProps {\n  /* The text to be displayed. */\n  text: string;\n  /* JSX that should be rendered on top of the Notification.*/\n  badge: React.ReactNode;\n}\n\nconst Container = styled(FlexBox).attrs<ContainerProps>({\n  p: 8,\n  rowGap: 9,\n  alignItems: \"center\",\n  flexDirection: \"column\",\n})<ContainerProps>`\n  border-width: 1px;\n  border-style: ${(p) => (p.hasBorder ? \"solid\" : \"none\")};\n  border-radius: 8px;\n  border-color: ${(p) => p.theme.colors.neutral.c40};\n`;\n\nfunction StatusNotification({\n  text,\n  badge,\n  hasBorder = false,\n  ...containerProps\n}: Props): JSX.Element {\n  return (\n    <Container hasBorder={hasBorder} {...containerProps}>\n      {badge}\n      <Log>{text}</Log>\n    </Container>\n  );\n}\n\nexport default StatusNotification;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAsC;AACtC,iBAAgB;AAchB,MAAM,gBAAY,yBAAAA,SAAO,YAAAC,OAAO,EAAE,MAAsB;AAAA,EACtD,GAAG;AAAA,EACH,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,eAAe;AACjB,CAAC;AAAA;AAAA,kBAEiB,CAAC,MAAO,EAAE,YAAY,UAAU;AAAA;AAAA,kBAEhC,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAGhD,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,GAAuB;AACrB,SACE,6BAAAC,QAAA,cAAC,aAAU,WAAuB,GAAG,kBAClC,OACD,6BAAAA,QAAA,cAAC,WAAAC,SAAA,MAAK,IAAK,CACb;AAEJ;AAEA,IAAO,6BAAQ;",
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport FlexBox, { FlexBoxProps } from \"../../layout/Flex\";\nimport Log from \"../Log/\";\n\ninterface ContainerProps extends FlexBoxProps {\n  /* Add the pre-selected border. */\n  hasBorder?: boolean;\n}\n\nexport interface Props extends ContainerProps {\n  /* The text to be displayed. */\n  text: string;\n  /* JSX that should be rendered on top of the Notification.*/\n  badge: React.ReactNode;\n}\n\nconst Container = styled(FlexBox).attrs<ContainerProps>({\n  p: 8,\n  rowGap: 9,\n  alignItems: \"center\",\n  flexDirection: \"column\",\n})<ContainerProps>`\n  border-width: 1px;\n  border-style: ${p => (p.hasBorder ? \"solid\" : \"none\")};\n  border-radius: 8px;\n  border-color: ${p => p.theme.colors.neutral.c40};\n`;\n\nfunction StatusNotification({\n  text,\n  badge,\n  hasBorder = false,\n  ...containerProps\n}: Props): JSX.Element {\n  return (\n    <Container hasBorder={hasBorder} {...containerProps}>\n      {badge}\n      <Log>{text}</Log>\n    </Container>\n  );\n}\n\nexport default StatusNotification;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAsC;AACtC,iBAAgB;AAchB,MAAM,gBAAY,yBAAAA,SAAO,YAAAC,OAAO,EAAE,MAAsB;AAAA,EACtD,GAAG;AAAA,EACH,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,eAAe;AACjB,CAAC;AAAA;AAAA,kBAEiB,OAAM,EAAE,YAAY,UAAU;AAAA;AAAA,kBAE9B,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAG9C,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,GAAuB;AACrB,SACE,6BAAAC,QAAA,cAAC,aAAU,WAAuB,GAAG,kBAClC,OACD,6BAAAA,QAAA,cAAC,WAAAC,SAAA,MAAK,IAAK,CACb;AAEJ;AAEA,IAAO,6BAAQ;",
   "names": ["styled", "FlexBox", "React", "Log"]
 }

package/lib/cjs/components/message/Tip/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/message/Tip/index.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport { CheckAloneMedium, CloseMedium, CircledAlertMedium } from \"@ledgerhq/icons-ui/react\";\nimport { Flex } from \"../../layout\";\n\ntype TipType = \"success\" | \"warning\" | \"error\";\n\nexport interface TipProps {\n  type?: TipType;\n  label: string;\n}\n\nconst icons = {\n  success: <CheckAloneMedium size={16} />,\n  warning: <CircledAlertMedium size={16} />,\n  error: <CloseMedium size={16} />,\n};\n\nconst StyledIconContainer = styled.div<{ type?: TipType }>`\n  ${(p) => {\n    switch (p.type) {\n      case \"warning\":\n        return css`\n          background: ${p.theme.colors.warning.c10};\n          color: ${p.theme.colors.warning.c50};\n        `;\n      case \"error\":\n        return css`\n          background: ${p.theme.colors.error.c10};\n          color: ${p.theme.colors.error.c50};\n        `;\n      case \"success\":\n      default:\n        return css`\n          background: ${p.theme.colors.success.c30};\n          color: ${p.theme.colors.success.c50};\n        `;\n    }\n  }}\n\n  border-radius: ${(p) => `${p.theme.radii[1]}px`};\n  margin-right: ${(p) => `${p.theme.space[6]}px`};\n  padding: 6px;\n  display: flex;\n  align-items: center;\n`;\n\nexport default function Tip({ type, label }: TipProps): JSX.Element {\n  return (\n    <Flex alignItems={\"center\"}>\n      {type && <StyledIconContainer type={type}>{icons[type]}</StyledIconContainer>}\n      <Text variant={\"paragraph\"} fontWeight={\"medium\"} color={\"neutral.c100\"} flexShrink={1}>\n        {label}\n      </Text>\n    </Flex>\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAA4B;AAC5B,kBAAiB;AACjB,IAAAA,gBAAkE;AAClE,oBAAqB;AASrB,MAAM,QAAQ;AAAA,EACZ,SAAS,6BAAAC,QAAA,cAAC,kCAAiB,MAAM,IAAI;AAAA,EACrC,SAAS,6BAAAA,QAAA,cAAC,oCAAmB,MAAM,IAAI;AAAA,EACvC,OAAO,6BAAAA,QAAA,cAAC,6BAAY,MAAM,IAAI;AAChC;AAEA,MAAM,sBAAsB,yBAAAC,QAAO;AAAA,IAC/B,CAAC,MAAM;AACP,UAAQ,EAAE,MAAM;AAAA,IACd,KAAK;AACH,aAAO;AAAA,wBACS,EAAE,MAAM,OAAO,QAAQ;AAAA,mBAC5B,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA,IAEpC,KAAK;AACH,aAAO;AAAA,wBACS,EAAE,MAAM,OAAO,MAAM;AAAA,mBAC1B,EAAE,MAAM,OAAO,MAAM;AAAA;AAAA,IAElC,KAAK;AAAA,IACL;AACE,aAAO;AAAA,wBACS,EAAE,MAAM,OAAO,QAAQ;AAAA,mBAC5B,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA,EAEtC;AACF;AAAA;AAAA,mBAEiB,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM,CAAC;AAAA,kBAC1B,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAM5B,SAAR,IAAqB,EAAE,MAAM,MAAM,GAA0B;AAClE,SACE,6BAAAD,QAAA,cAAC,sBAAK,YAAY,YACf,QAAQ,6BAAAA,QAAA,cAAC,uBAAoB,QAAa,MAAM,IAAI,CAAE,GACvD,6BAAAA,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAS,aAAa,YAAY,UAAU,OAAO,gBAAgB,YAAY,KAClF,KACH,CACF;AAEJ;",
+  "sourcesContent": ["import React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport { CheckAloneMedium, CloseMedium, CircledAlertMedium } from \"@ledgerhq/icons-ui/react\";\nimport { Flex } from \"../../layout\";\n\ntype TipType = \"success\" | \"warning\" | \"error\";\n\nexport interface TipProps {\n  type?: TipType;\n  label: string;\n}\n\nconst icons = {\n  success: <CheckAloneMedium size={16} />,\n  warning: <CircledAlertMedium size={16} />,\n  error: <CloseMedium size={16} />,\n};\n\nconst StyledIconContainer = styled.div<{ type?: TipType }>`\n  ${p => {\n    switch (p.type) {\n      case \"warning\":\n        return css`\n          background: ${p.theme.colors.warning.c10};\n          color: ${p.theme.colors.warning.c50};\n        `;\n      case \"error\":\n        return css`\n          background: ${p.theme.colors.error.c10};\n          color: ${p.theme.colors.error.c50};\n        `;\n      case \"success\":\n      default:\n        return css`\n          background: ${p.theme.colors.success.c30};\n          color: ${p.theme.colors.success.c50};\n        `;\n    }\n  }}\n\n  border-radius: ${p => `${p.theme.radii[1]}px`};\n  margin-right: ${p => `${p.theme.space[6]}px`};\n  padding: 6px;\n  display: flex;\n  align-items: center;\n`;\n\nexport default function Tip({ type, label }: TipProps): JSX.Element {\n  return (\n    <Flex alignItems={\"center\"}>\n      {type && <StyledIconContainer type={type}>{icons[type]}</StyledIconContainer>}\n      <Text variant={\"paragraph\"} fontWeight={\"medium\"} color={\"neutral.c100\"} flexShrink={1}>\n        {label}\n      </Text>\n    </Flex>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAA4B;AAC5B,kBAAiB;AACjB,IAAAA,gBAAkE;AAClE,oBAAqB;AASrB,MAAM,QAAQ;AAAA,EACZ,SAAS,6BAAAC,QAAA,cAAC,kCAAiB,MAAM,IAAI;AAAA,EACrC,SAAS,6BAAAA,QAAA,cAAC,oCAAmB,MAAM,IAAI;AAAA,EACvC,OAAO,6BAAAA,QAAA,cAAC,6BAAY,MAAM,IAAI;AAChC;AAEA,MAAM,sBAAsB,yBAAAC,QAAO;AAAA,IAC/B,OAAK;AACL,UAAQ,EAAE,MAAM;AAAA,IACd,KAAK;AACH,aAAO;AAAA,wBACS,EAAE,MAAM,OAAO,QAAQ;AAAA,mBAC5B,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA,IAEpC,KAAK;AACH,aAAO;AAAA,wBACS,EAAE,MAAM,OAAO,MAAM;AAAA,mBAC1B,EAAE,MAAM,OAAO,MAAM;AAAA;AAAA,IAElC,KAAK;AAAA,IACL;AACE,aAAO;AAAA,wBACS,EAAE,MAAM,OAAO,QAAQ;AAAA,mBAC5B,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA,EAEtC;AACF;AAAA;AAAA,mBAEiB,OAAK,GAAG,EAAE,MAAM,MAAM,CAAC;AAAA,kBACxB,OAAK,GAAG,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAM1B,SAAR,IAAqB,EAAE,MAAM,MAAM,GAA0B;AAClE,SACE,6BAAAD,QAAA,cAAC,sBAAK,YAAY,YACf,QAAQ,6BAAAA,QAAA,cAAC,uBAAoB,QAAa,MAAM,IAAI,CAAE,GACvD,6BAAAA,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAS,aAAa,YAAY,UAAU,OAAO,gBAAgB,YAAY,KAClF,KACH,CACF;AAEJ;",
   "names": ["import_react", "React", "styled", "Text"]
 }

package/lib/cjs/components/message/Tooltip/Tooltip.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/message/Tooltip/Tooltip.stories.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport { StoryTemplate } from \"src/components/helpers\";\n\nimport Text from \"../../asorted/Text\";\nimport FlexBox from \"../../layout/Flex\";\nimport TooltipComponent, { Props } from \"./index\";\n\nconst description = `\n### Tooltips display informative text when users hover over an element.\n\nThis component is based on [tippyjs](https://atomiks.github.io/tippyjs/) which is powerful library.\nPlease check [the documentation](https://github.com/atomiks/tippyjs-react#-props) for the full props list and usage.\n\n## Usage\n\n\\`\\`\\`js\n\nimport { Tooltip } from \"@ledgerhq/react-ui\"\n\n\\`\\`\\`\n\nWrap some jsx that will make the tooltip visible on mouse over.<br/>\n_**Note:** this jsx will automatically be wrapped inside a \\`span\\` element if the ref cannot be forwarded. \\\nSee [here](https://github.com/atomiks/tippyjs-react#component-children) for a detailed explanation._\n\nTo set the tooltip inner contents, use the \\`content\\` prop.\n\n\\`\\`\\`js\n<Tooltip content=\"Hello!\" {...props}>\n  <div>Hover me</div>\n</Tooltip>\n\\`\\`\\`\n\n## Sandbox\n\nPlacement, style and content can be customized using props as demonstrated in the following example.\n`;\n\nexport default {\n  title: \"Messages/Tooltip\",\n  component: TooltipComponent,\n  parameters: {\n    docs: {\n      description: {\n        component: description,\n      },\n    },\n  },\n  argTypes: {\n    content: { type: \"string\", defaultValue: \"Hello World!\" },\n    visible: { options: [true, false, undefined] },\n    disabled: { type: \"boolean\" },\n    placement: {\n      control: { type: \"radio\" },\n      options: [\n        \"top\",\n        \"top-start\",\n        \"top-end\",\n        \"right\",\n        \"right-start\",\n        \"right-end\",\n        \"bottom\",\n        \"bottom-start\",\n        \"bottom-end\",\n        \"left\",\n        \"left-start\",\n        \"left-end\",\n        \"auto\",\n        \"auto-start\",\n        \"auto-end\",\n      ],\n    },\n  },\n};\n\nexport const Tooltip: StoryTemplate<Props> = (args) => (\n  <FlexBox alignItems=\"center\" justifyContent=\"center\">\n    <TooltipComponent {...args}>\n      <div style={{ margin: \"50px\" }}>\n        <Text\n          as=\"div\"\n          fontWeight=\"semiBold\"\n          color=\"neutral.c100\"\n          style={{ border: \"2px solid #AAA\", borderRadius: \"5px\" }}\n          p={10}\n          textAlign=\"center\"\n        >\n          Hover\n          <br />\n          me\n        </Text>\n      </div>\n    </TooltipComponent>\n  </FlexBox>\n);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,kBAAiB;AACjB,kBAAoB;AACpB,mBAAwC;AAExC,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BpB,IAAO,0BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,SAAS,EAAE,MAAM,UAAU,cAAc,eAAe;AAAA,IACxD,SAAS,EAAE,SAAS,CAAC,MAAM,OAAO,MAAS,EAAE;AAAA,IAC7C,UAAU,EAAE,MAAM,UAAU;AAAA,IAC5B,WAAW;AAAA,MACT,SAAS,EAAE,MAAM,QAAQ;AAAA,MACzB,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEO,MAAM,UAAgC,CAAC,SAC5C,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAQ,YAAW,UAAS,gBAAe,YAC1C,6BAAAD,QAAA,cAAC,aAAAD,SAAA,EAAkB,GAAG,QACpB,6BAAAC,QAAA,cAAC,SAAI,OAAO,EAAE,QAAQ,OAAO,KAC3B,6BAAAA,QAAA;AAAA,EAAC,YAAAE;AAAA,EAAA;AAAA,IACC,IAAG;AAAA,IACH,YAAW;AAAA,IACX,OAAM;AAAA,IACN,OAAO,EAAE,QAAQ,kBAAkB,cAAc,MAAM;AAAA,IACvD,GAAG;AAAA,IACH,WAAU;AAAA;AAAA,EACX;AAAA,EAEC,6BAAAF,QAAA,cAAC,UAAG;AAAA,EAAE;AAER,CACF,CACF,CACF;",
+  "sourcesContent": ["import React from \"react\";\nimport { StoryTemplate } from \"src/components/helpers\";\n\nimport Text from \"../../asorted/Text\";\nimport FlexBox from \"../../layout/Flex\";\nimport TooltipComponent, { Props } from \"./index\";\n\nconst description = `\n### Tooltips display informative text when users hover over an element.\n\nThis component is based on [tippyjs](https://atomiks.github.io/tippyjs/) which is powerful library.\nPlease check [the documentation](https://github.com/atomiks/tippyjs-react#-props) for the full props list and usage.\n\n## Usage\n\n\\`\\`\\`js\n\nimport { Tooltip } from \"@ledgerhq/react-ui\"\n\n\\`\\`\\`\n\nWrap some jsx that will make the tooltip visible on mouse over.<br/>\n_**Note:** this jsx will automatically be wrapped inside a \\`span\\` element if the ref cannot be forwarded. \\\nSee [here](https://github.com/atomiks/tippyjs-react#component-children) for a detailed explanation._\n\nTo set the tooltip inner contents, use the \\`content\\` prop.\n\n\\`\\`\\`js\n<Tooltip content=\"Hello!\" {...props}>\n  <div>Hover me</div>\n</Tooltip>\n\\`\\`\\`\n\n## Sandbox\n\nPlacement, style and content can be customized using props as demonstrated in the following example.\n`;\n\nexport default {\n  title: \"Messages/Tooltip\",\n  component: TooltipComponent,\n  parameters: {\n    docs: {\n      description: {\n        component: description,\n      },\n    },\n  },\n  argTypes: {\n    content: { type: \"string\", defaultValue: \"Hello World!\" },\n    visible: { options: [true, false, undefined] },\n    disabled: { type: \"boolean\" },\n    placement: {\n      control: { type: \"radio\" },\n      options: [\n        \"top\",\n        \"top-start\",\n        \"top-end\",\n        \"right\",\n        \"right-start\",\n        \"right-end\",\n        \"bottom\",\n        \"bottom-start\",\n        \"bottom-end\",\n        \"left\",\n        \"left-start\",\n        \"left-end\",\n        \"auto\",\n        \"auto-start\",\n        \"auto-end\",\n      ],\n    },\n  },\n};\n\nexport const Tooltip: StoryTemplate<Props> = args => (\n  <FlexBox alignItems=\"center\" justifyContent=\"center\">\n    <TooltipComponent {...args}>\n      <div style={{ margin: \"50px\" }}>\n        <Text\n          as=\"div\"\n          fontWeight=\"semiBold\"\n          color=\"neutral.c100\"\n          style={{ border: \"2px solid #AAA\", borderRadius: \"5px\" }}\n          p={10}\n          textAlign=\"center\"\n        >\n          Hover\n          <br />\n          me\n        </Text>\n      </div>\n    </TooltipComponent>\n  </FlexBox>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,kBAAiB;AACjB,kBAAoB;AACpB,mBAAwC;AAExC,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BpB,IAAO,0BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,SAAS,EAAE,MAAM,UAAU,cAAc,eAAe;AAAA,IACxD,SAAS,EAAE,SAAS,CAAC,MAAM,OAAO,MAAS,EAAE;AAAA,IAC7C,UAAU,EAAE,MAAM,UAAU;AAAA,IAC5B,WAAW;AAAA,MACT,SAAS,EAAE,MAAM,QAAQ;AAAA,MACzB,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEO,MAAM,UAAgC,UAC3C,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAQ,YAAW,UAAS,gBAAe,YAC1C,6BAAAD,QAAA,cAAC,aAAAD,SAAA,EAAkB,GAAG,QACpB,6BAAAC,QAAA,cAAC,SAAI,OAAO,EAAE,QAAQ,OAAO,KAC3B,6BAAAA,QAAA;AAAA,EAAC,YAAAE;AAAA,EAAA;AAAA,IACC,IAAG;AAAA,IACH,YAAW;AAAA,IACX,OAAM;AAAA,IACN,OAAO,EAAE,QAAQ,kBAAkB,cAAc,MAAM;AAAA,IACvD,GAAG;AAAA,IACH,WAAU;AAAA;AAAA,EACX;AAAA,EAEC,6BAAAF,QAAA,cAAC,UAAG;AAAA,EAAE;AAER,CACF,CACF,CACF;",
   "names": ["TooltipComponent", "React", "FlexBox", "Text"]
 }

package/lib/cjs/components/navigation/Breadcrumb/Breadcrumb.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/navigation/Breadcrumb/Breadcrumb.stories.tsx"],
-  "sourcesContent": ["import React, { useState, useCallback, useMemo } from \"react\";\nimport styled from \"styled-components\";\n\nimport Text from \"../../asorted/Text\";\nimport FlexBox from \"../../layout/Flex\";\nimport BreadcrumbComponent, { Props } from \"./index\";\n\nexport default {\n  title: \"Navigation/Breadcrumb\",\n  component: BreadcrumbComponent,\n};\n\ntype Route = {\n  path: string;\n  label: string;\n  routes?: Route[];\n};\nconst routes: Route[] = [\n  {\n    path: \"settings\",\n    label: \"Settings\",\n    routes: [\n      { path: \"experimental\", label: \"Experimental\" },\n      { path: \"developer\", label: \"Developer\" },\n    ],\n  },\n  {\n    path: \"account\",\n    label: \"Account\",\n    routes: [{ path: \"user\", label: \"User\", routes: [{ path: \"edit\", label: \"Edit\" }] }],\n  },\n  {\n    path: \"apps\",\n    label: \"Applications\",\n    routes: [\n      { path: \"buy\", label: \"Buy\" },\n      { path: \"sell\", label: \"Sell\" },\n      { path: \"swap\", label: \"Swap\", routes: [{ path: \"confirm\", label: \"Confirm\" }] },\n    ],\n  },\n];\n\nconst RouteElement = styled.div`\n  :hover {\n    text-decoration: underline;\n  }\n`;\nconst Routes = ({\n  onClick,\n  routes,\n  previousPath = [],\n}: {\n  onClick: (path: string) => void;\n  routes?: Route[];\n  previousPath?: string[];\n}): JSX.Element | null => {\n  if (!routes || routes.length === 0) return null;\n\n  return (\n    <div style={{ paddingLeft: \"1em\" }}>\n      {routes.map((route) => (\n        <>\n          <RouteElement onClick={() => onClick([...previousPath, route.path].join(\"/\"))}>\n            {route.label} [{\"/\" + route.path}]\n          </RouteElement>\n          <Routes\n            routes={route.routes}\n            previousPath={[...previousPath, route.path]}\n            onClick={onClick}\n          />\n        </>\n      ))}\n    </div>\n  );\n};\n\nexport const Breadcrumb = (args: Props): JSX.Element => {\n  const [route, setRoute] = useState(\"apps/swap/confirm\");\n\n  const onChange = useCallback((value) => setRoute(value.join(\"/\")), [setRoute]);\n  const segments = useMemo(() => {\n    const paths = route.split(\"/\");\n\n    const [, result] = paths.reduce<[Route[], React.ComponentProps<typeof Breadcrumb>[\"segments\"]]>(\n      ([routes, result], path) => {\n        let activeRoute: Route | null = null;\n        const level = routes.map((route) => {\n          if (route.path === path) {\n            activeRoute = route;\n          }\n          return {\n            value: route.path,\n            label: route.label,\n          };\n        });\n\n        if (!activeRoute) {\n          throw new Error(\"Cannot match path.\");\n        }\n\n        const nextRoutes = (activeRoute as Route).routes || [];\n        if (level.length === 1) {\n          result.push(level[0]);\n        } else {\n          result.push({\n            options: level,\n            value: {\n              value: (activeRoute as Route).path,\n              label: (activeRoute as Route).label,\n            },\n          });\n        }\n\n        return [nextRoutes, result];\n      },\n      [routes, []],\n    );\n    return result;\n  }, [route]);\n\n  return (\n    <FlexBox rowGap={3} flexDirection=\"column\">\n      <BreadcrumbComponent {...args} segments={segments} onChange={onChange} />\n      <hr />\n      <Text fontWeight=\"medium\" variant={\"paragraph\"}>\n        Current route: /{route}\n      </Text>\n      <Text fontWeight=\"medium\" variant={\"paragraph\"}>\n        Available routes:\n      </Text>\n      <Text fontWeight=\"regular\" variant={\"paragraph\"} style={{ cursor: \"pointer\" }}>\n        <Routes routes={routes} onClick={setRoute} />\n      </Text>\n    </FlexBox>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useState, useCallback, useMemo } from \"react\";\nimport styled from \"styled-components\";\n\nimport Text from \"../../asorted/Text\";\nimport FlexBox from \"../../layout/Flex\";\nimport BreadcrumbComponent, { Props } from \"./index\";\n\nexport default {\n  title: \"Navigation/Breadcrumb\",\n  component: BreadcrumbComponent,\n};\n\ntype Route = {\n  path: string;\n  label: string;\n  routes?: Route[];\n};\nconst routes: Route[] = [\n  {\n    path: \"settings\",\n    label: \"Settings\",\n    routes: [\n      { path: \"experimental\", label: \"Experimental\" },\n      { path: \"developer\", label: \"Developer\" },\n    ],\n  },\n  {\n    path: \"account\",\n    label: \"Account\",\n    routes: [{ path: \"user\", label: \"User\", routes: [{ path: \"edit\", label: \"Edit\" }] }],\n  },\n  {\n    path: \"apps\",\n    label: \"Applications\",\n    routes: [\n      { path: \"buy\", label: \"Buy\" },\n      { path: \"sell\", label: \"Sell\" },\n      { path: \"swap\", label: \"Swap\", routes: [{ path: \"confirm\", label: \"Confirm\" }] },\n    ],\n  },\n];\n\nconst RouteElement = styled.div`\n  :hover {\n    text-decoration: underline;\n  }\n`;\nconst Routes = ({\n  onClick,\n  routes,\n  previousPath = [],\n}: {\n  onClick: (path: string) => void;\n  routes?: Route[];\n  previousPath?: string[];\n}): JSX.Element | null => {\n  if (!routes || routes.length === 0) return null;\n\n  return (\n    <div style={{ paddingLeft: \"1em\" }}>\n      {routes.map(route => (\n        <>\n          <RouteElement onClick={() => onClick([...previousPath, route.path].join(\"/\"))}>\n            {route.label} [{\"/\" + route.path}]\n          </RouteElement>\n          <Routes\n            routes={route.routes}\n            previousPath={[...previousPath, route.path]}\n            onClick={onClick}\n          />\n        </>\n      ))}\n    </div>\n  );\n};\n\nexport const Breadcrumb = (args: Props): JSX.Element => {\n  const [route, setRoute] = useState(\"apps/swap/confirm\");\n\n  const onChange = useCallback(value => setRoute(value.join(\"/\")), [setRoute]);\n  const segments = useMemo(() => {\n    const paths = route.split(\"/\");\n\n    const [, result] = paths.reduce<[Route[], React.ComponentProps<typeof Breadcrumb>[\"segments\"]]>(\n      ([routes, result], path) => {\n        let activeRoute: Route | null = null;\n        const level = routes.map(route => {\n          if (route.path === path) {\n            activeRoute = route;\n          }\n          return {\n            value: route.path,\n            label: route.label,\n          };\n        });\n\n        if (!activeRoute) {\n          throw new Error(\"Cannot match path.\");\n        }\n\n        const nextRoutes = (activeRoute as Route).routes || [];\n        if (level.length === 1) {\n          result.push(level[0]);\n        } else {\n          result.push({\n            options: level,\n            value: {\n              value: (activeRoute as Route).path,\n              label: (activeRoute as Route).label,\n            },\n          });\n        }\n\n        return [nextRoutes, result];\n      },\n      [routes, []],\n    );\n    return result;\n  }, [route]);\n\n  return (\n    <FlexBox rowGap={3} flexDirection=\"column\">\n      <BreadcrumbComponent {...args} segments={segments} onChange={onChange} />\n      <hr />\n      <Text fontWeight=\"medium\" variant={\"paragraph\"}>\n        Current route: /{route}\n      </Text>\n      <Text fontWeight=\"medium\" variant={\"paragraph\"}>\n        Available routes:\n      </Text>\n      <Text fontWeight=\"regular\" variant={\"paragraph\"} style={{ cursor: \"pointer\" }}>\n        <Routes routes={routes} onClick={setRoute} />\n      </Text>\n    </FlexBox>\n  );\n};\n"],
+  "mappings": "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",
   "names": ["BreadcrumbComponent", "styled", "routes", "React", "result", "route", "FlexBox", "Text"]
 }