@cloudscape-design/components 3.0.480 → 3.0.482

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 (13) hide show
  1. package/app-layout/interfaces.d.ts +1 -1
  2. package/app-layout/interfaces.js.map +1 -1
  3. package/container/styles.css.js +29 -29
  4. package/container/styles.scoped.css +56 -56
  5. package/container/styles.selectors.js +29 -29
  6. package/internal/environment.js +1 -1
  7. package/internal/environment.json +1 -1
  8. package/internal/manifest.json +1 -1
  9. package/package.json +1 -1
  10. package/tabs/index.d.ts +0 -1
  11. package/tabs/index.d.ts.map +1 -1
  12. package/tabs/index.js +3 -4
  13. package/tabs/index.js.map +1 -1
package/app-layout/interfaces.d.ts CHANGED
@@ -108,7 +108,7 @@ export interface AppLayoutProps extends BaseComponentProps {
108
108
  * * `tools` (string) - Label for the landmark that wraps the tools drawer.
109
109
  * * `toolsClose` (string) - Label for the button that closes the tools drawer.
110
110
  * * `toolsToggle` (string) - Label for the button that opens the tools drawer.
111
- * * `drawers` (string) - Label for the landmark that the active drawer.
111
+ * * `drawers` (string) - Label for the landmark that wraps the active drawer.
112
112
  * * `drawersOverflow` (string) - Label for the ellipsis button with any overflow drawers.
113
113
  * * `drawersOverflowWithBadge` (string) - Label for the ellipsis button with any overflow drawers, with a badge.
114
114
  *
package/app-layout/interfaces.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["app-layout/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 { IconProps } from '../icon/interfaces';\n\nexport interface AppLayoutProps extends BaseComponentProps {\n /**\n * Determines the default behavior of the component based on some predefined page layouts.\n * Individual properties will always take precedence over the default coming from the content type.\n */\n contentType?: AppLayoutProps.ContentType;\n\n /**\n * Drawers property.\n \n * Each Drawer is an item in the drawers wrapper with the following properties:\n * * id (string) - the id of the drawer.\n * * content (React.ReactNode) - the content in the drawer.\n * * trigger (DrawerTrigger) - the button that opens and closes the active drawer. \n * * ariaLabels (DrawerAriaLabels) - the labels for the interactive elements of the drawer.\n * * badge (boolean) - Adds a badge to the corner of the icon to indicate a state change. For example: Unread notifications.\n * * resizable (boolean) - if the drawer is resizable or not.\n * * defaultSize (number) - starting size of the drawer. if not set, defaults to 290.\n * * onResize (({ size: number }) => void) - Fired when the active drawer is resized.\n * \n * #### DrawerTrigger\n * - `iconName` (IconProps.Name) - (Optional) Specifies the icon to be displayed.\n * - `iconSvg` (React.ReactNode) - (Optional) Specifies the SVG of a custom icon. For more information, see [SVG icon guidelines](/components/icon/?tabId=api#slots)\n *\n * #### DrawerAriaLabels\n * - `drawerName` (string) - Label for the drawer itself.\n * - `closeButton` (string) - (Optional) Label for the close button.\n * - `triggerButton` (string) - (Optional) Label for the trigger button.\n * - `resizeHandle` (string) - (Optional) Label for the resize handle.\n */\n drawers?: Array<AppLayoutProps.Drawer>;\n\n /**\n * The active drawer id. If you want to clear the active drawer, use `null`.\n */\n activeDrawerId?: string | null;\n\n /**\n * Fired when the active drawer is toggled.\n */\n onDrawerChange?: NonCancelableEventHandler<AppLayoutProps.DrawerChangeDetail>;\n\n /**\n * If `true`, disables outer paddings for the content slot.\n */\n disableContentPaddings?: boolean;\n\n /**\n * Activates a backwards-compatibility mode for applications with non-fixed headers and footers.\n * @deprecated This layout is being phased out and may miss some features.\n */\n disableBodyScroll?: boolean;\n\n /**\n * State of the navigation drawer.\n */\n navigationOpen?: boolean;\n\n /**\n * Navigation drawer width in pixels.\n */\n navigationWidth?: number;\n\n /**\n * If `true`, the navigation drawer is not displayed at all.\n */\n navigationHide?: boolean;\n\n /**\n * State of the tools drawer.\n */\n toolsOpen?: boolean;\n\n /**\n * If `true`, the tools drawer is not displayed at all.\n */\n toolsHide?: boolean;\n\n /**\n * Tools drawer width in pixels.\n */\n toolsWidth?: number;\n\n /**\n * Maximum main content panel width in pixels.\n *\n * If set to `Number.MAX_VALUE`, the main content panel will occupy the full available width.\n */\n maxContentWidth?: number;\n\n /**\n * Minimum main content panel width in pixels.\n */\n minContentWidth?: number;\n\n /**\n * If true, the notification slot is rendered above the scrollable\n * content area so it is always visible.\n *\n * Note that sticky notifications are not supported in Internet Explorer.\n */\n stickyNotifications?: boolean;\n\n /**\n * CSS selector for the application header.\n */\n headerSelector?: string;\n\n /**\n * CSS selector for the application footer.\n */\n footerSelector?: string;\n\n /**\n * Aria labels for the drawer operating buttons. Use this property to ensure accessibility.\n *\n * * `navigation` (string) - Label for the landmark that wraps the navigation drawer.\n * * `navigationClose` (string) - Label for the button that closes the navigation drawer.\n * * `navigationToggle` (string) - Label for the button that opens the navigation drawer.\n * * `notification` (string) - Label for the region that contains notification messages.\n * * `tools` (string) - Label for the landmark that wraps the tools drawer.\n * * `toolsClose` (string) - Label for the button that closes the tools drawer.\n * * `toolsToggle` (string) - Label for the button that opens the tools drawer.\n * * `drawers` (string) - Label for the landmark that the active drawer.\n * * `drawersOverflow` (string) - Label for the ellipsis button with any overflow drawers.\n * * `drawersOverflowWithBadge` (string) - Label for the ellipsis button with any overflow drawers, with a badge.\n *\n * Example:\n * ```\n * {\n * navigation: \"Navigation drawer\",\n * navigationClose: \"Close navigation drawer\",\n * navigationToggle: \"Open navigation drawer\",\n * notifications: \"Notifications\",\n * tools: \"Help panel\",\n * toolsClose: \"Close help panel\",\n * toolsToggle: \"Open help panel\",\n * drawers: \"Drawers\",\n * drawersOverflow: \"Overflow drawers\",\n * drawersOverflowWithBadge: \"Overflow drawers (Unread notifications)\"\n * }\n * ```\n * @i18n\n */\n ariaLabels?: AppLayoutProps.Labels;\n\n /**\n * Navigation drawer.\n */\n navigation?: React.ReactNode;\n\n /**\n * Top area of the page content.\n * @deprecated Replaced by the `header` slot of the [content layout](/components/content-layout/) component.\n * @visualrefresh\n */\n contentHeader?: React.ReactNode;\n\n /**\n * Disables overlap between `contentHeader` and `content` slots.\n * @deprecated Replaced by the `disableOverlap` property of the [content layout](/components/content-layout/) component.\n * @visualrefresh\n */\n disableContentHeaderOverlap?: boolean;\n\n /**\n * Main content.\n */\n content?: React.ReactNode;\n\n /**\n * Tools drawer.\n */\n tools?: React.ReactNode;\n\n /**\n * Displayed on top of the main content in the scrollable area.\n *\n * Conceived to contain notifications (flash messages).\n */\n notifications?: React.ReactNode;\n\n /**\n * Use this slot to add the [breadcrumb group component](/components/breadcrumb-group/) to the app layout.\n */\n breadcrumbs?: React.ReactNode;\n\n /**\n * Fired when the navigation drawer is toggled.\n */\n onNavigationChange?: NonCancelableEventHandler<AppLayoutProps.ChangeDetail>;\n\n /**\n * Fired when the tools drawer is toggled.\n */\n onToolsChange?: NonCancelableEventHandler<AppLayoutProps.ChangeDetail>;\n\n /**\n * Use this slot to add the [split panel component](/components/split-panel/) to the app layout.\n *\n * Note: If provided, this property should be set to `null` or `undefined` if a split panel should not be rendered.\n */\n splitPanel?: React.ReactNode;\n\n /**\n * The size of the split panel in pixels.\n */\n splitPanelSize?: number;\n\n /**\n * State of the split panel.\n */\n splitPanelOpen?: boolean;\n /**\n * Controls the split panel preferences.\n *\n * By default, the preference is `{ position: 'bottom' }`\n */\n splitPanelPreferences?: AppLayoutProps.SplitPanelPreferences;\n /**\n * Fired when the split panel is resized.\n */\n onSplitPanelResize?: NonCancelableEventHandler<AppLayoutProps.SplitPanelResizeDetail>;\n /**\n * Fired when the split panel is toggled.\n */\n onSplitPanelToggle?: NonCancelableEventHandler<AppLayoutProps.ChangeDetail>;\n /**\n * Fired when the split panel preferences change.\n */\n onSplitPanelPreferencesChange?: NonCancelableEventHandler<AppLayoutProps.SplitPanelPreferences>;\n}\n\nexport namespace AppLayoutProps {\n export type ContentType = 'default' | 'form' | 'table' | 'cards' | 'wizard' | 'dashboard';\n\n export interface Ref {\n /**\n * Manually closes the navigation drawer if it is necessary for the current\n * viewport size.\n */\n closeNavigationIfNecessary(): void;\n\n /**\n * Opens the tools panel if it is not already open. Note that it is preferable\n * to control the state by listening to `toolsChange` and providing `toolsOpen`.\n */\n openTools(): void;\n\n /**\n * Focuses the tools panel if it is open. Use this to focus the tools panel\n * after changing the content, for example when clicking on an 'info' link while\n * the panel is already open.\n */\n focusToolsClose(): void;\n\n /**\n * Focuses the active drawer. Use this to focus the active drawer after opening it programmatically.\n */\n focusActiveDrawer(): void;\n\n /**\n * Focuses the split panel if it is open.\n */\n focusSplitPanel(): void;\n }\n\n export interface Drawer {\n id: string;\n content: React.ReactNode;\n trigger: {\n iconName?: IconProps.Name;\n iconSvg?: React.ReactNode;\n };\n ariaLabels: DrawerAriaLabels;\n badge?: boolean;\n resizable?: boolean;\n defaultSize?: number;\n onResize?: NonCancelableEventHandler<{ size: number }>;\n }\n\n export interface DrawerAriaLabels {\n drawerName: string;\n closeButton?: string;\n triggerButton?: string;\n resizeHandle?: string;\n }\n\n export interface Labels {\n notifications?: string;\n\n navigation?: string;\n navigationToggle?: string;\n navigationClose?: string;\n\n tools?: string;\n toolsToggle?: string;\n toolsClose?: string;\n\n drawers?: string;\n drawersOverflow?: string;\n drawersOverflowWithBadge?: string;\n }\n\n export interface ChangeDetail {\n open: boolean;\n }\n\n export interface SplitPanelResizeDetail {\n size: number;\n }\n\n export interface SplitPanelPreferences {\n position: 'side' | 'bottom';\n }\n // Duplicated the positions because using this definition in SplitPanelPreferences would display\n // 'AppLayoutProps.SplitPanelPosition' on the API docs instead of the string values.\n export type SplitPanelPosition = 'side' | 'bottom';\n\n export interface DrawerChangeDetail {\n activeDrawerId: string | null;\n }\n}\n"]}
1
+ {"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["app-layout/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 { IconProps } from '../icon/interfaces';\n\nexport interface AppLayoutProps extends BaseComponentProps {\n /**\n * Determines the default behavior of the component based on some predefined page layouts.\n * Individual properties will always take precedence over the default coming from the content type.\n */\n contentType?: AppLayoutProps.ContentType;\n\n /**\n * Drawers property.\n \n * Each Drawer is an item in the drawers wrapper with the following properties:\n * * id (string) - the id of the drawer.\n * * content (React.ReactNode) - the content in the drawer.\n * * trigger (DrawerTrigger) - the button that opens and closes the active drawer. \n * * ariaLabels (DrawerAriaLabels) - the labels for the interactive elements of the drawer.\n * * badge (boolean) - Adds a badge to the corner of the icon to indicate a state change. For example: Unread notifications.\n * * resizable (boolean) - if the drawer is resizable or not.\n * * defaultSize (number) - starting size of the drawer. if not set, defaults to 290.\n * * onResize (({ size: number }) => void) - Fired when the active drawer is resized.\n * \n * #### DrawerTrigger\n * - `iconName` (IconProps.Name) - (Optional) Specifies the icon to be displayed.\n * - `iconSvg` (React.ReactNode) - (Optional) Specifies the SVG of a custom icon. For more information, see [SVG icon guidelines](/components/icon/?tabId=api#slots)\n *\n * #### DrawerAriaLabels\n * - `drawerName` (string) - Label for the drawer itself.\n * - `closeButton` (string) - (Optional) Label for the close button.\n * - `triggerButton` (string) - (Optional) Label for the trigger button.\n * - `resizeHandle` (string) - (Optional) Label for the resize handle.\n */\n drawers?: Array<AppLayoutProps.Drawer>;\n\n /**\n * The active drawer id. If you want to clear the active drawer, use `null`.\n */\n activeDrawerId?: string | null;\n\n /**\n * Fired when the active drawer is toggled.\n */\n onDrawerChange?: NonCancelableEventHandler<AppLayoutProps.DrawerChangeDetail>;\n\n /**\n * If `true`, disables outer paddings for the content slot.\n */\n disableContentPaddings?: boolean;\n\n /**\n * Activates a backwards-compatibility mode for applications with non-fixed headers and footers.\n * @deprecated This layout is being phased out and may miss some features.\n */\n disableBodyScroll?: boolean;\n\n /**\n * State of the navigation drawer.\n */\n navigationOpen?: boolean;\n\n /**\n * Navigation drawer width in pixels.\n */\n navigationWidth?: number;\n\n /**\n * If `true`, the navigation drawer is not displayed at all.\n */\n navigationHide?: boolean;\n\n /**\n * State of the tools drawer.\n */\n toolsOpen?: boolean;\n\n /**\n * If `true`, the tools drawer is not displayed at all.\n */\n toolsHide?: boolean;\n\n /**\n * Tools drawer width in pixels.\n */\n toolsWidth?: number;\n\n /**\n * Maximum main content panel width in pixels.\n *\n * If set to `Number.MAX_VALUE`, the main content panel will occupy the full available width.\n */\n maxContentWidth?: number;\n\n /**\n * Minimum main content panel width in pixels.\n */\n minContentWidth?: number;\n\n /**\n * If true, the notification slot is rendered above the scrollable\n * content area so it is always visible.\n *\n * Note that sticky notifications are not supported in Internet Explorer.\n */\n stickyNotifications?: boolean;\n\n /**\n * CSS selector for the application header.\n */\n headerSelector?: string;\n\n /**\n * CSS selector for the application footer.\n */\n footerSelector?: string;\n\n /**\n * Aria labels for the drawer operating buttons. Use this property to ensure accessibility.\n *\n * * `navigation` (string) - Label for the landmark that wraps the navigation drawer.\n * * `navigationClose` (string) - Label for the button that closes the navigation drawer.\n * * `navigationToggle` (string) - Label for the button that opens the navigation drawer.\n * * `notification` (string) - Label for the region that contains notification messages.\n * * `tools` (string) - Label for the landmark that wraps the tools drawer.\n * * `toolsClose` (string) - Label for the button that closes the tools drawer.\n * * `toolsToggle` (string) - Label for the button that opens the tools drawer.\n * * `drawers` (string) - Label for the landmark that wraps the active drawer.\n * * `drawersOverflow` (string) - Label for the ellipsis button with any overflow drawers.\n * * `drawersOverflowWithBadge` (string) - Label for the ellipsis button with any overflow drawers, with a badge.\n *\n * Example:\n * ```\n * {\n * navigation: \"Navigation drawer\",\n * navigationClose: \"Close navigation drawer\",\n * navigationToggle: \"Open navigation drawer\",\n * notifications: \"Notifications\",\n * tools: \"Help panel\",\n * toolsClose: \"Close help panel\",\n * toolsToggle: \"Open help panel\",\n * drawers: \"Drawers\",\n * drawersOverflow: \"Overflow drawers\",\n * drawersOverflowWithBadge: \"Overflow drawers (Unread notifications)\"\n * }\n * ```\n * @i18n\n */\n ariaLabels?: AppLayoutProps.Labels;\n\n /**\n * Navigation drawer.\n */\n navigation?: React.ReactNode;\n\n /**\n * Top area of the page content.\n * @deprecated Replaced by the `header` slot of the [content layout](/components/content-layout/) component.\n * @visualrefresh\n */\n contentHeader?: React.ReactNode;\n\n /**\n * Disables overlap between `contentHeader` and `content` slots.\n * @deprecated Replaced by the `disableOverlap` property of the [content layout](/components/content-layout/) component.\n * @visualrefresh\n */\n disableContentHeaderOverlap?: boolean;\n\n /**\n * Main content.\n */\n content?: React.ReactNode;\n\n /**\n * Tools drawer.\n */\n tools?: React.ReactNode;\n\n /**\n * Displayed on top of the main content in the scrollable area.\n *\n * Conceived to contain notifications (flash messages).\n */\n notifications?: React.ReactNode;\n\n /**\n * Use this slot to add the [breadcrumb group component](/components/breadcrumb-group/) to the app layout.\n */\n breadcrumbs?: React.ReactNode;\n\n /**\n * Fired when the navigation drawer is toggled.\n */\n onNavigationChange?: NonCancelableEventHandler<AppLayoutProps.ChangeDetail>;\n\n /**\n * Fired when the tools drawer is toggled.\n */\n onToolsChange?: NonCancelableEventHandler<AppLayoutProps.ChangeDetail>;\n\n /**\n * Use this slot to add the [split panel component](/components/split-panel/) to the app layout.\n *\n * Note: If provided, this property should be set to `null` or `undefined` if a split panel should not be rendered.\n */\n splitPanel?: React.ReactNode;\n\n /**\n * The size of the split panel in pixels.\n */\n splitPanelSize?: number;\n\n /**\n * State of the split panel.\n */\n splitPanelOpen?: boolean;\n /**\n * Controls the split panel preferences.\n *\n * By default, the preference is `{ position: 'bottom' }`\n */\n splitPanelPreferences?: AppLayoutProps.SplitPanelPreferences;\n /**\n * Fired when the split panel is resized.\n */\n onSplitPanelResize?: NonCancelableEventHandler<AppLayoutProps.SplitPanelResizeDetail>;\n /**\n * Fired when the split panel is toggled.\n */\n onSplitPanelToggle?: NonCancelableEventHandler<AppLayoutProps.ChangeDetail>;\n /**\n * Fired when the split panel preferences change.\n */\n onSplitPanelPreferencesChange?: NonCancelableEventHandler<AppLayoutProps.SplitPanelPreferences>;\n}\n\nexport namespace AppLayoutProps {\n export type ContentType = 'default' | 'form' | 'table' | 'cards' | 'wizard' | 'dashboard';\n\n export interface Ref {\n /**\n * Manually closes the navigation drawer if it is necessary for the current\n * viewport size.\n */\n closeNavigationIfNecessary(): void;\n\n /**\n * Opens the tools panel if it is not already open. Note that it is preferable\n * to control the state by listening to `toolsChange` and providing `toolsOpen`.\n */\n openTools(): void;\n\n /**\n * Focuses the tools panel if it is open. Use this to focus the tools panel\n * after changing the content, for example when clicking on an 'info' link while\n * the panel is already open.\n */\n focusToolsClose(): void;\n\n /**\n * Focuses the active drawer. Use this to focus the active drawer after opening it programmatically.\n */\n focusActiveDrawer(): void;\n\n /**\n * Focuses the split panel if it is open.\n */\n focusSplitPanel(): void;\n }\n\n export interface Drawer {\n id: string;\n content: React.ReactNode;\n trigger: {\n iconName?: IconProps.Name;\n iconSvg?: React.ReactNode;\n };\n ariaLabels: DrawerAriaLabels;\n badge?: boolean;\n resizable?: boolean;\n defaultSize?: number;\n onResize?: NonCancelableEventHandler<{ size: number }>;\n }\n\n export interface DrawerAriaLabels {\n drawerName: string;\n closeButton?: string;\n triggerButton?: string;\n resizeHandle?: string;\n }\n\n export interface Labels {\n notifications?: string;\n\n navigation?: string;\n navigationToggle?: string;\n navigationClose?: string;\n\n tools?: string;\n toolsToggle?: string;\n toolsClose?: string;\n\n drawers?: string;\n drawersOverflow?: string;\n drawersOverflowWithBadge?: string;\n }\n\n export interface ChangeDetail {\n open: boolean;\n }\n\n export interface SplitPanelResizeDetail {\n size: number;\n }\n\n export interface SplitPanelPreferences {\n position: 'side' | 'bottom';\n }\n // Duplicated the positions because using this definition in SplitPanelPreferences would display\n // 'AppLayoutProps.SplitPanelPosition' on the API docs instead of the string values.\n export type SplitPanelPosition = 'side' | 'bottom';\n\n export interface DrawerChangeDetail {\n activeDrawerId: string | null;\n }\n}\n"]}
package/container/styles.css.js CHANGED
@@ -1,34 +1,34 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "root": "awsui_root_14iqq_1l9ij_97",
5
- "fit-height": "awsui_fit-height_14iqq_1l9ij_111",
6
- "with-side-media": "awsui_with-side-media_14iqq_1l9ij_116",
7
- "variant-default": "awsui_variant-default_14iqq_1l9ij_119",
8
- "variant-stacked": "awsui_variant-stacked_14iqq_1l9ij_119",
9
- "refresh": "awsui_refresh_14iqq_1l9ij_124",
10
- "sticky-enabled": "awsui_sticky-enabled_14iqq_1l9ij_167",
11
- "with-top-media": "awsui_with-top-media_14iqq_1l9ij_179",
12
- "content-wrapper": "awsui_content-wrapper_14iqq_1l9ij_184",
13
- "content-wrapper-fit-height": "awsui_content-wrapper-fit-height_14iqq_1l9ij_189",
14
- "media": "awsui_media_14iqq_1l9ij_194",
15
- "media-top": "awsui_media-top_14iqq_1l9ij_211",
16
- "media-side": "awsui_media-side_14iqq_1l9ij_216",
17
- "header": "awsui_header_14iqq_1l9ij_222",
18
- "header-with-media": "awsui_header-with-media_14iqq_1l9ij_227",
19
- "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_1l9ij_233",
20
- "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_1l9ij_237",
21
- "header-stuck": "awsui_header-stuck_14iqq_1l9ij_243",
22
- "header-variant-cards": "awsui_header-variant-cards_14iqq_1l9ij_249",
23
- "header-dynamic-height": "awsui_header-dynamic-height_14iqq_1l9ij_252",
24
- "with-paddings": "awsui_with-paddings_14iqq_1l9ij_258",
25
- "with-hidden-content": "awsui_with-hidden-content_14iqq_1l9ij_264",
26
- "header-variant-full-page": "awsui_header-variant-full-page_14iqq_1l9ij_311",
27
- "dark-header": "awsui_dark-header_14iqq_1l9ij_329",
28
- "content": "awsui_content_14iqq_1l9ij_184",
29
- "content-fit-height": "awsui_content-fit-height_14iqq_1l9ij_337",
30
- "content-with-media": "awsui_content-with-media_14iqq_1l9ij_346",
31
- "footer": "awsui_footer_14iqq_1l9ij_350",
32
- "with-divider": "awsui_with-divider_14iqq_1l9ij_353"
4
+ "root": "awsui_root_14iqq_19uqk_97",
5
+ "fit-height": "awsui_fit-height_14iqq_19uqk_111",
6
+ "with-side-media": "awsui_with-side-media_14iqq_19uqk_116",
7
+ "variant-default": "awsui_variant-default_14iqq_19uqk_119",
8
+ "variant-stacked": "awsui_variant-stacked_14iqq_19uqk_119",
9
+ "refresh": "awsui_refresh_14iqq_19uqk_124",
10
+ "sticky-enabled": "awsui_sticky-enabled_14iqq_19uqk_167",
11
+ "with-top-media": "awsui_with-top-media_14iqq_19uqk_179",
12
+ "content-wrapper": "awsui_content-wrapper_14iqq_19uqk_184",
13
+ "content-wrapper-fit-height": "awsui_content-wrapper-fit-height_14iqq_19uqk_189",
14
+ "media": "awsui_media_14iqq_19uqk_194",
15
+ "media-top": "awsui_media-top_14iqq_19uqk_211",
16
+ "media-side": "awsui_media-side_14iqq_19uqk_216",
17
+ "header": "awsui_header_14iqq_19uqk_222",
18
+ "header-with-media": "awsui_header-with-media_14iqq_19uqk_227",
19
+ "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_19uqk_233",
20
+ "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_19uqk_237",
21
+ "header-stuck": "awsui_header-stuck_14iqq_19uqk_243",
22
+ "header-variant-cards": "awsui_header-variant-cards_14iqq_19uqk_249",
23
+ "header-dynamic-height": "awsui_header-dynamic-height_14iqq_19uqk_252",
24
+ "with-paddings": "awsui_with-paddings_14iqq_19uqk_258",
25
+ "with-hidden-content": "awsui_with-hidden-content_14iqq_19uqk_264",
26
+ "header-variant-full-page": "awsui_header-variant-full-page_14iqq_19uqk_311",
27
+ "dark-header": "awsui_dark-header_14iqq_19uqk_329",
28
+ "content": "awsui_content_14iqq_19uqk_184",
29
+ "content-fit-height": "awsui_content-fit-height_14iqq_19uqk_337",
30
+ "content-with-media": "awsui_content-with-media_14iqq_19uqk_346",
31
+ "footer": "awsui_footer_14iqq_19uqk_350",
32
+ "with-divider": "awsui_with-divider_14iqq_19uqk_353"
33
33
  };
34
34
 
package/container/styles.scoped.css CHANGED
@@ -94,7 +94,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
94
94
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
95
95
  SPDX-License-Identifier: Apache-2.0
96
96
  */
97
- .awsui_root_14iqq_1l9ij_97:not(#\9) {
97
+ .awsui_root_14iqq_19uqk_97:not(#\9) {
98
98
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
99
99
  border-collapse: separate;
100
100
  border-spacing: 0;
@@ -134,23 +134,23 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
134
134
  word-wrap: break-word;
135
135
  position: relative;
136
136
  }
137
- .awsui_root_14iqq_1l9ij_97.awsui_fit-height_14iqq_1l9ij_111:not(#\9) {
137
+ .awsui_root_14iqq_19uqk_97.awsui_fit-height_14iqq_19uqk_111:not(#\9) {
138
138
  display: flex;
139
139
  flex-direction: column;
140
140
  height: 100%;
141
141
  }
142
- .awsui_root_14iqq_1l9ij_97.awsui_fit-height_14iqq_1l9ij_111.awsui_with-side-media_14iqq_1l9ij_116:not(#\9) {
142
+ .awsui_root_14iqq_19uqk_97.awsui_fit-height_14iqq_19uqk_111.awsui_with-side-media_14iqq_19uqk_116:not(#\9) {
143
143
  flex-direction: row;
144
144
  }
145
- .awsui_root_14iqq_1l9ij_97.awsui_variant-default_14iqq_1l9ij_119:not(#\9), .awsui_root_14iqq_1l9ij_97.awsui_variant-stacked_14iqq_1l9ij_119:not(#\9) {
145
+ .awsui_root_14iqq_19uqk_97.awsui_variant-default_14iqq_19uqk_119:not(#\9), .awsui_root_14iqq_19uqk_97.awsui_variant-stacked_14iqq_19uqk_119:not(#\9) {
146
146
  background-color: var(--color-background-container-content-4un1ap, #ffffff);
147
147
  border-radius: var(--border-radius-container-wqv1zi, 16px);
148
148
  box-sizing: border-box;
149
149
  }
150
- .awsui_root_14iqq_1l9ij_97.awsui_variant-default_14iqq_1l9ij_119.awsui_refresh_14iqq_1l9ij_124:not(#\9), .awsui_root_14iqq_1l9ij_97.awsui_variant-stacked_14iqq_1l9ij_119.awsui_refresh_14iqq_1l9ij_124:not(#\9) {
150
+ .awsui_root_14iqq_19uqk_97.awsui_variant-default_14iqq_19uqk_119.awsui_refresh_14iqq_19uqk_124:not(#\9), .awsui_root_14iqq_19uqk_97.awsui_variant-stacked_14iqq_19uqk_119.awsui_refresh_14iqq_19uqk_124:not(#\9) {
151
151
  border: solid var(--border-divider-section-width-1061zr, 1px) var(--color-border-divider-default-j74lyz, #b6bec9);
152
152
  }
153
- .awsui_root_14iqq_1l9ij_97.awsui_variant-default_14iqq_1l9ij_119:not(#\9):not(.awsui_refresh_14iqq_1l9ij_124)::before, .awsui_root_14iqq_1l9ij_97.awsui_variant-stacked_14iqq_1l9ij_119:not(#\9):not(.awsui_refresh_14iqq_1l9ij_124)::before {
153
+ .awsui_root_14iqq_19uqk_97.awsui_variant-default_14iqq_19uqk_119:not(#\9):not(.awsui_refresh_14iqq_19uqk_124)::before, .awsui_root_14iqq_19uqk_97.awsui_variant-stacked_14iqq_19uqk_119:not(#\9):not(.awsui_refresh_14iqq_19uqk_124)::before {
154
154
  content: "";
155
155
  position: absolute;
156
156
  left: 0px;
@@ -165,7 +165,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
165
165
  border-radius: var(--border-radius-container-wqv1zi, 16px);
166
166
  z-index: 1;
167
167
  }
168
- .awsui_root_14iqq_1l9ij_97.awsui_variant-default_14iqq_1l9ij_119:not(#\9):not(.awsui_refresh_14iqq_1l9ij_124)::after, .awsui_root_14iqq_1l9ij_97.awsui_variant-stacked_14iqq_1l9ij_119:not(#\9):not(.awsui_refresh_14iqq_1l9ij_124)::after {
168
+ .awsui_root_14iqq_19uqk_97.awsui_variant-default_14iqq_19uqk_119:not(#\9):not(.awsui_refresh_14iqq_19uqk_124)::after, .awsui_root_14iqq_19uqk_97.awsui_variant-stacked_14iqq_19uqk_119:not(#\9):not(.awsui_refresh_14iqq_19uqk_124)::after {
169
169
  content: "";
170
170
  position: absolute;
171
171
  left: 0px;
@@ -178,127 +178,127 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
178
178
  border-radius: var(--border-radius-container-wqv1zi, 16px);
179
179
  box-shadow: var(--shadow-container-fxmdn3, 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12));
180
180
  }
181
- .awsui_root_14iqq_1l9ij_97.awsui_variant-stacked_14iqq_1l9ij_119:not(#\9):not(:last-child), .awsui_root_14iqq_1l9ij_97.awsui_variant-stacked_14iqq_1l9ij_119:not(#\9):not(:last-child)::before, .awsui_root_14iqq_1l9ij_97.awsui_variant-stacked_14iqq_1l9ij_119:not(#\9):not(:last-child)::after {
181
+ .awsui_root_14iqq_19uqk_97.awsui_variant-stacked_14iqq_19uqk_119:not(#\9):not(:last-child), .awsui_root_14iqq_19uqk_97.awsui_variant-stacked_14iqq_19uqk_119:not(#\9):not(:last-child)::before, .awsui_root_14iqq_19uqk_97.awsui_variant-stacked_14iqq_19uqk_119:not(#\9):not(:last-child)::after {
182
182
  border-bottom-right-radius: 0;
183
183
  border-bottom-left-radius: 0;
184
184
  border-bottom-width: 0;
185
185
  }
186
- .awsui_root_14iqq_1l9ij_97.awsui_variant-stacked_14iqq_1l9ij_119 + .awsui_root_14iqq_1l9ij_97.awsui_variant-stacked_14iqq_1l9ij_119:not(#\9), .awsui_root_14iqq_1l9ij_97.awsui_variant-stacked_14iqq_1l9ij_119 + .awsui_root_14iqq_1l9ij_97.awsui_variant-stacked_14iqq_1l9ij_119:not(#\9)::before, .awsui_root_14iqq_1l9ij_97.awsui_variant-stacked_14iqq_1l9ij_119 + .awsui_root_14iqq_1l9ij_97.awsui_variant-stacked_14iqq_1l9ij_119:not(#\9)::after {
186
+ .awsui_root_14iqq_19uqk_97.awsui_variant-stacked_14iqq_19uqk_119 + .awsui_root_14iqq_19uqk_97.awsui_variant-stacked_14iqq_19uqk_119:not(#\9), .awsui_root_14iqq_19uqk_97.awsui_variant-stacked_14iqq_19uqk_119 + .awsui_root_14iqq_19uqk_97.awsui_variant-stacked_14iqq_19uqk_119:not(#\9)::before, .awsui_root_14iqq_19uqk_97.awsui_variant-stacked_14iqq_19uqk_119 + .awsui_root_14iqq_19uqk_97.awsui_variant-stacked_14iqq_19uqk_119:not(#\9)::after {
187
187
  border-top-left-radius: 0;
188
188
  border-top-right-radius: 0;
189
189
  }
190
- .awsui_root_14iqq_1l9ij_97.awsui_variant-stacked_14iqq_1l9ij_119 + .awsui_root_14iqq_1l9ij_97.awsui_variant-stacked_14iqq_1l9ij_119:not(#\9):not(.awsui_refresh_14iqq_1l9ij_124)::before {
190
+ .awsui_root_14iqq_19uqk_97.awsui_variant-stacked_14iqq_19uqk_119 + .awsui_root_14iqq_19uqk_97.awsui_variant-stacked_14iqq_19uqk_119:not(#\9):not(.awsui_refresh_14iqq_19uqk_124)::before {
191
191
  border-top: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
192
192
  }
193
- .awsui_root_14iqq_1l9ij_97.awsui_sticky-enabled_14iqq_1l9ij_167:not(#\9):not(.awsui_refresh_14iqq_1l9ij_124)::before {
193
+ .awsui_root_14iqq_19uqk_97.awsui_sticky-enabled_14iqq_19uqk_167:not(#\9):not(.awsui_refresh_14iqq_19uqk_124)::before {
194
194
  top: calc(-1 * var(--border-container-top-width-uugwwl, 0px));
195
195
  }
196
- .awsui_root_14iqq_1l9ij_97.awsui_sticky-enabled_14iqq_1l9ij_167:not(#\9):not(.awsui_refresh_14iqq_1l9ij_124).awsui_variant-stacked_14iqq_1l9ij_119::before {
196
+ .awsui_root_14iqq_19uqk_97.awsui_sticky-enabled_14iqq_19uqk_167:not(#\9):not(.awsui_refresh_14iqq_19uqk_124).awsui_variant-stacked_14iqq_19uqk_119::before {
197
197
  top: calc(-1 * var(--border-divider-section-width-1061zr, 1px));
198
198
  }
199
199
 
200
- .awsui_with-side-media_14iqq_1l9ij_116:not(#\9) {
200
+ .awsui_with-side-media_14iqq_19uqk_116:not(#\9) {
201
201
  display: flex;
202
202
  flex-direction: row;
203
203
  }
204
204
 
205
- .awsui_with-top-media_14iqq_1l9ij_179:not(#\9) {
205
+ .awsui_with-top-media_14iqq_19uqk_179:not(#\9) {
206
206
  display: flex;
207
207
  flex-direction: column;
208
208
  }
209
209
 
210
- .awsui_content-wrapper_14iqq_1l9ij_184:not(#\9) {
210
+ .awsui_content-wrapper_14iqq_19uqk_184:not(#\9) {
211
211
  display: flex;
212
212
  flex-direction: column;
213
213
  width: 100%;
214
214
  }
215
- .awsui_content-wrapper-fit-height_14iqq_1l9ij_189:not(#\9) {
215
+ .awsui_content-wrapper-fit-height_14iqq_19uqk_189:not(#\9) {
216
216
  height: 100%;
217
217
  overflow: hidden;
218
218
  }
219
219
 
220
- .awsui_media_14iqq_1l9ij_194:not(#\9) {
220
+ .awsui_media_14iqq_19uqk_194:not(#\9) {
221
221
  overflow: hidden;
222
222
  flex-shrink: 0;
223
223
  }
224
- .awsui_media_14iqq_1l9ij_194 img:not(#\9),
225
- .awsui_media_14iqq_1l9ij_194 video:not(#\9),
226
- .awsui_media_14iqq_1l9ij_194 picture:not(#\9) {
224
+ .awsui_media_14iqq_19uqk_194 img:not(#\9),
225
+ .awsui_media_14iqq_19uqk_194 video:not(#\9),
226
+ .awsui_media_14iqq_19uqk_194 picture:not(#\9) {
227
227
  width: 100%;
228
228
  height: 100%;
229
229
  object-fit: cover;
230
230
  object-position: center;
231
231
  }
232
- .awsui_media_14iqq_1l9ij_194 iframe:not(#\9) {
232
+ .awsui_media_14iqq_19uqk_194 iframe:not(#\9) {
233
233
  width: 100%;
234
234
  height: 100%;
235
235
  border: 0;
236
236
  }
237
- .awsui_media-top_14iqq_1l9ij_211:not(#\9) {
237
+ .awsui_media-top_14iqq_19uqk_211:not(#\9) {
238
238
  max-height: 66%;
239
- border-top-left-radius: var(--border-radius-container-wqv1zi, 16px);
240
- border-top-right-radius: var(--border-radius-container-wqv1zi, 16px);
239
+ border-top-left-radius: calc(var(--border-radius-container-wqv1zi, 16px) - 1px);
240
+ border-top-right-radius: calc(var(--border-radius-container-wqv1zi, 16px) - 1px);
241
241
  }
242
- .awsui_media-side_14iqq_1l9ij_216:not(#\9) {
242
+ .awsui_media-side_14iqq_19uqk_216:not(#\9) {
243
243
  max-width: 66%;
244
- border-top-left-radius: var(--border-radius-container-wqv1zi, 16px);
245
- border-bottom-left-radius: var(--border-radius-container-wqv1zi, 16px);
244
+ border-top-left-radius: calc(var(--border-radius-container-wqv1zi, 16px) - 1px);
245
+ border-bottom-left-radius: calc(var(--border-radius-container-wqv1zi, 16px) - 1px);
246
246
  }
247
247
 
248
- .awsui_header_14iqq_1l9ij_222:not(#\9) {
248
+ .awsui_header_14iqq_19uqk_222:not(#\9) {
249
249
  background-color: var(--color-background-container-header-8b9fgi, #ffffff);
250
250
  border-top-left-radius: var(--border-radius-container-wqv1zi, 16px);
251
251
  border-top-right-radius: var(--border-radius-container-wqv1zi, 16px);
252
252
  }
253
- .awsui_header_14iqq_1l9ij_222.awsui_header-with-media_14iqq_1l9ij_227:not(#\9) {
253
+ .awsui_header_14iqq_19uqk_222.awsui_header-with-media_14iqq_19uqk_227:not(#\9) {
254
254
  background: none;
255
255
  }
256
- .awsui_header_14iqq_1l9ij_222.awsui_header-with-media_14iqq_1l9ij_227:not(#\9):not(:empty) {
256
+ .awsui_header_14iqq_19uqk_222.awsui_header-with-media_14iqq_19uqk_227:not(#\9):not(:empty) {
257
257
  border-bottom: none;
258
258
  }
259
- .awsui_header-sticky-disabled_14iqq_1l9ij_233:not(#\9) {
259
+ .awsui_header-sticky-disabled_14iqq_19uqk_233:not(#\9) {
260
260
  position: relative;
261
261
  z-index: 1;
262
262
  }
263
- .awsui_header-sticky-enabled_14iqq_1l9ij_237:not(#\9) {
263
+ .awsui_header-sticky-enabled_14iqq_19uqk_237:not(#\9) {
264
264
  top: 0;
265
265
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
266
266
  position: sticky;
267
267
  z-index: 800;
268
268
  }
269
- .awsui_header-stuck_14iqq_1l9ij_243:not(#\9) {
269
+ .awsui_header-stuck_14iqq_19uqk_243:not(#\9) {
270
270
  border-radius: 0;
271
271
  }
272
- .awsui_header-stuck_14iqq_1l9ij_243:not(#\9)::before {
272
+ .awsui_header-stuck_14iqq_19uqk_243:not(#\9)::before {
273
273
  border: 0;
274
274
  }
275
- .awsui_header-stuck_14iqq_1l9ij_243:not(#\9):not(.awsui_header-variant-cards_14iqq_1l9ij_249) {
275
+ .awsui_header-stuck_14iqq_19uqk_243:not(#\9):not(.awsui_header-variant-cards_14iqq_19uqk_249) {
276
276
  box-shadow: var(--shadow-sticky-embedded-uvh5ry, 0px 2px 0px 0px #e9ebed, 0px 16px 16px -12px rgba(0, 7, 22, 0.1));
277
277
  }
278
- .awsui_header-dynamic-height_14iqq_1l9ij_252.awsui_header-stuck_14iqq_1l9ij_243:not(#\9) {
278
+ .awsui_header-dynamic-height_14iqq_19uqk_252.awsui_header-stuck_14iqq_19uqk_243:not(#\9) {
279
279
  margin-bottom: calc(var(--line-height-heading-xl-avbttk, 30px) - var(--line-height-heading-l-mmm3my, 24px));
280
280
  }
281
- .awsui_header_14iqq_1l9ij_222:not(#\9):not(:empty) {
281
+ .awsui_header_14iqq_19uqk_222:not(#\9):not(:empty) {
282
282
  border-bottom: var(--border-container-sticky-width-6asz33, 0px) solid var(--color-border-container-divider-p2uygo, transparent);
283
283
  }
284
- .awsui_header_14iqq_1l9ij_222.awsui_with-paddings_14iqq_1l9ij_258:not(#\9) {
284
+ .awsui_header_14iqq_19uqk_222.awsui_with-paddings_14iqq_19uqk_258:not(#\9) {
285
285
  padding: var(--space-container-header-top-5qav00, 12px) var(--space-container-horizontal-wfukh3, 20px) var(--space-container-header-bottom-vj01hn, 8px);
286
286
  }
287
- .awsui_header_14iqq_1l9ij_222.awsui_with-paddings_14iqq_1l9ij_258.awsui_header-variant-cards_14iqq_1l9ij_249:not(#\9) {
287
+ .awsui_header_14iqq_19uqk_222.awsui_with-paddings_14iqq_19uqk_258.awsui_header-variant-cards_14iqq_19uqk_249:not(#\9) {
288
288
  padding: var(--space-container-header-top-5qav00, 12px) var(--space-container-horizontal-wfukh3, 20px);
289
289
  }
290
- .awsui_header_14iqq_1l9ij_222.awsui_with-hidden-content_14iqq_1l9ij_264:not(#\9) {
290
+ .awsui_header_14iqq_19uqk_222.awsui_with-hidden-content_14iqq_19uqk_264:not(#\9) {
291
291
  border-bottom-left-radius: var(--border-radius-container-wqv1zi, 16px);
292
292
  border-bottom-right-radius: var(--border-radius-container-wqv1zi, 16px);
293
293
  }
294
- .awsui_header-variant-cards_14iqq_1l9ij_249:not(#\9) {
294
+ .awsui_header-variant-cards_14iqq_19uqk_249:not(#\9) {
295
295
  border-radius: var(--border-radius-container-wqv1zi, 16px);
296
296
  box-sizing: border-box;
297
297
  }
298
- .awsui_header-variant-cards_14iqq_1l9ij_249.awsui_refresh_14iqq_1l9ij_124:not(#\9) {
298
+ .awsui_header-variant-cards_14iqq_19uqk_249.awsui_refresh_14iqq_19uqk_124:not(#\9) {
299
299
  border: solid var(--border-divider-section-width-1061zr, 1px) var(--color-border-divider-default-j74lyz, #b6bec9);
300
300
  }
301
- .awsui_header-variant-cards_14iqq_1l9ij_249:not(#\9):not(.awsui_refresh_14iqq_1l9ij_124)::before {
301
+ .awsui_header-variant-cards_14iqq_19uqk_249:not(#\9):not(.awsui_refresh_14iqq_19uqk_124)::before {
302
302
  content: "";
303
303
  position: absolute;
304
304
  left: 0px;
@@ -313,7 +313,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
313
313
  border-radius: var(--border-radius-container-wqv1zi, 16px);
314
314
  z-index: 1;
315
315
  }
316
- .awsui_header-variant-cards_14iqq_1l9ij_249:not(#\9):not(.awsui_refresh_14iqq_1l9ij_124)::after {
316
+ .awsui_header-variant-cards_14iqq_19uqk_249:not(#\9):not(.awsui_refresh_14iqq_19uqk_124)::after {
317
317
  content: "";
318
318
  position: absolute;
319
319
  left: 0px;
@@ -326,18 +326,18 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
326
326
  border-radius: var(--border-radius-container-wqv1zi, 16px);
327
327
  box-shadow: var(--shadow-container-fxmdn3, 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12));
328
328
  }
329
- .awsui_header-variant-cards_14iqq_1l9ij_249:not(#\9):not(.awsui_header-sticky-enabled_14iqq_1l9ij_237) {
329
+ .awsui_header-variant-cards_14iqq_19uqk_249:not(#\9):not(.awsui_header-sticky-enabled_14iqq_19uqk_237) {
330
330
  position: relative;
331
331
  }
332
- .awsui_header-variant-cards_14iqq_1l9ij_249.awsui_header-stuck_14iqq_1l9ij_243:not(#\9)::after, .awsui_header-variant-cards_14iqq_1l9ij_249.awsui_header-stuck_14iqq_1l9ij_243:not(#\9)::before {
332
+ .awsui_header-variant-cards_14iqq_19uqk_249.awsui_header-stuck_14iqq_19uqk_243:not(#\9)::after, .awsui_header-variant-cards_14iqq_19uqk_249.awsui_header-stuck_14iqq_19uqk_243:not(#\9)::before {
333
333
  border: 0;
334
334
  border-top-left-radius: 0;
335
335
  border-top-right-radius: 0;
336
336
  }
337
- .awsui_header-variant-full-page_14iqq_1l9ij_311.awsui_header-stuck_14iqq_1l9ij_243:not(#\9) {
337
+ .awsui_header-variant-full-page_14iqq_19uqk_311.awsui_header-stuck_14iqq_19uqk_243:not(#\9) {
338
338
  box-shadow: none;
339
339
  }
340
- .awsui_header-variant-full-page_14iqq_1l9ij_311.awsui_header-stuck_14iqq_1l9ij_243:not(#\9)::after {
340
+ .awsui_header-variant-full-page_14iqq_19uqk_311.awsui_header-stuck_14iqq_19uqk_243:not(#\9)::after {
341
341
  content: "";
342
342
  position: absolute;
343
343
  right: 0;
@@ -352,30 +352,30 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
352
352
  The dynamic height dark header needs a background that will cover
353
353
  the default white background of the container component.
354
354
  */
355
- .awsui_dark-header_14iqq_1l9ij_329:not(#\9) {
355
+ .awsui_dark-header_14iqq_19uqk_329:not(#\9) {
356
356
  background-color: var(--color-background-layout-main-nx09lr, #ffffff);
357
357
  color: var(--color-text-body-default-at06ol, #000716);
358
358
  }
359
359
 
360
- .awsui_content_14iqq_1l9ij_184:not(#\9) {
360
+ .awsui_content_14iqq_19uqk_184:not(#\9) {
361
361
  flex: 1;
362
362
  }
363
- .awsui_content-fit-height_14iqq_1l9ij_337:not(#\9) {
363
+ .awsui_content-fit-height_14iqq_19uqk_337:not(#\9) {
364
364
  overflow: auto;
365
365
  }
366
- .awsui_content_14iqq_1l9ij_184.awsui_with-paddings_14iqq_1l9ij_258:not(#\9) {
366
+ .awsui_content_14iqq_19uqk_184.awsui_with-paddings_14iqq_19uqk_258:not(#\9) {
367
367
  padding: var(--space-scaled-l-0hpmd7, 20px) var(--space-container-horizontal-wfukh3, 20px);
368
368
  }
369
- .awsui_header_14iqq_1l9ij_222 + .awsui_content_14iqq_1l9ij_184.awsui_with-paddings_14iqq_1l9ij_258:not(#\9) {
369
+ .awsui_header_14iqq_19uqk_222 + .awsui_content_14iqq_19uqk_184.awsui_with-paddings_14iqq_19uqk_258:not(#\9) {
370
370
  padding-top: var(--space-container-content-top-1ae0r3, 4px);
371
371
  }
372
- .awsui_header_14iqq_1l9ij_222 + .awsui_content_14iqq_1l9ij_184.awsui_with-paddings_14iqq_1l9ij_258.awsui_content-with-media_14iqq_1l9ij_346:not(#\9) {
372
+ .awsui_header_14iqq_19uqk_222 + .awsui_content_14iqq_19uqk_184.awsui_with-paddings_14iqq_19uqk_258.awsui_content-with-media_14iqq_19uqk_346:not(#\9) {
373
373
  padding-top: 0;
374
374
  }
375
375
 
376
- .awsui_footer_14iqq_1l9ij_350.awsui_with-paddings_14iqq_1l9ij_258:not(#\9) {
376
+ .awsui_footer_14iqq_19uqk_350.awsui_with-paddings_14iqq_19uqk_258:not(#\9) {
377
377
  padding: var(--space-scaled-s-aqzyko, 12px) var(--space-container-horizontal-wfukh3, 20px);
378
378
  }
379
- .awsui_footer_14iqq_1l9ij_350.awsui_with-divider_14iqq_1l9ij_353:not(#\9) {
379
+ .awsui_footer_14iqq_19uqk_350.awsui_with-divider_14iqq_19uqk_353:not(#\9) {
380
380
  border-top: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
381
381
  }
package/container/styles.selectors.js CHANGED
@@ -2,34 +2,34 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "root": "awsui_root_14iqq_1l9ij_97",
6
- "fit-height": "awsui_fit-height_14iqq_1l9ij_111",
7
- "with-side-media": "awsui_with-side-media_14iqq_1l9ij_116",
8
- "variant-default": "awsui_variant-default_14iqq_1l9ij_119",
9
- "variant-stacked": "awsui_variant-stacked_14iqq_1l9ij_119",
10
- "refresh": "awsui_refresh_14iqq_1l9ij_124",
11
- "sticky-enabled": "awsui_sticky-enabled_14iqq_1l9ij_167",
12
- "with-top-media": "awsui_with-top-media_14iqq_1l9ij_179",
13
- "content-wrapper": "awsui_content-wrapper_14iqq_1l9ij_184",
14
- "content-wrapper-fit-height": "awsui_content-wrapper-fit-height_14iqq_1l9ij_189",
15
- "media": "awsui_media_14iqq_1l9ij_194",
16
- "media-top": "awsui_media-top_14iqq_1l9ij_211",
17
- "media-side": "awsui_media-side_14iqq_1l9ij_216",
18
- "header": "awsui_header_14iqq_1l9ij_222",
19
- "header-with-media": "awsui_header-with-media_14iqq_1l9ij_227",
20
- "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_1l9ij_233",
21
- "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_1l9ij_237",
22
- "header-stuck": "awsui_header-stuck_14iqq_1l9ij_243",
23
- "header-variant-cards": "awsui_header-variant-cards_14iqq_1l9ij_249",
24
- "header-dynamic-height": "awsui_header-dynamic-height_14iqq_1l9ij_252",
25
- "with-paddings": "awsui_with-paddings_14iqq_1l9ij_258",
26
- "with-hidden-content": "awsui_with-hidden-content_14iqq_1l9ij_264",
27
- "header-variant-full-page": "awsui_header-variant-full-page_14iqq_1l9ij_311",
28
- "dark-header": "awsui_dark-header_14iqq_1l9ij_329",
29
- "content": "awsui_content_14iqq_1l9ij_184",
30
- "content-fit-height": "awsui_content-fit-height_14iqq_1l9ij_337",
31
- "content-with-media": "awsui_content-with-media_14iqq_1l9ij_346",
32
- "footer": "awsui_footer_14iqq_1l9ij_350",
33
- "with-divider": "awsui_with-divider_14iqq_1l9ij_353"
5
+ "root": "awsui_root_14iqq_19uqk_97",
6
+ "fit-height": "awsui_fit-height_14iqq_19uqk_111",
7
+ "with-side-media": "awsui_with-side-media_14iqq_19uqk_116",
8
+ "variant-default": "awsui_variant-default_14iqq_19uqk_119",
9
+ "variant-stacked": "awsui_variant-stacked_14iqq_19uqk_119",
10
+ "refresh": "awsui_refresh_14iqq_19uqk_124",
11
+ "sticky-enabled": "awsui_sticky-enabled_14iqq_19uqk_167",
12
+ "with-top-media": "awsui_with-top-media_14iqq_19uqk_179",
13
+ "content-wrapper": "awsui_content-wrapper_14iqq_19uqk_184",
14
+ "content-wrapper-fit-height": "awsui_content-wrapper-fit-height_14iqq_19uqk_189",
15
+ "media": "awsui_media_14iqq_19uqk_194",
16
+ "media-top": "awsui_media-top_14iqq_19uqk_211",
17
+ "media-side": "awsui_media-side_14iqq_19uqk_216",
18
+ "header": "awsui_header_14iqq_19uqk_222",
19
+ "header-with-media": "awsui_header-with-media_14iqq_19uqk_227",
20
+ "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_19uqk_233",
21
+ "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_19uqk_237",
22
+ "header-stuck": "awsui_header-stuck_14iqq_19uqk_243",
23
+ "header-variant-cards": "awsui_header-variant-cards_14iqq_19uqk_249",
24
+ "header-dynamic-height": "awsui_header-dynamic-height_14iqq_19uqk_252",
25
+ "with-paddings": "awsui_with-paddings_14iqq_19uqk_258",
26
+ "with-hidden-content": "awsui_with-hidden-content_14iqq_19uqk_264",
27
+ "header-variant-full-page": "awsui_header-variant-full-page_14iqq_19uqk_311",
28
+ "dark-header": "awsui_dark-header_14iqq_19uqk_329",
29
+ "content": "awsui_content_14iqq_19uqk_184",
30
+ "content-fit-height": "awsui_content-fit-height_14iqq_19uqk_337",
31
+ "content-with-media": "awsui_content-with-media_14iqq_19uqk_346",
32
+ "footer": "awsui_footer_14iqq_19uqk_350",
33
+ "with-divider": "awsui_with-divider_14iqq_19uqk_353"
34
34
  };
35
35
 
package/internal/environment.js CHANGED
@@ -1,4 +1,4 @@
1
1
  export var PACKAGE_SOURCE = "components";
2
- export var PACKAGE_VERSION = "3.0.0 (e05bd812)";
2
+ export var PACKAGE_VERSION = "3.0.0 (53ed8f10)";
3
3
  export var THEME = "open-source-visual-refresh";
4
4
  export var ALWAYS_VISUAL_REFRESH = true;
package/internal/environment.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "PACKAGE_SOURCE": "components",
3
- "PACKAGE_VERSION": "3.0.0 (e05bd812)",
3
+ "PACKAGE_VERSION": "3.0.0 (53ed8f10)",
4
4
  "THEME": "default",
5
5
  "ALWAYS_VISUAL_REFRESH": false
6
6
  }
package/internal/manifest.json CHANGED
@@ -1,3 +1,3 @@
1
1
  {
2
- "commit": "e05bd812e006b2a8059557cdbad03d2efcf43995"
2
+ "commit": "53ed8f10de96e00edf57dad108cea40110946860"
3
3
  }
package/package.json CHANGED
@@ -1 +1 @@
1
- {"name":"@cloudscape-design/components","main":"./index.js","exports":{".":"./index.js","./package.json":"./package.json","./theming":"./theming/index.js","./test-utils/dom":"./test-utils/dom/index.js","./test-utils/selectors":"./test-utils/selectors/index.js","./interfaces":"./interfaces.js","./contexts/form-field":"./contexts/form-field.js","./alert":"./alert/index.js","./anchor-navigation":"./anchor-navigation/index.js","./annotation-context":"./annotation-context/index.js","./app-layout":"./app-layout/index.js","./area-chart":"./area-chart/index.js","./attribute-editor":"./attribute-editor/index.js","./autosuggest":"./autosuggest/index.js","./badge":"./badge/index.js","./bar-chart":"./bar-chart/index.js","./box":"./box/index.js","./breadcrumb-group":"./breadcrumb-group/index.js","./button":"./button/index.js","./button-dropdown":"./button-dropdown/index.js","./calendar":"./calendar/index.js","./cards":"./cards/index.js","./checkbox":"./checkbox/index.js","./code-editor":"./code-editor/index.js","./collection-preferences":"./collection-preferences/index.js","./column-layout":"./column-layout/index.js","./container":"./container/index.js","./content-layout":"./content-layout/index.js","./date-input":"./date-input/index.js","./date-picker":"./date-picker/index.js","./date-range-picker":"./date-range-picker/index.js","./drawer":"./drawer/index.js","./expandable-section":"./expandable-section/index.js","./file-upload":"./file-upload/index.js","./flashbar":"./flashbar/index.js","./form":"./form/index.js","./form-field":"./form-field/index.js","./grid":"./grid/index.js","./header":"./header/index.js","./help-panel":"./help-panel/index.js","./hotspot":"./hotspot/index.js","./icon":"./icon/index.js","./input":"./input/index.js","./line-chart":"./line-chart/index.js","./link":"./link/index.js","./mixed-line-bar-chart":"./mixed-line-bar-chart/index.js","./modal":"./modal/index.js","./multiselect":"./multiselect/index.js","./pagination":"./pagination/index.js","./pie-chart":"./pie-chart/index.js","./popover":"./popover/index.js","./progress-bar":"./progress-bar/index.js","./property-filter":"./property-filter/index.js","./radio-group":"./radio-group/index.js","./s3-resource-selector":"./s3-resource-selector/index.js","./segmented-control":"./segmented-control/index.js","./select":"./select/index.js","./side-navigation":"./side-navigation/index.js","./space-between":"./space-between/index.js","./spinner":"./spinner/index.js","./split-panel":"./split-panel/index.js","./status-indicator":"./status-indicator/index.js","./table":"./table/index.js","./tabs":"./tabs/index.js","./tag-editor":"./tag-editor/index.js","./text-content":"./text-content/index.js","./text-filter":"./text-filter/index.js","./textarea":"./textarea/index.js","./tiles":"./tiles/index.js","./time-input":"./time-input/index.js","./toggle":"./toggle/index.js","./token-group":"./token-group/index.js","./top-navigation":"./top-navigation/index.js","./tutorial-panel":"./tutorial-panel/index.js","./wizard":"./wizard/index.js","./top-navigation/1.0-beta":"./top-navigation/1.0-beta/index.js","./i18n":"./i18n/index.js","./i18n/messages/all.all":"./i18n/messages/all.all.js","./i18n/messages/all.all.json":"./i18n/messages/all.all.json","./i18n/messages/all.de":"./i18n/messages/all.de.js","./i18n/messages/all.de.json":"./i18n/messages/all.de.json","./i18n/messages/all.en-GB":"./i18n/messages/all.en-GB.js","./i18n/messages/all.en-GB.json":"./i18n/messages/all.en-GB.json","./i18n/messages/all.en":"./i18n/messages/all.en.js","./i18n/messages/all.en.json":"./i18n/messages/all.en.json","./i18n/messages/all.es":"./i18n/messages/all.es.js","./i18n/messages/all.es.json":"./i18n/messages/all.es.json","./i18n/messages/all.fr":"./i18n/messages/all.fr.js","./i18n/messages/all.fr.json":"./i18n/messages/all.fr.json","./i18n/messages/all.id":"./i18n/messages/all.id.js","./i18n/messages/all.id.json":"./i18n/messages/all.id.json","./i18n/messages/all.it":"./i18n/messages/all.it.js","./i18n/messages/all.it.json":"./i18n/messages/all.it.json","./i18n/messages/all.ja":"./i18n/messages/all.ja.js","./i18n/messages/all.ja.json":"./i18n/messages/all.ja.json","./i18n/messages/all.ko":"./i18n/messages/all.ko.js","./i18n/messages/all.ko.json":"./i18n/messages/all.ko.json","./i18n/messages/all.pt-BR":"./i18n/messages/all.pt-BR.js","./i18n/messages/all.pt-BR.json":"./i18n/messages/all.pt-BR.json","./i18n/messages/all.th":"./i18n/messages/all.th.js","./i18n/messages/all.th.json":"./i18n/messages/all.th.json","./i18n/messages/all.tr":"./i18n/messages/all.tr.js","./i18n/messages/all.tr.json":"./i18n/messages/all.tr.json","./i18n/messages/all.zh-CN":"./i18n/messages/all.zh-CN.js","./i18n/messages/all.zh-CN.json":"./i18n/messages/all.zh-CN.json","./i18n/messages/all.zh-TW":"./i18n/messages/all.zh-TW.js","./i18n/messages/all.zh-TW.json":"./i18n/messages/all.zh-TW.json"},"sideEffects":["*.css","./internal/base-component/index.js","./internal/base-component/styles.css.js"],"version":"3.0.480","repository":{"type":"git","url":"https://github.com/cloudscape-design/components.git"},"homepage":"https://cloudscape.design","dependencies":{"@cloudscape-design/collection-hooks":"^1.0.0","@cloudscape-design/component-toolkit":"^1.0.0-beta","@cloudscape-design/test-utils-core":"^1.0.0","@cloudscape-design/theming-runtime":"^1.0.0","@dnd-kit/core":"^6.0.8","@dnd-kit/sortable":"^7.0.2","@dnd-kit/utilities":"^3.2.1","@juggle/resize-observer":"^3.3.1","ace-builds":"^1.23.0","balanced-match":"^1.0.2","clsx":"^1.1.0","d3-shape":"^1.3.7","date-fns":"^2.25.0","intl-messageformat":"^10.3.1","mnth":"^2.0.0","react-keyed-flatten-children":"^1.3.0","react-transition-group":"^4.4.2","react-virtual":"^2.8.2","tslib":"^2.4.0","weekstart":"^1.1.0"},"peerDependencies":{"react":"^16.8 || ^17 || ^18","react-dom":"^16.8 || ^17 || ^18"},"license":"Apache-2.0"}
1
+ {"name":"@cloudscape-design/components","main":"./index.js","exports":{".":"./index.js","./package.json":"./package.json","./theming":"./theming/index.js","./test-utils/dom":"./test-utils/dom/index.js","./test-utils/selectors":"./test-utils/selectors/index.js","./interfaces":"./interfaces.js","./contexts/form-field":"./contexts/form-field.js","./alert":"./alert/index.js","./anchor-navigation":"./anchor-navigation/index.js","./annotation-context":"./annotation-context/index.js","./app-layout":"./app-layout/index.js","./area-chart":"./area-chart/index.js","./attribute-editor":"./attribute-editor/index.js","./autosuggest":"./autosuggest/index.js","./badge":"./badge/index.js","./bar-chart":"./bar-chart/index.js","./box":"./box/index.js","./breadcrumb-group":"./breadcrumb-group/index.js","./button":"./button/index.js","./button-dropdown":"./button-dropdown/index.js","./calendar":"./calendar/index.js","./cards":"./cards/index.js","./checkbox":"./checkbox/index.js","./code-editor":"./code-editor/index.js","./collection-preferences":"./collection-preferences/index.js","./column-layout":"./column-layout/index.js","./container":"./container/index.js","./content-layout":"./content-layout/index.js","./date-input":"./date-input/index.js","./date-picker":"./date-picker/index.js","./date-range-picker":"./date-range-picker/index.js","./drawer":"./drawer/index.js","./expandable-section":"./expandable-section/index.js","./file-upload":"./file-upload/index.js","./flashbar":"./flashbar/index.js","./form":"./form/index.js","./form-field":"./form-field/index.js","./grid":"./grid/index.js","./header":"./header/index.js","./help-panel":"./help-panel/index.js","./hotspot":"./hotspot/index.js","./icon":"./icon/index.js","./input":"./input/index.js","./line-chart":"./line-chart/index.js","./link":"./link/index.js","./mixed-line-bar-chart":"./mixed-line-bar-chart/index.js","./modal":"./modal/index.js","./multiselect":"./multiselect/index.js","./pagination":"./pagination/index.js","./pie-chart":"./pie-chart/index.js","./popover":"./popover/index.js","./progress-bar":"./progress-bar/index.js","./property-filter":"./property-filter/index.js","./radio-group":"./radio-group/index.js","./s3-resource-selector":"./s3-resource-selector/index.js","./segmented-control":"./segmented-control/index.js","./select":"./select/index.js","./side-navigation":"./side-navigation/index.js","./space-between":"./space-between/index.js","./spinner":"./spinner/index.js","./split-panel":"./split-panel/index.js","./status-indicator":"./status-indicator/index.js","./table":"./table/index.js","./tabs":"./tabs/index.js","./tag-editor":"./tag-editor/index.js","./text-content":"./text-content/index.js","./text-filter":"./text-filter/index.js","./textarea":"./textarea/index.js","./tiles":"./tiles/index.js","./time-input":"./time-input/index.js","./toggle":"./toggle/index.js","./token-group":"./token-group/index.js","./top-navigation":"./top-navigation/index.js","./tutorial-panel":"./tutorial-panel/index.js","./wizard":"./wizard/index.js","./top-navigation/1.0-beta":"./top-navigation/1.0-beta/index.js","./i18n":"./i18n/index.js","./i18n/messages/all.all":"./i18n/messages/all.all.js","./i18n/messages/all.all.json":"./i18n/messages/all.all.json","./i18n/messages/all.de":"./i18n/messages/all.de.js","./i18n/messages/all.de.json":"./i18n/messages/all.de.json","./i18n/messages/all.en-GB":"./i18n/messages/all.en-GB.js","./i18n/messages/all.en-GB.json":"./i18n/messages/all.en-GB.json","./i18n/messages/all.en":"./i18n/messages/all.en.js","./i18n/messages/all.en.json":"./i18n/messages/all.en.json","./i18n/messages/all.es":"./i18n/messages/all.es.js","./i18n/messages/all.es.json":"./i18n/messages/all.es.json","./i18n/messages/all.fr":"./i18n/messages/all.fr.js","./i18n/messages/all.fr.json":"./i18n/messages/all.fr.json","./i18n/messages/all.id":"./i18n/messages/all.id.js","./i18n/messages/all.id.json":"./i18n/messages/all.id.json","./i18n/messages/all.it":"./i18n/messages/all.it.js","./i18n/messages/all.it.json":"./i18n/messages/all.it.json","./i18n/messages/all.ja":"./i18n/messages/all.ja.js","./i18n/messages/all.ja.json":"./i18n/messages/all.ja.json","./i18n/messages/all.ko":"./i18n/messages/all.ko.js","./i18n/messages/all.ko.json":"./i18n/messages/all.ko.json","./i18n/messages/all.pt-BR":"./i18n/messages/all.pt-BR.js","./i18n/messages/all.pt-BR.json":"./i18n/messages/all.pt-BR.json","./i18n/messages/all.th":"./i18n/messages/all.th.js","./i18n/messages/all.th.json":"./i18n/messages/all.th.json","./i18n/messages/all.tr":"./i18n/messages/all.tr.js","./i18n/messages/all.tr.json":"./i18n/messages/all.tr.json","./i18n/messages/all.zh-CN":"./i18n/messages/all.zh-CN.js","./i18n/messages/all.zh-CN.json":"./i18n/messages/all.zh-CN.json","./i18n/messages/all.zh-TW":"./i18n/messages/all.zh-TW.js","./i18n/messages/all.zh-TW.json":"./i18n/messages/all.zh-TW.json"},"sideEffects":["*.css","./internal/base-component/index.js","./internal/base-component/styles.css.js"],"version":"3.0.482","repository":{"type":"git","url":"https://github.com/cloudscape-design/components.git"},"homepage":"https://cloudscape.design","dependencies":{"@cloudscape-design/collection-hooks":"^1.0.0","@cloudscape-design/component-toolkit":"^1.0.0-beta","@cloudscape-design/test-utils-core":"^1.0.0","@cloudscape-design/theming-runtime":"^1.0.0","@dnd-kit/core":"^6.0.8","@dnd-kit/sortable":"^7.0.2","@dnd-kit/utilities":"^3.2.1","@juggle/resize-observer":"^3.3.1","ace-builds":"^1.23.0","balanced-match":"^1.0.2","clsx":"^1.1.0","d3-shape":"^1.3.7","date-fns":"^2.25.0","intl-messageformat":"^10.3.1","mnth":"^2.0.0","react-keyed-flatten-children":"^1.3.0","react-transition-group":"^4.4.2","react-virtual":"^2.8.2","tslib":"^2.4.0","weekstart":"^1.1.0"},"peerDependencies":{"react":"^16.8 || ^17 || ^18","react-dom":"^16.8 || ^17 || ^18"},"license":"Apache-2.0"}
package/tabs/index.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import { TabsProps } from './interfaces';
3
3
  export { TabsProps };
4
- export declare const nextGeneratedId: () => string;
5
4
  export default function Tabs({ tabs, variant, onChange, activeTabId: controlledTabId, ariaLabel, ariaLabelledby, disableContentPaddings, i18nStrings, ...rest }: TabsProps): JSX.Element;
6
5
  //# sourceMappingURL=index.d.ts.map
package/tabs/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["tabs/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AASzC,OAAO,EAAE,SAAS,EAAE,CAAC;AAGrB,eAAO,MAAM,eAAe,cAA+E,CAAC;AAU5G,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,OAAmB,EACnB,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,SAAS,EACT,cAAc,EACd,sBAA8B,EAC9B,WAAW,EACX,GAAG,IAAI,EACR,EAAE,SAAS,eA4FX"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["tabs/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAUzC,OAAO,EAAE,SAAS,EAAE,CAAC;AAUrB,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,OAAmB,EACnB,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,SAAS,EACT,cAAc,EACd,sBAA8B,EAC9B,WAAW,EACX,GAAG,IAAI,EACR,EAAE,SAAS,eA4FX"}
package/tabs/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { __rest } from "tslib";
2
2
  // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
3
3
  // SPDX-License-Identifier: Apache-2.0
4
- import React, { useState } from 'react';
4
+ import React from 'react';
5
5
  import { getBaseProps } from '../internal/base-component';
6
6
  import { fireNonCancelableEvent } from '../internal/events';
7
7
  import InternalContainer from '../container/internal';
@@ -12,8 +12,7 @@ import { useControllable } from '../internal/hooks/use-controllable';
12
12
  import { applyDisplayName } from '../internal/utils/apply-display-name';
13
13
  import useBaseComponent from '../internal/hooks/use-base-component';
14
14
  import { checkSafeUrl } from '../internal/utils/check-safe-url';
15
- let lastGeneratedId = 0;
16
- export const nextGeneratedId = () => `awsui-tabs-${lastGeneratedId++}-${Math.round(Math.random() * 10000)}`;
15
+ import { useUniqueId } from '../internal/hooks/use-unique-id';
17
16
  function firstEnabledTab(tabs) {
18
17
  const enabledTabs = tabs.filter(tab => !tab.disabled);
19
18
  if (enabledTabs.length > 0) {
@@ -28,7 +27,7 @@ export default function Tabs(_a) {
28
27
  checkSafeUrl('Tabs', tab.href);
29
28
  }
30
29
  const { __internalRootRef } = useBaseComponent('Tabs');
31
- const [idNamespace] = useState(() => nextGeneratedId());
30
+ const idNamespace = useUniqueId('awsui-tabs-');
32
31
  const [activeTabId, setActiveTabId] = useControllable(controlledTabId, onChange, (_c = (_b = firstEnabledTab(tabs)) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : '', {
33
32
  componentName: 'Tabs',
34
33
  controlledProp: 'activeTabId',
package/tabs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["tabs/index.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 React, { useState } from 'react';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport InternalContainer from '../container/internal';\nimport { TabsProps } from './interfaces';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { getTabElementId, TabHeaderBar } from './tab-header-bar';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\n\nexport { TabsProps };\n\nlet lastGeneratedId = 0;\nexport const nextGeneratedId = () => `awsui-tabs-${lastGeneratedId++}-${Math.round(Math.random() * 10000)}`;\n\nfunction firstEnabledTab(tabs: ReadonlyArray<TabsProps.Tab>) {\n const enabledTabs = tabs.filter(tab => !tab.disabled);\n if (enabledTabs.length > 0) {\n return enabledTabs[0];\n }\n return null;\n}\n\nexport default function Tabs({\n tabs,\n variant = 'default',\n onChange,\n activeTabId: controlledTabId,\n ariaLabel,\n ariaLabelledby,\n disableContentPaddings = false,\n i18nStrings,\n ...rest\n}: TabsProps) {\n for (const tab of tabs) {\n checkSafeUrl('Tabs', tab.href);\n }\n const { __internalRootRef } = useBaseComponent('Tabs');\n const [idNamespace] = useState(() => nextGeneratedId());\n\n const [activeTabId, setActiveTabId] = useControllable(controlledTabId, onChange, firstEnabledTab(tabs)?.id ?? '', {\n componentName: 'Tabs',\n controlledProp: 'activeTabId',\n changeHandler: 'onChange',\n });\n\n const baseProps = getBaseProps(rest);\n\n const content = () => {\n const selectedTab = tabs.filter(tab => tab.id === activeTabId)[0];\n const renderContent = (tab: TabsProps.Tab) => {\n const isTabSelected = tab === selectedTab;\n\n const classes = clsx({\n [styles['tabs-content']]: true,\n [styles['tabs-content-active']]: isTabSelected,\n });\n\n const contentAttributes: JSX.IntrinsicElements['div'] = {\n className: classes,\n role: 'tabpanel',\n id: `${idNamespace}-${tab.id}-panel`,\n key: `${idNamespace}-${tab.id}-panel`,\n tabIndex: 0,\n 'aria-labelledby': getTabElementId({ namespace: idNamespace, tabId: tab.id }),\n };\n\n const isContentShown = isTabSelected && !selectedTab.disabled;\n return <div {...contentAttributes}>{isContentShown && selectedTab.content}</div>;\n };\n\n return (\n <div\n className={clsx(\n variant === 'container' || variant === 'stacked'\n ? styles['tabs-container-content-wrapper']\n : styles['tabs-content-wrapper'],\n {\n [styles['with-paddings']]: !disableContentPaddings,\n }\n )}\n >\n {tabs.map(renderContent)}\n </div>\n );\n };\n\n const header = (\n <TabHeaderBar\n activeTabId={activeTabId}\n variant={variant}\n idNamespace={idNamespace}\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n tabs={tabs}\n onChange={changeDetail => {\n setActiveTabId(changeDetail.activeTabId);\n fireNonCancelableEvent(onChange, changeDetail);\n }}\n i18nStrings={i18nStrings}\n />\n );\n\n if (variant === 'container' || variant === 'stacked') {\n return (\n <InternalContainer\n header={header}\n disableHeaderPaddings={true}\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n __internalRootRef={__internalRootRef}\n disableContentPaddings={true}\n variant={variant === 'stacked' ? 'stacked' : 'default'}\n >\n {content()}\n </InternalContainer>\n );\n }\n\n return (\n <div {...baseProps} className={clsx(baseProps.className, styles.root, styles.tabs)} ref={__internalRootRef}>\n {header}\n {content()}\n </div>\n );\n}\n\napplyDisplayName(Tabs, 'Tabs');\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["tabs/index.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 React from 'react';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport InternalContainer from '../container/internal';\nimport { TabsProps } from './interfaces';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { getTabElementId, TabHeaderBar } from './tab-header-bar';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\n\nexport { TabsProps };\n\nfunction firstEnabledTab(tabs: ReadonlyArray<TabsProps.Tab>) {\n const enabledTabs = tabs.filter(tab => !tab.disabled);\n if (enabledTabs.length > 0) {\n return enabledTabs[0];\n }\n return null;\n}\n\nexport default function Tabs({\n tabs,\n variant = 'default',\n onChange,\n activeTabId: controlledTabId,\n ariaLabel,\n ariaLabelledby,\n disableContentPaddings = false,\n i18nStrings,\n ...rest\n}: TabsProps) {\n for (const tab of tabs) {\n checkSafeUrl('Tabs', tab.href);\n }\n const { __internalRootRef } = useBaseComponent('Tabs');\n const idNamespace = useUniqueId('awsui-tabs-');\n\n const [activeTabId, setActiveTabId] = useControllable(controlledTabId, onChange, firstEnabledTab(tabs)?.id ?? '', {\n componentName: 'Tabs',\n controlledProp: 'activeTabId',\n changeHandler: 'onChange',\n });\n\n const baseProps = getBaseProps(rest);\n\n const content = () => {\n const selectedTab = tabs.filter(tab => tab.id === activeTabId)[0];\n const renderContent = (tab: TabsProps.Tab) => {\n const isTabSelected = tab === selectedTab;\n\n const classes = clsx({\n [styles['tabs-content']]: true,\n [styles['tabs-content-active']]: isTabSelected,\n });\n\n const contentAttributes: JSX.IntrinsicElements['div'] = {\n className: classes,\n role: 'tabpanel',\n id: `${idNamespace}-${tab.id}-panel`,\n key: `${idNamespace}-${tab.id}-panel`,\n tabIndex: 0,\n 'aria-labelledby': getTabElementId({ namespace: idNamespace, tabId: tab.id }),\n };\n\n const isContentShown = isTabSelected && !selectedTab.disabled;\n return <div {...contentAttributes}>{isContentShown && selectedTab.content}</div>;\n };\n\n return (\n <div\n className={clsx(\n variant === 'container' || variant === 'stacked'\n ? styles['tabs-container-content-wrapper']\n : styles['tabs-content-wrapper'],\n {\n [styles['with-paddings']]: !disableContentPaddings,\n }\n )}\n >\n {tabs.map(renderContent)}\n </div>\n );\n };\n\n const header = (\n <TabHeaderBar\n activeTabId={activeTabId}\n variant={variant}\n idNamespace={idNamespace}\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n tabs={tabs}\n onChange={changeDetail => {\n setActiveTabId(changeDetail.activeTabId);\n fireNonCancelableEvent(onChange, changeDetail);\n }}\n i18nStrings={i18nStrings}\n />\n );\n\n if (variant === 'container' || variant === 'stacked') {\n return (\n <InternalContainer\n header={header}\n disableHeaderPaddings={true}\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n __internalRootRef={__internalRootRef}\n disableContentPaddings={true}\n variant={variant === 'stacked' ? 'stacked' : 'default'}\n >\n {content()}\n </InternalContainer>\n );\n }\n\n return (\n <div {...baseProps} className={clsx(baseProps.className, styles.root, styles.tabs)} ref={__internalRootRef}>\n {header}\n {content()}\n </div>\n );\n}\n\napplyDisplayName(Tabs, 'Tabs');\n"]}