@ebay/ui-core-react 8.5.2 → 8.7.0

package/ebay-fake-tabs/tab.d.ts

@@ -1,7 +1,7 @@
-import { ComponentProps, FC } from 'react';
-type TabProps = ComponentProps<'li'> & {
+import { ComponentProps, FC } from "react";
+type TabProps = ComponentProps<"li"> & {
     href: string;
-    ariaCurrent?: 'page' | 'true';
+    ariaCurrent?: "page" | "true";
 };
 declare const Tab: FC<TabProps>;
 export default Tab;

package/ebay-fake-tabs/tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../src/ebay-fake-tabs/tab.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAGjD,KAAK,QAAQ,GAAG,cAAc,CAAC,IAAI,CAAC,GAAG;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACjC,CAAA;AAED,QAAA,MAAM,GAAG,EAAE,EAAE,CAAC,QAAQ,CAYrB,CAAA;AAED,eAAe,GAAG,CAAA"}
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../src/ebay-fake-tabs/tab.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGlD,KAAK,QAAQ,GAAG,cAAc,CAAC,IAAI,CAAC,GAAG;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACjC,CAAC;AAEF,QAAA,MAAM,GAAG,EAAE,EAAE,CAAC,QAAQ,CAMrB,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/ebay-field/README.md

@@ -1,53 +1,62 @@
 # EbayField
 
 ## Demo
+
 [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/form-input-ebay-field--default-inline)
 
 ## Import JS
+
 ```jsx harmony
-import { EbayField, EbayLabel, EbayFieldDescription } from '@ebay/ui-core-react/ebay-field';
+import { EbayField, EbayLabel, EbayFieldDescription } from "@ebay/ui-core-react/ebay-field";
 ```
+
 ## Import following styles from SKIN
+
 ```jsx harmony
-import '@ebay/skin/field';
+import "@ebay/skin/field";
 ```
+
 ## Import styles using SCSS/CSS
+
 ```jsx harmony
-import '@ebay/skin/field.css'
+import "@ebay/skin/field.css";
 ```
+
 ## Usage
+
 ```
 yarn add @ebay/ui-core-react
 ```
+
 ```jsx harmony
- <EbayField layout="block">
-    <EbayLabel stacked htmlFor="field1">Label 1</EbayLabel>
+<EbayField layout="block">
+    <EbayLabel stacked htmlFor="field1">
+        Label 1
+    </EbayLabel>
     <EbayTextbox placeholder="placeholder text" id="field1" />
-    <EbayFieldDescription
-        type="confirmation"
-        position="below">
-            Some description Text
+    <EbayFieldDescription type="confirmation" position="below">
+        Some description Text
     </EbayFieldDescription>
 </EbayField>
 ```
 
 ## EbayField Attributes
 
-Name | Type | Stateful | Required | Description
---- | --- | --- | --- | ---
-`layout` | String | No | No | `block`, `inline` (default)
+| Name     | Type   | Stateful | Required | Description                 |
+| -------- | ------ | -------- | -------- | --------------------------- |
+| `layout` | String | No       | No       | `block`, `inline` (default) |
 
 ## EbayLabel Attributes
 
-Name | Type | Stateful | Required | Description
---- | --- | --- | --- | ---
-`stacked` | Boolean | No | No | display label above the field if true
-`required` | Boolean | No | No | indicates the field is required if true
-`position` | String | No | No | `start` (default) or `end` position towards the input
+| Name       | Type    | Stateful | Required | Description                                           |
+| ---------- | ------- | -------- | -------- | ----------------------------------------------------- |
+| `stacked`  | Boolean | No       | No       | display label above the field if true                 |
+| `required` | Boolean | No       | No       | indicates the field is required if true               |
+| `position` | String  | No       | No       | `start` (default) or `end` position towards the input |
 
 ## EbayFieldDescription Attributes
 
-Name | Type | Stateful | Required | Description
---- | --- | --- | --- | ---
-`type` | String | No | No | `confirmation`, `default`(Default), `attention`, `information`
-`position` | String | No | No | `below` (Default), `inline`, `above`
+| Name       | Type   | Stateful | Required | Description                                                    |
+| ---------- | ------ | -------- | -------- | -------------------------------------------------------------- |
+| `type`     | String | No       | No       | `confirmation`, `default`(Default), `attention`, `information` |
+| `position` | String | No       | No       | `below` (Default), `inline`, `above`                           |

package/ebay-field/description.d.ts

@@ -1,6 +1,6 @@
-import { ComponentProps, FC } from 'react';
-import { FieldDescriptionType, FieldDescriptionPosition } from './types';
-type DescriptionProps = ComponentProps<'div'> & ComponentProps<'span'> & {
+import { ComponentProps, FC } from "react";
+import { FieldDescriptionType, FieldDescriptionPosition } from "./types";
+type DescriptionProps = ComponentProps<"div"> & ComponentProps<"span"> & {
     type?: FieldDescriptionType;
     position?: FieldDescriptionPosition;
 };

package/ebay-field/description.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"description.d.ts","sourceRoot":"","sources":["../../src/ebay-field/description.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjD,OAAO,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAExE,KAAK,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG;IACrE,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,CAAC,EAAE,wBAAwB,CAAC;CACvC,CAAA;AAED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAkBrC,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"description.d.ts","sourceRoot":"","sources":["../../src/ebay-field/description.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAEzE,KAAK,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,GACzC,cAAc,CAAC,MAAM,CAAC,GAAG;IACrB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,CAAC,EAAE,wBAAwB,CAAC;CACvC,CAAC;AAEN,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CASrC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/ebay-field/field.d.ts

@@ -1,5 +1,5 @@
-import { FC, ReactNode } from 'react';
-import { FieldLayoutType } from './types';
+import { FC, ReactNode } from "react";
+import { FieldLayoutType } from "./types";
 type FieldProps = {
     className?: string;
     layout?: FieldLayoutType;

package/ebay-field/field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../src/ebay-field/field.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE5C,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAEzC,KAAK,UAAU,GAAG;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAEF,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAWzB,CAAA;AAED,eAAe,KAAK,CAAA"}
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../src/ebay-field/field.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,KAAK,UAAU,GAAG;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAEF,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAGzB,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/ebay-field/index.d.ts

@@ -1,5 +1,5 @@
-export { default as EbayField } from './field';
-export { default as EbayLabel, type Props as EbayLabelProps } from './label';
-export { default as EbayFieldDescription } from './description';
-export type { FieldDescriptionType, FieldDescriptionPosition, FieldLayoutType, LabelPosition } from './types';
+export { default as EbayField } from "./field";
+export { default as EbayLabel, type Props as EbayLabelProps } from "./label";
+export { default as EbayFieldDescription } from "./description";
+export type { FieldDescriptionType, FieldDescriptionPosition, FieldLayoutType, LabelPosition } from "./types";
 //# sourceMappingURL=index.d.ts.map

package/ebay-field/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,SAAS,CAAA;AAC9C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,KAAK,KAAK,IAAI,cAAc,EAAE,MAAM,SAAS,CAAA;AAC5E,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,eAAe,CAAA;AAC/D,YAAY,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,KAAK,KAAK,IAAI,cAAc,EAAE,MAAM,SAAS,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAChE,YAAY,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}

package/ebay-field/label.d.ts

@@ -1,11 +1,11 @@
-import { ComponentProps, FC } from 'react';
-import { LabelPosition } from './types';
+import { ComponentProps, FC } from "react";
+import { LabelPosition } from "./types";
 export type Props = {
     className?: string;
     stacked?: boolean;
     required?: boolean;
     position?: LabelPosition;
-} & ComponentProps<'label'>;
+} & ComponentProps<"label">;
 declare const Label: FC<Props>;
 export default Label;
 //# sourceMappingURL=label.d.ts.map

package/ebay-field/label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../src/ebay-field/label.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjD,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAEvC,MAAM,MAAM,KAAK,GAAG;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC5B,GAAG,cAAc,CAAC,OAAO,CAAC,CAAA;AAE3B,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,KAAK,CAiBpB,CAAA;AAED,eAAe,KAAK,CAAA"}
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../src/ebay-field/label.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAExC,MAAM,MAAM,KAAK,GAAG;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC5B,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC;AAE5B,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,KAAK,CAoBpB,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/ebay-field/types.d.ts

@@ -1,5 +1,5 @@
-export type FieldLayoutType = 'inline' | 'block';
-export type FieldDescriptionType = 'default' | 'group' | 'confirmation' | 'information' | 'attention';
-export type FieldDescriptionPosition = 'inline' | 'below' | 'above';
-export type LabelPosition = 'start' | 'end';
+export type FieldLayoutType = "inline" | "block";
+export type FieldDescriptionType = "default" | "group" | "confirmation" | "information" | "attention";
+export type FieldDescriptionPosition = "inline" | "below" | "above";
+export type LabelPosition = "start" | "end";
 //# sourceMappingURL=types.d.ts.map

package/ebay-field/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-field/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,OAAO,CAAA;AAEhD,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,OAAO,GAAG,cAAc,GAAG,aAAa,GAAG,WAAW,CAAA;AAErG,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAA;AAEnE,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,KAAK,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-field/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEjD,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,OAAO,GAAG,cAAc,GAAG,aAAa,GAAG,WAAW,CAAC;AAEtG,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;AAEpE,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,KAAK,CAAC"}

package/ebay-file-input/README.md

@@ -37,11 +37,7 @@ Add the below icons to the `EbaySvg` component.
 Note: Make sure that `EbaySvg` is only rendered on the server so it does not affect the client bundle size.
 
 ```tsx
-<EbaySvg
-    icons={[
-        "upload24"
-    ]}
-/>
+<EbaySvg icons={["upload24"]} />
 ```
 
 ```jsx harmony
@@ -54,6 +50,6 @@ Note: Make sure that `EbaySvg` is only rendered on the server so it does not aff
 
 ## Attributes
 
-| Name     | Type     | Required | Description                                                                                   | Data                  |
-| -------- | -------- | -------- | --------------------------------------------------------------------------------------------- | --------------------- |
-| `onInput`| Function | No       | Triggered when files are selected, providing the `files` list as part of the event data       | `event, { files }`    |
+| Name      | Type     | Required | Description                                                                             | Data               |
+| --------- | -------- | -------- | --------------------------------------------------------------------------------------- | ------------------ |
+| `onInput` | Function | No       | Triggered when files are selected, providing the `files` list as part of the event data | `event, { files }` |

package/ebay-file-input/file-input.d.ts

@@ -1,11 +1,11 @@
-import React, { FC, ComponentProps, ElementType } from 'react';
-import { FileInputHandler } from './types';
+import React, { FC, ComponentProps, ElementType } from "react";
+import { FileInputHandler } from "./types";
 type ChildrenProps = ComponentProps<ElementType> & {
     as?: ElementType;
 };
 export declare const EbayFileInputHeader: FC<ChildrenProps>;
 export declare const EbayFileInputSubheader: FC<ChildrenProps>;
-export type EbayFileInputProps = Omit<ComponentProps<'input'>, 'onInput' | 'type'> & {
+export type EbayFileInputProps = Omit<ComponentProps<"input">, "onInput" | "type"> & {
     onInput?: FileInputHandler;
 };
 declare const EbayFileInput: React.FC<EbayFileInputProps>;

package/ebay-file-input/file-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-input.d.ts","sourceRoot":"","sources":["../../src/ebay-file-input/file-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAY,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAK3C,KAAK,aAAa,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IAC/C,EAAE,CAAC,EAAE,WAAW,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,aAAa,CAEjD,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,EAAE,CAAC,aAAa,CAEpD,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC,GAAG;IACjF,OAAO,CAAC,EAAE,gBAAgB,CAAC;CAC9B,CAAA;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiD/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"file-input.d.ts","sourceRoot":"","sources":["../../src/ebay-file-input/file-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAY,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAK3C,KAAK,aAAa,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IAC/C,EAAE,CAAC,EAAE,WAAW,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,aAAa,CAEjD,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,EAAE,CAAC,aAAa,CAEpD,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC,GAAG;IACjF,OAAO,CAAC,EAAE,gBAAgB,CAAC;CAC9B,CAAC;AAEF,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgD/C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/ebay-file-input/index.d.ts

@@ -1,2 +1,2 @@
-export { default as EbayFileInput, EbayFileInputHeader, EbayFileInputSubheader, type EbayFileInputProps } from './file-input';
+export { default as EbayFileInput, EbayFileInputHeader, EbayFileInputSubheader, type EbayFileInputProps, } from "./file-input";
 //# sourceMappingURL=index.d.ts.map

package/ebay-file-input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-file-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,OAAO,IAAI,aAAa,EACxB,mBAAmB,EACnB,sBAAsB,EACtB,KAAK,kBAAkB,EAC1B,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-file-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,OAAO,IAAI,aAAa,EACxB,mBAAmB,EACnB,sBAAsB,EACtB,KAAK,kBAAkB,GAC1B,MAAM,cAAc,CAAC"}

package/ebay-file-input/types.d.ts

@@ -1,4 +1,4 @@
-import { EbayChangeEventHandler } from '../common/event-utils/types';
+import { EbayChangeEventHandler } from "../common/event-utils/types";
 export interface FileInputEvent {
     files: FileList;
 }

package/ebay-file-preview-card/README.md

@@ -9,19 +9,19 @@
 ### Import JS
 
 ```jsx harmony
-import { EbayFilePreviewCard } from '@ebay/ui-core-react/ebay-file-preview-card'
+import { EbayFilePreviewCard } from "@ebay/ui-core-react/ebay-file-preview-card";
 ```
 
 ### Import following styles from SKIN
 
 ```jsx harmony
-import '@ebay/skin/file-preview-card'
+import "@ebay/skin/file-preview-card";
 ```
 
 ### Or import styles using SCSS/CSS
 
 ```jsx harmony
-import '@ebay/skin/file-preview-card.css'
+import "@ebay/skin/file-preview-card.css";
 ```
 
 ### Import icons
@@ -31,15 +31,24 @@ Add the below icons to the `EbaySvg` component.
 Note: Make sure that `EbaySvg` is only rendered on the server so it does not affect the client bundle size.
 
 ```tsx
-<EbaySvg icons={['close16', 'delete16', 'vertical16', 'play16', 'file24']} />
+<EbaySvg icons={["close16", "delete16", "vertical16", "play16", "file24"]} />
+```
+
+```jsx harmony
+<EbayFilePreviewCard status="uploading" a11yCancelUploadText="Cancel Uploard" onCancel={(e) => action("onCancel")(e)} />
 ```
 
 ```jsx harmony
 <EbayFilePreviewCard
-    status="uploading"
-    a11yCancelUploadText="Cancel Uploard"
-    onCancel={(e) => action('onCancel')(e)}
-/>
+    file={{
+        name: "file-name.jpg",
+        type: "image",
+        src: "https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-real-square-pic.jpg",
+    }}
+    onAction={onAction}
+>
+    <EbayFilePreviewCardAction icon="heart16" aria-label="like item" />
+</EbayFilePreviewCard>
 ```
 
 ## Attributes
@@ -58,6 +67,7 @@ Note: Make sure that `EbaySvg` is only rendered on the server so it does not aff
 | `menuActions`          | `{event: string, label: string }[]`                          | No       | Array of menu actions, containing event and label.                                                           |      |
 | `seeMore`              | `Number`                                                     | No       | Passing a number here will convert the card to a "see more" card.                                            |      |
 | `a11ySeeMoreText`      | `String`                                                     | No       | a11y text for see more button.                                                                               |
+| `href`                 | `String`                                                     | No       | href that will wrapper the file preview card.                                                                |
 
 ## Events
 
@@ -67,3 +77,10 @@ Note: Make sure that `EbaySvg` is only rendered on the server so it does not aff
 | `onSeeMore`    | `EbayEventHandler`           | No       | Triggered when the see more button is clicked.      | `event`                                                         |
 | `onDelete`     | `EbayEventHandler`           | No       | Triggered when the delete button is clicked.        | `event`                                                         |
 | `onCancel`     | `EbayEventHandler`           | No       | Triggered when the cancel button is clicked.        | `event`                                                         |
+| `onAction`     | `EbayEventHandler`           | No       | Triggered when the action button is clicked.        | `event`                                                         |
+
+## Components
+
+| Name                        | Type                  | Required | Description                                                                                                            | Data |
+| --------------------------- | --------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------- | ---- |
+| `EbayFilePreviewCardAction` | `EbayIconButtonProps` | No       | Action component that will be used to render EbayIconButton and needs to have an `icon` and `aria-label` to be render. |

package/ebay-file-preview-card/ebay-file-preview-card-action.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { EbayIconButtonProps } from "../ebay-icon-button";
+export type EbayFilePreviewCardActionProps = Omit<EbayIconButtonProps, "ref">;
+declare const EbayFilePreviewCardAction: FC<EbayFilePreviewCardActionProps>;
+export default EbayFilePreviewCardAction;
+//# sourceMappingURL=ebay-file-preview-card-action.d.ts.map

package/ebay-file-preview-card/ebay-file-preview-card-action.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ebay-file-preview-card-action.d.ts","sourceRoot":"","sources":["../../src/ebay-file-preview-card/ebay-file-preview-card-action.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAE1D,MAAM,MAAM,8BAA8B,GAAG,IAAI,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC;AAE9E,QAAA,MAAM,yBAAyB,EAAE,EAAE,CAAC,8BAA8B,CAAc,CAAC;AAEjF,eAAe,yBAAyB,CAAC"}

package/ebay-file-preview-card/file-preview-action.d.ts

@@ -1,15 +1,18 @@
-import { FC } from 'react';
-import { EbayEventHandler } from '../common/event-utils/types';
-import { FilePreviewCardMenuAction, FilePreviewCardMenuActionHandler } from './types';
-export type EbayFilePreviewActionProps = {
+import { FC, ReactElement } from "react";
+import { EbayEventHandler } from "../common/event-utils/types";
+import { EbayFilePreviewCardActionProps } from "./ebay-file-preview-card-action";
+import { FilePreviewCardMenuAction, FilePreviewCardMenuActionHandler } from "./types";
+export type FilePreviewActionProps = {
     menuActions?: FilePreviewCardMenuAction[];
     deleteText?: string;
-    status?: 'uploading';
+    status?: "uploading";
     a11yCancelUploadText?: string;
     onMenuAction?: FilePreviewCardMenuActionHandler;
     onCancel?: EbayEventHandler<HTMLElement>;
     onDelete?: EbayEventHandler<HTMLElement>;
+    onAction?: EbayEventHandler<HTMLElement>;
+    action: ReactElement<EbayFilePreviewCardActionProps>;
 };
-declare const EbayFilePreviewAction: FC<EbayFilePreviewActionProps>;
-export default EbayFilePreviewAction;
+declare const FilePreviewAction: FC<FilePreviewActionProps>;
+export default FilePreviewAction;
 //# sourceMappingURL=file-preview-action.d.ts.map

package/ebay-file-preview-card/file-preview-action.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-preview-action.d.ts","sourceRoot":"","sources":["../../src/ebay-file-preview-card/file-preview-action.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAA;AAG9D,OAAO,EACH,yBAAyB,EACzB,gCAAgC,EACnC,MAAM,SAAS,CAAA;AAEhB,MAAM,MAAM,0BAA0B,GAAG;IACrC,WAAW,CAAC,EAAE,yBAAyB,EAAE,CAAA;IACzC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,YAAY,CAAC,EAAE,gCAAgC,CAAA;IAC/C,QAAQ,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAA;IACxC,QAAQ,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAA;CAC3C,CAAA;AAED,QAAA,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAwEzD,CAAA;AAED,eAAe,qBAAqB,CAAA"}
+{"version":3,"file":"file-preview-action.d.ts","sourceRoot":"","sources":["../../src/ebay-file-preview-card/file-preview-action.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAG/D,OAAO,EAAE,8BAA8B,EAAE,MAAM,iCAAiC,CAAC;AAEjF,OAAO,EAAE,yBAAyB,EAAE,gCAAgC,EAAE,MAAM,SAAS,CAAC;AAEtF,MAAM,MAAM,sBAAsB,GAAG;IACjC,WAAW,CAAC,EAAE,yBAAyB,EAAE,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,YAAY,CAAC,EAAE,gCAAgC,CAAC;IAChD,QAAQ,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACzC,MAAM,EAAE,YAAY,CAAC,8BAA8B,CAAC,CAAC;CACxD,CAAC;AAEF,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA6EjD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/ebay-file-preview-card/file-preview-card.d.ts

@@ -1,23 +1,25 @@
-import { FC, ComponentProps, ElementType } from 'react';
-import { EbayEventHandler } from '../common/event-utils/types';
-import { FilePreviewCardMenuAction, FilePreviewCardMenuActionHandler, FilePreviewType } from './types';
-export type EbayFilePreviewCardProps = ComponentProps<'div'> & {
+import { FC, ComponentProps, ElementType } from "react";
+import { EbayEventHandler } from "../common/event-utils/types";
+import { FilePreviewCardMenuAction, FilePreviewCardMenuActionHandler, FilePreviewType } from "./types";
+export type EbayFilePreviewCardProps = ComponentProps<"div"> & {
     a11yCancelUploadText?: string;
     as?: ElementType;
     deleteText?: string;
     file?: File | FilePreviewType;
-    status?: 'uploading';
+    status?: "uploading";
     infoText?: string;
     menuActions?: FilePreviewCardMenuAction[];
     seeMore?: number;
     a11ySeeMoreText?: string;
     footerTitle?: string;
     footerSubtitle?: string;
+    href?: string;
     onMenuAction?: FilePreviewCardMenuActionHandler;
     onSeeMore?: EbayEventHandler<HTMLElement>;
     onDelete?: EbayEventHandler<HTMLElement>;
     onCancel?: EbayEventHandler<HTMLElement>;
+    onAction?: EbayEventHandler<HTMLElement>;
 };
-declare const EbayFileInput: FC<EbayFilePreviewCardProps>;
-export default EbayFileInput;
+declare const EbayFilePreviewCard: FC<EbayFilePreviewCardProps>;
+export default EbayFilePreviewCard;
 //# sourceMappingURL=file-preview-card.d.ts.map

package/ebay-file-preview-card/file-preview-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-preview-card.d.ts","sourceRoot":"","sources":["../../src/ebay-file-preview-card/file-preview-card.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAW,cAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAA;AAI9D,OAAO,EACH,yBAAyB,EACzB,gCAAgC,EAChC,eAAe,EAClB,MAAM,SAAS,CAAA;AAEhB,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,eAAe,CAAA;IAC7B,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,yBAAyB,EAAE,CAAA;IACzC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,YAAY,CAAC,EAAE,gCAAgC,CAAA;IAC/C,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAA;IACzC,QAAQ,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAA;IACxC,QAAQ,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAA;CAC3C,CAAA;AAED,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,wBAAwB,CAgF/C,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"file-preview-card.d.ts","sourceRoot":"","sources":["../../src/ebay-file-preview-card/file-preview-card.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAW,cAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAExE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAO/D,OAAO,EAAE,yBAAyB,EAAE,gCAAgC,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAEvG,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,eAAe,CAAC;IAC9B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,yBAAyB,EAAE,CAAC;IAC1C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,gCAAgC,CAAC;IAChD,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;CAC5C,CAAC;AAEF,QAAA,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAyFrD,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/ebay-file-preview-card/file-preview-content.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
-import { FilePreviewType } from './types';
+import { FC } from "react";
+import { FilePreviewType } from "./types";
 export type EbayFilePreviewContentProps = {
     file?: FilePreviewType;
-    status?: 'uploading';
+    status?: "uploading";
     seeMore?: number;
 };
 declare const EbayFilePreviewContent: FC<EbayFilePreviewContentProps>;

package/ebay-file-preview-card/file-preview-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-preview-content.d.ts","sourceRoot":"","sources":["../../src/ebay-file-preview-card/file-preview-content.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAIjC,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAEzC,MAAM,MAAM,2BAA2B,GAAG;IACtC,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,QAAA,MAAM,sBAAsB,EAAE,EAAE,CAAC,2BAA2B,CA8B3D,CAAA;AAED,eAAe,sBAAsB,CAAA"}
+{"version":3,"file":"file-preview-content.d.ts","sourceRoot":"","sources":["../../src/ebay-file-preview-card/file-preview-content.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIlC,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,MAAM,MAAM,2BAA2B,GAAG;IACtC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,sBAAsB,EAAE,EAAE,CAAC,2BAA2B,CAwB3D,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/ebay-file-preview-card/file-preview-label.d.ts

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { FilePreviewType } from './types';
+import { FC } from "react";
+import { FilePreviewType } from "./types";
 export type EbayFilePreviewLabelProps = {
     file?: FilePreviewType;
     infoText?: string;

package/ebay-file-preview-card/file-preview-label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-preview-label.d.ts","sourceRoot":"","sources":["../../src/ebay-file-preview-card/file-preview-label.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAEzC,MAAM,MAAM,yBAAyB,GAAG;IACpC,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,QAAA,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAqBvD,CAAA;AAED,eAAe,oBAAoB,CAAA"}
+{"version":3,"file":"file-preview-label.d.ts","sourceRoot":"","sources":["../../src/ebay-file-preview-card/file-preview-label.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,MAAM,MAAM,yBAAyB,GAAG;IACpC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAUvD,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/ebay-file-preview-card/index.d.ts

@@ -1,3 +1,4 @@
-export { default as EbayFilePreviewCard, type EbayFilePreviewCardProps } from './file-preview-card';
-export * from './types';
+export { default as EbayFilePreviewCard, type EbayFilePreviewCardProps } from "./file-preview-card";
+export { default as EbayFilePreviewCardAction } from "./ebay-file-preview-card-action";
+export * from "./types";
 //# sourceMappingURL=index.d.ts.map

package/ebay-file-preview-card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-file-preview-card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,MAAM,qBAAqB,CAAA;AACnG,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-file-preview-card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AACpG,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AACvF,cAAc,SAAS,CAAC"}

package/ebay-file-preview-card/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../file-preview-card-D4qnvGtF.js");exports.EbayFilePreviewCard=e.EbayFileInput;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../file-preview-card-BD6TIsY7.js");exports.EbayFilePreviewCard=e.EbayFilePreviewCard;exports.EbayFilePreviewCardAction=e.EbayFilePreviewCardAction;

package/ebay-file-preview-card/types.d.ts

@@ -1,11 +1,11 @@
-import { EbayEventHandler } from '../common/event-utils/types';
+import { EbayEventHandler } from "../common/event-utils/types";
 export type FilePreviewCardMenuAction = {
     event: string;
     label: string;
 };
 export type FilePreviewType = {
     name: string;
-    type?: File['type'];
+    type?: File["type"];
     src?: string;
 };
 export type MenuActionEventData = {

package/ebay-file-preview-card/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-file-preview-card/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAA;AAE9D,MAAM,MAAM,yBAAyB,GAAG;IACpC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;IACnB,GAAG,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,gCAAgC,GAAG,gBAAgB,CAC3D,WAAW,EACX,mBAAmB,CACtB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-file-preview-card/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAE/D,MAAM,MAAM,yBAAyB,GAAG;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG,gBAAgB,CAAC,WAAW,EAAE,mBAAmB,CAAC,CAAC"}

package/ebay-file-preview-card-group/README.md

@@ -9,19 +9,19 @@
 ### Import JS
 
 ```jsx harmony
-import { EbayFilePreviewCardGroup } from '@ebay/ui-core-react/ebay-file-preview-card-group'
+import { EbayFilePreviewCardGroup } from "@ebay/ui-core-react/ebay-file-preview-card-group";
 ```
 
 ### Import following styles from SKIN
 
 ```jsx harmony
-import '@ebay/skin/file-preview-card-group'
+import "@ebay/skin/file-preview-card-group";
 ```
 
 ### Or import styles using SCSS/CSS
 
 ```jsx harmony
-import '@ebay/skin/file-preview-card-group.css'
+import "@ebay/skin/file-preview-card-group.css";
 ```
 
 ### Import icons
@@ -31,7 +31,7 @@ Add the below icons to the `EbaySvg` component.
 Note: Make sure that `EbaySvg` is only rendered on the server so it does not affect the client bundle size.
 
 ```tsx
-<EbaySvg icons={['close16', 'delete16', 'vertical16', 'play16', 'file24']} />
+<EbaySvg icons={["close16", "delete16", "vertical16", "play16", "file24"]} />
 ```
 
 ```jsx harmony
@@ -63,3 +63,4 @@ const fileExample = {
 | `onMenuAction` | `EbayMenuSelectEventHandler`   | No       | Triggered when an action is selected from the menu. | `event, {index: number, menuActionEvent: { index: number, checked: number[], eventName?: string}}` |
 | `onDelete`     | `FilePreviewCardActionHandler` | No       | Triggered when the delete button is clicked.        | `event, {index: number}`                                                                           |
 | `onCancel`     | `FilePreviewCardActionHandler` | No       | Triggered when the cancel button is clicked.        | `event, {index: number}`                                                                           |
+| `onAction`     | `FilePreviewCardActionHandler` | No       | Triggered when the custon action button is clicked. | `event, {index: number}`                                                                           |

package/ebay-file-preview-card-group/file-preview-card-group.d.ts

@@ -1,10 +1,11 @@
-import { FC, ComponentProps } from 'react';
-import { EbayFilePreviewCardProps } from '../ebay-file-preview-card';
-import { FilePreviewCardActionHandler, FilePreviewCardMenuActionHandler } from './types';
-export type EbayFilePreviewCardGroupProps = ComponentProps<'div'> & {
-    a11ySeeMoreText?: EbayFilePreviewCardProps['a11ySeeMoreText'];
+import { FC, ComponentProps } from "react";
+import { EbayFilePreviewCardProps } from "../ebay-file-preview-card";
+import { FilePreviewCardActionHandler, FilePreviewCardMenuActionHandler } from "./types";
+export type EbayFilePreviewCardGroupProps = ComponentProps<"div"> & {
+    a11ySeeMoreText?: EbayFilePreviewCardProps["a11ySeeMoreText"];
     onDelete?: FilePreviewCardActionHandler;
     onCancel?: FilePreviewCardActionHandler;
+    onAction?: FilePreviewCardActionHandler;
     onMenuAction?: FilePreviewCardMenuActionHandler;
 };
 declare const EbayFilePreviewGroup: FC<EbayFilePreviewCardGroupProps>;

package/ebay-file-preview-card-group/file-preview-card-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-preview-card-group.d.ts","sourceRoot":"","sources":["../../src/ebay-file-preview-card-group/file-preview-card-group.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAY,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3D,OAAO,EAEH,wBAAwB,EAC3B,MAAM,2BAA2B,CAAA;AAClC,OAAO,EAAE,4BAA4B,EAAE,gCAAgC,EAAE,MAAM,SAAS,CAAA;AAExF,MAAM,MAAM,6BAA6B,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAChE,eAAe,CAAC,EAAE,wBAAwB,CAAC,iBAAiB,CAAC,CAAA;IAC7D,QAAQ,CAAC,EAAE,4BAA4B,CAAA;IACvC,QAAQ,CAAC,EAAE,4BAA4B,CAAA;IACvC,YAAY,CAAC,EAAE,gCAAgC,CAAA;CAClD,CAAA;AAID,QAAA,MAAM,oBAAoB,EAAE,EAAE,CAAC,6BAA6B,CA8C3D,CAAA;AAED,eAAe,oBAAoB,CAAA"}
+{"version":3,"file":"file-preview-card-group.d.ts","sourceRoot":"","sources":["../../src/ebay-file-preview-card-group/file-preview-card-group.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAY,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5D,OAAO,EAAuB,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAC1F,OAAO,EAAE,4BAA4B,EAAE,gCAAgC,EAAE,MAAM,SAAS,CAAC;AAEzF,MAAM,MAAM,6BAA6B,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAChE,eAAe,CAAC,EAAE,wBAAwB,CAAC,iBAAiB,CAAC,CAAC;IAC9D,QAAQ,CAAC,EAAE,4BAA4B,CAAC;IACxC,QAAQ,CAAC,EAAE,4BAA4B,CAAC;IACxC,QAAQ,CAAC,EAAE,4BAA4B,CAAC;IACxC,YAAY,CAAC,EAAE,gCAAgC,CAAC;CACnD,CAAC;AAIF,QAAA,MAAM,oBAAoB,EAAE,EAAE,CAAC,6BAA6B,CA+C3D,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/ebay-file-preview-card-group/index.d.ts

@@ -1,2 +1,2 @@
-export { default as EbayFilePreviewCardGroup, type EbayFilePreviewCardGroupProps } from './file-preview-card-group';
+export { default as EbayFilePreviewCardGroup, type EbayFilePreviewCardGroupProps } from "./file-preview-card-group";
 //# sourceMappingURL=index.d.ts.map

package/ebay-file-preview-card-group/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-file-preview-card-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,OAAO,IAAI,wBAAwB,EACnC,KAAK,6BAA6B,EACrC,MAAM,2BAA2B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-file-preview-card-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,KAAK,6BAA6B,EAAE,MAAM,2BAA2B,CAAC"}

package/ebay-file-preview-card-group/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("../tslib.es6-C4EgNkz1.js"),t=require("react"),w=require("../utils-C9NL3q0j.js"),E=require("../file-preview-card-D4qnvGtF.js"),d=15,b=s=>{var{a11ySeeMoreText:p,onDelete:l,onCancel:c,onMenuAction:a,children:M}=s,S=v.__rest(s,["a11ySeeMoreText","onDelete","onCancel","onMenuAction","children"]);const[o,g]=t.useState(d),h=()=>{g(r=>r+d)},e=w.filterByType(M,E.EbayFileInput),u=e.length-o,m=e.slice(0,Math.min(o,e.length));return t.createElement("div",Object.assign({className:"file-preview-card-group"},S),t.createElement("ul",null,m.map((r,i)=>t.cloneElement(r,{as:r.props.as||"li",onDelete:n=>l&&l(n,{index:i}),onCancel:n=>c&&c(n,{index:i}),onMenuAction:(n,y)=>a&&a(n,{index:i,menuActionEvent:y})})),u>0&&t.cloneElement(e[o],{seeMore:u,a11ySeeMoreText:p,onSeeMore:h,as:e[o].props.as||"li"})))};exports.EbayFilePreviewCardGroup=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("../tslib.es6-C4EgNkz1.js"),o=require("react"),C=require("classnames"),E=require("../utils-C9NL3q0j.js"),b=require("../file-preview-card-BD6TIsY7.js"),m=15,f=i=>{var{a11ySeeMoreText:M,onDelete:c,onCancel:l,onAction:a,onMenuAction:u,className:S,children:p}=i,g=A.__rest(i,["a11ySeeMoreText","onDelete","onCancel","onAction","onMenuAction","className","children"]);const[t,h]=o.useState(m),v=()=>{h(r=>r+m)},n=E.filterByType(p,b.EbayFilePreviewCard),d=n.length-t,w=n.slice(0,Math.min(t,n.length));return o.createElement("div",Object.assign({className:C("file-preview-card-group",S)},g),o.createElement("ul",null,w.map((r,s)=>o.cloneElement(r,{as:r.props.as||"li",onDelete:e=>c&&c(e,{index:s}),onCancel:e=>l&&l(e,{index:s}),onAction:e=>a&&a(e,{index:s}),onMenuAction:(e,y)=>u&&u(e,{index:s,menuActionEvent:y})})),d>0&&o.cloneElement(n[t],{seeMore:d,a11ySeeMoreText:M,onSeeMore:v,as:n[t].props.as||"li"})))};exports.EbayFilePreviewCardGroup=f;

package/ebay-file-preview-card-group/types.d.ts

@@ -1,5 +1,5 @@
-import { EbayEventHandler } from '../common/event-utils/types';
-import { MenuActionEventData } from '../ebay-file-preview-card';
+import { EbayEventHandler } from "../common/event-utils/types";
+import { MenuActionEventData } from "../ebay-file-preview-card";
 type EventData = {
     index: number;
 };