@ebay/ui-core-react 7.0.0 → 7.1.0-alpha.2

package/menu-CR1Dxl2m.mjs

@@ -0,0 +1,154 @@
+import v, { useState as A, useEffect as C, Children as L, useRef as H, cloneElement as S } from "react";
+import V from "classnames";
+import { i as T } from "./index-B5oC9Rl1.mjs";
+import { E as $, w as j } from "./icon-B_a65KUD.mjs";
+import "./array.polyfill.flat-Bj5UhY_-.mjs";
+import { E as q } from "./badge-BX5HuO-3.mjs";
+const z = () => {
+  const [u, s] = A(!1), [p, o] = A(!1), d = ({ key: a }) => {
+    const c = {
+      ArrowUp: s,
+      ArrowDown: o
+    }[a];
+    c && c(!1);
+  }, l = ({ key: a }) => {
+    const c = {
+      ArrowUp: s,
+      ArrowDown: o
+    }[a];
+    c && c(!0);
+  };
+  return C(() => (window.addEventListener("keydown", l), window.addEventListener("keyup", d), () => {
+    window.removeEventListener("keydown", l), window.removeEventListener("keyup", d);
+  }), []), [u, p];
+}, G = (u, s, p) => {
+  const [o, d] = A(p), [l, a] = z(), c = L.toArray(u).reduce((t, I, h) => I.type === s ? [...t, h] : t, []), m = c.indexOf(o), E = () => {
+    if (m === -1)
+      return o;
+    const t = c[m - 1];
+    return t === void 0 ? o : t;
+  }, f = () => {
+    if (m === -1)
+      return o;
+    const t = c[m + 1];
+    return t === void 0 ? o : t;
+  };
+  return C(() => {
+    l && d(E()), a && d(f());
+  }, [l, a]), [o, d];
+}, J = ({ className: u, checked: s, type: p, focused: o = !1, tabIndex: d, disabled: l, badgeNumber: a, badgeAriaLabel: c, children: m, ...E }) => {
+  const f = H(null), t = a !== void 0;
+  C(() => {
+    f.current && o && f.current.focus();
+  }, [f, o]);
+  const I = ["radio", "checkbox"];
+  return v.createElement(
+    "div",
+    { "aria-label": c, ...E, ref: f, className: V(u, "menu__item", t && "menu__item--badged"), role: Q(p), "aria-checked": I.includes(p) ? s : void 0, "aria-disabled": l, tabIndex: o ? 0 : d },
+    v.createElement(
+      "span",
+      { "aria-hidden": t },
+      m,
+      t && v.createElement(q, { type: "menu", number: a })
+    ),
+    v.createElement($, { name: "tick16" })
+  );
+};
+function Q(u) {
+  return {
+    radio: "menuitemradio",
+    checkbox: "menuitemcheckbox"
+  }[u] || "menuitem";
+}
+const W = ({ baseEl: u = "span", type: s, priority: p = "secondary", checked: o, className: d, autofocus: l, onClick: a = () => {
+}, onKeyDown: c = () => {
+}, onChange: m = () => {
+}, onSelect: E = () => {
+}, forwardedRef: f, children: t, ...I }) => {
+  const h = L.toArray(t), [P, D] = G(t, J, l === !0 ? 0 : void 0), [k, F] = A(h.map(() => !1)), B = (n) => h.reduce((e, r, w) => n[w] ? [...e, r.props.value] : e, []), R = (n) => n.reduce((e, r, w) => r ? [...e, w] : e, []), g = (n, e) => ({
+    index: n,
+    checked: R(e)
+  }), _ = (n, e) => ({
+    ...g(n, e),
+    indexes: R(e),
+    checkedValues: B(e)
+  }), K = (n, e, r = !1) => {
+    let w = !1;
+    const y = k.map((b, i) => {
+      const O = r ? !1 : b;
+      return n === i ? (b !== e && (w = !0), e) : O;
+    });
+    if (w)
+      return F(y), y;
+  }, x = (n) => {
+    switch (s) {
+      case "radio":
+        return K(n, !0, !0);
+      case "checkbox":
+        return K(n, !k[n], !1);
+      default:
+        return k.map((e, r) => r === n);
+    }
+  };
+  C(() => {
+    if (s === "radio")
+      if (o === void 0) {
+        const n = h.findIndex((e) => e.props.checked);
+        n > -1 && x(n);
+      } else
+        x(o);
+    else s === "checkbox" && F(h.map((n) => !!n.props.checked));
+  }, []);
+  const U = (n, e, r) => {
+    switch (s) {
+      case "radio":
+      case "checkbox":
+        return m(n, _(e, r));
+      default:
+        return E(n, g(e, r));
+    }
+  }, M = (n, e) => {
+    let r;
+    switch (T(n.key) && (r = x(e), r && U(n, e, r)), s) {
+      case "radio":
+      case "checkbox":
+        return c(n, _(e, r || k));
+      default:
+        return c(n, g(e, r || k));
+    }
+  }, N = (n, e) => {
+    D(e);
+    const r = x(e);
+    r && U(n, e, r);
+  };
+  return v.createElement(
+    u,
+    { ...I, className: V(d, "menu") },
+    v.createElement("div", { className: "menu__items", role: "menu", ref: f }, h.map((n, e) => {
+      const { onClick: r = () => {
+      }, onFocus: w = () => {
+      }, onKeyDown: y = () => {
+      }, ...b } = n.props;
+      return S(n, {
+        ...b,
+        type: s,
+        focused: e === P,
+        tabIndex: P === void 0 ? 0 : -1,
+        checked: k[e],
+        onFocus: (i) => {
+          D(e), w(i);
+        },
+        onClick: (i) => {
+          N(i, e), r(i), a(i);
+        },
+        onKeyDown: (i) => {
+          M(i, e), y(i);
+        }
+      });
+    }))
+  );
+}, oe = j(W);
+export {
+  oe as E,
+  J as a
+};

package/menu-DZU8jEPV.js

@@ -0,0 +1 @@
+"use strict";const t=require("react"),q=require("classnames"),B=require("./index-DbjwTbDP.js"),K=require("./icon-DK6eEQD8.js");require("./array.polyfill.flat-5BAolFdk.js");const N=require("./badge-CoHKfiPt.js"),O=()=>{const[l,c]=t.useState(!1),[k,o]=t.useState(!1),d=({key:u})=>{const a={ArrowUp:c,ArrowDown:o}[u];a&&a(!1)},f=({key:u})=>{const a={ArrowUp:c,ArrowDown:o}[u];a&&a(!0)};return t.useEffect(()=>(window.addEventListener("keydown",f),window.addEventListener("keyup",d),()=>{window.removeEventListener("keydown",f),window.removeEventListener("keyup",d)}),[]),[l,k]},H=(l,c,k)=>{const[o,d]=t.useState(k),[f,u]=O(),a=t.Children.toArray(l).reduce((s,I,p)=>I.type===c?[...s,p]:s,[]),m=a.indexOf(o),E=()=>{if(m===-1)return o;const s=a[m-1];return s===void 0?o:s},w=()=>{if(m===-1)return o;const s=a[m+1];return s===void 0?o:s};return t.useEffect(()=>{f&&d(E()),u&&d(w())},[f,u]),[o,d]},M=({className:l,checked:c,type:k,focused:o=!1,tabIndex:d,disabled:f,badgeNumber:u,badgeAriaLabel:a,children:m,...E})=>{const w=t.useRef(null),s=u!==void 0;t.useEffect(()=>{w.current&&o&&w.current.focus()},[w,o]);const I=["radio","checkbox"];return t.createElement("div",{"aria-label":a,...E,ref:w,className:q(l,"menu__item",s&&"menu__item--badged"),role:T(k),"aria-checked":I.includes(k)?c:void 0,"aria-disabled":f,tabIndex:o?0:d},t.createElement("span",{"aria-hidden":s},m,s&&t.createElement(N.EbayBadge,{type:"menu",number:u})),t.createElement(K.EbayIcon,{name:"tick16"}))};function T(l){return{radio:"menuitemradio",checkbox:"menuitemcheckbox"}[l]||"menuitem"}const j=({baseEl:l="span",type:c,priority:k="secondary",checked:o,className:d,autofocus:f,onClick:u=()=>{},onKeyDown:a=()=>{},onChange:m=()=>{},onSelect:E=()=>{},forwardedRef:w,children:s,...I})=>{const p=t.Children.toArray(s),[g,A]=H(s,M,f===!0?0:void 0),[v,P]=t.useState(p.map(()=>!1)),U=n=>p.reduce((e,r,h)=>n[h]?[...e,r.props.value]:e,[]),D=n=>n.reduce((e,r,h)=>r?[...e,h]:e,[]),C=(n,e)=>({index:n,checked:D(e)}),F=(n,e)=>({...C(n,e),indexes:D(e),checkedValues:U(e)}),R=(n,e,r=!1)=>{let h=!1;const y=v.map((x,i)=>{const V=r?!1:x;return n===i?(x!==e&&(h=!0),e):V});if(h)return P(y),y},b=n=>{switch(c){case"radio":return R(n,!0,!0);case"checkbox":return R(n,!v[n],!1);default:return v.map((e,r)=>r===n)}};t.useEffect(()=>{if(c==="radio")if(o===void 0){const n=p.findIndex(e=>e.props.checked);n>-1&&b(n)}else b(o);else c==="checkbox"&&P(p.map(n=>!!n.props.checked))},[]);const _=(n,e,r)=>{switch(c){case"radio":case"checkbox":return m(n,F(e,r));default:return E(n,C(e,r))}},L=(n,e)=>{let r;switch(B.isActionKey(n.key)&&(r=b(e),r&&_(n,e,r)),c){case"radio":case"checkbox":return a(n,F(e,r||v));default:return a(n,C(e,r||v))}},S=(n,e)=>{A(e);const r=b(e);r&&_(n,e,r)};return t.createElement(l,{...I,className:q(d,"menu")},t.createElement("div",{className:"menu__items",role:"menu",ref:w},p.map((n,e)=>{const{onClick:r=()=>{},onFocus:h=()=>{},onKeyDown:y=()=>{},...x}=n.props;return t.cloneElement(n,{...x,type:c,focused:e===g,tabIndex:g===void 0?0:-1,checked:v[e],onFocus:i=>{A(e),h(i)},onClick:i=>{S(i,e),r(i),u(i)},onKeyDown:i=>{L(i,e),y(i)}})})))},z=K.withForwardRef(j);exports.EbayMenu=z;exports.EbayMenuItem=M;

package/menu-button-label-BcgasGA4.js

@@ -0,0 +1 @@
+"use strict";const e=require("react"),s=require("classnames"),m=require("./utils-C9NL3q0j.js"),D=require("./index-DbjwTbDP.js"),p=require("./icon-DK6eEQD8.js"),R=require("./button-o4ao46WM.js"),z=require("./icon-button-BB6GFLm7.js"),y=require("./menu-item-DBi1NcrM.js"),H=({a11yText:o,noToggleIcon:r,fixWidth:_,reverse:I,variant:i,expanded:q=!1,className:v,onCollapse:x=()=>{},onExpand:w=()=>{},onMouseDown:F=()=>{},onSelect:N=()=>{},text:d="",children:c,...C})=>{const[a,l]=e.useState(q),[b,S]=e.useState(),u=e.useRef(),f=m.findComponent(c,p.EbayIcon),h=m.findComponent(c,M)||(f?e.createElement("span",null,d):d),L=m.filterByType(c,[k,B]);e.useEffect(()=>{const n=t=>{u.current&&!u.current.contains(t.currentTarget)&&l(!1)};return a?(w(),setTimeout(()=>{document.addEventListener("click",n,!1)})):a===!1&&x(),()=>document.removeEventListener("click",n,!1)},[a]),e.useEffect(()=>{S(p.randomId())},[]);const g=n=>{D.handleEscapeKeydown(n,()=>{var t;l(!1),(t=u.current)==null||t.focus()})},K=s("fake-menu-button__menu",{"menu-button__menu--fix-width":_,"menu-button__menu--reverse":I}),E={ref:u,className:"fake-menu-button__button","aria-expanded":!!a,"aria-haspopup":!0,"aria-label":o,"aria-controls":b,onClick:()=>l(!a),...C};return e.createElement("span",{className:s("fake-menu-button",v)},i==="overflow"?e.createElement(z.EbayIconButton,{icon:"overflowHorizontal24",...E}):e.createElement(R.EbayButton,{variant:i==="form"?"form":void 0,bodyState:r?void 0:"expand",...E},f,h),a&&e.createElement(y.EbayFakeMenu,{className:K,id:b,tabIndex:-1,onKeyDown:g,onSelect:N},L.map((n,t)=>e.cloneElement(n,{...n.props,onMouseDown:T=>{F(T,{index:t})},className:s(n.props.className,"fake-menu-button__item"),key:t,autoFocus:t===0}))))},k=y.EbayMenuItem,B=({className:o,...r})=>e.createElement("hr",{...r,className:s(o,"menu-button__separator"),role:"separator"}),M=({children:o})=>e.createElement(e.Fragment,null,o);exports.EbayFakeMenuButtonItem=k;exports.EbayFakeMenuButtonLabel=M;exports.EbayMenuButton=H;exports.EbayMenuButtonSeparator=B;

package/menu-button-label-vVnRKJRU.mjs

@@ -0,0 +1,68 @@
+import t, { useState as E, useRef as S, useEffect as b, cloneElement as T } from "react";
+import r from "classnames";
+import { f as y, b as D } from "./utils-BipBqkOS.mjs";
+import { b as R } from "./index-B5oC9Rl1.mjs";
+import { r as z, E as H } from "./icon-B_a65KUD.mjs";
+import { E as P } from "./button-B06HeRsZ.mjs";
+import { E as j } from "./icon-button-Dy8rjzH7.mjs";
+import { E as q, a as A } from "./menu-item-jlKZ3uT4.mjs";
+const ee = ({ a11yText: o, noToggleIcon: u, fixWidth: k, reverse: _, variant: l, expanded: I = !1, className: M, onCollapse: v = () => {
+}, onExpand: x = () => {
+}, onMouseDown: B = () => {
+}, onSelect: w = () => {
+}, text: f = "", children: m, ...N }) => {
+  const [a, c] = E(I), [p, F] = E(), s = S(), d = y(m, H), h = y(m, O) || (d ? t.createElement("span", null, f) : f), C = D(m, [G, J]);
+  b(() => {
+    const e = (n) => {
+      s.current && !s.current.contains(n.currentTarget) && c(!1);
+    };
+    return a ? (x(), setTimeout(() => {
+      document.addEventListener("click", e, !1);
+    })) : a === !1 && v(), () => document.removeEventListener("click", e, !1);
+  }, [a]), b(() => {
+    F(z());
+  }, []);
+  const g = (e) => {
+    R(e, () => {
+      var n;
+      c(!1), (n = s.current) == null || n.focus();
+    });
+  }, K = r("fake-menu-button__menu", {
+    "menu-button__menu--fix-width": k,
+    "menu-button__menu--reverse": _
+  }), i = {
+    ref: s,
+    className: "fake-menu-button__button",
+    "aria-expanded": !!a,
+    "aria-haspopup": !0,
+    "aria-label": o,
+    "aria-controls": p,
+    onClick: () => c(!a),
+    ...N
+  };
+  return t.createElement(
+    "span",
+    { className: r("fake-menu-button", M) },
+    l === "overflow" ? t.createElement(j, { icon: "overflowHorizontal24", ...i }) : t.createElement(
+      P,
+      { variant: l === "form" ? "form" : void 0, bodyState: u ? void 0 : "expand", ...i },
+      d,
+      h
+    ),
+    a && t.createElement(q, { className: K, id: p, tabIndex: -1, onKeyDown: g, onSelect: w }, C.map((e, n) => T(e, {
+      ...e.props,
+      onMouseDown: (L) => {
+        B(L, { index: n });
+      },
+      className: r(e.props.className, "fake-menu-button__item"),
+      key: n,
+      autoFocus: n === 0
+    })))
+  );
+}, G = A, J = ({ className: o, ...u }) => t.createElement("hr", { ...u, className: r(o, "menu-button__separator"), role: "separator" }), O = ({ children: o }) => t.createElement(t.Fragment, null, o);
+export {
+  ee as E,
+  G as a,
+  J as b,
+  O as c
+};

package/menu-item-DBi1NcrM.js

@@ -0,0 +1 @@
+"use strict";const e=require("react"),g=require("classnames"),p=require("./icon-DK6eEQD8.js"),k=require("./badge-CoHKfiPt.js"),v=({className:m,itemMatchesUrl:d=!0,onKeyDown:a=()=>{},onSelect:l=()=>{},children:E,...r})=>{const b=e.Children.toArray(E),c=d===!1?"true":"page";return e.createElement("div",{...r,className:g(m,"fake-menu")},e.createElement("ul",{className:"fake-menu__items",tabIndex:-1},b.map((s,t)=>{const{current:u,onClick:o=()=>{},...i}=s.props;return e.createElement("li",{key:t},e.cloneElement(s,{...i,"aria-current":u?c:void 0,onClick:n=>{l(n,{index:t}),o(n)},onKeyDown:n=>{a(n,{index:t})}}))})))},_=({className:m,current:d,disabled:a,autoFocus:l,type:E,badgeNumber:r,badgeAriaLabel:b,children:c,...s})=>{const t=e.useRef(),u=r!==void 0;e.useEffect(()=>{var f;l&&((f=t.current)==null||f.focus())});const o={...s,ref:t,className:g(m,"fake-menu__item",u&&"menu__item--badged"),"aria-label":b},i=e.createElement(p.EbayIcon,{name:"tick16"}),n={marginLeft:"var(--spacing-100)",marginRight:"var(--spacing-100)"},y=u&&e.createElement(k.EbayBadge,{type:"menu",number:r,style:n});return E==="button"?e.createElement("button",{...o,type:"button",disabled:a},e.createElement("span",null,c,y),i):e.createElement("a",{...o,"aria-disabled":a?"true":void 0},e.createElement("span",null,c,y),i)};exports.EbayFakeMenu=v;exports.EbayMenuItem=_;

package/menu-item-jlKZ3uT4.mjs

@@ -0,0 +1,67 @@
+import e, { Children as g, cloneElement as k, useRef as v, useEffect as _ } from "react";
+import b from "classnames";
+import { E as x } from "./icon-B_a65KUD.mjs";
+import { E as C } from "./badge-BX5HuO-3.mjs";
+const h = ({ className: l, itemMatchesUrl: p = !0, onKeyDown: n = () => {
+}, onSelect: u = () => {
+}, children: E, ...r }) => {
+  const f = g.toArray(E), c = p === !1 ? "true" : "page";
+  return e.createElement(
+    "div",
+    { ...r, className: b(l, "fake-menu") },
+    e.createElement("ul", { className: "fake-menu__items", tabIndex: -1 }, f.map((s, t) => {
+      const { current: m, onClick: o = () => {
+      }, ...i } = s.props;
+      return e.createElement("li", { key: t }, k(s, {
+        ...i,
+        "aria-current": m ? c : void 0,
+        onClick: (a) => {
+          u(a, { index: t }), o(a);
+        },
+        onKeyDown: (a) => {
+          n(a, { index: t });
+        }
+      }));
+    }))
+  );
+}, B = ({ className: l, current: p, disabled: n, autoFocus: u, type: E, badgeNumber: r, badgeAriaLabel: f, children: c, ...s }) => {
+  const t = v(), m = r !== void 0;
+  _(() => {
+    var y;
+    u && ((y = t.current) == null || y.focus());
+  });
+  const o = {
+    ...s,
+    ref: t,
+    className: b(l, "fake-menu__item", m && "menu__item--badged"),
+    "aria-label": f
+  }, i = e.createElement(x, { name: "tick16" }), a = {
+    marginLeft: "var(--spacing-100)",
+    marginRight: "var(--spacing-100)"
+  }, d = m && e.createElement(C, { type: "menu", number: r, style: a });
+  return E === "button" ? e.createElement(
+    "button",
+    { ...o, type: "button", disabled: n },
+    e.createElement(
+      "span",
+      null,
+      c,
+      d
+    ),
+    i
+  ) : e.createElement(
+    "a",
+    { ...o, "aria-disabled": n ? "true" : void 0 },
+    e.createElement(
+      "span",
+      null,
+      c,
+      d
+    ),
+    i
+  );
+};
+export {
+  h as E,
+  B as a
+};

package/notice-content-9iF4T8uB.js

@@ -0,0 +1 @@
+"use strict";const s=require("react"),i=require("classnames"),o=({className:t,type:e,children:n})=>{const c=e==="inline"?"span":"div";return s.createElement(c,{className:i(t,`${e}-notice__main`)},n)};exports.NoticeContent=o;

package/notice-content-BVZMfcMH.mjs

@@ -0,0 +1,4 @@
+const t = () => null;
+export {
+  t as E
+};

package/notice-content-C0ZStfuX.js

@@ -0,0 +1 @@
+"use strict";const t=()=>null;exports.EbayNoticeContent=t;

package/notice-content-CdXVjKzD.mjs

@@ -0,0 +1,9 @@
+import a from "react";
+import s from "classnames";
+const m = ({ className: e, type: t, children: n }) => {
+  const o = t === "inline" ? "span" : "div";
+  return a.createElement(o, { className: s(e, `${t}-notice__main`) }, n);
+};
+export {
+  m as N
+};

package/notice-footer-BFa2IeY9.mjs

@@ -0,0 +1,10 @@
+import c from "react";
+import s from "classnames";
+const l = ({ className: e, type: t, as: o, children: a, ...r }) => {
+  const i = o || "h2";
+  return c.createElement(i, { className: s(e, `${t}-notice__title`), ...r }, a);
+}, N = ({ className: e, type: t, children: o, ...a }) => c.createElement("div", { className: s(e, `${t}-notice__footer`), ...a }, o);
+export {
+  l as N,
+  N as a
+};

package/notice-footer-Cw1DMzoB.js

@@ -0,0 +1 @@
+"use strict";const i=require("react"),s=require("classnames"),n=({className:e,type:t,as:c,children:o,...r})=>{const a=c||"h2";return i.createElement(a,{className:s(e,`${t}-notice__title`),...r},o)},l=({className:e,type:t,children:c,...o})=>i.createElement("div",{className:s(e,`${t}-notice__footer`),...o},c);exports.NoticeFooter=l;exports.NoticeTitle=n;

package/package.json

@@ -1,10 +1,18 @@
 {
   "name": "@ebay/ui-core-react",
-  "version": "7.0.0",
+  "version": "7.1.0-alpha.2",
   "description": "Skin components build off React",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
+  "exports": {
+    "./package.json": "./package.json",
+    "./*": {
+      "types": "./*/index.d.ts",
+      "import": "./*.mjs",
+      "default": "./*.js"
+    }
+  },
   "scripts": {
     "clean": "node scripts/clean",
     "lint": "eslint . --ext ts,tsx",
@@ -18,13 +26,13 @@
     "build-storybook": "storybook build",
     "storybook:publish": "NODE_OPTIONS=--openssl-legacy-provider yarn build-storybook --output-dir storybook-static/$(git branch --show-current) && gh-pages --add --message=\"Deploying to gh-pages from @ eBay/ebayui-core-react@$(git rev-parse --short HEAD) 🚀\" -d storybook-static",
     "test": "yarn jest",
-    "build": "yarn typecheck && yarn tsc",
-    "typecheck": "tsc --project tsconfig.typecheck.json",
+    "build": "yarn type:check && vite build",
+    "type:check": "tsc --noEmit",
     "update-icons": "node ./scripts/update-icons",
-    "copy": "copyfiles package.json README.md lib; yarn copy:rest",
-    "copy:rest": "yarn copyfiles -u 1 'src/**/*.md' lib",
-    "prepublishOnly": "if [ -z \"$CI\" ]; then echo \"Please use CI, do not publish manually\"; exit 1; fi",
-    "prerelease": "npm version prerelease --preid rc && yarn clean && yarn build && yarn copy && CI=1 npm publish --tag rc lib/",
+    "copy": "copyfiles package.json README.md dist; yarn copy:rest",
+    "copy:rest": "yarn copyfiles -u 1 'src/**/*.md' dist",
+    "release": "yarn clean && yarn build && yarn copy && CI=1 npm publish dist/ --access public",
+    "release:rc": "yarn clean && yarn build && yarn copy && CI=1 npm publish --tag rc dist/",
     "prepare": "node scripts/husky-install || node ../scripts/husky-install"
   },
   "lint-staged": {
@@ -63,6 +71,7 @@
     "@babel/register": "^7.0.0",
     "@ebay/skin": "^18.0.0",
     "@microsoft/eslint-formatter-sarif": "^3.0.0",
+    "@rollup/plugin-typescript": "^11.1.6",
     "@storybook/addon-a11y": "^7.6.12",
     "@storybook/addon-essentials": "^7.4.6",
     "@storybook/addon-storysource": "^7.6.12",
@@ -101,13 +110,15 @@
     "react": "^18",
     "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^18",
+    "rollup-plugin-node-externals": "^7.1.3",
     "shaka-player": "^4.3.2",
     "storybook": "^7.5.1",
     "style-loader": "^2.0.0",
     "svgson": "^4.0.0",
     "ts-jest": "^29.1.1",
     "ts-loader": "^8.0.7",
-    "typescript": "4"
+    "typescript": "4",
+    "vite": "^5.4.7"
   },
   "resolutions": {
     "@storybook/addon-actions": "~7.5.3",

package/progress-spinner-BugUcF5c.mjs

@@ -0,0 +1,19 @@
+import s from "react";
+import l from "classnames";
+import { E as o } from "./icon-B_a65KUD.mjs";
+const m = {
+  default: "",
+  small: "progress-spinner--small",
+  large: "progress-spinner--large"
+}, p = {
+  default: "spinner24",
+  small: "spinner20",
+  large: "spinner30"
+}, g = ({ size: e = "default", "aria-label": a = "Busy", className: r, ...n }) => s.createElement(
+  "span",
+  { ...n, className: l("progress-spinner", m[e], r), "aria-label": a, role: "img" },
+  s.createElement(o, { name: p[e] })
+);
+export {
+  g as E
+};

package/progress-spinner-CDgxI8R_.js

@@ -0,0 +1 @@
+"use strict";const s=require("react"),l=require("classnames"),i=require("./icon-DK6eEQD8.js"),t={default:"",small:"progress-spinner--small",large:"progress-spinner--large"},c={default:"spinner24",small:"spinner20",large:"spinner30"},o=({size:e="default","aria-label":r="Busy",className:a,...n})=>s.createElement("span",{...n,className:l("progress-spinner",t[e],a),"aria-label":r,role:"img"},s.createElement(i.EbayIcon,{name:c[e]}));exports.EbayProgressSpinner=o;

package/range-DC7seOVT.mjs

@@ -0,0 +1,4 @@
+const i = (a, l, r = 1) => Array(Math.ceil((l + 1 - a) / r)).fill(a).map((c, e) => c + e * r);
+export {
+  i as r
+};

package/range-DOsPN0h5.js

@@ -0,0 +1 @@
+"use strict";const l=(a,c,r=1)=>Array(Math.ceil((c+1-a)/r)).fill(a).map((e,i)=>e+i*r);exports.range=l;

package/textbox-BxYjEAZK.mjs

@@ -0,0 +1,100 @@
+import n, { useState as C, useEffect as ca, cloneElement as ra } from "react";
+import ia from "classnames";
+import { E as B, w as ua } from "./icon-B_a65KUD.mjs";
+import { f as m } from "./utils-BipBqkOS.mjs";
+import { E as pa } from "./icon-button-Dy8rjzH7.mjs";
+import { u as da } from "./hooks-r29zhPsY.mjs";
+const ba = ({ name: o, buttonAriaLabel: t, onClick: c = () => {
+}, ...r }) => t ? n.createElement(pa, { "aria-label": t, icon: o, transparent: !0, onClick: c, ...r }) : n.createElement(B, { name: o, ...r }), ma = (o) => n.createElement("span", { ...o }), xa = ({ name: o, ...t }) => n.createElement(B, { name: o, ...t }), fa = (o) => n.createElement("span", { ...o }), w = (o) => typeof o < "u", Ea = ({ type: o = "text", invalid: t, fluid: c, multiline: r, onChange: F = () => {
+}, onInputChange: N = () => {
+}, onFocus: P = () => {
+}, onBlur: K = () => {
+}, onKeyPress: T = () => {
+}, onKeyUp: k = () => {
+}, onKeyDown: L = () => {
+}, onInvalid: D = () => {
+}, onFloatingLabelInit: R = () => {
+}, onButtonClick: U = () => {
+}, autoFocus: f, defaultValue: x = "", value: i, forwardedRef: _, inputSize: E = "default", floatingLabel: j, children: u, placeholder: M, opaqueLabel: O, ...s }) => {
+  var h, v;
+  const [y, V] = C(x), [g, W] = C(x), { label: $, Container: q, onBlur: G, onFocus: H, ref: J, placeholder: Q } = da({
+    ref: _,
+    inputId: s.id,
+    className: s.className,
+    disabled: s.disabled,
+    label: j,
+    inputSize: E,
+    inputValue: i || g,
+    placeholder: M,
+    invalid: t,
+    type: o,
+    opaqueLabel: O,
+    onMount: R
+  }), I = (a) => {
+    var e;
+    P(a, { value: ((e = a == null ? void 0 : a.target) == null ? void 0 : e.value) || x }), H();
+  }, S = (a) => {
+    var l;
+    const e = (l = a.target) == null ? void 0 : l.value;
+    K(a, { value: e }), e !== y && (F(a, { value: e }), V(e)), G();
+  }, X = (a) => {
+    const e = a.target;
+    T(a, { value: e == null ? void 0 : e.value });
+  }, Y = (a) => {
+    const e = a.target;
+    k(a, { value: e == null ? void 0 : e.value });
+  }, Z = (a) => {
+    const e = a.target;
+    L(a, { value: e == null ? void 0 : e.value });
+  }, z = (a) => {
+    const e = a.target;
+    D(a, { value: e == null ? void 0 : e.value });
+  }, A = (a) => {
+    U(a, { value: y });
+  };
+  ca(() => {
+    f && I();
+  }, []);
+  const aa = (a) => {
+    var l;
+    const e = (l = a.target) == null ? void 0 : l.value;
+    w(i) || W(e), N(a, { value: e });
+  }, ea = r ? "textarea" : "input", oa = c ? "div" : "span", ta = m(u, xa), p = m(u, fa), na = (h = p == null ? void 0 : p.props) == null ? void 0 : h.id, d = m(u, ba), b = m(u, ma), sa = (v = b == null ? void 0 : b.props) == null ? void 0 : v.id, la = ia("textbox", s.className, {
+    "textbox--fluid": c,
+    "textbox--large": E === "large",
+    /** start remove after `:has` support */
+    "textbox--disabled": s.disabled,
+    "textbox--invalid": t,
+    "textbox--readonly": s.readOnly
+    /** end remove after `:has` support */
+  });
+  return n.createElement(
+    q,
+    null,
+    $,
+    n.createElement(
+      oa,
+      { className: la },
+      ta,
+      p,
+      n.createElement(ea, { "aria-describedby": [na, sa].filter(Boolean).join(" ") || void 0, ...s, className: "textbox__control", type: o, "aria-invalid": t, value: w(i) ? i : g, onChange: aa, onBlur: S, onFocus: I, onKeyPress: X, onKeyUp: Y, onKeyDown: Z, onInvalid: z, autoFocus: f, ref: J, placeholder: Q }),
+      b,
+      d && ra(d, {
+        ...d.props,
+        onClick: (a) => {
+          const { onClick: e = () => {
+          } } = d.props;
+          e(a), A(a);
+        }
+      })
+    )
+  );
+}, wa = ua(Ea);
+export {
+  wa as E,
+  xa as a,
+  fa as b,
+  ba as c,
+  ma as d,
+  w as i
+};

package/textbox-WnB-9F4y.js

@@ -0,0 +1 @@
+"use strict";const t=require("react"),ue=require("classnames"),y=require("./icon-DK6eEQD8.js"),p=require("./utils-C9NL3q0j.js"),xe=require("./icon-button-BB6GFLm7.js"),be=require("./hooks-Ctier7Yv.js"),P=({name:n,buttonAriaLabel:a,onClick:c=()=>{},...r})=>a?t.createElement(xe.EbayIconButton,{"aria-label":a,icon:n,transparent:!0,onClick:c,...r}):t.createElement(y.EbayIcon,{name:n,...r}),B=n=>t.createElement("span",{...n}),w=({name:n,...a})=>t.createElement(y.EbayIcon,{name:n,...a}),F=n=>t.createElement("span",{...n}),E=n=>typeof n<"u",de=({type:n="text",invalid:a,fluid:c,multiline:r,onChange:N=()=>{},onInputChange:q=()=>{},onFocus:K=()=>{},onBlur:k=()=>{},onKeyPress:L=()=>{},onKeyUp:D=()=>{},onKeyDown:R=()=>{},onInvalid:U=()=>{},onFloatingLabelInit:_=()=>{},onButtonClick:j=()=>{},autoFocus:m,defaultValue:f="",value:i,forwardedRef:M,inputSize:I="default",floatingLabel:O,children:u,placeholder:S,opaqueLabel:V,...s})=>{var h,v;const[g,W]=t.useState(f),[C,$]=t.useState(f),{label:G,Container:H,onBlur:J,onFocus:Q,ref:X,placeholder:Y}=be.useFloatingLabel({ref:M,inputId:s.id,className:s.className,disabled:s.disabled,label:O,inputSize:I,inputValue:i||C,placeholder:S,invalid:a,type:n,opaqueLabel:V,onMount:_}),T=e=>{var o;K(e,{value:((o=e==null?void 0:e.target)==null?void 0:o.value)||f}),Q()},Z=e=>{var l;const o=(l=e.target)==null?void 0:l.value;k(e,{value:o}),o!==g&&(N(e,{value:o}),W(o)),J()},z=e=>{const o=e.target;L(e,{value:o==null?void 0:o.value})},A=e=>{const o=e.target;D(e,{value:o==null?void 0:o.value})},ee=e=>{const o=e.target;R(e,{value:o==null?void 0:o.value})},oe=e=>{const o=e.target;U(e,{value:o==null?void 0:o.value})},ne=e=>{j(e,{value:g})};t.useEffect(()=>{m&&T()},[]);const te=e=>{var l;const o=(l=e.target)==null?void 0:l.value;E(i)||$(o),q(e,{value:o})},ae=r?"textarea":"input",se=c?"div":"span",le=p.findComponent(u,w),x=p.findComponent(u,F),ce=(h=x==null?void 0:x.props)==null?void 0:h.id,b=p.findComponent(u,P),d=p.findComponent(u,B),re=(v=d==null?void 0:d.props)==null?void 0:v.id,ie=ue("textbox",s.className,{"textbox--fluid":c,"textbox--large":I==="large","textbox--disabled":s.disabled,"textbox--invalid":a,"textbox--readonly":s.readOnly});return t.createElement(H,null,G,t.createElement(se,{className:ie},le,x,t.createElement(ae,{"aria-describedby":[ce,re].filter(Boolean).join(" ")||void 0,...s,className:"textbox__control",type:n,"aria-invalid":a,value:E(i)?i:C,onChange:te,onBlur:Z,onFocus:T,onKeyPress:z,onKeyUp:A,onKeyDown:ee,onInvalid:oe,autoFocus:m,ref:X,placeholder:Y}),d,b&&t.cloneElement(b,{...b.props,onClick:e=>{const{onClick:o=()=>{}}=b.props;o(e),ne(e)}})))},pe=y.withForwardRef(de);exports.EbayTextbox=pe;exports.EbayTextboxPostfixIcon=P;exports.EbayTextboxPostfixText=B;exports.EbayTextboxPrefixIcon=w;exports.EbayTextboxPrefixText=F;exports.isControlled=E;

package/use-tooltip-BavqG36Z.js

@@ -0,0 +1 @@
+"use strict";const t=require("react"),d=require("classnames"),b=require("./icon-DK6eEQD8.js"),i=require("./utils-C9NL3q0j.js"),u=({children:o,className:e,forwardedRef:s,...a})=>(t.Children.only(o),t.cloneElement(o,{ref:s,...a,className:d(e,o.props.className)})),T=({className:o,type:e,isExpanded:s,children:a,forwardedRef:l,...c})=>{var m;const p=i.findComponent(a,u),r=i.excludeComponent(a,u)[0];if(!p)throw new Error("Tooltip: Please use a TooltipHost that defines the host of the tooltip");const n=t.cloneElement(p,{className:`${e}__host`,"aria-expanded":s,"aria-describedby":(m=r==null?void 0:r.props)==null?void 0:m.id,...p.props});return t.createElement("span",{...c,ref:l,className:d(o,e,{[`${e}--expanded`]:s})},n,r)},_=b.withForwardRef(T),E="bottom",g={tooltip:"tooltip",tourtip:"region",infotip:""},h={left:{transform:"translateX(16px) translateY(-50%) scale3d(1,1,1)",left:"100%",right:"auto",top:"-6px",bottom:"auto"},"left-top":{transform:"translateX(16px) scale3d(1,1,1)",left:"100%",right:"auto",top:"-100%",bottom:"auto"},"left-bottom":{transform:"translateX(16px) scale3d(1,1,1)",left:"100%",right:"auto",top:"auto",bottom:"-10px"},right:{transform:"translateX(-16px) translateY(-50%) scale3d(1,1,1)",left:"auto",right:"100%",top:"-6px",bottom:"auto"},"right-top":{transform:"translateX(-16px) scale3d(1,1,1)",left:"auto",right:"100%",top:"-100%",bottom:"auto"},"right-bottom":{transform:"translateX(-16px) scale3d(1,1,1)",left:"auto",right:"100%",top:"auto",bottom:"-50%"},top:{transform:"translateX(-50%) scale3d(1,1,1)",left:"50%",right:"auto",top:"calc(100% + 2px)",bottom:"auto"},"top-left":{transform:"scale3d(1,1,1)",left:"-10px",right:"auto",top:"calc(100% + 2px)",bottom:"auto"},"top-right":{transform:"scale3d(1,1,1)",left:"auto",right:"-10px",top:"calc(100% + 2px)",bottom:"auto"},"bottom-right":{transform:"scale3d(1,1,1)",left:"auto",right:"-10px",top:"auto",bottom:"calc(100% + 12px)"},"bottom-left":{transform:"scale3d(1,1,1)",left:"-10px",right:"auto",top:"auto",bottom:"calc(100% + 12px)"},bottom:{transform:"translateX(-50%) scale3d(1,1,1)",left:"50%",right:"auto",top:"auto",bottom:"calc(100% + 12px)"}},N=()=>null,f=({children:o,className:e,type:s="tourtip"})=>t.createElement("div",{className:d(`${s}__footer`,e)},o),C=({id:o,style:e,pointer:s=E,children:a,type:l="tooltip",showCloseButton:c,a11yCloseText:p,onClose:r})=>{const n=i.findComponent(a,N),m=i.findComponent(a,f),x=i.excludeComponent(a,f);return t.createElement("span",{className:`${l}__overlay`,id:o,role:g[l]||null,style:{...h[s],...e}},t.createElement("span",{className:`${l}__pointer ${l}__pointer--${s}`}),t.createElement("span",{className:`${l}__mask`},t.createElement("span",{className:`${l}__cell`},t.createElement("span",{className:`${l}__content`},x),c?t.createElement("button",{...n==null?void 0:n.props,className:`icon-btn icon-btn--transparent ${l}__close`,type:"button","aria-label":p,onClick:r},t.createElement(b.EbayIcon,{name:"close16"})):null,m)))},$=({onExpand:o,onCollapse:e,initialExpanded:s=!1,hostRef:a})=>{const[l,c]=t.useState(s);return{isExpanded:l,expandTooltip:()=>{c(!0),o&&o()},collapseTooltip:()=>{var n;c(!1),e&&e(),(n=a==null?void 0:a.current)==null||n.focus()}}};exports.Tooltip=_;exports.TooltipContent=C;exports.TooltipFooter=f;exports.TooltipHost=u;exports.useTooltip=$;