@veritone-ce/design-system 2.3.3 → 2.3.5

package/dist/cjs/Badge/index.js

@@ -18,8 +18,11 @@ var index = require('../Typography/index.js');
 
 function Badge({
   palette = defaultTheme.defaultThemeCssVariableUsages.palette.indicator.info.base,
+  variant = "primary",
+  disabled = false,
   ...props
 }) {
+  const variantCn = styles_module.default[`variant-${variant}`];
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
@@ -27,10 +30,10 @@ function Badge({
       className: cx.cx(styles_module.default["badge-anchor"], props.className),
       children: [
         props.children,
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_module.default["badge-wrapper"], children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_module.default["badge-wrapper"], "data-disabled": disabled, children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: styles_module.default["badge"],
+            className: cx.cx(styles_module.default["badge"], variantCn),
             style: {
               ...{
                 "--vt-ce-badge-palette-base-surface": palette.surface,

package/dist/cjs/Badge/styles.module.scss.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var modules_efc4e723 = {"badge-anchor":"vt_ce_Badge_badgeAnchor__aa089fbb","badge-wrapper":"vt_ce_Badge_badgeWrapper__aa089fbb","badge":"vt_ce_Badge_badge__aa089fbb","badge-text":"vt_ce_Badge_badgeText__aa089fbb"};
+var modules_efc4e723 = {"badge-anchor":"vt_ce_Badge_badgeAnchor__05d729fb","badge-wrapper":"vt_ce_Badge_badgeWrapper__05d729fb","badge":"vt_ce_Badge_badge__05d729fb","badge-text":"vt_ce_Badge_badgeText__05d729fb","variant-primary":"vt_ce_Badge_variantPrimary__05d729fb","variant-secondary":"vt_ce_Badge_variantSecondary__05d729fb"};
 
 exports.default = modules_efc4e723;

package/dist/cjs/Button/index.js

@@ -24,20 +24,25 @@ const Button = React.forwardRef(
     disabled = false,
     loading = false,
     active = false,
+    startIcon,
+    endIcon,
+    children,
+    "data-testid": dataTestId,
+    style,
+    className,
     ...props
   }, ref) => {
     const variantCn = styles_module.default[variant];
     return /* @__PURE__ */ jsxRuntime.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,
@@ -47,15 +52,15 @@ const Button = React.forwardRef(
             "--vt-ce-button-palette-disabled-surface": palette.disabled.surface,
             "--vt-ce-button-palette-disabled-on": palette.disabled.on
           },
-          ...props.style
+          ...style
         },
-        className: cx.cx(styles_module.default["button"], variantCn, props.className),
+        className: cx.cx(styles_module.default["button"], variantCn, className),
         children: [
           loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["loading-container"], children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { size: "1.4em" }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles_module.default["inner-container"], children: [
-            props.startIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["button-icon"], children: props.startIcon }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: props.children }),
-            props.endIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["button-icon"], children: props.endIcon })
+            startIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["button-icon"], children: startIcon }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+            endIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["button-icon"], children: endIcon })
           ] })
         ]
       }

package/dist/cjs/Checkbox/index.js

@@ -17,7 +17,17 @@ require('../Box/index.js');
 require('../styles/styled.js');
 
 const Checkbox = React.forwardRef(
-  ({ checked = false, indeterminate = false, disabled = false, ...props }, ref) => {
+  ({
+    defaultChecked,
+    checked,
+    label,
+    indeterminate = false,
+    disabled = false,
+    "data-testid": dataTestId,
+    style,
+    className,
+    ...props
+  }, ref) => {
     const inputRef = React.useRef(null);
     const forkedRef = material.useForkRef(inputRef, ref);
     React.useEffect(() => {
@@ -31,32 +41,33 @@ const Checkbox = React.forwardRef(
       {
         role: "checkbox",
         "aria-labelledby": labelId,
-        "aria-checked": indeterminate ? "mixed" : checked,
+        "aria-checked": indeterminate ? "mixed" : checked ?? defaultChecked,
         "aria-disabled": disabled,
         onClick: (e) => {
           inputRef.current?.click();
           e.stopPropagation();
           e.preventDefault();
         },
-        "data-testid": props["data-testid"],
-        style: props.style,
-        className: cx.cx(styles_module.default["checkbox"], props.className),
+        "data-testid": dataTestId,
+        style,
+        className: cx.cx(styles_module.default["checkbox"], className),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("label", { className: styles_module.default["passthrough-label-container"], children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
+                ...props,
                 type: "checkbox",
                 ref: forkedRef,
+                defaultChecked,
                 checked,
                 disabled,
-                onChange: props.onChange,
                 className: styles_module.default["invisible-checkbox"]
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["icon-container"], children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(IndeterminateIcon, {}) : checked ? /* @__PURE__ */ jsxRuntime.jsx(CheckedIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(UncheckedIcon, {}) })
           ] }),
-          props.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["visible-label"], id: labelId, children: props.label })
+          label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["visible-label"], id: labelId, children: label })
         ]
       }
     );

package/dist/cjs/Checkbox/styles.module.scss.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var modules_efc4e723 = {"checkbox":"vt_ce_Checkbox_checkbox__cc119886","checkbox-svg-path":"vt_ce_Checkbox_checkboxSvgPath__cc119886","passthrough-label-container":"vt_ce_Checkbox_passthroughLabelContainer__cc119886","invisible-checkbox":"vt_ce_Checkbox_invisibleCheckbox__cc119886","visible-label":"vt_ce_Checkbox_visibleLabel__cc119886","icon-container":"vt_ce_Checkbox_iconContainer__cc119886"};
+var modules_efc4e723 = {"checkbox":"vt_ce_Checkbox_checkbox__0355033d","checkbox-svg-path":"vt_ce_Checkbox_checkboxSvgPath__0355033d","passthrough-label-container":"vt_ce_Checkbox_passthroughLabelContainer__0355033d","invisible-checkbox":"vt_ce_Checkbox_invisibleCheckbox__0355033d","visible-label":"vt_ce_Checkbox_visibleLabel__0355033d","icon-container":"vt_ce_Checkbox_iconContainer__0355033d"};
 
 exports.default = modules_efc4e723;

package/dist/cjs/Chip/styles.module.scss.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var modules_efc4e723 = {"chip":"vt_ce_Chip_chip__323b4046","chip-text":"vt_ce_Chip_chipText__323b4046","button-icon":"vt_ce_Chip_buttonIcon__323b4046"};
+var modules_efc4e723 = {"chip":"vt_ce_Chip_chip__8d6b791d","chip-text":"vt_ce_Chip_chipText__8d6b791d","button-icon":"vt_ce_Chip_buttonIcon__8d6b791d"};
 
 exports.default = modules_efc4e723;

package/dist/cjs/DatePicker/Calendar.js

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

package/dist/cjs/DatePicker/DateField.js

@@ -0,0 +1,30 @@
+'use strict';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactAria = require('react-aria');
+var reactStately = require('react-stately');
+var date = require('@internationalized/date');
+var styles_module = require('./styles.module.scss.js');
+
+function DateField(props) {
+  const ref = React.useRef(null);
+  const { locale } = reactAria.useLocale();
+  const state = reactStately.useDateFieldState({
+    ...props,
+    locale,
+    createCalendar: date.createCalendar
+  });
+  const { fieldProps } = reactAria.useDateField(props, state, ref);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...fieldProps, ref, className: styles_module.default.reactAriaDateInput, children: state.segments.map((segment, i) => /* @__PURE__ */ jsxRuntime.jsx(DateSegmentItem, { segment, state }, i)) });
+}
+function DateSegmentItem({ segment, state }) {
+  const ref = React.useRef(null);
+  const { segmentProps } = reactAria.useDateSegment(segment, state, ref);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...segmentProps, ref, children: segment.text });
+}
+
+exports.default = DateField;

package/dist/cjs/DatePicker/index.js

@@ -0,0 +1,122 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var react = require('@floating-ui/react');
+var reactAria = require('react-aria');
+var reactStately = require('react-stately');
+var date = require('@internationalized/date');
+var Calendar = require('./Calendar.js');
+var DateField = require('./DateField.js');
+var index = require('../IconButton/index.js');
+var wrappers = require('../Icon/wrappers.js');
+require('../Icon/factory.js');
+var iconsMaterial = require('@mui/icons-material');
+var styles_module = require('./styles.module.scss.js');
+var portal = require('../styles/portal.js');
+var context = require('../FormControl/context.js');
+
+const CalendarTodayOutlinedIcon = wrappers.adaptMuiSvgIcon(iconsMaterial.CalendarTodayOutlined);
+function DatePicker({
+  placement = "bottom-start",
+  ...props
+}) {
+  const ctx = context.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 ? date.parseDate(props.value) : void 0,
+    shouldForceLeadingZeros: props.shouldForceLeadingZeros,
+    defaultValue: props.defaultValue ? date.parseDate(props.defaultValue) : void 0,
+    onChange: (newValue) => {
+      props.onChange?.(newValue.toString());
+    }
+  };
+  const ref = React.useRef(null);
+  const state = reactStately.useDatePickerState(formatProps);
+  const {
+    groupProps,
+    /*labelProps,*/
+    fieldProps,
+    buttonProps,
+    calendarProps
+  } = reactAria.useDatePicker(formatProps, state, ref);
+  const { refs, floatingStyles, context: context$1 } = react.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 = react.useRole(context$1);
+  const dismiss = react.useDismiss(context$1);
+  const { getReferenceProps, getFloatingProps } = react.useInteractions([
+    dismiss,
+    role
+  ]);
+  const changeYear = (year) => {
+    const currentMonthSelected = state.dateValue?.month ?? 1;
+    const currentDaySelected = state.dateValue?.day ?? 1;
+    state.setDateValue(
+      date.parseDate(
+        `${year}-${currentMonthSelected.toString().length === 1 ? "0" + currentMonthSelected : currentMonthSelected}-${currentDaySelected.toString().length === 1 ? "0" + currentDaySelected : currentDaySelected}`
+      )
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...getReferenceProps(),
+      ref: refs.setReference,
+      "data-testid": props["data-testid"],
+      className: styles_module.default.reactAriaDatePicker,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ...groupProps,
+            ref,
+            "data-disabled": disabled,
+            "data-focused": state.isOpen,
+            "data-error": error,
+            className: styles_module.default.reactAriaGroup,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(DateField.default, { ...fieldProps }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                index.default,
+                {
+                  ...buttonProps,
+                  disabled,
+                  onClick: () => context$1.onOpenChange(!context$1.open),
+                  className: styles_module.default.reactAriaButton,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(CalendarTodayOutlinedIcon, {})
+                }
+              )
+            ]
+          }
+        ),
+        context$1.open && /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { root: props.portalEl, children: /* @__PURE__ */ jsxRuntime.jsx(react.FloatingFocusManager, { context: context$1, modal: false, children: /* @__PURE__ */ jsxRuntime.jsx(portal.PortalThemeRelay, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: refs.setFloating,
+            style: {
+              ...floatingStyles
+            },
+            ...getFloatingProps(),
+            children: /* @__PURE__ */ jsxRuntime.jsx(Calendar.default, { ...calendarProps, changeYear })
+          }
+        ) }) }) })
+      ]
+    }
+  );
+}
+
+exports.default = DatePicker;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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"};
+
+exports.default = modules_efc4e723;

package/dist/cjs/DateRangePicker/index.js

@@ -0,0 +1,41 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var index$1 = require('../DatePicker/index.js');
+var styles_module = require('./styles.module.scss.js');
+var index = require('../FormControl/index.js');
+var context = require('../FormControl/context.js');
+
+function DateRangePicker({
+  startDate,
+  endDate,
+  portalEl
+}) {
+  const ctx = context.useFormControlContext();
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles_module.default.dateRangePickerWrapper, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      index.default,
+      {
+        disabled: ctx.disabled,
+        error: ctx.error,
+        ...startDate.control,
+        children: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { ...startDate.props, portalEl })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      index.default,
+      {
+        disabled: ctx.disabled,
+        error: ctx.error,
+        ...endDate.control,
+        children: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { ...endDate.props, portalEl })
+      }
+    )
+  ] });
+}
+
+exports.default = DateRangePicker;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var modules_efc4e723 = {"dateRangePickerWrapper":"vt_ce_DateRangePicker_dateRangePickerWrapper__8b44f64e"};
+
+exports.default = modules_efc4e723;

package/dist/cjs/Drawer/styles.module.scss.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var modules_efc4e723 = {"drawer-overlay":"vt_ce_Drawer_drawerOverlay__923c77c9","drawer-overlay-enabled":"vt_ce_Drawer_drawerOverlayEnabled__923c77c9","drawer-overlay-strategy-fixed":"vt_ce_Drawer_drawerOverlayStrategyFixed__923c77c9","drawer-overlay-strategy-absolute":"vt_ce_Drawer_drawerOverlayStrategyAbsolute__923c77c9","drawer-overlay-placement-start":"vt_ce_Drawer_drawerOverlayPlacementStart__923c77c9","drawer":"vt_ce_Drawer_drawer__923c77c9","drawer-overlay-placement-end":"vt_ce_Drawer_drawerOverlayPlacementEnd__923c77c9","drawer-wrapper":"vt_ce_Drawer_drawerWrapper__923c77c9","drawer-start":"vt_ce_Drawer_drawerStart__923c77c9","drawer-end":"vt_ce_Drawer_drawerEnd__923c77c9","drawer-content":"vt_ce_Drawer_drawerContent__923c77c9","drawer-title-container":"vt_ce_Drawer_drawerTitleContainer__923c77c9","drawer-title":"vt_ce_Drawer_drawerTitle__923c77c9","drawer-title-actions":"vt_ce_Drawer_drawerTitleActions__923c77c9","drawer-typography":"vt_ce_Drawer_drawerTypography__923c77c9","drawer-actions":"vt_ce_Drawer_drawerActions__923c77c9"};
+var modules_efc4e723 = {"drawer-overlay":"vt_ce_Drawer_drawerOverlay__8f34504f","drawer-overlay-enabled":"vt_ce_Drawer_drawerOverlayEnabled__8f34504f","drawer-overlay-strategy-fixed":"vt_ce_Drawer_drawerOverlayStrategyFixed__8f34504f","drawer-overlay-strategy-absolute":"vt_ce_Drawer_drawerOverlayStrategyAbsolute__8f34504f","drawer-overlay-placement-start":"vt_ce_Drawer_drawerOverlayPlacementStart__8f34504f","drawer":"vt_ce_Drawer_drawer__8f34504f","drawer-overlay-placement-end":"vt_ce_Drawer_drawerOverlayPlacementEnd__8f34504f","drawer-wrapper":"vt_ce_Drawer_drawerWrapper__8f34504f","drawer-start":"vt_ce_Drawer_drawerStart__8f34504f","drawer-end":"vt_ce_Drawer_drawerEnd__8f34504f","drawer-content":"vt_ce_Drawer_drawerContent__8f34504f","drawer-title-container":"vt_ce_Drawer_drawerTitleContainer__8f34504f","drawer-title":"vt_ce_Drawer_drawerTitle__8f34504f","drawer-title-actions":"vt_ce_Drawer_drawerTitleActions__8f34504f","drawer-typography":"vt_ce_Drawer_drawerTypography__8f34504f","drawer-actions":"vt_ce_Drawer_drawerActions__8f34504f"};
 
 exports.default = modules_efc4e723;

package/dist/cjs/FormControl/styles.module.scss.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var modules_efc4e723 = {"form-control":"vt_ce_FormControl_formControl__8c1edd74","placement-block-start":"vt_ce_FormControl_placementBlockStart__8c1edd74","label":"vt_ce_FormControl_label__8c1edd74","placement-inline-start":"vt_ce_FormControl_placementInlineStart__8c1edd74","placement-inline-end":"vt_ce_FormControl_placementInlineEnd__8c1edd74","inner-control":"vt_ce_FormControl_innerControl__8c1edd74","help-label":"vt_ce_FormControl_helpLabel__8c1edd74","error-label":"vt_ce_FormControl_errorLabel__8c1edd74"};
+var modules_efc4e723 = {"form-control":"vt_ce_FormControl_formControl__876f6d27","placement-block-start":"vt_ce_FormControl_placementBlockStart__876f6d27","label":"vt_ce_FormControl_label__876f6d27","placement-inline-start":"vt_ce_FormControl_placementInlineStart__876f6d27","placement-inline-end":"vt_ce_FormControl_placementInlineEnd__876f6d27","inner-control":"vt_ce_FormControl_innerControl__876f6d27","help-label":"vt_ce_FormControl_helpLabel__876f6d27","error-label":"vt_ce_FormControl_errorLabel__876f6d27"};
 
 exports.default = modules_efc4e723;

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

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var modules_efc4e723 = {"input":"vt_ce_Input_input__a83b3209","inner-input":"vt_ce_Input_innerInput__a83b3209","input-icon":"vt_ce_Input_inputIcon__a83b3209"};
+var modules_efc4e723 = {"input":"vt_ce_Input_input__81e6382e","inner-input":"vt_ce_Input_innerInput__81e6382e","input-icon":"vt_ce_Input_inputIcon__81e6382e"};
 
 exports.default = modules_efc4e723;

package/dist/cjs/Menu/controlled.js

@@ -89,7 +89,14 @@ function Menu({
     listNavigation,
     typeahead
   ]);
-  return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingList, { elementsRef, labelsRef, children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { root: props.portalEl, children: /* @__PURE__ */ jsxRuntime.jsx(
+  const { isMounted, styles: transitionStyles } = react.useTransitionStyles(context, {
+    duration: 112,
+    initial: {
+      opacity: 0,
+      transform: `scale(95%)`
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingList, { elementsRef, labelsRef, children: isMounted && /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { root: props.portalEl, children: /* @__PURE__ */ jsxRuntime.jsx(
     react.FloatingFocusManager,
     {
       context,
@@ -104,32 +111,41 @@ function Menu({
           tabIndex: 0,
           "aria-labelledby": anchor?.id || props.anchorId,
           style: {
-            ...floatingStyles,
-            ...props.style
+            ...floatingStyles
           },
           ...getFloatingProps(),
-          className: cx.cx(styles_module.default["menu"], className),
-          children: options.map((option, i) => /* @__PURE__ */ jsxRuntime.jsx(
-            MenuItem,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
             {
-              role: "menuitem",
-              isActive: i === activeIndex,
-              ...getItemProps({
-                onClick(event) {
-                  option.onSelect(event);
-                }
-              }),
-              label: option.label,
-              icon: option.icon
-            },
-            i
-          ))
+              style: {
+                ...transitionStyles,
+                ...props.style
+              },
+              className: cx.cx(styles_module.default["menu"], className),
+              children: options.map((option, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                MenuItem,
+                {
+                  role: "menuitem",
+                  isActive: i === activeIndex,
+                  ...getItemProps({
+                    onClick(event) {
+                      option.onSelect(event);
+                    }
+                  }),
+                  render: option.render,
+                  label: option.label,
+                  icon: option.icon
+                },
+                i
+              ))
+            }
+          )
         }
       ) })
     }
   ) }) });
 }
-const MenuItem = React.forwardRef(({ label, disabled, isActive, ...props }, forwardedRef) => {
+const MenuItem = React.forwardRef(({ label, render, disabled, isActive, ...props }, forwardedRef) => {
   const item = react.useListItem({ label: disabled ? null : label });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
@@ -143,7 +159,7 @@ const MenuItem = React.forwardRef(({ label, disabled, isActive, ...props }, forw
       disabled,
       children: [
         props.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["option-icon"], children: props.icon }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["option-label"], children: label })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["option-label"], children: render ?? label })
       ]
     }
   );