@kickstartds/ds-agency-premium 1.6.71--canary.45.1843.0 → 1.7.0--canary.18.1660.0

package/dist/components/blog-post/index.d.ts

@@ -1,5 +1,4 @@
 import { BlogPostProps } from "../../BlogPostProps-6b3cff22.js";
 import { FC, PropsWithChildren } from "react";
 declare const BlogPost: FC<PropsWithChildren<BlogPostProps>>;
-export type { BlogPostProps };
 export { BlogPost };

package/dist/components/blog-post/index.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { SplitWeighted } from '../split-weighted/index.js';
+import { Split } from '../split/index.js';
 import { BlogHead } from '../blog-head/index.js';
 import { Section } from '../section/index.js';
 import { BlogAside } from '../blog-aside/index.js';
@@ -30,9 +30,7 @@ import '@kickstartds/base/lib/button';
 import '../button-group/index.js';
 import '@kickstartds/base/lib/button-group';
 
-const BlogPost = ({ head, content, aside, cta, children, }) => (jsxs(Fragment, { children: [jsx(Section, { width: "wide", children: jsx(SplitWeighted, { verticalAlign: "sticky", horizontalGutter: "large", mainLayout: {
-                    minWidth: "narrow",
-                }, main: jsxs(Fragment, { children: [head && jsx(BlogHead, { ...head }), content ? jsx(Text, { text: content }) : children] }), aside: aside && jsx(BlogAside, { ...aside }) }) }), cta && (jsx(Fragment, { children: jsx(Section, { backgroundColor: "accent", content: { mode: "list" }, children: jsx(Cta, { ...cta }) }) }))] }));
+const BlogPost = ({ head, content, aside, cta, children, }) => (jsxs(Fragment, { children: [jsx(Section, { width: "wide", children: jsxs(Split, { mainSectionWidth: "narrow", layout: "sidebarRight", children: [jsxs("div", { children: [head && jsx(BlogHead, { ...head }), content ? jsx(Text, { text: content }) : children] }), jsx(BlogAside, { ...aside })] }) }), cta && (jsx(Fragment, { children: jsx(Section, { spaceAfter: "none", spaceBefore: "none", content: { mode: "list" }, children: jsx(Cta, { ...cta }) }) }))] }));
 BlogPost.displayName = "BlogPost";
 
 export { BlogPost };

package/dist/components/blog-teaser/blog-teaser.css

@@ -1,6 +1,6 @@
-.l-container--blog-teaser {
+.l-container--post-teaser {
   /* stylelint-disable-next-line property-no-unknown */
-  container-name: blog-teaser;
+  container-name: post-teaser;
 }
 
 .dsa-blog-teaser {
@@ -11,16 +11,15 @@
   --dsa-blog-teaser__topic--font-weight: var(--dsa-topic--font-weight);
   --dsa-blog-teaser__tag-label--font: var(--ks-font-interface-xs);
   --dsa-blog-teaser__copy--font: var(--ks-font-copy-s);
-  --dsa-blog-teaser__copy--color: var(--ks-text-color-copy);
+  --dsa-blog-teaser__copy--color: var(--dsa-rich-text--color);
   --dsa-blog-teaser__copy--color_hover: var(--ks-text-color-default);
   --dsa-blog-teaser__copy--margin-top: 0.5em;
   --dsa-blog-teaser__meta--font: var(--ks-spacing-stack-s);
   --dsa-blog-teaser__meta--color: var(--ks-text-color-interface);
   --dsa-blog-teaser__meta__author--font-weight: var(--ks-font-weight-semi-bold);
-  --dsa-blog-teaser__avatar--size: 2em;
-  --dsa-blog-teaser__image--border-radius: var(--ks-border-radius-card);
+  --dsa-post-teaser__image--border-radius: var(--ks-border-radius-card);
 }
-@container blog-teaser (min-width: 640px) {
+@container post-teaser (min-width: 640px) {
   .dsa-blog-teaser {
     --dsa-blog-teaser--gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-s);
     --dsa-blog-teaser__topic--font-size: var(--ks-font-size-copy-xl);
@@ -28,7 +27,7 @@
     --dsa-blog-teaser__tag-label--font: var(--ks-font-interface-s);
   }
 }
-@container blog-teaser (min-width: 1000px) {
+@container post-teaser (min-width: 1000px) {
   .dsa-blog-teaser {
     --dsa-blog-teaser__topic--font-size: var(--ks-font-size-copy-xxl);
   }
@@ -43,7 +42,7 @@
   --c-teaser--background: var(--dsa-blog-teaser--background, transparent);
   --c-post-teaser--gap: var(--dsa-blog-teaser--gap, var(--ks-spacing-stack-s) var(--ks-spacing-inline-s));
   --c-teaser_text--spacing: var(--dsa-blog-teaser__copy--margin-top, var(--ks-spacing-stack-s));
-  --c-post-teaser--color: var(--dsa-blog-teaser__copy--color, var(--ks-text-color-copy));
+  --c-post-teaser--color: var(--dsa-blog-teaser__copy--color, var(--dsa-rich-text--color));
 }
 .dsa-blog-teaser.c-post-teaser .c-tag-label {
   --c-tag-label--font: var(--dsa-blog-teaser__tag-label--font, var(--ks-font-interface-s));
@@ -67,7 +66,6 @@
   --c-post-meta_item--font: var(--dsa-blog-teaser__meta--font, var(--ks-font-interface-s));
   --c-post-meta_item--gap: 0.35em;
   --c-post-meta_author--color: var(--dsa-blog-teaser__meta--color, var(--c-post-meta_item--color));
-  --c-post-meta_author--avatar-size: var(--dsa-blog-teaser__avatar--size, 2em);
   --c-post-meta_author--gap: 0.35em;
   --c-post-meta_author--font-weight: var(
     --dsa-blog-teaser__meta__author--font-weight,

package/dist/components/blog-teaser/blog-teaser.schema.dereffed.json

@@ -67,14 +67,6 @@
         "img/close-up-young-business-team-working.png"
       ]
     },
-    "alt": {
-      "title": "Alt",
-      "description": "The alt text for the preview image",
-      "type": "string",
-      "examples": [
-        "Image of a business team working"
-      ]
-    },
     "link": {
       "type": "object",
       "title": "Link",
@@ -89,14 +81,14 @@
             "https://example.com"
           ]
         },
-        "text": {
-          "title": "Text",
-          "description": "The text for the link",
+        "label": {
+          "title": "Label",
+          "description": "The label to use for the link",
           "type": "string",
-          "default": "Read article",
           "examples": [
-            "Read article"
-          ]
+            "Read more"
+          ],
+          "default": "Read more"
         }
       },
       "additionalProperties": false,

package/dist/components/blog-teaser/blog-teaser.schema.json

@@ -41,12 +41,6 @@
       "format": "image",
       "examples": ["img/close-up-young-business-team-working.png"]
     },
-    "alt": {
-      "title": "Alt",
-      "description": "The alt text for the preview image",
-      "type": "string",
-      "examples": ["Image of a business team working"]
-    },
     "link": {
       "type": "object",
       "title": "Link",
@@ -59,12 +53,12 @@
           "format": "uri",
           "examples": ["https://example.com"]
         },
-        "text": {
-          "title": "Text",
-          "description": "The text for the link",
+        "label": {
+          "title": "Label",
+          "description": "The label to use for the link",
           "type": "string",
-          "default": "Read article",
-          "examples": ["Read article"]
+          "examples": ["Read more"],
+          "default": "Read more"
         }
       },
       "additionalProperties": false,

package/dist/components/blog-teaser/index.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
 import { BlogTeaserProps } from "../../BlogTeaserProps-f5855e93.js";
-declare const BlogTeaserContextDefault: import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-declare const BlogTeaserContext: import("react").Context<import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
-declare const BlogTeaser: import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-export type { BlogTeaserProps };
+declare const BlogTeaserContextDefault: import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLDivElement>>;
+declare const BlogTeaserContext: import("react").Context<import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLDivElement>>>;
+declare const BlogTeaser: import("react").ForwardRefExoticComponent<BlogTeaserProps & import("react").RefAttributes<HTMLDivElement>>;
 export { BlogTeaserContextDefault, BlogTeaserContext, BlogTeaser };

package/dist/components/blog-teaser/index.js

@@ -5,7 +5,7 @@ import { forwardRef, createContext, useContext } from 'react';
 import { PostTeaserContextDefault } from '@kickstartds/blog/lib/post-teaser';
 import { Container } from '@kickstartds/core/lib/container';
 
-const BlogTeaserContextDefault = forwardRef(({ date, tags = [], headline, teaserText, image, alt, link, readingTime, author, className, ...rest }, ref) => {
+const BlogTeaserContextDefault = forwardRef(({ date, tags = [], headline, teaserText, image, link, readingTime, author, className, ...rest }, ref) => {
     const teaserMetaItems = [];
     if (date)
         teaserMetaItems.push({
@@ -17,9 +17,9 @@ const BlogTeaserContextDefault = forwardRef(({ date, tags = [], headline, teaser
             icon: "time",
             text: readingTime,
         });
-    return (jsx(Container, { name: "blog-teaser", children: jsx(PostTeaserContextDefault, { ...rest, className: classnames(className, "dsa-blog-teaser"), 
+    return (jsx(Container, { name: "post-teaser", children: jsx(PostTeaserContextDefault, { ...rest, className: classnames(className, "dsa-blog-teaser"), 
             // @ts-expect-error
-            image: { src: image, alt: alt || headline }, meta: {
+            image: { src: image }, meta: {
                 author: author
                     ? {
                         image: author.image && { src: author.image },
@@ -27,11 +27,13 @@ const BlogTeaserContextDefault = forwardRef(({ date, tags = [], headline, teaser
                     }
                     : undefined,
                 items: teaserMetaItems,
-            }, link: {
-                //@ts-expect-error
-                url: link.url,
-                label: link?.text || "Read article",
-            }, title: headline, body: teaserText, categories: tags.map((tag) => {
+            }, link: link
+                ? {
+                    label: link.label || "Read more",
+                    // @ts-expect-error
+                    target: link.url,
+                }
+                : undefined, title: headline, body: teaserText, categories: tags.map((tag) => {
                 return { label: tag.entry };
             }), ref: ref }) }));
 });

package/dist/components/button/button.css

@@ -1,7 +1,7 @@
 .dsa-button {
-  --dsa-button--padding: 0.75em 1.5em;
+  --dsa-button--padding: 0.75em 2em;
   --dsa-button--border-width: var(--ks-border-width-default);
-  --dsa-button--border-radius: var(--ks-border-radius-control);
+  --dsa-button--border-radius: var(--ks-border-radius-pill);
   --dsa-button--font-weight: var(--ks-font-weight-semi-bold);
   --dsa-button--text-transform: default;
   --dsa-button_small--font: var(--ks-font-interface-s);

package/dist/components/button/button.schema.dereffed.json

@@ -13,10 +13,10 @@
         "Book a meeting"
       ]
     },
-    "url": {
+    "target": {
       "type": "string",
-      "title": "URL",
-      "description": "The URL to link to when the button is clicked",
+      "title": "Target",
+      "description": "Target that should be linked, makes the button behave like a link semantically",
       "format": "uri"
     },
     "variant": {
@@ -32,7 +32,6 @@
     },
     "icon": {
       "type": "string",
-      "format": "icon",
       "title": "Icon",
       "description": "Choose an icon"
     },

package/dist/components/button/button.schema.json

@@ -11,10 +11,10 @@
       "description": "Text content to display inside the button",
       "examples": ["Book a meeting"]
     },
-    "url": {
+    "target": {
       "type": "string",
-      "title": "URL",
-      "description": "The URL to link to when the button is clicked",
+      "title": "Target",
+      "description": "Target that should be linked, makes the button behave like a link semantically",
       "format": "uri"
     },
     "variant": {
@@ -26,7 +26,6 @@
     },
     "icon": {
       "type": "string",
-      "format": "icon",
       "title": "Icon",
       "description": "Choose an icon"
     },

package/dist/components/button/index.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes, FC, PropsWithChildren } from "react";
-import { ButtonProps } from "../../ButtonProps-00ddee3a.js";
+import { ButtonProps } from "../../ButtonProps-03ff6d21.js";
 declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 declare const ButtonProvider: FC<PropsWithChildren>;
-export type { ButtonProps };
 export { Button, ButtonProvider };

package/dist/components/button/index.js

@@ -4,7 +4,7 @@ import { forwardRef } from 'react';
 import classnames from 'classnames';
 import { ButtonContextDefault, ButtonContext } from '@kickstartds/base/lib/button';
 
-const Button = forwardRef(({ label, url, size = "medium", variant = "secondary", icon, disabled = false, className, ...props }, ref) => (jsx(ButtonContextDefault, { ...props, className: classnames("dsa-button", className), href: url, label: label, size: size, variant: variant === "primary"
+const Button = forwardRef(({ label, target, size = "medium", variant = "secondary", icon, disabled = false, className, ...props }, ref) => (jsx(ButtonContextDefault, { ...props, className: classnames("dsa-button", className), href: target, label: label, size: size, variant: variant === "primary"
         ? "solid"
         : variant === "secondary"
             ? "clear"

package/dist/components/button-group/button-group.schema.dereffed.json

@@ -23,10 +23,10 @@
               "Book a meeting"
             ]
           },
-          "url": {
+          "target": {
             "type": "string",
-            "title": "URL",
-            "description": "The URL to link to when the button is clicked",
+            "title": "Target",
+            "description": "Target that should be linked, makes the button behave like a link semantically",
             "format": "uri"
           },
           "variant": {
@@ -42,7 +42,6 @@
           },
           "icon": {
             "type": "string",
-            "format": "icon",
             "title": "Icon",
             "description": "Choose an icon"
           },

package/dist/components/button-group/index.d.ts

@@ -6,7 +6,7 @@ import { FC, PropsWithChildren } from "react";
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { ButtonProps } from "../../ButtonProps-00ddee3a.js";
+import { ButtonProps } from "../../ButtonProps-03ff6d21.js";
 /**
  * Buttons of the Button Group
  */
@@ -37,5 +37,4 @@ interface ButtonGroupProps {
 declare const ButtonGroup: import("react").ForwardRefExoticComponent<ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
 declare const ButtonGroupProvider: FC<PropsWithChildren>;
 declare const useButtonGroup: () => (props: ButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
-export type { ButtonGroupProps };
 export { ButtonGroup, ButtonGroupProvider, useButtonGroup };

package/dist/components/contact/contact.css

@@ -4,15 +4,15 @@
 }
 
 .dsa-contact {
-  --dsa-contact--gap-horizontal: var(--ks-spacing-inline-s);
-  --dsa-contact--gap-vertical: var(--ks-spacing-stack-s);
+  --dsa-contact--gap-horizontal: var(--ks-spacing-inline-m);
+  --dsa-contact--gap-vertical: var(--ks-spacing-stack-m);
   --dsa-contact__header--gap: 0;
-  --dsa-contact__image--flex-basis: var(--dsa-tile--width_smallest);
+  --dsa-contact__image--flex-basis: 200px;
   --dsa-contact__image--border-radius: var(--ks-border-radius-card);
   --dsa-contact__body--gap: var(--ks-spacing-stack-xs);
-  --dsa-contact__body--flex-basis: var(--dsa-tile--width_small);
-  --dsa-contact__copy--font: var(--ks-font-copy-m);
-  --dsa-contact__copy--color: var(--ks-text-color-copy);
+  --dsa-contact__body--flex-basis: 300px;
+  --dsa-contact__copy--font: var(--dsa-rich-text--font);
+  --dsa-contact__copy--color: var(--dsa-rich-text--color);
   --dsa-contact__title--color: var(--ks-text-color-display);
   --dsa-contact__title--font: var(--ks-font-copy-l);
   --dsa-contact__title--font-weight: var(--ks-font-weight-bold);
@@ -29,7 +29,6 @@
   --dsa-contact__link__icon--color: inherit;
   --dsa-contact__link--text-decoration: none;
   --dsa-contact__link--text-decoration_hover: none;
-  --dsa-contact__link--padding-vertical: 0.125em;
 }
 
 .l-container--contact {
@@ -40,7 +39,7 @@
 .dsa-contact {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--dsa-contact--gap-vertical) var(--dsa-contact--gap-horizontal);
+  gap: var(--dsa-contact--gap-horizontal) var(--dsa-contact--gap-vertical);
 }
 .dsa-contact__image-wrap, .dsa-contact__body {
   flex-grow: 1;
@@ -48,7 +47,7 @@
 .dsa-contact__body {
   display: flex;
   flex-grow: 1;
-  flex-shrink: 1;
+  flex-shrink: 0;
   flex-direction: column;
   gap: var(--dsa-contact__body--gap);
   flex-basis: var(--dsa-contact__body--flex-basis);
@@ -62,7 +61,6 @@
   flex-basis: var(--dsa-contact__image--flex-basis);
   height: 100%;
   width: 100%;
-  flex-shrink: 1;
 }
 .dsa-contact--image-full-width .dsa-contact__image-wrap {
   flex-grow: 1;
@@ -106,14 +104,12 @@
   margin: 0;
 }
 .dsa-contact a.dsa-contact__link {
-  padding: var(--dsa-contact__link--padding-vertical) 0;
   display: flex;
   align-items: center;
   color: var(--dsa-contact__link--color);
   font: var(--dsa-contact__link--font);
   font-weight: var(--dsa-contact__link--font-weight);
   text-decoration: var(--dsa-contact__link--text-decoration);
-  width: fit-content;
 }
 .dsa-contact a.dsa-contact__link .icon {
   width: var(--dsa-contact__link__icon--size);
@@ -124,4 +120,12 @@
 .dsa-contact a.dsa-contact__link:hover {
   color: var(--dsa-contact__link--color_hover);
   text-decoration: var(--dsa-contact__link--text-decoration_hover);
+}
+.dsa-contact .c-headline {
+  --c-headline--color: var(--dsa-contact__headline--color);
+  --c-headline--font: var(--dsa-contact__headline--font);
+  --c-headline--font-weight: var(--dsa-contact__headline--font-weight);
+  --c-headline__subheadline--color: var(--dsa-contact__headline__subheadline--color);
+  --c-headline__subheadline--font: var(--dsa-contact__headline__subheadline--font);
+  --c-headline__subheadline--font-weight: var(--dsa-contact__headline__subheadline--font-weight);
 }

package/dist/components/contact/contact.schema.dereffed.json

@@ -22,7 +22,7 @@
           "title": "Alt Text",
           "description": "Alt text of the image",
           "examples": [
-            "Picture of Isabella Doe"
+            "Picture of Jane Smith"
           ]
         },
         "fullWidth": {
@@ -50,7 +50,7 @@
       "description": "Name, company name, etc.",
       "type": "string",
       "examples": [
-        "Isabella Doe"
+        "Jane Smith"
       ]
     },
     "subtitle": {
@@ -67,13 +67,12 @@
         "type": "object",
         "properties": {
           "icon": {
-            "type": "string",
-            "format": "icon"
+            "type": "string"
           },
           "label": {
             "type": "string"
           },
-          "url": {
+          "href": {
             "type": "string",
             "format": "uri"
           },
@@ -82,14 +81,6 @@
             "description": "Open link in new Tab",
             "type": "boolean",
             "default": false
-          },
-          "ariaLabel": {
-            "title": "Aria Label",
-            "description": "Aria label for the link",
-            "type": "string",
-            "examples": [
-              "Link to Isabella Doe's social media profile"
-            ]
           }
         },
         "additionalProperties": false
@@ -99,12 +90,12 @@
           {
             "icon": "phone",
             "label": "0228 / 688 966 20",
-            "url": "tel:+4922868896620"
+            "href": "tel:+4922868896620"
           },
           {
             "icon": "email",
             "label": "mail@example.com",
-            "url": "mailto:mail@example.com"
+            "href": "mailto:mail@example.com"
           }
         ]
       ]

package/dist/components/contact/contact.schema.json

@@ -19,7 +19,7 @@
           "type": "string",
           "title": "Alt Text",
           "description": "Alt text of the image",
-          "examples": ["Picture of Isabella Doe"]
+          "examples": ["Picture of Jane Smith"]
         },
         "fullWidth": {
           "type": "boolean",
@@ -40,7 +40,7 @@
       "title": "Title",
       "description": "Name, company name, etc.",
       "type": "string",
-      "examples": ["Isabella Doe"]
+      "examples": ["Jane Smith"]
     },
     "subtitle": {
       "title": "Subtitle",
@@ -54,13 +54,12 @@
         "type": "object",
         "properties": {
           "icon": {
-            "type": "string",
-            "format": "icon"
+            "type": "string"
           },
           "label": {
             "type": "string"
           },
-          "url": {
+          "href": {
             "type": "string",
             "format": "uri"
           },
@@ -69,12 +68,6 @@
             "description": "Open link in new Tab",
             "type": "boolean",
             "default": false
-          },
-          "ariaLabel": {
-            "title": "Aria Label",
-            "description": "Aria label for the link",
-            "type": "string",
-            "examples": ["Link to Isabella Doe's social media profile"]
           }
         },
         "additionalProperties": false
@@ -84,12 +77,12 @@
           {
             "icon": "phone",
             "label": "0228 / 688 966 20",
-            "url": "tel:+4922868896620"
+            "href": "tel:+4922868896620"
           },
           {
             "icon": "email",
             "label": "mail@example.com",
-            "url": "mailto:mail@example.com"
+            "href": "mailto:mail@example.com"
           }
         ]
       ]

package/dist/components/contact/index.d.ts

@@ -34,10 +34,6 @@ type Subtitle = string;
  * Open link in new Tab
  */
 type OpenLinkInNewTab = boolean;
-/**
- * Aria label for the link
- */
-type AriaLabel = string;
 type CopyText = string;
 /**
  * Additional css classes attached to the wrapping element
@@ -62,9 +58,8 @@ interface ContactProps {
     links?: {
         icon?: string;
         label?: string;
-        url?: string;
+        href?: string;
         newTab?: OpenLinkInNewTab;
-        ariaLabel?: AriaLabel;
     }[];
     copy?: CopyText;
     className?: Class;
@@ -74,5 +69,4 @@ declare const ContactContextDefault: import("react").ForwardRefExoticComponent<C
 declare const ContactContext: import("react").Context<import("react").ForwardRefExoticComponent<ContactProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>>;
 declare const Contact: import("react").ForwardRefExoticComponent<ContactProps & import("react").RefAttributes<HTMLDivElement>>;
 declare const ContactProvider: FC<PropsWithChildren>;
-export type { ContactProps };
 export { ContactContextDefault, ContactContext, Contact, ContactProvider };

package/dist/components/contact/index.js

@@ -9,7 +9,7 @@ import { Icon } from '@kickstartds/base/lib/icon';
 import { RichText } from '@kickstartds/base/lib/rich-text';
 import { Container } from '@kickstartds/core/lib/container';
 
-const ContactContextDefault = forwardRef(({ title, subtitle, image, links, copy, className, ...props }, ref) => (jsx(Container, { name: "contact", children: jsxs("address", { className: classnames("dsa-contact", image?.aspectRatio && `dsa-contact--image-${image?.aspectRatio}`, image?.fullWidth && `dsa-contact--image-full-width`, className), ref: ref, ...props, children: [image && image.src && (jsx("div", { className: "dsa-contact__image-wrap", children: jsx(Picture, { src: image?.src, alt: image?.alt, className: "dsa-contact__image" }) })), jsxs("div", { className: "dsa-contact__body", children: [title && (jsxs("div", { className: "dsa-contact__header", children: [jsx("span", { className: "dsa-contact__title", children: title }), jsx("span", { className: "dsa-contact__subtitle", children: subtitle })] })), copy && jsx(RichText, { text: copy, className: "dsa-contact__copy" }), links && links.length && (jsx("ul", { className: "dsa-contact__links", children: links.map(({ icon, url, label, ariaLabel, newTab }, i) => (jsx("li", { children: jsxs(Link, { className: "dsa-contact__link", "aria-label": ariaLabel, href: url, ...(newTab && { target: "_blank", rel: "noopener" }), children: [jsx(Icon, { role: "presentation", focusable: "false", "aria-hidden": true, icon: icon }), label] }) }, i))) }))] })] }) })));
+const ContactContextDefault = forwardRef(({ title, subtitle, image, links, copy, className, ...props }, ref) => (jsx(Container, { name: "contact", children: jsxs("address", { className: classnames("dsa-contact", image?.aspectRatio && `dsa-contact--image-${image?.aspectRatio}`, image?.fullWidth && `dsa-contact--image-full-width`, className), ref: ref, ...props, children: [image && image.src ? (jsx("div", { className: "dsa-contact__image-wrap", children: jsx(Picture, { src: image?.src, alt: image?.alt, className: "dsa-contact__image" }) })) : (""), jsxs("div", { className: "dsa-contact__body", children: [title && (jsxs("div", { className: "dsa-contact__header", children: [jsx("span", { className: "dsa-contact__title", children: title }), jsx("span", { className: "dsa-contact__subtitle", children: subtitle })] })), copy && jsx(RichText, { text: copy, className: "dsa-contact__copy" }), links && links.length ? (jsx("ul", { className: "dsa-contact__links", children: links.map(({ icon, href, label, newTab }, i) => (jsx("li", { children: jsxs(Link, { className: "dsa-contact__link", href: href, ...(newTab ? { target: "_blank", rel: "noopener" } : {}), children: [jsx(Icon, { icon: icon }), label] }) }, i))) })) : ("")] })] }) })));
 const ContactContext = createContext(ContactContextDefault);
 const Contact = forwardRef((props, ref) => {
     const Component = useContext(ContactContext);