@veritone-ce/design-system 2.0.8 → 2.1.0

package/dist/cjs/Alert/index.js

@@ -0,0 +1,80 @@
+'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');
+require('color2k');
+require('../styles/css-vars.js');
+var cx = require('../styles/cx.js');
+var defaultTheme = require('../styles/defaultTheme.js');
+require('react');
+require('@mui/system');
+require('../styles/styled.js');
+var index = require('../Button/index.js');
+var index$1 = require('../IconButton/index.js');
+var internal = require('../Icon/internal.js');
+
+const defaultMessageLabel = {
+  success: `Success`,
+  info: `Info`,
+  warning: `Alert`,
+  error: `Error`
+};
+const defaultMessageText = {
+  success: `Your action was completed. `,
+  info: `General information. `,
+  warning: `Your action is required. `,
+  error: `An error has occurred. `
+};
+const Alert = ({ severity = "success", ...props }) => {
+  const label = props.label ?? defaultMessageLabel[severity];
+  const text = props.text ?? defaultMessageText[severity];
+  const icon = iconVariants[severity];
+  const color = defaultTheme.defaultThemeCssVariableUsages.palette.indicator[severity].base.surface;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-testid": props["data-testid"],
+      style: {
+        // @ts-ignore
+        "--vt-ce-alert-color": color,
+        ...props.style
+      },
+      className: cx.cx(styles_module.default["alert"], props.className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_module.default["alert-stripe"] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["alert-icon"], children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles_module.default["alert-content"], children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles_module.default["alert-label"], children: [
+            label,
+            ": "
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["alert-text"], children: text })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["spacer"] }),
+        props.action && /* @__PURE__ */ jsxRuntime.jsx(
+          index.default,
+          {
+            variant: "tertiary",
+            size: "small",
+            onClick: props.action.onClick,
+            className: styles_module.default["alert-action"],
+            children: props.action.label
+          }
+        ),
+        props.onClose && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["alert-close"], children: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { onClick: props.onClose, children: /* @__PURE__ */ jsxRuntime.jsx(internal.DSIcon, { name: "close", size: "small" }) }) })
+      ]
+    }
+  );
+};
+const iconVariants = {
+  success: /* @__PURE__ */ jsxRuntime.jsx(internal.DSIcon, { name: "success", size: "inherit" }),
+  info: /* @__PURE__ */ jsxRuntime.jsx(internal.DSIcon, { name: "info", size: "inherit" }),
+  warning: /* @__PURE__ */ jsxRuntime.jsx(internal.DSIcon, { name: "warning", size: "inherit" }),
+  error: /* @__PURE__ */ jsxRuntime.jsx(internal.DSIcon, { name: "error", size: "inherit" })
+};
+
+exports.default = Alert;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var modules_efc4e723 = {"alert":"vt_ce_Alert_alert__720ad3ec","alert-stripe":"vt_ce_Alert_alertStripe__720ad3ec","alert-icon":"vt_ce_Alert_alertIcon__720ad3ec","alert-content":"vt_ce_Alert_alertContent__720ad3ec","alert-label":"vt_ce_Alert_alertLabel__720ad3ec","alert-text":"vt_ce_Alert_alertText__720ad3ec","spacer":"vt_ce_Alert_spacer__720ad3ec","alert-action":"vt_ce_Alert_alertAction__720ad3ec","alert-close":"vt_ce_Alert_alertClose__720ad3ec"};
+
+exports.default = modules_efc4e723;

package/dist/cjs/Box/index.js

@@ -0,0 +1,16 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var system = require('@mui/system');
+var identifier = require('../styles/identifier.js');
+var defaultTheme = require('../styles/defaultTheme.js');
+
+const Box = system.createBox({
+  themeId: identifier.default,
+  defaultTheme: defaultTheme.default
+});
+
+exports.default = Box;

package/dist/cjs/Button/index.js

@@ -0,0 +1,56 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('../CircularProgress/index.js');
+var styles_module = require('./styles.module.scss.js');
+require('color2k');
+require('../styles/css-vars.js');
+var cx = require('../styles/cx.js');
+require('../styles/defaultTheme.js');
+require('@mui/system');
+require('../styles/styled.js');
+
+const Button = React.forwardRef(
+  ({
+    variant = "primary",
+    size = "large",
+    disabled = false,
+    loading = false,
+    destructive = false,
+    active = false,
+    ...props
+  }, ref) => {
+    const variantCn = styles_module.default[variant];
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        type: props.type,
+        "data-size": size,
+        "data-loading": loading,
+        "data-active": active,
+        disabled: loading || disabled,
+        "data-destructive": destructive,
+        onClick: props.onClick,
+        "data-testid": props["data-testid"],
+        style: props.style,
+        className: cx.cx(styles_module.default["button"], variantCn, props.className),
+        children: [
+          loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["loading-container"], children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { size: "1.4em", color: "inherit" }) }),
+          /* @__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 })
+          ] })
+        ]
+      }
+    );
+  }
+);
+
+exports.default = Button;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var modules_efc4e723 = {"button":"vt_ce_Button_button__0157fdfe","primary":"vt_ce_Button_primary__0157fdfe","secondary":"vt_ce_Button_secondary__0157fdfe","tertiary":"vt_ce_Button_tertiary__0157fdfe","inner-container":"vt_ce_Button_innerContainer__0157fdfe","loading-container":"vt_ce_Button_loadingContainer__0157fdfe","button-icon":"vt_ce_Button_buttonIcon__0157fdfe"};
+
+exports.default = modules_efc4e723;

package/dist/cjs/Checkbox/index.js

@@ -0,0 +1,116 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var material = require('@mui/material');
+var styles_module = require('./styles.module.scss.js');
+require('color2k');
+require('../styles/css-vars.js');
+var cx = require('../styles/cx.js');
+require('../styles/defaultTheme.js');
+require('@mui/system');
+require('../styles/styled.js');
+
+const Checkbox = React.forwardRef(
+  ({ checked = false, indeterminate = false, disabled = false, ...props }, ref) => {
+    const inputRef = React.useRef(null);
+    const forkedRef = material.useForkRef(inputRef, ref);
+    React.useEffect(() => {
+      if (inputRef.current) {
+        inputRef.current.indeterminate = indeterminate ?? false;
+      }
+    }, [indeterminate]);
+    const labelId = React.useId();
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        role: "checkbox",
+        "aria-labelledby": labelId,
+        "aria-checked": indeterminate ? "mixed" : checked,
+        "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),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: styles_module.default["passthrough-label-container"], children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "checkbox",
+                ref: forkedRef,
+                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 })
+        ]
+      }
+    );
+  }
+);
+const UncheckedIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        className: styles_module.default["checkbox-svg-path"],
+        d: "M19 5v14H5V5h14Zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Z"
+      }
+    )
+  }
+);
+const CheckedIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        className: styles_module.default["checkbox-svg-path"],
+        d: "M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Zm-9 14-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9Z"
+      }
+    )
+  }
+);
+const IndeterminateIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        className: styles_module.default["checkbox-svg-path"],
+        d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Zm-2 10H7v-2h10v2Z"
+      }
+    )
+  }
+);
+
+exports.default = Checkbox;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+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"};
+
+exports.default = modules_efc4e723;

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');
+require('color2k');
+require('../styles/css-vars.js');
+var cx = require('../styles/cx.js');
+require('../styles/defaultTheme.js');
+require('react');
+require('@mui/system');
+require('../styles/styled.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 modules_efc4e723 = {"container":"vt_ce_CircularProgress_container__0fadb3a4","progress-container":"vt_ce_CircularProgress_progressContainer__0fadb3a4","progress-svg":"vt_ce_CircularProgress_progressSvg__0fadb3a4","circularRotateKeyframe":"vt_ce_CircularProgress_circularRotateKeyframe__0fadb3a4","progress-circle":"vt_ce_CircularProgress_progressCircle__0fadb3a4","circularDashKeyframe":"vt_ce_CircularProgress_circularDashKeyframe__0fadb3a4"};
+
+exports.default = modules_efc4e723;

package/dist/cjs/Dialog/components.js

@@ -0,0 +1,219 @@
+'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 styles_module = require('./styles.module.scss.js');
+var state = require('./state.js');
+require('color2k');
+require('../styles/css-vars.js');
+var cx = require('../styles/cx.js');
+require('../styles/defaultTheme.js');
+require('@mui/system');
+require('../styles/styled.js');
+var index$1 = require('../Button/index.js');
+var index = require('../Typography/index.js');
+var index$2 = require('../IconButton/index.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const Dialog = React__namespace.forwardRef(function Dialog2({
+  children,
+  portalEl,
+  style,
+  className,
+  overlayStyle,
+  overlayClassName,
+  lockScroll = true,
+  "data-testid": dataTestId,
+  ...options
+}, propRef) {
+  const dialog = state.useDialog(options);
+  const ref = react.useMergeRefs([dialog.context.refs.setFloating, propRef]);
+  let content = null;
+  if (dialog.context.open) {
+    content = /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { root: portalEl, children: /* @__PURE__ */ jsxRuntime.jsx(
+      react.FloatingOverlay,
+      {
+        style: overlayStyle,
+        className: cx.cx(styles_module.default["dialog-overlay"], overlayClassName),
+        lockScroll,
+        children: /* @__PURE__ */ jsxRuntime.jsx(react.FloatingFocusManager, { context: dialog.context, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref,
+            "aria-labelledby": dialog.labelId,
+            "aria-describedby": dialog.descriptionId,
+            ...dialog.getFloatingProps(),
+            "data-testid": dataTestId,
+            style,
+            className: cx.cx(styles_module.default["dialog"], className),
+            children
+          }
+        ) })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(state.DialogContext.Provider, { value: dialog, children: content });
+});
+const DialogStart = React__namespace.forwardRef(
+  function DialogStart2({ children, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        ...props,
+        className: cx.cx(styles_module.default["dialog-start"], props.className),
+        children
+      }
+    );
+  }
+);
+const DialogContent = React__namespace.forwardRef(function DialogContent2({ children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      ref,
+      className: cx.cx(styles_module.default["dialog-content"], props.className),
+      children
+    }
+  );
+});
+const DialogEnd = React__namespace.forwardRef(
+  function DialogEnd2({ children, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        ...props,
+        className: cx.cx(styles_module.default["dialog-end"], props.className),
+        children
+      }
+    );
+  }
+);
+const DialogTitle = React__namespace.forwardRef(function DialogTitle2({ children, ...props }, ref) {
+  const { setLabelId } = state.useDialogContext();
+  const id = React__namespace.useId();
+  React__namespace.useLayoutEffect(() => {
+    setLabelId(id);
+    return () => setLabelId(void 0);
+  }, [id, setLabelId]);
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogStart, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      variant: "h4",
+      color: "primary",
+      ref,
+      id,
+      ...props,
+      className: cx.cx(styles_module.default["dialog-title"], props.className),
+      children
+    }
+  ) });
+});
+const DialogTypography = React__namespace.forwardRef(function DialogTypography2({ children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      variant: "paragraph2",
+      color: "primary",
+      ...props,
+      ref,
+      className: cx.cx(styles_module.default["dialog-typography"], props.className),
+      children
+    }
+  );
+});
+const DialogDescription = React__namespace.forwardRef(function DialogDescription2({ children, ...props }, ref) {
+  const { setDescriptionId } = state.useDialogContext();
+  const id = React__namespace.useId();
+  React__namespace.useLayoutEffect(() => {
+    setDescriptionId(id);
+    return () => setDescriptionId(void 0);
+  }, [id, setDescriptionId]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogTypography,
+    {
+      variant: "paragraph2",
+      color: "primary",
+      ...props,
+      ref,
+      id,
+      children
+    }
+  );
+});
+const DialogActions = React__namespace.forwardRef(function DialogActions2({ children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogEnd, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      ref,
+      className: cx.cx(styles_module.default["dialog-actions"], props.className),
+      children
+    }
+  ) });
+});
+const DialogCloseButton = React__namespace.forwardRef(function DialogCloseButton2(props, ref) {
+  const { dismiss } = state.useDialogContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index$1.default,
+    {
+      variant: "tertiary",
+      ...props,
+      ref,
+      onClick: (e) => {
+        dismiss();
+        props.onClick?.(e);
+      }
+    }
+  );
+});
+const DialogCloseIconButton = React__namespace.forwardRef(function DialogCloseIconButton2(props, ref) {
+  const { dismiss } = state.useDialogContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index$2.default,
+    {
+      ...props,
+      ref,
+      onClick: (e) => {
+        dismiss();
+        props.onClick?.(e);
+      }
+    }
+  );
+});
+
+exports.DialogActions = DialogActions;
+exports.DialogCloseButton = DialogCloseButton;
+exports.DialogCloseIconButton = DialogCloseIconButton;
+exports.DialogContent = DialogContent;
+exports.DialogDescription = DialogDescription;
+exports.DialogEnd = DialogEnd;
+exports.DialogStart = DialogStart;
+exports.DialogTitle = DialogTitle;
+exports.DialogTypography = DialogTypography;
+exports.default = Dialog;

package/dist/cjs/Dialog/factory.js

@@ -0,0 +1,16 @@
+'use strict';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var components = require('./components.js');
+
+function createDialogComponent({ portalEl }) {
+  return React.forwardRef(
+    function ScopedDialog(props, ref) {
+      return /* @__PURE__ */ jsxRuntime.jsx(components.default, { portalEl, ref, ...props });
+    }
+  );
+}
+
+exports.createDialogComponent = createDialogComponent;

package/dist/cjs/Dialog/state.js

@@ -0,0 +1,63 @@
+'use strict';
+'use client';
+'use strict';
+
+var React = require('react');
+var react = require('@floating-ui/react');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+function useDialog({ open, onDismiss: dismissDialog }) {
+  const [labelId, setLabelId] = React__namespace.useState();
+  const [descriptionId, setDescriptionId] = React__namespace.useState();
+  const data = react.useFloating({
+    open,
+    onOpenChange: (newOpen) => !newOpen && dismissDialog()
+  });
+  const context = data.context;
+  const dismiss = react.useDismiss(context, { outsidePressEvent: "mousedown" });
+  const role = react.useRole(context);
+  const interactions = react.useInteractions([dismiss, role]);
+  return React__namespace.useMemo(
+    () => ({
+      open,
+      dismiss: dismissDialog,
+      ...interactions,
+      ...data,
+      labelId,
+      descriptionId,
+      setLabelId,
+      setDescriptionId
+    }),
+    [open, dismissDialog, interactions, data, labelId, descriptionId]
+  );
+}
+const DialogContext = React__namespace.createContext(null);
+const useDialogContext = () => {
+  const context = React__namespace.useContext(DialogContext);
+  if (context == null) {
+    throw new Error("Dialog components must be wrapped in <Dialog />");
+  }
+  return context;
+};
+
+exports.DialogContext = DialogContext;
+exports.useDialog = useDialog;
+exports.useDialogContext = useDialogContext;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var modules_efc4e723 = {"dialog-overlay":"vt_ce_Dialog_dialogOverlay__19d426a2","dialog":"vt_ce_Dialog_dialog__19d426a2","dialog-start":"vt_ce_Dialog_dialogStart__19d426a2","dialog-end":"vt_ce_Dialog_dialogEnd__19d426a2","dialog-content":"vt_ce_Dialog_dialogContent__19d426a2","dialog-title":"vt_ce_Dialog_dialogTitle__19d426a2","dialog-typography":"vt_ce_Dialog_dialogTypography__19d426a2","dialog-actions":"vt_ce_Dialog_dialogActions__19d426a2"};
+
+exports.default = modules_efc4e723;