@x-plat/design-system 0.12.0 → 0.14.0

package/dist/index.cjs

@@ -347,6 +347,7 @@ __export(index_exports, {
   ThumbsUpIcon: () => ThumbsUpIcon_default,
   TimePicker: () => TimePicker_default,
   ToastProvider: () => ToastProvider,
+  ToggleChip: () => ToggleChip_default,
   ToggleLeftIcon: () => ToggleLeftIcon_default,
   ToggleRightIcon: () => ToggleRightIcon_default,
   ToolIcon: () => ToolIcon_default,
@@ -6031,11 +6032,11 @@ var FieldMessage = (props) => {
 FieldMessage.displayName = "FieldMessage";
 var FieldMessage_default = FieldMessage;
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, validations, children } = props;
   const hasMessages = !!validations && validations.length > 0;
   if (!label && !hasMessages) return /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(import_jsx_runtime297.Fragment, { children });
   return /* @__PURE__ */ (0, import_jsx_runtime297.jsxs)("div", { className: "lib-xplat-field", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime297.jsxs)("label", { className: "lib-xplat-field-label", htmlFor, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime297.jsxs)("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ (0, import_jsx_runtime297.jsx)("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),
@@ -7815,8 +7816,12 @@ var SingleDatePicker = (props) => {
     highlightDates = [],
     locale = "ko",
     rangeStart,
-    rangeEnd
+    rangeEnd,
+    label,
+    required,
+    validations
   } = props;
+  const labelId = import_react12.default.useId();
   const initialYear = value?.getFullYear();
   const initialMonth = value?.getMonth();
   const { year, month, days, goToPrevMonth, goToNextMonth, setYear, setMonth } = useCalendar(
@@ -7879,10 +7884,12 @@ var SingleDatePicker = (props) => {
   const monthLabels = MONTH_LABELS[locale];
   const titleText = pickerMode === "days" ? locale === "ko" ? `${year}\uB144 ${monthLabels[month]}` : `${monthLabels[month]} ${year}` : pickerMode === "months" ? `${year}` : `${yearRangeStart} - ${yearRangeStart + 11}`;
   const hasRange = rangeStart != null && rangeEnd != null;
-  return /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)(
+  const calendar = /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)(
     "div",
     {
       className: clsx_default("lib-xplat-datepicker", "single"),
+      role: "group",
+      "aria-labelledby": label ? labelId : void 0,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)("div", { className: "datepicker-header", children: [
           /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("button", { className: "datepicker-nav", onClick: handlePrev, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(ChevronLeftIcon_default, {}) }),
@@ -7903,18 +7910,18 @@ var SingleDatePicker = (props) => {
               y
             );
           }) }),
-          pickerMode === "months" && /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { className: "datepicker-picker-grid", children: monthLabels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
+          pickerMode === "months" && /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { className: "datepicker-picker-grid", children: monthLabels.map((label2, i) => /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
             "button",
             {
               type: "button",
               className: clsx_default("datepicker-picker-cell", i === month && "active"),
               onClick: () => handleMonthSelect(i),
-              children: label
+              children: label2
             },
             i
           )) }),
           pickerMode === "days" && /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)(import_jsx_runtime314.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { className: "datepicker-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { className: "datepicker-weekdays", children: weekdays.map((label2, i) => /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
               "div",
               {
                 className: clsx_default(
@@ -7922,9 +7929,9 @@ var SingleDatePicker = (props) => {
                   i === 0 && "sunday",
                   i === 6 && "saturday"
                 ),
-                children: label
+                children: label2
               },
-              label
+              label2
             )) }),
             /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { className: "datepicker-grid", children: days.map((day, idx) => {
               const t = day.date.getTime();
@@ -7956,6 +7963,7 @@ var SingleDatePicker = (props) => {
       ]
     }
   );
+  return /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(Field, { label, required, labelId, validations, children: calendar });
 };
 SingleDatePicker.displayName = "SingleDatePicker";
 var SingleDatePicker_default = SingleDatePicker;
@@ -7970,7 +7978,18 @@ var formatDate = (date) => {
   return `${y}/${m}/${d}`;
 };
 var InputDatePicker = (props) => {
-  const { value, onChange, minDate, maxDate, disabled, locale = "ko", placeholder } = props;
+  const {
+    value,
+    onChange,
+    minDate,
+    maxDate,
+    disabled,
+    locale = "ko",
+    placeholder,
+    label,
+    required,
+    validations
+  } = props;
   const [isOpen, setIsOpen] = import_react13.default.useState(false);
   const [tempDate, setTempDate] = import_react13.default.useState(value ?? /* @__PURE__ */ new Date());
   const handleOpen = () => {
@@ -7996,6 +8015,9 @@ var InputDatePicker = (props) => {
         placeholder,
         suffix: /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(CalenderIcon_default, {}),
         disabled,
+        label,
+        required,
+        validations,
         readOnly: true
       }
     ) }),
@@ -8127,8 +8149,12 @@ var RangePicker = (props) => {
     onChange,
     minDate,
     maxDate,
-    locale = "ko"
+    locale = "ko",
+    label,
+    required,
+    validations
   } = props;
+  const labelId = import_react16.default.useId();
   const [activeTab, setActiveTab] = import_react16.default.useState("start");
   const handleStartChange = (date) => {
     if (!date) return;
@@ -8142,70 +8168,79 @@ var RangePicker = (props) => {
   };
   const startMaxDate = maxDate && endDate < maxDate ? endDate : endDate;
   const endMinDate = minDate && startDate > minDate ? startDate : startDate;
-  return /* @__PURE__ */ (0, import_jsx_runtime318.jsxs)("div", { className: clsx_default("lib-xplat-datepicker", "range"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime318.jsx)("div", { className: "datepicker-range-tabs", children: /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
-      Tab_default,
-      {
-        activeIndex: activeTab === "start" ? 0 : 1,
-        tabs: [
-          { value: "start", title: locale === "ko" ? "\uC2DC\uC791\uC77C" : "Start" },
-          { value: "end", title: locale === "ko" ? "\uC885\uB8CC\uC77C" : "End" }
-        ],
-        onChange: (tab) => setActiveTab(tab.value),
-        type: "toggle",
-        size: "sm"
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime318.jsxs)("div", { className: "datepicker-range-panels", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
-        SingleDatePicker_default,
-        {
-          value: startDate,
-          onChange: handleStartChange,
-          minDate,
-          maxDate: startMaxDate,
-          rangeStart: startDate,
-          rangeEnd: endDate,
-          locale
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
-        SingleDatePicker_default,
-        {
-          value: endDate,
-          onChange: handleEndChange,
-          minDate: endMinDate,
-          maxDate,
-          rangeStart: startDate,
-          rangeEnd: endDate,
-          locale
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime318.jsx)("div", { className: "datepicker-range-mobile", children: activeTab === "start" ? /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
-      SingleDatePicker_default,
-      {
-        value: startDate,
-        onChange: handleStartChange,
-        minDate,
-        maxDate: startMaxDate,
-        rangeStart: startDate,
-        rangeEnd: endDate,
-        locale
-      }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
-      SingleDatePicker_default,
-      {
-        value: endDate,
-        onChange: handleEndChange,
-        minDate: endMinDate,
-        maxDate,
-        rangeStart: startDate,
-        rangeEnd: endDate,
-        locale
-      }
-    ) })
-  ] });
+  const calendar = /* @__PURE__ */ (0, import_jsx_runtime318.jsxs)(
+    "div",
+    {
+      className: clsx_default("lib-xplat-datepicker", "range"),
+      role: "group",
+      "aria-labelledby": label ? labelId : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime318.jsx)("div", { className: "datepicker-range-tabs", children: /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
+          Tab_default,
+          {
+            activeIndex: activeTab === "start" ? 0 : 1,
+            tabs: [
+              { value: "start", title: locale === "ko" ? "\uC2DC\uC791\uC77C" : "Start" },
+              { value: "end", title: locale === "ko" ? "\uC885\uB8CC\uC77C" : "End" }
+            ],
+            onChange: (tab) => setActiveTab(tab.value),
+            type: "toggle",
+            size: "sm"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime318.jsxs)("div", { className: "datepicker-range-panels", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
+            SingleDatePicker_default,
+            {
+              value: startDate,
+              onChange: handleStartChange,
+              minDate,
+              maxDate: startMaxDate,
+              rangeStart: startDate,
+              rangeEnd: endDate,
+              locale
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
+            SingleDatePicker_default,
+            {
+              value: endDate,
+              onChange: handleEndChange,
+              minDate: endMinDate,
+              maxDate,
+              rangeStart: startDate,
+              rangeEnd: endDate,
+              locale
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime318.jsx)("div", { className: "datepicker-range-mobile", children: activeTab === "start" ? /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
+          SingleDatePicker_default,
+          {
+            value: startDate,
+            onChange: handleStartChange,
+            minDate,
+            maxDate: startMaxDate,
+            rangeStart: startDate,
+            rangeEnd: endDate,
+            locale
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
+          SingleDatePicker_default,
+          {
+            value: endDate,
+            onChange: handleEndChange,
+            minDate: endMinDate,
+            maxDate,
+            rangeStart: startDate,
+            rangeEnd: endDate,
+            locale
+          }
+        ) })
+      ]
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(Field, { label, required, labelId, validations, children: calendar });
 };
 RangePicker.displayName = "RangePicker";
 var RangePicker_default = RangePicker;
@@ -9978,10 +10013,13 @@ var FileUpload = (props) => {
     multiple = false,
     maxSize,
     onChange,
-    label = "\uD30C\uC77C\uC744 \uB4DC\uB798\uADF8\uD558\uAC70\uB098 \uD074\uB9AD\uD558\uC5EC \uC5C5\uB85C\uB4DC",
+    placeholder = "\uD30C\uC77C\uC744 \uB4DC\uB798\uADF8\uD558\uAC70\uB098 \uD074\uB9AD\uD558\uC5EC \uC5C5\uB85C\uB4DC",
     description,
-    validations
+    validations,
+    label,
+    required
   } = props;
+  const fieldId = import_react23.default.useId();
   const [isDragOver, setIsDragOver] = import_react23.default.useState(false);
   const inputRef = import_react23.default.useRef(null);
   const handleFiles = (fileList) => {
@@ -10026,6 +10064,7 @@ var FileUpload = (props) => {
           "input",
           {
             ref: inputRef,
+            id: fieldId,
             type: "file",
             accept,
             multiple,
@@ -10034,12 +10073,12 @@ var FileUpload = (props) => {
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("div", { className: "upload-icon", children: /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(UploadIcon_default, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("p", { className: "upload-label", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("p", { className: "upload-label", children: placeholder }),
         description && /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("p", { className: "upload-description", children: description })
       ]
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(Field, { validations, children: control });
+  return /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(Field, { label, required, htmlFor: fieldId, validations, children: control });
 };
 FileUpload.displayName = "FileUpload";
 var FileUpload_default = FileUpload;
@@ -10182,7 +10221,8 @@ var HtmlTypeWriter_default = HtmlTypeWriter;
 var import_react26 = __toESM(require("react"), 1);
 var import_jsx_runtime327 = require("react/jsx-runtime");
 var ImageSelector = (props) => {
-  const { value, label, onChange, validations } = props;
+  const { value, placeholder, onChange, validations, label, required } = props;
+  const fieldId = import_react26.default.useId();
   const [previewUrl, setPreviewUrl] = import_react26.default.useState();
   import_react26.default.useEffect(() => {
     if (!value) {
@@ -10212,7 +10252,7 @@ var ImageSelector = (props) => {
       {
         type: "file",
         accept: "image/*",
-        id: "image-input",
+        id: fieldId,
         onChange: handleFileChange,
         ref: inputRef,
         "aria-invalid": hasError(validations) || void 0
@@ -10224,10 +10264,10 @@ var ImageSelector = (props) => {
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime327.jsx)("div", { className: "content", children: previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime327.jsx)("img", { src: previewUrl, alt: "preview" }) : /* @__PURE__ */ (0, import_jsx_runtime327.jsxs)("div", { className: "skeleton", onClick: handleOpenFileDialog, children: [
       /* @__PURE__ */ (0, import_jsx_runtime327.jsx)("div", { className: "icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(ImageIcon_default, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime327.jsx)("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
+      /* @__PURE__ */ (0, import_jsx_runtime327.jsx)("div", { className: "label", children: placeholder || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
     ] }) })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(Field, { validations, children: control });
+  return /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(Field, { label, required, htmlFor: fieldId, validations, children: control });
 };
 ImageSelector.displayName = "ImageSelector";
 var ImageSelector_default = ImageSelector;
@@ -11779,9 +11819,33 @@ var ToastProvider = ({
 };
 ToastProvider.displayName = "ToastProvider";
 
+// src/components/ToggleChip/ToggleChip.tsx
+var import_jsx_runtime353 = require("react/jsx-runtime");
+var ToggleChip = (props) => {
+  const { children, selected = false, onClick, disabled = false, size = "md" } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime353.jsx)(
+    "button",
+    {
+      type: "button",
+      className: clsx_default(
+        "lib-xplat-chip",
+        "lib-xplat-toggle-chip",
+        size,
+        selected ? "selected" : "unselected"
+      ),
+      "aria-pressed": selected,
+      disabled,
+      onClick,
+      children
+    }
+  );
+};
+ToggleChip.displayName = "ToggleChip";
+var ToggleChip_default = ToggleChip;
+
 // src/components/Tooltip/Tooltip.tsx
 var import_react42 = __toESM(require("react"), 1);
-var import_jsx_runtime353 = require("react/jsx-runtime");
+var import_jsx_runtime354 = require("react/jsx-runtime");
 var OFFSET = 12;
 var GAP = 8;
 var SHOW_DELAY = 300;
@@ -11886,8 +11950,8 @@ var Tooltip = (props) => {
     window.clearTimeout(delayTimer.current);
     cancelAnimationFrame(rafRef.current);
   }, []);
-  if (!title && !description) return /* @__PURE__ */ (0, import_jsx_runtime353.jsx)(import_jsx_runtime353.Fragment, { children });
-  return /* @__PURE__ */ (0, import_jsx_runtime353.jsxs)(
+  if (!title && !description) return /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(import_jsx_runtime354.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime354.jsxs)(
     "div",
     {
       ref: triggerRef,
@@ -11900,7 +11964,7 @@ var Tooltip = (props) => {
       onBlur: close,
       children: [
         children,
-        visible && /* @__PURE__ */ (0, import_jsx_runtime353.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime353.jsxs)(
+        visible && /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime354.jsxs)(
           "div",
           {
             ref: tooltipRef,
@@ -11908,8 +11972,8 @@ var Tooltip = (props) => {
             className: clsx_default("lib-xplat-tooltip", shape),
             style: { position: "fixed", left: pos.left, top: pos.top },
             children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime353.jsx)("div", { className: "tooltip-title", children: title }),
-              description && /* @__PURE__ */ (0, import_jsx_runtime353.jsx)("div", { className: "tooltip-desc", children: description })
+              title && /* @__PURE__ */ (0, import_jsx_runtime354.jsx)("div", { className: "tooltip-title", children: title }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime354.jsx)("div", { className: "tooltip-desc", children: description })
             ]
           }
         ) })
@@ -11922,10 +11986,10 @@ var Tooltip_default = Tooltip;
 
 // src/components/Video/Video.tsx
 var import_react43 = __toESM(require("react"), 1);
-var import_jsx_runtime354 = require("react/jsx-runtime");
-var PipIcon = () => /* @__PURE__ */ (0, import_jsx_runtime354.jsxs)("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime354.jsx)("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
-  /* @__PURE__ */ (0, import_jsx_runtime354.jsx)("rect", { x: "12", y: "11", width: "7", height: "6", rx: "1", fill: "currentColor" })
+var import_jsx_runtime355 = require("react/jsx-runtime");
+var PipIcon = () => /* @__PURE__ */ (0, import_jsx_runtime355.jsxs)("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime355.jsx)("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime355.jsx)("rect", { x: "12", y: "11", width: "7", height: "6", rx: "1", fill: "currentColor" })
 ] });
 var formatTime = (sec) => {
   if (!Number.isFinite(sec) || sec < 0) return "0:00";
@@ -12100,13 +12164,13 @@ var Video = import_react43.default.forwardRef((props, ref) => {
   const volumePct = (isMuted ? 0 : volume) * 100;
   const VolumeGlyph = isMuted || volume === 0 ? VolumeXIcon_default : volume < 0.5 ? VolumeIcon_default : Volume2Icon_default;
   const pipSupported = typeof document !== "undefined" && "pictureInPictureEnabled" in document && document.pictureInPictureEnabled;
-  return /* @__PURE__ */ (0, import_jsx_runtime354.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime355.jsxs)(
     "div",
     {
       ref: containerRef,
       className: clsx_default("lib-xplat-video", showControls && "has-controls"),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime355.jsx)(
           "video",
           {
             ref: setRefs,
@@ -12127,7 +12191,7 @@ var Video = import_react43.default.forwardRef((props, ref) => {
             children
           }
         ),
-        showCenterPlay && /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(
+        showCenterPlay && /* @__PURE__ */ (0, import_jsx_runtime355.jsx)(
           "button",
           {
             type: "button",
@@ -12139,11 +12203,11 @@ var Video = import_react43.default.forwardRef((props, ref) => {
             onClick: togglePlay,
             "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
             tabIndex: -1,
-            children: /* @__PURE__ */ (0, import_jsx_runtime354.jsx)("span", { className: "center-play-icon", children: /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(PlayCircleIcon_default, {}) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime355.jsx)("span", { className: "center-play-icon", children: /* @__PURE__ */ (0, import_jsx_runtime355.jsx)(PlayCircleIcon_default, {}) })
           }
         ),
-        showControls && /* @__PURE__ */ (0, import_jsx_runtime354.jsxs)("div", { className: "controls", onClick: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(
+        showControls && /* @__PURE__ */ (0, import_jsx_runtime355.jsxs)("div", { className: "controls", onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime355.jsx)(
             "input",
             {
               type: "range",
@@ -12160,29 +12224,29 @@ var Video = import_react43.default.forwardRef((props, ref) => {
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime354.jsxs)("div", { className: "controls-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime355.jsxs)("div", { className: "controls-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime355.jsx)(
               "button",
               {
                 type: "button",
                 className: "control-btn",
                 onClick: togglePlay,
                 "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
-                children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(PauseIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(PlayIcon_default, {})
+                children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime355.jsx)(PauseIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime355.jsx)(PlayIcon_default, {})
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime354.jsxs)("div", { className: "volume-group", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime355.jsxs)("div", { className: "volume-group", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime355.jsx)(
                 "button",
                 {
                   type: "button",
                   className: "control-btn",
                   onClick: toggleMute,
                   "aria-label": isMuted ? "\uC74C\uC18C\uAC70 \uD574\uC81C" : "\uC74C\uC18C\uAC70",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(VolumeGlyph, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime355.jsx)(VolumeGlyph, {})
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime355.jsx)(
                 "input",
                 {
                   type: "range",
@@ -12197,14 +12261,14 @@ var Video = import_react43.default.forwardRef((props, ref) => {
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime354.jsxs)("span", { className: "time", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime355.jsxs)("span", { className: "time", children: [
               formatTime(currentTime),
               " / ",
               formatTime(duration)
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime354.jsx)("div", { className: "controls-spacer" }),
-            playbackRates && playbackRates.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime354.jsxs)("div", { className: clsx_default("rate-group", rateMenuOpen && "is-open"), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime354.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime355.jsx)("div", { className: "controls-spacer" }),
+            playbackRates && playbackRates.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime355.jsxs)("div", { className: clsx_default("rate-group", rateMenuOpen && "is-open"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime355.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -12218,7 +12282,7 @@ var Video = import_react43.default.forwardRef((props, ref) => {
                   ]
                 }
               ),
-              rateMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime354.jsx)("ul", { className: "rate-menu", role: "menu", children: playbackRates.map((r2) => /* @__PURE__ */ (0, import_jsx_runtime354.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime354.jsxs)(
+              rateMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime355.jsx)("ul", { className: "rate-menu", role: "menu", children: playbackRates.map((r2) => /* @__PURE__ */ (0, import_jsx_runtime355.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime355.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -12232,7 +12296,7 @@ var Video = import_react43.default.forwardRef((props, ref) => {
                 }
               ) }, r2)) })
             ] }),
-            showCaptions && /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(
+            showCaptions && /* @__PURE__ */ (0, import_jsx_runtime355.jsx)(
               "button",
               {
                 type: "button",
@@ -12240,37 +12304,37 @@ var Video = import_react43.default.forwardRef((props, ref) => {
                 onClick: toggleCaptions,
                 "aria-label": captionsOn ? "\uC790\uB9C9 \uB044\uAE30" : "\uC790\uB9C9 \uCF1C\uAE30",
                 "aria-pressed": captionsOn,
-                children: /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(TypeIcon_default, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime355.jsx)(TypeIcon_default, {})
               }
             ),
-            showPip && pipSupported && /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(
+            showPip && pipSupported && /* @__PURE__ */ (0, import_jsx_runtime355.jsx)(
               "button",
               {
                 type: "button",
                 className: clsx_default("control-btn", isPip && "is-active"),
                 onClick: togglePip,
                 "aria-label": isPip ? "PIP \uC885\uB8CC" : "PIP",
-                children: /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(PipIcon, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime355.jsx)(PipIcon, {})
               }
             ),
-            showDownload && /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(
+            showDownload && /* @__PURE__ */ (0, import_jsx_runtime355.jsx)(
               "a",
               {
                 className: "control-btn",
                 href: src,
                 download: downloadFileName ?? true,
                 "aria-label": "\uB2E4\uC6B4\uB85C\uB4DC",
-                children: /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(DownloadIcon_default, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime355.jsx)(DownloadIcon_default, {})
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime355.jsx)(
               "button",
               {
                 type: "button",
                 className: "control-btn",
                 onClick: toggleFullscreen,
                 "aria-label": isFullscreen ? "\uC804\uCCB4\uD654\uBA74 \uC885\uB8CC" : "\uC804\uCCB4\uD654\uBA74",
-                children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(MinimizeIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime354.jsx)(MaximizeIcon_default, {})
+                children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime355.jsx)(MinimizeIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime355.jsx)(MaximizeIcon_default, {})
               }
             )
           ] })
@@ -12283,7 +12347,7 @@ Video.displayName = "Video";
 var Video_default = Video;
 
 // src/layout/Grid/FullGrid/FullGrid.tsx
-var import_jsx_runtime355 = require("react/jsx-runtime");
+var import_jsx_runtime356 = require("react/jsx-runtime");
 var GAP_MAP = {
   none: "var(--spacing-space-none)",
   xs: "var(--spacing-space-1)",
@@ -12296,13 +12360,13 @@ var GAP_MAP = {
 var FullGrid = (props) => {
   const { children, gap } = props;
   const style = gap != null ? { gap: GAP_MAP[gap] } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime355.jsx)("div", { className: "lib-xplat-full-grid", style, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime356.jsx)("div", { className: "lib-xplat-full-grid", style, children });
 };
 FullGrid.displayName = "FullGrid";
 var FullGrid_default = FullGrid;
 
 // src/layout/Grid/FullScreen/FullScreen.tsx
-var import_jsx_runtime356 = require("react/jsx-runtime");
+var import_jsx_runtime357 = require("react/jsx-runtime");
 var GAP_MAP2 = {
   none: "var(--spacing-space-none)",
   xs: "var(--spacing-space-1)",
@@ -12315,13 +12379,13 @@ var GAP_MAP2 = {
 var FullScreen = (props) => {
   const { children, gap } = props;
   const style = gap != null ? { gap: GAP_MAP2[gap] } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime356.jsx)("div", { className: "lib-xplat-full-screen", style, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime357.jsx)("div", { className: "lib-xplat-full-screen", style, children });
 };
 FullScreen.displayName = "FullScreen";
 var FullScreen_default = FullScreen;
 
 // src/layout/Grid/Item/Item.tsx
-var import_jsx_runtime357 = require("react/jsx-runtime");
+var import_jsx_runtime358 = require("react/jsx-runtime");
 var calculateSpans = (column) => {
   const spans = {};
   let inherited = column.default;
@@ -12338,35 +12402,35 @@ var GridItem = ({ column, children, className }) => {
   Object.entries(spans).forEach(([key, value]) => {
     style[`--column-${key}`] = value;
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime357.jsx)("div", { className: clsx_default("lib-xplat-grid-item", className), style, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime358.jsx)("div", { className: clsx_default("lib-xplat-grid-item", className), style, children });
 };
 GridItem.displayName = "GridItem";
 var Item_default = GridItem;
 
 // src/layout/Header/Header.tsx
-var import_jsx_runtime358 = require("react/jsx-runtime");
+var import_jsx_runtime359 = require("react/jsx-runtime");
 var Header = ({
   logo,
   centerContent,
   rightContent
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime358.jsxs)("div", { className: "lib-xplat-layout-header", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime358.jsx)("div", { children: logo }),
-    /* @__PURE__ */ (0, import_jsx_runtime358.jsx)("div", { children: centerContent }),
-    /* @__PURE__ */ (0, import_jsx_runtime358.jsx)("div", { children: rightContent })
+  return /* @__PURE__ */ (0, import_jsx_runtime359.jsxs)("div", { className: "lib-xplat-layout-header", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime359.jsx)("div", { children: logo }),
+    /* @__PURE__ */ (0, import_jsx_runtime359.jsx)("div", { children: centerContent }),
+    /* @__PURE__ */ (0, import_jsx_runtime359.jsx)("div", { children: rightContent })
   ] });
 };
 Header.displayName = "Header";
 var Header_default = Header;
 
 // src/layout/Layout/Layout.tsx
-var import_jsx_runtime359 = require("react/jsx-runtime");
+var import_jsx_runtime360 = require("react/jsx-runtime");
 var Layout = (props) => {
   const { header, sideBar, children } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime359.jsx)("div", { className: "lib-xplat-layout", children: /* @__PURE__ */ (0, import_jsx_runtime359.jsxs)("div", { className: "lib-xplat-layout-content-wrapper", children: [
-    sideBar && /* @__PURE__ */ (0, import_jsx_runtime359.jsx)(import_jsx_runtime359.Fragment, { children: sideBar }),
-    /* @__PURE__ */ (0, import_jsx_runtime359.jsxs)("div", { className: "lib-xplat-layout-content", children: [
-      header && /* @__PURE__ */ (0, import_jsx_runtime359.jsx)("div", { className: "lib-xplat-layout-conent-header", children: header }),
+  return /* @__PURE__ */ (0, import_jsx_runtime360.jsx)("div", { className: "lib-xplat-layout", children: /* @__PURE__ */ (0, import_jsx_runtime360.jsxs)("div", { className: "lib-xplat-layout-content-wrapper", children: [
+    sideBar && /* @__PURE__ */ (0, import_jsx_runtime360.jsx)(import_jsx_runtime360.Fragment, { children: sideBar }),
+    /* @__PURE__ */ (0, import_jsx_runtime360.jsxs)("div", { className: "lib-xplat-layout-content", children: [
+      header && /* @__PURE__ */ (0, import_jsx_runtime360.jsx)("div", { className: "lib-xplat-layout-conent-header", children: header }),
       children
     ] })
   ] }) });
@@ -12388,18 +12452,18 @@ var useSideBarContext = () => {
 var SideBarContext_default = SideBarContext;
 
 // src/layout/SideBar/SideBar.tsx
-var import_jsx_runtime360 = require("react/jsx-runtime");
+var import_jsx_runtime361 = require("react/jsx-runtime");
 var SideBar = (props) => {
   const { children, className } = props;
   const [isOpen, setIsOpen] = import_react45.default.useState(true);
   const handleSwitchSideBar = () => {
     setIsOpen((prev) => !prev);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime360.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime361.jsx)(
     SideBarContext_default.Provider,
     {
       value: { isSidebarOpen: isOpen, handleSwitchSideBar },
-      children: /* @__PURE__ */ (0, import_jsx_runtime360.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime361.jsx)(
         "div",
         {
           className: clsx_default(
@@ -12734,6 +12798,7 @@ var SideBar_default = SideBar;
   ThumbsUpIcon,
   TimePicker,
   ToastProvider,
+  ToggleChip,
   ToggleLeftIcon,
   ToggleRightIcon,
   ToolIcon,