@fle-ui/next 2.0.0-alpha.9 → 3.0.0-alpha.1

package/lib/float-button/FloatButtonGroup.js

@@ -0,0 +1,129 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _CloseOutlined = _interopRequireDefault(require("@ant-design/icons/CloseOutlined"));
+
+var _FileTextOutlined = _interopRequireDefault(require("@ant-design/icons/FileTextOutlined"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _rcMotion = _interopRequireDefault(require("rc-motion"));
+
+var _useMergedState3 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
+
+var _FloatButton = _interopRequireWildcard(require("./FloatButton"));
+
+var _configProvider = require("../config-provider");
+
+var _context = require("./context");
+
+var _style = _interopRequireDefault(require("./style"));
+
+var FloatButtonGroup = function FloatButtonGroup(props) {
+  var _classNames;
+
+  var customizePrefixCls = props.prefixCls,
+      className = props.className,
+      style = props.style,
+      _props$shape = props.shape,
+      shape = _props$shape === void 0 ? 'circle' : _props$shape,
+      _props$type = props.type,
+      type = _props$type === void 0 ? 'default' : _props$type,
+      _props$icon = props.icon,
+      icon = _props$icon === void 0 ? /*#__PURE__*/_react["default"].createElement(_FileTextOutlined["default"], null) : _props$icon,
+      _props$closeIcon = props.closeIcon,
+      closeIcon = _props$closeIcon === void 0 ? /*#__PURE__*/_react["default"].createElement(_CloseOutlined["default"], null) : _props$closeIcon,
+      description = props.description,
+      trigger = props.trigger,
+      children = props.children,
+      onOpenChange = props.onOpenChange;
+
+  var _useContext = (0, _react.useContext)(_configProvider.ConfigContext),
+      direction = _useContext.direction,
+      getPrefixCls = _useContext.getPrefixCls;
+
+  var prefixCls = getPrefixCls(_FloatButton.floatButtonPrefixCls, customizePrefixCls);
+
+  var _useStyle = (0, _style["default"])(prefixCls),
+      _useStyle2 = (0, _slicedToArray2["default"])(_useStyle, 2),
+      wrapSSR = _useStyle2[0],
+      hashId = _useStyle2[1];
+
+  var groupPrefixCls = prefixCls + "-group";
+  var groupCls = (0, _classnames["default"])(groupPrefixCls, hashId, className, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, groupPrefixCls + "-rtl", direction === 'rtl'), (0, _defineProperty2["default"])(_classNames, groupPrefixCls + "-" + shape, shape), (0, _defineProperty2["default"])(_classNames, groupPrefixCls + "-" + shape + "-shadow", !trigger), _classNames));
+  var wrapperCls = (0, _classnames["default"])(hashId, groupPrefixCls + "-wrap");
+
+  var _useMergedState = (0, _useMergedState3["default"])(false, {
+    value: props.open
+  }),
+      _useMergedState2 = (0, _slicedToArray2["default"])(_useMergedState, 2),
+      open = _useMergedState2[0],
+      setOpen = _useMergedState2[1];
+
+  var clickAction = (0, _react.useRef)({});
+  var hoverAction = (0, _react.useRef)({});
+
+  if (trigger === 'click') {
+    clickAction.current = {
+      onClick: function onClick() {
+        setOpen(function (prevState) {
+          onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(!prevState);
+          return !prevState;
+        });
+      }
+    };
+  }
+
+  if (trigger === 'hover') {
+    hoverAction.current = {
+      onMouseEnter: function onMouseEnter() {
+        setOpen(true);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        setOpen(false);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
+      }
+    };
+  }
+
+  return wrapSSR( /*#__PURE__*/_react["default"].createElement(_context.FloatButtonGroupProvider, {
+    value: shape
+  }, /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+    className: groupCls,
+    style: style
+  }, hoverAction.current), trigger && ['click', 'hover'].includes(trigger) ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_rcMotion["default"], {
+    visible: open,
+    motionName: groupPrefixCls + "-wrap"
+  }, function (_ref) {
+    var motionClassName = _ref.className;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])(motionClassName, wrapperCls)
+    }, children);
+  }), /*#__PURE__*/_react["default"].createElement(_FloatButton["default"], (0, _extends2["default"])({
+    type: type,
+    shape: shape,
+    icon: open ? closeIcon : icon,
+    description: description
+  }, clickAction.current))) : children)));
+};
+
+var _default = /*#__PURE__*/(0, _react.memo)(FloatButtonGroup);
+
+exports["default"] = _default;

package/lib/float-button/PurePanel.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { FloatButtonProps, FloatButtonGroupProps } from './interface';
+export interface PureFloatButtonProps extends Omit<FloatButtonProps, 'target'> {
+    backTop?: boolean;
+}
+export interface PurePanelProps extends PureFloatButtonProps, Omit<FloatButtonGroupProps, 'children'> {
+    /** Convert to FloatGroup when configured */
+    items?: PureFloatButtonProps[];
+}
+declare function PurePanel({ className, items, ...props }: PurePanelProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof PurePanel>;
+export default _default;

package/lib/float-button/PurePanel.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _FloatButton = _interopRequireWildcard(require("./FloatButton"));
+
+var _FloatButtonGroup = _interopRequireDefault(require("./FloatButtonGroup"));
+
+var _BackTop = _interopRequireDefault(require("./BackTop"));
+
+var _configProvider = require("../config-provider");
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+/* eslint-disable react/no-array-index-key */
+
+
+var PureFloatButton = function PureFloatButton(_a) {
+  var backTop = _a.backTop,
+      props = __rest(_a, ["backTop"]);
+
+  return backTop ? /*#__PURE__*/React.createElement(_BackTop["default"], (0, _extends2["default"])({}, props, {
+    visibilityHeight: 0
+  })) : /*#__PURE__*/React.createElement(_FloatButton["default"], (0, _extends2["default"])({}, props));
+};
+
+function PurePanel(_a) {
+  var className = _a.className,
+      items = _a.items,
+      props = __rest(_a, ["className", "items"]);
+
+  var customizePrefixCls = props.prefixCls;
+
+  var _React$useContext = React.useContext(_configProvider.ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls;
+
+  var prefixCls = getPrefixCls(_FloatButton.floatButtonPrefixCls, customizePrefixCls);
+  var pureCls = prefixCls + "-pure";
+
+  if (items) {
+    return /*#__PURE__*/React.createElement(_FloatButtonGroup["default"], (0, _extends2["default"])({
+      className: (0, _classnames["default"])(className, pureCls)
+    }, props), items.map(function (item, index) {
+      return /*#__PURE__*/React.createElement(PureFloatButton, (0, _extends2["default"])({
+        key: index
+      }, item));
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement(PureFloatButton, (0, _extends2["default"])({
+    className: (0, _classnames["default"])(className, pureCls)
+  }, props));
+}
+
+var _default = /*#__PURE__*/React.memo(PurePanel);
+
+exports["default"] = _default;

package/lib/float-button/context.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { FloatButtonShape } from './interface';
+declare const FloatButtonGroupContext: React.Context<FloatButtonShape | undefined>;
+export declare const FloatButtonGroupProvider: React.Provider<FloatButtonShape | undefined>;
+export default FloatButtonGroupContext;

package/lib/float-button/context.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.FloatButtonGroupProvider = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var FloatButtonGroupContext = /*#__PURE__*/_react["default"].createContext(undefined);
+
+var FloatButtonGroupProvider = FloatButtonGroupContext.Provider;
+exports.FloatButtonGroupProvider = FloatButtonGroupProvider;
+var _default = FloatButtonGroupContext;
+exports["default"] = _default;

package/lib/float-button/index.d.ts

@@ -0,0 +1,2 @@
+import FloatButton from './FloatButton';
+export default FloatButton;

package/lib/float-button/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _FloatButton = _interopRequireDefault(require("./FloatButton"));
+
+var _FloatButtonGroup = _interopRequireDefault(require("./FloatButtonGroup"));
+
+var _BackTop = _interopRequireDefault(require("./BackTop"));
+
+var _PurePanel = _interopRequireDefault(require("./PurePanel"));
+
+_FloatButton["default"].BackTop = _BackTop["default"];
+_FloatButton["default"].Group = _FloatButtonGroup["default"];
+_FloatButton["default"]._InternalPanelDoNotUseOrYouWillBeFired = _PurePanel["default"];
+var _default = _FloatButton["default"];
+exports["default"] = _default;

package/lib/float-button/interface.d.ts

@@ -0,0 +1,49 @@
+import type React from 'react';
+import type Group from './FloatButtonGroup';
+import type BackTop from './BackTop';
+import type { TooltipProps } from '../tooltip';
+import type PurePanel from './PurePanel';
+export type FloatButtonType = 'default' | 'primary';
+export type FloatButtonShape = 'circle' | 'square';
+export type FloatButtonGroupTrigger = 'click' | 'hover';
+export interface FloatButtonProps {
+    prefixCls?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    icon?: React.ReactNode;
+    description?: React.ReactNode;
+    type?: FloatButtonType;
+    shape?: FloatButtonShape;
+    tooltip?: TooltipProps['title'];
+    href?: string;
+    target?: React.HTMLAttributeAnchorTarget;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+}
+export interface FloatButtonContentProps extends React.DOMAttributes<HTMLDivElement> {
+    className?: string;
+    icon?: FloatButtonProps['icon'];
+    description?: FloatButtonProps['description'];
+    prefixCls: FloatButtonProps['prefixCls'];
+}
+export interface FloatButtonGroupProps extends FloatButtonProps {
+    children: React.ReactNode;
+    trigger?: FloatButtonGroupTrigger;
+    open?: boolean;
+    closeIcon?: React.ReactNode;
+    onOpenChange?: (open: boolean) => void;
+}
+export interface BackTopProps extends Omit<FloatButtonProps, 'target'> {
+    visibilityHeight?: number;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    target?: () => HTMLElement | Window | Document;
+    prefixCls?: string;
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    duration?: number;
+}
+export type CompoundedComponent = React.ForwardRefExoticComponent<FloatButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>> & {
+    Group: typeof Group;
+    BackTop: typeof BackTop;
+    _InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
+};

package/lib/float-button/interface.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/float-button/style/index.d.ts

@@ -0,0 +1,6 @@
+/** Component only token. Which will handle additional calculation of alias token */
+export interface ComponentToken {
+    zIndexPopup: number;
+}
+declare const _default: (prefixCls: string) => import("../../theme/internal").UseComponentStyleResult;
+export default _default;

package/lib/float-button/style/index.js

@@ -0,0 +1,272 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _extends4 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _cssinjs = require("@ant-design/cssinjs");
+
+var _internal = require("../../theme/internal");
+
+var _fade = require("../../style/motion/fade");
+
+var _style = require("../../style");
+
+var _motion = require("../../style/motion/motion");
+
+var initFloatButtonGroupMotion = function initFloatButtonGroupMotion(token) {
+  var _ref2;
+
+  var componentCls = token.componentCls,
+      floatButtonSize = token.floatButtonSize,
+      motionDurationSlow = token.motionDurationSlow,
+      motionEaseInOutCirc = token.motionEaseInOutCirc;
+  var groupPrefixCls = componentCls + "-group";
+  var moveDownIn = new _cssinjs.Keyframes('antFloatButtonMoveDownIn', {
+    '0%': {
+      transform: "translate3d(0, " + floatButtonSize + "px, 0)",
+      transformOrigin: '0 0',
+      opacity: 0
+    },
+    '100%': {
+      transform: 'translate3d(0, 0, 0)',
+      transformOrigin: '0 0',
+      opacity: 1
+    }
+  });
+  var moveDownOut = new _cssinjs.Keyframes('antFloatButtonMoveDownOut', {
+    '0%': {
+      transform: 'translate3d(0, 0, 0)',
+      transformOrigin: '0 0',
+      opacity: 1
+    },
+    '100%': {
+      transform: "translate3d(0, " + floatButtonSize + "px, 0)",
+      transformOrigin: '0 0',
+      opacity: 0
+    }
+  });
+  return [(0, _defineProperty2["default"])({}, groupPrefixCls + "-wrap", (0, _extends4["default"])({}, (0, _motion.initMotion)(groupPrefixCls + "-wrap", moveDownIn, moveDownOut, motionDurationSlow, true))), (0, _defineProperty2["default"])({}, groupPrefixCls + "-wrap", (_ref2 = {}, (0, _defineProperty2["default"])(_ref2, "\n          &" + groupPrefixCls + "-wrap-enter,\n          &" + groupPrefixCls + "-wrap-appear\n        ", {
+    opacity: 0,
+    animationTimingFunction: motionEaseInOutCirc
+  }), (0, _defineProperty2["default"])(_ref2, "&" + groupPrefixCls + "-wrap-leave", {
+    animationTimingFunction: motionEaseInOutCirc
+  }), _ref2))];
+}; // ============================== Group ==============================
+
+
+var floatButtonGroupStyle = function floatButtonGroupStyle(token) {
+  var _extends2, _ref8, _ref11;
+
+  var componentCls = token.componentCls,
+      floatButtonSize = token.floatButtonSize,
+      margin = token.margin,
+      borderRadius = token.borderRadius;
+  var groupPrefixCls = componentCls + "-group";
+  return _ref11 = {}, (0, _defineProperty2["default"])(_ref11, groupPrefixCls, (0, _extends4["default"])((0, _extends4["default"])({}, (0, _style.resetComponent)(token)), (_extends2 = {
+    zIndex: 99,
+    display: 'block',
+    border: 'none',
+    position: 'fixed',
+    width: floatButtonSize,
+    height: 'auto',
+    boxShadow: 'none',
+    minHeight: floatButtonSize,
+    insetInlineEnd: token.floatButtonInsetInlineEnd,
+    insetBlockEnd: token.floatButtonInsetBlockEnd,
+    borderRadius: token.borderRadius
+  }, (0, _defineProperty2["default"])(_extends2, groupPrefixCls + "-wrap", {
+    zIndex: -1,
+    display: 'block',
+    position: 'relative',
+    marginBottom: margin
+  }), (0, _defineProperty2["default"])(_extends2, '&&-rtl', {
+    direction: 'rtl'
+  }), (0, _defineProperty2["default"])(_extends2, componentCls, {
+    position: 'static'
+  }), _extends2))), (0, _defineProperty2["default"])(_ref11, groupPrefixCls + "-circle", (0, _defineProperty2["default"])({}, componentCls + "-circle:not(:last-child)", (0, _defineProperty2["default"])({
+    marginBottom: token.margin
+  }, componentCls + "-body", {
+    width: floatButtonSize,
+    height: floatButtonSize
+  }))), (0, _defineProperty2["default"])(_ref11, groupPrefixCls + "-square", (_ref8 = {}, (0, _defineProperty2["default"])(_ref8, componentCls + "-square", {
+    borderRadius: 0,
+    padding: 0,
+    '&:first-child': {
+      borderStartStartRadius: borderRadius,
+      borderStartEndRadius: borderRadius
+    },
+    '&:last-child': {
+      borderEndStartRadius: borderRadius,
+      borderEndEndRadius: borderRadius
+    },
+    '&:not(:last-child)': {
+      borderBottom: token.lineWidth + "px " + token.lineType + " " + token.colorSplit
+    }
+  }), (0, _defineProperty2["default"])(_ref8, groupPrefixCls + "-wrap", (0, _defineProperty2["default"])({
+    display: 'block',
+    borderRadius: borderRadius,
+    boxShadow: token.boxShadowSecondary,
+    overflow: 'hidden'
+  }, componentCls + "-square", (0, _defineProperty2["default"])({
+    boxShadow: 'none',
+    marginTop: 0,
+    borderRadius: 0,
+    padding: token.paddingXXS,
+    '&:first-child': {
+      borderStartStartRadius: borderRadius,
+      borderStartEndRadius: borderRadius
+    },
+    '&:last-child': {
+      borderEndStartRadius: borderRadius,
+      borderEndEndRadius: borderRadius
+    },
+    '&:not(:last-child)': {
+      borderBottom: token.lineWidth + "px " + token.lineType + " " + token.colorSplit
+    }
+  }, componentCls + "-body", {
+    width: floatButtonSize - token.paddingXXS * 2,
+    height: floatButtonSize - token.paddingXXS * 2
+  }))), _ref8)), (0, _defineProperty2["default"])(_ref11, groupPrefixCls + "-circle-shadow", {
+    boxShadow: 'none'
+  }), (0, _defineProperty2["default"])(_ref11, groupPrefixCls + "-square-shadow", (0, _defineProperty2["default"])({
+    boxShadow: token.boxShadowSecondary
+  }, componentCls + "-square", (0, _defineProperty2["default"])({
+    boxShadow: 'none',
+    padding: token.paddingXXS
+  }, componentCls + "-body", {
+    width: floatButtonSize - token.paddingXXS * 2,
+    height: floatButtonSize - token.paddingXXS * 2
+  }))), _ref11;
+}; // ============================== Shared ==============================
+
+
+var sharedFloatButtonStyle = function sharedFloatButtonStyle(token) {
+  var _ref16, _ref19, _ref22;
+
+  var componentCls = token.componentCls,
+      floatButtonIconSize = token.floatButtonIconSize,
+      floatButtonSize = token.floatButtonSize;
+  return _ref22 = {}, (0, _defineProperty2["default"])(_ref22, componentCls, (0, _extends4["default"])((0, _extends4["default"])({}, (0, _style.resetComponent)(token)), (0, _defineProperty2["default"])({
+    border: 'none',
+    position: 'fixed',
+    cursor: 'pointer',
+    overflow: 'hidden',
+    zIndex: 99,
+    display: 'block',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: floatButtonSize,
+    height: floatButtonSize,
+    insetInlineEnd: token.floatButtonInsetInlineEnd,
+    insetBlockEnd: token.floatButtonInsetBlockEnd,
+    boxShadow: token.boxShadowSecondary,
+    // Pure Panel
+    '&-pure': {
+      position: 'relative',
+      inset: 'auto'
+    },
+    '&:empty': {
+      display: 'none'
+    }
+  }, componentCls + "-body", (0, _defineProperty2["default"])({
+    width: floatButtonSize,
+    height: floatButtonSize,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    transition: "all " + token.motionDurationMid
+  }, componentCls + "-content", (0, _defineProperty2["default"])({
+    overflow: 'hidden',
+    textAlign: 'center',
+    minHeight: floatButtonSize,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: "2px 4px"
+  }, componentCls + "-icon", {
+    textAlign: 'center',
+    margin: 'auto',
+    width: floatButtonIconSize,
+    fontSize: floatButtonIconSize,
+    lineHeight: 1
+  }))))), (0, _defineProperty2["default"])(_ref22, componentCls + "-circle", (0, _defineProperty2["default"])({
+    height: floatButtonSize,
+    borderRadius: '50%'
+  }, componentCls + "-body", {
+    borderRadius: '50%'
+  })), (0, _defineProperty2["default"])(_ref22, componentCls + "-square", (0, _defineProperty2["default"])({
+    height: 'auto',
+    minHeight: floatButtonSize,
+    borderRadius: token.borderRadius
+  }, componentCls + "-body", {
+    height: 'auto',
+    borderRadius: token.borderRadiusSM
+  })), (0, _defineProperty2["default"])(_ref22, componentCls + "-default", (0, _defineProperty2["default"])({
+    backgroundColor: token.floatButtonBackgroundColor,
+    transition: "background-color " + token.motionDurationMid
+  }, componentCls + "-body", (0, _defineProperty2["default"])({
+    backgroundColor: token.floatButtonBackgroundColor,
+    transition: "background-color " + token.motionDurationMid,
+    '&:hover': {
+      backgroundColor: token.colorFillContent
+    }
+  }, componentCls + "-content", (_ref16 = {}, (0, _defineProperty2["default"])(_ref16, componentCls + "-icon", {
+    color: token.colorText
+  }), (0, _defineProperty2["default"])(_ref16, componentCls + "-description", {
+    display: 'flex',
+    alignItems: 'center',
+    lineHeight: token.fontSizeLG + "px",
+    color: token.colorText,
+    fontSize: token.fontSizeSM
+  }), _ref16)))), (0, _defineProperty2["default"])(_ref22, componentCls + "-primary", (0, _defineProperty2["default"])({
+    backgroundColor: token.colorPrimary
+  }, componentCls + "-body", (0, _defineProperty2["default"])({
+    backgroundColor: token.colorPrimary,
+    transition: "background-color " + token.motionDurationMid,
+    '&:hover': {
+      backgroundColor: token.colorPrimaryHover
+    }
+  }, componentCls + "-content", (_ref19 = {}, (0, _defineProperty2["default"])(_ref19, componentCls + "-icon", {
+    color: token.colorTextLightSolid
+  }), (0, _defineProperty2["default"])(_ref19, componentCls + "-description", {
+    display: 'flex',
+    alignItems: 'center',
+    lineHeight: token.fontSizeLG + "px",
+    color: token.colorTextLightSolid,
+    fontSize: token.fontSizeSM
+  }), _ref19)))), _ref22;
+}; // ============================== Export ==============================
+
+
+var _default = (0, _internal.genComponentStyleHook)('FloatButton', function (token) {
+  var colorTextLightSolid = token.colorTextLightSolid,
+      colorBgElevated = token.colorBgElevated,
+      controlHeightLG = token.controlHeightLG,
+      marginXXL = token.marginXXL,
+      marginLG = token.marginLG,
+      fontSize = token.fontSize,
+      fontSizeIcon = token.fontSizeIcon,
+      controlItemBgHover = token.controlItemBgHover;
+  var floatButtonToken = (0, _internal.mergeToken)(token, {
+    floatButtonBackgroundColor: colorBgElevated,
+    floatButtonColor: colorTextLightSolid,
+    floatButtonHoverBackgroundColor: controlItemBgHover,
+    floatButtonFontSize: fontSize,
+    floatButtonIconSize: fontSizeIcon * 1.5,
+    floatButtonSize: controlHeightLG,
+    floatButtonInsetBlockEnd: marginXXL,
+    floatButtonInsetInlineEnd: marginLG
+  });
+  return [floatButtonGroupStyle(floatButtonToken), sharedFloatButtonStyle(floatButtonToken), (0, _fade.initFadeMotion)(token), initFloatButtonGroupMotion(floatButtonToken)];
+});
+
+exports["default"] = _default;