@cloudscape-design/components-themeable 3.0.1006 → 3.0.1007

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.css.js

@@ -1,26 +1,26 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_7nfqu_1gpfy_153",
-  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_1gpfy_197",
-  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_1gpfy_202",
-  "drawer-expanded-mode": "awsui_drawer-expanded-mode_7nfqu_1gpfy_217",
-  "navigation": "awsui_navigation_7nfqu_1gpfy_222",
-  "tools": "awsui_tools_7nfqu_1gpfy_223",
-  "global-tools": "awsui_global-tools_7nfqu_1gpfy_224",
-  "tools-open": "awsui_tools-open_7nfqu_1gpfy_262",
-  "split-panel-side": "awsui_split-panel-side_7nfqu_1gpfy_276",
-  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_1gpfy_283",
-  "panel-hidden": "awsui_panel-hidden_7nfqu_1gpfy_296",
-  "toolbar-container": "awsui_toolbar-container_7nfqu_1gpfy_306",
-  "notifications-container": "awsui_notifications-container_7nfqu_1gpfy_312",
-  "notifications-background": "awsui_notifications-background_7nfqu_1gpfy_316",
-  "main-landmark": "awsui_main-landmark_7nfqu_1gpfy_327",
-  "main": "awsui_main_7nfqu_1gpfy_327",
-  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_1gpfy_336",
-  "content-header": "awsui_content-header_7nfqu_1gpfy_346",
-  "content": "awsui_content_7nfqu_1gpfy_346",
-  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_1gpfy_356",
-  "hidden": "awsui_hidden_7nfqu_1gpfy_361"
+  "root": "awsui_root_7nfqu_1w5ew_153",
+  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_1w5ew_197",
+  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_1w5ew_202",
+  "drawer-expanded-mode": "awsui_drawer-expanded-mode_7nfqu_1w5ew_217",
+  "navigation": "awsui_navigation_7nfqu_1w5ew_222",
+  "tools": "awsui_tools_7nfqu_1w5ew_223",
+  "global-tools": "awsui_global-tools_7nfqu_1w5ew_224",
+  "tools-open": "awsui_tools-open_7nfqu_1w5ew_262",
+  "split-panel-side": "awsui_split-panel-side_7nfqu_1w5ew_276",
+  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_1w5ew_283",
+  "panel-hidden": "awsui_panel-hidden_7nfqu_1w5ew_296",
+  "toolbar-container": "awsui_toolbar-container_7nfqu_1w5ew_306",
+  "notifications-container": "awsui_notifications-container_7nfqu_1w5ew_312",
+  "notifications-background": "awsui_notifications-background_7nfqu_1w5ew_316",
+  "main-landmark": "awsui_main-landmark_7nfqu_1w5ew_327",
+  "main": "awsui_main_7nfqu_1w5ew_327",
+  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_1w5ew_336",
+  "content-header": "awsui_content-header_7nfqu_1w5ew_346",
+  "content": "awsui_content_7nfqu_1w5ew_346",
+  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_1w5ew_356",
+  "hidden": "awsui_hidden_7nfqu_1w5ew_361"
 };
   

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.scoped.css

@@ -150,7 +150,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_7nfqu_1gpfy_153:not(#\9) {
+.awsui_root_7nfqu_1w5ew_153:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -183,90 +183,90 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -moz-osx-font-smoothing: auto;
   color: var(--color-text-body-default-5qid0u, #16191f);
   background-color: var(--color-background-layout-main-05m5y6, #f2f3f3);
-  --awsui-max-content-width-xgujsu: 100%;
+  --awsui-max-content-width-kcc2gu: 100%;
   display: grid;
   grid-template-areas: "toolbar    toolbar     toolbar" ".       notifications  ." ".           main       .";
   grid-template-columns: var(--space-layout-content-horizontal-q3zhej, 40px) minmax(0, 1fr) var(--space-layout-content-horizontal-q3zhej, 40px);
   grid-template-rows: min-content min-content 1fr;
 }
 @media (min-width: 689px) {
-  .awsui_root_7nfqu_1gpfy_153:not(#\9) {
+  .awsui_root_7nfqu_1w5ew_153:not(#\9) {
     grid-template-areas: "toolbar    toolbar      toolbar       toolbar   toolbar         toolbar  toolbar" "navigation .         notifications    .         sideSplitPanel  tools    global-tools" "navigation .             main         .         sideSplitPanel  tools    global-tools";
-    grid-template-columns: min-content minmax(var(--space-layout-content-horizontal-q3zhej, 40px), 1fr) minmax(0, var(--awsui-max-content-width-xgujsu)) minmax(var(--space-layout-content-horizontal-q3zhej, 40px), 1fr) min-content min-content;
+    grid-template-columns: min-content minmax(var(--space-layout-content-horizontal-q3zhej, 40px), 1fr) minmax(0, var(--awsui-max-content-width-kcc2gu)) minmax(var(--space-layout-content-horizontal-q3zhej, 40px), 1fr) min-content min-content;
     grid-template-rows: min-content min-content 1fr min-content;
   }
-  .awsui_root_7nfqu_1gpfy_153.awsui_has-adaptive-widths-default_7nfqu_1gpfy_197:not(#\9) {
-    --awsui-max-content-width-xgujsu: 1620px;
+  .awsui_root_7nfqu_1w5ew_153.awsui_has-adaptive-widths-default_7nfqu_1w5ew_197:not(#\9) {
+    --awsui-max-content-width-kcc2gu: 1620px;
   }
 }
 @media (min-width: 689px) and (min-width: 1401px) {
-  .awsui_root_7nfqu_1gpfy_153.awsui_has-adaptive-widths-dashboard_7nfqu_1gpfy_202:not(#\9) {
-    --awsui-max-content-width-xgujsu: 1280px;
+  .awsui_root_7nfqu_1w5ew_153.awsui_has-adaptive-widths-dashboard_7nfqu_1w5ew_202:not(#\9) {
+    --awsui-max-content-width-kcc2gu: 1280px;
   }
 }
 @media (min-width: 689px) and (min-width: 1921px) {
-  .awsui_root_7nfqu_1gpfy_153.awsui_has-adaptive-widths-dashboard_7nfqu_1gpfy_202:not(#\9) {
-    --awsui-max-content-width-xgujsu: 1620px;
+  .awsui_root_7nfqu_1w5ew_153.awsui_has-adaptive-widths-dashboard_7nfqu_1w5ew_202:not(#\9) {
+    --awsui-max-content-width-kcc2gu: 1620px;
   }
 }
 @media (min-width: 689px) and (min-width: 2541px) {
-  .awsui_root_7nfqu_1gpfy_153.awsui_has-adaptive-widths-dashboard_7nfqu_1gpfy_202:not(#\9) {
-    --awsui-max-content-width-xgujsu: 2160px;
+  .awsui_root_7nfqu_1w5ew_153.awsui_has-adaptive-widths-dashboard_7nfqu_1w5ew_202:not(#\9) {
+    --awsui-max-content-width-kcc2gu: 2160px;
   }
 }
 @media (min-width: 689px) {
-  .awsui_root_7nfqu_1gpfy_153.awsui_drawer-expanded-mode_7nfqu_1gpfy_217:not(#\9) {
+  .awsui_root_7nfqu_1w5ew_153.awsui_drawer-expanded-mode_7nfqu_1w5ew_217:not(#\9) {
     grid-template-columns: 0 0 0 0 0 0 auto;
   }
 }
 
-.awsui_navigation_7nfqu_1gpfy_222:not(#\9),
-.awsui_tools_7nfqu_1gpfy_223:not(#\9),
-.awsui_global-tools_7nfqu_1gpfy_224:not(#\9) {
+.awsui_navigation_7nfqu_1w5ew_222:not(#\9),
+.awsui_tools_7nfqu_1w5ew_223:not(#\9),
+.awsui_global-tools_7nfqu_1w5ew_224:not(#\9) {
   grid-row: 1/-1;
   grid-column: 1/-1;
   background: var(--color-background-container-content-aemn43, #ffffff);
   opacity: 1;
 }
 @media (max-width: 688px) {
-  .awsui_navigation_7nfqu_1gpfy_222:not(#\9),
-  .awsui_tools_7nfqu_1gpfy_223:not(#\9),
-  .awsui_global-tools_7nfqu_1gpfy_224:not(#\9) {
+  .awsui_navigation_7nfqu_1w5ew_222:not(#\9),
+  .awsui_tools_7nfqu_1w5ew_223:not(#\9),
+  .awsui_global-tools_7nfqu_1w5ew_224:not(#\9) {
     inline-size: 100%;
   }
 }
 
-.awsui_navigation_7nfqu_1gpfy_222:not(#\9) {
+.awsui_navigation_7nfqu_1w5ew_222:not(#\9) {
   z-index: 830;
 }
 @media (min-width: 689px) {
-  .awsui_navigation_7nfqu_1gpfy_222:not(#\9) {
+  .awsui_navigation_7nfqu_1w5ew_222:not(#\9) {
     grid-area: navigation;
-    inline-size: var(--awsui-navigation-width-xgujsu);
+    inline-size: var(--awsui-navigation-width-kcc2gu);
     border-inline-end: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-layout-ovzonx, #d5dbdb);
   }
 }
 @media (max-width: 688px) {
-  .awsui_navigation_7nfqu_1gpfy_222:not(#\9) {
+  .awsui_navigation_7nfqu_1w5ew_222:not(#\9) {
     z-index: 1001;
   }
 }
 
 @media (min-width: 689px) {
-  .awsui_tools_7nfqu_1gpfy_223:not(#\9) {
+  .awsui_tools_7nfqu_1w5ew_223:not(#\9) {
     grid-area: tools;
     /* stylelint-disable plugin/no-unsupported-browser-features */
   }
-  .awsui_tools_7nfqu_1gpfy_223:not(#\9):not(:has(> [data-testid])) {
-    inline-size: var(--awsui-tools-width-xgujsu);
+  .awsui_tools_7nfqu_1w5ew_223:not(#\9):not(:has(> [data-testid])) {
+    inline-size: var(--awsui-tools-width-kcc2gu);
   }
-  .awsui_tools_7nfqu_1gpfy_223:not(#\9):not(:has(> [data-testid])).awsui_tools-open_7nfqu_1gpfy_262 {
+  .awsui_tools_7nfqu_1w5ew_223:not(#\9):not(:has(> [data-testid])).awsui_tools-open_7nfqu_1w5ew_262 {
     border-inline-start: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-layout-ovzonx, #d5dbdb);
   }
 }
 
 @media (min-width: 689px) {
-  .awsui_global-tools_7nfqu_1gpfy_224:not(#\9) {
+  .awsui_global-tools_7nfqu_1w5ew_224:not(#\9) {
     display: flex;
     grid-area: global-tools;
     justify-content: flex-end;
@@ -274,14 +274,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 }
 
 @media (min-width: 689px) {
-  .awsui_split-panel-side_7nfqu_1gpfy_276:not(#\9) {
+  .awsui_split-panel-side_7nfqu_1w5ew_276:not(#\9) {
     grid-area: sideSplitPanel;
     border-inline-start: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-layout-ovzonx, #d5dbdb);
     opacity: 1;
   }
 }
 
-.awsui_split-panel-bottom_7nfqu_1gpfy_283:not(#\9) {
+.awsui_split-panel-bottom_7nfqu_1w5ew_283:not(#\9) {
   position: sticky;
   z-index: 840;
   align-self: end;
@@ -289,76 +289,76 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   grid-column: 1/-1;
 }
 @media (min-width: 689px) {
-  .awsui_split-panel-bottom_7nfqu_1gpfy_283:not(#\9) {
+  .awsui_split-panel-bottom_7nfqu_1w5ew_283:not(#\9) {
     grid-column: 2/5;
   }
 }
 
-.awsui_panel-hidden_7nfqu_1gpfy_296:not(#\9) {
+.awsui_panel-hidden_7nfqu_1w5ew_296:not(#\9) {
   border-block: none;
   border-inline: none;
   opacity: 0;
   z-index: 0;
 }
-.awsui_panel-hidden_7nfqu_1gpfy_296.awsui_navigation_7nfqu_1gpfy_222:not(#\9), .awsui_panel-hidden_7nfqu_1gpfy_296.awsui_tools_7nfqu_1gpfy_223:not(#\9), .awsui_panel-hidden_7nfqu_1gpfy_296.awsui_global-tools_7nfqu_1gpfy_224:not(#\9) {
+.awsui_panel-hidden_7nfqu_1w5ew_296.awsui_navigation_7nfqu_1w5ew_222:not(#\9), .awsui_panel-hidden_7nfqu_1w5ew_296.awsui_tools_7nfqu_1w5ew_223:not(#\9), .awsui_panel-hidden_7nfqu_1w5ew_296.awsui_global-tools_7nfqu_1w5ew_224:not(#\9) {
   inline-size: 0px;
 }
 
-.awsui_toolbar-container_7nfqu_1gpfy_306:not(#\9) {
+.awsui_toolbar-container_7nfqu_1w5ew_306:not(#\9) {
   grid-area: toolbar;
   block-size: 42px;
   border-block-end: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-layout-ovzonx, #d5dbdb);
 }
 
-.awsui_notifications-container_7nfqu_1gpfy_312:not(#\9) {
+.awsui_notifications-container_7nfqu_1w5ew_312:not(#\9) {
   grid-area: notifications;
 }
 
-.awsui_notifications-background_7nfqu_1gpfy_316:not(#\9) {
+.awsui_notifications-background_7nfqu_1w5ew_316:not(#\9) {
   background: var(--color-background-layout-main-05m5y6, #f2f3f3);
   grid-area: notifications;
   grid-column: 1/-1;
 }
 @media (min-width: 689px) {
-  .awsui_notifications-background_7nfqu_1gpfy_316:not(#\9) {
+  .awsui_notifications-background_7nfqu_1w5ew_316:not(#\9) {
     grid-column: 2/5;
   }
 }
 
-.awsui_main-landmark_7nfqu_1gpfy_327:not(#\9) {
+.awsui_main-landmark_7nfqu_1w5ew_327:not(#\9) {
   display: contents;
 }
 
-.awsui_main_7nfqu_1gpfy_327:not(#\9) {
+.awsui_main_7nfqu_1w5ew_327:not(#\9) {
   grid-area: main;
   margin-block-start: var(--space-scaled-s-gjhvjd, 12px);
   margin-block-end: var(--space-layout-content-bottom-iu1izz, 20px);
 }
-.awsui_main-disable-paddings_7nfqu_1gpfy_336:not(#\9) {
+.awsui_main-disable-paddings_7nfqu_1w5ew_336:not(#\9) {
   margin-block: 0;
   grid-column: 1/-1;
 }
 @media (min-width: 689px) {
-  .awsui_main-disable-paddings_7nfqu_1gpfy_336:not(#\9) {
+  .awsui_main-disable-paddings_7nfqu_1w5ew_336:not(#\9) {
     grid-column: 2/5;
   }
 }
 
-.awsui_content-header_7nfqu_1gpfy_346:not(#\9) {
+.awsui_content-header_7nfqu_1w5ew_346:not(#\9) {
   margin-block-end: var(--space-content-header-padding-bottom-hjkugf, 16px);
 }
 
-.awsui_content_7nfqu_1gpfy_346:not(#\9) {
+.awsui_content_7nfqu_1w5ew_346:not(#\9) {
   display: contents;
 }
 
 /* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
 @media (max-width: 688px) {
-  .awsui_unfocusable-mobile_7nfqu_1gpfy_356 *:not(#\9) {
+  .awsui_unfocusable-mobile_7nfqu_1w5ew_356 *:not(#\9) {
     visibility: hidden;
   }
 }
 
-.awsui_hidden_7nfqu_1gpfy_361:not(#\9) {
+.awsui_hidden_7nfqu_1w5ew_361:not(#\9) {
   display: none;
 }

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js

@@ -2,26 +2,26 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_7nfqu_1gpfy_153",
-  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_1gpfy_197",
-  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_1gpfy_202",
-  "drawer-expanded-mode": "awsui_drawer-expanded-mode_7nfqu_1gpfy_217",
-  "navigation": "awsui_navigation_7nfqu_1gpfy_222",
-  "tools": "awsui_tools_7nfqu_1gpfy_223",
-  "global-tools": "awsui_global-tools_7nfqu_1gpfy_224",
-  "tools-open": "awsui_tools-open_7nfqu_1gpfy_262",
-  "split-panel-side": "awsui_split-panel-side_7nfqu_1gpfy_276",
-  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_1gpfy_283",
-  "panel-hidden": "awsui_panel-hidden_7nfqu_1gpfy_296",
-  "toolbar-container": "awsui_toolbar-container_7nfqu_1gpfy_306",
-  "notifications-container": "awsui_notifications-container_7nfqu_1gpfy_312",
-  "notifications-background": "awsui_notifications-background_7nfqu_1gpfy_316",
-  "main-landmark": "awsui_main-landmark_7nfqu_1gpfy_327",
-  "main": "awsui_main_7nfqu_1gpfy_327",
-  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_1gpfy_336",
-  "content-header": "awsui_content-header_7nfqu_1gpfy_346",
-  "content": "awsui_content_7nfqu_1gpfy_346",
-  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_1gpfy_356",
-  "hidden": "awsui_hidden_7nfqu_1gpfy_361"
+  "root": "awsui_root_7nfqu_1w5ew_153",
+  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_1w5ew_197",
+  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_1w5ew_202",
+  "drawer-expanded-mode": "awsui_drawer-expanded-mode_7nfqu_1w5ew_217",
+  "navigation": "awsui_navigation_7nfqu_1w5ew_222",
+  "tools": "awsui_tools_7nfqu_1w5ew_223",
+  "global-tools": "awsui_global-tools_7nfqu_1w5ew_224",
+  "tools-open": "awsui_tools-open_7nfqu_1w5ew_262",
+  "split-panel-side": "awsui_split-panel-side_7nfqu_1w5ew_276",
+  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_1w5ew_283",
+  "panel-hidden": "awsui_panel-hidden_7nfqu_1w5ew_296",
+  "toolbar-container": "awsui_toolbar-container_7nfqu_1w5ew_306",
+  "notifications-container": "awsui_notifications-container_7nfqu_1w5ew_312",
+  "notifications-background": "awsui_notifications-background_7nfqu_1w5ew_316",
+  "main-landmark": "awsui_main-landmark_7nfqu_1w5ew_327",
+  "main": "awsui_main_7nfqu_1w5ew_327",
+  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_1w5ew_336",
+  "content-header": "awsui_content-header_7nfqu_1w5ew_346",
+  "content": "awsui_content_7nfqu_1w5ew_346",
+  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_1w5ew_356",
+  "hidden": "awsui_hidden_7nfqu_1w5ew_361"
 };
   

package/lib/internal/template/button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/button/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAG3C,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB,QAAA,MAAM,MAAM,qFA4EX,CAAC;AAGF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/button/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAG3C,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB,QAAA,MAAM,MAAM,qFA8EX,CAAC;AAGF,eAAe,MAAM,CAAC"}

package/lib/internal/template/button/index.js

@@ -7,13 +7,13 @@ import useBaseComponent from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import { InternalButton } from './internal';
 const Button = React.forwardRef((_a, ref) => {
-    var { children, iconName, iconAlign = 'left', iconUrl, iconSvg, iconAlt, variant = 'normal', loading = false, loadingText, disabled = false, disabledReason, wrapText = true, href, target, rel, external = false, download, formAction = 'submit', ariaLabel, ariaDescribedby, onClick, onFollow, ariaExpanded, ariaControls, fullWidth, form, i18nStrings } = _a, props = __rest(_a, ["children", "iconName", "iconAlign", "iconUrl", "iconSvg", "iconAlt", "variant", "loading", "loadingText", "disabled", "disabledReason", "wrapText", "href", "target", "rel", "external", "download", "formAction", "ariaLabel", "ariaDescribedby", "onClick", "onFollow", "ariaExpanded", "ariaControls", "fullWidth", "form", "i18nStrings"]);
+    var { children, iconName, iconAlign = 'left', iconUrl, iconSvg, iconAlt, variant = 'normal', loading = false, loadingText, disabled = false, disabledReason, wrapText = true, href, target, rel, external = false, download, formAction = 'submit', ariaLabel, ariaDescribedby, onClick, onFollow, ariaExpanded, ariaControls, fullWidth, form, i18nStrings, style } = _a, props = __rest(_a, ["children", "iconName", "iconAlign", "iconUrl", "iconSvg", "iconAlt", "variant", "loading", "loadingText", "disabled", "disabledReason", "wrapText", "href", "target", "rel", "external", "download", "formAction", "ariaLabel", "ariaDescribedby", "onClick", "onFollow", "ariaExpanded", "ariaControls", "fullWidth", "form", "i18nStrings", "style"]);
     const baseComponentProps = useBaseComponent('Button', {
         props: { formAction, fullWidth, iconAlign, iconName, rel, target, external, variant, wrapText },
         metadata: { hasDisabledReason: Boolean(disabledReason) },
     });
     const baseProps = getBaseProps(props);
-    return (React.createElement(InternalButton, Object.assign({}, baseProps, baseComponentProps, { ref: ref, iconName: iconName, iconAlign: iconAlign, iconUrl: iconUrl, iconSvg: iconSvg, iconAlt: iconAlt, variant: variant, loading: loading, loadingText: loadingText, disabled: disabled, disabledReason: disabledReason, wrapText: wrapText, href: href, target: target, rel: rel, external: external, download: download, formAction: formAction, ariaLabel: ariaLabel, ariaDescribedby: ariaDescribedby, onClick: onClick, onFollow: onFollow, ariaExpanded: ariaExpanded, ariaControls: ariaControls, fullWidth: fullWidth, form: form, i18nStrings: i18nStrings, __injectAnalyticsComponentMetadata: true }), children));
+    return (React.createElement(InternalButton, Object.assign({}, baseProps, baseComponentProps, { ref: ref, iconName: iconName, iconAlign: iconAlign, iconUrl: iconUrl, iconSvg: iconSvg, iconAlt: iconAlt, variant: variant, loading: loading, loadingText: loadingText, disabled: disabled, disabledReason: disabledReason, wrapText: wrapText, href: href, target: target, rel: rel, external: external, download: download, formAction: formAction, ariaLabel: ariaLabel, ariaDescribedby: ariaDescribedby, onClick: onClick, onFollow: onFollow, ariaExpanded: ariaExpanded, ariaControls: ariaControls, fullWidth: fullWidth, form: form, i18nStrings: i18nStrings, style: style, __injectAnalyticsComponentMetadata: true }), children));
 });
 applyDisplayName(Button, 'Button');
 export default Button;

package/lib/internal/template/button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAI5C,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAC7B,CACE,EA6Bc,EACd,GAA+B,EAC/B,EAAE;QA/BF,EACE,QAAQ,EACR,QAAQ,EACR,SAAS,GAAG,MAAM,EAClB,OAAO,EACP,OAAO,EACP,OAAO,EACP,OAAO,GAAG,QAAQ,EAClB,OAAO,GAAG,KAAK,EACf,WAAW,EACX,QAAQ,GAAG,KAAK,EAChB,cAAc,EACd,QAAQ,GAAG,IAAI,EACf,IAAI,EACJ,MAAM,EACN,GAAG,EACH,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,UAAU,GAAG,QAAQ,EACrB,SAAS,EACT,eAAe,EACf,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,IAAI,EACJ,WAAW,OAEC,EADT,KAAK,cA5BV,+UA6BC,CADS;IAIV,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,QAAQ,EAAE;QACpD,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC/F,QAAQ,EAAE,EAAE,iBAAiB,EAAE,OAAO,CAAC,cAAc,CAAC,EAAE;KACzD,CAAC,CAAC;IACH,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,OAAO,CACL,oBAAC,cAAc,oBACT,SAAS,EACT,kBAAkB,IACtB,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,EAChC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,kCAAkC,EAAE,IAAI,KAEvC,QAAQ,CACM,CAClB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;AACnC,eAAe,MAAM,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { getBaseProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { ButtonProps } from './interfaces';\nimport { InternalButton } from './internal';\n\nexport { ButtonProps };\n\nconst Button = React.forwardRef(\n  (\n    {\n      children,\n      iconName,\n      iconAlign = 'left',\n      iconUrl,\n      iconSvg,\n      iconAlt,\n      variant = 'normal',\n      loading = false,\n      loadingText,\n      disabled = false,\n      disabledReason,\n      wrapText = true,\n      href,\n      target,\n      rel,\n      external = false,\n      download,\n      formAction = 'submit',\n      ariaLabel,\n      ariaDescribedby,\n      onClick,\n      onFollow,\n      ariaExpanded,\n      ariaControls,\n      fullWidth,\n      form,\n      i18nStrings,\n      ...props\n    }: ButtonProps,\n    ref: React.Ref<ButtonProps.Ref>\n  ) => {\n    const baseComponentProps = useBaseComponent('Button', {\n      props: { formAction, fullWidth, iconAlign, iconName, rel, target, external, variant, wrapText },\n      metadata: { hasDisabledReason: Boolean(disabledReason) },\n    });\n    const baseProps = getBaseProps(props);\n    return (\n      <InternalButton\n        {...baseProps}\n        {...baseComponentProps}\n        ref={ref}\n        iconName={iconName}\n        iconAlign={iconAlign}\n        iconUrl={iconUrl}\n        iconSvg={iconSvg}\n        iconAlt={iconAlt}\n        variant={variant}\n        loading={loading}\n        loadingText={loadingText}\n        disabled={disabled}\n        disabledReason={disabledReason}\n        wrapText={wrapText}\n        href={href}\n        target={target}\n        rel={rel}\n        external={external}\n        download={download}\n        formAction={formAction}\n        ariaLabel={ariaLabel}\n        ariaDescribedby={ariaDescribedby}\n        onClick={onClick}\n        onFollow={onFollow}\n        ariaExpanded={ariaExpanded}\n        ariaControls={ariaControls}\n        fullWidth={fullWidth}\n        form={form}\n        i18nStrings={i18nStrings}\n        __injectAnalyticsComponentMetadata={true}\n      >\n        {children}\n      </InternalButton>\n    );\n  }\n);\n\napplyDisplayName(Button, 'Button');\nexport default Button;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAI5C,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAC7B,CACE,EA8Bc,EACd,GAA+B,EAC/B,EAAE;QAhCF,EACE,QAAQ,EACR,QAAQ,EACR,SAAS,GAAG,MAAM,EAClB,OAAO,EACP,OAAO,EACP,OAAO,EACP,OAAO,GAAG,QAAQ,EAClB,OAAO,GAAG,KAAK,EACf,WAAW,EACX,QAAQ,GAAG,KAAK,EAChB,cAAc,EACd,QAAQ,GAAG,IAAI,EACf,IAAI,EACJ,MAAM,EACN,GAAG,EACH,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,UAAU,GAAG,QAAQ,EACrB,SAAS,EACT,eAAe,EACf,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,IAAI,EACJ,WAAW,EACX,KAAK,OAEO,EADT,KAAK,cA7BV,wVA8BC,CADS;IAIV,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,QAAQ,EAAE;QACpD,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC/F,QAAQ,EAAE,EAAE,iBAAiB,EAAE,OAAO,CAAC,cAAc,CAAC,EAAE;KACzD,CAAC,CAAC;IACH,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,OAAO,CACL,oBAAC,cAAc,oBACT,SAAS,EACT,kBAAkB,IACtB,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,EAChC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,kCAAkC,EAAE,IAAI,KAEvC,QAAQ,CACM,CAClB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;AACnC,eAAe,MAAM,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { getBaseProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { ButtonProps } from './interfaces';\nimport { InternalButton } from './internal';\n\nexport { ButtonProps };\n\nconst Button = React.forwardRef(\n  (\n    {\n      children,\n      iconName,\n      iconAlign = 'left',\n      iconUrl,\n      iconSvg,\n      iconAlt,\n      variant = 'normal',\n      loading = false,\n      loadingText,\n      disabled = false,\n      disabledReason,\n      wrapText = true,\n      href,\n      target,\n      rel,\n      external = false,\n      download,\n      formAction = 'submit',\n      ariaLabel,\n      ariaDescribedby,\n      onClick,\n      onFollow,\n      ariaExpanded,\n      ariaControls,\n      fullWidth,\n      form,\n      i18nStrings,\n      style,\n      ...props\n    }: ButtonProps,\n    ref: React.Ref<ButtonProps.Ref>\n  ) => {\n    const baseComponentProps = useBaseComponent('Button', {\n      props: { formAction, fullWidth, iconAlign, iconName, rel, target, external, variant, wrapText },\n      metadata: { hasDisabledReason: Boolean(disabledReason) },\n    });\n    const baseProps = getBaseProps(props);\n    return (\n      <InternalButton\n        {...baseProps}\n        {...baseComponentProps}\n        ref={ref}\n        iconName={iconName}\n        iconAlign={iconAlign}\n        iconUrl={iconUrl}\n        iconSvg={iconSvg}\n        iconAlt={iconAlt}\n        variant={variant}\n        loading={loading}\n        loadingText={loadingText}\n        disabled={disabled}\n        disabledReason={disabledReason}\n        wrapText={wrapText}\n        href={href}\n        target={target}\n        rel={rel}\n        external={external}\n        download={download}\n        formAction={formAction}\n        ariaLabel={ariaLabel}\n        ariaDescribedby={ariaDescribedby}\n        onClick={onClick}\n        onFollow={onFollow}\n        ariaExpanded={ariaExpanded}\n        ariaControls={ariaControls}\n        fullWidth={fullWidth}\n        form={form}\n        i18nStrings={i18nStrings}\n        style={style}\n        __injectAnalyticsComponentMetadata={true}\n      >\n        {children}\n      </InternalButton>\n    );\n  }\n);\n\napplyDisplayName(Button, 'Button');\nexport default Button;\n"]}

package/lib/internal/template/button/interfaces.d.ts

@@ -89,6 +89,10 @@ export interface BaseButtonProps {
      * @i18n
      */
     i18nStrings?: ButtonProps.I18nStrings;
+    /**
+     * @awsuiSystem core
+     */
+    style?: ButtonProps.Style;
 }
 export interface ButtonProps extends BaseComponentProps, BaseButtonProps {
     /**
@@ -174,5 +178,36 @@ export declare namespace ButtonProps {
          */
         focus(options?: FocusOptions): void;
     }
+    interface Style {
+        root?: {
+            background?: {
+                active?: string;
+                default?: string;
+                disabled?: string;
+                hover?: string;
+            };
+            borderColor?: {
+                active?: string;
+                default?: string;
+                disabled?: string;
+                hover?: string;
+            };
+            borderRadius?: string;
+            borderWidth?: string;
+            color?: {
+                active?: string;
+                default?: string;
+                disabled?: string;
+                hover?: string;
+            };
+            focusRing?: {
+                borderColor?: string;
+                borderRadius?: string;
+                borderWidth?: string;
+            };
+            paddingBlock?: string;
+            paddingInline?: string;
+        };
+    }
 }
 //# sourceMappingURL=interfaces.d.ts.map

package/lib/internal/template/button/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/button/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,WAAW,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAE/G,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IAC1B;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC;CACvC;AAED,MAAM,WAAW,WAAY,SAAQ,kBAAkB,EAAE,eAAe;IACtE;;OAEG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC;IAElC;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC;IAEpC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;QAII;IACJ,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAE5B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IAE1D;;;OAGG;IACH,QAAQ,CAAC,EAAE,sBAAsB,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;IAE5D;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC;IAE9B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,yBAAiB,WAAW,CAAC;IAC3B,KAAY,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,aAAa,CAAC;IAC7F,KAAY,WAAW,GAAG,YAAY,CAAC;IACvC,KAAY,YAAY,GAAG,oBAAoB,CAAC;IAEhD,KAAY,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;IAE3C,KAAY,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;IAEzC,UAAiB,WAAW;QAC1B;;WAEG;QACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;KAChC;IAED,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;KACrC;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/button/interfaces.ts"],"names":[],"mappings":"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"}

package/lib/internal/template/button/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/button/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { IconProps } from '../icon/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { BaseNavigationDetail, CancelableEventHandler, ClickDetail as _ClickDetail } from '../internal/events';\n\nexport interface BaseButtonProps {\n  /**\n   * Renders the button as disabled and prevents clicks.\n   */\n  disabled?: boolean;\n  /**\n   * Provides a reason why the button is disabled (only when `disabled` is `true`).\n   * If provided, the button becomes focusable.\n   * Applicable for all button variants, except link.\n   */\n  disabledReason?: string;\n  /**\n   * Renders the button as being in a loading state. It takes precedence over the `disabled` if both are set to `true`.\n   * It prevents users from clicking the button, but it can still be focused.\n   */\n  loading?: boolean;\n  /**\n   * Specifies the text that screen reader announces when the button is in a loading state.\n   */\n  loadingText?: string;\n  /**\n   * Displays an icon next to the text. You can use the `iconAlign` property to position the icon.\n   */\n  iconName?: IconProps.Name;\n  /**\n   * Specifies the URL of a custom icon. Use this property if the icon you want isn't available.\n   *\n   * If you set both `iconUrl` and `iconSvg`, `iconSvg` will take precedence.\n   */\n  iconUrl?: string;\n  /**\n   * Specifies the SVG of a custom icon.\n   *\n   * Use this property if you want your custom icon to inherit colors dictated by variant or hover states.\n   * When this property is set, the component will be decorated with `aria-hidden=\"true\"`. Ensure that the `svg` element:\n   * - has attribute `focusable=\"false\"`.\n   * - has `viewBox=\"0 0 16 16\"`.\n   *\n   * If you set the `svg` element as the root node of the slot, the component will automatically\n   * - set `stroke=\"currentColor\"`, `fill=\"none\"`, and `vertical-align=\"top\"`.\n   * - set the stroke width based on the size of the icon.\n   * - set the width and height of the SVG element based on the size of the icon.\n   *\n   * If you don't want these styles to be automatically set, wrap the `svg` element into a `span`.\n   * You can still set the stroke to `currentColor` to inherit the color of the surrounding elements.\n   *\n   * If you set both `iconUrl` and `iconSvg`, `iconSvg` will take precedence.\n   *\n   * *Note:* Remember to remove any additional elements (for example: `defs`) and related CSS classes from SVG files exported from design software.\n   * In most cases, they aren't needed, as the `svg` element inherits styles from the icon component.\n   */\n  iconSvg?: React.ReactNode;\n\n  /**\n   * Adds `aria-label` to the button element. Use this to provide an accessible name for buttons\n   * that don't have visible text, and to distinguish between multiple buttons with identical visible text.\n   * The text will also be added to the `title` attribute of the button.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Adds `aria-describedby` to the button.\n   */\n  ariaDescribedby?: string;\n\n  /**\n   * Specifies if the `text` content wraps. If you set it to `false`, it prevents the text from wrapping.\n   */\n  wrapText?: boolean;\n\n  /**\n   * Text displayed in the button element.\n   * @displayname text\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Adds `aria-controls` to the button. Use when the button controls the contents or presence of an element.\n   */\n  ariaControls?: string;\n\n  /**\n   * Adds an external icon after the button label text.\n   * If an href is provided, it opens the link in a new tab.\n   */\n  external?: boolean;\n\n  /**\n   * An object containing all the necessary localized strings required by the component. The object should contain:\n   *\n   * * `externalIconAriaLabel` - (optional) Specifies the aria-label for the external icon when `external` is set to `true`.\n   * @i18n\n   */\n  i18nStrings?: ButtonProps.I18nStrings;\n}\n\nexport interface ButtonProps extends BaseComponentProps, BaseButtonProps {\n  /**\n   * Specifies the alignment of the icon.\n   */\n  iconAlign?: ButtonProps.IconAlign;\n\n  /**\n   * The form action that is performed by a button click.\n   */\n  formAction?: ButtonProps.FormAction;\n\n  /**\n   * Applies button styling to a link. Use this property if you need a link styled as a button (`variant=link`).\n   * For example, if you have a 'help' button that links to a documentation page.\n   */\n  href?: string;\n\n  /**\n   * Specifies where to open the linked URL (for example, to open in a new browser window or tab use `_blank`).\n   * This property only applies when an `href` is provided.\n   */\n  target?: string;\n\n  /**\n   * Adds a `rel` attribute to the link. By default, the component sets the `rel` attribute to \"noopener noreferrer\" when `target` is `\"_blank\"`.\n   * If the `rel` property is provided, it overrides the default behavior.\n   */\n  rel?: string;\n\n  /**\n   * Specifies whether the linked URL, when selected, will prompt the user to download instead of navigate.\n   * You can specify a string value that will be suggested as the name of the downloaded file.\n   * This property only applies when an `href` is provided.\n   **/\n  download?: boolean | string;\n\n  /** The id of the <form> element to associate with the button. The value of this attribute must be the id of a <form> in the same document.\n   *  Use when a button is not the descendant of a form element, such as when used in a modal.\n   */\n  form?: string;\n\n  /**\n   * Adds aria-expanded to the button element. Use when the button controls an expandable element.\n   */\n  ariaExpanded?: boolean;\n\n  /**\n   * Called when the user clicks on the button and the button is not disabled or in loading state.\n   */\n  onClick?: CancelableEventHandler<ButtonProps.ClickDetail>;\n\n  /**\n   * Called when the user clicks on the button with the left mouse button without pressing\n   * modifier keys (that is, CTRL, ALT, SHIFT, META), and the button has an `href` set.\n   */\n  onFollow?: CancelableEventHandler<ButtonProps.FollowDetail>;\n\n  /**\n   * Sets the button width to be 100% of the parent container width. Button content is centered.\n   */\n  fullWidth?: boolean;\n\n  /** Determines the general styling of the button as follows:\n   * * `primary` for primary buttons.\n   * * `normal` for secondary buttons.\n   * * `link` for tertiary buttons.\n   * * `icon` to display an icon only (no text).\n   * * `inline-icon` to display an icon-only (no text) button within a text context.\n   * * `inline-link` to display a tertiary button with no outer padding.\n   */\n  variant?: ButtonProps.Variant;\n\n  /**\n   * Specifies alternate text for a custom icon. We recommend that you provide this for accessibility.\n   * This property is ignored if you use a predefined icon or if you set your custom icon using the `iconSvg` slot.\n   */\n  iconAlt?: string;\n}\n\nexport namespace ButtonProps {\n  export type Variant = 'normal' | 'primary' | 'link' | 'icon' | 'inline-icon' | 'inline-link';\n  export type ClickDetail = _ClickDetail;\n  export type FollowDetail = BaseNavigationDetail;\n\n  export type FormAction = 'submit' | 'none';\n\n  export type IconAlign = 'left' | 'right';\n\n  export interface I18nStrings {\n    /**\n     * Specifies the aria-label for the external icon when `external` is set to `true`.\n     */\n    externalIconAriaLabel?: string;\n  }\n\n  export interface Ref {\n    /**\n     * Focuses the underlying native button.\n     */\n    focus(options?: FocusOptions): void;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/button/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { IconProps } from '../icon/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { BaseNavigationDetail, CancelableEventHandler, ClickDetail as _ClickDetail } from '../internal/events';\n\nexport interface BaseButtonProps {\n  /**\n   * Renders the button as disabled and prevents clicks.\n   */\n  disabled?: boolean;\n  /**\n   * Provides a reason why the button is disabled (only when `disabled` is `true`).\n   * If provided, the button becomes focusable.\n   * Applicable for all button variants, except link.\n   */\n  disabledReason?: string;\n  /**\n   * Renders the button as being in a loading state. It takes precedence over the `disabled` if both are set to `true`.\n   * It prevents users from clicking the button, but it can still be focused.\n   */\n  loading?: boolean;\n  /**\n   * Specifies the text that screen reader announces when the button is in a loading state.\n   */\n  loadingText?: string;\n  /**\n   * Displays an icon next to the text. You can use the `iconAlign` property to position the icon.\n   */\n  iconName?: IconProps.Name;\n  /**\n   * Specifies the URL of a custom icon. Use this property if the icon you want isn't available.\n   *\n   * If you set both `iconUrl` and `iconSvg`, `iconSvg` will take precedence.\n   */\n  iconUrl?: string;\n  /**\n   * Specifies the SVG of a custom icon.\n   *\n   * Use this property if you want your custom icon to inherit colors dictated by variant or hover states.\n   * When this property is set, the component will be decorated with `aria-hidden=\"true\"`. Ensure that the `svg` element:\n   * - has attribute `focusable=\"false\"`.\n   * - has `viewBox=\"0 0 16 16\"`.\n   *\n   * If you set the `svg` element as the root node of the slot, the component will automatically\n   * - set `stroke=\"currentColor\"`, `fill=\"none\"`, and `vertical-align=\"top\"`.\n   * - set the stroke width based on the size of the icon.\n   * - set the width and height of the SVG element based on the size of the icon.\n   *\n   * If you don't want these styles to be automatically set, wrap the `svg` element into a `span`.\n   * You can still set the stroke to `currentColor` to inherit the color of the surrounding elements.\n   *\n   * If you set both `iconUrl` and `iconSvg`, `iconSvg` will take precedence.\n   *\n   * *Note:* Remember to remove any additional elements (for example: `defs`) and related CSS classes from SVG files exported from design software.\n   * In most cases, they aren't needed, as the `svg` element inherits styles from the icon component.\n   */\n  iconSvg?: React.ReactNode;\n\n  /**\n   * Adds `aria-label` to the button element. Use this to provide an accessible name for buttons\n   * that don't have visible text, and to distinguish between multiple buttons with identical visible text.\n   * The text will also be added to the `title` attribute of the button.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Adds `aria-describedby` to the button.\n   */\n  ariaDescribedby?: string;\n\n  /**\n   * Specifies if the `text` content wraps. If you set it to `false`, it prevents the text from wrapping.\n   */\n  wrapText?: boolean;\n\n  /**\n   * Text displayed in the button element.\n   * @displayname text\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Adds `aria-controls` to the button. Use when the button controls the contents or presence of an element.\n   */\n  ariaControls?: string;\n\n  /**\n   * Adds an external icon after the button label text.\n   * If an href is provided, it opens the link in a new tab.\n   */\n  external?: boolean;\n\n  /**\n   * An object containing all the necessary localized strings required by the component. The object should contain:\n   *\n   * * `externalIconAriaLabel` - (optional) Specifies the aria-label for the external icon when `external` is set to `true`.\n   * @i18n\n   */\n  i18nStrings?: ButtonProps.I18nStrings;\n\n  /**\n   * @awsuiSystem core\n   */\n  style?: ButtonProps.Style;\n}\n\nexport interface ButtonProps extends BaseComponentProps, BaseButtonProps {\n  /**\n   * Specifies the alignment of the icon.\n   */\n  iconAlign?: ButtonProps.IconAlign;\n\n  /**\n   * The form action that is performed by a button click.\n   */\n  formAction?: ButtonProps.FormAction;\n\n  /**\n   * Applies button styling to a link. Use this property if you need a link styled as a button (`variant=link`).\n   * For example, if you have a 'help' button that links to a documentation page.\n   */\n  href?: string;\n\n  /**\n   * Specifies where to open the linked URL (for example, to open in a new browser window or tab use `_blank`).\n   * This property only applies when an `href` is provided.\n   */\n  target?: string;\n\n  /**\n   * Adds a `rel` attribute to the link. By default, the component sets the `rel` attribute to \"noopener noreferrer\" when `target` is `\"_blank\"`.\n   * If the `rel` property is provided, it overrides the default behavior.\n   */\n  rel?: string;\n\n  /**\n   * Specifies whether the linked URL, when selected, will prompt the user to download instead of navigate.\n   * You can specify a string value that will be suggested as the name of the downloaded file.\n   * This property only applies when an `href` is provided.\n   **/\n  download?: boolean | string;\n\n  /** The id of the <form> element to associate with the button. The value of this attribute must be the id of a <form> in the same document.\n   *  Use when a button is not the descendant of a form element, such as when used in a modal.\n   */\n  form?: string;\n\n  /**\n   * Adds aria-expanded to the button element. Use when the button controls an expandable element.\n   */\n  ariaExpanded?: boolean;\n\n  /**\n   * Called when the user clicks on the button and the button is not disabled or in loading state.\n   */\n  onClick?: CancelableEventHandler<ButtonProps.ClickDetail>;\n\n  /**\n   * Called when the user clicks on the button with the left mouse button without pressing\n   * modifier keys (that is, CTRL, ALT, SHIFT, META), and the button has an `href` set.\n   */\n  onFollow?: CancelableEventHandler<ButtonProps.FollowDetail>;\n\n  /**\n   * Sets the button width to be 100% of the parent container width. Button content is centered.\n   */\n  fullWidth?: boolean;\n\n  /** Determines the general styling of the button as follows:\n   * * `primary` for primary buttons.\n   * * `normal` for secondary buttons.\n   * * `link` for tertiary buttons.\n   * * `icon` to display an icon only (no text).\n   * * `inline-icon` to display an icon-only (no text) button within a text context.\n   * * `inline-link` to display a tertiary button with no outer padding.\n   */\n  variant?: ButtonProps.Variant;\n\n  /**\n   * Specifies alternate text for a custom icon. We recommend that you provide this for accessibility.\n   * This property is ignored if you use a predefined icon or if you set your custom icon using the `iconSvg` slot.\n   */\n  iconAlt?: string;\n}\n\nexport namespace ButtonProps {\n  export type Variant = 'normal' | 'primary' | 'link' | 'icon' | 'inline-icon' | 'inline-link';\n  export type ClickDetail = _ClickDetail;\n  export type FollowDetail = BaseNavigationDetail;\n\n  export type FormAction = 'submit' | 'none';\n\n  export type IconAlign = 'left' | 'right';\n\n  export interface I18nStrings {\n    /**\n     * Specifies the aria-label for the external icon when `external` is set to `true`.\n     */\n    externalIconAriaLabel?: string;\n  }\n\n  export interface Ref {\n    /**\n     * Focuses the underlying native button.\n     */\n    focus(options?: FocusOptions): void;\n  }\n\n  export interface Style {\n    root?: {\n      background?: {\n        active?: string;\n        default?: string;\n        disabled?: string;\n        hover?: string;\n      };\n      borderColor?: {\n        active?: string;\n        default?: string;\n        disabled?: string;\n        hover?: string;\n      };\n      borderRadius?: string;\n      borderWidth?: string;\n      color?: {\n        active?: string;\n        default?: string;\n        disabled?: string;\n        hover?: string;\n      };\n      focusRing?: {\n        borderColor?: string;\n        borderRadius?: string;\n        borderWidth?: string;\n      };\n      paddingBlock?: string;\n      paddingInline?: string;\n    };\n  }\n}\n"]}

package/lib/internal/template/button/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/button/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAwB3D,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAQlF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAM3C,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG;IAC/D,OAAO,CAAC,EACJ,WAAW,CAAC,SAAS,CAAC,GACtB,eAAe,GACf,kBAAkB,GAClB,cAAc,GACd,eAAe,GACf,4BAA4B,CAAC;IACjC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EACf,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC,GACnF,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC,CAAC,EAAE,OAAO,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC,GAAG,0BAA0B,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;AAEtE,eAAO,MAAM,cAAc;cAlBrB,WAAW,CAAC,SAAS,CAAC,GACtB,eAAe,GACf,kBAAkB,GAClB,cAAc,GACd,eAAe,GACf,4BAA4B;;;;;;;;;6GAoSjC,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/button/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAyB3D,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAQlF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAM3C,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG;IAC/D,OAAO,CAAC,EACJ,WAAW,CAAC,SAAS,CAAC,GACtB,eAAe,GACf,kBAAkB,GAClB,cAAc,GACd,eAAe,GACf,4BAA4B,CAAC;IACjC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EACf,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC,GACnF,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC,CAAC,EAAE,OAAO,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC,GAAG,0BAA0B,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;AAEtE,eAAO,MAAM,cAAc;cAlBrB,WAAW,CAAC,SAAS,CAAC,GACtB,eAAe,GACf,kBAAkB,GAClB,cAAc,GACd,eAAe,GACf,4BAA4B;;;;;;;;;6GAwUjC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/internal/template/button/internal.js

@@ -14,6 +14,7 @@ import Tooltip from '../internal/components/tooltip/index.js';
 import { useButtonContext } from '../internal/context/button-context';
 import { useSingleTabStopNavigation } from '../internal/context/single-tab-stop-navigation-context';
 import { fireCancelableEvent, isPlainLeftClick } from '../internal/events';
+import customCssProps from '../internal/generated/custom-css-properties';
 import useForwardFocus from '../internal/hooks/forward-focus';
 import useHiddenDescription from '../internal/hooks/use-hidden-description';
 import { useModalContextLoadingButtonComponent } from '../internal/hooks/use-modal-component-analytics';
@@ -25,7 +26,8 @@ import analyticsSelectors from './analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
 import testUtilStyles from './test-classes/styles.css.js';
 export const InternalButton = React.forwardRef((_a, ref) => {
-    var { children, iconName, __iconClass, onClick, onFollow, iconAlign = 'left', iconUrl, iconSvg, iconAlt, variant = 'normal', loading = false, loadingText, disabled = false, disabledReason, wrapText = true, href, external, target: targetOverride, rel, download, formAction = 'submit', ariaLabel, ariaDescribedby, ariaExpanded, ariaControls, fullWidth, badge, i18nStrings, __nativeAttributes, __internalRootRef = null, __focusable = false, __injectAnalyticsComponentMetadata = false, __title, __emitPerformanceMarks = true, analyticsAction = 'click' } = _a, props = __rest(_a, ["children", "iconName", "__iconClass", "onClick", "onFollow", "iconAlign", "iconUrl", "iconSvg", "iconAlt", "variant", "loading", "loadingText", "disabled", "disabledReason", "wrapText", "href", "external", "target", "rel", "download", "formAction", "ariaLabel", "ariaDescribedby", "ariaExpanded", "ariaControls", "fullWidth", "badge", "i18nStrings", "__nativeAttributes", "__internalRootRef", "__focusable", "__injectAnalyticsComponentMetadata", "__title", "__emitPerformanceMarks", "analyticsAction"]);
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
+    var { children, iconName, __iconClass, onClick, onFollow, iconAlign = 'left', iconUrl, iconSvg, iconAlt, variant = 'normal', loading = false, loadingText, disabled = false, disabledReason, wrapText = true, href, external, target: targetOverride, rel, download, formAction = 'submit', ariaLabel, ariaDescribedby, ariaExpanded, ariaControls, fullWidth, badge, i18nStrings, style, __nativeAttributes, __internalRootRef = null, __focusable = false, __injectAnalyticsComponentMetadata = false, __title, __emitPerformanceMarks = true, analyticsAction = 'click' } = _a, props = __rest(_a, ["children", "iconName", "__iconClass", "onClick", "onFollow", "iconAlign", "iconUrl", "iconSvg", "iconAlt", "variant", "loading", "loadingText", "disabled", "disabledReason", "wrapText", "href", "external", "target", "rel", "download", "formAction", "ariaLabel", "ariaDescribedby", "ariaExpanded", "ariaControls", "fullWidth", "badge", "i18nStrings", "style", "__nativeAttributes", "__internalRootRef", "__focusable", "__injectAnalyticsComponentMetadata", "__title", "__emitPerformanceMarks", "analyticsAction"]);
     const [showTooltip, setShowTooltip] = useState(false);
     checkSafeUrl('Button', href);
     const isAnchor = Boolean(href);
@@ -146,6 +148,28 @@ export const InternalButton = React.forwardRef((_a, ref) => {
     const disabledReasonContent = (React.createElement(React.Fragment, null,
         descriptionEl,
         showTooltip && (React.createElement(Tooltip, { className: testUtilStyles['disabled-reason-tooltip'], trackRef: buttonRef, value: disabledReason, onDismiss: () => setShowTooltip(false) }))));
+    const stylePropertiesAndVariables = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ borderRadius: (_b = style === null || style === void 0 ? void 0 : style.root) === null || _b === void 0 ? void 0 : _b.borderRadius, borderWidth: (_c = style === null || style === void 0 ? void 0 : style.root) === null || _c === void 0 ? void 0 : _c.borderWidth, paddingBlock: (_d = style === null || style === void 0 ? void 0 : style.root) === null || _d === void 0 ? void 0 : _d.paddingBlock, paddingInline: (_e = style === null || style === void 0 ? void 0 : style.root) === null || _e === void 0 ? void 0 : _e.paddingInline }, (((_f = style === null || style === void 0 ? void 0 : style.root) === null || _f === void 0 ? void 0 : _f.background) && {
+        [customCssProps.styleBackgroundActive]: (_g = style.root.background) === null || _g === void 0 ? void 0 : _g.active,
+        [customCssProps.styleBackgroundDefault]: (_h = style.root.background) === null || _h === void 0 ? void 0 : _h.default,
+        [customCssProps.styleBackgroundDisabled]: (_j = style.root.background) === null || _j === void 0 ? void 0 : _j.disabled,
+        [customCssProps.styleBackgroundHover]: (_k = style.root.background) === null || _k === void 0 ? void 0 : _k.hover,
+    })), (((_l = style === null || style === void 0 ? void 0 : style.root) === null || _l === void 0 ? void 0 : _l.borderColor) && {
+        [customCssProps.styleBorderColorActive]: (_m = style.root.borderColor) === null || _m === void 0 ? void 0 : _m.active,
+        [customCssProps.styleBorderColorDefault]: (_o = style.root.borderColor) === null || _o === void 0 ? void 0 : _o.default,
+        [customCssProps.styleBorderColorDisabled]: (_p = style.root.borderColor) === null || _p === void 0 ? void 0 : _p.disabled,
+        [customCssProps.styleBorderColorHover]: (_q = style.root.borderColor) === null || _q === void 0 ? void 0 : _q.hover,
+    })), (((_r = style === null || style === void 0 ? void 0 : style.root) === null || _r === void 0 ? void 0 : _r.color) && {
+        [customCssProps.styleColorActive]: (_s = style.root.color) === null || _s === void 0 ? void 0 : _s.active,
+        [customCssProps.styleColorDefault]: (_t = style.root.color) === null || _t === void 0 ? void 0 : _t.default,
+        [customCssProps.styleColorDisabled]: (_u = style.root.color) === null || _u === void 0 ? void 0 : _u.disabled,
+        [customCssProps.styleColorHover]: (_v = style.root.color) === null || _v === void 0 ? void 0 : _v.hover,
+    })), (((_w = style === null || style === void 0 ? void 0 : style.root) === null || _w === void 0 ? void 0 : _w.focusRing) && {
+        [customCssProps.styleFocusRingBorderColor]: (_x = style.root.focusRing) === null || _x === void 0 ? void 0 : _x.borderColor,
+        [customCssProps.styleFocusRingBorderRadius]: (_y = style.root.focusRing) === null || _y === void 0 ? void 0 : _y.borderRadius,
+        [customCssProps.styleFocusRingBorderWidth]: (_z = style.root.focusRing) === null || _z === void 0 ? void 0 : _z.borderWidth,
+    })), (((_1 = (_0 = style === null || style === void 0 ? void 0 : style.root) === null || _0 === void 0 ? void 0 : _0.focusRing) === null || _1 === void 0 ? void 0 : _1.borderRadius) && {
+        [customCssProps.styleFocusRingBorderRadius]: style.root.focusRing.borderRadius,
+    }));
     if (isAnchor) {
         return (
         // https://github.com/yannickcr/eslint-plugin-react/issues/2962
@@ -153,13 +177,13 @@ export const InternalButton = React.forwardRef((_a, ref) => {
         React.createElement(React.Fragment, null,
             React.createElement("a", Object.assign({}, buttonProps, { href: href, target: target, 
                 // security recommendation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target
-                rel: rel !== null && rel !== void 0 ? rel : (target === '_blank' ? 'noopener noreferrer' : undefined), "aria-disabled": isNotInteractive ? true : undefined, download: download }, disabledReasonProps),
+                rel: rel !== null && rel !== void 0 ? rel : (target === '_blank' ? 'noopener noreferrer' : undefined), "aria-disabled": isNotInteractive ? true : undefined, download: download }, disabledReasonProps, { style: stylePropertiesAndVariables }),
                 buttonContent,
                 isDisabledWithReason && disabledReasonContent),
             loading && loadingText && (React.createElement(InternalLiveRegion, { tagName: "span", hidden: true }, loadingText))));
     }
     return (React.createElement(React.Fragment, null,
-        React.createElement("button", Object.assign({}, buttonProps, { type: formAction === 'none' ? 'button' : 'submit', disabled: disabled && !__focusable && !isDisabledWithReason, "aria-disabled": hasAriaDisabled ? true : undefined }, disabledReasonProps),
+        React.createElement("button", Object.assign({}, buttonProps, { type: formAction === 'none' ? 'button' : 'submit', disabled: disabled && !__focusable && !isDisabledWithReason, "aria-disabled": hasAriaDisabled ? true : undefined }, disabledReasonProps, { style: stylePropertiesAndVariables }),
             buttonContent,
             isDisabledWithReason && disabledReasonContent),
         loading && loadingText && (React.createElement(InternalLiveRegion, { tagName: "span", hidden: true }, loadingText))));