@cloudscape-design/components-themeable 3.0.1383 → 3.0.1385

package/lib/internal/template/select/parts/trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"trigger.js","sourceRoot":"","sources":["../../../../src/select/parts/trigger.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 from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport ButtonTrigger from '../../internal/components/button-trigger';\nimport Option from '../../internal/components/option';\nimport { GroupedControlPosition } from '../../internal/context/control-group-context';\nimport { useVisualRefresh } from '../../internal/hooks/use-visual-mode';\nimport { joinStrings } from '../../internal/utils/strings';\nimport { MultiselectProps } from '../../multiselect/interfaces';\nimport InternalToken from '../../token/internal';\nimport { FormFieldValidationControlProps } from '../../types/form-field';\nimport { OptionDefinition } from '../../types/option';\nimport { SelectProps } from '../interfaces';\nimport { SelectTriggerProps } from '../utils/use-select';\n\nimport styles from './styles.css.js';\n\nexport interface TriggerProps extends FormFieldValidationControlProps {\n  placeholder: string | undefined;\n  disabled: boolean | undefined;\n  readOnly?: boolean;\n  triggerProps: SelectTriggerProps;\n  selectedOption: OptionDefinition | null;\n  inlineLabelText?: string;\n  isOpen?: boolean;\n  triggerVariant?: SelectProps.TriggerVariant | MultiselectProps.TriggerVariant;\n  inFilteringToken?: 'root' | 'nested';\n  selectedOptions?: ReadonlyArray<OptionDefinition>;\n  renderOption?: SelectProps.SelectOptionItemRenderer;\n  groupedControlPosition?: GroupedControlPosition | null;\n}\n\nconst Trigger = React.forwardRef(\n  (\n    {\n      ariaLabelledby,\n      ariaDescribedby,\n      controlId,\n      invalid,\n      inlineLabelText,\n      warning,\n      triggerProps,\n      selectedOption,\n      selectedOptions,\n      triggerVariant,\n      inFilteringToken,\n      isOpen,\n      placeholder,\n      disabled,\n      readOnly,\n      renderOption,\n      groupedControlPosition,\n    }: TriggerProps,\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    const isVisualRefresh = useVisualRefresh();\n    const generatedId = useUniqueId();\n    const id = controlId ?? generatedId;\n    const triggerContentId = useUniqueId('trigger-content-');\n\n    let ariaLabelledbyIds = joinStrings(ariaLabelledby, triggerContentId);\n\n    let triggerContent = null;\n    let hasCustomContent = false;\n    if (triggerVariant === 'tokens') {\n      if (selectedOptions?.length) {\n        triggerContent = (\n          <span\n            className={clsx(\n              styles['inline-token-trigger'],\n              disabled && styles['inline-token-trigger--disabled'],\n              isVisualRefresh && styles['visual-refresh']\n            )}\n          >\n            <span className={styles['inline-token-list']}>\n              {selectedOptions.map(({ label }, i) => (\n                <InternalToken key={i} label={label} variant=\"inline\" disabled={disabled} />\n              ))}\n            </span>\n            <span className={styles['inline-token-counter']} id={triggerContentId}>\n              <span className={styles['inline-token-hidden-placeholder']}>{placeholder}</span>\n              <span>({selectedOptions.length})</span>\n            </span>\n          </span>\n        );\n        ariaLabelledbyIds = ariaLabelledby;\n      } else {\n        triggerContent = (\n          <span className={clsx(styles.placeholder, styles.trigger, disabled && styles.disabled)} id={triggerContentId}>\n            {placeholder}\n          </span>\n        );\n      }\n    } else if (!selectedOption) {\n      triggerContent = (\n        <span className={clsx(styles.placeholder, styles.trigger, disabled && styles.disabled)} id={triggerContentId}>\n          {placeholder}\n        </span>\n      );\n    } else if (triggerVariant === 'option') {\n      const triggerCustomContent = renderOption?.({\n        filterText: undefined,\n        item: {\n          type: 'trigger',\n          option: selectedOption,\n        },\n      });\n      if (triggerCustomContent) {\n        hasCustomContent = true;\n        triggerContent = (\n          <Option\n            customContent={triggerCustomContent}\n            id={triggerContentId}\n            option={{ ...selectedOption, disabled }}\n            triggerVariant={true}\n          />\n        );\n      } else {\n        triggerContent = (\n          <Option id={triggerContentId} option={{ ...selectedOption, disabled }} triggerVariant={true} />\n        );\n      }\n    } else {\n      triggerContent = (\n        <span id={triggerContentId} className={styles.trigger}>\n          {selectedOption.label || selectedOption.value}\n        </span>\n      );\n    }\n\n    const mergedRef = useMergeRefs(triggerProps.ref, ref);\n    const triggerButton = (\n      <ButtonTrigger\n        {...triggerProps}\n        id={id}\n        ref={mergedRef}\n        pressed={!!isOpen}\n        disabled={disabled}\n        readOnly={readOnly}\n        invalid={invalid}\n        warning={warning && !invalid}\n        inFilteringToken={inFilteringToken}\n        inlineTokens={triggerVariant === 'tokens'}\n        hasCustomContent={hasCustomContent}\n        ariaDescribedby={ariaDescribedby}\n        ariaLabelledby={ariaLabelledbyIds}\n        groupedControlPosition={groupedControlPosition}\n      >\n        {triggerContent}\n      </ButtonTrigger>\n    );\n    return (\n      <>\n        {inlineLabelText ? (\n          <div className={styles['inline-label-wrapper']}>\n            <label\n              htmlFor={controlId}\n              className={clsx(\n                styles['inline-label'],\n                disabled && styles['inline-label-disabled'],\n                triggerVariant === 'tokens' && styles['inline-label-inline-tokens']\n              )}\n            >\n              {inlineLabelText}\n            </label>\n            <div className={styles['inline-label-trigger-wrapper']}>{triggerButton}</div>\n          </div>\n        ) : (\n          <>{triggerButton}</>\n        )}\n      </>\n    );\n  }\n);\n\nexport default Trigger;\n"]}
+{"version":3,"file":"trigger.js","sourceRoot":"","sources":["../../../../src/select/parts/trigger.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 from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport ButtonTrigger from '../../internal/components/button-trigger';\nimport Option from '../../internal/components/option';\nimport { GroupedControlContextProps } from '../../internal/context/control-group-context';\nimport { useVisualRefresh } from '../../internal/hooks/use-visual-mode';\nimport { joinStrings } from '../../internal/utils/strings';\nimport { MultiselectProps } from '../../multiselect/interfaces';\nimport InternalToken from '../../token/internal';\nimport { FormFieldValidationControlProps } from '../../types/form-field';\nimport { OptionDefinition } from '../../types/option';\nimport { SelectProps } from '../interfaces';\nimport { SelectTriggerProps } from '../utils/use-select';\n\nimport styles from './styles.css.js';\n\nexport interface TriggerProps extends FormFieldValidationControlProps {\n  placeholder: string | undefined;\n  disabled: boolean | undefined;\n  readOnly?: boolean;\n  triggerProps: SelectTriggerProps;\n  selectedOption: OptionDefinition | null;\n  inlineLabelText?: string;\n  isOpen?: boolean;\n  triggerVariant?: SelectProps.TriggerVariant | MultiselectProps.TriggerVariant;\n  inFilteringToken?: 'root' | 'nested';\n  selectedOptions?: ReadonlyArray<OptionDefinition>;\n  renderOption?: SelectProps.SelectOptionItemRenderer;\n  groupedControlProps?: GroupedControlContextProps;\n}\n\nconst Trigger = React.forwardRef(\n  (\n    {\n      ariaLabelledby,\n      ariaDescribedby,\n      controlId,\n      invalid,\n      inlineLabelText,\n      warning,\n      triggerProps,\n      selectedOption,\n      selectedOptions,\n      triggerVariant,\n      inFilteringToken,\n      isOpen,\n      placeholder,\n      disabled,\n      readOnly,\n      renderOption,\n      groupedControlProps,\n    }: TriggerProps,\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    const isVisualRefresh = useVisualRefresh();\n    const generatedId = useUniqueId();\n    const id = controlId ?? generatedId;\n    const triggerContentId = useUniqueId('trigger-content-');\n\n    let ariaLabelledbyIds = joinStrings(ariaLabelledby, triggerContentId);\n\n    let triggerContent = null;\n    let hasCustomContent = false;\n    if (triggerVariant === 'tokens') {\n      if (selectedOptions?.length) {\n        triggerContent = (\n          <span\n            className={clsx(\n              styles['inline-token-trigger'],\n              disabled && styles['inline-token-trigger--disabled'],\n              isVisualRefresh && styles['visual-refresh']\n            )}\n          >\n            <span className={styles['inline-token-list']}>\n              {selectedOptions.map(({ label }, i) => (\n                <InternalToken key={i} label={label} variant=\"inline\" disabled={disabled} />\n              ))}\n            </span>\n            <span className={styles['inline-token-counter']} id={triggerContentId}>\n              <span className={styles['inline-token-hidden-placeholder']}>{placeholder}</span>\n              <span>({selectedOptions.length})</span>\n            </span>\n          </span>\n        );\n        ariaLabelledbyIds = ariaLabelledby;\n      } else {\n        triggerContent = (\n          <span className={clsx(styles.placeholder, styles.trigger, disabled && styles.disabled)} id={triggerContentId}>\n            {placeholder}\n          </span>\n        );\n      }\n    } else if (!selectedOption) {\n      triggerContent = (\n        <span className={clsx(styles.placeholder, styles.trigger, disabled && styles.disabled)} id={triggerContentId}>\n          {placeholder}\n        </span>\n      );\n    } else if (triggerVariant === 'option') {\n      const triggerCustomContent = renderOption?.({\n        filterText: undefined,\n        item: {\n          type: 'trigger',\n          option: selectedOption,\n        },\n      });\n      if (triggerCustomContent) {\n        hasCustomContent = true;\n        triggerContent = (\n          <Option\n            customContent={triggerCustomContent}\n            id={triggerContentId}\n            option={{ ...selectedOption, disabled }}\n            triggerVariant={true}\n          />\n        );\n      } else {\n        triggerContent = (\n          <Option id={triggerContentId} option={{ ...selectedOption, disabled }} triggerVariant={true} />\n        );\n      }\n    } else {\n      triggerContent = (\n        <span id={triggerContentId} className={styles.trigger}>\n          {selectedOption.label || selectedOption.value}\n        </span>\n      );\n    }\n\n    const mergedRef = useMergeRefs(triggerProps.ref, ref);\n    const triggerButton = (\n      <ButtonTrigger\n        {...triggerProps}\n        id={id}\n        ref={mergedRef}\n        pressed={!!isOpen}\n        disabled={disabled}\n        readOnly={readOnly}\n        invalid={invalid}\n        warning={warning && !invalid}\n        inFilteringToken={inFilteringToken}\n        inlineTokens={triggerVariant === 'tokens'}\n        hasCustomContent={hasCustomContent}\n        ariaDescribedby={ariaDescribedby}\n        ariaLabelledby={ariaLabelledbyIds}\n        groupedControlProps={groupedControlProps}\n      >\n        {triggerContent}\n      </ButtonTrigger>\n    );\n    return (\n      <>\n        {inlineLabelText ? (\n          <div className={styles['inline-label-wrapper']}>\n            <label\n              htmlFor={controlId}\n              className={clsx(\n                styles['inline-label'],\n                disabled && styles['inline-label-disabled'],\n                triggerVariant === 'tokens' && styles['inline-label-inline-tokens']\n              )}\n            >\n              {inlineLabelText}\n            </label>\n            <div className={styles['inline-label-trigger-wrapper']}>{triggerButton}</div>\n          </div>\n        ) : (\n          <>{triggerButton}</>\n        )}\n      </>\n    );\n  }\n);\n\nexport default Trigger;\n"]}

package/lib/internal/template/space-between/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/space-between/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAM1C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAMjD,QAAA,MAAM,oBAAoB,uHAiDzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/space-between/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAM1C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAMjD,QAAA,MAAM,oBAAoB,uHAsDzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/lib/internal/template/space-between/internal.js

@@ -14,10 +14,11 @@ const InternalSpaceBetween = forwardRef(({ direction = 'vertical', size, childre
    Flattening the children allows us to "see through" React Fragments and nested arrays.
    */
     const flattenedChildren = flattenChildren(children, 'SpaceBetween');
+    const propagateAlignment = alignItems && direction === 'horizontal';
     return (React.createElement(WithNativeAttributes, { ...baseProps, tag: "div", componentName: "SpaceBetween", nativeAttributes: nativeAttributes, className: clsx(baseProps.className, styles.root, styles[direction], styles[`${direction}-${size}`], alignItems && styles[`align-${alignItems}`]), ref: mergedRef }, flattenedChildren.map(child => {
         // If this react child is a primitive value, the key will be undefined
         const key = child && typeof child === 'object' ? child.key : undefined;
-        return (React.createElement("div", { key: key ? String(key) : undefined, className: styles.child }, child));
+        return (React.createElement("div", { key: key ? String(key) : undefined, className: clsx(styles.child, propagateAlignment && styles['child-aligned']) }, child));
     })));
 });
 export default InternalSpaceBetween;

package/lib/internal/template/space-between/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/space-between/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAE7E,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,oBAAoB,MAAM,0CAA0C,CAAC;AAG5E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,oBAAoB,GAAG,UAAU,CACrC,CACE,EACE,SAAS,GAAG,UAAU,EACtB,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,iBAAiB,EACjB,GAAG,KAAK,EACkB,EAC5B,GAA8B,EAC9B,EAAE;IACF,MAAM,SAAS,GAAG,YAAY,CAAC,GAAG,EAAE,iBAAiB,CAAC,CAAC;IACvD,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IAEtC;;KAEC;IACD,MAAM,iBAAiB,GAAG,eAAe,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;IAEpE,OAAO,CACL,oBAAC,oBAAoB,OACf,SAAS,EACb,GAAG,EAAC,KAAK,EACT,aAAa,EAAC,cAAc,EAC5B,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,IAAI,CACb,SAAS,CAAC,SAAS,EACnB,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,SAAS,CAAC,EACjB,MAAM,CAAC,GAAG,SAAS,IAAI,IAAI,EAAE,CAAC,EAC9B,UAAU,IAAI,MAAM,CAAC,SAAS,UAAU,EAAE,CAAC,CAC5C,EACD,GAAG,EAAE,SAAS,IAEb,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;QAC7B,sEAAsE;QACtE,MAAM,GAAG,GAAG,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAE,KAAgC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;QAEnG,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,IAC7D,KAAK,CACF,CACP,CAAC;IACJ,CAAC,CAAC,CACmB,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { flattenChildren } from '../internal/utils/flatten-children';\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport { SpaceBetweenProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype InternalSpaceBetweenProps = SpaceBetweenProps & InternalBaseComponentProps;\n\nconst InternalSpaceBetween = forwardRef(\n  (\n    {\n      direction = 'vertical',\n      size,\n      children,\n      alignItems,\n      nativeAttributes,\n      __internalRootRef,\n      ...props\n    }: InternalSpaceBetweenProps,\n    ref: React.Ref<HTMLDivElement>\n  ) => {\n    const mergedRef = useMergeRefs(ref, __internalRootRef);\n    const baseProps = getBaseProps(props);\n\n    /*\n   Flattening the children allows us to \"see through\" React Fragments and nested arrays.\n   */\n    const flattenedChildren = flattenChildren(children, 'SpaceBetween');\n\n    return (\n      <WithNativeAttributes\n        {...baseProps}\n        tag=\"div\"\n        componentName=\"SpaceBetween\"\n        nativeAttributes={nativeAttributes}\n        className={clsx(\n          baseProps.className,\n          styles.root,\n          styles[direction],\n          styles[`${direction}-${size}`],\n          alignItems && styles[`align-${alignItems}`]\n        )}\n        ref={mergedRef}\n      >\n        {flattenedChildren.map(child => {\n          // If this react child is a primitive value, the key will be undefined\n          const key = child && typeof child === 'object' ? (child as Record<'key', unknown>).key : undefined;\n\n          return (\n            <div key={key ? String(key) : undefined} className={styles.child}>\n              {child}\n            </div>\n          );\n        })}\n      </WithNativeAttributes>\n    );\n  }\n);\n\nexport default InternalSpaceBetween;\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/space-between/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAE7E,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,oBAAoB,MAAM,0CAA0C,CAAC;AAG5E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,oBAAoB,GAAG,UAAU,CACrC,CACE,EACE,SAAS,GAAG,UAAU,EACtB,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,iBAAiB,EACjB,GAAG,KAAK,EACkB,EAC5B,GAA8B,EAC9B,EAAE;IACF,MAAM,SAAS,GAAG,YAAY,CAAC,GAAG,EAAE,iBAAiB,CAAC,CAAC;IACvD,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IAEtC;;KAEC;IACD,MAAM,iBAAiB,GAAG,eAAe,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;IAEpE,MAAM,kBAAkB,GAAG,UAAU,IAAI,SAAS,KAAK,YAAY,CAAC;IAEpE,OAAO,CACL,oBAAC,oBAAoB,OACf,SAAS,EACb,GAAG,EAAC,KAAK,EACT,aAAa,EAAC,cAAc,EAC5B,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,IAAI,CACb,SAAS,CAAC,SAAS,EACnB,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,SAAS,CAAC,EACjB,MAAM,CAAC,GAAG,SAAS,IAAI,IAAI,EAAE,CAAC,EAC9B,UAAU,IAAI,MAAM,CAAC,SAAS,UAAU,EAAE,CAAC,CAC5C,EACD,GAAG,EAAE,SAAS,IAEb,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;QAC7B,sEAAsE;QACtE,MAAM,GAAG,GAAG,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAE,KAAgC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;QAEnG,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,EAClC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,kBAAkB,IAAI,MAAM,CAAC,eAAe,CAAC,CAAC,IAE3E,KAAK,CACF,CACP,CAAC;IACJ,CAAC,CAAC,CACmB,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { flattenChildren } from '../internal/utils/flatten-children';\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport { SpaceBetweenProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype InternalSpaceBetweenProps = SpaceBetweenProps & InternalBaseComponentProps;\n\nconst InternalSpaceBetween = forwardRef(\n  (\n    {\n      direction = 'vertical',\n      size,\n      children,\n      alignItems,\n      nativeAttributes,\n      __internalRootRef,\n      ...props\n    }: InternalSpaceBetweenProps,\n    ref: React.Ref<HTMLDivElement>\n  ) => {\n    const mergedRef = useMergeRefs(ref, __internalRootRef);\n    const baseProps = getBaseProps(props);\n\n    /*\n   Flattening the children allows us to \"see through\" React Fragments and nested arrays.\n   */\n    const flattenedChildren = flattenChildren(children, 'SpaceBetween');\n\n    const propagateAlignment = alignItems && direction === 'horizontal';\n\n    return (\n      <WithNativeAttributes\n        {...baseProps}\n        tag=\"div\"\n        componentName=\"SpaceBetween\"\n        nativeAttributes={nativeAttributes}\n        className={clsx(\n          baseProps.className,\n          styles.root,\n          styles[direction],\n          styles[`${direction}-${size}`],\n          alignItems && styles[`align-${alignItems}`]\n        )}\n        ref={mergedRef}\n      >\n        {flattenedChildren.map(child => {\n          // If this react child is a primitive value, the key will be undefined\n          const key = child && typeof child === 'object' ? (child as Record<'key', unknown>).key : undefined;\n\n          return (\n            <div\n              key={key ? String(key) : undefined}\n              className={clsx(styles.child, propagateAlignment && styles['child-aligned'])}\n            >\n              {child}\n            </div>\n          );\n        })}\n      </WithNativeAttributes>\n    );\n  }\n);\n\nexport default InternalSpaceBetween;\n"]}

package/lib/internal/template/space-between/styles.css.js

@@ -1,28 +1,29 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_18582_15yy8_9",
-  "child": "awsui_child_18582_15yy8_13",
-  "horizontal": "awsui_horizontal_18582_15yy8_24",
-  "horizontal-xxxs": "awsui_horizontal-xxxs_18582_15yy8_28",
-  "horizontal-xxs": "awsui_horizontal-xxs_18582_15yy8_31",
-  "horizontal-xs": "awsui_horizontal-xs_18582_15yy8_34",
-  "horizontal-s": "awsui_horizontal-s_18582_15yy8_37",
-  "horizontal-m": "awsui_horizontal-m_18582_15yy8_40",
-  "horizontal-l": "awsui_horizontal-l_18582_15yy8_43",
-  "horizontal-xl": "awsui_horizontal-xl_18582_15yy8_46",
-  "horizontal-xxl": "awsui_horizontal-xxl_18582_15yy8_49",
-  "vertical": "awsui_vertical_18582_15yy8_56",
-  "vertical-xxxs": "awsui_vertical-xxxs_18582_15yy8_59",
-  "vertical-xxs": "awsui_vertical-xxs_18582_15yy8_62",
-  "vertical-xs": "awsui_vertical-xs_18582_15yy8_65",
-  "vertical-s": "awsui_vertical-s_18582_15yy8_68",
-  "vertical-m": "awsui_vertical-m_18582_15yy8_71",
-  "vertical-l": "awsui_vertical-l_18582_15yy8_74",
-  "vertical-xl": "awsui_vertical-xl_18582_15yy8_77",
-  "vertical-xxl": "awsui_vertical-xxl_18582_15yy8_80",
-  "align-center": "awsui_align-center_18582_15yy8_84",
-  "align-start": "awsui_align-start_18582_15yy8_88",
-  "align-end": "awsui_align-end_18582_15yy8_92"
+  "root": "awsui_root_18582_7gmeu_9",
+  "child": "awsui_child_18582_7gmeu_13",
+  "horizontal": "awsui_horizontal_18582_7gmeu_24",
+  "horizontal-xxxs": "awsui_horizontal-xxxs_18582_7gmeu_28",
+  "horizontal-xxs": "awsui_horizontal-xxs_18582_7gmeu_31",
+  "horizontal-xs": "awsui_horizontal-xs_18582_7gmeu_34",
+  "horizontal-s": "awsui_horizontal-s_18582_7gmeu_37",
+  "horizontal-m": "awsui_horizontal-m_18582_7gmeu_40",
+  "horizontal-l": "awsui_horizontal-l_18582_7gmeu_43",
+  "horizontal-xl": "awsui_horizontal-xl_18582_7gmeu_46",
+  "horizontal-xxl": "awsui_horizontal-xxl_18582_7gmeu_49",
+  "vertical": "awsui_vertical_18582_7gmeu_56",
+  "vertical-xxxs": "awsui_vertical-xxxs_18582_7gmeu_59",
+  "vertical-xxs": "awsui_vertical-xxs_18582_7gmeu_62",
+  "vertical-xs": "awsui_vertical-xs_18582_7gmeu_65",
+  "vertical-s": "awsui_vertical-s_18582_7gmeu_68",
+  "vertical-m": "awsui_vertical-m_18582_7gmeu_71",
+  "vertical-l": "awsui_vertical-l_18582_7gmeu_74",
+  "vertical-xl": "awsui_vertical-xl_18582_7gmeu_77",
+  "vertical-xxl": "awsui_vertical-xxl_18582_7gmeu_80",
+  "align-center": "awsui_align-center_18582_7gmeu_84",
+  "align-start": "awsui_align-start_18582_7gmeu_88",
+  "align-end": "awsui_align-end_18582_7gmeu_92",
+  "child-aligned": "awsui_child-aligned_18582_7gmeu_96"
 };
   

package/lib/internal/template/space-between/styles.scoped.css

@@ -6,89 +6,94 @@
 /* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_root_18582_15yy8_9:not(#\9) {
+.awsui_root_18582_7gmeu_9:not(#\9) {
   display: flex;
 }
 
-.awsui_child_18582_15yy8_13:not(#\9) {
+.awsui_child_18582_7gmeu_13:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_child_18582_15yy8_13:not(#\9):empty {
+.awsui_child_18582_7gmeu_13:not(#\9):empty {
   display: none;
 }
 
 /*
  * Horizontal variant
  */
-.awsui_horizontal_18582_15yy8_24:not(#\9) {
+.awsui_horizontal_18582_7gmeu_24:not(#\9) {
   flex-direction: row;
   flex-wrap: wrap;
 }
-.awsui_horizontal-xxxs_18582_15yy8_28:not(#\9) {
+.awsui_horizontal-xxxs_18582_7gmeu_28:not(#\9) {
   gap: var(--space-xxxs-3ulqs3, 2px);
 }
-.awsui_horizontal-xxs_18582_15yy8_31:not(#\9) {
+.awsui_horizontal-xxs_18582_7gmeu_31:not(#\9) {
   gap: var(--space-xxs-3o1yoq, 4px);
 }
-.awsui_horizontal-xs_18582_15yy8_34:not(#\9) {
+.awsui_horizontal-xs_18582_7gmeu_34:not(#\9) {
   gap: var(--space-xs-m9b7jf, 8px);
 }
-.awsui_horizontal-s_18582_15yy8_37:not(#\9) {
+.awsui_horizontal-s_18582_7gmeu_37:not(#\9) {
   gap: var(--space-s-kll7oj, 12px);
 }
-.awsui_horizontal-m_18582_15yy8_40:not(#\9) {
+.awsui_horizontal-m_18582_7gmeu_40:not(#\9) {
   gap: var(--space-m-n8iq8o, 16px);
 }
-.awsui_horizontal-l_18582_15yy8_43:not(#\9) {
+.awsui_horizontal-l_18582_7gmeu_43:not(#\9) {
   gap: var(--space-l-dpyxli, 20px);
 }
-.awsui_horizontal-xl_18582_15yy8_46:not(#\9) {
+.awsui_horizontal-xl_18582_7gmeu_46:not(#\9) {
   gap: var(--space-xl-6jh0ay, 24px);
 }
-.awsui_horizontal-xxl_18582_15yy8_49:not(#\9) {
+.awsui_horizontal-xxl_18582_7gmeu_49:not(#\9) {
   gap: var(--space-xxl-xj5vu7, 32px);
 }
 
 /*
  * Vertical variant
  */
-.awsui_vertical_18582_15yy8_56:not(#\9) {
+.awsui_vertical_18582_7gmeu_56:not(#\9) {
   flex-direction: column;
 }
-.awsui_vertical-xxxs_18582_15yy8_59:not(#\9) {
+.awsui_vertical-xxxs_18582_7gmeu_59:not(#\9) {
   row-gap: var(--space-xxxs-3ulqs3, 2px);
 }
-.awsui_vertical-xxs_18582_15yy8_62:not(#\9) {
+.awsui_vertical-xxs_18582_7gmeu_62:not(#\9) {
   row-gap: var(--space-xxs-3o1yoq, 4px);
 }
-.awsui_vertical-xs_18582_15yy8_65:not(#\9) {
+.awsui_vertical-xs_18582_7gmeu_65:not(#\9) {
   row-gap: var(--space-xs-m9b7jf, 8px);
 }
-.awsui_vertical-s_18582_15yy8_68:not(#\9) {
+.awsui_vertical-s_18582_7gmeu_68:not(#\9) {
   row-gap: var(--space-scaled-s-2crg2b, 12px);
 }
-.awsui_vertical-m_18582_15yy8_71:not(#\9) {
+.awsui_vertical-m_18582_7gmeu_71:not(#\9) {
   row-gap: var(--space-scaled-m-lfeh3i, 16px);
 }
-.awsui_vertical-l_18582_15yy8_74:not(#\9) {
+.awsui_vertical-l_18582_7gmeu_74:not(#\9) {
   row-gap: var(--space-scaled-l-33ruz6, 20px);
 }
-.awsui_vertical-xl_18582_15yy8_77:not(#\9) {
+.awsui_vertical-xl_18582_7gmeu_77:not(#\9) {
   row-gap: var(--space-scaled-xl-avp3kz, 24px);
 }
-.awsui_vertical-xxl_18582_15yy8_80:not(#\9) {
+.awsui_vertical-xxl_18582_7gmeu_80:not(#\9) {
   row-gap: var(--space-scaled-xxl-qprsam, 32px);
 }
 
-.awsui_align-center_18582_15yy8_84:not(#\9) {
+.awsui_align-center_18582_7gmeu_84:not(#\9) {
   align-items: center;
 }
 
-.awsui_align-start_18582_15yy8_88:not(#\9) {
+.awsui_align-start_18582_7gmeu_88:not(#\9) {
   align-items: start;
 }
 
-.awsui_align-end_18582_15yy8_92:not(#\9) {
+.awsui_align-end_18582_7gmeu_92:not(#\9) {
   align-items: end;
+}
+
+.awsui_child-aligned_18582_7gmeu_96:not(#\9) {
+  display: flex;
+  align-items: inherit;
 }

package/lib/internal/template/space-between/styles.selectors.js

@@ -2,28 +2,29 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_18582_15yy8_9",
-  "child": "awsui_child_18582_15yy8_13",
-  "horizontal": "awsui_horizontal_18582_15yy8_24",
-  "horizontal-xxxs": "awsui_horizontal-xxxs_18582_15yy8_28",
-  "horizontal-xxs": "awsui_horizontal-xxs_18582_15yy8_31",
-  "horizontal-xs": "awsui_horizontal-xs_18582_15yy8_34",
-  "horizontal-s": "awsui_horizontal-s_18582_15yy8_37",
-  "horizontal-m": "awsui_horizontal-m_18582_15yy8_40",
-  "horizontal-l": "awsui_horizontal-l_18582_15yy8_43",
-  "horizontal-xl": "awsui_horizontal-xl_18582_15yy8_46",
-  "horizontal-xxl": "awsui_horizontal-xxl_18582_15yy8_49",
-  "vertical": "awsui_vertical_18582_15yy8_56",
-  "vertical-xxxs": "awsui_vertical-xxxs_18582_15yy8_59",
-  "vertical-xxs": "awsui_vertical-xxs_18582_15yy8_62",
-  "vertical-xs": "awsui_vertical-xs_18582_15yy8_65",
-  "vertical-s": "awsui_vertical-s_18582_15yy8_68",
-  "vertical-m": "awsui_vertical-m_18582_15yy8_71",
-  "vertical-l": "awsui_vertical-l_18582_15yy8_74",
-  "vertical-xl": "awsui_vertical-xl_18582_15yy8_77",
-  "vertical-xxl": "awsui_vertical-xxl_18582_15yy8_80",
-  "align-center": "awsui_align-center_18582_15yy8_84",
-  "align-start": "awsui_align-start_18582_15yy8_88",
-  "align-end": "awsui_align-end_18582_15yy8_92"
+  "root": "awsui_root_18582_7gmeu_9",
+  "child": "awsui_child_18582_7gmeu_13",
+  "horizontal": "awsui_horizontal_18582_7gmeu_24",
+  "horizontal-xxxs": "awsui_horizontal-xxxs_18582_7gmeu_28",
+  "horizontal-xxs": "awsui_horizontal-xxs_18582_7gmeu_31",
+  "horizontal-xs": "awsui_horizontal-xs_18582_7gmeu_34",
+  "horizontal-s": "awsui_horizontal-s_18582_7gmeu_37",
+  "horizontal-m": "awsui_horizontal-m_18582_7gmeu_40",
+  "horizontal-l": "awsui_horizontal-l_18582_7gmeu_43",
+  "horizontal-xl": "awsui_horizontal-xl_18582_7gmeu_46",
+  "horizontal-xxl": "awsui_horizontal-xxl_18582_7gmeu_49",
+  "vertical": "awsui_vertical_18582_7gmeu_56",
+  "vertical-xxxs": "awsui_vertical-xxxs_18582_7gmeu_59",
+  "vertical-xxs": "awsui_vertical-xxs_18582_7gmeu_62",
+  "vertical-xs": "awsui_vertical-xs_18582_7gmeu_65",
+  "vertical-s": "awsui_vertical-s_18582_7gmeu_68",
+  "vertical-m": "awsui_vertical-m_18582_7gmeu_71",
+  "vertical-l": "awsui_vertical-l_18582_7gmeu_74",
+  "vertical-xl": "awsui_vertical-xl_18582_7gmeu_77",
+  "vertical-xxl": "awsui_vertical-xxl_18582_7gmeu_80",
+  "align-center": "awsui_align-center_18582_7gmeu_84",
+  "align-start": "awsui_align-start_18582_7gmeu_88",
+  "align-end": "awsui_align-end_18582_7gmeu_92",
+  "child-aligned": "awsui_child-aligned_18582_7gmeu_96"
 };
   

package/lib/internal/template/steps/styles.css.js

@@ -1,22 +1,22 @@
 
     import './styles.scoped.css';
     export default {
-  "connector": "awsui_connector_gxp9y_1j8js_9",
-  "connector-hidden": "awsui_connector-hidden_gxp9y_1j8js_13",
-  "header": "awsui_header_gxp9y_1j8js_17",
-  "root": "awsui_root_gxp9y_1j8js_21",
-  "list": "awsui_list_gxp9y_1j8js_54",
-  "container": "awsui_container_gxp9y_1j8js_59",
-  "annotation": "awsui_annotation_gxp9y_1j8js_64",
-  "step-layout": "awsui_step-layout_gxp9y_1j8js_69",
-  "details": "awsui_details_gxp9y_1j8js_75",
-  "custom": "awsui_custom_gxp9y_1j8js_81",
-  "horizontal": "awsui_horizontal_gxp9y_1j8js_85",
-  "content": "awsui_content_gxp9y_1j8js_121",
-  "vertical": "awsui_vertical_gxp9y_1j8js_135",
-  "connector-continuation": "awsui_connector-continuation_gxp9y_1j8js_149",
-  "custom-vertical": "awsui_custom-vertical_gxp9y_1j8js_167",
-  "rail": "awsui_rail_gxp9y_1j8js_167",
-  "with-annotation": "awsui_with-annotation_gxp9y_1j8js_190"
+  "connector": "awsui_connector_gxp9y_absrc_9",
+  "connector-hidden": "awsui_connector-hidden_gxp9y_absrc_13",
+  "header": "awsui_header_gxp9y_absrc_17",
+  "root": "awsui_root_gxp9y_absrc_21",
+  "list": "awsui_list_gxp9y_absrc_54",
+  "container": "awsui_container_gxp9y_absrc_59",
+  "annotation": "awsui_annotation_gxp9y_absrc_64",
+  "step-layout": "awsui_step-layout_gxp9y_absrc_69",
+  "details": "awsui_details_gxp9y_absrc_75",
+  "custom": "awsui_custom_gxp9y_absrc_81",
+  "horizontal": "awsui_horizontal_gxp9y_absrc_85",
+  "content": "awsui_content_gxp9y_absrc_121",
+  "vertical": "awsui_vertical_gxp9y_absrc_135",
+  "connector-continuation": "awsui_connector-continuation_gxp9y_absrc_149",
+  "custom-vertical": "awsui_custom-vertical_gxp9y_absrc_167",
+  "rail": "awsui_rail_gxp9y_absrc_167",
+  "with-annotation": "awsui_with-annotation_gxp9y_absrc_190"
 };
   

package/lib/internal/template/steps/styles.scoped.css

@@ -6,19 +6,19 @@
 /* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_connector_gxp9y_1j8js_9:not(#\9) {
+.awsui_connector_gxp9y_absrc_9:not(#\9) {
   background-color: var(--color-border-divider-default-diwd4w, #eaeded);
 }
 
-.awsui_connector_gxp9y_1j8js_9.awsui_connector-hidden_gxp9y_1j8js_13:not(#\9) {
+.awsui_connector_gxp9y_absrc_9.awsui_connector-hidden_gxp9y_absrc_13:not(#\9) {
   background-color: transparent;
 }
 
-.awsui_header_gxp9y_1j8js_17:not(#\9) {
+.awsui_header_gxp9y_absrc_17:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_root_gxp9y_1j8js_21:not(#\9) {
+.awsui_root_gxp9y_absrc_21:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -51,61 +51,61 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   min-inline-size: 0;
   word-break: break-word;
 }
-.awsui_root_gxp9y_1j8js_21 > .awsui_list_gxp9y_1j8js_54:not(#\9) {
+.awsui_root_gxp9y_absrc_21 > .awsui_list_gxp9y_absrc_54:not(#\9) {
   list-style: none;
   padding-inline-start: 0;
   margin-block: 0;
 }
-.awsui_root_gxp9y_1j8js_21 > .awsui_list_gxp9y_1j8js_54 > .awsui_container_gxp9y_1j8js_59:not(#\9) {
+.awsui_root_gxp9y_absrc_21 > .awsui_list_gxp9y_absrc_54 > .awsui_container_gxp9y_absrc_59:not(#\9) {
   display: grid;
   grid-template-columns: var(--space-static-l-mj9pf2, 20px) 1fr;
   grid-template-rows: minmax(var(--space-static-l-mj9pf2, 20px), auto);
 }
-.awsui_root_gxp9y_1j8js_21 > .awsui_list_gxp9y_1j8js_54 > .awsui_container_gxp9y_1j8js_59 > .awsui_annotation_gxp9y_1j8js_64:not(#\9) {
+.awsui_root_gxp9y_absrc_21 > .awsui_list_gxp9y_absrc_54 > .awsui_container_gxp9y_absrc_59 > .awsui_annotation_gxp9y_absrc_64:not(#\9) {
   justify-self: flex-end;
   min-inline-size: 0;
   color: var(--color-text-status-inactive-fqjc97, #687078);
 }
-.awsui_root_gxp9y_1j8js_21 > .awsui_list_gxp9y_1j8js_54 > .awsui_container_gxp9y_1j8js_59 > .awsui_step-layout_gxp9y_1j8js_69:not(#\9) {
+.awsui_root_gxp9y_absrc_21 > .awsui_list_gxp9y_absrc_54 > .awsui_container_gxp9y_absrc_59 > .awsui_step-layout_gxp9y_absrc_69:not(#\9) {
   display: flex;
   gap: var(--space-xxs-3o1yoq, 4px);
   grid-row: 1;
   grid-column: 1/span 2;
 }
-.awsui_root_gxp9y_1j8js_21 > .awsui_list_gxp9y_1j8js_54 > .awsui_container_gxp9y_1j8js_59 > .awsui_details_gxp9y_1j8js_75:not(#\9) {
+.awsui_root_gxp9y_absrc_21 > .awsui_list_gxp9y_absrc_54 > .awsui_container_gxp9y_absrc_59 > .awsui_details_gxp9y_absrc_75:not(#\9) {
   align-items: center;
   grid-row: 2;
   grid-column: 2;
   margin-block-end: var(--space-static-xs-789l1l, 8px);
 }
-.awsui_root_gxp9y_1j8js_21 > .awsui_list_gxp9y_1j8js_54.awsui_custom_gxp9y_1j8js_81 > .awsui_details_gxp9y_1j8js_75:not(#\9) {
+.awsui_root_gxp9y_absrc_21 > .awsui_list_gxp9y_absrc_54.awsui_custom_gxp9y_absrc_81 > .awsui_details_gxp9y_absrc_75:not(#\9) {
   margin-block-end: 0;
 }
 
-.awsui_horizontal_gxp9y_1j8js_85 > .awsui_list_gxp9y_1j8js_54:not(#\9) {
+.awsui_horizontal_gxp9y_absrc_85 > .awsui_list_gxp9y_absrc_54:not(#\9) {
   display: grid;
   align-items: flex-start;
   grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
   grid-template-rows: auto minmax(var(--space-static-l-mj9pf2, 20px), auto) auto;
   grid-auto-flow: column;
 }
-.awsui_horizontal_gxp9y_1j8js_85 > .awsui_list_gxp9y_1j8js_54 > .awsui_container_gxp9y_1j8js_59:not(#\9) {
+.awsui_horizontal_gxp9y_absrc_85 > .awsui_list_gxp9y_absrc_54 > .awsui_container_gxp9y_absrc_59:not(#\9) {
   grid-row: 1/-1;
   grid-template-rows: subgrid;
   align-items: center;
 }
-.awsui_horizontal_gxp9y_1j8js_85 > .awsui_list_gxp9y_1j8js_54 > .awsui_container_gxp9y_1j8js_59 > .awsui_annotation_gxp9y_1j8js_64:not(#\9) {
+.awsui_horizontal_gxp9y_absrc_85 > .awsui_list_gxp9y_absrc_54 > .awsui_container_gxp9y_absrc_59 > .awsui_annotation_gxp9y_absrc_64:not(#\9) {
   justify-self: flex-start;
   align-self: flex-end;
   grid-row: 1;
   grid-column: 1/span 2;
   padding-inline-end: var(--space-xs-m9b7jf, 8px);
 }
-.awsui_horizontal_gxp9y_1j8js_85 > .awsui_list_gxp9y_1j8js_54 > .awsui_container_gxp9y_1j8js_59 > .awsui_step-layout_gxp9y_1j8js_69:not(#\9) {
+.awsui_horizontal_gxp9y_absrc_85 > .awsui_list_gxp9y_absrc_54 > .awsui_container_gxp9y_absrc_59 > .awsui_step-layout_gxp9y_absrc_69:not(#\9) {
   grid-row: 2;
   align-items: center;
 }
-.awsui_horizontal_gxp9y_1j8js_85 > .awsui_list_gxp9y_1j8js_54 > .awsui_container_gxp9y_1j8js_59 > .awsui_step-layout_gxp9y_1j8js_69 > .awsui_connector_gxp9y_1j8js_9:not(#\9) {
+.awsui_horizontal_gxp9y_absrc_85 > .awsui_list_gxp9y_absrc_54 > .awsui_container_gxp9y_absrc_59 > .awsui_step-layout_gxp9y_absrc_69 > .awsui_connector_gxp9y_absrc_9:not(#\9) {
   display: block;
   flex: 1;
   margin-block: 0;
@@ -118,35 +118,35 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   min-inline-size: var(--space-static-xs-789l1l, 8px);
   margin-inline-end: var(--space-static-xxs-vzto3j, 4px);
 }
-.awsui_horizontal_gxp9y_1j8js_85 > .awsui_list_gxp9y_1j8js_54 > .awsui_container_gxp9y_1j8js_59 > .awsui_content_gxp9y_1j8js_121:not(#\9) {
+.awsui_horizontal_gxp9y_absrc_85 > .awsui_list_gxp9y_absrc_54 > .awsui_container_gxp9y_absrc_59 > .awsui_content_gxp9y_absrc_121:not(#\9) {
   align-self: flex-start;
   grid-row: 3;
   grid-column: 1/span 3;
   min-inline-size: 0;
   padding-inline-end: var(--space-xs-m9b7jf, 8px);
 }
-.awsui_horizontal_gxp9y_1j8js_85 > .awsui_list_gxp9y_1j8js_54 > .awsui_container_gxp9y_1j8js_59 > .awsui_content_gxp9y_1j8js_121 > .awsui_details_gxp9y_1j8js_75:not(#\9) {
+.awsui_horizontal_gxp9y_absrc_85 > .awsui_list_gxp9y_absrc_54 > .awsui_container_gxp9y_absrc_59 > .awsui_content_gxp9y_absrc_121 > .awsui_details_gxp9y_absrc_75:not(#\9) {
   margin-block-end: var(--space-static-xs-789l1l, 8px);
 }
-.awsui_horizontal_gxp9y_1j8js_85 > .awsui_list_gxp9y_1j8js_54 > .awsui_container_gxp9y_1j8js_59:not(#\9):last-child > .awsui_step-layout_gxp9y_1j8js_69 > .awsui_connector_gxp9y_1j8js_9 {
+.awsui_horizontal_gxp9y_absrc_85 > .awsui_list_gxp9y_absrc_54 > .awsui_container_gxp9y_absrc_59:not(#\9):last-child > .awsui_step-layout_gxp9y_absrc_69 > .awsui_connector_gxp9y_absrc_9 {
   display: none;
 }
 
-.awsui_vertical_gxp9y_1j8js_135 > .awsui_list_gxp9y_1j8js_54 > .awsui_container_gxp9y_1j8js_59 > .awsui_step-layout_gxp9y_1j8js_69:not(#\9) {
+.awsui_vertical_gxp9y_absrc_135 > .awsui_list_gxp9y_absrc_54 > .awsui_container_gxp9y_absrc_59 > .awsui_step-layout_gxp9y_absrc_69:not(#\9) {
   display: grid;
   grid-template-columns: subgrid;
   grid-template-rows: auto 1fr;
   gap: 0;
 }
-.awsui_vertical_gxp9y_1j8js_135 > .awsui_list_gxp9y_1j8js_54 > .awsui_container_gxp9y_1j8js_59 > .awsui_step-layout_gxp9y_1j8js_69 > :not(#\9):first-child {
+.awsui_vertical_gxp9y_absrc_135 > .awsui_list_gxp9y_absrc_54 > .awsui_container_gxp9y_absrc_59 > .awsui_step-layout_gxp9y_absrc_69 > :not(#\9):first-child {
   grid-column: 1/-1;
 }
-.awsui_vertical_gxp9y_1j8js_135 > .awsui_list_gxp9y_1j8js_54 > .awsui_container_gxp9y_1j8js_59 > .awsui_step-layout_gxp9y_1j8js_69 > .awsui_details_gxp9y_1j8js_75:not(#\9) {
+.awsui_vertical_gxp9y_absrc_135 > .awsui_list_gxp9y_absrc_54 > .awsui_container_gxp9y_absrc_59 > .awsui_step-layout_gxp9y_absrc_69 > .awsui_details_gxp9y_absrc_75:not(#\9) {
   grid-row: 2;
   grid-column: 2;
   margin-block-end: var(--space-static-xs-789l1l, 8px);
 }
-.awsui_vertical_gxp9y_1j8js_135 > .awsui_list_gxp9y_1j8js_54 > .awsui_container_gxp9y_1j8js_59 > .awsui_step-layout_gxp9y_1j8js_69 > .awsui_connector-continuation_gxp9y_1j8js_149:not(#\9) {
+.awsui_vertical_gxp9y_absrc_135 > .awsui_list_gxp9y_absrc_54 > .awsui_container_gxp9y_absrc_59 > .awsui_step-layout_gxp9y_absrc_69 > .awsui_connector-continuation_gxp9y_absrc_149:not(#\9) {
   grid-row: 2;
   grid-column: 1;
   justify-self: center;
@@ -160,17 +160,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   position: relative;
   inset-inline-end: var(--space-static-xxxs-opeihl, 2px);
 }
-.awsui_vertical_gxp9y_1j8js_135 > .awsui_list_gxp9y_1j8js_54 > :not(#\9):last-of-type > .awsui_step-layout_gxp9y_1j8js_69 > .awsui_connector-continuation_gxp9y_1j8js_149 {
+.awsui_vertical_gxp9y_absrc_135 > .awsui_list_gxp9y_absrc_54 > :not(#\9):last-of-type > .awsui_step-layout_gxp9y_absrc_69 > .awsui_connector-continuation_gxp9y_absrc_149 {
   display: none;
 }
 
-.awsui_root_gxp9y_1j8js_21 > .awsui_list_gxp9y_1j8js_54 > .awsui_container_gxp9y_1j8js_59.awsui_custom-vertical_gxp9y_1j8js_167 > .awsui_rail_gxp9y_1j8js_167:not(#\9) {
+.awsui_root_gxp9y_absrc_21 > .awsui_list_gxp9y_absrc_54 > .awsui_container_gxp9y_absrc_59.awsui_custom-vertical_gxp9y_absrc_167 > .awsui_rail_gxp9y_absrc_167:not(#\9) {
   grid-column: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
-.awsui_root_gxp9y_1j8js_21 > .awsui_list_gxp9y_1j8js_54 > .awsui_container_gxp9y_1j8js_59.awsui_custom-vertical_gxp9y_1j8js_167 > .awsui_rail_gxp9y_1j8js_167 > .awsui_connector_gxp9y_1j8js_9:not(#\9) {
+.awsui_root_gxp9y_absrc_21 > .awsui_list_gxp9y_absrc_54 > .awsui_container_gxp9y_absrc_59.awsui_custom-vertical_gxp9y_absrc_167 > .awsui_rail_gxp9y_absrc_167 > .awsui_connector_gxp9y_absrc_9:not(#\9) {
   grid-row: auto;
   grid-column: auto;
   flex: 1 1 auto;
@@ -180,39 +180,39 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   block-size: auto;
   min-block-size: var(--space-static-xs-789l1l, 8px);
   inset-inline-end: 0;
-  margin-block: var(--space-static-xxs-vzto3j, 4px) 0;
+  margin-block: 0;
 }
-.awsui_root_gxp9y_1j8js_21 > .awsui_list_gxp9y_1j8js_54 > .awsui_container_gxp9y_1j8js_59.awsui_custom-vertical_gxp9y_1j8js_167 > .awsui_content_gxp9y_1j8js_121:not(#\9) {
+.awsui_root_gxp9y_absrc_21 > .awsui_list_gxp9y_absrc_54 > .awsui_container_gxp9y_absrc_59.awsui_custom-vertical_gxp9y_absrc_167 > .awsui_content_gxp9y_absrc_121:not(#\9) {
   grid-column: 2;
   min-inline-size: 0;
 }
 
-.awsui_root_gxp9y_1j8js_21 > .awsui_list_gxp9y_1j8js_54.awsui_with-annotation_gxp9y_1j8js_190:not(#\9) {
+.awsui_root_gxp9y_absrc_21 > .awsui_list_gxp9y_absrc_54.awsui_with-annotation_gxp9y_absrc_190:not(#\9) {
   display: grid;
   grid-template-columns: fit-content(50%) var(--space-static-l-mj9pf2, 20px) 1fr;
 }
-.awsui_root_gxp9y_1j8js_21 > .awsui_list_gxp9y_1j8js_54.awsui_with-annotation_gxp9y_1j8js_190 > .awsui_container_gxp9y_1j8js_59:not(#\9) {
+.awsui_root_gxp9y_absrc_21 > .awsui_list_gxp9y_absrc_54.awsui_with-annotation_gxp9y_absrc_190 > .awsui_container_gxp9y_absrc_59:not(#\9) {
   grid-column: 1/-1;
   grid-template-columns: subgrid;
 }
-.awsui_root_gxp9y_1j8js_21 > .awsui_list_gxp9y_1j8js_54.awsui_with-annotation_gxp9y_1j8js_190 > .awsui_container_gxp9y_1j8js_59 > .awsui_annotation_gxp9y_1j8js_64:not(#\9) {
+.awsui_root_gxp9y_absrc_21 > .awsui_list_gxp9y_absrc_54.awsui_with-annotation_gxp9y_absrc_190 > .awsui_container_gxp9y_absrc_59 > .awsui_annotation_gxp9y_absrc_64:not(#\9) {
   grid-row: 1;
   grid-column: 1;
   padding-inline-end: var(--space-xxs-3o1yoq, 4px);
 }
-.awsui_root_gxp9y_1j8js_21 > .awsui_list_gxp9y_1j8js_54.awsui_with-annotation_gxp9y_1j8js_190 > .awsui_container_gxp9y_1j8js_59:not(#\9):not(.awsui_custom-vertical_gxp9y_1j8js_167) > .awsui_step-layout_gxp9y_1j8js_69 {
+.awsui_root_gxp9y_absrc_21 > .awsui_list_gxp9y_absrc_54.awsui_with-annotation_gxp9y_absrc_190 > .awsui_container_gxp9y_absrc_59:not(#\9):not(.awsui_custom-vertical_gxp9y_absrc_167) > .awsui_step-layout_gxp9y_absrc_69 {
   grid-column: 2/span 2;
 }
-.awsui_root_gxp9y_1j8js_21 > .awsui_list_gxp9y_1j8js_54.awsui_with-annotation_gxp9y_1j8js_190 > .awsui_container_gxp9y_1j8js_59:not(#\9):not(.awsui_custom-vertical_gxp9y_1j8js_167) > .awsui_details_gxp9y_1j8js_75 {
+.awsui_root_gxp9y_absrc_21 > .awsui_list_gxp9y_absrc_54.awsui_with-annotation_gxp9y_absrc_190 > .awsui_container_gxp9y_absrc_59:not(#\9):not(.awsui_custom-vertical_gxp9y_absrc_167) > .awsui_details_gxp9y_absrc_75 {
   grid-column: 3;
 }
-.awsui_root_gxp9y_1j8js_21 > .awsui_list_gxp9y_1j8js_54.awsui_with-annotation_gxp9y_1j8js_190 > .awsui_container_gxp9y_1j8js_59.awsui_custom-vertical_gxp9y_1j8js_167 > .awsui_rail_gxp9y_1j8js_167:not(#\9) {
+.awsui_root_gxp9y_absrc_21 > .awsui_list_gxp9y_absrc_54.awsui_with-annotation_gxp9y_absrc_190 > .awsui_container_gxp9y_absrc_59.awsui_custom-vertical_gxp9y_absrc_167 > .awsui_rail_gxp9y_absrc_167:not(#\9) {
   grid-column: 2;
 }
-.awsui_root_gxp9y_1j8js_21 > .awsui_list_gxp9y_1j8js_54.awsui_with-annotation_gxp9y_1j8js_190 > .awsui_container_gxp9y_1j8js_59.awsui_custom-vertical_gxp9y_1j8js_167 > .awsui_content_gxp9y_1j8js_121:not(#\9) {
+.awsui_root_gxp9y_absrc_21 > .awsui_list_gxp9y_absrc_54.awsui_with-annotation_gxp9y_absrc_190 > .awsui_container_gxp9y_absrc_59.awsui_custom-vertical_gxp9y_absrc_167 > .awsui_content_gxp9y_absrc_121:not(#\9) {
   grid-column: 3;
 }
 
-.awsui_root_gxp9y_1j8js_21 > .awsui_list_gxp9y_1j8js_54 > .awsui_container_gxp9y_1j8js_59.awsui_custom-vertical_gxp9y_1j8js_167:not(#\9):last-of-type > .awsui_rail_gxp9y_1j8js_167 > .awsui_connector_gxp9y_1j8js_9 {
+.awsui_root_gxp9y_absrc_21 > .awsui_list_gxp9y_absrc_54 > .awsui_container_gxp9y_absrc_59.awsui_custom-vertical_gxp9y_absrc_167:not(#\9):last-of-type > .awsui_rail_gxp9y_absrc_167 > .awsui_connector_gxp9y_absrc_9 {
   display: none;
 }

package/lib/internal/template/steps/styles.selectors.js

@@ -2,22 +2,22 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "connector": "awsui_connector_gxp9y_1j8js_9",
-  "connector-hidden": "awsui_connector-hidden_gxp9y_1j8js_13",
-  "header": "awsui_header_gxp9y_1j8js_17",
-  "root": "awsui_root_gxp9y_1j8js_21",
-  "list": "awsui_list_gxp9y_1j8js_54",
-  "container": "awsui_container_gxp9y_1j8js_59",
-  "annotation": "awsui_annotation_gxp9y_1j8js_64",
-  "step-layout": "awsui_step-layout_gxp9y_1j8js_69",
-  "details": "awsui_details_gxp9y_1j8js_75",
-  "custom": "awsui_custom_gxp9y_1j8js_81",
-  "horizontal": "awsui_horizontal_gxp9y_1j8js_85",
-  "content": "awsui_content_gxp9y_1j8js_121",
-  "vertical": "awsui_vertical_gxp9y_1j8js_135",
-  "connector-continuation": "awsui_connector-continuation_gxp9y_1j8js_149",
-  "custom-vertical": "awsui_custom-vertical_gxp9y_1j8js_167",
-  "rail": "awsui_rail_gxp9y_1j8js_167",
-  "with-annotation": "awsui_with-annotation_gxp9y_1j8js_190"
+  "connector": "awsui_connector_gxp9y_absrc_9",
+  "connector-hidden": "awsui_connector-hidden_gxp9y_absrc_13",
+  "header": "awsui_header_gxp9y_absrc_17",
+  "root": "awsui_root_gxp9y_absrc_21",
+  "list": "awsui_list_gxp9y_absrc_54",
+  "container": "awsui_container_gxp9y_absrc_59",
+  "annotation": "awsui_annotation_gxp9y_absrc_64",
+  "step-layout": "awsui_step-layout_gxp9y_absrc_69",
+  "details": "awsui_details_gxp9y_absrc_75",
+  "custom": "awsui_custom_gxp9y_absrc_81",
+  "horizontal": "awsui_horizontal_gxp9y_absrc_85",
+  "content": "awsui_content_gxp9y_absrc_121",
+  "vertical": "awsui_vertical_gxp9y_absrc_135",
+  "connector-continuation": "awsui_connector-continuation_gxp9y_absrc_149",
+  "custom-vertical": "awsui_custom-vertical_gxp9y_absrc_167",
+  "rail": "awsui_rail_gxp9y_absrc_167",
+  "with-annotation": "awsui_with-annotation_gxp9y_absrc_190"
 };