@tipp/ui 1.1.7 → 1.1.9

package/dist/chunk-7ORFESPJ.js

@@ -0,0 +1,54 @@
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+
+// src/molecules/dot-navigation.tsx
+import { useCallback, useEffect, useState } from "react";
+import { DotFilledIcon } from "@radix-ui/react-icons";
+import { jsx } from "react/jsx-runtime";
+function DotNavigation(props) {
+  const { dotCount, onClick, dotIndex, defaultDotIndex, onChangeDotIndex } = props;
+  const [currentDot, setCurrentDot] = useState(
+    () => {
+      var _a;
+      return (_a = defaultDotIndex != null ? defaultDotIndex : dotIndex) != null ? _a : 0;
+    }
+  );
+  const onClickDot = useCallback(
+    (i) => {
+      if (onClick) {
+        onClick(i);
+      } else {
+        setCurrentDot(i);
+      }
+    },
+    [onClick]
+  );
+  useEffect(() => {
+    onChangeDotIndex == null ? void 0 : onChangeDotIndex(currentDot);
+  }, [currentDot, onChangeDotIndex]);
+  return /* @__PURE__ */ jsx(Flex, { children: dotCount ? Array.from({ length: dotCount }, (_, i) => i).map((_, index) => {
+    const isSelected = currentDot === index;
+    return /* @__PURE__ */ jsx(
+      DotFilledIcon,
+      {
+        opacity: isSelected ? void 0 : 0.3,
+        fill: "var(--gray-5)",
+        height: "24px",
+        onClick: () => {
+          onClickDot(index);
+        },
+        style: {
+          cursor: "pointer"
+        },
+        width: "24px"
+      },
+      index
+    );
+  }) : null });
+}
+
+export {
+  DotNavigation
+};
+//# sourceMappingURL=chunk-7ORFESPJ.js.map

package/dist/chunk-7ORFESPJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/dot-navigation.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport { DotFilledIcon } from '@radix-ui/react-icons';\nimport { Flex } from '../atoms/flex';\n\nexport interface DotNavigationProps {\n  /** 전체 점 갯수 */\n  dotCount?: number;\n  /** 점 클릭 시 */\n  onClick?: (index: number) => void;\n  /** 현재 선택된 점 */\n  dotIndex?: number;\n  /** 기본 점 위치 */\n  defaultDotIndex?: number;\n  /** 선택된 점 변경 시 실행 */\n  onChangeDotIndex?: (index: number) => void;\n}\n\nexport function DotNavigation(props: DotNavigationProps): React.ReactElement {\n  const { dotCount, onClick, dotIndex, defaultDotIndex, onChangeDotIndex } =\n    props;\n\n  const [currentDot, setCurrentDot] = useState<number>(\n    () => defaultDotIndex ?? dotIndex ?? 0\n  );\n\n  const onClickDot = useCallback(\n    (i: number) => {\n      if (onClick) {\n        onClick(i);\n      } else {\n        setCurrentDot(i);\n      }\n    },\n    [onClick]\n  );\n\n  useEffect(() => {\n    onChangeDotIndex?.(currentDot);\n  }, [currentDot, onChangeDotIndex]);\n\n  return (\n    <Flex>\n      {dotCount\n        ? Array.from({ length: dotCount }, (_, i) => i).map((_, index) => {\n            const isSelected = currentDot === index;\n            return (\n              <DotFilledIcon\n                opacity={isSelected ? undefined : 0.3}\n                fill=\"var(--gray-5)\"\n                height=\"24px\"\n                // eslint-disable-next-line react/no-array-index-key -- index외의 키가 없음\n                key={index}\n                onClick={() => {\n                  onClickDot(index);\n                }}\n                style={{\n                  cursor: 'pointer',\n                }}\n                width=\"24px\"\n              />\n            );\n          })\n        : null}\n    </Flex>\n  );\n}\n"],"mappings":";;;;;AAAA,SAAgB,aAAa,WAAW,gBAAgB;AACxD,SAAS,qBAAqB;AA6ChB;AA7BP,SAAS,cAAc,OAA+C;AAC3E,QAAM,EAAE,UAAU,SAAS,UAAU,iBAAiB,iBAAiB,IACrE;AAEF,QAAM,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC,MAAG;AAtBP;AAsBU,+DAAmB,aAAnB,YAA+B;AAAA;AAAA,EACvC;AAEA,QAAM,aAAa;AAAA,IACjB,CAAC,MAAc;AACb,UAAI,SAAS;AACX,gBAAQ,CAAC;AAAA,MACX,OAAO;AACL,sBAAc,CAAC;AAAA,MACjB;AAAA,IACF;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,YAAU,MAAM;AACd,yDAAmB;AAAA,EACrB,GAAG,CAAC,YAAY,gBAAgB,CAAC;AAEjC,SACE,oBAAC,QACE,qBACG,MAAM,KAAK,EAAE,QAAQ,SAAS,GAAG,CAAC,GAAG,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,UAAU;AAC9D,UAAM,aAAa,eAAe;AAClC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,aAAa,SAAY;AAAA,QAClC,MAAK;AAAA,QACL,QAAO;AAAA,QAGP,SAAS,MAAM;AACb,qBAAW,KAAK;AAAA,QAClB;AAAA,QACA,OAAO;AAAA,UACL,QAAQ;AAAA,QACV;AAAA,QACA,OAAM;AAAA;AAAA,MAPD;AAAA,IAQP;AAAA,EAEJ,CAAC,IACD,MACN;AAEJ;","names":[]}

package/dist/chunk-AEXDX2VS.js

@@ -0,0 +1,53 @@
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+
+// src/molecules/dot-navigation.tsx
+import { useCallback, useEffect, useState } from "react";
+import { DotFilledIcon } from "@radix-ui/react-icons";
+import { jsx } from "react/jsx-runtime";
+function DotNavigation(props) {
+  const { dotCount, onClick, dotIndex, defaultDotIndex, onChangeDotIndex } = props;
+  const [currentDot, setCurrentDot] = useState(
+    () => {
+      var _a;
+      return (_a = defaultDotIndex != null ? defaultDotIndex : dotIndex) != null ? _a : 0;
+    }
+  );
+  const onClickDot = useCallback(
+    (i) => {
+      if (onClick) {
+        onClick(i);
+      } else {
+        setCurrentDot(i);
+      }
+    },
+    [onClick]
+  );
+  useEffect(() => {
+    onChangeDotIndex == null ? void 0 : onChangeDotIndex(currentDot);
+  }, [currentDot, onChangeDotIndex]);
+  return /* @__PURE__ */ jsx(Flex, { gap: "4", children: dotCount ? Array.from({ length: dotCount }, (_, i) => i).map((_, index) => {
+    const isSelected = currentDot === index;
+    return /* @__PURE__ */ jsx(
+      DotFilledIcon,
+      {
+        color: isSelected ? void 0 : "gray",
+        height: "8px",
+        onClick: () => {
+          onClickDot(index);
+        },
+        style: {
+          cursor: "pointer"
+        },
+        width: "8px"
+      },
+      index
+    );
+  }) : null });
+}
+
+export {
+  DotNavigation
+};
+//# sourceMappingURL=chunk-AEXDX2VS.js.map

package/dist/chunk-AEXDX2VS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/dot-navigation.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport { DotFilledIcon } from '@radix-ui/react-icons';\nimport { Flex } from '../atoms/flex';\n\nexport interface DotNavigationProps {\n  /** 전체 점 갯수 */\n  dotCount?: number;\n  /** 점 클릭 시 */\n  onClick?: (index: number) => void;\n  /** 현재 선택된 점 */\n  dotIndex?: number;\n  /** 기본 점 위치 */\n  defaultDotIndex?: number;\n  /** 선택된 점 변경 시 실행 */\n  onChangeDotIndex?: (index: number) => void;\n}\n\nexport function DotNavigation(props: DotNavigationProps): React.ReactElement {\n  const { dotCount, onClick, dotIndex, defaultDotIndex, onChangeDotIndex } =\n    props;\n\n  const [currentDot, setCurrentDot] = useState<number>(\n    () => defaultDotIndex ?? dotIndex ?? 0\n  );\n\n  const onClickDot = useCallback(\n    (i: number) => {\n      if (onClick) {\n        onClick(i);\n      } else {\n        setCurrentDot(i);\n      }\n    },\n    [onClick]\n  );\n\n  useEffect(() => {\n    onChangeDotIndex?.(currentDot);\n  }, [currentDot, onChangeDotIndex]);\n\n  return (\n    <Flex gap=\"4\">\n      {dotCount\n        ? Array.from({ length: dotCount }, (_, i) => i).map((_, index) => {\n            const isSelected = currentDot === index;\n            return (\n              <DotFilledIcon\n                color={isSelected ? undefined : 'gray'}\n                height=\"8px\"\n                // eslint-disable-next-line react/no-array-index-key -- index외의 키가 없음\n                key={index}\n                onClick={() => {\n                  onClickDot(index);\n                }}\n                style={{\n                  cursor: 'pointer',\n                }}\n                width=\"8px\"\n              />\n            );\n          })\n        : null}\n    </Flex>\n  );\n}\n"],"mappings":";;;;;AAAA,SAAgB,aAAa,WAAW,gBAAgB;AACxD,SAAS,qBAAqB;AA6ChB;AA7BP,SAAS,cAAc,OAA+C;AAC3E,QAAM,EAAE,UAAU,SAAS,UAAU,iBAAiB,iBAAiB,IACrE;AAEF,QAAM,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC,MAAG;AAtBP;AAsBU,+DAAmB,aAAnB,YAA+B;AAAA;AAAA,EACvC;AAEA,QAAM,aAAa;AAAA,IACjB,CAAC,MAAc;AACb,UAAI,SAAS;AACX,gBAAQ,CAAC;AAAA,MACX,OAAO;AACL,sBAAc,CAAC;AAAA,MACjB;AAAA,IACF;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,YAAU,MAAM;AACd,yDAAmB;AAAA,EACrB,GAAG,CAAC,YAAY,gBAAgB,CAAC;AAEjC,SACE,oBAAC,QAAK,KAAI,KACP,qBACG,MAAM,KAAK,EAAE,QAAQ,SAAS,GAAG,CAAC,GAAG,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,UAAU;AAC9D,UAAM,aAAa,eAAe;AAClC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,aAAa,SAAY;AAAA,QAChC,QAAO;AAAA,QAGP,SAAS,MAAM;AACb,qBAAW,KAAK;AAAA,QAClB;AAAA,QACA,OAAO;AAAA,UACL,QAAQ;AAAA,QACV;AAAA,QACA,OAAM;AAAA;AAAA,MAPD;AAAA,IAQP;AAAA,EAEJ,CAAC,IACD,MACN;AAEJ;","names":[]}

package/dist/chunk-BUWFX67O.js

@@ -0,0 +1,54 @@
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+
+// src/molecules/dot-navigation.tsx
+import { useCallback, useEffect, useState } from "react";
+import { DotFilledIcon } from "@radix-ui/react-icons";
+import { jsx } from "react/jsx-runtime";
+function DotNavigation(props) {
+  const { dotCount, onClick, dotIndex, defaultDotIndex, onChangeDotIndex } = props;
+  const [currentDot, setCurrentDot] = useState(
+    () => {
+      var _a;
+      return (_a = defaultDotIndex != null ? defaultDotIndex : dotIndex) != null ? _a : 0;
+    }
+  );
+  const onClickDot = useCallback(
+    (i) => {
+      if (onClick) {
+        onClick(i);
+      } else {
+        setCurrentDot(i);
+      }
+    },
+    [onClick]
+  );
+  useEffect(() => {
+    onChangeDotIndex == null ? void 0 : onChangeDotIndex(currentDot);
+  }, [currentDot, onChangeDotIndex]);
+  return /* @__PURE__ */ jsx(Flex, { gap: "4", children: dotCount ? Array.from({ length: dotCount }, (_, i) => i).map((_, index) => {
+    const isSelected = currentDot === index;
+    return /* @__PURE__ */ jsx(
+      DotFilledIcon,
+      {
+        color: isSelected ? void 0 : "gray",
+        height: "8px",
+        fill: "var(--gray-5)",
+        onClick: () => {
+          onClickDot(index);
+        },
+        style: {
+          cursor: "pointer"
+        },
+        width: "8px"
+      },
+      index
+    );
+  }) : null });
+}
+
+export {
+  DotNavigation
+};
+//# sourceMappingURL=chunk-BUWFX67O.js.map

package/dist/chunk-BUWFX67O.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/dot-navigation.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport { DotFilledIcon } from '@radix-ui/react-icons';\nimport { Flex } from '../atoms/flex';\n\nexport interface DotNavigationProps {\n  /** 전체 점 갯수 */\n  dotCount?: number;\n  /** 점 클릭 시 */\n  onClick?: (index: number) => void;\n  /** 현재 선택된 점 */\n  dotIndex?: number;\n  /** 기본 점 위치 */\n  defaultDotIndex?: number;\n  /** 선택된 점 변경 시 실행 */\n  onChangeDotIndex?: (index: number) => void;\n}\n\nexport function DotNavigation(props: DotNavigationProps): React.ReactElement {\n  const { dotCount, onClick, dotIndex, defaultDotIndex, onChangeDotIndex } =\n    props;\n\n  const [currentDot, setCurrentDot] = useState<number>(\n    () => defaultDotIndex ?? dotIndex ?? 0\n  );\n\n  const onClickDot = useCallback(\n    (i: number) => {\n      if (onClick) {\n        onClick(i);\n      } else {\n        setCurrentDot(i);\n      }\n    },\n    [onClick]\n  );\n\n  useEffect(() => {\n    onChangeDotIndex?.(currentDot);\n  }, [currentDot, onChangeDotIndex]);\n\n  return (\n    <Flex gap=\"4\">\n      {dotCount\n        ? Array.from({ length: dotCount }, (_, i) => i).map((_, index) => {\n            const isSelected = currentDot === index;\n            return (\n              <DotFilledIcon\n                color={isSelected ? undefined : 'gray'}\n                height=\"8px\"\n                fill={'var(--gray-5)'}\n                // eslint-disable-next-line react/no-array-index-key -- index외의 키가 없음\n                key={index}\n                onClick={() => {\n                  onClickDot(index);\n                }}\n                style={{\n                  cursor: 'pointer',\n                }}\n                width=\"8px\"\n              />\n            );\n          })\n        : null}\n    </Flex>\n  );\n}\n"],"mappings":";;;;;AAAA,SAAgB,aAAa,WAAW,gBAAgB;AACxD,SAAS,qBAAqB;AA6ChB;AA7BP,SAAS,cAAc,OAA+C;AAC3E,QAAM,EAAE,UAAU,SAAS,UAAU,iBAAiB,iBAAiB,IACrE;AAEF,QAAM,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC,MAAG;AAtBP;AAsBU,+DAAmB,aAAnB,YAA+B;AAAA;AAAA,EACvC;AAEA,QAAM,aAAa;AAAA,IACjB,CAAC,MAAc;AACb,UAAI,SAAS;AACX,gBAAQ,CAAC;AAAA,MACX,OAAO;AACL,sBAAc,CAAC;AAAA,MACjB;AAAA,IACF;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,YAAU,MAAM;AACd,yDAAmB;AAAA,EACrB,GAAG,CAAC,YAAY,gBAAgB,CAAC;AAEjC,SACE,oBAAC,QAAK,KAAI,KACP,qBACG,MAAM,KAAK,EAAE,QAAQ,SAAS,GAAG,CAAC,GAAG,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,UAAU;AAC9D,UAAM,aAAa,eAAe;AAClC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,aAAa,SAAY;AAAA,QAChC,QAAO;AAAA,QACP,MAAM;AAAA,QAGN,SAAS,MAAM;AACb,qBAAW,KAAK;AAAA,QAClB;AAAA,QACA,OAAO;AAAA,UACL,QAAQ;AAAA,QACV;AAAA,QACA,OAAM;AAAA;AAAA,MAPD;AAAA,IAQP;AAAA,EAEJ,CAAC,IACD,MACN;AAEJ;","names":[]}

package/dist/chunk-CMOA2ZAE.js

@@ -0,0 +1,54 @@
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+
+// src/molecules/dot-navigation.tsx
+import { useCallback, useEffect, useState } from "react";
+import { DotFilledIcon } from "@radix-ui/react-icons";
+import { jsx } from "react/jsx-runtime";
+function DotNavigation(props) {
+  const { dotCount, onClick, dotIndex, defaultDotIndex, onChangeDotIndex } = props;
+  const [currentDot, setCurrentDot] = useState(
+    () => {
+      var _a;
+      return (_a = defaultDotIndex != null ? defaultDotIndex : dotIndex) != null ? _a : 0;
+    }
+  );
+  const onClickDot = useCallback(
+    (i) => {
+      if (onClick) {
+        onClick(i);
+      } else {
+        setCurrentDot(i);
+      }
+    },
+    [onClick]
+  );
+  useEffect(() => {
+    onChangeDotIndex == null ? void 0 : onChangeDotIndex(currentDot);
+  }, [currentDot, onChangeDotIndex]);
+  return /* @__PURE__ */ jsx(Flex, { gap: "4", children: dotCount ? Array.from({ length: dotCount }, (_, i) => i).map((_, index) => {
+    const isSelected = currentDot === index;
+    return /* @__PURE__ */ jsx(
+      DotFilledIcon,
+      {
+        color: isSelected ? void 0 : "gray",
+        height: "24px",
+        fill: "var(--gray-5)",
+        onClick: () => {
+          onClickDot(index);
+        },
+        style: {
+          cursor: "pointer"
+        },
+        width: "24px"
+      },
+      index
+    );
+  }) : null });
+}
+
+export {
+  DotNavigation
+};
+//# sourceMappingURL=chunk-CMOA2ZAE.js.map

package/dist/chunk-CMOA2ZAE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/dot-navigation.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport { DotFilledIcon } from '@radix-ui/react-icons';\nimport { Flex } from '../atoms/flex';\n\nexport interface DotNavigationProps {\n  /** 전체 점 갯수 */\n  dotCount?: number;\n  /** 점 클릭 시 */\n  onClick?: (index: number) => void;\n  /** 현재 선택된 점 */\n  dotIndex?: number;\n  /** 기본 점 위치 */\n  defaultDotIndex?: number;\n  /** 선택된 점 변경 시 실행 */\n  onChangeDotIndex?: (index: number) => void;\n}\n\nexport function DotNavigation(props: DotNavigationProps): React.ReactElement {\n  const { dotCount, onClick, dotIndex, defaultDotIndex, onChangeDotIndex } =\n    props;\n\n  const [currentDot, setCurrentDot] = useState<number>(\n    () => defaultDotIndex ?? dotIndex ?? 0\n  );\n\n  const onClickDot = useCallback(\n    (i: number) => {\n      if (onClick) {\n        onClick(i);\n      } else {\n        setCurrentDot(i);\n      }\n    },\n    [onClick]\n  );\n\n  useEffect(() => {\n    onChangeDotIndex?.(currentDot);\n  }, [currentDot, onChangeDotIndex]);\n\n  return (\n    <Flex gap=\"4\">\n      {dotCount\n        ? Array.from({ length: dotCount }, (_, i) => i).map((_, index) => {\n            const isSelected = currentDot === index;\n            return (\n              <DotFilledIcon\n                color={isSelected ? undefined : 'gray'}\n                height=\"24px\"\n                fill=\"var(--gray-5)\"\n                // eslint-disable-next-line react/no-array-index-key -- index외의 키가 없음\n                key={index}\n                onClick={() => {\n                  onClickDot(index);\n                }}\n                style={{\n                  cursor: 'pointer',\n                }}\n                width=\"24px\"\n              />\n            );\n          })\n        : null}\n    </Flex>\n  );\n}\n"],"mappings":";;;;;AAAA,SAAgB,aAAa,WAAW,gBAAgB;AACxD,SAAS,qBAAqB;AA6ChB;AA7BP,SAAS,cAAc,OAA+C;AAC3E,QAAM,EAAE,UAAU,SAAS,UAAU,iBAAiB,iBAAiB,IACrE;AAEF,QAAM,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC,MAAG;AAtBP;AAsBU,+DAAmB,aAAnB,YAA+B;AAAA;AAAA,EACvC;AAEA,QAAM,aAAa;AAAA,IACjB,CAAC,MAAc;AACb,UAAI,SAAS;AACX,gBAAQ,CAAC;AAAA,MACX,OAAO;AACL,sBAAc,CAAC;AAAA,MACjB;AAAA,IACF;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,YAAU,MAAM;AACd,yDAAmB;AAAA,EACrB,GAAG,CAAC,YAAY,gBAAgB,CAAC;AAEjC,SACE,oBAAC,QAAK,KAAI,KACP,qBACG,MAAM,KAAK,EAAE,QAAQ,SAAS,GAAG,CAAC,GAAG,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,UAAU;AAC9D,UAAM,aAAa,eAAe;AAClC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,aAAa,SAAY;AAAA,QAChC,QAAO;AAAA,QACP,MAAK;AAAA,QAGL,SAAS,MAAM;AACb,qBAAW,KAAK;AAAA,QAClB;AAAA,QACA,OAAO;AAAA,UACL,QAAQ;AAAA,QACV;AAAA,QACA,OAAM;AAAA;AAAA,MAPD;AAAA,IAQP;AAAA,EAEJ,CAAC,IACD,MACN;AAEJ;","names":[]}

package/dist/chunk-FU2NF5HR.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-FU2NF5HR.js.map

package/dist/chunk-FU2NF5HR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-GLRJ6U7D.js

@@ -0,0 +1,48 @@
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+
+// src/molecules/dot-navigation.tsx
+import { useCallback, useEffect, useState } from "react";
+import { DotFilledIcon } from "@radix-ui/react-icons";
+import { jsx } from "react/jsx-runtime";
+function DotNavigation(props) {
+  const { dotCount, onClick, dotIndex, defaultDotIndex, onChangeDotIndex } = props;
+  const [currentDot, setCurrentDot] = useState(
+    () => {
+      var _a;
+      return (_a = defaultDotIndex != null ? defaultDotIndex : dotIndex) != null ? _a : 0;
+    }
+  );
+  const onClickDot = useCallback(
+    (i) => {
+      if (onClick) {
+        onClick(i);
+      } else {
+        setCurrentDot(i);
+      }
+    },
+    [onClick]
+  );
+  useEffect(() => {
+    onChangeDotIndex == null ? void 0 : onChangeDotIndex(currentDot);
+  }, [currentDot, onChangeDotIndex]);
+  return /* @__PURE__ */ jsx(Flex, { gap: "4", children: dotCount ? Array.from({ length: dotCount }, (_, i) => i).map((_, index) => {
+    const isSelected = currentDot === index;
+    return /* @__PURE__ */ jsx(
+      DotFilledIcon,
+      {
+        color: isSelected ? "gray" : void 0,
+        onClick: () => {
+          onClickDot(index);
+        }
+      },
+      index
+    );
+  }) : null });
+}
+
+export {
+  DotNavigation
+};
+//# sourceMappingURL=chunk-GLRJ6U7D.js.map

package/dist/chunk-GLRJ6U7D.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/dot-navigation.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport { DotFilledIcon } from '@radix-ui/react-icons';\nimport { Flex } from '../atoms/flex';\n\nexport interface DotNavigationProps {\n  /** 전체 점 갯수 */\n  dotCount?: number;\n  /** 점 클릭 시 */\n  onClick?: (index: number) => void;\n  /** 현재 선택된 점 */\n  dotIndex?: number;\n  /** 기본 점 위치 */\n  defaultDotIndex?: number;\n  /** 선택된 점 변경 시 실행 */\n  onChangeDotIndex?: (index: number) => void;\n}\n\nexport function DotNavigation(props: DotNavigationProps): React.ReactElement {\n  const { dotCount, onClick, dotIndex, defaultDotIndex, onChangeDotIndex } =\n    props;\n\n  const [currentDot, setCurrentDot] = useState<number>(\n    () => defaultDotIndex ?? dotIndex ?? 0\n  );\n\n  const onClickDot = useCallback(\n    (i: number) => {\n      if (onClick) {\n        onClick(i);\n      } else {\n        setCurrentDot(i);\n      }\n    },\n    [onClick]\n  );\n\n  useEffect(() => {\n    onChangeDotIndex?.(currentDot);\n  }, [currentDot, onChangeDotIndex]);\n\n  return (\n    <Flex gap=\"4\">\n      {dotCount\n        ? Array.from({ length: dotCount }, (_, i) => i).map((_, index) => {\n            const isSelected = currentDot === index;\n            return (\n              <DotFilledIcon\n                color={isSelected ? 'gray' : undefined}\n                // eslint-disable-next-line react/no-array-index-key -- index외의 키가 없음\n                key={index}\n                onClick={() => {\n                  onClickDot(index);\n                }}\n              />\n            );\n          })\n        : null}\n    </Flex>\n  );\n}\n"],"mappings":";;;;;AAAA,SAAgB,aAAa,WAAW,gBAAgB;AACxD,SAAS,qBAAqB;AA6ChB;AA7BP,SAAS,cAAc,OAA+C;AAC3E,QAAM,EAAE,UAAU,SAAS,UAAU,iBAAiB,iBAAiB,IACrE;AAEF,QAAM,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC,MAAG;AAtBP;AAsBU,+DAAmB,aAAnB,YAA+B;AAAA;AAAA,EACvC;AAEA,QAAM,aAAa;AAAA,IACjB,CAAC,MAAc;AACb,UAAI,SAAS;AACX,gBAAQ,CAAC;AAAA,MACX,OAAO;AACL,sBAAc,CAAC;AAAA,MACjB;AAAA,IACF;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,YAAU,MAAM;AACd,yDAAmB;AAAA,EACrB,GAAG,CAAC,YAAY,gBAAgB,CAAC;AAEjC,SACE,oBAAC,QAAK,KAAI,KACP,qBACG,MAAM,KAAK,EAAE,QAAQ,SAAS,GAAG,CAAC,GAAG,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,UAAU;AAC9D,UAAM,aAAa,eAAe;AAClC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,aAAa,SAAS;AAAA,QAG7B,SAAS,MAAM;AACb,qBAAW,KAAK;AAAA,QAClB;AAAA;AAAA,MAHK;AAAA,IAIP;AAAA,EAEJ,CAAC,IACD,MACN;AAEJ;","names":[]}

package/dist/chunk-KKYI4MTP.js

@@ -0,0 +1,54 @@
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+
+// src/molecules/dot-navigation.tsx
+import { useCallback, useEffect, useState } from "react";
+import { DotFilledIcon } from "@radix-ui/react-icons";
+import { jsx } from "react/jsx-runtime";
+function DotNavigation(props) {
+  const { dotCount, onClick, dotIndex, defaultDotIndex, onChangeDotIndex } = props;
+  const [currentDot, setCurrentDot] = useState(
+    () => {
+      var _a;
+      return (_a = defaultDotIndex != null ? defaultDotIndex : dotIndex) != null ? _a : 0;
+    }
+  );
+  const onClickDot = useCallback(
+    (i) => {
+      if (onClick) {
+        onClick(i);
+      } else {
+        setCurrentDot(i);
+      }
+    },
+    [onClick]
+  );
+  useEffect(() => {
+    onChangeDotIndex == null ? void 0 : onChangeDotIndex(currentDot);
+  }, [currentDot, onChangeDotIndex]);
+  return /* @__PURE__ */ jsx(Flex, { children: dotCount ? Array.from({ length: dotCount }, (_, i) => i).map((_, index) => {
+    const isSelected = currentDot === index;
+    return /* @__PURE__ */ jsx(
+      DotFilledIcon,
+      {
+        opacity: isSelected ? void 0 : 3,
+        fill: "var(--gray-5)",
+        height: "24px",
+        onClick: () => {
+          onClickDot(index);
+        },
+        style: {
+          cursor: "pointer"
+        },
+        width: "24px"
+      },
+      index
+    );
+  }) : null });
+}
+
+export {
+  DotNavigation
+};
+//# sourceMappingURL=chunk-KKYI4MTP.js.map

package/dist/chunk-KKYI4MTP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/dot-navigation.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport { DotFilledIcon } from '@radix-ui/react-icons';\nimport { Flex } from '../atoms/flex';\n\nexport interface DotNavigationProps {\n  /** 전체 점 갯수 */\n  dotCount?: number;\n  /** 점 클릭 시 */\n  onClick?: (index: number) => void;\n  /** 현재 선택된 점 */\n  dotIndex?: number;\n  /** 기본 점 위치 */\n  defaultDotIndex?: number;\n  /** 선택된 점 변경 시 실행 */\n  onChangeDotIndex?: (index: number) => void;\n}\n\nexport function DotNavigation(props: DotNavigationProps): React.ReactElement {\n  const { dotCount, onClick, dotIndex, defaultDotIndex, onChangeDotIndex } =\n    props;\n\n  const [currentDot, setCurrentDot] = useState<number>(\n    () => defaultDotIndex ?? dotIndex ?? 0\n  );\n\n  const onClickDot = useCallback(\n    (i: number) => {\n      if (onClick) {\n        onClick(i);\n      } else {\n        setCurrentDot(i);\n      }\n    },\n    [onClick]\n  );\n\n  useEffect(() => {\n    onChangeDotIndex?.(currentDot);\n  }, [currentDot, onChangeDotIndex]);\n\n  return (\n    <Flex>\n      {dotCount\n        ? Array.from({ length: dotCount }, (_, i) => i).map((_, index) => {\n            const isSelected = currentDot === index;\n            return (\n              <DotFilledIcon\n                opacity={isSelected ? undefined : 3}\n                fill=\"var(--gray-5)\"\n                height=\"24px\"\n                // eslint-disable-next-line react/no-array-index-key -- index외의 키가 없음\n                key={index}\n                onClick={() => {\n                  onClickDot(index);\n                }}\n                style={{\n                  cursor: 'pointer',\n                }}\n                width=\"24px\"\n              />\n            );\n          })\n        : null}\n    </Flex>\n  );\n}\n"],"mappings":";;;;;AAAA,SAAgB,aAAa,WAAW,gBAAgB;AACxD,SAAS,qBAAqB;AA6ChB;AA7BP,SAAS,cAAc,OAA+C;AAC3E,QAAM,EAAE,UAAU,SAAS,UAAU,iBAAiB,iBAAiB,IACrE;AAEF,QAAM,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC,MAAG;AAtBP;AAsBU,+DAAmB,aAAnB,YAA+B;AAAA;AAAA,EACvC;AAEA,QAAM,aAAa;AAAA,IACjB,CAAC,MAAc;AACb,UAAI,SAAS;AACX,gBAAQ,CAAC;AAAA,MACX,OAAO;AACL,sBAAc,CAAC;AAAA,MACjB;AAAA,IACF;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,YAAU,MAAM;AACd,yDAAmB;AAAA,EACrB,GAAG,CAAC,YAAY,gBAAgB,CAAC;AAEjC,SACE,oBAAC,QACE,qBACG,MAAM,KAAK,EAAE,QAAQ,SAAS,GAAG,CAAC,GAAG,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,UAAU;AAC9D,UAAM,aAAa,eAAe;AAClC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,aAAa,SAAY;AAAA,QAClC,MAAK;AAAA,QACL,QAAO;AAAA,QAGP,SAAS,MAAM;AACb,qBAAW,KAAK;AAAA,QAClB;AAAA,QACA,OAAO;AAAA,UACL,QAAQ;AAAA,QACV;AAAA,QACA,OAAM;AAAA;AAAA,MAPD;AAAA,IAQP;AAAA,EAEJ,CAAC,IACD,MACN;AAEJ;","names":[]}

package/dist/chunk-LVWHSYJM.js

@@ -0,0 +1,16 @@
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+
+// src/molecules/dot-navigation.tsx
+import { DotFilledIcon } from "@radix-ui/react-icons";
+import { jsx } from "react/jsx-runtime";
+function DotNavigation(props) {
+  const { dotCount, onClick, currentDotIndex, defaultDotIndex } = props;
+  return /* @__PURE__ */ jsx(Flex, { children: dotCount ? Array.from({ length: dotCount }, (_, i) => i).map((_, index) => /* @__PURE__ */ jsx(DotFilledIcon, {})) : null });
+}
+
+export {
+  DotNavigation
+};
+//# sourceMappingURL=chunk-LVWHSYJM.js.map

package/dist/chunk-LVWHSYJM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/dot-navigation.tsx"],"sourcesContent":["import React from 'react';\nimport { DotFilledIcon } from '@radix-ui/react-icons';\nimport { Flex } from '../atoms/flex';\n\nexport interface DotNavigationProps {\n  /** 전체 점 갯수 */\n  dotCount?: number;\n  /** 점 클릭 시 */\n  onClick?: (index: number) => void;\n  /** 현재 선택된 점 */\n  currentDotIndex?: number;\n  /** 기본 점 위치 */\n  defaultDotIndex?: number;\n}\n\nexport function DotNavigation(props: DotNavigationProps): React.ReactElement {\n  const { dotCount, onClick, currentDotIndex, defaultDotIndex } = props;\n  return (\n    <Flex>\n      {dotCount\n        ? Array.from({ length: dotCount }, (_, i) => i).map((_, index) => (\n            <DotFilledIcon />\n          ))\n        : null}\n    </Flex>\n  );\n}\n"],"mappings":";;;;;AACA,SAAS,qBAAqB;AAoBlB;AANL,SAAS,cAAc,OAA+C;AAC3E,QAAM,EAAE,UAAU,SAAS,iBAAiB,gBAAgB,IAAI;AAChE,SACE,oBAAC,QACE,qBACG,MAAM,KAAK,EAAE,QAAQ,SAAS,GAAG,CAAC,GAAG,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,UACpD,oBAAC,iBAAc,CAChB,IACD,MACN;AAEJ;","names":[]}

package/dist/chunk-M4ZV2IGG.js

@@ -0,0 +1,16 @@
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+
+// src/molecules/dot-navigation.tsx
+import { DotFilledIcon } from "@radix-ui/react-icons";
+import { jsx } from "react/jsx-runtime";
+function DotNavigation(props) {
+  const { dotCount, onClick, currentDotIndex, defaultDotIndex } = props;
+  return /* @__PURE__ */ jsx(Flex, { children: dotCount ? Array.from({ length: dotCount }, (_, i) => i).map((_, index) => /* @__PURE__ */ jsx(DotFilledIcon, {})) : null });
+}
+
+export {
+  DotNavigation
+};
+//# sourceMappingURL=chunk-M4ZV2IGG.js.map

package/dist/chunk-M4ZV2IGG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/dot-navigation.tsx"],"sourcesContent":["import React from 'react';\nimport { DotFilledIcon } from '@radix-ui/react-icons';\nimport { Flex } from '../atoms/flex';\n\nexport interface DotNavigationProps {\n  /** 전체 점 갯수 */\n  dotCount?: number;\n  /** 점 클릭 시 */\n  onClick?: (index: number) => void;\n  /** 현재 선택된 점 */\n  currentDotIndex?: number;\n  /** 기본 점 위치 */\n  defaultDotIndex?: number;\n}\n\nexport function DotNavigation(props: DotNavigationProps): React.ReactElement {\n  const { dotCount, onClick, currentDotIndex, defaultDotIndex } = props;\n\n  return (\n    <Flex>\n      {dotCount\n        ? Array.from({ length: dotCount }, (_, i) => i).map((_, index) => (\n            <DotFilledIcon />\n          ))\n        : null}\n    </Flex>\n  );\n}\n"],"mappings":";;;;;AACA,SAAS,qBAAqB;AAqBlB;AAPL,SAAS,cAAc,OAA+C;AAC3E,QAAM,EAAE,UAAU,SAAS,iBAAiB,gBAAgB,IAAI;AAEhE,SACE,oBAAC,QACE,qBACG,MAAM,KAAK,EAAE,QAAQ,SAAS,GAAG,CAAC,GAAG,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,UACpD,oBAAC,iBAAc,CAChB,IACD,MACN;AAEJ;","names":[]}

package/dist/chunk-NSSO2QWC.js

@@ -0,0 +1,63 @@
+import {
+  Typo
+} from "./chunk-O3XTRD7R.js";
+import {
+  Button
+} from "./chunk-AQX7DQLI.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+
+// src/molecules/navigation.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Navigation({
+  items,
+  fontColor,
+  backgroundColor,
+  activeKey
+}) {
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      direction: "column",
+      gap: "4",
+      pr: "3",
+      style: {
+        color: fontColor || "var(--white-a12)",
+        backgroundColor: backgroundColor || "var(--black-a12)"
+      },
+      children: items == null ? void 0 : items.map((item) => {
+        const { key, title, icon, itemRender, onClick, children } = item;
+        return /* @__PURE__ */ jsxs(Flex, { direction: "column", onClick, children: [
+          itemRender ? itemRender(item) : /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", height: "36px", pl: "4", pr: "4", children: [
+            icon,
+            /* @__PURE__ */ jsx(Typo, { variant: "subtitle", children: title })
+          ] }),
+          children == null ? void 0 : children.map((menu) => {
+            return menu.itemRender ? menu.itemRender(menu) : /* @__PURE__ */ jsx(
+              Button,
+              {
+                className: `tipp-navigation-button ${activeKey === menu.key ? "active" : ""}`,
+                ml: "37px",
+                onClick: menu.onClick,
+                size: "large",
+                style: {
+                  color: "var(--white-a12)",
+                  height: "32px",
+                  paddingLeft: "var(--space-2)"
+                },
+                children: menu.title
+              },
+              menu.key
+            );
+          })
+        ] }, key);
+      })
+    }
+  );
+}
+
+export {
+  Navigation
+};
+//# sourceMappingURL=chunk-NSSO2QWC.js.map

package/dist/chunk-NSSO2QWC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/navigation.tsx"],"sourcesContent":["import React from 'react';\nimport { Button, Flex, Typo } from '../atoms';\n\ninterface Item {\n  itemRender?: (item: Item) => React.ReactNode;\n  key: string;\n  onClick?: () => void;\n  title: string;\n  icon?: React.ReactNode;\n  children?: Item[];\n}\n\nexport interface NavigationProps {\n  items?: Item[];\n  fontColor?: string;\n  backgroundColor?: string;\n  activeKey?: string;\n}\n\nexport function Navigation({\n  items,\n  fontColor,\n  backgroundColor,\n  activeKey,\n}: NavigationProps): React.ReactNode {\n  return (\n    <Flex\n      direction=\"column\"\n      gap=\"4\"\n      pr=\"3\"\n      style={{\n        color: fontColor || 'var(--white-a12)',\n        backgroundColor: backgroundColor || 'var(--black-a12)',\n      }}\n    >\n      {items?.map((item) => {\n        const { key, title, icon, itemRender, onClick, children } = item;\n        return (\n          <Flex direction=\"column\" key={key} onClick={onClick}>\n            {itemRender ? (\n              itemRender(item)\n            ) : (\n              <Flex align=\"center\" gap=\"3\" height=\"36px\" pl=\"4\" pr=\"4\">\n                {icon}\n                <Typo variant=\"subtitle\">{title}</Typo>\n              </Flex>\n            )}\n            {children?.map((menu) => {\n              return menu.itemRender ? (\n                menu.itemRender(menu)\n              ) : (\n                <Button\n                  className={`tipp-navigation-button ${activeKey === menu.key ? 'active' : ''}`}\n                  key={menu.key}\n                  ml=\"37px\"\n                  onClick={menu.onClick}\n                  size=\"large\"\n                  style={{\n                    color: 'var(--white-a12)',\n                    height: '32px',\n                    paddingLeft: 'var(--space-2)',\n                  }}\n                >\n                  {menu.title}\n                </Button>\n              );\n            })}\n          </Flex>\n        );\n      })}\n    </Flex>\n  );\n}\n"],"mappings":";;;;;;;;;;;AA0Cc,SAEE,KAFF;AAvBP,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqC;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,IAAG;AAAA,MACH,OAAO;AAAA,QACL,OAAO,aAAa;AAAA,QACpB,iBAAiB,mBAAmB;AAAA,MACtC;AAAA,MAEC,yCAAO,IAAI,CAAC,SAAS;AACpB,cAAM,EAAE,KAAK,OAAO,MAAM,YAAY,SAAS,SAAS,IAAI;AAC5D,eACE,qBAAC,QAAK,WAAU,UAAmB,SAChC;AAAA,uBACC,WAAW,IAAI,IAEf,qBAAC,QAAK,OAAM,UAAS,KAAI,KAAI,QAAO,QAAO,IAAG,KAAI,IAAG,KAClD;AAAA;AAAA,YACD,oBAAC,QAAK,SAAQ,YAAY,iBAAM;AAAA,aAClC;AAAA,UAED,qCAAU,IAAI,CAAC,SAAS;AACvB,mBAAO,KAAK,aACV,KAAK,WAAW,IAAI,IAEpB;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,0BAA0B,cAAc,KAAK,MAAM,WAAW,EAAE;AAAA,gBAE3E,IAAG;AAAA,gBACH,SAAS,KAAK;AAAA,gBACd,MAAK;AAAA,gBACL,OAAO;AAAA,kBACL,OAAO;AAAA,kBACP,QAAQ;AAAA,kBACR,aAAa;AAAA,gBACf;AAAA,gBAEC,eAAK;AAAA;AAAA,cAVD,KAAK;AAAA,YAWZ;AAAA,UAEJ;AAAA,aA5B4B,GA6B9B;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/chunk-PV2PTVNR.js

@@ -0,0 +1,54 @@
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+
+// src/molecules/dot-navigation.tsx
+import { useCallback, useEffect, useState } from "react";
+import { DotFilledIcon } from "@radix-ui/react-icons";
+import { jsx } from "react/jsx-runtime";
+function DotNavigation(props) {
+  const { dotCount, onClick, dotIndex, defaultDotIndex, onChangeDotIndex } = props;
+  const [currentDot, setCurrentDot] = useState(
+    () => {
+      var _a;
+      return (_a = defaultDotIndex != null ? defaultDotIndex : dotIndex) != null ? _a : 0;
+    }
+  );
+  const onClickDot = useCallback(
+    (i) => {
+      if (onClick) {
+        onClick(i);
+      } else {
+        setCurrentDot(i);
+      }
+    },
+    [onClick]
+  );
+  useEffect(() => {
+    onChangeDotIndex == null ? void 0 : onChangeDotIndex(currentDot);
+  }, [currentDot, onChangeDotIndex]);
+  return /* @__PURE__ */ jsx(Flex, { children: dotCount ? Array.from({ length: dotCount }, (_, i) => i).map((_, index) => {
+    const isSelected = currentDot === index;
+    return /* @__PURE__ */ jsx(
+      DotFilledIcon,
+      {
+        color: isSelected ? void 0 : "gray",
+        fill: "var(--gray-5)",
+        height: "24px",
+        onClick: () => {
+          onClickDot(index);
+        },
+        style: {
+          cursor: "pointer"
+        },
+        width: "24px"
+      },
+      index
+    );
+  }) : null });
+}
+
+export {
+  DotNavigation
+};
+//# sourceMappingURL=chunk-PV2PTVNR.js.map

package/dist/chunk-PV2PTVNR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/dot-navigation.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport { DotFilledIcon } from '@radix-ui/react-icons';\nimport { Flex } from '../atoms/flex';\n\nexport interface DotNavigationProps {\n  /** 전체 점 갯수 */\n  dotCount?: number;\n  /** 점 클릭 시 */\n  onClick?: (index: number) => void;\n  /** 현재 선택된 점 */\n  dotIndex?: number;\n  /** 기본 점 위치 */\n  defaultDotIndex?: number;\n  /** 선택된 점 변경 시 실행 */\n  onChangeDotIndex?: (index: number) => void;\n}\n\nexport function DotNavigation(props: DotNavigationProps): React.ReactElement {\n  const { dotCount, onClick, dotIndex, defaultDotIndex, onChangeDotIndex } =\n    props;\n\n  const [currentDot, setCurrentDot] = useState<number>(\n    () => defaultDotIndex ?? dotIndex ?? 0\n  );\n\n  const onClickDot = useCallback(\n    (i: number) => {\n      if (onClick) {\n        onClick(i);\n      } else {\n        setCurrentDot(i);\n      }\n    },\n    [onClick]\n  );\n\n  useEffect(() => {\n    onChangeDotIndex?.(currentDot);\n  }, [currentDot, onChangeDotIndex]);\n\n  return (\n    <Flex>\n      {dotCount\n        ? Array.from({ length: dotCount }, (_, i) => i).map((_, index) => {\n            const isSelected = currentDot === index;\n            return (\n              <DotFilledIcon\n                color={isSelected ? undefined : 'gray'}\n                fill=\"var(--gray-5)\"\n                height=\"24px\"\n                // eslint-disable-next-line react/no-array-index-key -- index외의 키가 없음\n                key={index}\n                onClick={() => {\n                  onClickDot(index);\n                }}\n                style={{\n                  cursor: 'pointer',\n                }}\n                width=\"24px\"\n              />\n            );\n          })\n        : null}\n    </Flex>\n  );\n}\n"],"mappings":";;;;;AAAA,SAAgB,aAAa,WAAW,gBAAgB;AACxD,SAAS,qBAAqB;AA6ChB;AA7BP,SAAS,cAAc,OAA+C;AAC3E,QAAM,EAAE,UAAU,SAAS,UAAU,iBAAiB,iBAAiB,IACrE;AAEF,QAAM,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC,MAAG;AAtBP;AAsBU,+DAAmB,aAAnB,YAA+B;AAAA;AAAA,EACvC;AAEA,QAAM,aAAa;AAAA,IACjB,CAAC,MAAc;AACb,UAAI,SAAS;AACX,gBAAQ,CAAC;AAAA,MACX,OAAO;AACL,sBAAc,CAAC;AAAA,MACjB;AAAA,IACF;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,YAAU,MAAM;AACd,yDAAmB;AAAA,EACrB,GAAG,CAAC,YAAY,gBAAgB,CAAC;AAEjC,SACE,oBAAC,QACE,qBACG,MAAM,KAAK,EAAE,QAAQ,SAAS,GAAG,CAAC,GAAG,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,UAAU;AAC9D,UAAM,aAAa,eAAe;AAClC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,aAAa,SAAY;AAAA,QAChC,MAAK;AAAA,QACL,QAAO;AAAA,QAGP,SAAS,MAAM;AACb,qBAAW,KAAK;AAAA,QAClB;AAAA,QACA,OAAO;AAAA,UACL,QAAQ;AAAA,QACV;AAAA,QACA,OAAM;AAAA;AAAA,MAPD;AAAA,IAQP;AAAA,EAEJ,CAAC,IACD,MACN;AAEJ;","names":[]}

package/dist/chunk-SUGQXRH7.js

@@ -0,0 +1,51 @@
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+
+// src/molecules/dot-navigation.tsx
+import { useCallback, useEffect, useState } from "react";
+import { DotFilledIcon } from "@radix-ui/react-icons";
+import { jsx } from "react/jsx-runtime";
+function DotNavigation(props) {
+  const { dotCount, onClick, dotIndex, defaultDotIndex, onChangeDotIndex } = props;
+  const [currentDot, setCurrentDot] = useState(
+    () => {
+      var _a;
+      return (_a = defaultDotIndex != null ? defaultDotIndex : dotIndex) != null ? _a : 0;
+    }
+  );
+  const onClickDot = useCallback(
+    (i) => {
+      if (onClick) {
+        onClick(i);
+      } else {
+        setCurrentDot(i);
+      }
+    },
+    [onClick]
+  );
+  useEffect(() => {
+    onChangeDotIndex == null ? void 0 : onChangeDotIndex(currentDot);
+  }, [currentDot, onChangeDotIndex]);
+  return /* @__PURE__ */ jsx(Flex, { gap: "4", children: dotCount ? Array.from({ length: dotCount }, (_, i) => i).map((_, index) => {
+    const isSelected = currentDot === index;
+    return /* @__PURE__ */ jsx(
+      DotFilledIcon,
+      {
+        color: isSelected ? "gray" : void 0,
+        onClick: () => {
+          onClickDot(index);
+        },
+        style: {
+          cursor: "pointer"
+        }
+      },
+      index
+    );
+  }) : null });
+}
+
+export {
+  DotNavigation
+};
+//# sourceMappingURL=chunk-SUGQXRH7.js.map

package/dist/chunk-SUGQXRH7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/dot-navigation.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport { DotFilledIcon } from '@radix-ui/react-icons';\nimport { Flex } from '../atoms/flex';\n\nexport interface DotNavigationProps {\n  /** 전체 점 갯수 */\n  dotCount?: number;\n  /** 점 클릭 시 */\n  onClick?: (index: number) => void;\n  /** 현재 선택된 점 */\n  dotIndex?: number;\n  /** 기본 점 위치 */\n  defaultDotIndex?: number;\n  /** 선택된 점 변경 시 실행 */\n  onChangeDotIndex?: (index: number) => void;\n}\n\nexport function DotNavigation(props: DotNavigationProps): React.ReactElement {\n  const { dotCount, onClick, dotIndex, defaultDotIndex, onChangeDotIndex } =\n    props;\n\n  const [currentDot, setCurrentDot] = useState<number>(\n    () => defaultDotIndex ?? dotIndex ?? 0\n  );\n\n  const onClickDot = useCallback(\n    (i: number) => {\n      if (onClick) {\n        onClick(i);\n      } else {\n        setCurrentDot(i);\n      }\n    },\n    [onClick]\n  );\n\n  useEffect(() => {\n    onChangeDotIndex?.(currentDot);\n  }, [currentDot, onChangeDotIndex]);\n\n  return (\n    <Flex gap=\"4\">\n      {dotCount\n        ? Array.from({ length: dotCount }, (_, i) => i).map((_, index) => {\n            const isSelected = currentDot === index;\n            return (\n              <DotFilledIcon\n                color={isSelected ? 'gray' : undefined}\n                // eslint-disable-next-line react/no-array-index-key -- index외의 키가 없음\n                key={index}\n                onClick={() => {\n                  onClickDot(index);\n                }}\n                style={{\n                  cursor: 'pointer',\n                }}\n              />\n            );\n          })\n        : null}\n    </Flex>\n  );\n}\n"],"mappings":";;;;;AAAA,SAAgB,aAAa,WAAW,gBAAgB;AACxD,SAAS,qBAAqB;AA6ChB;AA7BP,SAAS,cAAc,OAA+C;AAC3E,QAAM,EAAE,UAAU,SAAS,UAAU,iBAAiB,iBAAiB,IACrE;AAEF,QAAM,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC,MAAG;AAtBP;AAsBU,+DAAmB,aAAnB,YAA+B;AAAA;AAAA,EACvC;AAEA,QAAM,aAAa;AAAA,IACjB,CAAC,MAAc;AACb,UAAI,SAAS;AACX,gBAAQ,CAAC;AAAA,MACX,OAAO;AACL,sBAAc,CAAC;AAAA,MACjB;AAAA,IACF;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,YAAU,MAAM;AACd,yDAAmB;AAAA,EACrB,GAAG,CAAC,YAAY,gBAAgB,CAAC;AAEjC,SACE,oBAAC,QAAK,KAAI,KACP,qBACG,MAAM,KAAK,EAAE,QAAQ,SAAS,GAAG,CAAC,GAAG,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,UAAU;AAC9D,UAAM,aAAa,eAAe;AAClC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,aAAa,SAAS;AAAA,QAG7B,SAAS,MAAM;AACb,qBAAW,KAAK;AAAA,QAClB;AAAA,QACA,OAAO;AAAA,UACL,QAAQ;AAAA,QACV;AAAA;AAAA,MANK;AAAA,IAOP;AAAA,EAEJ,CAAC,IACD,MACN;AAEJ;","names":[]}