@cloudscape-design/components 3.0.353 → 3.0.355

package/cards/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["cards/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { FocusEventHandler, useImperativeHandle, useRef } from 'react';\nimport { CardsForwardRefType, CardsProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { getCardsPerRow } from './cards-layout-helper';\nimport { getBaseProps } from '../internal/base-component';\nimport ToolsHeader from '../table/tools-header';\nimport { getItemKey } from '../table/utils';\nimport { focusMarkers, useFocusMove, useSelection } from '../table/use-selection';\nimport SelectionControl, { SelectionControlProps } from '../table/selection-control';\nimport InternalContainer from '../container/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport stickyScrolling from '../table/sticky-scrolling';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport LiveRegion from '../internal/components/live-region';\nimport useMouseDownTarget from '../internal/hooks/use-mouse-down-target';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { supportsStickyPosition } from '../internal/utils/dom';\nimport { useInternalI18n } from '../i18n/context';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { AnalyticsFunnelSubStep } from '../internal/analytics/components/analytics-funnel';\n\nexport { CardsProps };\n\nconst Cards = React.forwardRef(function <T = any>(\n  {\n    items = [],\n    cardDefinition,\n    cardsPerRow = [],\n    header,\n    filter,\n    pagination,\n    preferences,\n    empty,\n    loading,\n    loadingText,\n    trackBy,\n    selectedItems,\n    selectionType,\n    isItemDisabled,\n    onSelectionChange,\n    ariaLabels,\n    visibleSections,\n    stickyHeader,\n    stickyHeaderVerticalOffset,\n    variant = 'container',\n    renderAriaLive,\n    firstIndex,\n    totalItemsCount,\n    ...rest\n  }: CardsProps<T>,\n  ref: React.Ref<CardsProps.Ref>\n) {\n  const { __internalRootRef } = useBaseComponent('Cards');\n  const baseProps = getBaseProps(rest);\n  const isRefresh = useVisualRefresh();\n  const isMobile = useMobile();\n\n  const computedVariant = isRefresh ? variant : 'container';\n  const instanceUniqueId = useUniqueId('cards');\n  const cardsId = baseProps?.id || instanceUniqueId;\n  const cardsHeaderId = header ? `${cardsId}-header` : undefined;\n\n  const [columns, measureRef] = useContainerQuery<number>(\n    ({ contentBoxWidth }) => getCardsPerRow(contentBoxWidth, cardsPerRow),\n    [cardsPerRow]\n  );\n  const refObject = useRef(null);\n  const mergedRef = useMergeRefs(measureRef, refObject, __internalRootRef);\n  const getMouseDownTarget = useMouseDownTarget();\n\n  const i18n = useInternalI18n('cards');\n  const { isItemSelected, getItemSelectionProps, updateShiftToggle } = useSelection({\n    items,\n    trackBy,\n    selectedItems,\n    selectionType,\n    isItemDisabled,\n    onSelectionChange,\n    ariaLabels: {\n      itemSelectionLabel: ariaLabels?.itemSelectionLabel,\n      selectionGroupLabel: i18n('ariaLabels.selectionGroupLabel', ariaLabels?.selectionGroupLabel),\n    },\n  });\n  const hasToolsHeader = header || filter || pagination || preferences;\n  const hasFooterPagination = isMobile && variant === 'full-page' && !!pagination;\n  const headerRef = useRef<HTMLDivElement>(null);\n\n  const { scrollToTop, scrollToItem } = stickyScrolling(refObject, headerRef);\n  stickyHeader = supportsStickyPosition() && !isMobile && stickyHeader;\n  const onCardFocus: FocusEventHandler<HTMLElement> = event => {\n    // When an element inside card receives focus we want to adjust the scroll.\n    // However, that behavior is unwanted when the focus is received as result of a click\n    // as it causes the click to never reach the target element.\n    if (stickyHeader && !event.currentTarget.contains(getMouseDownTarget())) {\n      scrollToItem(event.currentTarget);\n    }\n  };\n  useImperativeHandle(\n    ref,\n    () => ({\n      scrollToTop: () => {\n        if (stickyHeader) {\n          scrollToTop();\n        }\n      },\n    }),\n    [stickyHeader, scrollToTop]\n  );\n  let status;\n  if (loading) {\n    status = (\n      <div className={styles.loading}>\n        <InternalStatusIndicator type=\"loading\">\n          <LiveRegion visible={true}>{loadingText}</LiveRegion>\n        </InternalStatusIndicator>\n      </div>\n    );\n  } else if (empty && !items.length) {\n    status = <div className={styles.empty}>{empty}</div>;\n  }\n\n  return (\n    <AnalyticsFunnelSubStep>\n      <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={mergedRef}>\n        <InternalContainer\n          header={\n            hasToolsHeader && (\n              <div\n                className={clsx(\n                  styles.header,\n                  isRefresh && styles['header-refresh'],\n                  styles[`header-variant-${computedVariant}`]\n                )}\n              >\n                <ToolsHeader header={header} filter={filter} pagination={pagination} preferences={preferences} />\n              </div>\n            )\n          }\n          footer={hasFooterPagination && <div className={styles['footer-pagination']}>{pagination}</div>}\n          disableContentPaddings={true}\n          disableHeaderPaddings={computedVariant === 'full-page'}\n          variant={computedVariant === 'container' ? 'cards' : computedVariant}\n          __stickyHeader={stickyHeader}\n          __stickyOffset={stickyHeaderVerticalOffset}\n          __headerRef={headerRef}\n          __headerId={cardsHeaderId}\n          __darkHeader={computedVariant === 'full-page'}\n          __disableFooterDivider={true}\n        >\n          <div className={clsx(hasToolsHeader && styles['has-header'])}>\n            {!!renderAriaLive && !!firstIndex && (\n              <LiveRegion>\n                <span>{renderAriaLive({ totalItemsCount, firstIndex, lastIndex: firstIndex + items.length - 1 })}</span>\n              </LiveRegion>\n            )}\n            {status ?? (\n              <CardsList\n                items={items}\n                cardDefinition={cardDefinition}\n                trackBy={trackBy}\n                selectionType={selectionType}\n                columns={columns}\n                isItemSelected={isItemSelected}\n                getItemSelectionProps={getItemSelectionProps}\n                visibleSections={visibleSections}\n                updateShiftToggle={updateShiftToggle}\n                onFocus={onCardFocus}\n                ariaLabel={ariaLabels?.cardsLabel}\n                ariaLabelledby={ariaLabels?.cardsLabel ? undefined : cardsHeaderId}\n              />\n            )}\n          </div>\n        </InternalContainer>\n      </div>\n    </AnalyticsFunnelSubStep>\n  );\n}) as CardsForwardRefType;\n\nexport default Cards;\n\nconst CardsList = <T,>({\n  items,\n  cardDefinition,\n  trackBy,\n  selectionType,\n  columns,\n  isItemSelected,\n  getItemSelectionProps,\n  visibleSections,\n  updateShiftToggle,\n  onFocus,\n  ariaLabelledby,\n  ariaLabel,\n}: Pick<CardsProps<T>, 'items' | 'cardDefinition' | 'trackBy' | 'selectionType' | 'visibleSections'> & {\n  columns: number | null;\n  isItemSelected: (item: T) => boolean;\n  getItemSelectionProps: (item: T) => SelectionControlProps;\n  updateShiftToggle: (state: boolean) => void;\n  onFocus: FocusEventHandler<HTMLElement>;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  ariaDescribedby?: string;\n}) => {\n  const selectable = !!selectionType;\n\n  const { moveFocusDown, moveFocusUp } = useFocusMove(selectionType, items.length);\n\n  let visibleSectionsDefinition = cardDefinition.sections || [];\n  visibleSectionsDefinition = visibleSections\n    ? visibleSectionsDefinition.filter(\n        (section: CardsProps.SectionDefinition<T>) => section.id && visibleSections.indexOf(section.id) !== -1\n      )\n    : visibleSectionsDefinition;\n\n  let listRole: 'group' | undefined = undefined;\n  let listItemRole: 'presentation' | undefined = undefined;\n\n  if (selectable) {\n    listRole = 'group';\n    listItemRole = 'presentation';\n  }\n\n  return (\n    <ol\n      className={clsx(styles.list, styles[`list-grid-${columns || 1}`])}\n      role={listRole}\n      aria-labelledby={ariaLabelledby}\n      aria-label={ariaLabel}\n      {...(focusMarkers && focusMarkers.root)}\n    >\n      {items.map((item, index) => (\n        <li\n          className={clsx(styles.card, {\n            [styles['card-selectable']]: selectable,\n            [styles['card-selected']]: selectable && isItemSelected(item),\n          })}\n          key={getItemKey(trackBy, item, index)}\n          onFocus={onFocus}\n          {...(focusMarkers && focusMarkers.item)}\n          role={listItemRole}\n        >\n          <div className={styles['card-inner']}>\n            <div className={styles['card-header']}>\n              <div className={styles['card-header-inner']}>\n                {cardDefinition.header ? cardDefinition.header(item) : ''}\n              </div>\n              {selectable && (\n                <div className={styles['selection-control']}>\n                  <SelectionControl\n                    onFocusDown={moveFocusDown}\n                    onFocusUp={moveFocusUp}\n                    onShiftToggle={updateShiftToggle}\n                    {...getItemSelectionProps(item)}\n                  />\n                </div>\n              )}\n            </div>\n            {visibleSectionsDefinition.map(({ width = 100, header, content, id }, index) => (\n              <div key={id || index} className={styles.section} style={{ width: `${width}%` }}>\n                {header ? <div className={styles['section-header']}>{header}</div> : ''}\n                {content ? <div className={styles['section-content']}>{content(item)}</div> : ''}\n              </div>\n            ))}\n          </div>\n        </li>\n      ))}\n    </ol>\n  );\n};\n\napplyDisplayName(Cards, 'Cards');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["cards/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { FocusEventHandler, useImperativeHandle, useRef } from 'react';\nimport { CardsForwardRefType, CardsProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { getCardsPerRow } from './cards-layout-helper';\nimport { getBaseProps } from '../internal/base-component';\nimport ToolsHeader from '../table/tools-header';\nimport { getItemKey } from '../table/utils';\nimport { focusMarkers, useFocusMove, useSelection } from '../table/use-selection';\nimport SelectionControl, { SelectionControlProps } from '../table/selection-control';\nimport InternalContainer from '../container/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport stickyScrolling from '../table/sticky-scrolling';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport LiveRegion from '../internal/components/live-region';\nimport useMouseDownTarget from '../internal/hooks/use-mouse-down-target';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { supportsStickyPosition } from '../internal/utils/dom';\nimport { useInternalI18n } from '../i18n/context';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { AnalyticsFunnelSubStep } from '../internal/analytics/components/analytics-funnel';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\n\nexport { CardsProps };\n\nconst Cards = React.forwardRef(function <T = any>(\n  {\n    items = [],\n    cardDefinition,\n    cardsPerRow = [],\n    header,\n    filter,\n    pagination,\n    preferences,\n    empty,\n    loading,\n    loadingText,\n    trackBy,\n    selectedItems,\n    selectionType,\n    isItemDisabled,\n    onSelectionChange,\n    ariaLabels,\n    visibleSections,\n    stickyHeader,\n    stickyHeaderVerticalOffset,\n    variant = 'container',\n    renderAriaLive,\n    firstIndex,\n    totalItemsCount,\n    ...rest\n  }: CardsProps<T>,\n  ref: React.Ref<CardsProps.Ref>\n) {\n  const { __internalRootRef } = useBaseComponent('Cards');\n  const baseProps = getBaseProps(rest);\n  const isRefresh = useVisualRefresh();\n  const isMobile = useMobile();\n\n  const computedVariant = isRefresh ? variant : 'container';\n  const instanceUniqueId = useUniqueId('cards');\n  const cardsId = baseProps?.id || instanceUniqueId;\n  const cardsHeaderId = header ? `${cardsId}-header` : undefined;\n\n  const [columns, measureRef] = useContainerQuery<number>(\n    ({ contentBoxWidth }) => getCardsPerRow(contentBoxWidth, cardsPerRow),\n    [cardsPerRow]\n  );\n  const refObject = useRef(null);\n  const mergedRef = useMergeRefs(measureRef, refObject, __internalRootRef);\n  const getMouseDownTarget = useMouseDownTarget();\n\n  const i18n = useInternalI18n('cards');\n  const { isItemSelected, getItemSelectionProps, updateShiftToggle } = useSelection({\n    items,\n    trackBy,\n    selectedItems,\n    selectionType,\n    isItemDisabled,\n    onSelectionChange,\n    ariaLabels: {\n      itemSelectionLabel: ariaLabels?.itemSelectionLabel,\n      selectionGroupLabel: i18n('ariaLabels.selectionGroupLabel', ariaLabels?.selectionGroupLabel),\n    },\n  });\n  const hasToolsHeader = header || filter || pagination || preferences;\n  const hasFooterPagination = isMobile && variant === 'full-page' && !!pagination;\n  const headerRef = useRef<HTMLDivElement>(null);\n\n  const { scrollToTop, scrollToItem } = stickyScrolling(refObject, headerRef);\n  stickyHeader = supportsStickyPosition() && !isMobile && stickyHeader;\n  const onCardFocus: FocusEventHandler<HTMLElement> = event => {\n    // When an element inside card receives focus we want to adjust the scroll.\n    // However, that behavior is unwanted when the focus is received as result of a click\n    // as it causes the click to never reach the target element.\n    if (stickyHeader && !event.currentTarget.contains(getMouseDownTarget())) {\n      scrollToItem(event.currentTarget);\n    }\n  };\n  useImperativeHandle(\n    ref,\n    () => ({\n      scrollToTop: () => {\n        if (stickyHeader) {\n          scrollToTop();\n        }\n      },\n    }),\n    [stickyHeader, scrollToTop]\n  );\n  let status;\n  if (loading) {\n    status = (\n      <div className={styles.loading}>\n        <InternalStatusIndicator type=\"loading\">\n          <LiveRegion visible={true}>{loadingText}</LiveRegion>\n        </InternalStatusIndicator>\n      </div>\n    );\n  } else if (empty && !items.length) {\n    status = <div className={styles.empty}>{empty}</div>;\n  }\n\n  return (\n    <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n      <AnalyticsFunnelSubStep>\n        <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={mergedRef}>\n          <InternalContainer\n            header={\n              hasToolsHeader && (\n                <div\n                  className={clsx(\n                    styles.header,\n                    isRefresh && styles['header-refresh'],\n                    styles[`header-variant-${computedVariant}`]\n                  )}\n                >\n                  <ToolsHeader header={header} filter={filter} pagination={pagination} preferences={preferences} />\n                </div>\n              )\n            }\n            footer={hasFooterPagination && <div className={styles['footer-pagination']}>{pagination}</div>}\n            disableContentPaddings={true}\n            disableHeaderPaddings={computedVariant === 'full-page'}\n            variant={computedVariant === 'container' ? 'cards' : computedVariant}\n            __stickyHeader={stickyHeader}\n            __stickyOffset={stickyHeaderVerticalOffset}\n            __headerRef={headerRef}\n            __headerId={cardsHeaderId}\n            __darkHeader={computedVariant === 'full-page'}\n            __disableFooterDivider={true}\n          >\n            <div className={clsx(hasToolsHeader && styles['has-header'])}>\n              {!!renderAriaLive && !!firstIndex && (\n                <LiveRegion>\n                  <span>\n                    {renderAriaLive({ totalItemsCount, firstIndex, lastIndex: firstIndex + items.length - 1 })}\n                  </span>\n                </LiveRegion>\n              )}\n              {status ?? (\n                <CardsList\n                  items={items}\n                  cardDefinition={cardDefinition}\n                  trackBy={trackBy}\n                  selectionType={selectionType}\n                  columns={columns}\n                  isItemSelected={isItemSelected}\n                  getItemSelectionProps={getItemSelectionProps}\n                  visibleSections={visibleSections}\n                  updateShiftToggle={updateShiftToggle}\n                  onFocus={onCardFocus}\n                  ariaLabel={ariaLabels?.cardsLabel}\n                  ariaLabelledby={ariaLabels?.cardsLabel ? undefined : cardsHeaderId}\n                />\n              )}\n            </div>\n          </InternalContainer>\n        </div>\n      </AnalyticsFunnelSubStep>\n    </LinkDefaultVariantContext.Provider>\n  );\n}) as CardsForwardRefType;\n\nexport default Cards;\n\nconst CardsList = <T,>({\n  items,\n  cardDefinition,\n  trackBy,\n  selectionType,\n  columns,\n  isItemSelected,\n  getItemSelectionProps,\n  visibleSections,\n  updateShiftToggle,\n  onFocus,\n  ariaLabelledby,\n  ariaLabel,\n}: Pick<CardsProps<T>, 'items' | 'cardDefinition' | 'trackBy' | 'selectionType' | 'visibleSections'> & {\n  columns: number | null;\n  isItemSelected: (item: T) => boolean;\n  getItemSelectionProps: (item: T) => SelectionControlProps;\n  updateShiftToggle: (state: boolean) => void;\n  onFocus: FocusEventHandler<HTMLElement>;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  ariaDescribedby?: string;\n}) => {\n  const selectable = !!selectionType;\n\n  const { moveFocusDown, moveFocusUp } = useFocusMove(selectionType, items.length);\n\n  let visibleSectionsDefinition = cardDefinition.sections || [];\n  visibleSectionsDefinition = visibleSections\n    ? visibleSectionsDefinition.filter(\n        (section: CardsProps.SectionDefinition<T>) => section.id && visibleSections.indexOf(section.id) !== -1\n      )\n    : visibleSectionsDefinition;\n\n  let listRole: 'group' | undefined = undefined;\n  let listItemRole: 'presentation' | undefined = undefined;\n\n  if (selectable) {\n    listRole = 'group';\n    listItemRole = 'presentation';\n  }\n\n  return (\n    <ol\n      className={clsx(styles.list, styles[`list-grid-${columns || 1}`])}\n      role={listRole}\n      aria-labelledby={ariaLabelledby}\n      aria-label={ariaLabel}\n      {...(focusMarkers && focusMarkers.root)}\n    >\n      {items.map((item, index) => (\n        <li\n          className={clsx(styles.card, {\n            [styles['card-selectable']]: selectable,\n            [styles['card-selected']]: selectable && isItemSelected(item),\n          })}\n          key={getItemKey(trackBy, item, index)}\n          onFocus={onFocus}\n          {...(focusMarkers && focusMarkers.item)}\n          role={listItemRole}\n        >\n          <div className={styles['card-inner']}>\n            <div className={styles['card-header']}>\n              <div className={styles['card-header-inner']}>\n                {cardDefinition.header ? cardDefinition.header(item) : ''}\n              </div>\n              {selectable && (\n                <div className={styles['selection-control']}>\n                  <SelectionControl\n                    onFocusDown={moveFocusDown}\n                    onFocusUp={moveFocusUp}\n                    onShiftToggle={updateShiftToggle}\n                    {...getItemSelectionProps(item)}\n                  />\n                </div>\n              )}\n            </div>\n            {visibleSectionsDefinition.map(({ width = 100, header, content, id }, index) => (\n              <div key={id || index} className={styles.section} style={{ width: `${width}%` }}>\n                {header ? <div className={styles['section-header']}>{header}</div> : ''}\n                {content ? <div className={styles['section-content']}>{content(item)}</div> : ''}\n              </div>\n            ))}\n          </div>\n        </li>\n      ))}\n    </ol>\n  );\n};\n\napplyDisplayName(Cards, 'Cards');\n"]}

package/cards/interfaces.d.ts

@@ -44,7 +44,7 @@ export interface CardsProps<T = any> extends BaseComponentProps {
     /**
      *  Defines what to display in each card. It has the following properties:
      *  * `header` ((item) => ReactNode) - Responsible for displaying the card header. You receive the current item as an argument.
-     *      Use `fontSize="heading-m"` on [link](/components/link/) components inside card header.
+     *      Use `fontSize="inherit"` on [link](/components/link/) components inside card header.
      *  * `sections` (array) - Responsible for displaying the card content. Cards can have many sections in their
      *    body. Each entry in the array is responsible for displaying a section. An entry has the following properties:
      *    * `id`: (string) - A unique identifier for the section. The property is used as a [keys](https://reactjs.org/docs/lists-and-keys.html#keys)

package/cards/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["cards/interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\n/*\n * HACK: Cast the component to a named parametrized interface.\n *\n * This lets us use React.forwardRef and still let the component have type\n * parameters, and the naming convention lets the documenter know that this is\n * a forwardRef-wrapped component.\n *\n * We don't need to expose this type to customers because it's just a simple\n * function type.\n */\nexport interface CardsForwardRefType {\n  <T>(props: CardsProps<T> & { ref?: React.Ref<CardsProps.Ref> }): JSX.Element;\n}\n\nexport interface CardsProps<T = any> extends BaseComponentProps {\n  /**\n   * Displayed only when the list of items is empty.\n   */\n  empty?: React.ReactNode;\n\n  /**\n   * Heading element of the table container. Use the [header component](/components/header/).\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Use this slot to add filtering controls to the component.\n   */\n  filter?: React.ReactNode;\n\n  /**\n   * Use this slot to add the [pagination component](/components/pagination/) to the component.\n   */\n  pagination?: React.ReactNode;\n\n  /**\n   * Use this slot to add [collection preferences](/components/collection-preferences/) to the component.\n   */\n  preferences?: React.ReactNode;\n\n  /**\n   * Specifies the items that serve as data source for a card.\n   *\n   * The `cardDefinition` property handles the display of this data.\n   */\n  items: ReadonlyArray<T>;\n\n  /**\n   * Renders the cards in a loading state. We recommend that you also set a `loadingText`.\n   */\n  loading?: boolean;\n\n  /**\n   * Specifies the text to display when in loading state.\n   */\n  loadingText?: string;\n\n  /**\n   *  Defines what to display in each card. It has the following properties:\n   *  * `header` ((item) => ReactNode) - Responsible for displaying the card header. You receive the current item as an argument.\n   *      Use `fontSize=\"heading-m\"` on [link](/components/link/) components inside card header.\n   *  * `sections` (array) - Responsible for displaying the card content. Cards can have many sections in their\n   *    body. Each entry in the array is responsible for displaying a section. An entry has the following properties:\n   *    * `id`: (string) - A unique identifier for the section. The property is used as a [keys](https://reactjs.org/docs/lists-and-keys.html#keys)\n   *   source for React rendering, and to match entries in the `visibleSections` property (if it's defined).\n   *    * `header`: (ReactNode) - Responsible for displaying the section header.\n   *    * `content`: ((item) => ReactNode) - Responsible for displaying the section content. You receive the current item as an argument.\n   *    * `width`: (number) - Specifies the width of the card section in percent. Use this to display multiple sections in\n   *    the same row. The default value is 100%.\n   *\n   *  All of the above properties are optional.\n   */\n  cardDefinition: CardsProps.CardDefinition<T>;\n  /**\n   * Determines the number of cards per row for any interval of container width.\n   * It's an array whose entries are objects containing the following:\n   * - `cards` (number) - Specifies the number of cards per row.\n   * - `minWidth` (number) - Specifies the minimum container width (in pixels) for which this configuration object should apply.\n   *\n   * For example, with this configuration:\n   * ```\n   * [{\n   *   cards: 1\n   * }, {\n   *   minWidth: 500,\n   *   cards: 2\n   * }, {\n   *   minWidth: 800,\n   *   cards: 3\n   * }]\n   * ```\n   *\n   * the cards component displays:\n   * * 1 card per row when the container width is below 500px.\n   * * 2 cards per row when the container width is between 500px and 799px.\n   * * 3 cards per row when the container width is 800px or wider.\n   *\n   * The number of cards per row can't be greater than 20.\n   *\n   * Default value:\n   * ```\n   * [{\n   *   cards: 1\n   * }, {\n   *   minWidth: 768,\n   *   cards: 2\n   * }, {\n   *   minWidth: 992,\n   *   cards: 3\n   * }, {\n   *   minWidth: 1200,\n   *   cards: 4\n   * }, {\n   *   minWidth: 1400,\n   *   cards: 5\n   * }, {\n   *   minWidth: 1920,\n   *   cards: 6\n   * }]\n   * ```\n   */\n  cardsPerRow?: ReadonlyArray<CardsProps.CardsLayout>;\n  /**\n   * Specifies the property inside items that uniquely identifies them.\n   * When it's set, it's used to provide [keys for React](https://reactjs.org/docs/lists-and-keys.html#keys)\n   * for performance optimizations.\n   *\n   * It's also used for connecting `items` and `selectedItems` values when they don't reference the same object.\n   */\n  trackBy?: CardsProps.TrackBy<T>;\n  /**\n   * Specifies the selection mode. It can be either `single` or `multi`.\n   */\n  selectionType?: CardsProps.SelectionType;\n  /**\n   * Specifies the list of selected items.\n   */\n  selectedItems?: ReadonlyArray<T>;\n  /**\n   * Determines which items are disabled. If an item is disabled, users can't select it.\n   */\n  isItemDisabled?: CardsProps.IsItemDisabled<T>;\n  /**\n   * Adds labels to the selection components (checkboxes and radio buttons) as follows:\n   * * `itemSelectionLabel` ((SelectionState, Item) => string) - Determines the label for an item.\n   * * `selectionGroupLabel` (string) - Specifies the label for the group selection control.\n   * * `cardsLabel` (string) - Provides alternative text for the cards list.\n   *                            By default the contents of the `header` are used.\n   *\n   * You can use the first arguments of type `SelectionState` to access the current selection\n   * state of the component (for example, the `selectedItems` list). The label function for individual\n   * items also receives the corresponding  `Item` object. You can use the group label to\n   * add a meaningful description to the whole selection.\n   * @i18n\n   */\n  ariaLabels?: CardsProps.AriaLabels<T>;\n  /**\n   * Specifies an array containing the `id` of each visible section. If not set, all sections are displayed.\n   *\n   * Use it in conjunction with the visible content preference of the [collection preferences](/components/collection-preferences/) component.\n   *\n   * The order of `id`s doesn't influence the order of display of sections, which is controlled by the `cardDefinition` property.\n   */\n  visibleSections?: ReadonlyArray<string>;\n  /**\n   * Called when a user interaction causes a change in the list of selected items.\n   * The event `detail` contains the current list of `selectedItems`.\n   */\n  onSelectionChange?: NonCancelableEventHandler<CardsProps.SelectionChangeDetail<T>>;\n  /**\n   * If set to true, the cards header remains visible when the user scrolls down.\n   */\n  stickyHeader?: boolean;\n  /**\n   * Optionally provide a vertical offset (in pixels) for the sticky header, for example if you\n   * need to position the sticky header below other fixed position elements on the page.\n   */\n  stickyHeaderVerticalOffset?: number;\n\n  /**\n   * Use this property to inform screen readers how many cards there are.\n   * It specifies the total number of cards.\n   * If there is an unknown total number of cards, leave this property undefined.   */\n  totalItemsCount?: number;\n  /**\n   *  Use this property to inform screen readers which range of cards is currently displayed.\n   *  It specifies the index (1-based) of the first card.\n   *  If the cards list has no pagination, leave this property undefined.   */\n  firstIndex?: number;\n  /**\n   * Use this function to announce page changes to screen reader users.\n   * Requires the properties firstIndex and totalItemsCount to be set correctly.\n   */\n  renderAriaLive?: (data: CardsProps.LiveAnnouncement) => string;\n\n  /**\n   * Specify a cards variant with one of the following:\n   * * `container` - Use this variant to have the cards displayed as a container.\n   * * `full-page` – Use this variant when cards are the entire content of a page. Full page variants\n   *                 implement the high contrast header and content behavior automatically.\n   * @visualrefresh `full-page` variant\n   */\n  variant?: 'container' | 'full-page';\n}\n\nexport namespace CardsProps {\n  export interface CardDefinition<T> {\n    header?(item: T): React.ReactNode;\n    sections?: ReadonlyArray<SectionDefinition<T>>;\n  }\n\n  export interface SectionDefinition<T> {\n    id?: string;\n    header?: React.ReactNode;\n    content?(item: T): React.ReactNode;\n    width?: number;\n  }\n\n  export interface CardsLayout {\n    cards: number;\n    minWidth?: number;\n  }\n\n  export type TrackBy<T> = string | ((item: T) => string);\n\n  export type SelectionType = 'single' | 'multi';\n\n  export interface SelectionState<T> {\n    selectedItems: ReadonlyArray<T>;\n  }\n\n  export interface SelectionChangeDetail<T> {\n    selectedItems: T[];\n  }\n\n  export type IsItemDisabled<T> = (item: T) => boolean;\n\n  export interface AriaLabels<T> {\n    itemSelectionLabel: (data: CardsProps.SelectionState<T>, row: T) => string;\n    selectionGroupLabel: string;\n    cardsLabel?: string;\n  }\n\n  export interface LiveAnnouncement {\n    totalItemsCount?: number;\n    firstIndex: number;\n    lastIndex: number;\n  }\n\n  export interface Ref {\n    /**\n     * When the sticky header is enabled, calling this function scrolls cards's\n     * scroll parent up to reveal the first card or row of cards.\n     */\n    scrollToTop(): void;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["cards/interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\n/*\n * HACK: Cast the component to a named parametrized interface.\n *\n * This lets us use React.forwardRef and still let the component have type\n * parameters, and the naming convention lets the documenter know that this is\n * a forwardRef-wrapped component.\n *\n * We don't need to expose this type to customers because it's just a simple\n * function type.\n */\nexport interface CardsForwardRefType {\n  <T>(props: CardsProps<T> & { ref?: React.Ref<CardsProps.Ref> }): JSX.Element;\n}\n\nexport interface CardsProps<T = any> extends BaseComponentProps {\n  /**\n   * Displayed only when the list of items is empty.\n   */\n  empty?: React.ReactNode;\n\n  /**\n   * Heading element of the table container. Use the [header component](/components/header/).\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Use this slot to add filtering controls to the component.\n   */\n  filter?: React.ReactNode;\n\n  /**\n   * Use this slot to add the [pagination component](/components/pagination/) to the component.\n   */\n  pagination?: React.ReactNode;\n\n  /**\n   * Use this slot to add [collection preferences](/components/collection-preferences/) to the component.\n   */\n  preferences?: React.ReactNode;\n\n  /**\n   * Specifies the items that serve as data source for a card.\n   *\n   * The `cardDefinition` property handles the display of this data.\n   */\n  items: ReadonlyArray<T>;\n\n  /**\n   * Renders the cards in a loading state. We recommend that you also set a `loadingText`.\n   */\n  loading?: boolean;\n\n  /**\n   * Specifies the text to display when in loading state.\n   */\n  loadingText?: string;\n\n  /**\n   *  Defines what to display in each card. It has the following properties:\n   *  * `header` ((item) => ReactNode) - Responsible for displaying the card header. You receive the current item as an argument.\n   *      Use `fontSize=\"inherit\"` on [link](/components/link/) components inside card header.\n   *  * `sections` (array) - Responsible for displaying the card content. Cards can have many sections in their\n   *    body. Each entry in the array is responsible for displaying a section. An entry has the following properties:\n   *    * `id`: (string) - A unique identifier for the section. The property is used as a [keys](https://reactjs.org/docs/lists-and-keys.html#keys)\n   *   source for React rendering, and to match entries in the `visibleSections` property (if it's defined).\n   *    * `header`: (ReactNode) - Responsible for displaying the section header.\n   *    * `content`: ((item) => ReactNode) - Responsible for displaying the section content. You receive the current item as an argument.\n   *    * `width`: (number) - Specifies the width of the card section in percent. Use this to display multiple sections in\n   *    the same row. The default value is 100%.\n   *\n   *  All of the above properties are optional.\n   */\n  cardDefinition: CardsProps.CardDefinition<T>;\n  /**\n   * Determines the number of cards per row for any interval of container width.\n   * It's an array whose entries are objects containing the following:\n   * - `cards` (number) - Specifies the number of cards per row.\n   * - `minWidth` (number) - Specifies the minimum container width (in pixels) for which this configuration object should apply.\n   *\n   * For example, with this configuration:\n   * ```\n   * [{\n   *   cards: 1\n   * }, {\n   *   minWidth: 500,\n   *   cards: 2\n   * }, {\n   *   minWidth: 800,\n   *   cards: 3\n   * }]\n   * ```\n   *\n   * the cards component displays:\n   * * 1 card per row when the container width is below 500px.\n   * * 2 cards per row when the container width is between 500px and 799px.\n   * * 3 cards per row when the container width is 800px or wider.\n   *\n   * The number of cards per row can't be greater than 20.\n   *\n   * Default value:\n   * ```\n   * [{\n   *   cards: 1\n   * }, {\n   *   minWidth: 768,\n   *   cards: 2\n   * }, {\n   *   minWidth: 992,\n   *   cards: 3\n   * }, {\n   *   minWidth: 1200,\n   *   cards: 4\n   * }, {\n   *   minWidth: 1400,\n   *   cards: 5\n   * }, {\n   *   minWidth: 1920,\n   *   cards: 6\n   * }]\n   * ```\n   */\n  cardsPerRow?: ReadonlyArray<CardsProps.CardsLayout>;\n  /**\n   * Specifies the property inside items that uniquely identifies them.\n   * When it's set, it's used to provide [keys for React](https://reactjs.org/docs/lists-and-keys.html#keys)\n   * for performance optimizations.\n   *\n   * It's also used for connecting `items` and `selectedItems` values when they don't reference the same object.\n   */\n  trackBy?: CardsProps.TrackBy<T>;\n  /**\n   * Specifies the selection mode. It can be either `single` or `multi`.\n   */\n  selectionType?: CardsProps.SelectionType;\n  /**\n   * Specifies the list of selected items.\n   */\n  selectedItems?: ReadonlyArray<T>;\n  /**\n   * Determines which items are disabled. If an item is disabled, users can't select it.\n   */\n  isItemDisabled?: CardsProps.IsItemDisabled<T>;\n  /**\n   * Adds labels to the selection components (checkboxes and radio buttons) as follows:\n   * * `itemSelectionLabel` ((SelectionState, Item) => string) - Determines the label for an item.\n   * * `selectionGroupLabel` (string) - Specifies the label for the group selection control.\n   * * `cardsLabel` (string) - Provides alternative text for the cards list.\n   *                            By default the contents of the `header` are used.\n   *\n   * You can use the first arguments of type `SelectionState` to access the current selection\n   * state of the component (for example, the `selectedItems` list). The label function for individual\n   * items also receives the corresponding  `Item` object. You can use the group label to\n   * add a meaningful description to the whole selection.\n   * @i18n\n   */\n  ariaLabels?: CardsProps.AriaLabels<T>;\n  /**\n   * Specifies an array containing the `id` of each visible section. If not set, all sections are displayed.\n   *\n   * Use it in conjunction with the visible content preference of the [collection preferences](/components/collection-preferences/) component.\n   *\n   * The order of `id`s doesn't influence the order of display of sections, which is controlled by the `cardDefinition` property.\n   */\n  visibleSections?: ReadonlyArray<string>;\n  /**\n   * Called when a user interaction causes a change in the list of selected items.\n   * The event `detail` contains the current list of `selectedItems`.\n   */\n  onSelectionChange?: NonCancelableEventHandler<CardsProps.SelectionChangeDetail<T>>;\n  /**\n   * If set to true, the cards header remains visible when the user scrolls down.\n   */\n  stickyHeader?: boolean;\n  /**\n   * Optionally provide a vertical offset (in pixels) for the sticky header, for example if you\n   * need to position the sticky header below other fixed position elements on the page.\n   */\n  stickyHeaderVerticalOffset?: number;\n\n  /**\n   * Use this property to inform screen readers how many cards there are.\n   * It specifies the total number of cards.\n   * If there is an unknown total number of cards, leave this property undefined.   */\n  totalItemsCount?: number;\n  /**\n   *  Use this property to inform screen readers which range of cards is currently displayed.\n   *  It specifies the index (1-based) of the first card.\n   *  If the cards list has no pagination, leave this property undefined.   */\n  firstIndex?: number;\n  /**\n   * Use this function to announce page changes to screen reader users.\n   * Requires the properties firstIndex and totalItemsCount to be set correctly.\n   */\n  renderAriaLive?: (data: CardsProps.LiveAnnouncement) => string;\n\n  /**\n   * Specify a cards variant with one of the following:\n   * * `container` - Use this variant to have the cards displayed as a container.\n   * * `full-page` – Use this variant when cards are the entire content of a page. Full page variants\n   *                 implement the high contrast header and content behavior automatically.\n   * @visualrefresh `full-page` variant\n   */\n  variant?: 'container' | 'full-page';\n}\n\nexport namespace CardsProps {\n  export interface CardDefinition<T> {\n    header?(item: T): React.ReactNode;\n    sections?: ReadonlyArray<SectionDefinition<T>>;\n  }\n\n  export interface SectionDefinition<T> {\n    id?: string;\n    header?: React.ReactNode;\n    content?(item: T): React.ReactNode;\n    width?: number;\n  }\n\n  export interface CardsLayout {\n    cards: number;\n    minWidth?: number;\n  }\n\n  export type TrackBy<T> = string | ((item: T) => string);\n\n  export type SelectionType = 'single' | 'multi';\n\n  export interface SelectionState<T> {\n    selectedItems: ReadonlyArray<T>;\n  }\n\n  export interface SelectionChangeDetail<T> {\n    selectedItems: T[];\n  }\n\n  export type IsItemDisabled<T> = (item: T) => boolean;\n\n  export interface AriaLabels<T> {\n    itemSelectionLabel: (data: CardsProps.SelectionState<T>, row: T) => string;\n    selectionGroupLabel: string;\n    cardsLabel?: string;\n  }\n\n  export interface LiveAnnouncement {\n    totalItemsCount?: number;\n    firstIndex: number;\n    lastIndex: number;\n  }\n\n  export interface Ref {\n    /**\n     * When the sticky header is enabled, calling this function scrolls cards's\n     * scroll parent up to reveal the first card or row of cards.\n     */\n    scrollToTop(): void;\n  }\n}\n"]}

package/help-panel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["help-panel/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAI9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,EAAE,cAAc,eAqBjH"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["help-panel/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAK9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,EAAE,cAAc,eAuBjH"}

package/help-panel/index.js

@@ -10,6 +10,7 @@ import { applyDisplayName } from '../internal/utils/apply-display-name';
 import useBaseComponent from '../internal/hooks/use-base-component';
 import LiveRegion from '../internal/components/live-region';
 import { useInternalI18n } from '../i18n/context';
+import { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';
 export default function HelpPanel(_a) {
     var { header, footer, children, loading, loadingText } = _a, restProps = __rest(_a, ["header", "footer", "children", "loading", "loadingText"]);
     const { __internalRootRef } = useBaseComponent('HelpPanel');
@@ -20,7 +21,8 @@ export default function HelpPanel(_a) {
         React.createElement(InternalStatusIndicator, { type: "loading" },
             React.createElement(LiveRegion, { visible: true }, i18n('loadingText', loadingText))))) : (React.createElement("div", Object.assign({}, containerProps, { ref: __internalRootRef }),
         header && React.createElement("div", { className: clsx(styles.header) }, header),
-        React.createElement("div", { className: clsx(styles.content) }, children),
+        React.createElement(LinkDefaultVariantContext.Provider, { value: { defaultVariant: 'primary' } },
+            React.createElement("div", { className: clsx(styles.content) }, children)),
         footer && React.createElement("div", { className: styles.footer }, footer)));
 }
 applyDisplayName(HelpPanel, 'HelpPanel');

package/help-panel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["help-panel/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AACnE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAEpE,OAAO,UAAU,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAIlD,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAgF;QAAhF,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,OAAgC,EAA3B,SAAS,cAA9D,0DAAgE,CAAF;IAC9F,MAAM,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC5D,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,IAAI,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC;IAC3C,MAAM,cAAc,mCACf,SAAS,KACZ,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC,GAC3D,CAAC;IACF,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,6CAAS,cAAc,IAAE,GAAG,EAAE,iBAAiB;QAC7C,oBAAC,uBAAuB,IAAC,IAAI,EAAC,SAAS;YACrC,oBAAC,UAAU,IAAC,OAAO,EAAE,IAAI,IAAG,IAAI,CAAC,aAAa,EAAE,WAAW,CAAC,CAAc,CAClD,CACtB,CACP,CAAC,CAAC,CAAC,CACF,6CAAS,cAAc,IAAE,GAAG,EAAE,iBAAiB;QAC5C,MAAM,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAG,MAAM,CAAO;QAC9D,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAG,QAAQ,CAAO;QACrD,MAAM,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,MAAM,CAAO,CACpD,CACP,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport styles from './styles.css.js';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { HelpPanelProps } from './interfaces';\nimport LiveRegion from '../internal/components/live-region';\nimport { useInternalI18n } from '../i18n/context';\n\nexport { HelpPanelProps };\n\nexport default function HelpPanel({ header, footer, children, loading, loadingText, ...restProps }: HelpPanelProps) {\n  const { __internalRootRef } = useBaseComponent('HelpPanel');\n  const baseProps = getBaseProps(restProps);\n  const i18n = useInternalI18n('help-panel');\n  const containerProps = {\n    ...baseProps,\n    className: clsx(baseProps.className, styles['help-panel']),\n  };\n  return loading ? (\n    <div {...containerProps} ref={__internalRootRef}>\n      <InternalStatusIndicator type=\"loading\">\n        <LiveRegion visible={true}>{i18n('loadingText', loadingText)}</LiveRegion>\n      </InternalStatusIndicator>\n    </div>\n  ) : (\n    <div {...containerProps} ref={__internalRootRef}>\n      {header && <div className={clsx(styles.header)}>{header}</div>}\n      <div className={clsx(styles.content)}>{children}</div>\n      {footer && <div className={styles.footer}>{footer}</div>}\n    </div>\n  );\n}\n\napplyDisplayName(HelpPanel, 'HelpPanel');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["help-panel/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AACnE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAEpE,OAAO,UAAU,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,yBAAyB,EAAE,MAAM,kDAAkD,CAAC;AAI7F,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAgF;QAAhF,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,OAAgC,EAA3B,SAAS,cAA9D,0DAAgE,CAAF;IAC9F,MAAM,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC5D,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,IAAI,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC;IAC3C,MAAM,cAAc,mCACf,SAAS,KACZ,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC,GAC3D,CAAC;IACF,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,6CAAS,cAAc,IAAE,GAAG,EAAE,iBAAiB;QAC7C,oBAAC,uBAAuB,IAAC,IAAI,EAAC,SAAS;YACrC,oBAAC,UAAU,IAAC,OAAO,EAAE,IAAI,IAAG,IAAI,CAAC,aAAa,EAAE,WAAW,CAAC,CAAc,CAClD,CACtB,CACP,CAAC,CAAC,CAAC,CACF,6CAAS,cAAc,IAAE,GAAG,EAAE,iBAAiB;QAC5C,MAAM,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAG,MAAM,CAAO;QAC9D,oBAAC,yBAAyB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE;YACtE,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAG,QAAQ,CAAO,CACnB;QACpC,MAAM,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,MAAM,CAAO,CACpD,CACP,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport styles from './styles.css.js';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { HelpPanelProps } from './interfaces';\nimport LiveRegion from '../internal/components/live-region';\nimport { useInternalI18n } from '../i18n/context';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\n\nexport { HelpPanelProps };\n\nexport default function HelpPanel({ header, footer, children, loading, loadingText, ...restProps }: HelpPanelProps) {\n  const { __internalRootRef } = useBaseComponent('HelpPanel');\n  const baseProps = getBaseProps(restProps);\n  const i18n = useInternalI18n('help-panel');\n  const containerProps = {\n    ...baseProps,\n    className: clsx(baseProps.className, styles['help-panel']),\n  };\n  return loading ? (\n    <div {...containerProps} ref={__internalRootRef}>\n      <InternalStatusIndicator type=\"loading\">\n        <LiveRegion visible={true}>{i18n('loadingText', loadingText)}</LiveRegion>\n      </InternalStatusIndicator>\n    </div>\n  ) : (\n    <div {...containerProps} ref={__internalRootRef}>\n      {header && <div className={clsx(styles.header)}>{header}</div>}\n      <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n        <div className={clsx(styles.content)}>{children}</div>\n      </LinkDefaultVariantContext.Provider>\n      {footer && <div className={styles.footer}>{footer}</div>}\n    </div>\n  );\n}\n\napplyDisplayName(HelpPanel, 'HelpPanel');\n"]}

package/help-panel/styles.css.js

@@ -1,9 +1,9 @@
 
     import './styles.scoped.css';
     export default {
-  "help-panel": "awsui_help-panel_1d237_1frzn_94",
-  "header": "awsui_header_1d237_1frzn_228",
-  "content": "awsui_content_1d237_1frzn_258",
-  "footer": "awsui_footer_1d237_1frzn_304"
+  "help-panel": "awsui_help-panel_1d237_1n1b3_94",
+  "header": "awsui_header_1d237_1n1b3_228",
+  "content": "awsui_content_1d237_1n1b3_258",
+  "footer": "awsui_footer_1d237_1n1b3_304"
 };
   

package/help-panel/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 @cloudscape-design/no-implicit-descendant, selector-max-type */
-.awsui_help-panel_1d237_1frzn_94:not(#\9) {
+.awsui_help-panel_1d237_1n1b3_94:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -131,32 +131,32 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   word-wrap: break-word;
   padding: var(--space-scaled-l-0hpmd7, 20px) var(--space-panel-side-right-xofg51, 24px) 0 var(--space-panel-side-left-5t0who, 28px);
 }
-.awsui_help-panel_1d237_1frzn_94 hr:not(#\9) {
+.awsui_help-panel_1d237_1n1b3_94 hr:not(#\9) {
   border: none;
   border-top: var(--border-divider-section-width-4ax5o2, 2px) solid var(--color-border-divider-default-d3adp9, #e9ebed);
   margin: var(--space-scaled-xl-kswcw7, 24px) calc(-1 * var(--space-xs-zb16t3, 8px));
 }
-.awsui_help-panel_1d237_1frzn_94 ol:not(#\9),
-.awsui_help-panel_1d237_1frzn_94 ul:not(#\9) {
+.awsui_help-panel_1d237_1n1b3_94 ol:not(#\9),
+.awsui_help-panel_1d237_1n1b3_94 ul:not(#\9) {
   padding-left: var(--space-l-t419sm, 20px);
   list-style-position: outside;
   margin: var(--space-s-34lx8l, 12px) 0;
 }
-.awsui_help-panel_1d237_1frzn_94 li:not(#\9) {
+.awsui_help-panel_1d237_1n1b3_94 li:not(#\9) {
   margin: var(--space-scaled-xxs-7597g1, 4px) 0;
 }
-.awsui_help-panel_1d237_1frzn_94 a:not(#\9),
-.awsui_help-panel_1d237_1frzn_94 h2:not(#\9),
-.awsui_help-panel_1d237_1frzn_94 h3:not(#\9),
-.awsui_help-panel_1d237_1frzn_94 h4:not(#\9),
-.awsui_help-panel_1d237_1frzn_94 h5:not(#\9),
-.awsui_help-panel_1d237_1frzn_94 pre:not(#\9),
-.awsui_help-panel_1d237_1frzn_94 code:not(#\9) {
+.awsui_help-panel_1d237_1n1b3_94 a:not(#\9),
+.awsui_help-panel_1d237_1n1b3_94 h2:not(#\9),
+.awsui_help-panel_1d237_1n1b3_94 h3:not(#\9),
+.awsui_help-panel_1d237_1n1b3_94 h4:not(#\9),
+.awsui_help-panel_1d237_1n1b3_94 h5:not(#\9),
+.awsui_help-panel_1d237_1n1b3_94 pre:not(#\9),
+.awsui_help-panel_1d237_1n1b3_94 code:not(#\9) {
   margin: var(--space-xs-zb16t3, 8px) 0;
   padding-top: 0;
   padding-bottom: 0;
 }
-.awsui_help-panel_1d237_1frzn_94 code:not(#\9) {
+.awsui_help-panel_1d237_1n1b3_94 code:not(#\9) {
   font-size: var(--font-body-s-size-8339kg, 12px);
   line-height: var(--font-body-s-line-height-uztvf6, 16px);
   letter-spacing: var(--font-body-s-letter-spacing-4obhmb, 0.005em);
@@ -166,7 +166,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   word-wrap: break-word;
   white-space: pre-wrap;
 }
-.awsui_help-panel_1d237_1frzn_94 pre:not(#\9) {
+.awsui_help-panel_1d237_1n1b3_94 pre:not(#\9) {
   font-size: var(--font-body-s-size-8339kg, 12px);
   line-height: var(--font-body-s-line-height-uztvf6, 16px);
   letter-spacing: var(--font-body-s-letter-spacing-4obhmb, 0.005em);
@@ -177,38 +177,38 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   white-space: pre-wrap;
   padding: var(--space-xxs-p8yyaw, 4px);
 }
-.awsui_help-panel_1d237_1frzn_94 dl:not(#\9) {
+.awsui_help-panel_1d237_1n1b3_94 dl:not(#\9) {
   margin: var(--space-s-34lx8l, 12px) 0;
   /* stylelint-disable-next-line selector-max-universal */
 }
-.awsui_help-panel_1d237_1frzn_94 dl *:not(#\9) {
+.awsui_help-panel_1d237_1n1b3_94 dl *:not(#\9) {
   margin-top: 0;
   margin-bottom: 0;
 }
-.awsui_help-panel_1d237_1frzn_94 dt:not(#\9) {
+.awsui_help-panel_1d237_1n1b3_94 dt:not(#\9) {
   margin-top: var(--space-xs-zb16t3, 8px);
   font-weight: 700;
 }
-.awsui_help-panel_1d237_1frzn_94 dd:not(#\9) {
+.awsui_help-panel_1d237_1n1b3_94 dd:not(#\9) {
   margin: 0 0 var(--space-xs-zb16t3, 8px);
 }
-.awsui_help-panel_1d237_1frzn_94 h2:not(#\9),
-.awsui_help-panel_1d237_1frzn_94 h3:not(#\9),
-.awsui_help-panel_1d237_1frzn_94 h4:not(#\9),
-.awsui_help-panel_1d237_1frzn_94 h5:not(#\9),
-.awsui_help-panel_1d237_1frzn_94 h6:not(#\9) {
+.awsui_help-panel_1d237_1n1b3_94 h2:not(#\9),
+.awsui_help-panel_1d237_1n1b3_94 h3:not(#\9),
+.awsui_help-panel_1d237_1n1b3_94 h4:not(#\9),
+.awsui_help-panel_1d237_1n1b3_94 h5:not(#\9),
+.awsui_help-panel_1d237_1n1b3_94 h6:not(#\9) {
   margin-top: var(--space-xl-lmui9r, 24px);
   color: var(--color-text-heading-default-rtslvy, #000716);
 }
-.awsui_help-panel_1d237_1frzn_94 > :not(#\9):last-child {
+.awsui_help-panel_1d237_1n1b3_94 > :not(#\9):last-child {
   margin-bottom: var(--space-scaled-xxxl-fdg8ai, 40px);
 }
-.awsui_help-panel_1d237_1frzn_94 p:not(#\9) {
+.awsui_help-panel_1d237_1n1b3_94 p:not(#\9) {
   color: inherit;
   text-decoration: none;
   margin: var(--space-s-34lx8l, 12px) 0;
 }
-.awsui_help-panel_1d237_1frzn_94 h1:not(#\9) {
+.awsui_help-panel_1d237_1n1b3_94 h1:not(#\9) {
   font-size: var(--font-heading-xl-size-h632xk, 24px);
   line-height: var(--font-heading-xl-line-height-qs40h8, 30px);
   letter-spacing: var(--font-heading-xl-letter-spacing-6telo5, -0.02em);
@@ -216,7 +216,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: var(--font-smoothing-webkit-m8nc84, antialiased);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
 }
-.awsui_help-panel_1d237_1frzn_94 h2:not(#\9) {
+.awsui_help-panel_1d237_1n1b3_94 h2:not(#\9) {
   font-size: var(--font-heading-l-size-hknb7q, 20px);
   line-height: var(--font-heading-l-line-height-thvd8z, 24px);
   letter-spacing: var(--font-heading-l-letter-spacing-r9otw4, -0.015em);
@@ -224,7 +224,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: var(--font-smoothing-webkit-m8nc84, antialiased);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
 }
-.awsui_help-panel_1d237_1frzn_94 h3:not(#\9) {
+.awsui_help-panel_1d237_1n1b3_94 h3:not(#\9) {
   font-size: var(--font-heading-m-size-ytqm4n, 18px);
   line-height: var(--font-heading-m-line-height-bk6bii, 22px);
   letter-spacing: var(--font-heading-m-letter-spacing-fefyfv, -0.01em);
@@ -232,7 +232,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: var(--font-smoothing-webkit-m8nc84, antialiased);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
 }
-.awsui_help-panel_1d237_1frzn_94 h4:not(#\9) {
+.awsui_help-panel_1d237_1n1b3_94 h4:not(#\9) {
   font-size: var(--font-heading-s-size-5q52fl, 16px);
   line-height: var(--font-heading-s-line-height-w6crw0, 20px);
   letter-spacing: var(--font-heading-s-letter-spacing-ebpsb6, -0.005em);
@@ -240,18 +240,18 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: var(--font-smoothing-webkit-m8nc84, antialiased);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
 }
-.awsui_help-panel_1d237_1frzn_94 h5:not(#\9) {
+.awsui_help-panel_1d237_1n1b3_94 h5:not(#\9) {
   font-size: var(--font-heading-xs-size-d24gfe, 14px);
   line-height: var(--font-heading-xs-line-height-gyxcvc, 18px);
   font-weight: var(--font-heading-xs-weight-dcgvdt, 700);
   -webkit-font-smoothing: var(--font-smoothing-webkit-m8nc84, antialiased);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
 }
-.awsui_help-panel_1d237_1frzn_94 b:not(#\9),
-.awsui_help-panel_1d237_1frzn_94 strong:not(#\9) {
+.awsui_help-panel_1d237_1n1b3_94 b:not(#\9),
+.awsui_help-panel_1d237_1n1b3_94 strong:not(#\9) {
   font-weight: 700;
 }
-.awsui_help-panel_1d237_1frzn_94 .awsui_header_1d237_1frzn_228:not(#\9) {
+.awsui_help-panel_1d237_1n1b3_94 .awsui_header_1d237_1n1b3_228:not(#\9) {
   font-size: var(--font-panel-header-size-edjz3l, 18px);
   line-height: var(--font-panel-header-line-height-kxi4u2, 22px);
   font-weight: var(--font-heading-l-weight-a4lz4s, 700);
@@ -265,11 +265,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-bottom: var(--border-divider-section-width-4ax5o2, 2px) solid var(--color-border-divider-default-d3adp9, #e9ebed);
   margin: 0 calc(-1 * var(--space-panel-side-right-xofg51, 24px)) var(--space-scaled-l-0hpmd7, 20px) calc(-1 * var(--space-panel-side-left-5t0who, 28px));
 }
-.awsui_help-panel_1d237_1frzn_94 .awsui_header_1d237_1frzn_228 h2:not(#\9),
-.awsui_help-panel_1d237_1frzn_94 .awsui_header_1d237_1frzn_228 h3:not(#\9),
-.awsui_help-panel_1d237_1frzn_94 .awsui_header_1d237_1frzn_228 h4:not(#\9),
-.awsui_help-panel_1d237_1frzn_94 .awsui_header_1d237_1frzn_228 h5:not(#\9),
-.awsui_help-panel_1d237_1frzn_94 .awsui_header_1d237_1frzn_228 h6:not(#\9) {
+.awsui_help-panel_1d237_1n1b3_94 .awsui_header_1d237_1n1b3_228 h2:not(#\9),
+.awsui_help-panel_1d237_1n1b3_94 .awsui_header_1d237_1n1b3_228 h3:not(#\9),
+.awsui_help-panel_1d237_1n1b3_94 .awsui_header_1d237_1n1b3_228 h4:not(#\9),
+.awsui_help-panel_1d237_1n1b3_94 .awsui_header_1d237_1n1b3_228 h5:not(#\9),
+.awsui_help-panel_1d237_1n1b3_94 .awsui_header_1d237_1n1b3_228 h6:not(#\9) {
   font-size: var(--font-panel-header-size-edjz3l, 18px);
   line-height: var(--font-panel-header-line-height-kxi4u2, 22px);
   font-weight: var(--font-heading-l-weight-a4lz4s, 700);
@@ -281,69 +281,68 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-bottom: 0;
 }
 
-.awsui_content_1d237_1frzn_258:not(#\9) {
+.awsui_content_1d237_1n1b3_258:not(#\9) {
   color: var(--color-text-body-secondary-so8znq, #414d5c);
 }
-.awsui_content_1d237_1frzn_258 h2:not(#\9):first-child,
-.awsui_content_1d237_1frzn_258 h3:not(#\9):first-child,
-.awsui_content_1d237_1frzn_258 h4:not(#\9):first-child,
-.awsui_content_1d237_1frzn_258 h5:not(#\9):first-child,
-.awsui_content_1d237_1frzn_258 h6:not(#\9):first-child {
+.awsui_content_1d237_1n1b3_258 h2:not(#\9):first-child,
+.awsui_content_1d237_1n1b3_258 h3:not(#\9):first-child,
+.awsui_content_1d237_1n1b3_258 h4:not(#\9):first-child,
+.awsui_content_1d237_1n1b3_258 h5:not(#\9):first-child,
+.awsui_content_1d237_1n1b3_258 h6:not(#\9):first-child {
   margin-top: 0;
 }
-.awsui_content_1d237_1frzn_258 a:not(#\9) {
+.awsui_content_1d237_1n1b3_258 a:not(#\9) {
   color: var(--color-text-link-default-latg1a, #0972d3);
-  font-weight: var(--font-link-primary-weight-k726vk, "inherit");
-  letter-spacing: var(--font-link-primary-letter-spacing-uqaf5f, "inherit");
-  -webkit-text-decoration: var(--font-link-primary-decoration-cp88s8, underline);
-          text-decoration: var(--font-link-primary-decoration-cp88s8, underline);
+  font-weight: inherit;
+  letter-spacing: normal;
+  text-decoration: underline;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-  text-decoration-color: var(--color-text-link-primary-underline-gvxbge, #0972d3);
+  text-decoration-color: currentColor;
   transition-property: color, -webkit-text-decoration;
   transition-property: color, text-decoration;
   transition-property: color, text-decoration, -webkit-text-decoration;
   transition-duration: var(--motion-duration-refresh-only-medium-nf6485, 165ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_content_1d237_1frzn_258 a:not(#\9) {
+  .awsui_content_1d237_1n1b3_258 a:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_content_1d237_1frzn_258 a:not(#\9), .awsui-mode-entering .awsui_content_1d237_1frzn_258 a:not(#\9) {
+.awsui-motion-disabled .awsui_content_1d237_1n1b3_258 a:not(#\9), .awsui-mode-entering .awsui_content_1d237_1n1b3_258 a:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_content_1d237_1frzn_258 a:not(#\9):hover {
+.awsui_content_1d237_1n1b3_258 a:not(#\9):hover {
   cursor: pointer;
   color: var(--color-text-link-hover-8j6p14, #033160);
 }
-.awsui_content_1d237_1frzn_258 a:not(#\9):focus {
+.awsui_content_1d237_1n1b3_258 a:not(#\9):focus {
   outline: none;
 }
-.awsui_content_1d237_1frzn_258 a:not(#\9):active {
+.awsui_content_1d237_1n1b3_258 a:not(#\9):active {
   color: var(--color-text-link-hover-8j6p14, #033160);
 }
-.awsui_content_1d237_1frzn_258 a:not(#\9):active, .awsui_content_1d237_1frzn_258 a:not(#\9):focus, .awsui_content_1d237_1frzn_258 a:not(#\9):hover {
+.awsui_content_1d237_1n1b3_258 a:not(#\9):active, .awsui_content_1d237_1n1b3_258 a:not(#\9):focus, .awsui_content_1d237_1n1b3_258 a:not(#\9):hover {
   text-decoration: underline;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   text-decoration-color: currentColor;
 }
 
-.awsui_footer_1d237_1frzn_304:not(#\9) {
+.awsui_footer_1d237_1n1b3_304:not(#\9) {
   color: var(--color-text-body-secondary-so8znq, #414d5c);
   border-top: var(--border-divider-section-width-4ax5o2, 2px) solid var(--color-border-divider-default-d3adp9, #e9ebed);
   margin: var(--space-scaled-xl-kswcw7, 24px) calc(-1 * var(--space-xs-zb16t3, 8px));
   padding: 0 var(--space-s-34lx8l, 12px);
 }
-.awsui_footer_1d237_1frzn_304 > :not(#\9):first-child {
+.awsui_footer_1d237_1n1b3_304 > :not(#\9):first-child {
   margin-top: var(--space-scaled-xl-kswcw7, 24px);
 }
-.awsui_footer_1d237_1frzn_304 ul:not(#\9) {
+.awsui_footer_1d237_1n1b3_304 ul:not(#\9) {
   list-style: none;
   padding-left: 0;
 }
-.awsui_footer_1d237_1frzn_304 a:not(#\9) {
+.awsui_footer_1d237_1n1b3_304 a:not(#\9) {
   color: var(--color-text-link-default-latg1a, #0972d3);
   font-weight: inherit;
   letter-spacing: normal;
@@ -356,33 +355,33 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transition-duration: var(--motion-duration-refresh-only-medium-nf6485, 165ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_footer_1d237_1frzn_304 a:not(#\9) {
+  .awsui_footer_1d237_1n1b3_304 a:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_footer_1d237_1frzn_304 a:not(#\9), .awsui-mode-entering .awsui_footer_1d237_1frzn_304 a:not(#\9) {
+.awsui-motion-disabled .awsui_footer_1d237_1n1b3_304 a:not(#\9), .awsui-mode-entering .awsui_footer_1d237_1n1b3_304 a:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_footer_1d237_1frzn_304 a:not(#\9):hover {
+.awsui_footer_1d237_1n1b3_304 a:not(#\9):hover {
   cursor: pointer;
   color: var(--color-text-link-hover-8j6p14, #033160);
 }
-.awsui_footer_1d237_1frzn_304 a:not(#\9):focus {
+.awsui_footer_1d237_1n1b3_304 a:not(#\9):focus {
   outline: none;
 }
-.awsui_footer_1d237_1frzn_304 a:not(#\9):active {
+.awsui_footer_1d237_1n1b3_304 a:not(#\9):active {
   color: var(--color-text-link-hover-8j6p14, #033160);
 }
-.awsui_footer_1d237_1frzn_304 a:not(#\9):active, .awsui_footer_1d237_1frzn_304 a:not(#\9):focus, .awsui_footer_1d237_1frzn_304 a:not(#\9):hover {
+.awsui_footer_1d237_1n1b3_304 a:not(#\9):active, .awsui_footer_1d237_1n1b3_304 a:not(#\9):focus, .awsui_footer_1d237_1n1b3_304 a:not(#\9):hover {
   text-decoration: underline;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   text-decoration-color: currentColor;
 }
 
-.awsui_content_1d237_1frzn_258 a:not(#\9):focus,
-.awsui_footer_1d237_1frzn_304 a:not(#\9):focus {
+.awsui_content_1d237_1n1b3_258 a:not(#\9):focus,
+.awsui_footer_1d237_1n1b3_304 a:not(#\9):focus {
   outline: thin dotted;
   outline: var(--border-link-focus-ring-outline-kkfop6, 0);
   outline-offset: 2px;

package/help-panel/styles.selectors.js

@@ -2,9 +2,9 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "help-panel": "awsui_help-panel_1d237_1frzn_94",
-  "header": "awsui_header_1d237_1frzn_228",
-  "content": "awsui_content_1d237_1frzn_258",
-  "footer": "awsui_footer_1d237_1frzn_304"
+  "help-panel": "awsui_help-panel_1d237_1n1b3_94",
+  "header": "awsui_header_1d237_1n1b3_228",
+  "content": "awsui_content_1d237_1n1b3_258",
+  "footer": "awsui_footer_1d237_1n1b3_304"
 };
   

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

@@ -346,7 +346,6 @@
   --color-text-link-inverted-hover-09cw7h:#ffffff;
   --color-text-link-button-underline-ik5r9i:transparent;
   --color-text-link-button-underline-hover-gyir88:transparent;
-  --color-text-link-primary-underline-gvxbge:#0972d3;
   --color-text-notification-default-rdawv9:#fbfbfb;
   --color-text-notification-stack-bar-jc9tvx:#ffffff;
   --color-text-notification-yellow-p027cz:#000716;
@@ -409,9 +408,6 @@
   --font-box-value-large-weight-onoq9k:700;
   --font-link-button-letter-spacing-yi9f0l:0.005em;
   --font-link-button-weight-jephf1:700;
-  --font-link-primary-decoration-cp88s8:underline;
-  --font-link-primary-letter-spacing-uqaf5f:"inherit";
-  --font-link-primary-weight-k726vk:"inherit";
   --font-panel-header-line-height-kxi4u2:22px;
   --font-panel-header-size-edjz3l:18px;
   --font-smoothing-webkit-m8nc84:antialiased;
@@ -921,7 +917,6 @@
     --color-text-layout-toggle-selected-b93usl:#000716;
     --color-text-link-default-latg1a:#539fe5;
     --color-text-link-hover-8j6p14:#89bdee;
-    --color-text-link-primary-underline-gvxbge:#539fe5;
     --color-text-pagination-page-number-active-disabled-pnozll:#5f6b7a;
     --color-text-pagination-page-number-default-i8se09:#9ba7b6;
     --color-text-segment-active-6s77n9:#000716;
@@ -1199,7 +1194,6 @@
   --color-text-layout-toggle-selected-b93usl:#000716;
   --color-text-link-default-latg1a:#539fe5;
   --color-text-link-hover-8j6p14:#89bdee;
-  --color-text-link-primary-underline-gvxbge:#539fe5;
   --color-text-pagination-page-number-active-disabled-pnozll:#5f6b7a;
   --color-text-pagination-page-number-default-i8se09:#9ba7b6;
   --color-text-segment-active-6s77n9:#000716;
@@ -1382,7 +1376,6 @@
   --color-text-layout-toggle-selected-b93usl:#000716;
   --color-text-link-default-latg1a:#539fe5;
   --color-text-link-hover-8j6p14:#89bdee;
-  --color-text-link-primary-underline-gvxbge:#539fe5;
   --color-text-pagination-page-number-active-disabled-pnozll:#5f6b7a;
   --color-text-pagination-page-number-default-i8se09:#9ba7b6;
   --color-text-segment-active-6s77n9:#000716;
@@ -1653,7 +1646,6 @@
   --color-text-layout-toggle-selected-b93usl:#000716;
   --color-text-link-default-latg1a:#539fe5;
   --color-text-link-hover-8j6p14:#89bdee;
-  --color-text-link-primary-underline-gvxbge:#539fe5;
   --color-text-pagination-page-number-active-disabled-pnozll:#5f6b7a;
   --color-text-pagination-page-number-default-i8se09:#9ba7b6;
   --color-text-segment-active-6s77n9:#000716;

package/internal/context/link-default-variant-context.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { LinkProps } from '../../link/interfaces';
+export declare const LinkDefaultVariantContext: import("react").Context<{
+    defaultVariant: LinkProps.Variant;
+}>;
+//# sourceMappingURL=link-default-variant-context.d.ts.map

package/internal/context/link-default-variant-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-default-variant-context.d.ts","sourceRoot":"lib/default/","sources":["internal/context/link-default-variant-context.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,eAAO,MAAM,yBAAyB;oBAAmC,UAAU,OAAO;EAExF,CAAC"}

package/internal/context/link-default-variant-context.js

@@ -0,0 +1,7 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { createContext } from 'react';
+export const LinkDefaultVariantContext = createContext({
+    defaultVariant: 'secondary',
+});
+//# sourceMappingURL=link-default-variant-context.js.map

package/internal/context/link-default-variant-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-default-variant-context.js","sourceRoot":"lib/default/","sources":["internal/context/link-default-variant-context.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGtC,MAAM,CAAC,MAAM,yBAAyB,GAAG,aAAa,CAAwC;IAC5F,cAAc,EAAE,WAAW;CAC5B,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { createContext } from 'react';\nimport { LinkProps } from '../../link/interfaces';\n\nexport const LinkDefaultVariantContext = createContext<{ defaultVariant: LinkProps.Variant }>({\n  defaultVariant: 'secondary',\n});\n"]}

package/internal/environment.js

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (0a439022)";
+export var PACKAGE_VERSION = "3.0.0 (d87a49a0)";
 export var THEME = "open-source-visual-refresh";
 export var ALWAYS_VISUAL_REFRESH = true;