@ebay/ui-core-react 8.0.3 → 8.1.0

package/checkbox-Bb3s3Jof.js

@@ -0,0 +1 @@
+"use strict";const F=require("./tslib.es6-C4EgNkz1.js"),c=require("react"),j=require("classnames"),a=require("./icon-CeLPlCml.js"),I=require("./label-BRztS0pw.js"),O=require("./utils-C9NL3q0j.js"),w=o=>typeof o<"u",D=o=>{var{id:d,size:t="default",className:r,style:k,checked:h,defaultChecked:u=!1,onChange:b=()=>{},onFocus:m=()=>{},onKeyDown:g=()=>{},children:i,inputRef:v}=o,C=F.__rest(o,["id","size","className","style","checked","defaultChecked","onChange","onFocus","onKeyDown","children","inputRef"]);const[y,_]=c.useState(u),x=n=>{const e=n.target;b(n,{value:e==null?void 0:e.value,checked:!!(e!=null&&e.checked)}),_(e==null?void 0:e.checked)},E=n=>{var e,l;return m(n,{value:(e=n.target)===null||e===void 0?void 0:e.value,checked:!!(!((l=n.target)===null||l===void 0)&&l.checked)})},p=n=>{const e=n.target;g(n,{value:e.value,checked:!!e.checked})},f=j("checkbox",r,{"checkbox--large":t==="large"}),N=t==="large"?c.createElement(a.EbayIcon,{name:"checkboxChecked24",className:"checkbox__checked"}):c.createElement(a.EbayIcon,{name:"checkboxChecked18",className:"checkbox__checked"}),q=t==="large"?c.createElement(a.EbayIcon,{name:"checkboxUnchecked24",className:"checkbox__unchecked"}):c.createElement(a.EbayIcon,{name:"checkboxUnchecked18",className:"checkbox__unchecked"}),s=O.findComponent(i,I.Label);return c.createElement(c.Fragment,null,c.createElement("span",{className:f,style:Object.assign(Object.assign({},k),{alignItems:"center"})},c.createElement("input",Object.assign({},C,{id:d,className:"checkbox__control",type:"checkbox",checked:w(h)?h:y,onChange:x,onFocus:E,onKeyDown:p,ref:v})),c.createElement("span",{className:"checkbox__icon",hidden:!0},N,q)),s?c.cloneElement(s,Object.assign(Object.assign({},s.props),{position:"end",htmlFor:d})):i)};exports.EbayCheckbox=D;

package/common/dropdown.d.ts

@@ -17,4 +17,65 @@ export type FloatingDropdownHookOptions = {
     reverse?: boolean;
 };
 export declare function useFloatingDropdown({ open, options }: FloatingDropdownHookArgs): FloatingDropdownHookReturn;
+type ElementId = string;
+export type ExpanderHookArgs<T extends HTMLElement> = {
+    ref: React.MutableRefObject<T>;
+    expanded?: boolean;
+    options: {
+        contentSelector: string;
+        hostSelector: string;
+        expandedClass: string;
+        autoCollapse?: boolean;
+        expandOnFocus?: boolean;
+        expandOnClick?: boolean;
+        collapseOnFocusOut?: boolean;
+        collapseOnMouseOut?: boolean;
+        collapseOnClickOut?: boolean;
+        collapseOnHostFocus?: boolean;
+        expandOnHover?: boolean;
+        focusManagement?: 'content' | 'focusable' | 'interactive' | ElementId;
+        simulateSpacebarClick?: boolean;
+        alwaysDoFocusManagement?: boolean;
+        ariaControls?: boolean;
+    };
+    onExpand?: () => void;
+    onCollapse?: () => void;
+};
+export type ExpanderHookReturn = {
+    isExpanded: boolean;
+    expand(): void;
+    collapse(): void;
+};
+export declare function useExpander<T extends HTMLElement>({ ref, expanded, options, onExpand, onCollapse }: ExpanderHookArgs<T>, deps?: React.DependencyList): ExpanderHookReturn;
+type AutoIndexType = 'none' | 'current' | 'interactive' | 'ariaChecked' | 'ariaSelected' | 'ariaSelectedOrInteractive' | number;
+export type ActiveDescendantChangeHandler = (event: ActiveDescendantChangeEvent, data: {
+    toIndex: number;
+}) => void;
+export type ActiveDescendantHookArgs = {
+    ref: React.MutableRefObject<HTMLElement>;
+    focusElementRef?: React.MutableRefObject<HTMLElement>;
+    itemContainerRef?: React.MutableRefObject<HTMLElement>;
+    disabled?: boolean;
+    onChange?: ActiveDescendantChangeHandler;
+    options: {
+        activeDescendantClassName: string;
+        autoInit?: AutoIndexType;
+        autoReset?: AutoIndexType;
+        autoScroll?: boolean;
+        axis?: 'both' | 'x' | 'y';
+        ignoreByDelegateSelector?: string;
+        wrap?: boolean;
+    };
+};
+export type ActiveDescendantHookReturn = {
+    setIndex: (index: number) => void;
+    getIndex: () => number;
+};
+export interface ActiveDescendantChangeEvent extends Event {
+    detail: {
+        toIndex: number;
+    };
+}
+export declare function useActiveDescendant({ ref, focusElementRef, itemContainerRef, onChange, disabled, options }: ActiveDescendantHookArgs): ActiveDescendantHookReturn;
+export {};
 //# sourceMappingURL=dropdown.d.ts.map

package/common/dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../src/common/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAKH,WAAW,EACd,MAAM,oBAAoB,CAAA;AAE3B,MAAM,MAAM,0BAA0B,GAAG;IACrC,aAAa,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC,gBAAgB,CAAC,CAAA;IAC/D,IAAI,EAAE;QACF,IAAI,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,CAAA;QACzD,OAAO,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAA;QAC3D,OAAO,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,CAAA;QAC/D,UAAU,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC,aAAa,CAAC,CAAA;KACpE,CAAA;CACJ,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACnC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,2BAA2B,CAAA;CACxC,CAAA;AAED,MAAM,MAAM,2BAA2B,GAAG;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAA;AAED,wBAAgB,mBAAmB,CAAC,EAChC,IAAI,EACJ,OAAO,EACV,EAAE,wBAAwB,GAAG,0BAA0B,CAiBvD"}
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../src/common/dropdown.ts"],"names":[],"mappings":"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"}

package/common/floating-label-utils/hooks.d.ts

@@ -1,29 +1,18 @@
-import { FC, RefObject, ReactNode, ComponentProps } from 'react';
-type InputRef = RefObject<HTMLSelectElement | HTMLTextAreaElement | HTMLInputElement> | any;
-type FloatingLabelHookProps = {
-    type?: string;
-    inputId?: string;
-    ref?: InputRef;
+import { FC, ComponentProps } from 'react';
+type MakeupFloatingLabelHookProps = {
+    text?: string;
     disabled?: boolean;
-    label?: string;
-    inputSize?: 'default' | 'large';
-    inputValue?: ComponentProps<'input'>['value'];
-    className?: string;
-    placeholder?: string;
     invalid?: boolean;
+    size?: 'default' | 'large';
+    type?: string;
     opaqueLabel?: boolean;
+    containerTagName?: 'span' | 'div';
     onMount?: () => void;
 };
-type FloatingLabelHookReturn = {
-    label: ReactNode;
-    onBlur: () => void;
-    onFocus: () => void;
-    Container: FC<{
-        children?: ReactNode;
-    }>;
-    ref: InputRef;
-    placeholder: string;
+type MakeupFloatingLabelHookReturn = {
+    Label: FC<Omit<ComponentProps<'label'>, 'children'>> | FC;
+    Container: FC<ComponentProps<'div' | 'span'>> | FC;
 };
-export declare function useFloatingLabel({ ref, inputId, className, disabled, label, inputSize, inputValue, placeholder, invalid, opaqueLabel, type, onMount }: FloatingLabelHookProps): FloatingLabelHookReturn;
+export declare function useFloatingLabel({ text, disabled, invalid, size, type, opaqueLabel, containerTagName: Container, onMount }: MakeupFloatingLabelHookProps): MakeupFloatingLabelHookReturn;
 export {};
 //# sourceMappingURL=hooks.d.ts.map

package/common/floating-label-utils/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/common/floating-label-utils/hooks.tsx"],"names":[],"mappings":"AAAA,OAAc,EAA+B,EAAE,EAAE,SAAS,EAAe,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAGjH,KAAK,QAAQ,GAAG,SAAS,CAAC,iBAAiB,GAAG,mBAAmB,GAAG,gBAAgB,CAAC,GAAG,GAAG,CAAA;AAC3F,KAAK,sBAAsB,GAAG;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAChC,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAA;AAED,KAAK,uBAAuB,GAAG;IAC3B,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,EAAE,CAAC;QAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IACxC,GAAG,EAAE,QAAQ,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACvB,CAAA;AA2CD,wBAAgB,gBAAgB,CAAC,EAC7B,GAAG,EACH,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAK,EACL,SAAS,EACT,UAAU,EACV,WAAW,EACX,OAAO,EACP,WAAW,EACX,IAAI,EACJ,OAAkB,EACrB,EAAG,sBAAsB,GAAG,uBAAuB,CA8EnD"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/common/floating-label-utils/hooks.tsx"],"names":[],"mappings":"AAAA,OAAc,EAEV,EAAE,EAEF,cAAc,EAGjB,MAAM,OAAO,CAAA;AAId,KAAK,4BAA4B,GAAG;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAA;AAED,KAAK,6BAA6B,GAAG;IACjC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,CAAC,GAAG,EAAE,CAAC;IAC1D,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,GAAG,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC;CACtD,CAAA;AAED,wBAAgB,gBAAgB,CAAC,EAC7B,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,gBAAgB,EAAE,SAAkB,EACpC,OAAkB,EACrB,EAAE,4BAA4B,GAAG,6BAA6B,CA6E9D"}

package/dropdown-BLiIyhWy.js

@@ -0,0 +1 @@
+"use strict";const s=require("react"),v=require("@floating-ui/react"),l=require("makeup-expander"),y=require("makeup-active-descendant");var h;const{default:D=l}=(h=l==null?void 0:l.default)!=null&&h.__esModule?l.default:l;function _({open:t,options:r}){var a;const{floatingStyles:c,refs:u}=v.useFloating({placement:r!=null&&r.reverse?"bottom-end":"bottom-start",open:t,middleware:[v.offset((a=r==null?void 0:r.offset)!==null&&a!==void 0?a:4),v.flip(),v.shift()],whileElementsMounted:v.autoUpdate});return{overlayStyles:c,refs:{host:u.reference,overlay:u.floating,setHost:u.setReference,setOverlay:u.setFloating}}}function m({ref:t,expanded:r,options:a,onExpand:c,onCollapse:u},f){const n=s.useRef(),o=s.useSyncExternalStore(e=>{var d,i;function E(){e(),c==null||c()}function g(){e(),u==null||u()}return(d=t.current)===null||d===void 0||d.addEventListener("expander-expand",E),(i=t.current)===null||i===void 0||i.addEventListener("expander-collapse",g),()=>{var x,p;(x=t.current)===null||x===void 0||x.removeEventListener("expander-expand",E),(p=t.current)===null||p===void 0||p.removeEventListener("expander-collapse",g)}},()=>{var e;return(e=n.current)===null||e===void 0?void 0:e.expanded},()=>!1);return s.useEffect(()=>(t.current&&(n.current=new D(t.current,a)),()=>{var e;(e=n.current)===null||e===void 0||e.destroy()}),f||[]),s.useEffect(()=>{n.current&&r!==void 0&&(n.current.expanded=r)},[r]),{isExpanded:o,expand:()=>{n.current&&(n.current.expanded=!0)},collapse:()=>{n.current&&(n.current.expanded=!1)}}}function L({ref:t,focusElementRef:r,itemContainerRef:a,onChange:c=()=>null,disabled:u,options:f}){const n=s.useRef();return s.useEffect(()=>{const o=e=>{const d={toIndex:e.detail.toIndex};c(e,d)};return u||(n.current=y.createLinear(t.current,r?r.current:t.current,a?a.current:t.current,"[role=option]",f),t.current.addEventListener("activeDescendantChange",o)),()=>{var e,d,i;(e=n.current)===null||e===void 0||e.reset(),(d=n.current)===null||d===void 0||d.destroy(),(i=t.current)===null||i===void 0||i.removeEventListener("activeDescendantChange",o)}},[u,c]),{setIndex(o){n.current.index=o},getIndex(){return n.current.index}}}exports.useActiveDescendant=L;exports.useExpander=m;exports.useFloatingDropdown=_;

package/ebay-avatar/README.md

@@ -0,0 +1,44 @@
+# EbayAvatar
+
+## Demo
+
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/docs/graphics-icons-ebay-avatar--docs)
+
+## Usage
+
+### Import JS
+
+```jsx harmony
+import { EbayAvatar } from "@ebay/ui-core-react/ebay-avatar";
+```
+
+### Import following styles from SKIN
+
+```jsx harmony
+import "@ebay/skin/avatar";
+```
+
+### If tokens haven't been added to the project at a higher level, make sure to import
+
+```jsx harmony
+import "@ebay/skin/tokens";
+```
+
+### Or import styles using SCSS/CSS
+
+```jsx harmony
+import "@ebay/skin/avatar.css";
+```
+
+```jsx harmony
+<EbayAvatar username="Joe" />
+```
+
+## Attributes
+
+| Name               | Type   | Required | Description                                                                                                                                                                                                                                                         | Data |
+| ------------------ | ------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- |
+| `size`             | Number | No       | The pixel size of the avatar. Can only be specific sizes                                                                                                                                                                                                            |      |
+| `color`            | String | No       | The color to color the background. This can be only used in the non icon/image case. This is used simply as an override to the username hash                                                                                                                        |      |
+| `username`         | String | No       | The username to display. If there is no body, then this will deternmine what the content is. If there is no username passed, then user is signed out. Based on the username, the icon will change colors and show the first letter if there is no user profile pic. |      |
+| `knownAspectRatio` | Number | No       | Optional, as aspect ratio will be calculated when the image loads on the client. This can be passed to help prevent a flash of incorrectly styled content before the image loads                                                                                    |      |

package/ebay-avatar/avatar-image.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps, FC } from 'react';
+export type EbayAvatarImageProps = ComponentProps<'img'>;
+declare const AvatarImage: FC<EbayAvatarImageProps>;
+export default AvatarImage;
+//# sourceMappingURL=avatar-image.d.ts.map

package/ebay-avatar/avatar-image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-image.d.ts","sourceRoot":"","sources":["../../src/ebay-avatar/avatar-image.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjD,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAA;AAExD,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,oBAAoB,CACpB,CAAA;AAEtB,eAAe,WAAW,CAAA"}

package/ebay-avatar/avatar.d.ts

@@ -0,0 +1,11 @@
+import { ComponentProps, FC } from 'react';
+import { Size, Color } from './types';
+export type EbayAvatarProps = ComponentProps<'div'> & {
+    size?: Size | `${Size}`;
+    color?: Color;
+    username?: string;
+    knownAspectRatio?: number;
+};
+declare const EbayAvatar: FC<EbayAvatarProps>;
+export default EbayAvatar;
+//# sourceMappingURL=avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/ebay-avatar/avatar.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAY,MAAM,OAAO,CAAA;AAI3D,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAIrC,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAClD,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,IAAI,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAA;AAMD,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA2CnC,CAAA;AAED,eAAe,UAAU,CAAA"}

package/ebay-avatar/index.d.ts

@@ -0,0 +1,4 @@
+export { default as EbayAvatar, type EbayAvatarProps } from './avatar';
+export { default as EbayAvatarImage, type EbayAvatarImageProps } from './avatar-image';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAA;AACtE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AACtF,cAAc,SAAS,CAAA"}

package/ebay-avatar/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("../tslib.es6-C4EgNkz1.js"),r=require("react"),E=require("classnames"),y=require("../icon-CeLPlCml.js"),C=require("../utils-C9NL3q0j.js"),u=["teal","light-teal","green","lime","yellow","orange","magenta","pink"];function q(e,o){if(o)return o;let n=0,t,a;if(e&&e.length>0)for(a=0;a<e.length;a++)t=e.charCodeAt(a),n=(n<<5)-n+t,n|=0;const g=u.length,m=Math.abs(n)%g;return u[m]}const v=e=>r.createElement("img",Object.assign({},e));function d(e){return e&&(e<3/4||e<4/3)}const I=e=>{var{size:o,color:n,username:t,children:a,className:g,knownAspectRatio:m}=e,h=A.__rest(e,["size","color","username","children","className","knownAspectRatio"]);const[b,f]=r.useState(d(m)?"fit":"cover"),s=C.findComponent(a,v),p=l=>{const c=l.target,i=c.naturalWidth/c.naturalHeight;f(d(i)?"fit":"cover")};return r.createElement("div",Object.assign({},h,{role:"img",className:E("avatar",g,o&&`avatar--${o}`,b==="fit"&&"avatar--fit",t&&!s&&`avatar--${q(t,n)}`)}),r.Children.count(a)>0?s&&r.cloneElement(s,{onLoad(l){var c,i;(i=(c=s.props).onLoad)===null||i===void 0||i.call(c,l),p(l)}})||a:(t==null?void 0:t.charAt(0).toUpperCase())||r.createElement(y.EbayIcon,{name:"avatarSignedOut"}))};exports.EbayAvatar=I;exports.EbayAvatarImage=v;

package/ebay-avatar/types.d.ts

@@ -0,0 +1,3 @@
+export type Size = 32 | 40 | 48 | 56 | 64 | 96 | 128;
+export type Color = 'teal' | 'light-teal' | 'green' | 'lime' | 'yellow' | 'orange' | 'magenta' | 'pink';
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-avatar/types.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,IAAI,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,CAAC;AACrD,MAAM,MAAM,KAAK,GAAG,MAAM,GAAG,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC"}

package/ebay-avatar/utils.d.ts

@@ -0,0 +1,3 @@
+import { Color } from './types';
+export declare function getColorForText(username?: string, color?: Color): Color;
+//# sourceMappingURL=utils.d.ts.map

package/ebay-avatar/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/ebay-avatar/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAc/B,wBAAgB,eAAe,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,KAAK,CAgBvE"}

package/ebay-carousel/README.md

@@ -20,8 +20,11 @@ Name | Type    | Stateful | Required | Description
 `gap` | Number  | Yes      | No | margin between carousel items in pixels.
 `index` | Number  | Yes      | No | 0 - based index position. It sets the current slide to be displayed
 `itemsPerSlide` | Number  | Yes      | No | number of items for each carousel slide and enable slide controls. If set to a whole number, will default to x.1 where x is the whole number set.
+`autoplay` | Boolean or Number | No       | No | If true, will automatically scroll through the carousel. If a number is provided, will set the interval in milliseconds.
 `a11yPreviousText` | String  | No       | Yes | A11y text for previous button and mask.
 `a11yNextText` | String  | No       | Yes | A11y text for next button and mask.
+`a11yPauseText` | String  | No       | Yes | A11y text for pause button.
+`a11yPlayText` | String  | No       | Yes | A11y text for play button.
 
 ## Events
 
@@ -31,6 +34,8 @@ Event | Data  | Description
 `onPrevious` | Event | Triggered when previous slide button is clicked
 `onScroll` | Event | Triggered when scrolling slides
 `onSlide` | Event | new slide is navigated to (by controls or API)
+`onPause` | Event | Triggered when autoplay is paused
+`onPlay` | Event | Triggered when autoplay is resumed
 
 
 ## CarouselItem

package/ebay-carousel/carousel-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"carousel-item.d.ts","sourceRoot":"","sources":["../../src/ebay-carousel/carousel-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACV,cAAc,EAEd,SAAS,EAIZ,MAAM,OAAO,CAAA;AAGd,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,KAAK,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC,CAAA;AACrC,KAAK,iBAAiB,GAAG,SAAS,GAAG;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAA;CACxC,CAAC;;AAiCF,wBAA+C"}
+{"version":3,"file":"carousel-item.d.ts","sourceRoot":"","sources":["../../src/ebay-carousel/carousel-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACV,cAAc,EAEd,SAAS,EAIZ,MAAM,OAAO,CAAA;AAGd,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,KAAK,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC,CAAA;AACrC,KAAK,iBAAiB,GAAG,SAAS,GAAG;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAA;CACxC,CAAC;;AAkCF,wBAA+C"}

package/ebay-carousel/carousel-list.d.ts

@@ -7,6 +7,7 @@ type CarouselListProps = {
     offset: number;
     activeIndex: number;
     nextControlDisabled?: boolean;
+    isAutoplayEnabled?: boolean;
     className?: string;
     itemsRef?: RefObject<Array<ListItemRef | null>>;
     children: ReactNode;

package/ebay-carousel/carousel-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"carousel-list.d.ts","sourceRoot":"","sources":["../../src/ebay-carousel/carousel-list.tsx"],"names":[],"mappings":"AAAA,OAAc,EACV,EAAE,EAAE,SAAS,EAEL,SAAS,EACpB,MAAM,OAAO,CAAA;AAId,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,KAAK,iBAAiB,GAAG;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC;IAChD,QAAQ,EAAE,SAAS,CAAC;IACpB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,QAAQ,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE;;KAAA,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CA2EvC,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"carousel-list.d.ts","sourceRoot":"","sources":["../../src/ebay-carousel/carousel-list.tsx"],"names":[],"mappings":"AAAA,OAAc,EACV,EAAE,EAAE,SAAS,EAEL,SAAS,EACpB,MAAM,OAAO,CAAA;AAId,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,KAAK,iBAAiB,GAAG;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC;IAChD,QAAQ,EAAE,SAAS,CAAC;IACpB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,QAAQ,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE;;KAAA,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CA4EvC,CAAA;AAED,eAAe,YAAY,CAAA"}

package/ebay-carousel/carousel.d.ts

@@ -7,6 +7,9 @@ export type CarouselProps = ComponentProps<'div'> & {
     itemsPerSlide?: number;
     a11yPreviousText?: string;
     a11yNextText?: string;
+    a11yPauseText?: string;
+    a11yPlayText?: string;
+    autoplay?: boolean | number;
     onNext?: (event: React.SyntheticEvent) => void;
     onPrevious?: (event: React.SyntheticEvent) => void;
     onScroll?: ({ index }: {

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

@@ -1 +1 @@
-{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../src/ebay-carousel/carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAY,cAAc,EAAE,EAAE,EAA+C,MAAM,OAAO,CAAA;AAQxG,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,KAAK,IAAI,CAAC;IAC/C,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,KAAK,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE;;KAAA,KAAK,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE;;KAAA,KAAK,IAAI,CAAC;IAC9B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,KAAK,IAAI,CAAA;IAC9C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,KAAK,IAAI,CAAA;CAClD,CAAC;AAMF,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,aAAa,CA0GnC,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../src/ebay-carousel/carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAY,cAAc,EAAE,EAAE,EAA+C,MAAM,OAAO,CAAA;AAaxG,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,KAAK,IAAI,CAAC;IAC/C,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,KAAK,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE;;KAAA,KAAK,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE;;KAAA,KAAK,IAAI,CAAC;IAC9B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,KAAK,IAAI,CAAA;IAC9C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,KAAK,IAAI,CAAA;CAClD,CAAC;AAEF,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,aAAa,CAoMnC,CAAA;AAED,eAAe,YAAY,CAAA"}

package/ebay-carousel/helpers.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ReactElement, ReactNode, RefObject } from 'react';
 import { ListItemRef, MovementDirection, RelativeRect } from './types';
 export declare function getRelativeRects(el: Element): RelativeRect;
@@ -12,4 +13,17 @@ export declare const alterChildren: (children: ReactNode, itemsRef: RefObject<Ar
 export declare const getSlide: (activeIndex: number, itemsPerSlide?: number, nextIndex?: number) => undefined | number;
 export declare const getNextIndex: (direction: MovementDirection, activeIndex: number, items?: ListItemRef[], slideWidth?: number, itemsPerSlide?: number) => number;
 export declare const getClosestIndex: (scrollLeft: number, items: ListItemRef[], slideWidth: number, itemsPerSlide?: number, gap?: number) => number;
+/**
+ * This function will animate the carousel to loop back to the first slide and vice versa
+ */
+export declare function animateCarouselLoop({ direction, nextIndex, currentIndex, itemsRef, slideWidth, gap, onAnimationStart, onAnimationEnd }: {
+    direction: 'RIGHT' | 'LEFT';
+    nextIndex: number;
+    currentIndex: number;
+    itemsRef: React.MutableRefObject<ListItemRef[]>;
+    slideWidth: number;
+    gap: number;
+    onAnimationStart: () => void;
+    onAnimationEnd: () => void;
+}): void;
 //# sourceMappingURL=helpers.d.ts.map

package/ebay-carousel/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/ebay-carousel/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0B,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAClF,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAEtE,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,OAAO,GAAG,YAAY,CAW1D;AAED,eAAO,MAAM,iBAAiB,OAAQ,OAAO,KAAG,OAAuD,CAAA;AAEvG,eAAO,MAAM,YAAY,UAAW,WAAW,EAAE,cAAc,MAAM,KAAG,MAOvE,CAAA;AAED,eAAO,MAAM,SAAS,UAAW,WAAW,EAAE,SAAS,MAAM,cAAc,MAAM,KAAG,MAMnF,CAAA;AAED,eAAO,MAAM,aAAa,aACZ,SAAS,YACT,UAAU,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC,kBAC9B,MAAM,eACT,MAAM,WACV,MAAM,QACT,MAAM,KAAG,YAAY,EAwB7B,CAAA;AAgBF;;;GAGG;AACH,eAAO,MAAM,QAAQ,gBAAiB,MAAM,kBAAkB,MAAM,yBAA4B,SAAS,GAAG,MAM3G,CAAA;AAID,eAAO,MAAM,YAAY,cACV,iBAAiB,eACf,MAAM,UACX,WAAW,EAAE,eACR,MAAM,kBACH,MAAM,KAAG,MAyB5B,CAAA;AAED,eAAO,MAAM,eAAe,eACZ,MAAM,SACX,WAAW,EAAE,cACR,MAAM,gCAEZ,MAAM,KAAG,MA0BlB,CAAA"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/ebay-carousel/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAA0B,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAClF,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAEtE,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,OAAO,GAAG,YAAY,CAW1D;AAED,eAAO,MAAM,iBAAiB,OAAQ,OAAO,KAAG,OAAuD,CAAA;AAEvG,eAAO,MAAM,YAAY,UAAW,WAAW,EAAE,cAAc,MAAM,KAAG,MAOvE,CAAA;AAED,eAAO,MAAM,SAAS,UAAW,WAAW,EAAE,SAAS,MAAM,cAAc,MAAM,KAAG,MAMnF,CAAA;AAED,eAAO,MAAM,aAAa,aACZ,SAAS,YACT,UAAU,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC,kBAC9B,MAAM,eACT,MAAM,WACV,MAAM,QACT,MAAM,KAAG,YAAY,EAuB7B,CAAA;AAgBF;;;GAGG;AACH,eAAO,MAAM,QAAQ,gBAAiB,MAAM,kBAAkB,MAAM,yBAA4B,SAAS,GAAG,MAM3G,CAAA;AAID,eAAO,MAAM,YAAY,cACV,iBAAiB,eACf,MAAM,UACX,WAAW,EAAE,eACR,MAAM,kBACH,MAAM,KAAG,MAyB5B,CAAA;AAED,eAAO,MAAM,eAAe,eACZ,MAAM,SACX,WAAW,EAAE,cACR,MAAM,gCAEZ,MAAM,KAAG,MA0BlB,CAAA;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,EAChC,SAAS,EACT,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,GAAG,EACH,gBAAgB,EAChB,cAAc,EACjB,EAAE;IACC,SAAS,EAAE,OAAO,GAAG,MAAM,CAAA;IAC3B,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,EAAE,MAAM,CAAA;IACpB,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,CAAA;IAC/C,UAAU,EAAE,MAAM,CAAA;IAClB,GAAG,EAAE,MAAM,CAAA;IACX,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B,cAAc,EAAE,MAAM,IAAI,CAAA;CAC7B,GAAG,IAAI,CA4EP"}

package/ebay-carousel/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("../tslib.es6-C4EgNkz1.js"),s=require("react"),R=require("classnames"),A=require("../icon-CeLPlCml.js"),M=require("../debounce-BQsYxxOL.js"),W=require("../forwardRef-irqyO_PF.js");require("../array.polyfill.flat-5BAolFdk.js");const D={prev:"chevronLeft16",next:"chevronRight16"},V={prev:"LEFT",next:"RIGHT"},k=({type:e,label:n,hidden:t,disabled:r,onClick:l})=>{const c=o=>{l(o,{direction:V[e]})};return s.createElement("button",{className:R("carousel__control",`carousel__control--${e}`),"aria-label":n,"aria-disabled":r,disabled:r,onClick:c},s.createElement(A.EbayIcon,{className:R("icon",`icon--carousel-${e}`),focusable:!1,name:D[e],"aria-hidden":t}))};function H(e){const n=e.parentElement,t=n?n.firstElementChild.getBoundingClientRect().left:0,{left:r,right:l}=e.getBoundingClientRect();return{left:r-t,right:l-t}}const G=e=>getComputedStyle(e).overflowX!=="visible",y=(e,n)=>{if(!e.length)return 0;const t=e[e.length-1];return Math.max(t.right-n,0)||0},X=(e,n,t)=>e.length&&Math.min(e[n].left,y(e,t))||0,J=(e,n,t,r,l,c)=>s.Children.map(e,(o,i)=>{const{style:u={}}=o.props;let f;if(t){const a=t+t%1;f=`calc(${100/a}% - ${(a-1)*c/a}px)`}const d=t?i%t===0:!0;return s.cloneElement(o,Object.assign(Object.assign({},o.props),{slideWidth:r,offset:l,ref:a=>{n.current[i]=a},className:d?"carousel__snap-point":o.props.className,style:Object.assign(Object.assign({},u),{width:f||u.width,marginRight:c&&i!==s.Children.count(e)-1?`${c}px`:u.marginRight})}))}),j=(e,n,t)=>{if(e>0){let r=e;return r%=n.length||1,r-=r%(t||1),r=Math.abs(r),r}return 0},K=(e,n,t=e)=>{if(n)return Math.ceil(t/n)},Q=e=>e==="LEFT"?-1:1,U=(e,n,t,r,l)=>{let c=n,o;if(e==="LEFT"&&c===0)c=t.length-1;else{do{const i=Q(e);o=t[c+=i]}while(o&&o.fullyVisible);if(e==="LEFT"&&!l){const i=o.right-r;do o=t[--c];while(o&&o.left>=i);c+=1}}return j(c,t,l)},Y=(e,n,t,r=1,l)=>{let c;if(e>=y(n,t)-l)c=n.length-1;else{const o=n.length;let i=0,u=Math.ceil(o/r)-1;for(;u-i>1;){const a=Math.floor((i+u)/2);e>n[a*r].left?i=a:u=a}const f=Math.abs(e-n[i*r].left),d=Math.abs(e-n[u*r].left);c=j((f>d?u:i)*r,n,r)}return c},Z=(e,n)=>{let t,r,l;return function c(){const{scrollLeft:o}=e;if(l!==o){l=o,t=setTimeout(()=>{r=requestAnimationFrame(c)},90);return}n(l)}(),()=>{clearTimeout(t),cancelAnimationFrame(r)}},P=typeof window<"u"&&"scrollBehavior"in document.body.style;function B(e,n,t){if(P)return e.scrollTo({left:n}),Z(e,t);let r,l,c=requestAnimationFrame(a=>{const{scrollLeft:S}=e,m=n-S,E=450;(function b(p){const g=p-a;if(g>E)return e.scrollLeft=n,o(),t();e.scrollLeft=ee(g/E)*m+S,c=requestAnimationFrame(b)})(a)});return e.addEventListener("touchstart",i),o;function o(){cancelAnimationFrame(c),r===void 0?f():(l&&l(),d())}function i(){o(),r=e.scrollLeft,e.addEventListener("touchend",u)}function u(){d(),r===e.scrollLeft&&(l=B(e,n,t))}function f(){e.removeEventListener("touchstart",i)}function d(){e.removeEventListener("touchend",u)}}function ee(e){return e<.5?2*e*e:-1+(4-2*e)*e}const te=({gap:e=16,itemsPerSlide:n,slideWidth:t,offset:r,activeIndex:l,nextControlDisabled:c,className:o,itemsRef:i,children:u,onSetActiveIndex:f,onScroll:d})=>{const[a,S]=s.useState(0),[m,E]=s.useState(!1),[b,p]=s.useState(!1),g=s.useRef(null),w=s.useRef(null);s.useEffect(()=>{if(!s.Children.count(u)||!g.current)return;if(m){E(!1);return}const h=g.current;G(h)?(p(!0),B(h,r,()=>p(!1))):S(r)},[r]);const C=s.useCallback(()=>{const T=g.current.scrollLeft,h=Y(T,i.current,t,n,e);h!==l&&(E(!0),f(h),d({index:h}))},[g.current,i.current,t,l,f]),v=()=>{w.current&&clearTimeout(w.current),w.current=setTimeout(()=>{b||C()},640)};return s.createElement("div",{className:R("carousel__viewport",{"carousel__viewport--mask":!c},o)},s.createElement("ul",{className:"carousel__list",ref:g,onScroll:v,style:{transform:`translate3d(${-a}px, 0, 0)`}},J(u,i,n,t,r,e)))},ne=e=>{var{gap:n=16,index:t=0,itemsPerSlide:r,a11yPreviousText:l,a11yNextText:c,onScroll:o=()=>{},onNext:i=()=>{},onPrevious:u=()=>{},onSlide:f=()=>{},className:d,children:a}=e,S=q.__rest(e,["gap","index","itemsPerSlide","a11yPreviousText","a11yNextText","onScroll","onNext","onPrevious","onSlide","className","children"]);const[m,E]=s.useState(t),[b,p]=s.useState(0),[g,w]=s.useState(0),C=s.useRef(null),v=s.useRef([]),T=s.Children.count(a),h=Math.floor(r)||void 0,L=T<=h,$=L||g===0,N=L||g===y(v.current,b),_=()=>{if(!C.current)return;const{width:x}=C.current.getBoundingClientRect();p(x)};s.useEffect(()=>(window.addEventListener("resize",M.debounce(_,16)),()=>{window.removeEventListener("resize",M.debounce(_,16))}),[]),s.useEffect(()=>{w(X(v.current,m,b))},[m,b]),s.useEffect(()=>{t>=0&&t<=T-1&&E(t)},[t]),s.useEffect(()=>{v.current=v.current.splice(0,T)},[a]),s.useEffect(()=>{const{width:x}=C.current.getBoundingClientRect();p(x)},[C.current]);const I=(x,{direction:O})=>{const F=U(O,m,v.current,b,h),z=K(m,h,F);E(F),O==="LEFT"?u(x):i(x),f({slide:z})};return s.createElement("div",Object.assign({className:R("carousel",d,{"carousel--slides":h,"carousel--peek":h%1===0})},S),s.createElement("div",{ref:C,className:"carousel__container"},s.createElement(k,{label:l,type:"prev",disabled:$,onClick:I}),s.createElement(te,{itemsRef:v,offset:g,gap:n,itemsPerSlide:h,nextControlDisabled:N,activeIndex:m,onScroll:o,onSetActiveIndex:E,slideWidth:b},a),s.createElement(k,{type:"next",label:c,disabled:N,onClick:I})))},re=e=>{var{slideWidth:n,offset:t,forwardedRef:r,children:l}=e,c=q.__rest(e,["slideWidth","offset","forwardedRef","children"]);const o=s.useRef(),[i,u]=s.useState(!1);return s.useImperativeHandle(r,()=>{if(!o.current)return;const{left:f,right:d}=H(o.current),a=f===void 0||f-t>=-.01&&d-t<=n+.01;return u(a),{left:f,right:d,fullyVisible:a}},[n,t]),s.createElement("li",Object.assign({ref:o,"aria-hidden":!i},c),l)},se=W.withForwardRef(re);exports.EbayCarousel=ne;exports.EbayCarouselItem=se;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Y=require("../tslib.es6-C4EgNkz1.js"),s=require("react"),k=require("classnames"),Z=require("../icon-CeLPlCml.js"),Q=require("../debounce-BQsYxxOL.js"),oe=require("react-dom"),le=require("../forwardRef-irqyO_PF.js");require("../array.polyfill.flat-5BAolFdk.js");const ae={prev:"chevronLeft16",next:"chevronRight16"},ce={prev:"LEFT",next:"RIGHT"},W=({type:e,label:n,hidden:t,disabled:r,onClick:a})=>{const c=l=>{a(l,{direction:ce[e]})};return s.createElement("button",{className:k("carousel__control",`carousel__control--${e}`),"aria-label":n,"aria-disabled":r,disabled:r,onClick:c},s.createElement(Z.EbayIcon,{className:k("icon",`icon--carousel-${e}`),focusable:!1,name:ae[e],"aria-hidden":t}))};function ie(e){const n=e.parentElement,t=n?n.firstElementChild.getBoundingClientRect().left:0,{left:r,right:a}=e.getBoundingClientRect();return{left:r-t,right:a-t}}const ue=e=>getComputedStyle(e).overflowX!=="visible",M=(e,n)=>{if(!e.length)return 0;const t=e[e.length-1];return Math.max(t.right-n,0)||0},fe=(e,n,t)=>e.length&&Math.min(e[n].left,M(e,t))||0,de=(e,n,t,r,a,c)=>s.Children.map(e,(l,u)=>{const{style:f={}}=l.props;let i;if(t){const o=t+t%1;i=`calc(${100/o}% - ${(o-1)*c/o}px)`}const d=t?u%t===0:!0;return s.cloneElement(l,{slideWidth:r,offset:a,ref:o=>{n.current[u]=o},className:d?"carousel__snap-point":l.props.className,style:Object.assign(Object.assign({},f),{width:i||f.width,marginRight:c&&u!==s.Children.count(e)-1?`${c}px`:f.marginRight})})}),ee=(e,n,t)=>{if(e>0){let r=e;return r%=n.length||1,r-=r%(t||1),r=Math.abs(r),r}return 0},he=(e,n,t=e)=>{if(n)return Math.ceil(t/n)},me=e=>e==="LEFT"?-1:1,ye=(e,n,t,r,a)=>{let c=n,l;if(e==="LEFT"&&c===0)c=t.length-1;else{do{const u=me(e);l=t[c+=u]}while(l&&l.fullyVisible);if(e==="LEFT"&&!a){const u=l.right-r;do l=t[--c];while(l&&l.left>=u);c+=1}}return ee(c,t,a)},Ee=(e,n,t,r=1,a)=>{let c;if(e>=M(n,t)-a)c=n.length-1;else{const l=n.length;let u=0,f=Math.ceil(l/r)-1;for(;f-u>1;){const o=Math.floor((u+f)/2);e>n[o*r].left?u=o:f=o}const i=Math.abs(e-n[u*r].left),d=Math.abs(e-n[f*r].left);c=ee((i>d?f:u)*r,n,r)}return c};function ge({direction:e,nextIndex:n,currentIndex:t,itemsRef:r,slideWidth:a,gap:c,onAnimationStart:l,onAnimationEnd:u}){if(e==="RIGHT"&&n<t){let i=r.current[t].element.closest("ul");i.style.transition="none";const d=M(r.current,a)+a+c;for(let o=t;o>n;o--)r.current[o].element.style.transform=`translateX(${-d}px)`;i.style.transform=`translate3d(${a+c}px, 0, 0)`,l(),requestAnimationFrame(()=>{i.style.transition="",i.style.transform="translate3d(0, 0, 0)",i=null}),i.addEventListener("transitionend",()=>{requestAnimationFrame(()=>{for(let o=t;o>n;o--)r.current[o].element.style.transform="";u()})},{once:!0})}else if(e==="LEFT"&&n>t){let i=r.current[t].element.closest("ul");i.style.transition="none";const d=M(r.current,a)+a+c;for(let o=t;o<n;o++)r.current[o].element.style.transform=`translateX(${d}px)`;i.style.transform=`translate3d(${-d}px, 0, 0)`,l(),requestAnimationFrame(()=>{i.style.transition="",i.style.transform=`translate3d(${-d+a+c}px, 0, 0)`,i=null}),i.addEventListener("transitionend",()=>{requestAnimationFrame(()=>{for(let o=t;o<n;o++)r.current[o].element.style.transform="";u()})},{once:!0})}}const pe=(e,n)=>{let t,r,a;return function c(){const{scrollLeft:l}=e;if(a!==l){a=l,t=setTimeout(()=>{r=requestAnimationFrame(c)},90);return}n(a)}(),()=>{clearTimeout(t),cancelAnimationFrame(r)}},ve=typeof window<"u"&&"scrollBehavior"in document.body.style;function te(e,n,t){if(ve)return e.scrollTo({left:n}),pe(e,t);let r,a,c=requestAnimationFrame(o=>{const{scrollLeft:L}=e,x=n-L,w=450;(function _(v){const b=v-o;if(b>w)return e.scrollLeft=n,l(),t();e.scrollLeft=be(b/w)*x+L,c=requestAnimationFrame(_)})(o)});return e.addEventListener("touchstart",u),l;function l(){cancelAnimationFrame(c),r===void 0?i():(a&&a(),d())}function u(){l(),r=e.scrollLeft,e.addEventListener("touchend",f)}function f(){d(),r===e.scrollLeft&&(a=te(e,n,t))}function i(){e.removeEventListener("touchstart",u)}function d(){e.removeEventListener("touchend",f)}}function be(e){return e<.5?2*e*e:-1+(4-2*e)*e}const Se=({gap:e=16,itemsPerSlide:n,slideWidth:t,offset:r,activeIndex:a,nextControlDisabled:c,isAutoplayEnabled:l,className:u,itemsRef:f,children:i,onSetActiveIndex:d,onScroll:o})=>{const[L,x]=s.useState(0),[w,_]=s.useState(!1),[v,b]=s.useState(!1),m=s.useRef(null),S=s.useRef(null);s.useEffect(()=>{if(!s.Children.count(i)||!m.current)return;if(w){_(!1);return}const g=m.current;ue(g)?(b(!0),te(g,r,()=>b(!1))):x(r)},[r]);const E=s.useCallback(()=>{const R=m.current.scrollLeft,g=Ee(R,f.current,t,n,e);g!==a&&(_(!0),d(g),o({index:g}))},[m.current,f.current,t,a,d]),q=()=>{S.current&&clearTimeout(S.current),S.current=setTimeout(()=>{v||E()},640)};return s.createElement("div",{className:k("carousel__viewport",{"carousel__viewport--mask":!c&&!l},u)},s.createElement("ul",{className:"carousel__list",ref:m,onScroll:q,style:{transform:`translate3d(${-L}px, 0, 0)`}},de(i,f,n,t,r,e)))},Te=oe.flushSync||(e=>e()),Ce=e=>{var{gap:n=16,index:t=0,itemsPerSlide:r,a11yPreviousText:a,a11yNextText:c,a11yPauseText:l,a11yPlayText:u,autoplay:f,onScroll:i=()=>{},onNext:d=()=>{},onPrevious:o=()=>{},onSlide:L=()=>{},onPlay:x=()=>{},onPause:w=()=>{},className:_,children:v}=e,b=Y.__rest(e,["gap","index","itemsPerSlide","a11yPreviousText","a11yNextText","a11yPauseText","a11yPlayText","autoplay","onScroll","onNext","onPrevious","onSlide","onPlay","onPause","className","children"]);const[m,S]=s.useState(t),[E,q]=s.useState(0),[R,g]=s.useState(0),[O,z]=s.useState(!1),F=s.useRef(null),T=s.useRef([]),A=s.Children.count(v),C=Math.floor(r)||void 0,D=A<=C,p=!!f,ne=D||R===0&&!p,j=D||R===M(T.current,E)&&!p,H=()=>{if(!F.current)return;const{width:h}=F.current.getBoundingClientRect();q(h)};s.useEffect(()=>(window.addEventListener("resize",Q.debounce(H,16)),()=>{window.removeEventListener("resize",Q.debounce(H,16))}),[]);const[V,G]=s.useState(!1);s.useEffect(()=>{V||g(fe(T.current,m,E))},[m,E,V]),s.useEffect(()=>{t>=0&&t<=A-1&&S(t)},[t]),s.useEffect(()=>{T.current=T.current.splice(0,A)},[v]),s.useEffect(()=>{const{width:h}=F.current.getBoundingClientRect();q(h)},[F.current]);const[N,X]=s.useState(!1);s.useEffect(()=>{var h,y;const I=!!(!((y=(h=window.matchMedia)===null||h===void 0?void 0:h.call(window,"(prefers-reduced-motion: reduce)"))===null||y===void 0)&&y.matches);X(I)},[]);const re=h=>{X(!N),N?x(h):w(h)},U=s.useRef(m);U.current=m;const J=(h,y)=>{const I=U.current,P=ye(h,I,T.current,E,y),se=he(I,y,P);L({slide:se}),p&&ge({direction:h,nextIndex:P,currentIndex:I,itemsRef:T,slideWidth:E,gap:n,onAnimationStart:()=>G(!0),onAnimationEnd:()=>G(!1)}),Te(()=>S(P))};s.useEffect(()=>{if(!p||N||O)return;const y=setInterval(()=>{J("RIGHT",C)},typeof f=="number"?f:4e3);return()=>clearInterval(y)},[p,N,C,O]);const K=(h,{direction:y})=>{J(y,C),y==="LEFT"?o(h):d(h)},$=()=>z(!0),B=()=>z(!1);return s.createElement("div",Object.assign({className:k("carousel",_,{"carousel--slides":C,"carousel--peek":C%1===0,carousel__autoplay:p})},b),s.createElement("div",{ref:F,className:"carousel__container",onFocusCapture:$,onMouseEnter:$,onTouchStartCapture:$,onBlurCapture:B,onMouseLeave:B,onTouchEndCapture:B},s.createElement(W,{label:a,type:"prev",disabled:ne,onClick:K}),s.createElement(Se,{itemsRef:T,offset:R,gap:n,itemsPerSlide:C,nextControlDisabled:j,isAutoplayEnabled:p,activeIndex:m,onScroll:i,onSetActiveIndex:S,slideWidth:E},v),s.createElement(W,{type:"next",label:c,disabled:j,onClick:K}),p?s.createElement("button",{className:"carousel__playback",type:"button",onClick:re,"aria-label":N?u:l},s.createElement(Z.EbayIcon,{name:N?"play24":"pause24"})):null))},Le=e=>{var{slideWidth:n,offset:t,forwardedRef:r,children:a}=e,c=Y.__rest(e,["slideWidth","offset","forwardedRef","children"]);const l=s.useRef(),[u,f]=s.useState(!1);return s.useImperativeHandle(r,()=>{if(!l.current)return;const{left:i,right:d}=ie(l.current),o=i===void 0||i-t>=-.01&&d-t<=n+.01;return f(o),{element:l.current,left:i,right:d,fullyVisible:o}},[n,t]),s.createElement("li",Object.assign({ref:l,"aria-hidden":!u},c),a)},we=le.withForwardRef(Le);exports.EbayCarousel=Ce;exports.EbayCarouselItem=we;

package/ebay-carousel/types.d.ts

@@ -1,7 +1,9 @@
+import { ComponentRef } from 'react';
 export type CarouselControlType = 'prev' | 'next';
 export type MovementDirection = 'LEFT' | 'RIGHT' | 'NONE';
 export type RelativeRect = Pick<ClientRect, 'left' | 'right'>;
 export type ListItemRef = {
+    element: ComponentRef<'li'>;
     left: number;
     right: number;
     fullyVisible: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-carousel/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,MAAM,CAAA;AAEjD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA;AAEzD,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,GAAC,OAAO,CAAC,CAAA;AAE3D,MAAM,MAAM,WAAW,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,OAAO,CAAC;CACzB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-carousel/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAEpC,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,MAAM,CAAA;AAEjD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA;AAEzD,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,GAAC,OAAO,CAAC,CAAA;AAE3D,MAAM,MAAM,WAAW,GAAG;IACtB,OAAO,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,OAAO,CAAC;CACzB,CAAA"}

package/ebay-checkbox/README.md

@@ -9,7 +9,12 @@ yarn add @ebay/ui-core-react
 ```
 ### Import JS
 ```jsx harmony
-import { EbayCheckbox } from '@ebay/ui-core-react/ebay-checkbox'
+import {
+    EbayCheckbox,
+    type CheckboxChangeHandler,
+    type CheckboxFocusHandler,
+    type CheckboxKeyDownHandler
+} from '@ebay/ui-core-react/ebay-checkbox'
 ```
 
 ## Import following styles from Skin
@@ -22,17 +27,24 @@ import '@ebay/skin/checkbox'
 import '@ebay/skin/checkbox.css'
 ```
 
-## Import EbaySvg
+### Import icons
 
-After you render the EbayCheckbox component in your application, if you do not see the checkbox svg, you should add import and render EbaySvg component once at the root level of your application (usually layout file).
+Add the below icons to the `EbaySvg` component.
 
-```jsx
-import { EbaySvg } from "@ebay/ui-core-react/ebay-svg";
+Note: Make sure that `EbaySvg` is only rendered on the server so it does not affect the client bundle size.
 
-// Render this in your layout or root level component.
-<EbaySvg /> 
-```
+```tsx
+<EbaySvg
+    icons={[
+        "checkboxChecked18",
+        "checkboxUnchecked18",
 
+        // If using large checkboxes
+        "checkboxChecked24",
+        "checkboxUnchecked24",
+    ]}
+/>
+```
 
 ```jsx
 import { EbayLabel } from '@ebay/ui-core-react/ebay-field';

package/ebay-checkbox/checkbox.d.ts

@@ -1,23 +1,12 @@
 import React, { ComponentProps, FC } from 'react';
-import { EbayChangeEventHandler, EbayFocusEventHandler, EbayKeyboardEventHandler } from '../common/event-utils/types';
-type Size = 'default' | 'large';
-type InputProps = Omit<ComponentProps<'input'>, 'size' | 'onChange' | 'onFocus' | 'onKeyDown'>;
-type EbayCheckboxProps = {
+import { CheckboxChangeHandler, CheckboxFocusHandler, CheckboxKeyDownHandler, Size } from './types';
+export type EbayCheckboxProps = Omit<ComponentProps<'input'>, 'size' | 'onChange' | 'onFocus' | 'onKeyDown'> & {
     size?: Size;
-    onChange?: EbayChangeEventHandler<HTMLInputElement, {
-        value: string | number;
-        checked: boolean;
-    }>;
-    onFocus?: EbayFocusEventHandler<HTMLInputElement, {
-        value: string | number;
-        checked: boolean;
-    }>;
-    onKeyDown?: EbayKeyboardEventHandler<HTMLInputElement, {
-        value: string | number;
-        checked: boolean;
-    }>;
+    onChange?: CheckboxChangeHandler;
+    onFocus?: CheckboxFocusHandler;
+    onKeyDown?: CheckboxKeyDownHandler;
     inputRef?: React.LegacyRef<HTMLInputElement>;
 };
-declare const EbayCheckbox: FC<InputProps & EbayCheckboxProps>;
+declare const EbayCheckbox: FC<EbayCheckboxProps>;
 export default EbayCheckbox;
 //# sourceMappingURL=checkbox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/ebay-checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA6B,cAAc,EAAE,EAAE,EAAuC,MAAM,OAAO,CAAA;AAKjH,OAAO,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAA;AAErH,KAAK,IAAI,GAAG,SAAS,GAAG,OAAO,CAAA;AAC/B,KAAK,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,WAAW,CAAC,CAAA;AAC9F,KAAK,iBAAiB,GAAG;IACrB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,sBAAsB,CAAC,gBAAgB,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAClG,OAAO,CAAC,EAAE,qBAAqB,CAAC,gBAAgB,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAChG,SAAS,CAAC,EAAE,wBAAwB,CAAC,gBAAgB,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IACrG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;CAChD,CAAA;AAID,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,UAAU,GAAG,iBAAiB,CAmEpD,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/ebay-checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA6B,cAAc,EAAE,EAAE,EAAuC,MAAM,OAAO,CAAA;AAKjH,OAAO,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAGnG,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,WAAW,CAAC,GAAG;IAC3G,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,qBAAqB,CAAC;IACjC,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,SAAS,CAAC,EAAE,sBAAsB,CAAC;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;CAChD,CAAA;AAID,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAmEvC,CAAA;AAED,eAAe,YAAY,CAAA"}

package/ebay-checkbox/index.d.ts

@@ -1,2 +1,3 @@
-export { default as EbayCheckbox } from './checkbox';
+export { default as EbayCheckbox, type EbayCheckboxProps } from './checkbox';
+export * from './types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAC5E,cAAc,SAAS,CAAA"}

package/ebay-checkbox/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("../tslib.es6-C4EgNkz1.js"),c=require("react"),F=require("classnames"),a=require("../icon-CeLPlCml.js"),O=require("../label-BRztS0pw.js"),I=require("../utils-C9NL3q0j.js"),w=o=>typeof o<"u",D=o=>{var{id:d,size:t="default",className:i,style:u,checked:r,defaultChecked:k=!1,onChange:b=()=>{},onFocus:m=()=>{},onKeyDown:g=()=>{},children:h,inputRef:v}=o,y=q.__rest(o,["id","size","className","style","checked","defaultChecked","onChange","onFocus","onKeyDown","children","inputRef"]);const[C,_]=c.useState(k),x=n=>{const e=n.target;b(n,{value:e==null?void 0:e.value,checked:!!(e!=null&&e.checked)}),_(e==null?void 0:e.checked)},E=n=>{var e,l;return m(n,{value:(e=n.target)===null||e===void 0?void 0:e.value,checked:!!(!((l=n.target)===null||l===void 0)&&l.checked)})},p=n=>{const e=n.target;g(n,{value:e.value,checked:!!e.checked})},f=F("checkbox",i,{"checkbox--large":t==="large"}),N=t==="large"?c.createElement(a.EbayIcon,{name:"checkboxChecked24",className:"checkbox__checked"}):c.createElement(a.EbayIcon,{name:"checkboxChecked18",className:"checkbox__checked"}),j=t==="large"?c.createElement(a.EbayIcon,{name:"checkboxUnchecked24",className:"checkbox__unchecked"}):c.createElement(a.EbayIcon,{name:"checkboxUnchecked18",className:"checkbox__unchecked"}),s=I.findComponent(h,O.Label);return c.createElement(c.Fragment,null,c.createElement("span",{className:f,style:Object.assign(Object.assign({},u),{alignItems:"center"})},c.createElement("input",Object.assign({},y,{id:d,className:"checkbox__control",type:"checkbox",checked:w(r)?r:C,onChange:x,onFocus:E,onKeyDown:p,ref:v})),c.createElement("span",{className:"checkbox__icon",hidden:!0},N,j)),s?c.cloneElement(s,Object.assign(Object.assign({},s.props),{position:"end",htmlFor:d})):h)};exports.EbayCheckbox=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../checkbox-Bb3s3Jof.js");exports.EbayCheckbox=e.EbayCheckbox;

package/ebay-checkbox/types.d.ts

@@ -0,0 +1,10 @@
+import type { EbayChangeEventHandler, EbayFocusEventHandler, EbayKeyboardEventHandler } from '../events';
+export type Size = 'default' | 'large';
+export type EventData = {
+    value: string | number;
+    checked: boolean;
+};
+export type CheckboxChangeHandler = EbayChangeEventHandler<HTMLInputElement, EventData>;
+export type CheckboxFocusHandler = EbayFocusEventHandler<HTMLInputElement, EventData>;
+export type CheckboxKeyDownHandler = EbayKeyboardEventHandler<HTMLInputElement, EventData>;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-checkbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAA;AAExG,MAAM,MAAM,IAAI,GAAG,SAAS,GAAG,OAAO,CAAA;AAEtC,MAAM,MAAM,SAAS,GAAG;IACpB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;CACpB,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG,sBAAsB,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC;AACxF,MAAM,MAAM,oBAAoB,GAAG,qBAAqB,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC;AACtF,MAAM,MAAM,sBAAsB,GAAG,wBAAwB,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC"}

package/ebay-combobox/README.md

@@ -0,0 +1,61 @@
+# EbayCombobox
+
+## Demo
+
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/docs/form-input-ebay-combobox--docs
+
+## Usage
+
+### Import JS
+
+```jsx harmony
+import { EbayCombobox, EbayComboboxOption, EbayComboboxButton } from "@ebay/ui-core-react/ebay-combobox";
+```
+
+### Import following styles from SKIN
+
+```jsx harmony
+import "@ebay/skin/combobox";
+```
+
+### If tokens haven't been added to the project at a higher level, make sure to import
+
+```jsx harmony
+import "@ebay/skin/tokens";
+```
+
+### Or import styles using SCSS/CSS
+
+```jsx harmony
+import "@ebay/skin/combobox.css";
+```
+
+```jsx harmony
+<EbayCombobox>
+    <EbayComboboxButton>
+        <EbayIcon name="clear16" />
+    </EbayComboboxButton>
+    <EbayComboboxOption>Option 1</EbayComboboxOption>
+    <EbayComboboxOption>Option 2</EbayComboboxOption>
+    <EbayComboboxOption>Option 3</EbayComboboxOption>
+</EbayCombobox>
+```
+
+## Attributes
+
+| Name                  | Type     | Required | Description                                                                                                                                                                                   | Data                                                            |
+| --------------------- | -------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- |
+| `borderless`          | Boolean  | No       | whether button has borders                                                                                                                                                                    |                                                                 |
+| `disabled`            | Boolean  | No       | sets the disabled attribute of the input                                                                                                                                                      |                                                                 |
+| `expanded`            | Boolean  | No       | sets whether the listbox is expanded                                                                                                                                                          |                                                                 |
+| `autocomplete`        | String   | No       | default is `none`; available values are `none` or `list`. For list, will automatically filter results while typing.                                                                           |                                                                 |
+| `listSelection`       | Boolean  | No       | default is `automatic`; available values are `automatic`, `manual`. If set to automatic will automatically fill in the input with the currently highlighted item when using the up/down keys. |                                                                 |
+| `floatingLabel`       | Boolean  | No       | The label to show on the combobox which moves up when focused                                                                                                                                 |                                                                 |
+| `fluid`               | Boolean  | No       | If true, combobox will span the entire width of it's container                                                                                                                                |                                                                 |
+| `onCollapse`          | Function | No       | Collapsed content                                                                                                                                                                             |                                                                 |
+| `onExpand`            | Function | No       | Expanded content                                                                                                                                                                              |                                                                 |
+| `onFloatingLabelInit` | Function | No       | when floating label finishes initializing                                                                                                                                                     |                                                                 |
+| `onChange`            | Function | No       | same as the `onChange` event, which fires on blur                                                                                                                                             | `event, { currentInputValue, selectedOption: { text, value } }` |
+| `onInputChange`       | Function | No       | same as the `onInpuChanget` event, which fires with every keypress                                                                                                                            | `event, { currentInputValue, selectedOption: { text, value } }` |
+| `onSelect`            | Function | No       | similar to a `<select>`, which fires when an option is clicked or selected                                                                                                                    | `event, { currentInputValue, selectedOption: { text, value } }` |
+| `onFocus`             | Function | No       | same as the `onFocus` event, which fires on focus                                                                                                                                             | `event, { currentInputValue, selectedOption: { text, value } }` |