oddsgate-ds 1.0.151 → 1.0.152

package/dist/esm/types/components/atoms/Marquee/Marquee.component.d.ts

@@ -1,4 +1,4 @@
 import { IMarquee } from './Marquee.interface';
 import React from 'react';
-declare const Marquee: ({ text, className, onClick, repeat, ...props }: IMarquee) => React.JSX.Element;
+declare const Marquee: ({ text, className, onClick, repeat, duration, ...props }: IMarquee) => React.JSX.Element;
 export default Marquee;

package/dist/esm/types/components/atoms/Marquee/Marquee.interface.d.ts

@@ -2,6 +2,7 @@ import { CSSProperties } from 'react';
 export type IMarquee = {
     text?: string;
     repeat?: number;
+    duration: number;
     className?: string;
     style?: CSSProperties;
     onClick?: () => void;

package/dist/types.d.ts

@@ -379,12 +379,13 @@ declare const SocialLinks: ({ variant, socials, className, style, ...props }: IS
 type IMarquee = {
     text?: string;
     repeat?: number;
+    duration: number;
     className?: string;
     style?: CSSProperties;
     onClick?: () => void;
 };
 
-declare const Marquee: ({ text, className, onClick, repeat, ...props }: IMarquee) => React__default.JSX.Element;
+declare const Marquee: ({ text, className, onClick, repeat, duration, ...props }: IMarquee) => React__default.JSX.Element;
 
 type Direction = 'left' | 'right' | 'up' | 'down';
 interface ICardMarquee {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oddsgate-ds",
-  "version": "1.0.151",
+  "version": "1.0.152",
   "description": "Miew theme component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/atoms/Marquee/Marquee.component.tsx

@@ -9,10 +9,17 @@ const Marquee = ({
   className,
   onClick,
   repeat = 5,
+  duration = 15,
   ...props
 }: IMarquee) => {
   return (
-    <StyledMarquee className={cn(className)} onClick={onClick} {...props}>
+    <StyledMarquee
+      duration={duration}
+      repeat={repeat}
+      className={cn(className)}
+      onClick={onClick}
+      {...props}
+    >
       <div>
         <Heading size="display" tag="span" className="fw-bold">
           {Array.from({ length: repeat }, () => text).join(' ')}

package/src/components/atoms/Marquee/Marquee.interface.ts

@@ -3,6 +3,7 @@ import { CSSProperties } from 'react';
 export type IMarquee = {
   text?: string
   repeat?: number
+  duration: number
   className?: string
   style?: CSSProperties
   onClick?: () => void

package/src/components/atoms/Marquee/Marquee.theme.ts

@@ -25,7 +25,7 @@ export const StyledMarquee = styled.div<IMarquee>`
     width: fit-content;
     white-space: nowrap;
     transform: translate3d(var(--move-initial), 0, 0);
-    animation: marquee 15s linear infinite;
+    animation: marquee ${({ duration = 15 }) => duration}s linear infinite;
   }
 
   @keyframes marquee {