@tipp/ui 2.2.3 → 2.2.5

package/dist/chunk-W4ELCM47.js

@@ -1,192 +0,0 @@
-import {
-  Row
-} from "./chunk-WDUSQ6HR.js";
-import {
-  Spinner
-} from "./chunk-FR2GDOU2.js";
-import {
-  Pagination
-} from "./chunk-BXQCEPIO.js";
-import {
-  Typo
-} from "./chunk-PARGQUJB.js";
-import {
-  Flex
-} from "./chunk-25HMMI7R.js";
-import {
-  TriangleArrowUpIcon
-} from "./chunk-PVL7SJYR.js";
-import {
-  TriangleArrowDownIcon
-} from "./chunk-2TPQQBUQ.js";
-
-// src/molecules/expand-table/index.tsx
-import {
-  flexRender,
-  getCoreRowModel,
-  useReactTable,
-  getSortedRowModel,
-  createColumnHelper,
-  getPaginationRowModel
-} from "@tanstack/react-table";
-import { useCallback, useMemo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-function ExpandTable(props) {
-  const {
-    data,
-    columns,
-    ExpandComp,
-    placeholder,
-    onRowClick,
-    tableStyle,
-    showPagination = true,
-    isLoading,
-    pageIndex = 0,
-    pageSize = 10,
-    siblingCount = 2,
-    getRowStyle,
-    getCellStyle
-  } = props;
-  const defaultAlign = "left";
-  const [pagination, setPagination] = useState({
-    pageIndex: pageIndex || 0,
-    pageSize: pageSize || 9999
-  });
-  const [sorting, setSorting] = useState([]);
-  const { getRowModel, getHeaderGroups, setPageIndex } = useReactTable({
-    data: data || [],
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    state: {
-      sorting,
-      pagination
-    },
-    onSortingChange: setSorting,
-    getPaginationRowModel: getPaginationRowModel(),
-    onPaginationChange: setPagination
-  });
-  const gridTemplateColumns = useMemo(() => {
-    return columns.map((col) => {
-      var _a;
-      if ((_a = col.meta) == null ? void 0 : _a.autoSize) return `minmax(${col.size || 50}px, 1fr)`;
-      return `${col.size || 150}px`;
-    }).join(" ");
-  }, [columns]);
-  const rowModels = getRowModel();
-  const onChangePagination = useCallback(
-    (page) => {
-      setPageIndex(page - 1);
-    },
-    [setPageIndex]
-  );
-  const helpCompRender = useCallback(
-    (rowLength) => {
-      if (isLoading) {
-        return /* @__PURE__ */ jsx(
-          Flex,
-          {
-            align: "center",
-            height: "100%",
-            justify: "center",
-            p: "5",
-            width: "100%",
-            children: /* @__PURE__ */ jsx(Spinner, {})
-          }
-        );
-      }
-      if (rowLength === 0) {
-        return /* @__PURE__ */ jsx("div", { className: "tr", children: /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ jsx(Typo, { color: "gray", mb: "6", mt: "6", variant: "body", children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }) }) }, "expand_placeholder");
-      }
-      return null;
-    },
-    [isLoading, placeholder]
-  );
-  const pageCount = useMemo(() => {
-    if (!data) return 0;
-    return Math.ceil(data.length / pageSize);
-  }, [data, pageSize]);
-  return /* @__PURE__ */ jsxs("div", { className: "expand-table-wrapper", children: [
-    /* @__PURE__ */ jsxs("div", { className: "expand-table", style: tableStyle, children: [
-      /* @__PURE__ */ jsx("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "tr",
-          style: { gridTemplateColumns },
-          children: headerGroup.headers.map((header) => {
-            var _a;
-            const sortable = header.column.getCanSort();
-            const sortedState = header.column.getIsSorted();
-            const justifyContent = ((_a = header.column.columnDef.meta) == null ? void 0 : _a.align) || defaultAlign;
-            return /* @__PURE__ */ jsx("div", { className: `${justifyContent} th`, children: /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: header.column.getToggleSortingHandler(),
-                style: sortable ? { cursor: "pointer" } : { cursor: "default" },
-                type: "button",
-                children: [
-                  /* @__PURE__ */ jsx(Typo, { as: "div", variant: "body", children: flexRender(
-                    header.column.columnDef.header,
-                    header.getContext()
-                  ) }),
-                  sortable ? /* @__PURE__ */ jsxs(
-                    Flex,
-                    {
-                      direction: "column",
-                      style: { marginLeft: "var(--space-2)" },
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          TriangleArrowUpIcon,
-                          {
-                            color: sortedState === "asc" ? "var(--iris-10)" : "var(--iris-6)"
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          TriangleArrowDownIcon,
-                          {
-                            color: sortedState === "desc" ? "var(--iris-10)" : "var(--iris-6)"
-                          }
-                        )
-                      ]
-                    }
-                  ) : null
-                ]
-              }
-            ) }, header.id);
-          })
-        },
-        headerGroup.id
-      )) }),
-      /* @__PURE__ */ jsx("div", { className: "tbody", children: helpCompRender(rowModels.rows.length) || rowModels.rows.map((row) => {
-        return /* @__PURE__ */ jsx(
-          Row,
-          {
-            ExpandComp,
-            defaultAlign,
-            getCellStyle,
-            getRowStyle,
-            gridTemplateColumns,
-            onRowClick,
-            row
-          },
-          `row_${row.id}`
-        );
-      }) })
-    ] }),
-    showPagination ? /* @__PURE__ */ jsx(Flex, { justify: "end", pt: "3", width: "100%", children: /* @__PURE__ */ jsx(
-      Pagination,
-      {
-        count: pageCount,
-        onChange: onChangePagination,
-        page: pagination.pageIndex + 1,
-        siblingCount
-      }
-    ) }) : null
-  ] });
-}
-
-export {
-  createColumnHelper,
-  ExpandTable
-};
-//# sourceMappingURL=chunk-W4ELCM47.js.map

package/dist/chunk-W5PMKWQ4.js

@@ -1,39 +0,0 @@
-import {
-  Heading
-} from "./chunk-34OQDUQR.js";
-import {
-  Card
-} from "./chunk-HEDMSFPW.js";
-import {
-  Box
-} from "./chunk-4Y5BEXVN.js";
-import {
-  Typo
-} from "./chunk-PARGQUJB.js";
-import {
-  Flex
-} from "./chunk-25HMMI7R.js";
-import {
-  __spreadValues
-} from "./chunk-2NMEKWO5.js";
-
-// src/app/platform/coach-question-list.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-function QuestionItem({ question, answer }) {
-  return /* @__PURE__ */ jsxs(Box, { children: [
-    /* @__PURE__ */ jsx(Heading, { mb: "2", variant: "heading5", children: question }),
-    /* @__PURE__ */ jsx(Card, { children: answer ? /* @__PURE__ */ jsx(Typo, { as: "p", children: answer }) : /* @__PURE__ */ jsx(Typo, { color: "gray", children: "\uB4F1\uB85D\uB41C \uB2F5\uBCC0\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." }) })
-  ] }, question);
-}
-function CoachQuestionList({
-  questions
-}) {
-  return /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "8", children: questions.map((question) => {
-    return /* @__PURE__ */ jsx(QuestionItem, __spreadValues({}, question), question.question);
-  }) });
-}
-
-export {
-  CoachQuestionList
-};
-//# sourceMappingURL=chunk-W5PMKWQ4.js.map

package/dist/chunk-WB2EZAD2.js

@@ -1,87 +0,0 @@
-import {
-  ReviewQuestionContentHeader
-} from "./chunk-JSOXMJ6K.js";
-import {
-  TextArea
-} from "./chunk-3F45OPXG.js";
-import {
-  Grid
-} from "./chunk-EGEQY3KT.js";
-import {
-  Callout
-} from "./chunk-B6XJN6EC.js";
-import {
-  Card
-} from "./chunk-HEDMSFPW.js";
-import {
-  Box
-} from "./chunk-4Y5BEXVN.js";
-import {
-  Typo
-} from "./chunk-PARGQUJB.js";
-import {
-  BellIcon
-} from "./chunk-V5XKNSCK.js";
-
-// src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-text.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-function ReviewQuestionText(props) {
-  const { question, answer, onChange } = props;
-  const minLengthNotMet = question.minLength && answer.length < question.minLength;
-  const remainingLength = question.minLength && answer.length < question.minLength ? question.minLength - answer.length : 0;
-  return /* @__PURE__ */ jsx(
-    Card,
-    {
-      size: "2",
-      style: {
-        width: "100%",
-        height: "100%"
-      },
-      children: /* @__PURE__ */ jsxs(Grid, { height: "100%", rows: "1fr auto", children: [
-        /* @__PURE__ */ jsxs(Grid, { height: "100%", rows: "auto 1fr", width: "100%", children: [
-          /* @__PURE__ */ jsx(
-            ReviewQuestionContentHeader,
-            {
-              icon: question.icon,
-              question: question.question,
-              title: question.title,
-              type: question.type
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            TextArea,
-            {
-              mt: "2",
-              onChange: (e) => {
-                onChange(e.target.value);
-              },
-              placeholder: question.placeholder,
-              value: answer
-            }
-          )
-        ] }),
-        minLengthNotMet ? /* @__PURE__ */ jsxs(Box, { mt: "2", children: [
-          /* @__PURE__ */ jsx(Typo, { align: "right", as: "p", color: "red", variant: "caption", children: `${remainingLength}\uC790 \uB354 \uC791\uC131\uD574\uC8FC\uC138\uC694.` }),
-          question.minLengthInfoMessage ? /* @__PURE__ */ jsxs(
-            Callout.Root,
-            {
-              color: "iris",
-              mt: "2",
-              style: { alignItems: "center" },
-              children: [
-                /* @__PURE__ */ jsx(Callout.Icon, { children: /* @__PURE__ */ jsx(BellIcon, {}) }),
-                /* @__PURE__ */ jsx(Callout.Text, { children: /* @__PURE__ */ jsx(Typo, { as: "p", variant: "caption", children: question.minLengthInfoMessage }) })
-              ]
-            }
-          ) : null
-        ] }) : null
-      ] })
-    }
-  );
-}
-var review_question_text_default = ReviewQuestionText;
-
-export {
-  review_question_text_default
-};
-//# sourceMappingURL=chunk-WB2EZAD2.js.map

package/dist/chunk-WB2EZAD2.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-text.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, Card, Callout, Grid, TextArea, Typo } from '@/atoms';\nimport { BellIcon } from '@/icon';\nimport { type CurriculumReviewQuestionText } from '@/types/curriculumContents.type';\nimport { ReviewQuestionContentHeader } from './review-comp';\n\ninterface ReviewQuestionTextProps {\n  question: CurriculumReviewQuestionText;\n  answer: string;\n  error?: string;\n  onChange: (value: string) => void;\n}\n\nfunction ReviewQuestionText(props: ReviewQuestionTextProps): React.ReactNode {\n  const { question, answer, onChange } = props;\n\n  const minLengthNotMet =\n    question.minLength && answer.length < question.minLength;\n\n  const remainingLength =\n    question.minLength && answer.length < question.minLength\n      ? question.minLength - answer.length\n      : 0;\n\n  return (\n    <Card\n      size=\"2\"\n      style={{\n        width: '100%',\n        height: '100%',\n      }}\n    >\n      <Grid height=\"100%\" rows=\"1fr auto\">\n        <Grid height=\"100%\" rows=\"auto 1fr\" width=\"100%\">\n          <ReviewQuestionContentHeader\n            icon={question.icon}\n            question={question.question}\n            title={question.title}\n            type={question.type}\n          />\n\n          <TextArea\n            mt=\"2\"\n            onChange={(e) => {\n              onChange(e.target.value);\n            }}\n            placeholder={question.placeholder}\n            value={answer}\n          />\n        </Grid>\n        {minLengthNotMet ? (\n          <Box mt=\"2\">\n            <Typo align=\"right\" as=\"p\" color=\"red\" variant=\"caption\">\n              {`${remainingLength}자 더 작성해주세요.`}\n            </Typo>\n            {question.minLengthInfoMessage ? (\n              <Callout.Root\n                color=\"iris\"\n                mt=\"2\"\n                style={{ alignItems: 'center' }}\n              >\n                <Callout.Icon>\n                  <BellIcon />\n                </Callout.Icon>\n                <Callout.Text>\n                  <Typo as=\"p\" variant=\"caption\">\n                    {question.minLengthInfoMessage}\n                  </Typo>\n                </Callout.Text>\n              </Callout.Root>\n            ) : null}\n          </Box>\n        ) : null}\n      </Grid>\n    </Card>\n  );\n}\n\nexport default ReviewQuestionText;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAiCQ,SACE,KADF;AApBR,SAAS,mBAAmB,OAAiD;AAC3E,QAAM,EAAE,UAAU,QAAQ,SAAS,IAAI;AAEvC,QAAM,kBACJ,SAAS,aAAa,OAAO,SAAS,SAAS;AAEjD,QAAM,kBACJ,SAAS,aAAa,OAAO,SAAS,SAAS,YAC3C,SAAS,YAAY,OAAO,SAC5B;AAEN,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,MAEA,+BAAC,QAAK,QAAO,QAAO,MAAK,YACvB;AAAA,6BAAC,QAAK,QAAO,QAAO,MAAK,YAAW,OAAM,QACxC;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,SAAS;AAAA,cACf,UAAU,SAAS;AAAA,cACnB,OAAO,SAAS;AAAA,cAChB,MAAM,SAAS;AAAA;AAAA,UACjB;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,UAAU,CAAC,MAAM;AACf,yBAAS,EAAE,OAAO,KAAK;AAAA,cACzB;AAAA,cACA,aAAa,SAAS;AAAA,cACtB,OAAO;AAAA;AAAA,UACT;AAAA,WACF;AAAA,QACC,kBACC,qBAAC,OAAI,IAAG,KACN;AAAA,8BAAC,QAAK,OAAM,SAAQ,IAAG,KAAI,OAAM,OAAM,SAAQ,WAC5C,aAAG,eAAe,uDACrB;AAAA,UACC,SAAS,uBACR;AAAA,YAAC,QAAQ;AAAA,YAAR;AAAA,cACC,OAAM;AAAA,cACN,IAAG;AAAA,cACH,OAAO,EAAE,YAAY,SAAS;AAAA,cAE9B;AAAA,oCAAC,QAAQ,MAAR,EACC,8BAAC,YAAS,GACZ;AAAA,gBACA,oBAAC,QAAQ,MAAR,EACC,8BAAC,QAAK,IAAG,KAAI,SAAQ,WAClB,mBAAS,sBACZ,GACF;AAAA;AAAA;AAAA,UACF,IACE;AAAA,WACN,IACE;AAAA,SACN;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,+BAAQ;","names":[]}

package/dist/chunk-WD5UQYQX.js

@@ -1,51 +0,0 @@
-import {
-  curriculum_sidebar_item_wrapper_default
-} from "./chunk-LRKARLHL.js";
-import {
-  section_item_default
-} from "./chunk-UPZMRMK7.js";
-import {
-  section_title_default
-} from "./chunk-XPULPCGT.js";
-import {
-  getCurriculumIconColor
-} from "./chunk-PAFFDZBG.js";
-import {
-  __spreadProps,
-  __spreadValues
-} from "./chunk-2NMEKWO5.js";
-
-// src/molecules/curriculumV2/CurriculumSidebar/sidebar-item.tsx
-import { jsx } from "react/jsx-runtime";
-function SidebarItem({ item, selectedIndex, setSelectedIndex, index, done }) {
-  if (item.type === "sectionTitle") {
-    return /* @__PURE__ */ jsx(section_title_default, __spreadValues({}, item), item.uuid);
-  }
-  const isSelected = selectedIndex === index;
-  return /* @__PURE__ */ jsx(
-    curriculum_sidebar_item_wrapper_default,
-    {
-      index,
-      isSelected,
-      onClick: () => {
-        setSelectedIndex(index);
-      },
-      children: /* @__PURE__ */ jsx(
-        section_item_default,
-        __spreadProps(__spreadValues({}, item), {
-          color: getCurriculumIconColor({
-            done,
-            selected: isSelected
-          })
-        })
-      )
-    },
-    item.uuid
-  );
-}
-var sidebar_item_default = SidebarItem;
-
-export {
-  sidebar_item_default
-};
-//# sourceMappingURL=chunk-WD5UQYQX.js.map

package/dist/chunk-WDUSQ6HR.js

@@ -1,80 +0,0 @@
-import {
-  Collapse
-} from "./chunk-NFDQJVFA.js";
-import {
-  __spreadValues
-} from "./chunk-2NMEKWO5.js";
-
-// src/molecules/expand-table/row.tsx
-import {
-  flexRender
-} from "@tanstack/react-table";
-import { useCallback, useMemo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-function Row(props) {
-  const { row, ExpandComp, gridTemplateColumns, getRowStyle, getCellStyle } = props;
-  const [open, setOpen] = useState(false);
-  const onClickRow = useCallback(() => {
-    var _a;
-    (_a = props.onRowClick) == null ? void 0 : _a.call(props, row.original);
-    setOpen((prev) => !prev);
-  }, [props, row.original]);
-  const rowClassName = useMemo(() => {
-    const baseCls = ["tr-wrapper"];
-    if (ExpandComp) {
-      baseCls.push("expandable");
-    }
-    if (props.onRowClick) {
-      baseCls.push("clickable");
-    }
-    return baseCls.join(" ");
-  }, [ExpandComp, props.onRowClick]);
-  return /* @__PURE__ */ jsxs("div", { className: rowClassName, children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: "tr",
-        onClick: onClickRow,
-        style: __spreadValues({
-          gridTemplateColumns
-        }, (getRowStyle == null ? void 0 : getRowStyle(row.original)) || {}),
-        type: "button",
-        children: row.getVisibleCells().map((cell) => {
-          var _a, _b, _c;
-          const autoSize = (_a = cell.column.columnDef.meta) == null ? void 0 : _a.autoSize;
-          const justifyContent = ((_b = cell.column.columnDef.meta) == null ? void 0 : _b.align) || props.defaultAlign;
-          return /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: "td",
-              style: __spreadValues({
-                // width: autoSize ? undefined : cell.column.getSize(),
-                flexGrow: autoSize ? 1 : void 0,
-                justifyContent
-              }, (getCellStyle == null ? void 0 : getCellStyle(row.original)) || {}),
-              children: [
-                flexRender(cell.column.columnDef.cell, cell.getContext()),
-                ((_c = cell.column.columnDef.meta) == null ? void 0 : _c.OpenBtn) ? /* @__PURE__ */ jsx(
-                  cell.column.columnDef.meta.OpenBtn,
-                  {
-                    data: row.original,
-                    open,
-                    setIsOpen: setOpen
-                  }
-                ) : null
-              ]
-            },
-            cell.id
-          );
-        })
-      },
-      `tr_${row.id}`
-    ),
-    ExpandComp ? /* @__PURE__ */ jsx(Collapse, { open, children: /* @__PURE__ */ jsx("div", { className: "expand-comp-wrapper", children: /* @__PURE__ */ jsx(ExpandComp, { row }) }) }) : null
-  ] }, `tr-wrapper_${row.id}`);
-}
-
-export {
-  Row
-};
-//# sourceMappingURL=chunk-WDUSQ6HR.js.map

package/dist/chunk-WFJ3KSZ6.js

@@ -1,63 +0,0 @@
-import {
-  review_question_body_default
-} from "./chunk-FFE3SS5B.js";
-import {
-  review_question_footer_default
-} from "./chunk-56GG45EL.js";
-import {
-  review_question_header_default
-} from "./chunk-FWRJFBQW.js";
-import {
-  review_question_layout_default
-} from "./chunk-YVMPMKUV.js";
-
-// src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/index.tsx
-import { jsx } from "react/jsx-runtime";
-function ReviewQuestion({
-  question,
-  index,
-  total,
-  answer,
-  error,
-  onChange,
-  onNext,
-  onPrev,
-  isLast,
-  isNextDisabled,
-  onSubmit,
-  isLoading
-}) {
-  return /* @__PURE__ */ jsx(
-    review_question_layout_default,
-    {
-      Body: /* @__PURE__ */ jsx(
-        review_question_body_default,
-        {
-          answer,
-          error,
-          onChange,
-          question
-        }
-      ),
-      Footer: /* @__PURE__ */ jsx(
-        review_question_footer_default,
-        {
-          index,
-          isLast,
-          isLoading,
-          isNextButtonDisabled: isNextDisabled,
-          onNext,
-          onPrev,
-          onSubmit
-        }
-      ),
-      Header: /* @__PURE__ */ jsx(review_question_header_default, { index, total })
-    }
-  );
-}
-var ReviewQuestion_default = ReviewQuestion;
-
-export {
-  ReviewQuestion_default
-};
-//# sourceMappingURL=chunk-WFJ3KSZ6.js.map

package/dist/chunk-WXXSBDY4.js

@@ -1,125 +0,0 @@
-import {
-  IconButton
-} from "./chunk-ZOFENAZJ.js";
-import {
-  Flex
-} from "./chunk-25HMMI7R.js";
-import {
-  Typo
-} from "./chunk-PARGQUJB.js";
-import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  DoubleArrowLeftIcon,
-  DoubleArrowRightIcon
-} from "./chunk-V5XKNSCK.js";
-import {
-  __spreadProps,
-  __spreadValues
-} from "./chunk-2NMEKWO5.js";
-
-// src/atoms/pagination.tsx
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-function Pagination(props) {
-  const { onChange, count = 0, siblingCount = 2 } = props;
-  const [page, setPage] = useState(() => props.page || props.defaultPage || 1);
-  const visibleItems = useMemo(() => {
-    let start = Math.max(1, page - siblingCount);
-    let end = Math.min(count, page + siblingCount);
-    if (page - siblingCount <= 0 && end < count) {
-      end = Math.min(count, end + Math.abs(page - siblingCount) + 1);
-    } else if (page + siblingCount > count && start > 1) {
-      start = Math.max(1, start - (page + siblingCount - count));
-    }
-    return Array.from({ length: end - start + 1 }, (_, i) => i + start);
-  }, [count, page, siblingCount]);
-  useEffect(() => {
-    onChange == null ? void 0 : onChange(page);
-  }, [onChange, page]);
-  useEffect(() => {
-    if (props.page) {
-      setPage(props.page);
-    }
-  }, [props.page]);
-  const prev = useMemo(() => {
-    const p = page - 1;
-    return p < 1 ? void 0 : p;
-  }, [page]);
-  const next = useMemo(() => {
-    const n = page + 1;
-    return n > count ? void 0 : n;
-  }, [count, page]);
-  const onClickPrev = useCallback(() => {
-    prev && setPage(prev);
-  }, [prev]);
-  const onClickNext = useCallback(() => {
-    next && setPage(next);
-  }, [next]);
-  const doublePrev = useMemo(() => {
-    if (!visibleItems.length) return;
-    return Math.max(0, visibleItems[0] - 1);
-  }, [visibleItems]);
-  const onClickDoublePrev = useCallback(() => {
-    doublePrev && setPage(doublePrev);
-  }, [doublePrev]);
-  const doubleNext = useMemo(() => {
-    if (!visibleItems.length) return;
-    const n = visibleItems[visibleItems.length - 1] + 1;
-    if (n > count) return;
-    return Math.min(count, n);
-  }, [count, visibleItems]);
-  const onClickDoubleNext = useCallback(() => {
-    doubleNext && setPage(doubleNext);
-  }, [doubleNext]);
-  const iconSize = {
-    height: 24,
-    width: 24
-  };
-  const moveButtonProps = {
-    variant: "ghost",
-    size: "large",
-    style: { borderRadius: "50%" }
-  };
-  return /* @__PURE__ */ jsxs(Flex, { align: "center", className: "tipp-pagination", gap: "4", children: [
-    /* @__PURE__ */ jsx(
-      IconButton,
-      __spreadProps(__spreadValues({
-        disabled: !doublePrev,
-        onClick: onClickDoublePrev
-      }, moveButtonProps), {
-        children: /* @__PURE__ */ jsx(DoubleArrowLeftIcon, __spreadValues({}, iconSize))
-      })
-    ),
-    /* @__PURE__ */ jsx(IconButton, __spreadProps(__spreadValues({ disabled: !prev, onClick: onClickPrev }, moveButtonProps), { children: /* @__PURE__ */ jsx(ChevronLeftIcon, __spreadValues({}, iconSize)) })),
-    /* @__PURE__ */ jsx(Flex, { gap: "1", children: visibleItems.map((item) => {
-      return /* @__PURE__ */ jsx(
-        "button",
-        {
-          className: `page-button ${item === page ? "active" : ""}`,
-          onClick: () => {
-            setPage(item);
-          },
-          type: "button",
-          children: /* @__PURE__ */ jsx(Typo, { variant: "body", children: item })
-        },
-        item
-      );
-    }) }),
-    /* @__PURE__ */ jsx(IconButton, __spreadProps(__spreadValues({ disabled: !next, onClick: onClickNext }, moveButtonProps), { children: /* @__PURE__ */ jsx(ChevronRightIcon, __spreadValues({}, iconSize)) })),
-    /* @__PURE__ */ jsx(
-      IconButton,
-      __spreadProps(__spreadValues({
-        disabled: !doubleNext,
-        onClick: onClickDoubleNext
-      }, moveButtonProps), {
-        children: /* @__PURE__ */ jsx(DoubleArrowRightIcon, __spreadValues({}, iconSize))
-      })
-    )
-  ] });
-}
-
-export {
-  Pagination
-};
-//# sourceMappingURL=chunk-WXXSBDY4.js.map