@cloudscape-design/components 3.0.0

package/annotation-context/interfaces.d.ts

@@ -0,0 +1,66 @@
+import { NonCancelableEventHandler } from '../internal/events';
+import { TutorialPanelProps } from '../tutorial-panel/interfaces';
+export interface AnnotationContextProps {
+    /**
+     * The currently launched tutorial. This should be the object received
+     * in the `detail` property of the `onStartTutorial` event.
+     */
+    currentTutorial: AnnotationContextProps.Tutorial | null;
+    /**
+     * This event is fired when a user clicks the "Next" or "Previous"
+     * button on a popover, when the user clicks on a closed hotspot icon,
+     * or when the AnnotationOverlay determines that the current hotspot
+     * has disappeared from the page and a different one should be
+     * selected (e.g. when navigating between pages).
+     *
+     * Use the `reason` property of the event detail to determine why
+     * this event was fired.
+     */
+    onStepChange?: NonCancelableEventHandler<AnnotationContextProps.StepChangeDetail>;
+    /**
+     * Fired when the user selects a tutorial from the list.
+     */
+    onStartTutorial: NonCancelableEventHandler<TutorialPanelProps.TutorialDetail>;
+    /**
+     * Fired when the user exits the current tutorial.
+     */
+    onExitTutorial: NonCancelableEventHandler<TutorialPanelProps.TutorialDetail>;
+    /**
+     * Fired when the user clicks the "Finish" button on the last step of
+     * the tutorial.
+     */
+    onFinish?: NonCancelableEventHandler<void>;
+    /**
+     * Put all page content inside this component's children. This component
+     * will provide a context which is used by the Hotspot elements throughout
+     * the page.
+     */
+    children: React.ReactNode;
+    /**
+     * An object containing all the necessary localized strings required by
+     * the component.
+     */
+    i18nStrings: AnnotationContextProps.I18nStrings;
+}
+export declare namespace AnnotationContextProps {
+    interface StepChangeDetail {
+        step: number;
+        reason: 'next' | 'previous' | 'open' | 'auto-fallback';
+    }
+    interface OpenChangeDetail {
+        open: boolean;
+    }
+    type Task = TutorialPanelProps.Task;
+    type Step = TutorialPanelProps.Step;
+    type Tutorial = TutorialPanelProps.Tutorial;
+    interface I18nStrings {
+        nextButtonText: string;
+        previousButtonText: string;
+        finishButtonText: string;
+        labelDismissAnnotation: string;
+        labelHotspot: (openState: boolean) => string;
+        stepCounterText: (stepIndex: number, totalStepCount: number) => string;
+        taskTitle: (taskIndex: number, taskTitle: string) => string;
+    }
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/annotation-context/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/annotation-context/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAElE,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,eAAe,EAAE,sBAAsB,CAAC,QAAQ,GAAG,IAAI,CAAC;IAExD;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,yBAAyB,CAAC,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;IAElF;;OAEG;IACH,eAAe,EAAE,yBAAyB,CAAC,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAE9E;;OAEG;IACH,cAAc,EAAE,yBAAyB,CAAC,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAE7E;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,IAAI,CAAC,CAAC;IAE3C;;;;OAIG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;OAGG;IACH,WAAW,EAAE,sBAAsB,CAAC,WAAW,CAAC;CACjD;AAED,yBAAiB,sBAAsB,CAAC;IACtC,UAAiB,gBAAgB;QAC/B,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,eAAe,CAAC;KACxD;IAED,UAAiB,gBAAgB;QAC/B,IAAI,EAAE,OAAO,CAAC;KACf;IAED,KAAY,IAAI,GAAG,kBAAkB,CAAC,IAAI,CAAC;IAC3C,KAAY,IAAI,GAAG,kBAAkB,CAAC,IAAI,CAAC;IAC3C,KAAY,QAAQ,GAAG,kBAAkB,CAAC,QAAQ,CAAC;IAEnD,UAAiB,WAAW;QAC1B,cAAc,EAAE,MAAM,CAAC;QACvB,kBAAkB,EAAE,MAAM,CAAC;QAC3B,gBAAgB,EAAE,MAAM,CAAC;QAEzB,sBAAsB,EAAE,MAAM,CAAC;QAC/B,YAAY,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,MAAM,CAAC;QAE7C,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,KAAK,MAAM,CAAC;QACvE,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;KAC7D;CACF"}

package/annotation-context/interfaces.js

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

package/annotation-context/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/annotation-context/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { TutorialPanelProps } from '../tutorial-panel/interfaces';\n\nexport interface AnnotationContextProps {\n  /**\n   * The currently launched tutorial. This should be the object received\n   * in the `detail` property of the `onStartTutorial` event.\n   */\n  currentTutorial: AnnotationContextProps.Tutorial | null;\n\n  /**\n   * This event is fired when a user clicks the \"Next\" or \"Previous\"\n   * button on a popover, when the user clicks on a closed hotspot icon,\n   * or when the AnnotationOverlay determines that the current hotspot\n   * has disappeared from the page and a different one should be\n   * selected (e.g. when navigating between pages).\n   *\n   * Use the `reason` property of the event detail to determine why\n   * this event was fired.\n   */\n  onStepChange?: NonCancelableEventHandler<AnnotationContextProps.StepChangeDetail>;\n\n  /**\n   * Fired when the user selects a tutorial from the list.\n   */\n  onStartTutorial: NonCancelableEventHandler<TutorialPanelProps.TutorialDetail>;\n\n  /**\n   * Fired when the user exits the current tutorial.\n   */\n  onExitTutorial: NonCancelableEventHandler<TutorialPanelProps.TutorialDetail>;\n\n  /**\n   * Fired when the user clicks the \"Finish\" button on the last step of\n   * the tutorial.\n   */\n  onFinish?: NonCancelableEventHandler<void>;\n\n  /**\n   * Put all page content inside this component's children. This component\n   * will provide a context which is used by the Hotspot elements throughout\n   * the page.\n   */\n  children: React.ReactNode;\n\n  /**\n   * An object containing all the necessary localized strings required by\n   * the component.\n   */\n  i18nStrings: AnnotationContextProps.I18nStrings;\n}\n\nexport namespace AnnotationContextProps {\n  export interface StepChangeDetail {\n    step: number;\n    reason: 'next' | 'previous' | 'open' | 'auto-fallback';\n  }\n\n  export interface OpenChangeDetail {\n    open: boolean;\n  }\n\n  export type Task = TutorialPanelProps.Task;\n  export type Step = TutorialPanelProps.Step;\n  export type Tutorial = TutorialPanelProps.Tutorial;\n\n  export interface I18nStrings {\n    nextButtonText: string;\n    previousButtonText: string;\n    finishButtonText: string;\n\n    labelDismissAnnotation: string;\n    labelHotspot: (openState: boolean) => string;\n\n    stepCounterText: (stepIndex: number, totalStepCount: number) => string;\n    taskTitle: (taskIndex: number, taskTitle: string) => string;\n  }\n}\n"]}

package/app-layout/content-wrapper/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface ContentWrapperProps {
+    className?: string;
+    children?: React.ReactNode;
+    isMobile: boolean;
+    navigationPadding: boolean;
+    toolsPadding: boolean;
+    disablePaddings?: boolean;
+    contentWidthStyles?: React.CSSProperties;
+}
+declare const ContentWrapper: React.ForwardRefExoticComponent<ContentWrapperProps & React.RefAttributes<HTMLDivElement>>;
+export default ContentWrapper;
+//# sourceMappingURL=index.d.ts.map

package/app-layout/content-wrapper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/content-wrapper/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,EAAE,OAAO,CAAC;IAClB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC1C;AAED,QAAA,MAAM,cAAc,4FAoCnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/app-layout/content-wrapper/index.js

@@ -0,0 +1,14 @@
+// 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 styles from './styles.css.js';
+var ContentWrapper = React.forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, toolsPadding = _a.toolsPadding, disablePaddings = _a.disablePaddings, navigationPadding = _a.navigationPadding, isMobile = _a.isMobile, contentWidthStyles = _a.contentWidthStyles;
+    if (disablePaddings) {
+        return (React.createElement("div", { className: className, ref: ref }, children));
+    }
+    return (React.createElement("div", { ref: ref, className: clsx(className, styles['content-wrapper'], !navigationPadding && styles['content-wrapper-no-navigation-padding'], !toolsPadding && styles['content-wrapper-no-tools-padding'], isMobile && styles['content-wrapper-mobile']), style: contentWidthStyles }, children));
+});
+export default ContentWrapper;
+//# sourceMappingURL=index.js.map

package/app-layout/content-wrapper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/content-wrapper/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAYrC,IAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CACrC,UACE,EAQsB,EACtB,GAA8B;QAR5B,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,YAAY,kBAAA,EACZ,eAAe,qBAAA,EACf,iBAAiB,uBAAA,EACjB,QAAQ,cAAA,EACR,kBAAkB,wBAAA;IAIpB,IAAI,eAAe,EAAE;QACnB,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,IAChC,QAAQ,CACL,CACP,CAAC;KACH;IACD,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CACb,SAAS,EACT,MAAM,CAAC,iBAAiB,CAAC,EACzB,CAAC,iBAAiB,IAAI,MAAM,CAAC,uCAAuC,CAAC,EACrE,CAAC,YAAY,IAAI,MAAM,CAAC,kCAAkC,CAAC,EAC3D,QAAQ,IAAI,MAAM,CAAC,wBAAwB,CAAC,CAC7C,EACD,KAAK,EAAE,kBAAkB,IAExB,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,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 styles from './styles.css.js';\n\nexport interface ContentWrapperProps {\n  className?: string;\n  children?: React.ReactNode;\n  isMobile: boolean;\n  navigationPadding: boolean;\n  toolsPadding: boolean;\n  disablePaddings?: boolean;\n  contentWidthStyles?: React.CSSProperties;\n}\n\nconst ContentWrapper = React.forwardRef(\n  (\n    {\n      className,\n      children,\n      toolsPadding,\n      disablePaddings,\n      navigationPadding,\n      isMobile,\n      contentWidthStyles,\n    }: ContentWrapperProps,\n    ref: React.Ref<HTMLDivElement>\n  ) => {\n    if (disablePaddings) {\n      return (\n        <div className={className} ref={ref}>\n          {children}\n        </div>\n      );\n    }\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          className,\n          styles['content-wrapper'],\n          !navigationPadding && styles['content-wrapper-no-navigation-padding'],\n          !toolsPadding && styles['content-wrapper-no-tools-padding'],\n          isMobile && styles['content-wrapper-mobile']\n        )}\n        style={contentWidthStyles}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nexport default ContentWrapper;\n"]}

package/app-layout/content-wrapper/styles.css.js

@@ -0,0 +1,7 @@
+
+    import './styles.scoped.css';
+    export default {
+  "content-wrapper": "awsui_content-wrapper_zycdx_s6r07_93",
+  "content-wrapper-mobile": "awsui_content-wrapper-mobile_zycdx_s6r07_97"
+};
+  

package/app-layout/content-wrapper/styles.scoped.css

@@ -0,0 +1,104 @@
+/*
+ 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
+*/
+.awsui_content-wrapper_zycdx_s6r07_93:not(#\9) {
+  padding-left: 40px;
+  padding-left: var(--space-scaled-2x-xxxl-lbp35j, 40px);
+  padding-right: 40px;
+  padding-right: var(--space-scaled-2x-xxxl-lbp35j, 40px);
+}
+.awsui_content-wrapper-mobile_zycdx_s6r07_97:not(#\9) {
+  padding-left: 20px;
+  padding-left: var(--space-l-4vl6xu, 20px);
+  padding-right: 20px;
+  padding-right: var(--space-l-4vl6xu, 20px);
+}

package/app-layout/content-wrapper/styles.selectors.js

@@ -0,0 +1,8 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "content-wrapper": "awsui_content-wrapper_zycdx_s6r07_93",
+  "content-wrapper-mobile": "awsui_content-wrapper-mobile_zycdx_s6r07_97"
+};
+  

package/app-layout/dark-header/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface DarkHeaderProps {
+    isMobile: boolean;
+    toolsWidth: number;
+    navigationWidth: number;
+    children?: React.ReactNode;
+    topOffset?: number;
+    sticky?: boolean;
+}
+export declare function DarkHeader({ children, topOffset, sticky }: DarkHeaderProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/app-layout/dark-header/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/dark-header/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,eAAe,eAS1E"}

package/app-layout/dark-header/index.js

@@ -0,0 +1,10 @@
+// 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 styles from './styles.css.js';
+export function DarkHeader(_a) {
+    var children = _a.children, topOffset = _a.topOffset, sticky = _a.sticky;
+    return (React.createElement("div", { className: clsx(styles['content-header'], sticky && styles['content-header-sticky']), style: { top: topOffset } }, children));
+}
+//# sourceMappingURL=index.js.map

package/app-layout/dark-header/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/dark-header/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAWrC,MAAM,UAAU,UAAU,CAAC,EAAgD;QAA9C,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,MAAM,YAAA;IACtD,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,MAAM,IAAI,MAAM,CAAC,uBAAuB,CAAC,CAAC,EACpF,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,IAExB,QAAQ,CACL,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport styles from './styles.css.js';\n\nexport interface DarkHeaderProps {\n  isMobile: boolean;\n  toolsWidth: number;\n  navigationWidth: number;\n  children?: React.ReactNode;\n  topOffset?: number;\n  sticky?: boolean;\n}\n\nexport function DarkHeader({ children, topOffset, sticky }: DarkHeaderProps) {\n  return (\n    <div\n      className={clsx(styles['content-header'], sticky && styles['content-header-sticky'])}\n      style={{ top: topOffset }}\n    >\n      {children}\n    </div>\n  );\n}\n"]}

package/app-layout/dark-header/styles.css.js

@@ -0,0 +1,6 @@
+
+    import './styles.scoped.css';
+    export default {
+  "content-header-sticky": "awsui_content-header-sticky_szx2o_8sakc_9"
+};
+  

package/app-layout/dark-header/styles.scoped.css

@@ -0,0 +1,13 @@
+/*
+ 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_content-header-sticky_szx2o_8sakc_9:not(#\9) {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  position: sticky;
+  z-index: 825;
+}

package/app-layout/dark-header/styles.selectors.js

@@ -0,0 +1,7 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "content-header-sticky": "awsui_content-header-sticky_szx2o_8sakc_9"
+};
+  

package/app-layout/defaults.d.ts

@@ -0,0 +1,10 @@
+import { AppLayoutProps } from './interfaces';
+interface AppLayoutState {
+    navigationOpen?: boolean;
+    toolsOpen?: boolean;
+    minContentWidth?: number;
+    maxContentWidth?: number | undefined;
+}
+export declare function applyDefaults(contentType: AppLayoutProps.ContentType, stateFromProps: AppLayoutState, isRefresh: boolean): AppLayoutState;
+export {};
+//# sourceMappingURL=defaults.d.ts.map

package/app-layout/defaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../src/app-layout/defaults.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAkC9C,UAAU,cAAc;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACtC;AAED,wBAAgB,aAAa,CAC3B,WAAW,EAAE,cAAc,CAAC,WAAW,EACvC,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,OAAO,GACjB,cAAc,CAWhB"}

package/app-layout/defaults.js

@@ -0,0 +1,41 @@
+import { __assign } from "tslib";
+var defaultContentTypeState = {
+    navigationOpen: true,
+    minContentWidth: 280,
+    maxContentWidth: undefined
+};
+var defaults = {
+    "default": __assign({}, defaultContentTypeState),
+    cards: {
+        navigationOpen: true,
+        minContentWidth: 280,
+        maxContentWidth: undefined
+    },
+    form: {
+        navigationOpen: false,
+        minContentWidth: 280,
+        maxContentWidth: 800
+    },
+    table: {
+        navigationOpen: true,
+        minContentWidth: 280,
+        maxContentWidth: undefined
+    },
+    wizard: {
+        navigationOpen: false,
+        minContentWidth: 280,
+        maxContentWidth: 1080
+    }
+};
+export function applyDefaults(contentType, stateFromProps, isRefresh) {
+    var _a, _b, _c, _d;
+    var contentTypeDefaults = isRefresh
+        ? __assign(__assign({}, defaults[contentType]), { maxContentWidth: undefined }) : defaults[contentType];
+    return {
+        maxContentWidth: (_a = stateFromProps.maxContentWidth) !== null && _a !== void 0 ? _a : contentTypeDefaults.maxContentWidth,
+        minContentWidth: (_b = stateFromProps.minContentWidth) !== null && _b !== void 0 ? _b : contentTypeDefaults.minContentWidth,
+        navigationOpen: (_c = stateFromProps.navigationOpen) !== null && _c !== void 0 ? _c : contentTypeDefaults.navigationOpen,
+        toolsOpen: (_d = stateFromProps.toolsOpen) !== null && _d !== void 0 ? _d : contentTypeDefaults.toolsOpen
+    };
+}
+//# sourceMappingURL=defaults.js.map

package/app-layout/defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../../src/app-layout/defaults.ts"],"names":[],"mappings":";AAIA,IAAM,uBAAuB,GAAmB;IAC9C,cAAc,EAAE,IAAI;IACpB,eAAe,EAAE,GAAG;IACpB,eAAe,EAAE,SAAS;CAC3B,CAAC;AAEF,IAAM,QAAQ,GAAuD;IACnE,SAAO,eACF,uBAAuB,CAC3B;IACD,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,eAAe,EAAE,GAAG;QACpB,eAAe,EAAE,SAAS;KAC3B;IACD,IAAI,EAAE;QACJ,cAAc,EAAE,KAAK;QACrB,eAAe,EAAE,GAAG;QACpB,eAAe,EAAE,GAAG;KACrB;IACD,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,eAAe,EAAE,GAAG;QACpB,eAAe,EAAE,SAAS;KAC3B;IACD,MAAM,EAAE;QACN,cAAc,EAAE,KAAK;QACrB,eAAe,EAAE,GAAG;QACpB,eAAe,EAAE,IAAI;KACtB;CACF,CAAC;AASF,MAAM,UAAU,aAAa,CAC3B,WAAuC,EACvC,cAA8B,EAC9B,SAAkB;;IAElB,IAAM,mBAAmB,GAAG,SAAS;QACnC,CAAC,uBAAM,QAAQ,CAAC,WAAW,CAAC,KAAE,eAAe,EAAE,SAAS,IACxD,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IAE1B,OAAO;QACL,eAAe,EAAE,MAAA,cAAc,CAAC,eAAe,mCAAI,mBAAmB,CAAC,eAAe;QACtF,eAAe,EAAE,MAAA,cAAc,CAAC,eAAe,mCAAI,mBAAmB,CAAC,eAAe;QACtF,cAAc,EAAE,MAAA,cAAc,CAAC,cAAc,mCAAI,mBAAmB,CAAC,cAAc;QACnF,SAAS,EAAE,MAAA,cAAc,CAAC,SAAS,mCAAI,mBAAmB,CAAC,SAAS;KACrE,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { AppLayoutProps } from './interfaces';\n\nconst defaultContentTypeState: AppLayoutState = {\n  navigationOpen: true,\n  minContentWidth: 280,\n  maxContentWidth: undefined,\n};\n\nconst defaults: Record<AppLayoutProps.ContentType, AppLayoutState> = {\n  default: {\n    ...defaultContentTypeState,\n  },\n  cards: {\n    navigationOpen: true,\n    minContentWidth: 280,\n    maxContentWidth: undefined,\n  },\n  form: {\n    navigationOpen: false,\n    minContentWidth: 280,\n    maxContentWidth: 800,\n  },\n  table: {\n    navigationOpen: true,\n    minContentWidth: 280,\n    maxContentWidth: undefined,\n  },\n  wizard: {\n    navigationOpen: false,\n    minContentWidth: 280,\n    maxContentWidth: 1080,\n  },\n};\n\ninterface AppLayoutState {\n  navigationOpen?: boolean;\n  toolsOpen?: boolean;\n  minContentWidth?: number;\n  maxContentWidth?: number | undefined;\n}\n\nexport function applyDefaults(\n  contentType: AppLayoutProps.ContentType,\n  stateFromProps: AppLayoutState,\n  isRefresh: boolean\n): AppLayoutState {\n  const contentTypeDefaults = isRefresh\n    ? { ...defaults[contentType], maxContentWidth: undefined }\n    : defaults[contentType];\n\n  return {\n    maxContentWidth: stateFromProps.maxContentWidth ?? contentTypeDefaults.maxContentWidth,\n    minContentWidth: stateFromProps.minContentWidth ?? contentTypeDefaults.minContentWidth,\n    navigationOpen: stateFromProps.navigationOpen ?? contentTypeDefaults.navigationOpen,\n    toolsOpen: stateFromProps.toolsOpen ?? contentTypeDefaults.toolsOpen,\n  };\n}\n"]}

package/app-layout/drawer.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ButtonProps } from '../button/interfaces';
+import { togglesConfig } from './toggles';
+import { AppLayoutProps } from './interfaces';
+export interface DesktopDrawerProps {
+    contentClassName?: string;
+    toggleClassName?: string;
+    closeClassName?: string;
+    toggleRefs: {
+        toggle: React.Ref<ButtonProps.Ref>;
+        close: React.Ref<ButtonProps.Ref>;
+    };
+    externalizedToggle?: boolean;
+    width: number;
+    topOffset?: number;
+    bottomOffset?: number;
+    ariaLabels?: AppLayoutProps.Labels;
+    children: React.ReactNode;
+    type: keyof typeof togglesConfig;
+    isMobile?: boolean;
+    isOpen?: boolean;
+    isHidden?: boolean;
+    hasDividerWithSplitPanel?: boolean;
+    onToggle: (isOpen: boolean) => void;
+    onClick?: (event: React.MouseEvent) => void;
+    extendRight?: number;
+}
+export declare function Drawer({ contentClassName, toggleClassName, closeClassName, width, type, toggleRefs, topOffset, bottomOffset, ariaLabels, children, isOpen, isHidden, isMobile, hasDividerWithSplitPanel, onToggle, onClick, extendRight, }: DesktopDrawerProps): JSX.Element;
+//# sourceMappingURL=drawer.d.ts.map

package/app-layout/drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/app-layout/drawer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAgC,aAAa,EAAE,MAAM,WAAW,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAM9C,MAAM,WAAW,kBAAkB;IACjC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE;QACV,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QACnC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;KACnC,CAAC;IACF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,MAAM,OAAO,aAAa,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAmBD,wBAAgB,MAAM,CAAC,EACrB,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,KAAK,EACL,IAAI,EACJ,UAAU,EACV,SAAS,EACT,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,wBAAwB,EACxB,QAAQ,EACR,OAAO,EACP,WAAe,GAChB,EAAE,kBAAkB,eAuEpB"}

package/app-layout/drawer.js

@@ -0,0 +1,64 @@
+// 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 { AppLayoutButton, CloseButton, togglesConfig } from './toggles';
+import styles from './styles.css.js';
+// This matches the design token awsui.$border-divider-section-width in Visual Refresh
+var BORDER_WIDTH = 2;
+// We are using two landmarks per drawer, i.e. two NAVs and two ASIDEs, because of several
+// known bugs in NVDA that cause focus changes within a container to sometimes not be
+// announced. As a result, we use one region for the open button and one region for the
+// actual drawer content, always hiding the other one when it's not visible.
+// An alternative solution to follow a more classic implementation here to only have one
+// button that triggers the opening/closing of the drawer also did not work due to another
+// series of bugs in NVDA (together with Firefox) which prevent the changed expanded state
+// from being announced.
+// Even with this workaround in place, the announcement of the close button when opening a
+// panel in NVDA is not working correctly. The suspected root cause is one of the bugs below
+// as well.
+// Relevant tickets:
+// * https://github.com/nvaccess/nvda/issues/6606
+// * https://github.com/nvaccess/nvda/issues/5825
+// * https://github.com/nvaccess/nvda/issues/5247
+// * https://github.com/nvaccess/nvda/pull/8869 (reverted PR that was going to fix it)
+export function Drawer(_a) {
+    var _b;
+    var contentClassName = _a.contentClassName, toggleClassName = _a.toggleClassName, closeClassName = _a.closeClassName, width = _a.width, type = _a.type, toggleRefs = _a.toggleRefs, topOffset = _a.topOffset, bottomOffset = _a.bottomOffset, ariaLabels = _a.ariaLabels, children = _a.children, isOpen = _a.isOpen, isHidden = _a.isHidden, isMobile = _a.isMobile, hasDividerWithSplitPanel = _a.hasDividerWithSplitPanel, onToggle = _a.onToggle, onClick = _a.onClick, _c = _a.extendRight, extendRight = _c === void 0 ? 0 : _c;
+    var _d = togglesConfig[type], TagName = _d.TagName, iconName = _d.iconName, getLabels = _d.getLabels;
+    var _e = getLabels(ariaLabels), mainLabel = _e.mainLabel, closeLabel = _e.closeLabel, openLabel = _e.openLabel;
+    var hasDividerWithButtonBar = isOpen && extendRight !== 0;
+    var drawerContentWidthOpen = isMobile ? undefined : width;
+    var drawerContentWidth = isOpen ? drawerContentWidthOpen : undefined;
+    var drawerWidth = hasDividerWithButtonBar && drawerContentWidth ? drawerContentWidth + BORDER_WIDTH : drawerContentWidth;
+    var closeIconName = 'close';
+    var regularOpenButton = (React.createElement(TagName, { "aria-label": mainLabel, className: styles.toggle, "aria-hidden": isOpen },
+        React.createElement(AppLayoutButton, { ref: toggleRefs.toggle, className: toggleClassName, iconName: iconName, ariaLabel: openLabel, onClick: function () { return onToggle(true); }, ariaExpanded: false })));
+    return (React.createElement("div", { className: clsx(styles.drawer, (_b = {},
+            _b[styles['drawer-closed']] = !isOpen,
+            _b[styles['drawer-hidden']] = isHidden,
+            _b[styles['drawer-mobile']] = isMobile,
+            _b[styles['has-divider-with-splitpanel']] = hasDividerWithSplitPanel,
+            _b[styles['opaque-background']] = hasDividerWithButtonBar,
+            _b)), style: {
+            width: drawerWidth,
+            marginRight: isOpen ? -1 * extendRight : 0,
+            paddingRight: isOpen ? extendRight : 0
+        }, onClick: function (event) {
+            if (onClick) {
+                onClick(event);
+            }
+            if (!isOpen) {
+                // to prevent calling onToggle from the drawer when it's called from the toggle button
+                if (event.target.tagName !== 'BUTTON') {
+                    onToggle(true);
+                }
+            }
+        } },
+        React.createElement("div", { style: { width: drawerContentWidth, top: topOffset, bottom: bottomOffset }, className: clsx(styles['drawer-content'], contentClassName) },
+            !isMobile && regularOpenButton,
+            React.createElement(TagName, { "aria-label": mainLabel, "aria-hidden": !isOpen },
+                React.createElement(CloseButton, { ref: toggleRefs.close, className: closeClassName, ariaLabel: closeLabel, onClick: function () { return onToggle(false); }, iconName: closeIconName }),
+                children))));
+}
+//# sourceMappingURL=drawer.js.map

package/app-layout/drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/app-layout/drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { ButtonProps } from '../button/interfaces';\nimport { AppLayoutButton, CloseButton, togglesConfig } from './toggles';\nimport { AppLayoutProps } from './interfaces';\nimport styles from './styles.css.js';\n\n// This matches the design token awsui.$border-divider-section-width in Visual Refresh\nconst BORDER_WIDTH = 2;\n\nexport interface DesktopDrawerProps {\n  contentClassName?: string;\n  toggleClassName?: string;\n  closeClassName?: string;\n  toggleRefs: {\n    toggle: React.Ref<ButtonProps.Ref>;\n    close: React.Ref<ButtonProps.Ref>;\n  };\n  externalizedToggle?: boolean;\n  width: number;\n  topOffset?: number;\n  bottomOffset?: number;\n  ariaLabels?: AppLayoutProps.Labels;\n  children: React.ReactNode;\n  type: keyof typeof togglesConfig;\n  isMobile?: boolean;\n  isOpen?: boolean;\n  isHidden?: boolean;\n  hasDividerWithSplitPanel?: boolean;\n  onToggle: (isOpen: boolean) => void;\n  onClick?: (event: React.MouseEvent) => void;\n  extendRight?: number;\n}\n\n// We are using two landmarks per drawer, i.e. two NAVs and two ASIDEs, because of several\n// known bugs in NVDA that cause focus changes within a container to sometimes not be\n// announced. As a result, we use one region for the open button and one region for the\n// actual drawer content, always hiding the other one when it's not visible.\n// An alternative solution to follow a more classic implementation here to only have one\n// button that triggers the opening/closing of the drawer also did not work due to another\n// series of bugs in NVDA (together with Firefox) which prevent the changed expanded state\n// from being announced.\n// Even with this workaround in place, the announcement of the close button when opening a\n// panel in NVDA is not working correctly. The suspected root cause is one of the bugs below\n// as well.\n// Relevant tickets:\n// * https://github.com/nvaccess/nvda/issues/6606\n// * https://github.com/nvaccess/nvda/issues/5825\n// * https://github.com/nvaccess/nvda/issues/5247\n// * https://github.com/nvaccess/nvda/pull/8869 (reverted PR that was going to fix it)\n\nexport function Drawer({\n  contentClassName,\n  toggleClassName,\n  closeClassName,\n  width,\n  type,\n  toggleRefs,\n  topOffset,\n  bottomOffset,\n  ariaLabels,\n  children,\n  isOpen,\n  isHidden,\n  isMobile,\n  hasDividerWithSplitPanel,\n  onToggle,\n  onClick,\n  extendRight = 0,\n}: DesktopDrawerProps) {\n  const { TagName, iconName, getLabels } = togglesConfig[type];\n  const { mainLabel, closeLabel, openLabel } = getLabels(ariaLabels);\n  const hasDividerWithButtonBar = isOpen && extendRight !== 0;\n\n  const drawerContentWidthOpen = isMobile ? undefined : width;\n  const drawerContentWidth = isOpen ? drawerContentWidthOpen : undefined;\n\n  const drawerWidth =\n    hasDividerWithButtonBar && drawerContentWidth ? drawerContentWidth + BORDER_WIDTH : drawerContentWidth;\n\n  const closeIconName = 'close';\n\n  const regularOpenButton = (\n    <TagName aria-label={mainLabel} className={styles.toggle} aria-hidden={isOpen}>\n      <AppLayoutButton\n        ref={toggleRefs.toggle}\n        className={toggleClassName}\n        iconName={iconName}\n        ariaLabel={openLabel}\n        onClick={() => onToggle(true)}\n        ariaExpanded={false}\n      />\n    </TagName>\n  );\n\n  return (\n    <div\n      className={clsx(styles.drawer, {\n        [styles['drawer-closed']]: !isOpen,\n        [styles['drawer-hidden']]: isHidden,\n        [styles['drawer-mobile']]: isMobile,\n        [styles['has-divider-with-splitpanel']]: hasDividerWithSplitPanel,\n        [styles['opaque-background']]: hasDividerWithButtonBar,\n      })}\n      style={{\n        width: drawerWidth,\n        marginRight: isOpen ? -1 * extendRight : 0,\n        paddingRight: isOpen ? extendRight : 0,\n      }}\n      onClick={event => {\n        if (onClick) {\n          onClick(event);\n        }\n\n        if (!isOpen) {\n          // to prevent calling onToggle from the drawer when it's called from the toggle button\n          if ((event.target as Element).tagName !== 'BUTTON') {\n            onToggle(true);\n          }\n        }\n      }}\n    >\n      <div\n        style={{ width: drawerContentWidth, top: topOffset, bottom: bottomOffset }}\n        className={clsx(styles['drawer-content'], contentClassName)}\n      >\n        {!isMobile && regularOpenButton}\n        <TagName aria-label={mainLabel} aria-hidden={!isOpen}>\n          <CloseButton\n            ref={toggleRefs.close}\n            className={closeClassName}\n            ariaLabel={closeLabel}\n            onClick={() => onToggle(false)}\n            iconName={closeIconName}\n          />\n          {children}\n        </TagName>\n      </div>\n    </div>\n  );\n}\n"]}

package/app-layout/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { AppLayoutProps } from './interfaces';
+export { AppLayoutProps };
+declare const AppLayout: React.ForwardRefExoticComponent<AppLayoutProps & React.RefAttributes<AppLayoutProps.Ref>>;
+export default AppLayout;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/app-layout/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAM7F,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAgC9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FAmBd,CAAC;AAqhBF,eAAe,SAAS,CAAC"}