@allxsmith/bestax-bulma 5.27.0 → 5.27.1

package/dist/esm/layout/Footer.js

@@ -0,0 +1,33 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { jsx } from 'react/jsx-runtime';
+import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
+import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+import { mergeBulmaStyles } from '../helpers/mergeBulmaStyles.js';
+
+/**
+ * The `Footer` component provides a semantic and accessible site footer for your Bulma React UI.
+ *
+ * @function
+ * @param {FooterProps} props - Props for the Footer component.
+ * @returns {JSX.Element} The rendered footer element.
+ * @see {@link https://bulma.io/documentation/layout/footer/ | Bulma Footer documentation}
+ *
+ * @example
+ * <Footer>
+ *   <div className="content has-text-centered">...</div>
+ * </Footer>
+ */
+const Footer = ({ as = 'footer', className, children, color, bgColor, textColor, style, ...props }) => {
+    const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const Tag = as;
+    const mainClass = usePrefixedClassNames('footer');
+    const footerClasses = classNames(mainClass, bulmaHelperClasses, className);
+    return (jsx(Tag, { className: footerClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
+};
+
+export { Footer };
+//# sourceMappingURL=Footer.js.map

package/dist/esm/layout/Footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.js","sources":["../../../src/layout/Footer.tsx"],"sourcesContent":["import React from 'react';\nimport classNames, { usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n  validSchemeColors,\n} from '../helpers/useBulmaClasses';\nimport { mergeBulmaStyles } from '../helpers/mergeBulmaStyles';\n\n/**\n * Props for the Footer component.\n */\nexport interface FooterProps\n  extends\n    React.HTMLAttributes<HTMLElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** The HTML tag to render as. */\n  as?: 'footer' | 'div';\n  /** Bulma color modifier. */\n  color?: (typeof validColors)[number] | 'inherit' | 'current';\n  /**\n   * Background color. `scheme-*` values render as a dark-mode-safe inline\n   * `background-color: var(--bulma-scheme-*)` instead of a class. The\n   * `scheme-invert*` values do not change text color — pair them with a\n   * contrasting foreground.\n   */\n  bgColor?:\n    | (typeof validColors)[number]\n    | (typeof validSchemeColors)[number]\n    | 'inherit'\n    | 'current';\n  /** Text color. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Additional CSS classes. */\n  className?: string;\n  /** Content inside the footer. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Footer` component provides a semantic and accessible site footer for your Bulma React UI.\n *\n * @function\n * @param {FooterProps} props - Props for the Footer component.\n * @returns {JSX.Element} The rendered footer element.\n * @see {@link https://bulma.io/documentation/layout/footer/ | Bulma Footer documentation}\n *\n * @example\n * <Footer>\n *   <div className=\"content has-text-centered\">...</div>\n * </Footer>\n */\nexport const Footer: React.FC<FooterProps> = ({\n  as = 'footer',\n  className,\n  children,\n  color,\n  bgColor,\n  textColor,\n  style,\n  ...props\n}) => {\n  const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({\n    color: textColor ?? color,\n    backgroundColor: bgColor,\n    ...props,\n  });\n  const Tag = as;\n  const mainClass = usePrefixedClassNames('footer');\n  const footerClasses = classNames(mainClass, bulmaHelperClasses, className);\n  return (\n    <Tag\n      className={footerClasses}\n      style={mergeBulmaStyles(bulmaHelperStyles, style)}\n      {...rest}\n    >\n      {children}\n    </Tag>\n  );\n};\n\nexport default Footer;\n"],"names":["_jsx"],"mappings":";;;;;;AAwCA;;;;;;;;;;;;AAYG;AACI,MAAM,MAAM,GAA0B,CAAC,EAC5C,EAAE,GAAG,QAAQ,EACb,SAAS,EACT,QAAQ,EACR,KAAK,EACL,OAAO,EACP,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,KAAI;IACH,MAAM,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;QACtE,KAAK,EAAE,SAAS,IAAI,KAAK;AACzB,QAAA,eAAe,EAAE,OAAO;AACxB,QAAA,GAAG,KAAK;AACT,KAAA,CAAC;IACF,MAAM,GAAG,GAAG,EAAE;AACd,IAAA,MAAM,SAAS,GAAG,qBAAqB,CAAC,QAAQ,CAAC;IACjD,MAAM,aAAa,GAAG,UAAU,CAAC,SAAS,EAAE,kBAAkB,EAAE,SAAS,CAAC;IAC1E,QACEA,IAAC,GAAG,EAAA,EACF,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,gBAAgB,CAAC,iBAAiB,EAAE,KAAK,CAAC,EAAA,GAC7C,IAAI,EAAA,QAAA,EAEP,QAAQ,EAAA,CACL;AAEV;;"}

package/dist/esm/layout/Hero.js

@@ -0,0 +1,90 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { jsx } from 'react/jsx-runtime';
+import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
+import { withSubComponents } from '../helpers/withSubComponents.js';
+import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+import { mergeBulmaStyles } from '../helpers/mergeBulmaStyles.js';
+import { warnUnstyledColor } from '../helpers/colorDeprecations.js';
+
+/**
+ * The `Hero` component provides a responsive, flexible, and visually striking section for your Bulma React UI.
+ *
+ * @function
+ * @param {HeroProps} props - Props for the Hero component.
+ * @returns {JSX.Element} The rendered hero.
+ * @see {@link https://bulma.io/documentation/layout/hero/ | Bulma Hero documentation}
+ */
+const HeroComponent = ({ className, color, size, bgColor, fullheightWithNavbar, children, style, ...props }) => {
+    warnUnstyledColor('Hero', color, ['inherit', 'current']);
+    const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const mainClass = usePrefixedClassNames('hero', {
+        [`is-${color}`]: color,
+        [`is-${size}`]: size && size !== 'fullheight-with-navbar',
+        'is-fullheight-with-navbar': fullheightWithNavbar || size === 'fullheight-with-navbar',
+    });
+    const heroClasses = classNames(mainClass, bulmaHelperClasses, className);
+    return (jsx("section", { className: heroClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
+};
+/**
+ * Top bar for navigation or branding.
+ *
+ * @function
+ * @param {HeroHeadProps} props - Props for the HeroHead component.
+ * @returns {JSX.Element} The rendered hero head.
+ */
+const HeroHead = ({ className, children, color, bgColor, textColor, style, ...props }) => {
+    const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const mainClass = usePrefixedClassNames('hero-head');
+    const heroHeadClasses = classNames(mainClass, bulmaHelperClasses, className);
+    return (jsx("div", { className: heroHeadClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
+};
+/**
+ * Main content area, vertically centered by default.
+ *
+ * @function
+ * @param {HeroBodyProps} props - Props for the HeroBody component.
+ * @returns {JSX.Element} The rendered hero body.
+ */
+const HeroBody = ({ className, children, color, bgColor, textColor, style, ...props }) => {
+    const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const mainClass = usePrefixedClassNames('hero-body');
+    const heroBodyClasses = classNames(mainClass, bulmaHelperClasses, className);
+    return (jsx("div", { className: heroBodyClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
+};
+/**
+ * Bottom bar for tabs or actions.
+ *
+ * @function
+ * @param {HeroFootProps} props - Props for the HeroFoot component.
+ * @returns {JSX.Element} The rendered hero foot.
+ */
+const HeroFoot = ({ className, children, color, bgColor, textColor, style, ...props }) => {
+    const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const mainClass = usePrefixedClassNames('hero-foot');
+    const heroFootClasses = classNames(mainClass, bulmaHelperClasses, className);
+    return (jsx("div", { className: heroFootClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
+};
+// Attach subcomponents
+const Hero = withSubComponents(HeroComponent, {
+    Head: HeroHead,
+    Body: HeroBody,
+    Foot: HeroFoot,
+}, 'Hero');
+
+export { Hero, HeroBody, HeroFoot, HeroHead };
+//# sourceMappingURL=Hero.js.map

package/dist/esm/layout/Hero.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hero.js","sources":["../../../src/layout/Hero.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n  validSchemeColors,\n} from '../helpers/useBulmaClasses';\nimport { mergeBulmaStyles } from '../helpers/mergeBulmaStyles';\nimport { warnUnstyledColor } from '../helpers/colorDeprecations';\n\n/**\n * Possible values for Bulma hero size.\n */\nexport type HeroSize =\n  'small' | 'medium' | 'large' | 'fullheight' | 'fullheight-with-navbar';\n\n/**\n * Props for the Hero component.\n */\nexport interface HeroProps\n  extends\n    React.HTMLAttributes<HTMLElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes. */\n  className?: string;\n  /**\n   * Bulma color modifier for the hero section (renders `is-<color>`).\n   *\n   * Only `primary`, `link`, `info`, `success`, `warning`, `danger`, `black`,\n   * `white`, `light`, and `dark` have shipped CSS for `.hero`. Every other\n   * value the union accepts emits a class no CSS rule matches, so the hero\n   * renders unstyled; those log a console warning in development and will be\n   * removed from this union in the next major version.\n   */\n  color?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Hero size. */\n  size?: HeroSize;\n  /**\n   * Bulma background color helper. `scheme-*` values render as a\n   * dark-mode-safe inline `background-color: var(--bulma-scheme-*)` instead\n   * of a class. The `scheme-invert*` values do not change text color — pair\n   * them with a contrasting foreground.\n   */\n  bgColor?:\n    | (typeof validColors)[number]\n    | (typeof validSchemeColors)[number]\n    | 'inherit'\n    | 'current';\n  /** Use fullheight hero with a navbar offset. */\n  fullheightWithNavbar?: boolean;\n  /** Hero content (often includes `Hero.Head`, `Hero.Body`, `Hero.Foot`). */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Hero` component provides a responsive, flexible, and visually striking section for your Bulma React UI.\n *\n * @function\n * @param {HeroProps} props - Props for the Hero component.\n * @returns {JSX.Element} The rendered hero.\n * @see {@link https://bulma.io/documentation/layout/hero/ | Bulma Hero documentation}\n */\nconst HeroComponent: React.FC<HeroProps> = ({\n  className,\n  color,\n  size,\n  bgColor,\n  fullheightWithNavbar,\n  children,\n  style,\n  ...props\n}) => {\n  warnUnstyledColor('Hero', color, ['inherit', 'current']);\n\n  const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({\n    backgroundColor: bgColor,\n    ...props,\n  });\n\n  const mainClass = usePrefixedClassNames('hero', {\n    [`is-${color}`]: color,\n    [`is-${size}`]: size && size !== 'fullheight-with-navbar',\n    'is-fullheight-with-navbar':\n      fullheightWithNavbar || size === 'fullheight-with-navbar',\n  });\n  const heroClasses = classNames(mainClass, bulmaHelperClasses, className);\n\n  return (\n    <section\n      className={heroClasses}\n      style={mergeBulmaStyles(bulmaHelperStyles, style)}\n      {...rest}\n    >\n      {children}\n    </section>\n  );\n};\n\n/**\n * Props for the HeroHead component.\n */\nexport interface HeroHeadProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Bulma color modifier for text. */\n  color?: (typeof validColors)[number] | 'inherit' | 'current';\n  /**\n   * Background color. `scheme-*` values render as a dark-mode-safe inline\n   * `background-color: var(--bulma-scheme-*)` instead of a class. The\n   * `scheme-invert*` values do not change text color — pair them with a\n   * contrasting foreground.\n   */\n  bgColor?:\n    | (typeof validColors)[number]\n    | (typeof validSchemeColors)[number]\n    | 'inherit'\n    | 'current';\n  /** Text color. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Top bar for navigation or branding.\n *\n * @function\n * @param {HeroHeadProps} props - Props for the HeroHead component.\n * @returns {JSX.Element} The rendered hero head.\n */\nexport const HeroHead: React.FC<HeroHeadProps> = ({\n  className,\n  children,\n  color,\n  bgColor,\n  textColor,\n  style,\n  ...props\n}) => {\n  const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({\n    color: textColor ?? color,\n    backgroundColor: bgColor,\n    ...props,\n  });\n  const mainClass = usePrefixedClassNames('hero-head');\n  const heroHeadClasses = classNames(mainClass, bulmaHelperClasses, className);\n  return (\n    <div\n      className={heroHeadClasses}\n      style={mergeBulmaStyles(bulmaHelperStyles, style)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n};\n\n/**\n * Props for the HeroBody component.\n */\nexport interface HeroBodyProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Bulma color modifier for text. */\n  color?: (typeof validColors)[number] | 'inherit' | 'current';\n  /**\n   * Background color. `scheme-*` values render as a dark-mode-safe inline\n   * `background-color: var(--bulma-scheme-*)` instead of a class. The\n   * `scheme-invert*` values do not change text color — pair them with a\n   * contrasting foreground.\n   */\n  bgColor?:\n    | (typeof validColors)[number]\n    | (typeof validSchemeColors)[number]\n    | 'inherit'\n    | 'current';\n  /** Text color. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Main content area, vertically centered by default.\n *\n * @function\n * @param {HeroBodyProps} props - Props for the HeroBody component.\n * @returns {JSX.Element} The rendered hero body.\n */\nexport const HeroBody: React.FC<HeroBodyProps> = ({\n  className,\n  children,\n  color,\n  bgColor,\n  textColor,\n  style,\n  ...props\n}) => {\n  const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({\n    color: textColor ?? color,\n    backgroundColor: bgColor,\n    ...props,\n  });\n  const mainClass = usePrefixedClassNames('hero-body');\n  const heroBodyClasses = classNames(mainClass, bulmaHelperClasses, className);\n  return (\n    <div\n      className={heroBodyClasses}\n      style={mergeBulmaStyles(bulmaHelperStyles, style)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n};\n\n/**\n * Props for the HeroFoot component.\n */\nexport interface HeroFootProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Bulma color modifier for text. */\n  color?: (typeof validColors)[number] | 'inherit' | 'current';\n  /**\n   * Background color. `scheme-*` values render as a dark-mode-safe inline\n   * `background-color: var(--bulma-scheme-*)` instead of a class. The\n   * `scheme-invert*` values do not change text color — pair them with a\n   * contrasting foreground.\n   */\n  bgColor?:\n    | (typeof validColors)[number]\n    | (typeof validSchemeColors)[number]\n    | 'inherit'\n    | 'current';\n  /** Text color. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Bottom bar for tabs or actions.\n *\n * @function\n * @param {HeroFootProps} props - Props for the HeroFoot component.\n * @returns {JSX.Element} The rendered hero foot.\n */\nexport const HeroFoot: React.FC<HeroFootProps> = ({\n  className,\n  children,\n  color,\n  bgColor,\n  textColor,\n  style,\n  ...props\n}) => {\n  const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({\n    color: textColor ?? color,\n    backgroundColor: bgColor,\n    ...props,\n  });\n  const mainClass = usePrefixedClassNames('hero-foot');\n  const heroFootClasses = classNames(mainClass, bulmaHelperClasses, className);\n  return (\n    <div\n      className={heroFootClasses}\n      style={mergeBulmaStyles(bulmaHelperStyles, style)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n};\n\n// Attach subcomponents\nexport const Hero = withSubComponents(\n  HeroComponent,\n  {\n    Head: HeroHead,\n    Body: HeroBody,\n    Foot: HeroFoot,\n  },\n  'Hero'\n);\n\nexport default Hero;\n"],"names":["_jsx"],"mappings":"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"}

package/dist/esm/layout/Level.js

@@ -0,0 +1,110 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { jsx } from 'react/jsx-runtime';
+import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
+import { withSubComponents } from '../helpers/withSubComponents.js';
+import { ANCHOR_ONLY_ATTRS, omitAttrs } from '../helpers/anchorAttrs.js';
+import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+
+/**
+ * The `Level` component provides a flexible horizontal layout for your Bulma React UI, perfect for aligning items on the left and right, distributing items evenly, or centering statistics and controls.
+ *
+ * @function
+ * @param {LevelProps} props - Props for the Level component.
+ * @returns {JSX.Element} The rendered level.
+ * @see {@link https://bulma.io/documentation/layout/level/ | Bulma Level documentation}
+ */
+const LevelComponent = ({ isMobile, className, children, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const mainClass = usePrefixedClassNames('level', {
+        'is-mobile': isMobile,
+    });
+    const levelClasses = classNames(mainClass, bulmaHelperClasses, className);
+    return (jsx("nav", { className: levelClasses, ...rest, children: children }));
+};
+/**
+ * Left-aligned content.
+ *
+ * @function
+ * @param {LevelLeftProps} props - Props for the LevelLeft component.
+ * @returns {JSX.Element} The rendered level left section.
+ */
+const LevelLeft = ({ className, children, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const mainClass = usePrefixedClassNames('level-left');
+    const levelLeftClasses = classNames(mainClass, bulmaHelperClasses, className);
+    return (jsx("div", { className: levelLeftClasses, ...rest, children: children }));
+};
+/**
+ * Right-aligned content.
+ *
+ * @function
+ * @param {LevelRightProps} props - Props for the LevelRight component.
+ * @returns {JSX.Element} The rendered level right section.
+ */
+const LevelRight = ({ className, children, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const mainClass = usePrefixedClassNames('level-right');
+    const levelRightClasses = classNames(mainClass, bulmaHelperClasses, className);
+    return (jsx("div", { className: levelRightClasses, ...rest, children: children }));
+};
+/**
+ * The derived set plus `rel`.
+ *
+ * `rel` is not an anchor-only attribute — React declares it on every element, so
+ * `AnchorOnlyAttributes` excludes it — but this component has always withheld it
+ * from a non-anchor, so it is named separately rather than folded into the shared
+ * set. That separation is what says which names come from where.
+ *
+ * The annotation is load-bearing: without it a typo adds a key nobody strips, and
+ * widening the key type to `string` also erases `omitAttrs`'s return type.
+ */
+const STRIP_FROM_NON_ANCHOR = { ...ANCHOR_ONLY_ATTRS, rel: true };
+/**
+ * Individual item, can be rendered as `div`, `p`, or `a`.
+ *
+ * @function
+ * @param {LevelItemProps} props - Props for the LevelItem component.
+ * @returns {JSX.Element} The rendered level item.
+ */
+const LevelItem = ({ as = 'div', hasTextCentered, className, children, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const Tag = as;
+    const mainClass = usePrefixedClassNames('level-item', {
+        'has-text-centered': hasTextCentered,
+    });
+    const levelItemClasses = classNames(mainClass, bulmaHelperClasses, className);
+    // The anchor's own attributes reach an `<a>` and nothing else. The type
+    // declares them at every `as` — narrowing that is source-breaking (#672) — so
+    // the runtime is what keeps `<Level.Item as="p" download>` from rendering a
+    // dead attribute.
+    // `STRIP_FROM_NON_ANCHOR` above names the set and why `rel` is in it.
+    if (Tag === 'a') {
+        return (jsx("a", { className: levelItemClasses, ...rest, children: children }));
+    }
+    const withoutAnchorAttrs = omitAttrs(rest, STRIP_FROM_NON_ANCHOR);
+    return (jsx(Tag, { className: levelItemClasses, ...withoutAnchorAttrs, children: children }));
+};
+const Level = withSubComponents(LevelComponent, {
+    Left: LevelLeft,
+    Right: LevelRight,
+    Item: LevelItem,
+}, 'Level');
+
+export { Level, LevelItem, LevelLeft, LevelRight };
+//# sourceMappingURL=Level.js.map

package/dist/esm/layout/Level.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Level.js","sources":["../../../src/layout/Level.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport {\n  type AnchorOnlyAttributes,\n  ANCHOR_ONLY_ATTRS,\n  omitAttrs,\n} from '../helpers/anchorAttrs';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\n\n/**\n * Props for the Level component.\n */\nexport interface LevelProps\n  extends\n    React.HTMLAttributes<HTMLElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Keeps the level horizontal on mobile (Bulma `is-mobile`). Without it\n   * the level stacks vertically below tablet. */\n  isMobile?: boolean;\n  /** Bulma color modifier for the level. */\n  color?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Bulma background color helper. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Bulma text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Additional CSS classes. */\n  className?: string;\n  /** Level content (`Level.Left`, `Level.Right`, `Level.Item`). */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Level` component provides a flexible horizontal layout for your Bulma React UI, perfect for aligning items on the left and right, distributing items evenly, or centering statistics and controls.\n *\n * @function\n * @param {LevelProps} props - Props for the Level component.\n * @returns {JSX.Element} The rendered level.\n * @see {@link https://bulma.io/documentation/layout/level/ | Bulma Level documentation}\n */\nconst LevelComponent: React.FC<LevelProps> = ({\n  isMobile,\n  className,\n  children,\n  color,\n  bgColor,\n  textColor,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor ?? color,\n    backgroundColor: bgColor,\n    ...props,\n  });\n  const mainClass = usePrefixedClassNames('level', {\n    'is-mobile': isMobile,\n  });\n  const levelClasses = classNames(mainClass, bulmaHelperClasses, className);\n  return (\n    <nav className={levelClasses} {...rest}>\n      {children}\n    </nav>\n  );\n};\n\n/**\n * Props for the LevelLeft component.\n */\nexport interface LevelLeftProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Bulma color modifier. */\n  color?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Text color. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Additional CSS classes. */\n  className?: string;\n  /** Content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Left-aligned content.\n *\n * @function\n * @param {LevelLeftProps} props - Props for the LevelLeft component.\n * @returns {JSX.Element} The rendered level left section.\n */\nexport const LevelLeft: React.FC<LevelLeftProps> = ({\n  className,\n  children,\n  color,\n  bgColor,\n  textColor,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor ?? color,\n    backgroundColor: bgColor,\n    ...props,\n  });\n  const mainClass = usePrefixedClassNames('level-left');\n  const levelLeftClasses = classNames(mainClass, bulmaHelperClasses, className);\n  return (\n    <div className={levelLeftClasses} {...rest}>\n      {children}\n    </div>\n  );\n};\n\n/**\n * Props for the LevelRight component.\n */\nexport interface LevelRightProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Bulma color modifier. */\n  color?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Text color. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Additional CSS classes. */\n  className?: string;\n  /** Content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Right-aligned content.\n *\n * @function\n * @param {LevelRightProps} props - Props for the LevelRight component.\n * @returns {JSX.Element} The rendered level right section.\n */\nexport const LevelRight: React.FC<LevelRightProps> = ({\n  className,\n  children,\n  color,\n  bgColor,\n  textColor,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor ?? color,\n    backgroundColor: bgColor,\n    ...props,\n  });\n  const mainClass = usePrefixedClassNames('level-right');\n  const levelRightClasses = classNames(\n    mainClass,\n    bulmaHelperClasses,\n    className\n  );\n  return (\n    <div className={levelRightClasses} {...rest}>\n      {children}\n    </div>\n  );\n};\n\n/**\n * The derived set plus `rel`.\n *\n * `rel` is not an anchor-only attribute — React declares it on every element, so\n * `AnchorOnlyAttributes` excludes it — but this component has always withheld it\n * from a non-anchor, so it is named separately rather than folded into the shared\n * set. That separation is what says which names come from where.\n *\n * The annotation is load-bearing: without it a typo adds a key nobody strips, and\n * widening the key type to `string` also erases `omitAttrs`'s return type.\n */\nconst STRIP_FROM_NON_ANCHOR: Readonly<\n  Record<keyof AnchorOnlyAttributes | 'rel', true>\n> = { ...ANCHOR_ONLY_ATTRS, rel: true };\n\n/**\n * Props for the LevelItem component.\n *\n * The anchor attributes arrive through `AnchorOnlyAttributes`, at every `as`, and\n * are forwarded only when the tag is an `<a>` — so `<Level.Item as=\"p\" download>` compiles and\n * renders a `<p>` without it. That asymmetry is deliberate for now: deriving\n * them from `as` instead is what makes the dead pair a type error, and it also\n * stops `const p: LevelItemProps = { href }` compiling for consumers who write\n * it today. #672 carries that half, labelled `next-major`.\n *\n * What that set must NOT become is a hand-written list. Enumerating only `href`,\n * `target` and `rel` made every other anchor attribute a type error even at\n * `as=\"a\"`, which is what #641 reported; `helpers/anchorAttrs.ts` derives it from\n * React instead, and `ANCHOR_ONLY_ATTRS` there is the guard to protect.\n */\nexport interface LevelItemProps\n  extends\n    AnchorOnlyAttributes,\n    React.HTMLAttributes<\n      HTMLDivElement | HTMLParagraphElement | HTMLAnchorElement\n    >,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Element type to render. */\n  as?: 'div' | 'p' | 'a';\n  /** Center the text in the item. */\n  hasTextCentered?: boolean;\n  /** Bulma color modifier. */\n  color?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Text color. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Additional CSS classes. */\n  className?: string;\n  /** Content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Individual item, can be rendered as `div`, `p`, or `a`.\n *\n * @function\n * @param {LevelItemProps} props - Props for the LevelItem component.\n * @returns {JSX.Element} The rendered level item.\n */\nexport const LevelItem: React.FC<LevelItemProps> = ({\n  as = 'div',\n  hasTextCentered,\n  className,\n  children,\n  color,\n  bgColor,\n  textColor,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor ?? color,\n    backgroundColor: bgColor,\n    ...props,\n  });\n  const Tag = as;\n\n  const mainClass = usePrefixedClassNames('level-item', {\n    'has-text-centered': hasTextCentered,\n  });\n  const levelItemClasses = classNames(mainClass, bulmaHelperClasses, className);\n\n  // The anchor's own attributes reach an `<a>` and nothing else. The type\n  // declares them at every `as` — narrowing that is source-breaking (#672) — so\n  // the runtime is what keeps `<Level.Item as=\"p\" download>` from rendering a\n  // dead attribute.\n  // `STRIP_FROM_NON_ANCHOR` above names the set and why `rel` is in it.\n\n  if (Tag === 'a') {\n    return (\n      <a className={levelItemClasses} {...rest}>\n        {children}\n      </a>\n    );\n  }\n\n  const withoutAnchorAttrs = omitAttrs(rest, STRIP_FROM_NON_ANCHOR);\n\n  return (\n    <Tag className={levelItemClasses} {...withoutAnchorAttrs}>\n      {children}\n    </Tag>\n  );\n};\n\nexport const Level = withSubComponents(\n  LevelComponent,\n  {\n    Left: LevelLeft,\n    Right: LevelRight,\n    Item: LevelItem,\n  },\n  'Level'\n);\n\nexport default Level;\n"],"names":["_jsx"],"mappings":"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"}

package/dist/esm/layout/Media.js

@@ -0,0 +1,86 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { jsx } from 'react/jsx-runtime';
+import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
+import { withSubComponents } from '../helpers/withSubComponents.js';
+import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+
+/**
+ * The `Media` component implements Bulma’s powerful media object layout for React.
+ *
+ * @function
+ * @param {MediaProps} props - Props for the Media component.
+ * @returns {JSX.Element} The rendered media container.
+ * @see {@link https://bulma.io/documentation/layout/media-object/ | Bulma Media documentation}
+ */
+const MediaComponent = ({ as = 'article', className, children, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const Tag = as;
+    const mainClass = usePrefixedClassNames('media');
+    const mediaClasses = classNames(mainClass, bulmaHelperClasses, className);
+    return (jsx(Tag, { className: mediaClasses, ...rest, children: children }));
+};
+/**
+ * For avatars, thumbnails, icons (renders as `figure` or `div`)
+ *
+ * @function
+ * @param {MediaLeftProps} props - Props for the MediaLeft component.
+ * @returns {JSX.Element} The rendered media left section.
+ */
+const MediaLeft = ({ as = 'figure', className, children, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const Tag = as;
+    const mainClass = usePrefixedClassNames('media-left');
+    const mediaLeftClasses = classNames(mainClass, bulmaHelperClasses, className);
+    return (jsx(Tag, { className: mediaLeftClasses, ...rest, children: children }));
+};
+/**
+ * Main content (renders as `div`)
+ *
+ * @function
+ * @param {MediaContentProps} props - Props for the MediaContent component.
+ * @returns {JSX.Element} The rendered media content section.
+ */
+const MediaContent = ({ className, children, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const mainClass = usePrefixedClassNames('media-content');
+    const mediaContentClasses = classNames(mainClass, bulmaHelperClasses, className);
+    return (jsx("div", { className: mediaContentClasses, ...rest, children: children }));
+};
+/**
+ * Actions or controls (renders as `div`)
+ *
+ * @function
+ * @param {MediaRightProps} props - Props for the MediaRight component.
+ * @returns {JSX.Element} The rendered media right section.
+ */
+const MediaRight = ({ className, children, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const mainClass = usePrefixedClassNames('media-right');
+    const mediaRightClasses = classNames(mainClass, bulmaHelperClasses, className);
+    return (jsx("div", { className: mediaRightClasses, ...rest, children: children }));
+};
+/** Media component with Left, Content, and Right sub-components. */
+const Media = withSubComponents(MediaComponent, {
+    Left: MediaLeft,
+    Content: MediaContent,
+    Right: MediaRight,
+}, 'Media');
+
+export { Media, MediaContent, MediaLeft, MediaRight };
+//# sourceMappingURL=Media.js.map

package/dist/esm/layout/Media.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Media.js","sources":["../../../src/layout/Media.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\n\n/**\n * Props for the Media component.\n */\nexport interface MediaProps\n  extends\n    React.HTMLAttributes<HTMLElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Element type for the root Media container. */\n  as?: 'article' | 'div';\n  /** Bulma color modifier. */\n  color?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Bulma background color helper. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Bulma text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Additional CSS classes. */\n  className?: string;\n  /** Content inside the media container. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Media` component implements Bulma’s powerful media object layout for React.\n *\n * @function\n * @param {MediaProps} props - Props for the Media component.\n * @returns {JSX.Element} The rendered media container.\n * @see {@link https://bulma.io/documentation/layout/media-object/ | Bulma Media documentation}\n */\nconst MediaComponent: React.FC<MediaProps> = ({\n  as = 'article',\n  className,\n  children,\n  color,\n  bgColor,\n  textColor,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor ?? color,\n    backgroundColor: bgColor,\n    ...props,\n  });\n  const Tag = as;\n  const mainClass = usePrefixedClassNames('media');\n  const mediaClasses = classNames(mainClass, bulmaHelperClasses, className);\n  return (\n    <Tag className={mediaClasses} {...rest}>\n      {children}\n    </Tag>\n  );\n};\n\n/**\n * Props for the MediaLeft component.\n */\nexport interface MediaLeftProps\n  extends\n    React.HTMLAttributes<HTMLElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Element type to render. */\n  as?: 'figure' | 'div';\n  /** Bulma color modifier. */\n  color?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Text color. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Additional CSS classes. */\n  className?: string;\n  /** Content. */\n  children?: React.ReactNode;\n}\n\n/**\n * For avatars, thumbnails, icons (renders as `figure` or `div`)\n *\n * @function\n * @param {MediaLeftProps} props - Props for the MediaLeft component.\n * @returns {JSX.Element} The rendered media left section.\n */\nexport const MediaLeft: React.FC<MediaLeftProps> = ({\n  as = 'figure',\n  className,\n  children,\n  color,\n  bgColor,\n  textColor,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor ?? color,\n    backgroundColor: bgColor,\n    ...props,\n  });\n  const Tag = as;\n  const mainClass = usePrefixedClassNames('media-left');\n  const mediaLeftClasses = classNames(mainClass, bulmaHelperClasses, className);\n  return (\n    <Tag className={mediaLeftClasses} {...rest}>\n      {children}\n    </Tag>\n  );\n};\n\n/**\n * Props for the MediaContent component.\n */\nexport interface MediaContentProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Bulma color modifier. */\n  color?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Text color. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Additional CSS classes. */\n  className?: string;\n  /** Content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Main content (renders as `div`)\n *\n * @function\n * @param {MediaContentProps} props - Props for the MediaContent component.\n * @returns {JSX.Element} The rendered media content section.\n */\nexport const MediaContent: React.FC<MediaContentProps> = ({\n  className,\n  children,\n  color,\n  bgColor,\n  textColor,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor ?? color,\n    backgroundColor: bgColor,\n    ...props,\n  });\n  const mainClass = usePrefixedClassNames('media-content');\n  const mediaContentClasses = classNames(\n    mainClass,\n    bulmaHelperClasses,\n    className\n  );\n  return (\n    <div className={mediaContentClasses} {...rest}>\n      {children}\n    </div>\n  );\n};\n\n/**\n * Props for the MediaRight component.\n */\nexport interface MediaRightProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Bulma color modifier. */\n  color?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Text color. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Additional CSS classes. */\n  className?: string;\n  /** Content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Actions or controls (renders as `div`)\n *\n * @function\n * @param {MediaRightProps} props - Props for the MediaRight component.\n * @returns {JSX.Element} The rendered media right section.\n */\nexport const MediaRight: React.FC<MediaRightProps> = ({\n  className,\n  children,\n  color,\n  bgColor,\n  textColor,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor ?? color,\n    backgroundColor: bgColor,\n    ...props,\n  });\n  const mainClass = usePrefixedClassNames('media-right');\n  const mediaRightClasses = classNames(\n    mainClass,\n    bulmaHelperClasses,\n    className\n  );\n  return (\n    <div className={mediaRightClasses} {...rest}>\n      {children}\n    </div>\n  );\n};\n\n/** Media component with Left, Content, and Right sub-components. */\nexport const Media = withSubComponents(\n  MediaComponent,\n  {\n    Left: MediaLeft,\n    Content: MediaContent,\n    Right: MediaRight,\n  },\n  'Media'\n);\n\nexport default Media;\n"],"names":["_jsx"],"mappings":"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"}

package/dist/esm/layout/Section.js

@@ -0,0 +1,30 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { jsx } from 'react/jsx-runtime';
+import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
+import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+import { mergeBulmaStyles } from '../helpers/mergeBulmaStyles.js';
+
+/**
+ * The `Section` component provides vertical spacing and visual separation for your Bulma React UI.
+ *
+ * @function
+ * @param {SectionProps} props - Props for the Section component.
+ * @returns {JSX.Element} The rendered section.
+ * @see {@link https://bulma.io/documentation/layout/section/ | Bulma Section documentation}
+ */
+const Section = ({ size, className, children, color, bgColor, textColor, style, ...props }) => {
+    const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const mainClass = usePrefixedClassNames('section');
+    const sectionModifiers = usePrefixedClassNames('', {
+        [`is-${size}`]: size,
+    });
+    const sectionClasses = classNames(mainClass, sectionModifiers, className, bulmaHelperClasses);
+    return (jsx("section", { className: sectionClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
+};
+
+export { Section };
+//# sourceMappingURL=Section.js.map

package/dist/esm/layout/Section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.js","sources":["../../../src/layout/Section.tsx"],"sourcesContent":["import React from 'react';\nimport classNames, { usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n  validSchemeColors,\n} from '../helpers/useBulmaClasses';\nimport { mergeBulmaStyles } from '../helpers/mergeBulmaStyles';\n\n/**\n * Section size values for Bulma.\n */\ntype SectionSize = 'medium' | 'large';\n\n/**\n * Props for the Section component.\n */\nexport interface SectionProps\n  extends\n    React.HTMLAttributes<HTMLElement>,\n    Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {\n  /** Bulma color modifier for text. */\n  color?: (typeof validColors)[number] | 'inherit' | 'current';\n  /**\n   * Bulma background color helper. `scheme-*` values render as a\n   * dark-mode-safe inline `background-color: var(--bulma-scheme-*)` instead\n   * of a class. The `scheme-invert*` values do not change text color — pair\n   * them with a contrasting foreground.\n   */\n  bgColor?:\n    | (typeof validColors)[number]\n    | (typeof validSchemeColors)[number]\n    | 'inherit'\n    | 'current';\n  /** Bulma text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Section size for extra vertical spacing. */\n  size?: SectionSize;\n  /** Additional CSS classes. */\n  className?: string;\n  /** Section content. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Section` component provides vertical spacing and visual separation for your Bulma React UI.\n *\n * @function\n * @param {SectionProps} props - Props for the Section component.\n * @returns {JSX.Element} The rendered section.\n * @see {@link https://bulma.io/documentation/layout/section/ | Bulma Section documentation}\n */\nexport const Section: React.FC<SectionProps> = ({\n  size,\n  className,\n  children,\n  color,\n  bgColor,\n  textColor,\n  style,\n  ...props\n}) => {\n  const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({\n    color: textColor ?? color,\n    backgroundColor: bgColor,\n    ...props,\n  });\n\n  const mainClass = usePrefixedClassNames('section');\n  const sectionModifiers = usePrefixedClassNames('', {\n    [`is-${size}`]: size,\n  });\n  const sectionClasses = classNames(\n    mainClass,\n    sectionModifiers,\n    className,\n    bulmaHelperClasses\n  );\n\n  return (\n    <section\n      className={sectionClasses}\n      style={mergeBulmaStyles(bulmaHelperStyles, style)}\n      {...rest}\n    >\n      {children}\n    </section>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;AA6CA;;;;;;;AAOG;AACI,MAAM,OAAO,GAA2B,CAAC,EAC9C,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,KAAK,EACL,OAAO,EACP,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,KAAI;IACH,MAAM,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;QACtE,KAAK,EAAE,SAAS,IAAI,KAAK;AACzB,QAAA,eAAe,EAAE,OAAO;AACxB,QAAA,GAAG,KAAK;AACT,KAAA,CAAC;AAEF,IAAA,MAAM,SAAS,GAAG,qBAAqB,CAAC,SAAS,CAAC;AAClD,IAAA,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,EAAE,EAAE;AACjD,QAAA,CAAC,CAAA,GAAA,EAAM,IAAI,CAAA,CAAE,GAAG,IAAI;AACrB,KAAA,CAAC;AACF,IAAA,MAAM,cAAc,GAAG,UAAU,CAC/B,SAAS,EACT,gBAAgB,EAChB,SAAS,EACT,kBAAkB,CACnB;IAED,QACEA,iBACE,SAAS,EAAE,cAAc,EACzB,KAAK,EAAE,gBAAgB,CAAC,iBAAiB,EAAE,KAAK,CAAC,EAAA,GAC7C,IAAI,YAEP,QAAQ,EAAA,CACD;AAEd;;"}