@allxsmith/bestax-bulma 5.52.0 → 5.53.0

package/dist/index.cjs

@@ -3909,6 +3909,255 @@ function useIsHydrated() {
     return React.useSyncExternalStore(subscribeToNothing, getClientSnapshot, getServerSnapshot);
 }
 
+// INTERNAL: deliberately not exported from src/index.ts. What a locale says
+// about its direction, read from `Intl.Locale` where the engine has the data,
+// and about its week, read from a copy of CLDR's week data.
+/**
+ * Scripts written right to left: every script for which ICU's text info
+ * says `rtl`, as Node reported it, and `Aran`, the Nastaliq form of Arabic
+ * that WebKit fills in for Urdu. Read only where the engine has no text info
+ * of its own, which includes Firefox before 153.
+ */
+const RTL_SCRIPTS = ' Adlm Arab Aran Armi Avst Chrs Cprt Elym Gara Hatr Hebr Hung Khar Lydi ' +
+    'Mand Mani Mend Merc Mero Narb Nbat Nkoo Orkh Ougr Palm Phli Phlp Phnx ' +
+    'Prti Rohg Samr Sarb Sidt Sogd Sogo Syrc Thaa Yezi ';
+/**
+ * Widely used languages whose usual script reads right to left, for an engine
+ * that can't fill in a locale's script with `maximize()`.
+ */
+const RTL_LANGUAGES = ' ar ckb dv fa he iw ji ks mzn nqo pnb ps sd syr ug ur yi ';
+/**
+ * The regions whose week doesn't start on Monday, by the day it starts on
+ * (0 = Sunday, 5 = Friday, 6 = Saturday), from CLDR 48's week data as Node
+ * reported it. The library reads this rather than `Intl.Locale`'s week info
+ * because engines disagree: Firefox before 153 has none, and WebKit's differs
+ * from Node's, Chromium's and current Firefox's for China, Algeria, Jordan and
+ * Iceland among others, so an inline calendar rendered on the server would
+ * fail to hydrate there. With one table, the server and every browser agree.
+ */
+const WEEK_STARTS = [
+    [
+        0,
+        ' AG AS BD BR BS BT BU BW BZ CA CO DM DO ET GT GU HK HN ID IL IN IS JM JP ' +
+            'KE KH KR LA MH MM MO MT MX MZ NI NP PA PE PH PK PR PT PY RH SA SG SV TH ' +
+            'TT TW UM US VE VI WS YD YE ZA ZW ',
+    ],
+    [5, ' MV '],
+    [6, ' AF BH DJ DZ EG IQ IR JO KW LY OM QA SD SY '],
+];
+/** Whether a space-separated list, padded with spaces, holds `code`. */
+const listed = (list, code) => list.includes(` ${code} `);
+/** The `-u-fw-` keyword's values, by the day they name. */
+const FW_DAYS = {
+    sun: 0,
+    mon: 1,
+    tue: 2,
+    wed: 3,
+    thu: 4,
+    fri: 5,
+    sat: 6,
+};
+/**
+ * The canonical form of a BCP 47 tag (`"en-us"` becomes `"en-US"`), or
+ * `undefined` for an empty or missing one. Throws a `RangeError` for a tag
+ * `Intl` refuses, as `Intl.DateTimeFormat` would.
+ */
+function canonicalLocale(tag) {
+    if (!tag)
+        return undefined;
+    return Intl.getCanonicalLocales(tag)[0];
+}
+/**
+ * The direction a locale's script is written in: from `Intl.Locale`'s text
+ * info, else from the script `maximize()` fills in, else from the language.
+ *
+ * @param locale - A canonical tag, as `canonicalLocale` returns.
+ */
+function localeDirection(locale) {
+    const intlLocale = new Intl.Locale(locale);
+    const info = intlLocale;
+    const direction = typeof info.getTextInfo === 'function'
+        ? info.getTextInfo().direction
+        : info.textInfo?.direction;
+    if (direction === 'rtl' || direction === 'ltr')
+        return direction;
+    if (typeof intlLocale.maximize === 'function') {
+        const script = intlLocale.maximize().script;
+        return script && listed(RTL_SCRIPTS, script) ? 'rtl' : 'ltr';
+    }
+    return listed(RTL_LANGUAGES, intlLocale.language) ? 'rtl' : 'ltr';
+}
+/**
+ * The day a locale's week starts on, 0 for Sunday, as `getWeekInfo()` reads
+ * it: the tag's `-u-fw-` keyword, else the region its `-u-rg-` keyword names,
+ * else its own region or the one `maximize()` fills in, looked up in CLDR's
+ * week data, where a region not listed starts on Monday.
+ *
+ * @param locale - A canonical tag, as `canonicalLocale` returns.
+ */
+function localeFirstDay(locale) {
+    const fw = /-u(?:-[a-z0-9]{2,8})*?-fw-([a-z]{3})(?=-|$)/i.exec(locale);
+    if (fw && fw[1].toLowerCase() in FW_DAYS)
+        return FW_DAYS[fw[1].toLowerCase()];
+    const rg = /-u(?:-[a-z0-9]{2,8})*?-rg-([a-z]{2})[a-z0-9]{1,4}(?=-|$)/i.exec(locale);
+    const intlLocale = new Intl.Locale(locale);
+    const region = rg
+        ? rg[1].toUpperCase()
+        : typeof intlLocale.maximize === 'function'
+            ? intlLocale.maximize().region
+            : intlLocale.region;
+    if (region) {
+        for (const [day, regions] of WEEK_STARTS) {
+            if (listed(regions, region))
+                return day;
+        }
+    }
+    return 1;
+}
+
+const LocaleContext = React.createContext(null);
+/** The nearest provider's wrapper element, for `LocalePortalScope` to test targets against. */
+const LocaleElementContext = React.createContext(null);
+/** A tag in canonical form, or `undefined`, warning about one `Intl` refuses. */
+function validLocale(tag) {
+    try {
+        return canonicalLocale(tag);
+    }
+    catch {
+        warnOnce(`locale-provider-invalid:${tag}`, `[bestax-bulma] <LocaleProvider locale="${tag}">: not a language ` +
+            'tag Intl accepts, so it is ignored. Use a BCP 47 tag such as ' +
+            '"en-US", with a hyphen rather than an underscore.');
+        return undefined;
+    }
+}
+/**
+ * Sets the language and writing direction for the part of the app inside it, on a wrapper `<div>` and on what the library portals out of it.
+ *
+ * The wrapper carries `dir` and `lang`, so CSS and the components that read
+ * the computed direction follow it, as they follow `<html dir>`. A `locale`
+ * alone sets the direction of its script, and a `dir` sets the direction
+ * whatever the locale. A nested provider keeps whatever it leaves unset.
+ *
+ * Inside it, the date and time pickers take its `locale` unless given their
+ * own, and their week starts on the first day of the locale they use unless
+ * `firstDayOfWeek` is set, and a picker with a `locale` of its own is read
+ * like a nested provider. The library's portaled content, such as a
+ * `Popover` panel, a `Modal` with `portal`, a `Toast` or a `Portal`'s
+ * children, keeps the same `dir` and `lang` though it renders outside the
+ * wrapper: in a container outside the wrapper, it sits in a
+ * `display: contents` element that carries them. Without a provider none of
+ * this changes.
+ *
+ * @function
+ * @param {LocaleProviderProps} props - Props for the LocaleProvider.
+ * @returns {JSX.Element} The wrapper, inside the context.
+ *
+ * @example
+ * <LocaleProvider locale="ar-EG">
+ *   <App />
+ * </LocaleProvider>
+ */
+const LocaleProvider = React.forwardRef(({ locale: localeProp, dir: dirProp, className, children, ...props }, ref) => {
+    const outer = React.useContext(LocaleContext);
+    const ownLocale = React.useMemo(() => validLocale(localeProp), [localeProp]);
+    const ownLocaleDir = React.useMemo(() => (ownLocale ? localeDirection(ownLocale) : undefined), [ownLocale]);
+    const locale = ownLocale || outer?.locale;
+    const dir = dirProp || ownLocaleDir || outer?.dir;
+    const value = React.useMemo(() => ({ locale, dir }), [locale, dir]);
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    // The wrapper, for portaled content to tell whether its target is inside
+    // it, and the caller's ref. A callback ref's cleanup is held and run on
+    // detach, as Toast and Modal do, since React 18 discards the return value.
+    const elementRef = React.useRef(null);
+    const consumerCleanupRef = React.useRef(null);
+    const setElement = React.useCallback((node) => {
+        elementRef.current = node;
+        if (typeof ref === 'function') {
+            if (node === null) {
+                const consumerCleanup = consumerCleanupRef.current;
+                consumerCleanupRef.current = null;
+                if (consumerCleanup)
+                    consumerCleanup();
+                else
+                    ref(null);
+                return;
+            }
+            const cleanup = ref(node);
+            consumerCleanupRef.current =
+                typeof cleanup === 'function' ? cleanup : null;
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    return (jsxRuntime.jsx(LocaleContext.Provider, { value: value, children: jsxRuntime.jsx(LocaleElementContext.Provider, { value: elementRef, children: jsxRuntime.jsx("div", { ref: setElement, className: classNames(bulmaHelperClasses, className) || undefined, ...rest, dir: dir, lang: locale, children: children }) }) }));
+});
+LocaleProvider.displayName = 'LocaleProvider';
+/** What `useLocale` returns outside a provider, the same object each time. */
+const noLocale = {};
+/**
+ * The locale and direction the nearest `LocaleProvider` sets, for an app's own `Intl` calls or its own portaled content; both are `undefined` outside one.
+ *
+ * It isn't the page's direction: with no provider, or one that sets no
+ * direction, the page's `<html dir>` still decides. To act on the direction
+ * an element is laid out in, read `getComputedStyle(element).direction`, as
+ * the library's components do.
+ *
+ * @function
+ * @returns {LocaleContextValue} The nearest provider's `locale` and `dir`.
+ *
+ * @example
+ * const { locale } = useLocale();
+ * const price = new Intl.NumberFormat(locale, {
+ *   style: 'currency',
+ *   currency: 'EUR',
+ * }).format(12.5);
+ */
+function useLocale() {
+    return React.useContext(LocaleContext) ?? noLocale;
+}
+/**
+ * INTERNAL, deliberately not exported from `src/index.ts`. The nearest
+ * provider's settings, or `null` outside any provider, so a caller can tell
+ * "no provider" from "a provider that sets nothing".
+ */
+function useLocaleScope() {
+    return React.useContext(LocaleContext);
+}
+const displayContents = { display: 'contents' };
+/**
+ * INTERNAL, deliberately not exported from `src/index.ts`. Keeps the `dir`
+ * and `lang` of the nearest provider, or the `scope` given in their place,
+ * on content the library portals into `target`, which has left the
+ * provider's wrapper behind.
+ *
+ * A target inside the provider's own wrapper gets the content as it is: it
+ * inherits from the wrapper, and follows it when the provider changes.
+ * Content that must be its container's direct child, a `<tr>` portaled into
+ * a `<tbody>` there, stays one. Any other target, `document.body` included,
+ * gets the content inside a `display: contents` element carrying the
+ * values, which adds no box. So does content with a `scope` of its own, a
+ * picker's panel, since the provider's values aren't its own.
+ *
+ * Which of the two is decided once, when the content mounts, and kept while
+ * it stays: switching between them would put a different element in its
+ * place and remount everything inside, losing typed text, focus and timers.
+ * A change of locale or direction updates the wrapper's attributes instead.
+ * A target is never left bare because something else, such as `<html>`,
+ * happens to carry the same values, since that can stop being true without
+ * the content remounting. Outside a provider it renders the children alone,
+ * so nothing changes there.
+ */
+function LocalePortalScope({ children, target, scope, }) {
+    const provider = React.useContext(LocaleContext);
+    const element = React.useContext(LocaleElementContext);
+    const [wrap] = React.useState(() => scope !== undefined || !element?.current?.contains(target));
+    if (!provider || !wrap)
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+    const values = scope ?? provider;
+    return (jsxRuntime.jsx("div", { dir: values.dir, lang: values.locale, style: displayContents, children: children }));
+}
+
 /**
  * Resolves a portal target: an `HTMLElement` is used directly, a non-empty
  * `string` is treated as a `document.querySelector` selector (falling back to
@@ -3970,6 +4219,17 @@ function usePortalContainer() {
  * also reaches what the library's components portal, such as Popover's
  * `appendToBody` panel or a `Modal` with `portal`.
  *
+ * Inside a `LocaleProvider`, the children keep its `dir` and `lang`. A
+ * container inside the provider's own wrapper takes the children as they
+ * are, and they follow the provider through the page. Any other,
+ * `document.body` included, gets them inside one `<div>` carrying the
+ * provider's values, with `display: contents` so it adds no box. It is
+ * still an element, so content that must be the container's direct child,
+ * a `<tr>` in a `<tbody>`, or that a direct-child selector styles, belongs
+ * in a container inside the provider. Which of the two is settled when the
+ * children mount, so a change of locale updates them in place rather than
+ * remounting them.
+ *
  * Tab order and focus follow the DOM too. Content portaled from inside a
  * focus trap is no longer inside the trapped element, so the trap neither
  * reaches it nor holds focus there: render nested overlays inside the
@@ -3999,7 +4259,8 @@ function Portal({ children, container, disabled = false }) {
         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
     if (!hydrated)
         return null;
-    return reactDom.createPortal(children, resolveContainer(container));
+    const target = resolveContainer(container);
+    return reactDom.createPortal(jsxRuntime.jsx(LocalePortalScope, { target: target, children: children }), target);
 }
 
 // INTERNAL: deliberately not exported from src/index.ts.
@@ -4911,7 +5172,7 @@ const ModalRoot = React.forwardRef(function ModalRoot({ active, isActive, onClos
     modalElement = (jsxRuntime.jsx(ModalCloseContext.Provider, { value: onClose, children: modalElement }));
     if (isPortaled) {
         const target = resolveContainer(typeof portal === 'boolean' ? undefined : portal);
-        return reactDom.createPortal(modalElement, target);
+        return reactDom.createPortal(jsxRuntime.jsx(LocalePortalScope, { target: target, children: modalElement }), target);
     }
     return modalElement;
 });
@@ -8786,7 +9047,8 @@ const SidebarComponent = React.forwardRef(({ isOpen, onClose, position = 'left',
     }
     // Render to portal for proper stacking
     if (typeof document !== 'undefined') {
-        return reactDom.createPortal(sidebarContent, resolveContainer());
+        const target = resolveContainer();
+        return reactDom.createPortal(jsxRuntime.jsx(LocalePortalScope, { target: target, children: sidebarContent }), target);
     }
     return null;
 });
@@ -9051,7 +9313,8 @@ const Toast = React.forwardRef(({ message, type = 'default', actionType, positio
     }
     const toastContent = jsxRuntime.jsx("div", { className: containerClasses, children: toastElement });
     if (typeof document !== 'undefined') {
-        return reactDom.createPortal(toastContent, resolveContainer(container));
+        const target = resolveContainer(container);
+        return reactDom.createPortal(jsxRuntime.jsx(LocalePortalScope, { target: target, children: toastContent }), target);
     }
     return null;
 });
@@ -9213,10 +9476,11 @@ const ToastContainer = ({ position = 'top-right' }) => {
         return null;
     }
     const stacks = groupIntoPositionStacks(toastList, t => t.props.position, position, toastStackOrder);
-    return reactDom.createPortal(stacks.map(stack => (jsxRuntime.jsx("div", { className: `toast-container is-${stack.position}`, children: stack.items.map(t => {
-            const { queue: _queue, ...toastProps } = t.props;
-            return (jsxRuntime.jsx(Toast, { ...toastProps, position: stack.position, onClose: () => toast.close(t.id) }, t.id));
-        }) }, stack.key))), resolveContainer());
+    const target = resolveContainer();
+    return reactDom.createPortal(jsxRuntime.jsx(LocalePortalScope, { target: target, children: stacks.map(stack => (jsxRuntime.jsx("div", { className: `toast-container is-${stack.position}`, children: stack.items.map(t => {
+                const { queue: _queue, ...toastProps } = t.props;
+                return (jsxRuntime.jsx(Toast, { ...toastProps, position: stack.position, onClose: () => toast.close(t.id) }, t.id));
+            }) }, stack.key))) }), target);
 };
 
 /**
@@ -10566,6 +10830,22 @@ const useInsideControl = () => React.useContext(ControlContext);
 const FieldProvider = FieldContext.Provider;
 /** Provider for Control context — used internally by Control component. */
 const ControlProvider = ControlContext.Provider;
+const FieldsetDisabledContext = React.createContext(false);
+/**
+ * An input's `disabled`: its own prop when the caller set one, otherwise
+ * whether a disabled `Fieldset` holds it. A `<fieldset disabled>` disables the
+ * native controls inside on its own, and this carries the same state to what
+ * the browser doesn't reach, such as Rate's stars, the time wheels, and the
+ * `is-disabled` classes. The content of a Fieldset's legend reads the state
+ * from outside that Fieldset, as the browser leaves the first legend's
+ * controls enabled. Internal; not part of the public API.
+ */
+const useFieldsetDisabled = (disabled) => {
+    const inherited = React.useContext(FieldsetDisabledContext);
+    return disabled ?? inherited;
+};
+/** Provider for a Fieldset's disabled state, used internally by Fieldset. */
+const FieldsetDisabledProvider = FieldsetDisabledContext.Provider;
 // Each Field-shaping prop, with what takes its place on a `Field` the caller
 // wraps around the `Control`. `message` needs nothing there, because the
 // wrapper still renders it inside `Field > Control`. The other Field-level
@@ -10847,7 +11127,8 @@ const checkboxSizes = ['small', 'normal', 'medium', 'large'];
  *   <Checkbox value="vue">Vue</Checkbox>
  * </Checkboxes>
  */
-const Checkbox = React.forwardRef(({ color, size, className, children, textColor, disabled, name, value, checked, defaultChecked, indeterminate, onChange, ...props }, ref) => {
+const Checkbox = React.forwardRef(({ color, size, className, children, textColor, disabled: disabledProp, name, value, checked, defaultChecked, indeterminate, onChange, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         ...props,
@@ -12082,7 +12363,8 @@ const Field = withSubComponents(FieldComponent, {
  * @returns {JSX.Element} The rendered input element.
  * @see {@link https://bulma.io/documentation/form/input/ | Bulma Input documentation}
  */
-const InputBase = React.forwardRef(({ color, size, isRounded, isStatic, isHovered, isFocused, isLoading, className, disabled, readOnly, ...props }, ref) => {
+const InputBase = React.forwardRef(({ color, size, isRounded, isStatic, isHovered, isFocused, isLoading, className, disabled: disabledProp, readOnly, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color,
         ...props,
@@ -13740,7 +14022,8 @@ const NotificationContainer = ({ position = 'top-right' }) => {
         return null;
     }
     const stacks = groupIntoPositionStacks(items, item => item.options.position, position, notificationStackOrder);
-    return reactDom.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [stacks.map(stack => (jsxRuntime.jsx("div", { style: notificationStackStyle(stack.position), children: stack.items.map(item => (jsxRuntime.jsx(NotificationItem, { instance: item, onClose: notification.close, registerMessage: registerMessage }, item.id))) }, stack.key))), jsxRuntime.jsx(StatusRegion, { items: politeItems, describe: describe })] }), resolveContainer());
+    const target = resolveContainer();
+    return reactDom.createPortal(jsxRuntime.jsxs(LocalePortalScope, { target: target, children: [stacks.map(stack => (jsxRuntime.jsx("div", { style: notificationStackStyle(stack.position), children: stack.items.map(item => (jsxRuntime.jsx(NotificationItem, { instance: item, onClose: notification.close, registerMessage: registerMessage }, item.id))) }, stack.key))), jsxRuntime.jsx(StatusRegion, { items: politeItems, describe: describe })] }), target);
 };
 
 /**
@@ -14349,7 +14632,8 @@ const checkboxCardColors = [
  *   <CheckboxCard value="domain" title="Custom domain" description="Bring your own." />
  * </Checkboxes>
  */
-const CheckboxCard = React.forwardRef(({ title, description, children, hasIndicator = true, color, className, textColor, disabled, name, value, checked, defaultChecked, indeterminate, onChange, ...props }, ref) => {
+const CheckboxCard = React.forwardRef(({ title, description, children, hasIndicator = true, color, className, textColor, disabled: disabledProp, name, value, checked, defaultChecked, indeterminate, onChange, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         ...props,
@@ -14544,6 +14828,61 @@ const CheckboxesComponent = ({ label, labelSize, labelProps, horizontal, message
 };
 const Checkboxes = withSubComponents(CheckboxesComponent, { Checkbox }, 'Checkboxes');
 
+// What an unlabeled Field passes on: no label names anything inside.
+const NO_LABEL = {};
+/**
+ * The `Fieldset` component groups a section of a form in a native
+ * `<fieldset>`, named by its `legend`, which a `disabled` switches off as a
+ * whole.
+ *
+ * It starts its own Field scope: inside it, nothing reads as inside a
+ * `Field` or `Control`, so the convenience inputs render their own `Field`,
+ * and a labeled `Field` around the Fieldset names nothing in it.
+ *
+ * @function
+ * @param {FieldsetProps} props - Props for the Fieldset component.
+ * @returns {JSX.Element} The rendered fieldset.
+ *
+ * @example
+ * <Fieldset legend="Shipping address" message="We only ship within the EU.">
+ *   <Input label="Street" name="street" />
+ *   <Input label="City" name="city" />
+ * </Fieldset>
+ *
+ * @example
+ * // A form that's saving
+ * <Fieldset disabled={saving} variant="unstyled">
+ *   <Input label="Name" name="name" />
+ *   <Rate label="Rating" name="rating" />
+ * </Fieldset>
+ */
+const Fieldset = React.forwardRef(({ legend, legendProps, variant = 'default', disabled, message, messageColor, textColor, bgColor, className, children, 'aria-describedby': ariaDescribedBy, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const mainClass = usePrefixedClassNames('fieldset', {
+        'is-filled': variant === 'filled',
+        'is-unstyled': variant === 'unstyled',
+    });
+    const legendClass = usePrefixedClassNames('fieldset-legend');
+    const helpClass = usePrefixedClassNames('help', {
+        [`is-${messageColor}`]: !!messageColor,
+    });
+    // The legend's controls take the state from outside, as the browser
+    // leaves the first legend's controls enabled, and the content takes this
+    // Fieldset's on top of it, as a disabled one disables those inside it.
+    const outerDisabled = useFieldsetDisabled(undefined);
+    const groupDisabled = !!disabled || outerDisabled;
+    const messageId = `${React.useId()}-message`;
+    const describedBy = [ariaDescribedBy, message ? messageId : undefined]
+        .filter(Boolean)
+        .join(' ') || undefined;
+    return (jsxRuntime.jsx(FieldProvider, { value: false, children: jsxRuntime.jsx(ControlProvider, { value: false, children: jsxRuntime.jsx(FieldLabelIdProvider, { value: undefined, children: jsxRuntime.jsx(FieldLabelElementIdProvider, { value: undefined, children: jsxRuntime.jsx(FieldLabelForProvider, { value: NO_LABEL, children: jsxRuntime.jsx(FieldLabelForReportProvider, { value: undefined, children: jsxRuntime.jsxs("fieldset", { ref: ref, className: classNames(mainClass, bulmaHelperClasses, className), disabled: disabled, "aria-describedby": describedBy, ...rest, children: [legend ? (jsxRuntime.jsx("legend", { ...legendProps, className: classNames(legendClass, legendProps?.className), children: legend })) : null, jsxRuntime.jsx(FieldsetDisabledProvider, { value: groupDisabled, children: children }), message ? (jsxRuntime.jsx("p", { id: messageId, className: helpClass, children: message })) : null] }) }) }) }) }) }) }));
+});
+Fieldset.displayName = 'Fieldset';
+
 /**
  * The `File` component provides a Bulma-styled file input, supporting color, size, boxed/fullwidth/align styles, icons, "has name", and filename display.
  *
@@ -14704,7 +15043,8 @@ const radioSizes = ['small', 'normal', 'medium', 'large'];
  *   <Radio value="blue">Blue</Radio>
  * </Radios>
  */
-const Radio = React.forwardRef(({ color, size, className, children, textColor, disabled, name, value, checked, defaultChecked, onChange, ...props }, ref) => {
+const Radio = React.forwardRef(({ color, size, className, children, textColor, disabled: disabledProp, name, value, checked, defaultChecked, onChange, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         ...props,
@@ -14774,7 +15114,8 @@ const radioCardColors = [
  *   <RadioCard value="express" title="Express" description="Arrives tomorrow." />
  * </Radios>
  */
-const RadioCard = React.forwardRef(({ title, description, children, hasIndicator = true, color, className, textColor, disabled, name, value, checked, defaultChecked, onChange, ...props }, ref) => {
+const RadioCard = React.forwardRef(({ title, description, children, hasIndicator = true, color, className, textColor, disabled: disabledProp, name, value, checked, defaultChecked, onChange, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         ...props,
@@ -14973,7 +15314,8 @@ const switchSizes = ['small', 'normal', 'medium', 'large'];
  *   Feature enabled
  * </Switch>
  */
-const Switch = React.forwardRef(({ color, size, isRounded, isThin, isOutlined, isRtl, passiveType, className, children, textColor, disabled, ...props }, ref) => {
+const Switch = React.forwardRef(({ color, size, isRounded, isThin, isOutlined, isRtl, passiveType, className, children, textColor, disabled: disabledProp, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         ...props,
@@ -15075,10 +15417,11 @@ const Slider = React.forwardRef((props, ref) => {
     }
     // Destructure base / shared props from a `SliderBaseProps` view. None of
     // these fields differ between the two branches, so this view is safe.
-    const { label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, min = 0, max = 100, step = 1, size, color, isRounded = false, isCircle = false, disabled = false, showOutput = false, tooltip, ticks, marks, orientation = 'horizontal', scale, getAriaValueText, formatOutput, className, 
+    const { label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, min = 0, max = 100, step = 1, size, color, isRounded = false, isCircle = false, disabled: disabledProp, showOutput = false, tooltip, ticks, marks, orientation = 'horizontal', scale, getAriaValueText, formatOutput, className, 
     // Strip the discriminated/union fields from `restProps` so they don't
     // flow back into `useBulmaClasses` / spread onto inputs.
     range: _range, value: _value, defaultValue: _defaultValue, onChange: _onChange, ariaLabel: _ariaLabel, minDistance: _minDistance, nameLow: _nameLow, nameHigh: _nameHigh, ...restProps } = props;
+    const disabled = useFieldsetDisabled(disabledProp);
     const insideField = useInsideField();
     const insideControl = useInsideControl();
     const ownField = rendersOwnField('Slider', {
@@ -15498,7 +15841,8 @@ const ArrowDropDown = () => (jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill:
  */
 const Numberinput = React.forwardRef(({ 
 // Field props
-label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue, min, max, step = 1, size, color, inputColor, controlsPosition = 'both', controlsRounded = false, compact = false, bare, variant = 'plusminus', disabled = false, editable = true, isLoading = false, exponential = false, onChange, className, ...props }, ref) => {
+label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue, min, max, step = 1, size, color, inputColor, controlsPosition = 'both', controlsRounded = false, compact = false, bare, variant = 'plusminus', disabled: disabledProp, editable = true, isLoading = false, exponential = false, onChange, className, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
     const insideField = useInsideField();
     // Bare controls join their parent's row, which a `.control` does not lay
     // out. `useInsideControl()` is true anywhere below a `Control`, even past
@@ -15708,7 +16052,8 @@ const toAsciiDigits = (text) => text.replace(/\p{Nd}/gu, digit => {
  */
 const PinInput = React.forwardRef(({ 
 // Field props
-label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, length = 6, value: controlledValue, defaultValue = '', type = 'number', isMasked = false, color, size, isRounded = false, disabled = false, onChange, onComplete, onPaste, onFocus, onBlur, className, ...props }, ref) => {
+label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, length = 6, value: controlledValue, defaultValue = '', type = 'number', isMasked = false, color, size, isRounded = false, disabled: disabledProp, onChange, onComplete, onPaste, onFocus, onBlur, className, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
     const insideField = useInsideField();
     const insideControl = useInsideControl();
     const ownField = rendersOwnField('PinInput', {
@@ -15891,7 +16236,8 @@ function getFillPercent(iconIndex, value) {
  * // With Font Awesome icons
  * <Rate iconName="star" iconLibrary="fa" iconVariant="solid" />
  */
-const Rate = React.forwardRef(({ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue = 0, max = 5, size, disabled = false, showScore = false, showText = false, texts, onChange, customIcon, spaced = false, rtl = false, iconName, iconLibrary: iconLibraryProp, iconVariant, iconFeatures, color, precision = 1, customText, name, form, className, ...props }, ref) => {
+const Rate = React.forwardRef(({ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue = 0, max = 5, size, disabled: disabledProp, showScore = false, showText = false, texts, onChange, customIcon, spaced = false, rtl = false, iconName, iconLibrary: iconLibraryProp, iconVariant, iconFeatures, color, precision = 1, customText, name, form, className, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
     const insideField = useInsideField();
     const insideControl = useInsideControl();
     const ownField = rendersOwnField('Rate', {
@@ -16161,7 +16507,7 @@ const isEnabled = (item) => typeof item === 'string' || !item.disabled;
  *   onSelect={(item) => console.log(item)}
  * />
  */
-const Autocomplete = React.forwardRef(({ data = [], value: controlledValue, placeholder, field = 'label', clearable = false, openOnFocus = false, keepFirst = false, keepOpen = false, selectOnClickOutside = false, maxHeight = 200, loading = false, disabled = false, checkInfiniteScroll = false, infiniteScrollDistance = 50, color, size, onInput, onSelect, onActiveChange, onInfiniteScroll, itemTemplate, header, footer, empty, name, form, required, id, 
+const Autocomplete = React.forwardRef(({ data = [], value: controlledValue, placeholder, field = 'label', clearable = false, openOnFocus = false, keepFirst = false, keepOpen = false, selectOnClickOutside = false, maxHeight = 200, loading = false, disabled: disabledProp, checkInfiniteScroll = false, infiniteScrollDistance = 50, color, size, onInput, onSelect, onActiveChange, onInfiniteScroll, itemTemplate, header, footer, empty, name, form, required, id, 
 // Deprecated no-ops, taken here so they stay off the wrapper.
 // eslint-disable-next-line @typescript-eslint/no-unused-vars -- deprecated no-op
 selected, 
@@ -16169,6 +16515,7 @@ selected,
 dropdown, 
 // Field props
 label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, className, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
     const insideField = useInsideField();
     // The suggestion list points `aria-labelledby` at the label that names
     // the input, so it needs that label's id.
@@ -16891,7 +17238,8 @@ const asList = (value) => value == null ? [] : Array.isArray(value) ? value : [v
 const ComboboxFromData = React.forwardRef((props, ref) => {
     const { data, value, defaultValue, 
     // Called below through `props`, which knows which value it takes.
-    onChange: _onChange, multiple = false, placeholder, name, empty, itemTemplate, onSelect, onOpenChange, inline = false, disabled = false, required = false, form, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ariaCloseLabel, children, ...rest } = props;
+    onChange: _onChange, multiple = false, placeholder, name, empty, itemTemplate, onSelect, onOpenChange, inline = false, disabled: disabledProp, required = false, form, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ariaCloseLabel, children, ...rest } = props;
+    const disabled = useFieldsetDisabled(disabledProp);
     // A name given in place of a label is the field's and the list's, not
     // the wrapper's. Only the ones given are passed, since an
     // `aria-labelledby` that's there at all, even undefined, keeps the
@@ -17086,7 +17434,8 @@ const isComposing = (e) => e.nativeEvent.isComposing || e.nativeEvent.keyCode ==
  */
 const Taginput = React.forwardRef(({ 
 // Field props
-label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue = [], data: dataProp, placeholder, field = 'label', allowNew = true, allowDuplicates = false, openOnFocus = false, removeOnKeys = true, confirmKeys = ['Enter', ','], closable = true, attached = false, maxTags, maxlength, disabled = false, readonly = false, rounded = false, ellipsis = false, hasCounter = true, onPasteSeparators = [','], beforeAdding, createTag, keepFirst = false, keepOpen = true, loading = false, ariaCloseLabel, icon, iconLibrary: iconLibraryProp, iconVariant, iconFeatures, color, tagColor, size, onChange, onAdd, onRemove, onTyping, tagTemplate, name, form, id, className, ...props }, ref) => {
+label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue = [], data: dataProp, placeholder, field = 'label', allowNew = true, allowDuplicates = false, openOnFocus = false, removeOnKeys = true, confirmKeys = ['Enter', ','], closable = true, attached = false, maxTags, maxlength, disabled: disabledProp, readonly = false, rounded = false, ellipsis = false, hasCounter = true, onPasteSeparators = [','], beforeAdding, createTag, keepFirst = false, keepOpen = true, loading = false, ariaCloseLabel, icon, iconLibrary: iconLibraryProp, iconVariant, iconFeatures, color, tagColor, size, onChange, onAdd, onRemove, onTyping, tagTemplate, name, form, id, className, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
     const insideField = useInsideField();
     const insideControl = useInsideControl();
     const ownField = rendersOwnField('Taginput', {
@@ -17457,7 +17806,8 @@ const TagInput = Taginput;
  * @returns {JSX.Element} The rendered select element.
  * @see {@link https://bulma.io/documentation/form/select/ | Bulma Select documentation}
  */
-const SelectBase = React.forwardRef(({ color, size, isRounded, isLoading, isActive, isHovered, isFocused, isFullwidth, isFullWidth, className, disabled, children, multiple, multipleSize, ...props }, ref) => {
+const SelectBase = React.forwardRef(({ color, size, isRounded, isLoading, isActive, isHovered, isFocused, isFullwidth, isFullWidth, className, disabled: disabledProp, children, multiple, multipleSize, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color,
         ...props,
@@ -17504,7 +17854,8 @@ SelectBase.displayName = 'SelectBase';
  * @returns {JSX.Element} The rendered textarea element.
  * @see {@link https://bulma.io/documentation/form/textarea/ | Bulma Textarea documentation}
  */
-const TextAreaBase = React.forwardRef(({ color, size, isRounded, isStatic, isHovered, isFocused, isLoading: _isLoading, isActive, hasFixedSize, className, disabled, readOnly, rows, ...props }, ref) => {
+const TextAreaBase = React.forwardRef(({ color, size, isRounded, isStatic, isHovered, isFocused, isLoading: _isLoading, isActive, hasFixedSize, className, disabled: disabledProp, readOnly, rows, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color,
         ...props,
@@ -19051,7 +19402,7 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
 Calendar.displayName = 'Calendar';
 
 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, }) => {
+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, }) => {
     const panelRef = React.useRef(null);
     const resolveContainer = usePortalContainer();
     // Read as the trap turns on, once the panel's content has rendered.
@@ -19149,7 +19500,8 @@ const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'botto
                 e.preventDefault();
         }, children: children }));
     if (appendToBody && isBrowser) {
-        return reactDom.createPortal(panel, resolveContainer());
+        const target = resolveContainer();
+        return reactDom.createPortal(jsxRuntime.jsx(LocalePortalScope, { target: target, scope: localeScope, children: panel }), target);
     }
     return panel;
 };
@@ -19951,6 +20303,79 @@ function supportsInputType(type) {
     return supported;
 }
 
+/**
+ * A picker's locale: its own `locale`, else the one a `LocaleProvider` around
+ * it sets, else `undefined`, which leaves `Intl` to use the runtime's.
+ */
+function usePickerLocale(own) {
+    const scope = useLocaleScope();
+    return own || scope?.locale;
+}
+const NO_ROOT_ATTRS = {};
+/**
+ * A picker's language and direction inside a `LocaleProvider`, by the rule a
+ * nested provider follows: its `lang` is its own `locale`, else the
+ * provider's, and its `dir` is the `dir` passed to it, else its own locale's
+ * direction when it has one, else the provider's. Outside a provider it
+ * changes nothing. A `locale` `Intl` refuses counts as none here, since the
+ * picker's own formatting reports it.
+ */
+function usePickerLocaleScope(ownLocale, ownDir) {
+    const scope = useLocaleScope();
+    return React.useMemo(() => {
+        if (!scope)
+            return { rootAttrs: NO_ROOT_ATTRS };
+        let own;
+        try {
+            own = canonicalLocale(ownLocale);
+        }
+        catch {
+            own = undefined;
+        }
+        const dir = ownDir || (own ? localeDirection(own) : scope.dir);
+        return {
+            rootAttrs: own ? { lang: own, dir } : NO_ROOT_ATTRS,
+            panel: { locale: own || scope.locale, dir },
+        };
+    }, [scope, ownLocale, ownDir]);
+}
+/**
+ * Whether a picker's `dayNames` replace the calendar's own, which `Calendar`
+ * does only for a full week of seven.
+ */
+function hasOwnDayNames(dayNames) {
+    return dayNames !== undefined && dayNames.length === 7;
+}
+/**
+ * The day a picker's week starts on: its own `firstDayOfWeek`, else, inside a
+ * `LocaleProvider`, the first day of the locale the picker uses, else Sunday.
+ * Outside a provider it stays Sunday whatever the locale, as it always has,
+ * and so does a picker inside one with no locale from either, since the
+ * runtime's own differs between the server and the browser.
+ *
+ * It also stays Sunday for a picker that brings its own `dayNames`. The
+ * calendar shows those exactly as given, in calendar order, and before the
+ * provider an unset `firstDayOfWeek` was always Sunday, so names written
+ * Sunday first would sit a day or more off their columns if the week moved
+ * under them.
+ */
+function usePickerFirstDayOfWeek(own, locale, hasDayNames) {
+    const inProvider = useLocaleScope() !== null;
+    return React.useMemo(() => {
+        if (own !== undefined)
+            return own;
+        if (!inProvider || !locale || hasDayNames)
+            return 0;
+        try {
+            return localeFirstDay(canonicalLocale(locale));
+        }
+        catch {
+            // A tag Intl refuses: the picker's own formatting says so.
+            return 0;
+        }
+    }, [own, inProvider, locale, hasDayNames]);
+}
+
 const DEFAULT_FORMATS = {
     day: DEFAULT_DATE_FORMAT,
     month: DEFAULT_MONTH_FORMAT,
@@ -19971,7 +20396,15 @@ const SKIPPED_SEGMENTS = {
  * @returns {JSX.Element}
  */
 const DateInputBase = React.forwardRef((props, ref) => {
-    const { value: controlledValue, defaultValue, onChange, onOpen, onClose, min, max, disabled, readOnly, placeholder, granularity = 'day', format, parse, locale, inline = false, mobileNative = 'auto', editable = true, popover = true, openOnFocus = true, closeOnSelect = true, position = 'bottom-left', appendToBody = false, color, size, isRounded, shouldDisableDate, unselectableDates, firstDayOfWeek = 0, 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 = '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;
+    // A LocaleProvider around the picker sets its default locale and, through
+    // that locale, the day its week starts on.
+    const locale = usePickerLocale(localeProp);
+    // Its own language and direction, which its root and a portaled panel
+    // carry inside a provider.
+    const localeScope = usePickerLocaleScope(localeProp, props.dir);
+    const firstDayOfWeek = usePickerFirstDayOfWeek(firstDayOfWeekProp, locale, hasOwnDayNames(dayNames));
+    const disabled = useFieldsetDisabled(disabledProp);
     // Inside a labeled Field the input takes the id the label points at
     // when the caller set none, as InputBase does, and the popover's ids
     // follow it. Inline there is no input to name, so nothing takes the
@@ -20171,7 +20604,7 @@ const DateInputBase = React.forwardRef((props, ref) => {
     // Native mobile path renders <input type="date"> (type="month" for a
     // month picker).
     if (useNative) {
-        return (jsxRuntime.jsx("input", { ...cleanRest, ref: combinedRef, type: isDayGranularity ? 'date' : 'month', className: classNames(inputClass, bulmaHelperClasses, className), value: value ? toIsoValue(value, granularity) : '', onChange: e => {
+        return (jsxRuntime.jsx("input", { ...localeScope.rootAttrs, ...cleanRest, ref: combinedRef, type: isDayGranularity ? 'date' : 'month', className: classNames(inputClass, bulmaHelperClasses, className), value: value ? toIsoValue(value, granularity) : '', onChange: e => {
                 const parsed = e.target.value
                     ? fromIsoValue(e.target.value, granularity)
                     : null;
@@ -20191,12 +20624,12 @@ const DateInputBase = React.forwardRef((props, ref) => {
         // keeps the id it released with.
         id: inline ? popoverId : `${popoverId}-cal`, autoFocusCell: open, labels: labels }, granularity));
     if (inline) {
-        return (jsxRuntime.jsxs("div", { ...cleanRest, ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), children: [calendar, name && (jsxRuntime.jsx("input", { type: "hidden", name: name, form: form, value: value ? toIsoValue(value, granularity) : '', required: required }))] }));
+        return (jsxRuntime.jsxs("div", { ...localeScope.rootAttrs, ...cleanRest, ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), children: [calendar, name && (jsxRuntime.jsx("input", { type: "hidden", name: name, form: form, value: value ? toIsoValue(value, granularity) : '', required: required }))] }));
     }
-    return (jsxRuntime.jsxs("div", { ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), ...cleanRest, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "text", role: "combobox", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": popoverId, autoComplete: "off", className: inputClass, value: text, placeholder: placeholder, disabled: disabled, readOnly: inputReadOnlyAttr, name: name, form: form, required: required, id: id, ...inputHandlers }), popover && triggerIcon && (jsxRuntime.jsx("button", { type: "button", className: triggerClass, onClick: () => {
+    return (jsxRuntime.jsxs("div", { ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), ...localeScope.rootAttrs, ...cleanRest, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "text", role: "combobox", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": popoverId, autoComplete: "off", className: inputClass, value: text, placeholder: placeholder, disabled: disabled, readOnly: inputReadOnlyAttr, name: name, form: form, required: required, id: id, ...inputHandlers }), popover && triggerIcon && (jsxRuntime.jsx("button", { type: "button", className: triggerClass, onClick: () => {
                     if (canOpen)
                         setOpen(!open);
-                }, disabled: !canOpen, "aria-label": chooseLabel, "aria-haspopup": "dialog", "aria-controls": popoverId, "aria-expanded": open, tabIndex: canOpen ? 0 : -1, children: jsxRuntime.jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsxRuntime.jsx(PickerPopover, { isOpen: open, onClose: handlePopoverClose, anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: chooseLabel, id: popoverId, restoreFocusRef: inputRef, initialFocusSelector: CALENDAR_FOCUSED_CELL, children: calendar }))] }));
+                }, disabled: !canOpen, "aria-label": chooseLabel, "aria-haspopup": "dialog", "aria-controls": popoverId, "aria-expanded": open, tabIndex: canOpen ? 0 : -1, children: jsxRuntime.jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsxRuntime.jsx(PickerPopover, { localeScope: localeScope.panel, isOpen: open, onClose: handlePopoverClose, anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: chooseLabel, id: popoverId, restoreFocusRef: inputRef, initialFocusSelector: CALENDAR_FOCUSED_CELL, children: calendar }))] }));
 });
 DateInputBase.displayName = 'DateInputBase';
 
@@ -21152,7 +21585,13 @@ const fromIsoTime = (s) => {
  * @returns {JSX.Element}
  */
 const TimeInputBase = React.forwardRef((props, ref) => {
-    const { value: controlledValue, defaultValue, onChange, onOpen, onClose, min, max, disabled, readOnly, placeholder, format, parse, locale, 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 = '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;
+    // 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
+    // carry inside a provider.
+    const localeScope = usePickerLocaleScope(localeProp, props.dir);
+    const disabled = useFieldsetDisabled(disabledProp);
     // Inside a labeled Field the input takes the id the label points at
     // when the caller set none, as InputBase does, and the popover's ids
     // follow it. Inline there is no input to name, so nothing takes the
@@ -21320,7 +21759,7 @@ const TimeInputBase = React.forwardRef((props, ref) => {
         const nativeStep = enableSeconds
             ? incrementSeconds
             : incrementMinutes * 60;
-        return (jsxRuntime.jsx("input", { ...cleanRest, ref: combinedRef, type: "time", step: nativeStep, className: classNames(inputClass, bulmaHelperClasses, className), value: value ? toIsoTime(value, enableSeconds) : '', onChange: e => {
+        return (jsxRuntime.jsx("input", { ...localeScope.rootAttrs, ...cleanRest, ref: combinedRef, type: "time", step: nativeStep, className: classNames(inputClass, bulmaHelperClasses, className), value: value ? toIsoTime(value, enableSeconds) : '', onChange: e => {
                 const parsed = e.target.value ? fromIsoTime(e.target.value) : null;
                 commitValue(parsed);
             }, min: min ? toIsoTime(min, enableSeconds) : undefined, max: max ? toIsoTime(max, enableSeconds) : undefined, disabled: disabled, readOnly: readOnly, placeholder: placeholder, name: name, form: form, required: required, id: id }));
@@ -21350,12 +21789,12 @@ const TimeInputBase = React.forwardRef((props, ref) => {
                             setOpen(false);
                         }, children: t.reset }), jsxRuntime.jsx("button", { type: "button", className: mobileFooterDoneClass, "aria-label": t.done, onClick: () => setOpen(false), children: jsxRuntime.jsx("svg", { width: "22", height: "22", viewBox: "0 0 22 22", "aria-hidden": "true", children: jsxRuntime.jsx("path", { d: "M5 11l4 4 8-8", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }))] }));
     if (inline) {
-        return (jsxRuntime.jsxs("div", { ...cleanRest, ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), children: [panel, name && (jsxRuntime.jsx("input", { type: "hidden", name: name, form: form, value: value ? toIsoTime(value, enableSeconds) : '', required: required }))] }));
+        return (jsxRuntime.jsxs("div", { ...localeScope.rootAttrs, ...cleanRest, ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), children: [panel, name && (jsxRuntime.jsx("input", { type: "hidden", name: name, form: form, value: value ? toIsoTime(value, enableSeconds) : '', required: required }))] }));
     }
-    return (jsxRuntime.jsxs("div", { ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), ...cleanRest, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "text", role: "combobox", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": popoverId, autoComplete: "off", className: inputClass, value: text, placeholder: placeholder, disabled: disabled, readOnly: inputReadOnlyAttr, name: name, form: form, required: required, id: id, ...inputHandlers }), popover && triggerIcon && (jsxRuntime.jsx("button", { type: "button", className: triggerClass, onClick: () => {
+    return (jsxRuntime.jsxs("div", { ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), ...localeScope.rootAttrs, ...cleanRest, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "text", role: "combobox", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": popoverId, autoComplete: "off", className: inputClass, value: text, placeholder: placeholder, disabled: disabled, readOnly: inputReadOnlyAttr, name: name, form: form, required: required, id: id, ...inputHandlers }), popover && triggerIcon && (jsxRuntime.jsx("button", { type: "button", className: triggerClass, onClick: () => {
                     if (canOpen)
                         setOpen(!open);
-                }, disabled: !canOpen, "aria-label": t.chooseTime, "aria-haspopup": "dialog", "aria-controls": popoverId, "aria-expanded": open, tabIndex: canOpen ? 0 : -1, children: jsxRuntime.jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsxRuntime.jsx(PickerPopover, { isOpen: open, onClose: () => setOpen(false), anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: t.chooseTime, id: popoverId, restoreFocusRef: inputRef, children: panel }))] }));
+                }, disabled: !canOpen, "aria-label": t.chooseTime, "aria-haspopup": "dialog", "aria-controls": popoverId, "aria-expanded": open, tabIndex: canOpen ? 0 : -1, children: jsxRuntime.jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsxRuntime.jsx(PickerPopover, { localeScope: localeScope.panel, isOpen: open, onClose: () => setOpen(false), anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: t.chooseTime, id: popoverId, restoreFocusRef: inputRef, children: panel }))] }));
 });
 TimeInputBase.displayName = 'TimeInputBase';
 
@@ -21467,9 +21906,17 @@ const fromIsoDateTime = (s) => {
  * @returns {JSX.Element}
  */
 const DateTimeInputBase = React.forwardRef((props, ref) => {
-    const { value: controlledValue, defaultValue, onChange, onOpen, onClose, min, max, disabled, readOnly, placeholder, format, parse, locale, inline = false, mobileNative = 'auto', editable = true, popover = true, openOnFocus = true, closeOnSelect = false, position = 'bottom-left', appendToBody = false, color, size, isRounded, shouldDisableDate, unselectableDates, firstDayOfWeek = 0, 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 = 'bottom-left', 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
+    // that locale, the day its week starts on.
+    const locale = usePickerLocale(localeProp);
+    // Its own language and direction, which its root and a portaled panel
+    // carry inside a provider.
+    const localeScope = usePickerLocaleScope(localeProp, props.dir);
+    const firstDayOfWeek = usePickerFirstDayOfWeek(firstDayOfWeekProp, locale, hasOwnDayNames(dayNames));
+    const disabled = useFieldsetDisabled(disabledProp);
     // Inside a labeled Field the input takes the id the label points at
     // when the caller set none, as InputBase does, and the popover's ids
     // follow it. Inline there is no input to name, so nothing takes the
@@ -21709,7 +22156,7 @@ const DateTimeInputBase = React.forwardRef((props, ref) => {
     }, [ref]);
     if (useNative) {
         const nativeStep = enableSeconds ? incrementSeconds : incrementMinutes * 60;
-        return (jsxRuntime.jsx("input", { ...cleanRest, ref: combinedRef, type: "datetime-local", step: nativeStep, className: classNames(inputClass, bulmaHelperClasses, className), value: value ? toIsoDateTime(value, enableSeconds) : '', onChange: e => {
+        return (jsxRuntime.jsx("input", { ...localeScope.rootAttrs, ...cleanRest, ref: combinedRef, type: "datetime-local", step: nativeStep, className: classNames(inputClass, bulmaHelperClasses, className), value: value ? toIsoDateTime(value, enableSeconds) : '', onChange: e => {
                 const parsed = e.target.value
                     ? fromIsoDateTime(e.target.value)
                     : null;
@@ -21740,12 +22187,12 @@ const DateTimeInputBase = React.forwardRef((props, ref) => {
                                 // is no popover, the wheels, as Escape does.
                                 onCommit: () => (inline ? closeTime() : setOpen(false)) }) }) }))] }), jsxRuntime.jsxs("div", { className: footerClass, children: [jsxRuntime.jsxs("button", { ref: timeButtonRef, type: "button", className: footerTimeClass, onClick: () => (timeOpen ? closeTime() : setTimeOpen(true)), "aria-expanded": timeOpen, "aria-controls": timeOpen ? timeWheelsId : undefined, disabled: disabled, children: [jsxRuntime.jsx("span", { children: t.time }), jsxRuntime.jsx("span", { className: footerTimePillClass, children: value ? formatTime(value, timeDisplayFormat, locale) : '—' })] }), jsxRuntime.jsxs("div", { className: footerActionsClass, children: [jsxRuntime.jsx("button", { type: "button", className: footerResetClass, onClick: () => commitValue(valueAtOpenRef.current), children: t.reset }), jsxRuntime.jsx("button", { type: "button", className: footerDoneClass, "aria-label": t.done, onClick: () => setOpen(false), children: jsxRuntime.jsx("svg", { width: "22", height: "22", viewBox: "0 0 22 22", "aria-hidden": "true", children: jsxRuntime.jsx("path", { d: "M5 11l4 4 8-8", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] })] }));
     if (inline) {
-        return (jsxRuntime.jsxs("div", { ...cleanRest, ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), children: [panel, name && (jsxRuntime.jsx("input", { type: "hidden", name: name, form: form, value: value ? toIsoDateTime(value, enableSeconds) : '', required: required }))] }));
+        return (jsxRuntime.jsxs("div", { ...localeScope.rootAttrs, ...cleanRest, ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), children: [panel, name && (jsxRuntime.jsx("input", { type: "hidden", name: name, form: form, value: value ? toIsoDateTime(value, enableSeconds) : '', required: required }))] }));
     }
-    return (jsxRuntime.jsxs("div", { ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), ...cleanRest, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "text", role: "combobox", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": popoverId, autoComplete: "off", className: inputClass, value: text, placeholder: placeholder, disabled: disabled, readOnly: inputReadOnlyAttr, name: name, form: form, required: required, id: id, ...inputHandlers }), popover && triggerIcon && (jsxRuntime.jsx("button", { type: "button", className: triggerClass, onClick: () => {
+    return (jsxRuntime.jsxs("div", { ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), ...localeScope.rootAttrs, ...cleanRest, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "text", role: "combobox", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": popoverId, autoComplete: "off", className: inputClass, value: text, placeholder: placeholder, disabled: disabled, readOnly: inputReadOnlyAttr, name: name, form: form, required: required, id: id, ...inputHandlers }), popover && triggerIcon && (jsxRuntime.jsx("button", { type: "button", className: triggerClass, onClick: () => {
                     if (canOpen)
                         setOpen(!open);
-                }, disabled: !canOpen, "aria-label": t.chooseDateTime, "aria-haspopup": "dialog", "aria-controls": popoverId, "aria-expanded": open, tabIndex: canOpen ? 0 : -1, children: jsxRuntime.jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsxRuntime.jsx(PickerPopover, { isOpen: open, onClose: () => setOpen(false), anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: t.chooseDateTime, id: popoverId, restoreFocusRef: inputRef, initialFocusSelector: CALENDAR_FOCUSED_CELL, children: panel }))] }));
+                }, disabled: !canOpen, "aria-label": t.chooseDateTime, "aria-haspopup": "dialog", "aria-controls": popoverId, "aria-expanded": open, tabIndex: canOpen ? 0 : -1, children: jsxRuntime.jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsxRuntime.jsx(PickerPopover, { localeScope: localeScope.panel, isOpen: open, onClose: () => setOpen(false), anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: t.chooseDateTime, id: popoverId, restoreFocusRef: inputRef, initialFocusSelector: CALENDAR_FOCUSED_CELL, children: panel }))] }));
 });
 DateTimeInputBase.displayName = 'DateTimeInputBase';
 
@@ -21844,7 +22291,15 @@ const today = () => startOfDay(new Date());
  * @returns {JSX.Element}
  */
 const DateRangeInputBase = React.forwardRef((props, ref) => {
-    const { value: controlledValue, defaultValue, onChange, onOpen, onClose, min, max, disabled, readOnly, placeholder, format, parse, locale, 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 = 0, 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 = '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;
+    // A LocaleProvider around the picker sets its default locale and, through
+    // that locale, the day its week starts on.
+    const locale = usePickerLocale(localeProp);
+    // Its own language and direction, which its root and a portaled panel
+    // carry inside a provider.
+    const localeScope = usePickerLocaleScope(localeProp, props.dir);
+    const firstDayOfWeek = usePickerFirstDayOfWeek(firstDayOfWeekProp, locale, hasOwnDayNames(dayNames));
+    const disabled = useFieldsetDisabled(disabledProp);
     // The launcher gives way to the loading spinner of a Control this sits in.
     const controlLoading = useControlLoading();
     const triggerIcon = triggerIconProp ?? !controlLoading;
@@ -22075,14 +22530,14 @@ const DateRangeInputBase = React.forwardRef((props, ref) => {
         };
         const minIso = min ? isoDay(lowerBound) : undefined;
         const maxIso = max ? isoDay(max) : undefined;
-        return (jsxRuntime.jsxs("div", { "aria-labelledby": ariaLabelledBy, ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: onFocus, onFocusCapture: onFocusCapture, children: [jsxRuntime.jsxs("div", { className: fieldClass, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "date", id: id, "aria-label": t.rangeStart, className: inputClass, value: isoDay(start), onChange: nativeChange(commitStart, isBlockedDay), min: minIso, max: maxIso, disabled: disabled, readOnly: readOnly, required: required }), separator, jsxRuntime.jsx("input", { ref: endRef, type: "date", id: id ? `${id}-end` : undefined, "aria-label": t.rangeEnd, className: inputClass, value: isoDay(end), onChange: nativeChange(commitEnd, isBlockedEnd), min: start ? isoDay(start) : minIso, max: maxIso, disabled: disabled, readOnly: readOnly, required: required })] }), hiddenInputs] }));
+        return (jsxRuntime.jsxs("div", { "aria-labelledby": ariaLabelledBy, ...localeScope.rootAttrs, ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: onFocus, onFocusCapture: onFocusCapture, children: [jsxRuntime.jsxs("div", { className: fieldClass, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "date", id: id, "aria-label": t.rangeStart, className: inputClass, value: isoDay(start), onChange: nativeChange(commitStart, isBlockedDay), min: minIso, max: maxIso, disabled: disabled, readOnly: readOnly, required: required }), separator, jsxRuntime.jsx("input", { ref: endRef, type: "date", id: id ? `${id}-end` : undefined, "aria-label": t.rangeEnd, className: inputClass, value: isoDay(end), onChange: nativeChange(commitEnd, isBlockedEnd), min: start ? isoDay(start) : minIso, max: maxIso, disabled: disabled, readOnly: readOnly, required: required })] }), hiddenInputs] }));
     }
     const calendar = (jsxRuntime.jsx(Calendar, { range: range, onRangeSelect: handleRangeSelect, allowDisabledInRange: allowDisabledInRange, focusedDate: focusedDate, onFocusedDateChange: setFocusedDate, min: min, max: max, shouldDisableDate: shouldDisableDate, unselectableDates: unselectableDates, firstDayOfWeek: firstDayOfWeek, locale: locale, dayNames: dayNames, monthNames: monthNames, nearbyMonthDays: nearbyMonthDays, color: color, size: size, 
         // The popover panel takes `popoverId`, so the calendar inside it takes
         // one of its own. Inline there is no panel.
         id: inline ? popoverId : `${popoverId}-cal`, autoFocusCell: open, labels: labels }));
     if (inline) {
-        return (jsxRuntime.jsxs("div", { "aria-labelledby": ariaLabelledBy, ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: onFocus, onFocusCapture: onFocusCapture, children: [calendar, hiddenInputs] }));
+        return (jsxRuntime.jsxs("div", { "aria-labelledby": ariaLabelledBy, ...localeScope.rootAttrs, ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: onFocus, onFocusCapture: onFocusCapture, children: [calendar, hiddenInputs] }));
     }
     const canOpen = !!popover && !disabled && !readOnly;
     const inputReadOnly = !!readOnly || !editable;
@@ -22117,9 +22572,9 @@ const DateRangeInputBase = React.forwardRef((props, ref) => {
         readOnly: inputReadOnly,
         required,
     };
-    return (jsxRuntime.jsxs("div", { "aria-labelledby": ariaLabelledBy, ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: handleFocus, onFocusCapture: handleFocusCapture, children: [jsxRuntime.jsxs("div", { className: fieldClass, onMouseDown: handleFieldMouseDown, children: [jsxRuntime.jsx("input", { ...comboboxProps, ref: combinedRef, id: id, "aria-label": t.rangeStart, value: startText, ...startHandlers }), separator, jsxRuntime.jsx("input", { ...comboboxProps, ref: endRef, id: id ? `${id}-end` : undefined, "aria-label": t.rangeEnd, value: endText, ...endHandlers })] }), popover && triggerIcon && (jsxRuntime.jsx("button", { type: "button", className: triggerClass, 
+    return (jsxRuntime.jsxs("div", { "aria-labelledby": ariaLabelledBy, ...localeScope.rootAttrs, ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: handleFocus, onFocusCapture: handleFocusCapture, children: [jsxRuntime.jsxs("div", { className: fieldClass, onMouseDown: handleFieldMouseDown, children: [jsxRuntime.jsx("input", { ...comboboxProps, ref: combinedRef, id: id, "aria-label": t.rangeStart, value: startText, ...startHandlers }), separator, jsxRuntime.jsx("input", { ...comboboxProps, ref: endRef, id: id ? `${id}-end` : undefined, "aria-label": t.rangeEnd, value: endText, ...endHandlers })] }), popover && triggerIcon && (jsxRuntime.jsx("button", { type: "button", className: triggerClass, 
                 // Disabled whenever the popover can't open, so a click can.
-                onClick: () => setOpen(!open), disabled: !canOpen, "aria-label": t.chooseDateRange, "aria-haspopup": "dialog", "aria-controls": popoverId, "aria-expanded": open, tabIndex: canOpen ? 0 : -1, children: jsxRuntime.jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsxRuntime.jsx(PickerPopover, { isOpen: open, onClose: handlePopoverClose, anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: t.chooseDateRange, id: popoverId, restoreFocusRef: restoreFocusRef, initialFocusSelector: CALENDAR_FOCUSED_CELL, children: calendar })), hiddenInputs] }));
+                onClick: () => setOpen(!open), disabled: !canOpen, "aria-label": t.chooseDateRange, "aria-haspopup": "dialog", "aria-controls": popoverId, "aria-expanded": open, tabIndex: canOpen ? 0 : -1, children: jsxRuntime.jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsxRuntime.jsx(PickerPopover, { localeScope: localeScope.panel, isOpen: open, onClose: handlePopoverClose, anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: t.chooseDateRange, id: popoverId, restoreFocusRef: restoreFocusRef, initialFocusSelector: CALENDAR_FOCUSED_CELL, children: calendar })), hiddenInputs] }));
 });
 DateRangeInputBase.displayName = 'DateRangeInputBase';
 
@@ -24369,6 +24824,7 @@ exports.EmptyStateTitle = EmptyStateTitle;
 exports.Field = Field;
 exports.FieldBody = FieldBody;
 exports.FieldLabel = FieldLabel;
+exports.Fieldset = Fieldset;
 exports.Figure = Figure;
 exports.File = File;
 exports.Footer = Footer;
@@ -24394,6 +24850,7 @@ exports.LinkButton = LinkButton;
 exports.ListItem = ListItem;
 exports.Loader = Loader;
 exports.Loading = Loading;
+exports.LocaleProvider = LocaleProvider;
 exports.Media = Media;
 exports.MediaContent = MediaContent;
 exports.MediaLeft = MediaLeft;
@@ -24524,6 +24981,7 @@ exports.useIconLibrary = useIconLibrary;
 exports.useInsideControl = useInsideControl;
 exports.useInsideField = useInsideField;
 exports.useIsHydrated = useIsHydrated;
+exports.useLocale = useLocale;
 exports.useOtherClasses = useOtherClasses;
 exports.usePrefixedClass = usePrefixedClass;
 exports.usePrefixedClassNames = usePrefixedClassNames;