@ebay/ui-core-react 9.4.0 → 9.6.0

package/ebay-badge/README.md

@@ -1,41 +1,5 @@
 # EbayBadge
 
-## Demo
+## Documentation
 
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/graphics-icons-ebay-badge--default)
-
-## Usage
-
-```
-yarn add @ebay/ui-core-react
-```
-
-### Import JS
-
-```jsx harmony
-import { EbayBadge } from "@ebay/ui-core-react/ebay-badge";
-```
-
-## Import following styles from Skin
-
-```jsx harmony
-import "@ebay/skin/badge";
-```
-
-## ...or using SCSS/CSS
-
-```jsx harmony
-import "@ebay/skin/badge.css";
-```
-
-```jsx harmony
-<EbayBadge aria-label="1 unread item">1</EbayBadge>
-```
-
-## Attributes
-
-| Name         | Type   | Stateful | Description |
-| ------------ | ------ | -------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------- |
-| `type`       | String | No       | Yes         | (default) `img`, `menu`, `icon`                                                                                               |
-| `number`     | Number | No       | Yes         | Used as the number to be placed in the badge                                                                                  |
-| `aria-label` | String | No       | Yes         | Required only when not a part of a menu or a button. A descriptive label of what the badge represents (e.g. "5 unread items") |
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/graphics-icons-ebay-badge--docs)

package/ebay-badge/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../badge-BWhBKWCu.js");exports.EbayBadge=e.EbayBadge;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../badge-DuE-Ehip.js");exports.EbayBadge=e.EbayBadge;

package/ebay-bar-chart/README.md

@@ -0,0 +1,5 @@
+# EbayBarChart
+
+## Documentation
+
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/charts-ebay-bar-chart--docs)

package/ebay-bar-chart/bar-chart-tooltip.d.ts

@@ -0,0 +1,23 @@
+import type Highcharts from "highcharts";
+interface BarChartTooltipPropsStacked {
+    date: string;
+    data: Highcharts.Series[];
+    stacked: true;
+    x: number;
+}
+interface BarChartTooltipPropsNonStacked {
+    date: string;
+    data: Highcharts.Point & {
+        label?: string;
+    };
+    stacked: false;
+    x: number;
+}
+type BarChartTooltipProps = BarChartTooltipPropsStacked | BarChartTooltipPropsNonStacked;
+/**
+ * Generates the HTML string for the bar chart tooltip.
+ * This replaces the Marko subtemplate.marko from the core component.
+ */
+export declare function barChartTooltipHtml({ date, data, stacked, x }: BarChartTooltipProps): string;
+export {};
+//# sourceMappingURL=bar-chart-tooltip.d.ts.map

package/ebay-bar-chart/bar-chart-tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar-chart-tooltip.d.ts","sourceRoot":"","sources":["../../src/ebay-bar-chart/bar-chart-tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,UAAU,MAAM,YAAY,CAAC;AAIzC,UAAU,2BAA2B;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC;IAC1B,OAAO,EAAE,IAAI,CAAC;IACd,CAAC,EAAE,MAAM,CAAC;CACb;AAED,UAAU,8BAA8B;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,UAAU,CAAC,KAAK,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,OAAO,EAAE,KAAK,CAAC;IACf,CAAC,EAAE,MAAM,CAAC;CACb;AAED,KAAK,oBAAoB,GAAG,2BAA2B,GAAG,8BAA8B,CAAC;AAEzF;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,oBAAoB,GAAG,MAAM,CAsB5F"}

package/ebay-bar-chart/bar-chart.d.ts

@@ -0,0 +1,5 @@
+import { FC } from "react";
+import type { EbayBarChartProps } from "./types";
+declare const EbayBarChart: FC<EbayBarChartProps>;
+export default EbayBarChart;
+//# sourceMappingURL=bar-chart.d.ts.map

package/ebay-bar-chart/bar-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar-chart.d.ts","sourceRoot":"","sources":["../../src/ebay-bar-chart/bar-chart.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AAsB3C,OAAO,KAAK,EAAE,iBAAiB,EAAsB,MAAM,SAAS,CAAC;AAgRrE,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CA6DvC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/ebay-bar-chart/index.d.ts

@@ -0,0 +1,3 @@
+export { default as EbayBarChart } from "./bar-chart";
+export type { EbayBarChartProps, BarChartSeriesItem, BarChartDataPoint } from "./types";
+//# sourceMappingURL=index.d.ts.map

package/ebay-bar-chart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-bar-chart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,aAAa,CAAC;AACtD,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC"}

package/ebay-bar-chart/index.js

@@ -0,0 +1,14 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("../tslib.es6-BW4cJBUu.js"),b=require("react"),L=require("classnames"),x=require("@highcharts/react"),h=require("../shared-DrsztGqS.js"),S=require("../legend-CY_MXova.js"),y=require("highcharts");require("highcharts/modules/accessibility");require("highcharts/modules/pattern-fill");function w(i){i.wrap(i.seriesTypes.column.prototype,"translate",function(l){const a=this.options.top,r=this.options.bottom;l.call(this);for(const c of this.points){const o=c.shapeArgs;if(!o)continue;const e=o.x,s=o.width;let t=o.y,n=o.height-(r?0:4);n<0&&(n=o.height,t=t-4);const g=3;let p=i.relativeLength(a?g:0,s),f=i.relativeLength(a?g:0,s),d=i.relativeLength(r?g:0,s),m=i.relativeLength(r?g:0,s);const u=Math.min(s,n)/2;p>u&&(p=u),f>u&&(f=u),d>u&&(d=u),m>u&&(m=u),c.dlBox=o,c.shapeY=t,c.shapeType="path";const v=[["M",e+p,t],["L",e+s-f,t],["C",e+s-f/2,t,e+s,t+f/2,e+s,t+f],["L",e+s,t+n-d],["C",e+s,t+n-d/2,e+s-d/2,t+n,e+s-d,t+n],["L",e+m,t+n],["C",e+m/2,t+n,e,t+n-m/2,e,t+n-m],["L",e,t+p],["C",e,t+p/2,e+p/2,t,e+p,t],["Z"]];c.shapeArgs=Object.assign(Object.assign({},o),{d:v})}})}function C({date:i,data:l,stacked:a,x:r}){let c=`<b>${h.escapeHtml(i)}</b>`;if(a){const o=l;for(const e of o)for(const s of e.data)if(s.x===r){const t=s;c+='<div style="display: flex; justify-content: space-between; width: 100%; align-items: flex-start;">',c+=`${h.escapeHtml(e.name||"")}`,c+=`<span style="margin-left: 16px">${h.escapeHtml(t.label||"")}</span>`,c+="</div>"}}else{const o=l;c+=`<div><span>${h.escapeHtml(o.label||"")}</span></div>`}return c}S.ebayLegend(y);w(y);const O=`
+    .ebay-bar-chart {
+        width: 100%;
+    }
+    .ebay-bar-chart .highcharts-legend-item-hidden {
+        transition: fill 250ms;
+    }
+    .ebay-bar-chart .highcharts-legend-item-hidden .highcharts-point {
+        stroke-width: 0;
+    }
+    .highcharts-tooltip-container svg {
+        overflow: visible;
+    }
+`;function P(i,l){const a=Array.isArray(i)?i.map(r=>Object.assign({},r)):[Object.assign({},i)];return l?(a[0].bottom=!0,a[a.length-1].top=!0,a.forEach(r=>{r.group=":previous"})):a.forEach(r=>{r.top=!0,r.bottom=!0}),h.setSeriesColors(a),a}function k(i){return Math.max(0,...i.flatMap(l=>l.data.map(a=>a.y)))}function E(i,l){return{type:"datetime",labels:{format:i||"{value:%b %e}",align:"center",style:{color:h.labelsColor}},tickWidth:0,tickPositioner:l}}function H(i,l,a){let r=0;return{gridLineColor:h.gridColor,opposite:!0,reversedStacks:!1,labels:{format:l?void 0:"${text}",formatter:l?function(){return this.isFirst&&(r=-1),r=r+1,l[r]}:void 0,style:{color:h.labelsColor}},max:i,title:{enabled:!1},offset:0,tickPositioner:a}}function B(i){return{symbolRadius:2,enabled:Array.isArray(i)&&i.length>1,itemStyle:{color:h.legendColor},itemHiddenStyle:{color:h.legendInactiveColor},itemHoverStyle:{color:h.legendHoverColor}}}function T(i,l){const a=function(){const c=this.series.chart.series,o=i.dateFormat("%b %e, %Y",this.x,!1),e=this.x;return C(l?{date:o,data:c,stacked:!0,x:e}:{date:o,data:this,stacked:!1,x:e})},r=function(c,o){const e=this.chart,s=e.series,t=e.pointer.getChartPosition(),n=e.hoverPoint,g=n.index,p=n,f=s[s.length-1].data[g],d=n.series.yAxis.top,m=t.top+d+f.shapeY-o-15;let u=t.left+p.dlBox.x+p.dlBox.width*.5-c*.5+3;return u<6&&(u=6),u+p.dlBox.width>t.left+e.chartWidth-6&&(u=t.left+e.chartWidth-p.dlBox.width-6),{x:u,y:m}};return{formatter:a,useHTML:!0,backgroundColor:h.tooltipBackgroundColor,borderWidth:0,borderRadius:10,outside:!0,shadow:!1,style:{filter:h.tooltipShadows,fontSize:"12px"},positioner:l?r:void 0}}function F(i,l){const a=function(){const o=this.chart.series;i&&setTimeout(()=>{let e=!1,s=!1;for(let t=0;t<o.length;t++){const n=o[t].options;!s&&o[t].visible?(n.bottom=!0,s=!0):n.bottom=!1}for(let t=o.length-1;t>=0;t--){const n=o[t].options;!e&&o[t].visible?(n.top=!0,e=!0):n.top=!1}this.chart.redraw()},0)},r=function(){const o=this.series.chart;o.series.forEach(e=>e.points.forEach(s=>{(i&&s.x!==this.x||!i&&s!==this)&&s.update({opacity:.2},!1)})),o.redraw()};function c(){const o=this.series.chart;o.series.forEach(e=>e.points.forEach(s=>s.update({opacity:1},!1))),o.redraw()}return{series:{description:l},column:{events:{legendItemClick:a},stacking:i?"normal":void 0,groupPadding:.1,pointPadding:.15,states:{inactive:{opacity:1}},point:{events:{mouseOver:r,mouseOut:c}}}}}function M(i,l,a){const{description:r,series:c,xAxisLabelFormat:o,xAxisPositioner:e,yAxisLabels:s,yAxisPositioner:t,stacked:n=!1}=l;return{chart:{type:"column",backgroundColor:h.backgroundColor,style:{fontFamily:h.chartFontFamily}},colors:h.colorMapping,xAxis:E(o,e),yAxis:H(k(a),s,t),legend:B(c),tooltip:T(i,n),plotOptions:F(n,r),credits:{enabled:!1}}}const q=i=>{var{title:l,description:a,series:r,xAxisLabelFormat:c,xAxisPositioner:o,yAxisLabels:e,yAxisPositioner:s,stacked:t=!1,className:n}=i,g=A.__rest(i,["title","description","series","xAxisLabelFormat","xAxisPositioner","yAxisLabels","yAxisPositioner","stacked","className"]);const p=b.useMemo(()=>P(r,t),[r,t]),f=b.useMemo(()=>M(y,{description:a,series:r,xAxisLabelFormat:c,xAxisPositioner:o,yAxisLabels:e,yAxisPositioner:s,stacked:t},p),[a,r,c,o,e,s,t,p]);return b.createElement(b.Fragment,null,b.createElement("style",null,O),b.createElement("div",Object.assign({},g,{className:L("ebay-bar-chart",n)}),b.createElement(x.Chart,{highcharts:y,title:l,options:f},p.map((d,m)=>b.createElement(x.Series,{key:d.name||m,type:"column",data:d.data,options:{type:"column",name:d.name,color:d.color,borderColor:d.borderColor,lineColor:d.lineColor,fillOpacity:d.fillOpacity,top:d.top,bottom:d.bottom,group:d.group}})))))};exports.EbayBarChart=q;

package/ebay-bar-chart/types.d.ts

@@ -0,0 +1,40 @@
+import { ComponentProps } from "react";
+import type Highcharts from "highcharts";
+export interface BarChartDataPoint extends Highcharts.PointOptionsObject {
+    x: number;
+    y: number;
+    label?: string;
+}
+export interface BarChartSeriesItem {
+    data: BarChartDataPoint[];
+    name?: string;
+    type?: string;
+    top?: boolean;
+    bottom?: boolean;
+    group?: string;
+    borderColor?: string;
+    color?: string | {
+        pattern: Record<string, unknown>;
+    };
+    lineColor?: string;
+    fillOpacity?: number;
+}
+export type EbayBarChartProps = Omit<ComponentProps<"div">, "title"> & {
+    /** A title displayed above the graph */
+    title?: string;
+    /** A description of what the chart is displaying (for accessibility) */
+    description?: string;
+    /** The series data: an array of one to five series objects, each containing data points with x (epoch time), y (numeric value), and optional label */
+    series: BarChartSeriesItem | BarChartSeriesItem[];
+    /** Used to modify the display of the x-axis labels. Accepts Highcharts date format string. Default: "{value:%b %e}" */
+    xAxisLabelFormat?: string;
+    /** A custom function that returns an array of epoch/unix time values where x-axis labels will be displayed */
+    xAxisPositioner?: () => number[];
+    /** An array of labels to use on the y-axis */
+    yAxisLabels?: string[];
+    /** A custom function that returns an array of numeric values where y-axis labels will be displayed */
+    yAxisPositioner?: () => number[];
+    /** When true, bars stack vertically; when false, bars render side-by-side. Default: false */
+    stacked?: boolean;
+};
+//# sourceMappingURL=types.d.ts.map

package/ebay-bar-chart/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-bar-chart/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,UAAU,MAAM,YAAY,CAAC;AAEzC,MAAM,WAAW,iBAAkB,SAAQ,UAAU,CAAC,kBAAkB;IACpE,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,kBAAkB;IAC/B,IAAI,EAAE,iBAAiB,EAAE,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG;QAAE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAE,CAAC;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,GAAG;IACnE,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sJAAsJ;IACtJ,MAAM,EAAE,kBAAkB,GAAG,kBAAkB,EAAE,CAAC;IAClD,uHAAuH;IACvH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,8GAA8G;IAC9G,eAAe,CAAC,EAAE,MAAM,MAAM,EAAE,CAAC;IACjC,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,sGAAsG;IACtG,eAAe,CAAC,EAAE,MAAM,MAAM,EAAE,CAAC;IACjC,6FAA6F;IAC7F,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC"}

package/ebay-breadcrumbs/README.md

@@ -1,53 +1,5 @@
 # EbayBreadcrumbs
 
-## Demo
+## Documentation
 
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/navigation-disclosure-ebay-breadcrumbs--default)
-
-## Usage
-
-### Import JS
-
-```jsx
-import { EbayBreadcrumbs, EbayBreadcrumbItem } from "@ebay/ui-core-react/ebay-breadcrumbs";
-```
-
-### Import styles from Skin
-
-```jsx
-import "@ebay/skin/breadcrumbs";
-import "@ebay/skin/utility";
-```
-
-### Breadcrumbs
-
-```jsx
-<EbayBreadcrumbs a11yHeadingText="Page navigation">
-    <EbayBreadcrumbItem href="https://ebay.com">eBay</EbayBreadcrumbItem>
-    <EbayBreadcrumbItem href="https://ebay.com/cars">Auto Parts and Vehicles</EbayBreadcrumbItem>
-    <EbayBreadcrumbItem>Motors Parts and Accessories</EbayBreadcrumbItem>
-</EbayBreadcrumbs>
-```
-
-If you render breadcrumbs dynamically don't forget about [keys](../../../#notes)
-
-## EbayBreadcrumb Attributes
-
-| Name              | Type     | Stateful | Description                                                               | Data                |
-| ----------------- | -------- | -------- | ------------------------------------------------------------------------- | ------------------- | --------------- |
-| `a11yHeadingText` | String   | No       | heading for breadcrumb which will be clipped (default: 'Page navigation') |
-| `a11yHeadingTag`  | String   | No       | heading tag for breadcrumb (default: `h2`)                                |
-| `onSelect`        | Function | No       | click breadcrumb items                                                    | `(event: MouseEvent | KeyboardEvent)` |
-
-All other props will be applied to the main wrapper (`nav`) element.
-
-## EbayBreadcrumbItem Attributes
-
-| Name   | Type   | Stateful | Description                                            |
-| ------ | ------ | -------- | ------------------------------------------------------ |
-| `href` | String | No       | anchor href; omitting the href will switch to a button |
-
-Notes:
-
-- custom `EbayBreadcrumbItem` props like `_sp` will be passed to `a`/`button` tag
-- If you want to have client side or ajax based navigation then you should omit the `href` attribute on each item. This will cause each item to be `<button>` instead of an `<a>`. Alternatively you can manually `preventDefault` the provided `originalEvent` on the `breadcrumb-select` event.
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/navigation-disclosure-ebay-breadcrumbs--docs)

package/ebay-breadcrumbs/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("../tslib.es6-C4EgNkz1.js"),e=require("react"),C=require("classnames"),f=require("../icons/ebay-icon-chevron-right-12/index.js"),k=t=>{var{a11yHeadingText:a="Page navigation",a11yHeadingTag:r="h2",id:l="ebay-breadcrumb",children:n=[],className:o,onSelect:d=()=>{}}=t,s=m.__rest(t,["a11yHeadingText","a11yHeadingTag","id","children","className","onSelect"]);const c=`${l}-breadcrumbs-heading`,b=e.Children.count(n)-1,u=r,g=e.Children.toArray(n).some(i=>i.props.href)?"a":"button";return e.createElement("nav",Object.assign({},s,{"aria-labelledby":c,className:C("breadcrumbs",o),role:"navigation"}),e.createElement(u,{id:c,className:"clipped"},a),e.createElement("ul",null,e.Children.map(n,(i,h)=>{const y=h===b,{href:I,children:v}=i.props,E={tag:g,isLastItem:y,href:I,children:v,onClick:p=>d(p)};return e.cloneElement(i,E)})))},j=t=>{var{tag:a="button",isLastItem:r=!1,href:l,children:n,onClick:o}=t,d=m.__rest(t,["tag","isLastItem","href","children","onClick"]);const s=a==="a",c=Object.assign(Object.assign(Object.assign({},d),r?{"aria-current":"location"}:{}),{href:s?l:void 0,onClick:s?void 0:o});return e.createElement("li",null,e.createElement(a,Object.assign({},c),n),!r&&e.createElement(f.EbayIconChevronRight12,null))};exports.EbayBreadcrumbItem=j;exports.EbayBreadcrumbs=k;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("../tslib.es6-BW4cJBUu.js"),e=require("react"),C=require("classnames"),f=require("../icons/ebay-icon-chevron-right-12/index.js"),k=t=>{var{a11yHeadingText:a="Page navigation",a11yHeadingTag:r="h2",id:l="ebay-breadcrumb",children:n=[],className:o,onSelect:d=()=>{}}=t,s=m.__rest(t,["a11yHeadingText","a11yHeadingTag","id","children","className","onSelect"]);const c=`${l}-breadcrumbs-heading`,b=e.Children.count(n)-1,u=r,g=e.Children.toArray(n).some(i=>i.props.href)?"a":"button";return e.createElement("nav",Object.assign({},s,{"aria-labelledby":c,className:C("breadcrumbs",o),role:"navigation"}),e.createElement(u,{id:c,className:"clipped"},a),e.createElement("ul",null,e.Children.map(n,(i,h)=>{const y=h===b,{href:I,children:v}=i.props,E={tag:g,isLastItem:y,href:I,children:v,onClick:p=>d(p)};return e.cloneElement(i,E)})))},j=t=>{var{tag:a="button",isLastItem:r=!1,href:l,children:n,onClick:o}=t,d=m.__rest(t,["tag","isLastItem","href","children","onClick"]);const s=a==="a",c=Object.assign(Object.assign(Object.assign({},d),r?{"aria-current":"location"}:{}),{href:s?l:void 0,onClick:s?void 0:o});return e.createElement("li",null,e.createElement(a,Object.assign({},c),n),!r&&e.createElement(f.EbayIconChevronRight12,null))};exports.EbayBreadcrumbItem=j;exports.EbayBreadcrumbs=k;

package/ebay-button/README.md

@@ -1,77 +1,5 @@
 # EbayButton
 
-## Demo
+## Documentation
 
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/buttons-ebay-button--default)
-
-## Usage
-
-### Import JS
-
-```jsx harmony
-import { EbayButton } from "@ebay/ui-core-react/ebay-button";
-```
-
-### Import following styles from SKIN
-
-```jsx harmony
-import "@ebay/skin/button";
-```
-
-### 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/button.css";
-```
-
-### Big button
-
-```jsx harmony
-<EbayButton size="large">I'm a big button!</EbayButton>
-```
-
-### Icon button
-
-```jsx
-<EbayButton aria-label="Menu button">
-    <EbayIconMenu20 />
-</EbayButton>
-```
-
-### Complex button
-
-```jsx
-<EbayButton priority="primary" fluid>
-    <EbayButtonCell style={{ justifyContent: "space-between" }}>
-        <span>Label</span>
-        <span>Filter</span>
-    </EbayButtonCell>
-</EbayButton>
-```
-
-## Attributes
-
-| Name                | Type     | Stateful | Required | Description                                                                                                     | Data                     |
-| ------------------- | -------- | -------- | -------- | --------------------------------------------------------------------------------------------------------------- | ------------------------ | --------------- |
-| `priority`          | String   | No       | No       | `primary`, `secondary` (default), `tertiary`, `none`                                                            |
-| `variant`           | String   | Yes      | No       | `standard` (default), `destructive`, `form`                                                                     |
-| `size`              | String   | No       | No       | `small` or `large`                                                                                              |
-| `bodyState`         | String   | No       | No       | `loading`, `expand`                                                                                             |
-| `href`              | String   | No       | No       | for link that looks like a button                                                                               |
-| `fluid`             | Boolean  | No       | No       | takes the whole width of the parent element                                                                     |
-| `disabled`          | Boolean  | Yes      | No       |
-| `partiallyDisabled` | Boolean  | No       | No       | sets `aria-disabled` but not `disabled` prop                                                                    |
-| `transparent`       | Boolean  | Yes      | No       | transparent background color (overrides `priority` prop)                                                        |
-| `truncate`          | Boolean  | No       | No       | will truncate the text of the button onto a single line, and adds an ellipsis, when the button's text overflows |
-| `borderless`        | Boolean  | No       | No       | shows button without border                                                                                     |
-| `fixedHeight`       | Boolean  | No       | No       | fixes the height based on `size`                                                                                |
-| `onClick`           | Function | -        | No       | click or action key pressed (`Space` / `Enter`)                                                                 | `(event: MouseEvent      | KeyboardEvent)` |
-| `onEscape`          | Function | -        | No       | `Esc`-key pressed                                                                                               | `(event: KeyboardEvent)` |
-| `onFocus`           | Function | -        | No       | triggered on focus                                                                                              | `(event: FocusEvent)`    |
-| `onBlur`            | Function | -        | No       | triggered on blur                                                                                               | `(event: FocusEvent)`    |
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/buttons-ebay-button--docs)

package/ebay-button/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../button-xYFMCdP0.js");exports.EbayButton=t.EbayButton;exports.EbayButtonCell=t.EbayButtonCell;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../button-Cylml1aK.js");exports.EbayButton=t.EbayButton;exports.EbayButtonCell=t.EbayButtonCell;

package/ebay-calendar/README.md

@@ -1,50 +1,5 @@
 # EbayCalendar
 
-## Demo
+## Documentation
 
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/building-blocks-ebay-calendar--default)
-
-## Usage
-
-### Import JS
-
-```jsx harmony
-import { EbayCalendar } from "@ebay/ui-core-react/ebay-calendar";
-```
-
-### Import following styles from SKIN
-
-```jsx harmony
-import "@ebay/skin/calendar";
-```
-
-```jsx
-<EbayCalendar />
-```
-
-## Attributes
-
-| Name                   | Type             | Stateful | Description                                                                                                                                                                                                   | Data                           |
-| ---------------------- | ---------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ |
-| `navigable`            | Boolean          | No       | If true, a header is included that allows for navigation between months                                                                                                                                       |                                |
-| `interactive`          | Boolean          | No       | Date cells are contained in buttons for interactive calendars, and spans otherwise                                                                                                                            |                                |
-| `numMonths`            | Number           | No       | Number of months to be displayed at once                                                                                                                                                                      |                                |
-| `range`                | Boolean          | No       | True if selecting a range, false if a single value                                                                                                                                                            |                                |
-| `selected`             | Date, Date[]     | No       | Date or list of dates that are selected, represented as an ISO string or an array of ISO strings                                                                                                              |                                |
-| `locale`               | String           | No       | Locale of the date picker, default to `navigator.language`                                                                                                                                                    |                                |
-| `disableBefore`        | Date             | No       | First date that may be selected                                                                                                                                                                               |                                |
-| `disableAfter`         | Date             | No       | Last date that may be selected                                                                                                                                                                                |                                |
-| `disableWeekdays`      | Number[]         | No       | List of weekdays that are disabled. Must be an array of numbers, where Sunday is `0` and Saturday is `6`                                                                                                      |                                |
-| `disableList`          | String[], Date[] | No       | List of specific days that are disabled. Should be a list of ISO strings, but also accepts timestamps or `Date` objects                                                                                       |                                |
-| `linkBuilder`          | Function         | No       | Function used to build the href for each date. The function is passed the date as a `Date` object, and should return a url string. For dates that don't have a link, the function should return a falsy value |                                |
-| `getA11yShowMonthText` | Function         | No       | Function used to get the text for showing previous and next months, defaults to `Show ${monthName}`                                                                                                           |                                |
-| `a11ySelectedText`     | String           | No       | Text to be read by screen readers when a date is selected, defaults to `Selected`                                                                                                                             |                                |
-| `a11yRangeStartText`   | String           | No       | Text to be read by screen readers when a date is the start of a range, defaults to `Start of range`                                                                                                           |                                |
-| `a11yInRangeText`      | String           | No       | Text to be read by screen readers when a date is in a range, defaults to `in range`                                                                                                                           |                                |
-| `a11yRangeEndText`     | String           | No       | Text to be read by screen readers when a date is the end of a range, defaults to `End of range`                                                                                                               |                                |
-| `a11yTodayText`        | String           | No       | Text to be read by screen readers when a date is the current date, defaults to `Today`                                                                                                                        |                                |
-| `a11yDisabledText`     | String           | No       | Text to be read by screen readers when a date is disabled, defaults to `inactive`                                                                                                                             |                                |
-| `a11ySeparator`        | String           | No       | Text to be read by screen readers to separate properties, defaults to `-`                                                                                                                                     |                                |
-| `onFocus`              | Function         | -        | Triggered when a day is focused on, typically via keyboard events                                                                                                                                             | `(event: FocusEvent, { iso })` |
-| `onSelect`             | Function         | -        | Triggered when a day is selected                                                                                                                                                                              | `(event: Event, { iso })`      |
-| `onMonthChange`        | Function         | -        | Triggered during month navigation                                                                                                                                                                             | `(event: Event, { iso })`      |
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/building-blocks-ebay-calendar--docs)

package/ebay-calendar/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../calendar-BMTV7qzB.js");exports.EbayCalendar=e.EbayCalendar;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../calendar-BVJGukRW.js");exports.EbayCalendar=e.EbayCalendar;

package/ebay-carousel/README.md

@@ -1,41 +1,5 @@
 # EbayCarousel
 
-## Demo
+## Documentation
 
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/navigation-disclosure-ebay-carousel--continuous)
-
-## Usage
-
-```jsx
-<EbayCarousel>
-    <CarouselItem>Item 1</CarouselItem>
-</EbayCarousel>
-```
-
-## Attributes
-
-| 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
-
-| Event        | Data  | Description                                     |
-| ------------ | ----- | ----------------------------------------------- |
-| `onNext`     | Event | Trigggered when next slide button is clicked    |
-| `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
-
-Will render slides content
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/navigation-disclosure-ebay-carousel--docs)

package/ebay-carousel/index.js

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

package/ebay-ccd/README.md

@@ -1,48 +1,5 @@
 # EbayCCD
 
-## Demo
+## Documentation
 
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/graphics-icons-ebayccd--default)
-
-## Usage
-
-### Import JS
-
-```jsx harmony
-import { EbayCCD } from "@ebay/ui-core-react/ebay-ccd";
-```
-
-### Import following styles from SKIN
-
-```jsx harmony
-import "@ebay/skin/ccd";
-```
-
-### 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/ccd.css";
-```
-
-```jsx harmony
-<EbayCCD chargerIcon="included" max="2000" min="1000" units="W" secondaryType="usbpd" secondaryText="USB PD" />
-```
-
-## Attributes
-
-| Name            | Type   | Required | Description                                                | Data                       |
-| --------------- | ------ | -------- | ---------------------------------------------------------- | -------------------------- |
-| `max`           | String | No       | The maximum range                                          |                            |
-| `min`           | String | No       | The minimum range                                          |                            |
-| `chargerIcon`   | String | No       | Toggles the charger icon visible or if its included or not | `included`, `not-included` |
-| `units`         | String | No       | The units of the rating                                    |                            |
-| `secondaryType` | String | No       | Toggles the usbpd secondary text                           | `none`, `usbpd`            |
-| `secondaryText` | String | No       | The text used for secondary text                           |                            |
-| `a11yUnits`     | String | No       | The units for the rating used for a11y                     |                            |
-| `a11yText`      | String | No       | Overrides the default aria-label text                      |                            |
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/graphics-icons-ebay-ccd--docs)

package/ebay-ccd/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("../tslib.es6-C4EgNkz1.js"),e=require("react"),_=require("classnames"),E=require("../icons/ebay-icon-ccd-charger-included/index.js"),h=require("../icons/ebay-icon-ccd-charger-not-included/index.js"),I=require("../icons/ebay-icon-ccd-top/index.js"),N=r=>{var{max:c,min:a,chargerIcon:n,units:i="W",secondaryType:o="none",secondaryText:t="USB PD",a11yUnits:d="watts","aria-label":l,className:u}=r,m=C.__rest(r,["max","min","chargerIcon","units","secondaryType","secondaryText","a11yUnits","aria-label","className"]);const s=o==="usbpd",y=n?`Charger ${n==="included"?"":"not "}included.`:"",b=a||c?`${a} - ${c} ${d}. ${s?t:""}`:"",g=`${y} ${b}`.trim();return e.createElement("div",Object.assign({},m,{role:"figure","aria-label":l||g,className:_("ccd",u)}),n==="included"&&e.createElement(E.EbayIconCcdChargerIncluded,{className:"ccd__charger-icon"}),n==="not-included"&&e.createElement(h.EbayIconCcdChargerNotIncluded,{className:"ccd__charger-icon"}),(a||c)&&e.createElement("div",{className:"ccd__description-figure"},e.createElement(I.EbayIconCcdTop,{className:"ccd__top-icon"}),e.createElement("div",{className:"ccd__body"},e.createElement("div",null,a," - ",c),e.createElement("div",null,i),s&&e.createElement("div",null,t))))};exports.EbayCCD=N;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("../tslib.es6-BW4cJBUu.js"),e=require("react"),_=require("classnames"),E=require("../icons/ebay-icon-ccd-charger-included/index.js"),h=require("../icons/ebay-icon-ccd-charger-not-included/index.js"),I=require("../icons/ebay-icon-ccd-top/index.js"),N=r=>{var{max:c,min:a,chargerIcon:n,units:i="W",secondaryType:o="none",secondaryText:t="USB PD",a11yUnits:d="watts","aria-label":l,className:u}=r,m=C.__rest(r,["max","min","chargerIcon","units","secondaryType","secondaryText","a11yUnits","aria-label","className"]);const s=o==="usbpd",y=n?`Charger ${n==="included"?"":"not "}included.`:"",b=a||c?`${a} - ${c} ${d}. ${s?t:""}`:"",g=`${y} ${b}`.trim();return e.createElement("div",Object.assign({},m,{role:"figure","aria-label":l||g,className:_("ccd",u)}),n==="included"&&e.createElement(E.EbayIconCcdChargerIncluded,{className:"ccd__charger-icon"}),n==="not-included"&&e.createElement(h.EbayIconCcdChargerNotIncluded,{className:"ccd__charger-icon"}),(a||c)&&e.createElement("div",{className:"ccd__description-figure"},e.createElement(I.EbayIconCcdTop,{className:"ccd__top-icon"}),e.createElement("div",{className:"ccd__body"},e.createElement("div",null,a," - ",c),e.createElement("div",null,i),s&&e.createElement("div",null,t))))};exports.EbayCCD=N;

package/ebay-character-count/README.md

@@ -1,44 +1,5 @@
 # EbayCharacterCount
 
-## Demo
+## Documentation
 
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/building-blocks-ebay-character-count--default)
-
-## Usage
-
-### Import JS
-
-```jsx harmony
-import { EbayCharacterCount } from "@ebay/ui-core-react/ebay-character-count";
-```
-
-### Import following styles from SKIN
-
-```jsx harmony
-import "@ebay/skin/character-count";
-```
-
-### 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/character-count.css";
-```
-
-```jsx harmony
-<EbayCharacterCount value="Hello world" max={120} clippedText="characters remaining" />
-```
-
-## Attributes
-
-| Name          | Type     | Required | Description                                                                 | Data                         |
-| ------------- | -------- | -------- | --------------------------------------------------------------------------- | ---------------------------- |
-| `value`       | String   | Yes      | String to count characters from, or a number representing the current count |                              |
-| `max`         | Number   | Yes      | Maximum number of characters allowed                                        |                              |
-| `clippedText` | String   | No       | Text to be displayed after the character count                              |                              |
-| `onChange`    | Function | No       | Triggered when the character count changes                                  | `({ count, inputAriaLive })` |
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/building-blocks-ebay-character-count--docs)

package/ebay-character-count/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("../tslib.es6-C4EgNkz1.js"),t=require("react"),i=e=>typeof e=="string"?[...e].length:typeof e=="number"?e:0,g=e=>{var{children:u,max:n,clippedText:a,value:r,onChange:o}=e,s=f.__rest(e,["children","max","clippedText","value","onChange"]);const[l,m]=t.useState(i(r));return t.useEffect(()=>{const p=setTimeout(()=>{const c=i(r);m(c),o&&o({count:c,inputAriaLive:c>=n?"polite":"off"})},500);return()=>clearTimeout(p)},[r,n,o]),t.createElement("span",Object.assign({},s),u||t.createElement(t.Fragment,null,l,"/",n,a&&t.createElement("span",{className:"clipped"},a)))};exports.EbayCharacterCount=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("../tslib.es6-BW4cJBUu.js"),t=require("react"),i=e=>typeof e=="string"?[...e].length:typeof e=="number"?e:0,g=e=>{var{children:u,max:n,clippedText:a,value:r,onChange:o}=e,s=f.__rest(e,["children","max","clippedText","value","onChange"]);const[l,m]=t.useState(i(r));return t.useEffect(()=>{const p=setTimeout(()=>{const c=i(r);m(c),o&&o({count:c,inputAriaLive:c>=n?"polite":"off"})},500);return()=>clearTimeout(p)},[r,n,o]),t.createElement("span",Object.assign({},s),u||t.createElement(t.Fragment,null,l,"/",n,a&&t.createElement("span",{className:"clipped"},a)))};exports.EbayCharacterCount=g;

package/ebay-chart-legend/chart-legend.d.ts

@@ -0,0 +1,5 @@
+import { FC } from "react";
+import type { EbayChartLegendProps } from "./types";
+declare const EbayChartLegend: FC<EbayChartLegendProps>;
+export default EbayChartLegend;
+//# sourceMappingURL=chart-legend.d.ts.map

package/ebay-chart-legend/chart-legend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-legend.d.ts","sourceRoot":"","sources":["../../src/ebay-chart-legend/chart-legend.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAEpD,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAW7C,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/ebay-chart-legend/index.d.ts

@@ -0,0 +1,3 @@
+export { default as EbayChartLegend } from "./chart-legend";
+export type { EbayChartLegendProps, LegendItem } from "./types";
+//# sourceMappingURL=index.d.ts.map

package/ebay-chart-legend/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-chart-legend/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC5D,YAAY,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}