@thenewboston/ui
Version:
UI Library for the thenewboston community
682 lines (581 loc) • 27.2 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
var clsx = _interopDefault(require('clsx'));
var utils = require('@thenewboston/utils');
var AccountGroupIcon = _interopDefault(require('mdi-react/AccountGroupIcon'));
var AlertCircleCheckOutlineIcon = _interopDefault(require('mdi-react/AlertCircleCheckOutlineIcon'));
var AlertCircleIcon = _interopDefault(require('mdi-react/AlertCircleIcon'));
var AlertCircleOutlineIcon = _interopDefault(require('mdi-react/AlertCircleOutlineIcon'));
var AlertIcon = _interopDefault(require('mdi-react/AlertIcon'));
var ArrowCollapseDownIcon = _interopDefault(require('mdi-react/ArrowCollapseDownIcon'));
var ArrowDownIcon = _interopDefault(require('mdi-react/ArrowDownIcon'));
var ArrowLeftIcon = _interopDefault(require('mdi-react/ArrowLeftIcon'));
var ArrowRightIcon = _interopDefault(require('mdi-react/ArrowRightIcon'));
var ArrowUpIcon = _interopDefault(require('mdi-react/ArrowUpIcon'));
var BellIcon = _interopDefault(require('mdi-react/BellIcon'));
var ChartAreasplineIcon = _interopDefault(require('mdi-react/ChartAreasplineIcon'));
var ChartTimelineVariantShimmer = _interopDefault(require('mdi-react/ChartTimelineVariantShimmerIcon'));
var CheckCircleIcon = _interopDefault(require('mdi-react/CheckCircleIcon'));
var CheckboxBlankCircleIcon = _interopDefault(require('mdi-react/CheckboxBlankCircleIcon'));
var CheckboxBlankCircleOutlineIcon = _interopDefault(require('mdi-react/CheckboxBlankCircleOutlineIcon'));
var CheckboxBlankOutlineIcon = _interopDefault(require('mdi-react/CheckboxBlankOutlineIcon'));
var CheckboxMarkedIcon = _interopDefault(require('mdi-react/CheckboxMarkedIcon'));
var ChevronDownIcon = _interopDefault(require('mdi-react/ChevronDownIcon'));
var ChevronLeftIcon = _interopDefault(require('mdi-react/ChevronLeftIcon'));
var ChevronRightIcon = _interopDefault(require('mdi-react/ChevronRightIcon'));
var ChevronUpIcon = _interopDefault(require('mdi-react/ChevronUpIcon'));
var CloseIcon = _interopDefault(require('mdi-react/CloseIcon'));
var ContentCopyIcon = _interopDefault(require('mdi-react/ContentCopyIcon'));
var CurrencyUsdIcon = _interopDefault(require('mdi-react/CurrencyUsdIcon'));
var DevToIcon = _interopDefault(require('mdi-react/DevToIcon'));
var DiscordIcon = _interopDefault(require('mdi-react/DiscordIcon'));
var DotsVerticalIcon = _interopDefault(require('mdi-react/DotsVerticalIcon'));
var DownloadIcon = _interopDefault(require('mdi-react/DownloadIcon'));
var EarthIcon = _interopDefault(require('mdi-react/EarthIcon'));
var EyeIcon = _interopDefault(require('mdi-react/EyeIcon'));
var EyeOffIcon = _interopDefault(require('mdi-react/EyeOffIcon'));
var FacebookIcon = _interopDefault(require('mdi-react/FacebookIcon'));
var FileDocumentIcon = _interopDefault(require('mdi-react/FileDocumentIcon'));
var FileDownloadIcon = _interopDefault(require('mdi-react/FileDownloadIcon'));
var FilterMenuIcon = _interopDefault(require('mdi-react/FilterMenuIcon'));
var ForumIcon = _interopDefault(require('mdi-react/ForumIcon'));
var GithubIcon = _interopDefault(require('mdi-react/GithubIcon'));
var GoogleControllerIcon = _interopDefault(require('mdi-react/GoogleControllerIcon'));
var HammerWrenchIcon = _interopDefault(require('mdi-react/HammerWrenchIcon'));
var HumanHandsupIcon = _interopDefault(require('mdi-react/HumanHandsupIcon'));
var InformationIcon = _interopDefault(require('mdi-react/InformationIcon'));
var InstagramIcon = _interopDefault(require('mdi-react/InstagramIcon'));
var LanConnectIcon = _interopDefault(require('mdi-react/LanConnectIcon'));
var LanDisconnectIcon = _interopDefault(require('mdi-react/LanDisconnectIcon'));
var LinkIcon = _interopDefault(require('mdi-react/LinkIcon'));
var LinkedinIcon = _interopDefault(require('mdi-react/LinkedinIcon'));
var LoadingIcon = _interopDefault(require('mdi-react/LoadingIcon'));
var MapMarkerCheckIcon = _interopDefault(require('mdi-react/MapMarkerCheckIcon'));
var MenuIcon = _interopDefault(require('mdi-react/MenuIcon'));
var MenuRightIcon = _interopDefault(require('mdi-react/MenuRightIcon'));
var MinusIcon = _interopDefault(require('mdi-react/MinusIcon'));
var NotebookCheckOutlineIcon = _interopDefault(require('mdi-react/NotebookCheckOutlineIcon'));
var OpenInNewIcon = _interopDefault(require('mdi-react/OpenInNewIcon'));
var PencilIcon = _interopDefault(require('mdi-react/PencilIcon'));
var PinterestIcon = _interopDefault(require('mdi-react/PinterestIcon'));
var PlayBoxMultipleIcon = _interopDefault(require('mdi-react/PlayBoxMultipleIcon'));
var PlayIcon = _interopDefault(require('mdi-react/PlayIcon'));
var PlusIcon = _interopDefault(require('mdi-react/PlusIcon'));
var QrcodeIcon = _interopDefault(require('mdi-react/QrcodeIcon'));
var RadioboxBlankIcon = _interopDefault(require('mdi-react/RadioboxBlankIcon'));
var RadioboxMarkedIcon = _interopDefault(require('mdi-react/RadioboxMarkedIcon'));
var RedditIcon = _interopDefault(require('mdi-react/RedditIcon'));
var RefreshIcon = _interopDefault(require('mdi-react/RefreshIcon'));
var SlackIcon = _interopDefault(require('mdi-react/SlackIcon'));
var SortAscendingIcon = _interopDefault(require('mdi-react/SortAscendingIcon'));
var SortDescendingIcon = _interopDefault(require('mdi-react/SortDescendingIcon'));
var SyncIcon = _interopDefault(require('mdi-react/SyncIcon'));
var TextBoxIcon = _interopDefault(require('mdi-react/TextBoxIcon'));
var ThumbsUpIcon = _interopDefault(require('mdi-react/ThumbsUpIcon'));
var TrophyIcon = _interopDefault(require('mdi-react/TrophyIcon'));
var TwitchIcon = _interopDefault(require('mdi-react/TwitchIcon'));
var TwitterIcon = _interopDefault(require('mdi-react/TwitterIcon'));
var YoutubeIcon = _interopDefault(require('mdi-react/YoutubeIcon'));
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = ":root{--color-alert:#ed5f74;--color-black:#000;--color-danger:#d30c15;--color-gray-050:#f7fafc;--color-gray-100:#e3e8ee;--color-gray-300:#a3acb9;--color-gray-500:#697386;--color-gray-700:#3c4257;--color-green-100:#cbf4c9;--color-green-500:#09825d;--color-primary-disabled-fill:#fff9f9;--color-primary-disabled-text:#94c9ea;--color-primary-disabled:#b2d7ee;--color-primary-hover:#06457a;--color-primary-outline-bg:#b9daee;--color-primary:#042235;--color-red-100:#fde2dd;--color-red-500:#cd3d64;--color-secondary:#556cd6;--color-tertiary:#1ea672;--color-white:#fff;--color-yellow-100:#f8e5b9;--color-yellow-500:#bb5504}";
styleInject(css_248z);
var TnbIcon = function TnbIcon(_ref) {
var className = _ref.className,
_ref$color = _ref.color,
color = _ref$color === void 0 ? 'currentColor' : _ref$color,
onClick = _ref.onClick,
_ref$size = _ref.size,
size = _ref$size === void 0 ? 24 : _ref$size;
return React__default.createElement("svg", {
className: clsx('TnbIcon', {
className: className
}),
width: size,
height: size,
fill: color,
onClick: onClick,
viewBox: "0 0 24 24"
}, React__default.createElement("path", {
d: "M4.23529 0.5H0L7.76471 8.5L0 16.5H4.23529L12 8.5L4.23529 0.5Z"
}));
};
var css_248z$1 = ".Icon{box-sizing:border-box;line-height:1.2;align-items:center;border-radius:50%;display:flex;justify-content:center;transition:background-color .3s,color .3s}.Icon:focus{background:var(--color-gray-100)}.Icon--button{cursor:pointer}.Icon--button:hover{background:var(--color-gray-100)}.Icon--disabled{color:var(--color-gray-300);cursor:default}.Icon--disabled:hover{background:transparent}.TnbIcon{margin-right:-6px;margin-top:1px}";
styleInject(css_248z$1);
(function (IconType) {
IconType["accountGroup"] = "account-group";
IconType["alert"] = "alert";
IconType["alertCircle"] = "alert-circle";
IconType["alertCircleCheckOutline"] = "alert-circle-check-outline";
IconType["alertCircleOutline"] = "alert-circle-outline";
IconType["arrowCollapseDown"] = "arrow-collapse-down";
IconType["arrowDown"] = "arrow-down";
IconType["arrowLeft"] = "arrow-left";
IconType["arrowRight"] = "arrow-right";
IconType["arrowUp"] = "arrow-up";
IconType["bell"] = "bell";
IconType["chartAreaspline"] = "chart-areaspline";
IconType["chartTimelineVariantShimmer"] = "chart-timeline-variant-shimmer";
IconType["checkCircle"] = "check-circle";
IconType["checkboxBlankCircle"] = "checkbox-blank-circle";
IconType["checkboxBlankCircleOutline"] = "checkbox-blank-circle-outline";
IconType["checkboxBlankOutline"] = "checkbox-blank-outline";
IconType["checkboxMarked"] = "checkbox-marked";
IconType["chevronDown"] = "chevron-down";
IconType["chevronLeft"] = "chevron-left";
IconType["chevronRight"] = "chevron-right";
IconType["chevronUp"] = "chevron-up";
IconType["close"] = "close";
IconType["contentCopy"] = "content-copy";
IconType["currencyUsd"] = "currency-usd";
IconType["devTo"] = "dev-to";
IconType["discord"] = "discord";
IconType["dotsVertical"] = "dots-vertical";
IconType["download"] = "download";
IconType["earth"] = "earth";
IconType["eye"] = "eye";
IconType["eyeOff"] = "eye-off";
IconType["facebook"] = "facebook";
IconType["fileDocument"] = "file-document";
IconType["fileDownload"] = "file-download";
IconType["filterMenu"] = "filter-menu";
IconType["forum"] = "forum";
IconType["github"] = "github";
IconType["googleController"] = "google-controller";
IconType["hammerWrench"] = "hammer-wrench";
IconType["humanHandsup"] = "human-handsup";
IconType["information"] = "information";
IconType["instagram"] = "instagram";
IconType["lanConnect"] = "lan-connect";
IconType["lanDisconnect"] = "lan-disconnect";
IconType["link"] = "link";
IconType["linkedin"] = "linkedin";
IconType["loading"] = "loading";
IconType["mapMarkerCheck"] = "map-marker-check";
IconType["menu"] = "menu";
IconType["menuRight"] = "menu-right";
IconType["minus"] = "minus";
IconType["notebookCheckOutline"] = "notebook-check-outline";
IconType["openInNew"] = "open-in-new";
IconType["pencil"] = "pencil";
IconType["pinterest"] = "pinterest";
IconType["play"] = "play";
IconType["playBoxMultiple"] = "playBoxMultiple";
IconType["plus"] = "plus";
IconType["qrcode"] = "qrcode";
IconType["radioboxBlank"] = "radiobox-blank";
IconType["radioboxMarked"] = "radiobox-marked";
IconType["reddit"] = "reddit";
IconType["refresh"] = "refresh";
IconType["slack"] = "slack";
IconType["sortAscending"] = "sort-ascending";
IconType["sortDescending"] = "sort-descending";
IconType["sync"] = "sync";
IconType["textBox"] = "text-box";
IconType["thumbsUp"] = "thumbs-up";
IconType["tnb"] = "tnb";
IconType["trophy"] = "trophy";
IconType["twitch"] = "twitch";
IconType["twitter"] = "twitter";
IconType["youtube"] = "youtube";
})(exports.IconType || (exports.IconType = {}));
/**
* Icon component with optional ability to pass in an onClick event handler.
*/
var Icon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var className = _ref.className,
dataTestId = _ref.dataTestId,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
icon = _ref.icon,
onClick = _ref.onClick,
onKeyDown = _ref.onKeyDown,
size = _ref.size,
_ref$totalSize = _ref.totalSize,
totalSize = _ref$totalSize === void 0 ? 30 : _ref$totalSize,
_ref$unfocusable = _ref.unfocusable,
unfocusable = _ref$unfocusable === void 0 ? false : _ref$unfocusable;
var divStyle = React.useMemo(function () {
if (totalSize === 'unset') return {};
var divSize = Math.max(size || 0, totalSize);
return {
height: divSize,
width: divSize
};
}, [size, totalSize]);
var tabIndex = React.useMemo(function () {
return unfocusable || disabled || !onClick ? undefined : 0;
}, [disabled, onClick, unfocusable]);
var handleClick = function handleClick(e) {
if (disabled || !onClick) return;
onClick(e);
};
var handleKeyDown = function handleKeyDown(e) {
if (!onClick) return;
if (e.key === 'Enter' && !disabled) {
handleClick();
}
onKeyDown == null ? void 0 : onKeyDown(e);
};
var renderIcon = React.useCallback(function () {
var iconBaseProps = {
'data-testid': 'Icon__svg'
};
switch (icon) {
case exports.IconType.accountGroup:
return React__default.createElement(AccountGroupIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.alert:
return React__default.createElement(AlertIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.alertCircleCheckOutline:
return React__default.createElement(AlertCircleCheckOutlineIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.alertCircle:
return React__default.createElement(AlertCircleIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.alertCircleOutline:
return React__default.createElement(AlertCircleOutlineIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.arrowCollapseDown:
return React__default.createElement(ArrowCollapseDownIcon, Object.assign({}, iconBaseProps, {
size: size || 22
}));
case exports.IconType.arrowDown:
return React__default.createElement(ArrowDownIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.arrowLeft:
return React__default.createElement(ArrowLeftIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.arrowRight:
return React__default.createElement(ArrowRightIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.arrowUp:
return React__default.createElement(ArrowUpIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.bell:
return React__default.createElement(BellIcon, Object.assign({}, iconBaseProps, {
size: size || 22
}));
case exports.IconType.chartAreaspline:
return React__default.createElement(ChartAreasplineIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.chartTimelineVariantShimmer:
return React__default.createElement(ChartTimelineVariantShimmer, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.checkCircle:
return React__default.createElement(CheckCircleIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.checkboxBlankCircle:
return React__default.createElement(CheckboxBlankCircleIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.checkboxBlankCircleOutline:
return React__default.createElement(CheckboxBlankCircleOutlineIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.checkboxBlankOutline:
return React__default.createElement(CheckboxBlankOutlineIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.checkboxMarked:
return React__default.createElement(CheckboxMarkedIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.chevronDown:
return React__default.createElement(ChevronDownIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.chevronLeft:
return React__default.createElement(ChevronLeftIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.chevronRight:
return React__default.createElement(ChevronRightIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.chevronUp:
return React__default.createElement(ChevronUpIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.close:
return React__default.createElement(CloseIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.contentCopy:
return React__default.createElement(ContentCopyIcon, Object.assign({}, iconBaseProps, {
size: size || 22
}));
case exports.IconType.currencyUsd:
return React__default.createElement(CurrencyUsdIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.devTo:
return React__default.createElement(DevToIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.discord:
return React__default.createElement(DiscordIcon, Object.assign({}, iconBaseProps, {
size: size || 20
}));
case exports.IconType.dotsVertical:
return React__default.createElement(DotsVerticalIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.download:
return React__default.createElement(DownloadIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.earth:
return React__default.createElement(EarthIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.eye:
return React__default.createElement(EyeIcon, Object.assign({}, iconBaseProps, {
size: size || 22
}));
case exports.IconType.eyeOff:
return React__default.createElement(EyeOffIcon, Object.assign({}, iconBaseProps, {
size: size || 22
}));
case exports.IconType.facebook:
return React__default.createElement(FacebookIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.fileDocument:
return React__default.createElement(FileDocumentIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.fileDownload:
return React__default.createElement(FileDownloadIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.filterMenu:
return React__default.createElement(FilterMenuIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.forum:
return React__default.createElement(ForumIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.github:
return React__default.createElement(GithubIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.googleController:
return React__default.createElement(GoogleControllerIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.hammerWrench:
return React__default.createElement(HammerWrenchIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.humanHandsup:
return React__default.createElement(HumanHandsupIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.information:
return React__default.createElement(InformationIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.instagram:
return React__default.createElement(InstagramIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.lanConnect:
return React__default.createElement(LanConnectIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.lanDisconnect:
return React__default.createElement(LanDisconnectIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.link:
return React__default.createElement(LinkIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.linkedin:
return React__default.createElement(LinkedinIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.loading:
return React__default.createElement(LoadingIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.mapMarkerCheck:
return React__default.createElement(MapMarkerCheckIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.menu:
return React__default.createElement(MenuIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.menuRight:
return React__default.createElement(MenuRightIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.minus:
return React__default.createElement(MinusIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.notebookCheckOutline:
return React__default.createElement(NotebookCheckOutlineIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.openInNew:
return React__default.createElement(OpenInNewIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.pencil:
return React__default.createElement(PencilIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.pinterest:
return React__default.createElement(PinterestIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.play:
return React__default.createElement(PlayIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.playBoxMultiple:
return React__default.createElement(PlayBoxMultipleIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.plus:
return React__default.createElement(PlusIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.qrcode:
return React__default.createElement(QrcodeIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.radioboxBlank:
return React__default.createElement(RadioboxBlankIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.radioboxMarked:
return React__default.createElement(RadioboxMarkedIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.reddit:
return React__default.createElement(RedditIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.refresh:
return React__default.createElement(RefreshIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.slack:
return React__default.createElement(SlackIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.sortAscending:
return React__default.createElement(SortAscendingIcon, Object.assign({}, iconBaseProps, {
size: size || 22
}));
case exports.IconType.sortDescending:
return React__default.createElement(SortDescendingIcon, Object.assign({}, iconBaseProps, {
size: size || 22
}));
case exports.IconType.sync:
return React__default.createElement(SyncIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.textBox:
return React__default.createElement(TextBoxIcon, Object.assign({}, iconBaseProps, {
size: size || 20
}));
case exports.IconType.thumbsUp:
return React__default.createElement(ThumbsUpIcon, Object.assign({}, iconBaseProps, {
size: size || 20
}));
case exports.IconType.tnb:
return React__default.createElement(TnbIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.trophy:
return React__default.createElement(TrophyIcon, Object.assign({}, iconBaseProps, {
size: size || 22
}));
case exports.IconType.twitch:
return React__default.createElement(TwitchIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.twitter:
return React__default.createElement(TwitterIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case exports.IconType.youtube:
return React__default.createElement(YoutubeIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
default:
return null;
}
}, [icon, size]);
return React__default.createElement("div", {
className: clsx('Icon', className, _extends({
'Icon--button': !!onClick,
'Icon--disabled': disabled
}, utils.bemify(className, '--disabled', disabled))),
"data-testid": dataTestId || 'Icon',
ref: ref,
role: !!onClick ? 'button' : 'img',
onClick: handleClick,
onKeyDown: handleKeyDown,
style: divStyle,
tabIndex: tabIndex
}, renderIcon());
});
exports.Icon = Icon;
//# sourceMappingURL=ui.cjs.development.js.map