"use strict";(self.webpackChunkui=self.webpackChunkui||[]).push([[36],{150:(e,n,t)=>{Object.defineProperty(n,"__esModule",{value:!0});const i=t(0),s=t(1),r=t(3);t(151),n.default=({style:e={},className:n="",play:t=!0,pauseOnHover:a=!1,pauseOnClick:l=!1,direction:u="left",speed:o=20,delay:d=0,loop:c=0,gradient:g=!0,gradientColor:p=[255,255,255],gradientWidth:f=200,onFinish:m,onCycleComplete:y,children:h,value:v})=>{const[$,j]=(0,r.useState)(0),[b,w]=(0,r.useState)(0),[C,O]=(0,r.useState)(0),k=(0,r.useRef)(null),x=(0,r.useRef)(null),N=()=>{x.current&&k.current&&(j(k.current.getBoundingClientRect().width),w(x.current.getBoundingClientRect().width)),O(b<$?$/o:b/o)};(0,r.useEffect)((()=>(N(),window.addEventListener("resize",N),()=>{window.removeEventListener("resize",N)})));const E=`rgba(${p[0]}, ${p[1]}, ${p[2]}`;return(0,i.jsx)(s.Fragment,{children:(0,i.jsxs)("div",Object.assign({ref:k,style:Object.assign(Object.assign({},e),{"--pause-on-hover":a?"paused":"running","--pause-on-click":l?"paused":"running"}),className:n+" marquee-container"},{children:[g&&(0,i.jsx)("div",{style:{"--gradient-color":`${E}, 1), ${E}, 0)`,"--gradient-width":"number"==typeof f?`${f}px`:f},className:"overlay"}),(0,i.jsx)("div",Object.assign({ref:x,style:{"--play":t?"running":"paused","--direction":"left"===u?"normal":"reverse","--duration":`${C}s`,"--delay":`${d}s`,"--iteration-count":c?`${c}`:"infinite"},className:"marquee",onAnimationIteration:y,onAnimationEnd:m},{children:h})),(0,i.jsx)("div",Object.assign({style:{"--play":t?"running":"paused","--direction":"left"===u?"normal":"reverse","--duration":`${C}s`,"--delay":`${d}s`,"--iteration-count":c?`${c}`:"infinite"},className:"marquee"},{children:h}))]}),null!=v?v:"")})}}}]);