@alfalab/core-components 48.6.0-beta.1 → 48.7.0

package/custom-button/esm/types/props.d.ts

@@ -0,0 +1,29 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
+import { ButtonProps } from "../../../button";
+type ComponentProps = Omit<ButtonProps, 'view' | 'colors'> & {
+    /**
+     * Цвет кнопки
+     */
+    backgroundColor?: string;
+    /**
+     * Цвет контента
+     */
+    contentColor?: 'black' | 'white' | 'static-black' | 'static-white';
+    /**
+     * Затемнение или осветление кнопки при hover и active
+     */
+    stateType?: 'darkening' | 'lightening' | 'static-darkening' | 'static-lightening';
+    /**
+     * Блокировка кнопки
+     */
+    disabled?: boolean;
+    /**
+     * Тип цвета для заблокированного состояния
+     * @default default
+     */
+    disableType?: 'default' | 'static' | 'inverted' | 'static-inverted';
+};
+type AnchorButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
+type NativeButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
+type CustomButtonProps = Partial<AnchorButtonProps | NativeButtonProps>;
+export { ComponentProps, CustomButtonProps };

package/custom-button/esm/types/props.js

@@ -0,0 +1 @@
+

package/custom-button/index.d.ts

@@ -1 +1,2 @@
-export * from "./Component";
+export { CustomButton } from "./Component";
+export { CustomButtonProps, ComponentProps } from "./types/props";

package/custom-button/mobile/Component.mobile.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { CustomButtonProps } from "../types/props";
+declare const CustomButtonMobile: React.ForwardRefExoticComponent<CustomButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { CustomButtonMobile };

package/custom-button/mobile/Component.mobile.js

@@ -0,0 +1,18 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var mobile = require('../../button/mobile');
+var components_baseCustomButton_baseCustomButton = require('../components/base-custom-button/base-custom-button.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var CustomButtonMobile = React.forwardRef(function (_a, ref) {
+    var children = _a.children, restProps = tslib.__rest(_a, ["children"]);
+    return (React__default.default.createElement(components_baseCustomButton_baseCustomButton.BaseCustomButton, tslib.__assign({ ref: ref }, restProps, { componentButton: mobile.ButtonMobile }), children));
+});
+CustomButtonMobile.displayName = 'CustomButtonMobile';
+
+exports.CustomButtonMobile = CustomButtonMobile;

package/custom-button/mobile/index.d.ts

@@ -0,0 +1,2 @@
+export { CustomButtonMobile } from "./Component.mobile";
+export {};

package/custom-button/mobile/index.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var mobile_Component_mobile = require('./Component.mobile.js');
+
+
+
+exports.CustomButtonMobile = mobile_Component_mobile.CustomButtonMobile;

package/custom-button/modern/Component.d.ts

@@ -1,32 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
-import { AnchorHTMLAttributes, ButtonHTMLAttributes } from "react";
-import { ButtonProps } from "../../button";
-type ComponentProps = Omit<ButtonProps, 'view' | 'colors'> & {
-    /**
-     * Цвет кнопки
-     */
-    backgroundColor?: string;
-    /**
-     * Цвет контента
-     */
-    contentColor?: 'black' | 'white' | 'static-black' | 'static-white';
-    /**
-     * Затемнение или осветление кнопки при hover и active
-     */
-    stateType?: 'darkening' | 'lightening' | 'static-darkening' | 'static-lightening';
-    /**
-     * Блокировка кнопки
-     */
-    disabled?: boolean;
-    /**
-     * Тип цвета для заблокированного состояния
-     * @default default
-     */
-    disableType?: 'default' | 'static' | 'inverted' | 'static-inverted';
-};
-type AnchorButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
-type NativeButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
-type CustomButtonProps = Partial<AnchorButtonProps | NativeButtonProps>;
+import { CustomButtonProps } from "./types/props";
 declare const CustomButton: React.ForwardRefExoticComponent<CustomButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-export { ComponentProps, CustomButtonProps, CustomButton };
+export { CustomButton };

package/custom-button/modern/Component.js

@@ -1,22 +1,10 @@
-import React from 'react';
-import cn from 'classnames';
+import React, { forwardRef } from 'react';
 import { Button } from '../../button/modern';
+import { BaseCustomButton } from './components/base-custom-button/base-custom-button.js';
+import 'classnames';
+import './constants/default-colors.js';
 
-const styles = {"customButton":"custom-button__customButton_1uca8","border":"custom-button__border_1uca8","white":"custom-button__white_1uca8","black":"custom-button__black_1uca8","static-white":"custom-button__static-white_1uca8","static-black":"custom-button__static-black_1uca8","darkening":"custom-button__darkening_1uca8","lightening":"custom-button__lightening_1uca8","static-darkening":"custom-button__static-darkening_1uca8","static-lightening":"custom-button__static-lightening_1uca8","disableType-default":"custom-button__disableType-default_1uca8","disableType-static":"custom-button__disableType-static_1uca8","disableType-inverted":"custom-button__disableType-inverted_1uca8","disableType-static-inverted":"custom-button__disableType-static-inverted_1uca8"};
-require('./index.css');
-
-const DEFAULT_BUTTON_COLOR = '#FF45C3';
-const DEFAULT_CONTENT_COLOR = 'white';
-const CustomButton = React.forwardRef(({ children, className, loading, backgroundColor = DEFAULT_BUTTON_COLOR, contentColor = DEFAULT_CONTENT_COLOR, stateType = 'darkening', disableType = 'default', ...restProps }, ref) => {
-    const buttonProps = {
-        style: {
-            ...(!restProps.disabled && { background: backgroundColor }),
-        },
-        ...restProps,
-    };
-    const buttonClassName = cn(styles.customButton, styles.border, className, styles[contentColor], styles[stateType], styles[`disableType-${disableType}`]);
-    return (React.createElement(Button, { ...buttonProps, view: 'primary', ref: ref, className: buttonClassName, loading: loading }, children));
-});
+const CustomButton = forwardRef(({ children, ...restProps }, ref) => (React.createElement(BaseCustomButton, { ref: ref, ...restProps, componentButton: Button }, children)));
 CustomButton.displayName = 'CustomButton';
 
 export { CustomButton };

package/custom-button/modern/components/base-custom-button/base-custom-button.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import React from 'react';
+import { Button } from "../../../../button";
+import { ButtonDesktop } from "../../../../button/desktop";
+import { ButtonMobile } from "../../../../button/mobile";
+import { CustomButtonProps } from "../../types/props";
+declare const BaseCustomButton: React.ForwardRefExoticComponent<(CustomButtonProps & {
+    componentButton: typeof Button | typeof ButtonDesktop | typeof ButtonMobile;
+}) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { BaseCustomButton };

package/custom-button/modern/components/base-custom-button/base-custom-button.js

@@ -0,0 +1,13 @@
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
+import { DEFAULT_BUTTON_COLOR, DEFAULT_CONTENT_COLOR } from '../../constants/default-colors.js';
+
+const styles = {"customButton":"custom-button__customButton_l67aj","border":"custom-button__border_l67aj","white":"custom-button__white_l67aj","black":"custom-button__black_l67aj","static-white":"custom-button__static-white_l67aj","static-black":"custom-button__static-black_l67aj","darkening":"custom-button__darkening_l67aj","lightening":"custom-button__lightening_l67aj","static-darkening":"custom-button__static-darkening_l67aj","static-lightening":"custom-button__static-lightening_l67aj","disableType-default":"custom-button__disableType-default_l67aj","disableType-static":"custom-button__disableType-static_l67aj","disableType-inverted":"custom-button__disableType-inverted_l67aj","disableType-static-inverted":"custom-button__disableType-static-inverted_l67aj"};
+require('./index.css');
+
+const BaseCustomButton = forwardRef(({ children, className, loading, backgroundColor = DEFAULT_BUTTON_COLOR, contentColor = DEFAULT_CONTENT_COLOR, stateType = 'darkening', disableType = 'default', componentButton: ComponentButton, ...restProps }, ref) => (React.createElement(ComponentButton, { style: { ...(!restProps.disabled && { background: backgroundColor }) }, ...restProps, view: 'primary', ref: ref, className: cn(styles.customButton, styles.border, className, styles[contentColor], styles[stateType], styles[`disableType-${disableType}`], {
+        [styles.customLoading]: loading,
+    }), loading: loading }, children)));
+BaseCustomButton.displayName = 'BaseCustomButton';
+
+export { BaseCustomButton };

package/custom-button/{esm → modern/components/base-custom-button}/index.css

@@ -1,4 +1,4 @@
-/* hash: ffq8g */
+/* hash: 10pgt */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-neutral-translucent-100: rgba(38, 55, 88, 0.06);
@@ -35,23 +35,23 @@
     --gap-0: 0;
 } :root {
 } :root {
-} /* сбрасывает синюю подсветку при нажатии */ .custom-button__customButton_1uca8 {
+} /* сбрасывает синюю подсветку при нажатии */ .custom-button__customButton_l67aj {
     overflow: hidden;
     position: relative
-} .custom-button__customButton_1uca8.custom-button__border_1uca8 {
+} .custom-button__customButton_l67aj.custom-button__border_l67aj {
         border: 0;
-    } .custom-button__customButton_1uca8.custom-button__white_1uca8 * {
+    } .custom-button__customButton_l67aj.custom-button__white_l67aj * {
         color: var(--color-light-text-primary-inverted);
-    } .custom-button__customButton_1uca8.custom-button__black_1uca8 * {
+    } .custom-button__customButton_l67aj.custom-button__black_l67aj * {
         color: var(--color-light-text-primary);
-    } .custom-button__customButton_1uca8.custom-button__static-white_1uca8 * {
+    } .custom-button__customButton_l67aj.custom-button__static-white_l67aj * {
         color: var(--color-static-text-primary-inverted);
-    } .custom-button__customButton_1uca8.custom-button__static-black_1uca8 * {
+    } .custom-button__customButton_l67aj.custom-button__static-black_l67aj * {
         color: var(--color-static-text-primary);
-    } .custom-button__customButton_1uca8 span {
+    } .custom-button__customButton_l67aj span {
         position: relative;
         z-index: 3;
-    } .custom-button__customButton_1uca8:before {
+    } .custom-button__customButton_l67aj:before {
         position: absolute;
         left: var(--gap-0);
         right: var(--gap-0);
@@ -62,36 +62,36 @@
         transition: 0.2s;
         opacity: 1;
         pointer-events: none;
-    } .custom-button__customButton_1uca8.custom-button__darkening_1uca8:hover:before {
+    } .custom-button__customButton_l67aj.custom-button__darkening_l67aj:hover:before {
             background-color: var(--color-light-neutral-translucent-200);
-        } .custom-button__customButton_1uca8.custom-button__darkening_1uca8:active:before {
+        } .custom-button__customButton_l67aj.custom-button__darkening_l67aj:active:before {
             background-color: var(--color-light-neutral-translucent-400);
-        } .custom-button__customButton_1uca8.custom-button__lightening_1uca8:hover:before {
+        } .custom-button__customButton_l67aj.custom-button__lightening_l67aj:hover:before {
             background-color: var(--color-light-neutral-translucent-200-inverted);
-        } .custom-button__customButton_1uca8.custom-button__lightening_1uca8:active:before {
+        } .custom-button__customButton_l67aj.custom-button__lightening_l67aj:active:before {
             background-color: var(--color-light-neutral-translucent-400-inverted);
-        } .custom-button__customButton_1uca8.custom-button__static-darkening_1uca8:hover:before {
+        } .custom-button__customButton_l67aj.custom-button__static-darkening_l67aj:hover:before {
             background-color: rgba(0, 0, 0, 0.07);
-        } .custom-button__customButton_1uca8.custom-button__static-darkening_1uca8:active:before {
+        } .custom-button__customButton_l67aj.custom-button__static-darkening_l67aj:active:before {
             background-color: rgba(0, 0, 0, 0.15);
-        } .custom-button__customButton_1uca8.custom-button__static-lightening_1uca8:hover:before {
+        } .custom-button__customButton_l67aj.custom-button__static-lightening_l67aj:hover:before {
             background-color: rgba(255, 255, 255, 0.07);
-        } .custom-button__customButton_1uca8.custom-button__static-lightening_1uca8:active:before {
+        } .custom-button__customButton_l67aj.custom-button__static-lightening_l67aj:active:before {
             background-color: rgba(255, 255, 255, 0.15);
-        } /* Disabled */ .custom-button__customButton_1uca8:disabled.custom-button__disableType-default_1uca8 {
+        } /* Disabled */ .custom-button__customButton_l67aj:disabled.custom-button__disableType-default_l67aj {
         background-color: var(--color-light-neutral-translucent-100)
-    } .custom-button__customButton_1uca8:disabled.custom-button__disableType-default_1uca8 span {
+    } .custom-button__customButton_l67aj:disabled.custom-button__disableType-default_l67aj span {
             color: var(--color-light-text-tertiary);
-        } .custom-button__customButton_1uca8:disabled.custom-button__disableType-static_1uca8 {
+        } .custom-button__customButton_l67aj:disabled.custom-button__disableType-static_l67aj {
         background-color: var(--color-static-neutral-translucent-100)
-    } .custom-button__customButton_1uca8:disabled.custom-button__disableType-static_1uca8 span {
+    } .custom-button__customButton_l67aj:disabled.custom-button__disableType-static_l67aj span {
             color: var(--color-static-text-tertiary);
-        } .custom-button__customButton_1uca8:disabled.custom-button__disableType-inverted_1uca8 {
+        } .custom-button__customButton_l67aj:disabled.custom-button__disableType-inverted_l67aj {
         background-color: var(--color-light-neutral-translucent-100-inverted)
-    } .custom-button__customButton_1uca8:disabled.custom-button__disableType-inverted_1uca8 span {
+    } .custom-button__customButton_l67aj:disabled.custom-button__disableType-inverted_l67aj span {
             color: var(--color-light-text-tertiary-inverted);
-        } .custom-button__customButton_1uca8:disabled.custom-button__disableType-static-inverted_1uca8 {
+        } .custom-button__customButton_l67aj:disabled.custom-button__disableType-static-inverted_l67aj {
         background-color: var(--color-static-neutral-translucent-100-inverted)
-    } .custom-button__customButton_1uca8:disabled.custom-button__disableType-static-inverted_1uca8 span {
+    } .custom-button__customButton_l67aj:disabled.custom-button__disableType-static-inverted_l67aj span {
             color: var(--color-static-text-tertiary-inverted);
         }

package/custom-button/modern/components/base-custom-button/index.d.ts

@@ -0,0 +1 @@
+export { BaseCustomButton } from "./base-custom-button";

package/custom-button/modern/components/base-custom-button/index.js

@@ -0,0 +1,4 @@
+export { BaseCustomButton } from './base-custom-button.js';
+import 'react';
+import 'classnames';
+import '../../constants/default-colors.js';

package/custom-button/modern/constants/default-colors.d.ts

@@ -0,0 +1,3 @@
+declare const DEFAULT_BUTTON_COLOR = "#FF45C3";
+declare const DEFAULT_CONTENT_COLOR = "white";
+export { DEFAULT_BUTTON_COLOR, DEFAULT_CONTENT_COLOR };

package/custom-button/modern/constants/default-colors.js

@@ -0,0 +1,4 @@
+const DEFAULT_BUTTON_COLOR = '#FF45C3';
+const DEFAULT_CONTENT_COLOR = 'white';
+
+export { DEFAULT_BUTTON_COLOR, DEFAULT_CONTENT_COLOR };

package/custom-button/modern/desktop/Component.desktop.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { CustomButtonProps } from "../types/props";
+declare const CustomButtonDesktop: React.ForwardRefExoticComponent<CustomButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { CustomButtonDesktop };

package/custom-button/modern/desktop/Component.desktop.js

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { ButtonDesktop } from '../../../button/modern/desktop';
+import { BaseCustomButton } from '../components/base-custom-button/base-custom-button.js';
+import 'classnames';
+import '../constants/default-colors.js';
+
+const CustomButtonDesktop = forwardRef(({ children, ...restProps }, ref) => (React.createElement(BaseCustomButton, { ref: ref, ...restProps, componentButton: ButtonDesktop }, children)));
+CustomButtonDesktop.displayName = 'CustomButtonDesktop';
+
+export { CustomButtonDesktop };

package/custom-button/modern/desktop/index.d.ts

@@ -0,0 +1,2 @@
+export { CustomButtonDesktop } from "./Component.desktop";
+export {};

package/custom-button/modern/desktop/index.js

@@ -0,0 +1,6 @@
+export { CustomButtonDesktop } from './Component.desktop.js';
+import 'react';
+import '../../../button/modern/desktop';
+import '../components/base-custom-button/base-custom-button.js';
+import 'classnames';
+import '../constants/default-colors.js';

package/custom-button/modern/index.d.ts

@@ -1 +1,2 @@
-export * from "./Component";
+export { CustomButton } from "./Component";
+export { CustomButtonProps, ComponentProps } from "./types/props";

package/custom-button/modern/index.js

@@ -1,4 +1,6 @@
 export { CustomButton } from './Component.js';
 import 'react';
-import 'classnames';
 import '../../button/modern';
+import './components/base-custom-button/base-custom-button.js';
+import 'classnames';
+import './constants/default-colors.js';

package/custom-button/modern/mobile/Component.mobile.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { CustomButtonProps } from "../types/props";
+declare const CustomButtonMobile: React.ForwardRefExoticComponent<CustomButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { CustomButtonMobile };

package/custom-button/modern/mobile/Component.mobile.js

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { ButtonMobile } from '../../../button/modern/mobile';
+import { BaseCustomButton } from '../components/base-custom-button/base-custom-button.js';
+import 'classnames';
+import '../constants/default-colors.js';
+
+const CustomButtonMobile = forwardRef(({ children, ...restProps }, ref) => (React.createElement(BaseCustomButton, { ref: ref, ...restProps, componentButton: ButtonMobile }, children)));
+CustomButtonMobile.displayName = 'CustomButtonMobile';
+
+export { CustomButtonMobile };

package/custom-button/modern/mobile/index.d.ts

@@ -0,0 +1,2 @@
+export { CustomButtonMobile } from "./Component.mobile";
+export {};

package/custom-button/modern/mobile/index.js

@@ -0,0 +1,6 @@
+export { CustomButtonMobile } from './Component.mobile.js';
+import 'react';
+import '../../../button/modern/mobile';
+import '../components/base-custom-button/base-custom-button.js';
+import 'classnames';
+import '../constants/default-colors.js';

package/custom-button/modern/types/props.d.ts

@@ -0,0 +1,29 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
+import { ButtonProps } from "../../../button";
+type ComponentProps = Omit<ButtonProps, 'view' | 'colors'> & {
+    /**
+     * Цвет кнопки
+     */
+    backgroundColor?: string;
+    /**
+     * Цвет контента
+     */
+    contentColor?: 'black' | 'white' | 'static-black' | 'static-white';
+    /**
+     * Затемнение или осветление кнопки при hover и active
+     */
+    stateType?: 'darkening' | 'lightening' | 'static-darkening' | 'static-lightening';
+    /**
+     * Блокировка кнопки
+     */
+    disabled?: boolean;
+    /**
+     * Тип цвета для заблокированного состояния
+     * @default default
+     */
+    disableType?: 'default' | 'static' | 'inverted' | 'static-inverted';
+};
+type AnchorButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
+type NativeButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
+type CustomButtonProps = Partial<AnchorButtonProps | NativeButtonProps>;
+export { ComponentProps, CustomButtonProps };

package/custom-button/modern/types/props.js

@@ -0,0 +1 @@
+

package/custom-button/moderncssm/Component.d.ts

@@ -1,32 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
-import { AnchorHTMLAttributes, ButtonHTMLAttributes } from "react";
-import { ButtonProps } from "../../button";
-type ComponentProps = Omit<ButtonProps, 'view' | 'colors'> & {
-    /**
-     * Цвет кнопки
-     */
-    backgroundColor?: string;
-    /**
-     * Цвет контента
-     */
-    contentColor?: 'black' | 'white' | 'static-black' | 'static-white';
-    /**
-     * Затемнение или осветление кнопки при hover и active
-     */
-    stateType?: 'darkening' | 'lightening' | 'static-darkening' | 'static-lightening';
-    /**
-     * Блокировка кнопки
-     */
-    disabled?: boolean;
-    /**
-     * Тип цвета для заблокированного состояния
-     * @default default
-     */
-    disableType?: 'default' | 'static' | 'inverted' | 'static-inverted';
-};
-type AnchorButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
-type NativeButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
-type CustomButtonProps = Partial<AnchorButtonProps | NativeButtonProps>;
+import { CustomButtonProps } from "./types/props";
 declare const CustomButton: React.ForwardRefExoticComponent<CustomButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-export { ComponentProps, CustomButtonProps, CustomButton };
+export { CustomButton };

package/custom-button/moderncssm/Component.js

@@ -1,20 +1,11 @@
-import React from 'react';
-import cn from 'classnames';
+import React, { forwardRef } from 'react';
 import { Button } from '../../button/moderncssm';
-import styles from './index.module.css';
+import { BaseCustomButton } from './components/base-custom-button/base-custom-button.js';
+import 'classnames';
+import './constants/default-colors.js';
+import './components/base-custom-button/index.module.css';
 
-const DEFAULT_BUTTON_COLOR = '#FF45C3';
-const DEFAULT_CONTENT_COLOR = 'white';
-const CustomButton = React.forwardRef(({ children, className, loading, backgroundColor = DEFAULT_BUTTON_COLOR, contentColor = DEFAULT_CONTENT_COLOR, stateType = 'darkening', disableType = 'default', ...restProps }, ref) => {
-    const buttonProps = {
-        style: {
-            ...(!restProps.disabled && { background: backgroundColor }),
-        },
-        ...restProps,
-    };
-    const buttonClassName = cn(styles.customButton, styles.border, className, styles[contentColor], styles[stateType], styles[`disableType-${disableType}`]);
-    return (React.createElement(Button, { ...buttonProps, view: 'primary', ref: ref, className: buttonClassName, loading: loading }, children));
-});
+const CustomButton = forwardRef(({ children, ...restProps }, ref) => (React.createElement(BaseCustomButton, { ref: ref, ...restProps, componentButton: Button }, children)));
 CustomButton.displayName = 'CustomButton';
 
 export { CustomButton };

package/custom-button/moderncssm/components/base-custom-button/base-custom-button.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import React from 'react';
+import { Button } from "../../../../button";
+import { ButtonDesktop } from "../../../../button/desktop";
+import { ButtonMobile } from "../../../../button/mobile";
+import { CustomButtonProps } from "../../types/props";
+declare const BaseCustomButton: React.ForwardRefExoticComponent<(CustomButtonProps & {
+    componentButton: typeof Button | typeof ButtonDesktop | typeof ButtonMobile;
+}) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { BaseCustomButton };

package/custom-button/moderncssm/components/base-custom-button/base-custom-button.js

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
+import { DEFAULT_BUTTON_COLOR, DEFAULT_CONTENT_COLOR } from '../../constants/default-colors.js';
+import styles from './index.module.css';
+
+const BaseCustomButton = forwardRef(({ children, className, loading, backgroundColor = DEFAULT_BUTTON_COLOR, contentColor = DEFAULT_CONTENT_COLOR, stateType = 'darkening', disableType = 'default', componentButton: ComponentButton, ...restProps }, ref) => (React.createElement(ComponentButton, { style: { ...(!restProps.disabled && { background: backgroundColor }) }, ...restProps, view: 'primary', ref: ref, className: cn(styles.customButton, styles.border, className, styles[contentColor], styles[stateType], styles[`disableType-${disableType}`], {
+        [styles.customLoading]: loading,
+    }), loading: loading }, children)));
+BaseCustomButton.displayName = 'BaseCustomButton';
+
+export { BaseCustomButton };

package/custom-button/moderncssm/components/base-custom-button/index.d.ts

@@ -0,0 +1 @@
+export { BaseCustomButton } from "./base-custom-button";

package/custom-button/moderncssm/components/base-custom-button/index.js

@@ -0,0 +1,5 @@
+export { BaseCustomButton } from './base-custom-button.js';
+import 'react';
+import 'classnames';
+import '../../constants/default-colors.js';
+import './index.module.css';

package/custom-button/moderncssm/constants/default-colors.d.ts

@@ -0,0 +1,3 @@
+declare const DEFAULT_BUTTON_COLOR = "#FF45C3";
+declare const DEFAULT_CONTENT_COLOR = "white";
+export { DEFAULT_BUTTON_COLOR, DEFAULT_CONTENT_COLOR };

package/custom-button/moderncssm/constants/default-colors.js

@@ -0,0 +1,4 @@
+const DEFAULT_BUTTON_COLOR = '#FF45C3';
+const DEFAULT_CONTENT_COLOR = 'white';
+
+export { DEFAULT_BUTTON_COLOR, DEFAULT_CONTENT_COLOR };

package/custom-button/moderncssm/desktop/Component.desktop.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { CustomButtonProps } from "../types/props";
+declare const CustomButtonDesktop: React.ForwardRefExoticComponent<CustomButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { CustomButtonDesktop };

package/custom-button/moderncssm/desktop/Component.desktop.js

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import { ButtonDesktop } from '../../../button/moderncssm/desktop';
+import { BaseCustomButton } from '../components/base-custom-button/base-custom-button.js';
+import 'classnames';
+import '../constants/default-colors.js';
+import '../components/base-custom-button/index.module.css';
+
+const CustomButtonDesktop = forwardRef(({ children, ...restProps }, ref) => (React.createElement(BaseCustomButton, { ref: ref, ...restProps, componentButton: ButtonDesktop }, children)));
+CustomButtonDesktop.displayName = 'CustomButtonDesktop';
+
+export { CustomButtonDesktop };

package/custom-button/moderncssm/desktop/index.d.ts

@@ -0,0 +1,2 @@
+export { CustomButtonDesktop } from "./Component.desktop";
+export {};

package/custom-button/moderncssm/desktop/index.js

@@ -0,0 +1,7 @@
+export { CustomButtonDesktop } from './Component.desktop.js';
+import 'react';
+import '../../../button/moderncssm/desktop';
+import '../components/base-custom-button/base-custom-button.js';
+import 'classnames';
+import '../constants/default-colors.js';
+import '../components/base-custom-button/index.module.css';

package/custom-button/moderncssm/index.d.ts

@@ -1 +1,2 @@
-export * from "./Component";
+export { CustomButton } from "./Component";
+export { CustomButtonProps, ComponentProps } from "./types/props";

package/custom-button/moderncssm/index.js

@@ -1,5 +1,7 @@
 export { CustomButton } from './Component.js';
 import 'react';
-import 'classnames';
 import '../../button/moderncssm';
-import './index.module.css';
+import './components/base-custom-button/base-custom-button.js';
+import 'classnames';
+import './constants/default-colors.js';
+import './components/base-custom-button/index.module.css';

package/custom-button/moderncssm/mobile/Component.mobile.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { CustomButtonProps } from "../types/props";
+declare const CustomButtonMobile: React.ForwardRefExoticComponent<CustomButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { CustomButtonMobile };

package/custom-button/moderncssm/mobile/Component.mobile.js

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import { ButtonMobile } from '../../../button/moderncssm/mobile';
+import { BaseCustomButton } from '../components/base-custom-button/base-custom-button.js';
+import 'classnames';
+import '../constants/default-colors.js';
+import '../components/base-custom-button/index.module.css';
+
+const CustomButtonMobile = forwardRef(({ children, ...restProps }, ref) => (React.createElement(BaseCustomButton, { ref: ref, ...restProps, componentButton: ButtonMobile }, children)));
+CustomButtonMobile.displayName = 'CustomButtonMobile';
+
+export { CustomButtonMobile };

package/custom-button/moderncssm/mobile/index.d.ts

@@ -0,0 +1,2 @@
+export { CustomButtonMobile } from "./Component.mobile";
+export {};

package/custom-button/moderncssm/mobile/index.js

@@ -0,0 +1,7 @@
+export { CustomButtonMobile } from './Component.mobile.js';
+import 'react';
+import '../../../button/moderncssm/mobile';
+import '../components/base-custom-button/base-custom-button.js';
+import 'classnames';
+import '../constants/default-colors.js';
+import '../components/base-custom-button/index.module.css';