@cloudscape-design/components 3.0.0

package/internal/components/selectable-item/index.js

@@ -0,0 +1,70 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useRef, useLayoutEffect } from 'react';
+import clsx from 'clsx';
+import styles from './styles.css.js';
+import { getBaseProps } from '../../base-component';
+var SelectableItem = function (_a, ref) {
+    var _b;
+    var content = _a.children, ariaSelected = _a.ariaSelected, ariaChecked = _a.ariaChecked, selected = _a.selected, highlighted = _a.highlighted, disabled = _a.disabled, hasBackground = _a.hasBackground, isParent = _a.isParent, isChild = _a.isChild, isKeyboard = _a.isKeyboard, virtualPosition = _a.virtualPosition, padBottom = _a.padBottom, isNextSelected = _a.isNextSelected, useInteractiveGroups = _a.useInteractiveGroups, screenReaderContent = _a.screenReaderContent, ariaPosinset = _a.ariaPosinset, ariaSetsize = _a.ariaSetsize, restProps = __rest(_a, ["children", "ariaSelected", "ariaChecked", "selected", "highlighted", "disabled", "hasBackground", "isParent", "isChild", "isKeyboard", "virtualPosition", "padBottom", "isNextSelected", "useInteractiveGroups", "screenReaderContent", "ariaPosinset", "ariaSetsize"]);
+    var _c = getBaseProps(restProps), className = _c.className, rest = __rest(_c, ["className"]);
+    var classNames = clsx(className, styles['selectable-item'], (_b = {},
+        _b[styles.selected] = selected,
+        _b[styles.highlighted] = highlighted,
+        _b[styles['has-background']] = hasBackground,
+        _b[styles.parent] = isParent,
+        _b[styles.child] = isChild,
+        _b[styles['is-keyboard']] = isKeyboard,
+        _b[styles.disabled] = disabled,
+        _b[styles.virtual] = virtualPosition !== undefined,
+        _b[styles['pad-bottom']] = padBottom,
+        _b[styles['next-item-selected']] = isNextSelected,
+        _b[styles.interactiveGroups] = useInteractiveGroups,
+        _b));
+    var contentRef = useRef(null);
+    var screenReaderContentRef = useRef(null);
+    useLayoutEffect(function () {
+        // the state of aria-hidden and announcement is not set back because NVDA+Firefox would announce
+        // the item which lost highlight
+        // set aria-hidden true when there is announcement content, so that screen reader still announce
+        // meaningful content when navigate with screen reader cursor
+        // imperatively update to avoid announcement made multiple times when content updates
+        if (highlighted && screenReaderContent) {
+            if (contentRef.current) {
+                contentRef.current.setAttribute('aria-hidden', 'true');
+            }
+            if (screenReaderContentRef.current) {
+                screenReaderContentRef.current.textContent = screenReaderContent;
+            }
+        }
+    }, [highlighted, screenReaderContent, contentRef, screenReaderContentRef]);
+    var style = virtualPosition !== undefined
+        ? {
+            transform: "translateY(".concat(virtualPosition, "px)")
+        }
+        : undefined;
+    var a11yProperties = {
+        'aria-disabled': disabled
+    };
+    if (isParent && !useInteractiveGroups) {
+        a11yProperties['aria-hidden'] = true;
+    }
+    if (ariaSelected) {
+        a11yProperties['aria-selected'] = ariaSelected;
+    }
+    // Safari+VO needs aria-checked for multi-selection. Otherwise it only announces selected option even though another option is highlighted.
+    if (ariaChecked) {
+        a11yProperties['aria-checked'] = ariaChecked;
+    }
+    if (ariaPosinset && ariaSetsize) {
+        a11yProperties['aria-posinset'] = ariaPosinset;
+        a11yProperties['aria-setsize'] = ariaSetsize;
+    }
+    return (React.createElement("li", __assign({ role: "option", className: classNames, style: style }, a11yProperties, rest),
+        React.createElement("div", { className: styles['option-content'], ref: contentRef }, content),
+        React.createElement("div", { className: styles['measure-strut'], ref: ref }),
+        React.createElement("div", { className: styles['screenreader-content'], ref: screenReaderContentRef })));
+};
+export default React.forwardRef(SelectableItem);
+//# sourceMappingURL=index.js.map

package/internal/components/selectable-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/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, { useRef, useLayoutEffect } from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\n\nexport interface SelectableItemProps extends BaseComponentProps {\n  children: React.ReactNode;\n  ariaSelected?: boolean;\n  ariaChecked?: boolean;\n  selected?: boolean;\n  highlighted?: boolean;\n  disabled?: boolean;\n  hasBackground?: boolean;\n  isParent?: boolean;\n  isChild?: boolean;\n  isKeyboard?: boolean;\n  virtualPosition?: number;\n  padBottom?: boolean;\n  isNextSelected?: boolean;\n  useInteractiveGroups?: boolean;\n  screenReaderContent?: string;\n  ariaPosinset?: number;\n  ariaSetsize?: number;\n}\n\nconst SelectableItem = (\n  {\n    children: content,\n    ariaSelected,\n    ariaChecked,\n    selected,\n    highlighted,\n    disabled,\n    hasBackground,\n    isParent,\n    isChild,\n    isKeyboard,\n    virtualPosition,\n    padBottom,\n    isNextSelected,\n    useInteractiveGroups,\n    screenReaderContent,\n    ariaPosinset,\n    ariaSetsize,\n    ...restProps\n  }: SelectableItemProps,\n  ref: React.Ref<HTMLDivElement>\n) => {\n  const { className, ...rest } = getBaseProps(restProps);\n  const classNames = clsx(className, styles['selectable-item'], {\n    [styles.selected]: selected,\n    [styles.highlighted]: highlighted,\n    [styles['has-background']]: hasBackground,\n    [styles.parent]: isParent,\n    [styles.child]: isChild,\n    [styles['is-keyboard']]: isKeyboard,\n    [styles.disabled]: disabled,\n    [styles.virtual]: virtualPosition !== undefined,\n    [styles['pad-bottom']]: padBottom,\n    [styles['next-item-selected']]: isNextSelected,\n    [styles.interactiveGroups]: useInteractiveGroups,\n  });\n\n  const contentRef = useRef<HTMLDivElement>(null);\n  const screenReaderContentRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    // the state of aria-hidden and announcement is not set back because NVDA+Firefox would announce\n    // the item which lost highlight\n    // set aria-hidden true when there is announcement content, so that screen reader still announce\n    // meaningful content when navigate with screen reader cursor\n    // imperatively update to avoid announcement made multiple times when content updates\n    if (highlighted && screenReaderContent) {\n      if (contentRef.current) {\n        contentRef.current.setAttribute('aria-hidden', 'true');\n      }\n      if (screenReaderContentRef.current) {\n        screenReaderContentRef.current.textContent = screenReaderContent;\n      }\n    }\n  }, [highlighted, screenReaderContent, contentRef, screenReaderContentRef]);\n\n  const style =\n    virtualPosition !== undefined\n      ? {\n          transform: `translateY(${virtualPosition}px)`,\n        }\n      : undefined;\n\n  const a11yProperties: Record<string, string | number | boolean | undefined> = {\n    'aria-disabled': disabled,\n  };\n\n  if (isParent && !useInteractiveGroups) {\n    a11yProperties['aria-hidden'] = true;\n  }\n\n  if (ariaSelected) {\n    a11yProperties['aria-selected'] = ariaSelected;\n  }\n\n  // Safari+VO needs aria-checked for multi-selection. Otherwise it only announces selected option even though another option is highlighted.\n  if (ariaChecked) {\n    a11yProperties['aria-checked'] = ariaChecked;\n  }\n\n  if (ariaPosinset && ariaSetsize) {\n    a11yProperties['aria-posinset'] = ariaPosinset;\n    a11yProperties['aria-setsize'] = ariaSetsize;\n  }\n\n  return (\n    <li role=\"option\" className={classNames} style={style} {...a11yProperties} {...rest}>\n      <div className={styles['option-content']} ref={contentRef}>\n        {content}\n      </div>\n      <div className={styles['measure-strut']} ref={ref} />\n      <div className={styles['screenreader-content']} ref={screenReaderContentRef}></div>\n    </li>\n  );\n};\n\nexport default React.forwardRef(SelectableItem);\n"]}

package/internal/components/selectable-item/styles.css.js

@@ -0,0 +1,21 @@
+
+    import './styles.scoped.css';
+    export default {
+  "selectable-item": "awsui_selectable-item_15o6u_17xft_93",
+  "pad-bottom": "awsui_pad-bottom_15o6u_17xft_113",
+  "has-background": "awsui_has-background_15o6u_17xft_122",
+  "highlighted": "awsui_highlighted_15o6u_17xft_125",
+  "selected": "awsui_selected_15o6u_17xft_125",
+  "disabled": "awsui_disabled_15o6u_17xft_139",
+  "next-item-selected": "awsui_next-item-selected_15o6u_17xft_149",
+  "is-keyboard": "awsui_is-keyboard_15o6u_17xft_157",
+  "parent": "awsui_parent_15o6u_17xft_160",
+  "interactiveGroups": "awsui_interactiveGroups_15o6u_17xft_164",
+  "child": "awsui_child_15o6u_17xft_176",
+  "virtual": "awsui_virtual_15o6u_17xft_191",
+  "measure-strut": "awsui_measure-strut_15o6u_17xft_202",
+  "measure-strut-first": "awsui_measure-strut-first_15o6u_17xft_211",
+  "screenreader-content": "awsui_screenreader-content_15o6u_17xft_215",
+  "option-content": "awsui_option-content_15o6u_17xft_221"
+};
+  

package/internal/components/selectable-item/styles.scoped.css

@@ -0,0 +1,267 @@
+/*
+ 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_selectable-item_15o6u_17xft_93:not(#\9) {
+  font-size: 14px;
+  font-size: var(--font-body-m-size-sregvd, 14px);
+  line-height: 22px;
+  line-height: var(--font-body-m-line-height-i7xxvv, 22px);
+  color: #000716;
+  color: var(--color-text-body-default-ajf1h5, #000716);
+  font-weight: 400;
+  font-family: "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
+  font-family: var(--font-family-base-qnistn, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  position: relative;
+  list-style: none;
+  z-index: 1;
+  border: 1px solid transparent;
+  border: var(--border-divider-list-width-hacikr, 1px) solid transparent;
+  border-top-color: #e9ebed;
+  border-top-color: var(--color-border-dropdown-item-default-faosd8, #e9ebed);
+  border-bottom-color: #e9ebed;
+  border-bottom-color: var(--color-border-dropdown-item-default-faosd8, #e9ebed);
+  background-color: #ffffff;
+  background-color: var(--color-background-dropdown-item-default-fzdqsg, #ffffff);
+  color: #000716;
+  color: var(--color-text-dropdown-item-default-7tg9p2, #000716);
+  border-left-width: 0;
+  border-right-width: 0;
+  padding: calc(
+  4px + (2px - 1px)
+) calc(12px + 2px);
+  padding: calc(
+  var(--space-xxs-ynfts5, 4px) + (var(--border-item-width-qbbbsa, 2px) - var(--border-divider-list-width-hacikr, 1px))
+) calc(var(--space-field-horizontal-89h2yr, 12px) + var(--border-item-width-qbbbsa, 2px));
+}
+.awsui_selectable-item_15o6u_17xft_93.awsui_pad-bottom_15o6u_17xft_113:not(#\9) {
+  padding-bottom: calc(calc(
+  4px + (2px - 1px)
+) + 2px);
+  padding-bottom: calc(calc(
+  var(--space-xxs-ynfts5, 4px) + (var(--border-item-width-qbbbsa, 2px) - var(--border-divider-list-width-hacikr, 1px))
+) + var(--space-xxxs-k2w98v, 2px));
+  border-bottom-color: transparent;
+}
+.awsui_selectable-item_15o6u_17xft_93:not(#\9):not(:first-child) {
+  margin-top: calc(-1 * 2px);
+  margin-top: calc(-1 * var(--border-item-width-qbbbsa, 2px));
+}
+.awsui_selectable-item_15o6u_17xft_93.awsui_has-background_15o6u_17xft_122:not(#\9) {
+  background-color: #f4f4f4;
+  background-color: var(--color-background-dropdown-item-hover-mqsxkv, #f4f4f4);
+}
+.awsui_selectable-item_15o6u_17xft_93.awsui_highlighted_15o6u_17xft_125:not(#\9), .awsui_selectable-item_15o6u_17xft_93.awsui_selected_15o6u_17xft_125:not(#\9) {
+  color: #000716;
+  color: var(--color-text-dropdown-item-highlighted-oaabyk, #000716);
+  border-width: 2px;
+  border-width: var(--border-item-width-qbbbsa, 2px);
+  border-radius: 8px;
+  border-radius: var(--border-item-radius-43830w, 8px);
+  padding: 4px 12px;
+  padding: var(--space-xxs-ynfts5, 4px) var(--space-field-horizontal-89h2yr, 12px);
+}
+.awsui_selectable-item_15o6u_17xft_93.awsui_highlighted_15o6u_17xft_125.awsui_pad-bottom_15o6u_17xft_113:not(#\9), .awsui_selectable-item_15o6u_17xft_93.awsui_selected_15o6u_17xft_125.awsui_pad-bottom_15o6u_17xft_113:not(#\9) {
+  padding-bottom: calc(4px + 2px);
+  padding-bottom: calc(var(--space-xxs-ynfts5, 4px) + var(--space-xxxs-k2w98v, 2px));
+}
+.awsui_selectable-item_15o6u_17xft_93.awsui_highlighted_15o6u_17xft_125:not(#\9) {
+  z-index: 2;
+  background-color: #f4f4f4;
+  background-color: var(--color-background-dropdown-item-hover-mqsxkv, #f4f4f4);
+  border-color: #7d8998;
+  border-color: var(--color-border-dropdown-item-hover-tyzq9m, #7d8998);
+}
+.awsui_selectable-item_15o6u_17xft_93.awsui_highlighted_15o6u_17xft_125.awsui_disabled_15o6u_17xft_139:not(#\9) {
+  color: #9ba7b6;
+  color: var(--color-text-dropdown-item-dimmed-jyqdrs, #9ba7b6);
+  border-color: #7d8998;
+  border-color: var(--color-border-dropdown-item-dimmed-hover-6dhy15, #7d8998);
+  background-color: transparent;
+  background-color: var(--color-background-dropdown-item-dimmed-qw48ma, transparent);
+}
+.awsui_selectable-item_15o6u_17xft_93.awsui_selected_15o6u_17xft_125:not(#\9) {
+  z-index: 3;
+  background-color: #f2f8fd;
+  background-color: var(--color-background-dropdown-item-selected-8l4mpk, #f2f8fd);
+  border-color: #0972d3;
+  border-color: var(--color-border-dropdown-item-selected-eahq2j, #0972d3);
+}
+.awsui_selectable-item_15o6u_17xft_93.awsui_selected_15o6u_17xft_125.awsui_next-item-selected_15o6u_17xft_149:not(#\9) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.awsui_selectable-item_15o6u_17xft_93.awsui_selected_15o6u_17xft_125 + .awsui_selectable-item_15o6u_17xft_93.awsui_selected_15o6u_17xft_125:not(#\9) {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.awsui_selectable-item_15o6u_17xft_93.awsui_highlighted_15o6u_17xft_125.awsui_selected_15o6u_17xft_125.awsui_is-keyboard_15o6u_17xft_157:not(#\9) {
+  box-shadow: inset 0 0 0 1px #0972d3;
+  box-shadow: inset 0 0 0 1px var(--color-border-item-focused-ap3b6s, #0972d3);
+}
+.awsui_selectable-item_15o6u_17xft_93.awsui_parent_15o6u_17xft_160:not(#\9) {
+  font-weight: bold;
+  color: #414d5c;
+  color: var(--color-text-dropdown-group-label-eaqlcl, #414d5c);
+}
+.awsui_selectable-item_15o6u_17xft_93.awsui_parent_15o6u_17xft_160:not(#\9):not(.awsui_interactiveGroups_15o6u_17xft_164) {
+  border-top-color: #e9ebed;
+  border-top-color: var(--color-border-dropdown-group-0utpsr, #e9ebed);
+  padding: 8px;
+  padding: var(--space-xs-rsr2qu, 8px);
+}
+.awsui_selectable-item_15o6u_17xft_93.awsui_parent_15o6u_17xft_160.awsui_interactiveGroups_15o6u_17xft_164:not(#\9) {
+  padding: calc(
+  8px + (2px - 1px)
+) calc(12px + 2px);
+  padding: calc(
+  var(--space-xs-rsr2qu, 8px) + (var(--border-item-width-qbbbsa, 2px) - var(--border-divider-list-width-hacikr, 1px))
+) calc(var(--space-field-horizontal-89h2yr, 12px) + var(--border-item-width-qbbbsa, 2px));
+}
+.awsui_selectable-item_15o6u_17xft_93.awsui_parent_15o6u_17xft_160.awsui_interactiveGroups_15o6u_17xft_164.awsui_highlighted_15o6u_17xft_125:not(#\9), .awsui_selectable-item_15o6u_17xft_93.awsui_parent_15o6u_17xft_160.awsui_interactiveGroups_15o6u_17xft_164.awsui_selected_15o6u_17xft_125:not(#\9) {
+  padding: 8px 12px;
+  padding: var(--space-xs-rsr2qu, 8px) var(--space-field-horizontal-89h2yr, 12px);
+}
+.awsui_selectable-item_15o6u_17xft_93.awsui_child_15o6u_17xft_176:not(#\9) {
+  padding-left: calc(32px + 2px);
+  padding-left: calc(var(--space-xxl-2nvmf1, 32px) + var(--border-item-width-qbbbsa, 2px));
+}
+.awsui_selectable-item_15o6u_17xft_93.awsui_child_15o6u_17xft_176.awsui_highlighted_15o6u_17xft_125:not(#\9), .awsui_selectable-item_15o6u_17xft_93.awsui_child_15o6u_17xft_176.awsui_selected_15o6u_17xft_125:not(#\9) {
+  padding-left: 32px;
+  padding-left: var(--space-xxl-2nvmf1, 32px);
+}
+.awsui_selectable-item_15o6u_17xft_93.awsui_disabled_15o6u_17xft_139:not(#\9) {
+  color: #9ba7b6;
+  color: var(--color-text-dropdown-item-disabled-varol7, #9ba7b6);
+}
+.awsui_selectable-item_15o6u_17xft_93:not(#\9):not(.awsui_disabled_15o6u_17xft_139):not(.awsui_parent_15o6u_17xft_160) {
+  cursor: pointer;
+}
+.awsui_selectable-item_15o6u_17xft_93.awsui_interactiveGroups_15o6u_17xft_164:not(#\9):not(.awsui_disabled_15o6u_17xft_139) {
+  cursor: pointer;
+}
+.awsui_selectable-item_15o6u_17xft_93.awsui_virtual_15o6u_17xft_191:not(#\9) {
+  position: absolute;
+  top: 2px;
+  top: var(--border-dropdown-virtual-offset-width-fzhepk, 2px);
+  left: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+.awsui_selectable-item_15o6u_17xft_93.awsui_virtual_15o6u_17xft_191:not(#\9):first-of-type:not(.awsui_selected_15o6u_17xft_125, .awsui_highlighted_15o6u_17xft_125) {
+  border-top-color: transparent;
+  border-top-color: var(--color-border-dropdown-item-top-xnzq48, transparent);
+}
+
+.awsui_measure-strut_15o6u_17xft_202:not(#\9) {
+  position: absolute;
+  pointer-events: none;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  padding-top: 1px;
+  padding-top: var(--border-divider-list-width-hacikr, 1px);
+}
+.awsui_measure-strut-first_15o6u_17xft_211:not(#\9) {
+  padding-bottom: 1px;
+  padding-bottom: var(--border-divider-list-width-hacikr, 1px);
+}
+
+.awsui_screenreader-content_15o6u_17xft_215:not(#\9) {
+  position: absolute !important;
+  top: -9999px !important;
+  left: -9999px !important;
+}
+
+.awsui_option-content_15o6u_17xft_221:not(#\9) {
+  /* used in test-utils */
+}

package/internal/components/selectable-item/styles.selectors.js

@@ -0,0 +1,22 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "selectable-item": "awsui_selectable-item_15o6u_17xft_93",
+  "pad-bottom": "awsui_pad-bottom_15o6u_17xft_113",
+  "has-background": "awsui_has-background_15o6u_17xft_122",
+  "highlighted": "awsui_highlighted_15o6u_17xft_125",
+  "selected": "awsui_selected_15o6u_17xft_125",
+  "disabled": "awsui_disabled_15o6u_17xft_139",
+  "next-item-selected": "awsui_next-item-selected_15o6u_17xft_149",
+  "is-keyboard": "awsui_is-keyboard_15o6u_17xft_157",
+  "parent": "awsui_parent_15o6u_17xft_160",
+  "interactiveGroups": "awsui_interactiveGroups_15o6u_17xft_164",
+  "child": "awsui_child_15o6u_17xft_176",
+  "virtual": "awsui_virtual_15o6u_17xft_191",
+  "measure-strut": "awsui_measure-strut_15o6u_17xft_202",
+  "measure-strut-first": "awsui_measure-strut-first_15o6u_17xft_211",
+  "screenreader-content": "awsui_screenreader-content_15o6u_17xft_215",
+  "option-content": "awsui_option-content_15o6u_17xft_221"
+};
+  

package/internal/components/tab-trap/index.d.ts

@@ -0,0 +1,10 @@
+export interface TabTrapProps {
+    focusNextCallback: FocusNextElement;
+    disabled?: boolean;
+}
+export interface FocusNextElement {
+    (): void;
+}
+declare const TabTrap: ({ focusNextCallback, disabled }: TabTrapProps) => JSX.Element;
+export default TabTrap;
+//# sourceMappingURL=index.d.ts.map

package/internal/components/tab-trap/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/tab-trap/index.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,YAAY;IAC3B,iBAAiB,EAAE,gBAAgB,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,IAAI,CAAC;CACV;AAKD,QAAA,MAAM,OAAO,oCAA6C,YAAY,gBAErE,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/internal/components/tab-trap/index.js

@@ -0,0 +1,12 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+// This component handles focus-forwarding when navigating through the calendar grid.
+// When the customer focuses that component the `next` callback function is called
+// with forwards the focus.
+var TabTrap = function (_a) {
+    var focusNextCallback = _a.focusNextCallback, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
+    return React.createElement("div", { tabIndex: disabled ? -1 : 0, onFocus: focusNextCallback });
+};
+export default TabTrap;
+//# sourceMappingURL=index.js.map

package/internal/components/tab-trap/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/tab-trap/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,qFAAqF;AACrF,kFAAkF;AAClF,2BAA2B;AAC3B,IAAM,OAAO,GAAG,UAAC,EAAqD;QAAnD,iBAAiB,uBAAA,EAAE,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA;IACpD,OAAO,6BAAK,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,iBAAiB,GAAI,CAAC;AAC1E,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nexport interface TabTrapProps {\n  focusNextCallback: FocusNextElement;\n  disabled?: boolean;\n}\n\nexport interface FocusNextElement {\n  (): void;\n}\n\n// This component handles focus-forwarding when navigating through the calendar grid.\n// When the customer focuses that component the `next` callback function is called\n// with forwards the focus.\nconst TabTrap = ({ focusNextCallback, disabled = false }: TabTrapProps) => {\n  return <div tabIndex={disabled ? -1 : 0} onFocus={focusNextCallback} />;\n};\n\nexport default TabTrap;\n"]}

package/internal/components/transition/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { MutableRefObject } from 'react';
+import { TransitionStatus as ReactTransitionGroupTransitionStatus } from 'react-transition-group';
+export declare type TransitionStatus = ReactTransitionGroupTransitionStatus | 'enter' | 'exit';
+export interface TransitionProps {
+    in: boolean;
+    exit?: boolean;
+    disabled?: boolean;
+    children: (state: TransitionStatus, transitioningElementRef: MutableRefObject<any>) => React.ReactNode;
+    onStatusChange?: (status: TransitionStatus) => void;
+    transitionChangeDelay?: {
+        entering?: number;
+    };
+}
+/**
+ * This component is a wrapper around the CSSTransition component.
+ *
+ * It provides a second parameter in its rendering function that must be
+ * attached to the node that is transitioning.
+ */
+export declare function Transition({ in: isIn, children, exit, onStatusChange, disabled, transitionChangeDelay, ...rest }: TransitionProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/internal/components/transition/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/transition/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAuB,MAAM,OAAO,CAAC;AAC9D,OAAO,EAEL,gBAAgB,IAAI,oCAAoC,EACzD,MAAM,wBAAwB,CAAC;AAGhC,oBAAY,gBAAgB,GAAG,oCAAoC,GAAG,OAAO,GAAG,MAAM,CAAC;AAEvF,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,OAAO,CAAC;IACZ,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,gBAAgB,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACvG,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACpD,qBAAqB,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC/C;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,EAAE,EAAE,IAAI,EACR,QAAQ,EACR,IAAW,EACX,cAA6B,EAC7B,QAAgB,EAChB,qBAAqB,EACrB,GAAG,IAAI,EACR,EAAE,eAAe,eA8EjB"}

package/internal/components/transition/index.js

@@ -0,0 +1,75 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+import { useCallback, useRef } from 'react';
+import { Transition as ReactTransitionGroupTransition, } from 'react-transition-group';
+import { useReducedMotion } from '../../hooks/use-visual-mode';
+/**
+ * This component is a wrapper around the CSSTransition component.
+ *
+ * It provides a second parameter in its rendering function that must be
+ * attached to the node that is transitioning.
+ */
+export function Transition(_a) {
+    var isIn = _a["in"], children = _a.children, _b = _a.exit, exit = _b === void 0 ? true : _b, _c = _a.onStatusChange, onStatusChange = _c === void 0 ? function () { return void 0; } : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, transitionChangeDelay = _a.transitionChangeDelay, rest = __rest(_a, ["in", "children", "exit", "onStatusChange", "disabled", "transitionChangeDelay"]);
+    var transitionRootElement = useRef(null);
+    // the initial state of the transition should be either 'exited' or 'entered' depending
+    // on the `in` property, this mimicks how internally the Transition component works here:
+    // https://github.com/reactjs/react-transition-group/blob/6cbd6aaedaf8e9472007640b429ddb48c6c24158/src/Transition.js#L121
+    var _e = useState(isIn ? 'entered' : 'exited'), transitionState = _e[0], setTransitionState = _e[1];
+    var motionDisabled = useReducedMotion(transitionRootElement) || disabled;
+    var addTransitionEndListener = useCallback(function (done) {
+        var node = transitionRootElement.current;
+        if (node === null) {
+            return;
+        }
+        var listener = function (e) {
+            if (e.target === node) {
+                node.removeEventListener('transitionend', listener);
+                node.removeEventListener('animationend', listener);
+                done();
+            }
+        };
+        node.addEventListener('transitionend', listener);
+        node.addEventListener('animationend', listener);
+    }, []);
+    return (React.createElement(ReactTransitionGroupTransition, __assign({ addEndListener: addTransitionEndListener, timeout: motionDisabled ? 0 : undefined, "in": isIn, nodeRef: transitionRootElement, exit: exit, onEnter: function (isAppearing) {
+            if (!isAppearing) {
+                setTransitionState('enter');
+                onStatusChange('enter');
+            }
+        }, onEntering: function (isAppearing) {
+            var _a;
+            if (!isAppearing) {
+                // This line forces the browser to recalculate the layout because we want the starting state in the 'enter' style
+                // to be applied before the animation starts.
+                void ((_a = transitionRootElement.current) === null || _a === void 0 ? void 0 : _a.offsetHeight);
+                if (transitionChangeDelay === null || transitionChangeDelay === void 0 ? void 0 : transitionChangeDelay.entering) {
+                    setTimeout(function () {
+                        setTransitionState('entering');
+                        onStatusChange('entering');
+                    }, transitionChangeDelay === null || transitionChangeDelay === void 0 ? void 0 : transitionChangeDelay.entering);
+                }
+                else {
+                    setTransitionState('entering');
+                    onStatusChange('entering');
+                }
+            }
+        }, onEntered: function (isAppearing) {
+            if (!isAppearing) {
+                setTransitionState('entered');
+                onStatusChange('entered');
+            }
+        }, onExit: function () {
+            setTransitionState('exit');
+            onStatusChange('exit');
+        }, onExiting: function () {
+            setTransitionState('exiting');
+            onStatusChange('exiting');
+        }, onExited: function () {
+            setTransitionState('exited');
+            onStatusChange('exited');
+        } }, rest), function () { return children(transitionState, transitionRootElement); }));
+}
+//# sourceMappingURL=index.js.map

package/internal/components/transition/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/transition/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 { MutableRefObject, useCallback, useRef } from 'react';\nimport {\n  Transition as ReactTransitionGroupTransition,\n  TransitionStatus as ReactTransitionGroupTransitionStatus,\n} from 'react-transition-group';\nimport { useReducedMotion } from '../../hooks/use-visual-mode';\n\nexport type TransitionStatus = ReactTransitionGroupTransitionStatus | 'enter' | 'exit';\n\nexport interface TransitionProps {\n  in: boolean;\n  exit?: boolean;\n\n  disabled?: boolean;\n\n  children: (state: TransitionStatus, transitioningElementRef: MutableRefObject<any>) => React.ReactNode;\n  onStatusChange?: (status: TransitionStatus) => void;\n  transitionChangeDelay?: { entering?: number };\n}\n\n/**\n * This component is a wrapper around the CSSTransition component.\n *\n * It provides a second parameter in its rendering function that must be\n * attached to the node that is transitioning.\n */\nexport function Transition({\n  in: isIn,\n  children,\n  exit = true,\n  onStatusChange = () => void 0,\n  disabled = false,\n  transitionChangeDelay,\n  ...rest\n}: TransitionProps) {\n  const transitionRootElement = useRef<HTMLElement>(null);\n  // the initial state of the transition should be either 'exited' or 'entered' depending\n  // on the `in` property, this mimicks how internally the Transition component works here:\n  // https://github.com/reactjs/react-transition-group/blob/6cbd6aaedaf8e9472007640b429ddb48c6c24158/src/Transition.js#L121\n  const [transitionState, setTransitionState] = useState<TransitionStatus>(isIn ? 'entered' : 'exited');\n  const motionDisabled = useReducedMotion(transitionRootElement) || disabled;\n\n  const addTransitionEndListener = useCallback((done: () => void) => {\n    const node = transitionRootElement.current;\n\n    if (node === null) {\n      return;\n    }\n    const listener = (e: TransitionEvent | AnimationEvent) => {\n      if (e.target === node) {\n        node.removeEventListener('transitionend', listener);\n        node.removeEventListener('animationend', listener);\n        done();\n      }\n    };\n    node.addEventListener('transitionend', listener);\n    node.addEventListener('animationend', listener);\n  }, []);\n\n  return (\n    <ReactTransitionGroupTransition\n      addEndListener={addTransitionEndListener}\n      timeout={motionDisabled ? 0 : undefined}\n      in={isIn}\n      nodeRef={transitionRootElement}\n      exit={exit}\n      onEnter={isAppearing => {\n        if (!isAppearing) {\n          setTransitionState('enter');\n          onStatusChange('enter');\n        }\n      }}\n      onEntering={isAppearing => {\n        if (!isAppearing) {\n          // This line forces the browser to recalculate the layout because we want the starting state in the 'enter' style\n          // to be applied before the animation starts.\n          void transitionRootElement.current?.offsetHeight;\n\n          if (transitionChangeDelay?.entering) {\n            setTimeout(() => {\n              setTransitionState('entering');\n              onStatusChange('entering');\n            }, transitionChangeDelay?.entering);\n          } else {\n            setTransitionState('entering');\n            onStatusChange('entering');\n          }\n        }\n      }}\n      onEntered={isAppearing => {\n        if (!isAppearing) {\n          setTransitionState('entered');\n          onStatusChange('entered');\n        }\n      }}\n      onExit={() => {\n        setTransitionState('exit');\n        onStatusChange('exit');\n      }}\n      onExiting={() => {\n        setTransitionState('exiting');\n        onStatusChange('exiting');\n      }}\n      onExited={() => {\n        setTransitionState('exited');\n        onStatusChange('exited');\n      }}\n      {...rest}\n    >\n      {() => children(transitionState, transitionRootElement)}\n    </ReactTransitionGroupTransition>\n  );\n}\n"]}

package/internal/components/visual-context/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare const useVisualContext: (elementRef: React.RefObject<HTMLElement>) => string;
+interface VisualContextProps {
+    contextName: string;
+    className?: string;
+    children: React.ReactNode;
+}
+export default function VisualContext({ contextName, className, children }: VisualContextProps): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/internal/components/visual-context/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/visual-context/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,eAAO,MAAM,gBAAgB,eAAgB,MAAM,SAAS,CAAC,WAAW,CAAC,WAQxE,CAAC;AAEF,UAAU,kBAAkB;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,kBAAkB,eAE7F"}

package/internal/components/visual-context/index.js

@@ -0,0 +1,20 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import clsx from 'clsx';
+import React, { useState } from 'react';
+import { useMutationObserver } from '../../hooks/use-mutation-observer';
+import { findUpUntil } from '../../utils/dom';
+export var useVisualContext = function (elementRef) {
+    var contextMatch = /awsui-context-([\w-]+)/;
+    var _a = useState(''), value = _a[0], setValue = _a[1];
+    useMutationObserver(elementRef, function (node) {
+        var contextParent = findUpUntil(node, function (node) { return !!node.className.match(contextMatch); });
+        setValue(contextParent ? contextParent.className.match(contextMatch)[1] : '');
+    });
+    return value;
+};
+export default function VisualContext(_a) {
+    var contextName = _a.contextName, className = _a.className, children = _a.children;
+    return React.createElement("div", { className: clsx("awsui-context-".concat(contextName), className) }, children);
+}
+//# sourceMappingURL=index.js.map

package/internal/components/visual-context/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/visual-context/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAC,UAAwC;IACvE,IAAM,YAAY,GAAG,wBAAwB,CAAC;IACxC,IAAA,KAAoB,QAAQ,CAAC,EAAE,CAAC,EAA/B,KAAK,QAAA,EAAE,QAAQ,QAAgB,CAAC;IACvC,mBAAmB,CAAC,UAAU,EAAE,UAAA,IAAI;QAClC,IAAM,aAAa,GAAG,WAAW,CAAC,IAAI,EAAE,UAAA,IAAI,IAAI,OAAA,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,YAAY,CAAC,EAApC,CAAoC,CAAC,CAAC;QACtF,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,KAAK,CAAC,YAAY,CAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IACjF,CAAC,CAAC,CAAC;IACH,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAQF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAwD;QAAtD,WAAW,iBAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAA;IACtE,OAAO,6BAAK,SAAS,EAAE,IAAI,CAAC,wBAAiB,WAAW,CAAE,EAAE,SAAS,CAAC,IAAG,QAAQ,CAAO,CAAC;AAC3F,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, { useState } from 'react';\nimport { useMutationObserver } from '../../hooks/use-mutation-observer';\nimport { findUpUntil } from '../../utils/dom';\n\nexport const useVisualContext = (elementRef: React.RefObject<HTMLElement>) => {\n  const contextMatch = /awsui-context-([\\w-]+)/;\n  const [value, setValue] = useState('');\n  useMutationObserver(elementRef, node => {\n    const contextParent = findUpUntil(node, node => !!node.className.match(contextMatch));\n    setValue(contextParent ? contextParent.className.match(contextMatch)![1] : '');\n  });\n  return value;\n};\n\ninterface VisualContextProps {\n  contextName: string;\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport default function VisualContext({ contextName, className, children }: VisualContextProps) {\n  return <div className={clsx(`awsui-context-${contextName}`, className)}>{children}</div>;\n}\n"]}

package/internal/context/app-layout-context.d.ts

@@ -0,0 +1,10 @@
+export interface AppLayoutContextProps {
+    stickyOffsetBottom: number;
+    stickyOffsetTop: number;
+}
+export declare const AppLayoutDomContext: import("../hooks/dom-context").DomContextDeclaration<AppLayoutContextProps>;
+export declare function useAppLayoutContext(): {
+    stickyOffsetBottom: number;
+    stickyOffsetTop: number;
+};
+//# sourceMappingURL=app-layout-context.d.ts.map

package/internal/context/app-layout-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-layout-context.d.ts","sourceRoot":"","sources":["../../../../src/internal/context/app-layout-context.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,qBAAqB;IACpC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,mBAAmB,6EAG9B,CAAC;AAEH,wBAAgB,mBAAmB;;;EAGlC"}

package/internal/context/app-layout-context.js

@@ -0,0 +1,14 @@
+import { __assign } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useContext } from 'react';
+import { createDomContext } from '../hooks/dom-context';
+export var AppLayoutDomContext = createDomContext('app-layout-context', {
+    stickyOffsetTop: 0,
+    stickyOffsetBottom: 0
+});
+export function useAppLayoutContext() {
+    var context = useContext(AppLayoutDomContext.context);
+    return __assign({}, context);
+}
+//# sourceMappingURL=app-layout-context.js.map

package/internal/context/app-layout-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-layout-context.js","sourceRoot":"","sources":["../../../../src/internal/context/app-layout-context.ts"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAOxD,MAAM,CAAC,IAAM,mBAAmB,GAAG,gBAAgB,CAAwB,oBAAoB,EAAE;IAC/F,eAAe,EAAE,CAAC;IAClB,kBAAkB,EAAE,CAAC;CACtB,CAAC,CAAC;AAEH,MAAM,UAAU,mBAAmB;IACjC,IAAM,OAAO,GAAG,UAAU,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACxD,oBAAY,OAAO,EAAG;AACxB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useContext } from 'react';\nimport { createDomContext } from '../hooks/dom-context';\n\nexport interface AppLayoutContextProps {\n  stickyOffsetBottom: number;\n  stickyOffsetTop: number;\n}\n\nexport const AppLayoutDomContext = createDomContext<AppLayoutContextProps>('app-layout-context', {\n  stickyOffsetTop: 0,\n  stickyOffsetBottom: 0,\n});\n\nexport function useAppLayoutContext() {\n  const context = useContext(AppLayoutDomContext.context);\n  return { ...context };\n}\n"]}