@kickstartds/ds-agency-premium 1.4.14 → 1.4.16--canary.15.832.0

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

@@ -0,0 +1,70 @@
+/// <reference types="react" />
+import { HTMLAttributes, FC, PropsWithChildren } from "react";
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+/**
+ * URL of the image to display
+ */
+type ImageSource = string;
+/**
+ * Alt text of the image
+ */
+type AltText = string;
+/**
+ * Image uses all the horizontal space vailable
+ */
+type FullWidth = boolean;
+/**
+ * Aspect Ratio of the Images
+ */
+type AspectRatio = "wide" | "square" | "vertical";
+/**
+ * Name, company name, etc.
+ */
+type Title = string;
+/**
+ * Position, profession, department, location, etc.
+ */
+type Subtitle = string;
+/**
+ * Open link in new Tab
+ */
+type OpenLinkInNewTab = boolean;
+type CopyText = string;
+/**
+ * Additional css classes attached to the wrapping element
+ */
+type Class = string;
+/**
+ * Optional custom component identifier
+ */
+type KsComponentAttribute = string;
+/**
+ * Component used for user interaction
+ */
+interface ContactProps {
+    image?: {
+        src?: ImageSource;
+        alt?: AltText;
+        fullWidth?: FullWidth;
+        aspectRatio?: AspectRatio;
+    };
+    title?: Title;
+    subtitle?: Subtitle;
+    links?: {
+        icon?: string;
+        label?: string;
+        href?: string;
+        newTab?: OpenLinkInNewTab;
+    }[];
+    copy?: CopyText;
+    className?: Class;
+    component?: KsComponentAttribute;
+}
+declare const Contact: import("react").ForwardRefExoticComponent<ContactProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLAnchorElement>>;
+declare const ContactProvider: FC<PropsWithChildren>;
+export { Contact, ContactProvider };

package/dist/components/contact/index.js

@@ -0,0 +1,16 @@
+import "./contact.css";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import classnames from 'classnames';
+import { Picture } from '@kickstartds/base/lib/picture';
+import { ContactContext } from '@kickstartds/base/lib/contact';
+import { Link } from '@kickstartds/base/lib/link';
+import { Icon } from '@kickstartds/base/lib/icon';
+import { RichText } from '@kickstartds/base/lib/rich-text';
+import { Container } from '@kickstartds/core/lib/container';
+
+const Contact = 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, { ...image, 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.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))) })) : ("")] })] }) })));
+Contact.displayName = "Contact";
+const ContactProvider = (props) => (jsx(ContactContext.Provider, { ...props, value: Contact }));
+
+export { Contact, ContactProvider };

package/dist/components/hero/hero.css

@@ -1,5 +1,5 @@
 .dsa-hero {
-  --dsa-hero__headline--color: var(--dsa-headline__headline--color);
+  --dsa-hero__headline--color: var(--dsa-headline--color);
   --dsa-hero__subheadline--color: var(--dsa-headline__subheadline--color);
   --dsa-hero_color-neutral__headline--color: var(--ks-text-color-default);
   --dsa-hero_color-neutral__subheadline--color: var(--ks-text-color-default);
@@ -57,7 +57,7 @@
 }
 
 .c-visual.dsa-hero .dsa-headline .dsa-headline__headline {
-  color: var(--dsa-hero__headline--color, var(--dsa-headline__headline--color, var(--ks-text-color-display)));
+  color: var(--dsa-hero__headline--color, var(--dsa-headline--color, var(--ks-text-color-display)));
 }
 .c-visual.dsa-hero .dsa-headline .dsa-headline__subheadline {
   color: var(--dsa-hero__subheadline--color, var(--dsa-headline__subheadline--color, var(--ks-text-color-primary)));

package/dist/components/html/html.schema.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.kickstartds.com/base/html.schema.json",
+  "title": "HTML",
+  "description": "Display raw HTML.",
+  "type": "object",
+  "properties": {
+    "html": {
+      "title": "HTML string",
+      "type": "string",
+      "examples": ["<p>Hello world!</p>"]
+    },
+    "className": {
+      "title": "Additional Classes",
+      "description": "Add additional css classes that should be applied to the element",
+      "type": "string"
+    },
+    "component": {
+      "title": "`ks-component` attribute",
+      "description": "Optional custom component identifier",
+      "type": "string"
+    }
+  },
+  "additionalProperties": false
+}

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

@@ -0,0 +1,26 @@
+import { ForwardRefRenderFunction, HTMLAttributes } from 'react';
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run `yarn run schema` to regenerate this file.
+ */
+type HTMLString = string;
+/**
+ * Add additional css classes that should be applied to the element
+ */
+type AdditionalClasses = string;
+/**
+ * Optional custom component identifier
+ */
+type KsComponentAttribute = string;
+/**
+ * Display raw HTML.
+ */
+interface HTMLProps {
+    html?: HTMLString;
+    className?: AdditionalClasses;
+    component?: KsComponentAttribute;
+}
+declare const HtmlComponent: ForwardRefRenderFunction<HTMLDivElement, HTMLProps & HTMLAttributes<HTMLDivElement>>;
+export { HTMLProps, HtmlComponent };

package/dist/components/html/index.js

@@ -0,0 +1,6 @@
+import { jsx } from 'react/jsx-runtime';
+import classnames from 'classnames';
+
+const HtmlComponent = ({ html, className, component, ...props }, ref) => (jsx("div", { className: classnames('c-html', className), dangerouslySetInnerHTML: { __html: html }, "ks-component": component, ref: ref, ...props }));
+
+export { HtmlComponent };

package/dist/components/image-story/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { ImageStoryProps } from "../../ImageStoryProps-03ff6d21.js";
+import { ImageStoryProps } from "../../ImageStoryProps-e853e1e7.js";
 declare const ImageStoryContextDefault: import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const ImageStoryContext: import("react").Context<import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const ImageStory: import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -24,7 +24,7 @@ interface SettingsProps {
      */
     seo: SeoProps;
 }
-export * from "../../BlogPostProps-3f6e4072.js";
-export * from "../../BlogOverviewProps-83d399b4.js";
-export * from "../../PageProps-83d399b4.js";
+export * from "../../BlogPostProps-99489f0b.js";
+export * from "../../BlogOverviewProps-9f207f1c.js";
+export * from "../../PageProps-aa29c554.js";
 export { SettingsProps };

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

@@ -1,4 +1,4 @@
-import { PageProps } from "../../PageProps-83d399b4.js";
+import { PageProps } from "../../PageProps-aa29c554.js";
 import { FC, PropsWithChildren } from "react";
 declare const Page: FC<PropsWithChildren<PageProps>>;
 export { Page };

package/dist/components/page-wrapper/index.js

@@ -15,6 +15,12 @@ import '@kickstartds/core/lib/component';
 import '../teaser-card/index.js';
 import '@kickstartds/base/lib/teaser-box';
 import '@kickstartds/core/lib/container';
+import '../contact/index.js';
+import '@kickstartds/base/lib/picture';
+import '@kickstartds/base/lib/contact';
+import '@kickstartds/base/lib/link';
+import '@kickstartds/base/lib/icon';
+import '@kickstartds/base/lib/rich-text';
 import '../headline/index.js';
 import 'markdown-to-jsx';
 import '@kickstartds/base/lib/headline';

package/dist/components/page-wrapper/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 03 Sep 2024 06:57:07 GMT
+ * Generated on Tue, 03 Sep 2024 13:04:06 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -115,8 +115,8 @@
   --ks-background-color-secondary-inverted-interactive-active-base: var(--ks-color-secondary-inverted-to-bg-2-base);
   --ks-background-color-secondary-inverted-interactive-selected-base: var(--ks-color-secondary-inverted-to-bg-4-base);
   --ks-background-color-secondary-inverted-translucent-base: var(--ks-color-secondary-inverted-alpha-5-base);
-  --ks-border-color-accent-base: var(--ks-color-primary-to-bg-8-base);
-  --ks-border-color-accent-inverted-base: var(--ks-color-primary-inverted-to-bg-8-base);
+  --ks-border-color-accent-base: var(--ks-color-fg-to-bg-7-base);
+  --ks-border-color-accent-inverted-base: var(--ks-color-fg-inverted-to-bg-7-base);
   --ks-border-color-clear-base: var(--ks-color-transparent-base);
   --ks-border-color-clear-interactive-base: var(--ks-color-transparent-base);
   --ks-border-color-clear-interactive-hover-base: var(--ks-color-primary-alpha-8-base);
@@ -807,14 +807,14 @@
   --ks-spacing-inset-stretch-xl: var(--ks-spacing-xxl) var(--ks-spacing-xl);
   --ks-text-color-default-base: var(--ks-color-fg-base);
   --ks-text-color-default-interactive-base: var(--ks-color-link-base);
-  --ks-text-color-default-interactive-hover-base: var(--ks-color-link-base);
-  --ks-text-color-default-interactive-active-base: var(--ks-color-link-base);
-  --ks-text-color-default-interactive-selected-base: var(--ks-color-link-base);
+  --ks-text-color-default-interactive-hover-base: var(--ks-color-link-to-fg-5-base);
+  --ks-text-color-default-interactive-active-base: var(--ks-color-link-to-fg-5-base);
+  --ks-text-color-default-interactive-selected-base: var(--ks-color-link-to-fg-5-base);
   --ks-text-color-default-inverted-base: var(--ks-color-fg-inverted-base);
   --ks-text-color-default-inverted-interactive-base: var(--ks-color-link-inverted-base);
-  --ks-text-color-default-inverted-interactive-hover-base: var(--ks-color-link-inverted-base);
-  --ks-text-color-default-inverted-interactive-active-base: var(--ks-color-link-inverted-base);
-  --ks-text-color-default-inverted-interactive-selected-base: var(--ks-color-link-inverted-base);
+  --ks-text-color-default-inverted-interactive-hover-base: var(--ks-color-link-inverted-to-fg-5-base);
+  --ks-text-color-default-inverted-interactive-active-base: var(--ks-color-link-inverted-to-fg-5-base);
+  --ks-text-color-default-inverted-interactive-selected-base: var(--ks-color-link-inverted-to-fg-5-base);
   --ks-text-color-copy-base: var(--ks-color-fg-alpha-3-base);
   --ks-text-color-copy-interactive-base: var(--ks-color-link-base);
   --ks-text-color-copy-interactive-hover-base: var(--ks-color-link-to-fg-2-base);

package/dist/components/presets.json

@@ -3,12 +3,15 @@
     "id": "blog-blog-aside--default",
     "group": "Blog/ Blog Aside",
     "name": "Default",
-    "code": "<BlogAside\n  author={{\n    byline: 'CEO at Company',\n    email: 'jane.smith@example.com',\n    image: 'img/people/author-emily.png',\n    name: 'Jane Smith',\n    twitter: 'jane_smith'\n  }}\n  date=\"12/30/2022\"\n  readingTime=\"5 min read\"\n  socialSharing={[\n    {\n      href: 'https://twitter.com/share?text=The%20Future%20of%20AI&url=https://example.com/blog/the-future-of-ai',\n      icon: 'twitter',\n      title: 'Share on Twitter'\n    },\n    {\n      href: 'https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/blog/the-future-of-ai&title=The%20Future%20of%20AI&summary=The%20Future%20of%20AI&source=LinkedIn',\n      icon: 'linkedin',\n      title: 'Share on LinkedIn'\n    }\n  ]}\n/>",
+    "code": "<BlogAside\n  author={{\n    byline: 'CEO at Company',\n    email: 'jane.smith@example.com',\n    image: {\n      alt: 'Picture of Jane Smith',\n      src: 'img/people/author-emily.png'\n    },\n    name: 'Jane Smith',\n    twitter: 'jane_smith'\n  }}\n  date=\"12/30/2022\"\n  readingTime=\"5 min read\"\n  socialSharing={[\n    {\n      href: 'https://twitter.com/share?text=The%20Future%20of%20AI&url=https://example.com/blog/the-future-of-ai',\n      icon: 'twitter',\n      title: 'Share on Twitter'\n    },\n    {\n      href: 'https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/blog/the-future-of-ai&title=The%20Future%20of%20AI&summary=The%20Future%20of%20AI&source=LinkedIn',\n      icon: 'linkedin',\n      title: 'Share on LinkedIn'\n    }\n  ]}\n  title=\"Blog Post\"\n/>",
     "args": {
       "author": {
         "name": "Jane Smith",
         "byline": "CEO at Company",
-        "image": "img/people/author-emily.png",
+        "image": {
+          "src": "img/people/author-emily.png",
+          "alt": "Picture of Jane Smith"
+        },
         "twitter": "jane_smith",
         "email": "jane.smith@example.com"
       },
@@ -25,7 +28,8 @@
         }
       ],
       "readingTime": "5 min read",
-      "date": "12/30/2022"
+      "date": "12/30/2022",
+      "title": "Blog Post"
     },
     "screenshot": "img/screenshots/blog-blog-aside--default.png"
   },
@@ -439,7 +443,7 @@
     "id": "pages-archetypes--blog-post",
     "group": "Pages/Archetypes",
     "name": "BlogPost",
-    "code": "<BlogPost\n  aside={{\n    author: {\n      byline: 'Senior Developer',\n      email: 'Jane.doe@example.com',\n      image: 'img/people/author-emily.png',\n      name: 'Jane Doe',\n      twitter: 'Janedoe'\n    },\n    date: '12/30/2022',\n    readingTime: '5 min read',\n    socialSharing: [\n      {\n        href: 'https://twitter.com/share?text=This%20is%20a%20blog%20post%20headline&url=https://example.com/blog',\n        icon: 'twitter',\n        title: 'Share on Twitter'\n      },\n      {\n        href: 'https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/blog&title=This%20is%20a%20blog%20post%20headline',\n        icon: 'linkedin',\n        title: 'Share on LinkedIn'\n      }\n    ]\n  }}\n  content=\"\n## Introduction\nThe future of **ArtiEficial Intelligence (AI)** is a topic that has been the subject of much debate. It's a field that's constantly evolving, with new advancements and breakthroughs happening all the time. [Learn more about AI](https://en.wikipedia.org/wiki/Artificial_intelligence)\n\n## The Current State of AI\nToday, AI is already a part of our daily lives. From *smart home devices* to *recommendation algorithms* on our favorite streaming services, AI is everywhere.\n\n## The Potential of AI\nThe potential of AI is immense. It has the ability to revolutionize industries, from healthcare to finance, and everything in between.\n\n## The Challenges of AI\nHowever, with great potential comes great challenges. Issues such as data privacy and the ethical implications of AI are just some of the hurdles that need to be overcome.\n\n## The Role of AI in Society\nAI has the potential to greatly impact society. It can lead to job creation in new industries, and can also help solve complex societal problems.\n\n## Conclusion\nThe future of AI is exciting and full of potential. However, it's important that we navigate this future with caution, ensuring that the benefits of AI are accessible to all, while minimizing its potential risks.\n          \"\n  cta={{\n    buttons: [\n      {\n        icon: 'person',\n        label: 'Contact Us',\n        target: '#'\n      },\n      {\n        icon: 'date',\n        label: 'Learn More',\n        target: '#'\n      }\n    ],\n    colorNeutral: false,\n    contentAlign: 'center',\n    fullWidth: false,\n    headline: 'Ready to Transform Your Development Process?',\n    highlightText: false,\n    image: {\n      padding: true\n    },\n    order: {\n      desktopImageLast: true,\n      mobileImageLast: false\n    },\n    sub: 'Start your journey today.',\n    text: 'Get started with our design system today and experience a new level of efficiency and consistency in your projects.',\n    textAlign: 'center'\n  }}\n  head={{\n    date: '12/30/2022',\n    headline: 'The Future of AI: A Glimpse into the Unseen',\n    image: 'img/close-up-young-business-team-working.png',\n    tags: [\n      {\n        entry: 'Technology'\n      },\n      {\n        entry: 'AI'\n      }\n    ]\n  }}\n  section={[\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'list',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      style: 'default',\n      width: 'default'\n    },\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'list',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      style: 'default',\n      width: 'default'\n    },\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'list',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      style: 'default',\n      width: 'default'\n    }\n  ]}\n/>",
+    "code": "<BlogPost\n  aside={{\n    author: {\n      byline: 'Senior Developer',\n      email: 'Jane.doe@example.com',\n      image: {\n        alt: 'Picture of Jane Smith',\n        src: 'img/people/author-emily.png'\n      },\n      name: 'Jane Doe',\n      twitter: 'Janedoe'\n    },\n    date: '12/30/2022',\n    readingTime: '5 min read',\n    socialSharing: [\n      {\n        href: 'https://twitter.com/share?text=This%20is%20a%20blog%20post%20headline&url=https://example.com/blog',\n        icon: 'twitter',\n        title: 'Share on Twitter'\n      },\n      {\n        href: 'https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/blog&title=This%20is%20a%20blog%20post%20headline',\n        icon: 'linkedin',\n        title: 'Share on LinkedIn'\n      }\n    ]\n  }}\n  content=\"\n## Introduction\nThe future of **Artificial Intelligence (AI)** is a topic that has been the subject of much debate. It's a field that's constantly evolving, with new advancements and breakthroughs happening all the time. [Learn more about AI](https://en.wikipedia.org/wiki/Artificial_intelligence)\n\n## The Current State of AI\nToday, AI is already a part of our daily lives. From *smart home devices* to *recommendation algorithms* on our favorite streaming services, AI is everywhere.\n\n## The Potential of AI\nThe potential of AI is immense. It has the ability to revolutionize industries, from healthcare to finance, and everything in between.\n\n## The Challenges of AI\nHowever, with great potential comes great challenges. Issues such as data privacy and the ethical implications of AI are just some of the hurdles that need to be overcome.\n\n## The Role of AI in Society\nAI has the potential to greatly impact society. It can lead to job creation in new industries, and can also help solve complex societal problems.\n\n## Conclusion\nThe future of AI is exciting and full of potential. However, it's important that we navigate this future with caution, ensuring that the benefits of AI are accessible to all, while minimizing its potential risks.\n          \"\n  cta={{\n    buttons: [\n      {\n        icon: 'person',\n        label: 'Contact Us',\n        target: '#'\n      },\n      {\n        icon: 'date',\n        label: 'Learn More',\n        target: '#'\n      }\n    ],\n    colorNeutral: false,\n    contentAlign: 'center',\n    fullWidth: false,\n    headline: 'Ready to Transform Your Development Process?',\n    highlightText: false,\n    image: {\n      padding: true\n    },\n    order: {\n      desktopImageLast: true,\n      mobileImageLast: false\n    },\n    sub: 'Start your journey today.',\n    text: 'Get started with our design system today and experience a new level of efficiency and consistency in your projects.',\n    textAlign: 'center'\n  }}\n  head={{\n    date: '12/30/2022',\n    headline: 'The Future of AI: A Glimpse into the Unseen',\n    image: 'img/close-up-young-business-team-working.png',\n    tags: [\n      {\n        entry: 'Technology'\n      },\n      {\n        entry: 'AI'\n      }\n    ]\n  }}\n  section={[\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'list',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      style: 'default',\n      width: 'default'\n    },\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'list',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      style: 'default',\n      width: 'default'\n    },\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'list',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      style: 'default',\n      width: 'default'\n    }\n  ]}\n/>",
     "args": {
       "head": {
         "date": "12/30/2022",
@@ -458,7 +462,10 @@
         "author": {
           "name": "Jane Doe",
           "byline": "Senior Developer",
-          "image": "img/people/author-emily.png",
+          "image": {
+            "src": "img/people/author-emily.png",
+            "alt": "Picture of Jane Smith"
+          },
           "twitter": "Janedoe",
           "email": "Jane.doe@example.com"
         },
@@ -634,10 +641,137 @@
         "contentAlign": "center",
         "text": "Get started with our design system today and experience a new level of efficiency and consistency in your projects."
       },
-      "content": "\n## Introduction\nThe future of **ArtiEficial Intelligence (AI)** is a topic that has been the subject of much debate. It's a field that's constantly evolving, with new advancements and breakthroughs happening all the time. [Learn more about AI](https://en.wikipedia.org/wiki/Artificial_intelligence)\n\n## The Current State of AI\nToday, AI is already a part of our daily lives. From *smart home devices* to *recommendation algorithms* on our favorite streaming services, AI is everywhere.\n\n## The Potential of AI\nThe potential of AI is immense. It has the ability to revolutionize industries, from healthcare to finance, and everything in between.\n\n## The Challenges of AI\nHowever, with great potential comes great challenges. Issues such as data privacy and the ethical implications of AI are just some of the hurdles that need to be overcome.\n\n## The Role of AI in Society\nAI has the potential to greatly impact society. It can lead to job creation in new industries, and can also help solve complex societal problems.\n\n## Conclusion\nThe future of AI is exciting and full of potential. However, it's important that we navigate this future with caution, ensuring that the benefits of AI are accessible to all, while minimizing its potential risks.\n          "
+      "content": "\n## Introduction\nThe future of **Artificial Intelligence (AI)** is a topic that has been the subject of much debate. It's a field that's constantly evolving, with new advancements and breakthroughs happening all the time. [Learn more about AI](https://en.wikipedia.org/wiki/Artificial_intelligence)\n\n## The Current State of AI\nToday, AI is already a part of our daily lives. From *smart home devices* to *recommendation algorithms* on our favorite streaming services, AI is everywhere.\n\n## The Potential of AI\nThe potential of AI is immense. It has the ability to revolutionize industries, from healthcare to finance, and everything in between.\n\n## The Challenges of AI\nHowever, with great potential comes great challenges. Issues such as data privacy and the ethical implications of AI are just some of the hurdles that need to be overcome.\n\n## The Role of AI in Society\nAI has the potential to greatly impact society. It can lead to job creation in new industries, and can also help solve complex societal problems.\n\n## Conclusion\nThe future of AI is exciting and full of potential. However, it's important that we navigate this future with caution, ensuring that the benefits of AI are accessible to all, while minimizing its potential risks.\n          "
     },
     "screenshot": "img/screenshots/pages-archetypes--blog-post.png"
   },
+  {
+    "id": "components-contact--wide-image",
+    "group": "Components/Contact",
+    "name": "WideImage",
+    "code": "<Contact\n  image={{\n    alt: 'Picture of Jane Smith',\n    aspectRatio: 'wide',\n    fullWidth: false,\n    src: 'img/people/portrait-young-girl-smiling.jpg'\n  }}\n  links={[\n    {\n      href: '#',\n      icon: 'twitter',\n      label: '@Isabella_Doe',\n      newTab: false\n    },\n    {\n      href: 'mailto:mail@example.com',\n      icon: 'linkedin',\n      label: 'Isabella.Doe',\n      newTab: false\n    }\n  ]}\n  subtitle=\"Creative Director\"\n  title=\"Isabella Doe\"\n/>",
+    "args": {
+      "image": {
+        "src": "img/people/portrait-young-girl-smiling.jpg",
+        "alt": "Picture of Jane Smith",
+        "fullWidth": false,
+        "aspectRatio": "wide"
+      },
+      "title": "Isabella Doe",
+      "subtitle": "Creative Director",
+      "links": [
+        {
+          "icon": "twitter",
+          "label": "@Isabella_Doe",
+          "href": "#",
+          "newTab": false
+        },
+        {
+          "icon": "linkedin",
+          "label": "Isabella.Doe",
+          "href": "mailto:mail@example.com",
+          "newTab": false
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/components-contact--wide-image.png"
+  },
+  {
+    "id": "components-contact--circular-avatar",
+    "group": "Components/Contact",
+    "name": "CircularAvatar",
+    "code": "<Contact\n  copy=\"Leads with a vision for innovative, user-centric web designs\"\n  image={{\n    alt: 'Picture of Jane Smith',\n    aspectRatio: 'square',\n    fullWidth: false,\n    src: 'img/people/author-emily.png'\n  }}\n  links={[\n    {\n      href: '#',\n      icon: 'twitter',\n      label: '@jane_smith',\n      newTab: false\n    },\n    {\n      href: 'mailto:mail@example.com',\n      icon: 'linkedin',\n      label: 'jane.smith',\n      newTab: false\n    }\n  ]}\n  subtitle=\"CEO at DS Agency\"\n  title=\"Jane Smith\"\n/>",
+    "args": {
+      "image": {
+        "src": "img/people/author-emily.png",
+        "alt": "Picture of Jane Smith",
+        "fullWidth": false,
+        "aspectRatio": "square"
+      },
+      "title": "Jane Smith",
+      "subtitle": "CEO at DS Agency",
+      "links": [
+        {
+          "icon": "twitter",
+          "label": "@jane_smith",
+          "href": "#",
+          "newTab": false
+        },
+        {
+          "icon": "linkedin",
+          "label": "jane.smith",
+          "href": "mailto:mail@example.com",
+          "newTab": false
+        }
+      ],
+      "copy": "Leads with a vision for innovative, user-centric web designs"
+    },
+    "screenshot": "img/screenshots/components-contact--circular-avatar.png"
+  },
+  {
+    "id": "components-contact--vertical-image-with-paragraph",
+    "group": "Components/Contact",
+    "name": "VerticalImageWithParagraph",
+    "code": "<Contact\n  copy=\"Leads with a vision for innovative, user-centric web designs, ensuring each project merges creativity with functionality to deliver outstanding digital experiences.\"\n  image={{\n    alt: 'Picture of Jane Smith',\n    aspectRatio: 'vertical',\n    fullWidth: false,\n    src: 'img/people/contact-john.png'\n  }}\n  links={[\n    {\n      href: 'mailto:mail@example.com',\n      icon: 'xing',\n      label: 'john.smith',\n      newTab: false\n    },\n    {\n      href: '#',\n      icon: 'twitter',\n      label: '@john_smith',\n      newTab: false\n    }\n  ]}\n  subtitle=\"Sales Representative\"\n  title=\"John Smith\"\n/>",
+    "args": {
+      "image": {
+        "src": "img/people/contact-john.png",
+        "alt": "Picture of Jane Smith",
+        "fullWidth": false,
+        "aspectRatio": "vertical"
+      },
+      "title": "John Smith",
+      "subtitle": "Sales Representative",
+      "links": [
+        {
+          "icon": "xing",
+          "label": "john.smith",
+          "href": "mailto:mail@example.com",
+          "newTab": false
+        },
+        {
+          "icon": "twitter",
+          "label": "@john_smith",
+          "href": "#",
+          "newTab": false
+        }
+      ],
+      "copy": "Leads with a vision for innovative, user-centric web designs, ensuring each project merges creativity with functionality to deliver outstanding digital experiences."
+    },
+    "screenshot": "img/screenshots/components-contact--vertical-image-with-paragraph.png"
+  },
+  {
+    "id": "components-contact--full-image-width",
+    "group": "Components/Contact",
+    "name": "FullImageWidth",
+    "code": "<Contact\n  copy=\"Blends artistic flair with technical expertise, creating visually stunning and intuitive websites that captivate users and drive engagement.\"\n  image={{\n    alt: 'Picture of Jane Smith',\n    aspectRatio: 'wide',\n    fullWidth: true,\n    src: 'img/people/contact-jim.png'\n  }}\n  links={[\n    {\n      href: 'mailto:mail@example.com',\n      icon: 'email',\n      label: 'jim.johnsson@mail.com',\n      newTab: false\n    },\n    {\n      href: '#',\n      icon: 'facebook',\n      label: '@jim_johnsson',\n      newTab: false\n    }\n  ]}\n  subtitle=\"Lead Designer\"\n  title=\"Jim Johnsson\"\n/>",
+    "args": {
+      "image": {
+        "src": "img/people/contact-jim.png",
+        "alt": "Picture of Jane Smith",
+        "fullWidth": true,
+        "aspectRatio": "wide"
+      },
+      "title": "Jim Johnsson",
+      "subtitle": "Lead Designer",
+      "links": [
+        {
+          "icon": "email",
+          "label": "jim.johnsson@mail.com",
+          "href": "mailto:mail@example.com",
+          "newTab": false
+        },
+        {
+          "icon": "facebook",
+          "label": "@jim_johnsson",
+          "href": "#",
+          "newTab": false
+        }
+      ],
+      "copy": "Blends artistic flair with technical expertise, creating visually stunning and intuitive websites that captivate users and drive engagement."
+    },
+    "screenshot": "img/screenshots/components-contact--full-image-width.png"
+  },
   {
     "id": "components-cta--banner",
     "group": "Components/Cta",

package/dist/components/providers/index.js

@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { ButtonProvider } from '../button/index.js';
 import { SectionProvider } from '../section/index.js';
 import { TeaserBoxProvider } from '../teaser-card/index.js';
+import { ContactProvider } from '../contact/index.js';
 import { HeadlineProvider } from '../headline/index.js';
 import { ThemeProvider } from '@bedrock-layout/spacing-constants';
 import { ButtonGroupProvider } from '../button-group/index.js';
@@ -14,6 +15,11 @@ import '../section/js/Section.client.js';
 import '@kickstartds/core/lib/component';
 import '@kickstartds/base/lib/teaser-box';
 import '@kickstartds/core/lib/container';
+import '@kickstartds/base/lib/picture';
+import '@kickstartds/base/lib/contact';
+import '@kickstartds/base/lib/link';
+import '@kickstartds/base/lib/icon';
+import '@kickstartds/base/lib/rich-text';
 import 'markdown-to-jsx';
 import '@kickstartds/base/lib/headline';
 import '@kickstartds/base/lib/button-group';
@@ -32,7 +38,7 @@ const theme = {
 };
 const BedrockProvider = (props) => (jsx(ThemeProvider, { theme: theme, ...props }));
 
-const Providers = (props) => (jsx(BedrockProvider, { children: jsx(ButtonProvider, { children: jsx(ButtonGroupProvider, { children: jsx(HeadlineProvider, { children: jsx(SectionProvider, { children: jsx(TeaserBoxProvider, { ...props }) }) }) }) }) }));
+const Providers = (props) => (jsx(BedrockProvider, { children: jsx(ButtonProvider, { children: jsx(ContactProvider, { children: jsx(ButtonGroupProvider, { children: jsx(HeadlineProvider, { children: jsx(SectionProvider, { children: jsx(TeaserBoxProvider, { ...props }) }) }) }) }) }) }));
 const providerDecorator = (storyFn, context) => (jsx(Providers, { children: storyFn(context) }));
 
 export { Providers as default, providerDecorator };

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes, FC, PropsWithChildren } from "react";
-import { SectionProps } from "../../SectionProps-03ff6d21.js";
+import { SectionProps } from "../../SectionProps-83d399b4.js";
 declare const SectionContextDefault: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;
 declare const SectionContext: import("react").Context<import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Section: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -6,7 +6,8 @@ import { FC, PropsWithChildren } from "react";
  * and run json-schema-to-typescript to regenerate this file.
  */
 interface SplitProps {
-    layout?: "sidebarRight" | "sidebarLeft" | "even";
+    layout?: "sidebarRight" | "sidebarLeft";
+    mainSectionWidth?: "narrow" | "medium" | "wide";
 }
 declare const Split: FC<PropsWithChildren<SplitProps>>;
 export { Split };

package/dist/components/split/index.js

@@ -2,6 +2,16 @@ import "./split.css";
 import { jsx } from 'react/jsx-runtime';
 import classnames from 'classnames';
 
-const Split = ({ layout, children, }) => (jsx("div", { className: classnames(`l-split l-split--${layout}`), children: children }));
+const Split = ({ layout = "sidebarRight", mainSectionWidth = "default", children, }) => (jsx("div", { className: classnames("l-split", layout === "sidebarRight"
+        ? "l-split--sidebar-right"
+        : layout === "sidebarLeft"
+            ? "l-split--sidebar-left"
+            : "l-split--sidebar-right", mainSectionWidth === "narrow"
+        ? "l-split--narrow"
+        : mainSectionWidth === "medium"
+            ? "l-split--medium"
+            : mainSectionWidth === "wide"
+                ? "l-split--wide"
+                : "l-split--medium"), children: children }));
 
 export { Split };

package/dist/components/split/split.css

@@ -1,24 +1,50 @@
-.l-split--sidebarRight {
+.l-split {
+  --dsa-split--gap-vertical: var(--ks-spacing-stack-l);
+  --dsa-split--gap-horizontal: var(--ks-spacing-inline-l);
+  --dsa-split__side--top-margin: var(--ks-spacing-stack-l);
+  --dsa-split__side--flex-basis: 210px;
+}
+
+.l-split {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--ks-spacing-stack-l) var(--ks-spacing-inline-xl);
+  gap: var(--dsa-split--gap-horizontal) var(--dsa-split--gap-horizontal);
+}
+.l-split--narrow {
+  --split__main--flex-basis: var(--l-section--content-width-narrow);
+}
+.l-split--medium {
+  --split__main--flex-basis: var(--l-section--content-width-default);
+}
+.l-split--wide {
+  --split__main--flex-basis: var(--l-section--content-width-wide);
 }
 @media (min-width: 48em) {
-  .l-split--sidebarRight {
+  .l-split {
     justify-content: space-between;
   }
 }
-.l-split--sidebarRight > :first-child {
-  flex-basis: calc(var(--l-section--content-width-default) - var(--l-section--content-padding) * 2);
+.l-split > * {
   flex-grow: 1;
   flex-shrink: 1;
 }
-.l-split--sidebarRight > :last-child {
-  flex-grow: 1;
-  flex-shrink: 1;
-  flex-basis: 210px;
+.l-split--sidebar-right > :first-child {
+  flex-basis: calc(var(--split__main--flex-basis) - var(--l-section--content-padding) * 2);
+}
+.l-split--sidebar-right > :last-child {
+  flex-basis: var(--dsa-split__side--flex-basis, 210px);
+  position: -webkit-sticky;
+  position: sticky;
+  top: var(--dsa-split__side--top-margin, var(--ks-spacing-stack-l));
+  height: fit-content;
+}
+.l-split--sidebar-left > :last-child {
+  flex-basis: calc(var(--split__main--flex-basis) - var(--l-section--content-padding) * 2);
+}
+.l-split--sidebar-left > :first-child {
+  flex-basis: var(--dsa-split__side--flex-basis, 210px);
   position: -webkit-sticky;
   position: sticky;
-  top: var(--ks-spacing-stack-l);
+  top: var(--dsa-split__side--top-margin, var(--ks-spacing-stack-l));
   height: fit-content;
 }

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

@@ -8,9 +8,18 @@
       "type": "string",
       "enum": [
         "sidebarRight",
-        "sidebarLeft",
-        "even"
-      ]
+        "sidebarLeft"
+      ],
+      "default": "sidebarRight"
+    },
+    "mainSectionWidth": {
+      "type": "string",
+      "enum": [
+        "narrow",
+        "medium",
+        "wide"
+      ],
+      "default": "medium"
     },
     "type": {
       "const": "split"