@jenesei-software/jenesei-kit-react 1.3.40 → 2.0.1

package/build/motion-Dt6TyEjN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion-Dt6TyEjN.js","names":[],"sources":["../node_modules/framer-motion/dist/es/render/dom/viewport/index.mjs","../node_modules/framer-motion/dist/es/utils/use-in-view.mjs","../src/styles/motion/motion.tsx"],"sourcesContent":["import { resolveElements } from 'motion-dom';\n\nconst thresholds = {\n    some: 0,\n    all: 1,\n};\nfunction inView(elementOrSelector, onStart, { root, margin: rootMargin, amount = \"some\" } = {}) {\n    const elements = resolveElements(elementOrSelector);\n    const activeIntersections = new WeakMap();\n    const onIntersectionChange = (entries) => {\n        entries.forEach((entry) => {\n            const onEnd = activeIntersections.get(entry.target);\n            /**\n             * If there's no change to the intersection, we don't need to\n             * do anything here.\n             */\n            if (entry.isIntersecting === Boolean(onEnd))\n                return;\n            if (entry.isIntersecting) {\n                const newOnEnd = onStart(entry);\n                if (typeof newOnEnd === \"function\") {\n                    activeIntersections.set(entry.target, newOnEnd);\n                }\n                else {\n                    observer.unobserve(entry.target);\n                }\n            }\n            else if (typeof onEnd === \"function\") {\n                onEnd(entry);\n                activeIntersections.delete(entry.target);\n            }\n        });\n    };\n    const observer = new IntersectionObserver(onIntersectionChange, {\n        root,\n        rootMargin,\n        threshold: typeof amount === \"number\" ? amount : thresholds[amount],\n    });\n    elements.forEach((element) => observer.observe(element));\n    return () => observer.disconnect();\n}\n\nexport { inView };\n","import { useState, useEffect } from 'react';\nimport { inView } from '../render/dom/viewport/index.mjs';\n\nfunction useInView(ref, { root, margin, amount, once = false } = {}) {\n    const [isInView, setInView] = useState(false);\n    useEffect(() => {\n        if (!ref.current || (once && isInView))\n            return;\n        const onEnter = () => {\n            setInView(true);\n            return once ? undefined : () => setInView(false);\n        };\n        const options = {\n            root: (root && root.current) || undefined,\n            margin,\n            amount,\n        };\n        return inView(ref.current, onEnter, options);\n    }, [root, ref, margin, once, amount]);\n    return isInView;\n}\n\nexport { useInView };\n","import { AnimatePresence, motion, useInView } from 'framer-motion';\nimport { ReactNode, useRef } from 'react';\n\nexport function MotionWordsPullUp({ text }: { text: string }) {\n  const splittedText = text.split(' ');\n\n  const pullupVariant = {\n    initial: { y: 20, opacity: 0 },\n    animate: (i: number) => ({\n      y: 0,\n      opacity: 1,\n      transition: {\n        delay: i * 0.1,\n      },\n    }),\n  };\n  const ref = useRef(null);\n  const isInView = useInView(ref, { once: true });\n  return (\n    <>\n      {splittedText.map((current, i) => (\n        <motion.div\n          key={i}\n          ref={ref}\n          variants={pullupVariant}\n          initial='initial'\n          animate={isInView ? 'animate' : ''}\n          custom={i}\n        >\n          {current === '' ? <span>&nbsp;</span> : current}\n          {i !== splittedText.length - 1 && <span>&nbsp;</span>}\n        </motion.div>\n      ))}\n    </>\n  );\n}\n\nexport function MotionTypingEffect({ text }: { text: string }) {\n  const ref = useRef(null);\n  const isInView = useInView(ref, { once: true });\n  return (\n    <span ref={ref} style={{ display: 'inline-block' }}>\n      {text.split('').map((letter, index) => (\n        <motion.span\n          key={index}\n          initial={{ opacity: 0 }}\n          animate={isInView ? { opacity: 1 } : {}}\n          transition={{ duration: 0.2, delay: index * 0.05 }}\n        >\n          {letter === ' ' ? <span>&nbsp;</span> : letter}\n        </motion.span>\n      ))}\n    </span>\n  );\n}\n\nexport function MotionGradualSpacing({ text }: { text: string }) {\n  const ref = useRef(null);\n  const isInView = useInView(ref, { once: true });\n  return (\n    <AnimatePresence>\n      {text.split('').map((char, i) => (\n        <motion.p\n          ref={ref}\n          key={i}\n          initial={{ opacity: 0, x: -18 }}\n          animate={isInView ? { opacity: 1, x: 0 } : {}}\n          exit='hidden'\n          transition={{ duration: 0.5, delay: i * 0.1 }}\n        >\n          {char === ' ' ? <span>&nbsp;</span> : char}\n        </motion.p>\n      ))}\n    </AnimatePresence>\n  );\n}\n\nexport function MotionBlurIn({ children }: { children: ReactNode }) {\n  const ref = useRef(null);\n  const isInView = useInView(ref, { once: true });\n  return (\n    <motion.div\n      ref={ref}\n      initial={{ filter: 'blur(20px)', opacity: 0 }}\n      animate={isInView ? { filter: 'blur(0px)', opacity: 1 } : {}}\n      transition={{ duration: 1.2 }}\n      style={{ display: 'flex', flexGrow: 1 }}\n    >\n      {children}\n    </motion.div>\n  );\n}\n"],"x_google_ignoreList":[0,1],"mappings":"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"}

package/build/outside-B3nRnDGb.cjs

@@ -0,0 +1,3 @@
+const d=require("./chunk-Dd8m0Ver.cjs"),i=require("./component-jsn2T8Hu.cjs");require("./component-stack.cjs.js");let c=require("react/jsx-runtime"),u=require("react");var s=e=>{const r=(0,u.useRef)(null);return(0,u.useEffect)(()=>{const t=n=>{r.current&&!r.current.contains(n.target)&&e.onOutsideClick(n)};return document.addEventListener("mousedown",t),()=>{document.removeEventListener("mousedown",t)}},[e]),(0,c.jsx)(i.Stack,{sx:e.sx,ref:r,children:e.children})};Object.defineProperty(exports,"Outside",{enumerable:!0,get:function(){return s}});
+
+//# sourceMappingURL=outside-B3nRnDGb.cjs.map

package/build/outside-B3nRnDGb.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"outside-B3nRnDGb.cjs","names":[],"sources":["../src/areas/outside/area.tsx"],"sourcesContent":["import { Stack } from '@local/components/stack';\nimport { ISx } from '@local/styles/utils';\n\nimport { FC, PropsWithChildren, useEffect, useRef } from 'react';\n\ntype IOutside = PropsWithChildren &\n  ISx & {\n    onOutsideClick: (event: MouseEvent) => void;\n  };\n\nexport const Outside: FC<IOutside> = (props) => {\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (elementRef.current && !elementRef.current.contains(event.target as Node)) {\n        props.onOutsideClick(event);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, [props]);\n\n  return (\n    <Stack sx={props.sx} ref={elementRef}>\n      {props.children}\n    </Stack>\n  );\n};\n"],"mappings":"wKAUA,IAAa,EAAyB,GAAU,CAC9C,MAAM,KAAA,EAAA,QAAoC,IAAA,EAE1C,SAAA,EAAA,WAAA,IAAgB,CACd,MAAM,EAAsB,GAAsB,CAC5C,EAAW,SAAW,CAAC,EAAW,QAAQ,SAAS,EAAM,MAAA,GAC3D,EAAM,eAAe,CAAA,GAIzB,gBAAS,iBAAiB,YAAa,CAAA,EACvC,IAAa,CACX,SAAS,oBAAoB,YAAa,CAAA,IAE3C,CAAC,CAAA,CAAM,KAGR,EAAA,KAAC,EAAA,MAAD,CAAO,GAAI,EAAM,GAAI,IAAK,WACvB,EAAM,SACD"}

package/build/outside-DpK1pI8b.js

@@ -0,0 +1,24 @@
+import { t as o } from "./component-BHyXT2-h.js";
+import "./component-stack.es.js";
+import { jsx as i } from "react/jsx-runtime";
+import { useEffect as s, useRef as u } from "react";
+var a = (e) => {
+  const t = u(null);
+  return s(() => {
+    const n = (r) => {
+      t.current && !t.current.contains(r.target) && e.onOutsideClick(r);
+    };
+    return document.addEventListener("mousedown", n), () => {
+      document.removeEventListener("mousedown", n);
+    };
+  }, [e]), /* @__PURE__ */ i(o, {
+    sx: e.sx,
+    ref: t,
+    children: e.children
+  });
+};
+export {
+  a as t
+};
+
+//# sourceMappingURL=outside-DpK1pI8b.js.map

package/build/outside-DpK1pI8b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outside-DpK1pI8b.js","names":[],"sources":["../src/areas/outside/area.tsx"],"sourcesContent":["import { Stack } from '@local/components/stack';\nimport { ISx } from '@local/styles/utils';\n\nimport { FC, PropsWithChildren, useEffect, useRef } from 'react';\n\ntype IOutside = PropsWithChildren &\n  ISx & {\n    onOutsideClick: (event: MouseEvent) => void;\n  };\n\nexport const Outside: FC<IOutside> = (props) => {\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (elementRef.current && !elementRef.current.contains(event.target as Node)) {\n        props.onOutsideClick(event);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, [props]);\n\n  return (\n    <Stack sx={props.sx} ref={elementRef}>\n      {props.children}\n    </Stack>\n  );\n};\n"],"mappings":";;;;AAUA,IAAa,IAAA,CAAyB,MAAU;AAC9C,QAAM,IAAa,EAAuB,IAAA;AAE1C,SAAA,EAAA,MAAgB;AACd,UAAM,IAAA,CAAsB,MAAsB;AAChD,MAAI,EAAW,WAAW,CAAC,EAAW,QAAQ,SAAS,EAAM,MAAA,KAC3D,EAAM,eAAe,CAAA;AAAA;AAIzB,oBAAS,iBAAiB,aAAa,CAAA,GACvC,MAAa;AACX,eAAS,oBAAoB,aAAa,CAAA;AAAA;KAE3C,CAAC,CAAA,CAAM,GAGR,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI,EAAM;AAAA,IAAI,KAAK;AAAA,cACvB,EAAM;AAAA,GACD"}

package/build/pagination-Dbs4Lrpt.cjs

@@ -0,0 +1,3 @@
+const I=require("./chunk-Dd8m0Ver.cjs"),m=require("./proxy-_gZenxVU.cjs"),f=require("./AnimatePresence-BdBJCJuf.cjs"),s=require("./component-jsn2T8Hu.cjs"),a=require("./button-BuPpgfL_.cjs");require("./component-stack.cjs.js");let n=require("react/jsx-runtime"),i=require("react");var b=e=>{const l=(0,i.useMemo)(()=>e.index===0&&!e.isInfinity,[e.index,e.isInfinity]),c=(0,i.useMemo)(()=>e.index===e.length-1&&!e.isInfinity,[e.index,e.isInfinity,e.length]),u=(0,i.useMemo)(()=>e.gap??12,[e.gap]),d=(0,i.useMemo)(()=>e.lengthData??{},[e.lengthData]),r=(0,i.useCallback)(()=>{e.index===0?e.isInfinity&&e.changeIndex(e.length-1):e.changeIndex(e.index-1)},[e]),g=(0,i.useCallback)(()=>{e.index===e.length-1?e.isInfinity&&e.changeIndex(0):e.changeIndex(e.index+1)},[e]),x=(0,i.useMemo)(()=>{const h=Math.floor(e.viewQuantity/2),t=Math.max(0,Math.min(e.index-h,e.length-e.viewQuantity)),o=Math.min(e.length,t+e.viewQuantity);return Array.from({length:o-t},(q,y)=>t+y)},[e.index,e.viewQuantity,e.length]);return(0,n.jsxs)(s.Stack,{className:e.className,style:{height:"fit-content",gap:`${u}px`,...e.style},children:[(0,n.jsx)(a.Button,{isDisabled:l,isHidden:l,onClick:r,...e.buttonControl,icons:[{type:"id",size:"large",name:"Arrow2",order:-1,turn:90}],children:!e.buttonControl.isWidthAsHeight&&e.locale.prev}),(0,n.jsx)(s.Stack,{sx:{width:"fit-content",height:"fit-content",display:"flex",gap:`${u}px`,alignItems:"center",justifyContent:"flex-start"},children:Array.from({length:e.length}).map((h,t)=>(0,n.jsx)(f.AnimatePresence,{mode:"popLayout",children:x.includes(t)&&(0,n.jsx)(m.motion.div,{layout:!0,initial:{opacity:0,scale:.95},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.95,transition:{duration:.1,ease:"easeInOut"}},transition:{default:{duration:.1,ease:"easeOut"}},children:(0,n.jsx)(a.Button,{isWidthAsHeight:!0,...t===e.index?e.buttonCount.active:e.buttonCount.inactive,...d?.[t],onClick:()=>e.changeIndex(t),children:d?.[t]?.icons?.length?null:t+1})})},t))}),(0,n.jsx)(a.Button,{isDisabled:c,isHidden:c,onClick:g,...e.buttonControl,icons:[{type:"id",size:"large",name:"Arrow2",turn:-90}],children:!e.buttonControl.isWidthAsHeight&&e.locale.next})]})};Object.defineProperty(exports,"Pagination",{enumerable:!0,get:function(){return b}});
+
+//# sourceMappingURL=pagination-Dbs4Lrpt.cjs.map

package/build/pagination-Dbs4Lrpt.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination-Dbs4Lrpt.cjs","names":[],"sources":["../src/components/pagination/component.tsx"],"sourcesContent":["import { Button } from '@local/components/button';\nimport { Stack } from '@local/components/stack';\n\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { FC, useCallback, useMemo } from 'react';\n\nimport { DEFAULT_COMPONENT_PAGINATION_GAP } from './component.constants';\nimport { IPagination } from './component.types';\n\nexport const Pagination: FC<IPagination> = (props) => {\n  const isDisabledPrevious = useMemo(() => props.index === 0 && !props.isInfinity, [props.index, props.isInfinity]);\n  const isDisabledNext = useMemo(\n    () => props.index === props.length - 1 && !props.isInfinity,\n    [props.index, props.isInfinity, props.length],\n  );\n\n  const gap = useMemo(() => props.gap ?? DEFAULT_COMPONENT_PAGINATION_GAP, [props.gap]);\n  const lengthData = useMemo(() => props.lengthData ?? {}, [props.lengthData]);\n  const handlePrevious = useCallback(() => {\n    if (props.index === 0) {\n      if (props.isInfinity) {\n        props.changeIndex(props.length - 1);\n      }\n    } else {\n      props.changeIndex(props.index - 1);\n    }\n  }, [props]);\n\n  const handleNext = useCallback(() => {\n    if (props.index === props.length - 1) {\n      if (props.isInfinity) {\n        props.changeIndex(0);\n      }\n    } else {\n      props.changeIndex(props.index + 1);\n    }\n  }, [props]);\n\n  const visibleButtons = useMemo(() => {\n    const half = Math.floor(props.viewQuantity / 2);\n    const start = Math.max(0, Math.min(props.index - half, props.length - props.viewQuantity));\n    const end = Math.min(props.length, start + props.viewQuantity);\n    return Array.from({ length: end - start }, (_, i) => start + i);\n  }, [props.index, props.viewQuantity, props.length]);\n\n  return (\n    <Stack\n      className={props.className}\n      style={{\n        height: 'fit-content',\n        gap: `${gap}px`,\n        ...props.style,\n      }}\n    >\n      <Button\n        isDisabled={isDisabledPrevious}\n        isHidden={isDisabledPrevious}\n        onClick={handlePrevious}\n        {...props.buttonControl}\n        icons={[\n          {\n            type: 'id',\n            size: 'large',\n            name: 'Arrow2',\n            order: -1,\n            turn: 90,\n          },\n        ]}\n      >\n        {!props.buttonControl.isWidthAsHeight && props.locale.prev}\n      </Button>\n\n      <Stack\n        sx={{\n          width: 'fit-content',\n          height: 'fit-content',\n          display: 'flex',\n          gap: `${gap}px`,\n          alignItems: 'center',\n          justifyContent: 'flex-start',\n        }}\n      >\n        {Array.from({ length: props.length }).map((_, i) => {\n          const isVisible = visibleButtons.includes(i);\n          return (\n            <AnimatePresence key={i} mode='popLayout'>\n              {isVisible && (\n                <motion.div\n                  layout\n                  initial={{ opacity: 0, scale: 0.95 }}\n                  animate={{ opacity: 1, scale: 1 }}\n                  exit={{ opacity: 0, scale: 0.95, transition: { duration: 0.1, ease: 'easeInOut' } }}\n                  transition={{\n                    default: { duration: 0.1, ease: 'easeOut' },\n                  }}\n                >\n                  <Button\n                    isWidthAsHeight\n                    {...(i === props.index ? props.buttonCount.active : props.buttonCount.inactive)}\n                    {...lengthData?.[i]}\n                    onClick={() => props.changeIndex(i)}\n                  >\n                    {lengthData?.[i]?.icons?.length ? null : i + 1}\n                  </Button>\n                </motion.div>\n              )}\n            </AnimatePresence>\n          );\n        })}\n      </Stack>\n\n      <Button\n        isDisabled={isDisabledNext}\n        isHidden={isDisabledNext}\n        onClick={handleNext}\n        {...props.buttonControl}\n        icons={[\n          {\n            type: 'id',\n            size: 'large',\n            name: 'Arrow2',\n            turn: -90,\n          },\n        ]}\n      >\n        {!props.buttonControl.isWidthAsHeight && props.locale.next}\n      </Button>\n    </Stack>\n  );\n};\n"],"mappings":"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"}

package/build/pagination-YXSjZsMZ.js

@@ -0,0 +1,110 @@
+import { t as r } from "./proxy-wCWa57J3.js";
+import { t as I } from "./AnimatePresence-19yP-TCg.js";
+import { t as g } from "./component-BHyXT2-h.js";
+import { t as a } from "./button-BbGiFvok.js";
+import "./component-stack.es.js";
+import { jsx as e, jsxs as b } from "react/jsx-runtime";
+import { useCallback as m, useMemo as i } from "react";
+var N = (t) => {
+  const l = i(() => t.index === 0 && !t.isInfinity, [t.index, t.isInfinity]), c = i(() => t.index === t.length - 1 && !t.isInfinity, [
+    t.index,
+    t.isInfinity,
+    t.length
+  ]), d = i(() => t.gap ?? 12, [t.gap]), h = i(() => t.lengthData ?? {}, [t.lengthData]), o = m(() => {
+    t.index === 0 ? t.isInfinity && t.changeIndex(t.length - 1) : t.changeIndex(t.index - 1);
+  }, [t]), x = m(() => {
+    t.index === t.length - 1 ? t.isInfinity && t.changeIndex(0) : t.changeIndex(t.index + 1);
+  }, [t]), f = i(() => {
+    const u = Math.floor(t.viewQuantity / 2), n = Math.max(0, Math.min(t.index - u, t.length - t.viewQuantity)), s = Math.min(t.length, n + t.viewQuantity);
+    return Array.from({ length: s - n }, (v, y) => n + y);
+  }, [
+    t.index,
+    t.viewQuantity,
+    t.length
+  ]);
+  return /* @__PURE__ */ b(g, {
+    className: t.className,
+    style: {
+      height: "fit-content",
+      gap: `${d}px`,
+      ...t.style
+    },
+    children: [
+      /* @__PURE__ */ e(a, {
+        isDisabled: l,
+        isHidden: l,
+        onClick: o,
+        ...t.buttonControl,
+        icons: [{
+          type: "id",
+          size: "large",
+          name: "Arrow2",
+          order: -1,
+          turn: 90
+        }],
+        children: !t.buttonControl.isWidthAsHeight && t.locale.prev
+      }),
+      /* @__PURE__ */ e(g, {
+        sx: {
+          width: "fit-content",
+          height: "fit-content",
+          display: "flex",
+          gap: `${d}px`,
+          alignItems: "center",
+          justifyContent: "flex-start"
+        },
+        children: Array.from({ length: t.length }).map((u, n) => /* @__PURE__ */ e(I, {
+          mode: "popLayout",
+          children: f.includes(n) && /* @__PURE__ */ e(r.div, {
+            layout: !0,
+            initial: {
+              opacity: 0,
+              scale: 0.95
+            },
+            animate: {
+              opacity: 1,
+              scale: 1
+            },
+            exit: {
+              opacity: 0,
+              scale: 0.95,
+              transition: {
+                duration: 0.1,
+                ease: "easeInOut"
+              }
+            },
+            transition: { default: {
+              duration: 0.1,
+              ease: "easeOut"
+            } },
+            children: /* @__PURE__ */ e(a, {
+              isWidthAsHeight: !0,
+              ...n === t.index ? t.buttonCount.active : t.buttonCount.inactive,
+              ...h?.[n],
+              onClick: () => t.changeIndex(n),
+              children: h?.[n]?.icons?.length ? null : n + 1
+            })
+          })
+        }, n))
+      }),
+      /* @__PURE__ */ e(a, {
+        isDisabled: c,
+        isHidden: c,
+        onClick: x,
+        ...t.buttonControl,
+        icons: [{
+          type: "id",
+          size: "large",
+          name: "Arrow2",
+          turn: -90
+        }],
+        children: !t.buttonControl.isWidthAsHeight && t.locale.next
+      })
+    ]
+  });
+};
+export {
+  N as t
+};
+
+//# sourceMappingURL=pagination-YXSjZsMZ.js.map

package/build/pagination-YXSjZsMZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination-YXSjZsMZ.js","names":[],"sources":["../src/components/pagination/component.tsx"],"sourcesContent":["import { Button } from '@local/components/button';\nimport { Stack } from '@local/components/stack';\n\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { FC, useCallback, useMemo } from 'react';\n\nimport { DEFAULT_COMPONENT_PAGINATION_GAP } from './component.constants';\nimport { IPagination } from './component.types';\n\nexport const Pagination: FC<IPagination> = (props) => {\n  const isDisabledPrevious = useMemo(() => props.index === 0 && !props.isInfinity, [props.index, props.isInfinity]);\n  const isDisabledNext = useMemo(\n    () => props.index === props.length - 1 && !props.isInfinity,\n    [props.index, props.isInfinity, props.length],\n  );\n\n  const gap = useMemo(() => props.gap ?? DEFAULT_COMPONENT_PAGINATION_GAP, [props.gap]);\n  const lengthData = useMemo(() => props.lengthData ?? {}, [props.lengthData]);\n  const handlePrevious = useCallback(() => {\n    if (props.index === 0) {\n      if (props.isInfinity) {\n        props.changeIndex(props.length - 1);\n      }\n    } else {\n      props.changeIndex(props.index - 1);\n    }\n  }, [props]);\n\n  const handleNext = useCallback(() => {\n    if (props.index === props.length - 1) {\n      if (props.isInfinity) {\n        props.changeIndex(0);\n      }\n    } else {\n      props.changeIndex(props.index + 1);\n    }\n  }, [props]);\n\n  const visibleButtons = useMemo(() => {\n    const half = Math.floor(props.viewQuantity / 2);\n    const start = Math.max(0, Math.min(props.index - half, props.length - props.viewQuantity));\n    const end = Math.min(props.length, start + props.viewQuantity);\n    return Array.from({ length: end - start }, (_, i) => start + i);\n  }, [props.index, props.viewQuantity, props.length]);\n\n  return (\n    <Stack\n      className={props.className}\n      style={{\n        height: 'fit-content',\n        gap: `${gap}px`,\n        ...props.style,\n      }}\n    >\n      <Button\n        isDisabled={isDisabledPrevious}\n        isHidden={isDisabledPrevious}\n        onClick={handlePrevious}\n        {...props.buttonControl}\n        icons={[\n          {\n            type: 'id',\n            size: 'large',\n            name: 'Arrow2',\n            order: -1,\n            turn: 90,\n          },\n        ]}\n      >\n        {!props.buttonControl.isWidthAsHeight && props.locale.prev}\n      </Button>\n\n      <Stack\n        sx={{\n          width: 'fit-content',\n          height: 'fit-content',\n          display: 'flex',\n          gap: `${gap}px`,\n          alignItems: 'center',\n          justifyContent: 'flex-start',\n        }}\n      >\n        {Array.from({ length: props.length }).map((_, i) => {\n          const isVisible = visibleButtons.includes(i);\n          return (\n            <AnimatePresence key={i} mode='popLayout'>\n              {isVisible && (\n                <motion.div\n                  layout\n                  initial={{ opacity: 0, scale: 0.95 }}\n                  animate={{ opacity: 1, scale: 1 }}\n                  exit={{ opacity: 0, scale: 0.95, transition: { duration: 0.1, ease: 'easeInOut' } }}\n                  transition={{\n                    default: { duration: 0.1, ease: 'easeOut' },\n                  }}\n                >\n                  <Button\n                    isWidthAsHeight\n                    {...(i === props.index ? props.buttonCount.active : props.buttonCount.inactive)}\n                    {...lengthData?.[i]}\n                    onClick={() => props.changeIndex(i)}\n                  >\n                    {lengthData?.[i]?.icons?.length ? null : i + 1}\n                  </Button>\n                </motion.div>\n              )}\n            </AnimatePresence>\n          );\n        })}\n      </Stack>\n\n      <Button\n        isDisabled={isDisabledNext}\n        isHidden={isDisabledNext}\n        onClick={handleNext}\n        {...props.buttonControl}\n        icons={[\n          {\n            type: 'id',\n            size: 'large',\n            name: 'Arrow2',\n            turn: -90,\n          },\n        ]}\n      >\n        {!props.buttonControl.isWidthAsHeight && props.locale.next}\n      </Button>\n    </Stack>\n  );\n};\n"],"mappings":"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"}