@nurihaus/web-design-system 3.0.1 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +104 -5
- package/dist/.storybook/story-kit.d.ts +18 -0
- package/dist/ai/components.md +1036 -0
- package/dist/ai/tokens.md +344 -0
- package/dist/avatar.js +336 -0
- package/dist/breadcrumb.js +364 -0
- package/dist/check-box.js +360 -0
- package/dist/chunk-149.js +57 -0
- package/dist/chunk-298.js +34 -0
- package/dist/chunk-302.js +105 -0
- package/dist/chunk-309.js +36 -0
- package/dist/chunk-364.js +126 -0
- package/dist/chunk-387.js +56 -0
- package/dist/chunk-436.js +33 -0
- package/dist/chunk-558.js +200 -0
- package/dist/chunk-563.js +181 -0
- package/dist/chunk-657.js +143 -0
- package/dist/chunk-713.js +38 -0
- package/dist/chunk-739.js +68 -0
- package/dist/chunk-77.js +34 -0
- package/dist/chunk-777.js +117 -0
- package/dist/chunk-910.js +64 -0
- package/dist/chunk-917.js +35 -0
- package/dist/chunk-933.js +70 -0
- package/dist/chunk-976.js +29 -0
- package/dist/collapsible-menu.js +394 -0
- package/dist/components/avatar/avatar-props.d.ts +2 -6
- package/dist/components/avatar/avatar-type.d.ts +4 -5
- package/dist/components/avatar/avatar.d.ts +1 -0
- package/dist/components/avatar/avatar.stories.d.ts +17 -1
- package/dist/components/badge/badge-props.d.ts +17 -80
- package/dist/components/badge/badge-type.d.ts +38 -2
- package/dist/components/badge/badge.stories.d.ts +25 -2
- package/dist/components/badge/base-badge.d.ts +2 -1
- package/dist/components/badge/icon-text-badge.d.ts +3 -21
- package/dist/components/badge/icon-text-option-badge.d.ts +2 -15
- package/dist/components/badge/option-badge.d.ts +3 -20
- package/dist/components/breadcrumb/base-breadcrumb.d.ts +19 -0
- package/dist/components/breadcrumb/breadcrumb-props.d.ts +4 -0
- package/dist/components/breadcrumb/breadcrumb-type.d.ts +33 -0
- package/dist/components/breadcrumb/breadcrumb.d.ts +4 -0
- package/dist/components/breadcrumb/breadcrumb.stories.d.ts +25 -0
- package/dist/components/button/button-props.d.ts +2 -7
- package/dist/components/button/button-type.d.ts +11 -3
- package/dist/components/button/button.stories.d.ts +13 -10
- package/dist/components/button/cta-button.d.ts +3 -12
- package/dist/components/check-box/base-check-box.d.ts +9 -5
- package/dist/components/check-box/check-box-props.d.ts +2 -7
- package/dist/components/check-box/check-box-type.d.ts +11 -4
- package/dist/components/check-box/check-box.d.ts +3 -10
- package/dist/components/check-box/check-box.stories.d.ts +19 -4
- package/dist/components/collapsible-menu/base-collapsible-menu.d.ts +9 -5
- package/dist/components/collapsible-menu/collapsible-menu-props.d.ts +3 -12
- package/dist/components/collapsible-menu/collapsible-menu-type.d.ts +33 -9
- package/dist/components/collapsible-menu/collapsible-menu.d.ts +3 -23
- package/dist/components/collapsible-menu/collapsible-menu.stories.d.ts +20 -4
- package/dist/components/drawer/base-drawer.d.ts +15 -0
- package/dist/components/drawer/drawer-props.d.ts +11 -0
- package/dist/components/drawer/drawer-type.d.ts +28 -0
- package/dist/components/drawer/drawer.d.ts +4 -0
- package/dist/components/drawer/drawer.stories.d.ts +34 -0
- package/dist/components/drop-down/base-drop-down.d.ts +11 -3
- package/dist/components/drop-down/drop-down-props.d.ts +3 -12
- package/dist/components/drop-down/drop-down-type.d.ts +34 -15
- package/dist/components/drop-down/drop-down.d.ts +3 -32
- package/dist/components/drop-down/drop-down.stories.d.ts +23 -4
- package/dist/components/elements/text/base-text.d.ts +3 -0
- package/dist/components/elements/text/text-props.d.ts +16 -0
- package/dist/components/elements/text/text-type.d.ts +6 -2
- package/dist/components/elements/text/text.d.ts +2 -1
- package/dist/components/elements/text/text.stories.d.ts +43 -3
- package/dist/components/loading/index.d.ts +6 -6
- package/dist/components/loading/inline-loading/base-inline-loading.d.ts +3 -0
- package/dist/components/loading/inline-loading/inline-loading-props.d.ts +9 -0
- package/dist/components/loading/inline-loading/inline-loading-type.d.ts +8 -6
- package/dist/components/loading/inline-loading/inline-loading.d.ts +3 -2
- package/dist/components/loading/inline-loading/inline-loading.stories.d.ts +5 -9
- package/dist/components/loading/overlay-loading/base-overlay-loading.d.ts +3 -0
- package/dist/components/loading/overlay-loading/overlay-loading-props.d.ts +7 -0
- package/dist/components/loading/overlay-loading/overlay-loading-type.d.ts +6 -3
- package/dist/components/loading/overlay-loading/overlay-loading.d.ts +3 -3
- package/dist/components/loading/overlay-loading/overlay-loading.stories.d.ts +8 -8
- package/dist/components/loading/spinner/base-spinner.d.ts +4 -0
- package/dist/components/loading/spinner/spinner-props.d.ts +1 -0
- package/dist/components/loading/spinner/spinner-type.d.ts +4 -4
- package/dist/components/loading/spinner/spinner.d.ts +2 -2
- package/dist/components/loading/spinner/spinner.stories.d.ts +5 -12
- package/dist/components/modal/base-modal.d.ts +21 -6
- package/dist/components/modal/modal-props.d.ts +5 -7
- package/dist/components/modal/modal-type.d.ts +34 -10
- package/dist/components/modal/modal-with-double-button.d.ts +4 -16
- package/dist/components/modal/modal-with-double-button.stories.d.ts +22 -0
- package/dist/components/modal/modal.d.ts +4 -0
- package/dist/components/modal/modal.stories.d.ts +22 -4
- package/dist/components/pagination/base-pagination.d.ts +9 -0
- package/dist/components/pagination/pagination-props.d.ts +4 -0
- package/dist/components/pagination/pagination-type.d.ts +20 -0
- package/dist/components/pagination/pagination.d.ts +4 -0
- package/dist/components/pagination/pagination.stories.d.ts +25 -0
- package/dist/components/radio/base-radio.d.ts +9 -5
- package/dist/components/radio/radio-props.d.ts +1 -0
- package/dist/components/radio/radio-type.d.ts +6 -8
- package/dist/components/radio/radio.d.ts +2 -2
- package/dist/components/radio/radio.stories.d.ts +13 -4
- package/dist/components/skeleton/base-skeleton.d.ts +4 -0
- package/dist/components/skeleton/skeleton-props.d.ts +15 -0
- package/dist/components/skeleton/skeleton-type.d.ts +12 -0
- package/dist/components/skeleton/skeleton.d.ts +4 -0
- package/dist/components/skeleton/skeleton.stories.d.ts +327 -0
- package/dist/components/switch/base-switch.d.ts +11 -0
- package/dist/components/switch/switch-props.d.ts +4 -0
- package/dist/components/switch/switch-type.d.ts +19 -0
- package/dist/components/switch/switch.d.ts +4 -0
- package/dist/components/switch/switch.stories.d.ts +24 -0
- package/dist/components/table/base-table.d.ts +4 -5
- package/dist/components/table/data-table.d.ts +5 -22
- package/dist/components/table/table-type.d.ts +22 -1
- package/dist/components/table/table.stories.d.ts +19 -3
- package/dist/components/tabs/base-tabs.d.ts +7 -7
- package/dist/components/tabs/tabs-props.d.ts +1 -1
- package/dist/components/tabs/tabs-type.d.ts +9 -13
- package/dist/components/tabs/tabs.d.ts +3 -3
- package/dist/components/tabs/tabs.stories.d.ts +16 -10
- package/dist/components/text-area/base-text-area.d.ts +10 -0
- package/dist/components/text-area/text-area-props.d.ts +12 -0
- package/dist/components/text-area/text-area-type.d.ts +34 -0
- package/dist/components/text-area/text-area.d.ts +4 -0
- package/dist/components/text-area/text-area.stories.d.ts +32 -0
- package/dist/components/text-field/base-text-field.d.ts +5 -3
- package/dist/components/text-field/text-field-props.d.ts +3 -12
- package/dist/components/text-field/text-field-type.d.ts +14 -0
- package/dist/components/text-field/text-field.d.ts +3 -16
- package/dist/components/text-field/text-field.stories.d.ts +24 -0
- package/dist/components/toast/base-toast.d.ts +20 -0
- package/dist/components/toast/toast-props.d.ts +18 -0
- package/dist/components/toast/toast-type.d.ts +45 -0
- package/dist/components/toast/toast.d.ts +5 -0
- package/dist/components/toast/toast.stories.d.ts +310 -0
- package/dist/components/tooltip/base-tooltip.d.ts +13 -3
- package/dist/components/tooltip/tooltip-props.d.ts +3 -2
- package/dist/components/tooltip/tooltip-type.d.ts +17 -5
- package/dist/components/tooltip/tooltip.d.ts +4 -7
- package/dist/components/tooltip/tooltip.stories.d.ts +21 -4
- package/dist/components.css +3017 -0
- package/dist/cta-button.js +237 -0
- package/dist/data-table.js +386 -0
- package/dist/drawer.js +390 -0
- package/dist/drop-down.js +419 -0
- package/dist/helpers/hooks/useExternalState.d.ts +5 -0
- package/dist/helpers/props/common-props.d.ts +7 -0
- package/dist/helpers/types/common-props.d.ts +8 -0
- package/dist/icon-text-badge.js +294 -0
- package/dist/icon-text-option-badge.js +270 -0
- package/dist/index.d.ts +33 -1
- package/dist/index.js +4179 -10180
- package/dist/loading.js +383 -0
- package/dist/modal-with-double-button.js +332 -0
- package/dist/modal.js +288 -0
- package/dist/option-badge.js +293 -0
- package/dist/pagination.js +412 -0
- package/dist/radio.js +363 -0
- package/dist/reset.css +45 -0
- package/dist/skeleton.js +331 -0
- package/dist/styles.css +1386 -248
- package/dist/switch.js +349 -0
- package/dist/tabs.js +421 -0
- package/dist/text-area.js +374 -0
- package/dist/text-field.js +369 -0
- package/dist/text.js +233 -0
- package/dist/toast.js +496 -0
- package/dist/tokens.css +100 -0
- package/dist/tokens.js +4 -6
- package/dist/tooltip.js +360 -0
- package/package.json +123 -14
- package/dist/components/text-field/text-filed.stories.d.ts +0 -8
package/dist/toast.js
ADDED
|
@@ -0,0 +1,496 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import * as __WEBPACK_EXTERNAL_MODULE_radix_ui_3bc96d1b__ from "radix-ui";
|
|
3
|
+
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
|
|
4
|
+
import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8__ from "react/jsx-runtime";
|
|
5
|
+
/******/ var __webpack_modules__ = ({
|
|
6
|
+
|
|
7
|
+
/***/ 7413
|
|
8
|
+
(__unused_webpack_module, __webpack_exports__, __nuri_require__) {
|
|
9
|
+
|
|
10
|
+
/* harmony export */ __nuri_require__.d(__webpack_exports__, {
|
|
11
|
+
/* harmony export */ A: () => (__WEBPACK_DEFAULT_EXPORT__),
|
|
12
|
+
/* harmony export */ t: () => (/* binding */ ToastProvider)
|
|
13
|
+
/* harmony export */ });
|
|
14
|
+
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __nuri_require__(612);
|
|
15
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __nuri_require__(1041);
|
|
16
|
+
/* harmony import */ var radix_ui__WEBPACK_IMPORTED_MODULE_2__ = __nuri_require__(0);
|
|
17
|
+
/* harmony import */ var _helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__ = __nuri_require__(3274);
|
|
18
|
+
/* harmony import */ var _helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_4__ = __nuri_require__(7335);
|
|
19
|
+
/* harmony import */ var _toast_props__WEBPACK_IMPORTED_MODULE_5__ = __nuri_require__(5618);
|
|
20
|
+
var __assign = undefined && undefined.__assign || function () {
|
|
21
|
+
__assign = Object.assign || function (t) {
|
|
22
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
23
|
+
s = arguments[i];
|
|
24
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
25
|
+
}
|
|
26
|
+
return t;
|
|
27
|
+
};
|
|
28
|
+
return __assign.apply(this, arguments);
|
|
29
|
+
};
|
|
30
|
+
var __rest = undefined && undefined.__rest || function (s, e) {
|
|
31
|
+
var t = {};
|
|
32
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
33
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
34
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
35
|
+
}
|
|
36
|
+
return t;
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
// Toast.Provider 는 DOM 을 그리지 않는다. Viewport(ol) 가 토스트가 쌓이는 자리다.
|
|
45
|
+
var ToastViewport = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
|
|
46
|
+
var className = props.className,
|
|
47
|
+
position = props.position,
|
|
48
|
+
restProps = __rest(props, ["className", "position"]);
|
|
49
|
+
var positionClassName = (0,_helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_4__/* .getMergedProps */ .p)({
|
|
50
|
+
position: position
|
|
51
|
+
}, _toast_props__WEBPACK_IMPORTED_MODULE_5__/* .toastViewportProps */ .Cc).className;
|
|
52
|
+
return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(radix_ui__WEBPACK_IMPORTED_MODULE_2__.Toast.Viewport, __assign({
|
|
53
|
+
ref: ref,
|
|
54
|
+
className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__/* .classNames */ .x)('nuri-theme base-toast viewport', positionClassName, className)
|
|
55
|
+
}, restProps));
|
|
56
|
+
});
|
|
57
|
+
ToastViewport.displayName = 'ToastViewport';
|
|
58
|
+
// Radix Toast 는 Provider 없이 쓰면 오류를 낸다. 쓰는 쪽이 앱 루트에 한 번 둔다.
|
|
59
|
+
// radix-ui 는 peerDependency 라 진입점(`/toast`, 루트)이 달라도 Radix context 하나를 같이 쓴다.
|
|
60
|
+
var ToastProvider = function ToastProvider(props) {
|
|
61
|
+
var children = props.children,
|
|
62
|
+
duration = props.duration,
|
|
63
|
+
position = props.position,
|
|
64
|
+
_a = props.label,
|
|
65
|
+
label = _a === void 0 ? '알림' : _a;
|
|
66
|
+
return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(radix_ui__WEBPACK_IMPORTED_MODULE_2__.Toast.Provider, {
|
|
67
|
+
duration: duration,
|
|
68
|
+
label: label,
|
|
69
|
+
children: [children, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ToastViewport, {
|
|
70
|
+
position: position,
|
|
71
|
+
label: "".concat(label, " ({hotkey})")
|
|
72
|
+
})]
|
|
73
|
+
});
|
|
74
|
+
};
|
|
75
|
+
ToastProvider.displayName = 'ToastProvider';
|
|
76
|
+
var ToastRootBase = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
|
|
77
|
+
var children = props.children,
|
|
78
|
+
className = props.className,
|
|
79
|
+
restProps = __rest(props, ["children", "className"]);
|
|
80
|
+
return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(radix_ui__WEBPACK_IMPORTED_MODULE_2__.Toast.Root, __assign({
|
|
81
|
+
ref: ref,
|
|
82
|
+
className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__/* .classNames */ .x)('nuri-theme base-toast', className)
|
|
83
|
+
}, restProps, {
|
|
84
|
+
children: children
|
|
85
|
+
}));
|
|
86
|
+
});
|
|
87
|
+
ToastRootBase.displayName = 'ToastRoot';
|
|
88
|
+
var ToastTitle = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
|
|
89
|
+
var className = props.className,
|
|
90
|
+
restProps = __rest(props, ["className"]);
|
|
91
|
+
return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(radix_ui__WEBPACK_IMPORTED_MODULE_2__.Toast.Title, __assign({
|
|
92
|
+
ref: ref,
|
|
93
|
+
className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__/* .classNames */ .x)('nuri-theme base-toast title', className)
|
|
94
|
+
}, restProps));
|
|
95
|
+
});
|
|
96
|
+
ToastTitle.displayName = 'ToastTitle';
|
|
97
|
+
var ToastDescription = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
|
|
98
|
+
var className = props.className,
|
|
99
|
+
restProps = __rest(props, ["className"]);
|
|
100
|
+
return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(radix_ui__WEBPACK_IMPORTED_MODULE_2__.Toast.Description, __assign({
|
|
101
|
+
ref: ref,
|
|
102
|
+
className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__/* .classNames */ .x)('nuri-theme base-toast description', className)
|
|
103
|
+
}, restProps));
|
|
104
|
+
});
|
|
105
|
+
ToastDescription.displayName = 'ToastDescription';
|
|
106
|
+
// 누르면 Radix 가 토스트를 닫는다(onOpenChange(false)).
|
|
107
|
+
var ToastAction = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
|
|
108
|
+
var className = props.className,
|
|
109
|
+
restProps = __rest(props, ["className"]);
|
|
110
|
+
return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(radix_ui__WEBPACK_IMPORTED_MODULE_2__.Toast.Action, __assign({
|
|
111
|
+
ref: ref,
|
|
112
|
+
className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__/* .classNames */ .x)('nuri-theme base-toast action', className),
|
|
113
|
+
type: 'button'
|
|
114
|
+
}, restProps));
|
|
115
|
+
});
|
|
116
|
+
ToastAction.displayName = 'ToastAction';
|
|
117
|
+
var ToastClose = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
|
|
118
|
+
var className = props.className,
|
|
119
|
+
restProps = __rest(props, ["className"]);
|
|
120
|
+
return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(radix_ui__WEBPACK_IMPORTED_MODULE_2__.Toast.Close, __assign({
|
|
121
|
+
ref: ref,
|
|
122
|
+
className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__/* .classNames */ .x)('nuri-theme base-toast close', className),
|
|
123
|
+
type: 'button'
|
|
124
|
+
}, restProps));
|
|
125
|
+
});
|
|
126
|
+
ToastClose.displayName = 'ToastClose';
|
|
127
|
+
var ToastRoot = Object.assign(ToastRootBase, {
|
|
128
|
+
Viewport: ToastViewport,
|
|
129
|
+
Title: ToastTitle,
|
|
130
|
+
Description: ToastDescription,
|
|
131
|
+
Action: ToastAction,
|
|
132
|
+
Close: ToastClose
|
|
133
|
+
});
|
|
134
|
+
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ToastRoot);
|
|
135
|
+
|
|
136
|
+
/***/ },
|
|
137
|
+
|
|
138
|
+
/***/ 5618
|
|
139
|
+
(__unused_webpack_module, __webpack_exports__, __nuri_require__) {
|
|
140
|
+
|
|
141
|
+
/* harmony export */ __nuri_require__.d(__webpack_exports__, {
|
|
142
|
+
/* harmony export */ Cc: () => (/* binding */ toastViewportProps),
|
|
143
|
+
/* harmony export */ Eg: () => (/* binding */ toastProps)
|
|
144
|
+
/* harmony export */ });
|
|
145
|
+
/* unused harmony exports variants, positions */
|
|
146
|
+
var variants = ['default', 'secondary', 'success', 'warning', 'error'];
|
|
147
|
+
var positions = ['top-right', 'bottom-right', 'bottom-center'];
|
|
148
|
+
var toastProps = {
|
|
149
|
+
variant: {
|
|
150
|
+
type: 'className',
|
|
151
|
+
className: 'variant',
|
|
152
|
+
values: variants,
|
|
153
|
+
"default": 'default'
|
|
154
|
+
}
|
|
155
|
+
};
|
|
156
|
+
var toastViewportProps = {
|
|
157
|
+
position: {
|
|
158
|
+
type: 'className',
|
|
159
|
+
className: 'position',
|
|
160
|
+
values: positions,
|
|
161
|
+
"default": 'bottom-right'
|
|
162
|
+
}
|
|
163
|
+
};
|
|
164
|
+
|
|
165
|
+
/***/ },
|
|
166
|
+
|
|
167
|
+
/***/ 4012
|
|
168
|
+
(__unused_webpack_module, __webpack_exports__, __nuri_require__) {
|
|
169
|
+
|
|
170
|
+
|
|
171
|
+
// EXPORTS
|
|
172
|
+
__nuri_require__.d(__webpack_exports__, {
|
|
173
|
+
t: () => (/* reexport */ base_toast/* ToastProvider */.t),
|
|
174
|
+
A: () => (/* binding */ toast)
|
|
175
|
+
});
|
|
176
|
+
|
|
177
|
+
// EXTERNAL MODULE: external {"root":"jsx-runtime","commonjs2":"react/jsx-runtime","commonjs":"react/jsx-runtime","amd":"react/jsx-runtime","module":"react/jsx-runtime"}
|
|
178
|
+
var jsx_runtime_ = __nuri_require__(612);
|
|
179
|
+
// EXTERNAL MODULE: external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react","module":"react"}
|
|
180
|
+
var external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_ = __nuri_require__(1041);
|
|
181
|
+
// EXTERNAL MODULE: ./assets/icons/check.svg
|
|
182
|
+
var check = __nuri_require__(5077);
|
|
183
|
+
;// ./assets/icons/exclamation.svg
|
|
184
|
+
var _path, _path2;
|
|
185
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
186
|
+
|
|
187
|
+
var SvgExclamation = function SvgExclamation(props) {
|
|
188
|
+
return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.createElement("svg", _extends({
|
|
189
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
190
|
+
width: 16,
|
|
191
|
+
height: 16,
|
|
192
|
+
fill: "none"
|
|
193
|
+
}, props), _path || (_path = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.createElement("path", {
|
|
194
|
+
stroke: "#fff",
|
|
195
|
+
strokeLinecap: "round",
|
|
196
|
+
strokeWidth: 1.5,
|
|
197
|
+
d: "M8 3.5V9"
|
|
198
|
+
})), _path2 || (_path2 = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.createElement("path", {
|
|
199
|
+
stroke: "#fff",
|
|
200
|
+
strokeLinecap: "round",
|
|
201
|
+
strokeWidth: 2,
|
|
202
|
+
d: "M8 12h.01"
|
|
203
|
+
})));
|
|
204
|
+
};
|
|
205
|
+
/* harmony default export */ const exclamation = (SvgExclamation);
|
|
206
|
+
// EXTERNAL MODULE: ./assets/icons/multifly.svg
|
|
207
|
+
var multifly = __nuri_require__(6713);
|
|
208
|
+
// EXTERNAL MODULE: ./helpers/utils/classNames.js
|
|
209
|
+
var classNames = __nuri_require__(3274);
|
|
210
|
+
// EXTERNAL MODULE: ./helpers/utils/getMergedProps.ts
|
|
211
|
+
var getMergedProps = __nuri_require__(7335);
|
|
212
|
+
// EXTERNAL MODULE: ./components/button/cta-button.tsx
|
|
213
|
+
var cta_button = __nuri_require__(910);
|
|
214
|
+
// EXTERNAL MODULE: ./components/toast/base-toast.tsx
|
|
215
|
+
var base_toast = __nuri_require__(7413);
|
|
216
|
+
// EXTERNAL MODULE: ./components/toast/toast-props.ts
|
|
217
|
+
var toast_props = __nuri_require__(5618);
|
|
218
|
+
;// ./components/toast/toast.tsx
|
|
219
|
+
var __assign = undefined && undefined.__assign || function () {
|
|
220
|
+
__assign = Object.assign || function (t) {
|
|
221
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
222
|
+
s = arguments[i];
|
|
223
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
224
|
+
}
|
|
225
|
+
return t;
|
|
226
|
+
};
|
|
227
|
+
return __assign.apply(this, arguments);
|
|
228
|
+
};
|
|
229
|
+
var __rest = undefined && undefined.__rest || function (s, e) {
|
|
230
|
+
var t = {};
|
|
231
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
232
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
233
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
234
|
+
}
|
|
235
|
+
return t;
|
|
236
|
+
};
|
|
237
|
+
|
|
238
|
+
|
|
239
|
+
|
|
240
|
+
|
|
241
|
+
|
|
242
|
+
|
|
243
|
+
|
|
244
|
+
|
|
245
|
+
|
|
246
|
+
|
|
247
|
+
|
|
248
|
+
// 상태를 뜻하는 variant 는 앞에 아이콘을 둔다. error 는 닫기와 같은 X 를 쓴다
|
|
249
|
+
var VARIANT_ICON = {
|
|
250
|
+
success: check/* default */.A,
|
|
251
|
+
warning: exclamation,
|
|
252
|
+
error: multifly/* default */.A
|
|
253
|
+
};
|
|
254
|
+
var Toast = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
|
|
255
|
+
var className = props.className,
|
|
256
|
+
title = props.title,
|
|
257
|
+
description = props.description,
|
|
258
|
+
variant = props.variant,
|
|
259
|
+
action = props.action,
|
|
260
|
+
_a = props.showClose,
|
|
261
|
+
showClose = _a === void 0 ? true : _a,
|
|
262
|
+
restProps = __rest(props, ["className", "title", "description", "variant", "action", "showClose"]);
|
|
263
|
+
var variantClassName = (0,getMergedProps/* getMergedProps */.p)({
|
|
264
|
+
className: className,
|
|
265
|
+
variant: variant
|
|
266
|
+
}, toast_props/* toastProps */.Eg).className;
|
|
267
|
+
var Icon = variant && variant in VARIANT_ICON ? VARIANT_ICON[variant] : null;
|
|
268
|
+
return (0,jsx_runtime_.jsxs)(base_toast/* default */.A, __assign({
|
|
269
|
+
ref: ref,
|
|
270
|
+
className: (0,classNames/* classNames */.x)(variantClassName, 'toast')
|
|
271
|
+
}, restProps, {
|
|
272
|
+
children: [Icon && (0,jsx_runtime_.jsx)(Icon, {
|
|
273
|
+
className: 'toast-icon',
|
|
274
|
+
"aria-hidden": true
|
|
275
|
+
}), (0,jsx_runtime_.jsxs)("div", {
|
|
276
|
+
className: 'toast-body',
|
|
277
|
+
children: [(0,jsx_runtime_.jsx)(base_toast/* default */.A.Title, {
|
|
278
|
+
className: 'toast-title',
|
|
279
|
+
children: title
|
|
280
|
+
}), description && (0,jsx_runtime_.jsx)(base_toast/* default */.A.Description, {
|
|
281
|
+
className: 'toast-description',
|
|
282
|
+
children: description
|
|
283
|
+
})]
|
|
284
|
+
}), action && (0,jsx_runtime_.jsx)(base_toast/* default */.A.Action, {
|
|
285
|
+
className: 'toast-action',
|
|
286
|
+
altText: action.altText,
|
|
287
|
+
asChild: true,
|
|
288
|
+
children: (0,jsx_runtime_.jsx)(cta_button/* default */.A, {
|
|
289
|
+
size: 'xs',
|
|
290
|
+
variant: 'neutral',
|
|
291
|
+
text: action.label,
|
|
292
|
+
onClick: action.onClick
|
|
293
|
+
})
|
|
294
|
+
}), showClose && (0,jsx_runtime_.jsx)(base_toast/* default */.A.Close, {
|
|
295
|
+
className: 'toast-close',
|
|
296
|
+
"aria-label": "\uB2EB\uAE30",
|
|
297
|
+
children: (0,jsx_runtime_.jsx)(multifly/* default */.A, {})
|
|
298
|
+
})]
|
|
299
|
+
}));
|
|
300
|
+
});
|
|
301
|
+
Toast.displayName = 'Toast';
|
|
302
|
+
/* harmony default export */ const toast = (Toast);
|
|
303
|
+
|
|
304
|
+
/***/ },
|
|
305
|
+
|
|
306
|
+
/***/ 0
|
|
307
|
+
(module, __unused_webpack_exports, __nuri_require__) {
|
|
308
|
+
|
|
309
|
+
var x = (y) => {
|
|
310
|
+
var x = {}; __nuri_require__.d(x, y); return x
|
|
311
|
+
}
|
|
312
|
+
var y = (x) => (() => (x))
|
|
313
|
+
module.exports = x({ ["Toast"]: () => (__WEBPACK_EXTERNAL_MODULE_radix_ui_3bc96d1b__.Toast) });
|
|
314
|
+
|
|
315
|
+
/***/ },
|
|
316
|
+
|
|
317
|
+
/***/ 1041
|
|
318
|
+
(module, __unused_webpack_exports, __nuri_require__) {
|
|
319
|
+
|
|
320
|
+
var x = (y) => {
|
|
321
|
+
var x = {}; __nuri_require__.d(x, y); return x
|
|
322
|
+
}
|
|
323
|
+
var y = (x) => (() => (x))
|
|
324
|
+
module.exports = x({ ["Children"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.Children), ["cloneElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.cloneElement), ["createElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createElement), ["forwardRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.forwardRef), ["isValidElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.isValidElement) });
|
|
325
|
+
|
|
326
|
+
/***/ },
|
|
327
|
+
|
|
328
|
+
/***/ 612
|
|
329
|
+
(module, __unused_webpack_exports, __nuri_require__) {
|
|
330
|
+
|
|
331
|
+
var x = (y) => {
|
|
332
|
+
var x = {}; __nuri_require__.d(x, y); return x
|
|
333
|
+
}
|
|
334
|
+
var y = (x) => (() => (x))
|
|
335
|
+
module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8__.jsx), ["jsxs"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8__.jsxs) });
|
|
336
|
+
|
|
337
|
+
/***/ }
|
|
338
|
+
|
|
339
|
+
/******/ });
|
|
340
|
+
/************************************************************************/
|
|
341
|
+
/******/ // The module cache
|
|
342
|
+
/******/ var __webpack_module_cache__ = {};
|
|
343
|
+
/******/
|
|
344
|
+
/******/ // The require function
|
|
345
|
+
/******/ function __nuri_require__(moduleId) {
|
|
346
|
+
/******/ // Check if module is in cache
|
|
347
|
+
/******/ var cachedModule = __webpack_module_cache__[moduleId];
|
|
348
|
+
/******/ if (cachedModule !== undefined) {
|
|
349
|
+
/******/ return cachedModule.exports;
|
|
350
|
+
/******/ }
|
|
351
|
+
/******/ // Create a new module (and put it into the cache)
|
|
352
|
+
/******/ var module = __webpack_module_cache__[moduleId] = {
|
|
353
|
+
/******/ // no module.id needed
|
|
354
|
+
/******/ // no module.loaded needed
|
|
355
|
+
/******/ exports: {}
|
|
356
|
+
/******/ };
|
|
357
|
+
/******/
|
|
358
|
+
/******/ // Execute the module function
|
|
359
|
+
/******/ __webpack_modules__[moduleId](module, module.exports, __nuri_require__);
|
|
360
|
+
/******/
|
|
361
|
+
/******/ // Return the exports of the module
|
|
362
|
+
/******/ return module.exports;
|
|
363
|
+
/******/ }
|
|
364
|
+
/******/
|
|
365
|
+
/******/ // expose the modules object (__webpack_modules__)
|
|
366
|
+
/******/ __nuri_require__.m = __webpack_modules__;
|
|
367
|
+
/******/
|
|
368
|
+
/************************************************************************/
|
|
369
|
+
/******/ /* webpack/runtime/chunk loaded */
|
|
370
|
+
/******/ (() => {
|
|
371
|
+
/******/ var deferred = [];
|
|
372
|
+
/******/ __nuri_require__.O = (result, chunkIds, fn, priority) => {
|
|
373
|
+
/******/ if(chunkIds) {
|
|
374
|
+
/******/ priority = priority || 0;
|
|
375
|
+
/******/ for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
|
|
376
|
+
/******/ deferred[i] = [chunkIds, fn, priority];
|
|
377
|
+
/******/ return;
|
|
378
|
+
/******/ }
|
|
379
|
+
/******/ var notFulfilled = Infinity;
|
|
380
|
+
/******/ for (var i = 0; i < deferred.length; i++) {
|
|
381
|
+
/******/ var [chunkIds, fn, priority] = deferred[i];
|
|
382
|
+
/******/ var fulfilled = true;
|
|
383
|
+
/******/ for (var j = 0; j < chunkIds.length; j++) {
|
|
384
|
+
/******/ if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__nuri_require__.O).every((key) => (__nuri_require__.O[key](chunkIds[j])))) {
|
|
385
|
+
/******/ chunkIds.splice(j--, 1);
|
|
386
|
+
/******/ } else {
|
|
387
|
+
/******/ fulfilled = false;
|
|
388
|
+
/******/ if(priority < notFulfilled) notFulfilled = priority;
|
|
389
|
+
/******/ }
|
|
390
|
+
/******/ }
|
|
391
|
+
/******/ if(fulfilled) {
|
|
392
|
+
/******/ deferred.splice(i--, 1)
|
|
393
|
+
/******/ var r = fn();
|
|
394
|
+
/******/ if (r !== undefined) result = r;
|
|
395
|
+
/******/ }
|
|
396
|
+
/******/ }
|
|
397
|
+
/******/ return result;
|
|
398
|
+
/******/ };
|
|
399
|
+
/******/ })();
|
|
400
|
+
/******/
|
|
401
|
+
/******/ /* webpack/runtime/define property getters */
|
|
402
|
+
/******/ (() => {
|
|
403
|
+
/******/ // define getter functions for harmony exports
|
|
404
|
+
/******/ __nuri_require__.d = (exports, definition) => {
|
|
405
|
+
/******/ for(var key in definition) {
|
|
406
|
+
/******/ if(__nuri_require__.o(definition, key) && !__nuri_require__.o(exports, key)) {
|
|
407
|
+
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
|
|
408
|
+
/******/ }
|
|
409
|
+
/******/ }
|
|
410
|
+
/******/ };
|
|
411
|
+
/******/ })();
|
|
412
|
+
/******/
|
|
413
|
+
/******/ /* webpack/runtime/hasOwnProperty shorthand */
|
|
414
|
+
/******/ (() => {
|
|
415
|
+
/******/ __nuri_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
|
|
416
|
+
/******/ })();
|
|
417
|
+
/******/
|
|
418
|
+
/******/ /* webpack/runtime/export webpack runtime */
|
|
419
|
+
/******/ export { __nuri_require__ };
|
|
420
|
+
/******/
|
|
421
|
+
/******/ /* webpack/runtime/import chunk loading */
|
|
422
|
+
/******/ (() => {
|
|
423
|
+
/******/ // no baseURI
|
|
424
|
+
/******/
|
|
425
|
+
/******/ // object to store loaded and loading chunks
|
|
426
|
+
/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
|
|
427
|
+
/******/ // [resolve, Promise] = chunk loading, 0 = chunk loaded
|
|
428
|
+
/******/ var installedChunks = {
|
|
429
|
+
/******/ 448: 0
|
|
430
|
+
/******/ };
|
|
431
|
+
/******/
|
|
432
|
+
/******/ var installChunk = (data) => {
|
|
433
|
+
/******/ var {__webpack_esm_ids__, __webpack_esm_modules__, __webpack_esm_runtime__} = data;
|
|
434
|
+
/******/ // add "modules" to the modules object,
|
|
435
|
+
/******/ // then flag all "ids" as loaded and fire callback
|
|
436
|
+
/******/ var moduleId, chunkId, i = 0;
|
|
437
|
+
/******/ for(moduleId in __webpack_esm_modules__) {
|
|
438
|
+
/******/ if(__nuri_require__.o(__webpack_esm_modules__, moduleId)) {
|
|
439
|
+
/******/ __nuri_require__.m[moduleId] = __webpack_esm_modules__[moduleId];
|
|
440
|
+
/******/ }
|
|
441
|
+
/******/ }
|
|
442
|
+
/******/ if(__webpack_esm_runtime__) __webpack_esm_runtime__(__nuri_require__);
|
|
443
|
+
/******/ for(;i < __webpack_esm_ids__.length; i++) {
|
|
444
|
+
/******/ chunkId = __webpack_esm_ids__[i];
|
|
445
|
+
/******/ if(__nuri_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
|
|
446
|
+
/******/ installedChunks[chunkId][0]();
|
|
447
|
+
/******/ }
|
|
448
|
+
/******/ installedChunks[__webpack_esm_ids__[i]] = 0;
|
|
449
|
+
/******/ }
|
|
450
|
+
/******/ __nuri_require__.O();
|
|
451
|
+
/******/ }
|
|
452
|
+
/******/
|
|
453
|
+
/******/ // no chunk on demand loading
|
|
454
|
+
/******/
|
|
455
|
+
/******/ // no prefetching
|
|
456
|
+
/******/
|
|
457
|
+
/******/ // no preloaded
|
|
458
|
+
/******/
|
|
459
|
+
/******/ __nuri_require__.C = installChunk;
|
|
460
|
+
/******/
|
|
461
|
+
/******/ __nuri_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);
|
|
462
|
+
/******/ // no HMR
|
|
463
|
+
/******/
|
|
464
|
+
/******/ // no HMR manifest
|
|
465
|
+
/******/ })();
|
|
466
|
+
/******/
|
|
467
|
+
/************************************************************************/
|
|
468
|
+
/******/
|
|
469
|
+
/******/ import * as __webpack_chunk_1__ from "./chunk-364.js";
|
|
470
|
+
/******/ __nuri_require__.C(__webpack_chunk_1__);
|
|
471
|
+
/******/ import * as __webpack_chunk_2__ from "./chunk-777.js";
|
|
472
|
+
/******/ __nuri_require__.C(__webpack_chunk_2__);
|
|
473
|
+
/******/ import * as __webpack_chunk_3__ from "./chunk-298.js";
|
|
474
|
+
/******/ __nuri_require__.C(__webpack_chunk_3__);
|
|
475
|
+
/******/ import * as __webpack_chunk_4__ from "./chunk-933.js";
|
|
476
|
+
/******/ __nuri_require__.C(__webpack_chunk_4__);
|
|
477
|
+
/******/ import * as __webpack_chunk_5__ from "./chunk-302.js";
|
|
478
|
+
/******/ __nuri_require__.C(__webpack_chunk_5__);
|
|
479
|
+
/******/ import * as __webpack_chunk_6__ from "./chunk-713.js";
|
|
480
|
+
/******/ __nuri_require__.C(__webpack_chunk_6__);
|
|
481
|
+
/******/ import * as __webpack_chunk_7__ from "./chunk-976.js";
|
|
482
|
+
/******/ __nuri_require__.C(__webpack_chunk_7__);
|
|
483
|
+
/******/ import * as __webpack_chunk_8__ from "./chunk-910.js";
|
|
484
|
+
/******/ __nuri_require__.C(__webpack_chunk_8__);
|
|
485
|
+
/******/ import * as __webpack_chunk_9__ from "./chunk-77.js";
|
|
486
|
+
/******/ __nuri_require__.C(__webpack_chunk_9__);
|
|
487
|
+
/******/
|
|
488
|
+
/******/ // startup
|
|
489
|
+
/******/ // Load entry module and return exports
|
|
490
|
+
/******/ // This entry module depends on other loaded chunks and execution need to be delayed
|
|
491
|
+
/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [364,777,298,933,302,713,976,910,77], () => (__nuri_require__(4012)))
|
|
492
|
+
/******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
|
|
493
|
+
/******/ const __webpack_exports__ToastProvider = __webpack_exports__.t;
|
|
494
|
+
/******/ const __webpack_exports__default = __webpack_exports__.A;
|
|
495
|
+
/******/ export { __webpack_exports__ToastProvider as ToastProvider, __webpack_exports__default as default };
|
|
496
|
+
/******/
|
package/dist/tokens.css
CHANGED
|
@@ -150,6 +150,101 @@
|
|
|
150
150
|
--line-height-4xl: 43px;
|
|
151
151
|
--line-height-5xl: 66px;
|
|
152
152
|
--line-height-6xl: 82px;
|
|
153
|
+
/* 한 줄에 나란히 놓이는 컨트롤: button, drop-down, text-field */
|
|
154
|
+
--control-height-xs: 28px;
|
|
155
|
+
--control-height-s: 36px;
|
|
156
|
+
--control-height-m: 40px;
|
|
157
|
+
--control-height-l: 44px;
|
|
158
|
+
--control-height-xl: 48px;
|
|
159
|
+
|
|
160
|
+
/* 라벨: badge */
|
|
161
|
+
--label-height-xs: 28px;
|
|
162
|
+
--label-height-s: 32px;
|
|
163
|
+
--label-height-m: 36px;
|
|
164
|
+
--label-height-l: 40px;
|
|
165
|
+
--label-height-xl: 48px;
|
|
166
|
+
|
|
167
|
+
/* 메뉴 행: collapsible-menu, drop-down 항목 */
|
|
168
|
+
--menu-row-height-s: 40px;
|
|
169
|
+
--menu-row-height-m: 48px;
|
|
170
|
+
--drop-down-item-height: 46px;
|
|
171
|
+
|
|
172
|
+
/* 정사각 */
|
|
173
|
+
--checkbox-size-s: 18px;
|
|
174
|
+
--checkbox-size-m: 20px;
|
|
175
|
+
--checkbox-size-l: 24px;
|
|
176
|
+
--radio-size: 18px;
|
|
177
|
+
--radio-dot-size: 8px;
|
|
178
|
+
|
|
179
|
+
/* 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 */
|
|
180
|
+
--switch-width-s: 32px;
|
|
181
|
+
--switch-width-m: 40px;
|
|
182
|
+
--switch-width-l: 48px;
|
|
183
|
+
--switch-height-s: 18px;
|
|
184
|
+
--switch-height-m: 22px;
|
|
185
|
+
--switch-height-l: 26px;
|
|
186
|
+
--switch-thumb-inset: 2px;
|
|
187
|
+
--avatar-size-s: 40px;
|
|
188
|
+
--avatar-size-m: 58px;
|
|
189
|
+
--avatar-size-l: 74px;
|
|
190
|
+
--avatar-size-xl: 124px;
|
|
191
|
+
--avatar-badge-size-s: 18px;
|
|
192
|
+
--avatar-badge-size-m: 24px;
|
|
193
|
+
--avatar-badge-size-l: 30px;
|
|
194
|
+
--avatar-badge-size-xl: 48px;
|
|
195
|
+
|
|
196
|
+
/* 폭 */
|
|
197
|
+
--drawer-width-s: 320px;
|
|
198
|
+
--drawer-width-m: 400px;
|
|
199
|
+
--drawer-width-l: 520px;
|
|
200
|
+
--drawer-height-s: 320px;
|
|
201
|
+
--drawer-height-m: 400px;
|
|
202
|
+
--drawer-height-l: 520px;
|
|
203
|
+
--toast-width: 360px;
|
|
204
|
+
--modal-width-s: 400px;
|
|
205
|
+
--modal-width-m: 450px;
|
|
206
|
+
--modal-width-l: 500px;
|
|
207
|
+
|
|
208
|
+
/* 그 밖의 치수 */
|
|
209
|
+
--icon-size-s: 18px;
|
|
210
|
+
--icon-size-m: 20px;
|
|
211
|
+
--icon-size-l: 24px;
|
|
212
|
+
--tooltip-arrow: 8px;
|
|
213
|
+
--spinner-stroke: 3px;
|
|
214
|
+
--overlay-spinner-size: 64px;
|
|
215
|
+
--overlay-spinner-stroke: 8px;
|
|
216
|
+
--tab-indicator-thickness: 3px;
|
|
217
|
+
--checkbox-border: 1.5px;
|
|
218
|
+
--breadcrumb-chevron-xs: 12px;
|
|
219
|
+
--breadcrumb-chevron-s: 14px;
|
|
220
|
+
--breadcrumb-chevron-m: 16px;
|
|
221
|
+
--breadcrumb-chevron-l: 18px;
|
|
222
|
+
--breadcrumb-chevron-xl: 20px;
|
|
223
|
+
--skeleton-text-height: 16px;
|
|
224
|
+
--skeleton-last-line-width: 60%;
|
|
225
|
+
--hairline: 1px;
|
|
226
|
+
|
|
227
|
+
/* 그림자 */
|
|
228
|
+
--shadow-popover: 0px 4px 6px -2px rgba(0, 0, 0, 0.06), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
229
|
+
|
|
230
|
+
/* 레이어. 값이 같아도 역할이 다르면 이름을 따로 둔다 */
|
|
231
|
+
--z-base: 0;
|
|
232
|
+
--z-raised: 1;
|
|
233
|
+
--z-sticky: 2;
|
|
234
|
+
--z-sticky-header: 3;
|
|
235
|
+
--z-tooltip: 3;
|
|
236
|
+
--z-popover: 5;
|
|
237
|
+
--z-overlay: 9998;
|
|
238
|
+
--z-modal: 9999;
|
|
239
|
+
--z-toast: 10000;
|
|
240
|
+
|
|
241
|
+
/* 모션 */
|
|
242
|
+
--motion-fast: 160ms;
|
|
243
|
+
--motion-base: 300ms;
|
|
244
|
+
--motion-ease: ease;
|
|
245
|
+
--spinner-duration: 1.2s;
|
|
246
|
+
--skeleton-duration: 1.5s;
|
|
247
|
+
--spinner-ease: cubic-bezier(0.5, 0, 0.5, 1);
|
|
153
248
|
}
|
|
154
249
|
/* semantic: app */
|
|
155
250
|
:root, :root[data-ds-theme='app'] {
|
|
@@ -228,6 +323,11 @@
|
|
|
228
323
|
--button-size-l: 54;
|
|
229
324
|
--button-size-xl: 60;
|
|
230
325
|
}
|
|
326
|
+
/*
|
|
327
|
+
* 크기·두께·레이어·모션. figma.json 에서 만들지 않고 손으로 유지한다(font-face.css 와 같다).
|
|
328
|
+
* 디자이너가 숫자를 바꾸는 곳은 여기다. 컴포넌트 CSS 는 숫자를 쓰지 않고 이 변수를 쓴다(빌드가 검사).
|
|
329
|
+
* 크기 이름은 xs · s · m · l · xl 다섯 개다. 컴포넌트는 그중 지원하는 것만 고른다.
|
|
330
|
+
*/
|
|
231
331
|
.nuri-theme {
|
|
232
332
|
--cursor-button: pointer;
|
|
233
333
|
--cursor-disabled: not-allowed;
|