@cloudscape-design/components-themeable 3.0.652 → 3.0.653

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/lib/internal/manifest.json +1 -1
  2. package/lib/internal/scss/app-layout/skeleton/styles.scss +82 -0
  3. package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +51 -51
  4. package/lib/internal/scss/split-panel/styles.scss +1 -0
  5. package/lib/internal/template/annotation-context/annotation/styles.css.js +24 -24
  6. package/lib/internal/template/annotation-context/annotation/styles.scoped.css +31 -31
  7. package/lib/internal/template/annotation-context/annotation/styles.selectors.js +24 -24
  8. package/lib/internal/template/app-layout/notifications/styles.css.js +3 -3
  9. package/lib/internal/template/app-layout/notifications/styles.scoped.css +7 -7
  10. package/lib/internal/template/app-layout/notifications/styles.selectors.js +3 -3
  11. package/lib/internal/template/app-layout/skeleton/index.d.ts +4 -0
  12. package/lib/internal/template/app-layout/skeleton/index.d.ts.map +1 -0
  13. package/lib/internal/template/app-layout/skeleton/index.js +10 -0
  14. package/lib/internal/template/app-layout/skeleton/index.js.map +1 -0
  15. package/lib/internal/template/app-layout/skeleton/layout.d.ts +8 -0
  16. package/lib/internal/template/app-layout/skeleton/layout.d.ts.map +1 -0
  17. package/lib/internal/template/app-layout/skeleton/layout.js +27 -0
  18. package/lib/internal/template/app-layout/skeleton/layout.js.map +1 -0
  19. package/lib/internal/template/app-layout/skeleton/styles.css.js +16 -0
  20. package/lib/internal/template/app-layout/skeleton/styles.scoped.css +180 -0
  21. package/lib/internal/template/app-layout/skeleton/styles.selectors.js +17 -0
  22. package/lib/internal/template/app-layout/visual-refresh/styles.css.js +81 -81
  23. package/lib/internal/template/app-layout/visual-refresh/styles.scoped.css +258 -258
  24. package/lib/internal/template/app-layout/visual-refresh/styles.selectors.js +81 -81
  25. package/lib/internal/template/flashbar/styles.css.js +47 -47
  26. package/lib/internal/template/flashbar/styles.scoped.css +171 -171
  27. package/lib/internal/template/flashbar/styles.selectors.js +47 -47
  28. package/lib/internal/template/internal/base-component/styles.scoped.css +3 -0
  29. package/lib/internal/template/internal/components/dropdown/styles.css.js +20 -20
  30. package/lib/internal/template/internal/components/dropdown/styles.scoped.css +41 -41
  31. package/lib/internal/template/internal/components/dropdown/styles.selectors.js +20 -20
  32. package/lib/internal/template/internal/environment.js +1 -1
  33. package/lib/internal/template/internal/environment.json +1 -1
  34. package/lib/internal/template/internal/generated/custom-css-properties/index.js +51 -51
  35. package/lib/internal/template/internal/generated/custom-css-properties/index.js.map +1 -1
  36. package/lib/internal/template/internal/generated/styles/tokens.d.ts +1 -0
  37. package/lib/internal/template/internal/generated/styles/tokens.js +1 -0
  38. package/lib/internal/template/internal/generated/theming/index.cjs +11 -0
  39. package/lib/internal/template/internal/generated/theming/index.js +11 -0
  40. package/lib/internal/template/internal/hooks/use-performance-marks.d.ts.map +1 -1
  41. package/lib/internal/template/internal/hooks/use-performance-marks.js +4 -2
  42. package/lib/internal/template/internal/hooks/use-performance-marks.js.map +1 -1
  43. package/lib/internal/template/internal/utils/dom.d.ts.map +1 -1
  44. package/lib/internal/template/internal/utils/dom.js +3 -1
  45. package/lib/internal/template/internal/utils/dom.js.map +1 -1
  46. package/lib/internal/template/slider/styles.css.js +25 -25
  47. package/lib/internal/template/slider/styles.scoped.css +71 -71
  48. package/lib/internal/template/slider/styles.selectors.js +25 -25
  49. package/lib/internal/template/spinner/styles.css.js +13 -13
  50. package/lib/internal/template/spinner/styles.scoped.css +39 -39
  51. package/lib/internal/template/spinner/styles.selectors.js +13 -13
  52. package/lib/internal/template/split-panel/styles.css.js +57 -57
  53. package/lib/internal/template/split-panel/styles.scoped.css +78 -77
  54. package/lib/internal/template/split-panel/styles.selectors.js +57 -57
  55. package/package.json +1 -1
package/lib/internal/manifest.json CHANGED
@@ -1,3 +1,3 @@
1
1
  {
2
- "commit": "9bc6032bbd39139f58508164f6e4659c3a7a2f32"
2
+ "commit": "0968bb6fcef93e54e3b891fa984fa5c13ab68216"
3
3
  }
package/lib/internal/scss/app-layout/skeleton/styles.scss ADDED
@@ -0,0 +1,82 @@
1
+ /*
2
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
3
+ SPDX-License-Identifier: Apache-2.0
4
+ */
5
+ @use '../../internal/styles' as styles;
6
+ @use '../../internal/styles/tokens' as awsui;
7
+ @use '../../internal/generated/custom-css-properties/index.scss' as custom-props;
8
+ @use '../constants' as constants;
9
+
10
+ .root {
11
+ #{custom-props.$maxContentWidth}: 100%;
12
+ display: grid;
13
+ grid-template-areas:
14
+ 'navigation topBar topBar topBar tools'
15
+ 'navigation . notifications . tools'
16
+ 'navigation . main . tools';
17
+ grid-template-columns:
18
+ min-content
19
+ minmax(#{awsui.$space-layout-content-horizontal}, 1fr)
20
+ minmax(var(#{custom-props.$minContentWidth}), var(#{custom-props.$maxContentWidth}))
21
+ minmax(#{awsui.$space-layout-content-horizontal}, 1fr)
22
+ min-content;
23
+ grid-template-rows: min-content min-content 1fr min-content;
24
+
25
+ &.has-adaptive-widths-default {
26
+ @each $breakpoint, $width in constants.$adaptive-content-widths {
27
+ @include styles.media-breakpoint-up($breakpoint) {
28
+ #{custom-props.$maxContentWidth}: $width;
29
+ }
30
+ }
31
+ }
32
+
33
+ &.has-adaptive-widths-dashboard {
34
+ @each $breakpoint, $width in constants.$dashboard-content-widths {
35
+ @include styles.media-breakpoint-up($breakpoint) {
36
+ #{custom-props.$maxContentWidth}: $width;
37
+ }
38
+ }
39
+ }
40
+ }
41
+
42
+ .main-landmark {
43
+ // does not participate in the layout, rendered for accessibility grouping
44
+ display: contents;
45
+ }
46
+
47
+ .navigation {
48
+ grid-area: navigation;
49
+ border-inline-end: 1px solid awsui.$color-border-divider-panel-side;
50
+ }
51
+
52
+ .tools {
53
+ grid-area: tools;
54
+ border-inline-start: 1px solid awsui.$color-border-divider-panel-side;
55
+ }
56
+
57
+ .top-bar {
58
+ grid-area: topBar;
59
+ block-size: 48px;
60
+ border-block-end: 1px solid awsui.$color-border-divider-panel-bottom;
61
+ }
62
+
63
+ .notifications {
64
+ grid-area: notifications;
65
+ &:not(:empty) {
66
+ padding-block-start: awsui.$space-scaled-xs;
67
+ }
68
+ }
69
+
70
+ .main {
71
+ grid-area: main;
72
+ margin-block-start: awsui.$space-scaled-s;
73
+ margin-block-end: awsui.$space-layout-content-bottom;
74
+ &-disable-paddings {
75
+ grid-column: 2 / span 3;
76
+ margin-block: 0;
77
+ }
78
+ }
79
+
80
+ .content-header {
81
+ margin-block-end: awsui.$space-content-header-padding-bottom;
82
+ }
package/lib/internal/scss/internal/generated/custom-css-properties/index.scss CHANGED
@@ -1,53 +1,53 @@
1
1
 
2
- $breadcrumbsGap: --awsui-breadcrumbs-gap-tkr9yl;
3
- $contentGapLeft: --awsui-content-gap-left-tkr9yl;
4
- $contentGapRight: --awsui-content-gap-right-tkr9yl;
5
- $contentHeight: --awsui-content-height-tkr9yl;
6
- $defaultMaxContentWidth: --awsui-default-max-content-width-tkr9yl;
7
- $defaultMinContentWidth: --awsui-default-min-content-width-tkr9yl;
8
- $drawerSize: --awsui-drawer-size-tkr9yl;
9
- $footerHeight: --awsui-footer-height-tkr9yl;
10
- $headerGap: --awsui-header-gap-tkr9yl;
11
- $headerHeight: --awsui-header-height-tkr9yl;
12
- $layoutWidth: --awsui-layout-width-tkr9yl;
13
- $mainGap: --awsui-main-gap-tkr9yl;
14
- $mainOffsetLeft: --awsui-main-offset-left-tkr9yl;
15
- $mainTemplateRows: --awsui-main-template-rows-tkr9yl;
16
- $maxContentWidth: --awsui-max-content-width-tkr9yl;
17
- $minContentWidth: --awsui-min-content-width-tkr9yl;
18
- $mobileBarHeight: --awsui-mobile-bar-height-tkr9yl;
19
- $notificationsGap: --awsui-notifications-gap-tkr9yl;
20
- $notificationsHeight: --awsui-notifications-height-tkr9yl;
21
- $offsetTop: --awsui-offset-top-tkr9yl;
22
- $overlapHeight: --awsui-overlap-height-tkr9yl;
23
- $navigationWidth: --awsui-navigation-width-tkr9yl;
24
- $splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-tkr9yl;
25
- $splitPanelReportedSize: --awsui-split-panel-reported-size-tkr9yl;
26
- $splitPanelHeight: --awsui-split-panel-height-tkr9yl;
27
- $splitPanelMinWidth: --awsui-split-panel-min-width-tkr9yl;
28
- $splitPanelMaxWidth: --awsui-split-panel-max-width-tkr9yl;
29
- $toolsMaxWidth: --awsui-tools-max-width-tkr9yl;
30
- $toolsWidth: --awsui-tools-width-tkr9yl;
31
- $toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-tkr9yl;
32
- $contentScrollMargin: --awsui-content-scroll-margin-tkr9yl;
33
- $flashbarStackDepth: --awsui-flashbar-stack-depth-tkr9yl;
34
- $flashbarStackIndex: --awsui-flashbar-stack-index-tkr9yl;
35
- $flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-tkr9yl;
36
- $stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-tkr9yl;
37
- $stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-tkr9yl;
38
- $dropdownDefaultMaxWidth: --awsui-dropdown-default-max-width-tkr9yl;
39
- $spinnerRotatorFrom: --awsui-spinner-rotator-from-tkr9yl;
40
- $spinnerRotatorTo: --awsui-spinner-rotator-to-tkr9yl;
41
- $spinnerLineLeftFrom: --awsui-spinner-line-left-from-tkr9yl;
42
- $spinnerLineLeftTo: --awsui-spinner-line-left-to-tkr9yl;
43
- $spinnerLineRightFrom: --awsui-spinner-line-right-from-tkr9yl;
44
- $spinnerLineRightTo: --awsui-spinner-line-right-to-tkr9yl;
45
- $sliderLabelCount: --awsui-slider-label-count-tkr9yl;
46
- $sliderTickCount: --awsui-slider-tick-count-tkr9yl;
47
- $sliderReferenceColumn: --awsui-slider-reference-column-tkr9yl;
48
- $sliderNextReferenceColumn: --awsui-slider-next-reference-column-tkr9yl;
49
- $sliderMaxStart: --awsui-slider-max-start-tkr9yl;
50
- $sliderMinEnd: --awsui-slider-min-end-tkr9yl;
51
- $sliderRangeInlineSize: --awsui-slider-range-inline-size-tkr9yl;
52
- $sliderTooltipPosition: --awsui-slider-tooltip-position-tkr9yl;
2
+ $maxContentWidth: --awsui-max-content-width-epuq3n;
3
+ $minContentWidth: --awsui-min-content-width-epuq3n;
4
+ $breadcrumbsGap: --awsui-breadcrumbs-gap-epuq3n;
5
+ $contentGapLeft: --awsui-content-gap-left-epuq3n;
6
+ $contentGapRight: --awsui-content-gap-right-epuq3n;
7
+ $contentHeight: --awsui-content-height-epuq3n;
8
+ $defaultMaxContentWidth: --awsui-default-max-content-width-epuq3n;
9
+ $defaultMinContentWidth: --awsui-default-min-content-width-epuq3n;
10
+ $drawerSize: --awsui-drawer-size-epuq3n;
11
+ $footerHeight: --awsui-footer-height-epuq3n;
12
+ $headerGap: --awsui-header-gap-epuq3n;
13
+ $headerHeight: --awsui-header-height-epuq3n;
14
+ $layoutWidth: --awsui-layout-width-epuq3n;
15
+ $mainGap: --awsui-main-gap-epuq3n;
16
+ $mainOffsetLeft: --awsui-main-offset-left-epuq3n;
17
+ $mainTemplateRows: --awsui-main-template-rows-epuq3n;
18
+ $mobileBarHeight: --awsui-mobile-bar-height-epuq3n;
19
+ $notificationsGap: --awsui-notifications-gap-epuq3n;
20
+ $notificationsHeight: --awsui-notifications-height-epuq3n;
21
+ $offsetTop: --awsui-offset-top-epuq3n;
22
+ $overlapHeight: --awsui-overlap-height-epuq3n;
23
+ $navigationWidth: --awsui-navigation-width-epuq3n;
24
+ $splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-epuq3n;
25
+ $splitPanelReportedSize: --awsui-split-panel-reported-size-epuq3n;
26
+ $splitPanelHeight: --awsui-split-panel-height-epuq3n;
27
+ $splitPanelMinWidth: --awsui-split-panel-min-width-epuq3n;
28
+ $splitPanelMaxWidth: --awsui-split-panel-max-width-epuq3n;
29
+ $toolsMaxWidth: --awsui-tools-max-width-epuq3n;
30
+ $toolsWidth: --awsui-tools-width-epuq3n;
31
+ $toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-epuq3n;
32
+ $contentScrollMargin: --awsui-content-scroll-margin-epuq3n;
33
+ $flashbarStackDepth: --awsui-flashbar-stack-depth-epuq3n;
34
+ $flashbarStackIndex: --awsui-flashbar-stack-index-epuq3n;
35
+ $flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-epuq3n;
36
+ $stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-epuq3n;
37
+ $stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-epuq3n;
38
+ $dropdownDefaultMaxWidth: --awsui-dropdown-default-max-width-epuq3n;
39
+ $spinnerRotatorFrom: --awsui-spinner-rotator-from-epuq3n;
40
+ $spinnerRotatorTo: --awsui-spinner-rotator-to-epuq3n;
41
+ $spinnerLineLeftFrom: --awsui-spinner-line-left-from-epuq3n;
42
+ $spinnerLineLeftTo: --awsui-spinner-line-left-to-epuq3n;
43
+ $spinnerLineRightFrom: --awsui-spinner-line-right-from-epuq3n;
44
+ $spinnerLineRightTo: --awsui-spinner-line-right-to-epuq3n;
45
+ $sliderLabelCount: --awsui-slider-label-count-epuq3n;
46
+ $sliderTickCount: --awsui-slider-tick-count-epuq3n;
47
+ $sliderReferenceColumn: --awsui-slider-reference-column-epuq3n;
48
+ $sliderNextReferenceColumn: --awsui-slider-next-reference-column-epuq3n;
49
+ $sliderMaxStart: --awsui-slider-max-start-epuq3n;
50
+ $sliderMinEnd: --awsui-slider-min-end-epuq3n;
51
+ $sliderRangeInlineSize: --awsui-slider-range-inline-size-epuq3n;
52
+ $sliderTooltipPosition: --awsui-slider-tooltip-position-epuq3n;
53
53
 
package/lib/internal/scss/split-panel/styles.scss CHANGED
@@ -260,6 +260,7 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
260
260
  padding-inline-start: awsui.$space-panel-side-left;
261
261
  padding-inline-end: awsui.$space-panel-side-right;
262
262
  margin-block-start: awsui.$space-panel-split-top;
263
+ margin-block-end: awsui.$space-panel-split-bottom;
263
264
  }
264
265
  }
265
266
 
package/lib/internal/template/annotation-context/annotation/styles.css.js CHANGED
@@ -1,29 +1,29 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "arrow": "awsui_arrow_1hpp3_1i3yr_99",
5
- "arrow-outer": "awsui_arrow-outer_1hpp3_1i3yr_103",
6
- "arrow-inner": "awsui_arrow-inner_1hpp3_1i3yr_103",
7
- "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1i3yr_144",
8
- "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1i3yr_144",
9
- "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1i3yr_147",
10
- "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1i3yr_147",
11
- "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1i3yr_150",
12
- "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1i3yr_150",
13
- "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1i3yr_153",
14
- "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1i3yr_153",
15
- "annotation": "awsui_annotation_1hpp3_1i3yr_161",
16
- "next-button": "awsui_next-button_1hpp3_1i3yr_162",
17
- "previous-button": "awsui_previous-button_1hpp3_1i3yr_163",
18
- "finish-button": "awsui_finish-button_1hpp3_1i3yr_164",
19
- "header": "awsui_header_1hpp3_1i3yr_165",
20
- "step-counter-content": "awsui_step-counter-content_1hpp3_1i3yr_166",
21
- "content": "awsui_content_1hpp3_1i3yr_167",
22
- "description": "awsui_description_1hpp3_1i3yr_171",
23
- "actionBar": "awsui_actionBar_1hpp3_1i3yr_176",
24
- "stepCounter": "awsui_stepCounter_1hpp3_1i3yr_183",
25
- "divider": "awsui_divider_1hpp3_1i3yr_187",
26
- "hotspot": "awsui_hotspot_1hpp3_1i3yr_191",
27
- "icon": "awsui_icon_1hpp3_1i3yr_258"
4
+ "arrow": "awsui_arrow_1hpp3_10j5l_99",
5
+ "arrow-outer": "awsui_arrow-outer_1hpp3_10j5l_103",
6
+ "arrow-inner": "awsui_arrow-inner_1hpp3_10j5l_103",
7
+ "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_10j5l_144",
8
+ "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_10j5l_144",
9
+ "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_10j5l_147",
10
+ "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_10j5l_147",
11
+ "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_10j5l_150",
12
+ "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_10j5l_150",
13
+ "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_10j5l_153",
14
+ "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_10j5l_153",
15
+ "annotation": "awsui_annotation_1hpp3_10j5l_161",
16
+ "next-button": "awsui_next-button_1hpp3_10j5l_162",
17
+ "previous-button": "awsui_previous-button_1hpp3_10j5l_163",
18
+ "finish-button": "awsui_finish-button_1hpp3_10j5l_164",
19
+ "header": "awsui_header_1hpp3_10j5l_165",
20
+ "step-counter-content": "awsui_step-counter-content_1hpp3_10j5l_166",
21
+ "content": "awsui_content_1hpp3_10j5l_167",
22
+ "description": "awsui_description_1hpp3_10j5l_171",
23
+ "actionBar": "awsui_actionBar_1hpp3_10j5l_176",
24
+ "stepCounter": "awsui_stepCounter_1hpp3_10j5l_183",
25
+ "divider": "awsui_divider_1hpp3_10j5l_187",
26
+ "hotspot": "awsui_hotspot_1hpp3_10j5l_191",
27
+ "icon": "awsui_icon_1hpp3_10j5l_258"
28
28
  };
29
29
 
package/lib/internal/template/annotation-context/annotation/styles.scoped.css CHANGED
@@ -96,11 +96,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
96
96
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
97
97
  SPDX-License-Identifier: Apache-2.0
98
98
  */
99
- .awsui_arrow_1hpp3_1i3yr_99:not(#\9) {
99
+ .awsui_arrow_1hpp3_10j5l_99:not(#\9) {
100
100
  inline-size: 20px;
101
101
  block-size: 10px;
102
102
  }
103
- .awsui_arrow-outer_1hpp3_1i3yr_103:not(#\9), .awsui_arrow-inner_1hpp3_1i3yr_103:not(#\9) {
103
+ .awsui_arrow-outer_1hpp3_10j5l_103:not(#\9), .awsui_arrow-inner_1hpp3_10j5l_103:not(#\9) {
104
104
  position: absolute;
105
105
  overflow: hidden;
106
106
  inline-size: 20px;
@@ -108,7 +108,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
108
108
  inset-block-start: 0;
109
109
  inset-inline-start: 0;
110
110
  }
111
- .awsui_arrow-outer_1hpp3_1i3yr_103:not(#\9)::after, .awsui_arrow-inner_1hpp3_1i3yr_103:not(#\9)::after {
111
+ .awsui_arrow-outer_1hpp3_10j5l_103:not(#\9)::after, .awsui_arrow-inner_1hpp3_10j5l_103:not(#\9)::after {
112
112
  content: "";
113
113
  box-sizing: border-box;
114
114
  display: inline-block;
@@ -124,33 +124,33 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
124
124
  transform: rotate(45deg);
125
125
  transform-origin: 0 100%;
126
126
  }
127
- .awsui_arrow-outer_1hpp3_1i3yr_103:not(#\9):dir(rtl)::after, .awsui_arrow-inner_1hpp3_1i3yr_103:not(#\9):dir(rtl)::after {
127
+ .awsui_arrow-outer_1hpp3_10j5l_103:not(#\9):dir(rtl)::after, .awsui_arrow-inner_1hpp3_10j5l_103:not(#\9):dir(rtl)::after {
128
128
  transform: rotate(-45deg);
129
129
  transform-origin: 100% 100%;
130
130
  }
131
- .awsui_arrow-outer_1hpp3_1i3yr_103:not(#\9)::after {
131
+ .awsui_arrow-outer_1hpp3_10j5l_103:not(#\9)::after {
132
132
  background-color: var(--color-border-status-info-q9np44, #0073bb);
133
133
  }
134
- .awsui_arrow-inner_1hpp3_1i3yr_103:not(#\9) {
134
+ .awsui_arrow-inner_1hpp3_10j5l_103:not(#\9) {
135
135
  inset-block-start: 2px;
136
136
  }
137
- .awsui_arrow-inner_1hpp3_1i3yr_103:not(#\9)::after {
137
+ .awsui_arrow-inner_1hpp3_10j5l_103:not(#\9)::after {
138
138
  border-start-start-radius: 1px;
139
139
  border-start-end-radius: 0;
140
140
  border-end-start-radius: 0;
141
141
  border-end-end-radius: 0;
142
142
  background-color: var(--color-background-status-info-pgxhez, #f1faff);
143
143
  }
144
- .awsui_arrow-position-right-top_1hpp3_1i3yr_144 > .awsui_arrow-outer_1hpp3_1i3yr_103:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_1i3yr_144 > .awsui_arrow-outer_1hpp3_1i3yr_103:not(#\9)::after {
144
+ .awsui_arrow-position-right-top_1hpp3_10j5l_144 > .awsui_arrow-outer_1hpp3_10j5l_103:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_10j5l_144 > .awsui_arrow-outer_1hpp3_10j5l_103:not(#\9)::after {
145
145
  box-shadow: -0.71px 0.71px 4px -2px var(--color-shadow-default-9hs6xx, rgba(0, 28, 36, 0.5));
146
146
  }
147
- .awsui_arrow-position-left-top_1hpp3_1i3yr_147 > .awsui_arrow-outer_1hpp3_1i3yr_103:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_1i3yr_147 > .awsui_arrow-outer_1hpp3_1i3yr_103:not(#\9)::after {
147
+ .awsui_arrow-position-left-top_1hpp3_10j5l_147 > .awsui_arrow-outer_1hpp3_10j5l_103:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_10j5l_147 > .awsui_arrow-outer_1hpp3_10j5l_103:not(#\9)::after {
148
148
  box-shadow: 0.71px -0.71px 4px -2px var(--color-shadow-default-9hs6xx, rgba(0, 28, 36, 0.5));
149
149
  }
150
- .awsui_arrow-position-top-center_1hpp3_1i3yr_150 > .awsui_arrow-outer_1hpp3_1i3yr_103:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_1i3yr_150 > .awsui_arrow-outer_1hpp3_1i3yr_103:not(#\9)::after {
150
+ .awsui_arrow-position-top-center_1hpp3_10j5l_150 > .awsui_arrow-outer_1hpp3_10j5l_103:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_10j5l_150 > .awsui_arrow-outer_1hpp3_10j5l_103:not(#\9)::after {
151
151
  box-shadow: -0.71px -0.71px 4px -2px var(--color-shadow-default-9hs6xx, rgba(0, 28, 36, 0.5));
152
152
  }
153
- .awsui_arrow-position-bottom-center_1hpp3_1i3yr_153 > .awsui_arrow-outer_1hpp3_1i3yr_103:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_1i3yr_153 > .awsui_arrow-outer_1hpp3_1i3yr_103:not(#\9)::after {
153
+ .awsui_arrow-position-bottom-center_1hpp3_10j5l_153 > .awsui_arrow-outer_1hpp3_10j5l_103:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_10j5l_153 > .awsui_arrow-outer_1hpp3_10j5l_103:not(#\9)::after {
154
154
  box-shadow: 0.71px 0.71px 4px -2px var(--color-shadow-default-9hs6xx, rgba(0, 28, 36, 0.5));
155
155
  }
156
156
 
@@ -158,37 +158,37 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
158
158
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
159
159
  SPDX-License-Identifier: Apache-2.0
160
160
  */
161
- .awsui_annotation_1hpp3_1i3yr_161:not(#\9),
162
- .awsui_next-button_1hpp3_1i3yr_162:not(#\9),
163
- .awsui_previous-button_1hpp3_1i3yr_163:not(#\9),
164
- .awsui_finish-button_1hpp3_1i3yr_164:not(#\9),
165
- .awsui_header_1hpp3_1i3yr_165:not(#\9),
166
- .awsui_step-counter-content_1hpp3_1i3yr_166:not(#\9),
167
- .awsui_content_1hpp3_1i3yr_167:not(#\9) {
161
+ .awsui_annotation_1hpp3_10j5l_161:not(#\9),
162
+ .awsui_next-button_1hpp3_10j5l_162:not(#\9),
163
+ .awsui_previous-button_1hpp3_10j5l_163:not(#\9),
164
+ .awsui_finish-button_1hpp3_10j5l_164:not(#\9),
165
+ .awsui_header_1hpp3_10j5l_165:not(#\9),
166
+ .awsui_step-counter-content_1hpp3_10j5l_166:not(#\9),
167
+ .awsui_content_1hpp3_10j5l_167:not(#\9) {
168
168
  /* used in test-utils */
169
169
  }
170
170
 
171
- .awsui_description_1hpp3_1i3yr_171:not(#\9) {
171
+ .awsui_description_1hpp3_10j5l_171:not(#\9) {
172
172
  overflow: hidden;
173
173
  margin-block-start: var(--space-xxs-9rrxti, 4px);
174
174
  }
175
175
 
176
- .awsui_actionBar_1hpp3_1i3yr_176:not(#\9) {
176
+ .awsui_actionBar_1hpp3_10j5l_176:not(#\9) {
177
177
  display: flex;
178
178
  justify-content: space-between;
179
179
  align-items: center;
180
180
  position: relative;
181
181
  }
182
182
 
183
- .awsui_stepCounter_1hpp3_1i3yr_183:not(#\9) {
183
+ .awsui_stepCounter_1hpp3_10j5l_183:not(#\9) {
184
184
  margin-inline-end: 20px;
185
185
  }
186
186
 
187
- .awsui_divider_1hpp3_1i3yr_187:not(#\9) {
187
+ .awsui_divider_1hpp3_10j5l_187:not(#\9) {
188
188
  border-block-end: var(--border-divider-section-width-wl9k66, 1px) solid var(--color-border-divider-default-in8dkg, #eaeded);
189
189
  }
190
190
 
191
- .awsui_hotspot_1hpp3_1i3yr_191:not(#\9) {
191
+ .awsui_hotspot_1hpp3_10j5l_191:not(#\9) {
192
192
  border-collapse: separate;
193
193
  border-spacing: 0;
194
194
  box-sizing: border-box;
@@ -228,21 +228,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
228
228
  padding-block: 0;
229
229
  padding-inline: 0;
230
230
  cursor: pointer;
231
- scroll-margin: var(--awsui-content-scroll-margin-tkr9yl, 40px 0 0 0);
231
+ scroll-margin: var(--awsui-content-scroll-margin-epuq3n, 40px 0 0 0);
232
232
  inline-size: 16px;
233
233
  block-size: 16px;
234
234
  }
235
- .awsui_hotspot_1hpp3_1i3yr_191:not(#\9):focus {
235
+ .awsui_hotspot_1hpp3_10j5l_191:not(#\9):focus {
236
236
  outline: none;
237
237
  }
238
- body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1i3yr_191:not(#\9):focus {
238
+ body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_10j5l_191:not(#\9):focus {
239
239
  position: relative;
240
240
  }
241
- body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1i3yr_191:not(#\9):focus {
241
+ body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_10j5l_191:not(#\9):focus {
242
242
  outline: 2px dotted transparent;
243
243
  outline-offset: calc(2px - 1px);
244
244
  }
245
- body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1i3yr_191:not(#\9):focus::before {
245
+ body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_10j5l_191:not(#\9):focus::before {
246
246
  content: " ";
247
247
  display: block;
248
248
  position: absolute;
@@ -256,13 +256,13 @@ body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1i3yr_191:not(#\9):focu
256
256
  border-end-end-radius: var(--border-radius-control-circular-focus-ring-mxepal, 50%);
257
257
  box-shadow: 0 0 0 2px var(--color-border-item-focused-v8nq2m, #0073bb);
258
258
  }
259
- .awsui_hotspot_1hpp3_1i3yr_191 > .awsui_icon_1hpp3_1i3yr_258:not(#\9) {
259
+ .awsui_hotspot_1hpp3_10j5l_191 > .awsui_icon_1hpp3_10j5l_258:not(#\9) {
260
260
  position: relative;
261
261
  stroke: var(--color-text-link-default-hop3gv, #0073bb);
262
262
  }
263
- .awsui_hotspot_1hpp3_1i3yr_191:not(#\9):hover > .awsui_icon_1hpp3_1i3yr_258 {
263
+ .awsui_hotspot_1hpp3_10j5l_191:not(#\9):hover > .awsui_icon_1hpp3_10j5l_258 {
264
264
  stroke: var(--color-text-link-hover-8s5z9d, #0a4a74);
265
265
  }
266
- .awsui_hotspot_1hpp3_1i3yr_191:not(#\9):active > .awsui_icon_1hpp3_1i3yr_258 {
266
+ .awsui_hotspot_1hpp3_10j5l_191:not(#\9):active > .awsui_icon_1hpp3_10j5l_258 {
267
267
  stroke: var(--color-text-link-default-hop3gv, #0073bb);
268
268
  }
package/lib/internal/template/annotation-context/annotation/styles.selectors.js CHANGED
@@ -2,29 +2,29 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "arrow": "awsui_arrow_1hpp3_1i3yr_99",
6
- "arrow-outer": "awsui_arrow-outer_1hpp3_1i3yr_103",
7
- "arrow-inner": "awsui_arrow-inner_1hpp3_1i3yr_103",
8
- "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1i3yr_144",
9
- "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1i3yr_144",
10
- "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1i3yr_147",
11
- "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1i3yr_147",
12
- "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1i3yr_150",
13
- "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1i3yr_150",
14
- "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1i3yr_153",
15
- "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1i3yr_153",
16
- "annotation": "awsui_annotation_1hpp3_1i3yr_161",
17
- "next-button": "awsui_next-button_1hpp3_1i3yr_162",
18
- "previous-button": "awsui_previous-button_1hpp3_1i3yr_163",
19
- "finish-button": "awsui_finish-button_1hpp3_1i3yr_164",
20
- "header": "awsui_header_1hpp3_1i3yr_165",
21
- "step-counter-content": "awsui_step-counter-content_1hpp3_1i3yr_166",
22
- "content": "awsui_content_1hpp3_1i3yr_167",
23
- "description": "awsui_description_1hpp3_1i3yr_171",
24
- "actionBar": "awsui_actionBar_1hpp3_1i3yr_176",
25
- "stepCounter": "awsui_stepCounter_1hpp3_1i3yr_183",
26
- "divider": "awsui_divider_1hpp3_1i3yr_187",
27
- "hotspot": "awsui_hotspot_1hpp3_1i3yr_191",
28
- "icon": "awsui_icon_1hpp3_1i3yr_258"
5
+ "arrow": "awsui_arrow_1hpp3_10j5l_99",
6
+ "arrow-outer": "awsui_arrow-outer_1hpp3_10j5l_103",
7
+ "arrow-inner": "awsui_arrow-inner_1hpp3_10j5l_103",
8
+ "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_10j5l_144",
9
+ "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_10j5l_144",
10
+ "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_10j5l_147",
11
+ "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_10j5l_147",
12
+ "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_10j5l_150",
13
+ "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_10j5l_150",
14
+ "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_10j5l_153",
15
+ "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_10j5l_153",
16
+ "annotation": "awsui_annotation_1hpp3_10j5l_161",
17
+ "next-button": "awsui_next-button_1hpp3_10j5l_162",
18
+ "previous-button": "awsui_previous-button_1hpp3_10j5l_163",
19
+ "finish-button": "awsui_finish-button_1hpp3_10j5l_164",
20
+ "header": "awsui_header_1hpp3_10j5l_165",
21
+ "step-counter-content": "awsui_step-counter-content_1hpp3_10j5l_166",
22
+ "content": "awsui_content_1hpp3_10j5l_167",
23
+ "description": "awsui_description_1hpp3_10j5l_171",
24
+ "actionBar": "awsui_actionBar_1hpp3_10j5l_176",
25
+ "stepCounter": "awsui_stepCounter_1hpp3_10j5l_183",
26
+ "divider": "awsui_divider_1hpp3_10j5l_187",
27
+ "hotspot": "awsui_hotspot_1hpp3_10j5l_191",
28
+ "icon": "awsui_icon_1hpp3_10j5l_258"
29
29
  };
30
30
 
package/lib/internal/template/app-layout/notifications/styles.css.js CHANGED
@@ -1,8 +1,8 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "notifications": "awsui_notifications_1hmm4_1jlfr_9",
5
- "notifications-sticky": "awsui_notifications-sticky_1hmm4_1jlfr_10",
6
- "no-content-paddings": "awsui_no-content-paddings_1hmm4_1jlfr_25"
4
+ "notifications": "awsui_notifications_1hmm4_x4f5k_9",
5
+ "notifications-sticky": "awsui_notifications-sticky_1hmm4_x4f5k_10",
6
+ "no-content-paddings": "awsui_no-content-paddings_1hmm4_x4f5k_25"
7
7
  };
8
8
 
package/lib/internal/template/app-layout/notifications/styles.scoped.css CHANGED
@@ -6,26 +6,26 @@
6
6
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
7
7
  SPDX-License-Identifier: Apache-2.0
8
8
  */
9
- .awsui_notifications_1hmm4_1jlfr_9:not(#\9),
10
- .awsui_notifications-sticky_1hmm4_1jlfr_10:not(#\9) {
9
+ .awsui_notifications_1hmm4_x4f5k_9:not(#\9),
10
+ .awsui_notifications-sticky_1hmm4_x4f5k_10:not(#\9) {
11
11
  z-index: 850;
12
12
  }
13
13
 
14
- .awsui_notifications_1hmm4_1jlfr_9:not(#\9) {
14
+ .awsui_notifications_1hmm4_x4f5k_9:not(#\9) {
15
15
  /* This is necessary for the z-index to have effect */
16
16
  position: relative;
17
17
  }
18
18
 
19
- .awsui_notifications-sticky_1hmm4_1jlfr_10:not(#\9) {
19
+ .awsui_notifications-sticky_1hmm4_x4f5k_10:not(#\9) {
20
20
  inset-block-start: 0;
21
21
  position: sticky;
22
- --awsui-flashbar-sticky-bottom-margin-tkr9yl: var(--space-xxl-pd3205, 32px);
22
+ --awsui-flashbar-sticky-bottom-margin-epuq3n: var(--space-xxl-pd3205, 32px);
23
23
  }
24
24
 
25
- .awsui_no-content-paddings_1hmm4_1jlfr_25:not(#\9) {
25
+ .awsui_no-content-paddings_1hmm4_x4f5k_25:not(#\9) {
26
26
  /*
27
27
  When using the disableContentPaddings option, the Flashbar will use this custom property to add additional space
28
28
  when the notification bar is rendered, to prevent it from overlapping the content.
29
29
  */
30
- --awsui-stacked-notifications-bottom-margin-tkr9yl: var(--space-scaled-l-08jb88, 20px);
30
+ --awsui-stacked-notifications-bottom-margin-epuq3n: var(--space-scaled-l-08jb88, 20px);
31
31
  }
package/lib/internal/template/app-layout/notifications/styles.selectors.js CHANGED
@@ -2,8 +2,8 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "notifications": "awsui_notifications_1hmm4_1jlfr_9",
6
- "notifications-sticky": "awsui_notifications-sticky_1hmm4_1jlfr_10",
7
- "no-content-paddings": "awsui_no-content-paddings_1hmm4_1jlfr_25"
5
+ "notifications": "awsui_notifications_1hmm4_x4f5k_9",
6
+ "notifications-sticky": "awsui_notifications-sticky_1hmm4_x4f5k_10",
7
+ "no-content-paddings": "awsui_no-content-paddings_1hmm4_x4f5k_25"
8
8
  };
9
9
 
package/lib/internal/template/app-layout/skeleton/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import { AppLayoutPropsWithDefaults } from '../interfaces';
3
+ export declare function AppLayoutSkeleton({ notifications, contentHeader, content, navigation, navigationHide, navigationOpen, navigationWidth, tools, toolsHide, toolsOpen, toolsWidth, placement, contentType, maxContentWidth, minContentWidth, disableContentPaddings, }: AppLayoutPropsWithDefaults): JSX.Element;
4
+ //# sourceMappingURL=index.d.ts.map
package/lib/internal/template/app-layout/skeleton/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/skeleton/index.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAG3D,wBAAgB,iBAAiB,CAAC,EAChC,aAAa,EACb,aAAa,EACb,OAAO,EAEP,UAAU,EACV,cAAc,EACd,cAAc,EACd,eAAe,EACf,KAAK,EACL,SAAS,EACT,SAAS,EACT,UAAU,EAEV,SAAS,EACT,WAAW,EACX,eAAe,EACf,eAAe,EACf,sBAAsB,GACvB,EAAE,0BAA0B,eAoB5B"}
package/lib/internal/template/app-layout/skeleton/index.js ADDED
@@ -0,0 +1,10 @@
1
+ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
+ // SPDX-License-Identifier: Apache-2.0
3
+ import React from 'react';
4
+ import { SkeletonLayout } from './layout';
5
+ export function AppLayoutSkeleton({ notifications, contentHeader, content, navigation, navigationHide, navigationOpen, navigationWidth, tools, toolsHide, toolsOpen, toolsWidth, placement, contentType, maxContentWidth, minContentWidth, disableContentPaddings, }) {
6
+ // render nothing in the skeleton state
7
+ const placeholder = React.createElement(React.Fragment, null);
8
+ return (React.createElement(SkeletonLayout, { topBar: placeholder, notifications: notifications, contentHeader: contentHeader, content: content, navigation: !navigationHide && navigationOpen && navigation && placeholder, navigationWidth: navigationWidth, tools: !toolsHide && toolsOpen && tools && placeholder, toolsWidth: toolsWidth, placement: placement, contentType: contentType, maxContentWidth: maxContentWidth, minContentWidth: minContentWidth, disableContentPaddings: disableContentPaddings }));
9
+ }
10
+ //# sourceMappingURL=index.js.map
package/lib/internal/template/app-layout/skeleton/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/skeleton/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,MAAM,UAAU,iBAAiB,CAAC,EAChC,aAAa,EACb,aAAa,EACb,OAAO,EAEP,UAAU,EACV,cAAc,EACd,cAAc,EACd,eAAe,EACf,KAAK,EACL,SAAS,EACT,SAAS,EACT,UAAU,EAEV,SAAS,EACT,WAAW,EACX,eAAe,EACf,eAAe,EACf,sBAAsB,GACK;IAC3B,uCAAuC;IACvC,MAAM,WAAW,GAAG,yCAAK,CAAC;IAC1B,OAAO,CACL,oBAAC,cAAc,IACb,MAAM,EAAE,WAAW,EACnB,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,CAAC,cAAc,IAAI,cAAc,IAAI,UAAU,IAAI,WAAW,EAC1E,eAAe,EAAE,eAAe,EAChC,KAAK,EAAE,CAAC,SAAS,IAAI,SAAS,IAAI,KAAK,IAAI,WAAW,EACtD,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,eAAe,EAChC,eAAe,EAAE,eAAe,EAChC,sBAAsB,EAAE,sBAAsB,GAC9C,CACH,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { AppLayoutPropsWithDefaults } from '../interfaces';\nimport { SkeletonLayout } from './layout';\n\nexport function AppLayoutSkeleton({\n notifications,\n contentHeader,\n content,\n\n navigation,\n navigationHide,\n navigationOpen,\n navigationWidth,\n tools,\n toolsHide,\n toolsOpen,\n toolsWidth,\n\n placement,\n contentType,\n maxContentWidth,\n minContentWidth,\n disableContentPaddings,\n}: AppLayoutPropsWithDefaults) {\n // render nothing in the skeleton state\n const placeholder = <></>;\n return (\n <SkeletonLayout\n topBar={placeholder}\n notifications={notifications}\n contentHeader={contentHeader}\n content={content}\n navigation={!navigationHide && navigationOpen && navigation && placeholder}\n navigationWidth={navigationWidth}\n tools={!toolsHide && toolsOpen && tools && placeholder}\n toolsWidth={toolsWidth}\n placement={placement}\n contentType={contentType}\n maxContentWidth={maxContentWidth}\n minContentWidth={minContentWidth}\n disableContentPaddings={disableContentPaddings}\n />\n );\n}\n"]}
package/lib/internal/template/app-layout/skeleton/layout.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ import { AppLayoutPropsWithDefaults } from '../interfaces';
3
+ interface SkeletonLayoutProps extends Pick<AppLayoutPropsWithDefaults, 'notifications' | 'contentHeader' | 'content' | 'contentType' | 'minContentWidth' | 'maxContentWidth' | 'disableContentPaddings' | 'navigation' | 'navigationWidth' | 'tools' | 'toolsWidth' | 'placement'> {
4
+ topBar?: React.ReactNode;
5
+ }
6
+ export declare function SkeletonLayout({ notifications, contentHeader, content, navigation, navigationWidth, tools, toolsWidth, topBar, placement, contentType, maxContentWidth, minContentWidth, disableContentPaddings, }: SkeletonLayoutProps): JSX.Element;
7
+ export {};
8
+ //# sourceMappingURL=layout.d.ts.map
package/lib/internal/template/app-layout/skeleton/layout.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/skeleton/layout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAO3D,UAAU,mBACR,SAAQ,IAAI,CACV,0BAA0B,EACxB,eAAe,GACf,eAAe,GACf,SAAS,GACT,aAAa,GACb,iBAAiB,GACjB,iBAAiB,GACjB,wBAAwB,GACxB,YAAY,GACZ,iBAAiB,GACjB,OAAO,GACP,YAAY,GACZ,WAAW,CACd;IACD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,wBAAgB,cAAc,CAAC,EAC7B,aAAa,EACb,aAAa,EACb,OAAO,EACP,UAAU,EACV,eAAe,EACf,KAAK,EACL,UAAU,EACV,MAAM,EACN,SAAS,EACT,WAAW,EACX,eAAe,EACf,eAAe,EACf,sBAAsB,GACvB,EAAE,mBAAmB,eAkCrB"}
package/lib/internal/template/app-layout/skeleton/layout.js ADDED
@@ -0,0 +1,27 @@
1
+ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
+ // SPDX-License-Identifier: Apache-2.0
3
+ import React from 'react';
4
+ import styles from './styles.css.js';
5
+ import customCssProps from '../../internal/generated/custom-css-properties';
6
+ import clsx from 'clsx';
7
+ const contentTypeCustomWidths = ['dashboard', 'cards', 'table'];
8
+ export function SkeletonLayout({ notifications, contentHeader, content, navigation, navigationWidth, tools, toolsWidth, topBar, placement, contentType, maxContentWidth, minContentWidth, disableContentPaddings, }) {
9
+ const isMaxWidth = maxContentWidth === Number.MAX_VALUE || maxContentWidth === Number.MAX_SAFE_INTEGER;
10
+ return (React.createElement("div", { className: clsx(styles.root, {
11
+ [styles['has-adaptive-widths-default']]: !contentTypeCustomWidths.includes(contentType),
12
+ [styles['has-adaptive-widths-dashboard']]: contentType === 'dashboard',
13
+ }), style: {
14
+ minBlockSize: `calc(100vh - ${placement.insetBlockStart}px - ${placement.insetBlockEnd}px)`,
15
+ [customCssProps.maxContentWidth]: isMaxWidth ? '100%' : maxContentWidth ? `${maxContentWidth}px` : '',
16
+ [customCssProps.minContentWidth]: `${minContentWidth}px`,
17
+ } },
18
+ React.createElement("section", { className: styles['top-bar'] }, topBar),
19
+ navigation && (React.createElement("div", { className: styles.navigation, style: { inlineSize: navigationWidth } }, navigation)),
20
+ React.createElement("main", { className: styles['main-landmark'] },
21
+ notifications && React.createElement("div", { className: styles.notifications }, notifications),
22
+ React.createElement("div", { className: clsx(styles.main, { [styles['main-disable-paddings']]: disableContentPaddings }) },
23
+ contentHeader && React.createElement("div", { className: styles['content-header'] }, contentHeader),
24
+ React.createElement("div", null, content))),
25
+ tools && (React.createElement("div", { className: styles.tools, style: { inlineSize: toolsWidth } }, tools))));
26
+ }
27
+ //# sourceMappingURL=layout.js.map
package/lib/internal/template/app-layout/skeleton/layout.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../../src/app-layout/skeleton/layout.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,gDAAgD,CAAC;AAC5E,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,MAAM,uBAAuB,GAA8B,CAAC,WAAW,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;AAqB3F,MAAM,UAAU,cAAc,CAAC,EAC7B,aAAa,EACb,aAAa,EACb,OAAO,EACP,UAAU,EACV,eAAe,EACf,KAAK,EACL,UAAU,EACV,MAAM,EACN,SAAS,EACT,WAAW,EACX,eAAe,EACf,eAAe,EACf,sBAAsB,GACF;IACpB,MAAM,UAAU,GAAG,eAAe,KAAK,MAAM,CAAC,SAAS,IAAI,eAAe,KAAK,MAAM,CAAC,gBAAgB,CAAC;IACvG,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;YAC3B,CAAC,MAAM,CAAC,6BAA6B,CAAC,CAAC,EAAE,CAAC,uBAAuB,CAAC,QAAQ,CAAC,WAAW,CAAC;YACvF,CAAC,MAAM,CAAC,+BAA+B,CAAC,CAAC,EAAE,WAAW,KAAK,WAAW;SACvE,CAAC,EACF,KAAK,EAAE;YACL,YAAY,EAAE,gBAAgB,SAAS,CAAC,eAAe,QAAQ,SAAS,CAAC,aAAa,KAAK;YAC3F,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,eAAe,IAAI,CAAC,CAAC,CAAC,EAAE;YACrG,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,GAAG,eAAe,IAAI;SACzD;QAED,iCAAS,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,IAAG,MAAM,CAAW;QACxD,UAAU,IAAI,CACb,6BAAK,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,eAAe,EAAE,IACtE,UAAU,CACP,CACP;QACD,8BAAM,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC;YACrC,aAAa,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,aAAa,IAAG,aAAa,CAAO;YAC7E,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,sBAAsB,EAAE,CAAC;gBAC7F,aAAa,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,IAAG,aAAa,CAAO;gBACjF,iCAAM,OAAO,CAAO,CAChB,CACD;QACN,KAAK,IAAI,CACR,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,IAC5D,KAAK,CACF,CACP,CACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { AppLayoutPropsWithDefaults } from '../interfaces';\nimport styles from './styles.css.js';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport clsx from 'clsx';\n\nconst contentTypeCustomWidths: Array<string | undefined> = ['dashboard', 'cards', 'table'];\n\ninterface SkeletonLayoutProps\n extends Pick<\n AppLayoutPropsWithDefaults,\n | 'notifications'\n | 'contentHeader'\n | 'content'\n | 'contentType'\n | 'minContentWidth'\n | 'maxContentWidth'\n | 'disableContentPaddings'\n | 'navigation'\n | 'navigationWidth'\n | 'tools'\n | 'toolsWidth'\n | 'placement'\n > {\n topBar?: React.ReactNode;\n}\n\nexport function SkeletonLayout({\n notifications,\n contentHeader,\n content,\n navigation,\n navigationWidth,\n tools,\n toolsWidth,\n topBar,\n placement,\n contentType,\n maxContentWidth,\n minContentWidth,\n disableContentPaddings,\n}: SkeletonLayoutProps) {\n const isMaxWidth = maxContentWidth === Number.MAX_VALUE || maxContentWidth === Number.MAX_SAFE_INTEGER;\n return (\n <div\n className={clsx(styles.root, {\n [styles['has-adaptive-widths-default']]: !contentTypeCustomWidths.includes(contentType),\n [styles['has-adaptive-widths-dashboard']]: contentType === 'dashboard',\n })}\n style={{\n minBlockSize: `calc(100vh - ${placement.insetBlockStart}px - ${placement.insetBlockEnd}px)`,\n [customCssProps.maxContentWidth]: isMaxWidth ? '100%' : maxContentWidth ? `${maxContentWidth}px` : '',\n [customCssProps.minContentWidth]: `${minContentWidth}px`,\n }}\n >\n <section className={styles['top-bar']}>{topBar}</section>\n {navigation && (\n <div className={styles.navigation} style={{ inlineSize: navigationWidth }}>\n {navigation}\n </div>\n )}\n <main className={styles['main-landmark']}>\n {notifications && <div className={styles.notifications}>{notifications}</div>}\n <div className={clsx(styles.main, { [styles['main-disable-paddings']]: disableContentPaddings })}>\n {contentHeader && <div className={styles['content-header']}>{contentHeader}</div>}\n <div>{content}</div>\n </div>\n </main>\n {tools && (\n <div className={styles.tools} style={{ inlineSize: toolsWidth }}>\n {tools}\n </div>\n )}\n </div>\n );\n}\n"]}