@cloudscape-design/components 3.0.840 → 3.0.842

package/top-navigation/use-top-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-top-navigation.js","sourceRoot":"","sources":["../../../src/top-navigation/use-top-navigation.ts"],"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, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\n\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { TopNavigationProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nexport interface UseTopNavigationParams {\n  identity: TopNavigationProps['identity'];\n  search: TopNavigationProps['search'];\n  utilities: NonNullable<TopNavigationProps['utilities']>;\n}\n\nexport interface ResponsiveState {\n  hideUtilityText?: boolean;\n  hideSearch?: boolean;\n  hideUtilities?: number[];\n  hideTitle?: boolean;\n}\n\nexport interface TopNavigationSizeConfiguration {\n  hasSearch: boolean;\n  availableWidth: number;\n  utilitiesLeftPadding: number;\n  fullIdentityWidth: number;\n  titleWidth: number;\n  searchSlotWidth: number;\n  searchUtilityWidth: number;\n  utilityWithLabelWidths: number[];\n  utilityWithoutLabelWidths: number[];\n  menuTriggerUtilityWidth: number;\n}\n\nexport interface UseTopNavigation {\n  mainRef: React.Ref<HTMLDivElement>;\n  virtualRef: React.Ref<HTMLDivElement>;\n\n  responsiveState: ResponsiveState;\n  breakpoint: 'default' | 'xxs' | 's';\n  isSearchExpanded: boolean;\n  onSearchUtilityClick: () => void;\n}\n\n// A small buffer to make calculations more lenient against browser lag or padding adjustments.\nconst RESPONSIVENESS_BUFFER = 20;\n\nexport function useTopNavigation({ identity, search, utilities }: UseTopNavigationParams): UseTopNavigation {\n  // Refs and breakpoints\n  const mainRef = useRef<HTMLElement | null>(null);\n  const virtualRef = useRef<HTMLDivElement | null>(null);\n  const [breakpoint, breakpointRef] = useContainerBreakpoints(['xxs', 's']);\n\n  // Responsiveness state\n  // The component works by calculating the possible resize states that it can\n  // be in, and having a state variable to track which state we're currently in.\n  const hasSearch = !!search;\n  const hasTitleWithLogo = identity && !!identity.logo && !!identity.title;\n  const responsiveStates = useMemo<ReadonlyArray<ResponsiveState>>(() => {\n    return generateResponsiveStateKeys(utilities, hasSearch, hasTitleWithLogo);\n  }, [utilities, hasSearch, hasTitleWithLogo]);\n\n  // To hide/show elements dynamically, we need to know how much space they take up,\n  // even if they're not being rendered. The top navigation elements are hidden/resized\n  // based on the available size or if a search bar is open, and they need to be available\n  // for calculations so we know where to toggle them. So we render a second, more stable\n  // top-nav off screen to do these calculations against.\n  //\n  // We can't \"affix\" these values to pixels because they can depend on spacing tokens.\n  // It's easier to render all of these utilities separately rather than figuring out\n  // spacing token values, icon sizes, text widths, etc.\n  const [responsiveState, setResponsiveState] = useState<ResponsiveState | undefined>();\n  const recalculateFit = useCallback(() => {\n    if (!mainRef?.current || !virtualRef.current) {\n      setResponsiveState(responsiveStates[0]);\n      return;\n    }\n\n    // Get available width from the visible top navigation.\n    const availableWidth = getContentBoxWidth(mainRef.current.querySelector(`.${styles['padding-box']}`)!);\n    if (availableWidth === 0) {\n      // Likely in an SSR or Jest situation.\n      setResponsiveState(responsiveStates[0]);\n      return;\n    }\n\n    const sizeConfiguration = {\n      hasSearch,\n      availableWidth,\n\n      // Get widths from the hidden top navigation\n      fullIdentityWidth: virtualRef.current.querySelector(`.${styles.identity}`)!.getBoundingClientRect().width,\n      titleWidth: virtualRef.current.querySelector(`.${styles.title}`)?.getBoundingClientRect().width ?? 0,\n      searchSlotWidth: virtualRef.current.querySelector(`.${styles.search}`)?.getBoundingClientRect().width ?? 0,\n      searchUtilityWidth: virtualRef.current.querySelector('[data-utility-special=\"search\"]')!.getBoundingClientRect()\n        .width,\n      utilitiesLeftPadding: parseFloat(\n        getComputedStyle(virtualRef.current.querySelector(`.${styles.utilities}`)!).paddingLeft || '0px'\n      ),\n      utilityWithLabelWidths: Array.prototype.slice\n        .call(virtualRef.current.querySelectorAll(`[data-utility-hide=\"false\"]`))\n        .map((element: Element) => element.getBoundingClientRect().width),\n      utilityWithoutLabelWidths: Array.prototype.slice\n        .call(virtualRef.current.querySelectorAll(`[data-utility-hide=\"true\"]`))\n        .map((element: Element) => element.getBoundingClientRect().width),\n      menuTriggerUtilityWidth: virtualRef.current\n        .querySelector('[data-utility-special=\"menu-trigger\"]')!\n        .getBoundingClientRect().width,\n    };\n    setResponsiveState(determineBestResponsiveState(responsiveStates, sizeConfiguration));\n  }, [responsiveStates, hasSearch]);\n\n  const [, containerQueryRef] = useContainerQuery(() => {\n    recalculateFit();\n  }, [recalculateFit]);\n\n  // Due to being rendered in a portal, the virtual navigation isn't rendered\n  // at the same time as the main one.\n  const onVirtualMount = useCallback(\n    (element: HTMLDivElement | null) => {\n      virtualRef.current = element;\n      recalculateFit();\n    },\n    [recalculateFit]\n  );\n\n  // Search slot expansion on small screens\n  const [isSearchMinimized, setSearchMinimized] = useState(true);\n  const isSearchExpanded = !isSearchMinimized && hasSearch && responsiveState?.hideSearch;\n\n  // If the search was expanded, and then the screen resized so that the\n  // expansion is no longer necessary. So we implicitly minimize it.\n  useEffect(() => {\n    if (!responsiveState?.hideSearch) {\n      setSearchMinimized(true);\n    }\n  }, [responsiveState]);\n\n  // If the search is expanded after clicking on the search utility, move\n  // the focus to the input. Since this is a user-controlled slot, we're just\n  // assuming that it contains an input, though it's a pretty safe guess.\n  useEffect(() => {\n    if (isSearchExpanded) {\n      mainRef?.current?.querySelector<HTMLInputElement>(`.${styles.search} input`)?.focus();\n    }\n  }, [isSearchExpanded, mainRef]);\n\n  const mergedMainRef = useMergeRefs(mainRef, containerQueryRef, breakpointRef);\n\n  return {\n    mainRef: mergedMainRef,\n    virtualRef: onVirtualMount,\n    responsiveState: responsiveState ?? responsiveStates[0],\n    breakpoint: breakpoint ?? 'default',\n    isSearchExpanded: !!isSearchExpanded,\n    onSearchUtilityClick: () => setSearchMinimized(isSearchMinimized => !isSearchMinimized),\n  };\n}\n\n/**\n * Get the width of the content box (assuming the element's box-sizing is border-box).\n */\nfunction getContentBoxWidth(element: Element): number {\n  const style = getComputedStyle(element);\n  return (\n    parseFloat(style.width || '0px') - parseFloat(style.paddingLeft || '0px') - parseFloat(style.paddingRight || '0px')\n  );\n}\n\n/**\n * Generates the series of responsive steps that can be performed on the header in order.\n */\nexport function generateResponsiveStateKeys(\n  utilities: ReadonlyArray<TopNavigationProps.Utility>,\n  canHideSearch: boolean,\n  canHideTitle: boolean\n): ReadonlyArray<ResponsiveState> {\n  const states: ResponsiveState[] = [{}];\n  if (utilities.some(utility => utility.text)) {\n    states.push({ hideUtilityText: true });\n  }\n  if (canHideSearch) {\n    states.push({\n      hideUtilityText: true,\n      hideSearch: true,\n    });\n  }\n  const hiddenUtilties = [];\n  for (let i = 0; i < utilities.length; i++) {\n    if (!utilities[i].disableUtilityCollapse) {\n      hiddenUtilties.push(i);\n      states.push({\n        hideUtilityText: true,\n        hideSearch: canHideSearch || undefined,\n        hideUtilities: hiddenUtilties.length > 0 ? hiddenUtilties.slice() : undefined,\n      });\n    }\n  }\n  if (canHideTitle) {\n    states.push({\n      hideUtilityText: true,\n      hideSearch: canHideSearch || undefined,\n      hideUtilities: hiddenUtilties.length > 0 ? hiddenUtilties.slice() : undefined,\n      hideTitle: true,\n    });\n  }\n  return states;\n}\n\n/**\n * Determines the best responsive state configuration of the top navigation, based on the given list of possible responsive states\n * and the current sizes of all elements inside the navigation bar.\n */\nexport function determineBestResponsiveState(\n  possibleStates: ReadonlyArray<ResponsiveState>,\n  sizes: TopNavigationSizeConfiguration\n): ResponsiveState {\n  const {\n    hasSearch,\n    availableWidth,\n    utilitiesLeftPadding,\n    fullIdentityWidth,\n    titleWidth,\n    searchSlotWidth,\n    searchUtilityWidth,\n    utilityWithLabelWidths,\n    utilityWithoutLabelWidths,\n    menuTriggerUtilityWidth,\n  } = sizes;\n  // Iterate through each state and calculate its expected required width.\n  for (const state of possibleStates) {\n    const searchWidth = hasSearch ? (state.hideSearch ? searchUtilityWidth : searchSlotWidth) : 0;\n    const utilitiesWidth: number = (state.hideUtilityText ? utilityWithoutLabelWidths : utilityWithLabelWidths)\n      .filter((_width, i) => !state.hideUtilities || state.hideUtilities.indexOf(i) === -1)\n      .reduce((sum, width) => sum + width, 0);\n    const menuTriggerWidth = state.hideUtilities ? menuTriggerUtilityWidth : 0;\n    const identityWidth = state.hideTitle ? fullIdentityWidth - titleWidth : fullIdentityWidth;\n    const expectedInnerWidth = identityWidth + searchWidth + utilitiesLeftPadding + utilitiesWidth + menuTriggerWidth;\n    if (expectedInnerWidth <= availableWidth - RESPONSIVENESS_BUFFER) {\n      return state;\n    }\n  }\n\n  // If nothing matches, pick the smallest possible state.\n  return possibleStates[possibleStates.length - 1];\n}\n"]}
+{"version":3,"file":"use-top-navigation.js","sourceRoot":"","sources":["../../../src/top-navigation/use-top-navigation.ts"],"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, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\n\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { TopNavigationProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ninterface UseTopNavigationParams {\n  identity: TopNavigationProps['identity'];\n  search: TopNavigationProps['search'];\n  utilities: NonNullable<TopNavigationProps['utilities']>;\n}\n\ninterface ResponsiveState {\n  hideUtilityText?: boolean;\n  hideSearch?: boolean;\n  hideUtilities?: number[];\n  hideTitle?: boolean;\n}\n\nexport interface TopNavigationSizeConfiguration {\n  hasSearch: boolean;\n  availableWidth: number;\n  utilitiesLeftPadding: number;\n  fullIdentityWidth: number;\n  titleWidth: number;\n  searchSlotWidth: number;\n  searchUtilityWidth: number;\n  utilityWithLabelWidths: number[];\n  utilityWithoutLabelWidths: number[];\n  menuTriggerUtilityWidth: number;\n}\n\ninterface UseTopNavigation {\n  mainRef: React.Ref<HTMLDivElement>;\n  virtualRef: React.Ref<HTMLDivElement>;\n\n  responsiveState: ResponsiveState;\n  breakpoint: 'default' | 'xxs' | 's';\n  isSearchExpanded: boolean;\n  onSearchUtilityClick: () => void;\n}\n\n// A small buffer to make calculations more lenient against browser lag or padding adjustments.\nconst RESPONSIVENESS_BUFFER = 20;\n\nexport function useTopNavigation({ identity, search, utilities }: UseTopNavigationParams): UseTopNavigation {\n  // Refs and breakpoints\n  const mainRef = useRef<HTMLElement | null>(null);\n  const virtualRef = useRef<HTMLDivElement | null>(null);\n  const [breakpoint, breakpointRef] = useContainerBreakpoints(['xxs', 's']);\n\n  // Responsiveness state\n  // The component works by calculating the possible resize states that it can\n  // be in, and having a state variable to track which state we're currently in.\n  const hasSearch = !!search;\n  const hasTitleWithLogo = identity && !!identity.logo && !!identity.title;\n  const responsiveStates = useMemo<ReadonlyArray<ResponsiveState>>(() => {\n    return generateResponsiveStateKeys(utilities, hasSearch, hasTitleWithLogo);\n  }, [utilities, hasSearch, hasTitleWithLogo]);\n\n  // To hide/show elements dynamically, we need to know how much space they take up,\n  // even if they're not being rendered. The top navigation elements are hidden/resized\n  // based on the available size or if a search bar is open, and they need to be available\n  // for calculations so we know where to toggle them. So we render a second, more stable\n  // top-nav off screen to do these calculations against.\n  //\n  // We can't \"affix\" these values to pixels because they can depend on spacing tokens.\n  // It's easier to render all of these utilities separately rather than figuring out\n  // spacing token values, icon sizes, text widths, etc.\n  const [responsiveState, setResponsiveState] = useState<ResponsiveState | undefined>();\n  const recalculateFit = useCallback(() => {\n    if (!mainRef?.current || !virtualRef.current) {\n      setResponsiveState(responsiveStates[0]);\n      return;\n    }\n\n    // Get available width from the visible top navigation.\n    const availableWidth = getContentBoxWidth(mainRef.current.querySelector(`.${styles['padding-box']}`)!);\n    if (availableWidth === 0) {\n      // Likely in an SSR or Jest situation.\n      setResponsiveState(responsiveStates[0]);\n      return;\n    }\n\n    const sizeConfiguration = {\n      hasSearch,\n      availableWidth,\n\n      // Get widths from the hidden top navigation\n      fullIdentityWidth: virtualRef.current.querySelector(`.${styles.identity}`)!.getBoundingClientRect().width,\n      titleWidth: virtualRef.current.querySelector(`.${styles.title}`)?.getBoundingClientRect().width ?? 0,\n      searchSlotWidth: virtualRef.current.querySelector(`.${styles.search}`)?.getBoundingClientRect().width ?? 0,\n      searchUtilityWidth: virtualRef.current.querySelector('[data-utility-special=\"search\"]')!.getBoundingClientRect()\n        .width,\n      utilitiesLeftPadding: parseFloat(\n        getComputedStyle(virtualRef.current.querySelector(`.${styles.utilities}`)!).paddingLeft || '0px'\n      ),\n      utilityWithLabelWidths: Array.prototype.slice\n        .call(virtualRef.current.querySelectorAll(`[data-utility-hide=\"false\"]`))\n        .map((element: Element) => element.getBoundingClientRect().width),\n      utilityWithoutLabelWidths: Array.prototype.slice\n        .call(virtualRef.current.querySelectorAll(`[data-utility-hide=\"true\"]`))\n        .map((element: Element) => element.getBoundingClientRect().width),\n      menuTriggerUtilityWidth: virtualRef.current\n        .querySelector('[data-utility-special=\"menu-trigger\"]')!\n        .getBoundingClientRect().width,\n    };\n    setResponsiveState(determineBestResponsiveState(responsiveStates, sizeConfiguration));\n  }, [responsiveStates, hasSearch]);\n\n  const [, containerQueryRef] = useContainerQuery(() => {\n    recalculateFit();\n  }, [recalculateFit]);\n\n  // Due to being rendered in a portal, the virtual navigation isn't rendered\n  // at the same time as the main one.\n  const onVirtualMount = useCallback(\n    (element: HTMLDivElement | null) => {\n      virtualRef.current = element;\n      recalculateFit();\n    },\n    [recalculateFit]\n  );\n\n  // Search slot expansion on small screens\n  const [isSearchMinimized, setSearchMinimized] = useState(true);\n  const isSearchExpanded = !isSearchMinimized && hasSearch && responsiveState?.hideSearch;\n\n  // If the search was expanded, and then the screen resized so that the\n  // expansion is no longer necessary. So we implicitly minimize it.\n  useEffect(() => {\n    if (!responsiveState?.hideSearch) {\n      setSearchMinimized(true);\n    }\n  }, [responsiveState]);\n\n  // If the search is expanded after clicking on the search utility, move\n  // the focus to the input. Since this is a user-controlled slot, we're just\n  // assuming that it contains an input, though it's a pretty safe guess.\n  useEffect(() => {\n    if (isSearchExpanded) {\n      mainRef?.current?.querySelector<HTMLInputElement>(`.${styles.search} input`)?.focus();\n    }\n  }, [isSearchExpanded, mainRef]);\n\n  const mergedMainRef = useMergeRefs(mainRef, containerQueryRef, breakpointRef);\n\n  return {\n    mainRef: mergedMainRef,\n    virtualRef: onVirtualMount,\n    responsiveState: responsiveState ?? responsiveStates[0],\n    breakpoint: breakpoint ?? 'default',\n    isSearchExpanded: !!isSearchExpanded,\n    onSearchUtilityClick: () => setSearchMinimized(isSearchMinimized => !isSearchMinimized),\n  };\n}\n\n/**\n * Get the width of the content box (assuming the element's box-sizing is border-box).\n */\nfunction getContentBoxWidth(element: Element): number {\n  const style = getComputedStyle(element);\n  return (\n    parseFloat(style.width || '0px') - parseFloat(style.paddingLeft || '0px') - parseFloat(style.paddingRight || '0px')\n  );\n}\n\n/**\n * Generates the series of responsive steps that can be performed on the header in order.\n */\nexport function generateResponsiveStateKeys(\n  utilities: ReadonlyArray<TopNavigationProps.Utility>,\n  canHideSearch: boolean,\n  canHideTitle: boolean\n): ReadonlyArray<ResponsiveState> {\n  const states: ResponsiveState[] = [{}];\n  if (utilities.some(utility => utility.text)) {\n    states.push({ hideUtilityText: true });\n  }\n  if (canHideSearch) {\n    states.push({\n      hideUtilityText: true,\n      hideSearch: true,\n    });\n  }\n  const hiddenUtilties = [];\n  for (let i = 0; i < utilities.length; i++) {\n    if (!utilities[i].disableUtilityCollapse) {\n      hiddenUtilties.push(i);\n      states.push({\n        hideUtilityText: true,\n        hideSearch: canHideSearch || undefined,\n        hideUtilities: hiddenUtilties.length > 0 ? hiddenUtilties.slice() : undefined,\n      });\n    }\n  }\n  if (canHideTitle) {\n    states.push({\n      hideUtilityText: true,\n      hideSearch: canHideSearch || undefined,\n      hideUtilities: hiddenUtilties.length > 0 ? hiddenUtilties.slice() : undefined,\n      hideTitle: true,\n    });\n  }\n  return states;\n}\n\n/**\n * Determines the best responsive state configuration of the top navigation, based on the given list of possible responsive states\n * and the current sizes of all elements inside the navigation bar.\n */\nexport function determineBestResponsiveState(\n  possibleStates: ReadonlyArray<ResponsiveState>,\n  sizes: TopNavigationSizeConfiguration\n): ResponsiveState {\n  const {\n    hasSearch,\n    availableWidth,\n    utilitiesLeftPadding,\n    fullIdentityWidth,\n    titleWidth,\n    searchSlotWidth,\n    searchUtilityWidth,\n    utilityWithLabelWidths,\n    utilityWithoutLabelWidths,\n    menuTriggerUtilityWidth,\n  } = sizes;\n  // Iterate through each state and calculate its expected required width.\n  for (const state of possibleStates) {\n    const searchWidth = hasSearch ? (state.hideSearch ? searchUtilityWidth : searchSlotWidth) : 0;\n    const utilitiesWidth: number = (state.hideUtilityText ? utilityWithoutLabelWidths : utilityWithLabelWidths)\n      .filter((_width, i) => !state.hideUtilities || state.hideUtilities.indexOf(i) === -1)\n      .reduce((sum, width) => sum + width, 0);\n    const menuTriggerWidth = state.hideUtilities ? menuTriggerUtilityWidth : 0;\n    const identityWidth = state.hideTitle ? fullIdentityWidth - titleWidth : fullIdentityWidth;\n    const expectedInnerWidth = identityWidth + searchWidth + utilitiesLeftPadding + utilitiesWidth + menuTriggerWidth;\n    if (expectedInnerWidth <= availableWidth - RESPONSIVENESS_BUFFER) {\n      return state;\n    }\n  }\n\n  // If nothing matches, pick the smallest possible state.\n  return possibleStates[possibleStates.length - 1];\n}\n"]}

package/tutorial-panel/components/tutorial-detail-view/styles.css.js

@@ -1,25 +1,25 @@
 
     import './styles.scoped.css';
     export default {
-  "tutorial-list": "awsui_tutorial-list_1u70p_udcdc_177",
-  "tutorial-title": "awsui_tutorial-title_1u70p_udcdc_213",
-  "task": "awsui_task_1u70p_udcdc_220",
-  "task-title": "awsui_task-title_1u70p_udcdc_228",
-  "task-title--status": "awsui_task-title--status_1u70p_udcdc_236",
-  "current-task": "awsui_current-task_1u70p_udcdc_240",
-  "successful-task": "awsui_successful-task_1u70p_udcdc_244",
-  "congratulation-message": "awsui_congratulation-message_1u70p_udcdc_248",
-  "congratulation-message--status": "awsui_congratulation-message--status_1u70p_udcdc_256",
-  "plaintext-congratulation-description": "awsui_plaintext-congratulation-description_1u70p_udcdc_261",
-  "divider": "awsui_divider_1u70p_udcdc_265",
-  "step-list": "awsui_step-list_1u70p_udcdc_269",
-  "step": "awsui_step_1u70p_udcdc_269",
-  "expandable-section-wrapper": "awsui_expandable-section-wrapper_1u70p_udcdc_280",
-  "expandable-section-header": "awsui_expandable-section-header_1u70p_udcdc_284",
-  "step-title": "awsui_step-title_1u70p_udcdc_289",
-  "feedback-link": "awsui_feedback-link_1u70p_udcdc_290",
-  "dismiss-button": "awsui_dismiss-button_1u70p_udcdc_291",
-  "completion-screen-title": "awsui_completion-screen-title_1u70p_udcdc_292",
-  "completion-screen-description": "awsui_completion-screen-description_1u70p_udcdc_293"
+  "tutorial-list": "awsui_tutorial-list_1u70p_1vweo_181",
+  "tutorial-title": "awsui_tutorial-title_1u70p_1vweo_217",
+  "task": "awsui_task_1u70p_1vweo_224",
+  "task-title": "awsui_task-title_1u70p_1vweo_232",
+  "task-title--status": "awsui_task-title--status_1u70p_1vweo_240",
+  "current-task": "awsui_current-task_1u70p_1vweo_244",
+  "successful-task": "awsui_successful-task_1u70p_1vweo_248",
+  "congratulation-message": "awsui_congratulation-message_1u70p_1vweo_252",
+  "congratulation-message--status": "awsui_congratulation-message--status_1u70p_1vweo_260",
+  "plaintext-congratulation-description": "awsui_plaintext-congratulation-description_1u70p_1vweo_265",
+  "divider": "awsui_divider_1u70p_1vweo_269",
+  "step-list": "awsui_step-list_1u70p_1vweo_273",
+  "step": "awsui_step_1u70p_1vweo_273",
+  "expandable-section-wrapper": "awsui_expandable-section-wrapper_1u70p_1vweo_284",
+  "expandable-section-header": "awsui_expandable-section-header_1u70p_1vweo_288",
+  "step-title": "awsui_step-title_1u70p_1vweo_293",
+  "feedback-link": "awsui_feedback-link_1u70p_1vweo_294",
+  "dismiss-button": "awsui_dismiss-button_1u70p_1vweo_295",
+  "completion-screen-title": "awsui_completion-screen-title_1u70p_1vweo_296",
+  "completion-screen-description": "awsui_completion-screen-description_1u70p_1vweo_297"
 };
   

package/tutorial-panel/components/tutorial-detail-view/styles.scoped.css

@@ -134,12 +134,16 @@
  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
 */
-/* 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
@@ -174,7 +178,7 @@
 */
 /* 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 */
-.awsui_tutorial-list_1u70p_udcdc_177:not(#\9) {
+.awsui_tutorial-list_1u70p_1vweo_181:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -211,22 +215,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-inline: 0;
 }
 
-.awsui_tutorial-title_1u70p_udcdc_213:not(#\9) {
+.awsui_tutorial-title_1u70p_1vweo_217:not(#\9) {
   display: flex;
   align-items: flex-start;
   margin-inline-start: calc(-1 * var(--space-xxs-p8yyaw, 4px));
   padding-block-end: var(--space-xxxs-zbmxqb, 2px);
 }
 
-.awsui_task_1u70p_udcdc_220:not(#\9) {
+.awsui_task_1u70p_1vweo_224:not(#\9) {
   list-style: none;
   padding-block-start: 0;
 }
-.awsui_task_1u70p_udcdc_220:not(#\9):not(:first-child) {
+.awsui_task_1u70p_1vweo_224:not(#\9):not(:first-child) {
   margin-block-start: var(--space-xl-lmui9r, 24px);
 }
 
-.awsui_task-title_1u70p_udcdc_228:not(#\9) {
+.awsui_task-title_1u70p_1vweo_232:not(#\9) {
   display: flex;
   align-items: flex-start;
   padding-inline-start: var(--border-divider-section-width-1061zr, 1px);
@@ -234,19 +238,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   line-height: var(--line-height-heading-s-4i6ewn, 20px);
   letter-spacing: var(--letter-spacing-heading-s-jr3mor, -0.005em);
 }
-.awsui_task-title--status_1u70p_udcdc_236:not(#\9) {
+.awsui_task-title--status_1u70p_1vweo_240:not(#\9) {
   line-height: inherit;
 }
 
-.awsui_current-task_1u70p_udcdc_240:not(#\9) {
+.awsui_current-task_1u70p_1vweo_244:not(#\9) {
   font-weight: 700;
 }
 
-.awsui_successful-task_1u70p_udcdc_244:not(#\9) {
+.awsui_successful-task_1u70p_1vweo_248:not(#\9) {
   color: var(--color-text-status-success-gqp5xk, #00802f);
 }
 
-.awsui_congratulation-message_1u70p_udcdc_248:not(#\9) {
+.awsui_congratulation-message_1u70p_1vweo_252:not(#\9) {
   display: flex;
   font-size: var(--font-size-heading-s-yykzif, 16px);
   line-height: var(--line-height-heading-s-4i6ewn, 20px);
@@ -254,43 +258,43 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   font-weight: var(--font-weight-heading-xs-l7rqme, 700);
   color: var(--color-text-status-success-gqp5xk, #00802f);
 }
-.awsui_congratulation-message--status_1u70p_udcdc_256:not(#\9) {
+.awsui_congratulation-message--status_1u70p_1vweo_260:not(#\9) {
   line-height: inherit;
   flex-shrink: 0;
 }
 
-.awsui_plaintext-congratulation-description_1u70p_udcdc_261:not(#\9) {
+.awsui_plaintext-congratulation-description_1u70p_1vweo_265:not(#\9) {
   white-space: pre-line;
 }
 
-.awsui_divider_1u70p_udcdc_265:not(#\9) {
+.awsui_divider_1u70p_1vweo_269:not(#\9) {
   border-block-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-cx07f2, #c6c6cd);
 }
 
-.awsui_step-list_1u70p_udcdc_269:not(#\9) {
+.awsui_step-list_1u70p_1vweo_273:not(#\9) {
   list-style: none;
   padding-block: 0;
   padding-inline-start: var(--space-xxxs-zbmxqb, 2px);
   padding-inline-end: 0;
 }
 
-.awsui_step_1u70p_udcdc_269:not(#\9):not(:first-child) {
+.awsui_step_1u70p_1vweo_273:not(#\9):not(:first-child) {
   padding-block-start: var(--space-xxs-p8yyaw, 4px);
 }
 
-.awsui_expandable-section-wrapper_1u70p_udcdc_280:not(#\9) {
+.awsui_expandable-section-wrapper_1u70p_1vweo_284:not(#\9) {
   inline-size: 100%;
 }
 
-.awsui_expandable-section-header_1u70p_udcdc_284:not(#\9) {
+.awsui_expandable-section-header_1u70p_1vweo_288:not(#\9) {
   font-size: var(--font-size-body-m-x4okxb, 14px);
   line-height: var(--line-height-body-m-30ar75, 20px);
 }
 
-.awsui_step-title_1u70p_udcdc_289:not(#\9),
-.awsui_feedback-link_1u70p_udcdc_290:not(#\9),
-.awsui_dismiss-button_1u70p_udcdc_291:not(#\9),
-.awsui_completion-screen-title_1u70p_udcdc_292:not(#\9),
-.awsui_completion-screen-description_1u70p_udcdc_293:not(#\9) {
+.awsui_step-title_1u70p_1vweo_293:not(#\9),
+.awsui_feedback-link_1u70p_1vweo_294:not(#\9),
+.awsui_dismiss-button_1u70p_1vweo_295:not(#\9),
+.awsui_completion-screen-title_1u70p_1vweo_296:not(#\9),
+.awsui_completion-screen-description_1u70p_1vweo_297:not(#\9) {
   /* used in test-utils */
 }

package/tutorial-panel/components/tutorial-detail-view/styles.selectors.js

@@ -2,25 +2,25 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "tutorial-list": "awsui_tutorial-list_1u70p_udcdc_177",
-  "tutorial-title": "awsui_tutorial-title_1u70p_udcdc_213",
-  "task": "awsui_task_1u70p_udcdc_220",
-  "task-title": "awsui_task-title_1u70p_udcdc_228",
-  "task-title--status": "awsui_task-title--status_1u70p_udcdc_236",
-  "current-task": "awsui_current-task_1u70p_udcdc_240",
-  "successful-task": "awsui_successful-task_1u70p_udcdc_244",
-  "congratulation-message": "awsui_congratulation-message_1u70p_udcdc_248",
-  "congratulation-message--status": "awsui_congratulation-message--status_1u70p_udcdc_256",
-  "plaintext-congratulation-description": "awsui_plaintext-congratulation-description_1u70p_udcdc_261",
-  "divider": "awsui_divider_1u70p_udcdc_265",
-  "step-list": "awsui_step-list_1u70p_udcdc_269",
-  "step": "awsui_step_1u70p_udcdc_269",
-  "expandable-section-wrapper": "awsui_expandable-section-wrapper_1u70p_udcdc_280",
-  "expandable-section-header": "awsui_expandable-section-header_1u70p_udcdc_284",
-  "step-title": "awsui_step-title_1u70p_udcdc_289",
-  "feedback-link": "awsui_feedback-link_1u70p_udcdc_290",
-  "dismiss-button": "awsui_dismiss-button_1u70p_udcdc_291",
-  "completion-screen-title": "awsui_completion-screen-title_1u70p_udcdc_292",
-  "completion-screen-description": "awsui_completion-screen-description_1u70p_udcdc_293"
+  "tutorial-list": "awsui_tutorial-list_1u70p_1vweo_181",
+  "tutorial-title": "awsui_tutorial-title_1u70p_1vweo_217",
+  "task": "awsui_task_1u70p_1vweo_224",
+  "task-title": "awsui_task-title_1u70p_1vweo_232",
+  "task-title--status": "awsui_task-title--status_1u70p_1vweo_240",
+  "current-task": "awsui_current-task_1u70p_1vweo_244",
+  "successful-task": "awsui_successful-task_1u70p_1vweo_248",
+  "congratulation-message": "awsui_congratulation-message_1u70p_1vweo_252",
+  "congratulation-message--status": "awsui_congratulation-message--status_1u70p_1vweo_260",
+  "plaintext-congratulation-description": "awsui_plaintext-congratulation-description_1u70p_1vweo_265",
+  "divider": "awsui_divider_1u70p_1vweo_269",
+  "step-list": "awsui_step-list_1u70p_1vweo_273",
+  "step": "awsui_step_1u70p_1vweo_273",
+  "expandable-section-wrapper": "awsui_expandable-section-wrapper_1u70p_1vweo_284",
+  "expandable-section-header": "awsui_expandable-section-header_1u70p_1vweo_288",
+  "step-title": "awsui_step-title_1u70p_1vweo_293",
+  "feedback-link": "awsui_feedback-link_1u70p_1vweo_294",
+  "dismiss-button": "awsui_dismiss-button_1u70p_1vweo_295",
+  "completion-screen-title": "awsui_completion-screen-title_1u70p_1vweo_296",
+  "completion-screen-description": "awsui_completion-screen-description_1u70p_1vweo_297"
 };
   

package/tutorial-panel/components/tutorial-detail-view/task-list.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import { HotspotContext } from '../../../annotation-context/context';
 import { TutorialPanelProps } from '../../interfaces';
-export interface TaskListProps {
+interface TaskListProps {
     tasks: ReadonlyArray<TutorialPanelProps.Task>;
     onExitTutorial: () => void;
     currentGlobalStepIndex: HotspotContext['currentStepIndex'];
     i18nStrings: TutorialPanelProps['i18nStrings'];
 }
 export declare function TaskList({ tasks, onExitTutorial, currentGlobalStepIndex, i18nStrings }: TaskListProps): JSX.Element;
+export {};
 //# sourceMappingURL=task-list.d.ts.map

package/tutorial-panel/components/tutorial-detail-view/task-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"task-list.d.ts","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-detail-view/task-list.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAKrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAKtD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,aAAa,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC9C,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,sBAAsB,EAAE,cAAc,CAAC,kBAAkB,CAAC,CAAC;IAC3D,WAAW,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;CAChD;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,sBAAsB,EAAE,WAAW,EAAE,EAAE,aAAa,eAmCrG"}
+{"version":3,"file":"task-list.d.ts","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-detail-view/task-list.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAKrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAKtD,UAAU,aAAa;IACrB,KAAK,EAAE,aAAa,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC9C,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,sBAAsB,EAAE,cAAc,CAAC,kBAAkB,CAAC,CAAC;IAC3D,WAAW,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;CAChD;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,sBAAsB,EAAE,WAAW,EAAE,EAAE,aAAa,eAmCrG"}

package/tutorial-panel/components/tutorial-detail-view/task-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"task-list.js","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-detail-view/task-list.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAChE,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,oBAAoB,MAAM,iCAAiC,CAAC;AAEnE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AASrC,MAAM,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,sBAAsB,EAAE,WAAW,EAAiB;IACpG,MAAM,gBAAgB,GAAG,WAAW,CAAC,KAAK,EAAE,sBAAsB,aAAtB,sBAAsB,cAAtB,sBAAsB,GAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IACnF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,gBAAgB,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAEjF,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,SAAiB,EAAE,EAAE;QACvD,gBAAgB,CAAC,SAAS,CAAC,EAAE,CAAC,iCAAM,SAAS,KAAE,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,IAAG,CAAC,CAAC;IACxF,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,yFAAyF;IACzF,SAAS,CAAC,GAAG,EAAE;QACb,gBAAgB,CAAC,EAAE,CAAC,gBAAgB,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IACjD,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,OAAO,CACL,oBAAC,oBAAoB,IAAC,IAAI,EAAC,KAAK;QAC9B,4BAAI,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,IACnC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;;YAAC,OAAA,CAC1B,oBAAC,IAAI,IACH,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,KAAK,EACV,SAAS,EAAE,KAAK,EAChB,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EAAE,MAAA,aAAa,CAAC,KAAK,CAAC,mCAAI,KAAK,EACvC,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,GACxB,CACH,CAAA;SAAA,CAAC,CACC;QACL,oBAAC,WAAW,IAAC,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE;YAClC,oBAAC,cAAc,IAAC,OAAO,EAAE,cAAc,EAAE,UAAU,EAAC,MAAM,EAAC,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,IAC3F,WAAW,CAAC,yBAAyB,CACvB,CACL,CACO,CACxB,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useState } from 'react';\n\nimport { HotspotContext } from '../../../annotation-context/context';\nimport { getStepInfo } from '../../../annotation-context/utils';\nimport InternalBox from '../../../box/internal';\nimport { InternalButton } from '../../../button/internal';\nimport InternalSpaceBetween from '../../../space-between/internal';\nimport { TutorialPanelProps } from '../../interfaces';\nimport { Task } from './task';\n\nimport styles from './styles.css.js';\n\nexport interface TaskListProps {\n  tasks: ReadonlyArray<TutorialPanelProps.Task>;\n  onExitTutorial: () => void;\n  currentGlobalStepIndex: HotspotContext['currentStepIndex'];\n  i18nStrings: TutorialPanelProps['i18nStrings'];\n}\n\nexport function TaskList({ tasks, onExitTutorial, currentGlobalStepIndex, i18nStrings }: TaskListProps) {\n  const currentTaskIndex = getStepInfo(tasks, currentGlobalStepIndex ?? 0).taskIndex;\n  const [expandedTasks, setExpandedTasks] = useState({ [currentTaskIndex]: true });\n\n  const onToggleExpand = useCallback((stepIndex: number) => {\n    setExpandedTasks(prevTasks => ({ ...prevTasks, [stepIndex]: !prevTasks[stepIndex] }));\n  }, []);\n\n  // When the user progresses to a different task, all tasks except this one are collapsed.\n  useEffect(() => {\n    setExpandedTasks({ [currentTaskIndex]: true });\n  }, [currentTaskIndex]);\n\n  return (\n    <InternalSpaceBetween size=\"xxl\">\n      <ol className={styles['tutorial-list']}>\n        {tasks.map((task, index) => (\n          <Task\n            task={task}\n            key={index}\n            taskIndex={index}\n            currentTaskIndex={currentTaskIndex}\n            expanded={expandedTasks[index] ?? false}\n            onToggleExpand={onToggleExpand}\n            i18nStrings={i18nStrings}\n          />\n        ))}\n      </ol>\n      <InternalBox margin={{ top: 'xxxs' }}>\n        <InternalButton onClick={onExitTutorial} formAction=\"none\" className={styles['dismiss-button']}>\n          {i18nStrings.dismissTutorialButtonText}\n        </InternalButton>\n      </InternalBox>\n    </InternalSpaceBetween>\n  );\n}\n"]}
+{"version":3,"file":"task-list.js","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-detail-view/task-list.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAChE,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,oBAAoB,MAAM,iCAAiC,CAAC;AAEnE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AASrC,MAAM,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,sBAAsB,EAAE,WAAW,EAAiB;IACpG,MAAM,gBAAgB,GAAG,WAAW,CAAC,KAAK,EAAE,sBAAsB,aAAtB,sBAAsB,cAAtB,sBAAsB,GAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IACnF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,gBAAgB,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAEjF,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,SAAiB,EAAE,EAAE;QACvD,gBAAgB,CAAC,SAAS,CAAC,EAAE,CAAC,iCAAM,SAAS,KAAE,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,IAAG,CAAC,CAAC;IACxF,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,yFAAyF;IACzF,SAAS,CAAC,GAAG,EAAE;QACb,gBAAgB,CAAC,EAAE,CAAC,gBAAgB,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IACjD,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,OAAO,CACL,oBAAC,oBAAoB,IAAC,IAAI,EAAC,KAAK;QAC9B,4BAAI,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,IACnC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;;YAAC,OAAA,CAC1B,oBAAC,IAAI,IACH,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,KAAK,EACV,SAAS,EAAE,KAAK,EAChB,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EAAE,MAAA,aAAa,CAAC,KAAK,CAAC,mCAAI,KAAK,EACvC,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,GACxB,CACH,CAAA;SAAA,CAAC,CACC;QACL,oBAAC,WAAW,IAAC,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE;YAClC,oBAAC,cAAc,IAAC,OAAO,EAAE,cAAc,EAAE,UAAU,EAAC,MAAM,EAAC,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,IAC3F,WAAW,CAAC,yBAAyB,CACvB,CACL,CACO,CACxB,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useState } from 'react';\n\nimport { HotspotContext } from '../../../annotation-context/context';\nimport { getStepInfo } from '../../../annotation-context/utils';\nimport InternalBox from '../../../box/internal';\nimport { InternalButton } from '../../../button/internal';\nimport InternalSpaceBetween from '../../../space-between/internal';\nimport { TutorialPanelProps } from '../../interfaces';\nimport { Task } from './task';\n\nimport styles from './styles.css.js';\n\ninterface TaskListProps {\n  tasks: ReadonlyArray<TutorialPanelProps.Task>;\n  onExitTutorial: () => void;\n  currentGlobalStepIndex: HotspotContext['currentStepIndex'];\n  i18nStrings: TutorialPanelProps['i18nStrings'];\n}\n\nexport function TaskList({ tasks, onExitTutorial, currentGlobalStepIndex, i18nStrings }: TaskListProps) {\n  const currentTaskIndex = getStepInfo(tasks, currentGlobalStepIndex ?? 0).taskIndex;\n  const [expandedTasks, setExpandedTasks] = useState({ [currentTaskIndex]: true });\n\n  const onToggleExpand = useCallback((stepIndex: number) => {\n    setExpandedTasks(prevTasks => ({ ...prevTasks, [stepIndex]: !prevTasks[stepIndex] }));\n  }, []);\n\n  // When the user progresses to a different task, all tasks except this one are collapsed.\n  useEffect(() => {\n    setExpandedTasks({ [currentTaskIndex]: true });\n  }, [currentTaskIndex]);\n\n  return (\n    <InternalSpaceBetween size=\"xxl\">\n      <ol className={styles['tutorial-list']}>\n        {tasks.map((task, index) => (\n          <Task\n            task={task}\n            key={index}\n            taskIndex={index}\n            currentTaskIndex={currentTaskIndex}\n            expanded={expandedTasks[index] ?? false}\n            onToggleExpand={onToggleExpand}\n            i18nStrings={i18nStrings}\n          />\n        ))}\n      </ol>\n      <InternalBox margin={{ top: 'xxxs' }}>\n        <InternalButton onClick={onExitTutorial} formAction=\"none\" className={styles['dismiss-button']}>\n          {i18nStrings.dismissTutorialButtonText}\n        </InternalButton>\n      </InternalBox>\n    </InternalSpaceBetween>\n  );\n}\n"]}

package/tutorial-panel/components/tutorial-list/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { HotspotContext } from '../../../annotation-context/context.js';
 import { TutorialPanelProps } from '../../interfaces';
-export interface TutorialListProps {
+interface TutorialListProps {
     loading?: boolean;
     tutorials: TutorialPanelProps['tutorials'];
     onStartTutorial: HotspotContext['onStartTutorial'];
@@ -9,4 +9,5 @@ export interface TutorialListProps {
     downloadUrl: TutorialPanelProps['downloadUrl'];
 }
 export default function TutorialList({ i18nStrings, tutorials, loading, onStartTutorial, downloadUrl, }: TutorialListProps): JSX.Element;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/tutorial-panel/components/tutorial-list/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-list/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAYxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAItD,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC3C,eAAe,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAC;IACnD,WAAW,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;IAC/C,WAAW,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;CAChD;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,WAAW,EACX,SAAS,EACT,OAAe,EACf,eAAe,EACf,WAAW,GACZ,EAAE,iBAAiB,eA8CnB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-list/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAYxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAItD,UAAU,iBAAiB;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC3C,eAAe,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAC;IACnD,WAAW,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;IAC/C,WAAW,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;CAChD;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,WAAW,EACX,SAAS,EACT,OAAe,EACf,eAAe,EACf,WAAW,GACZ,EAAE,iBAAiB,eA8CnB"}

package/tutorial-panel/components/tutorial-list/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-list/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, { useCallback, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport InternalAlert from '../../../alert/internal';\nimport { HotspotContext } from '../../../annotation-context/context.js';\nimport InternalBox from '../../../box/internal';\nimport { InternalButton } from '../../../button/internal';\nimport InternalIcon from '../../../icon/internal';\nimport { fireNonCancelableEvent } from '../../../internal/events/index.js';\nimport { useUniqueId } from '../../../internal/hooks/use-unique-id/index.js';\nimport { useVisualRefresh } from '../../../internal/hooks/use-visual-mode';\nimport { checkSafeUrl } from '../../../internal/utils/check-safe-url';\nimport InternalLink from '../../../link/internal';\nimport InternalLiveRegion from '../../../live-region/internal';\nimport InternalSpaceBetween from '../../../space-between/internal';\nimport InternalStatusIndicator from '../../../status-indicator/internal';\nimport { TutorialPanelProps } from '../../interfaces';\n\nimport styles from './styles.css.js';\n\nexport interface TutorialListProps {\n  loading?: boolean;\n  tutorials: TutorialPanelProps['tutorials'];\n  onStartTutorial: HotspotContext['onStartTutorial'];\n  i18nStrings: TutorialPanelProps['i18nStrings'];\n  downloadUrl: TutorialPanelProps['downloadUrl'];\n}\n\nexport default function TutorialList({\n  i18nStrings,\n  tutorials,\n  loading = false,\n  onStartTutorial,\n  downloadUrl,\n}: TutorialListProps) {\n  checkSafeUrl('TutorialPanel', downloadUrl);\n\n  const isRefresh = useVisualRefresh();\n\n  return (\n    <>\n      <InternalSpaceBetween size=\"s\">\n        <InternalSpaceBetween size=\"m\">\n          <InternalBox variant=\"h2\" fontSize={isRefresh ? 'heading-m' : 'heading-l'} padding={{ bottom: 'n' }}>\n            {i18nStrings.tutorialListTitle}\n          </InternalBox>\n          <InternalBox variant=\"p\" color=\"text-body-secondary\" padding=\"n\">\n            {i18nStrings.tutorialListDescription}\n          </InternalBox>\n        </InternalSpaceBetween>\n        <InternalSpaceBetween size=\"l\">\n          {downloadUrl && (\n            <a\n              href={downloadUrl}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className={styles['download-link']}\n              aria-label={i18nStrings.labelTutorialListDownloadLink}\n            >\n              <InternalIcon name=\"download\" />\n              <InternalBox padding={{ left: 'xs' }} color=\"inherit\" fontWeight=\"bold\" display=\"inline\">\n                {i18nStrings.tutorialListDownloadLinkText}\n              </InternalBox>\n            </a>\n          )}\n          {loading ? (\n            <InternalStatusIndicator type=\"loading\">\n              <InternalLiveRegion tagName=\"span\">{i18nStrings.loadingText}</InternalLiveRegion>\n            </InternalStatusIndicator>\n          ) : (\n            <ul className={styles['tutorial-list']} role=\"list\">\n              {tutorials.map((tutorial, index) => (\n                <Tutorial tutorial={tutorial} key={index} onStartTutorial={onStartTutorial} i18nStrings={i18nStrings} />\n              ))}\n            </ul>\n          )}\n        </InternalSpaceBetween>\n      </InternalSpaceBetween>\n    </>\n  );\n}\n\nfunction Tutorial({\n  tutorial,\n  onStartTutorial: onStartTutorialEventHandler,\n  i18nStrings,\n}: {\n  tutorial: TutorialPanelProps.Tutorial;\n  onStartTutorial: HotspotContext['onStartTutorial'];\n  i18nStrings: TutorialPanelProps['i18nStrings'];\n}) {\n  checkSafeUrl('TutorialPanel', tutorial.learnMoreUrl);\n  const controlId = useUniqueId();\n  const triggerControldId = useUniqueId();\n  const headerId = useUniqueId();\n\n  const isRefresh = useVisualRefresh();\n\n  const onStartTutorial = useCallback(() => {\n    fireNonCancelableEvent(onStartTutorialEventHandler, { tutorial });\n  }, [onStartTutorialEventHandler, tutorial]);\n\n  const [expanded, setExpanded] = useState(!tutorial.prerequisitesNeeded && !tutorial.completed);\n\n  const onClick = useCallback(() => {\n    setExpanded(expanded => !expanded);\n  }, []);\n\n  return (\n    <li className={styles['tutorial-box']} role=\"listitem\">\n      <InternalSpaceBetween size=\"xs\">\n        <div className={styles['tutorial-box-title']}>\n          <InternalBox\n            variant=\"h3\"\n            fontSize={isRefresh ? 'heading-s' : 'heading-m'}\n            id={headerId}\n            margin={{ right: 'xs' }}\n            padding=\"n\"\n            className={styles.title}\n          >\n            {tutorial.title}\n          </InternalBox>\n          <div className={styles['button-wrapper']}>\n            <InternalButton\n              id={triggerControldId}\n              variant=\"icon\"\n              ariaExpanded={expanded}\n              __nativeAttributes={{\n                'aria-controls': controlId,\n                'aria-labelledby': headerId,\n              }}\n              formAction=\"none\"\n              onClick={onClick}\n              className={expanded ? styles['collapse-button'] : styles['expand-button']}\n              iconName={expanded ? 'angle-up' : 'angle-down'}\n            />\n          </div>\n        </div>\n\n        {tutorial.completed ? (\n          <InternalStatusIndicator __size=\"inherit\" type=\"success\" className={styles.completed} wrapText={true}>\n            {i18nStrings.tutorialCompletedText}\n          </InternalStatusIndicator>\n        ) : null}\n      </InternalSpaceBetween>\n\n      <div aria-live=\"polite\">\n        <CSSTransition in={expanded} timeout={30} classNames={{ enter: styles['content-enter'] }}>\n          <div className={clsx(styles['expandable-section'], expanded && styles.expanded)} id={controlId}>\n            <InternalSpaceBetween size=\"l\">\n              <InternalSpaceBetween size=\"m\">\n                {tutorial.prerequisitesNeeded && tutorial.prerequisitesAlert && (\n                  <InternalAlert type=\"info\" className={styles['prerequisites-alert']}>\n                    {tutorial.prerequisitesAlert}\n                  </InternalAlert>\n                )}\n                <InternalSpaceBetween size=\"s\">\n                  <InternalBox color=\"text-body-secondary\">\n                    <div\n                      className={clsx(\n                        styles['tutorial-description'],\n                        typeof tutorial.description === 'string' && styles['tutorial-description-plaintext']\n                      )}\n                    >\n                      {tutorial.description}\n                    </div>\n                  </InternalBox>\n                  {tutorial.learnMoreUrl && (\n                    <InternalLink\n                      href={tutorial.learnMoreUrl}\n                      className={styles['learn-more-link']}\n                      externalIconAriaLabel={i18nStrings.labelLearnMoreExternalIcon}\n                      ariaLabel={i18nStrings.labelLearnMoreLink}\n                      external={true}\n                      variant=\"primary\"\n                    >\n                      {i18nStrings.learnMoreLinkText}\n                    </InternalLink>\n                  )}\n                </InternalSpaceBetween>\n              </InternalSpaceBetween>\n\n              <InternalBox margin={{ bottom: 'xxs' }}>\n                <InternalButton\n                  onClick={onStartTutorial}\n                  disabled={tutorial.prerequisitesNeeded ?? false}\n                  formAction=\"none\"\n                  className={styles.start}\n                >\n                  {tutorial.completed ? i18nStrings.restartTutorialButtonText : i18nStrings.startTutorialButtonText}\n                </InternalButton>\n              </InternalBox>\n            </InternalSpaceBetween>\n          </div>\n        </CSSTransition>\n      </div>\n    </li>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-list/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, { useCallback, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport InternalAlert from '../../../alert/internal';\nimport { HotspotContext } from '../../../annotation-context/context.js';\nimport InternalBox from '../../../box/internal';\nimport { InternalButton } from '../../../button/internal';\nimport InternalIcon from '../../../icon/internal';\nimport { fireNonCancelableEvent } from '../../../internal/events/index.js';\nimport { useUniqueId } from '../../../internal/hooks/use-unique-id/index.js';\nimport { useVisualRefresh } from '../../../internal/hooks/use-visual-mode';\nimport { checkSafeUrl } from '../../../internal/utils/check-safe-url';\nimport InternalLink from '../../../link/internal';\nimport InternalLiveRegion from '../../../live-region/internal';\nimport InternalSpaceBetween from '../../../space-between/internal';\nimport InternalStatusIndicator from '../../../status-indicator/internal';\nimport { TutorialPanelProps } from '../../interfaces';\n\nimport styles from './styles.css.js';\n\ninterface TutorialListProps {\n  loading?: boolean;\n  tutorials: TutorialPanelProps['tutorials'];\n  onStartTutorial: HotspotContext['onStartTutorial'];\n  i18nStrings: TutorialPanelProps['i18nStrings'];\n  downloadUrl: TutorialPanelProps['downloadUrl'];\n}\n\nexport default function TutorialList({\n  i18nStrings,\n  tutorials,\n  loading = false,\n  onStartTutorial,\n  downloadUrl,\n}: TutorialListProps) {\n  checkSafeUrl('TutorialPanel', downloadUrl);\n\n  const isRefresh = useVisualRefresh();\n\n  return (\n    <>\n      <InternalSpaceBetween size=\"s\">\n        <InternalSpaceBetween size=\"m\">\n          <InternalBox variant=\"h2\" fontSize={isRefresh ? 'heading-m' : 'heading-l'} padding={{ bottom: 'n' }}>\n            {i18nStrings.tutorialListTitle}\n          </InternalBox>\n          <InternalBox variant=\"p\" color=\"text-body-secondary\" padding=\"n\">\n            {i18nStrings.tutorialListDescription}\n          </InternalBox>\n        </InternalSpaceBetween>\n        <InternalSpaceBetween size=\"l\">\n          {downloadUrl && (\n            <a\n              href={downloadUrl}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className={styles['download-link']}\n              aria-label={i18nStrings.labelTutorialListDownloadLink}\n            >\n              <InternalIcon name=\"download\" />\n              <InternalBox padding={{ left: 'xs' }} color=\"inherit\" fontWeight=\"bold\" display=\"inline\">\n                {i18nStrings.tutorialListDownloadLinkText}\n              </InternalBox>\n            </a>\n          )}\n          {loading ? (\n            <InternalStatusIndicator type=\"loading\">\n              <InternalLiveRegion tagName=\"span\">{i18nStrings.loadingText}</InternalLiveRegion>\n            </InternalStatusIndicator>\n          ) : (\n            <ul className={styles['tutorial-list']} role=\"list\">\n              {tutorials.map((tutorial, index) => (\n                <Tutorial tutorial={tutorial} key={index} onStartTutorial={onStartTutorial} i18nStrings={i18nStrings} />\n              ))}\n            </ul>\n          )}\n        </InternalSpaceBetween>\n      </InternalSpaceBetween>\n    </>\n  );\n}\n\nfunction Tutorial({\n  tutorial,\n  onStartTutorial: onStartTutorialEventHandler,\n  i18nStrings,\n}: {\n  tutorial: TutorialPanelProps.Tutorial;\n  onStartTutorial: HotspotContext['onStartTutorial'];\n  i18nStrings: TutorialPanelProps['i18nStrings'];\n}) {\n  checkSafeUrl('TutorialPanel', tutorial.learnMoreUrl);\n  const controlId = useUniqueId();\n  const triggerControldId = useUniqueId();\n  const headerId = useUniqueId();\n\n  const isRefresh = useVisualRefresh();\n\n  const onStartTutorial = useCallback(() => {\n    fireNonCancelableEvent(onStartTutorialEventHandler, { tutorial });\n  }, [onStartTutorialEventHandler, tutorial]);\n\n  const [expanded, setExpanded] = useState(!tutorial.prerequisitesNeeded && !tutorial.completed);\n\n  const onClick = useCallback(() => {\n    setExpanded(expanded => !expanded);\n  }, []);\n\n  return (\n    <li className={styles['tutorial-box']} role=\"listitem\">\n      <InternalSpaceBetween size=\"xs\">\n        <div className={styles['tutorial-box-title']}>\n          <InternalBox\n            variant=\"h3\"\n            fontSize={isRefresh ? 'heading-s' : 'heading-m'}\n            id={headerId}\n            margin={{ right: 'xs' }}\n            padding=\"n\"\n            className={styles.title}\n          >\n            {tutorial.title}\n          </InternalBox>\n          <div className={styles['button-wrapper']}>\n            <InternalButton\n              id={triggerControldId}\n              variant=\"icon\"\n              ariaExpanded={expanded}\n              __nativeAttributes={{\n                'aria-controls': controlId,\n                'aria-labelledby': headerId,\n              }}\n              formAction=\"none\"\n              onClick={onClick}\n              className={expanded ? styles['collapse-button'] : styles['expand-button']}\n              iconName={expanded ? 'angle-up' : 'angle-down'}\n            />\n          </div>\n        </div>\n\n        {tutorial.completed ? (\n          <InternalStatusIndicator __size=\"inherit\" type=\"success\" className={styles.completed} wrapText={true}>\n            {i18nStrings.tutorialCompletedText}\n          </InternalStatusIndicator>\n        ) : null}\n      </InternalSpaceBetween>\n\n      <div aria-live=\"polite\">\n        <CSSTransition in={expanded} timeout={30} classNames={{ enter: styles['content-enter'] }}>\n          <div className={clsx(styles['expandable-section'], expanded && styles.expanded)} id={controlId}>\n            <InternalSpaceBetween size=\"l\">\n              <InternalSpaceBetween size=\"m\">\n                {tutorial.prerequisitesNeeded && tutorial.prerequisitesAlert && (\n                  <InternalAlert type=\"info\" className={styles['prerequisites-alert']}>\n                    {tutorial.prerequisitesAlert}\n                  </InternalAlert>\n                )}\n                <InternalSpaceBetween size=\"s\">\n                  <InternalBox color=\"text-body-secondary\">\n                    <div\n                      className={clsx(\n                        styles['tutorial-description'],\n                        typeof tutorial.description === 'string' && styles['tutorial-description-plaintext']\n                      )}\n                    >\n                      {tutorial.description}\n                    </div>\n                  </InternalBox>\n                  {tutorial.learnMoreUrl && (\n                    <InternalLink\n                      href={tutorial.learnMoreUrl}\n                      className={styles['learn-more-link']}\n                      externalIconAriaLabel={i18nStrings.labelLearnMoreExternalIcon}\n                      ariaLabel={i18nStrings.labelLearnMoreLink}\n                      external={true}\n                      variant=\"primary\"\n                    >\n                      {i18nStrings.learnMoreLinkText}\n                    </InternalLink>\n                  )}\n                </InternalSpaceBetween>\n              </InternalSpaceBetween>\n\n              <InternalBox margin={{ bottom: 'xxs' }}>\n                <InternalButton\n                  onClick={onStartTutorial}\n                  disabled={tutorial.prerequisitesNeeded ?? false}\n                  formAction=\"none\"\n                  className={styles.start}\n                >\n                  {tutorial.completed ? i18nStrings.restartTutorialButtonText : i18nStrings.startTutorialButtonText}\n                </InternalButton>\n              </InternalBox>\n            </InternalSpaceBetween>\n          </div>\n        </CSSTransition>\n      </div>\n    </li>\n  );\n}\n"]}

package/tutorial-panel/components/tutorial-list/styles.css.js

@@ -1,23 +1,23 @@
 
     import './styles.scoped.css';
     export default {
-  "content-enter": "awsui_content-enter_ig8mp_17929_189",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_ig8mp_17929_1",
-  "tutorial-list": "awsui_tutorial-list_ig8mp_17929_211",
-  "tutorial-box": "awsui_tutorial-box_ig8mp_17929_247",
-  "tutorial-box-title": "awsui_tutorial-box-title_ig8mp_17929_291",
-  "tutorial-description-plaintext": "awsui_tutorial-description-plaintext_ig8mp_17929_297",
-  "tutorial-description": "awsui_tutorial-description_ig8mp_17929_297",
-  "expandable-section": "awsui_expandable-section_ig8mp_17929_308",
-  "expanded": "awsui_expanded_ig8mp_17929_312",
-  "button-wrapper": "awsui_button-wrapper_ig8mp_17929_316",
-  "start": "awsui_start_ig8mp_17929_321",
-  "expand-button": "awsui_expand-button_ig8mp_17929_325",
-  "collapse-button": "awsui_collapse-button_ig8mp_17929_329",
-  "learn-more-link": "awsui_learn-more-link_ig8mp_17929_333",
-  "title": "awsui_title_ig8mp_17929_337",
-  "prerequisites-alert": "awsui_prerequisites-alert_ig8mp_17929_341",
-  "completed": "awsui_completed_ig8mp_17929_345",
-  "download-link": "awsui_download-link_ig8mp_17929_349"
+  "content-enter": "awsui_content-enter_ig8mp_5zp7k_193",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_ig8mp_5zp7k_1",
+  "tutorial-list": "awsui_tutorial-list_ig8mp_5zp7k_215",
+  "tutorial-box": "awsui_tutorial-box_ig8mp_5zp7k_251",
+  "tutorial-box-title": "awsui_tutorial-box-title_ig8mp_5zp7k_295",
+  "tutorial-description-plaintext": "awsui_tutorial-description-plaintext_ig8mp_5zp7k_301",
+  "tutorial-description": "awsui_tutorial-description_ig8mp_5zp7k_301",
+  "expandable-section": "awsui_expandable-section_ig8mp_5zp7k_312",
+  "expanded": "awsui_expanded_ig8mp_5zp7k_316",
+  "button-wrapper": "awsui_button-wrapper_ig8mp_5zp7k_320",
+  "start": "awsui_start_ig8mp_5zp7k_325",
+  "expand-button": "awsui_expand-button_ig8mp_5zp7k_329",
+  "collapse-button": "awsui_collapse-button_ig8mp_5zp7k_333",
+  "learn-more-link": "awsui_learn-more-link_ig8mp_5zp7k_337",
+  "title": "awsui_title_ig8mp_5zp7k_341",
+  "prerequisites-alert": "awsui_prerequisites-alert_ig8mp_5zp7k_345",
+  "completed": "awsui_completed_ig8mp_5zp7k_349",
+  "download-link": "awsui_download-link_ig8mp_5zp7k_353"
 };