@cloudscape-design/components-themeable 3.0.386 → 3.0.388

package/lib/internal/template/app-layout/utils/use-drawers.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-drawers.js","sourceRoot":"lib/default/","sources":["app-layout/utils/use-drawers.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useState } from 'react';\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\nimport { InternalDrawerProps } from '../drawer/interfaces';\nimport { AppLayoutState } from '../defaults';\nimport { useMobile } from '../../internal/hooks/use-mobile';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { fireNonCancelableEvent } from '../../internal/events';\nimport { awsuiPluginsInternal } from '../../internal/plugins/api';\nimport { convertRuntimeDrawers, DrawersLayout } from '../runtime-api';\nimport { AppLayoutProps } from '../interfaces';\nimport { togglesConfig } from '../toggles';\n\nexport const TOOLS_DRAWER_ID = 'awsui-internal-tools';\n\ninterface ToolsProps {\n  toolsHide: boolean | undefined;\n  toolsOpen: boolean | undefined;\n  toolsWidth: number;\n  tools: React.ReactNode | undefined;\n  ariaLabels: AppLayoutProps.Labels | undefined;\n}\n\nfunction getToolsDrawerItem(props: ToolsProps) {\n  // TODO: remove props.tools check, because it is incompatible with no-drawers behavior\n  if (props.toolsHide || !props.tools) {\n    return null;\n  }\n  const { iconName, getLabels } = togglesConfig.tools;\n  const { mainLabel, closeLabel, openLabel } = getLabels(props.ariaLabels);\n  return {\n    id: TOOLS_DRAWER_ID,\n    content: props.tools,\n    resizable: false,\n    ariaLabels: {\n      triggerButton: openLabel,\n      closeButton: closeLabel,\n      content: mainLabel,\n    },\n    trigger: {\n      iconName: iconName,\n    },\n  };\n}\n\nfunction useRuntimeDrawers(\n  disableRuntimeDrawers: boolean | undefined,\n  onActiveDrawerChange: (id: string | undefined) => void\n) {\n  const [runtimeDrawers, setRuntimeDrawers] = useState<DrawersLayout>({ before: [], after: [] });\n\n  useEffect(() => {\n    if (disableRuntimeDrawers) {\n      return;\n    }\n    const unsubscribe = awsuiPluginsInternal.appLayout.onDrawersRegistered(drawers => {\n      setRuntimeDrawers(convertRuntimeDrawers(drawers));\n    });\n    return () => {\n      unsubscribe();\n      setRuntimeDrawers({ before: [], after: [] });\n    };\n  }, [disableRuntimeDrawers, onActiveDrawerChange]);\n\n  return runtimeDrawers;\n}\n\nexport function useDrawers(\n  {\n    drawers: ownDrawers,\n    __disableRuntimeDrawers: disableRuntimeDrawers,\n  }: InternalDrawerProps & { __disableRuntimeDrawers?: boolean },\n  toolsProps: ToolsProps,\n  defaults: AppLayoutState\n) {\n  const isMobile = useMobile();\n  const toolsDrawer = getToolsDrawerItem(toolsProps);\n\n  const [activeDrawerId, setActiveDrawerId] = useControllable(\n    ownDrawers?.activeDrawerId,\n    ownDrawers?.onChange,\n    !isMobile && !toolsProps.toolsHide && toolsProps.toolsOpen && defaults.toolsOpen ? TOOLS_DRAWER_ID : undefined,\n    {\n      componentName: 'AppLayout',\n      controlledProp: 'activeDrawerId',\n      changeHandler: 'onChange',\n    }\n  );\n  const [drawerSizes, setDrawerSizes] = useState<Record<string, number>>({});\n\n  const onActiveDrawerChange = useStableCallback((newDrawerId: string | undefined) => {\n    setActiveDrawerId(newDrawerId);\n    fireNonCancelableEvent(ownDrawers?.onChange, newDrawerId);\n  });\n\n  const runtimeDrawers = useRuntimeDrawers(disableRuntimeDrawers, onActiveDrawerChange);\n  const combinedDrawers = [...runtimeDrawers.before, ...(ownDrawers?.items ?? []), ...runtimeDrawers.after];\n  if (toolsDrawer && combinedDrawers.length > 0) {\n    combinedDrawers.unshift(toolsDrawer);\n  }\n  const activeDrawer = combinedDrawers.find(drawer => drawer.id === activeDrawerId);\n  const activeDrawerIdResolved = activeDrawer?.id; // only defined when corresponding drawer exists\n\n  function onActiveDrawerResize({ id, size }: { id: string; size: number }) {\n    setDrawerSizes(oldSizes => ({ ...oldSizes, [id]: size }));\n    fireNonCancelableEvent(ownDrawers?.onResize, { id, size });\n  }\n\n  return {\n    ariaLabel: ownDrawers?.ariaLabel,\n    overflowAriaLabel: ownDrawers?.overflowAriaLabel,\n    drawers: combinedDrawers,\n    activeDrawer,\n    activeDrawerId: activeDrawerIdResolved,\n    activeDrawerSize: activeDrawerIdResolved\n      ? drawerSizes[activeDrawerIdResolved] ?? activeDrawer?.defaultSize ?? toolsProps.toolsWidth\n      : toolsProps.toolsWidth,\n    onActiveDrawerChange,\n    onActiveDrawerResize,\n  };\n}\n"]}
+{"version":3,"file":"use-drawers.js","sourceRoot":"lib/default/","sources":["app-layout/utils/use-drawers.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\nimport { InternalDrawerProps } from '../drawer/interfaces';\nimport { AppLayoutState } from '../defaults';\nimport { useMobile } from '../../internal/hooks/use-mobile';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { fireNonCancelableEvent } from '../../internal/events';\nimport { awsuiPluginsInternal } from '../../internal/plugins/api';\nimport { sortByPriority } from '../../internal/plugins/helpers/utils';\nimport { convertRuntimeDrawers, DrawersLayout } from '../runtime-api';\nimport { AppLayoutProps } from '../interfaces';\nimport { togglesConfig } from '../toggles';\n\nexport const TOOLS_DRAWER_ID = 'awsui-internal-tools';\n\ninterface ToolsProps {\n  toolsHide: boolean | undefined;\n  toolsOpen: boolean | undefined;\n  toolsWidth: number;\n  tools: React.ReactNode | undefined;\n  ariaLabels: AppLayoutProps.Labels | undefined;\n}\n\nfunction getToolsDrawerItem(props: ToolsProps) {\n  // TODO: remove props.tools check, because it is incompatible with no-drawers behavior\n  if (props.toolsHide || !props.tools) {\n    return null;\n  }\n  const { iconName, getLabels } = togglesConfig.tools;\n  const { mainLabel, closeLabel, openLabel } = getLabels(props.ariaLabels);\n  return {\n    id: TOOLS_DRAWER_ID,\n    content: props.tools,\n    resizable: false,\n    ariaLabels: {\n      triggerButton: openLabel,\n      closeButton: closeLabel,\n      content: mainLabel,\n    },\n    trigger: {\n      iconName: iconName,\n    },\n  };\n}\n\nfunction useRuntimeDrawers(\n  disableRuntimeDrawers: boolean | undefined,\n  activeDrawerId: string | undefined,\n  onActiveDrawerChange: (id: string | undefined) => void\n) {\n  const [runtimeDrawers, setRuntimeDrawers] = useState<DrawersLayout>({ before: [], after: [] });\n\n  const drawerWasOpenRef = useRef(false);\n  drawerWasOpenRef.current = drawerWasOpenRef.current || !!activeDrawerId;\n\n  useEffect(() => {\n    if (disableRuntimeDrawers) {\n      return;\n    }\n    const unsubscribe = awsuiPluginsInternal.appLayout.onDrawersRegistered(drawers => {\n      setRuntimeDrawers(convertRuntimeDrawers(drawers));\n      if (!drawerWasOpenRef.current) {\n        const defaultActiveDrawer = sortByPriority(drawers).find(drawer => drawer.defaultActive);\n        if (defaultActiveDrawer) {\n          onActiveDrawerChange(defaultActiveDrawer.id);\n        }\n      }\n    });\n    return () => {\n      unsubscribe();\n      setRuntimeDrawers({ before: [], after: [] });\n    };\n  }, [disableRuntimeDrawers, onActiveDrawerChange]);\n\n  return runtimeDrawers;\n}\n\nexport function useDrawers(\n  {\n    drawers: ownDrawers,\n    __disableRuntimeDrawers: disableRuntimeDrawers,\n  }: InternalDrawerProps & { __disableRuntimeDrawers?: boolean },\n  toolsProps: ToolsProps,\n  defaults: AppLayoutState\n) {\n  const isMobile = useMobile();\n  const toolsDrawer = getToolsDrawerItem(toolsProps);\n\n  const [activeDrawerId, setActiveDrawerId] = useControllable(\n    ownDrawers?.activeDrawerId,\n    ownDrawers?.onChange,\n    !isMobile && !toolsProps.toolsHide && toolsProps.toolsOpen && defaults.toolsOpen ? TOOLS_DRAWER_ID : undefined,\n    {\n      componentName: 'AppLayout',\n      controlledProp: 'activeDrawerId',\n      changeHandler: 'onChange',\n    }\n  );\n  const [drawerSizes, setDrawerSizes] = useState<Record<string, number>>({});\n\n  const onActiveDrawerChange = useStableCallback((newDrawerId: string | undefined) => {\n    setActiveDrawerId(newDrawerId);\n    fireNonCancelableEvent(ownDrawers?.onChange, newDrawerId);\n  });\n\n  const runtimeDrawers = useRuntimeDrawers(disableRuntimeDrawers, activeDrawerId, onActiveDrawerChange);\n  const combinedDrawers = [...runtimeDrawers.before, ...(ownDrawers?.items ?? []), ...runtimeDrawers.after];\n  if (toolsDrawer && combinedDrawers.length > 0) {\n    combinedDrawers.unshift(toolsDrawer);\n  }\n  const activeDrawer = combinedDrawers.find(drawer => drawer.id === activeDrawerId);\n  const activeDrawerIdResolved = activeDrawer?.id; // only defined when corresponding drawer exists\n\n  function onActiveDrawerResize({ id, size }: { id: string; size: number }) {\n    setDrawerSizes(oldSizes => ({ ...oldSizes, [id]: size }));\n    fireNonCancelableEvent(ownDrawers?.onResize, { id, size });\n  }\n\n  return {\n    ariaLabel: ownDrawers?.ariaLabel,\n    overflowAriaLabel: ownDrawers?.overflowAriaLabel,\n    drawers: combinedDrawers,\n    activeDrawer,\n    activeDrawerId: activeDrawerIdResolved,\n    activeDrawerSize: activeDrawerIdResolved\n      ? drawerSizes[activeDrawerIdResolved] ?? activeDrawer?.defaultSize ?? toolsProps.toolsWidth\n      : toolsProps.toolsWidth,\n    onActiveDrawerChange,\n    onActiveDrawerResize,\n  };\n}\n"]}

package/lib/internal/template/app-layout/visual-refresh/styles.css.js

@@ -1,80 +1,80 @@
 
     import './styles.scoped.css';
     export default {
-  "background": "awsui_background_hyvsj_l9hp2_93",
-  "scrolling-background": "awsui_scrolling-background_hyvsj_l9hp2_96",
-  "sticky-background": "awsui_sticky-background_hyvsj_l9hp2_102",
-  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_l9hp2_110",
-  "breadcrumbs": "awsui_breadcrumbs_hyvsj_l9hp2_123",
-  "has-sticky-background": "awsui_has-sticky-background_hyvsj_l9hp2_133",
-  "drawers-container": "awsui_drawers-container_hyvsj_l9hp2_145",
-  "has-open-drawer": "awsui_has-open-drawer_hyvsj_l9hp2_157",
-  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_l9hp2_191",
-  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_l9hp2_196",
-  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_l9hp2_215",
-  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_hyvsj_l9hp2_247",
-  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_l9hp2_251",
-  "drawers-trigger-overflow": "awsui_drawers-trigger-overflow_hyvsj_l9hp2_277",
-  "drawers-trigger": "awsui_drawers-trigger_hyvsj_l9hp2_251",
-  "drawer": "awsui_drawer_hyvsj_l9hp2_145",
-  "drawer-close-button": "awsui_drawer-close-button_hyvsj_l9hp2_308",
-  "drawer-content": "awsui_drawer-content_hyvsj_l9hp2_313",
-  "drawer-slider": "awsui_drawer-slider_hyvsj_l9hp2_318",
-  "is-drawer-open": "awsui_is-drawer-open_hyvsj_l9hp2_325",
-  "content": "awsui_content_hyvsj_l9hp2_350",
-  "layout": "awsui_layout_hyvsj_l9hp2_371",
-  "has-max-content-width": "awsui_has-max-content-width_hyvsj_l9hp2_454",
-  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_l9hp2_469",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_l9hp2_486",
-  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_l9hp2_518",
-  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_l9hp2_521",
-  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_l9hp2_531",
-  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_l9hp2_534",
-  "content-first-child-header": "awsui_content-first-child-header_hyvsj_l9hp2_537",
-  "has-header": "awsui_has-header_hyvsj_l9hp2_537",
-  "content-first-child-main": "awsui_content-first-child-main_hyvsj_l9hp2_558",
-  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_l9hp2_558",
-  "has-split-panel": "awsui_has-split-panel_hyvsj_l9hp2_601",
-  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_l9hp2_601",
-  "block-body-scroll": "awsui_block-body-scroll_hyvsj_l9hp2_617",
-  "unfocusable": "awsui_unfocusable_hyvsj_l9hp2_622",
-  "container": "awsui_container_hyvsj_l9hp2_632",
-  "is-navigation-open": "awsui_is-navigation-open_hyvsj_l9hp2_657",
-  "is-tools-open": "awsui_is-tools-open_hyvsj_l9hp2_660",
-  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_l9hp2_660",
-  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_l9hp2_660",
-  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_l9hp2_669",
-  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_l9hp2_685",
-  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_l9hp2_689",
-  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_l9hp2_693",
-  "navigation-container": "awsui_navigation-container_hyvsj_l9hp2_702",
-  "show-navigation": "awsui_show-navigation_hyvsj_l9hp2_746",
-  "animating": "awsui_animating_hyvsj_l9hp2_768",
-  "showButtons": "awsui_showButtons_hyvsj_l9hp2_1",
-  "navigation": "awsui_navigation_hyvsj_l9hp2_702",
-  "openNavigation": "awsui_openNavigation_hyvsj_l9hp2_1",
-  "animated-content": "awsui_animated-content_hyvsj_l9hp2_830",
-  "hide-navigation": "awsui_hide-navigation_hyvsj_l9hp2_839",
-  "notifications": "awsui_notifications_hyvsj_l9hp2_849",
-  "sticky-notifications": "awsui_sticky-notifications_hyvsj_l9hp2_855",
-  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_l9hp2_872",
-  "position-bottom": "awsui_position-bottom_hyvsj_l9hp2_919",
-  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_l9hp2_1",
-  "split-panel-side": "awsui_split-panel-side_hyvsj_l9hp2_948",
-  "position-side": "awsui_position-side_hyvsj_l9hp2_976",
-  "openSplitPanelSide": "awsui_openSplitPanelSide_hyvsj_l9hp2_1",
-  "tools-container": "awsui_tools-container_hyvsj_l9hp2_1013",
-  "tools": "awsui_tools_hyvsj_l9hp2_1013",
-  "openTools": "awsui_openTools_hyvsj_l9hp2_1",
-  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_l9hp2_1108",
-  "hide-tools": "awsui_hide-tools_hyvsj_l9hp2_1118",
-  "show-tools": "awsui_show-tools_hyvsj_l9hp2_1130",
-  "has-tools-form": "awsui_has-tools-form_hyvsj_l9hp2_1108",
-  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_hyvsj_l9hp2_1192",
-  "trigger": "awsui_trigger_hyvsj_l9hp2_1192",
-  "selected": "awsui_selected_hyvsj_l9hp2_1256",
-  "badge": "awsui_badge_hyvsj_l9hp2_1276",
-  "trigger-wrapper": "awsui_trigger-wrapper_hyvsj_l9hp2_1280",
-  "dot": "awsui_dot_hyvsj_l9hp2_1286"
+  "background": "awsui_background_hyvsj_16jtg_93",
+  "scrolling-background": "awsui_scrolling-background_hyvsj_16jtg_96",
+  "sticky-background": "awsui_sticky-background_hyvsj_16jtg_102",
+  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_16jtg_110",
+  "breadcrumbs": "awsui_breadcrumbs_hyvsj_16jtg_123",
+  "has-sticky-background": "awsui_has-sticky-background_hyvsj_16jtg_133",
+  "drawers-container": "awsui_drawers-container_hyvsj_16jtg_145",
+  "has-open-drawer": "awsui_has-open-drawer_hyvsj_16jtg_157",
+  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_16jtg_191",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_16jtg_196",
+  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_16jtg_215",
+  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_hyvsj_16jtg_247",
+  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_16jtg_251",
+  "drawers-trigger-overflow": "awsui_drawers-trigger-overflow_hyvsj_16jtg_277",
+  "drawers-trigger": "awsui_drawers-trigger_hyvsj_16jtg_251",
+  "drawer": "awsui_drawer_hyvsj_16jtg_145",
+  "drawer-close-button": "awsui_drawer-close-button_hyvsj_16jtg_308",
+  "drawer-content": "awsui_drawer-content_hyvsj_16jtg_313",
+  "drawer-slider": "awsui_drawer-slider_hyvsj_16jtg_318",
+  "is-drawer-open": "awsui_is-drawer-open_hyvsj_16jtg_325",
+  "content": "awsui_content_hyvsj_16jtg_350",
+  "layout": "awsui_layout_hyvsj_16jtg_371",
+  "has-max-content-width": "awsui_has-max-content-width_hyvsj_16jtg_454",
+  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_16jtg_469",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_16jtg_486",
+  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_16jtg_518",
+  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_16jtg_521",
+  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_16jtg_531",
+  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_16jtg_534",
+  "content-first-child-header": "awsui_content-first-child-header_hyvsj_16jtg_537",
+  "has-header": "awsui_has-header_hyvsj_16jtg_537",
+  "content-first-child-main": "awsui_content-first-child-main_hyvsj_16jtg_558",
+  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_16jtg_558",
+  "has-split-panel": "awsui_has-split-panel_hyvsj_16jtg_601",
+  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_16jtg_601",
+  "block-body-scroll": "awsui_block-body-scroll_hyvsj_16jtg_617",
+  "unfocusable": "awsui_unfocusable_hyvsj_16jtg_622",
+  "container": "awsui_container_hyvsj_16jtg_632",
+  "is-navigation-open": "awsui_is-navigation-open_hyvsj_16jtg_657",
+  "is-tools-open": "awsui_is-tools-open_hyvsj_16jtg_660",
+  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_16jtg_660",
+  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_16jtg_660",
+  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_16jtg_669",
+  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_16jtg_685",
+  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_16jtg_689",
+  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_16jtg_693",
+  "navigation-container": "awsui_navigation-container_hyvsj_16jtg_702",
+  "show-navigation": "awsui_show-navigation_hyvsj_16jtg_746",
+  "animating": "awsui_animating_hyvsj_16jtg_768",
+  "showButtons": "awsui_showButtons_hyvsj_16jtg_1",
+  "navigation": "awsui_navigation_hyvsj_16jtg_702",
+  "openNavigation": "awsui_openNavigation_hyvsj_16jtg_1",
+  "animated-content": "awsui_animated-content_hyvsj_16jtg_830",
+  "hide-navigation": "awsui_hide-navigation_hyvsj_16jtg_839",
+  "notifications": "awsui_notifications_hyvsj_16jtg_849",
+  "sticky-notifications": "awsui_sticky-notifications_hyvsj_16jtg_855",
+  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_16jtg_872",
+  "position-bottom": "awsui_position-bottom_hyvsj_16jtg_919",
+  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_16jtg_1",
+  "split-panel-side": "awsui_split-panel-side_hyvsj_16jtg_948",
+  "position-side": "awsui_position-side_hyvsj_16jtg_976",
+  "openSplitPanelSide": "awsui_openSplitPanelSide_hyvsj_16jtg_1",
+  "tools-container": "awsui_tools-container_hyvsj_16jtg_1013",
+  "tools": "awsui_tools_hyvsj_16jtg_1013",
+  "openTools": "awsui_openTools_hyvsj_16jtg_1",
+  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_16jtg_1108",
+  "hide-tools": "awsui_hide-tools_hyvsj_16jtg_1118",
+  "show-tools": "awsui_show-tools_hyvsj_16jtg_1130",
+  "has-tools-form": "awsui_has-tools-form_hyvsj_16jtg_1108",
+  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_hyvsj_16jtg_1192",
+  "trigger": "awsui_trigger_hyvsj_16jtg_1192",
+  "selected": "awsui_selected_hyvsj_16jtg_1256",
+  "badge": "awsui_badge_hyvsj_16jtg_1276",
+  "trigger-wrapper": "awsui_trigger-wrapper_hyvsj_16jtg_1280",
+  "dot": "awsui_dot_hyvsj_16jtg_1286"
 };