@x-plat/design-system 0.7.2 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/dist/components/AutoResizeTextArea/index.css +2 -0
  2. package/dist/components/Button/index.css +2 -1
  3. package/dist/components/Button/index.d.cts +6 -0
  4. package/dist/components/Button/index.d.ts +6 -0
  5. package/dist/components/Chart/index.cjs +8 -1
  6. package/dist/components/Chart/index.js +8 -1
  7. package/dist/components/ChatInput/index.css +4 -0
  8. package/dist/components/DatePicker/index.css +4 -1
  9. package/dist/components/Input/index.css +2 -0
  10. package/dist/components/Link/index.cjs +64 -0
  11. package/dist/components/Link/index.css +25 -0
  12. package/dist/components/Link/index.d.cts +27 -0
  13. package/dist/components/Link/index.d.ts +27 -0
  14. package/dist/components/Link/index.js +37 -0
  15. package/dist/components/LinkButton/index.cjs +64 -0
  16. package/dist/components/LinkButton/index.css +106 -0
  17. package/dist/components/LinkButton/index.d.cts +28 -0
  18. package/dist/components/LinkButton/index.d.ts +28 -0
  19. package/dist/components/LinkButton/index.js +37 -0
  20. package/dist/components/TextArea/index.css +2 -0
  21. package/dist/components/Tooltip/index.cjs +77 -32
  22. package/dist/components/Tooltip/index.d.cts +10 -2
  23. package/dist/components/Tooltip/index.d.ts +10 -2
  24. package/dist/components/Tooltip/index.js +77 -32
  25. package/dist/components/index.cjs +247 -153
  26. package/dist/components/index.css +36 -1
  27. package/dist/components/index.d.cts +2 -0
  28. package/dist/components/index.d.ts +2 -0
  29. package/dist/components/index.js +222 -130
  30. package/dist/index.cjs +266 -172
  31. package/dist/index.css +36 -1
  32. package/dist/index.d.cts +2 -0
  33. package/dist/index.d.ts +2 -0
  34. package/dist/index.js +239 -147
  35. package/guidelines/AGENT_PROMPT.md +2 -2
  36. package/guidelines/Guidelines.md +2 -1
  37. package/guidelines/components/button.md +54 -0
  38. package/guidelines/components/card.md +15 -19
  39. package/guidelines/components/link.md +35 -0
  40. package/guidelines/components/overlay.md +30 -1
  41. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -6297,9 +6297,16 @@ var useChartTooltip = (enabled) => {
6297
6297
  }, []);
6298
6298
  return { tooltip, show, hide, move, containerRef };
6299
6299
  };
6300
+ var formatTick = (value, maxVal) => {
6301
+ const step = maxVal / 4;
6302
+ if (!Number.isFinite(step) || step <= 0) return "0";
6303
+ const decimals = step >= 1 ? 0 : Math.min(4, Math.ceil(-Math.log10(step)));
6304
+ const fixed = value.toFixed(decimals);
6305
+ return decimals === 0 ? Number(fixed).toLocaleString("en-US") : fixed;
6306
+ };
6300
6307
  var GridLines = React6.memo(({ width, height, chartH, maxVal }) => /* @__PURE__ */ jsx305(Fragment2, { children: [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
6301
6308
  const y = PADDING.top + (1 - ratio) * chartH;
6302
- const val = Math.round(maxVal * ratio);
6309
+ const val = formatTick(maxVal * ratio, maxVal);
6303
6310
  return /* @__PURE__ */ jsxs195("g", { children: [
6304
6311
  /* @__PURE__ */ jsx305("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
6305
6312
  /* @__PURE__ */ jsx305("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
@@ -8910,8 +8917,46 @@ var ImageSelector = (props) => {
8910
8917
  ImageSelector.displayName = "ImageSelector";
8911
8918
  var ImageSelector_default = ImageSelector;
8912
8919
 
8920
+ // src/components/Link/Link.tsx
8921
+ import { jsx as jsx329 } from "react/jsx-runtime";
8922
+ var Link = (props) => {
8923
+ const { children, href, underline = "always", target, rel, ...rest } = props;
8924
+ return /* @__PURE__ */ jsx329(
8925
+ "a",
8926
+ {
8927
+ className: clsx_default("lib-xplat-link", `underline-${underline}`),
8928
+ href,
8929
+ target,
8930
+ rel: target === "_blank" ? rel ?? "noopener noreferrer" : rel,
8931
+ ...rest,
8932
+ children
8933
+ }
8934
+ );
8935
+ };
8936
+ Link.displayName = "Link";
8937
+ var Link_default = Link;
8938
+
8939
+ // src/components/LinkButton/LinkButton.tsx
8940
+ import { jsx as jsx330 } from "react/jsx-runtime";
8941
+ var LinkButton = (props) => {
8942
+ const { children, href, type = "primary", size = "md", target, rel, ...rest } = props;
8943
+ return /* @__PURE__ */ jsx330(
8944
+ "a",
8945
+ {
8946
+ className: clsx_default("lib-xplat-button", type, size),
8947
+ href,
8948
+ target,
8949
+ rel: target === "_blank" ? rel ?? "noopener noreferrer" : rel,
8950
+ ...rest,
8951
+ children
8952
+ }
8953
+ );
8954
+ };
8955
+ LinkButton.displayName = "LinkButton";
8956
+ var LinkButton_default = LinkButton;
8957
+
8913
8958
  // src/components/NotificationBadge/NotificationBadge.tsx
8914
- import { jsx as jsx329, jsxs as jsxs211 } from "react/jsx-runtime";
8959
+ import { jsx as jsx331, jsxs as jsxs211 } from "react/jsx-runtime";
8915
8960
  var NotificationBadge = (props) => {
8916
8961
  const {
8917
8962
  children,
@@ -8925,14 +8970,14 @@ var NotificationBadge = (props) => {
8925
8970
  const displayCount = count !== void 0 && count > maxCount ? `${maxCount}+` : count;
8926
8971
  return /* @__PURE__ */ jsxs211("div", { className: clsx_default("lib-xplat-notification-badge", size), children: [
8927
8972
  children,
8928
- showBadge && /* @__PURE__ */ jsx329("span", { className: clsx_default("badge-indicator", type, { dot }), children: !dot && displayCount })
8973
+ showBadge && /* @__PURE__ */ jsx331("span", { className: clsx_default("badge-indicator", type, { dot }), children: !dot && displayCount })
8929
8974
  ] });
8930
8975
  };
8931
8976
  NotificationBadge.displayName = "NotificationBadge";
8932
8977
  var NotificationBadge_default = NotificationBadge;
8933
8978
 
8934
8979
  // src/components/Pagination/Pagination.tsx
8935
- import { jsx as jsx330, jsxs as jsxs212 } from "react/jsx-runtime";
8980
+ import { jsx as jsx332, jsxs as jsxs212 } from "react/jsx-runtime";
8936
8981
  var getPageRange = (current, totalPages, siblingCount) => {
8937
8982
  const totalNumbers = siblingCount * 2 + 5;
8938
8983
  if (totalPages <= totalNumbers) {
@@ -8976,18 +9021,18 @@ var Pagination = (props) => {
8976
9021
  }
8977
9022
  };
8978
9023
  return /* @__PURE__ */ jsxs212("nav", { className: clsx_default("lib-xplat-pagination", size, type), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
8979
- /* @__PURE__ */ jsx330(
9024
+ /* @__PURE__ */ jsx332(
8980
9025
  "button",
8981
9026
  {
8982
9027
  className: "page-btn prev",
8983
9028
  disabled: current <= 1,
8984
9029
  onClick: () => handleClick(current - 1),
8985
9030
  "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0",
8986
- children: /* @__PURE__ */ jsx330(ChevronLeftIcon_default, {})
9031
+ children: /* @__PURE__ */ jsx332(ChevronLeftIcon_default, {})
8987
9032
  }
8988
9033
  ),
8989
9034
  pages.map(
8990
- (page, i) => page === "..." ? /* @__PURE__ */ jsx330("span", { className: "dots", children: "..." }, `dots-${i}`) : /* @__PURE__ */ jsx330(
9035
+ (page, i) => page === "..." ? /* @__PURE__ */ jsx332("span", { className: "dots", children: "..." }, `dots-${i}`) : /* @__PURE__ */ jsx332(
8991
9036
  "button",
8992
9037
  {
8993
9038
  className: clsx_default("page-btn", { active: page === current }),
@@ -8998,14 +9043,14 @@ var Pagination = (props) => {
8998
9043
  page
8999
9044
  )
9000
9045
  ),
9001
- /* @__PURE__ */ jsx330(
9046
+ /* @__PURE__ */ jsx332(
9002
9047
  "button",
9003
9048
  {
9004
9049
  className: "page-btn next",
9005
9050
  disabled: current >= totalPages,
9006
9051
  onClick: () => handleClick(current + 1),
9007
9052
  "aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0",
9008
- children: /* @__PURE__ */ jsx330(ChevronRightIcon_default, {})
9053
+ children: /* @__PURE__ */ jsx332(ChevronRightIcon_default, {})
9009
9054
  }
9010
9055
  )
9011
9056
  ] });
@@ -9015,7 +9060,7 @@ var Pagination_default = Pagination;
9015
9060
 
9016
9061
  // src/components/PopOver/PopOver.tsx
9017
9062
  import React27 from "react";
9018
- import { jsx as jsx331, jsxs as jsxs213 } from "react/jsx-runtime";
9063
+ import { jsx as jsx333, jsxs as jsxs213 } from "react/jsx-runtime";
9019
9064
  var PopOver = (props) => {
9020
9065
  const { children, isOpen, onClose, PopOverEl } = props;
9021
9066
  const popRef = React27.useRef(null);
@@ -9047,7 +9092,7 @@ var PopOver = (props) => {
9047
9092
  },
9048
9093
  children: [
9049
9094
  children,
9050
- localOpen && /* @__PURE__ */ jsx331(Portal_default, { children: /* @__PURE__ */ jsx331(
9095
+ localOpen && /* @__PURE__ */ jsx333(Portal_default, { children: /* @__PURE__ */ jsx333(
9051
9096
  "div",
9052
9097
  {
9053
9098
  className: clsx_default(
@@ -9070,7 +9115,7 @@ PopOver.displayName = "PopOver";
9070
9115
  var PopOver_default = PopOver;
9071
9116
 
9072
9117
  // src/components/Progress/Progress.tsx
9073
- import { jsx as jsx332, jsxs as jsxs214 } from "react/jsx-runtime";
9118
+ import { jsx as jsx334, jsxs as jsxs214 } from "react/jsx-runtime";
9074
9119
  var Progress = (props) => {
9075
9120
  const {
9076
9121
  value,
@@ -9081,7 +9126,7 @@ var Progress = (props) => {
9081
9126
  } = props;
9082
9127
  const percentage = Math.min(100, Math.max(0, value / max * 100));
9083
9128
  return /* @__PURE__ */ jsxs214("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
9084
- /* @__PURE__ */ jsx332(
9129
+ /* @__PURE__ */ jsx334(
9085
9130
  "div",
9086
9131
  {
9087
9132
  className: "track",
@@ -9089,7 +9134,7 @@ var Progress = (props) => {
9089
9134
  "aria-valuenow": value,
9090
9135
  "aria-valuemin": 0,
9091
9136
  "aria-valuemax": max,
9092
- children: /* @__PURE__ */ jsx332(
9137
+ children: /* @__PURE__ */ jsx334(
9093
9138
  "div",
9094
9139
  {
9095
9140
  className: "bar",
@@ -9118,7 +9163,7 @@ var useRadioGroupContext = () => {
9118
9163
  var RadioGroupContext_default = RadioGroupContext;
9119
9164
 
9120
9165
  // src/components/Radio/Radio.tsx
9121
- import { jsx as jsx333, jsxs as jsxs215 } from "react/jsx-runtime";
9166
+ import { jsx as jsx335, jsxs as jsxs215 } from "react/jsx-runtime";
9122
9167
  var Radio = (props) => {
9123
9168
  const {
9124
9169
  label,
@@ -9148,18 +9193,18 @@ var Radio = (props) => {
9148
9193
  className
9149
9194
  ),
9150
9195
  children: [
9151
- /* @__PURE__ */ jsx333("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
9152
- /* @__PURE__ */ jsx333(
9196
+ /* @__PURE__ */ jsx335("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
9197
+ /* @__PURE__ */ jsx335(
9153
9198
  "div",
9154
9199
  {
9155
9200
  className: clsx_default(
9156
9201
  "circle",
9157
9202
  localChecked ? "checked" : void 0
9158
9203
  ),
9159
- children: localChecked && /* @__PURE__ */ jsx333("div", { className: "inner-circle" })
9204
+ children: localChecked && /* @__PURE__ */ jsx335("div", { className: "inner-circle" })
9160
9205
  }
9161
9206
  ),
9162
- label && /* @__PURE__ */ jsx333("span", { children: label })
9207
+ label && /* @__PURE__ */ jsx335("span", { children: label })
9163
9208
  ]
9164
9209
  }
9165
9210
  );
@@ -9168,10 +9213,10 @@ Radio.displayName = "Radio";
9168
9213
  var Radio_default = Radio;
9169
9214
 
9170
9215
  // src/components/Radio/RadioGroup.tsx
9171
- import { Fragment as Fragment4, jsx as jsx334 } from "react/jsx-runtime";
9216
+ import { Fragment as Fragment4, jsx as jsx336 } from "react/jsx-runtime";
9172
9217
  var RadioGroup = (props) => {
9173
9218
  const { children, ...rest } = props;
9174
- return /* @__PURE__ */ jsx334(Fragment4, { children: /* @__PURE__ */ jsx334(RadioGroupContext_default.Provider, { value: rest, children }) });
9219
+ return /* @__PURE__ */ jsx336(Fragment4, { children: /* @__PURE__ */ jsx336(RadioGroupContext_default.Provider, { value: rest, children }) });
9175
9220
  };
9176
9221
  RadioGroup.displayName = "RadioGroup";
9177
9222
  var RadioGroup_default = RadioGroup;
@@ -9186,7 +9231,7 @@ var context_default = SelectContext;
9186
9231
 
9187
9232
  // src/components/Select/SelectItem.tsx
9188
9233
  import React30 from "react";
9189
- import { jsx as jsx335 } from "react/jsx-runtime";
9234
+ import { jsx as jsx337 } from "react/jsx-runtime";
9190
9235
  var SelectItem = (props) => {
9191
9236
  const { children, value, onClick, disabled = false } = props;
9192
9237
  const ctx = React30.useContext(context_default);
@@ -9199,7 +9244,7 @@ var SelectItem = (props) => {
9199
9244
  onClick?.();
9200
9245
  };
9201
9246
  const isSelected = value !== void 0 ? ctx?.selectedValue === value : ctx?.selectedLabel === children;
9202
- return /* @__PURE__ */ jsx335(
9247
+ return /* @__PURE__ */ jsx337(
9203
9248
  "div",
9204
9249
  {
9205
9250
  className: clsx_default("select-item", disabled && "disabled", isSelected && "is-selected"),
@@ -9220,7 +9265,7 @@ SelectItem.displayName = "Select.Item";
9220
9265
  var SelectItem_default = SelectItem;
9221
9266
 
9222
9267
  // src/components/Select/Select.tsx
9223
- import { jsx as jsx336, jsxs as jsxs216 } from "react/jsx-runtime";
9268
+ import { jsx as jsx338, jsxs as jsxs216 } from "react/jsx-runtime";
9224
9269
  var ANIMATION_DURATION_MS3 = 200;
9225
9270
  var SelectRoot = (props) => {
9226
9271
  const {
@@ -9300,7 +9345,7 @@ var SelectRoot = (props) => {
9300
9345
  if (disabled) return;
9301
9346
  toggle();
9302
9347
  };
9303
- return /* @__PURE__ */ jsx336(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs216(
9348
+ return /* @__PURE__ */ jsx338(context_default.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs216(
9304
9349
  "div",
9305
9350
  {
9306
9351
  className: clsx_default(
@@ -9335,7 +9380,7 @@ var SelectRoot = (props) => {
9335
9380
  }
9336
9381
  },
9337
9382
  children: [
9338
- /* @__PURE__ */ jsx336(
9383
+ /* @__PURE__ */ jsx338(
9339
9384
  "span",
9340
9385
  {
9341
9386
  className: clsx_default(
@@ -9345,25 +9390,25 @@ var SelectRoot = (props) => {
9345
9390
  children: selectedLabel ?? placeholder
9346
9391
  }
9347
9392
  ),
9348
- /* @__PURE__ */ jsx336(
9393
+ /* @__PURE__ */ jsx338(
9349
9394
  "span",
9350
9395
  {
9351
9396
  className: clsx_default("select-trigger-icon", isOpen && "open"),
9352
9397
  "aria-hidden": true,
9353
- children: /* @__PURE__ */ jsx336(ChevronDownIcon_default, {})
9398
+ children: /* @__PURE__ */ jsx338(ChevronDownIcon_default, {})
9354
9399
  }
9355
9400
  )
9356
9401
  ]
9357
9402
  }
9358
9403
  ),
9359
- mounted && /* @__PURE__ */ jsx336(Portal_default, { children: /* @__PURE__ */ jsx336(
9404
+ mounted && /* @__PURE__ */ jsx338(Portal_default, { children: /* @__PURE__ */ jsx338(
9360
9405
  "div",
9361
9406
  {
9362
9407
  className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass),
9363
9408
  ref: contentRef,
9364
9409
  style: { ...position.position, width: triggerRef.current?.offsetWidth },
9365
9410
  role: "listbox",
9366
- children: /* @__PURE__ */ jsx336(context_default.Provider, { value: ctxValue, children: itemChildren })
9411
+ children: /* @__PURE__ */ jsx338(context_default.Provider, { value: ctxValue, children: itemChildren })
9367
9412
  }
9368
9413
  ) })
9369
9414
  ]
@@ -9377,7 +9422,7 @@ var Select = Object.assign(SelectRoot, {
9377
9422
  var Select_default = Select;
9378
9423
 
9379
9424
  // src/components/Skeleton/Skeleton.tsx
9380
- import { jsx as jsx337 } from "react/jsx-runtime";
9425
+ import { jsx as jsx339 } from "react/jsx-runtime";
9381
9426
  var SIZE_MAP = {
9382
9427
  xs: "var(--spacing-space-1)",
9383
9428
  sm: "var(--spacing-space-2)",
@@ -9393,7 +9438,7 @@ var Skeleton = (props) => {
9393
9438
  ...width != null && { width: SIZE_MAP[width] },
9394
9439
  ...height != null && { height: SIZE_MAP[height] }
9395
9440
  };
9396
- return /* @__PURE__ */ jsx337(
9441
+ return /* @__PURE__ */ jsx339(
9397
9442
  "div",
9398
9443
  {
9399
9444
  className: clsx_default("lib-xplat-skeleton", variant),
@@ -9406,20 +9451,20 @@ Skeleton.displayName = "Skeleton";
9406
9451
  var Skeleton_default = Skeleton;
9407
9452
 
9408
9453
  // src/components/Spinner/Spinner.tsx
9409
- import { jsx as jsx338, jsxs as jsxs217 } from "react/jsx-runtime";
9454
+ import { jsx as jsx340, jsxs as jsxs217 } from "react/jsx-runtime";
9410
9455
  var Spinner = (props) => {
9411
9456
  const {
9412
9457
  size = "md",
9413
9458
  type = "brand"
9414
9459
  } = props;
9415
- return /* @__PURE__ */ jsx338(
9460
+ return /* @__PURE__ */ jsx340(
9416
9461
  "div",
9417
9462
  {
9418
9463
  className: clsx_default("lib-xplat-spinner", size, type),
9419
9464
  role: "status",
9420
9465
  "aria-label": "\uB85C\uB529 \uC911",
9421
9466
  children: /* @__PURE__ */ jsxs217("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
9422
- /* @__PURE__ */ jsx338(
9467
+ /* @__PURE__ */ jsx340(
9423
9468
  "circle",
9424
9469
  {
9425
9470
  className: "track",
@@ -9429,7 +9474,7 @@ var Spinner = (props) => {
9429
9474
  strokeWidth: "3"
9430
9475
  }
9431
9476
  ),
9432
- /* @__PURE__ */ jsx338(
9477
+ /* @__PURE__ */ jsx340(
9433
9478
  "circle",
9434
9479
  {
9435
9480
  className: "indicator",
@@ -9448,20 +9493,20 @@ Spinner.displayName = "Spinner";
9448
9493
  var Spinner_default = Spinner;
9449
9494
 
9450
9495
  // src/components/Steps/Steps.tsx
9451
- import { jsx as jsx339, jsxs as jsxs218 } from "react/jsx-runtime";
9496
+ import { jsx as jsx341, jsxs as jsxs218 } from "react/jsx-runtime";
9452
9497
  var Steps = (props) => {
9453
9498
  const {
9454
9499
  items,
9455
9500
  current,
9456
9501
  type = "brand"
9457
9502
  } = props;
9458
- return /* @__PURE__ */ jsx339("div", { className: clsx_default("lib-xplat-steps", type), children: items.map((item, index) => {
9503
+ return /* @__PURE__ */ jsx341("div", { className: clsx_default("lib-xplat-steps", type), children: items.map((item, index) => {
9459
9504
  const status = index < current ? "completed" : index === current ? "active" : "pending";
9460
9505
  return /* @__PURE__ */ jsxs218("div", { className: clsx_default("step-item", status), children: [
9461
- /* @__PURE__ */ jsx339("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ jsx339(CheckIcon_default, {}) : /* @__PURE__ */ jsx339("span", { children: index + 1 }) }),
9506
+ /* @__PURE__ */ jsx341("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ jsx341(CheckIcon_default, {}) : /* @__PURE__ */ jsx341("span", { children: index + 1 }) }),
9462
9507
  /* @__PURE__ */ jsxs218("div", { className: "step-content", children: [
9463
- /* @__PURE__ */ jsx339("span", { className: "step-title", children: item.title }),
9464
- item.description && /* @__PURE__ */ jsx339("span", { className: "step-description", children: item.description })
9508
+ /* @__PURE__ */ jsx341("span", { className: "step-title", children: item.title }),
9509
+ item.description && /* @__PURE__ */ jsx341("span", { className: "step-description", children: item.description })
9465
9510
  ] })
9466
9511
  ] }, index);
9467
9512
  }) });
@@ -9471,7 +9516,7 @@ var Steps_default = Steps;
9471
9516
 
9472
9517
  // src/components/Swiper/Swiper.tsx
9473
9518
  import React32 from "react";
9474
- import { jsx as jsx340, jsxs as jsxs219 } from "react/jsx-runtime";
9519
+ import { jsx as jsx342, jsxs as jsxs219 } from "react/jsx-runtime";
9475
9520
  var Swiper = (props) => {
9476
9521
  const {
9477
9522
  auto = false,
@@ -9700,7 +9745,7 @@ var Swiper = (props) => {
9700
9745
  const slideWidthPercent = 100 / viewItemCount;
9701
9746
  const gapAdjust = spaceBetween * (viewItemCount - 1) / viewItemCount;
9702
9747
  const slideElements = React32.useMemo(
9703
- () => extendedItems.map((item, idx) => /* @__PURE__ */ jsx340(
9748
+ () => extendedItems.map((item, idx) => /* @__PURE__ */ jsx342(
9704
9749
  "div",
9705
9750
  {
9706
9751
  className: "lib-xplat-swiper__slide",
@@ -9720,14 +9765,14 @@ var Swiper = (props) => {
9720
9765
  totalSteps - 1
9721
9766
  );
9722
9767
  return /* @__PURE__ */ jsxs219("div", { className: "lib-xplat-swiper", ref: containerRef, children: [
9723
- /* @__PURE__ */ jsx340(
9768
+ /* @__PURE__ */ jsx342(
9724
9769
  "div",
9725
9770
  {
9726
9771
  className: "lib-xplat-swiper__viewport",
9727
9772
  onMouseDown: handleDragStart,
9728
9773
  onTouchStart: handleDragStart,
9729
9774
  onDragStart: (e) => e.preventDefault(),
9730
- children: /* @__PURE__ */ jsx340(
9775
+ children: /* @__PURE__ */ jsx342(
9731
9776
  "div",
9732
9777
  {
9733
9778
  className: clsx_default(
@@ -9745,7 +9790,7 @@ var Swiper = (props) => {
9745
9790
  )
9746
9791
  }
9747
9792
  ),
9748
- showProgress && canSlide && /* @__PURE__ */ jsx340("div", { className: "lib-xplat-swiper__progress", children: /* @__PURE__ */ jsx340("div", { className: "lib-xplat-swiper__progress-track", children: /* @__PURE__ */ jsx340(
9793
+ showProgress && canSlide && /* @__PURE__ */ jsx342("div", { className: "lib-xplat-swiper__progress", children: /* @__PURE__ */ jsx342("div", { className: "lib-xplat-swiper__progress-track", children: /* @__PURE__ */ jsx342(
9749
9794
  "span",
9750
9795
  {
9751
9796
  className: "lib-xplat-swiper__progress-fill",
@@ -9755,7 +9800,7 @@ var Swiper = (props) => {
9755
9800
  }
9756
9801
  }
9757
9802
  ) }) }),
9758
- canSlide && /* @__PURE__ */ jsx340("div", { className: "lib-xplat-swiper__dots", children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ jsx340(
9803
+ canSlide && /* @__PURE__ */ jsx342("div", { className: "lib-xplat-swiper__dots", children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ jsx342(
9759
9804
  "button",
9760
9805
  {
9761
9806
  className: clsx_default(
@@ -9774,7 +9819,7 @@ var Swiper_default = Swiper;
9774
9819
 
9775
9820
  // src/components/Switch/Switch.tsx
9776
9821
  import React33 from "react";
9777
- import { jsx as jsx341 } from "react/jsx-runtime";
9822
+ import { jsx as jsx343 } from "react/jsx-runtime";
9778
9823
  var KNOB_TRANSITION_MS = 250;
9779
9824
  var Switch = (props) => {
9780
9825
  const {
@@ -9801,7 +9846,7 @@ var Switch = (props) => {
9801
9846
  timeoutRef.current = null;
9802
9847
  }, KNOB_TRANSITION_MS);
9803
9848
  };
9804
- return /* @__PURE__ */ jsx341(
9849
+ return /* @__PURE__ */ jsx343(
9805
9850
  "div",
9806
9851
  {
9807
9852
  className: clsx_default(
@@ -9814,7 +9859,7 @@ var Switch = (props) => {
9814
9859
  ),
9815
9860
  onClick: handleClick,
9816
9861
  "aria-disabled": disabled || isAnimating,
9817
- children: /* @__PURE__ */ jsx341("div", { className: clsx_default("knob", value ? "checked" : void 0) })
9862
+ children: /* @__PURE__ */ jsx343("div", { className: clsx_default("knob", value ? "checked" : void 0) })
9818
9863
  }
9819
9864
  );
9820
9865
  };
@@ -9832,7 +9877,7 @@ var useTableContext = () => {
9832
9877
  var TableContext_default = TableContext;
9833
9878
 
9834
9879
  // src/components/Table/Table.tsx
9835
- import { jsx as jsx342 } from "react/jsx-runtime";
9880
+ import { jsx as jsx344 } from "react/jsx-runtime";
9836
9881
  var Table = (props) => {
9837
9882
  const {
9838
9883
  children,
@@ -9842,7 +9887,7 @@ var Table = (props) => {
9842
9887
  headerSticky = false,
9843
9888
  stickyShadow = true
9844
9889
  } = props;
9845
- return /* @__PURE__ */ jsx342("div", { className: `lib-xplat-table-wrapper ${size}`, children: /* @__PURE__ */ jsx342(
9890
+ return /* @__PURE__ */ jsx344("div", { className: `lib-xplat-table-wrapper ${size}`, children: /* @__PURE__ */ jsx344(
9846
9891
  TableContext_default.Provider,
9847
9892
  {
9848
9893
  value: {
@@ -9851,7 +9896,7 @@ var Table = (props) => {
9851
9896
  headerSticky,
9852
9897
  stickyShadow
9853
9898
  },
9854
- children: /* @__PURE__ */ jsx342("table", { className: "lib-xplat-table", children })
9899
+ children: /* @__PURE__ */ jsx344("table", { className: "lib-xplat-table", children })
9855
9900
  }
9856
9901
  ) });
9857
9902
  };
@@ -9859,10 +9904,10 @@ Table.displayName = "Table";
9859
9904
  var Table_default = Table;
9860
9905
 
9861
9906
  // src/components/Table/TableBody.tsx
9862
- import { jsx as jsx343 } from "react/jsx-runtime";
9907
+ import { jsx as jsx345 } from "react/jsx-runtime";
9863
9908
  var TableBody = (props) => {
9864
9909
  const { children } = props;
9865
- return /* @__PURE__ */ jsx343("tbody", { children });
9910
+ return /* @__PURE__ */ jsx345("tbody", { children });
9866
9911
  };
9867
9912
  TableBody.displayName = "TableBody";
9868
9913
  var TableBody_default = TableBody;
@@ -9892,7 +9937,7 @@ var useTableRowContext = () => {
9892
9937
  var TableRowContext_default = TableRowContext;
9893
9938
 
9894
9939
  // src/components/Table/TableCell.tsx
9895
- import { jsx as jsx344 } from "react/jsx-runtime";
9940
+ import { jsx as jsx346 } from "react/jsx-runtime";
9896
9941
  var TableCell = React37.memo((props) => {
9897
9942
  const {
9898
9943
  children,
@@ -9937,7 +9982,7 @@ var TableCell = React37.memo((props) => {
9937
9982
  const CellTag = isHeaderCell ? "th" : "td";
9938
9983
  const isLastSticky = isSticky && stickyCells[stickyCells.length - 1] === cellRef;
9939
9984
  const enableHover = headContext && headContext.cellHover;
9940
- return /* @__PURE__ */ jsx344(
9985
+ return /* @__PURE__ */ jsx346(
9941
9986
  CellTag,
9942
9987
  {
9943
9988
  ref: cellRef,
@@ -9964,20 +10009,20 @@ TableCell.displayName = "TableCell";
9964
10009
  var TableCell_default = TableCell;
9965
10010
 
9966
10011
  // src/components/Table/TableHead.tsx
9967
- import { jsx as jsx345 } from "react/jsx-runtime";
10012
+ import { jsx as jsx347 } from "react/jsx-runtime";
9968
10013
  var TableHead = ({
9969
10014
  children,
9970
10015
  cellHover = false
9971
10016
  }) => {
9972
10017
  const { headerSticky } = useTableContext();
9973
- return /* @__PURE__ */ jsx345(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ jsx345("thead", { className: clsx_default(headerSticky ? "table-sticky" : null), children }) });
10018
+ return /* @__PURE__ */ jsx347(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ jsx347("thead", { className: clsx_default(headerSticky ? "table-sticky" : null), children }) });
9974
10019
  };
9975
10020
  TableHead.displayName = "TableHead";
9976
10021
  var TableHead_default = TableHead;
9977
10022
 
9978
10023
  // src/components/Table/TableRow.tsx
9979
10024
  import React38 from "react";
9980
- import { jsx as jsx346 } from "react/jsx-runtime";
10025
+ import { jsx as jsx348 } from "react/jsx-runtime";
9981
10026
  var TableRow = React38.memo((props) => {
9982
10027
  const {
9983
10028
  children,
@@ -9994,7 +10039,7 @@ var TableRow = React38.memo((props) => {
9994
10039
  return [...prev, ref];
9995
10040
  });
9996
10041
  };
9997
- return /* @__PURE__ */ jsx346(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ jsx346(
10042
+ return /* @__PURE__ */ jsx348(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ jsx348(
9998
10043
  "tr",
9999
10044
  {
10000
10045
  className: clsx_default(
@@ -10018,7 +10063,7 @@ TableRow.displayName = "TableRow";
10018
10063
  var TableRow_default = TableRow;
10019
10064
 
10020
10065
  // src/components/Tag/Tag.tsx
10021
- import { jsx as jsx347, jsxs as jsxs220 } from "react/jsx-runtime";
10066
+ import { jsx as jsx349, jsxs as jsxs220 } from "react/jsx-runtime";
10022
10067
  var Tag = (props) => {
10023
10068
  const {
10024
10069
  children,
@@ -10039,8 +10084,8 @@ var Tag = (props) => {
10039
10084
  disabled && "disabled"
10040
10085
  ),
10041
10086
  children: [
10042
- /* @__PURE__ */ jsx347("span", { className: "tag-label", children }),
10043
- onClose && /* @__PURE__ */ jsx347("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", disabled, children: /* @__PURE__ */ jsx347(XIcon_default, {}) })
10087
+ /* @__PURE__ */ jsx349("span", { className: "tag-label", children }),
10088
+ onClose && /* @__PURE__ */ jsx349("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", disabled, children: /* @__PURE__ */ jsx349(XIcon_default, {}) })
10044
10089
  ]
10045
10090
  }
10046
10091
  );
@@ -10050,7 +10095,7 @@ var Tag_default = Tag;
10050
10095
 
10051
10096
  // src/components/TextArea/TextArea.tsx
10052
10097
  import React39 from "react";
10053
- import { jsx as jsx348 } from "react/jsx-runtime";
10098
+ import { jsx as jsx350 } from "react/jsx-runtime";
10054
10099
  var TextArea = React39.forwardRef(
10055
10100
  (props, ref) => {
10056
10101
  const {
@@ -10061,7 +10106,7 @@ var TextArea = React39.forwardRef(
10061
10106
  disabled,
10062
10107
  ...textareaProps
10063
10108
  } = props;
10064
- return /* @__PURE__ */ jsx348("div", { className: clsx_default("lib-xplat-textarea-wrap", className), children: /* @__PURE__ */ jsx348(
10109
+ return /* @__PURE__ */ jsx350("div", { className: clsx_default("lib-xplat-textarea-wrap", className), children: /* @__PURE__ */ jsx350(
10065
10110
  "textarea",
10066
10111
  {
10067
10112
  ...textareaProps,
@@ -10080,7 +10125,7 @@ var TextArea_default = TextArea;
10080
10125
  // src/components/Toast/Toast.tsx
10081
10126
  import React40 from "react";
10082
10127
  import { createPortal as createPortal3 } from "react-dom";
10083
- import { jsx as jsx349, jsxs as jsxs221 } from "react/jsx-runtime";
10128
+ import { jsx as jsx351, jsxs as jsxs221 } from "react/jsx-runtime";
10084
10129
  var ToastContext = React40.createContext(null);
10085
10130
  var useToast = () => {
10086
10131
  const ctx = React40.useContext(ToastContext);
@@ -10096,7 +10141,7 @@ var ToastItemComponent = ({ item, isExiting, onClose }) => {
10096
10141
  setHeight(ref.current.offsetHeight);
10097
10142
  }
10098
10143
  }, [isExiting]);
10099
- return /* @__PURE__ */ jsx349(
10144
+ return /* @__PURE__ */ jsx351(
10100
10145
  "div",
10101
10146
  {
10102
10147
  className: clsx_default("lib-xplat-toast-wrapper", { exit: isExiting }),
@@ -10111,8 +10156,8 @@ var ToastItemComponent = ({ item, isExiting, onClose }) => {
10111
10156
  className: clsx_default("lib-xplat-toast", item.type, { exit: isExiting }),
10112
10157
  role: "alert",
10113
10158
  children: [
10114
- /* @__PURE__ */ jsx349("span", { className: "message", children: item.message }),
10115
- /* @__PURE__ */ jsx349("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
10159
+ /* @__PURE__ */ jsx351("span", { className: "message", children: item.message }),
10160
+ /* @__PURE__ */ jsx351("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
10116
10161
  ]
10117
10162
  }
10118
10163
  )
@@ -10153,7 +10198,7 @@ var ToastProvider = ({
10153
10198
  return /* @__PURE__ */ jsxs221(ToastContext.Provider, { value: { toast }, children: [
10154
10199
  children,
10155
10200
  mounted && createPortal3(
10156
- /* @__PURE__ */ jsx349("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ jsx349(
10201
+ /* @__PURE__ */ jsx351("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ jsx351(
10157
10202
  ToastItemComponent,
10158
10203
  {
10159
10204
  item: t,
@@ -10170,15 +10215,17 @@ ToastProvider.displayName = "ToastProvider";
10170
10215
 
10171
10216
  // src/components/Tooltip/Tooltip.tsx
10172
10217
  import React41 from "react";
10173
- import { Fragment as Fragment5, jsx as jsx350, jsxs as jsxs222 } from "react/jsx-runtime";
10218
+ import { Fragment as Fragment5, jsx as jsx352, jsxs as jsxs222 } from "react/jsx-runtime";
10174
10219
  var OFFSET = 12;
10220
+ var GAP = 8;
10175
10221
  var SHOW_DELAY = 300;
10176
10222
  var Tooltip = (props) => {
10177
10223
  const {
10178
- type = "dark",
10224
+ children,
10179
10225
  title,
10180
10226
  description,
10181
- children,
10227
+ type = "dark",
10228
+ follow = false,
10182
10229
  disabled = false
10183
10230
  } = props;
10184
10231
  const triggerRef = React41.useRef(null);
@@ -10186,50 +10233,92 @@ var Tooltip = (props) => {
10186
10233
  const [visible, setVisible] = React41.useState(false);
10187
10234
  const [pos, setPos] = React41.useState({ left: 0, top: 0 });
10188
10235
  const delayTimer = React41.useRef(0);
10189
- const calculatePos = React41.useCallback((clientX, clientY) => {
10236
+ const rafRef = React41.useRef(0);
10237
+ const cursor = React41.useRef(null);
10238
+ const clamp = React41.useCallback((left, top, w, h) => {
10239
+ const vw = window.innerWidth;
10240
+ const vh = window.innerHeight;
10241
+ return {
10242
+ left: Math.min(Math.max(GAP, left), Math.max(GAP, vw - w - GAP)),
10243
+ top: Math.min(Math.max(GAP, top), Math.max(GAP, vh - h - GAP))
10244
+ };
10245
+ }, []);
10246
+ const placeAtCursor = React41.useCallback((x, y) => {
10190
10247
  const el = tooltipRef.current;
10191
10248
  if (!el) return;
10192
10249
  const w = el.offsetWidth;
10193
10250
  const h = el.offsetHeight;
10194
- const vw = window.innerWidth;
10195
- let left = clientX + OFFSET;
10196
- let top = clientY - h - OFFSET;
10197
- if (left + w > vw - 8) left = clientX - w - OFFSET;
10198
- if (top < 8) top = clientY + OFFSET;
10199
- if (left < 8) left = 8;
10200
- setPos({ left, top });
10201
- }, []);
10202
- const handleMouseEnter = React41.useCallback(() => {
10251
+ let left = x + OFFSET;
10252
+ let top = y - h - OFFSET;
10253
+ if (left + w > window.innerWidth - GAP) left = x - w - OFFSET;
10254
+ if (top < GAP) top = y + OFFSET;
10255
+ setPos(clamp(left, top, w, h));
10256
+ }, [clamp]);
10257
+ const placeAtTrigger = React41.useCallback(() => {
10258
+ const el = tooltipRef.current;
10259
+ const trigger = triggerRef.current;
10260
+ if (!el || !trigger) return;
10261
+ const w = el.offsetWidth;
10262
+ const h = el.offsetHeight;
10263
+ const rect = trigger.getBoundingClientRect();
10264
+ let top = rect.top - h - GAP;
10265
+ if (top < GAP) top = rect.bottom + GAP;
10266
+ const left = rect.left + rect.width / 2 - w / 2;
10267
+ setPos(clamp(left, top, w, h));
10268
+ }, [clamp]);
10269
+ const reposition = React41.useCallback(() => {
10270
+ if (follow && cursor.current) {
10271
+ placeAtCursor(cursor.current.x, cursor.current.y);
10272
+ } else {
10273
+ placeAtTrigger();
10274
+ }
10275
+ }, [follow, placeAtCursor, placeAtTrigger]);
10276
+ const handleMouseEnter = React41.useCallback((e) => {
10203
10277
  if (disabled) return;
10204
- delayTimer.current = window.setTimeout(() => {
10205
- setVisible(true);
10206
- }, SHOW_DELAY);
10278
+ cursor.current = { x: e.clientX, y: e.clientY };
10279
+ delayTimer.current = window.setTimeout(() => setVisible(true), SHOW_DELAY);
10207
10280
  }, [disabled]);
10208
10281
  const handleMouseMove = React41.useCallback((e) => {
10209
- if (!visible) return;
10210
- calculatePos(e.clientX, e.clientY);
10211
- }, [visible, calculatePos]);
10212
- const handleMouseLeave = React41.useCallback(() => {
10213
- window.clearTimeout(delayTimer.current);
10214
- setVisible(false);
10215
- }, []);
10216
- const handleClick = React41.useCallback(() => {
10282
+ cursor.current = { x: e.clientX, y: e.clientY };
10283
+ if (!visible || !follow) return;
10284
+ cancelAnimationFrame(rafRef.current);
10285
+ rafRef.current = requestAnimationFrame(() => {
10286
+ if (cursor.current) placeAtCursor(cursor.current.x, cursor.current.y);
10287
+ });
10288
+ }, [visible, follow, placeAtCursor]);
10289
+ const close = React41.useCallback(() => {
10217
10290
  window.clearTimeout(delayTimer.current);
10291
+ cancelAnimationFrame(rafRef.current);
10218
10292
  setVisible(false);
10219
10293
  }, []);
10294
+ const handleMouseLeave = React41.useCallback(() => {
10295
+ cursor.current = null;
10296
+ close();
10297
+ }, [close]);
10220
10298
  const handleFocus = React41.useCallback(() => {
10221
10299
  if (disabled) return;
10300
+ cursor.current = null;
10222
10301
  setVisible(true);
10223
10302
  }, [disabled]);
10224
- const handleBlur = React41.useCallback(() => {
10225
- setVisible(false);
10226
- }, []);
10227
10303
  React41.useLayoutEffect(() => {
10228
- if (!visible || !triggerRef.current) return;
10229
- const rect = triggerRef.current.getBoundingClientRect();
10230
- calculatePos(rect.right, rect.top);
10231
- }, [visible, calculatePos]);
10232
- if (!title && !description) return /* @__PURE__ */ jsx350(Fragment5, { children });
10304
+ if (!visible) return;
10305
+ reposition();
10306
+ }, [visible, reposition]);
10307
+ React41.useEffect(() => {
10308
+ if (!visible || follow) return;
10309
+ const onChange = () => placeAtTrigger();
10310
+ window.addEventListener("scroll", onChange, true);
10311
+ window.addEventListener("resize", onChange);
10312
+ return () => {
10313
+ window.removeEventListener("scroll", onChange, true);
10314
+ window.removeEventListener("resize", onChange);
10315
+ };
10316
+ }, [visible, follow, placeAtTrigger]);
10317
+ React41.useEffect(() => () => {
10318
+ window.clearTimeout(delayTimer.current);
10319
+ cancelAnimationFrame(rafRef.current);
10320
+ }, []);
10321
+ if (!title && !description) return /* @__PURE__ */ jsx352(Fragment5, { children });
10233
10322
  return /* @__PURE__ */ jsxs222(
10234
10323
  "div",
10235
10324
  {
@@ -10238,20 +10327,21 @@ var Tooltip = (props) => {
10238
10327
  onMouseEnter: handleMouseEnter,
10239
10328
  onMouseMove: handleMouseMove,
10240
10329
  onMouseLeave: handleMouseLeave,
10241
- onClick: handleClick,
10330
+ onClick: close,
10242
10331
  onFocus: handleFocus,
10243
- onBlur: handleBlur,
10332
+ onBlur: close,
10244
10333
  children: [
10245
10334
  children,
10246
- visible && /* @__PURE__ */ jsx350(Portal_default, { children: /* @__PURE__ */ jsxs222(
10335
+ visible && /* @__PURE__ */ jsx352(Portal_default, { children: /* @__PURE__ */ jsxs222(
10247
10336
  "div",
10248
10337
  {
10249
10338
  ref: tooltipRef,
10339
+ role: "tooltip",
10250
10340
  className: clsx_default("lib-xplat-tooltip", type),
10251
10341
  style: { position: "fixed", left: pos.left, top: pos.top },
10252
10342
  children: [
10253
- title && /* @__PURE__ */ jsx350("div", { className: "tooltip-title", children: title }),
10254
- description && /* @__PURE__ */ jsx350("div", { className: "tooltip-desc", children: description })
10343
+ title && /* @__PURE__ */ jsx352("div", { className: "tooltip-title", children: title }),
10344
+ description && /* @__PURE__ */ jsx352("div", { className: "tooltip-desc", children: description })
10255
10345
  ]
10256
10346
  }
10257
10347
  ) })
@@ -10264,10 +10354,10 @@ var Tooltip_default = Tooltip;
10264
10354
 
10265
10355
  // src/components/Video/Video.tsx
10266
10356
  import React42 from "react";
10267
- import { jsx as jsx351, jsxs as jsxs223 } from "react/jsx-runtime";
10357
+ import { jsx as jsx353, jsxs as jsxs223 } from "react/jsx-runtime";
10268
10358
  var PipIcon = () => /* @__PURE__ */ jsxs223("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
10269
- /* @__PURE__ */ jsx351("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
10270
- /* @__PURE__ */ jsx351("rect", { x: "12", y: "11", width: "7", height: "6", rx: "1", fill: "currentColor" })
10359
+ /* @__PURE__ */ jsx353("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
10360
+ /* @__PURE__ */ jsx353("rect", { x: "12", y: "11", width: "7", height: "6", rx: "1", fill: "currentColor" })
10271
10361
  ] });
10272
10362
  var formatTime = (sec) => {
10273
10363
  if (!Number.isFinite(sec) || sec < 0) return "0:00";
@@ -10448,7 +10538,7 @@ var Video = React42.forwardRef((props, ref) => {
10448
10538
  ref: containerRef,
10449
10539
  className: clsx_default("lib-xplat-video", showControls && "has-controls"),
10450
10540
  children: [
10451
- /* @__PURE__ */ jsx351(
10541
+ /* @__PURE__ */ jsx353(
10452
10542
  "video",
10453
10543
  {
10454
10544
  ref: setRefs,
@@ -10469,7 +10559,7 @@ var Video = React42.forwardRef((props, ref) => {
10469
10559
  children
10470
10560
  }
10471
10561
  ),
10472
- showCenterPlay && /* @__PURE__ */ jsx351(
10562
+ showCenterPlay && /* @__PURE__ */ jsx353(
10473
10563
  "button",
10474
10564
  {
10475
10565
  type: "button",
@@ -10481,11 +10571,11 @@ var Video = React42.forwardRef((props, ref) => {
10481
10571
  onClick: togglePlay,
10482
10572
  "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
10483
10573
  tabIndex: -1,
10484
- children: /* @__PURE__ */ jsx351("span", { className: "center-play-icon", children: /* @__PURE__ */ jsx351(PlayCircleIcon_default, {}) })
10574
+ children: /* @__PURE__ */ jsx353("span", { className: "center-play-icon", children: /* @__PURE__ */ jsx353(PlayCircleIcon_default, {}) })
10485
10575
  }
10486
10576
  ),
10487
10577
  showControls && /* @__PURE__ */ jsxs223("div", { className: "controls", onClick: (e) => e.stopPropagation(), children: [
10488
- /* @__PURE__ */ jsx351(
10578
+ /* @__PURE__ */ jsx353(
10489
10579
  "input",
10490
10580
  {
10491
10581
  type: "range",
@@ -10503,28 +10593,28 @@ var Video = React42.forwardRef((props, ref) => {
10503
10593
  }
10504
10594
  ),
10505
10595
  /* @__PURE__ */ jsxs223("div", { className: "controls-row", children: [
10506
- /* @__PURE__ */ jsx351(
10596
+ /* @__PURE__ */ jsx353(
10507
10597
  "button",
10508
10598
  {
10509
10599
  type: "button",
10510
10600
  className: "control-btn",
10511
10601
  onClick: togglePlay,
10512
10602
  "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
10513
- children: isPlaying ? /* @__PURE__ */ jsx351(PauseIcon_default, {}) : /* @__PURE__ */ jsx351(PlayIcon_default, {})
10603
+ children: isPlaying ? /* @__PURE__ */ jsx353(PauseIcon_default, {}) : /* @__PURE__ */ jsx353(PlayIcon_default, {})
10514
10604
  }
10515
10605
  ),
10516
10606
  /* @__PURE__ */ jsxs223("div", { className: "volume-group", children: [
10517
- /* @__PURE__ */ jsx351(
10607
+ /* @__PURE__ */ jsx353(
10518
10608
  "button",
10519
10609
  {
10520
10610
  type: "button",
10521
10611
  className: "control-btn",
10522
10612
  onClick: toggleMute,
10523
10613
  "aria-label": isMuted ? "\uC74C\uC18C\uAC70 \uD574\uC81C" : "\uC74C\uC18C\uAC70",
10524
- children: /* @__PURE__ */ jsx351(VolumeGlyph, {})
10614
+ children: /* @__PURE__ */ jsx353(VolumeGlyph, {})
10525
10615
  }
10526
10616
  ),
10527
- /* @__PURE__ */ jsx351(
10617
+ /* @__PURE__ */ jsx353(
10528
10618
  "input",
10529
10619
  {
10530
10620
  type: "range",
@@ -10544,7 +10634,7 @@ var Video = React42.forwardRef((props, ref) => {
10544
10634
  " / ",
10545
10635
  formatTime(duration)
10546
10636
  ] }),
10547
- /* @__PURE__ */ jsx351("div", { className: "controls-spacer" }),
10637
+ /* @__PURE__ */ jsx353("div", { className: "controls-spacer" }),
10548
10638
  playbackRates && playbackRates.length > 0 && /* @__PURE__ */ jsxs223("div", { className: clsx_default("rate-group", rateMenuOpen && "is-open"), children: [
10549
10639
  /* @__PURE__ */ jsxs223(
10550
10640
  "button",
@@ -10560,7 +10650,7 @@ var Video = React42.forwardRef((props, ref) => {
10560
10650
  ]
10561
10651
  }
10562
10652
  ),
10563
- rateMenuOpen && /* @__PURE__ */ jsx351("ul", { className: "rate-menu", role: "menu", children: playbackRates.map((r2) => /* @__PURE__ */ jsx351("li", { children: /* @__PURE__ */ jsxs223(
10653
+ rateMenuOpen && /* @__PURE__ */ jsx353("ul", { className: "rate-menu", role: "menu", children: playbackRates.map((r2) => /* @__PURE__ */ jsx353("li", { children: /* @__PURE__ */ jsxs223(
10564
10654
  "button",
10565
10655
  {
10566
10656
  type: "button",
@@ -10574,7 +10664,7 @@ var Video = React42.forwardRef((props, ref) => {
10574
10664
  }
10575
10665
  ) }, r2)) })
10576
10666
  ] }),
10577
- showCaptions && /* @__PURE__ */ jsx351(
10667
+ showCaptions && /* @__PURE__ */ jsx353(
10578
10668
  "button",
10579
10669
  {
10580
10670
  type: "button",
@@ -10582,37 +10672,37 @@ var Video = React42.forwardRef((props, ref) => {
10582
10672
  onClick: toggleCaptions,
10583
10673
  "aria-label": captionsOn ? "\uC790\uB9C9 \uB044\uAE30" : "\uC790\uB9C9 \uCF1C\uAE30",
10584
10674
  "aria-pressed": captionsOn,
10585
- children: /* @__PURE__ */ jsx351(TypeIcon_default, {})
10675
+ children: /* @__PURE__ */ jsx353(TypeIcon_default, {})
10586
10676
  }
10587
10677
  ),
10588
- showPip && pipSupported && /* @__PURE__ */ jsx351(
10678
+ showPip && pipSupported && /* @__PURE__ */ jsx353(
10589
10679
  "button",
10590
10680
  {
10591
10681
  type: "button",
10592
10682
  className: clsx_default("control-btn", isPip && "is-active"),
10593
10683
  onClick: togglePip,
10594
10684
  "aria-label": isPip ? "PIP \uC885\uB8CC" : "PIP",
10595
- children: /* @__PURE__ */ jsx351(PipIcon, {})
10685
+ children: /* @__PURE__ */ jsx353(PipIcon, {})
10596
10686
  }
10597
10687
  ),
10598
- showDownload && /* @__PURE__ */ jsx351(
10688
+ showDownload && /* @__PURE__ */ jsx353(
10599
10689
  "a",
10600
10690
  {
10601
10691
  className: "control-btn",
10602
10692
  href: src,
10603
10693
  download: downloadFileName ?? true,
10604
10694
  "aria-label": "\uB2E4\uC6B4\uB85C\uB4DC",
10605
- children: /* @__PURE__ */ jsx351(DownloadIcon_default, {})
10695
+ children: /* @__PURE__ */ jsx353(DownloadIcon_default, {})
10606
10696
  }
10607
10697
  ),
10608
- /* @__PURE__ */ jsx351(
10698
+ /* @__PURE__ */ jsx353(
10609
10699
  "button",
10610
10700
  {
10611
10701
  type: "button",
10612
10702
  className: "control-btn",
10613
10703
  onClick: toggleFullscreen,
10614
10704
  "aria-label": isFullscreen ? "\uC804\uCCB4\uD654\uBA74 \uC885\uB8CC" : "\uC804\uCCB4\uD654\uBA74",
10615
- children: isFullscreen ? /* @__PURE__ */ jsx351(MinimizeIcon_default, {}) : /* @__PURE__ */ jsx351(MaximizeIcon_default, {})
10705
+ children: isFullscreen ? /* @__PURE__ */ jsx353(MinimizeIcon_default, {}) : /* @__PURE__ */ jsx353(MaximizeIcon_default, {})
10616
10706
  }
10617
10707
  )
10618
10708
  ] })
@@ -10625,7 +10715,7 @@ Video.displayName = "Video";
10625
10715
  var Video_default = Video;
10626
10716
 
10627
10717
  // src/layout/Grid/FullGrid/FullGrid.tsx
10628
- import { jsx as jsx352 } from "react/jsx-runtime";
10718
+ import { jsx as jsx354 } from "react/jsx-runtime";
10629
10719
  var GAP_MAP = {
10630
10720
  none: "var(--spacing-space-none)",
10631
10721
  xs: "var(--spacing-space-1)",
@@ -10638,13 +10728,13 @@ var GAP_MAP = {
10638
10728
  var FullGrid = (props) => {
10639
10729
  const { children, gap } = props;
10640
10730
  const style = gap != null ? { gap: GAP_MAP[gap] } : void 0;
10641
- return /* @__PURE__ */ jsx352("div", { className: "lib-xplat-full-grid", style, children });
10731
+ return /* @__PURE__ */ jsx354("div", { className: "lib-xplat-full-grid", style, children });
10642
10732
  };
10643
10733
  FullGrid.displayName = "FullGrid";
10644
10734
  var FullGrid_default = FullGrid;
10645
10735
 
10646
10736
  // src/layout/Grid/FullScreen/FullScreen.tsx
10647
- import { jsx as jsx353 } from "react/jsx-runtime";
10737
+ import { jsx as jsx355 } from "react/jsx-runtime";
10648
10738
  var GAP_MAP2 = {
10649
10739
  none: "var(--spacing-space-none)",
10650
10740
  xs: "var(--spacing-space-1)",
@@ -10657,13 +10747,13 @@ var GAP_MAP2 = {
10657
10747
  var FullScreen = (props) => {
10658
10748
  const { children, gap } = props;
10659
10749
  const style = gap != null ? { gap: GAP_MAP2[gap] } : void 0;
10660
- return /* @__PURE__ */ jsx353("div", { className: "lib-xplat-full-screen", style, children });
10750
+ return /* @__PURE__ */ jsx355("div", { className: "lib-xplat-full-screen", style, children });
10661
10751
  };
10662
10752
  FullScreen.displayName = "FullScreen";
10663
10753
  var FullScreen_default = FullScreen;
10664
10754
 
10665
10755
  // src/layout/Grid/Item/Item.tsx
10666
- import { jsx as jsx354 } from "react/jsx-runtime";
10756
+ import { jsx as jsx356 } from "react/jsx-runtime";
10667
10757
  var calculateSpans = (column) => {
10668
10758
  const spans = {};
10669
10759
  let inherited = column.default;
@@ -10680,35 +10770,35 @@ var GridItem = ({ column, children, className }) => {
10680
10770
  Object.entries(spans).forEach(([key, value]) => {
10681
10771
  style[`--column-${key}`] = value;
10682
10772
  });
10683
- return /* @__PURE__ */ jsx354("div", { className: clsx_default("lib-xplat-grid-item", className), style, children });
10773
+ return /* @__PURE__ */ jsx356("div", { className: clsx_default("lib-xplat-grid-item", className), style, children });
10684
10774
  };
10685
10775
  GridItem.displayName = "GridItem";
10686
10776
  var Item_default = GridItem;
10687
10777
 
10688
10778
  // src/layout/Header/Header.tsx
10689
- import { jsx as jsx355, jsxs as jsxs224 } from "react/jsx-runtime";
10779
+ import { jsx as jsx357, jsxs as jsxs224 } from "react/jsx-runtime";
10690
10780
  var Header = ({
10691
10781
  logo,
10692
10782
  centerContent,
10693
10783
  rightContent
10694
10784
  }) => {
10695
10785
  return /* @__PURE__ */ jsxs224("div", { className: "lib-xplat-layout-header", children: [
10696
- /* @__PURE__ */ jsx355("div", { children: logo }),
10697
- /* @__PURE__ */ jsx355("div", { children: centerContent }),
10698
- /* @__PURE__ */ jsx355("div", { children: rightContent })
10786
+ /* @__PURE__ */ jsx357("div", { children: logo }),
10787
+ /* @__PURE__ */ jsx357("div", { children: centerContent }),
10788
+ /* @__PURE__ */ jsx357("div", { children: rightContent })
10699
10789
  ] });
10700
10790
  };
10701
10791
  Header.displayName = "Header";
10702
10792
  var Header_default = Header;
10703
10793
 
10704
10794
  // src/layout/Layout/Layout.tsx
10705
- import { Fragment as Fragment6, jsx as jsx356, jsxs as jsxs225 } from "react/jsx-runtime";
10795
+ import { Fragment as Fragment6, jsx as jsx358, jsxs as jsxs225 } from "react/jsx-runtime";
10706
10796
  var Layout = (props) => {
10707
10797
  const { header, sideBar, children } = props;
10708
- return /* @__PURE__ */ jsx356("div", { className: "lib-xplat-layout", children: /* @__PURE__ */ jsxs225("div", { className: "lib-xplat-layout-content-wrapper", children: [
10709
- sideBar && /* @__PURE__ */ jsx356(Fragment6, { children: sideBar }),
10798
+ return /* @__PURE__ */ jsx358("div", { className: "lib-xplat-layout", children: /* @__PURE__ */ jsxs225("div", { className: "lib-xplat-layout-content-wrapper", children: [
10799
+ sideBar && /* @__PURE__ */ jsx358(Fragment6, { children: sideBar }),
10710
10800
  /* @__PURE__ */ jsxs225("div", { className: "lib-xplat-layout-content", children: [
10711
- header && /* @__PURE__ */ jsx356("div", { className: "lib-xplat-layout-conent-header", children: header }),
10801
+ header && /* @__PURE__ */ jsx358("div", { className: "lib-xplat-layout-conent-header", children: header }),
10712
10802
  children
10713
10803
  ] })
10714
10804
  ] }) });
@@ -10730,18 +10820,18 @@ var useSideBarContext = () => {
10730
10820
  var SideBarContext_default = SideBarContext;
10731
10821
 
10732
10822
  // src/layout/SideBar/SideBar.tsx
10733
- import { jsx as jsx357 } from "react/jsx-runtime";
10823
+ import { jsx as jsx359 } from "react/jsx-runtime";
10734
10824
  var SideBar = (props) => {
10735
10825
  const { children, className } = props;
10736
10826
  const [isOpen, setIsOpen] = React44.useState(true);
10737
10827
  const handleSwitchSideBar = () => {
10738
10828
  setIsOpen((prev) => !prev);
10739
10829
  };
10740
- return /* @__PURE__ */ jsx357(
10830
+ return /* @__PURE__ */ jsx359(
10741
10831
  SideBarContext_default.Provider,
10742
10832
  {
10743
10833
  value: { isSidebarOpen: isOpen, handleSwitchSideBar },
10744
- children: /* @__PURE__ */ jsx357(
10834
+ children: /* @__PURE__ */ jsx359(
10745
10835
  "div",
10746
10836
  {
10747
10837
  className: clsx_default(
@@ -10944,7 +11034,9 @@ export {
10944
11034
  Layout_default as Layout,
10945
11035
  LayoutIcon_default as LayoutIcon,
10946
11036
  LifeBuoyIcon_default as LifeBuoyIcon,
11037
+ Link_default as Link,
10947
11038
  Link2Icon_default as Link2Icon,
11039
+ LinkButton_default as LinkButton,
10948
11040
  LinkIcon_default as LinkIcon,
10949
11041
  LinkedinIcon_default as LinkedinIcon,
10950
11042
  ListIcon_default as ListIcon,