@pisell/materials 6.7.2 → 6.7.3

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

@@ -0,0 +1,185 @@
+/**
+ * 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

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

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

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

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

@@ -0,0 +1,203 @@
+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

@@ -0,0 +1,193 @@
+/**
+ * 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

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,41 @@
+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;