@ncds/ui-admin 0.0.23 → 0.0.25

package/dist/cjs/index.js

@@ -14,6 +14,17 @@ Object.keys(_badge).forEach(function (key) {
     }
   });
 });
+var _breadcrumb = require("./src/components/breadcrumb");
+Object.keys(_breadcrumb).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _breadcrumb[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _breadcrumb[key];
+    }
+  });
+});
 var _button = require("./src/components/button");
 Object.keys(_button).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -58,6 +69,50 @@ Object.keys(_datePicker).forEach(function (key) {
     }
   });
 });
+var _divider = require("./src/components/divider");
+Object.keys(_divider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _divider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _divider[key];
+    }
+  });
+});
+var _dropdown = require("./src/components/dropdown");
+Object.keys(_dropdown).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _dropdown[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _dropdown[key];
+    }
+  });
+});
+var _emptyState = require("./src/components/empty-state");
+Object.keys(_emptyState).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _emptyState[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _emptyState[key];
+    }
+  });
+});
+var _featuredIcon = require("./src/components/featured-icon");
+Object.keys(_featuredIcon).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _featuredIcon[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _featuredIcon[key];
+    }
+  });
+});
 var _input = require("./src/components/input");
 Object.keys(_input).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -69,6 +124,28 @@ Object.keys(_input).forEach(function (key) {
     }
   });
 });
+var _modal = require("./src/components/modal");
+Object.keys(_modal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _modal[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _modal[key];
+    }
+  });
+});
+var _notification = require("./src/components/notification");
+Object.keys(_notification).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _notification[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _notification[key];
+    }
+  });
+});
 var _pagination = require("./src/components/pagination");
 Object.keys(_pagination).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -80,6 +157,28 @@ Object.keys(_pagination).forEach(function (key) {
     }
   });
 });
+var _progressBar = require("./src/components/progress-bar");
+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 _progressCircle = require("./src/components/progress-circle");
+Object.keys(_progressCircle).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _progressCircle[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _progressCircle[key];
+    }
+  });
+});
 var _radio = require("./src/components/radio");
 Object.keys(_radio).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -135,6 +234,17 @@ Object.keys(_shared).forEach(function (key) {
     }
   });
 });
+var _slider = require("./src/components/slider");
+Object.keys(_slider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _slider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _slider[key];
+    }
+  });
+});
 var _spinner = require("./src/components/spinner");
 Object.keys(_spinner).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -146,6 +256,28 @@ Object.keys(_spinner).forEach(function (key) {
     }
   });
 });
+var _tab = require("./src/components/tab");
+Object.keys(_tab).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _tab[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _tab[key];
+    }
+  });
+});
+var _tag = require("./src/components/tag");
+Object.keys(_tag).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _tag[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _tag[key];
+    }
+  });
+});
 var _toggle = require("./src/components/toggle");
 Object.keys(_toggle).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/cjs/src/components/button/ButtonGroup.js

@@ -58,6 +58,7 @@ var ButtonGroup = function (_a) {
       }
       return /*#__PURE__*/_react.default.cloneElement(child, {
         onlyIcon: onlyIcon,
+        size: size,
         disabled: disabled || child.props.disabled
       });
     })
@@ -69,20 +70,22 @@ ButtonGroup.Item = function (_a) {
   var _c = _a.as,
     as = _c === void 0 ? 'button' : _c,
     label = _a.label,
+    size = _a.size,
     onlyIcon = _a.onlyIcon,
     icon = _a.icon,
     disabled = _a.disabled,
     children = _a.children,
-    props = __rest(_a, ["as", "label", "onlyIcon", "icon", "disabled", "children"]);
+    isCurrent = _a.isCurrent,
+    props = __rest(_a, ["as", "label", "size", "onlyIcon", "icon", "disabled", "children", "isCurrent"]);
   var renderIcon = function () {
-    var _a, _b, _c;
+    var _a, _b;
     if (!icon) return null;
     if (icon.type === 'icon') {
       return (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
         name: icon.icon,
-        width: svgSize[(_a = icon.size) !== null && _a !== void 0 ? _a : 'md'],
-        height: svgSize[(_b = icon.size) !== null && _b !== void 0 ? _b : 'md'],
-        color: _color.COLOR[(_c = icon.color) !== null && _c !== void 0 ? _c : 'gray500']
+        width: (_a = icon.size) !== null && _a !== void 0 ? _a : svgSize[size !== null && size !== void 0 ? size : 'md'],
+        height: (_b = icon.size) !== null && _b !== void 0 ? _b : svgSize[size !== null && size !== void 0 ? size : 'md'],
+        color: icon.color ? _color.COLOR[icon.color] : 'currentColor'
       });
     }
     return icon.children;
@@ -91,6 +94,10 @@ ButtonGroup.Item = function (_a) {
   return /*#__PURE__*/(0, _react.createElement)(as, __assign({
     className: (0, _classnames.default)('ncua-button-group__item', {
       'is-disabled': disabled
+    }, {
+      'is-only-icon': onlyIcon
+    }, {
+      'is-current': isCurrent
     }),
     disabled: disabled
   }, props), (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {

package/dist/cjs/src/components/checkbox/Checkbox.js

@@ -55,11 +55,11 @@ var Checkbox = function (_a) {
     }, props)), (0, _jsxRuntime.jsx)("span", {
       children: text && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [(0, _jsxRuntime.jsx)("span", __assign({
-          className: "ncua-checkbox__text"
+          className: "ncua-checkbox-field__text"
         }, {
           children: text
         })), supportText && (0, _jsxRuntime.jsx)("span", __assign({
-          className: "ncua-checkbox__support-text"
+          className: "ncua-checkbox-field__support-text"
         }, {
           children: supportText
         }))]

package/dist/cjs/src/components/checkbox/CheckboxInput.js

@@ -5,10 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CheckboxInput = 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");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
@@ -28,6 +26,9 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   }
   return t;
 };
+/**
+ * 현재 destructive 속성은 현재 디자인 시스템에 존재하지 않으니 사용하지 않는 것을 권장합니다.
+ */
 var CheckboxInput = exports.CheckboxInput = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var _b = _a.size,
     size = _b === void 0 ? 'sm' : _b,
@@ -39,7 +40,43 @@ var CheckboxInput = exports.CheckboxInput = /*#__PURE__*/(0, _react.forwardRef)(
     destructive = _d === void 0 ? false : _d,
     onChange = _a.onChange,
     props = __rest(_a, ["size", "indeterminate", "disabled", "className", "destructive", "onChange"]);
-  var svgColor = disabled ? 'gray200' : 'gray700';
+  /**
+   * 체크박스 체크시 나오는 아이콘은 아이콘 컴포넌트와 굵기가 달라 별도로 정의하였습니다.
+   */
+  var checkIcon = (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (0, _jsxRuntime.jsx)("svg", __assign({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none"
+    }, {
+      children: (0, _jsxRuntime.jsx)("path", {
+        d: "M10 3L4.5 8.5L2 6",
+        stroke: disabled ? '#D3D4D8' : '#171818',
+        "stroke-width": "1.6666",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      })
+    }))
+  });
+  var indeterminateIcon = (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (0, _jsxRuntime.jsx)("svg", __assign({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none"
+    }, {
+      children: (0, _jsxRuntime.jsx)("path", {
+        d: "M2.5 6H9.5",
+        stroke: disabled ? '#D3D4D8' : '#2F2F30',
+        "stroke-width": "1.66666",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      })
+    }))
+  });
   return (0, _jsxRuntime.jsxs)("span", __assign({
     className: (0, _classnames.default)('ncua-checkbox-input', "ncua-checkbox-input--".concat(size), {
       destructive: destructive
@@ -53,15 +90,7 @@ var CheckboxInput = exports.CheckboxInput = /*#__PURE__*/(0, _react.forwardRef)(
     }, props)), (0, _jsxRuntime.jsx)("span", __assign({
       className: "ncua-checkbox-input__ico"
     }, {
-      children: !indeterminate ? (0, _jsxRuntime.jsx)(_uiAdminIcon.Check, {
-        width: 12,
-        height: 12,
-        color: _color.COLOR[svgColor]
-      }) : (0, _jsxRuntime.jsx)(_uiAdminIcon.Minus, {
-        width: 12,
-        height: 12,
-        color: _color.COLOR[svgColor]
-      })
+      children: !indeterminate ? checkIcon : indeterminateIcon
     }))]
   }));
 });

package/dist/cjs/src/components/date-picker/RangeDatePickerWithButtons.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RangeDatePickerWithButtons = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _RangeDatePicker = require("./RangeDatePicker");
+var _button = require("../button");
+var _datePicker = require("../../utils/date-picker");
+var _datePicker2 = require("../../constant/date-picker");
+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 RangeDatePickerWithButtons = function (_a) {
+  var currentButtonId = _a.currentButtonId,
+    setCurrentButtonId = _a.setCurrentButtonId,
+    startDateOptions = _a.startDateOptions,
+    endDateOptions = _a.endDateOptions,
+    validationOption = _a.validationOption,
+    periodKeys = _a.periodKeys,
+    onDateValidation = _a.onDateValidation;
+  var setCalculatedDate = function () {
+    var currentPeriodItem = _datePicker2.PERIOD_ITEM[currentButtonId];
+    if (!currentPeriodItem) {
+      return;
+    }
+    if (currentButtonId === 'ENTIRE') {
+      startDateOptions.onChangeDate('');
+      endDateOptions.onChangeDate('');
+      return;
+    }
+    var startDate = (0, _datePicker.getDateFormat)((0, _datePicker.getSubtractDate)({
+      period: currentPeriodItem.period,
+      unit: currentPeriodItem.unit
+    }));
+    startDateOptions.onChangeDate(startDate);
+    if (endDateOptions.currentDate !== (0, _datePicker.getDateFormat)()) {
+      endDateOptions.onChangeDate((0, _datePicker.getDateFormat)());
+    }
+  };
+  var handleOnChangeDate = function (date, type) {
+    type === 'START' ? startDateOptions.onChangeDate(date) : endDateOptions.onChangeDate(date);
+    currentButtonId && setCurrentButtonId('NONE');
+  };
+  (0, _react.useEffect)(function () {
+    if (currentButtonId !== 'NONE') {
+      setCalculatedDate();
+    }
+  }, [currentButtonId]);
+  return (0, _jsxRuntime.jsxs)("div", __assign({
+    className: "ncua-range-date-picker-with-buttons"
+  }, {
+    children: [(0, _jsxRuntime.jsx)(_button.ButtonGroup, __assign({
+      size: "sm"
+    }, {
+      children: periodKeys.map(function (key) {
+        return (0, _jsxRuntime.jsx)(_button.ButtonGroup.Item, {
+          isCurrent: currentButtonId === key,
+          label: _datePicker2.PERIOD_ITEM[key].text,
+          onClick: function () {
+            return setCurrentButtonId(key);
+          }
+        }, key);
+      })
+    })), (0, _jsxRuntime.jsx)(_RangeDatePicker.RangeDatePicker, {
+      startDateOptions: __assign(__assign({}, startDateOptions), {
+        onChangeDate: function (date) {
+          return handleOnChangeDate(date, 'START');
+        }
+      }),
+      endDateOptions: __assign(__assign({}, endDateOptions), {
+        onChangeDate: function (date) {
+          return handleOnChangeDate(date, 'END');
+        }
+      }),
+      validationOption: validationOption,
+      onDateValidation: onDateValidation
+    })]
+  }));
+};
+exports.RangeDatePickerWithButtons = RangeDatePickerWithButtons;

package/dist/cjs/src/components/date-picker/index.js

@@ -24,4 +24,26 @@ Object.keys(_RangeDatePicker).forEach(function (key) {
       return _RangeDatePicker[key];
     }
   });
+});
+var _RangeDatePickerWithButtons = require("./RangeDatePickerWithButtons");
+Object.keys(_RangeDatePickerWithButtons).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _RangeDatePickerWithButtons[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _RangeDatePickerWithButtons[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/featured-icon/FeaturedIcon.js

@@ -8,7 +8,6 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
-var _color = require("../../../constant/color");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
@@ -34,12 +33,6 @@ var iconSizeMap = {
   lg: 24,
   xl: 28
 };
-var iconStrokeColorMap = {
-  neutral: 'gray700',
-  error: 'red500',
-  warning: 'orange500',
-  success: 'green600'
-};
 var FeaturedIcon = exports.FeaturedIcon = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var name = _a.name,
     _b = _a.theme,
@@ -50,15 +43,6 @@ var FeaturedIcon = exports.FeaturedIcon = /*#__PURE__*/(0, _react.forwardRef)(fu
     size = _d === void 0 ? 'md' : _d,
     className = _a.className,
     rest = __rest(_a, ["name", "theme", "color", "size", "className"]);
-  var getIconColor = function () {
-    if (theme === 'dark-circle') {
-      return 'white';
-    }
-    if (theme === 'square-outline') {
-      return 'gray700';
-    }
-    return iconStrokeColorMap[color];
-  };
   return (0, _jsxRuntime.jsxs)("div", __assign({
     ref: ref,
     className: (0, _classnames.default)('ncua-featured-icon', "ncua-featured-icon--".concat(theme), "ncua-featured-icon--".concat(color), "ncua-featured-icon--".concat(size), className)
@@ -72,8 +56,7 @@ var FeaturedIcon = exports.FeaturedIcon = /*#__PURE__*/(0, _react.forwardRef)(fu
     }), (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
       name: name,
       width: iconSizeMap[size],
-      height: iconSizeMap[size],
-      color: _color.COLOR[getIconColor()]
+      height: iconSizeMap[size]
     })]
   }));
 });

package/dist/cjs/src/components/index.js

@@ -69,25 +69,25 @@ Object.keys(_datePicker).forEach(function (key) {
     }
   });
 });
-var _featuredIcon = require("./featured-icon");
-Object.keys(_featuredIcon).forEach(function (key) {
+var _divider = require("./divider");
+Object.keys(_divider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _featuredIcon[key]) return;
+  if (key in exports && exports[key] === _divider[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _featuredIcon[key];
+      return _divider[key];
     }
   });
 });
-var _divider = require("./divider");
-Object.keys(_divider).forEach(function (key) {
+var _dropdown = require("./dropdown");
+Object.keys(_dropdown).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _divider[key]) return;
+  if (key in exports && exports[key] === _dropdown[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _divider[key];
+      return _dropdown[key];
     }
   });
 });
@@ -102,6 +102,17 @@ Object.keys(_emptyState).forEach(function (key) {
     }
   });
 });
+var _featuredIcon = require("./featured-icon");
+Object.keys(_featuredIcon).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _featuredIcon[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _featuredIcon[key];
+    }
+  });
+});
 var _input = require("./input");
 Object.keys(_input).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -201,6 +212,17 @@ Object.keys(_shared).forEach(function (key) {
     }
   });
 });
+var _slider = require("./slider");
+Object.keys(_slider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _slider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _slider[key];
+    }
+  });
+});
 var _spinner = require("./spinner");
 Object.keys(_spinner).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/cjs/src/components/input/InputBase.js

@@ -49,8 +49,9 @@ var InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)(function
     destructive = _a.destructive,
     leadingElement = _a.leadingElement,
     trailingElement = _a.trailingElement,
-    props = __rest(_a, ["size", "required", "label", "hintText", "disabled", "validation", "destructive", "leadingElement", "trailingElement"]);
-  var renderOutsideSlot = function (slot, position) {
+    showHelpIcon = _a.showHelpIcon,
+    props = __rest(_a, ["size", "required", "label", "hintText", "disabled", "validation", "destructive", "leadingElement", "trailingElement", "showHelpIcon"]);
+  var renderOutsideSlot = function (slot) {
     if (slot.type === 'custom' && slot.placement !== 'outside') {
       return null;
     }
@@ -76,6 +77,7 @@ var InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)(function
     }
   };
   var renderInsideSlot = function (slot, position) {
+    var _a, _b;
     switch (slot.type) {
       case 'icon':
         return (0, _jsxRuntime.jsx)("div", __assign({
@@ -85,8 +87,8 @@ var InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)(function
             className: (0, _classnames.default)("ncua-input__".concat(position, "-icon"), slot.className),
             name: slot.icon,
             color: slot.color ? _color.COLOR[slot.color] : undefined,
-            width: generalSvgSize[size],
-            height: generalSvgSize[size]
+            width: (_a = slot.size) !== null && _a !== void 0 ? _a : generalSvgSize[size],
+            height: (_b = slot.size) !== null && _b !== void 0 ? _b : generalSvgSize[size]
           })
         }));
       case 'custom':
@@ -136,32 +138,44 @@ var InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)(function
     }
     return null;
   };
+  var renderLabel = function () {
+    if (!label) return null;
+    return (0, _jsxRuntime.jsxs)("div", __assign({
+      className: (0, _classnames.default)('ncua-input__label', "ncua-input__label--".concat(size))
+    }, {
+      children: [(0, _jsxRuntime.jsx)(_Label.Label, __assign({
+        isRequired: required,
+        htmlFor: props.id
+      }, {
+        children: label
+      })), showHelpIcon && (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+        className: "ncua-input__help-icon",
+        name: "help-circle"
+      })]
+    }));
+  };
   return (0, _jsxRuntime.jsxs)("div", __assign({
     className: (0, _classnames.default)('ncua-input', "ncua-input--".concat(size), {
       destructive: destructive,
       'is-disabled': disabled,
-      'ncua-input__trailing-button': (trailingElement === null || trailingElement === void 0 ? void 0 : trailingElement.type) === 'button'
+      'ncua-input__trailing-button': (trailingElement === null || trailingElement === void 0 ? void 0 : trailingElement.type) === 'button',
+      'ncua-input__leading-text-wrap': (leadingElement === null || leadingElement === void 0 ? void 0 : leadingElement.type) === 'text'
     })
   }, {
-    children: [label && (0, _jsxRuntime.jsx)(_Label.Label, __assign({
-      isRequired: required,
-      htmlFor: props.id,
-      className: "ncua-input__label--".concat(size)
-    }, {
-      children: label
-    })), (0, _jsxRuntime.jsxs)("div", __assign({
+    children: [renderLabel(), (0, _jsxRuntime.jsxs)("div", __assign({
       className: "ncua-input__content"
     }, {
-      children: [leadingElement && renderOutsideSlot(leadingElement, 'left'), (0, _jsxRuntime.jsxs)("div", __assign({
-        className: (0, _classnames.default)('ncua-input__field', "ncua-input--".concat(size))
+      children: [leadingElement && renderOutsideSlot(leadingElement), (0, _jsxRuntime.jsxs)("div", __assign({
+        className: (0, _classnames.default)('ncua-input__field', "ncua-input__field--".concat(size))
       }, {
         children: [leadingElement && renderInsideSlot(leadingElement, 'left'), (0, _jsxRuntime.jsx)("input", __assign({
           ref: ref,
           type: "text",
           disabled: disabled
         }, props)), trailingElement && renderInsideSlot(trailingElement, 'right'), renderClearButton(), renderStatusIcon()]
-      })), trailingElement && renderOutsideSlot(trailingElement, 'right')]
+      })), trailingElement && renderOutsideSlot(trailingElement)]
     })), hintText && (0, _jsxRuntime.jsx)(_HintText.HintText, __assign({
+      className: "ncua-input__hint-text",
       destructive: destructive
     }, {
       children: hintText

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

@@ -73,6 +73,7 @@ var PasswordInput = exports.PasswordInput = /*#__PURE__*/(0, _react.forwardRef)(
       }
       inputRef.current = node;
     },
+    size: size,
     type: isVisible ? 'text' : 'password',
     leadingElement: {
       type: 'icon',