@digitalc/dxp-ui 0.0.5-alpha.15 → 0.0.5-alpha.17

package/es/components/Card/style/index.less

@@ -0,0 +1,45 @@
+
+@import './variables.less';
+
+@components: card;
+.@{prefix}-@{components} {
+  background: #FFFFFF;
+  overflow: unset;
+}
+.@{prefix}-@{components}-whiteDivider,
+.@{prefix}-@{components}-grayDivider {
+  padding: 0;
+  .@{prefix}-@{components}-list {
+    background: #FFFFFF;
+    overflow: unset;
+    > div {
+      position: relative;
+    }
+    > div + div {
+      border-top: 1px dashed #D5D5D5;
+      &::before,
+      &::after {
+        content: '';
+        display: block;
+        height: 16px;
+        width: 8px;
+        position: absolute;
+        z-index: 99;
+        top: -8px;
+        border: 1px solid #d5d5d5;
+      }
+      &::before {
+        left: -1px;
+        border-top-right-radius: 16px;
+        border-bottom-right-radius: 16px;
+        border-left: 0;
+      }
+      &::after {
+        right: -1px;
+        border-top-left-radius: 16px;
+        border-bottom-left-radius: 16px;
+        border-right: 0;
+      }
+    }
+  }
+}

package/es/components/Card/style/variables.less

@@ -0,0 +1,4 @@
+
+@import '../../../style/variables.less';
+
+@btn-primary-bg-default: var(--base-color-primary);

package/es/components/Chip/designTokens.d.ts

@@ -1,4 +1,4 @@
-declare const designTokens: {
+declare const useDesignTokens: () => {
     borderRadiusChip: any;
     colorChipBackgroundStandard: any;
     colorChipBorderStandard: any;
@@ -12,4 +12,4 @@ declare const designTokens: {
     colorChipTextActive: any;
     sizingChipIconClose: any;
 };
-export { designTokens };
+export { useDesignTokens };

package/es/components/Chip/designTokens.js

@@ -1,22 +1,26 @@
-import { getToken } from "../../utils/tokenHelper";
-var designTokens = {
-  borderRadiusChip: getToken('borderRadiusChip'),
-  // 选中的边框颜色
-  colorChipBackgroundStandard: getToken('colorChipBackgroundStandard'),
-  // 选中的label颜色
-  colorChipBorderStandard: getToken('colorChipBorderStandard'),
-  // hover label颜色
-  borderWidthChip: getToken('borderWidthChip'),
-  // active label颜色
-  spacingChipPaddingHorizontal: getToken('spacingChipPaddingHorizontal'),
-  // 默认label颜色
-  spacingChipPaddingVertical: getToken('spacingChipPaddingVertical'),
-  // 未选中的边框
-  colorChipBackgroundHover: getToken('colorChipBackgroundHover'),
-  colorChipTextInactive: getToken('colorChipTextInactive'),
-  colorChipBackgroundActive: getToken('colorChipBackgroundActive'),
-  colorChipBorderActive: getToken('colorChipBorderActive'),
-  colorChipTextActive: getToken('colorChipTextActive'),
-  sizingChipIconClose: getToken('sizingChipIconClose')
+import { useDynamicTokens } from "../../utils";
+var useDesignTokens = function useDesignTokens() {
+  var getToken = useDynamicTokens();
+  var designTokens = {
+    borderRadiusChip: getToken('borderRadiusChip'),
+    // 选中的边框颜色
+    colorChipBackgroundStandard: getToken('colorChipBackgroundStandard'),
+    // 选中的label颜色
+    colorChipBorderStandard: getToken('colorChipBorderStandard'),
+    // hover label颜色
+    borderWidthChip: getToken('borderWidthChip'),
+    // active label颜色
+    spacingChipPaddingHorizontal: getToken('spacingChipPaddingHorizontal'),
+    // 默认label颜色
+    spacingChipPaddingVertical: getToken('spacingChipPaddingVertical'),
+    // 未选中的边框
+    colorChipBackgroundHover: getToken('colorChipBackgroundHover'),
+    colorChipTextInactive: getToken('colorChipTextInactive'),
+    colorChipBackgroundActive: getToken('colorChipBackgroundActive'),
+    colorChipBorderActive: getToken('colorChipBorderActive'),
+    colorChipTextActive: getToken('colorChipTextActive'),
+    sizingChipIconClose: getToken('sizingChipIconClose')
+  };
+  return designTokens;
 };
-export { designTokens };
+export { useDesignTokens };

package/es/components/Chip/index.js

@@ -4,11 +4,11 @@ import "antd/es/tag/style";
 import _Tag from "antd/es/tag";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["types", "children", "prefixCls", "checked", "onChange", "onClose", "style"];
+var _excluded = ["types", "children", "prefixCls", "checked", "onChange", "onClose", "className", "style"];
 import React from 'react';
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { theme } from "../../utils/theme";
-import { designTokens } from "./designTokens";
+import { useDesignTokens } from "./designTokens";
 import { BASE_CLASS_PREFIX } from "../../constants";
 import Text from "../Text";
 import "./style/index.less";
@@ -18,14 +18,17 @@ var Chip = function Chip(props) {
     types = _props$types === void 0 ? 'textOnly' : _props$types,
     children = props.children,
     _props$prefixCls = props.prefixCls,
-    prefixCls = _props$prefixCls === void 0 ? 'tag' : _props$prefixCls,
+    prefixCls = _props$prefixCls === void 0 ? "".concat(BASE_CLASS_PREFIX, "-tag") : _props$prefixCls,
     checked = props.checked,
     _props$onChange = props.onChange,
     onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
     _props$onClose = props.onClose,
     _onClose = _props$onClose === void 0 ? function () {} : _props$onClose,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
     style = props.style,
     attr = _objectWithoutProperties(props, _excluded);
+  var designTokens = useDesignTokens();
   var borderRadiusChip = designTokens.borderRadiusChip,
     colorChipBackgroundStandard = designTokens.colorChipBackgroundStandard,
     colorChipBorderStandard = designTokens.colorChipBorderStandard,
@@ -41,9 +44,7 @@ var Chip = function Chip(props) {
   var useCustomButtonStyle = function useCustomButtonStyle() {
     var hashId = useStyleRegister({
       theme: theme,
-      token: {
-        baseColor: 'blue'
-      },
+      token: {},
       path: ['tag-textonly']
     }, function () {
       return "\n      .tag-textonly {\n        color: ".concat(colorChipTextInactive, ";\n        border-color: ").concat(colorChipBorderStandard, ";\n        border-width: ").concat(borderWidthChip, "px;\n        border-radius: ").concat(borderRadiusChip, "px;\n        background-color: ").concat(colorChipBackgroundStandard, ";\n        padding: ").concat(spacingChipPaddingVertical, "px ").concat(spacingChipPaddingHorizontal, "px;\n      }\n      .tag-textonly:hover {\n        background-color: ").concat(colorChipBackgroundHover, ";\n      }\n      .tag-textonly:active {\n        background-color: ").concat(colorChipBackgroundHover, ";\n      }\n      .tag-active,\n      .tag-active:hover,\n      .tag-active:active {\n        color: ").concat(colorChipTextActive, ";\n        border-color: ").concat(colorChipBorderActive, ";\n        background-color: ").concat(colorChipBackgroundActive, ";\n      }\n    ");
@@ -69,7 +70,7 @@ var Chip = function Chip(props) {
       }
     },
     children: types === 'textOnly' ? /*#__PURE__*/_jsx("span", {
-      className: "".concat(BASE_CLASS_PREFIX, "-").concat(prefixCls, "-").concat(types, " tag-textonly ").concat(checked ? 'tag-active' : ''),
+      className: "".concat(prefixCls, "-").concat(types, " tag-textonly ").concat(checked ? 'tag-active' : '', " ").concat(className),
       onClick: function onClick() {
         return onChange();
       },
@@ -79,7 +80,7 @@ var Chip = function Chip(props) {
         children: children
       })
     }) : /*#__PURE__*/_jsx(_Tag, _objectSpread(_objectSpread({
-      className: "".concat(BASE_CLASS_PREFIX, "-").concat(prefixCls, "-").concat(types),
+      className: "".concat(prefixCls, "-").concat(types, " ").concat(className),
       style: _objectSpread({
         padding: "".concat(spacingChipPaddingVertical, "px ").concat(spacingChipPaddingHorizontal, "px")
       }, style),

package/es/components/Divider/designTokens.d.ts

@@ -0,0 +1,4 @@
+declare const useDesignTokens: () => {
+    borderColor: any;
+};
+export { useDesignTokens };

package/es/components/Divider/designTokens.js

@@ -0,0 +1,9 @@
+import { useDynamicTokens } from "../../utils";
+var useDesignTokens = function useDesignTokens() {
+  var getToken = useDynamicTokens();
+  var designTokens = {
+    borderColor: getToken('colorDivider10Horizontal')
+  };
+  return designTokens;
+};
+export { useDesignTokens };

package/es/components/Divider/index.d.ts

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import './style/index.less';
 export interface DividerProps {
     type?: 'solid' | 'dashed' | 'eight' | 'whiteBg' | 'grayBg' | 'vertical';
@@ -7,10 +7,5 @@ export interface DividerProps {
     style?: React.CSSProperties;
     [key: string]: any;
 }
-export default class Divider extends PureComponent<DividerProps> {
-    static defaultProps: {
-        type: string;
-        prefixCls: string;
-    };
-    render(): React.JSX.Element;
-}
+declare const Divider: (props: DividerProps) => React.JSX.Element;
+export default Divider;

package/es/components/Divider/index.js

@@ -1,55 +1,37 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _excluded = ["children", "className", "prefixCls", "type", "style", "height"];
-import React, { PureComponent } from 'react';
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "className", "type", "prefixCls", "style", "height"];
+import React from 'react';
 import { default as classNames } from 'classnames';
-import TokenManager from "../../utils/tokenManager";
+import { useDesignTokens } from "./designTokens";
 import { cssClasses } from "../../constants";
 import "./style/index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
-var Divider = /*#__PURE__*/function (_PureComponent) {
-  _inherits(Divider, _PureComponent);
-  var _super = _createSuper(Divider);
-  function Divider() {
-    _classCallCheck(this, Divider);
-    return _super.apply(this, arguments);
-  }
-  _createClass(Divider, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        children = _this$props.children,
-        className = _this$props.className,
-        prefixCls = _this$props.prefixCls,
-        type = _this$props.type,
-        style = _this$props.style,
-        height = _this$props.height,
-        attr = _objectWithoutProperties(_this$props, _excluded);
-      var baseProps = {
-        className: classNames(prefixCls, _defineProperty({}, "".concat(prefixCls, "-type-").concat(type), type), className)
-      };
-      return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread(_objectSpread({}, baseProps), attr), {}, {
-        style: _objectSpread(_objectSpread({
-          height: height
-        }, style), {}, {
-          borderColor: TokenManager.tokenKey('colorDivider10Horizontal')
-        }),
-        children: /*#__PURE__*/_jsx("div", {
-          children: children
-        })
-      }));
-    }
-  }]);
-  return Divider;
-}(PureComponent);
-_defineProperty(Divider, "defaultProps", {
-  type: 'solid',
-  prefixCls: cssClasses.PREFIX + '-divider'
-});
-export { Divider as default };
-;
+var Divider = function Divider(props) {
+  var children = props.children,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    _props$type = props.type,
+    type = _props$type === void 0 ? 'solid' : _props$type,
+    _props$prefixCls = props.prefixCls,
+    prefixCls = _props$prefixCls === void 0 ? "".concat(cssClasses.PREFIX, "-divider") : _props$prefixCls,
+    style = props.style,
+    height = props.height,
+    attr = _objectWithoutProperties(props, _excluded);
+  var designTokens = useDesignTokens();
+  var borderColor = designTokens.borderColor;
+  var baseProps = {
+    className: classNames(prefixCls, _defineProperty({}, "".concat(prefixCls, "-type-").concat(type), type), className)
+  };
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread(_objectSpread({}, baseProps), attr), {}, {
+    style: _objectSpread({
+      height: height,
+      borderColor: borderColor
+    }, style),
+    children: /*#__PURE__*/_jsx("div", {
+      children: children
+    })
+  }));
+};
+export default Divider;

package/es/components/Drawer/designTokens.d.ts

@@ -1,4 +1,4 @@
-declare const designTokens: {
+declare const useDesignTokens: () => {
     colorDrawerBackgroundOverlay: any;
     colorDrawerBackgroundStandard: any;
     borderTopLeftRadius: any;
@@ -13,4 +13,4 @@ declare const designTokens: {
     colorDrawerTextHeader: any;
     spacingDrawerListOptionHorizontalGap: any;
 };
-export default designTokens;
+export { useDesignTokens };

package/es/components/Drawer/designTokens.js

@@ -1,27 +1,31 @@
-import TokenManager from "../../utils/tokenManager";
-var designTokens = {
-  colorDrawerBackgroundOverlay: TokenManager.tokenKey('colorDrawerBackgroundOverlay') || 'rgba(0, 0, 0, 0.60)',
-  // 遮罩层背景色
-  colorDrawerBackgroundStandard: TokenManager.tokenKey('colorDrawerBackgroundStandard') || '#FFF',
-  // 内容的底色
-  borderTopLeftRadius: TokenManager.tokenKey('borderRadiusDrawerTopLeft'),
-  // 弹出窗上左上圆角
-  borderTopRightRadius: TokenManager.tokenKey('borderRadiusDrawerTopRight'),
-  // 弹出窗上右上圆角
-  spacingDrawerPaddingHorizontal: TokenManager.tokenKey('spacingDrawerPaddingHorizontal'),
-  // 内部横padding
-  spacingDrawerPaddingBottom: TokenManager.tokenKey('spacingDrawerPaddingBottom'),
-  spacingDrawerPaddingTop: TokenManager.tokenKey('spacingDrawerPaddingTop'),
-  sizingDrawerHandle: TokenManager.tokenKey('sizingDrawerHandle'),
-  // 上部 小滑块的宽
-  colorDrawerHandle: TokenManager.tokenKey('colorDrawerHandle'),
-  // 上部 小滑块的背景色
-  spacingDrawerHandlePaddingTop: TokenManager.tokenKey('spacingDrawerHandlePaddingTop'),
-  // 上部 小滑块
-  spacingDrawerHandlePaddingBottom: TokenManager.tokenKey('spacingDrawerHandlePaddingBottom'),
-  // 上部 小滑块
-  colorDrawerTextHeader: TokenManager.tokenKey('colorDrawerTextHeader'),
-  // title的颜色
-  spacingDrawerListOptionHorizontalGap: TokenManager.tokenKey('spacingDrawerListOptionHorizontalGap') // 间距
+import { useDynamicTokens } from "../../utils";
+var useDesignTokens = function useDesignTokens() {
+  var getToken = useDynamicTokens();
+  var designTokens = {
+    colorDrawerBackgroundOverlay: getToken('colorDrawerBackgroundOverlay') || 'rgba(0, 0, 0, 0.60)',
+    // 遮罩层背景色
+    colorDrawerBackgroundStandard: getToken('colorDrawerBackgroundStandard') || '#FFF',
+    // 内容的底色
+    borderTopLeftRadius: getToken('borderRadiusDrawerTopLeft'),
+    // 弹出窗上左上圆角
+    borderTopRightRadius: getToken('borderRadiusDrawerTopRight'),
+    // 弹出窗上右上圆角
+    spacingDrawerPaddingHorizontal: getToken('spacingDrawerPaddingHorizontal'),
+    // 内部横padding
+    spacingDrawerPaddingBottom: getToken('spacingDrawerPaddingBottom'),
+    spacingDrawerPaddingTop: getToken('spacingDrawerPaddingTop'),
+    sizingDrawerHandle: getToken('sizingDrawerHandle'),
+    // 上部 小滑块的宽
+    colorDrawerHandle: getToken('colorDrawerHandle'),
+    // 上部 小滑块的背景色
+    spacingDrawerHandlePaddingTop: getToken('spacingDrawerHandlePaddingTop'),
+    // 上部 小滑块
+    spacingDrawerHandlePaddingBottom: getToken('spacingDrawerHandlePaddingBottom'),
+    // 上部 小滑块
+    colorDrawerTextHeader: getToken('colorDrawerTextHeader'),
+    // title的颜色
+    spacingDrawerListOptionHorizontalGap: getToken('spacingDrawerListOptionHorizontalGap') // 间距
+  };
+  return designTokens;
 };
-export default designTokens;
+export { useDesignTokens };

package/es/components/Drawer/index.d.ts

@@ -1,18 +1,22 @@
 import React from 'react';
 import './style/index.less';
-export type DrawerType = 'DrawerTypeHandler' | 'DrawerTypeCloseBtn';
+export type DrawerType = 'DrawerTypeHandler' | 'DrawerTypeCloseBtn' | 'DrawerTypeDefault';
 export declare const DrawerTypeEnum: Record<string, DrawerType>;
 export interface BottomDrawerProps {
+    showClose?: boolean;
+    prefix?: string;
+    className?: string;
     visible: boolean;
     onClose: () => void;
     children: React.ReactNode;
     height?: number | string;
     title?: string;
-    drawerType: DrawerType;
+    drawerType?: DrawerType;
     bottomBtnText?: string;
     bottomLinkText?: string;
     showBottomBorder?: boolean;
     showImage?: boolean;
+    showBottomShadow?: boolean;
     imageSrc?: string;
     onLinkClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
     onBottomBtnClick?: (e: React.MouseEvent<HTMLDivElement>) => void;

package/es/components/Drawer/index.js

@@ -1,26 +1,37 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useState, useEffect, useRef } from 'react';
-import designTokens from "./designTokens";
+import { useDesignTokens } from "./designTokens";
+import { isEmpty } from 'lodash';
+import { useStyleRegister } from '@ant-design/cssinjs';
 import { StickyFooter, Text, Image, Icon } from "../index";
 import { cssClasses } from "../../constants";
+import { theme } from "../../utils/theme";
 import "./style/index.less";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var DrawerTypeEnum = {
   DrawerTypeHandler: 'DrawerTypeHandler',
-  DrawerTypeCloseBtn: 'DrawerTypeCloseBtn'
+  DrawerTypeCloseBtn: 'DrawerTypeCloseBtn',
+  DrawerTypeDefault: 'DrawerTypeDefault'
 };
 var BottomDrawer = function BottomDrawer(_ref) {
-  var visible = _ref.visible,
+  var _ref$prefix = _ref.prefix,
+    prefix = _ref$prefix === void 0 ? "".concat(cssClasses.PREFIX, "-drawer") : _ref$prefix,
+    _ref$showClose = _ref.showClose,
+    showClose = _ref$showClose === void 0 ? true : _ref$showClose,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    visible = _ref.visible,
     onClose = _ref.onClose,
     children = _ref.children,
     height = _ref.height,
     title = _ref.title,
     _ref$drawerType = _ref.drawerType,
-    drawerType = _ref$drawerType === void 0 ? DrawerTypeEnum.DrawerTypeHandler : _ref$drawerType,
+    drawerType = _ref$drawerType === void 0 ? DrawerTypeEnum.DrawerTypeDefault : _ref$drawerType,
     bottomBtnText = _ref.bottomBtnText,
     bottomLinkText = _ref.bottomLinkText,
     showBottomBorder = _ref.showBottomBorder,
+    showBottomShadow = _ref.showBottomShadow,
     showImage = _ref.showImage,
     imageSrc = _ref.imageSrc,
     onLinkClick = _ref.onLinkClick,
@@ -60,7 +71,7 @@ var BottomDrawer = function BottomDrawer(_ref) {
       return;
     }
     var timer = setTimeout(function () {
-      var footer = document.querySelector(".".concat(cssClasses.PREFIX, "-stickyFooter"));
+      var footer = document.querySelector(".drawer-sticky");
       if (footer) {
         var observer = new ResizeObserver(function (entries) {
           var contentHeight = (entries === null || entries === void 0 ? void 0 : entries[0].contentRect.height) + 10;
@@ -79,6 +90,7 @@ var BottomDrawer = function BottomDrawer(_ref) {
       return clearTimeout(timer);
     };
   }, [visible]);
+  var designTokens = useDesignTokens();
   var colorDrawerBackgroundOverlay = designTokens.colorDrawerBackgroundOverlay,
     colorDrawerBackgroundStandard = designTokens.colorDrawerBackgroundStandard,
     borderTopLeftRadius = designTokens.borderTopLeftRadius,
@@ -92,95 +104,86 @@ var BottomDrawer = function BottomDrawer(_ref) {
     spacingDrawerListOptionHorizontalGap = designTokens.spacingDrawerListOptionHorizontalGap,
     spacingDrawerPaddingBottom = designTokens.spacingDrawerPaddingBottom,
     spacingDrawerPaddingTop = designTokens.spacingDrawerPaddingTop;
+  var useCustomButtonStyle = function useCustomButtonStyle() {
+    var hashId = useStyleRegister({
+      theme: theme,
+      token: {},
+      path: ["".concat(prefix)]
+    }, function () {
+      return "\n      .".concat(prefix, "-mask {\n        background: ").concat(colorDrawerBackgroundOverlay, ";\n      }\n      .").concat(prefix, "-content {\n        background: ").concat(colorDrawerBackgroundStandard, ";\n        border-top-left-radius: ").concat(borderTopLeftRadius, "px;\n        border-top-right-radius:").concat(borderTopRightRadius, "px;\n        height:").concat(height, "px;\n      }\n      .").concat(prefix, "-inner {\n        padding-left: ").concat(spacingDrawerPaddingHorizontal, "px;\n        padding-right: ").concat(spacingDrawerPaddingHorizontal, "px;\n        padding-bottom:").concat(spacingDrawerPaddingBottom, "px;\n      }\n      .").concat(prefix, "-header {\n        .").concat(prefix, "-header-text {\n          color: ").concat(colorDrawerTextHeader, ";\n          margin-bottom: ").concat(spacingDrawerListOptionHorizontalGap, "px;\n          display: block;\n        }\n        &.center{\n          width: 100%;\n          text-align: center;\n        }\n      }\n      .").concat(prefix, "-handle-bar {\n          width:").concat(sizingDrawerHandle || 0, "px;\n          background: ").concat(colorDrawerHandle, ";\n          margin-top: ").concat(spacingDrawerHandlePaddingTop, "px !important;\n          margin-bottom: ").concat(spacingDrawerHandlePaddingBottom, "px !important;     \n      }\n      .").concat(prefix, "-close-warp {\n        padding-top: ").concat(spacingDrawerPaddingTop, "px;\n        padding-left: ").concat(spacingDrawerPaddingHorizontal, "px;\n        padding-right: ").concat(spacingDrawerPaddingHorizontal, "px;\n      }\n    ");
+    });
+    return hashId;
+  };
+  useCustomButtonStyle();
   if (!isMounted) return null;
-  var borderStyle = showBottomBorder ? {} : {
+  var borderStyle = showBottomBorder ? {} : showBottomShadow ? {
+    boxShadow: '0 -2px 10px 0 rgba(0, 0, 0, 0.06)',
+    border: 'none'
+  } : {
     border: 'none'
   };
+  var paddingStyle = paddingBottom > 0 ? {
+    paddingBottom: "".concat(paddingBottom, "px")
+  } : {};
   var TitleCom = title ? /*#__PURE__*/_jsx("div", {
-    className: "".concat(cssClasses.PREFIX, "-drawer-header"),
+    className: "".concat(prefix, "-header ").concat(drawerType === DrawerTypeEnum.DrawerTypeDefault ? 'center' : ""),
     children: /*#__PURE__*/_jsx(Text, {
+      className: "".concat(prefix, "-header-text"),
       size: "TitleT21Bold",
-      style: {
-        color: colorDrawerTextHeader,
-        marginBottom: "".concat(spacingDrawerListOptionHorizontalGap, "px"),
-        display: 'block'
-      },
       children: title
     })
-  }) : /*#__PURE__*/_jsx(_Fragment, {});
+  }) : /*#__PURE__*/_jsx("div", {});
   return /*#__PURE__*/_jsx("div", {
-    className: "".concat(cssClasses.PREFIX, "-drawer-mask ").concat(visible ? 'visible' : ''),
-    style: {
-      background: colorDrawerBackgroundOverlay
-    },
+    className: "".concat(prefix, "-mask ").concat(visible ? 'visible' : '', " ").concat(className || ''),
     onClick: onClose,
     children: /*#__PURE__*/_jsxs("div", {
-      className: "".concat(cssClasses.PREFIX, "-drawer-content ").concat(visible ? 'active' : ''),
-      style: {
-        height: height,
-        background: colorDrawerBackgroundStandard,
-        borderTopLeftRadius: "".concat(borderTopLeftRadius, "px"),
-        borderTopRightRadius: "".concat(borderTopRightRadius, "px")
-      },
+      className: "".concat(prefix, "-content ").concat(visible ? 'active' : ''),
       onClick: function onClick(e) {
         return e.stopPropagation();
       },
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: "".concat(cssClasses.PREFIX, "-drawer-inner"),
-        style: {
-          paddingLeft: "".concat(spacingDrawerPaddingHorizontal, "px"),
-          paddingRight: "".concat(spacingDrawerPaddingHorizontal, "px"),
-          paddingBottom: "".concat(paddingBottom, "px")
-        },
+      children: [drawerType !== DrawerTypeEnum.DrawerTypeHandler && /*#__PURE__*/_jsxs("div", {
+        className: "".concat(prefix, "-close-warp"),
+        children: [TitleCom, showClose && /*#__PURE__*/_jsx(Icon, {
+          className: "".concat(prefix, "-icon-close"),
+          name: "icon-Close",
+          onClick: onClose
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "".concat(prefix, "-inner"),
+        style: _objectSpread({}, paddingStyle),
         children: [drawerType === DrawerTypeEnum.DrawerTypeHandler && /*#__PURE__*/_jsx("div", {
-          className: "handle-bar",
-          style: {
-            width: sizingDrawerHandle ? "".concat(sizingDrawerHandle, "px") : 0,
-            background: colorDrawerHandle,
-            marginTop: "".concat(spacingDrawerHandlePaddingTop, "px"),
-            marginBottom: "".concat(spacingDrawerHandlePaddingBottom, "px")
-          }
-        }), drawerType === DrawerTypeEnum.DrawerTypeCloseBtn && /*#__PURE__*/_jsxs("div", {
-          className: "close-warp",
-          style: {
-            paddingTop: "".concat(spacingDrawerPaddingTop, "px")
-            // paddingBottom: `${spacingDrawerListOptionHorizontalGap}px`,
-          },
-          children: [/*#__PURE__*/_jsx("div", {
-            children: TitleCom
-          }), /*#__PURE__*/_jsx(Icon, {
-            name: "icon-Close",
-            onClick: onClose
-          })]
+          className: "".concat(prefix, "-handle-bar")
         }), showImage && /*#__PURE__*/_jsx(Image, {
-          radio: 2
-          // preview={false}
-          ,
+          radio: 2,
           src: imageSrc,
           imageSize: "100%",
           style: {
             marginBottom: "".concat(spacingDrawerPaddingBottom, "px")
           }
-        }), drawerType !== DrawerTypeEnum.DrawerTypeCloseBtn && title && TitleCom, children]
-      }), (!!bottomBtnText || !!bottomLinkText) && /*#__PURE__*/_jsx(StickyFooter, {
+        }), drawerType === DrawerTypeEnum.DrawerTypeHandler && title && TitleCom, children]
+      }), (!isEmpty(bottomBtnText) || !isEmpty(bottomLinkText)) && /*#__PURE__*/_jsx(StickyFooter, {
+        className: "drawer-sticky",
         onClick: onBottomBtnClick,
         buttonText: bottomBtnText,
         style: _objectSpread({
           flexDirection: 'column',
           flexShrink: 0
         }, borderStyle),
-        children: !!bottomLinkText && /*#__PURE__*/_jsx(Text, {
-          onClick: function onClick(e) {
-            e === null || e === void 0 || e.stopPropagation();
-            if (onLinkClick) {
-              onLinkClick(e);
-            }
-          },
-          size: "ContentC14TextLink",
-          style: {
-            marginTop: "".concat(spacingDrawerListOptionHorizontalGap, "px")
-          },
-          children: bottomLinkText
+        children: !isEmpty(bottomLinkText) && /*#__PURE__*/_jsx("div", {
+          className: "drawer-link",
+          children: /*#__PURE__*/_jsx(Text, {
+            onClick: function onClick(e) {
+              e === null || e === void 0 || e.stopPropagation();
+              if (onLinkClick) {
+                onLinkClick(e);
+              }
+            },
+            size: "ContentC14TextLink",
+            style: {
+              marginTop: "".concat(spacingDrawerListOptionHorizontalGap, "px")
+            },
+            children: bottomLinkText
+          })
         })
       })]
     })