@tipp/ui 1.1.8 → 1.1.10

package/dist/chunk-2L4KWP7B.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, { children: dotCount ? Array.from({ length: dotCount }, (_, i) => i).map((_, index) => {
+    const isSelected = currentDot === index;
+    return /* @__PURE__ */ jsx(
+      DotFilledIcon,
+      {
+        height: "24px",
+        onClick: () => {
+          onClickDot(index);
+        },
+        opacity: isSelected ? void 0 : 0.25,
+        style: {
+          cursor: "pointer"
+        },
+        width: "24px"
+      },
+      index
+    );
+  }) : null });
+}
+
+export {
+  DotNavigation
+};
+//# sourceMappingURL=chunk-2L4KWP7B.js.map

package/dist/chunk-2L4KWP7B.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                height=\"24px\"\n                // eslint-disable-next-line react/no-array-index-key -- index외의 키가 없음\n                key={index}\n                onClick={() => {\n                  onClickDot(index);\n                }}\n                opacity={isSelected ? undefined : 0.25}\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,QAAO;AAAA,QAGP,SAAS,MAAM;AACb,qBAAW,KAAK;AAAA,QAClB;AAAA,QACA,SAAS,aAAa,SAAY;AAAA,QAClC,OAAO;AAAA,UACL,QAAQ;AAAA,QACV;AAAA,QACA,OAAM;AAAA;AAAA,MARD;AAAA,IASP;AAAA,EAEJ,CAAC,IACD,MACN;AAEJ;","names":[]}

package/dist/chunk-6QAY57B6.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",
+        height: "24px",
+        fill: "var(--gray-5)",
+        onClick: () => {
+          onClickDot(index);
+        },
+        style: {
+          cursor: "pointer"
+        },
+        width: "24px"
+      },
+      index
+    );
+  }) : null });
+}
+
+export {
+  DotNavigation
+};
+//# sourceMappingURL=chunk-6QAY57B6.js.map

package/dist/chunk-6QAY57B6.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                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,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,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-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-DMU7IYOM.js

@@ -0,0 +1,130 @@
+import {
+  Typo
+} from "./chunk-O3XTRD7R.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  IconButton
+} from "./chunk-O3DNDMV3.js";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  DoubleArrowLeftIcon,
+  DoubleArrowRightIcon
+} from "./chunk-RC25EWE2.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-N552FDTV.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: "3",
+    style: { borderRadius: "50%" }
+  };
+  if (!page)
+    return null;
+  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-DMU7IYOM.js.map

package/dist/chunk-DMU7IYOM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/pagination.tsx"],"sourcesContent":["import React, { useCallback, useEffect, 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  /** 현재 선택된 페이지 */\n  page?: number;\n  /** 기본 선택 페이지, page보다 낮은 우선 순위를 갖는다 */\n  defaultPage?: number;\n  /** 선택한 페이지 변경 이벤트 cb */\n  onChange?: (page: number) => void;\n  /** 전체 페이지의 수 */\n  count?: number;\n  siblingCount?: number;\n}\n\nexport function Pagination(props: PaginationProps): React.ReactNode {\n  const { onChange, count = 0, siblingCount = 2 } = props;\n\n  const [page, setPage] = useState(() => props.page || props.defaultPage || 1);\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  useEffect(() => {\n    onChange?.(page);\n  }, [onChange, page]);\n\n  useEffect(() => {\n    if (props.page) {\n      setPage(props.page);\n    }\n  }, [props.page]);\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    prev && setPage(prev);\n  }, [prev]);\n\n  const onClickNext = useCallback(() => {\n    next && setPage(next);\n  }, [next]);\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    doublePrev && setPage(doublePrev);\n  }, [doublePrev]);\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    doubleNext && setPage(doubleNext);\n  }, [doubleNext]);\n\n  const iconSize = {\n    height: 24,\n    width: 24,\n  };\n\n  const moveButtonProps: IconButtonProps = {\n    variant: 'ghost',\n    size: '3',\n    style: { borderRadius: '50%' },\n  };\n\n  if (!page) return null;\n\n  return (\n    <Flex align=\"center\" className=\"tipp-pagination\" gap=\"4\">\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                setPage(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":[]}

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":[]}