@cloudscape-design/components 3.0.0

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

@@ -0,0 +1,35 @@
+import { __assign } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useCallback, useEffect, useState } from 'react';
+import styles from './styles.css.js';
+import { InternalButton } from '../../../button/internal';
+import InternalBox from '../../../box/internal';
+import InternalSpaceBetween from '../../../space-between/internal';
+import { Task } from './task';
+import { getStepInfo } from '../../../annotation-context/index.js';
+export function TaskList(_a) {
+    var _b;
+    var tasks = _a.tasks, onExitTutorial = _a.onExitTutorial, currentGlobalStepIndex = _a.currentGlobalStepIndex, i18nStrings = _a.i18nStrings;
+    var currentTaskIndex = getStepInfo(tasks, currentGlobalStepIndex !== null && currentGlobalStepIndex !== void 0 ? currentGlobalStepIndex : 0).taskIndex;
+    var _c = useState((_b = {}, _b[currentTaskIndex] = true, _b)), expandedTasks = _c[0], setExpandedTasks = _c[1];
+    var onToggleExpand = useCallback(function (stepIndex) {
+        setExpandedTasks(function (prevTasks) {
+            var _a;
+            return (__assign(__assign({}, prevTasks), (_a = {}, _a[stepIndex] = !prevTasks[stepIndex], _a)));
+        });
+    }, []);
+    // When the user progresses to a different task, all tasks except this one are collapsed.
+    useEffect(function () {
+        var _a;
+        setExpandedTasks((_a = {}, _a[currentTaskIndex] = true, _a));
+    }, [currentTaskIndex]);
+    return (React.createElement(InternalSpaceBetween, { size: "xxl" },
+        React.createElement("ol", { className: styles['tutorial-list'] }, tasks.map(function (task, index) {
+            var _a;
+            return (React.createElement(Task, { task: task, key: index, taskIndex: index, currentTaskIndex: currentTaskIndex, expanded: (_a = expandedTasks[index]) !== null && _a !== void 0 ? _a : false, onToggleExpand: onToggleExpand, i18nStrings: i18nStrings }));
+        })),
+        React.createElement(InternalBox, { margin: { top: 'xxxs' } },
+            React.createElement(InternalButton, { onClick: onExitTutorial, formAction: "none", className: styles['dismiss-button'] }, i18nStrings.dismissTutorialButtonText))));
+}
+//# sourceMappingURL=task-list.js.map

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

@@ -0,0 +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;AAChE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,oBAAoB,MAAM,iCAAiC,CAAC;AAEnE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AASnE,MAAM,UAAU,QAAQ,CAAC,EAA6E;;QAA3E,KAAK,WAAA,EAAE,cAAc,oBAAA,EAAE,sBAAsB,4BAAA,EAAE,WAAW,iBAAA;IACnF,IAAM,gBAAgB,GAAG,WAAW,CAAC,KAAK,EAAE,sBAAsB,aAAtB,sBAAsB,cAAtB,sBAAsB,GAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAC7E,IAAA,KAAoC,QAAQ,WAAG,GAAC,gBAAgB,IAAG,IAAI,MAAG,EAAzE,aAAa,QAAA,EAAE,gBAAgB,QAA0C,CAAC;IAEjF,IAAM,cAAc,GAAG,WAAW,CAAC,UAAC,SAAiB;QACnD,gBAAgB,CAAC,UAAA,SAAS;;YAAI,OAAA,uBAAM,SAAS,gBAAG,SAAS,IAAG,CAAC,SAAS,CAAC,SAAS,CAAC,OAAG;QAAtD,CAAsD,CAAC,CAAC;IACxF,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,yFAAyF;IACzF,SAAS,CAAC;;QACR,gBAAgB,WAAG,GAAC,gBAAgB,IAAG,IAAI,MAAG,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,UAAC,IAAI,EAAE,KAAK;;YAAK,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';\nimport styles from './styles.css.js';\nimport { TutorialPanelProps } from '../../interfaces';\nimport { InternalButton } from '../../../button/internal';\nimport InternalBox from '../../../box/internal';\nimport InternalSpaceBetween from '../../../space-between/internal';\nimport { HotspotContext } from '../../../annotation-context/context';\nimport { Task } from './task';\nimport { getStepInfo } from '../../../annotation-context/index.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"]}

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

@@ -0,0 +1,12 @@
+import { TutorialPanelProps } from '../../interfaces';
+interface TaskProps {
+    task: TutorialPanelProps.Task;
+    taskIndex: number;
+    currentTaskIndex: number;
+    expanded: boolean;
+    onToggleExpand: (step: number) => void;
+    i18nStrings: TutorialPanelProps['i18nStrings'];
+}
+export declare function Task({ task, taskIndex, currentTaskIndex, expanded, onToggleExpand, i18nStrings }: TaskProps): JSX.Element;
+export {};
+//# sourceMappingURL=task.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"task.d.ts","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-detail-view/task.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAgBtD,UAAU,SAAS;IACjB,IAAI,EAAE,kBAAkB,CAAC,IAAI,CAAC;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;CAChD;AAED,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,gBAAgB,EAAE,QAAQ,EAAE,cAAc,EAAE,WAAW,EAAE,EAAE,SAAS,eAyD3G"}

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

@@ -0,0 +1,34 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useCallback } from 'react';
+import styles from './styles.css.js';
+import InternalBox from '../../../box/internal';
+import InternalStatusIndicator from '../../../status-indicator/internal';
+import InternalSpaceBetween from '../../../space-between/internal';
+import InternalExpandableSection from '../../../expandable-section/internal';
+function getStatusIndicatorType(taskIndex, currentTaskIndex) {
+    if (taskIndex < currentTaskIndex) {
+        return 'success';
+    }
+    if (taskIndex === currentTaskIndex) {
+        return 'in-progress';
+    }
+    return 'pending';
+}
+export function Task(_a) {
+    var task = _a.task, taskIndex = _a.taskIndex, currentTaskIndex = _a.currentTaskIndex, expanded = _a.expanded, onToggleExpand = _a.onToggleExpand, i18nStrings = _a.i18nStrings;
+    var statusIndicatorType = getStatusIndicatorType(taskIndex, currentTaskIndex);
+    var onExpandChange = useCallback(function () {
+        onToggleExpand(taskIndex);
+    }, [onToggleExpand, taskIndex]);
+    return (React.createElement("li", { className: styles.task },
+        React.createElement(InternalSpaceBetween, { size: "xxs" },
+            React.createElement("div", { className: styles['task-title'] },
+                React.createElement(InternalStatusIndicator, { __size: "inherit", type: statusIndicatorType, iconAriaLabel: i18nStrings.labelsTaskStatus[statusIndicatorType], className: styles['task-title--status'] }),
+                React.createElement(InternalBox, { variant: "h3", padding: { left: 'xxxs', vertical: 'n' }, fontSize: "heading-s", color: taskIndex < currentTaskIndex ? 'text-status-success' : 'text-status-inactive' }, i18nStrings.taskTitle(taskIndex, task.title))),
+            React.createElement("div", { className: styles['expandable-section-wrapper'] },
+                React.createElement(InternalExpandableSection, { header: React.createElement("span", { className: styles['expandable-section-header'] }, i18nStrings.labelTotalSteps(task.steps.length)), expanded: expanded, onChange: onExpandChange },
+                    React.createElement("ol", { className: styles['step-list'] }, task.steps.map(function (step, stepIndex) { return (React.createElement("li", { key: stepIndex, className: styles.step },
+                        React.createElement(InternalBox, { color: "text-body-secondary", fontSize: "body-m", padding: { left: 'l' }, className: styles['step-title'] }, i18nStrings.stepTitle(stepIndex, step.title)))); })))))));
+}
+//# sourceMappingURL=task.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"task.js","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-detail-view/task.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,uBAAuB,MAAM,oCAAoC,CAAC;AACzE,OAAO,oBAAoB,MAAM,iCAAiC,CAAC;AACnE,OAAO,yBAAyB,MAAM,sCAAsC,CAAC;AAE7E,SAAS,sBAAsB,CAAC,SAAiB,EAAE,gBAAwB;IACzE,IAAI,SAAS,GAAG,gBAAgB,EAAE;QAChC,OAAO,SAAS,CAAC;KAClB;IACD,IAAI,SAAS,KAAK,gBAAgB,EAAE;QAClC,OAAO,aAAa,CAAC;KACtB;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAWD,MAAM,UAAU,IAAI,CAAC,EAAuF;QAArF,IAAI,UAAA,EAAE,SAAS,eAAA,EAAE,gBAAgB,sBAAA,EAAE,QAAQ,cAAA,EAAE,cAAc,oBAAA,EAAE,WAAW,iBAAA;IAC7F,IAAM,mBAAmB,GAAG,sBAAsB,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAC;IAEhF,IAAM,cAAc,GAAG,WAAW,CAAC;QACjC,cAAc,CAAC,SAAS,CAAC,CAAC;IAC5B,CAAC,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC,CAAC;IAEhC,OAAO,CACL,4BAAI,SAAS,EAAE,MAAM,CAAC,IAAI;QACxB,oBAAC,oBAAoB,IAAC,IAAI,EAAC,KAAK;YAC9B,6BAAK,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC;gBAClC,oBAAC,uBAAuB,IACtB,MAAM,EAAC,SAAS,EAChB,IAAI,EAAE,mBAAmB,EACzB,aAAa,EAAE,WAAW,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,EAChE,SAAS,EAAE,MAAM,CAAC,oBAAoB,CAAC,GACvC;gBAEF,oBAAC,WAAW,IACV,OAAO,EAAC,IAAI,EACZ,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,EACxC,QAAQ,EAAC,WAAW,EACpB,KAAK,EAAE,SAAS,GAAG,gBAAgB,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,sBAAsB,IAEnF,WAAW,CAAC,SAAS,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,CACjC,CACV;YAEN,6BAAK,SAAS,EAAE,MAAM,CAAC,4BAA4B,CAAC;gBAClD,oBAAC,yBAAyB,IACxB,MAAM,EACJ,8BAAM,SAAS,EAAE,MAAM,CAAC,2BAA2B,CAAC,IACjD,WAAW,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAC1C,EAET,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,cAAc;oBAExB,4BAAI,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,IAC/B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,SAAS,IAAK,OAAA,CACnC,4BAAI,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI;wBACxC,oBAAC,WAAW,IACV,KAAK,EAAC,qBAAqB,EAC3B,QAAQ,EAAC,QAAQ,EACjB,OAAO,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,EACtB,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,IAE9B,WAAW,CAAC,SAAS,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,CACjC,CACX,CACN,EAXoC,CAWpC,CAAC,CACC,CACqB,CACxB,CACe,CACpB,CACN,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback } from 'react';\nimport styles from './styles.css.js';\nimport { TutorialPanelProps } from '../../interfaces';\nimport InternalBox from '../../../box/internal';\nimport InternalStatusIndicator from '../../../status-indicator/internal';\nimport InternalSpaceBetween from '../../../space-between/internal';\nimport InternalExpandableSection from '../../../expandable-section/internal';\n\nfunction getStatusIndicatorType(taskIndex: number, currentTaskIndex: number) {\n  if (taskIndex < currentTaskIndex) {\n    return 'success';\n  }\n  if (taskIndex === currentTaskIndex) {\n    return 'in-progress';\n  }\n  return 'pending';\n}\n\ninterface TaskProps {\n  task: TutorialPanelProps.Task;\n  taskIndex: number;\n  currentTaskIndex: number;\n  expanded: boolean;\n  onToggleExpand: (step: number) => void;\n  i18nStrings: TutorialPanelProps['i18nStrings'];\n}\n\nexport function Task({ task, taskIndex, currentTaskIndex, expanded, onToggleExpand, i18nStrings }: TaskProps) {\n  const statusIndicatorType = getStatusIndicatorType(taskIndex, currentTaskIndex);\n\n  const onExpandChange = useCallback(() => {\n    onToggleExpand(taskIndex);\n  }, [onToggleExpand, taskIndex]);\n\n  return (\n    <li className={styles.task}>\n      <InternalSpaceBetween size=\"xxs\">\n        <div className={styles['task-title']}>\n          <InternalStatusIndicator\n            __size=\"inherit\"\n            type={statusIndicatorType}\n            iconAriaLabel={i18nStrings.labelsTaskStatus[statusIndicatorType]}\n            className={styles['task-title--status']}\n          />\n\n          <InternalBox\n            variant=\"h3\"\n            padding={{ left: 'xxxs', vertical: 'n' }}\n            fontSize=\"heading-s\"\n            color={taskIndex < currentTaskIndex ? 'text-status-success' : 'text-status-inactive'}\n          >\n            {i18nStrings.taskTitle(taskIndex, task.title)}\n          </InternalBox>\n        </div>\n\n        <div className={styles['expandable-section-wrapper']}>\n          <InternalExpandableSection\n            header={\n              <span className={styles['expandable-section-header']}>\n                {i18nStrings.labelTotalSteps(task.steps.length)}\n              </span>\n            }\n            expanded={expanded}\n            onChange={onExpandChange}\n          >\n            <ol className={styles['step-list']}>\n              {task.steps.map((step, stepIndex) => (\n                <li key={stepIndex} className={styles.step}>\n                  <InternalBox\n                    color=\"text-body-secondary\"\n                    fontSize=\"body-m\"\n                    padding={{ left: 'l' }}\n                    className={styles['step-title']}\n                  >\n                    {i18nStrings.stepTitle(stepIndex, step.title)}\n                  </InternalBox>\n                </li>\n              ))}\n            </ol>\n          </InternalExpandableSection>\n        </div>\n      </InternalSpaceBetween>\n    </li>\n  );\n}\n"]}

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

@@ -0,0 +1,12 @@
+import { TutorialPanelProps } from '../../interfaces';
+import { HotspotContext } from '../../../annotation-context/context.js';
+export interface TutorialListProps {
+    loading?: boolean;
+    tutorials: TutorialPanelProps['tutorials'];
+    onStartTutorial: HotspotContext['onStartTutorial'];
+    filteringFunction: (tutorial: TutorialPanelProps.Tutorial, searchTerm: string) => boolean;
+    i18nStrings: TutorialPanelProps['i18nStrings'];
+    downloadUrl: TutorialPanelProps['downloadUrl'];
+}
+export default function TutorialList({ i18nStrings, tutorials, loading, onStartTutorial, downloadUrl, }: TutorialListProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-list/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAWtD,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAMxE,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,iBAAiB,EAAE,CAAC,QAAQ,EAAE,kBAAkB,CAAC,QAAQ,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC;IAC1F,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,eAsEnB"}

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

@@ -0,0 +1,88 @@
+import { __assign } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useCallback, useState, useRef } from 'react';
+import styles from './styles.css.js';
+import InternalBox from '../../../box/internal';
+import { InternalButton } from '../../../button/internal';
+import InternalStatusIndicator from '../../../status-indicator/internal';
+import InternalSpaceBetween from '../../../space-between/internal';
+import { fireNonCancelableEvent } from '../../../internal/events/index.js';
+import clsx from 'clsx';
+import InternalAlert from '../../../alert/internal';
+import InternalLink from '../../../link/internal';
+import { useUniqueId } from '../../../internal/hooks/use-unique-id/index.js';
+import { CSSTransition } from 'react-transition-group';
+import InternalIcon from '../../../icon/internal';
+import useFocusVisible from '../../../internal/hooks/focus-visible/index.js';
+import { useVisualRefresh } from '../../../internal/hooks/use-visual-mode';
+import { checkSafeUrl } from '../../../internal/utils/check-safe-url';
+export default function TutorialList(_a) {
+    var i18nStrings = _a.i18nStrings, tutorials = _a.tutorials, _b = _a.loading, loading = _b === void 0 ? false : _b, onStartTutorial = _a.onStartTutorial, downloadUrl = _a.downloadUrl;
+    checkSafeUrl('TutorialPanel', downloadUrl);
+    /*
+    // Filtering is not available in the Beta release.
+  
+    const [searchTerm, setSearchTerm] = useState('');
+  
+    const onSearchChangeCallback: InputProps['onChange'] = useCallback(event => setSearchTerm(event.detail.value), [
+      setSearchTerm
+    ]);
+  
+    const filteredTutorials = tutorials.filter(tutorial => filteringFunction(tutorial, searchTerm))
+    */
+    var focusVisible = useFocusVisible();
+    var tutorialListRef = useRef(null);
+    var isRefresh = useVisualRefresh(tutorialListRef);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(InternalSpaceBetween, { size: "s" },
+            React.createElement(InternalSpaceBetween, { size: "m" },
+                React.createElement(InternalBox, { variant: "h2", fontSize: isRefresh ? 'heading-m' : 'heading-l', padding: { bottom: 'n' } }, i18nStrings.tutorialListTitle),
+                React.createElement(InternalBox, { variant: "p", color: "text-body-secondary", padding: "n" }, i18nStrings.tutorialListDescription)),
+            React.createElement(InternalSpaceBetween, { size: "l" },
+                React.createElement("a", __assign({}, focusVisible, { href: downloadUrl, target: "_blank", rel: "noopener noreferrer", className: styles['download-link'] }),
+                    React.createElement(InternalIcon, { name: "download" }),
+                    React.createElement(InternalBox, { padding: { left: 'xs' }, color: "inherit", fontWeight: "bold", display: "inline" }, i18nStrings.tutorialListDownloadLinkText)),
+                loading ? (React.createElement(InternalStatusIndicator, { type: "loading" }, i18nStrings.loadingText)) : (React.createElement(React.Fragment, null,
+                    React.createElement("ul", { className: styles['tutorial-list'], role: "list", ref: tutorialListRef }, tutorials.map(function (tutorial, index) { return (React.createElement(Tutorial, { tutorial: tutorial, key: index, onStartTutorial: onStartTutorial, i18nStrings: i18nStrings })); }))))))));
+}
+function Tutorial(_a) {
+    var _b;
+    var tutorial = _a.tutorial, onStartTutorialEventHandler = _a.onStartTutorial, i18nStrings = _a.i18nStrings;
+    checkSafeUrl('TutorialPanel', tutorial.learnMoreUrl);
+    var controlId = useUniqueId();
+    var triggerControldId = useUniqueId();
+    var headerId = useUniqueId();
+    var tutorialRef = useRef(null);
+    var isRefresh = useVisualRefresh(tutorialRef);
+    var onStartTutorial = useCallback(function () {
+        fireNonCancelableEvent(onStartTutorialEventHandler, { tutorial: tutorial });
+    }, [onStartTutorialEventHandler, tutorial]);
+    var _c = useState(!tutorial.prerequisitesNeeded && !tutorial.completed), expanded = _c[0], setExpanded = _c[1];
+    var onClick = useCallback(function () {
+        setExpanded(function (expanded) { return !expanded; });
+    }, []);
+    return (React.createElement("li", { className: styles['tutorial-box'], role: "listitem", ref: tutorialRef },
+        React.createElement(InternalSpaceBetween, { size: "xs" },
+            React.createElement("div", { className: styles['tutorial-box-title'] },
+                React.createElement(InternalBox, { variant: "h3", fontSize: isRefresh ? 'heading-s' : 'heading-m', id: headerId, margin: { right: 'xs' }, padding: "n", className: styles.title }, tutorial.title),
+                React.createElement("div", { className: styles['button-wrapper'] },
+                    React.createElement(InternalButton, { id: triggerControldId, variant: "icon", ariaExpanded: expanded, __nativeAttributes: {
+                            'aria-controls': controlId,
+                            'aria-labelledby': headerId
+                        }, formAction: "none", onClick: onClick, className: expanded ? styles['collapse-button'] : styles['expand-button'], iconName: expanded ? 'angle-up' : 'angle-down' }))),
+            tutorial.completed ? (React.createElement(InternalStatusIndicator, { __size: "inherit", type: "success", className: styles.completed, wrapText: true }, i18nStrings.tutorialCompletedText)) : null),
+        React.createElement("div", { "aria-live": "polite" },
+            React.createElement(CSSTransition, { "in": expanded, timeout: 30, classNames: { enter: styles['content-enter'] } },
+                React.createElement("div", { className: clsx(styles['expandable-section'], expanded && styles.expanded), id: controlId },
+                    React.createElement(InternalSpaceBetween, { size: "l" },
+                        React.createElement(InternalSpaceBetween, { size: "m" },
+                            tutorial.prerequisitesNeeded && tutorial.prerequisitesAlert && (React.createElement(InternalAlert, { type: "info", className: styles['prerequisites-alert'], visible: true }, tutorial.prerequisitesAlert)),
+                            React.createElement(InternalSpaceBetween, { size: "s" },
+                                React.createElement(InternalBox, { color: "text-body-secondary" },
+                                    React.createElement("div", { className: clsx(styles['tutorial-description'], typeof tutorial.description === 'string' && styles['tutorial-description-plaintext']) }, tutorial.description)),
+                                tutorial.learnMoreUrl && (React.createElement(InternalLink, { href: tutorial.learnMoreUrl, className: styles['learn-more-link'], externalIconAriaLabel: i18nStrings.labelLearnMoreExternalIcon, external: true }, i18nStrings.learnMoreLinkText)))),
+                        React.createElement(InternalBox, { margin: { bottom: 'xxs' } },
+                            React.createElement(InternalButton, { onClick: onStartTutorial, disabled: (_b = tutorial.prerequisitesNeeded) !== null && _b !== void 0 ? _b : false, formAction: "none", className: styles.start }, tutorial.completed ? i18nStrings.restartTutorialButtonText : i18nStrings.startTutorialButtonText))))))));
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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, useRef } from 'react';\nimport styles from './styles.css.js';\nimport { TutorialPanelProps } from '../../interfaces';\nimport InternalBox from '../../../box/internal';\nimport { InternalButton } from '../../../button/internal';\nimport InternalStatusIndicator from '../../../status-indicator/internal';\nimport InternalSpaceBetween from '../../../space-between/internal';\nimport { fireNonCancelableEvent } from '../../../internal/events/index.js';\nimport clsx from 'clsx';\nimport InternalAlert from '../../../alert/internal';\nimport InternalLink from '../../../link/internal';\nimport { useUniqueId } from '../../../internal/hooks/use-unique-id/index.js';\nimport { CSSTransition } from 'react-transition-group';\nimport { HotspotContext } from '../../../annotation-context/context.js';\nimport InternalIcon from '../../../icon/internal';\nimport useFocusVisible from '../../../internal/hooks/focus-visible/index.js';\nimport { useVisualRefresh } from '../../../internal/hooks/use-visual-mode';\nimport { checkSafeUrl } from '../../../internal/utils/check-safe-url';\n\nexport interface TutorialListProps {\n  loading?: boolean;\n  tutorials: TutorialPanelProps['tutorials'];\n  onStartTutorial: HotspotContext['onStartTutorial'];\n  filteringFunction: (tutorial: TutorialPanelProps.Tutorial, searchTerm: string) => boolean;\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  /*\n  // Filtering is not available in the Beta release.\n\n  const [searchTerm, setSearchTerm] = useState('');\n\n  const onSearchChangeCallback: InputProps['onChange'] = useCallback(event => setSearchTerm(event.detail.value), [\n    setSearchTerm\n  ]);\n\n  const filteredTutorials = tutorials.filter(tutorial => filteringFunction(tutorial, searchTerm))\n  */\n\n  const focusVisible = useFocusVisible();\n  const tutorialListRef = useRef(null);\n  const isRefresh = useVisualRefresh(tutorialListRef);\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          <a\n            {...focusVisible}\n            href={downloadUrl}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className={styles['download-link']}\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          {/*\n          <FormField label=\"Filter tutorials\">\n            <Input type=\"search\" value={searchTerm} placeholder=\"Filter tutorials\" onChange={onSearchChangeCallback} />\n          </FormField>\n        */}\n          {loading ? (\n            <InternalStatusIndicator type=\"loading\">{i18nStrings.loadingText}</InternalStatusIndicator>\n          ) : (\n            <>\n              <ul className={styles['tutorial-list']} role=\"list\" ref={tutorialListRef}>\n                {tutorials.map((tutorial, index) => (\n                  <Tutorial\n                    tutorial={tutorial}\n                    key={index}\n                    onStartTutorial={onStartTutorial}\n                    i18nStrings={i18nStrings}\n                  />\n                ))}\n              </ul>\n              {/* {filteredTutorials.length === 0 && searchTerm && <Box>No tutorials match this search filter.</Box>} */}\n            </>\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 tutorialRef = useRef(null);\n  const isRefresh = useVisualRefresh(tutorialRef);\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\" ref={tutorialRef}>\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']} visible={true}>\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                      external={true}\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

@@ -0,0 +1,23 @@
+
+    import './styles.scoped.css';
+    export default {
+  "content-enter": "awsui_content-enter_ig8mp_1eh3a_93",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_ig8mp_1eh3a_1",
+  "tutorial-list": "awsui_tutorial-list_ig8mp_1eh3a_119",
+  "tutorial-box": "awsui_tutorial-box_ig8mp_1eh3a_132",
+  "tutorial-box-title": "awsui_tutorial-box-title_ig8mp_1eh3a_150",
+  "tutorial-description-plaintext": "awsui_tutorial-description-plaintext_ig8mp_1eh3a_156",
+  "tutorial-description": "awsui_tutorial-description_ig8mp_1eh3a_156",
+  "expandable-section": "awsui_expandable-section_ig8mp_1eh3a_168",
+  "expanded": "awsui_expanded_ig8mp_1eh3a_172",
+  "button-wrapper": "awsui_button-wrapper_ig8mp_1eh3a_176",
+  "start": "awsui_start_ig8mp_1eh3a_180",
+  "expand-button": "awsui_expand-button_ig8mp_1eh3a_184",
+  "collapse-button": "awsui_collapse-button_ig8mp_1eh3a_188",
+  "learn-more-link": "awsui_learn-more-link_ig8mp_1eh3a_192",
+  "title": "awsui_title_ig8mp_1eh3a_196",
+  "prerequisites-alert": "awsui_prerequisites-alert_ig8mp_1eh3a_200",
+  "completed": "awsui_completed_ig8mp_1eh3a_204",
+  "download-link": "awsui_download-link_ig8mp_1eh3a_208"
+};
+  

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

@@ -0,0 +1,346 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among 
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_content-enter_ig8mp_1eh3a_93:not(#\9) {
+  animation: awsui_awsui-motion-fade-in_ig8mp_1eh3a_1 180ms ease-out;
+  animation: awsui_awsui-motion-fade-in_ig8mp_1eh3a_1 var(--motion-duration-show-paced-7wspqf, 180ms) var(--motion-easing-show-paced-wj4ybn, ease-out);
+}
+@keyframes awsui_awsui-motion-fade-in_ig8mp_1eh3a_1 {
+  from {
+    opacity: 0.2;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_content-enter_ig8mp_1eh3a_93:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_content-enter_ig8mp_1eh3a_93:not(#\9), .awsui-mode-entering .awsui_content-enter_ig8mp_1eh3a_93:not(#\9) {
+  animation: none;
+  transition: none;
+}
+
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_tutorial-list_ig8mp_1eh3a_119:not(#\9) {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  border-collapse: separate;
+  border-spacing: 0;
+  caption-side: top;
+  cursor: auto;
+  direction: ltr;
+  empty-cells: show;
+  font-family: serif;
+  font-size: medium;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-hyphens: none;
+      -ms-hyphens: none;
+          hyphens: none;
+  letter-spacing: normal;
+  list-style: disc outside none;
+  tab-size: 8;
+  text-align: left;
+  text-align-last: auto;
+  text-indent: 0;
+  text-shadow: none;
+  text-transform: none;
+  visibility: visible;
+  white-space: normal;
+  widows: 2;
+  word-spacing: normal;
+  box-sizing: border-box;
+  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);
+  padding: 0;
+  margin: 0;
+}
+
+.awsui_tutorial-box_ig8mp_1eh3a_132:not(#\9) {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  border-collapse: separate;
+  border-spacing: 0;
+  caption-side: top;
+  cursor: auto;
+  direction: ltr;
+  empty-cells: show;
+  font-family: serif;
+  font-size: medium;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-hyphens: none;
+      -ms-hyphens: none;
+          hyphens: none;
+  letter-spacing: normal;
+  list-style: disc outside none;
+  tab-size: 8;
+  text-align: left;
+  text-align-last: auto;
+  text-indent: 0;
+  text-shadow: none;
+  text-transform: none;
+  visibility: visible;
+  white-space: normal;
+  widows: 2;
+  word-spacing: normal;
+  box-sizing: border-box;
+  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);
+  list-style: none;
+  border: 2px solid #d1d5db;
+  border: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-tutorial-4ioksw, #d1d5db);
+  border-radius: 8px;
+  border-radius: var(--border-field-radius-t0kudr, 8px);
+  padding: 16px;
+  padding: var(--space-m-17eucw, 16px);
+}
+.awsui_tutorial-box_ig8mp_1eh3a_132:not(#\9):not(:first-child) {
+  margin-top: 20px;
+  margin-top: var(--space-l-4vl6xu, 20px);
+}
+
+.awsui_tutorial-box-title_ig8mp_1eh3a_150:not(#\9) {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.awsui_tutorial-description-plaintext_ig8mp_1eh3a_156:not(#\9) {
+  white-space: pre-line;
+}
+
+.awsui_tutorial-description_ig8mp_1eh3a_156:not(#\9) {
+  /* stylelint-disable-next-line @cloudscape-design/no-implicit-descendant, selector-max-type -- Customers can nest their list items inside Box components. */
+}
+.awsui_tutorial-description_ig8mp_1eh3a_156 ul:not(#\9) {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  list-style-type: disc;
+}
+
+.awsui_expandable-section_ig8mp_1eh3a_168:not(#\9) {
+  display: none;
+  margin-top: 16px;
+  margin-top: var(--space-m-17eucw, 16px);
+}
+.awsui_expandable-section_ig8mp_1eh3a_168.awsui_expanded_ig8mp_1eh3a_172:not(#\9) {
+  display: block;
+}
+
+.awsui_button-wrapper_ig8mp_1eh3a_176:not(#\9) {
+  margin: calc(-1 * 4px - 2px);
+  margin: calc(-1 * var(--space-xxs-ynfts5, 4px) - var(--border-field-width-idlekx, 2px));
+}
+
+.awsui_start_ig8mp_1eh3a_180:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_expand-button_ig8mp_1eh3a_184:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_collapse-button_ig8mp_1eh3a_188:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_learn-more-link_ig8mp_1eh3a_192:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_title_ig8mp_1eh3a_196:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_prerequisites-alert_ig8mp_1eh3a_200:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_completed_ig8mp_1eh3a_204:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_download-link_ig8mp_1eh3a_208:not(#\9) {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  border-collapse: separate;
+  border-spacing: 0;
+  caption-side: top;
+  cursor: auto;
+  direction: ltr;
+  empty-cells: show;
+  font-family: serif;
+  font-size: medium;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-hyphens: none;
+      -ms-hyphens: none;
+          hyphens: none;
+  letter-spacing: normal;
+  list-style: disc outside none;
+  tab-size: 8;
+  text-align: left;
+  text-align-last: auto;
+  text-indent: 0;
+  text-shadow: none;
+  text-transform: none;
+  visibility: visible;
+  white-space: normal;
+  widows: 2;
+  word-spacing: normal;
+  box-sizing: border-box;
+  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);
+  text-decoration: none;
+  display: inline;
+  white-space: inherit;
+  letter-spacing: 0.005em;
+  color: #414d5c;
+  color: var(--color-text-body-secondary-fdstdf, #414d5c);
+}
+.awsui_download-link_ig8mp_1eh3a_208:not(#\9):hover {
+  cursor: pointer;
+}
+.awsui_download-link_ig8mp_1eh3a_208:not(#\9):focus {
+  outline: none;
+}
+.awsui_download-link_ig8mp_1eh3a_208:not(#\9):active, .awsui_download-link_ig8mp_1eh3a_208:not(#\9):focus, .awsui_download-link_ig8mp_1eh3a_208:not(#\9):hover {
+  text-decoration: underline;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  text-decoration-color: currentColor;
+}
+.awsui_download-link_ig8mp_1eh3a_208[data-awsui-focus-visible=true]:not(#\9):focus {
+  outline: thin dotted;
+  outline: 0;
+  outline: var(--border-link-focus-ring-outline-k2wccv, 0);
+  outline-offset: 2px;
+  outline-color: #0972d3;
+  outline-color: var(--color-border-item-focused-ap3b6s, #0972d3);
+  border-radius: 4px;
+  border-radius: var(--border-control-focus-ring-radius-default-6g2tnn, 4px);
+  box-shadow: 0 0 0 2px #0972d3;
+  box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-nv4ahb, 2px) var(--color-border-item-focused-ap3b6s, #0972d3);
+}