@idbrnd/design-system 1.0.0

package/dist/index.js

@@ -0,0 +1,1085 @@
+import { jsx as n, jsxs as k, Fragment as xe } from "react/jsx-runtime";
+import { Children as le, useMemo as q, useState as oe, useId as Ae, useRef as Me, useEffect as Re } from "react";
+import De from "react-dom";
+import './style.css';const qe = "_button_150dq_1", Le = "_large_150dq_36", Fe = "_small_150dq_47", ye = {
+  button: qe,
+  large: Le,
+  small: Fe
+};
+function He({
+  size: e = "large",
+  disabled: o = !1,
+  keepFocusOnClick: t = !1,
+  customStyle: i = {},
+  onClick: l,
+  className: c,
+  children: u,
+  type: r = "button",
+  ...a
+}) {
+  const _ = [
+    ye.button,
+    ye[e],
+    c ?? ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      "data-idb-component": !0,
+      type: r,
+      className: _,
+      onClick: (d) => {
+        l?.(d), !t && !d.defaultPrevented && d.currentTarget.blur();
+      },
+      disabled: o,
+      style: i,
+      ...a,
+      children: u
+    }
+  );
+}
+const Oe = "_clipWrapper_3mxht_1", We = "_clip_3mxht_1", je = "_sync_3mxht_59", Pe = "_syncDot_3mxht_65", Ke = "_fade_3mxht_72", Ve = "_fadeBar_3mxht_77", F = {
+  clipWrapper: Oe,
+  clip: We,
+  sync: je,
+  syncDot: Pe,
+  fade: Ke,
+  fadeBar: Ve
+}, ge = "var(--semantic-before-main)";
+function Yo() {
+  return /* @__PURE__ */ n(Ue, {});
+}
+function Ue({ color: e = ge, size: o = 10 }) {
+  const t = Math.max(2, Math.round(o)), i = Math.max(2, Math.round(o * 0.5));
+  return (
+    // 점 3개를 가로로 배치하는 컨테이너
+    /* @__PURE__ */ n("span", { className: F.sync, style: { color: e, gap: i }, children: Array.from({ length: 3 }).map((l, c) => /* @__PURE__ */ n(
+      "span",
+      {
+        className: F.syncDot,
+        style: {
+          width: t,
+          height: t,
+          animationDelay: `${c * 0.12}s`
+        }
+      },
+      c
+    )) })
+  );
+}
+function Z({ color: e = ge, size: o = 10, text: t = "" }) {
+  const i = Math.max(2, Math.round(o / 12)), l = {
+    width: o,
+    height: o,
+    "--clip-size": `${o}px`,
+    "--clip-stroke": `${i}px`
+  };
+  return /* @__PURE__ */ k(
+    "span",
+    {
+      className: F.clipWrapper,
+      style: {
+        color: e
+      },
+      children: [
+        /* @__PURE__ */ n("span", { className: F.clip, style: l }),
+        t ? /* @__PURE__ */ n("span", { style: { color: "var(--semantic-bg-default)", fontSize: "1rem", marginTop: "10px" }, children: t }) : null
+      ]
+    }
+  );
+}
+function Xo({ color: e = ge, width: o = 4, height: t = 12, radius: i = 2, margin: l = 2 }) {
+  const u = Math.max(6, Math.round(t + l + 1)), r = u * 2 + t, a = 1, _ = a / 8;
+  return (
+    // 원형 막대 스피너의 기준 좌표가 되는 컨테이너(막대 위치는 고정)
+    /* @__PURE__ */ n("span", { className: F.fade, style: { color: e, width: r, height: r }, children: Array.from({ length: 8 }).map((p, d) => /* @__PURE__ */ n(
+      "span",
+      {
+        className: F.fadeBar,
+        style: {
+          width: o,
+          height: t,
+          borderRadius: i,
+          transform: `translate(-50%, -50%) rotate(${360 / 8 * d}deg) translateY(-${u}px)`,
+          animationDelay: `${-(7 - d) * _}s`,
+          animationDuration: `${a}s`
+        }
+      },
+      d
+    )) })
+  );
+}
+const ze = "_button_1h0bn_1", Ze = "_content_1h0bn_12", Ye = "_fixed_1h0bn_33", Xe = "_fixedContent_1h0bn_39", Ge = "_node_1h0bn_48", Je = "_text_1h0bn_54", Qe = "_large_1h0bn_64", en = "_medium_1h0bn_65", nn = "_small_1h0bn_66", tn = "_xsmall_1h0bn_70", on = "_flexible_1h0bn_74", sn = "_primary_1h0bn_90", ln = "_loading_1h0bn_90", rn = "_assistive_1h0bn_91", an = "_error_1h0bn_92", cn = "_spinnerWrapper_1h0bn_151", E = {
+  button: ze,
+  content: Ze,
+  fixed: Ye,
+  fixedContent: Xe,
+  node: Ge,
+  text: Je,
+  large: Qe,
+  medium: en,
+  small: nn,
+  xsmall: tn,
+  flexible: on,
+  primary: sn,
+  loading: ln,
+  assistive: rn,
+  error: an,
+  spinnerWrapper: cn,
+  "spinner-primary": "_spinner-primary_1h0bn_157",
+  "spinner-error": "_spinner-error_1h0bn_158",
+  "spinner-assistive": "_spinner-assistive_1h0bn_162"
+};
+function Go({
+  widthType: e = "flexible",
+  variant: o = "primary",
+  size: t = "medium",
+  disabled: i = !1,
+  loading: l = !1,
+  keepFocusOnClick: c = !1,
+  customStyle: u = {},
+  onClick: r,
+  className: a,
+  children: _,
+  type: p = "button",
+  ...d
+}) {
+  const h = [
+    E.button,
+    E[e],
+    E[o],
+    E[t],
+    l ? E.loading : "",
+    a ?? ""
+  ].filter(Boolean).join(" "), b = [E.spinnerWrapper, E[`spinner-${o}`]].filter(Boolean).join(" "), x = [E.content, e === "fixed" ? E.fixedContent : ""].filter(Boolean).join(" "), N = e === "fixed" ? le.map(_, (s) => {
+    const y = typeof s == "string" || typeof s == "number" ? E.text : E.node;
+    return /* @__PURE__ */ n("span", { className: y, children: s });
+  }) : _, C = q(() => ({
+    large: 24,
+    medium: 24,
+    small: 24,
+    xsmall: 16
+  })[t], [t]);
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      "data-idb-component": !0,
+      type: p,
+      className: h,
+      onClick: l ? void 0 : (s) => {
+        r?.(s), !c && !s.defaultPrevented && s.currentTarget.blur();
+      },
+      disabled: i,
+      style: u,
+      ...d,
+      children: l ? /* @__PURE__ */ n("span", { className: b, children: /* @__PURE__ */ n(Z, { size: C, color: "currentColor" }) }) : /* @__PURE__ */ n("span", { className: x, children: N })
+    }
+  );
+}
+const un = "_button_lqb7w_1", _n = "_basic_lqb7w_27", dn = "_overlay_lqb7w_45", mn = "_primary_lqb7w_63", pn = "_large_lqb7w_83", fn = "_medium_lqb7w_94", de = {
+  button: un,
+  basic: _n,
+  overlay: dn,
+  primary: mn,
+  large: pn,
+  medium: fn
+};
+function Jo({
+  variant: e = "basic",
+  size: o = "medium",
+  disabled: t = !1,
+  keepFocusOnClick: i = !1,
+  customStyle: l = {},
+  onClick: c,
+  children: u,
+  type: r = "button",
+  ...a
+}) {
+  const _ = [de.button, de[e], de[o]].filter(Boolean).join(" ");
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      "data-idb-component": !0,
+      type: r,
+      className: _,
+      onClick: (d) => {
+        c?.(d), !i && !d.defaultPrevented && d.currentTarget.blur();
+      },
+      disabled: t,
+      style: l,
+      ...a,
+      children: u
+    }
+  );
+}
+const hn = "_root_15y9v_1", gn = "_label_15y9v_8", xn = "_labelDisabled_15y9v_16", yn = "_requiredMark_15y9v_20", bn = "_controlRow_15y9v_24", Cn = "_control_15y9v_24", vn = "_small_15y9v_48", $n = "_outline_15y9v_53", Nn = "_fill_15y9v_57", wn = "_basic_15y9v_61", kn = "_success_15y9v_65", Bn = "_error_15y9v_70", En = "_focused_15y9v_86", Sn = "_typing_15y9v_87", Tn = "_disabled_15y9v_103", In = "_leadingIcon_15y9v_118", An = "_trailingIcon_15y9v_119", Mn = "_trailingText_15y9v_120", Rn = "_readOnly_15y9v_124", Dn = "_inputField_15y9v_146", qn = "_trailingButton_15y9v_193", Ln = "_trailingIconButton_15y9v_194", Fn = "_trailingSlot_15y9v_198", Hn = "_trailingSlotDisabled_15y9v_205", On = "_trailingBasicIconButton_15y9v_209", Wn = "_helper_15y9v_290", jn = "_helperFixed_15y9v_296", Pn = "_helperPlaceholder_15y9v_300", Kn = "_errorHelper_15y9v_304", Vn = "_errorHelperBounce_15y9v_308", Un = "_errorMessageBounceY_15y9v_1", zn = "_helperDisabled_15y9v_312", m = {
+  root: hn,
+  label: gn,
+  labelDisabled: xn,
+  requiredMark: yn,
+  controlRow: bn,
+  control: Cn,
+  default: "_default_15y9v_43",
+  small: vn,
+  outline: $n,
+  fill: Nn,
+  basic: wn,
+  success: kn,
+  error: Bn,
+  focused: En,
+  typing: Sn,
+  disabled: Tn,
+  leadingIcon: In,
+  trailingIcon: An,
+  trailingText: Mn,
+  readOnly: Rn,
+  inputField: Dn,
+  "input-default": "_input-default_15y9v_157",
+  "input-small": "_input-small_15y9v_161",
+  trailingButton: qn,
+  trailingIconButton: Ln,
+  trailingSlot: Fn,
+  trailingSlotDisabled: Hn,
+  trailingBasicIconButton: On,
+  helper: Wn,
+  helperFixed: jn,
+  helperPlaceholder: Pn,
+  errorHelper: Kn,
+  errorHelperBounce: Vn,
+  errorMessageBounceY: Un,
+  helperDisabled: zn
+};
+function Zn({
+  content: e,
+  disabled: o = !1
+}) {
+  if (e == null)
+    return null;
+  const t = (i) => {
+    i.preventDefault();
+  };
+  return /* @__PURE__ */ n(
+    "span",
+    {
+      className: [m.trailingSlot, o ? m.trailingSlotDisabled : ""].filter(Boolean).join(" "),
+      onMouseDownCapture: t,
+      children: e
+    }
+  );
+}
+function Yn({
+  value: e,
+  onFocus: o,
+  onBlur: t,
+  onChange: i
+}) {
+  const [l, c] = oe(!1), [u, r] = oe(!1);
+  return {
+    currentValue: e,
+    isFocused: l,
+    isTyping: u,
+    handleFocus: (h) => {
+      c(!0), r(!1), o?.(h);
+    },
+    handleBlur: (h) => {
+      c(!1), r(!1), t?.(h);
+    },
+    handleChange: (h) => {
+      r(!0), i?.(h);
+    }
+  };
+}
+function Xn({
+  type: e = "text",
+  // input HTML 타입
+  designType: o = "outline",
+  // 인풋 외형 타입
+  size: t = "default",
+  // 인풋 높이 크기
+  variant: i,
+  // 상태 variant
+  width: l,
+  // 루트 너비
+  heading: c = !0,
+  // 라벨 표시 여부
+  headingContent: u = "Label",
+  // 라벨 내용
+  required: r = !1,
+  // 라벨 우측 *
+  description: a = !1,
+  // 하단 안내 문구
+  fixedDescriptionHeight: _ = !0,
+  // 하단 문구 영역 높이 고정 여부
+  errorMessage: p,
+  // 에러 상태 문구
+  leadingIcon: d,
+  // 좌측 아이콘 슬롯
+  trailingContent: h,
+  // 우측 trailing 슬롯 콘텐츠
+  customStyle: b = {},
+  // 루트 커스텀 스타일
+  id: x,
+  // input id
+  onFocus: N,
+  // 포커스 진입 핸들러
+  onBlur: C,
+  // 포커스 이탈 핸들러
+  onChange: w,
+  // 값 변경 핸들러
+  value: s,
+  // 현재 값
+  disabled: y = !1,
+  // 전체 비활성화 여부
+  readOnly: Y = !1,
+  // 읽기 전용 여부
+  ...re
+}) {
+  const ae = Ae(), D = x ?? ae, A = c, O = u, { currentValue: B, isFocused: W, isTyping: X, handleFocus: ce, handleBlur: ue, handleChange: _e } = Yn(
+    {
+      value: s,
+      onFocus: N,
+      onBlur: C,
+      onChange: w
+    }
+  ), G = q(() => B == null ? !1 : Array.isArray(B) ? B.length > 0 : typeof B == "number" ? !0 : String(B).length > 0, [B]), f = q(() => i !== void 0 ? i : X && W ? "onTyping" : W ? "onFocus" : G ? "typed" : "basic", [i, X, W, G]), M = f === "error", ke = f === "success", Be = [
+    m.control,
+    m[o],
+    M ? m.error : ke ? m.success : m.basic,
+    m[t],
+    !y && (f === "onFocus" || f === "onTyping") ? m.focused : "",
+    !y && f === "onTyping" ? m.typing : "",
+    y ? m.disabled : "",
+    Y ? m.readOnly : ""
+  ].filter(Boolean).join(" "), Ee = [m.inputField, m[`input-${t}`]].join(" "), Se = m.root, Te = [m.label, y ? m.labelDisabled : ""].filter(Boolean).join(" "), J = q(() => M ? p ?? "에러 메시지가 표시됩니다." : a === !1 || a === void 0 || a === null ? null : a === !0 ? "2~19자 이내로 입력해 주세요." : a, [a, p, M]), Ie = [
+    m.helper,
+    _ ? m.helperFixed : "",
+    M ? m.errorHelper : "",
+    M && J !== null ? m.errorHelperBounce : "",
+    y ? m.helperDisabled : "",
+    _ && J === null ? m.helperPlaceholder : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ k(
+    "div",
+    {
+      "data-idb-component": !0,
+      className: Se,
+      style: {
+        width: l ?? "100%",
+        ...b
+      },
+      children: [
+        A ? /* @__PURE__ */ k("label", { htmlFor: D, className: Te, children: [
+          /* @__PURE__ */ n("span", { children: O }),
+          r ? /* @__PURE__ */ n("span", { className: m.requiredMark, children: "*" }) : null
+        ] }) : null,
+        /* @__PURE__ */ n("div", { className: m.controlRow, children: /* @__PURE__ */ k("div", { className: Be, children: [
+          d ? /* @__PURE__ */ n("span", { className: m.leadingIcon, children: d }) : null,
+          /* @__PURE__ */ n(
+            "input",
+            {
+              id: D,
+              type: e,
+              value: B,
+              className: Ee,
+              onFocus: ce,
+              onBlur: ue,
+              onChange: _e,
+              disabled: y,
+              readOnly: Y,
+              required: r,
+              ...re
+            }
+          ),
+          /* @__PURE__ */ n(
+            Zn,
+            {
+              content: h,
+              disabled: y
+            }
+          )
+        ] }) }),
+        _ || J !== null ? /* @__PURE__ */ n("p", { className: Ie, children: J }) : null
+      ]
+    }
+  );
+}
+const Gn = "_button_1wh5k_1", Jn = "_content_1wh5k_19", Qn = "_fixed_1wh5k_37", et = "_fixedContent_1wh5k_43", nt = "_node_1wh5k_53", tt = "_text_1wh5k_59", ot = "_large_1wh5k_69", st = "_medium_1wh5k_70", it = "_small_1wh5k_71", lt = "_xsmall_1wh5k_75", rt = "_flexible_1wh5k_80", at = "_primary_1wh5k_98", ct = "_secondary_1wh5k_99", ut = "_assistive_1wh5k_100", _t = "_loading_1wh5k_101", dt = "_spinnerWrapper_1wh5k_172", S = {
+  button: Gn,
+  content: Jn,
+  fixed: Qn,
+  fixedContent: et,
+  node: nt,
+  text: tt,
+  large: ot,
+  medium: st,
+  small: it,
+  xsmall: lt,
+  flexible: rt,
+  primary: at,
+  secondary: ct,
+  assistive: ut,
+  loading: _t,
+  spinnerWrapper: dt,
+  "spinner-primary": "_spinner-primary_1wh5k_179",
+  "spinner-assistive": "_spinner-assistive_1wh5k_180",
+  "spinner-secondary": "_spinner-secondary_1wh5k_184"
+};
+function Qo({
+  widthType: e = "flexible",
+  variant: o = "primary",
+  size: t = "medium",
+  disabled: i = !1,
+  loading: l = !1,
+  keepFocusOnClick: c = !1,
+  customStyle: u = {},
+  onClick: r,
+  className: a,
+  children: _,
+  type: p = "button",
+  ...d
+}) {
+  const h = [
+    S.button,
+    S[e],
+    S[o],
+    S[t],
+    l ? S.loading : "",
+    a ?? ""
+  ].filter(Boolean).join(" "), b = [S.spinnerWrapper, S[`spinner-${o}`]].filter(Boolean).join(" "), x = [S.content, e === "fixed" ? S.fixedContent : ""].filter(Boolean).join(" "), N = e === "fixed" ? le.map(_, (s) => {
+    const y = typeof s == "string" || typeof s == "number" ? S.text : S.node;
+    return /* @__PURE__ */ n("span", { className: y, children: s });
+  }) : _, C = q(() => ({
+    large: 24,
+    medium: 24,
+    small: 24,
+    xsmall: 16
+  })[t], [t]);
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      "data-idb-component": !0,
+      type: p,
+      className: h,
+      onClick: l ? void 0 : (s) => {
+        r?.(s), !c && !s.defaultPrevented && s.currentTarget.blur();
+      },
+      disabled: i,
+      style: u,
+      ...d,
+      children: l ? /* @__PURE__ */ n("span", { className: b, children: /* @__PURE__ */ n(Z, { size: C, color: "currentColor" }) }) : /* @__PURE__ */ n("span", { className: x, children: N })
+    }
+  );
+}
+const mt = "_button_lctga_1", pt = "_large_lctga_40", ft = "_medium_lctga_51", be = {
+  button: mt,
+  large: pt,
+  medium: ft
+};
+function es({
+  size: e = "medium",
+  disabled: o = !1,
+  keepFocusOnClick: t = !1,
+  customStyle: i = {},
+  onClick: l,
+  children: c,
+  type: u = "button",
+  ...r
+}) {
+  const a = [be.button, be[e]].filter(Boolean).join(" ");
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      "data-idb-component": !0,
+      type: u,
+      className: a,
+      onClick: (p) => {
+        l?.(p), !t && !p.defaultPrevented && p.currentTarget.blur();
+      },
+      disabled: o,
+      style: i,
+      ...r,
+      children: c
+    }
+  );
+}
+const ht = "_badge_iiym7_1", gt = "_dot_iiym7_16", xt = "_number_iiym7_23", yt = "_info_iiym7_36", Ce = {
+  badge: ht,
+  dot: gt,
+  number: xt,
+  info: yt
+};
+function ns({
+  variant: e = "number",
+  count: o = 1,
+  bgColor: t,
+  color: i,
+  disabled: l = !1,
+  customStyle: c = {},
+  className: u
+}) {
+  if (l)
+    return null;
+  const r = o > 999 ? "999+" : o, a = {
+    ...t ? { backgroundColor: t } : {},
+    ...i ? { color: i } : {},
+    ...c
+  }, _ = [Ce.badge, Ce[e], u ?? ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ k("span", { "data-idb-component": !0, className: _, style: a, children: [
+    e === "number" ? r : null,
+    e === "info" ? "?" : null
+  ] });
+}
+function ts({
+  value: e,
+  // 검색어 값
+  onChange: o,
+  // 입력 변경 핸들러
+  onSearch: t,
+  // 검색 실행 핸들러
+  size: i = "default",
+  // 인풋 크기
+  width: l,
+  // 컴포넌트 너비
+  designType: c = "outline",
+  // 인풋 외형 타입
+  heading: u = !1,
+  // 라벨 표시 여부
+  headingContent: r,
+  // 라벨 내용
+  variant: a,
+  // 인풋 상태 variant
+  description: _ = !1,
+  // 하단 안내 문구
+  fixedDescriptionHeight: p = !0,
+  // 하단 문구 영역 높이 고정 여부
+  disabled: d = !1,
+  // 전체 비활성화 여부
+  readOnly: h = !1,
+  // 읽기 전용 여부
+  id: b,
+  // input id
+  name: x,
+  // input name
+  placeholder: N,
+  // placeholder 텍스트
+  leadingIcon: C,
+  // 좌측 아이콘 슬롯
+  maxLength: w = 20,
+  // 최대 입력 길이
+  required: s = !1,
+  // 필수 입력 여부
+  errorMessage: y,
+  // 에러 상태 문구
+  onBlur: Y,
+  // 포커스 이탈 핸들러
+  onKeyDown: re,
+  // 키다운 핸들러
+  ...ae
+}) {
+  const [D, A] = oe(null), O = (f) => f.length >= w, B = (f) => f.length === 1, W = (f) => {
+    const M = f.target.value;
+    O(M) ? A("max") : D !== null && A(null), o(f);
+  }, X = () => {
+    if (O(e)) {
+      A("max");
+      return;
+    }
+    if (B(e)) {
+      A("min");
+      return;
+    }
+    A(null), t(e);
+  }, ce = (f) => {
+    const M = f.currentTarget.value;
+    O(M) ? A("max") : B(M) ? A("min") : A(null), Y?.(f);
+  }, ue = (f) => {
+    re?.(f), !f.defaultPrevented && (f.key !== "Enter" || f.nativeEvent.isComposing || (f.preventDefault(), X()));
+  }, _e = D !== null ? "error" : a, G = D === "max" ? `최대 ${Math.max(0, w - 1)}자 까지 가능합니다.` : D === "min" ? "최소 2자 이상 입력해 주세요." : y;
+  return /* @__PURE__ */ n(
+    Xn,
+    {
+      ...ae,
+      id: b,
+      name: x,
+      value: e,
+      placeholder: N,
+      onChange: W,
+      onBlur: ce,
+      onKeyDown: ue,
+      type: "text",
+      width: l,
+      designType: c,
+      size: i,
+      heading: u,
+      headingContent: r,
+      required: s,
+      description: _,
+      fixedDescriptionHeight: p,
+      variant: _e,
+      errorMessage: G,
+      leadingIcon: C,
+      maxLength: w,
+      disabled: d,
+      readOnly: h
+    }
+  );
+}
+var L = {}, ve;
+function bt() {
+  if (ve) return L;
+  ve = 1;
+  var e = De;
+  if (process.env.NODE_ENV === "production")
+    L.createRoot = e.createRoot, L.hydrateRoot = e.hydrateRoot;
+  else {
+    var o = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    L.createRoot = function(t, i) {
+      o.usingClientEntryPoint = !0;
+      try {
+        return e.createRoot(t, i);
+      } finally {
+        o.usingClientEntryPoint = !1;
+      }
+    }, L.hydrateRoot = function(t, i, l) {
+      o.usingClientEntryPoint = !0;
+      try {
+        return e.hydrateRoot(t, i, l);
+      } finally {
+        o.usingClientEntryPoint = !1;
+      }
+    };
+  }
+  return L;
+}
+var $e = bt();
+const Ct = "data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_1969_3981)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M13.9354%204.93441C14.2478%204.62219%2014.7539%204.62206%2015.0662%204.93441C15.3786%205.24677%2015.3785%205.75284%2015.0662%206.06527L11.1307%2010.0008L15.0643%2013.9344C15.3767%2014.2468%2015.3767%2014.7529%2015.0643%2015.0653C14.7519%2015.3777%2014.2459%2015.3777%2013.9334%2015.0653L9.99984%2011.1317L6.06625%2015.0653C5.75383%2015.3777%205.24781%2015.3777%204.93539%2015.0653C4.62297%2014.7529%204.62297%2014.2468%204.93539%2013.9344L8.86898%2010.0008L4.93344%206.06527C4.62121%205.75284%204.62108%205.24677%204.93344%204.93441C5.24579%204.62206%205.75186%204.62219%206.06429%204.93441L9.99984%208.86996L13.9354%204.93441Z'%20fill='%2370737C'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_1969_3981'%3e%3crect%20width='20'%20height='20'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e", vt = "_button_xqfx2_1", $t = "_content_xqfx2_18", Nt = "_fixed_xqfx2_36", wt = "_fixedContent_xqfx2_42", kt = "_node_xqfx2_52", Bt = "_text_xqfx2_58", Et = "_large_xqfx2_68", St = "_medium_xqfx2_69", Tt = "_small_xqfx2_70", It = "_xsmall_xqfx2_74", At = "_flexible_xqfx2_79", Mt = "_primary_xqfx2_109", Rt = "_secondary_xqfx2_110", Dt = "_assistive_xqfx2_111", qt = "_loading_xqfx2_112", Lt = "_spinnerWrapper_xqfx2_180", T = {
+  button: vt,
+  content: $t,
+  fixed: Nt,
+  fixedContent: wt,
+  node: kt,
+  text: Bt,
+  large: Et,
+  medium: St,
+  small: Tt,
+  xsmall: It,
+  flexible: At,
+  primary: Mt,
+  secondary: Rt,
+  assistive: Dt,
+  loading: qt,
+  spinnerWrapper: Lt,
+  "spinner-primary": "_spinner-primary_xqfx2_187",
+  "spinner-secondary": "_spinner-secondary_xqfx2_191",
+  "spinner-assistive": "_spinner-assistive_xqfx2_192"
+};
+function Ft({
+  widthType: e = "flexible",
+  variant: o = "primary",
+  size: t = "medium",
+  disabled: i = !1,
+  loading: l = !1,
+  keepFocusOnClick: c = !1,
+  customStyle: u = {},
+  onClick: r,
+  className: a,
+  children: _,
+  type: p = "button",
+  ...d
+}) {
+  const h = [
+    T.button,
+    T[e],
+    T[o],
+    T[t],
+    l ? T.loading : "",
+    a ?? ""
+  ].filter(Boolean).join(" "), b = [T.spinnerWrapper, T[`spinner-${o}`]].filter(Boolean).join(" "), x = [T.content, e === "fixed" ? T.fixedContent : ""].filter(Boolean).join(" "), N = e === "fixed" ? le.map(_, (s) => {
+    const y = typeof s == "string" || typeof s == "number" ? T.text : T.node;
+    return /* @__PURE__ */ n("span", { className: y, children: s });
+  }) : _, C = q(() => ({
+    large: 24,
+    medium: 24,
+    small: 24,
+    xsmall: 16
+  })[t], [t]);
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      "data-idb-component": !0,
+      type: p,
+      className: h,
+      onClick: l ? void 0 : (s) => {
+        r?.(s), !c && !s.defaultPrevented && s.currentTarget.blur();
+      },
+      disabled: i,
+      style: u,
+      ...d,
+      children: l ? /* @__PURE__ */ n("span", { className: b, children: /* @__PURE__ */ n(Z, { size: C, color: "currentColor" }) }) : /* @__PURE__ */ n("span", { className: x, children: N })
+    }
+  );
+}
+const Ht = "_designContainer_2k7ic_1", Ot = "_snackbar_2k7ic_12", Wt = "_snackbarEnter_2k7ic_1", jt = "_content_2k7ic_32", Pt = "_leading_2k7ic_41", Kt = "_iconSlot_2k7ic_51", Vt = "_message_2k7ic_67", Ut = "_heading_2k7ic_77", zt = "_description_2k7ic_78", Zt = "_measureContent_2k7ic_93", Yt = "_closeButton_2k7ic_107", Xt = "_trailing_2k7ic_111", Gt = "_actionButton_2k7ic_118", Jt = "_closeIcon_2k7ic_122", Qt = "_basic_2k7ic_129", eo = "_loading_2k7ic_130", no = "_snackbarExit_2k7ic_138", g = {
+  designContainer: Ht,
+  snackbar: Ot,
+  snackbarEnter: Wt,
+  content: jt,
+  leading: Pt,
+  iconSlot: Kt,
+  message: Vt,
+  heading: Ut,
+  description: zt,
+  measureContent: Zt,
+  closeButton: Yt,
+  trailing: Xt,
+  actionButton: Gt,
+  closeIcon: Jt,
+  basic: Qt,
+  loading: eo,
+  snackbarExit: no
+}, to = 6e3, oo = 1e4, so = 180;
+let j = null, $ = null, io = 0, P = null, ee = null, se = null, U = 0;
+function K(e) {
+  return e != null && typeof e != "boolean" && (typeof e != "string" || e.trim() !== "");
+}
+function H() {
+  P !== null && (window.clearTimeout(P), P = null), se = null;
+}
+function z() {
+  ee !== null && (window.clearTimeout(ee), ee = null);
+}
+function lo() {
+  if (typeof window > "u" || typeof document > "u")
+    return !1;
+  if (j)
+    return !0;
+  const e = document.createElement("div");
+  return e.setAttribute("data-idb-snackbar-root", "true"), document.body.appendChild(e), j = $e.createRoot(e), !0;
+}
+function ro() {
+  if (P === null || se === null || !$ || $.isExiting)
+    return;
+  const e = Date.now() - se;
+  U = Math.max(0, U - e), H();
+}
+function me() {
+  if (!$ || $.isExiting)
+    return;
+  H(), z(), $ = {
+    ...$,
+    isExiting: !0
+  };
+  const e = $.renderKey;
+  pe(), ee = window.setTimeout(() => {
+    $?.renderKey === e && $.isExiting && ($ = null, pe()), z();
+  }, so);
+}
+function Ne() {
+  if (!(!$ || $.isExiting)) {
+    if (U <= 0) {
+      me();
+      return;
+    }
+    H(), se = Date.now(), P = window.setTimeout(() => {
+      me();
+    }, U);
+  }
+}
+function ao(e) {
+  H(), z(), U = e, Ne();
+}
+function co({ snackbar: e, onPauseAutoHide: o, onResumeAutoHide: t, onClose: i }) {
+  const l = Me(null), [c, u] = oe(!1), r = K(e.heading), a = K(e.description);
+  Re(() => {
+    if (!r) {
+      u(!1);
+      return;
+    }
+    const b = l.current;
+    if (!b)
+      return;
+    let x = null;
+    const N = () => {
+      u(b.scrollHeight > b.clientHeight + 1);
+    }, C = () => {
+      x !== null && window.cancelAnimationFrame(x), x = window.requestAnimationFrame(N);
+    };
+    C();
+    const w = typeof ResizeObserver < "u";
+    let s = null;
+    return w ? (s = new ResizeObserver(C), s.observe(b)) : window.addEventListener("resize", C), () => {
+      x !== null && window.cancelAnimationFrame(x), s?.disconnect(), w || window.removeEventListener("resize", C);
+    };
+  }, [r, e.description, e.heading]);
+  const _ = r && !c, p = r ? a ? /* @__PURE__ */ k(xe, { children: [
+    e.heading,
+    " ",
+    e.description
+  ] }) : e.heading : e.description, d = e.icon ? /* @__PURE__ */ n("span", { className: g.iconSlot, children: e.icon }) : e.variant === "loading" ? /* @__PURE__ */ n(Z, { size: 20, color: "currentColor" }) : null, h = K(e.actionLabel);
+  return /* @__PURE__ */ n("div", { className: g.designContainer, children: /* @__PURE__ */ n(
+    "div",
+    {
+      "data-idb-component": !0,
+      className: [
+        g.snackbar,
+        g[e.variant],
+        e.isExiting ? g.snackbarExit : ""
+      ].filter(Boolean).join(" "),
+      style: e.customStyle,
+      role: "status",
+      "aria-live": "polite",
+      onMouseEnter: o,
+      onMouseLeave: t,
+      children: /* @__PURE__ */ k("div", { className: g.content, children: [
+        d ? /* @__PURE__ */ n("span", { className: g.leading, children: d }) : null,
+        /* @__PURE__ */ k("div", { className: g.message, children: [
+          _ ? /* @__PURE__ */ k(xe, { children: [
+            /* @__PURE__ */ n("p", { className: g.heading, children: e.heading }),
+            a ? /* @__PURE__ */ n("p", { className: g.description, children: e.description }) : null
+          ] }) : /* @__PURE__ */ n("p", { className: g.description, children: p }),
+          r ? (
+            // 실제 화면에는 보이지 않지만 heading 2줄 초과 여부를 안정적으로 측정하기 위한 숨김 영역
+            /* @__PURE__ */ k("div", { ref: l, className: g.measureContent, "aria-hidden": "true", children: [
+              /* @__PURE__ */ n("p", { className: g.heading, children: e.heading }),
+              a ? /* @__PURE__ */ n("p", { className: g.description, children: e.description }) : null
+            ] })
+          ) : null
+        ] }),
+        h || e.closeButton ? /* @__PURE__ */ k("span", { className: g.trailing, children: [
+          h ? /* @__PURE__ */ n(
+            Ft,
+            {
+              widthType: "flexible",
+              variant: "primary",
+              className: g.actionButton,
+              onClick: e.onActionClick,
+              children: e.actionLabel
+            }
+          ) : null,
+          e.closeButton ? /* @__PURE__ */ n(
+            He,
+            {
+              size: "small",
+              className: g.closeButton,
+              onClick: i,
+              children: /* @__PURE__ */ n("img", { src: Ct, alt: "", "aria-hidden": "true", className: g.closeIcon })
+            }
+          ) : null
+        ] }) : null
+      ] })
+    },
+    e.renderKey
+  ) });
+}
+function pe() {
+  if (j) {
+    if (!$) {
+      H(), z(), j.render(null);
+      return;
+    }
+    j.render(
+      /* @__PURE__ */ n(
+        co,
+        {
+          snackbar: $,
+          onPauseAutoHide: ro,
+          onResumeAutoHide: Ne,
+          onClose: uo
+        }
+      )
+    );
+  }
+}
+function os({
+  variant: e = "basic",
+  heading: o,
+  description: t,
+  icon: i,
+  actionLabel: l,
+  onActionClick: c,
+  closeButton: u = !1,
+  customStyle: r
+}) {
+  if (!K(o) && !K(t) || !lo())
+    return;
+  H(), z();
+  const a = u ? oo : to;
+  $ = {
+    variant: e,
+    heading: o,
+    description: t,
+    icon: i,
+    actionLabel: l,
+    onActionClick: c,
+    closeButton: u,
+    customStyle: r,
+    isExiting: !1,
+    renderKey: io++
+  }, pe(), ao(a);
+}
+function uo() {
+  me();
+}
+const _o = "data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M1.74995%2010C1.74995%205.44365%205.44359%201.75%209.99992%201.75C14.5562%201.75%2018.2499%205.44365%2018.2499%2010C18.2499%2014.5563%2014.5562%2018.25%209.99992%2018.25C5.44359%2018.25%201.74995%2014.5563%201.74995%2010ZM13.8722%208.22987C14.1602%207.93224%2014.1525%207.45743%2013.8549%207.16935C13.5572%206.88127%2013.0824%206.88901%2012.7944%207.18664L8.89773%2011.2124L7.20623%209.4601C6.91856%209.16208%206.44376%209.15369%206.14574%209.44137C5.84772%209.72904%205.83933%2010.2038%206.12701%2010.5019L8.35739%2012.8125C8.4986%2012.9588%208.69316%2013.0414%208.89649%2013.0416C9.09982%2013.0417%209.29449%2012.9593%209.4359%2012.8132L13.8722%208.22987Z'%20fill='%2300CC89'/%3e%3c/svg%3e", mo = "data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M9.01687%202.58344C9.64256%202.30487%2010.3571%202.30487%2010.9828%202.58344C11.4189%202.77761%2011.7337%203.13353%2012.0073%203.52081C12.2786%203.90474%2012.577%204.42169%2012.9401%205.05063L17.1992%2012.4276C17.5623%2013.0565%2017.8608%2013.5734%2018.0576%2014.0003C18.2562%2014.4309%2018.407%2014.8815%2018.3571%2015.3563C18.2855%2016.0374%2017.9283%2016.6562%2017.3742%2017.0588C16.988%2017.3394%2016.5223%2017.4341%2016.0501%2017.4774C15.582%2017.5204%2014.9851%2017.5204%2014.2588%2017.5203H5.74078C5.01454%2017.5204%204.41762%2017.5204%203.94949%2017.4774C3.4773%2017.4341%203.01164%2017.3394%202.62544%2017.0588C2.07134%2016.6562%201.71409%2016.0374%201.64249%2015.3563C1.59259%2014.8815%201.74341%2014.4309%201.94199%2014.0003C2.13886%2013.5734%202.43733%2013.0565%202.80046%2012.4275L7.0595%205.05064C7.42261%204.42169%207.72106%203.90474%207.99231%203.5208C8.26593%203.13353%208.58077%202.77761%209.01687%202.58344ZM9.99995%206.74951C10.4142%206.74951%2010.7499%207.0853%2010.7499%207.49951V10.8328C10.7499%2011.2471%2010.4142%2011.5828%209.99995%2011.5828C9.58574%2011.5828%209.24995%2011.2471%209.24995%2010.8328V7.49951C9.24995%207.0853%209.58574%206.74951%209.99995%206.74951ZM10.8332%2013.7495C10.8332%2014.2097%2010.4601%2014.5828%209.99985%2014.5828C9.53961%2014.5828%209.16652%2014.2097%209.16652%2013.7495C9.16652%2013.2893%209.53961%2012.9162%209.99985%2012.9162C10.4601%2012.9162%2010.8332%2013.2893%2010.8332%2013.7495Z'%20fill='%23FF334B'/%3e%3c/svg%3e", po = "_designContainer_1kal7_1", fo = "_toast_1kal7_11", ho = "_toastEnter_1kal7_1", go = "_basic_1kal7_32", xo = "_positive_1kal7_36", yo = "_negative_1kal7_40", bo = "_content_1kal7_44", Co = "_iconSlot_1kal7_55", vo = "_message_1kal7_64", $o = "_icon_1kal7_55", No = "_toastExit_1kal7_89", R = {
+  designContainer: po,
+  toast: fo,
+  toastEnter: ho,
+  basic: go,
+  positive: xo,
+  negative: yo,
+  content: bo,
+  iconSlot: Co,
+  message: vo,
+  icon: $o,
+  toastExit: No
+}, wo = 3e3, ko = 180;
+let V = null, Q = null, v = null, Bo = 0, ne = null, te = null;
+function fe() {
+  ne !== null && (window.clearTimeout(ne), ne = null);
+}
+function he() {
+  te !== null && (window.clearTimeout(te), te = null);
+}
+function ie() {
+  if (!V)
+    return;
+  if (!v) {
+    V.render(null);
+    return;
+  }
+  const e = v.variant === "positive" ? /* @__PURE__ */ n("img", { src: _o, className: R.icon, alt: "", "aria-hidden": "true" }) : v.variant === "negative" ? /* @__PURE__ */ n("img", { src: mo, className: R.icon, alt: "", "aria-hidden": "true" }) : null, o = v.icon !== void 0 ? v.icon : e;
+  V.render(
+    /* @__PURE__ */ n("div", { className: R.designContainer, children: /* @__PURE__ */ n(
+      "div",
+      {
+        className: [
+          R.toast,
+          R[v.variant],
+          v.isExiting ? R.toastExit : ""
+        ].filter(Boolean).join(" "),
+        style: v.customStyle,
+        children: /* @__PURE__ */ k("span", { className: R.content, children: [
+          o ? /* @__PURE__ */ n("span", { className: R.iconSlot, children: o }) : null,
+          /* @__PURE__ */ n("span", { className: R.message, children: v.message })
+        ] })
+      },
+      v.renderKey
+    ) })
+  );
+}
+function we() {
+  !v || v.isExiting || (fe(), he(), v = {
+    ...v,
+    isExiting: !0
+  }, ie(), te = window.setTimeout(() => {
+    v = null, ie(), he();
+  }, ko));
+}
+function Eo() {
+  fe(), he(), ne = window.setTimeout(() => {
+    we(), fe();
+  }, wo);
+}
+function So() {
+  return typeof window > "u" || typeof document > "u" ? !1 : (V || (Q = document.createElement("div"), Q.setAttribute("data-idb-toast-root", "true"), document.body.appendChild(Q), V = $e.createRoot(Q), ie()), !0);
+}
+function ss({ message: e, variant: o = "basic", customStyle: t, icon: i }) {
+  e != null && So() && (v = {
+    message: e,
+    variant: o,
+    customStyle: t,
+    icon: i,
+    isExiting: !1,
+    renderKey: Bo++
+  }, ie(), Eo());
+}
+function is() {
+  we();
+}
+const To = "_button_16957_1", Io = "_content_16957_18", Ao = "_fixed_16957_36", Mo = "_fixedContent_16957_42", Ro = "_node_16957_52", Do = "_text_16957_58", qo = "_large_16957_68", Lo = "_medium_16957_69", Fo = "_small_16957_70", Ho = "_xsmall_16957_74", Oo = "_flexible_16957_79", Wo = "_primary_16957_97", jo = "_assistive_16957_98", Po = "_error_16957_99", Ko = "_loading_16957_100", Vo = "_spinnerWrapper_16957_171", I = {
+  button: To,
+  content: Io,
+  fixed: Ao,
+  fixedContent: Mo,
+  node: Ro,
+  text: Do,
+  large: qo,
+  medium: Lo,
+  small: Fo,
+  xsmall: Ho,
+  flexible: Oo,
+  primary: Wo,
+  assistive: jo,
+  error: Po,
+  loading: Ko,
+  spinnerWrapper: Vo,
+  "spinner-primary": "_spinner-primary_16957_178",
+  "spinner-error": "_spinner-error_16957_182",
+  "spinner-assistive": "_spinner-assistive_16957_183"
+};
+function ls({
+  widthType: e = "flexible",
+  variant: o = "primary",
+  size: t = "medium",
+  disabled: i = !1,
+  loading: l = !1,
+  keepFocusOnClick: c = !1,
+  customStyle: u = {},
+  onClick: r,
+  className: a,
+  children: _,
+  type: p = "button",
+  ...d
+}) {
+  const h = [
+    I.button,
+    I[e],
+    I[o],
+    I[t],
+    l ? I.loading : "",
+    a ?? ""
+  ].filter(Boolean).join(" "), b = [I.spinnerWrapper, I[`spinner-${o}`]].filter(Boolean).join(" "), x = [I.content, e === "fixed" ? I.fixedContent : ""].filter(Boolean).join(" "), N = e === "fixed" ? le.map(_, (s) => {
+    const y = typeof s == "string" || typeof s == "number" ? I.text : I.node;
+    return /* @__PURE__ */ n("span", { className: y, children: s });
+  }) : _, C = q(() => ({
+    large: 24,
+    medium: 24,
+    small: 24,
+    xsmall: 16
+  })[t], [t]);
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      "data-idb-component": !0,
+      type: p,
+      className: h,
+      onClick: l ? void 0 : (s) => {
+        r?.(s), !c && !s.defaultPrevented && s.currentTarget.blur();
+      },
+      disabled: i,
+      style: u,
+      ...d,
+      children: l ? /* @__PURE__ */ n("span", { className: b, children: /* @__PURE__ */ n(Z, { size: C, color: "currentColor" }) }) : /* @__PURE__ */ n("span", { className: x, children: N })
+    }
+  );
+}
+export {
+  He as BasicIconButton,
+  Z as Clip,
+  Ue as CustomSpinner,
+  Xo as FadeSpinner,
+  Go as FillButton,
+  Jo as FillIconButton,
+  Xn as Input,
+  Qo as OutlineButton,
+  es as OutlineIconButton,
+  ns as PushBadge,
+  ts as SearchBar,
+  Yo as Spinner,
+  Ft as TextButton,
+  ls as WeakButton,
+  uo as dismissSnackbar,
+  is as dismissToast,
+  os as showSnackbar,
+  ss as showToast
+};