@cloudscape-design/components 3.0.1071 → 3.0.1072

package/button/styles.selectors.js

@@ -2,27 +2,27 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "content": "awsui_content_vjswe_18qm7_153",
-  "button": "awsui_button_vjswe_18qm7_157",
-  "variant-normal": "awsui_variant-normal_vjswe_18qm7_206",
-  "disabled": "awsui_disabled_vjswe_18qm7_224",
-  "variant-primary": "awsui_variant-primary_vjswe_18qm7_231",
-  "variant-link": "awsui_variant-link_vjswe_18qm7_256",
-  "variant-icon": "awsui_variant-icon_vjswe_18qm7_281",
-  "variant-inline-icon": "awsui_variant-inline-icon_vjswe_18qm7_306",
-  "variant-inline-icon-pointer-target": "awsui_variant-inline-icon-pointer-target_vjswe_18qm7_331",
-  "variant-inline-link": "awsui_variant-inline-link_vjswe_18qm7_356",
-  "variant-modal-dismiss": "awsui_variant-modal-dismiss_vjswe_18qm7_385",
-  "variant-flashbar-icon": "awsui_variant-flashbar-icon_vjswe_18qm7_410",
-  "variant-breadcrumb-group": "awsui_variant-breadcrumb-group_vjswe_18qm7_435",
-  "variant-menu-trigger": "awsui_variant-menu-trigger_vjswe_18qm7_465",
-  "button-no-text": "awsui_button-no-text_vjswe_18qm7_557",
-  "button-no-wrap": "awsui_button-no-wrap_vjswe_18qm7_561",
-  "full-width": "awsui_full-width_vjswe_18qm7_564",
-  "icon-left": "awsui_icon-left_vjswe_18qm7_586",
-  "icon-right": "awsui_icon-right_vjswe_18qm7_591",
-  "icon": "awsui_icon_vjswe_18qm7_586",
-  "link": "awsui_link_vjswe_18qm7_610",
-  "disabled-with-reason": "awsui_disabled-with-reason_vjswe_18qm7_610"
+  "content": "awsui_content_vjswe_fqla2_153",
+  "button": "awsui_button_vjswe_fqla2_157",
+  "variant-normal": "awsui_variant-normal_vjswe_fqla2_206",
+  "disabled": "awsui_disabled_vjswe_fqla2_224",
+  "variant-primary": "awsui_variant-primary_vjswe_fqla2_231",
+  "variant-link": "awsui_variant-link_vjswe_fqla2_256",
+  "variant-icon": "awsui_variant-icon_vjswe_fqla2_281",
+  "variant-inline-icon": "awsui_variant-inline-icon_vjswe_fqla2_306",
+  "variant-inline-icon-pointer-target": "awsui_variant-inline-icon-pointer-target_vjswe_fqla2_331",
+  "variant-inline-link": "awsui_variant-inline-link_vjswe_fqla2_356",
+  "variant-modal-dismiss": "awsui_variant-modal-dismiss_vjswe_fqla2_385",
+  "variant-flashbar-icon": "awsui_variant-flashbar-icon_vjswe_fqla2_410",
+  "variant-breadcrumb-group": "awsui_variant-breadcrumb-group_vjswe_fqla2_435",
+  "variant-menu-trigger": "awsui_variant-menu-trigger_vjswe_fqla2_465",
+  "button-no-text": "awsui_button-no-text_vjswe_fqla2_557",
+  "button-no-wrap": "awsui_button-no-wrap_vjswe_fqla2_561",
+  "full-width": "awsui_full-width_vjswe_fqla2_564",
+  "icon-left": "awsui_icon-left_vjswe_fqla2_586",
+  "icon-right": "awsui_icon-right_vjswe_fqla2_591",
+  "icon": "awsui_icon_vjswe_fqla2_586",
+  "link": "awsui_link_vjswe_fqla2_610",
+  "disabled-with-reason": "awsui_disabled-with-reason_vjswe_fqla2_610"
 };
   

package/button-dropdown/item-element/styles.css.js

@@ -1,21 +1,21 @@
 
     import './styles.scoped.css';
     export default {
-  "item-element": "awsui_item-element_93a1u_1j433_145",
-  "disabled": "awsui_disabled_93a1u_1j433_157",
-  "show-divider": "awsui_show-divider_93a1u_1j433_164",
-  "highlighted": "awsui_highlighted_93a1u_1j433_167",
-  "is-focused": "awsui_is-focused_93a1u_1j433_182",
-  "visual-refresh": "awsui_visual-refresh_93a1u_1j433_185",
-  "menu-item": "awsui_menu-item_93a1u_1j433_189",
-  "link-style": "awsui_link-style_93a1u_1j433_201",
-  "current-breadcrumb": "awsui_current-breadcrumb_93a1u_1j433_237",
-  "link-style-highlighted": "awsui_link-style-highlighted_93a1u_1j433_245",
-  "has-category-header": "awsui_has-category-header_93a1u_1j433_251",
-  "item-tooltip-wrapper": "awsui_item-tooltip-wrapper_93a1u_1j433_251",
-  "has-checkmark": "awsui_has-checkmark_93a1u_1j433_251",
-  "icon": "awsui_icon_93a1u_1j433_255",
-  "checkmark": "awsui_checkmark_93a1u_1j433_259",
-  "external-icon": "awsui_external-icon_93a1u_1j433_266"
+  "item-element": "awsui_item-element_93a1u_j1gnt_145",
+  "disabled": "awsui_disabled_93a1u_j1gnt_157",
+  "show-divider": "awsui_show-divider_93a1u_j1gnt_164",
+  "highlighted": "awsui_highlighted_93a1u_j1gnt_167",
+  "is-focused": "awsui_is-focused_93a1u_j1gnt_182",
+  "visual-refresh": "awsui_visual-refresh_93a1u_j1gnt_185",
+  "menu-item": "awsui_menu-item_93a1u_j1gnt_189",
+  "link-style": "awsui_link-style_93a1u_j1gnt_201",
+  "current-breadcrumb": "awsui_current-breadcrumb_93a1u_j1gnt_237",
+  "link-style-highlighted": "awsui_link-style-highlighted_93a1u_j1gnt_245",
+  "has-category-header": "awsui_has-category-header_93a1u_j1gnt_251",
+  "item-tooltip-wrapper": "awsui_item-tooltip-wrapper_93a1u_j1gnt_251",
+  "has-checkmark": "awsui_has-checkmark_93a1u_j1gnt_251",
+  "icon": "awsui_icon_93a1u_j1gnt_255",
+  "checkmark": "awsui_checkmark_93a1u_j1gnt_259",
+  "external-icon": "awsui_external-icon_93a1u_j1gnt_266"
 };
   

package/button-dropdown/item-element/styles.scoped.css

@@ -142,7 +142,7 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_item-element_93a1u_1j433_145:not(#\9) {
+.awsui_item-element_93a1u_j1gnt_145:not(#\9) {
   position: relative;
   z-index: 1;
   border-block: var(--border-item-width-miijiw, 2px) solid transparent;
@@ -154,17 +154,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block-start: calc(-1 * var(--border-width-dropdown-youcay, 2px));
   cursor: pointer;
 }
-.awsui_item-element_93a1u_1j433_145.awsui_disabled_93a1u_1j433_157:not(#\9) {
+.awsui_item-element_93a1u_j1gnt_145.awsui_disabled_93a1u_j1gnt_157:not(#\9) {
   cursor: default;
   color: var(--color-text-dropdown-item-disabled-8m65hf, #b4b4bb);
 }
-.awsui_item-element_93a1u_1j433_145:not(#\9):first-child {
+.awsui_item-element_93a1u_j1gnt_145:not(#\9):first-child {
   margin-block-start: 0;
 }
-.awsui_item-element_93a1u_1j433_145.awsui_show-divider_93a1u_1j433_164:not(#\9) {
+.awsui_item-element_93a1u_j1gnt_145.awsui_show-divider_93a1u_j1gnt_164:not(#\9) {
   border-block-end: var(--border-item-width-miijiw, 2px) solid var(--color-border-dropdown-group-ylcnh8, #c6c6cd);
 }
-.awsui_item-element_93a1u_1j433_145.awsui_highlighted_93a1u_1j433_167:not(#\9) {
+.awsui_item-element_93a1u_j1gnt_145.awsui_highlighted_93a1u_j1gnt_167:not(#\9) {
   color: var(--color-text-dropdown-item-highlighted-yr1px8, #0f141a);
   z-index: 2;
   background-color: var(--color-background-dropdown-item-hover-yunepc, #f3f3f7);
@@ -174,19 +174,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-start-radius: var(--border-radius-item-iwaia5, 8px);
   border-end-end-radius: var(--border-radius-item-iwaia5, 8px);
 }
-.awsui_item-element_93a1u_1j433_145.awsui_highlighted_93a1u_1j433_167.awsui_disabled_93a1u_1j433_157:not(#\9) {
+.awsui_item-element_93a1u_j1gnt_145.awsui_highlighted_93a1u_j1gnt_167.awsui_disabled_93a1u_j1gnt_157:not(#\9) {
   color: var(--color-text-dropdown-item-dimmed-tq8vh3, #b4b4bb);
   border-color: var(--color-border-dropdown-item-dimmed-hover-ga9sch, #8c8c94);
   background-color: var(--color-background-dropdown-item-dimmed-dhho03, transparent);
 }
-.awsui_item-element_93a1u_1j433_145.awsui_highlighted_93a1u_1j433_167.awsui_is-focused_93a1u_1j433_182:not(#\9) {
+.awsui_item-element_93a1u_j1gnt_145.awsui_highlighted_93a1u_j1gnt_167.awsui_is-focused_93a1u_j1gnt_182:not(#\9) {
   border-color: var(--color-border-dropdown-item-focused-zacqlp, #424650);
 }
-.awsui_item-element_93a1u_1j433_145.awsui_highlighted_93a1u_1j433_167.awsui_is-focused_93a1u_1j433_182:not(#\9):not(.awsui_visual-refresh_93a1u_1j433_185) {
+.awsui_item-element_93a1u_j1gnt_145.awsui_highlighted_93a1u_j1gnt_167.awsui_is-focused_93a1u_j1gnt_182:not(#\9):not(.awsui_visual-refresh_93a1u_j1gnt_185) {
   box-shadow: inset 0 0 0 var(--border-control-focus-ring-shadow-spread-9mjajk, 1px) var(--color-border-item-focused-uk47pl, #006ce0);
 }
 
-.awsui_menu-item_93a1u_1j433_189:not(#\9) {
+.awsui_menu-item_93a1u_j1gnt_189:not(#\9) {
   min-inline-size: 0;
   word-break: break-word;
   display: flex;
@@ -198,11 +198,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   /* stylelint-disable selector-max-type */
   /* stylelint-enable selector-max-type */
 }
-.awsui_menu-item_93a1u_1j433_189.awsui_link-style_93a1u_1j433_201:not(#\9) {
+.awsui_menu-item_93a1u_j1gnt_189.awsui_link-style_93a1u_j1gnt_201:not(#\9) {
   padding-block-end: calc(var(--space-xxs-hwfkai, 4px) + var(--space-xxxs-pajhad, 2px));
   text-underline-offset: 0.25em;
   text-decoration-thickness: 1px;
-  color: var(--awsui-style-color-default-mdigke, var(--color-text-link-default-1dmm7z, #006ce0));
+  color: var(--awsui-style-color-default-kiajpc, var(--color-text-link-default-1dmm7z, #006ce0));
   font-weight: inherit;
   letter-spacing: normal;
   text-decoration-line: underline;
@@ -213,30 +213,30 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transition-duration: var(--motion-duration-refresh-only-medium-5rbn3k, 165ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_menu-item_93a1u_1j433_189.awsui_link-style_93a1u_1j433_201:not(#\9) {
+  .awsui_menu-item_93a1u_j1gnt_189.awsui_link-style_93a1u_j1gnt_201:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_menu-item_93a1u_1j433_189.awsui_link-style_93a1u_1j433_201:not(#\9), .awsui-mode-entering .awsui_menu-item_93a1u_1j433_189.awsui_link-style_93a1u_1j433_201:not(#\9) {
+.awsui-motion-disabled .awsui_menu-item_93a1u_j1gnt_189.awsui_link-style_93a1u_j1gnt_201:not(#\9), .awsui-mode-entering .awsui_menu-item_93a1u_j1gnt_189.awsui_link-style_93a1u_j1gnt_201:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_menu-item_93a1u_1j433_189.awsui_link-style_93a1u_1j433_201:not(#\9):hover {
+.awsui_menu-item_93a1u_j1gnt_189.awsui_link-style_93a1u_j1gnt_201:not(#\9):hover {
   cursor: pointer;
-  color: var(--awsui-style-color-hover-mdigke, var(--color-text-link-hover-sq1gxg, #002b66));
+  color: var(--awsui-style-color-hover-kiajpc, var(--color-text-link-hover-sq1gxg, #002b66));
 }
-.awsui_menu-item_93a1u_1j433_189.awsui_link-style_93a1u_1j433_201:not(#\9):focus {
+.awsui_menu-item_93a1u_j1gnt_189.awsui_link-style_93a1u_j1gnt_201:not(#\9):focus {
   outline: none;
 }
-.awsui_menu-item_93a1u_1j433_189.awsui_link-style_93a1u_1j433_201:not(#\9):active {
-  color: var(--awsui-style-color-active-mdigke, var(--color-text-link-hover-sq1gxg, #002b66));
+.awsui_menu-item_93a1u_j1gnt_189.awsui_link-style_93a1u_j1gnt_201:not(#\9):active {
+  color: var(--awsui-style-color-active-kiajpc, var(--color-text-link-hover-sq1gxg, #002b66));
 }
-.awsui_menu-item_93a1u_1j433_189.awsui_link-style_93a1u_1j433_201:not(#\9):active, .awsui_menu-item_93a1u_1j433_189.awsui_link-style_93a1u_1j433_201:not(#\9):focus, .awsui_menu-item_93a1u_1j433_189.awsui_link-style_93a1u_1j433_201:not(#\9):hover {
+.awsui_menu-item_93a1u_j1gnt_189.awsui_link-style_93a1u_j1gnt_201:not(#\9):active, .awsui_menu-item_93a1u_j1gnt_189.awsui_link-style_93a1u_j1gnt_201:not(#\9):focus, .awsui_menu-item_93a1u_j1gnt_189.awsui_link-style_93a1u_j1gnt_201:not(#\9):hover {
   text-decoration-line: underline;
   text-decoration-color: currentColor;
 }
-.awsui_menu-item_93a1u_1j433_189.awsui_link-style_93a1u_1j433_201.awsui_current-breadcrumb_93a1u_1j433_237:not(#\9) {
+.awsui_menu-item_93a1u_j1gnt_189.awsui_link-style_93a1u_j1gnt_201.awsui_current-breadcrumb_93a1u_j1gnt_237:not(#\9) {
   font-weight: var(--font-weight-button-0eg20c, 700);
   -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
@@ -244,27 +244,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   font-weight: 700;
   text-decoration: none;
 }
-.awsui_menu-item_93a1u_1j433_189.awsui_link-style_93a1u_1j433_201.awsui_link-style-highlighted_93a1u_1j433_245:not(#\9) {
+.awsui_menu-item_93a1u_j1gnt_189.awsui_link-style_93a1u_j1gnt_201.awsui_link-style-highlighted_93a1u_j1gnt_245:not(#\9) {
   color: var(--color-text-link-hover-sq1gxg, #002b66);
 }
-.awsui_menu-item_93a1u_1j433_189:not(#\9):focus {
+.awsui_menu-item_93a1u_j1gnt_189:not(#\9):focus {
   outline: none;
 }
-.awsui_has-category-header_93a1u_1j433_251 > .awsui_menu-item_93a1u_1j433_189:not(#\9), .awsui_has-category-header_93a1u_1j433_251 > .awsui_item-tooltip-wrapper_93a1u_1j433_251 > .awsui_menu-item_93a1u_1j433_189:not(#\9), .awsui_has-category-header_93a1u_1j433_251:not(#\9):not(.awsui_has-checkmark_93a1u_1j433_251) > span > .awsui_menu-item_93a1u_1j433_189 {
+.awsui_has-category-header_93a1u_j1gnt_251 > .awsui_menu-item_93a1u_j1gnt_189:not(#\9), .awsui_has-category-header_93a1u_j1gnt_251 > .awsui_item-tooltip-wrapper_93a1u_j1gnt_251 > .awsui_menu-item_93a1u_j1gnt_189:not(#\9), .awsui_has-category-header_93a1u_j1gnt_251:not(#\9):not(.awsui_has-checkmark_93a1u_j1gnt_251) > span > .awsui_menu-item_93a1u_j1gnt_189 {
   padding-inline-start: calc(var(--space-xs-ymlm0b, 8px) + var(--space-l-2ud1p3, 20px));
 }
 
-.awsui_icon_93a1u_1j433_255:not(#\9) {
+.awsui_icon_93a1u_j1gnt_255:not(#\9) {
   padding-inline-end: var(--space-xxs-hwfkai, 4px);
   flex-shrink: 0;
 }
-.awsui_icon_93a1u_1j433_255.awsui_checkmark_93a1u_1j433_259:not(#\9) {
+.awsui_icon_93a1u_j1gnt_255.awsui_checkmark_93a1u_j1gnt_259:not(#\9) {
   color: var(--color-text-status-info-ue8bd2, #006ce0);
 }
-.awsui_icon_93a1u_1j433_255.awsui_disabled_93a1u_1j433_157:not(#\9) {
+.awsui_icon_93a1u_j1gnt_255.awsui_disabled_93a1u_j1gnt_157:not(#\9) {
   color: var(--color-text-interactive-disabled-1bqmrl, #b4b4bb);
 }
 
-.awsui_external-icon_93a1u_1j433_266:not(#\9) {
+.awsui_external-icon_93a1u_j1gnt_266:not(#\9) {
   margin-inline-start: var(--space-xxs-hwfkai, 4px);
 }

package/button-dropdown/item-element/styles.selectors.js

@@ -2,21 +2,21 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "item-element": "awsui_item-element_93a1u_1j433_145",
-  "disabled": "awsui_disabled_93a1u_1j433_157",
-  "show-divider": "awsui_show-divider_93a1u_1j433_164",
-  "highlighted": "awsui_highlighted_93a1u_1j433_167",
-  "is-focused": "awsui_is-focused_93a1u_1j433_182",
-  "visual-refresh": "awsui_visual-refresh_93a1u_1j433_185",
-  "menu-item": "awsui_menu-item_93a1u_1j433_189",
-  "link-style": "awsui_link-style_93a1u_1j433_201",
-  "current-breadcrumb": "awsui_current-breadcrumb_93a1u_1j433_237",
-  "link-style-highlighted": "awsui_link-style-highlighted_93a1u_1j433_245",
-  "has-category-header": "awsui_has-category-header_93a1u_1j433_251",
-  "item-tooltip-wrapper": "awsui_item-tooltip-wrapper_93a1u_1j433_251",
-  "has-checkmark": "awsui_has-checkmark_93a1u_1j433_251",
-  "icon": "awsui_icon_93a1u_1j433_255",
-  "checkmark": "awsui_checkmark_93a1u_1j433_259",
-  "external-icon": "awsui_external-icon_93a1u_1j433_266"
+  "item-element": "awsui_item-element_93a1u_j1gnt_145",
+  "disabled": "awsui_disabled_93a1u_j1gnt_157",
+  "show-divider": "awsui_show-divider_93a1u_j1gnt_164",
+  "highlighted": "awsui_highlighted_93a1u_j1gnt_167",
+  "is-focused": "awsui_is-focused_93a1u_j1gnt_182",
+  "visual-refresh": "awsui_visual-refresh_93a1u_j1gnt_185",
+  "menu-item": "awsui_menu-item_93a1u_j1gnt_189",
+  "link-style": "awsui_link-style_93a1u_j1gnt_201",
+  "current-breadcrumb": "awsui_current-breadcrumb_93a1u_j1gnt_237",
+  "link-style-highlighted": "awsui_link-style-highlighted_93a1u_j1gnt_245",
+  "has-category-header": "awsui_has-category-header_93a1u_j1gnt_251",
+  "item-tooltip-wrapper": "awsui_item-tooltip-wrapper_93a1u_j1gnt_251",
+  "has-checkmark": "awsui_has-checkmark_93a1u_j1gnt_251",
+  "icon": "awsui_icon_93a1u_j1gnt_255",
+  "checkmark": "awsui_checkmark_93a1u_j1gnt_259",
+  "external-icon": "awsui_external-icon_93a1u_j1gnt_266"
 };
   

package/button-group/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/button-group/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAE5B,QAAA,MAAM,WAAW,+FAqChB,CAAC;AAoBF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/button-group/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAE5B,QAAA,MAAM,WAAW,+FAyChB,CAAC;AAoBF,eAAe,WAAW,CAAC"}

package/button-group/index.js

@@ -1,51 +1,18 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-'use client';
-import { __rest } from "tslib";
 import React from 'react';
-import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
-import { getBaseProps } from '../internal/base-component';
-import useBaseComponent from '../internal/hooks/use-base-component';
+
+import CoreComponent from './internal-do-not-use-core';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
-import { getExternalProps } from '../internal/utils/external-props';
-import InternalButtonGroup from './internal';
-const ButtonGroup = React.forwardRef((_a, ref) => {
-    var { variant, dropdownExpandToViewport = false } = _a, rest = __rest(_a, ["variant", "dropdownExpandToViewport"]);
-    const baseProps = getBaseProps(rest);
-    const itemCounts = getItemCounts(rest.items);
-    const baseComponentProps = useBaseComponent('ButtonGroup', {
-        props: {
-            variant,
-            dropdownExpandToViewport,
-        },
-        metadata: {
-            iconButtonsCount: itemCounts['icon-button'],
-            iconToggleButtonsCount: itemCounts['icon-toggle-button'],
-            iconFileInputsCount: itemCounts['icon-file-input'],
-            menuDropdownsCount: itemCounts['menu-dropdown'],
-            groupsCount: itemCounts.group,
-        },
-    });
-    const externalProps = getExternalProps(rest);
-    const componentMetadata = {
-        name: 'awsui.ButtonGroup',
-        label: { root: 'self' },
-    };
-    return (React.createElement(InternalButtonGroup, Object.assign({}, baseProps, baseComponentProps, externalProps, { ref: ref, variant: variant, dropdownExpandToViewport: dropdownExpandToViewport }, getAnalyticsMetadataAttribute({ component: componentMetadata }))));
+import { validateProps } from '@cloudscape-design/component-toolkit/internal';
+
+
+
+const ButtonGroup = React.forwardRef((props, ref) => {
+    validateProps('ButtonGroup', props, ["style"], {}, 'console');
+    return React.createElement(CoreComponent, {ref,...props});
 });
-function getItemCounts(allItems = []) {
-    const counters = { 'icon-button': 0, 'icon-toggle-button': 0, 'icon-file-input': 0, 'menu-dropdown': 0, group: 0 };
-    function count(items) {
-        for (const item of items) {
-            counters[item.type] += 1;
-            if (item.type === 'group') {
-                count(item.items);
-            }
-        }
-    }
-    count(allItems);
-    return counters;
-}
+
+
 applyDisplayName(ButtonGroup, 'ButtonGroup');
 export default ButtonGroup;
-//# sourceMappingURL=index.js.map

package/button-group/interfaces.d.ts

@@ -96,8 +96,13 @@ export interface ButtonGroupProps extends BaseComponentProps {
    * Called when the user uploads files. The event detail object contains the id and files from the file input item.
    */
   onFilesChange?: NonCancelableEventHandler<ButtonGroupProps.FilesChangeDetails>;
+  /**
+   * @awsuiSystem core
+   */
+}
+export interface InternalButtonGroupProps extends SomeRequired<ButtonGroupProps, 'dropdownExpandToViewport'>, InternalBaseComponentProps {
+  style?: ButtonGroupProps.Style;
 }
-export interface InternalButtonGroupProps extends SomeRequired<ButtonGroupProps, 'dropdownExpandToViewport'>, InternalBaseComponentProps {}
 export declare namespace ButtonGroupProps {
   type Variant = 'icon';
   type ItemOrGroup = Item | Group;
@@ -171,4 +176,39 @@ export declare namespace ButtonGroupProps {
      */
     focus(itemId: string): void;
   }
+  interface Style {
+    root?: {
+      background?: string;
+      borderColor?: string;
+      borderRadius?: string;
+      borderWidth?: string;
+      paddingBlock?: string;
+      paddingInline?: string;
+      boxShadow?: string;
+      focusRing?: {
+        borderColor?: string;
+        borderRadius?: string;
+        borderWidth?: string;
+      };
+    };
+    item?: {
+      color?: {
+        active?: string;
+        default?: string;
+        disabled?: string;
+        hover?: string;
+      };
+      boxShadow?: {
+        active?: string;
+        default?: string;
+        disabled?: string;
+        hover?: string;
+      };
+      focusRing?: {
+        borderColor?: string;
+        borderRadius?: string;
+        borderWidth?: string;
+      };
+    };
+  }
 }

package/button-group/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/button-group/interfaces.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/button-group/interfaces.ts"],"names":[],"mappings":"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"}

package/button-group/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/button-group/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { ButtonDropdownProps } from '../button-dropdown/interfaces';\nimport { IconProps } from '../icon/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { SomeRequired } from '../internal/types';\n\nexport interface ButtonGroupProps extends BaseComponentProps {\n  /**\n   * Adds `aria-label` to the button group toolbar element.\n   * Use this to provide a unique accessible name for each button group on the page.\n   */\n  ariaLabel?: string;\n  /**\n   * Determines the general styling of the button dropdown.\n   * * `icon` for icon buttons.\n   */\n  variant: ButtonGroupProps.Variant;\n  /**\n   * Use this property to determine dropdown placement strategy for all menu dropdown items.\n   *\n   * By default, the dropdown height is constrained to fit inside the height of its next scrollable container element.\n   * Enabling this property will allow the dropdown to extend beyond that container by using fixed positioning and\n   * [React Portals](https://reactjs.org/docs/portals.html).\n   *\n   * Set this property if the dropdown would otherwise be constrained by a scrollable container,\n   * for example inside table and split view layouts.\n   *\n   * We recommend you use discretion, and don't enable this property unless necessary\n   * because fixed positioning results in a slight, visible lag when scrolling complex pages.\n   */\n  dropdownExpandToViewport?: boolean;\n  /**\n   * Array of objects with a number of supported types.\n   *\n   * ### icon-button\n   *\n   * * `id` (string) - The unique identifier of the button, used as detail in `onItemClick` handler and to focus the button using `ref.focus(id)`.\n   * * `text` (string) - The name shown as a tooltip for this button.\n   * * `disabled` (optional, boolean) - The disabled state indication for this button.\n   * * `disabledReason` (optional, boolean) - Provides a reason why the button is disabled (only when `disabled` is `true`). If provided, the button becomes focusable.\n   * * `loading` (optional, boolean) - The loading state indication for this button.\n   * * `loadingText` (optional, string) - The loading text announced to screen readers.\n   * * `iconName` (optional, string) - Specifies the name of the icon, used with the [icon component](/components/icon/).\n   * * `iconAlt` (optional, string) - Specifies alternate text for the icon when using `iconUrl`.\n   * * `iconUrl` (optional, string) - Specifies the URL of a custom icon.\n   * * `iconSvg` (optional, ReactNode) - Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   * * `popoverFeedback` (optional, ReactNode) - Text that appears when the user clicks the button. Use to provide feedback to the user.\n   *\n   * ### icon-toggle-button\n   *\n   * * `id` (string) - The unique identifier of the button, used as detail in `onItemClick` handler and to focus the button using `ref.focus(id)`.\n   * * `pressed` (boolean) - The toggle button pressed state.\n   * * `text` (string) - The name shown as a tooltip for this button.\n   * * `disabled` (optional, boolean) - The disabled state indication for this button.\n   * * `disabledReason` (optional, boolean) - Provides a reason why the button is disabled (only when `disabled` is `true`). If provided, the button becomes focusable.\n   * * `loading` (optional, boolean) - The loading state indication for this button.\n   * * `loadingText` (optional, string) - The loading text announced to screen readers.\n   * * `iconName` (optional, string) - Specifies the name of the icon, used with the [icon component](/components/icon/).\n   * * `iconUrl` (optional, string) - Specifies the URL of a custom icon.\n   * * `iconSvg` (optional, ReactNode) - Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   * * `pressedIconName` (optional, string) - Specifies the name of the icon in pressed state, used with the [icon component](/components/icon/).\n   * * `pressedIconUrl` (optional, string) - Specifies the URL of a custom icon in pressed state.\n   * * `pressedIconSvg` (optional, ReactNode) - Custom SVG icon in pressed state. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   * * `popoverFeedback` (optional, ReactNode) - Text that appears when the user clicks the button. Use to provide feedback to the user.\n   * * `pressedPopoverFeedback` (optional, ReactNode) - Text that appears when the user clicks the button in pressed state. Defaults to `popoverFeedback`.\n   *\n   * * ### file-input\n   *\n   * * `id` (string) - The unique identifier of the button, used as detail in `onFilesChange`.\n   * * `text` (string) - The name of the menu button shown as a tooltip.\n   * * `accept` (optional, string) - Specifies the native file input `accept` attribute to describe the allow-list of file types.\n   * * `multiple` (optional, string) - Specifies the native file input `multiple` attribute to allow users entering more than one file.\n   *\n   * ### menu-dropdown\n   *\n   * * `id` (string) - The unique identifier of the button, used as detail in `onItemClick`.\n   * * `text` (string) - The name of the menu button shown as a tooltip.\n   * * `disabled` (optional, boolean) - The disabled state indication for the menu button.\n   * * `disabledReason` (optional, boolean) - Provides a reason why the button is disabled (only when `disabled` is `true`). If provided, the button becomes focusable.\n   * * `loading` (optional, boolean) - The loading state indication for the menu button.\n   * * `loadingText` (optional, string) - The loading text announced to screen readers.\n   * * `items` (ButtonDropdownProps.ItemOrGroup[]) - The array of dropdown items that belong to this menu.\n   *\n   * ### group\n   *\n   * * `text` (string) - The name of the group rendered as ARIA label for this group.\n   * * `items` ((ButtonGroupProps.IconButton | ButtonGroupProps.MenuDropdown)[]) - The array of items that belong to this group.\n   */\n  items: ReadonlyArray<ButtonGroupProps.ItemOrGroup>;\n  /**\n   * Called when the user clicks on an item, and the item is not disabled. The event detail object contains the id of the clicked item.\n   */\n  onItemClick?: NonCancelableEventHandler<ButtonGroupProps.ItemClickDetails>;\n  /**\n   * Called when the user uploads files. The event detail object contains the id and files from the file input item.\n   */\n  onFilesChange?: NonCancelableEventHandler<ButtonGroupProps.FilesChangeDetails>;\n}\n\nexport interface InternalButtonGroupProps\n  extends SomeRequired<ButtonGroupProps, 'dropdownExpandToViewport'>,\n    InternalBaseComponentProps {}\n\nexport namespace ButtonGroupProps {\n  export type Variant = 'icon';\n\n  export type ItemOrGroup = Item | Group;\n  export type Item = IconButton | IconToggleButton | IconFileInput | MenuDropdown;\n\n  export interface IconButton {\n    type: 'icon-button';\n    id: string;\n    text: string;\n    disabled?: boolean;\n    disabledReason?: string;\n    loading?: boolean;\n    loadingText?: string;\n    iconName?: IconProps.Name;\n    iconAlt?: string;\n    iconUrl?: string;\n    iconSvg?: React.ReactNode;\n    popoverFeedback?: React.ReactNode;\n  }\n\n  export interface IconToggleButton {\n    type: 'icon-toggle-button';\n    id: string;\n    text: string;\n    pressed: boolean;\n    disabled?: boolean;\n    disabledReason?: string;\n    loading?: boolean;\n    loadingText?: string;\n    iconName?: IconProps.Name;\n    iconUrl?: string;\n    iconSvg?: React.ReactNode;\n    pressedIconName?: IconProps.Name;\n    pressedIconUrl?: string;\n    pressedIconSvg?: React.ReactNode;\n    popoverFeedback?: React.ReactNode;\n    pressedPopoverFeedback?: React.ReactNode;\n  }\n\n  export interface IconFileInput {\n    type: 'icon-file-input';\n    id: string;\n    text: string;\n    accept?: string;\n    multiple?: boolean;\n  }\n\n  export interface MenuDropdown {\n    type: 'menu-dropdown';\n    id: string;\n    text: string;\n    disabled?: boolean;\n    disabledReason?: string;\n    loading?: boolean;\n    loadingText?: string;\n    items: ReadonlyArray<ButtonDropdownProps.ItemOrGroup>;\n  }\n\n  export interface Group {\n    type: 'group';\n    text: string;\n    items: ReadonlyArray<ButtonGroupProps.Item>;\n  }\n\n  export interface ItemClickDetails {\n    id: string;\n    pressed?: boolean;\n    checked?: boolean;\n  }\n\n  export interface FilesChangeDetails {\n    id: string;\n    files: File[];\n  }\n\n  export interface Ref {\n    /**\n     * Focuses button group item by id.\n     */\n    focus(itemId: string): void;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/button-group/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { ButtonDropdownProps } from '../button-dropdown/interfaces';\nimport { IconProps } from '../icon/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { SomeRequired } from '../internal/types';\n\nexport interface ButtonGroupProps extends BaseComponentProps {\n  /**\n   * Adds `aria-label` to the button group toolbar element.\n   * Use this to provide a unique accessible name for each button group on the page.\n   */\n  ariaLabel?: string;\n  /**\n   * Determines the general styling of the button dropdown.\n   * * `icon` for icon buttons.\n   */\n  variant: ButtonGroupProps.Variant;\n  /**\n   * Use this property to determine dropdown placement strategy for all menu dropdown items.\n   *\n   * By default, the dropdown height is constrained to fit inside the height of its next scrollable container element.\n   * Enabling this property will allow the dropdown to extend beyond that container by using fixed positioning and\n   * [React Portals](https://reactjs.org/docs/portals.html).\n   *\n   * Set this property if the dropdown would otherwise be constrained by a scrollable container,\n   * for example inside table and split view layouts.\n   *\n   * We recommend you use discretion, and don't enable this property unless necessary\n   * because fixed positioning results in a slight, visible lag when scrolling complex pages.\n   */\n  dropdownExpandToViewport?: boolean;\n  /**\n   * Array of objects with a number of supported types.\n   *\n   * ### icon-button\n   *\n   * * `id` (string) - The unique identifier of the button, used as detail in `onItemClick` handler and to focus the button using `ref.focus(id)`.\n   * * `text` (string) - The name shown as a tooltip for this button.\n   * * `disabled` (optional, boolean) - The disabled state indication for this button.\n   * * `disabledReason` (optional, boolean) - Provides a reason why the button is disabled (only when `disabled` is `true`). If provided, the button becomes focusable.\n   * * `loading` (optional, boolean) - The loading state indication for this button.\n   * * `loadingText` (optional, string) - The loading text announced to screen readers.\n   * * `iconName` (optional, string) - Specifies the name of the icon, used with the [icon component](/components/icon/).\n   * * `iconAlt` (optional, string) - Specifies alternate text for the icon when using `iconUrl`.\n   * * `iconUrl` (optional, string) - Specifies the URL of a custom icon.\n   * * `iconSvg` (optional, ReactNode) - Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   * * `popoverFeedback` (optional, ReactNode) - Text that appears when the user clicks the button. Use to provide feedback to the user.\n   *\n   * ### icon-toggle-button\n   *\n   * * `id` (string) - The unique identifier of the button, used as detail in `onItemClick` handler and to focus the button using `ref.focus(id)`.\n   * * `pressed` (boolean) - The toggle button pressed state.\n   * * `text` (string) - The name shown as a tooltip for this button.\n   * * `disabled` (optional, boolean) - The disabled state indication for this button.\n   * * `disabledReason` (optional, boolean) - Provides a reason why the button is disabled (only when `disabled` is `true`). If provided, the button becomes focusable.\n   * * `loading` (optional, boolean) - The loading state indication for this button.\n   * * `loadingText` (optional, string) - The loading text announced to screen readers.\n   * * `iconName` (optional, string) - Specifies the name of the icon, used with the [icon component](/components/icon/).\n   * * `iconUrl` (optional, string) - Specifies the URL of a custom icon.\n   * * `iconSvg` (optional, ReactNode) - Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   * * `pressedIconName` (optional, string) - Specifies the name of the icon in pressed state, used with the [icon component](/components/icon/).\n   * * `pressedIconUrl` (optional, string) - Specifies the URL of a custom icon in pressed state.\n   * * `pressedIconSvg` (optional, ReactNode) - Custom SVG icon in pressed state. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   * * `popoverFeedback` (optional, ReactNode) - Text that appears when the user clicks the button. Use to provide feedback to the user.\n   * * `pressedPopoverFeedback` (optional, ReactNode) - Text that appears when the user clicks the button in pressed state. Defaults to `popoverFeedback`.\n   *\n   * * ### file-input\n   *\n   * * `id` (string) - The unique identifier of the button, used as detail in `onFilesChange`.\n   * * `text` (string) - The name of the menu button shown as a tooltip.\n   * * `accept` (optional, string) - Specifies the native file input `accept` attribute to describe the allow-list of file types.\n   * * `multiple` (optional, string) - Specifies the native file input `multiple` attribute to allow users entering more than one file.\n   *\n   * ### menu-dropdown\n   *\n   * * `id` (string) - The unique identifier of the button, used as detail in `onItemClick`.\n   * * `text` (string) - The name of the menu button shown as a tooltip.\n   * * `disabled` (optional, boolean) - The disabled state indication for the menu button.\n   * * `disabledReason` (optional, boolean) - Provides a reason why the button is disabled (only when `disabled` is `true`). If provided, the button becomes focusable.\n   * * `loading` (optional, boolean) - The loading state indication for the menu button.\n   * * `loadingText` (optional, string) - The loading text announced to screen readers.\n   * * `items` (ButtonDropdownProps.ItemOrGroup[]) - The array of dropdown items that belong to this menu.\n   *\n   * ### group\n   *\n   * * `text` (string) - The name of the group rendered as ARIA label for this group.\n   * * `items` ((ButtonGroupProps.IconButton | ButtonGroupProps.MenuDropdown)[]) - The array of items that belong to this group.\n   */\n  items: ReadonlyArray<ButtonGroupProps.ItemOrGroup>;\n  /**\n   * Called when the user clicks on an item, and the item is not disabled. The event detail object contains the id of the clicked item.\n   */\n  onItemClick?: NonCancelableEventHandler<ButtonGroupProps.ItemClickDetails>;\n  /**\n   * Called when the user uploads files. The event detail object contains the id and files from the file input item.\n   */\n  onFilesChange?: NonCancelableEventHandler<ButtonGroupProps.FilesChangeDetails>;\n  /**\n   * @awsuiSystem core\n   */\n  style?: ButtonGroupProps.Style;\n}\n\nexport interface InternalButtonGroupProps\n  extends SomeRequired<ButtonGroupProps, 'dropdownExpandToViewport'>,\n    InternalBaseComponentProps {\n  style?: ButtonGroupProps.Style;\n}\n\nexport namespace ButtonGroupProps {\n  export type Variant = 'icon';\n\n  export type ItemOrGroup = Item | Group;\n  export type Item = IconButton | IconToggleButton | IconFileInput | MenuDropdown;\n\n  export interface IconButton {\n    type: 'icon-button';\n    id: string;\n    text: string;\n    disabled?: boolean;\n    disabledReason?: string;\n    loading?: boolean;\n    loadingText?: string;\n    iconName?: IconProps.Name;\n    iconAlt?: string;\n    iconUrl?: string;\n    iconSvg?: React.ReactNode;\n    popoverFeedback?: React.ReactNode;\n  }\n\n  export interface IconToggleButton {\n    type: 'icon-toggle-button';\n    id: string;\n    text: string;\n    pressed: boolean;\n    disabled?: boolean;\n    disabledReason?: string;\n    loading?: boolean;\n    loadingText?: string;\n    iconName?: IconProps.Name;\n    iconUrl?: string;\n    iconSvg?: React.ReactNode;\n    pressedIconName?: IconProps.Name;\n    pressedIconUrl?: string;\n    pressedIconSvg?: React.ReactNode;\n    popoverFeedback?: React.ReactNode;\n    pressedPopoverFeedback?: React.ReactNode;\n  }\n\n  export interface IconFileInput {\n    type: 'icon-file-input';\n    id: string;\n    text: string;\n    accept?: string;\n    multiple?: boolean;\n  }\n\n  export interface MenuDropdown {\n    type: 'menu-dropdown';\n    id: string;\n    text: string;\n    disabled?: boolean;\n    disabledReason?: string;\n    loading?: boolean;\n    loadingText?: string;\n    items: ReadonlyArray<ButtonDropdownProps.ItemOrGroup>;\n  }\n\n  export interface Group {\n    type: 'group';\n    text: string;\n    items: ReadonlyArray<ButtonGroupProps.Item>;\n  }\n\n  export interface ItemClickDetails {\n    id: string;\n    pressed?: boolean;\n    checked?: boolean;\n  }\n\n  export interface FilesChangeDetails {\n    id: string;\n    files: File[];\n  }\n\n  export interface Ref {\n    /**\n     * Focuses button group item by id.\n     */\n    focus(itemId: string): void;\n  }\n  export interface Style {\n    root?: {\n      background?: string;\n      borderColor?: string;\n      borderRadius?: string;\n      borderWidth?: string;\n      paddingBlock?: string;\n      paddingInline?: string;\n      boxShadow?: string;\n      focusRing?: {\n        borderColor?: string;\n        borderRadius?: string;\n        borderWidth?: string;\n      };\n    };\n    item?: {\n      color?: {\n        active?: string;\n        default?: string;\n        disabled?: string;\n        hover?: string;\n      };\n      boxShadow?: {\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    };\n  }\n}\n"]}

package/button-group/internal-do-not-use-core.js

@@ -0,0 +1,51 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+'use client';
+import { __rest } from "tslib";
+import React from 'react';
+import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
+import { getBaseProps } from '../internal/base-component';
+import useBaseComponent from '../internal/hooks/use-base-component';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import { getExternalProps } from '../internal/utils/external-props';
+import InternalButtonGroup from './internal';
+const ButtonGroup = React.forwardRef((_a, ref) => {
+    var { variant, dropdownExpandToViewport = false, style } = _a, rest = __rest(_a, ["variant", "dropdownExpandToViewport", "style"]);
+    const baseProps = getBaseProps(rest);
+    const itemCounts = getItemCounts(rest.items);
+    const baseComponentProps = useBaseComponent('ButtonGroup', {
+        props: {
+            variant,
+            dropdownExpandToViewport,
+        },
+        metadata: {
+            iconButtonsCount: itemCounts['icon-button'],
+            iconToggleButtonsCount: itemCounts['icon-toggle-button'],
+            iconFileInputsCount: itemCounts['icon-file-input'],
+            menuDropdownsCount: itemCounts['menu-dropdown'],
+            groupsCount: itemCounts.group,
+        },
+    });
+    const externalProps = getExternalProps(rest);
+    const componentMetadata = {
+        name: 'awsui.ButtonGroup',
+        label: { root: 'self' },
+    };
+    return (React.createElement(InternalButtonGroup, Object.assign({}, baseProps, baseComponentProps, externalProps, { ref: ref, variant: variant, dropdownExpandToViewport: dropdownExpandToViewport, style: style }, getAnalyticsMetadataAttribute({ component: componentMetadata }))));
+});
+function getItemCounts(allItems = []) {
+    const counters = { 'icon-button': 0, 'icon-toggle-button': 0, 'icon-file-input': 0, 'menu-dropdown': 0, group: 0 };
+    function count(items) {
+        for (const item of items) {
+            counters[item.type] += 1;
+            if (item.type === 'group') {
+                count(item.items);
+            }
+        }
+    }
+    count(allItems);
+    return counters;
+}
+applyDisplayName(ButtonGroup, 'ButtonGroup');
+export default ButtonGroup;
+//# sourceMappingURL=internal-do-not-use-core.js.map

package/button-group/internal-do-not-use-core.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button-group/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAGpE,OAAO,mBAAmB,MAAM,YAAY,CAAC;AAI7C,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAClC,CACE,EAA+E,EAC/E,GAAoC,EACpC,EAAE;QAFF,EAAE,OAAO,EAAE,wBAAwB,GAAG,KAAK,EAAE,KAAK,OAA6B,EAAxB,IAAI,cAA3D,gDAA6D,CAAF;IAG3D,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC7C,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,aAAa,EAAE;QACzD,KAAK,EAAE;YACL,OAAO;YACP,wBAAwB;SACzB;QACD,QAAQ,EAAE;YACR,gBAAgB,EAAE,UAAU,CAAC,aAAa,CAAC;YAC3C,sBAAsB,EAAE,UAAU,CAAC,oBAAoB,CAAC;YACxD,mBAAmB,EAAE,UAAU,CAAC,iBAAiB,CAAC;YAClD,kBAAkB,EAAE,UAAU,CAAC,eAAe,CAAC;YAC/C,WAAW,EAAE,UAAU,CAAC,KAAK;SAC9B;KACF,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAE7C,MAAM,iBAAiB,GAAmD;QACxE,IAAI,EAAE,mBAAmB;QACzB,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;KACxB,CAAC;IAEF,OAAO,CACL,oBAAC,mBAAmB,oBACd,SAAS,EACT,kBAAkB,EAClB,aAAa,IACjB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,wBAAwB,EAAE,wBAAwB,EAClD,KAAK,EAAE,KAAK,IACR,6BAA6B,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC,EACnE,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,aAAa,CAAC,WAAoD,EAAE;IAC3E,MAAM,QAAQ,GAAG,EAAE,aAAa,EAAE,CAAC,EAAE,oBAAoB,EAAE,CAAC,EAAE,iBAAiB,EAAE,CAAC,EAAE,eAAe,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;IAEnH,SAAS,KAAK,CAAC,KAA8C;QAC3D,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;YACxB,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAEzB,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;gBACzB,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aACnB;SACF;IACH,CAAC;IACD,KAAK,CAAC,QAAQ,CAAC,CAAC;IAEhB,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,gBAAgB,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;AAC7C,eAAe,WAAW,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { getBaseProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { getExternalProps } from '../internal/utils/external-props';\nimport { GeneratedAnalyticsMetadataButtonGroupComponent } from './analytics-metadata/interfaces';\nimport { ButtonGroupProps } from './interfaces';\nimport InternalButtonGroup from './internal';\n\nexport { ButtonGroupProps };\n\nconst ButtonGroup = React.forwardRef(\n  (\n    { variant, dropdownExpandToViewport = false, style, ...rest }: ButtonGroupProps,\n    ref: React.Ref<ButtonGroupProps.Ref>\n  ) => {\n    const baseProps = getBaseProps(rest);\n    const itemCounts = getItemCounts(rest.items);\n    const baseComponentProps = useBaseComponent('ButtonGroup', {\n      props: {\n        variant,\n        dropdownExpandToViewport,\n      },\n      metadata: {\n        iconButtonsCount: itemCounts['icon-button'],\n        iconToggleButtonsCount: itemCounts['icon-toggle-button'],\n        iconFileInputsCount: itemCounts['icon-file-input'],\n        menuDropdownsCount: itemCounts['menu-dropdown'],\n        groupsCount: itemCounts.group,\n      },\n    });\n\n    const externalProps = getExternalProps(rest);\n\n    const componentMetadata: GeneratedAnalyticsMetadataButtonGroupComponent = {\n      name: 'awsui.ButtonGroup',\n      label: { root: 'self' },\n    };\n\n    return (\n      <InternalButtonGroup\n        {...baseProps}\n        {...baseComponentProps}\n        {...externalProps}\n        ref={ref}\n        variant={variant}\n        dropdownExpandToViewport={dropdownExpandToViewport}\n        style={style}\n        {...getAnalyticsMetadataAttribute({ component: componentMetadata })}\n      />\n    );\n  }\n);\n\nfunction getItemCounts(allItems: readonly ButtonGroupProps.ItemOrGroup[] = []) {\n  const counters = { 'icon-button': 0, 'icon-toggle-button': 0, 'icon-file-input': 0, 'menu-dropdown': 0, group: 0 };\n\n  function count(items: readonly ButtonGroupProps.ItemOrGroup[]) {\n    for (const item of items) {\n      counters[item.type] += 1;\n\n      if (item.type === 'group') {\n        count(item.items);\n      }\n    }\n  }\n  count(allItems);\n\n  return counters;\n}\n\napplyDisplayName(ButtonGroup, 'ButtonGroup');\nexport default ButtonGroup;\n"]}

package/button-group/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/button-group/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuE,MAAM,OAAO,CAAC;AAgB5F,OAAO,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AAM1E,QAAA,MAAM,mBAAmB,uGAuKxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/button-group/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuE,MAAM,OAAO,CAAC;AAgB5F,OAAO,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AAO1E,QAAA,MAAM,mBAAmB,uGA4KxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/button-group/internal.js

@@ -12,10 +12,11 @@ import { KeyCode } from '../internal/keycode';
 import { circleIndex } from '../internal/utils/circle-index';
 import handleKey from '../internal/utils/handle-key';
 import ItemElement from './item-element.js';
+import { getButtonGroupStyles } from './style';
 import styles from './styles.css.js';
 import testUtilStyles from './test-classes/styles.css.js';
 const InternalButtonGroup = forwardRef((_a, ref) => {
-    var { items = [], onItemClick, onFilesChange, ariaLabel, dropdownExpandToViewport, __internalRootRef } = _a, props = __rest(_a, ["items", "onItemClick", "onFilesChange", "ariaLabel", "dropdownExpandToViewport", "__internalRootRef"]);
+    var { items = [], onItemClick, onFilesChange, ariaLabel, dropdownExpandToViewport, style, __internalRootRef } = _a, props = __rest(_a, ["items", "onItemClick", "onFilesChange", "ariaLabel", "dropdownExpandToViewport", "style", "__internalRootRef"]);
     const baseProps = getBaseProps(props);
     const focusedIdRef = useRef(null);
     const navigationAPI = useRef(null);
@@ -102,10 +103,11 @@ const InternalButtonGroup = forwardRef((_a, ref) => {
         }
         return getAllFocusables(target).filter(el => isElementRegistered(el) && !isElementDisabled(el));
     }
-    return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(styles.root, testUtilStyles['button-group'], baseProps.className), ref: containerRef, role: "toolbar", "aria-label": ariaLabel, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown }),
+    const stylePropertiesAndVariables = getButtonGroupStyles(style);
+    return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(styles.root, testUtilStyles['button-group'], baseProps.className), ref: containerRef, role: "toolbar", "aria-label": ariaLabel, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, style: stylePropertiesAndVariables }),
         React.createElement(SingleTabStopNavigationProvider, { ref: navigationAPI, navigationActive: true, getNextFocusTarget: getNextFocusTarget, onUnregisterActive: onUnregisterActive }, items.map((itemOrGroup, index) => {
             var _a;
-            const itemContent = (item, position) => (React.createElement(ItemElement, { key: item.id, item: item, dropdownExpandToViewport: dropdownExpandToViewport, tooltip: tooltip, setTooltip: setTooltip, onItemClick: onItemClick, onFilesChange: onFilesChange, ref: element => (itemsRef.current[item.id] = element), position: position }));
+            const itemContent = (item, position) => (React.createElement(ItemElement, { key: item.id, item: item, dropdownExpandToViewport: dropdownExpandToViewport, tooltip: tooltip, setTooltip: setTooltip, onItemClick: onItemClick, onFilesChange: onFilesChange, ref: element => (itemsRef.current[item.id] = element), position: position, style: style }));
             const isGroupBefore = ((_a = items[index - 1]) === null || _a === void 0 ? void 0 : _a.type) === 'group';
             const currentItem = items[index];
             const isGroupNow = (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === 'group';