@cloudscape-design/components-themeable 3.0.109 → 3.0.111

package/lib/internal/template/table/styles.scoped.css

@@ -94,7 +94,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_wih1l_2te74_97:not(#\9) {
+.awsui_root_wih1l_r2zh7_97:not(#\9) {
   font-size: var(--font-body-m-size-sregvd, 14px);
   line-height: var(--font-body-m-line-height-i7xxvv, 22px);
   color: var(--color-text-body-default-7m2b3r, #16191f);
@@ -103,44 +103,44 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   width: 100%;
 }
 
-.awsui_tools_wih1l_2te74_106:not(#\9) {
+.awsui_tools_wih1l_r2zh7_106:not(#\9) {
   display: flex;
   align-items: flex-start;
   flex-wrap: wrap;
   padding: var(--space-scaled-xs-6859qs, 8px) 0 var(--space-scaled-xxs-95dhkm, 4px);
 }
-.awsui_tools-filtering_wih1l_2te74_112:not(#\9) {
+.awsui_tools-filtering_wih1l_r2zh7_112:not(#\9) {
   flex: 1 1 0%;
   max-width: 100%;
   margin-right: var(--space-l-4vl6xu, 20px);
 }
-.awsui_tools-align-right_wih1l_2te74_117:not(#\9) {
+.awsui_tools-align-right_wih1l_r2zh7_117:not(#\9) {
   display: flex;
   margin-left: auto;
 }
-.awsui_tools-pagination_wih1l_2te74_121 + .awsui_tools-preferences_wih1l_2te74_121:not(#\9) {
+.awsui_tools-pagination_wih1l_r2zh7_121 + .awsui_tools-preferences_wih1l_r2zh7_121:not(#\9) {
   border-left: var(--border-divider-section-width-5a4cv1, 1px) solid var(--color-border-divider-default-k96bks, #eaeded);
   box-sizing: border-box;
   margin-left: var(--space-xs-rsr2qu, 8px);
   padding-left: var(--space-xs-rsr2qu, 8px);
 }
-.awsui_tools-small_wih1l_2te74_127 > .awsui_tools-filtering_wih1l_2te74_112:not(#\9) {
+.awsui_tools-small_wih1l_r2zh7_127 > .awsui_tools-filtering_wih1l_r2zh7_112:not(#\9) {
   margin-right: 0;
   margin-bottom: var(--space-scaled-xs-6859qs, 8px);
   flex-basis: 100%;
 }
 
-.awsui_table_wih1l_2te74_133:not(#\9) {
+.awsui_table_wih1l_r2zh7_133:not(#\9) {
   width: 100%;
   border-spacing: 0;
   position: relative;
   box-sizing: border-box;
 }
-.awsui_table-layout-fixed_wih1l_2te74_139:not(#\9) {
+.awsui_table-layout-fixed_wih1l_r2zh7_139:not(#\9) {
   table-layout: fixed;
 }
 
-.awsui_wrapper_wih1l_2te74_143:not(#\9) {
+.awsui_wrapper_wih1l_r2zh7_143:not(#\9) {
   position: relative;
   box-sizing: border-box;
   width: 100%;
@@ -150,31 +150,31 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-top-right-radius: var(--border-radius-container-1aveko, 0px);
   border-top-left-radius: var(--border-radius-container-1aveko, 0px);
 }
-.awsui_wrapper_wih1l_2te74_143.awsui_variant-stacked_wih1l_2te74_153 > .awsui_table_wih1l_2te74_133:not(#\9), .awsui_wrapper_wih1l_2te74_143.awsui_variant-container_wih1l_2te74_153 > .awsui_table_wih1l_2te74_133:not(#\9) {
+.awsui_wrapper_wih1l_r2zh7_143.awsui_variant-stacked_wih1l_r2zh7_153 > .awsui_table_wih1l_r2zh7_133:not(#\9), .awsui_wrapper_wih1l_r2zh7_143.awsui_variant-container_wih1l_r2zh7_153 > .awsui_table_wih1l_r2zh7_133:not(#\9) {
   padding-left: var(--space-table-horizontal-njdbej, 0px);
   padding-right: var(--space-table-horizontal-njdbej, 0px);
 }
-.awsui_wrapper_wih1l_2te74_143.awsui_variant-embedded_wih1l_2te74_157:not(#\9) {
+.awsui_wrapper_wih1l_r2zh7_143.awsui_variant-embedded_wih1l_r2zh7_157:not(#\9) {
   padding-bottom: var(--space-table-embedded-content-bottom-7vc5vt, 0px);
 }
-.awsui_wrapper_wih1l_2te74_143.awsui_has-header_wih1l_2te74_160:not(#\9) {
+.awsui_wrapper_wih1l_r2zh7_143.awsui_has-header_wih1l_r2zh7_160:not(#\9) {
   padding-top: 0px;
 }
-.awsui_wrapper_wih1l_2te74_143.awsui_has-footer_wih1l_2te74_163:not(#\9) {
+.awsui_wrapper_wih1l_r2zh7_143.awsui_has-footer_wih1l_r2zh7_163:not(#\9) {
   padding-bottom: 0px;
 }
-.awsui_wrapper_wih1l_2te74_143[data-awsui-focus-visible=true]:not(#\9):focus {
+.awsui_wrapper_wih1l_r2zh7_143[data-awsui-focus-visible=true]:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: 2px;
   border-radius: var(--border-radius-container-1aveko, 0px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-n5kd8g, #0073bb);
 }
 
-.awsui_cell-merged_wih1l_2te74_173:not(#\9) {
+.awsui_cell-merged_wih1l_r2zh7_173:not(#\9) {
   text-align: center;
   padding: 0;
 }
-.awsui_cell-merged-content_wih1l_2te74_177:not(#\9) {
+.awsui_cell-merged-content_wih1l_r2zh7_177:not(#\9) {
   box-sizing: border-box;
   width: 100%;
   padding: var(--space-scaled-m-pv0fmt, 16px) var(--space-l-4vl6xu, 20px) var(--space-scaled-l-t03y3z, 20px);
@@ -182,34 +182,34 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   /* stylelint-enable plugin/no-unsupported-browser-features */
 }
 @supports (position: sticky) {
-  .awsui_cell-merged-content_wih1l_2te74_177:not(#\9) {
+  .awsui_cell-merged-content_wih1l_r2zh7_177:not(#\9) {
     position: sticky;
     left: 0;
     margin: 0 calc(-2 * var(--space-table-horizontal-njdbej, 0px));
   }
 }
 
-.awsui_empty_wih1l_2te74_192:not(#\9) {
+.awsui_empty_wih1l_r2zh7_192:not(#\9) {
   color: var(--color-text-empty-izapdt, #687078);
 }
 
-.awsui_loading_wih1l_2te74_196:not(#\9) {
+.awsui_loading_wih1l_r2zh7_196:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_selection-control_wih1l_2te74_200:not(#\9) {
+.awsui_selection-control_wih1l_r2zh7_200:not(#\9) {
   position: relative;
   box-sizing: border-box;
   width: 54px;
   max-width: 54px;
   min-width: 54px;
 }
-.awsui_selection-control_wih1l_2te74_200.awsui_selection-control-header_wih1l_2te74_207:not(#\9) {
+.awsui_selection-control_wih1l_r2zh7_200.awsui_selection-control-header_wih1l_r2zh7_207:not(#\9) {
   padding: var(--space-scaled-xs-6859qs, 8px) var(--space-scaled-l-t03y3z, 20px);
   border-left: var(--border-item-width-yvnixs, 1px) solid transparent;
 }
 
-.awsui_sticky-scrollbar_wih1l_2te74_212:not(#\9) {
+.awsui_sticky-scrollbar_wih1l_r2zh7_212:not(#\9) {
   height: 15px;
   position: fixed;
   display: none;
@@ -219,14 +219,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   bottom: 0;
   width: 100%;
 }
-.awsui_sticky-scrollbar-content_wih1l_2te74_222:not(#\9) {
+.awsui_sticky-scrollbar-content_wih1l_r2zh7_222:not(#\9) {
   height: 15px;
 }
-.awsui_sticky-scrollbar-visible_wih1l_2te74_225:not(#\9) {
+.awsui_sticky-scrollbar-visible_wih1l_r2zh7_225:not(#\9) {
   display: block;
 }
 
-.awsui_header-secondary_wih1l_2te74_229:not(#\9) {
+/*
+The dynamic height dark header needs a background that will cover
+the default white background of the container component.
+*/
+.awsui_dark-header_wih1l_r2zh7_233:not(#\9) {
+  background-color: var(--color-background-layout-main-q0tbxx, #f2f3f3);
+}
+
+.awsui_header-secondary_wih1l_r2zh7_237:not(#\9) {
   overflow: auto;
   -ms-overflow-style: none;
   /* Internet Explorer 10+ */
@@ -237,50 +245,50 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-radius: 0;
   background: var(--color-background-table-header-mryayf, #fafafa);
 }
-.awsui_header-secondary_wih1l_2te74_229.awsui_variant-stacked_wih1l_2te74_153 > .awsui_table_wih1l_2te74_133:not(#\9), .awsui_header-secondary_wih1l_2te74_229.awsui_variant-container_wih1l_2te74_153 > .awsui_table_wih1l_2te74_133:not(#\9) {
+.awsui_header-secondary_wih1l_r2zh7_237.awsui_variant-stacked_wih1l_r2zh7_153 > .awsui_table_wih1l_r2zh7_133:not(#\9), .awsui_header-secondary_wih1l_r2zh7_237.awsui_variant-container_wih1l_r2zh7_153 > .awsui_table_wih1l_r2zh7_133:not(#\9) {
   padding-left: var(--space-table-horizontal-njdbej, 0px);
   padding-right: var(--space-table-horizontal-njdbej, 0px);
 }
-.awsui_header-secondary_wih1l_2te74_229:not(#\9)::-webkit-scrollbar {
+.awsui_header-secondary_wih1l_r2zh7_237:not(#\9)::-webkit-scrollbar {
   display: none;
   /* Safari and Chrome */
 }
+.awsui_header-secondary_wih1l_r2zh7_237.awsui_table-has-header_wih1l_r2zh7_256:not(#\9) {
+  border-top: var(--border-divider-list-width-hacikr, 1px) solid var(--color-border-container-divider-z203b8, #eaeded);
+}
 
-.awsui_header-controls_wih1l_2te74_249:not(#\9) {
+.awsui_header-controls_wih1l_r2zh7_260:not(#\9) {
   padding-top: var(--space-container-header-vertical-0bd19u, 12px);
   padding-bottom: var(--space-container-header-vertical-0bd19u, 12px);
 }
-.awsui_header-controls_wih1l_2te74_249.awsui_variant-stacked_wih1l_2te74_153:not(#\9), .awsui_header-controls_wih1l_2te74_249.awsui_variant-container_wih1l_2te74_153:not(#\9) {
+.awsui_header-controls_wih1l_r2zh7_260.awsui_variant-stacked_wih1l_r2zh7_153:not(#\9), .awsui_header-controls_wih1l_r2zh7_260.awsui_variant-container_wih1l_r2zh7_153:not(#\9) {
   padding-left: calc(var(--space-table-horizontal-njdbej, 0px) + var(--space-table-header-horizontal-4u689g, 20px));
   padding-right: calc(var(--space-table-horizontal-njdbej, 0px) + var(--space-table-header-horizontal-4u689g, 20px));
 }
-.awsui_header-controls_wih1l_2te74_249.awsui_variant-embedded_wih1l_2te74_157:not(#\9) {
+.awsui_header-controls_wih1l_r2zh7_260.awsui_variant-embedded_wih1l_r2zh7_157:not(#\9) {
   padding-left: var(--space-table-header-horizontal-4u689g, 20px);
   padding-right: var(--space-table-header-horizontal-4u689g, 20px);
   padding-top: var(--space-table-embedded-header-top-1yxc8d, 12px);
 }
-.awsui_header-controls_wih1l_2te74_249 + .awsui_header-secondary_wih1l_2te74_229:not(#\9) {
-  border-top: var(--border-divider-list-width-hacikr, 1px) solid var(--color-border-container-divider-z203b8, #eaeded);
-}
 
-.awsui_divider_wih1l_2te74_266:not(#\9) {
+.awsui_divider_wih1l_r2zh7_274:not(#\9) {
   border: none;
   margin: 0;
   height: 0;
   border-top: var(--border-divider-section-width-5a4cv1, 1px) solid var(--color-border-divider-default-k96bks, #eaeded);
 }
 
-.awsui_footer-wrapper_wih1l_2te74_273.awsui_variant-stacked_wih1l_2te74_153:not(#\9), .awsui_footer-wrapper_wih1l_2te74_273.awsui_variant-container_wih1l_2te74_153:not(#\9) {
+.awsui_footer-wrapper_wih1l_r2zh7_281.awsui_variant-stacked_wih1l_r2zh7_153:not(#\9), .awsui_footer-wrapper_wih1l_r2zh7_281.awsui_variant-container_wih1l_r2zh7_153:not(#\9) {
   padding-left: var(--space-table-horizontal-njdbej, 0px);
   padding-right: var(--space-table-horizontal-njdbej, 0px);
 }
 
-.awsui_footer_wih1l_2te74_273:not(#\9) {
+.awsui_footer_wih1l_r2zh7_281:not(#\9) {
   padding: var(--space-scaled-s-cu1hzn, 12px) var(--space-table-footer-horizontal-m6qo87, 20px);
 }
 
-.awsui_thead-active_wih1l_2te74_282:not(#\9),
-.awsui_row_wih1l_2te74_283:not(#\9),
-.awsui_row-selected_wih1l_2te74_284:not(#\9) {
+.awsui_thead-active_wih1l_r2zh7_290:not(#\9),
+.awsui_row_wih1l_r2zh7_291:not(#\9),
+.awsui_row-selected_wih1l_r2zh7_292:not(#\9) {
   /* used in test-utils */
 }

package/lib/internal/template/table/styles.selectors.js

@@ -2,37 +2,39 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_wih1l_2te74_97",
-  "tools": "awsui_tools_wih1l_2te74_106",
-  "tools-filtering": "awsui_tools-filtering_wih1l_2te74_112",
-  "tools-align-right": "awsui_tools-align-right_wih1l_2te74_117",
-  "tools-pagination": "awsui_tools-pagination_wih1l_2te74_121",
-  "tools-preferences": "awsui_tools-preferences_wih1l_2te74_121",
-  "tools-small": "awsui_tools-small_wih1l_2te74_127",
-  "table": "awsui_table_wih1l_2te74_133",
-  "table-layout-fixed": "awsui_table-layout-fixed_wih1l_2te74_139",
-  "wrapper": "awsui_wrapper_wih1l_2te74_143",
-  "variant-stacked": "awsui_variant-stacked_wih1l_2te74_153",
-  "variant-container": "awsui_variant-container_wih1l_2te74_153",
-  "variant-embedded": "awsui_variant-embedded_wih1l_2te74_157",
-  "has-header": "awsui_has-header_wih1l_2te74_160",
-  "has-footer": "awsui_has-footer_wih1l_2te74_163",
-  "cell-merged": "awsui_cell-merged_wih1l_2te74_173",
-  "cell-merged-content": "awsui_cell-merged-content_wih1l_2te74_177",
-  "empty": "awsui_empty_wih1l_2te74_192",
-  "loading": "awsui_loading_wih1l_2te74_196",
-  "selection-control": "awsui_selection-control_wih1l_2te74_200",
-  "selection-control-header": "awsui_selection-control-header_wih1l_2te74_207",
-  "sticky-scrollbar": "awsui_sticky-scrollbar_wih1l_2te74_212",
-  "sticky-scrollbar-content": "awsui_sticky-scrollbar-content_wih1l_2te74_222",
-  "sticky-scrollbar-visible": "awsui_sticky-scrollbar-visible_wih1l_2te74_225",
-  "header-secondary": "awsui_header-secondary_wih1l_2te74_229",
-  "header-controls": "awsui_header-controls_wih1l_2te74_249",
-  "divider": "awsui_divider_wih1l_2te74_266",
-  "footer-wrapper": "awsui_footer-wrapper_wih1l_2te74_273",
-  "footer": "awsui_footer_wih1l_2te74_273",
-  "thead-active": "awsui_thead-active_wih1l_2te74_282",
-  "row": "awsui_row_wih1l_2te74_283",
-  "row-selected": "awsui_row-selected_wih1l_2te74_284"
+  "root": "awsui_root_wih1l_r2zh7_97",
+  "tools": "awsui_tools_wih1l_r2zh7_106",
+  "tools-filtering": "awsui_tools-filtering_wih1l_r2zh7_112",
+  "tools-align-right": "awsui_tools-align-right_wih1l_r2zh7_117",
+  "tools-pagination": "awsui_tools-pagination_wih1l_r2zh7_121",
+  "tools-preferences": "awsui_tools-preferences_wih1l_r2zh7_121",
+  "tools-small": "awsui_tools-small_wih1l_r2zh7_127",
+  "table": "awsui_table_wih1l_r2zh7_133",
+  "table-layout-fixed": "awsui_table-layout-fixed_wih1l_r2zh7_139",
+  "wrapper": "awsui_wrapper_wih1l_r2zh7_143",
+  "variant-stacked": "awsui_variant-stacked_wih1l_r2zh7_153",
+  "variant-container": "awsui_variant-container_wih1l_r2zh7_153",
+  "variant-embedded": "awsui_variant-embedded_wih1l_r2zh7_157",
+  "has-header": "awsui_has-header_wih1l_r2zh7_160",
+  "has-footer": "awsui_has-footer_wih1l_r2zh7_163",
+  "cell-merged": "awsui_cell-merged_wih1l_r2zh7_173",
+  "cell-merged-content": "awsui_cell-merged-content_wih1l_r2zh7_177",
+  "empty": "awsui_empty_wih1l_r2zh7_192",
+  "loading": "awsui_loading_wih1l_r2zh7_196",
+  "selection-control": "awsui_selection-control_wih1l_r2zh7_200",
+  "selection-control-header": "awsui_selection-control-header_wih1l_r2zh7_207",
+  "sticky-scrollbar": "awsui_sticky-scrollbar_wih1l_r2zh7_212",
+  "sticky-scrollbar-content": "awsui_sticky-scrollbar-content_wih1l_r2zh7_222",
+  "sticky-scrollbar-visible": "awsui_sticky-scrollbar-visible_wih1l_r2zh7_225",
+  "dark-header": "awsui_dark-header_wih1l_r2zh7_233",
+  "header-secondary": "awsui_header-secondary_wih1l_r2zh7_237",
+  "table-has-header": "awsui_table-has-header_wih1l_r2zh7_256",
+  "header-controls": "awsui_header-controls_wih1l_r2zh7_260",
+  "divider": "awsui_divider_wih1l_r2zh7_274",
+  "footer-wrapper": "awsui_footer-wrapper_wih1l_r2zh7_281",
+  "footer": "awsui_footer_wih1l_r2zh7_281",
+  "thead-active": "awsui_thead-active_wih1l_r2zh7_290",
+  "row": "awsui_row_wih1l_r2zh7_291",
+  "row-selected": "awsui_row-selected_wih1l_r2zh7_292"
 };
   

package/lib/internal/template/table/thead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"thead.d.ts","sourceRoot":"","sources":["../../../src/table/thead.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAyB,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAE9E,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAQvF,MAAM,WAAW,UAAU;IACzB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,aAAa,EAAE,UAAU,CAAC,aAAa,GAAG,SAAS,CAAC;IACpD,iBAAiB,EAAE,aAAa,CAAC,UAAU,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;IACnE,aAAa,EAAE,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;IACzD,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;IACvC,eAAe,EAAE,OAAO,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC;IAC5B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAC;IACtC,cAAc,EAAE,qBAAqB,CAAC;IACtC,WAAW,EAAE,CAAC,CAAC,aAAa,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtG,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC5D,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,eAAe,EAAE,yBAAyB,CAAC,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,SAAS,CAAC;IACrF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8BAA8B,CAAC,EAAE,MAAM,CAAC;CACzC;AAED,QAAA,MAAM,KAAK,wFA8FV,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"thead.d.ts","sourceRoot":"","sources":["../../../src/table/thead.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAyB,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAE9E,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAQvF,MAAM,WAAW,UAAU;IACzB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,aAAa,EAAE,UAAU,CAAC,aAAa,GAAG,SAAS,CAAC;IACpD,iBAAiB,EAAE,aAAa,CAAC,UAAU,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;IACnE,aAAa,EAAE,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;IACzD,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;IACvC,eAAe,EAAE,OAAO,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC;IAC5B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAC;IACtC,cAAc,EAAE,qBAAqB,CAAC;IACtC,WAAW,EAAE,CAAC,CAAC,aAAa,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtG,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC5D,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,eAAe,EAAE,yBAAyB,CAAC,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,SAAS,CAAC;IACrF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8BAA8B,CAAC,EAAE,MAAM,CAAC;CACzC;AAED,QAAA,MAAM,KAAK,wFAqGV,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/internal/template/table/thead.js

@@ -19,9 +19,9 @@ var Thead = React.forwardRef(function (_a, outerRef) {
     var _f = useColumnWidths(), columnWidths = _f.columnWidths, totalWidth = _f.totalWidth, updateColumn = _f.updateColumn;
     return (React.createElement("thead", { className: clsx(!hidden && styles['thead-active']) },
         React.createElement("tr", __assign({}, focusMarkers.all, { ref: outerRef }),
-            selectionType === 'multi' && (React.createElement("th", { className: clsx(headerCellClass, selectionCellClass), scope: "col" },
+            selectionType === 'multi' && (React.createElement("th", { className: clsx(headerCellClass, selectionCellClass, hidden && headerCellStyles['header-cell-hidden']), scope: "col" },
                 React.createElement(SelectionControl, __assign({ onFocusDown: function (event) { return onFocusMove(event.target, -1, +1); } }, selectAllProps, (hidden ? { tabIndex: -1 } : {}))))),
-            selectionType === 'single' && (React.createElement("th", { className: clsx(headerCellClass, selectionCellClass), scope: "col" },
+            selectionType === 'single' && (React.createElement("th", { className: clsx(headerCellClass, selectionCellClass, hidden && headerCellStyles['header-cell-hidden']), scope: "col" },
                 React.createElement(ScreenreaderOnly, null, singleSelectionHeaderAriaLabel))),
             columnDefinitions.map(function (column, colIndex) {
                 var widthOverride;
@@ -39,7 +39,7 @@ var Thead = React.forwardRef(function (_a, outerRef) {
                         width: widthOverride || column.width,
                         minWidth: sticky ? undefined : column.minWidth,
                         maxWidth: resizableColumns || sticky ? undefined : column.maxWidth
-                    }, tabIndex: sticky ? -1 : 0, showFocusRing: colIndex === showFocusRing, column: column, activeSortingColumn: sortingColumn, sortingDescending: sortingDescending, sortingDisabled: sortingDisabled, wrapLines: wrapLines, colIndex: colIndex, updateColumn: updateColumn, onResizeFinish: function () { return onResizeFinish(columnWidths); }, resizableColumns: resizableColumns, onClick: function (detail) { return fireNonCancelableEvent(onSortingChange, detail); }, onFocus: function () { return onCellFocus === null || onCellFocus === void 0 ? void 0 : onCellFocus(colIndex); }, onBlur: onCellBlur }));
+                    }, tabIndex: sticky ? -1 : 0, showFocusRing: colIndex === showFocusRing, column: column, activeSortingColumn: sortingColumn, sortingDescending: sortingDescending, sortingDisabled: sortingDisabled, wrapLines: wrapLines, hidden: hidden, colIndex: colIndex, updateColumn: updateColumn, onResizeFinish: function () { return onResizeFinish(columnWidths); }, resizableColumns: resizableColumns, onClick: function (detail) { return fireNonCancelableEvent(onSortingChange, detail); }, onFocus: function () { return onCellFocus === null || onCellFocus === void 0 ? void 0 : onCellFocus(colIndex); }, onBlur: onCellBlur }));
             }))));
 });
 export default Thead;

package/lib/internal/template/table/thead.js.map

@@ -1 +1 @@
-{"version":3,"file":"thead.js","sourceRoot":"","sources":["../../../src/table/thead.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { TableProps } from './interfaces';\nimport SelectionControl, { SelectionControlProps } from './selection-control';\nimport { focusMarkers } from './use-selection';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { getColumnKey } from './utils';\nimport { TableHeaderCell } from './header-cell';\nimport { useColumnWidths } from './use-column-widths';\nimport styles from './styles.css.js';\nimport headerCellStyles from './header-cell/styles.css.js';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\n\nexport interface TheadProps {\n  containerWidth: number | null;\n  selectionType: TableProps.SelectionType | undefined;\n  columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>;\n  sortingColumn: TableProps.SortingColumn<any> | undefined;\n  sortingDescending: boolean | undefined;\n  sortingDisabled: boolean | undefined;\n  variant: TableProps.Variant;\n  wrapLines: boolean | undefined;\n  resizableColumns: boolean | undefined;\n  selectAllProps: SelectionControlProps;\n  onFocusMove: ((sourceElement: HTMLElement, fromIndex: number, direction: -1 | 1) => void) | undefined;\n  onCellFocus?: (colIndex: number) => void;\n  onCellBlur?: () => void;\n  onResizeFinish: (newWidths: Record<string, number>) => void;\n  showFocusRing?: number | null;\n  onSortingChange: NonCancelableEventHandler<TableProps.SortingState<any>> | undefined;\n  sticky?: boolean;\n  hidden?: boolean;\n  stuck?: boolean;\n  singleSelectionHeaderAriaLabel?: string;\n}\n\nconst Thead = React.forwardRef(\n  (\n    {\n      containerWidth,\n      selectionType,\n      selectAllProps,\n      columnDefinitions,\n      sortingColumn,\n      sortingDisabled,\n      sortingDescending,\n      resizableColumns,\n      variant,\n      wrapLines,\n      onFocusMove,\n      onCellFocus,\n      onCellBlur,\n      onSortingChange,\n      onResizeFinish,\n      singleSelectionHeaderAriaLabel,\n      showFocusRing = null,\n      sticky = false,\n      hidden = false,\n      stuck = false,\n    }: TheadProps,\n    outerRef: React.Ref<HTMLTableRowElement>\n  ) => {\n    const headerCellClass = clsx(\n      headerCellStyles['header-cell'],\n      headerCellStyles[`header-cell-variant-${variant}`],\n      sticky && headerCellStyles['header-cell-sticky'],\n      stuck && headerCellStyles['header-cell-stuck']\n    );\n    const selectionCellClass = clsx(styles['selection-control'], styles['selection-control-header']);\n    const { columnWidths, totalWidth, updateColumn } = useColumnWidths();\n\n    return (\n      <thead className={clsx(!hidden && styles['thead-active'])}>\n        <tr {...focusMarkers.all} ref={outerRef}>\n          {selectionType === 'multi' && (\n            <th className={clsx(headerCellClass, selectionCellClass)} scope=\"col\">\n              <SelectionControl\n                onFocusDown={event => onFocusMove!(event.target as HTMLElement, -1, +1)}\n                {...selectAllProps}\n                {...(hidden ? { tabIndex: -1 } : {})}\n              />\n            </th>\n          )}\n          {selectionType === 'single' && (\n            <th className={clsx(headerCellClass, selectionCellClass)} scope=\"col\">\n              <ScreenreaderOnly>{singleSelectionHeaderAriaLabel}</ScreenreaderOnly>\n            </th>\n          )}\n          {columnDefinitions.map((column, colIndex) => {\n            let widthOverride;\n            if (resizableColumns) {\n              if (columnWidths) {\n                // use stateful value if available\n                widthOverride = columnWidths[getColumnKey(column, colIndex)];\n              }\n              if (colIndex === columnDefinitions.length - 1 && containerWidth && containerWidth > totalWidth) {\n                // let the last column grow and fill the container width\n                widthOverride = 'auto';\n              }\n            }\n            return (\n              <TableHeaderCell\n                key={getColumnKey(column, colIndex)}\n                className={headerCellClass}\n                style={{\n                  width: widthOverride || column.width,\n                  minWidth: sticky ? undefined : column.minWidth,\n                  maxWidth: resizableColumns || sticky ? undefined : column.maxWidth,\n                }}\n                tabIndex={sticky ? -1 : 0}\n                showFocusRing={colIndex === showFocusRing}\n                column={column}\n                activeSortingColumn={sortingColumn}\n                sortingDescending={sortingDescending}\n                sortingDisabled={sortingDisabled}\n                wrapLines={wrapLines}\n                colIndex={colIndex}\n                updateColumn={updateColumn}\n                onResizeFinish={() => onResizeFinish(columnWidths)}\n                resizableColumns={resizableColumns}\n                onClick={detail => fireNonCancelableEvent(onSortingChange, detail)}\n                onFocus={() => onCellFocus?.(colIndex)}\n                onBlur={onCellBlur}\n              />\n            );\n          })}\n        </tr>\n      </thead>\n    );\n  }\n);\n\nexport default Thead;\n"]}
+{"version":3,"file":"thead.js","sourceRoot":"","sources":["../../../src/table/thead.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { TableProps } from './interfaces';\nimport SelectionControl, { SelectionControlProps } from './selection-control';\nimport { focusMarkers } from './use-selection';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { getColumnKey } from './utils';\nimport { TableHeaderCell } from './header-cell';\nimport { useColumnWidths } from './use-column-widths';\nimport styles from './styles.css.js';\nimport headerCellStyles from './header-cell/styles.css.js';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\n\nexport interface TheadProps {\n  containerWidth: number | null;\n  selectionType: TableProps.SelectionType | undefined;\n  columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>;\n  sortingColumn: TableProps.SortingColumn<any> | undefined;\n  sortingDescending: boolean | undefined;\n  sortingDisabled: boolean | undefined;\n  variant: TableProps.Variant;\n  wrapLines: boolean | undefined;\n  resizableColumns: boolean | undefined;\n  selectAllProps: SelectionControlProps;\n  onFocusMove: ((sourceElement: HTMLElement, fromIndex: number, direction: -1 | 1) => void) | undefined;\n  onCellFocus?: (colIndex: number) => void;\n  onCellBlur?: () => void;\n  onResizeFinish: (newWidths: Record<string, number>) => void;\n  showFocusRing?: number | null;\n  onSortingChange: NonCancelableEventHandler<TableProps.SortingState<any>> | undefined;\n  sticky?: boolean;\n  hidden?: boolean;\n  stuck?: boolean;\n  singleSelectionHeaderAriaLabel?: string;\n}\n\nconst Thead = React.forwardRef(\n  (\n    {\n      containerWidth,\n      selectionType,\n      selectAllProps,\n      columnDefinitions,\n      sortingColumn,\n      sortingDisabled,\n      sortingDescending,\n      resizableColumns,\n      variant,\n      wrapLines,\n      onFocusMove,\n      onCellFocus,\n      onCellBlur,\n      onSortingChange,\n      onResizeFinish,\n      singleSelectionHeaderAriaLabel,\n      showFocusRing = null,\n      sticky = false,\n      hidden = false,\n      stuck = false,\n    }: TheadProps,\n    outerRef: React.Ref<HTMLTableRowElement>\n  ) => {\n    const headerCellClass = clsx(\n      headerCellStyles['header-cell'],\n      headerCellStyles[`header-cell-variant-${variant}`],\n      sticky && headerCellStyles['header-cell-sticky'],\n      stuck && headerCellStyles['header-cell-stuck']\n    );\n    const selectionCellClass = clsx(styles['selection-control'], styles['selection-control-header']);\n    const { columnWidths, totalWidth, updateColumn } = useColumnWidths();\n\n    return (\n      <thead className={clsx(!hidden && styles['thead-active'])}>\n        <tr {...focusMarkers.all} ref={outerRef}>\n          {selectionType === 'multi' && (\n            <th\n              className={clsx(headerCellClass, selectionCellClass, hidden && headerCellStyles['header-cell-hidden'])}\n              scope=\"col\"\n            >\n              <SelectionControl\n                onFocusDown={event => onFocusMove!(event.target as HTMLElement, -1, +1)}\n                {...selectAllProps}\n                {...(hidden ? { tabIndex: -1 } : {})}\n              />\n            </th>\n          )}\n          {selectionType === 'single' && (\n            <th\n              className={clsx(headerCellClass, selectionCellClass, hidden && headerCellStyles['header-cell-hidden'])}\n              scope=\"col\"\n            >\n              <ScreenreaderOnly>{singleSelectionHeaderAriaLabel}</ScreenreaderOnly>\n            </th>\n          )}\n          {columnDefinitions.map((column, colIndex) => {\n            let widthOverride;\n            if (resizableColumns) {\n              if (columnWidths) {\n                // use stateful value if available\n                widthOverride = columnWidths[getColumnKey(column, colIndex)];\n              }\n              if (colIndex === columnDefinitions.length - 1 && containerWidth && containerWidth > totalWidth) {\n                // let the last column grow and fill the container width\n                widthOverride = 'auto';\n              }\n            }\n            return (\n              <TableHeaderCell\n                key={getColumnKey(column, colIndex)}\n                className={headerCellClass}\n                style={{\n                  width: widthOverride || column.width,\n                  minWidth: sticky ? undefined : column.minWidth,\n                  maxWidth: resizableColumns || sticky ? undefined : column.maxWidth,\n                }}\n                tabIndex={sticky ? -1 : 0}\n                showFocusRing={colIndex === showFocusRing}\n                column={column}\n                activeSortingColumn={sortingColumn}\n                sortingDescending={sortingDescending}\n                sortingDisabled={sortingDisabled}\n                wrapLines={wrapLines}\n                hidden={hidden}\n                colIndex={colIndex}\n                updateColumn={updateColumn}\n                onResizeFinish={() => onResizeFinish(columnWidths)}\n                resizableColumns={resizableColumns}\n                onClick={detail => fireNonCancelableEvent(onSortingChange, detail)}\n                onFocus={() => onCellFocus?.(colIndex)}\n                onBlur={onCellBlur}\n              />\n            );\n          })}\n        </tr>\n      </thead>\n    );\n  }\n);\n\nexport default Thead;\n"]}

package/lib/internal/template/tiles/index.d.ts

@@ -1,4 +1,6 @@
+import React from 'react';
 import { TilesProps } from './interfaces';
 export { TilesProps };
-export default function Tiles(props: TilesProps): JSX.Element;
+declare const Tiles: React.ForwardRefExoticComponent<TilesProps & React.RefAttributes<TilesProps.Ref>>;
+export default Tiles;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tiles/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAK,EAAE,UAAU,eAG9C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tiles/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,QAAA,MAAM,KAAK,mFAGT,CAAC;AAGH,eAAe,KAAK,CAAC"}

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

@@ -5,9 +5,10 @@ import React from 'react';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import useBaseComponent from '../internal/hooks/use-base-component';
 import InternalTiles from './internal';
-export default function Tiles(props) {
+var Tiles = React.forwardRef(function (props, ref) {
     var baseComponentProps = useBaseComponent('Tiles');
-    return React.createElement(InternalTiles, __assign({}, props, baseComponentProps));
-}
+    return React.createElement(InternalTiles, __assign({ ref: ref }, props, baseComponentProps));
+});
 applyDisplayName(Tiles, 'Tiles');
+export default Tiles;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tiles/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,aAAa,MAAM,YAAY,CAAC;AAIvC,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAiB;IAC7C,IAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACrD,OAAO,oBAAC,aAAa,eAAK,KAAK,EAAM,kBAAkB,EAAI,CAAC;AAC9D,CAAC;AAED,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { TilesProps } from './interfaces';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport InternalTiles from './internal';\n\nexport { TilesProps };\n\nexport default function Tiles(props: TilesProps) {\n  const baseComponentProps = useBaseComponent('Tiles');\n  return <InternalTiles {...props} {...baseComponentProps} />;\n}\n\napplyDisplayName(Tiles, 'Tiles');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tiles/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,aAAa,MAAM,YAAY,CAAC;AAIvC,IAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,UAAC,KAAiB,EAAE,GAA8B;IAC/E,IAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACrD,OAAO,oBAAC,aAAa,aAAC,GAAG,EAAE,GAAG,IAAM,KAAK,EAAM,kBAAkB,EAAI,CAAC;AACxE,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AACjC,eAAe,KAAK,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { TilesProps } from './interfaces';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport InternalTiles from './internal';\n\nexport { TilesProps };\n\nconst Tiles = React.forwardRef((props: TilesProps, ref: React.Ref<TilesProps.Ref>) => {\n  const baseComponentProps = useBaseComponent('Tiles');\n  return <InternalTiles ref={ref} {...props} {...baseComponentProps} />;\n});\n\napplyDisplayName(Tiles, 'Tiles');\nexport default Tiles;\n"]}

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

@@ -54,5 +54,11 @@ export declare namespace TilesProps {
     interface ChangeDetail {
         value: string;
     }
+    interface Ref {
+        /**
+         * Sets input focus onto the UI control.
+         */
+        focus(): void;
+    }
 }
 //# sourceMappingURL=interfaces.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/tiles/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAC/E,OAAO,EAAE,UAAU,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEpE,MAAM,WAAW,UAAW,SAAQ,kBAAkB,EAAE,qBAAqB;IAC3E;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAErB;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IAElD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;CAC/D;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,UAAU,GAAG,WAAW,CAAC;IACrC,UAAiB,eAAe;QAC9B,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB;IAED,UAAiB,YAAY;QAC3B,KAAK,EAAE,MAAM,CAAC;KACf;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/tiles/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAC/E,OAAO,EAAE,UAAU,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEpE,MAAM,WAAW,UAAW,SAAQ,kBAAkB,EAAE,qBAAqB;IAC3E;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAErB;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IAElD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;CAC/D;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,UAAU,GAAG,WAAW,CAAC;IACrC,UAAiB,eAAe;QAC9B,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB;IAED,UAAiB,YAAY;QAC3B,KAAK,EAAE,MAAM,CAAC;KACf;IAED,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;CACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/tiles/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';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { FormFieldControlProps } from '../internal/context/form-field-context';\nimport { Breakpoint as _Breakpoint } from '../internal/breakpoints';\n\nexport interface TilesProps extends BaseComponentProps, FormFieldControlProps {\n  /**\n   * Specifies the value of the selected tile.\n   * If you want to clear the selection, use `null`.\n   */\n  value: string | null;\n\n  /**\n   * List of tile definitions. Each tile has the following properties:\n   *\n   * - `value` [string] - The value that will be associated with the tile. This is the value the tiles will get when the radio button is selected.\n   * - `label` [ReactNode] - A short description for the option the tile represents.\n   * - `description` [ReactNode] - (Optional) Further explanatory guidance on the tile option, shown below the `label`.\n   * - `image` [ReactNode] - (Optional) Visually distinctive image for the tile option, shown below the `description`.\n   * - `disabled` [boolean] - (Optional) Specifies whether the tile is disabled. Users can't select disabled tiles.\n   * - `controlId` [string] - (Optional) The ID of the internal input. You can use this to relate a label element's `for` attribute to this control.\n   *            We recommend that you don't set this property because it's automatically set by the tiles component.\n   */\n  items?: ReadonlyArray<TilesProps.TilesDefinition>;\n\n  /**\n   * Adds `aria-label` on the group. Don't set this property if you are using this form element within a form field\n   * because the form field component automatically sets the correct labels to make the component accessible.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Adds `aria-required` on the group.\n   */\n  ariaRequired?: boolean;\n\n  /**\n   * The number of columns for the tiles to be displayed in. Valid values are integers between 1 and 4.\n   * If no value is specified, the number of columns is determined based on the number of items, with a maximum of 3.\n   * It is set to 2 if 4 or 8 items are supplied in order to optimize the layout.\n   */\n  columns?: number;\n\n  /**\n   * Called when the user selects a different tile.\n   */\n  onChange?: NonCancelableEventHandler<TilesProps.ChangeDetail>;\n}\n\nexport namespace TilesProps {\n  export type Breakpoint = _Breakpoint;\n  export interface TilesDefinition {\n    value: string;\n    label: React.ReactNode;\n    description?: React.ReactNode;\n    image?: React.ReactNode;\n    disabled?: boolean;\n    controlId?: string;\n  }\n\n  export interface ChangeDetail {\n    value: string;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/tiles/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';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { FormFieldControlProps } from '../internal/context/form-field-context';\nimport { Breakpoint as _Breakpoint } from '../internal/breakpoints';\n\nexport interface TilesProps extends BaseComponentProps, FormFieldControlProps {\n  /**\n   * Specifies the value of the selected tile.\n   * If you want to clear the selection, use `null`.\n   */\n  value: string | null;\n\n  /**\n   * List of tile definitions. Each tile has the following properties:\n   *\n   * - `value` [string] - The value that will be associated with the tile. This is the value the tiles will get when the radio button is selected.\n   * - `label` [ReactNode] - A short description for the option the tile represents.\n   * - `description` [ReactNode] - (Optional) Further explanatory guidance on the tile option, shown below the `label`.\n   * - `image` [ReactNode] - (Optional) Visually distinctive image for the tile option, shown below the `description`.\n   * - `disabled` [boolean] - (Optional) Specifies whether the tile is disabled. Users can't select disabled tiles.\n   * - `controlId` [string] - (Optional) The ID of the internal input. You can use this to relate a label element's `for` attribute to this control.\n   *            We recommend that you don't set this property because it's automatically set by the tiles component.\n   */\n  items?: ReadonlyArray<TilesProps.TilesDefinition>;\n\n  /**\n   * Adds `aria-label` on the group. Don't set this property if you are using this form element within a form field\n   * because the form field component automatically sets the correct labels to make the component accessible.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Adds `aria-required` on the group.\n   */\n  ariaRequired?: boolean;\n\n  /**\n   * The number of columns for the tiles to be displayed in. Valid values are integers between 1 and 4.\n   * If no value is specified, the number of columns is determined based on the number of items, with a maximum of 3.\n   * It is set to 2 if 4 or 8 items are supplied in order to optimize the layout.\n   */\n  columns?: number;\n\n  /**\n   * Called when the user selects a different tile.\n   */\n  onChange?: NonCancelableEventHandler<TilesProps.ChangeDetail>;\n}\n\nexport namespace TilesProps {\n  export type Breakpoint = _Breakpoint;\n  export interface TilesDefinition {\n    value: string;\n    label: React.ReactNode;\n    description?: React.ReactNode;\n    image?: React.ReactNode;\n    disabled?: boolean;\n    controlId?: string;\n  }\n\n  export interface ChangeDetail {\n    value: string;\n  }\n\n  export interface Ref {\n    /**\n     * Sets input focus onto the UI control.\n     */\n    focus(): void;\n  }\n}\n"]}

package/lib/internal/template/tiles/internal.d.ts

@@ -1,6 +1,6 @@
+import React from 'react';
 import { TilesProps } from './interfaces';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
-declare type InternalTilesProps = TilesProps & InternalBaseComponentProps;
-export default function InternalTiles({ value, items, ariaLabel, ariaRequired, columns, onChange, __internalRootRef, ...rest }: InternalTilesProps): JSX.Element;
-export {};
+declare const InternalTiles: React.ForwardRefExoticComponent<TilesProps & InternalBaseComponentProps & React.RefAttributes<TilesProps.Ref>>;
+export default InternalTiles;
 //# sourceMappingURL=internal.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/tiles/internal.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM1C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAMlF,aAAK,kBAAkB,GAAG,UAAU,GAAG,0BAA0B,CAAC;AAElE,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,KAAK,EACL,KAAK,EACL,SAAS,EACT,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,iBAAwB,EACxB,GAAG,IAAI,EACR,EAAE,kBAAkB,eAiDpB"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/tiles/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM1C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AASlF,QAAA,MAAM,aAAa,gHA2ClB,CAAC;AAqBF,eAAe,aAAa,CAAC"}

package/lib/internal/template/tiles/internal.js

@@ -10,31 +10,34 @@ import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { useContainerBreakpoints } from '../internal/hooks/container-queries';
 import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { Tile } from './tile';
+import useRadioGroupForwardFocus from '../internal/hooks/forward-focus/radio-group';
 var COLUMN_TRIGGERS = ['default', 'xxs', 'xs'];
-export default function InternalTiles(_a) {
+var InternalTiles = React.forwardRef(function (_a, ref) {
     var value = _a.value, items = _a.items, ariaLabel = _a.ariaLabel, ariaRequired = _a.ariaRequired, columns = _a.columns, onChange = _a.onChange, _b = _a.__internalRootRef, __internalRootRef = _b === void 0 ? null : _b, rest = __rest(_a, ["value", "items", "ariaLabel", "ariaRequired", "columns", "onChange", "__internalRootRef"]);
-    var getColumns = function () {
-        if (columns) {
-            return columns;
-        }
-        var nItems = items ? items.length : 0;
-        var columnsLookup = {
-            0: 1,
-            1: 1,
-            2: 2,
-            4: 2,
-            8: 2
-        };
-        return columnsLookup[nItems] || 3;
-    };
-    var _c = useFormFieldContext(rest), ariaDescribedby = _c.ariaDescribedby, ariaLabelledby = _c.ariaLabelledby;
     var baseProps = getBaseProps(rest);
+    var _c = useFormFieldContext(rest), ariaDescribedby = _c.ariaDescribedby, ariaLabelledby = _c.ariaLabelledby;
     var generatedName = useUniqueId('awsui-tiles-');
-    var nColumns = getColumns();
-    var _d = useContainerBreakpoints(COLUMN_TRIGGERS), breakpoint = _d[0], ref = _d[1];
-    var mergedRef = useMergeRefs(ref, __internalRootRef);
+    var _d = useRadioGroupForwardFocus(ref, items, value), tileRef = _d[0], tileRefIndex = _d[1];
+    var _e = useContainerBreakpoints(COLUMN_TRIGGERS), breakpoint = _e[0], breakpointRef = _e[1];
+    var mergedRef = useMergeRefs(breakpointRef, __internalRootRef);
+    var columnCount = getColumnCount(items, columns);
     return (React.createElement("div", __assign({ role: "radiogroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-required": ariaRequired }, baseProps, { className: clsx(baseProps.className, styles.root), ref: mergedRef }),
-        React.createElement("div", { className: clsx(styles.columns, styles["column-".concat(nColumns)]) }, items &&
-            items.map(function (item) { return (React.createElement(Tile, { key: item.value, item: item, selected: item.value === value, name: generatedName, breakpoint: breakpoint, onChange: onChange })); }))));
+        React.createElement("div", { className: clsx(styles.columns, styles["column-".concat(columnCount)]) }, items &&
+            items.map(function (item, index) { return (React.createElement(Tile, { ref: index === tileRefIndex ? tileRef : undefined, key: item.value, item: item, selected: item.value === value, name: generatedName, breakpoint: breakpoint, onChange: onChange })); }))));
+});
+function getColumnCount(items, columns) {
+    if (columns) {
+        return columns;
+    }
+    var nItems = items ? items.length : 0;
+    var columnsLookup = {
+        0: 1,
+        1: 1,
+        2: 2,
+        4: 2,
+        8: 2
+    };
+    return columnsLookup[nItems] || 3;
 }
+export default InternalTiles;
 //# sourceMappingURL=internal.js.map

package/lib/internal/template/tiles/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/tiles/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAE9E,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,IAAM,eAAe,GAA4B,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;AAI1E,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EASjB;IARnB,IAAA,KAAK,WAAA,EACL,KAAK,WAAA,EACL,SAAS,eAAA,EACT,YAAY,kBAAA,EACZ,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,yBAAwB,EAAxB,iBAAiB,mBAAG,IAAI,KAAA,EACrB,IAAI,cAR6B,2FASrC,CADQ;IAEP,IAAM,UAAU,GAAG;QACjB,IAAI,OAAO,EAAE;YACX,OAAO,OAAO,CAAC;SAChB;QAED,IAAM,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QACxC,IAAM,aAAa,GAA2B;YAC5C,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,CAAC;SACL,CAAC;QACF,OAAO,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACpC,CAAC,CAAC;IACI,IAAA,KAAsC,mBAAmB,CAAC,IAAI,CAAC,EAA7D,eAAe,qBAAA,EAAE,cAAc,oBAA8B,CAAC;IACtE,IAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,IAAM,aAAa,GAAG,WAAW,CAAC,cAAc,CAAC,CAAC;IAClD,IAAM,QAAQ,GAAG,UAAU,EAAE,CAAC;IACxB,IAAA,KAAoB,uBAAuB,CAAC,eAAe,CAAC,EAA3D,UAAU,QAAA,EAAE,GAAG,QAA4C,CAAC;IACnE,IAAM,SAAS,GAAG,YAAY,CAAC,GAAG,EAAE,iBAAiB,CAAC,CAAC;IAEvD,OAAO,CACL,sCACE,IAAI,EAAC,YAAY,gBACL,SAAS,qBACJ,cAAc,sBACb,eAAe,mBAClB,YAAY,IACvB,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,EACjD,GAAG,EAAE,SAAS;QAEd,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,iBAAU,QAAQ,CAAE,CAAC,CAAC,IAC/D,KAAK;YACJ,KAAK,CAAC,GAAG,CAAC,UAAA,IAAI,IAAI,OAAA,CAChB,oBAAC,IAAI,IACH,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,KAAK,EAC9B,IAAI,EAAE,aAAa,EACnB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,GAClB,CACH,EATiB,CASjB,CAAC,CACA,CACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { TilesProps } from './interfaces';\nimport styles from './styles.css.js';\n\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { Tile } from './tile';\n\nconst COLUMN_TRIGGERS: TilesProps.Breakpoint[] = ['default', 'xxs', 'xs'];\n\ntype InternalTilesProps = TilesProps & InternalBaseComponentProps;\n\nexport default function InternalTiles({\n  value,\n  items,\n  ariaLabel,\n  ariaRequired,\n  columns,\n  onChange,\n  __internalRootRef = null,\n  ...rest\n}: InternalTilesProps) {\n  const getColumns = () => {\n    if (columns) {\n      return columns;\n    }\n\n    const nItems = items ? items.length : 0;\n    const columnsLookup: Record<number, number> = {\n      0: 1,\n      1: 1,\n      2: 2,\n      4: 2,\n      8: 2,\n    };\n    return columnsLookup[nItems] || 3;\n  };\n  const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n  const baseProps = getBaseProps(rest);\n  const generatedName = useUniqueId('awsui-tiles-');\n  const nColumns = getColumns();\n  const [breakpoint, ref] = useContainerBreakpoints(COLUMN_TRIGGERS);\n  const mergedRef = useMergeRefs(ref, __internalRootRef);\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      aria-describedby={ariaDescribedby}\n      aria-required={ariaRequired}\n      {...baseProps}\n      className={clsx(baseProps.className, styles.root)}\n      ref={mergedRef}\n    >\n      <div className={clsx(styles.columns, styles[`column-${nColumns}`])}>\n        {items &&\n          items.map(item => (\n            <Tile\n              key={item.value}\n              item={item}\n              selected={item.value === value}\n              name={generatedName}\n              breakpoint={breakpoint}\n              onChange={onChange}\n            />\n          ))}\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/tiles/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { TilesProps } from './interfaces';\nimport styles from './styles.css.js';\n\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { Tile } from './tile';\nimport useRadioGroupForwardFocus from '../internal/hooks/forward-focus/radio-group';\n\nconst COLUMN_TRIGGERS: TilesProps.Breakpoint[] = ['default', 'xxs', 'xs'];\n\ntype InternalTilesProps = TilesProps & InternalBaseComponentProps;\n\nconst InternalTiles = React.forwardRef(\n  (\n    { value, items, ariaLabel, ariaRequired, columns, onChange, __internalRootRef = null, ...rest }: InternalTilesProps,\n    ref: React.Ref<TilesProps.Ref>\n  ) => {\n    const baseProps = getBaseProps(rest);\n    const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n    const generatedName = useUniqueId('awsui-tiles-');\n\n    const [tileRef, tileRefIndex] = useRadioGroupForwardFocus(ref, items, value);\n    const [breakpoint, breakpointRef] = useContainerBreakpoints(COLUMN_TRIGGERS);\n    const mergedRef = useMergeRefs(breakpointRef, __internalRootRef);\n\n    const columnCount = getColumnCount(items, columns);\n\n    return (\n      <div\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-describedby={ariaDescribedby}\n        aria-required={ariaRequired}\n        {...baseProps}\n        className={clsx(baseProps.className, styles.root)}\n        ref={mergedRef}\n      >\n        <div className={clsx(styles.columns, styles[`column-${columnCount}`])}>\n          {items &&\n            items.map((item, index) => (\n              <Tile\n                ref={index === tileRefIndex ? tileRef : undefined}\n                key={item.value}\n                item={item}\n                selected={item.value === value}\n                name={generatedName}\n                breakpoint={breakpoint}\n                onChange={onChange}\n              />\n            ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nfunction getColumnCount(\n  items: ReadonlyArray<TilesProps.TilesDefinition> | undefined,\n  columns: number | undefined\n): number {\n  if (columns) {\n    return columns;\n  }\n\n  const nItems = items ? items.length : 0;\n  const columnsLookup: Record<number, number> = {\n    0: 1,\n    1: 1,\n    2: 2,\n    4: 2,\n    8: 2,\n  };\n  return columnsLookup[nItems] || 3;\n}\n\nexport default InternalTiles;\n"]}

package/lib/internal/template/tiles/tile.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { TilesProps } from './interfaces';
 import { useContainerBreakpoints } from '../internal/hooks/container-queries';
 interface TileProps {
@@ -7,6 +8,6 @@ interface TileProps {
     breakpoint: ReturnType<typeof useContainerBreakpoints>[0];
     onChange: TilesProps['onChange'];
 }
-export declare function Tile({ item, selected, name, breakpoint, onChange }: TileProps): JSX.Element;
+export declare const Tile: React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLInputElement>>;
 export {};
 //# sourceMappingURL=tile.d.ts.map

package/lib/internal/template/tiles/tile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tile.d.ts","sourceRoot":"","sources":["../../../src/tiles/tile.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAG9E,UAAU,SAAS;IACjB,IAAI,EAAE,UAAU,CAAC,eAAe,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1D,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;CAClC;AAED,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,SAAS,eAuC7E"}
+{"version":3,"file":"tile.d.ts","sourceRoot":"","sources":["../../../src/tiles/tile.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAI9E,UAAU,SAAS;IACjB,IAAI,EAAE,UAAU,CAAC,eAAe,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1D,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;CAClC;AAED,eAAO,MAAM,IAAI,oFA2ChB,CAAC"}