@cloudscape-design/components 3.0.135 → 3.0.136

package/top-navigation/parts/overflow-menu/menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../../../../src/top-navigation/parts/overflow-menu/menu-item.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, { forwardRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { fireCancelableEvent, isPlainLeftClick } from '../../../internal/events';\nimport { useUniqueId } from '../../../internal/hooks/use-unique-id';\nimport useFocusVisible from '../../../internal/hooks/focus-visible';\n\nimport { LinkProps } from '../../../link/interfaces';\nimport { ButtonDropdownProps } from '../../../button-dropdown/interfaces';\nimport InternalIcon from '../../../icon/internal';\n\nimport { useNavigate } from './router';\nimport { TopNavigationProps } from '../../interfaces';\nimport styles from '../../styles.css.js';\n\ninterface ListItemProps {\n  startIcon?: React.ReactNode;\n  endIcon?: React.ReactNode;\n  context?: 'dropdown-menu';\n  children?: React.ReactNode;\n  testId?: string;\n}\n\nconst ListItem = ({ children, startIcon, endIcon }: ListItemProps) => {\n  return (\n    <>\n      {startIcon && <span className={styles['overflow-menu-list-item-icon']}>{startIcon}</span>}\n      <span className={styles['overflow-menu-list-item-text']}>{children}</span>\n      {endIcon && endIcon}\n    </>\n  );\n};\n\ninterface LinkItemProps extends ButtonItemProps, Pick<LinkProps, 'href' | 'external'> {}\n\nconst LinkItem = forwardRef(\n  (\n    { children, external, href, startIcon, endIcon, onFollow, context, testId }: LinkItemProps,\n    ref: React.Ref<HTMLAnchorElement>\n  ) => {\n    const focusVisible = useFocusVisible();\n    const rel = external ? 'noopener noreferrer' : undefined;\n    const target = external ? '_blank' : undefined;\n\n    const anchorProps = {\n      rel,\n      target,\n      href,\n      onClick(event: React.MouseEvent) {\n        if (isPlainLeftClick(event)) {\n          onFollow?.(event);\n        }\n      },\n    };\n\n    const buttonProps = {\n      role: 'button',\n      tabIndex: 0,\n      onKeyDown(event: React.KeyboardEvent) {\n        if (event.key === ' ') {\n          event.preventDefault();\n        }\n      },\n      onKeyUp(event: React.KeyboardEvent) {\n        if (event.key === ' ' || event.key === 'Enter') {\n          onFollow?.(event);\n        }\n      },\n      onClick: onFollow,\n    };\n\n    return (\n      <a\n        ref={ref}\n        className={clsx(\n          styles['overflow-menu-control'],\n          styles['overflow-menu-control-link'],\n          context && styles[`overflow-menu-control-${context}`]\n        )}\n        {...(typeof href === 'string' ? anchorProps : buttonProps)}\n        {...focusVisible}\n        {...(testId ? { 'data-testid': testId } : {})}\n      >\n        <ListItem startIcon={startIcon} endIcon={endIcon}>\n          {children}\n        </ListItem>\n      </a>\n    );\n  }\n);\n\ninterface ButtonItemProps extends ListItemProps {\n  onFollow?: (event: React.SyntheticEvent) => void;\n}\n\nconst ButtonItem = forwardRef(\n  (\n    { children, startIcon, endIcon, onFollow: onClick, testId }: ButtonItemProps & { testId?: string },\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    const focusVisible = useFocusVisible();\n\n    return (\n      <button\n        ref={ref}\n        className={styles['overflow-menu-control']}\n        onClick={onClick}\n        {...focusVisible}\n        {...(typeof testId === 'string' ? { 'data-testid': testId } : {})}\n      >\n        <ListItem startIcon={startIcon} endIcon={endIcon}>\n          {children}\n        </ListItem>\n      </button>\n    );\n  }\n);\n\nconst NavigationItem = forwardRef(\n  (\n    {\n      startIcon,\n      children,\n      index,\n      testId,\n      ...definition\n    }: ButtonItemProps & TopNavigationProps.MenuDropdownUtility & { index: number; testId?: string },\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    const navigate = useNavigate();\n    return (\n      <ButtonItem\n        ref={ref}\n        startIcon={startIcon}\n        endIcon={<InternalIcon name=\"angle-right\" />}\n        testId={testId}\n        onFollow={() =>\n          navigate('dropdown-menu', {\n            definition,\n            headerText: definition.text || definition.title,\n            headerSecondaryText: definition.description,\n            utilityIndex: index,\n          })\n        }\n      >\n        {children}\n      </ButtonItem>\n    );\n  }\n);\n\nconst ExpandableItem: React.FC<\n  ButtonItemProps & ButtonDropdownProps.ItemGroup & { onItemClick: (item: ButtonDropdownProps.Item) => void }\n> = ({ children, onItemClick, ...definition }) => {\n  const focusVisible = useFocusVisible();\n  const [expanded, setExpanded] = useState(false);\n  const headerId = useUniqueId('overflow-menu-item');\n\n  return (\n    <>\n      <button\n        className={clsx(styles['overflow-menu-control'], styles['overflow-menu-control-expandable-menu-trigger'])}\n        onClick={() => setExpanded(value => !value)}\n        aria-expanded={expanded}\n        {...focusVisible}\n      >\n        <ListItem\n          endIcon={\n            <span className={clsx(styles.icon, expanded && styles.expanded)}>\n              <InternalIcon name=\"caret-up-filled\" />\n            </span>\n          }\n        >\n          <span id={headerId}>{children}</span>\n        </ListItem>\n      </button>\n      {expanded && (\n        <ul\n          className={clsx(styles['overflow-menu-list'], styles['overflow-menu-list-submenu'])}\n          aria-labelledby={headerId}\n        >\n          {definition.items.map((item, index) => {\n            const isGroup = typeof (item as ButtonDropdownProps.ItemGroup).items !== 'undefined';\n\n            return (\n              <li\n                key={index}\n                className={clsx(styles[`overflow-menu-list-item`], styles[`overflow-menu-list-item-dropdown-menu`])}\n              >\n                {dropdownComponentFactory(item, isGroup, onItemClick)}\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </>\n  );\n};\n\nfunction utilityComponentFactory(\n  utility: TopNavigationProps.Utility,\n  index: number,\n  ref?: React.Ref<HTMLAnchorElement & HTMLButtonElement>\n) {\n  const label = utility.text || utility.title;\n  const hasIcon = !!utility.iconName || !!utility.iconUrl || !!utility.iconAlt || !!utility.iconSvg;\n  const startIcon = hasIcon && (\n    <InternalIcon name={utility.iconName} url={utility.iconUrl} alt={utility.iconAlt} svg={utility.iconSvg} />\n  );\n\n  switch (utility.type) {\n    case 'button': {\n      const handleClick = (event: Event | React.SyntheticEvent) => {\n        fireCancelableEvent(utility.onClick, {}, event);\n      };\n\n      if (utility.variant === 'primary-button') {\n        return (\n          <ButtonItem ref={ref} startIcon={startIcon} onFollow={handleClick} testId={`__${index}`}>\n            {label}\n          </ButtonItem>\n        );\n      }\n\n      return (\n        <LinkItem\n          ref={ref}\n          startIcon={startIcon}\n          href={utility.href}\n          external={utility.external}\n          testId={`__${index}`}\n          onFollow={handleClick}\n        >\n          {label}\n          {utility.external && (\n            <>\n              {' '}\n              <span aria-label={utility.externalIconAriaLabel} role={utility.externalIconAriaLabel ? 'img' : undefined}>\n                <InternalIcon name=\"external\" size=\"normal\" />\n              </span>\n            </>\n          )}\n        </LinkItem>\n      );\n    }\n    case 'menu-dropdown': {\n      return (\n        <NavigationItem\n          ref={ref}\n          startIcon={startIcon}\n          index={index}\n          {...(utility as TopNavigationProps.MenuDropdownUtility)}\n          testId={`__${index}`}\n        >\n          {label}\n        </NavigationItem>\n      );\n    }\n  }\n}\n\nfunction dropdownComponentFactory(\n  item: ButtonDropdownProps.ItemOrGroup,\n  expandable: boolean,\n  onItemClick: (item: ButtonDropdownProps.Item) => void\n) {\n  const label = item.text;\n  const hasIcon = !!item.iconName || !!item.iconUrl || !!item.iconAlt || !!item.iconSvg;\n  const startIcon = hasIcon && (\n    <InternalIcon name={item.iconName} url={item.iconUrl} alt={item.iconAlt} svg={item.iconSvg} />\n  );\n\n  if (expandable) {\n    return (\n      <ExpandableItem {...(item as ButtonDropdownProps.ItemGroup)} onItemClick={onItemClick}>\n        {label}\n      </ExpandableItem>\n    );\n  }\n\n  return (\n    <LinkItem\n      startIcon={startIcon}\n      href={item.href}\n      external={item.external}\n      context=\"dropdown-menu\"\n      testId={item.id}\n      onFollow={() => onItemClick(item as ButtonDropdownProps.Item)}\n    >\n      {label}\n      {item.external && (\n        <>\n          {' '}\n          <span aria-label={item.externalIconAriaLabel} role={item.externalIconAriaLabel ? 'img' : undefined}>\n            <InternalIcon name=\"external\" size=\"normal\" />\n          </span>\n        </>\n      )}\n    </LinkItem>\n  );\n}\n\ntype UtilityMenuItemProps = TopNavigationProps.Utility & { index: number };\n\nexport const UtilityMenuItem = forwardRef(\n  ({ index, ...props }: UtilityMenuItemProps, ref: React.Ref<HTMLAnchorElement & HTMLButtonElement>) => {\n    return (\n      <li className={clsx(styles[`overflow-menu-list-item`], styles[`overflow-menu-list-item-utility`])}>\n        {utilityComponentFactory(props, index, ref)}\n      </li>\n    );\n  }\n);\n\ntype SubmenuItemProps = ButtonDropdownProps.ItemOrGroup & { onItemClick: (item: ButtonDropdownProps.Item) => void };\n\nexport const SubmenuItem = (props: SubmenuItemProps) => {\n  const expandable = typeof (props as ButtonDropdownProps.ItemGroup).items !== 'undefined';\n\n  return (\n    <li\n      className={clsx(\n        styles[`overflow-menu-list-item`],\n        styles[`overflow-menu-list-item-submenu`],\n        expandable && styles[`overflow-menu-list-item-expandable`]\n      )}\n    >\n      {dropdownComponentFactory(props, expandable, props.onItemClick)}\n    </li>\n  );\n};\n"]}
+{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../../../../src/top-navigation/parts/overflow-menu/menu-item.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, { forwardRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { fireCancelableEvent, isPlainLeftClick } from '../../../internal/events';\nimport { useUniqueId } from '../../../internal/hooks/use-unique-id';\nimport useFocusVisible from '../../../internal/hooks/focus-visible';\n\nimport { LinkProps } from '../../../link/interfaces';\nimport { ButtonDropdownProps } from '../../../button-dropdown/interfaces';\nimport InternalIcon from '../../../icon/internal';\n\nimport { useNavigate } from './router';\nimport { TopNavigationProps } from '../../interfaces';\nimport styles from '../../styles.css.js';\n\ninterface ListItemProps {\n  startIcon?: React.ReactNode;\n  endIcon?: React.ReactNode;\n  context?: 'dropdown-menu';\n  children?: React.ReactNode;\n  testId?: string;\n}\n\nconst ListItem = ({ children, startIcon, endIcon }: ListItemProps) => {\n  return (\n    <>\n      {startIcon && <span className={styles['overflow-menu-list-item-icon']}>{startIcon}</span>}\n      <span className={styles['overflow-menu-list-item-text']}>{children}</span>\n      {endIcon && endIcon}\n    </>\n  );\n};\n\ninterface LinkItemProps extends ButtonItemProps, Pick<LinkProps, 'href' | 'external'> {}\n\nconst LinkItem = forwardRef(\n  (\n    { children, external, href, startIcon, endIcon, onFollow, context, testId }: LinkItemProps,\n    ref: React.Ref<HTMLAnchorElement>\n  ) => {\n    const focusVisible = useFocusVisible();\n    const rel = external ? 'noopener noreferrer' : undefined;\n    const target = external ? '_blank' : undefined;\n\n    const anchorProps = {\n      rel,\n      target,\n      href,\n      onClick(event: React.MouseEvent) {\n        if (isPlainLeftClick(event)) {\n          onFollow?.(event);\n        }\n      },\n    };\n\n    const buttonProps = {\n      role: 'button',\n      tabIndex: 0,\n      onKeyDown(event: React.KeyboardEvent) {\n        if (event.key === ' ') {\n          event.preventDefault();\n        }\n      },\n      onKeyUp(event: React.KeyboardEvent) {\n        if (event.key === ' ' || event.key === 'Enter') {\n          onFollow?.(event);\n        }\n      },\n      onClick: onFollow,\n    };\n\n    return (\n      <a\n        ref={ref}\n        className={clsx(\n          styles['overflow-menu-control'],\n          styles['overflow-menu-control-link'],\n          context && styles[`overflow-menu-control-${context}`]\n        )}\n        {...(typeof href === 'string' ? anchorProps : buttonProps)}\n        {...focusVisible}\n        {...(testId ? { 'data-testid': testId } : {})}\n      >\n        <ListItem startIcon={startIcon} endIcon={endIcon}>\n          {children}\n        </ListItem>\n      </a>\n    );\n  }\n);\n\ninterface ButtonItemProps extends ListItemProps {\n  onFollow?: (event: React.SyntheticEvent) => void;\n}\n\nconst ButtonItem = forwardRef(\n  (\n    { children, startIcon, endIcon, onFollow: onClick, testId }: ButtonItemProps & { testId?: string },\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    const focusVisible = useFocusVisible();\n\n    return (\n      <button\n        ref={ref}\n        className={styles['overflow-menu-control']}\n        onClick={onClick}\n        {...focusVisible}\n        {...(typeof testId === 'string' ? { 'data-testid': testId } : {})}\n      >\n        <ListItem startIcon={startIcon} endIcon={endIcon}>\n          {children}\n        </ListItem>\n      </button>\n    );\n  }\n);\n\nconst NavigationItem = forwardRef(\n  (\n    {\n      startIcon,\n      children,\n      index,\n      testId,\n      ...definition\n    }: ButtonItemProps & TopNavigationProps.MenuDropdownUtility & { index: number; testId?: string },\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    const navigate = useNavigate();\n    return (\n      <ButtonItem\n        ref={ref}\n        startIcon={startIcon}\n        endIcon={<InternalIcon name=\"angle-right\" />}\n        testId={testId}\n        onFollow={() =>\n          navigate('dropdown-menu', {\n            definition,\n            headerText: definition.text || definition.title,\n            headerSecondaryText: definition.description,\n            utilityIndex: index,\n          })\n        }\n      >\n        {children}\n      </ButtonItem>\n    );\n  }\n);\n\nconst ExpandableItem: React.FC<\n  ButtonItemProps & ButtonDropdownProps.ItemGroup & { onItemClick: (item: ButtonDropdownProps.Item) => void }\n> = ({ children, onItemClick, ...definition }) => {\n  const focusVisible = useFocusVisible();\n  const [expanded, setExpanded] = useState(false);\n  const headerId = useUniqueId('overflow-menu-item');\n\n  return (\n    <>\n      <button\n        className={clsx(styles['overflow-menu-control'], styles['overflow-menu-control-expandable-menu-trigger'])}\n        onClick={() => setExpanded(value => !value)}\n        aria-expanded={expanded}\n        {...focusVisible}\n      >\n        <ListItem\n          endIcon={\n            <span className={clsx(styles.icon, expanded && styles.expanded)}>\n              <InternalIcon name=\"caret-up-filled\" />\n            </span>\n          }\n        >\n          <span id={headerId}>{children}</span>\n        </ListItem>\n      </button>\n      {expanded && (\n        <ul\n          className={clsx(styles['overflow-menu-list'], styles['overflow-menu-list-submenu'])}\n          aria-labelledby={headerId}\n        >\n          {definition.items.map((item, index) => {\n            const isGroup = typeof (item as ButtonDropdownProps.ItemGroup).items !== 'undefined';\n\n            return (\n              <li\n                key={index}\n                className={clsx(styles[`overflow-menu-list-item`], styles[`overflow-menu-list-item-dropdown-menu`])}\n              >\n                {dropdownComponentFactory(item, isGroup, onItemClick)}\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </>\n  );\n};\n\nfunction utilityComponentFactory(\n  utility: TopNavigationProps.Utility,\n  index: number,\n  ref?: React.Ref<HTMLAnchorElement & HTMLButtonElement>\n) {\n  const label = utility.text || utility.title;\n  const hasIcon = !!utility.iconName || !!utility.iconUrl || !!utility.iconAlt || !!utility.iconSvg;\n  const startIcon = hasIcon && (\n    <InternalIcon name={utility.iconName} url={utility.iconUrl} alt={utility.iconAlt} svg={utility.iconSvg} />\n  );\n\n  switch (utility.type) {\n    case 'button': {\n      const handleClick = (event: Event | React.SyntheticEvent) => {\n        fireCancelableEvent(utility.onClick, {}, event);\n      };\n\n      if (utility.variant === 'primary-button') {\n        return (\n          <ButtonItem ref={ref} startIcon={startIcon} onFollow={handleClick} testId={`__${index}`}>\n            {label}\n          </ButtonItem>\n        );\n      }\n\n      return (\n        <LinkItem\n          ref={ref}\n          startIcon={startIcon}\n          href={utility.href}\n          external={utility.external}\n          testId={`__${index}`}\n          onFollow={handleClick}\n        >\n          {label}\n          {utility.external && (\n            <>\n              {' '}\n              <span aria-label={utility.externalIconAriaLabel} role={utility.externalIconAriaLabel ? 'img' : undefined}>\n                <InternalIcon name=\"external\" size=\"normal\" />\n              </span>\n            </>\n          )}\n        </LinkItem>\n      );\n    }\n    case 'menu-dropdown': {\n      return (\n        <NavigationItem\n          ref={ref}\n          startIcon={startIcon}\n          index={index}\n          {...(utility as TopNavigationProps.MenuDropdownUtility)}\n          testId={`__${index}`}\n        >\n          {label}\n        </NavigationItem>\n      );\n    }\n  }\n}\n\nfunction dropdownComponentFactory(\n  item: ButtonDropdownProps.ItemOrGroup,\n  expandable: boolean,\n  onItemClick: (item: ButtonDropdownProps.Item) => void\n) {\n  const label = item.text;\n  const hasIcon = !!item.iconName || !!item.iconUrl || !!item.iconAlt || !!item.iconSvg;\n  const startIcon = hasIcon && (\n    <InternalIcon name={item.iconName} url={item.iconUrl} alt={item.iconAlt} svg={item.iconSvg} />\n  );\n\n  if (expandable) {\n    return (\n      <ExpandableItem {...(item as ButtonDropdownProps.ItemGroup)} onItemClick={onItemClick}>\n        {label}\n      </ExpandableItem>\n    );\n  }\n\n  return (\n    <LinkItem\n      startIcon={startIcon}\n      href={item.href}\n      external={item.external}\n      context=\"dropdown-menu\"\n      testId={item.id}\n      onFollow={() => onItemClick(item as ButtonDropdownProps.Item)}\n    >\n      {label}\n      {item.external && (\n        <>\n          {' '}\n          <span aria-label={item.externalIconAriaLabel} role={item.externalIconAriaLabel ? 'img' : undefined}>\n            <InternalIcon name=\"external\" size=\"normal\" />\n          </span>\n        </>\n      )}\n    </LinkItem>\n  );\n}\n\ntype UtilityMenuItemProps = TopNavigationProps.Utility & { index: number };\n\nexport const UtilityMenuItem = forwardRef(\n  ({ index, ...props }: UtilityMenuItemProps, ref: React.Ref<HTMLAnchorElement & HTMLButtonElement>) => {\n    return (\n      <li className={clsx(styles[`overflow-menu-list-item`], styles[`overflow-menu-list-item-utility`])}>\n        {utilityComponentFactory(props, index, ref)}\n      </li>\n    );\n  }\n);\n\ntype SubmenuItemProps = ButtonDropdownProps.ItemOrGroup & { onItemClick: (item: ButtonDropdownProps.Item) => void };\n\nexport const SubmenuItem = (props: SubmenuItemProps) => {\n  const expandable = typeof (props as ButtonDropdownProps.ItemGroup).items !== 'undefined';\n\n  return (\n    <li\n      className={clsx(\n        styles[`overflow-menu-list-item`],\n        styles[`overflow-menu-list-item-submenu`],\n        expandable && styles[`overflow-menu-list-item-expandable`]\n      )}\n    >\n      {dropdownComponentFactory(props, expandable, props.onItemClick)}\n    </li>\n  );\n};\n"]}

package/top-navigation/parts/overflow-menu/router.d.ts

@@ -1,5 +1,5 @@
 import React, { Dispatch, SetStateAction } from 'react';
-declare type View = 'utilities' | 'dropdown-menu';
+type View = 'utilities' | 'dropdown-menu';
 interface RouteData {
     headerText?: string;
     headerSecondaryText?: string;

package/top-navigation/parts/overflow-menu/router.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../../../../src/top-navigation/parts/overflow-menu/router.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAiB,QAAQ,EAAE,cAAc,EAAwB,MAAM,OAAO,CAAC;AAE7F,aAAK,IAAI,GAAG,WAAW,GAAG,eAAe,CAAC;AAE1C,UAAU,SAAS;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,GAAG,CAAC;IAEjB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,UAAU,UAAU;IAClB,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC;CACxB;AAED,UAAU,YAAY;IACpB,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC;CAChD;AAGD,eAAO,MAAM,WAAW,6BAA0C,CAAC;AAEnE,eAAO,MAAM,WAAW,eAGE,IAAI,QAAQ,GAAG,SAKxC,CAAC;AAEF,UAAU,UAAU;IAClB,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI,KAAK,KAAK,CAAC,YAAY,CAAC,CAAC;CAC9E;AAED,eAAO,MAAM,KAAK,sBAAuB,UAAU,QAYlD,CAAC;AAEF,UAAU,WAAW;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,MAAM,iBAAkB,WAAW,gBAGxC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../../../../src/top-navigation/parts/overflow-menu/router.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAiB,QAAQ,EAAE,cAAc,EAAwB,MAAM,OAAO,CAAC;AAE7F,KAAK,IAAI,GAAG,WAAW,GAAG,eAAe,CAAC;AAE1C,UAAU,SAAS;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,GAAG,CAAC;IAEjB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,UAAU,UAAU;IAClB,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC;CACxB;AAED,UAAU,YAAY;IACpB,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC;CAChD;AAGD,eAAO,MAAM,WAAW,6BAA0C,CAAC;AAEnE,eAAO,MAAM,WAAW,eAGE,IAAI,QAAQ,GAAG,SAKxC,CAAC;AAEF,UAAU,UAAU;IAClB,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI,KAAK,KAAK,CAAC,YAAY,CAAC,CAAC;CAC9E;AAED,eAAO,MAAM,KAAK,sBAAuB,UAAU,QAYlD,CAAC;AAEF,UAAU,WAAW;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,MAAM,iBAAkB,WAAW,gBAGxC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/wizard/styles.css.js

@@ -1,37 +1,37 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_1xupv_1l2g1_94",
-  "wizard": "awsui_wizard_1xupv_1l2g1_105",
-  "refresh": "awsui_refresh_1xupv_1l2g1_105",
-  "small-container": "awsui_small-container_1xupv_1l2g1_112",
-  "navigation": "awsui_navigation_1xupv_1l2g1_120",
-  "number": "awsui_number_1xupv_1l2g1_148",
-  "circle": "awsui_circle_1xupv_1l2g1_164",
-  "title": "awsui_title_1xupv_1l2g1_172",
-  "active": "awsui_active_1xupv_1l2g1_201",
-  "disabled": "awsui_disabled_1xupv_1l2g1_212",
-  "enabled": "awsui_enabled_1xupv_1l2g1_222",
-  "form": "awsui_form_1xupv_1l2g1_261",
-  "form-header": "awsui_form-header_1xupv_1l2g1_267",
-  "background": "awsui_background_1xupv_1l2g1_278",
-  "form-header-content": "awsui_form-header-content_1xupv_1l2g1_288",
-  "form-component": "awsui_form-component_1xupv_1l2g1_292",
-  "hidden": "awsui_hidden_1xupv_1l2g1_306",
-  "collapsed-steps": "awsui_collapsed-steps_1xupv_1l2g1_310",
-  "collapsed-steps-extra-padding": "awsui_collapsed-steps-extra-padding_1xupv_1l2g1_315",
-  "collapsed-steps-hidden": "awsui_collapsed-steps-hidden_1xupv_1l2g1_318",
-  "form-header-component-wrapper": "awsui_form-header-component-wrapper_1xupv_1l2g1_322",
-  "form-header-component": "awsui_form-header-component_1xupv_1l2g1_322",
-  "navigation-link": "awsui_navigation-link_1xupv_1l2g1_335",
-  "navigation-link-item": "awsui_navigation-link-item_1xupv_1l2g1_336",
-  "navigation-link-label": "awsui_navigation-link-label_1xupv_1l2g1_337",
-  "navigation-link-active": "awsui_navigation-link-active_1xupv_1l2g1_341",
-  "navigation-link-disabled": "awsui_navigation-link-disabled_1xupv_1l2g1_346",
-  "cancel-button": "awsui_cancel-button_1xupv_1l2g1_350",
-  "previous-button": "awsui_previous-button_1xupv_1l2g1_351",
-  "primary-button": "awsui_primary-button_1xupv_1l2g1_352",
-  "skip-to-button": "awsui_skip-to-button_1xupv_1l2g1_353",
-  "action-buttons": "awsui_action-buttons_1xupv_1l2g1_357"
+  "root": "awsui_root_1xupv_ahpoi_94",
+  "wizard": "awsui_wizard_1xupv_ahpoi_105",
+  "refresh": "awsui_refresh_1xupv_ahpoi_105",
+  "small-container": "awsui_small-container_1xupv_ahpoi_112",
+  "navigation": "awsui_navigation_1xupv_ahpoi_121",
+  "number": "awsui_number_1xupv_ahpoi_149",
+  "circle": "awsui_circle_1xupv_ahpoi_165",
+  "title": "awsui_title_1xupv_ahpoi_173",
+  "active": "awsui_active_1xupv_ahpoi_202",
+  "disabled": "awsui_disabled_1xupv_ahpoi_213",
+  "enabled": "awsui_enabled_1xupv_ahpoi_223",
+  "form": "awsui_form_1xupv_ahpoi_262",
+  "form-header": "awsui_form-header_1xupv_ahpoi_268",
+  "background": "awsui_background_1xupv_ahpoi_279",
+  "form-header-content": "awsui_form-header-content_1xupv_ahpoi_289",
+  "form-component": "awsui_form-component_1xupv_ahpoi_293",
+  "hidden": "awsui_hidden_1xupv_ahpoi_307",
+  "collapsed-steps": "awsui_collapsed-steps_1xupv_ahpoi_311",
+  "collapsed-steps-extra-padding": "awsui_collapsed-steps-extra-padding_1xupv_ahpoi_316",
+  "collapsed-steps-hidden": "awsui_collapsed-steps-hidden_1xupv_ahpoi_319",
+  "form-header-component-wrapper": "awsui_form-header-component-wrapper_1xupv_ahpoi_323",
+  "form-header-component": "awsui_form-header-component_1xupv_ahpoi_323",
+  "navigation-link": "awsui_navigation-link_1xupv_ahpoi_336",
+  "navigation-link-item": "awsui_navigation-link-item_1xupv_ahpoi_337",
+  "navigation-link-label": "awsui_navigation-link-label_1xupv_ahpoi_338",
+  "navigation-link-active": "awsui_navigation-link-active_1xupv_ahpoi_342",
+  "navigation-link-disabled": "awsui_navigation-link-disabled_1xupv_ahpoi_347",
+  "cancel-button": "awsui_cancel-button_1xupv_ahpoi_351",
+  "previous-button": "awsui_previous-button_1xupv_ahpoi_352",
+  "primary-button": "awsui_primary-button_1xupv_ahpoi_353",
+  "skip-to-button": "awsui_skip-to-button_1xupv_ahpoi_354",
+  "action-buttons": "awsui_action-buttons_1xupv_ahpoi_358"
 };
   

package/wizard/styles.scoped.css

@@ -91,7 +91,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  SPDX-License-Identifier: Apache-2.0
 */
 /* stylelint-disable selector-max-universal, selector-max-type */
-.awsui_root_1xupv_1l2g1_94:not(#\9) {
+.awsui_root_1xupv_ahpoi_94:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -128,28 +128,29 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   font-family: var(--font-family-base-qnistn, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
 }
 
-.awsui_wizard_1xupv_1l2g1_105.awsui_refresh_1xupv_1l2g1_105:not(#\9) {
+.awsui_wizard_1xupv_ahpoi_105.awsui_refresh_1xupv_ahpoi_105:not(#\9) {
   column-gap: var(--space-xl-a39hup, 24px);
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   grid-template-rows: auto 1fr;
   row-gap: var(--space-scaled-xl-w2t504, 24px);
 }
-.awsui_wizard_1xupv_1l2g1_105.awsui_refresh_1xupv_1l2g1_105.awsui_small-container_1xupv_1l2g1_112:not(#\9) {
+.awsui_wizard_1xupv_ahpoi_105.awsui_refresh_1xupv_ahpoi_105.awsui_small-container_1xupv_ahpoi_112:not(#\9) {
+  grid-template-columns: minmax(0, 1fr) 0;
   row-gap: var(--space-scaled-l-t03y3z, 20px);
 }
 
-.awsui_wizard_1xupv_1l2g1_105:not(#\9):not(.awsui_refresh_1xupv_1l2g1_105) {
+.awsui_wizard_1xupv_ahpoi_105:not(#\9):not(.awsui_refresh_1xupv_ahpoi_105) {
   display: flex;
 }
 
-.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105:not(#\9) {
+.awsui_navigation_1xupv_ahpoi_121.awsui_refresh_1xupv_ahpoi_105:not(#\9) {
   grid-column: 1;
   grid-row: 1/span 2;
   padding-top: var(--space-scaled-xxs-95dhkm, 4px);
   z-index: 1;
 }
-.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul:not(#\9) {
+.awsui_navigation_1xupv_ahpoi_121.awsui_refresh_1xupv_ahpoi_105 > ul:not(#\9) {
   background: var(--color-background-container-content-i8i4a0, #ffffff);
   border-radius: var(--border-radius-container-gh9ysk, 16px);
   box-shadow: var(--shadow-container-7nblnj, 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12));
@@ -158,26 +159,26 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   width: 280px;
   box-sizing: border-box;
 }
-.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li:not(#\9) {
+.awsui_navigation_1xupv_ahpoi_121.awsui_refresh_1xupv_ahpoi_105 > ul > li:not(#\9) {
   display: grid;
   column-gap: var(--space-s-hv8c1d, 12px);
   grid-template-columns: var(--space-l-4vl6xu, 20px) 1fr;
   grid-template-rows: repeat(2, auto);
 }
-.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li > hr:not(#\9) {
+.awsui_navigation_1xupv_ahpoi_121.awsui_refresh_1xupv_ahpoi_105 > ul > li > hr:not(#\9) {
   background-color: var(--color-border-divider-default-7s2wjw, #e9ebed);
   border: 0;
   grid-column: 1;
   height: 100%;
   width: var(--space-xxxs-k2w98v, 2px);
 }
-.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li > .awsui_number_1xupv_1l2g1_148:not(#\9) {
+.awsui_navigation_1xupv_ahpoi_121.awsui_refresh_1xupv_ahpoi_105 > ul > li > .awsui_number_1xupv_ahpoi_149:not(#\9) {
   color: var(--color-text-small-le1y42, #5f6b7a);
   font-size: var(--font-body-s-size-ukw2p9, 12px);
   grid-column: 2;
   grid-row: 1;
 }
-.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li > a:not(#\9) {
+.awsui_navigation_1xupv_ahpoi_121.awsui_refresh_1xupv_ahpoi_105 > ul > li > a:not(#\9) {
   align-items: start;
   column-gap: var(--space-s-hv8c1d, 12px);
   cursor: pointer;
@@ -187,7 +188,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   grid-row: 2;
   grid-template-columns: var(--space-l-4vl6xu, 20px) 1fr;
 }
-.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li > a > .awsui_circle_1xupv_1l2g1_164:not(#\9) {
+.awsui_navigation_1xupv_ahpoi_121.awsui_refresh_1xupv_ahpoi_105 > ul > li > a > .awsui_circle_1xupv_ahpoi_165:not(#\9) {
   border-radius: 100%;
   grid-column: 1;
   height: 10px;
@@ -195,13 +196,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-top: 6px;
   width: 10px;
 }
-.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li > a > .awsui_title_1xupv_1l2g1_172:not(#\9) {
+.awsui_navigation_1xupv_ahpoi_121.awsui_refresh_1xupv_ahpoi_105 > ul > li > a > .awsui_title_1xupv_ahpoi_173:not(#\9) {
   min-width: 0;
   -ms-word-break: break-all;
   word-break: break-word;
   grid-column: 2;
 }
-.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li > a[data-awsui-focus-visible=true]:not(#\9):focus {
+.awsui_navigation_1xupv_ahpoi_121.awsui_refresh_1xupv_ahpoi_105 > ul > li > a[data-awsui-focus-visible=true]:not(#\9):focus {
   outline: thin dotted;
   outline: var(--border-link-focus-ring-outline-k2wccv, 0);
   outline-offset: 2px;
@@ -209,58 +210,58 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
   box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-nv4ahb, 2px) var(--color-border-item-focused-ap3b6s, #0972d3);
 }
-.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li:not(#\9):first-child > hr {
+.awsui_navigation_1xupv_ahpoi_121.awsui_refresh_1xupv_ahpoi_105 > ul > li:not(#\9):first-child > hr {
   grid-row: 2/span 2;
 }
-.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li:not(#\9):not(:first-child) > .awsui_number_1xupv_1l2g1_148 {
+.awsui_navigation_1xupv_ahpoi_121.awsui_refresh_1xupv_ahpoi_105 > ul > li:not(#\9):not(:first-child) > .awsui_number_1xupv_ahpoi_149 {
   margin-top: var(--space-scaled-xl-w2t504, 24px);
 }
-.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li:not(#\9):last-child > hr {
+.awsui_navigation_1xupv_ahpoi_121.awsui_refresh_1xupv_ahpoi_105 > ul > li:not(#\9):last-child > hr {
   grid-row: 1;
 }
-.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li:not(#\9):only-of-type > hr {
+.awsui_navigation_1xupv_ahpoi_121.awsui_refresh_1xupv_ahpoi_105 > ul > li:not(#\9):only-of-type > hr {
   display: none;
 }
-.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li:not(#\9):not(:first-child):not(:last-child) > hr {
+.awsui_navigation_1xupv_ahpoi_121.awsui_refresh_1xupv_ahpoi_105 > ul > li:not(#\9):not(:first-child):not(:last-child) > hr {
   grid-row: 1/span 3;
 }
-.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li.awsui_active_1xupv_1l2g1_201 > a:not(#\9) {
+.awsui_navigation_1xupv_ahpoi_121.awsui_refresh_1xupv_ahpoi_105 > ul > li.awsui_active_1xupv_ahpoi_202 > a:not(#\9) {
   cursor: text;
 }
-.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li.awsui_active_1xupv_1l2g1_201 > a > .awsui_circle_1xupv_1l2g1_164:not(#\9) {
+.awsui_navigation_1xupv_ahpoi_121.awsui_refresh_1xupv_ahpoi_105 > ul > li.awsui_active_1xupv_ahpoi_202 > a > .awsui_circle_1xupv_ahpoi_165:not(#\9) {
   background-color: var(--color-background-control-checked-9admlu, #0972d3);
   box-shadow: 0 0 0 3px var(--color-background-container-content-i8i4a0, #ffffff), 0 0 0 5px var(--color-background-control-checked-9admlu, #0972d3), 0 0 0 7px var(--color-background-container-content-i8i4a0, #ffffff);
 }
-.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li.awsui_active_1xupv_1l2g1_201 > a > .awsui_title_1xupv_1l2g1_172:not(#\9) {
+.awsui_navigation_1xupv_ahpoi_121.awsui_refresh_1xupv_ahpoi_105 > ul > li.awsui_active_1xupv_ahpoi_202 > a > .awsui_title_1xupv_ahpoi_173:not(#\9) {
   color: var(--color-background-control-checked-9admlu, #0972d3);
   font-weight: 700;
 }
-.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li.awsui_disabled_1xupv_1l2g1_212 > a:not(#\9) {
+.awsui_navigation_1xupv_ahpoi_121.awsui_refresh_1xupv_ahpoi_105 > ul > li.awsui_disabled_1xupv_ahpoi_213 > a:not(#\9) {
   cursor: text;
 }
-.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li.awsui_disabled_1xupv_1l2g1_212 > a > .awsui_circle_1xupv_1l2g1_164:not(#\9) {
+.awsui_navigation_1xupv_ahpoi_121.awsui_refresh_1xupv_ahpoi_105 > ul > li.awsui_disabled_1xupv_ahpoi_213 > a > .awsui_circle_1xupv_ahpoi_165:not(#\9) {
   background-color: var(--color-background-container-content-i8i4a0, #ffffff);
   box-shadow: 0 0 0 2px var(--color-text-interactive-disabled-3pbb07, #9ba7b6), 0 0 0 4px var(--color-background-container-content-i8i4a0, #ffffff);
 }
-.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li.awsui_disabled_1xupv_1l2g1_212 > a > .awsui_title_1xupv_1l2g1_172:not(#\9) {
+.awsui_navigation_1xupv_ahpoi_121.awsui_refresh_1xupv_ahpoi_105 > ul > li.awsui_disabled_1xupv_ahpoi_213 > a > .awsui_title_1xupv_ahpoi_173:not(#\9) {
   color: var(--color-text-status-inactive-5ei55p, #5f6b7a);
 }
-.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li.awsui_enabled_1xupv_1l2g1_222 > a > .awsui_circle_1xupv_1l2g1_164:not(#\9) {
+.awsui_navigation_1xupv_ahpoi_121.awsui_refresh_1xupv_ahpoi_105 > ul > li.awsui_enabled_1xupv_ahpoi_223 > a > .awsui_circle_1xupv_ahpoi_165:not(#\9) {
   background-color: var(--color-text-interactive-default-eg5fsa, #414d5c);
   box-shadow: 0 0 0 2px var(--color-text-interactive-default-eg5fsa, #414d5c), 0 0 0 4px var(--color-background-container-content-i8i4a0, #ffffff);
 }
-.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li.awsui_enabled_1xupv_1l2g1_222 > a > .awsui_title_1xupv_1l2g1_172:not(#\9) {
+.awsui_navigation_1xupv_ahpoi_121.awsui_refresh_1xupv_ahpoi_105 > ul > li.awsui_enabled_1xupv_ahpoi_223 > a > .awsui_title_1xupv_ahpoi_173:not(#\9) {
   color: var(--color-text-interactive-default-eg5fsa, #414d5c);
 }
-.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li.awsui_enabled_1xupv_1l2g1_222 > a:not(#\9):hover > .awsui_circle_1xupv_1l2g1_164 {
+.awsui_navigation_1xupv_ahpoi_121.awsui_refresh_1xupv_ahpoi_105 > ul > li.awsui_enabled_1xupv_ahpoi_223 > a:not(#\9):hover > .awsui_circle_1xupv_ahpoi_165 {
   background-color: var(--color-background-control-checked-9admlu, #0972d3);
   box-shadow: 0 0 0 2px var(--color-background-control-checked-9admlu, #0972d3), 0 0 0 4px var(--color-background-container-content-i8i4a0, #ffffff);
 }
-.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li.awsui_enabled_1xupv_1l2g1_222 > a:not(#\9):hover > .awsui_title_1xupv_1l2g1_172 {
+.awsui_navigation_1xupv_ahpoi_121.awsui_refresh_1xupv_ahpoi_105 > ul > li.awsui_enabled_1xupv_ahpoi_223 > a:not(#\9):hover > .awsui_title_1xupv_ahpoi_173 {
   color: var(--color-background-control-checked-9admlu, #0972d3);
 }
 
-.awsui_navigation_1xupv_1l2g1_120:not(#\9):not(.awsui_refresh_1xupv_1l2g1_105) {
+.awsui_navigation_1xupv_ahpoi_121:not(#\9):not(.awsui_refresh_1xupv_ahpoi_105) {
   color: var(--color-text-disabled-a2nkh4, #9ba7b6);
   display: inline-block;
   margin-right: calc(2 * var(--space-xxxl-bo9z7f, 40px));
@@ -268,87 +269,87 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-top: var(--space-xxs-ynfts5, 4px);
   width: 200px;
 }
-.awsui_navigation_1xupv_1l2g1_120:not(#\9):not(.awsui_refresh_1xupv_1l2g1_105) > ul {
+.awsui_navigation_1xupv_ahpoi_121:not(#\9):not(.awsui_refresh_1xupv_ahpoi_105) > ul {
   list-style: none;
   padding: 0;
   margin: 0;
 }
-.awsui_navigation_1xupv_1l2g1_120:not(#\9):not(.awsui_refresh_1xupv_1l2g1_105) > ul > li {
+.awsui_navigation_1xupv_ahpoi_121:not(#\9):not(.awsui_refresh_1xupv_ahpoi_105) > ul > li {
   padding-bottom: var(--space-scaled-m-pv0fmt, 16px);
   padding-top: 0;
 }
-.awsui_navigation_1xupv_1l2g1_120:not(#\9):not(.awsui_refresh_1xupv_1l2g1_105) > ul > li:not(:first-child) {
+.awsui_navigation_1xupv_ahpoi_121:not(#\9):not(.awsui_refresh_1xupv_ahpoi_105) > ul > li:not(:first-child) {
   margin-top: var(--space-scaled-m-pv0fmt, 16px);
 }
-.awsui_navigation_1xupv_1l2g1_120:not(#\9):not(.awsui_refresh_1xupv_1l2g1_105) > ul > li:not(:last-child) {
+.awsui_navigation_1xupv_ahpoi_121:not(#\9):not(.awsui_refresh_1xupv_ahpoi_105) > ul > li:not(:last-child) {
   border-bottom: var(--border-divider-list-width-hacikr, 1px) solid var(--color-border-layout-wf5alz, #d1d5db);
 }
 
-.awsui_form_1xupv_1l2g1_261:not(#\9):not(.awsui_refresh_1xupv_1l2g1_105) {
+.awsui_form_1xupv_ahpoi_262:not(#\9):not(.awsui_refresh_1xupv_ahpoi_105) {
   min-width: 0;
   -ms-word-break: break-all;
   word-break: break-word;
   width: 100%;
 }
-.awsui_form_1xupv_1l2g1_261:not(#\9):not(.awsui_refresh_1xupv_1l2g1_105) > .awsui_form-header_1xupv_1l2g1_267 {
+.awsui_form_1xupv_ahpoi_262:not(#\9):not(.awsui_refresh_1xupv_ahpoi_105) > .awsui_form-header_1xupv_ahpoi_268 {
   position: relative;
   margin-bottom: var(--space-scaled-m-pv0fmt, 16px);
 }
 
-.awsui_form_1xupv_1l2g1_261.awsui_refresh_1xupv_1l2g1_105:not(#\9) {
+.awsui_form_1xupv_ahpoi_262.awsui_refresh_1xupv_ahpoi_105:not(#\9) {
   min-width: 0;
   -ms-word-break: break-all;
   word-break: break-word;
   display: contents;
 }
-.awsui_form_1xupv_1l2g1_261.awsui_refresh_1xupv_1l2g1_105 > .awsui_background_1xupv_1l2g1_278:not(#\9) {
+.awsui_form_1xupv_ahpoi_262.awsui_refresh_1xupv_ahpoi_105 > .awsui_background_1xupv_ahpoi_279:not(#\9) {
   background-color: var(--color-background-layout-main-sfhm4y, #ffffff);
   grid-column: 1/span 2;
   grid-row: 1;
 }
-.awsui_form_1xupv_1l2g1_261.awsui_refresh_1xupv_1l2g1_105 > .awsui_form-header_1xupv_1l2g1_267:not(#\9) {
+.awsui_form_1xupv_ahpoi_262.awsui_refresh_1xupv_ahpoi_105 > .awsui_form-header_1xupv_ahpoi_268:not(#\9) {
   background-color: var(--color-background-layout-main-sfhm4y, #ffffff);
   grid-column: 2;
   grid-row: 1;
 }
-.awsui_form_1xupv_1l2g1_261.awsui_refresh_1xupv_1l2g1_105 > .awsui_form-header_1xupv_1l2g1_267 > .awsui_form-header-content_1xupv_1l2g1_288:not(#\9) {
+.awsui_form_1xupv_ahpoi_262.awsui_refresh_1xupv_ahpoi_105 > .awsui_form-header_1xupv_ahpoi_268 > .awsui_form-header-content_1xupv_ahpoi_289:not(#\9) {
   padding-top: var(--space-scaled-xl-w2t504, 24px);
   padding-bottom: var(--space-scaled-xl-w2t504, 24px);
 }
-.awsui_form_1xupv_1l2g1_261.awsui_refresh_1xupv_1l2g1_105 > .awsui_form-component_1xupv_1l2g1_292:not(#\9) {
+.awsui_form_1xupv_ahpoi_262.awsui_refresh_1xupv_ahpoi_105 > .awsui_form-component_1xupv_ahpoi_293:not(#\9) {
   grid-column: 2;
   grid-row: 2;
 }
-.awsui_form_1xupv_1l2g1_261.awsui_refresh_1xupv_1l2g1_105.awsui_small-container_1xupv_1l2g1_112 > .awsui_form-header_1xupv_1l2g1_267:not(#\9) {
+.awsui_form_1xupv_ahpoi_262.awsui_refresh_1xupv_ahpoi_105.awsui_small-container_1xupv_ahpoi_112 > .awsui_form-header_1xupv_ahpoi_268:not(#\9) {
   grid-column: 1/span 2;
 }
-.awsui_form_1xupv_1l2g1_261.awsui_refresh_1xupv_1l2g1_105.awsui_small-container_1xupv_1l2g1_112 > .awsui_form-header_1xupv_1l2g1_267 > .awsui_form-header-content_1xupv_1l2g1_288:not(#\9) {
+.awsui_form_1xupv_ahpoi_262.awsui_refresh_1xupv_ahpoi_105.awsui_small-container_1xupv_ahpoi_112 > .awsui_form-header_1xupv_ahpoi_268 > .awsui_form-header-content_1xupv_ahpoi_289:not(#\9) {
   padding-top: 0;
 }
-.awsui_form_1xupv_1l2g1_261.awsui_refresh_1xupv_1l2g1_105.awsui_small-container_1xupv_1l2g1_112 > .awsui_form-component_1xupv_1l2g1_292:not(#\9) {
+.awsui_form_1xupv_ahpoi_262.awsui_refresh_1xupv_ahpoi_105.awsui_small-container_1xupv_ahpoi_112 > .awsui_form-component_1xupv_ahpoi_293:not(#\9) {
   grid-column: 1/span 2;
 }
 
-.awsui_navigation_1xupv_1l2g1_120.awsui_hidden_1xupv_1l2g1_306:not(#\9) {
+.awsui_navigation_1xupv_ahpoi_121.awsui_hidden_1xupv_ahpoi_307:not(#\9) {
   display: none;
 }
 
-.awsui_collapsed-steps_1xupv_1l2g1_310:not(#\9) {
+.awsui_collapsed-steps_1xupv_ahpoi_311:not(#\9) {
   color: var(--color-text-heading-secondary-corkaj, #414d5c);
   font-weight: 700;
   padding-top: var(--space-scaled-xxs-95dhkm, 4px);
 }
-.awsui_collapsed-steps-extra-padding_1xupv_1l2g1_315:not(#\9) {
+.awsui_collapsed-steps-extra-padding_1xupv_ahpoi_316:not(#\9) {
   padding-top: var(--space-scaled-l-t03y3z, 20px);
 }
-.awsui_collapsed-steps-hidden_1xupv_1l2g1_318:not(#\9) {
+.awsui_collapsed-steps-hidden_1xupv_ahpoi_319:not(#\9) {
   display: none;
 }
 
-.awsui_form-header-component-wrapper_1xupv_1l2g1_322:not(#\9) {
+.awsui_form-header-component-wrapper_1xupv_ahpoi_323:not(#\9) {
   outline: none;
 }
-.awsui_form-header-component-wrapper_1xupv_1l2g1_322[data-awsui-focus-visible=true]:not(#\9):focus {
+.awsui_form-header-component-wrapper_1xupv_ahpoi_323[data-awsui-focus-visible=true]:not(#\9):focus {
   outline: thin dotted;
   outline: var(--border-link-focus-ring-outline-k2wccv, 0);
   outline-offset: 2px;
@@ -357,30 +358,30 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-nv4ahb, 2px) var(--color-border-item-focused-ap3b6s, #0972d3);
 }
 
-.awsui_form-header-component_1xupv_1l2g1_322:not(#\9),
-.awsui_navigation-link_1xupv_1l2g1_335:not(#\9),
-.awsui_navigation-link-item_1xupv_1l2g1_336:not(#\9),
-.awsui_navigation-link-label_1xupv_1l2g1_337:not(#\9) {
+.awsui_form-header-component_1xupv_ahpoi_323:not(#\9),
+.awsui_navigation-link_1xupv_ahpoi_336:not(#\9),
+.awsui_navigation-link-item_1xupv_ahpoi_337:not(#\9),
+.awsui_navigation-link-label_1xupv_ahpoi_338:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_navigation-link-active_1xupv_1l2g1_341:not(#\9) {
+.awsui_navigation-link-active_1xupv_ahpoi_342:not(#\9) {
   font-weight: 700;
   color: var(--color-text-body-default-ajf1h5, #000716);
 }
 
-.awsui_navigation-link-disabled_1xupv_1l2g1_346:not(#\9) {
+.awsui_navigation-link-disabled_1xupv_ahpoi_347:not(#\9) {
   color: var(--color-text-status-inactive-5ei55p, #5f6b7a);
 }
 
-.awsui_cancel-button_1xupv_1l2g1_350:not(#\9),
-.awsui_previous-button_1xupv_1l2g1_351:not(#\9),
-.awsui_primary-button_1xupv_1l2g1_352:not(#\9),
-.awsui_skip-to-button_1xupv_1l2g1_353:not(#\9) {
+.awsui_cancel-button_1xupv_ahpoi_351:not(#\9),
+.awsui_previous-button_1xupv_ahpoi_352:not(#\9),
+.awsui_primary-button_1xupv_ahpoi_353:not(#\9),
+.awsui_skip-to-button_1xupv_ahpoi_354:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_action-buttons_1xupv_1l2g1_357:not(#\9) {
+.awsui_action-buttons_1xupv_ahpoi_358:not(#\9) {
   display: flex;
   justify-content: flex-end;
 }

package/wizard/styles.selectors.js

@@ -2,37 +2,37 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_1xupv_1l2g1_94",
-  "wizard": "awsui_wizard_1xupv_1l2g1_105",
-  "refresh": "awsui_refresh_1xupv_1l2g1_105",
-  "small-container": "awsui_small-container_1xupv_1l2g1_112",
-  "navigation": "awsui_navigation_1xupv_1l2g1_120",
-  "number": "awsui_number_1xupv_1l2g1_148",
-  "circle": "awsui_circle_1xupv_1l2g1_164",
-  "title": "awsui_title_1xupv_1l2g1_172",
-  "active": "awsui_active_1xupv_1l2g1_201",
-  "disabled": "awsui_disabled_1xupv_1l2g1_212",
-  "enabled": "awsui_enabled_1xupv_1l2g1_222",
-  "form": "awsui_form_1xupv_1l2g1_261",
-  "form-header": "awsui_form-header_1xupv_1l2g1_267",
-  "background": "awsui_background_1xupv_1l2g1_278",
-  "form-header-content": "awsui_form-header-content_1xupv_1l2g1_288",
-  "form-component": "awsui_form-component_1xupv_1l2g1_292",
-  "hidden": "awsui_hidden_1xupv_1l2g1_306",
-  "collapsed-steps": "awsui_collapsed-steps_1xupv_1l2g1_310",
-  "collapsed-steps-extra-padding": "awsui_collapsed-steps-extra-padding_1xupv_1l2g1_315",
-  "collapsed-steps-hidden": "awsui_collapsed-steps-hidden_1xupv_1l2g1_318",
-  "form-header-component-wrapper": "awsui_form-header-component-wrapper_1xupv_1l2g1_322",
-  "form-header-component": "awsui_form-header-component_1xupv_1l2g1_322",
-  "navigation-link": "awsui_navigation-link_1xupv_1l2g1_335",
-  "navigation-link-item": "awsui_navigation-link-item_1xupv_1l2g1_336",
-  "navigation-link-label": "awsui_navigation-link-label_1xupv_1l2g1_337",
-  "navigation-link-active": "awsui_navigation-link-active_1xupv_1l2g1_341",
-  "navigation-link-disabled": "awsui_navigation-link-disabled_1xupv_1l2g1_346",
-  "cancel-button": "awsui_cancel-button_1xupv_1l2g1_350",
-  "previous-button": "awsui_previous-button_1xupv_1l2g1_351",
-  "primary-button": "awsui_primary-button_1xupv_1l2g1_352",
-  "skip-to-button": "awsui_skip-to-button_1xupv_1l2g1_353",
-  "action-buttons": "awsui_action-buttons_1xupv_1l2g1_357"
+  "root": "awsui_root_1xupv_ahpoi_94",
+  "wizard": "awsui_wizard_1xupv_ahpoi_105",
+  "refresh": "awsui_refresh_1xupv_ahpoi_105",
+  "small-container": "awsui_small-container_1xupv_ahpoi_112",
+  "navigation": "awsui_navigation_1xupv_ahpoi_121",
+  "number": "awsui_number_1xupv_ahpoi_149",
+  "circle": "awsui_circle_1xupv_ahpoi_165",
+  "title": "awsui_title_1xupv_ahpoi_173",
+  "active": "awsui_active_1xupv_ahpoi_202",
+  "disabled": "awsui_disabled_1xupv_ahpoi_213",
+  "enabled": "awsui_enabled_1xupv_ahpoi_223",
+  "form": "awsui_form_1xupv_ahpoi_262",
+  "form-header": "awsui_form-header_1xupv_ahpoi_268",
+  "background": "awsui_background_1xupv_ahpoi_279",
+  "form-header-content": "awsui_form-header-content_1xupv_ahpoi_289",
+  "form-component": "awsui_form-component_1xupv_ahpoi_293",
+  "hidden": "awsui_hidden_1xupv_ahpoi_307",
+  "collapsed-steps": "awsui_collapsed-steps_1xupv_ahpoi_311",
+  "collapsed-steps-extra-padding": "awsui_collapsed-steps-extra-padding_1xupv_ahpoi_316",
+  "collapsed-steps-hidden": "awsui_collapsed-steps-hidden_1xupv_ahpoi_319",
+  "form-header-component-wrapper": "awsui_form-header-component-wrapper_1xupv_ahpoi_323",
+  "form-header-component": "awsui_form-header-component_1xupv_ahpoi_323",
+  "navigation-link": "awsui_navigation-link_1xupv_ahpoi_336",
+  "navigation-link-item": "awsui_navigation-link-item_1xupv_ahpoi_337",
+  "navigation-link-label": "awsui_navigation-link-label_1xupv_ahpoi_338",
+  "navigation-link-active": "awsui_navigation-link-active_1xupv_ahpoi_342",
+  "navigation-link-disabled": "awsui_navigation-link-disabled_1xupv_ahpoi_347",
+  "cancel-button": "awsui_cancel-button_1xupv_ahpoi_351",
+  "previous-button": "awsui_previous-button_1xupv_ahpoi_352",
+  "primary-button": "awsui_primary-button_1xupv_ahpoi_353",
+  "skip-to-button": "awsui_skip-to-button_1xupv_ahpoi_354",
+  "action-buttons": "awsui_action-buttons_1xupv_ahpoi_358"
 };