@ebay/ui-core-react 7.4.0-alpha.6 → 7.4.0-alpha.8

package/ebay-panel-dialog/index.js

@@ -1 +1,12 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),t=require("classnames"),c=require("../dialog-previous-button-5cTKpmJ-.js");require("../icon-button-Cwaj-eT9.js");const e="panel-dialog",d=({open:i,animated:a,position:s="start",onClose:o=()=>{},className:l,...n})=>r.createElement(c.DialogBaseWithState,{...n,"aria-label":"Infotip",classPrefix:e,buttonPosition:"right",onCloseBtnClick:o,onBackgroundClick:o,animated:a,className:t(l,{[`${e}--mask-fade-slow`]:a}),windowClass:t(`${e}__window--slide`,{[`${e}__window--end`]:s==="end"}),open:i});exports.EbayPanelDialog=d;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const classNames = require("classnames");
+const dialogPreviousButton = require("../dialog-previous-button-EC_Y6KaT.js");
+require("../icon-button-BQWoMgX1.js");
+const classPrefix = "panel-dialog";
+const EbayPanelDialog = ({ open, animated, position = "start", onClose = () => {
+}, className, ...rest }) => React.createElement(dialogPreviousButton.DialogBaseWithState, { ...rest, "aria-label": "Infotip", classPrefix, buttonPosition: "right", onCloseBtnClick: onClose, onBackgroundClick: onClose, animated, className: classNames(className, { [`${classPrefix}--mask-fade-slow`]: animated }), windowClass: classNames(`${classPrefix}__window--slide`, {
+  [`${classPrefix}__window--end`]: position === "end"
+}), open });
+exports.EbayPanelDialog = EbayPanelDialog;

package/ebay-progress-bar/index.js

@@ -1 +1,6 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),c=require("classnames"),g=({value:e=0,max:r=100,fluid:s,className:a,...o})=>t.createElement("progress",{...o,className:c("progress-bar",a,{"progress-bar--fluid":s}),value:e,max:r});exports.EbayProgressBar=g;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const classNames = require("classnames");
+const EbayProgressBar = ({ value = 0, max = 100, fluid, className, ...rest }) => React.createElement("progress", { ...rest, className: classNames("progress-bar", className, { "progress-bar--fluid": fluid }), value, max });
+exports.EbayProgressBar = EbayProgressBar;

package/ebay-progress-spinner/index.js

@@ -1 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../progress-spinner-U2qOANON.js");exports.EbayProgressSpinner=e.EbayProgressSpinner;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const progressSpinner = require("../progress-spinner-DOFKRtuu.js");
+exports.EbayProgressSpinner = progressSpinner.EbayProgressSpinner;

package/ebay-progress-stepper/index.js

@@ -1 +1,72 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),g=require("classnames"),E=require("../icon-TuxfQndO.js"),d=({direction:t="row",defaultState:r="active",children:s,className:o,...i})=>{const a=e.Children.toArray(s),c=f(a,r);return e.createElement("div",{...i,className:g(o,"progress-stepper",{"progress-stepper--vertical":t==="column"})},e.createElement("div",{role:"list",className:"progress-stepper__items"},a.map((p,n)=>e.createElement(e.Fragment,{key:n},n>0&&e.createElement("hr",{className:"progress-stepper__separator",role:"presentation"}),e.cloneElement(p,{state:_(n,c),...p.props,current:c===n})))))};function f(t,r){const s=t.findIndex(o=>o.props.current);if(s===-1)switch(r){case"complete":return t.length-1;case"upcoming":return 0}return s}function _(t,r){if(t<=r)return"complete";if(t>r)return"upcoming"}const b={complete:"stepperConfirmation24",attention:"stepperAttention24",upcoming:"stepperUpcoming24",active:"stepperConfirmation24"},v=({current:t,state:r="complete",children:s,className:o,...i})=>{const a=e.Children.toArray(s),c=a.find(l=>l.type===m),p=a.filter(l=>l.type!==m),n=g(o,"progress-stepper__item",{"progress-stepper__item--attention":r==="attention"}),u=b[r],y=t?"current":r;return e.createElement("div",{...i,className:n,role:"listitem","aria-current":t?"step":void 0},e.createElement("div",{className:"progress-stepper__icon"},u&&e.createElement(E.EbayIcon,{name:u,"aria-label":y})),e.createElement("div",{className:"progress-stepper__text"},c,p))},m=({as:t="h4",children:r})=>e.createElement(t,{},r);exports.EbayProgressStep=v;exports.EbayProgressStepper=d;exports.EbayProgressTitle=m;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const classNames = require("classnames");
+const icon = require("../icon-B17Di3YL.js");
+const EbayProgressStepper = ({ direction = "row", defaultState = "active", children, className, ...rest }) => {
+  const childrenArray = React.Children.toArray(children);
+  const currentIndex = currentIndexByDefaultState(childrenArray, defaultState);
+  return React.createElement(
+    "div",
+    { ...rest, className: classNames(className, "progress-stepper", {
+      "progress-stepper--vertical": direction === "column"
+    }) },
+    React.createElement("div", { role: "list", className: "progress-stepper__items" }, childrenArray.map((child, index) => React.createElement(
+      React.Fragment,
+      { key: index },
+      index > 0 && React.createElement("hr", { className: "progress-stepper__separator", role: "presentation" }),
+      React.cloneElement(child, {
+        state: stepState(index, currentIndex),
+        ...child.props,
+        current: currentIndex === index
+      })
+    )))
+  );
+};
+function currentIndexByDefaultState(steps, defaultState) {
+  const foundCurrentIndex = steps.findIndex((child) => child.props.current);
+  if (foundCurrentIndex === -1) {
+    switch (defaultState) {
+      case "complete":
+        return steps.length - 1;
+      case "upcoming":
+        return 0;
+    }
+  }
+  return foundCurrentIndex;
+}
+function stepState(stepIndex, currentIndex) {
+  if (stepIndex <= currentIndex)
+    return "complete";
+  if (stepIndex > currentIndex)
+    return "upcoming";
+}
+const typeIcons = {
+  complete: "stepperConfirmation24",
+  attention: "stepperAttention24",
+  upcoming: "stepperUpcoming24",
+  active: "stepperConfirmation24"
+};
+const EbayProgressStep = ({ current, state = "complete", children, className, ...rest }) => {
+  const childrenArray = React.Children.toArray(children);
+  const title = childrenArray.find((child) => child.type === EbayProgressTitle);
+  const text = childrenArray.filter((child) => child.type !== EbayProgressTitle);
+  const stepClassNames = classNames(className, "progress-stepper__item", { "progress-stepper__item--attention": state === "attention" });
+  const icon$1 = typeIcons[state];
+  const ariaLabel = current ? "current" : state;
+  return React.createElement(
+    "div",
+    { ...rest, className: stepClassNames, role: "listitem", "aria-current": current ? "step" : void 0 },
+    React.createElement("div", { className: "progress-stepper__icon" }, icon$1 && React.createElement(icon.EbayIcon, { name: icon$1, "aria-label": ariaLabel })),
+    React.createElement(
+      "div",
+      { className: "progress-stepper__text" },
+      title,
+      text
+    )
+  );
+};
+const EbayProgressTitle = ({ as: TitleComponent = "h4", children }) => React.createElement(TitleComponent, {}, children);
+exports.EbayProgressStep = EbayProgressStep;
+exports.EbayProgressStepper = EbayProgressStepper;
+exports.EbayProgressTitle = EbayProgressTitle;

package/ebay-radio/index.js

@@ -1 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./radio/index.js");exports.EbayRadio=e;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ebayRadio_radio = require("./radio/index.js");
+exports.EbayRadio = ebayRadio_radio;

package/ebay-radio/radio/index.js

@@ -1 +1,48 @@
-"use strict";const e=require("react"),N=require("classnames"),c=require("../../icon-TuxfQndO.js"),v=require("../../label-CnrpYJ-g.js"),I=({size:r="default",checked:s,defaultChecked:d,className:i,style:m,id:o,onChange:u=()=>{},onFocus:h=()=>{},onKeyDown:y=()=>{},children:l,...E})=>{const _=a=>{var n;return u(a,{value:(n=a.target)==null?void 0:n.value})},g=a=>{var n;return h(a,{value:(n=a.target)==null?void 0:n.value})},k=a=>{const n=a.target;return y(a,{value:n==null?void 0:n.value})},b=N("radio",i,{"radio--large":r==="large"}),p=r==="large"?e.createElement(c.EbayIcon,{name:"radioChecked24",className:"radio__checked"}):e.createElement(c.EbayIcon,{name:"radioChecked18",className:"radio__checked"}),C=r==="large"?e.createElement(c.EbayIcon,{name:"radioUnchecked24",className:"radio__unchecked"}):e.createElement(c.EbayIcon,{name:"radioUnchecked18",className:"radio__unchecked"}),t=e.Children.toArray(l).find(a=>a.type===v.Label);return e.createElement(e.Fragment,null,e.createElement("span",{className:b,style:{...m,alignItems:"center"}},e.createElement("input",{...E,id:o,className:"radio__control",type:"radio",defaultChecked:d,checked:s,onChange:_,onFocus:g,onKeyDown:k}),e.createElement("span",{className:"radio__icon",hidden:!0},p,C)),t?e.cloneElement(t,{...t.props,position:"end",htmlFor:o}):l)};module.exports=I;
+"use strict";
+const React = require("react");
+const classNames = require("classnames");
+const icon = require("../../icon-B17Di3YL.js");
+const label = require("../../label-C0AS4fnO.js");
+const EbayRadio = ({ size = "default", checked, defaultChecked, className, style, id, onChange = () => {
+}, onFocus = () => {
+}, onKeyDown = () => {
+}, children, ...rest }) => {
+  const handleChange = (e) => {
+    var _a;
+    return onChange(e, { value: (_a = e.target) == null ? void 0 : _a.value });
+  };
+  const handleFocus = (e) => {
+    var _a;
+    return onFocus(e, { value: (_a = e.target) == null ? void 0 : _a.value });
+  };
+  const handleKeyDown = (e) => {
+    const radioButton = e.target;
+    return onKeyDown(e, { value: radioButton == null ? void 0 : radioButton.value });
+  };
+  const containerClass = classNames("radio", className, { "radio--large": size === "large" });
+  const iconChecked = size === "large" ? React.createElement(icon.EbayIcon, { name: "radioChecked24", className: "radio__checked" }) : React.createElement(icon.EbayIcon, { name: "radioChecked18", className: "radio__checked" });
+  const iconUnChecked = size === "large" ? React.createElement(icon.EbayIcon, { name: "radioUnchecked24", className: "radio__unchecked" }) : React.createElement(icon.EbayIcon, { name: "radioUnchecked18", className: "radio__unchecked" });
+  const childrenArray = React.Children.toArray(children);
+  const ebayLabel = childrenArray.find((child) => child.type === label.Label);
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
+      "span",
+      { className: containerClass, style: { ...style, alignItems: "center" } },
+      React.createElement("input", { ...rest, id, className: "radio__control", type: "radio", defaultChecked, checked, onChange: handleChange, onFocus: handleFocus, onKeyDown: handleKeyDown }),
+      React.createElement(
+        "span",
+        { className: "radio__icon", hidden: true },
+        iconChecked,
+        iconUnChecked
+      )
+    ),
+    ebayLabel ? React.cloneElement(ebayLabel, {
+      ...ebayLabel.props,
+      position: "end",
+      htmlFor: id
+    }) : children
+  );
+};
+module.exports = EbayRadio;

package/ebay-section-notice/index.js

@@ -1 +1,69 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),I=require("classnames"),y=require("../notice-content-C0ZStfuX.js"),T=require("../notice-content-9iF4T8uB.js"),E=require("../icon-TuxfQndO.js"),A=require("../common/random-id/index.js"),b=require("../notice-footer-Cw1DMzoB.js"),F=require("../common/notice-utils/notice-cta/index.js"),k=({status:t="general",children:n,className:a,"aria-label":o,"aria-roledescription":u="Notice",a11yDismissText:s,educationIcon:S,iconClass:C,prominent:f,onDismiss:h=()=>{},...p})=>{const[g,q]=e.useState(!1),[d,_]=e.useState("");e.useEffect(()=>{_(A.randomId())},[]);const m=e.Children.toArray(n).find(({type:l})=>l===y.EbayNoticeContent),c=t!=="general"&&t!=="none",r=t==="education";let i=null;if(c&&(r?i=S||"lightbulb24":i=`${t}Filled16`),!m)throw new Error("EbaySectionNotice: Please use a EbayNoticeContent that defines the content of the notice");const $=l=>{q(!0),h(l)};return g?null:e.createElement("section",{...p,className:I(a,"section-notice",{[`section-notice--${t}`]:c,"section-notice--education":r&&f,"section-notice--large-icon":r}),role:"region","aria-label":c?null:o,"aria-labelledby":c?`section-notice-${t}-${d}`:null,"aria-roledescription":u},i&&e.createElement("div",{className:"section-notice__header",id:`section-notice-${t}-${d}`},e.createElement(E.EbayIcon,{className:C,name:i,a11yText:o,a11yVariant:"label"})),e.createElement(T.NoticeContent,{...m.props,type:"section"}),n,s&&e.createElement(N,null,e.createElement("button",{"aria-label":s,className:"fake-link page-notice__dismiss",onClick:$},e.createElement(E.EbayIcon,{name:"close16"}))))},v=({className:t,as:n,children:a,...o})=>e.createElement(b.NoticeTitle,{...o,className:t,as:n,type:"section"},a),N=({className:t,children:n})=>e.createElement(b.NoticeFooter,{className:t,type:"section"},n),w=({className:t,children:n})=>e.createElement(F,{className:t,type:"section"},n);exports.EbayNoticeContent=y.EbayNoticeContent;exports.EbaySectionNotice=k;exports.EbaySectionNoticeCTA=w;exports.EbaySectionNoticeFooter=N;exports.EbaySectionNoticeTitle=v;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const classNames = require("classnames");
+const noticeContent = require("../notice-content-BhUeK1pd.js");
+const noticeContent$1 = require("../notice-content-BTXVxttv.js");
+const icon = require("../icon-B17Di3YL.js");
+const common_randomId = require("../common/random-id/index.js");
+const noticeFooter = require("../notice-footer-CIQ8SM6N.js");
+const common_noticeUtils_noticeCta = require("../common/notice-utils/notice-cta/index.js");
+const EbaySectionNotice = ({ status = "general", children, className, "aria-label": ariaLabel, "aria-roledescription": ariaRoleDescription = "Notice", a11yDismissText, educationIcon, iconClass, prominent, onDismiss = () => {
+}, ...rest }) => {
+  const [dismissed, setDismissed] = React.useState(false);
+  const [rId, setRandomId] = React.useState("");
+  React.useEffect(() => {
+    setRandomId(common_randomId.randomId());
+  }, []);
+  const childrenArray = React.Children.toArray(children);
+  const content = childrenArray.find(({ type }) => type === noticeContent.EbayNoticeContent);
+  const hasStatus = status !== "general" && status !== "none";
+  const isEducational = status === "education";
+  let iconName = null;
+  if (hasStatus) {
+    if (isEducational) {
+      iconName = educationIcon || "lightbulb24";
+    } else {
+      iconName = `${status}Filled16`;
+    }
+  }
+  if (!content) {
+    throw new Error(`EbaySectionNotice: Please use a EbayNoticeContent that defines the content of the notice`);
+  }
+  const handleDismissed = (event) => {
+    setDismissed(true);
+    onDismiss(event);
+  };
+  return dismissed ? null : React.createElement(
+    "section",
+    { ...rest, className: classNames(className, `section-notice`, {
+      [`section-notice--${status}`]: hasStatus,
+      "section-notice--education": isEducational && prominent,
+      "section-notice--large-icon": isEducational
+    }), role: "region", "aria-label": !hasStatus ? ariaLabel : null, "aria-labelledby": hasStatus ? `section-notice-${status}-${rId}` : null, "aria-roledescription": ariaRoleDescription },
+    iconName && React.createElement(
+      "div",
+      { className: "section-notice__header", id: `section-notice-${status}-${rId}` },
+      React.createElement(icon.EbayIcon, { className: iconClass, name: iconName, a11yText: ariaLabel, a11yVariant: "label" })
+    ),
+    React.createElement(noticeContent$1.NoticeContent, { ...content.props, type: "section" }),
+    children,
+    a11yDismissText && React.createElement(
+      EbaySectionNoticeFooter,
+      null,
+      React.createElement(
+        "button",
+        { "aria-label": a11yDismissText, className: "fake-link page-notice__dismiss", onClick: handleDismissed },
+        React.createElement(icon.EbayIcon, { name: "close16" })
+      )
+    )
+  );
+};
+const EbaySectionNoticeTitle = ({ className, as, children, ...rest }) => React.createElement(noticeFooter.NoticeTitle, { ...rest, className, as, type: "section" }, children);
+const EbaySectionNoticeFooter = ({ className, children }) => React.createElement(noticeFooter.NoticeFooter, { className, type: "section" }, children);
+const EbaySectionNoticeCTA = ({ className, children }) => React.createElement(common_noticeUtils_noticeCta, { className, type: "section" }, children);
+exports.EbayNoticeContent = noticeContent.EbayNoticeContent;
+exports.EbaySectionNotice = EbaySectionNotice;
+exports.EbaySectionNoticeCTA = EbaySectionNoticeCTA;
+exports.EbaySectionNoticeFooter = EbaySectionNoticeFooter;
+exports.EbaySectionNoticeTitle = EbaySectionNoticeTitle;

package/ebay-section-title/index.js

@@ -1 +1,38 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),l=require("classnames"),s=require("../common/component-utils/utils/index.js"),v=({ctaText:e,href:t,className:n,...i})=>e?o.createElement("a",{...i,className:l("section-title__cta",n),href:t},e):null,T=({href:e,ctaText:t,className:n,children:i,...u})=>{const E=l(n,"section-title"),_=s.findComponent(i,c),f=s.findComponent(i,a),b=s.findComponent(i,m),S=s.findComponent(i,r);return o.createElement("div",{...u,className:E},o.createElement("div",{className:"section-title__title-container"},_||o.createElement(c,null,i),f),e&&o.createElement(v,{href:e,ctaText:t})||b||S)},c=({children:e,className:t,...n})=>o.createElement("h2",{...n,className:l(t,"section-title__title")},e),a=({children:e,className:t,...n})=>o.createElement("span",{...n,className:l(t,"section-title__subtitle")},e),m=({className:e,children:t,...n})=>o.createElement("div",{...n,className:l(e,"section-title__info")},t),r=({children:e,className:t,...n})=>o.createElement("div",{...n,className:l(t,"section-title__overflow")},e);exports.EbaySectionTitle=T;exports.EbaySectionTitleInfo=m;exports.EbaySectionTitleOverflow=r;exports.EbaySectionTitleSubtitle=a;exports.EbaySectionTitleTitle=c;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const classNames = require("classnames");
+const common_componentUtils_utils = require("../common/component-utils/utils/index.js");
+const Cta = ({ ctaText, href, className, ...rest }) => {
+  if (!ctaText) {
+    return null;
+  }
+  return React.createElement("a", { ...rest, className: classNames("section-title__cta", className), href }, ctaText);
+};
+const EbaySectionTitle = ({ href, ctaText, className, children, ...rest }) => {
+  const sectionTitleClass = classNames(className, "section-title");
+  const title = common_componentUtils_utils.findComponent(children, Title);
+  const subtitle = common_componentUtils_utils.findComponent(children, Subtitle);
+  const info = common_componentUtils_utils.findComponent(children, Info);
+  const overflow = common_componentUtils_utils.findComponent(children, Overflow);
+  return React.createElement(
+    "div",
+    { ...rest, className: sectionTitleClass },
+    React.createElement(
+      "div",
+      { className: "section-title__title-container" },
+      title || React.createElement(Title, null, children),
+      subtitle
+    ),
+    href && React.createElement(Cta, { href, ctaText }) || info || overflow
+  );
+};
+const Title = ({ children, className, ...rest }) => React.createElement("h2", { ...rest, className: classNames(className, "section-title__title") }, children);
+const Subtitle = ({ children, className, ...rest }) => React.createElement("span", { ...rest, className: classNames(className, "section-title__subtitle") }, children);
+const Info = ({ className, children, ...rest }) => React.createElement("div", { ...rest, className: classNames(className, "section-title__info") }, children);
+const Overflow = ({ children, className, ...rest }) => React.createElement("div", { ...rest, className: classNames(className, "section-title__overflow") }, children);
+exports.EbaySectionTitle = EbaySectionTitle;
+exports.EbaySectionTitleInfo = Info;
+exports.EbaySectionTitleOverflow = Overflow;
+exports.EbaySectionTitleSubtitle = Subtitle;
+exports.EbaySectionTitleTitle = Title;

package/ebay-segmented-buttons/index.js

@@ -1 +1,46 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),b=require("classnames"),d=require("../common/component-utils/utils/index.js"),i=require("../icon-TuxfQndO.js"),p=({selected:s,children:n,className:u,...a})=>{const c=d.findComponent(n,i.EbayIcon),l=()=>{const r=d.excludeComponent(n,i.EbayIcon);return e.createElement("span",{className:"segmented-buttons__button-cell"},c,e.createElement("span",null,r))};return e.createElement("li",null,e.createElement("button",{className:b("segmented-buttons__button",u),"aria-current":s||void 0,...a},c?l():n))},_=({size:s,className:n,onChange:u=()=>{},children:a,...c})=>{const l=d.filterByType(a,p),[r,E]=e.useState(l.findIndex(t=>t.props.selected)||0),g=(t,o,m)=>{E(o),u(t,{index:o,value:m})};return e.createElement("div",{className:b("segmented-buttons",s&&`segmented-buttons--${s}`,n),...c},e.createElement("ul",null,l.map((t,o)=>{const{value:m,...y}=t.props;return e.cloneElement(t,{...y,onClick:S=>g(S,o,m),selected:o===r})})))};exports.EbaySegmentedButton=p;exports.EbaySegmentedButtons=_;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const classNames = require("classnames");
+const common_componentUtils_utils = require("../common/component-utils/utils/index.js");
+const icon = require("../icon-B17Di3YL.js");
+const SegmentedButton = ({ selected, children, className, ...rest }) => {
+  const icon$1 = common_componentUtils_utils.findComponent(children, icon.EbayIcon);
+  const iconWithText = () => {
+    const text = common_componentUtils_utils.excludeComponent(children, icon.EbayIcon);
+    return React.createElement(
+      "span",
+      { className: "segmented-buttons__button-cell" },
+      icon$1,
+      React.createElement("span", null, text)
+    );
+  };
+  return React.createElement(
+    "li",
+    null,
+    React.createElement("button", { className: classNames("segmented-buttons__button", className), "aria-current": selected || void 0, ...rest }, icon$1 ? iconWithText() : children)
+  );
+};
+const EbaySegmentedButtons = ({ size, className, onChange = () => {
+}, children, ...rest }) => {
+  const buttons = common_componentUtils_utils.filterByType(children, SegmentedButton);
+  const [selectedIndex, setSelectedIndex] = React.useState(buttons.findIndex((button) => button.props.selected) || 0);
+  const handleClick = (e, index, value) => {
+    setSelectedIndex(index);
+    onChange(e, { index, value });
+  };
+  return React.createElement(
+    "div",
+    { className: classNames("segmented-buttons", size && `segmented-buttons--${size}`, className), ...rest },
+    React.createElement("ul", null, buttons.map((button, i) => {
+      const { value, ...buttonRest } = button.props;
+      return React.cloneElement(button, {
+        ...buttonRest,
+        onClick: (e) => handleClick(e, i, value),
+        selected: i === selectedIndex
+      });
+    }))
+  );
+};
+exports.EbaySegmentedButton = SegmentedButton;
+exports.EbaySegmentedButtons = EbaySegmentedButtons;

package/ebay-select/index.js

@@ -1 +1,98 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),L=require("classnames"),R=require("../icon-TuxfQndO.js"),U=require("../common/component-utils/forwardRef/index.js"),j=require("../common/component-utils/utils/index.js"),x=require("../common/floating-label-utils/hooks/index.js"),d=({children:e,...t})=>n.createElement("option",{...t},e),v=e=>typeof e<"u",P=({value:e,defaultValue:t,className:s,borderless:o,name:p,disabled:r,onChange:a=()=>{},onBlur:h=()=>{},onFocus:m=()=>{},floatingLabel:f,forwardedRef:b,children:y,inputSize:l,invalid:E,...u})=>{const c=E||u["aria-invalid"]==="true",[F,w]=n.useState(t),{label:C,Container:G,onBlur:S,onFocus:N,ref:O}=x.useFloatingLabel({ref:b,inputId:u.id,className:s,disabled:r,label:f,inputValue:e,inputSize:l,invalid:c}),q=i=>{const{value:g,selectedIndex:I}=i.target;v(e)||w(g),a(i,{index:I,selected:[g]})},_=i=>{h(i),S()},B=i=>{m(i),N()},k=L("select",s,{"select--borderless":o,"select--large":l==="large"});return n.createElement(G,null,C,n.createElement("span",{className:k},n.createElement("select",{...u,name:p,value:v(e)?e:F,disabled:r,onChange:q,onBlur:_,onFocus:B,ref:O},M(y)),n.createElement(R.EbayIcon,{name:"chevronDown12",height:"8",width:"8"})))},T=U.withForwardRef(P);function D(e){const t={};return e.forEach(s=>{const o=s.props;o.optgroup&&(Object.prototype.hasOwnProperty.call(t,o.optgroup)||(t[o.optgroup]=[]),t[o.optgroup].push(o))}),t}function M(e){const t=[],s=[];let o={},p=!1;const r=j.filterByType(e,d).map(a=>n.cloneElement(a,{}));if(r){o=D(r);let a;return r.forEach((h,m)=>{const{value:f,optionClassName:b,children:y,optgroup:l}=h.props;if(p=l&&t.indexOf(l)===-1,p){a=l;const u=o[a].map(c=>n.createElement(d,{key:`opt-${c.value}`,value:c.value,className:c.optionClassName},c.children));s.push(n.createElement("optgroup",{key:m,label:l},u)),t.push(l)}else l||s.push(n.createElement(d,{key:m,value:f,className:b},y))}),s}}exports.EbaySelect=T;exports.EbaySelectOption=d;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const classNames = require("classnames");
+const icon = require("../icon-B17Di3YL.js");
+const common_componentUtils_forwardRef = require("../common/component-utils/forwardRef/index.js");
+const common_componentUtils_utils = require("../common/component-utils/utils/index.js");
+const common_floatingLabelUtils_hooks = require("../common/floating-label-utils/hooks/index.js");
+const EbaySelectOption = ({ children, ...rest }) => React.createElement("option", { ...rest }, children);
+const isControlled = (value) => typeof value !== "undefined";
+const EbaySelect = ({ value: controlledValue, defaultValue, className, borderless, name, disabled, onChange = () => {
+}, onBlur = () => {
+}, onFocus = () => {
+}, floatingLabel, forwardedRef, children, inputSize, invalid, ...rest }) => {
+  const isFieldInvalid = invalid || rest["aria-invalid"] === "true";
+  const [value, setValue] = React.useState(defaultValue);
+  const { label, Container, onBlur: onFloatingLabelBlur, onFocus: onFloatingLabelFocus, ref } = common_floatingLabelUtils_hooks.useFloatingLabel({
+    ref: forwardedRef,
+    inputId: rest.id,
+    className,
+    disabled,
+    label: floatingLabel,
+    inputValue: controlledValue,
+    inputSize,
+    invalid: isFieldInvalid
+  });
+  const handleSelectChange = (e) => {
+    const { value: newValue, selectedIndex } = e.target;
+    if (!isControlled(controlledValue)) {
+      setValue(newValue);
+    }
+    onChange(e, { index: selectedIndex, selected: [newValue] });
+  };
+  const handleBlur = (event) => {
+    onBlur(event);
+    onFloatingLabelBlur();
+  };
+  const handleFocus = (event) => {
+    onFocus(event);
+    onFloatingLabelFocus();
+  };
+  const selectClassName = classNames("select", className, {
+    "select--borderless": borderless,
+    "select--large": inputSize === `large`
+  });
+  return React.createElement(
+    Container,
+    null,
+    label,
+    React.createElement(
+      "span",
+      { className: selectClassName },
+      React.createElement("select", { ...rest, name, value: isControlled(controlledValue) ? controlledValue : value, disabled, onChange: handleSelectChange, onBlur: handleBlur, onFocus: handleFocus, ref }, options(children)),
+      React.createElement(icon.EbayIcon, { name: "chevronDown12", height: "8", width: "8" })
+    )
+  );
+};
+const ebaySelect = common_componentUtils_forwardRef.withForwardRef(EbaySelect);
+function optionGroups(data) {
+  const optGroups = {};
+  data.forEach((opt) => {
+    const option = opt.props;
+    if (option.optgroup) {
+      if (!Object.prototype.hasOwnProperty.call(optGroups, option.optgroup)) {
+        optGroups[option.optgroup] = [];
+      }
+      optGroups[option.optgroup].push(option);
+    }
+  });
+  return optGroups;
+}
+function options(children) {
+  const renderedGroups = [];
+  const allOptions = [];
+  let optGroups = {};
+  let withinGroup = false;
+  const childrenOpts = common_componentUtils_utils.filterByType(children, EbaySelectOption).map((c) => React.cloneElement(c, {}));
+  if (childrenOpts) {
+    optGroups = optionGroups(childrenOpts);
+    let currentGroupName;
+    childrenOpts.forEach((option, idx) => {
+      const { value, optionClassName, children: optionChildren, optgroup } = option.props;
+      withinGroup = optgroup && renderedGroups.indexOf(optgroup) === -1;
+      if (withinGroup) {
+        currentGroupName = optgroup;
+        const currentGroupOptions = optGroups[currentGroupName];
+        const opts = currentGroupOptions.map((groupOption) => React.createElement(EbaySelectOption, { key: `opt-${groupOption.value}`, value: groupOption.value, className: groupOption.optionClassName }, groupOption.children));
+        allOptions.push(React.createElement("optgroup", { key: idx, label: optgroup }, opts));
+        renderedGroups.push(optgroup);
+      } else if (!optgroup) {
+        allOptions.push(React.createElement(EbaySelectOption, { key: idx, value, className: optionClassName }, optionChildren));
+      }
+    });
+    return allOptions;
+  }
+}
+exports.EbaySelect = ebaySelect;
+exports.EbaySelectOption = EbaySelectOption;

package/ebay-signal/index.js

@@ -1 +1,9 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),t=require("classnames"),l=({status:a="neutral",...e})=>{const s=t(`signal signal--${a}`,e.className);return n.createElement("span",{...e,className:s})};exports.EbaySignal=l;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const classNames = require("classnames");
+const EbaySignal = ({ status = "neutral", ...rest }) => {
+  const className = classNames(`signal signal--${status}`, rest.className);
+  return React.createElement("span", { ...rest, className });
+};
+exports.EbaySignal = EbaySignal;

package/ebay-snackbar-dialog/index.js

@@ -1 +1,81 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const D=require("classnames"),e=require("react"),k=require("../dialog-previous-button-5cTKpmJ-.js");require("../icon-button-Cwaj-eT9.js");const f=({className:r,children:c,...l})=>e.createElement("button",{className:D(r,"fake-link"),...l},c),L=6e3,N=({className:r,onOpen:c=()=>{},onClose:l=()=>{},layout:S,open:i,children:h,onAction:u,...T})=>{const n=e.useRef(new Set),b=e.useRef(),[C,m]=e.useState(i),g=e.Children.toArray(h),o=g.find(t=>t.type===f),p=g.filter(t=>t.type!==f),s=()=>{clearTimeout(b.current)},d=()=>{m(!1),l()},E=()=>{n.current.size===0&&(s(),b.current=setTimeout(()=>{d()},L))},M=()=>{m(!0),c(),E()},q=()=>{s(),n.current.add("focus")},w=()=>{n.current.delete("focus"),E()},R=()=>{s(),n.current.add("mouseEnter")},v=()=>{n.current.delete("mouseEnter"),E()},B=t=>{var a,y;s(),u==null||u(t),(y=(a=o==null?void 0:o.props)==null?void 0:a.onClick)==null||y.call(a,t),d()};return e.useEffect(()=>()=>{s()},[]),e.useEffect(()=>{i?M():d()},[i]),e.createElement(k.DialogBaseWithState,{...T,open:C,isModal:!1,baseEl:"aside",classPrefix:"snackbar-dialog",transitionElement:"root",a11yCloseText:"",buttonPosition:"hidden",className:D(r,"snackbar-dialog--transition"),windowClass:S==="column"&&"snackbar-dialog__window--column",onFocus:q,onBlur:w,onMouseEnter:R,onMouseLeave:v},p,o?e.createElement(k.EbayDialogActions,null,e.cloneElement(o,{onClick:B})):null)};exports.EbaySnackbarDialog=N;exports.EbaySnackbarDialogAction=f;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const classNames = require("classnames");
+const React = require("react");
+const dialogPreviousButton = require("../dialog-previous-button-EC_Y6KaT.js");
+require("../icon-button-BQWoMgX1.js");
+const EbaySnackbarDialogAction = ({ className, children, ...rest }) => React.createElement("button", { className: classNames(className, "fake-link"), ...rest }, children);
+const DEFAULT_TIMEOUT_LENGTH = 6e3;
+const EbaySnackbarDialog = ({ className, onOpen = () => {
+}, onClose = () => {
+}, layout, open, children, onAction, ...rest }) => {
+  const eventSet = React.useRef(/* @__PURE__ */ new Set());
+  const timeoutRef = React.useRef();
+  const [isOpen, setIsOpen] = React.useState(open);
+  const childrenArray = React.Children.toArray(children);
+  const action = childrenArray.find((child) => child.type === EbaySnackbarDialogAction);
+  const content = childrenArray.filter((child) => child.type !== EbaySnackbarDialogAction);
+  const cancelCurrentCloseRequest = () => {
+    clearTimeout(timeoutRef.current);
+  };
+  const closeDialog = () => {
+    setIsOpen(false);
+    onClose();
+  };
+  const requestToCloseDialog = () => {
+    if (eventSet.current.size === 0) {
+      cancelCurrentCloseRequest();
+      timeoutRef.current = setTimeout(() => {
+        closeDialog();
+      }, DEFAULT_TIMEOUT_LENGTH);
+    }
+  };
+  const openDialog = () => {
+    setIsOpen(true);
+    onOpen();
+    requestToCloseDialog();
+  };
+  const handleFocus = () => {
+    cancelCurrentCloseRequest();
+    eventSet.current.add("focus");
+  };
+  const handleBlur = () => {
+    eventSet.current.delete("focus");
+    requestToCloseDialog();
+  };
+  const handleMouseEnter = () => {
+    cancelCurrentCloseRequest();
+    eventSet.current.add("mouseEnter");
+  };
+  const handleMouseLeave = () => {
+    eventSet.current.delete("mouseEnter");
+    requestToCloseDialog();
+  };
+  const handleAction = (event) => {
+    var _a, _b;
+    cancelCurrentCloseRequest();
+    onAction == null ? void 0 : onAction(event);
+    (_b = (_a = action == null ? void 0 : action.props) == null ? void 0 : _a.onClick) == null ? void 0 : _b.call(_a, event);
+    closeDialog();
+  };
+  React.useEffect(() => () => {
+    cancelCurrentCloseRequest();
+  }, []);
+  React.useEffect(() => {
+    if (open) {
+      openDialog();
+    } else {
+      closeDialog();
+    }
+  }, [open]);
+  return React.createElement(
+    dialogPreviousButton.DialogBaseWithState,
+    { ...rest, open: isOpen, isModal: false, baseEl: "aside", classPrefix: "snackbar-dialog", transitionElement: "root", a11yCloseText: "", buttonPosition: "hidden", className: classNames(className, "snackbar-dialog--transition"), windowClass: layout === "column" && "snackbar-dialog__window--column", onFocus: handleFocus, onBlur: handleBlur, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+    content,
+    action ? React.createElement(dialogPreviousButton.EbayDialogActions, null, React.cloneElement(action, {
+      onClick: handleAction
+    })) : null
+  );
+};
+exports.EbaySnackbarDialog = EbaySnackbarDialog;
+exports.EbaySnackbarDialogAction = EbaySnackbarDialogAction;

package/ebay-split-button/index.js

@@ -1 +1,22 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),a=require("../common/component-utils/utils/index.js"),B=require("../button-DGuEBUDJ.js"),i=require("../ebay-menu-button/index.js"),q=require("../menu-CV-INYLM.js");require("classnames");const M=({a11yMenuText:u,children:r,type:s,bodyState:t,a11yButtonLoadingText:l,onCollapse:c,onExpand:p,onSelect:b=()=>{},onChange:m=()=>{},ref:f,...e})=>{const o=[q.EbayMenuItem,i.EbayMenuButtonSeparator],y=a.filterBy(r,E=>!o.includes(E.type)),d=a.filterByType(r,o);return n.createElement("span",{className:"split-button"},n.createElement(B.EbayButton,{"aria-label":t==="loading"?l:void 0,...e,split:"start",bodyState:t==="expand"?void 0:t},y),n.createElement(i.EbayMenuButton,{priority:e.priority,disabled:e.disabled,transparent:e.transparent,size:e.size,type:s,split:"end",reverse:!0,a11yText:u,onCollapse:c,onExpand:p,onSelect:b,onChange:m},d))};exports.EbaySplitButton=M;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const common_componentUtils_utils = require("../common/component-utils/utils/index.js");
+const button = require("../button-B4bZIgwB.js");
+const ebayMenuButton = require("../ebay-menu-button/index.js");
+const menu = require("../menu-Bsy48CE1.js");
+require("classnames");
+const EbaySplitButton = ({ a11yMenuText, children, type, bodyState, a11yButtonLoadingText, onCollapse, onExpand, onSelect = () => {
+}, onChange = () => {
+}, ref, ...rest }) => {
+  const menuItemComponents = [menu.EbayMenuItem, ebayMenuButton.EbayMenuButtonSeparator];
+  const buttonLabel = common_componentUtils_utils.filterBy(children, (el) => !menuItemComponents.includes(el.type));
+  const menuItems = common_componentUtils_utils.filterByType(children, menuItemComponents);
+  return React.createElement(
+    "span",
+    { className: "split-button" },
+    React.createElement(button.EbayButton, { "aria-label": bodyState === "loading" ? a11yButtonLoadingText : void 0, ...rest, split: "start", bodyState: bodyState === "expand" ? void 0 : bodyState }, buttonLabel),
+    React.createElement(ebayMenuButton.EbayMenuButton, { priority: rest.priority, disabled: rest.disabled, transparent: rest.transparent, size: rest.size, type, split: "end", reverse: true, a11yText: a11yMenuText, onCollapse, onExpand, onSelect, onChange }, menuItems)
+  );
+};
+exports.EbaySplitButton = EbaySplitButton;

package/ebay-star-rating/index.js

@@ -1 +1,9 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),c=require("classnames"),i=require("../icon-TuxfQndO.js"),o=require("../range-DOsPN0h5.js"),l=o.range(1,5),m=({value:e,a11yText:t,className:r,...s})=>a.createElement("div",{role:"img","aria-label":t,className:c("star-rating",r),"data-stars":e,...s},l.map(n=>a.createElement(i.EbayIcon,{key:n,className:"star-rating__icon",name:"starDynamic"})));exports.EbayStarRating=m;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const classNames = require("classnames");
+const icon = require("../icon-B17Di3YL.js");
+const range = require("../range-C5qzyhg4.js");
+const stars = range.range(1, 5);
+const EbayStarRating = ({ value, a11yText, className, ...rest }) => React.createElement("div", { role: "img", "aria-label": a11yText, className: classNames("star-rating", className), "data-stars": value, ...rest }, stars.map((i) => React.createElement(icon.EbayIcon, { key: i, className: "star-rating__icon", name: "starDynamic" })));
+exports.EbayStarRating = EbayStarRating;

package/ebay-star-rating-select/index.js

@@ -1 +1,55 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),u=require("classnames"),v=require("../icon-TuxfQndO.js"),y=require("../range-DOsPN0h5.js"),I=require("../common/random-id/index.js"),b=y.range(1,5),r=n=>{let a=parseInt(n,0)||0;return a>5&&(a=0),a},C=({value:n=0,a11yText:a,className:m,a11yStarText:l=[],disabled:s,onChange:g=()=>{},onFocus:d=()=>{},onKeyDown:_=()=>{},name:f,...p})=>{const E=I.useRandomId(),N=f||`star-rating-${E}`,[i,o]=t.useState(r(n));t.useEffect(()=>{o(r(n))},[n]);const h=e=>c=>{s||(o(r(e)),_(c,{value:e}))},k=e=>c=>{s||(o(r(e)),g(c,{value:e}))},q=e=>c=>{s||(o(r(e)),d(c,{value:e}))};return t.createElement("div",{role:a&&"radiogroup","aria-label":a,className:u("star-rating-select",m),...p},b.map(e=>t.createElement("span",{className:"star-rating-select__radio",key:e},t.createElement("input",{"aria-label":l==null?void 0:l[e-1],className:u("star-rating-select__control",{"star-rating-select__control--filled":e<=i}),type:"radio",name:N,value:e,disabled:s,defaultChecked:i===e,onClick:k(e),onFocus:q(e),onKeyDown:h(e)}),t.createElement("span",{className:"star-rating-select__radio-icon"},t.createElement(v.EbayIcon,{className:"star-rating__icon",name:"starDynamic"})))))};exports.EbayStarRatingSelect=C;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const classNames = require("classnames");
+const icon = require("../icon-B17Di3YL.js");
+const range = require("../range-C5qzyhg4.js");
+const common_randomId = require("../common/random-id/index.js");
+const stars = range.range(1, 5);
+const getValue = (val) => {
+  let value = parseInt(val, 0) || 0;
+  if (value > 5) {
+    value = 0;
+  }
+  return value;
+};
+const EbayStarRatingSelect = ({ value = 0, a11yText, className, a11yStarText = [], disabled, onChange = () => {
+}, onFocus = () => {
+}, onKeyDown = () => {
+}, name, ...rest }) => {
+  const rId = common_randomId.useRandomId();
+  const inputName = name || `star-rating-${rId}`;
+  const [checkedValue, setChecked] = React.useState(getValue(value));
+  React.useEffect(() => {
+    setChecked(getValue(value));
+  }, [value]);
+  const handleKeyDown = (i) => (e) => {
+    if (!disabled) {
+      setChecked(getValue(i));
+      onKeyDown(e, { value: i });
+    }
+  };
+  const handleClick = (i) => (e) => {
+    if (!disabled) {
+      setChecked(getValue(i));
+      onChange(e, { value: i });
+    }
+  };
+  const handleFocus = (i) => (e) => {
+    if (!disabled) {
+      setChecked(getValue(i));
+      onFocus(e, { value: i });
+    }
+  };
+  return React.createElement("div", { role: a11yText && "radiogroup", "aria-label": a11yText, className: classNames("star-rating-select", className), ...rest }, stars.map((i) => React.createElement(
+    "span",
+    { className: "star-rating-select__radio", key: i },
+    React.createElement("input", { "aria-label": a11yStarText == null ? void 0 : a11yStarText[i - 1], className: classNames("star-rating-select__control", { "star-rating-select__control--filled": i <= checkedValue }), type: "radio", name: inputName, value: i, disabled, defaultChecked: checkedValue === i, onClick: handleClick(i), onFocus: handleFocus(i), onKeyDown: handleKeyDown(i) }),
+    React.createElement(
+      "span",
+      { className: "star-rating-select__radio-icon" },
+      React.createElement(icon.EbayIcon, { className: "star-rating__icon", name: "starDynamic" })
+    )
+  )));
+};
+exports.EbayStarRatingSelect = EbayStarRatingSelect;