@ncds/ui-admin 1.7.0 → 1.8.0

package/dist/cjs/src/components/pagination/NavButton.js

@@ -7,62 +7,46 @@ exports.NavButton = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _button = require("../button");
-var __assign = void 0 && (void 0).__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 ICON_SIZE_PC = 16;
-var ICON_SIZE_MOBILE = 20;
-var NAV_BUTTON_CONFIG = {
+const ICON_SIZE_PC = 16;
+const ICON_SIZE_MOBILE = 20;
+const NAV_BUTTON_CONFIG = {
   first: {
     label: '처음',
     className: 'ncua-pagination__first',
-    getIcon: function (_isPC) {
-      return _uiAdminIcon.ChevronLeftDouble;
-    }
+    getIcon: _isPC => _uiAdminIcon.ChevronLeftDouble
   },
   prev: {
     label: '이전',
     className: 'ncua-pagination__before',
-    getIcon: function (isPC) {
-      return isPC ? _uiAdminIcon.ChevronLeft : _uiAdminIcon.ArrowLeft;
-    }
+    getIcon: isPC => isPC ? _uiAdminIcon.ChevronLeft : _uiAdminIcon.ArrowLeft
   },
   next: {
     label: '다음',
     className: 'ncua-pagination__next',
-    getIcon: function (isPC) {
-      return isPC ? _uiAdminIcon.ChevronRight : _uiAdminIcon.ArrowRight;
-    }
+    getIcon: isPC => isPC ? _uiAdminIcon.ChevronRight : _uiAdminIcon.ArrowRight
   },
   last: {
     label: '마지막',
     className: 'ncua-pagination__last',
-    getIcon: function (_isPC) {
-      return _uiAdminIcon.ChevronRightDouble;
-    }
+    getIcon: _isPC => _uiAdminIcon.ChevronRightDouble
   }
 };
-var NavButton = function (_a) {
-  var type = _a.type,
-    breakPoint = _a.breakPoint,
-    noPrev = _a.noPrev,
-    noNext = _a.noNext,
-    onClick = _a.onClick;
-  var config = NAV_BUTTON_CONFIG[type];
-  var isNavigationButton = type === 'first' || type === 'prev' || type === 'next' || type === 'last';
-  var isFirstOrPrev = type === 'first' || type === 'prev';
-  var isNextOrLast = type === 'next' || type === 'last';
-  var disabled = (isFirstOrPrev ? noPrev : false) || (isNextOrLast ? noNext : false);
-  var isPC = breakPoint === 'pc';
+const NavButton = _ref => {
+  let {
+    type,
+    breakPoint,
+    noPrev,
+    noNext,
+    onClick
+  } = _ref;
+  const config = NAV_BUTTON_CONFIG[type];
+  const isNavigationButton = type === 'first' || type === 'prev' || type === 'next' || type === 'last';
+  const isFirstOrPrev = type === 'first' || type === 'prev';
+  const isNextOrLast = type === 'next' || type === 'last';
+  const disabled = (isFirstOrPrev ? noPrev : false) || (isNextOrLast ? noNext : false);
+  const isPC = breakPoint === 'pc';
   // key를 제외한 공통 props
-  var buttonProps = {
+  const buttonProps = {
     label: config.label,
     className: config.className,
     onlyIcon: true,
@@ -74,11 +58,13 @@ var NavButton = function (_a) {
     },
     hierarchy: 'secondary-gray',
     size: isPC ? 'xs' : 'sm',
-    disabled: disabled,
-    onClick: onClick
+    disabled,
+    onClick
   };
   // key 값 별도 계산
-  var buttonKey = isNavigationButton ? "".concat(breakPoint, "-").concat(type) : undefined;
-  return (0, _jsxRuntime.jsx)(_button.Button, __assign({}, buttonProps), buttonKey);
+  const buttonKey = isNavigationButton ? `${breakPoint}-${type}` : undefined;
+  return (0, _jsxRuntime.jsx)(_button.Button, {
+    ...buttonProps
+  }, buttonKey);
 };
 exports.NavButton = NavButton;

package/dist/cjs/src/components/pagination/Pagination.js

@@ -10,56 +10,34 @@ var _lodashEs = require("lodash-es");
 var _react = require("react");
 var _NavButton = require("./NavButton");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var __assign = void 0 && (void 0).__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 = void 0 && (void 0).__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
 // 네비게이션 버튼 설정
-var Pagination = function (_a) {
-  var _b = _a.className,
-    className = _b === void 0 ? '' : _b,
-    totalCount = _a.totalCount,
-    _c = _a.itemCountPerPage,
-    itemCountPerPage = _c === void 0 ? 10 : _c,
-    _d = _a.pageCount,
-    pageCount = _d === void 0 ? 10 : _d,
-    currentPage = _a.currentPage,
-    _e = _a.breakPoint,
-    breakPoint = _e === void 0 ? 'pc' : _e,
-    onPageChange = _a.onPageChange,
-    restProps = __rest(_a, ["className", "totalCount", "itemCountPerPage", "pageCount", "currentPage", "breakPoint", "onPageChange"]);
-  var totalPage = Math.ceil(totalCount / itemCountPerPage);
-  var _f = (0, _react.useState)(1),
-    start = _f[0],
-    setStart = _f[1];
-  var noPrev = breakPoint === 'mo' ? currentPage === 1 : start === 1;
-  var noNext = breakPoint === 'mo' ? currentPage >= totalPage : start + pageCount - 1 >= totalPage;
-  var showJumpPageButton = totalPage > pageCount;
-  var handleClickButton = function (pageNum) {
+const Pagination = _ref => {
+  let {
+    className = '',
+    totalCount,
+    itemCountPerPage = 10,
+    pageCount = 10,
+    currentPage,
+    breakPoint = 'pc',
+    onPageChange,
+    ...restProps
+  } = _ref;
+  const totalPage = Math.ceil(totalCount / itemCountPerPage);
+  const [start, setStart] = (0, _react.useState)(1);
+  const noPrev = breakPoint === 'mo' ? currentPage === 1 : start === 1;
+  const noNext = breakPoint === 'mo' ? currentPage >= totalPage : start + pageCount - 1 >= totalPage;
+  const showJumpPageButton = totalPage > pageCount;
+  const handleClickButton = pageNum => {
     if ((0, _lodashEs.isFunction)(onPageChange)) {
       onPageChange(pageNum);
     }
   };
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (currentPage === start + pageCount) {
       setStart(start + pageCount);
     }
     if (currentPage > start + pageCount) {
-      var newStart = Math.floor((currentPage - 1) / pageCount) * pageCount + 1;
+      const newStart = Math.floor((currentPage - 1) / pageCount) * pageCount + 1;
       setStart(newStart);
     }
     if (currentPage < start) {
@@ -69,77 +47,60 @@ var Pagination = function (_a) {
       setStart(1);
     }
     if (currentPage === totalPage) {
-      var lastGroupStart = Math.floor((totalPage - 1) / pageCount) * pageCount + 1;
+      const lastGroupStart = Math.floor((totalPage - 1) / pageCount) * pageCount + 1;
       setStart(lastGroupStart);
     }
   }, [currentPage]);
-  return (0, _jsxRuntime.jsxs)("div", __assign({
-    className: (0, _classnames.default)('ncua-pagination', "ncua-pagination--".concat(breakPoint), className)
-  }, {
+  return (0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)('ncua-pagination', `ncua-pagination--${breakPoint}`, className),
     children: [showJumpPageButton && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [(0, _NavButton.NavButton)({
         type: 'first',
-        breakPoint: breakPoint,
-        noPrev: noPrev,
-        noNext: noNext,
-        onClick: function () {
-          return handleClickButton(1);
-        }
+        breakPoint,
+        noPrev,
+        noNext,
+        onClick: () => handleClickButton(1)
       }), (0, _NavButton.NavButton)({
         type: 'prev',
-        breakPoint: breakPoint,
-        noPrev: noPrev,
-        noNext: noNext,
-        onClick: function () {
-          return breakPoint === 'mo' ? handleClickButton(Math.max(currentPage - 1, 1)) : handleClickButton(Math.max(start - pageCount, 1));
-        }
+        breakPoint,
+        noPrev,
+        noNext,
+        onClick: () => breakPoint === 'mo' ? handleClickButton(Math.max(currentPage - 1, 1)) : handleClickButton(Math.max(start - pageCount, 1))
       })]
-    }), (0, _jsxRuntime.jsx)("ul", __assign({
-      className: "ncua-pagination__list"
-    }, {
-      children: (0, _lodashEs.range)(start, Math.min(totalPage + 1, start + pageCount)).map(function (pageNumber, i) {
-        return (0, _jsxRuntime.jsx)("li", __assign({
-          className: "ncua-pagination__item"
-        }, {
-          children: (0, _jsxRuntime.jsx)("button", __assign({
-            className: (0, _classnames.default)('ncua-pagination__page-num', {
-              'is-current': pageNumber === currentPage
-            }),
-            onClick: function () {
-              return handleClickButton(start + i);
-            }
-          }, restProps, {
-            children: start + i
-          }))
-        }), (0, _lodashEs.uniqueId)('ncua-pagination__page-num'));
-      })
-    })), (0, _jsxRuntime.jsxs)("p", __assign({
-      className: "ncua-pagination__page-info"
-    }, {
-      children: [(0, _jsxRuntime.jsx)("em", __assign({
-        className: "ncua-pagination__current-num"
-      }, {
+    }), (0, _jsxRuntime.jsx)("ul", {
+      className: "ncua-pagination__list",
+      children: (0, _lodashEs.range)(start, Math.min(totalPage + 1, start + pageCount)).map((pageNumber, i) => (0, _jsxRuntime.jsx)("li", {
+        className: "ncua-pagination__item",
+        children: (0, _jsxRuntime.jsx)("button", {
+          className: (0, _classnames.default)('ncua-pagination__page-num', {
+            'is-current': pageNumber === currentPage
+          }),
+          onClick: () => handleClickButton(start + i),
+          ...restProps,
+          children: start + i
+        })
+      }, (0, _lodashEs.uniqueId)('ncua-pagination__page-num')))
+    }), (0, _jsxRuntime.jsxs)("p", {
+      className: "ncua-pagination__page-info",
+      children: [(0, _jsxRuntime.jsx)("em", {
+        className: "ncua-pagination__current-num",
         children: currentPage
-      })), " / ", totalPage]
-    })), showJumpPageButton && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      }), " / ", totalPage]
+    }), showJumpPageButton && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [(0, _NavButton.NavButton)({
         type: 'next',
-        breakPoint: breakPoint,
-        noPrev: noPrev,
-        noNext: noNext,
-        onClick: function () {
-          return breakPoint === 'mo' ? handleClickButton(Math.min(currentPage + 1, totalPage)) : handleClickButton(Math.min(start + pageCount, totalPage));
-        }
+        breakPoint,
+        noPrev,
+        noNext,
+        onClick: () => breakPoint === 'mo' ? handleClickButton(Math.min(currentPage + 1, totalPage)) : handleClickButton(Math.min(start + pageCount, totalPage))
       }), (0, _NavButton.NavButton)({
         type: 'last',
-        breakPoint: breakPoint,
-        noPrev: noPrev,
-        noNext: noNext,
-        onClick: function () {
-          return handleClickButton(totalPage);
-        }
+        breakPoint,
+        noPrev,
+        noNext,
+        onClick: () => handleClickButton(totalPage)
       })]
     })]
-  }));
+  });
 };
 exports.Pagination = Pagination;

package/dist/cjs/src/components/password-input/PasswordInput.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PasswordInput = 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 _InputBase = require("../input-base/InputBase");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const svgSize = {
+  xs: 14,
+  sm: 20
+};
+const PasswordInput = exports.PasswordInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    size = 'xs',
+    ...props
+  } = _ref;
+  const [isVisible, setIsVisible] = (0, _react.useState)(false);
+  const svgProps = {
+    width: svgSize[size],
+    height: svgSize[size]
+  };
+  const handleVisibilityChange = () => {
+    setIsVisible(prev => !prev);
+  };
+  return (0, _jsxRuntime.jsx)(_InputBase.InputBase, {
+    ref: ref,
+    size: size,
+    type: isVisible ? 'text' : 'password',
+    leadingElement: {
+      type: 'icon',
+      icon: _uiAdminIcon.Lock01,
+      color: props.value ? 'gray600' : 'gray300'
+    },
+    trailingElement: {
+      type: 'custom',
+      placement: 'inside',
+      children: (0, _jsxRuntime.jsx)("button", {
+        className: (0, _classnames.default)('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__password-icon'),
+        type: "button",
+        onClick: handleVisibilityChange,
+        children: isVisible ? (0, _jsxRuntime.jsx)(_uiAdminIcon.Eye, {
+          ...svgProps
+        }) : (0, _jsxRuntime.jsx)(_uiAdminIcon.EyeOff, {
+          ...svgProps
+        })
+      })
+    },
+    ...props
+  });
+});

package/dist/cjs/src/components/password-input/index.js

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

package/dist/cjs/src/components/progress-bar/ProgressBar.js

@@ -9,113 +9,98 @@ var _SegmentBar = require("./components/SegmentBar");
 var _SegmentLabels = require("./components/SegmentLabels");
 var _useProgressBar = require("./hooks/useProgressBar");
 var _utils = require("./utils");
-var __assign = void 0 && (void 0).__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 ProgressBar = function (_a) {
-  var label = _a.label,
-    value = _a.value,
-    segments = _a.segments,
-    _b = _a.showZeroLabel,
-    showZeroLabel = _b === void 0 ? false : _b,
-    _c = _a.valueToPercent,
-    valueToPercent = _c === void 0 ? true : _c;
-  var _d = (0, _useProgressBar.useProgressBar)(label, value, segments, valueToPercent),
-    totalValue = _d.totalValue,
-    displayValue = _d.displayValue,
-    processedSegments = _d.processedSegments,
-    effectiveLabel = _d.effectiveLabel,
-    progressValueStyle = _d.progressValueStyle,
-    hasSegments = _d.hasSegments,
-    segmentCount = _d.segmentCount,
-    shouldSpaceOut = _d.shouldSpaceOut;
-  var isFloatingLabel = effectiveLabel === 'top-float' || effectiveLabel === 'bottom-float';
-  var containerClassName = "ncua-progress-bar ncua-progress-bar-".concat(effectiveLabel || '');
-  var isRightLabel = effectiveLabel === 'right';
-  var isBottomLabel = effectiveLabel === 'bottom';
-  var isMultiSegment = hasSegments && segmentCount >= 2;
+const ProgressBar = _ref => {
+  let {
+    label,
+    value,
+    segments,
+    showZeroLabel = false,
+    valueToPercent = true
+  } = _ref;
+  const {
+    totalValue,
+    displayValue,
+    processedSegments,
+    effectiveLabel,
+    progressValueStyle,
+    hasSegments,
+    segmentCount,
+    shouldSpaceOut
+  } = (0, _useProgressBar.useProgressBar)(label, value, segments, valueToPercent);
+  const isFloatingLabel = effectiveLabel === 'top-float' || effectiveLabel === 'bottom-float';
+  const containerClassName = `ncua-progress-bar ncua-progress-bar-${effectiveLabel || ''}`;
+  const isRightLabel = effectiveLabel === 'right';
+  const isBottomLabel = effectiveLabel === 'bottom';
+  const isMultiSegment = hasSegments && segmentCount >= 2;
   // segments가 1개일 때는 기존 value 방식과 동일하게 처리
   if (hasSegments && segmentCount === 1) {
-    var singleSegment = processedSegments[0];
-    return (0, _jsxRuntime.jsxs)("div", __assign({
+    const singleSegment = processedSegments[0];
+    return (0, _jsxRuntime.jsxs)("div", {
       className: containerClassName,
-      style: progressValueStyle
-    }, {
+      style: progressValueStyle,
       children: [isFloatingLabel && (0, _jsxRuntime.jsx)(_SegmentLabels.SingleLabel, {
         labelType: effectiveLabel,
         displayValue: displayValue,
         totalValue: totalValue,
         showZeroLabel: showZeroLabel
-      }), (0, _jsxRuntime.jsxs)("div", __assign({
-        className: "ncua-progress-bar__content"
-      }, {
-        children: [(0, _jsxRuntime.jsx)("div", __assign({
-          className: "ncua-progress-bar__bar"
-        }, {
+      }), (0, _jsxRuntime.jsxs)("div", {
+        className: "ncua-progress-bar__content",
+        children: [(0, _jsxRuntime.jsx)("div", {
+          className: "ncua-progress-bar__bar",
           children: (0, _jsxRuntime.jsx)("div", {
-            className: "ncua-progress-bar__fill ".concat((0, _utils.getFillColorClass)(singleSegment.color)),
+            className: `ncua-progress-bar__fill ${(0, _utils.getFillColorClass)(singleSegment.color)}`,
             style: {
-              width: "".concat(totalValue, "%")
+              width: `${totalValue}%`
             },
             "aria-valuenow": totalValue,
             "aria-valuemin": 0,
             "aria-valuemax": 100
           })
-        })), isRightLabel && (0, _jsxRuntime.jsx)(_SegmentLabels.SingleLabel, {
+        }), isRightLabel && (0, _jsxRuntime.jsx)(_SegmentLabels.SingleLabel, {
           labelType: "right",
           displayValue: displayValue,
           totalValue: totalValue,
           showZeroLabel: showZeroLabel
         })]
-      })), isBottomLabel && (0, _jsxRuntime.jsx)(_SegmentLabels.SingleLabel, {
+      }), isBottomLabel && (0, _jsxRuntime.jsx)(_SegmentLabels.SingleLabel, {
         labelType: "bottom",
         displayValue: displayValue,
         totalValue: totalValue,
         showZeroLabel: showZeroLabel
       })]
-    }));
+    });
   }
-  return (0, _jsxRuntime.jsxs)("div", __assign({
+  return (0, _jsxRuntime.jsxs)("div", {
     className: containerClassName,
-    style: progressValueStyle
-  }, {
+    style: progressValueStyle,
     children: [isFloatingLabel && (0, _jsxRuntime.jsx)(_SegmentLabels.SingleLabel, {
       labelType: effectiveLabel,
       displayValue: displayValue,
       totalValue: totalValue,
       showZeroLabel: showZeroLabel
-    }), (0, _jsxRuntime.jsxs)("div", __assign({
-      className: "ncua-progress-bar__content"
-    }, {
-      children: [(0, _jsxRuntime.jsx)("div", __assign({
-        className: "ncua-progress-bar__bar ".concat(hasSegments ? 'ncua-progress-bar__bar--segments' : '')
-      }, {
+    }), (0, _jsxRuntime.jsxs)("div", {
+      className: "ncua-progress-bar__content",
+      children: [(0, _jsxRuntime.jsx)("div", {
+        className: `ncua-progress-bar__bar ${hasSegments ? 'ncua-progress-bar__bar--segments' : ''}`,
         children: hasSegments ? (0, _jsxRuntime.jsx)(_SegmentBar.SegmentBar, {
           segments: processedSegments,
           shouldSpaceOut: shouldSpaceOut
         }) : (0, _jsxRuntime.jsx)("div", {
           className: "ncua-progress-bar__fill",
           style: {
-            width: "".concat(totalValue, "%")
+            width: `${totalValue}%`
           },
           "aria-valuenow": totalValue,
           "aria-valuemin": 0,
           "aria-valuemax": 100
         })
-      })), isRightLabel && (0, _jsxRuntime.jsx)(_SegmentLabels.SingleLabel, {
+      }), isRightLabel && (0, _jsxRuntime.jsx)(_SegmentLabels.SingleLabel, {
         labelType: "right",
         displayValue: displayValue,
         totalValue: totalValue,
         showZeroLabel: showZeroLabel
       })]
-    })), isMultiSegment && (0, _jsxRuntime.jsx)(_SegmentLabels.SegmentLabels, {
+    }), isMultiSegment && (0, _jsxRuntime.jsx)(_SegmentLabels.SegmentLabels, {
       segments: processedSegments,
       segmentCount: segmentCount,
       showZeroLabel: showZeroLabel
@@ -125,6 +110,6 @@ var ProgressBar = function (_a) {
       totalValue: totalValue,
       showZeroLabel: showZeroLabel
     })]
-  }));
+  });
 };
 exports.ProgressBar = ProgressBar;

package/dist/cjs/src/components/progress-bar/components/SegmentBar.js

@@ -6,19 +6,21 @@ Object.defineProperty(exports, "__esModule", {
 exports.SegmentBar = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _utils = require("../utils");
-var SegmentBar = function (_a) {
-  var segments = _a.segments,
-    shouldSpaceOut = _a.shouldSpaceOut;
+const SegmentBar = _ref => {
+  let {
+    segments,
+    shouldSpaceOut
+  } = _ref;
   return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: segments.map(function (segment, index) {
-      var isFirst = index === 0;
-      var isLast = index === segments.length - 1;
+    children: segments.map((segment, index) => {
+      const isFirst = index === 0;
+      const isLast = index === segments.length - 1;
       return (0, _jsxRuntime.jsx)("div", {
-        className: "ncua-progress-bar__fill ".concat(isFirst ? 'ncua-progress-bar__fill--first' : '', " ").concat(isLast ? 'ncua-progress-bar__fill--last' : '', " ").concat(shouldSpaceOut && isLast ? 'ncua-progress-bar__fill--spaced' : '', " ").concat((0, _utils.getFillColorClass)(segment.color)),
+        className: `ncua-progress-bar__fill ${isFirst ? 'ncua-progress-bar__fill--first' : ''} ${isLast ? 'ncua-progress-bar__fill--last' : ''} ${shouldSpaceOut && isLast ? 'ncua-progress-bar__fill--spaced' : ''} ${(0, _utils.getFillColorClass)(segment.color)}`,
         style: {
-          width: "".concat(segment.width, "%")
+          width: `${segment.width}%`
         }
-      }, "".concat(segment.color, "-").concat(index));
+      }, `${segment.color}-${index}`);
     })
   });
 };