one-design-next 0.0.4-alpha.100

package/dist/dialog/index.d.ts

@@ -0,0 +1,139 @@
+import React from 'react';
+import { ButtonProps } from '../button';
+import { PopoverProps } from '../pop-base';
+import './style';
+export interface DialogProps {
+    children?: React.ReactNode;
+    /**
+     * @description 包裹层类名
+     */
+    className?: string;
+    /**
+     * @description 包裹层样式
+     */
+    style?: React.CSSProperties;
+    /**
+     * @description body 区域样式
+     */
+    bodyStyle?: React.CSSProperties;
+    /**
+     * @description 是否显示
+     */
+    visible?: boolean;
+    /**
+     * @description 层级
+     */
+    zIndex?: number | string;
+    /**
+     * @description 回调
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * @description 是否从点击位置变换
+     * @default true
+     */
+    originAware?: boolean;
+    /**
+     * @description 是否缩放对话框内容
+     * @default true
+     */
+    autoScale?: boolean;
+    /**
+     * @description 缩放对话框范围
+     * @default [0.9, 1]
+     */
+    autoScaleRange?: [number, number];
+    /**
+     * @description 对话框标题
+     */
+    title?: React.ReactNode;
+    /**
+     * @description 对话框描述
+     */
+    desc?: React.ReactNode;
+    /**
+     * @description 取消按钮回调
+     */
+    onCancel?: () => void;
+    /**
+     * @description 确认按钮回调
+     */
+    onConfirm?: () => void;
+    /**
+     * @description 取消按钮文本，传入 null 可隐藏按钮
+     * @default '取消'
+     */
+    cancelText?: string | null;
+    /**
+     * @description 确认按钮文本，传入 null 可隐藏按钮
+     * @default '确认'
+     */
+    confirmText?: string | null;
+    /**
+     * @description 是否显示边框分割线
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * @description 对齐方式
+     * @default undefined
+     */
+    align?: 'center';
+    /**
+     * @description 意图类型
+     */
+    intent?: 'info' | 'success' | 'warning' | 'danger';
+    /**
+     * @description 内容标题（用于 intent 模式）
+     */
+    contentTitle?: React.ReactNode;
+    /**
+     * @description 内容描述（用于 intent 模式）
+     */
+    contentDesc?: React.ReactNode;
+    /**
+     * @description 是否显示遮罩
+     * @default true
+     */
+    maskVisible?: boolean;
+    /**
+     * @description 是否支持点击遮罩关闭
+     * @default true
+     */
+    maskClosable?: boolean;
+    /**
+     * @description 遮罩样式
+     */
+    maskStyle?: React.CSSProperties;
+    /**
+     * @description 遮罩类名
+     */
+    maskClassName?: string;
+    /**
+     * @description 包裹层
+     */
+    container?: HTMLElement;
+    /**
+     * @description 是否显示关闭按钮
+     * @default true
+     */
+    closable?: boolean;
+    /**
+     * @description 确认按钮的属性
+     * @default undefined
+     */
+    confirmProps?: Omit<ButtonProps, 'onClick'> & {
+        popover?: React.ReactNode;
+        popoverProps?: PopoverProps;
+    };
+    /**
+     * @description 取消按钮的属性
+     * @default undefined
+     */
+    cancelProps?: Omit<ButtonProps, 'onClick'> & {
+        popover?: React.ReactNode;
+        popoverProps?: PopoverProps;
+    };
+}
+declare const Dialog: React.FC<DialogProps>;
+export default Dialog;

package/dist/dialog/index.js

@@ -0,0 +1,300 @@
+'use client';
+
+var _excluded = ["className", "children", "style", "bordered", "align", "intent", "originAware", "autoScale", "autoScaleRange", "zIndex", "visible", "maskVisible", "maskClosable", "maskStyle", "maskClassName", "onVisibleChange", "container"],
+  _excluded2 = ["visible", "onVisibleChange", "children", "originAware", "autoScale", "autoScaleRange", "style", "className", "zIndex", "title", "desc", "onCancel", "onConfirm", "cancelText", "confirmText", "bordered", "align", "intent", "contentTitle", "contentDesc", "container", "bodyStyle", "maskVisible", "maskClosable", "maskStyle", "maskClassName", "closable", "confirmProps", "cancelProps"],
+  _excluded3 = ["popover", "popoverProps"],
+  _excluded4 = ["popover", "popoverProps"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { useEffect, useRef } from 'react';
+import Button from "../button";
+import Icon from "../icon";
+import { ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalRoot, ModalTitle } from "../modal-base";
+import Popover from "../popover";
+import "./style";
+import useModalPosition from "./useModalPosition";
+var defaultProps = {
+  visible: false,
+  onVisibleChange: undefined,
+  originAware: true,
+  autoScale: true,
+  autoScaleRange: [0.9, 1],
+  cancelText: '取消',
+  confirmText: '确认',
+  bordered: false,
+  align: undefined,
+  intent: undefined,
+  contentTitle: undefined,
+  contentDesc: undefined,
+  maskVisible: true,
+  maskClosable: true,
+  maskStyle: undefined,
+  maskClassName: undefined,
+  container: undefined,
+  closable: true,
+  confirmProps: undefined,
+  cancelProps: undefined
+};
+
+// Dialog Content - 包含所有样式和行为逻辑
+var DialogContent = /*#__PURE__*/React.forwardRef(function DialogContent(_ref, ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    style = _ref.style,
+    _ref$bordered = _ref.bordered,
+    bordered = _ref$bordered === void 0 ? false : _ref$bordered,
+    align = _ref.align,
+    intent = _ref.intent,
+    _ref$originAware = _ref.originAware,
+    originAware = _ref$originAware === void 0 ? true : _ref$originAware,
+    _ref$autoScale = _ref.autoScale,
+    autoScale = _ref$autoScale === void 0 ? true : _ref$autoScale,
+    _ref$autoScaleRange = _ref.autoScaleRange,
+    autoScaleRange = _ref$autoScaleRange === void 0 ? [0.9, 1] : _ref$autoScaleRange,
+    zIndex = _ref.zIndex,
+    _ref$visible = _ref.visible,
+    visible = _ref$visible === void 0 ? false : _ref$visible,
+    _ref$maskVisible = _ref.maskVisible,
+    maskVisible = _ref$maskVisible === void 0 ? true : _ref$maskVisible,
+    _ref$maskClosable = _ref.maskClosable,
+    maskClosable = _ref$maskClosable === void 0 ? true : _ref$maskClosable,
+    maskStyle = _ref.maskStyle,
+    maskClassName = _ref.maskClassName,
+    onVisibleChange = _ref.onVisibleChange,
+    container = _ref.container,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var modalContentRef = useRef(null);
+  useModalPosition({
+    enabled: originAware,
+    visible: visible,
+    modalContentRef: modalContentRef
+  });
+  var handleResize = function handleResize() {
+    if (!modalContentRef.current || !autoScale) {
+      return;
+    }
+    var _modalContentRef$curr = modalContentRef.current,
+      clientWidth = _modalContentRef$curr.clientWidth,
+      clientHeight = _modalContentRef$curr.clientHeight;
+    var windowWidth = window.innerWidth;
+    var windowHeight = window.innerHeight;
+
+    // 计算需要的空间
+    var requiredWidth = clientWidth;
+    var requiredHeight = clientHeight;
+
+    // 计算宽度和高度的缩放比例
+    var widthScale = windowWidth / requiredWidth;
+    var heightScale = windowHeight / requiredHeight;
+
+    // 取较小的缩放比例，确保内容完全可见
+    var scale = Math.min(widthScale, heightScale);
+
+    // 限制在指定范围内
+    var clampedScale = Math.min(Math.max(scale, autoScaleRange[0]), autoScaleRange[1]);
+
+    // @ts-ignore
+    modalContentRef.current.style.zoom = "".concat(clampedScale);
+  };
+  useEffect(function () {
+    if (autoScale) {
+      setTimeout(function () {
+        handleResize();
+      }, 0);
+      window.addEventListener('resize', handleResize);
+      return function () {
+        window.removeEventListener('resize', handleResize);
+      };
+    }
+  }, [modalContentRef, autoScaleRange, autoScale]);
+  var contentStyle = {
+    zIndex: zIndex ? Number(zIndex) : undefined
+  };
+  var handlePointerDownOutside = function handlePointerDownOutside(event) {
+    if (!maskVisible || !maskClosable) {
+      event.preventDefault();
+    }
+  };
+  return /*#__PURE__*/React.createElement(ModalPortal, {
+    container: container
+  }, maskVisible && /*#__PURE__*/React.createElement(ModalOverlay, {
+    visible: visible,
+    "data-odn-modal-overlay": "dialog",
+    style: maskStyle,
+    className: maskClassName
+  }), /*#__PURE__*/React.createElement(ModalContent, _extends({
+    ref: ref,
+    "data-odn-dialog-content-wrapper": true,
+    "data-odn-dialog-bordered": bordered,
+    "data-odn-dialog-align": intent ? 'center' : align,
+    "data-odn-dialog-intent": intent,
+    style: contentStyle,
+    onPointerDownOutside: handlePointerDownOutside,
+    onOpenAutoFocus: function onOpenAutoFocus(e) {
+      e.preventDefault();
+    }
+  }, props), /*#__PURE__*/React.createElement("div", {
+    "data-odn-dialog-content": true,
+    ref: modalContentRef
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-dialog-content-inner": true,
+    className: className,
+    style: style
+  }, children))));
+});
+
+// 主要的 Dialog 组件
+var Dialog = function Dialog(_ref2) {
+  var _ref2$visible = _ref2.visible,
+    visible = _ref2$visible === void 0 ? false : _ref2$visible,
+    onVisibleChange = _ref2.onVisibleChange,
+    children = _ref2.children,
+    _ref2$originAware = _ref2.originAware,
+    originAware = _ref2$originAware === void 0 ? true : _ref2$originAware,
+    _ref2$autoScale = _ref2.autoScale,
+    autoScale = _ref2$autoScale === void 0 ? true : _ref2$autoScale,
+    _ref2$autoScaleRange = _ref2.autoScaleRange,
+    autoScaleRange = _ref2$autoScaleRange === void 0 ? [0.9, 1] : _ref2$autoScaleRange,
+    style = _ref2.style,
+    className = _ref2.className,
+    zIndex = _ref2.zIndex,
+    title = _ref2.title,
+    desc = _ref2.desc,
+    onCancel = _ref2.onCancel,
+    onConfirm = _ref2.onConfirm,
+    _ref2$cancelText = _ref2.cancelText,
+    cancelText = _ref2$cancelText === void 0 ? defaultProps.cancelText : _ref2$cancelText,
+    _ref2$confirmText = _ref2.confirmText,
+    confirmText = _ref2$confirmText === void 0 ? defaultProps.confirmText : _ref2$confirmText,
+    _ref2$bordered = _ref2.bordered,
+    bordered = _ref2$bordered === void 0 ? defaultProps.bordered : _ref2$bordered,
+    _ref2$align = _ref2.align,
+    align = _ref2$align === void 0 ? defaultProps.align : _ref2$align,
+    _ref2$intent = _ref2.intent,
+    intent = _ref2$intent === void 0 ? defaultProps.intent : _ref2$intent,
+    _ref2$contentTitle = _ref2.contentTitle,
+    contentTitle = _ref2$contentTitle === void 0 ? defaultProps.contentTitle : _ref2$contentTitle,
+    _ref2$contentDesc = _ref2.contentDesc,
+    contentDesc = _ref2$contentDesc === void 0 ? defaultProps.contentDesc : _ref2$contentDesc,
+    _ref2$container = _ref2.container,
+    container = _ref2$container === void 0 ? defaultProps.container : _ref2$container,
+    bodyStyle = _ref2.bodyStyle,
+    _ref2$maskVisible = _ref2.maskVisible,
+    maskVisible = _ref2$maskVisible === void 0 ? defaultProps.maskVisible : _ref2$maskVisible,
+    _ref2$maskClosable = _ref2.maskClosable,
+    maskClosable = _ref2$maskClosable === void 0 ? defaultProps.maskClosable : _ref2$maskClosable,
+    _ref2$maskStyle = _ref2.maskStyle,
+    maskStyle = _ref2$maskStyle === void 0 ? defaultProps.maskStyle : _ref2$maskStyle,
+    _ref2$maskClassName = _ref2.maskClassName,
+    maskClassName = _ref2$maskClassName === void 0 ? defaultProps.maskClassName : _ref2$maskClassName,
+    _ref2$closable = _ref2.closable,
+    closable = _ref2$closable === void 0 ? defaultProps.closable : _ref2$closable,
+    _ref2$confirmProps = _ref2.confirmProps,
+    confirmProps = _ref2$confirmProps === void 0 ? defaultProps.confirmProps : _ref2$confirmProps,
+    _ref2$cancelProps = _ref2.cancelProps,
+    cancelProps = _ref2$cancelProps === void 0 ? defaultProps.cancelProps : _ref2$cancelProps,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  var _ref3 = confirmProps || {},
+    confirmPopup = _ref3.popover,
+    confirmPopoverProps = _ref3.popoverProps,
+    confirmPropsRest = _objectWithoutProperties(_ref3, _excluded3);
+  var _ref4 = cancelProps || {},
+    cancelPopup = _ref4.popover,
+    cancelPopoverProps = _ref4.popoverProps,
+    cancelPropsRest = _objectWithoutProperties(_ref4, _excluded4);
+  var handleCancel = function handleCancel() {
+    if (onCancel) {
+      onCancel();
+    }
+    if (onVisibleChange) {
+      onVisibleChange(false);
+    }
+  };
+  var handleConfirm = function handleConfirm() {
+    if (onConfirm) {
+      onConfirm();
+    }
+  };
+
+  // 根据 intent 自动设置图标
+  var getIntentIcon = function getIntentIcon() {
+    if (!intent) return null;
+    var iconMap = {
+      info: 'info-circle-filled',
+      success: 'check-circle-filled',
+      warning: 'alert-circle-filled',
+      danger: 'cancel-circle-filled'
+    };
+    return /*#__PURE__*/React.createElement(Icon, {
+      "data-odn-dialog-intent-icon": true,
+      name: iconMap[intent],
+      size: 40
+    });
+  };
+  var cancelButton = /*#__PURE__*/React.createElement(Button, _extends({
+    "data-odn-dialog-cancel-button": true,
+    onClick: handleCancel
+  }, cancelPropsRest), cancelText);
+  var confirmButton = /*#__PURE__*/React.createElement(Button, _extends({
+    "data-odn-dialog-confirm-button": true,
+    onClick: handleConfirm,
+    intent: "primary"
+  }, confirmPropsRest), confirmText);
+  return /*#__PURE__*/React.createElement(ModalRoot, _extends({
+    open: visible,
+    onOpenChange: onVisibleChange
+  }, props), /*#__PURE__*/React.createElement(DialogContent, {
+    bordered: bordered,
+    align: align,
+    intent: intent,
+    originAware: originAware,
+    autoScale: autoScale,
+    autoScaleRange: autoScaleRange,
+    zIndex: zIndex,
+    className: className,
+    style: style,
+    visible: visible,
+    maskVisible: maskVisible,
+    maskClosable: maskClosable,
+    maskStyle: maskStyle,
+    maskClassName: maskClassName,
+    onVisibleChange: onVisibleChange,
+    container: container
+  }, !title && /*#__PURE__*/React.createElement(ModalTitle, {
+    "data-odn-visually-hidden": true
+  }, "Dialog"), !desc && /*#__PURE__*/React.createElement(ModalDescription, {
+    "data-odn-visually-hidden": true
+  }, "Dialog content"), !intent && (!!title || !!desc) && /*#__PURE__*/React.createElement(ModalHeader, {
+    "data-odn-dialog-header": true
+  }, !!title && /*#__PURE__*/React.createElement(ModalTitle, {
+    "data-odn-dialog-title": true
+  }, title), !!desc && /*#__PURE__*/React.createElement(ModalDescription, {
+    "data-odn-dialog-description": true
+  }, desc)), intent && /*#__PURE__*/React.createElement("div", {
+    "data-odn-dialog-body": true,
+    "data-odn-dialog-intent-content": true,
+    style: bodyStyle
+  }, getIntentIcon(), contentTitle && /*#__PURE__*/React.createElement("div", {
+    "data-odn-dialog-intent-title": true
+  }, contentTitle), contentDesc && /*#__PURE__*/React.createElement("div", {
+    "data-odn-dialog-intent-desc": true
+  }, contentDesc)), !intent && /*#__PURE__*/React.createElement("div", {
+    "data-odn-dialog-body": true,
+    style: bodyStyle
+  }, children), (cancelText !== null || confirmText !== null) && /*#__PURE__*/React.createElement(ModalFooter, {
+    "data-odn-dialog-footer": true
+  }, cancelText !== null && /*#__PURE__*/React.createElement(React.Fragment, null, cancelPopup ? /*#__PURE__*/React.createElement(Popover, _extends({
+    popup: cancelPopup
+  }, cancelPopoverProps), cancelButton) : cancelButton), confirmText !== null && /*#__PURE__*/React.createElement(React.Fragment, null, confirmPopup ? /*#__PURE__*/React.createElement(Popover, _extends({
+    popup: confirmPopup
+  }, confirmPopoverProps), confirmButton) : confirmButton)), !intent && closable && /*#__PURE__*/React.createElement(ModalClose, {
+    asChild: true
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "cancel",
+    size: 24,
+    "data-odn-dialog-close-button": true,
+    onClick: onCancel
+  }))));
+};
+export default Dialog;

package/dist/dialog/style/index.css

@@ -0,0 +1,228 @@
+html {
+  --odn-dialog-body-padding: 16px 24px;
+  --odn-dialog-footer-padding: 24px;
+  --odn-dialog-footer-gap: 12px;
+  --odn-dialog-footer-justify: flex-end;
+  --odn-dialog-overlay-background: rgba(0, 0, 0, 0.45);
+  --odn-dialog-border-radius: 10px;
+  --odn-dialog-close-top: 16px;
+  --odn-dialog-close-right: 16px;
+}
+
+@layer components {
+  [data-scroll-locked] {
+    overflow: hidden !important;
+    overscroll-behavior: contain;
+    position: relative !important;
+    padding-left: 0px;
+    padding-top: 0px;
+    padding-right: 0px;
+    margin-left: 0;
+    margin-top: 0;
+    margin-right: var(--removed-body-scroll-bar-size) !important;
+  }
+  [data-odn-modal-overlay=dialog] {
+    position: fixed;
+    inset: 0;
+    z-index: var(--odn-z-index-modal);
+    background: var(--odn-dialog-overlay-background);
+    overflow: hidden !important;
+  }
+  [data-odn-dialog-content-wrapper] {
+    position: fixed;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    z-index: var(--odn-z-index-modal);
+    pointer-events: none !important;
+    overflow: auto;
+  }
+  [data-odn-dialog-content] {
+    padding: 50px;
+  }
+  [data-odn-dialog-content-inner] {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: fit-content;
+    height: fit-content;
+    min-width: 400px;
+    min-height: 240px;
+    background-color: #fff;
+    overflow: auto;
+    pointer-events: initial;
+    border-radius: var(--odn-dialog-border-radius);
+  }
+  [data-odn-dialog-content-wrapper][data-state=open] {
+    animation: dialogContentInOpacity 0.18s cubic-bezier(0.32, 0.72, 0, 1) forwards;
+  }
+  [data-odn-dialog-content-wrapper][data-state=open] [data-odn-dialog-content] {
+    animation: dialogContentInTransform 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
+  }
+  [data-odn-dialog-content-wrapper][data-state=closed] {
+    animation: dialogContentOutOpacity 0.18s cubic-bezier(0.32, 0.72, 0, 1) forwards;
+  }
+  [data-odn-dialog-content-wrapper][data-state=closed] [data-odn-dialog-content] {
+    animation: dialogContentOutTransform 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
+  }
+  @keyframes dialogContentInOpacity {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @keyframes dialogContentInTransform {
+    from {
+      transform: scale(0.75);
+    }
+    to {
+      transform: scale(1);
+    }
+  }
+  @keyframes dialogContentOutOpacity {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+  @keyframes dialogContentOutTransform {
+    from {
+      transform: scale(1);
+    }
+    to {
+      transform: scale(0.75);
+    }
+  }
+  [data-odn-dialog-header] {
+    flex: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 20px 48px 20px 24px;
+  }
+  [data-odn-dialog-title] {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 600;
+    color: var(--odn-color-black-12);
+  }
+  [data-odn-dialog-description] {
+    font-size: 13px;
+    line-height: 22px;
+    color: var(--odn-color-black-10);
+  }
+  [data-odn-dialog-footer] {
+    flex: none;
+  }
+  [data-odn-dialog-close-button] {
+    position: absolute;
+    top: var(--odn-dialog-close-top);
+    right: var(--odn-dialog-close-right);
+    color: var(--odn-color-black-9);
+    cursor: pointer;
+  }
+  [data-odn-dialog-close-button]:hover {
+    color: var(--odn-color-black-10);
+  }
+  [data-odn-dialog-close-button]:active {
+    color: var(--odn-color-black-11);
+  }
+  [data-odn-dialog-body] {
+    flex: 1;
+    padding: var(--odn-dialog-body-padding);
+    min-height: 0;
+    font-size: var(--odn-font-size);
+    line-height: var(--odn-line-height);
+  }
+  [data-odn-dialog-footer] {
+    display: flex;
+    justify-content: var(--odn-dialog-footer-justify);
+    gap: var(--odn-dialog-footer-gap);
+    padding: var(--odn-dialog-footer-padding);
+  }
+  [data-odn-dialog-cancel-button],
+  [data-odn-dialog-confirm-button] {
+    min-width: 80px;
+  }
+  /* Bordered dialog styles */
+  [data-odn-dialog-bordered=true] [data-odn-dialog-header] {
+    padding: 16px 48px 16px 24px;
+    border-bottom: 1px solid var(--odn-color-black-5);
+  }
+  [data-odn-dialog-bordered=true] [data-odn-dialog-footer] {
+    padding: 16px 24px;
+    border-top: 1px solid var(--odn-color-black-5);
+  }
+  /* Center aligned dialog styles */
+  [data-odn-dialog-align=center] [data-odn-dialog-header] {
+    text-align: center;
+  }
+  [data-odn-dialog-align=center] [data-odn-dialog-body] {
+    text-align: center;
+  }
+  [data-odn-dialog-align=center] [data-odn-dialog-footer] {
+    justify-content: center;
+  }
+  /* Visually hidden for accessibility */
+  [data-odn-visually-hidden] {
+    position: absolute !important;
+    left: -10000px !important;
+    width: 1px !important;
+    height: 1px !important;
+    overflow: hidden !important;
+  }
+  /* Intent dialog styles */
+  [data-odn-dialog-body][data-odn-dialog-intent-content] {
+    padding: 40px 24px 0 24px;
+  }
+  [data-odn-dialog-intent-icon] {
+    display: block;
+    margin: 0 auto 16px;
+  }
+  /* Intent icon colors */
+  [data-odn-dialog-intent=info] [data-odn-dialog-intent-icon] {
+    color: var(--odn-color-blue-6);
+  }
+  [data-odn-dialog-intent=success] [data-odn-dialog-intent-icon] {
+    color: var(--odn-color-green-6);
+  }
+  [data-odn-dialog-intent=warning] [data-odn-dialog-intent-icon] {
+    color: var(--odn-color-orange-6);
+  }
+  [data-odn-dialog-intent=danger] [data-odn-dialog-intent-icon] {
+    color: var(--odn-color-red-6);
+  }
+  [data-odn-dialog-intent-title] {
+    margin-bottom: 8px;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 600;
+    color: var(--odn-color-black-12);
+  }
+  [data-odn-modal-overlay=dialog][data-state=open] {
+    animation: overlayFadeIn 0.25s cubic-bezier(0.32, 0.72, 0, 1) forwards;
+  }
+  [data-odn-modal-overlay=dialog][data-state=closed] {
+    animation: overlayFadeOut 0.25s cubic-bezier(0.32, 0.72, 0, 1) forwards;
+  }
+  @keyframes overlayFadeIn {
+    from {
+      background: rgba(0, 0, 0, 0);
+    }
+    to {
+      background: var(--odn-dialog-overlay-background);
+    }
+  }
+  @keyframes overlayFadeOut {
+    from {
+      background: var(--odn-dialog-overlay-background);
+    }
+    to {
+      background: rgba(0, 0, 0, 0);
+    }
+  }
+}

package/dist/dialog/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';

package/dist/dialog/style/index.js

@@ -0,0 +1,2 @@
+import "../../style";
+import "./index.css";

package/dist/dialog/useModalPosition.d.ts

@@ -0,0 +1,6 @@
+import { MutableRefObject } from 'react';
+export default function useModalPosition({ visible, modalContentRef, enabled, }: {
+    visible: boolean;
+    modalContentRef: MutableRefObject<HTMLElement | null>;
+    enabled: boolean;
+}): void;