@ant-design/agentic-ui 2.0.10 → 2.0.12

package/dist/Plugins/chart/ScatterChart/style.js

@@ -0,0 +1,93 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/Plugins/chart/ScatterChart/style.ts
+import {
+  resetComponent,
+  useEditorStyleRegister
+} from "../../../Hooks/useStyle";
+var genStyle = (token) => {
+  return {
+    [`${token.componentCls}-container`]: {
+      // 散点图容器样式
+      [`${token.componentCls}-chart-wrapper`]: {
+        width: "100%",
+        height: "calc(100% - 120px)",
+        // 减去头部和筛选器的高度
+        minHeight: "300px",
+        // 最小高度
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        overflow: "hidden"
+        // 防止内容溢出
+      },
+      // 确保图表不会超出容器边界
+      canvas: {
+        maxWidth: "100% !important",
+        maxHeight: "100% !important"
+      },
+      // 移动端响应式样式
+      "@media (max-width: 768px)": {
+        // 移动端优化
+        [`${token.componentCls}-chart-wrapper`]: {
+          height: "calc(100% - 100px)",
+          // 移动端减少更多空间
+          minHeight: "250px"
+          // 移动端最小高度
+        },
+        // 移动端图表标题样式优化
+        [`${token.componentCls}-chart-title`]: {
+          fontSize: "14px",
+          marginBottom: "8px",
+          textAlign: "center"
+        },
+        // 移动端筛选器样式优化
+        [`${token.componentCls}-chart-filter`]: {
+          flexWrap: "wrap",
+          gap: "8px",
+          marginBottom: "12px",
+          [`${token.componentCls}-filter-button`]: {
+            fontSize: "12px",
+            padding: "6px 12px"
+          }
+        }
+      },
+      // 超小屏幕优化 (375px以下)
+      "@media (max-width: 375px)": {
+        padding: "8px",
+        [`${token.componentCls}-chart-wrapper`]: {
+          minHeight: "220px"
+        }
+      }
+    }
+  };
+};
+function useStyle(prefixCls) {
+  return useEditorStyleRegister("ScatterChart", (token) => {
+    const scatterChartToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [resetComponent(scatterChartToken), genStyle(scatterChartToken)];
+  });
+}
+export {
+  useStyle
+};

package/dist/Plugins/chart/components/ChartContainer/ChartContainer.js

@@ -0,0 +1,87 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/Plugins/chart/components/ChartContainer/ChartContainer.tsx
+import classNames from "classnames";
+import React from "react";
+import ChartErrorBoundary from "./ChartErrorBoundary";
+import { useStyle } from "./style";
+var ChartContainer = (_a) => {
+  var _b = _a, {
+    baseClassName,
+    className,
+    children,
+    style,
+    theme = "light",
+    variant = "default",
+    isMobile = false,
+    errorBoundary = { enabled: true }
+  } = _b, restProps = __objRest(_b, [
+    "baseClassName",
+    "className",
+    "children",
+    "style",
+    "theme",
+    "variant",
+    "isMobile",
+    "errorBoundary"
+  ]);
+  const { wrapSSR, hashId } = useStyle(baseClassName);
+  const combinedClassName = classNames(
+    baseClassName,
+    hashId,
+    {
+      [`${baseClassName}-light-theme`]: theme === "light",
+      [`${baseClassName}-dark-theme`]: theme === "dark",
+      [`${baseClassName}-mobile`]: isMobile,
+      [`${baseClassName}-desktop`]: !isMobile,
+      [`${baseClassName}-outline`]: variant === "outline",
+      [`${baseClassName}-borderless`]: variant === "borderless"
+    },
+    className
+  );
+  const containerContent = /* @__PURE__ */ React.createElement("div", __spreadValues({ className: combinedClassName, style }, restProps), children);
+  if ((errorBoundary == null ? void 0 : errorBoundary.enabled) !== false) {
+    return wrapSSR(
+      /* @__PURE__ */ React.createElement(
+        ChartErrorBoundary,
+        {
+          fallback: errorBoundary == null ? void 0 : errorBoundary.fallback,
+          onError: errorBoundary == null ? void 0 : errorBoundary.onError
+        },
+        containerContent
+      )
+    );
+  }
+  return wrapSSR(containerContent);
+};
+var ChartContainer_default = ChartContainer;
+export {
+  ChartContainer_default as default
+};

package/dist/Plugins/chart/components/ChartContainer/ChartErrorBoundary.js

@@ -0,0 +1,46 @@
+// src/Plugins/chart/components/ChartContainer/ChartErrorBoundary.tsx
+import { Result } from "antd";
+import React from "react";
+var ChartErrorBoundary = class extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false
+    };
+  }
+  static getDerivedStateFromError(_error) {
+    return {
+      hasError: true
+    };
+  }
+  componentDidCatch(error, errorInfo) {
+    if (this.props.onError) {
+      this.props.onError(error, errorInfo);
+    }
+    if (true) {
+      console.error("ChartErrorBoundary caught an error:", error, errorInfo);
+    }
+  }
+  render() {
+    const { hasError } = this.state;
+    const { children, fallback } = this.props;
+    if (hasError) {
+      if (fallback) {
+        return fallback;
+      }
+      return /* @__PURE__ */ React.createElement(
+        Result,
+        {
+          status: "error",
+          title: "图表渲染失败",
+          subTitle: "图表组件遇到了一个错误，请稍后重试"
+        }
+      );
+    }
+    return children;
+  }
+};
+var ChartErrorBoundary_default = ChartErrorBoundary;
+export {
+  ChartErrorBoundary_default as default
+};

package/dist/Plugins/chart/components/ChartContainer/ChartErrorBoundaryExample.js

@@ -0,0 +1,70 @@
+// src/Plugins/chart/components/ChartContainer/ChartErrorBoundaryExample.tsx
+import { Button, Result } from "antd";
+import React from "react";
+import ChartContainer from "./ChartContainer";
+var ErrorChart = () => {
+  throw new Error("模拟图表渲染错误");
+  return /* @__PURE__ */ React.createElement("div", null, "这个组件永远不会渲染");
+};
+var NormalChart = () => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        height: "200px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    },
+    /* @__PURE__ */ React.createElement("div", null, "正常的图表内容")
+  );
+};
+var ChartErrorBoundaryExample = () => {
+  return /* @__PURE__ */ React.createElement("div", { style: { padding: "20px" } }, /* @__PURE__ */ React.createElement("h2", null, "图表错误边界示例（antd Result 简洁版）"), /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "32px" } }, /* @__PURE__ */ React.createElement("h3", null, "1. 基础错误边界（antd Result 组件）"), /* @__PURE__ */ React.createElement(ChartContainer, { baseClassName: "error-demo-chart" }, /* @__PURE__ */ React.createElement(ErrorChart, null))), /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "32px" } }, /* @__PURE__ */ React.createElement("h3", null, "2. 自定义错误UI"), /* @__PURE__ */ React.createElement(
+    ChartContainer,
+    {
+      baseClassName: "custom-error-chart",
+      errorBoundary: {
+        enabled: true,
+        fallback: /* @__PURE__ */ React.createElement(
+          Result,
+          {
+            status: "warning",
+            title: "自定义错误提示",
+            subTitle: "这是一个自定义的错误界面",
+            extra: /* @__PURE__ */ React.createElement(Button, { type: "primary" }, "返回")
+          }
+        ),
+        onError: (error, errorInfo) => {
+          console.error("自定义错误处理:", error, errorInfo);
+        }
+      }
+    },
+    /* @__PURE__ */ React.createElement(ErrorChart, null)
+  )), /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "32px" } }, /* @__PURE__ */ React.createElement("h3", null, "3. 显示错误详情（开发模式）"), /* @__PURE__ */ React.createElement(
+    ChartContainer,
+    {
+      baseClassName: "debug-error-chart",
+      errorBoundary: {
+        enabled: true,
+        onError: (error, errorInfo) => {
+          console.error("调试模式错误:", error, errorInfo);
+        }
+      }
+    },
+    /* @__PURE__ */ React.createElement(ErrorChart, null)
+  )), /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "32px" } }, /* @__PURE__ */ React.createElement("h3", null, "4. 正常工作的图表"), /* @__PURE__ */ React.createElement(ChartContainer, { baseClassName: "normal-chart" }, /* @__PURE__ */ React.createElement(NormalChart, null))), /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "32px" } }, /* @__PURE__ */ React.createElement("h3", null, "5. 禁用错误边界"), /* @__PURE__ */ React.createElement("p", { style: { color: "#ff4d4f", fontSize: "14px", marginBottom: "16px" } }, "注意：禁用错误边界可能导致整个应用崩溃，一般不推荐"), /* @__PURE__ */ React.createElement(
+    ChartContainer,
+    {
+      baseClassName: "no-boundary-chart",
+      errorBoundary: { enabled: false }
+    },
+    /* @__PURE__ */ React.createElement(NormalChart, null)
+  )));
+};
+var ChartErrorBoundaryExample_default = ChartErrorBoundaryExample;
+export {
+  ChartErrorBoundaryExample,
+  ChartErrorBoundaryExample_default as default
+};

package/dist/Plugins/chart/components/ChartContainer/index.js

@@ -0,0 +1,7 @@
+// src/Plugins/chart/components/ChartContainer/index.ts
+import { default as default2 } from "./ChartContainer";
+import { default as default3 } from "./ChartErrorBoundary";
+export {
+  default2 as ChartContainer,
+  default3 as ChartErrorBoundary
+};

package/dist/Plugins/chart/components/ChartContainer/style.js

@@ -0,0 +1,90 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/Plugins/chart/components/ChartContainer/style.ts
+import {
+  useEditorStyleRegister
+} from "../../../../Hooks/useStyle";
+var genStyle = (token) => {
+  return {
+    [token.componentCls]: {
+      // 图表容器基础样式
+      position: "relative",
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      // 响应式边框样式
+      borderRadius: "6px",
+      padding: "12px",
+      // 浅色主题边框
+      "&&-light-theme": {
+        border: "1px solid #e8e8e8",
+        backgroundColor: "#fff"
+      },
+      // 深色主题无边框
+      "&&-dark-theme": {
+        border: "none",
+        backgroundColor: "#1a1a1a"
+      },
+      // 移动端适配
+      "&&-mobile": {
+        borderRadius: "6px",
+        padding: "12px",
+        margin: "0 auto",
+        maxWidth: "100%"
+      },
+      // 桌面端适配
+      "&&-desktop": {
+        borderRadius: "8px",
+        padding: "16px",
+        margin: "initial",
+        maxWidth: "none"
+      },
+      "&&-borderless": {
+        border: "none!important",
+        padding: 0
+      },
+      // 错误边界容器样式（简化版，使用 antd Result 组件）
+      "&&-error-boundary": {
+        // antd Result 组件已经有完善的样式，这里只需要基础容器样式
+        minHeight: "200px"
+      },
+      // 统计数据容器样式
+      ".chart-statistic-container": {
+        display: "flex",
+        gap: "16px",
+        marginBottom: "16px",
+        flexWrap: "wrap",
+        alignItems: "flex-start"
+      }
+    }
+  };
+};
+var useStyle = (baseClassName) => {
+  return useEditorStyleRegister("Chart-Container" + baseClassName, (token) => {
+    const containerToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${baseClassName}`
+    });
+    return [genStyle(containerToken)];
+  });
+};
+export {
+  useStyle
+};

package/dist/Plugins/chart/components/ChartFilter/ChartFilter.js

@@ -0,0 +1,101 @@
+// src/Plugins/chart/components/ChartFilter/ChartFilter.tsx
+import { ChevronDown } from "@sofa-design/icons";
+import { Button, ConfigProvider, Dropdown, Segmented } from "antd";
+import classNames from "classnames";
+import { default as React, useContext } from "react";
+import { I18nContext } from "../../../../I18n";
+import { useStyle } from "./style";
+var ChartFilter = ({
+  filterOptions,
+  selectedFilter,
+  onFilterChange,
+  customOptions,
+  selectedCustomSelection,
+  onSelectionChange,
+  className = "",
+  theme = "light",
+  variant = "default"
+}) => {
+  var _a, _b;
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const i18n = useContext(I18nContext);
+  const prefixCls = getPrefixCls("chart-filter");
+  const { wrapSSR, hashId } = useStyle(prefixCls);
+  const handleRegionChange = (region) => {
+    if (onSelectionChange) {
+      onSelectionChange(region);
+    }
+  };
+  const hasMain = Array.isArray(filterOptions) && filterOptions.length > 1;
+  const hasSecondary = Array.isArray(customOptions) && customOptions.length > 1;
+  if (!hasMain && !hasSecondary) {
+    return null;
+  }
+  if (!filterOptions || filterOptions.length < 2) {
+    return null;
+  }
+  return wrapSSR(
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: classNames(
+          prefixCls,
+          `${prefixCls}-${theme}`,
+          `${prefixCls}-${variant}`,
+          hashId,
+          className
+        )
+      },
+      customOptions && customOptions.length > 1 && /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-region-filter`, hashId) }, /* @__PURE__ */ React.createElement(
+        Dropdown,
+        {
+          menu: {
+            items: customOptions.map((item) => {
+              return {
+                key: item.key,
+                label: item.label,
+                disabled: item.key === selectedCustomSelection
+              };
+            }),
+            onClick: ({ key }) => handleRegionChange(key)
+          },
+          trigger: ["click"],
+          getPopupContainer: () => document.body
+        },
+        /* @__PURE__ */ React.createElement(
+          Button,
+          {
+            type: "default",
+            size: "small",
+            className: classNames(`${prefixCls}-region-dropdown-btn`, hashId)
+          },
+          /* @__PURE__ */ React.createElement("span", null, ((_a = customOptions.find((r) => r.key === selectedCustomSelection)) == null ? void 0 : _a.label) || ((_b = i18n == null ? void 0 : i18n.locale) == null ? void 0 : _b.all) || "全部"),
+          /* @__PURE__ */ React.createElement(
+            ChevronDown,
+            {
+              className: classNames(`${prefixCls}-dropdown-icon`, hashId)
+            }
+          )
+        )
+      )),
+      filterOptions && filterOptions.length > 1 && /* @__PURE__ */ React.createElement(
+        Segmented,
+        {
+          options: filterOptions || [],
+          value: selectedFilter,
+          size: "small",
+          className: classNames(
+            `${prefixCls}-segmented-filter`,
+            "custom-segmented",
+            hashId
+          ),
+          onChange: (value) => onFilterChange == null ? void 0 : onFilterChange(value)
+        }
+      )
+    )
+  );
+};
+var ChartFilter_default = ChartFilter;
+export {
+  ChartFilter_default as default
+};

package/dist/Plugins/chart/components/ChartFilter/style.js

@@ -0,0 +1,166 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/Plugins/chart/components/ChartFilter/style.ts
+import {
+  resetComponent,
+  useEditorStyleRegister
+} from "../../../../Hooks/useStyle";
+var genStyle = (token) => {
+  return {
+    [token.componentCls]: {
+      padding: "12px 0",
+      display: "flex",
+      gap: "8px",
+      justifyContent: "flex-start",
+      alignItems: "center",
+      flexWrap: "wrap",
+      [`${token.componentCls}-region-filter`]: {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        [`${token.componentCls}-region-dropdown-btn`]: {
+          border: "1px solid #d9d9d9",
+          borderRadius: "6px",
+          backgroundColor: "#fff",
+          color: "#666",
+          fontSize: "14px",
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+          minWidth: "80px",
+          justifyContent: "space-between",
+          height: "32px",
+          padding: "0 12px",
+          "&:hover": {
+            borderColor: "#8c8c8c",
+            color: "#343a45",
+            backgroundColor: "#f9f9f9",
+            [`${token.componentCls}-dropdown-icon`]: {
+              color: "#8c8c8c"
+            }
+          },
+          [`${token.componentCls}-dropdown-icon`]: {
+            fontSize: "12px",
+            color: "#666"
+          }
+        }
+      },
+      [`${token.componentCls}-segmented-filter`]: {
+        backgroundColor: "#f5f5f5",
+        height: "32px",
+        display: "flex",
+        alignItems: "center",
+        borderRadius: "8px",
+        "&.custom-segmented": {
+          ".ant-segmented-item": {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            ".ant-segmented-item-label": {
+              fontFamily: "PingFang SC",
+              fontSize: "13px",
+              fontWeight: "normal",
+              lineHeight: "22px",
+              letterSpacing: "0em"
+            }
+          },
+          ".ant-segmented-group": {
+            height: "30px"
+          },
+          ".ant-segmented-item-selected": {
+            borderRadius: "8px",
+            backgroundColor: "#fff !important",
+            border: "1px solid #d9d9d9 !important",
+            boxShadow: "0px 0px 1px 0px rgba(0, 19, 41, 0.2), 0px 1.5px 4px -1px rgba(0, 19, 41, 0.04)",
+            ".ant-segmented-item-label": {
+              fontFamily: "PingFang SC",
+              fontSize: "13px",
+              fontWeight: 600,
+              lineHeight: "20px",
+              letterSpacing: "0em",
+              fontVariationSettings: '"opsz" auto',
+              /* gray/gray-文本-默认 */
+              /* 样式描述：--gray-a12 */
+              color: "#343a45 !important"
+            }
+          }
+        }
+      },
+      // Dark theme styles
+      "&-dark": {
+        [`${token.componentCls}-region-filter`]: {
+          [`${token.componentCls}-region-dropdown-btn`]: {
+            border: "1px solid #434343",
+            backgroundColor: "#1a1a1a",
+            color: "rgba(255, 255, 255, 0.85)",
+            "&:hover": {
+              borderColor: "#595959",
+              color: "#fff",
+              backgroundColor: "#262626",
+              [`${token.componentCls}-dropdown-icon`]: {
+                color: "rgba(255, 255, 255, 0.8)"
+              }
+            },
+            [`${token.componentCls}-dropdown-icon`]: {
+              color: "rgba(255, 255, 255, 0.65)"
+            }
+          }
+        },
+        [`${token.componentCls}-segmented-filter`]: {
+          backgroundColor: "#262626",
+          "&.custom-segmented": {
+            ".ant-segmented-item": {
+              ".ant-segmented-item-label": {
+                color: "rgba(255, 255, 255, 0.65)"
+              }
+            },
+            ".ant-segmented-item-selected": {
+              backgroundColor: "#fff !important",
+              border: "1px solid #434343 !important",
+              ".ant-segmented-item-label": {
+                color: "#343a45 !important"
+              }
+            },
+            ".ant-segmented-thumb": {
+              backgroundColor: "#343a45 !important"
+            }
+          }
+        }
+      },
+      // Compact variant for toolbar integration
+      "&-compact": {
+        padding: "0",
+        flexWrap: "nowrap"
+      }
+    }
+  };
+};
+function useStyle(prefixCls) {
+  return useEditorStyleRegister("ChartFilter", (token) => {
+    const chartFilterToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [resetComponent(chartFilterToken), genStyle(chartFilterToken)];
+  });
+}
+export {
+  useStyle
+};