@koine/react 2.0.0-beta.5 → 2.0.0-beta.7

package/Pagination/PaginationNav.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CgArrowLeftR as IconArrowLeft, CgArrowRightR as IconArrowRight } from "react-icons/cg";
 import styled from "styled-components";
 import ensureInt from "@koine/utils/ensureInt";
@@ -77,27 +78,45 @@ const ItemNext = styled.a`
     }
     const prevDots = pages[0] > firstPage + 1;
     const nextDots = pages[pages.length - 1] < lastPage - 1;
-    return /*#__PURE__*/ React.createElement(Root, null, prevArrow && /*#__PURE__*/ React.createElement(ItemPrev, {
-        as: Link,
-        href: `${baseUrl}/${prevPage}`
-    }, /*#__PURE__*/ React.createElement(IconArrowLeft, null)), firstPage !== currentPage && /*#__PURE__*/ React.createElement(ItemLink, {
-        as: Link,
-        href: `${baseUrl}`,
-        prev: true
-    }, firstPage), prevDots && /*#__PURE__*/ React.createElement(DotsSeparator, null, "..."), pages.map((page)=>page === currentPage ? /*#__PURE__*/ React.createElement(ItemCurrent, {
-            key: page
-        }, page) : /*#__PURE__*/ React.createElement(ItemLink, {
-            key: `pagination-${page}`,
-            as: Link,
-            href: `${baseUrl}/${page}`,
-            prev: page < currentPage,
-            next: page > currentPage
-        }, page)), nextDots && /*#__PURE__*/ React.createElement(DotsSeparator, null, "..."), lastPage !== currentPage && /*#__PURE__*/ React.createElement(ItemLink, {
-        as: Link,
-        href: `${baseUrl}/${lastPage}`,
-        next: true
-    }, lastPage), nextArrow && /*#__PURE__*/ React.createElement(ItemNext, {
-        as: Link,
-        href: `${baseUrl}/${nextPage}`
-    }, /*#__PURE__*/ React.createElement(IconArrowRight, null)));
+    return /*#__PURE__*/ _jsxs(Root, {
+        children: [
+            prevArrow && /*#__PURE__*/ _jsx(ItemPrev, {
+                as: Link,
+                href: `${baseUrl}/${prevPage}`,
+                children: /*#__PURE__*/ _jsx(IconArrowLeft, {})
+            }),
+            firstPage !== currentPage && /*#__PURE__*/ _jsx(ItemLink, {
+                as: Link,
+                href: `${baseUrl}`,
+                prev: true,
+                children: firstPage
+            }),
+            prevDots && /*#__PURE__*/ _jsx(DotsSeparator, {
+                children: "..."
+            }),
+            pages.map((page)=>page === currentPage ? /*#__PURE__*/ _jsx(ItemCurrent, {
+                    children: page
+                }, page) : /*#__PURE__*/ _jsx(ItemLink, {
+                    as: Link,
+                    href: `${baseUrl}/${page}`,
+                    prev: page < currentPage,
+                    next: page > currentPage,
+                    children: page
+                }, `pagination-${page}`)),
+            nextDots && /*#__PURE__*/ _jsx(DotsSeparator, {
+                children: "..."
+            }),
+            lastPage !== currentPage && /*#__PURE__*/ _jsx(ItemLink, {
+                as: Link,
+                href: `${baseUrl}/${lastPage}`,
+                next: true,
+                children: lastPage
+            }),
+            nextArrow && /*#__PURE__*/ _jsx(ItemNext, {
+                as: Link,
+                href: `${baseUrl}/${nextPage}`,
+                children: /*#__PURE__*/ _jsx(IconArrowRight, {})
+            })
+        ]
+    });
 };

package/Pagination/PaginationResults.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "PaginationResults", {
     }
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
 const _framermotion = require("framer-motion");
 const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
 const Root = _styledcomponents.default.div`
@@ -16,25 +17,29 @@ const Root = _styledcomponents.default.div`
 `;
 const Inner = (0, _styledcomponents.default)(_framermotion.m.div)``;
 const PaginationResults = ({ children })=>{
-    return /*#__PURE__*/ React.createElement(_framermotion.AnimatePresence, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_framermotion.AnimatePresence, {
         exitBeforeEnter: true,
-        initial: true
-    }, /*#__PURE__*/ React.createElement(Root, null, /*#__PURE__*/ React.createElement(Inner, {
-        initial: {
-            opacity: 0,
-            x: -100
-        },
-        animate: {
-            opacity: 1,
-            x: 0
-        },
-        exit: {
-            opacity: 0,
-            x: 100
-        },
-        transition: {
-            type: "linear",
-            staggerChildren: 0.3
-        }
-    }, children)));
+        initial: true,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Root, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Inner, {
+                initial: {
+                    opacity: 0,
+                    x: -100
+                },
+                animate: {
+                    opacity: 1,
+                    x: 0
+                },
+                exit: {
+                    opacity: 0,
+                    x: 100
+                },
+                transition: {
+                    type: "linear",
+                    staggerChildren: 0.3
+                },
+                children: children
+            })
+        })
+    });
 };

package/Pagination/PaginationResults.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { AnimatePresence, m } from "framer-motion";
 import styled from "styled-components";
 const Root = styled.div`
@@ -5,25 +6,29 @@ const Root = styled.div`
 `;
 const Inner = styled(m.div)``;
 export const PaginationResults = ({ children })=>{
-    return /*#__PURE__*/ React.createElement(AnimatePresence, {
+    return /*#__PURE__*/ _jsx(AnimatePresence, {
         exitBeforeEnter: true,
-        initial: true
-    }, /*#__PURE__*/ React.createElement(Root, null, /*#__PURE__*/ React.createElement(Inner, {
-        initial: {
-            opacity: 0,
-            x: -100
-        },
-        animate: {
-            opacity: 1,
-            x: 0
-        },
-        exit: {
-            opacity: 0,
-            x: 100
-        },
-        transition: {
-            type: "linear",
-            staggerChildren: 0.3
-        }
-    }, children)));
+        initial: true,
+        children: /*#__PURE__*/ _jsx(Root, {
+            children: /*#__PURE__*/ _jsx(Inner, {
+                initial: {
+                    opacity: 0,
+                    x: -100
+                },
+                animate: {
+                    opacity: 1,
+                    x: 0
+                },
+                exit: {
+                    opacity: 0,
+                    x: 100
+                },
+                transition: {
+                    type: "linear",
+                    staggerChildren: 0.3
+                },
+                children: children
+            })
+        })
+    });
 };

package/Pill/Pill.d.ts

@@ -1,5 +1,5 @@
 export type PillProps = object;
-export declare const Pill: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, object, never>;
-export declare const PillGreyLight: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, object, never>;
-export declare const PillAccentLight: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, object, never>;
-export declare const PillAccentLightOutlined: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, object, never>;
+export declare const Pill: any;
+export declare const PillGreyLight: any;
+export declare const PillAccentLight: any;
+export declare const PillAccentLightOutlined: any;

package/Progress/ProgressCircular.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "ProgressCircular", {
     }
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _jsxruntime = require("react/jsx-runtime");
 const _styledcomponents = /*#__PURE__*/ _interop_require_wildcard._(require("styled-components"));
 const animationRotation = (0, _styledcomponents.keyframes)`
   0% {
@@ -39,22 +40,23 @@ const ProgressCircularCircle = _styledcomponents.default.circle`
   animation: ${animationCircle} 1.5s linear infinite;
 `;
 const ProgressCircular = ({ size = "1em", thickness = 1, color = "currentColor", ...props })=>{
-    return /*#__PURE__*/ React.createElement(ProgressCircularSvg, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(ProgressCircularSvg, {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 44 44",
         style: {
             width: size,
             height: size
         },
-        ...props
-    }, /*#__PURE__*/ React.createElement(ProgressCircularCircle, {
-        cx: "22",
-        cy: "22",
-        r: "20",
-        fill: "none",
-        strokeWidth: thickness,
-        style: {
-            stroke: color
-        }
-    }));
+        ...props,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(ProgressCircularCircle, {
+            cx: "22",
+            cy: "22",
+            r: "20",
+            fill: "none",
+            strokeWidth: thickness,
+            style: {
+                stroke: color
+            }
+        })
+    });
 };

package/Progress/ProgressCircular.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import styled, { keyframes } from "styled-components";
 const animationRotation = keyframes`
   0% {
@@ -30,22 +31,23 @@ const ProgressCircularCircle = styled.circle`
 /**
  * @see https://mui.com/components/progress/
  */ export const ProgressCircular = ({ size = "1em", thickness = 1, color = "currentColor", ...props })=>{
-    return /*#__PURE__*/ React.createElement(ProgressCircularSvg, {
+    return /*#__PURE__*/ _jsx(ProgressCircularSvg, {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 44 44",
         style: {
             width: size,
             height: size
         },
-        ...props
-    }, /*#__PURE__*/ React.createElement(ProgressCircularCircle, {
-        cx: "22",
-        cy: "22",
-        r: "20",
-        fill: "none",
-        strokeWidth: thickness,
-        style: {
-            stroke: color
-        }
-    }));
+        ...props,
+        children: /*#__PURE__*/ _jsx(ProgressCircularCircle, {
+            cx: "22",
+            cy: "22",
+            r: "20",
+            fill: "none",
+            strokeWidth: thickness,
+            style: {
+                stroke: color
+            }
+        })
+    });
 };

package/Progress/ProgressLinear.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "ProgressLinear", {
     }
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
 const _framermotion = require("framer-motion");
 const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
 const ProgressLinearBg = _styledcomponents.default.span`
@@ -25,27 +26,28 @@ const ProgressLinearFg = (0, _styledcomponents.default)(_framermotion.m.span)`
   width: 100%;
 `;
 const ProgressLinear = ({ done = false, height = "2px", bg = "transparent", fg = "currentColor", ...props })=>{
-    return /*#__PURE__*/ React.createElement(ProgressLinearBg, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(ProgressLinearBg, {
         style: {
             height,
             background: bg
         },
-        ...props
-    }, /*#__PURE__*/ React.createElement(ProgressLinearFg, {
-        style: {
-            height,
-            background: fg
-        },
-        initial: {
-            x: "-100%"
-        },
-        animate: {
-            x: done ? "-100%" : "0%"
-        },
-        transition: done ? {} : {
-            repeat: Infinity,
-            repeatType: "reverse",
-            duration: 2
-        }
-    }));
+        ...props,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(ProgressLinearFg, {
+            style: {
+                height,
+                background: fg
+            },
+            initial: {
+                x: "-100%"
+            },
+            animate: {
+                x: done ? "-100%" : "0%"
+            },
+            transition: done ? {} : {
+                repeat: Infinity,
+                repeatType: "reverse",
+                duration: 2
+            }
+        })
+    });
 };

package/Progress/ProgressLinear.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { m } from "framer-motion";
 import styled from "styled-components";
 const ProgressLinearBg = styled.span`
@@ -16,27 +17,28 @@ const ProgressLinearFg = styled(m.span)`
 /**
  * @see https://mui.com/components/progress/#linear
  */ export const ProgressLinear = ({ done = false, height = "2px", bg = "transparent", fg = "currentColor", ...props })=>{
-    return /*#__PURE__*/ React.createElement(ProgressLinearBg, {
+    return /*#__PURE__*/ _jsx(ProgressLinearBg, {
         style: {
             height,
             background: bg
         },
-        ...props
-    }, /*#__PURE__*/ React.createElement(ProgressLinearFg, {
-        style: {
-            height,
-            background: fg
-        },
-        initial: {
-            x: "-100%"
-        },
-        animate: {
-            x: done ? "-100%" : "0%"
-        },
-        transition: done ? {} : {
-            repeat: Infinity,
-            repeatType: "reverse",
-            duration: 2
-        }
-    }));
+        ...props,
+        children: /*#__PURE__*/ _jsx(ProgressLinearFg, {
+            style: {
+                height,
+                background: fg
+            },
+            initial: {
+                x: "-100%"
+            },
+            animate: {
+                x: done ? "-100%" : "0%"
+            },
+            transition: done ? {} : {
+                repeat: Infinity,
+                repeatType: "reverse",
+                duration: 2
+            }
+        })
+    });
 };

package/Progress/ProgressOverlay.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "ProgressOverlay", {
     }
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
 const _framermotion = require("framer-motion");
 const _react = require("react");
 const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
@@ -44,7 +45,7 @@ const ProgressOverlay = ({ running })=>{
     }, [
         running
     ]);
-    return /*#__PURE__*/ React.createElement(ProgressOverlayWrap, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(ProgressOverlayWrap, {
         animate: {
             opacity: running ? 1 : 0
         },
@@ -53,17 +54,22 @@ const ProgressOverlay = ({ running })=>{
         },
         transition: {
             type: "easeInOut"
-        }
-    }, /*#__PURE__*/ React.createElement(_ProgressLinear.ProgressLinear, {
-        bg: "var(--accent400)",
-        fg: "var(--accent300)",
-        done: !running
-    }), /*#__PURE__*/ React.createElement(ProgressOverlayCenterer, {
-        style: {
-            top: headerHeight + "px"
-        }
-    }, /*#__PURE__*/ React.createElement(_ProgressCircular.ProgressCircular, {
-        size: "50px",
-        color: "var(--accent300)"
-    })));
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_ProgressLinear.ProgressLinear, {
+                bg: "var(--accent400)",
+                fg: "var(--accent300)",
+                done: !running
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(ProgressOverlayCenterer, {
+                style: {
+                    top: headerHeight + "px"
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ProgressCircular.ProgressCircular, {
+                    size: "50px",
+                    color: "var(--accent300)"
+                })
+            })
+        ]
+    });
 };

package/Progress/ProgressOverlay.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { m } from "framer-motion";
 import { useEffect } from "react";
 import styled from "styled-components";
@@ -33,7 +34,7 @@ export const ProgressOverlay = ({ running })=>{
     }, [
         running
     ]);
-    return /*#__PURE__*/ React.createElement(ProgressOverlayWrap, {
+    return /*#__PURE__*/ _jsxs(ProgressOverlayWrap, {
         animate: {
             opacity: running ? 1 : 0
         },
@@ -42,17 +43,22 @@ export const ProgressOverlay = ({ running })=>{
         },
         transition: {
             type: "easeInOut"
-        }
-    }, /*#__PURE__*/ React.createElement(ProgressLinear, {
-        bg: "var(--accent400)",
-        fg: "var(--accent300)",
-        done: !running
-    }), /*#__PURE__*/ React.createElement(ProgressOverlayCenterer, {
-        style: {
-            top: headerHeight + "px"
-        }
-    }, /*#__PURE__*/ React.createElement(ProgressCircular, {
-        size: "50px",
-        color: "var(--accent300)"
-    })));
+        },
+        children: [
+            /*#__PURE__*/ _jsx(ProgressLinear, {
+                bg: "var(--accent400)",
+                fg: "var(--accent300)",
+                done: !running
+            }),
+            /*#__PURE__*/ _jsx(ProgressOverlayCenterer, {
+                style: {
+                    top: headerHeight + "px"
+                },
+                children: /*#__PURE__*/ _jsx(ProgressCircular, {
+                    size: "50px",
+                    color: "var(--accent300)"
+                })
+            })
+        ]
+    });
 };

package/Rating/Rating.d.ts

@@ -9,12 +9,12 @@ export type RatingStarProps = React.ComponentPropsWithoutRef<"svg"> & RatingStar
     /** @default "#947813" */
     colorStroke?: React.CSSProperties["color"];
 };
-export declare const RatingStarRoot: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {}, never>;
+export declare const RatingStarRoot: any;
 export declare const RatingStar: ({ value, colorBg, colorStroke, size, ...props }: RatingStarProps) => import("react/jsx-runtime").JSX.Element;
-export declare const RatingDetails: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const RatingCount: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const RatingValue: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const RatingRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const RatingDetails: any;
+export declare const RatingCount: any;
+export declare const RatingValue: any;
+export declare const RatingRoot: any;
 export type RatingStarModel = {
     value: number;
     idx?: number;

package/Rating/Rating.js

@@ -32,6 +32,7 @@ _export(exports, {
     }
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
 const RatingStarRoot = _styledcomponents.default.svg`
@@ -41,33 +42,44 @@ const RatingStarRoot = _styledcomponents.default.svg`
 `;
 const RatingStar = ({ value, colorBg = "#FFD84C", colorStroke = "#947813", size, ...props })=>{
     const id = (0, _react.useId)();
-    return /*#__PURE__*/ React.createElement(RatingStarRoot, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(RatingStarRoot, {
         viewBox: "0 0 16 16",
         "data-value": value,
         width: size + "px",
         height: size + "px",
-        ...props
-    }, /*#__PURE__*/ React.createElement("defs", null, /*#__PURE__*/ React.createElement("linearGradient", {
-        id: id,
-        x1: "0",
-        y1: "0",
-        x2: "1",
-        y2: "0"
-    }, /*#__PURE__*/ React.createElement("stop", {
-        offset: "0",
-        stopColor: colorBg
-    }), /*#__PURE__*/ React.createElement("stop", {
-        offset: value,
-        stopColor: colorBg
-    }), /*#__PURE__*/ React.createElement("stop", {
-        offset: value,
-        stopColor: "rgba(255, 255, 255, 0)"
-    }))), /*#__PURE__*/ React.createElement("path", {
-        stroke: colorStroke,
-        strokeWidth: "0.5",
-        fill: `url(#${id})`,
-        d: "M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
-    }));
+        ...props,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("defs", {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("linearGradient", {
+                    id: id,
+                    x1: "0",
+                    y1: "0",
+                    x2: "1",
+                    y2: "0",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("stop", {
+                            offset: "0",
+                            stopColor: colorBg
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("stop", {
+                            offset: value,
+                            stopColor: colorBg
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("stop", {
+                            offset: value,
+                            stopColor: "rgba(255, 255, 255, 0)"
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
+                stroke: colorStroke,
+                strokeWidth: "0.5",
+                fill: `url(#${id})`,
+                d: "M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
+            })
+        ]
+    });
 };
 const RatingDetails = _styledcomponents.default.span`
   padding-left: 0.5em;
@@ -147,16 +159,30 @@ const Rating = ({ value = 0, count, min = 0, max = 5, showDetails = true, colorB
     //     onChange(value);
     //   }
     // }, [onChange];
-    return /*#__PURE__*/ React.createElement(RatingRoot, null, stars.map((star, idx)=>/*#__PURE__*/ React.createElement(RatingStar, {
-            key: id + idx,
-            idx: idx,
-            dataIdx: idx,
-            size: starSize,
-            // onMouseOver={handleMouseOver}
-            // onMouseLeave={handleMouseLeave}
-            // onClick={handleClick}
-            value: star.value,
-            colorBg: colorBg,
-            colorStroke: colorStroke
-        })), " ", showDetails && count && /*#__PURE__*/ React.createElement(RatingDetails, null, /*#__PURE__*/ React.createElement(RatingCount, null, count), /*#__PURE__*/ React.createElement(RatingValue, null, ` - ${value}`)));
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(RatingRoot, {
+        children: [
+            stars.map((star, idx)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(RatingStar, {
+                    idx: idx,
+                    dataIdx: idx,
+                    size: starSize,
+                    // onMouseOver={handleMouseOver}
+                    // onMouseLeave={handleMouseLeave}
+                    // onClick={handleClick}
+                    value: star.value,
+                    colorBg: colorBg,
+                    colorStroke: colorStroke
+                }, id + idx)),
+            " ",
+            showDetails && count && /*#__PURE__*/ (0, _jsxruntime.jsxs)(RatingDetails, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(RatingCount, {
+                        children: count
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(RatingValue, {
+                        children: ` - ${value}`
+                    })
+                ]
+            })
+        ]
+    });
 };