@opensite/ui 3.0.4 → 3.0.6

package/dist/pricing-addons-cards.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-2nI4WPsD.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-D8cbIf_y.cjs';
 import { A as ActionConfig } from './blocks-DL92rOxr.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -179,6 +179,8 @@ interface PricingAddonsCardsProps {
      * Additional CSS classes for the action
      */
     actionClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * PricingAddonsCards displays a row of 3 add-on cards with feature lists.
@@ -198,6 +200,6 @@ interface PricingAddonsCardsProps {
  * />
  * ```
  */
-declare function PricingAddonsCards({ heading, subtitle, addons, addonsSlot, featureIcon, featureIconName, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, headingClassName, subtitleClassName, gridClassName, cardClassName, addonTitleClassName, addonDescriptionClassName, priceClassName, priceDescriptionClassName, featuresClassName, featureItemClassName, featureIconClassName, featureTextClassName, actionClassName, }: PricingAddonsCardsProps): React.JSX.Element;
+declare function PricingAddonsCards({ sectionId, heading, subtitle, addons, addonsSlot, featureIcon, featureIconName, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, headingClassName, subtitleClassName, gridClassName, cardClassName, addonTitleClassName, addonDescriptionClassName, priceClassName, priceDescriptionClassName, featuresClassName, featureItemClassName, featureIconClassName, featureTextClassName, actionClassName, }: PricingAddonsCardsProps): React.JSX.Element;
 
 export { PricingAddonsCards, type PricingAddonsCardsProps };

package/dist/pricing-addons-cards.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-RgHoLtLt.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-qC2HCInM.js';
 import { A as ActionConfig } from './blocks-DL92rOxr.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -179,6 +179,8 @@ interface PricingAddonsCardsProps {
      * Additional CSS classes for the action
      */
     actionClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * PricingAddonsCards displays a row of 3 add-on cards with feature lists.
@@ -198,6 +200,6 @@ interface PricingAddonsCardsProps {
  * />
  * ```
  */
-declare function PricingAddonsCards({ heading, subtitle, addons, addonsSlot, featureIcon, featureIconName, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, headingClassName, subtitleClassName, gridClassName, cardClassName, addonTitleClassName, addonDescriptionClassName, priceClassName, priceDescriptionClassName, featuresClassName, featureItemClassName, featureIconClassName, featureTextClassName, actionClassName, }: PricingAddonsCardsProps): React.JSX.Element;
+declare function PricingAddonsCards({ sectionId, heading, subtitle, addons, addonsSlot, featureIcon, featureIconName, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, headingClassName, subtitleClassName, gridClassName, cardClassName, addonTitleClassName, addonDescriptionClassName, priceClassName, priceDescriptionClassName, featuresClassName, featureItemClassName, featureIconClassName, featureTextClassName, actionClassName, }: PricingAddonsCardsProps): React.JSX.Element;
 
 export { PricingAddonsCards, type PricingAddonsCardsProps };

package/dist/pricing-addons-cards.js

@@ -396,6 +396,7 @@ var Section = React__default.forwardRef(
 );
 Section.displayName = "Section";
 function PricingAddonsCards({
+  sectionId = "pricing-addons-cards",
   heading,
   subtitle,
   addons,
@@ -565,6 +566,7 @@ function PricingAddonsCards({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/pricing-addons-featured.cjs

@@ -417,6 +417,7 @@ var Section = React__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function PricingAddonsFeatured({
+  sectionId = "pricing-addons-featured",
   heading,
   subtitle,
   featuredAddons,
@@ -666,6 +667,7 @@ function PricingAddonsFeatured({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/pricing-addons-featured.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-2nI4WPsD.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-D8cbIf_y.cjs';
 import { A as ActionConfig } from './blocks-DL92rOxr.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -245,6 +245,8 @@ interface PricingAddonsFeaturedProps {
      * Additional CSS classes for additional item price
      */
     additionalItemPriceClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * PricingAddonsFeatured displays featured add-on options with a secondary list of additional add-ons.
@@ -266,6 +268,6 @@ interface PricingAddonsFeaturedProps {
  * />
  * ```
  */
-declare function PricingAddonsFeatured({ heading, subtitle, featuredAddons, featuredAddonsSlot, additionalAddons, additionalAddonsSlot, additionalHeading, featureIcon, featureIconName, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, headingClassName, subtitleClassName, featuredGridClassName, cardClassName, highlightedCardClassName, cardTitleClassName, cardDescriptionClassName, priceClassName, priceDescriptionClassName, featuresClassName, featureItemClassName, featureIconClassName, featureTextClassName, actionClassName, additionalSectionClassName, additionalHeadingClassName, additionalGridClassName, additionalItemClassName, additionalItemTitleClassName, additionalItemDescriptionClassName, additionalItemPriceClassName, }: PricingAddonsFeaturedProps): React.JSX.Element;
+declare function PricingAddonsFeatured({ sectionId, heading, subtitle, featuredAddons, featuredAddonsSlot, additionalAddons, additionalAddonsSlot, additionalHeading, featureIcon, featureIconName, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, headingClassName, subtitleClassName, featuredGridClassName, cardClassName, highlightedCardClassName, cardTitleClassName, cardDescriptionClassName, priceClassName, priceDescriptionClassName, featuresClassName, featureItemClassName, featureIconClassName, featureTextClassName, actionClassName, additionalSectionClassName, additionalHeadingClassName, additionalGridClassName, additionalItemClassName, additionalItemTitleClassName, additionalItemDescriptionClassName, additionalItemPriceClassName, }: PricingAddonsFeaturedProps): React.JSX.Element;
 
 export { PricingAddonsFeatured, type PricingAddonsFeaturedProps };

package/dist/pricing-addons-featured.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-RgHoLtLt.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-qC2HCInM.js';
 import { A as ActionConfig } from './blocks-DL92rOxr.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -245,6 +245,8 @@ interface PricingAddonsFeaturedProps {
      * Additional CSS classes for additional item price
      */
     additionalItemPriceClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * PricingAddonsFeatured displays featured add-on options with a secondary list of additional add-ons.
@@ -266,6 +268,6 @@ interface PricingAddonsFeaturedProps {
  * />
  * ```
  */
-declare function PricingAddonsFeatured({ heading, subtitle, featuredAddons, featuredAddonsSlot, additionalAddons, additionalAddonsSlot, additionalHeading, featureIcon, featureIconName, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, headingClassName, subtitleClassName, featuredGridClassName, cardClassName, highlightedCardClassName, cardTitleClassName, cardDescriptionClassName, priceClassName, priceDescriptionClassName, featuresClassName, featureItemClassName, featureIconClassName, featureTextClassName, actionClassName, additionalSectionClassName, additionalHeadingClassName, additionalGridClassName, additionalItemClassName, additionalItemTitleClassName, additionalItemDescriptionClassName, additionalItemPriceClassName, }: PricingAddonsFeaturedProps): React.JSX.Element;
+declare function PricingAddonsFeatured({ sectionId, heading, subtitle, featuredAddons, featuredAddonsSlot, additionalAddons, additionalAddonsSlot, additionalHeading, featureIcon, featureIconName, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, headingClassName, subtitleClassName, featuredGridClassName, cardClassName, highlightedCardClassName, cardTitleClassName, cardDescriptionClassName, priceClassName, priceDescriptionClassName, featuresClassName, featureItemClassName, featureIconClassName, featureTextClassName, actionClassName, additionalSectionClassName, additionalHeadingClassName, additionalGridClassName, additionalItemClassName, additionalItemTitleClassName, additionalItemDescriptionClassName, additionalItemPriceClassName, }: PricingAddonsFeaturedProps): React.JSX.Element;
 
 export { PricingAddonsFeatured, type PricingAddonsFeaturedProps };

package/dist/pricing-addons-featured.js

@@ -396,6 +396,7 @@ var Section = React__default.forwardRef(
 );
 Section.displayName = "Section";
 function PricingAddonsFeatured({
+  sectionId = "pricing-addons-featured",
   heading,
   subtitle,
   featuredAddons,
@@ -645,6 +646,7 @@ function PricingAddonsFeatured({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/pricing-collapsible-plans.cjs

@@ -447,6 +447,7 @@ var Section = React__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function PricingCollapsiblePlans({
+  sectionId = "pricing-collapsible-plans",
   title,
   subtitle,
   plans = [],
@@ -667,6 +668,7 @@ function PricingCollapsiblePlans({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/pricing-collapsible-plans.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-2nI4WPsD.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-D8cbIf_y.cjs';
 import { A as ActionConfig } from './blocks-DL92rOxr.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -235,6 +235,8 @@ interface PricingCollapsiblePlansProps {
      * Additional CSS classes for the action
      */
     actionClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * PricingCollapsiblePlans displays pricing plans with a collapsible mobile menu and desktop comparison.
@@ -253,6 +255,6 @@ interface PricingCollapsiblePlansProps {
  * />
  * ```
  */
-declare function PricingCollapsiblePlans({ title, subtitle, plans, plansSlot, defaultSelectedIndex, selectedIndex, onSelectionChange, featureIcon, featureIconName, popularBadge, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, titleClassName, subtitleClassName, mobileSelectorClassName, selectorButtonClassName, dropdownClassName, dropdownItemClassName, dropdownItemSelectedClassName, mobileCardClassName, desktopGridClassName, cardClassName, popularCardClassName, badgeClassName, planTitleClassName, planDescriptionClassName, priceClassName, priceDescriptionClassName, featuresClassName, featureItemClassName, featureIconClassName, featureTextClassName, actionClassName, }: PricingCollapsiblePlansProps): React.JSX.Element;
+declare function PricingCollapsiblePlans({ sectionId, title, subtitle, plans, plansSlot, defaultSelectedIndex, selectedIndex, onSelectionChange, featureIcon, featureIconName, popularBadge, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, titleClassName, subtitleClassName, mobileSelectorClassName, selectorButtonClassName, dropdownClassName, dropdownItemClassName, dropdownItemSelectedClassName, mobileCardClassName, desktopGridClassName, cardClassName, popularCardClassName, badgeClassName, planTitleClassName, planDescriptionClassName, priceClassName, priceDescriptionClassName, featuresClassName, featureItemClassName, featureIconClassName, featureTextClassName, actionClassName, }: PricingCollapsiblePlansProps): React.JSX.Element;
 
 export { PricingCollapsiblePlans, type PricingCollapsiblePlansProps };

package/dist/pricing-collapsible-plans.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-RgHoLtLt.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-qC2HCInM.js';
 import { A as ActionConfig } from './blocks-DL92rOxr.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -235,6 +235,8 @@ interface PricingCollapsiblePlansProps {
      * Additional CSS classes for the action
      */
     actionClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * PricingCollapsiblePlans displays pricing plans with a collapsible mobile menu and desktop comparison.
@@ -253,6 +255,6 @@ interface PricingCollapsiblePlansProps {
  * />
  * ```
  */
-declare function PricingCollapsiblePlans({ title, subtitle, plans, plansSlot, defaultSelectedIndex, selectedIndex, onSelectionChange, featureIcon, featureIconName, popularBadge, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, titleClassName, subtitleClassName, mobileSelectorClassName, selectorButtonClassName, dropdownClassName, dropdownItemClassName, dropdownItemSelectedClassName, mobileCardClassName, desktopGridClassName, cardClassName, popularCardClassName, badgeClassName, planTitleClassName, planDescriptionClassName, priceClassName, priceDescriptionClassName, featuresClassName, featureItemClassName, featureIconClassName, featureTextClassName, actionClassName, }: PricingCollapsiblePlansProps): React.JSX.Element;
+declare function PricingCollapsiblePlans({ sectionId, title, subtitle, plans, plansSlot, defaultSelectedIndex, selectedIndex, onSelectionChange, featureIcon, featureIconName, popularBadge, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, titleClassName, subtitleClassName, mobileSelectorClassName, selectorButtonClassName, dropdownClassName, dropdownItemClassName, dropdownItemSelectedClassName, mobileCardClassName, desktopGridClassName, cardClassName, popularCardClassName, badgeClassName, planTitleClassName, planDescriptionClassName, priceClassName, priceDescriptionClassName, featuresClassName, featureItemClassName, featureIconClassName, featureTextClassName, actionClassName, }: PricingCollapsiblePlansProps): React.JSX.Element;
 
 export { PricingCollapsiblePlans, type PricingCollapsiblePlansProps };

package/dist/pricing-collapsible-plans.js

@@ -426,6 +426,7 @@ var Section = React__default.forwardRef(
 );
 Section.displayName = "Section";
 function PricingCollapsiblePlans({
+  sectionId = "pricing-collapsible-plans",
   title,
   subtitle,
   plans = [],
@@ -646,6 +647,7 @@ function PricingCollapsiblePlans({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/pricing-columns-toggle.cjs

@@ -439,6 +439,7 @@ var Section = React__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function PricingColumnsToggle({
+  sectionId = "pricing-columns-toggle",
   title,
   subtitle,
   monthlyLabel,
@@ -620,6 +621,7 @@ function PricingColumnsToggle({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/pricing-columns-toggle.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-2nI4WPsD.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-D8cbIf_y.cjs';
 import { A as ActionConfig } from './blocks-DL92rOxr.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -227,6 +227,8 @@ interface PricingColumnsToggleProps {
      * Additional CSS classes for the action
      */
     actionClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * PricingColumnsToggle displays a 3-column pricing layout with an annual billing toggle.
@@ -246,6 +248,6 @@ interface PricingColumnsToggleProps {
  * />
  * ```
  */
-declare function PricingColumnsToggle({ title, subtitle, monthlyLabel, yearlyLabel, yearlyBadge, toggleAriaLabel, monthlyInterval, yearlyInterval, plans, plansSlot, featureIcon, featureIconName, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, titleClassName, subtitleClassName, toggleClassName, toggleLabelClassName, toggleButtonClassName, gridClassName, cardClassName, highlightedCardClassName, planTitleClassName, planDescriptionClassName, priceClassName, priceIntervalClassName, separatorClassName, featuresClassName, featureItemClassName, featureIconClassName, featureTextClassName, actionClassName, }: PricingColumnsToggleProps): React.JSX.Element;
+declare function PricingColumnsToggle({ sectionId, title, subtitle, monthlyLabel, yearlyLabel, yearlyBadge, toggleAriaLabel, monthlyInterval, yearlyInterval, plans, plansSlot, featureIcon, featureIconName, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, titleClassName, subtitleClassName, toggleClassName, toggleLabelClassName, toggleButtonClassName, gridClassName, cardClassName, highlightedCardClassName, planTitleClassName, planDescriptionClassName, priceClassName, priceIntervalClassName, separatorClassName, featuresClassName, featureItemClassName, featureIconClassName, featureTextClassName, actionClassName, }: PricingColumnsToggleProps): React.JSX.Element;
 
 export { PricingColumnsToggle, type PricingColumnsToggleProps };

package/dist/pricing-columns-toggle.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-RgHoLtLt.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-qC2HCInM.js';
 import { A as ActionConfig } from './blocks-DL92rOxr.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -227,6 +227,8 @@ interface PricingColumnsToggleProps {
      * Additional CSS classes for the action
      */
     actionClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * PricingColumnsToggle displays a 3-column pricing layout with an annual billing toggle.
@@ -246,6 +248,6 @@ interface PricingColumnsToggleProps {
  * />
  * ```
  */
-declare function PricingColumnsToggle({ title, subtitle, monthlyLabel, yearlyLabel, yearlyBadge, toggleAriaLabel, monthlyInterval, yearlyInterval, plans, plansSlot, featureIcon, featureIconName, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, titleClassName, subtitleClassName, toggleClassName, toggleLabelClassName, toggleButtonClassName, gridClassName, cardClassName, highlightedCardClassName, planTitleClassName, planDescriptionClassName, priceClassName, priceIntervalClassName, separatorClassName, featuresClassName, featureItemClassName, featureIconClassName, featureTextClassName, actionClassName, }: PricingColumnsToggleProps): React.JSX.Element;
+declare function PricingColumnsToggle({ sectionId, title, subtitle, monthlyLabel, yearlyLabel, yearlyBadge, toggleAriaLabel, monthlyInterval, yearlyInterval, plans, plansSlot, featureIcon, featureIconName, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, titleClassName, subtitleClassName, toggleClassName, toggleLabelClassName, toggleButtonClassName, gridClassName, cardClassName, highlightedCardClassName, planTitleClassName, planDescriptionClassName, priceClassName, priceIntervalClassName, separatorClassName, featuresClassName, featureItemClassName, featureIconClassName, featureTextClassName, actionClassName, }: PricingColumnsToggleProps): React.JSX.Element;
 
 export { PricingColumnsToggle, type PricingColumnsToggleProps };

package/dist/pricing-columns-toggle.js

@@ -417,6 +417,7 @@ var Section = React__default.forwardRef(
 );
 Section.displayName = "Section";
 function PricingColumnsToggle({
+  sectionId = "pricing-columns-toggle",
   title,
   subtitle,
   monthlyLabel,
@@ -598,6 +599,7 @@ function PricingColumnsToggle({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/pricing-comparison-headers.cjs

@@ -444,6 +444,7 @@ var Section = React__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function PricingComparisonHeaders({
+  sectionId = "pricing-comparison-headers",
   title,
   subtitle,
   monthlyLabel,
@@ -626,6 +627,7 @@ function PricingComparisonHeaders({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/pricing-comparison-headers.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-2nI4WPsD.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-D8cbIf_y.cjs';
 import { A as ActionConfig } from './blocks-DL92rOxr.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -223,6 +223,8 @@ interface PricingComparisonHeadersProps {
      * Additional CSS classes for feature value cell
      */
     featureValueClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * PricingComparisonHeaders displays a comparison table with plan headers and monthly/yearly toggle.
@@ -240,6 +242,6 @@ interface PricingComparisonHeadersProps {
  * />
  * ```
  */
-declare function PricingComparisonHeaders({ title, subtitle, monthlyLabel, yearlyLabel, yearlyBadge, monthlyInterval, yearlyInterval, plans, plansSlot, features, featuresSlot, featureColumnLabel, availableIcon, unavailableIcon, availableIconName, unavailableIconName, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, titleClassName, subtitleClassName, toggleClassName, toggleLabelClassName, yearlyBadgeClassName, tableWrapperClassName, planHeaderClassName, planBadgeClassName, planTitleClassName, planDescriptionClassName, planPriceClassName, planPriceIntervalClassName, actionClassName, featureRowClassName, featureNameClassName, featureValueClassName, }: PricingComparisonHeadersProps): React.JSX.Element;
+declare function PricingComparisonHeaders({ sectionId, title, subtitle, monthlyLabel, yearlyLabel, yearlyBadge, monthlyInterval, yearlyInterval, plans, plansSlot, features, featuresSlot, featureColumnLabel, availableIcon, unavailableIcon, availableIconName, unavailableIconName, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, titleClassName, subtitleClassName, toggleClassName, toggleLabelClassName, yearlyBadgeClassName, tableWrapperClassName, planHeaderClassName, planBadgeClassName, planTitleClassName, planDescriptionClassName, planPriceClassName, planPriceIntervalClassName, actionClassName, featureRowClassName, featureNameClassName, featureValueClassName, }: PricingComparisonHeadersProps): React.JSX.Element;
 
 export { PricingComparisonHeaders, type PricingComparisonHeadersProps };

package/dist/pricing-comparison-headers.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-RgHoLtLt.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-qC2HCInM.js';
 import { A as ActionConfig } from './blocks-DL92rOxr.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -223,6 +223,8 @@ interface PricingComparisonHeadersProps {
      * Additional CSS classes for feature value cell
      */
     featureValueClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * PricingComparisonHeaders displays a comparison table with plan headers and monthly/yearly toggle.
@@ -240,6 +242,6 @@ interface PricingComparisonHeadersProps {
  * />
  * ```
  */
-declare function PricingComparisonHeaders({ title, subtitle, monthlyLabel, yearlyLabel, yearlyBadge, monthlyInterval, yearlyInterval, plans, plansSlot, features, featuresSlot, featureColumnLabel, availableIcon, unavailableIcon, availableIconName, unavailableIconName, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, titleClassName, subtitleClassName, toggleClassName, toggleLabelClassName, yearlyBadgeClassName, tableWrapperClassName, planHeaderClassName, planBadgeClassName, planTitleClassName, planDescriptionClassName, planPriceClassName, planPriceIntervalClassName, actionClassName, featureRowClassName, featureNameClassName, featureValueClassName, }: PricingComparisonHeadersProps): React.JSX.Element;
+declare function PricingComparisonHeaders({ sectionId, title, subtitle, monthlyLabel, yearlyLabel, yearlyBadge, monthlyInterval, yearlyInterval, plans, plansSlot, features, featuresSlot, featureColumnLabel, availableIcon, unavailableIcon, availableIconName, unavailableIconName, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, titleClassName, subtitleClassName, toggleClassName, toggleLabelClassName, yearlyBadgeClassName, tableWrapperClassName, planHeaderClassName, planBadgeClassName, planTitleClassName, planDescriptionClassName, planPriceClassName, planPriceIntervalClassName, actionClassName, featureRowClassName, featureNameClassName, featureValueClassName, }: PricingComparisonHeadersProps): React.JSX.Element;
 
 export { PricingComparisonHeaders, type PricingComparisonHeadersProps };

package/dist/pricing-comparison-headers.js

@@ -422,6 +422,7 @@ var Section = React__default.forwardRef(
 );
 Section.displayName = "Section";
 function PricingComparisonHeaders({
+  sectionId = "pricing-comparison-headers",
   title,
   subtitle,
   monthlyLabel,
@@ -604,6 +605,7 @@ function PricingComparisonHeaders({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/pricing-comparison-table.cjs

@@ -571,6 +571,7 @@ var Section = React__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function PricingComparisonTable({
+  sectionId = "pricing-comparison-table",
   title,
   subtitle,
   plans = [],
@@ -813,6 +814,7 @@ function PricingComparisonTable({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/pricing-comparison-table.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-2nI4WPsD.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-D8cbIf_y.cjs';
 import { A as ActionConfig } from './blocks-DL92rOxr.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -253,6 +253,8 @@ interface PricingComparisonTableProps {
      * Additional CSS classes for table cells
      */
     tableCellClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * PricingComparisonTable displays two pricing plans side-by-side with a detailed feature comparison table.
@@ -275,6 +277,6 @@ interface PricingComparisonTableProps {
  * />
  * ```
  */
-declare function PricingComparisonTable({ title, subtitle, plans, plansSlot, comparisonFeatures, comparisonSlot, comparisonHeading, featureColumnLabel, featureIcon, featureIconName, availableIcon, unavailableIcon, availableIconName, unavailableIconName, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, titleClassName, subtitleClassName, plansGridClassName, cardClassName, highlightedCardClassName, cardTitleClassName, cardDescriptionClassName, priceClassName, featuresClassName, featureItemClassName, featureIconClassName, featureTextClassName, actionClassName, separatorClassName, comparisonHeadingClassName, tableClassName, tableHeadClassName, tableRowClassName, tableCellClassName, }: PricingComparisonTableProps): React.JSX.Element;
+declare function PricingComparisonTable({ sectionId, title, subtitle, plans, plansSlot, comparisonFeatures, comparisonSlot, comparisonHeading, featureColumnLabel, featureIcon, featureIconName, availableIcon, unavailableIcon, availableIconName, unavailableIconName, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, titleClassName, subtitleClassName, plansGridClassName, cardClassName, highlightedCardClassName, cardTitleClassName, cardDescriptionClassName, priceClassName, featuresClassName, featureItemClassName, featureIconClassName, featureTextClassName, actionClassName, separatorClassName, comparisonHeadingClassName, tableClassName, tableHeadClassName, tableRowClassName, tableCellClassName, }: PricingComparisonTableProps): React.JSX.Element;
 
 export { PricingComparisonTable, type PricingComparisonTableProps };

package/dist/pricing-comparison-table.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-RgHoLtLt.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-qC2HCInM.js';
 import { A as ActionConfig } from './blocks-DL92rOxr.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -253,6 +253,8 @@ interface PricingComparisonTableProps {
      * Additional CSS classes for table cells
      */
     tableCellClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * PricingComparisonTable displays two pricing plans side-by-side with a detailed feature comparison table.
@@ -275,6 +277,6 @@ interface PricingComparisonTableProps {
  * />
  * ```
  */
-declare function PricingComparisonTable({ title, subtitle, plans, plansSlot, comparisonFeatures, comparisonSlot, comparisonHeading, featureColumnLabel, featureIcon, featureIconName, availableIcon, unavailableIcon, availableIconName, unavailableIconName, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, titleClassName, subtitleClassName, plansGridClassName, cardClassName, highlightedCardClassName, cardTitleClassName, cardDescriptionClassName, priceClassName, featuresClassName, featureItemClassName, featureIconClassName, featureTextClassName, actionClassName, separatorClassName, comparisonHeadingClassName, tableClassName, tableHeadClassName, tableRowClassName, tableCellClassName, }: PricingComparisonTableProps): React.JSX.Element;
+declare function PricingComparisonTable({ sectionId, title, subtitle, plans, plansSlot, comparisonFeatures, comparisonSlot, comparisonHeading, featureColumnLabel, featureIcon, featureIconName, availableIcon, unavailableIcon, availableIconName, unavailableIconName, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, titleClassName, subtitleClassName, plansGridClassName, cardClassName, highlightedCardClassName, cardTitleClassName, cardDescriptionClassName, priceClassName, featuresClassName, featureItemClassName, featureIconClassName, featureTextClassName, actionClassName, separatorClassName, comparisonHeadingClassName, tableClassName, tableHeadClassName, tableRowClassName, tableCellClassName, }: PricingComparisonTableProps): React.JSX.Element;
 
 export { PricingComparisonTable, type PricingComparisonTableProps };

package/dist/pricing-comparison-table.js

@@ -549,6 +549,7 @@ var Section = React__default.forwardRef(
 );
 Section.displayName = "Section";
 function PricingComparisonTable({
+  sectionId = "pricing-comparison-table",
   title,
   subtitle,
   plans = [],
@@ -791,6 +792,7 @@ function PricingComparisonTable({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/pricing-discount-card.cjs

@@ -503,6 +503,7 @@ var Section = React__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function PricingDiscountCard({
+  sectionId = "pricing-discount-card",
   title,
   description,
   originalPrice,
@@ -624,6 +625,7 @@ function PricingDiscountCard({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/pricing-discount-card.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-2nI4WPsD.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-D8cbIf_y.cjs';
 import { A as ActionConfig } from './blocks-DL92rOxr.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -169,6 +169,8 @@ interface PricingDiscountCardProps {
      * Additional CSS classes for the action
      */
     actionClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * PricingDiscountCard displays a single pricing card with a discount badge and strikethrough original price.
@@ -190,6 +192,6 @@ interface PricingDiscountCardProps {
  * />
  * ```
  */
-declare function PricingDiscountCard({ title, description, originalPrice, discountedPrice, discountBadge, priceDescription, features, featuresSlot, featureIcon, featureIconName, action, actionSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, cardClassName, badgeClassName, headerClassName, titleClassName, descriptionClassName, priceWrapperClassName, originalPriceClassName, discountedPriceClassName, priceDescriptionClassName, separatorClassName, featuresClassName, featureItemClassName, featureIconClassName, featureTextClassName, actionClassName, }: PricingDiscountCardProps): React.JSX.Element;
+declare function PricingDiscountCard({ sectionId, title, description, originalPrice, discountedPrice, discountBadge, priceDescription, features, featuresSlot, featureIcon, featureIconName, action, actionSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, cardClassName, badgeClassName, headerClassName, titleClassName, descriptionClassName, priceWrapperClassName, originalPriceClassName, discountedPriceClassName, priceDescriptionClassName, separatorClassName, featuresClassName, featureItemClassName, featureIconClassName, featureTextClassName, actionClassName, }: PricingDiscountCardProps): React.JSX.Element;
 
 export { PricingDiscountCard, type PricingDiscountCardProps };

package/dist/pricing-discount-card.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-RgHoLtLt.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-qC2HCInM.js';
 import { A as ActionConfig } from './blocks-DL92rOxr.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -169,6 +169,8 @@ interface PricingDiscountCardProps {
      * Additional CSS classes for the action
      */
     actionClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * PricingDiscountCard displays a single pricing card with a discount badge and strikethrough original price.
@@ -190,6 +192,6 @@ interface PricingDiscountCardProps {
  * />
  * ```
  */
-declare function PricingDiscountCard({ title, description, originalPrice, discountedPrice, discountBadge, priceDescription, features, featuresSlot, featureIcon, featureIconName, action, actionSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, cardClassName, badgeClassName, headerClassName, titleClassName, descriptionClassName, priceWrapperClassName, originalPriceClassName, discountedPriceClassName, priceDescriptionClassName, separatorClassName, featuresClassName, featureItemClassName, featureIconClassName, featureTextClassName, actionClassName, }: PricingDiscountCardProps): React.JSX.Element;
+declare function PricingDiscountCard({ sectionId, title, description, originalPrice, discountedPrice, discountBadge, priceDescription, features, featuresSlot, featureIcon, featureIconName, action, actionSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, cardClassName, badgeClassName, headerClassName, titleClassName, descriptionClassName, priceWrapperClassName, originalPriceClassName, discountedPriceClassName, priceDescriptionClassName, separatorClassName, featuresClassName, featureItemClassName, featureIconClassName, featureTextClassName, actionClassName, }: PricingDiscountCardProps): React.JSX.Element;
 
 export { PricingDiscountCard, type PricingDiscountCardProps };

package/dist/pricing-discount-card.js

@@ -481,6 +481,7 @@ var Section = React__default.forwardRef(
 );
 Section.displayName = "Section";
 function PricingDiscountCard({
+  sectionId = "pricing-discount-card",
   title,
   description,
   originalPrice,
@@ -602,6 +603,7 @@ function PricingDiscountCard({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/pricing-enterprise-contact.cjs

@@ -417,6 +417,7 @@ var Section = React__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function PricingEnterpriseContact({
+  sectionId = "pricing-enterprise-contact",
   title,
   subtitle,
   description,
@@ -514,6 +515,7 @@ function PricingEnterpriseContact({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/pricing-enterprise-contact.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-2nI4WPsD.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-D8cbIf_y.cjs';
 import { A as ActionConfig } from './blocks-DL92rOxr.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -145,6 +145,8 @@ interface PricingEnterpriseContactProps {
      * Additional CSS classes for the features column
      */
     featuresClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * PricingEnterpriseContact displays an enterprise-focused pricing section with contact CTA.
@@ -165,6 +167,6 @@ interface PricingEnterpriseContactProps {
  * />
  * ```
  */
-declare function PricingEnterpriseContact({ title, subtitle, description, features, featuresSlot, featureIcon, featureIconName, actions, actionsSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, cardClassName, gridClassName, contentClassName, subtitleClassName, titleClassName, descriptionClassName, actionsClassName, actionClassName, featuresClassName, }: PricingEnterpriseContactProps): React.JSX.Element;
+declare function PricingEnterpriseContact({ sectionId, title, subtitle, description, features, featuresSlot, featureIcon, featureIconName, actions, actionsSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, cardClassName, gridClassName, contentClassName, subtitleClassName, titleClassName, descriptionClassName, actionsClassName, actionClassName, featuresClassName, }: PricingEnterpriseContactProps): React.JSX.Element;
 
 export { PricingEnterpriseContact, type PricingEnterpriseContactProps };