@nurihaus/web-design-system 3.0.1 → 3.0.3

package/dist/text-field.js

@@ -0,0 +1,369 @@
+"use client";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8__ from "react/jsx-runtime";
+/******/ var __webpack_modules__ = ({
+
+/***/ 295
+(__unused_webpack_module, __webpack_exports__, __nuri_require__) {
+
+
+// EXPORTS
+__nuri_require__.d(__webpack_exports__, {
+  A: () => (/* binding */ text_field)
+});
+
+// EXTERNAL MODULE: external {"root":"jsx-runtime","commonjs2":"react/jsx-runtime","commonjs":"react/jsx-runtime","amd":"react/jsx-runtime","module":"react/jsx-runtime"}
+var jsx_runtime_ = __nuri_require__(612);
+// EXTERNAL MODULE: external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react","module":"react"}
+var external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_ = __nuri_require__(41);
+// EXTERNAL MODULE: ./helpers/utils/classNames.js
+var classNames = __nuri_require__(274);
+// EXTERNAL MODULE: ./helpers/utils/getMergedProps.ts
+var getMergedProps = __nuri_require__(335);
+// EXTERNAL MODULE: ./components/elements/text/text.tsx
+var text_text = __nuri_require__(739);
+;// ./components/text-field/base-text-field.tsx
+var __assign = undefined && undefined.__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 = undefined && undefined.__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 TextFieldContext = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.createContext)({
+  value: '',
+  onChange: function onChange() {}
+});
+// context 만 내려주고 DOM 을 그리지 않아 ref 를 받을 곳이 없다.
+var TextFieldRootBase = function TextFieldRootBase(props) {
+  var children = props.children,
+    value = props.value,
+    onChange = props.onChange,
+    defaultValue = props.defaultValue;
+  var isControlled = value !== undefined;
+  var _a = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : ''),
+    innerValue = _a[0],
+    setInnerValue = _a[1];
+  var inputValue = isControlled ? value !== null && value !== void 0 ? value : '' : innerValue;
+  var handleChange = function handleChange(e) {
+    if (!isControlled) {
+      setInnerValue(e.target.value);
+    }
+    onChange === null || onChange === void 0 ? void 0 : onChange(e);
+  };
+  return (0,jsx_runtime_.jsx)(TextFieldContext.Provider, {
+    value: {
+      value: inputValue,
+      onChange: handleChange
+    },
+    children: children
+  });
+};
+TextFieldRootBase.displayName = 'TextFieldRoot';
+var TextFieldLabel = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var text = props.text,
+    className = props.className;
+  return typeof text === 'string' ? (0,jsx_runtime_.jsx)(text_text/* default */.A, {
+    ref: ref,
+    className: (0,classNames/* classNames */.x)('nuri-theme base-text-field label', className),
+    text: text,
+    size: 'sm',
+    weight: 'bold'
+  }) : text;
+});
+TextFieldLabel.displayName = 'TextFieldLabel';
+var TextFieldInput = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var className = props.className,
+    disabled = props.disabled,
+    restProps = __rest(props, ["className", "disabled"]);
+  var _a = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.useContext)(TextFieldContext),
+    value = _a.value,
+    onChange = _a.onChange;
+  return (0,jsx_runtime_.jsx)("input", __assign({
+    ref: ref,
+    className: (0,classNames/* classNames */.x)('nuri-theme base-text-field input', className),
+    disabled: disabled,
+    "data-disabled": disabled
+  }, restProps, {
+    // 값은 Root 가 쥔다. 넘겨받은 value·onChange 가 Root 상태를 덮지 않게 spread 뒤에 둔다.
+    value: value,
+    onChange: onChange
+  }));
+});
+TextFieldInput.displayName = 'TextFieldInput';
+var TextFieldHelperText = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var text = props.text,
+    className = props.className;
+  return typeof text === 'string' ? (0,jsx_runtime_.jsx)(text_text/* default */.A, {
+    ref: ref,
+    className: (0,classNames/* classNames */.x)('nuri-theme base-text-field helper-text', className),
+    text: text,
+    size: 'sm',
+    weight: 'regular'
+  }) : text;
+});
+TextFieldHelperText.displayName = 'TextFieldHelperText';
+var TextFieldRoot = Object.assign(TextFieldRootBase, {
+  Label: TextFieldLabel,
+  Input: TextFieldInput,
+  HelperText: TextFieldHelperText
+});
+/* harmony default export */ const base_text_field = (TextFieldRoot);
+// EXTERNAL MODULE: ./helpers/props/common-props.ts
+var common_props = __nuri_require__(298);
+;// ./components/text-field/text-field-props.ts
+
+var sizes = ['s', 'm'];
+var textFieldProps = {
+  size: (0,common_props/* sizeProp */.lw)(sizes, 's'),
+  width: (0,common_props/* widthProp */.Iw)('100%')
+};
+;// ./components/text-field/text-field.tsx
+var text_field_assign = undefined && undefined.__assign || function () {
+  text_field_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 text_field_assign.apply(this, arguments);
+};
+var text_field_rest = undefined && undefined.__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 TextField = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var _a = (0,getMergedProps/* getMergedProps */.p)(props, textFieldProps),
+    className = _a.className,
+    style = _a.style,
+    leftIcon = _a.leftIcon,
+    rightIcon = _a.rightIcon,
+    title = _a.title,
+    value = _a.value,
+    onChange = _a.onChange,
+    defaultValue = _a.defaultValue,
+    helperText = _a.helperText,
+    isError = _a.isError,
+    restProps = text_field_rest(_a, ["className", "style", "leftIcon", "rightIcon", "title", "value", "onChange", "defaultValue", "helperText", "isError"]);
+  return (0,jsx_runtime_.jsx)(base_text_field, {
+    value: value,
+    onChange: onChange,
+    defaultValue: defaultValue,
+    children: (0,jsx_runtime_.jsxs)("div", {
+      className: 'text-field',
+      children: [title && (0,jsx_runtime_.jsx)(base_text_field.Label, {
+        className: 'text-field-title',
+        text: title
+      }), (0,jsx_runtime_.jsxs)("div", {
+        className: (0,classNames/* classNames */.x)('nuri-theme text-field-input-wrapper', className),
+        style: style,
+        children: [leftIcon, (0,jsx_runtime_.jsx)(base_text_field.Input, text_field_assign({
+          ref: ref
+        }, restProps)), rightIcon]
+      }), helperText && (0,jsx_runtime_.jsx)(base_text_field.HelperText, {
+        className: (0,classNames/* classNames */.x)('text-field-helper-text', isError && 'error'),
+        text: helperText
+      })]
+    })
+  });
+});
+TextField.displayName = 'TextField';
+/* harmony default export */ const text_field = (TextField);
+
+/***/ },
+
+/***/ 41
+(module, __unused_webpack_exports, __nuri_require__) {
+
+var x = (y) => {
+	var x = {}; __nuri_require__.d(x, y); return x
+} 
+var y = (x) => (() => (x))
+module.exports = x({ ["createContext"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createContext), ["forwardRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.forwardRef), ["useContext"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useContext), ["useState"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useState) });
+
+/***/ },
+
+/***/ 612
+(module, __unused_webpack_exports, __nuri_require__) {
+
+var x = (y) => {
+	var x = {}; __nuri_require__.d(x, y); return x
+} 
+var y = (x) => (() => (x))
+module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8__.jsx), ["jsxs"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8__.jsxs) });
+
+/***/ }
+
+/******/ });
+/************************************************************************/
+/******/ // The module cache
+/******/ var __webpack_module_cache__ = {};
+/******/ 
+/******/ // The require function
+/******/ function __nuri_require__(moduleId) {
+/******/ 	// Check if module is in cache
+/******/ 	var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 	if (cachedModule !== undefined) {
+/******/ 		return cachedModule.exports;
+/******/ 	}
+/******/ 	// Create a new module (and put it into the cache)
+/******/ 	var module = __webpack_module_cache__[moduleId] = {
+/******/ 		// no module.id needed
+/******/ 		// no module.loaded needed
+/******/ 		exports: {}
+/******/ 	};
+/******/ 
+/******/ 	// Execute the module function
+/******/ 	__webpack_modules__[moduleId](module, module.exports, __nuri_require__);
+/******/ 
+/******/ 	// Return the exports of the module
+/******/ 	return module.exports;
+/******/ }
+/******/ 
+/******/ // expose the modules object (__webpack_modules__)
+/******/ __nuri_require__.m = __webpack_modules__;
+/******/ 
+/************************************************************************/
+/******/ /* webpack/runtime/chunk loaded */
+/******/ (() => {
+/******/ 	var deferred = [];
+/******/ 	__nuri_require__.O = (result, chunkIds, fn, priority) => {
+/******/ 		if(chunkIds) {
+/******/ 			priority = priority || 0;
+/******/ 			for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
+/******/ 			deferred[i] = [chunkIds, fn, priority];
+/******/ 			return;
+/******/ 		}
+/******/ 		var notFulfilled = Infinity;
+/******/ 		for (var i = 0; i < deferred.length; i++) {
+/******/ 			var [chunkIds, fn, priority] = deferred[i];
+/******/ 			var fulfilled = true;
+/******/ 			for (var j = 0; j < chunkIds.length; j++) {
+/******/ 				if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__nuri_require__.O).every((key) => (__nuri_require__.O[key](chunkIds[j])))) {
+/******/ 					chunkIds.splice(j--, 1);
+/******/ 				} else {
+/******/ 					fulfilled = false;
+/******/ 					if(priority < notFulfilled) notFulfilled = priority;
+/******/ 				}
+/******/ 			}
+/******/ 			if(fulfilled) {
+/******/ 				deferred.splice(i--, 1)
+/******/ 				var r = fn();
+/******/ 				if (r !== undefined) result = r;
+/******/ 			}
+/******/ 		}
+/******/ 		return result;
+/******/ 	};
+/******/ })();
+/******/ 
+/******/ /* webpack/runtime/define property getters */
+/******/ (() => {
+/******/ 	// define getter functions for harmony exports
+/******/ 	__nuri_require__.d = (exports, definition) => {
+/******/ 		for(var key in definition) {
+/******/ 			if(__nuri_require__.o(definition, key) && !__nuri_require__.o(exports, key)) {
+/******/ 				Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 			}
+/******/ 		}
+/******/ 	};
+/******/ })();
+/******/ 
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ 	__nuri_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/ 
+/******/ /* webpack/runtime/export webpack runtime */
+/******/ export { __nuri_require__ };
+/******/ 
+/******/ /* webpack/runtime/import chunk loading */
+/******/ (() => {
+/******/ 	// no baseURI
+/******/ 	
+/******/ 	// object to store loaded and loading chunks
+/******/ 	// undefined = chunk not loaded, null = chunk preloaded/prefetched
+/******/ 	// [resolve, Promise] = chunk loading, 0 = chunk loaded
+/******/ 	var installedChunks = {
+/******/ 		489: 0
+/******/ 	};
+/******/ 	
+/******/ 	var installChunk = (data) => {
+/******/ 		var {__webpack_esm_ids__, __webpack_esm_modules__, __webpack_esm_runtime__} = data;
+/******/ 		// add "modules" to the modules object,
+/******/ 		// then flag all "ids" as loaded and fire callback
+/******/ 		var moduleId, chunkId, i = 0;
+/******/ 		for(moduleId in __webpack_esm_modules__) {
+/******/ 			if(__nuri_require__.o(__webpack_esm_modules__, moduleId)) {
+/******/ 				__nuri_require__.m[moduleId] = __webpack_esm_modules__[moduleId];
+/******/ 			}
+/******/ 		}
+/******/ 		if(__webpack_esm_runtime__) __webpack_esm_runtime__(__nuri_require__);
+/******/ 		for(;i < __webpack_esm_ids__.length; i++) {
+/******/ 			chunkId = __webpack_esm_ids__[i];
+/******/ 			if(__nuri_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
+/******/ 				installedChunks[chunkId][0]();
+/******/ 			}
+/******/ 			installedChunks[__webpack_esm_ids__[i]] = 0;
+/******/ 		}
+/******/ 		__nuri_require__.O();
+/******/ 	}
+/******/ 	
+/******/ 	// no chunk on demand loading
+/******/ 	
+/******/ 	// no prefetching
+/******/ 	
+/******/ 	// no preloaded
+/******/ 	
+/******/ 	__nuri_require__.C = installChunk;
+/******/ 	
+/******/ 	__nuri_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);
+/******/ 	// no HMR
+/******/ 	
+/******/ 	// no HMR manifest
+/******/ })();
+/******/ 
+/************************************************************************/
+/******/ 
+/******/ import * as __webpack_chunk_1__ from "./chunk-364.js";
+/******/ __nuri_require__.C(__webpack_chunk_1__);
+/******/ import * as __webpack_chunk_2__ from "./chunk-917.js";
+/******/ __nuri_require__.C(__webpack_chunk_2__);
+/******/ import * as __webpack_chunk_3__ from "./chunk-558.js";
+/******/ __nuri_require__.C(__webpack_chunk_3__);
+/******/ import * as __webpack_chunk_4__ from "./chunk-739.js";
+/******/ __nuri_require__.C(__webpack_chunk_4__);
+/******/ 
+/******/ // startup
+/******/ // Load entry module and return exports
+/******/ // This entry module depends on other loaded chunks and execution need to be delayed
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [364,917,558,739], () => (__nuri_require__(295)))
+/******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
+/******/ const __webpack_exports__default = __webpack_exports__.A;
+/******/ export { __webpack_exports__default as default };
+/******/ 

package/dist/text.js

@@ -0,0 +1,233 @@
+"use client";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8__ from "react/jsx-runtime";
+/******/ var __webpack_modules__ = ({
+
+/***/ 739
+(__unused_webpack_module, __webpack_exports__, __nuri_require__) {
+
+/* harmony export */ __nuri_require__.d(__webpack_exports__, {
+/* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __nuri_require__(612);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __nuri_require__(41);
+/* harmony import */ var _helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_2__ = __nuri_require__(274);
+/* harmony import */ var _helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_3__ = __nuri_require__(335);
+/* harmony import */ var _base_text__WEBPACK_IMPORTED_MODULE_4__ = __nuri_require__(437);
+/* harmony import */ var _text_props__WEBPACK_IMPORTED_MODULE_5__ = __nuri_require__(74);
+var __rest = undefined && undefined.__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;
+};
+
+
+
+
+
+
+// CSS 클래스는 camelCase(`whiteSpace-preLine`)인데 prop 값은 CSS 표기(`pre-line`)라 변환해서 붙인다.
+var styleClass = function styleClass(prefix, value) {
+  return value ? "".concat(prefix, "-").concat(String(value).replace(/-(\w)/g, function (_, c) {
+    return c.toUpperCase();
+  })) : '';
+};
+// `2xl` 처럼 숫자로 시작하는 클래스는 선택자로 쓸 수 없어 `t-` 를 붙인다.
+var sizeClass = function sizeClass(size) {
+  return /^\d+xl$/.test(size) ? "t-".concat(size) : size;
+};
+// onClick·id 같은 HTML 속성은 넘기지 않는다. className 과 style 만 요소에 간다.
+var Text = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
+  var _a = (0,_helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_3__/* .getMergedProps */ .p)(props, _text_props__WEBPACK_IMPORTED_MODULE_5__/* .textProps */ .em),
+    text = _a.text,
+    size = _a.size,
+    weight = _a.weight,
+    as = _a.as,
+    className = _a.className,
+    style = _a.style,
+    restProps = __rest(_a, ["text", "size", "weight", "as", "className", "style"]);
+  var textClassName = (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_2__/* .classNames */ .x)(className, sizeClass(size), weight, _text_props__WEBPACK_IMPORTED_MODULE_5__/* .styleClassProps */ .Oc.map(function (key) {
+    return styleClass(key, restProps[key]);
+  }));
+  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_text__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A, {
+    ref: ref,
+    className: textClassName,
+    as: as,
+    style: style,
+    children: text
+  });
+});
+Text.displayName = 'Text';
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Text);
+
+/***/ },
+
+/***/ 41
+(module, __unused_webpack_exports, __nuri_require__) {
+
+var x = (y) => {
+	var x = {}; __nuri_require__.d(x, y); return x
+} 
+var y = (x) => (() => (x))
+module.exports = x({ ["forwardRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.forwardRef) });
+
+/***/ },
+
+/***/ 612
+(module, __unused_webpack_exports, __nuri_require__) {
+
+var x = (y) => {
+	var x = {}; __nuri_require__.d(x, y); return x
+} 
+var y = (x) => (() => (x))
+module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8__.jsx) });
+
+/***/ }
+
+/******/ });
+/************************************************************************/
+/******/ // The module cache
+/******/ var __webpack_module_cache__ = {};
+/******/ 
+/******/ // The require function
+/******/ function __nuri_require__(moduleId) {
+/******/ 	// Check if module is in cache
+/******/ 	var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 	if (cachedModule !== undefined) {
+/******/ 		return cachedModule.exports;
+/******/ 	}
+/******/ 	// Create a new module (and put it into the cache)
+/******/ 	var module = __webpack_module_cache__[moduleId] = {
+/******/ 		// no module.id needed
+/******/ 		// no module.loaded needed
+/******/ 		exports: {}
+/******/ 	};
+/******/ 
+/******/ 	// Execute the module function
+/******/ 	__webpack_modules__[moduleId](module, module.exports, __nuri_require__);
+/******/ 
+/******/ 	// Return the exports of the module
+/******/ 	return module.exports;
+/******/ }
+/******/ 
+/******/ // expose the modules object (__webpack_modules__)
+/******/ __nuri_require__.m = __webpack_modules__;
+/******/ 
+/************************************************************************/
+/******/ /* webpack/runtime/chunk loaded */
+/******/ (() => {
+/******/ 	var deferred = [];
+/******/ 	__nuri_require__.O = (result, chunkIds, fn, priority) => {
+/******/ 		if(chunkIds) {
+/******/ 			priority = priority || 0;
+/******/ 			for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
+/******/ 			deferred[i] = [chunkIds, fn, priority];
+/******/ 			return;
+/******/ 		}
+/******/ 		var notFulfilled = Infinity;
+/******/ 		for (var i = 0; i < deferred.length; i++) {
+/******/ 			var [chunkIds, fn, priority] = deferred[i];
+/******/ 			var fulfilled = true;
+/******/ 			for (var j = 0; j < chunkIds.length; j++) {
+/******/ 				if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__nuri_require__.O).every((key) => (__nuri_require__.O[key](chunkIds[j])))) {
+/******/ 					chunkIds.splice(j--, 1);
+/******/ 				} else {
+/******/ 					fulfilled = false;
+/******/ 					if(priority < notFulfilled) notFulfilled = priority;
+/******/ 				}
+/******/ 			}
+/******/ 			if(fulfilled) {
+/******/ 				deferred.splice(i--, 1)
+/******/ 				var r = fn();
+/******/ 				if (r !== undefined) result = r;
+/******/ 			}
+/******/ 		}
+/******/ 		return result;
+/******/ 	};
+/******/ })();
+/******/ 
+/******/ /* webpack/runtime/define property getters */
+/******/ (() => {
+/******/ 	// define getter functions for harmony exports
+/******/ 	__nuri_require__.d = (exports, definition) => {
+/******/ 		for(var key in definition) {
+/******/ 			if(__nuri_require__.o(definition, key) && !__nuri_require__.o(exports, key)) {
+/******/ 				Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 			}
+/******/ 		}
+/******/ 	};
+/******/ })();
+/******/ 
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ 	__nuri_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/ 
+/******/ /* webpack/runtime/export webpack runtime */
+/******/ export { __nuri_require__ };
+/******/ 
+/******/ /* webpack/runtime/import chunk loading */
+/******/ (() => {
+/******/ 	// no baseURI
+/******/ 	
+/******/ 	// object to store loaded and loading chunks
+/******/ 	// undefined = chunk not loaded, null = chunk preloaded/prefetched
+/******/ 	// [resolve, Promise] = chunk loading, 0 = chunk loaded
+/******/ 	var installedChunks = {
+/******/ 		739: 0,
+/******/ 		826: 0
+/******/ 	};
+/******/ 	
+/******/ 	var installChunk = (data) => {
+/******/ 		var {__webpack_esm_ids__, __webpack_esm_modules__, __webpack_esm_runtime__} = data;
+/******/ 		// add "modules" to the modules object,
+/******/ 		// then flag all "ids" as loaded and fire callback
+/******/ 		var moduleId, chunkId, i = 0;
+/******/ 		for(moduleId in __webpack_esm_modules__) {
+/******/ 			if(__nuri_require__.o(__webpack_esm_modules__, moduleId)) {
+/******/ 				__nuri_require__.m[moduleId] = __webpack_esm_modules__[moduleId];
+/******/ 			}
+/******/ 		}
+/******/ 		if(__webpack_esm_runtime__) __webpack_esm_runtime__(__nuri_require__);
+/******/ 		for(;i < __webpack_esm_ids__.length; i++) {
+/******/ 			chunkId = __webpack_esm_ids__[i];
+/******/ 			if(__nuri_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
+/******/ 				installedChunks[chunkId][0]();
+/******/ 			}
+/******/ 			installedChunks[__webpack_esm_ids__[i]] = 0;
+/******/ 		}
+/******/ 		__nuri_require__.O();
+/******/ 	}
+/******/ 	
+/******/ 	// no chunk on demand loading
+/******/ 	
+/******/ 	// no prefetching
+/******/ 	
+/******/ 	// no preloaded
+/******/ 	
+/******/ 	__nuri_require__.C = installChunk;
+/******/ 	
+/******/ 	__nuri_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);
+/******/ 	// no HMR
+/******/ 	
+/******/ 	// no HMR manifest
+/******/ })();
+/******/ 
+/************************************************************************/
+/******/ 
+/******/ import * as __webpack_chunk_1__ from "./chunk-364.js";
+/******/ __nuri_require__.C(__webpack_chunk_1__);
+/******/ import * as __webpack_chunk_2__ from "./chunk-558.js";
+/******/ __nuri_require__.C(__webpack_chunk_2__);
+/******/ 
+/******/ // startup
+/******/ // Load entry module and return exports
+/******/ // This entry module depends on other loaded chunks and execution need to be delayed
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [364,558], () => (__nuri_require__(739)))
+/******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
+/******/ const __webpack_exports__default = __webpack_exports__.A;
+/******/ export { __webpack_exports__default as default };
+/******/ 

package/dist/tokens.css

@@ -150,6 +150,74 @@
   --line-height-4xl: 43px;
   --line-height-5xl: 66px;
   --line-height-6xl: 82px;
+  /* 한 줄에 나란히 놓이는 컨트롤: button, drop-down, text-field */
+  --control-height-xs: 30px;
+  --control-height-s: 40px;
+  --control-height-m: 50px;
+  --control-height-l: 54px;
+  --control-height-xl: 60px;
+
+  /* 라벨: badge */
+  --label-height-xs: 28px;
+  --label-height-s: 32px;
+  --label-height-m: 36px;
+  --label-height-l: 40px;
+  --label-height-xl: 48px;
+
+  /* 메뉴 행: collapsible-menu, drop-down 항목 */
+  --menu-row-height-s: 40px;
+  --menu-row-height-m: 48px;
+  --drop-down-item-height: 46px;
+
+  /* 정사각 */
+  --checkbox-size-s: 18px;
+  --checkbox-size-m: 20px;
+  --checkbox-size-l: 24px;
+  --radio-size: 18px;
+  --radio-dot-size: 8px;
+  --avatar-size-s: 40px;
+  --avatar-size-m: 58px;
+  --avatar-size-l: 74px;
+  --avatar-size-xl: 124px;
+  --avatar-badge-size-s: 18px;
+  --avatar-badge-size-m: 24px;
+  --avatar-badge-size-l: 30px;
+  --avatar-badge-size-xl: 48px;
+
+  /* 폭 */
+  --modal-width-s: 400px;
+  --modal-width-m: 450px;
+  --modal-width-l: 500px;
+
+  /* 그 밖의 치수 */
+  --icon-size-s: 18px;
+  --icon-size-m: 20px;
+  --icon-size-l: 24px;
+  --tooltip-arrow: 8px;
+  --spinner-stroke: 3px;
+  --tab-indicator-thickness: 3px;
+  --checkbox-border: 1.5px;
+  --hairline: 1px;
+
+  /* 그림자 */
+  --shadow-popover: 0px 4px 6px -2px rgba(0, 0, 0, 0.06), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
+
+  /* 레이어. 값이 같아도 역할이 다르면 이름을 따로 둔다 */
+  --z-base: 0;
+  --z-raised: 1;
+  --z-sticky: 2;
+  --z-sticky-header: 3;
+  --z-tooltip: 3;
+  --z-popover: 5;
+  --z-overlay: 9998;
+  --z-modal: 9999;
+
+  /* 모션 */
+  --motion-fast: 160ms;
+  --motion-base: 300ms;
+  --motion-ease: ease;
+  --spinner-duration: 1.2s;
+  --spinner-ease: cubic-bezier(0.5, 0, 0.5, 1);
 }
 /* semantic: app */
 :root, :root[data-ds-theme='app'] {
@@ -228,6 +296,11 @@
   --button-size-l: 54;
   --button-size-xl: 60;
 }
+/*
+ * 크기·두께·레이어·모션. figma.json 에서 만들지 않고 손으로 유지한다(font-face.css 와 같다).
+ * 디자이너가 숫자를 바꾸는 곳은 여기다. 컴포넌트 CSS 는 숫자를 쓰지 않고 이 변수를 쓴다(빌드가 검사).
+ * 크기 이름은 xs · s · m · l · xl 다섯 개다. 컴포넌트는 그중 지원하는 것만 고른다.
+ */
 .nuri-theme {
   --cursor-button: pointer;
   --cursor-disabled: not-allowed;