@ringcentral/spring-ui 1.11.2 → 1.13.0

package/Radio.js

@@ -1,37 +1,81 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { useSwitch } from '@mui/base';
-import { useClasses } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { u as useFormLabel } from './chunks/FormLabel.js';
-import { u as useRadioGroup } from './chunks/RadioGroup.context.js';
-
-var Radio$1 = {"sui-radio-root":"sui-radio-root","sui-focus-visible":"sui-focus-visible","sui-disabled":"sui-disabled","sui-radio-input":"sui-radio-input","sui-radio-dot":"sui-radio-dot","sui-checked":"sui-checked"};
-
-const Radio = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'Radio' });
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useSwitch } from "@mui/base";
+import { useClasses } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { useFormLabel } from "./FormLabel.js";
+import { useRadioGroup } from "./chunks/9551.js";
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var Radio = ({"sui-radio-root":"sui-radio-root","sui-focus-visible":"sui-focus-visible","sui-disabled":"sui-disabled","sui-radio-input":"sui-radio-input","sui-radio-dot":"sui-radio-dot","sui-checked":"sui-checked"});
+
+
+
+
+
+
+
+
+const Radio_Radio = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'Radio'
+    });
     const { name = '', classes, inputRef, rootProps, inputProps, disabled: disabledProp, className: rootClass, ...rest } = props;
     const cls = useClasses('radio', classes, rootClass);
     const { disabled, id, value } = useFormLabel({
         value: rest.value,
         id: inputProps?.id,
-        disabled: disabledProp,
+        disabled: disabledProp
     });
     const { focusVisible, getInputProps, checked } = useSwitch({
         ...rest,
-        disabled,
+        disabled
     });
     const { onChange, ...inputRest } = getInputProps({
         role: undefined,
-        ...inputProps,
+        ...inputProps
+    });
+    const context = useRadioGroup({
+        name,
+        value,
+        checked,
+        onChange
     });
-    const context = useRadioGroup({ name, value, checked, onChange });
-    return (jsxs("div", { ...rootProps, ref: ref, className: cls('root', {
+    return /*#__PURE__*/ jsxs("div", {
+        ...rootProps,
+        ref: ref,
+        className: cls('root', {
             disabled,
             focusVisible,
-            checked: context.checked,
-        }), children: [jsx("span", { className: cls('dot') }), jsx("input", { ...inputRest, ...context, id: id, type: "radio", ref: inputRef, value: value, className: cls('input') })] }));
+            checked: context.checked
+        }),
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: cls('dot')
+            }),
+            /*#__PURE__*/ jsx("input", {
+                ...inputRest,
+                ...context,
+                id: id,
+                type: "radio",
+                ref: inputRef,
+                value: value,
+                className: cls('input')
+            })
+        ]
+    });
 });
-Radio.displayName = 'SuiRadio';
+Radio_Radio.displayName = 'SuiRadio';
+
+
+
+
+
 
-export { Radio, Radio$1 as radioStyle };
+export { Radio as radioStyle, Radio_Radio as Radio };

package/RadioGroup.js

@@ -1,29 +1,68 @@
-import { R as RadioGroupContext, c as callbacksInSeries } from './chunks/RadioGroup.context.js';
-export { u as useRadioGroup } from './chunks/RadioGroup.context.js';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useMemo } from 'react';
-import { useControlled, useClasses } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { useClasses, useControlled } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { callbacksInSeries, RadioGroupContext } from "./chunks/9551.js";
 
-var RadioGroup$1 = {"sui-radio-group-root":"sui-radio-group-root","sui-radio-group-row":"sui-radio-group-row"};
 
-const RadioGroup = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'RadioGroup' });
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var RadioGroup = ({"sui-radio-group-root":"sui-radio-group-root","sui-radio-group-row":"sui-radio-group-row"});
+
+
+
+
+
+
+const RadioGroup_RadioGroup = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'RadioGroup'
+    });
     const { row, classes, className, children, value: controlled, name, defaultValue, onChange, ...rest } = props;
     const [value, setValue] = useControlled({
         name,
         controlled,
-        default: defaultValue,
+        default: defaultValue
     });
-    const radioGroupContext = useMemo(() => {
-        const handleChange = callbacksInSeries(onChange, (e) => {
+    const radioGroupContext = useMemo(()=>{
+        const handleChange = callbacksInSeries(onChange, (e)=>{
             setValue(e.target.value);
         });
-        return { name, value, onChange: handleChange };
-    }, [name, value, setValue, onChange]);
+        return {
+            name,
+            value,
+            onChange: handleChange
+        };
+    }, [
+        name,
+        value,
+        setValue,
+        onChange
+    ]);
     const cls = useClasses('radio-group', classes, className);
-    return (jsx("div", { ...rest, ref: ref, role: "radiogroup", className: cls('root', { row }), children: jsx(RadioGroupContext.Provider, { value: radioGroupContext, children: children }) }));
+    return /*#__PURE__*/ jsx("div", {
+        ...rest,
+        ref: ref,
+        role: "radiogroup",
+        className: cls('root', {
+            row
+        }),
+        children: /*#__PURE__*/ jsx(RadioGroupContext.Provider, {
+            value: radioGroupContext,
+            children: children
+        })
+    });
 });
-RadioGroup.displayName = 'SuiRadioGroup';
+RadioGroup_RadioGroup.displayName = 'SuiRadioGroup';
+
+
+
+
+
+
 
-export { RadioGroup, RadioGroupContext, callbacksInSeries, RadioGroup$1 as radioGroupStyle };
+export { RadioGroup as radioGroupStyle, RadioGroup_RadioGroup as RadioGroup };
+export { RadioGroupContext, callbacksInSeries, useRadioGroup } from "./chunks/9551.js";

package/Rating.js

@@ -1,11 +1,25 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { forwardRef, cloneElement, useState, useRef, useMemo } from 'react';
-import clamp from 'lodash/clamp';
-import { useId, useClasses, useControlled, useIsFocusVisible, useForkRef } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { S as Squircle } from './chunks/Squircle.js';
-import { StarFilledMd, StarMd } from '@ringcentral/spring-icon';
-import { I as Icon } from './chunks/Icon.js';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cloneElement, forwardRef, useMemo, useRef, useState } from "react";
+import clamp from "lodash/clamp";
+import { useClasses, useControlled, useForkRef, useId, useIsFocusVisible } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { StarFilledMd, StarMd } from "@ringcentral/spring-icon";
+import { Icon as Icon_Icon } from "./chunks/8307.js";
+import "./Squircle.js";
+import { Squircle as Squircle_Squircle } from "./chunks/1250.js";
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 function getDecimalPrecision(num) {
     const decimalPart = num.toString().split('.')[1];
@@ -18,61 +32,132 @@ function roundValueToPrecision(value, precision) {
     const nearest = Math.round(value / precision) * precision;
     return Number(nearest.toFixed(getDecimalPrecision(precision)));
 }
-const defaultIcon = jsx(Icon, { symbol: StarFilledMd, size: "large" });
-const defaultEmptyIcon = jsx(Icon, { symbol: StarMd, size: "large" });
+const defaultIcon = /*#__PURE__*/ jsx(Icon_Icon, {
+    symbol: StarFilledMd,
+    size: "large"
+});
+const defaultEmptyIcon = /*#__PURE__*/ jsx(Icon_Icon, {
+    symbol: StarMd,
+    size: "large"
+});
 function defaultLabelText(value) {
     return `${value || '0'} Star${value !== 1 ? 's' : ''}`;
 }
 
-const RatingItem = forwardRef((inProps, ref) => {
-    const { classes, disabled, emptyIcon = defaultEmptyIcon, getLabelText = defaultLabelText, icon = defaultIcon, IconContainerComponent = 'div', size = 'large', focus, highlightSelectedOnly, hover, isActive, focusVisible, itemValue, name, onBlur, onChange, onClick, onFocus, readOnly, ratingValue, className, ratingValueRounded, style, } = inProps;
-    const isFilled = highlightSelectedOnly
-        ? itemValue === ratingValue
-        : ratingValue && itemValue <= ratingValue;
+
+
+
+
+
+const RatingItem = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const { classes, disabled, emptyIcon = defaultEmptyIcon, getLabelText = defaultLabelText, icon = defaultIcon, IconContainerComponent = 'div', size = 'large', focus, highlightSelectedOnly, hover, isActive, focusVisible, itemValue, name, onBlur, onChange, onClick, onFocus, readOnly, ratingValue, className, ratingValueRounded, style } = inProps;
+    const isFilled = highlightSelectedOnly ? itemValue === ratingValue : ratingValue && itemValue <= ratingValue;
     const isFocused = itemValue <= focus;
     const isChecked = itemValue === ratingValueRounded;
     const id = useId();
     const cls = useClasses('rating', classes, className);
     const renderedIcon = emptyIcon && !isFilled ? emptyIcon : icon;
-    const container = (jsx("div", { className: cls('icon', {
+    const container = /*#__PURE__*/ jsx("div", {
+        className: cls('icon', {
             'icon-empty': !isFilled,
             'icon-filled': !!isFilled,
             'icon-focus': isFocused,
-            'icon-active': isActive,
-        }), children: size
-            ? cloneElement(renderedIcon, {
-                size,
-            })
-            : renderedIcon }));
+            'icon-active': isActive
+        }),
+        children: size ? /*#__PURE__*/ cloneElement(renderedIcon, {
+            size
+        }) : renderedIcon
+    });
     if (readOnly) {
-        return (jsx("span", { style: style, className: cls('read-only'), children: jsx(IconContainerComponent, { className: cls('label-container'), children: container }) }));
+        return /*#__PURE__*/ jsx("span", {
+            style: style,
+            className: cls('read-only'),
+            children: /*#__PURE__*/ jsx(IconContainerComponent, {
+                className: cls('label-container'),
+                children: container
+            })
+        });
     }
-    return (jsxs(Fragment, { children: [jsxs("label", { ref: ref, htmlFor: id, className: cls('label', {
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs("label", {
+                ref: ref,
+                htmlFor: id,
+                className: cls('label', {
                     disabled,
-                    focusVisible,
-                }), style: style, children: [jsxs(IconContainerComponent, { className: cls('label-container'), children: [jsx(Squircle, { classes: {
-                                    content: cls('squircle-content'),
-                                }, interactive: true, focusVisible: isActive && focusVisible, className: cls('squircle', {
-                                    'icon-hover': Math.ceil(hover) === itemValue,
-                                }) }), container] }), jsx("span", { className: cls('visually-hidden'), children: getLabelText(itemValue) })] }), jsx("input", { className: cls('visually-hidden'), onFocus: onFocus, onBlur: onBlur, onChange: onChange, onClick: onClick, disabled: disabled, value: itemValue, id: id, type: "radio", name: name, checked: isChecked })] }));
+                    focusVisible
+                }),
+                style: style,
+                children: [
+                    /*#__PURE__*/ jsxs(IconContainerComponent, {
+                        className: cls('label-container'),
+                        children: [
+                            /*#__PURE__*/ jsx(Squircle_Squircle, {
+                                classes: {
+                                    content: cls('squircle-content')
+                                },
+                                interactive: true,
+                                focusVisible: isActive && focusVisible,
+                                className: cls('squircle', {
+                                    'icon-hover': Math.ceil(hover) === itemValue
+                                })
+                            }),
+                            container
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: cls('visually-hidden'),
+                        children: getLabelText(itemValue)
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("input", {
+                className: cls('visually-hidden'),
+                onFocus: onFocus,
+                onBlur: onBlur,
+                onChange: onChange,
+                onClick: onClick,
+                disabled: disabled,
+                value: itemValue,
+                id: id,
+                type: "radio",
+                name: name,
+                checked: isChecked
+            })
+        ]
+    });
 });
 RatingItem.displayName = 'SuiRatingItem';
 
-var Rating$1 = {"sui-rating-root":"sui-rating-root","sui-disabled":"sui-disabled","sui-rating-icon-empty":"sui-rating-icon-empty","sui-rating-squircle":"sui-rating-squircle","sui-rating-squircle-content":"sui-rating-squircle-content","sui-rating-icon-hover":"sui-rating-icon-hover","sui-active":"sui-active","sui-rating-read-only":"sui-rating-read-only","sui-rating-decimal":"sui-rating-decimal","sui-rating-label":"sui-rating-label","sui-rating-label-container":"sui-rating-label-container","sui-rating-label-empty-value":"sui-rating-label-empty-value","sui-rating-empty-value-focused":"sui-rating-empty-value-focused","sui-rating-visually-hidden":"sui-rating-visually-hidden","sui-rating-icon":"sui-rating-icon","sui-rating-icon-filled":"sui-rating-icon-filled"};
+// extracted by css-extract-rspack-plugin
+/* export default */ var Rating = ({"sui-rating-root":"sui-rating-root","sui-disabled":"sui-disabled","sui-rating-icon-empty":"sui-rating-icon-empty","sui-rating-squircle":"sui-rating-squircle","sui-rating-squircle-content":"sui-rating-squircle-content","sui-rating-icon-hover":"sui-rating-icon-hover","sui-active":"sui-active","sui-rating-read-only":"sui-rating-read-only","sui-rating-decimal":"sui-rating-decimal","sui-rating-label":"sui-rating-label","sui-rating-label-container":"sui-rating-label-container","sui-rating-label-empty-value":"sui-rating-label-empty-value","sui-rating-empty-value-focused":"sui-rating-empty-value-focused","sui-rating-visually-hidden":"sui-rating-visually-hidden","sui-rating-icon":"sui-rating-icon","sui-rating-icon-filled":"sui-rating-icon-filled"});
+
+
+
+
+
+
 
-const Rating = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ name: 'Rating', props: inProps });
+
+const Rating_Rating = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        name: 'Rating',
+        props: inProps
+    });
     const { className, classes, defaultValue = null, disabled = false, emptyLabelText = 'Empty', highlightSelectedOnly = false, icon, max = 5, name: nameProp, onChange, onChangeActive, onMouseLeave, onMouseMove, precision = 1, readOnly = false, emptyIcon, getLabelText = defaultLabelText, IconContainerComponent, value: valueProp, size, ...rest } = props;
     const name = useId(nameProp);
     const [valueDerived, setValueState] = useControlled({
         controlled: valueProp,
         default: defaultValue,
-        name: 'SuiRating',
+        name: 'SuiRating'
     });
     const valueRounded = roundValueToPrecision(valueDerived, precision);
+    // const isRtl = useRtl();
+    // * spring still not support rtl
+    const isRtl = false;
     const [{ hover, focus }, setState] = useState({
         hover: -1,
-        focus: -1,
+        focus: -1
     });
     let value = valueRounded;
     if (hover !== -1) {
@@ -81,48 +166,51 @@ const Rating = forwardRef((inProps, ref) => {
     if (focus !== -1) {
         value = focus;
     }
-    const { isFocusVisibleRef, onBlur: handleBlurVisible, onFocus: handleFocusVisible, ref: focusVisibleRef, } = useIsFocusVisible();
+    const { isFocusVisibleRef, onBlur: handleBlurVisible, onFocus: handleFocusVisible, ref: focusVisibleRef } = useIsFocusVisible();
     const [focusVisible, setFocusVisible] = useState(false);
     const rootRef = useRef();
     const handleRef = useForkRef(focusVisibleRef, rootRef, ref);
-    const handleMouseMove = (event) => {
+    const handleMouseMove = (event)=>{
         if (onMouseMove) {
             onMouseMove(event);
         }
+        // oxlint-disable-next-line @typescript-eslint/no-non-null-assertion
         const rootNode = rootRef.current;
-        const { right, left, width: containerWidth, } = rootNode.getBoundingClientRect();
+        const { right, left, width: containerWidth } = rootNode.getBoundingClientRect();
         let percent;
-        {
+        if (isRtl) {
+            percent = (right - event.clientX) / containerWidth;
+        } else {
             percent = (event.clientX - left) / containerWidth;
         }
         let newHover = roundValueToPrecision(max * percent + precision / 2, precision);
         newHover = clamp(newHover, precision, max);
-        setState((prev) => prev.hover === newHover && prev.focus === newHover
-            ? prev
-            : {
+        setState((prev)=>prev.hover === newHover && prev.focus === newHover ? prev : {
                 hover: newHover,
-                focus: newHover,
+                focus: newHover
             });
         setFocusVisible(false);
         if (onChangeActive && hover !== newHover) {
             onChangeActive(event, newHover);
         }
     };
-    const handleMouseLeave = (event) => {
+    const handleMouseLeave = (event)=>{
         if (onMouseLeave) {
             onMouseLeave(event);
         }
         const newHover = -1;
         setState({
             hover: newHover,
-            focus: newHover,
+            focus: newHover
         });
         if (onChangeActive && hover !== newHover) {
             onChangeActive(event, newHover);
         }
     };
-    const handleChange = (event) => {
+    const handleChange = (event)=>{
         let newValue = event.target.value === '' ? null : parseFloat(event.target.value);
+        // Give mouse priority over keyboard
+        // Fix https://github.com/mui/material-ui/issues/22827
         if (hover !== -1) {
             newValue = hover;
         }
@@ -131,32 +219,33 @@ const Rating = forwardRef((inProps, ref) => {
             onChange(event, newValue);
         }
     };
-    const handleClear = (event) => {
+    const handleClear = (event)=>{
+        // Ignore keyboard events
+        // https://github.com/facebook/react/issues/7407
         if (event.clientX === 0 && event.clientY === 0) {
             return;
         }
         setState({
             hover: -1,
-            focus: -1,
+            focus: -1
         });
         setValueState(null);
-        if (onChange &&
-            parseFloat(event.target.value) === valueRounded) {
+        if (onChange && parseFloat(event.target.value) === valueRounded) {
             onChange(event, null);
         }
     };
-    const handleFocus = (event) => {
+    const handleFocus = (event)=>{
         handleFocusVisible(event);
         if (isFocusVisibleRef.current === true) {
             setFocusVisible(true);
         }
         const newFocus = parseFloat(event.target.value);
-        setState((prev) => ({
-            hover: prev.hover,
-            focus: newFocus,
-        }));
+        setState((prev)=>({
+                hover: prev.hover,
+                focus: newFocus
+            }));
     };
-    const handleBlur = (event) => {
+    const handleBlur = (event)=>{
         if (hover !== -1) {
             return;
         }
@@ -165,18 +254,29 @@ const Rating = forwardRef((inProps, ref) => {
             setFocusVisible(false);
         }
         const newFocus = -1;
-        setState((prev) => ({
-            hover: prev.hover,
-            focus: newFocus,
-        }));
+        setState((prev)=>({
+                hover: prev.hover,
+                focus: newFocus
+            }));
     };
     const [emptyValueFocused, setEmptyValueFocused] = useState(false);
     const cls = useClasses('rating', classes, className);
-    const ratingValues = useMemo(() => Array.from(new Array(max)), [max]);
-    return (jsxs("div", { ref: handleRef, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, className: cls('root', {
+    const ratingValues = useMemo(()=>Array.from(new Array(max)), [
+        max
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        ref: handleRef,
+        onMouseMove: handleMouseMove,
+        onMouseLeave: handleMouseLeave,
+        className: cls('root', {
             'read-only': readOnly,
-            disabled,
-        }), role: readOnly ? 'img' : undefined, "aria-label": readOnly ? getLabelText(value) : undefined, ...rest, children: [ratingValues.map((_, index) => {
+            disabled
+        }),
+        role: readOnly ? 'img' : undefined,
+        "aria-label": readOnly ? getLabelText(value) : undefined,
+        ...rest,
+        children: [
+            ratingValues.map((_, index)=>{
                 const itemValue = index + 1;
                 const ratingItemProps = {
                     classes,
@@ -197,34 +297,70 @@ const Rating = forwardRef((inProps, ref) => {
                     onBlur: handleBlur,
                     onChange: handleChange,
                     onClick: handleClear,
-                    onFocus: handleFocus,
+                    onFocus: handleFocus
                 };
-                const isActive = itemValue === Math.ceil(value) &&
-                    (hover !== -1 || focus !== -1);
+                const isActive = itemValue === Math.ceil(value) && (hover !== -1 || focus !== -1);
                 if (precision < 1) {
                     const items = Array.from(new Array(1 / precision));
-                    return (jsx("div", { className: cls('decimal', {
+                    return /*#__PURE__*/ jsx("div", {
+                        className: cls('decimal', {
                             'icon-active': isActive,
-                            focusVisible,
-                        }), children: items.map(($, indexDecimal) => {
+                            focusVisible
+                        }),
+                        children: items.map(($, indexDecimal)=>{
                             const itemDecimalValue = roundValueToPrecision(itemValue - 1 + (indexDecimal + 1) * precision, precision);
-                            return (jsx(RatingItem, { ...ratingItemProps, isActive: isActive && Math.ceil(focus) === itemDecimalValue, itemValue: itemDecimalValue, style: items.length - 1 === indexDecimal
-                                    ? undefined
-                                    : {
-                                        width: itemDecimalValue === value
-                                            ? `${(indexDecimal + 1) * precision * 100}%`
-                                            : '0%',
-                                        overflow: 'hidden',
-                                        position: 'absolute',
-                                        zIndex: 1,
-                                    } }, itemDecimalValue));
-                        }) }, itemValue));
+                            return /*#__PURE__*/ jsx(RatingItem, {
+                                ...ratingItemProps,
+                                isActive: isActive && Math.ceil(focus) === itemDecimalValue,
+                                itemValue: itemDecimalValue,
+                                style: items.length - 1 === indexDecimal ? undefined : {
+                                    width: itemDecimalValue === value ? `${(indexDecimal + 1) * precision * 100}%` : '0%',
+                                    overflow: 'hidden',
+                                    position: 'absolute',
+                                    zIndex: 1
+                                }
+                            }, itemDecimalValue);
+                        })
+                    }, itemValue);
                 }
-                return (jsx(RatingItem, { ...ratingItemProps, isActive: isActive, itemValue: itemValue }, itemValue));
-            }), !readOnly && !disabled && (jsxs("label", { className: cls('label', 'label-empty-value', {
-                    'empty-value-focused': emptyValueFocused,
-                }), children: [jsx("input", { className: cls('visually-hidden'), value: "", id: `${name}-empty`, type: "radio", name: name, checked: valueRounded == null, onFocus: () => setEmptyValueFocused(true), onBlur: () => setEmptyValueFocused(false), onChange: handleChange }), jsx("span", { className: cls('visually-hidden'), children: emptyLabelText })] }))] }));
+                return /*#__PURE__*/ jsx(RatingItem, {
+                    ...ratingItemProps,
+                    isActive: isActive,
+                    itemValue: itemValue
+                }, itemValue);
+            }),
+            !readOnly && !disabled && /*#__PURE__*/ jsxs("label", {
+                className: cls('label', 'label-empty-value', {
+                    'empty-value-focused': emptyValueFocused
+                }),
+                children: [
+                    /*#__PURE__*/ jsx("input", {
+                        className: cls('visually-hidden'),
+                        value: "",
+                        id: `${name}-empty`,
+                        type: "radio",
+                        name: name,
+                        checked: valueRounded == null,
+                        onFocus: ()=>setEmptyValueFocused(true),
+                        onBlur: ()=>setEmptyValueFocused(false),
+                        onChange: handleChange
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: cls('visually-hidden'),
+                        children: emptyLabelText
+                    })
+                ]
+            })
+        ]
+    });
 });
-Rating.displayName = 'SuiRating';
+Rating_Rating.displayName = 'SuiRating';
+
+
+
+
+
+
+
 
-export { Rating, RatingItem, defaultEmptyIcon, defaultIcon, defaultLabelText, Rating$1 as ratingStyle, roundValueToPrecision };
+export { Rating as ratingStyle, RatingItem, Rating_Rating as Rating, defaultEmptyIcon, defaultIcon, defaultLabelText, roundValueToPrecision };