@koine/react 1.0.8 → 1.0.9

package/Img/types.js

@@ -0,0 +1 @@
+export {};

package/Link/Link.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-export declare type KoineLinkProps = React.ComponentPropsWithRef<"a">;
-export declare const KoineLink: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof import("react").AnchorHTMLAttributes<HTMLAnchorElement>> & {
-    ref?: ((instance: HTMLAnchorElement | null) => void) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
-}, never>;
+/// <reference types="react" />
+export declare type KoineLinkProps = React.ComponentPropsWithRef<"a">;
+export declare const KoineLink: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof import("react").AnchorHTMLAttributes<HTMLAnchorElement>> & {
+    ref?: ((instance: HTMLAnchorElement | null) => void) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
+}, never>;

package/Link/LinkBlank.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-export declare type LinkBlankProps = React.ComponentPropsWithRef<"a">;
-export declare const LinkBlankA: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {
-    target: "_blank";
-    rel: "noopener";
-}, "rel" | "target">;
-export declare const LinkBlankIcon: import("styled-components").StyledComponent<import("react-icons/lib").IconType, import("styled-components").DefaultTheme, {}, never>;
-export declare const LinkBlank: React.FC<LinkBlankProps>;
+/// <reference types="react" />
+export declare type LinkBlankProps = React.ComponentPropsWithRef<"a">;
+export declare const LinkBlankA: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {
+    target: "_blank";
+    rel: "noopener";
+}, "target" | "rel">;
+export declare const LinkBlankIcon: import("styled-components").StyledComponent<import("react-icons/lib").IconType, import("styled-components").DefaultTheme, {}, never>;
+export declare const LinkBlank: ({ children, target, rel, ...props }: LinkBlankProps) => JSX.Element;

package/Link/LinkBlank.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import { MdLaunch as IconOutboundLink } from "react-icons/md";
@@ -22,7 +21,6 @@ export const LinkBlankIcon = styled(IconOutboundLink) `
     opacity: 0.8;
   }
 `;
-export const LinkBlank = (_a) => {
-    var { children, target, rel } = _a, props = __rest(_a, ["children", "target", "rel"]);
-    return (_jsxs(LinkBlankA, Object.assign({}, props, { children: [children, _jsx(LinkBlankIcon, {})] })));
+export const LinkBlank = ({ children, target, rel, ...props }) => {
+    return (_jsxs(LinkBlankA, { ...props, children: [children, _jsx(LinkBlankIcon, {})] }));
 };

package/Link/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./Link";
-export * from "./LinkBlank";
+export * from "./Link";
+export * from "./LinkBlank";

package/Link/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Link/index.js",
+  "types": "./index.d.ts"
+}

package/Menu/Menu.d.ts

@@ -1 +1 @@
-export declare const Menu: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const Menu: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;

package/Menu/index.d.ts

@@ -1 +1 @@
-export * from "./Menu";
+export * from "./Menu";

package/Menu/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Menu/index.js",
+  "types": "./index.d.ts"
+}

package/MenuItem/MenuItem.d.ts

@@ -1,4 +1,4 @@
-export declare const MenuItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
-    $active?: boolean | undefined;
-    disabled?: boolean | undefined;
-}, never>;
+export declare const MenuItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
+    $active?: boolean | undefined;
+    disabled?: boolean | undefined;
+}, never>;

package/MenuItem/index.d.ts

@@ -1 +1 @@
-export * from "./MenuItem";
+export * from "./MenuItem";

package/MenuItem/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/MenuItem/index.js",
+  "types": "./index.d.ts"
+}

package/Meta/Meta.d.ts

@@ -1,15 +1,14 @@
-/// <reference types="react" />
-export declare type MetaProps = {
-    /**
-     * Determines whether `user-scalable=0` is add to the `meta->viewport` content
-     *
-     * This is an opt in instead of the default browser behaviour as it helps prevent
-     * weird zooming on input fields on iPhone iOS devices.
-     * @see https://www.warrenchandler.com/2019/04/02/stop-iphones-from-zooming-in-on-form-fields/
-     * @see https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/
-     *
-     * @default false
-     */
-    zoom?: boolean;
-};
-export declare const Meta: ({ zoom }: MetaProps) => JSX.Element;
+export declare type MetaProps = {
+    /**
+     * Determines whether `user-scalable=0` is add to the `meta->viewport` content
+     *
+     * This is an opt in instead of the default browser behaviour as it helps prevent
+     * weird zooming on input fields on iPhone iOS devices.
+     * @see https://www.warrenchandler.com/2019/04/02/stop-iphones-from-zooming-in-on-form-fields/
+     * @see https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/
+     *
+     * @default false
+     */
+    zoom?: boolean;
+};
+export declare const Meta: ({ zoom }: MetaProps) => JSX.Element;

package/Meta/index.d.ts

@@ -1 +1 @@
-export * from "./Meta";
+export * from "./Meta";

package/Meta/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Meta/index.js",
+  "types": "./index.d.ts"
+}

package/NoJs/NoJs.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-export declare type NoJsProps = object;
-export declare const NoJs: (_props: NoJsProps) => JSX.Element;
+export declare type NoJsProps = object;
+export declare const NoJs: (_props: NoJsProps) => JSX.Element;

package/NoJs/index.d.ts

@@ -1 +1 @@
-export * from "./NoJs";
+export * from "./NoJs";

package/NoJs/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/NoJs/index.js",
+  "types": "./index.d.ts"
+}

package/Pagination/PaginationNav.d.ts

@@ -1,23 +1,22 @@
-/// <reference types="react" />
-import { KoineComponentProps, KoineComponent } from "../types";
-export declare type KoinePaginationNavProps = {
-    /** The total number of elements to paginate */
-    total: string | number;
-    /** The amount of items per page */
-    perPage: string | number;
-    /** The current page in the pagination */
-    currentPage: string | number;
-    /** Is the relative path of the url to prefix to the page number */
-    baseUrl?: string;
-    /**
-     * The number of pages to show as number (and not dots) around the currentPage
-     * @default 2
-     */
-    showOffset?: number;
-};
-declare type PaginationNavProps = KoineComponentProps<KoinePaginationNavProps, {
-    currentUrl?: string;
-    Link?: KoineComponent;
-}>;
-export declare const KoinePaginationNav: ({ total, perPage, currentPage, baseUrl, showOffset, Koine, }: PaginationNavProps) => JSX.Element | null;
-export {};
+import { KoineComponentProps, KoineComponent } from "../types";
+export declare type KoinePaginationNavProps = {
+    /** The total number of elements to paginate */
+    total: string | number;
+    /** The amount of items per page */
+    perPage: string | number;
+    /** The current page in the pagination */
+    currentPage: string | number;
+    /** Is the relative path of the url to prefix to the page number */
+    baseUrl?: string;
+    /**
+     * The number of pages to show as number (and not dots) around the currentPage
+     * @default 2
+     */
+    showOffset?: number;
+};
+declare type PaginationNavProps = KoineComponentProps<KoinePaginationNavProps, {
+    currentUrl?: string;
+    Link?: KoineComponent;
+}>;
+export declare const KoinePaginationNav: ({ total, perPage, currentPage, baseUrl, showOffset, currentUrl, Link, }: PaginationNavProps) => JSX.Element | null;
+export {};

package/Pagination/PaginationNav.js

@@ -45,11 +45,7 @@ const ItemNext = styled.a `
  * < 1 ... 75 76 [77] 78 >
  * < 1 ... 76 77 [78]
  */
-export const KoinePaginationNav = ({ total, perPage, currentPage, baseUrl, showOffset = 2, Koine = {
-    Link: "a",
-    currentUrl: "/",
-}, }) => {
-    const { Link, currentUrl } = Koine;
+export const KoinePaginationNav = ({ total, perPage, currentPage, baseUrl, showOffset = 2, currentUrl = "/", Link = "a", }) => {
     total = ensureInt(total);
     currentPage = ensureInt(currentPage);
     perPage = ensureInt(perPage);
@@ -83,5 +79,5 @@ export const KoinePaginationNav = ({ total, perPage, currentPage, baseUrl, showO
     }
     const prevDots = pages[0] > firstPage + 1;
     const nextDots = pages[pages.length - 1] < lastPage - 1;
-    return (_jsxs(Root, { children: [prevArrow && (_jsx(ItemPrev, Object.assign({ as: Link, href: `${baseUrl}/${prevPage}` }, { children: _jsx(IconArrowLeft, {}) }))), firstPage !== currentPage && (_jsx(ItemLink, Object.assign({ as: Link, href: `${baseUrl}`, prev: true }, { children: firstPage }))), prevDots && _jsx(DotsSeparator, { children: "..." }), pages.map((page) => page === currentPage ? (_jsx(ItemCurrent, { children: page }, page)) : (_jsx(ItemLink, Object.assign({ as: Link, href: `${baseUrl}/${page}`, prev: page < currentPage, next: page > currentPage }, { children: page }), `pagination-${page}`))), nextDots && _jsx(DotsSeparator, { children: "..." }), lastPage !== currentPage && (_jsx(ItemLink, Object.assign({ as: Link, href: `${baseUrl}/${lastPage}`, next: true }, { children: lastPage }))), nextArrow && (_jsx(ItemNext, Object.assign({ as: Link, href: `${baseUrl}/${nextPage}` }, { children: _jsx(IconArrowRight, {}) })))] }));
+    return (_jsxs(Root, { children: [prevArrow && (_jsx(ItemPrev, { as: Link, href: `${baseUrl}/${prevPage}`, children: _jsx(IconArrowLeft, {}) })), firstPage !== currentPage && (_jsx(ItemLink, { as: Link, href: `${baseUrl}`, prev: true, children: firstPage })), prevDots && _jsx(DotsSeparator, { children: "..." }), pages.map((page) => page === currentPage ? (_jsx(ItemCurrent, { children: page }, page)) : (_jsx(ItemLink, { as: Link, href: `${baseUrl}/${page}`, prev: page < currentPage, next: page > currentPage, children: page }, `pagination-${page}`))), nextDots && _jsx(DotsSeparator, { children: "..." }), lastPage !== currentPage && (_jsx(ItemLink, { as: Link, href: `${baseUrl}/${lastPage}`, next: true, children: lastPage })), nextArrow && (_jsx(ItemNext, { as: Link, href: `${baseUrl}/${nextPage}`, children: _jsx(IconArrowRight, {}) }))] }));
 };

package/Pagination/PaginationResults.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare type PaginationResultsProps = unknown;
-export declare const PaginationResults: React.FC<PaginationResultsProps>;
+/// <reference types="react" />
+export declare type PaginationResultsProps = React.PropsWithChildren<unknown>;
+export declare const PaginationResults: ({ children }: PaginationResultsProps) => JSX.Element;

package/Pagination/PaginationResults.js

@@ -5,6 +5,6 @@ const Root = styled.div `
   // overflow: hidden;
 `;
 const Inner = styled(m.div) ``;
-export const PaginationResults = ({ children, }) => {
-    return (_jsx(AnimatePresence, Object.assign({ exitBeforeEnter: true, initial: true }, { children: _jsx(Root, { children: _jsx(Inner, Object.assign({ initial: { opacity: 0, x: -100 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 100 }, transition: { type: "linear", staggerChildren: 0.3 } }, { children: children })) }) })));
+export const PaginationResults = ({ children }) => {
+    return (_jsx(AnimatePresence, { exitBeforeEnter: true, initial: true, children: _jsx(Root, { children: _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/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./PaginationNav";
-export * from "./PaginationResults";
+export * from "./PaginationNav";
+export * from "./PaginationResults";

package/Pagination/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Pagination/index.js",
+  "types": "./index.d.ts"
+}

package/Pill/Pill.d.ts

@@ -1,5 +1,5 @@
-export declare 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 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>;

package/Pill/index.d.ts

@@ -1 +1 @@
-export * from "./Pill";
+export * from "./Pill";

package/Pill/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Pill/index.js",
+  "types": "./index.d.ts"
+}

package/Progress/ProgressCircular.d.ts

@@ -1,20 +1,19 @@
-/// <reference types="react" />
-import { CSSProperties } from "styled-components";
-import type { Theme } from "../styles/theme";
-export declare type ProgressCircularProps = {
-    /** @default "1em" */
-    size?: CSSProperties["width"];
-    /** @default 1 */
-    thickness: number;
-    /** @default "currentColor" */
-    color: keyof Theme | NonNullable<CSSProperties["color"]>;
-};
-/**
- * @see https://mui.com/components/progress/
- */
-export declare const ProgressCircular: ({ size, thickness, color, ...props }: {
-    [x: string]: any;
-    size?: string | undefined;
-    thickness?: number | undefined;
-    color?: string | undefined;
-}) => JSX.Element;
+import { CSSProperties } from "styled-components";
+import type { Theme } from "../styles/theme";
+export declare type ProgressCircularProps = {
+    /** @default "1em" */
+    size?: CSSProperties["width"];
+    /** @default 1 */
+    thickness: number;
+    /** @default "currentColor" */
+    color: keyof Theme | NonNullable<CSSProperties["color"]>;
+};
+/**
+ * @see https://mui.com/components/progress/
+ */
+export declare const ProgressCircular: ({ size, thickness, color, ...props }: {
+    [x: string]: any;
+    size?: string | undefined;
+    thickness?: number | undefined;
+    color?: string | undefined;
+}) => JSX.Element;

package/Progress/ProgressCircular.js

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

package/Progress/ProgressLinear.d.ts

@@ -1,23 +1,22 @@
-/// <reference types="react" />
-import { CSSProperties } from "styled-components";
-import type { Theme } from "../styles/theme";
-export declare type ProgressLinearProps = {
-    /** @default false */
-    done?: boolean;
-    /** @default "2px" */
-    height?: CSSProperties["height"];
-    /** @default "currentColor" */
-    bg: keyof Theme | NonNullable<CSSProperties["color"]>;
-    /** @default "currentColor" */
-    fg: keyof Theme | NonNullable<CSSProperties["color"]>;
-};
-/**
- * @see https://mui.com/components/progress/#linear
- */
-export declare const ProgressLinear: ({ done, height, bg, fg, ...props }: {
-    [x: string]: any;
-    done?: boolean | undefined;
-    height?: string | undefined;
-    bg?: string | undefined;
-    fg?: string | undefined;
-}) => JSX.Element;
+import { CSSProperties } from "styled-components";
+import type { Theme } from "../styles/theme";
+export declare type ProgressLinearProps = {
+    /** @default false */
+    done?: boolean;
+    /** @default "2px" */
+    height?: CSSProperties["height"];
+    /** @default "currentColor" */
+    bg: keyof Theme | NonNullable<CSSProperties["color"]>;
+    /** @default "currentColor" */
+    fg: keyof Theme | NonNullable<CSSProperties["color"]>;
+};
+/**
+ * @see https://mui.com/components/progress/#linear
+ */
+export declare const ProgressLinear: ({ done, height, bg, fg, ...props }: {
+    [x: string]: any;
+    done?: boolean | undefined;
+    height?: string | undefined;
+    bg?: string | undefined;
+    fg?: string | undefined;
+}) => JSX.Element;

package/Progress/ProgressLinear.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import { m } from "framer-motion";
@@ -18,9 +17,8 @@ const ProgressLinearFg = styled(m.span) `
 /**
  * @see https://mui.com/components/progress/#linear
  */
-export const ProgressLinear = (_a) => {
-    var { done = false, height = "2px", bg = "transparent", fg = "currentColor" } = _a, props = __rest(_a, ["done", "height", "bg", "fg"]);
-    return (_jsx(ProgressLinearBg, Object.assign({ style: { height, background: bg } }, props, { children: _jsx(ProgressLinearFg, { style: { height, background: fg }, initial: {
+export const ProgressLinear = ({ done = false, height = "2px", bg = "transparent", fg = "currentColor", ...props }) => {
+    return (_jsx(ProgressLinearBg, { style: { height, background: bg }, ...props, children: _jsx(ProgressLinearFg, { style: { height, background: fg }, initial: {
                 x: "-100%",
             }, animate: {
                 x: done ? "-100%" : "0%",
@@ -30,5 +28,5 @@ export const ProgressLinear = (_a) => {
                     repeat: Infinity,
                     repeatType: "reverse",
                     duration: 2,
-                } }) })));
+                } }) }));
 };

package/Progress/ProgressOverlay.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-export declare type ProgressOverlayProps = {
-    running: boolean;
-};
-export declare const ProgressOverlay: ({ running }: ProgressOverlayProps) => JSX.Element;
+export declare type ProgressOverlayProps = {
+    running?: boolean;
+};
+export declare const ProgressOverlay: ({ running }: ProgressOverlayProps) => JSX.Element;

package/Progress/ProgressOverlay.js

@@ -32,9 +32,9 @@ export const ProgressOverlay = ({ running }) => {
     useEffect(() => {
         document.body.style.cursor = running ? "wait" : "";
     }, [running]);
-    return (_jsxs(ProgressOverlayWrap, Object.assign({ animate: {
+    return (_jsxs(ProgressOverlayWrap, { animate: {
             opacity: running ? 1 : 0,
-        }, initial: { opacity: 0 }, transition: { type: "easeInOut" } }, { children: [_jsx(ProgressLinear, { bg: "var(--accent400)", fg: "var(--accent300)", done: !running }), _jsx(ProgressOverlayCenterer, Object.assign({ style: {
+        }, initial: { opacity: 0 }, transition: { type: "easeInOut" }, children: [_jsx(ProgressLinear, { bg: "var(--accent400)", fg: "var(--accent300)", done: !running }), _jsx(ProgressOverlayCenterer, { style: {
                     top: headerHeight + "px",
-                } }, { children: _jsx(ProgressCircular, { size: "50px", color: "var(--accent300)" }) }))] })));
+                }, children: _jsx(ProgressCircular, { size: "50px", color: "var(--accent300)" }) })] }));
 };

package/Progress/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./ProgressCircular";
-export * from "./ProgressLinear";
-export * from "./ProgressOverlay";
+export * from "./ProgressCircular";
+export * from "./ProgressLinear";
+export * from "./ProgressOverlay";

package/Progress/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Progress/index.js",
+  "types": "./index.d.ts"
+}

package/Rating/Rating.d.ts

@@ -1,35 +1,35 @@
-/// <reference types="react" />
-export declare type RatingStarProps = React.ComponentPropsWithoutRef<"svg"> & RatingStarModel & {
-    /** @default 16 */
-    size?: number;
-    /** Between 0 and 1 */
-    value: number;
-    /** @default "#FFD84C" */
-    colorBg?: React.CSSProperties["color"];
-    /** @default "#947813" */
-    colorStroke?: React.CSSProperties["color"];
-};
-export declare const RatingStarRoot: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {}, never>;
-export declare const RatingStar: ({ value, colorBg, colorStroke, size, ...props }: RatingStarProps) => 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 type RatingStarModel = {
-    value: number;
-    idx?: number;
-    dataIdx?: number;
-};
-export declare type RatingProps = {
-    /** @default 0 */
-    value: number;
-    count?: number;
-    /** @default 0 */
-    min?: number;
-    /** @default 5 */
-    max?: number;
-    /** @default true */
-    showDetails?: boolean;
-    starSize?: RatingStarProps["size"];
-} & Pick<RatingStarProps, "colorBg" | "colorStroke">;
-export declare const Rating: ({ value, count, min, max, showDetails, colorBg, colorStroke, starSize, }: RatingProps) => JSX.Element;
+/// <reference types="react" />
+export declare type RatingStarProps = React.ComponentPropsWithoutRef<"svg"> & RatingStarModel & {
+    /** @default 16 */
+    size?: number;
+    /** Between 0 and 1 */
+    value: number;
+    /** @default "#FFD84C" */
+    colorBg?: React.CSSProperties["color"];
+    /** @default "#947813" */
+    colorStroke?: React.CSSProperties["color"];
+};
+export declare const RatingStarRoot: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {}, never>;
+export declare const RatingStar: ({ value, colorBg, colorStroke, size, ...props }: RatingStarProps) => 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 type RatingStarModel = {
+    value: number;
+    idx?: number;
+    dataIdx?: number;
+};
+export declare type RatingProps = {
+    /** @default 0 */
+    value: number;
+    count?: number;
+    /** @default 0 */
+    min?: number;
+    /** @default 5 */
+    max?: number;
+    /** @default true */
+    showDetails?: boolean;
+    starSize?: RatingStarProps["size"];
+} & Pick<RatingStarProps, "colorBg" | "colorStroke">;
+export declare const Rating: ({ value, count, min, max, showDetails, colorBg, colorStroke, starSize, }: RatingProps) => JSX.Element;