@tipp/ui 2.3.35 → 2.3.37

package/dist/chunk-OXZ25J7F.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/pagination.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from 'react';\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  DoubleArrowLeftIcon,\n  DoubleArrowRightIcon,\n} from '../icon';\nimport type { IconButtonProps } from './icon-button';\nimport { IconButton } from './icon-button';\nimport { Flex } from './flex';\nimport { Typo } from './typo';\n\nexport interface PaginationProps {\n  /** 현재 선택된 페이지, 1부터 시작. 지정 시 controlled 모드로 동작한다. */\n  page?: number;\n  /** 기본 선택 페이지, page보다 낮은 우선 순위를 갖는다 */\n  defaultPage?: number;\n  /** 선택한 페이지 변경 이벤트 cb */\n  onChange?: (page: number) => void;\n  /** 전체 페이지의 수 */\n  count?: number;\n  /** 표시할 페이지 버튼의 개수 */\n  siblingCount?: number;\n}\n\nexport function Pagination(props: PaginationProps): React.ReactNode {\n  const { onChange, count = 0, siblingCount = 2 } = props;\n\n  const isControlled = props.page !== undefined;\n  const [internalPage, setInternalPage] = useState(props.defaultPage || 1);\n  const page = isControlled ? (props.page as number) : internalPage;\n\n  const goToPage = useCallback(\n    (next: number) => {\n      if (!isControlled) {\n        setInternalPage(next);\n      }\n      onChange?.(next);\n    },\n    [isControlled, onChange]\n  );\n\n  const visibleItems = useMemo(() => {\n    let start = Math.max(1, page - siblingCount);\n    let end = Math.min(count, page + siblingCount);\n    if (page - siblingCount <= 0 && end < count) {\n      end = Math.min(count, end + Math.abs(page - siblingCount) + 1);\n    } else if (page + siblingCount > count && start > 1) {\n      start = Math.max(1, start - (page + siblingCount - count));\n    }\n\n    return Array.from({ length: end - start + 1 }, (_, i) => i + start);\n  }, [count, page, siblingCount]);\n\n  const prev = useMemo<number | undefined>(() => {\n    const p = page - 1;\n    return p < 1 ? undefined : p;\n  }, [page]);\n\n  const next = useMemo<number | undefined>(() => {\n    const n = page + 1;\n    return n > count ? undefined : n;\n  }, [count, page]);\n\n  const onClickPrev = useCallback(() => {\n    if (prev) goToPage(prev);\n  }, [prev, goToPage]);\n\n  const onClickNext = useCallback(() => {\n    if (next) goToPage(next);\n  }, [next, goToPage]);\n\n  const doublePrev = useMemo<number | undefined>(() => {\n    if (!visibleItems.length) return;\n    return Math.max(0, visibleItems[0] - 1);\n  }, [visibleItems]);\n\n  const onClickDoublePrev = useCallback(() => {\n    if (doublePrev) goToPage(doublePrev);\n  }, [doublePrev, goToPage]);\n\n  const doubleNext = useMemo<number | undefined>(() => {\n    if (!visibleItems.length) return;\n    const n = visibleItems[visibleItems.length - 1] + 1;\n    if (n > count) return;\n    return Math.min(count, n);\n  }, [count, visibleItems]);\n\n  const onClickDoubleNext = useCallback(() => {\n    if (doubleNext) goToPage(doubleNext);\n  }, [doubleNext, goToPage]);\n\n  const iconSize = {\n    height: 24,\n    width: 24,\n  };\n\n  const moveButtonProps: IconButtonProps = {\n    variant: 'ghost',\n    size: 'large',\n    style: { borderRadius: '50%' },\n  };\n\n  return (\n    <Flex align=\"center\" className=\"tipp-pagination\">\n      <IconButton\n        disabled={!doublePrev}\n        onClick={onClickDoublePrev}\n        {...moveButtonProps}\n      >\n        <DoubleArrowLeftIcon {...iconSize} />\n      </IconButton>\n      <IconButton disabled={!prev} onClick={onClickPrev} {...moveButtonProps}>\n        <ChevronLeftIcon {...iconSize} />\n      </IconButton>\n      <Flex gap=\"1\">\n        {visibleItems.map((item) => {\n          return (\n            <button\n              className={`page-button ${item === page ? 'active' : ''}`}\n              key={item}\n              onClick={() => {\n                goToPage(item);\n              }}\n              type=\"button\"\n            >\n              <Typo variant=\"body\">{item}</Typo>\n            </button>\n          );\n        })}\n      </Flex>\n      <IconButton disabled={!next} onClick={onClickNext} {...moveButtonProps}>\n        <ChevronRightIcon {...iconSize} />\n      </IconButton>\n      <IconButton\n        disabled={!doubleNext}\n        onClick={onClickDoubleNext}\n        {...moveButtonProps}\n      >\n        <DoubleArrowRightIcon {...iconSize} />\n      </IconButton>\n    </Flex>\n  );\n}\n"],"mappings":"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","names":["next"]}

package/dist/{chunk-2TNZVHXZ.js → chunk-QANVXCYU.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-ZFTQ2XBH.js";
 import {
   curriculum_review_default
-} from "./chunk-SRZK4OC5.js";
+} from "./chunk-V7MD4RRM.js";
 import {
   useCurriculumContext
 } from "./chunk-WA5A2GB4.js";
@@ -66,4 +66,4 @@ function CurriculumBody() {
 export {
   CurriculumBody
 };
-//# sourceMappingURL=chunk-2TNZVHXZ.js.map
+//# sourceMappingURL=chunk-QANVXCYU.js.map

package/dist/{chunk-64XYTE54.js → chunk-RFXVHZAN.js}

@@ -12,15 +12,15 @@ import {
 import {
   Heading
 } from "./chunk-BESTU2AY.js";
-import {
-  Card
-} from "./chunk-RP2RGCAW.js";
 import {
   Box
 } from "./chunk-4Y5BEXVN.js";
 import {
   Flex
 } from "./chunk-25HMMI7R.js";
+import {
+  Card
+} from "./chunk-RP2RGCAW.js";
 
 // src/app/platform/userInfos/coaching-customer-info/large.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -61,4 +61,4 @@ function CoachingCustomerInfoLarge({
 export {
   CoachingCustomerInfoLarge
 };
-//# sourceMappingURL=chunk-64XYTE54.js.map
+//# sourceMappingURL=chunk-RFXVHZAN.js.map

package/dist/{chunk-F7JSPN5P.js → chunk-SACH3XVV.js}

@@ -7,9 +7,6 @@ import {
 import {
   Heading
 } from "./chunk-BESTU2AY.js";
-import {
-  Badge
-} from "./chunk-U3BQT7ZO.js";
 import {
   Box
 } from "./chunk-4Y5BEXVN.js";
@@ -25,6 +22,9 @@ import {
 import {
   AspectRatio
 } from "./chunk-EAXUQEO5.js";
+import {
+  Badge
+} from "./chunk-U3BQT7ZO.js";
 import {
   __spreadProps,
   __spreadValues
@@ -160,4 +160,4 @@ function LearningPost(props) {
 export {
   LearningPost
 };
-//# sourceMappingURL=chunk-F7JSPN5P.js.map
+//# sourceMappingURL=chunk-SACH3XVV.js.map

package/dist/{chunk-DWBYAHIR.js → chunk-SNPAB3HJ.js}

@@ -1,9 +1,6 @@
 import {
   Heading
 } from "./chunk-BESTU2AY.js";
-import {
-  Card
-} from "./chunk-RP2RGCAW.js";
 import {
   Box
 } from "./chunk-4Y5BEXVN.js";
@@ -16,6 +13,9 @@ import {
 import {
   Button
 } from "./chunk-ZVDAEY5Q.js";
+import {
+  Card
+} from "./chunk-RP2RGCAW.js";
 import {
   DownloadIcon
 } from "./chunk-DLP4UUNG.js";
@@ -65,4 +65,4 @@ function ReportCard(props) {
 export {
   ReportCard
 };
-//# sourceMappingURL=chunk-DWBYAHIR.js.map
+//# sourceMappingURL=chunk-SNPAB3HJ.js.map

package/dist/{chunk-5TZNUXBT.js → chunk-SSSGPTRM.js}

@@ -1,9 +1,6 @@
 import {
   Heading
 } from "./chunk-BESTU2AY.js";
-import {
-  Card
-} from "./chunk-RP2RGCAW.js";
 import {
   Box
 } from "./chunk-4Y5BEXVN.js";
@@ -13,6 +10,9 @@ import {
 import {
   Flex
 } from "./chunk-25HMMI7R.js";
+import {
+  Card
+} from "./chunk-RP2RGCAW.js";
 import {
   __spreadValues
 } from "./chunk-CRTRMMJ7.js";
@@ -36,4 +36,4 @@ function CoachQuestionList({
 export {
   CoachQuestionList
 };
-//# sourceMappingURL=chunk-5TZNUXBT.js.map
+//# sourceMappingURL=chunk-SSSGPTRM.js.map

package/dist/{chunk-6MQMVYEP.js → chunk-TTVJOFG5.js}

@@ -1,9 +1,9 @@
 import {
   CoachingCustomerInfoLarge
-} from "./chunk-64XYTE54.js";
+} from "./chunk-RFXVHZAN.js";
 import {
   CoachingCustomerInfoMedium
-} from "./chunk-62HSZXVT.js";
+} from "./chunk-KD6EXWP7.js";
 import {
   CoachingCustomerInfoSmall
 } from "./chunk-YADSNPMG.js";
@@ -27,4 +27,4 @@ function CoachingCustomerInfo(props) {
 export {
   CoachingCustomerInfo
 };
-//# sourceMappingURL=chunk-6MQMVYEP.js.map
+//# sourceMappingURL=chunk-TTVJOFG5.js.map

package/dist/{chunk-SRZK4OC5.js → chunk-V7MD4RRM.js}

@@ -1,6 +1,6 @@
 import {
   CurriculumReviewSteps_default
-} from "./chunk-ESM3HX57.js";
+} from "./chunk-HIMIOODO.js";
 import {
   useCurriculumContext
 } from "./chunk-WA5A2GB4.js";
@@ -193,4 +193,4 @@ var curriculum_review_default = CurriculumReview;
 export {
   curriculum_review_default
 };
-//# sourceMappingURL=chunk-SRZK4OC5.js.map
+//# sourceMappingURL=chunk-V7MD4RRM.js.map

package/dist/{chunk-PGUDVR3V.js → chunk-XWNFR24N.js}

@@ -1,6 +1,6 @@
 import {
   review_question_body_default
-} from "./chunk-7R5KG7SJ.js";
+} from "./chunk-ZKS3IW7D.js";
 import {
   review_question_footer_default
 } from "./chunk-76PNGKCB.js";
@@ -60,4 +60,4 @@ var ReviewQuestion_default = ReviewQuestion;
 export {
   ReviewQuestion_default
 };
-//# sourceMappingURL=chunk-PGUDVR3V.js.map
+//# sourceMappingURL=chunk-XWNFR24N.js.map

package/dist/{chunk-TCFXG4AX.js → chunk-XXMZLXDE.js}

@@ -7,18 +7,18 @@ import {
 import {
   Grid
 } from "./chunk-EGEQY3KT.js";
-import {
-  Callout
-} from "./chunk-B6XJN6EC.js";
-import {
-  Card
-} from "./chunk-RP2RGCAW.js";
 import {
   Box
 } from "./chunk-4Y5BEXVN.js";
 import {
   Typo
 } from "./chunk-PMJIFLDT.js";
+import {
+  Callout
+} from "./chunk-B6XJN6EC.js";
+import {
+  Card
+} from "./chunk-RP2RGCAW.js";
 import {
   BellIcon
 } from "./chunk-DLP4UUNG.js";
@@ -84,4 +84,4 @@ var review_question_text_default = ReviewQuestionText;
 export {
   review_question_text_default
 };
-//# sourceMappingURL=chunk-TCFXG4AX.js.map
+//# sourceMappingURL=chunk-XXMZLXDE.js.map

package/dist/{chunk-7R5KG7SJ.js → chunk-ZKS3IW7D.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk-W7TBPRHG.js";
 import {
   review_question_text_default
-} from "./chunk-TCFXG4AX.js";
+} from "./chunk-XXMZLXDE.js";
 import {
   review_question_radio_default
-} from "./chunk-OILH5J7Q.js";
+} from "./chunk-GXG26SHU.js";
 import {
   review_question_satisfaction_option_default
-} from "./chunk-NTJLECYY.js";
+} from "./chunk-JFJ3N4V5.js";
 
 // src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-body.tsx
 import { jsx } from "react/jsx-runtime";
@@ -66,4 +66,4 @@ var review_question_body_default = ReviewQuestionBody;
 export {
   review_question_body_default
 };
-//# sourceMappingURL=chunk-7R5KG7SJ.js.map
+//# sourceMappingURL=chunk-ZKS3IW7D.js.map

package/dist/{chunk-5OLJJUMC.js → chunk-ZVSATS4O.js}

@@ -7,12 +7,6 @@ import {
 import {
   Grid
 } from "./chunk-EGEQY3KT.js";
-import {
-  AutoSizingInput
-} from "./chunk-6SYFG6YY.js";
-import {
-  Badge
-} from "./chunk-U3BQT7ZO.js";
 import {
   Typo
 } from "./chunk-PMJIFLDT.js";
@@ -25,6 +19,12 @@ import {
 import {
   CheckIcon
 } from "./chunk-DLP4UUNG.js";
+import {
+  AutoSizingInput
+} from "./chunk-6SYFG6YY.js";
+import {
+  Badge
+} from "./chunk-U3BQT7ZO.js";
 
 // src/molecules/tag-selector.tsx
 import {
@@ -360,4 +360,4 @@ var preventDefault = (e) => {
 export {
   TagSelector
 };
-//# sourceMappingURL=chunk-5OLJJUMC.js.map
+//# sourceMappingURL=chunk-ZVSATS4O.js.map

package/dist/context/index.js

@@ -4,12 +4,12 @@ import {
   useDynamicForm
 } from "../chunk-4U6DFH7Z.js";
 import "../chunk-QDC3LFHS.js";
-import "../chunk-BESTU2AY.js";
 import {
   UIStateContext,
   UIStateProvider,
   useUIState
 } from "../chunk-PT57HCAI.js";
+import "../chunk-BESTU2AY.js";
 import "../chunk-PMJIFLDT.js";
 import "../chunk-LDBWASUA.js";
 import "../chunk-CRTRMMJ7.js";

package/dist/index.cjs

@@ -1691,7 +1691,18 @@ CircleFileIcon.displayName = "CircleFileIcon";
 var import_jsx_runtime34 = require("react/jsx-runtime");
 function Pagination(props) {
   const { onChange, count = 0, siblingCount = 2 } = props;
-  const [page, setPage] = (0, import_react20.useState)(() => props.page || props.defaultPage || 1);
+  const isControlled = props.page !== void 0;
+  const [internalPage, setInternalPage] = (0, import_react20.useState)(props.defaultPage || 1);
+  const page = isControlled ? props.page : internalPage;
+  const goToPage = (0, import_react20.useCallback)(
+    (next2) => {
+      if (!isControlled) {
+        setInternalPage(next2);
+      }
+      onChange == null ? void 0 : onChange(next2);
+    },
+    [isControlled, onChange]
+  );
   const visibleItems = (0, import_react20.useMemo)(() => {
     let start = Math.max(1, page - siblingCount);
     let end = Math.min(count, page + siblingCount);
@@ -1702,24 +1713,6 @@ function Pagination(props) {
     }
     return Array.from({ length: end - start + 1 }, (_, i) => i + start);
   }, [count, page, siblingCount]);
-  const onChangeRef = (0, import_react20.useRef)(onChange);
-  (0, import_react20.useEffect)(() => {
-    onChangeRef.current = onChange;
-  });
-  const isFirstRender = (0, import_react20.useRef)(true);
-  (0, import_react20.useEffect)(() => {
-    var _a;
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-      return;
-    }
-    (_a = onChangeRef.current) == null ? void 0 : _a.call(onChangeRef, page);
-  }, [page]);
-  (0, import_react20.useEffect)(() => {
-    if (props.page && props.page !== page) {
-      setPage(props.page);
-    }
-  }, [props.page, page]);
   const prev = (0, import_react20.useMemo)(() => {
     const p = page - 1;
     return p < 1 ? void 0 : p;
@@ -1729,18 +1722,18 @@ function Pagination(props) {
     return n > count ? void 0 : n;
   }, [count, page]);
   const onClickPrev = (0, import_react20.useCallback)(() => {
-    prev && setPage(prev);
-  }, [prev]);
+    if (prev) goToPage(prev);
+  }, [prev, goToPage]);
   const onClickNext = (0, import_react20.useCallback)(() => {
-    next && setPage(next);
-  }, [next]);
+    if (next) goToPage(next);
+  }, [next, goToPage]);
   const doublePrev = (0, import_react20.useMemo)(() => {
     if (!visibleItems.length) return;
     return Math.max(0, visibleItems[0] - 1);
   }, [visibleItems]);
   const onClickDoublePrev = (0, import_react20.useCallback)(() => {
-    doublePrev && setPage(doublePrev);
-  }, [doublePrev]);
+    if (doublePrev) goToPage(doublePrev);
+  }, [doublePrev, goToPage]);
   const doubleNext = (0, import_react20.useMemo)(() => {
     if (!visibleItems.length) return;
     const n = visibleItems[visibleItems.length - 1] + 1;
@@ -1748,8 +1741,8 @@ function Pagination(props) {
     return Math.min(count, n);
   }, [count, visibleItems]);
   const onClickDoubleNext = (0, import_react20.useCallback)(() => {
-    doubleNext && setPage(doubleNext);
-  }, [doubleNext]);
+    if (doubleNext) goToPage(doubleNext);
+  }, [doubleNext, goToPage]);
   const iconSize = {
     height: 24,
     width: 24
@@ -1776,7 +1769,7 @@ function Pagination(props) {
         {
           className: `page-button ${item === page ? "active" : ""}`,
           onClick: () => {
-            setPage(item);
+            goToPage(item);
           },
           type: "button",
           children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Typo, { variant: "body", children: item })
@@ -6375,6 +6368,19 @@ function TrainingInfoGuidelineItem({
       }
     );
   }
+  if (value.type === "youtube-shorts") {
+    return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+      TrainingInfoGuidelineButton,
+      {
+        description: "TIPP \uC1FC\uCE20 \uBCF4\uAE30",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_react_icons8.VideoIcon, {}),
+        onClick: () => {
+          window.open(value.url, "_blank");
+        },
+        title: value.title
+      }
+    );
+  }
   if (value.type === "video") {
     return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(Dialog.Root, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Dialog.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(