@ultraviolet/ui 1.18.1 → 1.20.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import react__default, { ReactNode, ComponentProps, ButtonHTMLAttributes, AriaRole, MouseEventHandler, JSX, MouseEvent, InputHTMLAttributes, HTMLAttributeAnchorTarget, AnchorHTMLAttributes, ReactElement, Ref, RefObject, KeyboardEventHandler, HTMLAttributes, CSSProperties, ChangeEventHandler, FocusEventHandler, ForwardRefExoticComponent, ForwardedRef, ElementType, TextareaHTMLAttributes } from 'react';
+import react__default, { ReactNode, ComponentProps, ButtonHTMLAttributes, AriaRole, MouseEventHandler, JSX, MouseEvent, InputHTMLAttributes, HTMLAttributeAnchorTarget, AnchorHTMLAttributes, ReactElement, Ref, KeyboardEventHandler, RefObject, HTMLAttributes, CSSProperties, ChangeEventHandler, FocusEventHandler, ForwardRefExoticComponent, ForwardedRef, ElementType, TextareaHTMLAttributes } from 'react';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as _emotion_styled from '@emotion/styled';
 import * as _emotion_react from '@emotion/react';
@@ -1117,6 +1117,7 @@ declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttribu
 
 type CarouselItemProps = {
     children: ReactNode;
+    width?: string;
 };
 type CarouselProps = {
     className?: string;
@@ -1128,7 +1129,7 @@ type CarouselProps = {
  */
 declare const Carousel: {
     ({ children, className, "data-testid": dataTestId, }: CarouselProps): JSX.Element;
-    Item: ({ children }: CarouselItemProps) => JSX.Element;
+    Item: ({ children, width, }: CarouselItemProps) => JSX.Element;
 };
 
 type CheckboxProps = {
@@ -1180,14 +1181,14 @@ type CopyButtonProps = {
  */
 declare const CopyButton: ({ size, value, copyText, copiedText, sentiment, noBorder, className, "data-testid": dataTestId, }: CopyButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-type DateInputProps = Pick<ReactDatePickerProps<string>, 'autoFocus' | 'disabled' | 'locale' | 'maxDate' | 'minDate' | 'name' | 'onBlur' | 'onChange' | 'onFocus' | 'required'> & {
+type DateInputProps = Pick<ReactDatePickerProps<string, boolean>, 'autoFocus' | 'disabled' | 'locale' | 'maxDate' | 'minDate' | 'startDate' | 'endDate' | 'name' | 'onBlur' | 'onChange' | 'onFocus' | 'required' | 'excludeDates' | 'selectsRange'> & {
     error?: string;
     format?: (value?: Date | string) => string | undefined;
     /**
      * Label of the field
      */
     label?: string;
-    value?: Date | string;
+    value?: Date | string | [Date | null, Date | null];
     className?: string;
     'data-testid'?: string;
 };
@@ -1195,7 +1196,7 @@ type DateInputProps = Pick<ReactDatePickerProps<string>, 'autoFocus' | 'disabled
  * DateInput is a wrapper around react-datepicker that provides a consistent look and feel with the rest of the Ultraviolet UI.
  * See https://reactdatepicker.com/ for more information.
  */
-declare const DateInput: ({ autoFocus, disabled, error, format, label, locale, maxDate, minDate, name, onBlur, onChange, onFocus, required, value, className, "data-testid": dataTestId, }: DateInputProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const DateInput: ({ autoFocus, disabled, error, format, label, locale, maxDate, minDate, startDate, endDate, name, onBlur, onChange, onFocus, required, excludeDates, value, selectsRange, className, "data-testid": dataTestId, }: DateInputProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 declare const CONTAINER_SIZES: {
     readonly small: 720;
@@ -1494,15 +1495,23 @@ declare const Meter: ({ strength, title, value, className, "data-testid": dataTe
 type ModalSize = 'large' | 'medium' | 'small' | 'xsmall' | 'xxsmall';
 type ModalPlacement = 'bottom' | 'bottom-left' | 'bottom-right' | 'center' | 'top' | 'top-left' | 'top-right' | 'right' | 'left';
 type ModalState = {
+    /**
+     * @deprecated use show
+     */
     onOpen: () => void;
+    /**
+     * @deprecated use close
+     */
     onClose: () => void;
     toggle: () => void;
     visible: boolean;
     modalId: string;
     /**
-     * @deprecated use onClose
+     * @deprecated use close
      */
     hide: () => void;
+    close: () => void;
+    show: () => void;
 };
 
 type ModalProps = {
@@ -1730,6 +1739,49 @@ declare const PieChart: ({ height, width, data, emptyLegend, content, withLegend
 
 type PopupPlacement = 'top' | 'right' | 'bottom' | 'left' | 'auto';
 
+type SentimentType = 'neutral' | 'primary';
+/**
+ * Popover component is used to display additional information or actions on top of the main content of the page.
+ * It is usually triggered by clicking on a button. It includes a title, a close button and a content area.
+ */
+declare const Popover: react.ForwardRefExoticComponent<{
+    children: ReactNode;
+    content: ReactNode;
+    title: string;
+    sentiment?: SentimentType | undefined;
+    visible?: boolean | undefined;
+    size?: "large" | "small" | "medium" | undefined;
+    onClose?: (() => void) | undefined;
+    className?: string | undefined;
+    'data-testid'?: string | undefined;
+} & Pick<{
+    id?: string | undefined;
+    children: ReactNode | ((renderProps: {
+        className?: string | undefined;
+        onBlur: () => void;
+        onFocus: () => void;
+        onPointerEnter: () => void;
+        onPointerLeave: () => void;
+        ref: react.RefObject<HTMLDivElement>;
+    }) => ReactNode);
+    maxWidth?: number | undefined;
+    placement?: PopupPlacement | undefined;
+    text?: ReactNode;
+    className?: string | undefined;
+    containerFullWidth?: boolean | undefined;
+    visible?: boolean | undefined;
+    innerRef?: Ref<HTMLDivElement | null> | undefined;
+    role?: string | undefined;
+    'data-testid'?: string | undefined;
+    hasArrow?: boolean | undefined;
+    onClose?: (() => void) | undefined;
+    tabIndex?: number | undefined;
+    onKeyDown?: KeyboardEventHandler | undefined;
+    'aria-haspopup'?: boolean | "menu" | "dialog" | "grid" | "listbox" | "tree" | "false" | "true" | undefined;
+    hideOnClickOutside?: boolean | undefined;
+    needDebounce?: boolean | undefined;
+} & react.RefAttributes<HTMLDivElement>, "placement"> & react.RefAttributes<HTMLDivElement>>;
+
 type PopupProps = {
     /**
      * Id is automatically generated if not set. It is used for associating tooltip wrapper with tooltip portal.
@@ -1772,30 +1824,10 @@ type PopupProps = {
     hideOnClickOutside?: boolean;
     needDebounce?: boolean;
 };
-declare const Popup: react.ForwardRefExoticComponent<PopupProps & react.RefAttributes<HTMLDivElement>>;
-
-type SentimentType = 'neutral' | 'primary';
-declare const SIZES_WIDTH: {
-    small: number;
-    medium: number;
-    large: number;
-};
-type PopoverProps = {
-    children: ReactNode;
-    content: ReactNode;
-    title: string;
-    sentiment?: SentimentType;
-    visible?: boolean;
-    size?: keyof typeof SIZES_WIDTH;
-    onClose?: () => void;
-    className?: string;
-    'data-testid'?: string;
-} & Pick<ComponentProps<typeof Popup>, 'placement'>;
 /**
- * Popover component is used to display additional information or actions on top of the main content of the page.
- * It is usually triggered by clicking on a button. It includes a title, a close button and a content area.
+ * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
-declare const Popover: ({ visible, children, placement, content, title, sentiment, size, onClose, className, "data-testid": dataTestId, }: PopoverProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const Popup: react.ForwardRefExoticComponent<PopupProps & react.RefAttributes<HTMLDivElement>>;
 
 declare const progressBarSentiments: readonly ["primary", "success", "warning", "info"];
 type ProgressBarProps = {
@@ -2687,4 +2719,4 @@ declare const down: (size: ScreenSize, rules: string) => string;
 
 declare const normalize: () => string;
 
-export { ActionBar, Alert, Avatar, Badge, Banner, BarChart, BarStack, Breadcrumbs, Breakpoint, Bullet, Button, Card, Carousel, Checkbox, CheckboxGroup, CheckboxGroupCheckbox, CopyButton, DateInput, EmptyState, Expandable, LineChart, Link, List, Loader, Menu, MenuV2, Meter, Modal, Notice, NumberInput, Pagination, PasswordCheck, PasswordStrengthMeter, PieChart, Popover, 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 };
+export { ActionBar, Alert, Avatar, Badge, Banner, BarChart, BarStack, Breadcrumbs, Breakpoint, Bullet, Button, Card, Carousel, Checkbox, CheckboxGroup, CheckboxGroupCheckbox, CopyButton, DateInput, EmptyState, Expandable, 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 };

package/dist/react-datepicker/dist/react-datepicker.min.css.js

@@ -1,3 +1,3 @@
-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}.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";
+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";
 
 export { css_248z as default };

package/dist/src/components/Banner/index.js

@@ -132,6 +132,7 @@ const Banner = _ref8 => {
         style: {
           flex: 1
         },
+        justifyContent: "center",
         children: [jsx(Text, {
           as: "p",
           variant: size === 'medium' ? 'headingSmall' : 'bodyStronger',

package/dist/src/components/Carousel/index.js

@@ -28,17 +28,17 @@ const StyledBeforeScroll = /*#__PURE__*/_styled("span", {
 }, "\n  );cursor:w-resize;z-index:auto;");
 const StyledScrollableWrapper = /*#__PURE__*/_styled("div", {
   target: "e1id70w02"
-})("overflow-x:scroll;overflow-y:hidden;white-space:nowrap;padding:", _ref3 => {
+})("overflow-x:scroll;overflow-y:hidden;white-space:nowrap;display:flex;padding:", _ref3 => {
   let {
     theme
   } = _ref3;
   return theme.space['2'];
-}, " 100px;>*:not(:last-child){margin-right:", _ref4 => {
+}, " 100px;gap:", _ref4 => {
   let {
     theme
   } = _ref4;
   return theme.space['2'];
-}, ";}");
+}, ";");
 const StyledAfterScroll = /*#__PURE__*/_styled("span", {
   target: "e1id70w01"
 })("position:absolute;bottom:0;right:0;width:100px;height:100%;content:'';cursor:e-resize;z-index:auto;background:linear-gradient(\n    -90deg,\n    ", _ref5 => {
@@ -52,44 +52,27 @@ const StyledAfterScroll = /*#__PURE__*/_styled("span", {
   } = _ref6;
   return theme.colors.neutral.background;
 }, "ff\n  );");
-const StyledBorderWrapper = /*#__PURE__*/_styled("div", {
+const StyledBorderWrapper = /*#__PURE__*/_styled('div', {
+  shouldForwardProp: prop => !['width'].includes(prop),
   target: "e1id70w00"
-})("display:inline-block;border-radius:", _ref7 => {
+})("display:flex;align-items:stretch;width:", _ref7 => {
   let {
-    theme
+    width
   } = _ref7;
-  return theme.radii.default;
-}, ";border:1px solid ", _ref8 => {
+  return width;
+}, ";max-width:", _ref8 => {
   let {
-    theme
+    width
   } = _ref8;
-  return theme.colors.neutral.borderWeak;
-}, ";height:261px;width:248px;max-width:240px;overflow-wrap:break-word;white-space:normal;cursor:grab;&:hover,&:active,&:focus{border:1px solid ", _ref9 => {
+  return width;
+}, ";overflow-wrap:break-word;white-space:normal;height:auto;cursor:grab;flex-shrink:0;");
+const CarouselItem = _ref9 => {
   let {
-    theme
+    children,
+    width = '240px'
   } = _ref9;
-  return theme.colors.primary.border;
-}, ";transition:box-shadow 0.2s ease;box-shadow:", _ref10 => {
-  let {
-    theme
-  } = _ref10;
-  return theme.shadows.focusPrimary;
-}, ";}img{border-radius:", _ref11 => {
-  let {
-    theme
-  } = _ref11;
-  return theme.radii.default;
-}, " ", _ref12 => {
-  let {
-    theme
-  } = _ref12;
-  return theme.radii.default;
-}, " 0 0;}");
-const CarouselItem = _ref13 => {
-  let {
-    children
-  } = _ref13;
   return jsx(StyledBorderWrapper, {
+    width: width,
     draggable: "true",
     children: children
   });
@@ -97,12 +80,12 @@ const CarouselItem = _ref13 => {
 /**
  * Carousel component allows you to scroll horizontally through a list of items.
  */
-const Carousel = _ref14 => {
+const Carousel = _ref10 => {
   let {
     children,
     className,
     'data-testid': dataTestId = 'scrollbar'
-  } = _ref14;
+  } = _ref10;
   const scrollRef = useRef(null);
   let intervalLeft;
   let intervalRight;

package/dist/src/components/DateInput/index.js

@@ -5,13 +5,15 @@ import DatePicker, { registerLocale } from 'react-datepicker';
 import css_248z from '../../../react-datepicker/dist/react-datepicker.min.css.js';
 import { Button } from '../Button/index.js';
 import { Separator } from '../Separator/index.js';
+import { Stack } from '../Stack/index.js';
 import { Text } from '../Text/index.js';
 import { TextInput } from '../TextInput/index.js';
 import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
 
+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)."; }
 const PREFIX = '.react-datepicker';
 const StyledSeparator = /*#__PURE__*/_styled(Separator, {
-  target: "e1bm75lk5"
+  target: "e1bm75lk3"
 })("margin:0 ", _ref => {
   let {
     theme
@@ -19,7 +21,7 @@ const StyledSeparator = /*#__PURE__*/_styled(Separator, {
   return theme.space['1'];
 }, ";height:100%;");
 const StyledWrapper = /*#__PURE__*/_styled("div", {
-  target: "e1bm75lk4"
+  target: "e1bm75lk2"
 })("width:100%;div", PREFIX, "-wrapper{display:block;}div", PREFIX, "__input-container{display:block;}div", PREFIX, "__triangle{display:none;}div", PREFIX, "__month-container{padding:16px;}", PREFIX, "-popper{z-index:1000;}.calendar{font-family:'Asap';border-color:", _ref2 => {
   let {
     theme
@@ -59,97 +61,158 @@ const StyledWrapper = /*#__PURE__*/_styled("div", {
   let {
     theme
   } = _ref9;
-  return theme.colors.primary.text;
+  return theme.colors.primary.textStrong;
 }, ";background-color:", _ref10 => {
   let {
     theme
   } = _ref10;
-  return theme.colors.primary.background;
-}, ";border-radius:", _ref11 => {
+  return theme.colors.primary.backgroundStrong;
+}, ";&[aria-disabled='true'],&:disabled{color:", _ref11 => {
   let {
     theme
   } = _ref11;
-  return theme.radii.circle;
-}, ";}", PREFIX, "__day--keyboard-selected{color:", _ref12 => {
+  return theme.colors.primary.textStrongDisabled;
+}, ";background-color:", _ref12 => {
   let {
     theme
   } = _ref12;
-  return theme.colors.primary.text;
-}, ";background-color:", _ref13 => {
+  return theme.colors.primary.backgroundStrongDisabled;
+}, ";}}", PREFIX, "__day--in-selecting-range{color:", _ref13 => {
   let {
     theme
   } = _ref13;
-  return theme.colors.primary.background;
-}, ";border-radius:", _ref14 => {
+  return theme.colors.primary.text;
+}, ";background-color:", _ref14 => {
   let {
     theme
   } = _ref14;
-  return theme.radii.circle;
-}, ";}", PREFIX, "__day:hover{color:", _ref15 => {
+  return theme.colors.primary.background;
+}, ";&[aria-disabled='true'],&:disabled{color:", _ref15 => {
   let {
     theme
   } = _ref15;
-  return theme.colors.primary.text;
-}, ";border-radius:", _ref16 => {
+  return theme.colors.primary.textDisabled;
+}, ";background-color:", _ref16 => {
   let {
     theme
   } = _ref16;
-  return theme.radii.circle;
-}, ";background-color:", _ref17 => {
+  return theme.colors.primary.backgroundDisabled;
+}, ";}}", PREFIX, "__day--in-range{color:", _ref17 => {
   let {
     theme
   } = _ref17;
-  return theme.colors.primary.background;
-}, ";}", PREFIX, "__day--disabled{color:", _ref18 => {
+  return theme.colors.primary.text;
+}, ";background-color:", _ref18 => {
   let {
     theme
   } = _ref18;
-  return theme.colors.primary.textStrongDisabled;
-}, ";}", PREFIX, "__day--disabled:hover{color:", _ref19 => {
+  return theme.colors.primary.background;
+}, ";&[aria-disabled='true'],&:disabled{color:", _ref19 => {
   let {
     theme
   } = _ref19;
-  return theme.colors.primary.textStrongDisabled;
-}, ";background-color:transparent;}}");
-const StyledSpan = /*#__PURE__*/_styled("span", {
-  target: "e1bm75lk3"
-})("position:absolute;right:16px;top:16px;display:flex;gap:", _ref20 => {
+  return theme.colors.primary.textDisabled;
+}, ";background-color:", _ref20 => {
   let {
     theme
   } = _ref20;
-  return theme.space['1'];
-}, ";");
-const StyledIconContainer = /*#__PURE__*/_styled("div", {
-  target: "e1bm75lk2"
-})("padding:", _ref21 => {
+  return theme.colors.primary.backgroundDisabled;
+}, ";}}", PREFIX, "__day--range-start{color:", _ref21 => {
   let {
     theme
   } = _ref21;
-  return theme.space['1'];
-}, ";position:absolute;display:flex;align-items:center;right:0;top:0;height:48px;");
-const TopHeaderDiv = /*#__PURE__*/_styled("div", {
-  target: "e1bm75lk1"
-})("margin-bottom:8px;margin-left:8px;display:inline-block;background-color:", _ref22 => {
+  return theme.colors.primary.textStrong;
+}, ";background-color:", _ref22 => {
   let {
     theme
   } = _ref22;
-  return theme.colors.neutral.backgroundWeakElevated;
-}, ";");
-const StyledText = /*#__PURE__*/_styled(Text, {
-  target: "e1bm75lk0"
-})("text-transform:capitalize;margin-right:", _ref23 => {
+  return theme.colors.primary.backgroundStrong;
+}, ";&[aria-disabled='true'],&:disabled{color:", _ref23 => {
   let {
     theme
   } = _ref23;
+  return theme.colors.primary.textStrongDisabled;
+}, ";background-color:", _ref24 => {
+  let {
+    theme
+  } = _ref24;
+  return theme.colors.primary.backgroundStrongDisabled;
+}, ";}}", PREFIX, "__day--range-end{color:", _ref25 => {
+  let {
+    theme
+  } = _ref25;
+  return theme.colors.primary.textStrong;
+}, ";background-color:", _ref26 => {
+  let {
+    theme
+  } = _ref26;
+  return theme.colors.primary.backgroundStrong;
+}, ";&[aria-disabled='true'],&:disabled{color:", _ref27 => {
+  let {
+    theme
+  } = _ref27;
+  return theme.colors.primary.textStrongDisabled;
+}, ";background-color:", _ref28 => {
+  let {
+    theme
+  } = _ref28;
+  return theme.colors.primary.backgroundStrongDisabled;
+}, ";}}", PREFIX, "__day--keyboard-selected{color:", _ref29 => {
+  let {
+    theme
+  } = _ref29;
+  return theme.colors.primary.textStrong;
+}, ";background-color:", _ref30 => {
+  let {
+    theme
+  } = _ref30;
+  return theme.colors.primary.backgroundStrong;
+}, ";}", PREFIX, "__day:hover{color:", _ref31 => {
+  let {
+    theme
+  } = _ref31;
+  return theme.colors.neutral.textHover;
+}, ";background-color:", _ref32 => {
+  let {
+    theme
+  } = _ref32;
+  return theme.colors.neutral.backgroundHover;
+}, ";}", PREFIX, "__day--disabled{color:", _ref33 => {
+  let {
+    theme
+  } = _ref33;
+  return theme.colors.neutral.textDisabled;
+}, ";}", PREFIX, "__day--disabled:hover{color:", _ref34 => {
+  let {
+    theme
+  } = _ref34;
+  return theme.colors.neutral.textDisabled;
+}, ";background-color:transparent;}}");
+const StyledIconContainer = /*#__PURE__*/_styled("div", {
+  target: "e1bm75lk1"
+})("padding:", _ref35 => {
+  let {
+    theme
+  } = _ref35;
   return theme.space['1'];
-}, ";");
+}, ";position:absolute;display:flex;align-items:center;right:0;top:0;height:48px;");
+const StyledText = /*#__PURE__*/_styled(Text, {
+  target: "e1bm75lk0"
+})(process.env.NODE_ENV === "production" ? {
+  name: "kff9ir",
+  styles: "text-transform:capitalize"
+} : {
+  name: "kff9ir",
+  styles: "text-transform:capitalize",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 const DEFAULT_FORMAT = value => value instanceof Date ? value.toISOString() : value;
 
 /**
  * DateInput is a wrapper around react-datepicker that provides a consistent look and feel with the rest of the Ultraviolet UI.
  * See https://reactdatepicker.com/ for more information.
  */
-const DateInput = _ref24 => {
+const DateInput = _ref36 => {
   let {
     autoFocus = false,
     disabled = false,
@@ -159,21 +222,28 @@ const DateInput = _ref24 => {
     locale,
     maxDate,
     minDate,
+    startDate,
+    endDate,
     name,
     onBlur,
     onChange,
     onFocus,
     required = false,
+    excludeDates,
     value,
+    selectsRange,
     className,
     'data-testid': dataTestId
-  } = _ref24;
+  } = _ref36;
   // Linked to: https://github.com/Hacker0x01/react-datepicker/issues/3834
   const ReactDatePicker = DatePicker.default ?? DatePicker;
   const localeCode = (typeof locale === 'string' ? locale : locale?.code) ?? 'en-GB';
   if (typeof locale === 'object') {
     registerLocale(localeCode, locale);
   }
+  const valueStart = `${startDate !== undefined && startDate !== null ? `${format(startDate)} -` : ''}`;
+  const valueEnd = `${endDate !== undefined && endDate !== null ? format(endDate) : ''}`;
+  const valueFormat = selectsRange ? `${valueStart} ${valueEnd}` : format(value);
   return jsxs(Fragment, {
     children: [jsx(Global, {
       styles: css_248z
@@ -188,13 +258,15 @@ const DateInput = _ref24 => {
         onBlur: onBlur,
         onChange: onChange,
         onFocus: onFocus,
-        selected: value ? new Date(value) : undefined,
+        selected: value && !selectsRange ? new Date(value) : undefined,
+        selectsRange: selectsRange,
+        excludeDates: excludeDates,
         customInput: jsxs("div", {
           children: [jsx(TextInput, {
             error: error ? `${error}` : undefined,
             id: `date-input${name ? `-${name}` : ''}`,
             label: label,
-            value: format(value) || '',
+            value: valueFormat || '',
             disabled: disabled
           }), jsxs(StyledIconContainer, {
             children: [required ? jsx(Icon, {
@@ -214,38 +286,42 @@ const DateInput = _ref24 => {
         calendarClassName: "calendar",
         minDate: minDate,
         maxDate: maxDate,
-        renderCustomHeader: _ref25 => {
+        startDate: startDate,
+        endDate: endDate,
+        renderCustomHeader: _ref37 => {
           let {
             date,
             decreaseMonth,
             increaseMonth,
             prevMonthButtonDisabled,
             nextMonthButtonDisabled
-          } = _ref25;
-          return jsxs(Fragment, {
-            children: [jsx(TopHeaderDiv, {
-              children: jsx(StyledText, {
-                variant: "body",
-                as: "p",
-                children: new Date(date).toLocaleString(localeCode, {
-                  month: 'long',
-                  year: 'numeric'
-                })
+          } = _ref37;
+          return jsxs(Stack, {
+            direction: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 3,
+            children: [jsx(Button, {
+              size: "small",
+              icon: "arrow-left",
+              sentiment: "neutral",
+              variant: "ghost",
+              onClick: decreaseMonth,
+              disabled: prevMonthButtonDisabled
+            }), jsx(StyledText, {
+              variant: "bodyStrong",
+              as: "p",
+              children: new Date(date).toLocaleString(localeCode, {
+                month: 'long',
+                year: 'numeric'
               })
-            }), jsxs(StyledSpan, {
-              children: [jsx(Button, {
-                size: "small",
-                icon: "arrow-left",
-                sentiment: "neutral",
-                onClick: decreaseMonth,
-                disabled: prevMonthButtonDisabled
-              }), jsx(Button, {
-                size: "small",
-                icon: "arrow-right",
-                sentiment: "neutral",
-                onClick: increaseMonth,
-                disabled: nextMonthButtonDisabled
-              })]
+            }), jsx(Button, {
+              size: "small",
+              icon: "arrow-right",
+              sentiment: "neutral",
+              variant: "ghost",
+              onClick: increaseMonth,
+              disabled: nextMonthButtonDisabled
             })]
           });
         }

package/dist/src/components/MenuV2/index.js

@@ -1,9 +1,9 @@
 import _styled from '@emotion/styled/base';
 import { forwardRef, useState, useRef, useId, isValidElement, useImperativeHandle, cloneElement } from 'react';
+import { Popup } from '../Popup/index.js';
 import { Stack } from '../Stack/index.js';
 import Item from './Item.js';
 import { jsx } from '@emotion/react/jsx-runtime';
-import { Popup } from '../../internalComponents/Popup/index.js';
 
 const StyledPopup = /*#__PURE__*/_styled(Popup, {
   target: "e1jn11gg1"

package/dist/src/components/Modal/Disclosure.js

@@ -25,7 +25,9 @@ const Disclosure = _ref => {
         toggle,
         onOpen: handleOpen,
         modalId: id,
-        hide: handleClose
+        hide: handleClose,
+        close: handleClose,
+        show: handleOpen
       });
     }
     return disclosure;

package/dist/src/components/Modal/index.js

@@ -99,7 +99,9 @@ const Modal = _ref3 => {
           onOpen: handleOpen,
           toggle: handleToggle,
           modalId: finalId,
-          hide: handleClose
+          hide: handleClose,
+          close: handleClose,
+          show: handleOpen
         }) : children, jsx(StyledContainer, {
           children: isClosable ? jsx(Button, {
             "data-testid": dataTestId ? `${dataTestId}-close-button` : undefined,

package/dist/src/components/Popover/index.js

@@ -1,10 +1,10 @@
 import _styled from '@emotion/styled/base';
-import { useRef, useState, useEffect, useCallback } from 'react';
+import { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
 import { Button } from '../Button/index.js';
+import { Popup } from '../Popup/index.js';
 import { Stack } from '../Stack/index.js';
 import { Text } from '../Text/index.js';
 import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-import { Popup } from '../../internalComponents/Popup/index.js';
 
 const SIZES_WIDTH = {
   small: 320,
@@ -74,6 +74,7 @@ const ContentWrapper = _ref5 => {
       children: [jsx(Text, {
         variant: "bodyStrong",
         as: "h3",
+        sentiment: "neutral",
         prominence: sentiment === 'neutral' ? 'strong' : 'stronger',
         children: title
       }), jsx(Button, {
@@ -88,6 +89,7 @@ const ContentWrapper = _ref5 => {
     }), typeof children === 'string' ? jsx(Text, {
       variant: "bodySmall",
       as: "p",
+      sentiment: "neutral",
       prominence: sentiment === 'neutral' ? 'strong' : 'stronger',
       children: children
     }) : children]
@@ -97,7 +99,7 @@ const ContentWrapper = _ref5 => {
  * Popover component is used to display additional information or actions on top of the main content of the page.
  * It is usually triggered by clicking on a button. It includes a title, a close button and a content area.
  */
-const Popover = _ref6 => {
+const Popover = /*#__PURE__*/forwardRef((_ref6, ref) => {
   let {
     visible = false,
     children,
@@ -110,7 +112,6 @@ const Popover = _ref6 => {
     className,
     'data-testid': dataTestId
   } = _ref6;
-  const ref = useRef(null);
   const innerRef = useRef(null);
   const [localVisible, setLocalVisible] = useState(visible);
 
@@ -156,6 +157,6 @@ const Popover = _ref6 => {
     onKeyDown: onKeyDownSpace,
     children: children
   });
-};
+});
 
 export { Popover };

package/dist/src/{internalComponents → components}/Popup/index.js

@@ -31,7 +31,7 @@ const exitAnimation = positions => keyframes`
 `;
 const StyledTooltip = /*#__PURE__*/_styled('div', {
   shouldForwardProp: prop => !['maxWidth', 'positions', 'reverseAnimation'].includes(prop),
-  target: "efkq4701"
+  target: "e4h1g861"
 })("background:", _ref => {
   let {
     theme
@@ -95,7 +95,7 @@ const StyledTooltip = /*#__PURE__*/_styled('div', {
   return theme.colors.neutral.backgroundStronger;
 }, " transparent transparent transparent;pointer-events:none;}}");
 const StyledChildrenContainer = /*#__PURE__*/_styled("div", {
-  target: "efkq4700"
+  target: "e4h1g860"
 })(process.env.NODE_ENV === "production" ? {
   name: "jhu4ja",
   styles: "display:inherit;&[data-container-full-width='true']{width:100%;}"
@@ -104,7 +104,10 @@ const StyledChildrenContainer = /*#__PURE__*/_styled("div", {
   styles: "display:inherit;&[data-container-full-width='true']{width:100%;}",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-const Popup = /*#__PURE__*/forwardRef((_ref13, tooltipRef) => {
+/**
+ * @experimental This component is experimental and may be subject to breaking changes in the future.
+ */
+const Popup = /*#__PURE__*/forwardRef((_ref13, ref) => {
   let {
     children,
     text = '',
@@ -127,8 +130,8 @@ const Popup = /*#__PURE__*/forwardRef((_ref13, tooltipRef) => {
   } = _ref13;
   const childrenRef = useRef(null);
   useImperativeHandle(innerRef, () => childrenRef.current);
-  const tempTooltipRef = useRef(null);
-  const innerTooltipRef = tooltipRef || tempTooltipRef;
+  const innerTooltipRef = useRef(null);
+  useImperativeHandle(ref, () => innerTooltipRef.current);
   const timer = useRef();
 
   // Debounce timer will be used to prevent the tooltip from flickering when the user moves the mouse out and in the children element.
@@ -268,11 +271,11 @@ const Popup = /*#__PURE__*/forwardRef((_ref13, tooltipRef) => {
     };
     if (visibleInDom) {
       document.body.addEventListener('keyup', handleEscPress);
-      document.body.addEventListener('click', handleClickOutside);
+      document.body.addEventListener('mousedown', handleClickOutside);
     }
     return () => {
       document.body.removeEventListener('keyup', handleEscPress);
-      document.body.removeEventListener('click', handleClickOutside);
+      document.body.removeEventListener('mousedown', handleClickOutside);
     };
   }, [hideTooltip, visibleInDom, innerTooltipRef, childrenRef, hideOnClickOutside]);
 

package/dist/src/components/Text/index.js

@@ -29,10 +29,11 @@ const generateStyles = _ref => {
   } = _ref;
   // stronger is available only for neutral sentiment
   const definedProminence = sentiment !== 'neutral' && prominence === 'stronger' ? capitalize(PROMINENCES.default) : capitalize(PROMINENCES[prominence]);
-  theme.colors[sentiment];
+  sentiment ? theme.colors[sentiment] : undefined;
   const text = `text${definedProminence}${disabled ? 'Disabled' : ''}`;
+  const textColor = sentiment ? theme.colors[sentiment][text] : undefined;
   return `
-    color: ${theme.colors[sentiment][text]};
+    ${sentiment ? `color: ${textColor};` : ''}
 
     font-size: ${theme.typography[variant].fontSize};
     font-family: ${theme.typography[variant].fontFamily};
@@ -77,7 +78,7 @@ const Text = _ref2 => {
     htmlFor,
     'data-testid': dataTestId
   } = _ref2;
-  const computedSentiment = sentiment ?? color ?? 'neutral';
+  const computedSentiment = sentiment ?? color;
   const [isTruncated, setIsTruncated] = useState(false);
   const elementRef = useRef(null);
   const finalStringChildren = recursivelyGetChildrenString(children);

package/dist/src/components/Tooltip/index.js

@@ -1,7 +1,7 @@
 import _styled from '@emotion/styled/base';
 import { forwardRef } from 'react';
+import { Popup } from '../Popup/index.js';
 import { jsx } from '@emotion/react/jsx-runtime';
-import { Popup } from '../../internalComponents/Popup/index.js';
 
 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)."; }
 const StyledPopup = /*#__PURE__*/_styled(Popup, {

package/dist/src/index.js

@@ -37,6 +37,7 @@ export { PasswordCheck } from './components/PasswordCheck/index.js';
 export { PasswordStrengthMeter } from './components/PasswordStrengthMeter/index.js';
 export { PieChart } from './components/PieChart/index.js';
 export { Popover } from './components/Popover/index.js';
+export { Popup } from './components/Popup/index.js';
 export { ProgressBar } from './components/ProgressBar/index.js';
 export { Radio } from './components/Radio/index.js';
 export { Row } from './components/Row/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.18.1",
+  "version": "1.20.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -39,13 +39,13 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "7.23.0",
+    "@babel/core": "7.23.2",
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
-    "@types/react": "18.2.25",
-    "@types/react-datepicker": "4.15.1",
-    "@types/react-dom": "18.2.10",
+    "@types/react": "18.2.28",
+    "@types/react-datepicker": "4.15.2",
+    "@types/react-dom": "18.2.13",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
@@ -60,13 +60,13 @@
     "@scaleway/random-name": "4.0.2",
     "@scaleway/use-media": "2.0.1",
     "deepmerge": "4.3.1",
-    "react-datepicker": "4.18.0",
+    "react-datepicker": "4.20.0",
     "react-flatten-children": "1.1.2",
     "react-select": "5.7.7",
     "react-toastify": "9.1.3",
     "react-use-clipboard": "1.0.9",
     "reakit": "1.3.11",
     "@ultraviolet/themes": "1.2.1",
-    "@ultraviolet/icons": "2.3.0"
+    "@ultraviolet/icons": "2.4.1"
   }
 }