@progress/kendo-themes-html 7.0.3-dev.0 → 7.0.3-dev.1

package/dist/types/badge/index.d.ts

@@ -1 +1,3 @@
 export * from './badge.spec';
+export * from './templates/badge-normal';
+export * from './templates/icon-badge';

package/dist/types/badge/templates/badge-normal.d.ts

@@ -0,0 +1 @@
+export declare const BadgeNormal: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/badge/templates/icon-badge.d.ts

@@ -0,0 +1 @@
+export declare const IconBadge: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/breadcrumb/breadcrumb-link.d.ts

@@ -8,5 +8,8 @@ export type KendoBreadcrumbLinkProps = {
 export type KendoBreadcrumbLinkState = {
     [K in (typeof states)[number]]?: boolean;
 };
-export declare const BreadcrumbLink: (props: KendoBreadcrumbLinkProps & KendoBreadcrumbLinkState & React.HTMLAttributes<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const BreadcrumbLink: {
+    (props: KendoBreadcrumbLinkProps & KendoBreadcrumbLinkState & React.HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
+    states: ("focus" | "disabled" | "hover")[];
+};
 export {};

package/dist/types/breadcrumb/index.d.ts

@@ -5,3 +5,7 @@ export * from './breadcrumb-container';
 export * from './breadcrumb-item';
 export * from './breadcrumb-link';
 export * from './breadcrumb-item-text';
+export * from './templates/breadcrumb-normal';
+export * from './templates/breadcrumb-adaptive';
+export * from './templates/breadcrumb-root';
+export * from './templates/breadcrumb-root-adaptive';

package/dist/types/breadcrumb/templates/breadcrumb-adaptive.d.ts

@@ -0,0 +1 @@
+export declare const BreadcrumbAdaptive: ({ collapsing, ...other }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/breadcrumb/templates/breadcrumb-normal.d.ts

@@ -0,0 +1 @@
+export declare const BreadcrumbNormal: ({ collapsing, ...other }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/breadcrumb/templates/breadcrumb-root-adaptive.d.ts

@@ -0,0 +1 @@
+export declare const BreadcrumbRootAdaptive: ({ collapsing, ...other }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/breadcrumb/templates/breadcrumb-root.d.ts

@@ -0,0 +1 @@
+export declare const BreadcrumbRoot: ({ collapsing, ...other }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/breadcrumb/tests/breadcrumb-items.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/types/captcha/index.d.ts

@@ -1 +1,2 @@
 export * from './captcha.spec';
+export * from './templates/captcha-normal';

package/dist/types/captcha/templates/captcha-normal.d.ts

@@ -0,0 +1 @@
+export declare const CaptchaNormal: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/captcha/tests/captcha-rtl.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/types/chat/index.d.ts

@@ -2,3 +2,6 @@ export * from './chat.spec';
 export * from './chat-message';
 export * from './chat-message-group';
 export * from './chat-quick-replies';
+export * from './templates/chat-normal';
+export * from './templates/chat-with-toolbar';
+export * from './templates/chat-with-options';

package/dist/types/chat/templates/chat-normal.d.ts

@@ -0,0 +1 @@
+export declare const ChatNormal: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/chat/templates/chat-with-options.d.ts

@@ -0,0 +1 @@
+export declare const ChatWithOptions: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/chat/templates/chat-with-toolbar.d.ts

@@ -0,0 +1 @@
+export declare const ChatWithToolbar: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/chat/tests/chat-content-rtl.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/types/chat/tests/chat-content.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/types/form/index.d.ts

@@ -1,3 +1,5 @@
 export * from './form.spec';
 export * from './form-field';
 export * from './fieldset';
+export * from './templates/form-normal';
+export * from './templates/form-horizontal';

package/dist/types/form/templates/form-horizontal.d.ts

@@ -0,0 +1 @@
+export declare const FormHorizontal: ({ size, ...other }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/form/templates/form-normal.d.ts

@@ -0,0 +1 @@
+export declare const FormNormal: ({ size, ...other }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/loader/index.d.ts

@@ -1,2 +1,6 @@
 export * from './loader.spec';
 export * from './loader-container.spec';
+export * from './templates/loader-normal';
+export * from './templates/loader-infinite';
+export * from './templates/loader-converging';
+export * from './templates/loader-container-normal';

package/dist/types/loader/templates/loader-container-normal.d.ts

@@ -0,0 +1 @@
+export declare const LoaderContainerNormal: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/loader/templates/loader-converging.d.ts

@@ -0,0 +1 @@
+export declare const LoaderConverging: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/loader/templates/loader-infinite.d.ts

@@ -0,0 +1 @@
+export declare const LoaderInfinite: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/loader/templates/loader-normal.d.ts

@@ -0,0 +1 @@
+export declare const LoaderNormal: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/loader/tests/loader-colors.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/types/skeleton/index.d.ts

@@ -1 +1,4 @@
 export * from './skeleton.spec';
+export * from './templates/skeleton-normal';
+export * from './templates/skeleton-rectangle';
+export * from './templates/skeleton-circle';

package/dist/types/skeleton/templates/skeleton-circle.d.ts

@@ -0,0 +1 @@
+export declare const SkeletonCircle: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/skeleton/templates/skeleton-normal.d.ts

@@ -0,0 +1 @@
+export declare const SkeletonNormal: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/skeleton/templates/skeleton-rectangle.d.ts

@@ -0,0 +1 @@
+export declare const SkeletonRectangle: (props: any) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-themes-html",
   "description": "A collection of HTML helpers used for developing Kendo UI themes",
-  "version": "7.0.3-dev.0",
+  "version": "7.0.3-dev.1",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -52,5 +52,5 @@
   "devDependencies": {
     "@types/react": "^18.0.2"
   },
-  "gitHead": "6e5d52ad18936bf3c8d4fa5b6511a01fea2cbd23"
+  "gitHead": "90df5557fed86e541e77693108aad68842d55a2f"
 }

package/src/badge/index.ts

@@ -1 +1,3 @@
 export * from './badge.spec';
+export * from './templates/badge-normal';
+export * from './templates/icon-badge';

package/src/badge/templates/badge-normal.tsx

@@ -0,0 +1,3 @@
+import { Badge } from "..";
+
+export const BadgeNormal = (props) => <Badge {...props}/>;

package/src/badge/templates/icon-badge.tsx

@@ -0,0 +1,11 @@
+import { Badge } from "..";
+import { Icon } from "../../icon";
+
+export const IconBadge = (props) =>
+    <Badge
+        children={
+            <Icon className="k-badge-icon" icon="x-circle" />
+        }
+        {...props}
+    />
+;

package/src/badge/tests/badge-cutout-border.tsx

@@ -0,0 +1,91 @@
+import { Badge, BadgeNormal } from '..';
+
+
+const styles = `
+    .k-badge-container {
+        padding: 5px;
+        width: 80px;
+        min-height: 30px;
+        box-sizing: border-box;
+        background-color: skyblue;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+    #test-area {
+        grid-template-columns: 80px repeat(5, 1fr);
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid">
+
+            <span></span>
+            <span>Rectangle</span>
+            <span>Rounded</span>
+            <span>Pill</span>
+            <span>Circle</span>
+            <span>Dot</span>
+
+            {Badge.options.fillMode.map((fillMode) => (
+                <>
+                    <div className="k-col-span-full k-text-center">{fillMode}</div>
+
+                    <span>inline</span>
+                    <div className="k-badge-container">
+                        <BadgeNormal fillMode={fillMode} cutoutBorder>Rect</BadgeNormal>
+                    </div>
+                    <div className="k-badge-container">
+                        <BadgeNormal fillMode={fillMode} rounded="medium" cutoutBorder>Round</BadgeNormal>
+                    </div>
+                    <div className="k-badge-container">
+                        <BadgeNormal fillMode={fillMode} rounded="full" cutoutBorder>Pill</BadgeNormal>
+                    </div>
+                    <div className="k-badge-container">
+                        <BadgeNormal fillMode={fillMode} rounded="full" cutoutBorder>1</BadgeNormal>
+                    </div>
+                    <div className="k-badge-container">
+                        <BadgeNormal fillMode={fillMode} rounded="full" cutoutBorder></BadgeNormal>
+                    </div>
+
+                    <span>inside</span>
+                    <div className="k-badge-container">
+                        <BadgeNormal fillMode={fillMode} position="inside" align="top-start" cutoutBorder>Rect</BadgeNormal>
+                    </div>
+                    <div className="k-badge-container">
+                        <BadgeNormal fillMode={fillMode} rounded="medium" position="inside" align="top-start" cutoutBorder>Round</BadgeNormal>
+                    </div>
+                    <div className="k-badge-container">
+                        <BadgeNormal fillMode={fillMode} rounded="full" position="inside" align="top-start" cutoutBorder>Pill</BadgeNormal>
+                    </div>
+                    <div className="k-badge-container">
+                        <BadgeNormal fillMode={fillMode} rounded="full" position="inside" align="top-start" cutoutBorder>1</BadgeNormal>
+                    </div>
+                    <div className="k-badge-container">
+                        <BadgeNormal fillMode={fillMode} rounded="full" position="inside" align="top-start" cutoutBorder></BadgeNormal>
+                    </div>
+
+                    <span>edge</span>
+                    <div className="k-badge-container">
+                        <BadgeNormal fillMode={fillMode} position="edge" align="top-start" cutoutBorder>Rect</BadgeNormal>
+                    </div>
+                    <div className="k-badge-container">
+                        <BadgeNormal fillMode={fillMode} rounded="medium" position="edge" align="top-start" cutoutBorder>Round</BadgeNormal>
+                    </div>
+                    <div className="k-badge-container">
+                        <BadgeNormal fillMode={fillMode} rounded="full" position="edge" align="top-start" cutoutBorder>Pill</BadgeNormal>
+                    </div>
+                    <div className="k-badge-container">
+                        <BadgeNormal fillMode={fillMode} rounded="full" position="edge" align="top-start" cutoutBorder>1</BadgeNormal>
+                    </div>
+                    <div className="k-badge-container">
+                        <BadgeNormal fillMode={fillMode} rounded="full" position="edge" align="top-start" cutoutBorder></BadgeNormal>
+                    </div>
+                </>
+            ))}
+        </div>
+    </>
+);

package/src/badge/tests/badge-misc.tsx

@@ -1,32 +1,27 @@
 import { Icon } from '../../icon';
-import { Badge } from '../../badge';
+import { Badge, IconBadge } from '../../badge';
 
 
 const styles = `
-    .k-badge-container {
-        padding: 5px;
-        width: 80px;
-        min-height: 30px;
-        box-sizing: border-box;
-        background-color: skyblue;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
+    #test-area {
+        grid-template-columns: 80px repeat(5, 1fr);
     }
 `;
 
 export default () =>(
     <>
         <style>{styles}</style>
-        <div id="test-area" className="k-d-grid k-grid-cols-6">
+        <div id="test-area" className="k-d-grid">
 
             <span></span>
-            <span className="col">Baseline</span>
-            <span className="col">Rectangle</span>
-            <span className="col">Rounded</span>
-            <span className="col">Pill</span>
-            <span className="col">Circle</span>
+            <span>Baseline</span>
+            <span>Rectangle</span>
+            <span>Rounded</span>
+            <span>Pill</span>
+            <span>Circle</span>
+
 
+            <div className="k-col-span-full k-text-center">solid</div>
 
             <span>Small</span>
             <span>
@@ -38,191 +33,133 @@ export default () =>(
                 </Badge>
             </span>
             <span>
-                <Badge size="small" rounded="small" themeColor="success">
+                <IconBadge size="small" rounded="small" themeColor="success">
                     <Icon className="k-badge-icon" icon="check"></Icon>
-                </Badge>
+                </IconBadge>
             </span>
             <span>
-                <Badge size="small" rounded="full" themeColor="success">
+                <IconBadge size="small" rounded="full" themeColor="success">
                     <Icon className="k-badge-icon" icon="check"></Icon>
-                </Badge>
+                </IconBadge>
             </span>
             <span>
-                <Badge size="small" rounded="full" themeColor="success">
+                <IconBadge size="small" rounded="full" themeColor="success">
                     <Icon className="k-badge-icon" icon="check"></Icon>
-                </Badge>
+                </IconBadge>
             </span>
 
-            <span>^ outline</span>
+            <span>Normal</span>
             <span>
-                <Badge fillMode="outline" size="small">99</Badge>
+                <Badge themeColor="info">99</Badge>
             </span>
             <span>
-                <Badge fillMode="outline" size="small">
-                    <Icon className="k-badge-icon" icon="x-circle"></Icon>
-                </Badge>
+                <IconBadge themeColor="info">
+                    <Icon className="k-badge-icon" icon="calendar"></Icon>
+                </IconBadge>
             </span>
             <span>
-                <Badge fillMode="outline" size="small" rounded="small">
-                    <Icon className="k-badge-icon" icon="x-circle"></Icon>
-                </Badge>
+                <IconBadge themeColor="info" rounded="medium">
+                    <Icon className="k-badge-icon" icon="calendar"></Icon>
+                </IconBadge>
             </span>
             <span>
-                <Badge fillMode="outline" size="small" rounded="full">
-                    <Icon className="k-badge-icon" icon="x-circle"></Icon>
-                </Badge>
+                <IconBadge themeColor="info" rounded="full">
+                    <Icon className="k-badge-icon" icon="calendar"></Icon>
+                </IconBadge>
             </span>
             <span>
-                <Badge fillMode="outline" size="small" rounded="full">
-                    <Icon className="k-badge-icon" icon="x-circle"></Icon>
-                </Badge>
+                <IconBadge themeColor="info" rounded="full">
+                    <Icon className="k-badge-icon" icon="calendar"></Icon>
+                </IconBadge>
             </span>
 
-
-            <span>Normal</span>
+            <span>Large</span>
             <span>
-                <Badge themeColor="info">99</Badge>
+                <Badge size="large" themeColor="warning">99</Badge>
             </span>
             <span>
-                <Badge themeColor="info">
-                    <Icon className="k-badge-icon" icon="calendar"></Icon>
-                </Badge>
+                <IconBadge size="large" themeColor="warning">
+                    <Icon className="k-badge-icon" icon="bell"></Icon>
+                </IconBadge>
             </span>
             <span>
-                <Badge themeColor="info" rounded="medium">
-                    <Icon className="k-badge-icon" icon="calendar"></Icon>
-                </Badge>
+                <IconBadge size="large" themeColor="warning" rounded="large">
+                    <Icon className="k-badge-icon" icon="bell"></Icon>
+                </IconBadge>
             </span>
             <span>
-                <Badge themeColor="info" rounded="full">
-                    <Icon className="k-badge-icon" icon="calendar"></Icon>
-                </Badge>
+                <IconBadge size="large" themeColor="warning" rounded="full">
+                    <Icon className="k-badge-icon" icon="bell"></Icon>
+                </IconBadge>
             </span>
             <span>
-                <Badge themeColor="info" rounded="full">
-                    <Icon className="k-badge-icon" icon="calendar"></Icon>
-                </Badge>
+                <IconBadge size="large" themeColor="warning" rounded="full">
+                    <Icon className="k-badge-icon" icon="bell"></Icon>
+                </IconBadge>
             </span>
 
-            <span>^ outline</span>
+            <div className="k-col-span-full k-text-center">outline</div>
+
+            <span>Small</span>
             <span>
-                <Badge fillMode="outline" themeColor="tertiary">99</Badge>
+                <Badge fillMode="outline" size="small">99</Badge>
             </span>
             <span>
-                <Badge fillMode="outline" themeColor="tertiary">
-                    <Icon className="k-badge-icon" icon="plus-circle"></Icon>
-                </Badge>
+                <IconBadge fillMode="outline" size="small"/>
             </span>
             <span>
-                <Badge fillMode="outline" themeColor="tertiary" rounded="medium">
-                    <Icon className="k-badge-icon" icon="plus-circle"></Icon>
-                </Badge>
+                <IconBadge fillMode="outline" size="small" rounded="small"/>
             </span>
             <span>
-                <Badge fillMode="outline" themeColor="tertiary" rounded="full">
-                    <Icon className="k-badge-icon" icon="plus-circle"></Icon>
-                </Badge>
+                <IconBadge fillMode="outline" size="small" rounded="full"/>
             </span>
             <span>
-                <Badge fillMode="outline" themeColor="tertiary" rounded="full">
-                    <Icon className="k-badge-icon" icon="plus-circle"></Icon>
-                </Badge>
+                <IconBadge fillMode="outline" size="small" rounded="full"/>
             </span>
 
-
-            <span>Large</span>
+            <span>Normal</span>
             <span>
-                <Badge size="large" themeColor="warning">99</Badge>
+                <Badge fillMode="outline" themeColor="tertiary">99</Badge>
             </span>
             <span>
-                <Badge size="large" themeColor="warning">
-                    <Icon className="k-badge-icon" icon="bell"></Icon>
-                </Badge>
+                <IconBadge fillMode="outline" themeColor="tertiary">
+                    <Icon className="k-badge-icon" icon="plus-circle"></Icon>
+                </IconBadge>
             </span>
             <span>
-                <Badge size="large" themeColor="warning" rounded="large">
-                    <Icon className="k-badge-icon" icon="bell"></Icon>
-                </Badge>
+                <IconBadge fillMode="outline" themeColor="tertiary" rounded="medium">
+                    <Icon className="k-badge-icon" icon="plus-circle"></Icon>
+                </IconBadge>
             </span>
             <span>
-                <Badge size="large" themeColor="warning" rounded="full">
-                    <Icon className="k-badge-icon" icon="bell"></Icon>
-                </Badge>
+                <IconBadge fillMode="outline" themeColor="tertiary" rounded="full">
+                    <Icon className="k-badge-icon" icon="plus-circle"></Icon>
+                </IconBadge>
             </span>
             <span>
-                <Badge size="large" themeColor="warning" rounded="full">
-                    <Icon className="k-badge-icon" icon="bell"></Icon>
-                </Badge>
+                <IconBadge fillMode="outline" themeColor="tertiary" rounded="full">
+                    <Icon className="k-badge-icon" icon="plus-circle"></Icon>
+                </IconBadge>
             </span>
 
-            <span>^ outline</span>
+
+            <span>Large</span>
             <span>
                 <Badge size="large" fillMode="outline" themeColor="error">99</Badge>
             </span>
             <span>
-                <Badge size="large" fillMode="outline" themeColor="error">
-                    <Icon className="k-badge-icon" icon="x-circle"></Icon>
-                </Badge>
+                <IconBadge size="large" fillMode="outline" themeColor="error"/>
             </span>
             <span>
-                <Badge size="large" fillMode="outline" themeColor="error" rounded="large">
-                    <Icon className="k-badge-icon" icon="x-circle"></Icon>
-                </Badge>
+                <IconBadge size="large" fillMode="outline" themeColor="error" rounded="large"/>
             </span>
             <span>
-                <Badge size="large" fillMode="outline" themeColor="error" rounded="full">
-                    <Icon className="k-badge-icon" icon="x-circle"></Icon>
-                </Badge>
+                <IconBadge size="large" fillMode="outline" themeColor="error" rounded="full"/>
             </span>
             <span>
-                <Badge size="large" fillMode="outline" themeColor="error" rounded="full">
-                    <Icon className="k-badge-icon" icon="x-circle"></Icon>
-                </Badge>
+                <IconBadge size="large" fillMode="outline" themeColor="error" rounded="full"/>
             </span>
 
-
-            <span></span>
-            <span>Rectangle</span>
-            <span>Rounded</span>
-            <span>Pill</span>
-            <span>Circle</span>
-            <span>Dot</span>
-
-
-            <span>Inline</span>
-            <div className="k-badge-container">
-                <Badge cutoutBorder>Rect</Badge>
-            </div>
-            <div className="k-badge-container">
-                <Badge rounded="medium" cutoutBorder>Round</Badge>
-            </div>
-            <div className="k-badge-container">
-                <Badge rounded="full" cutoutBorder>Pill</Badge>
-            </div>
-            <div className="k-badge-container">
-                <Badge rounded="full" cutoutBorder>1</Badge>
-            </div>
-            <div className="k-badge-container">
-                <Badge rounded="full" cutoutBorder></Badge>
-            </div>
-
-            <span>Edge</span>
-            <div className="k-badge-container">
-                <Badge position="edge" align="top-end" cutoutBorder>Rect</Badge>
-            </div>
-            <div className="k-badge-container">
-                <Badge rounded="medium" position="edge" align="top-end" cutoutBorder>Round</Badge>
-            </div>
-            <div className="k-badge-container">
-                <Badge rounded="full" position="edge" align="top-end" cutoutBorder>Pill</Badge>
-            </div>
-            <div className="k-badge-container">
-                <Badge rounded="full" position="edge" align="top-end" cutoutBorder>1</Badge>
-            </div>
-            <div className="k-badge-container">
-                <Badge rounded="full" position="edge" align="top-end" cutoutBorder></Badge>
-            </div>
-
         </div>
     </>
 );

package/src/badge/tests/badge-outline.tsx

@@ -0,0 +1,29 @@
+import { Badge, BadgeNormal } from '../../badge';
+
+export default () =>(
+    <>
+        <div id="test-area" className="k-d-grid k-grid-cols-9">
+
+            <span></span>
+            <span className="col-2">Rectangle</span>
+            <span className="col-2">Rounded</span>
+            <span className="col-2">Pill</span>
+            <span className="col">Circle</span>
+            <span className="col">Dot</span>
+
+            {Badge.options.themeColor.map((color) => (
+                <>
+                    <span>{color}</span>
+                    <span><BadgeNormal fillMode="outline" themeColor={color}>Rectangle</BadgeNormal></span>
+                    <span><BadgeNormal fillMode="outline" themeColor={color}></BadgeNormal></span>
+                    <span><BadgeNormal fillMode="outline" themeColor={color} rounded="medium">Rounded</BadgeNormal></span>
+                    <span><BadgeNormal fillMode="outline" themeColor={color} rounded="medium"></BadgeNormal></span>
+                    <span><BadgeNormal fillMode="outline" themeColor={color} rounded="full">Pill</BadgeNormal></span>
+                    <span><BadgeNormal fillMode="outline" themeColor={color} rounded="full"></BadgeNormal></span>
+                    <span><BadgeNormal fillMode="outline" themeColor={color} rounded="full">1</BadgeNormal></span>
+                    <span><BadgeNormal fillMode="outline" themeColor={color} rounded="full"></BadgeNormal></span>
+                </>
+            ))}
+        </div>
+    </>
+);