rsuite 5.75.0 → 6.0.0-canary-20241227

package/cjs/AvatarGroup/AvatarGroup.js

@@ -5,50 +5,47 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = exports.AvatarGroupContext = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
-var _propTypes2 = require("../internals/propTypes");
+var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
-var _excluded = ["as", "classPrefix", "spacing", "className", "children", "stack", "size", "style"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var AvatarGroupContext = exports.AvatarGroupContext = /*#__PURE__*/_react.default.createContext({});
+const AvatarGroupContext = exports.AvatarGroupContext = /*#__PURE__*/_react.default.createContext({});
 
 /**
  * The AvatarGroup component is used to represent a collection of avatars.
  * @see https://rsuitejs.com/components/avatar
  */
-var AvatarGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _useCustom = (0, _CustomProvider.useCustom)('AvatarGroup', props),
-    propsWithDefaults = _useCustom.propsWithDefaults;
-  var _propsWithDefaults$as = propsWithDefaults.as,
-    Component = _propsWithDefaults$as === void 0 ? 'div' : _propsWithDefaults$as,
-    _propsWithDefaults$cl = propsWithDefaults.classPrefix,
-    classPrefix = _propsWithDefaults$cl === void 0 ? 'avatar-group' : _propsWithDefaults$cl,
-    spacing = propsWithDefaults.spacing,
-    className = propsWithDefaults.className,
-    children = propsWithDefaults.children,
-    stack = propsWithDefaults.stack,
-    size = propsWithDefaults.size,
-    style = propsWithDefaults.style,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(propsWithDefaults, _excluded);
-  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
-    withClassPrefix = _useClassNames.withClassPrefix,
-    merge = _useClassNames.merge;
-  var classes = merge(className, withClassPrefix({
-    stack: stack
+const AvatarGroup = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = (0, _CustomProvider.useCustom)('AvatarGroup', props);
+  const {
+    as: Component = 'div',
+    classPrefix = 'avatar-group',
+    spacing,
+    className,
+    children,
+    stack,
+    size,
+    style,
+    ...rest
+  } = propsWithDefaults;
+  const {
+    withClassPrefix,
+    merge
+  } = (0, _hooks.useClassNames)(classPrefix);
+  const classes = merge(className, withClassPrefix({
+    stack
   }));
-  var contextValue = (0, _react.useMemo)(function () {
-    return {
-      size: size
-    };
-  }, [size]);
-  var styles = (0, _utils.isIE)() ? style : (0, _extends2.default)({}, style, {
-    gap: spacing
-  });
+  const contextValue = (0, _react.useMemo)(() => ({
+    size
+  }), [size]);
+  const styles = {
+    '--rs-avatar-group-gap': (0, _utils.getCssValue)(spacing),
+    ...style
+  };
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     role: "group"
   }, rest, {
@@ -60,13 +57,4 @@ var AvatarGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, children));
 });
 AvatarGroup.displayName = 'AvatarGroup';
-AvatarGroup.propTypes = {
-  as: _propTypes.default.elementType,
-  classPrefix: _propTypes.default.string,
-  className: _propTypes.default.string,
-  children: _propTypes.default.node,
-  stack: _propTypes.default.bool,
-  spacing: _propTypes.default.number,
-  size: (0, _propTypes2.oneOf)(['lg', 'md', 'sm', 'xs'])
-};
 var _default = exports.default = AvatarGroup;

package/cjs/Badge/Badge.js

@@ -5,47 +5,44 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../internals/hooks");
-var _propTypes2 = require("../internals/propTypes");
 var _CustomProvider = require("../CustomProvider");
-var _excluded = ["as", "content", "color", "className", "classPrefix", "children", "maxCount"];
 /**
  * The Badge component is usually used to mark or highlight the status or quantity of an object.
  * @see https://rsuitejs.com/components/badge
  */
-var Badge = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _useCustom = (0, _CustomProvider.useCustom)('Badge', props),
-    propsWithDefaults = _useCustom.propsWithDefaults;
-  var _propsWithDefaults$as = propsWithDefaults.as,
-    Component = _propsWithDefaults$as === void 0 ? 'div' : _propsWithDefaults$as,
-    contentText = propsWithDefaults.content,
-    color = propsWithDefaults.color,
-    className = propsWithDefaults.className,
-    _propsWithDefaults$cl = propsWithDefaults.classPrefix,
-    classPrefix = _propsWithDefaults$cl === void 0 ? 'badge' : _propsWithDefaults$cl,
-    children = propsWithDefaults.children,
-    _propsWithDefaults$ma = propsWithDefaults.maxCount,
-    maxCount = _propsWithDefaults$ma === void 0 ? 99 : _propsWithDefaults$ma,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(propsWithDefaults, _excluded);
-  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
-    withClassPrefix = _useClassNames.withClassPrefix,
-    prefix = _useClassNames.prefix,
-    merge = _useClassNames.merge;
-  var dot = contentText === undefined || contentText === null;
-  var classes = merge(className, withClassPrefix(color, {
+const Badge = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = (0, _CustomProvider.useCustom)('Badge', props);
+  const {
+    as: Component = 'div',
+    content: contentText,
+    color,
+    className,
+    classPrefix = 'badge',
+    children,
+    maxCount = 99,
+    ...rest
+  } = propsWithDefaults;
+  const {
+    withClassPrefix,
+    prefix,
+    merge
+  } = (0, _hooks.useClassNames)(classPrefix);
+  const dot = contentText === undefined || contentText === null;
+  const classes = merge(className, withClassPrefix(color, {
     independent: !children,
     wrapper: children,
-    dot: dot
+    dot
   }));
   if (contentText === false) {
     return /*#__PURE__*/_react.default.cloneElement(children, {
-      ref: ref
+      ref
     });
   }
-  var content = typeof contentText === 'number' && contentText > maxCount ? maxCount + "+" : contentText;
+  const content = typeof contentText === 'number' && contentText > maxCount ? `${maxCount}+` : contentText;
   if (!children) {
     return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
       ref: ref,
@@ -60,13 +57,4 @@ var Badge = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, content));
 });
 Badge.displayName = 'Badge';
-Badge.propTypes = {
-  className: _propTypes.default.string,
-  classPrefix: _propTypes.default.string,
-  children: _propTypes.default.node,
-  as: _propTypes.default.elementType,
-  content: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.bool]),
-  maxCount: _propTypes.default.number,
-  color: (0, _propTypes2.oneOf)(['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet'])
-};
 var _default = exports.default = Badge;

package/cjs/Breadcrumb/Breadcrumb.js

@@ -5,17 +5,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _BreadcrumbItem = _interopRequireDefault(require("./BreadcrumbItem"));
 var _CustomProvider = require("../CustomProvider");
-var _excluded = ["as", "className", "classPrefix", "children", "ellipsis", "maxItems", "separator", "locale", "onExpand"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var Separator = (0, _utils.createComponent)({
+const Separator = (0, _utils.createComponent)({
   name: 'BreadcrumbSeparator',
   componentAs: 'span',
   'aria-hidden': true
@@ -25,44 +22,42 @@ var Separator = (0, _utils.createComponent)({
  * The Breadcrumb component is used to indicate the current page location and navigate.
  * @see https://rsuitejs.com/components/breadcrumb
  */
-var Breadcrumb = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _useCustom = (0, _CustomProvider.useCustom)('Breadcrumb', props),
-    propsWithDefaults = _useCustom.propsWithDefaults;
-  var _propsWithDefaults$as = propsWithDefaults.as,
-    Component = _propsWithDefaults$as === void 0 ? 'nav' : _propsWithDefaults$as,
-    className = propsWithDefaults.className,
-    _propsWithDefaults$cl = propsWithDefaults.classPrefix,
-    classPrefix = _propsWithDefaults$cl === void 0 ? 'breadcrumb' : _propsWithDefaults$cl,
-    children = propsWithDefaults.children,
-    _propsWithDefaults$el = propsWithDefaults.ellipsis,
-    ellipsis = _propsWithDefaults$el === void 0 ? '...' : _propsWithDefaults$el,
-    _propsWithDefaults$ma = propsWithDefaults.maxItems,
-    maxItems = _propsWithDefaults$ma === void 0 ? 5 : _propsWithDefaults$ma,
-    _propsWithDefaults$se = propsWithDefaults.separator,
-    separator = _propsWithDefaults$se === void 0 ? '/' : _propsWithDefaults$se,
-    locale = propsWithDefaults.locale,
-    onExpand = propsWithDefaults.onExpand,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(propsWithDefaults, _excluded);
-  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
-    merge = _useClassNames.merge,
-    withClassPrefix = _useClassNames.withClassPrefix;
-  var _useState = (0, _react.useState)(true),
-    showEllipsis = _useState[0],
-    setShowEllipsis = _useState[1];
-  var handleClickEllipsis = (0, _hooks.useEventCallback)(function (event) {
+const Breadcrumb = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = (0, _CustomProvider.useCustom)('Breadcrumb', props);
+  const {
+    as: Component = 'nav',
+    className,
+    classPrefix = 'breadcrumb',
+    children,
+    ellipsis = '...',
+    maxItems = 5,
+    separator = '/',
+    locale,
+    onExpand,
+    ...rest
+  } = propsWithDefaults;
+  const {
+    merge,
+    withClassPrefix
+  } = (0, _hooks.useClassNames)(classPrefix);
+  const [showEllipsis, setShowEllipsis] = (0, _react.useState)(true);
+  const handleClickEllipsis = (0, _hooks.useEventCallback)(event => {
     setShowEllipsis(false);
     onExpand === null || onExpand === void 0 || onExpand(event);
   });
-  var content = (0, _react.useMemo)(function () {
-    var count = _utils.ReactChildren.count(children);
-    var items = _utils.ReactChildren.mapCloneElement(children, function (item, index) {
-      var isLast = index === count - 1;
-      return (0, _extends2.default)({}, item.props, {
+  const content = (0, _react.useMemo)(() => {
+    const count = _utils.ReactChildren.count(children);
+    const items = _utils.ReactChildren.mapCloneElement(children, (item, index) => {
+      const isLast = index === count - 1;
+      return {
+        ...item.props,
         separator: isLast ? null : /*#__PURE__*/_react.default.createElement(Separator, null, separator)
-      });
+      };
     });
     if (count > maxItems && count > 2 && showEllipsis) {
-      return [].concat(items.slice(0, 1), [[/*#__PURE__*/_react.default.createElement(_BreadcrumbItem.default, {
+      return [...items.slice(0, 1), [/*#__PURE__*/_react.default.createElement(_BreadcrumbItem.default, {
         role: "button",
         key: "ellipsis",
         title: locale === null || locale === void 0 ? void 0 : locale.expandText,
@@ -71,11 +66,11 @@ var Breadcrumb = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         onClick: handleClickEllipsis
       }, /*#__PURE__*/_react.default.createElement("span", {
         "aria-hidden": true
-      }, ellipsis))]], items.slice(items.length - 1, items.length));
+      }, ellipsis))], ...items.slice(items.length - 1, items.length)];
     }
     return items;
   }, [children, ellipsis, handleClickEllipsis, locale === null || locale === void 0 ? void 0 : locale.expandText, maxItems, separator, showEllipsis]);
-  var classes = merge(className, withClassPrefix());
+  const classes = merge(className, withClassPrefix());
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     className: classes
@@ -83,14 +78,4 @@ var Breadcrumb = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 });
 Breadcrumb.Item = _BreadcrumbItem.default;
 Breadcrumb.displayName = 'Breadcrumb';
-Breadcrumb.propTypes = {
-  as: _propTypes.default.elementType,
-  children: _propTypes.default.node,
-  className: _propTypes.default.string,
-  classPrefix: _propTypes.default.string,
-  ellipsis: _propTypes.default.node,
-  separator: _propTypes.default.node,
-  maxItems: _propTypes.default.number,
-  onExpand: _propTypes.default.func
-};
 var _default = exports.default = Breadcrumb;

package/cjs/Breadcrumb/BreadcrumbItem.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { WithAsProps, RsRefForwardingComponent } from '../internals/types';
-export interface BreadcrumbItemProps extends WithAsProps<React.ElementType | string> {
+export interface BreadcrumbItemProps extends WithAsProps {
     /**
      * The wrapper element of the BreadcrumbItem.
      */

package/cjs/Breadcrumb/BreadcrumbItem.js

@@ -5,37 +5,34 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _SafeAnchor = _interopRequireDefault(require("../SafeAnchor"));
 var _hooks = require("../internals/hooks");
-var _excluded = ["wrapperAs", "href", "as", "classPrefix", "title", "target", "className", "style", "active", "children", "separator"];
 /**
  * The `<Breadcrumb.Item>` component is used to specify each section of the Breadcrumb.
  * @see https://rsuitejs.com/components/breadcrumb
  */
-var BreadcrumbItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _props$wrapperAs = props.wrapperAs,
-    WrapperComponent = _props$wrapperAs === void 0 ? 'li' : _props$wrapperAs,
-    href = props.href,
-    _props$as = props.as,
-    Component = _props$as === void 0 ? href ? _SafeAnchor.default : 'span' : _props$as,
-    _props$classPrefix = props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? 'breadcrumb-item' : _props$classPrefix,
-    title = props.title,
-    target = props.target,
-    className = props.className,
-    style = props.style,
-    active = props.active,
-    children = props.children,
-    separator = props.separator,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
-    merge = _useClassNames.merge,
-    withClassPrefix = _useClassNames.withClassPrefix;
-  var classes = merge(className, withClassPrefix({
-    active: active
+const BreadcrumbItem = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    wrapperAs: WrapperComponent = 'li',
+    href,
+    as: Component = href ? _SafeAnchor.default : 'span',
+    classPrefix = 'breadcrumb-item',
+    title,
+    target,
+    className,
+    style,
+    active,
+    children,
+    separator,
+    ...rest
+  } = props;
+  const {
+    merge,
+    withClassPrefix
+  } = (0, _hooks.useClassNames)(classPrefix);
+  const classes = merge(className, withClassPrefix({
+    active
   }));
   return /*#__PURE__*/_react.default.createElement(WrapperComponent, (0, _extends2.default)({
     style: style,
@@ -48,14 +45,4 @@ var BreadcrumbItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref
   }, children), separator);
 });
 BreadcrumbItem.displayName = 'BreadcrumbItem';
-BreadcrumbItem.propTypes = {
-  active: _propTypes.default.bool,
-  className: _propTypes.default.string,
-  style: _propTypes.default.object,
-  href: _propTypes.default.string,
-  title: _propTypes.default.string,
-  target: _propTypes.default.string,
-  classPrefix: _propTypes.default.string,
-  as: _propTypes.default.elementType
-};
 var _default = exports.default = BreadcrumbItem;

package/cjs/Button/Button.js

@@ -5,68 +5,63 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Ripple = _interopRequireDefault(require("../internals/Ripple"));
 var _SafeAnchor = _interopRequireDefault(require("../SafeAnchor"));
-var _propTypes2 = require("../internals/propTypes");
 var _ButtonGroup = require("../ButtonGroup");
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
-var _templateObject, _templateObject2, _templateObject3;
-var _excluded = ["as", "active", "appearance", "block", "className", "children", "classPrefix", "color", "disabled", "loading", "ripple", "size", "startIcon", "endIcon", "type"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * The Button component is used to trigger a custom action.
  * @see https://rsuitejs.com/components/button
  */
-var Button = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _useCustom = (0, _CustomProvider.useCustom)('Button', props),
-    propsWithDefaults = _useCustom.propsWithDefaults;
-  var as = propsWithDefaults.as,
-    active = propsWithDefaults.active,
-    _propsWithDefaults$ap = propsWithDefaults.appearance,
-    appearance = _propsWithDefaults$ap === void 0 ? 'default' : _propsWithDefaults$ap,
-    block = propsWithDefaults.block,
-    className = propsWithDefaults.className,
-    children = propsWithDefaults.children,
-    _propsWithDefaults$cl = propsWithDefaults.classPrefix,
-    classPrefix = _propsWithDefaults$cl === void 0 ? 'btn' : _propsWithDefaults$cl,
-    color = propsWithDefaults.color,
-    disabled = propsWithDefaults.disabled,
-    loading = propsWithDefaults.loading,
-    _propsWithDefaults$ri = propsWithDefaults.ripple,
-    ripple = _propsWithDefaults$ri === void 0 ? true : _propsWithDefaults$ri,
-    sizeProp = propsWithDefaults.size,
-    startIcon = propsWithDefaults.startIcon,
-    endIcon = propsWithDefaults.endIcon,
-    typeProp = propsWithDefaults.type,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(propsWithDefaults, _excluded);
-  var buttonGroup = (0, _react.useContext)(_ButtonGroup.ButtonGroupContext);
-  var size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : buttonGroup === null || buttonGroup === void 0 ? void 0 : buttonGroup.size;
-  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
-    withClassPrefix = _useClassNames.withClassPrefix,
-    prefix = _useClassNames.prefix,
-    merge = _useClassNames.merge;
-  var classes = merge(className, withClassPrefix(appearance, color, size, {
-    active: active,
-    disabled: disabled,
-    loading: loading,
-    block: block
+const Button = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = (0, _CustomProvider.useCustom)('Button', props);
+  const {
+    as,
+    active,
+    appearance = 'default',
+    block,
+    className,
+    children,
+    classPrefix = 'btn',
+    color,
+    disabled,
+    loading,
+    ripple = true,
+    size: sizeProp,
+    startIcon,
+    endIcon,
+    type: typeProp,
+    ...rest
+  } = propsWithDefaults;
+  const buttonGroup = (0, _react.useContext)(_ButtonGroup.ButtonGroupContext);
+  const size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : buttonGroup === null || buttonGroup === void 0 ? void 0 : buttonGroup.size;
+  const {
+    withClassPrefix,
+    prefix,
+    merge
+  } = (0, _hooks.useClassNames)(classPrefix);
+  const classes = merge(className, withClassPrefix(appearance, color, size, {
+    active,
+    disabled,
+    loading,
+    block
   }));
-  var buttonContent = (0, _react.useMemo)(function () {
-    var spin = /*#__PURE__*/_react.default.createElement("span", {
-      className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["spin"])))
+  const buttonContent = (0, _react.useMemo)(() => {
+    const spin = /*#__PURE__*/_react.default.createElement("span", {
+      className: prefix`spin`
     });
-    var rippleElement = ripple && !(0, _utils.isOneOf)(appearance, ['link', 'ghost']) ? /*#__PURE__*/_react.default.createElement(_Ripple.default, null) : null;
+    const rippleElement = ripple && !(0, _utils.isOneOf)(appearance, ['link', 'ghost']) ? /*#__PURE__*/_react.default.createElement(_Ripple.default, null) : null;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, loading && spin, startIcon ? /*#__PURE__*/_react.default.createElement("span", {
-      className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["start-icon"])))
+      className: prefix`start-icon`
     }, startIcon) : null, children, endIcon ? /*#__PURE__*/_react.default.createElement("span", {
-      className: prefix(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["end-icon"])))
+      className: prefix`end-icon`
     }, endIcon) : null, rippleElement);
   }, [appearance, children, endIcon, loading, prefix, ripple, startIcon]);
   if (rest.href) {
@@ -78,9 +73,9 @@ var Button = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       className: classes
     }), buttonContent);
   }
-  var Component = as || 'button';
-  var type = typeProp || (Component === 'button' ? 'button' : undefined);
-  var role = rest.role || (Component !== 'button' ? 'button' : undefined);
+  const Component = as || 'button';
+  const type = typeProp || (Component === 'button' ? 'button' : undefined);
+  const role = rest.role || (Component !== 'button' ? 'button' : undefined);
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     role: role,
     type: type,
@@ -91,18 +86,4 @@ var Button = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }), buttonContent);
 });
 Button.displayName = 'Button';
-Button.propTypes = {
-  as: _propTypes.default.elementType,
-  active: _propTypes.default.bool,
-  appearance: (0, _propTypes2.oneOf)(['default', 'primary', 'link', 'subtle', 'ghost']),
-  block: _propTypes.default.bool,
-  children: _propTypes.default.node,
-  color: (0, _propTypes2.oneOf)(['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet']),
-  disabled: _propTypes.default.bool,
-  href: _propTypes.default.string,
-  loading: _propTypes.default.bool,
-  ripple: _propTypes.default.bool,
-  size: (0, _propTypes2.oneOf)(['lg', 'md', 'sm', 'xs']),
-  type: (0, _propTypes2.oneOf)(['button', 'reset', 'submit'])
-};
 var _default = exports.default = Button;