@kickstartds/ds-agency-premium 1.6.71--canary.45.1992.0 → 1.6.71--canary.45.1999.0

package/dist/components/headline/index.js

@@ -4,12 +4,21 @@ import classnames from 'classnames';
 import { forwardRef } from 'react';
 import { compiler } from 'markdown-to-jsx';
 import { HeadlineContext } from '@kickstartds/base/lib/headline';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
 
-const Headline = forwardRef(({ content, text = content, sub, align = "left", switchOrder = false, level = "h2", 
-// @ts-expect-error: Some kDS Components set the `styleAs`Props (e.g. https://github.com/kickstartDS/content/blob/next/source/storytelling/StorytellingComponent.tsx#L146)
-styleAs, style = styleAs || "h2", spaceAfter = "small", className, renderContent = compiler, renderSubheadline = compiler, ...props }, ref) => {
+const defaults = {
+    "switchOrder": false,
+    "level": "h2",
+    "style": "h2",
+    "spaceAfter": "small"
+};
+
+const Headline = forwardRef((props, ref) => {
+    const { content, text = content, sub, align = "left", switchOrder = false, level = "h2", 
+    // @ts-expect-error: Some kDS Components set the `styleAs`Props (e.g. https://github.com/kickstartDS/content/blob/next/source/storytelling/StorytellingComponent.tsx#L146)
+    styleAs, style = styleAs || "h2", spaceAfter = "small", className, renderContent = compiler, renderSubheadline = compiler, ...rest } = deepMergeDefaults(defaults, props);
     const TagName = level;
-    return text || sub ? (jsxs("header", { className: classnames("dsa-headline", `dsa-headline--${style}`, style !== "none" && style !== level && `dsa-headline--${style}`, `dsa-headline--align-${align}`, spaceAfter && `dsa-headline--space-after-${spaceAfter}`, className), ref: ref, ...props, children: [sub && switchOrder && (jsx("p", { className: "dsa-headline__subheadline", children: renderSubheadline(sub) })), jsx(TagName, { className: classnames("dsa-headline__headline"), children: jsxs("span", { className: "dsa-headline__inner", children: [renderContent(text), props.id && level === "h2" && (jsx("a", { href: `#${props.id}`, className: "dsa-headline__anchor", "aria-label": "Link to this section", title: "Link to this section", children: "#" }))] }) }), sub && !switchOrder && (jsx("p", { className: "dsa-headline__subheadline", children: renderSubheadline(sub) }))] })) : null;
+    return text || sub ? (jsxs("header", { className: classnames("dsa-headline", `dsa-headline--${style}`, style !== "none" && style !== level && `dsa-headline--${style}`, `dsa-headline--align-${align}`, spaceAfter && `dsa-headline--space-after-${spaceAfter}`, className), ref: ref, ...rest, children: [sub && switchOrder && (jsx("p", { className: "dsa-headline__subheadline", children: renderSubheadline(sub) })), jsx(TagName, { className: classnames("dsa-headline__headline"), children: jsxs("span", { className: "dsa-headline__inner", children: [renderContent(text), props.id && level === "h2" && (jsx("a", { href: `#${props.id}`, className: "dsa-headline__anchor", "aria-label": "Link to this section", title: "Link to this section", children: "#" }))] }) }), sub && !switchOrder && (jsx("p", { className: "dsa-headline__subheadline", children: renderSubheadline(sub) }))] })) : null;
 });
 Headline.displayName = "Headline";
 const HeadlineProvider = (props) => (jsx(HeadlineContext.Provider, { ...props, value: Headline }));