@king-design/intact 2.1.1 → 3.0.0-beta.1

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

@@ -0,0 +1,17 @@
+import { Component, TypeDefs } from 'intact';
+import { Events } from '../types';
+export interface CopyProps {
+    text: string;
+    showMessage?: boolean;
+}
+export interface CopyEvents {
+    success: [string];
+    error: [];
+}
+export declare class Copy extends Component<CopyProps, CopyEvents> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<CopyProps>>;
+    static defaults: () => Partial<CopyProps>;
+    static events: Events<CopyEvents>;
+    private copy;
+}

package/es/components/copy/index.js

@@ -0,0 +1,43 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component } from 'intact';
+import template from './index.vdt';
+import { useCopy } from './useCopy';
+var typeDefs = {
+  text: String,
+  showMessage: Boolean
+};
+
+var defaults = function defaults() {
+  return {
+    showMessage: true
+  };
+};
+
+var events = {
+  success: true,
+  error: true
+};
+export var Copy = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Copy, _Component);
+
+  function Copy() {
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.copy = useCopy();
+    return _this;
+  }
+
+  return Copy;
+}(Component);
+Copy.template = template;
+Copy.typeDefs = typeDefs;
+Copy.defaults = defaults;
+Copy.events = events;

package/es/components/copy/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/es/components/copy/index.spec.js

@@ -0,0 +1,52 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import BasicDemo from '~/components/copy/demos/basic';
+import { mount, unmount } from '../../test/utils';
+describe('Copy', function () {
+  afterEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            unmount();
+
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('should copy', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _mount, instance, element, text;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
+            element.click();
+            _context2.prev = 2;
+            _context2.next = 5;
+            return navigator.clipboard.readText();
+
+          case 5:
+            text = _context2.sent;
+            expect(text).to.eql('Hello King Desgin!');
+            _context2.next = 12;
+            break;
+
+          case 9:
+            _context2.prev = 9;
+            _context2.t0 = _context2["catch"](2);
+            // Read permisson denied 
+            console.log(_context2.t0);
+
+          case 12:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2, null, [[2, 9]]);
+  })));
+});

package/es/components/copy/index.vdt.js

@@ -0,0 +1,45 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createUnknownComponentVNode as _$cc, className as _$cn } from 'intact';
+import { Icon } from '../icon';
+import { getRestProps } from '../utils';
+import { Virtual } from '../virtual';
+import { Transition } from 'intact';
+import { makeStyles } from './styles';
+import { _$ } from '../../i18n';
+var _$tmp0 = {
+  'key': '2',
+  'className': 'k-icon-truth',
+  'hoverable': true,
+  'color': 'success'
+};
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      children = _this$get.children,
+      className = _this$get.className;
+
+  var _this$copy = this.copy,
+      startCopy = _this$copy.startCopy,
+      success = _this$copy.success;
+  var classNameObj = (_classNameObj = {}, _classNameObj["k-copy"] = true, _classNameObj[makeStyles()] = true, _classNameObj[className] = className, _classNameObj);
+  return _$cc(Transition, {
+    'name': 'k-fade',
+    'children': _$cc(Virtual, _extends({
+      'ev-click': startCopy,
+      'className': _$cn(classNameObj)
+    }, getRestProps(this), {
+      'children': children ? children : !success.value ? _$cc(Icon, {
+        'key': '1',
+        'className': 'k-icon-clone',
+        'hoverable': true,
+        'title': _$('复制')
+      }, '1') : _$cc(Icon, _$tmp0, '2')
+    }))
+  });
+}
+;

package/es/components/copy/styles.d.ts

@@ -0,0 +1,2 @@
+import '../../styles/global';
+export declare function makeStyles(): string;

package/es/components/copy/styles.js

@@ -0,0 +1,14 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+import { css } from '@emotion/css';
+import '../../styles/global';
+export function makeStyles() {
+  return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+    name: "t3aops",
+    styles: "cursor:pointer;vertical-align:middle"
+  } : {
+    name: "t3aops",
+    styles: "cursor:pointer;vertical-align:middle",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  });
+}

package/es/components/copy/useCopy.d.ts

@@ -0,0 +1,4 @@
+export declare function useCopy(): {
+    startCopy: () => void;
+    success: import("../../hooks/useState").State<boolean>;
+};

package/es/components/copy/useCopy.js

@@ -0,0 +1,90 @@
+import { Message } from '../message';
+import { useInstance } from 'intact';
+import { selectValue } from '../utils';
+import { useState } from '../../hooks/useState';
+import { _$ } from '../../i18n';
+export function useCopy() {
+  var instance = useInstance();
+  var success = useState(false);
+  var timer;
+  return {
+    startCopy: function startCopy() {
+      var _instance$get = instance.get(),
+          text = _instance$get.text,
+          showMessage = _instance$get.showMessage;
+
+      if (clipboardCopy(text) || commandCopy(text)) {
+        showMessage && Message.success({
+          content: _$('复制成功')
+        });
+        success.set(true);
+        clearTimeout(timer);
+        timer = window.setTimeout(function () {
+          success.set(false);
+        }, 1000);
+        instance.trigger('success', text);
+      } else {
+        showMessage && Message.error({
+          content: _$('复制失败')
+        });
+        success.set(false);
+        instance.trigger('error');
+      }
+    },
+    success: success
+  };
+} // @reference: https://github.com/zenorocha/clipboard.js/blob/master/src/common/create-fake-element.js
+
+function createFakeElement(value) {
+  var isRTL = document.documentElement.getAttribute('dir') === 'rtl';
+  var fakeElement = document.createElement('textarea'); // Prevent zooming on iOS
+
+  fakeElement.style.fontSize = '12pt'; // Reset box model
+
+  fakeElement.style.border = '0';
+  fakeElement.style.padding = '0';
+  fakeElement.style.margin = '0'; // Move element out of screen horizontally
+
+  fakeElement.style.position = 'absolute';
+  fakeElement.style[isRTL ? 'right' : 'left'] = '-9999px'; // Move element to the same position vertically
+
+  var yPosition = window.pageYOffset || document.documentElement.scrollTop;
+  fakeElement.style.top = yPosition + "px";
+  fakeElement.setAttribute('readonly', '');
+  fakeElement.value = value;
+  return fakeElement;
+}
+
+function clipboardCopy(text) {
+  try {
+    navigator.clipboard.writeText(text);
+    return true;
+  } catch (e) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.log(e);
+    }
+
+    return false;
+  }
+}
+
+function commandCopy(text) {
+  var fakeElement = createFakeElement(text);
+  document.body.appendChild(fakeElement);
+  selectValue(fakeElement);
+  var result;
+
+  try {
+    document.execCommand('copy');
+    result = true;
+  } catch (e) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.log(e);
+    }
+
+    result = false;
+  }
+
+  document.body.removeChild(fakeElement);
+  return result;
+}

package/es/components/datepicker/index.spec.js

@@ -496,7 +496,7 @@ describe('Datepicker', function () {
 
             case 14:
               // remove specified item
-              close = element.querySelector('.k-select-close');
+              close = element.querySelector('.k-tag-close');
               close.click();
               expect(instance.get('date')).have.lengthOf(0);
               _context13.next = 19;

package/es/components/datepicker/index.vdt.js

@@ -68,7 +68,7 @@ export default function ($props, $blocks, $__proto__) {
         }
 
         return _$cc(Tabs, {
-          'type': 'border-card',
+          'type': 'card',
           'value': panel.value,
           'ev-$change:value': panel.set,
           'children': [_$cc(Tab, {

package/es/components/datepicker/styles.d.ts

@@ -16,7 +16,7 @@ declare const defaults: {
             todayBorderColor: string;
         };
         disabled: {
-            color: string;
+            readonly color: string;
             hoverBgColor: string;
         };
         range: {

package/es/components/datepicker/styles.js

@@ -35,7 +35,10 @@ var defaults = {
       todayBorderColor: "transparent"
     },
     disabled: {
-      color: '#ccc',
+      get color() {
+        return theme.color.disabled;
+      },
+
       hoverBgColor: 'none'
     },
     range: {
@@ -80,7 +83,7 @@ export function makePanelStyles() {
   return /*#__PURE__*/css("display:flex;.k-datepicker-shortcuts{width:", datepicker.shortcuts.width, ";padding:", datepicker.shortcuts.padding, ";border-right:", datepicker.border, ";}.k-datepicker-shortcut{height:", datepicker.shortcuts.shortcut.height, ";line-height:", datepicker.shortcuts.shortcut.height, ";padding:", datepicker.shortcuts.shortcut.padding, ";cursor:pointer;&:hover{background:", datepicker.shortcuts.shortcut.hoverBgcolor, ";}}.k-datepicker-calendars{display:flex;}.k-datepicker-calendar-wrapper{&:nth-child(2){border-left:", datepicker.border, ";}.k-tabs{border:none;.k-tabs-wrapper{float:none;}.k-tab{width:50%;}}}.k-datepicker-footer{border-top:", datepicker.border, ";padding:", datepicker.footer.padding, ";text-align:right;}");
 }
 export function makeCalendarStyles() {
-  return /*#__PURE__*/css("padding:", datepicker.padding, ";width:", datepicker.width, ";position:relative;.k-datepicker-month{display:flex;padding:", datepicker.month.padding, ";}.k-month-values{flex:1;font-size:14px;text-align:center;cursor:pointer;overflow:hidden;position:relative;}.k-month-value{margin:0 ", datepicker.month.valueGap, ";line-height:", theme.small.height, ";&:hover{color:", theme.color.primary, ";}},.k-weekdays{display:flex;border-bottom:", datepicker.border, ";padding:", datepicker.weekday.padding, ";}.k-weekday{flex:1;text-align:center;}.k-calendar-item{text-align:center;margin:", datepicker.item.gutter, ";aspect-ratio:1;display:flex;align-items:center;cursor:pointer;position:relative;border-radius:", datepicker.item.borderRadius, ";&.k-hover{background:", datepicker.item.hoverBgColor, ";}&.k-exceed{color:", datepicker.item.exceedColor, ";}&.k-today{border:", datepicker.item.todayBorder, ";}&.k-active{background:", datepicker.item.active.bgColor, ";color:", datepicker.item.active.color, ";&.k-today{border-color:", datepicker.item.active.todayBorderColor, ";}}&.k-disabled{color:", datepicker.item.disabled.color, ";cursor:not-allowed;background:", datepicker.item.disabled.hoverBgColor, ";}&.k-in-range:after{content:'';display:block;position:absolute;box-sizing:content-box;background:", datepicker.item.range.bgColor, ";width:100%;height:100%;left:-", datepicker.item.gutter, ";padding:0 ", datepicker.item.gutter, ";z-index:-1;}.k-value{flex:1;}}.k-days{display:grid;grid-template-columns:repeat(7, 1fr);}.k-years{display:grid;grid-template-columns:repeat(4, 1fr);}");
+  return /*#__PURE__*/css("padding:", datepicker.padding, ";width:", datepicker.width, ";position:relative;.k-datepicker-month{display:flex;padding:", datepicker.month.padding, ";}.k-month-values{flex:1;font-size:14px;text-align:center;cursor:pointer;overflow:hidden;position:relative;}.k-month-value{margin:0 ", datepicker.month.valueGap, ";line-height:", theme.small.height, ";&:hover{color:", theme.color.primary, ";}},.k-weekdays{display:flex;border-bottom:", datepicker.border, ";padding:", datepicker.weekday.padding, ";}.k-weekday{flex:1;text-align:center;}.k-calendar-item{text-align:center;margin:", datepicker.item.gutter, ";aspect-ratio:1;display:flex;align-items:center;cursor:pointer;position:relative;.k-value{border-radius:", datepicker.item.borderRadius, ";}&.k-hover .k-value{background:", datepicker.item.hoverBgColor, ";}&.k-exceed{color:", datepicker.item.exceedColor, ";}&.k-today .k-value{border:", datepicker.item.todayBorder, ";}&.k-active{background:", datepicker.item.active.bgColor, ";color:", datepicker.item.active.color, ";&.k-today .k-value{border-color:", datepicker.item.active.todayBorderColor, ";}}&.k-disabled{color:", datepicker.item.disabled.color, ";cursor:not-allowed;background:", datepicker.item.disabled.hoverBgColor, ";}&.k-in-range:after{content:'';display:block;position:absolute;box-sizing:content-box;background:", datepicker.item.range.bgColor, ";width:100%;height:100%;left:-", datepicker.item.gutter, ";padding:0 ", datepicker.item.gutter, ";z-index:-1;}.k-value{flex:1;display:flex;align-items:center;justify-content:center;height:100%;}}.k-days{display:grid;grid-template-columns:repeat(7, 1fr);}.k-years{display:grid;grid-template-columns:repeat(4, 1fr);}");
 }
 export function makeTimeStyles() {
   return /*#__PURE__*/css("display:flex;padding:", datepicker.padding, ";width:", datepicker.width, ";position:relative;.k-scroll-select{flex:1;height:305px;}");

package/es/components/diagram/shapes/callout.d.ts

@@ -12,7 +12,7 @@ export declare class DCallout extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/es/components/diagram/shapes/circle.d.ts

@@ -12,7 +12,7 @@ export declare class DCircle extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/es/components/diagram/shapes/document.d.ts

@@ -12,7 +12,7 @@ export declare class DDocument extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/es/components/diagram/shapes/ellipse.d.ts

@@ -12,7 +12,7 @@ export declare class DEllipse extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/es/components/diagram/shapes/hexagon.d.ts

@@ -12,7 +12,7 @@ export declare class DHexagon extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/es/components/diagram/shapes/image.d.ts

@@ -18,7 +18,7 @@ export declare class DImage extends DShape<DImageProps> {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/es/components/diagram/shapes/parallelogram.d.ts

@@ -12,7 +12,7 @@ export declare class DParallelogram extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/es/components/diagram/shapes/rectangle.d.ts

@@ -18,7 +18,7 @@ export declare class DRectangle extends DShape<DRectangleProps> {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/es/components/diagram/shapes/square.d.ts

@@ -13,7 +13,7 @@ export declare class DSquare extends DRectangle {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/es/components/diagram/shapes/text.d.ts

@@ -12,7 +12,7 @@ export declare class DText extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/es/components/dialog/alert.vdt.js

@@ -41,11 +41,12 @@ export default function ($props, $blocks, $__proto__) {
     }), (_$blocks['body'] = function ($super) {
       return [_$ce(2, 'div', [!hideIcon && !icon ? _$cc(Icon, {
         'className': _$cn(iconClassName || {
-          "ion-ios-checkmark": type === 'success',
-          "ion-ios-information": type === 'warning',
-          "ion-ios-close": type === 'error',
-          "ion-ios-help": type === 'confirm'
-        })
+          "k-icon-success-fill": type === 'success',
+          "k-icon-warning-fill": type === 'warning',
+          "k-icon-error-fill": type === 'error',
+          "k-icon-question-fill": type === 'confirm'
+        }),
+        'color': type === 'error' ? 'danger' : type === 'confirm' ? 'primary' : type
       }) : undefined, icon], 0, 'k-dialog-tip-icon'), _$ce(2, 'div', [title ? _$ce(2, 'div', title, 0, 'k-alert-dialog-title') : undefined, content], 0, 'k-alert-dialog-wrapper')];
     }, __$blocks['body'] = function ($super, data) {
       var block = $blocks['body'];

package/es/components/dialog/base.vdt.js

@@ -7,7 +7,7 @@ import { Transition } from 'intact';
 import { getRestProps, stopPropagation } from '../utils';
 import { makeDialogStyles, makeWrapperStyles } from './styles';
 var _$tmp0 = {
-  'className': 'ion-ios-close-empty'
+  'className': 'k-icon-close'
 };
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj, _$cn2;
@@ -79,17 +79,16 @@ export default function ($props, $blocks, $__proto__) {
       }, __$blocks['body'](_$no)), 0, 'k-dialog-body'), (_$blocks['footer-wrapper'] = function ($super) {
         return _$ce(2, 'div', (_$blocks['footer'] = function ($super) {
           return [_$cc(Button, {
+            'className': 'k-dialog-cancel',
+            'ev-click': this.cancel,
+            'children': cancelText
+          }), _$cc(Button, {
             'className': 'k-dialog-ok',
             'type': 'primary',
             'ev-click': this.ok,
             'loading': loading,
             'disabled': disabledOk,
             'children': okText
-          }), _$cc(Button, {
-            'className': 'k-dialog-cancel',
-            'type': 'secondary',
-            'ev-click': this.cancel,
-            'children': cancelText
           })];
         }, __$blocks['footer'] = function ($super, data) {
           var block = $blocks['footer'];

package/es/components/dialog/index.spec.js

@@ -201,7 +201,7 @@ describe('Dialog', function () {
     var _mount4 = mount(Demo),
         instance = _mount4[0];
 
-    expect(getElement('.k-dialog-footer').innerText).to.eql('dialog footer 确定取消');
+    expect(getElement('.k-dialog-footer').innerText).to.eql('dialog footer 取消确定');
   });
   it('basic test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
     var _mount5, instance, element, btn, dialog;
@@ -439,7 +439,7 @@ describe('Dialog', function () {
 
           case 4:
             dialog = expectDialog();
-            dialog.querySelector('.k-btn').click();
+            dialog.querySelector('.k-dialog-ok').click();
             _context12.next = 8;
             return wait();
 
@@ -472,7 +472,7 @@ describe('Dialog', function () {
 
           case 21:
             dialog = expectDialog();
-            dialog.querySelector('.k-btn').click();
+            dialog.querySelector('.k-dialog-ok').click();
             cb2 = sinon.spy();
             Dialog.confirm({
               content: 'test',
@@ -489,7 +489,7 @@ describe('Dialog', function () {
 
           case 31:
             expect(cb2.callCount).to.eql(0);
-            getElement('.k-dialog').querySelector('.k-btn').click();
+            getElement('.k-dialog').querySelector('.k-dialog-ok').click();
 
           case 33:
           case "end":

package/es/components/dialog/styles.js

@@ -16,7 +16,7 @@ var defaults = {
   },
 
   padding: '0',
-  margin: '0 20px',
+  margin: '0 24px',
 
   get color() {
     return theme.color.text;
@@ -27,32 +27,33 @@ var defaults = {
   },
 
   get boxShadow() {
-    return theme.boxShadow;
+    return theme.largeBoxShadow;
   },
 
   // header
   header: {
-    fontSize: '16px',
+    fontSize: '14px',
+    fontWeight: '500',
 
     get color() {
       return theme.color.title;
     },
 
-    height: '61px',
-    border: "1px solid #eaeaea",
-    closeTop: '16px',
+    height: '52px',
+    border: "1px solid #e2e5e8",
+    closeTop: '9px',
     closeRight: '-9px',
-    closeIconFontSize: '44px'
+    closeIconFontSize: '16px'
   },
   // body
   body: {
-    padding: "20px"
+    padding: "24px"
   },
   // footer
   footer: {
-    padding: "20px 0",
-    btnGap: "12px",
-    border: "1px solid #eaeaea"
+    padding: "16px 0",
+    btnGap: "8px",
+    border: "1px solid #e2e5e8"
   },
   // transition
   transform: 'translateY(-10px) scale(1.05)',
@@ -62,12 +63,13 @@ var defaults = {
   miniWidth: '400px',
   // alert dialog
   alert: {
-    padding: "0 20px",
+    padding: "0 24px",
     bodyMarginTop: "-25px",
     tipIconMarginBottom: '10px',
     tipIconFontSize: '37px',
     tipIconLineHeight: '37px',
     // with title
+    titleFontWeight: '500',
     titleTipIconFontSize: '37px',
     titleFontSize: '14px',
     wrapperPaddingLeft: '8px',
@@ -85,7 +87,7 @@ export function makeDialogStyles() {
 
   return /*#__PURE__*/css("position:absolute;width:", dialog.width, ";border-radius:", dialog.borderRadius, ";background:", dialog.bgColor, ";font-size:", dialog.fontSize, ";color:", dialog.color, ";box-shadow:", dialog.boxShadow, ";max-width:100%;z-index:", theme.maxZIndex, ";&.k-dragging{cursor:move;user-select:none;}&.transition-enter-active,&.transition-leave-active,&.transition-appear-active{transition:all ", dialog.transition, ";}&.transition-enter-from,&.transition-leave-to,&.transition-appear-from{transform:", dialog.transform, ";opacity:0;}", _mapInstanceProperty(_context = ['large', 'small', 'mini']).call(_context, function (size) {
     return /*#__PURE__*/css("&.k-", size, "{width:", dialog[size + "Width"], ";}");
-  }), ".k-dialog-header{padding:0 ", dialog.padding, ";margin:", dialog.margin, ";border-bottom:", dialog.header.border, ";height:", dialog.header.height, ";line-height:", dialog.header.height, ";font-size:", dialog.header.fontSize, ";color:", dialog.header.color, ";position:relative;}.k-dialog-title{display:inline-block;}.k-dialog-close{position:absolute;right:", dialog.header.closeRight, ";top:", dialog.header.closeTop, ";.k-icon{font-size:", dialog.header.closeIconFontSize, ";}}.k-dialog-body{padding:", dialog.body.padding, ";}.k-dialog-footer{text-align:right;padding:", dialog.footer.padding, ";margin:", dialog.margin, ";border-top:", dialog.footer.border, ";.k-btn{margin-left:", dialog.footer.btnGap, ";}}");
+  }), ".k-dialog-header{padding:0 ", dialog.padding, ";margin:", dialog.margin, ";border-bottom:", dialog.header.border, ";height:", dialog.header.height, ";line-height:", dialog.header.height, ";font-size:", dialog.header.fontSize, ";color:", dialog.header.color, ";position:relative;font-weight:", dialog.header.fontWeight, ";}.k-dialog-title{display:inline-block;}.k-dialog-close{position:absolute;right:", dialog.header.closeRight, ";top:", dialog.header.closeTop, ";.k-icon{font-size:", dialog.header.closeIconFontSize, ";}}.k-dialog-body{padding:", dialog.body.padding, ";}.k-dialog-footer{text-align:right;padding:", dialog.footer.padding, ";margin:", dialog.margin, ";border-top:", dialog.footer.border, ";.k-btn{margin-left:", dialog.footer.btnGap, ";}}");
 }
 export function makeWrapperStyles() {
   // k-fade-leave-active will add position absolute to the styles
@@ -98,5 +100,5 @@ export function makeAlertStyles() {
   return /*#__PURE__*/css("&.k-alert-dialog{.k-dialog-body{margin-top:", dialog.alert.bodyMarginTop, ";padding:", dialog.alert.padding, ";text-align:center;position:relative;z-index:1;}.k-dialog-header,.k-dialog-footer{border:none;}.k-dialog-tip-icon{margin-bottom:", dialog.alert.tipIconMarginBottom, ";.k-icon{font-size:", dialog.alert.tipIconFontSize, ";line-height:", dialog.alert.tipIconLineHeight, ";}}", _mapInstanceProperty(_context2 = ['success', 'warning', 'error', 'confirm']).call(_context2, function (type) {
     var color = type === 'error' ? theme.color.danger : type === 'confirm' ? theme.color.primary : theme.color[type];
     return /*#__PURE__*/css("&.k-", type, "{.k-dialog-tip-icon{color:", color, ";}}");
-  }), " &:not(.k-confirm){.k-dialog-cancel{display:none;}}&.k-with-title{.k-dialog-body{margin-top:", dialog.alert.titleBodyMarginTop, ";text-align:left;}.k-dialog-tip-icon{float:left;.k-icon{font-size:", dialog.alert.titleTipIconFontSize, ";}}.k-alert-dialog-wrapper{overflow:hidden;padding-left:", dialog.alert.wrapperPaddingLeft, ";}.k-alert-dialog-title{line-height:", dialog.alert.tipIconLineHeight, ";font-size:", dialog.alert.titleFontSize, ";}}}");
+  }), " &:not(.k-confirm){.k-dialog-cancel{display:none;}}&.k-with-title{.k-dialog-body{margin-top:", dialog.alert.titleBodyMarginTop, ";text-align:left;}.k-dialog-tip-icon{float:left;.k-icon{font-size:", dialog.alert.titleTipIconFontSize, ";}}.k-alert-dialog-wrapper{overflow:hidden;padding-left:", dialog.alert.wrapperPaddingLeft, ";}.k-alert-dialog-title{line-height:", dialog.alert.tipIconLineHeight, ";font-size:", dialog.alert.titleFontSize, ";font-weight:", dialog.alert.titleFontWeight, ";}}}");
 }