@nurihaus/web-design-system 3.3.0 → 3.4.0

package/dist/skeleton.js

@@ -277,8 +277,8 @@ module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime
 /******/ 	// [resolve, Promise] = chunk loading, 0 = chunk loaded
 /******/ 	var installedChunks = {
 /******/ 		74: 0,
-/******/ 		298: 0,
-/******/ 		917: 0
+/******/ 		4917: 0,
+/******/ 		7298: 0
 /******/ 	};
 /******/ 	
 /******/ 	var installChunk = (data) => {
@@ -318,13 +318,13 @@ module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime
 /******/ 
 /************************************************************************/
 /******/ 
-/******/ import * as __webpack_chunk_1__ from "./chunk-364.js";
+/******/ import * as __webpack_chunk_1__ from "./chunk-6364.js";
 /******/ __nuri_require__.C(__webpack_chunk_1__);
 /******/ 
 /******/ // 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], () => (__nuri_require__(1144)))
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [6364], () => (__nuri_require__(1144)))
 /******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
 /******/ const __webpack_exports__default = __webpack_exports__.A;
 /******/ export { __webpack_exports__default as default };

package/dist/step-progress.js

@@ -257,7 +257,7 @@ module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime
 /******/ 	// undefined = chunk not loaded, null = chunk preloaded/prefetched
 /******/ 	// [resolve, Promise] = chunk loading, 0 = chunk loaded
 /******/ 	var installedChunks = {
-/******/ 		347: 0
+/******/ 		8347: 0
 /******/ 	};
 /******/ 	
 /******/ 	var installChunk = (data) => {
@@ -297,13 +297,13 @@ module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime
 /******/ 
 /************************************************************************/
 /******/ 
-/******/ import * as __webpack_chunk_1__ from "./chunk-364.js";
+/******/ import * as __webpack_chunk_1__ from "./chunk-6364.js";
 /******/ __nuri_require__.C(__webpack_chunk_1__);
 /******/ 
 /******/ // 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], () => (__nuri_require__(7131)))
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [6364], () => (__nuri_require__(7131)))
 /******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
 /******/ const __webpack_exports__default = __webpack_exports__.A;
 /******/ export { __webpack_exports__default as default };

package/dist/styles.css

@@ -789,6 +789,29 @@ p {
     background-color: var(--color-white);
     border: var(--hairline) solid var(--color-grey-scale-300);
   }
+/* 버튼 같은 대상의 모서리에 띄우는 말풍선 (ADR 0006). 자리는 쓰는 쪽이 정하고, 꼬리는 아래 왼쪽에서 대상을 가리킨다.
+     흰 둘레로 밑에 깔린 같은 색 면(보라 버튼)과도 갈라 보인다. */
+.variant-callout:is(.option,.icon-text,.icon-text-option) {
+    padding: 0 var(--spacing-10);
+    border-color: transparent;
+    border-radius: var(--radius-6);
+    color: var(--color-white);
+    background-color: var(--color-purple-900);
+    box-shadow:
+      0 0 0 var(--spacing-2) var(--color-white),
+      var(--shadow-popover);
+  }
+.variant-callout:is(.option,.icon-text,.icon-text-option)::after {
+      content: '';
+      position: absolute;
+      /* 꼬리(--spacing-8 정사각형) 한 변의 절반만큼 아래로 내려 반이 밖으로 나온다 */
+      bottom: calc(var(--spacing-4) * -1);
+      left: var(--spacing-12);
+      width: var(--spacing-8);
+      height: var(--spacing-8);
+      background-color: inherit;
+      transform: rotate(45deg);
+    }
 .base-bottom-nav:where(.root) {
     position: fixed;
     left: var(--spacing-16);
@@ -1076,6 +1099,15 @@ p {
     border: var(--hairline) solid var(--color-accent-red-700);
     color: var(--color-accent-red-700);
   }
+/* 소셜 로그인. Google·Apple 가이드의 흰 바탕·검정 글자 — 공급자 로고는 쓰는 쪽이 leftIcon 으로 (ADR 0006) */
+.cta-button.variant-social {
+    background-color: var(--color-white);
+    border: var(--hairline) solid var(--color-grey-scale-300);
+    color: var(--color-black);
+  }
+.cta-button.variant-social:not(:disabled):hover {
+      background-color: var(--color-grey-scale-100);
+    }
 .cta-button.size-xl {
     height: var(--control-height-xl);
     padding: 0 var(--spacing-24);

package/dist/switch.js

@@ -17,6 +17,8 @@ __nuri_require__.d(__webpack_exports__, {
 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__(1041);
+// EXTERNAL MODULE: ./helpers/hooks/useTrack.ts
+var useTrack = __nuri_require__(4560);
 // EXTERNAL MODULE: ./helpers/utils/classNames.js
 var classNames = __nuri_require__(3274);
 // EXTERNAL MODULE: ./helpers/utils/getMergedProps.ts
@@ -141,17 +143,29 @@ var switch_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 var Switch = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
   var className = props.className,
     label = props.label,
     size = props.size,
-    restProps = switch_rest(props, ["className", "label", "size"]);
+    _onChange = props.onChange,
+    track = props.track,
+    trackProps = props.trackProps,
+    restProps = switch_rest(props, ["className", "label", "size", "onChange", "track", "trackProps"]);
+  var emit = (0,useTrack/* useTrack */.n)('Switch', {
+    track: track,
+    trackProps: trackProps
+  });
   var trackClassName = (0,getMergedProps/* getMergedProps */.p)({
     size: size
   }, switchTrackProps).className;
   return (0,jsx_runtime_.jsxs)(base_switch, switch_assign({
     ref: ref,
-    className: (0,classNames/* classNames */.x)(className, 'switch')
+    className: (0,classNames/* classNames */.x)(className, 'switch'),
+    onChange: function onChange(checked) {
+      emit('change', checked ? 'on' : 'off');
+      _onChange === null || _onChange === void 0 ? void 0 : _onChange(checked);
+    }
   }, restProps, {
     children: [(0,jsx_runtime_.jsx)("span", {
       className: (0,classNames/* classNames */.x)(trackClassName, 'switch-track'),
@@ -187,7 +201,7 @@ var x = (y) => {
 	var x = {}; __nuri_require__.d(x, y); return x
 } 
 var y = (x) => (() => (x))
-module.exports = x({ ["Children"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.Children), ["cloneElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.cloneElement), ["createContext"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createContext), ["forwardRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.forwardRef), ["isValidElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.isValidElement), ["useContext"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useContext) });
+module.exports = x({ ["Children"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.Children), ["cloneElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.cloneElement), ["createContext"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createContext), ["forwardRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.forwardRef), ["isValidElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.isValidElement), ["useCallback"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useCallback), ["useContext"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useContext), ["useRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useRef) });
 
 /***/ },
 
@@ -292,7 +306,7 @@ module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime
 /******/ 	// undefined = chunk not loaded, null = chunk preloaded/prefetched
 /******/ 	// [resolve, Promise] = chunk loading, 0 = chunk loaded
 /******/ 	var installedChunks = {
-/******/ 		75: 0
+/******/ 		5075: 0
 /******/ 	};
 /******/ 	
 /******/ 	var installChunk = (data) => {
@@ -332,17 +346,19 @@ module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime
 /******/ 
 /************************************************************************/
 /******/ 
-/******/ import * as __webpack_chunk_1__ from "./chunk-364.js";
+/******/ import * as __webpack_chunk_1__ from "./chunk-6364.js";
 /******/ __nuri_require__.C(__webpack_chunk_1__);
-/******/ import * as __webpack_chunk_2__ from "./chunk-777.js";
+/******/ import * as __webpack_chunk_2__ from "./chunk-4560.js";
 /******/ __nuri_require__.C(__webpack_chunk_2__);
-/******/ import * as __webpack_chunk_3__ from "./chunk-298.js";
+/******/ import * as __webpack_chunk_3__ from "./chunk-2777.js";
 /******/ __nuri_require__.C(__webpack_chunk_3__);
+/******/ import * as __webpack_chunk_4__ from "./chunk-7298.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,777,298], () => (__nuri_require__(8614)))
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [6364,4560,2777,7298], () => (__nuri_require__(8614)))
 /******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
 /******/ const __webpack_exports__default = __webpack_exports__.A;
 /******/ export { __webpack_exports__default as default };

package/dist/tabs.js

@@ -17,6 +17,8 @@ __nuri_require__.d(__webpack_exports__, {
 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__(1041);
+// EXTERNAL MODULE: ./helpers/hooks/useTrack.ts
+var useTrack = __nuri_require__(4560);
 // EXTERNAL MODULE: ./helpers/utils/classNames.js
 var classNames = __nuri_require__(3274);
 // EXTERNAL MODULE: ./helpers/utils/getMergedProps.ts
@@ -199,17 +201,29 @@ var tabs_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 var Tabs = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
   var rootClassName = (0,getMergedProps/* getMergedProps */.p)(props, {}).className;
   var _a = (0,getMergedProps/* getMergedProps */.p)(props, tabsProps),
     items = _a.items,
     tabClassName = _a.className,
-    restProps = tabs_rest(_a, ["items", "className"]);
+    _onValueChange = _a.onValueChange,
+    track = _a.track,
+    trackProps = _a.trackProps,
+    restProps = tabs_rest(_a, ["items", "className", "onValueChange", "track", "trackProps"]);
+  var emit = (0,useTrack/* useTrack */.n)('Tabs', {
+    track: track,
+    trackProps: trackProps
+  });
   var tabsTriggerClassName = (0,classNames/* classNames */.x)(tabClassName, 'tabs-trigger');
   var tabsContentClassName = (0,classNames/* classNames */.x)(tabClassName, 'tabs-content');
   return (0,jsx_runtime_.jsxs)(base_tabs, tabs_assign({
     ref: ref,
-    className: (0,classNames/* classNames */.x)(rootClassName, 'tabs-root')
+    className: (0,classNames/* classNames */.x)(rootClassName, 'tabs-root'),
+    onValueChange: function onValueChange(id) {
+      emit('change', id !== null && id !== void 0 ? id : undefined);
+      _onValueChange === null || _onValueChange === void 0 ? void 0 : _onValueChange(id);
+    }
   }, restProps, {
     children: [(0,jsx_runtime_.jsxs)(base_tabs.List, {
       className: (0,classNames/* classNames */.x)(tabClassName, 'tabs-list'),
@@ -263,7 +277,7 @@ 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), ["useImperativeHandle"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle), ["useLayoutEffect"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect), ["useRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useRef), ["useState"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useState) });
+module.exports = x({ ["createContext"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createContext), ["forwardRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.forwardRef), ["useCallback"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useCallback), ["useContext"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useContext), ["useImperativeHandle"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle), ["useLayoutEffect"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect), ["useRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useRef), ["useState"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useState) });
 
 /***/ },
 
@@ -368,7 +382,7 @@ module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime
 /******/ 	// undefined = chunk not loaded, null = chunk preloaded/prefetched
 /******/ 	// [resolve, Promise] = chunk loading, 0 = chunk loaded
 /******/ 	var installedChunks = {
-/******/ 		575: 0
+/******/ 		7575: 0
 /******/ 	};
 /******/ 	
 /******/ 	var installChunk = (data) => {
@@ -408,13 +422,15 @@ module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime
 /******/ 
 /************************************************************************/
 /******/ 
-/******/ import * as __webpack_chunk_1__ from "./chunk-364.js";
+/******/ import * as __webpack_chunk_1__ from "./chunk-6364.js";
 /******/ __nuri_require__.C(__webpack_chunk_1__);
+/******/ import * as __webpack_chunk_2__ from "./chunk-4560.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], () => (__nuri_require__(3973)))
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [6364,4560], () => (__nuri_require__(3973)))
 /******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
 /******/ const __webpack_exports__default = __webpack_exports__.A;
 /******/ export { __webpack_exports__default as default };

package/dist/text-area.js

@@ -16,6 +16,8 @@ __nuri_require__.d(__webpack_exports__, {
 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__(1041);
+// EXTERNAL MODULE: ./helpers/hooks/useTrack.ts
+var useTrack = __nuri_require__(4560);
 // EXTERNAL MODULE: ./helpers/utils/classNames.js
 var classNames = __nuri_require__(3274);
 // EXTERNAL MODULE: ./helpers/utils/getMergedProps.ts
@@ -165,6 +167,7 @@ var text_area_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 var TextArea = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
   var _a = (0,getMergedProps/* getMergedProps */.p)(props, textAreaProps),
     className = _a.className,
@@ -175,7 +178,16 @@ var TextArea = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
     defaultValue = _a.defaultValue,
     helperText = _a.helperText,
     isError = _a.isError,
-    restProps = text_area_rest(_a, ["className", "style", "title", "value", "onChange", "defaultValue", "helperText", "isError"]);
+    _onFocus = _a.onFocus,
+    _onBlur = _a.onBlur,
+    track = _a.track,
+    trackProps = _a.trackProps,
+    restProps = text_area_rest(_a, ["className", "style", "title", "value", "onChange", "defaultValue", "helperText", "isError", "onFocus", "onBlur", "track", "trackProps"]);
+  var emit = (0,useTrack/* useTrack */.n)('TextArea', {
+    track: track,
+    trackProps: trackProps
+  });
+  var focusedValueRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.useRef)('');
   return (0,jsx_runtime_.jsx)(base_text_area, {
     value: value,
     onChange: onChange,
@@ -189,7 +201,15 @@ var TextArea = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
         className: (0,classNames/* classNames */.x)('nuri-theme text-area-input-wrapper', className),
         style: style,
         children: (0,jsx_runtime_.jsx)(base_text_area.Textarea, text_area_assign({
-          ref: ref
+          ref: ref,
+          onFocus: function onFocus(e) {
+            focusedValueRef.current = e.target.value;
+            _onFocus === null || _onFocus === void 0 ? void 0 : _onFocus(e);
+          },
+          onBlur: function onBlur(e) {
+            if (e.target.value !== focusedValueRef.current) emit('change');
+            _onBlur === null || _onBlur === void 0 ? void 0 : _onBlur(e);
+          }
         }, restProps))
       }), helperText && (0,jsx_runtime_.jsx)(base_text_area.HelperText, {
         className: (0,classNames/* classNames */.x)('text-area-helper-text', isError && 'error'),
@@ -210,7 +230,7 @@ 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) });
+module.exports = x({ ["createContext"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createContext), ["forwardRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.forwardRef), ["useCallback"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useCallback), ["useContext"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useContext), ["useRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useRef), ["useState"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useState) });
 
 /***/ },
 
@@ -355,19 +375,21 @@ module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime
 /******/ 
 /************************************************************************/
 /******/ 
-/******/ import * as __webpack_chunk_1__ from "./chunk-364.js";
+/******/ import * as __webpack_chunk_1__ from "./chunk-6364.js";
 /******/ __nuri_require__.C(__webpack_chunk_1__);
-/******/ import * as __webpack_chunk_2__ from "./chunk-917.js";
+/******/ import * as __webpack_chunk_2__ from "./chunk-4560.js";
 /******/ __nuri_require__.C(__webpack_chunk_2__);
-/******/ import * as __webpack_chunk_3__ from "./chunk-558.js";
+/******/ import * as __webpack_chunk_3__ from "./chunk-4917.js";
 /******/ __nuri_require__.C(__webpack_chunk_3__);
-/******/ import * as __webpack_chunk_4__ from "./chunk-739.js";
+/******/ import * as __webpack_chunk_4__ from "./chunk-4558.js";
 /******/ __nuri_require__.C(__webpack_chunk_4__);
+/******/ import * as __webpack_chunk_5__ from "./chunk-7739.js";
+/******/ __nuri_require__.C(__webpack_chunk_5__);
 /******/ 
 /******/ // 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__(4794)))
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [6364,4560,4917,4558,7739], () => (__nuri_require__(4794)))
 /******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
 /******/ const __webpack_exports__default = __webpack_exports__.A;
 /******/ export { __webpack_exports__default as default };

package/dist/text-field.js

@@ -16,6 +16,8 @@ __nuri_require__.d(__webpack_exports__, {
 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__(1041);
+// EXTERNAL MODULE: ./helpers/hooks/useTrack.ts
+var useTrack = __nuri_require__(4560);
 // EXTERNAL MODULE: ./helpers/utils/classNames.js
 var classNames = __nuri_require__(3274);
 // EXTERNAL MODULE: ./helpers/utils/getMergedProps.ts
@@ -158,6 +160,7 @@ var text_field_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 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,
@@ -170,7 +173,16 @@ var TextField = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_rea
     defaultValue = _a.defaultValue,
     helperText = _a.helperText,
     isError = _a.isError,
-    restProps = text_field_rest(_a, ["className", "style", "leftIcon", "rightIcon", "title", "value", "onChange", "defaultValue", "helperText", "isError"]);
+    _onFocus = _a.onFocus,
+    _onBlur = _a.onBlur,
+    track = _a.track,
+    trackProps = _a.trackProps,
+    restProps = text_field_rest(_a, ["className", "style", "leftIcon", "rightIcon", "title", "value", "onChange", "defaultValue", "helperText", "isError", "onFocus", "onBlur", "track", "trackProps"]);
+  var emit = (0,useTrack/* useTrack */.n)('TextField', {
+    track: track,
+    trackProps: trackProps
+  });
+  var focusedValueRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.useRef)('');
   return (0,jsx_runtime_.jsx)(base_text_field, {
     value: value,
     onChange: onChange,
@@ -184,7 +196,15 @@ var TextField = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_rea
         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
+          ref: ref,
+          onFocus: function onFocus(e) {
+            focusedValueRef.current = e.target.value;
+            _onFocus === null || _onFocus === void 0 ? void 0 : _onFocus(e);
+          },
+          onBlur: function onBlur(e) {
+            if (e.target.value !== focusedValueRef.current) emit('change');
+            _onBlur === null || _onBlur === void 0 ? void 0 : _onBlur(e);
+          }
         }, restProps)), rightIcon]
       }), helperText && (0,jsx_runtime_.jsx)(base_text_field.HelperText, {
         className: (0,classNames/* classNames */.x)('text-field-helper-text', isError && 'error'),
@@ -205,7 +225,7 @@ 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) });
+module.exports = x({ ["createContext"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createContext), ["forwardRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.forwardRef), ["useCallback"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useCallback), ["useContext"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useContext), ["useRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useRef), ["useState"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useState) });
 
 /***/ },
 
@@ -310,7 +330,7 @@ module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime
 /******/ 	// undefined = chunk not loaded, null = chunk preloaded/prefetched
 /******/ 	// [resolve, Promise] = chunk loading, 0 = chunk loaded
 /******/ 	var installedChunks = {
-/******/ 		489: 0
+/******/ 		6489: 0
 /******/ 	};
 /******/ 	
 /******/ 	var installChunk = (data) => {
@@ -350,19 +370,21 @@ module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime
 /******/ 
 /************************************************************************/
 /******/ 
-/******/ import * as __webpack_chunk_1__ from "./chunk-364.js";
+/******/ import * as __webpack_chunk_1__ from "./chunk-6364.js";
 /******/ __nuri_require__.C(__webpack_chunk_1__);
-/******/ import * as __webpack_chunk_2__ from "./chunk-917.js";
+/******/ import * as __webpack_chunk_2__ from "./chunk-4560.js";
 /******/ __nuri_require__.C(__webpack_chunk_2__);
-/******/ import * as __webpack_chunk_3__ from "./chunk-558.js";
+/******/ import * as __webpack_chunk_3__ from "./chunk-4917.js";
 /******/ __nuri_require__.C(__webpack_chunk_3__);
-/******/ import * as __webpack_chunk_4__ from "./chunk-739.js";
+/******/ import * as __webpack_chunk_4__ from "./chunk-4558.js";
 /******/ __nuri_require__.C(__webpack_chunk_4__);
+/******/ import * as __webpack_chunk_5__ from "./chunk-7739.js";
+/******/ __nuri_require__.C(__webpack_chunk_5__);
 /******/ 
 /******/ // 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)))
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [6364,4560,4917,4558,7739], () => (__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

@@ -177,8 +177,8 @@ module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime
 /******/ 	// undefined = chunk not loaded, null = chunk preloaded/prefetched
 /******/ 	// [resolve, Promise] = chunk loading, 0 = chunk loaded
 /******/ 	var installedChunks = {
-/******/ 		739: 0,
-/******/ 		826: 0
+/******/ 		7739: 0,
+/******/ 		8826: 0
 /******/ 	};
 /******/ 	
 /******/ 	var installChunk = (data) => {
@@ -218,15 +218,15 @@ module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime
 /******/ 
 /************************************************************************/
 /******/ 
-/******/ import * as __webpack_chunk_1__ from "./chunk-364.js";
+/******/ import * as __webpack_chunk_1__ from "./chunk-6364.js";
 /******/ __nuri_require__.C(__webpack_chunk_1__);
-/******/ import * as __webpack_chunk_2__ from "./chunk-558.js";
+/******/ import * as __webpack_chunk_2__ from "./chunk-4558.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__(7739)))
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [6364,4558], () => (__nuri_require__(7739)))
 /******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
 /******/ const __webpack_exports__default = __webpack_exports__.A;
 /******/ export { __webpack_exports__default as default };

package/dist/toast.js

@@ -206,6 +206,8 @@ var SvgExclamation = function SvgExclamation(props) {
 /* harmony default export */ const exclamation = (SvgExclamation);
 // EXTERNAL MODULE: ./assets/icons/multifly.svg
 var multifly = __nuri_require__(6713);
+// EXTERNAL MODULE: ./helpers/hooks/useTrack.ts
+var useTrack = __nuri_require__(4560);
 // EXTERNAL MODULE: ./helpers/utils/classNames.js
 var classNames = __nuri_require__(3274);
 // EXTERNAL MODULE: ./helpers/utils/getMergedProps.ts
@@ -246,6 +248,7 @@ var __rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 // 상태를 뜻하는 variant 는 앞에 아이콘을 둔다. error 는 닫기와 같은 X 를 쓴다
 var VARIANT_ICON = {
   success: check/* default */.A,
@@ -253,14 +256,26 @@ var VARIANT_ICON = {
   error: multifly/* default */.A
 };
 var Toast = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var _a, _b;
   var className = props.className,
     title = props.title,
     description = props.description,
     variant = props.variant,
     action = props.action,
-    _a = props.showClose,
-    showClose = _a === void 0 ? true : _a,
-    restProps = __rest(props, ["className", "title", "description", "variant", "action", "showClose"]);
+    _c = props.showClose,
+    showClose = _c === void 0 ? true : _c,
+    track = props.track,
+    trackProps = props.trackProps,
+    restProps = __rest(props, ["className", "title", "description", "variant", "action", "showClose", "track", "trackProps"]);
+  var emit = (0,useTrack/* useTrack */.n)('Toast', {
+    track: track,
+    trackProps: trackProps
+  });
+  // Radix 는 open·defaultOpen 이 없으면 연 채로 시작한다. Radix 가 스스로 닫는 것은 이 값에 보이지 않아 다시 보내지 않는다.
+  var shown = (_b = (_a = restProps.open) !== null && _a !== void 0 ? _a : restProps.defaultOpen) !== null && _b !== void 0 ? _b : true;
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.useEffect)(function () {
+    if (shown) emit('show');
+  }, [shown]);
   var variantClassName = (0,getMergedProps/* getMergedProps */.p)({
     className: className,
     variant: variant
@@ -322,7 +337,7 @@ var x = (y) => {
 	var x = {}; __nuri_require__.d(x, y); return x
 } 
 var y = (x) => (() => (x))
-module.exports = x({ ["Children"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.Children), ["cloneElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.cloneElement), ["createElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createElement), ["forwardRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.forwardRef), ["isValidElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.isValidElement) });
+module.exports = x({ ["Children"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.Children), ["cloneElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.cloneElement), ["createContext"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createContext), ["createElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createElement), ["forwardRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.forwardRef), ["isValidElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.isValidElement), ["useCallback"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useCallback), ["useContext"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useContext), ["useEffect"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useEffect), ["useRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useRef) });
 
 /***/ },
 
@@ -427,7 +442,7 @@ module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime
 /******/ 	// undefined = chunk not loaded, null = chunk preloaded/prefetched
 /******/ 	// [resolve, Promise] = chunk loading, 0 = chunk loaded
 /******/ 	var installedChunks = {
-/******/ 		448: 0
+/******/ 		2448: 0
 /******/ 	};
 /******/ 	
 /******/ 	var installChunk = (data) => {
@@ -467,29 +482,31 @@ module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime
 /******/ 
 /************************************************************************/
 /******/ 
-/******/ import * as __webpack_chunk_1__ from "./chunk-364.js";
+/******/ import * as __webpack_chunk_1__ from "./chunk-6364.js";
 /******/ __nuri_require__.C(__webpack_chunk_1__);
-/******/ import * as __webpack_chunk_2__ from "./chunk-777.js";
+/******/ import * as __webpack_chunk_2__ from "./chunk-4560.js";
 /******/ __nuri_require__.C(__webpack_chunk_2__);
-/******/ import * as __webpack_chunk_3__ from "./chunk-298.js";
+/******/ import * as __webpack_chunk_3__ from "./chunk-2777.js";
 /******/ __nuri_require__.C(__webpack_chunk_3__);
-/******/ import * as __webpack_chunk_4__ from "./chunk-933.js";
+/******/ import * as __webpack_chunk_4__ from "./chunk-7298.js";
 /******/ __nuri_require__.C(__webpack_chunk_4__);
-/******/ import * as __webpack_chunk_5__ from "./chunk-302.js";
+/******/ import * as __webpack_chunk_5__ from "./chunk-8933.js";
 /******/ __nuri_require__.C(__webpack_chunk_5__);
-/******/ import * as __webpack_chunk_6__ from "./chunk-713.js";
+/******/ import * as __webpack_chunk_6__ from "./chunk-6302.js";
 /******/ __nuri_require__.C(__webpack_chunk_6__);
-/******/ import * as __webpack_chunk_7__ from "./chunk-976.js";
+/******/ import * as __webpack_chunk_7__ from "./chunk-6713.js";
 /******/ __nuri_require__.C(__webpack_chunk_7__);
-/******/ import * as __webpack_chunk_8__ from "./chunk-910.js";
+/******/ import * as __webpack_chunk_8__ from "./chunk-9976.js";
 /******/ __nuri_require__.C(__webpack_chunk_8__);
-/******/ import * as __webpack_chunk_9__ from "./chunk-77.js";
+/******/ import * as __webpack_chunk_9__ from "./chunk-910.js";
 /******/ __nuri_require__.C(__webpack_chunk_9__);
+/******/ import * as __webpack_chunk_10__ from "./chunk-5077.js";
+/******/ __nuri_require__.C(__webpack_chunk_10__);
 /******/ 
 /******/ // 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,777,298,933,302,713,976,910,77], () => (__nuri_require__(4012)))
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [6364,4560,2777,7298,8933,6302,6713,9976,910,5077], () => (__nuri_require__(4012)))
 /******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
 /******/ const __webpack_exports__ToastProvider = __webpack_exports__.t;
 /******/ const __webpack_exports__default = __webpack_exports__.A;