@ncds/ui-admin 1.8.1 → 1.8.3

package/dist/cjs/assets/scripts/slider.js

@@ -4,6 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Slider = void 0;
+const DEFAULT_MIN = 0;
+const DEFAULT_MAX = 100;
+const DEFAULT_STEP = 1;
+const PERCENT = 100;
 class Slider {
   constructor(element, options) {
     this.activeHandle = null;
@@ -46,17 +50,19 @@ class Slider {
       this.isDragging = false;
     };
     this.element = element;
-    this.options = Object.assign({
-      min: 0,
-      max: 100,
-      step: 1,
-      value: 0,
-      disabled: false
-    }, options);
+    // 화이트리스트 기반 옵션 복사. SliderOptions에 정의된 키만 받아들여
+    // __proto__, constructor, prototype 같은 위험 키가 외부 입력으로 들어와도
+    // Object.prototype을 오염시킬 수 없다 (CWE-1321 Prototype Pollution 차단).
+    this.options = {
+      min: Number(options.min ?? DEFAULT_MIN),
+      max: Number(options.max ?? DEFAULT_MAX),
+      step: Number(options.step ?? DEFAULT_STEP),
+      value: options.value ?? DEFAULT_MIN,
+      onChange: options.onChange,
+      labelPosition: options.labelPosition,
+      disabled: options.disabled ?? false
+    };
     this.value = this.options.value;
-    this.options.min = Number(this.options.min);
-    this.options.max = Number(this.options.max);
-    this.options.step = Number(this.options.step);
     this.init();
   }
   init() {
@@ -110,19 +116,20 @@ class Slider {
     });
     if (this.options.labelPosition === 'bottom') {
       const label = document.createElement('div');
-      label.className = `ncua-slider__label`;
+      label.className = 'ncua-slider__label';
       label.textContent = `${value}%`;
       handle.appendChild(label);
     }
     if (this.options.labelPosition === 'top-floating') {
       const label = document.createElement('div');
-      label.className = `ncua-slider__label ncua-slider__label--tooltip`;
+      label.className = 'ncua-slider__label ncua-slider__label--tooltip';
       label.textContent = `${value}%`;
       handle.appendChild(label);
     }
     this.element.appendChild(handle);
     this.handleElements[index] = handle;
   }
+  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: 단일/range 분기와 라벨/progress 업데이트를 한 함수에 묶는 기존 구조 유지. 분리 리팩토링은 별도 작업 범위.
   updateHandlePositions() {
     if (Array.isArray(this.value)) {
       // Range slider
@@ -180,14 +187,15 @@ class Slider {
     }
   }
   getPositionFromValue(value) {
-    return (value - this.options.min) / (this.options.max - this.options.min) * 100;
+    return (value - this.options.min) / (this.options.max - this.options.min) * PERCENT;
   }
   getValueFromPosition(position) {
-    const percentage = Math.min(Math.max(position, 0), 100);
-    const exactValue = this.options.min + percentage / 100 * (this.options.max - this.options.min);
+    const percentage = Math.min(Math.max(position, 0), PERCENT);
+    const exactValue = this.options.min + percentage / PERCENT * (this.options.max - this.options.min);
     const steppedValue = Math.round(exactValue / this.options.step) * this.options.step;
     return Math.min(Math.max(steppedValue, this.options.min), this.options.max);
   }
+  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: 핸들/트랙 클릭 분기와 가까운 핸들 결정 로직을 한 함수에 묶는 기존 구조 유지. 분리 리팩토링은 별도 작업 범위.
   handleInteractionStart(clientX, target) {
     // 슬라이더 영역 내부를 클릭/터치한 경우
     if (target.closest('.ncua-slider')) {
@@ -199,12 +207,12 @@ class Slider {
         } else if (Array.isArray(this.value) && this.value[0] === this.value[1] && this.value[0] === this.options.min) {
           this.activeHandle = 1;
         } else {
-          this.activeHandle = parseInt(handleElement.dataset.index || '0', 10);
+          this.activeHandle = Number.parseInt(handleElement.dataset.index || '0', 10);
         }
       } else {
         // 슬라이더 트랙을 클릭/터치한 경우, 가장 가까운 핸들을 결정
         const rect = this.element.getBoundingClientRect();
-        const position = (clientX - rect.left) / rect.width * 100;
+        const position = (clientX - rect.left) / rect.width * PERCENT;
         if (Array.isArray(this.value)) {
           const [leftValue, rightValue] = this.value;
           const leftPosition = this.getPositionFromValue(leftValue);
@@ -229,7 +237,7 @@ class Slider {
   updateValueFromClientX(clientX) {
     if (!this.element || this.activeHandle === null) return;
     const rect = this.element.getBoundingClientRect();
-    const position = (clientX - rect.left) / rect.width * 100;
+    const position = (clientX - rect.left) / rect.width * PERCENT;
     const newValue = this.getValueFromPosition(position);
     const prevValue = this.value;
     if (Array.isArray(this.value)) {

package/dist/cjs/src/components/action/button/Button.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.svgSize = exports.iconOnlySvgSize = exports.dotSize = exports.Button = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _color = require("../../../../constant/color");
+var _dot = require("../../image-and-icons/dot");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const svgSize = exports.svgSize = {
+  xxs: 12,
+  xs: 14,
+  sm: 16,
+  md: 20
+};
+const iconOnlySvgSize = exports.iconOnlySvgSize = {
+  xxs: 14,
+  xs: 16,
+  sm: 20,
+  md: 20
+};
+const dotSize = exports.dotSize = {
+  xxs: 'sm',
+  xs: 'sm',
+  sm: 'md',
+  md: 'md'
+};
+const loadableHierarchies = ['primary', 'secondary', 'secondary-gray', 'destructive'];
+const Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    size = 'xs',
+    children,
+    onlyIcon,
+    disabled,
+    loading,
+    className,
+    hierarchy = 'secondary-gray',
+    label,
+    leadingIcon,
+    trailingIcon,
+    underline = false,
+    ...restProps
+  } = props;
+  const isLoading = loading && !onlyIcon && loadableHierarchies.includes(hierarchy);
+  const isDisabled = disabled || isLoading;
+  const sideSlotRender = slot => {
+    const iconSize = onlyIcon ? iconOnlySvgSize[size] : svgSize[size];
+    if (slot.type === 'icon') {
+      const Icon = slot.icon;
+      return (0, _jsxRuntime.jsx)(Icon, {
+        height: slot.size ?? iconSize,
+        width: slot.size ?? iconSize,
+        color: slot.color ? _color.COLOR[slot.color] : undefined
+      });
+    }
+    if (slot.type === 'dot') {
+      return (0, _jsxRuntime.jsx)(_dot.Dot, {
+        color: slot.color,
+        size: slot.size ?? dotSize[size]
+      });
+    }
+    return slot.children;
+  };
+  return /*#__PURE__*/(0, _react.createElement)('button', {
+    className: (0, _classnames.default)('ncua-btn', `ncua-btn--${size}`, {
+      'only-icon': onlyIcon,
+      'is-disable': isDisabled,
+      'is-loading': isLoading,
+      'has-underline': underline
+    }, className, hierarchy && `ncua-btn--${hierarchy}`),
+    disabled: isDisabled,
+    'aria-busy': isLoading || undefined,
+    ...restProps,
+    ref
+  }, (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [isLoading ? (0, _jsxRuntime.jsx)("span", {
+      className: "ncua-btn__spinner"
+    }) : leadingIcon && sideSlotRender(leadingIcon), !onlyIcon && label && (0, _jsxRuntime.jsx)("span", {
+      className: "ncua-btn__label",
+      children: label
+    }), children, trailingIcon && sideSlotRender(trailingIcon)]
+  }));
+});

package/dist/cjs/src/components/action/button-group/ButtonGroup.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonGroup = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _color = require("../../../../constant/color");
+var _dot = require("../../image-and-icons/dot");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const svgSize = {
+  xxs: 12,
+  xs: 16,
+  sm: 16,
+  md: 20
+};
+const dotSize = {
+  xxs: 'sm',
+  xs: 'sm',
+  sm: 'md',
+  md: 'md'
+};
+const ButtonGroup = _ref => {
+  let {
+    children,
+    className,
+    hasBorder = true,
+    fullWidth = false,
+    size = 'xs',
+    onlyIcon = false,
+    disabled = false
+  } = _ref;
+  return (0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)('ncua-button-group', `ncua-button-group--${size}`, {
+      'has-border': hasBorder,
+      'full-width': fullWidth
+    }, className),
+    children: _react.default.Children.map(children, child => {
+      if (! /*#__PURE__*/_react.default.isValidElement(child)) {
+        return null;
+      }
+      return /*#__PURE__*/_react.default.cloneElement(child, {
+        onlyIcon,
+        size,
+        disabled: disabled || child.props.disabled
+      });
+    })
+  });
+};
+exports.ButtonGroup = ButtonGroup;
+ButtonGroup.Item = _ref2 => {
+  let {
+    label,
+    size = 'xs',
+    onlyIcon,
+    icon,
+    disabled,
+    children,
+    isCurrent,
+    className,
+    ...props
+  } = _ref2;
+  const renderIcon = () => {
+    if (!icon) return null;
+    if (icon.type === 'icon') {
+      const IconComponent = icon.icon;
+      return (0, _jsxRuntime.jsx)(IconComponent, {
+        width: icon.size ?? svgSize[size],
+        height: icon.size ?? svgSize[size],
+        color: icon.color ? _color.COLOR[icon.color] : 'currentColor'
+      });
+    }
+    if (icon.type === 'dot') {
+      return (0, _jsxRuntime.jsx)(_dot.Dot, {
+        color: icon.color,
+        size: icon.size ?? dotSize[size]
+      });
+    }
+    return icon.children;
+  };
+  const position = icon?.position ?? 'leading';
+  return /*#__PURE__*/(0, _react.createElement)('button', {
+    className: (0, _classnames.default)('ncua-button-group__item', {
+      'is-only-icon': onlyIcon
+    }, {
+      'is-current': isCurrent
+    }, className),
+    disabled,
+    type: 'button',
+    ...props
+  }, (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [position === 'leading' && renderIcon(), !onlyIcon && label, children, position === 'trailing' && renderIcon()]
+  }));
+};

package/dist/cjs/src/components/feedback-and-status/badge/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Badge = require("./Badge");
+Object.keys(_Badge).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Badge[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Badge[key];
+    }
+  });
+});
+var _utils = require("./utils");
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _utils[key];
+    }
+  });
+});

package/dist/cjs/src/components/feedback-and-status/badge/utils.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sideSlotRender = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _color = require("../../../../constant/color");
+var _Dot = require("../../image-and-icons/dot/Dot");
+const DEFAULT_DOT_COLOR = 'neutral';
+const sideSlotRender = _ref => {
+  let {
+    slot,
+    defaultIconSize
+  } = _ref;
+  if (slot.type === 'icon') {
+    const Icon = slot.icon;
+    return (0, _jsxRuntime.jsx)(Icon, {
+      height: slot.size ?? defaultIconSize,
+      width: slot.size ?? defaultIconSize,
+      color: slot.color ? _color.COLOR[slot.color] : undefined
+    });
+  }
+  if (slot.type === 'dot') {
+    return (0, _jsxRuntime.jsx)(_Dot.Dot, {
+      color: slot.color ?? DEFAULT_DOT_COLOR,
+      size: slot.size ?? 'sm'
+    });
+  }
+  return slot.children;
+};
+exports.sideSlotRender = sideSlotRender;

package/dist/cjs/src/components/feedback-and-status/empty-state/EmptyState.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmptyState = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _Button = require("../../action/button/Button");
+const EmptyState = _ref => {
+  let {
+    title,
+    description,
+    buttons
+  } = _ref;
+  const emptyStateButtons = buttons ? Array.isArray(buttons) ? buttons : [buttons] : [];
+  return (0, _jsxRuntime.jsxs)("div", {
+    className: "ncua-empty-state",
+    children: [(0, _jsxRuntime.jsx)("p", {
+      className: "ncua-empty-state__title",
+      children: title
+    }), (0, _jsxRuntime.jsx)("span", {
+      className: "ncua-empty-state__description",
+      children: description
+    }), emptyStateButtons.length > 0 && (0, _jsxRuntime.jsx)("div", {
+      className: "ncua-empty-state__button-group",
+      children: emptyStateButtons.map(_ref2 => {
+        let {
+          size,
+          label,
+          ...rest
+        } = _ref2;
+        return (0, _jsxRuntime.jsx)(_Button.Button, {
+          size: size ?? 'xs',
+          label: label,
+          ...rest
+        }, label);
+      })
+    })]
+  });
+};
+exports.EmptyState = EmptyState;

package/dist/cjs/src/components/feedback-and-status/progress-bar/components/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _SegmentBar = require("./SegmentBar");
+Object.keys(_SegmentBar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SegmentBar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SegmentBar[key];
+    }
+  });
+});
+var _SegmentLabels = require("./SegmentLabels");
+Object.keys(_SegmentLabels).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SegmentLabels[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SegmentLabels[key];
+    }
+  });
+});

package/dist/cjs/src/components/feedback-and-status/progress-bar/hooks/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useProgressBar = require("./useProgressBar");
+Object.keys(_useProgressBar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useProgressBar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useProgressBar[key];
+    }
+  });
+});

package/dist/cjs/src/components/feedback-and-status/progress-bar/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ProgressBar = require("./ProgressBar");
+Object.keys(_ProgressBar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ProgressBar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ProgressBar[key];
+    }
+  });
+});
+var _components = require("./components");
+Object.keys(_components).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _components[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _components[key];
+    }
+  });
+});
+var _hooks = require("./hooks");
+Object.keys(_hooks).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _hooks[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _hooks[key];
+    }
+  });
+});
+var _types = require("./types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});
+var _utils = require("./utils");
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _utils[key];
+    }
+  });
+});

package/dist/cjs/src/components/feedback-and-status/tag/Tag.js

@@ -0,0 +1,146 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tag = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _color = require("../../../../constant/color");
+var _dot = require("../../image-and-icons/dot");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const MARGIN = 10;
+const DEFAULT_TOOLTIP_WIDTH = 200;
+const DEFAULT_TOOLTIP_HEIGHT = 60;
+// 위치 계산 로직
+const calculateOptimalPosition = (triggerElement, tooltipElement) => {
+  const triggerRect = triggerElement.getBoundingClientRect();
+  const tooltipRect = tooltipElement.getBoundingClientRect();
+  const {
+    innerWidth: viewportWidth,
+    innerHeight: viewportHeight
+  } = window;
+  const tooltipWidth = tooltipRect.width || DEFAULT_TOOLTIP_WIDTH;
+  const tooltipHeight = tooltipRect.height || DEFAULT_TOOLTIP_HEIGHT;
+  const spaces = {
+    top: triggerRect.top,
+    bottom: viewportHeight - triggerRect.bottom,
+    left: triggerRect.left,
+    right: viewportWidth - triggerRect.right
+  };
+  // 위/아래 공간을 먼저 확인하고 우선순위 결정
+  const hasTopSpace = spaces.top >= tooltipHeight + MARGIN;
+  // 위쪽 공간이 있으면 top 우선, 없으면 bottom 우선
+  const positions = hasTopSpace ? ['top-right', 'top-left', 'bottom-right', 'bottom-left'] : ['bottom-right', 'bottom-left', 'top-right', 'top-left'];
+  for (const position of positions) {
+    const isTop = position.includes('top');
+    const isRight = position.includes('right');
+    const hasVerticalSpace = isTop ? spaces.top >= tooltipHeight + MARGIN : spaces.bottom >= tooltipHeight + MARGIN;
+    const hasHorizontalSpace = isRight ? spaces.right >= tooltipWidth + MARGIN // right 정렬: 툴팁이 오른쪽으로 펼쳐짐
+    : spaces.left >= tooltipWidth + MARGIN; // left 정렬: 툴팁이 왼쪽으로 펼쳐짐
+    if (hasVerticalSpace && hasHorizontalSpace) {
+      return position;
+    }
+  }
+  // 모든 조건이 맞지 않으면 공간이 더 많은 쪽으로
+  const fallbackPosition = hasTopSpace ? 'top-right' : 'bottom-right';
+  return fallbackPosition;
+};
+const Tag = _ref => {
+  let {
+    size = 'sm',
+    icon,
+    text,
+    count,
+    close,
+    onButtonClick,
+    maxLength = 20
+  } = _ref;
+  const [isTooltipVisible, setIsTooltipVisible] = (0, _react.useState)(false);
+  const [calculatedPosition, setCalculatedPosition] = (0, _react.useState)('top-right');
+  const tagRef = (0, _react.useRef)(null);
+  const tooltipRef = (0, _react.useRef)(null);
+  const iconSize = {
+    sm: 14,
+    md: 16
+  };
+  // 텍스트 길이 체크 및 말줄임 처리
+  const shouldTruncate = text.length > maxLength;
+  const displayText = shouldTruncate ? `${text.slice(0, maxLength - 2)}...` : text;
+  const handleMouseEnter = (0, _react.useCallback)(() => {
+    if (shouldTruncate) {
+      setIsTooltipVisible(true);
+      // 간단한 위치 계산 - 기본값 사용
+      if (tagRef.current && tooltipRef.current) {
+        const optimalPosition = calculateOptimalPosition(tagRef.current, tooltipRef.current);
+        setCalculatedPosition(optimalPosition);
+      } else {
+        // ref가 없으면 다음 렌더링 사이클에서 시도
+        setTimeout(() => {
+          if (tagRef.current) {
+            // tooltipRef가 없어도 tagRef만으로 계산
+            const dummyTooltipElement = document.createElement('div');
+            dummyTooltipElement.style.width = `${DEFAULT_TOOLTIP_WIDTH}px`;
+            dummyTooltipElement.style.height = `${DEFAULT_TOOLTIP_HEIGHT}px`;
+            const optimalPosition = calculateOptimalPosition(tagRef.current, dummyTooltipElement);
+            setCalculatedPosition(optimalPosition);
+          }
+        }, 0);
+      }
+    }
+  }, [shouldTruncate]);
+  const handleMouseLeave = (0, _react.useCallback)(() => {
+    setIsTooltipVisible(false);
+  }, []);
+  const sideSlotRender = slot => {
+    if (slot.type === 'icon') {
+      const SlotIcon = slot.icon;
+      return (0, _jsxRuntime.jsx)(SlotIcon, {
+        width: iconSize[size],
+        height: iconSize[size],
+        color: slot.color
+      });
+    }
+    if (slot.type === 'dot') {
+      return (0, _jsxRuntime.jsx)(_dot.Dot, {
+        color: slot.color,
+        size: slot.size ?? 'sm'
+      });
+    }
+    return slot.children;
+  };
+  return (0, _jsxRuntime.jsxs)("span", {
+    ref: tagRef,
+    className: (0, _classnames.default)('ncua-tag', `ncua-tag--${size}`, {
+      'ncua-tag--truncated': shouldTruncate
+    }),
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    children: [icon && sideSlotRender(icon), (0, _jsxRuntime.jsx)("span", {
+      className: "ncua-tag__text",
+      children: displayText
+    }), count && (0, _jsxRuntime.jsx)("span", {
+      className: "ncua-tag__count",
+      children: count
+    }), close && (0, _jsxRuntime.jsx)("button", {
+      type: "button",
+      className: "ncua-tag__close",
+      onClick: onButtonClick,
+      children: (0, _jsxRuntime.jsx)(_uiAdminIcon.XClose, {
+        color: _color.COLOR.gray300,
+        width: iconSize[size],
+        height: iconSize[size]
+      })
+    }), shouldTruncate && isTooltipVisible && (0, _jsxRuntime.jsx)("span", {
+      ref: tooltipRef,
+      className: (0, _classnames.default)('ncua-tag__tooltip', `ncua-tag__tooltip--${calculatedPosition}`),
+      children: (0, _jsxRuntime.jsx)("span", {
+        className: "ncua-tag__tooltip-content",
+        children: text
+      })
+    })]
+  });
+};
+exports.Tag = Tag;