wssf-kage-ui 0.1.2 → 0.1.3

package/dist/esm/Tree/style.less

@@ -0,0 +1,313 @@
+// Tree 树形控件样式
+
+@prefix: kage-tree;
+
+// 颜色变量
+@tree-bg: #fff;
+@tree-color: rgba(0, 0, 0, 0.85);
+@tree-border-color: #d9d9d9;
+@tree-selected-bg: #e6f7ff;
+@tree-selected-color: rgba(0, 0, 0, 0.85);
+@tree-hover-bg: #f5f5f5;
+@tree-disabled-color: rgba(0, 0, 0, 0.25);
+
+// ============ 主容器 ============
+.@{prefix} {
+  padding: 4px 0;
+  font-size: 14px;
+  line-height: 1.5715;
+  color: @tree-color;
+  background: @tree-bg;
+
+  * {
+    box-sizing: border-box;
+  }
+}
+
+// ============ 树节点 ============
+.@{prefix}-treenode {
+  position: relative;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  outline: none;
+
+  &-disabled {
+    .@{prefix}-node-content {
+      color: @tree-disabled-color;
+      cursor: not-allowed;
+
+      .@{prefix}-title {
+        color: @tree-disabled-color;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  &-block-node {
+    .@{prefix}-node-content {
+      width: 100%;
+    }
+  }
+}
+
+// ============ 节点内容 ============
+.@{prefix}-node-content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 24px;
+  padding: 0 4px;
+  margin: 0;
+  cursor: pointer;
+  transition: background-color 0.2s, color 0.2s;
+
+  &:hover {
+    background-color: @tree-hover-bg;
+  }
+}
+
+// ============ 选中状态 ============
+.@{prefix}-treenode-selected {
+  > .@{prefix}-node-content {
+    background-color: @tree-selected-bg;
+    color: @tree-selected-color;
+
+    .@{prefix}-title {
+      color: @tree-selected-color;
+    }
+
+    &:hover {
+      background-color: @tree-selected-bg;
+    }
+  }
+}
+
+// ============ 展开/收起图标 ============
+.@{prefix}-switcher {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-right: 4px;
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 12px;
+  line-height: 1;
+  text-align: center;
+  vertical-align: top;
+  cursor: pointer;
+  transition: transform 0.2s, color 0.2s;
+  flex-shrink: 0;
+
+  &:hover {
+    color: rgba(0, 0, 0, 0.85);
+  }
+
+  &-open {
+    transform: rotate(90deg);
+  }
+
+  &-close {
+    transform: rotate(0deg);
+  }
+
+  &-noop {
+    cursor: default;
+    opacity: 0;
+  }
+}
+
+// ============ 复选框 ============
+.@{prefix}-checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  color: #fff;
+  font-size: 12px;
+  line-height: 1;
+  text-align: center;
+  vertical-align: middle;
+  background-color: #fff;
+  border: 1px solid @tree-border-color;
+  border-radius: 2px;
+  cursor: pointer;
+  transition: all 0.2s;
+  flex-shrink: 0;
+
+  &:hover {
+    border-color: #1890ff;
+  }
+
+  &-checked {
+    color: #fff;
+    background-color: #1890ff;
+    border-color: #1890ff;
+  }
+
+  &-disabled {
+    color: rgba(0, 0, 0, 0.25);
+    background-color: #f5f5f5;
+    border-color: @tree-border-color;
+    cursor: not-allowed;
+
+    &:hover {
+      border-color: @tree-border-color;
+    }
+  }
+}
+
+// ============ 图标 ============
+.@{prefix}-icon {
+  display: inline-flex;
+  align-items: center;
+  margin-right: 8px;
+  font-size: 14px;
+  flex-shrink: 0;
+}
+
+// ============ 标题 ============
+.@{prefix}-title {
+  flex: 1;
+  display: inline-block;
+  padding: 0 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: top;
+  color: inherit;
+}
+
+// ============ 子树 ============
+.@{prefix}-child-tree {
+  overflow: hidden;
+}
+
+// ============ 显示连接线 ============
+.@{prefix}-show-line {
+  .@{prefix}-treenode {
+    position: relative;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 12px;
+      width: 1px;
+      height: 100%;
+      background-color: @tree-border-color;
+      content: '';
+    }
+
+    &::after {
+      position: absolute;
+      top: 12px;
+      left: 12px;
+      width: 10px;
+      height: 1px;
+      background-color: @tree-border-color;
+      content: '';
+    }
+
+    &:last-child::before {
+      height: 12px;
+    }
+  }
+
+  .@{prefix}-switcher {
+    position: relative;
+    z-index: 1;
+    background-color: @tree-bg;
+  }
+}
+
+// ============ 暗色模式适配 ============
+[data-theme='dark'],
+[data-prefers-color-scheme='dark'],
+[data-prefers-color='dark'],
+html.dark,
+body.dark,
+.dark {
+  .@{prefix} {
+    background-color: #1f1f1f;
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  .@{prefix}-node-content {
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.08);
+    }
+  }
+
+  .@{prefix}-treenode-selected {
+    > .@{prefix}-node-content {
+      background-color: rgba(24, 144, 255, 0.2);
+      color: rgba(255, 255, 255, 0.85);
+
+      .@{prefix}-title {
+        color: rgba(255, 255, 255, 0.85);
+      }
+
+      &:hover {
+        background-color: rgba(24, 144, 255, 0.2);
+      }
+    }
+  }
+
+  .@{prefix}-treenode-disabled {
+    .@{prefix}-node-content {
+      color: rgba(255, 255, 255, 0.25);
+
+      .@{prefix}-title {
+        color: rgba(255, 255, 255, 0.25);
+      }
+    }
+  }
+
+  .@{prefix}-switcher {
+    color: rgba(255, 255, 255, 0.45);
+
+    &:hover {
+      color: rgba(255, 255, 255, 0.85);
+    }
+  }
+
+  .@{prefix}-checkbox {
+    background-color: #1f1f1f;
+    border-color: rgba(255, 255, 255, 0.3);
+
+    &:hover {
+      border-color: #1890ff;
+    }
+
+    &-checked {
+      background-color: #1890ff;
+      border-color: #1890ff;
+    }
+
+    &-disabled {
+      background-color: rgba(255, 255, 255, 0.08);
+      border-color: rgba(255, 255, 255, 0.15);
+      color: rgba(255, 255, 255, 0.25);
+    }
+  }
+
+  .@{prefix}-title {
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  .@{prefix}-show-line {
+    .@{prefix}-treenode {
+      &::before,
+      &::after {
+        background-color: rgba(255, 255, 255, 0.2);
+      }
+    }
+
+    .@{prefix}-switcher {
+      background-color: #1f1f1f;
+    }
+  }
+}

package/dist/esm/Watermark/index.d.ts

@@ -0,0 +1,41 @@
+import React, { ReactNode, CSSProperties } from 'react';
+import './style.less';
+/** Watermark 属性 */
+export interface WatermarkProps {
+    /** 水印内容（文字或图片 URL） */
+    content?: string | string[];
+    /** 图片地址（优先级高于 content） */
+    image?: string;
+    /** 水印宽度 */
+    width?: number;
+    /** 水印高度 */
+    height?: number;
+    /** 水印旋转角度 */
+    rotate?: number;
+    /** 水印透明度 */
+    opacity?: number;
+    /** 水印字体大小 */
+    fontSize?: number;
+    /** 水印字体颜色 */
+    fontColor?: string;
+    /** 水印字体 */
+    fontFamily?: string;
+    /** 水印之间的水平间距 */
+    gapX?: number;
+    /** 水印之间的垂直间距 */
+    gapY?: number;
+    /** 水印距离容器左边的偏移量 */
+    offsetLeft?: number;
+    /** 水印距离容器上边的偏移量 */
+    offsetTop?: number;
+    /** 水印层级 */
+    zIndex?: number;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 子元素 */
+    children?: ReactNode;
+}
+export declare const Watermark: React.FC<WatermarkProps>;
+export default Watermark;

package/dist/esm/Watermark/index.js

@@ -0,0 +1,349 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useEffect, useRef, useState, useMemo, useCallback } from 'react';
+import "./style.less";
+
+// ============ 类型定义 ============
+
+/** Watermark 属性 */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+// ============ 检查颜色是否包含透明度 ============
+var hasAlpha = function hasAlpha(color) {
+  return color.includes('rgba') || color.includes('hsla') || color.startsWith('#') && color.length === 9;
+};
+
+// ============ 生成水印 Canvas ============
+var generateWatermark = function generateWatermark(content, image, options) {
+  var canvas = document.createElement('canvas');
+  var ctx = canvas.getContext('2d');
+  if (!ctx) return '';
+  var width = options.width,
+    height = options.height,
+    rotate = options.rotate,
+    opacity = options.opacity,
+    fontSize = options.fontSize,
+    fontColor = options.fontColor,
+    fontFamily = options.fontFamily;
+  canvas.width = width;
+  canvas.height = height;
+  ctx.save();
+
+  // 如果 fontColor 已经包含透明度，就不使用 globalAlpha，避免双重透明度
+  // 否则使用 globalAlpha 来控制整体透明度
+  // 注意：如果 fontColor 已经有透明度，我们仍然需要应用 opacity，但要调整
+  if (hasAlpha(fontColor)) {
+    // fontColor 已经有透明度，直接使用，不叠加 globalAlpha
+    ctx.globalAlpha = 1;
+  } else {
+    // fontColor 没有透明度，使用 globalAlpha
+    ctx.globalAlpha = opacity;
+  }
+  ctx.translate(width / 2, height / 2);
+  ctx.rotate(rotate * Math.PI / 180);
+  ctx.translate(-width / 2, -height / 2);
+  if (image) {
+    var img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.src = image;
+    // 注意：这里需要等待图片加载完成，但为了简化，先返回空字符串
+    // 实际使用时应该使用 Promise 或回调
+    ctx.drawImage(img, 0, 0, width, height);
+  } else if (content) {
+    // 确保 fontColor 有效
+    if (!fontColor) {
+      ctx.restore();
+      return '';
+    }
+    ctx.fillStyle = fontColor;
+    ctx.font = "".concat(fontSize, "px ").concat(fontFamily);
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    var contents = Array.isArray(content) ? content : [content];
+    var lineHeight = fontSize * 1.2;
+    var totalHeight = contents.length * lineHeight;
+    var startY = (height - totalHeight) / 2 + lineHeight / 2;
+    contents.forEach(function (text, index) {
+      ctx.fillText(text, width / 2, startY + index * lineHeight);
+    });
+  }
+  ctx.restore();
+  return canvas.toDataURL();
+};
+
+// ============ 检测深色模式 ============
+var isDarkMode = function isDarkMode() {
+  if (typeof window === 'undefined') return false;
+
+  // 优先检查页面主题属性（最可靠）
+  if (document.documentElement.hasAttribute('data-theme') && document.documentElement.getAttribute('data-theme') === 'dark') {
+    return true;
+  }
+  if (document.documentElement.hasAttribute('data-prefers-color-scheme') && document.documentElement.getAttribute('data-prefers-color-scheme') === 'dark') {
+    return true;
+  }
+  if (document.documentElement.hasAttribute('data-prefers-color') && document.documentElement.getAttribute('data-prefers-color') === 'dark') {
+    return true;
+  }
+  if (document.documentElement.classList.contains('dark') || document.body.classList.contains('dark')) {
+    return true;
+  }
+
+  // 最后检查系统偏好（可能不准确，因为页面可能是亮色但系统是深色）
+  // 如果页面没有明确的主题标识，才使用系统偏好
+  // 这里暂时注释掉，优先使用页面主题
+  // if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+  //   return true;
+  // }
+
+  return false; // 默认亮色模式
+};
+
+// ============ Watermark 组件 ============
+export var Watermark = function Watermark(_ref) {
+  var _ref$content = _ref.content,
+    content = _ref$content === void 0 ? 'Watermark' : _ref$content,
+    image = _ref.image,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 120 : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 64 : _ref$height,
+    _ref$rotate = _ref.rotate,
+    rotate = _ref$rotate === void 0 ? -22 : _ref$rotate,
+    _ref$opacity = _ref.opacity,
+    opacity = _ref$opacity === void 0 ? 1 : _ref$opacity,
+    _ref$fontSize = _ref.fontSize,
+    fontSize = _ref$fontSize === void 0 ? 16 : _ref$fontSize,
+    fontColor = _ref.fontColor,
+    _ref$fontFamily = _ref.fontFamily,
+    fontFamily = _ref$fontFamily === void 0 ? 'sans-serif' : _ref$fontFamily,
+    _ref$gapX = _ref.gapX,
+    gapX = _ref$gapX === void 0 ? 100 : _ref$gapX,
+    _ref$gapY = _ref.gapY,
+    gapY = _ref$gapY === void 0 ? 100 : _ref$gapY,
+    _ref$offsetLeft = _ref.offsetLeft,
+    offsetLeft = _ref$offsetLeft === void 0 ? 0 : _ref$offsetLeft,
+    _ref$offsetTop = _ref.offsetTop,
+    offsetTop = _ref$offsetTop === void 0 ? 0 : _ref$offsetTop,
+    _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? 9 : _ref$zIndex,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    style = _ref.style,
+    children = _ref.children;
+  var containerRef = useRef(null);
+  var watermarkRef = useRef(null);
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    watermarkUrl = _useState2[0],
+    setWatermarkUrl = _useState2[1];
+  var _useState3 = useState(function () {
+      // 在客户端初始化时检测深色模式，默认为 false（亮色模式）
+      if (typeof window !== 'undefined') {
+        return isDarkMode();
+      }
+      return false; // 默认亮色模式
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    darkMode = _useState4[0],
+    setDarkMode = _useState4[1];
+
+  // 使用默认字体颜色（如果未指定），依赖于 darkMode state
+  var finalFontColor = useMemo(function () {
+    if (fontColor) {
+      return fontColor;
+    }
+    // 提高默认透明度，确保可见性
+    // 亮色模式使用深色（黑色），深色模式使用浅色（白色）
+    // 确保在客户端环境下正确检测，如果 darkMode 未初始化，默认使用亮色模式（黑色）
+    if (typeof window === 'undefined') {
+      return 'rgba(0, 0, 0, 0.35)'; // 服务端渲染默认亮色
+    }
+    var isDark = darkMode !== null && darkMode !== void 0 ? darkMode : isDarkMode();
+    return isDark ? 'rgba(255, 255, 255, 0.4)' : 'rgba(0, 0, 0, 0.35)';
+  }, [fontColor, darkMode]);
+
+  // 监听深色模式变化
+  useEffect(function () {
+    var checkDarkMode = function checkDarkMode() {
+      var newDarkMode = isDarkMode();
+      setDarkMode(newDarkMode);
+    };
+
+    // 立即检查一次，确保初始状态正确
+    checkDarkMode();
+
+    // 延迟再检查一次，确保 DOM 已完全加载
+    var timer = setTimeout(function () {
+      checkDarkMode();
+    }, 100);
+
+    // 监听主题变化
+    var observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-theme', 'data-prefers-color-scheme', 'data-prefers-color', 'class']
+    });
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ['class']
+    });
+
+    // 监听系统偏好变化
+    var mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    var handleChange = function handleChange() {
+      return checkDarkMode();
+    };
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener('change', handleChange);
+    } else {
+      // 兼容旧版浏览器
+      mediaQuery.addListener(handleChange);
+    }
+    return function () {
+      clearTimeout(timer);
+      observer.disconnect();
+      if (mediaQuery.removeEventListener) {
+        mediaQuery.removeEventListener('change', handleChange);
+      } else {
+        mediaQuery.removeListener(handleChange);
+      }
+    };
+  }, []);
+  useEffect(function () {
+    if (!content && !image) return;
+
+    // 确保 finalFontColor 已经计算好
+    if (!finalFontColor) {
+      // 如果 finalFontColor 还未计算好，使用默认的黑色（亮色模式）
+      var defaultColor = 'rgba(0, 0, 0, 0.35)';
+      var url = generateWatermark(content, undefined, {
+        width: width,
+        height: height,
+        rotate: rotate,
+        opacity: opacity,
+        fontSize: fontSize,
+        fontColor: defaultColor,
+        fontFamily: fontFamily
+      });
+      setWatermarkUrl(url);
+      return;
+    }
+
+    // 如果使用图片，需要等待图片加载
+    if (image) {
+      var img = new Image();
+      img.crossOrigin = 'anonymous';
+      img.onload = function () {
+        var canvas = document.createElement('canvas');
+        var ctx = canvas.getContext('2d');
+        if (!ctx) return;
+        canvas.width = width;
+        canvas.height = height;
+        ctx.save();
+        ctx.globalAlpha = opacity;
+        ctx.translate(width / 2, height / 2);
+        ctx.rotate(rotate * Math.PI / 180);
+        ctx.translate(-width / 2, -height / 2);
+        ctx.drawImage(img, 0, 0, width, height);
+        ctx.restore();
+        setWatermarkUrl(canvas.toDataURL());
+      };
+      img.onerror = function () {
+        // 图片加载失败，使用文字
+        var url = generateWatermark(content || 'Watermark', undefined, {
+          width: width,
+          height: height,
+          rotate: rotate,
+          opacity: opacity,
+          fontSize: fontSize,
+          fontColor: finalFontColor,
+          fontFamily: fontFamily
+        });
+        setWatermarkUrl(url);
+      };
+      img.src = image;
+    } else {
+      // 使用文字
+      var _url = generateWatermark(content, undefined, {
+        width: width,
+        height: height,
+        rotate: rotate,
+        opacity: opacity,
+        fontSize: fontSize,
+        fontColor: finalFontColor,
+        fontFamily: fontFamily
+      });
+      setWatermarkUrl(_url);
+    }
+  }, [content, image, width, height, rotate, opacity, fontSize, finalFontColor, fontFamily, darkMode]);
+
+  // 更新水印位置和大小
+  var updateWatermark = useCallback(function () {
+    if (!containerRef.current || !watermarkRef.current || !watermarkUrl) return;
+    var watermark = watermarkRef.current;
+
+    // 设置背景图片
+    var backgroundSize = "".concat(width + gapX, "px ").concat(height + gapY, "px");
+    var backgroundPosition = "".concat(offsetLeft, "px ").concat(offsetTop, "px");
+    watermark.style.backgroundImage = "url(".concat(watermarkUrl, ")");
+    watermark.style.backgroundSize = backgroundSize;
+    watermark.style.backgroundPosition = backgroundPosition;
+    watermark.style.backgroundRepeat = 'repeat';
+  }, [watermarkUrl, gapX, gapY, offsetLeft, offsetTop, width, height]);
+
+  // 监听容器大小变化
+  useEffect(function () {
+    if (!containerRef.current || !watermarkRef.current) return;
+    var resizeObserver = new ResizeObserver(function () {
+      if (!containerRef.current || !watermarkRef.current) return;
+      updateWatermark();
+    });
+    resizeObserver.observe(containerRef.current);
+    return function () {
+      resizeObserver.disconnect();
+    };
+  }, [updateWatermark]);
+  useEffect(function () {
+    if (watermarkUrl) {
+      updateWatermark();
+    }
+  }, [watermarkUrl, updateWatermark]);
+  var watermarkStyle = _objectSpread({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    pointerEvents: 'none',
+    zIndex: zIndex,
+    opacity: 1
+  }, style);
+  var containerClassNames = ['kage-watermark', className].filter(Boolean).join(' ');
+  return /*#__PURE__*/_jsxs("div", {
+    ref: containerRef,
+    className: containerClassNames,
+    style: {
+      position: 'relative'
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      ref: watermarkRef,
+      className: "kage-watermark-content",
+      style: watermarkStyle
+    }), children && /*#__PURE__*/_jsx("div", {
+      className: "kage-watermark-children",
+      children: children
+    })]
+  });
+};
+export default Watermark;