@nurihaus/web-design-system 3.3.0 → 3.4.0

package/dist/components/toast/toast.stories.d.ts

@@ -17,8 +17,12 @@ declare const meta: {
         variant: "default";
     };
     decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react-webpack5").ReactRenderer, {
-        className?: string | undefined;
+        slot?: string | undefined | undefined;
         style?: import("react").CSSProperties | undefined;
+        title: import("react").ReactNode;
+        track?: string | undefined;
+        key?: import("react").Key | null | undefined;
+        value?: string | number | readonly string[] | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -26,6 +30,7 @@ declare const meta: {
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
+        className?: string | undefined;
         contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
@@ -35,10 +40,8 @@ declare const meta: {
         id?: string | undefined | undefined;
         lang?: string | undefined | undefined;
         nonce?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
         tabIndex?: number | undefined | undefined;
-        title: import("react").ReactNode;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
         role?: import("react").AriaRole | undefined;
@@ -282,11 +285,10 @@ declare const meta: {
         onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLLIElement> | undefined;
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLLIElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLLIElement> | undefined;
-        key?: import("react").Key | null | undefined;
-        value?: string | number | readonly string[] | undefined;
         variant?: (typeof variants)[number] | undefined;
-        defaultOpen?: boolean | undefined;
+        trackProps?: Record<string, string | number | boolean> | undefined;
         open?: boolean | undefined;
+        defaultOpen?: boolean | undefined;
         onOpenChange?: ((open: boolean) => void) | undefined;
         onResume?: (() => void) | undefined;
         duration?: number | undefined;

package/dist/components/tooltip/tooltip-type.d.ts

@@ -1,4 +1,5 @@
 import { AsChildProps } from '../../helpers/types/common-props';
+import { TrackProps } from '../logging/logging-type';
 import { direction } from './tooltip-props';
 export interface CommonTooltipProps {
     children: React.ReactNode;
@@ -22,7 +23,7 @@ export interface TooltipProviderProps {
     skipDelayDuration?: number;
     disableHoverableContent?: boolean;
 }
-export interface TooltipProps extends TooltipRootProps {
+export interface TooltipProps extends TooltipRootProps, TrackProps {
     trigger: React.ReactNode;
     content: React.ReactNode;
     direction?: (typeof direction)[number];

package/dist/components.css

@@ -411,6 +411,32 @@
     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);
@@ -750,6 +776,18 @@
     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/cta-button.js

@@ -11,11 +11,12 @@ import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8__ from "react/j
 /* 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++) {
@@ -41,17 +42,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]
   }));
@@ -68,7 +81,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), ["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), ["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) });
 
 /***/ },
 
@@ -173,8 +186,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 = {
-/******/ 		440: 0,
-/******/ 		910: 0
+/******/ 		910: 0,
+/******/ 		2440: 0
 /******/ 	};
 /******/ 	
 /******/ 	var installChunk = (data) => {
@@ -214,23 +227,25 @@ 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-976.js";
+/******/ import * as __webpack_chunk_6__ from "./chunk-6302.js";
 /******/ __nuri_require__.C(__webpack_chunk_6__);
+/******/ import * as __webpack_chunk_7__ from "./chunk-9976.js";
+/******/ __nuri_require__.C(__webpack_chunk_7__);
 /******/ 
 /******/ // 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,976], () => (__nuri_require__(910)))
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [6364,4560,2777,7298,8933,6302,9976], () => (__nuri_require__(910)))
 /******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
 /******/ const __webpack_exports__default = __webpack_exports__.A;
 /******/ export { __webpack_exports__default as default };

package/dist/data-table.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
@@ -133,12 +135,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;
@@ -168,8 +177,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);
@@ -228,7 +238,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) });
+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) });
 
 /***/ },
 
@@ -333,7 +343,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 = {
-/******/ 		284: 0
+/******/ 		7284: 0
 /******/ 	};
 /******/ 	
 /******/ 	var installChunk = (data) => {
@@ -373,13 +383,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__(3785)))
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [6364,4560], () => (__nuri_require__(3785)))
 /******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
 /******/ const __webpack_exports__default = __webpack_exports__.A;
 /******/ export { __webpack_exports__default as default };

package/dist/drawer.js

@@ -19,6 +19,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
@@ -153,6 +155,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),
@@ -165,13 +168,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
@@ -228,7 +240,7 @@ var x = (y) => {
 	var x = {}; __nuri_require__.d(x, y); return x
 } 
 var y = (x) => (() => (x))
-module.exports = x({ ["createElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createElement), ["forwardRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.forwardRef) });
+module.exports = x({ ["createContext"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createContext), ["createElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createElement), ["forwardRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.forwardRef), ["useCallback"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useCallback), ["useContext"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useContext), ["useRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useRef) });
 
 /***/ },
 
@@ -333,7 +345,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 = {
-/******/ 		248: 0
+/******/ 		7248: 0
 /******/ 	};
 /******/ 	
 /******/ 	var installChunk = (data) => {
@@ -373,17 +385,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-298.js";
+/******/ import * as __webpack_chunk_2__ from "./chunk-4560.js";
 /******/ __nuri_require__.C(__webpack_chunk_2__);
-/******/ import * as __webpack_chunk_3__ from "./chunk-713.js";
+/******/ import * as __webpack_chunk_3__ from "./chunk-7298.js";
 /******/ __nuri_require__.C(__webpack_chunk_3__);
+/******/ import * as __webpack_chunk_4__ from "./chunk-6713.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,298,713], () => (__nuri_require__(6622)))
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [6364,4560,7298,6713], () => (__nuri_require__(6622)))
 /******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
 /******/ const __webpack_exports__default = __webpack_exports__.A;
 /******/ export { __webpack_exports__default as default };

package/dist/drop-down.js

@@ -21,6 +21,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
@@ -164,6 +166,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,
@@ -182,7 +185,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,
@@ -197,7 +207,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'),
@@ -255,7 +269,7 @@ var x = (y) => {
 	var x = {}; __nuri_require__.d(x, y); return x
 } 
 var y = (x) => (() => (x))
-module.exports = x({ ["createElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createElement), ["forwardRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.forwardRef), ["useEffect"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useEffect), ["useRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useRef), ["useState"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useState) });
+module.exports = x({ ["createContext"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createContext), ["createElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createElement), ["forwardRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.forwardRef), ["useCallback"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useCallback), ["useContext"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useContext), ["useEffect"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useEffect), ["useRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useRef), ["useState"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useState) });
 
 /***/ },
 
@@ -360,7 +374,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 = {
-/******/ 		621: 0
+/******/ 		2621: 0
 /******/ 	};
 /******/ 	
 /******/ 	var installChunk = (data) => {
@@ -400,19 +414,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-387.js";
+/******/ import * as __webpack_chunk_3__ from "./chunk-4917.js";
 /******/ __nuri_require__.C(__webpack_chunk_3__);
-/******/ import * as __webpack_chunk_4__ from "./chunk-436.js";
+/******/ import * as __webpack_chunk_4__ from "./chunk-9387.js";
 /******/ __nuri_require__.C(__webpack_chunk_4__);
+/******/ import * as __webpack_chunk_5__ from "./chunk-9436.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,387,436], () => (__nuri_require__(9691)))
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [6364,4560,4917,9387,9436], () => (__nuri_require__(9691)))
 /******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
 /******/ const __webpack_exports__default = __webpack_exports__.A;
 /******/ export { __webpack_exports__default as default };

package/dist/helpers/hooks/useTrack.d.ts

@@ -0,0 +1,3 @@
+import type { LogAction, TrackProps } from '../../components/logging/logging-type';
+/** 컴포넌트 하나가 쓸 emit 함수. Provider 가 없거나 track 이 없으면 아무것도 보내지 않는다. */
+export declare const useTrack: (component: string, props: TrackProps) => ((action: LogAction, value?: string) => void);

package/dist/icon-text-badge.js

@@ -23,7 +23,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: {
@@ -126,7 +126,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) });
 
 /***/ },
 
@@ -231,7 +231,7 @@ module.exports = x({ ["Fragment"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_ru
 /******/ 	// undefined = chunk not loaded, null = chunk preloaded/prefetched
 /******/ 	// [resolve, Promise] = chunk loading, 0 = chunk loaded
 /******/ 	var installedChunks = {
-/******/ 		690: 0
+/******/ 		6690: 0
 /******/ 	};
 /******/ 	
 /******/ 	var installChunk = (data) => {
@@ -271,23 +271,25 @@ module.exports = x({ ["Fragment"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_ru
 /******/ 
 /************************************************************************/
 /******/ 
-/******/ 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-917.js";
+/******/ import * as __webpack_chunk_3__ from "./chunk-2777.js";
 /******/ __nuri_require__.C(__webpack_chunk_3__);
-/******/ import * as __webpack_chunk_4__ from "./chunk-149.js";
+/******/ import * as __webpack_chunk_4__ from "./chunk-4917.js";
 /******/ __nuri_require__.C(__webpack_chunk_4__);
-/******/ import * as __webpack_chunk_5__ from "./chunk-309.js";
+/******/ import * as __webpack_chunk_5__ from "./chunk-6149.js";
 /******/ __nuri_require__.C(__webpack_chunk_5__);
-/******/ import * as __webpack_chunk_6__ from "./chunk-563.js";
+/******/ import * as __webpack_chunk_6__ from "./chunk-8690.js";
 /******/ __nuri_require__.C(__webpack_chunk_6__);
+/******/ import * as __webpack_chunk_7__ from "./chunk-1563.js";
+/******/ __nuri_require__.C(__webpack_chunk_7__);
 /******/ 
 /******/ // 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,917,149,309,563], () => (__nuri_require__(6477)))
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [6364,4560,2777,4917,6149,8690,1563], () => (__nuri_require__(6477)))
 /******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
 /******/ const __webpack_exports__default = __webpack_exports__.A;
 /******/ export { __webpack_exports__default as default };

package/dist/icon-text-option-badge.js

@@ -22,7 +22,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: {
@@ -251,19 +251,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-2777.js";
 /******/ __nuri_require__.C(__webpack_chunk_2__);
-/******/ import * as __webpack_chunk_3__ from "./chunk-917.js";
+/******/ import * as __webpack_chunk_3__ from "./chunk-4917.js";
 /******/ __nuri_require__.C(__webpack_chunk_3__);
-/******/ import * as __webpack_chunk_4__ from "./chunk-149.js";
+/******/ import * as __webpack_chunk_4__ from "./chunk-6149.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,917,149], () => (__nuri_require__(9891)))
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [6364,2777,4917,6149], () => (__nuri_require__(9891)))
 /******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
 /******/ const __webpack_exports__default = __webpack_exports__.A;
 /******/ export { __webpack_exports__default as default };

package/dist/icon.js

@@ -165,7 +165,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 = {
-/******/ 		480: 0
+/******/ 		6480: 0
 /******/ 	};
 /******/ 	
 /******/ 	var installChunk = (data) => {
@@ -205,17 +205,17 @@ 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-298.js";
+/******/ import * as __webpack_chunk_2__ from "./chunk-7298.js";
 /******/ __nuri_require__.C(__webpack_chunk_2__);
-/******/ import * as __webpack_chunk_3__ from "./chunk-653.js";
+/******/ import * as __webpack_chunk_3__ from "./chunk-7653.js";
 /******/ __nuri_require__.C(__webpack_chunk_3__);
 /******/ 
 /******/ // 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,298,653], () => (__nuri_require__(3547)))
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [6364,7298,7653], () => (__nuri_require__(3547)))
 /******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
 /******/ const __webpack_exports__default = __webpack_exports__.A;
 /******/ export { __webpack_exports__default as default };

package/dist/index.d.ts

@@ -26,6 +26,7 @@ export { default as Icon } from './components/icon/icon';
 export { default as BottomNav } from './components/bottom-nav/bottom-nav';
 export { default as StepProgress } from './components/step-progress/step-progress';
 export { default as ChipGroup } from './components/chip-group/chip-group';
+export { LogProvider, useLog } from './components/logging/logging';
 export type { AvatarProps } from './components/avatar/avatar-type';
 export type { CTAButtonProps } from './components/button/button-type';
 export type { OptionBadgeProps, IconTextBadgeProps, IconTextOptionBadgeProps, } from './components/badge/badge-type';
@@ -52,6 +53,7 @@ export type { IconName, IconProps, IconWeight } from './components/icon/icon-typ
 export type { BottomNavProps, BottomNavItem, BottomNavLinkProps, BottomNavBadge, } from './components/bottom-nav/bottom-nav-type';
 export type { StepProgressProps } from './components/step-progress/step-progress-type';
 export type { ChipGroupProps, ChipGroupItem } from './components/chip-group/chip-group-type';
+export type { LogEvent, LogAction, LogProviderProps, TrackProps, } from './components/logging/logging-type';
 export type { Size } from './helpers/props/common-props';
 export { colors, primitive, semanticApp, semanticAdmin } from './tokens/generated';
 export type { PrimitiveTokens, SemanticAppTokens, SemanticAdminTokens } from './tokens/generated';