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

package/dist/esm/DatePicker/Calendar.js

@@ -0,0 +1,186 @@
+'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 '../styles/defaultThemeOptions.js';
+import '@capsizecss/core';
+import 'color2k';
+import { defaultThemeCssVariableUsages } from '../styles/defaultTheme.js';
+import '../styles/provider.client.js';
+import '../styles/css-vars.js';
+import css from './styles.module.scss.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: css.calendarBox, children: [
+    /* @__PURE__ */ jsxs("div", { className: css.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: css.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 ?? getCurrentYear(),
+        yearRange: props.yearRange
+      }
+    ) : /* @__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: css.calendarGrid, ...gridProps, children: [
+    /* @__PURE__ */ jsx("thead", { ...headerProps, children: /* @__PURE__ */ jsx("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ jsx("th", { className: css.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: css.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__ */ jsxs(
+    "div",
+    {
+      className: yearsToDisplay.length === 0 ? css.noEligibleYearsLayout : css.yearPickerLayout,
+      children: [
+        yearsToDisplay.map((year, index) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            size: "small",
+            active: year === activeYear,
+            className: css.yearPillButton,
+            onClick: () => {
+              changeYear(year);
+            },
+            children: year
+          },
+          index
+        )),
+        yearsToDisplay.length === 0 && /* @__PURE__ */ jsx("div", { children: "No eligible years to display." })
+      ]
+    }
+  );
+}
+
+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 css 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: css.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, className: css.reactAriaDateInputSegment, children: segment.text });
+}
+
+export { DateField as default };

package/dist/esm/DatePicker/index.js

@@ -0,0 +1,148 @@
+'use strict';
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { useFloating, shift, flip, 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, HighlightOff } from '@mui/icons-material';
+import { PortalThemeRelay } from '../styles/portal.js';
+import { useFormControlContext } from '../FormControl/context.js';
+import css from './styles.module.scss.js';
+
+const CalendarTodayOutlinedIcon = adaptMuiSvgIcon(CalendarTodayOutlined);
+const HighlightOffOutlinedIcon = adaptMuiSvgIcon(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 = 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 ? parseDate(props.value) : null,
+    shouldForceLeadingZeros: props.shouldForceLeadingZeros,
+    defaultValue: props.defaultValue ? parseDate(props.defaultValue) : null,
+    onChange: (newValue) => {
+      if (newValue === null) {
+        return props.onChange?.("");
+      } else {
+        return props.onChange?.(newValue.toString());
+      }
+    },
+    onKeyDown: props.onKeyDown
+  };
+  const ref = useRef(null);
+  const state = useDatePickerState(formatProps);
+  const { groupProps, fieldProps, buttonProps, calendarProps } = useDatePicker(
+    formatProps,
+    state,
+    ref
+  );
+  fieldProps.onKeyDown = props.onKeyDown;
+  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,
+    middleware: [shift(), flip()]
+  });
+  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: css.reactAriaDatePicker + " " + props.className,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ...groupProps,
+            ref,
+            "data-disabled": disabled,
+            "data-focused": state.isOpen,
+            "data-error": error,
+            className: css.reactAriaGroup,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: css.calendarAndDateField, children: [
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    ...buttonProps,
+                    disabled,
+                    onClick: () => context.onOpenChange(!context.open),
+                    className: css.reactAriaButton,
+                    children: /* @__PURE__ */ jsx(CalendarTodayOutlinedIcon, { size: "small" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(DateField, { ...fieldProps })
+              ] }),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  ...buttonProps,
+                  onClick: () => props.onChange?.(""),
+                  className: css.reactAriaButton,
+                  style: { visibility: props.value ? "visible" : "hidden" },
+                  children: /* @__PURE__ */ jsx(HighlightOffOutlinedIcon, { size: "small" })
+                }
+              )
+            ]
+          }
+        ),
+        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,
+                yearRange
+              }
+            )
+          }
+        ) }) }) })
+      ]
+    }
+  );
+}
+
+export { DatePicker as default };

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

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

package/dist/esm/DateRangePicker/index.js

@@ -0,0 +1,19 @@
+'use strict';
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import DatePicker from '../DatePicker/index.js';
+import FormControl from '../FormControl/index.js';
+import css from './styles.module.scss.js';
+
+function DateRangePicker({
+  startDate,
+  endDate,
+  portalEl
+}) {
+  return /* @__PURE__ */ jsxs("span", { className: css.dateRangePickerWrapper, children: [
+    /* @__PURE__ */ jsx(FormControl, { ...startDate.control, children: /* @__PURE__ */ jsx(DatePicker, { ...startDate.props, portalEl }) }),
+    /* @__PURE__ */ jsx(FormControl, { ...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 css = {"dateRangePickerWrapper":"vt_ce_DateRangePicker_dateRangePickerWrapper__08a6a6ec"};
+
+export { css as default };

package/dist/esm/Dialog/components.js

@@ -0,0 +1,218 @@
+'use strict';
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useTransitionStyles, useMergeRefs, FloatingPortal, FloatingOverlay, FloatingFocusManager } from '@floating-ui/react';
+import css from './styles.module.scss.js';
+import { useDialog, DialogContext, useDialogContext } from './state.js';
+import { cx } from '../styles/cx.js';
+import '../styles/defaultThemeOptions.js';
+import '@capsizecss/core';
+import 'color2k';
+import '../styles/defaultTheme.js';
+import '../styles/provider.client.js';
+import { PortalThemeRelay } from '../styles/portal.js';
+import '../styles/css-vars.js';
+import Button from '../Button/index.js';
+import Typography from '../Typography/index.js';
+import IconButton from '../IconButton/index.js';
+import { CloseIcon } from '../Icon/internal.js';
+
+const Dialog = React.forwardRef(function Dialog2({
+  children,
+  portalEl,
+  style,
+  className,
+  overlayStyle,
+  overlayClassName,
+  lockScroll = true,
+  disableAutoFocus = false,
+  "data-testid": dataTestId,
+  ...options
+}, propRef) {
+  const dialog = useDialog(options);
+  const { isMounted: overlayIsMounted, styles: overlayTransitionStyles } = useTransitionStyles(dialog.context, {
+    duration: 225,
+    initial: {
+      opacity: 0
+    }
+  });
+  const { isMounted: innerIsMounted, styles: innerTransitionStyles } = useTransitionStyles(dialog.context, {
+    duration: 225,
+    initial: {
+      transform: `scale(95%)`
+    }
+  });
+  const ref = useMergeRefs([dialog.context.refs.setFloating, propRef]);
+  let content = null;
+  if (overlayIsMounted || innerIsMounted) {
+    content = /* @__PURE__ */ jsx(FloatingPortal, { root: portalEl, children: /* @__PURE__ */ jsx(
+      FloatingOverlay,
+      {
+        style: {
+          ...overlayTransitionStyles,
+          ...overlayStyle
+        },
+        className: cx(css["dialog-overlay"], overlayClassName),
+        lockScroll,
+        children: /* @__PURE__ */ jsx(
+          FloatingFocusManager,
+          {
+            context: dialog.context,
+            disabled: disableAutoFocus,
+            children: /* @__PURE__ */ jsx(PortalThemeRelay, { children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref,
+                "aria-labelledby": dialog.labelId,
+                "aria-describedby": dialog.descriptionId,
+                ...dialog.getFloatingProps(),
+                "data-testid": dataTestId,
+                style: {
+                  ...innerTransitionStyles,
+                  ...style
+                },
+                className: cx(css["dialog"], className),
+                children
+              }
+            ) })
+          }
+        )
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(DialogContext.Provider, { value: dialog, children: content });
+});
+const DialogStart = React.forwardRef(
+  function DialogStart2({ children, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        ...props,
+        className: cx(css["dialog-start"], props.className),
+        children
+      }
+    );
+  }
+);
+const DialogContent = React.forwardRef(function DialogContent2({ children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      ref,
+      className: cx(css["dialog-content"], props.className),
+      children
+    }
+  );
+});
+const DialogEnd = React.forwardRef(
+  function DialogEnd2({ children, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        ...props,
+        className: cx(css["dialog-end"], props.className),
+        children
+      }
+    );
+  }
+);
+const DialogTitle = React.forwardRef(function DialogTitle2({ children, ...props }, ref) {
+  const { setLabelId } = useDialogContext();
+  const id = React.useId();
+  React.useLayoutEffect(() => {
+    setLabelId(id);
+    return () => setLabelId(void 0);
+  }, [id, setLabelId]);
+  return /* @__PURE__ */ jsx(DialogStart, { children: /* @__PURE__ */ jsx(
+    Typography,
+    {
+      variant: "h4",
+      color: "primary",
+      ref,
+      id,
+      leadingTrim: true,
+      ...props,
+      className: cx(css["dialog-title"], props.className),
+      children
+    }
+  ) });
+});
+const DialogTypography = React.forwardRef(function DialogTypography2({ children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Typography,
+    {
+      variant: "paragraph2",
+      color: "primary",
+      ...props,
+      ref,
+      className: cx(css["dialog-typography"], props.className),
+      children
+    }
+  );
+});
+const DialogDescription = React.forwardRef(function DialogDescription2({ children, ...props }, ref) {
+  const { setDescriptionId } = useDialogContext();
+  const id = React.useId();
+  React.useLayoutEffect(() => {
+    setDescriptionId(id);
+    return () => setDescriptionId(void 0);
+  }, [id, setDescriptionId]);
+  return /* @__PURE__ */ jsx(
+    DialogTypography,
+    {
+      variant: "paragraph2",
+      color: "primary",
+      ...props,
+      ref,
+      id,
+      children
+    }
+  );
+});
+const DialogActions = React.forwardRef(function DialogActions2({ children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(DialogEnd, { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      ref,
+      className: cx(css["dialog-actions"], props.className),
+      children
+    }
+  ) });
+});
+const DialogCloseButton = React.forwardRef(function DialogCloseButton2(props, ref) {
+  const { dismiss } = useDialogContext();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "tertiary",
+      ...props,
+      ref,
+      onClick: (e) => {
+        dismiss();
+        props.onClick?.(e);
+      }
+    }
+  );
+});
+const DialogCloseIconButton = React.forwardRef(function DialogCloseIconButton2({ children = /* @__PURE__ */ jsx(CloseIcon, {}), ...props }, ref) {
+  const { dismiss } = useDialogContext();
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      ...props,
+      ref,
+      onClick: (e) => {
+        dismiss();
+        props.onClick?.(e);
+      },
+      children
+    }
+  );
+});
+
+export { DialogActions, DialogCloseButton, DialogCloseIconButton, DialogContent, DialogDescription, DialogEnd, DialogStart, DialogTitle, DialogTypography, Dialog as default };

package/dist/esm/Dialog/factory.js

@@ -0,0 +1,14 @@
+'use strict';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import Dialog from './components.js';
+
+function createDialogComponent({ portalEl }) {
+  return forwardRef(
+    function ScopedDialog(props, ref) {
+      return /* @__PURE__ */ jsx(Dialog, { portalEl, ref, ...props });
+    }
+  );
+}
+
+export { createDialogComponent };

package/dist/esm/Dialog/state.js

@@ -0,0 +1,49 @@
+'use strict';
+'use client';
+import * as React from 'react';
+import { useFloating, useDismiss, useRole, useInteractions } from '@floating-ui/react';
+
+function useDialog({
+  open,
+  onDismiss: dismissDialog,
+  preventOutsideDismiss,
+  preventEscapeDismiss
+}) {
+  const [labelId, setLabelId] = React.useState();
+  const [descriptionId, setDescriptionId] = React.useState();
+  const data = useFloating({
+    open,
+    onOpenChange: (newOpen) => !newOpen && typeof dismissDialog === "function" && dismissDialog()
+  });
+  const context = data.context;
+  const dismiss = useDismiss(context, {
+    outsidePressEvent: "mousedown",
+    outsidePress: !preventOutsideDismiss,
+    escapeKey: !preventEscapeDismiss
+  });
+  const role = useRole(context);
+  const interactions = useInteractions([dismiss, role]);
+  return React.useMemo(
+    () => ({
+      open,
+      dismiss: dismissDialog,
+      ...interactions,
+      ...data,
+      labelId,
+      descriptionId,
+      setLabelId,
+      setDescriptionId
+    }),
+    [open, dismissDialog, interactions, data, labelId, descriptionId]
+  );
+}
+const DialogContext = React.createContext(null);
+const useDialogContext = () => {
+  const context = React.useContext(DialogContext);
+  if (context == null) {
+    throw new Error("Dialog components must be wrapped in <Dialog />");
+  }
+  return context;
+};
+
+export { DialogContext, useDialog, useDialogContext };

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

@@ -0,0 +1,3 @@
+var css = {"dialog-overlay":"vt_ce_Dialog_dialog-overlay__9285b892","dialog":"vt_ce_Dialog_dialog__6471c2e3","dialog-start":"vt_ce_Dialog_dialog-start__3d0c37c9","dialog-end":"vt_ce_Dialog_dialog-end__d33601cf","dialog-content":"vt_ce_Dialog_dialog-content__237fe65e","dialog-title":"vt_ce_Dialog_dialog-title__d88ef551","dialog-typography":"vt_ce_Dialog_dialog-typography__94d06942","dialog-actions":"vt_ce_Dialog_dialog-actions__e259c208"};
+
+export { css as default };