@luminati-io/uikit 6.3.35 → 6.3.36

package/dist/umd/uikit.development.js

@@ -42280,6 +42280,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   Tab: () => (/* reexport safe */ _tab__WEBPACK_IMPORTED_MODULE_22__.Tab),
 /* harmony export */   Table: () => (/* reexport safe */ _table__WEBPACK_IMPORTED_MODULE_17__.Table),
 /* harmony export */   Tabs: () => (/* reexport safe */ _tab__WEBPACK_IMPORTED_MODULE_22__.Tabs),
+/* harmony export */   Tag: () => (/* reexport safe */ _tag__WEBPACK_IMPORTED_MODULE_18__.Tag),
 /* harmony export */   TagGroup: () => (/* reexport safe */ _tag__WEBPACK_IMPORTED_MODULE_18__.TagGroup),
 /* harmony export */   ThemeProvider: () => (/* reexport safe */ _themes__WEBPACK_IMPORTED_MODULE_25__.ThemeProvider),
 /* harmony export */   Toast: () => (/* reexport safe */ _toast__WEBPACK_IMPORTED_MODULE_19__.Toast),
@@ -46292,6 +46293,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   FileUploader: () => (/* reexport safe */ _file_uploader__WEBPACK_IMPORTED_MODULE_2__.FileUploader),
 /* harmony export */   Number: () => (/* reexport safe */ _number__WEBPACK_IMPORTED_MODULE_8__.Number),
 /* harmony export */   Phone: () => (/* reexport safe */ _phone__WEBPACK_IMPORTED_MODULE_3__.Phone),
+/* harmony export */   Radio: () => (/* reexport safe */ _radio__WEBPACK_IMPORTED_MODULE_9__.Radio),
+/* harmony export */   RadioCard: () => (/* reexport safe */ _radio__WEBPACK_IMPORTED_MODULE_9__.RadioCard),
 /* harmony export */   RadioGroup: () => (/* reexport safe */ _radio__WEBPACK_IMPORTED_MODULE_9__.RadioGroup),
 /* harmony export */   RadioTab: () => (/* reexport safe */ _radio__WEBPACK_IMPORTED_MODULE_9__.RadioTab),
 /* harmony export */   StyledDayPicker: () => (/* reexport safe */ _date_picker__WEBPACK_IMPORTED_MODULE_7__.StyledDayPicker),
@@ -47285,11 +47288,14 @@ var RadioGroupContainer = styled_components__WEBPACK_IMPORTED_MODULE_0___default
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   RadioGroup: () => (/* reexport safe */ _radio_group__WEBPACK_IMPORTED_MODULE_0__.RadioGroup),
-/* harmony export */   RadioTab: () => (/* reexport safe */ _radio_tab__WEBPACK_IMPORTED_MODULE_1__.RadioTab)
+/* harmony export */   Radio: () => (/* reexport safe */ _radio_group__WEBPACK_IMPORTED_MODULE_1__.Radio),
+/* harmony export */   RadioCard: () => (/* reexport safe */ _radio_card__WEBPACK_IMPORTED_MODULE_0__.RadioCard),
+/* harmony export */   RadioGroup: () => (/* reexport safe */ _radio_group__WEBPACK_IMPORTED_MODULE_1__.RadioGroup),
+/* harmony export */   RadioTab: () => (/* reexport safe */ _radio_tab__WEBPACK_IMPORTED_MODULE_2__.RadioTab)
 /* harmony export */ });
-/* harmony import */ var _radio_group__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./radio_group */ "./src/input/radio/radio_group.js");
-/* harmony import */ var _radio_tab__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./radio_tab */ "./src/input/radio/radio_tab.js");
+/* harmony import */ var _radio_card__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./radio_card */ "./src/input/radio/radio_card.js");
+/* harmony import */ var _radio_group__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./radio_group */ "./src/input/radio/radio_group.js");
+/* harmony import */ var _radio_tab__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./radio_tab */ "./src/input/radio/radio_tab.js");
 // LICENSE_CODE ZON
 
 
@@ -47297,6 +47303,274 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
+/***/ }),
+
+/***/ "./src/input/radio/radio.js":
+/*!**********************************!*\
+  !*** ./src/input/radio/radio.js ***!
+  \**********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   Radio: () => (/* binding */ Radio)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../hooks */ "./src/hooks/index.js");
+/* harmony import */ var _tooltip__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../tooltip */ "./src/tooltip/index.js");
+/* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../typography */ "./src/typography/index.js");
+/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../util */ "./src/util/index.js");
+/* harmony import */ var _common__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./common */ "./src/input/radio/common.js");
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["id", "className", "classNamePrefix", "value", "checked", "onClick", "disabled", "tooltip", "tooltipProps", "before", "after", "title", "subtitle", "description", "onPrev", "onNext"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+
+
+
+
+
+
+var Radio = function Radio(_ref) {
+  var id = _ref.id,
+    className = _ref.className,
+    classNamePrefix = _ref.classNamePrefix,
+    value = _ref.value,
+    checked = _ref.checked,
+    onClick = _ref.onClick,
+    disabled = _ref.disabled,
+    tooltip = _ref.tooltip,
+    tooltipProps = _ref.tooltipProps,
+    before = _ref.before,
+    after = _ref.after,
+    title = _ref.title,
+    subtitle = _ref.subtitle,
+    description = _ref.description,
+    onPrev = _ref.onPrev,
+    onNext = _ref.onNext,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var labelId = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useLabelId)(id);
+  var onKeyDown = function onKeyDown(evt) {
+    var flag = false;
+    switch (evt.key) {
+      case ' ':
+        onClick === null || onClick === void 0 || onClick(evt);
+        flag = true;
+        break;
+      case 'Up':
+      case 'ArrowUp':
+      case 'Left':
+      case 'ArrowLeft':
+        onPrev === null || onPrev === void 0 || onPrev(evt);
+        flag = true;
+        break;
+      case 'Down':
+      case 'ArrowDown':
+      case 'Right':
+      case 'ArrowRight':
+        onNext === null || onNext === void 0 || onNext(evt);
+        flag = true;
+        break;
+    }
+    if (flag) {
+      evt.stopPropagation();
+      evt.preventDefault();
+    }
+  };
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_tooltip__WEBPACK_IMPORTED_MODULE_2__.Tooltip, _extends({}, tooltipProps, {
+    tooltip: tooltip
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", _extends({}, (0,_util__WEBPACK_IMPORTED_MODULE_4__.pickAttrs)(rest), {
+    id: id,
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_4__.cn)(classNamePrefix, _defineProperty(_defineProperty(_defineProperty({}, '-option', true), '-option-active', checked), '-option-disabled', disabled), className),
+    onClick: onClick,
+    role: "radio",
+    "aria-checked": !!checked,
+    "aria-labelledby": labelId,
+    "data-value": value,
+    tabIndex: checked ? 0 : -1,
+    onKeyDown: onKeyDown
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_common__WEBPACK_IMPORTED_MODULE_5__.RadioControl, {
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_4__.cn)(classNamePrefix, _defineProperty({}, '-control', true)),
+    checked: checked,
+    disabled: disabled
+  }), !!before && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_4__.cn)(classNamePrefix, _defineProperty({}, '-before', true))
+  }, before), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_4__.cn)(classNamePrefix, _defineProperty({}, '-content', true))
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_4__.cn)(classNamePrefix, _defineProperty({}, '-header', true))
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_3__.Label, {
+    id: labelId,
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_4__.cn)(classNamePrefix, _defineProperty({}, '-title', true)),
+    variant: "lg"
+  }, title), !!subtitle && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_4__.cn)(classNamePrefix, _defineProperty({}, '-subtitle', true))
+  }, subtitle)), !!description && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_3__.Paragraph, {
+    variant: "lg_snug",
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_4__.cn)(classNamePrefix, _defineProperty({}, '-description', true))
+  }, description)), !!after && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_4__.cn)(classNamePrefix, _defineProperty({}, '-after', true))
+  }, after)));
+};
+
+/***/ }),
+
+/***/ "./src/input/radio/radio_card.js":
+/*!***************************************!*\
+  !*** ./src/input/radio/radio_card.js ***!
+  \***************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   RadioCard: () => (/* binding */ RadioCard)
+/* harmony export */ });
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! prop-types */ "prop-types");
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../constants */ "./src/constants.js");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../hooks */ "./src/hooks/index.js");
+/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../util */ "./src/util/index.js");
+/* harmony import */ var _shared__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../shared */ "./src/input/shared.js");
+/* harmony import */ var _radio__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./radio */ "./src/input/radio/radio.js");
+/* harmony import */ var _styled__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./styled */ "./src/input/radio/styled.js");
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+var _excluded = ["id", "options", "className", "classNamePrefix", "label", "labelIcon", "labelTooltip", "helperText", "invalid", "required", "necessityIndicator", "children", "disabled", "value", "onChange"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+
+
+
+
+
+
+
+
+var RadioCard = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
+  var id = props.id,
+    options = props.options,
+    className = props.className,
+    _props$classNamePrefi = props.classNamePrefix,
+    classNamePrefix = _props$classNamePrefi === void 0 ? 'uikit_radio_card' : _props$classNamePrefi,
+    label = props.label,
+    labelIcon = props.labelIcon,
+    labelTooltip = props.labelTooltip,
+    helperText = props.helperText,
+    invalid = props.invalid,
+    required = props.required,
+    necessityIndicator = props.necessityIndicator,
+    children = props.children,
+    disabled = props.disabled,
+    value = props.value,
+    onChange = props.onChange,
+    rest = _objectWithoutProperties(props, _excluded);
+  var labelId = (0,_hooks__WEBPACK_IMPORTED_MODULE_3__.useLabelId)(id);
+  var onRadioClick = function onRadioClick(option) {
+    return function (evt) {
+      if (!option.disabled && !disabled && option.value !== value) onChange === null || onChange === void 0 || onChange(option.value, option, evt);
+    };
+  };
+  var onKeyChange = function onKeyChange(inc) {
+    return function (evt) {
+      if (!options) return;
+      var index = options.findIndex(function (option) {
+        return value === option.value;
+      }) + inc;
+      while (index >= 0 && index < options.length) {
+        var opt = options[index];
+        if (!opt.disabled && !disabled) {
+          onChange === null || onChange === void 0 || onChange(opt.value, opt, evt);
+          break;
+        }
+        index += inc;
+      }
+    };
+  };
+  var childrenToRender = children;
+  if (options && options.length > 0) {
+    childrenToRender = options.map(function (option) {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_radio__WEBPACK_IMPORTED_MODULE_6__.Radio, _extends({
+        key: "radio-group-value-options-".concat(option.value),
+        classNamePrefix: classNamePrefix
+      }, option, {
+        checked: value === option.value,
+        disabled: option.disabled || disabled,
+        onClick: onRadioClick(option),
+        onPrev: onKeyChange(-1),
+        onNext: onKeyChange(1)
+      }));
+    });
+  }
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_styled__WEBPACK_IMPORTED_MODULE_7__.RadioCardGroup, _extends({
+    ref: ref
+  }, (0,_util__WEBPACK_IMPORTED_MODULE_4__.pickAttrs)(rest), {
+    $prefixCls: classNamePrefix,
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_4__.cn)(classNamePrefix, {
+      '-disabled': disabled
+    }, className, classNamePrefix)
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_shared__WEBPACK_IMPORTED_MODULE_5__.InputLabel, {
+    classNamePrefix: classNamePrefix,
+    id: labelId,
+    label: label,
+    labelIcon: labelIcon,
+    labelTooltip: labelTooltip,
+    required: required,
+    necessityIndicator: necessityIndicator,
+    variant: "lg"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", {
+    id: id,
+    role: "radiogroup",
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_4__.cn)(classNamePrefix, {
+      '-group': true
+    }),
+    "aria-labelledby": label ? labelId : undefined
+  }, childrenToRender), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_shared__WEBPACK_IMPORTED_MODULE_5__.HelperText, {
+    classNamePrefix: classNamePrefix,
+    invalid: invalid
+  }, helperText));
+});
+RadioCard.displayName = 'RadioCard';
+RadioCard.propTypes = {
+  className: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
+  classNamePrefix: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
+  value: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().any),
+  onChange: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
+  disabled: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
+  invalid: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
+  label: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
+  labelIcon: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
+  labelTooltip: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
+  helperText: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
+  required: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
+  necessityIndicator: _constants__WEBPACK_IMPORTED_MODULE_2__.PT_NECESSITY_INDICATOR,
+  options: prop_types__WEBPACK_IMPORTED_MODULE_0___default().arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_0___default().shape({
+    value: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().any),
+    label: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
+    description: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
+    tag: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
+    tagVariant: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['text', 'badge']),
+    img: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
+    disabled: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool)
+  }))
+};
+
 /***/ }),
 
 /***/ "./src/input/radio/radio_group.js":
@@ -47308,6 +47582,7 @@ __webpack_require__.r(__webpack_exports__);
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   Radio: () => (/* binding */ Radio),
 /* harmony export */   RadioGroup: () => (/* binding */ RadioGroup)
 /* harmony export */ });
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! prop-types */ "prop-types");
@@ -47328,7 +47603,7 @@ __webpack_require__.r(__webpack_exports__);
 /*jslint react:true*/
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["id", "className", "classNamePrefix", "value", "onChange", "disabled", "options", "variant", "size", "label", "labelIcon", "labelTooltip", "helperText", "invalid", "required", "necessityIndicator"],
-  _excluded2 = ["id", "classNamePrefix", "value", "checked", "onClick", "label", "disabled", "size", "tooltip", "tooltipProps", "verticalAlign"];
+  _excluded2 = ["id", "classNamePrefix", "value", "checked", "onClick", "label", "disabled", "size", "tooltip", "tooltipProps", "verticalAlign", "children"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
@@ -47446,7 +47721,9 @@ var Radio = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forwardRef
     tooltipProps = _ref2.tooltipProps,
     _ref2$verticalAlign = _ref2.verticalAlign,
     verticalAlign = _ref2$verticalAlign === void 0 ? 'top' : _ref2$verticalAlign,
+    children = _ref2.children,
     rest = _objectWithoutProperties(_ref2, _excluded2);
+  var labelToRender = children || label;
   var labelId = (0,_hooks__WEBPACK_IMPORTED_MODULE_2__.useLabelId)(id);
   var handleClick = function handleClick(evt) {
     if (!disabled) onClick === null || onClick === void 0 || onClick(value, evt);
@@ -47469,19 +47746,19 @@ var Radio = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forwardRef
     }),
     role: "radio",
     "aria-checked": !!checked,
-    "aria-labelledby": label ? labelId : undefined,
+    "aria-labelledby": labelToRender ? labelId : undefined,
     "data-value": value,
     size: size,
     checked: checked,
     disabled: disabled
-  }), !!label && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_5__.Label, {
+  }), !!labelToRender && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_5__.Label, {
     className: (0,_util__WEBPACK_IMPORTED_MODULE_6__.cn)(classNamePrefix, {
       radioLabel: true
     }),
     variant: "sm",
     id: labelId,
     color: disabled ? 'text_disabled' : 'text'
-  }, label)));
+  }, labelToRender)));
 });
 Radio.displayName = 'Radio';
 Radio.propTypes = {
@@ -47660,6 +47937,69 @@ RadioTab.propTypes = {
 
 /***/ }),
 
+/***/ "./src/input/radio/styled.js":
+/*!***********************************!*\
+  !*** ./src/input/radio/styled.js ***!
+  \***********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   RadioCardGroup: () => (/* binding */ RadioCardGroup)
+/* harmony export */ });
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! styled-components */ "styled-components");
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_0__);
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+
+var prefixCls = function prefixCls(p) {
+  return p.$prefixCls;
+};
+var theme = function theme(cb) {
+  return function (p) {
+    return cb(p.theme);
+  };
+};
+var RadioCardGroup = styled_components__WEBPACK_IMPORTED_MODULE_0___default().div.withConfig({
+  displayName: "RadioCardGroup",
+  componentId: "sc-1k6zf11-0"
+})(["&.", "{display:flex;flex-direction:column;gap:", ";.", "-group{display:flex;flex-direction:column;gap:", ";}.", "-option{display:flex;padding:", ";align-items:center;gap:", ";border-radius:", ";border:1px solid ", ";color:", ";cursor:pointer;&-disabled{cursor:not-allowed;border:1px solid ", ";color:", ";}&:hover{background-color:", ";}&:not(&-disabled){&.", "-option-active{border:1px solid ", ";box-shadow:", ";}.", "-description{color:", ";}}.", "-before,.", "-after{font-size:0;}.", "-after{margin-left:auto;}.", "-content{display:flex;flex-direction:column;gap:", ";}.", "-header{display:flex;flex-direction:row;gap:", ";align-items:center;}}}"], prefixCls, theme(function (t) {
+  return t.spacing['03'];
+}), prefixCls, theme(function (t) {
+  return t.spacing['05'];
+}), prefixCls, theme(function (t) {
+  return t.spacing['05'];
+}), theme(function (t) {
+  return t.spacing['05'];
+}), theme(function (t) {
+  return t.radius.md;
+}), theme(function (t) {
+  return t.color.border;
+}), theme(function (t) {
+  return t.color.text;
+}), theme(function (t) {
+  return t.color.border_disabled;
+}), theme(function (t) {
+  return t.color.text_disabled;
+}), theme(function (t) {
+  return t.color.bg_fill;
+}), prefixCls, theme(function (t) {
+  return t.color.border_primary;
+}), theme(function (t) {
+  return t.shadow.primary;
+}), prefixCls, theme(function (t) {
+  return t.color.text_quaternary;
+}), prefixCls, prefixCls, prefixCls, prefixCls, theme(function (t) {
+  return t.spacing['03'];
+}), prefixCls, theme(function (t) {
+  return t.spacing['03'];
+}));
+
+/***/ }),
+
 /***/ "./src/input/shared.js":
 /*!*****************************!*\
   !*** ./src/input/shared.js ***!
@@ -56908,22 +57248,23 @@ var BadgeIcon = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_icon__
   var color = _ref2.theme.color;
   return color.icon;
 });
-var TagBadge = function TagBadge(props) {
+var TagBadge = function TagBadge(_ref3) {
+  var className = _ref3.className,
+    children = _ref3.children;
+  if (!children) return null;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_badge__WEBPACK_IMPORTED_MODULE_3__.Badge, {
-    shape: "rounded"
-  }, props.children);
+    className: className,
+    shape: "rounded",
+    size: "sm"
+  }, children);
 };
-var TagLabel = function TagLabel(props) {
-  var children = props.children,
-    size = props.size;
-  var labelSize = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
-    return {
-      sm: 'xs',
-      md: 'sm'
-    }[size];
-  }, [size]);
+var TagLabel = function TagLabel(_ref4) {
+  var className = _ref4.className,
+    size = _ref4.size,
+    children = _ref4.children;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_6__.Label, {
-    variant: labelSize
+    className: className,
+    variant: size == 'md' ? 'sm' : 'xs'
   }, children);
 };
 var StyledTagBody = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_layout__WEBPACK_IMPORTED_MODULE_5__.Flex).attrs({
@@ -56934,17 +57275,17 @@ var StyledTagBody = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_la
 }).withConfig({
   displayName: "StyledTagBody",
   componentId: "sc-1j3m7xm-1"
-})(["border:1px solid ", ";border-radius:", ";width:fit-content;color:", ";background-color:", ";box-sizing:border-box;min-height:", ";"], function (_ref3) {
-  var color = _ref3.theme.color;
+})(["border:1px solid ", ";border-radius:", ";width:fit-content;color:", ";background-color:", ";box-sizing:border-box;min-height:", ";"], function (_ref5) {
+  var color = _ref5.theme.color;
   return color.border;
-}, function (_ref4) {
-  var spacing = _ref4.theme.spacing;
+}, function (_ref6) {
+  var spacing = _ref6.theme.spacing;
   return spacing['02'];
-}, function (_ref5) {
-  var color = _ref5.theme.color;
+}, function (_ref7) {
+  var color = _ref7.theme.color;
   return color.text;
-}, function (_ref6) {
-  var color = _ref6.theme.color;
+}, function (_ref8) {
+  var color = _ref8.theme.color;
   return color.bg;
 }, function (props) {
   return (0,_util__WEBPACK_IMPORTED_MODULE_7__.px)(props.size == 'md' ? 40 : 24);
@@ -57060,11 +57401,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   ClickableTag: () => (/* reexport safe */ _clickable_tag__WEBPACK_IMPORTED_MODULE_0__.ClickableTag),
 /* harmony export */   RemovableTag: () => (/* reexport safe */ _removable_tag__WEBPACK_IMPORTED_MODULE_1__.RemovableTag),
+/* harmony export */   Tag: () => (/* reexport safe */ _tag__WEBPACK_IMPORTED_MODULE_3__.Tag),
 /* harmony export */   TagGroup: () => (/* reexport safe */ _tag_group__WEBPACK_IMPORTED_MODULE_2__.TagGroup)
 /* harmony export */ });
 /* harmony import */ var _clickable_tag__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./clickable_tag */ "./src/tag/clickable_tag.js");
 /* harmony import */ var _removable_tag__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./removable_tag */ "./src/tag/removable_tag.js");
 /* harmony import */ var _tag_group__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./tag_group */ "./src/tag/tag_group.js");
+/* harmony import */ var _tag__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./tag */ "./src/tag/tag.js");
 // LICENSE_CODE ZON
 
 
@@ -57073,6 +57416,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 /***/ }),
 
 /***/ "./src/tag/removable_tag.js":
@@ -57158,6 +57502,198 @@ var StyledRemoveButton = styled_components__WEBPACK_IMPORTED_MODULE_1___default(
 
 /***/ }),
 
+/***/ "./src/tag/styled.js":
+/*!***************************!*\
+  !*** ./src/tag/styled.js ***!
+  \***************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   StyledTag: () => (/* binding */ StyledTag)
+/* harmony export */ });
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! styled-components */ "styled-components");
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_0__);
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+
+var theme = function theme(cb) {
+  return function (p) {
+    return cb(p.theme);
+  };
+};
+var prefixCls = function prefixCls(p) {
+  return p.$prefixCls;
+};
+var StyledTag = styled_components__WEBPACK_IMPORTED_MODULE_0___default().div.withConfig({
+  displayName: "StyledTag",
+  componentId: "sc-qjresw-0"
+})(["display:inline-flex;margin:0;padding:4px 4px 4px 8px;justify-content:center;align-items:center;gap:4px;border-radius:4px;border:1px solid ", ";background-color:", ";.", "-icon{color:", ";min-width:14px;width:14px;min-height:14px;height:14px;}.", "-text{color:", ";}.", "-badge{background-color:", ";padding:2px;min-width:16px;.uikit_badge-content{color:", ";}}.", "-close-icon{border-radius:28px;}.", "-close-icon,.", "-menu-button{background-color:inherit;min-width:16px;width:16px;min-height:16px;height:16px;}&.", "-clickable{cursor:pointer;}&.", "-disabled{&.", "-clickable{cursor:not-allowed;}border:1px solid ", ";background-color:", ";.", "-icon{color:", ";}.", "-text,.", "-badge .uikit_badge-content{color:", ";}}&:not(.", "-disabled){&.", "-active{border:1px solid ", ";background-color:", ";.", "-icon{color:", ";}.", "-text{color:", ";}.", "-badge{background-color:", ";.uikit_badge-content{color:", ";}}.", "-close-icon:hover{color:", ";}}.", "-close-icon:hover{background-color:", ";color:", ";}.", "-menu-button:hover{background-color:inherit;color:", ";}&:hover{border:1px solid ", ";&.", "-active{border:1px solid ", ";background-color:", ";}}}"], theme(function (t) {
+  return t.color.border;
+}), theme(function (t) {
+  return t.color.bg_fill_teritary;
+}), prefixCls, theme(function (t) {
+  return t.color.icon;
+}), prefixCls, theme(function (t) {
+  return t.color.text;
+}), prefixCls, theme(function (t) {
+  return t.color.bg_fill_secondary;
+}), theme(function (t) {
+  return t.color.text;
+}), prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, theme(function (t) {
+  return t.color.bg_fill_teritary;
+}), theme(function (t) {
+  return t.color.bg_fill_teritary;
+}), prefixCls, theme(function (t) {
+  return t.color.icon_disabled;
+}), prefixCls, prefixCls, theme(function (t) {
+  return t.color.text_disabled;
+}), prefixCls, prefixCls, theme(function (t) {
+  return t.color.tag_selected_border;
+}), theme(function (t) {
+  return t.color.bg_fill_primary_secondary;
+}), prefixCls, theme(function (t) {
+  return t.color.icon_primary;
+}), prefixCls, theme(function (t) {
+  return t.color.text_primary;
+}), prefixCls, theme(function (t) {
+  return t.color.bg_fill_primary;
+}), theme(function (t) {
+  return t.color.text_white;
+}), prefixCls, theme(function (t) {
+  return t.color.icon_primary;
+}), prefixCls, theme(function (t) {
+  return t.color.bg;
+}), theme(function (t) {
+  return t.color.icon_accent;
+}), prefixCls, theme(function (t) {
+  return t.color.icon_accent;
+}), theme(function (t) {
+  return t.color.border_accent;
+}), prefixCls, theme(function (t) {
+  return t.color.tag_selected_border;
+}), theme(function (t) {
+  return t.color.tag_selected_bg_hover;
+}));
+
+/***/ }),
+
+/***/ "./src/tag/tag.js":
+/*!************************!*\
+  !*** ./src/tag/tag.js ***!
+  \************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   Tag: () => (/* binding */ Tag)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ "prop-types");
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _icon_button__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../icon_button */ "./src/icon_button.js");
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../constants */ "./src/constants.js");
+/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
+/* harmony import */ var _base__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./base */ "./src/tag/base.js");
+/* harmony import */ var _styled__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./styled */ "./src/tag/styled.js");
+/* harmony import */ var _tag_icon__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./tag_icon */ "./src/tag/tag_icon.js");
+/* harmony import */ var _tag_menu_button__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./tag_menu_button */ "./src/tag/tag_menu_button.js");
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+var _excluded = ["className", "classNamePrefix", "icon", "text", "onClick", "active", "disabled", "badge", "closeIcon", "onClose", "menuItems"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+
+
+
+
+
+
+
+
+
+var Tag = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRef(function (props, ref) {
+  var className = props.className,
+    _props$classNamePrefi = props.classNamePrefix,
+    classNamePrefix = _props$classNamePrefi === void 0 ? 'uikit_tag' : _props$classNamePrefi,
+    icon = props.icon,
+    text = props.text,
+    onClick = props.onClick,
+    active = props.active,
+    disabled = props.disabled,
+    badge = props.badge,
+    closeIcon = props.closeIcon,
+    onClose = props.onClose,
+    menuItems = props.menuItems,
+    rest = _objectWithoutProperties(props, _excluded);
+  var onCloseClick = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (evt) {
+    evt.stopPropagation();
+    onClose === null || onClose === void 0 || onClose(evt);
+  }, [onClose]);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_styled__WEBPACK_IMPORTED_MODULE_6__.StyledTag, _extends({
+    ref: ref
+  }, rest, {
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_4__.cn)(classNamePrefix, {
+      '-active': active,
+      '-disabled': disabled,
+      '-clickable': !!onClick
+    }, className, classNamePrefix),
+    disabled: disabled,
+    onClick: onClick,
+    $prefixCls: classNamePrefix
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_tag_icon__WEBPACK_IMPORTED_MODULE_7__.TagIcon, {
+    classNamePrefix: classNamePrefix,
+    icon: icon
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_base__WEBPACK_IMPORTED_MODULE_5__.TagLabel, {
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_4__.cn)(classNamePrefix, {
+      '-text': true
+    }),
+    size: "sm"
+  }, text), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_base__WEBPACK_IMPORTED_MODULE_5__.TagBadge, {
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_4__.cn)(classNamePrefix, {
+      '-badge': true
+    })
+  }, badge), !!closeIcon && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_2__.IconButton, {
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_4__.cn)(classNamePrefix, {
+      '-close-icon': true
+    }),
+    size: "xs",
+    icon: "CloseSmall",
+    onClick: onCloseClick,
+    disabled: disabled
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_tag_menu_button__WEBPACK_IMPORTED_MODULE_8__.TagMenuButton, {
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_4__.cn)(classNamePrefix, {
+      '-menu-button': true
+    }),
+    menuItems: menuItems,
+    disabled: disabled
+  }));
+});
+Tag.displayName = 'Tag';
+Tag.propTypes = {
+  className: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  classNamePrefix: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  onClick: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  disabled: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  active: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  text: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
+  badge: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
+  icon: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOfType([_constants__WEBPACK_IMPORTED_MODULE_3__.PT_ICON_NAMES, (prop_types__WEBPACK_IMPORTED_MODULE_1___default().elementType)]),
+  closeIcon: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  onClose: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  menuItems: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().array)
+};
+
+/***/ }),
+
 /***/ "./src/tag/tag_group.js":
 /*!******************************!*\
   !*** ./src/tag/tag_group.js ***!
@@ -57240,6 +57776,115 @@ var StyledGroup = styled_components__WEBPACK_IMPORTED_MODULE_1___default().ul.wi
 
 /***/ }),
 
+/***/ "./src/tag/tag_icon.js":
+/*!*****************************!*\
+  !*** ./src/tag/tag_icon.js ***!
+  \*****************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   TagIcon: () => (/* binding */ TagIcon)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _icon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../icon */ "./src/icon.js");
+/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+
+
+
+var TagIcon = function TagIcon(_ref) {
+  var classNamePrefix = _ref.classNamePrefix,
+    IconComp = _ref.icon;
+  if (IconComp) {
+    var className = (0,_util__WEBPACK_IMPORTED_MODULE_2__.cn)(classNamePrefix, {
+      '-icon': true
+    });
+    if (typeof IconComp == 'string') return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_1__.Icon, {
+      className: className,
+      name: IconComp
+    });
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(IconComp, {
+      className: className
+    });
+  }
+  return null;
+};
+
+/***/ }),
+
+/***/ "./src/tag/tag_menu_button.js":
+/*!************************************!*\
+  !*** ./src/tag/tag_menu_button.js ***!
+  \************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   TagMenuButton: () => (/* binding */ TagMenuButton)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _popover__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../popover */ "./src/popover/index.js");
+/* harmony import */ var _icon_button__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../icon_button */ "./src/icon_button.js");
+/* harmony import */ var _menu__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../menu */ "./src/menu/index.js");
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+
+
+
+
+var TagMenuButton = function TagMenuButton(_ref) {
+  var className = _ref.className,
+    menuItems = _ref.menuItems,
+    disabled = _ref.disabled;
+  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var onClick = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (evt) {
+    evt.stopPropagation();
+  }, []);
+  var onMenuClick = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (evt) {
+    evt.stopPropagation();
+    setVisible(false);
+  }, []);
+  if (!menuItems || menuItems.length == 0) return null;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_popover__WEBPACK_IMPORTED_MODULE_1__.Popover, {
+    visible: visible,
+    onVisibleChange: setVisible,
+    trigger: ['click', 'contextMenu'],
+    popover: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_menu__WEBPACK_IMPORTED_MODULE_3__.Menu, {
+      items: menuItems,
+      size: "sm",
+      onClick: onMenuClick,
+      unstyled: true
+    })
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_2__.IconButton, {
+    icon: "DotsVertical",
+    size: "xs",
+    className: className,
+    disabled: disabled,
+    onClick: onClick
+  }));
+};
+
+/***/ }),
+
 /***/ "./src/themes/constant.js":
 /*!********************************!*\
   !*** ./src/themes/constant.js ***!
@@ -57258,6 +57903,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   fontWeight: () => (/* binding */ fontWeight),
 /* harmony export */   letterSpacing: () => (/* binding */ letterSpacing),
 /* harmony export */   lineHeight: () => (/* binding */ lineHeight),
+/* harmony export */   radius: () => (/* binding */ radius),
 /* harmony export */   scrollbars: () => (/* binding */ scrollbars),
 /* harmony export */   semanticDark: () => (/* binding */ semanticDark),
 /* harmony export */   semanticLight: () => (/* binding */ semanticLight),
@@ -57325,6 +57971,15 @@ var lineHeight = {
   snug: '125%',
   loose: '150%'
 };
+var radius = {
+  xs: '2px',
+  sm: '4px',
+  md: '8px',
+  lg: '16px',
+  xl: '32px',
+  xxl: '128px',
+  xxxl: '360px'
+};
 var scrollbars = function scrollbars(theme) {
   return {
     thin: (0,styled_components__WEBPACK_IMPORTED_MODULE_0__.css)(["scrollbar-color:", " ", ";scrollbar-width:thin;&::-webkit-scrollbar{width:4px;height:4px;}&::-webkit-scrollbar-track{background-color:", ";}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:2px;}&::-webkit-scrollbar-corner{background-color:", ";}"], theme.color.bg, theme.color.scroll, theme.color.bg, theme.color.scroll, theme.color.bg),
@@ -57546,7 +58201,9 @@ var componentLight = {
   tooltip_text_white: semanticLight.text_secondary,
   tooltip_border_white: semanticLight.border,
   popover_border: semanticLight.border_secondary,
-  popover_shadow: shadow.medium
+  popover_shadow: shadow.medium,
+  tag_selected_border: color.blue_6,
+  tag_selected_bg_hover: color.blue_4
 };
 var semanticDark = _objectSpread(_objectSpread({}, semanticLight), {}, {
   bg: color.gray_12,
@@ -57683,7 +58340,9 @@ var componentDark = _objectSpread(_objectSpread({}, componentLight), {}, {
   tooltip_text_white: color.gray_11_50,
   tooltip_border_white: semanticDark.border,
   popover_border: semanticDark.border,
-  popover_shadow: '0px 6px 12px -3px rgba(1, 4, 9, 0.40), ' + '0px 6px 16px 0px rgba(1, 4, 9, 0.40);'
+  popover_shadow: '0px 6px 12px -3px rgba(1, 4, 9, 0.40), ' + '0px 6px 16px 0px rgba(1, 4, 9, 0.40);',
+  tag_selected_border: color.blue_12,
+  tag_selected_bg_hover: color.blue_12
 });
 
 /***/ }),
@@ -57744,7 +58403,8 @@ var baseTheme = {
     sm: _constant__WEBPACK_IMPORTED_MODULE_3__.shadow.small,
     md: _constant__WEBPACK_IMPORTED_MODULE_3__.shadow.medium,
     lg: _constant__WEBPACK_IMPORTED_MODULE_3__.shadow.large
-  }
+  },
+  radius: _constant__WEBPACK_IMPORTED_MODULE_3__.radius
 };
 var lightTheme = _objectSpread(_objectSpread({}, baseTheme), {}, {
   color: _objectSpread(_objectSpread(_objectSpread({}, _constant__WEBPACK_IMPORTED_MODULE_3__.color), _constant__WEBPACK_IMPORTED_MODULE_3__.semanticLight), _constant__WEBPACK_IMPORTED_MODULE_3__.componentLight)
@@ -136884,6 +137544,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   Tab: () => (/* reexport safe */ _core__WEBPACK_IMPORTED_MODULE_0__.Tab),
 /* harmony export */   Table: () => (/* reexport safe */ _core__WEBPACK_IMPORTED_MODULE_0__.Table),
 /* harmony export */   Tabs: () => (/* reexport safe */ _core__WEBPACK_IMPORTED_MODULE_0__.Tabs),
+/* harmony export */   Tag: () => (/* reexport safe */ _core__WEBPACK_IMPORTED_MODULE_0__.Tag),
 /* harmony export */   TagGroup: () => (/* reexport safe */ _core__WEBPACK_IMPORTED_MODULE_0__.TagGroup),
 /* harmony export */   ThemeProvider: () => (/* reexport safe */ _core__WEBPACK_IMPORTED_MODULE_0__.ThemeProvider),
 /* harmony export */   Toast: () => (/* reexport safe */ _core__WEBPACK_IMPORTED_MODULE_0__.Toast),