@cloudscape-design/components 3.0.0

package/button-dropdown/utils/use-highlighted-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-highlighted-menu.js","sourceRoot":"","sources":["../../../../src/button-dropdown/utils/use-highlighted-menu.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useState, useMemo, useCallback } from 'react';\n\nimport { indexIncludes } from './utils';\nimport { ButtonDropdownProps, HighlightProps } from '../interfaces';\nimport createItemsTree, { TreeIndex } from './create-items-tree';\nimport moveHighlightOneStep from './move-highlight';\n\ninterface UseHighlightedMenuOptions {\n  items: ButtonDropdownProps.Items;\n  hasExpandableGroups: boolean;\n  isInRestrictedView?: boolean;\n}\n\ninterface UseHighlightedMenuApi extends HighlightProps {\n  moveHighlight: (direction: -1 | 1) => void;\n  expandGroup: (group?: ButtonDropdownProps.ItemGroup) => void;\n  collapseGroup: () => void;\n  reset: () => void;\n}\n\nexport default function useHighlightedMenu({\n  items,\n  hasExpandableGroups,\n  isInRestrictedView = false,\n}: UseHighlightedMenuOptions): UseHighlightedMenuApi {\n  const [targetIndex, setTargetIndex] = useState<TreeIndex>([]);\n  const [expandedIndex, setExpandedIndex] = useState<TreeIndex>([]);\n\n  const { getItem, getItemIndex, getSequentialIndex, getParentIndex } = useMemo(() => createItemsTree(items), [items]);\n\n  const targetItem = useMemo(() => getItem(targetIndex), [targetIndex, getItem]);\n\n  const isHighlighted = useCallback(\n    (item: ButtonDropdownProps.ItemOrGroup) => {\n      const index = getItemIndex(item);\n\n      return indexIncludes(index, targetIndex);\n    },\n    [targetIndex, getItemIndex]\n  );\n\n  const isExpanded = useCallback(\n    (group: ButtonDropdownProps.ItemGroup) => {\n      const index = getItemIndex(group);\n\n      return indexIncludes(index, expandedIndex);\n    },\n    [expandedIndex, getItemIndex]\n  );\n\n  const moveHighlight = useCallback(\n    (direction: -1 | 1) => {\n      const getNext = (index: TreeIndex) => {\n        const nextIndex = getSequentialIndex(index, direction);\n        const item = getItem(nextIndex || [-1]);\n\n        if (!nextIndex || !item) {\n          return null;\n        }\n\n        const parentIndex = getParentIndex(item);\n        const parentItem = parentIndex && getItem(parentIndex);\n\n        return { index: nextIndex, item, parent: parentItem || undefined };\n      };\n\n      const nextIndex = moveHighlightOneStep({\n        startIndex: targetIndex,\n        expandedIndex,\n        getNext,\n        hasExpandableGroups,\n        isInRestrictedView,\n      });\n\n      if (nextIndex) {\n        setTargetIndex(nextIndex);\n      }\n    },\n    [targetIndex, expandedIndex, getItem, getSequentialIndex, getParentIndex, hasExpandableGroups, isInRestrictedView]\n  );\n\n  const highlightItem = useCallback(\n    (item: ButtonDropdownProps.ItemOrGroup) => {\n      setTargetIndex(getItemIndex(item));\n    },\n    [getItemIndex]\n  );\n\n  const expandGroup = useCallback(\n    (group?: ButtonDropdownProps.ItemGroup) => {\n      const groupIndex = group ? getItemIndex(group) : targetIndex;\n      const firstChildIndex = [...groupIndex, 0];\n\n      // move to the first child item unless in restricted mode\n      setTargetIndex(isInRestrictedView ? groupIndex : firstChildIndex);\n      setExpandedIndex(groupIndex);\n    },\n    [targetIndex, getItemIndex, isInRestrictedView]\n  );\n\n  const collapseGroup = useCallback(() => {\n    if (expandedIndex.length > 0) {\n      setTargetIndex(expandedIndex);\n      setExpandedIndex(expandedIndex.slice(0, -1));\n    }\n  }, [expandedIndex]);\n\n  const reset = useCallback(() => {\n    setTargetIndex([]);\n    setExpandedIndex([]);\n  }, []);\n\n  return {\n    targetItem,\n    isHighlighted,\n    isExpanded,\n    moveHighlight,\n    highlightItem,\n    expandGroup,\n    collapseGroup,\n    reset,\n  };\n}\n"]}

package/button-dropdown/utils/utils.d.ts

@@ -0,0 +1,7 @@
+import { ButtonDropdownProps, LinkItem } from '../interfaces';
+export declare const isItemGroup: (item: ButtonDropdownProps.ItemOrGroup) => item is ButtonDropdownProps.ItemGroup;
+export declare const isLinkItem: (item: LinkItem | ButtonDropdownProps.ItemOrGroup) => item is LinkItem;
+export declare const getItemTarget: (item: ButtonDropdownProps.Item) => "_blank" | undefined;
+export declare function indexIncludes(source: number[], target: number[]): boolean;
+export declare function indexEquals(left: number[], right: number[]): boolean;
+//# sourceMappingURL=utils.d.ts.map

package/button-dropdown/utils/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/utils/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9D,eAAO,MAAM,WAAW,SAAU,oBAAoB,WAAW,0CACI,CAAC;AAEtE,eAAO,MAAM,UAAU,SAAU,QAAQ,GAAG,oBAAoB,WAAW,qBAC5B,CAAC;AAEhD,eAAO,MAAM,aAAa,SAAU,oBAAoB,IAAI,yBAA2C,CAAC;AAExG,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,WAQ/D;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,WAY1D"}

package/button-dropdown/utils/utils.js

@@ -0,0 +1,27 @@
+export var isItemGroup = function (item) {
+    return item && item.items !== undefined;
+};
+export var isLinkItem = function (item) {
+    return item && item.href !== undefined;
+};
+export var getItemTarget = function (item) { return (item.external ? '_blank' : undefined); };
+export function indexIncludes(source, target) {
+    for (var index = 0; index < source.length; index++) {
+        if (source[index] !== target[index]) {
+            return false;
+        }
+    }
+    return true;
+}
+export function indexEquals(left, right) {
+    if (left.length !== right.length) {
+        return false;
+    }
+    for (var index = 0; index < left.length; index++) {
+        if (left[index] !== right[index]) {
+            return false;
+        }
+    }
+    return true;
+}
+//# sourceMappingURL=utils.js.map

package/button-dropdown/utils/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/button-dropdown/utils/utils.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,IAAqC;IAC/D,OAAA,IAAI,IAAK,IAAsC,CAAC,KAAK,KAAK,SAAS;AAAnE,CAAmE,CAAC;AAEtE,MAAM,CAAC,IAAM,UAAU,GAAG,UAAC,IAAgD;IACzE,OAAA,IAAI,IAAK,IAAiB,CAAC,IAAI,KAAK,SAAS;AAA7C,CAA6C,CAAC;AAEhD,MAAM,CAAC,IAAM,aAAa,GAAG,UAAC,IAA8B,IAAK,OAAA,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,EAAtC,CAAsC,CAAC;AAExG,MAAM,UAAU,aAAa,CAAC,MAAgB,EAAE,MAAgB;IAC9D,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;QAClD,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,MAAM,CAAC,KAAK,CAAC,EAAE;YACnC,OAAO,KAAK,CAAC;SACd;KACF;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,IAAc,EAAE,KAAe;IACzD,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,CAAC,MAAM,EAAE;QAChC,OAAO,KAAK,CAAC;KACd;IAED,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;QAChD,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC,KAAK,CAAC,EAAE;YAChC,OAAO,KAAK,CAAC;SACd;KACF;IAED,OAAO,IAAI,CAAC;AACd,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ButtonDropdownProps, LinkItem } from '../interfaces';\n\nexport const isItemGroup = (item: ButtonDropdownProps.ItemOrGroup): item is ButtonDropdownProps.ItemGroup =>\n  item && (item as ButtonDropdownProps.ItemGroup).items !== undefined;\n\nexport const isLinkItem = (item: LinkItem | ButtonDropdownProps.ItemOrGroup): item is LinkItem =>\n  item && (item as LinkItem).href !== undefined;\n\nexport const getItemTarget = (item: ButtonDropdownProps.Item) => (item.external ? '_blank' : undefined);\n\nexport function indexIncludes(source: number[], target: number[]) {\n  for (let index = 0; index < source.length; index++) {\n    if (source[index] !== target[index]) {\n      return false;\n    }\n  }\n\n  return true;\n}\n\nexport function indexEquals(left: number[], right: number[]) {\n  if (left.length !== right.length) {\n    return false;\n  }\n\n  for (let index = 0; index < left.length; index++) {\n    if (left[index] !== right[index]) {\n      return false;\n    }\n  }\n\n  return true;\n}\n"]}

package/cards/cards-layout-helper.d.ts

@@ -0,0 +1,3 @@
+import { CardsProps } from './interfaces';
+export declare const getCardsPerRow: (width: number, config: ReadonlyArray<CardsProps.CardsLayout>) => number;
+//# sourceMappingURL=cards-layout-helper.d.ts.map

package/cards/cards-layout-helper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cards-layout-helper.d.ts","sourceRoot":"","sources":["../../../src/cards/cards-layout-helper.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAU1C,eAAO,MAAM,cAAc,UAAW,MAAM,UAAU,cAAc,WAAW,WAAW,CAAC,WAqB1F,CAAC"}

package/cards/cards-layout-helper.js

@@ -0,0 +1,28 @@
+var WIDTHS = [1920, 1400, 1200, 992, 768];
+// Transform the array of widths into a valid cardsPerRow property that is used as default
+var defaultCardsPerRow = WIDTHS.map(function (value, index, widths) { return ({
+    minWidth: value,
+    cards: widths.length + 1 - index
+}); });
+export var getCardsPerRow = function (width, config) {
+    if (config.length === 0) {
+        config = defaultCardsPerRow;
+    }
+    var cardsPerRow = 1;
+    // sort them by descending order of minWidth
+    var sortedConfig = config
+        .slice()
+        .map(function (value) { return ({
+        minWidth: value.minWidth || 0,
+        cards: value.cards
+    }); })
+        .sort(function (a, b) { return b.minWidth - a.minWidth; });
+    sortedConfig.some(function (layout) {
+        if (width >= layout.minWidth) {
+            cardsPerRow = layout.cards;
+            return true;
+        }
+    });
+    return cardsPerRow;
+};
+//# sourceMappingURL=cards-layout-helper.js.map

package/cards/cards-layout-helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cards-layout-helper.js","sourceRoot":"","sources":["../../../src/cards/cards-layout-helper.ts"],"names":[],"mappings":"AAIA,IAAM,MAAM,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;AAE5C,0FAA0F;AAC1F,IAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,KAAK,EAAE,MAAM,IAAK,OAAA,CAAC;IAC/D,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,MAAM,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK;CACjC,CAAC,EAH8D,CAG9D,CAAC,CAAC;AAEJ,MAAM,CAAC,IAAM,cAAc,GAAG,UAAC,KAAa,EAAE,MAA6C;IACzF,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;QACvB,MAAM,GAAG,kBAAkB,CAAC;KAC7B;IACD,IAAI,WAAW,GAAG,CAAC,CAAC;IACpB,4CAA4C;IAC5C,IAAM,YAAY,GAAuC,MAAM;SAC5D,KAAK,EAAE;SACP,GAAG,CAAC,UAAA,KAAK,IAAI,OAAA,CAAC;QACb,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,CAAC;QAC7B,KAAK,EAAE,KAAK,CAAC,KAAK;KACnB,CAAC,EAHY,CAGZ,CAAC;SACF,IAAI,CAAC,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ,EAAvB,CAAuB,CAAC,CAAC;IAE3C,YAAY,CAAC,IAAI,CAAC,UAAA,MAAM;QACtB,IAAI,KAAK,IAAI,MAAM,CAAC,QAAQ,EAAE;YAC5B,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC;YAC3B,OAAO,IAAI,CAAC;SACb;IACH,CAAC,CAAC,CAAC;IACH,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { CardsProps } from './interfaces';\n\nconst WIDTHS = [1920, 1400, 1200, 992, 768];\n\n// Transform the array of widths into a valid cardsPerRow property that is used as default\nconst defaultCardsPerRow = WIDTHS.map((value, index, widths) => ({\n  minWidth: value,\n  cards: widths.length + 1 - index,\n}));\n\nexport const getCardsPerRow = (width: number, config: ReadonlyArray<CardsProps.CardsLayout>) => {\n  if (config.length === 0) {\n    config = defaultCardsPerRow;\n  }\n  let cardsPerRow = 1;\n  // sort them by descending order of minWidth\n  const sortedConfig: Required<CardsProps.CardsLayout>[] = config\n    .slice()\n    .map(value => ({\n      minWidth: value.minWidth || 0,\n      cards: value.cards,\n    }))\n    .sort((a, b) => b.minWidth - a.minWidth);\n\n  sortedConfig.some(layout => {\n    if (width >= layout.minWidth) {\n      cardsPerRow = layout.cards;\n      return true;\n    }\n  });\n  return cardsPerRow;\n};\n"]}

package/cards/index.d.ts

@@ -0,0 +1,5 @@
+import { CardsForwardRefType, CardsProps } from './interfaces';
+export { CardsProps };
+declare const Cards: CardsForwardRefType;
+export default Cards;
+//# sourceMappingURL=index.d.ts.map

package/cards/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/cards/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAkB/D,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,QAAA,MAAM,KAAK,qBAwHc,CAAC;AAE1B,eAAe,KAAK,CAAC"}

package/cards/index.js

@@ -0,0 +1,101 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import clsx from 'clsx';
+import React, { useImperativeHandle, useRef } from 'react';
+import styles from './styles.css.js';
+import { getCardsPerRow } from './cards-layout-helper';
+import { getBaseProps } from '../internal/base-component';
+import { useContainerQuery } from '../internal/hooks/container-queries/use-container-query';
+import ToolsHeader from '../table/tools-header';
+import { getItemKey } from '../table/utils';
+import { focusMarkers, useFocusMove, useSelection } from '../table/use-selection';
+import SelectionControl from '../table/selection-control';
+import InternalContainer from '../container/internal';
+import InternalStatusIndicator from '../status-indicator/internal';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import stickyScrolling from '../table/sticky-scrolling';
+import { useSupportsStickyHeader } from '../container/use-sticky-header';
+import useBaseComponent from '../internal/hooks/use-base-component';
+import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
+import { useMergeRefs } from '../internal/hooks/use-merge-refs';
+var Cards = React.forwardRef(function (_a, ref) {
+    var _b = _a.items, items = _b === void 0 ? [] : _b, cardDefinition = _a.cardDefinition, _c = _a.cardsPerRow, cardsPerRow = _c === void 0 ? [] : _c, header = _a.header, filter = _a.filter, pagination = _a.pagination, preferences = _a.preferences, empty = _a.empty, loading = _a.loading, loadingText = _a.loadingText, trackBy = _a.trackBy, selectedItems = _a.selectedItems, selectionType = _a.selectionType, isItemDisabled = _a.isItemDisabled, onSelectionChange = _a.onSelectionChange, ariaLabels = _a.ariaLabels, visibleSections = _a.visibleSections, stickyHeader = _a.stickyHeader, stickyHeaderVerticalOffset = _a.stickyHeaderVerticalOffset, _d = _a.variant, variant = _d === void 0 ? 'container' : _d, rest = __rest(_a, ["items", "cardDefinition", "cardsPerRow", "header", "filter", "pagination", "preferences", "empty", "loading", "loadingText", "trackBy", "selectedItems", "selectionType", "isItemDisabled", "onSelectionChange", "ariaLabels", "visibleSections", "stickyHeader", "stickyHeaderVerticalOffset", "variant"]);
+    var __internalRootRef = useBaseComponent('Cards').__internalRootRef;
+    var baseProps = getBaseProps(rest);
+    var isRefresh = useVisualRefresh(__internalRootRef);
+    var computedVariant = isRefresh ? variant : 'container';
+    var _e = useContainerQuery(function (_a) {
+        var width = _a.width;
+        return getCardsPerRow(width, cardsPerRow);
+    }, [cardsPerRow]), columns = _e[0], measureRef = _e[1];
+    var refObject = useRef(null);
+    var mergedRef = useMergeRefs(measureRef, refObject, __internalRootRef);
+    var _f = useSelection({
+        items: items,
+        trackBy: trackBy,
+        selectedItems: selectedItems,
+        selectionType: selectionType,
+        isItemDisabled: isItemDisabled,
+        onSelectionChange: onSelectionChange,
+        ariaLabels: ariaLabels
+    }), isItemSelected = _f.isItemSelected, getItemSelectionProps = _f.getItemSelectionProps, updateShiftToggle = _f.updateShiftToggle;
+    var hasToolsHeader = header || filter || pagination || preferences;
+    var headerRef = useRef(null);
+    var _g = stickyScrolling(refObject, headerRef), scrollToTop = _g.scrollToTop, scrollToItem = _g.scrollToItem;
+    stickyHeader = useSupportsStickyHeader() && stickyHeader;
+    var onCardFocus = function (event) {
+        if (stickyHeader) {
+            scrollToItem(event.currentTarget);
+        }
+    };
+    useImperativeHandle(ref, function () { return ({
+        scrollToTop: function () {
+            if (stickyHeader) {
+                scrollToTop();
+            }
+        }
+    }); }, [stickyHeader, scrollToTop]);
+    var status;
+    if (loading) {
+        status = (React.createElement("div", { className: styles.loading },
+            React.createElement(InternalStatusIndicator, { type: "loading" }, loadingText)));
+    }
+    else if (empty && !items.length) {
+        status = React.createElement("div", { className: styles.empty }, empty);
+    }
+    return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.root), ref: mergedRef }),
+        React.createElement(InternalContainer, { header: hasToolsHeader && (React.createElement("div", { className: clsx(styles.header, isRefresh && styles['header-refresh'], styles["header-variant-".concat(computedVariant)]) },
+                React.createElement(ToolsHeader, { header: header, filter: filter, pagination: pagination, preferences: preferences }))), disableContentPaddings: true, disableHeaderPaddings: computedVariant === 'full-page', variant: computedVariant === 'container' ? 'cards' : computedVariant, __stickyHeader: stickyHeader, __stickyOffset: stickyHeaderVerticalOffset, __headerRef: headerRef },
+            React.createElement("div", { className: clsx(hasToolsHeader && styles['has-header']) }, status !== null && status !== void 0 ? status : (React.createElement(CardsList, { items: items, cardDefinition: cardDefinition, trackBy: trackBy, selectionType: selectionType, columns: columns, isItemSelected: isItemSelected, getItemSelectionProps: getItemSelectionProps, visibleSections: visibleSections, updateShiftToggle: updateShiftToggle, onFocus: onCardFocus }))))));
+});
+export default Cards;
+var CardsList = function (_a) {
+    var items = _a.items, cardDefinition = _a.cardDefinition, trackBy = _a.trackBy, selectionType = _a.selectionType, columns = _a.columns, isItemSelected = _a.isItemSelected, getItemSelectionProps = _a.getItemSelectionProps, visibleSections = _a.visibleSections, updateShiftToggle = _a.updateShiftToggle, onFocus = _a.onFocus;
+    var selectable = !!selectionType;
+    var _b = useFocusMove(selectionType, items.length), moveFocusDown = _b.moveFocusDown, moveFocusUp = _b.moveFocusUp;
+    var visibleSectionsDefinition = cardDefinition.sections || [];
+    visibleSectionsDefinition = visibleSections
+        ? visibleSectionsDefinition.filter(function (section) { return section.id && visibleSections.indexOf(section.id) !== -1; })
+        : visibleSectionsDefinition;
+    return (React.createElement("ol", __assign({ className: clsx(styles.list, styles["list-grid-".concat(columns || 1)]) }, (focusMarkers && focusMarkers.root)), items.map(function (item, index) {
+        var _a;
+        return (React.createElement("li", __assign({ className: clsx(styles.card, (_a = {},
+                _a[styles['card-selectable']] = selectable,
+                _a[styles['card-selected']] = selectable && isItemSelected(item),
+                _a)), key: getItemKey(trackBy, item, index), onFocus: onFocus }, (focusMarkers && focusMarkers.item)),
+            React.createElement("div", { className: styles['card-inner'] },
+                React.createElement("div", { className: styles['card-header'] },
+                    React.createElement("span", { className: styles['card-header-inner'] }, cardDefinition.header ? cardDefinition.header(item) : ''),
+                    selectable && (React.createElement("div", { className: styles['selection-control'] },
+                        React.createElement(SelectionControl, __assign({ onFocusDown: moveFocusDown, onFocusUp: moveFocusUp, onShiftToggle: updateShiftToggle }, getItemSelectionProps(item)))))),
+                visibleSectionsDefinition.map(function (_a, index) {
+                    var _b = _a.width, width = _b === void 0 ? 100 : _b, header = _a.header, content = _a.content, id = _a.id;
+                    return (React.createElement("div", { key: id || index, className: styles.section, style: { width: "".concat(width, "%") } },
+                        header ? React.createElement("div", { className: styles['section-header'] }, header) : '',
+                        content ? React.createElement("div", { className: styles['section-content'] }, content(item)) : ''));
+                }))));
+    })));
+};
+applyDisplayName(Cards, 'Cards');
+//# sourceMappingURL=index.js.map

package/cards/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/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 { useContainerQuery } from '../internal/hooks/container-queries/use-container-query';\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 { useSupportsStickyHeader } from '../container/use-sticky-header';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\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    ...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(__internalRootRef);\n  const computedVariant = isRefresh ? variant : 'container';\n\n  const [columns, measureRef] = useContainerQuery<number>(\n    ({ width }) => getCardsPerRow(width, cardsPerRow),\n    [cardsPerRow]\n  );\n  const refObject = useRef(null);\n  const mergedRef = useMergeRefs(measureRef, refObject, __internalRootRef);\n\n  const { isItemSelected, getItemSelectionProps, updateShiftToggle } = useSelection({\n    items,\n    trackBy,\n    selectedItems,\n    selectionType,\n    isItemDisabled,\n    onSelectionChange,\n    ariaLabels,\n  });\n  const hasToolsHeader = header || filter || pagination || preferences;\n  const headerRef = useRef<HTMLDivElement>(null);\n  const { scrollToTop, scrollToItem } = stickyScrolling(refObject, headerRef);\n  stickyHeader = useSupportsStickyHeader() && stickyHeader;\n  const onCardFocus: FocusEventHandler<HTMLElement> = event => {\n    if (stickyHeader) {\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\">{loadingText}</InternalStatusIndicator>\n      </div>\n    );\n  } else if (empty && !items.length) {\n    status = <div className={styles.empty}>{empty}</div>;\n  }\n\n  return (\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        disableContentPaddings={true}\n        disableHeaderPaddings={computedVariant === 'full-page'}\n        variant={computedVariant === 'container' ? 'cards' : computedVariant}\n        __stickyHeader={stickyHeader}\n        __stickyOffset={stickyHeaderVerticalOffset}\n        __headerRef={headerRef}\n      >\n        <div className={clsx(hasToolsHeader && styles['has-header'])}>\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            />\n          )}\n        </div>\n      </InternalContainer>\n    </div>\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}: 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}) => {\n  const selectable = !!selectionType;\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  return (\n    <ol className={clsx(styles.list, styles[`list-grid-${columns || 1}`])} {...(focusMarkers && focusMarkers.root)}>\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        >\n          <div className={styles['card-inner']}>\n            <div className={styles['card-header']}>\n              <span className={styles['card-header-inner']}>\n                {cardDefinition.header ? cardDefinition.header(item) : ''}\n              </span>\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

@@ -0,0 +1,206 @@
+import React from 'react';
+import { BaseComponentProps } from '../internal/base-component';
+import { NonCancelableEventHandler } from '../internal/events';
+export interface CardsForwardRefType {
+    <T>(props: CardsProps<T> & {
+        ref?: React.Ref<CardsProps.Ref>;
+    }): JSX.Element;
+}
+export interface CardsProps<T = any> extends BaseComponentProps {
+    /**
+     * Displayed only when the list of items is empty.
+     */
+    empty?: React.ReactNode;
+    /**
+     * Heading element of the table container. Use the [header component](/components/header/).
+     */
+    header?: React.ReactNode;
+    /**
+     * Use this slot to add filtering controls to the component.
+     */
+    filter?: React.ReactNode;
+    /**
+     * Use this slot to add the [pagination component](/components/pagination/) to the component.
+     */
+    pagination?: React.ReactNode;
+    /**
+     * Use this slot to add [collection preferences](/components/collection-preferences/) to the component.
+     */
+    preferences?: React.ReactNode;
+    /**
+     * Specifies the items that serve as data source for a card.
+     *
+     * The `cardDefinition` property handles the display of this data.
+     */
+    items: ReadonlyArray<T>;
+    /**
+     * Renders the cards in a loading state. We recommend that you also set a `loadingText`.
+     */
+    loading?: boolean;
+    /**
+     * Specifies the text to display when in loading state.
+     */
+    loadingText?: string;
+    /**
+     *  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.
+     *  * `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)
+     *   source for React rendering, and to match entries in the `visibleSections` property (if it's defined).
+     *    * `header`: (ReactNode) - Responsible for displaying the section header.
+     *    * `content`: ((item) => ReactNode) - Responsible for displaying the section content. You receive the current item as an argument.
+     *    * `width`: (number) - Specifies the width of the card section in percent. Use this to display multiple sections in
+     *    the same row. The default value is 100%.
+     *
+     *  All of the above properties are optional.
+     */
+    cardDefinition: CardsProps.CardDefinition<T>;
+    /**
+     * Determines the number of cards per row for any interval of container width.
+     * It's an array whose entries are objects containing the following:
+     * - `cards` (number) - Specifies the number of cards per row.
+     * - `minWidth` (number) - Specifies the minimum container width (in pixels) for which this configuration object should apply.
+     *
+     * For example, with this configuration:
+     * ```
+     * [{
+     *   cards: 1
+     * }, {
+     *   minWidth: 500,
+     *   cards: 2
+     * }, {
+     *   minWidth: 800,
+     *   cards: 3
+     * }]
+     * ```
+     *
+     * the cards component displays:
+     * * 1 card per row when the container width is below 500px.
+     * * 2 cards per row when the container width is between 500px and 799px.
+     * * 3 cards per row when the container width is 800px or wider.
+     *
+     * The number of cards per row can't be greater than 20.
+     *
+     * Default value:
+     * ```
+     * [{
+     *   cards: 1
+     * }, {
+     *   minWidth: 768,
+     *   cards: 2
+     * }, {
+     *   minWidth: 992,
+     *   cards: 3
+     * }, {
+     *   minWidth: 1200,
+     *   cards: 4
+     * }, {
+     *   minWidth: 1400,
+     *   cards: 5
+     * }, {
+     *   minWidth: 1920,
+     *   cards: 6
+     * }]
+     * ```
+     */
+    cardsPerRow?: ReadonlyArray<CardsProps.CardsLayout>;
+    /**
+     * Specifies the property inside items that uniquely identifies them.
+     * When it's set, it's used to provide [keys for React](https://reactjs.org/docs/lists-and-keys.html#keys)
+     * for performance optimizations.
+     *
+     * It's also used for connecting `items` and `selectedItems` values when they don't reference the same object.
+     */
+    trackBy?: CardsProps.TrackBy<T>;
+    /**
+     * Specifies the selection mode. It can be either `single` or `multi`.
+     */
+    selectionType?: CardsProps.SelectionType;
+    /**
+     * Specifies the list of selected items.
+     */
+    selectedItems?: ReadonlyArray<T>;
+    /**
+     * Determines which items are disabled. If an item is disabled, users can't select it.
+     */
+    isItemDisabled?: CardsProps.IsItemDisabled<T>;
+    /**
+     * Adds labels to the selection components (checkboxes and radio buttons) as follows:
+     * * `itemSelectionLabel` ((SelectionState, Item) => string) - Determines the label for an item.
+     * * `selectionGroupLabel` (string) - Specifies the label for the group selection control.
+     *
+     * You can use the first arguments of type `SelectionState` to access the current selection
+     * state of the component (for example, the `selectedItems` list). The label function for individual
+     * items also receives the corresponding  `Item` object. You can use the group label to
+     * add a meaningful description to the whole selection.
+     */
+    ariaLabels?: CardsProps.AriaLabels<T>;
+    /**
+     * Specifies an array containing the `id` of each visible section. If not set, all sections are displayed.
+     *
+     * Use it in conjunction with the visible content preference of the [collection preferences](/components/collection-preferences/) component.
+     *
+     * The order of `id`s doesn't influence the order of display of sections, which is controlled by the `cardDefinition` property.
+     */
+    visibleSections?: ReadonlyArray<string>;
+    /**
+     * Called when a user interaction causes a change in the list of selected items.
+     * The event `detail` contains the current list of `selectedItems`.
+     */
+    onSelectionChange?: NonCancelableEventHandler<CardsProps.SelectionChangeDetail<T>>;
+    /**
+     * If set to true, the cards header remains visible when the user scrolls down.
+     */
+    stickyHeader?: boolean;
+    /**
+     * Optionally provide a vertical offset (in pixels) for the sticky header, for example if you
+     * need to position the sticky header below other fixed position elements on the page.
+     */
+    stickyHeaderVerticalOffset?: number;
+    /**
+     * Specify a cards variant with one of the following:
+     * * `container` - Use this variant to have the cards displayed as a container.
+     * * `full-page` – Use this variant when cards is the primary element on the page.
+     * @visualrefresh `full-page` variant
+     */
+    variant?: 'container' | 'full-page';
+}
+export declare namespace CardsProps {
+    interface CardDefinition<T> {
+        header?(item: T): React.ReactNode;
+        sections?: ReadonlyArray<SectionDefinition<T>>;
+    }
+    interface SectionDefinition<T> {
+        id?: string;
+        header?: React.ReactNode;
+        content?(item: T): React.ReactNode;
+        width?: number;
+    }
+    interface CardsLayout {
+        cards: number;
+        minWidth?: number;
+    }
+    type TrackBy<T> = string | ((item: T) => string);
+    type SelectionType = 'single' | 'multi';
+    interface SelectionState<T> {
+        selectedItems: ReadonlyArray<T>;
+    }
+    interface SelectionChangeDetail<T> {
+        selectedItems: T[];
+    }
+    type IsItemDisabled<T> = (item: T) => boolean;
+    interface AriaLabels<T> {
+        itemSelectionLabel: (data: CardsProps.SelectionState<T>, row: T) => string;
+        selectionGroupLabel: string;
+    }
+    interface Ref {
+        /**
+         * When the sticky header is enabled, calling this function scrolls cards's
+         * scroll parent up to reveal the first card or row of cards.
+         */
+        scrollToTop(): void;
+    }
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/cards/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/cards/interfaces.tsx"],"names":[],"mappings":"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"}

package/cards/interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interfaces.js.map

package/cards/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/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   *\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   */\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   * 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 is the primary element on the page.\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  }\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/cards/styles.css.js

@@ -0,0 +1,42 @@
+
+    import './styles.scoped.css';
+    export default {
+  "card-inner": "awsui_card-inner_p8a6i_1h2xf_97",
+  "root": "awsui_root_p8a6i_1h2xf_117",
+  "header-variant-full-page": "awsui_header-variant-full-page_p8a6i_1h2xf_133",
+  "header-refresh": "awsui_header-refresh_p8a6i_1h2xf_133",
+  "list": "awsui_list_p8a6i_1h2xf_149",
+  "list-grid-1": "awsui_list-grid-1_p8a6i_1h2xf_157",
+  "card": "awsui_card_p8a6i_1h2xf_97",
+  "list-grid-2": "awsui_list-grid-2_p8a6i_1h2xf_160",
+  "list-grid-3": "awsui_list-grid-3_p8a6i_1h2xf_163",
+  "list-grid-4": "awsui_list-grid-4_p8a6i_1h2xf_166",
+  "list-grid-5": "awsui_list-grid-5_p8a6i_1h2xf_169",
+  "list-grid-6": "awsui_list-grid-6_p8a6i_1h2xf_172",
+  "list-grid-7": "awsui_list-grid-7_p8a6i_1h2xf_175",
+  "list-grid-8": "awsui_list-grid-8_p8a6i_1h2xf_178",
+  "list-grid-9": "awsui_list-grid-9_p8a6i_1h2xf_181",
+  "list-grid-10": "awsui_list-grid-10_p8a6i_1h2xf_184",
+  "list-grid-11": "awsui_list-grid-11_p8a6i_1h2xf_187",
+  "list-grid-12": "awsui_list-grid-12_p8a6i_1h2xf_190",
+  "list-grid-13": "awsui_list-grid-13_p8a6i_1h2xf_193",
+  "list-grid-14": "awsui_list-grid-14_p8a6i_1h2xf_196",
+  "list-grid-15": "awsui_list-grid-15_p8a6i_1h2xf_199",
+  "list-grid-16": "awsui_list-grid-16_p8a6i_1h2xf_202",
+  "list-grid-17": "awsui_list-grid-17_p8a6i_1h2xf_205",
+  "list-grid-18": "awsui_list-grid-18_p8a6i_1h2xf_208",
+  "list-grid-19": "awsui_list-grid-19_p8a6i_1h2xf_211",
+  "list-grid-20": "awsui_list-grid-20_p8a6i_1h2xf_214",
+  "selection-control": "awsui_selection-control_p8a6i_1h2xf_218",
+  "loading": "awsui_loading_p8a6i_1h2xf_227",
+  "empty": "awsui_empty_p8a6i_1h2xf_228",
+  "has-header": "awsui_has-header_p8a6i_1h2xf_235",
+  "card-header": "awsui_card-header_p8a6i_1h2xf_272",
+  "card-header-inner": "awsui_card-header-inner_p8a6i_1h2xf_278",
+  "card-selectable": "awsui_card-selectable_p8a6i_1h2xf_282",
+  "card-selected": "awsui_card-selected_p8a6i_1h2xf_285",
+  "section": "awsui_section_p8a6i_1h2xf_294",
+  "section-header": "awsui_section-header_p8a6i_1h2xf_300",
+  "section-content": "awsui_section-content_p8a6i_1h2xf_306"
+};
+