@basic-ui/material 1.0.0-alpha.52 → 1.0.0-alpha.54
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 +3 -3
- package/build/cjs/index.js +515 -441
- package/build/cjs/index.js.map +1 -1
- package/build/esm/Alert/Alert.d.ts +5 -6
- package/build/esm/Alert/Alert.js +14 -16
- package/build/esm/Alert/Alert.js.map +1 -1
- package/build/esm/Alert/index.d.ts +1 -1
- package/build/esm/Alert/index.js.map +1 -1
- package/build/esm/AppBar/AppBar.d.ts +9 -9
- package/build/esm/AppBar/AppBar.js +25 -34
- package/build/esm/AppBar/AppBar.js.map +1 -1
- package/build/esm/AppBar/AppBarButton.d.ts +3 -4
- package/build/esm/AppBar/AppBarButton.js +12 -14
- package/build/esm/AppBar/AppBarButton.js.map +1 -1
- package/build/esm/AppBar/context.d.ts +4 -5
- package/build/esm/AppBar/context.js +8 -6
- package/build/esm/AppBar/context.js.map +1 -1
- package/build/esm/AppBar/index.d.ts +3 -3
- package/build/esm/AppBar/index.js.map +1 -1
- package/build/esm/Badge/Badge.d.ts +5 -6
- package/build/esm/Badge/Badge.js +25 -26
- package/build/esm/Badge/Badge.js.map +1 -1
- package/build/esm/Badge/index.d.ts +1 -1
- package/build/esm/Badge/index.js.map +1 -1
- package/build/esm/BaseLine/BaseLine.d.ts +1 -1
- package/build/esm/BaseLine/BaseLine.js +4 -6
- package/build/esm/BaseLine/BaseLine.js.map +1 -1
- package/build/esm/BaseLine/index.d.ts +1 -1
- package/build/esm/BaseLine/index.js.map +1 -1
- package/build/esm/BottomSheet/BottomSheet.d.ts +6 -7
- package/build/esm/BottomSheet/BottomSheet.js +17 -21
- package/build/esm/BottomSheet/BottomSheet.js.map +1 -1
- package/build/esm/BottomSheet/BottomSheetSurface.d.ts +4 -5
- package/build/esm/BottomSheet/BottomSheetSurface.js +14 -14
- package/build/esm/BottomSheet/BottomSheetSurface.js.map +1 -1
- package/build/esm/BottomSheet/index.d.ts +1 -1
- package/build/esm/BottomSheet/index.js.map +1 -1
- package/build/esm/Box/Box.d.ts +23 -23
- package/build/esm/Box/Box.js +26 -26
- package/build/esm/Box/Box.js.map +1 -1
- package/build/esm/Box/index.d.ts +1 -1
- package/build/esm/Box/index.js.map +1 -1
- package/build/esm/Button/BaseButton.d.ts +14 -7
- package/build/esm/Button/BaseButton.js +107 -36
- package/build/esm/Button/BaseButton.js.map +1 -1
- package/build/esm/Button/Button.d.ts +14 -13
- package/build/esm/Button/Button.js +66 -48
- package/build/esm/Button/Button.js.map +1 -1
- package/build/esm/Button/ButtonGroup.d.ts +4 -5
- package/build/esm/Button/ButtonGroup.js +119 -21
- package/build/esm/Button/ButtonGroup.js.map +1 -1
- package/build/esm/Button/FilledButton.d.ts +10 -11
- package/build/esm/Button/FilledButton.js +18 -60
- package/build/esm/Button/FilledButton.js.map +1 -1
- package/build/esm/Button/FloatingActionButton.d.ts +9 -7
- package/build/esm/Button/FloatingActionButton.js +5 -4
- package/build/esm/Button/FloatingActionButton.js.map +1 -1
- package/build/esm/Button/IconButton.d.ts +8 -8
- package/build/esm/Button/IconButton.js +3 -3
- package/build/esm/Button/IconButton.js.map +1 -1
- package/build/esm/Button/IconFilledButton.d.ts +2 -0
- package/build/esm/Button/IconFilledButton.js +3 -0
- package/build/esm/Button/IconFilledButton.js.map +1 -0
- package/build/esm/Button/IconOutlinedButton.d.ts +2 -0
- package/build/esm/Button/IconOutlinedButton.js +3 -0
- package/build/esm/Button/IconOutlinedButton.js.map +1 -0
- package/build/esm/Button/OutlinedButton.d.ts +3 -4
- package/build/esm/Button/OutlinedButton.js +3 -43
- package/build/esm/Button/OutlinedButton.js.map +1 -1
- package/build/esm/Button/SplitButton.d.ts +9 -0
- package/build/esm/Button/SplitButton.js +32 -0
- package/build/esm/Button/SplitButton.js.map +1 -0
- package/build/esm/Button/TransparentButton.d.ts +10 -11
- package/build/esm/Button/TransparentButton.js +11 -54
- package/build/esm/Button/TransparentButton.js.map +1 -1
- package/build/esm/Button/context.d.ts +9 -8
- package/build/esm/Button/context.js +5 -4
- package/build/esm/Button/context.js.map +1 -1
- package/build/esm/Button/index.d.ts +3 -2
- package/build/esm/Button/index.js +1 -0
- package/build/esm/Button/index.js.map +1 -1
- package/build/esm/CheckBox/CheckBox.d.ts +13 -13
- package/build/esm/CheckBox/CheckBox.js +45 -61
- package/build/esm/CheckBox/CheckBox.js.map +1 -1
- package/build/esm/CheckBox/CheckBoxIcon.d.ts +10 -10
- package/build/esm/CheckBox/CheckBoxIcon.js +19 -24
- package/build/esm/CheckBox/CheckBoxIcon.js.map +1 -1
- package/build/esm/CheckBox/CheckPath.d.ts +3 -3
- package/build/esm/CheckBox/CheckPath.js +15 -16
- package/build/esm/CheckBox/CheckPath.js.map +1 -1
- package/build/esm/CheckBox/IndeterminatePath.d.ts +3 -3
- package/build/esm/CheckBox/IndeterminatePath.js +14 -16
- package/build/esm/CheckBox/IndeterminatePath.js.map +1 -1
- package/build/esm/CheckBox/index.d.ts +1 -1
- package/build/esm/CheckBox/index.js.map +1 -1
- package/build/esm/Chip/ButtonChip.d.ts +9 -9
- package/build/esm/Chip/ButtonChip.js +20 -24
- package/build/esm/Chip/ButtonChip.js.map +1 -1
- package/build/esm/Chip/Chip.d.ts +4 -4
- package/build/esm/Chip/Chip.js.map +1 -1
- package/build/esm/Chip/ChipBase.d.ts +10 -10
- package/build/esm/Chip/ChipBase.js +50 -54
- package/build/esm/Chip/ChipBase.js.map +1 -1
- package/build/esm/Chip/ChoiceChip.d.ts +10 -10
- package/build/esm/Chip/ChoiceChip.js +34 -38
- package/build/esm/Chip/ChoiceChip.js.map +1 -1
- package/build/esm/Chip/index.d.ts +2 -2
- package/build/esm/Chip/index.js.map +1 -1
- package/build/esm/Combobox/Combobox.d.ts +23 -23
- package/build/esm/Combobox/Combobox.js +126 -107
- package/build/esm/Combobox/Combobox.js.map +1 -1
- package/build/esm/Combobox/index.d.ts +1 -1
- package/build/esm/Combobox/index.js.map +1 -1
- package/build/esm/Dialog/Dialog.d.ts +19 -20
- package/build/esm/Dialog/Dialog.js +38 -42
- package/build/esm/Dialog/Dialog.js.map +1 -1
- package/build/esm/Dialog/DialogBackdrop.d.ts +6 -7
- package/build/esm/Dialog/DialogBackdrop.js +18 -17
- package/build/esm/Dialog/DialogBackdrop.js.map +1 -1
- package/build/esm/Dialog/DialogContainer.d.ts +3 -4
- package/build/esm/Dialog/DialogContainer.js +12 -12
- package/build/esm/Dialog/DialogContainer.js.map +1 -1
- package/build/esm/Dialog/DialogSurface.d.ts +6 -7
- package/build/esm/Dialog/DialogSurface.js +26 -26
- package/build/esm/Dialog/DialogSurface.js.map +1 -1
- package/build/esm/Dialog/Scrim.d.ts +3 -4
- package/build/esm/Dialog/Scrim.js +12 -12
- package/build/esm/Dialog/Scrim.js.map +1 -1
- package/build/esm/Dialog/index.d.ts +2 -2
- package/build/esm/Dialog/index.js.map +1 -1
- package/build/esm/Dialog/useDialogAnimation.d.ts +57 -824
- package/build/esm/Dialog/useDialogAnimation.js +23 -24
- package/build/esm/Dialog/useDialogAnimation.js.map +1 -1
- package/build/esm/Divider/Divider.d.ts +7 -7
- package/build/esm/Divider/Divider.js +27 -28
- package/build/esm/Divider/Divider.js.map +1 -1
- package/build/esm/Divider/index.d.ts +1 -1
- package/build/esm/Divider/index.js.map +1 -1
- package/build/esm/FloatingLabel/FloatingLabel.d.ts +13 -13
- package/build/esm/FloatingLabel/FloatingLabel.js +27 -33
- package/build/esm/FloatingLabel/FloatingLabel.js.map +1 -1
- package/build/esm/FloatingLabel/index.d.ts +1 -1
- package/build/esm/FloatingLabel/index.js.map +1 -1
- package/build/esm/LineRipple/LineRipple.d.ts +9 -9
- package/build/esm/LineRipple/LineRipple.js +30 -38
- package/build/esm/LineRipple/LineRipple.js.map +1 -1
- package/build/esm/LineRipple/index.d.ts +1 -1
- package/build/esm/LineRipple/index.js.map +1 -1
- package/build/esm/Link/Link.d.ts +9 -9
- package/build/esm/Link/Link.js +15 -17
- package/build/esm/Link/Link.js.map +1 -1
- package/build/esm/Link/index.d.ts +1 -1
- package/build/esm/Link/index.js.map +1 -1
- package/build/esm/List/List.d.ts +8 -8
- package/build/esm/List/List.js +19 -26
- package/build/esm/List/List.js.map +1 -1
- package/build/esm/List/index.d.ts +1 -1
- package/build/esm/List/index.js.map +1 -1
- package/build/esm/ListItem/ListItem.d.ts +14 -14
- package/build/esm/ListItem/ListItem.js +28 -31
- package/build/esm/ListItem/ListItem.js.map +1 -1
- package/build/esm/ListItem/ListItemText.d.ts +7 -7
- package/build/esm/ListItem/ListItemText.js +12 -16
- package/build/esm/ListItem/ListItemText.js.map +1 -1
- package/build/esm/ListItem/index.d.ts +2 -2
- package/build/esm/ListItem/index.js.map +1 -1
- package/build/esm/Menu/Menu.d.ts +18 -18
- package/build/esm/Menu/Menu.js +70 -60
- package/build/esm/Menu/Menu.js.map +1 -1
- package/build/esm/Menu/animation.d.ts +2 -2
- package/build/esm/Menu/animation.js +3 -3
- package/build/esm/Menu/animation.js.map +1 -1
- package/build/esm/Menu/index.d.ts +2 -2
- package/build/esm/Menu/index.js.map +1 -1
- package/build/esm/NavRail/NavRailItem.d.ts +15 -15
- package/build/esm/NavRail/NavRailItem.js +82 -86
- package/build/esm/NavRail/NavRailItem.js.map +1 -1
- package/build/esm/NavRail/icons/test-icons.d.ts +4 -4
- package/build/esm/NavRail/icons/test-icons.js +33 -40
- package/build/esm/NavRail/icons/test-icons.js.map +1 -1
- package/build/esm/NavRail/index.d.ts +1 -1
- package/build/esm/NavRail/index.js.map +1 -1
- package/build/esm/NotchedOutline/NotchedOutline.d.ts +14 -14
- package/build/esm/NotchedOutline/NotchedOutline.js +26 -34
- package/build/esm/NotchedOutline/NotchedOutline.js.map +1 -1
- package/build/esm/NotchedOutline/context.d.ts +5 -6
- package/build/esm/NotchedOutline/context.js +8 -7
- package/build/esm/NotchedOutline/context.js.map +1 -1
- package/build/esm/NotchedOutline/index.d.ts +1 -1
- package/build/esm/NotchedOutline/index.js.map +1 -1
- package/build/esm/NotchedOutline/styledComponents.d.ts +15 -575
- package/build/esm/NotchedOutline/styledComponents.js +65 -64
- package/build/esm/NotchedOutline/styledComponents.js.map +1 -1
- package/build/esm/Paper/Paper.d.ts +11 -11
- package/build/esm/Paper/Paper.js +25 -25
- package/build/esm/Paper/Paper.js.map +1 -1
- package/build/esm/Paper/index.d.ts +1 -1
- package/build/esm/Paper/index.js.map +1 -1
- package/build/esm/Popover/Popover.d.ts +13 -14
- package/build/esm/Popover/Popover.js +33 -39
- package/build/esm/Popover/Popover.js.map +1 -1
- package/build/esm/Popover/PopoverContainer.d.ts +3 -4
- package/build/esm/Popover/PopoverContainer.js +12 -12
- package/build/esm/Popover/PopoverContainer.js.map +1 -1
- package/build/esm/Popover/PopoverSurface.d.ts +4 -5
- package/build/esm/Popover/PopoverSurface.js +15 -15
- package/build/esm/Popover/PopoverSurface.js.map +1 -1
- package/build/esm/Popover/index.d.ts +1 -1
- package/build/esm/Popover/index.js.map +1 -1
- package/build/esm/ProgressSpinner/ProgressSpinner.d.ts +7 -8
- package/build/esm/ProgressSpinner/ProgressSpinner.js +31 -33
- package/build/esm/ProgressSpinner/ProgressSpinner.js.map +1 -1
- package/build/esm/ProgressSpinner/index.d.ts +1 -1
- package/build/esm/ProgressSpinner/index.js.map +1 -1
- package/build/esm/RadioButton/RadioButton.d.ts +3 -4
- package/build/esm/RadioButton/RadioButton.js +29 -32
- package/build/esm/RadioButton/RadioButton.js.map +1 -1
- package/build/esm/RadioButton/RadioButtonIcon.d.ts +6 -6
- package/build/esm/RadioButton/RadioButtonIcon.js +10 -12
- package/build/esm/RadioButton/RadioButtonIcon.js.map +1 -1
- package/build/esm/RadioButton/RadioGroup.d.ts +4 -5
- package/build/esm/RadioButton/RadioGroup.js +9 -11
- package/build/esm/RadioButton/RadioGroup.js.map +1 -1
- package/build/esm/RadioButton/index.d.ts +2 -2
- package/build/esm/RadioButton/index.js.map +1 -1
- package/build/esm/Ripple/Ripple.d.ts +10 -11
- package/build/esm/Ripple/Ripple.js +12 -10
- package/build/esm/Ripple/Ripple.js.map +1 -1
- package/build/esm/Ripple/RippleBox.d.ts +5 -5
- package/build/esm/Ripple/RippleBox.js +32 -29
- package/build/esm/Ripple/RippleBox.js.map +1 -1
- package/build/esm/Ripple/constants.d.ts +7 -7
- package/build/esm/Ripple/constants.js +7 -7
- package/build/esm/Ripple/constants.js.map +1 -1
- package/build/esm/Ripple/index.d.ts +5 -5
- package/build/esm/Ripple/index.js.map +1 -1
- package/build/esm/Ripple/keyframes.d.ts +4 -4
- package/build/esm/Ripple/keyframes.js +7 -7
- package/build/esm/Ripple/keyframes.js.map +1 -1
- package/build/esm/Ripple/useRipple.d.ts +14 -14
- package/build/esm/Ripple/useRipple.js +79 -84
- package/build/esm/Ripple/useRipple.js.map +1 -1
- package/build/esm/Ripple/useRippleHandlers.d.ts +8 -8
- package/build/esm/Ripple/useRippleHandlers.js +21 -30
- package/build/esm/Ripple/useRippleHandlers.js.map +1 -1
- package/build/esm/Ripple/useRippleSurface.d.ts +22 -787
- package/build/esm/Ripple/useRippleSurface.js +87 -88
- package/build/esm/Ripple/useRippleSurface.js.map +1 -1
- package/build/esm/SearchBar/SearchBar.d.ts +15 -15
- package/build/esm/SearchBar/SearchBar.js +44 -57
- package/build/esm/SearchBar/SearchBar.js.map +1 -1
- package/build/esm/SearchBar/index.d.ts +1 -1
- package/build/esm/SearchBar/index.js.map +1 -1
- package/build/esm/Select/CustomContainerExample.d.ts +2 -3
- package/build/esm/Select/CustomContainerExample.js +29 -34
- package/build/esm/Select/CustomContainerExample.js.map +1 -1
- package/build/esm/Select/Select.d.ts +33 -32
- package/build/esm/Select/Select.js +68 -113
- package/build/esm/Select/Select.js.map +1 -1
- package/build/esm/Select/SelectIcon.d.ts +6 -6
- package/build/esm/Select/SelectIcon.js +11 -13
- package/build/esm/Select/SelectIcon.js.map +1 -1
- package/build/esm/Select/context.d.ts +9 -9
- package/build/esm/Select/context.js +10 -8
- package/build/esm/Select/context.js.map +1 -1
- package/build/esm/Select/defaultRender.d.ts +3 -3
- package/build/esm/Select/defaultRender.js +33 -38
- package/build/esm/Select/defaultRender.js.map +1 -1
- package/build/esm/Select/index.d.ts +1 -1
- package/build/esm/Select/index.js.map +1 -1
- package/build/esm/Select/styledComponents.d.ts +15 -15
- package/build/esm/Select/styledComponents.js +20 -23
- package/build/esm/Select/styledComponents.js.map +1 -1
- package/build/esm/SelectItem/SelectItem.d.ts +11 -11
- package/build/esm/SelectItem/SelectItem.js +37 -47
- package/build/esm/SelectItem/SelectItem.js.map +1 -1
- package/build/esm/SelectItem/index.d.ts +1 -1
- package/build/esm/SelectItem/index.js.map +1 -1
- package/build/esm/SelectionControl/SelectionControlLabel.d.ts +7 -7
- package/build/esm/SelectionControl/SelectionControlLabel.js +13 -14
- package/build/esm/SelectionControl/SelectionControlLabel.js.map +1 -1
- package/build/esm/SelectionControl/SelectionControlText.d.ts +8 -8
- package/build/esm/SelectionControl/SelectionControlText.js +20 -20
- package/build/esm/SelectionControl/SelectionControlText.js.map +1 -1
- package/build/esm/SelectionControl/index.d.ts +2 -2
- package/build/esm/SelectionControl/index.js.map +1 -1
- package/build/esm/Skeleton/DelayAppearance.d.ts +13 -13
- package/build/esm/Skeleton/DelayAppearance.js +18 -20
- package/build/esm/Skeleton/DelayAppearance.js.map +1 -1
- package/build/esm/Skeleton/Skeleton.d.ts +9 -9
- package/build/esm/Skeleton/Skeleton.js +18 -19
- package/build/esm/Skeleton/Skeleton.js.map +1 -1
- package/build/esm/Skeleton/animation.d.ts +8 -8
- package/build/esm/Skeleton/animation.js +11 -11
- package/build/esm/Skeleton/animation.js.map +1 -1
- package/build/esm/Skeleton/index.d.ts +2 -2
- package/build/esm/Skeleton/index.js.map +1 -1
- package/build/esm/Slider/Slider.d.ts +17 -17
- package/build/esm/Slider/Slider.js +93 -85
- package/build/esm/Slider/Slider.js.map +1 -1
- package/build/esm/Slider/index.d.ts +1 -1
- package/build/esm/Slider/index.js.map +1 -1
- package/build/esm/Snackbar/Snackbar.d.ts +10 -8
- package/build/esm/Snackbar/Snackbar.js +33 -33
- package/build/esm/Snackbar/Snackbar.js.map +1 -1
- package/build/esm/Snackbar/Stack.d.ts +31 -31
- package/build/esm/Snackbar/Stack.js +74 -106
- package/build/esm/Snackbar/Stack.js.map +1 -1
- package/build/esm/Snackbar/index.d.ts +3 -3
- package/build/esm/Snackbar/index.js.map +1 -1
- package/build/esm/Snackbar/useSnackbarAnimation.d.ts +6 -6
- package/build/esm/Snackbar/useSnackbarAnimation.js +103 -132
- package/build/esm/Snackbar/useSnackbarAnimation.js.map +1 -1
- package/build/esm/Switch/Switch.d.ts +13 -13
- package/build/esm/Switch/Switch.js +59 -56
- package/build/esm/Switch/Switch.js.map +1 -1
- package/build/esm/Switch/index.d.ts +1 -1
- package/build/esm/Switch/index.js.map +1 -1
- package/build/esm/Switch/styledComponents.d.ts +13 -13
- package/build/esm/Switch/styledComponents.js +47 -47
- package/build/esm/Switch/styledComponents.js.map +1 -1
- package/build/esm/Tab/Tab.d.ts +5 -5
- package/build/esm/Tab/Tab.js +47 -55
- package/build/esm/Tab/Tab.js.map +1 -1
- package/build/esm/Tab/TabList.d.ts +9 -10
- package/build/esm/Tab/TabList.js +28 -32
- package/build/esm/Tab/TabList.js.map +1 -1
- package/build/esm/Tab/TabPanel.d.ts +4 -5
- package/build/esm/Tab/TabPanel.js +18 -19
- package/build/esm/Tab/TabPanel.js.map +1 -1
- package/build/esm/Tab/TabPanels.d.ts +4 -4
- package/build/esm/Tab/TabPanels.js.map +1 -1
- package/build/esm/Tab/Tabs.d.ts +4 -4
- package/build/esm/Tab/Tabs.js.map +1 -1
- package/build/esm/Tab/context.d.ts +8 -9
- package/build/esm/Tab/context.js +8 -7
- package/build/esm/Tab/context.js.map +1 -1
- package/build/esm/Tab/index.d.ts +5 -5
- package/build/esm/Tab/index.js.map +1 -1
- package/build/esm/TabIndicator/TabIndicator.d.ts +9 -9
- package/build/esm/TabIndicator/TabIndicator.js +69 -86
- package/build/esm/TabIndicator/TabIndicator.js.map +1 -1
- package/build/esm/TabIndicator/context.d.ts +6 -6
- package/build/esm/TabIndicator/context.js +8 -7
- package/build/esm/TabIndicator/context.js.map +1 -1
- package/build/esm/TabIndicator/index.d.ts +2 -2
- package/build/esm/TabIndicator/index.js.map +1 -1
- package/build/esm/Table/Table.d.ts +3 -4
- package/build/esm/Table/Table.js +13 -14
- package/build/esm/Table/Table.js.map +1 -1
- package/build/esm/Table/TableBody.d.ts +3 -4
- package/build/esm/Table/TableBody.js +9 -11
- package/build/esm/Table/TableBody.js.map +1 -1
- package/build/esm/Table/TableCell.d.ts +3 -4
- package/build/esm/Table/TableCell.js +14 -15
- package/build/esm/Table/TableCell.js.map +1 -1
- package/build/esm/Table/TableHead.d.ts +3 -4
- package/build/esm/Table/TableHead.js +13 -14
- package/build/esm/Table/TableHead.js.map +1 -1
- package/build/esm/Table/TableRow.d.ts +3 -4
- package/build/esm/Table/TableRow.js +13 -14
- package/build/esm/Table/TableRow.js.map +1 -1
- package/build/esm/Table/context.d.ts +2 -3
- package/build/esm/Table/context.js +7 -7
- package/build/esm/Table/context.js.map +1 -1
- package/build/esm/Table/index.d.ts +5 -5
- package/build/esm/Table/index.js.map +1 -1
- package/build/esm/Text/LoremIpsum.d.ts +4 -4
- package/build/esm/Text/LoremIpsum.js +10 -12
- package/build/esm/Text/LoremIpsum.js.map +1 -1
- package/build/esm/Text/Text.d.ts +10 -11
- package/build/esm/Text/Text.js +15 -19
- package/build/esm/Text/Text.js.map +1 -1
- package/build/esm/Text/index.d.ts +1 -1
- package/build/esm/Text/index.js.map +1 -1
- package/build/esm/TextField/FilledContainer.d.ts +18 -18
- package/build/esm/TextField/FilledContainer.js +75 -80
- package/build/esm/TextField/FilledContainer.js.map +1 -1
- package/build/esm/TextField/HelperText.d.ts +10 -10
- package/build/esm/TextField/HelperText.js +19 -26
- package/build/esm/TextField/HelperText.js.map +1 -1
- package/build/esm/TextField/IconContainer.d.ts +5 -5
- package/build/esm/TextField/IconContainer.js +21 -9
- package/build/esm/TextField/IconContainer.js.map +1 -1
- package/build/esm/TextField/Input.d.ts +11 -11
- package/build/esm/TextField/Input.js +39 -40
- package/build/esm/TextField/Input.js.map +1 -1
- package/build/esm/TextField/OutlinedContainer.d.ts +17 -17
- package/build/esm/TextField/OutlinedContainer.js +30 -47
- package/build/esm/TextField/OutlinedContainer.js.map +1 -1
- package/build/esm/TextField/TextField.d.ts +19 -19
- package/build/esm/TextField/TextField.js +50 -77
- package/build/esm/TextField/TextField.js.map +1 -1
- package/build/esm/TextField/consts.d.ts +5 -5
- package/build/esm/TextField/consts.js +5 -5
- package/build/esm/TextField/consts.js.map +1 -1
- package/build/esm/TextField/index.d.ts +4 -4
- package/build/esm/TextField/index.js.map +1 -1
- package/build/esm/ThemeExplorer/BorderSlider.d.ts +7 -7
- package/build/esm/ThemeExplorer/BorderSlider.js +8 -14
- package/build/esm/ThemeExplorer/BorderSlider.js.map +1 -1
- package/build/esm/ThemeExplorer/ColorPicker.d.ts +8 -8
- package/build/esm/ThemeExplorer/ColorPicker.js +19 -24
- package/build/esm/ThemeExplorer/ColorPicker.js.map +1 -1
- package/build/esm/ThemeExplorer/ColorSchemePicker.d.ts +10 -10
- package/build/esm/ThemeExplorer/ColorSchemePicker.js +16 -21
- package/build/esm/ThemeExplorer/ColorSchemePicker.js.map +1 -1
- package/build/esm/ThemeExplorer/FontAutoComplete.d.ts +9 -9
- package/build/esm/ThemeExplorer/FontAutoComplete.js +28 -48
- package/build/esm/ThemeExplorer/FontAutoComplete.js.map +1 -1
- package/build/esm/ThemeExplorer/TextFieldColorPicker.d.ts +8 -9
- package/build/esm/ThemeExplorer/TextFieldColorPicker.js +29 -60
- package/build/esm/ThemeExplorer/TextFieldColorPicker.js.map +1 -1
- package/build/esm/ThemeExplorer/ThemeBuilder.d.ts +11 -11
- package/build/esm/ThemeExplorer/ThemeBuilder.js +155 -184
- package/build/esm/ThemeExplorer/ThemeBuilder.js.map +1 -1
- package/build/esm/ThemeExplorer/ThemeColors.d.ts +4 -5
- package/build/esm/ThemeExplorer/ThemeColors.js +54 -54
- package/build/esm/ThemeExplorer/ThemeColors.js.map +1 -1
- package/build/esm/ThemeExplorer/components.d.ts +31 -31
- package/build/esm/ThemeExplorer/components.js +52 -61
- package/build/esm/ThemeExplorer/components.js.map +1 -1
- package/build/esm/ThemeExplorer/googleFonts.d.ts +1 -1
- package/build/esm/ThemeExplorer/googleFonts.js +1 -1
- package/build/esm/ThemeExplorer/googleFonts.js.map +1 -1
- package/build/esm/ThemeExplorer/index.d.ts +1 -1
- package/build/esm/ThemeExplorer/index.js.map +1 -1
- package/build/esm/ThemeExplorer/makeColorScheme.d.ts +98 -98
- package/build/esm/ThemeExplorer/makeColorScheme.js +0 -1
- package/build/esm/ThemeExplorer/makeColorScheme.js.map +1 -1
- package/build/esm/ThemeExplorer/makeTailwindTheme.d.ts +2 -2
- package/build/esm/ThemeExplorer/makeTailwindTheme.js +20 -20
- package/build/esm/ThemeExplorer/makeTailwindTheme.js.map +1 -1
- package/build/esm/ThemeExplorer/updateGoogleFonts.js +23 -64
- package/build/esm/ThemeExplorer/updateGoogleFonts.js.map +1 -1
- package/build/esm/ThemeExplorer/useDeferredColor.d.ts +3 -3
- package/build/esm/ThemeExplorer/useDeferredColor.js +2 -9
- package/build/esm/ThemeExplorer/useDeferredColor.js.map +1 -1
- package/build/esm/ThemeExplorer/useLocalStorageCachedState.d.ts +1 -1
- package/build/esm/ThemeExplorer/useLocalStorageCachedState.js +2 -10
- package/build/esm/ThemeExplorer/useLocalStorageCachedState.js.map +1 -1
- package/build/esm/Tooltip/Tooltip.d.ts +8 -8
- package/build/esm/Tooltip/Tooltip.js +21 -25
- package/build/esm/Tooltip/Tooltip.js.map +1 -1
- package/build/esm/Tooltip/index.d.ts +1 -1
- package/build/esm/Tooltip/index.js.map +1 -1
- package/build/esm/color.d.ts +8 -8
- package/build/esm/color.js +23 -31
- package/build/esm/color.js.map +1 -1
- package/build/esm/css.d.ts +1 -1
- package/build/esm/css.js.map +1 -1
- package/build/esm/hooks/useAnimation.d.ts +20 -20
- package/build/esm/hooks/useAnimation.js +42 -53
- package/build/esm/hooks/useAnimation.js.map +1 -1
- package/build/esm/index.d.ts +42 -42
- package/build/esm/index.js.map +1 -1
- package/build/esm/motion.d.ts +7 -7
- package/build/esm/motion.js +7 -7
- package/build/esm/motion.js.map +1 -1
- package/build/esm/tailwind/extendColors.d.ts +5 -5
- package/build/esm/tailwind/extendColors.js +17 -29
- package/build/esm/tailwind/extendColors.js.map +1 -1
- package/build/esm/tailwind/index.d.ts +8 -8
- package/build/esm/tailwind/index.js +17 -29
- package/build/esm/tailwind/index.js.map +1 -1
- package/build/esm/theme/index.d.ts +2 -2
- package/build/esm/theme/index.js.map +1 -1
- package/build/esm/theme/theme.d.ts +590 -562
- package/build/esm/theme/theme.js +49 -22
- package/build/esm/theme/theme.js.map +1 -1
- package/build/esm/theme/typography-raleway.d.ts +112 -112
- package/build/esm/theme/typography-raleway.js +1 -1
- package/build/esm/theme/typography-raleway.js.map +1 -1
- package/build/esm/theme/typography-roboto.d.ts +111 -111
- package/build/esm/theme/typography-roboto.js +1 -1
- package/build/esm/theme/typography-roboto.js.map +1 -1
- package/build/esm/theme/useTheme.d.ts +594 -566
- package/build/esm/theme/useTheme.js +1 -3
- package/build/esm/theme/useTheme.js.map +1 -1
- package/build/tsconfig-build.tsbuildinfo +1 -1
- package/package.json +12 -11
- package/src/Alert/index.ts +1 -1
- package/src/AppBar/AppBar.story.tsx +69 -69
- package/src/AppBar/AppBar.tsx +85 -85
- package/src/AppBar/AppBarButton.tsx +25 -25
- package/src/AppBar/context.ts +13 -13
- package/src/AppBar/index.ts +3 -3
- package/src/Badge/Badge.story.tsx +68 -68
- package/src/Badge/Badge.tsx +47 -47
- package/src/Badge/index.ts +1 -1
- package/src/BaseLine/BaseLine.tsx +100 -100
- package/src/BaseLine/index.ts +1 -1
- package/src/BottomSheet/BottomSheet.story.tsx +35 -35
- package/src/BottomSheet/BottomSheet.tsx +39 -39
- package/src/BottomSheet/BottomSheetSurface.tsx +49 -49
- package/src/BottomSheet/index.ts +1 -1
- package/src/Box/Box.tsx +133 -127
- package/src/Box/index.ts +1 -1
- package/src/Button/BaseButton.tsx +123 -18
- package/src/Button/Button.story.tsx +236 -72
- package/src/Button/Button.tsx +44 -15
- package/src/Button/ButtonGroup.story.tsx +263 -101
- package/src/Button/ButtonGroup.tsx +103 -7
- package/src/Button/FilledButton.tsx +2 -43
- package/src/Button/FloatingActionButton.tsx +14 -9
- package/src/Button/IconFilledButton.tsx +3 -0
- package/src/Button/IconOutlinedButton.tsx +3 -0
- package/src/Button/OutlinedButton.tsx +2 -41
- package/src/Button/SpinnerButton.story.tsx +91 -91
- package/src/Button/SplitButton.story.tsx +110 -0
- package/src/Button/SplitButton.tsx +40 -0
- package/src/Button/TransparentButton.tsx +1 -43
- package/src/Button/context.tsx +19 -17
- package/src/Button/index.ts +3 -2
- package/src/CheckBox/CheckBox.story.tsx +155 -155
- package/src/CheckBox/CheckBox.tsx +170 -170
- package/src/CheckBox/CheckBoxIcon.tsx +63 -64
- package/src/CheckBox/CheckPath.tsx +18 -18
- package/src/CheckBox/IndeterminatePath.tsx +16 -16
- package/src/CheckBox/index.ts +1 -1
- package/src/Chip/ButtonChip.tsx +86 -86
- package/src/Chip/Chip.story.tsx +242 -242
- package/src/Chip/Chip.tsx +5 -5
- package/src/Chip/ChipBase.tsx +141 -141
- package/src/Chip/ChoiceChip.tsx +127 -127
- package/src/Chip/index.ts +2 -2
- package/src/Combobox/Combobox.tsx +274 -274
- package/src/Combobox/index.ts +1 -1
- package/src/Dialog/Dialog.story.tsx +53 -53
- package/src/Dialog/Dialog.tsx +73 -73
- package/src/Dialog/DialogBackdrop.tsx +42 -42
- package/src/Dialog/DialogContainer.tsx +31 -31
- package/src/Dialog/DialogSurface.tsx +55 -55
- package/src/Dialog/Scrim.tsx +35 -35
- package/src/Dialog/index.ts +2 -2
- package/src/Dialog/useDialogAnimation.tsx +59 -49
- package/src/Divider/Divider.story.tsx +39 -39
- package/src/Divider/Divider.tsx +48 -48
- package/src/Divider/index.ts +1 -1
- package/src/FloatingLabel/FloatingLabel.story.tsx +55 -55
- package/src/FloatingLabel/FloatingLabel.tsx +77 -77
- package/src/FloatingLabel/index.ts +1 -1
- package/src/LineRipple/LineRipple.story.tsx +43 -43
- package/src/LineRipple/LineRipple.tsx +81 -81
- package/src/LineRipple/index.ts +1 -1
- package/src/Link/Link.story.tsx +14 -14
- package/src/Link/Link.tsx +65 -65
- package/src/Link/index.ts +1 -1
- package/src/List/List.tsx +46 -46
- package/src/List/index.ts +1 -1
- package/src/ListItem/ListItem.story.tsx +43 -43
- package/src/ListItem/ListItem.tsx +104 -104
- package/src/ListItem/ListItemText.tsx +35 -35
- package/src/ListItem/index.ts +2 -2
- package/src/Menu/ContextMenu.story.tsx +34 -34
- package/src/Menu/Menu.story.tsx +54 -54
- package/src/Menu/Menu.tsx +124 -124
- package/src/Menu/animation.ts +16 -16
- package/src/Menu/index.ts +2 -2
- package/src/NavRail/NavRail.story.tsx +146 -146
- package/src/NavRail/NavRailItem.tsx +176 -175
- package/src/NavRail/icons/test-icons.tsx +46 -46
- package/src/NavRail/index.ts +1 -1
- package/src/NotchedOutline/NotchedOutline.story.tsx +99 -99
- package/src/NotchedOutline/NotchedOutline.tsx +80 -80
- package/src/NotchedOutline/context.ts +12 -12
- package/src/NotchedOutline/index.ts +1 -1
- package/src/NotchedOutline/styledComponents.ts +122 -122
- package/src/Paper/Paper.story.tsx +50 -50
- package/src/Paper/Paper.tsx +67 -67
- package/src/Paper/index.ts +1 -1
- package/src/Popover/PopoverSurface.tsx +51 -51
- package/src/Popover/index.ts +1 -1
- package/src/ProgressSpinner/ProgressSpinner.story.tsx +35 -35
- package/src/ProgressSpinner/ProgressSpinner.tsx +119 -119
- package/src/ProgressSpinner/index.ts +1 -1
- package/src/RadioButton/RadioButton.story.tsx +109 -109
- package/src/RadioButton/RadioButton.tsx +112 -112
- package/src/RadioButton/RadioButtonIcon.tsx +44 -44
- package/src/RadioButton/RadioGroup.tsx +26 -27
- package/src/RadioButton/index.ts +2 -2
- package/src/Ripple/Ripple.story.tsx +78 -78
- package/src/Ripple/Ripple.tsx +33 -33
- package/src/Ripple/RippleBox.tsx +52 -52
- package/src/Ripple/constants.ts +15 -15
- package/src/Ripple/index.ts +5 -5
- package/src/Ripple/keyframes.ts +36 -36
- package/src/Ripple/useRipple.ts +209 -209
- package/src/Ripple/useRippleHandlers.ts +54 -54
- package/src/Ripple/useRippleSurface.ts +162 -155
- package/src/Select/CustomContainerExample.tsx +59 -59
- package/src/Select/PaymentMethodSelect.story.tsx +320 -316
- package/src/Select/Select.story.tsx +225 -225
- package/src/Select/Select.tsx +284 -283
- package/src/Select/SelectIcon.tsx +43 -43
- package/src/Select/SelectMultiple.story.tsx +214 -215
- package/src/Select/context.ts +22 -22
- package/src/Select/defaultRender.tsx +60 -49
- package/src/Select/index.ts +1 -1
- package/src/Select/styledComponents.tsx +38 -38
- package/src/SelectItem/SelectItem.tsx +92 -92
- package/src/SelectItem/index.ts +1 -1
- package/src/SelectionControl/SelectionControlLabel.tsx +34 -34
- package/src/SelectionControl/SelectionControlText.tsx +37 -37
- package/src/SelectionControl/index.ts +2 -2
- package/src/Skeleton/DelayAppearance.tsx +41 -41
- package/src/Skeleton/Skeleton.story.tsx +57 -57
- package/src/Skeleton/Skeleton.tsx +40 -40
- package/src/Skeleton/animation.ts +54 -54
- package/src/Skeleton/index.ts +2 -2
- package/src/Slider/Slider.story.tsx +36 -36
- package/src/Slider/Slider.tsx +275 -275
- package/src/Slider/index.ts +1 -1
- package/src/Snackbar/Snackbar.story.tsx +99 -99
- package/src/Snackbar/Snackbar.tsx +19 -16
- package/src/Switch/Switch.story.tsx +97 -98
- package/src/Switch/Switch.tsx +170 -170
- package/src/Switch/index.ts +1 -1
- package/src/Switch/styledComponents.tsx +117 -117
- package/src/Tab/Tab.story.tsx +209 -209
- package/src/Tab/Tab.tsx +120 -120
- package/src/Tab/TabList.tsx +61 -61
- package/src/Tab/TabPanel.tsx +31 -31
- package/src/Tab/TabPanels.tsx +5 -5
- package/src/Tab/Tabs.tsx +5 -5
- package/src/Tab/context.ts +17 -17
- package/src/Tab/index.ts +5 -5
- package/src/TabIndicator/TabIndicator.tsx +146 -146
- package/src/TabIndicator/context.ts +13 -13
- package/src/TabIndicator/index.ts +2 -2
- package/src/Table/context.ts +6 -6
- package/src/Text/LoremIpsum.tsx +18 -18
- package/src/Text/Text.story.tsx +79 -75
- package/src/Text/Text.tsx +84 -84
- package/src/Text/index.ts +1 -1
- package/src/TextField/FilledContainer.tsx +173 -173
- package/src/TextField/HelperText.tsx +63 -63
- package/src/TextField/OutlinedContainer.tsx +116 -116
- package/src/TextField/consts.ts +7 -7
- package/src/TextField/index.ts +4 -4
- package/src/ThemeExplorer/BorderSlider.tsx +73 -73
- package/src/ThemeExplorer/ColorPicker.tsx +104 -104
- package/src/ThemeExplorer/ColorSchemePicker.tsx +55 -55
- package/src/ThemeExplorer/FontAutoComplete.tsx +139 -139
- package/src/ThemeExplorer/TextFieldColorPicker.tsx +112 -115
- package/src/ThemeExplorer/ThemeBuilder.story.tsx +8 -8
- package/src/ThemeExplorer/ThemeBuilder.tsx +437 -353
- package/src/ThemeExplorer/ThemeColors.tsx +122 -118
- package/src/ThemeExplorer/components.tsx +195 -195
- package/src/ThemeExplorer/googleFonts.ts +1436 -1436
- package/src/ThemeExplorer/index.ts +1 -1
- package/src/ThemeExplorer/makeColorScheme.tsx +111 -111
- package/src/ThemeExplorer/makeTailwindTheme.ts +44 -44
- package/src/ThemeExplorer/updateGoogleFonts.js +32 -33
- package/src/ThemeExplorer/useDeferredColor.tsx +21 -21
- package/src/ThemeExplorer/useLocalStorageCachedState.ts +18 -18
- package/src/Tooltip/Tooltip.story.tsx +35 -35
- package/src/Tooltip/Tooltip.tsx +67 -67
- package/src/Tooltip/index.ts +1 -1
- package/src/css.ts +2 -2
- package/src/hooks/useAnimation.ts +111 -111
- package/src/motion.ts +7 -7
- package/src/tailwind/extendColors.ts +51 -51
- package/src/tailwind/index.ts +57 -56
- package/src/tailwind/tests/extendColors.test.ts +123 -123
- package/src/theme/index.ts +2 -2
- package/src/theme/theme.ts +36 -8
- package/src/theme/typography-raleway.ts +114 -114
- package/src/theme/typography-roboto.ts +113 -113
- package/src/theme/useTheme.ts +17 -18
- package/tailwind/package.json +5 -5
- package/theme-explorer/package.json +5 -5
package/build/cjs/index.js
CHANGED
|
@@ -29,7 +29,6 @@ const EASING_STANDARD_ACCELERATE = 'cubic-bezier(0.3, 0, 1, 1)';
|
|
|
29
29
|
const EASING_STANDARD_DECELERATE = 'cubic-bezier(0, 0, 0, 1)';
|
|
30
30
|
|
|
31
31
|
// material theme preset
|
|
32
|
-
|
|
33
32
|
function font(fontFamily, lineHeight, fontSize, letterSpacing, weight) {
|
|
34
33
|
return {
|
|
35
34
|
fontFamily,
|
|
@@ -39,7 +38,6 @@ function font(fontFamily, lineHeight, fontSize, letterSpacing, weight) {
|
|
|
39
38
|
fontWeight: weight
|
|
40
39
|
};
|
|
41
40
|
}
|
|
42
|
-
|
|
43
41
|
const theme = {
|
|
44
42
|
googleFonts: 'https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:300,400,500,600,700&display=swap',
|
|
45
43
|
colors: {
|
|
@@ -51,11 +49,18 @@ const theme = {
|
|
|
51
49
|
'secondary-container': '#fbd9ea',
|
|
52
50
|
'tertiary-container': '#ffdbc9',
|
|
53
51
|
'error-container': '#ffdad4',
|
|
54
|
-
background: '#
|
|
55
|
-
surface: '#fcfcfc',
|
|
52
|
+
background: '#fff8fa',
|
|
56
53
|
'surface-variant': '#efdee5',
|
|
57
54
|
outline: '#81747a',
|
|
58
55
|
'outline-variant': '#d3c2c9',
|
|
56
|
+
'surface-dim': '#e4d6db',
|
|
57
|
+
surface: '#fff8fa',
|
|
58
|
+
'surface-bright': '#fff8fa',
|
|
59
|
+
'surface-container-lowest': '#ffffff',
|
|
60
|
+
'surface-container-low': '#fef0f5',
|
|
61
|
+
'surface-container': '#f8eaef',
|
|
62
|
+
'surface-container-high': '#f3e5ea',
|
|
63
|
+
'surface-container-highest': '#eddfe4',
|
|
59
64
|
on: {
|
|
60
65
|
primary: '#ffffff',
|
|
61
66
|
secondary: '#ffffff',
|
|
@@ -65,11 +70,18 @@ const theme = {
|
|
|
65
70
|
'secondary-container': '#291521',
|
|
66
71
|
'tertiary-container': '#321303',
|
|
67
72
|
'error-container': '#410001',
|
|
68
|
-
background: '#
|
|
69
|
-
surface: '#1f1a1c',
|
|
73
|
+
background: '#21191d',
|
|
70
74
|
'surface-variant': '#4f4349',
|
|
71
75
|
outline: '#feecf3',
|
|
72
|
-
'outline-variant': '#22191e'
|
|
76
|
+
'outline-variant': '#22191e',
|
|
77
|
+
'surface-dim': '#21191d',
|
|
78
|
+
surface: '#21191d',
|
|
79
|
+
'surface-bright': '#21191d',
|
|
80
|
+
'surface-container-lowest': '#21191d',
|
|
81
|
+
'surface-container-low': '#21191d',
|
|
82
|
+
'surface-container': '#21191d',
|
|
83
|
+
'surface-container-high': '#21191d',
|
|
84
|
+
'surface-container-highest': '#21191d'
|
|
73
85
|
},
|
|
74
86
|
modes: {
|
|
75
87
|
dark: {
|
|
@@ -81,11 +93,18 @@ const theme = {
|
|
|
81
93
|
'secondary-container': '#57404d',
|
|
82
94
|
'tertiary-container': '#653d28',
|
|
83
95
|
'error-container': '#930006',
|
|
84
|
-
background: '#
|
|
85
|
-
surface: '#1f1a1c',
|
|
96
|
+
background: '#181215',
|
|
86
97
|
'surface-variant': '#4f4349',
|
|
87
98
|
outline: '#9b8d93',
|
|
88
99
|
'outline-variant': '#4f4349',
|
|
100
|
+
'surface-dim': '#181215',
|
|
101
|
+
surface: '#181215',
|
|
102
|
+
'surface-bright': '#3f373b',
|
|
103
|
+
'surface-container-lowest': '#130c10',
|
|
104
|
+
'surface-container-low': '#21191d',
|
|
105
|
+
'surface-container': '#251d21',
|
|
106
|
+
'surface-container-high': '#30282c',
|
|
107
|
+
'surface-container-highest': '#3b3236',
|
|
89
108
|
on: {
|
|
90
109
|
primary: '#5b0e47',
|
|
91
110
|
secondary: '#402a37',
|
|
@@ -95,11 +114,18 @@ const theme = {
|
|
|
95
114
|
'secondary-container': '#fbd9ea',
|
|
96
115
|
'tertiary-container': '#ffdbc9',
|
|
97
116
|
'error-container': '#ffdad4',
|
|
98
|
-
background: '#
|
|
99
|
-
surface: '#eae0e3',
|
|
117
|
+
background: '#eddfe4',
|
|
100
118
|
'surface-variant': '#d3c2c9',
|
|
101
119
|
outline: '#22191e',
|
|
102
|
-
'outline-variant': '#efdee5'
|
|
120
|
+
'outline-variant': '#efdee5',
|
|
121
|
+
'surface-dim': '#eddfe4',
|
|
122
|
+
surface: '#eddfe4',
|
|
123
|
+
'surface-bright': '#eddfe4',
|
|
124
|
+
'surface-container-lowest': '#eddfe4',
|
|
125
|
+
'surface-container-low': '#eddfe4',
|
|
126
|
+
'surface-container': '#eddfe4',
|
|
127
|
+
'surface-container-high': '#eddfe4',
|
|
128
|
+
'surface-container-highest': '#eddfe4'
|
|
103
129
|
}
|
|
104
130
|
}
|
|
105
131
|
}
|
|
@@ -514,14 +540,14 @@ const theme = {
|
|
|
514
540
|
|
|
515
541
|
function useTheme() {
|
|
516
542
|
const obj = react.useTheme();
|
|
517
|
-
|
|
518
543
|
if (Object.keys(obj).length === 0 && obj.constructor === Object) {
|
|
519
544
|
return theme;
|
|
520
545
|
}
|
|
521
|
-
|
|
522
546
|
return obj;
|
|
523
547
|
}
|
|
524
548
|
|
|
549
|
+
// AppBar Component
|
|
550
|
+
|
|
525
551
|
const appbarContext = /*#__PURE__*/react$1.createContext({
|
|
526
552
|
variant: 'default',
|
|
527
553
|
size: 'default'
|
|
@@ -544,7 +570,6 @@ const variant = ({
|
|
|
544
570
|
variant = 'default',
|
|
545
571
|
tx = 'variants'
|
|
546
572
|
}) => css.css(css.get(theme, tx + '.' + variant, css.get(theme, variant)))(theme);
|
|
547
|
-
|
|
548
573
|
const BoxBase = /*#__PURE__*/_styled__default["default"]('div', process.env.NODE_ENV === "production" ? {
|
|
549
574
|
shouldForwardProp: shouldForwardProp__default["default"],
|
|
550
575
|
target: "e25ivq30"
|
|
@@ -552,8 +577,7 @@ const BoxBase = /*#__PURE__*/_styled__default["default"]('div', process.env.NODE
|
|
|
552
577
|
shouldForwardProp: shouldForwardProp__default["default"],
|
|
553
578
|
target: "e25ivq30",
|
|
554
579
|
label: "BoxBase"
|
|
555
|
-
})("box-sizing:border-box;margin:0;min-width:0;", base, variant, sx, props => props.css, styledSystem.compose(styledSystem.space, styledSystem.layout, styledSystem.typography, styledSystem.color, styledSystem.flexbox, styledSystem.border, styledSystem.grid, styledSystem.background, styledSystem.position, styledSystem.shadow), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
556
|
-
|
|
580
|
+
})("box-sizing:border-box;margin:0;min-width:0;", base, variant, sx, props => props.css, styledSystem.compose(styledSystem.space, styledSystem.layout, styledSystem.typography, styledSystem.color, styledSystem.flexbox, styledSystem.border, styledSystem.grid, styledSystem.background, styledSystem.position, styledSystem.shadow), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJveC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0dnQiIsImZpbGUiOiJCb3gudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUge1xuICBFbGVtZW50VHlwZSxcbiAgRkMsXG4gIEhUTUxBdHRyaWJ1dGVzLFxuICBSZWFjdEVsZW1lbnQsXG4gIFJlZkF0dHJpYnV0ZXMsXG59IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgdHlwZSB7IENTU09iamVjdCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB0eXBlIHtcbiAgU3BhY2VQcm9wcyxcbiAgTGF5b3V0UHJvcHMsXG4gIFR5cG9ncmFwaHlQcm9wcyxcbiAgQ29sb3JQcm9wcyxcbiAgRmxleGJveFByb3BzLFxuICBCb3JkZXJQcm9wcyxcbiAgR3JpZFByb3BzLFxuICBCYWNrZ3JvdW5kUHJvcHMsXG4gIFBvc2l0aW9uUHJvcHMsXG4gIFNoYWRvd1Byb3BzLFxuICBSZXNwb25zaXZlVmFsdWUsXG59IGZyb20gJ3N0eWxlZC1zeXN0ZW0nO1xuaW1wb3J0IHtcbiAgY29tcG9zZSxcbiAgc3BhY2UsXG4gIGxheW91dCxcbiAgdHlwb2dyYXBoeSxcbiAgY29sb3IsXG4gIGZsZXhib3gsXG4gIGJvcmRlcixcbiAgZ3JpZCxcbiAgYmFja2dyb3VuZCxcbiAgcG9zaXRpb24sXG4gIHNoYWRvdyxcbn0gZnJvbSAnc3R5bGVkLXN5c3RlbSc7XG5pbXBvcnQgdHlwZSB7XG4gIFN5c3RlbVN0eWxlT2JqZWN0LFxuICBSZXNwb25zaXZlU3R5bGVWYWx1ZSxcbn0gZnJvbSAnQHN0eWxlZC1zeXN0ZW0vY3NzJztcbmltcG9ydCB7IGNzcywgZ2V0IH0gZnJvbSAnQHN0eWxlZC1zeXN0ZW0vY3NzJztcbmltcG9ydCBzaG91bGRGb3J3YXJkUHJvcCBmcm9tICdAc3R5bGVkLXN5c3RlbS9zaG91bGQtZm9yd2FyZC1wcm9wJztcblxuaW1wb3J0IHR5cGUgeyBUaGVtZSB9IGZyb20gJy4uL3RoZW1lJztcbmltcG9ydCB7IHVzZVRoZW1lIH0gZnJvbSAnLi4vdGhlbWUnO1xuXG5leHBvcnQgdHlwZSBTeFN0eWxlUHJvcCA9XG4gIHwgU3lzdGVtU3R5bGVPYmplY3RcbiAgfCBSZWNvcmQ8XG4gICAgICBzdHJpbmcsXG4gICAgICB8IFN5c3RlbVN0eWxlT2JqZWN0XG4gICAgICB8IFJlc3BvbnNpdmVTdHlsZVZhbHVlPG51bWJlciB8IHN0cmluZz5cbiAgICAgIHwgUmVjb3JkPFxuICAgICAgICAgIHN0cmluZyxcbiAgICAgICAgICBTeXN0ZW1TdHlsZU9iamVjdCB8IFJlc3BvbnNpdmVTdHlsZVZhbHVlPG51bWJlciB8IHN0cmluZz5cbiAgICAgICAgPlxuICAgID47XG5cbmV4cG9ydCBpbnRlcmZhY2UgQmFzZVByb3BzIHtcbiAgYXM/OiBFbGVtZW50VHlwZTxhbnk+O1xuICBzeD86IFN4U3R5bGVQcm9wO1xuICAvLyBjc3M/OiBDU1NPYmplY3QgfCAoKHByb3BzOiB7IHRoZW1lOiBUaGVtZSB9KSA9PiBDU1NPYmplY3QpO1xuICBfX2Nzcz86IFN4U3R5bGVQcm9wO1xuICB2YXJpYW50PzogUmVzcG9uc2l2ZVZhbHVlPHN0cmluZz47XG4gIHR4Pzogc3RyaW5nO1xuICB0aGVtZTogVGhlbWU7XG59XG5leHBvcnQgY29uc3Qgc3ggPSAoeyB0aGVtZSwgc3ggfTogQmFzZVByb3BzKSA9PiBjc3Moc3gpKHRoZW1lKSBhcyBDU1NPYmplY3Q7XG5leHBvcnQgY29uc3QgYmFzZSA9ICh7IHRoZW1lLCBfX2NzcyB9OiBCYXNlUHJvcHMpID0+XG4gIGNzcyhfX2NzcykodGhlbWUpIGFzIENTU09iamVjdDtcbmV4cG9ydCBjb25zdCB2YXJpYW50ID0gKHtcbiAgdGhlbWUsXG4gIHZhcmlhbnQgPSAnZGVmYXVsdCcsXG4gIHR4ID0gJ3ZhcmlhbnRzJyxcbn06IEJhc2VQcm9wcykgPT5cbiAgY3NzKGdldCh0aGVtZSwgdHggKyAnLicgKyB2YXJpYW50LCBnZXQodGhlbWUsIHZhcmlhbnQgYXMgYW55KSkpKFxuICAgIHRoZW1lXG4gICkgYXMgQ1NTT2JqZWN0O1xuXG50eXBlIEtub3duQm94UHJvcHMgPSBCYXNlUHJvcHMgJlxuICBTcGFjZVByb3BzICZcbiAgTGF5b3V0UHJvcHMgJlxuICBUeXBvZ3JhcGh5UHJvcHMgJlxuICBDb2xvclByb3BzICZcbiAgRmxleGJveFByb3BzICZcbiAgQm9yZGVyUHJvcHMgJlxuICBHcmlkUHJvcHMgJlxuICBCYWNrZ3JvdW5kUHJvcHMgJlxuICBQb3NpdGlvblByb3BzICZcbiAgU2hhZG93UHJvcHMgJiB7IHpJbmRleD86IG51bWJlciB8IHN0cmluZyB9O1xuXG5leHBvcnQgdHlwZSBCb3hQcm9wczxcbiAgSCA9IEhUTUxEaXZFbGVtZW50LFxuICBBdHRyIGV4dGVuZHMgSFRNTEF0dHJpYnV0ZXM8SD4gPSBIVE1MQXR0cmlidXRlczxIPlxuPiA9IE9taXQ8QXR0ciwga2V5b2YgS25vd25Cb3hQcm9wcz4gJiBQYXJ0aWFsPEtub3duQm94UHJvcHM+ICYgUmVmQXR0cmlidXRlczxIPjtcblxuY29uc3QgQm94QmFzZSA9IHN0eWxlZCgnZGl2JyBhcyB1bmtub3duIGFzIEZDLCB7XG4gIHNob3VsZEZvcndhcmRQcm9wLFxufSk8Qm94UHJvcHM8SFRNTERpdkVsZW1lbnQ+PihcbiAge1xuICAgIGJveFNpemluZzogJ2JvcmRlci1ib3gnLFxuICAgIG1hcmdpbjogMCxcbiAgICBtaW5XaWR0aDogMCxcbiAgfSxcbiAgYmFzZSxcbiAgdmFyaWFudCxcbiAgc3gsXG4gIChwcm9wczogYW55KSA9PiBwcm9wcy5jc3MsXG4gIGNvbXBvc2UoXG4gICAgc3BhY2UsXG4gICAgbGF5b3V0LFxuICAgIHR5cG9ncmFwaHksXG4gICAgY29sb3IsXG4gICAgZmxleGJveCxcbiAgICBib3JkZXIsXG4gICAgZ3JpZCxcbiAgICBiYWNrZ3JvdW5kLFxuICAgIHBvc2l0aW9uLFxuICAgIHNoYWRvd1xuICApXG4pO1xuXG5leHBvcnQgY29uc3QgQm94OiA8XG4gIFByb3BzID0gQm94UHJvcHM8SFRNTERpdkVsZW1lbnQsIEhUTUxBdHRyaWJ1dGVzPEhUTUxEaXZFbGVtZW50Pj5cbj4oXG4gIHByb3BzOiBQcm9wc1xuKSA9PiBSZWFjdEVsZW1lbnQgPSBmb3J3YXJkUmVmPEhUTUxEaXZFbGVtZW50LCBCb3hQcm9wczxIVE1MRGl2RWxlbWVudD4+KFxuICBmdW5jdGlvbiBCb3gocHJvcHMsIGZvcndhcmRlZFJlZikge1xuICAgIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcblxuICAgIHJldHVybiA8Qm94QmFzZSByZWY9e2ZvcndhcmRlZFJlZn0gdGhlbWU9e3RoZW1lfSB7Li4ucHJvcHN9IC8+O1xuICB9XG4pIGFzIGFueTtcbiJdfQ== */");
|
|
557
581
|
const Box = /*#__PURE__*/react$1.forwardRef(function Box(props, forwardedRef) {
|
|
558
582
|
const theme = useTheme();
|
|
559
583
|
return /*#__PURE__*/jsxRuntime.jsx(BoxBase, {
|
|
@@ -565,16 +589,13 @@ const Box = /*#__PURE__*/react$1.forwardRef(function Box(props, forwardedRef) {
|
|
|
565
589
|
|
|
566
590
|
const alpha = (colorString, alphaValue) => theme => {
|
|
567
591
|
const color = css.get(theme, 'colors.' + colorString, colorString);
|
|
568
|
-
|
|
569
592
|
if (color.startsWith('var')) {
|
|
570
593
|
const color = css.get(theme, 'colors.' + colorString + '_rgb', colorString);
|
|
571
594
|
return `rgba(${color},${alphaValue})`;
|
|
572
595
|
}
|
|
573
|
-
|
|
574
596
|
if (color.startsWith('rgba(')) {
|
|
575
597
|
return color;
|
|
576
598
|
}
|
|
577
|
-
|
|
578
599
|
const rgb = polished.parseToRgb(color);
|
|
579
600
|
return `rgba(${rgb.red},${rgb.green},${rgb.blue},${alphaValue})`;
|
|
580
601
|
};
|
|
@@ -594,7 +615,6 @@ function getBackgroundOverlay(theme, backgroundOverlay, overlayColor = 'on.surfa
|
|
|
594
615
|
if (Number(backgroundOverlay) <= 0) {
|
|
595
616
|
return {};
|
|
596
617
|
}
|
|
597
|
-
|
|
598
618
|
const overlay = css.get(theme, `paper.overlays.${backgroundOverlay}`) || 0;
|
|
599
619
|
return getColorOverlay(theme, 'surface', overlayColor, overlay);
|
|
600
620
|
}
|
|
@@ -602,9 +622,9 @@ function getDarkThemeBackgroundOverlay(theme, backgroundOverlay, overlayColor =
|
|
|
602
622
|
if (Number(backgroundOverlay) <= 0) {
|
|
603
623
|
return {};
|
|
604
624
|
}
|
|
605
|
-
|
|
606
625
|
return {
|
|
607
|
-
[`.${dynamicTheme.DARK_SCHEME_CLASS} &, &.${dynamicTheme.DARK_SCHEME_CLASS}`]: {
|
|
626
|
+
[`.${dynamicTheme.DARK_SCHEME_CLASS} &, &.${dynamicTheme.DARK_SCHEME_CLASS}`]: {
|
|
627
|
+
...getBackgroundOverlay(theme, backgroundOverlay, overlayColor)
|
|
608
628
|
}
|
|
609
629
|
};
|
|
610
630
|
}
|
|
@@ -660,7 +680,6 @@ const AppBar = /*#__PURE__*/react$1.forwardRef(function AppBar(props, forwardedR
|
|
|
660
680
|
setElevation('default');
|
|
661
681
|
}
|
|
662
682
|
};
|
|
663
|
-
|
|
664
683
|
if (elevationProp === 'dynamic') {
|
|
665
684
|
window.addEventListener('scroll', onScroll);
|
|
666
685
|
return () => {
|
|
@@ -669,7 +688,6 @@ const AppBar = /*#__PURE__*/react$1.forwardRef(function AppBar(props, forwardedR
|
|
|
669
688
|
} else {
|
|
670
689
|
setElevation(elevationProp);
|
|
671
690
|
}
|
|
672
|
-
|
|
673
691
|
return;
|
|
674
692
|
}, [elevationProp]);
|
|
675
693
|
return /*#__PURE__*/jsxRuntime.jsx(AppBarProvider, {
|
|
@@ -699,17 +717,83 @@ const AppBar = /*#__PURE__*/react$1.forwardRef(function AppBar(props, forwardedR
|
|
|
699
717
|
});
|
|
700
718
|
});
|
|
701
719
|
|
|
720
|
+
const sizeStyles = {
|
|
721
|
+
xs: {
|
|
722
|
+
height: "2rem",
|
|
723
|
+
iconSize: "1.25rem",
|
|
724
|
+
contentPaddingInline: "0.75rem",
|
|
725
|
+
standardInnerRadius: "0.75rem",
|
|
726
|
+
connectedInnerRadius: "0.25rem",
|
|
727
|
+
splitInnerRadius: "0.25rem"
|
|
728
|
+
},
|
|
729
|
+
sm: {
|
|
730
|
+
height: "2.5rem",
|
|
731
|
+
iconSize: "1.5rem",
|
|
732
|
+
contentPaddingInline: "1rem",
|
|
733
|
+
standardInnerRadius: "0.75rem",
|
|
734
|
+
connectedInnerRadius: "0.5rem",
|
|
735
|
+
splitInnerRadius: "0.25rem"
|
|
736
|
+
},
|
|
737
|
+
md: {
|
|
738
|
+
height: "3.5rem",
|
|
739
|
+
iconSize: "1.5rem",
|
|
740
|
+
contentPaddingInline: "1.5rem",
|
|
741
|
+
standardInnerRadius: "1rem",
|
|
742
|
+
connectedInnerRadius: "0.5rem",
|
|
743
|
+
splitInnerRadius: "0.25rem"
|
|
744
|
+
},
|
|
745
|
+
lg: {
|
|
746
|
+
height: "6rem",
|
|
747
|
+
iconSize: "2rem",
|
|
748
|
+
contentPaddingInline: "3rem",
|
|
749
|
+
standardInnerRadius: "1.75rem",
|
|
750
|
+
connectedInnerRadius: "1rem",
|
|
751
|
+
splitInnerRadius: "0.5rem"
|
|
752
|
+
},
|
|
753
|
+
xl: {
|
|
754
|
+
height: "8.5rem",
|
|
755
|
+
iconSize: "2.5rem",
|
|
756
|
+
contentPaddingInline: "4rem",
|
|
757
|
+
standardInnerRadius: "1.75rem",
|
|
758
|
+
connectedInnerRadius: "1.25rem",
|
|
759
|
+
splitInnerRadius: "0.75rem"
|
|
760
|
+
}
|
|
761
|
+
};
|
|
762
|
+
function getTypographyVariant(size) {
|
|
763
|
+
if (size === 'md') return 'text.title-medium';
|
|
764
|
+
if (size === 'lg') return 'text.headline-small';
|
|
765
|
+
if (size === 'xl') return 'text.headline-large';
|
|
766
|
+
return 'text.label-large';
|
|
767
|
+
}
|
|
768
|
+
function getSquareRadius(size) {
|
|
769
|
+
if (size === 'md') return 'large';
|
|
770
|
+
if (size === 'lg' || size === 'xl') return 'extra-large';
|
|
771
|
+
return 'medium';
|
|
772
|
+
}
|
|
773
|
+
function isIconVariant(variant) {
|
|
774
|
+
return variant === 'icon' || variant === 'icon-filled' || variant === 'icon-outlined' || variant === 'fab';
|
|
775
|
+
}
|
|
702
776
|
const BaseButton = /*#__PURE__*/react$1.forwardRef((props, ref) => {
|
|
703
777
|
const theme = react.useTheme();
|
|
704
778
|
const {
|
|
705
779
|
__css,
|
|
706
|
-
variant: variantProp,
|
|
707
|
-
elevation,
|
|
780
|
+
variant: variantProp = 'text',
|
|
781
|
+
elevation = 'none',
|
|
782
|
+
size = 'sm',
|
|
783
|
+
shape = 'rounded',
|
|
784
|
+
isGroupedButton,
|
|
708
785
|
...otherProps
|
|
709
786
|
} = props;
|
|
787
|
+
const sizeStyle = sizeStyles[size];
|
|
788
|
+
const iconOnly = isIconVariant(variantProp);
|
|
789
|
+
const contentButton = !iconOnly;
|
|
710
790
|
return /*#__PURE__*/jsxRuntime.jsx(Box, {
|
|
711
791
|
as: "button",
|
|
712
792
|
ref: ref,
|
|
793
|
+
variant: variantProp,
|
|
794
|
+
"data-button-grouped": isGroupedButton ? '' : undefined,
|
|
795
|
+
"data-button-shape": shape,
|
|
796
|
+
"data-button-size": size,
|
|
713
797
|
__css: {
|
|
714
798
|
boxSizing: 'border-box',
|
|
715
799
|
position: 'relative',
|
|
@@ -722,35 +806,40 @@ const BaseButton = /*#__PURE__*/react$1.forwardRef((props, ref) => {
|
|
|
722
806
|
textDecoration: 'none',
|
|
723
807
|
fontSize: 'inherit',
|
|
724
808
|
border: 0,
|
|
809
|
+
boxShadow: 'none',
|
|
725
810
|
overflow: 'hidden',
|
|
726
811
|
WebkitTapHighlightColor: 'transparent',
|
|
727
812
|
touchAction: 'manipulation',
|
|
728
813
|
userSelect: 'none',
|
|
729
|
-
minWidth: '
|
|
814
|
+
minWidth: 'fit-content',
|
|
730
815
|
whiteSpace: 'nowrap',
|
|
816
|
+
cursor: 'pointer',
|
|
817
|
+
outline: 'none',
|
|
818
|
+
py: 0,
|
|
819
|
+
variant: getTypographyVariant(size),
|
|
820
|
+
height: sizeStyle.height,
|
|
821
|
+
borderRadius: shape === 'square' ? getSquareRadius(size) : 'full',
|
|
822
|
+
...(contentButton && {
|
|
823
|
+
px: sizeStyle.contentPaddingInline
|
|
824
|
+
}),
|
|
825
|
+
...(iconOnly && {
|
|
826
|
+
width: sizeStyle.height,
|
|
827
|
+
maxWidth: sizeStyle.height,
|
|
828
|
+
maxHeight: sizeStyle.height,
|
|
829
|
+
px: `calc((${sizeStyle.height} - ${sizeStyle.iconSize}) / 2)`
|
|
830
|
+
}),
|
|
831
|
+
'--btn-pill-radius': `calc(${sizeStyle.height} / 2)`,
|
|
832
|
+
'--btn-standard-inner-radius': sizeStyle.standardInnerRadius,
|
|
833
|
+
'--btn-connected-inner-radius': sizeStyle.connectedInnerRadius,
|
|
834
|
+
'--btn-split-inner-radius': sizeStyle.splitInnerRadius,
|
|
835
|
+
'& svg': {
|
|
836
|
+
width: sizeStyle.iconSize,
|
|
837
|
+
height: sizeStyle.iconSize
|
|
838
|
+
},
|
|
731
839
|
'&::-moz-focus-inner': {
|
|
732
840
|
border: 0
|
|
733
841
|
},
|
|
734
|
-
...
|
|
735
|
-
scale: 'buttons.variants',
|
|
736
|
-
prop: 'variant',
|
|
737
|
-
variants: {
|
|
738
|
-
text: {}
|
|
739
|
-
}
|
|
740
|
-
})({
|
|
741
|
-
variant: variantProp,
|
|
742
|
-
theme
|
|
743
|
-
}),
|
|
744
|
-
...styledSystem.variant({
|
|
745
|
-
scale: 'buttons.elevations',
|
|
746
|
-
prop: 'elevation',
|
|
747
|
-
variants: {
|
|
748
|
-
none: {}
|
|
749
|
-
}
|
|
750
|
-
})({
|
|
751
|
-
elevation,
|
|
752
|
-
theme
|
|
753
|
-
}),
|
|
842
|
+
...(theme.buttons.elevations[elevation] ?? {}),
|
|
754
843
|
...__css
|
|
755
844
|
},
|
|
756
845
|
...otherProps
|
|
@@ -775,48 +864,7 @@ const TransparentButton = /*#__PURE__*/_styled__default["default"](BaseButton, p
|
|
|
775
864
|
'&:focus-visible': {
|
|
776
865
|
outline: 'none'
|
|
777
866
|
}
|
|
778
|
-
}),
|
|
779
|
-
theme,
|
|
780
|
-
color = 'primary',
|
|
781
|
-
isGroupedButton = false
|
|
782
|
-
}) => isGroupedButton && {
|
|
783
|
-
'[data-button-group=""] &': {
|
|
784
|
-
borderColor: css.get(theme, `colors.${String(color)}`) || (typeof color === 'string' ? color : undefined),
|
|
785
|
-
':first-of-type': {
|
|
786
|
-
borderTopRightRadius: 0,
|
|
787
|
-
borderBottomRightRadius: 0,
|
|
788
|
-
borderRightStyle: 'solid',
|
|
789
|
-
borderRightWidth: "0.0625rem"
|
|
790
|
-
},
|
|
791
|
-
':not(:first-of-type):not(:last-of-type)': {
|
|
792
|
-
borderRadius: 0
|
|
793
|
-
},
|
|
794
|
-
':last-of-type': {
|
|
795
|
-
borderTopLeftRadius: 0,
|
|
796
|
-
borderBottomLeftRadius: 0,
|
|
797
|
-
borderLeftStyle: 'solid',
|
|
798
|
-
borderLeftWidth: "0.0625rem"
|
|
799
|
-
},
|
|
800
|
-
// Handling the border between enabled/disabled buttons
|
|
801
|
-
':not(:disabled):has(+ :disabled)': {
|
|
802
|
-
borderRightWidth: "0.0625rem",
|
|
803
|
-
borderRightStyle: 'solid'
|
|
804
|
-
},
|
|
805
|
-
':disabled + :not(:disabled)': {
|
|
806
|
-
borderLeftWidth: "0.0625rem",
|
|
807
|
-
borderLeftStyle: 'solid'
|
|
808
|
-
},
|
|
809
|
-
':not(:disabled) + :disabled': {
|
|
810
|
-
borderLeftWidth: "0rem"
|
|
811
|
-
},
|
|
812
|
-
':disabled:has(+ :not(:disabled))': {
|
|
813
|
-
borderRightWidth: "0rem"
|
|
814
|
-
},
|
|
815
|
-
':last-of-type:nth-of-type(2)': {
|
|
816
|
-
borderLeftWidth: "0rem"
|
|
817
|
-
}
|
|
818
|
-
}
|
|
819
|
-
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRyYW5zcGFyZW50QnV0dG9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRaUMiLCJmaWxlIjoiVHJhbnNwYXJlbnRCdXR0b24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgZ2V0LCBjc3MgfSBmcm9tICdAc3R5bGVkLXN5c3RlbS9jc3MnO1xuaW1wb3J0IHsgcmVtIH0gZnJvbSAncG9saXNoZWQnO1xuXG5pbXBvcnQgeyBCYXNlQnV0dG9uIH0gZnJvbSAnLi9CYXNlQnV0dG9uJztcbmltcG9ydCB0eXBlIHsgVGhlbWUgfSBmcm9tICcuLi90aGVtZSc7XG5pbXBvcnQgeyBhbHBoYSB9IGZyb20gJy4uL2NvbG9yJztcblxuZXhwb3J0IGNvbnN0IFRyYW5zcGFyZW50QnV0dG9uID0gc3R5bGVkKEJhc2VCdXR0b24pKFxuICAoeyB0aGVtZSwgY29sb3IgPSAncHJpbWFyeScgfSkgPT5cbiAgICBjc3Moe1xuICAgICAgYmFja2dyb3VuZENvbG9yOiAndHJhbnNwYXJlbnQnLFxuICAgICAgY29sb3I6IGdldCh0aGVtZSwgYGNvbG9ycy4ke1N0cmluZyhjb2xvcil9YCkgfHwgY29sb3IsXG4gICAgICAnJjpkaXNhYmxlZCc6IHtcbiAgICAgICAgY29sb3I6IGFscGhhKCdvbi5zdXJmYWNlJywgMC4zOCksXG4gICAgICAgIGN1cnNvcjogJ2RlZmF1bHQnLFxuICAgICAgfSxcbiAgICAgICcmOmZvY3VzLXZpc2libGUnOiB7XG4gICAgICAgIG91dGxpbmU6ICdub25lJyxcbiAgICAgIH0sXG4gICAgfSksXG4gICh7IHRoZW1lLCBjb2xvciA9ICdwcmltYXJ5JywgaXNHcm91cGVkQnV0dG9uID0gZmFsc2UgfSkgPT5cbiAgICBpc0dyb3VwZWRCdXR0b24gJiYge1xuICAgICAgJ1tkYXRhLWJ1dHRvbi1ncm91cD1cIlwiXSAmJzoge1xuICAgICAgICBib3JkZXJDb2xvcjpcbiAgICAgICAgICBnZXQodGhlbWUsIGBjb2xvcnMuJHtTdHJpbmcoY29sb3IpfWApIHx8XG4gICAgICAgICAgKHR5cGVvZiBjb2xvciA9PT0gJ3N0cmluZycgPyBjb2xvciA6IHVuZGVmaW5lZCksXG4gICAgICAgICc6Zmlyc3Qtb2YtdHlwZSc6IHtcbiAgICAgICAgICBib3JkZXJUb3BSaWdodFJhZGl1czogMCxcbiAgICAgICAgICBib3JkZXJCb3R0b21SaWdodFJhZGl1czogMCxcbiAgICAgICAgICBib3JkZXJSaWdodFN0eWxlOiAnc29saWQnLFxuICAgICAgICAgIGJvcmRlclJpZ2h0V2lkdGg6IHJlbSgxKSxcbiAgICAgICAgfSxcbiAgICAgICAgJzpub3QoOmZpcnN0LW9mLXR5cGUpOm5vdCg6bGFzdC1vZi10eXBlKSc6IHtcbiAgICAgICAgICBib3JkZXJSYWRpdXM6IDAsXG4gICAgICAgIH0sXG4gICAgICAgICc6bGFzdC1vZi10eXBlJzoge1xuICAgICAgICAgIGJvcmRlclRvcExlZnRSYWRpdXM6IDAsXG4gICAgICAgICAgYm9yZGVyQm90dG9tTGVmdFJhZGl1czogMCxcbiAgICAgICAgICBib3JkZXJMZWZ0U3R5bGU6ICdzb2xpZCcsXG4gICAgICAgICAgYm9yZGVyTGVmdFdpZHRoOiByZW0oMSksXG4gICAgICAgIH0sXG4gICAgICAgIC8vIEhhbmRsaW5nIHRoZSBib3JkZXIgYmV0d2VlbiBlbmFibGVkL2Rpc2FibGVkIGJ1dHRvbnNcbiAgICAgICAgJzpub3QoOmRpc2FibGVkKTpoYXMoKyA6ZGlzYWJsZWQpJzoge1xuICAgICAgICAgIGJvcmRlclJpZ2h0V2lkdGg6IHJlbSgxKSxcbiAgICAgICAgICBib3JkZXJSaWdodFN0eWxlOiAnc29saWQnLFxuICAgICAgICB9LFxuICAgICAgICAnOmRpc2FibGVkICsgOm5vdCg6ZGlzYWJsZWQpJzoge1xuICAgICAgICAgIGJvcmRlckxlZnRXaWR0aDogcmVtKDEpLFxuICAgICAgICAgIGJvcmRlckxlZnRTdHlsZTogJ3NvbGlkJyxcbiAgICAgICAgfSxcbiAgICAgICAgJzpub3QoOmRpc2FibGVkKSArIDpkaXNhYmxlZCc6IHtcbiAgICAgICAgICBib3JkZXJMZWZ0V2lkdGg6IHJlbSgwKSxcbiAgICAgICAgfSxcbiAgICAgICAgJzpkaXNhYmxlZDpoYXMoKyA6bm90KDpkaXNhYmxlZCkpJzoge1xuICAgICAgICAgIGJvcmRlclJpZ2h0V2lkdGg6IHJlbSgwKSxcbiAgICAgICAgfSxcbiAgICAgICAgJzpsYXN0LW9mLXR5cGU6bnRoLW9mLXR5cGUoMiknOiB7XG4gICAgICAgICAgYm9yZGVyTGVmdFdpZHRoOiByZW0oMCksXG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgIH1cbik7XG5cbmV4cG9ydCBmdW5jdGlvbiBnZXRSaXBwbGVQcm9wZXJ0aWVzKHRoZW1lOiBUaGVtZSkge1xuICByZXR1cm4ge1xuICAgIGhvdmVyT3BhY2l0eTogZ2V0KHRoZW1lLCBgYnV0dG9ucy5vdmVybGF5cy50cmFuc3BhcmVudC5ob3Zlci5vcGFjaXR5YCksXG4gICAgZm9jdXNPcGFjaXR5OiBnZXQodGhlbWUsIGBidXR0b25zLm92ZXJsYXlzLnRyYW5zcGFyZW50LmZvY3VzLm9wYWNpdHlgKSxcbiAgICBwcmVzc2VkT3BhY2l0eTogZ2V0KHRoZW1lLCBgYnV0dG9ucy5vdmVybGF5cy50cmFuc3BhcmVudC5wcmVzc2VkLm9wYWNpdHlgKSxcbiAgICByaXBwbGVFbmFibGVkOiBmYWxzZSxcbiAgfTtcbn1cbiJdfQ== */");
|
|
867
|
+
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRyYW5zcGFyZW50QnV0dG9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPaUMiLCJmaWxlIjoiVHJhbnNwYXJlbnRCdXR0b24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgZ2V0LCBjc3MgfSBmcm9tICdAc3R5bGVkLXN5c3RlbS9jc3MnO1xuXG5pbXBvcnQgeyBCYXNlQnV0dG9uIH0gZnJvbSAnLi9CYXNlQnV0dG9uJztcbmltcG9ydCB0eXBlIHsgVGhlbWUgfSBmcm9tICcuLi90aGVtZSc7XG5pbXBvcnQgeyBhbHBoYSB9IGZyb20gJy4uL2NvbG9yJztcblxuZXhwb3J0IGNvbnN0IFRyYW5zcGFyZW50QnV0dG9uID0gc3R5bGVkKEJhc2VCdXR0b24pKFxuICAoeyB0aGVtZSwgY29sb3IgPSAncHJpbWFyeScgfSkgPT5cbiAgICBjc3Moe1xuICAgICAgYmFja2dyb3VuZENvbG9yOiAndHJhbnNwYXJlbnQnLFxuICAgICAgY29sb3I6IGdldCh0aGVtZSwgYGNvbG9ycy4ke1N0cmluZyhjb2xvcil9YCkgfHwgY29sb3IsXG4gICAgICAnJjpkaXNhYmxlZCc6IHtcbiAgICAgICAgY29sb3I6IGFscGhhKCdvbi5zdXJmYWNlJywgMC4zOCksXG4gICAgICAgIGN1cnNvcjogJ2RlZmF1bHQnLFxuICAgICAgfSxcbiAgICAgICcmOmZvY3VzLXZpc2libGUnOiB7XG4gICAgICAgIG91dGxpbmU6ICdub25lJyxcbiAgICAgIH0sXG4gICAgfSlcbik7XG5cbmV4cG9ydCBmdW5jdGlvbiBnZXRSaXBwbGVQcm9wZXJ0aWVzKHRoZW1lOiBUaGVtZSkge1xuICByZXR1cm4ge1xuICAgIGhvdmVyT3BhY2l0eTogZ2V0KHRoZW1lLCBgYnV0dG9ucy5vdmVybGF5cy50cmFuc3BhcmVudC5ob3Zlci5vcGFjaXR5YCksXG4gICAgZm9jdXNPcGFjaXR5OiBnZXQodGhlbWUsIGBidXR0b25zLm92ZXJsYXlzLnRyYW5zcGFyZW50LmZvY3VzLm9wYWNpdHlgKSxcbiAgICBwcmVzc2VkT3BhY2l0eTogZ2V0KHRoZW1lLCBgYnV0dG9ucy5vdmVybGF5cy50cmFuc3BhcmVudC5wcmVzc2VkLm9wYWNpdHlgKSxcbiAgICByaXBwbGVFbmFibGVkOiBmYWxzZSxcbiAgfTtcbn1cbiJdfQ== */");
|
|
820
868
|
function getRippleProperties$3(theme) {
|
|
821
869
|
return {
|
|
822
870
|
hoverOpacity: css.get(theme, `buttons.overlays.transparent.hover.opacity`),
|
|
@@ -853,48 +901,7 @@ const FilledButton = /*#__PURE__*/_styled__default["default"](BaseButton, proces
|
|
|
853
901
|
color = 'primary'
|
|
854
902
|
}) => color === 'surface' && css.css({
|
|
855
903
|
background: mixColor('surface', 'primary', 0.05)
|
|
856
|
-
}),
|
|
857
|
-
color = 'primary',
|
|
858
|
-
theme,
|
|
859
|
-
isGroupedButton = false
|
|
860
|
-
}) => isGroupedButton && {
|
|
861
|
-
'[data-button-group=""] &': {
|
|
862
|
-
borderColor: css.get(theme, `colors.on.${String(color)}`) || (typeof color === 'string' ? polished.readableColor(color) : undefined),
|
|
863
|
-
':first-of-type': {
|
|
864
|
-
borderTopRightRadius: 0,
|
|
865
|
-
borderBottomRightRadius: 0,
|
|
866
|
-
borderRightStyle: 'solid',
|
|
867
|
-
borderRightWidth: "0.0625rem"
|
|
868
|
-
},
|
|
869
|
-
':not(:first-of-type):not(:last-of-type)': {
|
|
870
|
-
borderRadius: 0
|
|
871
|
-
},
|
|
872
|
-
':last-of-type': {
|
|
873
|
-
borderTopLeftRadius: 0,
|
|
874
|
-
borderBottomLeftRadius: 0,
|
|
875
|
-
borderLeftStyle: 'solid',
|
|
876
|
-
borderLeftWidth: "0.0625rem"
|
|
877
|
-
},
|
|
878
|
-
// Handling the border between enabled/disabled buttons
|
|
879
|
-
':not(:disabled):has(+ :disabled)': {
|
|
880
|
-
borderRightWidth: "0.0625rem",
|
|
881
|
-
borderRightStyle: 'solid'
|
|
882
|
-
},
|
|
883
|
-
':disabled + :not(:disabled)': {
|
|
884
|
-
borderLeftWidth: "0.0625rem",
|
|
885
|
-
borderLeftStyle: 'solid'
|
|
886
|
-
},
|
|
887
|
-
':not(:disabled) + :disabled': {
|
|
888
|
-
borderLeftWidth: "0rem"
|
|
889
|
-
},
|
|
890
|
-
':disabled:has(+ :not(:disabled))': {
|
|
891
|
-
borderRightWidth: "0rem"
|
|
892
|
-
},
|
|
893
|
-
':last-of-type:nth-of-type(2)': {
|
|
894
|
-
borderLeftWidth: "0rem"
|
|
895
|
-
}
|
|
896
|
-
}
|
|
897
|
-
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZpbGxlZEJ1dHRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUTRCIiwiZmlsZSI6IkZpbGxlZEJ1dHRvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyByZWFkYWJsZUNvbG9yLCByZW0gfSBmcm9tICdwb2xpc2hlZCc7XG5pbXBvcnQgeyBnZXQsIGNzcyB9IGZyb20gJ0BzdHlsZWQtc3lzdGVtL2Nzcyc7XG5cbmltcG9ydCB7IEJhc2VCdXR0b24gfSBmcm9tICcuL0Jhc2VCdXR0b24nO1xuaW1wb3J0IHR5cGUgeyBUaGVtZSB9IGZyb20gJy4uL3RoZW1lJztcbmltcG9ydCB7IGFscGhhLCBtaXhDb2xvciB9IGZyb20gJy4uL2NvbG9yJztcblxuZXhwb3J0IGNvbnN0IEZpbGxlZEJ1dHRvbiA9IHN0eWxlZChCYXNlQnV0dG9uKShcbiAgKHsgY29sb3IgPSAncHJpbWFyeScsIHRoZW1lIH0pID0+XG4gICAgY3NzKHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogZ2V0KHRoZW1lLCBgY29sb3JzLiR7U3RyaW5nKGNvbG9yKX1gKSB8fCBjb2xvcixcbiAgICAgIGNvbG9yOlxuICAgICAgICBnZXQodGhlbWUsIGBjb2xvcnMub24uJHtTdHJpbmcoY29sb3IpfWApIHx8XG4gICAgICAgICh0eXBlb2YgY29sb3IgPT09ICdzdHJpbmcnID8gcmVhZGFibGVDb2xvcihjb2xvcikgOiB1bmRlZmluZWQpLFxuICAgICAgJyY6ZGlzYWJsZWQnOiB7XG4gICAgICAgIGNvbG9yOiBhbHBoYSgnb24uc3VyZmFjZScsIDAuMzgpLFxuICAgICAgICBiYWNrZ3JvdW5kOiBgbGluZWFyLWdyYWRpZW50KCR7Z2V0KHRoZW1lLCAnY29sb3JzLnN1cmZhY2UnKX0sICR7Z2V0KFxuICAgICAgICAgIHRoZW1lLFxuICAgICAgICAgICdjb2xvcnMuc3VyZmFjZSdcbiAgICAgICAgKX0pLCAke2FscGhhKCdvbi5zdXJmYWNlJywgMC4xMikodGhlbWUpfWAsXG4gICAgICAgIGJhY2tncm91bmRCbGVuZE1vZGU6ICdvdmVybGF5JyxcbiAgICAgICAgY3Vyc29yOiAnZGVmYXVsdCcsXG4gICAgICB9LFxuICAgICAgJyY6Zm9jdXMtdmlzaWJsZSc6IHtcbiAgICAgICAgb3V0bGluZUNvbG9yOiBnZXQodGhlbWUsIGBjb2xvcnMuJHtTdHJpbmcoY29sb3IpfWApIHx8IGNvbG9yLFxuICAgICAgICBvdXRsaW5lV2lkdGg6IDIsXG4gICAgICAgIG91dGxpbmVTdHlsZTogJ2F1dG8nLFxuICAgICAgICBvdXRsaW5lT2Zmc2V0OiAnMnB4JyxcbiAgICAgIH0sXG4gICAgfSksXG4gICh7IGNvbG9yID0gJ3ByaW1hcnknIH0pID0+XG4gICAgY29sb3IgPT09ICdzdXJmYWNlJyAmJlxuICAgIGNzcyh7IGJhY2tncm91bmQ6IG1peENvbG9yKCdzdXJmYWNlJywgJ3ByaW1hcnknLCAwLjA1KSB9KSxcbiAgKHsgY29sb3IgPSAncHJpbWFyeScsIHRoZW1lLCBpc0dyb3VwZWRCdXR0b24gPSBmYWxzZSB9KSA9PlxuICAgIGlzR3JvdXBlZEJ1dHRvbiAmJiB7XG4gICAgICAnW2RhdGEtYnV0dG9uLWdyb3VwPVwiXCJdICYnOiB7XG4gICAgICAgIGJvcmRlckNvbG9yOlxuICAgICAgICAgIGdldCh0aGVtZSwgYGNvbG9ycy5vbi4ke1N0cmluZyhjb2xvcil9YCkgfHxcbiAgICAgICAgICAodHlwZW9mIGNvbG9yID09PSAnc3RyaW5nJyA/IHJlYWRhYmxlQ29sb3IoY29sb3IpIDogdW5kZWZpbmVkKSxcbiAgICAgICAgJzpmaXJzdC1vZi10eXBlJzoge1xuICAgICAgICAgIGJvcmRlclRvcFJpZ2h0UmFkaXVzOiAwLFxuICAgICAgICAgIGJvcmRlckJvdHRvbVJpZ2h0UmFkaXVzOiAwLFxuICAgICAgICAgIGJvcmRlclJpZ2h0U3R5bGU6ICdzb2xpZCcsXG4gICAgICAgICAgYm9yZGVyUmlnaHRXaWR0aDogcmVtKDEpLFxuICAgICAgICB9LFxuICAgICAgICAnOm5vdCg6Zmlyc3Qtb2YtdHlwZSk6bm90KDpsYXN0LW9mLXR5cGUpJzoge1xuICAgICAgICAgIGJvcmRlclJhZGl1czogMCxcbiAgICAgICAgfSxcbiAgICAgICAgJzpsYXN0LW9mLXR5cGUnOiB7XG4gICAgICAgICAgYm9yZGVyVG9wTGVmdFJhZGl1czogMCxcbiAgICAgICAgICBib3JkZXJCb3R0b21MZWZ0UmFkaXVzOiAwLFxuICAgICAgICAgIGJvcmRlckxlZnRTdHlsZTogJ3NvbGlkJyxcbiAgICAgICAgICBib3JkZXJMZWZ0V2lkdGg6IHJlbSgxKSxcbiAgICAgICAgfSxcbiAgICAgICAgLy8gSGFuZGxpbmcgdGhlIGJvcmRlciBiZXR3ZWVuIGVuYWJsZWQvZGlzYWJsZWQgYnV0dG9uc1xuICAgICAgICAnOm5vdCg6ZGlzYWJsZWQpOmhhcygrIDpkaXNhYmxlZCknOiB7XG4gICAgICAgICAgYm9yZGVyUmlnaHRXaWR0aDogcmVtKDEpLFxuICAgICAgICAgIGJvcmRlclJpZ2h0U3R5bGU6ICdzb2xpZCcsXG4gICAgICAgIH0sXG4gICAgICAgICc6ZGlzYWJsZWQgKyA6bm90KDpkaXNhYmxlZCknOiB7XG4gICAgICAgICAgYm9yZGVyTGVmdFdpZHRoOiByZW0oMSksXG4gICAgICAgICAgYm9yZGVyTGVmdFN0eWxlOiAnc29saWQnLFxuICAgICAgICB9LFxuICAgICAgICAnOm5vdCg6ZGlzYWJsZWQpICsgOmRpc2FibGVkJzoge1xuICAgICAgICAgIGJvcmRlckxlZnRXaWR0aDogcmVtKDApLFxuICAgICAgICB9LFxuICAgICAgICAnOmRpc2FibGVkOmhhcygrIDpub3QoOmRpc2FibGVkKSknOiB7XG4gICAgICAgICAgYm9yZGVyUmlnaHRXaWR0aDogcmVtKDApLFxuICAgICAgICB9LFxuICAgICAgICAnOmxhc3Qtb2YtdHlwZTpudGgtb2YtdHlwZSgyKSc6IHtcbiAgICAgICAgICBib3JkZXJMZWZ0V2lkdGg6IHJlbSgwKSxcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgfVxuKTtcblxuZXhwb3J0IGZ1bmN0aW9uIGdldFJpcHBsZVByb3BlcnRpZXModGhlbWU6IFRoZW1lKSB7XG4gIHJldHVybiB7XG4gICAgaG92ZXJPcGFjaXR5OiBnZXQodGhlbWUsIGBidXR0b25zLm92ZXJsYXlzLmZpbGxlZC5ob3Zlci5vcGFjaXR5YCksXG4gICAgZm9jdXNPcGFjaXR5OiBnZXQodGhlbWUsIGBidXR0b25zLm92ZXJsYXlzLmZpbGxlZC5mb2N1cy5vcGFjaXR5YCksXG4gICAgcHJlc3NlZE9wYWNpdHk6IGdldCh0aGVtZSwgYGJ1dHRvbnMub3ZlcmxheXMuZmlsbGVkLnByZXNzZWQub3BhY2l0eWApLFxuICAgIHJpcHBsZUVuYWJsZWQ6IGZhbHNlLFxuICB9O1xufVxuIl19 */");
|
|
904
|
+
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZpbGxlZEJ1dHRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUTRCIiwiZmlsZSI6IkZpbGxlZEJ1dHRvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyByZWFkYWJsZUNvbG9yIH0gZnJvbSAncG9saXNoZWQnO1xuaW1wb3J0IHsgZ2V0LCBjc3MgfSBmcm9tICdAc3R5bGVkLXN5c3RlbS9jc3MnO1xuXG5pbXBvcnQgeyBCYXNlQnV0dG9uIH0gZnJvbSAnLi9CYXNlQnV0dG9uJztcbmltcG9ydCB0eXBlIHsgVGhlbWUgfSBmcm9tICcuLi90aGVtZSc7XG5pbXBvcnQgeyBhbHBoYSwgbWl4Q29sb3IgfSBmcm9tICcuLi9jb2xvcic7XG5cbmV4cG9ydCBjb25zdCBGaWxsZWRCdXR0b24gPSBzdHlsZWQoQmFzZUJ1dHRvbikoXG4gICh7IGNvbG9yID0gJ3ByaW1hcnknLCB0aGVtZSB9KSA9PlxuICAgIGNzcyh7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IGdldCh0aGVtZSwgYGNvbG9ycy4ke1N0cmluZyhjb2xvcil9YCkgfHwgY29sb3IsXG4gICAgICBjb2xvcjpcbiAgICAgICAgZ2V0KHRoZW1lLCBgY29sb3JzLm9uLiR7U3RyaW5nKGNvbG9yKX1gKSB8fFxuICAgICAgICAodHlwZW9mIGNvbG9yID09PSAnc3RyaW5nJyA/IHJlYWRhYmxlQ29sb3IoY29sb3IpIDogdW5kZWZpbmVkKSxcbiAgICAgICcmOmRpc2FibGVkJzoge1xuICAgICAgICBjb2xvcjogYWxwaGEoJ29uLnN1cmZhY2UnLCAwLjM4KSxcbiAgICAgICAgYmFja2dyb3VuZDogYGxpbmVhci1ncmFkaWVudCgke2dldCh0aGVtZSwgJ2NvbG9ycy5zdXJmYWNlJyl9LCAke2dldChcbiAgICAgICAgICB0aGVtZSxcbiAgICAgICAgICAnY29sb3JzLnN1cmZhY2UnXG4gICAgICAgICl9KSwgJHthbHBoYSgnb24uc3VyZmFjZScsIDAuMTIpKHRoZW1lKX1gLFxuICAgICAgICBiYWNrZ3JvdW5kQmxlbmRNb2RlOiAnb3ZlcmxheScsXG4gICAgICAgIGN1cnNvcjogJ2RlZmF1bHQnLFxuICAgICAgfSxcbiAgICAgICcmOmZvY3VzLXZpc2libGUnOiB7XG4gICAgICAgIG91dGxpbmVDb2xvcjogZ2V0KHRoZW1lLCBgY29sb3JzLiR7U3RyaW5nKGNvbG9yKX1gKSB8fCBjb2xvcixcbiAgICAgICAgb3V0bGluZVdpZHRoOiAyLFxuICAgICAgICBvdXRsaW5lU3R5bGU6ICdhdXRvJyxcbiAgICAgICAgb3V0bGluZU9mZnNldDogJzJweCcsXG4gICAgICB9LFxuICAgIH0pLFxuICAoeyBjb2xvciA9ICdwcmltYXJ5JyB9KSA9PlxuICAgIGNvbG9yID09PSAnc3VyZmFjZScgJiZcbiAgICBjc3MoeyBiYWNrZ3JvdW5kOiBtaXhDb2xvcignc3VyZmFjZScsICdwcmltYXJ5JywgMC4wNSkgfSlcbik7XG5cbmV4cG9ydCBmdW5jdGlvbiBnZXRSaXBwbGVQcm9wZXJ0aWVzKHRoZW1lOiBUaGVtZSkge1xuICByZXR1cm4ge1xuICAgIGhvdmVyT3BhY2l0eTogZ2V0KHRoZW1lLCBgYnV0dG9ucy5vdmVybGF5cy5maWxsZWQuaG92ZXIub3BhY2l0eWApLFxuICAgIGZvY3VzT3BhY2l0eTogZ2V0KHRoZW1lLCBgYnV0dG9ucy5vdmVybGF5cy5maWxsZWQuZm9jdXMub3BhY2l0eWApLFxuICAgIHByZXNzZWRPcGFjaXR5OiBnZXQodGhlbWUsIGBidXR0b25zLm92ZXJsYXlzLmZpbGxlZC5wcmVzc2VkLm9wYWNpdHlgKSxcbiAgICByaXBwbGVFbmFibGVkOiBmYWxzZSxcbiAgfTtcbn1cbiJdfQ== */");
|
|
898
905
|
function getRippleProperties$2(theme) {
|
|
899
906
|
return {
|
|
900
907
|
hoverOpacity: css.get(theme, `buttons.overlays.filled.hover.opacity`),
|
|
@@ -904,8 +911,10 @@ function getRippleProperties$2(theme) {
|
|
|
904
911
|
};
|
|
905
912
|
}
|
|
906
913
|
|
|
914
|
+
const FloatingActionButton = FilledButton;
|
|
907
915
|
function getRippleProperties$1(theme) {
|
|
908
|
-
return {
|
|
916
|
+
return {
|
|
917
|
+
...getRippleProperties$2(theme),
|
|
909
918
|
rippleEnabled: true
|
|
910
919
|
};
|
|
911
920
|
}
|
|
@@ -917,7 +926,7 @@ const OutlinedButton = /*#__PURE__*/_styled__default["default"](TransparentButto
|
|
|
917
926
|
label: "OutlinedButton"
|
|
918
927
|
})(css.css({
|
|
919
928
|
borderStyle: 'solid',
|
|
920
|
-
borderWidth:
|
|
929
|
+
borderWidth: '1px',
|
|
921
930
|
borderColor: 'outline',
|
|
922
931
|
boxShadow: 0,
|
|
923
932
|
'&:focus,:&active,:&hover': {
|
|
@@ -931,53 +940,20 @@ const OutlinedButton = /*#__PURE__*/_styled__default["default"](TransparentButto
|
|
|
931
940
|
borderColor: alpha('outline', 0.12),
|
|
932
941
|
cursor: 'default'
|
|
933
942
|
}
|
|
934
|
-
}),
|
|
935
|
-
isGroupedButton = false
|
|
936
|
-
}) => isGroupedButton && {
|
|
937
|
-
'[data-button-group=""] &': {
|
|
938
|
-
':first-of-type': {
|
|
939
|
-
borderTopRightRadius: 0,
|
|
940
|
-
borderBottomRightRadius: 0
|
|
941
|
-
},
|
|
942
|
-
':not(:first-of-type):not(:last-of-type)': {
|
|
943
|
-
borderRadius: 0,
|
|
944
|
-
borderRightWidth: 0,
|
|
945
|
-
borderLeftWidth: 0
|
|
946
|
-
},
|
|
947
|
-
':last-of-type': {
|
|
948
|
-
borderTopLeftRadius: 0,
|
|
949
|
-
borderBottomLeftRadius: 0,
|
|
950
|
-
borderLeftStyle: 'solid',
|
|
951
|
-
borderLeftWidth: "0.0625rem"
|
|
952
|
-
},
|
|
953
|
-
// Handling the border between enabled/disabled buttons
|
|
954
|
-
':not(:disabled):has(+ :disabled)': {
|
|
955
|
-
borderRightWidth: "0.0625rem",
|
|
956
|
-
borderRightStyle: 'solid'
|
|
957
|
-
},
|
|
958
|
-
':disabled + :not(:disabled)': {
|
|
959
|
-
borderLeftWidth: "0.0625rem",
|
|
960
|
-
borderLeftStyle: 'solid'
|
|
961
|
-
},
|
|
962
|
-
':not(:disabled) + :disabled': {
|
|
963
|
-
borderLeftWidth: "0rem"
|
|
964
|
-
},
|
|
965
|
-
':disabled:has(+ :not(:disabled))': {
|
|
966
|
-
borderRightWidth: "0rem"
|
|
967
|
-
},
|
|
968
|
-
':last-of-type:nth-of-type(2)': {
|
|
969
|
-
borderLeftWidth: "0rem"
|
|
970
|
-
}
|
|
971
|
-
}
|
|
972
|
-
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk91dGxpbmVkQnV0dG9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPOEIiLCJmaWxlIjoiT3V0bGluZWRCdXR0b24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQHN0eWxlZC1zeXN0ZW0vY3NzJztcbmltcG9ydCB7IHJlbSB9IGZyb20gJ3BvbGlzaGVkJztcblxuaW1wb3J0IHsgYWxwaGEgfSBmcm9tICcuLi9jb2xvcic7XG5pbXBvcnQgeyBUcmFuc3BhcmVudEJ1dHRvbiB9IGZyb20gJy4vVHJhbnNwYXJlbnRCdXR0b24nO1xuXG5leHBvcnQgY29uc3QgT3V0bGluZWRCdXR0b24gPSBzdHlsZWQoVHJhbnNwYXJlbnRCdXR0b24pKFxuICBjc3Moe1xuICAgIGJvcmRlclN0eWxlOiAnc29saWQnLFxuICAgIGJvcmRlcldpZHRoOiByZW0oMSksXG4gICAgYm9yZGVyQ29sb3I6ICdvdXRsaW5lJyxcbiAgICBib3hTaGFkb3c6IDAsXG4gICAgJyY6Zm9jdXMsOiZhY3RpdmUsOiZob3Zlcic6IHsgYm94U2hhZG93OiAwIH0sXG4gICAgJyY6Zm9jdXMtdmlzaWJsZSwmOmFjdGl2ZSc6IHtcbiAgICAgIGJvcmRlckNvbG9yOiAnY3VycmVudENvbG9yJyxcbiAgICB9LFxuICAgICcmOmRpc2FibGVkJzoge1xuICAgICAgY29sb3I6IGFscGhhKCdvbi5zdXJmYWNlJywgMC4zOCksXG4gICAgICBib3JkZXJDb2xvcjogYWxwaGEoJ291dGxpbmUnLCAwLjEyKSxcbiAgICAgIGN1cnNvcjogJ2RlZmF1bHQnLFxuICAgIH0sXG4gIH0pLFxuICAoeyBpc0dyb3VwZWRCdXR0b24gPSBmYWxzZSB9KSA9PlxuICAgIGlzR3JvdXBlZEJ1dHRvbiAmJiB7XG4gICAgICAnW2RhdGEtYnV0dG9uLWdyb3VwPVwiXCJdICYnOiB7XG4gICAgICAgICc6Zmlyc3Qtb2YtdHlwZSc6IHtcbiAgICAgICAgICBib3JkZXJUb3BSaWdodFJhZGl1czogMCxcbiAgICAgICAgICBib3JkZXJCb3R0b21SaWdodFJhZGl1czogMCxcbiAgICAgICAgfSxcbiAgICAgICAgJzpub3QoOmZpcnN0LW9mLXR5cGUpOm5vdCg6bGFzdC1vZi10eXBlKSc6IHtcbiAgICAgICAgICBib3JkZXJSYWRpdXM6IDAsXG4gICAgICAgICAgYm9yZGVyUmlnaHRXaWR0aDogMCxcbiAgICAgICAgICBib3JkZXJMZWZ0V2lkdGg6IDAsXG4gICAgICAgIH0sXG4gICAgICAgICc6bGFzdC1vZi10eXBlJzoge1xuICAgICAgICAgIGJvcmRlclRvcExlZnRSYWRpdXM6IDAsXG4gICAgICAgICAgYm9yZGVyQm90dG9tTGVmdFJhZGl1czogMCxcbiAgICAgICAgICBib3JkZXJMZWZ0U3R5bGU6ICdzb2xpZCcsXG4gICAgICAgICAgYm9yZGVyTGVmdFdpZHRoOiByZW0oMSksXG4gICAgICAgIH0sXG4gICAgICAgIC8vIEhhbmRsaW5nIHRoZSBib3JkZXIgYmV0d2VlbiBlbmFibGVkL2Rpc2FibGVkIGJ1dHRvbnNcbiAgICAgICAgJzpub3QoOmRpc2FibGVkKTpoYXMoKyA6ZGlzYWJsZWQpJzoge1xuICAgICAgICAgIGJvcmRlclJpZ2h0V2lkdGg6IHJlbSgxKSxcbiAgICAgICAgICBib3JkZXJSaWdodFN0eWxlOiAnc29saWQnLFxuICAgICAgICB9LFxuICAgICAgICAnOmRpc2FibGVkICsgOm5vdCg6ZGlzYWJsZWQpJzoge1xuICAgICAgICAgIGJvcmRlckxlZnRXaWR0aDogcmVtKDEpLFxuICAgICAgICAgIGJvcmRlckxlZnRTdHlsZTogJ3NvbGlkJyxcbiAgICAgICAgfSxcbiAgICAgICAgJzpub3QoOmRpc2FibGVkKSArIDpkaXNhYmxlZCc6IHtcbiAgICAgICAgICBib3JkZXJMZWZ0V2lkdGg6IHJlbSgwKSxcbiAgICAgICAgfSxcbiAgICAgICAgJzpkaXNhYmxlZDpoYXMoKyA6bm90KDpkaXNhYmxlZCkpJzoge1xuICAgICAgICAgIGJvcmRlclJpZ2h0V2lkdGg6IHJlbSgwKSxcbiAgICAgICAgfSxcbiAgICAgICAgJzpsYXN0LW9mLXR5cGU6bnRoLW9mLXR5cGUoMiknOiB7XG4gICAgICAgICAgYm9yZGVyTGVmdFdpZHRoOiByZW0oMCksXG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgIH1cbik7XG4iXX0= */");
|
|
943
|
+
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk91dGxpbmVkQnV0dG9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNOEIiLCJmaWxlIjoiT3V0bGluZWRCdXR0b24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQHN0eWxlZC1zeXN0ZW0vY3NzJztcblxuaW1wb3J0IHsgYWxwaGEgfSBmcm9tICcuLi9jb2xvcic7XG5pbXBvcnQgeyBUcmFuc3BhcmVudEJ1dHRvbiB9IGZyb20gJy4vVHJhbnNwYXJlbnRCdXR0b24nO1xuXG5leHBvcnQgY29uc3QgT3V0bGluZWRCdXR0b24gPSBzdHlsZWQoVHJhbnNwYXJlbnRCdXR0b24pKFxuICBjc3Moe1xuICAgIGJvcmRlclN0eWxlOiAnc29saWQnLFxuICAgIGJvcmRlcldpZHRoOiAnMXB4JyxcbiAgICBib3JkZXJDb2xvcjogJ291dGxpbmUnLFxuICAgIGJveFNoYWRvdzogMCxcbiAgICAnJjpmb2N1cyw6JmFjdGl2ZSw6JmhvdmVyJzogeyBib3hTaGFkb3c6IDAgfSxcbiAgICAnJjpmb2N1cy12aXNpYmxlLCY6YWN0aXZlJzoge1xuICAgICAgYm9yZGVyQ29sb3I6ICdjdXJyZW50Q29sb3InLFxuICAgIH0sXG4gICAgJyY6ZGlzYWJsZWQnOiB7XG4gICAgICBjb2xvcjogYWxwaGEoJ29uLnN1cmZhY2UnLCAwLjM4KSxcbiAgICAgIGJvcmRlckNvbG9yOiBhbHBoYSgnb3V0bGluZScsIDAuMTIpLFxuICAgICAgY3Vyc29yOiAnZGVmYXVsdCcsXG4gICAgfSxcbiAgfSlcbik7XG4iXX0= */");
|
|
973
944
|
|
|
974
945
|
function getRippleProperties(theme) {
|
|
975
|
-
return {
|
|
946
|
+
return {
|
|
947
|
+
...getRippleProperties$2(theme),
|
|
976
948
|
center: true,
|
|
977
949
|
rippleEnabled: true
|
|
978
950
|
};
|
|
979
951
|
}
|
|
980
952
|
|
|
953
|
+
const IconFilledButton = FilledButton;
|
|
954
|
+
|
|
955
|
+
const IconOutlinedButton = OutlinedButton;
|
|
956
|
+
|
|
981
957
|
const RIPPLE_BACKGROUND_COLOR = `--css-${hash__default["default"]('basic-ui-ripple-fg-bg-color')}`;
|
|
982
958
|
const RIPPLE_TRANSLATE_START = `--css-${hash__default["default"]('basic-ui-ripple-fg-translate-start')}`;
|
|
983
959
|
const RIPPLE_TRANSLATE_END = `--css-${hash__default["default"]('basic-ui-ripple-fg-translate-end')}`;
|
|
@@ -1004,12 +980,12 @@ const rippleStyle = ({
|
|
|
1004
980
|
animation,
|
|
1005
981
|
willChange: 'opacity,transform'
|
|
1006
982
|
});
|
|
1007
|
-
const Ripple = _styled__default["default"]("div", process.env.NODE_ENV === "production" ? {
|
|
983
|
+
const Ripple = /*#__PURE__*/_styled__default["default"]("div", process.env.NODE_ENV === "production" ? {
|
|
1008
984
|
target: "ebk8cct0"
|
|
1009
985
|
} : {
|
|
1010
986
|
target: "ebk8cct0",
|
|
1011
987
|
label: "Ripple"
|
|
1012
|
-
})(rippleStyle, "pointer-events:none;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
988
|
+
})(rippleStyle, "pointer-events:none;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlJpcHBsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEJzQiIsImZpbGUiOiJSaXBwbGUudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHR5cGUgeyBDU1NPYmplY3QgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7XG4gIFJJUFBMRV9CQUNLR1JPVU5EX0NPTE9SLFxuICBSSVBQTEVfU0laRSxcbiAgUklQUExFX1BPU0lUSU9OLFxufSBmcm9tICcuL2NvbnN0YW50cyc7XG5cbmV4cG9ydCBjb25zdCByaXBwbGVTdHlsZSA9ICh7XG4gIGFuaW1hdGlvbixcbn06IHtcbiAgYW5pbWF0aW9uPzogc3RyaW5nO1xufSk6IENTU09iamVjdCA9PiAoe1xuICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgYm94U2l6aW5nOiAnY29udGVudC1ib3gnLFxuICBkaXNwbGF5OiAnYmxvY2snLFxuICBjb250ZW50OiAnXCJcIicsXG4gIHdpZHRoOiBgdmFyKCR7UklQUExFX1NJWkV9KWAsXG4gIGhlaWdodDogYHZhcigke1JJUFBMRV9TSVpFfSlgLFxuICB0b3A6IGB2YXIoJHtSSVBQTEVfUE9TSVRJT059KWAsXG4gIGxlZnQ6IGB2YXIoJHtSSVBQTEVfUE9TSVRJT059KWAsXG4gIGJhY2tncm91bmRDb2xvcjogYHZhcigke1JJUFBMRV9CQUNLR1JPVU5EX0NPTE9SfSlgLFxuICB0cmFuc2Zvcm1PcmlnaW46ICdjZW50ZXIgY2VudGVyJyxcbiAgb3BhY2l0eTogMCxcbiAgYm9yZGVyUmFkaXVzOiAnOTk5OTk5cHgnLFxuICBhbmltYXRpb24sXG4gIHdpbGxDaGFuZ2U6ICdvcGFjaXR5LHRyYW5zZm9ybScsXG59KTtcblxuZXhwb3J0IGNvbnN0IFJpcHBsZSA9IHN0eWxlZC5kaXY8eyBhbmltYXRpb24/OiBzdHJpbmcgfT4ocmlwcGxlU3R5bGUsIHtcbiAgcG9pbnRlckV2ZW50czogJ25vbmUnLFxufSk7XG4iXX0= */"));
|
|
1013
989
|
|
|
1014
990
|
const radiusIn = react.keyframes({
|
|
1015
991
|
from: {
|
|
@@ -1043,24 +1019,25 @@ const defaultRipple = {
|
|
|
1043
1019
|
scale: 0,
|
|
1044
1020
|
centerX: 0,
|
|
1045
1021
|
centerY: 0
|
|
1046
|
-
};
|
|
1022
|
+
};
|
|
1023
|
+
|
|
1024
|
+
// Surface diameter is treated differently for unbounded vs. bounded ripples.
|
|
1047
1025
|
// Unbounded ripple diameter is calculated smaller since the surface is expected to already be padded appropriately
|
|
1048
1026
|
// to extend the hitbox, and the ripple is expected to meet the edges of the padded hitbox (which is typically
|
|
1049
1027
|
// square). Bounded ripples, on the other hand, are fully expected to expand beyond the surface's longest diameter
|
|
1050
1028
|
// (calculated based on the diagonal plus a constant padding), and are clipped at the surface's border via
|
|
1051
1029
|
// `overflow: hidden`.
|
|
1052
|
-
|
|
1053
1030
|
const getBoundedRadius = (rect, padding) => {
|
|
1054
1031
|
const hypotenuse = Math.sqrt(Math.pow(rect.width, 2) + Math.pow(rect.height, 2));
|
|
1055
1032
|
return hypotenuse + padding;
|
|
1056
1033
|
};
|
|
1057
|
-
|
|
1058
1034
|
function getScale(rect) {
|
|
1059
1035
|
const maxDim = Math.max(rect.height, rect.width);
|
|
1060
1036
|
const padding = 10;
|
|
1061
1037
|
const initialOriginScale = 0.6;
|
|
1062
|
-
const maxRadius = getBoundedRadius(rect, padding);
|
|
1038
|
+
const maxRadius = getBoundedRadius(rect, padding);
|
|
1063
1039
|
|
|
1040
|
+
// Ripple is sized as a fraction of the largest dimension of the surface, then scales up using a CSS scale transform
|
|
1064
1041
|
const initialSize = Math.floor(maxDim * initialOriginScale);
|
|
1065
1042
|
return {
|
|
1066
1043
|
size: initialSize,
|
|
@@ -1069,7 +1046,6 @@ function getScale(rect) {
|
|
|
1069
1046
|
centerY: rect.height / 2
|
|
1070
1047
|
};
|
|
1071
1048
|
}
|
|
1072
|
-
|
|
1073
1049
|
function calculateRipplePosition(rect, clientX, clientY, center = false) {
|
|
1074
1050
|
const rippleStart = center ? {
|
|
1075
1051
|
x: rect.width / 2,
|
|
@@ -1084,94 +1060,90 @@ function calculateRipplePosition(rect, clientX, clientY, center = false) {
|
|
|
1084
1060
|
...getScale(rect)
|
|
1085
1061
|
};
|
|
1086
1062
|
}
|
|
1087
|
-
|
|
1088
1063
|
const useRipple = opts => {
|
|
1089
1064
|
const {
|
|
1090
1065
|
opacity,
|
|
1091
1066
|
backgroundColor,
|
|
1092
1067
|
enterDuration = 225,
|
|
1093
1068
|
leaveDuration = 150
|
|
1094
|
-
} = opts;
|
|
1069
|
+
} = opts;
|
|
1070
|
+
|
|
1071
|
+
// rippleState must be a ref, because it accesses the current value
|
|
1095
1072
|
// inside closures... if we use state, it's gonna recapture
|
|
1096
1073
|
// the state variable and won't work correctly
|
|
1097
|
-
|
|
1098
1074
|
const rippleState = react$1.useRef('left');
|
|
1099
1075
|
const [ripple, setRipple] = react$1.useState(defaultRipple);
|
|
1100
|
-
const leavingTimeout = react$1.useRef();
|
|
1101
|
-
const enteringTimeout = react$1.useRef();
|
|
1102
|
-
const restartTimeout = react$1.useRef();
|
|
1103
|
-
const shouldLeave = react$1.useRef(false);
|
|
1076
|
+
const leavingTimeout = react$1.useRef(undefined);
|
|
1077
|
+
const enteringTimeout = react$1.useRef(undefined);
|
|
1078
|
+
const restartTimeout = react$1.useRef(undefined);
|
|
1079
|
+
const shouldLeave = react$1.useRef(false);
|
|
1104
1080
|
|
|
1081
|
+
// clear timeouts to avoid setting state on unmounted component
|
|
1105
1082
|
react$1.useEffect(() => {
|
|
1106
1083
|
return () => {
|
|
1107
1084
|
restartTimeout.current && cancelAnimationFrame(restartTimeout.current);
|
|
1108
1085
|
clearTimeout(enteringTimeout.current);
|
|
1109
1086
|
clearTimeout(leavingTimeout.current);
|
|
1110
1087
|
};
|
|
1111
|
-
}, []);
|
|
1088
|
+
}, []);
|
|
1112
1089
|
|
|
1090
|
+
// State handling
|
|
1113
1091
|
const setLeft = () => {
|
|
1114
1092
|
rippleState.current = 'left';
|
|
1115
|
-
setRipple({
|
|
1093
|
+
setRipple({
|
|
1094
|
+
...defaultRipple
|
|
1116
1095
|
});
|
|
1117
1096
|
};
|
|
1118
|
-
|
|
1119
1097
|
const setLeaving = () => {
|
|
1120
1098
|
clearTimeout(enteringTimeout.current);
|
|
1121
1099
|
rippleState.current = 'leaving';
|
|
1122
|
-
setRipple(ripple => ({
|
|
1100
|
+
setRipple(ripple => ({
|
|
1101
|
+
...ripple
|
|
1123
1102
|
}));
|
|
1124
1103
|
leavingTimeout.current = window.setTimeout(setLeft, leaveDuration);
|
|
1125
1104
|
};
|
|
1126
|
-
|
|
1127
1105
|
const setEntered = () => {
|
|
1128
1106
|
rippleState.current = 'entered';
|
|
1129
|
-
setRipple(ripple => ({
|
|
1107
|
+
setRipple(ripple => ({
|
|
1108
|
+
...ripple
|
|
1130
1109
|
}));
|
|
1131
|
-
|
|
1132
1110
|
if (shouldLeave.current) {
|
|
1133
1111
|
setLeaving();
|
|
1134
1112
|
}
|
|
1135
1113
|
};
|
|
1136
|
-
|
|
1137
1114
|
const deactivate = () => {
|
|
1138
1115
|
shouldLeave.current = true;
|
|
1139
|
-
|
|
1140
1116
|
if (rippleState.current === 'entered') {
|
|
1141
1117
|
setLeaving();
|
|
1142
1118
|
}
|
|
1143
1119
|
};
|
|
1144
|
-
|
|
1145
1120
|
const activate = (rect, clientX, clientY, center = false) => {
|
|
1146
1121
|
clearTimeout(leavingTimeout.current);
|
|
1147
1122
|
clearTimeout(enteringTimeout.current);
|
|
1148
1123
|
shouldLeave.current = false;
|
|
1149
1124
|
rippleState.current = 'restart';
|
|
1150
|
-
setRipple({
|
|
1125
|
+
setRipple({
|
|
1126
|
+
...defaultRipple
|
|
1151
1127
|
});
|
|
1152
1128
|
restartTimeout.current = requestAnimationFrame(() => {
|
|
1153
1129
|
rippleState.current = 'entering';
|
|
1154
1130
|
setRipple(calculateRipplePosition(rect, clientX, clientY, center));
|
|
1155
1131
|
enteringTimeout.current = window.setTimeout(setEntered, enterDuration);
|
|
1156
1132
|
});
|
|
1157
|
-
};
|
|
1158
|
-
|
|
1133
|
+
};
|
|
1159
1134
|
|
|
1135
|
+
// Styling
|
|
1160
1136
|
let animation = undefined;
|
|
1161
|
-
|
|
1162
1137
|
switch (rippleState.current) {
|
|
1163
1138
|
case 'entering':
|
|
1164
1139
|
case 'entered':
|
|
1165
1140
|
animation = `${radiusIn} ${enterDuration}ms forwards,` + `${opacityIn} ${enterDuration / 3}ms forwards`;
|
|
1166
1141
|
break;
|
|
1167
|
-
|
|
1168
1142
|
case 'leaving':
|
|
1169
1143
|
animation = `${radiusIn} ${enterDuration}ms forwards,` + `${opacityOut} ${leaveDuration}ms forwards`;
|
|
1170
1144
|
break;
|
|
1171
1145
|
}
|
|
1172
|
-
|
|
1173
1146
|
let style = {};
|
|
1174
|
-
|
|
1175
1147
|
switch (rippleState.current) {
|
|
1176
1148
|
case 'entering':
|
|
1177
1149
|
case 'entered':
|
|
@@ -1187,64 +1159,57 @@ const useRipple = opts => {
|
|
|
1187
1159
|
};
|
|
1188
1160
|
break;
|
|
1189
1161
|
}
|
|
1190
|
-
|
|
1191
1162
|
return {
|
|
1192
1163
|
activate,
|
|
1193
1164
|
deactivate,
|
|
1194
1165
|
style,
|
|
1195
|
-
animation
|
|
1196
|
-
|
|
1166
|
+
animation
|
|
1167
|
+
// key: counter,
|
|
1197
1168
|
};
|
|
1198
1169
|
};
|
|
1199
1170
|
|
|
1200
1171
|
const disabledHandler = () => {
|
|
1201
1172
|
/* When disabled, we don't wanna handle neither keyDown, nor pointerDown */
|
|
1202
1173
|
};
|
|
1203
|
-
|
|
1204
1174
|
function useRippleHandlers(opts) {
|
|
1205
1175
|
const {
|
|
1206
1176
|
activate,
|
|
1207
1177
|
deactivate,
|
|
1208
1178
|
...rest
|
|
1209
|
-
} = useRipple(opts);
|
|
1179
|
+
} = useRipple(opts);
|
|
1210
1180
|
|
|
1181
|
+
// Pointer activation
|
|
1211
1182
|
const handlePointerUp = () => {
|
|
1212
1183
|
window.removeEventListener('pointerup', handlePointerUp);
|
|
1213
1184
|
window.removeEventListener('pointercancel', handlePointerUp);
|
|
1214
1185
|
deactivate();
|
|
1215
1186
|
};
|
|
1216
|
-
|
|
1217
1187
|
const handlePointerDown = e => {
|
|
1218
1188
|
const rect = e.currentTarget.getBoundingClientRect();
|
|
1219
1189
|
activate(rect, e.clientX, e.clientY, opts.center);
|
|
1220
1190
|
window.addEventListener('pointerup', handlePointerUp);
|
|
1221
1191
|
window.addEventListener('pointercancel', handlePointerUp);
|
|
1222
|
-
};
|
|
1223
|
-
|
|
1192
|
+
};
|
|
1224
1193
|
|
|
1194
|
+
// Keyboard activation
|
|
1225
1195
|
const keyReleased = react$1.useRef(true);
|
|
1226
|
-
|
|
1227
1196
|
const handleKeyUp = e => {
|
|
1228
1197
|
if (e.key !== ' ') {
|
|
1229
1198
|
return;
|
|
1230
1199
|
}
|
|
1231
|
-
|
|
1232
1200
|
window.removeEventListener('keyup', handleKeyUp);
|
|
1233
1201
|
keyReleased.current = true;
|
|
1234
1202
|
deactivate();
|
|
1235
1203
|
};
|
|
1236
|
-
|
|
1237
1204
|
const handleKeyDown = e => {
|
|
1238
1205
|
if (e.key !== ' ' || !keyReleased.current) {
|
|
1239
1206
|
return;
|
|
1240
1207
|
}
|
|
1241
|
-
|
|
1242
1208
|
const rect = e.currentTarget.getBoundingClientRect();
|
|
1243
1209
|
keyReleased.current = false;
|
|
1244
1210
|
activate(rect, 0, 0, true);
|
|
1245
1211
|
window.addEventListener('keyup', handleKeyUp);
|
|
1246
1212
|
};
|
|
1247
|
-
|
|
1248
1213
|
return {
|
|
1249
1214
|
handleKeyDown: opts.disabled ? disabledHandler : handleKeyDown,
|
|
1250
1215
|
handlePointerDown: opts.disabled ? disabledHandler : handlePointerDown,
|
|
@@ -1273,13 +1238,11 @@ function useRippleSurface(opts = {}) {
|
|
|
1273
1238
|
} = opts;
|
|
1274
1239
|
const theme = useTheme();
|
|
1275
1240
|
rippleColor = css.get(theme, `colors.${rippleColor}`) || rippleColor;
|
|
1276
|
-
|
|
1277
1241
|
if (disabled) {
|
|
1278
1242
|
hoverOpacity = baseOpacity;
|
|
1279
1243
|
focusOpacity = baseOpacity;
|
|
1280
1244
|
pressedOpacity = baseOpacity;
|
|
1281
1245
|
}
|
|
1282
|
-
|
|
1283
1246
|
const {
|
|
1284
1247
|
handleKeyDown,
|
|
1285
1248
|
handlePointerDown,
|
|
@@ -1347,14 +1310,16 @@ function useRippleSurface(opts = {}) {
|
|
|
1347
1310
|
},
|
|
1348
1311
|
// ripple
|
|
1349
1312
|
...(rippleEnabled && {
|
|
1350
|
-
'&::after': {
|
|
1313
|
+
'&::after': {
|
|
1314
|
+
...rippleStyle({
|
|
1351
1315
|
animation
|
|
1352
1316
|
})
|
|
1353
1317
|
}
|
|
1354
1318
|
})
|
|
1355
1319
|
}), [animation, baseOpacity, focusOpacity, focusPseudoClass, hoverOpacity, pressedOpacity, rippleColor, rippleEnabled]);
|
|
1356
1320
|
return {
|
|
1357
|
-
style: {
|
|
1321
|
+
style: {
|
|
1322
|
+
...animationStyle,
|
|
1358
1323
|
...style
|
|
1359
1324
|
},
|
|
1360
1325
|
onKeyDown: core.wrapEvent(onKeyDown, handleKeyDown),
|
|
@@ -1370,27 +1335,16 @@ const RippleBox = /*#__PURE__*/react$1.forwardRef(function RippleBox(props, forw
|
|
|
1370
1335
|
// Cherry picking the ripple props to prevent it from falling down to
|
|
1371
1336
|
// the Box component
|
|
1372
1337
|
onKeyDown,
|
|
1373
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
1374
1338
|
onPointerDown,
|
|
1375
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
1376
1339
|
baseOpacity,
|
|
1377
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
1378
1340
|
hoverOpacity,
|
|
1379
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
1380
1341
|
focusOpacity,
|
|
1381
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
1382
1342
|
pressedOpacity,
|
|
1383
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
1384
1343
|
rippleColor,
|
|
1385
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
1386
1344
|
center,
|
|
1387
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
1388
1345
|
disabled,
|
|
1389
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
1390
1346
|
rippleEnabled,
|
|
1391
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
1392
1347
|
style,
|
|
1393
|
-
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
1394
1348
|
...otherProps
|
|
1395
1349
|
} = props;
|
|
1396
1350
|
const {
|
|
@@ -1400,7 +1354,8 @@ const RippleBox = /*#__PURE__*/react$1.forwardRef(function RippleBox(props, forw
|
|
|
1400
1354
|
return /*#__PURE__*/jsxRuntime.jsx(Box, {
|
|
1401
1355
|
as: as,
|
|
1402
1356
|
ref: forwardedRef,
|
|
1403
|
-
__css: {
|
|
1357
|
+
__css: {
|
|
1358
|
+
...rippleCss,
|
|
1404
1359
|
...__css
|
|
1405
1360
|
},
|
|
1406
1361
|
disabled,
|
|
@@ -1409,6 +1364,8 @@ const RippleBox = /*#__PURE__*/react$1.forwardRef(function RippleBox(props, forw
|
|
|
1409
1364
|
});
|
|
1410
1365
|
});
|
|
1411
1366
|
|
|
1367
|
+
// ButtonGroup Component
|
|
1368
|
+
|
|
1412
1369
|
const ButtonGroupContext = /*#__PURE__*/react$1.createContext(null);
|
|
1413
1370
|
ButtonGroupContext.displayName = 'ButtonGroupContext';
|
|
1414
1371
|
const useButtonGroupContext = () => react$1.useContext(ButtonGroupContext);
|
|
@@ -1417,40 +1374,54 @@ const componentMapping = {
|
|
|
1417
1374
|
text: TransparentButton,
|
|
1418
1375
|
outlined: OutlinedButton,
|
|
1419
1376
|
filled: FilledButton,
|
|
1420
|
-
fab:
|
|
1421
|
-
'fab-mini': FilledButton,
|
|
1422
|
-
'fab-large': FilledButton,
|
|
1377
|
+
fab: FloatingActionButton,
|
|
1423
1378
|
'fab-extended': FilledButton,
|
|
1424
|
-
icon: TransparentButton
|
|
1379
|
+
icon: TransparentButton,
|
|
1380
|
+
'icon-filled': IconFilledButton,
|
|
1381
|
+
'icon-outlined': IconOutlinedButton
|
|
1425
1382
|
};
|
|
1426
1383
|
const rippleMapping = {
|
|
1427
1384
|
text: getRippleProperties$3,
|
|
1428
1385
|
outlined: getRippleProperties$3,
|
|
1429
1386
|
filled: getRippleProperties$2,
|
|
1430
1387
|
fab: getRippleProperties$1,
|
|
1431
|
-
'fab-
|
|
1432
|
-
|
|
1433
|
-
'
|
|
1434
|
-
icon: getRippleProperties
|
|
1388
|
+
'fab-extended': getRippleProperties$1,
|
|
1389
|
+
icon: getRippleProperties,
|
|
1390
|
+
'icon-filled': getRippleProperties,
|
|
1391
|
+
'icon-outlined': getRippleProperties
|
|
1435
1392
|
};
|
|
1436
|
-
|
|
1437
1393
|
function getFallbackElevation(variant = 'text') {
|
|
1438
|
-
if (variant === '
|
|
1439
|
-
return '
|
|
1394
|
+
if (variant === 'fab' || variant === 'fab-extended') {
|
|
1395
|
+
return 'floating';
|
|
1440
1396
|
}
|
|
1441
|
-
|
|
1442
|
-
|
|
1397
|
+
if (variant === 'filled') {
|
|
1398
|
+
return 'default';
|
|
1399
|
+
}
|
|
1400
|
+
return 'none';
|
|
1401
|
+
}
|
|
1402
|
+
function getFallbackSize(variant = 'text') {
|
|
1403
|
+
if (variant === 'fab-extended') {
|
|
1404
|
+
return 'md';
|
|
1405
|
+
}
|
|
1406
|
+
return 'sm';
|
|
1407
|
+
}
|
|
1408
|
+
function getFallbackShape(variant = 'text') {
|
|
1409
|
+
if (variant === 'fab' || variant === 'fab-extended') {
|
|
1410
|
+
return 'square';
|
|
1411
|
+
}
|
|
1412
|
+
return 'rounded';
|
|
1443
1413
|
}
|
|
1444
|
-
|
|
1445
1414
|
const Button = /*#__PURE__*/react$1.forwardRef(function Button(props, forwardedRef) {
|
|
1446
1415
|
const buttonGroup = useButtonGroupContext();
|
|
1447
1416
|
const {
|
|
1448
1417
|
children,
|
|
1449
|
-
variant = buttonGroup?.
|
|
1418
|
+
variant = buttonGroup?.buttonVariant || 'text',
|
|
1450
1419
|
onPointerDown: onPointerDownProp,
|
|
1451
1420
|
onKeyDown: onKeyDownProp,
|
|
1452
1421
|
color = 'primary',
|
|
1453
1422
|
disabled = false,
|
|
1423
|
+
size = getFallbackSize(props.variant),
|
|
1424
|
+
shape = getFallbackShape(props.variant),
|
|
1454
1425
|
elevation = getFallbackElevation(props.variant),
|
|
1455
1426
|
style: styleProp,
|
|
1456
1427
|
...otherProps
|
|
@@ -1458,13 +1429,18 @@ const Button = /*#__PURE__*/react$1.forwardRef(function Button(props, forwardedR
|
|
|
1458
1429
|
const theme = useTheme();
|
|
1459
1430
|
const Comp = componentMapping[variant];
|
|
1460
1431
|
const getRippleProperties = rippleMapping[variant];
|
|
1461
|
-
const rippleProps = useRippleSurface({
|
|
1432
|
+
const rippleProps = useRippleSurface({
|
|
1433
|
+
...(getRippleProperties?.(theme) ?? {}),
|
|
1462
1434
|
rippleColor: 'currentColor',
|
|
1463
1435
|
disabled,
|
|
1464
1436
|
style: styleProp,
|
|
1465
1437
|
onKeyDown: onKeyDownProp,
|
|
1466
1438
|
onPointerDown: onPointerDownProp
|
|
1467
1439
|
});
|
|
1440
|
+
if (!Comp || !getRippleProperties) {
|
|
1441
|
+
console.warn(`Unsupported button variant: ${variant}.`);
|
|
1442
|
+
return null;
|
|
1443
|
+
}
|
|
1468
1444
|
return /*#__PURE__*/jsxRuntime.jsx(Comp, {
|
|
1469
1445
|
ref: forwardedRef,
|
|
1470
1446
|
variant: variant,
|
|
@@ -1472,6 +1448,8 @@ const Button = /*#__PURE__*/react$1.forwardRef(function Button(props, forwardedR
|
|
|
1472
1448
|
disabled: disabled,
|
|
1473
1449
|
"aria-disabled": disabled ? 'true' : undefined,
|
|
1474
1450
|
color: color,
|
|
1451
|
+
size: size,
|
|
1452
|
+
shape: shape,
|
|
1475
1453
|
elevation: elevation,
|
|
1476
1454
|
isGroupedButton: Boolean(buttonGroup),
|
|
1477
1455
|
...rippleProps,
|
|
@@ -1480,29 +1458,158 @@ const Button = /*#__PURE__*/react$1.forwardRef(function Button(props, forwardedR
|
|
|
1480
1458
|
});
|
|
1481
1459
|
});
|
|
1482
1460
|
|
|
1461
|
+
function getButtonGroupVariant(variant) {
|
|
1462
|
+
if (variant !== 'standard' && variant !== 'connected' && variant !== 'split') {
|
|
1463
|
+
console.warn(`Invalid ButtonGroup variant: ${variant}. Expected 'standard', 'connected', or 'split'. Defaulting to 'standard'.`);
|
|
1464
|
+
return 'standard';
|
|
1465
|
+
}
|
|
1466
|
+
return variant;
|
|
1467
|
+
}
|
|
1483
1468
|
const ButtonGroup = /*#__PURE__*/react$1.forwardRef(function ButtonGroup(props, forwardedRef) {
|
|
1484
1469
|
const {
|
|
1485
|
-
as
|
|
1486
|
-
|
|
1470
|
+
as = 'div',
|
|
1471
|
+
buttonVariant = 'filled',
|
|
1472
|
+
variant: variantProp = 'standard',
|
|
1487
1473
|
direction = 'row',
|
|
1474
|
+
connected = false,
|
|
1488
1475
|
...otherProps
|
|
1489
1476
|
} = props;
|
|
1477
|
+
const variant = getButtonGroupVariant(variantProp);
|
|
1490
1478
|
const value = react$1.useMemo(() => ({
|
|
1491
1479
|
direction,
|
|
1492
|
-
variant
|
|
1493
|
-
|
|
1480
|
+
variant,
|
|
1481
|
+
buttonVariant,
|
|
1482
|
+
connected
|
|
1483
|
+
}), [direction, variant, buttonVariant, connected]);
|
|
1494
1484
|
return /*#__PURE__*/jsxRuntime.jsx(ButtonGroupContext.Provider, {
|
|
1495
1485
|
value: value,
|
|
1496
|
-
children: /*#__PURE__*/jsxRuntime.jsx(
|
|
1486
|
+
children: /*#__PURE__*/jsxRuntime.jsx(Box, {
|
|
1487
|
+
as: as,
|
|
1497
1488
|
ref: forwardedRef,
|
|
1498
1489
|
role: "group",
|
|
1490
|
+
__css: {
|
|
1491
|
+
display: 'flex',
|
|
1492
|
+
flexDirection: direction,
|
|
1493
|
+
gap: variant === 'standard' ? 2 : "0.125rem",
|
|
1494
|
+
...(variant === 'standard' ? {
|
|
1495
|
+
'[data-button-grouped=""]': {
|
|
1496
|
+
'--btn-inner-radius': 'var(--btn-standard-inner-radius)',
|
|
1497
|
+
borderRadius: 'var(--btn-pill-radius)'
|
|
1498
|
+
},
|
|
1499
|
+
'[data-button-grouped=""][data-button-shape="square"], [data-button-grouped=""][aria-pressed="true"]': {
|
|
1500
|
+
borderRadius: 'var(--btn-inner-radius)'
|
|
1501
|
+
},
|
|
1502
|
+
'[data-button-grouped=""][data-button-shape="square"][aria-pressed="true"]': {
|
|
1503
|
+
borderRadius: 'var(--btn-pill-radius)'
|
|
1504
|
+
}
|
|
1505
|
+
} : {
|
|
1506
|
+
'[data-button-grouped=""]': {
|
|
1507
|
+
'--btn-inner-radius': variant === 'connected' ? 'var(--btn-connected-inner-radius)' : 'var(--btn-split-inner-radius)',
|
|
1508
|
+
borderRadius: 'var(--btn-inner-radius)'
|
|
1509
|
+
},
|
|
1510
|
+
'[data-button-grouped=""]:first-of-type': {
|
|
1511
|
+
borderTopLeftRadius: 'var(--btn-pill-radius)',
|
|
1512
|
+
borderBottomLeftRadius: 'var(--btn-pill-radius)'
|
|
1513
|
+
},
|
|
1514
|
+
'[data-button-grouped=""]:last-of-type': {
|
|
1515
|
+
borderTopRightRadius: 'var(--btn-pill-radius)',
|
|
1516
|
+
borderBottomRightRadius: 'var(--btn-pill-radius)'
|
|
1517
|
+
},
|
|
1518
|
+
'[data-button-grouped=""][data-button-shape="square"]': {
|
|
1519
|
+
borderRadius: 'var(--btn-inner-radius)'
|
|
1520
|
+
},
|
|
1521
|
+
'[data-button-grouped=""][aria-pressed="true"]': {
|
|
1522
|
+
borderRadius: 'var(--btn-pill-radius)'
|
|
1523
|
+
},
|
|
1524
|
+
'[data-split-menu-button=""]': {
|
|
1525
|
+
'&[data-button-size="xs"], &[data-button-size="sm"]': {
|
|
1526
|
+
pl: "0.75rem",
|
|
1527
|
+
pr: "0.875rem",
|
|
1528
|
+
'&[aria-expanded="true"]': {
|
|
1529
|
+
px: "0.8125rem"
|
|
1530
|
+
},
|
|
1531
|
+
'& svg': {
|
|
1532
|
+
width: "1.375rem",
|
|
1533
|
+
height: "1.375rem"
|
|
1534
|
+
}
|
|
1535
|
+
},
|
|
1536
|
+
'&[data-button-size="md"]': {
|
|
1537
|
+
pl: "0.8125rem",
|
|
1538
|
+
pr: "1.0625rem",
|
|
1539
|
+
'&[aria-expanded="true"]': {
|
|
1540
|
+
px: "0.9375rem"
|
|
1541
|
+
},
|
|
1542
|
+
'& svg': {
|
|
1543
|
+
width: "1.625rem",
|
|
1544
|
+
height: "1.625rem"
|
|
1545
|
+
}
|
|
1546
|
+
},
|
|
1547
|
+
'&[data-button-size="lg"]': {
|
|
1548
|
+
pl: "1.625rem",
|
|
1549
|
+
pr: "2rem",
|
|
1550
|
+
'&[aria-expanded="true"]': {
|
|
1551
|
+
px: "1.8125rem"
|
|
1552
|
+
},
|
|
1553
|
+
'& svg': {
|
|
1554
|
+
width: "2.375rem",
|
|
1555
|
+
height: "2.375rem"
|
|
1556
|
+
}
|
|
1557
|
+
},
|
|
1558
|
+
'&[data-button-size="xl"]': {
|
|
1559
|
+
pl: "2.3125rem",
|
|
1560
|
+
pr: "3.125rem",
|
|
1561
|
+
'&[aria-expanded="true"]': {
|
|
1562
|
+
px: "2.6875rem"
|
|
1563
|
+
},
|
|
1564
|
+
'& svg': {
|
|
1565
|
+
width: "3.0625rem",
|
|
1566
|
+
height: "3.0625rem"
|
|
1567
|
+
}
|
|
1568
|
+
},
|
|
1569
|
+
'&[aria-expanded="true"]': {
|
|
1570
|
+
borderRadius: 'var(--btn-pill-radius)'
|
|
1571
|
+
},
|
|
1572
|
+
'&[aria-expanded="true"] > svg': {
|
|
1573
|
+
transform: 'rotate(180deg)',
|
|
1574
|
+
transition: 'transform 200ms'
|
|
1575
|
+
}
|
|
1576
|
+
}
|
|
1577
|
+
})
|
|
1578
|
+
},
|
|
1499
1579
|
"data-button-group": "",
|
|
1500
1580
|
"data-button-group-direction": direction,
|
|
1581
|
+
"data-button-group-variant": variant,
|
|
1501
1582
|
...otherProps
|
|
1502
1583
|
})
|
|
1503
1584
|
});
|
|
1504
1585
|
});
|
|
1505
1586
|
|
|
1587
|
+
const SplitButtonGroup = /*#__PURE__*/react$1.forwardRef(function SplitButtonGroup(props, ref) {
|
|
1588
|
+
return /*#__PURE__*/jsxRuntime.jsx(ButtonGroup, {
|
|
1589
|
+
ref: ref,
|
|
1590
|
+
variant: "split",
|
|
1591
|
+
...props
|
|
1592
|
+
});
|
|
1593
|
+
});
|
|
1594
|
+
const SplitButton = /*#__PURE__*/react$1.forwardRef(function SplitButton(props, ref) {
|
|
1595
|
+
return /*#__PURE__*/jsxRuntime.jsx(Button, {
|
|
1596
|
+
ref: ref,
|
|
1597
|
+
...props
|
|
1598
|
+
});
|
|
1599
|
+
});
|
|
1600
|
+
const SplitMenuButton = /*#__PURE__*/react$1.forwardRef(function SplitMenuButton({
|
|
1601
|
+
as = 'button',
|
|
1602
|
+
...props
|
|
1603
|
+
}, ref) {
|
|
1604
|
+
return /*#__PURE__*/jsxRuntime.jsx(core.MenuButton, {
|
|
1605
|
+
as: Button,
|
|
1606
|
+
innerAs: as,
|
|
1607
|
+
ref: ref,
|
|
1608
|
+
"data-split-menu-button": "",
|
|
1609
|
+
...props
|
|
1610
|
+
});
|
|
1611
|
+
});
|
|
1612
|
+
|
|
1506
1613
|
const AppBarButton = /*#__PURE__*/react$1.forwardRef(function AppBarButton(props, forwardedRef) {
|
|
1507
1614
|
const {
|
|
1508
1615
|
variant = 'icon',
|
|
@@ -1541,11 +1648,9 @@ const Text = /*#__PURE__*/react$1.forwardRef(function Text(props, forwardedRef)
|
|
|
1541
1648
|
...otherProps
|
|
1542
1649
|
} = props;
|
|
1543
1650
|
let Comp = as;
|
|
1544
|
-
|
|
1545
1651
|
if (!Comp) {
|
|
1546
1652
|
Comp = mappings[variant] || 'p';
|
|
1547
1653
|
}
|
|
1548
|
-
|
|
1549
1654
|
return /*#__PURE__*/jsxRuntime.jsx(Box, {
|
|
1550
1655
|
as: Comp,
|
|
1551
1656
|
ref: forwardedRef,
|
|
@@ -1747,7 +1852,7 @@ const BaseLine = () => {
|
|
|
1747
1852
|
'[hidden]': {
|
|
1748
1853
|
display: 'none'
|
|
1749
1854
|
}
|
|
1750
|
-
}, process.env.NODE_ENV === "production" ? "" : ";label:BaseLine;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
1855
|
+
}, process.env.NODE_ENV === "production" ? "" : ";label:BaseLine;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJhc2VMaW5lLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZUSIsImZpbGUiOiJCYXNlTGluZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBjc3MsIGdldCB9IGZyb20gJ0BzdHlsZWQtc3lzdGVtL2Nzcyc7XG5cbmltcG9ydCB7IHVzZVRoZW1lIH0gZnJvbSAnLi4vdGhlbWUnO1xuXG5leHBvcnQgY29uc3QgQmFzZUxpbmUgPSAoKSA9PiB7XG4gIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAgPEdsb2JhbCBzdHlsZXM9e2NzcyhnZXQodGhlbWUsICdzdHlsZXMucm9vdCcsIHt9KSl9IC8+XG4gICAgICB7Lyogbm9ybWFsaXplLmNzcyAqL31cbiAgICAgIDxHbG9iYWxcbiAgICAgICAgc3R5bGVzPXt7XG4gICAgICAgICAgaHRtbDogeyBsaW5lSGVpZ2h0OiAnMS4xNScsIFdlYmtpdFRleHRTaXplQWRqdXN0OiAnMTAwJScgfSxcbiAgICAgICAgICBib2R5OiB7XG4gICAgICAgICAgICBtYXJnaW46ICcwJyxcbiAgICAgICAgICB9LFxuICAgICAgICAgIG1haW46IHsgZGlzcGxheTogJ2Jsb2NrJyB9LFxuICAgICAgICAgIGgxOiB7IGZvbnRTaXplOiAnMmVtJywgbWFyZ2luOiAnMC42N2VtIDAnIH0sXG4gICAgICAgICAgaHI6IHsgYm94U2l6aW5nOiAnY29udGVudC1ib3gnLCBoZWlnaHQ6ICcwJywgb3ZlcmZsb3c6ICd2aXNpYmxlJyB9LFxuICAgICAgICAgIHByZTogeyBmb250RmFtaWx5OiAnbW9ub3NwYWNlLCBtb25vc3BhY2UnLCBmb250U2l6ZTogJzFlbScgfSxcbiAgICAgICAgICBhOiB7IGJhY2tncm91bmRDb2xvcjogJ3RyYW5zcGFyZW50JyB9LFxuICAgICAgICAgICdhYmJyW3RpdGxlXSc6IHtcbiAgICAgICAgICAgIGJvcmRlckJvdHRvbTogJ25vbmUnLFxuICAgICAgICAgICAgdGV4dERlY29yYXRpb246IFsndW5kZXJsaW5lJywgJ3VuZGVybGluZSBkb3R0ZWQnXSxcbiAgICAgICAgICB9LFxuICAgICAgICAgICdiLHN0cm9uZyc6IHsgZm9udFdlaWdodDogJ2JvbGRlcicgfSxcbiAgICAgICAgICAnY29kZSxrYmQsc2FtcCc6IHtcbiAgICAgICAgICAgIGZvbnRGYW1pbHk6ICdtb25vc3BhY2UsIG1vbm9zcGFjZScsXG4gICAgICAgICAgICBmb250U2l6ZTogJzFlbScsXG4gICAgICAgICAgfSxcbiAgICAgICAgICBzbWFsbDogeyBmb250U2l6ZTogJzgwJScgfSxcbiAgICAgICAgICAnc3ViLHN1cCc6IHtcbiAgICAgICAgICAgIGZvbnRTaXplOiAnNzUlJyxcbiAgICAgICAgICAgIGxpbmVIZWlnaHQ6ICcwJyxcbiAgICAgICAgICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgICAgICAgICAgdmVydGljYWxBbGlnbjogJ2Jhc2VsaW5lJyxcbiAgICAgICAgICB9LFxuICAgICAgICAgIHN1YjogeyBib3R0b206ICctMC4yNWVtJyB9LFxuICAgICAgICAgIHN1cDogeyB0b3A6ICctMC41ZW0nIH0sXG4gICAgICAgICAgaW1nOiB7IGJvcmRlclN0eWxlOiAnbm9uZScgfSxcbiAgICAgICAgICAnYnV0dG9uLGlucHV0LG9wdGdyb3VwLHNlbGVjdCx0ZXh0YXJlYSc6IHtcbiAgICAgICAgICAgIGZvbnRGYW1pbHk6ICdpbmhlcml0JyxcbiAgICAgICAgICAgIGZvbnRTaXplOiAnMTAwJScsXG4gICAgICAgICAgICBsaW5lSGVpZ2h0OiAnMS4xNScsXG4gICAgICAgICAgICBtYXJnaW46ICcwJyxcbiAgICAgICAgICB9LFxuICAgICAgICAgICdidXR0b24saW5wdXQnOiB7IG92ZXJmbG93OiAndmlzaWJsZScgfSxcbiAgICAgICAgICAnYnV0dG9uLHNlbGVjdCc6IHsgdGV4dFRyYW5zZm9ybTogJ25vbmUnIH0sXG4gICAgICAgICAgJ2J1dHRvbixbdHlwZT1cImJ1dHRvblwiXSxbdHlwZT1cInJlc2V0XCJdLFt0eXBlPVwic3VibWl0XCJdJzoge1xuICAgICAgICAgICAgV2Via2l0QXBwZWFyYW5jZTogJ2J1dHRvbicsXG4gICAgICAgICAgfSxcbiAgICAgICAgICAnYnV0dG9uOjotbW96LWZvY3VzLWlubmVyLFt0eXBlPVwiYnV0dG9uXCJdOjotbW96LWZvY3VzLWlubmVyLFt0eXBlPVwicmVzZXRcIl06Oi1tb3otZm9jdXMtaW5uZXIsW3R5cGU9XCJzdWJtaXRcIl06Oi1tb3otZm9jdXMtaW5uZXInOlxuICAgICAgICAgICAge1xuICAgICAgICAgICAgICBib3JkZXJTdHlsZTogJ25vbmUnLFxuICAgICAgICAgICAgICBwYWRkaW5nOiAnMCcsXG4gICAgICAgICAgICB9LFxuICAgICAgICAgICdidXR0b246LW1vei1mb2N1c3JpbmcsW3R5cGU9XCJidXR0b25cIl06LW1vei1mb2N1c3JpbmcsW3R5cGU9XCJyZXNldFwiXTotbW96LWZvY3VzcmluZyxbdHlwZT1cInN1Ym1pdFwiXTotbW96LWZvY3VzcmluZyc6XG4gICAgICAgICAgICB7XG4gICAgICAgICAgICAgIG91dGxpbmU6ICcxcHggZG90dGVkIEJ1dHRvblRleHQnLFxuICAgICAgICAgICAgfSxcbiAgICAgICAgICBmaWVsZHNldDogeyBwYWRkaW5nOiAnMC4zNWVtIDAuNzVlbSAwLjYyNWVtJyB9LFxuICAgICAgICAgIGxlZ2VuZDoge1xuICAgICAgICAgICAgYm94U2l6aW5nOiAnYm9yZGVyLWJveCcsXG4gICAgICAgICAgICBjb2xvcjogJ2luaGVyaXQnLFxuICAgICAgICAgICAgZGlzcGxheTogJ3RhYmxlJyxcbiAgICAgICAgICAgIG1heFdpZHRoOiAnMTAwJScsXG4gICAgICAgICAgICBwYWRkaW5nOiAnMCcsXG4gICAgICAgICAgICB3aGl0ZVNwYWNlOiAnbm9ybWFsJyxcbiAgICAgICAgICB9LFxuICAgICAgICAgIHByb2dyZXNzOiB7IHZlcnRpY2FsQWxpZ246ICdiYXNlbGluZScgfSxcbiAgICAgICAgICB0ZXh0YXJlYTogeyBvdmVyZmxvdzogJ2F1dG8nIH0sXG4gICAgICAgICAgJ1t0eXBlPVwiY2hlY2tib3hcIl0sW3R5cGU9XCJyYWRpb1wiXSc6IHtcbiAgICAgICAgICAgIGJveFNpemluZzogJ2JvcmRlci1ib3gnLFxuICAgICAgICAgICAgcGFkZGluZzogJzAnLFxuICAgICAgICAgIH0sXG4gICAgICAgICAgJ1t0eXBlPVwibnVtYmVyXCJdOjotd2Via2l0LWlubmVyLXNwaW4tYnV0dG9uLFt0eXBlPVwibnVtYmVyXCJdOjotd2Via2l0LW91dGVyLXNwaW4tYnV0dG9uJzpcbiAgICAgICAgICAgIHtcbiAgICAgICAgICAgICAgaGVpZ2h0OiAnYXV0bycsXG4gICAgICAgICAgICB9LFxuICAgICAgICAgICdbdHlwZT1cInNlYXJjaFwiXSc6IHtcbiAgICAgICAgICAgIFdlYmtpdEFwcGVhcmFuY2U6ICd0ZXh0ZmllbGQnLFxuICAgICAgICAgICAgb3V0bGluZU9mZnNldDogJy0ycHgnLFxuICAgICAgICAgIH0sXG4gICAgICAgICAgJ1t0eXBlPVwic2VhcmNoXCJdOjotd2Via2l0LXNlYXJjaC1kZWNvcmF0aW9uJzoge1xuICAgICAgICAgICAgV2Via2l0QXBwZWFyYW5jZTogJ25vbmUnLFxuICAgICAgICAgIH0sXG4gICAgICAgICAgJzo6LXdlYmtpdC1maWxlLXVwbG9hZC1idXR0b24nOiB7XG4gICAgICAgICAgICBXZWJraXRBcHBlYXJhbmNlOiAnYnV0dG9uJyxcbiAgICAgICAgICAgIGZvbnQ6ICdpbmhlcml0JyxcbiAgICAgICAgICB9LFxuICAgICAgICAgIGRldGFpbHM6IHsgZGlzcGxheTogJ2Jsb2NrJyB9LFxuICAgICAgICAgIHN1bW1hcnk6IHsgZGlzcGxheTogJ2xpc3QtaXRlbScgfSxcbiAgICAgICAgICB0ZW1wbGF0ZTogeyBkaXNwbGF5OiAnbm9uZScgfSxcbiAgICAgICAgICAnW2hpZGRlbl0nOiB7IGRpc3BsYXk6ICdub25lJyB9LFxuICAgICAgICB9fVxuICAgICAgLz5cbiAgICA8Lz5cbiAgKTtcbn07XG4iXX0= */")
|
|
1751
1856
|
})]
|
|
1752
1857
|
});
|
|
1753
1858
|
};
|
|
@@ -1821,14 +1926,16 @@ function useAnimation(opts) {
|
|
|
1821
1926
|
open: openProp
|
|
1822
1927
|
});
|
|
1823
1928
|
const handleClose = react$1.useCallback(() => {
|
|
1824
|
-
setAnimation(animation => animation.state === 'closed' ? animation : {
|
|
1929
|
+
setAnimation(animation => animation.state === 'closed' ? animation : {
|
|
1930
|
+
...animation,
|
|
1825
1931
|
state: 'close',
|
|
1826
1932
|
style: animationStyle.close || animationStyle.closed,
|
|
1827
1933
|
timing: closeTimeoutInMilliseconds
|
|
1828
1934
|
});
|
|
1829
1935
|
}, [animationStyle, closeTimeoutInMilliseconds]);
|
|
1830
1936
|
const handleOpen = react$1.useCallback(() => {
|
|
1831
|
-
setAnimation(animation => animation.state === 'open' ? animation : {
|
|
1937
|
+
setAnimation(animation => animation.state === 'open' ? animation : {
|
|
1938
|
+
...animation,
|
|
1832
1939
|
open: true,
|
|
1833
1940
|
state: 'opening',
|
|
1834
1941
|
style: animationStyle.opening || animationStyle.closed
|
|
@@ -1836,7 +1943,8 @@ function useAnimation(opts) {
|
|
|
1836
1943
|
}, [animationStyle]);
|
|
1837
1944
|
react$1.useEffect(() => {
|
|
1838
1945
|
if (state === 'opening') {
|
|
1839
|
-
setAnimation(animation => ({
|
|
1946
|
+
setAnimation(animation => ({
|
|
1947
|
+
...animation,
|
|
1840
1948
|
state: 'open',
|
|
1841
1949
|
style: animationStyle.open,
|
|
1842
1950
|
timing: openTimeoutInMilliseconds
|
|
@@ -1933,7 +2041,8 @@ function useDialogAnimation(opts) {
|
|
|
1933
2041
|
const transition = `opacity ${timing}ms ${EASING_STANDARD},transform ${timing}ms ${EASING_STANDARD}`;
|
|
1934
2042
|
const scrimTransition = `opacity ${timing * 0.4 | 0}ms ${EASING_STANDARD}`;
|
|
1935
2043
|
return {
|
|
1936
|
-
containerStyle: {
|
|
2044
|
+
containerStyle: {
|
|
2045
|
+
...style,
|
|
1937
2046
|
transition
|
|
1938
2047
|
},
|
|
1939
2048
|
scrimStyle: {
|
|
@@ -2020,11 +2129,9 @@ const BottomSheet = /*#__PURE__*/react$1.forwardRef(function BottomSheet(props,
|
|
|
2020
2129
|
open: openProp,
|
|
2021
2130
|
mode: 'slide'
|
|
2022
2131
|
});
|
|
2023
|
-
|
|
2024
2132
|
if (!open) {
|
|
2025
2133
|
return null;
|
|
2026
2134
|
}
|
|
2027
|
-
|
|
2028
2135
|
return /*#__PURE__*/jsxRuntime.jsx(core.Portal, {
|
|
2029
2136
|
children: /*#__PURE__*/jsxRuntime.jsxs(DialogBackdrop, {
|
|
2030
2137
|
onClose: onClose,
|
|
@@ -2129,6 +2236,8 @@ const Input = /*#__PURE__*/react$1.forwardRef(function Input(props, forwardedRef
|
|
|
2129
2236
|
});
|
|
2130
2237
|
});
|
|
2131
2238
|
|
|
2239
|
+
// NotchedOutline Component
|
|
2240
|
+
|
|
2132
2241
|
const notchedoutlineContext = /*#__PURE__*/react$1.createContext(null);
|
|
2133
2242
|
const {
|
|
2134
2243
|
Provider: NotchedOutlineProvider
|
|
@@ -2191,7 +2300,7 @@ const LineRipple = /*#__PURE__*/react$1.forwardRef(function LineRipple(props, fo
|
|
|
2191
2300
|
} = props;
|
|
2192
2301
|
const [style, setStyle] = react$1.useState();
|
|
2193
2302
|
const theme = useTheme();
|
|
2194
|
-
const leaveTimeout = react$1.useRef();
|
|
2303
|
+
const leaveTimeout = react$1.useRef(undefined);
|
|
2195
2304
|
react$1.useEffect(() => {
|
|
2196
2305
|
if (active) {
|
|
2197
2306
|
setStyle({
|
|
@@ -2208,7 +2317,6 @@ const LineRipple = /*#__PURE__*/react$1.forwardRef(function LineRipple(props, fo
|
|
|
2208
2317
|
setStyle(undefined);
|
|
2209
2318
|
}, transitionDuration);
|
|
2210
2319
|
}
|
|
2211
|
-
|
|
2212
2320
|
return () => {
|
|
2213
2321
|
clearTimeout(leaveTimeout.current);
|
|
2214
2322
|
};
|
|
@@ -2218,7 +2326,8 @@ const LineRipple = /*#__PURE__*/react$1.forwardRef(function LineRipple(props, fo
|
|
|
2218
2326
|
ref: forwardedRef,
|
|
2219
2327
|
bg: color,
|
|
2220
2328
|
theme: theme,
|
|
2221
|
-
style: {
|
|
2329
|
+
style: {
|
|
2330
|
+
...style,
|
|
2222
2331
|
...styleProp
|
|
2223
2332
|
},
|
|
2224
2333
|
__css: {
|
|
@@ -2239,7 +2348,6 @@ const LineRipple = /*#__PURE__*/react$1.forwardRef(function LineRipple(props, fo
|
|
|
2239
2348
|
});
|
|
2240
2349
|
|
|
2241
2350
|
const makeSelector$1 = state => `input:${state} ~ &,` + `select:${state} ~ &,` + `button:${state} ~ &,` + `textarea:${state} ~ &,` + `[role="button"]:${state} ~ &`;
|
|
2242
|
-
|
|
2243
2351
|
const FilledContainerOverlay = props => {
|
|
2244
2352
|
const {
|
|
2245
2353
|
forceActive
|
|
@@ -2272,7 +2380,6 @@ const FilledContainerOverlay = props => {
|
|
|
2272
2380
|
}
|
|
2273
2381
|
});
|
|
2274
2382
|
};
|
|
2275
|
-
|
|
2276
2383
|
const FilledContainerBorderBottom = () => /*#__PURE__*/jsxRuntime.jsx(Box, {
|
|
2277
2384
|
__css: {
|
|
2278
2385
|
position: 'absolute',
|
|
@@ -2287,7 +2394,6 @@ const FilledContainerBorderBottom = () => /*#__PURE__*/jsxRuntime.jsx(Box, {
|
|
|
2287
2394
|
}
|
|
2288
2395
|
}
|
|
2289
2396
|
});
|
|
2290
|
-
|
|
2291
2397
|
const FilledContainer = /*#__PURE__*/react$1.forwardRef(function FilledContainer(props, forwardedRef) {
|
|
2292
2398
|
const {
|
|
2293
2399
|
label,
|
|
@@ -2334,9 +2440,12 @@ const FilledContainer = /*#__PURE__*/react$1.forwardRef(function FilledContainer
|
|
|
2334
2440
|
height: inputHeight,
|
|
2335
2441
|
offsetX: leadingIcon ? PADDING_LEFT_WITH_ICON + ICON_WIDTH + PADDING_LEFT_WITHOUT_ICON : PADDING_LEFT_WITHOUT_ICON,
|
|
2336
2442
|
translateX: 0,
|
|
2337
|
-
translateY:
|
|
2338
|
-
|
|
2339
|
-
|
|
2443
|
+
translateY:
|
|
2444
|
+
// To debug, delete these lines one by one to see it doing its work
|
|
2445
|
+
-(inputHeight * 0.5) +
|
|
2446
|
+
// Put it at the top, crossing middle label
|
|
2447
|
+
labelHeight * 0.75 * 0.5 +
|
|
2448
|
+
// Put it at position 0
|
|
2340
2449
|
8 // Add a 8px padding to the top
|
|
2341
2450
|
,
|
|
2342
2451
|
active: labelIsFloating,
|
|
@@ -2353,9 +2462,7 @@ const FilledContainer = /*#__PURE__*/react$1.forwardRef(function FilledContainer
|
|
|
2353
2462
|
});
|
|
2354
2463
|
|
|
2355
2464
|
const NOTCH_PADDING = 4;
|
|
2356
|
-
|
|
2357
2465
|
const makeSelector = state => `input:${state} ~ & [data-notch-outline-item],` + `select:${state} ~ & [data-notch-outline-item],` + `[role="button"]:${state} ~ & [data-notch-outline-item],` + `textarea:${state} ~ & [data-notch-outline-item]`;
|
|
2358
|
-
|
|
2359
2466
|
const InnerContainer = /*#__PURE__*/_styled__default["default"]('div', process.env.NODE_ENV === "production" ? {
|
|
2360
2467
|
shouldForwardProp: shouldForwardProp__default["default"],
|
|
2361
2468
|
target: "ejp8zhv0"
|
|
@@ -2376,7 +2483,6 @@ const InnerContainer = /*#__PURE__*/_styled__default["default"]('div', process.e
|
|
|
2376
2483
|
const borderRadius = polished.rem(borderRadiusPx);
|
|
2377
2484
|
const borderWidth = polished.rem(borderWidthPx);
|
|
2378
2485
|
const borderWidthWhenFocused = polished.rem(borderWidthWhenFocusedPx);
|
|
2379
|
-
|
|
2380
2486
|
function borderStyling(borderRadius, borderWidth) {
|
|
2381
2487
|
return {
|
|
2382
2488
|
['&[data-notch-outline-item="start"]']: {
|
|
@@ -2399,7 +2505,6 @@ const InnerContainer = /*#__PURE__*/_styled__default["default"]('div', process.e
|
|
|
2399
2505
|
}
|
|
2400
2506
|
};
|
|
2401
2507
|
}
|
|
2402
|
-
|
|
2403
2508
|
const inactiveStyle = {
|
|
2404
2509
|
color: 'on.surface-variant',
|
|
2405
2510
|
borderColor: 'outline',
|
|
@@ -2433,7 +2538,7 @@ const InnerContainer = /*#__PURE__*/_styled__default["default"]('div', process.e
|
|
|
2433
2538
|
// notch items styles when input is disabled
|
|
2434
2539
|
[makeSelector('disabled')]: disabledStyle
|
|
2435
2540
|
});
|
|
2436
|
-
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
2541
|
+
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZENvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0I4QiIsImZpbGUiOiJzdHlsZWRDb21wb25lbnRzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgcmVtIH0gZnJvbSAncG9saXNoZWQnO1xuaW1wb3J0IHNob3VsZEZvcndhcmRQcm9wIGZyb20gJ0BzdHlsZWQtc3lzdGVtL3Nob3VsZC1mb3J3YXJkLXByb3AnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQHN0eWxlZC1zeXN0ZW0vY3NzJztcblxuaW1wb3J0IHsgYWxwaGEgfSBmcm9tICcuLi9jb2xvcic7XG5pbXBvcnQgdHlwZSB7IFRoZW1lIH0gZnJvbSAnLi4vdGhlbWUnO1xuaW1wb3J0IHsgRUFTSU5HX1NUQU5EQVJEIH0gZnJvbSAnLi4vbW90aW9uJztcblxuZXhwb3J0IGNvbnN0IE5PVENIX1BBRERJTkcgPSA0O1xuXG5jb25zdCBtYWtlU2VsZWN0b3IgPSAoXG4gIHN0YXRlOlxuICAgIHwgJ2hvdmVyOm5vdChbZGlzYWJsZWRdKTpub3QoOmZvY3VzKSdcbiAgICB8ICdmb2N1czpub3QoW2Rpc2FibGVkXSknXG4gICAgfCAnZGlzYWJsZWQnXG4pID0+XG4gIGBpbnB1dDoke3N0YXRlfSB+ICYgW2RhdGEtbm90Y2gtb3V0bGluZS1pdGVtXSxgICtcbiAgYHNlbGVjdDoke3N0YXRlfSB+ICYgW2RhdGEtbm90Y2gtb3V0bGluZS1pdGVtXSxgICtcbiAgYFtyb2xlPVwiYnV0dG9uXCJdOiR7c3RhdGV9IH4gJiBbZGF0YS1ub3RjaC1vdXRsaW5lLWl0ZW1dLGAgK1xuICBgdGV4dGFyZWE6JHtzdGF0ZX0gfiAmIFtkYXRhLW5vdGNoLW91dGxpbmUtaXRlbV1gO1xuXG5leHBvcnQgY29uc3QgSW5uZXJDb250YWluZXIgPSBzdHlsZWQoJ2RpdicsIHtcbiAgc2hvdWxkRm9yd2FyZFByb3AsXG59KTx7XG4gIGNvbG9yPzogc3RyaW5nO1xuICB0aGVtZT86IFRoZW1lO1xuICBib3JkZXJSYWRpdXM6IG51bWJlcjtcbiAgYm9yZGVyV2lkdGg6IG51bWJlcjtcbiAgYm9yZGVyV2lkdGhXaGVuRm9jdXNlZDogbnVtYmVyO1xuICBib3JkZXJTdHlsZTogc3RyaW5nO1xuICBub3RjaFN0YXJ0OiBudW1iZXI7XG4gIGZvcmNlQWN0aXZlPzogYm9vbGVhbjtcbn0+KFxuICB7XG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgZGlzcGxheTogJ2ZsZXgnLFxuICAgIGxlZnQ6IDAsXG4gICAgdG9wOiAwLFxuICAgIGJvdHRvbTogMCxcbiAgICB3aWR0aDogJzEwMCUnLFxuICAgIGhlaWdodDogJzEwMCUnLFxuICAgIHBvaW50ZXJFdmVudHM6ICdub25lJyxcbiAgfSxcbiAgKHtcbiAgICBjb2xvciA9ICdvbi5zdXJmYWNlJyxcbiAgICBib3JkZXJSYWRpdXM6IGJvcmRlclJhZGl1c1B4LFxuICAgIGJvcmRlcldpZHRoOiBib3JkZXJXaWR0aFB4LFxuICAgIGJvcmRlcldpZHRoV2hlbkZvY3VzZWQ6IGJvcmRlcldpZHRoV2hlbkZvY3VzZWRQeCxcbiAgICBib3JkZXJTdHlsZSxcbiAgICBub3RjaFN0YXJ0LFxuICAgIGZvcmNlQWN0aXZlID0gZmFsc2UsXG4gIH0pID0+IHtcbiAgICBjb25zdCB3aWR0aCA9IHJlbShub3RjaFN0YXJ0IC0gTk9UQ0hfUEFERElORyk7XG4gICAgY29uc3QgYm9yZGVyUmFkaXVzID0gcmVtKGJvcmRlclJhZGl1c1B4KTtcbiAgICBjb25zdCBib3JkZXJXaWR0aCA9IHJlbShib3JkZXJXaWR0aFB4KTtcbiAgICBjb25zdCBib3JkZXJXaWR0aFdoZW5Gb2N1c2VkID0gcmVtKGJvcmRlcldpZHRoV2hlbkZvY3VzZWRQeCk7XG5cbiAgICBmdW5jdGlvbiBib3JkZXJTdHlsaW5nKGJvcmRlclJhZGl1czogc3RyaW5nLCBib3JkZXJXaWR0aDogc3RyaW5nKSB7XG4gICAgICByZXR1cm4ge1xuICAgICAgICBbJyZbZGF0YS1ub3RjaC1vdXRsaW5lLWl0ZW09XCJzdGFydFwiXSddOiB7XG4gICAgICAgICAgYm9yZGVyVG9wTGVmdFJhZGl1czogYm9yZGVyUmFkaXVzLFxuICAgICAgICAgIGJvcmRlckJvdHRvbUxlZnRSYWRpdXM6IGJvcmRlclJhZGl1cyxcbiAgICAgICAgICBib3JkZXJXaWR0aDogYm9yZGVyV2lkdGgsXG4gICAgICAgICAgYm9yZGVyUmlnaHRXaWR0aDogMCxcbiAgICAgICAgICB3aWR0aCxcbiAgICAgICAgfSxcbiAgICAgICAgWycmW2RhdGEtbm90Y2gtb3V0bGluZS1pdGVtPVwibWlkZGxlXCJdJ106IHtcbiAgICAgICAgICBib3JkZXJXaWR0aDogMCxcbiAgICAgICAgICBib3JkZXJCb3R0b21XaWR0aDogYm9yZGVyV2lkdGgsXG4gICAgICAgIH0sXG4gICAgICAgIFsnJltkYXRhLW5vdGNoLW91dGxpbmUtaXRlbT1cImVuZFwiXSddOiB7XG4gICAgICAgICAgYm9yZGVyV2lkdGg6IGJvcmRlcldpZHRoLFxuICAgICAgICAgIGJvcmRlckxlZnQ6IDAsXG4gICAgICAgICAgYm9yZGVyVG9wUmlnaHRSYWRpdXM6IGJvcmRlclJhZGl1cyxcbiAgICAgICAgICBib3JkZXJCb3R0b21SaWdodFJhZGl1czogYm9yZGVyUmFkaXVzLFxuICAgICAgICAgIGZsZXg6IDEsXG4gICAgICAgIH0sXG4gICAgICB9O1xuICAgIH1cblxuICAgIGNvbnN0IGluYWN0aXZlU3R5bGUgPSB7XG4gICAgICBjb2xvcjogJ29uLnN1cmZhY2UtdmFyaWFudCcsXG4gICAgICBib3JkZXJDb2xvcjogJ291dGxpbmUnLFxuICAgICAgLi4uYm9yZGVyU3R5bGluZyhib3JkZXJSYWRpdXMsIGJvcmRlcldpZHRoKSxcbiAgICB9O1xuXG4gICAgY29uc3QgaG92ZXJTdHlsZSA9IHtcbiAgICAgIGJvcmRlckNvbG9yOiAnb24uc3VyZmFjZScsXG4gICAgICBjb2xvcjogJ29uLnN1cmZhY2UtdmFyaWFudCcsXG4gICAgfTtcblxuICAgIGNvbnN0IGZvY3VzU3R5bGUgPSB7XG4gICAgICBib3JkZXJDb2xvcjogY29sb3IsXG4gICAgICBjb2xvcjogYWxwaGEoY29sb3IsIDAuODcpLFxuICAgICAgLi4uYm9yZGVyU3R5bGluZyhib3JkZXJSYWRpdXMsIGJvcmRlcldpZHRoV2hlbkZvY3VzZWQpLFxuICAgIH07XG5cbiAgICBjb25zdCBkaXNhYmxlZFN0eWxlID0ge1xuICAgICAgYm9yZGVyQ29sb3I6IGFscGhhKCdvbi5zdXJmYWNlJywgMC4wNiksXG4gICAgICBjb2xvcjogYWxwaGEoJ29uLnN1cmZhY2UnLCAwLjM4KSxcbiAgICB9O1xuXG4gICAgcmV0dXJuIGNzcyh7XG4gICAgICAvLyBub3RjaCBpdGVtcyBzdHlsZXMgd2hlbiBub3QgZm9jdXNlZFxuICAgICAgWydbZGF0YS1ub3RjaC1vdXRsaW5lLWl0ZW1dJ106IHtcbiAgICAgICAgYm94U2l6aW5nOiAnYm9yZGVyLWJveCcsXG4gICAgICAgIGJvcmRlclN0eWxlLFxuICAgICAgICB0cmFuc2l0aW9uOiBgYm9yZGVyLWNvbG9yIC4xNXMgJHtFQVNJTkdfU1RBTkRBUkR9YCxcbiAgICAgICAgLi4uKGZvcmNlQWN0aXZlID8gZm9jdXNTdHlsZSA6IGluYWN0aXZlU3R5bGUpLFxuICAgICAgfSxcbiAgICAgIC8vIG5vdGNoIGl0ZW1zIHN0eWxlcyB3aGVuIGlucHV0IGlzIGhvdmVyZWRcbiAgICAgIFttYWtlU2VsZWN0b3IoJ2hvdmVyOm5vdChbZGlzYWJsZWRdKTpub3QoOmZvY3VzKScpXTogZm9yY2VBY3RpdmVcbiAgICAgICAgPyBmb2N1c1N0eWxlXG4gICAgICAgIDogaG92ZXJTdHlsZSxcbiAgICAgIC8vIG5vdGNoIGl0ZW1zIHN0eWxlcyB3aGVuIGlucHV0IGlzIGZvY3VzZWRcbiAgICAgIFttYWtlU2VsZWN0b3IoJ2ZvY3VzOm5vdChbZGlzYWJsZWRdKScpXTogZm9jdXNTdHlsZSxcbiAgICAgIC8vIG5vdGNoIGl0ZW1zIHN0eWxlcyB3aGVuIGlucHV0IGlzIGRpc2FibGVkXG4gICAgICBbbWFrZVNlbGVjdG9yKCdkaXNhYmxlZCcpXTogZGlzYWJsZWRTdHlsZSxcbiAgICB9KTtcbiAgfVxuKTtcbiJdfQ== */");
|
|
2437
2542
|
|
|
2438
2543
|
const NotchedOutline = /*#__PURE__*/react$1.forwardRef(function NotchedOutline(props, forwardedRef) {
|
|
2439
2544
|
let {
|
|
@@ -2450,9 +2555,9 @@ const NotchedOutline = /*#__PURE__*/react$1.forwardRef(function NotchedOutline(p
|
|
|
2450
2555
|
label,
|
|
2451
2556
|
...otherProps
|
|
2452
2557
|
/* eslint-enable prefer-const */
|
|
2558
|
+
} = props;
|
|
2453
2559
|
|
|
2454
|
-
|
|
2455
|
-
|
|
2560
|
+
// Minimum notch start position that makes sense. Otherwise it will mess up with the border/border radii
|
|
2456
2561
|
const MIN_NOTCH_POSX = (props.borderRadius || 0) + NOTCH_PADDING;
|
|
2457
2562
|
const theme = useTheme();
|
|
2458
2563
|
notchStart = Math.max(MIN_NOTCH_POSX, notchStart);
|
|
@@ -2503,17 +2608,14 @@ const OutlinedContainer = /*#__PURE__*/react$1.forwardRef(function OutlinedConta
|
|
|
2503
2608
|
const labelRef = react$1.useRef(null);
|
|
2504
2609
|
useEnhancedEffect$1(() => {
|
|
2505
2610
|
const element = labelRef.current;
|
|
2506
|
-
|
|
2507
2611
|
if (element) {
|
|
2508
2612
|
setLabelWidth(element.offsetWidth);
|
|
2509
|
-
|
|
2510
2613
|
function handleFontsLoaded() {
|
|
2511
2614
|
// set the label width again once the fonts have been loaded
|
|
2512
2615
|
requestAnimationFrame(() => {
|
|
2513
2616
|
if (element) setLabelWidth(element.offsetWidth);
|
|
2514
2617
|
});
|
|
2515
2618
|
}
|
|
2516
|
-
|
|
2517
2619
|
document.fonts?.addEventListener?.('loadingdone', handleFontsLoaded);
|
|
2518
2620
|
document.fonts?.ready?.then(handleFontsLoaded);
|
|
2519
2621
|
return () => document.fonts?.removeEventListener?.('loadingdone', handleFontsLoaded);
|
|
@@ -2558,13 +2660,10 @@ const HelperText = /*#__PURE__*/react$1.forwardRef(function HelperText(props, fo
|
|
|
2558
2660
|
__css,
|
|
2559
2661
|
...otherProps
|
|
2560
2662
|
} = props;
|
|
2561
|
-
|
|
2562
2663
|
if (!leftSide && !rightSide) {
|
|
2563
2664
|
return null;
|
|
2564
2665
|
}
|
|
2565
|
-
|
|
2566
2666
|
let color = colorProp;
|
|
2567
|
-
|
|
2568
2667
|
if (disabled) {
|
|
2569
2668
|
color = alpha('on.surface', 0.38);
|
|
2570
2669
|
} else if (error) {
|
|
@@ -2572,7 +2671,6 @@ const HelperText = /*#__PURE__*/react$1.forwardRef(function HelperText(props, fo
|
|
|
2572
2671
|
} else if (color === undefined) {
|
|
2573
2672
|
color = alpha('on.surface', 0.6);
|
|
2574
2673
|
}
|
|
2575
|
-
|
|
2576
2674
|
return /*#__PURE__*/jsxRuntime.jsxs(Text, {
|
|
2577
2675
|
as: "div",
|
|
2578
2676
|
px: 16,
|
|
@@ -2623,15 +2721,12 @@ const componentMap$1 = {
|
|
|
2623
2721
|
outlined: OutlinedContainer,
|
|
2624
2722
|
filled: FilledContainer
|
|
2625
2723
|
};
|
|
2626
|
-
|
|
2627
2724
|
function characterCounter(value, maxLength) {
|
|
2628
2725
|
if (maxLength === undefined) {
|
|
2629
2726
|
return null;
|
|
2630
2727
|
}
|
|
2631
|
-
|
|
2632
2728
|
return `${typeof value === 'string' ? value.length : 0} / ${maxLength}`;
|
|
2633
2729
|
}
|
|
2634
|
-
|
|
2635
2730
|
const TextField = /*#__PURE__*/react$1.forwardRef(function TextField(props, forwardedRef) {
|
|
2636
2731
|
const {
|
|
2637
2732
|
type = 'text',
|
|
@@ -2663,15 +2758,12 @@ const TextField = /*#__PURE__*/react$1.forwardRef(function TextField(props, forw
|
|
|
2663
2758
|
const Container = componentMap$1[variant] || OutlinedContainer;
|
|
2664
2759
|
const fallbackId = react$1.useId();
|
|
2665
2760
|
const theme = useTheme();
|
|
2666
|
-
|
|
2667
2761
|
const handleFocus = () => {
|
|
2668
2762
|
setHasFocus(true);
|
|
2669
2763
|
};
|
|
2670
|
-
|
|
2671
2764
|
const handleBlur = () => {
|
|
2672
2765
|
setHasFocus(false);
|
|
2673
2766
|
};
|
|
2674
|
-
|
|
2675
2767
|
const hasError = Boolean(error);
|
|
2676
2768
|
const helperText = typeof error === 'string' ? error : helperTextProp;
|
|
2677
2769
|
const id = idProp || fallbackId;
|
|
@@ -2828,7 +2920,8 @@ const ListItem = /*#__PURE__*/react$1.forwardRef(function ListItem(props, forwar
|
|
|
2828
2920
|
"aria-selected": selected ? 'true' : undefined,
|
|
2829
2921
|
disabled: disabled,
|
|
2830
2922
|
...otherProps,
|
|
2831
|
-
__css: {
|
|
2923
|
+
__css: {
|
|
2924
|
+
...listItemStyle(color),
|
|
2832
2925
|
...__css
|
|
2833
2926
|
},
|
|
2834
2927
|
children: children
|
|
@@ -2858,6 +2951,7 @@ const ListItemText = /*#__PURE__*/react$1.forwardRef(function ListItemText(props
|
|
|
2858
2951
|
});
|
|
2859
2952
|
});
|
|
2860
2953
|
|
|
2954
|
+
/////////////////////////////////////////////////////
|
|
2861
2955
|
// Combobox
|
|
2862
2956
|
|
|
2863
2957
|
const ComboboxCore = core.Combobox;
|
|
@@ -2877,7 +2971,9 @@ const Combobox = /*#__PURE__*/react$1.forwardRef((props, forwardedRef) => {
|
|
|
2877
2971
|
},
|
|
2878
2972
|
...otherProps
|
|
2879
2973
|
});
|
|
2880
|
-
});
|
|
2974
|
+
});
|
|
2975
|
+
|
|
2976
|
+
/////////////////////////////////////////////////////
|
|
2881
2977
|
// ComboboxInput
|
|
2882
2978
|
|
|
2883
2979
|
const ComboboxInputCore = core.ComboboxInput;
|
|
@@ -2892,7 +2988,9 @@ const ComboboxInput = /*#__PURE__*/react$1.forwardRef((props, forwardedRef) => {
|
|
|
2892
2988
|
innerAs: as,
|
|
2893
2989
|
...otherProps
|
|
2894
2990
|
});
|
|
2895
|
-
});
|
|
2991
|
+
});
|
|
2992
|
+
|
|
2993
|
+
/////////////////////////////////////////////////////
|
|
2896
2994
|
// ComboboxList
|
|
2897
2995
|
|
|
2898
2996
|
const ComboboxListCore = core.ComboboxList;
|
|
@@ -2919,13 +3017,16 @@ const ComboboxList = /*#__PURE__*/react$1.forwardRef((props, forwardedRef) => {
|
|
|
2919
3017
|
'[data-popper-placement="bottom"] &': {
|
|
2920
3018
|
transformOrigin: 'top center'
|
|
2921
3019
|
},
|
|
2922
|
-
'& [data-reach-combobox-option=""]': {
|
|
3020
|
+
'& [data-reach-combobox-option=""]': {
|
|
3021
|
+
...listItemStyle('primary')
|
|
2923
3022
|
},
|
|
2924
3023
|
...__css
|
|
2925
3024
|
},
|
|
2926
3025
|
...otherProps
|
|
2927
3026
|
});
|
|
2928
|
-
});
|
|
3027
|
+
});
|
|
3028
|
+
|
|
3029
|
+
/////////////////////////////////////////////////////
|
|
2929
3030
|
// ComboboxPopperBox
|
|
2930
3031
|
|
|
2931
3032
|
const PopperCore = core.Popper;
|
|
@@ -2948,7 +3049,9 @@ const ComboboxPopperBox = /*#__PURE__*/react$1.forwardRef(({
|
|
|
2948
3049
|
},
|
|
2949
3050
|
...props
|
|
2950
3051
|
});
|
|
2951
|
-
});
|
|
3052
|
+
});
|
|
3053
|
+
|
|
3054
|
+
/////////////////////////////////////////////////////
|
|
2952
3055
|
// ComboboxPopover
|
|
2953
3056
|
|
|
2954
3057
|
const ComboboxPopoverCore = core.ComboboxPopover;
|
|
@@ -2963,7 +3066,9 @@ const ComboboxPopover = /*#__PURE__*/react$1.forwardRef((props, forwardedRef) =>
|
|
|
2963
3066
|
innerAs: as,
|
|
2964
3067
|
...otherProps
|
|
2965
3068
|
});
|
|
2966
|
-
});
|
|
3069
|
+
});
|
|
3070
|
+
|
|
3071
|
+
/////////////////////////////////////////////////////
|
|
2967
3072
|
// ComboboxOption
|
|
2968
3073
|
|
|
2969
3074
|
const ComboboxOptionCore = core.ComboboxOption;
|
|
@@ -2978,7 +3083,9 @@ const ComboboxOption = /*#__PURE__*/react$1.forwardRef((props, forwardedRef) =>
|
|
|
2978
3083
|
innerAs: as,
|
|
2979
3084
|
...otherProps
|
|
2980
3085
|
});
|
|
2981
|
-
});
|
|
3086
|
+
});
|
|
3087
|
+
|
|
3088
|
+
/////////////////////////////////////////////////////
|
|
2982
3089
|
// ComboboxLabel
|
|
2983
3090
|
|
|
2984
3091
|
const ComboboxLabelCore = core.ComboboxLabel;
|
|
@@ -2993,7 +3100,9 @@ const ComboboxLabel = /*#__PURE__*/react$1.forwardRef((props, forwardedRef) => {
|
|
|
2993
3100
|
innerAs: as,
|
|
2994
3101
|
...otherProps
|
|
2995
3102
|
});
|
|
2996
|
-
});
|
|
3103
|
+
});
|
|
3104
|
+
|
|
3105
|
+
/////////////////////////////////////////////////////
|
|
2997
3106
|
// ComboboxButton
|
|
2998
3107
|
|
|
2999
3108
|
const ComboboxButtonCore = core.ComboboxButton;
|
|
@@ -3042,7 +3151,7 @@ const ComboboxButton = /*#__PURE__*/react$1.forwardRef((props, forwardedRef) =>
|
|
|
3042
3151
|
|
|
3043
3152
|
const offset = 29.78333854675293; // document.querySelector(path).getTotalLength()
|
|
3044
3153
|
|
|
3045
|
-
const Path = _styled__default["default"]("path", process.env.NODE_ENV === "production" ? {
|
|
3154
|
+
const Path = /*#__PURE__*/_styled__default["default"]("path", process.env.NODE_ENV === "production" ? {
|
|
3046
3155
|
target: "e1v8gifn0"
|
|
3047
3156
|
} : {
|
|
3048
3157
|
target: "e1v8gifn0",
|
|
@@ -3055,8 +3164,7 @@ const Path = _styled__default["default"]("path", process.env.NODE_ENV === "produ
|
|
|
3055
3164
|
transition: 'stroke-dashoffset .18s linear',
|
|
3056
3165
|
transitionDelay: props.checked ? '90ms' : '0',
|
|
3057
3166
|
strokeDashoffset: props.checked ? 0 : offset
|
|
3058
|
-
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
3059
|
-
|
|
3167
|
+
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNoZWNrUGF0aC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2EiLCJmaWxlIjoiQ2hlY2tQYXRoLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHJlbSB9IGZyb20gJ3BvbGlzaGVkJztcblxuY29uc3Qgb2Zmc2V0ID0gMjkuNzgzMzM4NTQ2NzUyOTM7IC8vIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IocGF0aCkuZ2V0VG90YWxMZW5ndGgoKVxuXG5jb25zdCBQYXRoID0gc3R5bGVkLnBhdGg8eyBjaGVja2VkPzogYm9vbGVhbiB9PigocHJvcHMpID0+ICh7XG4gIGZpbGw6ICdub25lJyxcbiAgc3Ryb2tlOiAnY3VycmVudENvbG9yJyxcbiAgc3Ryb2tlV2lkdGg6IHJlbSgzLjEyKSxcbiAgc3Ryb2tlRGFzaGFycmF5OiBvZmZzZXQsXG4gIHRyYW5zaXRpb246ICdzdHJva2UtZGFzaG9mZnNldCAuMThzIGxpbmVhcicsXG4gIHRyYW5zaXRpb25EZWxheTogcHJvcHMuY2hlY2tlZCA/ICc5MG1zJyA6ICcwJyxcbiAgc3Ryb2tlRGFzaG9mZnNldDogcHJvcHMuY2hlY2tlZCA/IDAgOiBvZmZzZXQsXG59KSk7XG5cbmV4cG9ydCBjb25zdCBDaGVja1BhdGggPSAoeyBjaGVja2VkIH06IHsgY2hlY2tlZD86IGJvb2xlYW4gfSkgPT4ge1xuICByZXR1cm4gPFBhdGggZD1cIk0xLjczLDEyLjkxIDguMSwxOS4yOCAyMi43OSw0LjU5XCIgY2hlY2tlZD17Y2hlY2tlZH0gLz47XG59O1xuIl19 */");
|
|
3060
3168
|
const CheckPath = ({
|
|
3061
3169
|
checked
|
|
3062
3170
|
}) => {
|
|
@@ -3066,7 +3174,7 @@ const CheckPath = ({
|
|
|
3066
3174
|
});
|
|
3067
3175
|
};
|
|
3068
3176
|
|
|
3069
|
-
const Line = _styled__default["default"]("line", process.env.NODE_ENV === "production" ? {
|
|
3177
|
+
const Line = /*#__PURE__*/_styled__default["default"]("line", process.env.NODE_ENV === "production" ? {
|
|
3070
3178
|
target: "eat3a050"
|
|
3071
3179
|
} : {
|
|
3072
3180
|
target: "eat3a050",
|
|
@@ -3079,8 +3187,7 @@ const Line = _styled__default["default"]("line", process.env.NODE_ENV === "produ
|
|
|
3079
3187
|
transform: props.checked ? 'scaleX(1)' : 'scaleX(0)',
|
|
3080
3188
|
transition: 'transform .18s linear',
|
|
3081
3189
|
transitionDelay: props.checked ? '90ms' : '0'
|
|
3082
|
-
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
3083
|
-
|
|
3190
|
+
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkluZGV0ZXJtaW5hdGVQYXRoLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHYSIsImZpbGUiOiJJbmRldGVybWluYXRlUGF0aC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyByZW0gfSBmcm9tICdwb2xpc2hlZCc7XG5cbmNvbnN0IExpbmUgPSBzdHlsZWQubGluZTx7IGNoZWNrZWQ/OiBib29sZWFuOyByb3RhdGU/OiBib29sZWFuIH0+KChwcm9wcykgPT4gKHtcbiAgZmlsbDogJ25vbmUnLFxuICBzdHJva2U6ICdjdXJyZW50Q29sb3InLFxuICBzdHJva2VXaWR0aDogcmVtKDQpLFxuICB0cmFuc2Zvcm1PcmlnaW46ICdjZW50ZXIgY2VudGVyJyxcbiAgdHJhbnNmb3JtOiBwcm9wcy5jaGVja2VkID8gJ3NjYWxlWCgxKScgOiAnc2NhbGVYKDApJyxcbiAgdHJhbnNpdGlvbjogJ3RyYW5zZm9ybSAuMThzIGxpbmVhcicsXG4gIHRyYW5zaXRpb25EZWxheTogcHJvcHMuY2hlY2tlZCA/ICc5MG1zJyA6ICcwJyxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IEluZGV0ZXJtaW5hdGVQYXRoID0gKHsgY2hlY2tlZCB9OiB7IGNoZWNrZWQ/OiBib29sZWFuIH0pID0+IHtcbiAgcmV0dXJuIDxMaW5lIHkyPVwiMTJcIiB4Mj1cIjIyXCIgeTE9XCIxMlwiIHgxPVwiMlwiIGNoZWNrZWQ9e2NoZWNrZWR9IC8+O1xufTtcbiJdfQ== */");
|
|
3084
3191
|
const IndeterminatePath = ({
|
|
3085
3192
|
checked
|
|
3086
3193
|
}) => {
|
|
@@ -3098,7 +3205,6 @@ const CheckBoxIcon = /*#__PURE__*/react$1.forwardRef(function CheckBoxIcon({
|
|
|
3098
3205
|
as = 'div',
|
|
3099
3206
|
indeterminate,
|
|
3100
3207
|
checked,
|
|
3101
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
3102
3208
|
disabled,
|
|
3103
3209
|
backgroundColor,
|
|
3104
3210
|
borderColor,
|
|
@@ -3182,17 +3288,14 @@ const SelectionControlText = /*#__PURE__*/react$1.forwardRef(function SelectionC
|
|
|
3182
3288
|
});
|
|
3183
3289
|
|
|
3184
3290
|
const CheckBoxCore$1 = core.CheckBox;
|
|
3185
|
-
|
|
3186
3291
|
function getColors(disabled, checked) {
|
|
3187
3292
|
if (checked && disabled) {
|
|
3188
3293
|
return ['on.surface', 'transparent', 0.38];
|
|
3189
3294
|
} else if (checked) {
|
|
3190
3295
|
return ['primary', 'primary', 1];
|
|
3191
3296
|
}
|
|
3192
|
-
|
|
3193
3297
|
return ['transparent', 'on.surface', disabled ? 0.38 : 0.54];
|
|
3194
3298
|
}
|
|
3195
|
-
|
|
3196
3299
|
const CheckBoxInner = /*#__PURE__*/react$1.forwardRef(function CheckBoxInner(props, forwardedRef) {
|
|
3197
3300
|
const {
|
|
3198
3301
|
as: Comp = 'input',
|
|
@@ -3275,7 +3378,6 @@ const CheckBox = /*#__PURE__*/react$1.forwardRef(function CheckBox(props, forwar
|
|
|
3275
3378
|
children,
|
|
3276
3379
|
...otherProps
|
|
3277
3380
|
} = props;
|
|
3278
|
-
|
|
3279
3381
|
const inner = /*#__PURE__*/jsxRuntime.jsx(CheckBoxCore$1, {
|
|
3280
3382
|
as: CheckBoxInner,
|
|
3281
3383
|
innerAs: as,
|
|
@@ -3284,11 +3386,9 @@ const CheckBox = /*#__PURE__*/react$1.forwardRef(function CheckBox(props, forwar
|
|
|
3284
3386
|
disabled: disabled,
|
|
3285
3387
|
...otherProps
|
|
3286
3388
|
});
|
|
3287
|
-
|
|
3288
3389
|
if (!children) {
|
|
3289
3390
|
return inner;
|
|
3290
3391
|
}
|
|
3291
|
-
|
|
3292
3392
|
return /*#__PURE__*/jsxRuntime.jsxs(SelectionControlLabel, {
|
|
3293
3393
|
children: [inner, /*#__PURE__*/jsxRuntime.jsx(SelectionControlText, {
|
|
3294
3394
|
disabled: disabled,
|
|
@@ -3298,9 +3398,11 @@ const CheckBox = /*#__PURE__*/react$1.forwardRef(function CheckBox(props, forwar
|
|
|
3298
3398
|
});
|
|
3299
3399
|
|
|
3300
3400
|
function getFilledCSS(theme, bg, color, disabled) {
|
|
3301
|
-
return {
|
|
3401
|
+
return {
|
|
3402
|
+
...(!disabled && bg !== 'surface' ? {
|
|
3302
3403
|
bg
|
|
3303
|
-
} : {
|
|
3404
|
+
} : {
|
|
3405
|
+
...getColorOverlay(theme, 'surface', 'primary', 0.05)
|
|
3304
3406
|
}),
|
|
3305
3407
|
color,
|
|
3306
3408
|
'&::before': {
|
|
@@ -3326,9 +3428,9 @@ function getFilledCSS(theme, bg, color, disabled) {
|
|
|
3326
3428
|
})
|
|
3327
3429
|
};
|
|
3328
3430
|
}
|
|
3329
|
-
|
|
3330
3431
|
function getOutlinedCSS(theme, bg, color, borderOpacity) {
|
|
3331
|
-
return {
|
|
3432
|
+
return {
|
|
3433
|
+
...(bg !== 'surface' ? {
|
|
3332
3434
|
bg
|
|
3333
3435
|
} : getDarkThemeBackgroundOverlay(theme, 2)),
|
|
3334
3436
|
color: color,
|
|
@@ -3337,7 +3439,6 @@ function getOutlinedCSS(theme, bg, color, borderOpacity) {
|
|
|
3337
3439
|
borderWidth: "0.0625rem"
|
|
3338
3440
|
};
|
|
3339
3441
|
}
|
|
3340
|
-
|
|
3341
3442
|
const ChipBase = /*#__PURE__*/react$1.forwardRef(function Chip(props, forwardedRef) {
|
|
3342
3443
|
const {
|
|
3343
3444
|
as = 'div',
|
|
@@ -3638,11 +3739,9 @@ const Dialog = /*#__PURE__*/react$1.forwardRef(function Dialog(props, forwardedR
|
|
|
3638
3739
|
openTimeoutInMilliseconds,
|
|
3639
3740
|
closeTimeoutInMilliseconds
|
|
3640
3741
|
});
|
|
3641
|
-
|
|
3642
3742
|
if (!open) {
|
|
3643
3743
|
return null;
|
|
3644
3744
|
}
|
|
3645
|
-
|
|
3646
3745
|
return /*#__PURE__*/jsxRuntime.jsx(core.Portal, {
|
|
3647
3746
|
children: /*#__PURE__*/jsxRuntime.jsxs(DialogBackdrop, {
|
|
3648
3747
|
onClose: onClose,
|
|
@@ -3756,7 +3855,9 @@ const MenuList = /*#__PURE__*/react$1.forwardRef(({
|
|
|
3756
3855
|
...__css
|
|
3757
3856
|
},
|
|
3758
3857
|
...props
|
|
3759
|
-
}));
|
|
3858
|
+
}));
|
|
3859
|
+
|
|
3860
|
+
/////////////////////////////////////////////////////
|
|
3760
3861
|
// MenuItem
|
|
3761
3862
|
|
|
3762
3863
|
const MenuItem$1 = /*#__PURE__*/react$1.forwardRef(({
|
|
@@ -3767,7 +3868,9 @@ const MenuItem$1 = /*#__PURE__*/react$1.forwardRef(({
|
|
|
3767
3868
|
innerAs: as,
|
|
3768
3869
|
ref: ref,
|
|
3769
3870
|
...props
|
|
3770
|
-
}));
|
|
3871
|
+
}));
|
|
3872
|
+
|
|
3873
|
+
/////////////////////////////////////////////////////
|
|
3771
3874
|
// MenuButton
|
|
3772
3875
|
|
|
3773
3876
|
const MenuButton = /*#__PURE__*/react$1.forwardRef(({
|
|
@@ -3778,7 +3881,9 @@ const MenuButton = /*#__PURE__*/react$1.forwardRef(({
|
|
|
3778
3881
|
innerAs: as,
|
|
3779
3882
|
ref: ref,
|
|
3780
3883
|
...props
|
|
3781
|
-
}));
|
|
3884
|
+
}));
|
|
3885
|
+
|
|
3886
|
+
/////////////////////////////////////////////////////
|
|
3782
3887
|
// ContextMenuTrigger
|
|
3783
3888
|
|
|
3784
3889
|
const ContextMenuTrigger = /*#__PURE__*/react$1.forwardRef(({
|
|
@@ -3789,7 +3894,9 @@ const ContextMenuTrigger = /*#__PURE__*/react$1.forwardRef(({
|
|
|
3789
3894
|
innerAs: as,
|
|
3790
3895
|
ref: ref,
|
|
3791
3896
|
...props
|
|
3792
|
-
}));
|
|
3897
|
+
}));
|
|
3898
|
+
|
|
3899
|
+
/////////////////////////////////////////////////////
|
|
3793
3900
|
// MenuPopover
|
|
3794
3901
|
|
|
3795
3902
|
const MenuPopoverCore = core.MenuPopover;
|
|
@@ -3877,9 +3984,9 @@ const NavRailItem = /*#__PURE__*/react$1.forwardRef(function NavRailItem(props,
|
|
|
3877
3984
|
} = props;
|
|
3878
3985
|
const theme = useTheme();
|
|
3879
3986
|
const baseOpacity = 0,
|
|
3880
|
-
|
|
3881
|
-
|
|
3882
|
-
|
|
3987
|
+
hoverOpacity = 0.04,
|
|
3988
|
+
focusOpacity = 0.12,
|
|
3989
|
+
pressedOpacity = 0.12;
|
|
3883
3990
|
const ripple = useRippleSurface({
|
|
3884
3991
|
rippleColor: 'currentColor',
|
|
3885
3992
|
onKeyDown,
|
|
@@ -3888,23 +3995,22 @@ const NavRailItem = /*#__PURE__*/react$1.forwardRef(function NavRailItem(props,
|
|
|
3888
3995
|
hoverOpacity,
|
|
3889
3996
|
focusOpacity,
|
|
3890
3997
|
pressedOpacity
|
|
3891
|
-
});
|
|
3998
|
+
});
|
|
3892
3999
|
|
|
4000
|
+
// Apply ripple from nav item to nav indicator
|
|
3893
4001
|
const rippleCss = react$1.useMemo(() => {
|
|
3894
4002
|
const ret = {};
|
|
3895
|
-
const
|
|
3896
|
-
|
|
4003
|
+
const rippleCss = ripple.__css;
|
|
4004
|
+
const keys = Object.keys(rippleCss);
|
|
3897
4005
|
for (const key of keys) {
|
|
3898
4006
|
if (!key.startsWith('&')) {
|
|
3899
4007
|
ret['& [data-nav-rail-item-indicator]'] = ret['& [data-nav-rail-item-indicator]'] || {};
|
|
3900
|
-
ret['& [data-nav-rail-item-indicator]'][key] =
|
|
4008
|
+
ret['& [data-nav-rail-item-indicator]'][key] = rippleCss[key];
|
|
3901
4009
|
continue;
|
|
3902
4010
|
}
|
|
3903
|
-
|
|
3904
4011
|
const newKey = key.replace(/(.+?)::(before|after)/g, '$1 [data-nav-rail-item-indicator]::$2');
|
|
3905
|
-
ret[newKey] =
|
|
4012
|
+
ret[newKey] = rippleCss[key];
|
|
3906
4013
|
}
|
|
3907
|
-
|
|
3908
4014
|
return ret;
|
|
3909
4015
|
}, [ripple.__css]);
|
|
3910
4016
|
return /*#__PURE__*/jsxRuntime.jsx(Box, {
|
|
@@ -3915,7 +4021,8 @@ const NavRailItem = /*#__PURE__*/react$1.forwardRef(function NavRailItem(props,
|
|
|
3915
4021
|
onKeyDown: ripple.onKeyDown,
|
|
3916
4022
|
"aria-pressed": selected,
|
|
3917
4023
|
type: "button",
|
|
3918
|
-
style: {
|
|
4024
|
+
style: {
|
|
4025
|
+
...ripple.style,
|
|
3919
4026
|
...style
|
|
3920
4027
|
},
|
|
3921
4028
|
disabled: disabled,
|
|
@@ -4020,11 +4127,9 @@ const Popover = /*#__PURE__*/react$1.forwardRef(function Popover({
|
|
|
4020
4127
|
console.warn('<Popover /> will not open because it does not have an anchor element defined');
|
|
4021
4128
|
}
|
|
4022
4129
|
}, [anchorEl]);
|
|
4023
|
-
|
|
4024
4130
|
if (!open || !anchorEl || !anchorEl.current) {
|
|
4025
4131
|
return null;
|
|
4026
4132
|
}
|
|
4027
|
-
|
|
4028
4133
|
return /*#__PURE__*/jsxRuntime.jsx(core.Portal, {
|
|
4029
4134
|
selector: portalSelector,
|
|
4030
4135
|
children: /*#__PURE__*/jsxRuntime.jsx(DialogBackdrop, {
|
|
@@ -4044,7 +4149,8 @@ const Popover = /*#__PURE__*/react$1.forwardRef(function Popover({
|
|
|
4044
4149
|
distance: distance,
|
|
4045
4150
|
offsetFn: offsetFn,
|
|
4046
4151
|
arrowPadding: arrowPadding,
|
|
4047
|
-
children: /*#__PURE__*/jsxRuntime.jsx(PopoverContainer, {
|
|
4152
|
+
children: /*#__PURE__*/jsxRuntime.jsx(PopoverContainer, {
|
|
4153
|
+
...containerProps,
|
|
4048
4154
|
children: /*#__PURE__*/jsxRuntime.jsx(PopoverSurface, {
|
|
4049
4155
|
ref: core.assignMultipleRefs(forwardedRef, ref),
|
|
4050
4156
|
...otherProps,
|
|
@@ -4239,7 +4345,6 @@ const RadioButton = /*#__PURE__*/react$1.forwardRef(function RadioButton(props,
|
|
|
4239
4345
|
disabled,
|
|
4240
4346
|
...otherProps
|
|
4241
4347
|
} = props;
|
|
4242
|
-
|
|
4243
4348
|
const inner = /*#__PURE__*/jsxRuntime.jsx(core.RadioButton, {
|
|
4244
4349
|
as: RadioButtonInner,
|
|
4245
4350
|
innerAs: as,
|
|
@@ -4247,11 +4352,9 @@ const RadioButton = /*#__PURE__*/react$1.forwardRef(function RadioButton(props,
|
|
|
4247
4352
|
disabled: disabled,
|
|
4248
4353
|
...otherProps
|
|
4249
4354
|
});
|
|
4250
|
-
|
|
4251
4355
|
if (!children) {
|
|
4252
4356
|
return inner;
|
|
4253
4357
|
}
|
|
4254
|
-
|
|
4255
4358
|
return /*#__PURE__*/jsxRuntime.jsxs(SelectionControlLabel, {
|
|
4256
4359
|
children: [inner, /*#__PURE__*/jsxRuntime.jsx(SelectionControlText, {
|
|
4257
4360
|
disabled: disabled,
|
|
@@ -4261,7 +4364,6 @@ const RadioButton = /*#__PURE__*/react$1.forwardRef(function RadioButton(props,
|
|
|
4261
4364
|
});
|
|
4262
4365
|
|
|
4263
4366
|
const RadioGroup = /*#__PURE__*/react$1.forwardRef(function RadioGroup(props, forwardedRef) {
|
|
4264
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
4265
4367
|
const {
|
|
4266
4368
|
as,
|
|
4267
4369
|
...otherProps
|
|
@@ -4365,9 +4467,12 @@ const SelectButton = /*#__PURE__*/react$1.forwardRef(({
|
|
|
4365
4467
|
children: children
|
|
4366
4468
|
}));
|
|
4367
4469
|
|
|
4470
|
+
// Select Component
|
|
4471
|
+
|
|
4368
4472
|
const selectContext = /*#__PURE__*/react$1.createContext({
|
|
4369
4473
|
native: false,
|
|
4370
|
-
onSelect: () => {
|
|
4474
|
+
onSelect: () => {
|
|
4475
|
+
// noop
|
|
4371
4476
|
},
|
|
4372
4477
|
multiple: false
|
|
4373
4478
|
});
|
|
@@ -4408,34 +4513,33 @@ const SelectIcon = /*#__PURE__*/react$1.forwardRef(function SelectIcon(props, fo
|
|
|
4408
4513
|
const makeDefaultRender = children => val => {
|
|
4409
4514
|
if (children && val !== undefined) {
|
|
4410
4515
|
const allChildren = react$1.Children.toArray(children);
|
|
4411
|
-
|
|
4412
4516
|
for (let i = 0; i < allChildren.length; i++) {
|
|
4413
4517
|
const child = allChildren[i];
|
|
4414
|
-
|
|
4415
|
-
|
|
4416
|
-
|
|
4518
|
+
if (/*#__PURE__*/react$1.isValidElement(child)) {
|
|
4519
|
+
const element = child;
|
|
4520
|
+
if (String(element.props.value) === val) {
|
|
4521
|
+
return element.props.children;
|
|
4522
|
+
}
|
|
4417
4523
|
}
|
|
4418
4524
|
}
|
|
4419
4525
|
}
|
|
4420
|
-
|
|
4421
4526
|
return val || undefined;
|
|
4422
4527
|
};
|
|
4423
4528
|
const makeDefaultMultipleRender = children => val => {
|
|
4424
4529
|
const ret = [];
|
|
4425
|
-
|
|
4426
4530
|
if (children && val !== undefined && val.length > 0) {
|
|
4427
4531
|
const set = new Set(val);
|
|
4428
4532
|
const allChildren = react$1.Children.toArray(children);
|
|
4429
|
-
|
|
4430
4533
|
for (let i = 0; i < allChildren.length; i++) {
|
|
4431
4534
|
const child = allChildren[i];
|
|
4432
|
-
|
|
4433
|
-
|
|
4434
|
-
|
|
4535
|
+
if (/*#__PURE__*/react$1.isValidElement(child)) {
|
|
4536
|
+
const element = child;
|
|
4537
|
+
if (set.has(String(element.props.value))) {
|
|
4538
|
+
ret.push(element.props.children);
|
|
4539
|
+
}
|
|
4435
4540
|
}
|
|
4436
4541
|
}
|
|
4437
4542
|
}
|
|
4438
|
-
|
|
4439
4543
|
return /*#__PURE__*/jsxRuntime.jsx(Box, {
|
|
4440
4544
|
as: "span",
|
|
4441
4545
|
sx: {
|
|
@@ -4479,42 +4583,33 @@ const Select = /*#__PURE__*/react$1.forwardRef(function Select(props, forwardedR
|
|
|
4479
4583
|
const [value, onChange] = core.useControlledState(valueProp, onChangeProp, defaultValue, setState => (e, v) => {
|
|
4480
4584
|
setState(v);
|
|
4481
4585
|
});
|
|
4482
|
-
|
|
4483
4586
|
if (multiple && !Array.isArray(value)) {
|
|
4484
4587
|
console.warn('Warning: The `value` prop supplied to <Select> must be an array if `multiple` is true.');
|
|
4485
4588
|
}
|
|
4486
|
-
|
|
4487
4589
|
const [hasFocus, setHasFocus] = react$1.useState(false);
|
|
4488
|
-
const buttonRef = react$1.useRef();
|
|
4590
|
+
const buttonRef = react$1.useRef(null);
|
|
4489
4591
|
const [open, setOpen] = react$1.useState(false);
|
|
4490
4592
|
const fallbackId = react$1.useId();
|
|
4491
4593
|
const theme = useTheme();
|
|
4492
4594
|
const Container = overwrittenContainer || componentMap[variant] || OutlinedContainer;
|
|
4493
|
-
|
|
4494
4595
|
const handleFocus = () => {
|
|
4495
4596
|
setHasFocus(true);
|
|
4496
4597
|
};
|
|
4497
|
-
|
|
4498
4598
|
const handleBlur = () => {
|
|
4499
4599
|
setHasFocus(false);
|
|
4500
4600
|
};
|
|
4501
|
-
|
|
4502
4601
|
const handleToggle = (e, isOpen) => {
|
|
4503
4602
|
setOpen(isOpen);
|
|
4504
4603
|
};
|
|
4505
|
-
|
|
4506
4604
|
const handleOnChange = e => {
|
|
4507
4605
|
const selectedValue = native ? e.target.value : e.currentTarget.dataset.value;
|
|
4508
|
-
|
|
4509
4606
|
if (multiple && Array.isArray(value)) {
|
|
4510
4607
|
if (value.find(c => c === selectedValue)) {
|
|
4511
4608
|
onChange && onChange(e, value.filter(c => c !== selectedValue));
|
|
4512
4609
|
} else {
|
|
4513
4610
|
onChange && onChange(e, [...value, selectedValue]);
|
|
4514
4611
|
}
|
|
4515
|
-
|
|
4516
4612
|
const isMac = Boolean(/mac os|ios/i.test(navigator.userAgent));
|
|
4517
|
-
|
|
4518
4613
|
if (e.key === ' ' || isMac && e.metaKey || !isMac && e.ctrlKey) {
|
|
4519
4614
|
e.preventDefault();
|
|
4520
4615
|
}
|
|
@@ -4522,7 +4617,6 @@ const Select = /*#__PURE__*/react$1.forwardRef(function Select(props, forwardedR
|
|
|
4522
4617
|
onChange && onChange(e, selectedValue);
|
|
4523
4618
|
}
|
|
4524
4619
|
};
|
|
4525
|
-
|
|
4526
4620
|
const hasError = Boolean(error);
|
|
4527
4621
|
const helperText = typeof error === 'string' ? error : helperTextProp;
|
|
4528
4622
|
const id = idProp || fallbackId;
|
|
@@ -4530,7 +4624,6 @@ const Select = /*#__PURE__*/react$1.forwardRef(function Select(props, forwardedR
|
|
|
4530
4624
|
const helperTextId = helperText ? `${id}-helper-text` : undefined;
|
|
4531
4625
|
const defaultRenderFn = react$1.useMemo(() => multiple ? makeDefaultMultipleRender(children) : makeDefaultRender(children), [children, multiple]);
|
|
4532
4626
|
const renderValue = renderValueProp || defaultRenderFn;
|
|
4533
|
-
|
|
4534
4627
|
function hasAnySelected() {
|
|
4535
4628
|
if (multiple) {
|
|
4536
4629
|
return value.length > 0;
|
|
@@ -4538,7 +4631,6 @@ const Select = /*#__PURE__*/react$1.forwardRef(function Select(props, forwardedR
|
|
|
4538
4631
|
return value !== '';
|
|
4539
4632
|
}
|
|
4540
4633
|
}
|
|
4541
|
-
|
|
4542
4634
|
const labelIsFloating = hasFocus || open || hasAnySelected();
|
|
4543
4635
|
const Comp = native ? Select$1 : SelectButton;
|
|
4544
4636
|
react$1.useEffect(() => {
|
|
@@ -4547,8 +4639,8 @@ const Select = /*#__PURE__*/react$1.forwardRef(function Select(props, forwardedR
|
|
|
4547
4639
|
// update our state to reflect that.
|
|
4548
4640
|
if (native && buttonRef.current && buttonRef.current.value !== value) {
|
|
4549
4641
|
onChange && onChange({}, buttonRef.current.value);
|
|
4550
|
-
}
|
|
4551
|
-
|
|
4642
|
+
}
|
|
4643
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
4552
4644
|
}, []);
|
|
4553
4645
|
return /*#__PURE__*/jsxRuntime.jsx(SelectProvider, {
|
|
4554
4646
|
value: {
|
|
@@ -4611,7 +4703,8 @@ const Select = /*#__PURE__*/react$1.forwardRef(function Select(props, forwardedR
|
|
|
4611
4703
|
},
|
|
4612
4704
|
role: "listbox",
|
|
4613
4705
|
__css: {
|
|
4614
|
-
'& [data-menu-item=""]': {
|
|
4706
|
+
'& [data-menu-item=""]': {
|
|
4707
|
+
...listItemStyle('primary')
|
|
4615
4708
|
}
|
|
4616
4709
|
},
|
|
4617
4710
|
children: children
|
|
@@ -4657,7 +4750,6 @@ const SelectItem = /*#__PURE__*/react$1.forwardRef(function SelectItem(props, fo
|
|
|
4657
4750
|
multiple
|
|
4658
4751
|
} = useSelectContext();
|
|
4659
4752
|
const value = valueProp !== undefined && valueProp !== null ? String(valueProp) : children;
|
|
4660
|
-
|
|
4661
4753
|
if (native) {
|
|
4662
4754
|
return /*#__PURE__*/jsxRuntime.jsx("option", {
|
|
4663
4755
|
ref: forwardedRef,
|
|
@@ -4667,19 +4759,15 @@ const SelectItem = /*#__PURE__*/react$1.forwardRef(function SelectItem(props, fo
|
|
|
4667
4759
|
children: children
|
|
4668
4760
|
});
|
|
4669
4761
|
}
|
|
4670
|
-
|
|
4671
4762
|
if (children === undefined && disabled) {
|
|
4672
4763
|
return null;
|
|
4673
4764
|
}
|
|
4674
|
-
|
|
4675
4765
|
let selected = false;
|
|
4676
|
-
|
|
4677
4766
|
if (multiple && Array.isArray(selectedValue)) {
|
|
4678
4767
|
selected = Boolean(selectedValue.find(v => v === value));
|
|
4679
4768
|
} else {
|
|
4680
4769
|
selected = value === String(selectedValue);
|
|
4681
4770
|
}
|
|
4682
|
-
|
|
4683
4771
|
return /*#__PURE__*/jsxRuntime.jsx(Comp, {
|
|
4684
4772
|
as: MenuItem,
|
|
4685
4773
|
onSelect: core.wrapEvent(onSelectProp, onSelect),
|
|
@@ -4766,10 +4854,9 @@ const appearAnimation = react.keyframes({
|
|
|
4766
4854
|
visibility: 'visible'
|
|
4767
4855
|
}
|
|
4768
4856
|
});
|
|
4769
|
-
|
|
4770
|
-
|
|
4771
|
-
*
|
|
4772
|
-
* https://reactjs.org/docs/concurrent-mode-patterns.html#delaying-a-pending-indicator
|
|
4857
|
+
/**
|
|
4858
|
+
* Helper component to prevent an Skeleton component from appearing too fast.
|
|
4859
|
+
* https://reactjs.org/docs/concurrent-mode-patterns.html#delaying-a-pending-indicator
|
|
4773
4860
|
*/
|
|
4774
4861
|
const DelayAppearance = /*#__PURE__*/react$1.forwardRef(function DelayAppearance(props, forwardedRef) {
|
|
4775
4862
|
const {
|
|
@@ -4815,7 +4902,9 @@ const SliderInput = /*#__PURE__*/react$1.forwardRef(({
|
|
|
4815
4902
|
},
|
|
4816
4903
|
...__css
|
|
4817
4904
|
}
|
|
4818
|
-
}));
|
|
4905
|
+
}));
|
|
4906
|
+
|
|
4907
|
+
/////////////////////////////////////////////////////
|
|
4819
4908
|
// SliderHandle
|
|
4820
4909
|
|
|
4821
4910
|
const SliderHandle = /*#__PURE__*/react$1.forwardRef(({
|
|
@@ -4873,7 +4962,9 @@ const SliderHandle = /*#__PURE__*/react$1.forwardRef(({
|
|
|
4873
4962
|
boxShadow: 1
|
|
4874
4963
|
}
|
|
4875
4964
|
}), children]
|
|
4876
|
-
}));
|
|
4965
|
+
}));
|
|
4966
|
+
|
|
4967
|
+
/////////////////////////////////////////////////////
|
|
4877
4968
|
// SliderMarker
|
|
4878
4969
|
|
|
4879
4970
|
const SliderMarker = /*#__PURE__*/react$1.forwardRef(({
|
|
@@ -4905,7 +4996,9 @@ const SliderMarker = /*#__PURE__*/react$1.forwardRef(({
|
|
|
4905
4996
|
},
|
|
4906
4997
|
...__css
|
|
4907
4998
|
}
|
|
4908
|
-
}));
|
|
4999
|
+
}));
|
|
5000
|
+
|
|
5001
|
+
/////////////////////////////////////////////////////
|
|
4909
5002
|
// SliderTrack
|
|
4910
5003
|
|
|
4911
5004
|
const SliderTrack = /*#__PURE__*/react$1.forwardRef(({
|
|
@@ -4947,7 +5040,9 @@ const SliderTrack = /*#__PURE__*/react$1.forwardRef(({
|
|
|
4947
5040
|
},
|
|
4948
5041
|
...__css
|
|
4949
5042
|
}
|
|
4950
|
-
}));
|
|
5043
|
+
}));
|
|
5044
|
+
|
|
5045
|
+
/////////////////////////////////////////////////////
|
|
4951
5046
|
// SliderRange
|
|
4952
5047
|
|
|
4953
5048
|
const SliderRange = /*#__PURE__*/react$1.forwardRef(({
|
|
@@ -4980,7 +5075,8 @@ const Slider = /*#__PURE__*/react$1.forwardRef(function Slider(props, forwardedR
|
|
|
4980
5075
|
children,
|
|
4981
5076
|
...otherProps
|
|
4982
5077
|
} = props;
|
|
4983
|
-
return /*#__PURE__*/jsxRuntime.jsx(SliderInput, {
|
|
5078
|
+
return /*#__PURE__*/jsxRuntime.jsx(SliderInput, {
|
|
5079
|
+
...otherProps,
|
|
4984
5080
|
ref: forwardedRef,
|
|
4985
5081
|
"data-reach-slider": "",
|
|
4986
5082
|
children: /*#__PURE__*/jsxRuntime.jsxs(SliderTrack, {
|
|
@@ -4996,11 +5092,9 @@ function useStackItem({
|
|
|
4996
5092
|
closeTimeoutInMilliseconds = 110
|
|
4997
5093
|
}) {
|
|
4998
5094
|
const context = react$1.useContext(StackItemContext);
|
|
4999
|
-
|
|
5000
5095
|
if (!context) {
|
|
5001
5096
|
return null;
|
|
5002
5097
|
}
|
|
5003
|
-
|
|
5004
5098
|
const {
|
|
5005
5099
|
onSetHeight,
|
|
5006
5100
|
onRemoveItem,
|
|
@@ -5009,17 +5103,13 @@ function useStackItem({
|
|
|
5009
5103
|
isExiting
|
|
5010
5104
|
} = context;
|
|
5011
5105
|
/* eslint-disable react-hooks/rules-of-hooks */
|
|
5012
|
-
|
|
5013
5106
|
const [state, setState] = react$1.useState('entering');
|
|
5014
|
-
|
|
5015
5107
|
function onClose() {
|
|
5016
5108
|
setState('exiting');
|
|
5017
5109
|
}
|
|
5018
|
-
|
|
5019
5110
|
react$1.useLayoutEffect(() => {
|
|
5020
5111
|
const height = ref.current?.getBoundingClientRect().height ?? 0;
|
|
5021
5112
|
onSetHeight(height);
|
|
5022
|
-
|
|
5023
5113
|
if (isExiting) {
|
|
5024
5114
|
onClose();
|
|
5025
5115
|
}
|
|
@@ -5048,7 +5138,6 @@ function useStackItem({
|
|
|
5048
5138
|
};
|
|
5049
5139
|
/* eslint-enable react-hooks/rules-of-hooks */
|
|
5050
5140
|
}
|
|
5051
|
-
|
|
5052
5141
|
function StackContent({
|
|
5053
5142
|
gap = 0,
|
|
5054
5143
|
placement,
|
|
@@ -5058,11 +5147,9 @@ function StackContent({
|
|
|
5058
5147
|
const id = react$1.useRef(0);
|
|
5059
5148
|
const items = react$1.useRef([]);
|
|
5060
5149
|
const [, setCounter] = react$1.useState(false);
|
|
5061
|
-
|
|
5062
5150
|
function rerender() {
|
|
5063
5151
|
setCounter(v => !v);
|
|
5064
5152
|
}
|
|
5065
|
-
|
|
5066
5153
|
react$1.useEffect(() => {
|
|
5067
5154
|
onAddItemRef.current = element => {
|
|
5068
5155
|
const itemId = String(++id.current);
|
|
@@ -5071,8 +5158,8 @@ function StackContent({
|
|
|
5071
5158
|
height: undefined,
|
|
5072
5159
|
element,
|
|
5073
5160
|
isExiting: false
|
|
5074
|
-
});
|
|
5075
|
-
|
|
5161
|
+
});
|
|
5162
|
+
// Stack > maxSize? Close items
|
|
5076
5163
|
if (items.current.length > maxSize) {
|
|
5077
5164
|
for (let i = 0; i < items.current.length; i++) {
|
|
5078
5165
|
if (!items.current[i].isExiting) {
|
|
@@ -5081,10 +5168,8 @@ function StackContent({
|
|
|
5081
5168
|
}
|
|
5082
5169
|
}
|
|
5083
5170
|
}
|
|
5084
|
-
|
|
5085
5171
|
rerender();
|
|
5086
5172
|
};
|
|
5087
|
-
|
|
5088
5173
|
return () => {
|
|
5089
5174
|
onAddItemRef.current = null;
|
|
5090
5175
|
};
|
|
@@ -5094,36 +5179,30 @@ function StackContent({
|
|
|
5094
5179
|
const item = items.current.find(({
|
|
5095
5180
|
id: itemId
|
|
5096
5181
|
}) => itemId === id);
|
|
5097
|
-
|
|
5098
5182
|
if (item && item.height !== height) {
|
|
5099
5183
|
item.height = height;
|
|
5100
5184
|
rerender();
|
|
5101
5185
|
}
|
|
5102
5186
|
}
|
|
5103
|
-
|
|
5104
5187
|
function removeItemById(id) {
|
|
5105
5188
|
const previousLength = items.current.length;
|
|
5106
5189
|
items.current = items.current.filter(({
|
|
5107
5190
|
id: itemId
|
|
5108
5191
|
}) => itemId !== id);
|
|
5109
|
-
|
|
5110
5192
|
if (items.current.length !== previousLength) {
|
|
5111
5193
|
rerender();
|
|
5112
5194
|
}
|
|
5113
5195
|
}
|
|
5114
|
-
|
|
5115
5196
|
let y = 0;
|
|
5116
5197
|
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
5117
5198
|
"data-stack-root": "",
|
|
5118
5199
|
children: Array.from(items.current).map(item => {
|
|
5119
5200
|
let posY = undefined;
|
|
5120
5201
|
const height = item.height;
|
|
5121
|
-
|
|
5122
5202
|
if (height) {
|
|
5123
5203
|
posY = y;
|
|
5124
5204
|
y += height + gap;
|
|
5125
5205
|
}
|
|
5126
|
-
|
|
5127
5206
|
return /*#__PURE__*/jsxRuntime.jsx(StackItemContext.Provider, {
|
|
5128
5207
|
value: {
|
|
5129
5208
|
isExiting: item.isExiting,
|
|
@@ -5132,7 +5211,6 @@ function StackContent({
|
|
|
5132
5211
|
if (height === item.height) {
|
|
5133
5212
|
return;
|
|
5134
5213
|
}
|
|
5135
|
-
|
|
5136
5214
|
setHeightById(item.id, height);
|
|
5137
5215
|
},
|
|
5138
5216
|
onRemoveItem: () => removeItemById(item.id),
|
|
@@ -5143,7 +5221,6 @@ function StackContent({
|
|
|
5143
5221
|
})
|
|
5144
5222
|
});
|
|
5145
5223
|
}
|
|
5146
|
-
|
|
5147
5224
|
const StackContext = /*#__PURE__*/react$1.createContext(null);
|
|
5148
5225
|
const StackProvider = ({
|
|
5149
5226
|
children,
|
|
@@ -5167,11 +5244,9 @@ const StackProvider = ({
|
|
|
5167
5244
|
};
|
|
5168
5245
|
function useStack() {
|
|
5169
5246
|
const ctx = react$1.useContext(StackContext);
|
|
5170
|
-
|
|
5171
5247
|
if (!ctx) {
|
|
5172
5248
|
throw new Error('useStack must be used within a StackContext.Provider');
|
|
5173
5249
|
}
|
|
5174
|
-
|
|
5175
5250
|
return ctx;
|
|
5176
5251
|
}
|
|
5177
5252
|
|
|
@@ -5280,11 +5355,9 @@ const commonStyle = {
|
|
|
5280
5355
|
position: 'fixed',
|
|
5281
5356
|
zIndex: 'snackbar'
|
|
5282
5357
|
};
|
|
5283
|
-
|
|
5284
5358
|
function getTransition(timems) {
|
|
5285
5359
|
return `opacity ${timems}ms ${EASING_STANDARD},transform ${timems}ms ${EASING_STANDARD}`;
|
|
5286
5360
|
}
|
|
5287
|
-
|
|
5288
5361
|
const defaultAnimation = {
|
|
5289
5362
|
style: {},
|
|
5290
5363
|
placementStyle: {},
|
|
@@ -5295,11 +5368,9 @@ function useSnackbarAnimation(ref, timeout) {
|
|
|
5295
5368
|
ref,
|
|
5296
5369
|
closeTimeoutInMilliseconds: TRANSITION_TIME
|
|
5297
5370
|
});
|
|
5298
|
-
|
|
5299
5371
|
if (!stackItem) {
|
|
5300
5372
|
return defaultAnimation;
|
|
5301
5373
|
}
|
|
5302
|
-
|
|
5303
5374
|
const {
|
|
5304
5375
|
onClose,
|
|
5305
5376
|
state,
|
|
@@ -5307,46 +5378,51 @@ function useSnackbarAnimation(ref, timeout) {
|
|
|
5307
5378
|
placement
|
|
5308
5379
|
} = stackItem;
|
|
5309
5380
|
const placementStyle = placements[placement].style;
|
|
5310
|
-
const animateFn = placements[placement].animate;
|
|
5381
|
+
const animateFn = placements[placement].animate;
|
|
5311
5382
|
|
|
5383
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
5312
5384
|
react$1.useEffect(() => {
|
|
5313
5385
|
const handler = setTimeout(() => {
|
|
5314
5386
|
onClose();
|
|
5315
5387
|
}, timeout);
|
|
5316
5388
|
return () => {
|
|
5317
5389
|
clearTimeout(handler);
|
|
5318
|
-
};
|
|
5390
|
+
};
|
|
5391
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
5319
5392
|
}, [timeout]);
|
|
5320
|
-
|
|
5321
5393
|
switch (state) {
|
|
5322
5394
|
case 'entering':
|
|
5323
5395
|
return {
|
|
5324
|
-
style: {
|
|
5396
|
+
style: {
|
|
5397
|
+
...animateFn('entering', translateY),
|
|
5325
5398
|
visibility: 'hidden'
|
|
5326
5399
|
},
|
|
5327
|
-
placementStyle: {
|
|
5400
|
+
placementStyle: {
|
|
5401
|
+
...placementStyle,
|
|
5328
5402
|
...commonStyle
|
|
5329
5403
|
},
|
|
5330
5404
|
onClose
|
|
5331
5405
|
};
|
|
5332
|
-
|
|
5333
5406
|
case 'entered':
|
|
5334
5407
|
return {
|
|
5335
|
-
style: {
|
|
5408
|
+
style: {
|
|
5409
|
+
...animateFn('entered', translateY),
|
|
5336
5410
|
transition: getTransition(TRANSITION_TIME)
|
|
5337
5411
|
},
|
|
5338
|
-
placementStyle: {
|
|
5412
|
+
placementStyle: {
|
|
5413
|
+
...placementStyle,
|
|
5339
5414
|
...commonStyle
|
|
5340
5415
|
},
|
|
5341
5416
|
onClose
|
|
5342
5417
|
};
|
|
5343
|
-
|
|
5344
5418
|
case 'exiting':
|
|
5345
5419
|
return {
|
|
5346
|
-
style: {
|
|
5420
|
+
style: {
|
|
5421
|
+
...animateFn('exiting', translateY),
|
|
5347
5422
|
transition: getTransition(TRANSITION_TIME)
|
|
5348
5423
|
},
|
|
5349
|
-
placementStyle: {
|
|
5424
|
+
placementStyle: {
|
|
5425
|
+
...placementStyle,
|
|
5350
5426
|
...commonStyle
|
|
5351
5427
|
},
|
|
5352
5428
|
onClose
|
|
@@ -5393,7 +5469,8 @@ const Snackbar = /*#__PURE__*/react$1.forwardRef(function Snackbar(props, forwar
|
|
|
5393
5469
|
...placementStyle,
|
|
5394
5470
|
...__css
|
|
5395
5471
|
},
|
|
5396
|
-
style: {
|
|
5472
|
+
style: {
|
|
5473
|
+
...style,
|
|
5397
5474
|
...styleProp
|
|
5398
5475
|
},
|
|
5399
5476
|
...otherProps,
|
|
@@ -5511,7 +5588,6 @@ const SwitchCircle = ({
|
|
|
5511
5588
|
});
|
|
5512
5589
|
|
|
5513
5590
|
const CheckBoxCore = core.CheckBox;
|
|
5514
|
-
|
|
5515
5591
|
function getSizeCssVariables(size, hasIcon) {
|
|
5516
5592
|
const multiplier = size === 'small' ? 0.75 : 1;
|
|
5517
5593
|
const BORDER_WIDTH = 2;
|
|
@@ -5533,7 +5609,6 @@ function getSizeCssVariables(size, hasIcon) {
|
|
|
5533
5609
|
})
|
|
5534
5610
|
};
|
|
5535
5611
|
}
|
|
5536
|
-
|
|
5537
5612
|
const SwitchInner = /*#__PURE__*/react$1.forwardRef(function SwitchInner(props, forwardedRef) {
|
|
5538
5613
|
const {
|
|
5539
5614
|
as: Comp = 'input',
|
|
@@ -5610,7 +5685,6 @@ const Switch = /*#__PURE__*/react$1.forwardRef(function Switch(props, forwardedR
|
|
|
5610
5685
|
children,
|
|
5611
5686
|
...otherProps
|
|
5612
5687
|
} = props;
|
|
5613
|
-
|
|
5614
5688
|
const inner = /*#__PURE__*/jsxRuntime.jsx(CheckBoxCore, {
|
|
5615
5689
|
as: SwitchInner,
|
|
5616
5690
|
innerAs: as,
|
|
@@ -5619,11 +5693,9 @@ const Switch = /*#__PURE__*/react$1.forwardRef(function Switch(props, forwardedR
|
|
|
5619
5693
|
disabled: disabled,
|
|
5620
5694
|
...otherProps
|
|
5621
5695
|
});
|
|
5622
|
-
|
|
5623
5696
|
if (!children) {
|
|
5624
5697
|
return inner;
|
|
5625
5698
|
}
|
|
5626
|
-
|
|
5627
5699
|
return /*#__PURE__*/jsxRuntime.jsxs(SelectionControlLabel, {
|
|
5628
5700
|
children: [inner, /*#__PURE__*/jsxRuntime.jsx(SelectionControlText, {
|
|
5629
5701
|
disabled: disabled,
|
|
@@ -5632,6 +5704,8 @@ const Switch = /*#__PURE__*/react$1.forwardRef(function Switch(props, forwardedR
|
|
|
5632
5704
|
});
|
|
5633
5705
|
});
|
|
5634
5706
|
|
|
5707
|
+
// TabIndicator Component
|
|
5708
|
+
|
|
5635
5709
|
const TabIndicatorContext = /*#__PURE__*/react$1.createContext({
|
|
5636
5710
|
currentIndicator: {
|
|
5637
5711
|
current: null
|
|
@@ -5658,7 +5732,7 @@ const TabIndicator = /*#__PURE__*/react$1.forwardRef(function TabIndicator(props
|
|
|
5658
5732
|
const {
|
|
5659
5733
|
currentIndicator
|
|
5660
5734
|
} = useTabIndicatorContext();
|
|
5661
|
-
const resizeObserverRef = react$1.useRef();
|
|
5735
|
+
const resizeObserverRef = react$1.useRef(null);
|
|
5662
5736
|
useEnhancedEffect(() => {
|
|
5663
5737
|
if (selected && ref.current) {
|
|
5664
5738
|
if (currentIndicator.current !== null) {
|
|
@@ -5669,7 +5743,6 @@ const TabIndicator = /*#__PURE__*/react$1.forwardRef(function TabIndicator(props
|
|
|
5669
5743
|
const prevTransition = ref.current.style.transition;
|
|
5670
5744
|
const prevTransform = ref.current.style.transform;
|
|
5671
5745
|
ref.current.style.transition = 'none';
|
|
5672
|
-
|
|
5673
5746
|
if (variant === 'primary') {
|
|
5674
5747
|
const prevWidth = currentIndicator.current.style.getPropertyValue(WIDTH_PROPERTY_NAME);
|
|
5675
5748
|
const currentWidth = ref.current.style.getPropertyValue(WIDTH_PROPERTY_NAME);
|
|
@@ -5679,19 +5752,18 @@ const TabIndicator = /*#__PURE__*/react$1.forwardRef(function TabIndicator(props
|
|
|
5679
5752
|
} else {
|
|
5680
5753
|
const widthDelta = previousClientRect.width / currentClientRect.width;
|
|
5681
5754
|
ref.current.style.transform = `translateX(${xPosition}px) scaleX(${widthDelta})`;
|
|
5682
|
-
}
|
|
5683
|
-
|
|
5755
|
+
}
|
|
5684
5756
|
|
|
5685
|
-
|
|
5757
|
+
// Force repaint before updating classes and transform to ensure the transform properly takes effect
|
|
5758
|
+
ref.current.getBoundingClientRect();
|
|
5686
5759
|
|
|
5760
|
+
// Restore and let transition do it's magic
|
|
5687
5761
|
ref.current.style.transition = prevTransition;
|
|
5688
5762
|
ref.current.style.transform = prevTransform;
|
|
5689
|
-
|
|
5690
5763
|
if (variant === 'primary') {
|
|
5691
5764
|
ref.current.style.setProperty(SCALE_PROPERTY_NAME, '1');
|
|
5692
5765
|
}
|
|
5693
5766
|
}
|
|
5694
|
-
|
|
5695
5767
|
currentIndicator.current = ref.current;
|
|
5696
5768
|
}
|
|
5697
5769
|
}, [selected, variant]);
|
|
@@ -5699,11 +5771,9 @@ const TabIndicator = /*#__PURE__*/react$1.forwardRef(function TabIndicator(props
|
|
|
5699
5771
|
if (variant === 'secondary') {
|
|
5700
5772
|
return;
|
|
5701
5773
|
}
|
|
5702
|
-
|
|
5703
5774
|
if (labelRef.current && ref.current) {
|
|
5704
5775
|
const width = labelRef.current.getBoundingClientRect().width;
|
|
5705
5776
|
ref.current.style.setProperty(WIDTH_PROPERTY_NAME, `${width}px`);
|
|
5706
|
-
|
|
5707
5777
|
if (typeof ResizeObserver === 'function') {
|
|
5708
5778
|
resizeObserverRef.current ??= new ResizeObserver(([entry]) => {
|
|
5709
5779
|
if (ref.current) {
|
|
@@ -5751,6 +5821,8 @@ const TabIndicator = /*#__PURE__*/react$1.forwardRef(function TabIndicator(props
|
|
|
5751
5821
|
});
|
|
5752
5822
|
});
|
|
5753
5823
|
|
|
5824
|
+
// TabList Component
|
|
5825
|
+
|
|
5754
5826
|
const TabListContext = /*#__PURE__*/react$1.createContext({
|
|
5755
5827
|
indicatorColor: 'primary',
|
|
5756
5828
|
textColor: 'on.surface',
|
|
@@ -5949,6 +6021,7 @@ const Table = /*#__PURE__*/react$1.forwardRef((props, ref) => {
|
|
|
5949
6021
|
});
|
|
5950
6022
|
});
|
|
5951
6023
|
|
|
6024
|
+
// TableHead Component
|
|
5952
6025
|
const TableHeadContext = /*#__PURE__*/react$1.createContext(false);
|
|
5953
6026
|
const {
|
|
5954
6027
|
Provider: TableHeadProvider
|
|
@@ -6065,7 +6138,6 @@ const Tooltip = /*#__PURE__*/react$1.forwardRef(function Tooltip(props, forwarde
|
|
|
6065
6138
|
zIndex: 'tooltip',
|
|
6066
6139
|
...__css
|
|
6067
6140
|
};
|
|
6068
|
-
|
|
6069
6141
|
if (!children) {
|
|
6070
6142
|
return /*#__PURE__*/jsxRuntime.jsx(Box, {
|
|
6071
6143
|
ref: forwardedRef,
|
|
@@ -6074,7 +6146,6 @@ const Tooltip = /*#__PURE__*/react$1.forwardRef(function Tooltip(props, forwarde
|
|
|
6074
6146
|
children: label
|
|
6075
6147
|
});
|
|
6076
6148
|
}
|
|
6077
|
-
|
|
6078
6149
|
return /*#__PURE__*/jsxRuntime.jsx(BaseTooltip, {
|
|
6079
6150
|
as: core.Popper,
|
|
6080
6151
|
innerAs: Box,
|
|
@@ -6171,6 +6242,9 @@ exports.SliderMarker = SliderMarker;
|
|
|
6171
6242
|
exports.SliderRange = SliderRange;
|
|
6172
6243
|
exports.SliderTrack = SliderTrack;
|
|
6173
6244
|
exports.Snackbar = Snackbar;
|
|
6245
|
+
exports.SplitButton = SplitButton;
|
|
6246
|
+
exports.SplitButtonGroup = SplitButtonGroup;
|
|
6247
|
+
exports.SplitMenuButton = SplitMenuButton;
|
|
6174
6248
|
exports.StackProvider = StackProvider;
|
|
6175
6249
|
exports.Switch = Switch;
|
|
6176
6250
|
exports.Tab = Tab;
|