@ultraviolet/ui 1.28.0 → 1.29.1
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 +14 -7
- package/dist/index.d.ts +61 -12
- package/dist/react-datepicker/dist/react-datepicker.min.css.js +1 -1
- package/dist/src/components/ActionBar/index.js +22 -37
- package/dist/src/components/Alert/index.js +27 -41
- package/dist/src/components/Avatar/index.js +48 -69
- package/dist/src/components/Badge/index.js +29 -49
- package/dist/src/components/Banner/index.js +42 -62
- package/dist/src/components/BarChart/Tooltip.js +35 -50
- package/dist/src/components/BarChart/index.js +13 -14
- package/dist/src/components/BarStack/index.js +100 -191
- package/dist/src/components/Breadcrumbs/index.js +29 -39
- package/dist/src/components/Bullet/index.js +42 -55
- package/dist/src/components/Button/index.js +73 -99
- package/dist/src/components/Card/index.js +39 -57
- package/dist/src/components/Carousel/index.js +32 -60
- package/dist/src/components/Checkbox/index.js +153 -341
- package/dist/src/components/CheckboxGroup/index.js +25 -27
- package/dist/src/components/CopyButton/index.js +11 -12
- package/dist/src/components/DateInput/index.js +141 -268
- package/dist/src/components/EmptyState/index.js +68 -83
- package/dist/src/components/Expandable/index.js +13 -20
- package/dist/src/components/GlobalAlert/GlobalAlertLink.js +12 -13
- package/dist/src/components/GlobalAlert/index.js +19 -32
- package/dist/src/components/LineChart/CustomLegend.js +80 -89
- package/dist/src/components/LineChart/Tooltip.js +32 -47
- package/dist/src/components/LineChart/helpers.js +15 -50
- package/dist/src/components/LineChart/index.js +23 -33
- package/dist/src/components/Link/index.js +46 -65
- package/dist/src/components/List/Body.js +9 -15
- package/dist/src/components/List/Cell.js +6 -7
- package/dist/src/components/List/HeaderCell.js +28 -56
- package/dist/src/components/List/HeaderRow.js +9 -16
- package/dist/src/components/List/ListContext.js +5 -6
- package/dist/src/components/List/Row.js +44 -90
- package/dist/src/components/List/SelectBar.js +9 -13
- package/dist/src/components/List/SkeletonRows.js +5 -6
- package/dist/src/components/List/index.js +15 -25
- package/dist/src/components/Loader/index.js +18 -25
- package/dist/src/components/Menu/Item.js +39 -49
- package/dist/src/components/Menu/index.js +31 -56
- package/dist/src/components/MenuV2/Item.js +39 -49
- package/dist/src/components/MenuV2/index.js +28 -47
- package/dist/src/components/Meter/index.js +25 -47
- package/dist/src/components/Modal/Dialog.js +33 -58
- package/dist/src/components/Modal/Disclosure.js +8 -9
- package/dist/src/components/Modal/index.js +26 -33
- package/dist/src/components/Notice/index.js +21 -27
- package/dist/src/components/NumberInput/index.js +73 -137
- package/dist/src/components/Pagination/getPageNumbers.js +1 -4
- package/dist/src/components/Pagination/index.js +17 -27
- package/dist/src/components/PasswordCheck/index.js +26 -32
- package/dist/src/components/PasswordStrengthMeter/index.js +25 -44
- package/dist/src/components/PieChart/Legends.js +71 -107
- package/dist/src/components/PieChart/Tooltip.js +33 -36
- package/dist/src/components/PieChart/index.js +13 -17
- package/dist/src/components/Popover/index.js +58 -75
- package/dist/src/components/Popup/helpers.js +13 -15
- package/dist/src/components/Popup/index.js +55 -98
- package/dist/src/components/ProgressBar/index.js +31 -49
- package/dist/src/components/Radio/index.js +58 -113
- package/dist/src/components/RadioGroup/index.js +26 -28
- package/dist/src/components/Row/index.js +25 -31
- package/dist/src/components/SelectInput/index.js +357 -410
- package/dist/src/components/SelectableCard/index.js +60 -111
- package/dist/src/components/Separator/index.js +52 -73
- package/dist/src/components/Skeleton/Block.js +23 -41
- package/dist/src/components/Skeleton/Blocks.js +23 -41
- package/dist/src/components/Skeleton/BoxWithIcon.js +21 -36
- package/dist/src/components/Skeleton/Donut.js +3 -6
- package/dist/src/components/Skeleton/IconSkeleton.js +13 -31
- package/dist/src/components/Skeleton/Line.js +5 -11
- package/dist/src/components/Skeleton/List.js +22 -31
- package/dist/src/components/Skeleton/Slider.js +25 -46
- package/dist/src/components/Skeleton/Square.js +3 -6
- package/dist/src/components/Skeleton/index.js +17 -33
- package/dist/src/components/Snippet/index.js +82 -137
- package/dist/src/components/Stack/index.js +11 -14
- package/dist/src/components/Status/index.js +48 -78
- package/dist/src/components/StepList/index.js +45 -63
- package/dist/src/components/Stepper/index.js +74 -129
- package/dist/src/components/SwitchButton/FocusOverlay.js +13 -23
- package/dist/src/components/SwitchButton/index.js +36 -62
- package/dist/src/components/Table/Body.js +5 -8
- package/dist/src/components/Table/Cell.js +14 -20
- package/dist/src/components/Table/Header.js +8 -14
- package/dist/src/components/Table/HeaderCell.js +40 -56
- package/dist/src/components/Table/HeaderRow.js +4 -5
- package/dist/src/components/Table/Row.js +10 -14
- package/dist/src/components/Table/SelectBar.js +9 -13
- package/dist/src/components/Table/SkeletonRows.js +5 -6
- package/dist/src/components/Table/TableContext.js +6 -7
- package/dist/src/components/Table/index.js +44 -50
- package/dist/src/components/Tabs/Tab.js +57 -118
- package/dist/src/components/Tabs/TabMenu.js +32 -38
- package/dist/src/components/Tabs/TabMenuItem.js +9 -13
- package/dist/src/components/Tabs/index.js +24 -43
- package/dist/src/components/Tag/index.js +57 -74
- package/dist/src/components/TagInput/index.js +63 -94
- package/dist/src/components/TagList/index.js +22 -35
- package/dist/src/components/Text/index.js +29 -31
- package/dist/src/components/TextArea/index.js +240 -0
- package/dist/src/components/TextInput/index.js +166 -260
- package/dist/src/components/TimeInput/index.js +10 -13
- package/dist/src/components/Toaster/index.js +51 -67
- package/dist/src/components/Toggle/index.js +62 -129
- package/dist/src/components/ToggleGroup/index.js +21 -23
- package/dist/src/components/Tooltip/index.js +28 -31
- package/dist/src/components/VerificationCode/index.js +55 -90
- package/dist/src/index.js +1 -0
- package/dist/src/utils/ids.js +1 -6
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -13,8 +13,14 @@ $ pnpm add @ultraviolet/ui @emotion/react @emotion/styled
|
|
|
13
13
|
You will also need to import fonts in your project by adding:
|
|
14
14
|
|
|
15
15
|
```html
|
|
16
|
-
<link
|
|
17
|
-
|
|
16
|
+
<link
|
|
17
|
+
href="https://fonts.cdnfonts.com/css/inter?styles=29139,29137,29140"
|
|
18
|
+
rel="stylesheet"
|
|
19
|
+
/>
|
|
20
|
+
<link
|
|
21
|
+
href="https://fonts.cdnfonts.com/css/jetbrains-mono-2?styles=156604"
|
|
22
|
+
rel="stylesheet"
|
|
23
|
+
/>
|
|
18
24
|
```
|
|
19
25
|
|
|
20
26
|
### Usage
|
|
@@ -25,10 +31,12 @@ import { Button, normalize, theme } from '@ultraviolet/ui'
|
|
|
25
31
|
|
|
26
32
|
const App = () => (
|
|
27
33
|
<ThemeProvider theme={theme}>
|
|
28
|
-
<Global
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
34
|
+
<Global
|
|
35
|
+
styles={css`
|
|
36
|
+
${normalize()}
|
|
37
|
+
`}
|
|
38
|
+
/>
|
|
39
|
+
<Button onClick={() => console.log('clicked')}>Click Me</Button>
|
|
32
40
|
</ThemeProvider>
|
|
33
41
|
)
|
|
34
42
|
```
|
|
@@ -64,7 +72,6 @@ declare module '@emotion/react' {
|
|
|
64
72
|
|
|
65
73
|
Checkout our [documentation website](https://storybook.ultraviolet.scaleway.com/).
|
|
66
74
|
|
|
67
|
-
|
|
68
75
|
## Contributing
|
|
69
76
|
|
|
70
77
|
📝 You can participate in the development and [start contributing](/CONTRIBUTING.md) to it.
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import react__default, { ReactNode, ComponentProps, ButtonHTMLAttributes, AriaRole, MouseEventHandler, JSX, MouseEvent, InputHTMLAttributes, FocusEvent, HTMLAttributeAnchorTarget, AnchorHTMLAttributes, ReactElement, Ref, RefObject, KeyboardEventHandler, HTMLAttributes, CSSProperties, ChangeEventHandler, FocusEventHandler, ForwardRefExoticComponent, ForwardedRef, ElementType, TextareaHTMLAttributes } from 'react';
|
|
2
|
+
import react__default, { ReactNode, ComponentProps, ButtonHTMLAttributes, AriaRole, MouseEventHandler, JSX, MouseEvent, InputHTMLAttributes, FocusEvent, HTMLAttributeAnchorTarget, AnchorHTMLAttributes, ReactElement, Ref, RefObject, KeyboardEventHandler, HTMLAttributes, CSSProperties, ChangeEventHandler, FocusEventHandler, ForwardRefExoticComponent, ForwardedRef, ElementType, DOMAttributes, TextareaHTMLAttributes } from 'react';
|
|
3
3
|
import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
|
|
4
4
|
import * as _emotion_styled from '@emotion/styled';
|
|
5
5
|
import * as _emotion_react from '@emotion/react';
|
|
@@ -944,13 +944,13 @@ declare const VARIANTS_COMPONENTS: {
|
|
|
944
944
|
filled: {
|
|
945
945
|
button: _emotion_styled.StyledComponent<{
|
|
946
946
|
theme?: Theme | undefined;
|
|
947
|
-
as?: react.ElementType<any> | undefined;
|
|
947
|
+
as?: react.ElementType<any, keyof react.JSX.IntrinsicElements> | undefined;
|
|
948
948
|
} & Required<Pick<FinalProps, "size" | "sentiment" | "disabled" | "iconPosition" | "fullWidth">> & {
|
|
949
949
|
iconOnly: boolean;
|
|
950
950
|
}, react.DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
|
|
951
951
|
link: _emotion_styled.StyledComponent<{
|
|
952
952
|
theme?: Theme | undefined;
|
|
953
|
-
as?: react.ElementType<any> | undefined;
|
|
953
|
+
as?: react.ElementType<any, keyof react.JSX.IntrinsicElements> | undefined;
|
|
954
954
|
} & Required<Pick<FinalProps, "size" | "sentiment" | "disabled" | "iconPosition" | "fullWidth">> & {
|
|
955
955
|
iconOnly: boolean;
|
|
956
956
|
}, react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
|
|
@@ -958,13 +958,13 @@ declare const VARIANTS_COMPONENTS: {
|
|
|
958
958
|
outlined: {
|
|
959
959
|
button: _emotion_styled.StyledComponent<{
|
|
960
960
|
theme?: Theme | undefined;
|
|
961
|
-
as?: react.ElementType<any> | undefined;
|
|
961
|
+
as?: react.ElementType<any, keyof react.JSX.IntrinsicElements> | undefined;
|
|
962
962
|
} & Required<Pick<FinalProps, "size" | "sentiment" | "disabled" | "iconPosition" | "fullWidth">> & {
|
|
963
963
|
iconOnly: boolean;
|
|
964
964
|
}, react.DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
|
|
965
965
|
link: _emotion_styled.StyledComponent<{
|
|
966
966
|
theme?: Theme | undefined;
|
|
967
|
-
as?: react.ElementType<any> | undefined;
|
|
967
|
+
as?: react.ElementType<any, keyof react.JSX.IntrinsicElements> | undefined;
|
|
968
968
|
} & Required<Pick<FinalProps, "size" | "sentiment" | "disabled" | "iconPosition" | "fullWidth">> & {
|
|
969
969
|
iconOnly: boolean;
|
|
970
970
|
}, react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
|
|
@@ -972,13 +972,13 @@ declare const VARIANTS_COMPONENTS: {
|
|
|
972
972
|
ghost: {
|
|
973
973
|
button: _emotion_styled.StyledComponent<{
|
|
974
974
|
theme?: Theme | undefined;
|
|
975
|
-
as?: react.ElementType<any> | undefined;
|
|
975
|
+
as?: react.ElementType<any, keyof react.JSX.IntrinsicElements> | undefined;
|
|
976
976
|
} & Required<Pick<FinalProps, "size" | "sentiment" | "disabled" | "iconPosition" | "fullWidth">> & {
|
|
977
977
|
iconOnly: boolean;
|
|
978
978
|
}, react.DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
|
|
979
979
|
link: _emotion_styled.StyledComponent<{
|
|
980
980
|
theme?: Theme | undefined;
|
|
981
|
-
as?: react.ElementType<any> | undefined;
|
|
981
|
+
as?: react.ElementType<any, keyof react.JSX.IntrinsicElements> | undefined;
|
|
982
982
|
} & Required<Pick<FinalProps, "size" | "sentiment" | "disabled" | "iconPosition" | "fullWidth">> & {
|
|
983
983
|
iconOnly: boolean;
|
|
984
984
|
}, react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
|
|
@@ -2242,7 +2242,7 @@ declare const variants$1: {
|
|
|
2242
2242
|
readonly donut: () => _emotion_react_jsx_runtime.JSX.Element;
|
|
2243
2243
|
readonly line: _emotion_styled.StyledComponent<{
|
|
2244
2244
|
theme?: _emotion_react.Theme | undefined;
|
|
2245
|
-
as?: react.ElementType<any> | undefined;
|
|
2245
|
+
as?: react.ElementType<any, keyof react.JSX.IntrinsicElements> | undefined;
|
|
2246
2246
|
}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
2247
2247
|
readonly list: ({ length, col, }: {
|
|
2248
2248
|
length?: number | undefined;
|
|
@@ -2253,7 +2253,7 @@ declare const variants$1: {
|
|
|
2253
2253
|
}) => _emotion_react_jsx_runtime.JSX.Element;
|
|
2254
2254
|
readonly square: _emotion_styled.StyledComponent<{
|
|
2255
2255
|
theme?: _emotion_react.Theme | undefined;
|
|
2256
|
-
as?: react.ElementType<any> | undefined;
|
|
2256
|
+
as?: react.ElementType<any, keyof react.JSX.IntrinsicElements> | undefined;
|
|
2257
2257
|
}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
2258
2258
|
};
|
|
2259
2259
|
type SkeletonVariant = keyof typeof variants$1;
|
|
@@ -2309,7 +2309,7 @@ type StackProps = {
|
|
|
2309
2309
|
*/
|
|
2310
2310
|
declare const Stack: _emotion_styled.StyledComponent<{
|
|
2311
2311
|
theme?: _emotion_react.Theme | undefined;
|
|
2312
|
-
as?: react.ElementType<any> | undefined;
|
|
2312
|
+
as?: react.ElementType<any, keyof react.JSX.IntrinsicElements> | undefined;
|
|
2313
2313
|
} & StackProps, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
2314
2314
|
|
|
2315
2315
|
declare const sentiments: {
|
|
@@ -2662,6 +2662,55 @@ type TextProps = {
|
|
|
2662
2662
|
*/
|
|
2663
2663
|
declare const Text: ({ variant, children, as, color, sentiment, oneLine, placement, prominence, className, disabled, italic, underline, id, dir, htmlFor, "data-testid": dataTestId, }: TextProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
2664
2664
|
|
|
2665
|
+
type TextAreaProps = {
|
|
2666
|
+
id?: string;
|
|
2667
|
+
className?: string;
|
|
2668
|
+
tabIndex?: number;
|
|
2669
|
+
autoFocus?: boolean;
|
|
2670
|
+
label: string;
|
|
2671
|
+
value?: string;
|
|
2672
|
+
onChange: (newValue: string) => void;
|
|
2673
|
+
placeholder?: string;
|
|
2674
|
+
/**
|
|
2675
|
+
* Override others properties : readyOnly, success, error.
|
|
2676
|
+
*/
|
|
2677
|
+
disabled?: boolean;
|
|
2678
|
+
/**
|
|
2679
|
+
* Override others properties : success, error.
|
|
2680
|
+
* Ignored if following props are provided : disabled.
|
|
2681
|
+
*/
|
|
2682
|
+
readOnly?: boolean;
|
|
2683
|
+
/**
|
|
2684
|
+
* Override others properties : error, helper.
|
|
2685
|
+
* Ignored if following props are provided : disabled, readyOnly.
|
|
2686
|
+
*/
|
|
2687
|
+
success?: string;
|
|
2688
|
+
/**
|
|
2689
|
+
* Override others properties : helper.
|
|
2690
|
+
* Ignored if following props are provided : disabled, readyOnly, success.
|
|
2691
|
+
*/
|
|
2692
|
+
error?: string;
|
|
2693
|
+
/**
|
|
2694
|
+
* Ignored if following props are provided : readyOnly, success.
|
|
2695
|
+
*/
|
|
2696
|
+
helper?: ReactNode;
|
|
2697
|
+
rows?: number;
|
|
2698
|
+
minLength?: number;
|
|
2699
|
+
maxLength?: number;
|
|
2700
|
+
tooltip?: string;
|
|
2701
|
+
required?: boolean;
|
|
2702
|
+
'data-testid'?: string;
|
|
2703
|
+
name?: string;
|
|
2704
|
+
onFocus?: DOMAttributes<HTMLTextAreaElement>['onFocus'];
|
|
2705
|
+
onBlur?: DOMAttributes<HTMLTextAreaElement>['onBlur'];
|
|
2706
|
+
clearable?: boolean;
|
|
2707
|
+
labelDescription?: ReactNode;
|
|
2708
|
+
};
|
|
2709
|
+
/**
|
|
2710
|
+
* This component offers an extended textarea HTML
|
|
2711
|
+
*/
|
|
2712
|
+
declare const TextArea: react.ForwardRefExoticComponent<TextAreaProps & react.RefAttributes<HTMLTextAreaElement>>;
|
|
2713
|
+
|
|
2665
2714
|
declare const inputSizes: {
|
|
2666
2715
|
medium: {
|
|
2667
2716
|
default: string;
|
|
@@ -3000,7 +3049,7 @@ declare const pulse: _emotion_react.Keyframes;
|
|
|
3000
3049
|
|
|
3001
3050
|
declare const Breakpoint: _emotion_styled.StyledComponent<{
|
|
3002
3051
|
theme?: _emotion_react.Theme | undefined;
|
|
3003
|
-
as?: react.ElementType<any> | undefined;
|
|
3052
|
+
as?: react.ElementType<any, keyof react.JSX.IntrinsicElements> | undefined;
|
|
3004
3053
|
} & {
|
|
3005
3054
|
down?: "large" | "small" | "xlarge" | "xsmall" | "medium" | undefined;
|
|
3006
3055
|
up?: "large" | "small" | "xlarge" | "xsmall" | "medium" | undefined;
|
|
@@ -3011,4 +3060,4 @@ declare const down: (size: ScreenSize, rules: string) => string;
|
|
|
3011
3060
|
|
|
3012
3061
|
declare const normalize: () => string;
|
|
3013
3062
|
|
|
3014
|
-
export { ActionBar, Alert, Avatar, Badge, Banner, BarChart, BarStack, Breadcrumbs, Breakpoint, Bullet, Button, Card, Carousel, Checkbox, CheckboxGroup, CheckboxGroupCheckbox, CopyButton, DateInput, EmptyState, Expandable, GlobalAlert, LineChart, Link, List, Loader, Menu, MenuV2, Meter, Modal, Notice, NumberInput, Pagination, PasswordCheck, PasswordStrengthMeter, PieChart, Popover, Popup, ProgressBar, Radio, RadioGroup, Row, type SCWUITheme, SelectInput, SelectableCard, Separator, Skeleton, Snippet, Stack, Status, StepList, Stepper, SwitchButton, Table, Tabs, Tag, TagInput, TagList, Text, TextInput, TimeInput, ToastContainer, Toggle, ToggleGroup, Tooltip, type UltravioletUITheme, VerificationCode, bounce, down, extendTheme, fadeIn, fadeOut, flash, getUUID, normalize, ping, pulse, quickScaleDown, scaleBack, scaleDown, scaleForward, scaleUp, sketchIn, sketchOut, slideDownLarge, slideFromBottom, slideFromLeft, slideFromRight, slideFromTop, slideToBottom, slideToLeft, slideToRight, slideToTop, slideUpLarge, toast, unfoldIn, unfoldOut, up, zoomIn, zoomOut };
|
|
3063
|
+
export { ActionBar, Alert, Avatar, Badge, Banner, BarChart, BarStack, Breadcrumbs, Breakpoint, Bullet, Button, Card, Carousel, Checkbox, CheckboxGroup, CheckboxGroupCheckbox, CopyButton, DateInput, EmptyState, Expandable, GlobalAlert, LineChart, Link, List, Loader, Menu, MenuV2, Meter, Modal, Notice, NumberInput, Pagination, PasswordCheck, PasswordStrengthMeter, PieChart, Popover, Popup, ProgressBar, Radio, RadioGroup, Row, type SCWUITheme, SelectInput, SelectableCard, Separator, Skeleton, Snippet, Stack, Status, StepList, Stepper, SwitchButton, Table, Tabs, Tag, TagInput, TagList, Text, TextArea, TextInput, TimeInput, ToastContainer, Toggle, ToggleGroup, Tooltip, type UltravioletUITheme, VerificationCode, bounce, down, extendTheme, fadeIn, fadeOut, flash, getUUID, normalize, ping, pulse, quickScaleDown, scaleBack, scaleDown, scaleForward, scaleUp, sketchIn, sketchOut, slideDownLarge, slideFromBottom, slideFromLeft, slideFromRight, slideFromTop, slideToBottom, slideToLeft, slideToRight, slideToTop, slideUpLarge, toast, unfoldIn, unfoldOut, up, zoomIn, zoomOut };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
var css_248z = ".react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow,.react-datepicker__navigation-icon::before{border-color:#ccc;border-style:solid;border-width:3px 3px 0 0;content:\"\";display:block;height:9px;position:absolute;top:6px;width:9px}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle{margin-left:-4px;position:absolute;width:0}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after{box-sizing:content-box;position:absolute;border:8px solid rgba(0,0,0,0);height:0;width:1px;content:\"\";z-index:-1;border-width:8px;left:-8px}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before{border-bottom-color:#aeaeae}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle{top:0;margin-top:-8px}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after{border-top:none;border-bottom-color:#f0f0f0}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after{top:0}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before{top:-1px;border-bottom-color:#aeaeae}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle{bottom:0;margin-bottom:-8px}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after{border-bottom:none;border-top-color:#fff}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after{bottom:0}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before{bottom:-1px;border-top-color:#aeaeae}.react-datepicker-wrapper{display:inline-block;padding:0;border:0}.react-datepicker{font-family:\"Helvetica Neue\",helvetica,arial,sans-serif;font-size:.8rem;background-color:#fff;color:#000;border:1px solid #aeaeae;border-radius:.3rem;display:inline-block;position:relative}.react-datepicker--time-only .react-datepicker__triangle{left:35px}.react-datepicker--time-only .react-datepicker__time-container{border-left:0}.react-datepicker--time-only .react-datepicker__time,.react-datepicker--time-only .react-datepicker__time-box{border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem}.react-datepicker__triangle{position:absolute;left:50px}.react-datepicker-popper{z-index:1}.react-datepicker-popper[data-placement^=bottom]{padding-top:10px}.react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle,.react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle{left:auto;right:50px}.react-datepicker-popper[data-placement^=top]{padding-bottom:10px}.react-datepicker-popper[data-placement^=right]{padding-left:8px}.react-datepicker-popper[data-placement^=right] .react-datepicker__triangle{left:auto;right:42px}.react-datepicker-popper[data-placement^=left]{padding-right:8px}.react-datepicker-popper[data-placement^=left] .react-datepicker__triangle{left:42px;right:auto}.react-datepicker__header{text-align:center;background-color:#f0f0f0;border-bottom:1px solid #aeaeae;border-top-left-radius:.3rem;padding:8px 0;position:relative}.react-datepicker__header--time{padding-bottom:8px;padding-left:5px;padding-right:5px}.react-datepicker__header--time:not(.react-datepicker__header--time--only){border-top-left-radius:0}.react-datepicker__header:not(.react-datepicker__header--has-time-select){border-top-right-radius:.3rem}.react-datepicker__year-dropdown-container--select,.react-datepicker__month-dropdown-container--select,.react-datepicker__month-year-dropdown-container--select,.react-datepicker__year-dropdown-container--scroll,.react-datepicker__month-dropdown-container--scroll,.react-datepicker__month-year-dropdown-container--scroll{display:inline-block;margin:0 15px}.react-datepicker__current-month,.react-datepicker-time__header,.react-datepicker-year-header{margin-top:0;color:#000;font-weight:bold;font-size:.944rem}.react-datepicker-time__header{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.react-datepicker__navigation{align-items:center;background:none;display:flex;justify-content:center;text-align:center;cursor:pointer;position:absolute;top:2px;padding:0;border:none;z-index:1;height:32px;width:32px;text-indent:-999em;overflow:hidden}.react-datepicker__navigation--previous{left:2px}.react-datepicker__navigation--next{right:2px}.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button){right:85px}.react-datepicker__navigation--years{position:relative;top:0;display:block;margin-left:auto;margin-right:auto}.react-datepicker__navigation--years-previous{top:4px}.react-datepicker__navigation--years-upcoming{top:-4px}.react-datepicker__navigation:hover *::before{border-color:#a6a6a6}.react-datepicker__navigation-icon{position:relative;top:-1px;font-size:20px;width:0}.react-datepicker__navigation-icon--next{left:-2px}.react-datepicker__navigation-icon--next::before{transform:rotate(45deg);left:-7px}.react-datepicker__navigation-icon--previous{right:-2px}.react-datepicker__navigation-icon--previous::before{transform:rotate(225deg);right:-7px}.react-datepicker__month-container{float:left}.react-datepicker__year{margin:.4rem;text-align:center}.react-datepicker__year-wrapper{display:flex;flex-wrap:wrap;max-width:180px}.react-datepicker__year .react-datepicker__year-text{display:inline-block;width:4rem;margin:2px}.react-datepicker__month{margin:.4rem;text-align:center}.react-datepicker__month .react-datepicker__month-text,.react-datepicker__month .react-datepicker__quarter-text{display:inline-block;width:4rem;margin:2px}.react-datepicker__input-time-container{clear:both;width:100%;float:left;margin:5px 0 10px 15px;text-align:left}.react-datepicker__input-time-container .react-datepicker-time__caption{display:inline-block}.react-datepicker__input-time-container .react-datepicker-time__input-container{display:inline-block}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input{display:inline-block;margin-left:10px}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input{width:auto}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]{-moz-appearance:textfield}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter{margin-left:5px;display:inline-block}.react-datepicker__time-container{float:right;border-left:1px solid #aeaeae;width:85px}.react-datepicker__time-container--with-today-button{display:inline;border:1px solid #aeaeae;border-radius:.3rem;position:absolute;right:-87px;top:0}.react-datepicker__time-container .react-datepicker__time{position:relative;background:#fff;border-bottom-right-radius:.3rem}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box{width:85px;overflow-x:hidden;margin:0 auto;text-align:center;border-bottom-right-radius:.3rem}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list{list-style:none;margin:0;height:calc(195px + 1.7rem/2);overflow-y:scroll;padding-right:0;padding-left:0;width:100%;box-sizing:content-box}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item{height:30px;padding:5px 10px;white-space:nowrap}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover{cursor:pointer;background-color:#f0f0f0}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected{background-color:#216ba5;color:#fff;font-weight:bold}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover{background-color:#216ba5}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled{color:#ccc}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover{cursor:default;background-color:rgba(0,0,0,0)}.react-datepicker__week-number{color:#ccc;display:inline-block;width:1.7rem;line-height:1.7rem;text-align:center;margin:.166rem}.react-datepicker__week-number.react-datepicker__week-number--clickable{cursor:pointer}.react-datepicker__week-number.react-datepicker__week-number--clickable:hover{border-radius:.3rem;background-color:#f0f0f0}.react-datepicker__day-names,.react-datepicker__week{white-space:nowrap}.react-datepicker__day-names{margin-bottom:-8px}.react-datepicker__day-name,.react-datepicker__day,.react-datepicker__time-name{color:#000;display:inline-block;width:1.7rem;line-height:1.7rem;text-align:center;margin:.166rem}.react-datepicker__day,.react-datepicker__month-text,.react-datepicker__quarter-text,.react-datepicker__year-text{cursor:pointer}.react-datepicker__day:hover,.react-datepicker__month-text:hover,.react-datepicker__quarter-text:hover,.react-datepicker__year-text:hover{border-radius:.3rem;background-color:#f0f0f0}.react-datepicker__day--today,.react-datepicker__month-text--today,.react-datepicker__quarter-text--today,.react-datepicker__year-text--today{font-weight:bold}.react-datepicker__day--highlighted,.react-datepicker__month-text--highlighted,.react-datepicker__quarter-text--highlighted,.react-datepicker__year-text--highlighted{border-radius:.3rem;background-color:#3dcc4a;color:#fff}.react-datepicker__day--highlighted:hover,.react-datepicker__month-text--highlighted:hover,.react-datepicker__quarter-text--highlighted:hover,.react-datepicker__year-text--highlighted:hover{background-color:#32be3f}.react-datepicker__day--highlighted-custom-1,.react-datepicker__month-text--highlighted-custom-1,.react-datepicker__quarter-text--highlighted-custom-1,.react-datepicker__year-text--highlighted-custom-1{color:#f0f}.react-datepicker__day--highlighted-custom-2,.react-datepicker__month-text--highlighted-custom-2,.react-datepicker__quarter-text--highlighted-custom-2,.react-datepicker__year-text--highlighted-custom-2{color:green}.react-datepicker__day--holidays,.react-datepicker__month-text--holidays,.react-datepicker__quarter-text--holidays,.react-datepicker__year-text--holidays{position:relative;border-radius:.3rem;background-color:#ff6803;color:#fff}.react-datepicker__day--holidays .holiday-overlay,.react-datepicker__month-text--holidays .holiday-overlay,.react-datepicker__quarter-text--holidays .holiday-overlay,.react-datepicker__year-text--holidays .holiday-overlay{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background-color:#333;color:#fff;padding:4px;border-radius:4px;white-space:nowrap;visibility:hidden;opacity:0;transition:visibility 0s,opacity .3s ease-in-out}.react-datepicker__day--holidays:hover,.react-datepicker__month-text--holidays:hover,.react-datepicker__quarter-text--holidays:hover,.react-datepicker__year-text--holidays:hover{background-color:#cf5300}.react-datepicker__day--holidays:hover .holiday-overlay,.react-datepicker__month-text--holidays:hover .holiday-overlay,.react-datepicker__quarter-text--holidays:hover .holiday-overlay,.react-datepicker__year-text--holidays:hover .holiday-overlay{visibility:visible;opacity:1}.react-datepicker__day--selected,.react-datepicker__day--in-selecting-range,.react-datepicker__day--in-range,.react-datepicker__month-text--selected,.react-datepicker__month-text--in-selecting-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--selected,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--selected,.react-datepicker__year-text--in-selecting-range,.react-datepicker__year-text--in-range{border-radius:.3rem;background-color:#216ba5;color:#fff}.react-datepicker__day--selected:hover,.react-datepicker__day--in-selecting-range:hover,.react-datepicker__day--in-range:hover,.react-datepicker__month-text--selected:hover,.react-datepicker__month-text--in-selecting-range:hover,.react-datepicker__month-text--in-range:hover,.react-datepicker__quarter-text--selected:hover,.react-datepicker__quarter-text--in-selecting-range:hover,.react-datepicker__quarter-text--in-range:hover,.react-datepicker__year-text--selected:hover,.react-datepicker__year-text--in-selecting-range:hover,.react-datepicker__year-text--in-range:hover{background-color:#1d5d90}.react-datepicker__day--keyboard-selected,.react-datepicker__month-text--keyboard-selected,.react-datepicker__quarter-text--keyboard-selected,.react-datepicker__year-text--keyboard-selected{border-radius:.3rem;background-color:#bad9f1;color:#000}.react-datepicker__day--keyboard-selected:hover,.react-datepicker__month-text--keyboard-selected:hover,.react-datepicker__quarter-text--keyboard-selected:hover,.react-datepicker__year-text--keyboard-selected:hover{background-color:#1d5d90}.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range){background-color:rgba(33,107,165,.5)}.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range){background-color:#f0f0f0;color:#000}.react-datepicker__day--disabled,.react-datepicker__month-text--disabled,.react-datepicker__quarter-text--disabled,.react-datepicker__year-text--disabled{cursor:default;color:#ccc}.react-datepicker__day--disabled:hover,.react-datepicker__month-text--disabled:hover,.react-datepicker__quarter-text--disabled:hover,.react-datepicker__year-text--disabled:hover{background-color:rgba(0,0,0,0)}.react-datepicker__input-container{position:relative;display:inline-block;width:100%}.react-datepicker__input-container .react-datepicker__calendar-icon{position:absolute;padding:.5rem;box-sizing:content-box}.react-datepicker__view-calendar-icon input{padding:6px 10px 5px 25px}.react-datepicker__year-read-view,.react-datepicker__month-read-view,.react-datepicker__month-year-read-view{border:1px solid rgba(0,0,0,0);border-radius:.3rem;position:relative}.react-datepicker__year-read-view:hover,.react-datepicker__month-read-view:hover,.react-datepicker__month-year-read-view:hover{cursor:pointer}.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow{border-top-color:#b3b3b3}.react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow{transform:rotate(135deg);right:-16px;top:0}.react-datepicker__year-dropdown,.react-datepicker__month-dropdown,.react-datepicker__month-year-dropdown{background-color:#f0f0f0;position:absolute;width:50%;left:25%;top:30px;z-index:1;text-align:center;border-radius:.3rem;border:1px solid #aeaeae}.react-datepicker__year-dropdown:hover,.react-datepicker__month-dropdown:hover,.react-datepicker__month-year-dropdown:hover{cursor:pointer}.react-datepicker__year-dropdown--scrollable,.react-datepicker__month-dropdown--scrollable,.react-datepicker__month-year-dropdown--scrollable{height:150px;overflow-y:scroll}.react-datepicker__year-option,.react-datepicker__month-option,.react-datepicker__month-year-option{line-height:20px;width:100%;display:block;margin-left:auto;margin-right:auto}.react-datepicker__year-option:first-of-type,.react-datepicker__month-option:first-of-type,.react-datepicker__month-year-option:first-of-type{border-top-left-radius:.3rem;border-top-right-radius:.3rem}.react-datepicker__year-option:last-of-type,.react-datepicker__month-option:last-of-type,.react-datepicker__month-year-option:last-of-type{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem}.react-datepicker__year-option:hover,.react-datepicker__month-option:hover,.react-datepicker__month-year-option:hover{background-color:#ccc}.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming{border-bottom-color:#b3b3b3}.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous{border-top-color:#b3b3b3}.react-datepicker__year-option--selected,.react-datepicker__month-option--selected,.react-datepicker__month-year-option--selected{position:absolute;left:15px}.react-datepicker__close-icon{cursor:pointer;background-color:rgba(0,0,0,0);border:0;outline:0;padding:0 6px 0 0;position:absolute;top:0;right:0;height:100%;display:table-cell;vertical-align:middle}.react-datepicker__close-icon::after{cursor:pointer;background-color:#216ba5;color:#fff;border-radius:50%;height:16px;width:16px;padding:2px;font-size:12px;line-height:1;text-align:center;display:table-cell;vertical-align:middle;content:\"×\"}.react-datepicker__today-button{background:#f0f0f0;border-top:1px solid #aeaeae;cursor:pointer;text-align:center;font-weight:bold;padding:5px 0;clear:left}.react-datepicker__portal{position:fixed;width:100vw;height:100vh;background-color:rgba(0,0,0,.8);left:0;top:0;justify-content:center;align-items:center;display:flex;z-index:2147483647}.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__time-name{width:3rem;line-height:3rem}@media(max-width: 400px),(max-height: 550px){.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__time-name{width:2rem;line-height:2rem}}.react-datepicker__portal .react-datepicker__current-month,.react-datepicker__portal .react-datepicker-time__header{font-size:1.44rem}.react-datepicker__children-container{width:13.8rem;margin:.4rem;padding-right:.2rem;padding-left:.2rem;height:auto}.react-datepicker__aria-live{position:absolute;clip-path:circle(0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;width:1px;white-space:nowrap}.react-datepicker__calendar-icon{width:1em;height:1em;vertical-align:-0.125em}\n";
|
|
1
|
+
var css_248z = ".react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow,.react-datepicker__navigation-icon::before{border-color:#ccc;border-style:solid;border-width:3px 3px 0 0;content:\"\";display:block;height:9px;position:absolute;top:6px;width:9px}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle{margin-left:-4px;position:absolute;width:0}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after{box-sizing:content-box;position:absolute;border:8px solid rgba(0,0,0,0);height:0;width:1px;content:\"\";z-index:-1;border-width:8px;left:-8px}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before{border-bottom-color:#aeaeae}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle{top:0;margin-top:-8px}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after{border-top:none;border-bottom-color:#f0f0f0}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after{top:0}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before{top:-1px;border-bottom-color:#aeaeae}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle{bottom:0;margin-bottom:-8px}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after{border-bottom:none;border-top-color:#fff}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after{bottom:0}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before{bottom:-1px;border-top-color:#aeaeae}.react-datepicker-wrapper{display:inline-block;padding:0;border:0}.react-datepicker{font-family:\"Helvetica Neue\",helvetica,arial,sans-serif;font-size:.8rem;background-color:#fff;color:#000;border:1px solid #aeaeae;border-radius:.3rem;display:inline-block;position:relative}.react-datepicker--time-only .react-datepicker__triangle{left:35px}.react-datepicker--time-only .react-datepicker__time-container{border-left:0}.react-datepicker--time-only .react-datepicker__time,.react-datepicker--time-only .react-datepicker__time-box{border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem}.react-datepicker__triangle{position:absolute;left:50px}.react-datepicker-popper{z-index:1}.react-datepicker-popper[data-placement^=bottom]{padding-top:10px}.react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle,.react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle{left:auto;right:50px}.react-datepicker-popper[data-placement^=top]{padding-bottom:10px}.react-datepicker-popper[data-placement^=right]{padding-left:8px}.react-datepicker-popper[data-placement^=right] .react-datepicker__triangle{left:auto;right:42px}.react-datepicker-popper[data-placement^=left]{padding-right:8px}.react-datepicker-popper[data-placement^=left] .react-datepicker__triangle{left:42px;right:auto}.react-datepicker__header{text-align:center;background-color:#f0f0f0;border-bottom:1px solid #aeaeae;border-top-left-radius:.3rem;padding:8px 0;position:relative}.react-datepicker__header--time{padding-bottom:8px;padding-left:5px;padding-right:5px}.react-datepicker__header--time:not(.react-datepicker__header--time--only){border-top-left-radius:0}.react-datepicker__header:not(.react-datepicker__header--has-time-select){border-top-right-radius:.3rem}.react-datepicker__year-dropdown-container--select,.react-datepicker__month-dropdown-container--select,.react-datepicker__month-year-dropdown-container--select,.react-datepicker__year-dropdown-container--scroll,.react-datepicker__month-dropdown-container--scroll,.react-datepicker__month-year-dropdown-container--scroll{display:inline-block;margin:0 15px}.react-datepicker__current-month,.react-datepicker-time__header,.react-datepicker-year-header{margin-top:0;color:#000;font-weight:bold;font-size:.944rem}.react-datepicker-time__header{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.react-datepicker__navigation{align-items:center;background:none;display:flex;justify-content:center;text-align:center;cursor:pointer;position:absolute;top:2px;padding:0;border:none;z-index:1;height:32px;width:32px;text-indent:-999em;overflow:hidden}.react-datepicker__navigation--previous{left:2px}.react-datepicker__navigation--next{right:2px}.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button){right:85px}.react-datepicker__navigation--years{position:relative;top:0;display:block;margin-left:auto;margin-right:auto}.react-datepicker__navigation--years-previous{top:4px}.react-datepicker__navigation--years-upcoming{top:-4px}.react-datepicker__navigation:hover *::before{border-color:#a6a6a6}.react-datepicker__navigation-icon{position:relative;top:-1px;font-size:20px;width:0}.react-datepicker__navigation-icon--next{left:-2px}.react-datepicker__navigation-icon--next::before{transform:rotate(45deg);left:-7px}.react-datepicker__navigation-icon--previous{right:-2px}.react-datepicker__navigation-icon--previous::before{transform:rotate(225deg);right:-7px}.react-datepicker__month-container{float:left}.react-datepicker__year{margin:.4rem;text-align:center}.react-datepicker__year-wrapper{display:flex;flex-wrap:wrap;max-width:180px}.react-datepicker__year .react-datepicker__year-text{display:inline-block;width:4rem;margin:2px}.react-datepicker__month{margin:.4rem;text-align:center}.react-datepicker__month .react-datepicker__month-text,.react-datepicker__month .react-datepicker__quarter-text{display:inline-block;width:4rem;margin:2px}.react-datepicker__input-time-container{clear:both;width:100%;float:left;margin:5px 0 10px 15px;text-align:left}.react-datepicker__input-time-container .react-datepicker-time__caption{display:inline-block}.react-datepicker__input-time-container .react-datepicker-time__input-container{display:inline-block}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input{display:inline-block;margin-left:10px}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input{width:auto}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]{-moz-appearance:textfield}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter{margin-left:5px;display:inline-block}.react-datepicker__time-container{float:right;border-left:1px solid #aeaeae;width:85px}.react-datepicker__time-container--with-today-button{display:inline;border:1px solid #aeaeae;border-radius:.3rem;position:absolute;right:-87px;top:0}.react-datepicker__time-container .react-datepicker__time{position:relative;background:#fff;border-bottom-right-radius:.3rem}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box{width:85px;overflow-x:hidden;margin:0 auto;text-align:center;border-bottom-right-radius:.3rem}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list{list-style:none;margin:0;height:calc(195px + 1.7rem/2);overflow-y:scroll;padding-right:0;padding-left:0;width:100%;box-sizing:content-box}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item{height:30px;padding:5px 10px;white-space:nowrap}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover{cursor:pointer;background-color:#f0f0f0}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected{background-color:#216ba5;color:#fff;font-weight:bold}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover{background-color:#216ba5}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled{color:#ccc}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover{cursor:default;background-color:rgba(0,0,0,0)}.react-datepicker__week-number{color:#ccc;display:inline-block;width:1.7rem;line-height:1.7rem;text-align:center;margin:.166rem}.react-datepicker__week-number.react-datepicker__week-number--clickable{cursor:pointer}.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected,.react-datepicker__week-number--keyboard-selected):hover{border-radius:.3rem;background-color:#f0f0f0}.react-datepicker__week-number--selected{border-radius:.3rem;background-color:#216ba5;color:#fff}.react-datepicker__week-number--selected:hover{background-color:#1d5d90}.react-datepicker__week-number--keyboard-selected{border-radius:.3rem;background-color:#2a87d0;color:#fff}.react-datepicker__week-number--keyboard-selected:hover{background-color:#1d5d90}.react-datepicker__day-names{white-space:nowrap;margin-bottom:-8px}.react-datepicker__week{white-space:nowrap}.react-datepicker__day-name,.react-datepicker__day,.react-datepicker__time-name{color:#000;display:inline-block;width:1.7rem;line-height:1.7rem;text-align:center;margin:.166rem}.react-datepicker__day,.react-datepicker__month-text,.react-datepicker__quarter-text,.react-datepicker__year-text{cursor:pointer}.react-datepicker__day:hover,.react-datepicker__month-text:hover,.react-datepicker__quarter-text:hover,.react-datepicker__year-text:hover{border-radius:.3rem;background-color:#f0f0f0}.react-datepicker__day--today,.react-datepicker__month-text--today,.react-datepicker__quarter-text--today,.react-datepicker__year-text--today{font-weight:bold}.react-datepicker__day--highlighted,.react-datepicker__month-text--highlighted,.react-datepicker__quarter-text--highlighted,.react-datepicker__year-text--highlighted{border-radius:.3rem;background-color:#3dcc4a;color:#fff}.react-datepicker__day--highlighted:hover,.react-datepicker__month-text--highlighted:hover,.react-datepicker__quarter-text--highlighted:hover,.react-datepicker__year-text--highlighted:hover{background-color:#32be3f}.react-datepicker__day--highlighted-custom-1,.react-datepicker__month-text--highlighted-custom-1,.react-datepicker__quarter-text--highlighted-custom-1,.react-datepicker__year-text--highlighted-custom-1{color:#f0f}.react-datepicker__day--highlighted-custom-2,.react-datepicker__month-text--highlighted-custom-2,.react-datepicker__quarter-text--highlighted-custom-2,.react-datepicker__year-text--highlighted-custom-2{color:green}.react-datepicker__day--holidays,.react-datepicker__month-text--holidays,.react-datepicker__quarter-text--holidays,.react-datepicker__year-text--holidays{position:relative;border-radius:.3rem;background-color:#ff6803;color:#fff}.react-datepicker__day--holidays .holiday-overlay,.react-datepicker__month-text--holidays .holiday-overlay,.react-datepicker__quarter-text--holidays .holiday-overlay,.react-datepicker__year-text--holidays .holiday-overlay{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background-color:#333;color:#fff;padding:4px;border-radius:4px;white-space:nowrap;visibility:hidden;opacity:0;transition:visibility 0s,opacity .3s ease-in-out}.react-datepicker__day--holidays:hover,.react-datepicker__month-text--holidays:hover,.react-datepicker__quarter-text--holidays:hover,.react-datepicker__year-text--holidays:hover{background-color:#cf5300}.react-datepicker__day--holidays:hover .holiday-overlay,.react-datepicker__month-text--holidays:hover .holiday-overlay,.react-datepicker__quarter-text--holidays:hover .holiday-overlay,.react-datepicker__year-text--holidays:hover .holiday-overlay{visibility:visible;opacity:1}.react-datepicker__day--selected,.react-datepicker__day--in-selecting-range,.react-datepicker__day--in-range,.react-datepicker__month-text--selected,.react-datepicker__month-text--in-selecting-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--selected,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--selected,.react-datepicker__year-text--in-selecting-range,.react-datepicker__year-text--in-range{border-radius:.3rem;background-color:#216ba5;color:#fff}.react-datepicker__day--selected:hover,.react-datepicker__day--in-selecting-range:hover,.react-datepicker__day--in-range:hover,.react-datepicker__month-text--selected:hover,.react-datepicker__month-text--in-selecting-range:hover,.react-datepicker__month-text--in-range:hover,.react-datepicker__quarter-text--selected:hover,.react-datepicker__quarter-text--in-selecting-range:hover,.react-datepicker__quarter-text--in-range:hover,.react-datepicker__year-text--selected:hover,.react-datepicker__year-text--in-selecting-range:hover,.react-datepicker__year-text--in-range:hover{background-color:#1d5d90}.react-datepicker__day--keyboard-selected,.react-datepicker__month-text--keyboard-selected,.react-datepicker__quarter-text--keyboard-selected,.react-datepicker__year-text--keyboard-selected{border-radius:.3rem;background-color:#bad9f1;color:#000}.react-datepicker__day--keyboard-selected:hover,.react-datepicker__month-text--keyboard-selected:hover,.react-datepicker__quarter-text--keyboard-selected:hover,.react-datepicker__year-text--keyboard-selected:hover{background-color:#1d5d90}.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range){background-color:rgba(33,107,165,.5)}.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range){background-color:#f0f0f0;color:#000}.react-datepicker__day--disabled,.react-datepicker__month-text--disabled,.react-datepicker__quarter-text--disabled,.react-datepicker__year-text--disabled{cursor:default;color:#ccc}.react-datepicker__day--disabled:hover,.react-datepicker__month-text--disabled:hover,.react-datepicker__quarter-text--disabled:hover,.react-datepicker__year-text--disabled:hover{background-color:rgba(0,0,0,0)}.react-datepicker__input-container{position:relative;display:inline-block;width:100%}.react-datepicker__input-container .react-datepicker__calendar-icon{position:absolute;padding:.5rem;box-sizing:content-box}.react-datepicker__view-calendar-icon input{padding:6px 10px 5px 25px}.react-datepicker__year-read-view,.react-datepicker__month-read-view,.react-datepicker__month-year-read-view{border:1px solid rgba(0,0,0,0);border-radius:.3rem;position:relative}.react-datepicker__year-read-view:hover,.react-datepicker__month-read-view:hover,.react-datepicker__month-year-read-view:hover{cursor:pointer}.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow{border-top-color:#b3b3b3}.react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow{transform:rotate(135deg);right:-16px;top:0}.react-datepicker__year-dropdown,.react-datepicker__month-dropdown,.react-datepicker__month-year-dropdown{background-color:#f0f0f0;position:absolute;width:50%;left:25%;top:30px;z-index:1;text-align:center;border-radius:.3rem;border:1px solid #aeaeae}.react-datepicker__year-dropdown:hover,.react-datepicker__month-dropdown:hover,.react-datepicker__month-year-dropdown:hover{cursor:pointer}.react-datepicker__year-dropdown--scrollable,.react-datepicker__month-dropdown--scrollable,.react-datepicker__month-year-dropdown--scrollable{height:150px;overflow-y:scroll}.react-datepicker__year-option,.react-datepicker__month-option,.react-datepicker__month-year-option{line-height:20px;width:100%;display:block;margin-left:auto;margin-right:auto}.react-datepicker__year-option:first-of-type,.react-datepicker__month-option:first-of-type,.react-datepicker__month-year-option:first-of-type{border-top-left-radius:.3rem;border-top-right-radius:.3rem}.react-datepicker__year-option:last-of-type,.react-datepicker__month-option:last-of-type,.react-datepicker__month-year-option:last-of-type{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem}.react-datepicker__year-option:hover,.react-datepicker__month-option:hover,.react-datepicker__month-year-option:hover{background-color:#ccc}.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming{border-bottom-color:#b3b3b3}.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous{border-top-color:#b3b3b3}.react-datepicker__year-option--selected,.react-datepicker__month-option--selected,.react-datepicker__month-year-option--selected{position:absolute;left:15px}.react-datepicker__close-icon{cursor:pointer;background-color:rgba(0,0,0,0);border:0;outline:0;padding:0 6px 0 0;position:absolute;top:0;right:0;height:100%;display:table-cell;vertical-align:middle}.react-datepicker__close-icon::after{cursor:pointer;background-color:#216ba5;color:#fff;border-radius:50%;height:16px;width:16px;padding:2px;font-size:12px;line-height:1;text-align:center;display:table-cell;vertical-align:middle;content:\"×\"}.react-datepicker__today-button{background:#f0f0f0;border-top:1px solid #aeaeae;cursor:pointer;text-align:center;font-weight:bold;padding:5px 0;clear:left}.react-datepicker__portal{position:fixed;width:100vw;height:100vh;background-color:rgba(0,0,0,.8);left:0;top:0;justify-content:center;align-items:center;display:flex;z-index:2147483647}.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__time-name{width:3rem;line-height:3rem}@media(max-width: 400px),(max-height: 550px){.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__time-name{width:2rem;line-height:2rem}}.react-datepicker__portal .react-datepicker__current-month,.react-datepicker__portal .react-datepicker-time__header{font-size:1.44rem}.react-datepicker__children-container{width:13.8rem;margin:.4rem;padding-right:.2rem;padding-left:.2rem;height:auto}.react-datepicker__aria-live{position:absolute;clip-path:circle(0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;width:1px;white-space:nowrap}.react-datepicker__calendar-icon{width:1em;height:1em;vertical-align:-0.125em}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
@@ -7,27 +7,15 @@ const HEIGHT = 56;
|
|
|
7
7
|
const SPACING = 20;
|
|
8
8
|
const StyledDiv = /*#__PURE__*/_styled("div", {
|
|
9
9
|
target: "enye6lh0"
|
|
10
|
-
})("background:",
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
return theme.radii.default;
|
|
20
|
-
}, ";bottom:", _ref3 => {
|
|
21
|
-
let {
|
|
22
|
-
rank
|
|
23
|
-
} = _ref3;
|
|
24
|
-
return SPACING + rank * (HEIGHT + SPACING);
|
|
25
|
-
}, "px;box-shadow:", _ref4 => {
|
|
26
|
-
let {
|
|
27
|
-
theme
|
|
28
|
-
} = _ref4;
|
|
29
|
-
return theme.shadows.defaultShadow;
|
|
30
|
-
}, ";height:", HEIGHT, "px;left:50%;position:fixed;transform:translate(-50%, 0);width:600px;animation:", fadeIn, " 0.2s ease-in-out;");
|
|
10
|
+
})("background:", ({
|
|
11
|
+
theme
|
|
12
|
+
}) => theme.colors.neutral.backgroundWeakElevated, ";border-radius:", ({
|
|
13
|
+
theme
|
|
14
|
+
}) => theme.radii.default, ";bottom:", ({
|
|
15
|
+
rank
|
|
16
|
+
}) => SPACING + rank * (HEIGHT + SPACING), "px;box-shadow:", ({
|
|
17
|
+
theme
|
|
18
|
+
}) => theme.shadows.defaultShadow, ";height:", HEIGHT, "px;left:50%;position:fixed;transform:translate(-50%, 0);width:600px;animation:", fadeIn, " 0.2s ease-in-out;");
|
|
31
19
|
/**
|
|
32
20
|
* The ActionBar is a floating bar that appears at the bottom of a page.
|
|
33
21
|
* It can be used to display important actions or information to the user, and can be configured to display a variety of different content types.
|
|
@@ -35,21 +23,18 @@ const StyledDiv = /*#__PURE__*/_styled("div", {
|
|
|
35
23
|
* **Note:** ActionBar is added into a portal at the end of the body element. This means that it will always be on top of other elements without `z-index`,
|
|
36
24
|
* and will not be affected by the layout of the page it is on.
|
|
37
25
|
*/
|
|
38
|
-
const ActionBar =
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
children: children
|
|
52
|
-
}), document.body);
|
|
53
|
-
};
|
|
26
|
+
const ActionBar = ({
|
|
27
|
+
children,
|
|
28
|
+
role = 'dialog',
|
|
29
|
+
rank = 0,
|
|
30
|
+
className,
|
|
31
|
+
'data-testid': dataTestId
|
|
32
|
+
}) => /*#__PURE__*/createPortal(jsx(StyledDiv, {
|
|
33
|
+
rank: rank,
|
|
34
|
+
role: role,
|
|
35
|
+
className: className,
|
|
36
|
+
"data-testid": dataTestId,
|
|
37
|
+
children: children
|
|
38
|
+
}), document.body);
|
|
54
39
|
|
|
55
40
|
export { ActionBar };
|
|
@@ -8,11 +8,10 @@ import { Text } from '../Text/index.js';
|
|
|
8
8
|
import { jsxs, jsx } from '@emotion/react/jsx-runtime';
|
|
9
9
|
|
|
10
10
|
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
|
11
|
-
const alertStyles =
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
} = _ref;
|
|
11
|
+
const alertStyles = ({
|
|
12
|
+
theme,
|
|
13
|
+
sentiment
|
|
14
|
+
}) => {
|
|
16
15
|
const sentimentColor = theme.colors[sentiment];
|
|
17
16
|
return /*#__PURE__*/css("background-color:", sentimentColor.background, ";color:", sentimentColor.text, ";border-left:4px solid ", sentimentColor.border, ";");
|
|
18
17
|
};
|
|
@@ -25,25 +24,16 @@ const typesDefaultIcons = {
|
|
|
25
24
|
const StyledStackContainer = /*#__PURE__*/_styled(Stack, {
|
|
26
25
|
shouldForwardProp: prop => !['sentiment'].includes(prop),
|
|
27
26
|
target: "e17p0ih04"
|
|
28
|
-
})("border-radius:",
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}, ";padding:", _ref3 => {
|
|
34
|
-
let {
|
|
35
|
-
theme
|
|
36
|
-
} = _ref3;
|
|
37
|
-
return theme.space['2'];
|
|
38
|
-
}, ";", alertStyles, ";");
|
|
27
|
+
})("border-radius:", ({
|
|
28
|
+
theme
|
|
29
|
+
}) => theme.radii.default, ";padding:", ({
|
|
30
|
+
theme
|
|
31
|
+
}) => theme.space['2'], ";", alertStyles, ";");
|
|
39
32
|
const TextStack = /*#__PURE__*/_styled(Stack, {
|
|
40
33
|
target: "e17p0ih03"
|
|
41
|
-
})("color:",
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
} = _ref4;
|
|
45
|
-
return theme.colors.neutral.text;
|
|
46
|
-
}, ";flex-wrap:wrap;");
|
|
34
|
+
})("color:", ({
|
|
35
|
+
theme
|
|
36
|
+
}) => theme.colors.neutral.text, ";flex-wrap:wrap;");
|
|
47
37
|
const WrapStack = /*#__PURE__*/_styled(Stack, {
|
|
48
38
|
target: "e17p0ih02"
|
|
49
39
|
})(process.env.NODE_ENV === "production" ? {
|
|
@@ -56,12 +46,9 @@ const WrapStack = /*#__PURE__*/_styled(Stack, {
|
|
|
56
46
|
});
|
|
57
47
|
const StyledButton = /*#__PURE__*/_styled(Button, {
|
|
58
48
|
target: "e17p0ih01"
|
|
59
|
-
})("margin-left:",
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
} = _ref5;
|
|
63
|
-
return theme.space['5'];
|
|
64
|
-
}, ";");
|
|
49
|
+
})("margin-left:", ({
|
|
50
|
+
theme
|
|
51
|
+
}) => theme.space['5'], ";");
|
|
65
52
|
const CloseButton = /*#__PURE__*/_styled(Button, {
|
|
66
53
|
target: "e17p0ih00"
|
|
67
54
|
})(process.env.NODE_ENV === "production" ? {
|
|
@@ -75,19 +62,18 @@ const CloseButton = /*#__PURE__*/_styled(Button, {
|
|
|
75
62
|
/**
|
|
76
63
|
* Alert component is used to display a short, important message in a way that attracts the user's attention without interrupting the user's task.
|
|
77
64
|
*/
|
|
78
|
-
const Alert =
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
} = _ref6;
|
|
65
|
+
const Alert = ({
|
|
66
|
+
children,
|
|
67
|
+
title,
|
|
68
|
+
sentiment = 'danger',
|
|
69
|
+
buttonText,
|
|
70
|
+
onClickButton,
|
|
71
|
+
closable,
|
|
72
|
+
onClose,
|
|
73
|
+
className,
|
|
74
|
+
disabled,
|
|
75
|
+
'data-testid': dataTestId
|
|
76
|
+
}) => {
|
|
91
77
|
const [opened, setOpened] = useState(true);
|
|
92
78
|
if (!opened) return null;
|
|
93
79
|
return jsxs(StyledStackContainer, {
|
|
@@ -15,80 +15,59 @@ const formatTextToAvatar = text => {
|
|
|
15
15
|
};
|
|
16
16
|
const StyledTextAvatar = /*#__PURE__*/_styled("span", {
|
|
17
17
|
target: "ec0473m1"
|
|
18
|
-
})("align-items:center;background-color:",
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
}, ";color:", _ref3 => {
|
|
31
|
-
let {
|
|
32
|
-
theme,
|
|
33
|
-
textColor
|
|
34
|
-
} = _ref3;
|
|
35
|
-
return theme.colors[textColor]?.textStronger || theme.colors[textColor]?.textStrong || textColor;
|
|
36
|
-
}, ";font-size:", _ref4 => {
|
|
37
|
-
let {
|
|
38
|
-
textSize
|
|
39
|
-
} = _ref4;
|
|
40
|
-
return textSize;
|
|
41
|
-
}, "px;display:flex;height:100%;justify-content:center;width:100%;");
|
|
18
|
+
})("align-items:center;background-color:", ({
|
|
19
|
+
lock,
|
|
20
|
+
theme,
|
|
21
|
+
textBgColor
|
|
22
|
+
}) => lock ? theme.colors.neutral.backgroundStrong : theme.colors[textBgColor]?.backgroundStrong || textBgColor, ";border-radius:", ({
|
|
23
|
+
theme
|
|
24
|
+
}) => theme.radii.circle, ";color:", ({
|
|
25
|
+
theme,
|
|
26
|
+
textColor
|
|
27
|
+
}) => theme.colors[textColor]?.textStronger || theme.colors[textColor]?.textStrong || textColor, ";font-size:", ({
|
|
28
|
+
textSize
|
|
29
|
+
}) => textSize, "px;display:flex;height:100%;justify-content:center;width:100%;");
|
|
42
30
|
const AvatarContainer = /*#__PURE__*/_styled("div", {
|
|
43
31
|
target: "ec0473m0"
|
|
44
|
-
})("height:",
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
}, "px;width:", _ref6 => {
|
|
50
|
-
let {
|
|
51
|
-
size
|
|
52
|
-
} = _ref6;
|
|
53
|
-
return size;
|
|
54
|
-
}, "px;");
|
|
32
|
+
})("height:", ({
|
|
33
|
+
size
|
|
34
|
+
}) => size, "px;width:", ({
|
|
35
|
+
size
|
|
36
|
+
}) => size, "px;");
|
|
55
37
|
|
|
56
38
|
/**
|
|
57
39
|
* Avatar component is used to display a user's profile picture or initials.
|
|
58
40
|
*/
|
|
59
|
-
const Avatar =
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
})
|
|
91
|
-
});
|
|
92
|
-
};
|
|
41
|
+
const Avatar = ({
|
|
42
|
+
image,
|
|
43
|
+
size = 32,
|
|
44
|
+
text,
|
|
45
|
+
textBgColor = 'secondary',
|
|
46
|
+
textColor = 'neutral',
|
|
47
|
+
textSize = 10,
|
|
48
|
+
lock = false,
|
|
49
|
+
className,
|
|
50
|
+
'data-testid': dataTestId
|
|
51
|
+
}) => jsx(AvatarContainer, {
|
|
52
|
+
size: size,
|
|
53
|
+
className: className,
|
|
54
|
+
"data-testid": dataTestId,
|
|
55
|
+
children: text || !text && !image ? jsx(StyledTextAvatar, {
|
|
56
|
+
lock: lock,
|
|
57
|
+
textBgColor: textBgColor,
|
|
58
|
+
textColor: textColor,
|
|
59
|
+
textSize: textSize,
|
|
60
|
+
children: lock ? jsx(Icon, {
|
|
61
|
+
name: "lock",
|
|
62
|
+
color: "neutral",
|
|
63
|
+
prominence: "weak"
|
|
64
|
+
}) : formatTextToAvatar(text)
|
|
65
|
+
}) : jsx("img", {
|
|
66
|
+
width: "100%",
|
|
67
|
+
height: "100%",
|
|
68
|
+
src: image ?? '',
|
|
69
|
+
alt: ""
|
|
70
|
+
})
|
|
71
|
+
});
|
|
93
72
|
|
|
94
73
|
export { Avatar };
|