@x-plat/design-system 0.5.5 → 0.5.7

package/dist/components/DatePicker/index.cjs

@@ -1624,13 +1624,14 @@ var SingleDatePicker_default = SingleDatePicker;
 // src/components/DatePicker/InputDatePicker/index.tsx
 var import_jsx_runtime299 = require("react/jsx-runtime");
 var formatDate = (date) => {
+  if (!date || !(date instanceof Date) || isNaN(date.getTime())) return "";
   const y = date.getFullYear();
   const m = String(date.getMonth() + 1).padStart(2, "0");
   const d = String(date.getDate()).padStart(2, "0");
   return `${y}/${m}/${d}`;
 };
 var InputDatePicker = (props) => {
-  const { value, onChange, minDate, maxDate, disabled, locale } = props;
+  const { value, onChange, minDate, maxDate, disabled, locale, placeholder } = props;
   const [isOpen, setIsOpen] = import_react7.default.useState(false);
   const containerRef = import_react7.default.useRef(null);
   const calendarRef = import_react7.default.useRef(null);
@@ -1640,27 +1641,42 @@ var InputDatePicker = (props) => {
     onChange?.(date);
     setIsOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)("div", { className: "lib-xplat-datepicker input-datepicker", ref: containerRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime299.jsx)("div", { onClick: () => !disabled && setIsOpen(!isOpen), children: /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
-      Input_default,
-      {
-        value: formatDate(value),
-        suffix: /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(CalenderIcon_default, {}),
-        disabled,
-        readOnly: true
-      }
-    ) }),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime299.jsx)("div", { className: "input-datepicker-dropdown", ref: calendarRef, children: /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
-      SingleDatePicker_default,
-      {
-        value,
-        onChange: handleSelect,
-        minDate,
-        maxDate,
-        locale
-      }
-    ) })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)(
+    "div",
+    {
+      className: clsx_default("lib-xplat-datepicker input-datepicker", disabled && "disabled"),
+      ref: containerRef,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
+          "div",
+          {
+            className: "input-datepicker-trigger",
+            onClick: () => !disabled && setIsOpen((o) => !o),
+            children: /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
+              Input_default,
+              {
+                value: formatDate(value),
+                placeholder,
+                suffix: /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(CalenderIcon_default, {}),
+                disabled,
+                readOnly: true
+              }
+            )
+          }
+        ),
+        isOpen && /* @__PURE__ */ (0, import_jsx_runtime299.jsx)("div", { className: "input-datepicker-dropdown", ref: calendarRef, children: /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
+          SingleDatePicker_default,
+          {
+            value: value ?? /* @__PURE__ */ new Date(),
+            onChange: handleSelect,
+            minDate,
+            maxDate,
+            locale
+          }
+        ) })
+      ]
+    }
+  );
 };
 InputDatePicker.displayName = "InputDatePicker";
 var InputDatePicker_default = InputDatePicker;

package/dist/components/DatePicker/index.css

@@ -261,6 +261,7 @@
 .lib-xplat-datepicker.range {
   display: flex;
   flex-direction: column;
+  container-type: inline-size;
 }
 .lib-xplat-datepicker .datepicker-range-tabs {
   display: none;
@@ -303,7 +304,7 @@
   color: var(--semantic-text-muted);
   margin-bottom: var(--spacing-space-2);
 }
-@media (max-width: 600px) {
+@container (max-width: 600px) {
   .lib-xplat-datepicker .datepicker-range-tabs {
     display: flex;
   }
@@ -320,6 +321,18 @@
 .lib-xplat-datepicker.input-datepicker {
   position: relative;
 }
+.lib-xplat-datepicker.input-datepicker .input-datepicker-trigger {
+  cursor: pointer;
+}
+.lib-xplat-datepicker.input-datepicker .input-datepicker-trigger input {
+  cursor: pointer;
+}
+.lib-xplat-datepicker.input-datepicker.disabled .input-datepicker-trigger {
+  cursor: not-allowed;
+}
+.lib-xplat-datepicker.input-datepicker.disabled .input-datepicker-trigger input {
+  cursor: not-allowed;
+}
 .lib-xplat-datepicker.input-datepicker .input-datepicker-dropdown {
   position: absolute;
   top: 100%;

package/dist/components/DatePicker/index.d.cts

@@ -2,12 +2,13 @@ import React from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface InputDatePickerProps {
-    value: Date;
+    value?: Date | null;
     onChange?: (date: Date) => void;
     minDate?: Date;
     maxDate?: Date;
     disabled?: boolean;
     locale?: "ko" | "en";
+    placeholder?: string;
 }
 declare const InputDatePicker: React.FC<InputDatePickerProps>;
 

package/dist/components/DatePicker/index.d.ts

@@ -2,12 +2,13 @@ import React from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface InputDatePickerProps {
-    value: Date;
+    value?: Date | null;
     onChange?: (date: Date) => void;
     minDate?: Date;
     maxDate?: Date;
     disabled?: boolean;
     locale?: "ko" | "en";
+    placeholder?: string;
 }
 declare const InputDatePicker: React.FC<InputDatePickerProps>;
 

package/dist/components/DatePicker/index.js

@@ -1585,13 +1585,14 @@ var SingleDatePicker_default = SingleDatePicker;
 // src/components/DatePicker/InputDatePicker/index.tsx
 import { jsx as jsx299, jsxs as jsxs192 } from "react/jsx-runtime";
 var formatDate = (date) => {
+  if (!date || !(date instanceof Date) || isNaN(date.getTime())) return "";
   const y = date.getFullYear();
   const m = String(date.getMonth() + 1).padStart(2, "0");
   const d = String(date.getDate()).padStart(2, "0");
   return `${y}/${m}/${d}`;
 };
 var InputDatePicker = (props) => {
-  const { value, onChange, minDate, maxDate, disabled, locale } = props;
+  const { value, onChange, minDate, maxDate, disabled, locale, placeholder } = props;
   const [isOpen, setIsOpen] = React6.useState(false);
   const containerRef = React6.useRef(null);
   const calendarRef = React6.useRef(null);
@@ -1601,27 +1602,42 @@ var InputDatePicker = (props) => {
     onChange?.(date);
     setIsOpen(false);
   };
-  return /* @__PURE__ */ jsxs192("div", { className: "lib-xplat-datepicker input-datepicker", ref: containerRef, children: [
-    /* @__PURE__ */ jsx299("div", { onClick: () => !disabled && setIsOpen(!isOpen), children: /* @__PURE__ */ jsx299(
-      Input_default,
-      {
-        value: formatDate(value),
-        suffix: /* @__PURE__ */ jsx299(CalenderIcon_default, {}),
-        disabled,
-        readOnly: true
-      }
-    ) }),
-    isOpen && /* @__PURE__ */ jsx299("div", { className: "input-datepicker-dropdown", ref: calendarRef, children: /* @__PURE__ */ jsx299(
-      SingleDatePicker_default,
-      {
-        value,
-        onChange: handleSelect,
-        minDate,
-        maxDate,
-        locale
-      }
-    ) })
-  ] });
+  return /* @__PURE__ */ jsxs192(
+    "div",
+    {
+      className: clsx_default("lib-xplat-datepicker input-datepicker", disabled && "disabled"),
+      ref: containerRef,
+      children: [
+        /* @__PURE__ */ jsx299(
+          "div",
+          {
+            className: "input-datepicker-trigger",
+            onClick: () => !disabled && setIsOpen((o) => !o),
+            children: /* @__PURE__ */ jsx299(
+              Input_default,
+              {
+                value: formatDate(value),
+                placeholder,
+                suffix: /* @__PURE__ */ jsx299(CalenderIcon_default, {}),
+                disabled,
+                readOnly: true
+              }
+            )
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsx299("div", { className: "input-datepicker-dropdown", ref: calendarRef, children: /* @__PURE__ */ jsx299(
+          SingleDatePicker_default,
+          {
+            value: value ?? /* @__PURE__ */ new Date(),
+            onChange: handleSelect,
+            minDate,
+            maxDate,
+            locale
+          }
+        ) })
+      ]
+    }
+  );
 };
 InputDatePicker.displayName = "InputDatePicker";
 var InputDatePicker_default = InputDatePicker;

package/dist/components/Table/index.css

@@ -4,6 +4,7 @@
   width: 100%;
   height: 100%;
   position: relative;
+  overflow: auto;
 }
 .lib-xplat-table-wrapper > .lib-xplat-table {
   width: 100%;

package/dist/components/Video/index.cjs

@@ -634,7 +634,7 @@ var Video = import_react.default.forwardRef((props, ref) => {
             onTimeUpdate: handleTimeUpdate,
             onVolumeChange: handleVolumeChange,
             onRateChange: handleRateChange,
-            onClick: togglePlay,
+            onClick: showControls || showCenterPlay ? togglePlay : void 0,
             ...rest,
             children
           }

package/dist/components/Video/index.css

@@ -14,6 +14,9 @@
   max-height: 100%;
   object-fit: contain;
   vertical-align: middle;
+}
+.lib-xplat-video.has-controls > video,
+.lib-xplat-video:has(> .center-play) > video {
   cursor: pointer;
 }
 .lib-xplat-video > .center-play {
@@ -176,6 +179,9 @@
   appearance: none;
   background: transparent;
   cursor: pointer;
+  margin: 0;
+  padding: 0;
+  align-self: center;
 }
 .lib-xplat-video .seekbar:focus,
 .lib-xplat-video .volume-slider:focus {
@@ -187,6 +193,7 @@
   appearance: none;
   width: 12px;
   height: 12px;
+  margin-top: -4px;
   border-radius: 50%;
   background: #fff;
   border: none;

package/dist/components/Video/index.js

@@ -598,7 +598,7 @@ var Video = React.forwardRef((props, ref) => {
             onTimeUpdate: handleTimeUpdate,
             onVolumeChange: handleVolumeChange,
             onRateChange: handleRateChange,
-            onClick: togglePlay,
+            onClick: showControls || showCenterPlay ? togglePlay : void 0,
             ...rest,
             children
           }

package/dist/components/index.cjs

@@ -2802,13 +2802,14 @@ var SingleDatePicker_default = SingleDatePicker;
 // src/components/DatePicker/InputDatePicker/index.tsx
 var import_jsx_runtime312 = require("react/jsx-runtime");
 var formatDate = (date) => {
+  if (!date || !(date instanceof Date) || isNaN(date.getTime())) return "";
   const y = date.getFullYear();
   const m = String(date.getMonth() + 1).padStart(2, "0");
   const d = String(date.getDate()).padStart(2, "0");
   return `${y}/${m}/${d}`;
 };
 var InputDatePicker = (props) => {
-  const { value, onChange, minDate, maxDate, disabled, locale } = props;
+  const { value, onChange, minDate, maxDate, disabled, locale, placeholder } = props;
   const [isOpen, setIsOpen] = import_react11.default.useState(false);
   const containerRef = import_react11.default.useRef(null);
   const calendarRef = import_react11.default.useRef(null);
@@ -2818,27 +2819,42 @@ var InputDatePicker = (props) => {
     onChange?.(date);
     setIsOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)("div", { className: "lib-xplat-datepicker input-datepicker", ref: containerRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { onClick: () => !disabled && setIsOpen(!isOpen), children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
-      Input_default,
-      {
-        value: formatDate(value),
-        suffix: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(CalenderIcon_default, {}),
-        disabled,
-        readOnly: true
-      }
-    ) }),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: "input-datepicker-dropdown", ref: calendarRef, children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
-      SingleDatePicker_default,
-      {
-        value,
-        onChange: handleSelect,
-        minDate,
-        maxDate,
-        locale
-      }
-    ) })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)(
+    "div",
+    {
+      className: clsx_default("lib-xplat-datepicker input-datepicker", disabled && "disabled"),
+      ref: containerRef,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
+          "div",
+          {
+            className: "input-datepicker-trigger",
+            onClick: () => !disabled && setIsOpen((o) => !o),
+            children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
+              Input_default,
+              {
+                value: formatDate(value),
+                placeholder,
+                suffix: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(CalenderIcon_default, {}),
+                disabled,
+                readOnly: true
+              }
+            )
+          }
+        ),
+        isOpen && /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: "input-datepicker-dropdown", ref: calendarRef, children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
+          SingleDatePicker_default,
+          {
+            value: value ?? /* @__PURE__ */ new Date(),
+            onChange: handleSelect,
+            minDate,
+            maxDate,
+            locale
+          }
+        ) })
+      ]
+    }
+  );
 };
 InputDatePicker.displayName = "InputDatePicker";
 var InputDatePicker_default = InputDatePicker;
@@ -5056,7 +5072,7 @@ var Video = import_react39.default.forwardRef((props, ref) => {
             onTimeUpdate: handleTimeUpdate,
             onVolumeChange: handleVolumeChange,
             onRateChange: handleRateChange,
-            onClick: togglePlay,
+            onClick: showControls || showCenterPlay ? togglePlay : void 0,
             ...rest,
             children
           }

package/dist/components/index.css

@@ -2244,6 +2244,7 @@
 .lib-xplat-datepicker.range {
   display: flex;
   flex-direction: column;
+  container-type: inline-size;
 }
 .lib-xplat-datepicker .datepicker-range-tabs {
   display: none;
@@ -2286,7 +2287,7 @@
   color: var(--semantic-text-muted);
   margin-bottom: var(--spacing-space-2);
 }
-@media (max-width: 600px) {
+@container (max-width: 600px) {
   .lib-xplat-datepicker .datepicker-range-tabs {
     display: flex;
   }
@@ -2303,6 +2304,18 @@
 .lib-xplat-datepicker.input-datepicker {
   position: relative;
 }
+.lib-xplat-datepicker.input-datepicker .input-datepicker-trigger {
+  cursor: pointer;
+}
+.lib-xplat-datepicker.input-datepicker .input-datepicker-trigger input {
+  cursor: pointer;
+}
+.lib-xplat-datepicker.input-datepicker.disabled .input-datepicker-trigger {
+  cursor: not-allowed;
+}
+.lib-xplat-datepicker.input-datepicker.disabled .input-datepicker-trigger input {
+  cursor: not-allowed;
+}
 .lib-xplat-datepicker.input-datepicker .input-datepicker-dropdown {
   position: absolute;
   top: 100%;
@@ -3609,6 +3622,7 @@
   width: 100%;
   height: 100%;
   position: relative;
+  overflow: auto;
 }
 .lib-xplat-table-wrapper > .lib-xplat-table {
   width: 100%;
@@ -4078,6 +4092,9 @@
   max-height: 100%;
   object-fit: contain;
   vertical-align: middle;
+}
+.lib-xplat-video.has-controls > video,
+.lib-xplat-video:has(> .center-play) > video {
   cursor: pointer;
 }
 .lib-xplat-video > .center-play {
@@ -4240,6 +4257,9 @@
   appearance: none;
   background: transparent;
   cursor: pointer;
+  margin: 0;
+  padding: 0;
+  align-self: center;
 }
 .lib-xplat-video .seekbar:focus,
 .lib-xplat-video .volume-slider:focus {
@@ -4251,6 +4271,7 @@
   appearance: none;
   width: 12px;
   height: 12px;
+  margin-top: -4px;
   border-radius: 50%;
   background: #fff;
   border: none;

package/dist/components/index.js

@@ -2714,13 +2714,14 @@ var SingleDatePicker_default = SingleDatePicker;
 // src/components/DatePicker/InputDatePicker/index.tsx
 import { jsx as jsx312, jsxs as jsxs201 } from "react/jsx-runtime";
 var formatDate = (date) => {
+  if (!date || !(date instanceof Date) || isNaN(date.getTime())) return "";
   const y = date.getFullYear();
   const m = String(date.getMonth() + 1).padStart(2, "0");
   const d = String(date.getDate()).padStart(2, "0");
   return `${y}/${m}/${d}`;
 };
 var InputDatePicker = (props) => {
-  const { value, onChange, minDate, maxDate, disabled, locale } = props;
+  const { value, onChange, minDate, maxDate, disabled, locale, placeholder } = props;
   const [isOpen, setIsOpen] = React10.useState(false);
   const containerRef = React10.useRef(null);
   const calendarRef = React10.useRef(null);
@@ -2730,27 +2731,42 @@ var InputDatePicker = (props) => {
     onChange?.(date);
     setIsOpen(false);
   };
-  return /* @__PURE__ */ jsxs201("div", { className: "lib-xplat-datepicker input-datepicker", ref: containerRef, children: [
-    /* @__PURE__ */ jsx312("div", { onClick: () => !disabled && setIsOpen(!isOpen), children: /* @__PURE__ */ jsx312(
-      Input_default,
-      {
-        value: formatDate(value),
-        suffix: /* @__PURE__ */ jsx312(CalenderIcon_default, {}),
-        disabled,
-        readOnly: true
-      }
-    ) }),
-    isOpen && /* @__PURE__ */ jsx312("div", { className: "input-datepicker-dropdown", ref: calendarRef, children: /* @__PURE__ */ jsx312(
-      SingleDatePicker_default,
-      {
-        value,
-        onChange: handleSelect,
-        minDate,
-        maxDate,
-        locale
-      }
-    ) })
-  ] });
+  return /* @__PURE__ */ jsxs201(
+    "div",
+    {
+      className: clsx_default("lib-xplat-datepicker input-datepicker", disabled && "disabled"),
+      ref: containerRef,
+      children: [
+        /* @__PURE__ */ jsx312(
+          "div",
+          {
+            className: "input-datepicker-trigger",
+            onClick: () => !disabled && setIsOpen((o) => !o),
+            children: /* @__PURE__ */ jsx312(
+              Input_default,
+              {
+                value: formatDate(value),
+                placeholder,
+                suffix: /* @__PURE__ */ jsx312(CalenderIcon_default, {}),
+                disabled,
+                readOnly: true
+              }
+            )
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsx312("div", { className: "input-datepicker-dropdown", ref: calendarRef, children: /* @__PURE__ */ jsx312(
+          SingleDatePicker_default,
+          {
+            value: value ?? /* @__PURE__ */ new Date(),
+            onChange: handleSelect,
+            minDate,
+            maxDate,
+            locale
+          }
+        ) })
+      ]
+    }
+  );
 };
 InputDatePicker.displayName = "InputDatePicker";
 var InputDatePicker_default = InputDatePicker;
@@ -4968,7 +4984,7 @@ var Video = React38.forwardRef((props, ref) => {
             onTimeUpdate: handleTimeUpdate,
             onVolumeChange: handleVolumeChange,
             onRateChange: handleRateChange,
-            onClick: togglePlay,
+            onClick: showControls || showCenterPlay ? togglePlay : void 0,
             ...rest,
             children
           }

package/dist/index.cjs

@@ -7226,13 +7226,14 @@ var SingleDatePicker_default = SingleDatePicker;
 // src/components/DatePicker/InputDatePicker/index.tsx
 var import_jsx_runtime312 = require("react/jsx-runtime");
 var formatDate = (date) => {
+  if (!date || !(date instanceof Date) || isNaN(date.getTime())) return "";
   const y = date.getFullYear();
   const m = String(date.getMonth() + 1).padStart(2, "0");
   const d = String(date.getDate()).padStart(2, "0");
   return `${y}/${m}/${d}`;
 };
 var InputDatePicker = (props) => {
-  const { value, onChange, minDate, maxDate, disabled, locale } = props;
+  const { value, onChange, minDate, maxDate, disabled, locale, placeholder } = props;
   const [isOpen, setIsOpen] = import_react11.default.useState(false);
   const containerRef = import_react11.default.useRef(null);
   const calendarRef = import_react11.default.useRef(null);
@@ -7242,27 +7243,42 @@ var InputDatePicker = (props) => {
     onChange?.(date);
     setIsOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)("div", { className: "lib-xplat-datepicker input-datepicker", ref: containerRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { onClick: () => !disabled && setIsOpen(!isOpen), children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
-      Input_default,
-      {
-        value: formatDate(value),
-        suffix: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(CalenderIcon_default, {}),
-        disabled,
-        readOnly: true
-      }
-    ) }),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: "input-datepicker-dropdown", ref: calendarRef, children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
-      SingleDatePicker_default,
-      {
-        value,
-        onChange: handleSelect,
-        minDate,
-        maxDate,
-        locale
-      }
-    ) })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)(
+    "div",
+    {
+      className: clsx_default("lib-xplat-datepicker input-datepicker", disabled && "disabled"),
+      ref: containerRef,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
+          "div",
+          {
+            className: "input-datepicker-trigger",
+            onClick: () => !disabled && setIsOpen((o) => !o),
+            children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
+              Input_default,
+              {
+                value: formatDate(value),
+                placeholder,
+                suffix: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(CalenderIcon_default, {}),
+                disabled,
+                readOnly: true
+              }
+            )
+          }
+        ),
+        isOpen && /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: "input-datepicker-dropdown", ref: calendarRef, children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
+          SingleDatePicker_default,
+          {
+            value: value ?? /* @__PURE__ */ new Date(),
+            onChange: handleSelect,
+            minDate,
+            maxDate,
+            locale
+          }
+        ) })
+      ]
+    }
+  );
 };
 InputDatePicker.displayName = "InputDatePicker";
 var InputDatePicker_default = InputDatePicker;
@@ -9480,7 +9496,7 @@ var Video = import_react39.default.forwardRef((props, ref) => {
             onTimeUpdate: handleTimeUpdate,
             onVolumeChange: handleVolumeChange,
             onRateChange: handleRateChange,
-            onClick: togglePlay,
+            onClick: showControls || showCenterPlay ? togglePlay : void 0,
             ...rest,
             children
           }

package/dist/index.css

@@ -2244,6 +2244,7 @@
 .lib-xplat-datepicker.range {
   display: flex;
   flex-direction: column;
+  container-type: inline-size;
 }
 .lib-xplat-datepicker .datepicker-range-tabs {
   display: none;
@@ -2286,7 +2287,7 @@
   color: var(--semantic-text-muted);
   margin-bottom: var(--spacing-space-2);
 }
-@media (max-width: 600px) {
+@container (max-width: 600px) {
   .lib-xplat-datepicker .datepicker-range-tabs {
     display: flex;
   }
@@ -2303,6 +2304,18 @@
 .lib-xplat-datepicker.input-datepicker {
   position: relative;
 }
+.lib-xplat-datepicker.input-datepicker .input-datepicker-trigger {
+  cursor: pointer;
+}
+.lib-xplat-datepicker.input-datepicker .input-datepicker-trigger input {
+  cursor: pointer;
+}
+.lib-xplat-datepicker.input-datepicker.disabled .input-datepicker-trigger {
+  cursor: not-allowed;
+}
+.lib-xplat-datepicker.input-datepicker.disabled .input-datepicker-trigger input {
+  cursor: not-allowed;
+}
 .lib-xplat-datepicker.input-datepicker .input-datepicker-dropdown {
   position: absolute;
   top: 100%;
@@ -3609,6 +3622,7 @@
   width: 100%;
   height: 100%;
   position: relative;
+  overflow: auto;
 }
 .lib-xplat-table-wrapper > .lib-xplat-table {
   width: 100%;
@@ -4078,6 +4092,9 @@
   max-height: 100%;
   object-fit: contain;
   vertical-align: middle;
+}
+.lib-xplat-video.has-controls > video,
+.lib-xplat-video:has(> .center-play) > video {
   cursor: pointer;
 }
 .lib-xplat-video > .center-play {
@@ -4240,6 +4257,9 @@
   appearance: none;
   background: transparent;
   cursor: pointer;
+  margin: 0;
+  padding: 0;
+  align-self: center;
 }
 .lib-xplat-video .seekbar:focus,
 .lib-xplat-video .volume-slider:focus {
@@ -4251,6 +4271,7 @@
   appearance: none;
   width: 12px;
   height: 12px;
+  margin-top: -4px;
   border-radius: 50%;
   background: #fff;
   border: none;

package/dist/index.js

@@ -6829,13 +6829,14 @@ var SingleDatePicker_default = SingleDatePicker;
 // src/components/DatePicker/InputDatePicker/index.tsx
 import { jsx as jsx312, jsxs as jsxs201 } from "react/jsx-runtime";
 var formatDate = (date) => {
+  if (!date || !(date instanceof Date) || isNaN(date.getTime())) return "";
   const y = date.getFullYear();
   const m = String(date.getMonth() + 1).padStart(2, "0");
   const d = String(date.getDate()).padStart(2, "0");
   return `${y}/${m}/${d}`;
 };
 var InputDatePicker = (props) => {
-  const { value, onChange, minDate, maxDate, disabled, locale } = props;
+  const { value, onChange, minDate, maxDate, disabled, locale, placeholder } = props;
   const [isOpen, setIsOpen] = React10.useState(false);
   const containerRef = React10.useRef(null);
   const calendarRef = React10.useRef(null);
@@ -6845,27 +6846,42 @@ var InputDatePicker = (props) => {
     onChange?.(date);
     setIsOpen(false);
   };
-  return /* @__PURE__ */ jsxs201("div", { className: "lib-xplat-datepicker input-datepicker", ref: containerRef, children: [
-    /* @__PURE__ */ jsx312("div", { onClick: () => !disabled && setIsOpen(!isOpen), children: /* @__PURE__ */ jsx312(
-      Input_default,
-      {
-        value: formatDate(value),
-        suffix: /* @__PURE__ */ jsx312(CalenderIcon_default, {}),
-        disabled,
-        readOnly: true
-      }
-    ) }),
-    isOpen && /* @__PURE__ */ jsx312("div", { className: "input-datepicker-dropdown", ref: calendarRef, children: /* @__PURE__ */ jsx312(
-      SingleDatePicker_default,
-      {
-        value,
-        onChange: handleSelect,
-        minDate,
-        maxDate,
-        locale
-      }
-    ) })
-  ] });
+  return /* @__PURE__ */ jsxs201(
+    "div",
+    {
+      className: clsx_default("lib-xplat-datepicker input-datepicker", disabled && "disabled"),
+      ref: containerRef,
+      children: [
+        /* @__PURE__ */ jsx312(
+          "div",
+          {
+            className: "input-datepicker-trigger",
+            onClick: () => !disabled && setIsOpen((o) => !o),
+            children: /* @__PURE__ */ jsx312(
+              Input_default,
+              {
+                value: formatDate(value),
+                placeholder,
+                suffix: /* @__PURE__ */ jsx312(CalenderIcon_default, {}),
+                disabled,
+                readOnly: true
+              }
+            )
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsx312("div", { className: "input-datepicker-dropdown", ref: calendarRef, children: /* @__PURE__ */ jsx312(
+          SingleDatePicker_default,
+          {
+            value: value ?? /* @__PURE__ */ new Date(),
+            onChange: handleSelect,
+            minDate,
+            maxDate,
+            locale
+          }
+        ) })
+      ]
+    }
+  );
 };
 InputDatePicker.displayName = "InputDatePicker";
 var InputDatePicker_default = InputDatePicker;
@@ -9083,7 +9099,7 @@ var Video = React38.forwardRef((props, ref) => {
             onTimeUpdate: handleTimeUpdate,
             onVolumeChange: handleVolumeChange,
             onRateChange: handleRateChange,
-            onClick: togglePlay,
+            onClick: showControls || showCenterPlay ? togglePlay : void 0,
             ...rest,
             children
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-plat/design-system",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "description": "XPLAT UI Design System",
   "author": "XPLAT WOONG",
   "main": "dist/index.cjs",