@x-plat/design-system 0.5.2 → 0.5.4

package/dist/components/index.cjs

@@ -1357,38 +1357,45 @@ var clsx_default = clsx;
 
 // src/components/Accordion/Accordion.tsx
 var import_jsx_runtime295 = require("react/jsx-runtime");
-var AccordionItem = ({ item, isOpen, onToggle }) => {
-  const bodyRef = import_react.default.useRef(null);
-  const [height, setHeight] = import_react.default.useState(0);
-  import_react.default.useEffect(() => {
-    if (bodyRef.current) {
-      setHeight(bodyRef.current.scrollHeight);
-    }
-  }, [isOpen, item.content]);
-  return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("div", { className: clsx_default("accordion-item", { open: isOpen }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)(
-      "button",
-      {
-        className: "accordion-header",
-        onClick: onToggle,
-        "aria-expanded": isOpen,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("span", { className: "title", children: item.title }),
-          /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("span", { className: "chevron", children: /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(ChevronDownIcon_default, {}) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(
-      "div",
-      {
-        ref: bodyRef,
-        className: "accordion-body",
-        style: { maxHeight: isOpen ? height : 0 },
-        children: /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("div", { className: "accordion-content", children: item.content })
+var AccordionItem = import_react.default.memo(
+  ({
+    item,
+    isOpen,
+    onToggle
+  }) => {
+    const bodyRef = import_react.default.useRef(null);
+    const [height, setHeight] = import_react.default.useState(0);
+    import_react.default.useEffect(() => {
+      if (bodyRef.current) {
+        setHeight(bodyRef.current.scrollHeight);
       }
-    )
-  ] });
-};
+    }, [isOpen, item.content]);
+    return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("div", { className: clsx_default("accordion-item", { open: isOpen }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)(
+        "button",
+        {
+          className: "accordion-header",
+          onClick: onToggle,
+          "aria-expanded": isOpen,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("span", { className: "title", children: item.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("span", { className: "chevron", children: /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(ChevronDownIcon_default, {}) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(
+        "div",
+        {
+          ref: bodyRef,
+          className: "accordion-body",
+          style: { maxHeight: isOpen ? height : 0 },
+          children: /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("div", { className: "accordion-content", children: item.content })
+        }
+      )
+    ] });
+  }
+);
+AccordionItem.displayName = "AccordionItem";
 var Accordion = (props) => {
   const { items } = props;
   const isMultiple = props.multiple === true;
@@ -1643,6 +1650,76 @@ var MONTH_LABELS = {
 
 // src/components/Calendar/Calendar.tsx
 var import_jsx_runtime301 = require("react/jsx-runtime");
+var DayCell = import_react3.default.memo(
+  ({
+    day,
+    disabled,
+    selected,
+    dayEvents,
+    renderDay,
+    onSelect,
+    onEventClick
+  }) => {
+    if (renderDay) {
+      return /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
+        "div",
+        {
+          className: clsx_default(
+            "calendar-day",
+            !day.isCurrentMonth && "outside",
+            disabled && "disabled",
+            selected && "selected",
+            day.isToday && "today"
+          ),
+          onClick: () => {
+            if (!disabled && day.isCurrentMonth) onSelect?.(day.date);
+          },
+          children: renderDay(day, dayEvents)
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)(
+      "div",
+      {
+        className: clsx_default(
+          "calendar-day",
+          !day.isCurrentMonth && "outside",
+          disabled && "disabled",
+          selected && "selected",
+          day.isToday && "today",
+          day.isSunday && "sunday",
+          day.isSaturday && "saturday"
+        ),
+        onClick: () => {
+          if (!disabled && day.isCurrentMonth) onSelect?.(day.date);
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("span", { className: "calendar-day-number", children: day.day }),
+          dayEvents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)("div", { className: "calendar-day-events", children: [
+            dayEvents.slice(0, 3).map((event, ei) => /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
+              "span",
+              {
+                className: "calendar-event-dot",
+                style: { backgroundColor: event.color ?? "var(--xplat-blue-500)" },
+                title: event.label,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onEventClick?.(event);
+                }
+              },
+              ei
+            )),
+            dayEvents.length > 3 && /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)("span", { className: "calendar-event-more", children: [
+              "+",
+              dayEvents.length - 3
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+DayCell.displayName = "DayCell";
 var Calendar = (props) => {
   const {
     year: yearProp,
@@ -1728,12 +1805,28 @@ var Calendar = (props) => {
     setPickerMode("months");
     onMonthChange?.(y, month);
   };
-  const isDisabled = (date) => {
-    if (minDate && date < new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate())) return true;
-    if (maxDate && date > new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate())) return true;
-    return false;
-  };
-  const getEventsForDay = (date) => events.filter((e) => isSameDay(e.date, date));
+  const minTime = import_react3.default.useMemo(
+    () => minDate ? new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()).getTime() : -Infinity,
+    [minDate]
+  );
+  const maxTime = import_react3.default.useMemo(
+    () => maxDate ? new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()).getTime() : Infinity,
+    [maxDate]
+  );
+  const eventsMap = import_react3.default.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const e of events) {
+      const key = `${e.date.getFullYear()}-${e.date.getMonth()}-${e.date.getDate()}`;
+      const arr = map.get(key);
+      if (arr) arr.push(e);
+      else map.set(key, [e]);
+    }
+    return map;
+  }, [events]);
+  const getEventsForDay = import_react3.default.useCallback(
+    (date) => eventsMap.get(`${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`) ?? [],
+    [eventsMap]
+  );
   const weekdays = WEEKDAY_LABELS[locale];
   const monthLabels = MONTH_LABELS[locale];
   const titleText = pickerMode === "days" ? locale === "ko" ? `${year}\uB144 ${monthLabels[month]}` : `${monthLabels[month]} ${year}` : pickerMode === "months" ? `${year}` : `${yearRangeStart} - ${yearRangeStart + 11}`;
@@ -1787,64 +1880,19 @@ var Calendar = (props) => {
           )) }),
           /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("div", { className: "calendar-grid", children: days.map((day, idx) => {
             const dayEvents = getEventsForDay(day.date);
-            const disabled = isDisabled(day.date);
+            const t = day.date.getTime();
+            const disabled = t < minTime || t > maxTime;
             const isSelected = selectedDate ? isSameDay(day.date, selectedDate) : false;
-            if (renderDay) {
-              return /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
-                "div",
-                {
-                  className: clsx_default(
-                    "calendar-day",
-                    !day.isCurrentMonth && "outside",
-                    disabled && "disabled",
-                    isSelected && "selected",
-                    day.isToday && "today"
-                  ),
-                  onClick: () => {
-                    if (!disabled && day.isCurrentMonth) onSelect?.(day.date);
-                  },
-                  children: renderDay(day, dayEvents)
-                },
-                idx
-              );
-            }
-            return /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)(
-              "div",
+            return /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
+              DayCell,
               {
-                className: clsx_default(
-                  "calendar-day",
-                  !day.isCurrentMonth && "outside",
-                  disabled && "disabled",
-                  isSelected && "selected",
-                  day.isToday && "today",
-                  day.isSunday && "sunday",
-                  day.isSaturday && "saturday"
-                ),
-                onClick: () => {
-                  if (!disabled && day.isCurrentMonth) onSelect?.(day.date);
-                },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("span", { className: "calendar-day-number", children: day.day }),
-                  dayEvents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)("div", { className: "calendar-day-events", children: [
-                    dayEvents.slice(0, 3).map((event, ei) => /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
-                      "span",
-                      {
-                        className: "calendar-event-dot",
-                        style: { backgroundColor: event.color ?? "var(--xplat-blue-500)" },
-                        title: event.label,
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          onEventClick?.(event);
-                        }
-                      },
-                      ei
-                    )),
-                    dayEvents.length > 3 && /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)("span", { className: "calendar-event-more", children: [
-                      "+",
-                      dayEvents.length - 3
-                    ] })
-                  ] })
-                ]
+                day,
+                disabled,
+                selected: isSelected,
+                dayEvents,
+                renderDay,
+                onSelect,
+                onEventClick
               },
               idx
             );
@@ -1992,14 +2040,28 @@ var useChartTooltip = (enabled) => {
   }, []);
   return { tooltip, show, hide, move, containerRef };
 };
-var LineChart = ({ data, labels, onHover, onMove, onLeave }) => {
-  const entries = Object.entries(data);
-  const allValues = entries.flatMap(([, v]) => v);
-  const maxVal = Math.max(...allValues) * 1.2 || 1;
+var LineChart = import_react5.default.memo(({ data, labels, onHover, onMove, onLeave }) => {
+  const entries = import_react5.default.useMemo(() => Object.entries(data), [data]);
+  const maxVal = import_react5.default.useMemo(() => {
+    const allValues = entries.flatMap(([, v]) => v);
+    return Math.max(...allValues) * 1.2 || 1;
+  }, [entries]);
   const count = labels.length;
+  const chartW = 600 - PADDING.left - PADDING.right;
+  const chartH = 300 - PADDING.top - PADDING.bottom;
+  const seriesPoints = import_react5.default.useMemo(
+    () => entries.map(
+      ([, values]) => values.map((v, i) => ({
+        x: PADDING.left + i / (count - 1 || 1) * chartW,
+        y: PADDING.top + (1 - v / maxVal) * chartH,
+        v
+      }))
+    ),
+    [entries, count, chartW, chartH, maxVal]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("svg", { viewBox: "0 0 600 300", className: "chart-svg", children: [
     [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
-      const y = PADDING.top + (1 - ratio) * (300 - PADDING.top - PADDING.bottom);
+      const y = PADDING.top + (1 - ratio) * chartH;
       const val = Math.round(maxVal * ratio);
       return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("g", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("line", { x1: PADDING.left, y1: y, x2: 600 - PADDING.right, y2: y, className: "chart-grid" }),
@@ -2007,17 +2069,13 @@ var LineChart = ({ data, labels, onHover, onMove, onLeave }) => {
       ] }, ratio);
     }),
     labels.map((label, i) => {
-      const x = PADDING.left + i / (count - 1 || 1) * (600 - PADDING.left - PADDING.right);
+      const x = PADDING.left + i / (count - 1 || 1) * chartW;
       return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
     }),
-    entries.map(([key, values], di) => {
+    entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di);
       const color = palette[4];
-      const points = values.map((v, i) => {
-        const x = PADDING.left + i / (count - 1 || 1) * (600 - PADDING.left - PADDING.right);
-        const y = PADDING.top + (1 - v / maxVal) * (300 - PADDING.top - PADDING.bottom);
-        return { x, y, v };
-      });
+      const points = seriesPoints[di];
       return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("g", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
           "polyline",
@@ -2045,17 +2103,31 @@ var LineChart = ({ data, labels, onHover, onMove, onLeave }) => {
       ] }, di);
     })
   ] });
-};
-var BarChart = ({ data, labels, onHover, onMove, onLeave }) => {
-  const entries = Object.entries(data);
-  const allValues = entries.flatMap(([, v]) => v);
-  const maxVal = Math.max(...allValues) * 1.2 || 1;
+});
+LineChart.displayName = "LineChart";
+var BarChart = import_react5.default.memo(({ data, labels, onHover, onMove, onLeave }) => {
+  const entries = import_react5.default.useMemo(() => Object.entries(data), [data]);
+  const maxVal = import_react5.default.useMemo(() => {
+    const allValues = entries.flatMap(([, v]) => v);
+    return Math.max(...allValues) * 1.2 || 1;
+  }, [entries]);
   const count = labels.length;
   const groupCount = entries.length;
   const chartW = 600 - PADDING.left - PADDING.right;
   const chartH = 300 - PADDING.top - PADDING.bottom;
   const groupW = chartW / count;
   const barW = Math.min(32, groupW * 0.7 / groupCount);
+  const bars = import_react5.default.useMemo(
+    () => entries.map(
+      ([, values], di) => values.map((v, i) => {
+        const h = v / maxVal * chartH;
+        const x = PADDING.left + groupW * i + (groupW - barW * groupCount) / 2 + barW * di;
+        const y = PADDING.top + chartH - h;
+        return { x, y, w: barW, h, v };
+      })
+    ),
+    [entries, maxVal, chartH, groupW, barW, groupCount]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("svg", { viewBox: "0 0 600 300", className: "chart-svg", children: [
     [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
       const y = PADDING.top + (1 - ratio) * chartH;
@@ -2066,85 +2138,84 @@ var BarChart = ({ data, labels, onHover, onMove, onLeave }) => {
       ] }, ratio);
     }),
     labels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x: PADDING.left + groupW * i + groupW / 2, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i)),
-    entries.map(([key, values], di) => {
+    entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di);
       const color = palette[4];
-      return values.map((v, i) => {
-        const h = v / maxVal * chartH;
-        const x = PADDING.left + groupW * i + (groupW - barW * groupCount) / 2 + barW * di;
-        const y = PADDING.top + chartH - h;
-        return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
-          "rect",
-          {
-            x,
-            y,
-            width: barW,
-            height: h,
-            rx: "2",
-            fill: color,
-            className: "chart-bar",
-            onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${v}`),
-            onMouseMove: onMove,
-            onMouseLeave: onLeave
-          },
-          `${di}-${i}`
-        );
-      });
+      return bars[di].map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+        "rect",
+        {
+          x: b.x,
+          y: b.y,
+          width: b.w,
+          height: b.h,
+          rx: "2",
+          fill: color,
+          className: "chart-bar",
+          onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${b.v}`),
+          onMouseMove: onMove,
+          onMouseLeave: onLeave
+        },
+        `${di}-${i}`
+      ));
     })
   ] });
-};
-var PieDonutChart = ({ data, labels, isDoughnut, onHover, onMove, onLeave }) => {
-  const entries = Object.entries(data);
-  const values = entries.flatMap(([, v]) => v);
-  const total = values.reduce((a, b) => a + b, 0) || 1;
-  const cx = 150;
-  const cy = 150;
-  const r2 = 120;
-  const innerR = isDoughnut ? 60 : 0;
-  const palette = getPalette(PIE_PALETTES, 0);
-  let startAngle = -Math.PI / 2;
-  const slices = values.map((v, i) => {
-    const angle = v / total * Math.PI * 2;
-    const endAngle = startAngle + angle;
-    const largeArc = angle > Math.PI ? 1 : 0;
-    const x1 = cx + r2 * Math.cos(startAngle);
-    const y1 = cy + r2 * Math.sin(startAngle);
-    const x2 = cx + r2 * Math.cos(endAngle);
-    const y2 = cy + r2 * Math.sin(endAngle);
-    let d;
-    if (innerR > 0) {
-      const ix1 = cx + innerR * Math.cos(startAngle);
-      const iy1 = cy + innerR * Math.sin(startAngle);
-      const ix2 = cx + innerR * Math.cos(endAngle);
-      const iy2 = cy + innerR * Math.sin(endAngle);
-      d = `M ${ix1} ${iy1} L ${x1} ${y1} A ${r2} ${r2} 0 ${largeArc} 1 ${x2} ${y2} L ${ix2} ${iy2} A ${innerR} ${innerR} 0 ${largeArc} 0 ${ix1} ${iy1} Z`;
-    } else {
-      d = `M ${cx} ${cy} L ${x1} ${y1} A ${r2} ${r2} 0 ${largeArc} 1 ${x2} ${y2} Z`;
-    }
-    const midAngle = startAngle + angle / 2;
-    const labelR = innerR > 0 ? (r2 + innerR) / 2 : r2 * 0.6;
-    const lx = cx + labelR * Math.cos(midAngle);
-    const ly = cy + labelR * Math.sin(midAngle);
-    const pct = Math.round(v / total * 100);
-    const label = labels[i] || `${i + 1}`;
-    startAngle = endAngle;
-    return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("g", { children: [
+});
+BarChart.displayName = "BarChart";
+var PieDonutChart = import_react5.default.memo(
+  ({ data, labels, isDoughnut, onHover, onMove, onLeave }) => {
+    const values = import_react5.default.useMemo(() => Object.entries(data).flatMap(([, v]) => v), [data]);
+    const total = import_react5.default.useMemo(() => values.reduce((a, b) => a + b, 0) || 1, [values]);
+    const cx = 150;
+    const cy = 150;
+    const r2 = 120;
+    const innerR = isDoughnut ? 60 : 0;
+    const palette = getPalette(PIE_PALETTES, 0);
+    const sliceData = import_react5.default.useMemo(() => {
+      let angle0 = -Math.PI / 2;
+      return values.map((v, i) => {
+        const angle = v / total * Math.PI * 2;
+        const endAngle = angle0 + angle;
+        const largeArc = angle > Math.PI ? 1 : 0;
+        const x1 = cx + r2 * Math.cos(angle0);
+        const y1 = cy + r2 * Math.sin(angle0);
+        const x2 = cx + r2 * Math.cos(endAngle);
+        const y2 = cy + r2 * Math.sin(endAngle);
+        let d;
+        if (innerR > 0) {
+          const ix1 = cx + innerR * Math.cos(angle0);
+          const iy1 = cy + innerR * Math.sin(angle0);
+          const ix2 = cx + innerR * Math.cos(endAngle);
+          const iy2 = cy + innerR * Math.sin(endAngle);
+          d = `M ${ix1} ${iy1} L ${x1} ${y1} A ${r2} ${r2} 0 ${largeArc} 1 ${x2} ${y2} L ${ix2} ${iy2} A ${innerR} ${innerR} 0 ${largeArc} 0 ${ix1} ${iy1} Z`;
+        } else {
+          d = `M ${cx} ${cy} L ${x1} ${y1} A ${r2} ${r2} 0 ${largeArc} 1 ${x2} ${y2} Z`;
+        }
+        const midAngle = angle0 + angle / 2;
+        const labelR = innerR > 0 ? (r2 + innerR) / 2 : r2 * 0.6;
+        const lx = cx + labelR * Math.cos(midAngle);
+        const ly = cy + labelR * Math.sin(midAngle);
+        const pct = Math.round(v / total * 100);
+        angle0 = endAngle;
+        return { d, lx, ly, v, pct, angle, label: labels[i] || `${i + 1}` };
+      });
+    }, [values, total, innerR, labels]);
+    return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("svg", { viewBox: "0 0 300 300", className: "chart-svg chart-pie", children: sliceData.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("g", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
         "path",
         {
-          d,
+          d: s.d,
           fill: palette[i % palette.length],
           className: "chart-slice",
-          onMouseEnter: (e) => onHover(e, `${label}: ${v} (${pct}%)`),
+          onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
           onMouseMove: onMove,
           onMouseLeave: onLeave
         }
       ),
-      angle > 0.2 && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x: lx, y: ly, className: "chart-pie-label", textAnchor: "middle", dominantBaseline: "central", children: v })
-    ] }, i);
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("svg", { viewBox: "0 0 300 300", className: "chart-svg chart-pie", children: slices });
-};
+      s.angle > 0.2 && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x: s.lx, y: s.ly, className: "chart-pie-label", textAnchor: "middle", dominantBaseline: "central", children: s.v })
+    ] }, i)) });
+  }
+);
+PieDonutChart.displayName = "PieDonutChart";
 var Chart = (props) => {
   const { type, data, labels, tooltip: showTooltip = true } = props;
   const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);
@@ -2440,7 +2511,7 @@ var useClickOutside_default = useClickOutside;
 // src/components/DatePicker/SingleDatePicker/index.tsx
 var import_react10 = __toESM(require("react"), 1);
 var import_jsx_runtime311 = require("react/jsx-runtime");
-var DayCell = import_react10.default.memo(
+var DayCell2 = import_react10.default.memo(
   ({
     day,
     disabled,
@@ -2470,7 +2541,7 @@ var DayCell = import_react10.default.memo(
   ),
   (prev, next) => prev.selected === next.selected && prev.disabled === next.disabled && prev.highlighted === next.highlighted && prev.day === next.day
 );
-DayCell.displayName = "DayCell";
+DayCell2.displayName = "DayCell";
 var SingleDatePicker = (props) => {
   const {
     value,
@@ -2593,7 +2664,7 @@ var SingleDatePicker = (props) => {
               `${day.date.getFullYear()}-${day.date.getMonth()}-${day.date.getDate()}`
             );
             return /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
-              DayCell,
+              DayCell2,
               {
                 day,
                 disabled,
@@ -2708,6 +2779,35 @@ var Modal_default = Modal;
 // src/components/DatePicker/RangePicker/index.tsx
 var import_react13 = __toESM(require("react"), 1);
 var import_jsx_runtime314 = require("react/jsx-runtime");
+var RangeDayCell = import_react13.default.memo(
+  ({
+    day,
+    disabled,
+    isStart,
+    isEnd,
+    inRange,
+    onClick
+  }) => /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
+    "button",
+    {
+      type: "button",
+      className: clsx_default(
+        "datepicker-day",
+        !day.isCurrentMonth && "outside",
+        disabled && "disabled",
+        (isStart || isEnd) && "selected",
+        inRange && !isStart && !isEnd && "in-range",
+        day.isToday && "today",
+        day.isSunday && "sunday",
+        day.isSaturday && "saturday"
+      ),
+      disabled: disabled || !day.isCurrentMonth,
+      onClick,
+      children: day.day
+    }
+  )
+);
+RangeDayCell.displayName = "RangeDayCell";
 var RangePicker = (props) => {
   const {
     startDate,
@@ -2784,20 +2884,13 @@ var RangePicker = (props) => {
         const isEnd = isSameDay(day.date, endDate);
         const inRange = isInRange(day.date, startDate, endDate);
         return /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
-          "button",
+          RangeDayCell,
           {
-            type: "button",
-            className: clsx_default(
-              "datepicker-day",
-              !day.isCurrentMonth && "outside",
-              disabled && "disabled",
-              (isStart || isEnd) && "selected",
-              inRange && !isStart && !isEnd && "in-range",
-              day.isToday && "today",
-              day.isSunday && "sunday",
-              day.isSaturday && "saturday"
-            ),
-            disabled: disabled || !day.isCurrentMonth,
+            day,
+            disabled,
+            isStart,
+            isEnd,
+            inRange,
             onClick: () => {
               if (!disabled && day.isCurrentMonth) {
                 if (type === "start") {
@@ -2808,8 +2901,7 @@ var RangePicker = (props) => {
                   onChange?.({ startDate, endDate: newEnd });
                 }
               }
-            },
-            children: day.day
+            }
           },
           idx
         );
@@ -3867,10 +3959,7 @@ var Steps = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime332.jsx)("div", { className: clsx_default("lib-xplat-steps", type), children: items.map((item, index) => {
     const status = index < current ? "completed" : index === current ? "active" : "pending";
     return /* @__PURE__ */ (0, import_jsx_runtime332.jsxs)("div", { className: clsx_default("step-item", status), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime332.jsxs)("div", { className: "step-indicator", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime332.jsx)("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(CheckIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime332.jsx)("span", { children: index + 1 }) }),
-        index < items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime332.jsx)("div", { className: "step-line" })
-      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime332.jsx)("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(CheckIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime332.jsx)("span", { children: index + 1 }) }),
       /* @__PURE__ */ (0, import_jsx_runtime332.jsxs)("div", { className: "step-content", children: [
         /* @__PURE__ */ (0, import_jsx_runtime332.jsx)("span", { className: "step-title", children: item.title }),
         item.description && /* @__PURE__ */ (0, import_jsx_runtime332.jsx)("span", { className: "step-description", children: item.description })
@@ -4081,6 +4170,21 @@ var Swiper = (props) => {
   }, [isDragging, dragOffset, innerIndex, useLoop, maxIndex, slideStep, moveToInner]);
   const slideWidthPercent = 100 / viewItemCount;
   const gapAdjust = spaceBetween * (viewItemCount - 1) / viewItemCount;
+  const slideElements = import_react27.default.useMemo(
+    () => extendedItems.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
+      "div",
+      {
+        className: "lib-xplat-swiper__slide",
+        style: {
+          minWidth: `calc(${slideWidthPercent}% - ${gapAdjust}px)`,
+          maxWidth: `calc(${slideWidthPercent}% - ${gapAdjust}px)`
+        },
+        children: item
+      },
+      idx
+    )),
+    [extendedItems, slideWidthPercent, gapAdjust]
+  );
   const totalSteps = Math.ceil((maxIndex + 1) / slideBy);
   const currentStep = Math.min(
     Math.floor(realIndex / slideBy),
@@ -4106,18 +4210,7 @@ var Swiper = (props) => {
               gap: `${spaceBetween}px`
             },
             onTransitionEnd: handleTransitionEnd,
-            children: extendedItems.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
-              "div",
-              {
-                className: "lib-xplat-swiper__slide",
-                style: {
-                  minWidth: `calc(${slideWidthPercent}% - ${gapAdjust}px)`,
-                  maxWidth: `calc(${slideWidthPercent}% - ${gapAdjust}px)`
-                },
-                children: item
-              },
-              idx
-            ))
+            children: slideElements
           }
         )
       }
@@ -4336,7 +4429,7 @@ var TableRowContext_default = TableRowContext;
 
 // src/components/Table/TableCell.tsx
 var import_jsx_runtime339 = require("react/jsx-runtime");
-var TableCell = (props) => {
+var TableCell = import_react34.default.memo((props) => {
   const {
     children,
     align = "center",
@@ -4391,7 +4484,7 @@ var TableCell = (props) => {
       children
     }
   );
-};
+});
 TableCell.displayName = "TableCell";
 var TableCell_default = TableCell;
 
@@ -4410,7 +4503,7 @@ var TableHead_default = TableHead;
 // src/components/Table/TableRow.tsx
 var import_react35 = __toESM(require("react"), 1);
 var import_jsx_runtime341 = require("react/jsx-runtime");
-var TableRow = (props) => {
+var TableRow = import_react35.default.memo((props) => {
   const {
     children,
     type = "secondary",
@@ -4438,7 +4531,7 @@ var TableRow = (props) => {
       children
     }
   ) });
-};
+});
 TableRow.displayName = "TableRow";
 var TableRow_default = TableRow;
 
@@ -4646,7 +4739,6 @@ var Video = import_react39.default.forwardRef((props, ref) => {
   const {
     src,
     poster,
-    controls = true,
     autoPlay,
     muted,
     loop,
@@ -4685,49 +4777,39 @@ var Video = import_react39.default.forwardRef((props, ref) => {
       videoRef.current.play();
     }
   };
-  const showCustomOverlay = !controls;
-  return /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)(
-    "div",
-    {
-      className: clsx_default(
-        "lib-xplat-video",
-        showCustomOverlay && "custom-overlay"
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
-          "video",
-          {
-            ref: setRefs,
-            src,
-            poster,
-            controls,
-            autoPlay,
-            muted,
-            loop,
-            playsInline: playsInline ?? true,
-            onPlay: handlePlay,
-            onPause: handlePause,
-            onLoadedData: handleLoadedData,
-            ...rest
-          }
+  return /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)("div", { className: "lib-xplat-video custom-overlay", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
+      "video",
+      {
+        ref: setRefs,
+        src,
+        poster,
+        autoPlay,
+        muted,
+        loop,
+        playsInline: playsInline ?? true,
+        onPlay: handlePlay,
+        onPause: handlePause,
+        onLoadedData: handleLoadedData,
+        onClick: togglePlay,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
+      "button",
+      {
+        type: "button",
+        className: clsx_default(
+          "play-overlay",
+          isPlaying && "is-playing",
+          !isLoaded && "is-loading"
         ),
-        showCustomOverlay && /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
-          "button",
-          {
-            type: "button",
-            className: clsx_default(
-              "play-overlay",
-              isPlaying && "is-playing",
-              !isLoaded && "is-loading"
-            ),
-            onClick: togglePlay,
-            "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
-            children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(PauseIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("span", { className: "play-icon", children: /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(PlayCircleIcon_default, {}) })
-          }
-        )
-      ]
-    }
-  );
+        onClick: togglePlay,
+        "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
+        children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(PauseIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("span", { className: "play-icon", children: /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(PlayCircleIcon_default, {}) })
+      }
+    )
+  ] });
 });
 Video.displayName = "Video";
 var Video_default = Video;