@allxsmith/bestax-bulma 5.6.0 → 5.6.2

package/dist/index.esm.js

@@ -1681,8 +1681,12 @@ const Loading = ({ active = false, isFullPage = false, size, color, canCancel =
         [`is-${size}`]: size,
     });
     const combinedClasses = classNames(loadingClasses, bulmaHelperClasses, className);
-    const combinedOverlayClasses = classNames('loading-overlay', overlayClassName);
+    const combinedOverlayClasses = classNames(usePrefixedClassNames('loading-overlay'), overlayClassName);
     const combinedIconClasses = classNames(iconClasses, iconClassName);
+    const loadingContentClass = usePrefixedClassNames('loading-content');
+    const loadingIconCustomClass = usePrefixedClassNames('loading-icon-custom');
+    const loadingTextClass = usePrefixedClassNames('loading-text');
+    const loadingCancelClass = usePrefixedClassNames('loading-cancel');
     const handleOverlayClick = () => {
         if (canCancel && onCancel) {
             onCancel();
@@ -1711,7 +1715,7 @@ const Loading = ({ active = false, isFullPage = false, size, color, canCancel =
     if (!active) {
         return null;
     }
-    return (jsxs("div", { className: combinedClasses, role: "alert", "aria-busy": "true", "aria-label": "Loading", ...rest, children: [jsx("div", { className: combinedOverlayClasses, onClick: handleOverlayClick, "aria-hidden": "true" }), jsxs("div", { className: "loading-content", children: [indicator ? (jsx("span", { className: "loading-icon-custom", children: indicator })) : (jsx("span", { className: combinedIconClasses })), children && jsx("div", { className: "loading-text", children: children }), canCancel && (jsx("button", { type: "button", className: "loading-cancel", onClick: onCancel, "aria-label": "Cancel loading", children: "Cancel" }))] })] }));
+    return (jsxs("div", { className: combinedClasses, role: "alert", "aria-busy": "true", "aria-label": "Loading", ...rest, children: [jsx("div", { className: combinedOverlayClasses, onClick: handleOverlayClick, "aria-hidden": "true" }), jsxs("div", { className: loadingContentClass, children: [indicator ? (jsx("span", { className: loadingIconCustomClass, children: indicator })) : (jsx("span", { className: combinedIconClasses })), children && jsx("div", { className: loadingTextClass, children: children }), canCancel && (jsx("button", { type: "button", className: loadingCancelClass, onClick: onCancel, "aria-label": "Cancel loading", children: "Cancel" }))] })] }));
 };
 
 const Collapse = ({ open: controlledOpen, defaultOpen = false, onOpen, onClose, trigger, animation = 'fade', position = 'top', ariaId, bordered, children, className, triggerClassName, contentClassName, ...props }) => {
@@ -1774,10 +1778,10 @@ const Collapse = ({ open: controlledOpen, defaultOpen = false, onOpen, onClose,
         'is-bordered': bordered,
     });
     const combinedClasses = classNames(collapseClasses, bulmaHelperClasses, className);
-    const combinedTriggerClasses = classNames('collapse-trigger', triggerClassName);
-    const combinedContentClasses = classNames('collapse-content', contentClassName, {
+    const combinedTriggerClasses = classNames(usePrefixedClassNames('collapse-trigger'), triggerClassName);
+    const combinedContentClasses = classNames(usePrefixedClassNames('collapse-content', {
         'is-active': isOpen,
-    });
+    }), contentClassName);
     let contentWrapperStyle;
     if (animation === 'slide') {
         contentWrapperStyle = {
@@ -1959,10 +1963,14 @@ const Tooltip = ({ label, content, position = 'top', color, size, active: always
 
 const Step = ({ isActive = false, isCompleted = false, label, icon, clickable = false, onClick, stepNumber, completedIcon, className, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const stepClasses = classNames('steps-segment', {
+    const stepClasses = classNames(usePrefixedClassNames('steps-segment', {
         'is-active': isActive,
         'is-completed': isCompleted,
-    }, bulmaHelperClasses, className);
+    }), bulmaHelperClasses, className);
+    const stepsLinkClass = usePrefixedClassNames('steps-link');
+    const stepsMarkerClass = usePrefixedClassNames('steps-marker');
+    const stepsContentClass = usePrefixedClassNames('steps-content');
+    const stepsTitleClass = usePrefixedClassNames('steps-title');
     const handleClick = () => {
         if (clickable && onClick) {
             onClick();
@@ -1979,7 +1987,7 @@ const Step = ({ isActive = false, isCompleted = false, label, icon, clickable =
         (isCompleted && resolvedCompletedIcon
             ? resolvedCompletedIcon
             : (stepNumber ?? null));
-    return (jsx("li", { className: stepClasses, onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: clickable ? 0 : undefined, role: clickable ? 'button' : undefined, "aria-current": isActive ? 'step' : undefined, ...rest, children: jsxs("div", { className: "steps-link", children: [jsx("span", { className: "steps-marker", children: markerContent }), (label || children) && (jsx("div", { className: "steps-content", children: jsx("p", { className: "steps-title", children: label || children }) }))] }) }));
+    return (jsx("li", { className: stepClasses, onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: clickable ? 0 : undefined, role: clickable ? 'button' : undefined, "aria-current": isActive ? 'step' : undefined, ...rest, children: jsxs("div", { className: stepsLinkClass, children: [jsx("span", { className: stepsMarkerClass, children: markerContent }), (label || children) && (jsx("div", { className: stepsContentClass, children: jsx("p", { className: stepsTitleClass, children: label || children }) }))] }) }));
 };
 const Steps = ({ value = 0, items, size, color, hasMarker = true, animated = true, rounded = true, vertical = false, labelPosition = 'bottom', mobileMode, showStepNumbers = true, hasNavigation = false, prevLabel, nextLabel, onPrev, onNext, onStepClick, className, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
@@ -1994,9 +2002,14 @@ const Steps = ({ value = 0, items, size, color, hasMarker = true, animated = tru
         [`is-${mobileMode}`]: mobileMode,
     });
     const combinedClasses = classNames(stepsClasses, bulmaHelperClasses, className);
-    const listClasses = classNames('steps-list', {
+    const listClasses = usePrefixedClassNames('steps-list', {
         'is-vertical': vertical,
     });
+    const stepsNavigationClass = usePrefixedClassNames('steps-navigation');
+    const prevButtonClass = usePrefixedClassNames('button');
+    const nextButtonClass = usePrefixedClassNames('button', {
+        'is-primary': true,
+    });
     const totalSteps = items ? items.length : React.Children.count(children);
     const renderSteps = () => {
         if (items && items.length > 0) {
@@ -2019,7 +2032,7 @@ const Steps = ({ value = 0, items, size, color, hasMarker = true, animated = tru
         }
         return null;
     };
-    return (jsxs("div", { className: combinedClasses, ...rest, children: [jsx("ul", { className: listClasses, children: renderSteps() }), hasNavigation && (jsxs("div", { className: "steps-navigation", children: [jsx("button", { className: "button", disabled: value === 0, onClick: onPrev ?? (() => onStepClick?.(value - 1)), children: prevLabel ?? 'Previous' }), jsx("button", { className: "button is-primary", disabled: value === totalSteps - 1, onClick: onNext ?? (() => onStepClick?.(value + 1)), children: nextLabel ?? 'Next' })] }))] }));
+    return (jsxs("div", { className: combinedClasses, ...rest, children: [jsx("ul", { className: listClasses, children: renderSteps() }), hasNavigation && (jsxs("div", { className: stepsNavigationClass, children: [jsx("button", { className: prevButtonClass, disabled: value === 0, onClick: onPrev ?? (() => onStepClick?.(value - 1)), children: prevLabel ?? 'Previous' }), jsx("button", { className: nextButtonClass, disabled: value === totalSteps - 1, onClick: onNext ?? (() => onStepClick?.(value + 1)), children: nextLabel ?? 'Next' })] }))] }));
 };
 Steps.Step = Step;
 
@@ -2086,16 +2099,16 @@ const SidebarComponent = forwardRef(({ isOpen, onClose, position = 'left', width
         [`is-${position}`]: position,
         'is-fullwidth': fullWidth,
     });
-    const backgroundClass = usePrefixedClassNames('sidebar-background');
+    const backgroundClass = usePrefixedClassNames('sidebar-background', {
+        'is-active': isOpen,
+    });
     const contentClass = usePrefixedClassNames('sidebar-content');
     const combinedClasses = classNames(sidebarClasses, bulmaHelperClasses, className);
     const sidebarStyle = {
         ...style,
         '--bulma-sidebar-width': fullWidth ? '100%' : width,
     };
-    const sidebarContent = (jsxs(Fragment, { children: [overlay && (jsx("div", { className: classNames(backgroundClass, {
-                    'is-active': isOpen,
-                }), onClick: handleOverlayClick, "aria-hidden": "true" })), jsx("aside", { ref: combinedRef, className: combinedClasses, style: sidebarStyle, role: "dialog", "aria-modal": overlay ? 'true' : undefined, "aria-hidden": !isOpen, tabIndex: -1, ...rest, children: jsx("div", { className: contentClass, children: children }) })] }));
+    const sidebarContent = (jsxs(Fragment, { children: [overlay && (jsx("div", { className: backgroundClass, onClick: handleOverlayClick, "aria-hidden": "true" })), jsx("aside", { ref: combinedRef, className: combinedClasses, style: sidebarStyle, role: "dialog", "aria-modal": overlay ? 'true' : undefined, "aria-hidden": !isOpen, tabIndex: -1, ...rest, children: jsx("div", { className: contentClass, children: children }) })] }));
     if (inline) {
         return sidebarContent;
     }
@@ -2200,6 +2213,12 @@ const Toast = forwardRef(({ message, type = 'default', actionType, position = 't
         'is-rounded': rounded,
     });
     const combinedClasses = classNames(toastClasses, bulmaHelperClasses, className);
+    const toastMessageClass = usePrefixedClassNames('toast-message');
+    const toastActionsClass = usePrefixedClassNames('toast-actions');
+    const toastCancelClass = usePrefixedClassNames('toast-cancel');
+    const toastActionClass = usePrefixedClassNames('toast-action');
+    const toastButtonClass = usePrefixedClassNames('button');
+    const toastCloseClass = usePrefixedClassNames('delete', 'is-small');
     if (!isVisible) {
         return null;
     }
@@ -2221,13 +2240,13 @@ const Toast = forwardRef(({ message, type = 'default', actionType, position = 't
             ref.current = node;
         }
     };
-    const toastElement = (jsxs("div", { ref: setRef, className: combinedClasses, role: "alert", "aria-live": type === 'danger' || type === 'warning' ? 'assertive' : 'polite', onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: dismissible ? handleClose : undefined, ...rest, children: [jsx("span", { className: "toast-message", children: message }), (cancelText || actionText) && (jsxs("div", { className: "toast-actions", children: [cancelText && (jsx("span", { className: "toast-cancel", children: jsx("button", { type: "button", className: "button", onClick: e => {
+    const toastElement = (jsxs("div", { ref: setRef, className: combinedClasses, role: "alert", "aria-live": type === 'danger' || type === 'warning' ? 'assertive' : 'polite', onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: dismissible ? handleClose : undefined, ...rest, children: [jsx("span", { className: toastMessageClass, children: message }), (cancelText || actionText) && (jsxs("div", { className: toastActionsClass, children: [cancelText && (jsx("span", { className: toastCancelClass, children: jsx("button", { type: "button", className: toastButtonClass, onClick: e => {
                                 e.stopPropagation();
                                 handleClose();
-                            }, children: cancelText }) })), actionText && (jsx("span", { className: "toast-action", children: jsx("button", { type: "button", className: "button", onClick: e => {
+                            }, children: cancelText }) })), actionText && (jsx("span", { className: toastActionClass, children: jsx("button", { type: "button", className: toastButtonClass, onClick: e => {
                                 e.stopPropagation();
                                 handleAction();
-                            }, children: actionText }) }))] })), closable && (jsx("button", { type: "button", className: "delete is-small", onClick: e => {
+                            }, children: actionText }) }))] })), closable && (jsx("button", { type: "button", className: toastCloseClass, onClick: e => {
                     e.stopPropagation();
                     handleClose();
                 }, "aria-label": "Close" }))] }));
@@ -2508,9 +2527,7 @@ const Button = ({ color, size, isLight, isRounded, isLoading, isStatic, isFullWi
 };
 
 const CarouselItem = forwardRef(({ active, className, children, ...props }, ref) => {
-    const itemClasses = classNames('carousel-item', className, {
-        'is-active': active,
-    });
+    const itemClasses = classNames(usePrefixedClassNames('carousel-item', { 'is-active': active }), className);
     return (jsx("div", { ref: ref, className: itemClasses, ...props, children: children }));
 });
 CarouselItem.displayName = 'CarouselItem';
@@ -2696,6 +2713,15 @@ const Carousel = forwardRef(({ value: controlledValue, autoplay = false, interva
         [`is-indicator-${indicatorStyle}`]: indicatorStyle !== 'dots',
         [`is-arrow-${arrowColor}`]: !!arrowColor,
     });
+    const classPrefix = useClassPrefix();
+    const carouselContainerClass = usePrefixedClassNames('carousel-container');
+    const carouselSlidesClass = usePrefixedClassNames('carousel-slides');
+    const carouselArrowPrevClass = usePrefixedClassNames('carousel-arrow', 'is-prev', { 'is-transparent': !arrowBackground });
+    const carouselArrowNextClass = usePrefixedClassNames('carousel-arrow', 'is-next', { 'is-transparent': !arrowBackground });
+    const carouselIndicatorClass = usePrefixedClassNames('carousel-indicator', {
+        'is-inside': indicatorInside,
+        'is-top': indicatorPosition === 'top',
+    });
     const combinedClasses = classNames(carouselClasses, bulmaHelperClasses, className);
     const renderSlides = () => {
         const slides = items.map((item, index) => {
@@ -2726,22 +2752,15 @@ const Carousel = forwardRef(({ value: controlledValue, autoplay = false, interva
         }
         return slides;
     };
-    return (jsxs("div", { ref: combinedRef, className: combinedClasses, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, role: "region", "aria-roledescription": "carousel", "aria-label": ariaLabel, ...rest, children: [jsxs("div", { ref: containerRef, className: "carousel-container", onMouseDown: hasDrag ? handleMouseDown : undefined, onMouseMove: hasDrag && isDragging ? handleMouseMove : undefined, onMouseUp: hasDrag ? handleMouseUp : undefined, onMouseLeave: hasDrag ? handleMouseUp : undefined, onTouchStart: hasDrag ? handleTouchStart : undefined, onTouchMove: hasDrag ? handleTouchMove : undefined, onTouchEnd: hasDrag ? handleTouchEnd : undefined, style: {
+    return (jsxs("div", { ref: combinedRef, className: combinedClasses, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, role: "region", "aria-roledescription": "carousel", "aria-label": ariaLabel, ...rest, children: [jsxs("div", { ref: containerRef, className: carouselContainerClass, onMouseDown: hasDrag ? handleMouseDown : undefined, onMouseMove: hasDrag && isDragging ? handleMouseMove : undefined, onMouseUp: hasDrag ? handleMouseUp : undefined, onMouseLeave: hasDrag ? handleMouseUp : undefined, onTouchStart: hasDrag ? handleTouchStart : undefined, onTouchMove: hasDrag ? handleTouchMove : undefined, onTouchEnd: hasDrag ? handleTouchEnd : undefined, style: {
                     transform: isDragging ? `translateX(${dragOffset}px)` : undefined,
                     cursor: hasDrag ? (isDragging ? 'grabbing' : 'grab') : undefined,
-                }, children: [jsx("div", { className: "carousel-slides", style: {
+                }, children: [jsx("div", { className: carouselSlidesClass, style: {
                             transform: `translateX(-${(repeat && itemCount > 1 ? displayIndex + 1 : displayIndex) * 100}%)`,
                             transition: isDragging || skipTransition
                                 ? 'none'
                                 : 'transform 0.3s ease-in-out',
-                        }, onTransitionEnd: handleTransitionEnd, children: renderSlides() }), arrow && itemCount > 1 && (jsxs(Fragment, { children: [jsx(Button, { className: classNames('carousel-arrow is-prev', {
-                                    'is-transparent': !arrowBackground,
-                                }), onClick: goToPrev, isDisabled: !canGoPrev, "aria-label": "Previous slide", children: iconPrev ? (jsx(Icon, { name: iconPrev, library: iconLibrary, variant: iconVariant, size: iconSize, features: iconFeatures })) : (jsx(DefaultPrevIcon, {})) }), jsx(Button, { className: classNames('carousel-arrow is-next', {
-                                    'is-transparent': !arrowBackground,
-                                }), onClick: goToNext, isDisabled: !canGoNext, "aria-label": "Next slide", children: iconNext ? (jsx(Icon, { name: iconNext, library: iconLibrary, variant: iconVariant, size: iconSize, features: iconFeatures })) : (jsx(DefaultNextIcon, {})) })] }))] }), indicator && itemCount > 1 && (jsx("div", { className: classNames('carousel-indicator', {
-                    'is-inside': indicatorInside,
-                    'is-top': indicatorPosition === 'top',
-                }), role: "tablist", children: items.map((_, index) => (jsx(Button, { className: classNames('indicator-item', {
+                        }, onTransitionEnd: handleTransitionEnd, children: renderSlides() }), arrow && itemCount > 1 && (jsxs(Fragment, { children: [jsx(Button, { className: carouselArrowPrevClass, onClick: goToPrev, isDisabled: !canGoPrev, "aria-label": "Previous slide", children: iconPrev ? (jsx(Icon, { name: iconPrev, library: iconLibrary, variant: iconVariant, size: iconSize, features: iconFeatures })) : (jsx(DefaultPrevIcon, {})) }), jsx(Button, { className: carouselArrowNextClass, onClick: goToNext, isDisabled: !canGoNext, "aria-label": "Next slide", children: iconNext ? (jsx(Icon, { name: iconNext, library: iconLibrary, variant: iconVariant, size: iconSize, features: iconFeatures })) : (jsx(DefaultNextIcon, {})) })] }))] }), indicator && itemCount > 1 && (jsx("div", { className: carouselIndicatorClass, role: "tablist", children: items.map((_, index) => (jsx(Button, { className: prefixedClassNames(classPrefix, 'indicator-item', {
                         'is-active': index === activeIndex,
                     }), onClick: () => goToSlide(index), role: "tab", "aria-selected": index === activeIndex, "aria-label": `Go to slide ${index + 1}` }, index))) }))] }));
 });
@@ -3465,7 +3484,9 @@ const Checkbox = forwardRef(({ color, size, className, children, textColor, disa
         [`is-${size}`]: size && checkboxSizes.includes(size),
     });
     const checkboxClass = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsxs("label", { className: checkboxClass, children: [jsx("input", { ref: ref, type: "checkbox", disabled: disabled, name: effectiveName, value: value, checked: effectiveChecked, defaultChecked: effectiveDefaultChecked, onChange: handleChange, ...rest }), jsx("span", { className: "check" }), children && jsx("span", { className: "control-label", children: children })] }));
+    const checkClass = usePrefixedClassNames('check');
+    const controlLabelClass = usePrefixedClassNames('control-label');
+    return (jsxs("label", { className: checkboxClass, children: [jsx("input", { ref: ref, type: "checkbox", disabled: disabled, name: effectiveName, value: value, checked: effectiveChecked, defaultChecked: effectiveDefaultChecked, onChange: handleChange, ...rest }), jsx("span", { className: checkClass }), children && jsx("span", { className: controlLabelClass, children: children })] }));
 });
 Checkbox.displayName = 'Checkbox';
 
@@ -3694,7 +3715,9 @@ const Radio = forwardRef(({ color, size, className, children, textColor, disable
         [`is-${size}`]: size && radioSizes.includes(size),
     });
     const radioClass = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsxs("label", { className: radioClass, children: [jsx("input", { ref: ref, type: "radio", disabled: disabled, name: effectiveName, value: value, checked: effectiveChecked, defaultChecked: effectiveDefaultChecked, onChange: handleChange, ...rest }), jsx("span", { className: "check" }), children && jsx("span", { className: "control-label", children: children })] }));
+    const checkClass = usePrefixedClassNames('check');
+    const controlLabelClass = usePrefixedClassNames('control-label');
+    return (jsxs("label", { className: radioClass, children: [jsx("input", { ref: ref, type: "radio", disabled: disabled, name: effectiveName, value: value, checked: effectiveChecked, defaultChecked: effectiveDefaultChecked, onChange: handleChange, ...rest }), jsx("span", { className: checkClass }), children && jsx("span", { className: controlLabelClass, children: children })] }));
 });
 Radio.displayName = 'Radio';
 
@@ -3758,7 +3781,9 @@ const Switch = forwardRef(({ color, size, isRounded, isThin, isOutlined, isRtl,
         [`is-${passiveType}-passive`]: passiveType && switchColors.includes(passiveType),
     });
     const labelClasses = classNames(switchClasses, bulmaHelperClasses, className);
-    return (jsxs("label", { className: labelClasses, children: [jsx("input", { ref: ref, type: "checkbox", disabled: disabled, ...rest }), jsx("span", { className: "check" }), children && jsx("span", { className: "control-label", children: children })] }));
+    const checkClass = usePrefixedClassNames('check');
+    const controlLabelClass = usePrefixedClassNames('control-label');
+    return (jsxs("label", { className: labelClasses, children: [jsx("input", { ref: ref, type: "checkbox", disabled: disabled, ...rest }), jsx("span", { className: checkClass }), children && jsx("span", { className: controlLabelClass, children: children })] }));
 });
 Switch.displayName = 'Switch';
 
@@ -3926,6 +3951,7 @@ const Slider = forwardRef((props, ref) => {
         }
         return isCircle ? px * 1.2 : px;
     };
+    const classPrefix = useClassPrefix();
     const sliderClasses = usePrefixedClassNames('slider', {
         [`is-${size}`]: size,
         [`is-${color}`]: color,
@@ -4030,24 +4056,24 @@ const Slider = forwardRef((props, ref) => {
     const renderTicks = () => {
         if (tickPositions.length === 0)
             return null;
-        return (jsx("div", { className: "slider-ticks", children: tickPositions.map((tick, i) => {
+        return (jsx("div", { className: prefixedClassNames(classPrefix, 'slider-ticks'), children: tickPositions.map((tick, i) => {
                 const pct = ((tick.value - min) / (max - min)) * 100;
                 const posStyle = isVertical
                     ? { bottom: `${pct}%` }
                     : { left: `${pct}%` };
                 const isEndpoint = tick.value === min || tick.value === max;
-                return (jsx("span", { className: classNames('slider-tick', {
+                return (jsx("span", { className: prefixedClassNames(classPrefix, 'slider-tick', {
                         'is-endpoint': isEndpoint,
-                    }), style: posStyle, children: tick.label !== undefined && (jsx("span", { className: "slider-tick-label", children: tick.label })) }, i));
+                    }), style: posStyle, children: tick.label !== undefined && (jsx("span", { className: prefixedClassNames(classPrefix, 'slider-tick-label'), children: tick.label })) }, i));
             }) }));
     };
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
     const messageEl = message ? jsx("p", { className: helpClass, children: message }) : null;
-    const sliderElement = !range ? (jsxs("div", { ref: wrapperRef, className: combinedClasses, style: wrapperStyle, children: [jsx("input", { ref: combinedRef, type: "range", min: min, max: max, step: step, value: currentSingle, disabled: disabled, onChange: handleSingleChange, onKeyDown: handleKeyDown, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), onFocus: () => setShowTooltip(true), onBlur: () => setShowTooltip(false), className: "slider-input", style: {
+    const sliderElement = !range ? (jsxs("div", { ref: wrapperRef, className: combinedClasses, style: wrapperStyle, children: [jsx("input", { ref: combinedRef, type: "range", min: min, max: max, step: step, value: currentSingle, disabled: disabled, onChange: handleSingleChange, onKeyDown: handleKeyDown, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), onFocus: () => setShowTooltip(true), onBlur: () => setShowTooltip(false), className: prefixedClassNames(classPrefix, 'slider-input'), style: {
                     '--slider-progress': `${progressSingle}%`,
-                }, "aria-valuenow": currentSingle, "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel, ...getAriaProps(currentSingle), ...rest }), tooltipMode !== 'hidden' && (jsx("output", { ref: outputRef, className: classNames('slider-output', {
+                }, "aria-valuenow": currentSingle, "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel, ...getAriaProps(currentSingle), ...rest }), tooltipMode !== 'hidden' && (jsx("output", { ref: outputRef, className: prefixedClassNames(classPrefix, 'slider-output', {
                     'is-visible': showTipLow,
                     'is-flipped': flipped,
                     'is-flipped-left': isVertical && verticalFlippedLeft,
@@ -4067,7 +4093,7 @@ const Slider = forwardRef((props, ref) => {
                         left: getThumbLeft(progressSingle),
                         transform: `translateX(calc(-50% + ${nudgeX}px))`,
                         '--slider-output-arrow-offset': `calc(50% - ${nudgeX}px)`,
-                    }, children: formatValue(currentSingle) })), renderTicks()] })) : (jsxs("div", { ref: wrapperRef, className: combinedClasses, style: wrapperStyle, children: [jsx("div", { className: "slider-track", style: isVertical
+                    }, children: formatValue(currentSingle) })), renderTicks()] })) : (jsxs("div", { ref: wrapperRef, className: combinedClasses, style: wrapperStyle, children: [jsx("div", { className: prefixedClassNames(classPrefix, 'slider-track'), style: isVertical
                     ? {
                         '--slider-progress-low': `${progressLow}%`,
                         '--slider-progress-high': `${progressHigh}%`,
@@ -4075,7 +4101,7 @@ const Slider = forwardRef((props, ref) => {
                     : {
                         '--slider-progress-low': `${progressLow}%`,
                         '--slider-progress-high': `${progressHigh}%`,
-                    } }), jsx("input", { ref: combinedRef, type: "range", min: min, max: max, step: step, value: currentRange[0], disabled: disabled, onChange: handleRangeLowChange, onKeyDown: handleKeyDown, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), onFocus: () => setShowTooltip(true), onBlur: () => setShowTooltip(false), className: "slider-input slider-input-low", "aria-valuenow": currentRange[0], "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel?.[0] ?? 'Minimum value', ...getAriaProps(currentRange[0]), ...rest, ...(nameLow !== undefined ? { name: nameLow } : {}) }), jsx("input", { ref: inputHighRef, type: "range", min: min, max: max, step: step, value: currentRange[1], disabled: disabled, onChange: handleRangeHighChange, onMouseEnter: () => setShowTooltipHigh(true), onMouseLeave: () => setShowTooltipHigh(false), onFocus: () => setShowTooltipHigh(true), onBlur: () => setShowTooltipHigh(false), className: "slider-input slider-input-high", "aria-valuenow": currentRange[1], "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel?.[1] ?? 'Maximum value', ...getAriaProps(currentRange[1]), name: nameHigh }), tooltipMode !== 'hidden' && (jsx("output", { ref: outputRef, className: classNames('slider-output slider-output-low', {
+                    } }), jsx("input", { ref: combinedRef, type: "range", min: min, max: max, step: step, value: currentRange[0], disabled: disabled, onChange: handleRangeLowChange, onKeyDown: handleKeyDown, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), onFocus: () => setShowTooltip(true), onBlur: () => setShowTooltip(false), className: prefixedClassNames(classPrefix, 'slider-input', 'slider-input-low'), "aria-valuenow": currentRange[0], "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel?.[0] ?? 'Minimum value', ...getAriaProps(currentRange[0]), ...rest, ...(nameLow !== undefined ? { name: nameLow } : {}) }), jsx("input", { ref: inputHighRef, type: "range", min: min, max: max, step: step, value: currentRange[1], disabled: disabled, onChange: handleRangeHighChange, onMouseEnter: () => setShowTooltipHigh(true), onMouseLeave: () => setShowTooltipHigh(false), onFocus: () => setShowTooltipHigh(true), onBlur: () => setShowTooltipHigh(false), className: prefixedClassNames(classPrefix, 'slider-input', 'slider-input-high'), "aria-valuenow": currentRange[1], "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel?.[1] ?? 'Maximum value', ...getAriaProps(currentRange[1]), name: nameHigh }), tooltipMode !== 'hidden' && (jsx("output", { ref: outputRef, className: prefixedClassNames(classPrefix, 'slider-output', 'slider-output-low', {
                     'is-visible': showTipLow,
                     'is-flipped': flipped,
                     'is-flipped-left': isVertical && verticalFlippedLeft,
@@ -4095,7 +4121,7 @@ const Slider = forwardRef((props, ref) => {
                         left: getThumbLeft(progressLow),
                         transform: `translateX(calc(-50% + ${nudgeX}px))`,
                         '--slider-output-arrow-offset': `calc(50% - ${nudgeX}px)`,
-                    }, children: formatValue(currentRange[0]) })), tooltipMode !== 'hidden' && (jsx("output", { ref: outputHighRef, className: classNames('slider-output slider-output-high', {
+                    }, children: formatValue(currentRange[0]) })), tooltipMode !== 'hidden' && (jsx("output", { ref: outputHighRef, className: prefixedClassNames(classPrefix, 'slider-output', 'slider-output-high', {
                     'is-visible': showTipHigh,
                     'is-flipped': flippedHigh,
                     'is-flipped-left': isVertical && verticalFlippedLeft,
@@ -4381,6 +4407,7 @@ const Rate = forwardRef(({ label, labelSize, labelProps, horizontal, message, me
         }
         return currentValue;
     };
+    const classPrefix = useClassPrefix();
     const rateClasses = usePrefixedClassNames('rate', {
         [`is-${size}`]: size,
         'is-disabled': disabled,
@@ -4417,9 +4444,9 @@ const Rate = forwardRef(({ label, labelSize, labelProps, horizontal, message, me
             return customIcon(iconProps);
         }
         if (iconName) {
-            return (jsxs("span", { className: "rate-icon-partial", style: {
+            return (jsxs("span", { className: prefixedClassNames(classPrefix, 'rate-icon-partial'), style: {
                     '--rate-fill-percent': `${fillPercent}%`,
-                }, children: [jsx("span", { className: "rate-icon-bg", children: jsx(Icon, { name: iconName, library: resolvedLibrary, variant: iconVariant, features: iconFeatures }) }), jsx("span", { className: "rate-icon-fg", children: jsx(Icon, { name: iconName, library: resolvedLibrary, variant: iconVariant, features: iconFeatures }) })] }));
+                }, children: [jsx("span", { className: prefixedClassNames(classPrefix, 'rate-icon-bg'), children: jsx(Icon, { name: iconName, library: resolvedLibrary, variant: iconVariant, features: iconFeatures }) }), jsx("span", { className: prefixedClassNames(classPrefix, 'rate-icon-fg'), children: jsx(Icon, { name: iconName, library: resolvedLibrary, variant: iconVariant, features: iconFeatures }) })] }));
         }
         const clipId = `rate-clip-${iconIndex}`;
         return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", "aria-hidden": "true", children: [jsx("defs", { children: jsx("clipPath", { id: clipId, children: jsx("rect", { x: "0", y: "0", width: `${(fillPercent / 100) * 24}`, height: "24" }) }) }), jsx("path", { fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", d: "M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" }), jsx("path", { clipPath: `url(#${clipId})`, fill: "currentColor", d: "M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" })] }));
@@ -4435,7 +4462,7 @@ const Rate = forwardRef(({ label, labelSize, labelProps, horizontal, message, me
             const icon = isPartial
                 ? renderPartialIcon(iconIndex, fillPercent)
                 : renderIcon(iconIndex, isActive, fillPercent);
-            icons.push(jsx("span", { className: classNames('rate-item', {
+            icons.push(jsx("span", { className: prefixedClassNames(classPrefix, 'rate-item', {
                     'is-active': isActive,
                     'is-hovered': isHovered,
                 }), onClick: e => handleClick(iconIndex, e), onMouseEnter: () => handleMouseEnter(iconIndex), onMouseMove: e => handleMouseMove(iconIndex, e), onMouseLeave: handleMouseLeave, role: "radio", "aria-checked": currentValue === iconIndex + 1 ||
@@ -4453,7 +4480,11 @@ const Rate = forwardRef(({ label, labelSize, labelProps, horizontal, message, me
         [`is-${messageColor}`]: !!messageColor,
     });
     const messageEl = message ? jsx("p", { className: helpClass, children: message }) : null;
-    const rateElement = (jsxs("div", { ref: ref, className: combinedClasses, role: "radiogroup", "aria-label": "Rating", "aria-valuenow": currentValue, "aria-valuemin": 0, "aria-valuemax": max, "aria-valuetext": ariaValueText, tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown, ...rest, children: [jsx("div", { className: "rate-items", children: renderIcons() }), showScore && jsx("span", { className: "rate-score", children: getScoreDisplay() }), text && jsx("span", { className: "rate-text", children: text }), customText && jsx("span", { className: "rate-custom-text", children: customText }), name && (jsx("input", { type: "hidden", name: name, value: currentValue, form: form }))] }));
+    const rateItemsClass = usePrefixedClassNames('rate-items');
+    const rateScoreClass = usePrefixedClassNames('rate-score');
+    const rateTextClass = usePrefixedClassNames('rate-text');
+    const rateCustomTextClass = usePrefixedClassNames('rate-custom-text');
+    const rateElement = (jsxs("div", { ref: ref, className: combinedClasses, role: "radiogroup", "aria-label": "Rating", "aria-valuenow": currentValue, "aria-valuemin": 0, "aria-valuemax": max, "aria-valuetext": ariaValueText, tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown, ...rest, children: [jsx("div", { className: rateItemsClass, children: renderIcons() }), showScore && (jsx("span", { className: rateScoreClass, children: getScoreDisplay() })), text && jsx("span", { className: rateTextClass, children: text }), customText && (jsx("span", { className: rateCustomTextClass, children: customText })), name && (jsx("input", { type: "hidden", name: name, value: currentValue, form: form }))] }));
     let content = rateElement;
     if (!insideControl) {
         content = jsx(Control, { children: content });
@@ -4914,7 +4945,7 @@ const Taginput = forwardRef(({ label, labelSize, labelProps, horizontal, message
     const messageEl = message ? jsx("p", { className: helpClass, children: message }) : null;
     const taginputElement = (jsxs("div", { ref: containerRef, className: combinedClasses, onClick: handleContainerClick, ...rest, children: [jsxs("div", { className: containerClasses, children: [icon && (jsx(Icon, { name: icon, library: resolvedLibrary, variant: iconVariant, features: iconFeatures, containerClassName: pcn('icon', 'is-left') })), jsxs("div", { className: tagsClasses, children: [tags.map((tag, index) => {
                                 const displayVal = getDisplayValue(tag);
-                                return (jsxs("span", { className: tagClasses, children: [tagTemplate ? (tagTemplate(tag)) : ellipsis ? (jsx("span", { title: displayVal, children: displayVal })) : (displayVal), closable && !disabled && !readonly && (jsx("button", { type: "button", className: "delete is-small", onClick: e => {
+                                return (jsxs("span", { className: tagClasses, children: [tagTemplate ? (tagTemplate(tag)) : ellipsis ? (jsx("span", { title: displayVal, children: displayVal })) : (displayVal), closable && !disabled && !readonly && (jsx("button", { type: "button", className: pcn('delete', 'is-small'), onClick: e => {
                                                 e.stopPropagation();
                                                 removeTag(index);
                                             }, "aria-label": ariaCloseLabel || `Remove ${displayVal}` }))] }, index));