@ncds/ui-admin 1.3.0 → 1.5.0

package/dist/esm/src/components/selectbox/SelectBox.js

@@ -0,0 +1,276 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Icon from '@ncds/ui-admin-icon/dynamic';
+import { COLOR } from '@ncds/ui-admin/constant/color';
+import classNames from 'classnames';
+import { forwardRef, useCallback, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useDropdown, useScrollLock } from '../../hooks/dropdown';
+import { useMultiSelect } from '../../utils/dropdown/multiSelect';
+import { SelectDropdown } from '../select-dropdown';
+import { HintText } from '../shared/hintText/HintText';
+import { Tag } from '../tag';
+export var DEFAULT_MAX_HEIGHT = 275;
+export var SelectBox = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _b = _a.placeholder,
+    placeholder = _b === void 0 ? '선택하세요' : _b,
+    _c = _a.disabledPlaceholder,
+    disabledPlaceholder = _c === void 0 ? false : _c,
+    hintText = _a.hintText,
+    _d = _a.size,
+    size = _d === void 0 ? 'xs' : _d,
+    _e = _a.type,
+    type = _e === void 0 ? 'default' : _e,
+    _f = _a.destructive,
+    destructive = _f === void 0 ? false : _f,
+    value = _a.value,
+    _g = _a.optionItems,
+    optionItems = _g === void 0 ? [] : _g,
+    _h = _a.disabled,
+    disabled = _h === void 0 ? false : _h,
+    _j = _a.maxHeight,
+    maxHeight = _j === void 0 ? DEFAULT_MAX_HEIGHT : _j,
+    _k = _a.multiple,
+    multiple = _k === void 0 ? false : _k,
+    id = _a.id,
+    className = _a.className,
+    children = _a.children,
+    register = _a.register,
+    onChange = _a.onChange,
+    onEdit = _a.onEdit,
+    props = __rest(_a, ["placeholder", "disabledPlaceholder", "hintText", "size", "type", "destructive", "value", "optionItems", "disabled", "maxHeight", "multiple", "id", "className", "children", "register", "onChange", "onEdit"]);
+  var internalRef = useRef(null);
+  var dropdownRef = useRef(null);
+  var _l = useState([]),
+    selectedTags = _l[0],
+    setSelectedTags = _l[1];
+  var selectedOption = useMemo(function () {
+    if (multiple) return null;
+    return optionItems.find(function (option) {
+      return option.id === value;
+    });
+  }, [optionItems, value, multiple]);
+  var displayValue = useMemo(function () {
+    if (multiple) {
+      return placeholder;
+    }
+    return selectedOption ? selectedOption.label : placeholder;
+  }, [multiple, selectedOption, placeholder]);
+  var handleOptionSelect = function (option) {
+    if (disabled) return;
+    var newValue;
+    if (multiple) {
+      var currentValues = Array.isArray(value) ? value : [];
+      if (currentValues.includes(option.id)) {
+        newValue = currentValues.filter(function (v) {
+          return v !== option.id;
+        });
+      } else {
+        newValue = __spreadArray(__spreadArray([], currentValues, true), [option.id], false);
+      }
+    } else {
+      newValue = option.id;
+    }
+    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    // react-hook-form 지원
+    if (register === null || register === void 0 ? void 0 : register.onChange) {
+      register.onChange({
+        target: {
+          value: multiple ? JSON.stringify(newValue) : newValue,
+          name: register.name
+        }
+      });
+    }
+  };
+  var _m = useDropdown({
+      triggerRef: internalRef,
+      dropdownRef: dropdownRef,
+      maxHeight: maxHeight,
+      itemCount: optionItems.length,
+      optionItems: optionItems,
+      disabled: disabled,
+      multiple: multiple,
+      onSelect: handleOptionSelect
+    }),
+    isOpen = _m.isOpen,
+    dropdownDirection = _m.direction,
+    focusedIndex = _m.focusedIndex,
+    toggleDropdown = _m.toggleDropdown,
+    closeDropdown = _m.closeDropdown,
+    handleKeyDown = _m.handleKeyDown,
+    handleDropdownSelect = _m.handleOptionSelect,
+    handleMouseMove = _m.handleMouseMove,
+    isKeyboardNavigation = _m.isKeyboardNavigation,
+    setFocusedIndex = _m.setFocusedIndex;
+  var activeDescendantId = useMemo(function () {
+    if (!isOpen || focusedIndex < 0 || focusedIndex >= optionItems.length) {
+      return undefined;
+    }
+    var focusedOption = optionItems[focusedIndex];
+    return "selectbox-options-".concat(id || 'default', "-").concat(focusedOption.id);
+  }, [isOpen, focusedIndex, optionItems, id]);
+  var handleOptionHover = useCallback(function (index) {
+    handleMouseMove();
+    setFocusedIndex(index);
+  }, [handleMouseMove, setFocusedIndex]);
+  // Multiple select 관련 로직
+  var currentSelectedValues = multiple && Array.isArray(value) ? value : [];
+  var _o = useMultiSelect(currentSelectedValues, optionItems),
+    selectAllButtonText = _o.buttonText,
+    toggleSelectAll = _o.toggleSelectAll,
+    getSelectedTagsData = _o.getSelectedTagsData,
+    removeTag = _o.removeTag;
+  var handleSelectAll = function () {
+    if (!multiple || !onChange) return;
+    var newSelectedValues = toggleSelectAll();
+    onChange(newSelectedValues);
+  };
+  var handleEdit = function () {
+    onEdit === null || onEdit === void 0 ? void 0 : onEdit();
+  };
+  var handleComplete = function () {
+    if (multiple) {
+      var tags = getSelectedTagsData();
+      setSelectedTags(tags);
+    }
+    closeDropdown();
+  };
+  var handleRemoveTag = function (tagId) {
+    if (!onChange) return;
+    if (multiple) {
+      var newSelectedValues = removeTag(tagId);
+      onChange(newSelectedValues);
+      setSelectedTags(function (prev) {
+        return prev.filter(function (tag) {
+          return tag.id !== tagId;
+        });
+      });
+    }
+  };
+  useScrollLock(isOpen, dropdownRef);
+  useLayoutEffect(function () {
+    if (isOpen && dropdownRef.current && internalRef.current) {
+      var dropdownWidth = dropdownRef.current.offsetWidth;
+      internalRef.current.style.width = "".concat(dropdownWidth, "px");
+    }
+  }, [isOpen, optionItems]);
+  useImperativeHandle(ref, function () {
+    return internalRef.current;
+  }, []);
+  return _jsxs(_Fragment, {
+    children: [_jsxs("div", __assign({
+      ref: internalRef,
+      className: classNames('ncua-selectbox', "ncua-selectbox--".concat(size), {
+        'ncua-selectbox--open': isOpen,
+        'ncua-selectbox--disabled': disabled,
+        'ncua-selectbox--simple': type === 'simple',
+        'ncua-selectbox--multiple': multiple,
+        destructive: destructive
+      }, className)
+    }, props, {
+      children: [_jsxs("div", __assign({
+        className: classNames('ncua-selectbox__content'),
+        onClick: toggleDropdown,
+        onKeyDown: handleKeyDown,
+        tabIndex: disabled ? -1 : 0,
+        role: "combobox",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        "aria-controls": "selectbox-options-".concat(id || 'default'),
+        "aria-disabled": disabled,
+        "aria-label": selectedOption ? selectedOption.label : placeholder,
+        "aria-activedescendant": activeDescendantId
+      }, {
+        children: [_jsxs("div", __assign({
+          className: "ncua-selectbox__content-inner"
+        }, {
+          children: [_jsx("span", __assign({
+            className: "ncua-selectbox__value"
+          }, {
+            children: displayValue
+          })), _jsx(Icon, {
+            name: "chevron-down",
+            width: size === 'xs' ? 14 : 16,
+            height: size === 'xs' ? 14 : 16,
+            color: disabled ? COLOR.gray300 : COLOR.gray500,
+            className: classNames('ncua-selectbox__arrow', {
+              'ncua-selectbox__arrow--up': isOpen
+            })
+          })]
+        })), _jsx(SelectDropdown, __assign({
+          ref: dropdownRef,
+          isOpen: isOpen,
+          direction: dropdownDirection,
+          size: size,
+          options: optionItems,
+          value: value,
+          focusedIndex: focusedIndex,
+          maxHeight: maxHeight,
+          listboxId: "selectbox-options-".concat(id || 'default'),
+          multiple: multiple,
+          showFooterButtons: multiple,
+          selectAllButtonText: selectAllButtonText,
+          componentType: "selectbox",
+          isKeyboardNavigation: isKeyboardNavigation,
+          activeDescendantId: activeDescendantId,
+          onOptionSelect: handleDropdownSelect,
+          onMouseMove: handleMouseMove,
+          onOptionHover: handleOptionHover,
+          onSelectAll: handleSelectAll,
+          onEdit: handleEdit,
+          onComplete: handleComplete
+        }, {
+          children: children
+        }))]
+      })), hintText && _jsx(HintText, __assign({
+        destructive: destructive,
+        className: "ncua-hint-text"
+      }, {
+        children: hintText
+      })), register && _jsx("input", __assign({
+        type: "hidden"
+      }, register, {
+        value: multiple ? JSON.stringify(value || []) : String(value || '')
+      }))]
+    })), selectedTags.length > 0 && _jsx("div", __assign({
+      className: "ncua-selectbox__tags"
+    }, {
+      children: selectedTags.map(function (tag) {
+        return _jsx(Tag, {
+          text: tag.label,
+          size: "sm",
+          close: true,
+          onButtonClick: function () {
+            return handleRemoveTag(tag.id);
+          }
+        }, tag.id);
+      })
+    }))]
+  });
+});
+SelectBox.displayName = 'SelectBox';

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

@@ -0,0 +1 @@
+export { SelectBox } from './SelectBox';

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

@@ -20,7 +20,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 export var HintText = function (_a) {
   var _b = _a.as,
-    Component = _b === void 0 ? 'p' : _b,
+    Component = _b === void 0 ? 'span' : _b,
     children = _a.children,
     className = _a.className,
     destructive = _a.destructive,

package/dist/esm/src/components/switch/Switch.js

@@ -0,0 +1,116 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { useState, forwardRef } from 'react';
+export var Switch = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _b = _a.size,
+    size = _b === void 0 ? 'xs' : _b,
+    left = _a.left,
+    right = _a.right,
+    _c = _a.disabled,
+    disabled = _c === void 0 ? false : _c,
+    value = _a.value,
+    _d = _a.defaultValue,
+    defaultValue = _d === void 0 ? left.value : _d,
+    onChange = _a.onChange,
+    className = _a.className,
+    name = _a.name,
+    refs = _a.refs;
+  // 값을 문자열로 정규화하는 함수
+  var normalizeValue = function (val) {
+    return typeof val === 'boolean' ? String(val) : val;
+  };
+  // 유효한 사이즈인지 확인하는 함수
+  var getValidSize = function (size) {
+    var validSizes = ['xxs', 'xs', 'sm', 'md'];
+    return size && validSizes.includes(size) ? size : 'xs';
+  };
+  var isBooleanType = typeof left.value === 'boolean' && typeof right.value === 'boolean';
+  // 현재 값 처리
+  var getCurrentValue = function () {
+    if (value === undefined) return undefined;
+    if (isBooleanType && typeof value === 'boolean') {
+      return normalizeValue(value ? left.value : right.value);
+    }
+    return normalizeValue(value);
+  };
+  var isControlled = getCurrentValue() !== undefined;
+  var _e = useState(normalizeValue(defaultValue)),
+    internalValue = _e[0],
+    setInternalValue = _e[1];
+  var currentValue = isControlled ? getCurrentValue() : internalValue;
+  var handleChange = function (newValue) {
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    if (!onChange) return;
+    // 선택된 옵션 찾기
+    var selectedOption = newValue === normalizeValue(left.value) ? left : right;
+    if (isBooleanType && typeof value === 'boolean') {
+      onChange(newValue === normalizeValue(left.value));
+    } else {
+      onChange(selectedOption.value);
+    }
+  };
+  return _jsxs("div", __assign({
+    className: classNames('ncua-switch', "ncua-switch--".concat(getValidSize(size)), {
+      'ncua-switch--disabled': disabled
+    }, className)
+  }, {
+    children: [_jsxs("label", __assign({
+      className: classNames('ncua-switch__option', 'ncua-switch__option--left', {
+        'ncua-switch__option--active': currentValue === normalizeValue(left.value),
+        'ncua-switch__option--inactive': currentValue !== normalizeValue(left.value)
+      })
+    }, {
+      children: [_jsx("input", {
+        type: "radio",
+        ref: refs === null || refs === void 0 ? void 0 : refs[0],
+        name: name,
+        value: normalizeValue(left.value),
+        checked: currentValue === normalizeValue(left.value),
+        disabled: disabled,
+        className: "ncua-switch__radio ncua-switch__radio--left",
+        onChange: function () {
+          return handleChange(normalizeValue(left.value));
+        }
+      }), _jsx("span", __assign({
+        className: "ncua-switch__label"
+      }, {
+        children: left.label
+      }))]
+    })), _jsxs("label", __assign({
+      className: classNames('ncua-switch__option', 'ncua-switch__option--right', {
+        'ncua-switch__option--active': currentValue === normalizeValue(right.value),
+        'ncua-switch__option--inactive': currentValue !== normalizeValue(right.value)
+      })
+    }, {
+      children: [_jsx("input", {
+        type: "radio",
+        ref: refs === null || refs === void 0 ? void 0 : refs[1],
+        name: name,
+        value: normalizeValue(right.value),
+        checked: currentValue === normalizeValue(right.value),
+        disabled: disabled,
+        className: "ncua-switch__radio ncua-switch__radio--right",
+        onChange: function () {
+          return handleChange(normalizeValue(right.value));
+        }
+      }), _jsx("span", __assign({
+        className: "ncua-switch__label"
+      }, {
+        children: right.label
+      }))]
+    }))]
+  }));
+});
+Switch.displayName = 'Switch';

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

@@ -0,0 +1 @@
+export { Switch } from './Switch';

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

@@ -10,7 +10,7 @@ var __assign = this && this.__assign || function () {
 };
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { uniqueId } from 'lodash';
+import { uniqueId } from 'lodash-es';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { TabButton } from './TabButton';
 export var HorizontalTab = function (_a) {
@@ -19,7 +19,6 @@ export var HorizontalTab = function (_a) {
     _c = _a.size,
     size = _c === void 0 ? 'sm' : _c,
     activeTab = _a.activeTab,
-    onClick = _a.onClick,
     _d = _a.fullWidth,
     fullWidth = _d === void 0 ? false : _d,
     _e = _a.menus,
@@ -42,26 +41,15 @@ export var HorizontalTab = function (_a) {
       spaceBetween: getTabGap(type)
     }, {
       children: menus.map(function (menu) {
-        var isActive = menu.href ? menu.href.includes(activeTab) : menu.id === activeTab;
-        var commonProps = {
-          id: menu.id,
-          label: menu.label,
-          badgeInfo: menu.badgeInfo,
-          isActive: isActive,
-          tabButtonType: type,
-          size: size,
-          onClick: function () {
-            var _a;
-            return onClick === null || onClick === void 0 ? void 0 : onClick((_a = menu.id) !== null && _a !== void 0 ? _a : '');
-          }
-        };
+        var isActive = 'href' in menu && menu.href ? menu.href.includes(activeTab) : menu.id === activeTab;
         return _jsx(SwiperSlide, __assign({
           className: "ncua-horizontal-tab__item"
         }, {
-          children: menu.href ? _jsx(TabButton, __assign({}, commonProps, {
-            href: menu.href,
-            target: menu.target
-          })) : _jsx(TabButton, __assign({}, commonProps))
+          children: _jsx(TabButton, __assign({}, menu, {
+            isActive: isActive,
+            tabButtonType: type,
+            size: size
+          }))
         }), uniqueId('horizontal-tab'));
       })
     }))

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

@@ -16,11 +16,13 @@ var __rest = this && this.__rest || function (s, e) {
   }
   return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { Badge } from '../badge/Badge';
+import Icon from '@ncds/ui-admin-icon/dynamic';
 export var TabButton = function (_a) {
-  var label = _a.label,
+  var id = _a.id,
+    label = _a.label,
     _b = _a.size,
     size = _b === void 0 ? 'sm' : _b,
     tabButtonType = _a.tabButtonType,
@@ -30,9 +32,8 @@ export var TabButton = function (_a) {
     badgeInfo = _a.badgeInfo,
     className = _a.className,
     children = _a.children,
-    props = __rest(_a, ["label", "size", "tabButtonType", "type", "isActive", "badgeInfo", "className", "children"]);
-  var tabType = tabButtonType || type;
-  var componentClassName = classNames('ncua-tab-button', "ncua-tab-button--".concat(size), "ncua-tab-button--".concat(tabType || 'button-primary'), {
+    props = __rest(_a, ["id", "label", "size", "tabButtonType", "type", "isActive", "badgeInfo", "className", "children"]);
+  var componentClassName = classNames('ncua-tab-button', {
     'is-active': isActive
   }, className);
   if ('href' in props && props.href) {
@@ -45,8 +46,7 @@ export var TabButton = function (_a) {
     return _jsxs("a", __assign({
       className: componentClassName,
       href: href,
-      target: target,
-      onClick: onClick_1
+      target: target
     }, anchorProps, {
       children: [label, badgeInfo && _jsx(Badge, __assign({}, badgeInfo, {
         size: "xs"
@@ -55,14 +55,31 @@ export var TabButton = function (_a) {
   }
   var _f = props,
     onClick = _f.onClick,
-    buttonProps = __rest(_f, ["onClick"]);
-  return _jsxs("button", __assign({
-    type: "button",
-    className: componentClassName,
-    onClick: onClick
-  }, buttonProps, {
-    children: [label, badgeInfo && _jsx(Badge, __assign({}, badgeInfo, {
-      size: "xs"
-    })), children]
-  }));
+    onClose = _f.onClose,
+    buttonProps = __rest(_f, ["onClick", "onClose"]);
+  return _jsxs(_Fragment, {
+    children: [_jsxs("button", __assign({
+      type: "button",
+      className: componentClassName,
+      onClick: function () {
+        return onClick === null || onClick === void 0 ? void 0 : onClick(id !== null && id !== void 0 ? id : '');
+      }
+    }, buttonProps, {
+      children: [label, badgeInfo && _jsx(Badge, __assign({}, badgeInfo, {
+        size: "xs"
+      })), children]
+    })), onClose && _jsx("button", __assign({
+      type: "button",
+      className: "ncua-tab-close",
+      onClick: function () {
+        return onClose === null || onClose === void 0 ? void 0 : onClose(id !== null && id !== void 0 ? id : '');
+      }
+    }, {
+      children: _jsx(Icon, {
+        name: "x-close",
+        width: 14,
+        height: 14
+      })
+    }))]
+  });
 };

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

@@ -10,7 +10,6 @@ var __assign = this && this.__assign || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { Fragment } from 'react';
 import { Select } from '../select/Select';
 import { TabButton } from './TabButton';
 export var VerticalTab = function (_a) {
@@ -20,9 +19,9 @@ export var VerticalTab = function (_a) {
     breakPoint = _c === void 0 ? 'pc' : _c,
     activeTab = _a.activeTab,
     menus = _a.menus,
-    onClick = _a.onClick;
+    onSelect = _a.onSelect;
   var handleSelectChange = function (e) {
-    onClick === null || onClick === void 0 ? void 0 : onClick(e.target.value);
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(e.target.value);
   };
   var optionItems = (menus === null || menus === void 0 ? void 0 : menus.map(function (menu) {
     return {
@@ -30,38 +29,24 @@ export var VerticalTab = function (_a) {
       label: menu.label || ''
     };
   })) || [];
+  if (breakPoint === 'mobile') {
+    return _jsx(Select, {
+      value: activeTab,
+      onChange: handleSelectChange,
+      optionItems: optionItems,
+      size: "md"
+    });
+  }
   return _jsx("div", __assign({
     className: classNames('ncua-vertical-tab', "ncua-vertical-tab--".concat(type))
   }, {
-    children: breakPoint === 'mobile' ? _jsx("div", __assign({
-      className: "ncua-vertical-tab__select"
-    }, {
-      children: _jsx(Select, {
-        value: activeTab,
-        onChange: handleSelectChange,
-        optionItems: optionItems,
-        size: "md"
-      })
-    })) : menus === null || menus === void 0 ? void 0 : menus.map(function (menu) {
-      var isActive = menu.href ? menu.href.includes(activeTab) : menu.id === activeTab;
-      var commonProps = {
-        id: menu.id,
-        label: menu.label,
-        badgeInfo: menu.badgeInfo,
+    children: menus === null || menus === void 0 ? void 0 : menus.map(function (menu) {
+      var isActive = 'href' in menu && menu.href ? menu.href.includes(activeTab) : menu.id === activeTab;
+      return _jsx(TabButton, __assign({}, menu, {
         isActive: isActive,
         tabButtonType: type,
-        size: 'md',
-        onClick: function () {
-          var _a;
-          return onClick === null || onClick === void 0 ? void 0 : onClick((_a = menu.id) !== null && _a !== void 0 ? _a : '');
-        }
-      };
-      return _jsx(Fragment, {
-        children: menu.href ? _jsx(TabButton, __assign({}, commonProps, {
-          href: menu.href,
-          target: menu.target
-        })) : _jsx(TabButton, __assign({}, commonProps))
-      }, menu.id);
+        size: "md"
+      }), menu.id);
     })
   }));
 };