@ncds/ui-admin 0.0.34 → 0.0.36

package/dist/esm/src/components/radio/Radio.js

@@ -0,0 +1,57 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { RadioInput } from './RadioInput';
+export var Radio = function (_a) {
+  var _b = _a.size,
+    size = _b === void 0 ? 'sm' : _b,
+    text = _a.text,
+    supportText = _a.supportText,
+    disabled = _a.disabled,
+    checked = _a.checked,
+    className = _a.className,
+    radioRef = _a.radioRef,
+    onChange = _a.onChange,
+    props = __rest(_a, ["size", "text", "supportText", "disabled", "checked", "className", "radioRef", "onChange"]);
+  return _jsxs("label", __assign({
+    className: classNames('ncua-radio-field', "ncua-radio-field--".concat(size), {
+      'has-text': text
+    }, className)
+  }, {
+    children: [_jsx(RadioInput, __assign({
+      size: size,
+      ref: radioRef,
+      checked: checked,
+      disabled: disabled,
+      onChange: onChange,
+      className: "ncua-radio-field__input"
+    }, props)), _jsxs("span", {
+      children: [text && _jsx("span", __assign({
+        className: "ncua-radio-field__text"
+      }, {
+        children: text
+      })), supportText && _jsx("span", __assign({
+        className: "ncua-radio-field__support-text"
+      }, {
+        children: supportText
+      }))]
+    })]
+  }));
+};

package/dist/esm/src/components/radio/RadioInput.js

@@ -0,0 +1,43 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+export var RadioInput = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _b = _a.size,
+    size = _b === void 0 ? 'sm' : _b,
+    disabled = _a.disabled,
+    className = _a.className,
+    _c = _a.destructive,
+    destructive = _c === void 0 ? false : _c,
+    onChange = _a.onChange,
+    props = __rest(_a, ["size", "disabled", "className", "destructive", "onChange"]);
+  return _jsx("span", __assign({
+    className: classNames('ncua-radio-input', "ncua-radio-input--".concat(size), {
+      destructive: destructive
+    }, className)
+  }, {
+    children: _jsx("input", __assign({
+      type: "radio",
+      ref: ref,
+      onChange: onChange,
+      disabled: disabled
+    }, props))
+  }));
+});

package/dist/esm/src/components/radio/index.js

@@ -0,0 +1,2 @@
+export * from './Radio';
+export * from './RadioInput';

package/dist/esm/src/components/select/Select.js

@@ -0,0 +1,91 @@
+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;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Icon from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+import { HintText } from '../shared/hintText/HintText';
+/**
+ * 현재 icon 속성은 현재 디자인 시스템에 존재하지 않으니 사용하지 않는 것을 권장합니다.
+ */
+export var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var icon = _a.icon,
+    placeholder = _a.placeholder,
+    _b = _a.disabledPlaceholder,
+    disabledPlaceholder = _b === void 0 ? false : _b,
+    id = _a.id,
+    className = _a.className,
+    hintText = _a.hintText,
+    children = _a.children,
+    _c = _a.size,
+    size = _c === void 0 ? 'md' : _c,
+    _d = _a.type,
+    type = _d === void 0 ? 'default' : _d,
+    _e = _a.destructive,
+    destructive = _e === void 0 ? false : _e,
+    value = _a.value,
+    optionItems = _a.optionItems,
+    register = _a.register,
+    props = __rest(_a, ["icon", "placeholder", "disabledPlaceholder", "id", "className", "hintText", "children", "size", "type", "destructive", "value", "optionItems", "register"]);
+  return _jsxs("div", __assign({
+    className: classNames('ncua-select', {
+      destructive: destructive,
+      'ncua-select--simple': type === 'simple'
+    }, className)
+  }, {
+    children: [_jsxs("div", __assign({
+      className: classNames('ncua-select__content', "ncua-select--".concat(size))
+    }, {
+      children: [icon ? _jsx("span", __assign({
+        className: "ncua-select__icon"
+      }, {
+        children: _jsx(Icon, {
+          name: icon.icon,
+          width: icon.size,
+          height: icon.size,
+          color: icon.color
+        })
+      })) : _jsx(_Fragment, {}), _jsxs("select", __assign({
+        value: value,
+        ref: ref,
+        id: id,
+        className: classNames('ncua-select__tag', className)
+      }, register, props, {
+        children: [placeholder && _jsx("option", __assign({
+          value: "",
+          selected: true,
+          disabled: disabledPlaceholder
+        }, {
+          children: placeholder
+        })), optionItems && optionItems.map(function (item, index) {
+          return _jsx("option", __assign({
+            value: item.id
+          }, {
+            children: item.label
+          }), "option-".concat(index));
+        }), children]
+      }))]
+    })), hintText && _jsx(HintText, __assign({
+      destructive: destructive,
+      className: "ncua-hint-text"
+    }, {
+      children: hintText
+    }))]
+  }));
+});

package/dist/esm/src/components/select/index.js

@@ -0,0 +1 @@
+export * from './Select';

package/dist/esm/src/components/shared/hintText/HintText.js

@@ -0,0 +1,35 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+export var HintText = function (_a) {
+  var _b = _a.as,
+    Component = _b === void 0 ? 'p' : _b,
+    children = _a.children,
+    className = _a.className,
+    destructive = _a.destructive,
+    props = __rest(_a, ["as", "children", "className", "destructive"]);
+  return _jsx(Component, __assign({
+    className: classNames('ncua-hint-text', {
+      destructive: destructive
+    }, className)
+  }, props, {
+    children: children
+  }));
+};

package/dist/esm/src/components/shared/hintText/index.js

@@ -0,0 +1 @@
+export * from './HintText';

package/dist/{temp → esm}/src/components/shared/index.js

@@ -1,2 +1,2 @@
 export * from './hintText';
-export * from './label';
+export * from './label';

package/dist/esm/src/components/shared/label/Label.js

@@ -0,0 +1,35 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+export var Label = function (_a) {
+  var _b = _a.as,
+    Component = _b === void 0 ? 'label' : _b,
+    children = _a.children,
+    className = _a.className,
+    isRequired = _a.isRequired,
+    props = __rest(_a, ["as", "children", "className", "isRequired"]);
+  return _jsx(Component, __assign({
+    className: classNames('ncua-label', {
+      'is-required': isRequired
+    }, className)
+  }, props, {
+    children: children
+  }));
+};

package/dist/esm/src/components/shared/label/index.js

@@ -0,0 +1 @@
+export * from './Label';

package/dist/esm/src/components/slider/Slider.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Slider as NcuaSlider } from '../../../assets/scripts/slider';
+export var Slider = function (_a) {
+  var _b = _a.min,
+    min = _b === void 0 ? 0 : _b,
+    _c = _a.max,
+    max = _c === void 0 ? 100 : _c,
+    _d = _a.step,
+    step = _d === void 0 ? 1 : _d,
+    _e = _a.value,
+    value = _e === void 0 ? 0 : _e,
+    onChange = _a.onChange,
+    labelPosition = _a.labelPosition,
+    _f = _a.disabled,
+    disabled = _f === void 0 ? false : _f,
+    className = _a.className;
+  var containerRef = useRef(null);
+  var sliderInstanceRef = useRef(null);
+  useEffect(function () {
+    if (!containerRef.current) return;
+    sliderInstanceRef.current = new NcuaSlider(containerRef.current, {
+      min: min,
+      max: max,
+      step: step,
+      value: value,
+      onChange: onChange,
+      labelPosition: labelPosition,
+      disabled: disabled
+    });
+    return function () {
+      if (sliderInstanceRef.current) {
+        sliderInstanceRef.current.destroy();
+        sliderInstanceRef.current = null;
+      }
+    };
+  }, [typeof value, onChange, min, max, step, labelPosition]);
+  useEffect(function () {
+    if (sliderInstanceRef.current) {
+      sliderInstanceRef.current.setValue(value);
+    }
+  }, [sliderInstanceRef, value]);
+  useEffect(function () {
+    if (sliderInstanceRef.current) {
+      if (disabled) {
+        sliderInstanceRef.current.disable();
+      } else {
+        sliderInstanceRef.current.enable();
+      }
+    }
+  }, [disabled]);
+  return _jsx("div", {
+    ref: containerRef,
+    className: "ncua-slider ".concat(className || '')
+  });
+};
+export default Slider;

package/dist/esm/src/components/slider/index.js

@@ -0,0 +1 @@
+export * from './Slider';

package/dist/esm/src/components/spinner/Spinner.js

@@ -0,0 +1,45 @@
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+var RenderText = function (_a) {
+  var _b = _a.as,
+    Component = _b === void 0 ? 'p' : _b,
+    children = _a.children;
+  return _jsx(Component, __assign({
+    className: "ncua-spinner__text"
+  }, {
+    children: children
+  }));
+};
+export var Spinner = function (_a) {
+  var _b = _a.as,
+    as = _b === void 0 ? 'p' : _b,
+    _c = _a.size,
+    size = _c === void 0 ? 'md' : _c,
+    children = _a.children,
+    _d = _a.backdrop,
+    backdrop = _d === void 0 ? false : _d;
+  return _jsx("div", __assign({
+    className: classNames('ncua-spinner', "ncua-spinner--".concat(size), {
+      'ncua-spinner--backdrop': backdrop
+    })
+  }, {
+    children: _jsx("div", __assign({
+      className: "ncua-spinner__content"
+    }, {
+      children: children && _jsx(RenderText, {
+        as: as,
+        children: children
+      })
+    }))
+  }));
+};

package/dist/{temp → esm}/src/components/spinner/index.js

@@ -1,2 +1,2 @@
 export * from './Spinner';
-export * from './index';
+export * from './index';

package/dist/esm/src/components/tab/HorizontalTab.js

@@ -0,0 +1,69 @@
+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);
+};
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { uniqueId } from 'lodash';
+import 'swiper/css';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { TabButton } from './TabButton';
+export var HorizontalTab = function (_a) {
+  var _b = _a.type,
+    type = _b === void 0 ? 'button-primary' : _b,
+    size = _a.size,
+    activeTab = _a.activeTab,
+    onClick = _a.onClick,
+    _c = _a.fullWidth,
+    fullWidth = _c === void 0 ? false : _c,
+    _d = _a.menus,
+    menus = _d === void 0 ? [] : _d;
+  var getTabGap = function (type) {
+    var _a;
+    var gap = {
+      underline: 16
+    };
+    return (_a = gap[type]) !== null && _a !== void 0 ? _a : 8;
+  };
+  if (!menus.length) return _jsx(_Fragment, {});
+  return _jsx("div", __assign({
+    className: classNames('ncua-horizontal-tab', "ncua-horizontal-tab--".concat(type), {
+      'ncua-horizontal-tab--fullWidth': fullWidth
+    })
+  }, {
+    children: _jsx(Swiper, __assign({
+      slidesPerView: "auto",
+      spaceBetween: getTabGap(type)
+    }, {
+      children: menus.map(function (menu) {
+        var isActive = menu.href ? menu.href.includes(activeTab) : menu.id === activeTab;
+        var commonProps = {
+          id: menu.id,
+          label: menu.label,
+          badgeInfo: menu.badgeInfo,
+          isActive: isActive,
+          tabButtonType: type,
+          size: size,
+          onClick: function () {
+            var _a;
+            return onClick === null || onClick === void 0 ? void 0 : onClick((_a = menu.id) !== null && _a !== void 0 ? _a : '');
+          }
+        };
+        return _jsx(SwiperSlide, __assign({
+          className: "ncua-horizontal-tab__item"
+        }, {
+          children: menu.href ? _jsx(TabButton, __assign({}, commonProps, {
+            href: menu.href,
+            target: menu.target
+          })) : _jsx(TabButton, __assign({}, commonProps))
+        }), uniqueId('horizontal-tab'));
+      })
+    }))
+  }));
+};

package/dist/esm/src/components/tab/TabButton.js

@@ -0,0 +1,68 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Badge } from '../badge/Badge';
+export var TabButton = function (_a) {
+  var label = _a.label,
+    _b = _a.size,
+    size = _b === void 0 ? 'md' : _b,
+    tabButtonType = _a.tabButtonType,
+    type = _a.type,
+    _c = _a.isActive,
+    isActive = _c === void 0 ? false : _c,
+    badgeInfo = _a.badgeInfo,
+    className = _a.className,
+    children = _a.children,
+    props = __rest(_a, ["label", "size", "tabButtonType", "type", "isActive", "badgeInfo", "className", "children"]);
+  var tabType = tabButtonType || type;
+  var componentClassName = classNames('ncua-tab-button', "ncua-tab-button--".concat(size), "ncua-tab-button--".concat(tabType || 'button-primary'), {
+    'is-active': isActive
+  }, className);
+  if ('href' in props && props.href) {
+    var _d = props,
+      href = _d.href,
+      _e = _d.target,
+      target = _e === void 0 ? '_self' : _e,
+      onClick_1 = _d.onClick,
+      anchorProps = __rest(_d, ["href", "target", "onClick"]);
+    return _jsxs("a", __assign({
+      className: componentClassName,
+      href: href,
+      target: target,
+      onClick: onClick_1
+    }, anchorProps, {
+      children: [label, badgeInfo && _jsx(Badge, __assign({}, badgeInfo, {
+        size: "xs"
+      })), children]
+    }));
+  }
+  var _f = props,
+    onClick = _f.onClick,
+    buttonProps = __rest(_f, ["onClick"]);
+  return _jsxs("button", __assign({
+    type: "button",
+    className: componentClassName,
+    onClick: onClick
+  }, buttonProps, {
+    children: [label, badgeInfo && _jsx(Badge, __assign({}, badgeInfo, {
+      size: "xs"
+    })), children]
+  }));
+};

package/dist/esm/src/components/tab/VerticalTab.js

@@ -0,0 +1,67 @@
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Fragment } from 'react';
+import { Select } from '../select/Select';
+import { TabButton } from './TabButton';
+export var VerticalTab = function (_a) {
+  var _b = _a.type,
+    type = _b === void 0 ? 'button-primary' : _b,
+    _c = _a.breakPoint,
+    breakPoint = _c === void 0 ? 'pc' : _c,
+    activeTab = _a.activeTab,
+    menus = _a.menus,
+    onClick = _a.onClick;
+  var handleSelectChange = function (e) {
+    onClick === null || onClick === void 0 ? void 0 : onClick(e.target.value);
+  };
+  var optionItems = (menus === null || menus === void 0 ? void 0 : menus.map(function (menu) {
+    return {
+      id: menu.id || '',
+      label: menu.label || ''
+    };
+  })) || [];
+  return _jsx("div", __assign({
+    className: classNames('ncua-vertical-tab', "ncua-vertical-tab--".concat(type))
+  }, {
+    children: breakPoint === 'mobile' ? _jsx("div", __assign({
+      className: "ncua-vertical-tab__select"
+    }, {
+      children: _jsx(Select, {
+        value: activeTab,
+        onChange: handleSelectChange,
+        optionItems: optionItems,
+        size: "md"
+      })
+    })) : menus === null || menus === void 0 ? void 0 : menus.map(function (menu) {
+      var isActive = menu.href ? menu.href.includes(activeTab) : menu.id === activeTab;
+      var commonProps = {
+        id: menu.id,
+        label: menu.label,
+        badgeInfo: menu.badgeInfo,
+        isActive: isActive,
+        tabButtonType: type,
+        size: 'sm',
+        onClick: function () {
+          var _a;
+          return onClick === null || onClick === void 0 ? void 0 : onClick((_a = menu.id) !== null && _a !== void 0 ? _a : '');
+        }
+      };
+      return _jsx(Fragment, {
+        children: menu.href ? _jsx(TabButton, __assign({}, commonProps, {
+          href: menu.href,
+          target: menu.target
+        })) : _jsx(TabButton, __assign({}, commonProps))
+      }, menu.id);
+    })
+  }));
+};

package/dist/{temp → esm}/src/components/tab/index.js

@@ -1,3 +1,3 @@
 export * from './HorizontalTab';
 export * from './TabButton';
-export * from './VerticalTab';
+export * from './VerticalTab';

package/dist/esm/src/components/tag/Tag.js

@@ -0,0 +1,70 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Icon from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { COLOR } from '../../../constant/color';
+import { Dot } from '../dot';
+export var Tag = function (_a) {
+  var _b = _a.size,
+    size = _b === void 0 ? 'sm' : _b,
+    icon = _a.icon,
+    text = _a.text,
+    count = _a.count,
+    close = _a.close,
+    onButtonClick = _a.onButtonClick;
+  var iconSize = {
+    sm: 14,
+    md: 16
+  };
+  var sideSlotRender = function (slot) {
+    var _a;
+    if (slot.type === 'icon') {
+      return _jsx(Icon, {
+        name: slot.icon,
+        width: iconSize[size],
+        height: iconSize[size],
+        color: slot.color
+      });
+    }
+    if (slot.type === 'dot') {
+      return _jsx(Dot, {
+        color: slot.color,
+        size: (_a = slot.size) !== null && _a !== void 0 ? _a : 'sm'
+      });
+    }
+    return slot.children;
+  };
+  return _jsxs("span", __assign({
+    className: classNames('ncua-tag', "ncua-tag--".concat(size))
+  }, {
+    children: [icon && sideSlotRender(icon), _jsx("span", __assign({
+      className: "ncua-tag__text"
+    }, {
+      children: text
+    })), count && _jsx("span", __assign({
+      className: "ncua-tag__count"
+    }, {
+      children: count
+    })), close && _jsx("button", __assign({
+      type: "button",
+      className: "ncua-tag__close",
+      onClick: onButtonClick
+    }, {
+      children: _jsx(Icon, {
+        name: "x-close",
+        color: COLOR.gray300,
+        width: iconSize[size],
+        height: iconSize[size]
+      })
+    }))]
+  }));
+};

package/dist/esm/src/components/tag/index.js

@@ -0,0 +1 @@
+export * from './Tag';