@cloudscape-design/components 3.0.0

package/app-layout/styles.scoped.css

@@ -0,0 +1,331 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among 
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_root_lm6vo_d9e10_97:not(#\9),
+.awsui_layout-wrapper_lm6vo_d9e10_98:not(#\9) {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.awsui_root-no-scroll_lm6vo_d9e10_104:not(#\9) {
+  position: relative;
+  z-index: 1;
+}
+
+.awsui_layout_lm6vo_d9e10_98:not(#\9) {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: stretch;
+  background-color: #ffffff;
+  background-color: var(--color-background-layout-main-sfhm4y, #ffffff);
+}
+.awsui_layout-no-scroll_lm6vo_d9e10_115:not(#\9) {
+  overflow: hidden;
+}
+
+.awsui_layout-main_lm6vo_d9e10_119:not(#\9) {
+  flex: 1;
+  min-width: 0;
+  background-color: #ffffff;
+  background-color: var(--color-background-layout-main-sfhm4y, #ffffff);
+  position: relative;
+}
+.awsui_layout-main-scrollable_lm6vo_d9e10_125:not(#\9) {
+  overflow: auto;
+}
+
+/* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
+.awsui_unfocusable_lm6vo_d9e10_130 *:not(#\9) {
+  visibility: hidden;
+}
+
+.awsui_drawer_lm6vo_d9e10_134:not(#\9) {
+  flex-shrink: 0;
+  position: relative;
+  word-wrap: break-word;
+  box-shadow: 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1);
+  box-shadow: var(--shadow-panel-gp3bf2, 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1));
+}
+.awsui_drawer_lm6vo_d9e10_134:not(#\9):not(.awsui_drawer-mobile_lm6vo_d9e10_140) {
+  z-index: 850;
+}
+.awsui_drawer-closed_lm6vo_d9e10_143:not(#\9) {
+  min-width: 40px;
+  cursor: pointer;
+}
+.awsui_drawer-closed_lm6vo_d9e10_143.awsui_drawer-mobile_lm6vo_d9e10_140:not(#\9) {
+  display: none;
+}
+.awsui_drawer_lm6vo_d9e10_134.awsui_opaque-background_lm6vo_d9e10_150:not(#\9) {
+  background: #ffffff;
+  background: var(--color-background-layout-panel-content-808qum, #ffffff);
+}
+
+.awsui_drawer-content_lm6vo_d9e10_154:not(#\9) {
+  position: fixed;
+  overflow: auto;
+  background-color: #ffffff;
+  background-color: var(--color-background-layout-panel-content-808qum, #ffffff);
+}
+.awsui_opaque-background_lm6vo_d9e10_150 > .awsui_drawer-content_lm6vo_d9e10_154:not(#\9) {
+  border-right: 2px solid #e9ebed;
+  border-right: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-divider-panel-side-yjkfcr, #e9ebed);
+}
+.awsui_drawer-mobile_lm6vo_d9e10_140 > .awsui_drawer-content_lm6vo_d9e10_154:not(#\9) {
+  z-index: 1001;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.awsui_drawer-closed_lm6vo_d9e10_143 > .awsui_drawer-content_lm6vo_d9e10_154:not(#\9) {
+  width: 40px;
+}
+.awsui_drawer-closed_lm6vo_d9e10_143 > .awsui_drawer-content_lm6vo_d9e10_154:not(#\9):hover {
+  background: #e9ebed;
+  background: var(--color-background-layout-panel-hover-0bg3gq, #e9ebed);
+}
+.awsui_drawer-content_lm6vo_d9e10_154 > [aria-hidden=true]:not(#\9) {
+  display: none;
+}
+
+.awsui_toggle_lm6vo_d9e10_179:not(#\9) {
+  box-sizing: border-box;
+  padding: 4px 7px;
+  padding: var(--space-xxs-ynfts5, 4px) 7px;
+}
+
+.awsui_visual-refresh-toggle_lm6vo_d9e10_184:not(#\9) {
+  position: fixed;
+  padding: 12px 20px;
+  padding: var(--space-scaled-s-cu1hzn, 12px) var(--space-layout-toggle-padding-axl9jr, 20px);
+}
+.awsui_visual-refresh-toggle-type-tools_lm6vo_d9e10_188:not(#\9) {
+  right: 0;
+}
+.awsui_visual-refresh-toggle-type-navigation_lm6vo_d9e10_191:not(#\9) {
+  left: 0;
+}
+.awsui_visual-refresh-toggle_lm6vo_d9e10_184[aria-hidden=true]:not(#\9) {
+  visibility: hidden;
+}
+.awsui_visual-refresh-toggle_lm6vo_d9e10_184[aria-hidden=false]:not(#\9) {
+  visibility: visible;
+}
+
+.awsui_button-toggles-container_lm6vo_d9e10_201:not(#\9) {
+  min-width: calc(40px + 2 * 20px);
+  min-width: calc(var(--space-layout-toggle-diameter-hzvqtj, 40px) + 2 * var(--space-layout-toggle-padding-axl9jr, 20px));
+  position: relative;
+  z-index: 851;
+}
+.awsui_button-toggles-container-is-hidden_lm6vo_d9e10_206:not(#\9) {
+  min-width: 0;
+}
+.awsui_button-toggles-container_lm6vo_d9e10_201.awsui_opaque-background_lm6vo_d9e10_150:not(#\9)::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: calc(40px + 2 * 20px);
+  width: calc(var(--space-layout-toggle-diameter-hzvqtj, 40px) + 2 * var(--space-layout-toggle-padding-axl9jr, 20px));
+  background: #ffffff;
+  background: var(--color-background-layout-panel-content-808qum, #ffffff);
+  border-left: 2px solid #e9ebed;
+  border-left: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-divider-panel-side-yjkfcr, #e9ebed);
+}
+
+.awsui_breadcrumbs-desktop_lm6vo_d9e10_220:not(#\9) {
+  padding-top: 16px;
+  padding-top: var(--space-scaled-m-pv0fmt, 16px);
+  padding-bottom: 12px;
+  padding-bottom: var(--space-scaled-s-cu1hzn, 12px);
+}
+
+.awsui_content-header-wrapper_lm6vo_d9e10_225:not(#\9) {
+  padding-bottom: 16px;
+  padding-bottom: var(--space-scaled-m-pv0fmt, 16px);
+}
+
+.awsui_content-wrapper_lm6vo_d9e10_229:not(#\9) {
+  padding-bottom: 40px;
+  padding-bottom: var(--space-layout-content-bottom-kg9l42, 40px);
+}
+
+.awsui_content-overlapped_lm6vo_d9e10_233:not(#\9) {
+  margin-top: calc(-1 * 36px);
+  margin-top: calc(-1 * var(--space-dark-header-overlap-distance-hfejul, 36px));
+}
+
+.awsui_content-extra-top-padding_lm6vo_d9e10_237:not(#\9) {
+  padding-top: 16px;
+  padding-top: var(--space-scaled-m-pv0fmt, 16px);
+}
+
+/* stylelint-disable-next-line selector-max-universal */
+.awsui_navigation-toggle_lm6vo_d9e10_242 > *:not(#\9) {
+  pointer-events: none;
+}
+
+/* stylelint-disable-next-line selector-max-universal */
+.awsui_tools-toggle_lm6vo_d9e10_247 > *:not(#\9) {
+  pointer-events: none;
+}
+
+.awsui_navigation_lm6vo_d9e10_242:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_navigation-toggle_lm6vo_d9e10_242:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_navigation-close_lm6vo_d9e10_259:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_tools_lm6vo_d9e10_247:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_tools-toggle_lm6vo_d9e10_247:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_tools-close_lm6vo_d9e10_271:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_notifications_lm6vo_d9e10_275:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_breadcrumbs_lm6vo_d9e10_220:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_content_lm6vo_d9e10_225:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_panel-wrapper-outer_lm6vo_d9e10_287:not(#\9),
+.awsui_panel-wrapper-inner_lm6vo_d9e10_288:not(#\9) {
+  z-index: 850;
+}
+
+.awsui_panel-wrapper-outer_lm6vo_d9e10_287:not(#\9) {
+  position: fixed;
+  height: 100%;
+  display: flex;
+}
+.awsui_panel-wrapper-outer_lm6vo_d9e10_287.awsui_mobile_lm6vo_d9e10_297:not(#\9) {
+  left: 0;
+  right: 0;
+  z-index: -1;
+  pointer-events: none;
+}
+.awsui_panel-wrapper-outer_lm6vo_d9e10_287.awsui_mobile_lm6vo_d9e10_297.awsui_open_lm6vo_d9e10_303:not(#\9) {
+  z-index: 1001;
+  width: 100vw;
+  pointer-events: auto;
+}
+
+.awsui_panel-wrapper-inner_lm6vo_d9e10_288:not(#\9) {
+  background: #ffffff;
+  background: var(--color-background-layout-panel-content-808qum, #ffffff);
+}

package/app-layout/styles.selectors.js

@@ -0,0 +1,43 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "root": "awsui_root_lm6vo_d9e10_97",
+  "layout-wrapper": "awsui_layout-wrapper_lm6vo_d9e10_98",
+  "root-no-scroll": "awsui_root-no-scroll_lm6vo_d9e10_104",
+  "layout": "awsui_layout_lm6vo_d9e10_98",
+  "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_d9e10_115",
+  "layout-main": "awsui_layout-main_lm6vo_d9e10_119",
+  "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_d9e10_125",
+  "unfocusable": "awsui_unfocusable_lm6vo_d9e10_130",
+  "drawer": "awsui_drawer_lm6vo_d9e10_134",
+  "drawer-mobile": "awsui_drawer-mobile_lm6vo_d9e10_140",
+  "drawer-closed": "awsui_drawer-closed_lm6vo_d9e10_143",
+  "opaque-background": "awsui_opaque-background_lm6vo_d9e10_150",
+  "drawer-content": "awsui_drawer-content_lm6vo_d9e10_154",
+  "toggle": "awsui_toggle_lm6vo_d9e10_179",
+  "visual-refresh-toggle": "awsui_visual-refresh-toggle_lm6vo_d9e10_184",
+  "visual-refresh-toggle-type-tools": "awsui_visual-refresh-toggle-type-tools_lm6vo_d9e10_188",
+  "visual-refresh-toggle-type-navigation": "awsui_visual-refresh-toggle-type-navigation_lm6vo_d9e10_191",
+  "button-toggles-container": "awsui_button-toggles-container_lm6vo_d9e10_201",
+  "button-toggles-container-is-hidden": "awsui_button-toggles-container-is-hidden_lm6vo_d9e10_206",
+  "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_d9e10_220",
+  "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_d9e10_225",
+  "content-wrapper": "awsui_content-wrapper_lm6vo_d9e10_229",
+  "content-overlapped": "awsui_content-overlapped_lm6vo_d9e10_233",
+  "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_d9e10_237",
+  "navigation-toggle": "awsui_navigation-toggle_lm6vo_d9e10_242",
+  "tools-toggle": "awsui_tools-toggle_lm6vo_d9e10_247",
+  "navigation": "awsui_navigation_lm6vo_d9e10_242",
+  "navigation-close": "awsui_navigation-close_lm6vo_d9e10_259",
+  "tools": "awsui_tools_lm6vo_d9e10_247",
+  "tools-close": "awsui_tools-close_lm6vo_d9e10_271",
+  "notifications": "awsui_notifications_lm6vo_d9e10_275",
+  "breadcrumbs": "awsui_breadcrumbs_lm6vo_d9e10_220",
+  "content": "awsui_content_lm6vo_d9e10_225",
+  "panel-wrapper-outer": "awsui_panel-wrapper-outer_lm6vo_d9e10_287",
+  "panel-wrapper-inner": "awsui_panel-wrapper-inner_lm6vo_d9e10_288",
+  "mobile": "awsui_mobile_lm6vo_d9e10_297",
+  "open": "awsui_open_lm6vo_d9e10_303"
+};
+  

package/app-layout/test-classes/styles.css.js

@@ -0,0 +1,17 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_1fj9k_19hjm_5",
+  "navigation": "awsui_navigation_1fj9k_19hjm_9",
+  "navigation-toggle": "awsui_navigation-toggle_1fj9k_19hjm_13",
+  "navigation-close": "awsui_navigation-close_1fj9k_19hjm_17",
+  "content": "awsui_content_1fj9k_19hjm_21",
+  "notifications": "awsui_notifications_1fj9k_19hjm_25",
+  "breadcrumbs": "awsui_breadcrumbs_1fj9k_19hjm_29",
+  "tools": "awsui_tools_1fj9k_19hjm_33",
+  "tools-close": "awsui_tools-close_1fj9k_19hjm_37",
+  "tools-toggle": "awsui_tools-toggle_1fj9k_19hjm_41",
+  "drawer-closed": "awsui_drawer-closed_1fj9k_19hjm_45",
+  "mobile-bar": "awsui_mobile-bar_1fj9k_19hjm_49"
+};
+  

package/app-layout/test-classes/styles.scoped.css

@@ -0,0 +1,51 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_root_1fj9k_19hjm_5:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_navigation_1fj9k_19hjm_9:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_navigation-toggle_1fj9k_19hjm_13:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_navigation-close_1fj9k_19hjm_17:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_content_1fj9k_19hjm_21:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_notifications_1fj9k_19hjm_25:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_breadcrumbs_1fj9k_19hjm_29:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_tools_1fj9k_19hjm_33:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_tools-close_1fj9k_19hjm_37:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_tools-toggle_1fj9k_19hjm_41:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_drawer-closed_1fj9k_19hjm_45:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_mobile-bar_1fj9k_19hjm_49:not(#\9) {
+  /* used in test-utils */
+}

package/app-layout/test-classes/styles.selectors.js

@@ -0,0 +1,18 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "root": "awsui_root_1fj9k_19hjm_5",
+  "navigation": "awsui_navigation_1fj9k_19hjm_9",
+  "navigation-toggle": "awsui_navigation-toggle_1fj9k_19hjm_13",
+  "navigation-close": "awsui_navigation-close_1fj9k_19hjm_17",
+  "content": "awsui_content_1fj9k_19hjm_21",
+  "notifications": "awsui_notifications_1fj9k_19hjm_25",
+  "breadcrumbs": "awsui_breadcrumbs_1fj9k_19hjm_29",
+  "tools": "awsui_tools_1fj9k_19hjm_33",
+  "tools-close": "awsui_tools-close_1fj9k_19hjm_37",
+  "tools-toggle": "awsui_tools-toggle_1fj9k_19hjm_41",
+  "drawer-closed": "awsui_drawer-closed_1fj9k_19hjm_45",
+  "mobile-bar": "awsui_mobile-bar_1fj9k_19hjm_49"
+};
+  

package/app-layout/toggle-buttons.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AppLayoutProps } from './interfaces';
+interface ToggleButtonsProps {
+    anyPanelOpen: boolean;
+    children: React.ReactNode;
+    ariaLabels: AppLayoutProps.Labels | undefined;
+    isHidden: boolean;
+    opaqueBackground: boolean;
+}
+export declare function ToggleButtons({ children, ariaLabels, anyPanelOpen, isHidden, opaqueBackground }: ToggleButtonsProps): JSX.Element;
+export {};
+//# sourceMappingURL=toggle-buttons.d.ts.map

package/app-layout/toggle-buttons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-buttons.d.ts","sourceRoot":"","sources":["../../../src/app-layout/toggle-buttons.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,UAAU,kBAAkB;IAC1B,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC;IAC9C,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,gBAAgB,EAAE,EAAE,kBAAkB,eAkBnH"}

package/app-layout/toggle-buttons.js

@@ -0,0 +1,13 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+import SpaceBetween from '../space-between/internal';
+import styles from './styles.css.js';
+export function ToggleButtons(_a) {
+    var children = _a.children, ariaLabels = _a.ariaLabels, anyPanelOpen = _a.anyPanelOpen, isHidden = _a.isHidden, opaqueBackground = _a.opaqueBackground;
+    return (React.createElement("div", { className: clsx(styles['button-toggles-container'], anyPanelOpen && styles['button-toggles-container-open'], isHidden && styles['button-toggles-container-is-hidden'], opaqueBackground && styles['opaque-background']) },
+        React.createElement("aside", { "aria-label": ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.tools, className: clsx(styles['visual-refresh-toggle'], styles["visual-refresh-toggle-type-tools"]) },
+            React.createElement(SpaceBetween, { size: "xs" }, children))));
+}
+//# sourceMappingURL=toggle-buttons.js.map

package/app-layout/toggle-buttons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-buttons.js","sourceRoot":"","sources":["../../../src/app-layout/toggle-buttons.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,YAAY,MAAM,2BAA2B,CAAC;AACrD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAWrC,MAAM,UAAU,aAAa,CAAC,EAAsF;QAApF,QAAQ,cAAA,EAAE,UAAU,gBAAA,EAAE,YAAY,kBAAA,EAAE,QAAQ,cAAA,EAAE,gBAAgB,sBAAA;IAC5F,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,0BAA0B,CAAC,EAClC,YAAY,IAAI,MAAM,CAAC,+BAA+B,CAAC,EACvD,QAAQ,IAAI,MAAM,CAAC,oCAAoC,CAAC,EACxD,gBAAgB,IAAI,MAAM,CAAC,mBAAmB,CAAC,CAChD;QAED,6CACc,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,EAC7B,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,uBAAuB,CAAC,EAAE,MAAM,CAAC,kCAAkC,CAAC,CAAC;YAE5F,oBAAC,YAAY,IAAC,IAAI,EAAC,IAAI,IAAE,QAAQ,CAAgB,CAC3C,CACJ,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 clsx from 'clsx';\nimport SpaceBetween from '../space-between/internal';\nimport styles from './styles.css.js';\nimport { AppLayoutProps } from './interfaces';\n\ninterface ToggleButtonsProps {\n  anyPanelOpen: boolean;\n  children: React.ReactNode;\n  ariaLabels: AppLayoutProps.Labels | undefined;\n  isHidden: boolean;\n  opaqueBackground: boolean;\n}\n\nexport function ToggleButtons({ children, ariaLabels, anyPanelOpen, isHidden, opaqueBackground }: ToggleButtonsProps) {\n  return (\n    <div\n      className={clsx(\n        styles['button-toggles-container'],\n        anyPanelOpen && styles['button-toggles-container-open'],\n        isHidden && styles['button-toggles-container-is-hidden'],\n        opaqueBackground && styles['opaque-background']\n      )}\n    >\n      <aside\n        aria-label={ariaLabels?.tools}\n        className={clsx(styles['visual-refresh-toggle'], styles[`visual-refresh-toggle-type-tools`])}\n      >\n        <SpaceBetween size=\"xs\">{children}</SpaceBetween>\n      </aside>\n    </div>\n  );\n}\n"]}

package/app-layout/toggles/circular-button.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { AppLayoutButtonProps } from './interfaces';
+interface CircularButton extends AppLayoutButtonProps {
+    selected?: boolean;
+}
+export declare const CircularButton: React.ForwardRefExoticComponent<CircularButton & React.RefAttributes<any>>;
+export {};
+//# sourceMappingURL=circular-button.d.ts.map

package/app-layout/toggles/circular-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"circular-button.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/toggles/circular-button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAIpD,UAAU,cAAe,SAAQ,oBAAoB;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,4EAqB1B,CAAC"}

package/app-layout/toggles/circular-button.js

@@ -0,0 +1,15 @@
+import { __assign } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import clsx from 'clsx';
+import React from 'react';
+import Icon from '../../icon/internal';
+import styles from './styles.css.js';
+import useFocusVisible from '../../internal/hooks/focus-visible';
+export var CircularButton = React.forwardRef(function (_a, ref) {
+    var className = _a.className, ariaLabel = _a.ariaLabel, ariaExpanded = _a.ariaExpanded, iconName = _a.iconName, disabled = _a.disabled, selected = _a.selected, onClick = _a.onClick;
+    var focusVisible = useFocusVisible();
+    return (React.createElement("button", __assign({}, focusVisible, { ref: ref, type: "button", disabled: disabled, className: clsx(styles['circular-toggle'], selected && styles['circular-toggle-selected'], className), "aria-label": ariaLabel, "aria-expanded": ariaExpanded, onClick: onClick }),
+        React.createElement(Icon, { name: iconName })));
+});
+//# sourceMappingURL=circular-button.js.map

package/app-layout/toggles/circular-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"circular-button.js","sourceRoot":"","sources":["../../../../src/app-layout/toggles/circular-button.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,qBAAqB,CAAC;AAEvC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,eAAe,MAAM,oCAAoC,CAAC;AAMjE,MAAM,CAAC,IAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAC5C,UACE,EAA6F,EAC7F,GAAmB;QADjB,SAAS,eAAA,EAAE,SAAS,eAAA,EAAE,YAAY,kBAAA,EAAE,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAE,OAAO,aAAA;IAG3E,IAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IACvC,OAAO,CACL,2CACM,YAAY,IAChB,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE,QAAQ,IAAI,MAAM,CAAC,0BAA0B,CAAC,EAAE,SAAS,CAAC,gBACzF,SAAS,mBACN,YAAY,EAC3B,OAAO,EAAE,OAAO;QAEhB,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,GAAI,CACjB,CACV,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport Icon from '../../icon/internal';\nimport { AppLayoutButtonProps } from './interfaces';\nimport styles from './styles.css.js';\nimport useFocusVisible from '../../internal/hooks/focus-visible';\n\ninterface CircularButton extends AppLayoutButtonProps {\n  selected?: boolean;\n}\n\nexport const CircularButton = React.forwardRef(\n  (\n    { className, ariaLabel, ariaExpanded, iconName, disabled, selected, onClick }: CircularButton,\n    ref: React.Ref<any>\n  ) => {\n    const focusVisible = useFocusVisible();\n    return (\n      <button\n        {...focusVisible}\n        ref={ref}\n        type=\"button\"\n        disabled={disabled}\n        className={clsx(styles['circular-toggle'], selected && styles['circular-toggle-selected'], className)}\n        aria-label={ariaLabel}\n        aria-expanded={ariaExpanded}\n        onClick={onClick}\n      >\n        <Icon name={iconName} />\n      </button>\n    );\n  }\n);\n"]}

package/app-layout/toggles/index.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ButtonProps } from '../../button/interfaces';
+import { IconProps } from '../../icon/interfaces';
+import { AppLayoutProps } from '../interfaces';
+import { AppLayoutButtonProps } from './interfaces';
+export declare const togglesConfig: {
+    readonly navigation: {
+        readonly TagName: "nav";
+        readonly iconName: "menu";
+        readonly getLabels: (labels?: AppLayoutProps.Labels) => {
+            mainLabel: string | undefined;
+            openLabel: string | undefined;
+            closeLabel: string | undefined;
+        };
+    };
+    readonly tools: {
+        readonly TagName: "aside";
+        readonly iconName: "status-info";
+        readonly getLabels: (labels?: AppLayoutProps.Labels) => {
+            mainLabel: string | undefined;
+            openLabel: string | undefined;
+            closeLabel: string | undefined;
+        };
+    };
+};
+export declare const AppLayoutButton: React.ForwardRefExoticComponent<AppLayoutButtonProps & React.RefAttributes<ButtonProps.Ref>>;
+interface CloseButtonProps {
+    className?: string;
+    ariaLabel: string | undefined;
+    onClick: () => void;
+    iconName: IconProps.Name;
+}
+export declare const CloseButton: React.ForwardRefExoticComponent<CloseButtonProps & React.RefAttributes<ButtonProps.Ref>>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/app-layout/toggles/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/toggles/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAGpD,eAAO,MAAM,aAAa;;;;sCAIF,eAAe,MAAM;;;;;;;;;sCASrB,eAAe,MAAM;;;;;;CAMnC,CAAC;AAEX,eAAO,MAAM,eAAe,8FAmB3B,CAAC;AAEF,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC;CAC1B;AAED,eAAO,MAAM,WAAW,0FAQvB,CAAC"}

package/app-layout/toggles/index.js

@@ -0,0 +1,41 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { InternalButton } from '../../button/internal';
+import styles from './styles.css.js';
+export var togglesConfig = {
+    navigation: {
+        TagName: 'nav',
+        iconName: 'menu',
+        getLabels: function (labels) {
+            if (labels === void 0) { labels = {}; }
+            return ({
+                mainLabel: labels.navigation,
+                openLabel: labels.navigationToggle,
+                closeLabel: labels.navigationClose
+            });
+        }
+    },
+    tools: {
+        TagName: 'aside',
+        iconName: 'status-info',
+        getLabels: function (labels) {
+            if (labels === void 0) { labels = {}; }
+            return ({
+                mainLabel: labels.tools,
+                openLabel: labels.toolsToggle,
+                closeLabel: labels.toolsClose
+            });
+        }
+    }
+};
+export var AppLayoutButton = React.forwardRef(function (_a, ref) {
+    var className = _a.className, ariaLabel = _a.ariaLabel, ariaExpanded = _a.ariaExpanded, iconName = _a.iconName, disabled = _a.disabled, onClick = _a.onClick;
+    return (React.createElement(InternalButton, { ref: ref, className: className, ariaLabel: ariaLabel, variant: "icon", formAction: "none", onClick: onClick, iconName: iconName, disabled: disabled, ariaExpanded: ariaExpanded }));
+});
+export var CloseButton = React.forwardRef(function (_a, ref) {
+    var className = _a.className, ariaLabel = _a.ariaLabel, onClick = _a.onClick, iconName = _a.iconName;
+    return (React.createElement("span", { className: styles['close-button'] },
+        React.createElement(AppLayoutButton, { ref: ref, className: className, ariaLabel: ariaLabel, iconName: iconName, onClick: onClick })));
+});
+//# sourceMappingURL=index.js.map

package/app-layout/toggles/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/toggles/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,IAAM,aAAa,GAAG;IAC3B,UAAU,EAAE;QACV,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,MAAM;QAChB,SAAS,EAAE,UAAC,MAAkC;YAAlC,uBAAA,EAAA,WAAkC;YAAK,OAAA,CAAC;gBAClD,SAAS,EAAE,MAAM,CAAC,UAAU;gBAC5B,SAAS,EAAE,MAAM,CAAC,gBAAgB;gBAClC,UAAU,EAAE,MAAM,CAAC,eAAe;aACnC,CAAC;QAJiD,CAIjD;KACH;IACD,KAAK,EAAE;QACL,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,aAAa;QACvB,SAAS,EAAE,UAAC,MAAkC;YAAlC,uBAAA,EAAA,WAAkC;YAAK,OAAA,CAAC;gBAClD,SAAS,EAAE,MAAM,CAAC,KAAK;gBACvB,SAAS,EAAE,MAAM,CAAC,WAAW;gBAC7B,UAAU,EAAE,MAAM,CAAC,UAAU;aAC9B,CAAC;QAJiD,CAIjD;KACH;CACO,CAAC;AAEX,MAAM,CAAC,IAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAC7C,UACE,EAAyF,EACzF,GAA+B;QAD7B,SAAS,eAAA,EAAE,SAAS,eAAA,EAAE,YAAY,kBAAA,EAAE,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAE,OAAO,aAAA;IAGjE,OAAO,CACL,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AASF,MAAM,CAAC,IAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,UAAC,EAA6D,EAAE,GAA+B;QAA5F,SAAS,eAAA,EAAE,SAAS,eAAA,EAAE,OAAO,aAAA,EAAE,QAAQ,cAAA;IACxC,OAAO,CACL,8BAAM,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC;QACrC,oBAAC,eAAe,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,GAAI,CAC1G,CACR,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { ButtonProps } from '../../button/interfaces';\nimport { IconProps } from '../../icon/interfaces';\nimport { InternalButton } from '../../button/internal';\nimport { AppLayoutProps } from '../interfaces';\nimport { AppLayoutButtonProps } from './interfaces';\nimport styles from './styles.css.js';\n\nexport const togglesConfig = {\n  navigation: {\n    TagName: 'nav',\n    iconName: 'menu',\n    getLabels: (labels: AppLayoutProps.Labels = {}) => ({\n      mainLabel: labels.navigation,\n      openLabel: labels.navigationToggle,\n      closeLabel: labels.navigationClose,\n    }),\n  },\n  tools: {\n    TagName: 'aside',\n    iconName: 'status-info',\n    getLabels: (labels: AppLayoutProps.Labels = {}) => ({\n      mainLabel: labels.tools,\n      openLabel: labels.toolsToggle,\n      closeLabel: labels.toolsClose,\n    }),\n  },\n} as const;\n\nexport const AppLayoutButton = React.forwardRef(\n  (\n    { className, ariaLabel, ariaExpanded, iconName, disabled, onClick }: AppLayoutButtonProps,\n    ref: React.Ref<ButtonProps.Ref>\n  ) => {\n    return (\n      <InternalButton\n        ref={ref}\n        className={className}\n        ariaLabel={ariaLabel}\n        variant=\"icon\"\n        formAction=\"none\"\n        onClick={onClick}\n        iconName={iconName}\n        disabled={disabled}\n        ariaExpanded={ariaExpanded}\n      />\n    );\n  }\n);\n\ninterface CloseButtonProps {\n  className?: string;\n  ariaLabel: string | undefined;\n  onClick: () => void;\n  iconName: IconProps.Name;\n}\n\nexport const CloseButton = React.forwardRef(\n  ({ className, ariaLabel, onClick, iconName }: CloseButtonProps, ref: React.Ref<ButtonProps.Ref>) => {\n    return (\n      <span className={styles['close-button']}>\n        <AppLayoutButton ref={ref} className={className} ariaLabel={ariaLabel} iconName={iconName} onClick={onClick} />\n      </span>\n    );\n  }\n);\n"]}

package/app-layout/toggles/interfaces.d.ts

@@ -0,0 +1,10 @@
+import { IconProps } from '../../icon/interfaces';
+export interface AppLayoutButtonProps {
+    className?: string;
+    ariaLabel: string | undefined;
+    ariaExpanded?: boolean;
+    iconName: IconProps.Name;
+    onClick: () => void;
+    disabled?: boolean;
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/app-layout/toggles/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/toggles/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/app-layout/toggles/interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interfaces.js.map

package/app-layout/toggles/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/app-layout/toggles/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { IconProps } from '../../icon/interfaces';\n\nexport interface AppLayoutButtonProps {\n  className?: string;\n  ariaLabel: string | undefined;\n  ariaExpanded?: boolean;\n  iconName: IconProps.Name;\n  onClick: () => void;\n  disabled?: boolean;\n}\n"]}

package/app-layout/toggles/styles.css.js

@@ -0,0 +1,8 @@
+
+    import './styles.scoped.css';
+    export default {
+  "close-button": "awsui_close-button_16w0h_1chv9_93",
+  "circular-toggle": "awsui_circular-toggle_16w0h_1chv9_101",
+  "circular-toggle-selected": "awsui_circular-toggle-selected_16w0h_1chv9_139"
+};
+