@ntbjs/react-components 2.0.14 → 3.0.0-rc.2
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 +34 -0
- package/build/data/Alert/Alert.js +18 -33
- package/build/data/Alert/Alert.js.map +1 -1
- package/build/data/Alert/Alert.styled.js +9 -47
- package/build/data/Alert/Alert.styled.js.map +1 -1
- package/build/data/Badge/Badge.js +36 -61
- package/build/data/Badge/Badge.js.map +1 -1
- package/build/data/Badge/Badge.styled.js +21 -70
- package/build/data/Badge/Badge.styled.js.map +1 -1
- package/build/data/Popover/Popover.js +125 -71
- package/build/data/Popover/Popover.js.map +1 -1
- package/build/data/Popover/Popover.styled.js +10 -140
- package/build/data/Popover/Popover.styled.js.map +1 -1
- package/build/data/SeverityBadge/SeverityBadge.js +13 -22
- package/build/data/SeverityBadge/SeverityBadge.js.map +1 -1
- package/build/data/SeverityBadge/index.js +2 -0
- package/build/data/SeverityBadge/index.js.map +1 -0
- package/build/data/Tab/Tab.js +7 -13
- package/build/data/Tab/Tab.js.map +1 -1
- package/build/data/Tab/Tab.styled.js +4 -7
- package/build/data/Tab/Tab.styled.js.map +1 -1
- package/build/data/Tabs/Tabs.js +30 -32
- package/build/data/Tabs/Tabs.js.map +1 -1
- package/build/data/Tabs/Tabs.styled.js +21 -57
- package/build/data/Tabs/Tabs.styled.js.map +1 -1
- package/build/data/Tooltip/Tooltip.js +102 -33
- package/build/data/Tooltip/Tooltip.js.map +1 -1
- package/build/data/Tooltip/Tooltip.styled.js +9 -22
- package/build/data/Tooltip/Tooltip.styled.js.map +1 -1
- package/build/data/VerificationStatusIcon/VerificationStatusIcon.js +16 -23
- package/build/data/VerificationStatusIcon/VerificationStatusIcon.js.map +1 -1
- package/build/data/VerificationStatusIcon/VerificationStatusIcon.styled.js +13 -31
- package/build/data/VerificationStatusIcon/VerificationStatusIcon.styled.js.map +1 -1
- package/build/data/VerificationStatusIcon/index.js +2 -0
- package/build/data/VerificationStatusIcon/index.js.map +1 -0
- package/build/data/_shared/FloatingArrow.styled.js +30 -0
- package/build/data/_shared/FloatingArrow.styled.js.map +1 -0
- package/build/hooks/useEventListner.js.map +1 -1
- package/build/hooks/useFloatingPopover.js +187 -0
- package/build/hooks/useFloatingPopover.js.map +1 -0
- package/build/hooks/useIsomorphicLayoutEffect.js.map +1 -1
- package/build/hooks/useOnClickOutside.js.map +1 -1
- package/build/hooks/useTooltipAutoShow.js.map +1 -1
- package/build/icons/arrow-back.svg.js +3 -3
- package/build/icons/arrow-back.svg.js.map +1 -1
- package/build/icons/arrow-forward.svg.js +4 -4
- package/build/icons/arrow-forward.svg.js.map +1 -1
- package/build/icons/check-rectangle-filled.svg.js +3 -3
- package/build/icons/check-rectangle-filled.svg.js.map +1 -1
- package/build/icons/close.svg.js +3 -3
- package/build/icons/close.svg.js.map +1 -1
- package/build/icons/edit-note.svg.js +3 -3
- package/build/icons/edit-note.svg.js.map +1 -1
- package/build/icons/expand-more.svg.js +3 -3
- package/build/icons/expand-more.svg.js.map +1 -1
- package/build/icons/headset.svg.js +3 -3
- package/build/icons/headset.svg.js.map +1 -1
- package/build/icons/layers.svg.js +3 -3
- package/build/icons/layers.svg.js.map +1 -1
- package/build/icons/link.svg.js +3 -3
- package/build/icons/link.svg.js.map +1 -1
- package/build/icons/play.svg.js +3 -3
- package/build/icons/play.svg.js.map +1 -1
- package/build/icons/search.svg.js +3 -3
- package/build/icons/search.svg.js.map +1 -1
- package/build/icons/star-filled.svg.js +3 -3
- package/build/icons/star-filled.svg.js.map +1 -1
- package/build/icons/star.svg.js +3 -3
- package/build/icons/star.svg.js.map +1 -1
- package/build/icons/triangle-right.svg.js +3 -3
- package/build/icons/triangle-right.svg.js.map +1 -1
- package/build/icons/verification.svg.js +3 -3
- package/build/icons/verification.svg.js.map +1 -1
- package/build/icons/warning-circle.svg.js +3 -3
- package/build/icons/warning-circle.svg.js.map +1 -1
- package/build/inputs/ActionButton/ActionButton.js +11 -22
- package/build/inputs/ActionButton/ActionButton.js.map +1 -1
- package/build/inputs/ActionButton/ActionButton.styled.js +5 -54
- package/build/inputs/ActionButton/ActionButton.styled.js.map +1 -1
- package/build/inputs/Button/Button.js +125 -121
- package/build/inputs/Button/Button.js.map +1 -1
- package/build/inputs/Button/Button.styled.js +42 -260
- package/build/inputs/Button/Button.styled.js.map +1 -1
- package/build/inputs/Checkbox/Checkbox.js +45 -61
- package/build/inputs/Checkbox/Checkbox.js.map +1 -1
- package/build/inputs/Checkbox/Checkbox.styled.js +24 -153
- package/build/inputs/Checkbox/Checkbox.styled.js.map +1 -1
- package/build/inputs/CompactAutocompleteSelect/CompactAutocompleteSelect.js +106 -111
- package/build/inputs/CompactAutocompleteSelect/CompactAutocompleteSelect.js.map +1 -1
- package/build/inputs/CompactAutocompleteSelect/CompactAutocompleteSelect.styled.js +88 -273
- package/build/inputs/CompactAutocompleteSelect/CompactAutocompleteSelect.styled.js.map +1 -1
- package/build/inputs/CompactStarRating/CompactStarRating.js +56 -77
- package/build/inputs/CompactStarRating/CompactStarRating.js.map +1 -1
- package/build/inputs/CompactStarRating/CompactStarRating.styled.js +32 -211
- package/build/inputs/CompactStarRating/CompactStarRating.styled.js.map +1 -1
- package/build/inputs/CompactTextInput/CompactTextInput.js +86 -105
- package/build/inputs/CompactTextInput/CompactTextInput.js.map +1 -1
- package/build/inputs/CompactTextInput/CompactTextInput.styled.js +55 -258
- package/build/inputs/CompactTextInput/CompactTextInput.styled.js.map +1 -1
- package/build/inputs/MultiLevelCheckbox/MultiLevelCheckbox.js +70 -77
- package/build/inputs/MultiLevelCheckbox/MultiLevelCheckbox.js.map +1 -1
- package/build/inputs/MultiLevelCheckbox/MultiLevelCheckbox.styled.js +28 -60
- package/build/inputs/MultiLevelCheckbox/MultiLevelCheckbox.styled.js.map +1 -1
- package/build/inputs/MultiLevelCheckbox/types.js +12 -12
- package/build/inputs/MultiLevelCheckbox/types.js.map +1 -1
- package/build/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.js +69 -73
- package/build/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.js.map +1 -1
- package/build/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.styled.js +44 -87
- package/build/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.styled.js.map +1 -1
- package/build/inputs/MultiSelect/MultiSelect.js +69 -79
- package/build/inputs/MultiSelect/MultiSelect.js.map +1 -1
- package/build/inputs/MultiSelect/MultiSelect.styled.js +70 -76
- package/build/inputs/MultiSelect/MultiSelect.styled.js.map +1 -1
- package/build/inputs/Radio/Radio.js +20 -33
- package/build/inputs/Radio/Radio.js.map +1 -1
- package/build/inputs/Radio/Radio.styled.js +15 -96
- package/build/inputs/Radio/Radio.styled.js.map +1 -1
- package/build/inputs/Switch/Switch.js +28 -40
- package/build/inputs/Switch/Switch.js.map +1 -1
- package/build/inputs/Switch/Switch.styled.js +24 -94
- package/build/inputs/Switch/Switch.styled.js.map +1 -1
- package/build/inputs/TextArea/TextArea.js +98 -123
- package/build/inputs/TextArea/TextArea.js.map +1 -1
- package/build/inputs/TextArea/TextArea.styled.js +64 -379
- package/build/inputs/TextArea/TextArea.styled.js.map +1 -1
- package/build/inputs/TextInput/TextInput.js +59 -79
- package/build/inputs/TextInput/TextInput.js.map +1 -1
- package/build/inputs/TextInput/TextInput.styled.js +33 -224
- package/build/inputs/TextInput/TextInput.styled.js.map +1 -1
- package/build/layout/InputGroup/InputGroup.js +6 -9
- package/build/layout/InputGroup/InputGroup.js.map +1 -1
- package/build/layout/InputGroup/InputGroup.styled.js +4 -3
- package/build/layout/InputGroup/InputGroup.styled.js.map +1 -1
- package/build/layout/InputGroup/index.js +2 -0
- package/build/layout/InputGroup/index.js.map +1 -0
- package/build/layout/SectionSeparator/SectionSeparator.js +5 -9
- package/build/layout/SectionSeparator/SectionSeparator.js.map +1 -1
- package/build/layout/SectionSeparator/SectionSeparator.styled.js +4 -8
- package/build/layout/SectionSeparator/SectionSeparator.styled.js.map +1 -1
- package/build/styles/utils/colors-export.d.ts +54 -0
- package/build/styles/utils/colors-export.js.map +1 -1
- package/build/utils/dateTime.js.map +1 -1
- package/build/utils/defaultTheme.js +14 -28
- package/build/utils/defaultTheme.js.map +1 -1
- package/build/utils/getElementRef.js +14 -0
- package/build/utils/getElementRef.js.map +1 -0
- package/build/utils/parseTrigger.js +16 -0
- package/build/utils/parseTrigger.js.map +1 -0
- package/build/widgets/AssetAction/AssetAction.js +26 -33
- package/build/widgets/AssetAction/AssetAction.js.map +1 -1
- package/build/widgets/AssetAction/AssetAction.styled.js +20 -34
- package/build/widgets/AssetAction/AssetAction.styled.js.map +1 -1
- package/build/widgets/AssetActionsBase/AssetActionsBase.js +8 -13
- package/build/widgets/AssetActionsBase/AssetActionsBase.js.map +1 -1
- package/build/widgets/AssetActionsBase/AssetActionsBase.styled.js +4 -9
- package/build/widgets/AssetActionsBase/AssetActionsBase.styled.js.map +1 -1
- package/build/widgets/AssetGallery/AssetGallery.js +15 -40
- package/build/widgets/AssetGallery/AssetGallery.js.map +1 -1
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryBase.js +55 -70
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryBase.js.map +1 -1
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryBase.styled.js +12 -24
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryBase.styled.js.map +1 -1
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.js +146 -122
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.js.map +1 -1
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.styled.js +99 -286
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.styled.js.map +1 -1
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.js +170 -125
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.js.map +1 -1
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.styled.js +135 -364
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.styled.js.map +1 -1
- package/build/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.js +20 -21
- package/build/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.js.map +1 -1
- package/build/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.styled.js +20 -71
- package/build/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.styled.js.map +1 -1
- package/build/widgets/ContextMenu/ContextMenu.js +12 -11
- package/build/widgets/ContextMenu/ContextMenu.js.map +1 -1
- package/build/widgets/ContextMenu/ContextMenu.styled.js +4 -4
- package/build/widgets/ContextMenu/ContextMenu.styled.js.map +1 -1
- package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js +17 -25
- package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js.map +1 -1
- package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.styled.js +16 -71
- package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.styled.js.map +1 -1
- package/build/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.js +7 -11
- package/build/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.js.map +1 -1
- package/build/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.styled.js +4 -11
- package/build/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.styled.js.map +1 -1
- package/build/widgets/InfoCard/InfoCard.js +26 -21
- package/build/widgets/InfoCard/InfoCard.js.map +1 -1
- package/build/widgets/InfoCard/InfoCard.styled.js +36 -84
- package/build/widgets/InfoCard/InfoCard.styled.js.map +1 -1
- package/build/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.js +28 -34
- package/build/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.js.map +1 -1
- package/build/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.styled.js +21 -57
- package/build/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.styled.js.map +1 -1
- package/build/widgets/InstructionSeverityDisplay/index.js +2 -0
- package/build/widgets/InstructionSeverityDisplay/index.js.map +1 -0
- package/build/widgets/Instructions/Instructions.js +53 -95
- package/build/widgets/Instructions/Instructions.js.map +1 -1
- package/build/widgets/Instructions/Instructions.styled.js +27 -26
- package/build/widgets/Instructions/Instructions.styled.js.map +1 -1
- package/build/widgets/ProgressBar/ProgressBar.js +39 -37
- package/build/widgets/ProgressBar/ProgressBar.js.map +1 -1
- package/build/widgets/ProgressBar/ProgressBar.styled.js +56 -125
- package/build/widgets/ProgressBar/ProgressBar.styled.js.map +1 -1
- package/build/widgets/SummaryCard/SummaryCard.js +55 -64
- package/build/widgets/SummaryCard/SummaryCard.js.map +1 -1
- package/build/widgets/SummaryCard/SummaryCard.styled.js +51 -106
- package/build/widgets/SummaryCard/SummaryCard.styled.js.map +1 -1
- package/package.json +84 -36
- package/styles/utils/colors-export.d.ts +54 -0
- package/types/components/data/Alert/Alert.d.ts +76 -0
- package/types/components/data/Alert/Alert.styled.d.ts +52 -0
- package/types/components/data/Alert/index.d.ts +1 -0
- package/types/components/data/Badge/Badge.d.ts +120 -0
- package/types/components/data/Badge/Badge.styled.d.ts +33 -0
- package/types/components/data/Badge/index.d.ts +1 -0
- package/types/components/data/Popover/Popover.d.ts +116 -0
- package/types/components/data/Popover/Popover.styled.d.ts +15 -0
- package/types/components/data/Popover/index.d.ts +1 -0
- package/types/components/data/SeverityBadge/SeverityBadge.d.ts +72 -0
- package/types/components/data/SeverityBadge/index.d.ts +1 -0
- package/types/components/data/Tab/Tab.d.ts +14 -0
- package/types/components/data/Tab/Tab.styled.d.ts +1 -0
- package/types/components/data/Tab/index.d.ts +1 -0
- package/types/components/data/Tabs/Tabs.d.ts +111 -0
- package/types/components/data/Tabs/Tabs.styled.d.ts +26 -0
- package/types/components/data/Tabs/index.d.ts +1 -0
- package/types/components/data/Tooltip/Tooltip.d.ts +88 -0
- package/types/components/data/Tooltip/Tooltip.styled.d.ts +8 -0
- package/types/components/data/Tooltip/index.d.ts +1 -0
- package/types/components/data/VerificationStatusIcon/VerificationStatusIcon.d.ts +35 -0
- package/types/components/data/VerificationStatusIcon/VerificationStatusIcon.styled.d.ts +27 -0
- package/types/components/data/VerificationStatusIcon/index.d.ts +1 -0
- package/types/components/data/_shared/FloatingArrow.styled.d.ts +29 -0
- package/types/components/data/index.d.ts +8 -0
- package/types/components/index.d.ts +3 -0
- package/types/components/inputs/ActionButton/ActionButton.d.ts +55 -0
- package/types/components/inputs/ActionButton/ActionButton.styled.d.ts +16 -0
- package/types/components/inputs/ActionButton/index.d.ts +1 -0
- package/types/components/inputs/Button/Button.d.ts +82 -0
- package/types/components/inputs/Button/Button.styled.d.ts +60 -0
- package/types/components/inputs/Button/index.d.ts +1 -0
- package/types/components/inputs/Checkbox/Checkbox.d.ts +83 -0
- package/types/components/inputs/Checkbox/Checkbox.styled.d.ts +29 -0
- package/types/components/inputs/Checkbox/index.d.ts +1 -0
- package/types/components/inputs/CompactAutocompleteSelect/CompactAutocompleteSelect.d.ts +242 -0
- package/types/components/inputs/CompactAutocompleteSelect/CompactAutocompleteSelect.styled.d.ts +104 -0
- package/types/components/inputs/CompactAutocompleteSelect/index.d.ts +1 -0
- package/types/components/inputs/CompactStarRating/CompactStarRating.d.ts +96 -0
- package/types/components/inputs/CompactStarRating/CompactStarRating.styled.d.ts +34 -0
- package/types/components/inputs/CompactStarRating/index.d.ts +1 -0
- package/types/components/inputs/CompactTextInput/CompactTextInput.d.ts +116 -0
- package/types/components/inputs/CompactTextInput/CompactTextInput.styled.d.ts +42 -0
- package/types/components/inputs/CompactTextInput/index.d.ts +1 -0
- package/types/components/inputs/MultiLevelCheckbox/MultiLevelCheckbox.d.ts +41 -0
- package/types/components/inputs/MultiLevelCheckbox/MultiLevelCheckbox.styled.d.ts +13 -0
- package/types/components/inputs/MultiLevelCheckbox/index.d.ts +2 -0
- package/types/components/inputs/MultiLevelCheckbox/types.d.ts +29 -0
- package/types/components/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.d.ts +44 -0
- package/types/components/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.styled.d.ts +11 -0
- package/types/components/inputs/MultiLevelCheckboxSelect/index.d.ts +1 -0
- package/types/components/inputs/MultiSelect/MultiSelect.d.ts +115 -0
- package/types/components/inputs/MultiSelect/MultiSelect.styled.d.ts +34 -0
- package/types/components/inputs/MultiSelect/index.d.ts +1 -0
- package/types/components/inputs/Radio/Radio.d.ts +65 -0
- package/types/components/inputs/Radio/Radio.styled.d.ts +11 -0
- package/types/components/inputs/Radio/index.d.ts +1 -0
- package/types/components/inputs/Switch/Switch.d.ts +62 -0
- package/types/components/inputs/Switch/Switch.styled.d.ts +16 -0
- package/types/components/inputs/Switch/index.d.ts +1 -0
- package/types/components/inputs/TextArea/TextArea.d.ts +120 -0
- package/types/components/inputs/TextArea/TextArea.styled.d.ts +93 -0
- package/types/components/inputs/TextArea/index.d.ts +1 -0
- package/types/components/inputs/TextInput/TextInput.d.ts +109 -0
- package/types/components/inputs/TextInput/TextInput.styled.d.ts +43 -0
- package/types/components/inputs/TextInput/index.d.ts +1 -0
- package/types/components/inputs/index.d.ts +13 -0
- package/types/components/layout/InputGroup/InputGroup.d.ts +31 -0
- package/types/components/layout/InputGroup/InputGroup.styled.d.ts +1 -0
- package/types/components/layout/InputGroup/index.d.ts +1 -0
- package/types/components/layout/SectionSeparator/SectionSeparator.d.ts +28 -0
- package/types/components/layout/SectionSeparator/SectionSeparator.styled.d.ts +7 -0
- package/types/components/layout/SectionSeparator/index.d.ts +1 -0
- package/types/components/layout/index.d.ts +2 -0
- package/types/components/widgets/AssetAction/AssetAction.d.ts +16 -0
- package/types/components/widgets/AssetAction/AssetAction.styled.d.ts +15 -0
- package/types/components/widgets/AssetAction/index.d.ts +1 -0
- package/types/components/widgets/AssetActionsBase/AssetActionsBase.d.ts +25 -0
- package/types/components/widgets/AssetActionsBase/AssetActionsBase.styled.d.ts +1 -0
- package/types/components/widgets/AssetActionsBase/index.d.ts +1 -0
- package/types/components/widgets/AssetGallery/AssetGallery.d.ts +170 -0
- package/types/components/widgets/AssetGallery/AssetGalleryBase/AssetGalleryBase.d.ts +76 -0
- package/types/components/widgets/AssetGallery/AssetGalleryBase/AssetGalleryBase.styled.d.ts +3 -0
- package/types/components/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.d.ts +3 -0
- package/types/components/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.styled.d.ts +52 -0
- package/types/components/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.d.ts +2 -0
- package/types/components/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.styled.d.ts +49 -0
- package/types/components/widgets/AssetGallery/asset.types.d.ts +329 -0
- package/types/components/widgets/AssetGallery/index.d.ts +1 -0
- package/types/components/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.d.ts +60 -0
- package/types/components/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.styled.d.ts +21 -0
- package/types/components/widgets/AssetPreview/AssetPreviewTopBar/index.d.ts +1 -0
- package/types/components/widgets/ContextMenu/ContextMenu.d.ts +118 -0
- package/types/components/widgets/ContextMenu/ContextMenu.styled.d.ts +1 -0
- package/types/components/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.d.ts +45 -0
- package/types/components/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.styled.d.ts +18 -0
- package/types/components/widgets/ContextMenu/ContextMenuItem/index.d.ts +1 -0
- package/types/components/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.d.ts +23 -0
- package/types/components/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.styled.d.ts +1 -0
- package/types/components/widgets/ContextMenu/ContextMenuItemsGroup/index.d.ts +1 -0
- package/types/components/widgets/ContextMenu/index.d.ts +1 -0
- package/types/components/widgets/InfoCard/InfoCard.d.ts +33 -0
- package/types/components/widgets/InfoCard/InfoCard.styled.d.ts +28 -0
- package/types/components/widgets/InfoCard/index.d.ts +1 -0
- package/types/components/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.d.ts +46 -0
- package/types/components/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.styled.d.ts +30 -0
- package/types/components/widgets/InstructionSeverityDisplay/index.d.ts +1 -0
- package/types/components/widgets/Instructions/Instructions.d.ts +156 -0
- package/types/components/widgets/Instructions/Instructions.styled.d.ts +14 -0
- package/types/components/widgets/Instructions/index.d.ts +1 -0
- package/types/components/widgets/ProgressBar/ProgressBar.d.ts +30 -0
- package/types/components/widgets/ProgressBar/ProgressBar.styled.d.ts +41 -0
- package/types/components/widgets/ProgressBar/index.d.ts +1 -0
- package/types/components/widgets/SummaryCard/SummaryCard.d.ts +83 -0
- package/types/components/widgets/SummaryCard/SummaryCard.styled.d.ts +29 -0
- package/types/components/widgets/SummaryCard/index.d.ts +1 -0
- package/types/components/widgets/index.d.ts +11 -0
- package/types/hooks/useElementSize.d.ts +14 -0
- package/types/hooks/useEventListner.d.ts +14 -0
- package/types/hooks/useFloatingPopover.d.ts +161 -0
- package/types/hooks/useIsomorphicLayoutEffect.d.ts +3 -0
- package/types/hooks/useOnClickOutside.d.ts +13 -0
- package/types/hooks/useTooltipAutoShow.d.ts +31 -0
- package/types/icons/index.d.ts +41 -0
- package/types/ssr/index.d.ts +1 -0
- package/types/styles/utils/colors-export.d.ts +54 -0
- package/types/utils/dateTime.d.ts +8 -0
- package/types/utils/defaultTheme.d.ts +95 -0
- package/types/utils/getElementRef.d.ts +2 -0
- package/types/utils/parseTrigger.d.ts +22 -0
- package/build/_virtual/_rollupPluginBabelHelpers.js +0 -12
- package/build/_virtual/_rollupPluginBabelHelpers.js.map +0 -1
- package/build/widgets/AssetGallery/asset.propType.js +0 -56
- package/build/widgets/AssetGallery/asset.propType.js.map +0 -1
|
@@ -6,284 +6,66 @@ const shouldForwardProp = prop => {
|
|
|
6
6
|
};
|
|
7
7
|
const Button = styled.button.withConfig({
|
|
8
8
|
shouldForwardProp
|
|
9
|
-
}).attrs(applyDefaultTheme)
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
font-size: 0.875rem;
|
|
14
|
-
font-weight: 400;
|
|
15
|
-
padding: 12px 16px;
|
|
16
|
-
cursor: pointer;
|
|
17
|
-
background: ${props => props.theme.getColor('emerald-500')};
|
|
18
|
-
border: ${props => props.$border}px solid ${props => props.theme.getColor('emerald-500')};
|
|
19
|
-
transition:
|
|
20
|
-
all 250ms,
|
|
21
|
-
opacity 200ms;
|
|
22
|
-
|
|
23
|
-
&:hover,
|
|
24
|
-
&.dropdown-is-active {
|
|
25
|
-
background: #296c58;
|
|
26
|
-
border-color: #296c58;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('white'))}
|
|
30
|
-
|
|
31
|
-
&& {
|
|
32
|
-
${props => props.$secondary && css`
|
|
33
|
-
background: ${props => props.theme.getColor('gray-200')};
|
|
34
|
-
border-color: ${props => props.theme.getColor('gray-200')};
|
|
35
|
-
|
|
36
|
-
${props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('gray-700'))}
|
|
37
|
-
|
|
38
|
-
&:hover,
|
|
39
|
-
&.dropdown-is-active {
|
|
40
|
-
background: ${props => props.theme.getColor('gray-300')};
|
|
41
|
-
border-color: ${props => props.theme.getColor('gray-300')};
|
|
42
|
-
}
|
|
43
|
-
`};
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
&& {
|
|
47
|
-
${props => props.$outlined && css`
|
|
48
|
-
background: transparent;
|
|
49
|
-
transition: none;
|
|
50
|
-
|
|
51
|
-
${props.theme.themeProp('border-color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-500'))}
|
|
52
|
-
|
|
53
|
-
${props.theme.themeProp('color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-500'))}
|
|
54
|
-
|
|
55
|
-
&:hover,
|
|
56
|
-
&.dropdown-is-active {
|
|
57
|
-
background-color: #296c58;
|
|
58
|
-
|
|
59
|
-
${props.theme.themeProp('border-color', props.theme.getColor('emerald-600'), props.theme.getColor('emerald-600'))}
|
|
60
|
-
|
|
61
|
-
${props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-200'))}
|
|
62
|
-
}
|
|
63
|
-
`};
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
&& {
|
|
67
|
-
${props => props.$outlined && props.$secondary && css`
|
|
68
|
-
${props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-700'))}
|
|
69
|
-
|
|
70
|
-
${props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'))}
|
|
71
|
-
|
|
72
|
-
&:hover,
|
|
73
|
-
&.dropdown-is-active {
|
|
74
|
-
background: ${props.theme.getColor('gray-300')};
|
|
75
|
-
|
|
76
|
-
${props.theme.themeProp('border-color', props.theme.getColor('gray-300'), props.theme.getColor('gray-300'))}
|
|
77
|
-
|
|
78
|
-
${props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('gray-700'))}
|
|
79
|
-
}
|
|
80
|
-
`};
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
&& {
|
|
84
|
-
${props => props.$outlined && props.$secondary && props.$dropdownItems && css`
|
|
85
|
-
&:hover,
|
|
86
|
-
&.dropdown-is-active {
|
|
87
|
-
${props.theme.themeProp('border-color', props.theme.getColor('gray-300'), props.theme.getColor('gray-300'))}
|
|
88
|
-
}
|
|
89
|
-
`};
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
${props => props.$block && css`
|
|
93
|
-
width: 100%;
|
|
94
|
-
`};
|
|
95
|
-
|
|
96
|
-
${props => props.disabled && css`
|
|
97
|
-
opacity: 0.5;
|
|
98
|
-
cursor: not-allowed;
|
|
99
|
-
pointer-events: none;
|
|
100
|
-
`};
|
|
101
|
-
|
|
102
|
-
${props => props.size === 'x-small' && css`
|
|
103
|
-
padding: 1px 16px;
|
|
104
|
-
height: 24px;
|
|
105
|
-
`};
|
|
106
|
-
|
|
107
|
-
${props => props.size === 'small' && css`
|
|
108
|
-
padding: 6px 16px;
|
|
109
|
-
`};
|
|
110
|
-
|
|
111
|
-
${props => props.size === 'large' && css`
|
|
112
|
-
padding: 16px 16px;
|
|
113
|
-
`};
|
|
114
|
-
|
|
115
|
-
${props => props.$singleaction && css`
|
|
116
|
-
display: flex;
|
|
117
|
-
align-items: center;
|
|
118
|
-
gap: ${props.$singleactiongap}px;
|
|
119
|
-
border-radius: 3px !important;
|
|
120
|
-
transition:
|
|
121
|
-
all 250ms,
|
|
122
|
-
opacity 200ms;
|
|
123
|
-
`};
|
|
124
|
-
|
|
125
|
-
${props => props.$width && css`
|
|
126
|
-
min-width: ${props.$width}px;
|
|
127
|
-
justify-content: center;
|
|
128
|
-
`};
|
|
129
|
-
`;
|
|
9
|
+
}).attrs(applyDefaultTheme).withConfig({
|
|
10
|
+
displayName: "Buttonstyled__Button",
|
|
11
|
+
componentId: "sc-1w003g-0"
|
|
12
|
+
})(["position:relative;border-radius:3px;font-family:inherit;font-size:0.875rem;font-weight:400;padding:12px 16px;cursor:pointer;background:", ";border:", "px solid ", ";transition:all 250ms,opacity 200ms;&:hover,&.dropdown-is-active{background:#296c58;border-color:#296c58;}", " &&{", ";}&&{", ";}&&{", ";}&&{", ";}", ";", ";", ";", ";", ";", ";", ";"], props => props.theme.getColor('emerald-500'), props => props.$border, props => props.theme.getColor('emerald-500'), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('white')), props => props.$secondary && css(["background:", ";border-color:", ";", " &:hover,&.dropdown-is-active{background:", ";border-color:", ";}"], props => props.theme.getColor('gray-200'), props => props.theme.getColor('gray-200'), props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('gray-700')), props => props.theme.getColor('gray-300'), props => props.theme.getColor('gray-300')), props => props.$outlined && css(["background:transparent;transition:none;", " ", " &:hover,&.dropdown-is-active{background-color:#296c58;", " ", "}"], props.theme.themeProp('border-color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-500')), props.theme.themeProp('color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-500')), props.theme.themeProp('border-color', props.theme.getColor('emerald-600'), props.theme.getColor('emerald-600')), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-200'))), props => props.$outlined && props.$secondary && css(["", " ", " &:hover,&.dropdown-is-active{background:", ";", " ", "}"], props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-700')), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')), props.theme.getColor('gray-300'), props.theme.themeProp('border-color', props.theme.getColor('gray-300'), props.theme.getColor('gray-300')), props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('gray-700'))), props => props.$outlined && props.$secondary && props.$dropdownItems && css(["&:hover,&.dropdown-is-active{", "}"], props.theme.themeProp('border-color', props.theme.getColor('gray-300'), props.theme.getColor('gray-300'))), props => props.$block && css(["width:100%;"]), props => props.disabled && css(["opacity:0.5;cursor:not-allowed;pointer-events:none;"]), props => props.size === 'x-small' && css(["padding:1px 16px;height:24px;"]), props => props.size === 'small' && css(["padding:6px 16px;"]), props => props.size === 'large' && css(["padding:16px 16px;"]), props => props.$singleaction && css(["display:flex;align-items:center;gap:", "px;border-radius:3px !important;transition:all 250ms,opacity 200ms;"], props.$singleactiongap), props => props.$width && css(["min-width:", "px;justify-content:center;"], props.$width));
|
|
130
13
|
const ButtonContent = styled.div.withConfig({
|
|
131
14
|
shouldForwardProp
|
|
132
|
-
}).attrs(applyDefaultTheme)
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
transform: scale(1);
|
|
137
|
-
opacity: 1;
|
|
138
|
-
transition: all 200ms;
|
|
139
|
-
|
|
140
|
-
> svg {
|
|
141
|
-
width: 100%;
|
|
142
|
-
max-width: 16px;
|
|
143
|
-
max-height: 16px;
|
|
144
|
-
margin-right: 8px;
|
|
145
|
-
|
|
146
|
-
${props => props.size === 'small' && css`
|
|
147
|
-
max-width: 13px;
|
|
148
|
-
max-height: 13px;
|
|
149
|
-
`};
|
|
150
|
-
|
|
151
|
-
${props => props.size === 'x-small' && css`
|
|
152
|
-
max-width: 11px;
|
|
153
|
-
max-height: 11px;
|
|
154
|
-
`};
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
${props => props.$loading && css`
|
|
158
|
-
transform: scale(0.95);
|
|
159
|
-
opacity: 0;
|
|
160
|
-
`}
|
|
161
|
-
|
|
162
|
-
${props => props.$singleaction && css`
|
|
163
|
-
svg {
|
|
164
|
-
width: 100% !important;
|
|
165
|
-
height: 100% !important;
|
|
166
|
-
margin-right: 24px;
|
|
167
|
-
}
|
|
168
|
-
`};
|
|
169
|
-
`;
|
|
15
|
+
}).attrs(applyDefaultTheme).withConfig({
|
|
16
|
+
displayName: "Buttonstyled__ButtonContent",
|
|
17
|
+
componentId: "sc-1w003g-1"
|
|
18
|
+
})(["display:flex;justify-content:center;align-items:center;transform:scale(1);opacity:1;transition:all 200ms;> svg{width:100%;max-width:16px;max-height:16px;margin-right:8px;", ";", ";}", " ", ";"], props => props.size === 'small' && css(["max-width:13px;max-height:13px;"]), props => props.size === 'x-small' && css(["max-width:11px;max-height:11px;"]), props => props.$loading && css(["transform:scale(0.95);opacity:0;"]), props => props.$singleaction && css(["svg{width:100% !important;height:100% !important;margin-right:24px;}"]));
|
|
170
19
|
const LoadingIndicator = styled.div.withConfig({
|
|
171
20
|
shouldForwardProp
|
|
172
|
-
}).attrs(applyDefaultTheme)
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
top: 0;
|
|
177
|
-
left: 0;
|
|
178
|
-
padding: 4px;
|
|
179
|
-
background: inherit;
|
|
180
|
-
opacity: 0;
|
|
181
|
-
transition: opacity 200ms;
|
|
182
|
-
box-sizing: border-box;
|
|
183
|
-
|
|
184
|
-
${props => props.$loading && css`
|
|
185
|
-
opacity: 1;
|
|
186
|
-
`}
|
|
187
|
-
`;
|
|
21
|
+
}).attrs(applyDefaultTheme).withConfig({
|
|
22
|
+
displayName: "Buttonstyled__LoadingIndicator",
|
|
23
|
+
componentId: "sc-1w003g-2"
|
|
24
|
+
})(["position:absolute;height:100%;width:100%;top:0;left:0;padding:4px;background:inherit;opacity:0;transition:opacity 200ms;box-sizing:border-box;", ""], props => props.$loading && css(["opacity:1;"]));
|
|
188
25
|
const LoadingIndicatorSvg = styled.svg.withConfig({
|
|
189
26
|
shouldForwardProp
|
|
190
|
-
}).attrs(applyDefaultTheme)
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
`;
|
|
27
|
+
}).attrs(applyDefaultTheme).withConfig({
|
|
28
|
+
displayName: "Buttonstyled__LoadingIndicatorSvg",
|
|
29
|
+
componentId: "sc-1w003g-3"
|
|
30
|
+
})(["height:100%;color:inherit;transform:rotate(-88deg);"]);
|
|
195
31
|
const LoadingIndicatorSvgCircle = styled.circle.withConfig({
|
|
196
32
|
shouldForwardProp
|
|
197
|
-
}).attrs(applyDefaultTheme)
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
33
|
+
}).attrs(applyDefaultTheme).withConfig({
|
|
34
|
+
displayName: "Buttonstyled__LoadingIndicatorSvgCircle",
|
|
35
|
+
componentId: "sc-1w003g-4"
|
|
36
|
+
})(["transition:stroke-dashoffset 300ms linear;stroke-dasharray:113;"]);
|
|
201
37
|
const ButtonWrapper = styled.span.withConfig({
|
|
202
38
|
shouldForwardProp
|
|
203
|
-
}).attrs(applyDefaultTheme)
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
width: 100%;
|
|
208
|
-
`}
|
|
209
|
-
`;
|
|
39
|
+
}).attrs(applyDefaultTheme).withConfig({
|
|
40
|
+
displayName: "Buttonstyled__ButtonWrapper",
|
|
41
|
+
componentId: "sc-1w003g-5"
|
|
42
|
+
})(["white-space:nowrap;display:flex;", ""], props => props.$block && css(["width:100%;"]));
|
|
210
43
|
const MainButtonWrapper = styled.div.withConfig({
|
|
211
44
|
shouldForwardProp
|
|
212
|
-
}).attrs(applyDefaultTheme)
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
${props => {
|
|
220
|
-
return (props.$activeDropdown || props.$dropdownItems) && !props.$outlined && css`
|
|
221
|
-
background: ${props.$secondary ? props.theme.getColor('gray-200') : props.theme.getColor('emerald-500')};
|
|
222
|
-
`;
|
|
223
|
-
}};
|
|
224
|
-
`;
|
|
45
|
+
}).attrs(applyDefaultTheme).withConfig({
|
|
46
|
+
displayName: "Buttonstyled__MainButtonWrapper",
|
|
47
|
+
componentId: "sc-1w003g-6"
|
|
48
|
+
})(["border-radius:3px;", " ", ";"], props => props.$block && css(["width:100%;display:flex;"]), props => {
|
|
49
|
+
return (props.$activeDropdown || props.$dropdownItems) && !props.$outlined && css(["background:", ";"], props.$secondary ? props.theme.getColor('gray-200') : props.theme.getColor('emerald-500'));
|
|
50
|
+
});
|
|
225
51
|
const MainButtonContainer = styled.div.withConfig({
|
|
226
52
|
shouldForwardProp
|
|
227
|
-
}).attrs(applyDefaultTheme)
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
flex: 1;
|
|
232
|
-
width: 100%;
|
|
233
|
-
`}
|
|
234
|
-
|
|
235
|
-
button {
|
|
236
|
-
${props => (props.$activeDropdown || props.$dropdownItems) && css`
|
|
237
|
-
border-bottom-right-radius: 0;
|
|
238
|
-
border-top-right-radius: 0;
|
|
239
|
-
`};
|
|
240
|
-
|
|
241
|
-
${props => (props.$activeDropdown || props.$dropdownItems) && props.outlined && css`
|
|
242
|
-
border-right: none;
|
|
243
|
-
`};
|
|
244
|
-
}
|
|
245
|
-
`;
|
|
53
|
+
}).attrs(applyDefaultTheme).withConfig({
|
|
54
|
+
displayName: "Buttonstyled__MainButtonContainer",
|
|
55
|
+
componentId: "sc-1w003g-7"
|
|
56
|
+
})(["display:inline-block;", " button{", ";", ";}"], props => props.$block && css(["flex:1;width:100%;"]), props => (props.$activeDropdown || props.$dropdownItems) && css(["border-bottom-right-radius:0;border-top-right-radius:0;"]), props => (props.$activeDropdown || props.$dropdownItems) && props.outlined && css(["border-right:none;"]));
|
|
246
57
|
const MainButtonContainerSingle = styled.div.withConfig({
|
|
247
58
|
shouldForwardProp
|
|
248
|
-
}).attrs(applyDefaultTheme)
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
display: flex;
|
|
253
|
-
align-items: center;
|
|
254
|
-
border-radius: 3px !important;
|
|
255
|
-
transition:
|
|
256
|
-
all 250ms,
|
|
257
|
-
opacity 200ms;
|
|
258
|
-
`};
|
|
259
|
-
|
|
260
|
-
button {
|
|
261
|
-
${props => (props.$activeDropdown || props.$dropdownItems) && css`
|
|
262
|
-
border-bottom-right-radius: 0;
|
|
263
|
-
border-top-right-radius: 0;
|
|
264
|
-
`};
|
|
265
|
-
}
|
|
266
|
-
`;
|
|
59
|
+
}).attrs(applyDefaultTheme).withConfig({
|
|
60
|
+
displayName: "Buttonstyled__MainButtonContainerSingle",
|
|
61
|
+
componentId: "sc-1w003g-8"
|
|
62
|
+
})(["display:inline-block;width:100%;", ";button{", ";}"], props => props.$singleaction && css(["display:flex;align-items:center;border-radius:3px !important;transition:all 250ms,opacity 200ms;"]), props => (props.$activeDropdown || props.$dropdownItems) && css(["border-bottom-right-radius:0;border-top-right-radius:0;"]));
|
|
267
63
|
const DropdownButtonContainer = styled.div.withConfig({
|
|
268
64
|
shouldForwardProp
|
|
269
|
-
}).attrs(applyDefaultTheme)
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
border-bottom-left-radius: 0;
|
|
274
|
-
border-top-left-radius: 0;
|
|
275
|
-
|
|
276
|
-
${props => !props.$singleaction && 'border-left: none'};
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
svg {
|
|
280
|
-
color: inherit;
|
|
281
|
-
height: 7px;
|
|
282
|
-
width: 12px;
|
|
283
|
-
|
|
284
|
-
${props => !props.$singleaction && 'margin-bottom: 1px'};
|
|
285
|
-
}
|
|
286
|
-
`;
|
|
65
|
+
}).attrs(applyDefaultTheme).withConfig({
|
|
66
|
+
displayName: "Buttonstyled__DropdownButtonContainer",
|
|
67
|
+
componentId: "sc-1w003g-9"
|
|
68
|
+
})(["display:inline-block;button{border-bottom-left-radius:0;border-top-left-radius:0;", ";}svg{color:inherit;height:7px;width:12px;", ";}"], props => !props.$singleaction && 'border-left: none', props => !props.$singleaction && 'margin-bottom: 1px');
|
|
287
69
|
|
|
288
70
|
export { Button, ButtonContent, ButtonWrapper, DropdownButtonContainer, LoadingIndicator, LoadingIndicatorSvg, LoadingIndicatorSvgCircle, MainButtonContainer, MainButtonContainerSingle, MainButtonWrapper };
|
|
289
71
|
//# sourceMappingURL=Button.styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.styled.js","sources":["../../../src/components/inputs/Button/Button.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst shouldForwardProp = prop => {\n return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const Button = styled.button\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n position: relative;\n border-radius: 3px;\n font-family: inherit;\n font-size: 0.875rem;\n font-weight: 400;\n padding: 12px 16px;\n cursor: pointer;\n background: ${props => props.theme.getColor('emerald-500')};\n border: ${props => props.$border}px solid ${props => props.theme.getColor('emerald-500')};\n transition:\n all 250ms,\n opacity 200ms;\n\n &:hover,\n &.dropdown-is-active {\n background: #296c58;\n border-color: #296c58;\n }\n\n ${props =>\n props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('white'))}\n\n && {\n ${props =>\n props.$secondary &&\n css`\n background: ${props => props.theme.getColor('gray-200')};\n border-color: ${props => props.theme.getColor('gray-200')};\n\n ${props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-700'),\n props.theme.getColor('gray-700')\n )}\n\n &:hover,\n &.dropdown-is-active {\n background: ${props => props.theme.getColor('gray-300')};\n border-color: ${props => props.theme.getColor('gray-300')};\n }\n `};\n }\n\n && {\n ${props =>\n props.$outlined &&\n css`\n background: transparent;\n transition: none;\n\n ${props.theme.themeProp(\n 'border-color',\n props.theme.getColor('emerald-400'),\n props.theme.getColor('emerald-500')\n )}\n\n ${props.theme.themeProp(\n 'color',\n props.theme.getColor('emerald-400'),\n props.theme.getColor('emerald-500')\n )}\n\n &:hover,\n &.dropdown-is-active {\n background-color: #296c58;\n\n ${props.theme.themeProp(\n 'border-color',\n props.theme.getColor('emerald-600'),\n props.theme.getColor('emerald-600')\n )}\n\n ${props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-200'),\n props.theme.getColor('gray-200')\n )}\n }\n `};\n }\n\n && {\n ${props =>\n props.$outlined &&\n props.$secondary &&\n css`\n ${props.theme.themeProp(\n 'border-color',\n props.theme.getColor('gray-400'),\n props.theme.getColor('gray-700')\n )}\n\n ${props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-200'),\n props.theme.getColor('gray-700')\n )}\n\n &:hover,\n &.dropdown-is-active {\n background: ${props.theme.getColor('gray-300')};\n\n ${props.theme.themeProp(\n 'border-color',\n props.theme.getColor('gray-300'),\n props.theme.getColor('gray-300')\n )}\n\n ${props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-700'),\n props.theme.getColor('gray-700')\n )}\n }\n `};\n }\n\n && {\n ${props =>\n props.$outlined &&\n props.$secondary &&\n props.$dropdownItems &&\n css`\n &:hover,\n &.dropdown-is-active {\n ${props.theme.themeProp(\n 'border-color',\n props.theme.getColor('gray-300'),\n props.theme.getColor('gray-300')\n )}\n }\n `};\n }\n\n ${props =>\n props.$block &&\n css`\n width: 100%;\n `};\n\n ${props =>\n props.disabled &&\n css`\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n `};\n\n ${props =>\n props.size === 'x-small' &&\n css`\n padding: 1px 16px;\n height: 24px;\n `};\n\n ${props =>\n props.size === 'small' &&\n css`\n padding: 6px 16px;\n `};\n\n ${props =>\n props.size === 'large' &&\n css`\n padding: 16px 16px;\n `};\n\n ${props =>\n props.$singleaction &&\n css`\n display: flex;\n align-items: center;\n gap: ${props.$singleactiongap}px;\n border-radius: 3px !important;\n transition:\n all 250ms,\n opacity 200ms;\n `};\n\n ${props =>\n props.$width &&\n css`\n min-width: ${props.$width}px;\n justify-content: center;\n `};\n`;\n\nexport const ButtonContent = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: flex;\n justify-content: center;\n align-items: center;\n transform: scale(1);\n opacity: 1;\n transition: all 200ms;\n\n > svg {\n width: 100%;\n max-width: 16px;\n max-height: 16px;\n margin-right: 8px;\n\n ${props =>\n props.size === 'small' &&\n css`\n max-width: 13px;\n max-height: 13px;\n `};\n\n ${props =>\n props.size === 'x-small' &&\n css`\n max-width: 11px;\n max-height: 11px;\n `};\n }\n\n ${props =>\n props.$loading &&\n css`\n transform: scale(0.95);\n opacity: 0;\n `}\n\n ${props =>\n props.$singleaction &&\n css`\n svg {\n width: 100% !important;\n height: 100% !important;\n margin-right: 24px;\n }\n `};\n`;\n\nexport const LoadingIndicator = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n left: 0;\n padding: 4px;\n background: inherit;\n opacity: 0;\n transition: opacity 200ms;\n box-sizing: border-box;\n\n ${props =>\n props.$loading &&\n css`\n opacity: 1;\n `}\n`;\n\nexport const LoadingIndicatorSvg = styled.svg\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n height: 100%;\n color: inherit;\n transform: rotate(-88deg);\n`;\n\nexport const LoadingIndicatorSvgCircle = styled.circle\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n transition: stroke-dashoffset 300ms linear;\n stroke-dasharray: 113;\n`;\n\nexport const ButtonWrapper = styled.span\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n white-space: nowrap;\n display: flex;\n ${props =>\n props.$block &&\n css`\n width: 100%;\n `}\n`;\n\nexport const MainButtonWrapper = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n border-radius: 3px;\n ${props =>\n props.$block &&\n css`\n width: 100%;\n display: flex;\n `}\n\n ${props => {\n return (\n (props.$activeDropdown || props.$dropdownItems) &&\n !props.$outlined &&\n css`\n background: ${props.$secondary\n ? props.theme.getColor('gray-200')\n : props.theme.getColor('emerald-500')};\n `\n );\n }};\n`;\n\nexport const MainButtonContainer = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: inline-block;\n\n ${props =>\n props.$block &&\n css`\n flex: 1;\n width: 100%;\n `}\n\n button {\n ${props =>\n (props.$activeDropdown || props.$dropdownItems) &&\n css`\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n `};\n\n ${props =>\n (props.$activeDropdown || props.$dropdownItems) &&\n props.outlined &&\n css`\n border-right: none;\n `};\n }\n`;\n\nexport const MainButtonContainerSingle = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: inline-block;\n width: 100%;\n ${props =>\n props.$singleaction &&\n css`\n display: flex;\n align-items: center;\n border-radius: 3px !important;\n transition:\n all 250ms,\n opacity 200ms;\n `};\n\n button {\n ${props =>\n (props.$activeDropdown || props.$dropdownItems) &&\n css`\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n `};\n }\n`;\n\nexport const DropdownButtonContainer = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: inline-block;\n\n button {\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n\n ${props => !props.$singleaction && 'border-left: none'};\n }\n\n svg {\n color: inherit;\n height: 7px;\n width: 12px;\n\n ${props => !props.$singleaction && 'margin-bottom: 1px'};\n }\n`;\n"],"names":["shouldForwardProp","prop","startsWith","Button","styled","button","withConfig","attrs","applyDefaultTheme","props","theme","getColor","$border","themeProp","$secondary","css","$outlined","$dropdownItems","$block","disabled","size","$singleaction","$singleactiongap","$width","ButtonContent","div","$loading","LoadingIndicator","LoadingIndicatorSvg","svg","LoadingIndicatorSvgCircle","circle","ButtonWrapper","span","MainButtonWrapper","$activeDropdown","MainButtonContainer","outlined","MainButtonContainerSingle","DropdownButtonContainer"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Button.styled.js","sources":["../../../src/components/inputs/Button/Button.styled.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nimport type { ReactNode } from 'react';\n\nconst shouldForwardProp = (prop: string): boolean => {\n return prop !== 'theme' && !prop.startsWith('$');\n};\n\ntype ButtonSize = 'x-small' | 'small' | 'normal' | 'large';\ntype DropdownItems = ReactNode;\n\nexport interface ButtonStyleProps {\n $border?: number;\n $secondary?: boolean;\n $outlined?: boolean;\n $dropdownItems?: DropdownItems;\n $block?: boolean;\n size?: ButtonSize;\n $singleaction?: boolean;\n $singleactiongap?: number;\n $width?: number;\n}\n\nexport const Button = styled.button\n .withConfig({\n shouldForwardProp\n })\n .attrs<ButtonStyleProps>(applyDefaultTheme)`\n position: relative;\n border-radius: 3px;\n font-family: inherit;\n font-size: 0.875rem;\n font-weight: 400;\n padding: 12px 16px;\n cursor: pointer;\n background: ${props => props.theme.getColor('emerald-500')};\n border: ${props => props.$border}px solid ${props => props.theme.getColor('emerald-500')};\n transition:\n all 250ms,\n opacity 200ms;\n\n &:hover,\n &.dropdown-is-active {\n background: #296c58;\n border-color: #296c58;\n }\n\n ${props =>\n props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('white'))}\n\n && {\n ${props =>\n props.$secondary &&\n css`\n background: ${props => props.theme.getColor('gray-200')};\n border-color: ${props => props.theme.getColor('gray-200')};\n\n ${props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-700'),\n props.theme.getColor('gray-700')\n )}\n\n &:hover,\n &.dropdown-is-active {\n background: ${props => props.theme.getColor('gray-300')};\n border-color: ${props => props.theme.getColor('gray-300')};\n }\n `};\n }\n\n && {\n ${props =>\n props.$outlined &&\n css`\n background: transparent;\n transition: none;\n\n ${props.theme.themeProp(\n 'border-color',\n props.theme.getColor('emerald-400'),\n props.theme.getColor('emerald-500')\n )}\n\n ${props.theme.themeProp(\n 'color',\n props.theme.getColor('emerald-400'),\n props.theme.getColor('emerald-500')\n )}\n\n &:hover,\n &.dropdown-is-active {\n background-color: #296c58;\n\n ${props.theme.themeProp(\n 'border-color',\n props.theme.getColor('emerald-600'),\n props.theme.getColor('emerald-600')\n )}\n\n ${props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-200'),\n props.theme.getColor('gray-200')\n )}\n }\n `};\n }\n\n && {\n ${props =>\n props.$outlined &&\n props.$secondary &&\n css`\n ${props.theme.themeProp(\n 'border-color',\n props.theme.getColor('gray-400'),\n props.theme.getColor('gray-700')\n )}\n\n ${props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-200'),\n props.theme.getColor('gray-700')\n )}\n\n &:hover,\n &.dropdown-is-active {\n background: ${props.theme.getColor('gray-300')};\n\n ${props.theme.themeProp(\n 'border-color',\n props.theme.getColor('gray-300'),\n props.theme.getColor('gray-300')\n )}\n\n ${props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-700'),\n props.theme.getColor('gray-700')\n )}\n }\n `};\n }\n\n && {\n ${props =>\n props.$outlined &&\n props.$secondary &&\n props.$dropdownItems &&\n css`\n &:hover,\n &.dropdown-is-active {\n ${props.theme.themeProp(\n 'border-color',\n props.theme.getColor('gray-300'),\n props.theme.getColor('gray-300')\n )}\n }\n `};\n }\n\n ${props =>\n props.$block &&\n css`\n width: 100%;\n `};\n\n ${props =>\n props.disabled &&\n css`\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n `};\n\n ${props =>\n props.size === 'x-small' &&\n css`\n padding: 1px 16px;\n height: 24px;\n `};\n\n ${props =>\n props.size === 'small' &&\n css`\n padding: 6px 16px;\n `};\n\n ${props =>\n props.size === 'large' &&\n css`\n padding: 16px 16px;\n `};\n\n ${props =>\n props.$singleaction &&\n css`\n display: flex;\n align-items: center;\n gap: ${props.$singleactiongap}px;\n border-radius: 3px !important;\n transition:\n all 250ms,\n opacity 200ms;\n `};\n\n ${props =>\n props.$width &&\n css`\n min-width: ${props.$width}px;\n justify-content: center;\n `};\n`;\n\nexport const ButtonContent = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs<{\n /** `size` — see `ButtonSize`. Leaks onto this `<div>` too; see there. */\n size?: ButtonSize;\n /** `loadingState` — the component's own state, so `boolean`. */\n $loading?: boolean;\n /** `singleAction` — passed only at the single-action site. */\n $singleaction?: boolean;\n }>(applyDefaultTheme)`\n display: flex;\n justify-content: center;\n align-items: center;\n transform: scale(1);\n opacity: 1;\n transition: all 200ms;\n\n > svg {\n width: 100%;\n max-width: 16px;\n max-height: 16px;\n margin-right: 8px;\n\n ${props =>\n props.size === 'small' &&\n css`\n max-width: 13px;\n max-height: 13px;\n `};\n\n ${props =>\n props.size === 'x-small' &&\n css`\n max-width: 11px;\n max-height: 11px;\n `};\n }\n\n ${props =>\n props.$loading &&\n css`\n transform: scale(0.95);\n opacity: 0;\n `}\n\n ${props =>\n props.$singleaction &&\n css`\n svg {\n width: 100% !important;\n height: 100% !important;\n margin-right: 24px;\n }\n `};\n`;\n\nexport const LoadingIndicator = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs<{ $loading?: boolean }>(applyDefaultTheme)`\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n left: 0;\n padding: 4px;\n background: inherit;\n opacity: 0;\n transition: opacity 200ms;\n box-sizing: border-box;\n\n ${props =>\n props.$loading &&\n css`\n opacity: 1;\n `}\n`;\n\nexport const LoadingIndicatorSvg = styled.svg\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n height: 100%;\n color: inherit;\n transform: rotate(-88deg);\n`;\n\nexport const LoadingIndicatorSvgCircle = styled.circle\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n transition: stroke-dashoffset 300ms linear;\n stroke-dasharray: 113;\n`;\n\n/*\n * `$block` IS READ HERE AND PASSED NOWHERE — declared so the read typechecks, and\n * recorded as a defect. `Button.tsx` renders `<S.ButtonWrapper>` with NO props at all\n * (it is the outermost element, and the `block` handling is done by `MainButtonWrapper`\n * / `MainButtonContainer` / `S.Button` instead), so `props.$block` is always `undefined`\n * and this `width: 100%` has never applied. Passing it, or deleting the block, changes\n * rendered CSS → C9/C10 with the baseline re-record, not a type-only commit.\n */\nexport const ButtonWrapper = styled.span\n .withConfig({\n shouldForwardProp\n })\n .attrs<{ $block?: boolean }>(applyDefaultTheme)`\n white-space: nowrap;\n display: flex;\n ${props =>\n props.$block &&\n css`\n width: 100%;\n `}\n`;\n\n/** The dropdown-state props the three container `<div>`s share. */\ninterface DropdownContainerStyleProps {\n /** `activeDropdown` — `PropTypes.bool`, default `false`. */\n $activeDropdown?: boolean;\n /** `dropdownItems` — see `DropdownItems`. */\n $dropdownItems?: DropdownItems;\n}\n\nexport const MainButtonWrapper = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs<\n DropdownContainerStyleProps & {\n /** `block` — full-width. */\n $block?: boolean;\n /** `outlined` — suppresses the wrapper background. */\n $outlined?: boolean;\n /** `secondary` — picks the grey background over the emerald one. */\n $secondary?: boolean;\n }\n >(applyDefaultTheme)`\n border-radius: 3px;\n ${props =>\n props.$block &&\n css`\n width: 100%;\n display: flex;\n `}\n\n ${props => {\n return (\n (props.$activeDropdown || props.$dropdownItems) &&\n !props.$outlined &&\n css`\n background: ${props.$secondary\n ? props.theme.getColor('gray-200')\n : props.theme.getColor('emerald-500')};\n `\n );\n }};\n`;\n\n/*\n * Two dead reads, declared but not fixed:\n *\n * 1. `props.outlined` lacks the `$` that `Button.tsx` passes, so `border-right: none` has\n * never applied. Repointing it activates a branch that never fired, changing rendered CSS.\n * 2. `$activeDropdown` is read but never passed; both reads are\n * `(props.$activeDropdown || props.$dropdownItems)`, so behaviour is \"dropdownItems only\".\n */\nexport const MainButtonContainer = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs<\n DropdownContainerStyleProps & {\n /** `block` — full-width. */\n $block?: boolean;\n /** DEAD READ, see above. Nothing passes it; `$outlined` is what arrives. */\n outlined?: boolean;\n }\n >(applyDefaultTheme)`\n display: inline-block;\n\n ${props =>\n props.$block &&\n css`\n flex: 1;\n width: 100%;\n `}\n\n button {\n ${props =>\n (props.$activeDropdown || props.$dropdownItems) &&\n css`\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n `};\n\n ${props =>\n (props.$activeDropdown || props.$dropdownItems) &&\n props.outlined &&\n css`\n border-right: none;\n `};\n }\n`;\n\n/*\n * TWO MORE READ-BUT-NEVER-PASSED PROPS, declared and recorded, not fixed.\n * `Button.tsx` renders `<S.MainButtonContainerSingle $dropdownItems $secondary\n * $outlined className>`, so:\n * - `$singleaction` is always `undefined` — and this is the SINGLE-ACTION branch of\n * the component, so the `display: flex` block below has never applied even though\n * it is the only reason this component exists separately from\n * `MainButtonContainer`. (`$secondary` / `$outlined` are passed but never read\n * here, which is the harmless mirror image of the same mistake.)\n * - `$activeDropdown` is always `undefined`; the `||` falls through to\n * `$dropdownItems`, as in `MainButtonContainer`.\n * Passing either changes rendered CSS → C9/C10 with the re-record.\n */\nexport const MainButtonContainerSingle = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs<\n DropdownContainerStyleProps & {\n /** DEAD READ, see above: the single-action layout never applies. */\n $singleaction?: boolean;\n }\n >(applyDefaultTheme)`\n display: inline-block;\n width: 100%;\n ${props =>\n props.$singleaction &&\n css`\n display: flex;\n align-items: center;\n border-radius: 3px !important;\n transition:\n all 250ms,\n opacity 200ms;\n `};\n\n button {\n ${props =>\n (props.$activeDropdown || props.$dropdownItems) &&\n css`\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n `};\n }\n`;\n\n/*\n * The one component whose `$singleaction` reads are BOTH live: `Button.tsx` renders this\n * with `$singleaction={singleAction}` in the single-action branch and without it in the\n * other, and `!props.$singleaction` is written for exactly that absence — which is also\n * why the prop stays optional.\n */\nexport const DropdownButtonContainer = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs<{ $singleaction?: boolean }>(applyDefaultTheme)`\n display: inline-block;\n\n button {\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n\n ${props => !props.$singleaction && 'border-left: none'};\n }\n\n svg {\n color: inherit;\n height: 7px;\n width: 12px;\n\n ${props => !props.$singleaction && 'margin-bottom: 1px'};\n }\n`;\n"],"names":["shouldForwardProp","prop","startsWith","Button","styled","button","withConfig","attrs","applyDefaultTheme","displayName","componentId","props","theme","getColor","$border","themeProp","$secondary","css","$outlined","$dropdownItems","$block","disabled","size","$singleaction","$singleactiongap","$width","ButtonContent","div","$loading","LoadingIndicator","LoadingIndicatorSvg","svg","LoadingIndicatorSvgCircle","circle","ButtonWrapper","span","MainButtonWrapper","$activeDropdown","MainButtonContainer","outlined","MainButtonContainerSingle","DropdownButtonContainer"],"mappings":"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"}
|
|
@@ -1,30 +1,30 @@
|
|
|
1
1
|
import React__default, { useState, useMemo } from 'react';
|
|
2
2
|
import { nanoid } from 'nanoid';
|
|
3
|
-
import
|
|
4
|
-
import { isBoolean, isEmpty } from 'lodash';
|
|
3
|
+
import { isEmpty } from 'lodash';
|
|
5
4
|
import { Checkbox as Checkbox$1, CheckboxLabel, IndeterminateCheckIcon, CheckIcon, CheckboxVisualLabel, Description } from './Checkbox.styled.js';
|
|
5
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
6
6
|
|
|
7
7
|
const Checkbox = React__default.forwardRef(function Checkbox({
|
|
8
8
|
checked,
|
|
9
9
|
defaultChecked,
|
|
10
|
-
disabled,
|
|
11
|
-
readOnly,
|
|
10
|
+
disabled = false,
|
|
11
|
+
readOnly = false,
|
|
12
12
|
name,
|
|
13
13
|
value,
|
|
14
14
|
description,
|
|
15
15
|
error,
|
|
16
|
-
indeterminate,
|
|
16
|
+
indeterminate = false,
|
|
17
17
|
muted,
|
|
18
18
|
label,
|
|
19
19
|
onChange,
|
|
20
20
|
onBlur,
|
|
21
21
|
className,
|
|
22
22
|
style,
|
|
23
|
-
variant
|
|
23
|
+
variant = 'green'
|
|
24
24
|
}, forwardedRef) {
|
|
25
25
|
const [uniqueId] = useState(nanoid());
|
|
26
26
|
const hasError = useMemo(() => {
|
|
27
|
-
if (
|
|
27
|
+
if (typeof error === 'boolean') {
|
|
28
28
|
return error;
|
|
29
29
|
}
|
|
30
30
|
return !isEmpty(error);
|
|
@@ -38,65 +38,49 @@ const Checkbox = React__default.forwardRef(function Checkbox({
|
|
|
38
38
|
}
|
|
39
39
|
return null;
|
|
40
40
|
}, [description, error]);
|
|
41
|
-
return
|
|
41
|
+
return jsxs(Checkbox$1, {
|
|
42
42
|
className: className,
|
|
43
43
|
disabled: disabled,
|
|
44
44
|
readOnly: readOnly,
|
|
45
45
|
style: style,
|
|
46
|
-
$variant: variant
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
46
|
+
$variant: variant,
|
|
47
|
+
children: [jsxs(CheckboxLabel, {
|
|
48
|
+
disabled: disabled,
|
|
49
|
+
muted: muted,
|
|
50
|
+
readOnly: readOnly,
|
|
51
|
+
htmlFor: uniqueId,
|
|
52
|
+
$variant: variant,
|
|
53
|
+
children: [jsx("input", {
|
|
54
|
+
ref: forwardedRef,
|
|
55
|
+
id: uniqueId,
|
|
56
|
+
checked: checked,
|
|
57
|
+
defaultChecked: defaultChecked,
|
|
58
|
+
disabled: disabled,
|
|
59
|
+
readOnly: readOnly,
|
|
60
|
+
value: value,
|
|
61
|
+
name: name,
|
|
62
|
+
type: "checkbox",
|
|
63
|
+
onChange: onChange,
|
|
64
|
+
onBlur: onBlur,
|
|
65
|
+
"data-indeterminate": indeterminate
|
|
66
|
+
}), jsx(IndeterminateCheckIcon, {}), jsx(CheckIcon, {
|
|
67
|
+
children: jsx("svg", {
|
|
68
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
69
|
+
viewBox: "0 0 10.9 8.45",
|
|
70
|
+
children: jsx("path", {
|
|
71
|
+
d: "m3.68,8.45L0,4.75l1.21-1.21,2.47,2.45L9.7,0l1.21,1.23-7.22,7.22Z",
|
|
72
|
+
fill: "currentColor"
|
|
73
|
+
})
|
|
74
|
+
})
|
|
75
|
+
}), (typeof label === 'string' && label.length > 0 || typeof label === 'object') && jsx(CheckboxVisualLabel, {
|
|
76
|
+
children: label
|
|
77
|
+
})]
|
|
78
|
+
}), typeof descriptionText === 'string' && descriptionText.length > 0 && jsx(Description, {
|
|
79
|
+
$error: hasError,
|
|
80
|
+
children: descriptionText
|
|
81
|
+
})]
|
|
82
|
+
});
|
|
75
83
|
});
|
|
76
|
-
Checkbox.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
77
|
-
checked: PropTypes.bool,
|
|
78
|
-
defaultChecked: PropTypes.bool,
|
|
79
|
-
label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
|
|
80
|
-
disabled: PropTypes.bool,
|
|
81
|
-
readOnly: PropTypes.bool,
|
|
82
|
-
name: PropTypes.string,
|
|
83
|
-
value: PropTypes.string,
|
|
84
|
-
description: PropTypes.string,
|
|
85
|
-
error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
|
|
86
|
-
indeterminate: PropTypes.bool,
|
|
87
|
-
muted: PropTypes.bool,
|
|
88
|
-
onChange: PropTypes.func,
|
|
89
|
-
onBlur: PropTypes.func,
|
|
90
|
-
className: PropTypes.string,
|
|
91
|
-
style: PropTypes.object,
|
|
92
|
-
variant: PropTypes.oneOf(['green', 'black'])
|
|
93
|
-
} : {};
|
|
94
|
-
Checkbox.defaultProps = {
|
|
95
|
-
disabled: false,
|
|
96
|
-
readOnly: false,
|
|
97
|
-
indeterminate: false,
|
|
98
|
-
variant: 'green'
|
|
99
|
-
};
|
|
100
84
|
|
|
101
85
|
export { Checkbox as default };
|
|
102
86
|
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../../../src/components/inputs/Checkbox/Checkbox.
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../../src/components/inputs/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\n\nimport { nanoid } from 'nanoid';\n\nimport { isEmpty } from 'lodash';\nimport * as S from './Checkbox.styled';\n\ntype Props = {\n /**\n * Whether the checkbox is checked\n */\n checked?: boolean;\n /**\n * Whether the checkbox should be checked or unchecked by default\n */\n defaultChecked?: boolean;\n /**\n * The checkbox' label\n */\n label?: string | React.ReactElement<any>;\n /**\n * Whether the checkbox is disabled\n */\n disabled?: boolean;\n /**\n * Whether the checkbox is read-only\n */\n readOnly?: boolean;\n /**\n * The checkbox' name\n */\n name?: string;\n /**\n * The checkbox' value\n */\n value?: string | number;\n /**\n * Description of the checkbox\n */\n description?: string;\n /**\n * Whether there's an error. Error message can be passed as a `string` to be displayed below the checkbox.\n */\n error?: boolean | string;\n /**\n * Whether the checkbox is indeterminate. This will display a dash in the checkbox instead of the default checkmark.\n */\n indeterminate?: boolean;\n /**\n * Mutes the color of the visual checkbox – Does not mute the label or other parts of the Checkbox\n */\n muted?: boolean;\n /**\n * On-change effect\n */\n onChange?: (...args: any[]) => any;\n /**\n * On-blur effect\n */\n onBlur?: (...args: any[]) => any;\n /**\n * Optional class name for the HTML element\n */\n className?: string;\n /**\n * Optional in-line styling for the HTML element\n */\n style?: any;\n /**\n * Visual variant. `green` (default) uses emerald fill. `black` uses themed black/white square (24px, rounded), inverted check.\n */\n variant?: 'green' | 'black';\n};\n\n/**\n * Checkboxes allow the user to select one or more items from a set.\n *\n * If you have a single option, avoid using a checkbox and use an on/off switch (`Switch` component) instead.\n *\n *\n * ### Import\n *\n * ``` js\n * import { Checkbox } from '@ntbjs/react-components/inputs'\n * // or\n * import Checkbox from '@ntbjs/react-components/inputs/Checkbox'\n * ```\n */\nconst Checkbox = React.forwardRef<any, Props>(function Checkbox(\n {\n checked,\n defaultChecked,\n disabled = false,\n readOnly = false,\n name,\n value,\n description,\n error,\n indeterminate = false,\n muted,\n label,\n onChange,\n onBlur,\n className,\n style,\n variant = 'green'\n },\n forwardedRef\n) {\n const [uniqueId] = useState(nanoid());\n\n // `typeof` rather than lodash `isBoolean` — lodash ships no types here.\n const hasError = useMemo(() => {\n if (typeof error === 'boolean') {\n return error;\n }\n\n return !isEmpty(error);\n }, [error]);\n\n const descriptionText = useMemo(() => {\n if (!isEmpty(error)) {\n return error;\n }\n\n if (!isEmpty(description)) {\n return description;\n }\n\n return null;\n }, [description, error]);\n\n return (\n <S.Checkbox\n className={className}\n disabled={disabled}\n readOnly={readOnly}\n style={style}\n $variant={variant}\n >\n <S.CheckboxLabel\n disabled={disabled}\n muted={muted}\n readOnly={readOnly}\n htmlFor={uniqueId}\n $variant={variant}\n >\n <input\n ref={forwardedRef}\n id={uniqueId}\n checked={checked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n readOnly={readOnly}\n value={value}\n name={name}\n type=\"checkbox\"\n onChange={onChange}\n onBlur={onBlur}\n data-indeterminate={indeterminate}\n />\n\n <S.IndeterminateCheckIcon />\n <S.CheckIcon>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 10.9 8.45\">\n <path\n d=\"m3.68,8.45L0,4.75l1.21-1.21,2.47,2.45L9.7,0l1.21,1.23-7.22,7.22Z\"\n fill=\"currentColor\"\n />\n </svg>\n </S.CheckIcon>\n {((typeof label === 'string' && label.length > 0) || typeof label === 'object') && (\n <S.CheckboxVisualLabel>{label}</S.CheckboxVisualLabel>\n )}\n </S.CheckboxLabel>\n {typeof descriptionText === 'string' && descriptionText.length > 0 && (\n <S.Description $error={hasError}>{descriptionText}</S.Description>\n )}\n </S.Checkbox>\n );\n});\n\nexport default Checkbox;\n"],"names":["Checkbox","React","forwardRef","checked","defaultChecked","disabled","readOnly","name","value","description","error","indeterminate","muted","label","onChange","onBlur","className","style","variant","forwardedRef","uniqueId","useState","nanoid","hasError","useMemo","isEmpty","descriptionText","_jsxs","S","$variant","children","htmlFor","_jsx","ref","id","type","xmlns","viewBox","d","fill","length","$error"],"mappings":"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"}
|