@ebay/ui-core-react 1.0.0

package/ebay-field/label.js

@@ -0,0 +1,40 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var Label = function (_a) {
+    var className = _a.className, children = _a.children, _b = _a.stacked, stacked = _b === void 0 ? false : _b, _c = _a.required, required = _c === void 0 ? false : _c, _d = _a.position, position = _d === void 0 ? 'start' : _d, rest = __rest(_a, ["className", "children", "stacked", "required", "position"]);
+    var wrapperClassName = classnames_1.default("field__label", className, { 'field__label--stacked': stacked }, { 'field__label--end': position === 'end' });
+    var requiredMark = required ? react_1.default.createElement(react_1.default.Fragment, null,
+        " ",
+        react_1.default.createElement("sup", null, "*")) : null;
+    return react_1.default.createElement("label", __assign({ className: wrapperClassName }, rest),
+        children,
+        requiredMark);
+};
+exports.default = Label;

package/ebay-field/types.d.ts

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

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

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

package/ebay-field/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/ebay-floating-label/README.md

@@ -0,0 +1,51 @@
+# ebay-floating-label [DEPRECATED]
+
+Use `EbayTextbox` or `EbaySelect` with the `floatingLabel` attribute instead
+
+## Demo
+
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-floating-label--default-floating-label)
+
+## Import JS
+
+```jsx harmony
+import { EbayFloatingLabel } from '@ebay/ui-core-react/ebay-floating-label'
+```
+
+## Import following styles from SKIN
+
+```jsx harmony
+import "@ebay/skin/floating-label";
+```
+
+## or import styles using SCSS/CSS
+
+```jsx harmony
+import "@ebay/skin/floating-label.css";
+```
+
+## Usage
+
+```
+yarn add @ebay/ui-core-react
+```
+
+```jsx harmony
+<EbayFloatingLabel label="Search" value="Search for anything" />
+```
+
+## Attributes
+
+| Name        | Type     | Stateful | Required | Description                                                                |
+| ----------- | -------- | -------- | -------- | -------------------------------------------------------------------------- |
+| `id`        | String   | No       | Yes      | ID for the input element, necessary for accessibility                      |
+| `label`     | String   | No       | No       | Text of the label                                                          |
+| `disabled`  | Boolean  | No       | No       | indicates the field is disabled if true                                    |
+| `invalid`   | Boolean  | No       | No       | indicates a field-level error with red border if true                      |
+| `value`     | String   | No       | No       | Value of the input                                                         |
+| `inputSize` | String   | No       | No       | `default` (default), `large`                                               |
+| `elementType` | String   | No       | No       | `textbox` (default), `select`                                               |
+| `onFocus`   | Function | No       | No       | called when input gets focus, parameters passed: `originalEvent`, `value`  |
+| `onBlur`    | Function | No       | No       | called when input loses focus, parameters passed: `originalEvent`, `value` |
+
+It supports all the events supported by an input element (e.g. `onChange`, `onInput`, `onKeyDown`, `onKeyUp`)

package/ebay-floating-label/floating-label.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { EbayTextboxProps } from '../ebay-textbox';
+import { EbaySelectProps } from '../ebay-select';
+declare type Props = EbayTextboxProps & EbaySelectProps & {
+    label: string;
+    elementType?: 'textbox' | 'select';
+};
+declare const _default: React.ForwardRefExoticComponent<Pick<Props, "form" | "label" | "slot" | "style" | "title" | "pattern" | "type" | "name" | "className" | "forwardedRef" | "color" | "height" | "id" | "lang" | "max" | "min" | "width" | "role" | "tabIndex" | "crossOrigin" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "list" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "step" | "size" | "fluid" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "borderless" | "invalid" | "checked" | "accept" | "alt" | "autoComplete" | "capture" | "cols" | "maxLength" | "minLength" | "multiple" | "readOnly" | "required" | "rows" | "src" | "wrap" | "underline" | "inputSize" | "dirName" | "multiline" | "onButtonClick" | "floatingLabel" | "elementType"> & React.RefAttributes<React.FC<Props>>>;
+export default _default;
+//# sourceMappingURL=floating-label.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"floating-label.d.ts","sourceRoot":"","sources":["../../src/ebay-floating-label/floating-label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAe,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAE/D,OAAO,EAAc,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAE5D,aAAK,KAAK,GAAG,gBAAgB,GAAG,eAAe,GAAG;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;CACrC,CAAC;;AA2BF,wBAAgD"}

package/ebay-floating-label/floating-label.js

@@ -0,0 +1,40 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var ebay_textbox_1 = require("../ebay-textbox");
+var component_utils_1 = require("../common/component-utils");
+var ebay_select_1 = require("../ebay-select");
+var EbayFloatingLabel = function (_a) {
+    var label = _a.label, forwardedRef = _a.forwardedRef, _b = _a.elementType, elementType = _b === void 0 ? 'textbox' : _b, rest = __rest(_a, ["label", "forwardedRef", "elementType"]);
+    var inputRef = function () { return forwardedRef; };
+    if (elementType === 'select') {
+        return (react_1.default.createElement(ebay_select_1.EbaySelect, __assign({}, rest, { floatingLabel: label })));
+    }
+    return (react_1.default.createElement(ebay_textbox_1.EbayTextbox, __assign({}, rest, { ref: inputRef(), floatingLabel: label })));
+};
+exports.default = component_utils_1.withForwardRef(EbayFloatingLabel);

package/ebay-floating-label/hooks.d.ts

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

package/ebay-floating-label/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/ebay-floating-label/hooks.tsx"],"names":[],"mappings":"AAAA,OAAc,EAA+B,EAAE,EAAE,SAAS,EAAe,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAGjH,aAAK,QAAQ,GAAG,SAAS,CAAC,iBAAiB,GAAG,mBAAmB,GAAG,gBAAgB,CAAC,GAAG,GAAG,CAAA;AAC3F,aAAK,sBAAsB,GAAG;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAChC,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAA;AAED,aAAK,uBAAuB,GAAG;IAC3B,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,EAAE,CAAC;QAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IACxC,GAAG,EAAE,QAAQ,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACvB,CAAA;AA4CD,wBAAgB,gBAAgB,CAAC,EAC7B,GAAG,EACH,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAK,EACL,SAAS,EACT,UAAU,EACV,WAAW,EACX,OAAO,EACV,EAAG,sBAAsB,GAAG,uBAAuB,CA2EnD"}

package/ebay-floating-label/hooks.js

@@ -0,0 +1,135 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFloatingLabel = void 0;
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var classPrefix = 'floating-label__label';
+// input background in Skin 12, used for autofill detection
+var textboxElementBackgroundRGB = [
+    'rgb(245, 245, 245)',
+    'rgb(247, 247, 247)' // From skin version 12.6.0
+];
+// check for computed background color because of Chrome autofill bug
+// https://stackoverflow.com/questions/35049555/chrome-autofill-autocomplete-no-value-for-password/35783761#35783761
+var isAutofilled = function (input) {
+    return input && !textboxElementBackgroundRGB.includes(getComputedStyle(input).backgroundColor);
+};
+var hasValue = function (input) { var _a; return ((_a = input === null || input === void 0 ? void 0 : input.value) === null || _a === void 0 ? void 0 : _a.length) > 0; };
+var isSelect = function (element) { return (element === null || element === void 0 ? void 0 : element.tagName) === "SELECT"; };
+var setPlaceholder = function (element, value) {
+    // For select elements we need to temporary remove the text of the first option
+    // when the element is not focused, so only the label is shown. We still need to
+    // maintain the width of the input so we manually change the "min-width"
+    // Inspired by the marko implementation: https://github.com/makeup/makeup-js/blob/master/packages/makeup-floating-label/src/index.js
+    if (isSelect(element) && !hasValue(element.querySelector("option"))) {
+        element.style['min-width'] = '';
+        var beforeWidth = element.offsetWidth;
+        element.querySelector("option").text = value;
+        if (!value && beforeWidth > element.offsetWidth) {
+            element.style['min-width'] = beforeWidth + "px";
+        }
+    }
+};
+var getPlaceholder = function (element) {
+    if (isSelect(element)) {
+        return element.querySelector("option").text;
+    }
+    return element === null || element === void 0 ? void 0 : element.placeholder;
+};
+function useFloatingLabel(_a) {
+    var _b;
+    var ref = _a.ref, inputId = _a.inputId, className = _a.className, disabled = _a.disabled, label = _a.label, inputSize = _a.inputSize, inputValue = _a.inputValue, placeholder = _a.placeholder, invalid = _a.invalid;
+    var _internalInputRef = react_1.useRef(null);
+    var inputRef = function () { return ref || _internalInputRef; };
+    var _c = react_1.useState(true), isFloating = _c[0], setFloating = _c[1];
+    var _d = react_1.useState(false), shouldAnimate = _d[0], setAnimate = _d[1];
+    var _e = react_1.useState(false), isFocused = _e[0], setFocused = _e[1];
+    var selectFirstOptionText = react_1.useRef("");
+    var onBlur = function () {
+        setAnimate(true);
+        setFloating(false);
+        setFocused(false);
+        setPlaceholder(inputRef().current, "");
+    };
+    var onFocus = function () {
+        var _a;
+        setAnimate(true);
+        setFloating(true);
+        setFocused(true);
+        setPlaceholder((_a = inputRef()) === null || _a === void 0 ? void 0 : _a.current, selectFirstOptionText.current);
+    };
+    react_1.useEffect(function () {
+        var _a, _b;
+        if (!label) {
+            return;
+        }
+        selectFirstOptionText.current = getPlaceholder((_a = inputRef()) === null || _a === void 0 ? void 0 : _a.current);
+        setPlaceholder((_b = inputRef()) === null || _b === void 0 ? void 0 : _b.current, "");
+    }, []);
+    react_1.useEffect(function () {
+        var _a, _b;
+        if (!label) {
+            return;
+        }
+        setFloating(isFocused || hasValue((_a = inputRef()) === null || _a === void 0 ? void 0 : _a.current) || isAutofilled((_b = inputRef()) === null || _b === void 0 ? void 0 : _b.current));
+    }, [isFocused, inputValue]);
+    var labelClassName = classnames_1.default(className, classPrefix, (_b = {},
+        _b[classPrefix + "--disabled"] = disabled,
+        _b[classPrefix + "--animate"] = shouldAnimate,
+        _b[classPrefix + "--inline"] = !isFloating,
+        _b[classPrefix + "--invalid"] = invalid,
+        _b));
+    var floatingLabelClassName = classnames_1.default("floating-label", {
+        'floating-label--large': inputSize === "large"
+    });
+    var FragmentContainer = react_1.useCallback(function (_a) {
+        var children = _a.children;
+        return react_1.default.createElement(react_1.default.Fragment, null, children);
+    }, []);
+    var FloatingLabelContainer = react_1.useCallback(function (_a) {
+        var children = _a.children;
+        return react_1.default.createElement("span", { className: floatingLabelClassName }, children);
+    }, [floatingLabelClassName]);
+    if (!label) {
+        return {
+            label: null,
+            Container: FragmentContainer,
+            onBlur: function () { },
+            onFocus: function () { },
+            ref: inputRef(),
+            placeholder: placeholder
+        };
+    }
+    var labelElement = react_1.default.createElement("label", { htmlFor: inputId, className: labelClassName }, label);
+    return {
+        label: labelElement,
+        Container: FloatingLabelContainer,
+        onBlur: onBlur,
+        onFocus: onFocus,
+        ref: inputRef(),
+        placeholder: !isFloating ? null : placeholder
+    };
+}
+exports.useFloatingLabel = useFloatingLabel;

package/ebay-floating-label/index.d.ts

@@ -0,0 +1,3 @@
+export { default as EbayFloatingLabel } from './floating-label';
+export { Size } from '../ebay-textbox';
+//# sourceMappingURL=index.d.ts.map

package/ebay-floating-label/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-floating-label/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAC/D,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAA"}

package/ebay-floating-label/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var floating_label_1 = require("./floating-label");
+Object.defineProperty(exports, "EbayFloatingLabel", { enumerable: true, get: function () { return floating_label_1.default; } });

package/ebay-fullscreen-dialog/README.md

@@ -0,0 +1,33 @@
+# EbayFullscreenDialog
+
+## Usage
+
+```react
+<EbayFullscreenDialog open a11yClosetext = "Close">
+    <EbayDialogHeader>Heading</EbayDialogHeader>
+    <p>Body content</p>
+    <EbayDialogFooter>Heading</EbayDialogHeader>
+</EbayFullscreenDialog>
+```
+
+## Attributes
+
+Name | Type | Stateful | Required | Description
+--- | --- | --- | --- | ---
+`open` | Boolean | Yes | No | Whether dialog is open.
+`focus` | String | No | No | An id for an element which will receive focus when the drawer opens (defaults to close button).
+`a11yCloseText` | String | No | Yes | A11y text for close button and mask.
+`animated` | Boolean | Yes | No | Renders the dialog with an animation. Note that the dialog will always be present in the DOM
+
+## Events
+
+Event | Data | Description
+--- | --- | ---
+`onOpen` |  | Trigggered when dialog is opened
+`onClose` |  | Triggered when dialog is closed
+
+## EbayDialogHeader
+Will render a header content for fullscreen dialog. Will always render the header element even if this is not present
+
+## EbayDialogFooter
+Will render the footer content for fullscreen dialog. If not present then will not have any footer.

package/ebay-fullscreen-dialog/fullscreen-dialog.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { DialogBaseProps } from '../ebay-dialog-base';
+export interface Props<T = any> extends DialogBaseProps<T> {
+    open?: boolean;
+    sliding?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+declare const EbayFullscreenDialog: FC<Props>;
+export default EbayFullscreenDialog;
+//# sourceMappingURL=fullscreen-dialog.d.ts.map

package/ebay-fullscreen-dialog/fullscreen-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen-dialog.d.ts","sourceRoot":"","sources":["../../src/ebay-fullscreen-dialog/fullscreen-dialog.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,eAAe,EAAuB,MAAM,qBAAqB,CAAA;AAI1E,MAAM,WAAW,KAAK,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACxD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAkB;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,oBAAoB,EAAE,EAAE,CAAC,KAAK,CAqBnC,CAAA;AAED,eAAe,oBAAoB,CAAA"}

package/ebay-fullscreen-dialog/fullscreen-dialog.js

@@ -0,0 +1,36 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var ebay_dialog_base_1 = require("../ebay-dialog-base");
+var classPrefix = 'fullscreen-dialog';
+var EbayFullscreenDialog = function (_a) {
+    var open = _a.open, _b = _a.onClose, onClose = _b === void 0 ? function () { } : _b, _c = _a.onOpen, onOpen = _c === void 0 ? function () { } : _c, _d = _a.a11yCloseText, a11yCloseText = _d === void 0 ? 'Close Dialog' : _d, className = _a.className, animated = _a.animated, sliding = _a.sliding, rest = __rest(_a, ["open", "onClose", "onOpen", "a11yCloseText", "className", "animated", "sliding"]);
+    return (react_1.default.createElement(ebay_dialog_base_1.DialogBaseWithState, __assign({}, rest, { classPrefix: classPrefix, buttonPosition: "left", onCloseBtnClick: onClose, transitionElement: "window", animated: sliding || animated, className: classnames_1.default(className, classPrefix + "--mask-fade-slow"), windowClass: classnames_1.default(classPrefix + "__window", classPrefix + "__window--slide"), open: open })));
+};
+exports.default = EbayFullscreenDialog;

package/ebay-fullscreen-dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EbayFullscreenDialog } from './fullscreen-dialog';
+//# sourceMappingURL=index.d.ts.map

package/ebay-fullscreen-dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-fullscreen-dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,qBAAqB,CAAA"}

package/ebay-fullscreen-dialog/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var fullscreen_dialog_1 = require("./fullscreen-dialog");
+Object.defineProperty(exports, "EbayFullscreenDialog", { enumerable: true, get: function () { return fullscreen_dialog_1.default; } });

package/ebay-icon/README.md

@@ -0,0 +1,21 @@
+# ebay-icon
+The component will include the actual SVG markup in the HTML and then reference the chosen icon.
+
+## Usage
+```jsx
+import { EbayIcon } from '@ebay/ui-core-react/ebay-icon'
+import '@ebay/skin/icon'
+
+<EbayIcon name="arrowLeft" />
+```
+
+### Notes
+Make sure you use `<EbaySvg />` in your code (ideally on server side only), so that actual SVG icons exist inside HTML.
+
+## Attributes
+
+Name | Type | Stateful | Required | Description
+--- | --- | --- | --- | ---
+`name` | String | No | Yes | name of the icon from [Skin](./icon.tsx), transparent versions of colored icons has `-transparent` suffix
+`noSkinClasses` | Boolean | No | No | Used for special cases where `icon` classes from Skin should not be applied
+`a11yText` | String | No | Yes | text for non-decorative inline icon; icon is assumed to be decorative if this is not passed

package/ebay-icon/icon.d.ts

@@ -0,0 +1,14 @@
+import React, { Ref, SVGProps } from 'react';
+import { Icon } from './types';
+export declare type A11yVariant = 'label';
+export declare type EbayIconProps = SVGProps<SVGSVGElement> & {
+    className?: string;
+    name: Icon;
+    noSkinClasses?: boolean;
+    a11yText?: string;
+    a11yVariant?: A11yVariant;
+    forwardedRef?: Ref<SVGSVGElement>;
+};
+declare const _default: React.ForwardRefExoticComponent<Pick<EbayIconProps, "string" | "style" | "clipPath" | "filter" | "mask" | "path" | "type" | "overflow" | "name" | "className" | "noSkinClasses" | "a11yText" | "a11yVariant" | "forwardedRef" | "color" | "height" | "id" | "lang" | "max" | "media" | "method" | "min" | "target" | "width" | "role" | "tabIndex" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "alignmentBaseline" | "allowReorder" | "alphabetic" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "azimuth" | "baseFrequency" | "baselineShift" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clip" | "clipPathUnits" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "colorProfile" | "colorRendering" | "contentScriptType" | "contentStyleType" | "cursor" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "direction" | "display" | "divisor" | "dominantBaseline" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "end" | "exponent" | "externalResourcesRequired" | "fill" | "fillOpacity" | "fillRule" | "filterRes" | "filterUnits" | "floodColor" | "floodOpacity" | "focusable" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "format" | "fr" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphOrientationVertical" | "glyphRef" | "gradientTransform" | "gradientUnits" | "hanging" | "horizAdvX" | "horizOriginX" | "href" | "ideographic" | "imageRendering" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "letterSpacing" | "lightingColor" | "limitingConeAngle" | "local" | "markerEnd" | "markerHeight" | "markerMid" | "markerStart" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mathematical" | "mode" | "numOctaves" | "offset" | "opacity" | "operator" | "order" | "orient" | "orientation" | "origin" | "overlinePosition" | "overlineThickness" | "paintOrder" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "pointerEvents" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rotate" | "rx" | "ry" | "scale" | "seed" | "shapeRendering" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "stopColor" | "stopOpacity" | "strikethroughPosition" | "strikethroughThickness" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textAnchor" | "textDecoration" | "textLength" | "textRendering" | "to" | "transform" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeBidi" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "vectorEffect" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "visibility" | "vMathematical" | "widths" | "wordSpacing" | "writingMode" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & React.RefAttributes<React.FC<EbayIconProps>>>;
+export default _default;
+//# sourceMappingURL=icon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/ebay-icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,GAAG,EAAE,QAAQ,EAAuB,MAAM,OAAO,CAAA;AAIrE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAM9B,oBAAY,WAAW,GAAG,OAAO,CAAC;AAElC,oBAAY,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,IAAI,CAAC;IACX,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,YAAY,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,CAAC;CACrC,CAAC;;AA8DF,wBAAuC"}

package/ebay-icon/icon.js

@@ -0,0 +1,87 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var component_utils_1 = require("../common/component-utils");
+var random_id_1 = require("../common/random-id");
+var SMALL_ICON_SIZE = 16;
+var LARGE_ICON_SIZE = 64;
+var DEFAULT_ICON_SIZE = 24;
+var EbayIcon = function (_a) {
+    var _b;
+    var name = _a.name, extraClass = _a.className, _c = _a.noSkinClasses, noSkinClasses = _c === void 0 ? false : _c, a11yText = _a.a11yText, a11yVariant = _a.a11yVariant, forwardedRef = _a.forwardedRef, rest = __rest(_a, ["name", "className", "noSkinClasses", "a11yText", "a11yVariant", "forwardedRef"]);
+    var _d = react_1.useState(''), rId = _d[0], setRandomId = _d[1];
+    react_1.useEffect(function () {
+        setRandomId(random_id_1.randomId());
+    }, []);
+    var noTitle = a11yVariant === 'label';
+    var a11yTextId = a11yText && "icon-title-" + rId;
+    var a11yProps = a11yText ? {
+        'aria-labelledby': noTitle ? undefined : a11yTextId,
+        'aria-label': noTitle ? a11yText : undefined,
+        role: 'img'
+    } : {
+        'aria-hidden': true
+    };
+    var iconSize = getIconSize(name) + "px";
+    var kebabName = kebabCased(name);
+    var className = classnames_1.default(extraClass, { 'icon': !noSkinClasses }, (_b = {}, _b["icon--" + kebabName] = !noSkinClasses, _b));
+    return (react_1.default.createElement("svg", __assign({ height: iconSize, width: iconSize }, rest, { className: className, xmlns: "http://www.w3.org/2000/svg", focusable: false, ref: forwardedRef }, a11yProps),
+        a11yText && !noTitle && react_1.default.createElement("title", { id: a11yTextId }, a11yText),
+        react_1.default.createElement("use", { xlinkHref: "#icon-" + kebabName })));
+};
+function getIconSize(iconName) {
+    var sizeCandidate = iconName.split('-').slice(-1)[0];
+    return {
+        small: SMALL_ICON_SIZE,
+        large: LARGE_ICON_SIZE
+    }[sizeCandidate] || DEFAULT_ICON_SIZE;
+}
+function kebabCased(str) {
+    return str.replace(/([A-Z])/g, function (s, c) { return "-" + c.toLowerCase(); });
+}
+exports.default = component_utils_1.withForwardRef(EbayIcon);

package/ebay-icon/index.d.ts

@@ -0,0 +1,3 @@
+export { default as EbayIcon, EbayIconProps, A11yVariant } from './icon';
+export { Icon } from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA"}

package/ebay-icon/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var icon_1 = require("./icon");
+Object.defineProperty(exports, "EbayIcon", { enumerable: true, get: function () { return icon_1.default; } });