rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-2025031415

package/Uploader/styles/index.less

@@ -7,6 +7,10 @@
 // ----------------------
 
 .rs-uploader {
+  --rs-uploader-file-item-icon-font-size: 1.375rem;
+  --rs-uploader-file-item-icon-margin: 0.75rem;
+  --rs-uploader-file-item-icon-margin-plus: 1.375rem;
+
   &-trigger {
     input[type='file'] {
       position: absolute !important;
@@ -33,9 +37,9 @@
 
   &-file-item-icon-reupload {
     cursor: pointer;
-    margin-left: 10px;
+    margin-inline-start: 10px;
     color: var(--rs-text-primary);
-    font-size: 12px;
+    font-size: var(--rs-font-size-xs);
   }
 }
 
@@ -67,7 +71,7 @@
       display: inline-flex;
       align-items: center;
       top: @padding-y;
-      left: @padding-x;
+      inset-inline-start: @padding-x;
       width: @line-height-computed;
       height: @line-height-computed;
       justify-content: center;
@@ -75,7 +79,7 @@
 
     &-icon-loading {
       .rs-uploader-file-item-icon {
-        .set-side-length(@loader-default-diameter);
+        .loader-size(@loader-default-diameter);
         .loader-spin();
 
         > svg {
@@ -113,9 +117,9 @@
 
     &-btn-remove {
       position: absolute;
-      font-size: 14px;
+      font-size: var(--rs-font-size-sm);
       top: 12px;
-      right: @padding-x;
+      inset-inline-end: @padding-x;
       color: var(--rs-text-secondary);
       cursor: pointer;
       padding: 0;
@@ -134,7 +138,7 @@
       position: absolute;
       bottom: 0;
       width: 100%;
-      left: 0;
+      inset-inline-start: 0;
 
       &-bar {
         height: 2px;
@@ -165,7 +169,7 @@
     margin: 0;
     padding: 0;
     border: 2px dotted var(--rs-border-primary);
-    border-radius: @border-radius;
+    border-radius: var(--rs-radius-md);
     margin-top: @uploader-picture-item-gap;
   }
 
@@ -180,7 +184,7 @@
 
   .rs-uploader-trigger,
   .rs-uploader-file-item {
-    float: left;
+    float: inline-start;
   }
 
   .rs-uploader-file-items {
@@ -192,10 +196,10 @@
     height: @uploader-picture-side-length;
     overflow: hidden;
     background-color: var(--rs-uploader-item-bg);
-    border-radius: @border-radius;
+    border-radius: var(--rs-radius-md);
     position: relative;
     margin-top: @uploader-picture-item-gap;
-    margin-right: @uploader-picture-item-gap;
+    margin-inline-end: @uploader-picture-item-gap;
 
     &-preview {
       position: relative;
@@ -209,15 +213,15 @@
       }
 
       .rs-uploader-file-item-icon {
-        font-size: @uploader-file-item-icon-font-size;
-        margin: @uploader-file-item-icon-margin-plus;
+        font-size: var(--rs-uploader-file-item-icon-font-size);
+        margin: var(--rs-uploader-file-item-icon-margin-plus);
       }
     }
 
     &-status {
       position: absolute;
       top: 0;
-      left: 0;
+      inset-inline-start: 0;
       width: @uploader-picture-side-length;
       height: @uploader-picture-side-length;
       text-align: center;
@@ -248,13 +252,13 @@
       cursor: pointer;
       position: absolute;
       top: 3px;
-      right: 3px;
+      inset-inline-end: 3px;
       width: @uploader-picture-remove-button-radius;
       height: @uploader-picture-remove-button-radius;
       line-height: @uploader-picture-remove-button-radius;
       text-align: center;
       background-color: var(--rs-uploader-overlay-bg);
-      border-radius: 50%;
+      border-radius: var(--rs-radius-full);
       visibility: hidden;
       opacity: 0;
       transition: 0.2s opacity;
@@ -283,12 +287,12 @@
       background-color: var(--rs-uploader-overlay-bg);
       position: absolute;
       top: 0;
-      left: 0;
+      inset-inline-start: 0;
       z-index: @zindex-uploader-picture-loading-wrapper;
       text-align: center;
 
       .rs-uploader-file-item-icon {
-        .set-side-length(@loader-default-diameter);
+        .loader-size(@loader-default-diameter);
         .loader-spin();
 
         display: inline-block;
@@ -303,7 +307,7 @@
 
   // Reset margin-left.
   .rs-uploader-file-item-icon-reupload {
-    margin-left: 0;
+    margin-inline-start: 0;
     display: block;
   }
 }
@@ -312,11 +316,11 @@
   .rs-uploader-file-item {
     position: relative;
     height: @uploader-picture-text-preview-side-length;
-    padding-left: @uploader-picture-text-preview-side-length;
+    padding-inline-start: @uploader-picture-text-preview-side-length;
     margin-top: @uploader-picture-item-gap;
-    padding-right: 30px;
+    padding-inline-end: 30px;
     border: 1px solid var(--rs-border-primary);
-    border-radius: @border-radius;
+    border-radius: var(--rs-radius-md);
     overflow: hidden;
     transition: 0.3s linear background-color;
 
@@ -330,7 +334,7 @@
 
     &-preview {
       position: absolute;
-      left: 0;
+      inset-inline-start: 0;
       top: 0;
       width: @uploader-picture-text-preview-side-length;
       height: @uploader-picture-text-preview-side-length;
@@ -338,15 +342,16 @@
       text-align: center;
       background-color: var(--rs-border-primary);
       overflow: hidden;
-      border-radius: @border-radius 0 0 @border-radius;
+      border-top-left-radius: var(--rs-radius-md);
+      border-bottom-left-radius: var(--rs-radius-md);
 
       > img {
         .img-cover();
       }
 
       .rs-uploader-file-item-icon {
-        font-size: @uploader-file-item-icon-font-size;
-        margin: @uploader-file-item-icon-margin;
+        font-size: var(--rs-uploader-file-item-icon-font-size);
+        margin: var(--rs-uploader-file-item-icon-margin);
       }
     }
 
@@ -372,7 +377,7 @@
     &-btn-remove {
       position: absolute;
       top: 0;
-      right: @padding-x;
+      inset-inline-end: @padding-x;
       color: var(--rs-text-secondary);
       cursor: pointer;
       height: @uploader-picture-text-preview-side-length;
@@ -391,8 +396,8 @@
       position: absolute;
       bottom: 0;
       width: 100%;
-      left: 0;
-      padding-left: @uploader-picture-text-preview-side-length;
+      inset-inline-start: 0;
+      padding-inline-start: @uploader-picture-text-preview-side-length;
 
       &-bar {
         height: 2px;
@@ -404,7 +409,7 @@
     &-icon-loading {
       position: absolute;
       top: 0;
-      left: 0;
+      inset-inline-start: 0;
       display: block;
       width: @uploader-picture-text-preview-side-length;
       height: @uploader-picture-text-preview-side-length;
@@ -414,7 +419,7 @@
       line-height: 50px;
 
       .rs-uploader-file-item-icon {
-        .set-side-length(@loader-default-diameter);
+        .loader-size(@loader-default-diameter);
         .loader-spin();
 
         display: inline-block;

package/cjs/Affix/Affix.js

@@ -124,11 +124,11 @@ const Affix = (0, _utils.forwardRef)((props, ref) => {
     onChange
   });
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = (0, _hooks.useClassNames)(classPrefix);
+  } = (0, _hooks.useStyles)(classPrefix);
   const classes = merge(className, {
-    [withClassPrefix()]: fixed
+    [withPrefix()]: fixed
   });
   const {
     width,

package/cjs/Animation/Bounce.js

@@ -20,7 +20,7 @@ const Bounce = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   } = _ref;
   const {
     prefix
-  } = (0, _hooks.useClassNames)('anim');
+  } = (0, _hooks.useStyles)('anim');
   const {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Bounce', props);

package/cjs/Animation/Collapse.js

@@ -64,7 +64,7 @@ const Collapse = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const {
     prefix,
     merge
-  } = (0, _hooks.useClassNames)('anim');
+  } = (0, _hooks.useStyles)('anim');
   const dimension = typeof dimensionProp === 'function' ? dimensionProp() : dimensionProp;
   const handleEnter = (0, _react.useCallback)(elem => {
     (0, _addStyle.default)(elem, dimension, 0);

package/cjs/Animation/Fade.js

@@ -22,7 +22,7 @@ const Fade = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const {
     prefix,
     merge
-  } = (0, _hooks.useClassNames)('anim');
+  } = (0, _hooks.useStyles)('anim');
   const {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Fade', props);

package/cjs/Animation/Slide.js

@@ -24,7 +24,7 @@ const Slide = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   } = (0, _CustomProvider.useCustom)('Slide', props);
   const {
     prefix
-  } = (0, _hooks.useClassNames)('anim');
+  } = (0, _hooks.useStyles)('anim');
   const enterClassName = prefix('slide-in', placement);
   const exitClassName = prefix('slide-out', placement);
   return /*#__PURE__*/_react.default.createElement(_Transition.default, (0, _extends2.default)({}, propsWithDefaults, {

package/cjs/AutoComplete/AutoComplete.d.ts

@@ -1,26 +1,22 @@
 import React from 'react';
-import { WithAsProps, FormControlPickerProps, Placement, ItemDataType, SizeType } from '../internals/types';
-export interface AutoCompleteProps<T = string> extends WithAsProps, FormControlPickerProps<T, any, ItemDataType | string> {
-    /** Additional classes for menu */
-    menuClassName?: string;
+import type { FormControlPickerProps, WithAsProps, Placement, Option, Size, ListboxProps, PopupProps } from '../internals/types';
+export interface AutoCompleteProps<T = string> extends WithAsProps, FormControlPickerProps<T, any, Option | string>, ListboxProps, PopupProps {
     /** The placement of component */
     placement?: Placement;
     /** When set to false, the Enter key selection function is invalid */
     selectOnEnter?: boolean;
     /** A component can have different sizes */
-    size?: SizeType;
+    size?: Size;
     /** Open the menu and control it */
     open?: boolean;
     /** Placeholder text */
     placeholder?: string;
-    /** The width of the menu will automatically follow the width of the input box */
-    menuAutoWidth?: boolean;
     /** AutoComplete Content */
     autoComplete?: string;
     /** Custom filter function to determine whether the item will be displayed */
-    filterBy?: (value: string, item: ItemDataType) => boolean;
+    filterBy?: (value: string, item: Option) => boolean;
     /** Called when a option is selected */
-    onSelect?: (value: any, item: ItemDataType, event: React.SyntheticEvent) => void;
+    onSelect?: (value: any, item: Option, event: React.SyntheticEvent) => void;
     /** Called on focus */
     onFocus?: React.FocusEventHandler;
     /** Called on blur */
@@ -33,10 +29,6 @@ export interface AutoCompleteProps<T = string> extends WithAsProps, FormControlP
     onOpen?: () => void;
     /** Called on close */
     onClose?: () => void;
-    /** Customizing the Rendering Menu list */
-    renderMenu?: (menu: React.ReactNode) => React.ReactNode;
-    /** Custom selected option */
-    renderMenuItem?: (label: React.ReactNode, item: ItemDataType) => React.ReactNode;
 }
 /**
  * Autocomplete function of input field.

package/cjs/AutoComplete/AutoComplete.js

@@ -36,18 +36,19 @@ const AutoComplete = (0, _utils.forwardRef)((props, ref) => {
     selectOnEnter = true,
     classPrefix = 'auto-complete',
     defaultValue = '',
-    menuAutoWidth = true,
+    popupAutoWidth = true,
+    popupClassName,
+    popupStyle,
     data,
     value: valueProp,
     open,
     style,
     size,
-    menuClassName,
     id,
     readOnly,
     plaintext,
-    renderMenu,
-    renderMenuItem,
+    renderListbox,
+    renderOption,
     onSelect,
     filterBy,
     onKeyDown,
@@ -146,42 +147,36 @@ const AutoComplete = (0, _utils.forwardRef)((props, ref) => {
     onBlur === null || onBlur === void 0 || onBlur(event);
   });
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix({
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix({
     disabled
   }));
   const [htmlInputProps, restProps] = (0, _utils.partitionHTMLProps)((0, _omit.default)(rest, _Picker.pickTriggerPropKeys));
   const renderPopup = (positionProps, speakerRef) => {
     const {
-      left,
-      top,
       className
     } = positionProps;
-    const styles = {
-      left,
-      top
-    };
-    const menu = /*#__PURE__*/_react.default.createElement(_Picker.Listbox, {
+    const classes = merge(className, popupClassName);
+    const listbox = /*#__PURE__*/_react.default.createElement(_Picker.Listbox, {
       classPrefix: "auto-complete-menu",
       listItemClassPrefix: "auto-complete-item",
       listItemAs: _Picker.ListItem,
       focusItemValue: focusItemValue,
       onSelect: handleItemSelect,
-      renderMenuItem: renderMenuItem,
+      renderOption: renderOption,
       data: items,
-      className: menuClassName,
       query: value
     });
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {
       ref: (0, _utils.mergeRefs)(overlay, speakerRef),
-      style: styles,
-      className: className,
+      className: classes,
       onKeyDown: handleKeyDownEvent,
       target: trigger,
-      autoWidth: menuAutoWidth
-    }, renderMenu ? renderMenu(menu) : menu);
+      style: popupStyle,
+      autoWidth: popupAutoWidth
+    }, renderListbox ? renderListbox(listbox) : listbox);
   };
   if (plaintext) {
     return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {

package/cjs/Avatar/Avatar.d.ts

@@ -1,12 +1,10 @@
-import React from 'react';
-import { WithAsProps, ColorType } from '../internals/types';
-import { type Size } from '../AvatarGroup/AvatarGroup';
+import React, { CSSProperties } from 'react';
+import type { WithAsProps, ColorScheme, Size } from '../internals/types';
 export interface AvatarProps extends WithAsProps {
     /**
      * A avatar can have different sizes.
      *
      * @default 'md'
-     * @version xxl and xs added in v5.59.0
      */
     size?: Size;
     /**
@@ -44,7 +42,7 @@ export interface AvatarProps extends WithAsProps {
      * Sets the avatar background color.
      * @version 5.59.0
      */
-    color?: ColorType;
+    color?: ColorScheme | CSSProperties['color'];
     /**
      * Callback fired when the image failed to load.
      * @version 5.59.0

package/cjs/Avatar/Avatar.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
+var _StyledBox = _interopRequireDefault(require("../internals/StyledBox"));
 var _AvatarIcon = _interopRequireDefault(require("./AvatarIcon"));
 var _useImage = _interopRequireDefault(require("./useImage"));
 var _hooks = require("../internals/hooks");
@@ -26,7 +27,7 @@ const Avatar = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Avatar', props);
   const {
-    as: Component = 'div',
+    as = 'div',
     bordered,
     alt,
     className,
@@ -43,11 +44,11 @@ const Avatar = (0, _utils.forwardRef)((props, ref) => {
     ...rest
   } = propsWithDefaults;
   const {
-    withClassPrefix,
+    withPrefix,
     prefix,
     merge
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix(size, color, {
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix({
     circle,
     bordered
   }));
@@ -79,10 +80,14 @@ const Avatar = (0, _utils.forwardRef)((props, ref) => {
   const image = loaded ? /*#__PURE__*/_react.default.createElement("img", (0, _extends2.default)({}, imageProps, {
     className: prefix`image`
   })) : placeholder;
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_StyledBox.default, (0, _extends2.default)({
+    as: as,
+    name: "avatar",
+    size: size,
+    color: color,
     ref: ref,
     className: classes
-  }), src ? image : placeholder);
+  }, rest), src ? image : placeholder);
 });
 Avatar.displayName = 'Avatar';
 var _default = exports.default = Avatar;

package/cjs/AvatarGroup/AvatarGroup.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import { WithAsProps } from '../internals/types';
-export type Size = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+import type { WithAsProps, Size } from '../internals/types';
 export interface AvatarGroupProps extends WithAsProps {
     /**
      * Render all avatars as stacks
@@ -12,12 +11,11 @@ export interface AvatarGroupProps extends WithAsProps {
     spacing?: number;
     /**
      * Set the size of all avatars.
-     * @version xxl and xs added in v5.59.0
      */
     size?: Size;
 }
 export declare const AvatarGroupContext: React.Context<{
-    size?: Size | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
     spacing?: number | undefined;
 }>;
 /**

package/cjs/AvatarGroup/AvatarGroup.js

@@ -33,19 +33,17 @@ const AvatarGroup = (0, _utils.forwardRef)((props, ref) => {
     ...rest
   } = propsWithDefaults;
   const {
-    withClassPrefix,
-    merge
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix({
+    withPrefix,
+    merge,
+    cssVar
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix({
     stack
   }));
   const contextValue = (0, _react.useMemo)(() => ({
     size
   }), [size]);
-  const styles = {
-    '--rs-avatar-group-gap': (0, _utils.getCssValue)(spacing),
-    ...style
-  };
+  const styles = (0, _utils.mergeStyles)(style, cssVar('spacing', spacing, _utils.getCssValue));
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     role: "group"
   }, rest, {

package/cjs/Badge/Badge.js

@@ -38,14 +38,19 @@ const Badge = (0, _utils.forwardRef)((props, ref) => {
     ...rest
   } = propsWithDefaults;
   const {
-    withClassPrefix,
+    withPrefix,
     prefix,
     merge
-  } = (0, _hooks.useClassNames)(classPrefix);
+  } = (0, _hooks.useStyles)(classPrefix);
   const text = typeof content === 'number' && content > maxCount ? `${maxCount}+` : content;
-  const classes = merge(className, withClassPrefix((0, _utils.isPresetColor)(color) && color, shape, {
+  const isOneChar = (0, _react.useMemo)(() => {
+    var _String;
+    return ((_String = String(content)) === null || _String === void 0 ? void 0 : _String.length) === 1;
+  }, [content]);
+  const classes = merge(className, withPrefix((0, _utils.isPresetColor)(color) && color, shape, {
     compact,
     outline,
+    'one-char': isOneChar,
     hidden: invisible,
     wrapper: children,
     independent: !children,

package/cjs/Box/index.d.ts

@@ -0,0 +1,4 @@
+import Box from '../internals/Box';
+export type { BoxProps } from '../internals/Box';
+export { Box };
+export default Box;

package/cjs/Box/index.js

@@ -0,0 +1,11 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _Box = _interopRequireDefault(require("../internals/Box"));
+exports.Box = _Box.default;
+// export types
+// export components
+var _default = exports.default = _Box.default;

package/cjs/Breadcrumb/Breadcrumb.d.ts

@@ -20,6 +20,10 @@ export interface BreadcrumbProps extends WithAsProps {
      * The ellipsis element.
      */
     ellipsis?: React.ReactNode;
+    /**
+     * The size of the Breadcrumb.
+     */
+    size?: 'sm' | 'md' | 'lg' | number | string;
     /**
      * Callback function for clicking the ellipsis.
      */

package/cjs/Breadcrumb/Breadcrumb.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _BreadcrumbItem = _interopRequireDefault(require("./BreadcrumbItem"));
+var _StyledBox = _interopRequireDefault(require("../internals/StyledBox"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _CustomProvider = require("../CustomProvider");
@@ -30,21 +31,22 @@ const Breadcrumb = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Breadcrumb', props);
   const {
-    as: Component = 'nav',
+    as = 'nav',
     className,
     classPrefix = 'breadcrumb',
     children,
     ellipsis = '...',
     maxItems = 5,
     separator = '/',
+    size = 'md',
     locale,
     onExpand,
     ...rest
   } = propsWithDefaults;
   const {
     merge,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
   const [showEllipsis, setShowEllipsis] = (0, _react.useState)(true);
   const handleClickEllipsis = (0, _hooks.useEventCallback)(event => {
     setShowEllipsis(false);
@@ -73,8 +75,12 @@ const Breadcrumb = (0, _utils.forwardRef)((props, ref) => {
     }
     return items;
   }, [children, ellipsis, handleClickEllipsis, locale === null || locale === void 0 ? void 0 : locale.expandText, maxItems, separator, showEllipsis]);
-  const classes = merge(className, withClassPrefix());
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  const classes = merge(className, withPrefix());
+  return /*#__PURE__*/_react.default.createElement(_StyledBox.default, (0, _extends2.default)({
+    name: "breadcrumb",
+    as: as,
+    size: size
+  }, rest, {
     ref: ref,
     className: classes
   }), /*#__PURE__*/_react.default.createElement("ol", null, content));

package/cjs/Breadcrumb/BreadcrumbItem.d.ts

@@ -25,6 +25,10 @@ export interface BreadcrumbItemProps extends WithAsProps {
      * The separator between each breadcrumb item.
      */
     separator?: React.ReactNode;
+    /**
+     * The icon of the BreadcrumbItem.
+     */
+    icon?: React.ReactNode;
 }
 /**
  * The `<Breadcrumb.Item>` component is used to specify each section of the Breadcrumb.

package/cjs/Breadcrumb/BreadcrumbItem.js

@@ -26,20 +26,21 @@ const BreadcrumbItem = (0, _utils.forwardRef)((props, ref) => {
     active,
     children,
     separator,
+    icon,
     ...rest
   } = props;
   const {
     merge,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix({
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix({
     active
   }));
   return /*#__PURE__*/_react.default.createElement(WrapperComponent, (0, _extends2.default)({
     style: style,
     className: classes,
     ref: ref
-  }, rest), active ? /*#__PURE__*/_react.default.createElement("span", null, children) : /*#__PURE__*/_react.default.createElement(Component, {
+  }, rest), icon, active ? /*#__PURE__*/_react.default.createElement("span", null, children) : /*#__PURE__*/_react.default.createElement(Component, {
     href: href,
     title: title,
     target: target