@alfalab/core-components 34.0.0 → 35.0.0

package/action-button/Component.d.ts

@@ -47,5 +47,5 @@ type ComponentProps = {
 type AnchorProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
 type ButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
 type ActionButtonProps = Partial<AnchorProps | ButtonProps>;
-declare const ActionButton: React.ForwardRefExoticComponent<(Partial<AnchorProps> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>) | (Partial<ButtonProps> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>)>;
+declare const ActionButton: React.ForwardRefExoticComponent<ActionButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export { ActionButtonProps, ActionButton };

package/action-button/Component.js

@@ -13,7 +13,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -52,16 +52,16 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"action-button__component_1h882","s":"action-button__s_1h882","disabled":"action-button__disabled_1h882","loading":"action-button__loading_1h882","iconWrapper":"action-button__iconWrapper_1h882","label":"action-button__label_1h882","focused":"action-button__focused_1h882"};
-require('./index.css');
-
-var defaultColors = {"primary":"action-button__primary_ugpsq","iconWrapper":"action-button__iconWrapper_ugpsq","secondary":"action-button__secondary_ugpsq"};
+var defaultColors = {"primary":"action-button__primary_1fm7f","iconWrapper":"action-button__iconWrapper_1fm7f","secondary":"action-button__secondary_1fm7f"};
 require('./default.css');
 
-var invertedColors = {"primary":"action-button__primary_ktidr","iconWrapper":"action-button__iconWrapper_ktidr","secondary":"action-button__secondary_ktidr"};
+var styles = {"component":"action-button__component_1ubaa","s":"action-button__s_1ubaa","disabled":"action-button__disabled_1ubaa","loading":"action-button__loading_1ubaa","iconWrapper":"action-button__iconWrapper_1ubaa","label":"action-button__label_1ubaa","focused":"action-button__focused_1ubaa"};
+require('./index.css');
+
+var invertedColors = {"primary":"action-button__primary_15z00","iconWrapper":"action-button__iconWrapper_15z00","secondary":"action-button__secondary_15z00"};
 require('./inverted.css');
 
-var staticColors = {"primary":"action-button__primary_zjt9w","iconWrapper":"action-button__iconWrapper_zjt9w","secondary":"action-button__secondary_zjt9w"};
+var staticColors = {"primary":"action-button__primary_1qopu","iconWrapper":"action-button__iconWrapper_1qopu","secondary":"action-button__secondary_1qopu"};
 require('./static.css');
 
 var colorStyles = {

package/action-button/cssm/Component.d.ts

@@ -47,5 +47,5 @@ type ComponentProps = {
 type AnchorProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
 type ButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
 type ActionButtonProps = Partial<AnchorProps | ButtonProps>;
-declare const ActionButton: React.ForwardRefExoticComponent<(Partial<AnchorProps> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>) | (Partial<ButtonProps> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>)>;
+declare const ActionButton: React.ForwardRefExoticComponent<ActionButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export { ActionButtonProps, ActionButton };

package/action-button/cssm/Component.js

@@ -5,23 +5,23 @@ var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
 var coreComponentsLoader = require('../../loader/cssm');
 var hooks = require('@alfalab/hooks');
-var styles = require('./index.module.css');
+var hooks$1 = require('./hooks.js');
 var defaultColors = require('./default.module.css');
+var styles = require('./index.module.css');
 var invertedColors = require('./inverted.module.css');
 var staticColors = require('./static.module.css');
-var hooks$1 = require('./hooks.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
-var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 var defaultColors__default = /*#__PURE__*/_interopDefaultLegacy(defaultColors);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 var invertedColors__default = /*#__PURE__*/_interopDefaultLegacy(invertedColors);
 var staticColors__default = /*#__PURE__*/_interopDefaultLegacy(staticColors);
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any

package/action-button/cssm/index.js

@@ -6,11 +6,11 @@ require('react-merge-refs');
 require('classnames');
 require('../../loader/cssm');
 require('@alfalab/hooks');
-require('./index.module.css');
+require('./hooks.js');
 require('./default.module.css');
+require('./index.module.css');
 require('./inverted.module.css');
 require('./static.module.css');
-require('./hooks.js');
 
 
 

package/action-button/default.css

@@ -33,29 +33,29 @@
     --action-button-secondary-hover-color: var(--color-light-bg-secondary-shade-7);
     --action-button-secondary-active-color: var(--color-light-bg-secondary-shade-15);
 }
-.action-button__primary_ugpsq {
+.action-button__primary_1fm7f {
     color: var(--action-button-primary-base-color)
 }
-.action-button__primary_ugpsq .action-button__iconWrapper_ugpsq {
+.action-button__primary_1fm7f .action-button__iconWrapper_1fm7f {
         color: var(--action-button-primary-base-icon-color);
         background-color: var(--action-button-primary-base-bg-color);
     }
-.action-button__primary_ugpsq:hover .action-button__iconWrapper_ugpsq {
+.action-button__primary_1fm7f:hover .action-button__iconWrapper_1fm7f {
         background-color: var(--action-button-primary-hover-color);
     }
-.action-button__primary_ugpsq:active .action-button__iconWrapper_ugpsq {
+.action-button__primary_1fm7f:active .action-button__iconWrapper_1fm7f {
         background-color: var(--action-button-primary-active-color);
     }
-.action-button__secondary_ugpsq {
+.action-button__secondary_1fm7f {
     color: var(--action-button-secondary-base-color)
 }
-.action-button__secondary_ugpsq .action-button__iconWrapper_ugpsq {
+.action-button__secondary_1fm7f .action-button__iconWrapper_1fm7f {
         color: var(--action-button-secondary-base-icon-color);
         background-color: var(--action-button-secondary-base-bg-color);
     }
-.action-button__secondary_ugpsq:hover .action-button__iconWrapper_ugpsq {
+.action-button__secondary_1fm7f:hover .action-button__iconWrapper_1fm7f {
         background-color: var(--action-button-secondary-hover-color);
     }
-.action-button__secondary_ugpsq:active .action-button__iconWrapper_ugpsq {
+.action-button__secondary_1fm7f:active .action-button__iconWrapper_1fm7f {
         background-color: var(--action-button-secondary-active-color);
     }

package/action-button/esm/Component.d.ts

@@ -47,5 +47,5 @@ type ComponentProps = {
 type AnchorProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
 type ButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
 type ActionButtonProps = Partial<AnchorProps | ButtonProps>;
-declare const ActionButton: React.ForwardRefExoticComponent<(Partial<AnchorProps> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>) | (Partial<ButtonProps> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>)>;
+declare const ActionButton: React.ForwardRefExoticComponent<ActionButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export { ActionButtonProps, ActionButton };

package/action-button/esm/Component.js

@@ -5,7 +5,7 @@ import { Loader } from '../../loader/esm';
 import { useFocus } from '@alfalab/hooks';
 import { useLoader } from './hooks.js';
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -44,16 +44,16 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"action-button__component_1h882","s":"action-button__s_1h882","disabled":"action-button__disabled_1h882","loading":"action-button__loading_1h882","iconWrapper":"action-button__iconWrapper_1h882","label":"action-button__label_1h882","focused":"action-button__focused_1h882"};
-require('./index.css');
-
-var defaultColors = {"primary":"action-button__primary_ugpsq","iconWrapper":"action-button__iconWrapper_ugpsq","secondary":"action-button__secondary_ugpsq"};
+var defaultColors = {"primary":"action-button__primary_1fm7f","iconWrapper":"action-button__iconWrapper_1fm7f","secondary":"action-button__secondary_1fm7f"};
 require('./default.css');
 
-var invertedColors = {"primary":"action-button__primary_ktidr","iconWrapper":"action-button__iconWrapper_ktidr","secondary":"action-button__secondary_ktidr"};
+var styles = {"component":"action-button__component_1ubaa","s":"action-button__s_1ubaa","disabled":"action-button__disabled_1ubaa","loading":"action-button__loading_1ubaa","iconWrapper":"action-button__iconWrapper_1ubaa","label":"action-button__label_1ubaa","focused":"action-button__focused_1ubaa"};
+require('./index.css');
+
+var invertedColors = {"primary":"action-button__primary_15z00","iconWrapper":"action-button__iconWrapper_15z00","secondary":"action-button__secondary_15z00"};
 require('./inverted.css');
 
-var staticColors = {"primary":"action-button__primary_zjt9w","iconWrapper":"action-button__iconWrapper_zjt9w","secondary":"action-button__secondary_zjt9w"};
+var staticColors = {"primary":"action-button__primary_1qopu","iconWrapper":"action-button__iconWrapper_1qopu","secondary":"action-button__secondary_1qopu"};
 require('./static.css');
 
 var colorStyles = {

package/action-button/esm/default.css

@@ -33,29 +33,29 @@
     --action-button-secondary-hover-color: var(--color-light-bg-secondary-shade-7);
     --action-button-secondary-active-color: var(--color-light-bg-secondary-shade-15);
 }
-.action-button__primary_ugpsq {
+.action-button__primary_1fm7f {
     color: var(--action-button-primary-base-color)
 }
-.action-button__primary_ugpsq .action-button__iconWrapper_ugpsq {
+.action-button__primary_1fm7f .action-button__iconWrapper_1fm7f {
         color: var(--action-button-primary-base-icon-color);
         background-color: var(--action-button-primary-base-bg-color);
     }
-.action-button__primary_ugpsq:hover .action-button__iconWrapper_ugpsq {
+.action-button__primary_1fm7f:hover .action-button__iconWrapper_1fm7f {
         background-color: var(--action-button-primary-hover-color);
     }
-.action-button__primary_ugpsq:active .action-button__iconWrapper_ugpsq {
+.action-button__primary_1fm7f:active .action-button__iconWrapper_1fm7f {
         background-color: var(--action-button-primary-active-color);
     }
-.action-button__secondary_ugpsq {
+.action-button__secondary_1fm7f {
     color: var(--action-button-secondary-base-color)
 }
-.action-button__secondary_ugpsq .action-button__iconWrapper_ugpsq {
+.action-button__secondary_1fm7f .action-button__iconWrapper_1fm7f {
         color: var(--action-button-secondary-base-icon-color);
         background-color: var(--action-button-secondary-base-bg-color);
     }
-.action-button__secondary_ugpsq:hover .action-button__iconWrapper_ugpsq {
+.action-button__secondary_1fm7f:hover .action-button__iconWrapper_1fm7f {
         background-color: var(--action-button-secondary-hover-color);
     }
-.action-button__secondary_ugpsq:active .action-button__iconWrapper_ugpsq {
+.action-button__secondary_1fm7f:active .action-button__iconWrapper_1fm7f {
         background-color: var(--action-button-secondary-active-color);
     }

package/action-button/esm/index.css

@@ -19,7 +19,7 @@
 :root {
     --focus-color: var(--color-light-border-link);
 }
-.action-button__component_1h882 {
+.action-button__component_1ubaa {
     display: inline-flex;
     flex-flow: column nowrap;
     align-items: center;
@@ -44,21 +44,21 @@
             appearance: none;
     -webkit-tap-highlight-color: transparent
 }
-.action-button__component_1h882.action-button__s_1h882 {
+.action-button__component_1ubaa.action-button__s_1ubaa {
         font-size: 14px;
         line-height: 20px;
         font-weight: 500;
     }
-.action-button__disabled_1h882 {
+.action-button__disabled_1ubaa {
     opacity: 0.3;
     cursor: not-allowed;
     pointer-events: none;
 }
-.action-button__loading_1h882 {
+.action-button__loading_1ubaa {
     cursor: auto;
     pointer-events: none;
 }
-.action-button__iconWrapper_1h882 {
+.action-button__iconWrapper_1ubaa {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -68,18 +68,18 @@
     transition: background-color 0.2s ease;
     line-height: 0
 }
-.action-button__iconWrapper_1h882.action-button__s_1h882 {
+.action-button__iconWrapper_1ubaa.action-button__s_1ubaa {
         width: 48px;
         height: 48px;
     }
-.action-button__label_1h882 {
+.action-button__label_1ubaa {
     display: -webkit-box;
     overflow: hidden;
     text-overflow: ellipsis;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
 }
-.action-button__focused_1h882 {
+.action-button__focused_1ubaa {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/action-button/esm/inverted.css

@@ -35,29 +35,29 @@
         --color-light-bg-secondary-inverted-tint-20
     );
 }
-.action-button__primary_ktidr {
+.action-button__primary_15z00 {
     color: var(--action-button-inverted-primary-base-color)
 }
-.action-button__primary_ktidr .action-button__iconWrapper_ktidr {
+.action-button__primary_15z00 .action-button__iconWrapper_15z00 {
         color: var(--action-button-inverted-primary-base-icon-color);
         background-color: var(--action-button-inverted-primary-base-bg-color);
     }
-.action-button__primary_ktidr:hover .action-button__iconWrapper_ktidr {
+.action-button__primary_15z00:hover .action-button__iconWrapper_15z00 {
         background-color: var(--action-button-inverted-primary-hover-color);
     }
-.action-button__primary_ktidr:active .action-button__iconWrapper_ktidr {
+.action-button__primary_15z00:active .action-button__iconWrapper_15z00 {
         background-color: var(--action-button-inverted-primary-active-color);
     }
-.action-button__secondary_ktidr {
+.action-button__secondary_15z00 {
     color: var(--action-button-inverted-secondary-base-color)
 }
-.action-button__secondary_ktidr .action-button__iconWrapper_ktidr {
+.action-button__secondary_15z00 .action-button__iconWrapper_15z00 {
         color: var(--action-button-inverted-secondary-base-icon-color);
         background-color: var(--action-button-inverted-secondary-base-bg-color);
     }
-.action-button__secondary_ktidr:hover .action-button__iconWrapper_ktidr {
+.action-button__secondary_15z00:hover .action-button__iconWrapper_15z00 {
         background-color: var(--action-button-inverted-secondary-hover-color);
     }
-.action-button__secondary_ktidr:active .action-button__iconWrapper_ktidr {
+.action-button__secondary_15z00:active .action-button__iconWrapper_15z00 {
         background-color: var(--action-button-inverted-secondary-active-color);
     }

package/action-button/esm/static.css

@@ -25,17 +25,17 @@
     --action-button-static-secondary-base-icon-color: var(--color-static-graphic-dark);
     --action-button-static-secondary-base-bg-color: var(--color-static-bg-secondary-light);
 }
-.action-button__primary_zjt9w {
+.action-button__primary_1qopu {
     color: var(--action-button-static-primary-base-color)
 }
-.action-button__primary_zjt9w .action-button__iconWrapper_zjt9w {
+.action-button__primary_1qopu .action-button__iconWrapper_1qopu {
         color: var(--action-button-static-primary-base-icon-color);
         background-color: var(--action-button-static-primary-base-bg-color);
     }
-.action-button__secondary_zjt9w {
+.action-button__secondary_1qopu {
     color: var(--action-button-static-secondary-base-color)
 }
-.action-button__secondary_zjt9w .action-button__iconWrapper_zjt9w {
+.action-button__secondary_1qopu .action-button__iconWrapper_1qopu {
         color: var(--action-button-static-secondary-base-icon-color);
         background-color: var(--action-button-static-secondary-base-bg-color);
     }

package/action-button/index.css

@@ -19,7 +19,7 @@
 :root {
     --focus-color: var(--color-light-border-link);
 }
-.action-button__component_1h882 {
+.action-button__component_1ubaa {
     display: inline-flex;
     flex-flow: column nowrap;
     align-items: center;
@@ -44,21 +44,21 @@
             appearance: none;
     -webkit-tap-highlight-color: transparent
 }
-.action-button__component_1h882.action-button__s_1h882 {
+.action-button__component_1ubaa.action-button__s_1ubaa {
         font-size: 14px;
         line-height: 20px;
         font-weight: 500;
     }
-.action-button__disabled_1h882 {
+.action-button__disabled_1ubaa {
     opacity: 0.3;
     cursor: not-allowed;
     pointer-events: none;
 }
-.action-button__loading_1h882 {
+.action-button__loading_1ubaa {
     cursor: auto;
     pointer-events: none;
 }
-.action-button__iconWrapper_1h882 {
+.action-button__iconWrapper_1ubaa {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -68,18 +68,18 @@
     transition: background-color 0.2s ease;
     line-height: 0
 }
-.action-button__iconWrapper_1h882.action-button__s_1h882 {
+.action-button__iconWrapper_1ubaa.action-button__s_1ubaa {
         width: 48px;
         height: 48px;
     }
-.action-button__label_1h882 {
+.action-button__label_1ubaa {
     display: -webkit-box;
     overflow: hidden;
     text-overflow: ellipsis;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
 }
-.action-button__focused_1h882 {
+.action-button__focused_1ubaa {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/action-button/inverted.css

@@ -35,29 +35,29 @@
         --color-light-bg-secondary-inverted-tint-20
     );
 }
-.action-button__primary_ktidr {
+.action-button__primary_15z00 {
     color: var(--action-button-inverted-primary-base-color)
 }
-.action-button__primary_ktidr .action-button__iconWrapper_ktidr {
+.action-button__primary_15z00 .action-button__iconWrapper_15z00 {
         color: var(--action-button-inverted-primary-base-icon-color);
         background-color: var(--action-button-inverted-primary-base-bg-color);
     }
-.action-button__primary_ktidr:hover .action-button__iconWrapper_ktidr {
+.action-button__primary_15z00:hover .action-button__iconWrapper_15z00 {
         background-color: var(--action-button-inverted-primary-hover-color);
     }
-.action-button__primary_ktidr:active .action-button__iconWrapper_ktidr {
+.action-button__primary_15z00:active .action-button__iconWrapper_15z00 {
         background-color: var(--action-button-inverted-primary-active-color);
     }
-.action-button__secondary_ktidr {
+.action-button__secondary_15z00 {
     color: var(--action-button-inverted-secondary-base-color)
 }
-.action-button__secondary_ktidr .action-button__iconWrapper_ktidr {
+.action-button__secondary_15z00 .action-button__iconWrapper_15z00 {
         color: var(--action-button-inverted-secondary-base-icon-color);
         background-color: var(--action-button-inverted-secondary-base-bg-color);
     }
-.action-button__secondary_ktidr:hover .action-button__iconWrapper_ktidr {
+.action-button__secondary_15z00:hover .action-button__iconWrapper_15z00 {
         background-color: var(--action-button-inverted-secondary-hover-color);
     }
-.action-button__secondary_ktidr:active .action-button__iconWrapper_ktidr {
+.action-button__secondary_15z00:active .action-button__iconWrapper_15z00 {
         background-color: var(--action-button-inverted-secondary-active-color);
     }

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

@@ -47,5 +47,5 @@ type ComponentProps = {
 type AnchorProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
 type ButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
 type ActionButtonProps = Partial<AnchorProps | ButtonProps>;
-declare const ActionButton: React.ForwardRefExoticComponent<(Partial<AnchorProps> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>) | (Partial<ButtonProps> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>)>;
+declare const ActionButton: React.ForwardRefExoticComponent<ActionButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export { ActionButtonProps, ActionButton };

package/action-button/modern/Component.js

@@ -5,16 +5,16 @@ import { useFocus } from '@alfalab/hooks';
 import { Loader } from '../../loader/modern';
 import { useLoader } from './hooks.js';
 
-var styles = {"component":"action-button__component_1h882","s":"action-button__s_1h882","disabled":"action-button__disabled_1h882","loading":"action-button__loading_1h882","iconWrapper":"action-button__iconWrapper_1h882","label":"action-button__label_1h882","focused":"action-button__focused_1h882"};
-require('./index.css');
-
-var defaultColors = {"primary":"action-button__primary_ugpsq","iconWrapper":"action-button__iconWrapper_ugpsq","secondary":"action-button__secondary_ugpsq"};
+var defaultColors = {"primary":"action-button__primary_1fm7f","iconWrapper":"action-button__iconWrapper_1fm7f","secondary":"action-button__secondary_1fm7f"};
 require('./default.css');
 
-var invertedColors = {"primary":"action-button__primary_ktidr","iconWrapper":"action-button__iconWrapper_ktidr","secondary":"action-button__secondary_ktidr"};
+var styles = {"component":"action-button__component_1ubaa","s":"action-button__s_1ubaa","disabled":"action-button__disabled_1ubaa","loading":"action-button__loading_1ubaa","iconWrapper":"action-button__iconWrapper_1ubaa","label":"action-button__label_1ubaa","focused":"action-button__focused_1ubaa"};
+require('./index.css');
+
+var invertedColors = {"primary":"action-button__primary_15z00","iconWrapper":"action-button__iconWrapper_15z00","secondary":"action-button__secondary_15z00"};
 require('./inverted.css');
 
-var staticColors = {"primary":"action-button__primary_zjt9w","iconWrapper":"action-button__iconWrapper_zjt9w","secondary":"action-button__secondary_zjt9w"};
+var staticColors = {"primary":"action-button__primary_1qopu","iconWrapper":"action-button__iconWrapper_1qopu","secondary":"action-button__secondary_1qopu"};
 require('./static.css');
 
 const colorStyles = {
@@ -43,11 +43,11 @@ const ActionButton = forwardRef(({ className, icon, children, href, size = 's',
         React.createElement("span", { role: 'img', className: cn(styles.iconWrapper, colorStyles[colors].iconWrapper, styles[size], iconWrapperClassName) }, showLoader ? React.createElement(Loader, { dataTestId: 'loader' }) : icon),
         React.createElement("span", { className: styles.label }, children)));
     if (href) {
-        return (React.createElement("a", Object.assign({ role: 'button', ref: mergeRefs([componentRef, ref]), href: href, "aria-disabled": disabled || loading }, componentProps, rest), buttonChildren));
+        return (React.createElement("a", { role: 'button', ref: mergeRefs([componentRef, ref]), href: href, "aria-disabled": disabled || loading, ...componentProps, ...rest }, buttonChildren));
     }
-    return (React.createElement("button", Object.assign({ ref: mergeRefs([componentRef, ref]), 
+    return (React.createElement("button", { ref: mergeRefs([componentRef, ref]), 
         // eslint-disable-next-line react/button-has-type
-        type: type, disabled: disabled || loading }, componentProps, rest), buttonChildren));
+        type: type, disabled: disabled || loading, ...componentProps, ...rest }, buttonChildren));
 });
 
 export { ActionButton };

package/action-button/modern/default.css

@@ -33,29 +33,29 @@
     --action-button-secondary-hover-color: var(--color-light-bg-secondary-shade-7);
     --action-button-secondary-active-color: var(--color-light-bg-secondary-shade-15);
 }
-.action-button__primary_ugpsq {
+.action-button__primary_1fm7f {
     color: var(--action-button-primary-base-color)
 }
-.action-button__primary_ugpsq .action-button__iconWrapper_ugpsq {
+.action-button__primary_1fm7f .action-button__iconWrapper_1fm7f {
         color: var(--action-button-primary-base-icon-color);
         background-color: var(--action-button-primary-base-bg-color);
     }
-.action-button__primary_ugpsq:hover .action-button__iconWrapper_ugpsq {
+.action-button__primary_1fm7f:hover .action-button__iconWrapper_1fm7f {
         background-color: var(--action-button-primary-hover-color);
     }
-.action-button__primary_ugpsq:active .action-button__iconWrapper_ugpsq {
+.action-button__primary_1fm7f:active .action-button__iconWrapper_1fm7f {
         background-color: var(--action-button-primary-active-color);
     }
-.action-button__secondary_ugpsq {
+.action-button__secondary_1fm7f {
     color: var(--action-button-secondary-base-color)
 }
-.action-button__secondary_ugpsq .action-button__iconWrapper_ugpsq {
+.action-button__secondary_1fm7f .action-button__iconWrapper_1fm7f {
         color: var(--action-button-secondary-base-icon-color);
         background-color: var(--action-button-secondary-base-bg-color);
     }
-.action-button__secondary_ugpsq:hover .action-button__iconWrapper_ugpsq {
+.action-button__secondary_1fm7f:hover .action-button__iconWrapper_1fm7f {
         background-color: var(--action-button-secondary-hover-color);
     }
-.action-button__secondary_ugpsq:active .action-button__iconWrapper_ugpsq {
+.action-button__secondary_1fm7f:active .action-button__iconWrapper_1fm7f {
         background-color: var(--action-button-secondary-active-color);
     }

package/action-button/modern/index.css

@@ -19,7 +19,7 @@
 :root {
     --focus-color: var(--color-light-border-link);
 }
-.action-button__component_1h882 {
+.action-button__component_1ubaa {
     display: inline-flex;
     flex-flow: column nowrap;
     align-items: center;
@@ -44,21 +44,21 @@
             appearance: none;
     -webkit-tap-highlight-color: transparent
 }
-.action-button__component_1h882.action-button__s_1h882 {
+.action-button__component_1ubaa.action-button__s_1ubaa {
         font-size: 14px;
         line-height: 20px;
         font-weight: 500;
     }
-.action-button__disabled_1h882 {
+.action-button__disabled_1ubaa {
     opacity: 0.3;
     cursor: not-allowed;
     pointer-events: none;
 }
-.action-button__loading_1h882 {
+.action-button__loading_1ubaa {
     cursor: auto;
     pointer-events: none;
 }
-.action-button__iconWrapper_1h882 {
+.action-button__iconWrapper_1ubaa {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -68,18 +68,18 @@
     transition: background-color 0.2s ease;
     line-height: 0
 }
-.action-button__iconWrapper_1h882.action-button__s_1h882 {
+.action-button__iconWrapper_1ubaa.action-button__s_1ubaa {
         width: 48px;
         height: 48px;
     }
-.action-button__label_1h882 {
+.action-button__label_1ubaa {
     display: -webkit-box;
     overflow: hidden;
     text-overflow: ellipsis;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
 }
-.action-button__focused_1h882 {
+.action-button__focused_1ubaa {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/action-button/modern/inverted.css

@@ -35,29 +35,29 @@
         --color-light-bg-secondary-inverted-tint-20
     );
 }
-.action-button__primary_ktidr {
+.action-button__primary_15z00 {
     color: var(--action-button-inverted-primary-base-color)
 }
-.action-button__primary_ktidr .action-button__iconWrapper_ktidr {
+.action-button__primary_15z00 .action-button__iconWrapper_15z00 {
         color: var(--action-button-inverted-primary-base-icon-color);
         background-color: var(--action-button-inverted-primary-base-bg-color);
     }
-.action-button__primary_ktidr:hover .action-button__iconWrapper_ktidr {
+.action-button__primary_15z00:hover .action-button__iconWrapper_15z00 {
         background-color: var(--action-button-inverted-primary-hover-color);
     }
-.action-button__primary_ktidr:active .action-button__iconWrapper_ktidr {
+.action-button__primary_15z00:active .action-button__iconWrapper_15z00 {
         background-color: var(--action-button-inverted-primary-active-color);
     }
-.action-button__secondary_ktidr {
+.action-button__secondary_15z00 {
     color: var(--action-button-inverted-secondary-base-color)
 }
-.action-button__secondary_ktidr .action-button__iconWrapper_ktidr {
+.action-button__secondary_15z00 .action-button__iconWrapper_15z00 {
         color: var(--action-button-inverted-secondary-base-icon-color);
         background-color: var(--action-button-inverted-secondary-base-bg-color);
     }
-.action-button__secondary_ktidr:hover .action-button__iconWrapper_ktidr {
+.action-button__secondary_15z00:hover .action-button__iconWrapper_15z00 {
         background-color: var(--action-button-inverted-secondary-hover-color);
     }
-.action-button__secondary_ktidr:active .action-button__iconWrapper_ktidr {
+.action-button__secondary_15z00:active .action-button__iconWrapper_15z00 {
         background-color: var(--action-button-inverted-secondary-active-color);
     }

package/action-button/modern/static.css

@@ -25,17 +25,17 @@
     --action-button-static-secondary-base-icon-color: var(--color-static-graphic-dark);
     --action-button-static-secondary-base-bg-color: var(--color-static-bg-secondary-light);
 }
-.action-button__primary_zjt9w {
+.action-button__primary_1qopu {
     color: var(--action-button-static-primary-base-color)
 }
-.action-button__primary_zjt9w .action-button__iconWrapper_zjt9w {
+.action-button__primary_1qopu .action-button__iconWrapper_1qopu {
         color: var(--action-button-static-primary-base-icon-color);
         background-color: var(--action-button-static-primary-base-bg-color);
     }
-.action-button__secondary_zjt9w {
+.action-button__secondary_1qopu {
     color: var(--action-button-static-secondary-base-color)
 }
-.action-button__secondary_zjt9w .action-button__iconWrapper_zjt9w {
+.action-button__secondary_1qopu .action-button__iconWrapper_1qopu {
         color: var(--action-button-static-secondary-base-icon-color);
         background-color: var(--action-button-static-secondary-base-bg-color);
     }