@team-frieeren/components 1.0.21 → 1.0.22

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.
Files changed (5) hide show
  1. package/dist/Input.js +45 -28
  2. package/dist/components/Input/input.type.d.ts +1 -1
  3. package/dist/index.css +1 -1
  4. package/dist/index.js +45 -28
  5. package/package.json +1 -1
package/dist/Input.js CHANGED
@@ -80,18 +80,17 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
80
80
  display = _d === void 0 ? "box" : _d,
81
81
  _e = _a.disabled,
82
82
  disabled = _e === void 0 ? false : _e,
83
- _f = _a.error,
84
- error = _f === void 0 ? false : _f,
83
+ validate = _a.validate,
85
84
  onClear = _a.onClear,
86
85
  className = _a.className,
87
86
  value = _a.value,
88
87
  onChange = _a.onChange,
89
- _g = _a.placeholder,
90
- placeholder = _g === void 0 ? "텍스트를 입력하세요" : _g,
91
- rest = __rest(_a, ["type", "accept", "display", "disabled", "error", "onClear", "className", "value", "onChange", "placeholder"]);
92
- var _h = useState(false),
93
- hasFile = _h[0],
94
- setHasFile = _h[1];
88
+ _f = _a.placeholder,
89
+ placeholder = _f === void 0 ? "텍스트를 입력하세요" : _f,
90
+ rest = __rest(_a, ["type", "accept", "display", "disabled", "validate", "onClear", "className", "value", "onChange", "placeholder"]);
91
+ var _g = useState(false),
92
+ hasFile = _g[0],
93
+ setHasFile = _g[1];
95
94
  var handleChange = function handleChange(e) {
96
95
  if (type === "file") {
97
96
  setHasFile(!!(e.target.files && e.target.files.length > 0));
@@ -100,27 +99,45 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
100
99
  onChange(e);
101
100
  }
102
101
  };
102
+ var getErrorMessage = function getErrorMessage() {
103
+ if (validate && value !== undefined) {
104
+ var validationError = validate(String(value));
105
+ if (validationError !== null) {
106
+ return validationError;
107
+ }
108
+ }
109
+ return "";
110
+ };
111
+ var errorMessage = getErrorMessage();
112
+ var hasError = !!errorMessage;
103
113
  return jsxs("div", {
104
- className: cx("input-wrapper", (_b = {}, _b["input--display-".concat(display)] = display, _b["input--disabled"] = disabled, _b["input--error"] = error, _b), className),
105
- children: [jsx("input", _assign({
106
- placeholder: placeholder,
107
- ref: ref,
108
- type: type,
109
- disabled: disabled,
110
- className: cx("input", {
111
- "has-file": hasFile
112
- }),
113
- "data-frieeren-component": "Input",
114
- onChange: handleChange
115
- }, rest)), type === "file" && jsx("button", {
116
- className: "input--action input--action-link",
117
- disabled: disabled,
118
- children: jsx(SvgLink, {})
119
- }), value && onClear && jsx("button", {
120
- onClick: onClear,
121
- className: "input--close",
122
- disabled: disabled,
123
- children: jsx(SvgClose, {})
114
+ className: cx("input-wrapper", (_b = {}, _b["input--display-".concat(display)] = display, _b["input--disabled"] = disabled, _b["input--error"] = hasError, _b), className),
115
+ children: [jsxs("div", {
116
+ className: "input-container",
117
+ children: [jsx("input", _assign({
118
+ placeholder: placeholder,
119
+ ref: ref,
120
+ type: type,
121
+ disabled: disabled,
122
+ className: cx("input", {
123
+ "has-file": hasFile
124
+ }),
125
+ "data-frieeren-component": "Input",
126
+ onChange: handleChange,
127
+ value: value
128
+ }, rest)), type === "file" && jsx("button", {
129
+ className: "input--action input--action-link",
130
+ disabled: disabled,
131
+ children: jsx(SvgLink, {})
132
+ }), value && onClear && jsx("button", {
133
+ onClick: onClear,
134
+ className: "input--close",
135
+ disabled: disabled,
136
+ children: jsx(SvgClose, {})
137
+ })]
138
+ }), errorMessage && jsx("span", {
139
+ className: "input--error-message",
140
+ children: errorMessage
124
141
  })]
125
142
  });
126
143
  });
package/dist/components/Input/input.type.d.ts CHANGED
@@ -4,7 +4,7 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
4
4
  type?: InputTypes;
5
5
  display?: InputDisplay;
6
6
  disabled?: boolean;
7
- error?: boolean;
7
+ validate?: (value: string) => string | null;
8
8
  onClear?: () => void;
9
9
  className?: string;
10
10
  }
package/dist/index.css CHANGED
@@ -1,2 +1,2 @@
1
1
  @charset "UTF-8";@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
2
- /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--seed-palette-color-base-200:#f6f7f9;--seed-palette-color-base-300:#edf0f3;--seed-palette-color-base-400:#e0e5ea;--seed-palette-color-base-600:#a6abaf;--seed-palette-color-base-700:#7b8287;--seed-palette-color-blue-100:#f0f9ff;--seed-palette-color-blue-300:#bae6fd;--seed-palette-color-blue-400:#7dd3fc;--seed-palette-color-blue-500:#38bdf8;--seed-palette-color-blue-600:#0ea5e9;--seed-palette-color-blue-700:#0284c7;--seed-palette-color-blue-900:#075985;--seed-palette-color-purple-100:#f9fafe;--seed-palette-color-purple-200:#ecedfc;--seed-palette-color-purple-300:#d0d2f7;--seed-palette-color-purple-400:#b5b8f2;--seed-palette-color-purple-500:#9a9eec;--seed-palette-color-purple-600:#7a82e4;--seed-palette-color-purple-700:#6167c9;--seed-palette-color-purple-800:#5756a6;--seed-palette-color-purple-900:#494582;--seed-palette-color-purple-1000:#38325d;--seed-palette-color-red-100:#fef2f2;--seed-palette-color-red-200:#fee2e2;--seed-palette-color-red-300:#fecaca;--seed-palette-color-red-400:#fca5a5;--seed-palette-color-red-500:#f87171;--seed-palette-color-red-600:#ef4444;--seed-palette-color-red-700:#dc2626;--seed-palette-color-red-800:#b91c1c;--seed-palette-color-red-900:#991b1b;--seed-palette-color-red-1000:#7f1d1d;--seed-palette-color-orange-100:#fff7ed;--seed-palette-color-orange-200:#ffedd5;--seed-palette-color-orange-300:#fed7aa;--seed-palette-color-orange-400:#fdba74;--seed-palette-color-orange-500:#fb923c;--seed-palette-color-orange-600:#f97316;--seed-palette-color-orange-700:#ea580c;--seed-palette-color-orange-800:#c2410c;--seed-palette-color-orange-900:#9a3412;--seed-palette-color-orange-1000:#7c2d12;--seed-palette-color-yellow-100:#fefce8;--seed-palette-color-yellow-200:#fef9c3;--seed-palette-color-yellow-300:#fef08a;--seed-palette-color-yellow-400:#fde047;--seed-palette-color-yellow-500:#facc15;--seed-palette-color-yellow-600:#eab308;--seed-palette-color-yellow-700:#ca8a04;--seed-palette-color-yellow-800:#a16207;--seed-palette-color-yellow-900:#854d0e;--seed-palette-color-yellow-1000:#713f12;--seed-palette-color-green-100:#e9ffe9;--seed-palette-color-green-200:#d5ffd5;--seed-palette-color-green-300:#bdffbd;--seed-palette-color-green-400:#89ee89;--seed-palette-color-green-500:#60e060;--seed-palette-color-green-600:#50bf50;--seed-palette-color-green-700:#2fa32f;--seed-palette-color-green-800:#1e861e;--seed-palette-color-green-900:#156015;--seed-palette-color-green-1000:#063f06;--seed-ui-color-text-white:#fff;--seed-ui-color-text-disabled:#c6ccd1;--seed-ui-color-text-lite:#a6abaf;--seed-ui-color-text-dark:#494f54;--seed-ui-color-text-black:#191b1c;--seed-ui-color-background-white:#fff;--seed-ui-color-background-container:#fff;--seed-ui-color-background-gray:#f6f7f9;--seed-ui-color-background-chips:#f6f7f9;--seed-ui-color-background-placeholder:#e0e5ea;--seed-ui-color-background-guide:#e0e5ea;--seed-ui-color-background-focus:#191b1c;--seed-ui-color-icon-white:#fff;--seed-ui-color-icon-lite:#a6abaf;--seed-ui-color-icon-dark:#494f54;--seed-ui-color-icon-black:#191b1c;--seed-ui-color-line-white:#fff;--seed-ui-color-line-lite:#edf0f3;--seed-ui-color-line-medium:#c6ccd1;--seed-ui-color-line-dark:#494f54;--seed-ui-color-line-focus:#25292c;--seed-ui-color-toast-complete:#50bf50;--seed-ui-color-toast-error:#ef4444;--seed-ui-color-toast-caution:#fef08a;--seed-ui-color-misc-black-70:rgba(0,0,0,.7);--seed-ui-color-misc-black-40:rgba(0,0,0,.4);--seed-brand-color-primary:#50bf50;--seed-brand-color-secondary1:#bdffbd;--seed-brand-color-secondary2:#e9ffe9;--seed-brand-color-point1:#ef4444;--seed-brand-color-point2:#f87171;--seed-brand-color-point3:#fb923c;--seed-brand-color-point4:#fef08a;--seed-font-family-head:pretendard;--seed-font-family-title:pretendard;--seed-font-family-body:pretendard;--seed-font-family-paragraph:pretendard;--seed-font-family-caption:pretendard;--seed-font-weight-400:regular;--seed-font-weight-500:medium;--seed-font-weight-700:bold;--seed-font-size-xs:12px;--seed-font-size-s:14px;--seed-font-size-sm:16px;--seed-font-size-md:18px;--seed-font-size-lg:20px;--seed-font-size-xl:22px;--seed-font-size-2xl:24px;--seed-font-size-4xl:32px;--seed-font-size-5xl:40px;--seed-font-size-6xl:48px;--seed-font-size-3xl:28px;--seed-font-line-height-sm:16px;--seed-font-line-height-2xl:24px;--seed-font-line-height-4xl:32px;--seed-font-line-height-5xl:40px;--seed-font-line-height-6xl:48px;--seed-font-line-height-lg:20px;--seed-font-line-height-3xl:28px;--seed-font-line-height-s:14px;--seed-spacing-200:4px;--seed-spacing-400:12px;--seed-spacing-500:16px;--seed-spacing-700:24px;--seed-spacing-800:28px;--seed-spacing-1000:40px;--seed-spacing-1100:48px;--seed-spacing-1200:56px;--seed-spacing-1300:64px;--seed-spacing-1400:72px;--seed-rounding-100:0px;--seed-rounding-200:4px;--seed-rounding-300:8px;--seed-rounding-400:12px;--seed-rounding-500:16px;--seed-rounding-600:20px;--seed-rounding-700:24px;--seed-rounding-800:28px;--seed-rounding-900:32px;--seed-rounding-1000:40px;--seed-rounding-1100:48px;--seed-rounding-1200:56px;--seed-rounding-1300:64px;--seed-rounding-1400:72px;--seed-color-brand-primary:#3a8dff;--seed-color-brand-secondary:#637a99;--seed-color-brand-caution:#f3b132;--seed-color-brand-error:#ff6b6b;--seed-color-brand-success:#00c896;--seed-color-brand-warning:#ffb03a;--seed-color-neatural-neutral100:#f7f9fc;--seed-color-neatural-neutral200:#e3e8ef;--seed-color-neatural-neutral300:#cdd5df;--seed-color-neatural-neutral400:#a8b2bf;--seed-color-neatural-neutral500:#7c8899;--seed-color-neatural-neutral600:#5a6777;--seed-color-neatural-neutral700:#414c59;--seed-color-neatural-neutral800:#2a3038;--seed-font-weight-title1:700;--seed-font-weight-subtitle1:700;--seed-font-weight-body1:700;--seed-font-line-height-title1:140%;--seed-font-line-height-subtitle1:140%;--seed-font-line-height-body1:140%;--seed-font-letter-spacing-title1:-2%;--seed-font-letter-spacing-subtitle1:-2%;--seed-font-letter-spacing-body1:-2%;--seed-font-size-title1:24px;--seed-font-size-subtitle1:20px;--seed-font-size-body1:16px}.box{box-sizing:border-box}:root{--button-loading-dot-delay:0.2s;--button-loading-dot-duration:1.4s}.button{border:none;border-radius:var(--seed-spacing-300);box-sizing:border-box;cursor:pointer;font-weight:500;position:relative;transition:all .2s ease-in-out}.button:disabled{cursor:not-allowed}.button.button--loading{cursor:wait}.button--size-lg{font-size:16px;gap:var(--seed-spacing-300);height:52px;padding:var(--seed-spacing-500) var(--seed-spacing-700)}.button--size-md{font-size:14px;gap:var(--seed-spacing-300);height:48px;padding:var(--seed-spacing-300) var(--seed-spacing-400)}.button--type-solid-green{background-color:var(--seed-brand-color-primary);color:var(--seed-ui-color-line-white)}.button--type-solid-green:active:not(:disabled),.button--type-solid-green:hover:not(:disabled){background-color:var(--seed-palette-color-green-700)}.button--type-solid-green.disabled{background-color:var(--seed-ui-color-background-guide);border-color:var(--seed-ui-color-background-guide);color:var(--seed-ui-color-text-disabled)}.button--type-solid-red{background-color:var(--seed-brand-color-point2);color:var(--seed-ui-color-line-white)}.button--type-solid-red:active:not(:disabled),.button--type-solid-red:hover:not(:disabled){background-color:var(--seed-palette-color-red-600)}.button--type-solid-red.disabled{background-color:var(--seed-ui-color-background-guide);border-color:var(--seed-ui-color-background-guide);color:var(--seed-ui-color-text-disabled)}.button--type-outline-green{background-color:var(--seed-ui-color-background-container);border:1px solid var(--seed-brand-color-primary);color:var(--seed-brand-color-primary)}.button--type-outline-green:active:not(:disabled),.button--type-outline-green:hover:not(:disabled){background-color:var(--seed-brand-color-secondary2)}.button--type-outline-green.disabled{background-color:var(--seed-ui-color-background-white);border-color:var(---seed-ui-color-line-lite);color:var(--seed-ui-color-text-disabled)}.button--type-outline-gray{background-color:var(--seed-ui-color-background-white);border:1px solid var(--seed-ui-color-line-dark);color:var(--seed-ui-color-text-black)}.button--type-outline-gray:active:not(:disabled),.button--type-outline-gray:hover:not(:disabled){background-color:var(--seed-ui-color-background-gray)}.button--type-outline-gray.disabled{background-color:var(--seed-ui-color-background-white);border-color:var(---seed-ui-color-line-lite);color:var(--seed-ui-color-text-disabled)}.button--type-text-none{background-color:transparent;color:var(--seed-ui-color-text-black)}.button--type-text-none:active:not(:disabled),.button--type-text-none:hover:not(:disabled){color:var(--seed-ui-color-text-lite)}.button--type-text-none.disabled{color:var(--seed-ui-color-text-disabled)}.button--display-inline{display:inline-flex}.button--display-block{display:flex}.button--content,.button--display-full{display:flex;width:100%}.button--content{align-items:center;flex-direction:row;justify-content:center;opacity:1;transition:opacity .2s}.button--content.button--content--hidden{opacity:0}.button--loading{align-items:center;display:flex;gap:12px;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.button--loading-dot{animation:loadingDot var(--button-loading-dot-duration) infinite;background-color:currentColor;border-radius:50%;height:8px;opacity:0;width:8px}.button--loading-dot:nth-child(2){animation-delay:var(--button-loading-dot-delay)}.button--loading-dot:nth-child(3){animation-delay:calc(var(--button-loading-dot-delay)*2)}@keyframes loadingDot{0%,20%{opacity:0;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}80%,to{opacity:0;transform:translateY(0)}}:root{--font-weight-regular:400;--font-weight-medium:500;--font-weight-bold:700;--font-size-heading:24px;--font-size-body:16px;--font-size-text:14px;--line-height-default:1.4;--font-display-block:block;--font-display-inline-block:inline-block;--font-display-inline:inline;--font-display-flex:flex;--font-display-inline-flex:inline-flex;--font-display-none:none}.text{box-sizing:border-box}.text--font-weight-regular{font-weight:var(--font-weight-regular)}.text--font-weight-medium{font-weight:var(--font-weight-medium)}.text--font-weight-bold{font-weight:var(--font-weight-bold)}.text--typography-heading{font-size:var(--font-size-heading);line-height:var(--line-height-default)}.text--typography-body{font-size:var(--font-size-body);line-height:var(--line-height-default)}.text--typography-text{font-size:var(--font-size-text);line-height:var(--line-height-default)}.text--single-line{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text--multi-line{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.text--display-block{display:var(--font-display-block)}.text--display-inline-block{display:var(--font-display-inline-block)}.text--display-inline{display:var(--font-display-inline)}.text--display-flex{display:var(--font-display-flex)}.text--display-inline-flex{display:var(--font-display-inline-flex)}.text--display-none{display:var(--font-display-none)}:root{--seed-palette-color-base-900:#25292c}.overlay{animation:overlayShow .25s cubic-bezier(.3,0,0,1)}.dialog-content{animation:contentShow .3s cubic-bezier(.3,0,0,1);background-color:#fff;border-radius:6px;box-shadow:0 10px 38px -10px rgba(14,18,22,.35),0 10px 20px -15px rgba(14,18,22,.2);left:50%;max-height:85vh;max-width:450px;padding:25px;position:fixed;top:50%;transform:translate(-50%,-50%);width:90vw}.dialog-handle{margin-top:10px;width:45px}@keyframes overlayShow{0%{opacity:0}to{opacity:1}}@keyframes contentShow{0%{opacity:0;transform:translate(-50%,-48%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.dialog-content--theme-light{background-color:var(--seed-palette-color-base-100)}.dialog-content--theme-dark{background-color:var(--seed-palette-color-base-900)}.dialog-content--radius-none{border-radius:var(--seed-spacing-100)}.dialog-content--radius-small{border-radius:var(--seed-spacing-300)}.dialog-content--radius-medium{border-radius:var(--seed-spacing-600)}.dialog-content--radius-large{border-radius:var(--seed-spacing-900)}.popover-content{animation-duration:.4s;animation-timing-function:cubic-bezier(.16,1,.3,1);background-color:#fff;border-radius:4px;box-shadow:0 10px 38px -10px rgba(14,18,22,.35),0 10px 20px -15px rgba(14,18,22,.2);padding:20px;width:260px;will-change:transform,opacity}:root{--seed-palette-color-base-500:#c6ccd1;--seed-palette-color-base-1000:#191b1c;--seed-palette-color-blue-200:#e0f2fe;--seed-palette-color-blue-800:#0369a1;--seed-palette-color-blue-1000:#0c4a6e}.SelectTrigger{align-items:center;background-color:#fff;border-radius:4px;box-shadow:0 2px 10px var(--seed-palette-color-base-1000);color:var(--seed-palette-color-base-1000);display:inline-flex;font-size:13px;gap:5px;height:35px;justify-content:center;line-height:1;padding:0 15px}.SelectTrigger:hover{background-color:var(--seed-palette-color-blue-200)}.SelectTrigger:focus{box-shadow:0 0 0 2px #000}.SelectTrigger[data-placeholder]{color:var(--seed-palette-color-base-800)}.SelectIcon{color:var(--seed-palette-color-base-1000)}.SelectContent{background-color:#fff;border-radius:6px;box-shadow:0 10px 38px -10px rgba(22,23,24,.35),0 10px 20px -15px rgba(22,23,24,.2);overflow:hidden}.SelectViewport{padding:5px}.SelectItem{align-items:center;border-radius:3px;color:var(--seed-palette-color-base-1000);display:flex;font-size:13px;height:25px;line-height:1;padding:0 35px 0 25px;position:relative;user-select:none}.SelectItem[data-disabled]{color:var(--seed-palette-color-blue-800);pointer-events:none}.SelectItem[data-highlighted]{background-color:var(--seed-palette-color-base-800);color:var(--seed-color-violet-1);outline:none}.SelectLabel{color:var(--seed-palette-color-blue-1000);font-size:12px;line-height:25px;padding:0 25px}.SelectSeparator{background-color:var(--seed-palette-color-base-500);height:1px;margin:5px}.SelectItemIndicator{display:inline-flex;left:0;position:absolute;width:25px}.SelectItemIndicator,.SelectScrollButton{align-items:center;justify-content:center}.SelectScrollButton{background-color:#fff;color:var(--seed-palette-color-base-1000);cursor:default;display:flex;height:25px}:root{--switch-width:52px;--switch-height:32px;--switch-thumb-width:28px;--switch-thumb-height:28px;--switch-background-color:#b7c2d0;--switch-checked-background-color:#3a8dff;--switch-thumb-background-color:#fff}.switch{background-color:var(--switch-background-color);border-radius:16px;height:var(--switch-height);position:relative;width:var(--switch-width)}.switch[data-state=checked]{background-color:var(--switch-checked-background-color)}.switch-thumb{background-color:var(--switch-thumb-background-color);border-radius:14px;display:block;height:var(--switch-thumb-height);transform:translateX(2px);transition:transform .1s;width:var(--switch-thumb-width);will-change:transform}.switch-thumb[data-state=checked]{transform:translateX(calc(var(--switch-width) - var(--switch-thumb-width) - 2px))}:root{--input-transition:0.2s ease-in-out}.input-wrapper{align-items:center;display:flex;position:relative;width:100%}.input-wrapper.input--display-line .input{border:1px solid var(--seed-ui-color-line-medium);border-radius:0}.input-wrapper.input--display-line .input:focus,.input-wrapper.input--display-line .input:hover:not(:disabled){border-bottom-color:var(--seed-brand-color-primary)}.input-wrapper.input--display-box .input{border:1px solid var(--seed-ui-color-line-medium);border-radius:var(--seed-spacing-300)}.input-wrapper.input--display-box .input:focus,.input-wrapper.input--display-box .input:hover:not(:disabled){border-color:var(--seed-brand-color-primary)}.input-wrapper.input--error .input,.input-wrapper.input--error .input:focus{border-color:var(--seed-brand-color-point2)}.input-wrapper.input--disabled{cursor:not-allowed;opacity:.5}.input-wrapper.input--disabled .input{border:1px solid var(--seed-ui-color-line-medium);color:var(--seed-ui-color-text-disabled)}.input{background:var(--seed-ui-color-background-white);color:var(--seed-ui-color-text-black);font-size:var(--seed-font-size-sm);height:var(--seed-font-line-height-lg);line-height:var(--seed-font-size-sm);padding:17px var(--seed-spacing-500);transition:all var(--input-transition);width:100%}.input:focus{outline:none}.input[type=file]{color:transparent;cursor:pointer}.input[type=file]::-webkit-file-upload-button{visibility:hidden;width:0}.input[type=file]:before{color:var(--seed-ui-color-text-lite);content:"파일 선택"}.input[type=file].has-file:before{color:var(--seed-ui-color-text-black);content:"파일 선택 완료"}.input[type=file]:disabled:before{background:var(--seed-ui-color-background-guide);color:var(--seed-ui-color-text-disabled);cursor:not-allowed}.input--action{background:none;border:none;color:var(--seed-ui-color-text-lite);cursor:pointer;position:absolute;right:var(--seed-spacing-500);top:50%;transform:translateY(-50%)}.input--action:hover:not(:disabled){color:var(--seed-ui-color-text-dark)}.input--action.input--action-link{height:24px}.input--action.input--close{height:16px}.tabs{display:flex;flex-direction:column;position:relative}.tabs--indicator,.tabs--list,.tabs--trigger{box-sizing:border-box}.tabs--list{background-color:#fff;height:35px;padding:0 20px}.tabs--list,.tabs--trigger{display:flex;position:relative}.tabs--trigger{align-items:center;flex:1;justify-content:center;padding:8px;z-index:1}.tabs--trigger div{font-size:14px;font-style:normal;font-weight:400;letter-spacing:-.28px;line-height:140%}.tabs--trigger[data-state=inactive]{color:#b7c2d0}.tabs--trigger[data-state=active]{color:#3a8dff}.floating-action-button{align-items:center;display:flex;justify-content:center;position:relative}.floating-action-button--button{align-items:center;border:none;border-radius:50%;cursor:pointer;display:flex;height:56px;justify-content:center;width:56px}.floating-action-button--action-button{background-color:#fff;box-shadow:0 0 5.6px 0 rgba(0,0,0,.04)}.floating-action-button--action-button:hover{background-color:#ebf4ff;transition:background-color .2s ease-in-out}.RadioContainer{flex-direction:column;gap:8px}.RadioContainer,.RadioWrapper{align-items:center;display:flex}.RadioWrapper{flex-direction:row}.RadioItem{border:1px solid #b7c2d0;border-radius:50%;cursor:pointer;flex-shrink:0;height:20px;margin:11px;position:relative;width:20px}.RadioItem:hover:not([data-disabled]),.RadioItem[data-state=checked],.RadioItem[data-state=checked]:hover{border-color:#3a8dff}.RadioItem[data-disabled]{border-color:#b7c2d0;cursor:not-allowed}.RadioIndicator{background-color:transparent;border-radius:50%;height:10px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:10px}.RadioItem[data-state=checked] .RadioIndicator{background-color:#3a8dff}.RadioItem[data-disabled] .RadioIndicator{background-color:#b7c2d0}.RadioLabel{align-items:center;cursor:pointer;display:flex;user-select:none}.RadioLabel:hover .RadioItem:not([data-disabled]){border-color:#3a8dff}.RadioLabelText{flex:1}.RadioLabel[aria-disabled=true]{cursor:not-allowed;opacity:.5}:root{--seed-palette-color-base-100:#fff;--seed-palette-color-base-800:#494f54;--seed-spacing-100:0px;--seed-spacing-300:8px;--seed-spacing-600:20px;--seed-spacing-900:32px}.overlay{background-color:rgba(0,0,0,.4);inset:0;position:fixed}.drawer-content{background-color:#fff;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;bottom:0;height:fit-content;left:0;max-height:calc(100dvh - 32px);outline:none;overflow-y:hidden;position:fixed;right:0}.drawer-content-inner{-webkit-overflow-scrolling:touch;max-height:calc(100dvh - 68px);overflow-y:auto}.bottomsheet-container--radius-none{border-top:var(--seed-spacing-100)}.bottomsheet-container--radius-small{border-radius:var(--seed-spacing-300)}.bottomsheet-container--radius-medium{border-radius:var(--seed-spacing-700)}.bottomsheet-container--radius-large{border-radius:var(--seed-spacing-900)}.bottomsheet-container--theme-light{background-color:var(--seed-palette-color-base-100)}.bottomsheet-container--theme-dark{background-color:var(--seed-palette-color-base-800)}.drawer-handle{height:36px;width:100%}@keyframes toast-enter-top{0%{opacity:.5;transform:translate3d(0,-200%,0) scale(.6)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes toast-exit-top{0%{opacity:1;transform:translateZ(-1px) scale(1)}to{opacity:0;transform:translate3d(0,-150%,-1px) scale(.6)}}@keyframes toast-enter-bottom{0%{opacity:.5;transform:translate3d(0,200%,0) scale(.6)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes toast-exit-bottom{0%{opacity:1;transform:translateZ(-1px) scale(1)}to{opacity:0;transform:translate3d(0,150%,-1px) scale(.6)}}@keyframes toast-fade-in{0%{opacity:0}to{opacity:1}}@keyframes toast-fade-out{0%{opacity:1}to{opacity:0}}.toast--content{align-items:center;background:var(--seed-ui-color-misc-black-70);border-radius:var(--seed-rounding-300);box-shadow:0 3px 10px rgba(0,0,0,.1),0 3px 3px rgba(0,0,0,.05);box-sizing:border-box;color:#363636;display:flex;gap:var(--seed-spacing-600);justify-content:space-between;min-height:56px;opacity:0;padding:var(--seed-spacing-500);pointer-events:auto;position:relative;transition:transform .23s cubic-bezier(.21,1.02,.73,1);will-change:transform}.toast--content.top.visible{animation:toast-enter-top .35s cubic-bezier(.21,1.02,.73,1) forwards}.toast--content.top.hidden{animation:toast-exit-top .4s cubic-bezier(.06,.71,.55,1) forwards}.toast--content.bottom.visible{animation:toast-enter-bottom .35s cubic-bezier(.21,1.02,.73,1) forwards}.toast--content.bottom.hidden{animation:toast-exit-bottom .4s cubic-bezier(.06,.71,.55,1) forwards}@media (prefers-reduced-motion:reduce){.toast--content.visible{animation:toast-fade-in .35s ease-in forwards}.toast--content.hidden{animation:toast-fade-out .4s ease-out forwards}}.toast--type-message{gap:var(--seed-spacing-300)}.toast--type-icon,.toast--type-message{align-items:center;display:flex}.toast--type-icon[data-toast-type=default]{display:none}.toast--message{color:var(--seed-ui-color-text-white);font-size:var(--seed-font-size-s);font-weight:var(--seed-font-weight-400);line-height:var(--seed-font-line-height-sm)}.toast--action-link{text-decoration:underline;text-underline-offset:2px}.toast--action-button,.toast--action-link{color:var(--seed-ui-color-text-white);cursor:pointer;flex-shrink:0;font-size:var(--seed-font-size-xs);font-weight:var(--seed-font-weight-400)}.toast--action-button{align-items:center;background-color:var(--seed-brand-color-primary);border-radius:var(--seed-rounding-400);display:flex;justify-content:center;padding:var(--seed-spacing-200) var(--seed-spacing-300)}.toaster-content{bottom:0;left:0;pointer-events:none;position:fixed;right:0;top:0;z-index:9999}.toast-wrapper{position:absolute}.toast-wrapper>*{transition:all .23s cubic-bezier(.21,1.02,.73,1)}.toast-wrapper.toast-wrapper--top-right{right:0}.toast-wrapper.toast-wrapper--top-left{left:0}.toast-wrapper.toast-wrapper--top-center{left:50%}.toast-wrapper.toast-wrapper--bottom-right{bottom:0;right:0}.toast-wrapper.toast-wrapper--bottom-left{bottom:0;left:0}.toast-wrapper.toast-wrapper--bottom-center{bottom:0;left:50%}.popup{animation:popup-content-show .15s cubic-bezier(.16,1,.3,1);background-color:var(--seed-ui-color-background-white);border-radius:16px;box-shadow:0 4px 16px 0 hsla(0,0%,43%,.07);left:50%;max-height:85vh;max-width:450px;overflow-y:auto;padding:24px 16px;position:fixed;top:50%;transform:translate(-50%,-50%);width:100%}.popup:focus{outline:none}.popup--actions{display:flex;gap:8px;justify-content:flex-end;margin-top:24px}.popup--actions>*{flex:1}.popup--actions-typeB{display:flex;gap:8px;justify-content:space-between}.popup--actions-left{flex:0 0 auto;min-width:76px}.popup--actions-right{flex:1 1 auto}@keyframes popup-overlay-show{0%{opacity:0}to{opacity:1}}@keyframes popup-content-show{0%{opacity:0;transform:translate(-50%,-48%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.visually-hidden{clip:rect(0 0 0 0);word-wrap:normal;border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.DropdownMenuTriggerContent{align-items:center;border:1px solid rgba(0,0,0,.2);display:flex;flex-direction:row;gap:10px;justify-content:space-between;min-width:170px;padding:11px 20px}.DropdownMenuTriggerContentText{font-size:14px;font-weight:500;letter-spacing:-.28px;line-height:1.4;width:calc(100% - 40px)}.DropdownMenuContent{animation-duration:.4s;animation-timing-function:cubic-bezier(.16,1,.3,1);background-color:#fff;border-bottom:1px solid rgba(0,0,0,.2);border-radius:0 0 4px 4px;border-top:none;will-change:transform,opacity}.DropdownMenuContent[data-side=top]{animation-name:slideDownAndFade}.DropdownMenuItem{align-items:center;border-left:1px solid rgba(0,0,0,.2);border-right:1px solid rgba(0,0,0,.2);cursor:pointer;display:flex;font-size:14px;font-weight:400;letter-spacing:-.28px;line-height:1.4;min-width:170px;outline:none;padding:11px 20px;transition:color .2s ease-in-out;user-select:none}.DropdownMenuItem--selected,.DropdownMenuItem:hover{border-left:4px solid #3a8dff;color:#3a8dff;padding-left:17px}.DropdownMenuItem[data-disabled]{pointer-events:none}.DropdownMenuItem[data-highlighted]{border-left:4px solid #3a8dff;color:#3a8dff;padding-left:17px}@keyframes slideUpAndFade{0%{opacity:0}to{opacity:1}}.ripple-layer{border-radius:inherit;bottom:0;left:0;overflow:hidden;pointer-events:inherit;position:absolute;right:0;top:0;will-change:transform}.ripple-circle{animation-name:ripple;backface-visibility:hidden;border-radius:100%;opacity:.75;pointer-events:none;position:absolute;transform:scale(0);transform-style:preserve-3d;will-change:transform,opacity}@keyframes ripple{to{opacity:0;transform:scale(2)}}:root{--tile-range-background:#ebf4ff;--tile-range-start-background:#3a8dff;--tile-range-end-background:#3a8dff;--tile-range-start-color:#fff;--tile-range-end-color:#fff;--tile-range-hover-background:#bbdefb}.month-calendar{background:var(--calendar-background);display:flex;flex-direction:column;overflow:hidden;user-select:none;width:360px}.month-calendar *{box-sizing:border-box}.month-calendar--transition-container{min-height:280px;overflow:hidden;position:relative}.month-calendar--slide-content{backface-visibility:hidden;left:0;position:absolute;right:0;top:0;width:100%;will-change:transform}.month-calendar--header{align-items:center;display:flex;gap:10px;justify-content:center}.month-calendar--header-title{background-color:var(--tile-background);color:var(--header-font-color);font-size:var(--header-font-size);font-weight:var(--header-font-weight);min-width:80px;text-align:center}.month-calendar--header-button{align-items:center;cursor:pointer;display:inline-flex;height:40px;justify-content:center;width:40px}.month-calendar--week-numbers{align-items:center;display:flex;justify-content:space-between;padding:0 20px;pointer-events:none}.month-calendar--days-container{display:flex;flex-direction:column;gap:8px;min-height:240px;padding:0 20px}.month-calendar--week-line{align-items:center;display:flex;justify-content:space-between}.month-calendar--tile{align-items:center;background:transparent;border:none;color:var(--tile-day-color);cursor:pointer;display:flex;flex:1;font-size:var(--tile-font-size);height:var(--tile-size);justify-content:center;position:relative;width:var(--tile-size)}.month-calendar--tile--week-number{background-color:var(--tile-week-number-background);color:var(--tile-week-number-color);font-weight:400;height:var(--tile-week-number-size);width:var(--tile-week-number-size)}.month-calendar--tile--day .month-calendar--tile-day-background{border-radius:50%;height:var(--tile-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:background-color .25s cubic-bezier(.4,0,.2,1) 0ms;width:var(--tile-size);z-index:-1}.month-calendar--tile--day:hover .month-calendar--tile-day-background{background-color:var(--tile-day-hover-background)}.month-calendar--tile--disabled{color:#b7c2d0!important;pointer-events:none!important}.month-calendar--tile--today{color:var(--tile-day-today-color)}.month-calendar--tile--today .month-calendar--tile--selected{color:var(--tile-day-today-selected-color)!important}.month-calendar--tile--selected{color:var(--tile-day-selected-color)}.month-calendar--tile--selected .month-calendar--tile-day-background{background:var(--tile-day-selected-background)}.month-calendar--tile--selected:hover .month-calendar--tile-day-background{background-color:var(--tile-day-selected-hover-background)}.month-calendar--tile--other-month{color:#b7c2d0!important;pointer-events:none!important}.month-calendar--tile--other-month .month-calendar--tile--only-view-month-days{visibility:hidden}.month-calendar--tile--in-range{background-color:var(--tile-range-background);border-radius:0;position:relative}.month-calendar--tile--in-range:hover{background-color:var(--tile-range-hover-background)}.month-calendar--tile--in-range:before{background-color:var(--tile-range-background);bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:-1}.month-calendar--tile--range-start{background-color:var(--tile-range-start-background);border-radius:50% 0 0 50%;color:var(--tile-range-start-color)}.month-calendar--tile--range-start:before{display:none}.month-calendar--tile--range-end{background-color:var(--tile-range-end-background);border-radius:0 50% 50% 0;color:var(--tile-range-end-color)}.month-calendar--tile--range-end:before{display:none}.calendar-slide-transition--container{overflow:hidden;position:relative}.calendar-slide-transition--container--month{min-height:280px}.calendar-slide-transition--container--week{min-height:80px}.calendar-slide-transition--content{backface-visibility:hidden;left:0;position:absolute;right:0;top:0;width:100%;will-change:transform}:root{--calendar-background:#fff;--header-font-size:20px;--header-font-color:#000;--header-font-weight:600;--tile-size:40px;--tile-font-size:14px;--tile-day-color:#000;--tile-day-background:#fff;--tile-day-hover-background:#f5f5f5;--tile-day-selected-background:#3a8dff;--tile-day-selected-color:#fff;--tile-day-selected-hover-background:#3a8dff;--tile-day-today-color:#3a8dff;--tile-day-today-selected-color:#fff;--tile-week-number-size:40px;--tile-week-number-color:#64748b;--tile-week-number-background:#fff}.week-calendar{background:var(--calendar-background);display:flex;flex-direction:column;overflow:hidden;user-select:none;width:320px}.week-calendar *{box-sizing:border-box}.week-calendar--header{align-items:center;display:flex;gap:10px;justify-content:center}.week-calendar--header-title{background-color:var(--tile-background);color:var(--header-font-color);font-size:var(--header-font-size);font-weight:var(--header-font-weight);min-width:80px;text-align:center}.week-calendar--header-button{align-items:center;cursor:pointer;display:inline-flex;height:40px;justify-content:center;width:40px}.week-calendar--week-numbers{align-items:center;display:flex;justify-content:space-between;pointer-events:none}.week-calendar--days-container{display:flex;flex-direction:column;gap:8px;min-height:80px}.week-calendar--week-line{align-items:center;display:flex;justify-content:space-between}.week-calendar--below-tile-slot{margin-top:6cm}.week-calendar--below-tile-slot,.week-calendar--tile{align-items:center;display:flex;justify-content:center}.week-calendar--tile{background:transparent;border:none;color:var(--tile-day-color);cursor:pointer;flex:1;font-size:var(--tile-font-size);height:var(--tile-size);position:relative;width:var(--tile-size)}.week-calendar--tile--week-number{background-color:var(--tile-week-number-background);color:var(--tile-week-number-color);font-weight:400;height:var(--tile-week-number-size);width:var(--tile-week-number-size)}.week-calendar--tile--day .week-calendar--tile-day-background{border-radius:50%;height:var(--tile-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:background-color .25s cubic-bezier(.4,0,.2,1) 0ms;width:var(--tile-size);z-index:-1}.week-calendar--tile--day:hover .week-calendar--tile-day-background{background-color:var(--tile-day-hover-background)}.week-calendar--tile--disabled{color:#b7c2d0!important;pointer-events:none!important}.week-calendar--tile--today{color:var(--tile-day-today-color)}.week-calendar--tile--today.week-calendar--tile--selected{color:var(--tile-day-today-selected-color)!important}.week-calendar--tile--selected{color:var(--tile-day-selected-color)}.week-calendar--tile--selected .week-calendar--tile-day-background{background:var(--tile-day-selected-background)}.week-calendar--tile--selected:hover .week-calendar--tile-day-background{background-color:var(--tile-day-selected-hover-background)}
2
+ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--seed-palette-color-base-200:#f6f7f9;--seed-palette-color-base-300:#edf0f3;--seed-palette-color-base-400:#e0e5ea;--seed-palette-color-base-600:#a6abaf;--seed-palette-color-base-700:#7b8287;--seed-palette-color-blue-100:#f0f9ff;--seed-palette-color-blue-300:#bae6fd;--seed-palette-color-blue-400:#7dd3fc;--seed-palette-color-blue-500:#38bdf8;--seed-palette-color-blue-600:#0ea5e9;--seed-palette-color-blue-700:#0284c7;--seed-palette-color-blue-900:#075985;--seed-palette-color-purple-100:#f9fafe;--seed-palette-color-purple-200:#ecedfc;--seed-palette-color-purple-300:#d0d2f7;--seed-palette-color-purple-400:#b5b8f2;--seed-palette-color-purple-500:#9a9eec;--seed-palette-color-purple-600:#7a82e4;--seed-palette-color-purple-700:#6167c9;--seed-palette-color-purple-800:#5756a6;--seed-palette-color-purple-900:#494582;--seed-palette-color-purple-1000:#38325d;--seed-palette-color-red-100:#fef2f2;--seed-palette-color-red-200:#fee2e2;--seed-palette-color-red-300:#fecaca;--seed-palette-color-red-400:#fca5a5;--seed-palette-color-red-500:#f87171;--seed-palette-color-red-600:#ef4444;--seed-palette-color-red-700:#dc2626;--seed-palette-color-red-800:#b91c1c;--seed-palette-color-red-900:#991b1b;--seed-palette-color-red-1000:#7f1d1d;--seed-palette-color-orange-100:#fff7ed;--seed-palette-color-orange-200:#ffedd5;--seed-palette-color-orange-300:#fed7aa;--seed-palette-color-orange-400:#fdba74;--seed-palette-color-orange-500:#fb923c;--seed-palette-color-orange-600:#f97316;--seed-palette-color-orange-700:#ea580c;--seed-palette-color-orange-800:#c2410c;--seed-palette-color-orange-900:#9a3412;--seed-palette-color-orange-1000:#7c2d12;--seed-palette-color-yellow-100:#fefce8;--seed-palette-color-yellow-200:#fef9c3;--seed-palette-color-yellow-300:#fef08a;--seed-palette-color-yellow-400:#fde047;--seed-palette-color-yellow-500:#facc15;--seed-palette-color-yellow-600:#eab308;--seed-palette-color-yellow-700:#ca8a04;--seed-palette-color-yellow-800:#a16207;--seed-palette-color-yellow-900:#854d0e;--seed-palette-color-yellow-1000:#713f12;--seed-palette-color-green-100:#e9ffe9;--seed-palette-color-green-200:#d5ffd5;--seed-palette-color-green-300:#bdffbd;--seed-palette-color-green-400:#89ee89;--seed-palette-color-green-500:#60e060;--seed-palette-color-green-600:#50bf50;--seed-palette-color-green-700:#2fa32f;--seed-palette-color-green-800:#1e861e;--seed-palette-color-green-900:#156015;--seed-palette-color-green-1000:#063f06;--seed-ui-color-text-white:#fff;--seed-ui-color-text-disabled:#c6ccd1;--seed-ui-color-text-lite:#a6abaf;--seed-ui-color-text-dark:#494f54;--seed-ui-color-text-black:#191b1c;--seed-ui-color-background-white:#fff;--seed-ui-color-background-container:#fff;--seed-ui-color-background-gray:#f6f7f9;--seed-ui-color-background-chips:#f6f7f9;--seed-ui-color-background-placeholder:#e0e5ea;--seed-ui-color-background-guide:#e0e5ea;--seed-ui-color-background-focus:#191b1c;--seed-ui-color-icon-white:#fff;--seed-ui-color-icon-lite:#a6abaf;--seed-ui-color-icon-dark:#494f54;--seed-ui-color-icon-black:#191b1c;--seed-ui-color-line-white:#fff;--seed-ui-color-line-lite:#edf0f3;--seed-ui-color-line-medium:#c6ccd1;--seed-ui-color-line-dark:#494f54;--seed-ui-color-line-focus:#25292c;--seed-ui-color-toast-complete:#50bf50;--seed-ui-color-toast-error:#ef4444;--seed-ui-color-toast-caution:#fef08a;--seed-ui-color-misc-black-70:rgba(0,0,0,.7);--seed-ui-color-misc-black-40:rgba(0,0,0,.4);--seed-brand-color-primary:#50bf50;--seed-brand-color-secondary1:#bdffbd;--seed-brand-color-secondary2:#e9ffe9;--seed-brand-color-point1:#ef4444;--seed-brand-color-point2:#f87171;--seed-brand-color-point3:#fb923c;--seed-brand-color-point4:#fef08a;--seed-font-family-head:pretendard;--seed-font-family-title:pretendard;--seed-font-family-body:pretendard;--seed-font-family-paragraph:pretendard;--seed-font-family-caption:pretendard;--seed-font-weight-400:regular;--seed-font-weight-500:medium;--seed-font-weight-700:bold;--seed-font-size-xs:12px;--seed-font-size-s:14px;--seed-font-size-sm:16px;--seed-font-size-md:18px;--seed-font-size-lg:20px;--seed-font-size-xl:22px;--seed-font-size-2xl:24px;--seed-font-size-4xl:32px;--seed-font-size-5xl:40px;--seed-font-size-6xl:48px;--seed-font-size-3xl:28px;--seed-font-line-height-sm:16px;--seed-font-line-height-2xl:24px;--seed-font-line-height-4xl:32px;--seed-font-line-height-5xl:40px;--seed-font-line-height-6xl:48px;--seed-font-line-height-lg:20px;--seed-font-line-height-3xl:28px;--seed-font-line-height-s:14px;--seed-spacing-200:4px;--seed-spacing-400:12px;--seed-spacing-500:16px;--seed-spacing-700:24px;--seed-spacing-800:28px;--seed-spacing-1000:40px;--seed-spacing-1100:48px;--seed-spacing-1200:56px;--seed-spacing-1300:64px;--seed-spacing-1400:72px;--seed-rounding-100:0px;--seed-rounding-200:4px;--seed-rounding-300:8px;--seed-rounding-400:12px;--seed-rounding-500:16px;--seed-rounding-600:20px;--seed-rounding-700:24px;--seed-rounding-800:28px;--seed-rounding-900:32px;--seed-rounding-1000:40px;--seed-rounding-1100:48px;--seed-rounding-1200:56px;--seed-rounding-1300:64px;--seed-rounding-1400:72px;--seed-color-brand-primary:#3a8dff;--seed-color-brand-secondary:#637a99;--seed-color-brand-caution:#f3b132;--seed-color-brand-error:#ff6b6b;--seed-color-brand-success:#00c896;--seed-color-brand-warning:#ffb03a;--seed-color-neatural-neutral100:#f7f9fc;--seed-color-neatural-neutral200:#e3e8ef;--seed-color-neatural-neutral300:#cdd5df;--seed-color-neatural-neutral400:#a8b2bf;--seed-color-neatural-neutral500:#7c8899;--seed-color-neatural-neutral600:#5a6777;--seed-color-neatural-neutral700:#414c59;--seed-color-neatural-neutral800:#2a3038;--seed-font-weight-title1:700;--seed-font-weight-subtitle1:700;--seed-font-weight-body1:700;--seed-font-line-height-title1:140%;--seed-font-line-height-subtitle1:140%;--seed-font-line-height-body1:140%;--seed-font-letter-spacing-title1:-2%;--seed-font-letter-spacing-subtitle1:-2%;--seed-font-letter-spacing-body1:-2%;--seed-font-size-title1:24px;--seed-font-size-subtitle1:20px;--seed-font-size-body1:16px}.box{box-sizing:border-box}:root{--button-loading-dot-delay:0.2s;--button-loading-dot-duration:1.4s}.button{border:none;border-radius:var(--seed-spacing-300);box-sizing:border-box;cursor:pointer;font-weight:500;position:relative;transition:all .2s ease-in-out}.button:disabled{cursor:not-allowed}.button.button--loading{cursor:wait}.button--size-lg{font-size:16px;gap:var(--seed-spacing-300);height:52px;padding:var(--seed-spacing-500) var(--seed-spacing-700)}.button--size-md{font-size:14px;gap:var(--seed-spacing-300);height:48px;padding:var(--seed-spacing-300) var(--seed-spacing-400)}.button--type-solid-green{background-color:var(--seed-brand-color-primary);color:var(--seed-ui-color-line-white)}.button--type-solid-green:active:not(:disabled),.button--type-solid-green:hover:not(:disabled){background-color:var(--seed-palette-color-green-700)}.button--type-solid-green.disabled{background-color:var(--seed-ui-color-background-guide);border-color:var(--seed-ui-color-background-guide);color:var(--seed-ui-color-text-disabled)}.button--type-solid-red{background-color:var(--seed-brand-color-point2);color:var(--seed-ui-color-line-white)}.button--type-solid-red:active:not(:disabled),.button--type-solid-red:hover:not(:disabled){background-color:var(--seed-palette-color-red-600)}.button--type-solid-red.disabled{background-color:var(--seed-ui-color-background-guide);border-color:var(--seed-ui-color-background-guide);color:var(--seed-ui-color-text-disabled)}.button--type-outline-green{background-color:var(--seed-ui-color-background-container);border:1px solid var(--seed-brand-color-primary);color:var(--seed-brand-color-primary)}.button--type-outline-green:active:not(:disabled),.button--type-outline-green:hover:not(:disabled){background-color:var(--seed-brand-color-secondary2)}.button--type-outline-green.disabled{background-color:var(--seed-ui-color-background-white);border-color:var(---seed-ui-color-line-lite);color:var(--seed-ui-color-text-disabled)}.button--type-outline-gray{background-color:var(--seed-ui-color-background-white);border:1px solid var(--seed-ui-color-line-dark);color:var(--seed-ui-color-text-black)}.button--type-outline-gray:active:not(:disabled),.button--type-outline-gray:hover:not(:disabled){background-color:var(--seed-ui-color-background-gray)}.button--type-outline-gray.disabled{background-color:var(--seed-ui-color-background-white);border-color:var(---seed-ui-color-line-lite);color:var(--seed-ui-color-text-disabled)}.button--type-text-none{background-color:transparent;color:var(--seed-ui-color-text-black)}.button--type-text-none:active:not(:disabled),.button--type-text-none:hover:not(:disabled){color:var(--seed-ui-color-text-lite)}.button--type-text-none.disabled{color:var(--seed-ui-color-text-disabled)}.button--display-inline{display:inline-flex}.button--display-block{display:flex}.button--content,.button--display-full{display:flex;width:100%}.button--content{align-items:center;flex-direction:row;justify-content:center;opacity:1;transition:opacity .2s}.button--content.button--content--hidden{opacity:0}.button--loading{align-items:center;display:flex;gap:12px;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.button--loading-dot{animation:loadingDot var(--button-loading-dot-duration) infinite;background-color:currentColor;border-radius:50%;height:8px;opacity:0;width:8px}.button--loading-dot:nth-child(2){animation-delay:var(--button-loading-dot-delay)}.button--loading-dot:nth-child(3){animation-delay:calc(var(--button-loading-dot-delay)*2)}@keyframes loadingDot{0%,20%{opacity:0;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}80%,to{opacity:0;transform:translateY(0)}}:root{--font-weight-regular:400;--font-weight-medium:500;--font-weight-bold:700;--font-size-heading:24px;--font-size-body:16px;--font-size-text:14px;--line-height-default:1.4;--font-display-block:block;--font-display-inline-block:inline-block;--font-display-inline:inline;--font-display-flex:flex;--font-display-inline-flex:inline-flex;--font-display-none:none}.text{box-sizing:border-box}.text--font-weight-regular{font-weight:var(--font-weight-regular)}.text--font-weight-medium{font-weight:var(--font-weight-medium)}.text--font-weight-bold{font-weight:var(--font-weight-bold)}.text--typography-heading{font-size:var(--font-size-heading);line-height:var(--line-height-default)}.text--typography-body{font-size:var(--font-size-body);line-height:var(--line-height-default)}.text--typography-text{font-size:var(--font-size-text);line-height:var(--line-height-default)}.text--single-line{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text--multi-line{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.text--display-block{display:var(--font-display-block)}.text--display-inline-block{display:var(--font-display-inline-block)}.text--display-inline{display:var(--font-display-inline)}.text--display-flex{display:var(--font-display-flex)}.text--display-inline-flex{display:var(--font-display-inline-flex)}.text--display-none{display:var(--font-display-none)}:root{--seed-palette-color-base-900:#25292c}.overlay{animation:overlayShow .25s cubic-bezier(.3,0,0,1)}.dialog-content{animation:contentShow .3s cubic-bezier(.3,0,0,1);background-color:#fff;border-radius:6px;box-shadow:0 10px 38px -10px rgba(14,18,22,.35),0 10px 20px -15px rgba(14,18,22,.2);left:50%;max-height:85vh;max-width:450px;padding:25px;position:fixed;top:50%;transform:translate(-50%,-50%);width:90vw}.dialog-handle{margin-top:10px;width:45px}@keyframes overlayShow{0%{opacity:0}to{opacity:1}}@keyframes contentShow{0%{opacity:0;transform:translate(-50%,-48%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.dialog-content--theme-light{background-color:var(--seed-palette-color-base-100)}.dialog-content--theme-dark{background-color:var(--seed-palette-color-base-900)}.dialog-content--radius-none{border-radius:var(--seed-spacing-100)}.dialog-content--radius-small{border-radius:var(--seed-spacing-300)}.dialog-content--radius-medium{border-radius:var(--seed-spacing-600)}.dialog-content--radius-large{border-radius:var(--seed-spacing-900)}.popover-content{animation-duration:.4s;animation-timing-function:cubic-bezier(.16,1,.3,1);background-color:#fff;border-radius:4px;box-shadow:0 10px 38px -10px rgba(14,18,22,.35),0 10px 20px -15px rgba(14,18,22,.2);padding:20px;width:260px;will-change:transform,opacity}:root{--seed-palette-color-base-500:#c6ccd1;--seed-palette-color-base-1000:#191b1c;--seed-palette-color-blue-200:#e0f2fe;--seed-palette-color-blue-800:#0369a1;--seed-palette-color-blue-1000:#0c4a6e}.SelectTrigger{align-items:center;background-color:#fff;border-radius:4px;box-shadow:0 2px 10px var(--seed-palette-color-base-1000);color:var(--seed-palette-color-base-1000);display:inline-flex;font-size:13px;gap:5px;height:35px;justify-content:center;line-height:1;padding:0 15px}.SelectTrigger:hover{background-color:var(--seed-palette-color-blue-200)}.SelectTrigger:focus{box-shadow:0 0 0 2px #000}.SelectTrigger[data-placeholder]{color:var(--seed-palette-color-base-800)}.SelectIcon{color:var(--seed-palette-color-base-1000)}.SelectContent{background-color:#fff;border-radius:6px;box-shadow:0 10px 38px -10px rgba(22,23,24,.35),0 10px 20px -15px rgba(22,23,24,.2);overflow:hidden}.SelectViewport{padding:5px}.SelectItem{align-items:center;border-radius:3px;color:var(--seed-palette-color-base-1000);display:flex;font-size:13px;height:25px;line-height:1;padding:0 35px 0 25px;position:relative;user-select:none}.SelectItem[data-disabled]{color:var(--seed-palette-color-blue-800);pointer-events:none}.SelectItem[data-highlighted]{background-color:var(--seed-palette-color-base-800);color:var(--seed-color-violet-1);outline:none}.SelectLabel{color:var(--seed-palette-color-blue-1000);font-size:12px;line-height:25px;padding:0 25px}.SelectSeparator{background-color:var(--seed-palette-color-base-500);height:1px;margin:5px}.SelectItemIndicator{display:inline-flex;left:0;position:absolute;width:25px}.SelectItemIndicator,.SelectScrollButton{align-items:center;justify-content:center}.SelectScrollButton{background-color:#fff;color:var(--seed-palette-color-base-1000);cursor:default;display:flex;height:25px}:root{--switch-width:52px;--switch-height:32px;--switch-thumb-width:28px;--switch-thumb-height:28px;--switch-background-color:#b7c2d0;--switch-checked-background-color:#3a8dff;--switch-thumb-background-color:#fff}.switch{background-color:var(--switch-background-color);border-radius:16px;height:var(--switch-height);position:relative;width:var(--switch-width)}.switch[data-state=checked]{background-color:var(--switch-checked-background-color)}.switch-thumb{background-color:var(--switch-thumb-background-color);border-radius:14px;display:block;height:var(--switch-thumb-height);transform:translateX(2px);transition:transform .1s;width:var(--switch-thumb-width);will-change:transform}.switch-thumb[data-state=checked]{transform:translateX(calc(var(--switch-width) - var(--switch-thumb-width) - 2px))}:root{--input-transition:0.2s ease-in-out}.input-wrapper{display:flex;flex-direction:column;position:relative;width:100%}.input-wrapper.input--display-line .input{border:1px solid transparent;border-bottom:1px solid var(--seed-ui-color-line-medium);border-radius:0}.input-wrapper.input--display-line .input:focus,.input-wrapper.input--display-line .input:hover:not(:disabled){border-bottom-color:var(--seed-brand-color-primary)}.input-wrapper.input--display-line.input--error .input,.input-wrapper.input--display-line.input--error .input:focus{border-bottom-color:var(--seed-brand-color-point2)}.input-wrapper.input--display-line.input--disabled{cursor:not-allowed;opacity:.5}.input-wrapper.input--display-line.input--disabled .input{border-bottom-color:var(--seed-ui-color-line-medium);color:var(--seed-ui-color-text-disabled)}.input-wrapper.input--display-box .input{border:1px solid var(--seed-ui-color-line-medium);border-radius:var(--seed-spacing-300)}.input-wrapper.input--display-box .input:focus,.input-wrapper.input--display-box .input:hover:not(:disabled){border-color:var(--seed-brand-color-primary)}.input-wrapper.input--display-box.input--error .input,.input-wrapper.input--display-box.input--error .input:focus{border-color:var(--seed-brand-color-point2)}.input-wrapper.input--display-box.input--disabled{cursor:not-allowed;opacity:.5}.input-wrapper.input--display-box.input--disabled .input{border-color:var(--seed-ui-color-line-medium);color:var(--seed-ui-color-text-disabled)}.input-container{align-items:center;display:flex;position:relative;width:100%}.input{background:var(--seed-ui-color-background-white);color:var(--seed-ui-color-text-black);font-size:var(--seed-font-size-sm);height:var(--seed-font-line-height-lg);line-height:var(--seed-font-size-sm);padding:17px var(--seed-spacing-500);transition:all var(--input-transition);width:100%}.input:focus{outline:none}.input[type=file]{color:transparent;cursor:pointer}.input[type=file]::-webkit-file-upload-button{visibility:hidden;width:0}.input[type=file]:before{color:var(--seed-ui-color-text-lite);content:"파일 선택"}.input[type=file].has-file:before{color:var(--seed-ui-color-text-black);content:"파일 선택 완료"}.input[type=file]:disabled:before{background:var(--seed-ui-color-background-guide);color:var(--seed-ui-color-text-disabled);cursor:not-allowed}.input--action{background:none;border:none;color:var(--seed-ui-color-text-lite);cursor:pointer;position:absolute;right:var(--seed-spacing-500);top:50%;transform:translateY(-50%)}.input--action:hover:not(:disabled){color:var(--seed-ui-color-text-dark)}.input--action.input--action-link{height:24px}.input--action.input--close{height:16px}.input--error-message{color:var(--seed-brand-color-point2);display:block;font-size:var(--seed-font-size-xs);font-weight:500;letter-spacing:-.24px;line-height:140%;margin-top:4px}.tabs{display:flex;flex-direction:column;position:relative}.tabs--indicator,.tabs--list,.tabs--trigger{box-sizing:border-box}.tabs--list{background-color:#fff;height:35px;padding:0 20px}.tabs--list,.tabs--trigger{display:flex;position:relative}.tabs--trigger{align-items:center;flex:1;justify-content:center;padding:8px;z-index:1}.tabs--trigger div{font-size:14px;font-style:normal;font-weight:400;letter-spacing:-.28px;line-height:140%}.tabs--trigger[data-state=inactive]{color:#b7c2d0}.tabs--trigger[data-state=active]{color:#3a8dff}.floating-action-button{align-items:center;display:flex;justify-content:center;position:relative}.floating-action-button--button{align-items:center;border:none;border-radius:50%;cursor:pointer;display:flex;height:56px;justify-content:center;width:56px}.floating-action-button--action-button{background-color:#fff;box-shadow:0 0 5.6px 0 rgba(0,0,0,.04)}.floating-action-button--action-button:hover{background-color:#ebf4ff;transition:background-color .2s ease-in-out}.RadioContainer{flex-direction:column;gap:8px}.RadioContainer,.RadioWrapper{align-items:center;display:flex}.RadioWrapper{flex-direction:row}.RadioItem{border:1px solid #b7c2d0;border-radius:50%;cursor:pointer;flex-shrink:0;height:20px;margin:11px;position:relative;width:20px}.RadioItem:hover:not([data-disabled]),.RadioItem[data-state=checked],.RadioItem[data-state=checked]:hover{border-color:#3a8dff}.RadioItem[data-disabled]{border-color:#b7c2d0;cursor:not-allowed}.RadioIndicator{background-color:transparent;border-radius:50%;height:10px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:10px}.RadioItem[data-state=checked] .RadioIndicator{background-color:#3a8dff}.RadioItem[data-disabled] .RadioIndicator{background-color:#b7c2d0}.RadioLabel{align-items:center;cursor:pointer;display:flex;user-select:none}.RadioLabel:hover .RadioItem:not([data-disabled]){border-color:#3a8dff}.RadioLabelText{flex:1}.RadioLabel[aria-disabled=true]{cursor:not-allowed;opacity:.5}:root{--seed-palette-color-base-100:#fff;--seed-palette-color-base-800:#494f54;--seed-spacing-100:0px;--seed-spacing-300:8px;--seed-spacing-600:20px;--seed-spacing-900:32px}.overlay{background-color:rgba(0,0,0,.4);inset:0;position:fixed}.drawer-content{background-color:#fff;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;bottom:0;height:fit-content;left:0;max-height:calc(100dvh - 32px);outline:none;overflow-y:hidden;position:fixed;right:0}.drawer-content-inner{-webkit-overflow-scrolling:touch;max-height:calc(100dvh - 68px);overflow-y:auto}.bottomsheet-container--radius-none{border-top:var(--seed-spacing-100)}.bottomsheet-container--radius-small{border-radius:var(--seed-spacing-300)}.bottomsheet-container--radius-medium{border-radius:var(--seed-spacing-700)}.bottomsheet-container--radius-large{border-radius:var(--seed-spacing-900)}.bottomsheet-container--theme-light{background-color:var(--seed-palette-color-base-100)}.bottomsheet-container--theme-dark{background-color:var(--seed-palette-color-base-800)}.drawer-handle{height:36px;width:100%}@keyframes toast-enter-top{0%{opacity:.5;transform:translate3d(0,-200%,0) scale(.6)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes toast-exit-top{0%{opacity:1;transform:translateZ(-1px) scale(1)}to{opacity:0;transform:translate3d(0,-150%,-1px) scale(.6)}}@keyframes toast-enter-bottom{0%{opacity:.5;transform:translate3d(0,200%,0) scale(.6)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes toast-exit-bottom{0%{opacity:1;transform:translateZ(-1px) scale(1)}to{opacity:0;transform:translate3d(0,150%,-1px) scale(.6)}}@keyframes toast-fade-in{0%{opacity:0}to{opacity:1}}@keyframes toast-fade-out{0%{opacity:1}to{opacity:0}}.toast--content{align-items:center;background:var(--seed-ui-color-misc-black-70);border-radius:var(--seed-rounding-300);box-shadow:0 3px 10px rgba(0,0,0,.1),0 3px 3px rgba(0,0,0,.05);box-sizing:border-box;color:#363636;display:flex;gap:var(--seed-spacing-600);justify-content:space-between;min-height:56px;opacity:0;padding:var(--seed-spacing-500);pointer-events:auto;position:relative;transition:transform .23s cubic-bezier(.21,1.02,.73,1);will-change:transform}.toast--content.top.visible{animation:toast-enter-top .35s cubic-bezier(.21,1.02,.73,1) forwards}.toast--content.top.hidden{animation:toast-exit-top .4s cubic-bezier(.06,.71,.55,1) forwards}.toast--content.bottom.visible{animation:toast-enter-bottom .35s cubic-bezier(.21,1.02,.73,1) forwards}.toast--content.bottom.hidden{animation:toast-exit-bottom .4s cubic-bezier(.06,.71,.55,1) forwards}@media (prefers-reduced-motion:reduce){.toast--content.visible{animation:toast-fade-in .35s ease-in forwards}.toast--content.hidden{animation:toast-fade-out .4s ease-out forwards}}.toast--type-message{gap:var(--seed-spacing-300)}.toast--type-icon,.toast--type-message{align-items:center;display:flex}.toast--type-icon[data-toast-type=default]{display:none}.toast--message{color:var(--seed-ui-color-text-white);font-size:var(--seed-font-size-s);font-weight:var(--seed-font-weight-400);line-height:var(--seed-font-line-height-sm)}.toast--action-link{text-decoration:underline;text-underline-offset:2px}.toast--action-button,.toast--action-link{color:var(--seed-ui-color-text-white);cursor:pointer;flex-shrink:0;font-size:var(--seed-font-size-xs);font-weight:var(--seed-font-weight-400)}.toast--action-button{align-items:center;background-color:var(--seed-brand-color-primary);border-radius:var(--seed-rounding-400);display:flex;justify-content:center;padding:var(--seed-spacing-200) var(--seed-spacing-300)}.toaster-content{bottom:0;left:0;pointer-events:none;position:fixed;right:0;top:0;z-index:9999}.toast-wrapper{position:absolute}.toast-wrapper>*{transition:all .23s cubic-bezier(.21,1.02,.73,1)}.toast-wrapper.toast-wrapper--top-right{right:0}.toast-wrapper.toast-wrapper--top-left{left:0}.toast-wrapper.toast-wrapper--top-center{left:50%}.toast-wrapper.toast-wrapper--bottom-right{bottom:0;right:0}.toast-wrapper.toast-wrapper--bottom-left{bottom:0;left:0}.toast-wrapper.toast-wrapper--bottom-center{bottom:0;left:50%}.popup{animation:popup-content-show .15s cubic-bezier(.16,1,.3,1);background-color:var(--seed-ui-color-background-white);border-radius:16px;box-shadow:0 4px 16px 0 hsla(0,0%,43%,.07);left:50%;max-height:85vh;max-width:450px;overflow-y:auto;padding:24px 16px;position:fixed;top:50%;transform:translate(-50%,-50%);width:100%}.popup:focus{outline:none}.popup--actions{display:flex;gap:8px;justify-content:flex-end;margin-top:24px}.popup--actions>*{flex:1}.popup--actions-typeB{display:flex;gap:8px;justify-content:space-between}.popup--actions-left{flex:0 0 auto;min-width:76px}.popup--actions-right{flex:1 1 auto}@keyframes popup-overlay-show{0%{opacity:0}to{opacity:1}}@keyframes popup-content-show{0%{opacity:0;transform:translate(-50%,-48%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.visually-hidden{clip:rect(0 0 0 0);word-wrap:normal;border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.DropdownMenuTriggerContent{align-items:center;border:1px solid rgba(0,0,0,.2);display:flex;flex-direction:row;gap:10px;justify-content:space-between;min-width:170px;padding:11px 20px}.DropdownMenuTriggerContentText{font-size:14px;font-weight:500;letter-spacing:-.28px;line-height:1.4;width:calc(100% - 40px)}.DropdownMenuContent{animation-duration:.4s;animation-timing-function:cubic-bezier(.16,1,.3,1);background-color:#fff;border-bottom:1px solid rgba(0,0,0,.2);border-radius:0 0 4px 4px;border-top:none;will-change:transform,opacity}.DropdownMenuContent[data-side=top]{animation-name:slideDownAndFade}.DropdownMenuItem{align-items:center;border-left:1px solid rgba(0,0,0,.2);border-right:1px solid rgba(0,0,0,.2);cursor:pointer;display:flex;font-size:14px;font-weight:400;letter-spacing:-.28px;line-height:1.4;min-width:170px;outline:none;padding:11px 20px;transition:color .2s ease-in-out;user-select:none}.DropdownMenuItem--selected,.DropdownMenuItem:hover{border-left:4px solid #3a8dff;color:#3a8dff;padding-left:17px}.DropdownMenuItem[data-disabled]{pointer-events:none}.DropdownMenuItem[data-highlighted]{border-left:4px solid #3a8dff;color:#3a8dff;padding-left:17px}@keyframes slideUpAndFade{0%{opacity:0}to{opacity:1}}.ripple-layer{border-radius:inherit;bottom:0;left:0;overflow:hidden;pointer-events:inherit;position:absolute;right:0;top:0;will-change:transform}.ripple-circle{animation-name:ripple;backface-visibility:hidden;border-radius:100%;opacity:.75;pointer-events:none;position:absolute;transform:scale(0);transform-style:preserve-3d;will-change:transform,opacity}@keyframes ripple{to{opacity:0;transform:scale(2)}}:root{--tile-range-background:#ebf4ff;--tile-range-start-background:#3a8dff;--tile-range-end-background:#3a8dff;--tile-range-start-color:#fff;--tile-range-end-color:#fff;--tile-range-hover-background:#bbdefb}.month-calendar{background:var(--calendar-background);display:flex;flex-direction:column;overflow:hidden;user-select:none;width:360px}.month-calendar *{box-sizing:border-box}.month-calendar--transition-container{min-height:280px;overflow:hidden;position:relative}.month-calendar--slide-content{backface-visibility:hidden;left:0;position:absolute;right:0;top:0;width:100%;will-change:transform}.month-calendar--header{align-items:center;display:flex;gap:10px;justify-content:center}.month-calendar--header-title{background-color:var(--tile-background);color:var(--header-font-color);font-size:var(--header-font-size);font-weight:var(--header-font-weight);min-width:80px;text-align:center}.month-calendar--header-button{align-items:center;cursor:pointer;display:inline-flex;height:40px;justify-content:center;width:40px}.month-calendar--week-numbers{align-items:center;display:flex;justify-content:space-between;padding:0 20px;pointer-events:none}.month-calendar--days-container{display:flex;flex-direction:column;gap:8px;min-height:240px;padding:0 20px}.month-calendar--week-line{align-items:center;display:flex;justify-content:space-between}.month-calendar--tile{align-items:center;background:transparent;border:none;color:var(--tile-day-color);cursor:pointer;display:flex;flex:1;font-size:var(--tile-font-size);height:var(--tile-size);justify-content:center;position:relative;width:var(--tile-size)}.month-calendar--tile--week-number{background-color:var(--tile-week-number-background);color:var(--tile-week-number-color);font-weight:400;height:var(--tile-week-number-size);width:var(--tile-week-number-size)}.month-calendar--tile--day .month-calendar--tile-day-background{border-radius:50%;height:var(--tile-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:background-color .25s cubic-bezier(.4,0,.2,1) 0ms;width:var(--tile-size);z-index:-1}.month-calendar--tile--day:hover .month-calendar--tile-day-background{background-color:var(--tile-day-hover-background)}.month-calendar--tile--disabled{color:#b7c2d0!important;pointer-events:none!important}.month-calendar--tile--today{color:var(--tile-day-today-color)}.month-calendar--tile--today .month-calendar--tile--selected{color:var(--tile-day-today-selected-color)!important}.month-calendar--tile--selected{color:var(--tile-day-selected-color)}.month-calendar--tile--selected .month-calendar--tile-day-background{background:var(--tile-day-selected-background)}.month-calendar--tile--selected:hover .month-calendar--tile-day-background{background-color:var(--tile-day-selected-hover-background)}.month-calendar--tile--other-month{color:#b7c2d0!important;pointer-events:none!important}.month-calendar--tile--other-month .month-calendar--tile--only-view-month-days{visibility:hidden}.month-calendar--tile--in-range{background-color:var(--tile-range-background);border-radius:0;position:relative}.month-calendar--tile--in-range:hover{background-color:var(--tile-range-hover-background)}.month-calendar--tile--in-range:before{background-color:var(--tile-range-background);bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:-1}.month-calendar--tile--range-start{background-color:var(--tile-range-start-background);border-radius:50% 0 0 50%;color:var(--tile-range-start-color)}.month-calendar--tile--range-start:before{display:none}.month-calendar--tile--range-end{background-color:var(--tile-range-end-background);border-radius:0 50% 50% 0;color:var(--tile-range-end-color)}.month-calendar--tile--range-end:before{display:none}.calendar-slide-transition--container{overflow:hidden;position:relative}.calendar-slide-transition--container--month{min-height:280px}.calendar-slide-transition--container--week{min-height:80px}.calendar-slide-transition--content{backface-visibility:hidden;left:0;position:absolute;right:0;top:0;width:100%;will-change:transform}:root{--calendar-background:#fff;--header-font-size:20px;--header-font-color:#000;--header-font-weight:600;--tile-size:40px;--tile-font-size:14px;--tile-day-color:#000;--tile-day-background:#fff;--tile-day-hover-background:#f5f5f5;--tile-day-selected-background:#3a8dff;--tile-day-selected-color:#fff;--tile-day-selected-hover-background:#3a8dff;--tile-day-today-color:#3a8dff;--tile-day-today-selected-color:#fff;--tile-week-number-size:40px;--tile-week-number-color:#64748b;--tile-week-number-background:#fff}.week-calendar{background:var(--calendar-background);display:flex;flex-direction:column;overflow:hidden;user-select:none;width:320px}.week-calendar *{box-sizing:border-box}.week-calendar--header{align-items:center;display:flex;gap:10px;justify-content:center}.week-calendar--header-title{background-color:var(--tile-background);color:var(--header-font-color);font-size:var(--header-font-size);font-weight:var(--header-font-weight);min-width:80px;text-align:center}.week-calendar--header-button{align-items:center;cursor:pointer;display:inline-flex;height:40px;justify-content:center;width:40px}.week-calendar--week-numbers{align-items:center;display:flex;justify-content:space-between;pointer-events:none}.week-calendar--days-container{display:flex;flex-direction:column;gap:8px;min-height:80px}.week-calendar--week-line{align-items:center;display:flex;justify-content:space-between}.week-calendar--below-tile-slot{margin-top:6cm}.week-calendar--below-tile-slot,.week-calendar--tile{align-items:center;display:flex;justify-content:center}.week-calendar--tile{background:transparent;border:none;color:var(--tile-day-color);cursor:pointer;flex:1;font-size:var(--tile-font-size);height:var(--tile-size);position:relative;width:var(--tile-size)}.week-calendar--tile--week-number{background-color:var(--tile-week-number-background);color:var(--tile-week-number-color);font-weight:400;height:var(--tile-week-number-size);width:var(--tile-week-number-size)}.week-calendar--tile--day .week-calendar--tile-day-background{border-radius:50%;height:var(--tile-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:background-color .25s cubic-bezier(.4,0,.2,1) 0ms;width:var(--tile-size);z-index:-1}.week-calendar--tile--day:hover .week-calendar--tile-day-background{background-color:var(--tile-day-hover-background)}.week-calendar--tile--disabled{color:#b7c2d0!important;pointer-events:none!important}.week-calendar--tile--today{color:var(--tile-day-today-color)}.week-calendar--tile--today.week-calendar--tile--selected{color:var(--tile-day-today-selected-color)!important}.week-calendar--tile--selected{color:var(--tile-day-selected-color)}.week-calendar--tile--selected .week-calendar--tile-day-background{background:var(--tile-day-selected-background)}.week-calendar--tile--selected:hover .week-calendar--tile-day-background{background-color:var(--tile-day-selected-hover-background)}
package/dist/index.js CHANGED
@@ -2044,18 +2044,17 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
2044
2044
  display = _d === void 0 ? "box" : _d,
2045
2045
  _e = _a.disabled,
2046
2046
  disabled = _e === void 0 ? false : _e,
2047
- _f = _a.error,
2048
- error = _f === void 0 ? false : _f,
2047
+ validate = _a.validate,
2049
2048
  onClear = _a.onClear,
2050
2049
  className = _a.className,
2051
2050
  value = _a.value,
2052
2051
  onChange = _a.onChange,
2053
- _g = _a.placeholder,
2054
- placeholder = _g === void 0 ? "텍스트를 입력하세요" : _g,
2055
- rest = __rest(_a, ["type", "accept", "display", "disabled", "error", "onClear", "className", "value", "onChange", "placeholder"]);
2056
- var _h = useState(false),
2057
- hasFile = _h[0],
2058
- setHasFile = _h[1];
2052
+ _f = _a.placeholder,
2053
+ placeholder = _f === void 0 ? "텍스트를 입력하세요" : _f,
2054
+ rest = __rest(_a, ["type", "accept", "display", "disabled", "validate", "onClear", "className", "value", "onChange", "placeholder"]);
2055
+ var _g = useState(false),
2056
+ hasFile = _g[0],
2057
+ setHasFile = _g[1];
2059
2058
  var handleChange = function handleChange(e) {
2060
2059
  if (type === "file") {
2061
2060
  setHasFile(!!(e.target.files && e.target.files.length > 0));
@@ -2064,27 +2063,45 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
2064
2063
  onChange(e);
2065
2064
  }
2066
2065
  };
2066
+ var getErrorMessage = function getErrorMessage() {
2067
+ if (validate && value !== undefined) {
2068
+ var validationError = validate(String(value));
2069
+ if (validationError !== null) {
2070
+ return validationError;
2071
+ }
2072
+ }
2073
+ return "";
2074
+ };
2075
+ var errorMessage = getErrorMessage();
2076
+ var hasError = !!errorMessage;
2067
2077
  return jsxs("div", {
2068
- className: cx("input-wrapper", (_b = {}, _b["input--display-".concat(display)] = display, _b["input--disabled"] = disabled, _b["input--error"] = error, _b), className),
2069
- children: [jsx("input", _assign({
2070
- placeholder: placeholder,
2071
- ref: ref,
2072
- type: type,
2073
- disabled: disabled,
2074
- className: cx("input", {
2075
- "has-file": hasFile
2076
- }),
2077
- "data-frieeren-component": "Input",
2078
- onChange: handleChange
2079
- }, rest)), type === "file" && jsx("button", {
2080
- className: "input--action input--action-link",
2081
- disabled: disabled,
2082
- children: jsx(SvgLink, {})
2083
- }), value && onClear && jsx("button", {
2084
- onClick: onClear,
2085
- className: "input--close",
2086
- disabled: disabled,
2087
- children: jsx(SvgClose, {})
2078
+ className: cx("input-wrapper", (_b = {}, _b["input--display-".concat(display)] = display, _b["input--disabled"] = disabled, _b["input--error"] = hasError, _b), className),
2079
+ children: [jsxs("div", {
2080
+ className: "input-container",
2081
+ children: [jsx("input", _assign({
2082
+ placeholder: placeholder,
2083
+ ref: ref,
2084
+ type: type,
2085
+ disabled: disabled,
2086
+ className: cx("input", {
2087
+ "has-file": hasFile
2088
+ }),
2089
+ "data-frieeren-component": "Input",
2090
+ onChange: handleChange,
2091
+ value: value
2092
+ }, rest)), type === "file" && jsx("button", {
2093
+ className: "input--action input--action-link",
2094
+ disabled: disabled,
2095
+ children: jsx(SvgLink, {})
2096
+ }), value && onClear && jsx("button", {
2097
+ onClick: onClear,
2098
+ className: "input--close",
2099
+ disabled: disabled,
2100
+ children: jsx(SvgClose, {})
2101
+ })]
2102
+ }), errorMessage && jsx("span", {
2103
+ className: "input--error-message",
2104
+ children: errorMessage
2088
2105
  })]
2089
2106
  });
2090
2107
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@team-frieeren/components",
3
- "version": "1.0.21",
3
+ "version": "1.0.22",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",