@ledgerhq/react-ui 0.12.1-recover-beta.0 → 0.13.0-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.
- package/README.md +27 -3
- package/lib/cjs/assets/cryptoIcons.js +12 -14
- package/lib/cjs/assets/cryptoIcons.js.map +1 -1
- package/lib/cjs/assets/fonts.js +9 -26
- package/lib/cjs/assets/fonts.js.map +1 -1
- package/lib/cjs/assets/icons.js +12 -14
- package/lib/cjs/assets/icons.js.map +1 -1
- package/lib/cjs/assets/images/images.d.js +1 -0
- package/lib/cjs/assets/index.js +22 -15
- package/lib/cjs/assets/index.js.map +1 -1
- package/lib/cjs/assets/logos/LedgerLiveAltRegular.js +37 -23
- package/lib/cjs/assets/logos/LedgerLiveAltRegular.js.map +1 -1
- package/lib/cjs/assets/logos/LedgerLiveRegular.js +37 -23
- package/lib/cjs/assets/logos/LedgerLiveRegular.js.map +1 -1
- package/lib/cjs/assets/logos/index.js +21 -14
- package/lib/cjs/assets/logos/index.js.map +1 -1
- package/lib/cjs/components/Chart/Chart.stories.js +34 -56
- package/lib/cjs/components/Chart/Chart.stories.js.map +2 -2
- package/lib/cjs/components/Chart/index.js +79 -60
- package/lib/cjs/components/Chart/index.js.map +2 -2
- package/lib/cjs/components/Chart/types.js +15 -2
- package/lib/cjs/components/Chart/types.js.map +1 -1
- package/lib/cjs/components/Chart/utils.js +16 -3
- package/lib/cjs/components/Chart/utils.js.map +2 -2
- package/lib/cjs/components/Table/Columns.js +47 -41
- package/lib/cjs/components/Table/Columns.js.map +2 -2
- package/lib/cjs/components/Table/Table.stories.js +102 -104
- package/lib/cjs/components/Table/Table.stories.js.map +2 -2
- package/lib/cjs/components/Table/index.js +54 -46
- package/lib/cjs/components/Table/index.js.map +2 -2
- package/lib/cjs/components/Table/stories.helper.js +82 -68
- package/lib/cjs/components/Table/stories.helper.js.map +2 -2
- package/lib/cjs/components/Tag/Tag.stories.js +27 -46
- package/lib/cjs/components/Tag/Tag.stories.js.map +2 -2
- package/lib/cjs/components/Tag/index.js +24 -24
- package/lib/cjs/components/Tag/index.js.map +2 -2
- package/lib/cjs/components/animations/GlitchText/GlitchText.stories.js +23 -20
- package/lib/cjs/components/animations/GlitchText/GlitchText.stories.js.map +2 -2
- package/lib/cjs/components/animations/GlitchText/index.js +20 -13
- package/lib/cjs/components/animations/GlitchText/index.js.map +2 -2
- package/lib/cjs/components/asorted/Divider/Divider.stories.js +25 -20
- package/lib/cjs/components/asorted/Divider/Divider.stories.js.map +2 -2
- package/lib/cjs/components/asorted/Divider/index.js +22 -17
- package/lib/cjs/components/asorted/Divider/index.js.map +2 -2
- package/lib/cjs/components/asorted/Icon/BoxedIcon.js +33 -35
- package/lib/cjs/components/asorted/Icon/BoxedIcon.js.map +2 -2
- package/lib/cjs/components/asorted/Icon/BoxedIcon.stories.js +38 -37
- package/lib/cjs/components/asorted/Icon/BoxedIcon.stories.js.map +2 -2
- package/lib/cjs/components/asorted/Icon/CryptoIcon.js +60 -70
- package/lib/cjs/components/asorted/Icon/CryptoIcon.js.map +2 -2
- package/lib/cjs/components/asorted/Icon/CryptoIcons.stories.js +52 -52
- package/lib/cjs/components/asorted/Icon/CryptoIcons.stories.js.map +2 -2
- package/lib/cjs/components/asorted/Icon/Icon.js +30 -24
- package/lib/cjs/components/asorted/Icon/Icon.js.map +3 -3
- package/lib/cjs/components/asorted/Icon/Icons.stories.js +53 -53
- package/lib/cjs/components/asorted/Icon/Icons.stories.js.map +3 -3
- package/lib/cjs/components/asorted/Icon/ProviderIcon.js +33 -33
- package/lib/cjs/components/asorted/Icon/ProviderIcon.js.map +2 -2
- package/lib/cjs/components/asorted/Icon/Providers.stories.js +49 -48
- package/lib/cjs/components/asorted/Icon/Providers.stories.js.map +2 -2
- package/lib/cjs/components/asorted/Icon/index.js +23 -18
- package/lib/cjs/components/asorted/Icon/index.js.map +3 -3
- package/lib/cjs/components/asorted/Text/Text.stories.js +27 -40
- package/lib/cjs/components/asorted/Text/Text.stories.js.map +2 -2
- package/lib/cjs/components/asorted/Text/index.js +41 -23
- package/lib/cjs/components/asorted/Text/index.js.map +2 -2
- package/lib/cjs/components/asorted/Text/styles.js +12 -15
- package/lib/cjs/components/asorted/Text/styles.js.map +1 -1
- package/lib/cjs/components/asorted/index.js +22 -16
- package/lib/cjs/components/asorted/index.js.map +2 -2
- package/lib/cjs/components/cards/Carousel/Carousel.stories.js +24 -21
- package/lib/cjs/components/cards/Carousel/Carousel.stories.js.map +2 -2
- package/lib/cjs/components/cards/Carousel/Slide.js +24 -29
- package/lib/cjs/components/cards/Carousel/Slide.js.map +2 -2
- package/lib/cjs/components/cards/Carousel/index.js +61 -81
- package/lib/cjs/components/cards/Carousel/index.js.map +2 -2
- package/lib/cjs/components/cards/index.js +20 -13
- package/lib/cjs/components/cards/index.js.map +1 -1
- package/lib/cjs/components/cta/Button/Button.stories.js +50 -70
- package/lib/cjs/components/cta/Button/Button.stories.js.map +2 -2
- package/lib/cjs/components/cta/Button/index.js +43 -54
- package/lib/cjs/components/cta/Button/index.js.map +3 -3
- package/lib/cjs/components/cta/Link/Link.stories.js +24 -24
- package/lib/cjs/components/cta/Link/Link.stories.js.map +2 -2
- package/lib/cjs/components/cta/Link/getLinkStyle.js +16 -3
- package/lib/cjs/components/cta/Link/getLinkStyle.js.map +1 -1
- package/lib/cjs/components/cta/Link/index.js +37 -39
- package/lib/cjs/components/cta/Link/index.js.map +2 -2
- package/lib/cjs/components/cta/Toggle/Toggle.stories.js +23 -19
- package/lib/cjs/components/cta/Toggle/Toggle.stories.js.map +2 -2
- package/lib/cjs/components/cta/Toggle/index.js +26 -23
- package/lib/cjs/components/cta/Toggle/index.js.map +2 -2
- package/lib/cjs/components/cta/getCtaStyle.js +16 -3
- package/lib/cjs/components/cta/getCtaStyle.js.map +1 -1
- package/lib/cjs/components/cta/index.js +22 -15
- package/lib/cjs/components/cta/index.js.map +1 -1
- package/lib/cjs/components/form/BaseInput/Input.stories.js +58 -55
- package/lib/cjs/components/form/BaseInput/Input.stories.js.map +2 -2
- package/lib/cjs/components/form/BaseInput/index.js +66 -70
- package/lib/cjs/components/form/BaseInput/index.js.map +2 -2
- package/lib/cjs/components/form/Checkbox/Checkbox.js +27 -32
- package/lib/cjs/components/form/Checkbox/Checkbox.js.map +3 -3
- package/lib/cjs/components/form/Checkbox/Checkbox.stories.js +23 -19
- package/lib/cjs/components/form/Checkbox/Checkbox.stories.js.map +2 -2
- package/lib/cjs/components/form/Checkbox/index.js +20 -13
- package/lib/cjs/components/form/Checkbox/index.js.map +1 -1
- package/lib/cjs/components/form/Dropdown/Dropdown.stories.js +31 -21
- package/lib/cjs/components/form/Dropdown/Dropdown.stories.js.map +2 -2
- package/lib/cjs/components/form/Dropdown/index.js +69 -74
- package/lib/cjs/components/form/Dropdown/index.js.map +2 -2
- package/lib/cjs/components/form/DropdownGeneric/DropdownGeneric.stories.js +81 -100
- package/lib/cjs/components/form/DropdownGeneric/DropdownGeneric.stories.js.map +2 -2
- package/lib/cjs/components/form/DropdownGeneric/index.js +51 -43
- package/lib/cjs/components/form/DropdownGeneric/index.js.map +2 -2
- package/lib/cjs/components/form/LegendInput/Input.stories.js +22 -20
- package/lib/cjs/components/form/LegendInput/Input.stories.js.map +2 -2
- package/lib/cjs/components/form/LegendInput/index.js +31 -24
- package/lib/cjs/components/form/LegendInput/index.js.map +2 -2
- package/lib/cjs/components/form/NumberInput/Input.stories.js +33 -23
- package/lib/cjs/components/form/NumberInput/Input.stories.js.map +2 -2
- package/lib/cjs/components/form/NumberInput/index.js +47 -41
- package/lib/cjs/components/form/NumberInput/index.js.map +2 -2
- package/lib/cjs/components/form/QrCodeInput/Input.stories.js +22 -20
- package/lib/cjs/components/form/QrCodeInput/Input.stories.js.map +2 -2
- package/lib/cjs/components/form/QrCodeInput/index.js +32 -31
- package/lib/cjs/components/form/QrCodeInput/index.js.map +2 -2
- package/lib/cjs/components/form/QuantityInput/Input.stories.js +34 -24
- package/lib/cjs/components/form/QuantityInput/Input.stories.js.map +2 -2
- package/lib/cjs/components/form/QuantityInput/index.js +33 -38
- package/lib/cjs/components/form/QuantityInput/index.js.map +2 -2
- package/lib/cjs/components/form/Radio/Radio.stories.js +67 -88
- package/lib/cjs/components/form/Radio/Radio.stories.js.map +2 -2
- package/lib/cjs/components/form/Radio/RadioElement.js +46 -33
- package/lib/cjs/components/form/Radio/RadioElement.js.map +2 -2
- package/lib/cjs/components/form/Radio/RadioElement.stories.js +25 -49
- package/lib/cjs/components/form/Radio/RadioElement.stories.js.map +2 -2
- package/lib/cjs/components/form/Radio/RadioListElement.js +37 -35
- package/lib/cjs/components/form/Radio/RadioListElement.js.map +2 -2
- package/lib/cjs/components/form/Radio/RadioListElement.stories.js +23 -30
- package/lib/cjs/components/form/Radio/RadioListElement.stories.js.map +2 -2
- package/lib/cjs/components/form/Radio/index.js +24 -22
- package/lib/cjs/components/form/Radio/index.js.map +2 -2
- package/lib/cjs/components/form/SearchInput/Input.stories.js +22 -20
- package/lib/cjs/components/form/SearchInput/Input.stories.js.map +2 -2
- package/lib/cjs/components/form/SearchInput/index.js +36 -23
- package/lib/cjs/components/form/SearchInput/index.js.map +2 -2
- package/lib/cjs/components/form/SelectInput/Control.js +23 -22
- package/lib/cjs/components/form/SelectInput/Control.js.map +2 -2
- package/lib/cjs/components/form/SelectInput/DropdownIndicator.js +25 -26
- package/lib/cjs/components/form/SelectInput/DropdownIndicator.js.map +2 -2
- package/lib/cjs/components/form/SelectInput/IndicatorsContainer.js +23 -20
- package/lib/cjs/components/form/SelectInput/IndicatorsContainer.js.map +2 -2
- package/lib/cjs/components/form/SelectInput/MenuList.js +22 -17
- package/lib/cjs/components/form/SelectInput/MenuList.js.map +2 -2
- package/lib/cjs/components/form/SelectInput/Option.js +34 -25
- package/lib/cjs/components/form/SelectInput/Option.js.map +2 -2
- package/lib/cjs/components/form/SelectInput/Select.stories.js +136 -138
- package/lib/cjs/components/form/SelectInput/Select.stories.js.map +2 -2
- package/lib/cjs/components/form/SelectInput/ValueContainer.js +32 -23
- package/lib/cjs/components/form/SelectInput/ValueContainer.js.map +2 -2
- package/lib/cjs/components/form/SelectInput/VirtualMenuList.js +62 -37
- package/lib/cjs/components/form/SelectInput/VirtualMenuList.js.map +2 -2
- package/lib/cjs/components/form/SelectInput/index.js +56 -45
- package/lib/cjs/components/form/SelectInput/index.js.map +2 -2
- package/lib/cjs/components/form/SplitInput/SplitInput.stories.js +151 -131
- package/lib/cjs/components/form/SplitInput/SplitInput.stories.js.map +2 -2
- package/lib/cjs/components/form/SplitInput/index.js +31 -34
- package/lib/cjs/components/form/SplitInput/index.js.map +2 -2
- package/lib/cjs/components/form/Switch/Switch.js +38 -35
- package/lib/cjs/components/form/Switch/Switch.js.map +2 -2
- package/lib/cjs/components/form/Switch/Switch.stories.js +23 -19
- package/lib/cjs/components/form/Switch/Switch.stories.js.map +2 -2
- package/lib/cjs/components/form/Switch/index.js +20 -13
- package/lib/cjs/components/form/Switch/index.js.map +1 -1
- package/lib/cjs/components/form/index.js +32 -25
- package/lib/cjs/components/form/index.js.map +1 -1
- package/lib/cjs/components/helpers.js +16 -3
- package/lib/cjs/components/helpers.js.map +1 -1
- package/lib/cjs/components/index.js +33 -25
- package/lib/cjs/components/index.js.map +1 -1
- package/lib/cjs/components/layout/Box/Box.stories.js +22 -17
- package/lib/cjs/components/layout/Box/Box.stories.js.map +2 -2
- package/lib/cjs/components/layout/Box/index.js +20 -13
- package/lib/cjs/components/layout/Box/index.js.map +2 -2
- package/lib/cjs/components/layout/Drawer/Drawer.stories.js +46 -43
- package/lib/cjs/components/layout/Drawer/Drawer.stories.js.map +2 -2
- package/lib/cjs/components/layout/Drawer/index.js +137 -126
- package/lib/cjs/components/layout/Drawer/index.js.map +3 -3
- package/lib/cjs/components/layout/Flex/Flex.stories.js +22 -31
- package/lib/cjs/components/layout/Flex/Flex.stories.js.map +2 -2
- package/lib/cjs/components/layout/Flex/index.js +20 -13
- package/lib/cjs/components/layout/Flex/index.js.map +2 -2
- package/lib/cjs/components/layout/Grid/Grid.stories.js +119 -93
- package/lib/cjs/components/layout/Grid/Grid.stories.js.map +2 -2
- package/lib/cjs/components/layout/Grid/index.js +21 -14
- package/lib/cjs/components/layout/Grid/index.js.map +2 -2
- package/lib/cjs/components/layout/List/VerticalTimeline/TimelineIndicator.js +30 -33
- package/lib/cjs/components/layout/List/VerticalTimeline/TimelineIndicator.js.map +2 -2
- package/lib/cjs/components/layout/List/VerticalTimeline/TimelineItem.js +51 -43
- package/lib/cjs/components/layout/List/VerticalTimeline/TimelineItem.js.map +2 -2
- package/lib/cjs/components/layout/List/VerticalTimeline/VerticalTimeline.stories.js +24 -21
- package/lib/cjs/components/layout/List/VerticalTimeline/VerticalTimeline.stories.js.map +2 -2
- package/lib/cjs/components/layout/List/VerticalTimeline/index.js +31 -24
- package/lib/cjs/components/layout/List/VerticalTimeline/index.js.map +2 -2
- package/lib/cjs/components/layout/Popin/Popin.stories.js +36 -37
- package/lib/cjs/components/layout/Popin/Popin.stories.js.map +2 -2
- package/lib/cjs/components/layout/Popin/index.js +37 -55
- package/lib/cjs/components/layout/Popin/index.js.map +3 -3
- package/lib/cjs/components/layout/Side/Provider.js +30 -19
- package/lib/cjs/components/layout/Side/Provider.js.map +2 -2
- package/lib/cjs/components/layout/Side/Side.stories.js +47 -40
- package/lib/cjs/components/layout/Side/Side.stories.js.map +2 -2
- package/lib/cjs/components/layout/Side/index.js +40 -36
- package/lib/cjs/components/layout/Side/index.js.map +2 -2
- package/lib/cjs/components/layout/index.js +26 -19
- package/lib/cjs/components/layout/index.js.map +1 -1
- package/lib/cjs/components/loaders/InfiniteLoader/InfiniteLoader.stories.js +22 -17
- package/lib/cjs/components/loaders/InfiniteLoader/InfiniteLoader.stories.js.map +2 -2
- package/lib/cjs/components/loaders/InfiniteLoader/index.js +86 -72
- package/lib/cjs/components/loaders/InfiniteLoader/index.js.map +2 -2
- package/lib/cjs/components/loaders/ProgressLoader/ProgressLoader.stories.js +34 -24
- package/lib/cjs/components/loaders/ProgressLoader/ProgressLoader.stories.js.map +2 -2
- package/lib/cjs/components/loaders/ProgressLoader/index.js +53 -43
- package/lib/cjs/components/loaders/ProgressLoader/index.js.map +2 -2
- package/lib/cjs/components/loaders/index.js +21 -14
- package/lib/cjs/components/loaders/index.js.map +1 -1
- package/lib/cjs/components/message/Alert/Alert.stories.js +45 -38
- package/lib/cjs/components/message/Alert/Alert.stories.js.map +3 -3
- package/lib/cjs/components/message/Alert/index.js +41 -42
- package/lib/cjs/components/message/Alert/index.js.map +2 -2
- package/lib/cjs/components/message/Log/Brackets.js +46 -49
- package/lib/cjs/components/message/Log/Brackets.js.map +2 -2
- package/lib/cjs/components/message/Log/Log.stories.js +22 -17
- package/lib/cjs/components/message/Log/Log.stories.js.map +2 -2
- package/lib/cjs/components/message/Log/index.js +35 -31
- package/lib/cjs/components/message/Log/index.js.map +2 -2
- package/lib/cjs/components/message/Notification/Badge.js +23 -18
- package/lib/cjs/components/message/Notification/Badge.js.map +2 -2
- package/lib/cjs/components/message/Notification/Badge.stories.js +40 -36
- package/lib/cjs/components/message/Notification/Badge.stories.js.map +2 -2
- package/lib/cjs/components/message/Notification/Notification.stories.js +51 -66
- package/lib/cjs/components/message/Notification/Notification.stories.js.map +2 -2
- package/lib/cjs/components/message/Notification/index.js +27 -41
- package/lib/cjs/components/message/Notification/index.js.map +2 -2
- package/lib/cjs/components/message/StatusNotification/StatusNotification.stories.js +26 -49
- package/lib/cjs/components/message/StatusNotification/StatusNotification.stories.js.map +3 -3
- package/lib/cjs/components/message/StatusNotification/index.js +24 -20
- package/lib/cjs/components/message/StatusNotification/index.js.map +2 -2
- package/lib/cjs/components/message/Tip/Tip.stories.js +22 -17
- package/lib/cjs/components/message/Tip/Tip.stories.js.map +2 -2
- package/lib/cjs/components/message/Tip/index.js +28 -36
- package/lib/cjs/components/message/Tip/index.js.map +2 -2
- package/lib/cjs/components/message/Tooltip/Tooltip.stories.js +37 -31
- package/lib/cjs/components/message/Tooltip/Tooltip.stories.js.map +2 -2
- package/lib/cjs/components/message/Tooltip/index.js +48 -45
- package/lib/cjs/components/message/Tooltip/index.js.map +2 -2
- package/lib/cjs/components/message/Tooltip/styles.js +12 -15
- package/lib/cjs/components/message/Tooltip/styles.js.map +1 -1
- package/lib/cjs/components/message/index.js +26 -19
- package/lib/cjs/components/message/index.js.map +1 -1
- package/lib/cjs/components/navigation/Aside/Aside.stories.js +39 -58
- package/lib/cjs/components/navigation/Aside/Aside.stories.js.map +2 -2
- package/lib/cjs/components/navigation/Aside/index.js +24 -26
- package/lib/cjs/components/navigation/Aside/index.js.map +2 -2
- package/lib/cjs/components/navigation/Aside/stories.helper.js +16 -3
- package/lib/cjs/components/navigation/Aside/stories.helper.js.map +1 -1
- package/lib/cjs/components/navigation/Breadcrumb/Breadcrumb.stories.js +62 -73
- package/lib/cjs/components/navigation/Breadcrumb/Breadcrumb.stories.js.map +2 -2
- package/lib/cjs/components/navigation/Breadcrumb/index.js +71 -59
- package/lib/cjs/components/navigation/Breadcrumb/index.js.map +2 -2
- package/lib/cjs/components/navigation/FlowStepper/FlowStepper.stories.js +165 -191
- package/lib/cjs/components/navigation/FlowStepper/FlowStepper.stories.js.map +2 -2
- package/lib/cjs/components/navigation/FlowStepper/index.js +48 -59
- package/lib/cjs/components/navigation/FlowStepper/index.js.map +2 -2
- package/lib/cjs/components/navigation/Header/Header.stories.js +27 -49
- package/lib/cjs/components/navigation/Header/Header.stories.js.map +2 -2
- package/lib/cjs/components/navigation/Header/index.js +22 -20
- package/lib/cjs/components/navigation/Header/index.js.map +2 -2
- package/lib/cjs/components/navigation/index.js +26 -18
- package/lib/cjs/components/navigation/index.js.map +1 -1
- package/lib/cjs/components/navigation/progress/ProgressBar/Onboarding.js +23 -33
- package/lib/cjs/components/navigation/progress/ProgressBar/Onboarding.js.map +2 -2
- package/lib/cjs/components/navigation/progress/ProgressBar/Onboarding.stories.js +22 -18
- package/lib/cjs/components/navigation/progress/ProgressBar/Onboarding.stories.js.map +2 -2
- package/lib/cjs/components/navigation/progress/ProgressBar/index.js +20 -13
- package/lib/cjs/components/navigation/progress/ProgressBar/index.js.map +1 -1
- package/lib/cjs/components/navigation/progress/Stepper/Item.stories.js +22 -19
- package/lib/cjs/components/navigation/progress/Stepper/Item.stories.js.map +2 -2
- package/lib/cjs/components/navigation/progress/Stepper/ProgressSteps.stories.js +23 -22
- package/lib/cjs/components/navigation/progress/Stepper/ProgressSteps.stories.js.map +2 -2
- package/lib/cjs/components/navigation/progress/Stepper/index.js +36 -81
- package/lib/cjs/components/navigation/progress/Stepper/index.js.map +2 -2
- package/lib/cjs/components/navigation/progress/index.js +21 -14
- package/lib/cjs/components/navigation/progress/index.js.map +1 -1
- package/lib/cjs/components/navigation/sideBar/Item/Item.js +58 -43
- package/lib/cjs/components/navigation/sideBar/Item/Item.js.map +2 -2
- package/lib/cjs/components/navigation/sideBar/Item/Item.stories.js +47 -45
- package/lib/cjs/components/navigation/sideBar/Item/Item.stories.js.map +2 -2
- package/lib/cjs/components/navigation/sideBar/Item/index.js +20 -13
- package/lib/cjs/components/navigation/sideBar/Item/index.js.map +1 -1
- package/lib/cjs/components/navigation/sideBar/Logo/Logo.js +46 -31
- package/lib/cjs/components/navigation/sideBar/Logo/Logo.js.map +2 -2
- package/lib/cjs/components/navigation/sideBar/Logo/index.js +20 -13
- package/lib/cjs/components/navigation/sideBar/Logo/index.js.map +1 -1
- package/lib/cjs/components/navigation/sideBar/SideBar/SideBar.js +43 -41
- package/lib/cjs/components/navigation/sideBar/SideBar/SideBar.js.map +2 -2
- package/lib/cjs/components/navigation/sideBar/SideBar/SideBar.stories.js +33 -78
- package/lib/cjs/components/navigation/sideBar/SideBar/SideBar.stories.js.map +2 -2
- package/lib/cjs/components/navigation/sideBar/SideBar/index.js +20 -13
- package/lib/cjs/components/navigation/sideBar/SideBar/index.js.map +1 -1
- package/lib/cjs/components/navigation/sideBar/Toggle/Toggle.js +37 -26
- package/lib/cjs/components/navigation/sideBar/Toggle/Toggle.js.map +2 -2
- package/lib/cjs/components/navigation/sideBar/Toggle/index.js +20 -13
- package/lib/cjs/components/navigation/sideBar/Toggle/index.js.map +1 -1
- package/lib/cjs/components/navigation/sideBar/index.js +12 -15
- package/lib/cjs/components/navigation/sideBar/index.js.map +1 -1
- package/lib/cjs/components/styled.js +32 -16
- package/lib/cjs/components/styled.js.map +2 -2
- package/lib/cjs/components/styled.stories.js +22 -17
- package/lib/cjs/components/styled.stories.js.map +2 -2
- package/lib/cjs/components/tabs/Bar/Bar.stories.js +25 -33
- package/lib/cjs/components/tabs/Bar/Bar.stories.js.map +2 -2
- package/lib/cjs/components/tabs/Bar/index.js +34 -23
- package/lib/cjs/components/tabs/Bar/index.js.map +2 -2
- package/lib/cjs/components/tabs/Chip/Chip.stories.js +25 -33
- package/lib/cjs/components/tabs/Chip/Chip.stories.js.map +2 -2
- package/lib/cjs/components/tabs/Chip/index.js +34 -27
- package/lib/cjs/components/tabs/Chip/index.js.map +2 -2
- package/lib/cjs/components/tabs/Pill/Pill.stories.js +26 -33
- package/lib/cjs/components/tabs/Pill/Pill.stories.js.map +2 -2
- package/lib/cjs/components/tabs/Pill/index.js +35 -24
- package/lib/cjs/components/tabs/Pill/index.js.map +2 -2
- package/lib/cjs/components/tabs/Tabs/Tabs.stories.js +25 -31
- package/lib/cjs/components/tabs/Tabs/Tabs.stories.js.map +2 -2
- package/lib/cjs/components/tabs/Tabs/index.js +43 -41
- package/lib/cjs/components/tabs/Tabs/index.js.map +2 -2
- package/lib/cjs/components/tabs/index.js +23 -16
- package/lib/cjs/components/tabs/index.js.map +1 -1
- package/lib/cjs/components/transitions/TransitionInOut.js +23 -23
- package/lib/cjs/components/transitions/TransitionInOut.js.map +2 -2
- package/lib/cjs/components/transitions/TransitionScale.js +23 -21
- package/lib/cjs/components/transitions/TransitionScale.js.map +2 -2
- package/lib/cjs/components/transitions/TransitionSlide.js +23 -23
- package/lib/cjs/components/transitions/TransitionSlide.js.map +2 -2
- package/lib/cjs/components/transitions/index.js +22 -15
- package/lib/cjs/components/transitions/index.js.map +1 -1
- package/lib/cjs/index.js +15 -17
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/styles/InvertTheme.js +47 -38
- package/lib/cjs/styles/InvertTheme.js.map +2 -2
- package/lib/cjs/styles/Spacing.stories.js +32 -34
- package/lib/cjs/styles/Spacing.stories.js.map +2 -2
- package/lib/cjs/styles/StyleProvider.js +36 -31
- package/lib/cjs/styles/StyleProvider.js.map +2 -2
- package/lib/cjs/styles/breakpoints.stories.js +46 -44
- package/lib/cjs/styles/breakpoints.stories.js.map +2 -2
- package/lib/cjs/styles/global.js +23 -16
- package/lib/cjs/styles/global.js.map +2 -2
- package/lib/cjs/styles/helpers.js +21 -18
- package/lib/cjs/styles/helpers.js.map +3 -3
- package/lib/cjs/styles/index.js +26 -18
- package/lib/cjs/styles/index.js.map +1 -1
- package/lib/cjs/styles/palettes/colors.stories.js +45 -54
- package/lib/cjs/styles/palettes/colors.stories.js.map +3 -3
- package/lib/cjs/styles/styled/fontFamily.js +12 -15
- package/lib/cjs/styles/styled/fontFamily.js.map +1 -1
- package/lib/cjs/styles/system/gaps.js +12 -15
- package/lib/cjs/styles/system/gaps.js.map +1 -1
- package/lib/cjs/styles/theme.js +15 -16
- package/lib/cjs/styles/theme.js.map +1 -1
- package/lib/components/asorted/Icon/Icon.d.ts +1 -1
- package/lib/components/asorted/Icon/Icon.js +1 -3
- package/lib/components/asorted/Icon/index.d.ts +0 -1
- package/lib/components/asorted/Icon/index.js +0 -1
- package/lib/components/asorted/index.d.ts +1 -1
- package/lib/components/asorted/index.js +1 -1
- package/lib/components/cta/Button/index.d.ts +2 -3
- package/lib/components/cta/Button/index.js +3 -5
- package/lib/components/form/Checkbox/Checkbox.js +2 -2
- package/lib/components/layout/Drawer/index.js +1 -1
- package/lib/components/layout/Popin/index.js +2 -2
- package/lib/styles/helpers.d.ts +0 -2
- package/lib/styles/helpers.js +0 -2
- package/package.json +18 -18
- package/lib/cjs/components/asorted/Icon/PaymentIcon.js +0 -61
- package/lib/cjs/components/asorted/Icon/PaymentIcon.js.map +0 -7
- package/lib/cjs/components/asorted/Icon/PaymentIcon.stories.js +0 -117
- package/lib/cjs/components/asorted/Icon/PaymentIcon.stories.js.map +0 -7
- package/lib/components/asorted/Icon/PaymentIcon.d.ts +0 -18
- package/lib/components/asorted/Icon/PaymentIcon.js +0 -32
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/animations/GlitchText/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import React, { useEffect, useState } from \"react\";\n\nfunction makeRandomString(length: number) {\n let result = \"\";\n const characters = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\";\n const charactersLength = characters.length;\n for (let i = 0; i < length; i++) {\n result += characters.charAt(Math.floor(Math.random() * charactersLength));\n }\n return result;\n}\n\nexport interface GlitchTextProps {\n text: string;\n duration?: number;\n delay?: number;\n}\n\nconst INTERVAL = 77;\n\nexport default function GlitchText({ text, duration = 800, delay = 500 }: GlitchTextProps) {\n const [shownText, setShownText] = useState(text);\n\n useEffect(() => {\n let frameT = 0;\n const startFrame = Math.floor((1 + delay) / INTERVAL);\n const totalFrames = Math.floor((delay + duration) / INTERVAL);\n const interval = setInterval(() => {\n if (frameT >= startFrame) {\n if (frameT >= totalFrames) {\n setShownText(text);\n clearInterval(interval);\n frameT = 0;\n return;\n }\n const t1 = text.substr(0, -totalFrames + frameT + text.length);\n const t2 = t1.length > 0 ? text.substr(t1.length, text.length) : text;\n setShownText(t1 + makeRandomString(t2.length));\n }\n frameT++;\n }, INTERVAL);\n\n return () => {\n interval && clearInterval(interval);\n };\n }, [delay, duration, text]);\n\n return <>{shownText}</>;\n}\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2C;AAE3C,SAAS,iBAAiB,QAAgB;AACxC,MAAI,SAAS;AACb,QAAM,aAAa;AACnB,QAAM,mBAAmB,WAAW;AACpC,WAAS,IAAI,GAAG,IAAI,QAAQ,KAAK;AAC/B,cAAU,WAAW,OAAO,KAAK,MAAM,KAAK,OAAO,IAAI,gBAAgB,CAAC;AAAA,EAC1E;AACA,SAAO;AACT;AAQA,MAAM,WAAW;AAEF,SAAR,WAA4B,EAAE,MAAM,WAAW,KAAK,QAAQ,IAAI,GAAoB;AACzF,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,IAAI;AAE/C,8BAAU,MAAM;AACd,QAAI,SAAS;AACb,UAAM,aAAa,KAAK,OAAO,IAAI,SAAS,QAAQ;AACpD,UAAM,cAAc,KAAK,OAAO,QAAQ,YAAY,QAAQ;AAC5D,UAAM,WAAW,YAAY,MAAM;AACjC,UAAI,UAAU,YAAY;AACxB,YAAI,UAAU,aAAa;AACzB,uBAAa,IAAI;AACjB,wBAAc,QAAQ;AACtB,mBAAS;AACT;AAAA,QACF;AACA,cAAM,KAAK,KAAK,OAAO,GAAG,CAAC,cAAc,SAAS,KAAK,MAAM;AAC7D,cAAM,KAAK,GAAG,SAAS,IAAI,KAAK,OAAO,GAAG,QAAQ,KAAK,MAAM,IAAI;AACjE,qBAAa,KAAK,iBAAiB,GAAG,MAAM,CAAC;AAAA,MAC/C;AACA;AAAA,IACF,GAAG,QAAQ;AAEX,WAAO,MAAM;AACX,kBAAY,cAAc,QAAQ;AAAA,IACpC;AAAA,EACF,GAAG,CAAC,OAAO,UAAU,IAAI,CAAC;AAE1B,SAAO,6BAAAA,QAAA,2BAAAA,QAAA,gBAAG,SAAU;AACtB;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,35 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
8
|
var __export = (target, all) => {
|
|
9
|
-
__markAsModule(target);
|
|
10
9
|
for (var name in all)
|
|
11
10
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
11
|
};
|
|
13
|
-
var
|
|
14
|
-
if (
|
|
15
|
-
for (let key of __getOwnPropNames(
|
|
16
|
-
if (!__hasOwnProp.call(
|
|
17
|
-
__defProp(
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
18
17
|
}
|
|
19
|
-
return
|
|
18
|
+
return to;
|
|
20
19
|
};
|
|
21
|
-
var
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var Divider_stories_exports = {};
|
|
30
|
+
__export(Divider_stories_exports, {
|
|
25
31
|
Default: () => Default,
|
|
26
32
|
default: () => Divider_stories_default
|
|
27
33
|
});
|
|
28
|
-
|
|
29
|
-
var
|
|
30
|
-
var
|
|
31
|
-
var
|
|
32
|
-
var
|
|
34
|
+
module.exports = __toCommonJS(Divider_stories_exports);
|
|
35
|
+
var import_react = __toESM(require("react"));
|
|
36
|
+
var import_index = __toESM(require("./index"));
|
|
37
|
+
var import_Text = __toESM(require("../Text"));
|
|
38
|
+
var import_Flex = __toESM(require("../../layout/Flex"));
|
|
39
|
+
var import_styled_components = __toESM(require("styled-components"));
|
|
33
40
|
const StyledWrapper = (0, import_styled_components.default)(import_Flex.default).attrs({ flexDirection: "column" })`
|
|
34
41
|
row-gap: 15px;
|
|
35
42
|
`;
|
|
@@ -49,8 +56,6 @@ var Divider_stories_default = {
|
|
|
49
56
|
}
|
|
50
57
|
}
|
|
51
58
|
};
|
|
52
|
-
const Template = (args) => /* @__PURE__ */ import_react.default.createElement(StyledWrapper, null, /* @__PURE__ */ import_react.default.createElement(import_Text.default, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ante mauris, tempor faucibus urna quis, gravida vulputate nisl. Nam nec commodo dui. Quisque semper neque non risus elementum maximus. Nam molestie porttitor nibh, quis tempus quam maximus quis. Phasellus ultrices, leo nec pulvinar volutpat, ipsum purus lobortis metus, eu pharetra eros libero sed dui. Pellentesque in ligula lorem. In id vestibulum ligula. Aliquam quam tellus, ornare non molestie non, ornare vitae ex. Aliquam vel urna nec leo mattis iaculis. Maecenas velit metus, bibendum eu tincidunt et, rhoncus ac elit. Cras tristique quam vel mauris scelerisque aliquet. Donec dapibus lectus at nisi blandit, nec tristique ligula porttitor. Aliquam nec iaculis ex."), /* @__PURE__ */ import_react.default.createElement(import_index.default, {
|
|
53
|
-
...args
|
|
54
|
-
}), /* @__PURE__ */ import_react.default.createElement(import_Text.default, null, "Cras maximus orci eget sem elementum accumsan. Donec at mollis odio, a varius metus. Donec dapibus id elit vitae dignissim. Suspendisse consequat ex ut scelerisque imperdiet. Donec interdum lorem risus. Praesent consectetur lectus vel libero volutpat, id dictum sapien vulputate. Donec vulputate eros at nulla aliquet rutrum sit amet lacinia tortor. Ut pretium, purus eget sollicitudin finibus, eros dolor commodo libero, ut pellentesque mauris odio vitae sem. Nam ornare arcu sit amet posuere vestibulum. Donec eget felis sed erat placerat suscipit."));
|
|
59
|
+
const Template = (args) => /* @__PURE__ */ import_react.default.createElement(StyledWrapper, null, /* @__PURE__ */ import_react.default.createElement(import_Text.default, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ante mauris, tempor faucibus urna quis, gravida vulputate nisl. Nam nec commodo dui. Quisque semper neque non risus elementum maximus. Nam molestie porttitor nibh, quis tempus quam maximus quis. Phasellus ultrices, leo nec pulvinar volutpat, ipsum purus lobortis metus, eu pharetra eros libero sed dui. Pellentesque in ligula lorem. In id vestibulum ligula. Aliquam quam tellus, ornare non molestie non, ornare vitae ex. Aliquam vel urna nec leo mattis iaculis. Maecenas velit metus, bibendum eu tincidunt et, rhoncus ac elit. Cras tristique quam vel mauris scelerisque aliquet. Donec dapibus lectus at nisi blandit, nec tristique ligula porttitor. Aliquam nec iaculis ex."), /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args }), /* @__PURE__ */ import_react.default.createElement(import_Text.default, null, "Cras maximus orci eget sem elementum accumsan. Donec at mollis odio, a varius metus. Donec dapibus id elit vitae dignissim. Suspendisse consequat ex ut scelerisque imperdiet. Donec interdum lorem risus. Praesent consectetur lectus vel libero volutpat, id dictum sapien vulputate. Donec vulputate eros at nulla aliquet rutrum sit amet lacinia tortor. Ut pretium, purus eget sollicitudin finibus, eros dolor commodo libero, ut pellentesque mauris odio vitae sem. Nam ornare arcu sit amet posuere vestibulum. Donec eget felis sed erat placerat suscipit."));
|
|
55
60
|
const Default = Template.bind({});
|
|
56
61
|
//# sourceMappingURL=Divider.stories.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/asorted/Divider/Divider.stories.tsx"],
|
|
4
4
|
"sourcesContent": ["import React from \"react\";\nimport Divider from \"./index\";\nimport Text from \"../Text\";\nimport Flex from \"../../layout/Flex\";\nimport styled from \"styled-components\";\n\nconst StyledWrapper = styled(Flex).attrs({ flexDirection: \"column\" })`\n row-gap: 15px;\n`;\n\nexport default {\n title: \"Asorted/Divider\",\n component: Divider,\n argTypes: {\n variant: {\n type: \"enum\",\n defaultValue: \"default\",\n description: \"The small variant is used to display a less noticeable separator.\",\n options: [\"default\", \"light\"],\n control: {\n options: [\"default\", \"light\"],\n control: { type: \"select\" },\n },\n },\n },\n};\n\nconst Template = (args: React.ComponentProps<typeof Divider>) => (\n <StyledWrapper>\n <Text>\n {\n \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ante mauris, tempor faucibus urna quis, gravida vulputate nisl. Nam nec commodo dui. Quisque semper neque non risus elementum maximus. Nam molestie porttitor nibh, quis tempus quam maximus quis. Phasellus ultrices, leo nec pulvinar volutpat, ipsum purus lobortis metus, eu pharetra eros libero sed dui. Pellentesque in ligula lorem. In id vestibulum ligula. Aliquam quam tellus, ornare non molestie non, ornare vitae ex. Aliquam vel urna nec leo mattis iaculis. Maecenas velit metus, bibendum eu tincidunt et, rhoncus ac elit. Cras tristique quam vel mauris scelerisque aliquet. Donec dapibus lectus at nisi blandit, nec tristique ligula porttitor. Aliquam nec iaculis ex.\"\n }\n </Text>\n <Divider {...args} />\n <Text>\n {\n \"Cras maximus orci eget sem elementum accumsan. Donec at mollis odio, a varius metus. Donec dapibus id elit vitae dignissim. Suspendisse consequat ex ut scelerisque imperdiet. Donec interdum lorem risus. Praesent consectetur lectus vel libero volutpat, id dictum sapien vulputate. Donec vulputate eros at nulla aliquet rutrum sit amet lacinia tortor. Ut pretium, purus eget sollicitudin finibus, eros dolor commodo libero, ut pellentesque mauris odio vitae sem. Nam ornare arcu sit amet posuere vestibulum. Donec eget felis sed erat placerat suscipit.\"\n }\n </Text>\n </StyledWrapper>\n);\n\nexport const Default = Template.bind({});\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,mBAAoB;AACpB,kBAAiB;AACjB,kBAAiB;AACjB,+BAAmB;AAEnB,MAAM,oBAAgB,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAM,EAAE,eAAe,SAAS,CAAC;AAAA;AAAA;AAIpE,IAAO,0BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aAAa;AAAA,MACb,SAAS,CAAC,WAAW,OAAO;AAAA,MAC5B,SAAS;AAAA,QACP,SAAS,CAAC,WAAW,OAAO;AAAA,QAC5B,SAAS,EAAE,MAAM,SAAS;AAAA,MAC5B;AAAA,IACF;AAAA,EACF;AACF;AAEA,MAAM,WAAW,CAAC,SAChB,6BAAAC,QAAA,cAAC,qBACC,6BAAAA,QAAA,cAAC,YAAAC,SAAA,MAEG,muBAEJ,GACA,6BAAAD,QAAA,cAAC,aAAAD,SAAA,EAAS,GAAG,MAAM,GACnB,6BAAAC,QAAA,cAAC,YAAAC,SAAA,MAEG,wiBAEJ,CACF;AAGK,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;",
|
|
6
|
+
"names": ["styled", "Flex", "Divider", "React", "Text"]
|
|
7
7
|
}
|
|
@@ -1,31 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
8
|
var __export = (target, all) => {
|
|
9
|
-
__markAsModule(target);
|
|
10
9
|
for (var name in all)
|
|
11
10
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
11
|
};
|
|
13
|
-
var
|
|
14
|
-
if (
|
|
15
|
-
for (let key of __getOwnPropNames(
|
|
16
|
-
if (!__hasOwnProp.call(
|
|
17
|
-
__defProp(
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
18
17
|
}
|
|
19
|
-
return
|
|
18
|
+
return to;
|
|
20
19
|
};
|
|
21
|
-
var
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var Divider_exports = {};
|
|
30
|
+
__export(Divider_exports, {
|
|
25
31
|
default: () => Divider_default
|
|
26
32
|
});
|
|
27
|
-
|
|
28
|
-
var
|
|
33
|
+
module.exports = __toCommonJS(Divider_exports);
|
|
34
|
+
var import_react = __toESM(require("react"));
|
|
35
|
+
var import_styled_components = __toESM(require("styled-components"));
|
|
29
36
|
const Divider = import_styled_components.default.div`
|
|
30
37
|
display: block;
|
|
31
38
|
background: ${(p) => p.theme.colors.neutral.c90};
|
|
@@ -35,7 +42,5 @@ const Divider = import_styled_components.default.div`
|
|
|
35
42
|
background: ${(p) => p.theme.colors.neutral.c40};
|
|
36
43
|
}
|
|
37
44
|
`;
|
|
38
|
-
var Divider_default = ({ variant = "default" }) => /* @__PURE__ */ import_react.default.createElement(Divider, {
|
|
39
|
-
"data-variant": variant
|
|
40
|
-
});
|
|
45
|
+
var Divider_default = ({ variant = "default" }) => /* @__PURE__ */ import_react.default.createElement(Divider, { "data-variant": variant });
|
|
41
46
|
//# sourceMappingURL=index.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/asorted/Divider/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\n\nconst Divider = styled.div`\n display: block;\n background: ${(p) => p.theme.colors.neutral.c90};\n height: 1px;\n\n &[data-variant=\"light\"] {\n background: ${(p) => p.theme.colors.neutral.c40};\n }\n`;\n\nexport type Props = { variant: \"default\" | \"light\" };\n\nexport default ({ variant = \"default\" }: Props) => <Divider data-variant={variant} />;\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AAEnB,MAAM,UAAU,yBAAAA,QAAO;AAAA;AAAA,gBAEP,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,kBAI5B,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAMhD,IAAO,kBAAQ,CAAC,EAAE,UAAU,UAAU,MAAa,6BAAAC,QAAA,cAAC,WAAQ,gBAAc,SAAS;",
|
|
6
|
+
"names": ["styled", "React"]
|
|
7
7
|
}
|
|
@@ -1,36 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
8
|
var __export = (target, all) => {
|
|
9
|
-
__markAsModule(target);
|
|
10
9
|
for (var name in all)
|
|
11
10
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
11
|
};
|
|
13
|
-
var
|
|
14
|
-
if (
|
|
15
|
-
for (let key of __getOwnPropNames(
|
|
16
|
-
if (!__hasOwnProp.call(
|
|
17
|
-
__defProp(
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
18
17
|
}
|
|
19
|
-
return
|
|
18
|
+
return to;
|
|
20
19
|
};
|
|
21
|
-
var
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var BoxedIcon_exports = {};
|
|
30
|
+
__export(BoxedIcon_exports, {
|
|
25
31
|
DEFAULT_BADGE_SIZE: () => DEFAULT_BADGE_SIZE,
|
|
26
32
|
DEFAULT_BOX_SIZE: () => DEFAULT_BOX_SIZE,
|
|
27
33
|
DEFAULT_ICON_SIZE: () => DEFAULT_ICON_SIZE,
|
|
28
34
|
IconBox: () => IconBox,
|
|
29
35
|
default: () => BoxedIcon_default
|
|
30
36
|
});
|
|
31
|
-
|
|
32
|
-
var
|
|
33
|
-
var
|
|
37
|
+
module.exports = __toCommonJS(BoxedIcon_exports);
|
|
38
|
+
var import_react = __toESM(require("react"));
|
|
39
|
+
var import_styled_components = __toESM(require("styled-components"));
|
|
40
|
+
var import_Flex = __toESM(require("../../layout/Flex"));
|
|
34
41
|
const DEFAULT_BOX_SIZE = 40;
|
|
35
42
|
const DEFAULT_ICON_SIZE = 16;
|
|
36
43
|
const DEFAULT_BADGE_SIZE = 20;
|
|
@@ -72,20 +79,16 @@ const IconBox = ({
|
|
|
72
79
|
badgeSize = DEFAULT_BADGE_SIZE
|
|
73
80
|
}) => {
|
|
74
81
|
const hasBadge = !!Badge;
|
|
75
|
-
return /* @__PURE__ */ import_react.default.createElement(Container, {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
}, /* @__PURE__ */ import_react.default.createElement(Badge, {
|
|
86
|
-
size: badgeSize,
|
|
87
|
-
color: badgeColor
|
|
88
|
-
})));
|
|
82
|
+
return /* @__PURE__ */ import_react.default.createElement(Container, { size }, /* @__PURE__ */ import_react.default.createElement(
|
|
83
|
+
IconBoxBackground,
|
|
84
|
+
{
|
|
85
|
+
size,
|
|
86
|
+
badgeSize,
|
|
87
|
+
hasBadge,
|
|
88
|
+
border: "1px solid",
|
|
89
|
+
borderColor
|
|
90
|
+
}
|
|
91
|
+
), children, hasBadge && /* @__PURE__ */ import_react.default.createElement(BadgeContainer, { badgeSize }, /* @__PURE__ */ import_react.default.createElement(Badge, { size: badgeSize, color: badgeColor })));
|
|
89
92
|
};
|
|
90
93
|
const BoxedIcon = ({
|
|
91
94
|
Icon,
|
|
@@ -93,12 +96,7 @@ const BoxedIcon = ({
|
|
|
93
96
|
iconColor,
|
|
94
97
|
...iconBoxProps
|
|
95
98
|
}) => {
|
|
96
|
-
return /* @__PURE__ */ import_react.default.createElement(IconBox, {
|
|
97
|
-
...iconBoxProps
|
|
98
|
-
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
99
|
-
size: iconSize || DEFAULT_ICON_SIZE,
|
|
100
|
-
color: iconColor
|
|
101
|
-
}));
|
|
99
|
+
return /* @__PURE__ */ import_react.default.createElement(IconBox, { ...iconBoxProps }, /* @__PURE__ */ import_react.default.createElement(Icon, { size: iconSize || DEFAULT_ICON_SIZE, color: iconColor }));
|
|
102
100
|
};
|
|
103
101
|
var BoxedIcon_default = BoxedIcon;
|
|
104
102
|
//# sourceMappingURL=BoxedIcon.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/asorted/Icon/BoxedIcon.tsx"],
|
|
4
4
|
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Flex from \"../../layout/Flex\";\n\nexport const DEFAULT_BOX_SIZE = 40;\nexport const DEFAULT_ICON_SIZE = 16;\nexport const DEFAULT_BADGE_SIZE = 20;\n\nfunction getClipRectangleSize(badgeSize: number): number {\n return (3 / 4) * badgeSize;\n}\n\nconst getTopRightSquareClippedPolygon = (boxSize: number, rectangleSize: number) => {\n // clipping path that hides top right square of size `${rectangleSize}px`\n const diff = boxSize - rectangleSize;\n return `polygon(0 0, 0 0, 0 0, ${diff}px 0, ${diff}px ${rectangleSize}px, 100% ${rectangleSize}px, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 100%)`;\n};\n\nconst Container = styled(Flex).attrs((p: { size: number }) => ({\n heigth: p.size,\n width: p.size,\n alignItems: \"center\",\n justifyContent: \"center\",\n position: \"relative\",\n}))<{ size: number }>``;\n\nconst IconBoxBackground = styled(Flex)<{ size: number; badgeSize: number; hasBadge: boolean }>`\n position: absolute;\n height: ${(p) => p.size}px;\n width: ${(p) => p.size}px;\n ${(p) => {\n return (\n p.hasBadge &&\n `clip-path: ${getTopRightSquareClippedPolygon(p.size, getClipRectangleSize(p.badgeSize))};`\n );\n }};\n border-radius: ${(p) => p.theme.radii[2]}px;\n`;\n\nconst BadgeContainer = styled.div<{ badgeSize: number }>`\n position: absolute;\n ${(p) => `\n top: -${p.badgeSize / 2 - 2}px;\n right: -${p.badgeSize / 2 - 2}px;`}\n`;\n\nexport type IconProps = {\n size?: number;\n color?: string;\n};\n\nexport type IconBoxProps = {\n /**\n * Component that takes `{size?: number; color?: string}` as props. Will be rendered at the top right with the size provided in `badgeSize` or a default size.\n */\n Badge?: React.ComponentType<IconProps> | ((props: IconProps) => JSX.Element);\n /**\n * Color of the border\n */\n borderColor?: string;\n /**\n * Badge color, will be applied to the component provided in the `Badge` prop\n */\n badgeColor?: string;\n /**\n * Badge size, will be applied to the component provided in the `Badge` prop\n */\n badgeSize?: number;\n children?: JSX.Element;\n /**\n * Box size for preview\n */\n size?: number;\n};\n\nexport type BoxedIconProps = IconBoxProps & {\n /**\n * Component that takes `{size?: number; color?: string}` as props. Will be rendered at the top right with the size provided in `iconSize` or a default size.\n */\n Icon: React.ComponentType<IconProps> | ((props: IconProps) => JSX.Element);\n /**\n * Icon size, will be applied to the component provided in the `Icon` prop\n */\n iconSize?: number;\n /**\n * Icon color, will be applied to the component provided in the `Icon` prop\n */\n iconColor?: string;\n};\n\nexport const IconBox = ({\n Badge,\n size = DEFAULT_BOX_SIZE,\n children,\n borderColor = \"neutral.c40\",\n badgeColor,\n badgeSize = DEFAULT_BADGE_SIZE,\n}: IconBoxProps) => {\n const hasBadge = !!Badge;\n return (\n <Container size={size}>\n <IconBoxBackground\n size={size}\n badgeSize={badgeSize}\n hasBadge={hasBadge}\n border=\"1px solid\"\n borderColor={borderColor}\n />\n {children}\n {hasBadge && (\n <BadgeContainer badgeSize={badgeSize}>\n <Badge size={badgeSize} color={badgeColor} />\n </BadgeContainer>\n )}\n </Container>\n );\n};\n\nconst BoxedIcon = ({\n Icon,\n iconSize = DEFAULT_ICON_SIZE,\n iconColor,\n ...iconBoxProps\n}: BoxedIconProps) => {\n return (\n <IconBox {...iconBoxProps}>\n <Icon size={iconSize || DEFAULT_ICON_SIZE} color={iconColor} />\n </IconBox>\n );\n};\n\nexport default BoxedIcon;\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AAEV,MAAM,mBAAmB;AACzB,MAAM,oBAAoB;AAC1B,MAAM,qBAAqB;AAElC,SAAS,qBAAqB,WAA2B;AACvD,SAAQ,IAAI,IAAK;AACnB;AAEA,MAAM,kCAAkC,CAAC,SAAiB,kBAA0B;AAElF,QAAM,OAAO,UAAU;AACvB,SAAO,0BAA0B,aAAa,UAAU,yBAAyB;AACnF;AAEA,MAAM,gBAAY,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAM,CAAC,OAAyB;AAAA,EAC7D,QAAQ,EAAE;AAAA,EACV,OAAO,EAAE;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,UAAU;AACZ,EAAE;AAEF,MAAM,wBAAoB,yBAAAD,SAAO,YAAAC,OAAI;AAAA;AAAA,YAEzB,CAAC,MAAM,EAAE;AAAA,WACV,CAAC,MAAM,EAAE;AAAA,IAChB,CAAC,MAAM;AACP,SACE,EAAE,YACF,cAAc,gCAAgC,EAAE,MAAM,qBAAqB,EAAE,SAAS,CAAC;AAE3F;AAAA,mBACiB,CAAC,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA;AAGzC,MAAM,iBAAiB,yBAAAD,QAAO;AAAA;AAAA,IAE1B,CAAC,MAAM;AAAA,YACC,EAAE,YAAY,IAAI;AAAA,cAChB,EAAE,YAAY,IAAI;AAAA;AA+CzB,MAAM,UAAU,CAAC;AAAA,EACtB;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,YAAY;AACd,MAAoB;AAClB,QAAM,WAAW,CAAC,CAAC;AACnB,SACE,6BAAAE,QAAA,cAAC,aAAU,QACT,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAO;AAAA,MACP;AAAA;AAAA,EACF,GACC,UACA,YACC,6BAAAA,QAAA,cAAC,kBAAe,aACd,6BAAAA,QAAA,cAAC,SAAM,MAAM,WAAW,OAAO,YAAY,CAC7C,CAEJ;AAEJ;AAEA,MAAM,YAAY,CAAC;AAAA,EACjB;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,MAAsB;AACpB,SACE,6BAAAA,QAAA,cAAC,WAAS,GAAG,gBACX,6BAAAA,QAAA,cAAC,QAAK,MAAM,YAAY,mBAAmB,OAAO,WAAW,CAC/D;AAEJ;AAEA,IAAO,oBAAQ;",
|
|
6
|
+
"names": ["styled", "Flex", "React"]
|
|
7
7
|
}
|
|
@@ -1,37 +1,41 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
8
|
var __export = (target, all) => {
|
|
9
|
-
__markAsModule(target);
|
|
10
9
|
for (var name in all)
|
|
11
10
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
11
|
};
|
|
13
|
-
var
|
|
14
|
-
if (
|
|
15
|
-
for (let key of __getOwnPropNames(
|
|
16
|
-
if (!__hasOwnProp.call(
|
|
17
|
-
__defProp(
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
18
17
|
}
|
|
19
|
-
return
|
|
18
|
+
return to;
|
|
20
19
|
};
|
|
21
|
-
var
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var BoxedIcon_stories_exports = {};
|
|
30
|
+
__export(BoxedIcon_stories_exports, {
|
|
25
31
|
BoxedIcon: () => BoxedIcon,
|
|
26
32
|
default: () => BoxedIcon_stories_default
|
|
27
33
|
});
|
|
28
|
-
|
|
29
|
-
var
|
|
30
|
-
var
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
...{ size, color }
|
|
34
|
-
});
|
|
34
|
+
module.exports = __toCommonJS(BoxedIcon_stories_exports);
|
|
35
|
+
var import_react = __toESM(require("react"));
|
|
36
|
+
var import_Icon = __toESM(require("./Icon"));
|
|
37
|
+
var import_BoxedIcon = __toESM(require("./BoxedIcon"));
|
|
38
|
+
const ExampleIcon = ({ size, color, name }) => /* @__PURE__ */ import_react.default.createElement(import_Icon.default, { name, ...{ size, color } });
|
|
35
39
|
const Story = {
|
|
36
40
|
title: "Asorted/Icons/BoxedIcon",
|
|
37
41
|
component: import_BoxedIcon.default,
|
|
@@ -104,26 +108,23 @@ const BoxedIconTemplate = (args) => {
|
|
|
104
108
|
const badgeSize = args.badgeSize;
|
|
105
109
|
const borderColor = args.borderColor;
|
|
106
110
|
const iconColor = args.iconColor;
|
|
107
|
-
const IconComp = args.Icon || ((props) => /* @__PURE__ */ import_react.default.createElement(ExampleIcon, {
|
|
108
|
-
|
|
109
|
-
name: args.exampleIconName
|
|
110
|
-
}));
|
|
111
|
-
const BadgeComp = args.Badge || ((props) => /* @__PURE__ */ import_react.default.createElement(ExampleIcon, {
|
|
112
|
-
...props,
|
|
113
|
-
name: args.exampleBadgeName
|
|
114
|
-
}));
|
|
111
|
+
const IconComp = args.Icon || ((props) => /* @__PURE__ */ import_react.default.createElement(ExampleIcon, { ...props, name: args.exampleIconName }));
|
|
112
|
+
const BadgeComp = args.Badge || ((props) => /* @__PURE__ */ import_react.default.createElement(ExampleIcon, { ...props, name: args.exampleBadgeName }));
|
|
115
113
|
const iconSize = args.iconSize;
|
|
116
114
|
const size = args.size;
|
|
117
|
-
return /* @__PURE__ */ import_react.default.createElement(
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
115
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
116
|
+
import_BoxedIcon.default,
|
|
117
|
+
{
|
|
118
|
+
Icon: IconComp,
|
|
119
|
+
Badge: args.exampleBadgeEnabled ? BadgeComp : void 0,
|
|
120
|
+
badgeColor,
|
|
121
|
+
badgeSize,
|
|
122
|
+
borderColor,
|
|
123
|
+
iconColor,
|
|
124
|
+
iconSize,
|
|
125
|
+
size
|
|
126
|
+
}
|
|
127
|
+
);
|
|
127
128
|
};
|
|
128
129
|
const BoxedIcon = BoxedIconTemplate.bind({});
|
|
129
130
|
//# sourceMappingURL=BoxedIcon.stories.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/asorted/Icon/BoxedIcon.stories.tsx"],
|
|
4
4
|
"sourcesContent": ["import React from \"react\";\nimport Icon, { iconNames } from \"./Icon\";\nimport BoxedIconC, {\n BoxedIconProps,\n IconProps,\n DEFAULT_BOX_SIZE,\n DEFAULT_ICON_SIZE,\n DEFAULT_BADGE_SIZE,\n} from \"./BoxedIcon\";\n\nconst ExampleIcon = ({ size, color, name }: IconProps & { name: string }) => (\n <Icon name={name} {...{ size, color }} />\n);\n\nconst Story = {\n title: \"Asorted/Icons/BoxedIcon\",\n component: BoxedIconC,\n argTypes: {\n exampleIconName: {\n type: \"enum\",\n defaultValue: \"Activity\",\n description:\n \"[Not a BoxedIcon prop, only for this Storybook example] - Icon name. Value is passed to the `Icon` component of this UI library which is then used for the `Icon` prop.\",\n control: {\n options: iconNames,\n control: {\n type: \"select\",\n },\n },\n },\n exampleBadgeName: {\n type: \"enum\",\n defaultValue: \"CircledCheckSolid\",\n description:\n \"[Not a BoxedIcon prop, only for this Storybook example] - Badge icon name. Value is passed to the `Icon` component of this UI library which is then used for the `Badge` prop.\",\n control: {\n options: iconNames,\n control: {\n type: \"select\",\n },\n },\n },\n exampleBadgeEnabled: {\n type: \"boolean\",\n defaultValue: true,\n description:\n \"[Not a BoxedIcon prop, only for this Storybook example] - Controls whether a `Badge` prop is passed to the `BoxedIcon` component.\",\n },\n Badge: {\n control: false,\n },\n Icon: {\n control: false,\n },\n iconColor: {\n type: \"string\",\n defaultValue: \"hsla(110, 50%, 57%, 1)\",\n control: { control: \"color\" },\n },\n badgeColor: {\n type: \"string\",\n defaultValue: \"hsla(110, 50%, 57%, 1)\",\n control: { control: \"color\" },\n },\n borderColor: {\n type: \"string\",\n defaultValue: \"success.c40\",\n control: { control: \"color\" },\n },\n iconSize: {\n type: \"number\",\n defaultValue: DEFAULT_ICON_SIZE,\n },\n badgeSize: {\n type: \"number\",\n defaultValue: DEFAULT_BADGE_SIZE,\n },\n size: {\n type: \"number\",\n defaultValue: DEFAULT_BOX_SIZE,\n },\n },\n};\n\nexport default Story;\n\nconst BoxedIconTemplate = (\n args: BoxedIconProps & {\n exampleIconName: string;\n exampleBadgeName: string;\n exampleBadgeEnabled: boolean;\n },\n) => {\n const badgeColor = args.badgeColor;\n const badgeSize = args.badgeSize;\n const borderColor = args.borderColor;\n const iconColor = args.iconColor;\n const IconComp =\n args.Icon || ((props: IconProps) => <ExampleIcon {...props} name={args.exampleIconName} />);\n const BadgeComp =\n args.Badge || ((props: IconProps) => <ExampleIcon {...props} name={args.exampleBadgeName} />);\n const iconSize = args.iconSize;\n const size = args.size;\n\n return (\n <BoxedIconC\n Icon={IconComp}\n Badge={args.exampleBadgeEnabled ? BadgeComp : undefined}\n badgeColor={badgeColor}\n badgeSize={badgeSize}\n borderColor={borderColor}\n iconColor={iconColor}\n iconSize={iconSize}\n size={size}\n />\n );\n};\n\nexport const BoxedIcon = BoxedIconTemplate.bind({});\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,kBAAgC;AAChC,uBAMO;AAEP,MAAM,cAAc,CAAC,EAAE,MAAM,OAAO,KAAK,MACvC,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAK,MAAa,GAAG,EAAE,MAAM,MAAM,GAAG;AAGzC,MAAM,QAAQ;AAAA,EACZ,OAAO;AAAA,EACP,WAAW,iBAAAC;AAAA,EACX,UAAU;AAAA,IACR,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aACE;AAAA,MACF,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,UACP,MAAM;AAAA,QACR;AAAA,MACF;AAAA,IACF;AAAA,IACA,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aACE;AAAA,MACF,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,UACP,MAAM;AAAA,QACR;AAAA,MACF;AAAA,IACF;AAAA,IACA,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aACE;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,IACX;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,MACN,cAAc;AAAA,MACd,SAAS,EAAE,SAAS,QAAQ;AAAA,IAC9B;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,MACN,cAAc;AAAA,MACd,SAAS,EAAE,SAAS,QAAQ;AAAA,IAC9B;AAAA,IACA,aAAa;AAAA,MACX,MAAM;AAAA,MACN,cAAc;AAAA,MACd,SAAS,EAAE,SAAS,QAAQ;AAAA,IAC9B;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,MACN,cAAc;AAAA,IAChB;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,MACN,cAAc;AAAA,IAChB;AAAA,IACA,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,IAChB;AAAA,EACF;AACF;AAEA,IAAO,4BAAQ;AAEf,MAAM,oBAAoB,CACxB,SAKG;AACH,QAAM,aAAa,KAAK;AACxB,QAAM,YAAY,KAAK;AACvB,QAAM,cAAc,KAAK;AACzB,QAAM,YAAY,KAAK;AACvB,QAAM,WACJ,KAAK,SAAS,CAAC,UAAqB,6BAAAF,QAAA,cAAC,eAAa,GAAG,OAAO,MAAM,KAAK,iBAAiB;AAC1F,QAAM,YACJ,KAAK,UAAU,CAAC,UAAqB,6BAAAA,QAAA,cAAC,eAAa,GAAG,OAAO,MAAM,KAAK,kBAAkB;AAC5F,QAAM,WAAW,KAAK;AACtB,QAAM,OAAO,KAAK;AAElB,SACE,6BAAAA,QAAA;AAAA,IAAC,iBAAAE;AAAA,IAAA;AAAA,MACC,MAAM;AAAA,MACN,OAAO,KAAK,sBAAsB,YAAY;AAAA,MAC9C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAEO,MAAM,YAAY,kBAAkB,KAAK,CAAC,CAAC;",
|
|
6
|
+
"names": ["React", "Icon", "BoxedIconC"]
|
|
7
7
|
}
|
|
@@ -1,42 +1,51 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
8
|
var __export = (target, all) => {
|
|
9
|
-
__markAsModule(target);
|
|
10
9
|
for (var name in all)
|
|
11
10
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
11
|
};
|
|
13
|
-
var
|
|
14
|
-
if (
|
|
15
|
-
for (let key of __getOwnPropNames(
|
|
16
|
-
if (!__hasOwnProp.call(
|
|
17
|
-
__defProp(
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
18
17
|
}
|
|
19
|
-
return
|
|
18
|
+
return to;
|
|
20
19
|
};
|
|
21
|
-
var
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var CryptoIcon_exports = {};
|
|
30
|
+
__export(CryptoIcon_exports, {
|
|
25
31
|
default: () => CryptoIcon_default,
|
|
26
32
|
iconNames: () => iconNames
|
|
27
33
|
});
|
|
28
|
-
|
|
29
|
-
var
|
|
30
|
-
var
|
|
31
|
-
var
|
|
32
|
-
var
|
|
33
|
-
var
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
34
|
+
module.exports = __toCommonJS(CryptoIcon_exports);
|
|
35
|
+
var icons = __toESM(require("@ledgerhq/crypto-icons-ui/react"));
|
|
36
|
+
var import_react = __toESM(require("react"));
|
|
37
|
+
var import_styles = require("../../../styles");
|
|
38
|
+
var import_styled_components = __toESM(require("styled-components"));
|
|
39
|
+
var import_Text = __toESM(require("../Text/index"));
|
|
40
|
+
var import_Flex = __toESM(require("../../layout/Flex"));
|
|
41
|
+
const iconNames = Array.from(
|
|
42
|
+
Object.keys(icons).reduce((set, rawKey) => {
|
|
43
|
+
const key = rawKey;
|
|
44
|
+
if (!set.has(key))
|
|
45
|
+
set.add(key);
|
|
46
|
+
return set;
|
|
47
|
+
}, /* @__PURE__ */ new Set())
|
|
48
|
+
);
|
|
40
49
|
const Container = (0, import_styled_components.default)(import_Flex.default).attrs((p) => ({
|
|
41
50
|
heigth: p.size,
|
|
42
51
|
width: p.size,
|
|
@@ -53,24 +62,23 @@ const Circle = (0, import_styled_components.default)(import_Flex.default).attrs(
|
|
|
53
62
|
borderRadius: "50%",
|
|
54
63
|
backgroundColor: p.backgroundColor
|
|
55
64
|
}))``;
|
|
56
|
-
const TokenContainer = (0, import_styled_components.default)(import_Flex.default).attrs(
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
65
|
+
const TokenContainer = (0, import_styled_components.default)(import_Flex.default).attrs(
|
|
66
|
+
(p) => ({
|
|
67
|
+
position: "absolute",
|
|
68
|
+
bottom: "-2px",
|
|
69
|
+
right: "-5px",
|
|
70
|
+
alignItems: "center",
|
|
71
|
+
justifyContent: "center",
|
|
72
|
+
heigth: p.size,
|
|
73
|
+
width: p.size,
|
|
74
|
+
borderRadius: "50%",
|
|
75
|
+
border: `2px solid ${p.borderColor}`,
|
|
76
|
+
backgroundColor: p.backgroundColor,
|
|
77
|
+
zIndex: 0
|
|
78
|
+
})
|
|
79
|
+
)``;
|
|
69
80
|
function Fallback({ name }) {
|
|
70
|
-
return /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
|
|
71
|
-
uppercase: true,
|
|
72
|
-
color: "neutral.c70"
|
|
73
|
-
}, name.slice(0, 1));
|
|
81
|
+
return /* @__PURE__ */ import_react.default.createElement(import_Text.default, { uppercase: true, color: "neutral.c70" }, name.slice(0, 1));
|
|
74
82
|
}
|
|
75
83
|
const IconBox = ({
|
|
76
84
|
children,
|
|
@@ -86,16 +94,15 @@ const IconBox = ({
|
|
|
86
94
|
const defaultColor = Component.DefaultColor;
|
|
87
95
|
const iconColor = disabled ? colors.neutral.c70 : color || defaultColor;
|
|
88
96
|
const contrastedColor = (0, import_styles.ensureContrast)(iconColor, backgroundColor || colors.background.main);
|
|
89
|
-
return /* @__PURE__ */ import_react.default.createElement(Container, {
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
size,
|
|
97
|
-
|
|
98
|
-
})));
|
|
97
|
+
return /* @__PURE__ */ import_react.default.createElement(Container, { size }, children, tokenIcon && /* @__PURE__ */ import_react.default.createElement(
|
|
98
|
+
TokenContainer,
|
|
99
|
+
{
|
|
100
|
+
size: size / 3,
|
|
101
|
+
borderColor: colors.background.main,
|
|
102
|
+
backgroundColor: contrastedColor
|
|
103
|
+
},
|
|
104
|
+
/* @__PURE__ */ import_react.default.createElement(Component, { size, color: colors.background.main })
|
|
105
|
+
));
|
|
99
106
|
}
|
|
100
107
|
return children;
|
|
101
108
|
};
|
|
@@ -116,29 +123,12 @@ const CryptoIcon = ({
|
|
|
116
123
|
const defaultColor = Component.DefaultColor;
|
|
117
124
|
const iconColor = disabled ? colors.neutral.c70 : color || defaultColor;
|
|
118
125
|
const contrastedColor = (0, import_styles.ensureContrast)(iconColor, backgroundColor || colors.background.main);
|
|
119
|
-
return /* @__PURE__ */ import_react.default.createElement(IconBox, {
|
|
120
|
-
size,
|
|
121
|
-
tokenIcon,
|
|
122
|
-
color,
|
|
123
|
-
disabled,
|
|
124
|
-
name
|
|
125
|
-
}, tokenIcon || circleIcon ? /* @__PURE__ */ import_react.default.createElement(Circle, {
|
|
126
|
-
backgroundColor: contrastedColor,
|
|
127
|
-
size
|
|
128
|
-
}, /* @__PURE__ */ import_react.default.createElement(Component, {
|
|
129
|
-
size,
|
|
130
|
-
color: colors.background.main
|
|
131
|
-
})) : /* @__PURE__ */ import_react.default.createElement(Component, {
|
|
132
|
-
size,
|
|
133
|
-
color: contrastedColor
|
|
134
|
-
}));
|
|
126
|
+
return /* @__PURE__ */ import_react.default.createElement(IconBox, { size, tokenIcon, color, disabled, name }, tokenIcon || circleIcon ? /* @__PURE__ */ import_react.default.createElement(Circle, { backgroundColor: contrastedColor, size }, /* @__PURE__ */ import_react.default.createElement(Component, { size, color: colors.background.main })) : /* @__PURE__ */ import_react.default.createElement(Component, { size, color: contrastedColor }));
|
|
135
127
|
}
|
|
136
128
|
if (fallbackIcon) {
|
|
137
129
|
return fallbackIcon;
|
|
138
130
|
}
|
|
139
|
-
return /* @__PURE__ */ import_react.default.createElement(Fallback, {
|
|
140
|
-
name
|
|
141
|
-
});
|
|
131
|
+
return /* @__PURE__ */ import_react.default.createElement(Fallback, { name });
|
|
142
132
|
};
|
|
143
133
|
var CryptoIcon_default = CryptoIcon;
|
|
144
134
|
//# sourceMappingURL=CryptoIcon.js.map
|