@cloudscape-design/components 3.0.337 → 3.0.338

package/attribute-editor/row.js.map

@@ -1 +1 @@
-{"version":3,"file":"row.js","sourceRoot":"lib/default/","sources":["attribute-editor/row.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 InternalBox from '../box/internal';\nimport styles from './styles.css.js';\nimport React, { useCallback } from 'react';\nimport InternalFormField from '../form-field/internal';\nimport InternalColumnLayout, { ColumnLayoutBreakpoint } from '../column-layout/internal';\nimport { AttributeEditorProps } from './interfaces';\nimport { ButtonProps } from '../button/interfaces';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport InternalGrid from '../grid/internal';\nimport { InternalButton } from '../button/internal';\nimport clsx from 'clsx';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useInternalI18n } from '../internal/i18n/context';\n\nconst Divider = () => <InternalBox className={styles.divider} padding={{ top: 'l' }} />;\n\nexport interface RowProps<T> {\n  breakpoint: ColumnLayoutBreakpoint | null;\n  item: T;\n  definition: ReadonlyArray<AttributeEditorProps.FieldDefinition<T>>;\n  i18nStrings: AttributeEditorProps.I18nStrings | undefined;\n  index: number;\n  removable: boolean;\n  removeButtonText?: string;\n  removeButtonRefs: Array<ButtonProps.Ref | undefined>;\n  onRemoveButtonClick?: NonCancelableEventHandler<AttributeEditorProps.RemoveButtonClickDetail>;\n}\n\nfunction render<T>(\n  item: T,\n  itemIndex: number,\n  slot: AttributeEditorProps.FieldRenderable<T> | React.ReactNode | undefined\n) {\n  return typeof slot === 'function' ? slot(item, itemIndex) : slot;\n}\n\nconst GRID_DEFINITION = [{ colspan: { default: 12, xs: 9 } }];\nconst REMOVABLE_GRID_DEFINITION = [{ colspan: { default: 12, xs: 9 } }, { colspan: { default: 12, xs: 3 } }];\nexport const Row = React.memo(\n  <T,>({\n    breakpoint,\n    item,\n    definition,\n    i18nStrings = {},\n    index,\n    removable,\n    removeButtonText,\n    removeButtonRefs,\n    onRemoveButtonClick,\n  }: RowProps<T>) => {\n    const i18n = useInternalI18n('attribute-editor');\n    const isNarrowViewport = breakpoint === 'default' || breakpoint === 'xxs';\n    const isWideViewport = !isNarrowViewport;\n\n    const handleRemoveClick = useCallback(() => {\n      fireNonCancelableEvent(onRemoveButtonClick, { itemIndex: index });\n    }, [onRemoveButtonClick, index]);\n\n    const firstControlId = useUniqueId('first-control-id-');\n\n    return (\n      <InternalBox className={styles.row} margin={{ bottom: 's' }}>\n        <div role=\"group\" aria-labelledby={`${firstControlId}-label ${firstControlId}`}>\n          <InternalGrid\n            __breakpoint={breakpoint}\n            gridDefinition={removable ? REMOVABLE_GRID_DEFINITION : GRID_DEFINITION}\n          >\n            <InternalColumnLayout\n              className={styles['row-control']}\n              columns={definition.length}\n              __breakpoint={breakpoint}\n            >\n              {definition.map(({ info, label, constraintText, errorText, control }, defIndex) => (\n                <InternalFormField\n                  key={defIndex}\n                  className={styles.field}\n                  label={label}\n                  info={info}\n                  constraintText={render(item, index, constraintText)}\n                  errorText={render(item, index, errorText)}\n                  stretch={true}\n                  i18nStrings={{ errorIconAriaLabel: i18nStrings.errorIconAriaLabel }}\n                  __hideLabel={isWideViewport && index > 0}\n                  controlId={defIndex === 0 ? firstControlId : undefined}\n                >\n                  {render(item, index, control)}\n                </InternalFormField>\n              ))}\n            </InternalColumnLayout>\n            {removable && (\n              <ButtonContainer\n                index={index}\n                isNarrowViewport={isNarrowViewport}\n                hasLabel={definition.some(row => row.label)}\n              >\n                <InternalButton\n                  className={styles['remove-button']}\n                  formAction=\"none\"\n                  ref={ref => {\n                    removeButtonRefs[index] = ref ?? undefined;\n                  }}\n                  ariaLabel={i18nStrings.removeButtonAriaLabel?.(item)}\n                  onClick={handleRemoveClick}\n                >\n                  {i18n('removeButtonText', removeButtonText)}\n                </InternalButton>\n              </ButtonContainer>\n            )}\n          </InternalGrid>\n        </div>\n        {isNarrowViewport && <Divider />}\n      </InternalBox>\n    );\n  }\n);\n\ninterface ButtonContainer {\n  index: number;\n  children: React.ReactNode;\n  isNarrowViewport: boolean;\n  hasLabel: boolean;\n}\n\nconst ButtonContainer = ({ index, children, isNarrowViewport, hasLabel }: ButtonContainer) => (\n  <div\n    className={clsx({\n      [styles['button-container-haslabel']]: !isNarrowViewport && index === 0 && hasLabel,\n      [styles['button-container-nolabel']]: !isNarrowViewport && index === 0 && !hasLabel,\n      [styles['right-align']]: isNarrowViewport,\n    })}\n  >\n    {children}\n  </div>\n);\n"]}
+{"version":3,"file":"row.js","sourceRoot":"lib/default/","sources":["attribute-editor/row.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 InternalBox from '../box/internal';\nimport styles from './styles.css.js';\nimport React, { useCallback } from 'react';\nimport InternalFormField from '../form-field/internal';\nimport InternalColumnLayout, { ColumnLayoutBreakpoint } from '../column-layout/internal';\nimport { AttributeEditorProps } from './interfaces';\nimport { ButtonProps } from '../button/interfaces';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport InternalGrid from '../grid/internal';\nimport { InternalButton } from '../button/internal';\nimport clsx from 'clsx';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useInternalI18n } from '../internal/i18n/context';\n\nconst Divider = () => <InternalBox className={styles.divider} padding={{ top: 'l' }} />;\n\nexport interface RowProps<T> {\n  breakpoint: ColumnLayoutBreakpoint | null;\n  item: T;\n  definition: ReadonlyArray<AttributeEditorProps.FieldDefinition<T>>;\n  i18nStrings: AttributeEditorProps.I18nStrings | undefined;\n  index: number;\n  removable: boolean;\n  removeButtonText?: string;\n  removeButtonRefs: Array<ButtonProps.Ref | undefined>;\n  onRemoveButtonClick?: NonCancelableEventHandler<AttributeEditorProps.RemoveButtonClickDetail>;\n  removeButtonAriaLabel?: (item: T) => string;\n}\n\nfunction render<T>(\n  item: T,\n  itemIndex: number,\n  slot: AttributeEditorProps.FieldRenderable<T> | React.ReactNode | undefined\n) {\n  return typeof slot === 'function' ? slot(item, itemIndex) : slot;\n}\n\nconst GRID_DEFINITION = [{ colspan: { default: 12, xs: 9 } }];\nconst REMOVABLE_GRID_DEFINITION = [{ colspan: { default: 12, xs: 9 } }, { colspan: { default: 12, xs: 3 } }];\nexport const Row = React.memo(\n  <T,>({\n    breakpoint,\n    item,\n    definition,\n    i18nStrings = {},\n    index,\n    removable,\n    removeButtonText,\n    removeButtonRefs,\n    onRemoveButtonClick,\n    removeButtonAriaLabel,\n  }: RowProps<T>) => {\n    const i18n = useInternalI18n('attribute-editor');\n    const isNarrowViewport = breakpoint === 'default' || breakpoint === 'xxs';\n    const isWideViewport = !isNarrowViewport;\n\n    const handleRemoveClick = useCallback(() => {\n      fireNonCancelableEvent(onRemoveButtonClick, { itemIndex: index });\n    }, [onRemoveButtonClick, index]);\n\n    const firstControlId = useUniqueId('first-control-id-');\n\n    return (\n      <InternalBox className={styles.row} margin={{ bottom: 's' }}>\n        <div role=\"group\" aria-labelledby={`${firstControlId}-label ${firstControlId}`}>\n          <InternalGrid\n            __breakpoint={breakpoint}\n            gridDefinition={removable ? REMOVABLE_GRID_DEFINITION : GRID_DEFINITION}\n          >\n            <InternalColumnLayout\n              className={styles['row-control']}\n              columns={definition.length}\n              __breakpoint={breakpoint}\n            >\n              {definition.map(({ info, label, constraintText, errorText, control }, defIndex) => (\n                <InternalFormField\n                  key={defIndex}\n                  className={styles.field}\n                  label={label}\n                  info={info}\n                  constraintText={render(item, index, constraintText)}\n                  errorText={render(item, index, errorText)}\n                  stretch={true}\n                  i18nStrings={{ errorIconAriaLabel: i18nStrings.errorIconAriaLabel }}\n                  __hideLabel={isWideViewport && index > 0}\n                  controlId={defIndex === 0 ? firstControlId : undefined}\n                >\n                  {render(item, index, control)}\n                </InternalFormField>\n              ))}\n            </InternalColumnLayout>\n            {removable && (\n              <ButtonContainer\n                index={index}\n                isNarrowViewport={isNarrowViewport}\n                hasLabel={definition.some(row => row.label)}\n              >\n                <InternalButton\n                  className={styles['remove-button']}\n                  formAction=\"none\"\n                  ref={ref => {\n                    removeButtonRefs[index] = ref ?? undefined;\n                  }}\n                  ariaLabel={(removeButtonAriaLabel ?? i18nStrings.removeButtonAriaLabel)?.(item)}\n                  onClick={handleRemoveClick}\n                >\n                  {i18n('removeButtonText', removeButtonText)}\n                </InternalButton>\n              </ButtonContainer>\n            )}\n          </InternalGrid>\n        </div>\n        {isNarrowViewport && <Divider />}\n      </InternalBox>\n    );\n  }\n) as <T>(props: RowProps<T>) => JSX.Element;\n\ninterface ButtonContainer {\n  index: number;\n  children: React.ReactNode;\n  isNarrowViewport: boolean;\n  hasLabel: boolean;\n}\n\nconst ButtonContainer = ({ index, children, isNarrowViewport, hasLabel }: ButtonContainer) => (\n  <div\n    className={clsx({\n      [styles['button-container-haslabel']]: !isNarrowViewport && index === 0 && hasLabel,\n      [styles['button-container-nolabel']]: !isNarrowViewport && index === 0 && !hasLabel,\n      [styles['right-align']]: isNarrowViewport,\n    })}\n  >\n    {children}\n  </div>\n);\n"]}

package/box/styles.css.js

@@ -1,194 +1,194 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_18wu0_i4x0n_93",
-  "box": "awsui_box_18wu0_i4x0n_207",
-  "p-variant": "awsui_p-variant_18wu0_i4x0n_207",
-  "color-default": "awsui_color-default_18wu0_i4x0n_207",
-  "b-variant": "awsui_b-variant_18wu0_i4x0n_207",
-  "strong-variant": "awsui_strong-variant_18wu0_i4x0n_207",
-  "code-variant": "awsui_code-variant_18wu0_i4x0n_207",
-  "pre-variant": "awsui_pre-variant_18wu0_i4x0n_207",
-  "samp-variant": "awsui_samp-variant_18wu0_i4x0n_207",
-  "h1-variant": "awsui_h1-variant_18wu0_i4x0n_211",
-  "h2-variant": "awsui_h2-variant_18wu0_i4x0n_211",
-  "h3-variant": "awsui_h3-variant_18wu0_i4x0n_211",
-  "h4-variant": "awsui_h4-variant_18wu0_i4x0n_211",
-  "h5-variant": "awsui_h5-variant_18wu0_i4x0n_211",
-  "small-variant": "awsui_small-variant_18wu0_i4x0n_215",
-  "a-variant": "awsui_a-variant_18wu0_i4x0n_219",
-  "font-size-default": "awsui_font-size-default_18wu0_i4x0n_223",
-  "font-weight-default": "awsui_font-weight-default_18wu0_i4x0n_263",
-  "key-label-variant": "awsui_key-label-variant_18wu0_i4x0n_303",
-  "value-large-variant": "awsui_value-large-variant_18wu0_i4x0n_310",
-  "font-weight-heavy": "awsui_font-weight-heavy_18wu0_i4x0n_317",
-  "color-inverted": "awsui_color-inverted_18wu0_i4x0n_322",
-  "color-text-label": "awsui_color-text-label_18wu0_i4x0n_325",
-  "color-text-body-secondary": "awsui_color-text-body-secondary_18wu0_i4x0n_328",
-  "color-text-status-error": "awsui_color-text-status-error_18wu0_i4x0n_331",
-  "color-text-status-success": "awsui_color-text-status-success_18wu0_i4x0n_334",
-  "color-text-status-info": "awsui_color-text-status-info_18wu0_i4x0n_337",
-  "color-text-status-inactive": "awsui_color-text-status-inactive_18wu0_i4x0n_340",
-  "color-inherit": "awsui_color-inherit_18wu0_i4x0n_343",
-  "font-size-body-s": "awsui_font-size-body-s_18wu0_i4x0n_346",
-  "font-size-body-m": "awsui_font-size-body-m_18wu0_i4x0n_351",
-  "font-size-heading-xs": "awsui_font-size-heading-xs_18wu0_i4x0n_355",
-  "font-size-heading-s": "awsui_font-size-heading-s_18wu0_i4x0n_359",
-  "font-size-heading-m": "awsui_font-size-heading-m_18wu0_i4x0n_364",
-  "font-size-heading-l": "awsui_font-size-heading-l_18wu0_i4x0n_369",
-  "font-size-heading-xl": "awsui_font-size-heading-xl_18wu0_i4x0n_374",
-  "font-size-display-l": "awsui_font-size-display-l_18wu0_i4x0n_379",
-  "font-weight-light": "awsui_font-weight-light_18wu0_i4x0n_384",
-  "font-weight-normal": "awsui_font-weight-normal_18wu0_i4x0n_387",
-  "font-weight-bold": "awsui_font-weight-bold_18wu0_i4x0n_390",
-  "t-left": "awsui_t-left_18wu0_i4x0n_397",
-  "t-right": "awsui_t-right_18wu0_i4x0n_401",
-  "t-center": "awsui_t-center_18wu0_i4x0n_405",
-  "p-n": "awsui_p-n_18wu0_i4x0n_506",
-  "p-top-n": "awsui_p-top-n_18wu0_i4x0n_510",
-  "p-vertical-n": "awsui_p-vertical-n_18wu0_i4x0n_511",
-  "p-right-n": "awsui_p-right-n_18wu0_i4x0n_515",
-  "p-horizontal-n": "awsui_p-horizontal-n_18wu0_i4x0n_516",
-  "p-bottom-n": "awsui_p-bottom-n_18wu0_i4x0n_520",
-  "p-left-n": "awsui_p-left-n_18wu0_i4x0n_525",
-  "p-xxxs": "awsui_p-xxxs_18wu0_i4x0n_530",
-  "p-top-xxxs": "awsui_p-top-xxxs_18wu0_i4x0n_534",
-  "p-vertical-xxxs": "awsui_p-vertical-xxxs_18wu0_i4x0n_535",
-  "p-right-xxxs": "awsui_p-right-xxxs_18wu0_i4x0n_539",
-  "p-horizontal-xxxs": "awsui_p-horizontal-xxxs_18wu0_i4x0n_540",
-  "p-bottom-xxxs": "awsui_p-bottom-xxxs_18wu0_i4x0n_544",
-  "p-left-xxxs": "awsui_p-left-xxxs_18wu0_i4x0n_549",
-  "p-xxs": "awsui_p-xxs_18wu0_i4x0n_554",
-  "p-top-xxs": "awsui_p-top-xxs_18wu0_i4x0n_558",
-  "p-vertical-xxs": "awsui_p-vertical-xxs_18wu0_i4x0n_559",
-  "p-right-xxs": "awsui_p-right-xxs_18wu0_i4x0n_563",
-  "p-horizontal-xxs": "awsui_p-horizontal-xxs_18wu0_i4x0n_564",
-  "p-bottom-xxs": "awsui_p-bottom-xxs_18wu0_i4x0n_568",
-  "p-left-xxs": "awsui_p-left-xxs_18wu0_i4x0n_573",
-  "p-xs": "awsui_p-xs_18wu0_i4x0n_578",
-  "p-top-xs": "awsui_p-top-xs_18wu0_i4x0n_582",
-  "p-vertical-xs": "awsui_p-vertical-xs_18wu0_i4x0n_583",
-  "p-right-xs": "awsui_p-right-xs_18wu0_i4x0n_587",
-  "p-horizontal-xs": "awsui_p-horizontal-xs_18wu0_i4x0n_588",
-  "p-bottom-xs": "awsui_p-bottom-xs_18wu0_i4x0n_592",
-  "p-left-xs": "awsui_p-left-xs_18wu0_i4x0n_597",
-  "p-s": "awsui_p-s_18wu0_i4x0n_602",
-  "p-top-s": "awsui_p-top-s_18wu0_i4x0n_606",
-  "p-vertical-s": "awsui_p-vertical-s_18wu0_i4x0n_607",
-  "p-right-s": "awsui_p-right-s_18wu0_i4x0n_611",
-  "p-horizontal-s": "awsui_p-horizontal-s_18wu0_i4x0n_612",
-  "p-bottom-s": "awsui_p-bottom-s_18wu0_i4x0n_616",
-  "p-left-s": "awsui_p-left-s_18wu0_i4x0n_621",
-  "p-m": "awsui_p-m_18wu0_i4x0n_626",
-  "p-top-m": "awsui_p-top-m_18wu0_i4x0n_630",
-  "p-vertical-m": "awsui_p-vertical-m_18wu0_i4x0n_631",
-  "p-right-m": "awsui_p-right-m_18wu0_i4x0n_635",
-  "p-horizontal-m": "awsui_p-horizontal-m_18wu0_i4x0n_636",
-  "p-bottom-m": "awsui_p-bottom-m_18wu0_i4x0n_640",
-  "p-left-m": "awsui_p-left-m_18wu0_i4x0n_645",
-  "p-l": "awsui_p-l_18wu0_i4x0n_525",
-  "p-top-l": "awsui_p-top-l_18wu0_i4x0n_654",
-  "p-vertical-l": "awsui_p-vertical-l_18wu0_i4x0n_655",
-  "p-right-l": "awsui_p-right-l_18wu0_i4x0n_659",
-  "p-horizontal-l": "awsui_p-horizontal-l_18wu0_i4x0n_660",
-  "p-bottom-l": "awsui_p-bottom-l_18wu0_i4x0n_664",
-  "p-left-l": "awsui_p-left-l_18wu0_i4x0n_669",
-  "p-xl": "awsui_p-xl_18wu0_i4x0n_674",
-  "p-top-xl": "awsui_p-top-xl_18wu0_i4x0n_678",
-  "p-vertical-xl": "awsui_p-vertical-xl_18wu0_i4x0n_679",
-  "p-right-xl": "awsui_p-right-xl_18wu0_i4x0n_683",
-  "p-horizontal-xl": "awsui_p-horizontal-xl_18wu0_i4x0n_684",
-  "p-bottom-xl": "awsui_p-bottom-xl_18wu0_i4x0n_688",
-  "p-left-xl": "awsui_p-left-xl_18wu0_i4x0n_693",
-  "p-xxl": "awsui_p-xxl_18wu0_i4x0n_698",
-  "p-top-xxl": "awsui_p-top-xxl_18wu0_i4x0n_702",
-  "p-vertical-xxl": "awsui_p-vertical-xxl_18wu0_i4x0n_703",
-  "p-right-xxl": "awsui_p-right-xxl_18wu0_i4x0n_707",
-  "p-horizontal-xxl": "awsui_p-horizontal-xxl_18wu0_i4x0n_708",
-  "p-bottom-xxl": "awsui_p-bottom-xxl_18wu0_i4x0n_712",
-  "p-left-xxl": "awsui_p-left-xxl_18wu0_i4x0n_717",
-  "p-xxxl": "awsui_p-xxxl_18wu0_i4x0n_722",
-  "p-top-xxxl": "awsui_p-top-xxxl_18wu0_i4x0n_726",
-  "p-vertical-xxxl": "awsui_p-vertical-xxxl_18wu0_i4x0n_727",
-  "p-right-xxxl": "awsui_p-right-xxxl_18wu0_i4x0n_731",
-  "p-horizontal-xxxl": "awsui_p-horizontal-xxxl_18wu0_i4x0n_732",
-  "p-bottom-xxxl": "awsui_p-bottom-xxxl_18wu0_i4x0n_736",
-  "p-left-xxxl": "awsui_p-left-xxxl_18wu0_i4x0n_741",
-  "m-n": "awsui_m-n_18wu0_i4x0n_746",
-  "m-top-n": "awsui_m-top-n_18wu0_i4x0n_750",
-  "m-vertical-n": "awsui_m-vertical-n_18wu0_i4x0n_751",
-  "m-right-n": "awsui_m-right-n_18wu0_i4x0n_755",
-  "m-horizontal-n": "awsui_m-horizontal-n_18wu0_i4x0n_756",
-  "m-bottom-n": "awsui_m-bottom-n_18wu0_i4x0n_760",
-  "m-left-n": "awsui_m-left-n_18wu0_i4x0n_765",
-  "m-xxxs": "awsui_m-xxxs_18wu0_i4x0n_770",
-  "m-top-xxxs": "awsui_m-top-xxxs_18wu0_i4x0n_774",
-  "m-vertical-xxxs": "awsui_m-vertical-xxxs_18wu0_i4x0n_775",
-  "m-right-xxxs": "awsui_m-right-xxxs_18wu0_i4x0n_779",
-  "m-horizontal-xxxs": "awsui_m-horizontal-xxxs_18wu0_i4x0n_780",
-  "m-bottom-xxxs": "awsui_m-bottom-xxxs_18wu0_i4x0n_784",
-  "m-left-xxxs": "awsui_m-left-xxxs_18wu0_i4x0n_789",
-  "m-xxs": "awsui_m-xxs_18wu0_i4x0n_794",
-  "m-top-xxs": "awsui_m-top-xxs_18wu0_i4x0n_798",
-  "m-vertical-xxs": "awsui_m-vertical-xxs_18wu0_i4x0n_799",
-  "m-right-xxs": "awsui_m-right-xxs_18wu0_i4x0n_803",
-  "m-horizontal-xxs": "awsui_m-horizontal-xxs_18wu0_i4x0n_804",
-  "m-bottom-xxs": "awsui_m-bottom-xxs_18wu0_i4x0n_808",
-  "m-left-xxs": "awsui_m-left-xxs_18wu0_i4x0n_813",
-  "m-xs": "awsui_m-xs_18wu0_i4x0n_818",
-  "m-top-xs": "awsui_m-top-xs_18wu0_i4x0n_822",
-  "m-vertical-xs": "awsui_m-vertical-xs_18wu0_i4x0n_823",
-  "m-right-xs": "awsui_m-right-xs_18wu0_i4x0n_827",
-  "m-horizontal-xs": "awsui_m-horizontal-xs_18wu0_i4x0n_828",
-  "m-bottom-xs": "awsui_m-bottom-xs_18wu0_i4x0n_832",
-  "m-left-xs": "awsui_m-left-xs_18wu0_i4x0n_837",
-  "m-s": "awsui_m-s_18wu0_i4x0n_842",
-  "m-top-s": "awsui_m-top-s_18wu0_i4x0n_846",
-  "m-vertical-s": "awsui_m-vertical-s_18wu0_i4x0n_847",
-  "m-right-s": "awsui_m-right-s_18wu0_i4x0n_851",
-  "m-horizontal-s": "awsui_m-horizontal-s_18wu0_i4x0n_852",
-  "m-bottom-s": "awsui_m-bottom-s_18wu0_i4x0n_856",
-  "m-left-s": "awsui_m-left-s_18wu0_i4x0n_861",
-  "m-m": "awsui_m-m_18wu0_i4x0n_866",
-  "m-top-m": "awsui_m-top-m_18wu0_i4x0n_870",
-  "m-vertical-m": "awsui_m-vertical-m_18wu0_i4x0n_871",
-  "m-right-m": "awsui_m-right-m_18wu0_i4x0n_875",
-  "m-horizontal-m": "awsui_m-horizontal-m_18wu0_i4x0n_876",
-  "m-bottom-m": "awsui_m-bottom-m_18wu0_i4x0n_880",
-  "m-left-m": "awsui_m-left-m_18wu0_i4x0n_885",
-  "m-l": "awsui_m-l_18wu0_i4x0n_765",
-  "m-top-l": "awsui_m-top-l_18wu0_i4x0n_894",
-  "m-vertical-l": "awsui_m-vertical-l_18wu0_i4x0n_895",
-  "m-right-l": "awsui_m-right-l_18wu0_i4x0n_899",
-  "m-horizontal-l": "awsui_m-horizontal-l_18wu0_i4x0n_900",
-  "m-bottom-l": "awsui_m-bottom-l_18wu0_i4x0n_904",
-  "m-left-l": "awsui_m-left-l_18wu0_i4x0n_909",
-  "m-xl": "awsui_m-xl_18wu0_i4x0n_914",
-  "m-top-xl": "awsui_m-top-xl_18wu0_i4x0n_918",
-  "m-vertical-xl": "awsui_m-vertical-xl_18wu0_i4x0n_919",
-  "m-right-xl": "awsui_m-right-xl_18wu0_i4x0n_923",
-  "m-horizontal-xl": "awsui_m-horizontal-xl_18wu0_i4x0n_924",
-  "m-bottom-xl": "awsui_m-bottom-xl_18wu0_i4x0n_928",
-  "m-left-xl": "awsui_m-left-xl_18wu0_i4x0n_933",
-  "m-xxl": "awsui_m-xxl_18wu0_i4x0n_938",
-  "m-top-xxl": "awsui_m-top-xxl_18wu0_i4x0n_942",
-  "m-vertical-xxl": "awsui_m-vertical-xxl_18wu0_i4x0n_943",
-  "m-right-xxl": "awsui_m-right-xxl_18wu0_i4x0n_947",
-  "m-horizontal-xxl": "awsui_m-horizontal-xxl_18wu0_i4x0n_948",
-  "m-bottom-xxl": "awsui_m-bottom-xxl_18wu0_i4x0n_952",
-  "m-left-xxl": "awsui_m-left-xxl_18wu0_i4x0n_957",
-  "m-xxxl": "awsui_m-xxxl_18wu0_i4x0n_962",
-  "m-top-xxxl": "awsui_m-top-xxxl_18wu0_i4x0n_966",
-  "m-vertical-xxxl": "awsui_m-vertical-xxxl_18wu0_i4x0n_967",
-  "m-right-xxxl": "awsui_m-right-xxxl_18wu0_i4x0n_971",
-  "m-horizontal-xxxl": "awsui_m-horizontal-xxxl_18wu0_i4x0n_972",
-  "m-bottom-xxxl": "awsui_m-bottom-xxxl_18wu0_i4x0n_976",
-  "m-left-xxxl": "awsui_m-left-xxxl_18wu0_i4x0n_981",
-  "d-block": "awsui_d-block_18wu0_i4x0n_986",
-  "d-inline": "awsui_d-inline_18wu0_i4x0n_989",
-  "d-inline-block": "awsui_d-inline-block_18wu0_i4x0n_992",
-  "d-none": "awsui_d-none_18wu0_i4x0n_995",
-  "f-left": "awsui_f-left_18wu0_i4x0n_999",
-  "f-right": "awsui_f-right_18wu0_i4x0n_1003"
+  "root": "awsui_root_18wu0_ubx8v_93",
+  "box": "awsui_box_18wu0_ubx8v_207",
+  "p-variant": "awsui_p-variant_18wu0_ubx8v_207",
+  "color-default": "awsui_color-default_18wu0_ubx8v_207",
+  "b-variant": "awsui_b-variant_18wu0_ubx8v_207",
+  "strong-variant": "awsui_strong-variant_18wu0_ubx8v_207",
+  "code-variant": "awsui_code-variant_18wu0_ubx8v_207",
+  "pre-variant": "awsui_pre-variant_18wu0_ubx8v_207",
+  "samp-variant": "awsui_samp-variant_18wu0_ubx8v_207",
+  "h1-variant": "awsui_h1-variant_18wu0_ubx8v_211",
+  "h2-variant": "awsui_h2-variant_18wu0_ubx8v_211",
+  "h3-variant": "awsui_h3-variant_18wu0_ubx8v_211",
+  "h4-variant": "awsui_h4-variant_18wu0_ubx8v_211",
+  "h5-variant": "awsui_h5-variant_18wu0_ubx8v_211",
+  "small-variant": "awsui_small-variant_18wu0_ubx8v_215",
+  "a-variant": "awsui_a-variant_18wu0_ubx8v_219",
+  "font-size-default": "awsui_font-size-default_18wu0_ubx8v_223",
+  "font-weight-default": "awsui_font-weight-default_18wu0_ubx8v_263",
+  "key-label-variant": "awsui_key-label-variant_18wu0_ubx8v_303",
+  "value-large-variant": "awsui_value-large-variant_18wu0_ubx8v_310",
+  "font-weight-heavy": "awsui_font-weight-heavy_18wu0_ubx8v_317",
+  "color-inverted": "awsui_color-inverted_18wu0_ubx8v_322",
+  "color-text-label": "awsui_color-text-label_18wu0_ubx8v_325",
+  "color-text-body-secondary": "awsui_color-text-body-secondary_18wu0_ubx8v_328",
+  "color-text-status-error": "awsui_color-text-status-error_18wu0_ubx8v_331",
+  "color-text-status-success": "awsui_color-text-status-success_18wu0_ubx8v_334",
+  "color-text-status-info": "awsui_color-text-status-info_18wu0_ubx8v_337",
+  "color-text-status-inactive": "awsui_color-text-status-inactive_18wu0_ubx8v_340",
+  "color-inherit": "awsui_color-inherit_18wu0_ubx8v_343",
+  "font-size-body-s": "awsui_font-size-body-s_18wu0_ubx8v_346",
+  "font-size-body-m": "awsui_font-size-body-m_18wu0_ubx8v_351",
+  "font-size-heading-xs": "awsui_font-size-heading-xs_18wu0_ubx8v_355",
+  "font-size-heading-s": "awsui_font-size-heading-s_18wu0_ubx8v_359",
+  "font-size-heading-m": "awsui_font-size-heading-m_18wu0_ubx8v_364",
+  "font-size-heading-l": "awsui_font-size-heading-l_18wu0_ubx8v_369",
+  "font-size-heading-xl": "awsui_font-size-heading-xl_18wu0_ubx8v_374",
+  "font-size-display-l": "awsui_font-size-display-l_18wu0_ubx8v_379",
+  "font-weight-light": "awsui_font-weight-light_18wu0_ubx8v_384",
+  "font-weight-normal": "awsui_font-weight-normal_18wu0_ubx8v_387",
+  "font-weight-bold": "awsui_font-weight-bold_18wu0_ubx8v_390",
+  "t-left": "awsui_t-left_18wu0_ubx8v_397",
+  "t-right": "awsui_t-right_18wu0_ubx8v_401",
+  "t-center": "awsui_t-center_18wu0_ubx8v_405",
+  "p-n": "awsui_p-n_18wu0_ubx8v_506",
+  "p-top-n": "awsui_p-top-n_18wu0_ubx8v_510",
+  "p-vertical-n": "awsui_p-vertical-n_18wu0_ubx8v_511",
+  "p-right-n": "awsui_p-right-n_18wu0_ubx8v_515",
+  "p-horizontal-n": "awsui_p-horizontal-n_18wu0_ubx8v_516",
+  "p-bottom-n": "awsui_p-bottom-n_18wu0_ubx8v_520",
+  "p-left-n": "awsui_p-left-n_18wu0_ubx8v_525",
+  "p-xxxs": "awsui_p-xxxs_18wu0_ubx8v_530",
+  "p-top-xxxs": "awsui_p-top-xxxs_18wu0_ubx8v_534",
+  "p-vertical-xxxs": "awsui_p-vertical-xxxs_18wu0_ubx8v_535",
+  "p-right-xxxs": "awsui_p-right-xxxs_18wu0_ubx8v_539",
+  "p-horizontal-xxxs": "awsui_p-horizontal-xxxs_18wu0_ubx8v_540",
+  "p-bottom-xxxs": "awsui_p-bottom-xxxs_18wu0_ubx8v_544",
+  "p-left-xxxs": "awsui_p-left-xxxs_18wu0_ubx8v_549",
+  "p-xxs": "awsui_p-xxs_18wu0_ubx8v_554",
+  "p-top-xxs": "awsui_p-top-xxs_18wu0_ubx8v_558",
+  "p-vertical-xxs": "awsui_p-vertical-xxs_18wu0_ubx8v_559",
+  "p-right-xxs": "awsui_p-right-xxs_18wu0_ubx8v_563",
+  "p-horizontal-xxs": "awsui_p-horizontal-xxs_18wu0_ubx8v_564",
+  "p-bottom-xxs": "awsui_p-bottom-xxs_18wu0_ubx8v_568",
+  "p-left-xxs": "awsui_p-left-xxs_18wu0_ubx8v_573",
+  "p-xs": "awsui_p-xs_18wu0_ubx8v_578",
+  "p-top-xs": "awsui_p-top-xs_18wu0_ubx8v_582",
+  "p-vertical-xs": "awsui_p-vertical-xs_18wu0_ubx8v_583",
+  "p-right-xs": "awsui_p-right-xs_18wu0_ubx8v_587",
+  "p-horizontal-xs": "awsui_p-horizontal-xs_18wu0_ubx8v_588",
+  "p-bottom-xs": "awsui_p-bottom-xs_18wu0_ubx8v_592",
+  "p-left-xs": "awsui_p-left-xs_18wu0_ubx8v_597",
+  "p-s": "awsui_p-s_18wu0_ubx8v_602",
+  "p-top-s": "awsui_p-top-s_18wu0_ubx8v_606",
+  "p-vertical-s": "awsui_p-vertical-s_18wu0_ubx8v_607",
+  "p-right-s": "awsui_p-right-s_18wu0_ubx8v_611",
+  "p-horizontal-s": "awsui_p-horizontal-s_18wu0_ubx8v_612",
+  "p-bottom-s": "awsui_p-bottom-s_18wu0_ubx8v_616",
+  "p-left-s": "awsui_p-left-s_18wu0_ubx8v_621",
+  "p-m": "awsui_p-m_18wu0_ubx8v_626",
+  "p-top-m": "awsui_p-top-m_18wu0_ubx8v_630",
+  "p-vertical-m": "awsui_p-vertical-m_18wu0_ubx8v_631",
+  "p-right-m": "awsui_p-right-m_18wu0_ubx8v_635",
+  "p-horizontal-m": "awsui_p-horizontal-m_18wu0_ubx8v_636",
+  "p-bottom-m": "awsui_p-bottom-m_18wu0_ubx8v_640",
+  "p-left-m": "awsui_p-left-m_18wu0_ubx8v_645",
+  "p-l": "awsui_p-l_18wu0_ubx8v_525",
+  "p-top-l": "awsui_p-top-l_18wu0_ubx8v_654",
+  "p-vertical-l": "awsui_p-vertical-l_18wu0_ubx8v_655",
+  "p-right-l": "awsui_p-right-l_18wu0_ubx8v_659",
+  "p-horizontal-l": "awsui_p-horizontal-l_18wu0_ubx8v_660",
+  "p-bottom-l": "awsui_p-bottom-l_18wu0_ubx8v_664",
+  "p-left-l": "awsui_p-left-l_18wu0_ubx8v_669",
+  "p-xl": "awsui_p-xl_18wu0_ubx8v_674",
+  "p-top-xl": "awsui_p-top-xl_18wu0_ubx8v_678",
+  "p-vertical-xl": "awsui_p-vertical-xl_18wu0_ubx8v_679",
+  "p-right-xl": "awsui_p-right-xl_18wu0_ubx8v_683",
+  "p-horizontal-xl": "awsui_p-horizontal-xl_18wu0_ubx8v_684",
+  "p-bottom-xl": "awsui_p-bottom-xl_18wu0_ubx8v_688",
+  "p-left-xl": "awsui_p-left-xl_18wu0_ubx8v_693",
+  "p-xxl": "awsui_p-xxl_18wu0_ubx8v_698",
+  "p-top-xxl": "awsui_p-top-xxl_18wu0_ubx8v_702",
+  "p-vertical-xxl": "awsui_p-vertical-xxl_18wu0_ubx8v_703",
+  "p-right-xxl": "awsui_p-right-xxl_18wu0_ubx8v_707",
+  "p-horizontal-xxl": "awsui_p-horizontal-xxl_18wu0_ubx8v_708",
+  "p-bottom-xxl": "awsui_p-bottom-xxl_18wu0_ubx8v_712",
+  "p-left-xxl": "awsui_p-left-xxl_18wu0_ubx8v_717",
+  "p-xxxl": "awsui_p-xxxl_18wu0_ubx8v_722",
+  "p-top-xxxl": "awsui_p-top-xxxl_18wu0_ubx8v_726",
+  "p-vertical-xxxl": "awsui_p-vertical-xxxl_18wu0_ubx8v_727",
+  "p-right-xxxl": "awsui_p-right-xxxl_18wu0_ubx8v_731",
+  "p-horizontal-xxxl": "awsui_p-horizontal-xxxl_18wu0_ubx8v_732",
+  "p-bottom-xxxl": "awsui_p-bottom-xxxl_18wu0_ubx8v_736",
+  "p-left-xxxl": "awsui_p-left-xxxl_18wu0_ubx8v_741",
+  "m-n": "awsui_m-n_18wu0_ubx8v_746",
+  "m-top-n": "awsui_m-top-n_18wu0_ubx8v_750",
+  "m-vertical-n": "awsui_m-vertical-n_18wu0_ubx8v_751",
+  "m-right-n": "awsui_m-right-n_18wu0_ubx8v_755",
+  "m-horizontal-n": "awsui_m-horizontal-n_18wu0_ubx8v_756",
+  "m-bottom-n": "awsui_m-bottom-n_18wu0_ubx8v_760",
+  "m-left-n": "awsui_m-left-n_18wu0_ubx8v_765",
+  "m-xxxs": "awsui_m-xxxs_18wu0_ubx8v_770",
+  "m-top-xxxs": "awsui_m-top-xxxs_18wu0_ubx8v_774",
+  "m-vertical-xxxs": "awsui_m-vertical-xxxs_18wu0_ubx8v_775",
+  "m-right-xxxs": "awsui_m-right-xxxs_18wu0_ubx8v_779",
+  "m-horizontal-xxxs": "awsui_m-horizontal-xxxs_18wu0_ubx8v_780",
+  "m-bottom-xxxs": "awsui_m-bottom-xxxs_18wu0_ubx8v_784",
+  "m-left-xxxs": "awsui_m-left-xxxs_18wu0_ubx8v_789",
+  "m-xxs": "awsui_m-xxs_18wu0_ubx8v_794",
+  "m-top-xxs": "awsui_m-top-xxs_18wu0_ubx8v_798",
+  "m-vertical-xxs": "awsui_m-vertical-xxs_18wu0_ubx8v_799",
+  "m-right-xxs": "awsui_m-right-xxs_18wu0_ubx8v_803",
+  "m-horizontal-xxs": "awsui_m-horizontal-xxs_18wu0_ubx8v_804",
+  "m-bottom-xxs": "awsui_m-bottom-xxs_18wu0_ubx8v_808",
+  "m-left-xxs": "awsui_m-left-xxs_18wu0_ubx8v_813",
+  "m-xs": "awsui_m-xs_18wu0_ubx8v_818",
+  "m-top-xs": "awsui_m-top-xs_18wu0_ubx8v_822",
+  "m-vertical-xs": "awsui_m-vertical-xs_18wu0_ubx8v_823",
+  "m-right-xs": "awsui_m-right-xs_18wu0_ubx8v_827",
+  "m-horizontal-xs": "awsui_m-horizontal-xs_18wu0_ubx8v_828",
+  "m-bottom-xs": "awsui_m-bottom-xs_18wu0_ubx8v_832",
+  "m-left-xs": "awsui_m-left-xs_18wu0_ubx8v_837",
+  "m-s": "awsui_m-s_18wu0_ubx8v_842",
+  "m-top-s": "awsui_m-top-s_18wu0_ubx8v_846",
+  "m-vertical-s": "awsui_m-vertical-s_18wu0_ubx8v_847",
+  "m-right-s": "awsui_m-right-s_18wu0_ubx8v_851",
+  "m-horizontal-s": "awsui_m-horizontal-s_18wu0_ubx8v_852",
+  "m-bottom-s": "awsui_m-bottom-s_18wu0_ubx8v_856",
+  "m-left-s": "awsui_m-left-s_18wu0_ubx8v_861",
+  "m-m": "awsui_m-m_18wu0_ubx8v_866",
+  "m-top-m": "awsui_m-top-m_18wu0_ubx8v_870",
+  "m-vertical-m": "awsui_m-vertical-m_18wu0_ubx8v_871",
+  "m-right-m": "awsui_m-right-m_18wu0_ubx8v_875",
+  "m-horizontal-m": "awsui_m-horizontal-m_18wu0_ubx8v_876",
+  "m-bottom-m": "awsui_m-bottom-m_18wu0_ubx8v_880",
+  "m-left-m": "awsui_m-left-m_18wu0_ubx8v_885",
+  "m-l": "awsui_m-l_18wu0_ubx8v_765",
+  "m-top-l": "awsui_m-top-l_18wu0_ubx8v_894",
+  "m-vertical-l": "awsui_m-vertical-l_18wu0_ubx8v_895",
+  "m-right-l": "awsui_m-right-l_18wu0_ubx8v_899",
+  "m-horizontal-l": "awsui_m-horizontal-l_18wu0_ubx8v_900",
+  "m-bottom-l": "awsui_m-bottom-l_18wu0_ubx8v_904",
+  "m-left-l": "awsui_m-left-l_18wu0_ubx8v_909",
+  "m-xl": "awsui_m-xl_18wu0_ubx8v_914",
+  "m-top-xl": "awsui_m-top-xl_18wu0_ubx8v_918",
+  "m-vertical-xl": "awsui_m-vertical-xl_18wu0_ubx8v_919",
+  "m-right-xl": "awsui_m-right-xl_18wu0_ubx8v_923",
+  "m-horizontal-xl": "awsui_m-horizontal-xl_18wu0_ubx8v_924",
+  "m-bottom-xl": "awsui_m-bottom-xl_18wu0_ubx8v_928",
+  "m-left-xl": "awsui_m-left-xl_18wu0_ubx8v_933",
+  "m-xxl": "awsui_m-xxl_18wu0_ubx8v_938",
+  "m-top-xxl": "awsui_m-top-xxl_18wu0_ubx8v_942",
+  "m-vertical-xxl": "awsui_m-vertical-xxl_18wu0_ubx8v_943",
+  "m-right-xxl": "awsui_m-right-xxl_18wu0_ubx8v_947",
+  "m-horizontal-xxl": "awsui_m-horizontal-xxl_18wu0_ubx8v_948",
+  "m-bottom-xxl": "awsui_m-bottom-xxl_18wu0_ubx8v_952",
+  "m-left-xxl": "awsui_m-left-xxl_18wu0_ubx8v_957",
+  "m-xxxl": "awsui_m-xxxl_18wu0_ubx8v_962",
+  "m-top-xxxl": "awsui_m-top-xxxl_18wu0_ubx8v_966",
+  "m-vertical-xxxl": "awsui_m-vertical-xxxl_18wu0_ubx8v_967",
+  "m-right-xxxl": "awsui_m-right-xxxl_18wu0_ubx8v_971",
+  "m-horizontal-xxxl": "awsui_m-horizontal-xxxl_18wu0_ubx8v_972",
+  "m-bottom-xxxl": "awsui_m-bottom-xxxl_18wu0_ubx8v_976",
+  "m-left-xxxl": "awsui_m-left-xxxl_18wu0_ubx8v_981",
+  "d-block": "awsui_d-block_18wu0_ubx8v_986",
+  "d-inline": "awsui_d-inline_18wu0_ubx8v_989",
+  "d-inline-block": "awsui_d-inline-block_18wu0_ubx8v_992",
+  "d-none": "awsui_d-none_18wu0_ubx8v_995",
+  "f-left": "awsui_f-left_18wu0_ubx8v_999",
+  "f-right": "awsui_f-right_18wu0_ubx8v_1003"
 };