antd-mobile 0.0.0-dev-626cbf51f → 0.0.0-dev.92d6290f7

package/cjs/utils/render-imperatively.js

@@ -17,6 +17,8 @@ function renderImperatively(element) {
   const Wrapper = _react.default.forwardRef((_, ref) => {
     const [visible, setVisible] = (0, _react.useState)(false);
     const closedRef = (0, _react.useRef)(false);
+    const [elementToRender, setElementToRender] = (0, _react.useState)(element);
+    const keyRef = (0, _react.useRef)(0);
     (0, _react.useEffect)(() => {
       if (!closedRef.current) {
         setVisible(true);
@@ -30,20 +32,28 @@ function renderImperatively(element) {
 
       closedRef.current = true;
       setVisible(false);
-      (_b = (_a = element.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+      (_b = (_a = elementToRender.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
     }
 
     function afterClose() {
       var _a, _b;
 
       unmount();
-      (_b = (_a = element.props).afterClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+      (_b = (_a = elementToRender.props).afterClose) === null || _b === void 0 ? void 0 : _b.call(_a);
     }
 
     (0, _react.useImperativeHandle)(ref, () => ({
-      close: onClose
+      close: onClose,
+      replace: element => {
+        var _a, _b;
+
+        keyRef.current++;
+        (_b = (_a = elementToRender.props).afterClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+        setElementToRender(element);
+      }
     }));
-    return _react.default.cloneElement(element, Object.assign(Object.assign({}, element.props), {
+    return _react.default.cloneElement(elementToRender, Object.assign(Object.assign({}, elementToRender.props), {
+      key: keyRef.current,
       visible,
       onClose,
       afterClose
@@ -55,14 +65,16 @@ function renderImperatively(element) {
   const unmount = (0, _renderToBody.renderToBody)(_react.default.createElement(Wrapper, {
     ref: wrapperRef
   }));
+  return {
+    close: () => {
+      var _a;
 
-  function close() {
-    var _a;
-
-    (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.close();
-  }
+      (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.close();
+    },
+    replace: element => {
+      var _a;
 
-  return {
-    close
+      (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.replace(element);
+    }
   };
 }

package/cjs/utils/render.js

@@ -26,13 +26,23 @@ let createRoot;
 try {
   const mainVersion = Number((version || '').split('.')[0]);
 
-  if (mainVersion >= 18) {
+  if (mainVersion >= 18 && fullClone.createRoot) {
     // eslint-disable-next-line @typescript-eslint/no-var-requires
-    createRoot = require('react-dom/client').createRoot;
+    createRoot = fullClone.createRoot;
   }
 } catch (e) {// Do nothing;
 }
 
+function toggleWarning(skip) {
+  const {
+    __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
+  } = fullClone;
+
+  if (__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED && typeof __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED === 'object') {
+    __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.usingClientEntryPoint = skip;
+  }
+}
+
 const MARK = '__antd_mobile_root__';
 
 function legacyRender(node, container) {
@@ -40,7 +50,9 @@ function legacyRender(node, container) {
 }
 
 function concurrentRender(node, container) {
+  toggleWarning(true);
   const root = container[MARK] || createRoot(container);
+  toggleWarning(false);
   root.render(node);
   container[MARK] = root;
 }

package/cjs/utils/use-drag-and-pinch.d.ts

@@ -1 +1 @@
-export declare const useDragAndPinch: <Config extends import("@use-gesture/react").UserGestureConfig = import("@use-gesture/react").UserGestureConfig>(_handlers: Partial<import("@use-gesture/react").NativeHandlers<import("@use-gesture/react").EventTypes> & import("@use-gesture/react").UserHandlers<import("@use-gesture/react").EventTypes>>, _config?: Config | undefined) => Config["target"] extends object ? void : (...args: any[]) => import("@use-gesture/react").ReactDOMAttributes;
+export declare const useDragAndPinch: <Config extends import("@use-gesture/react").UserGestureConfig = import("@use-gesture/react").UserGestureConfig>(_handlers: Partial<import("@use-gesture/react").NativeHandlers<import("@use-gesture/react").EventTypes> & import("@use-gesture/react").UserHandlers<import("@use-gesture/react").EventTypes>>, _config?: Config | undefined) => Config["target"] extends object ? void : (...args: any[]) => import("@use-gesture/react/dist/declarations/src/types").ReactDOMAttributes;

package/cjs/utils/use-inner-visible.d.ts

@@ -0,0 +1 @@
+export declare function useInnerVisible(outerVisible: boolean): boolean;

package/cjs/utils/use-inner-visible.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useInnerVisible = useInnerVisible;
+
+var _react = require("react");
+
+var _ahooks = require("ahooks");
+
+function useInnerVisible(outerVisible) {
+  const [innerVisible, setInnerVisible] = (0, _react.useState)(outerVisible);
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
+    setInnerVisible(outerVisible);
+  }, [outerVisible]);
+  return innerVisible;
+}

package/cjs/utils/use-props-value.d.ts

@@ -4,5 +4,5 @@ declare type Options<T> = {
     defaultValue: T;
     onChange?: (v: T) => void;
 };
-export declare function usePropsValue<T>(options: Options<T>): readonly [T, (v: SetStateAction<T>) => void];
+export declare function usePropsValue<T>(options: Options<T>): readonly [T, (v: SetStateAction<T>, forceTrigger?: boolean) => void];
 export {};

package/cjs/utils/use-props-value.js

@@ -22,15 +22,13 @@ function usePropsValue(options) {
     stateRef.current = value;
   }
 
-  const setState = (0, _ahooks.useMemoizedFn)(v => {
+  const setState = (0, _ahooks.useMemoizedFn)((v, forceTrigger = false) => {
+    // `forceTrigger` means trigger `onChange` even if `v` is the same as `stateRef.current`
     const nextValue = typeof v === 'function' ? v(stateRef.current) : v;
-
-    if (value === undefined) {
-      stateRef.current = nextValue;
-      update();
-    }
-
-    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
+    if (!forceTrigger && nextValue === stateRef.current) return;
+    stateRef.current = nextValue;
+    update();
+    return onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
   });
   return [stateRef.current, setState];
 }

package/cjs/utils/use-resize-effect.js

@@ -14,11 +14,13 @@ function useResizeEffect(effect, targetRef) {
     if (!target) return;
 
     if (window.ResizeObserver) {
+      let animationFrame;
       const observer = new ResizeObserver(() => {
-        fn(target);
+        animationFrame = window.requestAnimationFrame(() => fn(target));
       });
       observer.observe(target);
       return () => {
+        window.cancelAnimationFrame(animationFrame);
         observer.disconnect();
       };
     } else {

package/cjs/utils/use-tab-list-scroll.js

@@ -45,7 +45,7 @@ const useTabListScroll = (targetRef, activeIndex) => {
       from: {
         scrollLeft: containerScrollLeft
       },
-      immediate
+      immediate: immediate && !scrollLeft.isAnimating
     });
   }
 

package/cjs/utils/with-default-props.js

@@ -5,20 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mergeProps = mergeProps;
 
-var _assign = _interopRequireDefault(require("lodash/assign"));
-
 var _assignWith = _interopRequireDefault(require("lodash/assignWith"));
 
-var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function mergeProps(...items) {
   function customizer(objValue, srcValue) {
-    return (0, _isUndefined.default)(srcValue) ? objValue : srcValue;
+    return srcValue === undefined ? objValue : srcValue;
   }
 
-  let ret = (0, _assign.default)({}, items[0]);
+  let ret = Object.assign({}, items[0]);
 
   for (let i = 1; i < items.length; i++) {
     ret = (0, _assignWith.default)(ret, items[i], customizer);

package/es/components/action-sheet/action-sheet.css

@@ -7,34 +7,49 @@
   display: flex;
   justify-content: center;
   color: var(--adm-color-weak);
-  font-size: 15px;
-  padding: 18px 16px;
-  border-bottom: 1px solid var(--adm-border-color);
+  font-size: var(--adm-font-size-7);
+  padding: 18px 12px;
+  border-bottom: 1px solid var(--adm-color-border);
+}
+.adm-action-sheet-button-list {
+  border-bottom: 1px solid var(--adm-color-border);
 }
 .adm-action-sheet-button-item-wrapper {
-  background-color: #ffffff;
-  border-top: 1px solid var(--adm-border-color);
+  border-bottom: 1px solid var(--adm-color-border);
 }
-.adm-action-sheet-button-item-wrapper:first-child {
-  border-top: none;
+.adm-action-sheet-button-item-wrapper:last-child {
+  border-bottom: none;
 }
 .adm-action-sheet-button-item {
-  padding: 14px;
   text-align: center;
+  display: block;
+  background-color: var(--adm-color-background);
+  padding: 16px;
+}
+.adm-action-sheet-button-item:active {
+  background-color: #eeeeee;
+}
+.adm-action-sheet-button-item-disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.4;
 }
 .adm-action-sheet-button-item-name {
   color: var(--adm-color-text);
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
 }
 .adm-action-sheet-button-item-description {
-  font-size: 12px;
+  font-size: var(--adm-font-size-6);
   color: var(--adm-color-weak);
   padding-top: 4px;
 }
 .adm-action-sheet-button-item-danger .adm-action-sheet-button-item-name {
   color: var(--adm-color-danger);
 }
+.adm-action-sheet-button-item-bold .adm-action-sheet-button-item-name {
+  font-weight: bold;
+}
 .adm-action-sheet-cancel {
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
   padding-top: 8px;
 }

package/es/components/action-sheet/action-sheet.d.ts

@@ -1,12 +1,13 @@
 import React, { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
-import { GetContainer } from '../../utils/render-to-container';
+import { PopupProps } from '../popup';
 export declare type Action = {
     key: string | number;
     text: ReactNode;
     disabled?: boolean;
     description?: ReactNode;
     danger?: boolean;
+    bold?: boolean;
     onClick?: () => void;
 };
 export declare type ActionSheetProps = {
@@ -16,17 +17,15 @@ export declare type ActionSheetProps = {
     cancelText?: React.ReactNode;
     onAction?: (action: Action, index: number) => void;
     onClose?: () => void;
-    afterClose?: () => void;
     onMaskClick?: () => void;
     closeOnAction?: boolean;
     closeOnMaskClick?: boolean;
-    getContainer?: GetContainer;
     safeArea?: boolean;
     popupClassName?: string;
     popupStyle?: React.CSSProperties;
-} & NativeProps;
+} & Pick<PopupProps, 'afterClose' | 'getContainer' | 'destroyOnClose' | 'forceRender'> & NativeProps;
 export declare const ActionSheet: FC<ActionSheetProps>;
 export declare type ActionSheetShowHandler = {
     close: () => void;
 };
-export declare function showActionSheet(props: Omit<ActionSheetProps, 'visible'>): ActionSheetShowHandler;
+export declare function showActionSheet(props: Omit<ActionSheetProps, 'visible' | 'destroyOnClose' | 'forceRender'>): ActionSheetShowHandler;

package/es/components/action-sheet/action-sheet.js

@@ -3,7 +3,6 @@ import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import classNames from 'classnames';
 import Popup from '../popup';
-import Button from '../button';
 import SafeArea from '../safe-area';
 import { renderImperatively } from '../../utils/render-imperatively';
 const classPrefix = `adm-action-sheet`;
@@ -13,7 +12,9 @@ const defaultProps = {
   cancelText: '',
   closeOnAction: false,
   closeOnMaskClick: true,
-  safeArea: true
+  safeArea: true,
+  destroyOnClose: false,
+  forceRender: false
 };
 export const ActionSheet = p => {
   const props = mergeProps(defaultProps, p);
@@ -31,7 +32,9 @@ export const ActionSheet = p => {
     afterClose: props.afterClose,
     className: classNames(`${classPrefix}-popup`, props.popupClassName),
     style: props.popupStyle,
-    getContainer: props.getContainer
+    getContainer: props.getContainer,
+    destroyOnClose: props.destroyOnClose,
+    forceRender: props.forceRender
   }, withNativeProps(props, React.createElement("div", {
     className: classPrefix
   }, props.extra && React.createElement("div", {
@@ -41,11 +44,12 @@ export const ActionSheet = p => {
   }, props.actions.map((action, index) => React.createElement("div", {
     key: action.key,
     className: `${classPrefix}-button-item-wrapper`
-  }, React.createElement(Button, {
-    block: true,
-    fill: 'none',
-    shape: 'rectangular',
-    disabled: action.disabled,
+  }, React.createElement("a", {
+    className: classNames('adm-plain-anchor', `${classPrefix}-button-item`, {
+      [`${classPrefix}-button-item-danger`]: action.danger,
+      [`${classPrefix}-button-item-disabled`]: action.disabled,
+      [`${classPrefix}-button-item-bold`]: action.bold
+    }),
     onClick: () => {
       var _a, _b, _c;
 
@@ -55,10 +59,7 @@ export const ActionSheet = p => {
       if (props.closeOnAction) {
         (_c = props.onClose) === null || _c === void 0 ? void 0 : _c.call(props);
       }
-    },
-    className: classNames(`${classPrefix}-button-item`, {
-      [`${classPrefix}-button-item-danger`]: action.danger
-    })
+    }
   }, React.createElement("div", {
     className: `${classPrefix}-button-item-name`
   }, action.text), action.description && React.createElement("div", {
@@ -67,11 +68,8 @@ export const ActionSheet = p => {
     className: `${classPrefix}-cancel`
   }, React.createElement("div", {
     className: `${classPrefix}-button-item-wrapper`
-  }, React.createElement(Button, {
-    block: true,
-    fill: 'none',
-    shape: 'rectangular',
-    className: `${classPrefix}-button-item`,
+  }, React.createElement("a", {
+    className: classNames('adm-plain-anchor', `${classPrefix}-button-item`),
     onClick: () => {
       var _a;
 

package/es/components/avatar/avatar.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { withNativeProps } from '../../utils/native-props';
-import { Image } from '../../index';
+import Image from '../image';
 import { mergeProps } from '../../utils/with-default-props';
 import { Fallback } from './fallback';
 const classPrefix = 'adm-avatar';

package/es/components/badge/badge.css

@@ -1,4 +1,4 @@
-.adm-badge-wrap {
+.adm-badge-wrapper {
   display: inline-block;
   position: relative;
 }
@@ -13,11 +13,11 @@
   --color: var(--adm-badge-color, #ff411c);
 }
 .adm-badge-content {
-  color: #fff;
+  color: var(--adm-color-white);
   box-sizing: border-box;
   min-width: 8px;
   padding: 1px 4px;
-  font-size: 9px;
+  font-size: var(--adm-font-size-1);
   line-height: 12px;
   white-space: nowrap;
   font-weight: normal;

package/es/components/badge/badge.d.ts

@@ -1,10 +1,12 @@
 import React, { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
-export declare const dot: unique symbol;
+export declare const dot: JSX.Element;
 export declare type BadgeProps = {
     content?: React.ReactNode | typeof dot;
     color?: string;
     bordered?: boolean;
     children?: React.ReactNode;
+    wrapperClassName?: string;
+    wrapperStyle?: React.CSSProperties;
 } & NativeProps<'--right' | '--top' | '--color'>;
 export declare const Badge: FC<BadgeProps>;

package/es/components/badge/badge.js

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 import { withNativeProps } from '../../utils/native-props';
 const classPrefix = `adm-badge`;
-export const dot = Symbol();
+export const dot = React.createElement(React.Fragment, null);
 export const Badge = props => {
   const {
     content,
@@ -20,6 +20,7 @@ export const Badge = props => {
     className: `${classPrefix}-content`
   }, content))) : null;
   return children ? React.createElement("div", {
-    className: `${classPrefix}-wrap`
+    className: classNames(`${classPrefix}-wrapper`, props.wrapperClassName),
+    style: props.wrapperStyle
   }, children, element) : element;
 };

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

@@ -2,6 +2,6 @@
 import './badge.less';
 export type { BadgeProps } from './badge';
 declare const _default: import("react").FC<import("./badge").BadgeProps> & {
-    dot: symbol;
+    dot: JSX.Element;
 };
 export default _default;

package/es/components/button/button.css

@@ -1,11 +1,11 @@
 .adm-button {
   --color: var(--adm-color-white);
   --text-color: var(--adm-button-text-color, var(--adm-color-text));
-  --background-color: var(--adm-button-background-color, var(--adm-color-white));
+  --background-color: var(--adm-button-background-color, var(--adm-color-background));
   --border-radius: var(--adm-button-border-radius, 4px);
   --border-width: var(--adm-button-border-width, 1px);
   --border-style: var(--adm-button-border-style, solid);
-  --border-color: var(--adm-button-border-color, var(--adm-border-color));
+  --border-color: var(--adm-button-border-color, var(--adm-color-border));
   color: var(--text-color);
   background-color: var(--background-color);
   position: relative;
@@ -14,14 +14,15 @@
   height: auto;
   padding: 7px 12px;
   margin: 0;
-  font-size: 17px;
+  font-size: var(--adm-font-size-9);
   line-height: 1.4;
   text-align: center;
   border: var(--border-width) var(--border-style) var(--border-color);
   border-radius: var(--border-radius);
   cursor: pointer;
   transition: opacity ease 0.15s;
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
 }
 .adm-button:focus {
   outline: none;
@@ -91,7 +92,7 @@
 .adm-button.adm-button-mini {
   padding-top: 3px;
   padding-bottom: 3px;
-  font-size: 13px;
+  font-size: var(--adm-font-size-main);
 }
 .adm-button.adm-button-mini.adm-button-shape-rounded {
   padding-left: 9px;
@@ -100,12 +101,12 @@
 .adm-button.adm-button-small {
   padding-top: 3px;
   padding-bottom: 3px;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
 }
 .adm-button.adm-button-large {
   padding-top: 11px;
   padding-bottom: 11px;
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
 }
 .adm-button.adm-button-shape-rounded {
   --border-radius: 1000px;

package/es/components/button/button.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { NativeProps } from '../../utils/native-props';
+declare type NativeButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
 export declare type ButtonProps = {
     color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
     fill?: 'solid' | 'outline' | 'none';
@@ -9,11 +10,11 @@ export declare type ButtonProps = {
     loadingText?: string;
     loadingIcon?: React.ReactNode;
     disabled?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void>;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void> | unknown;
     type?: 'submit' | 'reset' | 'button';
     shape?: 'default' | 'rounded' | 'rectangular';
     children?: React.ReactNode;
-} & NativeProps<'--text-color' | '--background-color' | '--border-radius' | '--border-width' | '--border-style' | '--border-color'>;
+} & Pick<NativeButtonProps, 'onMouseDown' | 'onMouseUp' | 'onTouchStart' | 'onTouchEnd'> & NativeProps<'--text-color' | '--background-color' | '--border-radius' | '--border-width' | '--border-style' | '--border-color'>;
 export declare type ButtonRef = {
     nativeElement: HTMLButtonElement | null;
 };
@@ -26,8 +27,13 @@ export declare const Button: React.ForwardRefExoticComponent<{
     loadingText?: string | undefined;
     loadingIcon?: React.ReactNode;
     disabled?: boolean | undefined;
-    onClick?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void>) | undefined;
+    onClick?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void> | unknown) | undefined;
     type?: "reset" | "submit" | "button" | undefined;
     shape?: "default" | "rounded" | "rectangular" | undefined;
     children?: React.ReactNode;
-} & NativeProps<"--text-color" | "--background-color" | "--border-radius" | "--border-width" | "--border-style" | "--border-color"> & React.RefAttributes<ButtonRef>>;
+} & Pick<NativeButtonProps, "onMouseDown" | "onMouseUp" | "onTouchEnd" | "onTouchStart"> & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--border-radius" | "--text-color" | "--background-color" | "--border-width" | "--border-style" | "--border-color", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<ButtonRef>>;
+export {};

package/es/components/button/button.js

@@ -61,8 +61,12 @@ export const Button = forwardRef((p, ref) => {
       [`${classPrefix}-large`]: props.size === 'large',
       [`${classPrefix}-loading`]: loading
     }, `${classPrefix}-shape-${props.shape}`),
-    disabled: disabled
+    disabled: disabled,
+    onMouseDown: props.onMouseDown,
+    onMouseUp: props.onMouseUp,
+    onTouchStart: props.onTouchStart,
+    onTouchEnd: props.onTouchEnd
   }, loading ? React.createElement("div", {
     className: `${classPrefix}-loading-wrapper`
-  }, props.loadingIcon, props.loadingText) : props.children));
+  }, props.loadingIcon, props.loadingText) : React.createElement("span", null, props.children)));
 });

package/es/components/button/button.patch.css

@@ -0,0 +1,86 @@
+.adm-button {
+  color: #333333;
+  background-color: #ffffff;
+  font-size: 17px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #eeeeee;
+  border-radius: 4px;
+}
+.adm-button::before {
+  transform: translate(-1px, -1px);
+  border: 1px solid #000;
+  border-radius: 4px;
+}
+.adm-button-default.adm-button-fill-outline {
+  background-color: transparent;
+  border-color: #333333;
+}
+.adm-button-default.adm-button-fill-none {
+  background-color: transparent;
+  border-width: 0;
+}
+.adm-button:not(.adm-button-default) {
+  color: #ffffff;
+}
+.adm-button:not(.adm-button-default).adm-button-fill-outline {
+  background-color: transparent;
+}
+.adm-button:not(.adm-button-default).adm-button-fill-none {
+  background-color: transparent;
+  border-width: 0;
+}
+.adm-button-primary {
+  background-color: #1677ff;
+  border-color: #1677ff;
+}
+.adm-button-primary.adm-button-fill-outline,
+.adm-button-primary.adm-button-fill-none {
+  color: #1677ff;
+}
+.adm-button-success {
+  background-color: #00b578;
+  border-color: #00b578;
+}
+.adm-button-success.adm-button-fill-outline,
+.adm-button-success.adm-button-fill-none {
+  color: #00b578;
+}
+.adm-button-danger {
+  background-color: #00b578;
+  border-color: #00b578;
+}
+.adm-button-danger.adm-button-fill-outline,
+.adm-button-danger.adm-button-fill-none {
+  color: #00b578;
+}
+.adm-button-warning {
+  background-color: #ff8f1f;
+  border-color: #ff8f1f;
+}
+.adm-button-warning.adm-button-fill-outline,
+.adm-button-warning.adm-button-fill-none {
+  color: #ff8f1f;
+}
+.adm-button.adm-button-mini {
+  font-size: 13px;
+}
+.adm-button.adm-button-small {
+  padding-top: 3px;
+  padding-bottom: 3px;
+  font-size: 15px;
+}
+.adm-button.adm-button-large {
+  padding-top: 11px;
+  padding-bottom: 11px;
+  font-size: 18px;
+}
+.adm-button.adm-button-shape-rounded {
+  border-radius: 1000px;
+}
+.adm-button.adm-button-shape-rounded::before {
+  border-radius: 1000px;
+}
+.adm-button.adm-button-shape-rectangular {
+  border-radius: 0;
+}