@dotss/ui 0.0.8 → 0.0.11

package/DatePicker/DatePicker.es.js

@@ -0,0 +1,624 @@
+import { jsxs as H, jsx as u } from "@emotion/react/jsx-runtime";
+import { forwardRef as Pt, useState as Y, useRef as v, useCallback as te, useLayoutEffect as Yt, useEffect as Z } from "react";
+import ct from "../IconButton/IconButton.es.js";
+import ee from "../Menu/Menu.es.js";
+import ne from "../Menu/MenuBlock/MenuBlock.es.js";
+import "../Menu/MenuButton/MenuButton.es.js";
+import re from "../core/useTheme.es.js";
+import x from "@emotion/styled";
+import P from "../utils/getContrastingTextColor/getContrastingTextColor.es.js";
+const ie = x.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: { spacing: t } }) => t.content(2)}px;
+`, se = x.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  max-width: fit-content;
+  padding: 0 ${({ theme: { spacing: t } }) => t.content(3)}px;
+  cursor: ${({ clickable: t }) => t ? "pointer" : "default"};
+
+  ${({
+  theme: {
+    typography: { h4B: t }
+  }
+}) => ({
+  fontSize: t.size,
+  fontWeight: t.weight,
+  lineHeight: t.lineHeight,
+  letterSpacing: t.letterSpacing
+})};
+`, oe = x.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme: { spacing: t } }) => t.content(4)}px;
+
+  ${({
+  theme: {
+    typography: { h2B: t }
+  }
+}) => ({
+  fontSize: t.size,
+  fontWeight: t.weight,
+  lineHeight: t.lineHeight,
+  letterSpacing: t.letterSpacing
+})};
+`, ce = x.div`
+  display: flex;
+  align-items: center;
+  padding: 0 ${({ theme: { spacing: t }, edgeSpacing: n }) => t.content(n || 0)}px;
+
+  & > span {
+    margin: 5px 0;
+    flex-grow: 1;
+    text-align: center;
+    ${({
+  theme: {
+    palette: { grey: t },
+    typography: { b4M: n }
+  }
+}) => ({
+  fontSize: n.size,
+  fontWeight: n.weight,
+  lineHeight: n.lineHeight,
+  letterSpacing: n.letterSpacing,
+  color: t[50]
+})};
+  }
+`, ae = x.div`
+  overflow: hidden;
+`, le = x.div`
+  display: flex;
+  transform: translate3d(0, 0, 0);
+`, Ft = x.div`
+  display: flex;
+  flex-direction: column;
+  min-width: 100%;
+  gap: ${({ theme: { spacing: t } }) => t.content(2)}px;
+  padding: ${({ theme: { spacing: t } }) => t.content(2)}px
+    ${({ theme: { spacing: t }, edgeSpacing: n }) => t.content(n || 0)}px;
+`, jt = x.div`
+  display: flex;
+  width: 100%;
+`, Ot = x.div`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: ${({ theme: { spacing: t } }) => t.content(1)}px;
+  flex: 1;
+  cursor: ${({ disabled: t }) => t ? "not-allowed" : "pointer"};
+  pointer-events: ${({ disabled: t }) => t ? "none" : "auto"};
+  min-width: 30px;
+
+  & > div:nth-of-type(1) {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-height: 30px;
+    z-index: 1;
+
+    & > span {
+      z-index: 2;
+    }
+  }
+
+  ${({
+  theme: {
+    typography: { b2R: t }
+  }
+}) => ({
+  fontSize: t.size,
+  fontWeight: t.weight,
+  lineHeight: t.lineHeight,
+  letterSpacing: t.letterSpacing
+})};
+
+  ${({
+  theme: {
+    palette: { brand: t, grey: n }
+  },
+  variant: r,
+  today: i,
+  selected: o,
+  disabled: l
+}) => {
+  if (o) {
+    let s = {
+      fontWeight: 700,
+      color: P(t.primary.main, [n.white, n[100]]),
+      "& > div:nth-of-type(1):before": {
+        content: '""',
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        width: 30,
+        height: 30,
+        transform: "translate(-50%, -50%)",
+        backgroundColor: l ? t.primary.disable : t.primary.main,
+        borderRadius: "50%"
+      }
+    };
+    return r === "start" && (s = {
+      fontWeight: 700,
+      color: P(t.primary.main, [n.white, n[100]]),
+      overflow: "hidden",
+      "& > div:nth-of-type(1):before": {
+        content: '""',
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        width: 30,
+        height: 30,
+        transform: "translate(-50%, -50%)",
+        backgroundColor: l ? t.primary.disable : t.primary.main,
+        borderTopLeftRadius: 100,
+        borderBottomLeftRadius: 100
+      },
+      "& > div:nth-of-type(1):after": {
+        content: '""',
+        position: "absolute",
+        top: "50%",
+        left: 30,
+        width: "100%",
+        height: 30,
+        transform: "translateY(-50%)",
+        backgroundColor: l ? t.primary.disable : t.primary.main
+      }
+    }), r === "end" && (s = {
+      fontWeight: 700,
+      color: P(t.primary.main, [n.white, n[100]]),
+      overflow: "hidden",
+      "& > div:nth-of-type(1):before": {
+        content: '""',
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        width: 30,
+        height: 30,
+        transform: "translate(-50%, -50%)",
+        backgroundColor: l ? t.primary.disable : t.primary.main,
+        borderTopRightRadius: 100,
+        borderBottomRightRadius: 100
+      },
+      "& > div:nth-of-type(1):after": {
+        content: '""',
+        position: "absolute",
+        top: "50%",
+        right: "50%",
+        width: "100%",
+        height: 30,
+        transform: "translateY(-50%)",
+        backgroundColor: l ? t.primary.disable : t.primary.main
+      }
+    }), r === "middle" && (s = {
+      fontWeight: 700,
+      color: P(t.primary.main, [n.white, n[100]]),
+      overflow: "hidden",
+      "& > div:nth-of-type(1):after": {
+        content: '""',
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        width: "calc(100% + 1px)",
+        height: 30,
+        transform: "translate(-50%, -50%)",
+        backgroundColor: l ? t.primary.disable : t.primary.main
+      }
+    }), s;
+  }
+  return i ? {
+    "& > div:nth-of-type(1):after": {
+      content: '""',
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      width: 30,
+      height: 30,
+      transform: "translate(-50%, -50%)",
+      border: `1px solid ${t.primary.main}`,
+      borderRadius: "50%"
+    }
+  } : null;
+}};
+
+  ${({
+  theme: {
+    palette: { grey: t, pink: n, brand: r }
+  },
+  holiday: i,
+  disabled: o,
+  selected: l
+}) => {
+  let s = null;
+  return i && (s = {
+    color: P(l ? r.primary.main : "transparent", [
+      n[30],
+      n[100]
+    ])
+  }), o && (s = {
+    color: t[30]
+  }), o && i && (s = {
+    color: n[30]
+  }), s;
+}}
+`, fe = x.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  cursor: ${({ clickable: t }) => t ? "pointer" : "default"};
+`, Xt = x.span`
+  width: 100%;
+  min-width: 100%;
+  height: 6px;
+  min-height: 6px;
+`, ue = 30, xe = Pt(function({
+  children: n,
+  onChange: r,
+  value: i,
+  date: o,
+  minDate: l,
+  maxDate: s,
+  holidayDates: h,
+  disableDates: K,
+  showWeekHead: at = !1,
+  multiple: T = !1,
+  period: tt = !1,
+  enableMonthSelect: b = !1,
+  showToday: At = !1,
+  edgeSpacing: lt = 0,
+  renderEvent: z,
+  inlineCSS: Et,
+  ...Nt
+}, qt) {
+  const { spacing: St } = re(), [O, ft] = Y(
+    (typeof o == "string" || typeof o == "number" ? new Date(o) : o) || /* @__PURE__ */ new Date()
+  ), [g, U] = Y(() => Array.isArray(i) && i.length > 0 ? $(i[0]) : $(i)), [I, et] = Y(() => Array.isArray(i) && i.length > 1 ? $(i[i.length - 1]) : null), [M, vt] = Y(0), [w, X] = Y(1), [kt, Rt] = Y(!1), [ut, Wt] = Y(!1), dt = v(null), m = v(null), nt = v(0), R = v(0), A = v(!1), V = v(w), ht = v(), mt = v(null), pt = v(null), W = O.getFullYear(), rt = O.getMonth(), Ht = Tt(W, rt), C = j(rt), _ = $(i), B = $(h), E = $(K), yt = q(O, l) || _t(O, l), gt = F(O, s) || _t(O, s), it = new Date(W, rt - 1), st = new Date(W, rt + 1), J = `${W}. ${C}`, N = tt && !!g && !!I, bt = [
+    {
+      year: it.getFullYear(),
+      month: j(it.getMonth()),
+      weeks: Tt(it.getFullYear(), it.getMonth())
+    },
+    {
+      year: W,
+      month: C,
+      weeks: Ht
+    },
+    {
+      year: st.getFullYear(),
+      month: j(st.getMonth()),
+      weeks: Tt(st.getFullYear(), st.getMonth())
+    }
+  ], Dt = typeof z == "function", Gt = bt[1].weeks.length * (ue + (Dt ? 10 : 0) + St.content(2)) + St.content(2), zt = (e) => () => {
+    T && (m.current && (m.current.style.transition = "none", m.current.style.cursor = "grabbing"), nt.current = e, A.current = !0);
+  }, L = te(() => {
+    if (!A.current) return;
+    const e = M - R.current, f = Math.abs(M - e), a = M * 0.1;
+    m.current && (m.current.style.transform = `translate3d(-${M * w}px, 0, 0)`, m.current.style.cursor = "grab", m.current.style.transition = "transform 0.2s"), nt.current = 0, R.current = 0, A.current = !1, !(f <= a) && (M < e ? X((p) => p + 1) : M > e && X((p) => p - 1));
+  }, [M, w]), It = (e) => () => {
+    if (!(A.current || w !== 1)) {
+      if (!tt) {
+        r == null || r(e, $);
+        return;
+      }
+      if (k(e, g) && Array.isArray(i) && i.length === 1) {
+        U(null), et(null), r == null || r([], $);
+        return;
+      } else if (k(e, g) && !Array.isArray(i) && k(e, i)) {
+        U(null), et(null), r == null || r([], $);
+        return;
+      }
+      if (!g) {
+        U(e), r == null || r(e, $);
+        return;
+      }
+      if (!I && g) {
+        const [f, a] = F(e, g) ? [g, e] : [e, g];
+        U(f), et(a);
+        const p = Bt([f, a], K);
+        r == null || r(p, $);
+        return;
+      }
+      g && I && (U(e), et(null), r == null || r(e, $));
+    }
+  }, Kt = (e) => zt(e.clientX)(), Ut = (e) => zt(e.touches[0].clientX)(), Vt = () => {
+    kt || (m.current && (m.current.style.transition = "transform 0.2s"), X((e) => e - 1));
+  }, Ct = () => {
+    kt || (m.current && (m.current.style.transition = "transform 0.2s"), X((e) => e + 1));
+  }, $t = () => Wt((e) => !e), Jt = (e) => {
+    if (!e) return;
+    const [f, a] = e.toString().split(".").map(Number);
+    ft(new Date(f, a - 1)), Wt(!1);
+  };
+  return Yt(() => {
+    var e;
+    vt(((e = dt.current) == null ? void 0 : e.clientWidth) || 0);
+  }, [T]), Z(() => {
+    const e = () => {
+      var f;
+      vt(((f = dt.current) == null ? void 0 : f.clientWidth) || 0);
+    };
+    return window.addEventListener("resize", e), window.addEventListener("scroll", e), () => {
+      window.removeEventListener("resize", e), window.removeEventListener("scroll", e);
+    };
+  }, [T]), Z(() => {
+    const e = m.current, f = (c, y, D) => {
+      if (!e || !A.current) return;
+      R.current = c - nt.current;
+      const d = y - nt.current, S = 5;
+      if (A.current = A.current || Math.abs(R.current) > S && Math.abs(d) < S * 2, D.cancelable && D.preventDefault(), A.current) {
+        if (yt && R.current > 0) {
+          L();
+          return;
+        }
+        if (gt && R.current < 0) {
+          L();
+          return;
+        }
+        Math.abs(R.current) >= 10 && (e.style.transform = `translate3d(${R.current - M * w}px, 0, 0)`, e.style.cursor = "grabbing");
+      }
+    }, a = (c) => f(c.touches[0].clientX, c.touches[0].clientY, c), p = (c) => {
+      A.current && f(c.clientX, c.clientY, c);
+    };
+    return e == null || e.addEventListener("mousemove", p), e == null || e.addEventListener("touchmove", a), () => {
+      e == null || e.removeEventListener("mousemove", p), e == null || e.removeEventListener("touchmove", a);
+    };
+  }, [M, w, L, gt, yt]), Z(() => {
+    Rt(!0), ht.current = setTimeout(() => {
+      m.current && (m.current.style.transition = "none"), w > V.current ? (X(1), ft((e) => new Date(e.setMonth(e.getMonth() + 1))), V.current = 1) : w < V.current ? (ft((e) => new Date(e.setMonth(e.getMonth() - 1))), X(1), V.current = 1) : V.current = w, Rt(!1);
+    }, 200);
+  }, [w]), Yt(() => {
+    if (!tt || !Array.isArray(i)) return;
+    const e = Bt(i, K);
+    i.length < e.length && (r == null || r(e, $));
+  }, [tt, i, r, K]), Z(() => {
+    let e;
+    return ut && (e = setTimeout(() => {
+      if (pt.current) {
+        const f = pt.current.querySelector("ul"), a = f == null ? void 0 : f.querySelector(`[data-value="${J}"]`);
+        a == null || a.scrollIntoView({
+          block: "start"
+        });
+      }
+    }, 200)), () => {
+      clearTimeout(e);
+    };
+  }, [ut, J]), Z(() => () => {
+    ht.current && clearTimeout(ht.current);
+  }, []), /* @__PURE__ */ H(ie, { ref: qt, ...Nt, css: Et, children: [
+    T ? /* @__PURE__ */ H(oe, { children: [
+      /* @__PURE__ */ u(
+        ct,
+        {
+          name: "ChevronLeftLine",
+          size: "small",
+          onClick: Vt,
+          disabled: yt
+        }
+      ),
+      /* @__PURE__ */ H(
+        fe,
+        {
+          ref: mt,
+          clickable: !!b,
+          onClick: b ? $t : void 0,
+          children: [
+            J,
+            b && /* @__PURE__ */ u(ct, { name: "ArrowDownFill", size: "xSmall" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ u(
+        ct,
+        {
+          name: "ChevronRightLine",
+          size: "small",
+          onClick: Ct,
+          disabled: gt
+        }
+      )
+    ] }) : /* @__PURE__ */ H(
+      se,
+      {
+        ref: mt,
+        clickable: !!b,
+        onClick: b ? $t : void 0,
+        children: [
+          J,
+          b && /* @__PURE__ */ u(ct, { name: "ArrowDownFill", size: "xSmall" })
+        ]
+      }
+    ),
+    b && /* @__PURE__ */ u(
+      ee,
+      {
+        anchorRef: mt,
+        ref: pt,
+        open: ut,
+        onClose: $t,
+        onChange: Jt,
+        value: J,
+        placement: T ? "bottom-center" : "bottom-left",
+        width: 160,
+        fitToAnchorWidth: !1,
+        maxHeight: 368,
+        children: Array.from({ length: 130 }, (e, f) => {
+          const a = 1970 + f;
+          return Array.from({ length: 12 }, (p, c) => {
+            const y = c + 1, D = y < 10 ? `0${y}` : y, d = new Date(a, c + 1, 0).getDate(), S = `${a}-${D}-${d}`, Q = `${a}-${D}-01`;
+            return q(S, l) || F(Q, s) ? null : /* @__PURE__ */ u(ne, { value: `${a}. ${D}`, children: `${a}. ${D}` }, `${a}-${D}`);
+          });
+        })
+      }
+    ),
+    at && /* @__PURE__ */ H(ce, { edgeSpacing: lt, children: [
+      /* @__PURE__ */ u("span", { children: "일" }),
+      /* @__PURE__ */ u("span", { children: "월" }),
+      /* @__PURE__ */ u("span", { children: "화" }),
+      /* @__PURE__ */ u("span", { children: "수" }),
+      /* @__PURE__ */ u("span", { children: "목" }),
+      /* @__PURE__ */ u("span", { children: "금" }),
+      /* @__PURE__ */ u("span", { children: "토" })
+    ] }),
+    /* @__PURE__ */ u(ae, { ref: dt, children: /* @__PURE__ */ H(
+      le,
+      {
+        ref: m,
+        onMouseDown: Kt,
+        onMouseUp: L,
+        onMouseLeave: L,
+        onTouchStart: Ut,
+        onTouchEnd: L,
+        onTouchCancel: L,
+        style: {
+          transform: T ? `translate3d(-${M * w}px, 0, 0)` : void 0,
+          cursor: T ? "grab" : void 0,
+          maxHeight: Gt
+        },
+        children: [
+          T && bt.map(({ year: e, month: f, weeks: a }) => /* @__PURE__ */ u(
+            Ft,
+            {
+              edgeSpacing: lt,
+              children: a.map((p, c) => /* @__PURE__ */ u(jt, { children: p.map((y, D) => {
+                const d = `${e}-${f}-${G(y || 0)}`, S = !y, Q = k(d, /* @__PURE__ */ new Date()), wt = Array.isArray(B) ? B.includes(d) : B === d, xt = Array.isArray(_) ? _.includes(d) : _ === d, Mt = !y || (Array.isArray(E) ? E.includes(d) : E === d) || F(d, s) || q(d, l), ot = N && k(d, g), Qt = N && k(d, I), Zt = N && F(d, g) && q(d, I), Lt = z == null ? void 0 : z(d);
+                return /* @__PURE__ */ H(
+                  Ot,
+                  {
+                    variant: ot ? "start" : Qt ? "end" : Zt ? "middle" : void 0,
+                    onClick: It(d),
+                    today: At && Q,
+                    holiday: wt,
+                    selected: xt,
+                    disabled: Mt,
+                    children: [
+                      /* @__PURE__ */ u("div", { children: /* @__PURE__ */ u("span", { children: y }) }),
+                      !S && Lt,
+                      !S && Dt && !Lt && /* @__PURE__ */ u(Xt, {})
+                    ]
+                  },
+                  `${e}-${f}-week-row-${D}-${y ? d : `${c}-${D}`}`
+                );
+              }) }, `${e}-${f}-week-row-${String(p)}`))
+            },
+            `week-body-${e}-${f}`
+          )),
+          !T && /* @__PURE__ */ u(Ft, { edgeSpacing: lt, children: Ht.map((e, f) => /* @__PURE__ */ u(jt, { children: e.map((a, p) => {
+            const c = `${W}-${C}-${G(a || 0)}`, y = !a, D = k(c, /* @__PURE__ */ new Date()), d = Array.isArray(B) ? B.includes(c) : B === c, S = Array.isArray(_) ? _.includes(c) : _ === c, Q = !a || (Array.isArray(E) ? E.includes(c) : E === c) || F(c, s) || q(c, l), wt = N && k(c, g), xt = N && k(c, I), Mt = N && F(c, g) && q(c, I), ot = z == null ? void 0 : z(c);
+            return /* @__PURE__ */ H(
+              Ot,
+              {
+                variant: wt ? "start" : xt ? "end" : Mt ? "middle" : void 0,
+                onClick: It(c),
+                today: At && D,
+                holiday: d,
+                selected: S,
+                disabled: Q,
+                children: [
+                  /* @__PURE__ */ u("div", { children: /* @__PURE__ */ u("span", { children: a }) }),
+                  !y && ot,
+                  !y && Dt && !ot && /* @__PURE__ */ u(Xt, {})
+                ]
+              },
+              `${W}-${C}-week-row-${e}-${a ? c : `${f}-${p}`}`
+            );
+          }) }, `${W}-${C}-week-row-${String(e)}`)) })
+        ]
+      }
+    ) }),
+    n
+  ] });
+});
+function Tt(t, n) {
+  let r = [];
+  const i = new Date(t, n, 1), o = new Date(t, n + 1, 0).getDate(), l = i.getDay();
+  let s = Array.from({ length: l }).fill(null);
+  for (let h = 1; h <= o; h += 1)
+    s.push(h), (s.length === 7 || h === o) && (r.push(s), s = []);
+  return r = r.map(
+    (h) => Array.from({ length: 7 }).map((K, at) => h[at] || null)
+  ), r;
+}
+function j(t) {
+  return String(t + 1).length === 1 ? `0${t + 1}` : t + 1;
+}
+function G(t) {
+  return String(t).length === 1 ? `0${t}` : t;
+}
+function $(t) {
+  if (Array.isArray(t))
+    return t.map((n) => n instanceof Date ? `${n.getFullYear()}-${j(n.getMonth())}-${G(n.getDate())}` : n);
+  if (t instanceof Date)
+    return `${t.getFullYear()}-${j(t.getMonth())}-${G(t.getDate())}`;
+  if (typeof t == "number") {
+    const n = new Date(t);
+    return `${n.getFullYear()}-${j(n.getMonth())}-${G(n.getDate())}`;
+  }
+  return t;
+}
+function F(t, n) {
+  if (!t || !n)
+    return !1;
+  const r = t instanceof Date ? t : new Date(t);
+  r.setHours(0), r.setMinutes(0), r.setSeconds(0), r.setMilliseconds(0);
+  const i = r.getTime(), o = n instanceof Date ? n : new Date(n);
+  o.setHours(0), o.setMinutes(0), o.setSeconds(0), o.setMilliseconds(0);
+  const l = o.getTime();
+  return i > l;
+}
+function q(t, n) {
+  if (!t || !n)
+    return !1;
+  const r = t instanceof Date ? t : new Date(t);
+  r.setHours(0), r.setMinutes(0), r.setSeconds(0), r.setMilliseconds(0);
+  const i = r.getTime(), o = n instanceof Date ? n : new Date(n);
+  o.setHours(0), o.setMinutes(0), o.setSeconds(0), o.setMilliseconds(0);
+  const l = o.getTime();
+  return i < l;
+}
+function _t(t, n) {
+  if (!t || !n)
+    return !1;
+  const r = t instanceof Date ? t : new Date(t), i = n instanceof Date ? n : new Date(n);
+  return `${r.getFullYear()}-${r.getMonth()}` == `${i.getFullYear()}-${i.getMonth()}`;
+}
+function k(t, n) {
+  if (!t || !n)
+    return !1;
+  const r = t instanceof Date ? t : new Date(t);
+  r.setHours(0), r.setMinutes(0), r.setSeconds(0), r.setMilliseconds(0);
+  const i = r.getTime(), o = n instanceof Date ? n : new Date(n);
+  o.setHours(0), o.setMinutes(0), o.setSeconds(0), o.setMilliseconds(0);
+  const l = o.getTime();
+  return i === l;
+}
+function Bt(t, n) {
+  if (!t || !Array.isArray(t) || t.length === 0)
+    return [];
+  const r = t.map((h) => h instanceof Date ? h : h === null ? /* @__PURE__ */ new Date() : new Date(h)), i = new Date(Math.min(...r.map((h) => h.getTime()))), o = new Date(Math.max(...r.map((h) => h.getTime()))), l = [], s = new Date(i);
+  for (; s <= o; ) {
+    if (Array.isArray(n) && n.includes(s)) {
+      s.setDate(s.getDate() + 1);
+      continue;
+    } else if (n === s) {
+      s.setDate(s.getDate() + 1);
+      continue;
+    }
+    l.push(
+      `${s.getFullYear()}-${j(s.getMonth())}-${G(
+        s.getDate()
+      )}`
+    ), s.setDate(s.getDate() + 1);
+  }
+  return l;
+}
+export {
+  xe as default
+};

package/{dist/DatePicker → DatePicker}/DatePicker.stories.d.ts

@@ -25,3 +25,4 @@ export declare const MultipleSelect: Story;
 export declare const MultipleMode: Story;
 export declare const PeriodMode: Story;
 export declare const EnableMonthSelect: Story;
+export declare const RenderEvent: Story;

package/DatePicker/EventDot/EventDot.cjs

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@emotion/react/jsx-runtime"),r=require("@emotion/styled"),u=require("../../utils/getPaletteColor/getPaletteColor.cjs"),n=e=>e&&e.__esModule?e:{default:e},l=n(r),d=l.default.span`
+  width: 6px;
+  min-width: 6px;
+  height: 6px;
+  min-height: 6px;
+  border-radius: 50%;
+  background-color: ${({theme:e,color:t="grey.100"})=>u.default(t,{theme:e})};
+`;function i(e){return o.jsx(d,{...e})}exports.default=i;

package/DatePicker/EventDot/EventDot.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+import { Color, GeneralComponentProps } from '../../typings/component';
+
+export interface EventDotProps extends GeneralComponentProps<Omit<HTMLAttributes<HTMLSpanElement>, 'color'>> {
+    color: Color;
+}
+declare function EventDot(props: EventDotProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export default EventDot;

package/DatePicker/EventDot/EventDot.es.js

@@ -0,0 +1,19 @@
+import { jsx as r } from "@emotion/react/jsx-runtime";
+import e from "@emotion/styled";
+import i from "../../utils/getPaletteColor/getPaletteColor.es.js";
+const n = e.span`
+  width: 6px;
+  min-width: 6px;
+  height: 6px;
+  min-height: 6px;
+  border-radius: 50%;
+  background-color: ${({ theme: t, color: o = "grey.100" }) => i(o, {
+  theme: t
+})};
+`;
+function a(t) {
+  return /* @__PURE__ */ r(n, { ...t });
+}
+export {
+  a as default
+};

package/DatePicker/EventDot/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./EventDot.cjs");exports.default=e.default;

package/DatePicker/EventDot/index.d.ts

@@ -0,0 +1,3 @@
+import { default as EventDot } from './EventDot';
+
+export default EventDot;

package/DatePicker/EventDot/index.es.js

@@ -0,0 +1,4 @@
+import o from "./EventDot.es.js";
+export {
+  o as default
+};

package/DatePicker/EventDotGroup/EventDotGroup.cjs

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("@emotion/react/jsx-runtime"),i=require("react"),a=require("@emotion/styled"),d=require("../EventDot/EventDot.cjs"),f=e=>e&&e.__esModule?e:{default:e},u=f(a),h=u.default.div`
+  display: flex;
+  align-items: center;
+  gap: ${({theme:{spacing:e}})=>e.content(.5)}px;
+  max-height: 6px;
+`,p=u.default.span`
+  ${({theme:{palette:{grey:e},typography:t}})=>{const{size:o,weight:n,lineHeight:r,letterSpacing:s}=t.c5R;return{fontSize:o,fontWeight:n,lineHeight:r,letterSpacing:s,color:e[50]}}};
+`;function g({children:e,limit:t=4,...o}){const n=i.Children.toArray(e).filter(i.isValidElement).filter(c=>c.type===d.default),r=n.length,s=r>t;return l.jsxs(h,{...o,children:[i.Children.toArray(n).slice(0,t),s&&l.jsxs(p,{children:["+",r-t]})]})}exports.default=g;