@cloudscape-design/components-themeable 3.0.1069 → 3.0.1071

package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/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, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutProps } from '../../interfaces';\nimport { OnChangeParams } from '../../utils/use-drawers';\nimport { Focusable, FocusControlMultipleStates } from '../../utils/use-focus-control';\nimport { AppLayoutInternals } from '../interfaces';\nimport { BreadcrumbsSlot } from '../skeleton/breadcrumbs';\nimport { ToolbarSkeleton } from '../skeleton/slot-skeletons';\nimport { ToolbarSlot } from '../skeleton/slot-wrappers';\nimport { DrawerTriggers, SplitPanelToggleProps } from './drawer-triggers';\nimport TriggerButton from './trigger-button';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { SplitPanelToggleProps };\n\nexport interface ToolbarProps {\n  ariaLabels?: AppLayoutProps.Labels;\n  // navigation\n  hasNavigation?: boolean;\n  navigationOpen?: boolean;\n  onNavigationToggle?: (open: boolean) => void;\n  navigationFocusRef?: React.Ref<Focusable>;\n\n  // breadcrumbs\n  hasBreadcrumbsPortal?: boolean;\n\n  // split panel\n  hasSplitPanel?: boolean;\n  splitPanelToggleProps?: SplitPanelToggleProps;\n  splitPanelFocusRef?: React.Ref<Focusable>;\n  onSplitPanelToggle?: () => void;\n\n  // drawers\n  activeDrawerId?: string | null;\n  drawers?: ReadonlyArray<AppLayoutProps.Drawer>;\n  drawersFocusRef?: React.Ref<Focusable>;\n  globalDrawersFocusControl?: FocusControlMultipleStates;\n  onActiveDrawerChange?: (drawerId: string | null, params: OnChangeParams) => void;\n  globalDrawers?: ReadonlyArray<AppLayoutProps.Drawer> | undefined;\n  activeGlobalDrawersIds?: ReadonlyArray<string>;\n  onActiveGlobalDrawersChange?: ((drawerId: string, params: OnChangeParams) => void) | undefined;\n\n  expandedDrawerId?: string | null;\n  setExpandedDrawerId?: (value: string | null) => void;\n}\n\nexport interface AppLayoutToolbarImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n  toolbarProps: ToolbarProps;\n}\n\nexport function AppLayoutToolbarImplementation({\n  appLayoutInternals,\n  // the value could be undefined if this component is loaded as a widget by a different app layout version\n  // not testable in a single-version setup\n  toolbarProps = {},\n}: AppLayoutToolbarImplementationProps) {\n  const { breadcrumbs, discoveredBreadcrumbs, verticalOffsets, isMobile, setToolbarHeight } = appLayoutInternals;\n  const {\n    ariaLabels,\n    activeDrawerId,\n    drawers,\n    drawersFocusRef,\n    onActiveDrawerChange,\n    globalDrawersFocusControl,\n    globalDrawers,\n    activeGlobalDrawersIds,\n    onActiveGlobalDrawersChange,\n    hasNavigation,\n    navigationOpen,\n    navigationFocusRef,\n    onNavigationToggle,\n    hasSplitPanel,\n    splitPanelFocusRef,\n    splitPanelToggleProps,\n    onSplitPanelToggle,\n    expandedDrawerId,\n    setExpandedDrawerId,\n  } = toolbarProps;\n  const drawerExpandedMode = !!expandedDrawerId;\n  const ref = useRef<HTMLElement>(null);\n  useResizeObserver(ref, entry => setToolbarHeight(entry.borderBoxHeight));\n  useEffect(() => {\n    return () => {\n      setToolbarHeight(0);\n    };\n    // unmount effect only\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const anyPanelOpenInMobile = !!isMobile && (!!activeDrawerId || (!!navigationOpen && !!hasNavigation));\n  useEffect(() => {\n    if (anyPanelOpenInMobile) {\n      document.body.classList.add(styles['block-body-scroll']);\n    } else {\n      document.body.classList.remove(styles['block-body-scroll']);\n    }\n    return () => {\n      document.body.classList.remove(styles['block-body-scroll']);\n    };\n  }, [anyPanelOpenInMobile]);\n\n  const navLandmarkAttributes = navigationOpen\n    ? { role: 'presentation' }\n    : { role: 'navigation', 'aria-label': ariaLabels?.navigation };\n\n  return (\n    <ToolbarSlot\n      ref={ref}\n      className={clsx(styles['universal-toolbar'], testutilStyles.toolbar, {\n        [testutilStyles['mobile-bar']]: isMobile,\n      })}\n      style={{\n        insetBlockStart: verticalOffsets.toolbar,\n      }}\n    >\n      <div className={styles['toolbar-container']}>\n        {hasNavigation && (\n          <nav {...navLandmarkAttributes} className={clsx(styles['universal-toolbar-nav'])}>\n            <TriggerButton\n              ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n              ariaExpanded={!drawerExpandedMode && navigationOpen}\n              iconName=\"menu\"\n              className={testutilStyles['navigation-toggle']}\n              onClick={() => {\n                if (setExpandedDrawerId) {\n                  setExpandedDrawerId(null);\n                }\n                if (navigationOpen && expandedDrawerId) {\n                  return;\n                }\n                onNavigationToggle?.(!navigationOpen);\n              }}\n              ref={navigationFocusRef}\n              selected={!drawerExpandedMode && navigationOpen}\n              disabled={anyPanelOpenInMobile}\n            />\n          </nav>\n        )}\n        {(breadcrumbs || discoveredBreadcrumbs) && (\n          <div className={clsx(styles['universal-toolbar-breadcrumbs'], testutilStyles.breadcrumbs)}>\n            <BreadcrumbsSlot\n              ownBreadcrumbs={appLayoutInternals.breadcrumbs}\n              discoveredBreadcrumbs={appLayoutInternals.discoveredBreadcrumbs}\n            />\n          </div>\n        )}\n        {(drawers?.length || globalDrawers?.length || (hasSplitPanel && splitPanelToggleProps?.displayed)) && (\n          <div className={clsx(styles['universal-toolbar-drawers'])}>\n            <DrawerTriggers\n              ariaLabels={ariaLabels}\n              activeDrawerId={activeDrawerId ?? null}\n              drawers={drawers?.filter(item => !!item.trigger) ?? []}\n              drawersFocusRef={drawersFocusRef}\n              onActiveDrawerChange={onActiveDrawerChange}\n              splitPanelToggleProps={splitPanelToggleProps?.displayed ? splitPanelToggleProps : undefined}\n              splitPanelFocusRef={splitPanelFocusRef}\n              onSplitPanelToggle={onSplitPanelToggle}\n              disabled={anyPanelOpenInMobile}\n              globalDrawersFocusControl={globalDrawersFocusControl}\n              globalDrawers={globalDrawers?.filter(item => !!item.trigger) ?? []}\n              activeGlobalDrawersIds={activeGlobalDrawersIds ?? []}\n              onActiveGlobalDrawersChange={onActiveGlobalDrawersChange}\n              expandedDrawerId={expandedDrawerId}\n              setExpandedDrawerId={setExpandedDrawerId!}\n            />\n          </div>\n        )}\n      </div>\n    </ToolbarSlot>\n  );\n}\n\nexport const createWidgetizedAppLayoutToolbar = createWidgetizedComponent(\n  AppLayoutToolbarImplementation,\n  ToolbarSkeleton\n);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/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, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutProps } from '../../interfaces';\nimport { OnChangeParams } from '../../utils/use-drawers';\nimport { Focusable, FocusControlMultipleStates } from '../../utils/use-focus-control';\nimport { AppLayoutInternals } from '../interfaces';\nimport { ToolbarSkeleton } from '../skeleton/skeleton-parts';\nimport { BreadcrumbsSlot, ToolbarSlot } from '../skeleton/slots';\nimport { DrawerTriggers, SplitPanelToggleProps } from './drawer-triggers';\nimport TriggerButton from './trigger-button';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { SplitPanelToggleProps };\n\nexport interface ToolbarProps {\n  ariaLabels?: AppLayoutProps.Labels;\n  // navigation\n  hasNavigation?: boolean;\n  navigationOpen?: boolean;\n  onNavigationToggle?: (open: boolean) => void;\n  navigationFocusRef?: React.Ref<Focusable>;\n\n  // breadcrumbs\n  hasBreadcrumbsPortal?: boolean;\n\n  // split panel\n  hasSplitPanel?: boolean;\n  splitPanelToggleProps?: SplitPanelToggleProps;\n  splitPanelFocusRef?: React.Ref<Focusable>;\n  onSplitPanelToggle?: () => void;\n\n  // drawers\n  activeDrawerId?: string | null;\n  drawers?: ReadonlyArray<AppLayoutProps.Drawer>;\n  drawersFocusRef?: React.Ref<Focusable>;\n  globalDrawersFocusControl?: FocusControlMultipleStates;\n  onActiveDrawerChange?: (drawerId: string | null, params: OnChangeParams) => void;\n  globalDrawers?: ReadonlyArray<AppLayoutProps.Drawer> | undefined;\n  activeGlobalDrawersIds?: ReadonlyArray<string>;\n  onActiveGlobalDrawersChange?: ((drawerId: string, params: OnChangeParams) => void) | undefined;\n\n  expandedDrawerId?: string | null;\n  setExpandedDrawerId?: (value: string | null) => void;\n}\n\nexport interface AppLayoutToolbarImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n  toolbarProps: ToolbarProps;\n}\n\nexport function AppLayoutToolbarImplementation({\n  appLayoutInternals,\n  // the value could be undefined if this component is loaded as a widget by a different app layout version\n  // not testable in a single-version setup\n  toolbarProps = {},\n}: AppLayoutToolbarImplementationProps) {\n  const { breadcrumbs, discoveredBreadcrumbs, verticalOffsets, isMobile, setToolbarHeight } = appLayoutInternals;\n  const {\n    ariaLabels,\n    activeDrawerId,\n    drawers,\n    drawersFocusRef,\n    onActiveDrawerChange,\n    globalDrawersFocusControl,\n    globalDrawers,\n    activeGlobalDrawersIds,\n    onActiveGlobalDrawersChange,\n    hasNavigation,\n    navigationOpen,\n    navigationFocusRef,\n    onNavigationToggle,\n    hasSplitPanel,\n    splitPanelFocusRef,\n    splitPanelToggleProps,\n    onSplitPanelToggle,\n    expandedDrawerId,\n    setExpandedDrawerId,\n  } = toolbarProps;\n  const drawerExpandedMode = !!expandedDrawerId;\n  const ref = useRef<HTMLElement>(null);\n  useResizeObserver(ref, entry => setToolbarHeight(entry.borderBoxHeight));\n  useEffect(() => {\n    return () => {\n      setToolbarHeight(0);\n    };\n    // unmount effect only\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const anyPanelOpenInMobile = !!isMobile && (!!activeDrawerId || (!!navigationOpen && !!hasNavigation));\n  useEffect(() => {\n    if (anyPanelOpenInMobile) {\n      document.body.classList.add(styles['block-body-scroll']);\n    } else {\n      document.body.classList.remove(styles['block-body-scroll']);\n    }\n    return () => {\n      document.body.classList.remove(styles['block-body-scroll']);\n    };\n  }, [anyPanelOpenInMobile]);\n\n  const navLandmarkAttributes = navigationOpen\n    ? { role: 'presentation' }\n    : { role: 'navigation', 'aria-label': ariaLabels?.navigation };\n\n  return (\n    <ToolbarSlot\n      ref={ref}\n      className={clsx(styles['universal-toolbar'], testutilStyles.toolbar, {\n        [testutilStyles['mobile-bar']]: isMobile,\n      })}\n      style={{\n        insetBlockStart: verticalOffsets.toolbar,\n      }}\n    >\n      <div className={styles['toolbar-container']}>\n        {hasNavigation && (\n          <nav {...navLandmarkAttributes} className={clsx(styles['universal-toolbar-nav'])}>\n            <TriggerButton\n              ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n              ariaExpanded={!drawerExpandedMode && navigationOpen}\n              iconName=\"menu\"\n              className={testutilStyles['navigation-toggle']}\n              onClick={() => {\n                if (setExpandedDrawerId) {\n                  setExpandedDrawerId(null);\n                }\n                if (navigationOpen && expandedDrawerId) {\n                  return;\n                }\n                onNavigationToggle?.(!navigationOpen);\n              }}\n              ref={navigationFocusRef}\n              selected={!drawerExpandedMode && navigationOpen}\n              disabled={anyPanelOpenInMobile}\n            />\n          </nav>\n        )}\n        {(breadcrumbs || discoveredBreadcrumbs) && (\n          <div className={clsx(styles['universal-toolbar-breadcrumbs'], testutilStyles.breadcrumbs)}>\n            <BreadcrumbsSlot\n              ownBreadcrumbs={appLayoutInternals.breadcrumbs}\n              discoveredBreadcrumbs={appLayoutInternals.discoveredBreadcrumbs}\n            />\n          </div>\n        )}\n        {(drawers?.length || globalDrawers?.length || (hasSplitPanel && splitPanelToggleProps?.displayed)) && (\n          <div className={clsx(styles['universal-toolbar-drawers'])}>\n            <DrawerTriggers\n              ariaLabels={ariaLabels}\n              activeDrawerId={activeDrawerId ?? null}\n              drawers={drawers?.filter(item => !!item.trigger) ?? []}\n              drawersFocusRef={drawersFocusRef}\n              onActiveDrawerChange={onActiveDrawerChange}\n              splitPanelToggleProps={splitPanelToggleProps?.displayed ? splitPanelToggleProps : undefined}\n              splitPanelFocusRef={splitPanelFocusRef}\n              onSplitPanelToggle={onSplitPanelToggle}\n              disabled={anyPanelOpenInMobile}\n              globalDrawersFocusControl={globalDrawersFocusControl}\n              globalDrawers={globalDrawers?.filter(item => !!item.trigger) ?? []}\n              activeGlobalDrawersIds={activeGlobalDrawersIds ?? []}\n              onActiveGlobalDrawersChange={onActiveGlobalDrawersChange}\n              expandedDrawerId={expandedDrawerId}\n              setExpandedDrawerId={setExpandedDrawerId!}\n            />\n          </div>\n        )}\n      </div>\n    </ToolbarSlot>\n  );\n}\n\nexport const createWidgetizedAppLayoutToolbar = createWidgetizedComponent(\n  AppLayoutToolbarImplementation,\n  ToolbarSkeleton\n);\n"]}

package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/after-main-slot.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { SkeletonPartProps } from '../skeleton/interfaces';
+export declare const AfterMainSlotImplementation: ({ appLayoutState, appLayoutProps }: SkeletonPartProps) => JSX.Element | null;
+export declare const createWidgetizedAppLayoutAfterMainSlot: (Loader?: (({ appLayoutState, appLayoutProps }: SkeletonPartProps) => JSX.Element | null) | undefined) => ({ appLayoutState, appLayoutProps }: SkeletonPartProps) => JSX.Element | null;
+//# sourceMappingURL=after-main-slot.d.ts.map

package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/after-main-slot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"after-main-slot.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/widget-areas/after-main-slot.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAO3D,eAAO,MAAM,2BAA2B,uCAAwC,iBAAiB,uBAqDhG,CAAC;AAEF,eAAO,MAAM,sCAAsC,kDAvD6B,iBAAiB,8EAAjB,iBAAiB,uBAuDW,CAAC"}

package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/after-main-slot.js

@@ -0,0 +1,29 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+import { createWidgetizedComponent } from '../../../internal/widgets';
+import { ActiveDrawersContext } from '../../utils/visibility-context';
+import { AppLayoutDrawerImplementation as AppLayoutDrawer, AppLayoutGlobalDrawersImplementation as AppLayoutGlobalDrawers, } from '../drawer';
+import { AppLayoutSplitPanelDrawerSideImplementation as AppLayoutSplitPanelSide } from '../split-panel';
+import { isWidgetReady } from '../state/invariants';
+import sharedStyles from '../../resize/styles.css.js';
+import styles from '../skeleton/styles.css.js';
+export const AfterMainSlotImplementation = ({ appLayoutState, appLayoutProps }) => {
+    if (!isWidgetReady(appLayoutState)) {
+        return null;
+    }
+    const { navigationOpen, activeGlobalDrawersIds, expandedDrawerId, activeDrawer, splitPanelOpen, drawers, splitPanelPosition, } = appLayoutState.widgetizedState;
+    const drawerExpandedMode = !!expandedDrawerId;
+    const toolsOpen = !!activeDrawer;
+    const globalToolsOpen = !!(activeGlobalDrawersIds === null || activeGlobalDrawersIds === void 0 ? void 0 : activeGlobalDrawersIds.length);
+    return (React.createElement(React.Fragment, null,
+        splitPanelPosition === 'side' && (React.createElement("div", { className: clsx(styles['split-panel-side'], !splitPanelOpen && styles['panel-hidden'], drawerExpandedMode && styles.hidden) },
+            React.createElement(AppLayoutSplitPanelSide, { appLayoutInternals: appLayoutState.appLayoutInternals, splitPanelInternals: appLayoutState.splitPanelInternals }, appLayoutProps.splitPanel))),
+        React.createElement("div", { className: clsx(styles.tools, !toolsOpen && styles['panel-hidden'], sharedStyles['with-motion-horizontal'], navigationOpen && !toolsOpen && styles['unfocusable-mobile'], toolsOpen && styles['tools-open'], drawerExpandedMode && styles.hidden) }, drawers && drawers.length > 0 && React.createElement(AppLayoutDrawer, { appLayoutInternals: appLayoutState.appLayoutInternals })),
+        React.createElement("div", { className: clsx(styles['global-tools'], !globalToolsOpen && styles['panel-hidden']) },
+            React.createElement(ActiveDrawersContext.Provider, { value: activeGlobalDrawersIds !== null && activeGlobalDrawersIds !== void 0 ? activeGlobalDrawersIds : [] },
+                React.createElement(AppLayoutGlobalDrawers, { appLayoutInternals: appLayoutState.appLayoutInternals })))));
+};
+export const createWidgetizedAppLayoutAfterMainSlot = createWidgetizedComponent(AfterMainSlotImplementation);
+//# sourceMappingURL=after-main-slot.js.map

package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/after-main-slot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"after-main-slot.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/widget-areas/after-main-slot.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EACL,6BAA6B,IAAI,eAAe,EAChD,oCAAoC,IAAI,sBAAsB,GAC/D,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,2CAA2C,IAAI,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AACxG,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,OAAO,YAAY,MAAM,4BAA4B,CAAC;AACtD,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAE/C,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,EAAE,cAAc,EAAE,cAAc,EAAqB,EAAE,EAAE;IACnG,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE;QAClC,OAAO,IAAI,CAAC;KACb;IACD,MAAM,EACJ,cAAc,EACd,sBAAsB,EACtB,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,OAAO,EACP,kBAAkB,GACnB,GAAG,cAAc,CAAC,eAAe,CAAC;IACnC,MAAM,kBAAkB,GAAG,CAAC,CAAC,gBAAgB,CAAC;IAC9C,MAAM,SAAS,GAAG,CAAC,CAAC,YAAY,CAAC;IACjC,MAAM,eAAe,GAAG,CAAC,CAAC,CAAA,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,MAAM,CAAA,CAAC;IACzD,OAAO,CACL;QACG,kBAAkB,KAAK,MAAM,IAAI,CAChC,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,kBAAkB,CAAC,EAC1B,CAAC,cAAc,IAAI,MAAM,CAAC,cAAc,CAAC,EACzC,kBAAkB,IAAI,MAAM,CAAC,MAAM,CACpC;YAED,oBAAC,uBAAuB,IACtB,kBAAkB,EAAE,cAAc,CAAC,kBAAkB,EACrD,mBAAmB,EAAE,cAAc,CAAC,mBAAmB,IAEtD,cAAc,CAAC,UAAU,CACF,CACtB,CACP;QACD,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,KAAK,EACZ,CAAC,SAAS,IAAI,MAAM,CAAC,cAAc,CAAC,EACpC,YAAY,CAAC,wBAAwB,CAAC,EACtC,cAAc,IAAI,CAAC,SAAS,IAAI,MAAM,CAAC,oBAAoB,CAAC,EAC5D,SAAS,IAAI,MAAM,CAAC,YAAY,CAAC,EACjC,kBAAkB,IAAI,MAAM,CAAC,MAAM,CACpC,IAEA,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,oBAAC,eAAe,IAAC,kBAAkB,EAAE,cAAc,CAAC,kBAAkB,GAAI,CACxG;QACN,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,CAAC,eAAe,IAAI,MAAM,CAAC,cAAc,CAAC,CAAC;YACtF,oBAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,sBAAsB,aAAtB,sBAAsB,cAAtB,sBAAsB,GAAI,EAAE;gBAChE,oBAAC,sBAAsB,IAAC,kBAAkB,EAAE,cAAc,CAAC,kBAAkB,GAAI,CACnD,CAC5B,CACL,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sCAAsC,GAAG,yBAAyB,CAAC,2BAA2B,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { ActiveDrawersContext } from '../../utils/visibility-context';\nimport {\n  AppLayoutDrawerImplementation as AppLayoutDrawer,\n  AppLayoutGlobalDrawersImplementation as AppLayoutGlobalDrawers,\n} from '../drawer';\nimport { SkeletonPartProps } from '../skeleton/interfaces';\nimport { AppLayoutSplitPanelDrawerSideImplementation as AppLayoutSplitPanelSide } from '../split-panel';\nimport { isWidgetReady } from '../state/invariants';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport styles from '../skeleton/styles.css.js';\n\nexport const AfterMainSlotImplementation = ({ appLayoutState, appLayoutProps }: SkeletonPartProps) => {\n  if (!isWidgetReady(appLayoutState)) {\n    return null;\n  }\n  const {\n    navigationOpen,\n    activeGlobalDrawersIds,\n    expandedDrawerId,\n    activeDrawer,\n    splitPanelOpen,\n    drawers,\n    splitPanelPosition,\n  } = appLayoutState.widgetizedState;\n  const drawerExpandedMode = !!expandedDrawerId;\n  const toolsOpen = !!activeDrawer;\n  const globalToolsOpen = !!activeGlobalDrawersIds?.length;\n  return (\n    <>\n      {splitPanelPosition === 'side' && (\n        <div\n          className={clsx(\n            styles['split-panel-side'],\n            !splitPanelOpen && styles['panel-hidden'],\n            drawerExpandedMode && styles.hidden\n          )}\n        >\n          <AppLayoutSplitPanelSide\n            appLayoutInternals={appLayoutState.appLayoutInternals}\n            splitPanelInternals={appLayoutState.splitPanelInternals}\n          >\n            {appLayoutProps.splitPanel}\n          </AppLayoutSplitPanelSide>\n        </div>\n      )}\n      <div\n        className={clsx(\n          styles.tools,\n          !toolsOpen && styles['panel-hidden'],\n          sharedStyles['with-motion-horizontal'],\n          navigationOpen && !toolsOpen && styles['unfocusable-mobile'],\n          toolsOpen && styles['tools-open'],\n          drawerExpandedMode && styles.hidden\n        )}\n      >\n        {drawers && drawers.length > 0 && <AppLayoutDrawer appLayoutInternals={appLayoutState.appLayoutInternals} />}\n      </div>\n      <div className={clsx(styles['global-tools'], !globalToolsOpen && styles['panel-hidden'])}>\n        <ActiveDrawersContext.Provider value={activeGlobalDrawersIds ?? []}>\n          <AppLayoutGlobalDrawers appLayoutInternals={appLayoutState.appLayoutInternals} />\n        </ActiveDrawersContext.Provider>\n      </div>\n    </>\n  );\n};\n\nexport const createWidgetizedAppLayoutAfterMainSlot = createWidgetizedComponent(AfterMainSlotImplementation);\n"]}

package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/before-main-slot.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { SkeletonPartProps } from '../skeleton/interfaces';
+export declare const BeforeMainSlotImplementation: ({ toolbarProps, appLayoutState, appLayoutProps }: SkeletonPartProps) => JSX.Element;
+export declare const createWidgetizedAppLayoutBeforeMainSlot: (Loader?: (({ toolbarProps, appLayoutState, appLayoutProps }: SkeletonPartProps) => JSX.Element) | undefined) => ({ toolbarProps, appLayoutState, appLayoutProps }: SkeletonPartProps) => JSX.Element;
+//# sourceMappingURL=before-main-slot.d.ts.map

package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/before-main-slot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"before-main-slot.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/widget-areas/before-main-slot.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAQ3D,eAAO,MAAM,4BAA4B,qDAAsD,iBAAiB,gBAqC/G,CAAC;AAEF,eAAO,MAAM,uCAAuC,gEAvC2C,iBAAiB,qFAAjB,iBAAiB,gBA0C/G,CAAC"}

package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/before-main-slot.js

@@ -0,0 +1,28 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+import { createWidgetizedComponent } from '../../../internal/widgets';
+import { AppLayoutNavigationImplementation as AppLayoutNavigation } from '../navigation';
+import { BeforeMainSlotSkeleton } from '../skeleton/skeleton-parts';
+import { isWidgetReady } from '../state/invariants';
+import { AppLayoutToolbarImplementation as AppLayoutToolbar } from '../toolbar';
+import sharedStyles from '../../resize/styles.css.js';
+import styles from '../skeleton/styles.css.js';
+export const BeforeMainSlotImplementation = ({ toolbarProps, appLayoutState, appLayoutProps }) => {
+    if (!isWidgetReady(appLayoutState)) {
+        return (React.createElement(BeforeMainSlotSkeleton, { toolbarProps: toolbarProps, appLayoutProps: appLayoutProps, appLayoutState: appLayoutState }));
+    }
+    const { activeDrawer, navigationOpen, navigation, expandedDrawerId, navigationAnimationDisabled } = appLayoutState.widgetizedState;
+    const drawerExpandedMode = !!expandedDrawerId;
+    const toolsOpen = !!activeDrawer;
+    // Must use `toolbarProps` because all layouts have to apply this mode, not just the one with toolbar
+    const drawerExpandedModeInChildLayout = !!(toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.expandedDrawerId);
+    const { __embeddedViewMode: embeddedViewMode } = appLayoutProps;
+    return (React.createElement(React.Fragment, null,
+        !!toolbarProps && !embeddedViewMode && (React.createElement(AppLayoutToolbar, { appLayoutInternals: appLayoutState.appLayoutInternals, toolbarProps: toolbarProps })),
+        navigation && (React.createElement("div", { className: clsx(styles.navigation, !navigationOpen && styles['panel-hidden'], toolsOpen && styles['unfocusable-mobile'], !navigationAnimationDisabled && sharedStyles['with-motion-horizontal'], (drawerExpandedMode || drawerExpandedModeInChildLayout) && styles.hidden) },
+            React.createElement(AppLayoutNavigation, { appLayoutInternals: appLayoutState.appLayoutInternals })))));
+};
+export const createWidgetizedAppLayoutBeforeMainSlot = createWidgetizedComponent(BeforeMainSlotImplementation, BeforeMainSlotSkeleton);
+//# sourceMappingURL=before-main-slot.js.map

package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/before-main-slot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"before-main-slot.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/widget-areas/before-main-slot.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAE,iCAAiC,IAAI,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAEzF,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,8BAA8B,IAAI,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEhF,OAAO,YAAY,MAAM,4BAA4B,CAAC;AACtD,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAE/C,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,EAAE,YAAY,EAAE,cAAc,EAAE,cAAc,EAAqB,EAAE,EAAE;IAClH,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE;QAClC,OAAO,CACL,oBAAC,sBAAsB,IACrB,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,GAC9B,CACH,CAAC;KACH;IACD,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,gBAAgB,EAAE,2BAA2B,EAAE,GAC/F,cAAc,CAAC,eAAe,CAAC;IACjC,MAAM,kBAAkB,GAAG,CAAC,CAAC,gBAAgB,CAAC;IAC9C,MAAM,SAAS,GAAG,CAAC,CAAC,YAAY,CAAC;IACjC,qGAAqG;IACrG,MAAM,+BAA+B,GAAG,CAAC,CAAC,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,gBAAgB,CAAA,CAAC;IACzE,MAAM,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,GAAG,cAAqB,CAAC;IACvE,OAAO,CACL;QACG,CAAC,CAAC,YAAY,IAAI,CAAC,gBAAgB,IAAI,CACtC,oBAAC,gBAAgB,IAAC,kBAAkB,EAAE,cAAc,CAAC,kBAAkB,EAAE,YAAY,EAAE,YAAY,GAAI,CACxG;QACA,UAAU,IAAI,CACb,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,UAAU,EACjB,CAAC,cAAc,IAAI,MAAM,CAAC,cAAc,CAAC,EACzC,SAAS,IAAI,MAAM,CAAC,oBAAoB,CAAC,EACzC,CAAC,2BAA2B,IAAI,YAAY,CAAC,wBAAwB,CAAC,EACtE,CAAC,kBAAkB,IAAI,+BAA+B,CAAC,IAAI,MAAM,CAAC,MAAM,CACzE;YAED,oBAAC,mBAAmB,IAAC,kBAAkB,EAAE,cAAc,CAAC,kBAAkB,GAAI,CAC1E,CACP,CACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uCAAuC,GAAG,yBAAyB,CAC9E,4BAA4B,EAC5B,sBAAsB,CACvB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutNavigationImplementation as AppLayoutNavigation } from '../navigation';\nimport { SkeletonPartProps } from '../skeleton/interfaces';\nimport { BeforeMainSlotSkeleton } from '../skeleton/skeleton-parts';\nimport { isWidgetReady } from '../state/invariants';\nimport { AppLayoutToolbarImplementation as AppLayoutToolbar } from '../toolbar';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport styles from '../skeleton/styles.css.js';\n\nexport const BeforeMainSlotImplementation = ({ toolbarProps, appLayoutState, appLayoutProps }: SkeletonPartProps) => {\n  if (!isWidgetReady(appLayoutState)) {\n    return (\n      <BeforeMainSlotSkeleton\n        toolbarProps={toolbarProps}\n        appLayoutProps={appLayoutProps}\n        appLayoutState={appLayoutState}\n      />\n    );\n  }\n  const { activeDrawer, navigationOpen, navigation, expandedDrawerId, navigationAnimationDisabled } =\n    appLayoutState.widgetizedState;\n  const drawerExpandedMode = !!expandedDrawerId;\n  const toolsOpen = !!activeDrawer;\n  // Must use `toolbarProps` because all layouts have to apply this mode, not just the one with toolbar\n  const drawerExpandedModeInChildLayout = !!toolbarProps?.expandedDrawerId;\n  const { __embeddedViewMode: embeddedViewMode } = appLayoutProps as any;\n  return (\n    <>\n      {!!toolbarProps && !embeddedViewMode && (\n        <AppLayoutToolbar appLayoutInternals={appLayoutState.appLayoutInternals} toolbarProps={toolbarProps} />\n      )}\n      {navigation && (\n        <div\n          className={clsx(\n            styles.navigation,\n            !navigationOpen && styles['panel-hidden'],\n            toolsOpen && styles['unfocusable-mobile'],\n            !navigationAnimationDisabled && sharedStyles['with-motion-horizontal'],\n            (drawerExpandedMode || drawerExpandedModeInChildLayout) && styles.hidden\n          )}\n        >\n          <AppLayoutNavigation appLayoutInternals={appLayoutState.appLayoutInternals} />\n        </div>\n      )}\n    </>\n  );\n};\n\nexport const createWidgetizedAppLayoutBeforeMainSlot = createWidgetizedComponent(\n  BeforeMainSlotImplementation,\n  BeforeMainSlotSkeleton\n);\n"]}

package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/bottom-content-slot.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { SkeletonPartProps } from '../skeleton/interfaces';
+export declare const BottomContentSlotImplementation: ({ appLayoutState, appLayoutProps }: SkeletonPartProps) => JSX.Element | null;
+export declare const createWidgetizedAppLayoutBottomContentSlot: (Loader?: (({ appLayoutState, appLayoutProps }: SkeletonPartProps) => JSX.Element | null) | undefined) => ({ appLayoutState, appLayoutProps }: SkeletonPartProps) => JSX.Element | null;
+//# sourceMappingURL=bottom-content-slot.d.ts.map

package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/bottom-content-slot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bottom-content-slot.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/widget-areas/bottom-content-slot.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAM3D,eAAO,MAAM,+BAA+B,uCAAwC,iBAAiB,uBAmBpG,CAAC;AAEF,eAAO,MAAM,0CAA0C,kDArB6B,iBAAiB,8EAAjB,iBAAiB,uBAqBe,CAAC"}

package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/bottom-content-slot.js

@@ -0,0 +1,17 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { createWidgetizedComponent } from '../../../internal/widgets';
+import { AppLayoutSplitPanelDrawerBottomImplementation as AppLayoutSplitPanelBottom } from '../split-panel';
+import { isWidgetReady } from '../state/invariants';
+import styles from '../skeleton/styles.css.js';
+export const BottomContentSlotImplementation = ({ appLayoutState, appLayoutProps }) => {
+    if (!isWidgetReady(appLayoutState)) {
+        return null;
+    }
+    const { splitPanelPosition, placement } = appLayoutState.widgetizedState;
+    return (React.createElement(React.Fragment, null, splitPanelPosition === 'bottom' && (React.createElement("div", { className: styles['split-panel-bottom'], style: { insetBlockEnd: placement.insetBlockEnd } },
+        React.createElement(AppLayoutSplitPanelBottom, { appLayoutInternals: appLayoutState.appLayoutInternals, splitPanelInternals: appLayoutState.splitPanelInternals }, appLayoutProps.splitPanel)))));
+};
+export const createWidgetizedAppLayoutBottomContentSlot = createWidgetizedComponent(BottomContentSlotImplementation);
+//# sourceMappingURL=bottom-content-slot.js.map

package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/bottom-content-slot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bottom-content-slot.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/widget-areas/bottom-content-slot.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAEtE,OAAO,EAAE,6CAA6C,IAAI,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAC5G,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAE/C,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,EAAE,cAAc,EAAE,cAAc,EAAqB,EAAE,EAAE;IACvG,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE;QAClC,OAAO,IAAI,CAAC;KACb;IACD,MAAM,EAAE,kBAAkB,EAAE,SAAS,EAAE,GAAG,cAAc,CAAC,eAAe,CAAC;IACzE,OAAO,CACL,0CACG,kBAAkB,KAAK,QAAQ,IAAI,CAClC,6BAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,CAAC,EAAE,KAAK,EAAE,EAAE,aAAa,EAAE,SAAS,CAAC,aAAa,EAAE;QAC7F,oBAAC,yBAAyB,IACxB,kBAAkB,EAAE,cAAc,CAAC,kBAAkB,EACrD,mBAAmB,EAAE,cAAc,CAAC,mBAAmB,IAEtD,cAAc,CAAC,UAAU,CACA,CACxB,CACP,CACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,0CAA0C,GAAG,yBAAyB,CAAC,+BAA+B,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { SkeletonPartProps } from '../skeleton/interfaces';\nimport { AppLayoutSplitPanelDrawerBottomImplementation as AppLayoutSplitPanelBottom } from '../split-panel';\nimport { isWidgetReady } from '../state/invariants';\n\nimport styles from '../skeleton/styles.css.js';\n\nexport const BottomContentSlotImplementation = ({ appLayoutState, appLayoutProps }: SkeletonPartProps) => {\n  if (!isWidgetReady(appLayoutState)) {\n    return null;\n  }\n  const { splitPanelPosition, placement } = appLayoutState.widgetizedState;\n  return (\n    <>\n      {splitPanelPosition === 'bottom' && (\n        <div className={styles['split-panel-bottom']} style={{ insetBlockEnd: placement.insetBlockEnd }}>\n          <AppLayoutSplitPanelBottom\n            appLayoutInternals={appLayoutState.appLayoutInternals}\n            splitPanelInternals={appLayoutState.splitPanelInternals}\n          >\n            {appLayoutProps.splitPanel}\n          </AppLayoutSplitPanelBottom>\n        </div>\n      )}\n    </>\n  );\n};\n\nexport const createWidgetizedAppLayoutBottomContentSlot = createWidgetizedComponent(BottomContentSlotImplementation);\n"]}

package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/top-content-slot.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { SkeletonPartProps } from '../skeleton/interfaces';
+export declare const TopContentSlotImplementation: ({ appLayoutProps, appLayoutState }: SkeletonPartProps) => JSX.Element | null;
+export declare const createWidgetizedAppLayoutTopContentSlot: (Loader?: (({ appLayoutProps, appLayoutState }: SkeletonPartProps) => JSX.Element | null) | undefined) => ({ appLayoutProps, appLayoutState }: SkeletonPartProps) => JSX.Element | null;
+//# sourceMappingURL=top-content-slot.d.ts.map

package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/top-content-slot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-content-slot.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/widget-areas/top-content-slot.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAK3D,eAAO,MAAM,4BAA4B,uCAAwC,iBAAiB,uBAqBjG,CAAC;AAEF,eAAO,MAAM,uCAAuC,kDAvB6B,iBAAiB,8EAAjB,iBAAiB,uBAuBY,CAAC"}

package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/top-content-slot.js

@@ -0,0 +1,19 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+import { highContrastHeaderClassName } from '../../../internal/utils/content-header-utils';
+import { createWidgetizedComponent } from '../../../internal/widgets';
+import { AppLayoutNotificationsImplementation as AppLayoutNotifications } from '../notifications';
+import { isWidgetReady } from '../state/invariants';
+import styles from '../skeleton/styles.css.js';
+export const TopContentSlotImplementation = ({ appLayoutProps, appLayoutState }) => {
+    if (!isWidgetReady(appLayoutState)) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
+        appLayoutProps.notifications && (React.createElement("div", { className: clsx(styles['notifications-background'], appLayoutProps.headerVariant === 'high-contrast' && highContrastHeaderClassName) })),
+        appLayoutProps.notifications && (React.createElement(AppLayoutNotifications, { appLayoutInternals: appLayoutState.appLayoutInternals }, appLayoutProps.notifications))));
+};
+export const createWidgetizedAppLayoutTopContentSlot = createWidgetizedComponent(TopContentSlotImplementation);
+//# sourceMappingURL=top-content-slot.js.map

package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/top-content-slot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-content-slot.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/widget-areas/top-content-slot.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,2BAA2B,EAAE,MAAM,8CAA8C,CAAC;AAC3F,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAE,oCAAoC,IAAI,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAElG,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAE/C,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,EAAE,cAAc,EAAE,cAAc,EAAqB,EAAE,EAAE;IACpG,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE;QAClC,OAAO,IAAI,CAAC;KACb;IACD,OAAO,CACL;QACG,cAAc,CAAC,aAAa,IAAI,CAC/B,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,0BAA0B,CAAC,EAClC,cAAc,CAAC,aAAa,KAAK,eAAe,IAAI,2BAA2B,CAChF,GACI,CACR;QACA,cAAc,CAAC,aAAa,IAAI,CAC/B,oBAAC,sBAAsB,IAAC,kBAAkB,EAAE,cAAc,CAAC,kBAAkB,IAC1E,cAAc,CAAC,aAAa,CACN,CAC1B,CACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uCAAuC,GAAG,yBAAyB,CAAC,4BAA4B,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { highContrastHeaderClassName } from '../../../internal/utils/content-header-utils';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutNotificationsImplementation as AppLayoutNotifications } from '../notifications';\nimport { SkeletonPartProps } from '../skeleton/interfaces';\nimport { isWidgetReady } from '../state/invariants';\n\nimport styles from '../skeleton/styles.css.js';\n\nexport const TopContentSlotImplementation = ({ appLayoutProps, appLayoutState }: SkeletonPartProps) => {\n  if (!isWidgetReady(appLayoutState)) {\n    return null;\n  }\n  return (\n    <>\n      {appLayoutProps.notifications && (\n        <div\n          className={clsx(\n            styles['notifications-background'],\n            appLayoutProps.headerVariant === 'high-contrast' && highContrastHeaderClassName\n          )}\n        ></div>\n      )}\n      {appLayoutProps.notifications && (\n        <AppLayoutNotifications appLayoutInternals={appLayoutState.appLayoutInternals}>\n          {appLayoutProps.notifications}\n        </AppLayoutNotifications>\n      )}\n    </>\n  );\n};\n\nexport const createWidgetizedAppLayoutTopContentSlot = createWidgetizedComponent(TopContentSlotImplementation);\n"]}

package/lib/internal/template/breadcrumb-group/internal.d.ts

@@ -1,2 +1,3 @@
-export declare const InternalBreadcrumbGroup: typeof import("./implementation").BreadcrumbGroupImplementation;
+import { BreadcrumbGroupImplementation } from './implementation';
+export declare const InternalBreadcrumbGroup: typeof BreadcrumbGroupImplementation;
 //# sourceMappingURL=internal.d.ts.map

package/lib/internal/template/breadcrumb-group/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb-group/internal.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,uBAAuB,iEAAoC,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb-group/internal.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,6BAA6B,EAAmC,MAAM,kBAAkB,CAAC;AAElG,eAAO,MAAM,uBAAuB,sCAEnC,CAAC"}

package/lib/internal/template/breadcrumb-group/internal.js

@@ -1,5 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { createWidgetizedBreadcrumbGroup } from './implementation';
-export const InternalBreadcrumbGroup = createWidgetizedBreadcrumbGroup();
+import { createLoadableComponent } from '../internal/widgets/loader-mock';
+import { BreadcrumbGroupImplementation, createWidgetizedBreadcrumbGroup } from './implementation';
+export const InternalBreadcrumbGroup = createWidgetizedBreadcrumbGroup(createLoadableComponent(BreadcrumbGroupImplementation));
 //# sourceMappingURL=internal.js.map

package/lib/internal/template/breadcrumb-group/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,+BAA+B,EAAE,MAAM,kBAAkB,CAAC;AAEnE,MAAM,CAAC,MAAM,uBAAuB,GAAG,+BAA+B,EAAE,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { createWidgetizedBreadcrumbGroup } from './implementation';\n\nexport const InternalBreadcrumbGroup = createWidgetizedBreadcrumbGroup();\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,6BAA6B,EAAE,+BAA+B,EAAE,MAAM,kBAAkB,CAAC;AAElG,MAAM,CAAC,MAAM,uBAAuB,GAAG,+BAA+B,CACpE,uBAAuB,CAAC,6BAA6B,CAAC,CACvD,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { createLoadableComponent } from '../internal/widgets/loader-mock';\nimport { BreadcrumbGroupImplementation, createWidgetizedBreadcrumbGroup } from './implementation';\n\nexport const InternalBreadcrumbGroup = createWidgetizedBreadcrumbGroup(\n  createLoadableComponent(BreadcrumbGroupImplementation)\n);\n"]}

package/lib/internal/template/internal/base-component/styles.scoped.css

@@ -3892,5 +3892,5 @@
   }
 }
 :root {
-  --awsui-version-info-d12aac57: true;
+  --awsui-version-info-97fff0df: true;
 }

package/lib/internal/template/internal/environment.js

@@ -1,6 +1,6 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (d12aac57)";
-export var GIT_SHA = "d12aac57";
+export var PACKAGE_VERSION = "3.0.0 (97fff0df)";
+export var GIT_SHA = "97fff0df";
 export var THEME = "open-source-visual-refresh";
 export var SYSTEM = "console";
 export var ALWAYS_VISUAL_REFRESH = true;

package/lib/internal/template/internal/environment.json

@@ -1,7 +1,7 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (d12aac57)",
-  "GIT_SHA": "d12aac57",
+  "PACKAGE_VERSION": "3.0.0 (97fff0df)",
+  "GIT_SHA": "97fff0df",
   "THEME": "default",
   "SYSTEM": "core",
   "ALWAYS_VISUAL_REFRESH": false

package/lib/internal/template/internal/types.d.ts

@@ -14,6 +14,15 @@
 export type SomeRequired<Type, Keys extends keyof Type> = Type & {
     [Key in Keys]-?: Type[Key];
 };
+/**
+ * Makes specified properties optional.
+ *
+ * @example
+ * ```
+ * type PartialAlertProps = SomeOptional<AlertProps, 'type' | 'children'>
+ * ```
+ */
+export type SomeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 /**
  * Utility type that makes a union of given type and undefined.
  * @example

package/lib/internal/template/internal/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/internal/types.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,YAAY,CAAC,IAAI,EAAE,IAAI,SAAS,MAAM,IAAI,IAAI,IAAI,GAAG;KAC9D,GAAG,IAAI,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC;CAC3B,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,MAAM,QAAQ,CAAC,IAAI,IAAI,IAAI,GAAG,SAAS,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/internal/types.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,YAAY,CAAC,IAAI,EAAE,IAAI,SAAS,MAAM,IAAI,IAAI,IAAI,GAAG;KAC9D,GAAG,IAAI,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC;CAC3B,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,MAAM,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAElF;;;;;;;GAOG;AACH,MAAM,MAAM,QAAQ,CAAC,IAAI,IAAI,IAAI,GAAG,SAAS,CAAC"}

package/lib/internal/template/internal/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/internal/types.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n/**\n * Makes specified properties required.\n *\n * @example\n * ```\n * import { AlertProps } from '~components/alert/interfaces'\n *\n * type InternalAlertProps = SomeRequired<AlertProps, 'type'>\n *\n * function Alert(props: AlertProps) { ... }\n * function InternalAlert(props: InternalAlertProps) { ... }\n * ```\n */\nexport type SomeRequired<Type, Keys extends keyof Type> = Type & {\n  [Key in Keys]-?: Type[Key];\n};\n\n/**\n * Utility type that makes a union of given type and undefined.\n * @example\n * ```\n * type OptionalString = Optional<string>\n * type OptionalStringOrNumber = Optional<string | number>\n * ```\n */\nexport type Optional<Type> = Type | undefined;\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/internal/types.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n/**\n * Makes specified properties required.\n *\n * @example\n * ```\n * import { AlertProps } from '~components/alert/interfaces'\n *\n * type InternalAlertProps = SomeRequired<AlertProps, 'type'>\n *\n * function Alert(props: AlertProps) { ... }\n * function InternalAlert(props: InternalAlertProps) { ... }\n * ```\n */\nexport type SomeRequired<Type, Keys extends keyof Type> = Type & {\n  [Key in Keys]-?: Type[Key];\n};\n\n/**\n * Makes specified properties optional.\n *\n * @example\n * ```\n * type PartialAlertProps = SomeOptional<AlertProps, 'type' | 'children'>\n * ```\n */\nexport type SomeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;\n\n/**\n * Utility type that makes a union of given type and undefined.\n * @example\n * ```\n * type OptionalString = Optional<string>\n * type OptionalStringOrNumber = Optional<string | number>\n * ```\n */\nexport type Optional<Type> = Type | undefined;\n"]}

package/lib/internal/template/internal/widget-exports.d.ts

@@ -4,6 +4,11 @@ export { AppLayoutNavigationImplementation as AppLayoutNavigation } from '../app
 export { AppLayoutNotificationsImplementation as AppLayoutNotifications } from '../app-layout/visual-refresh-toolbar/notifications';
 export { AppLayoutSplitPanelDrawerBottomImplementation as AppLayoutSplitPanelBottom, AppLayoutSplitPanelDrawerSideImplementation as AppLayoutSplitPanelSide, } from '../app-layout/visual-refresh-toolbar/split-panel';
 export { AppLayoutToolbarImplementation as AppLayoutToolbar } from '../app-layout/visual-refresh-toolbar/toolbar';
+export { BeforeMainSlotImplementation as AppLayoutBeforeMainSlot } from '../app-layout/visual-refresh-toolbar/widget-areas/before-main-slot';
+export { AfterMainSlotImplementation as AppLayoutAfterMainSlot } from '../app-layout/visual-refresh-toolbar/widget-areas/after-main-slot';
+export { TopContentSlotImplementation as AppLayoutTopContentSlot } from '../app-layout/visual-refresh-toolbar/widget-areas/top-content-slot';
+export { BottomContentSlotImplementation as AppLayoutBottomContentSlot } from '../app-layout/visual-refresh-toolbar/widget-areas/bottom-content-slot';
+export { AppLayoutStateProvider as AppLayoutWidgetizedState } from '../app-layout/visual-refresh-toolbar/state';
 export { SplitPanelImplementation as SplitPanel } from '../split-panel/implementation';
 export { BreadcrumbGroupImplementation as BreadcrumbGroup } from '../breadcrumb-group/implementation';
 export { DrawerImplementation as Drawer } from '../drawer/implementation';

package/lib/internal/template/internal/widget-exports.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"widget-exports.d.ts","sourceRoot":"","sources":["../../../src/internal/widget-exports.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EACL,6BAA6B,IAAI,eAAe,EAChD,oCAAoC,IAAI,sBAAsB,GAC/D,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAE,iCAAiC,IAAI,mBAAmB,EAAE,MAAM,iDAAiD,CAAC;AAC3H,OAAO,EAAE,oCAAoC,IAAI,sBAAsB,EAAE,MAAM,oDAAoD,CAAC;AACpI,OAAO,EACL,6CAA6C,IAAI,yBAAyB,EAC1E,2CAA2C,IAAI,uBAAuB,GACvE,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,8BAA8B,IAAI,gBAAgB,EAAE,MAAM,8CAA8C,CAAC;AAClH,OAAO,EAAE,wBAAwB,IAAI,UAAU,EAAE,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,6BAA6B,IAAI,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACtG,OAAO,EAAE,oBAAoB,IAAI,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,4BAA4B,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnG,OAAO,EAAE,uBAAuB,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC"}
+{"version":3,"file":"widget-exports.d.ts","sourceRoot":"","sources":["../../../src/internal/widget-exports.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGhD,OAAO,EACL,6BAA6B,IAAI,eAAe,EAChD,oCAAoC,IAAI,sBAAsB,GAC/D,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAE,iCAAiC,IAAI,mBAAmB,EAAE,MAAM,iDAAiD,CAAC;AAC3H,OAAO,EAAE,oCAAoC,IAAI,sBAAsB,EAAE,MAAM,oDAAoD,CAAC;AACpI,OAAO,EACL,6CAA6C,IAAI,yBAAyB,EAC1E,2CAA2C,IAAI,uBAAuB,GACvE,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,8BAA8B,IAAI,gBAAgB,EAAE,MAAM,8CAA8C,CAAC;AAGlH,OAAO,EAAE,4BAA4B,IAAI,uBAAuB,EAAE,MAAM,oEAAoE,CAAC;AAC7I,OAAO,EAAE,2BAA2B,IAAI,sBAAsB,EAAE,MAAM,mEAAmE,CAAC;AAC1I,OAAO,EAAE,4BAA4B,IAAI,uBAAuB,EAAE,MAAM,oEAAoE,CAAC;AAC7I,OAAO,EAAE,+BAA+B,IAAI,0BAA0B,EAAE,MAAM,uEAAuE,CAAC;AACtJ,OAAO,EAAE,sBAAsB,IAAI,wBAAwB,EAAE,MAAM,4CAA4C,CAAC;AAEhH,OAAO,EAAE,wBAAwB,IAAI,UAAU,EAAE,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,6BAA6B,IAAI,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACtG,OAAO,EAAE,oBAAoB,IAAI,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,4BAA4B,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnG,OAAO,EAAE,uBAAuB,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC"}

package/lib/internal/template/internal/widget-exports.js

@@ -1,11 +1,18 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 export { PACKAGE_VERSION } from './environment';
+// Legacy widgetized parts
 export { AppLayoutDrawerImplementation as AppLayoutDrawer, AppLayoutGlobalDrawersImplementation as AppLayoutGlobalDrawers, } from '../app-layout/visual-refresh-toolbar/drawer';
 export { AppLayoutNavigationImplementation as AppLayoutNavigation } from '../app-layout/visual-refresh-toolbar/navigation';
 export { AppLayoutNotificationsImplementation as AppLayoutNotifications } from '../app-layout/visual-refresh-toolbar/notifications';
 export { AppLayoutSplitPanelDrawerBottomImplementation as AppLayoutSplitPanelBottom, AppLayoutSplitPanelDrawerSideImplementation as AppLayoutSplitPanelSide, } from '../app-layout/visual-refresh-toolbar/split-panel';
 export { AppLayoutToolbarImplementation as AppLayoutToolbar } from '../app-layout/visual-refresh-toolbar/toolbar';
+// Refactored widgetized parts
+export { BeforeMainSlotImplementation as AppLayoutBeforeMainSlot } from '../app-layout/visual-refresh-toolbar/widget-areas/before-main-slot';
+export { AfterMainSlotImplementation as AppLayoutAfterMainSlot } from '../app-layout/visual-refresh-toolbar/widget-areas/after-main-slot';
+export { TopContentSlotImplementation as AppLayoutTopContentSlot } from '../app-layout/visual-refresh-toolbar/widget-areas/top-content-slot';
+export { BottomContentSlotImplementation as AppLayoutBottomContentSlot } from '../app-layout/visual-refresh-toolbar/widget-areas/bottom-content-slot';
+export { AppLayoutStateProvider as AppLayoutWidgetizedState } from '../app-layout/visual-refresh-toolbar/state';
 export { SplitPanelImplementation as SplitPanel } from '../split-panel/implementation';
 export { BreadcrumbGroupImplementation as BreadcrumbGroup } from '../breadcrumb-group/implementation';
 export { DrawerImplementation as Drawer } from '../drawer/implementation';

package/lib/internal/template/internal/widget-exports.js.map

@@ -1 +1 @@
-{"version":3,"file":"widget-exports.js","sourceRoot":"","sources":["../../../src/internal/widget-exports.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EACL,6BAA6B,IAAI,eAAe,EAChD,oCAAoC,IAAI,sBAAsB,GAC/D,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAE,iCAAiC,IAAI,mBAAmB,EAAE,MAAM,iDAAiD,CAAC;AAC3H,OAAO,EAAE,oCAAoC,IAAI,sBAAsB,EAAE,MAAM,oDAAoD,CAAC;AACpI,OAAO,EACL,6CAA6C,IAAI,yBAAyB,EAC1E,2CAA2C,IAAI,uBAAuB,GACvE,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,8BAA8B,IAAI,gBAAgB,EAAE,MAAM,8CAA8C,CAAC;AAClH,OAAO,EAAE,wBAAwB,IAAI,UAAU,EAAE,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,6BAA6B,IAAI,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACtG,OAAO,EAAE,oBAAoB,IAAI,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,4BAA4B,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnG,OAAO,EAAE,uBAAuB,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nexport { PACKAGE_VERSION } from './environment';\nexport {\n  AppLayoutDrawerImplementation as AppLayoutDrawer,\n  AppLayoutGlobalDrawersImplementation as AppLayoutGlobalDrawers,\n} from '../app-layout/visual-refresh-toolbar/drawer';\nexport { AppLayoutNavigationImplementation as AppLayoutNavigation } from '../app-layout/visual-refresh-toolbar/navigation';\nexport { AppLayoutNotificationsImplementation as AppLayoutNotifications } from '../app-layout/visual-refresh-toolbar/notifications';\nexport {\n  AppLayoutSplitPanelDrawerBottomImplementation as AppLayoutSplitPanelBottom,\n  AppLayoutSplitPanelDrawerSideImplementation as AppLayoutSplitPanelSide,\n} from '../app-layout/visual-refresh-toolbar/split-panel';\nexport { AppLayoutToolbarImplementation as AppLayoutToolbar } from '../app-layout/visual-refresh-toolbar/toolbar';\nexport { SplitPanelImplementation as SplitPanel } from '../split-panel/implementation';\nexport { BreadcrumbGroupImplementation as BreadcrumbGroup } from '../breadcrumb-group/implementation';\nexport { DrawerImplementation as Drawer } from '../drawer/implementation';\nexport { SideNavigationImplementation as SideNavigation } from '../side-navigation/implementation';\nexport { HelpPanelImplementation as HelpPanel } from '../help-panel/implementation';\n"]}
+{"version":3,"file":"widget-exports.js","sourceRoot":"","sources":["../../../src/internal/widget-exports.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD,0BAA0B;AAC1B,OAAO,EACL,6BAA6B,IAAI,eAAe,EAChD,oCAAoC,IAAI,sBAAsB,GAC/D,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAE,iCAAiC,IAAI,mBAAmB,EAAE,MAAM,iDAAiD,CAAC;AAC3H,OAAO,EAAE,oCAAoC,IAAI,sBAAsB,EAAE,MAAM,oDAAoD,CAAC;AACpI,OAAO,EACL,6CAA6C,IAAI,yBAAyB,EAC1E,2CAA2C,IAAI,uBAAuB,GACvE,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,8BAA8B,IAAI,gBAAgB,EAAE,MAAM,8CAA8C,CAAC;AAElH,8BAA8B;AAC9B,OAAO,EAAE,4BAA4B,IAAI,uBAAuB,EAAE,MAAM,oEAAoE,CAAC;AAC7I,OAAO,EAAE,2BAA2B,IAAI,sBAAsB,EAAE,MAAM,mEAAmE,CAAC;AAC1I,OAAO,EAAE,4BAA4B,IAAI,uBAAuB,EAAE,MAAM,oEAAoE,CAAC;AAC7I,OAAO,EAAE,+BAA+B,IAAI,0BAA0B,EAAE,MAAM,uEAAuE,CAAC;AACtJ,OAAO,EAAE,sBAAsB,IAAI,wBAAwB,EAAE,MAAM,4CAA4C,CAAC;AAEhH,OAAO,EAAE,wBAAwB,IAAI,UAAU,EAAE,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,6BAA6B,IAAI,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACtG,OAAO,EAAE,oBAAoB,IAAI,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,4BAA4B,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnG,OAAO,EAAE,uBAAuB,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nexport { PACKAGE_VERSION } from './environment';\n\n// Legacy widgetized parts\nexport {\n  AppLayoutDrawerImplementation as AppLayoutDrawer,\n  AppLayoutGlobalDrawersImplementation as AppLayoutGlobalDrawers,\n} from '../app-layout/visual-refresh-toolbar/drawer';\nexport { AppLayoutNavigationImplementation as AppLayoutNavigation } from '../app-layout/visual-refresh-toolbar/navigation';\nexport { AppLayoutNotificationsImplementation as AppLayoutNotifications } from '../app-layout/visual-refresh-toolbar/notifications';\nexport {\n  AppLayoutSplitPanelDrawerBottomImplementation as AppLayoutSplitPanelBottom,\n  AppLayoutSplitPanelDrawerSideImplementation as AppLayoutSplitPanelSide,\n} from '../app-layout/visual-refresh-toolbar/split-panel';\nexport { AppLayoutToolbarImplementation as AppLayoutToolbar } from '../app-layout/visual-refresh-toolbar/toolbar';\n\n// Refactored widgetized parts\nexport { BeforeMainSlotImplementation as AppLayoutBeforeMainSlot } from '../app-layout/visual-refresh-toolbar/widget-areas/before-main-slot';\nexport { AfterMainSlotImplementation as AppLayoutAfterMainSlot } from '../app-layout/visual-refresh-toolbar/widget-areas/after-main-slot';\nexport { TopContentSlotImplementation as AppLayoutTopContentSlot } from '../app-layout/visual-refresh-toolbar/widget-areas/top-content-slot';\nexport { BottomContentSlotImplementation as AppLayoutBottomContentSlot } from '../app-layout/visual-refresh-toolbar/widget-areas/bottom-content-slot';\nexport { AppLayoutStateProvider as AppLayoutWidgetizedState } from '../app-layout/visual-refresh-toolbar/state';\n\nexport { SplitPanelImplementation as SplitPanel } from '../split-panel/implementation';\nexport { BreadcrumbGroupImplementation as BreadcrumbGroup } from '../breadcrumb-group/implementation';\nexport { DrawerImplementation as Drawer } from '../drawer/implementation';\nexport { SideNavigationImplementation as SideNavigation } from '../side-navigation/implementation';\nexport { HelpPanelImplementation as HelpPanel } from '../help-panel/implementation';\n"]}

package/lib/internal/template/internal/widgets/index.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-export type FunctionComponent<Props> = (props: Props) => JSX.Element;
-type PropsType<Component extends FunctionComponent<any>> = Component extends FunctionComponent<infer Props> ? Props : never;
+export type FunctionComponent<Props extends object> = (props: Props) => JSX.Element | null;
+export type PropsType<Component extends FunctionComponent<any>> = Component extends FunctionComponent<infer Props> ? Props : never;
 export declare function createWidgetizedComponent<Component extends FunctionComponent<any>>(Implementation: Component, Skeleton?: React.ForwardRefExoticComponent<PropsType<Component> & React.RefAttributes<HTMLElement>>): (Loader?: Component) => Component;
-export {};
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/internal/widgets/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/internal/widgets/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,MAAM,iBAAiB,CAAC,KAAK,IAAI,CAAC,KAAK,EAAE,KAAK,KAAK,GAAG,CAAC,OAAO,CAAC;AACrE,KAAK,SAAS,CAAC,SAAS,SAAS,iBAAiB,CAAC,GAAG,CAAC,IACrD,SAAS,SAAS,iBAAiB,CAAC,MAAM,KAAK,CAAC,GAAG,KAAK,GAAG,KAAK,CAAC;AAEnE,wBAAgB,yBAAyB,CAAC,SAAS,SAAS,iBAAiB,CAAC,GAAG,CAAC,EAChF,cAAc,EAAE,SAAS,EACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,yBAAyB,CAAC,SAAS,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,aAElF,SAAS,KAAG,SAAS,CAUvC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/internal/widgets/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,MAAM,IAAI,CAAC,KAAK,EAAE,KAAK,KAAK,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;AAC3F,MAAM,MAAM,SAAS,CAAC,SAAS,SAAS,iBAAiB,CAAC,GAAG,CAAC,IAC5D,SAAS,SAAS,iBAAiB,CAAC,MAAM,KAAK,CAAC,GAAG,KAAK,GAAG,KAAK,CAAC;AAEnE,wBAAgB,yBAAyB,CAAC,SAAS,SAAS,iBAAiB,CAAC,GAAG,CAAC,EAChF,cAAc,EAAE,SAAS,EACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,yBAAyB,CAAC,SAAS,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,aAElF,SAAS,KAAG,SAAS,CAUvC"}

package/lib/internal/template/internal/widgets/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/internal/widgets/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,aAAa,EAAE,MAAM,+CAA+C,CAAC;AAE9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAO5D,MAAM,UAAU,yBAAyB,CACvC,cAAyB,EACzB,QAAmG;IAEnG,OAAO,CAAC,MAAkB,EAAa,EAAE;QACvC,OAAO,CAAC,KAAK,CAAC,EAAE;YACd,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;YACrC,IAAI,SAAS,IAAI,aAAa,CAAC,iBAAiB,CAAC,IAAI,MAAM,EAAE;gBAC3D,OAAO,oBAAC,MAAM,kBAAC,QAAQ,EAAE,QAAQ,IAAO,KAAa,EAAI,CAAC;aAC3D;YAED,OAAO,oBAAC,cAAc,oBAAM,KAAa,EAAI,CAAC;QAChD,CAAC,CAAc,CAAC;IAClB,CAAC,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { getGlobalFlag } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useVisualRefresh } from '../hooks/use-visual-mode';\n\n// Built-in React.FunctionComponent has always present `children` property which is not desired\nexport type FunctionComponent<Props> = (props: Props) => JSX.Element;\ntype PropsType<Component extends FunctionComponent<any>> =\n  Component extends FunctionComponent<infer Props> ? Props : never;\n\nexport function createWidgetizedComponent<Component extends FunctionComponent<any>>(\n  Implementation: Component,\n  Skeleton?: React.ForwardRefExoticComponent<PropsType<Component> & React.RefAttributes<HTMLElement>>\n) {\n  return (Loader?: Component): Component => {\n    return (props => {\n      const isRefresh = useVisualRefresh();\n      if (isRefresh && getGlobalFlag('appLayoutWidget') && Loader) {\n        return <Loader Skeleton={Skeleton} {...(props as any)} />;\n      }\n\n      return <Implementation {...(props as any)} />;\n    }) as Component;\n  };\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/internal/widgets/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,aAAa,EAAE,MAAM,+CAA+C,CAAC;AAE9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAO5D,MAAM,UAAU,yBAAyB,CACvC,cAAyB,EACzB,QAAmG;IAEnG,OAAO,CAAC,MAAkB,EAAa,EAAE;QACvC,OAAO,CAAC,KAAK,CAAC,EAAE;YACd,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;YACrC,IAAI,SAAS,IAAI,aAAa,CAAC,iBAAiB,CAAC,IAAI,MAAM,EAAE;gBAC3D,OAAO,oBAAC,MAAM,kBAAC,QAAQ,EAAE,QAAQ,IAAO,KAAa,EAAI,CAAC;aAC3D;YAED,OAAO,oBAAC,cAAc,oBAAM,KAAa,EAAI,CAAC;QAChD,CAAC,CAAc,CAAC;IAClB,CAAC,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { getGlobalFlag } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useVisualRefresh } from '../hooks/use-visual-mode';\n\n// Built-in React.FunctionComponent has always present `children` property which is not desired\nexport type FunctionComponent<Props extends object> = (props: Props) => JSX.Element | null;\nexport type PropsType<Component extends FunctionComponent<any>> =\n  Component extends FunctionComponent<infer Props> ? Props : never;\n\nexport function createWidgetizedComponent<Component extends FunctionComponent<any>>(\n  Implementation: Component,\n  Skeleton?: React.ForwardRefExoticComponent<PropsType<Component> & React.RefAttributes<HTMLElement>>\n) {\n  return (Loader?: Component): Component => {\n    return (props => {\n      const isRefresh = useVisualRefresh();\n      if (isRefresh && getGlobalFlag('appLayoutWidget') && Loader) {\n        return <Loader Skeleton={Skeleton} {...(props as any)} />;\n      }\n\n      return <Implementation {...(props as any)} />;\n    }) as Component;\n  };\n}\n"]}

package/lib/internal/template/internal/widgets/loader-mock.d.ts

@@ -0,0 +1,3 @@
+import { FunctionComponent } from './index';
+export declare function createLoadableComponent<ComponentType extends FunctionComponent<any>>(Component: ComponentType): ComponentType | undefined;
+//# sourceMappingURL=loader-mock.d.ts.map

package/lib/internal/template/internal/widgets/loader-mock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader-mock.d.ts","sourceRoot":"","sources":["../../../../src/internal/widgets/loader-mock.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAa,MAAM,SAAS,CAAC;AAgBvD,wBAAgB,uBAAuB,CAAC,aAAa,SAAS,iBAAiB,CAAC,GAAG,CAAC,EAClF,SAAS,EAAE,aAAa,GACvB,aAAa,GAAG,SAAS,CA8B3B"}

package/lib/internal/template/internal/widgets/loader-mock.js

@@ -0,0 +1,43 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect, useState } from 'react';
+const getCustomFlag = (flagName) => {
+    var _a;
+    const flagHolder = typeof window !== 'undefined' ? window : globalThis;
+    const awsuiCustomFlagsSymbol = Symbol.for('awsui-custom-flags');
+    return (_a = flagHolder === null || flagHolder === void 0 ? void 0 : flagHolder[awsuiCustomFlagsSymbol]) === null || _a === void 0 ? void 0 : _a[flagName];
+};
+const isAppLayoutDelayedWidget = () => {
+    return !!getCustomFlag('appLayoutDelayedWidget');
+};
+const enableDelayedComponents = isAppLayoutDelayedWidget();
+let loadPromise;
+export function createLoadableComponent(Component) {
+    if (!enableDelayedComponents) {
+        return;
+    }
+    return ((props) => {
+        const [mounted, setMounted] = useState(false);
+        useEffect(() => {
+            if (!loadPromise) {
+                loadPromise = new Promise(resolve => setTimeout(() => resolve(), 1000));
+            }
+            let mounted = true;
+            loadPromise.then(() => {
+                if (mounted) {
+                    setMounted(true);
+                }
+            });
+            return () => {
+                mounted = false;
+            };
+        }, []);
+        if (mounted) {
+            return React.createElement(Component, Object.assign({}, props));
+        }
+        // this prop is injected in `createWidgetizedComponent` and is not a part of the component signature
+        const { Skeleton } = props;
+        return Skeleton ? React.createElement(Skeleton, Object.assign({}, props)) : React.createElement("div", null);
+    });
+}
+//# sourceMappingURL=loader-mock.js.map

package/lib/internal/template/internal/widgets/loader-mock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader-mock.js","sourceRoot":"","sources":["../../../../src/internal/widgets/loader-mock.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAInD,MAAM,aAAa,GAAG,CAAC,QAAgB,EAAE,EAAE;;IACzC,MAAM,UAAU,GAAQ,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC;IAC5E,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;IAChE,OAAO,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,sBAA6B,CAAC,0CAAG,QAAe,CAAC,CAAC;AACxE,CAAC,CAAC;AAEF,MAAM,wBAAwB,GAAG,GAAG,EAAE;IACpC,OAAO,CAAC,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;AACnD,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG,wBAAwB,EAAE,CAAC;AAE3D,IAAI,WAA0B,CAAC;AAE/B,MAAM,UAAU,uBAAuB,CACrC,SAAwB;IAExB,IAAI,CAAC,uBAAuB,EAAE;QAC5B,OAAO;KACR;IACD,OAAO,CAAC,CAAC,KAA+B,EAAE,EAAE;QAC1C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QAE9C,SAAS,CAAC,GAAG,EAAE;YACb,IAAI,CAAC,WAAW,EAAE;gBAChB,WAAW,GAAG,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC;aACzE;YACD,IAAI,OAAO,GAAG,IAAI,CAAC;YACnB,WAAW,CAAC,IAAI,CAAC,GAAG,EAAE;gBACpB,IAAI,OAAO,EAAE;oBACX,UAAU,CAAC,IAAI,CAAC,CAAC;iBAClB;YACH,CAAC,CAAC,CAAC;YACH,OAAO,GAAG,EAAE;gBACV,OAAO,GAAG,KAAK,CAAC;YAClB,CAAC,CAAC;QACJ,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,IAAI,OAAO,EAAE;YACX,OAAO,oBAAC,SAAS,oBAAK,KAAK,EAAI,CAAC;SACjC;QACD,oGAAoG;QACpG,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAY,CAAC;QAElC,OAAO,QAAQ,CAAC,CAAC,CAAC,oBAAC,QAAQ,oBAAK,KAAK,EAAI,CAAC,CAAC,CAAC,gCAAO,CAAC;IACtD,CAAC,CAAkB,CAAC;AACtB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useState } from 'react';\n\nimport { FunctionComponent, PropsType } from './index';\n\nconst getCustomFlag = (flagName: string) => {\n  const flagHolder: any = typeof window !== 'undefined' ? window : globalThis;\n  const awsuiCustomFlagsSymbol = Symbol.for('awsui-custom-flags');\n  return flagHolder?.[awsuiCustomFlagsSymbol as any]?.[flagName as any];\n};\n\nconst isAppLayoutDelayedWidget = () => {\n  return !!getCustomFlag('appLayoutDelayedWidget');\n};\n\nconst enableDelayedComponents = isAppLayoutDelayedWidget();\n\nlet loadPromise: Promise<void>;\n\nexport function createLoadableComponent<ComponentType extends FunctionComponent<any>>(\n  Component: ComponentType\n): ComponentType | undefined {\n  if (!enableDelayedComponents) {\n    return;\n  }\n  return ((props: PropsType<ComponentType>) => {\n    const [mounted, setMounted] = useState(false);\n\n    useEffect(() => {\n      if (!loadPromise) {\n        loadPromise = new Promise(resolve => setTimeout(() => resolve(), 1000));\n      }\n      let mounted = true;\n      loadPromise.then(() => {\n        if (mounted) {\n          setMounted(true);\n        }\n      });\n      return () => {\n        mounted = false;\n      };\n    }, []);\n\n    if (mounted) {\n      return <Component {...props} />;\n    }\n    // this prop is injected in `createWidgetizedComponent` and is not a part of the component signature\n    const { Skeleton } = props as any;\n\n    return Skeleton ? <Skeleton {...props} /> : <div />;\n  }) as ComponentType;\n}\n"]}

package/lib/internal/template/split-panel/styles.css.js

@@ -1,32 +1,32 @@
 
     import './styles.scoped.css';
     export default {
-  "drawer": "awsui_drawer_1r9lg_100o3_153",
-  "drawer-closed": "awsui_drawer-closed_1r9lg_100o3_190",
-  "refresh": "awsui_refresh_1r9lg_100o3_190",
-  "drawer-content-side": "awsui_drawer-content-side_1r9lg_100o3_195",
-  "drawer-content-bottom": "awsui_drawer-content-bottom_1r9lg_100o3_211",
-  "position-bottom": "awsui_position-bottom_1r9lg_100o3_218",
-  "hidden": "awsui_hidden_1r9lg_100o3_226",
-  "position-side": "awsui_position-side_1r9lg_100o3_247",
-  "with-toolbar": "awsui_with-toolbar_1r9lg_100o3_252",
-  "slider-wrapper-bottom": "awsui_slider-wrapper-bottom_1r9lg_100o3_256",
-  "slider-wrapper-side": "awsui_slider-wrapper-side_1r9lg_100o3_267",
-  "open-button-side": "awsui_open-button-side_1r9lg_100o3_281",
-  "pane-header-wrapper-bottom": "awsui_pane-header-wrapper-bottom_1r9lg_100o3_290",
-  "drawer-mobile": "awsui_drawer-mobile_1r9lg_100o3_300",
-  "drawer-disable-content-paddings": "awsui_drawer-disable-content-paddings_1r9lg_100o3_304",
-  "content-bottom": "awsui_content-bottom_1r9lg_100o3_316",
-  "pane-bottom-center-align": "awsui_pane-bottom-center-align_1r9lg_100o3_335",
-  "pane-bottom-content-nav-padding": "awsui_pane-bottom-content-nav-padding_1r9lg_100o3_340",
-  "pane-bottom-content-tools-padding": "awsui_pane-bottom-content-tools-padding_1r9lg_100o3_344",
-  "content-bottom-max-width": "awsui_content-bottom-max-width_1r9lg_100o3_348",
-  "content-side": "awsui_content-side_1r9lg_100o3_353",
-  "pane-header-wrapper-side": "awsui_pane-header-wrapper-side_1r9lg_100o3_365",
-  "pane-content-wrapper-side": "awsui_pane-content-wrapper-side_1r9lg_100o3_374",
-  "header": "awsui_header_1r9lg_100o3_385",
-  "header-text": "awsui_header-text_1r9lg_100o3_398",
-  "header-actions": "awsui_header-actions_1r9lg_100o3_412",
-  "divider": "awsui_divider_1r9lg_100o3_420"
+  "drawer": "awsui_drawer_1r9lg_7nc4m_153",
+  "drawer-closed": "awsui_drawer-closed_1r9lg_7nc4m_190",
+  "refresh": "awsui_refresh_1r9lg_7nc4m_193",
+  "drawer-content-side": "awsui_drawer-content-side_1r9lg_7nc4m_197",
+  "drawer-content-bottom": "awsui_drawer-content-bottom_1r9lg_7nc4m_213",
+  "position-bottom": "awsui_position-bottom_1r9lg_7nc4m_220",
+  "hidden": "awsui_hidden_1r9lg_7nc4m_228",
+  "position-side": "awsui_position-side_1r9lg_7nc4m_249",
+  "with-toolbar": "awsui_with-toolbar_1r9lg_7nc4m_254",
+  "slider-wrapper-bottom": "awsui_slider-wrapper-bottom_1r9lg_7nc4m_258",
+  "slider-wrapper-side": "awsui_slider-wrapper-side_1r9lg_7nc4m_269",
+  "open-button-side": "awsui_open-button-side_1r9lg_7nc4m_283",
+  "pane-header-wrapper-bottom": "awsui_pane-header-wrapper-bottom_1r9lg_7nc4m_292",
+  "drawer-mobile": "awsui_drawer-mobile_1r9lg_7nc4m_302",
+  "drawer-disable-content-paddings": "awsui_drawer-disable-content-paddings_1r9lg_7nc4m_306",
+  "content-bottom": "awsui_content-bottom_1r9lg_7nc4m_318",
+  "pane-bottom-center-align": "awsui_pane-bottom-center-align_1r9lg_7nc4m_337",
+  "pane-bottom-content-nav-padding": "awsui_pane-bottom-content-nav-padding_1r9lg_7nc4m_342",
+  "pane-bottom-content-tools-padding": "awsui_pane-bottom-content-tools-padding_1r9lg_7nc4m_346",
+  "content-bottom-max-width": "awsui_content-bottom-max-width_1r9lg_7nc4m_350",
+  "content-side": "awsui_content-side_1r9lg_7nc4m_355",
+  "pane-header-wrapper-side": "awsui_pane-header-wrapper-side_1r9lg_7nc4m_367",
+  "pane-content-wrapper-side": "awsui_pane-content-wrapper-side_1r9lg_7nc4m_376",
+  "header": "awsui_header_1r9lg_7nc4m_387",
+  "header-text": "awsui_header-text_1r9lg_7nc4m_400",
+  "header-actions": "awsui_header-actions_1r9lg_7nc4m_414",
+  "divider": "awsui_divider_1r9lg_7nc4m_422"
 };