@jenesei-software/jenesei-kit-react 2.3.1 → 2.3.2

package/build/button-CHEeSypf.cjs

@@ -1,3 +0,0 @@
-const R=require("./chunk-Dd8m0Ver.cjs"),n=require("./utils-DCIq-5FL.cjs"),S=require("./functions-CZrZU5U0.cjs"),A=require("./icon-Ddkbk3-m.cjs"),m=require("./hooks-use-merge-refs.cjs.js"),g=require("./hooks-use-typography-styles.cjs.js");let s=require("react/jsx-runtime"),o=require("react");var y=e=>{const c=(0,o.useMemo)(()=>A.getIconComponents({icons:(e.icons??[]).map(i=>({...i,style:{color:n.CSS_VARS.genre.button[e.genre].color.index}})),size:e.size}),[e.icons,e.size,e.genre]),u=(0,o.useCallback)(i=>{!e.isDisabled&&e.onClick&&e.onClick(i)},[e.isDisabled,e.onClick]),l=m.useMergeRefs([(0,o.useRef)(null),e.ref]),{className:a,style:d}=g.useTypographyStyles({sx:{variant:n.EXTRA_VALUE.sizeToController[e.size],isNoUserSelect:!0,...e?.sxTypography},style:{order:0,display:"inline-flex"}}),{className:r,style:C}=(0,o.useMemo)(()=>{const i=S.setClasses([n.CSS_CLASS.component.button.root,n.CSS_CLASS.control[e.isDisabled?"none":e.control??"boxShadow"],n.CSS_CLASS.transition.color,e.isZeroRadius&&n.CSS_CLASS.component.button.isZeroRadius,e.isHidden&&n.CSS_CLASS.component.button.isHidden,e.isHiddenBorder&&n.CSS_CLASS.component.button.isHiddenBorder,e.isFullRadius&&n.CSS_CLASS.component.button.isFullRadius,e.isFullSize&&n.CSS_CLASS.component.button.isFullSize,e.isWidthAsHeight&&n.CSS_CLASS.component.button.isWidthAsHeight,e.isMinWidthAsContent&&n.CSS_CLASS.component.button.isMinWidthAsContent,e.isZeroPadding&&n.CSS_CLASS.component.button.isZeroPadding,e.isSizeFitContent&&n.CSS_CLASS.component.button.isSizeFitContent,e.className]),t={};return t[n.CSS_VARS_RAW.component.button.background]=n.CSS_VARS.genre.button[e.genre].background.index,t[n.CSS_VARS_RAW.component.button.color]=n.CSS_VARS.genre.button[e.genre].color.index,t[n.CSS_VARS_RAW.component.button.border]=n.CSS_VARS.genre.button[e.genre].border.index,t[n.CSS_VARS_RAW.component.button.height]=n.CSS_VARS.size[e.size].height,t[n.CSS_VARS_RAW.component.button.padding]=n.CSS_VARS.size[e.size].padding,t[n.CSS_VARS_RAW.component.button.radius]=n.CSS_VARS.size[e.size].radius,t[n.CSS_VARS_RAW.component.button.gap]=`calc(${n.CSS_VARS.size[e.size].padding} - 2px)`,{className:i,style:S.setStyles([Object.keys(t).length?t:void 0,e.style])}},[e.className,e.style,e.genre,e.isDisabled,e.isFullSize,e.isHidden,e.isHiddenBorder,e.isMinWidthAsContent,e.isFullRadius,e.isWidthAsHeight,e.size,e.isZeroRadius,e.control,e.isZeroPadding,e.isSizeFitContent]),{className:_,style:b}=(0,o.useMemo)(()=>{const i=S.setClasses([n.CSS_CLASS.component.button.iconGroup,e.isIconGroup&&n.CSS_CLASS.component.button.iconGroupIsIconGroup]),t={};return"iconGroupOrder"in e&&(t[n.CSS_VARS_RAW.component.button.iconGroupOrder]=String(e.iconGroupOrder??"initial")),{className:i,style:S.setStyles([Object.keys(t).length?t:void 0])}},[e]);return(0,s.jsxs)("button",{tabIndex:e.tabIndex,disabled:e.isDisabled,className:r,style:C,onClick:u,onFocus:e.onFocus,onMouseDown:e.onMouseDown,type:e.type??"button",ref:l,name:e.name,"aria-label":e.ariaLabel,id:e.id,children:[!e.isOnlyIcon&&e.children&&(0,s.jsx)("div",{className:a,style:d,children:e.children}),(0,s.jsx)("div",{className:_,style:b,children:c})]})};Object.defineProperty(exports,"Button",{enumerable:!0,get:function(){return y}});
-
-//# sourceMappingURL=button-CHEeSypf.cjs.map

package/build/button-CHEeSypf.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-CHEeSypf.cjs","names":[],"sources":["../src/components/button/component.tsx"],"sourcesContent":["import { getIconComponents } from '@local/components/icon';\nimport { useMergeRefs } from '@local/hooks/use-merge-refs';\nimport { useTypographyStyles } from '@local/hooks/use-typography-styles';\nimport { CSS_CLASS, CSS_VARS, CSS_VARS_RAW, EXTRA_VALUE } from '@local/styles/utils';\nimport { setClasses, setStyles } from '@local/styles/utils/functions';\n\nimport { FC, Ref, useCallback, useMemo, useRef } from 'react';\n\nimport { IButton } from './component.types';\n\nexport const Button: FC<IButton> = (props) => {\n  const iconComponents = useMemo(\n    () =>\n      getIconComponents({\n        icons: (props.icons ?? []).map((e) => ({\n          ...e,\n          style: { color: CSS_VARS.genre.button[props.genre].color.index },\n        })),\n        size: props.size,\n      }),\n    [props.icons, props.size, props.genre],\n  );\n\n  const handleClick = useCallback<Exclude<IButton['onClick'], undefined>>(\n    (event) => {\n      if (!props.isDisabled && props.onClick) {\n        props.onClick(event);\n      }\n    },\n    [props.isDisabled, props.onClick],\n  );\n\n  const refDefault = useRef<HTMLButtonElement>(null);\n\n  const ref = useMergeRefs([refDefault, props.ref]);\n\n  const { className: classNameTypography, style: styleTypography } = useTypographyStyles({\n    sx: { variant: EXTRA_VALUE.sizeToController[props.size], isNoUserSelect: true, ...props?.sxTypography },\n    style: { order: 0, display: 'inline-flex' },\n  });\n\n  const { className, style } = useMemo(() => {\n    const className = setClasses([\n      CSS_CLASS.component.button.root,\n      CSS_CLASS.control[props.isDisabled ? 'none' : (props.control ?? 'boxShadow')],\n      CSS_CLASS.transition.color,\n      props.isZeroRadius && CSS_CLASS.component.button.isZeroRadius,\n      props.isHidden && CSS_CLASS.component.button.isHidden,\n      props.isHiddenBorder && CSS_CLASS.component.button.isHiddenBorder,\n      props.isFullRadius && CSS_CLASS.component.button.isFullRadius,\n      props.isFullSize && CSS_CLASS.component.button.isFullSize,\n      props.isWidthAsHeight && CSS_CLASS.component.button.isWidthAsHeight,\n      props.isMinWidthAsContent && CSS_CLASS.component.button.isMinWidthAsContent,\n      props.isZeroPadding && CSS_CLASS.component.button.isZeroPadding,\n      props.isSizeFitContent && CSS_CLASS.component.button.isSizeFitContent,\n      props.className,\n    ]);\n\n    const vars: Record<string, string> = {};\n\n    vars[CSS_VARS_RAW.component.button.background] = CSS_VARS.genre.button[props.genre].background.index;\n    vars[CSS_VARS_RAW.component.button.color] = CSS_VARS.genre.button[props.genre].color.index;\n    vars[CSS_VARS_RAW.component.button.border] = CSS_VARS.genre.button[props.genre].border.index;\n\n    vars[CSS_VARS_RAW.component.button.height] = CSS_VARS.size[props.size].height;\n    vars[CSS_VARS_RAW.component.button.padding] = CSS_VARS.size[props.size].padding;\n    vars[CSS_VARS_RAW.component.button.radius] = CSS_VARS.size[props.size].radius;\n    vars[CSS_VARS_RAW.component.button.gap] = `calc(${CSS_VARS.size[props.size].padding} - 2px)`;\n\n    const style = setStyles([Object.keys(vars).length ? vars : undefined, props.style]);\n\n    return { className, style };\n  }, [\n    props.className,\n    props.style,\n    props.genre,\n    props.isDisabled,\n    props.isFullSize,\n    props.isHidden,\n    props.isHiddenBorder,\n    props.isMinWidthAsContent,\n    props.isFullRadius,\n    props.isWidthAsHeight,\n    props.size,\n    props.isZeroRadius,\n    props.control,\n    props.isZeroPadding,\n    props.isSizeFitContent,\n  ]);\n\n  const { className: classNameIconGroup, style: styleIconGroup } = useMemo(() => {\n    const className = setClasses([\n      CSS_CLASS.component.button.iconGroup,\n\n      props.isIconGroup && CSS_CLASS.component.button.iconGroupIsIconGroup,\n    ]);\n\n    const vars: Record<string, string> = {};\n\n    if ('iconGroupOrder' in props)\n      vars[CSS_VARS_RAW.component.button.iconGroupOrder] = String(props.iconGroupOrder ?? 'initial');\n\n    const style = setStyles([Object.keys(vars).length ? vars : undefined]);\n\n    return { className, style };\n  }, [props]);\n\n  return (\n    <button\n      tabIndex={props.tabIndex}\n      disabled={props.isDisabled}\n      className={className}\n      style={style}\n      onClick={handleClick}\n      onFocus={props.onFocus}\n      onMouseDown={props.onMouseDown}\n      type={props.type ?? 'button'}\n      ref={ref as Ref<HTMLButtonElement>}\n      name={props.name}\n      aria-label={props.ariaLabel}\n      id={props.id}\n    >\n      {!props.isOnlyIcon && props.children && (\n        <div className={classNameTypography} style={styleTypography}>\n          {props.children}\n        </div>\n      )}\n      <div className={classNameIconGroup} style={styleIconGroup}>\n        {iconComponents}\n      </div>\n    </button>\n  );\n};\n"],"mappings":"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"}

package/build/input-otp-CJfZoWd7.cjs

@@ -1,3 +0,0 @@
-const q=require("./chunk-Dd8m0Ver.cjs"),R=require("./utils-DCIq-5FL.cjs"),I=require("./error-BdFba_yV.cjs"),C=require("./input-CmdwwrV2.cjs");let o=require("react/jsx-runtime"),c=require("react");var j=e=>{const[f,h]=(0,c.useState)(new Array(e.length).fill("")),u=(0,c.useRef)([]),g=(0,c.useRef)(null),m=(0,c.useCallback)((t,i)=>{i.preventDefault();const n=i.clipboardData.getData("Text").replace(/\D/g,"").split("");n.length&&h(s=>{const r=[...s];let l=t;for(let a=0;a<n.length&&l<r.length;a++)r[l]=n[a],l++;const d=r.join("");return e.onChange?.(d),r.every(a=>a!=="")&&e.onComplete?.(d),setTimeout(()=>{const a=r.indexOf("");a!==-1?u.current[a]?.focus():l<r.length&&u.current[l]?.focus()},0),r})},[e]),y=(0,c.useCallback)((t,i)=>{/^\d*$/.test(i)&&h(n=>{const s=[...n];return s[t]=i.slice(-1),e.onChange&&e.onChange(s.join("")),s.every(r=>r!=="")&&e.onComplete?.(s.join("")),i&&t<n.length-1&&setTimeout(()=>{u.current[t+1]?.focus()},0),s})},[e]),T=(t,i)=>{const n=u.current[t];if(n){if(i.key==="ArrowRight"){const s=t<f.length-1?t+1:0,r=u.current[s];r&&(r.focus(),setTimeout(()=>r.setSelectionRange(0,r.value.length),0))}if(i.key==="ArrowLeft"){const s=t>0?t-1:f.length-1,r=u.current[s];r&&(r.focus(),setTimeout(()=>r.setSelectionRange(0,r.value.length),0))}i.key==="Backspace"&&(n.value?setTimeout(()=>n.setSelectionRange(0,n.value.length),0):t>0&&setTimeout(()=>{const s=u.current[t-1];s&&(s.focus(),s.setSelectionRange(0,s.value.length))},0))}},v=(0,c.useCallback)(t=>{setTimeout(()=>t.target.setSelectionRange(0,t.target.value.length),0)},[]);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("div",{className:e.className,style:{gap:`calc(${R.CSS_VARS.size[e.size].padding} - 2px)`,width:"100%",display:"flex",alignItems:"flex-start",...e.style},id:e.id,ref:g,onBlur:t=>{setTimeout(()=>{g.current&&!g.current.contains(document.activeElement)&&e.onBlur?.(t)},0)},onFocus:t=>{setTimeout(()=>{g.current?.contains(document.activeElement)&&e.onFocus?.(t)},0)},children:f.map((t,i)=>(0,o.jsx)(C.Input,{isWidthAsHeight:!0,tabIndex:i+1,ref:n=>{u.current[i]=n},variety:"standard",type:"text",inputMode:"numeric",maxLength:1,value:t,onFocus:v,onPaste:n=>m(i,n),onChange:n=>y(i,n),onKeyDown:n=>T(i,n),genre:e.genre,size:e.size,sxTypography:e.sxTypography,isBold:e.isBold,isFullRadius:e.isFullRadius,isDisabled:e.isDisabled,isHidden:e.isHidden,isHiddenBorder:e.isHiddenBorder},i))}),e?.error?.isError&&(0,o.jsx)(I.ErrorMessage,{size:e?.error.size??e.size,sxTypography:{size:"16px",weight:"400",...e?.error.sxTypography},...e.error})]})};Object.defineProperty(exports,"InputOTP",{enumerable:!0,get:function(){return j}});
-
-//# sourceMappingURL=input-otp-CJfZoWd7.cjs.map

package/build/input-otp-CJfZoWd7.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"input-otp-CJfZoWd7.cjs","names":[],"sources":["../src/components/input-otp/component.tsx"],"sourcesContent":["import { ErrorMessage } from '@local/components/error';\nimport { Input } from '@local/components/input';\nimport { CSS_VARS } from '@local/styles/utils';\n\nimport { ClipboardEvent, FocusEvent, KeyboardEvent, useCallback, useRef, useState } from 'react';\n\nimport { IInputOTP } from './component.types';\n\nexport const InputOTP = (props: IInputOTP) => {\n  const [otp, setOtp] = useState<string[]>(new Array(props.length).fill(''));\n  const inputsRef = useRef<(HTMLInputElement | null)[]>([]);\n  const wrapperRef = useRef<HTMLDivElement | null>(null);\n\n  const handlePaste = useCallback(\n    (index: number, e: ClipboardEvent<HTMLInputElement>) => {\n      e.preventDefault();\n\n      const pasteData = e.clipboardData.getData('Text');\n      const digits = pasteData.replace(/\\D/g, '').split('');\n\n      if (!digits.length) return;\n\n      setOtp((prevOtp) => {\n        const newOtp = [...prevOtp];\n        let currentIndex = index;\n\n        for (let i = 0; i < digits.length && currentIndex < newOtp.length; i++) {\n          newOtp[currentIndex] = digits[i];\n          currentIndex++;\n        }\n\n        const joined = newOtp.join('');\n\n        props.onChange?.(joined);\n\n        if (newOtp.every((char) => char !== '')) {\n          props.onComplete?.(joined);\n        }\n\n        setTimeout(() => {\n          const firstEmpty = newOtp.indexOf('');\n          if (firstEmpty !== -1) {\n            inputsRef.current[firstEmpty]?.focus();\n          } else if (currentIndex < newOtp.length) {\n            inputsRef.current[currentIndex]?.focus();\n          }\n        }, 0);\n\n        return newOtp;\n      });\n    },\n    [props],\n  );\n\n  const handleChange = useCallback(\n    (index: number, value: string) => {\n      if (!/^\\d*$/.test(value)) return;\n\n      setOtp((prevOtp) => {\n        const newOtp = [...prevOtp];\n        newOtp[index] = value.slice(-1);\n\n        if (props.onChange) {\n          props.onChange(newOtp.join(''));\n        }\n\n        if (newOtp.every((char) => char !== '')) {\n          props.onComplete?.(newOtp.join(''));\n        }\n\n        if (value && index < prevOtp.length - 1) {\n          setTimeout(() => {\n            inputsRef.current[index + 1]?.focus();\n          }, 0);\n        }\n\n        return newOtp;\n      });\n    },\n    [props],\n  );\n\n  const handleKeyDown = (index: number, e: KeyboardEvent<HTMLInputElement>) => {\n    const input = inputsRef.current[index];\n\n    if (!input) return;\n\n    if (e.key === 'ArrowRight') {\n      const nextIndex = index < otp.length - 1 ? index + 1 : 0;\n      const nextInput = inputsRef.current[nextIndex];\n\n      if (nextInput) {\n        nextInput.focus();\n        setTimeout(() => nextInput.setSelectionRange(0, nextInput.value.length), 0);\n      }\n    }\n\n    if (e.key === 'ArrowLeft') {\n      const prevIndex = index > 0 ? index - 1 : otp.length - 1;\n      const prevInput = inputsRef.current[prevIndex];\n\n      if (prevInput) {\n        prevInput.focus();\n        setTimeout(() => prevInput.setSelectionRange(0, prevInput.value.length), 0);\n      }\n    }\n\n    if (e.key === 'Backspace') {\n      if (input.value) {\n        setTimeout(() => input.setSelectionRange(0, input.value.length), 0);\n      } else if (index > 0) {\n        setTimeout(() => {\n          const prevInput = inputsRef.current[index - 1];\n          if (prevInput) {\n            prevInput.focus();\n            prevInput.setSelectionRange(0, prevInput.value.length);\n          }\n        }, 0);\n      }\n    }\n  };\n\n  const handleFocusInput = useCallback((e: FocusEvent<HTMLInputElement>) => {\n    setTimeout(() => e.target.setSelectionRange(0, e.target.value.length), 0);\n  }, []);\n  return (\n    <>\n      <div\n        className={props.className}\n        style={{\n          gap: `calc(${CSS_VARS.size[props.size].padding} - 2px)`,\n          width: '100%',\n          display: 'flex',\n          alignItems: 'flex-start',\n          ...props.style,\n        }}\n        id={props.id}\n        ref={wrapperRef}\n        onBlur={(e) => {\n          setTimeout(() => {\n            if (wrapperRef.current && !wrapperRef.current.contains(document.activeElement)) {\n              props.onBlur?.(e);\n            }\n          }, 0);\n        }}\n        onFocus={(e) => {\n          setTimeout(() => {\n            if (wrapperRef.current?.contains(document.activeElement)) {\n              props.onFocus?.(e);\n            }\n          }, 0);\n        }}\n      >\n        {otp.map((digit, index) => (\n          <Input\n            isWidthAsHeight\n            key={index}\n            tabIndex={index + 1}\n            ref={(el) => {\n              inputsRef.current[index] = el;\n            }}\n            variety='standard'\n            type='text'\n            inputMode='numeric'\n            maxLength={1}\n            value={digit}\n            onFocus={handleFocusInput}\n            onPaste={(e) => handlePaste(index, e)}\n            onChange={(value) => handleChange(index, value)}\n            onKeyDown={(e) => handleKeyDown(index, e)}\n            genre={props.genre}\n            size={props.size}\n            sxTypography={props.sxTypography}\n            isBold={props.isBold}\n            isFullRadius={props.isFullRadius}\n            isDisabled={props.isDisabled}\n            isHidden={props.isHidden}\n            isHiddenBorder={props.isHiddenBorder}\n          />\n        ))}\n      </div>\n      {props?.error?.isError && (\n        <ErrorMessage\n          size={props?.error.size ?? props.size}\n          sxTypography={{ size: '16px', weight: '400', ...props?.error.sxTypography }}\n          {...props.error}\n        />\n      )}\n    </>\n  );\n};\n"],"mappings":"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"}

package/build/input-otp-CeMGm5Xq.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"input-otp-CeMGm5Xq.js","names":[],"sources":["../src/components/input-otp/component.tsx"],"sourcesContent":["import { ErrorMessage } from '@local/components/error';\nimport { Input } from '@local/components/input';\nimport { CSS_VARS } from '@local/styles/utils';\n\nimport { ClipboardEvent, FocusEvent, KeyboardEvent, useCallback, useRef, useState } from 'react';\n\nimport { IInputOTP } from './component.types';\n\nexport const InputOTP = (props: IInputOTP) => {\n  const [otp, setOtp] = useState<string[]>(new Array(props.length).fill(''));\n  const inputsRef = useRef<(HTMLInputElement | null)[]>([]);\n  const wrapperRef = useRef<HTMLDivElement | null>(null);\n\n  const handlePaste = useCallback(\n    (index: number, e: ClipboardEvent<HTMLInputElement>) => {\n      e.preventDefault();\n\n      const pasteData = e.clipboardData.getData('Text');\n      const digits = pasteData.replace(/\\D/g, '').split('');\n\n      if (!digits.length) return;\n\n      setOtp((prevOtp) => {\n        const newOtp = [...prevOtp];\n        let currentIndex = index;\n\n        for (let i = 0; i < digits.length && currentIndex < newOtp.length; i++) {\n          newOtp[currentIndex] = digits[i];\n          currentIndex++;\n        }\n\n        const joined = newOtp.join('');\n\n        props.onChange?.(joined);\n\n        if (newOtp.every((char) => char !== '')) {\n          props.onComplete?.(joined);\n        }\n\n        setTimeout(() => {\n          const firstEmpty = newOtp.indexOf('');\n          if (firstEmpty !== -1) {\n            inputsRef.current[firstEmpty]?.focus();\n          } else if (currentIndex < newOtp.length) {\n            inputsRef.current[currentIndex]?.focus();\n          }\n        }, 0);\n\n        return newOtp;\n      });\n    },\n    [props],\n  );\n\n  const handleChange = useCallback(\n    (index: number, value: string) => {\n      if (!/^\\d*$/.test(value)) return;\n\n      setOtp((prevOtp) => {\n        const newOtp = [...prevOtp];\n        newOtp[index] = value.slice(-1);\n\n        if (props.onChange) {\n          props.onChange(newOtp.join(''));\n        }\n\n        if (newOtp.every((char) => char !== '')) {\n          props.onComplete?.(newOtp.join(''));\n        }\n\n        if (value && index < prevOtp.length - 1) {\n          setTimeout(() => {\n            inputsRef.current[index + 1]?.focus();\n          }, 0);\n        }\n\n        return newOtp;\n      });\n    },\n    [props],\n  );\n\n  const handleKeyDown = (index: number, e: KeyboardEvent<HTMLInputElement>) => {\n    const input = inputsRef.current[index];\n\n    if (!input) return;\n\n    if (e.key === 'ArrowRight') {\n      const nextIndex = index < otp.length - 1 ? index + 1 : 0;\n      const nextInput = inputsRef.current[nextIndex];\n\n      if (nextInput) {\n        nextInput.focus();\n        setTimeout(() => nextInput.setSelectionRange(0, nextInput.value.length), 0);\n      }\n    }\n\n    if (e.key === 'ArrowLeft') {\n      const prevIndex = index > 0 ? index - 1 : otp.length - 1;\n      const prevInput = inputsRef.current[prevIndex];\n\n      if (prevInput) {\n        prevInput.focus();\n        setTimeout(() => prevInput.setSelectionRange(0, prevInput.value.length), 0);\n      }\n    }\n\n    if (e.key === 'Backspace') {\n      if (input.value) {\n        setTimeout(() => input.setSelectionRange(0, input.value.length), 0);\n      } else if (index > 0) {\n        setTimeout(() => {\n          const prevInput = inputsRef.current[index - 1];\n          if (prevInput) {\n            prevInput.focus();\n            prevInput.setSelectionRange(0, prevInput.value.length);\n          }\n        }, 0);\n      }\n    }\n  };\n\n  const handleFocusInput = useCallback((e: FocusEvent<HTMLInputElement>) => {\n    setTimeout(() => e.target.setSelectionRange(0, e.target.value.length), 0);\n  }, []);\n  return (\n    <>\n      <div\n        className={props.className}\n        style={{\n          gap: `calc(${CSS_VARS.size[props.size].padding} - 2px)`,\n          width: '100%',\n          display: 'flex',\n          alignItems: 'flex-start',\n          ...props.style,\n        }}\n        id={props.id}\n        ref={wrapperRef}\n        onBlur={(e) => {\n          setTimeout(() => {\n            if (wrapperRef.current && !wrapperRef.current.contains(document.activeElement)) {\n              props.onBlur?.(e);\n            }\n          }, 0);\n        }}\n        onFocus={(e) => {\n          setTimeout(() => {\n            if (wrapperRef.current?.contains(document.activeElement)) {\n              props.onFocus?.(e);\n            }\n          }, 0);\n        }}\n      >\n        {otp.map((digit, index) => (\n          <Input\n            isWidthAsHeight\n            key={index}\n            tabIndex={index + 1}\n            ref={(el) => {\n              inputsRef.current[index] = el;\n            }}\n            variety='standard'\n            type='text'\n            inputMode='numeric'\n            maxLength={1}\n            value={digit}\n            onFocus={handleFocusInput}\n            onPaste={(e) => handlePaste(index, e)}\n            onChange={(value) => handleChange(index, value)}\n            onKeyDown={(e) => handleKeyDown(index, e)}\n            genre={props.genre}\n            size={props.size}\n            sxTypography={props.sxTypography}\n            isBold={props.isBold}\n            isFullRadius={props.isFullRadius}\n            isDisabled={props.isDisabled}\n            isHidden={props.isHidden}\n            isHiddenBorder={props.isHiddenBorder}\n          />\n        ))}\n      </div>\n      {props?.error?.isError && (\n        <ErrorMessage\n          size={props?.error.size ?? props.size}\n          sxTypography={{ size: '16px', weight: '400', ...props?.error.sxTypography }}\n          {...props.error}\n        />\n      )}\n    </>\n  );\n};\n"],"mappings":"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"}

package/build/pagination-BluJtJl7.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pagination-BluJtJl7.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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"}

package/build/pagination-VMAFNidU.cjs

@@ -1,3 +0,0 @@
-const I=require("./chunk-Dd8m0Ver.cjs"),m=require("./proxy-BDese6Pb.cjs"),f=require("./AnimatePresence-DeKd4Eek.cjs"),s=require("./component-CbJ_P8yq.cjs");require("./component-stack.cjs.js");const a=require("./button-CHEeSypf.cjs");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-VMAFNidU.cjs.map

package/build/pagination-VMAFNidU.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"pagination-VMAFNidU.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/preview-BLu-NOv2.cjs

@@ -1,3 +0,0 @@
-const v=require("./chunk-Dd8m0Ver.cjs"),l=require("./utils-DCIq-5FL.cjs"),u=require("./AnimatePresence-DeKd4Eek.cjs"),c=require("./component-CbJ_P8yq.cjs");require("./component-stack.cjs.js");const d=require("./icon-Ddkbk3-m.cjs");let t=require("react/jsx-runtime"),n=require("react");var m=e=>{const[i,o]=(0,n.useState)(e.defaultVisible??!1),r=(0,n.useMemo)(()=>"visible"in e?e.visible:null,[e]),a=(0,n.useMemo)(()=>"time"in e?e.time:null,[e]);return(0,n.useEffect)(()=>{if(r!==null&&a===null)o(r);else if(r!==null&&a!==null)if(r===!1)o(!1);else{const s=setTimeout(()=>{o(!0)},a);return()=>{clearTimeout(s)}}},[r,a]),(0,t.jsxs)(u.AnimatePresence,{children:[i?null:(0,t.jsxs)(c.StackMotion,{sx:e?.sxLoader,className:l.CSS_CLASS.area.preview.root,transition:{duration:.3},exit:{opacity:0},animate:{opacity:1},children:[(0,t.jsx)(c.Stack,{className:l.CSS_CLASS.area.preview.containerIcon,children:(0,t.jsx)(d.Icon,{size:"100%",type:"loading",color:e.colorIcon??"inherit",name:"Line"})}),e.content&&(0,t.jsx)(c.Stack,{className:l.CSS_CLASS.area.preview.containerChildren,children:e.content})]},"loader"),i?(0,t.jsx)(c.StackMotion,{sx:e?.sxChildren,className:l.CSS_CLASS.area.preview.children,transition:{duration:.3},initial:{opacity:0},exit:{opacity:0},animate:{opacity:1},children:e.children},"children"):null]})},S=()=>{(0,n.useEffect)(()=>{const e=document.querySelector(".preview-wrapper"),i=()=>{e&&(e.style.opacity="0",setTimeout(()=>{e.remove()},500))};return document.readyState==="complete"?i():window.addEventListener("load",i),()=>{window.removeEventListener("load",i)}},[])};Object.defineProperty(exports,"Preview",{enumerable:!0,get:function(){return m}});Object.defineProperty(exports,"useRemovePreviewLoader",{enumerable:!0,get:function(){return S}});
-
-//# sourceMappingURL=preview-BLu-NOv2.cjs.map

package/build/preview-BLu-NOv2.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"preview-BLu-NOv2.cjs","names":[],"sources":["../src/areas/preview/area.tsx","../src/areas/preview/area.hooks.tsx"],"sourcesContent":["import { Icon } from '@local/components/icon';\nimport { Stack, StackMotion } from '@local/components/stack';\nimport { CSS_CLASS } from '@local/styles/utils';\n\nimport { AnimatePresence } from 'framer-motion';\nimport { FC, useEffect, useMemo, useState } from 'react';\n\nimport { IPreview } from './area.types';\n\nexport const Preview: FC<IPreview> = (props) => {\n  const [visible, setVisible] = useState(props.defaultVisible ?? false);\n\n  const propsVisible = useMemo(() => ('visible' in props ? props.visible : null), [props]);\n  const propsTime = useMemo(() => ('time' in props ? props.time : null), [props]);\n\n  useEffect(() => {\n    if (propsVisible !== null && propsTime === null) {\n      setVisible(propsVisible);\n    } else if (propsVisible !== null && propsTime !== null) {\n      if (propsVisible === false) {\n        setVisible(false);\n      } else {\n        const timer = setTimeout(() => {\n          setVisible(true);\n        }, propsTime);\n\n        return () => {\n          clearTimeout(timer);\n        };\n      }\n    }\n  }, [propsVisible, propsTime]);\n\n  return (\n    <AnimatePresence>\n      {!visible ? (\n        <StackMotion\n          key='loader'\n          sx={props?.sxLoader}\n          className={CSS_CLASS.area.preview.root}\n          transition={{ duration: 0.3 }}\n          exit={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n        >\n          <Stack className={CSS_CLASS.area.preview.containerIcon}>\n            <Icon size='100%' type='loading' color={props.colorIcon ?? 'inherit'} name='Line' />\n          </Stack>\n          {props.content && <Stack className={CSS_CLASS.area.preview.containerChildren}>{props.content}</Stack>}\n        </StackMotion>\n      ) : null}\n      {visible ? (\n        <StackMotion\n          key='children'\n          sx={props?.sxChildren}\n          className={CSS_CLASS.area.preview.children}\n          transition={{ duration: 0.3 }}\n          initial={{ opacity: 0 }}\n          exit={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n        >\n          {props.children}\n        </StackMotion>\n      ) : null}\n    </AnimatePresence>\n  );\n};\n","import { useEffect } from 'react';\n\nexport const useRemovePreviewLoader = () => {\n  useEffect(() => {\n    const loader = document.querySelector('.preview-wrapper') as HTMLElement;\n\n    const handleDomReady = () => {\n      if (loader) {\n        loader.style.opacity = '0';\n        setTimeout(() => {\n          loader.remove();\n        }, 500);\n      }\n    };\n\n    if (document.readyState === 'complete') {\n      handleDomReady();\n    } else {\n      window.addEventListener('load', handleDomReady);\n    }\n\n    return () => {\n      window.removeEventListener('load', handleDomReady);\n    };\n  }, []);\n};\n"],"mappings":"6RASA,IAAa,EAAyB,GAAU,CAC9C,KAAM,CAAC,EAAS,CAAA,KAAA,EAAA,UAAuB,EAAM,gBAAkB,EAAA,EAEzD,KAAA,EAAA,SAAA,IAA8B,YAAa,EAAQ,EAAM,QAAU,KAAO,CAAC,CAAA,CAAM,EACjF,KAAA,EAAA,SAAA,IAA2B,SAAU,EAAQ,EAAM,KAAO,KAAO,CAAC,CAAA,CAAM,EAE9E,SAAA,EAAA,WAAA,IAAgB,CACd,GAAI,IAAiB,MAAQ,IAAc,KACzC,EAAW,CAAA,UACF,IAAiB,MAAQ,IAAc,KAChD,GAAI,IAAiB,GACnB,EAAW,EAAA,MACN,CACL,MAAM,EAAQ,WAAA,IAAiB,CAC7B,EAAW,EAAA,GACV,CAAA,EAEH,MAAA,IAAa,CACX,aAAa,CAAA,KAIlB,CAAC,EAAc,CAAA,CAAU,KAG1B,EAAA,MAAC,EAAA,gBAAD,CAAA,SAAA,CACI,EAcE,QAbF,EAAA,MAAC,EAAA,YAAD,CAEE,GAAI,GAAO,SACX,UAAW,EAAA,UAAU,KAAK,QAAQ,KAClC,WAAY,CAAE,SAAU,EAAA,EACxB,KAAM,CAAE,QAAS,CAAA,EACjB,QAAS,CAAE,QAAS,CAAA,WANtB,IAQE,EAAA,KAAC,EAAA,MAAD,CAAO,UAAW,EAAA,UAAU,KAAK,QAAQ,0BACvC,EAAA,KAAC,EAAA,KAAD,CAAM,KAAK,OAAO,KAAK,UAAU,MAAO,EAAM,WAAa,UAAW,KAAK,OAAS,EAC9E,EACP,EAAM,YAAW,EAAA,KAAC,EAAA,MAAD,CAAO,UAAW,EAAA,UAAU,KAAK,QAAQ,2BAAoB,EAAM,QAAgB,CAAA,GAVjG,QAAA,EAaP,KACC,EAAA,KAAC,EAAA,YAAD,CAEE,GAAI,GAAO,WACX,UAAW,EAAA,UAAU,KAAK,QAAQ,SAClC,WAAY,CAAE,SAAU,EAAA,EACxB,QAAS,CAAE,QAAS,CAAA,EACpB,KAAM,CAAE,QAAS,CAAA,EACjB,QAAS,CAAE,QAAS,CAAA,WAEnB,EAAM,UARH,UAAA,EAUJ,IAAA,CACY,CAAA,GC7DT,EAAA,IAA+B,IAC1C,EAAA,WAAA,IAAgB,CACd,MAAM,EAAS,SAAS,cAAc,kBAAA,EAEhC,EAAA,IAAuB,CACvB,IACF,EAAO,MAAM,QAAU,IACvB,WAAA,IAAiB,CACf,EAAO,OAAA,GACN,GAAA,IAIP,OAAI,SAAS,aAAe,WAC1B,EAAA,EAEA,OAAO,iBAAiB,OAAQ,CAAA,EAGlC,IAAa,CACX,OAAO,oBAAoB,OAAQ,CAAA,IAEpC,CAAA,CAAE"}

package/build/preview-Bc2qdyd4.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"preview-Bc2qdyd4.js","names":[],"sources":["../src/areas/preview/area.tsx","../src/areas/preview/area.hooks.tsx"],"sourcesContent":["import { Icon } from '@local/components/icon';\nimport { Stack, StackMotion } from '@local/components/stack';\nimport { CSS_CLASS } from '@local/styles/utils';\n\nimport { AnimatePresence } from 'framer-motion';\nimport { FC, useEffect, useMemo, useState } from 'react';\n\nimport { IPreview } from './area.types';\n\nexport const Preview: FC<IPreview> = (props) => {\n  const [visible, setVisible] = useState(props.defaultVisible ?? false);\n\n  const propsVisible = useMemo(() => ('visible' in props ? props.visible : null), [props]);\n  const propsTime = useMemo(() => ('time' in props ? props.time : null), [props]);\n\n  useEffect(() => {\n    if (propsVisible !== null && propsTime === null) {\n      setVisible(propsVisible);\n    } else if (propsVisible !== null && propsTime !== null) {\n      if (propsVisible === false) {\n        setVisible(false);\n      } else {\n        const timer = setTimeout(() => {\n          setVisible(true);\n        }, propsTime);\n\n        return () => {\n          clearTimeout(timer);\n        };\n      }\n    }\n  }, [propsVisible, propsTime]);\n\n  return (\n    <AnimatePresence>\n      {!visible ? (\n        <StackMotion\n          key='loader'\n          sx={props?.sxLoader}\n          className={CSS_CLASS.area.preview.root}\n          transition={{ duration: 0.3 }}\n          exit={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n        >\n          <Stack className={CSS_CLASS.area.preview.containerIcon}>\n            <Icon size='100%' type='loading' color={props.colorIcon ?? 'inherit'} name='Line' />\n          </Stack>\n          {props.content && <Stack className={CSS_CLASS.area.preview.containerChildren}>{props.content}</Stack>}\n        </StackMotion>\n      ) : null}\n      {visible ? (\n        <StackMotion\n          key='children'\n          sx={props?.sxChildren}\n          className={CSS_CLASS.area.preview.children}\n          transition={{ duration: 0.3 }}\n          initial={{ opacity: 0 }}\n          exit={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n        >\n          {props.children}\n        </StackMotion>\n      ) : null}\n    </AnimatePresence>\n  );\n};\n","import { useEffect } from 'react';\n\nexport const useRemovePreviewLoader = () => {\n  useEffect(() => {\n    const loader = document.querySelector('.preview-wrapper') as HTMLElement;\n\n    const handleDomReady = () => {\n      if (loader) {\n        loader.style.opacity = '0';\n        setTimeout(() => {\n          loader.remove();\n        }, 500);\n      }\n    };\n\n    if (document.readyState === 'complete') {\n      handleDomReady();\n    } else {\n      window.addEventListener('load', handleDomReady);\n    }\n\n    return () => {\n      window.removeEventListener('load', handleDomReady);\n    };\n  }, []);\n};\n"],"mappings":";;;;;;;AASA,IAAa,IAAA,CAAyB,MAAU;AAC9C,QAAM,CAAC,GAAS,CAAA,IAAc,EAAS,EAAM,kBAAkB,EAAA,GAEzD,IAAe,EAAA,MAAe,aAAa,IAAQ,EAAM,UAAU,MAAO,CAAC,CAAA,CAAM,GACjF,IAAY,EAAA,MAAe,UAAU,IAAQ,EAAM,OAAO,MAAO,CAAC,CAAA,CAAM;AAE9E,SAAA,EAAA,MAAgB;AACd,QAAI,MAAiB,QAAQ,MAAc,KACzC,CAAA,EAAW,CAAA;AAAA,aACF,MAAiB,QAAQ,MAAc,KAChD,KAAI,MAAiB,GACnB,CAAA,EAAW,EAAA;AAAA,SACN;AACL,YAAM,IAAQ,WAAA,MAAiB;AAC7B,QAAA,EAAW,EAAA;AAAA,SACV,CAAA;AAEH,aAAA,MAAa;AACX,qBAAa,CAAA;AAAA;;KAIlB,CAAC,GAAc,CAAA,CAAU,GAG1B,gBAAA,EAAC,GAAD,EAAA,UAAA,CACI,IAcE,OAbF,gBAAA,EAAC,GAAD;AAAA,IAEE,IAAI,GAAO;AAAA,IACX,WAAW,EAAU,KAAK,QAAQ;AAAA,IAClC,YAAY,EAAE,UAAU,IAAA;AAAA,IACxB,MAAM,EAAE,SAAS,EAAA;AAAA,IACjB,SAAS,EAAE,SAAS,EAAA;AAAA,cANtB,CAQE,gBAAA,EAAC,GAAD;AAAA,MAAO,WAAW,EAAU,KAAK,QAAQ;AAAA,gBACvC,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAK;AAAA,QAAO,MAAK;AAAA,QAAU,OAAO,EAAM,aAAa;AAAA,QAAW,MAAK;AAAA,OAAS;AAAA,KAC9E,GACP,EAAM,WAAW,gBAAA,EAAC,GAAD;AAAA,MAAO,WAAW,EAAU,KAAK,QAAQ;AAAA,gBAAoB,EAAM;AAAA,KAAgB,CAAA;AAAA,KAVjG,QAAA,GAaP,IACC,gBAAA,EAAC,GAAD;AAAA,IAEE,IAAI,GAAO;AAAA,IACX,WAAW,EAAU,KAAK,QAAQ;AAAA,IAClC,YAAY,EAAE,UAAU,IAAA;AAAA,IACxB,SAAS,EAAE,SAAS,EAAA;AAAA,IACpB,MAAM,EAAE,SAAS,EAAA;AAAA,IACjB,SAAS,EAAE,SAAS,EAAA;AAAA,cAEnB,EAAM;AAAA,KARH,UAAA,IAUJ,IAAA,EACY,CAAA;GC7DT,IAAA,MAA+B;AAC1C,EAAA,EAAA,MAAgB;AACd,UAAM,IAAS,SAAS,cAAc,kBAAA,GAEhC,IAAA,MAAuB;AAC3B,MAAI,MACF,EAAO,MAAM,UAAU,KACvB,WAAA,MAAiB;AACf,QAAA,EAAO,OAAA;AAAA,SACN,GAAA;AAAA;AAIP,WAAI,SAAS,eAAe,aAC1B,EAAA,IAEA,OAAO,iBAAiB,QAAQ,CAAA,GAGlC,MAAa;AACX,aAAO,oBAAoB,QAAQ,CAAA;AAAA;KAEpC,CAAA,CAAE"}