@veritone-ce/design-system 2.3.4 → 2.3.6

package/dist/esm/Button/index.js

@@ -20,20 +20,25 @@ const Button = forwardRef(
     disabled = false,
     loading = false,
     active = false,
+    startIcon,
+    endIcon,
+    children,
+    "data-testid": dataTestId,
+    style,
+    className,
     ...props
   }, ref) => {
     const variantCn = modules_efc4e723[variant];
     return /* @__PURE__ */ jsxs(
       "button",
       {
+        ...props,
         ref,
-        type: props.type,
         "data-size": size,
         "data-loading": loading,
         "data-active": active,
         disabled: loading || disabled,
-        onClick: props.onClick,
-        "data-testid": props["data-testid"],
+        "data-testid": dataTestId,
         style: {
           ...{
             "--vt-ce-button-palette-base-surface": palette.base.surface,
@@ -43,15 +48,15 @@ const Button = forwardRef(
             "--vt-ce-button-palette-disabled-surface": palette.disabled.surface,
             "--vt-ce-button-palette-disabled-on": palette.disabled.on
           },
-          ...props.style
+          ...style
         },
-        className: cx(modules_efc4e723["button"], variantCn, props.className),
+        className: cx(modules_efc4e723["button"], variantCn, className),
         children: [
           loading && /* @__PURE__ */ jsx("span", { className: modules_efc4e723["loading-container"], children: /* @__PURE__ */ jsx(CircularProgress, { size: "1.4em" }) }),
           /* @__PURE__ */ jsxs("span", { className: modules_efc4e723["inner-container"], children: [
-            props.startIcon && /* @__PURE__ */ jsx("span", { className: modules_efc4e723["button-icon"], children: props.startIcon }),
-            /* @__PURE__ */ jsx("span", { children: props.children }),
-            props.endIcon && /* @__PURE__ */ jsx("span", { className: modules_efc4e723["button-icon"], children: props.endIcon })
+            startIcon && /* @__PURE__ */ jsx("span", { className: modules_efc4e723["button-icon"], children: startIcon }),
+            /* @__PURE__ */ jsx("span", { children }),
+            endIcon && /* @__PURE__ */ jsx("span", { className: modules_efc4e723["button-icon"], children: endIcon })
           ] })
         ]
       }

package/dist/esm/DatePicker/Calendar.js

@@ -0,0 +1,146 @@
+'use strict';
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { useLocale, useCalendar, useCalendarGrid, useCalendarCell } from 'react-aria';
+import { useCalendarState } from 'react-stately';
+import { createCalendar, getWeeksInMonth } from '@internationalized/date';
+import Button from '../Button/index.js';
+import IconButton from '../IconButton/index.js';
+import { adaptMuiSvgIcon } from '../Icon/wrappers.js';
+import '../Icon/factory.js';
+import { ArrowDropUp, ArrowBackIosNew, ArrowForwardIos } from '@mui/icons-material';
+import modules_efc4e723 from './styles.module.scss.js';
+import 'color2k';
+import '../styles/css-vars.js';
+import { defaultThemeCssVariableUsages } from '../styles/defaultTheme.js';
+import '@mui/system';
+import '../Box/index.js';
+import '../styles/styled.js';
+
+const ArrowUpDownIcon = adaptMuiSvgIcon(ArrowDropUp);
+const ArrowBackIcon = adaptMuiSvgIcon(ArrowBackIosNew);
+const ArrowForwardIcon = adaptMuiSvgIcon(ArrowForwardIos);
+function Calendar({
+  changeYear: propsChangeYear,
+  ...props
+}) {
+  const { locale } = useLocale();
+  const [yearPickerIsOpen, setYearPickerIsOpen] = React__default.useState(false);
+  const state = useCalendarState({
+    ...props,
+    locale,
+    createCalendar
+  });
+  const { calendarProps, prevButtonProps, nextButtonProps, title } = useCalendar(props, state);
+  const changeYear = (year) => {
+    propsChangeYear(year);
+    setYearPickerIsOpen(false);
+  };
+  const handlePrevButtonClick = (e) => {
+    prevButtonProps.onPress?.(e);
+  };
+  const handleNextButtonClick = (e) => {
+    nextButtonProps.onPress?.(e);
+  };
+  const toggleYearPicker = () => {
+    setYearPickerIsOpen(!yearPickerIsOpen);
+  };
+  return /* @__PURE__ */ jsxs("div", { ...calendarProps, className: modules_efc4e723.calendarBox, children: [
+    /* @__PURE__ */ jsxs("div", { className: modules_efc4e723.calendarHeader, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "tertiary",
+          palette: defaultThemeCssVariableUsages.palette.action.text,
+          endIcon: /* @__PURE__ */ jsx(
+            ArrowUpDownIcon,
+            {
+              style: !yearPickerIsOpen ? {
+                transform: "rotate(180deg)",
+                transition: "0.3s ease"
+              } : { transition: "0.3s ease" }
+            }
+          ),
+          onClick: () => toggleYearPicker(),
+          children: title
+        }
+      ),
+      !yearPickerIsOpen && /* @__PURE__ */ jsxs("div", { className: modules_efc4e723.monthPickerArrowButtonsWrapper, children: [
+        /* @__PURE__ */ jsx(IconButton, { onClick: (e) => handlePrevButtonClick(e), children: /* @__PURE__ */ jsx(ArrowBackIcon, { size: "small" }) }),
+        /* @__PURE__ */ jsx(IconButton, { onClick: (e) => handleNextButtonClick(e), children: /* @__PURE__ */ jsx(ArrowForwardIcon, { size: "small" }) })
+      ] })
+    ] }),
+    yearPickerIsOpen ? /* @__PURE__ */ jsx(YearPicker, { changeYear, activeYear: state.value?.year }) : /* @__PURE__ */ jsx(CalendarGrid, { state })
+  ] });
+}
+function CalendarGrid({
+  state,
+  startDate,
+  endDate,
+  weekdayStyle
+}) {
+  const { locale } = useLocale();
+  const { gridProps, headerProps, weekDays } = useCalendarGrid(
+    { startDate, endDate, weekdayStyle },
+    state
+  );
+  const weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
+  return /* @__PURE__ */ jsxs("table", { className: modules_efc4e723.calendarGrid, ...gridProps, children: [
+    /* @__PURE__ */ jsx("thead", { ...headerProps, children: /* @__PURE__ */ jsx("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ jsx("th", { className: modules_efc4e723.weekdayHeader, children: day }, index)) }) }),
+    /* @__PURE__ */ jsx("tbody", { children: [...new Array(Math.max(weeksInMonth, 6)).keys()].map((weekIndex) => /* @__PURE__ */ jsx("tr", { children: state.getDatesInWeek(weekIndex).map(
+      (date, i) => date ? /* @__PURE__ */ jsx(CalendarCell, { state, date }, i) : /* @__PURE__ */ jsx("td", {}, i)
+    ) }, weekIndex)) })
+  ] });
+}
+function CalendarCell({ state, date }) {
+  const ref = React__default.useRef(null);
+  const {
+    cellProps,
+    buttonProps,
+    isSelected,
+    isOutsideVisibleRange,
+    isDisabled,
+    formattedDate
+  } = useCalendarCell({ date }, state, ref);
+  return /* @__PURE__ */ jsx("td", { ...cellProps, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...buttonProps,
+      ref,
+      size: "small",
+      variant: !isSelected ? "tertiary" : "secondary",
+      active: isSelected,
+      disabled: isDisabled,
+      className: modules_efc4e723.calendarCellBtn,
+      style: isOutsideVisibleRange ? { display: "none" } : {},
+      children: formattedDate
+    }
+  ) });
+}
+const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+const years = Array.from(
+  { length: currentYear + 1 - 1900 },
+  (_, i) => currentYear - i
+);
+function YearPicker({
+  changeYear,
+  activeYear
+}) {
+  return /* @__PURE__ */ jsx("div", { className: modules_efc4e723.yearPickerLayout, children: years.map((year, index) => /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "secondary",
+      size: "small",
+      active: year === activeYear,
+      className: modules_efc4e723.yearPillButton,
+      onClick: () => {
+        changeYear(year);
+      },
+      children: year
+    },
+    index
+  )) });
+}
+
+export { Calendar as default };

package/dist/esm/DatePicker/DateField.js

@@ -0,0 +1,26 @@
+'use strict';
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { useLocale, useDateField, useDateSegment } from 'react-aria';
+import { useDateFieldState } from 'react-stately';
+import { createCalendar } from '@internationalized/date';
+import modules_efc4e723 from './styles.module.scss.js';
+
+function DateField(props) {
+  const ref = React__default.useRef(null);
+  const { locale } = useLocale();
+  const state = useDateFieldState({
+    ...props,
+    locale,
+    createCalendar
+  });
+  const { fieldProps } = useDateField(props, state, ref);
+  return /* @__PURE__ */ jsx("div", { ...fieldProps, ref, className: modules_efc4e723.reactAriaDateInput, children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(DateSegmentItem, { segment, state }, i)) });
+}
+function DateSegmentItem({ segment, state }) {
+  const ref = React__default.useRef(null);
+  const { segmentProps } = useDateSegment(segment, state, ref);
+  return /* @__PURE__ */ jsx("div", { ...segmentProps, ref, children: segment.text });
+}
+
+export { DateField as default };

package/dist/esm/DatePicker/index.js

@@ -0,0 +1,118 @@
+'use strict';
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { useFloating, useRole, useDismiss, useInteractions, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
+import { useDatePicker } from 'react-aria';
+import { useDatePickerState } from 'react-stately';
+import { parseDate } from '@internationalized/date';
+import Calendar from './Calendar.js';
+import DateField from './DateField.js';
+import IconButton from '../IconButton/index.js';
+import { adaptMuiSvgIcon } from '../Icon/wrappers.js';
+import '../Icon/factory.js';
+import { CalendarTodayOutlined } from '@mui/icons-material';
+import modules_efc4e723 from './styles.module.scss.js';
+import { PortalThemeRelay } from '../styles/portal.js';
+import { useFormControlContext } from '../FormControl/context.js';
+
+const CalendarTodayOutlinedIcon = adaptMuiSvgIcon(CalendarTodayOutlined);
+function DatePicker({
+  placement = "bottom-start",
+  ...props
+}) {
+  const ctx = useFormControlContext();
+  const disabled = props.disabled ?? ctx.disabled;
+  const error = props.error ?? ctx.error;
+  const formatProps = {
+    label: "Date Picker",
+    // TODO: perhaps get from context?
+    value: props.value ? parseDate(props.value) : void 0,
+    shouldForceLeadingZeros: props.shouldForceLeadingZeros,
+    defaultValue: props.defaultValue ? parseDate(props.defaultValue) : void 0,
+    onChange: (newValue) => {
+      props.onChange?.(newValue.toString());
+    }
+  };
+  const ref = useRef(null);
+  const state = useDatePickerState(formatProps);
+  const {
+    groupProps,
+    /*labelProps,*/
+    fieldProps,
+    buttonProps,
+    calendarProps
+  } = useDatePicker(formatProps, state, ref);
+  const { refs, floatingStyles, context } = useFloating({
+    // ensure floating ui state is up to date with date picker state
+    open: state.isOpen,
+    // any floating-ui native stuff will trigger this, rippling up to date picker state
+    onOpenChange: (open) => {
+      open ? state.setOpen(open) : state.close();
+    },
+    placement
+  });
+  const role = useRole(context);
+  const dismiss = useDismiss(context);
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    dismiss,
+    role
+  ]);
+  const changeYear = (year) => {
+    const currentMonthSelected = state.dateValue?.month ?? 1;
+    const currentDaySelected = state.dateValue?.day ?? 1;
+    state.setDateValue(
+      parseDate(
+        `${year}-${currentMonthSelected.toString().length === 1 ? "0" + currentMonthSelected : currentMonthSelected}-${currentDaySelected.toString().length === 1 ? "0" + currentDaySelected : currentDaySelected}`
+      )
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...getReferenceProps(),
+      ref: refs.setReference,
+      "data-testid": props["data-testid"],
+      className: modules_efc4e723.reactAriaDatePicker,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ...groupProps,
+            ref,
+            "data-disabled": disabled,
+            "data-focused": state.isOpen,
+            "data-error": error,
+            className: modules_efc4e723.reactAriaGroup,
+            children: [
+              /* @__PURE__ */ jsx(DateField, { ...fieldProps }),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  ...buttonProps,
+                  disabled,
+                  onClick: () => context.onOpenChange(!context.open),
+                  className: modules_efc4e723.reactAriaButton,
+                  children: /* @__PURE__ */ jsx(CalendarTodayOutlinedIcon, {})
+                }
+              )
+            ]
+          }
+        ),
+        context.open && /* @__PURE__ */ jsx(FloatingPortal, { root: props.portalEl, children: /* @__PURE__ */ jsx(FloatingFocusManager, { context, modal: false, children: /* @__PURE__ */ jsx(PortalThemeRelay, { children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: refs.setFloating,
+            style: {
+              ...floatingStyles
+            },
+            ...getFloatingProps(),
+            children: /* @__PURE__ */ jsx(Calendar, { ...calendarProps, changeYear })
+          }
+        ) }) }) })
+      ]
+    }
+  );
+}
+
+export { DatePicker as default };

package/dist/esm/DatePicker/styles.module.scss.js

@@ -0,0 +1,3 @@
+var modules_efc4e723 = {"reactAriaDatePicker":"vt_ce_DatePicker_reactAriaDatePicker__c88815e1","reactAriaGroup":"vt_ce_DatePicker_reactAriaGroup__c88815e1","reactAriaButton":"vt_ce_DatePicker_reactAriaButton__c88815e1","reactAriaDateInput":"vt_ce_DatePicker_reactAriaDateInput__c88815e1","calendarBox":"vt_ce_DatePicker_calendarBox__c88815e1","calendarHeader":"vt_ce_DatePicker_calendarHeader__c88815e1","monthPickerArrowButtonsWrapper":"vt_ce_DatePicker_monthPickerArrowButtonsWrapper__c88815e1","yearPickerLayout":"vt_ce_DatePicker_yearPickerLayout__c88815e1","yearPillButton":"vt_ce_DatePicker_yearPillButton__c88815e1","calendarGrid":"vt_ce_DatePicker_calendarGrid__c88815e1","weekdayHeader":"vt_ce_DatePicker_weekdayHeader__c88815e1","calendarCellBtn":"vt_ce_DatePicker_calendarCellBtn__c88815e1"};
+
+export { modules_efc4e723 as default };

package/dist/esm/DateRangePicker/index.js

@@ -0,0 +1,37 @@
+'use strict';
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import DatePicker from '../DatePicker/index.js';
+import modules_efc4e723 from './styles.module.scss.js';
+import FormControl from '../FormControl/index.js';
+import { useFormControlContext } from '../FormControl/context.js';
+
+function DateRangePicker({
+  startDate,
+  endDate,
+  portalEl
+}) {
+  const ctx = useFormControlContext();
+  return /* @__PURE__ */ jsxs("span", { className: modules_efc4e723.dateRangePickerWrapper, children: [
+    /* @__PURE__ */ jsx(
+      FormControl,
+      {
+        disabled: ctx.disabled,
+        error: ctx.error,
+        ...startDate.control,
+        children: /* @__PURE__ */ jsx(DatePicker, { ...startDate.props, portalEl })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FormControl,
+      {
+        disabled: ctx.disabled,
+        error: ctx.error,
+        ...endDate.control,
+        children: /* @__PURE__ */ jsx(DatePicker, { ...endDate.props, portalEl })
+      }
+    )
+  ] });
+}
+
+export { DateRangePicker as default };

package/dist/esm/DateRangePicker/styles.module.scss.js

@@ -0,0 +1,3 @@
+var modules_efc4e723 = {"dateRangePickerWrapper":"vt_ce_DateRangePicker_dateRangePickerWrapper__8b44f64e"};
+
+export { modules_efc4e723 as default };

package/dist/esm/Drawer/components.js

@@ -74,7 +74,6 @@ const Drawer = React.forwardRef(function Drawer2({
             ...drawer.getFloatingProps(),
             "aria-labelledby": drawer.labelId,
             "aria-describedby": drawer.descriptionId,
-            "data-testid": dataTestId,
             className: modules_efc4e723["drawer-wrapper"],
             children: /* @__PURE__ */ jsx(
               FloatingFocusManager,
@@ -84,6 +83,7 @@ const Drawer = React.forwardRef(function Drawer2({
                 children: /* @__PURE__ */ jsx(
                   "div",
                   {
+                    "data-testid": dataTestId,
                     className: cx(modules_efc4e723["drawer"], className),
                     style: {
                       ...innerTransitionStyles,

package/dist/esm/Input/styles.module.scss.js

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"input":"vt_ce_Input_input__2ce66cab","inner-input":"vt_ce_Input_innerInput__2ce66cab","input-icon":"vt_ce_Input_inputIcon__2ce66cab"};
+var modules_efc4e723 = {"input":"vt_ce_Input_input__81e6382e","inner-input":"vt_ce_Input_innerInput__81e6382e","input-icon":"vt_ce_Input_inputIcon__81e6382e"};
 
 export { modules_efc4e723 as default };

package/dist/esm/index.js

@@ -19,6 +19,8 @@ export { default as Button } from './Button/index.js';
 export { default as Checkbox } from './Checkbox/index.js';
 export { default as Chip } from './Chip/index.js';
 export { default as CircularProgress } from './CircularProgress/index.js';
+export { default as DatePicker } from './DatePicker/index.js';
+export { default as DateRangePicker } from './DateRangePicker/index.js';
 export { default as Dialog, DialogActions, DialogCloseButton, DialogCloseIconButton, DialogContent, DialogDescription, DialogEnd, DialogStart, DialogTitle, DialogTypography } from './Dialog/components.js';
 export { createDialogComponent } from './Dialog/factory.js';
 export { default as Drawer, DrawerActions, DrawerCloseButton, DrawerCloseIconButton, DrawerContent, DrawerDescription, DrawerEnd, DrawerStart, DrawerTitle, DrawerTypography } from './Drawer/components.js';

package/dist/esm/styles.css

@@ -1,8 +1,10 @@
 .vt_ce_Badge_badgeAnchor__05d729fb{display:inline-block;position:relative}.vt_ce_Badge_badgeWrapper__05d729fb{display:flex;inset-block-start:-12px;inset-inline-end:-2px;justify-content:center;pointer-events:none;position:absolute;width:0}.vt_ce_Badge_badgeWrapper__05d729fb[data-disabled=true]{display:none}.vt_ce_Badge_badge__05d729fb{align-items:center;border-radius:4px;display:flex;height:20px;padding:0 7px;white-space:nowrap;width:auto}.vt_ce_Badge_badgeText__05d729fb{font-weight:var(--vt-ce-theme-typography-fontWeightBold,700);margin:0}.vt_ce_Badge_variantPrimary__05d729fb{background-color:var(--vt-ce-badge-palette-base-surface)}.vt_ce_Badge_variantPrimary__05d729fb .vt_ce_Badge_badgeText__05d729fb{color:var(--vt-ce-badge-palette-base-on)}.vt_ce_Badge_variantSecondary__05d729fb{background-color:var(--vt-ce-badge-palette-base-on)}.vt_ce_Badge_variantSecondary__05d729fb .vt_ce_Badge_badgeText__05d729fb{color:var(--vt-ce-badge-palette-base-surface)}
 .vt_ce_Checkbox_checkbox__0355033d{align-items:center;color:var(--vt-ce-theme-palette-text-secondary,#5c6269);cursor:pointer;display:inline-flex}.vt_ce_Checkbox_checkbox__0355033d .vt_ce_Checkbox_checkboxSvgPath__0355033d{fill:var(--vt-ce-theme-palette-text-secondary,#5c6269)}.vt_ce_Checkbox_checkbox__0355033d:hover .vt_ce_Checkbox_checkboxSvgPath__0355033d{fill:var(--vt-ce-theme-palette-action-primary-hover-surface,#335b89)}.vt_ce_Checkbox_checkbox__0355033d[aria-checked=mixed] .vt_ce_Checkbox_checkboxSvgPath__0355033d,.vt_ce_Checkbox_checkbox__0355033d[aria-checked=true] .vt_ce_Checkbox_checkboxSvgPath__0355033d{fill:var(--vt-ce-theme-palette-action-primary-base-surface,#1871e8)}.vt_ce_Checkbox_checkbox__0355033d[aria-checked=mixed]:hover .vt_ce_Checkbox_checkboxSvgPath__0355033d,.vt_ce_Checkbox_checkbox__0355033d[aria-checked=true]:hover .vt_ce_Checkbox_checkboxSvgPath__0355033d{fill:var(--vt-ce-theme-palette-action-primary-hover-surface,#335b89)}.vt_ce_Checkbox_checkbox__0355033d[aria-disabled=true] .vt_ce_Checkbox_checkboxSvgPath__0355033d,.vt_ce_Checkbox_checkbox__0355033d[aria-disabled=true]:hover .vt_ce_Checkbox_checkboxSvgPath__0355033d{fill:var(--vt-ce-theme-palette-disabled-on,#7c848d)}.vt_ce_Checkbox_passthroughLabelContainer__0355033d{cursor:pointer;display:inline-block;height:40px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:40px}.vt_ce_Checkbox_invisibleCheckbox__0355033d{cursor:pointer;height:0;opacity:0;position:absolute;width:0}.vt_ce_Checkbox_visibleLabel__0355033d{font-family:var(--vt-ce-theme-typography-label-fontFamily,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-label-fontSize,14px);font-style:var(--vt-ce-theme-typography-label-fontStyle,normal);font-weight:var(--vt-ce-theme-typography-label-fontWeight,600);letter-spacing:var(--vt-ce-theme-typography-label-letterSpacing,inherit);line-height:var(--vt-ce-theme-typography-label-lineHeight,17px);margin-left:5px;text-transform:var(--vt-ce-theme-typography-label-textTransform,inherit)}.vt_ce_Checkbox_iconContainer__0355033d{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:1}
 .vt_ce_Chip_chip__8d6b791d{align-items:center;background-color:var(--vt-ce-theme-palette-background-primary,#fff);border:1px solid var(--vt-ce-theme-palette-text-secondary,#5c6269);border-radius:20px;display:inline-flex;height:30px;padding:0 10px;white-space:nowrap;width:auto}.vt_ce_Chip_chipText__8d6b791d{color:var(--vt-ce-theme-palette-text-tertiary,#465364);font-family:var(--vt-ce-theme-typography-paragraph3-fontFamily,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-paragraph3-fontSize,12px);font-style:var(--vt-ce-theme-typography-paragraph3-fontStyle,normal);font-weight:var(--vt-ce-theme-typography-paragraph3-fontWeight,400);font-weight:700;letter-spacing:var(--vt-ce-theme-typography-paragraph3-letterSpacing,inherit);line-height:var(--vt-ce-theme-typography-paragraph3-lineHeight,18px);text-transform:var(--vt-ce-theme-typography-paragraph3-textTransform,inherit)}.vt_ce_Chip_buttonIcon__8d6b791d{--vt-ce-icon-size:18px;margin-left:5px}
+.vt_ce_DatePicker_reactAriaDatePicker__c88815e1{color:var(--vt-ce-theme-palette-text-primary,#2a323c);display:inline-block;font-family:var(--vt-ce-theme-typography-label-fontFamily,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-label-fontSize,14px);font-style:var(--vt-ce-theme-typography-label-fontStyle,normal);font-weight:var(--vt-ce-theme-typography-label-fontWeight,600);letter-spacing:var(--vt-ce-theme-typography-label-letterSpacing,inherit);line-height:var(--vt-ce-theme-typography-label-lineHeight,17px);text-transform:var(--vt-ce-theme-typography-label-textTransform,inherit)}.vt_ce_DatePicker_reactAriaDatePicker__c88815e1 .vt_ce_DatePicker_reactAriaGroup__c88815e1{align-items:center;align-self:stretch;background:var(--vt-ce-theme-palette-background-primary,#fff);border-radius:4px;color:var(--vt-ce-theme-palette-text-primary,#2a323c);display:flex;font-family:var(--vt-ce-theme-typography-paragraph2-fontFamily,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-paragraph2-fontSize,14px);font-style:var(--vt-ce-theme-typography-paragraph2-fontStyle,normal);font-weight:var(--vt-ce-theme-typography-paragraph2-fontWeight,400);gap:10px;letter-spacing:var(--vt-ce-theme-typography-paragraph2-letterSpacing,inherit);line-height:var(--vt-ce-theme-typography-paragraph2-lineHeight,20px);margin-bottom:1px;margin-top:1px;outline-color:var(--vt-ce-theme-palette-text-secondary,#5c6269);outline-style:solid;outline-width:1px;padding:8px;text-transform:var(--vt-ce-theme-typography-paragraph2-textTransform,inherit)}.vt_ce_DatePicker_reactAriaDatePicker__c88815e1 .vt_ce_DatePicker_reactAriaGroup__c88815e1:focus-within,.vt_ce_DatePicker_reactAriaDatePicker__c88815e1 .vt_ce_DatePicker_reactAriaGroup__c88815e1:hover,.vt_ce_DatePicker_reactAriaDatePicker__c88815e1 .vt_ce_DatePicker_reactAriaGroup__c88815e1[data-focused=true]{outline-color:var(--vt-ce-theme-palette-action-primary-hover-surface,#335b89);outline-width:2px}.vt_ce_DatePicker_reactAriaDatePicker__c88815e1 .vt_ce_DatePicker_reactAriaGroup__c88815e1[data-disabled=true]{background-color:var(--vt-ce-theme-palette-action-primary-disabled-surface,#fafafa);color:var(--vt-ce-theme-palette-action-primary-disabled-on,#7c848d);outline-color:var(--vt-ce-theme-palette-background-secondary,#e0e8f0)}.vt_ce_DatePicker_reactAriaDatePicker__c88815e1 .vt_ce_DatePicker_reactAriaGroup__c88815e1[data-disabled=true]:focus-within,.vt_ce_DatePicker_reactAriaDatePicker__c88815e1 .vt_ce_DatePicker_reactAriaGroup__c88815e1[data-disabled=true]:hover,.vt_ce_DatePicker_reactAriaDatePicker__c88815e1 .vt_ce_DatePicker_reactAriaGroup__c88815e1[data-disabled=true][data-focused=true]{outline-color:var(--vt-ce-theme-palette-background-secondary,#e0e8f0);outline-width:1px}.vt_ce_DatePicker_reactAriaDatePicker__c88815e1 .vt_ce_DatePicker_reactAriaGroup__c88815e1[data-error=true]{outline-color:var(--vt-ce-theme-palette-indicator-error-base-surface,#eb0000)}.vt_ce_DatePicker_reactAriaDatePicker__c88815e1 .vt_ce_DatePicker_reactAriaButton__c88815e1{border:none;cursor:pointer;padding:0}.vt_ce_DatePicker_reactAriaDatePicker__c88815e1 .vt_ce_DatePicker_reactAriaButton__c88815e1:focus{outline:none}.vt_ce_DatePicker_reactAriaDatePicker__c88815e1 .vt_ce_DatePicker_reactAriaDateInput__c88815e1{align-items:center;align-self:stretch;color:inherit;cursor:default;display:flex}.vt_ce_DatePicker_calendarBox__c88815e1{background-color:var(--vt-ce-theme-palette-background-primary,#fff);border:1px solid var(--vt-ce-theme-palette-disabled-on,#7c848d);border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);padding-block:10px 8px;padding-inline:10px 0}.vt_ce_DatePicker_calendarHeader__c88815e1{color:var(--vt-ce-theme-palette-text-primary,#2a323c);display:flex;gap:10px;justify-content:space-between;padding-inline:0 14px}.vt_ce_DatePicker_monthPickerArrowButtonsWrapper__c88815e1{display:flex;gap:14px}.vt_ce_DatePicker_yearPickerLayout__c88815e1{display:grid;gap:10px;grid-template-columns:repeat(4,1fr);height:270px;min-height:270px;overflow-y:scroll;padding-block:10px 0;padding-inline:10px 15px;width:100%}.vt_ce_DatePicker_yearPillButton__c88815e1{border-radius:30px;height:30px;width:55px}.vt_ce_DatePicker_calendarGrid__c88815e1{margin-bottom:20px;padding-block:10px 0;padding-inline:10px 20px;table-layout:fixed}.vt_ce_DatePicker_calendarGrid__c88815e1 tr{height:30px}.vt_ce_DatePicker_calendarGrid__c88815e1 td,.vt_ce_DatePicker_calendarGrid__c88815e1 th{width:20px}.vt_ce_DatePicker_calendarGrid__c88815e1 .vt_ce_DatePicker_weekdayHeader__c88815e1{color:var(--vt-ce-theme-palette-text-primary,#2a323c);font-family:var(--vt-ce-theme-typography-label-fontFamily,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-label-fontSize,14px);font-style:var(--vt-ce-theme-typography-label-fontStyle,normal);font-weight:var(--vt-ce-theme-typography-label-fontWeight,600);height:40px;letter-spacing:var(--vt-ce-theme-typography-label-letterSpacing,inherit);line-height:var(--vt-ce-theme-typography-label-lineHeight,17px);padding-block:0 10px;text-transform:var(--vt-ce-theme-typography-label-textTransform,inherit)}.vt_ce_DatePicker_calendarGrid__c88815e1 .vt_ce_DatePicker_calendarCellBtn__c88815e1{height:28px;width:20px}
+.vt_ce_DateRangePicker_dateRangePickerWrapper__8b44f64e{display:inline-flex;flex:1;gap:10px}
 .vt_ce_FormControl_formControl__876f6d27{-moz-column-gap:10px;column-gap:10px;display:inline-grid}.vt_ce_FormControl_placementBlockStart__876f6d27{grid-template-areas:"label" "control" "help" "error"}.vt_ce_FormControl_placementBlockStart__876f6d27 .vt_ce_FormControl_label__876f6d27{margin-block-end:3px}.vt_ce_FormControl_placementInlineStart__876f6d27{grid-template-areas:"label control" ". help" ". error"}.vt_ce_FormControl_placementInlineEnd__876f6d27{grid-template-areas:"control label" "help ." "error ."}.vt_ce_FormControl_label__876f6d27{align-self:baseline;color:var(--vt-ce-theme-palette-text-secondary,#5c6269);font-family:var(--vt-ce-theme-typography-label-fontFamily,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-label-fontSize,14px);font-style:var(--vt-ce-theme-typography-label-fontStyle,normal);font-weight:var(--vt-ce-theme-typography-label-fontWeight,600);grid-area:label;letter-spacing:var(--vt-ce-theme-typography-label-letterSpacing,inherit);line-height:var(--vt-ce-theme-typography-label-lineHeight,17px);text-transform:var(--vt-ce-theme-typography-label-textTransform,inherit)}.vt_ce_FormControl_innerControl__876f6d27{align-self:baseline;display:flex;grid-area:control}.vt_ce_FormControl_helpLabel__876f6d27{color:var(--vt-ce-theme-palette-text-secondary,#5c6269);grid-area:help}.vt_ce_FormControl_errorLabel__876f6d27,.vt_ce_FormControl_helpLabel__876f6d27{align-self:baseline;font-family:var(--vt-ce-theme-typography-paragraph3-fontFamily,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-paragraph3-fontSize,12px);font-style:var(--vt-ce-theme-typography-paragraph3-fontStyle,normal);font-weight:var(--vt-ce-theme-typography-paragraph3-fontWeight,400);letter-spacing:var(--vt-ce-theme-typography-paragraph3-letterSpacing,inherit);line-height:var(--vt-ce-theme-typography-paragraph3-lineHeight,18px);margin-block-start:3px;text-transform:var(--vt-ce-theme-typography-paragraph3-textTransform,inherit)}.vt_ce_FormControl_errorLabel__876f6d27{align-items:center;color:var(--vt-ce-theme-palette-indicator-error-base-surface,#eb0000);display:flex;gap:3px;grid-area:error}
-.vt_ce_Input_input__2ce66cab{align-items:center;background:var(--vt-ce-theme-palette-background-primary,#fff);border-radius:4px;color:var(--vt-ce-theme-palette-text-primary,#2a323c);display:inline-flex;flex:1;gap:10px;margin:1px;outline:var(--vt-ce-theme-palette-text-secondary,#5c6269) solid 1px;padding:0 8px}.vt_ce_Input_input__2ce66cab:focus-within{outline-color:var(--vt-ce-theme-palette-action-primary-hover-surface,#335b89);outline-width:2px}.vt_ce_Input_input__2ce66cab:hover{outline-color:var(--vt-ce-theme-palette-action-primary-hover-surface,#335b89);outline-width:2px}.vt_ce_Input_input__2ce66cab[data-disabled=true]{background-color:var(--vt-ce-theme-palette-action-primary-disabled-surface,#fafafa);color:var(--vt-ce-theme-palette-action-primary-disabled-on,#7c848d);outline-color:var(--vt-ce-theme-palette-background-secondary,#e0e8f0)}.vt_ce_Input_input__2ce66cab[data-disabled=true]:focus-within{outline-color:var(--vt-ce-theme-palette-background-secondary,#e0e8f0);outline-width:1px}.vt_ce_Input_input__2ce66cab[data-disabled=true]:hover{outline-color:var(--vt-ce-theme-palette-background-secondary,#e0e8f0);outline-width:1px}.vt_ce_Input_input__2ce66cab[data-error=true]{outline-color:var(--vt-ce-theme-palette-indicator-error-base-surface,#eb0000)}.vt_ce_Input_innerInput__2ce66cab{background:none;border:none;color:inherit;flex-grow:1;font-family:var(--vt-ce-theme-typography-input-fontFamily,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-input-fontSize,14px);font-style:var(--vt-ce-theme-typography-input-fontStyle,normal);font-weight:var(--vt-ce-theme-typography-input-fontWeight,400);letter-spacing:var(--vt-ce-theme-typography-input-letterSpacing,inherit);line-height:var(--vt-ce-theme-typography-input-lineHeight,20px);outline:none;padding:8px 0;text-transform:var(--vt-ce-theme-typography-input-textTransform,inherit)}.vt_ce_Input_innerInput__2ce66cab::-moz-placeholder{color:var(--vt-ce-theme-palette-action-primary-disabled-on,#7c848d)}.vt_ce_Input_innerInput__2ce66cab::placeholder{color:var(--vt-ce-theme-palette-action-primary-disabled-on,#7c848d)}.vt_ce_Input_inputIcon__2ce66cab{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center;padding:8px 0;--vt-ce-icon-size:18px}
+.vt_ce_Input_input__81e6382e{align-items:center;background:var(--vt-ce-theme-palette-background-primary,#fff);border-radius:4px;color:var(--vt-ce-theme-palette-text-primary,#2a323c);display:inline-flex;flex:1;gap:10px;margin:1px;outline:var(--vt-ce-theme-palette-text-secondary,#5c6269) solid 1px;padding:0 8px}.vt_ce_Input_input__81e6382e:focus-within,.vt_ce_Input_input__81e6382e:hover{outline-color:var(--vt-ce-theme-palette-action-primary-hover-surface,#335b89);outline-width:2px}.vt_ce_Input_input__81e6382e[data-disabled=true]{background-color:var(--vt-ce-theme-palette-action-primary-disabled-surface,#fafafa);color:var(--vt-ce-theme-palette-action-primary-disabled-on,#7c848d);outline-color:var(--vt-ce-theme-palette-background-secondary,#e0e8f0)}.vt_ce_Input_input__81e6382e[data-disabled=true]:focus-within,.vt_ce_Input_input__81e6382e[data-disabled=true]:hover{outline-color:var(--vt-ce-theme-palette-background-secondary,#e0e8f0);outline-width:1px}.vt_ce_Input_input__81e6382e[data-error=true]{outline-color:var(--vt-ce-theme-palette-indicator-error-base-surface,#eb0000)}.vt_ce_Input_innerInput__81e6382e{background:none;border:none;color:inherit;flex-grow:1;font-family:var(--vt-ce-theme-typography-input-fontFamily,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-input-fontSize,14px);font-style:var(--vt-ce-theme-typography-input-fontStyle,normal);font-weight:var(--vt-ce-theme-typography-input-fontWeight,400);letter-spacing:var(--vt-ce-theme-typography-input-letterSpacing,inherit);line-height:var(--vt-ce-theme-typography-input-lineHeight,20px);outline:none;padding:8px 0;text-transform:var(--vt-ce-theme-typography-input-textTransform,inherit)}.vt_ce_Input_innerInput__81e6382e::-moz-placeholder{color:var(--vt-ce-theme-palette-action-primary-disabled-on,#7c848d)}.vt_ce_Input_innerInput__81e6382e::placeholder{color:var(--vt-ce-theme-palette-action-primary-disabled-on,#7c848d)}.vt_ce_Input_inputIcon__81e6382e{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center;padding:8px 0;--vt-ce-icon-size:18px}
 .vt_ce_Pagination_list__50478999{align-items:center;display:flex;list-style:none;margin:0;padding:0}.vt_ce_Pagination_list__50478999 li{align-items:center;display:flex}.vt_ce_Pagination_ellipsis__50478999{color:var(--vt-ce-theme-palette-text-tertiary,#465364)}
 .vt_ce_RadioButton_radio__903bab82{align-items:center;color:var(--vt-ce-theme-palette-text-secondary,#5c6269);cursor:pointer;display:flex}.vt_ce_RadioButton_radio__903bab82 .vt_ce_RadioButton_radioCircleOuter__903bab82{fill:none;stroke:var(--vt-ce-theme-palette-text-tertiary,#465364)}.vt_ce_RadioButton_radio__903bab82 .vt_ce_RadioButton_radioCircleInner__903bab82{fill:none}.vt_ce_RadioButton_radio__903bab82:hover .vt_ce_RadioButton_radioCircleOuter__903bab82{fill:none;stroke:var(--vt-ce-theme-palette-text-tertiary,#465364)}.vt_ce_RadioButton_radio__903bab82:hover .vt_ce_RadioButton_radioCircleInner__903bab82{fill:var(--vt-ce-theme-palette-action-primary-hover-surface,#335b89)}.vt_ce_RadioButton_radio__903bab82[aria-checked=true] .vt_ce_RadioButton_radioCircleInner__903bab82{fill:var(--vt-ce-theme-palette-action-primary-base-surface,#1871e8)}.vt_ce_RadioButton_radio__903bab82[aria-checked=true]:hover .vt_ce_RadioButton_radioCircleInner__903bab82{fill:var(--vt-ce-theme-palette-action-primary-hover-surface,#335b89)}.vt_ce_RadioButton_radio__903bab82[aria-disabled=true]{color:var(--vt-ce-theme-palette-action-primary-disabled-on,#7c848d);fill:none}.vt_ce_RadioButton_radio__903bab82[aria-disabled=true] .vt_ce_RadioButton_radioCircleOuter__903bab82{stroke:var(--vt-ce-theme-palette-action-primary-disabled-on,#7c848d)}.vt_ce_RadioButton_radio__903bab82[aria-disabled=true][aria-checked=true] .vt_ce_RadioButton_radioCircleInner__903bab82{fill:var(--vt-ce-theme-palette-action-primary-disabled-on,#7c848d)}.vt_ce_RadioButton_radio__903bab82[aria-disabled=true]:hover{fill:none}.vt_ce_RadioButton_radio__903bab82[aria-disabled=true]:hover .vt_ce_RadioButton_radioCircleOuter__903bab82{stroke:var(--vt-ce-theme-palette-action-primary-disabled-on,#7c848d)}.vt_ce_RadioButton_radio__903bab82[aria-disabled=true]:hover[aria-checked=true] .vt_ce_RadioButton_radioCircleInner__903bab82{fill:var(--vt-ce-theme-palette-action-primary-disabled-on,#7c848d)}.vt_ce_RadioButton_passthroughLabelContainer__903bab82{cursor:pointer;display:inline-block;height:40px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:40px}.vt_ce_RadioButton_invisibleRadio__903bab82{cursor:pointer;height:0;opacity:0;position:absolute;width:0}.vt_ce_RadioButton_visibleLabel__903bab82{font-family:var(--vt-ce-theme-typography-label-fontFamily,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-label-fontSize,14px);font-style:var(--vt-ce-theme-typography-label-fontStyle,normal);font-weight:var(--vt-ce-theme-typography-label-fontWeight,600);letter-spacing:var(--vt-ce-theme-typography-label-letterSpacing,inherit);line-height:var(--vt-ce-theme-typography-label-lineHeight,17px);margin-left:5px;text-transform:var(--vt-ce-theme-typography-label-textTransform,inherit)}.vt_ce_RadioButton_iconContainer__903bab82{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:1}
 .vt_ce_TablePagination_container__b08ac6ea{align-items:center;display:flex;gap:25px}.vt_ce_TablePagination_rowsPerPageSelect__b08ac6ea{flex-shrink:0}.vt_ce_TablePagination_pageCounts__b08ac6ea{color:var(--vt-ce-theme-palette-text-primary,#2a323c);font-family:var(--vt-ce-theme-typography-paragraph3-fontFamily,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-paragraph3-fontSize,12px);font-style:var(--vt-ce-theme-typography-paragraph3-fontStyle,normal);font-weight:var(--vt-ce-theme-typography-paragraph3-fontWeight,400);letter-spacing:var(--vt-ce-theme-typography-paragraph3-letterSpacing,inherit);line-height:var(--vt-ce-theme-typography-paragraph3-lineHeight,18px);text-transform:var(--vt-ce-theme-typography-paragraph3-textTransform,inherit)}.vt_ce_TablePagination_btnList__b08ac6ea{align-items:center;display:flex;flex-shrink:0;gap:8px;list-style:none;margin:0;padding:0}.vt_ce_TablePagination_btnList__b08ac6ea li{align-items:center;display:flex}.vt_ce_TablePagination_ellipsis__b08ac6ea{color:var(--vt-ce-theme-palette-text-tertiary,#465364)}
@@ -15,8 +17,8 @@
 .vt_ce_Tooltip_tooltipAnchor__eccca1a2{display:inline}.vt_ce_Tooltip_tooltipFloat__eccca1a2{z-index:10}.vt_ce_Tooltip_tooltipBody__eccca1a2{background-color:var(--vt-ce-theme-palette-background-primary,#fff);border-color:var(--vt-ce-theme-palette-background-secondary,#e0e8f0);border-radius:4px;border-style:solid;border-width:1px;color:var(--vt-ce-theme-palette-text-primary,#2a323c);font-family:var(--vt-ce-theme-typography-label-fontFamily,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-label-fontSize,14px);font-style:var(--vt-ce-theme-typography-label-fontStyle,normal);font-weight:var(--vt-ce-theme-typography-label-fontWeight,600);letter-spacing:var(--vt-ce-theme-typography-label-letterSpacing,inherit);line-height:var(--vt-ce-theme-typography-label-lineHeight,17px);padding:4px 10px;text-transform:var(--vt-ce-theme-typography-label-textTransform,inherit)}
 .vt_ce_Typography_tTitle__9ad87f45{font-family:var(--vt-ce-theme-typography-title-fontFamily,Dosis,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-title-fontSize,18px);font-style:var(--vt-ce-theme-typography-title-fontStyle,normal);font-weight:var(--vt-ce-theme-typography-title-fontWeight,600);letter-spacing:var(--vt-ce-theme-typography-title-letterSpacing,.25px);line-height:var(--vt-ce-theme-typography-title-lineHeight,normal);text-transform:var(--vt-ce-theme-typography-title-textTransform,uppercase)}.vt_ce_Typography_tH1__9ad87f45{font-family:var(--vt-ce-theme-typography-h1-fontFamily,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-h1-fontSize,24px);font-style:var(--vt-ce-theme-typography-h1-fontStyle,normal);font-weight:var(--vt-ce-theme-typography-h1-fontWeight,600);letter-spacing:var(--vt-ce-theme-typography-h1-letterSpacing,inherit);line-height:var(--vt-ce-theme-typography-h1-lineHeight,34px);text-transform:var(--vt-ce-theme-typography-h1-textTransform,inherit)}.vt_ce_Typography_tH2__9ad87f45{font-family:var(--vt-ce-theme-typography-h2-fontFamily,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-h2-fontSize,20px);font-style:var(--vt-ce-theme-typography-h2-fontStyle,normal);font-weight:var(--vt-ce-theme-typography-h2-fontWeight,600);letter-spacing:var(--vt-ce-theme-typography-h2-letterSpacing,inherit);line-height:var(--vt-ce-theme-typography-h2-lineHeight,30px);text-transform:var(--vt-ce-theme-typography-h2-textTransform,inherit)}.vt_ce_Typography_tH3__9ad87f45{font-family:var(--vt-ce-theme-typography-h3-fontFamily,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-h3-fontSize,18px);font-style:var(--vt-ce-theme-typography-h3-fontStyle,normal);font-weight:var(--vt-ce-theme-typography-h3-fontWeight,600);letter-spacing:var(--vt-ce-theme-typography-h3-letterSpacing,inherit);line-height:var(--vt-ce-theme-typography-h3-lineHeight,26px);text-transform:var(--vt-ce-theme-typography-h3-textTransform,inherit)}.vt_ce_Typography_tH4__9ad87f45{font-family:var(--vt-ce-theme-typography-h4-fontFamily,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-h4-fontSize,16px);font-style:var(--vt-ce-theme-typography-h4-fontStyle,normal);font-weight:var(--vt-ce-theme-typography-h4-fontWeight,600);letter-spacing:var(--vt-ce-theme-typography-h4-letterSpacing,inherit);line-height:var(--vt-ce-theme-typography-h4-lineHeight,24px);text-transform:var(--vt-ce-theme-typography-h4-textTransform,inherit)}.vt_ce_Typography_tLabel__9ad87f45{font-family:var(--vt-ce-theme-typography-label-fontFamily,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-label-fontSize,14px);font-style:var(--vt-ce-theme-typography-label-fontStyle,normal);font-weight:var(--vt-ce-theme-typography-label-fontWeight,600);letter-spacing:var(--vt-ce-theme-typography-label-letterSpacing,inherit);line-height:var(--vt-ce-theme-typography-label-lineHeight,17px);text-transform:var(--vt-ce-theme-typography-label-textTransform,inherit)}.vt_ce_Typography_tParagraph1__9ad87f45{font-family:var(--vt-ce-theme-typography-paragraph1-fontFamily,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-paragraph1-fontSize,16px);font-style:var(--vt-ce-theme-typography-paragraph1-fontStyle,normal);font-weight:var(--vt-ce-theme-typography-paragraph1-fontWeight,400);letter-spacing:var(--vt-ce-theme-typography-paragraph1-letterSpacing,inherit);line-height:var(--vt-ce-theme-typography-paragraph1-lineHeight,24px);text-transform:var(--vt-ce-theme-typography-paragraph1-textTransform,inherit)}.vt_ce_Typography_tParagraph2__9ad87f45{font-family:var(--vt-ce-theme-typography-paragraph2-fontFamily,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-paragraph2-fontSize,14px);font-style:var(--vt-ce-theme-typography-paragraph2-fontStyle,normal);font-weight:var(--vt-ce-theme-typography-paragraph2-fontWeight,400);letter-spacing:var(--vt-ce-theme-typography-paragraph2-letterSpacing,inherit);line-height:var(--vt-ce-theme-typography-paragraph2-lineHeight,20px);text-transform:var(--vt-ce-theme-typography-paragraph2-textTransform,inherit)}.vt_ce_Typography_tParagraph3__9ad87f45{font-family:var(--vt-ce-theme-typography-paragraph3-fontFamily,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-paragraph3-fontSize,12px);font-style:var(--vt-ce-theme-typography-paragraph3-fontStyle,normal);font-weight:var(--vt-ce-theme-typography-paragraph3-fontWeight,400);letter-spacing:var(--vt-ce-theme-typography-paragraph3-letterSpacing,inherit);line-height:var(--vt-ce-theme-typography-paragraph3-lineHeight,18px);text-transform:var(--vt-ce-theme-typography-paragraph3-textTransform,inherit)}.vt_ce_Typography_tButton__9ad87f45{font-family:var(--vt-ce-theme-typography-button-fontFamily,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-button-fontSize,14px);font-style:var(--vt-ce-theme-typography-button-fontStyle,normal);font-weight:var(--vt-ce-theme-typography-button-fontWeight,600);letter-spacing:var(--vt-ce-theme-typography-button-letterSpacing,inherit);line-height:var(--vt-ce-theme-typography-button-lineHeight,20px);text-transform:var(--vt-ce-theme-typography-button-textTransform,inherit)}.vt_ce_Typography_tButtonSmall__9ad87f45{font-family:var(--vt-ce-theme-typography-buttonSmall-fontFamily,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-buttonSmall-fontSize,12px);font-style:var(--vt-ce-theme-typography-buttonSmall-fontStyle,normal);font-weight:var(--vt-ce-theme-typography-buttonSmall-fontWeight,600);letter-spacing:var(--vt-ce-theme-typography-buttonSmall-letterSpacing,inherit);line-height:var(--vt-ce-theme-typography-buttonSmall-lineHeight,18px);text-transform:var(--vt-ce-theme-typography-buttonSmall-textTransform,inherit)}.vt_ce_Typography_tInput__9ad87f45{font-family:var(--vt-ce-theme-typography-input-fontFamily,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-input-fontSize,14px);font-style:var(--vt-ce-theme-typography-input-fontStyle,normal);font-weight:var(--vt-ce-theme-typography-input-fontWeight,400);letter-spacing:var(--vt-ce-theme-typography-input-letterSpacing,inherit);line-height:var(--vt-ce-theme-typography-input-lineHeight,20px);text-transform:var(--vt-ce-theme-typography-input-textTransform,inherit)}.vt_ce_Typography_cPrimary__9ad87f45{color:var(--vt-ce-theme-palette-text-primary,#2a323c)}.vt_ce_Typography_cSecondary__9ad87f45{color:var(--vt-ce-theme-palette-text-secondary,#5c6269)}.vt_ce_Typography_cTertiary__9ad87f45{color:var(--vt-ce-theme-palette-text-tertiary,#465364)}.vt_ce_Typography_cDisabled__9ad87f45{color:var(--vt-ce-theme-palette-disabled-on,#7c848d)}
 .vt_ce_styles_cssVarProvider__b6a03d8f{display:contents}
-.vt_ce_Dialog_dialogOverlay__36db6625{background:rgba(0,0,0,.54);display:grid;place-items:center}.vt_ce_Dialog_dialog__36db6625{background-color:var(--vt-ce-theme-palette-background-primary,#fff);border:1px solid var(--vt-ce-theme-palette-disabled-on,#7c848d);border-radius:4px;box-shadow:0 4px 4px 0 rgba(0,0,0,.25);color:var(--vt-ce-theme-palette-text-primary,#2a323c);display:flex;flex-direction:column;margin:15px;max-height:calc(100% - 64px);max-width:calc(100% - 64px);padding:30px 0}.vt_ce_Dialog_dialog__36db6625:has(>.vt_ce_Dialog_dialogStart__36db6625:first-child){padding-block-start:0}.vt_ce_Dialog_dialog__36db6625:has(>.vt_ce_Dialog_dialogEnd__36db6625:last-child){padding-block-end:0}.vt_ce_Dialog_dialogStart__36db6625{display:block;flex:0 0 auto}.vt_ce_Dialog_dialogContent__36db6625{flex:1 1 auto;--webkit-overflow-scrolling:touch;overflow-y:auto;padding:0 30px}.vt_ce_Dialog_dialogEnd__36db6625{display:block;flex:0 0 auto}.vt_ce_Dialog_dialogTitle__36db6625{flex:0 0 auto;font-size:18px;line-height:24px;margin:30px 0 0;padding:0 30px}.vt_ce_Dialog_dialogTypography__36db6625{margin:15px 0}.vt_ce_Dialog_dialogActions__36db6625{align-items:center;display:flex;gap:10px;justify-content:flex-end;margin:15px 0 40px;padding:0 30px}
 .vt_ce_Drawer_drawerOverlay__8f34504f{display:grid;inset:0;overflow:hidden;pointer-events:none}.vt_ce_Drawer_drawerOverlay__8f34504f>*{pointer-events:auto}.vt_ce_Drawer_drawerOverlayEnabled__8f34504f{background:rgba(0,0,0,.54);pointer-events:auto}.vt_ce_Drawer_drawerOverlayStrategyFixed__8f34504f{position:fixed}.vt_ce_Drawer_drawerOverlayStrategyAbsolute__8f34504f{position:absolute}.vt_ce_Drawer_drawerOverlayPlacementStart__8f34504f{place-items:stretch start}.vt_ce_Drawer_drawerOverlayPlacementStart__8f34504f .vt_ce_Drawer_drawer__8f34504f{border-inline-end:1px solid var(--vt-ce-theme-palette-disabled-on,#7c848d)}.vt_ce_Drawer_drawerOverlayPlacementEnd__8f34504f{place-items:stretch end}.vt_ce_Drawer_drawerOverlayPlacementEnd__8f34504f .vt_ce_Drawer_drawer__8f34504f{border-inline-start:1px solid var(--vt-ce-theme-palette-disabled-on,#7c848d)}.vt_ce_Drawer_drawerWrapper__8f34504f{display:flex;max-width:calc(100% - 64px);overflow-y:hidden}.vt_ce_Drawer_drawer__8f34504f{background-color:var(--vt-ce-theme-palette-background-primary,#fff);box-shadow:0 0 14px 0 rgba(0,0,0,.25);color:var(--vt-ce-theme-palette-text-primary,#2a323c);display:flex;flex-direction:column;padding:20px 0}.vt_ce_Drawer_drawer__8f34504f:has(>.vt_ce_Drawer_drawerStart__8f34504f:first-child){padding-block-start:0}.vt_ce_Drawer_drawer__8f34504f:has(>.vt_ce_Drawer_drawerEnd__8f34504f:last-child){padding-block-end:0}.vt_ce_Drawer_drawerStart__8f34504f{display:block;flex:0 0 auto}.vt_ce_Drawer_drawerContent__8f34504f{flex:1 1 0;--webkit-overflow-scrolling:touch;overflow-y:auto;padding:0 20px}.vt_ce_Drawer_drawerEnd__8f34504f{display:block;flex:0 0 auto}.vt_ce_Drawer_drawerTitleContainer__8f34504f{align-items:baseline;background-color:var(--vt-ce-theme-palette-background-primary,#fff);color:var(--vt-ce-theme-palette-text-primary,#2a323c);display:flex;justify-content:space-between}.vt_ce_Drawer_drawerTitleContainer__8f34504f[data-container=bar]{background-color:var(--vt-ce-drawer-palette-surface);color:var(--vt-ce-drawer-palette-on)}.vt_ce_Drawer_drawerTitle__8f34504f{flex:1 0 auto;margin:20px 0;padding:0 20px}.vt_ce_Drawer_drawerTitleActions__8f34504f{display:flex;flex:0 0 auto;padding:0 20px 0 0}.vt_ce_Drawer_drawerTypography__8f34504f{margin:20px 0}.vt_ce_Drawer_drawerActions__8f34504f{align-items:center;display:flex;flex:0 0 auto;gap:10px;justify-content:flex-end;margin:20px 0;padding:0 20px}
-.vt_ce_Icon_icon__5881e2e1{display:inline-block;height:var(--vt-ce-icon-size,18px);width:var(--vt-ce-icon-size,18px)}.vt_ce_Icon_icon__5881e2e1 svg{height:var(--vt-ce-icon-size,18px);vertical-align:baseline;width:var(--vt-ce-icon-size,18px)}.vt_ce_Icon_icon__5881e2e1[data-size=large],.vt_ce_Icon_icon__5881e2e1[data-size=large] svg{height:24px;width:24px}.vt_ce_Icon_icon__5881e2e1[data-size=medium],.vt_ce_Icon_icon__5881e2e1[data-size=medium] svg{height:18px;width:18px}.vt_ce_Icon_icon__5881e2e1[data-size=small],.vt_ce_Icon_icon__5881e2e1[data-size=small] svg{height:14px;width:14px}.vt_ce_Icon_icon__5881e2e1[data-size=inherit],.vt_ce_Icon_icon__5881e2e1[data-size=inherit] svg{font-size:1em;height:1em;width:1em}
+.vt_ce_Dialog_dialogOverlay__36db6625{background:rgba(0,0,0,.54);display:grid;place-items:center}.vt_ce_Dialog_dialog__36db6625{background-color:var(--vt-ce-theme-palette-background-primary,#fff);border:1px solid var(--vt-ce-theme-palette-disabled-on,#7c848d);border-radius:4px;box-shadow:0 4px 4px 0 rgba(0,0,0,.25);color:var(--vt-ce-theme-palette-text-primary,#2a323c);display:flex;flex-direction:column;margin:15px;max-height:calc(100% - 64px);max-width:calc(100% - 64px);padding:30px 0}.vt_ce_Dialog_dialog__36db6625:has(>.vt_ce_Dialog_dialogStart__36db6625:first-child){padding-block-start:0}.vt_ce_Dialog_dialog__36db6625:has(>.vt_ce_Dialog_dialogEnd__36db6625:last-child){padding-block-end:0}.vt_ce_Dialog_dialogStart__36db6625{display:block;flex:0 0 auto}.vt_ce_Dialog_dialogContent__36db6625{flex:1 1 auto;--webkit-overflow-scrolling:touch;overflow-y:auto;padding:0 30px}.vt_ce_Dialog_dialogEnd__36db6625{display:block;flex:0 0 auto}.vt_ce_Dialog_dialogTitle__36db6625{flex:0 0 auto;font-size:18px;line-height:24px;margin:30px 0 0;padding:0 30px}.vt_ce_Dialog_dialogTypography__36db6625{margin:15px 0}.vt_ce_Dialog_dialogActions__36db6625{align-items:center;display:flex;gap:10px;justify-content:flex-end;margin:15px 0 40px;padding:0 30px}
 .vt_ce_Menu_menu__f5f59292{border:1px solid var(--vt-ce-theme-palette-disabled-on,#7c848d);border-radius:0 0 4px 4px;display:block;outline:0;padding-bottom:5px;padding-top:5px}.vt_ce_Menu_menu__f5f59292,.vt_ce_Menu_option__f5f59292{background-color:var(--vt-ce-theme-palette-background-primary,#fff)}.vt_ce_Menu_option__f5f59292{align-items:center;border:none;color:var(--vt-ce-theme-palette-text-primary,#2a323c);cursor:pointer;display:flex;font-family:var(--vt-ce-theme-typography-paragraph2-fontFamily,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-paragraph2-fontSize,14px);font-style:var(--vt-ce-theme-typography-paragraph2-fontStyle,normal);font-weight:var(--vt-ce-theme-typography-paragraph2-fontWeight,400);letter-spacing:var(--vt-ce-theme-typography-paragraph2-letterSpacing,inherit);line-height:var(--vt-ce-theme-typography-paragraph2-lineHeight,20px);padding:5px 10px;text-transform:var(--vt-ce-theme-typography-paragraph2-textTransform,inherit);width:100%}.vt_ce_Menu_option__f5f59292:focus{background-color:var(--vt-ce-theme-palette-table-hover-surface,#eaf1fa);color:var(--vt-ce-theme-palette-table-hover-on,#000);outline:none}.vt_ce_Menu_optionIcon__f5f59292{align-items:center;display:inline-flex;justify-content:center;margin-inline-end:10px;--vt-ce-icon-size:14px}.vt_ce_Menu_optionLabel__f5f59292{text-align:start}
+.vt_ce_Icon_icon__5881e2e1{display:inline-block;height:var(--vt-ce-icon-size,18px);width:var(--vt-ce-icon-size,18px)}.vt_ce_Icon_icon__5881e2e1 svg{height:var(--vt-ce-icon-size,18px);vertical-align:baseline;width:var(--vt-ce-icon-size,18px)}.vt_ce_Icon_icon__5881e2e1[data-size=large],.vt_ce_Icon_icon__5881e2e1[data-size=large] svg{height:24px;width:24px}.vt_ce_Icon_icon__5881e2e1[data-size=medium],.vt_ce_Icon_icon__5881e2e1[data-size=medium] svg{height:18px;width:18px}.vt_ce_Icon_icon__5881e2e1[data-size=small],.vt_ce_Icon_icon__5881e2e1[data-size=small] svg{height:14px;width:14px}.vt_ce_Icon_icon__5881e2e1[data-size=inherit],.vt_ce_Icon_icon__5881e2e1[data-size=inherit] svg{font-size:1em;height:1em;width:1em}
 .vt_ce_Select_select__839d0f7a{align-items:center;background:var(--vt-ce-theme-palette-background-primary,#fff);border-radius:4px;color:var(--vt-ce-theme-palette-text-primary,#2a323c);display:inline-flex;flex:1;gap:10px;margin-bottom:1px;margin-top:1px;outline:var(--vt-ce-theme-palette-text-secondary,#5c6269) solid 1px;padding:0 8px}.vt_ce_Select_select__839d0f7a:focus-within,.vt_ce_Select_select__839d0f7a:hover,.vt_ce_Select_select__839d0f7a[data-focused=true]{outline-color:var(--vt-ce-theme-palette-action-primary-hover-surface,#335b89);outline-width:2px}.vt_ce_Select_select__839d0f7a[data-disabled=true]{background-color:var(--vt-ce-theme-palette-action-primary-disabled-surface,#fafafa);color:var(--vt-ce-theme-palette-action-primary-disabled-on,#7c848d);outline-color:var(--vt-ce-theme-palette-background-secondary,#e0e8f0)}.vt_ce_Select_select__839d0f7a[data-disabled=true]:focus-within,.vt_ce_Select_select__839d0f7a[data-disabled=true]:hover{outline-color:var(--vt-ce-theme-palette-background-secondary,#e0e8f0);outline-width:1px}.vt_ce_Select_select__839d0f7a[data-error=true]{outline-color:var(--vt-ce-theme-palette-indicator-error-base-surface,#eb0000)}.vt_ce_Select_innerInput__839d0f7a{background:none;border:none;color:inherit;flex-grow:1;font-family:var(--vt-ce-theme-typography-input-fontFamily,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-input-fontSize,14px);font-style:var(--vt-ce-theme-typography-input-fontStyle,normal);font-weight:var(--vt-ce-theme-typography-input-fontWeight,400);letter-spacing:var(--vt-ce-theme-typography-input-letterSpacing,inherit);line-height:var(--vt-ce-theme-typography-input-lineHeight,20px);outline:none;padding:8px 0;text-transform:var(--vt-ce-theme-typography-input-textTransform,inherit)}.vt_ce_Select_innerInput__839d0f7a::-moz-placeholder{color:var(--vt-ce-theme-palette-action-primary-disabled-on,#7c848d)}.vt_ce_Select_innerInput__839d0f7a::placeholder{color:var(--vt-ce-theme-palette-action-primary-disabled-on,#7c848d)}.vt_ce_Select_innerInput__839d0f7a[data-selected=true]::-moz-placeholder{color:inherit}.vt_ce_Select_innerInput__839d0f7a[data-selected=true]::placeholder{color:inherit}.vt_ce_Select_selectIcon__839d0f7a{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center;padding:8px 0;--vt-ce-icon-size:18px}

package/dist/types/Button/index.d.ts

@@ -1,23 +1,30 @@
-import React, { MouseEventHandler } from 'react';
+import React from 'react';
 import { type PaletteActionVariantsColors, type ResolvablePaletteValue } from '../styles/index.js';
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 export type ButtonSize = 'large' | 'small';
 export type ButtonPalette = ResolvablePaletteValue<PaletteActionVariantsColors>;
-export type ButtonProps = {
+export type ButtonProps = React.ComponentPropsWithoutRef<'button'> & {
     variant?: ButtonVariant;
     palette?: ButtonPalette;
     size?: ButtonSize;
-    type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
     disabled?: boolean;
     loading?: boolean;
     active?: boolean;
     startIcon?: React.ReactNode;
     endIcon?: React.ReactNode;
-    onClick?: MouseEventHandler<HTMLButtonElement>;
     children?: React.ReactNode;
     'data-testid'?: string;
-    style?: React.CSSProperties;
-    className?: string;
 };
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Button: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    variant?: ButtonVariant | undefined;
+    palette?: PaletteActionVariantsColors | import("../styles/css-vars.js").RecursiveStringObject<PaletteActionVariantsColors> | undefined;
+    size?: ButtonSize | undefined;
+    disabled?: boolean | undefined;
+    loading?: boolean | undefined;
+    active?: boolean | undefined;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    children?: React.ReactNode;
+    'data-testid'?: string | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/types/Checkbox/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export type CheckboxProps = Omit<React.HTMLProps<HTMLInputElement>, 'type'> & {
+export type CheckboxProps = Omit<React.ComponentPropsWithoutRef<'input'>, 'type'> & {
     defaultChecked?: boolean;
     checked?: boolean;
     label?: React.ReactNode;
@@ -9,5 +9,14 @@ export type CheckboxProps = Omit<React.HTMLProps<HTMLInputElement>, 'type'> & {
     style?: React.CSSProperties;
     className?: string;
 };
-declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type"> & {
+    defaultChecked?: boolean | undefined;
+    checked?: boolean | undefined;
+    label?: React.ReactNode;
+    indeterminate?: boolean | undefined;
+    disabled?: boolean | undefined;
+    'data-testid'?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    className?: string | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
 export default Checkbox;

package/dist/types/DatePicker/Calendar.d.ts

@@ -0,0 +1,7 @@
+import { DateValue } from 'react-aria';
+import { AriaCalendarProps } from '@react-types/calendar';
+type CalendarProps = AriaCalendarProps<DateValue> & {
+    changeYear: (year: number) => void;
+};
+export default function Calendar({ changeYear: propsChangeYear, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/DatePicker/DateField.d.ts

@@ -0,0 +1,3 @@
+import { DateValue } from 'react-aria';
+import { AriaDateFieldProps } from '@react-types/datepicker';
+export default function DateField(props: AriaDateFieldProps<DateValue>): import("react/jsx-runtime").JSX.Element;

package/dist/types/DatePicker/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { type PopoverPlacement, type PopoverPortalElProp } from '../popover/index.js';
+export type DatePickerProps = {
+    defaultValue?: string | undefined;
+    /** ISO 8601 */
+    value?: string;
+    error?: boolean;
+    disabled?: boolean;
+    shouldForceLeadingZeros?: boolean;
+    portalEl?: PopoverPortalElProp;
+    placement?: PopoverPlacement;
+    onChange?(value: string): void;
+    'data-testid'?: string;
+    style?: React.CSSProperties;
+    className?: string;
+};
+export default function DatePicker({ placement, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/DateRangePicker/index.d.ts

@@ -0,0 +1,16 @@
+import { DatePickerProps } from '../DatePicker/index.js';
+import { PopoverPortalElProp } from '../popover/types.js';
+import type { FormControlProps } from '../FormControl/index.js';
+type DateRangePickerProps = {
+    startDate: {
+        control?: FormControlProps;
+        props: DatePickerProps;
+    };
+    endDate: {
+        control?: FormControlProps;
+        props: DatePickerProps;
+    };
+    portalEl?: PopoverPortalElProp;
+};
+export default function DateRangePicker({ startDate, endDate, portalEl }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;
+export {};