@pisell/materials 6.7.3 → 6.7.4

package/es/components/PisellCards/components/TabCard/TabCard.less

@@ -1,185 +0,0 @@
-/**
- * TabCard 组件样式
- */
-
-.tab-card {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-  user-select: none;
-  outline: none;
-  scroll-snap-align: start;
-
-  // 默认样式
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  color: rgba(0, 0, 0, 0.85);
-
-  // hover 状态
-  &:hover:not(&--disabled):not(&--loading) {
-    background-color: rgba(0, 0, 0, 0.04);
-  }
-
-  // focus 状态（键盘导航）
-  &:focus-visible {
-    outline: 2px solid #1890ff;
-    outline-offset: 2px;
-  }
-
-  // 激活状态
-  &--active,
-  &[data-active='true'] {
-    color: #1890ff;
-    border-color: #1890ff;
-    background-color: #e6f7ff;
-    font-weight: 500;
-
-    &:hover {
-      background-color: #bae7ff;
-    }
-  }
-
-  // 禁用状态
-  &--disabled,
-  &[data-disabled='true'] {
-    cursor: not-allowed;
-    opacity: 0.6;
-    color: rgba(0, 0, 0, 0.25);
-
-    &:hover {
-      background-color: transparent;
-    }
-  }
-
-  // 加载状态
-  &--loading,
-  &[data-loading='true'] {
-    cursor: wait;
-    opacity: 0.8;
-  }
-
-  // 内容容器
-  &__content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-  }
-
-  // 图标
-  &__icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 16px;
-    line-height: 1;
-  }
-
-  // 标签文本包装器
-  &__label-wrapper {
-    display: flex;
-    align-items: center;
-    line-height: 1;
-  }
-
-  // 标签文本
-  &__label {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  // extra 内容
-  &__extra {
-    position: absolute;
-    top: 0;
-    right: 0;
-    pointer-events: none;
-  }
-
-  // ===== 尺寸变体 =====
-
-  // 小尺寸
-  &--small {
-    padding: 4px 8px;
-    font-size: 12px;
-    min-height: 24px;
-
-    .tab-card__icon {
-      font-size: 14px;
-    }
-
-    .tab-card__content {
-      gap: 4px;
-    }
-  }
-
-  // 中尺寸（默认）
-  &--medium {
-    padding: 8px 16px;
-    font-size: 14px;
-    min-height: 32px;
-
-    .tab-card__icon {
-      font-size: 16px;
-    }
-
-    .tab-card__content {
-      gap: 8px;
-    }
-  }
-
-  // 大尺寸
-  &--large {
-    padding: 12px 24px;
-    font-size: 16px;
-    min-height: 40px;
-
-    .tab-card__icon {
-      font-size: 18px;
-    }
-
-    .tab-card__content {
-      gap: 12px;
-    }
-  }
-
-  // ===== 布局方向 =====
-
-  // 水平布局（默认）
-  &--horizontal {
-    .tab-card__content {
-      flex-direction: row;
-    }
-  }
-
-  // 垂直布局
-  &--vertical {
-    .tab-card__content {
-      flex-direction: column;
-      gap: 4px;
-    }
-
-    .tab-card__icon {
-      margin-bottom: 4px;
-    }
-
-    // 垂直布局下的尺寸调整
-    &.tab-card--small {
-      padding: 8px 12px;
-    }
-
-    &.tab-card--medium {
-      padding: 12px 16px;
-    }
-
-    &.tab-card--large {
-      padding: 16px 20px;
-    }
-  }
-}

package/es/components/PisellCards/components/TabCard/index.js

@@ -1,4 +0,0 @@
-/**
- * TabCard 标签卡片组件
- */
-export { default } from "./TabCard";

package/es/components/PisellCards/components/TabCard/types.js

@@ -1 +0,0 @@
-export {};

package/es/components/PisellCards/components/TextCard/TextCard.js

@@ -1,203 +0,0 @@
-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); }
-var _excluded = ["text", "variant", "size", "clickable", "prefixIcon", "suffixIcon", "iconConfig", "tag", "tagConfig", "badge", "prefixSlot", "suffixSlot", "textConfig", "widthMode", "width", "maxWidth", "onClick", "render", "active", "disabled", "loading", "className", "style", "children", "dataSource", "textAlign"];
-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 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 _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, { useMemo, useEffect, useCallback } from 'react';
-import classNames from 'classnames';
-import { TextContent, IconWrapper, BadgeWrapper } from "./components";
-import "./TextCard.less";
-
-/**
- * TextCard 文本卡片组件
- * 用于展示带图标、文本、标签和角标的信息项，常用于 Tab 项、列表项等
- *
- * @example
- * ```tsx
- * // 基础用法
- * <TextCard text="Tab title" />
- *
- * // 带图标和角标
- * <TextCard
- *   text="Password"
- *   prefixIcon={<BellIcon />}
- *   badge={{ type: 'number', content: 99 }}
- *   variant="filled"
- *   active={{ value: true }}
- * />
- * ```
- */
-var TextCard = function TextCard(props) {
-  var text = props.text,
-    _props$variant = props.variant,
-    variant = _props$variant === void 0 ? 'text' : _props$variant,
-    _props$size = props.size,
-    size = _props$size === void 0 ? 'default' : _props$size,
-    _props$clickable = props.clickable,
-    clickable = _props$clickable === void 0 ? true : _props$clickable,
-    prefixIcon = props.prefixIcon,
-    suffixIcon = props.suffixIcon,
-    iconConfig = props.iconConfig,
-    tag = props.tag,
-    tagConfig = props.tagConfig,
-    badge = props.badge,
-    prefixSlot = props.prefixSlot,
-    suffixSlot = props.suffixSlot,
-    textConfig = props.textConfig,
-    _props$widthMode = props.widthMode,
-    widthMode = _props$widthMode === void 0 ? 'auto' : _props$widthMode,
-    width = props.width,
-    _props$maxWidth = props.maxWidth,
-    maxWidth = _props$maxWidth === void 0 ? 400 : _props$maxWidth,
-    onClick = props.onClick,
-    render = props.render,
-    active = props.active,
-    disabled = props.disabled,
-    loading = props.loading,
-    className = props.className,
-    style = props.style,
-    children = props.children,
-    dataSource = props.dataSource,
-    textAlign = props.textAlign,
-    restProps = _objectWithoutProperties(props, _excluded);
-  /**
-   * 合并状态样式
-   * 优先级：loading > disabled > active
-   */
-  var mergedStyle = useMemo(function () {
-    var finalStyle = _objectSpread({}, style);
-
-    // 宽度处理
-    if (widthMode === 'auto') {
-      finalStyle.width = 'auto';
-      finalStyle.maxWidth = maxWidth;
-    } else if (widthMode === 'fixed' && width) {
-      finalStyle.width = width;
-    } else if (widthMode === 'full') {
-      finalStyle.width = '100%';
-      finalStyle.minWidth = 28;
-    }
-
-    // 状态样式合并
-    if (loading !== null && loading !== void 0 && loading.value && loading !== null && loading !== void 0 && loading.style) {
-      finalStyle = _objectSpread(_objectSpread({}, finalStyle), loading.style);
-    } else if (disabled !== null && disabled !== void 0 && disabled.value && disabled !== null && disabled !== void 0 && disabled.style) {
-      finalStyle = _objectSpread(_objectSpread({}, finalStyle), disabled.style);
-    } else if (active !== null && active !== void 0 && active.value && active !== null && active !== void 0 && active.style) {
-      finalStyle = _objectSpread(_objectSpread({}, finalStyle), active.style);
-    }
-    return finalStyle;
-  }, [style, active, disabled, loading, widthMode, width, maxWidth]);
-
-  /**
-   * 合并状态类名
-   */
-  var mergedClassName = useMemo(function () {
-    return classNames('text-card', "text-card--".concat(variant), "text-card--".concat(size), className, {
-      'text-card--active': active === null || active === void 0 ? void 0 : active.value,
-      'text-card--disabled': disabled === null || disabled === void 0 ? void 0 : disabled.value,
-      'text-card--loading': loading === null || loading === void 0 ? void 0 : loading.value,
-      'text-card--clickable': clickable && !(disabled !== null && disabled !== void 0 && disabled.value) && !(loading !== null && loading !== void 0 && loading.value)
-    }, (active === null || active === void 0 ? void 0 : active.value) && (active === null || active === void 0 ? void 0 : active.className), (disabled === null || disabled === void 0 ? void 0 : disabled.value) && (disabled === null || disabled === void 0 ? void 0 : disabled.className), (loading === null || loading === void 0 ? void 0 : loading.value) && (loading === null || loading === void 0 ? void 0 : loading.className));
-  }, [className, variant, size, active, disabled, loading, clickable]);
-
-  /**
-   * 处理点击事件
-   */
-  var handleClick = useCallback(function (event) {
-    // 禁用或加载状态下不触发点击
-    if (disabled !== null && disabled !== void 0 && disabled.value || loading !== null && loading !== void 0 && loading.value || !clickable) {
-      event.preventDefault();
-      return;
-    }
-
-    // 触发 active.onChange（如果提供且未激活）
-    if (active !== null && active !== void 0 && active.onChange && !active.value) {
-      active.onChange(true);
-    }
-
-    // 触发 onClick
-    if (onClick) {
-      onClick(event);
-    }
-  }, [onClick, active, disabled, loading, clickable]);
-
-  /**
-   * 渲染状态的 extra 内容
-   * 优先级：loading > disabled > active
-   */
-  var renderExtra = useCallback(function () {
-    if (loading !== null && loading !== void 0 && loading.value && loading !== null && loading !== void 0 && loading.extra) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "text-card__extra"
-      }, loading.extra);
-    }
-    if (disabled !== null && disabled !== void 0 && disabled.value && disabled !== null && disabled !== void 0 && disabled.extra) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "text-card__extra"
-      }, disabled.extra);
-    }
-    if (active !== null && active !== void 0 && active.value && active !== null && active !== void 0 && active.extra) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "text-card__extra"
-      }, active.extra);
-    }
-    return null;
-  }, [active, disabled, loading]);
-  useEffect(function () {
-    document.body.id = 'body';
-  }, []);
-
-  /**
-   * 渲染主内容
-   */
-  var renderContent = useCallback(function () {
-    // 如果提供了自定义渲染函数，使用自定义渲染
-    if (render) {
-      return render(props);
-    }
-    return /*#__PURE__*/React.createElement(React.Fragment, null, prefixSlot || prefixIcon && /*#__PURE__*/React.createElement(IconWrapper, {
-      icon: prefixIcon,
-      config: iconConfig,
-      position: "prefix"
-    }), /*#__PURE__*/React.createElement(TextContent, {
-      text: text,
-      textConfig: textConfig,
-      active: active
-    }), suffixSlot || /*#__PURE__*/React.createElement(React.Fragment, null, tag && /*#__PURE__*/React.createElement("div", {
-      className: "text-card__tag",
-      style: tagConfig === null || tagConfig === void 0 ? void 0 : tagConfig.style
-    }, tag), suffixIcon && /*#__PURE__*/React.createElement(IconWrapper, {
-      icon: suffixIcon,
-      config: iconConfig,
-      position: "suffix"
-    })));
-  }, [render, props, prefixSlot, prefixIcon, iconConfig, text, textConfig, suffixSlot, tag, tagConfig, suffixIcon, active]);
-  return /*#__PURE__*/React.createElement(BadgeWrapper, {
-    badge: badge
-  }, /*#__PURE__*/React.createElement("div", _extends({
-    className: mergedClassName,
-    style: mergedStyle,
-    onClick: handleClick,
-    "data-active": active === null || active === void 0 ? void 0 : active.value,
-    "data-disabled": disabled === null || disabled === void 0 ? void 0 : disabled.value,
-    "data-loading": loading === null || loading === void 0 ? void 0 : loading.value,
-    role: "button",
-    "aria-disabled": disabled === null || disabled === void 0 ? void 0 : disabled.value,
-    tabIndex: disabled !== null && disabled !== void 0 && disabled.value ? -1 : 0
-  }, restProps), renderContent(), renderExtra(), children));
-};
-
-/**
- * Provider 包装器
- * 兼容 PisellCards 系统的 props 传递方式
- */
-var Provider = function Provider(props) {
-  return /*#__PURE__*/React.createElement(TextCard, _extends({}, props === null || props === void 0 ? void 0 : props.props, props));
-};
-export default Provider;

package/es/components/PisellCards/components/TextCard/TextCard.less

@@ -1,193 +0,0 @@
-/**
- * TextCard 文本卡片组件样式
- */
-
-.text-card {
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  box-sizing: border-box;
-  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-  cursor: default;
-  user-select: none;
-
-  // ========== 可点击状态 ==========
-  &--clickable {
-    cursor: pointer;
-
-    &:active {
-      transform: scale(0.98);
-    }
-  }
-
-  // ========== 尺寸变体 ==========
-  &--small {
-    padding: 8px 12px;
-    font-size: 14px;
-    line-height: 22px;
-    gap: 8px;
-    border-radius: 4px;
-  }
-
-  &--default {
-    padding: 12px 16px;
-    font-size: 14px;
-    line-height: 22px;
-    gap: 12px;
-    border-radius: 6px;
-  }
-
-  &--large {
-    padding: 16px 20px;
-    font-size: 16px;
-    line-height: 24px;
-    gap: 16px;
-    border-radius: 8px;
-  }
-
-  // ========== 样式变体 1: 纯文本 ==========
-  &--text {
-    background: transparent;
-    border: none;
-
-    &.text-card--active {
-      color: var(--theme-color, #7F56D9);
-      font-weight: 600;
-    }
-
-    &:hover:not(.text-card--disabled):not(.text-card--loading).text-card--clickable {
-      color: var(--theme-color-light, #B692F6);
-    }
-  }
-
-  // ========== 样式变体 2: 圆角背景（填充） ==========
-  &--filled {
-    border-radius: 40px;
-
-    &.text-card--active {
-      background: var(--theme-color, #7F56D9);
-      color: #fff;
-    }
-
-    &:hover:not(.text-card--disabled):not(.text-card--loading):not(.text-card--active).text-card--clickable {
-      background: #F2F4F7;
-    }
-  }
-
-  // ========== 样式变体 3: 浅色背景 ==========
-  &--light {
-    &.text-card--active {
-      background: var(--theme-color-bg, #F9F5FF);
-      color: var(--theme-color, #7F56D9);
-      font-weight: 600;
-    }
-
-    &:hover:not(.text-card--disabled):not(.text-card--loading):not(.text-card--active).text-card--clickable {
-      background: #F2F4F7;
-    }
-  }
-
-  // ========== 样式变体 4: 描边 ==========
-  &--outlined {
-    background: transparent;
-    color: var(--Gray-600, #475467);
-
-    &.text-card--active {
-      color: #000;
-      background: var(--Gray-100, #F2F4F7);
-    }
-
-    &:hover:not(.text-card--disabled):not(.text-card--loading):not(.text-card--active).text-card--clickable {
-      color: #000;
-      background: var(--Gray-50, #F9FAFB);
-    }
-  }
-
-  // ========== 样式变体 5: 渐变 ==========
-  &--gradient {
-    background: transparent;
-    color: var(--Gray-500, #667085);
-
-    &.text-card--active {
-      border-radius: 6px;
-      background: var(--Base-White, #FFF);
-      /* Shadow/sm */
-      box-shadow: 0 1px 3px 0 rgba(16, 24, 40, 0.10), 0 1px 2px 0 rgba(16, 24, 40, 0.06);
-      color: var(--Gray-900, #101828);
-    }
-
-    &:hover:not(.text-card--disabled):not(.text-card--loading):not(.text-card--active).text-card--clickable {
-      color: #000;
-    }
-  }
-
-  // ========== 样式变体 6: 虚线 ==========
-  &--dashed {
-    background: transparent;
-    color: var(--Gray-600, #475467);
-
-    &.text-card--active {
-      border-radius: 8px 8px 0 0;
-      border-top: 1px solid var(--Gray-300, #D0D5DD);
-      border-right: 1px solid var(--Gray-300, #D0D5DD);
-      border-left: 1px solid var(--Gray-300, #D0D5DD);
-      background: var(--Base-White, #FFF);
-      color: var(--theme-color, #7F56D9);
-    }
-
-    &:hover:not(.text-card--disabled):not(.text-card--loading):not(.text-card--active).text-card--clickable {
-      color: var(--Base-Black, #000);
-    }
-  }
-
-  // ========== 状态样式 ==========
-  &--disabled {
-    cursor: not-allowed;
-    opacity: 0.4;
-    color: rgba(0, 0, 0, 0.25);
-  }
-
-  &--loading {
-    cursor: wait;
-    opacity: 0.6;
-  }
-
-  // ========== 内容容器 ==========
-  &__content {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    min-width: 0;
-  }
-
-  // ========== 图标容器 ==========
-  &__icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    line-height: 1;
-
-    &--prefix {
-      // 前置图标样式
-    }
-
-    &--suffix {
-      // 后置图标样式
-    }
-  }
-
-  // ========== 标签容器 ==========
-  &__tag {
-    display: inline-flex;
-    align-items: center;
-    flex-shrink: 0;
-  }
-
-  // ========== Extra 容器 ==========
-  &__extra {
-    margin-left: auto;
-    flex-shrink: 0;
-  }
-}

package/es/components/PisellCards/components/TextCard/components/BadgeWrapper.js

@@ -1,70 +0,0 @@
-import React from 'react';
-import { Badge } from 'antd';
-/**
- * BadgeWrapper 角标包装组件
- * 负责角标的渲染和定位，支持红点、数字、文本三种类型
- *
- * @example
- * ```tsx
- * // 红点角标
- * <BadgeWrapper badge={{ type: 'dot' }}>
- *   <TextCard text="Item" />
- * </BadgeWrapper>
- *
- * // 数字角标
- * <BadgeWrapper badge={{ type: 'number', content: 99 }}>
- *   <TextCard text="Item" />
- * </BadgeWrapper>
- *
- * // 文本角标
- * <BadgeWrapper badge={{ type: 'text', content: 'New' }}>
- *   <TextCard text="Item" />
- * </BadgeWrapper>
- * ```
- */
-var BadgeWrapper = function BadgeWrapper(props) {
-  var badge = props.badge,
-    children = props.children;
-
-  // 如果没有角标配置，直接返回子元素
-  if (!badge) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
-  }
-  var _badge$type = badge.type,
-    type = _badge$type === void 0 ? 'dot' : _badge$type,
-    content = badge.content,
-    _badge$position = badge.position,
-    position = _badge$position === void 0 ? 'top-right' : _badge$position,
-    offset = badge.offset,
-    color = badge.color,
-    style = badge.style;
-
-  /**
-   * 根据角标类型渲染不同的 Badge
-   */
-  var renderBadge = function renderBadge() {
-    // 红点类型
-    if (type === 'dot') {
-      return /*#__PURE__*/React.createElement(Badge, {
-        dot: true,
-        color: color,
-        offset: offset,
-        style: style
-      }, children);
-    }
-
-    // 数字或文本类型
-    if (type === 'number' || type === 'text') {
-      return /*#__PURE__*/React.createElement(Badge, {
-        count: content,
-        color: color,
-        offset: offset,
-        style: style,
-        showZero: type === 'number'
-      }, children);
-    }
-    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
-  };
-  return renderBadge();
-};
-export default BadgeWrapper;

package/es/components/PisellCards/components/TextCard/components/IconWrapper.js

@@ -1,41 +0,0 @@
-import React, { useMemo } from 'react';
-import classNames from 'classnames';
-/**
- * IconWrapper 图标包装组件
- * 负责统一图标渲染逻辑，支持自定义图标大小和颜色
- *
- * @example
- * ```tsx
- * <IconWrapper
- *   icon={<BellIcon />}
- *   position="prefix"
- *   config={{ size: 16, color: '#666' }}
- * />
- * ```
- */
-var IconWrapper = function IconWrapper(props) {
-  var icon = props.icon,
-    config = props.config,
-    position = props.position,
-    className = props.className;
-
-  /**
-   * 计算图标样式
-   * 支持自定义大小和颜色
-   */
-  var iconStyle = useMemo(function () {
-    var style = {};
-    if (config !== null && config !== void 0 && config.size) {
-      style.fontSize = config.size;
-    }
-    if (config !== null && config !== void 0 && config.color) {
-      style.color = config.color;
-    }
-    return style;
-  }, [config === null || config === void 0 ? void 0 : config.size, config === null || config === void 0 ? void 0 : config.color]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames('text-card__icon', "text-card__icon--".concat(position), className),
-    style: iconStyle
-  }, icon);
-};
-export default IconWrapper;