@allxsmith/bestax-bulma 5.26.6 → 5.27.1

package/dist/esm/helpers/Theme.js

@@ -0,0 +1,947 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useMemo, useState, useEffect } from 'react';
+import { classNames } from './classNames.js';
+import { useBulmaClasses } from './useBulmaClasses.js';
+import { validRadii, validGaps } from './bulmaClassHelpers.js';
+import { warnOnce } from './devWarnings.js';
+import { useClassPrefix } from './Config.js';
+
+// --- FULL Bulma v1 CSS variable keys (auto-generated from CSSVAR_KEYS) ---
+const bulmaCssVars = [
+    // scheme
+    '--bulma-scheme-h',
+    '--bulma-scheme-s',
+    '--bulma-scheme-main',
+    '--bulma-scheme-main-bis',
+    '--bulma-scheme-main-ter',
+    '--bulma-scheme-invert',
+    '--bulma-scheme-invert-bis',
+    '--bulma-scheme-invert-ter',
+    '--bulma-light-l',
+    '--bulma-light-invert-l',
+    '--bulma-dark-l',
+    '--bulma-dark-invert-l',
+    '--bulma-soft-l',
+    '--bulma-bold-l',
+    '--bulma-soft-invert-l',
+    '--bulma-bold-invert-l',
+    '--bulma-hover-background-l-delta',
+    '--bulma-active-background-l-delta',
+    '--bulma-hover-border-l-delta',
+    '--bulma-active-border-l-delta',
+    '--bulma-hover-color-l-delta',
+    '--bulma-active-color-l-delta',
+    '--bulma-hover-shadow-a-delta',
+    '--bulma-active-shadow-a-delta',
+    // colors
+    '--bulma-primary-h',
+    '--bulma-primary-s',
+    '--bulma-primary-l',
+    '--bulma-link-h',
+    '--bulma-link-s',
+    '--bulma-link-l',
+    '--bulma-info-h',
+    '--bulma-info-s',
+    '--bulma-info-l',
+    '--bulma-success-h',
+    '--bulma-success-s',
+    '--bulma-success-l',
+    '--bulma-warning-h',
+    '--bulma-warning-s',
+    '--bulma-warning-l',
+    '--bulma-danger-h',
+    '--bulma-danger-s',
+    '--bulma-danger-l',
+    // shadow (the upstream token .box/.card/.dropdown/.panel derive their own
+    // shadow variables from; overriding it from an ancestor is the route that
+    // cascades, since those selectors re-declare their derived var on
+    // themselves)
+    '--bulma-shadow-h',
+    '--bulma-shadow-s',
+    '--bulma-shadow-l',
+    '--bulma-shadow',
+    // typography
+    '--bulma-family-primary',
+    '--bulma-family-secondary',
+    '--bulma-family-code',
+    '--bulma-size-small',
+    '--bulma-size-normal',
+    '--bulma-size-medium',
+    '--bulma-size-large',
+    '--bulma-weight-light',
+    '--bulma-weight-normal',
+    '--bulma-weight-medium',
+    '--bulma-weight-semibold',
+    '--bulma-weight-bold',
+    '--bulma-weight-extrabold',
+    // other
+    '--bulma-block-spacing',
+    '--bulma-duration',
+    '--bulma-easing',
+    '--bulma-radius-small',
+    '--bulma-radius',
+    '--bulma-radius-medium',
+    '--bulma-radius-large',
+    '--bulma-radius-rounded',
+    '--bulma-speed',
+    '--bulma-arrow-color',
+    '--bulma-loading-color',
+    '--bulma-burger-h',
+    '--bulma-burger-s',
+    '--bulma-burger-l',
+    '--bulma-burger-border-radius',
+    '--bulma-burger-gap',
+    '--bulma-burger-item-height',
+    '--bulma-burger-item-width',
+    // generic
+    '--bulma-body-background-color',
+    '--bulma-body-size',
+    '--bulma-body-min-width',
+    '--bulma-body-rendering',
+    '--bulma-body-family',
+    '--bulma-body-overflow-x',
+    '--bulma-body-overflow-y',
+    '--bulma-body-color',
+    '--bulma-body-font-size',
+    '--bulma-body-weight',
+    '--bulma-body-line-height',
+    '--bulma-code-family',
+    '--bulma-code-padding',
+    '--bulma-code-weight',
+    '--bulma-code-size',
+    '--bulma-small-font-size',
+    '--bulma-hr-background-color',
+    '--bulma-hr-height',
+    '--bulma-hr-margin',
+    '--bulma-strong-color',
+    '--bulma-strong-weight',
+    '--bulma-pre-font-size',
+    '--bulma-pre-padding',
+    '--bulma-pre-code-font-size',
+    // skeleton
+    '--bulma-skeleton-background',
+    '--bulma-skeleton-radius',
+    '--bulma-skeleton-block-min-height',
+    '--bulma-skeleton-lines-gap',
+    '--bulma-skeleton-line-height',
+    // breadcrumb
+    '--bulma-breadcrumb-item-color',
+    '--bulma-breadcrumb-item-hover-color',
+    '--bulma-breadcrumb-item-active-color',
+    '--bulma-breadcrumb-item-padding-vertical',
+    '--bulma-breadcrumb-item-padding-horizontal',
+    '--bulma-breadcrumb-item-separator-color',
+    // card
+    '--bulma-card-color',
+    '--bulma-card-background-color',
+    '--bulma-card-shadow',
+    '--bulma-card-radius',
+    '--bulma-card-header-background-color',
+    '--bulma-card-header-color',
+    '--bulma-card-header-padding',
+    '--bulma-card-header-shadow',
+    '--bulma-card-header-weight',
+    '--bulma-card-content-background-color',
+    '--bulma-card-content-padding',
+    '--bulma-card-footer-background-color',
+    '--bulma-card-footer-border-top',
+    '--bulma-card-footer-padding',
+    '--bulma-card-media-margin',
+    // dropdown
+    '--bulma-dropdown-menu-min-width',
+    '--bulma-dropdown-content-background-color',
+    '--bulma-dropdown-content-offset',
+    '--bulma-dropdown-content-padding-bottom',
+    '--bulma-dropdown-content-padding-top',
+    '--bulma-dropdown-content-radius',
+    '--bulma-dropdown-content-shadow',
+    '--bulma-dropdown-content-z',
+    '--bulma-dropdown-item-h',
+    '--bulma-dropdown-item-s',
+    '--bulma-dropdown-item-l',
+    '--bulma-dropdown-item-background-l',
+    '--bulma-dropdown-item-background-l-delta',
+    '--bulma-dropdown-item-hover-background-l-delta',
+    '--bulma-dropdown-item-active-background-l-delta',
+    '--bulma-dropdown-item-color-l',
+    '--bulma-dropdown-item-selected-h',
+    '--bulma-dropdown-item-selected-s',
+    '--bulma-dropdown-item-selected-l',
+    '--bulma-dropdown-item-selected-background-l',
+    '--bulma-dropdown-item-selected-color-l',
+    '--bulma-dropdown-divider-background-color',
+    // menu
+    '--bulma-menu-item-h',
+    '--bulma-menu-item-s',
+    '--bulma-menu-item-l',
+    '--bulma-menu-item-background-l',
+    '--bulma-menu-item-background-l-delta',
+    '--bulma-menu-item-hover-background-l-delta',
+    '--bulma-menu-item-active-background-l-delta',
+    '--bulma-menu-item-color-l',
+    '--bulma-menu-item-radius',
+    '--bulma-menu-item-selected-h',
+    '--bulma-menu-item-selected-s',
+    '--bulma-menu-item-selected-l',
+    '--bulma-menu-item-selected-background-l',
+    '--bulma-menu-item-selected-color-l',
+    '--bulma-menu-list-border-left',
+    '--bulma-menu-list-line-height',
+    '--bulma-menu-list-link-padding',
+    '--bulma-menu-nested-list-margin',
+    '--bulma-menu-nested-list-padding-left',
+    '--bulma-menu-label-color',
+    '--bulma-menu-label-font-size',
+    '--bulma-menu-label-letter-spacing',
+    '--bulma-menu-label-spacing',
+    // message
+    '--bulma-message-h',
+    '--bulma-message-s',
+    '--bulma-message-background-l',
+    '--bulma-message-border-l',
+    '--bulma-message-border-l-delta',
+    '--bulma-message-border-style',
+    '--bulma-message-border-width',
+    '--bulma-message-color-l',
+    '--bulma-message-radius',
+    '--bulma-message-header-weight',
+    '--bulma-message-header-padding',
+    '--bulma-message-header-radius',
+    '--bulma-message-header-body-border-width',
+    '--bulma-message-header-background-l',
+    '--bulma-message-header-color-l',
+    '--bulma-message-body-border-width',
+    '--bulma-message-body-color',
+    '--bulma-message-body-padding',
+    '--bulma-message-body-radius',
+    '--bulma-message-body-pre-code-background-color',
+    // modal
+    '--bulma-modal-z',
+    '--bulma-modal-background-background-color',
+    '--bulma-modal-content-width',
+    '--bulma-modal-content-margin-mobile',
+    '--bulma-modal-content-spacing-mobile',
+    '--bulma-modal-content-spacing-tablet',
+    '--bulma-modal-close-dimensions',
+    '--bulma-modal-close-right',
+    '--bulma-modal-close-top',
+    '--bulma-modal-card-spacing',
+    '--bulma-modal-card-head-background-color',
+    '--bulma-modal-card-head-padding',
+    '--bulma-modal-card-head-radius',
+    '--bulma-modal-card-title-color',
+    '--bulma-modal-card-title-line-height',
+    '--bulma-modal-card-title-size',
+    '--bulma-modal-card-foot-background-color',
+    '--bulma-modal-card-foot-radius',
+    '--bulma-modal-card-body-background-color',
+    '--bulma-modal-card-body-padding',
+    // navbar
+    '--bulma-navbar-h',
+    '--bulma-navbar-s',
+    '--bulma-navbar-l',
+    '--bulma-navbar-background-color',
+    '--bulma-navbar-box-shadow-size',
+    '--bulma-navbar-box-shadow-color',
+    '--bulma-navbar-padding-vertical',
+    '--bulma-navbar-padding-horizontal',
+    '--bulma-navbar-z',
+    '--bulma-navbar-fixed-z',
+    '--bulma-navbar-item-background-a',
+    '--bulma-navbar-item-background-l',
+    '--bulma-navbar-item-background-l-delta',
+    '--bulma-navbar-item-hover-background-l-delta',
+    '--bulma-navbar-item-active-background-l-delta',
+    '--bulma-navbar-item-color-l',
+    '--bulma-navbar-item-selected-h',
+    '--bulma-navbar-item-selected-s',
+    '--bulma-navbar-item-selected-l',
+    '--bulma-navbar-item-selected-background-l',
+    '--bulma-navbar-item-selected-color-l',
+    '--bulma-navbar-item-img-max-height',
+    '--bulma-navbar-burger-color',
+    '--bulma-navbar-tab-hover-background-color',
+    '--bulma-navbar-tab-hover-border-bottom-color',
+    '--bulma-navbar-tab-active-color',
+    '--bulma-navbar-tab-active-background-color',
+    '--bulma-navbar-tab-active-border-bottom-color',
+    '--bulma-navbar-tab-active-border-bottom-style',
+    '--bulma-navbar-tab-active-border-bottom-width',
+    '--bulma-navbar-dropdown-background-color',
+    '--bulma-navbar-dropdown-border-l',
+    '--bulma-navbar-dropdown-border-color',
+    '--bulma-navbar-dropdown-border-style',
+    '--bulma-navbar-dropdown-border-width',
+    '--bulma-navbar-dropdown-offset',
+    '--bulma-navbar-dropdown-arrow',
+    '--bulma-navbar-dropdown-radius',
+    '--bulma-navbar-dropdown-z',
+    '--bulma-navbar-dropdown-boxed-radius',
+    '--bulma-navbar-dropdown-boxed-shadow',
+    '--bulma-navbar-dropdown-item-h',
+    '--bulma-navbar-dropdown-item-s',
+    '--bulma-navbar-dropdown-item-l',
+    '--bulma-navbar-dropdown-item-background-l',
+    '--bulma-navbar-dropdown-item-color-l',
+    '--bulma-navbar-divider-background-l',
+    '--bulma-navbar-divider-height',
+    '--bulma-navbar-bottom-box-shadow-size',
+    // pagination
+    '--bulma-pagination-margin',
+    '--bulma-pagination-min-width',
+    '--bulma-pagination-item-h',
+    '--bulma-pagination-item-s',
+    '--bulma-pagination-item-l',
+    '--bulma-pagination-item-background-l-delta',
+    '--bulma-pagination-item-hover-background-l-delta',
+    '--bulma-pagination-item-active-background-l-delta',
+    '--bulma-pagination-item-border-style',
+    '--bulma-pagination-item-border-width',
+    '--bulma-pagination-item-border-l',
+    '--bulma-pagination-item-border-l-delta',
+    '--bulma-pagination-item-hover-border-l-delta',
+    '--bulma-pagination-item-active-border-l-delta',
+    '--bulma-pagination-item-focus-border-l-delta',
+    '--bulma-pagination-item-color-l',
+    '--bulma-pagination-item-font-size',
+    '--bulma-pagination-item-margin',
+    '--bulma-pagination-item-padding-left',
+    '--bulma-pagination-item-padding-right',
+    '--bulma-pagination-item-outer-shadow-h',
+    '--bulma-pagination-item-outer-shadow-s',
+    '--bulma-pagination-item-outer-shadow-l',
+    '--bulma-pagination-item-outer-shadow-a',
+    '--bulma-pagination-nav-padding-left',
+    '--bulma-pagination-nav-padding-right',
+    '--bulma-pagination-disabled-color',
+    '--bulma-pagination-disabled-background-color',
+    '--bulma-pagination-disabled-border-color',
+    '--bulma-pagination-current-color',
+    '--bulma-pagination-current-background-color',
+    '--bulma-pagination-current-border-color',
+    '--bulma-pagination-ellipsis-color',
+    '--bulma-pagination-shadow-inset',
+    '--bulma-pagination-selected-item-h',
+    '--bulma-pagination-selected-item-s',
+    '--bulma-pagination-selected-item-l',
+    '--bulma-pagination-selected-item-background-l',
+    '--bulma-pagination-selected-item-border-l',
+    '--bulma-pagination-selected-item-color-l',
+    // panel
+    '--bulma-panel-margin',
+    '--bulma-panel-item-border',
+    '--bulma-panel-radius',
+    '--bulma-panel-shadow',
+    '--bulma-panel-heading-line-height',
+    '--bulma-panel-heading-padding',
+    '--bulma-panel-heading-radius',
+    '--bulma-panel-heading-size',
+    '--bulma-panel-heading-weight',
+    '--bulma-panel-tabs-font-size',
+    '--bulma-panel-tab-border-bottom-color',
+    '--bulma-panel-tab-border-bottom-style',
+    '--bulma-panel-tab-border-bottom-width',
+    '--bulma-panel-tab-active-color',
+    '--bulma-panel-list-item-color',
+    '--bulma-panel-list-item-hover-color',
+    '--bulma-panel-block-color',
+    '--bulma-panel-block-hover-background-color',
+    '--bulma-panel-block-active-border-left-color',
+    '--bulma-panel-block-active-color',
+    '--bulma-panel-block-active-icon-color',
+    '--bulma-panel-icon-color',
+    // tabs
+    '--bulma-tabs-border-bottom-color',
+    '--bulma-tabs-border-bottom-style',
+    '--bulma-tabs-border-bottom-width',
+    '--bulma-tabs-link-color',
+    '--bulma-tabs-link-hover-border-bottom-color',
+    '--bulma-tabs-link-hover-color',
+    '--bulma-tabs-link-active-border-bottom-color',
+    '--bulma-tabs-link-active-color',
+    '--bulma-tabs-link-padding',
+    '--bulma-tabs-boxed-link-radius',
+    '--bulma-tabs-boxed-link-hover-background-color',
+    '--bulma-tabs-boxed-link-hover-border-bottom-color',
+    '--bulma-tabs-boxed-link-active-background-color',
+    '--bulma-tabs-boxed-link-active-border-color',
+    '--bulma-tabs-boxed-link-active-border-bottom-color',
+    '--bulma-tabs-toggle-link-border-color',
+    '--bulma-tabs-toggle-link-border-style',
+    '--bulma-tabs-toggle-link-border-width',
+    '--bulma-tabs-toggle-link-hover-background-color',
+    '--bulma-tabs-toggle-link-hover-border-color',
+    '--bulma-tabs-toggle-link-radius',
+    '--bulma-tabs-toggle-link-active-background-color',
+    '--bulma-tabs-toggle-link-active-border-color',
+    '--bulma-tabs-toggle-link-active-color',
+    // box
+    '--bulma-box-background-color',
+    '--bulma-box-color',
+    '--bulma-box-radius',
+    '--bulma-box-shadow',
+    '--bulma-box-padding',
+    '--bulma-box-link-hover-shadow',
+    '--bulma-box-link-active-shadow',
+    // content
+    '--bulma-content-heading-color',
+    '--bulma-content-heading-weight',
+    '--bulma-content-heading-line-height',
+    '--bulma-content-block-margin-bottom',
+    '--bulma-content-blockquote-background-color',
+    '--bulma-content-blockquote-border-left',
+    '--bulma-content-blockquote-padding',
+    '--bulma-content-pre-padding',
+    '--bulma-content-table-cell-border',
+    '--bulma-content-table-cell-border-width',
+    '--bulma-content-table-cell-padding',
+    '--bulma-content-table-cell-heading-color',
+    '--bulma-content-table-head-cell-border-width',
+    '--bulma-content-table-head-cell-color',
+    '--bulma-content-table-body-last-row-cell-border-bottom-width',
+    '--bulma-content-table-foot-cell-border-width',
+    '--bulma-content-table-foot-cell-color',
+    // delete
+    '--bulma-delete-dimensions',
+    '--bulma-delete-background-l',
+    '--bulma-delete-background-alpha',
+    '--bulma-delete-color',
+    // icon
+    '--bulma-icon-dimensions',
+    '--bulma-icon-dimensions-small',
+    '--bulma-icon-dimensions-medium',
+    '--bulma-icon-dimensions-large',
+    '--bulma-icon-text-spacing',
+    // notification
+    '--bulma-notification-h',
+    '--bulma-notification-s',
+    '--bulma-notification-background-l',
+    '--bulma-notification-color-l',
+    '--bulma-notification-code-background-color',
+    '--bulma-notification-radius',
+    '--bulma-notification-padding',
+    // progress
+    '--bulma-progress-border-radius',
+    '--bulma-progress-bar-background-color',
+    '--bulma-progress-value-background-color',
+    '--bulma-progress-indeterminate-duration',
+    // table
+    '--bulma-table-color',
+    '--bulma-table-background-color',
+    '--bulma-table-cell-border-color',
+    '--bulma-table-cell-border-style',
+    '--bulma-table-cell-border-width',
+    '--bulma-table-cell-padding',
+    '--bulma-table-cell-heading-color',
+    '--bulma-table-cell-text-align',
+    '--bulma-table-head-cell-border-width',
+    '--bulma-table-head-cell-color',
+    '--bulma-table-foot-cell-border-width',
+    '--bulma-table-foot-cell-color',
+    '--bulma-table-head-background-color',
+    '--bulma-table-body-background-color',
+    '--bulma-table-foot-background-color',
+    '--bulma-table-row-hover-background-color',
+    '--bulma-table-row-active-background-color',
+    '--bulma-table-row-active-color',
+    '--bulma-table-striped-row-even-background-color',
+    '--bulma-table-striped-row-even-hover-background-color',
+    // tag
+    '--bulma-tag-h',
+    '--bulma-tag-s',
+    '--bulma-tag-background-l',
+    '--bulma-tag-background-l-delta',
+    '--bulma-tag-hover-background-l-delta',
+    '--bulma-tag-active-background-l-delta',
+    '--bulma-tag-color-l',
+    '--bulma-tag-radius',
+    '--bulma-tag-delete-margin',
+    // title
+    '--bulma-title-color',
+    '--bulma-title-family',
+    '--bulma-title-size',
+    '--bulma-title-weight',
+    '--bulma-title-line-height',
+    '--bulma-title-strong-color',
+    '--bulma-title-strong-weight',
+    '--bulma-title-sub-size',
+    '--bulma-title-sup-size',
+    '--bulma-subtitle-color',
+    '--bulma-subtitle-family',
+    '--bulma-subtitle-size',
+    '--bulma-subtitle-weight',
+    '--bulma-subtitle-line-height',
+    '--bulma-subtitle-strong-color',
+    '--bulma-subtitle-strong-weight',
+    // control
+    '--bulma-control-radius',
+    '--bulma-control-radius-small',
+    '--bulma-control-border-width',
+    '--bulma-control-height',
+    '--bulma-control-line-height',
+    '--bulma-control-padding-vertical',
+    '--bulma-control-padding-horizontal',
+    '--bulma-control-size',
+    '--bulma-control-focus-shadow-l',
+    // file
+    '--bulma-file-radius',
+    '--bulma-file-name-border-color',
+    '--bulma-file-name-border-style',
+    '--bulma-file-name-border-width',
+    '--bulma-file-name-max-width',
+    '--bulma-file-h',
+    '--bulma-file-s',
+    '--bulma-file-background-l',
+    '--bulma-file-background-l-delta',
+    '--bulma-file-hover-background-l-delta',
+    '--bulma-file-active-background-l-delta',
+    '--bulma-file-border-l',
+    '--bulma-file-border-l-delta',
+    '--bulma-file-hover-border-l-delta',
+    '--bulma-file-active-border-l-delta',
+    '--bulma-file-cta-color-l',
+    '--bulma-file-name-color-l',
+    '--bulma-file-color-l-delta',
+    '--bulma-file-hover-color-l-delta',
+    '--bulma-file-active-color-l-delta',
+    // input
+    '--bulma-input-h',
+    '--bulma-input-s',
+    '--bulma-input-l',
+    '--bulma-input-border-style',
+    '--bulma-input-border-l',
+    '--bulma-input-border-l-delta',
+    '--bulma-input-hover-border-l-delta',
+    '--bulma-input-active-border-l-delta',
+    '--bulma-input-focus-h',
+    '--bulma-input-focus-s',
+    '--bulma-input-focus-l',
+    '--bulma-input-focus-shadow-size',
+    '--bulma-input-focus-shadow-alpha',
+    '--bulma-input-color-l',
+    '--bulma-input-background-l',
+    '--bulma-input-background-l-delta',
+    '--bulma-input-height',
+    '--bulma-input-shadow',
+    '--bulma-input-placeholder-color',
+    '--bulma-input-disabled-color',
+    '--bulma-input-disabled-background-color',
+    '--bulma-input-disabled-border-color',
+    '--bulma-input-disabled-placeholder-color',
+    '--bulma-input-arrow',
+    '--bulma-input-icon-color',
+    '--bulma-input-icon-hover-color',
+    '--bulma-input-icon-focus-color',
+    '--bulma-input-radius',
+    // columns
+    '--bulma-column-gap',
+    // grid
+    '--bulma-grid-gap',
+    '--bulma-grid-column-count',
+    '--bulma-grid-column-min',
+    '--bulma-grid-cell-column-span',
+    '--bulma-grid-cell-column-start',
+    // footer
+    '--bulma-footer-background-color',
+    '--bulma-footer-color',
+    '--bulma-footer-padding',
+    // hero
+    '--bulma-hero-body-padding',
+    '--bulma-hero-body-padding-tablet',
+    '--bulma-hero-body-padding-small',
+    '--bulma-hero-body-padding-medium',
+    '--bulma-hero-body-padding-large',
+    // media
+    '--bulma-media-border-color',
+    '--bulma-media-border-size',
+    '--bulma-media-spacing',
+    '--bulma-media-spacing-large',
+    '--bulma-media-content-spacing',
+    '--bulma-media-level-1-spacing',
+    '--bulma-media-level-1-content-spacing',
+    '--bulma-media-level-2-spacing',
+    // section
+    '--bulma-section-padding',
+    '--bulma-section-padding-desktop',
+    '--bulma-section-padding-medium',
+    '--bulma-section-padding-large',
+];
+/**
+ * Convert a Bulma CSS variable name to a camelCase prop name.
+ * @param {string} varName - CSS variable name (e.g., '--bulma-primary-h').
+ * @returns {string} The camelCase prop name (e.g., 'primaryH').
+ */
+function cssVarToProp(varName) {
+    return varName
+        .replace(/^--bulma-/, '')
+        .split('-')
+        .map((part, i) => i === 0 ? part : part.charAt(0).toUpperCase() + part.slice(1))
+        .join('');
+}
+/**
+ * Prop names `cssVarToProp` would mint that are already helper props:
+ * `--bulma-shadow` becomes `shadow`, `--bulma-radius` becomes `radius` and
+ * `--bulma-column-gap` becomes `columnGap`. They stay out of
+ * `bulmaVarPropMap`, so on Theme each is the helper prop it is on every other
+ * component, and every one of those variables is still reachable through
+ * `bulmaVars`.
+ *
+ * `radius` was missed here once and set `--bulma-radius` while typed as the
+ * helper (#694). It still writes that variable, so what it did then keeps
+ * working; see `themeRadiusVar`. `columnGap` joined when the gap helpers
+ * became shared helper props, and keeps its old variable route the same way;
+ * see `themeColumnGapVar`.
+ */
+const helperPropNames = ['shadow', 'radius', 'columnGap'];
+/**
+ * Mapping of camelCase prop names to their Bulma CSS variable counterparts,
+ * minus the `helperPropNames` above.
+ */
+const bulmaVarPropMap = Object.fromEntries(bulmaCssVars
+    .map(cssVar => [cssVarToProp(cssVar), cssVar])
+    .filter(([prop]) => !helperPropNames.includes(prop)));
+/**
+ * What each helper value of `radius` writes to `--bulma-radius` on a Theme,
+ * alongside its class.
+ *
+ * Before #694, `radius="radiusless"` wrote `--bulma-radius: radiusless`. That
+ * is not a length, and a declaration reading an invalid variable falls back
+ * to its property's initial value, which for a border radius is 0. So
+ * everything inside the Theme that takes its radius from that variable lost
+ * it, and under `isRoot` so did everything on the page that does. Writing a
+ * real 0 keeps what
+ * people see and makes it valid CSS. Keyed by the helper values, so adding
+ * one means saying what it writes.
+ *
+ * The sizes write nothing and only add their class. Their classes read the
+ * radius variables, so `normal` would point `--bulma-radius` at itself, which
+ * is invalid and computes to 0, and `rounded` would turn every control inside
+ * the Theme into a pill.
+ */
+const radiusHelperVars = {
+    radiusless: '0',
+    small: undefined,
+    normal: undefined,
+    large: undefined,
+    rounded: undefined,
+};
+/**
+ * What `radius` writes to `--bulma-radius` on a Theme, or `undefined` when it
+ * writes nothing.
+ *
+ * A helper value writes its `radiusHelperVars` entry. Any other non-empty
+ * string is written as given: before #694 every `radius` on Theme set the
+ * variable whatever its type said, and a JavaScript caller passing a length
+ * got the radius it asked for. That keeps working so nothing breaks, but the
+ * type rejects it, so it warns in development and points at `bulmaVars`.
+ *
+ * Only a string writes anything, because only a string ever set the variable
+ * to something usable: an empty value or zero was dropped, and a boolean or
+ * any other bare number is not a length. The helper ignores those too, the
+ * way it does on every other component.
+ */
+const themeRadiusVar = (radius) => {
+    if (typeof radius !== 'string' || radius === '') {
+        return undefined;
+    }
+    if (validRadii.includes(radius)) {
+        return radiusHelperVars[radius];
+    }
+    warnOnce('Theme:radius-variable', `[bestax-bulma] <Theme radius="${radius}">: setting --bulma-radius ` +
+        'through the radius prop is deprecated and will stop working in a ' +
+        'future major version. On Theme, as on every other component, radius ' +
+        `is the border radius helper ("${validRadii.join('", "')}"). Set the variable with ` +
+        `bulmaVars={{ '--bulma-radius': '${radius}' }} instead.`);
+    return radius;
+};
+/**
+ * What `columnGap` writes to `--bulma-column-gap` on a Theme, or `undefined`
+ * when it writes nothing.
+ *
+ * Until the gap helpers were shared helper props, `columnGap` on Theme was
+ * the camelCase prop Theme mints for `--bulma-column-gap`. It was never in
+ * `ThemeProps`, so only untyped code reached it, but that code got the
+ * columns gutter it asked for. It is the column gap helper now, as on every
+ * other component, so a gap step goes to the helper and writes nothing here.
+ * Any other non-empty string is still written as given, so a length such as
+ * `'1rem'` keeps working, with a development warning pointing at `bulmaVars`.
+ *
+ * Only a string writes anything, for the reason `themeRadiusVar` gives: a
+ * number or a boolean was never a usable length.
+ */
+const themeColumnGapVar = (columnGap) => {
+    if (typeof columnGap !== 'string' || columnGap === '') {
+        return undefined;
+    }
+    if (validGaps.includes(columnGap)) {
+        return undefined;
+    }
+    warnOnce('Theme:column-gap-variable', `[bestax-bulma] <Theme columnGap="${columnGap}">: setting ` +
+        '--bulma-column-gap through the columnGap prop is deprecated and will ' +
+        'stop working in a future major version. On Theme, as on every other ' +
+        'component, columnGap is the column gap helper ' +
+        `("${validGaps.join('", "')}"). Set the variable with ` +
+        `bulmaVars={{ '--bulma-column-gap': '${columnGap}' }} instead.`);
+    return columnGap;
+};
+/** The one `<style>` element every `isRoot` Theme writes into. */
+const ROOT_STYLE_ID = 'bestax-bulma-theme-vars';
+/**
+ * The `:root` rules of every mounted `isRoot` Theme that has any, keyed by the
+ * Theme's render order.
+ *
+ * Root Themes share one `<style>` element, so each keeps its rules here and
+ * the element is rebuilt from all of them whenever one mounts, changes or
+ * unmounts. Before this each Theme overwrote the element with only its own
+ * rules, and the first to unmount removed it for all of them (#736).
+ *
+ * The key is a number each Theme takes when it first renders. React renders a
+ * parent before its children and an earlier sibling before a later one, so an
+ * inner or later-mounted root Theme sorts later, comes later in the
+ * stylesheet, and wins a variable two of them set, as an inner scoped Theme
+ * does. Effects would give the wrong answer for nesting: React runs a child's
+ * effects before its parent's. Only the relative order matters, so a number
+ * skipped by StrictMode calling the initializer twice, or by a render React
+ * throws away, is harmless. The key never changes, so an update keeps its
+ * place and re-rendering one Theme never changes which one wins.
+ */
+const rootThemeRules = new Map();
+let nextRootOrder = 0;
+/**
+ * Write every registered root Theme's rules into the shared element, creating
+ * it when needed and removing it once no Theme has any rules left.
+ */
+const renderRootThemeRules = () => {
+    let element = document.getElementById(ROOT_STYLE_ID);
+    if (rootThemeRules.size === 0) {
+        element?.remove();
+        return;
+    }
+    if (!element) {
+        element = document.createElement('style');
+        element.id = ROOT_STYLE_ID;
+        document.head.appendChild(element);
+    }
+    element.textContent = [...rootThemeRules]
+        .sort(([a], [b]) => a - b)
+        .map(([, rules]) => rules)
+        .join('\n');
+};
+/**
+ * Record one Theme's `:root` rules, where an empty string means it has none,
+ * and rebuild the shared element if that changed anything. A Theme with no
+ * rules never touches the element, which is what it did before the registry
+ * too.
+ */
+const setRootThemeRules = (order, rules) => {
+    if ((rootThemeRules.get(order) ?? '') === rules) {
+        return;
+    }
+    if (rules) {
+        rootThemeRules.set(order, rules);
+    }
+    else {
+        rootThemeRules.delete(order);
+    }
+    renderRootThemeRules();
+};
+/**
+ * Theme component that injects Bulma CSS variables either globally or locally.
+ *
+ * When `isRoot` is true, variables are injected at `:root`. Otherwise, a wrapping
+ * `<div>` scopes the variables to its children.
+ *
+ * @function
+ * @param {ThemeProps} props - Props for the Theme component.
+ * @returns {JSX.Element} The theme wrapper or fragment.
+ *
+ * @example
+ * // Local theme scope
+ * <Theme primaryH="171" primaryS="100%" primaryL="41%">
+ *   <Button color="primary">Themed</Button>
+ * </Theme>
+ */
+const Theme = ({ bulmaVars = {}, children, className, isRoot = false, colorMode, radius, columnGap, ...restProps }) => {
+    const radiusVar = themeRadiusVar(radius);
+    const columnGapVar = themeColumnGapVar(columnGap);
+    const radiusHelper = validRadii.includes(radius)
+        ? radius
+        : undefined;
+    // A radius size only adds its class, and a root Theme renders no wrapper to
+    // carry one, so on `isRoot` it does nothing at all. Say so, as the other
+    // radius routes that do not do what they look like do.
+    if (isRoot && radiusHelper && radiusHelperVars[radiusHelper] === undefined) {
+        warnOnce('Theme:root-radius-size', `[bestax-bulma] <Theme isRoot radius="${radiusHelper}">: a root Theme ` +
+            `has no wrapper element for has-radius-${radiusHelper}, and the ` +
+            'radius sizes set no variable, so this does nothing. To round one ' +
+            `element, put radius="${radiusHelper}" on it. To change the radius ` +
+            "across the page, set bulmaVars={{ '--bulma-radius': '…' }} instead.");
+    }
+    // The same for a gap step in `columnGap`, which reads like the columns
+    // gutter it once set and, at the root, has no element for its class.
+    const columnGapStep = typeof columnGap === 'number' ? String(columnGap) : columnGap;
+    if (isRoot &&
+        columnGapStep !== undefined &&
+        validGaps.includes(columnGapStep)) {
+        warnOnce('Theme:root-column-gap', `[bestax-bulma] <Theme isRoot columnGap="${columnGapStep}">: a root ` +
+            `Theme has no wrapper element for is-column-gap-${columnGapStep}, ` +
+            'and a gap step sets no variable, so this does nothing. To change ' +
+            'the columns gutter across the page, set ' +
+            "bulmaVars={{ '--bulma-column-gap': '…' }} instead.");
+    }
+    // Extract Bulma variable props from restProps
+    const { bulmaVarProps, otherProps } = useMemo(() => {
+        const varProps = {};
+        const otherPropsObj = {};
+        for (const [key, value] of Object.entries(restProps)) {
+            if (Object.prototype.hasOwnProperty.call(bulmaVarPropMap, key)) {
+                varProps[key] = value;
+            }
+            else {
+                otherPropsObj[key] = value;
+            }
+        }
+        return { bulmaVarProps: varProps, otherProps: otherPropsObj };
+    }, [restProps]);
+    // Everything left in `otherProps` lands on the wrapper div, as a helper
+    // class or an attribute, and so does `className`. A root Theme renders no
+    // wrapper, so under `isRoot` all of it is dropped. `radius` and `columnGap`
+    // are not in `otherProps`; the checks above cover them.
+    if (isRoot) {
+        const dropped = Object.entries(otherProps)
+            .filter(([, value]) => value !== undefined && value !== null && value !== false)
+            .map(([key]) => key);
+        if (className) {
+            dropped.unshift('className');
+        }
+        if (dropped.length > 0) {
+            warnOnce('Theme:root-dropped-props', `[bestax-bulma] <Theme isRoot>: a root Theme renders no wrapper ` +
+                `element, so ${dropped.join(', ')} ` +
+                `${dropped.length === 1 ? 'has' : 'have'} nothing to apply to. ` +
+                'Put helper props and classes on an element inside the Theme ' +
+                'instead.');
+        }
+    }
+    // Use Bulma classes for styling (only when not isRoot). Only a helper value
+    // of `radius` reaches the helper; a legacy string went to the variable.
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        ...otherProps,
+        radius: radiusHelper,
+        columnGap,
+    });
+    // Merge bulmaVars and individual props, with props taking precedence
+    const mergedVars = useMemo(() => {
+        const vars = { ...bulmaVars };
+        for (const [propName, cssVar] of Object.entries(bulmaVarPropMap)) {
+            if (bulmaVarProps[propName] !== undefined) {
+                vars[cssVar] = bulmaVarProps[propName];
+            }
+        }
+        if (radiusVar !== undefined) {
+            vars['--bulma-radius'] = radiusVar;
+        }
+        if (columnGapVar !== undefined) {
+            vars['--bulma-column-gap'] = columnGapVar;
+        }
+        return vars;
+    }, [bulmaVars, bulmaVarProps, radiusVar, columnGapVar]);
+    // This Theme's place among root Themes; see `rootThemeRules`.
+    const [rootOrder] = useState(() => nextRootOrder++);
+    // The `:root` rules this Theme contributes, or '' when it contributes none.
+    const rootRules = useMemo(() => {
+        if (!isRoot) {
+            return '';
+        }
+        const cssRules = Object.entries(mergedVars)
+            .filter(([key, value]) => bulmaCssVars.includes(key) && value)
+            .map(([key, value]) => `${key}: ${value};`)
+            .join(' ');
+        return cssRules ? `:root { ${cssRules} }` : '';
+    }, [mergedVars, isRoot]);
+    // Inject CSS variables globally at :root level, alongside any other root
+    // Themes. Clearing `isRoot` or every variable passes '', which withdraws
+    // this Theme's rules.
+    useEffect(() => {
+        setRootThemeRules(rootOrder, rootRules);
+    }, [rootOrder, rootRules]);
+    // Withdraw them on unmount. Kept apart from the effect above so a change
+    // rewrites the shared element in place rather than removing and recreating
+    // it between the cleanup and the next run.
+    useEffect(() => () => setRootThemeRules(rootOrder, ''), [rootOrder]);
+    // Bulma names its scheme attribute after the class prefix a stylesheet was
+    // built with (`data-<prefix>theme`), so the prefixed builds read
+    // `data-bestax-theme` and never `data-theme`.
+    const classPrefix = useClassPrefix();
+    // Toggle Bulma's light/dark scheme by writing the theme attribute on the
+    // document root (<html>). This is always global, even on a scoped Theme.
+    // Under a class prefix the prefixed attribute is written as well as
+    // `data-theme`, so whichever build is loaded sees it; with no prefix only
+    // `data-theme` is. `'system'` removes them so Bulma follows the OS
+    // preference.
+    useEffect(() => {
+        if (colorMode === undefined) {
+            return;
+        }
+        const root = document.documentElement;
+        const names = classPrefix
+            ? ['data-theme', `data-${classPrefix}theme`]
+            : ['data-theme'];
+        const previous = names.map(name => root.getAttribute(name));
+        for (const name of names) {
+            if (colorMode === 'system') {
+                root.removeAttribute(name);
+                continue;
+            }
+            try {
+                root.setAttribute(name, colorMode);
+            }
+            catch {
+                // A class prefix can hold characters an attribute name cannot.
+                // `data-theme` is still written, as it was before the prefixed
+                // attribute existed, but a sheet built with that prefix keeps its
+                // scheme, so say so.
+                warnOnce('Theme:color-mode-prefix', `[bestax-bulma] <Theme colorMode="${colorMode}">: the class ` +
+                    `prefix "${classPrefix}" makes ${name} an invalid attribute ` +
+                    'name, so only data-theme is written, and a stylesheet built ' +
+                    'with that prefix keeps its scheme.');
+            }
+        }
+        // Restore the previous values when colorMode changes or the component unmounts.
+        return () => {
+            names.forEach((name, i) => {
+                const value = previous[i];
+                if (value === null) {
+                    root.removeAttribute(name);
+                }
+                else {
+                    root.setAttribute(name, value);
+                }
+            });
+        };
+    }, [colorMode, classPrefix]);
+    // For local injection (when isRoot is false), prepare style object for CSS vars
+    const style = useMemo(() => {
+        if (isRoot) {
+            return {};
+        }
+        const styleObj = {};
+        for (const [key, value] of Object.entries(mergedVars)) {
+            if (bulmaCssVars.includes(key) && value) {
+                styleObj[key] = value;
+            }
+        }
+        return styleObj;
+    }, [mergedVars, isRoot]);
+    // Generate combined class names for the wrapper div
+    const combinedClassName = useMemo(() => {
+        if (isRoot) {
+            return '';
+        }
+        return classNames(className, bulmaHelperClasses);
+    }, [className, bulmaHelperClasses, isRoot]);
+    return isRoot ? (jsx(Fragment, { children: children })) : (jsx("div", { className: combinedClassName || undefined, style: style, ...rest, children: children }));
+};
+
+export { Theme };
+//# sourceMappingURL=Theme.js.map