@allxsmith/bestax-bulma 5.65.0 → 5.66.0

package/dist/index.cjs

@@ -2698,7 +2698,7 @@ const STRIP_FROM_NON_BUTTON = {
  * @param {CardHeaderProps} props - Props for the CardHeader component.
  * @returns {JSX.Element} The rendered card header.
  */
-const CardHeader = ({ className, children, centered, color, bgColor, textColor, ...props }) => {
+const CardHeaderComponent = ({ className, children, centered, color, bgColor, textColor, ...props }) => {
     const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor ?? color,
@@ -2829,14 +2829,14 @@ const CardFooterItem = ({ as = 'span', className, children, color, bgColor, text
     }
     return (jsxRuntime.jsx("span", { className: itemClasses, ...omitAttrs(forwarded, STRIP_FROM_NON_BUTTON), children: children }));
 };
-// Attach nested Title and Icon components to CardHeader
-const CardHeaderCompound = withSubComponents(CardHeader, {
+// Export the compound, not the bare function, so `CardHeader.Title` typechecks.
+const CardHeader = withSubComponents(CardHeaderComponent, {
     Title: CardHeaderTitle,
     Icon: CardHeaderIcon,
-});
+}, 'CardHeader');
 /** Card component with Header, Image, Content, Footer, and FooterItem sub-components. */
 const Card = withSubComponents(CardComponent, {
-    Header: CardHeaderCompound,
+    Header: CardHeader,
     Image: CardImage,
     Content: CardContent,
     Footer: CardFooter,
@@ -7321,7 +7321,7 @@ const SegmentedControlRoot = React.forwardRef(function SegmentedControl({ value,
  * @param {React.Ref<HTMLButtonElement>} ref - Forwarded ref to the `<button>`.
  * @returns {JSX.Element} The rendered segment.
  */
-const Segment = React.forwardRef(function Segment({ value, isDisabled, disabled, className, onClick, onKeyDown, onFocus, onBlur, ...props }, ref) {
+const SegmentedControlSegment = React.forwardRef(function SegmentedControlSegment({ value, isDisabled, disabled, className, onClick, onKeyDown, onFocus, onBlur, ...props }, ref) {
     const ctx = React.useContext(SegmentedControlContext);
     const checked = ctx !== null && ctx.checked === value;
     const off = Boolean(isDisabled || disabled);
@@ -7397,8 +7397,8 @@ const Segment = React.forwardRef(function Segment({ value, isDisabled, disabled,
     // decides whether Tab reaches it.
     return (jsxRuntime.jsx(Button, { ...props, ref: setRefs, as: "button", type: "button", role: "radio", "aria-checked": checked, tabIndex: ctx ? (ctx.tabStop === value ? 0 : -1) : undefined, isDisabled: off, color: checked ? ctx.color : undefined, className: classNames(selectedClass, className), onClick: handleClick, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur }));
 });
-Segment.displayName = 'SegmentedControl.Segment';
-const SegmentedControl = withSubComponents(SegmentedControlRoot, { Segment }, 'SegmentedControl');
+SegmentedControlSegment.displayName = 'SegmentedControl.Segment';
+const SegmentedControl = withSubComponents(SegmentedControlRoot, { Segment: SegmentedControlSegment }, 'SegmentedControl');
 
 // INTERNAL: deliberately not exported from src/index.ts.
 /**
@@ -8533,7 +8533,7 @@ const samePosition = (a, b) => a.position === b.position &&
  */
 function useAnchoredPosition(anchorRef, panelRef, { active, position, fixed, offset = 4, styledGap, matchWidth = false, followContent = false, }) {
     const [resolved, setResolved] = React.useState({
-        position: position === 'auto' ? 'bottom-left' : position,
+        position: position === undefined || position === 'auto' ? 'bottom-left' : position,
     });
     // The measurement while the panel is active, for `followContent` to run
     // again after a render.
@@ -8557,14 +8557,22 @@ function useAnchoredPosition(anchorRef, panelRef, { active, position, fixed, off
             const { height } = measured;
             const corner = position === 'auto'
                 ? resolveAuto(view, rect, width, height, offset + (styledGap?.(panel) ?? 0))
-                : position;
+                : (position ?? 'bottom-left');
+            // The default lines up with the anchor's inline start, so right to
+            // left a fixed panel lines up the right edges. A named corner doesn't,
+            // and a panel in place takes the default's side from its stylesheet.
+            const startsRight = position === undefined &&
+                fixed &&
+                getComputedStyle(anchor).direction === 'rtl';
             const next = fixed
                 ? {
                     position: corner,
                     top: corner.startsWith('bottom')
                         ? rect.bottom + offset
                         : rect.top - height - offset,
-                    left: corner.endsWith('left') ? rect.left : rect.right - width,
+                    left: corner.endsWith('left') && !startsRight
+                        ? rect.left
+                        : rect.right - width,
                     ...(matchWidth ? { minWidth: rect.width } : {}),
                 }
                 : { position: corner };
@@ -8688,7 +8696,7 @@ function nearestDialog(event) {
  *   </Popover.Footer>
  * </Popover>
  */
-const PopoverComponent = ({ trigger, children, open: controlledOpen, defaultOpen = false, onOpenChange, position = 'bottom-left', appendToBody = false, trapFocus = true, closeOnClickOutside = true, closeOnEscape = true, ariaLabel, className, contentClassName, ...props }) => {
+const PopoverComponent = ({ trigger, children, open: controlledOpen, defaultOpen = false, onOpenChange, position, appendToBody = false, trapFocus = true, closeOnClickOutside = true, closeOnEscape = true, ariaLabel, className, contentClassName, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     const rootRef = React.useRef(null);
     const panelRef = React.useRef(null);
@@ -8808,6 +8816,9 @@ const PopoverComponent = ({ trigger, children, open: controlledOpen, defaultOpen
     const rootClasses = classNames(usePrefixedClassNames('popover', { 'is-active': isOpen }), bulmaHelperClasses, className);
     const panelClasses = classNames(usePrefixedClassNames('popover-content', {
         [`is-${resolved.position}`]: true,
+        // The default lines up with the trigger's inline start, so the
+        // stylesheet moves it to the right edge on a right-to-left page.
+        'is-start-aligned': position === undefined,
         'is-portal': appendToBody,
     }), contentClassName);
     return (jsxRuntime.jsxs("div", { className: rootClasses, ...rest, ref: rootRef, children: [clonedTrigger, isOpen && (jsxRuntime.jsx(Portal, { disabled: !appendToBody, children: jsxRuntime.jsx(PopoverPanel, { panelRef: panelRef, titleId: titleId, ariaLabel: ariaLabel, close: close, id: panelId, className: panelClasses, style: appendToBody
@@ -10930,11 +10941,17 @@ const Carousel = React.forwardRef(({ value: controlledValue, autoplay = false, i
             setIsPaused(false);
         }
     }, [pauseOnHover]);
-    // Drag and swipe, through the shared hook: a drag left goes on and a
-    // drag right goes back, past its 50px threshold.
+    // Right to left the track runs the other way, so the next slide is on
+    // the left. Read when a swipe or key arrives, as Lightbox does, so a
+    // LocaleProvider and the page's own `dir` both count.
+    const isRtl = () => getComputedStyle(carouselRef.current).direction ===
+        'rtl';
+    // Drag and swipe, through the shared hook, past its 50px threshold: a
+    // drag toward the start of the line goes on, which is a drag left on a
+    // left-to-right page, and a drag the other way goes back.
     const swipe = useSwipe({
         enabled: hasDrag,
-        onSwipe: direction => (direction === 'left' ? goToNext() : goToPrev()),
+        onSwipe: direction => direction === (isRtl() ? 'right' : 'left') ? goToNext() : goToPrev(),
     });
     const isDragging = swipe.isSwiping;
     const dragOffset = swipe.offsetX;
@@ -10948,14 +10965,17 @@ const Carousel = React.forwardRef(({ value: controlledValue, autoplay = false, i
             if (!node?.contains(active) || slidesRef.current?.contains(active)) {
                 return;
             }
+            // The arrow points where the slide comes from: right to left the
+            // next one is on the left.
+            const rtl = getComputedStyle(node).direction === 'rtl';
             switch (e.key) {
                 case 'ArrowLeft':
                     e.preventDefault();
-                    goToPrevRef.current();
+                    (rtl ? goToNextRef : goToPrevRef).current();
                     break;
                 case 'ArrowRight':
                     e.preventDefault();
-                    goToNextRef.current();
+                    (rtl ? goToPrevRef : goToNextRef).current();
                     break;
             }
         };
@@ -11108,8 +11128,11 @@ const Carousel = React.forwardRef(({ value: controlledValue, autoplay = false, i
                     cursor: hasDrag ? (isDragging ? 'grabbing' : 'grab') : undefined,
                 }, children: [jsxRuntime.jsx("div", { ref: slidesRef, className: carouselSlidesClass, style: {
                             // One item is the track's width plus a gap, over the count the
-                            // stylesheet has in view; account for the prepended clones
-                            transform: `translateX(calc(${-(shownIndex + cloneCount)} * (100% + var(--bulma-carousel-item-gap, 0px)) / var(--bulma-carousel-items-in-view, 1)))`,
+                            // stylesheet has in view; account for the prepended clones.
+                            // The sign is -1 left to right. Right to left the flex row
+                            // reverses, and the stylesheet sets the sign to +1 so the
+                            // same shift keeps a slide in view.
+                            transform: `translateX(calc(var(--carousel-shift-sign, -1) * ${shownIndex + cloneCount} * (100% + var(--bulma-carousel-item-gap, 0px)) / var(--bulma-carousel-items-in-view, 1)))`,
                             // Disable transition during drag or instant snap after wrap-around
                             transition: isDragging || skipTransition
                                 ? 'none'
@@ -19258,6 +19281,9 @@ const Slider = React.forwardRef((props, ref) => {
     const effectiveThumbExpr = isCircle
         ? `(${thumbCssVar} * 1.2)`
         : thumbCssVar;
+    // Measured from where the track starts: its inline start when
+    // horizontal, which is the right edge right to left, where the native
+    // range puts its minimum, and its bottom when vertical.
     const getThumbLeft = (progressPct) => {
         const fraction = progressPct / 100;
         return `calc(${effectiveThumbExpr} / 2 + ${fraction} * (100% - ${effectiveThumbExpr}))`;
@@ -19332,9 +19358,14 @@ const Slider = React.forwardRef((props, ref) => {
     const computeNudge = React.useCallback((el, wrapper, progressPct, thumbSizePx) => {
         const wr = wrapper.getBoundingClientRect();
         const tooltipWidth = el.offsetWidth;
-        // Corrected center: accounts for thumb inset from track edges
+        // Corrected center: accounts for thumb inset from track edges. The
+        // native range mirrors right to left, so the thumb is that far from
+        // the right edge instead, and the nudge, a physical shift, follows.
         const fraction = progressPct / 100;
-        const centerX = wr.left + thumbSizePx / 2 + fraction * (wr.width - thumbSizePx);
+        const along = thumbSizePx / 2 + fraction * (wr.width - thumbSizePx);
+        const centerX = getComputedStyle(wrapper).direction === 'rtl'
+            ? wr.right - along
+            : wr.left + along;
         const tooltipLeft = centerX - tooltipWidth / 2;
         const tooltipRight = centerX + tooltipWidth / 2;
         if (tooltipLeft < wr.left) {
@@ -19404,9 +19435,11 @@ const Slider = React.forwardRef((props, ref) => {
             return null;
         return (jsxRuntime.jsx("div", { className: prefixedClassNames(classPrefix, 'slider-ticks'), children: tickPositions.map((tick, i) => {
                 const pct = ((tick.value - min) / (max - min)) * 100;
+                // From the inline start, so a right-to-left page puts 0 on the
+                // right, where the native thumb sits. Left to right that is `left`.
                 const posStyle = isVertical
                     ? { bottom: `${pct}%` }
-                    : { left: `${pct}%` };
+                    : { insetInlineStart: `${pct}%` };
                 const isEndpoint = tick.value === min || tick.value === max;
                 return (jsxRuntime.jsx("span", { className: prefixedClassNames(classPrefix, 'slider-tick', {
                         'is-endpoint': isEndpoint,
@@ -19439,8 +19472,8 @@ const Slider = React.forwardRef((props, ref) => {
                             right: 'auto',
                         })
                     : {
-                        left: getThumbLeft(progressSingle),
-                        transform: `translateX(calc(-50% + ${nudgeX}px))`,
+                        insetInlineStart: getThumbLeft(progressSingle),
+                        transform: `translateX(calc(var(--slider-output-shift, -50%) + ${nudgeX}px))`,
                         '--slider-output-arrow-offset': `calc(50% - ${nudgeX}px)`,
                     }, children: formatValue(currentSingle) })), renderTicks()] })) : (jsxRuntime.jsxs("div", { ref: wrapperRef, className: combinedClasses, style: wrapperStyle, children: [jsxRuntime.jsx("div", { className: prefixedClassNames(classPrefix, 'slider-track'), style: isVertical
                     ? {
@@ -19467,8 +19500,8 @@ const Slider = React.forwardRef((props, ref) => {
                             right: 'auto',
                         })
                     : {
-                        left: getThumbLeft(progressLow),
-                        transform: `translateX(calc(-50% + ${nudgeX}px))`,
+                        insetInlineStart: getThumbLeft(progressLow),
+                        transform: `translateX(calc(var(--slider-output-shift, -50%) + ${nudgeX}px))`,
                         '--slider-output-arrow-offset': `calc(50% - ${nudgeX}px)`,
                     }, children: formatValue(currentRange[0]) })), tooltipMode !== 'hidden' && (jsxRuntime.jsx("output", { ref: outputHighRef, className: prefixedClassNames(classPrefix, 'slider-output', 'slider-output-high', {
                     'is-visible': showTipHigh,
@@ -19487,8 +19520,8 @@ const Slider = React.forwardRef((props, ref) => {
                             right: 'auto',
                         })
                     : {
-                        left: getThumbLeft(progressHigh),
-                        transform: `translateX(calc(-50% + ${nudgeXHigh}px))`,
+                        insetInlineStart: getThumbLeft(progressHigh),
+                        transform: `translateX(calc(var(--slider-output-shift, -50%) + ${nudgeXHigh}px))`,
                         '--slider-output-arrow-offset': `calc(50% - ${nudgeXHigh}px)`,
                     }, children: formatValue(currentRange[1]) })), renderTicks()] }));
     let content = sliderElement;
@@ -21208,7 +21241,7 @@ function searchTree(data, matches) {
 }
 
 const isBrowser = typeof window !== 'undefined';
-const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'bottom-left', appendToBody = false, className, trapFocus = true, closeOnClickOutside = true, closeOnEscape = true, ariaLabel, ariaLabelledBy, role = 'dialog', id, restoreFocusRef, initialFocusSelector, localeScope, matchWidth = false, followContent = false, }) => {
+const PickerPopover = ({ isOpen, onClose, anchorRef, children, position, appendToBody = false, className, trapFocus = true, closeOnClickOutside = true, closeOnEscape = true, ariaLabel, ariaLabelledBy, role = 'dialog', id, restoreFocusRef, initialFocusSelector, localeScope, matchWidth = false, followContent = false, }) => {
     const panelRef = React.useRef(null);
     const resolveContainer = usePortalContainer();
     // Read as the trap turns on, once the panel's content has rendered.
@@ -21287,6 +21320,9 @@ const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'botto
     const panelClass = usePrefixedClassNames('picker-popover', {
         'is-active': isOpen,
         [`is-${resolved.position}`]: true,
+        // The default lines up with the field's inline start, so the stylesheet
+        // moves it to the right edge on a right-to-left page.
+        'is-start-aligned': position === undefined,
         'is-portal': appendToBody,
         'has-anchor-width': matchWidth,
     });
@@ -21408,6 +21444,20 @@ function usePickerLocaleScope(ownLocale, ownDir) {
         };
     }, [scope, ownLocale, ownDir]);
 }
+/**
+ * The `dir` a picker's root ends up with: the one passed to it, else its own
+ * locale's inside a `LocaleProvider`, else none, so it follows the page. A
+ * picker that renders its own `Control` puts it there too. Bulma places the
+ * Control's icon and loading spinner against the Control's direction, and
+ * the launcher sits inside the picker's root, so the two have to agree or a
+ * French picker in an Arabic section puts the icon on top of the launcher.
+ * Returned as attributes to spread, empty when there's no `dir` to set.
+ */
+function usePickerDirAttrs(ownLocale, ownDir) {
+    const { rootAttrs } = usePickerLocaleScope(ownLocale, ownDir);
+    const dir = ownDir ?? rootAttrs.dir;
+    return dir === undefined ? NO_ROOT_ATTRS : { dir };
+}
 /**
  * Whether a picker's `dayNames` replace the calendar's own, which `Calendar`
  * does only for a full week of seven.
@@ -21486,7 +21536,7 @@ const ignoreChange = () => { };
  * close it and put focus back on the field, and a press outside closes it
  * where the press put focus.
  */
-function DialogSelect({ component, rootClass, panelClass, text, values, hasValue, open, onOpenChange, onFormReset, onPrintableKey, onClear, clearable, clearLabel, chooseLabel, placeholder, name, form, required = false, disabled, color, size, isRounded, position = 'bottom-left', appendToBody = false, inputRef, fieldRef, describedBy, below, initialFocusSelector, children, label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, className, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...props }) {
+function DialogSelect({ component, rootClass, panelClass, text, values, hasValue, open, onOpenChange, onFormReset, onPrintableKey, onClear, clearable, clearLabel, chooseLabel, placeholder, name, form, required = false, disabled, color, size, isRounded, position, appendToBody = false, inputRef, fieldRef, describedBy, below, initialFocusSelector, children, label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, className, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...props }) {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
     const ownField = rendersOwnField(component, {
@@ -25998,7 +26048,7 @@ const SKIPPED_SEGMENTS = {
  * @returns {JSX.Element}
  */
 const DateInputBase = React.forwardRef((props, ref) => {
-    const { value: controlledValue, defaultValue, onChange, onOpen, onClose, min, max, disabled: disabledProp, readOnly, placeholder, granularity = 'day', format, parse, locale: localeProp, inline = false, mobileNative = 'auto', editable = true, popover = true, openOnFocus = true, closeOnSelect = true, position = 'bottom-left', appendToBody = false, color, size, isRounded, shouldDisableDate, unselectableDates, firstDayOfWeek: firstDayOfWeekProp, dayNames, monthNames, nearbyMonthDays = true, className, name, form, required, id: idProp, onFocus, onClick, onKeyDown, onBlur, iconLeftName: _iconLeftName, triggerIcon: triggerIconProp, triggerIconName = 'chevron-down', labels, ...rest } = props;
+    const { value: controlledValue, defaultValue, onChange, onOpen, onClose, min, max, disabled: disabledProp, readOnly, placeholder, granularity = 'day', format, parse, locale: localeProp, inline = false, mobileNative = 'auto', editable = true, popover = true, openOnFocus = true, closeOnSelect = true, position, appendToBody = false, color, size, isRounded, shouldDisableDate, unselectableDates, firstDayOfWeek: firstDayOfWeekProp, dayNames, monthNames, nearbyMonthDays = true, className, name, form, required, id: idProp, onFocus, onClick, onKeyDown, onBlur, iconLeftName: _iconLeftName, triggerIcon: triggerIconProp, triggerIconName = 'chevron-down', labels, ...rest } = props;
     // A LocaleProvider around the picker sets its default locale and, through
     // that locale, the day its week starts on.
     const locale = usePickerLocale(localeProp);
@@ -26254,6 +26304,8 @@ DateInputBase.displayName = 'DateInputBase';
  */
 const DateInput = React.forwardRef((props, ref) => {
     const { label, labelSize, labelProps, horizontal, iconLeft, iconRight, iconLeftName = 'calendar', iconRightName, iconLeftSize, iconRightSize, hasIconsLeft, hasIconsRight, isLoading, isExpanded, controlSize, message, messageColor, fieldClassName, controlClassName, ...baseProps } = props;
+    // The picker's own direction, which the Control below takes too.
+    const pickerDirAttrs = usePickerDirAttrs(baseProps.locale, baseProps.dir);
     const insideField = useInsideField();
     const insideControl = useInsideControl();
     const ownField = rendersOwnField('DateInput', {
@@ -26301,7 +26353,7 @@ const DateInput = React.forwardRef((props, ref) => {
     // whether that is the one rendered below or an enclosing one.
     let content = (jsxRuntime.jsx(DateInputBase, { ref: ref, ...baseProps, id: controlId }));
     if (ownControl) {
-        content = (jsxRuntime.jsx(Control, { iconLeft: iconLeft, iconRight: iconRight, iconLeftName: iconLeftName, iconRightName: iconRightName, iconLeftSize: iconLeftSize, iconRightSize: iconRightSize, hasIconsLeft: hasIconsLeft || !!iconLeftName, hasIconsRight: hasIconsRight, isLoading: isLoading, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
+        content = (jsxRuntime.jsx(Control, { ...pickerDirAttrs, iconLeft: iconLeft, iconRight: iconRight, iconLeftName: iconLeftName, iconRightName: iconRightName, iconLeftSize: iconLeftSize, iconRightSize: iconRightSize, hasIconsLeft: hasIconsLeft || !!iconLeftName, hasIconsRight: hasIconsRight, isLoading: isLoading, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
     }
     const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
     if (ownField) {
@@ -27157,7 +27209,7 @@ const TimeWheels = ({ value, onChange, hourFormat = '24', enableSeconds = false,
         });
         columnOrder[nearestIdx]?.current?.startDrag(e.pointerId, e.clientY);
     };
-    return (jsxRuntime.jsx("div", { id: id, className: classNames(rootClass, className), "aria-disabled": disabled, children: jsxRuntime.jsxs("div", { className: wheelsClass, ref: wheelsContainerRef, onPointerDown: onWheelsContainerPointerDown, children: [jsxRuntime.jsx(Wheel, { ref: hoursRef, values: hourValues, index: hourIndex, onChange: onHourIndex, formatLabel: pad2, ariaLabel: t.hours, visibleCount: visibleCount, itemHeight: itemHeight, disabled: disabled, size: size, color: color, wrap: true, onCommit: onCommit, onFocusPrev: focusPrevOf(hoursRef), onFocusNext: focusNextOf(hoursRef), disabledFor: hourDisabledFor, audioTick: audioTick }), jsxRuntime.jsx("div", { className: sepClass, "aria-hidden": "true", children: ":" }), jsxRuntime.jsx(Wheel, { ref: minutesRef, values: minuteValues, index: minuteIndex, onChange: onMinuteIndex, formatLabel: pad2, ariaLabel: t.minutes, visibleCount: visibleCount, itemHeight: itemHeight, disabled: disabled, size: size, color: color, wrap: true, onCommit: onCommit, onFocusPrev: focusPrevOf(minutesRef), onFocusNext: focusNextOf(minutesRef), disabledFor: minuteDisabledFor, audioTick: audioTick }), enableSeconds && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: sepClass, "aria-hidden": "true", children: ":" }), jsxRuntime.jsx(Wheel, { ref: secondsRef, values: secondValues, index: secondIndex, onChange: onSecondIndex, formatLabel: pad2, ariaLabel: t.seconds, visibleCount: visibleCount, itemHeight: itemHeight, disabled: disabled, size: size, color: color, wrap: true, onCommit: onCommit, onFocusPrev: focusPrevOf(secondsRef), onFocusNext: focusNextOf(secondsRef), disabledFor: secondDisabledFor, audioTick: audioTick })] })), hourFormat === '12' && (jsxRuntime.jsx(Wheel, { ref: ampmRef, values: ['AM', 'PM'], index: ampmIndex, onChange: onAmpmIndex, formatLabel: v => v, ariaLabel: t.ampm, visibleCount: visibleCount, itemHeight: itemHeight, disabled: disabled, size: size, color: color, onCommit: onCommit, onFocusPrev: focusPrevOf(ampmRef), onFocusNext: focusNextOf(ampmRef), audioTick: audioTick }))] }) }));
+    return (jsxRuntime.jsx("div", { id: id, className: classNames(rootClass, className), dir: "ltr", "aria-disabled": disabled, children: jsxRuntime.jsxs("div", { className: wheelsClass, ref: wheelsContainerRef, onPointerDown: onWheelsContainerPointerDown, children: [jsxRuntime.jsx(Wheel, { ref: hoursRef, values: hourValues, index: hourIndex, onChange: onHourIndex, formatLabel: pad2, ariaLabel: t.hours, visibleCount: visibleCount, itemHeight: itemHeight, disabled: disabled, size: size, color: color, wrap: true, onCommit: onCommit, onFocusPrev: focusPrevOf(hoursRef), onFocusNext: focusNextOf(hoursRef), disabledFor: hourDisabledFor, audioTick: audioTick }), jsxRuntime.jsx("div", { className: sepClass, "aria-hidden": "true", children: ":" }), jsxRuntime.jsx(Wheel, { ref: minutesRef, values: minuteValues, index: minuteIndex, onChange: onMinuteIndex, formatLabel: pad2, ariaLabel: t.minutes, visibleCount: visibleCount, itemHeight: itemHeight, disabled: disabled, size: size, color: color, wrap: true, onCommit: onCommit, onFocusPrev: focusPrevOf(minutesRef), onFocusNext: focusNextOf(minutesRef), disabledFor: minuteDisabledFor, audioTick: audioTick }), enableSeconds && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: sepClass, "aria-hidden": "true", children: ":" }), jsxRuntime.jsx(Wheel, { ref: secondsRef, values: secondValues, index: secondIndex, onChange: onSecondIndex, formatLabel: pad2, ariaLabel: t.seconds, visibleCount: visibleCount, itemHeight: itemHeight, disabled: disabled, size: size, color: color, wrap: true, onCommit: onCommit, onFocusPrev: focusPrevOf(secondsRef), onFocusNext: focusNextOf(secondsRef), disabledFor: secondDisabledFor, audioTick: audioTick })] })), hourFormat === '12' && (jsxRuntime.jsx(Wheel, { ref: ampmRef, values: ['AM', 'PM'], index: ampmIndex, onChange: onAmpmIndex, formatLabel: v => v, ariaLabel: t.ampm, visibleCount: visibleCount, itemHeight: itemHeight, disabled: disabled, size: size, color: color, onCommit: onCommit, onFocusPrev: focusPrevOf(ampmRef), onFocusNext: focusNextOf(ampmRef), audioTick: audioTick }))] }) }));
 };
 TimeWheels.displayName = 'TimeWheels';
 
@@ -27187,7 +27239,7 @@ const fromIsoTime = (s) => {
  * @returns {JSX.Element}
  */
 const TimeInputBase = React.forwardRef((props, ref) => {
-    const { value: controlledValue, defaultValue, onChange, onOpen, onClose, min, max, disabled: disabledProp, readOnly, placeholder, format, parse, locale: localeProp, inline = false, mobileNative = 'auto', editable = true, popover = true, openOnFocus = true, closeOnSelect = false, position = 'bottom-left', appendToBody = false, color, size, isRounded, hourFormat = '24', enableSeconds = false, incrementHours = 1, incrementMinutes = 1, incrementSeconds = 1, unselectableTimes, className, name, form, required, id: idProp, onFocus, onClick, onKeyDown, onBlur, iconLeftName: _iconLeftName, triggerIcon: triggerIconProp, triggerIconName = 'chevron-down', labels, audioTick = false, haptics = false, ...rest } = props;
+    const { value: controlledValue, defaultValue, onChange, onOpen, onClose, min, max, disabled: disabledProp, readOnly, placeholder, format, parse, locale: localeProp, inline = false, mobileNative = 'auto', editable = true, popover = true, openOnFocus = true, closeOnSelect = false, position, appendToBody = false, color, size, isRounded, hourFormat = '24', enableSeconds = false, incrementHours = 1, incrementMinutes = 1, incrementSeconds = 1, unselectableTimes, className, name, form, required, id: idProp, onFocus, onClick, onKeyDown, onBlur, iconLeftName: _iconLeftName, triggerIcon: triggerIconProp, triggerIconName = 'chevron-down', labels, audioTick = false, haptics = false, ...rest } = props;
     // A LocaleProvider around the picker sets its default locale.
     const locale = usePickerLocale(localeProp);
     // Its own language and direction, which its root and a portaled panel
@@ -27415,6 +27467,8 @@ TimeInputBase.displayName = 'TimeInputBase';
  */
 const TimeInput = React.forwardRef((props, ref) => {
     const { label, labelSize, labelProps, horizontal, iconLeft, iconRight, iconLeftName = 'clock', iconRightName, iconLeftSize, iconRightSize, hasIconsLeft, hasIconsRight, isLoading, isExpanded, controlSize, message, messageColor, fieldClassName, controlClassName, ...baseProps } = props;
+    // The picker's own direction, which the Control below takes too.
+    const pickerDirAttrs = usePickerDirAttrs(baseProps.locale, baseProps.dir);
     const insideField = useInsideField();
     const insideControl = useInsideControl();
     const ownField = rendersOwnField('TimeInput', {
@@ -27462,7 +27516,7 @@ const TimeInput = React.forwardRef((props, ref) => {
     // whether that is the one rendered below or an enclosing one.
     let content = (jsxRuntime.jsx(TimeInputBase, { ref: ref, ...baseProps, id: controlId }));
     if (ownControl) {
-        content = (jsxRuntime.jsx(Control, { iconLeft: iconLeft, iconRight: iconRight, iconLeftName: iconLeftName, iconRightName: iconRightName, iconLeftSize: iconLeftSize, iconRightSize: iconRightSize, hasIconsLeft: hasIconsLeft || !!iconLeftName, hasIconsRight: hasIconsRight, isLoading: isLoading, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
+        content = (jsxRuntime.jsx(Control, { ...pickerDirAttrs, iconLeft: iconLeft, iconRight: iconRight, iconLeftName: iconLeftName, iconRightName: iconRightName, iconLeftSize: iconLeftSize, iconRightSize: iconRightSize, hasIconsLeft: hasIconsLeft || !!iconLeftName, hasIconsRight: hasIconsRight, isLoading: isLoading, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
     }
     const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
     if (ownField) {
@@ -27508,7 +27562,7 @@ const fromIsoDateTime = (s) => {
  * @returns {JSX.Element}
  */
 const DateTimeInputBase = React.forwardRef((props, ref) => {
-    const { value: controlledValue, defaultValue, onChange, onOpen, onClose, min, max, disabled: disabledProp, readOnly, placeholder, format, parse, locale: localeProp, inline = false, mobileNative = 'auto', editable = true, popover = true, openOnFocus = true, closeOnSelect = false, position = 'bottom-left', appendToBody = false, color, size, isRounded, shouldDisableDate, unselectableDates, firstDayOfWeek: firstDayOfWeekProp, dayNames, monthNames, nearbyMonthDays = true, hourFormat = '24', enableSeconds = false, incrementHours = 1, 
+    const { value: controlledValue, defaultValue, onChange, onOpen, onClose, min, max, disabled: disabledProp, readOnly, placeholder, format, parse, locale: localeProp, inline = false, mobileNative = 'auto', editable = true, popover = true, openOnFocus = true, closeOnSelect = false, position, appendToBody = false, color, size, isRounded, shouldDisableDate, unselectableDates, firstDayOfWeek: firstDayOfWeekProp, dayNames, monthNames, nearbyMonthDays = true, hourFormat = '24', enableSeconds = false, incrementHours = 1, 
     // Step between visible wheel values; 1 gives the iOS-style every-minute wheel.
     incrementMinutes = 1, incrementSeconds = 1, unselectableTimes, className, name, form, required, id: idProp, onFocus, onClick, onKeyDown, onBlur, iconLeftName: _iconLeftName, triggerIcon: triggerIconProp, triggerIconName = 'chevron-down', audioTick = false, haptics = false, labels, ...rest } = props;
     // A LocaleProvider around the picker sets its default locale and, through
@@ -27817,6 +27871,8 @@ DateTimeInputBase.displayName = 'DateTimeInputBase';
  */
 const DateTimeInput = React.forwardRef((props, ref) => {
     const { label, labelSize, labelProps, horizontal, iconLeft, iconRight, iconLeftName = 'calendar-alt', iconRightName, iconLeftSize, iconRightSize, hasIconsLeft, hasIconsRight, isLoading, isExpanded, controlSize, message, messageColor, fieldClassName, controlClassName, ...baseProps } = props;
+    // The picker's own direction, which the Control below takes too.
+    const pickerDirAttrs = usePickerDirAttrs(baseProps.locale, baseProps.dir);
     const insideField = useInsideField();
     const insideControl = useInsideControl();
     const ownField = rendersOwnField('DateTimeInput', {
@@ -27864,7 +27920,7 @@ const DateTimeInput = React.forwardRef((props, ref) => {
     // whether that is the one rendered below or an enclosing one.
     let content = (jsxRuntime.jsx(DateTimeInputBase, { ref: ref, ...baseProps, id: controlId }));
     if (ownControl) {
-        content = (jsxRuntime.jsx(Control, { iconLeft: iconLeft, iconRight: iconRight, iconLeftName: iconLeftName, iconRightName: iconRightName, iconLeftSize: iconLeftSize, iconRightSize: iconRightSize, hasIconsLeft: hasIconsLeft || !!iconLeftName, hasIconsRight: hasIconsRight, isLoading: isLoading, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
+        content = (jsxRuntime.jsx(Control, { ...pickerDirAttrs, iconLeft: iconLeft, iconRight: iconRight, iconLeftName: iconLeftName, iconRightName: iconRightName, iconLeftSize: iconLeftSize, iconRightSize: iconRightSize, hasIconsLeft: hasIconsLeft || !!iconLeftName, hasIconsRight: hasIconsRight, isLoading: isLoading, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
     }
     const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
     if (ownField) {
@@ -27893,7 +27949,7 @@ const today = () => startOfDay(new Date());
  * @returns {JSX.Element}
  */
 const DateRangeInputBase = React.forwardRef((props, ref) => {
-    const { value: controlledValue, defaultValue, onChange, onOpen, onClose, min, max, disabled: disabledProp, readOnly, placeholder, format, parse, locale: localeProp, inline = false, mobileNative = 'auto', editable = true, popover = true, openOnFocus = true, closeOnSelect = true, position = 'bottom-left', appendToBody = false, color, size, isRounded, shouldDisableDate, unselectableDates, allowDisabledInRange = false, firstDayOfWeek: firstDayOfWeekProp, dayNames, monthNames, nearbyMonthDays = true, iconLeftName: _iconLeftName, triggerIcon: triggerIconProp, triggerIconName = 'chevron-down', labels, name, startName, endName, form, required, id, className, onFocus, onFocusCapture, ...rest } = props;
+    const { value: controlledValue, defaultValue, onChange, onOpen, onClose, min, max, disabled: disabledProp, readOnly, placeholder, format, parse, locale: localeProp, inline = false, mobileNative = 'auto', editable = true, popover = true, openOnFocus = true, closeOnSelect = true, position, appendToBody = false, color, size, isRounded, shouldDisableDate, unselectableDates, allowDisabledInRange = false, firstDayOfWeek: firstDayOfWeekProp, dayNames, monthNames, nearbyMonthDays = true, iconLeftName: _iconLeftName, triggerIcon: triggerIconProp, triggerIconName = 'chevron-down', labels, name, startName, endName, form, required, id, className, onFocus, onFocusCapture, ...rest } = props;
     // A LocaleProvider around the picker sets its default locale and, through
     // that locale, the day its week starts on.
     const locale = usePickerLocale(localeProp);
@@ -28192,6 +28248,8 @@ DateRangeInputBase.displayName = 'DateRangeInputBase';
  */
 const DateRangeInput = React.forwardRef((props, ref) => {
     const { label, labelSize, labelProps, horizontal, iconLeft, iconRight, iconLeftName = 'calendar', iconRightName, iconLeftSize, iconRightSize, hasIconsLeft, hasIconsRight, isLoading, isExpanded, controlSize, message, messageColor, fieldClassName, controlClassName, ...baseProps } = props;
+    // The picker's own direction, which the Control below takes too.
+    const pickerDirAttrs = usePickerDirAttrs(baseProps.locale, baseProps.dir);
     const insideField = useInsideField();
     const insideControl = useInsideControl();
     const ownField = rendersOwnField('DateRangeInput', {
@@ -28235,7 +28293,7 @@ const DateRangeInput = React.forwardRef((props, ref) => {
     });
     let content = (jsxRuntime.jsx(DateRangeInputBase, { ref: ref, "aria-labelledby": ariaLabelledBy, ...baseProps }));
     if (ownControl) {
-        content = (jsxRuntime.jsx(Control, { iconLeft: iconLeft, iconRight: iconRight, iconLeftName: iconLeftName, iconRightName: iconRightName, iconLeftSize: iconLeftSize, iconRightSize: iconRightSize, hasIconsLeft: hasIconsLeft || !!iconLeftName, hasIconsRight: hasIconsRight, isLoading: isLoading, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
+        content = (jsxRuntime.jsx(Control, { ...pickerDirAttrs, iconLeft: iconLeft, iconRight: iconRight, iconLeftName: iconLeftName, iconRightName: iconRightName, iconLeftSize: iconLeftSize, iconRightSize: iconRightSize, hasIconsLeft: hasIconsLeft || !!iconLeftName, hasIconsRight: hasIconsRight, isLoading: isLoading, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
     }
     const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
     if (ownField) {
@@ -28256,7 +28314,7 @@ DateRangeInput.displayName = 'DateRangeInput';
  * @returns {JSX.Element} The rendered field.
  */
 const ColorInputBase = React.forwardRef((props, ref) => {
-    const { value: controlledValue, defaultValue, onChange, onChangeEnd, format = 'hsl', alpha = false, swatches, eyeDropper = false, onOpen, onClose, openOnFocus = false, closeOnSwatchClick = false, position = 'bottom-left', appendToBody = false, color, size, isRounded, disabled: disabledProp, readOnly, placeholder, triggerIcon: triggerIconProp, triggerIconName = 'chevron-down', labels, className, id: idProp, onFocus, onBlur, onKeyDown, ...rest } = props;
+    const { value: controlledValue, defaultValue, onChange, onChangeEnd, format = 'hsl', alpha = false, swatches, eyeDropper = false, onOpen, onClose, openOnFocus = false, closeOnSwatchClick = false, position, appendToBody = false, color, size, isRounded, disabled: disabledProp, readOnly, placeholder, triggerIcon: triggerIconProp, triggerIconName = 'chevron-down', labels, className, id: idProp, onFocus, onBlur, onKeyDown, ...rest } = props;
     const disabled = useFieldsetDisabled(disabledProp);
     const id = useFieldLabelTarget(idProp, true);
     const localeScope = usePickerLocaleScope(undefined, props.dir);
@@ -31165,6 +31223,13 @@ exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
 exports.Buttons = Buttons;
 exports.Card = Card;
+exports.CardContent = CardContent;
+exports.CardFooter = CardFooter;
+exports.CardFooterItem = CardFooterItem;
+exports.CardHeader = CardHeader;
+exports.CardHeaderIcon = CardHeaderIcon;
+exports.CardHeaderTitle = CardHeaderTitle;
+exports.CardImage = CardImage;
 exports.Carousel = Carousel;
 exports.CarouselItem = CarouselItem;
 exports.Cell = Cell;
@@ -31237,6 +31302,7 @@ exports.FieldBody = FieldBody;
 exports.FieldLabel = FieldLabel;
 exports.Fieldset = Fieldset;
 exports.Figure = Figure;
+exports.FigureCaption = FigureCaption;
 exports.File = File;
 exports.Flex = Flex;
 exports.Footer = Footer;
@@ -31277,7 +31343,17 @@ exports.MenuLabel = MenuLabel;
 exports.MenuList = MenuList;
 exports.MenuSection = MenuSection;
 exports.Message = Message;
+exports.MessageBody = MessageBody;
+exports.MessageHeader = MessageHeader;
 exports.Modal = Modal;
+exports.ModalBackground = ModalBackground;
+exports.ModalCard = ModalCard;
+exports.ModalCardBody = ModalCardBody;
+exports.ModalCardFoot = ModalCardFoot;
+exports.ModalCardHead = ModalCardHead;
+exports.ModalCardTitle = ModalCardTitle;
+exports.ModalClose = ModalClose;
+exports.ModalContent = ModalContent;
 exports.Navbar = Navbar;
 exports.NavbarBrand = NavbarBrand;
 exports.NavbarBurger = NavbarBurger;
@@ -31330,9 +31406,15 @@ exports.RingProgress = RingProgress;
 exports.ScrollArea = ScrollArea;
 exports.Section = Section;
 exports.SegmentedControl = SegmentedControl;
+exports.SegmentedControlSegment = SegmentedControlSegment;
 exports.Select = Select;
 exports.SelectBase = SelectBase;
 exports.Sidebar = Sidebar;
+exports.SidebarBody = SidebarBody;
+exports.SidebarClose = SidebarClose;
+exports.SidebarFooter = SidebarFooter;
+exports.SidebarHeader = SidebarHeader;
+exports.SidebarTitle = SidebarTitle;
 exports.Skeleton = Skeleton;
 exports.Slider = Slider;
 exports.Span = Span;