@ntbjs/react-components 2.0.14 → 3.0.0-rc.1

package/types/components/widgets/AssetGallery/AssetGallery.d.ts

@@ -0,0 +1,170 @@
+import React from 'react';
+import type { Asset } from './asset.types';
+type AssetGalleryOwnProps = {
+    /**
+     * An array of assets to display in the gallery.
+     */
+    assets?: Asset[];
+    /**
+     * Whether the asset gallery should display the Version Count or Verifications on default.
+     */
+    displayIcon?: string;
+    /**
+     * Whether the asset gallery should render the Asset Summary Card on hover.
+     */
+    activeSummaryCard?: boolean;
+    /**
+     * The view mode of the gallery.
+     */
+    viewMode?: 'compact' | 'grid';
+    /**
+     * The maximum height of thumbnails in the gallery. When the grid is computed the gallery will try
+     * to have each row of the gallery as close to the max height as possible.
+     * This option is ignored unless `viewMode: 'compact'`.
+     */
+    thumbnailMaxHeight?: number;
+    /**
+     * Whether or not the asset gallery should have selectable asset cards
+     */
+    selectable?: boolean;
+    /**
+     * Whether or not the asset gallery should have custom borders on selected asset:  Example: customSelectedBorder: ['#893FEB', '#EB513F'], where: customSelectedBorder.[0] is for darkMode and customSelectedBorder.[1] is for lightMode
+     */
+    customSelectedBorder?: string[];
+    /**
+     * An array containing the keys of all selected assets
+     */
+    selectedAssetKeys?: string[] | number[];
+    /**
+     * A callback function to run when the selected assets change
+     */
+    onSelectedChanged?: (...args: any[]) => any;
+    /**
+     * Whether the asset gallery should have soft selectable asset cards
+     */
+    softSelectable?: boolean;
+    /**
+     * Scrollable element to attach event listeners to. Defaults to window.
+     */
+    scrollElement?: any;
+    /**
+     * A callback function to run when the soft selected asset change
+     */
+    onSoftSelectedChanged?: (...args: any[]) => any;
+    /**
+     * A function that returns a custom component to use for the card in the gallery - The function provides
+     * `asset` as its first argument
+     */
+    component?: (...args: any[]) => any;
+    /**
+     * When true, hides the consent summary footer on grid cards (CardFooter + CardDivider). Default: false.
+     */
+    hideConsentSummary?: boolean;
+};
+/**
+ * An asset gallery that can be used to display a larger amounts of assets. The Asset Gallery supports displaying
+ * images and videos.
+ *
+ * ### Import
+ *
+ * ``` js
+ * import { AssetGallery } from '@ntbjs/react-components/widgets'
+ * // or
+ * import AssetGallery from '@ntbjs/react-components/widgets/AssetGallery'
+ * ```
+ *
+ * ### Custom asset card element
+ * In some cases you may want to swap out the boring `<div>`-tag that wraps each individual asset in the gallery for
+ * something more useful.
+ * By doing this you can achieve side-effects that this library has no concept about – like wrapping the assets
+ * in [React-routers](https://reactrouter.com/web/api/Link) `<Link>`-component for internal application routing when
+ * you click the asset.
+ *
+ * The asset gallery allows you to change the root element that will be rendered around all individual asset via a
+ * property on the asset object called `component`.
+ *
+ * ```jsx
+ * const assets = [{
+ *   previewUrl: 'https://preview.sdl.no/v1/no/7Zb20FDFCu-dne-lxi1thQ/uRs25Mh-FJY?v=1613865342365',
+ *   width: 512,
+ *   height: 324
+ * }]
+ *
+ * const customComponent = (asset, children) => (
+ *   <a href={`https://www.ntb.no/?fromAssetId=${asset.key}`} target="_blank">
+ *     {children}
+ *   </a>
+ * )
+ *
+ * <AssetGallery assets={assets} component={customComponent} />
+ * ```
+ *
+ * When providing a custom element it will take the place of the `<div>` being the outer most parent of the
+ * asset itself. All required props will then be automatically applied, like the `style`-attribute containing the
+ * positioning style of the asset. To tell the asset gallery where you want the rest of the asset card we provide the `{children}`.
+ *
+ * **Note:** If the root-element of the custom component is a React component the component must accept rest props (`{...props}`).
+ *
+ * This pattern is very powerful and allows for great flexibility, as well as a way to interoperate with other
+ * libraries, such as your favorite routing or forms library. **But it also comes with a small caveat!**
+ *
+ * #### Caveat with inlining
+ * Using an inline function as an argument for the component prop may result in unexpected unmounting, since a new
+ * component is passed every time React renders.
+ *
+ * If we are using an inline function to change the rendered component, React will remount each individual assets every
+ * time `AssetGallery` is re-rendered. Not only will React update the DOM unnecessarily, the ripple effect of the individual
+ * assets will also not work correctly.
+ *
+ * To fix this issue **avoid using inline functions or wrap the function in some sort of memoization**
+ * like `React.useMemo()`.
+ *
+ * #### Prop Collisions
+ * Prop Collisions is something to be aware of. The asset gallery will render your custom element like this:
+ *
+ * ```js
+ * return React.createElement(props.component, props)
+ * ```
+ *
+ * That means that all the required props that the library automatically applies will take precedence over consumer
+ * defined props. An example of this is the `style`-prop.
+ *
+ */
+declare const AssetGallery: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>, "ref">, keyof {
+    assets?: Asset[];
+    activeSummaryCard?: boolean;
+    displayIcon?: string;
+    viewMode?: "compact" | "grid";
+    thumbnailMaxHeight?: number;
+    selectable?: boolean;
+    customSelectedBorder?: string[];
+    selectedAssetKeys: (string | number)[];
+    scrollElement?: any;
+    onAssetSelected: (...args: any[]) => any;
+    onAssetUnselected: (...args: any[]) => any;
+    softSelectable?: boolean;
+    softSelectedAssetKey?: string | number;
+    onAssetSoftSelectedChanged: (...args: any[]) => any;
+    component?: (...args: any[]) => any;
+    className?: string;
+    hideConsentSummary?: boolean;
+}> & {
+    assets?: Asset[];
+    activeSummaryCard?: boolean;
+    displayIcon?: string;
+    viewMode?: "compact" | "grid";
+    thumbnailMaxHeight?: number;
+    selectable?: boolean;
+    customSelectedBorder?: string[];
+    selectedAssetKeys: (string | number)[];
+    scrollElement?: any;
+    onAssetSelected: (...args: any[]) => any;
+    onAssetUnselected: (...args: any[]) => any;
+    softSelectable?: boolean;
+    softSelectedAssetKey?: string | number;
+    onAssetSoftSelectedChanged: (...args: any[]) => any;
+    component?: (...args: any[]) => any;
+    className?: string;
+    hideConsentSummary?: boolean;
+} & React.RefAttributes<any>, "ref">, keyof AssetGalleryOwnProps> & AssetGalleryOwnProps & React.RefAttributes<any>>;
+export default AssetGallery;

package/types/components/widgets/AssetGallery/AssetGalleryBase/AssetGalleryBase.d.ts

@@ -0,0 +1,88 @@
+import React from 'react';
+import type { Asset } from '../asset.types';
+type AssetGalleryBaseOwnProps = {
+    /**
+     * An array of assets to display in the gallery.
+     */
+    assets?: Asset[];
+    /**
+     * Whether the asset gallery should render the Asset Summary Card on hover.
+     */
+    activeSummaryCard?: boolean;
+    /**
+     * Whether the asset gallery should display the Version Count or Verifications on default.
+     */
+    displayIcon?: string;
+    /**
+     * The view mode of the gallery.
+     */
+    viewMode?: 'compact' | 'grid';
+    /**
+     * The maximum height of thumbnails in the gallery. When the grid is computed the gallery will try
+     * to have each row of the gallery as close to the max height as possible.
+     */
+    thumbnailMaxHeight?: number;
+    /**
+     * Whether or not the asset gallery should have selectable asset cards
+     */
+    selectable?: boolean;
+    /**
+     * Whether or not the asset gallery should have custom borders on selected asset
+     */
+    customSelectedBorder?: string[];
+    /**
+     * An array containing the key of all selected assets
+     *
+     * NMB-3998: `(string | number)[]`, not the `string[] | number[]` the propTypes codemod
+     * produced from `oneOfType([arrayOf(string), arrayOf(number)])`. Calling `.includes()` on
+     * a union OF ARRAY TYPES intersects the candidate signatures' parameters, giving
+     * `string & number` = `never`, so all three `selectedAssetKeys.includes(...)` reads in
+     * this file failed with "not assignable to parameter of type 'never'".
+     *
+     * The union was also the wrong contract, not merely an awkward one. `Asset['key']` is
+     * `string | number`, and this array is compared against `asset.key` at lines 585, 659 and
+     * 676 — so a gallery whose assets have mixed key types needs a mixed array, which
+     * `arrayOf(string) | arrayOf(number)` cannot express. This records what the component
+     * does; it is a pure widening, so no existing consumer call site can break.
+     */
+    selectedAssetKeys: (string | number)[];
+    /**
+     * Scrollable element to attach event listeners to. Defaults to window.
+     */
+    scrollElement?: any;
+    /**
+     * The callback function when an asset is selected - returns the selected asset key
+     */
+    onAssetSelected: (...args: any[]) => any;
+    /**
+     * The callback function when an asset is unselected - returns the unselected asset key
+     */
+    onAssetUnselected: (...args: any[]) => any;
+    /**
+     * Whether or not the asset gallery should have soft selectable asset cards
+     */
+    softSelectable?: boolean;
+    /**
+     * A value containing the key of the soft selected asset or null
+     */
+    softSelectedAssetKey?: string | number;
+    /**
+     * The callback function when soft selected asset changes - returns the selected asset key or null
+     */
+    onAssetSoftSelectedChanged: (...args: any[]) => any;
+    /**
+     * A function that returns a custom component to use for the card in the gallery - The function provides
+     * `asset` as its first argument
+     */
+    component?: (...args: any[]) => any;
+    /**
+     * Optional className
+     */
+    className?: string;
+    /**
+     * When true, hides the consent summary footer on grid cards (CardFooter + CardDivider). Default: false.
+     */
+    hideConsentSummary?: boolean;
+};
+declare const AssetGalleryBase: React.ForwardRefExoticComponent<Omit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>, "ref">, keyof AssetGalleryBaseOwnProps> & AssetGalleryBaseOwnProps & React.RefAttributes<any>>;
+export default AssetGalleryBase;

package/types/components/widgets/AssetGallery/AssetGalleryBase/AssetGalleryBase.styled.d.ts

@@ -0,0 +1,3 @@
+export declare const AssetGalleryBase: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const GroupLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const AssetGalleryCardBase: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;

package/types/components/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.d.ts

@@ -0,0 +1,3 @@
+import 'react-lazy-load-image-component/src/effects/opacity.css';
+declare const _default: any;
+export default _default;

package/types/components/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.styled.d.ts

@@ -0,0 +1,100 @@
+import type { AssetNoteType } from '../../asset.types';
+/**
+ * `asset.disabled` — `PropTypes.bool` on the asset shape.
+ *
+ * NO `$`, AND THAT IS A DEFECT — AND THIS IS THE ONE OF THE FOUR THAT IS ALREADY IN
+ * THE BASELINE. `shouldForwardProp` forwards every non-`$` prop; React does recognise
+ * `disabled` and renders it as a bare boolean attribute even on a `<div>`, so
+ * `disabled=""` sits on both the wrapper and the card root in
+ * `scripts/r19-harness/baseline.json` under `widgets/AssetGalleryCompactCard#disabled`.
+ * Grep it: `disabled=` appears 35 times across that file.
+ *
+ * The fix is to rename it `$disabled` at both ends, which REMOVES that attribute and
+ * therefore MOVES the render baseline — C10 work, §E.4.
+ *
+ * Hosts: `AssetGalleryWrapper` and `AssetGalleryCompactCard`.
+ */
+interface AssetGalleryDisabledStyleProps {
+    disabled?: boolean;
+}
+/**
+ * The selection-state props, declared once because six components take overlapping
+ * subsets of them; each one below `Pick`s exactly what its JSX site passes.
+ * `AssetGalleryCompactCard.tsx` is the only caller.
+ */
+interface AssetGallerySelectionStyleProps {
+    /**
+     * `selected` — `PropTypes.bool`.
+     *
+     * NO `$`, AND THAT IS A DEFECT — BUT NOT A DOM LEAK, and the difference is worth
+     * stating because the obvious guess is wrong. `shouldForwardProp` does forward it to
+     * React, but React DROPS a boolean `selected` on anything that is not an `<option>`,
+     * silently and with no warning; measured by rendering `<div selected>` through
+     * react-dom@19.2.4, and confirmed by `selected=` appearing ZERO times in
+     * `scripts/r19-harness/baseline.json`.
+     *
+     * So the defect is that the prop is unfiltered and the render only stays clean because
+     * React cleans up after it. Prefixing it is still the right fix and still a behaviour
+     * change to review on its own (C10) — it just would not move the baseline.
+     */
+    selected?: boolean;
+    /** `softSelected` — `PropTypes.bool.isRequired` on the COMPONENT, but optional here: a
+     *  required declaration produces TS2769 at `<X />` and at `<X {...props} />`. §J.5. */
+    $softSelected?: boolean;
+    /** `customSelectedBorder` — `PropTypes.arrayOf(PropTypes.string)`, read as
+     *  `[darkModeColor, lightModeColor]`. `string[]` and not `[string, string]`, because
+     *  that is what the propTypes say. */
+    $customSelectedBorder?: string[];
+}
+/**
+ * The card root's props. `as={ComputedRootComponent}` is passed alongside these and that
+ * wrapper re-renders this same styled component with the leftover props, so both passes
+ * see the same shape.
+ */
+interface AssetGalleryCompactCardStyleProps extends AssetGalleryDisabledStyleProps, Pick<AssetGallerySelectionStyleProps, 'selected'> {
+    /**
+     * `extendedSelectMode` — `PropTypes.bool`. Makes the whole card a selectable area.
+     *
+     * NO `$`, AND THAT IS A DEFECT — and it reaches the DOM even less than `selected`
+     * does, for two independent reasons. `ComputedRootComponent` explicitly `omit`s this
+     * key before re-rendering the card, so the inner pass never sees it; and React drops
+     * an unrecognised camelCase prop whose value is `true` anyway, warning "React does
+     * not recognize the `extendedSelectMode` prop on a DOM element". Both measured.
+     * `extendedselectmode` appears ZERO times in the recorded baseline, with the base
+     * fixture passing `extendedSelectMode: true`. Declared here, renamed in C10.
+     */
+    extendedSelectMode?: boolean;
+}
+export declare const AssetGalleryWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, AssetGalleryDisabledStyleProps>, never>> & string;
+export declare const Reference: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const AssetGalleryCompactCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, AssetGalleryCompactCardStyleProps>, never>> & string;
+export declare const Figure: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>>, {
+    $hasHeightAndWidth?: boolean;
+}>, never>> & string;
+export declare const FigureOverlayBackdrop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, Pick<AssetGallerySelectionStyleProps, "selected">>, never>> & string;
+export declare const Overlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const OverlayBackdrop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, Pick<AssetGallerySelectionStyleProps, "selected" | "$softSelected">>, never>> & string;
+export declare const OverlayInfo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const OverlayCompleted: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, Pick<AssetGallerySelectionStyleProps, "$softSelected">>, never>> & string;
+export declare const OverlayHasError: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, Pick<AssetGallerySelectionStyleProps, "$softSelected">>, never>> & string;
+export declare const OverlaySelected: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, AssetGallerySelectionStyleProps>, never>> & string;
+export declare const OverlayInfoTop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const OverlayInfoTopActions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const StatusIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const VisibleOnHover: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $hidden?: boolean;
+}>> & string;
+export declare const OverlayInfoTopLeft: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, {
+    $collapseExtraInfo?: boolean;
+}>, never>> & string;
+export declare const OverlayInfoTopWarning: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, {
+    type?: AssetNoteType;
+}>, never>> & string;
+export declare const OverlayInfoBottom: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const OverlayInfoBottomSelectButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, Pick<AssetGallerySelectionStyleProps, "selected">>, never>> & string;
+export declare const OverlayInfoBottomMediaIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const ConsumerDefinedOverlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const Fragment: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ActionTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const StyledFloatingArrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("@floating-ui/react").FloatingArrowProps, "ref"> & import("react").RefAttributes<SVGSVGElement>, Omit<import("@floating-ui/react").FloatingArrowProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>, never>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("@floating-ui/react").FloatingArrowProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>, keyof import("react").Component<any, {}, any>>;
+export {};

package/types/components/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/types/components/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.styled.d.ts

@@ -0,0 +1,85 @@
+export declare const AssetGalleryWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, Pick<AssetGalleryGridCardStyleProps, "disabled">>, never>> & string;
+/**
+ * What `ringState` reads. Also the reason the card root needs a generic at all: three of
+ * these five are only ever read HERE, inside the `.attrs()` callback, not in the template.
+ */
+interface AssetGalleryGridCardRingProps {
+    /**
+     * `selected` — `PropTypes.bool`.
+     *
+     * NO `$`, AND THAT IS A DEFECT — but NOT a DOM leak. `ComputedRootComponent` spreads it
+     * onto a plain `<div>` and React DROPS a boolean `selected` on any element that is not
+     * an `<option>`, silently; `selected=` occurs zero times in
+     * `scripts/r19-harness/baseline.json`. Prefixing it is still a behaviour change to
+     * review on its own (C10, §E.4) — it just would not move the baseline.
+     */
+    selected?: boolean;
+    /**
+     * `asset.completed` — `PropTypes.bool`.
+     *
+     * NO `$`, AND THAT IS A DEFECT — and again not a DOM leak, for a different reason:
+     * `ComputedRootComponent` explicitly `omit`s `completed`, and React would drop it
+     * anyway ("Received `true` for a non-boolean attribute `completed`"). Measured both ways.
+     */
+    completed?: boolean;
+    /** `softSelected` — `PropTypes.bool.isRequired` on the COMPONENT, optional here per §J.5. */
+    $softSelected?: boolean;
+    /** `asset.hasError` — `PropTypes.bool`. */
+    $hasError?: boolean;
+    /** `customSelectedBorder` — `PropTypes.arrayOf(PropTypes.string)`, read as
+     *  `[darkModeColor, lightModeColor]` and written into the `--ring-dark` / `--ring-light`
+     *  custom properties by the `.attrs()` callback. */
+    $customSelectedBorder?: string[];
+}
+/**
+ * The card root's props: everything `ringState` reads, plus the two the TEMPLATE reads.
+ */
+interface AssetGalleryGridCardStyleProps extends AssetGalleryGridCardRingProps {
+    /**
+     * `asset.disabled` — `PropTypes.bool`.
+     *
+     * NO `$`, AND THIS IS THE ONE THAT REALLY REACHES THE DOM. React recognises
+     * `disabled` and renders it as a bare boolean attribute even on a `<div>`, so
+     * `disabled=""` is on both the wrapper and the card root in
+     * `widgets/AssetGalleryGridCard#disabled` in the recorded baseline. Renaming it
+     * `$disabled` REMOVES that attribute and therefore MOVES the baseline — C10, §E.4.
+     */
+    disabled?: boolean;
+    /**
+     * `extendedSelectMode` — `PropTypes.bool`. Makes the whole card a selectable area.
+     *
+     * NO `$`, AND THAT IS A DEFECT — not a DOM leak twice over: `ComputedRootComponent`
+     * `omit`s it, and React drops an unrecognised camelCase prop whose value is `true`.
+     */
+    extendedSelectMode?: boolean;
+}
+export declare const AssetGalleryGridCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, AssetGalleryGridCardStyleProps>, never>> & string;
+export declare const ThumbnailSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const HorizontalBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const HorizontalBarLeft: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const HorizontalBarRight: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StatusIconCircle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>, never>, never>> & string;
+export declare const ThumbnailRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ThumbnailSpacer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ThumbnailWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ThumbnailBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const ThumbnailSelectedOverlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, Pick<AssetGalleryGridCardStyleProps, "selected">>, never>> & string;
+export declare const ThumbnailActions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ActionsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const Action: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ConsumerOverlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CardBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const CardTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>, never>, never>> & string;
+export declare const CardDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>, never>, never>> & string;
+export declare const InstructionsWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, {
+    $hasContent?: boolean;
+}>, never>> & string;
+export declare const CardFooter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const CardFooterLeft: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CardFooterRight: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CardDivider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, {
+    invisible?: boolean;
+}>, never>> & string;
+export declare const CheckboxRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CheckboxButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export {};