@nurihaus/web-design-system 3.3.0 → 3.4.0

package/dist/index.js

@@ -268,7 +268,7 @@ var __assign = undefined && undefined.__assign || function () {
   return __assign.apply(this, arguments);
 };
 
-var variant = ['neutral', 'primary', 'danger', 'outlined'];
+var variant = ['neutral', 'primary', 'danger', 'outlined', 'callout'];
 var sizes = ['xs', 's', 'm', 'l', 'xl'];
 var commonBadgeProps = {
   variant: {
@@ -542,6 +542,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
@@ -643,6 +645,7 @@ var bottom_nav_assign = undefined && undefined.__assign || function () {
 
 
 
+
 var Anchor = function Anchor(props) {
   return (0,jsx_runtime_.jsx)("a", bottom_nav_assign({}, props));
 };
@@ -655,7 +658,13 @@ var BottomNav = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_rea
     items = _a.items,
     value = _a.value,
     label = _a.label,
-    linkComponent = _a.linkComponent;
+    linkComponent = _a.linkComponent,
+    track = _a.track,
+    trackProps = _a.trackProps;
+  var emit = (0,useTrack/* useTrack */.n)('BottomNav', {
+    track: track,
+    trackProps: trackProps
+  });
   var Link = linkComponent !== null && linkComponent !== void 0 ? linkComponent : Anchor;
   var activeIndex = items.findIndex(function (item) {
     return item.id === value;
@@ -678,6 +687,9 @@ var BottomNav = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_rea
         className: itemClassName,
         href: item.href,
         "aria-current": isActive ? 'page' : undefined,
+        onClick: function onClick() {
+          return emit('navigate', item.id);
+        },
         children: [(0,jsx_runtime_.jsx)("span", {
           className: 'bottom-nav-label',
           children: item.label
@@ -716,6 +728,8 @@ var jsx_runtime_ = __nuri_require__(612);
 var external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_ = __nuri_require__(1041);
 // EXTERNAL MODULE: ./assets/icons/chevronDown.svg
 var chevronDown = __nuri_require__(9436);
+// 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
@@ -830,6 +844,7 @@ var breadcrumbProps = {
 
 
 
+
 var Breadcrumb = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
   var _a = (0,getMergedProps/* getMergedProps */.p)(props, breadcrumbProps),
     className = _a.className,
@@ -837,11 +852,21 @@ var Breadcrumb = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_re
     items = _a.items,
     onItemClick = _a.onItemClick,
     separator = _a.separator,
-    LinkComponent = _a.linkComponent;
+    LinkComponent = _a.linkComponent,
+    track = _a.track,
+    trackProps = _a.trackProps;
+  var emit = (0,useTrack/* useTrack */.n)('Breadcrumb', {
+    track: track,
+    trackProps: trackProps
+  });
   var lastIndex = items.length - 1;
   var separatorNode = separator !== null && separator !== void 0 ? separator : (0,jsx_runtime_.jsx)(chevronDown/* default */.A, {
     className: 'breadcrumb-chevron'
   });
+  var selectItem = function selectItem(id) {
+    emit('navigate', id);
+    onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(id);
+  };
   return (0,jsx_runtime_.jsx)(base_breadcrumb, {
     ref: ref,
     className: (0,classNames/* classNames */.x)(className, 'breadcrumb'),
@@ -860,7 +885,7 @@ var Breadcrumb = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_re
               asChild: true,
               className: 'breadcrumb-link',
               onClick: function onClick() {
-                return onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item.id);
+                return selectItem(item.id);
               },
               children: (0,jsx_runtime_.jsx)(LinkComponent, {
                 href: item.href,
@@ -870,7 +895,7 @@ var Breadcrumb = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_re
               className: 'breadcrumb-link',
               href: item.href,
               onClick: function onClick() {
-                return onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item.id);
+                return selectItem(item.id);
               },
               children: item.label
             }) : (0,jsx_runtime_.jsx)("span", {
@@ -964,7 +989,7 @@ BaseButton.displayName = 'BaseButton';
 /* unused harmony exports variant, sizes */
 /* harmony import */ var _helpers_props_common_props__WEBPACK_IMPORTED_MODULE_0__ = __nuri_require__(7298);
 
-var variant = ['primary', 'secondary', 'ghost', 'neutral', 'confirm', 'outlined'];
+var variant = ['primary', 'secondary', 'ghost', 'neutral', 'confirm', 'outlined', 'social'];
 var sizes = ['xs', 's', 'm', 'l', 'xl'];
 var ctaButtonProps = {
   variant: {
@@ -986,11 +1011,12 @@ var ctaButtonProps = {
 /* 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__(1041);
-/* harmony import */ var _helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_2__ = __nuri_require__(3274);
-/* harmony import */ var _helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_3__ = __nuri_require__(7335);
-/* harmony import */ var _loading_spinner_spinner__WEBPACK_IMPORTED_MODULE_4__ = __nuri_require__(6302);
-/* harmony import */ var _base_button__WEBPACK_IMPORTED_MODULE_5__ = __nuri_require__(8933);
-/* harmony import */ var _button_props__WEBPACK_IMPORTED_MODULE_6__ = __nuri_require__(9976);
+/* harmony import */ var _helpers_hooks_useTrack__WEBPACK_IMPORTED_MODULE_2__ = __nuri_require__(4560);
+/* harmony import */ var _helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__ = __nuri_require__(3274);
+/* harmony import */ var _helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_4__ = __nuri_require__(7335);
+/* harmony import */ var _loading_spinner_spinner__WEBPACK_IMPORTED_MODULE_5__ = __nuri_require__(6302);
+/* harmony import */ var _base_button__WEBPACK_IMPORTED_MODULE_6__ = __nuri_require__(8933);
+/* harmony import */ var _button_props__WEBPACK_IMPORTED_MODULE_7__ = __nuri_require__(9976);
 var __assign = undefined && undefined.__assign || function () {
   __assign = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -1016,17 +1042,29 @@ var __rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 var CTAButton = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
-  var _a = (0,_helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_3__/* .getMergedProps */ .p)(props, _button_props__WEBPACK_IMPORTED_MODULE_6__/* .ctaButtonProps */ .Lr),
+  var _a = (0,_helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_4__/* .getMergedProps */ .p)(props, _button_props__WEBPACK_IMPORTED_MODULE_7__/* .ctaButtonProps */ .Lr),
     className = _a.className,
     text = _a.text,
     leftIcon = _a.leftIcon,
     rightIcon = _a.rightIcon,
-    restProps = __rest(_a, ["className", "text", "leftIcon", "rightIcon"]);
-  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_base_button__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A, __assign({
+    _onClick = _a.onClick,
+    track = _a.track,
+    trackProps = _a.trackProps,
+    restProps = __rest(_a, ["className", "text", "leftIcon", "rightIcon", "onClick", "track", "trackProps"]);
+  var emit = (0,_helpers_hooks_useTrack__WEBPACK_IMPORTED_MODULE_2__/* .useTrack */ .n)('CTAButton', {
+    track: track,
+    trackProps: trackProps
+  });
+  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_base_button__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A, __assign({
     ref: ref,
-    className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_2__/* .classNames */ .x)(className, 'cta-button'),
-    loadingComponent: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_loading_spinner_spinner__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A, {})
+    className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__/* .classNames */ .x)(className, 'cta-button'),
+    loadingComponent: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_loading_spinner_spinner__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A, {}),
+    onClick: function onClick(event) {
+      emit('click');
+      _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
+    }
   }, restProps, {
     children: [leftIcon, text, rightIcon]
   }));
@@ -1051,6 +1089,8 @@ var jsx_runtime_ = __nuri_require__(612);
 var external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_ = __nuri_require__(1041);
 // EXTERNAL MODULE: ./assets/icons/check.svg
 var check = __nuri_require__(5077);
+// 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
@@ -1183,15 +1223,27 @@ var check_box_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 var CheckBox = /*#__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, checkBoxIndicatorProps),
     label = _a.label,
     indicatorClassName = _a.className,
-    restProps = check_box_rest(_a, ["label", "className"]);
+    _onChange = _a.onChange,
+    track = _a.track,
+    trackProps = _a.trackProps,
+    restProps = check_box_rest(_a, ["label", "className", "onChange", "track", "trackProps"]);
+  var emit = (0,useTrack/* useTrack */.n)('CheckBox', {
+    track: track,
+    trackProps: trackProps
+  });
   return (0,jsx_runtime_.jsxs)(base_check_box, check_box_assign({
     ref: ref,
-    className: (0,classNames/* classNames */.x)(rootClassName, 'check-box')
+    className: (0,classNames/* classNames */.x)(rootClassName, 'check-box'),
+    onChange: function onChange(checked) {
+      emit('change', checked ? 'on' : 'off');
+      _onChange === null || _onChange === void 0 ? void 0 : _onChange(checked);
+    }
   }, restProps, {
     children: [(0,jsx_runtime_.jsx)("div", {
       className: (0,classNames/* classNames */.x)(indicatorClassName, 'check-box-indicator wrapper'),
@@ -1225,6 +1277,8 @@ var jsx_runtime_ = __nuri_require__(612);
 var external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_ = __nuri_require__(1041);
 // EXTERNAL MODULE: ./helpers/hooks/useExternalState.ts
 var useExternalState = __nuri_require__(9387);
+// 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
@@ -1303,6 +1357,7 @@ var chipGroupProps = {};
 
 
 
+
 var ChipGroup = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
   var _a, _b;
   var _c = (0,getMergedProps/* getMergedProps */.p)(props, chipGroupProps),
@@ -1312,10 +1367,19 @@ var ChipGroup = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_rea
     value = _c.value,
     defaultValue = _c.defaultValue,
     onValueChange = _c.onValueChange,
-    label = _c.label;
+    label = _c.label,
+    track = _c.track,
+    trackProps = _c.trackProps;
+  var emit = (0,useTrack/* useTrack */.n)('ChipGroup', {
+    track: track,
+    trackProps: trackProps
+  });
   var _d = (0,useExternalState/* useExternalState */.C)({
       prop: value,
-      handler: onValueChange,
+      handler: function handler(id) {
+        emit('change', id);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(id);
+      },
       defaultProp: (_b = defaultValue !== null && defaultValue !== void 0 ? defaultValue : (_a = items[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : ''
     }),
     selected = _d[0],
@@ -1358,6 +1422,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
@@ -1458,6 +1524,7 @@ var collapsible_menu_assign = undefined && undefined.__assign || function () {
 
 
 
+
 var Anchor = function Anchor(props) {
   return (0,jsx_runtime_.jsx)("a", collapsible_menu_assign({}, props));
 };
@@ -1471,7 +1538,13 @@ var CollapsibleMenu = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     onActiveKeyChange = _a.onActiveKeyChange,
     _b = _a.indent,
     indent = _b === void 0 ? 12 : _b,
-    linkComponent = _a.linkComponent;
+    linkComponent = _a.linkComponent,
+    track = _a.track,
+    trackProps = _a.trackProps;
+  var emit = (0,useTrack/* useTrack */.n)('CollapsibleMenu', {
+    track: track,
+    trackProps: trackProps
+  });
   var Link = linkComponent !== null && linkComponent !== void 0 ? linkComponent : Anchor;
   var rootClassName = (0,classNames/* classNames */.x)(className, 'collapsible-menu');
   var _hasActiveDescendant = function hasActiveDescendant(item) {
@@ -1480,6 +1553,12 @@ var CollapsibleMenu = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     if (item.key === activeKey) return true;
     return (_b = (_a = item.children) === null || _a === void 0 ? void 0 : _a.some(_hasActiveDescendant)) !== null && _b !== void 0 ? _b : false;
   };
+  var selectItem = function selectItem(item) {
+    var _a;
+    emit('navigate', item.key);
+    onActiveKeyChange === null || onActiveKeyChange === void 0 ? void 0 : onActiveKeyChange(item.key);
+    (_a = item.onSelect) === null || _a === void 0 ? void 0 : _a.call(item);
+  };
   var _renderItems = function renderItems(targetItems, depth) {
     var indentStyle = {
       paddingLeft: "".concat(depth * indent, "px")
@@ -1520,13 +1599,11 @@ var CollapsibleMenu = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
           "aria-current": isActive ? 'page' : undefined,
           "aria-disabled": item.disabled ? 'true' : undefined,
           onClick: function onClick(e) {
-            var _a;
             if (item.disabled) {
               e.preventDefault();
               return;
             }
-            onActiveKeyChange === null || onActiveKeyChange === void 0 ? void 0 : onActiveKeyChange(item.key);
-            (_a = item.onSelect) === null || _a === void 0 ? void 0 : _a.call(item);
+            selectItem(item);
           },
           children: left
         }, item.key);
@@ -1536,9 +1613,7 @@ var CollapsibleMenu = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
         className: itemClassName,
         disabled: item.disabled,
         onClick: function onClick() {
-          var _a;
-          onActiveKeyChange === null || onActiveKeyChange === void 0 ? void 0 : onActiveKeyChange(item.key);
-          (_a = item.onSelect) === null || _a === void 0 ? void 0 : _a.call(item);
+          return selectItem(item);
         },
         children: left
       }, item.key);
@@ -1683,6 +1758,8 @@ var jsx_runtime_ = __nuri_require__(612);
 var external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_ = __nuri_require__(1041);
 // 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
@@ -1817,6 +1894,7 @@ var drawer_assign = undefined && undefined.__assign || function () {
 
 
 
+
 // ref 는 패널(Dialog.Content) div 에 붙는다. Root 는 DOM 을 그리지 않는다.
 var Drawer = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
   var _a = (0,getMergedProps/* getMergedProps */.p)(props, drawerContentProps),
@@ -1829,13 +1907,22 @@ var Drawer = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     showCloseIcon = _b === void 0 ? true : _b,
     open = _a.open,
     defaultOpen = _a.defaultOpen,
-    onOpenChange = _a.onOpenChange,
+    _onOpenChange = _a.onOpenChange,
     className = _a.className,
-    style = _a.style;
+    style = _a.style,
+    track = _a.track,
+    trackProps = _a.trackProps;
+  var emit = (0,useTrack/* useTrack */.n)('Drawer', {
+    track: track,
+    trackProps: trackProps
+  });
   return (0,jsx_runtime_.jsxs)(base_drawer, {
     open: open,
     defaultOpen: defaultOpen,
-    onOpenChange: onOpenChange,
+    onOpenChange: function onOpenChange(next) {
+      emit(next ? 'open' : 'close');
+      _onOpenChange === null || _onOpenChange === void 0 ? void 0 : _onOpenChange(next);
+    },
     children: [trigger && (0,jsx_runtime_.jsx)(base_drawer.Trigger, {
       asChild: true,
       children: trigger
@@ -1891,6 +1978,8 @@ var external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_ =
 var chevronDown = __nuri_require__(9436);
 // EXTERNAL MODULE: ./helpers/hooks/useExternalState.ts
 var useExternalState = __nuri_require__(9387);
+// 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
@@ -2034,6 +2123,7 @@ var drop_down_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 var DropDown = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
   var _a = (0,getMergedProps/* getMergedProps */.p)(props, dropDownSingleProps),
     className = _a.className,
@@ -2052,7 +2142,14 @@ var DropDown = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
     openProp = _a.open,
     onOpenChangeProp = _a.onOpenChange,
     defaultOpen = _a.defaultOpen,
-    restProps = drop_down_rest(_a, ["className", "renderValue", "placeholder", "options", "value", "disabled", "leftIcon", "rightIcon", "style", "renderOption", "side", "align", "position", "open", "onOpenChange", "defaultOpen"]);
+    _onValueChange = _a.onValueChange,
+    track = _a.track,
+    trackProps = _a.trackProps,
+    restProps = drop_down_rest(_a, ["className", "renderValue", "placeholder", "options", "value", "disabled", "leftIcon", "rightIcon", "style", "renderOption", "side", "align", "position", "open", "onOpenChange", "defaultOpen", "onValueChange", "track", "trackProps"]);
+  var emit = (0,useTrack/* useTrack */.n)('DropDown', {
+    track: track,
+    trackProps: trackProps
+  });
   var _b = (0,useExternalState/* useExternalState */.C)({
       prop: openProp,
       handler: onOpenChangeProp,
@@ -2067,7 +2164,11 @@ var DropDown = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
     value: value,
     disabled: disabled,
     open: open,
-    onOpenChange: setOpen
+    onOpenChange: setOpen,
+    onValueChange: function onValueChange(next) {
+      emit('change', next);
+      _onValueChange === null || _onValueChange === void 0 ? void 0 : _onValueChange(next);
+    }
   }, restProps, {
     children: [(0,jsx_runtime_.jsxs)(base_drop_down.Trigger, {
       className: (0,classNames/* classNames */.x)(className, 'drop-down-single-trigger'),
@@ -2690,6 +2791,82 @@ Spinner.displayName = 'Spinner';
 
 /***/ },
 
+/***/ 4804
+(__unused_webpack_module, __webpack_exports__, __nuri_require__) {
+
+/* harmony export */ __nuri_require__.d(__webpack_exports__, {
+/* harmony export */   _: () => (/* binding */ LogProvider),
+/* harmony export */   e: () => (/* binding */ useLogEmitter)
+/* 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__(1041);
+var _a;
+
+
+// 진입점(`/logging`, `/cta-button`, 루트)마다 이 파일이 따로 들어가므로 context 는 전역 키 하나에 둔다.
+var CONTEXT_KEY = Symbol["for"]('@nurihaus/web-design-system/log-provider');
+var registry = globalThis;
+var LogContext = (_a = registry[CONTEXT_KEY]) !== null && _a !== void 0 ? _a : registry[CONTEXT_KEY] = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.createContext)(null);
+var LogProvider = function LogProvider(props) {
+  var onEvent = props.onEvent,
+    children = props.children;
+  // context 값이 Provider 렌더마다 바뀌면 track 을 단 컴포넌트가 모두 다시 그려진다. 최신 onEvent 는 ref 로 읽는다.
+  var onEventRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(onEvent);
+  onEventRef.current = onEvent;
+  var emit = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (event) {
+    // 로그 수집기가 던져도 클릭·열기 같은 UI 동작은 이어져야 한다.
+    try {
+      onEventRef.current(event);
+    } catch (error) {
+      console.error('[LogProvider] onEvent threw', error);
+    }
+  }, []);
+  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(LogContext.Provider, {
+    value: emit,
+    children: children
+  });
+};
+LogProvider.displayName = 'LogProvider';
+/** LogProvider 가 둔 emit 함수. Provider 밖이면 null 이다. */
+var useLogEmitter = function useLogEmitter() {
+  return (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(LogContext);
+};
+
+/***/ },
+
+/***/ 7111
+(__unused_webpack_module, __webpack_exports__, __nuri_require__) {
+
+/* harmony export */ __nuri_require__.d(__webpack_exports__, {
+/* harmony export */   e: () => (/* binding */ useLog)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __nuri_require__(1041);
+/* harmony import */ var _log_context__WEBPACK_IMPORTED_MODULE_1__ = __nuri_require__(4804);
+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);
+};
+
+
+
+/** 컴포넌트 밖의 사용 로그를 남긴다. LogProvider 밖이면 아무것도 하지 않는다. */
+var useLog = function useLog() {
+  var emit = (0,_log_context__WEBPACK_IMPORTED_MODULE_1__/* .useLogEmitter */ .e)();
+  return (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (event) {
+    return emit === null || emit === void 0 ? void 0 : emit(__assign(__assign({}, event), {
+      timestamp: Date.now()
+    }));
+  }, [emit]);
+};
+
+/***/ },
+
 /***/ 1657
 (__unused_webpack_module, __webpack_exports__, __nuri_require__) {
 
@@ -2973,11 +3150,13 @@ var ModalWithDoubleButton = {
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __nuri_require__(612);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __nuri_require__(1041);
 /* harmony import */ var _assets_icons_multifly_svg__WEBPACK_IMPORTED_MODULE_2__ = __nuri_require__(6713);
-/* harmony import */ var _helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__ = __nuri_require__(3274);
-/* harmony import */ var _helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_4__ = __nuri_require__(7335);
-/* harmony import */ var _button_base_button__WEBPACK_IMPORTED_MODULE_5__ = __nuri_require__(8933);
-/* harmony import */ var _base_modal__WEBPACK_IMPORTED_MODULE_6__ = __nuri_require__(1657);
-/* harmony import */ var _modal_props__WEBPACK_IMPORTED_MODULE_7__ = __nuri_require__(5214);
+/* harmony import */ var _helpers_hooks_useTrack__WEBPACK_IMPORTED_MODULE_3__ = __nuri_require__(4560);
+/* harmony import */ var _helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_4__ = __nuri_require__(3274);
+/* harmony import */ var _helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_5__ = __nuri_require__(7335);
+/* harmony import */ var _button_base_button__WEBPACK_IMPORTED_MODULE_6__ = __nuri_require__(8933);
+/* harmony import */ var _base_modal__WEBPACK_IMPORTED_MODULE_7__ = __nuri_require__(1657);
+/* harmony import */ var _modal_props__WEBPACK_IMPORTED_MODULE_8__ = __nuri_require__(5214);
+
 
 
 
@@ -2988,10 +3167,10 @@ var ModalWithDoubleButton = {
 
 // Title·Description 은 Text 로 감싸지 않는다. Text 가 id 를 버려 Radix 의 aria-labelledby 연결이 끊긴다.
 var Modal = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
-  var _a = (0,_helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_4__/* .getMergedProps */ .p)(props, _modal_props__WEBPACK_IMPORTED_MODULE_7__/* .modalProps */ .y_),
+  var _a = (0,_helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_5__/* .getMergedProps */ .p)(props, _modal_props__WEBPACK_IMPORTED_MODULE_8__/* .modalProps */ .y_),
     open = _a.open,
     defaultOpen = _a.defaultOpen,
-    onOpenChange = _a.onOpenChange,
+    _onOpenChange = _a.onOpenChange,
     trigger = _a.trigger,
     title = _a.title,
     description = _a.description,
@@ -3000,32 +3179,41 @@ var Modal = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(funct
     _b = _a.showCloseIcon,
     showCloseIcon = _b === void 0 ? true : _b,
     className = _a.className,
-    style = _a.style;
-  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_base_modal__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A, {
+    style = _a.style,
+    track = _a.track,
+    trackProps = _a.trackProps;
+  var emit = (0,_helpers_hooks_useTrack__WEBPACK_IMPORTED_MODULE_3__/* .useTrack */ .n)('Modal', {
+    track: track,
+    trackProps: trackProps
+  });
+  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_base_modal__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A, {
     open: open,
     defaultOpen: defaultOpen,
-    onOpenChange: onOpenChange,
-    children: [trigger && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_modal__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A.Trigger, {
+    onOpenChange: function onOpenChange(next) {
+      emit(next ? 'open' : 'close');
+      _onOpenChange === null || _onOpenChange === void 0 ? void 0 : _onOpenChange(next);
+    },
+    children: [trigger && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_modal__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A.Trigger, {
       asChild: true,
       children: trigger
-    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_base_modal__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A.Container, {
+    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_base_modal__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A.Container, {
       ref: ref,
-      className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__/* .classNames */ .x)(className, 'modal'),
+      className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_4__/* .classNames */ .x)(className, 'modal'),
       style: style,
       children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
         className: 'modal-header',
-        children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_modal__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A.Title, {
+        children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_modal__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A.Title, {
           className: 'modal-title',
           children: title
-        }), showCloseIcon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_modal__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A.Close, {
+        }), showCloseIcon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_modal__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A.Close, {
           className: 'modal-close-icon',
           "aria-label": "\uB2EB\uAE30",
           asChild: true,
-          children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_button_base_button__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A, {
+          children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_button_base_button__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A, {
             children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets_icons_multifly_svg__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .A, {})
           })
         })]
-      }), description && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_modal__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A.Description, {
+      }), description && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_modal__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A.Description, {
         className: 'modal-description',
         children: description
       }), children && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
@@ -3060,6 +3248,8 @@ var external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_ =
 var chevronDown = __nuri_require__(9436);
 // EXTERNAL MODULE: ./helpers/hooks/useExternalState.ts
 var useExternalState = __nuri_require__(9387);
+// 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
@@ -3184,6 +3374,7 @@ var __spreadArray = undefined && undefined.__spreadArray || function (to, from,
 
 
 
+
 var ELLIPSIS = 'ellipsis';
 var range = function range(start, end) {
   return Array.from({
@@ -3221,11 +3412,20 @@ var Pagination = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_re
     _b = _a.siblingCount,
     siblingCount = _b === void 0 ? 1 : _b,
     disabled = _a.disabled,
-    restProps = pagination_rest(_a, ["className", "totalPages", "page", "defaultPage", "onPageChange", "siblingCount", "disabled"]);
+    track = _a.track,
+    trackProps = _a.trackProps,
+    restProps = pagination_rest(_a, ["className", "totalPages", "page", "defaultPage", "onPageChange", "siblingCount", "disabled", "track", "trackProps"]);
+  var emit = (0,useTrack/* useTrack */.n)('Pagination', {
+    track: track,
+    trackProps: trackProps
+  });
   var lastPage = Math.max(totalPages, 1);
   var _c = (0,useExternalState/* useExternalState */.C)({
       prop: pageProp,
-      handler: onPageChange,
+      handler: function handler(next) {
+        emit('change', String(next));
+        onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(next);
+      },
       defaultProp: defaultPage !== null && defaultPage !== void 0 ? defaultPage : 1
     }),
     pageValue = _c[0],
@@ -3294,6 +3494,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
@@ -3428,16 +3630,26 @@ var radioProps = {};
 
 
 
+
 var Radio = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
   var _a = (0,getMergedProps/* getMergedProps */.p)(props, radioProps),
     className = _a.className,
     selected = _a.selected,
-    onChange = _a.onChange,
-    options = _a.options;
+    _onChange = _a.onChange,
+    options = _a.options,
+    track = _a.track,
+    trackProps = _a.trackProps;
+  var emit = (0,useTrack/* useTrack */.n)('Radio', {
+    track: track,
+    trackProps: trackProps
+  });
   return (0,jsx_runtime_.jsx)(base_radio, {
     options: options,
     selected: selected,
-    onChange: onChange,
+    onChange: function onChange(id) {
+      emit('change', id !== null && id !== void 0 ? id : undefined);
+      _onChange === null || _onChange === void 0 ? void 0 : _onChange(id);
+    },
     children: (0,jsx_runtime_.jsx)(base_radio.OptionGroup, {
       ref: ref,
       className: (0,classNames/* classNames */.x)(className, 'radio radio-group'),
@@ -3758,6 +3970,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
@@ -3882,17 +4096,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'),
@@ -3923,6 +4149,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
@@ -4040,12 +4268,19 @@ var dataTableCellProps = table_props_assign(table_props_assign({}, dataTableComm
 
 
 
+
 var DataTableBase = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
   var rows = props.rows,
     columns = props.columns,
     _a = props.fixedRowsIndex,
     fixedRowsIndex = _a === void 0 ? 0 : _a,
-    className = props.className;
+    className = props.className,
+    track = props.track,
+    trackProps = props.trackProps;
+  var emit = (0,useTrack/* useTrack */.n)('DataTable', {
+    track: track,
+    trackProps: trackProps
+  });
   var headerStyle = (0,getMergedProps/* getMergedProps */.p)(props, dataTableHeaderProps).style;
   var rowStyle = (0,getMergedProps/* getMergedProps */.p)(props, dataTableRowProps).style;
   var cellStyle = (0,getMergedProps/* getMergedProps */.p)(props, dataTableCellProps).style;
@@ -4075,8 +4310,9 @@ var DataTableBase = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs
             },
             className: (0,classNames/* classNames */.x)(index < fixedRowsIndex && 'fixed'),
             onClick: function onClick() {
-              var _a;
-              return (_a = item.onClickRow) === null || _a === void 0 ? void 0 : _a.call(item, item.id);
+              if (!item.onClickRow) return;
+              emit('click', item.id);
+              item.onClickRow(item.id);
             },
             children: item.value
           }, item.id);
@@ -4141,6 +4377,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
@@ -4323,17 +4561,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'),
@@ -4382,6 +4632,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
@@ -4531,6 +4783,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,
@@ -4541,7 +4794,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,
@@ -4555,7 +4817,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'),
@@ -4582,6 +4852,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
@@ -4724,6 +4996,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,
@@ -4736,7 +5009,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,
@@ -4750,7 +5032,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'),
@@ -4967,6 +5257,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
@@ -5007,6 +5299,7 @@ var __rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 // 상태를 뜻하는 variant 는 앞에 아이콘을 둔다. error 는 닫기와 같은 X 를 쓴다
 var VARIANT_ICON = {
   success: check/* default */.A,
@@ -5014,14 +5307,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
@@ -5207,10 +5512,11 @@ var tooltipContentProps = __assign(__assign({}, commonTooltipProps), {
 /* 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__(1041);
-/* harmony import */ var _helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_2__ = __nuri_require__(3274);
-/* harmony import */ var _helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_3__ = __nuri_require__(7335);
-/* harmony import */ var _base_tooltip__WEBPACK_IMPORTED_MODULE_4__ = __nuri_require__(909);
-/* harmony import */ var _tooltip_props__WEBPACK_IMPORTED_MODULE_5__ = __nuri_require__(8690);
+/* harmony import */ var _helpers_hooks_useTrack__WEBPACK_IMPORTED_MODULE_2__ = __nuri_require__(4560);
+/* harmony import */ var _helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__ = __nuri_require__(3274);
+/* harmony import */ var _helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_4__ = __nuri_require__(7335);
+/* harmony import */ var _base_tooltip__WEBPACK_IMPORTED_MODULE_5__ = __nuri_require__(909);
+/* harmony import */ var _tooltip_props__WEBPACK_IMPORTED_MODULE_6__ = __nuri_require__(8690);
 var __assign = undefined && undefined.__assign || function () {
   __assign = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -5236,6 +5542,7 @@ var __rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 // ref 는 Trigger 를 거쳐 trigger 로 넘긴 요소에 붙는다.
 var Tooltip = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
   var trigger = props.trigger,
@@ -5244,22 +5551,33 @@ var Tooltip = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(fun
     direction = _a === void 0 ? 'bottom' : _a,
     _b = props.disabled,
     disabled = _b === void 0 ? false : _b,
-    restProps = __rest(props, ["trigger", "content", "direction", "disabled"]);
-  var contentClassName = (0,_helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_3__/* .getMergedProps */ .p)(props, _tooltip_props__WEBPACK_IMPORTED_MODULE_5__/* .tooltipContentProps */ .bZ).className;
+    _onOpenChange = props.onOpenChange,
+    track = props.track,
+    trackProps = props.trackProps,
+    restProps = __rest(props, ["trigger", "content", "direction", "disabled", "onOpenChange", "track", "trackProps"]);
+  var contentClassName = (0,_helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_4__/* .getMergedProps */ .p)(props, _tooltip_props__WEBPACK_IMPORTED_MODULE_6__/* .tooltipContentProps */ .bZ).className;
+  var emit = (0,_helpers_hooks_useTrack__WEBPACK_IMPORTED_MODULE_2__/* .useTrack */ .n)('Tooltip', {
+    track: track,
+    trackProps: trackProps
+  });
   // radix 트리를 아예 그리지 않는다. open 으로 막으면 열린 채 남는 경우가 있다.
   if (disabled) return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
     children: trigger
   });
   // delayDuration 을 넘기지 않으면 Provider 의 값(기본 100ms)을 따른다.
-  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_base_tooltip__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A, __assign({
-    disableHoverableContent: true
+  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_base_tooltip__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A, __assign({
+    disableHoverableContent: true,
+    onOpenChange: function onOpenChange(open) {
+      if (open) emit('show');
+      _onOpenChange === null || _onOpenChange === void 0 ? void 0 : _onOpenChange(open);
+    }
   }, restProps, {
-    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_tooltip__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A.Trigger, {
+    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_tooltip__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A.Trigger, {
       ref: ref,
       asChild: true,
       children: trigger
-    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_tooltip__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A.Content, {
-      className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_2__/* .classNames */ .x)(contentClassName, 'tooltip-content'),
+    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_tooltip__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A.Content, {
+      className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__/* .classNames */ .x)(contentClassName, 'tooltip-content'),
       direction: direction,
       children: content
     })]
@@ -5320,6 +5638,34 @@ var useExternalState = function useExternalState(_a) {
 
 /***/ },
 
+/***/ 4560
+(__unused_webpack_module, __webpack_exports__, __nuri_require__) {
+
+/* harmony export */ __nuri_require__.d(__webpack_exports__, {
+/* harmony export */   n: () => (/* binding */ useTrack)
+/* harmony export */ });
+/* harmony import */ var _components_logging_log_context__WEBPACK_IMPORTED_MODULE_0__ = __nuri_require__(4804);
+
+/** 컴포넌트 하나가 쓸 emit 함수. Provider 가 없거나 track 이 없으면 아무것도 보내지 않는다. */
+var useTrack = function useTrack(component, props) {
+  var track = props.track,
+    trackProps = props.trackProps;
+  var emit = (0,_components_logging_log_context__WEBPACK_IMPORTED_MODULE_0__/* .useLogEmitter */ .e)();
+  return function (action, value) {
+    if (!track) return;
+    emit === null || emit === void 0 ? void 0 : emit({
+      component: component,
+      action: action,
+      track: track,
+      value: value,
+      props: trackProps,
+      timestamp: Date.now()
+    });
+  };
+};
+
+/***/ },
+
 /***/ 7298
 (__unused_webpack_module, __webpack_exports__, __nuri_require__) {
 
@@ -5538,7 +5884,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), ["Fragment"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.Fragment), ["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), ["useContext"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useContext), ["useEffect"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useEffect), ["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({ ["Children"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.Children), ["Fragment"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.Fragment), ["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), ["useImperativeHandle"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle), ["useLayoutEffect"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect), ["useRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useRef), ["useState"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useState) });
 
 /***/ },
 
@@ -5909,6 +6255,10 @@ var bottom_nav = __nuri_require__(1768);
 var step_progress = __nuri_require__(7131);
 // EXTERNAL MODULE: ./components/chip-group/chip-group.tsx + 2 modules
 var chip_group = __nuri_require__(3894);
+// EXTERNAL MODULE: ./components/logging/logging.tsx
+var logging = __nuri_require__(7111);
+// EXTERNAL MODULE: ./components/logging/log-context.tsx
+var log_context = __nuri_require__(4804);
 ;// ./tokens/generated/primitive.ts
 // tokens/figma.json 에서 생성됨 — 손으로 고치지 않는다. `npm run tokens`
 var primitive = {
@@ -6317,6 +6667,7 @@ var colors = __nuri_require__(7232);
 
 
 
+
 
 
 const __webpack_exports__colors = colors/* colors */.T;
@@ -6334,6 +6685,7 @@ export const DropDown = drop_down/* default */.A;
 export const Icon = icon/* default */.A;
 export const IconTextBadge = icon_text_badge/* default */.A;
 export const IconTextOptionBadge = icon_text_option_badge/* default */.A;
+export const LogProvider = log_context/* LogProvider */._;
 export const Modal = modal/* default */.A;
 export const ModalWithDoubleButton = modal_with_double_button/* default */.A;
 export const OptionBadge = option_badge/* default */.A;
@@ -6351,3 +6703,4 @@ export const Toast = toast/* default */.A;
 export const ToastProvider = base_toast/* ToastProvider */.t;
 export const Tooltip = tooltip/* default */.A;
 export const TooltipProvider = base_tooltip/* TooltipProvider */.B;
+export const useLog = logging/* useLog */.e;