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

package/es/input-number/index.js

@@ -22,13 +22,14 @@ import classNames from 'classnames';
 import RcInputNumber from 'rc-input-number';
 import * as React from 'react';
 import { useContext } from 'react';
-import { ConfigContext } from "../config-provider";
+import ConfigProvider, { ConfigContext } from "../config-provider";
 import DisabledContext from "../config-provider/DisabledContext";
 import SizeContext from "../config-provider/SizeContext";
 import { FormItemInputContext, NoFormStyle } from "../form/context";
 import { NoCompactStyle, useCompactItemContext } from "../space/Compact";
 import { cloneElement } from "../_util/reactNode";
 import { getMergedStatus, getStatusClassNames } from "../_util/statusUtils";
+import useStyle from "./style";
 var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _classNames;
 
@@ -62,26 +63,31 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
       controls = props.controls,
       others = __rest(props, ["className", "size", "disabled", "prefixCls", "addonBefore", "addonAfter", "prefix", "bordered", "readOnly", "status", "controls"]);
 
-  var prefixCls = getPrefixCls('input-number', customizePrefixCls);
+  var prefixCls = getPrefixCls('input-number', customizePrefixCls); // Style
+
+  var _useStyle = useStyle(prefixCls),
+      _useStyle2 = _slicedToArray(_useStyle, 2),
+      wrapSSR = _useStyle2[0],
+      hashId = _useStyle2[1];
 
   var _useCompactItemContex = useCompactItemContext(prefixCls, direction),
       compactSize = _useCompactItemContex.compactSize,
       compactItemClassnames = _useCompactItemContex.compactItemClassnames;
 
   var upIcon = /*#__PURE__*/React.createElement(UpOutlined, {
-    className: "".concat(prefixCls, "-handler-up-inner")
+    className: prefixCls + "-handler-up-inner"
   });
   var downIcon = /*#__PURE__*/React.createElement(DownOutlined, {
-    className: "".concat(prefixCls, "-handler-down-inner")
+    className: prefixCls + "-handler-down-inner"
   });
   var controlsTemp = typeof controls === 'boolean' ? controls : undefined;
 
   if (_typeof(controls) === 'object') {
     upIcon = typeof controls.upIcon === 'undefined' ? upIcon : /*#__PURE__*/React.createElement("span", {
-      className: "".concat(prefixCls, "-handler-up-inner")
+      className: prefixCls + "-handler-up-inner"
     }, controls.upIcon);
     downIcon = typeof controls.downIcon === 'undefined' ? downIcon : /*#__PURE__*/React.createElement("span", {
-      className: "".concat(prefixCls, "-handler-down-inner")
+      className: prefixCls + "-handler-down-inner"
     }, controls.downIcon);
   }
 
@@ -96,7 +102,7 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var disabled = React.useContext(DisabledContext);
   var mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
-  var inputNumberClass = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-lg"), mergeSize === 'large'), _defineProperty(_classNames, "".concat(prefixCls, "-sm"), mergeSize === 'small'), _defineProperty(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _defineProperty(_classNames, "".concat(prefixCls, "-borderless"), !bordered), _defineProperty(_classNames, "".concat(prefixCls, "-in-form-item"), isFormItemInput), _classNames), getStatusClassNames(prefixCls, mergedStatus), compactItemClassnames, className);
+  var inputNumberClass = classNames((_classNames = {}, _defineProperty(_classNames, prefixCls + "-lg", mergeSize === 'large'), _defineProperty(_classNames, prefixCls + "-sm", mergeSize === 'small'), _defineProperty(_classNames, prefixCls + "-rtl", direction === 'rtl'), _defineProperty(_classNames, prefixCls + "-borderless", !bordered), _defineProperty(_classNames, prefixCls + "-in-form-item", isFormItemInput), _classNames), getStatusClassNames(prefixCls, mergedStatus), compactItemClassnames, hashId, className);
   var element = /*#__PURE__*/React.createElement(RcInputNumber, _extends({
     ref: inputRef,
     disabled: mergedDisabled,
@@ -111,7 +117,7 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
   if (prefix != null || hasFeedback) {
     var _classNames2;
 
-    var affixWrapperCls = classNames("".concat(prefixCls, "-affix-wrapper"), getStatusClassNames("".concat(prefixCls, "-affix-wrapper"), mergedStatus, hasFeedback), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-affix-wrapper-focused"), focused), _defineProperty(_classNames2, "".concat(prefixCls, "-affix-wrapper-disabled"), props.disabled), _defineProperty(_classNames2, "".concat(prefixCls, "-affix-wrapper-sm"), size === 'small'), _defineProperty(_classNames2, "".concat(prefixCls, "-affix-wrapper-lg"), size === 'large'), _defineProperty(_classNames2, "".concat(prefixCls, "-affix-wrapper-rtl"), direction === 'rtl'), _defineProperty(_classNames2, "".concat(prefixCls, "-affix-wrapper-readonly"), readOnly), _defineProperty(_classNames2, "".concat(prefixCls, "-affix-wrapper-borderless"), !bordered), _defineProperty(_classNames2, "".concat(className), !(addonBefore || addonAfter) && className), _classNames2));
+    var affixWrapperCls = classNames(prefixCls + "-affix-wrapper", getStatusClassNames(prefixCls + "-affix-wrapper", mergedStatus, hasFeedback), (_classNames2 = {}, _defineProperty(_classNames2, prefixCls + "-affix-wrapper-focused", focused), _defineProperty(_classNames2, prefixCls + "-affix-wrapper-disabled", props.disabled), _defineProperty(_classNames2, prefixCls + "-affix-wrapper-sm", mergeSize === 'small'), _defineProperty(_classNames2, prefixCls + "-affix-wrapper-lg", mergeSize === 'large'), _defineProperty(_classNames2, prefixCls + "-affix-wrapper-rtl", direction === 'rtl'), _defineProperty(_classNames2, prefixCls + "-affix-wrapper-readonly", readOnly), _defineProperty(_classNames2, prefixCls + "-affix-wrapper-borderless", !bordered), _defineProperty(_classNames2, "" + className, !(addonBefore || addonAfter) && className), _classNames2), hashId);
     element = /*#__PURE__*/React.createElement("div", {
       className: affixWrapperCls,
       style: props.style,
@@ -119,7 +125,7 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
         return inputRef.current.focus();
       }
     }, prefix && /*#__PURE__*/React.createElement("span", {
-      className: "".concat(prefixCls, "-prefix")
+      className: prefixCls + "-prefix"
     }, prefix), cloneElement(element, {
       style: null,
       value: props.value,
@@ -136,23 +142,23 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
       }
     }), hasFeedback && /*#__PURE__*/React.createElement("span", {
-      className: "".concat(prefixCls, "-suffix")
+      className: prefixCls + "-suffix"
     }, feedbackIcon));
   }
 
   if (addonBefore != null || addonAfter != null) {
     var _classNames4;
 
-    var wrapperClassName = "".concat(prefixCls, "-group");
-    var addonClassName = "".concat(wrapperClassName, "-addon");
+    var wrapperClassName = prefixCls + "-group";
+    var addonClassName = wrapperClassName + "-addon";
     var addonBeforeNode = addonBefore ? /*#__PURE__*/React.createElement("div", {
       className: addonClassName
     }, addonBefore) : null;
     var addonAfterNode = addonAfter ? /*#__PURE__*/React.createElement("div", {
       className: addonClassName
     }, addonAfter) : null;
-    var mergedWrapperClassName = classNames("".concat(prefixCls, "-wrapper"), wrapperClassName, _defineProperty({}, "".concat(wrapperClassName, "-rtl"), direction === 'rtl'));
-    var mergedGroupClassName = classNames("".concat(prefixCls, "-group-wrapper"), (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefixCls, "-group-wrapper-sm"), size === 'small'), _defineProperty(_classNames4, "".concat(prefixCls, "-group-wrapper-lg"), size === 'large'), _defineProperty(_classNames4, "".concat(prefixCls, "-group-wrapper-rtl"), direction === 'rtl'), _classNames4), getStatusClassNames("".concat(prefixCls, "-group-wrapper"), mergedStatus, hasFeedback), className);
+    var mergedWrapperClassName = classNames(prefixCls + "-wrapper", wrapperClassName, hashId, _defineProperty({}, wrapperClassName + "-rtl", direction === 'rtl'));
+    var mergedGroupClassName = classNames(prefixCls + "-group-wrapper", (_classNames4 = {}, _defineProperty(_classNames4, prefixCls + "-group-wrapper-sm", mergeSize === 'small'), _defineProperty(_classNames4, prefixCls + "-group-wrapper-lg", mergeSize === 'large'), _defineProperty(_classNames4, prefixCls + "-group-wrapper-rtl", direction === 'rtl'), _classNames4), getStatusClassNames(prefixCls + "-group-wrapper", mergedStatus, hasFeedback), hashId, className);
     element = /*#__PURE__*/React.createElement("div", {
       className: mergedGroupClassName,
       style: props.style
@@ -170,6 +176,21 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }, addonAfterNode))));
   }
 
-  return element;
+  return wrapSSR(element);
 });
-export default InputNumber;
+var TypedInputNumber = InputNumber;
+
+var PureInputNumber = function PureInputNumber(props) {
+  return /*#__PURE__*/React.createElement(ConfigProvider, {
+    theme: {
+      components: {
+        InputNumber: {
+          handleVisible: true
+        }
+      }
+    }
+  }, /*#__PURE__*/React.createElement(InputNumber, _extends({}, props)));
+};
+
+TypedInputNumber._InternalPanelDoNotUseOrYouWillBeFired = PureInputNumber;
+export default TypedInputNumber;

package/es/input-number/style/index.d.ts

@@ -1,2 +1,9 @@
-import '../../style/default.less';
-import './index.less';
+export interface ComponentToken {
+    controlWidth: number;
+    handleWidth: number;
+    handleFontSize: number;
+    /** Default `auto`. Set `true` will always show the handle */
+    handleVisible: 'auto' | true;
+}
+declare const _default: (prefixCls: string) => import("../../theme/internal").UseComponentStyleResult;
+export default _default;

package/es/input-number/style/index.js

@@ -1,2 +1,258 @@
-import "../../style/default.less";
-import "./index.less"; // deps-lint-skip: form, space
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { genActiveStyle, genBasicInputStyle, genDisabledStyle, genHoverStyle, genInputGroupStyle, genPlaceholderStyle, genStatusStyle, initInputToken } from "../../input/style";
+import { genComponentStyleHook } from "../../theme/internal";
+import { resetComponent, resetIcon } from "../../style";
+import { genCompactItemStyle } from "../../style/compact-item";
+
+var genInputNumberStyles = function genInputNumberStyles(token) {
+  var _wrapper, _componentCls;
+
+  var componentCls = token.componentCls,
+      lineWidth = token.lineWidth,
+      lineType = token.lineType,
+      colorBorder = token.colorBorder,
+      borderRadius = token.borderRadius,
+      fontSizeLG = token.fontSizeLG,
+      controlHeightLG = token.controlHeightLG,
+      controlHeightSM = token.controlHeightSM,
+      colorError = token.colorError,
+      inputPaddingHorizontalSM = token.inputPaddingHorizontalSM,
+      colorTextDescription = token.colorTextDescription,
+      motionDurationMid = token.motionDurationMid,
+      colorPrimary = token.colorPrimary,
+      controlHeight = token.controlHeight,
+      inputPaddingHorizontal = token.inputPaddingHorizontal,
+      colorBgContainer = token.colorBgContainer,
+      colorTextDisabled = token.colorTextDisabled,
+      borderRadiusSM = token.borderRadiusSM,
+      borderRadiusLG = token.borderRadiusLG,
+      controlWidth = token.controlWidth,
+      handleVisible = token.handleVisible;
+  return [_defineProperty({}, componentCls, _extends(_extends(_extends(_extends(_extends(_extends({}, resetComponent(token)), genBasicInputStyle(token)), genStatusStyle(token)), {
+    display: 'inline-block',
+    width: controlWidth,
+    margin: 0,
+    padding: 0,
+    border: lineWidth + "px " + lineType + " " + colorBorder,
+    borderRadius: borderRadius
+  }), genCompactItemStyle(token, componentCls)), _defineProperty({
+    '&-rtl': _defineProperty({
+      direction: 'rtl'
+    }, componentCls + "-input", {
+      direction: 'rtl'
+    }),
+    '&-lg': _defineProperty({
+      padding: 0,
+      fontSize: fontSizeLG,
+      borderRadius: borderRadiusLG
+    }, "input" + componentCls + "-input", {
+      height: controlHeightLG - 2 * lineWidth
+    }),
+    '&-sm': _defineProperty({
+      padding: 0,
+      borderRadius: borderRadiusSM
+    }, "input" + componentCls + "-input", {
+      height: controlHeightSM - 2 * lineWidth,
+      padding: "0 " + inputPaddingHorizontalSM + "px"
+    }),
+    '&:hover': _extends({}, genHoverStyle(token)),
+    '&-focused': _extends({}, genActiveStyle(token)),
+    '&-disabled': _extends(_extends({}, genDisabledStyle(token)), _defineProperty({}, componentCls + "-input", {
+      cursor: 'not-allowed'
+    })),
+    // ===================== Out Of Range =====================
+    '&-out-of-range': {
+      input: {
+        color: colorError
+      }
+    },
+    // Style for input-group: input with label, with button or dropdown...
+    '&-group': _extends(_extends(_extends({}, resetComponent(token)), genInputGroupStyle(token)), {
+      '&-wrapper': (_wrapper = {
+        display: 'inline-block',
+        textAlign: 'start',
+        verticalAlign: 'top'
+      }, _defineProperty(_wrapper, componentCls + "-affix-wrapper", {
+        width: '100%'
+      }), _defineProperty(_wrapper, '&-lg', _defineProperty({}, componentCls + "-group-addon", {
+        borderRadius: borderRadiusLG
+      })), _defineProperty(_wrapper, '&-sm', _defineProperty({}, componentCls + "-group-addon", {
+        borderRadius: borderRadiusSM
+      })), _wrapper)
+    })
+  }, componentCls, {
+    '&-input': _extends(_extends({
+      width: '100%',
+      height: controlHeight - 2 * lineWidth,
+      padding: "0 " + inputPaddingHorizontal + "px",
+      textAlign: 'start',
+      backgroundColor: 'transparent',
+      border: 0,
+      borderRadius: borderRadius,
+      outline: 0,
+      transition: "all " + motionDurationMid + " linear",
+      appearance: 'textfield',
+      color: token.colorText,
+      fontSize: 'inherit',
+      verticalAlign: 'top'
+    }, genPlaceholderStyle(token.colorTextPlaceholder)), {
+      '&[type="number"]::-webkit-inner-spin-button, &[type="number"]::-webkit-outer-spin-button': {
+        margin: 0,
+
+        /* stylelint-disable-next-line property-no-vendor-prefix */
+        webkitAppearance: 'none',
+        appearance: 'none'
+      }
+    })
+  }))), // Handler
+  _defineProperty({}, componentCls, (_componentCls = {}, _defineProperty(_componentCls, "&:hover " + componentCls + "-handler-wrap, &-focused " + componentCls + "-handler-wrap", {
+    opacity: 1
+  }), _defineProperty(_componentCls, componentCls + "-handler-wrap", _defineProperty({
+    position: 'absolute',
+    insetBlockStart: 0,
+    insetInlineEnd: 0,
+    width: token.handleWidth,
+    height: '100%',
+    background: colorBgContainer,
+    borderStartStartRadius: 0,
+    borderStartEndRadius: borderRadius,
+    borderEndEndRadius: borderRadius,
+    borderEndStartRadius: 0,
+    opacity: handleVisible === true ? 1 : 0,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    transition: "opacity " + motionDurationMid + " linear " + motionDurationMid
+  }, componentCls + "-handler", _defineProperty({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: 'auto',
+    height: '40%'
+  }, "\n              " + componentCls + "-handler-up-inner,\n              " + componentCls + "-handler-down-inner\n            ", {
+    marginInlineEnd: 0,
+    fontSize: token.handleFontSize
+  }))), _defineProperty(_componentCls, componentCls + "-handler", {
+    height: '50%',
+    overflow: 'hidden',
+    color: colorTextDescription,
+    fontWeight: 'bold',
+    lineHeight: 0,
+    textAlign: 'center',
+    cursor: 'pointer',
+    borderInlineStart: lineWidth + "px " + lineType + " " + colorBorder,
+    transition: "all " + motionDurationMid + " linear",
+    '&:active': {
+      background: token.colorFillAlter
+    },
+    // Hover
+    '&:hover': _defineProperty({
+      height: "60%"
+    }, "\n              " + componentCls + "-handler-up-inner,\n              " + componentCls + "-handler-down-inner\n            ", {
+      color: colorPrimary
+    }),
+    '&-up-inner, &-down-inner': _extends(_extends({}, resetIcon()), {
+      color: colorTextDescription,
+      transition: "all " + motionDurationMid + " linear",
+      userSelect: 'none'
+    })
+  }), _defineProperty(_componentCls, componentCls + "-handler-up", {
+    borderStartEndRadius: borderRadius
+  }), _defineProperty(_componentCls, componentCls + "-handler-down", {
+    borderBlockStart: lineWidth + "px " + lineType + " " + colorBorder,
+    borderEndEndRadius: borderRadius
+  }), _defineProperty(_componentCls, '&-disabled, &-readonly', _defineProperty({}, componentCls + "-handler-wrap", {
+    display: 'none'
+  })), _defineProperty(_componentCls, "\n          " + componentCls + "-handler-up-disabled,\n          " + componentCls + "-handler-down-disabled\n        ", {
+    cursor: 'not-allowed'
+  }), _defineProperty(_componentCls, "\n          " + componentCls + "-handler-up-disabled:hover &-handler-up-inner,\n          " + componentCls + "-handler-down-disabled:hover &-handler-down-inner\n        ", {
+    color: colorTextDisabled
+  }), _componentCls)), // Border-less
+  _defineProperty({}, componentCls + "-borderless", _defineProperty({
+    borderColor: 'transparent',
+    boxShadow: 'none'
+  }, componentCls + "-handler-down", {
+    borderBlockStartWidth: 0
+  }))];
+};
+
+var genAffixWrapperStyles = function genAffixWrapperStyles(token) {
+  var _extends4;
+
+  var componentCls = token.componentCls,
+      inputPaddingHorizontal = token.inputPaddingHorizontal,
+      inputAffixPadding = token.inputAffixPadding,
+      controlWidth = token.controlWidth,
+      borderRadiusLG = token.borderRadiusLG,
+      borderRadiusSM = token.borderRadiusSM;
+  return _defineProperty({}, componentCls + "-affix-wrapper", _extends(_extends(_extends({}, genBasicInputStyle(token)), genStatusStyle(token)), (_extends4 = {
+    // or number handler will cover form status
+    position: 'relative',
+    display: 'inline-flex',
+    width: controlWidth,
+    padding: 0,
+    paddingInlineStart: inputPaddingHorizontal,
+    '&-lg': {
+      borderRadius: borderRadiusLG
+    },
+    '&-sm': {
+      borderRadius: borderRadiusSM
+    },
+    '&:not(&-disabled):hover': _extends(_extends({}, genHoverStyle(token)), {
+      zIndex: 1
+    }),
+    '&-focused, &:focus': {
+      zIndex: 1
+    },
+    '&-disabled': _defineProperty({}, componentCls + "[disabled]", {
+      background: 'transparent'
+    })
+  }, _defineProperty(_extends4, "> div" + componentCls, _defineProperty({
+    width: '100%',
+    border: 'none',
+    outline: 'none'
+  }, "&" + componentCls + "-focused", {
+    boxShadow: 'none !important'
+  })), _defineProperty(_extends4, "input" + componentCls + "-input", {
+    padding: 0
+  }), _defineProperty(_extends4, '&::before', {
+    width: 0,
+    visibility: 'hidden',
+    content: '"\\a0"'
+  }), _defineProperty(_extends4, componentCls + "-handler-wrap", {
+    zIndex: 2
+  }), _defineProperty(_extends4, componentCls, {
+    '&-prefix, &-suffix': {
+      display: 'flex',
+      flex: 'none',
+      alignItems: 'center',
+      pointerEvents: 'none'
+    },
+    '&-prefix': {
+      marginInlineEnd: inputAffixPadding
+    },
+    '&-suffix': {
+      position: 'absolute',
+      insetBlockStart: 0,
+      insetInlineEnd: 0,
+      zIndex: 1,
+      height: '100%',
+      marginInlineEnd: inputPaddingHorizontal,
+      marginInlineStart: inputAffixPadding
+    }
+  }), _extends4)));
+}; // ============================== Export ==============================
+
+
+export default genComponentStyleHook('InputNumber', function (token) {
+  var inputNumberToken = initInputToken(token);
+  return [genInputNumberStyles(inputNumberToken), genAffixWrapperStyles(inputNumberToken)];
+}, function (token) {
+  return {
+    controlWidth: 90,
+    handleWidth: token.controlHeightSM - token.lineWidth * 2,
+    handleFontSize: token.fontSize / 2,
+    handleVisible: 'auto'
+  };
+});

package/es/layout/Sider.js

@@ -40,7 +40,7 @@ var generateId = function () {
   return function () {
     var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     i += 1;
-    return "".concat(prefix).concat(i);
+    return "" + prefix + i;
   };
 }();
 
@@ -120,7 +120,7 @@ var Sider = /*#__PURE__*/React.forwardRef(function (_a, ref) {
           matchMedia = _window.matchMedia;
 
       if (matchMedia && breakpoint && breakpoint in dimensionMaxMap) {
-        mql = matchMedia("(max-width: ".concat(dimensionMaxMap[breakpoint], ")"));
+        mql = matchMedia("(max-width: " + dimensionMaxMap[breakpoint] + ")");
 
         try {
           mql.addEventListener('change', responsiveHandler);
@@ -163,11 +163,11 @@ var Sider = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     var divProps = omit(props, ['collapsed']);
     var rawWidth = collapsed ? collapsedWidth : width; // use "px" as fallback unit for width
 
-    var siderWidth = isNumeric(rawWidth) ? "".concat(rawWidth, "px") : String(rawWidth); // special trigger when collapsedWidth == 0
+    var siderWidth = isNumeric(rawWidth) ? rawWidth + "px" : String(rawWidth); // special trigger when collapsedWidth == 0
 
     var zeroWidthTrigger = parseFloat(String(collapsedWidth || 0)) === 0 ? /*#__PURE__*/React.createElement("span", {
       onClick: toggle,
-      className: classNames("".concat(prefixCls, "-zero-width-trigger"), "".concat(prefixCls, "-zero-width-trigger-").concat(reverseArrow ? 'right' : 'left')),
+      className: classNames(prefixCls + "-zero-width-trigger", prefixCls + "-zero-width-trigger-" + (reverseArrow ? 'right' : 'left')),
       style: zeroWidthTriggerStyle
     }, trigger || /*#__PURE__*/React.createElement(BarsOutlined, null)) : null;
     var iconObj = {
@@ -177,7 +177,7 @@ var Sider = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     var status = collapsed ? 'collapsed' : 'expanded';
     var defaultTrigger = iconObj[status];
     var triggerDom = trigger !== null ? zeroWidthTrigger || /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-trigger"),
+      className: prefixCls + "-trigger",
       onClick: toggle,
       style: {
         width: siderWidth
@@ -185,20 +185,20 @@ var Sider = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }, trigger || defaultTrigger) : null;
 
     var divStyle = _extends(_extends({}, style), {
-      flex: "0 0 ".concat(siderWidth),
+      flex: "0 0 " + siderWidth,
       maxWidth: siderWidth,
       minWidth: siderWidth,
       width: siderWidth
     });
 
-    var siderCls = classNames(prefixCls, "".concat(prefixCls, "-").concat(theme), (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-collapsed"), !!collapsed), _defineProperty(_classNames, "".concat(prefixCls, "-has-trigger"), collapsible && trigger !== null && !zeroWidthTrigger), _defineProperty(_classNames, "".concat(prefixCls, "-below"), !!below), _defineProperty(_classNames, "".concat(prefixCls, "-zero-width"), parseFloat(siderWidth) === 0), _classNames), className);
+    var siderCls = classNames(prefixCls, prefixCls + "-" + theme, (_classNames = {}, _defineProperty(_classNames, prefixCls + "-collapsed", !!collapsed), _defineProperty(_classNames, prefixCls + "-has-trigger", collapsible && trigger !== null && !zeroWidthTrigger), _defineProperty(_classNames, prefixCls + "-below", !!below), _defineProperty(_classNames, prefixCls + "-zero-width", parseFloat(siderWidth) === 0), _classNames), className);
     return /*#__PURE__*/React.createElement("aside", _extends({
       className: siderCls
     }, divProps, {
       style: divStyle,
       ref: ref
     }), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-children")
+      className: prefixCls + "-children"
     }, children), collapsible || below && zeroWidthTrigger ? triggerDom : null);
   };
 

package/es/layout/index.d.ts

@@ -1,13 +1,13 @@
 import InternalLayout, { Content, Footer, Header } from './layout';
 import Sider from './Sider';
-export { BasicProps as LayoutProps } from './layout';
-export { SiderProps } from './Sider';
+export type { BasicProps as LayoutProps } from './layout';
+export type { SiderProps } from './Sider';
 type InternalLayoutType = typeof InternalLayout;
-interface LayoutType extends InternalLayoutType {
+type CompoundedComponent = InternalLayoutType & {
     Header: typeof Header;
     Footer: typeof Footer;
     Content: typeof Content;
     Sider: typeof Sider;
-}
-declare const Layout: LayoutType;
+};
+declare const Layout: CompoundedComponent;
 export default Layout;

package/es/layout/layout.js

@@ -19,6 +19,7 @@ var __rest = this && this.__rest || function (s, e) {
 import classNames from 'classnames';
 import * as React from 'react';
 import { ConfigContext } from "../config-provider";
+import useStyle from "./style";
 export var LayoutContext = /*#__PURE__*/React.createContext({
   siderHook: {
     addSider: function addSider() {
@@ -88,7 +89,12 @@ var BasicLayout = /*#__PURE__*/React.forwardRef(function (props, ref) {
       Tag = props.tagName,
       others = __rest(props, ["prefixCls", "className", "children", "hasSider", "tagName"]);
 
-  var classString = classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-has-sider"), typeof hasSider === 'boolean' ? hasSider : siders.length > 0), _defineProperty(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _classNames), className);
+  var _useStyle = useStyle(prefixCls),
+      _useStyle2 = _slicedToArray(_useStyle, 2),
+      wrapSSR = _useStyle2[0],
+      hashId = _useStyle2[1];
+
+  var classString = classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, prefixCls + "-has-sider", typeof hasSider === 'boolean' ? hasSider : siders.length > 0), _defineProperty(_classNames, prefixCls + "-rtl", direction === 'rtl'), _classNames), className, hashId);
   var contextValue = React.useMemo(function () {
     return {
       siderHook: {
@@ -107,12 +113,12 @@ var BasicLayout = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     };
   }, []);
-  return /*#__PURE__*/React.createElement(LayoutContext.Provider, {
+  return wrapSSR( /*#__PURE__*/React.createElement(LayoutContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(Tag, _extends({
     ref: ref,
     className: classString
-  }, others), children));
+  }, others), children)));
 });
 var Layout = generator({
   suffixCls: 'layout',

package/es/layout/style/index.d.ts

@@ -1,2 +1,16 @@
-import '../../style/default.less';
-import './index.less';
+import type { FullToken } from '../../theme/internal';
+export interface ComponentToken {
+    colorBgHeader: string;
+    colorBgBody: string;
+    colorBgTrigger: string;
+}
+export interface LayoutToken extends FullToken<'Layout'> {
+    layoutHeaderHeight: number;
+    layoutHeaderPaddingInline: number;
+    layoutHeaderColor: string;
+    layoutFooterPadding: string;
+    layoutTriggerHeight: number;
+    layoutZeroTriggerSize: number;
+}
+declare const _default: (prefixCls: string) => import("../../theme/internal").UseComponentStyleResult;
+export default _default;