@veritone-ce/design-system 2.8.14-next.2.0 → 2.8.14

package/dist/cjs/Chip/index.js

@@ -0,0 +1,51 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var styles_module = require('./styles.module.scss.js');
+var cx = require('../styles/cx.js');
+require('../styles/defaultThemeOptions.js');
+require('@capsizecss/core');
+require('color2k');
+var defaultTheme = require('../styles/defaultTheme.js');
+require('../styles/provider.client.js');
+require('../styles/css-vars.js');
+var index = require('../IconButton/index.js');
+var internal = require('../Icon/internal.js');
+
+const Chip = React.forwardRef(
+  ({ clearable = true, icon, variant = "outlined", ...props }, ref) => {
+    const clearButtonPalette = defaultTheme.defaultThemeCssVariableUsages.palette.action.text;
+    const clearButtonVariant = "primary";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        ref,
+        className: cx.cx(styles_module.default["chip"], styles_module.default[`variant-${variant}`], props.className),
+        "data-testid": props["data-testid"],
+        style: props.style,
+        children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["chip-icon"], children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["chip-text"], children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["chip-text-inner"], children: props.children }) }),
+          clearable && /* @__PURE__ */ jsxRuntime.jsx(
+            index.default,
+            {
+              className: styles_module.default["button-icon"],
+              palette: clearButtonPalette,
+              variant: clearButtonVariant,
+              style: { padding: "0px" },
+              onClick: props.onClear,
+              children: /* @__PURE__ */ jsxRuntime.jsx(internal.CloseIcon, {})
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+exports.default = Chip;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var css = {"chip":"vt_ce_Chip_chip__ae0a56a7","variant-outlined":"vt_ce_Chip_variant-outlined__408ce4cf","variant-filled":"vt_ce_Chip_variant-filled__0936f9b0","chip-text":"vt_ce_Chip_chip-text__f1581ea1","chip-text-inner":"vt_ce_Chip_chip-text-inner__90adadbe","chip-icon":"vt_ce_Chip_chip-icon__b390b6ab","button-icon":"vt_ce_Chip_button-icon__746d1ac3"};
+
+exports.default = css;

package/dist/cjs/CircularProgress/index.js

@@ -0,0 +1,59 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles_module = require('./styles.module.scss.js');
+var cx = require('../styles/cx.js');
+require('../styles/defaultThemeOptions.js');
+require('@capsizecss/core');
+require('color2k');
+require('../styles/defaultTheme.js');
+require('../styles/provider.client.js');
+require('../styles/css-vars.js');
+
+const SIZE = 44;
+const thickness = 3.6;
+function CircularProgress({
+  size = 40,
+  fillParentHeight = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cx.cx(styles_module.default["container"], props.className),
+      "data-fill-parent-height": fillParentHeight,
+      "data-testid": props["data-testid"],
+      style: {
+        // @ts-ignore
+        "--vt-ce-circular-progress-color": props.color ?? void 0,
+        "--vt-ce-circular-progress-size": typeof size === "string" ? size : `${size}px`,
+        ...props.style
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["progress-container"], children: /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          viewBox: `${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`,
+          className: styles_module.default["progress-svg"],
+          "data-chromatic": "ignore",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              cx: SIZE,
+              cy: SIZE,
+              r: (SIZE - thickness) / 2,
+              fill: "none",
+              strokeWidth: thickness,
+              className: styles_module.default["progress-circle"]
+            }
+          )
+        }
+      ) })
+    }
+  );
+}
+
+exports.default = CircularProgress;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var css = {"container":"vt_ce_CircularProgress_container__77d464af","progress-container":"vt_ce_CircularProgress_progress-container__fcbcd6a2","progress-svg":"vt_ce_CircularProgress_progress-svg__a7131fa3","progress-circle":"vt_ce_CircularProgress_progress-circle__5829963e"};
+
+exports.default = css;

package/dist/cjs/ColorPicker/index.js

@@ -0,0 +1,64 @@
+'use strict';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('../Input/index.js');
+var styles_module = require('./styles.module.scss.js');
+var cx = require('../styles/cx.js');
+require('../styles/defaultThemeOptions.js');
+require('@capsizecss/core');
+require('color2k');
+require('../styles/defaultTheme.js');
+require('../styles/provider.client.js');
+require('../styles/css-vars.js');
+
+const ColorPicker = ({
+  onChange,
+  value,
+  defaultValue,
+  style,
+  className,
+  ...props
+}) => {
+  const [hex, setHex] = React.useState(value ?? defaultValue ?? "");
+  const [isValid, setIsValid] = React.useState(true);
+  const handleHexChange = (event) => {
+    const newHex = event.target.value;
+    setHex(newHex);
+    const isValidHex = validateHex(newHex);
+    setIsValid(isValidHex);
+    onChange?.(newHex, isValidHex);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx.cx(styles_module.default["color-picker"], className), style, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      index.default,
+      {
+        ...props,
+        type: "text",
+        value: hex,
+        onChange: handleHexChange,
+        className: isValid ? cx.cx(styles_module.default["input"]) : cx.cx(styles_module.default["inputError"])
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-testid": "color-square",
+        className: cx.cx(styles_module.default["color-square"], {
+          [cx.cx(styles_module.default["color-square-error"])]: !isValid
+        }),
+        style: { backgroundColor: hex }
+      }
+    )
+  ] });
+};
+const validateHex = (hex) => {
+  const hexRegex = /^#([0-9A-F]{3}){1,2}$/i;
+  return hexRegex.test(hex);
+};
+
+exports.default = ColorPicker;
+exports.validateHex = validateHex;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var css = {"input":"vt_ce_ColorPicker_input__4f43dadb","inputError":"vt_ce_ColorPicker_inputError__a3cd6c47","color-picker":"vt_ce_ColorPicker_color-picker__ae1f8e92","color-square":"vt_ce_ColorPicker_color-square__85914e52","color-square-error":"vt_ce_ColorPicker_color-square-error__3edb1567"};
+
+exports.default = css;

package/dist/cjs/DatePicker/Calendar.js

@@ -0,0 +1,190 @@
+'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');
+require('../styles/defaultThemeOptions.js');
+require('@capsizecss/core');
+require('color2k');
+var defaultTheme = require('../styles/defaultTheme.js');
+require('../styles/provider.client.js');
+require('../styles/css-vars.js');
+var styles_module = require('./styles.module.scss.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 ?? getCurrentYear(),
+        yearRange: props.yearRange
+      }
+    ) : /* @__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 getCurrentYear = () => (/* @__PURE__ */ new Date()).getFullYear();
+const getYearsFromRange = (yearRange) => {
+  const {
+    pastStaticYear,
+    futureStaticYear,
+    backwardYearCount,
+    forwardYearCount
+  } = yearRange;
+  let years = [];
+  const currentYear = getCurrentYear();
+  if (pastStaticYear || futureStaticYear) {
+    const workingPastStaticYear = pastStaticYear ?? currentYear;
+    const workingFutureStaticYear = futureStaticYear ?? currentYear;
+    years = Array.from(
+      { length: workingFutureStaticYear + 1 - workingPastStaticYear },
+      (_, i) => workingPastStaticYear + i
+    );
+  } else {
+    const workingBackwardYearCount = backwardYearCount ? currentYear - backwardYearCount : currentYear;
+    const workingForwardYearCount = forwardYearCount ? currentYear + forwardYearCount : currentYear;
+    years = Array.from(
+      { length: workingForwardYearCount + 1 - workingBackwardYearCount },
+      (_, i) => workingBackwardYearCount + i
+    );
+  }
+  return years;
+};
+function YearPicker({
+  changeYear,
+  activeYear,
+  yearRange
+}) {
+  const yearsToDisplay = getYearsFromRange(yearRange);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: yearsToDisplay.length === 0 ? styles_module.default.noEligibleYearsLayout : styles_module.default.yearPickerLayout,
+      children: [
+        yearsToDisplay.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
+        )),
+        yearsToDisplay.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: "No eligible years to display." })
+      ]
+    }
+  );
+}
+
+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, className: styles_module.default.reactAriaDateInputSegment, children: segment.text });
+}
+
+exports.default = DateField;

package/dist/cjs/DatePicker/index.js

@@ -0,0 +1,152 @@
+'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 portal = require('../styles/portal.js');
+var context = require('../FormControl/context.js');
+var styles_module = require('./styles.module.scss.js');
+
+const CalendarTodayOutlinedIcon = wrappers.adaptMuiSvgIcon(iconsMaterial.CalendarTodayOutlined);
+const HighlightOffOutlinedIcon = wrappers.adaptMuiSvgIcon(iconsMaterial.HighlightOff);
+function DatePicker({
+  placement = "bottom-start",
+  // Default the year picker to a range 10 years prior to, & 10 years after, current year
+  yearRange = {
+    backwardYearCount: 10,
+    forwardYearCount: 10
+  },
+  ...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 && props.value.length === 10 ? date.parseDate(props.value) : null,
+    shouldForceLeadingZeros: props.shouldForceLeadingZeros,
+    defaultValue: props.defaultValue ? date.parseDate(props.defaultValue) : null,
+    onChange: (newValue) => {
+      if (newValue === null) {
+        return props.onChange?.("");
+      } else {
+        return props.onChange?.(newValue.toString());
+      }
+    },
+    onKeyDown: props.onKeyDown
+  };
+  const ref = React.useRef(null);
+  const state = reactStately.useDatePickerState(formatProps);
+  const { groupProps, fieldProps, buttonProps, calendarProps } = reactAria.useDatePicker(
+    formatProps,
+    state,
+    ref
+  );
+  fieldProps.onKeyDown = props.onKeyDown;
+  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,
+    middleware: [react.shift(), react.flip()]
+  });
+  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 + " " + props.className,
+      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.jsxs("div", { className: styles_module.default.calendarAndDateField, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  index.default,
+                  {
+                    ...buttonProps,
+                    disabled,
+                    onClick: () => context$1.onOpenChange(!context$1.open),
+                    className: styles_module.default.reactAriaButton,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(CalendarTodayOutlinedIcon, { size: "small" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(DateField.default, { ...fieldProps })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                index.default,
+                {
+                  ...buttonProps,
+                  onClick: () => props.onChange?.(""),
+                  className: styles_module.default.reactAriaButton,
+                  style: { visibility: props.value ? "visible" : "hidden" },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(HighlightOffOutlinedIcon, { size: "small" })
+                }
+              )
+            ]
+          }
+        ),
+        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,
+                yearRange
+              }
+            )
+          }
+        ) }) }) })
+      ]
+    }
+  );
+}
+
+exports.default = DatePicker;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var css = {"reactAriaDatePicker":"vt_ce_DatePicker_reactAriaDatePicker__f4f45ca3","reactAriaGroup":"vt_ce_DatePicker_reactAriaGroup__3ed17c0e","calendarAndDateField":"vt_ce_DatePicker_calendarAndDateField__df8473ea","reactAriaButton":"vt_ce_DatePicker_reactAriaButton__91f02fa4","reactAriaDateInput":"vt_ce_DatePicker_reactAriaDateInput__986dd270","reactAriaDateInputSegment":"vt_ce_DatePicker_reactAriaDateInputSegment__c79f50ea","calendarBox":"vt_ce_DatePicker_calendarBox__d392d0d7","calendarHeader":"vt_ce_DatePicker_calendarHeader__a2adb6a8","monthPickerArrowButtonsWrapper":"vt_ce_DatePicker_monthPickerArrowButtonsWrapper__437de447","yearPickerLayout":"vt_ce_DatePicker_yearPickerLayout__936e81b1","noEligibleYearsLayout":"vt_ce_DatePicker_noEligibleYearsLayout__de2dd9c1","yearPillButton":"vt_ce_DatePicker_yearPillButton__945fca8f","calendarGrid":"vt_ce_DatePicker_calendarGrid__ca958259","weekdayHeader":"vt_ce_DatePicker_weekdayHeader__dd3c0990","calendarCellBtn":"vt_ce_DatePicker_calendarCellBtn__9b846ae0"};
+
+exports.default = css;

package/dist/cjs/DateRangePicker/index.js

@@ -0,0 +1,23 @@
+'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 index = require('../FormControl/index.js');
+var styles_module = require('./styles.module.scss.js');
+
+function DateRangePicker({
+  startDate,
+  endDate,
+  portalEl
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles_module.default.dateRangePickerWrapper, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index.default, { ...startDate.control, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { ...startDate.props, portalEl }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(index.default, { ...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 css = {"dateRangePickerWrapper":"vt_ce_DateRangePicker_dateRangePickerWrapper__08a6a6ec"};
+
+exports.default = css;