@kickstartds/ds-agency-premium 1.6.71 → 1.6.72--canary.43.2476.0

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

@@ -1,6 +1,6 @@
 {
   "$schema": "http://json-schema.org/draft-07/schema#",
-  "$id": "http://schema.mydesignsystem.com/cms/blog-post.schema.json",
+  "$id": "http://cms.mydesignsystem.com/blog-post.schema.json",
   "title": "Blog Post",
   "description": "Abstracts a blog post concept into JSON schema",
   "type": "object",
@@ -30,7 +30,7 @@
       "$ref": "http://schema.mydesignsystem.com/cta.schema.json"
     },
     "seo": {
-      "$ref": "http://schema.mydesignsystem.com/cms/seo.schema.json"
+      "$ref": "http://cms.mydesignsystem.com/seo.schema.json"
     }
   }
 }

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

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Split } from '../split/index.js';
+import { SplitWeighted } from '../split-weighted/index.js';
 import { BlogHead } from '../blog-head/index.js';
 import { Section } from '../section/index.js';
 import { BlogAside } from '../blog-aside/index.js';
@@ -7,6 +7,7 @@ import { Text } from '../text/index.js';
 import { Cta } from '../cta/index.js';
 import 'classnames';
 import 'react';
+import '../../helpers-12f48df8.js';
 import '@kickstartds/blog/lib/post-head';
 import '@kickstartds/core/lib/react';
 import '@kickstartds/base/lib/section';
@@ -30,7 +31,9 @@ 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: 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 }) }) }))] }));
+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 }) }) }))] }));
 BlogPost.displayName = "BlogPost";
 
 export { BlogPost };

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

@@ -9,9 +9,6 @@
       "title": "Entry",
       "description": "Name of the tag entry",
       "type": "string"
-    },
-    "type": {
-      "const": "blog-tag"
     }
   },
   "additionalProperties": false,

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

@@ -11,7 +11,7 @@
   --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(--dsa-rich-text--color);
+  --dsa-blog-teaser__copy--color: var(--ks-text-color-copy);
   --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);
@@ -43,7 +43,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(--dsa-rich-text--color));
+  --c-post-teaser--color: var(--dsa-blog-teaser__copy--color, var(--ks-text-color-copy));
 }
 .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));

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

@@ -29,9 +29,6 @@
             "title": "Entry",
             "description": "Name of the tag entry",
             "type": "string"
-          },
-          "type": {
-            "const": "blog-tag"
           }
         },
         "additionalProperties": false,
@@ -150,9 +147,6 @@
     },
     "className": {
       "type": "string"
-    },
-    "type": {
-      "const": "blog-teaser"
     }
   },
   "additionalProperties": false,

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

@@ -4,6 +4,15 @@ import classnames from 'classnames';
 import { forwardRef, createContext, useContext } from 'react';
 import { PostTeaserContextDefault } from '@kickstartds/blog/lib/post-teaser';
 import { Container } from '@kickstartds/core/lib/container';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
+
+const defaults = {
+    "tags": [],
+    "link": {
+        "text": "Read article"
+    },
+    "author": {}
+};
 
 const BlogTeaserContextDefault = forwardRef(({ date, tags = [], headline, teaserText, image, alt, link, readingTime, author, className, ...rest }, ref) => {
     const teaserMetaItems = [];
@@ -27,20 +36,18 @@ const BlogTeaserContextDefault = forwardRef(({ date, tags = [], headline, teaser
                     }
                     : undefined,
                 items: teaserMetaItems,
-            }, link: link
-                ? {
-                    // @ts-expect-error
-                    target: link.url,
-                    label: link.text || "Read article",
-                }
-                : undefined, title: headline, body: teaserText, categories: tags.map((tag) => {
+            }, link: {
+                //@ts-expect-error
+                url: link.url,
+                label: link?.text || "Read article",
+            }, title: headline, body: teaserText, categories: tags.map((tag) => {
                 return { label: tag.entry };
             }), ref: ref }) }));
 });
 const BlogTeaserContext = createContext(BlogTeaserContextDefault);
 const BlogTeaser = forwardRef((props, ref) => {
     const Component = useContext(BlogTeaserContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 BlogTeaser.displayName = "BlogTeaser";
 

package/dist/components/breadcrumb/breadcrumb.css

@@ -0,0 +1,32 @@
+.dsa-breadcrumb {
+  --dsa-breadcrumb--gap: var(--ks-spacing-xxs);
+  --dsa-breadcrumb--font: var(--ks-font-interface-xs);
+  --dsa-breadcrumb--color: var(--ks-text-color-interface-interactive);
+  --dsa-breadcrumb--color_hover: var(--ks-text-color-interface-interactive-hover);
+  --dsa-breadcrumb__icon--size: 1.5em;
+  --dsa-breadcrumb__icon--color: var(--ks-color-fg-alpha-5);
+  --dsa-breadcrumb--color_active: var(--ks-text-color-interface-interactive-active);
+}
+
+.dsa-breadcrumb {
+  display: flex;
+  gap: var(--dsa-breadcrumb--gap, var(--ks-spacing-xxs));
+  flex-wrap: wrap;
+  align-items: flex-start;
+  font: var(--dsa-breadcrumb--font, var(--ks-font-interface-xs));
+}
+.dsa-breadcrumb__icon {
+  color: var(--dsa-breadcrumb__icon--color, var(--ks-color-fg-alpha-5));
+  width: var(--dsa-breadcrumb__icon--size, 1.5em);
+  height: var(--dsa-breadcrumb__icon--size, 1.5em);
+}
+.dsa-breadcrumb__link {
+  --g-link--color: var(--dsa-breadcrumb--color, var(--ks-text-color-interface-interactive));
+  --g-link--color-hover: var(--dsa-breadcrumb--color_hover, var(--ks-text-color-interface-interactive-hover));
+  font: inherit;
+}
+.dsa-breadcrumb__label {
+  color: var(--dsa-breadcrumb--color_active, var(--ks-text-color-interface-interactive-active));
+  font: inherit;
+  font-weight: var(--dsa-link--font-weight);
+}

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

@@ -0,0 +1,31 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/breadcrumb.schema.json",
+  "title": "Breadcrumb",
+  "type": "object",
+  "properties": {
+    "pages": {
+      "type": "array",
+      "description": "An array of breadcrumb pages. Each page should have a URL and a label.",
+      "items": {
+        "type": "object",
+        "properties": {
+          "url": {
+            "type": "string",
+            "description": "The URL to the page"
+          },
+          "label": {
+            "type": "string",
+            "description": "The label for the title of the page"
+          }
+        },
+        "required": [
+          "url",
+          "label"
+        ],
+        "additionalProperties": false
+      }
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/breadcrumb/breadcrumb.schema.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/breadcrumb.schema.json",
+  "title": "Breadcrumb",
+  "type": "object",
+  "properties": {
+    "pages": {
+      "type": "array",
+      "description": "An array of breadcrumb pages. Each page should have a URL and a label.",
+      "items": {
+        "type": "object",
+        "properties": {
+          "url": {
+            "type": "string",
+            "description": "The URL to the page"
+          },
+          "label": {
+            "type": "string",
+            "description": "The label for the title of the page"
+          }
+        },
+        "required": ["url", "label"]
+      }
+    }
+  },
+  "additionalProperties": false
+}

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

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { 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 json-schema-to-typescript to regenerate this file.
+ */
+interface BreadcrumbProps {
+    /**
+     * An array of breadcrumb pages. Each page should have a URL and a label.
+     */
+    pages?: {
+        /**
+         * The URL to the page
+         */
+        url: string;
+        /**
+         * The label for the title of the page
+         */
+        label: string;
+    }[];
+}
+declare const BreadcrumbContextDefault: import("react").ForwardRefExoticComponent<BreadcrumbProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+declare const BreadcrumbContext: import("react").Context<import("react").ForwardRefExoticComponent<BreadcrumbProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
+declare const Breadcrumb: import("react").ForwardRefExoticComponent<BreadcrumbProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export type { BreadcrumbProps };
+export { BreadcrumbContextDefault, BreadcrumbContext, Breadcrumb };

package/dist/components/breadcrumb/index.js

@@ -0,0 +1,22 @@
+import "./breadcrumb.css";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, createContext, useContext } from 'react';
+import { Icon } from '@kickstartds/base/lib/icon';
+import { Link } from '@kickstartds/base/lib/link';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
+
+const defaults = {
+    "pages": []
+};
+
+const BreadcrumbContextDefault = forwardRef(({ pages }, ref) => {
+    return (jsx("div", { className: "dsa-breadcrumb", ref: ref, children: pages.map((page, index) => index !== pages.length - 1 ? (jsxs(Fragment, { children: [jsx(Link, { href: page.url, className: "dsa-breadcrumb__link", children: page.label }), jsx(Icon, { className: "dsa-breadcrumb__icon", icon: "chevron-right" })] })) : (jsx("span", { className: "dsa-breadcrumb__label", children: page.label }))) }));
+});
+const BreadcrumbContext = createContext(BreadcrumbContextDefault);
+const Breadcrumb = forwardRef((props, ref) => {
+    const Component = useContext(BreadcrumbContext);
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
+});
+Breadcrumb.displayName = "Breadcrumb";
+
+export { Breadcrumb, BreadcrumbContext, BreadcrumbContextDefault };

package/dist/components/business-card/business-card.css

@@ -0,0 +1,188 @@
+.l-container--business-card {
+  /* stylelint-disable-next-line property-no-unknown */
+  container-name: business-card;
+}
+
+.dsa-business-card {
+  --dsa-business-card--border-radius: var(--ks-border-radius-card);
+  --dsa-business-card--padding: var(--ks-spacing-inset-m);
+  --dsa-business-card--background-color: var(--ks-background-color-card);
+  --dsa-business-card--gap: var(--ks-spacing-stack-l);
+}
+@container business-card (min-width: 640px) {
+  .dsa-business-card {
+    --dsa-business-card--padding: var(--ks-spacing-inset-xl);
+  }
+}
+.dsa-business-card {
+  --dsa-business-card__image--aspect-ratio: 16 / 9;
+  --dsa-business-card__image--border-radius: var(--ks-border-radius-card);
+  --dsa-business-card__topic--font: var(--dsa-topic--font);
+  --dsa-business-card__topic--font-weight: var(--dsa-topic--font-weight);
+  --dsa-business-card__topic--color: var(--dsa-topic--color);
+  --dsa-business-card__topic--margin-top: var(--ks-spacing-stack-m);
+  --dsa-business-card__logo--max-width: var(--dsa-tile--width_small);
+  --dsa-business-card__address--gap: var(--ks-spacing-stack-l) var(--ks-spacing-inline-xl);
+  --dsa-business-card__infos--font: var(--ks-font-interface-m);
+  --dsa-business-card__infos--color: var(--ks-text-color-copy);
+  --dsa-business-card__avatar--border-radius: var(--ks-border-radius-control);
+  --dsa-business-card__avatar--size: calc(var(--dsa-tile--width_smallest) / 2);
+  --dsa-business-card__contact-items--gap: var(--ks-spacing-xxs);
+  --dsa-business-card__contact--gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-s);
+  --dsa-business-card__contact--icon-size: 1.25em;
+  --dsa-business-card__contact--font: var(--ks-font-interface-m);
+  --dsa-business-card__contact--font-weight: var(--ks-font-weight-semi-bold);
+  --dsa-business-card__contact--color: var(--ks-text-color-interface-interactive);
+  --dsa-business-card__contact--color_hover: var(--ks-text-color-interface-interactive-hover);
+}
+
+.l-container--business-card {
+  /* stylelint-disable-next-line property-no-unknown */
+  container-name: business-card;
+}
+
+.dsa-business-card {
+  border-radius: var(--dsa-business-card--border-radius, var(--ks-border-radius-card));
+  padding: var(--dsa-business-card--padding, var(--ks-spacing-inset-xl));
+  display: flex;
+  gap: var(--dsa-business-card--gap, var(--ks-spacing-stack-l));
+  justify-content: center;
+  flex-direction: column;
+  background-color: var(--dsa-business-card--background-color, var(--ks-background-color-card));
+  align-items: flex-start;
+}
+@container business-card (min-width: 640px) {
+  .dsa-business-card {
+    flex-direction: row;
+    align-items: stretch;
+  }
+}
+.dsa-business-card--centered {
+  text-align: center;
+  align-items: center;
+}
+.dsa-business-card--centered .dsa-business-card__infos,
+.dsa-business-card--centered .dsa-business-card__content {
+  align-items: center;
+  text-align: center;
+}
+.dsa-business-card--centered .dsa-business-card__contact {
+  justify-content: center;
+}
+.dsa-business-card__content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--dsa-business-card--gap, var(--ks-spacing-stack-l));
+  flex-grow: 1;
+}
+@container business-card (min-width: 640px) {
+  .dsa-business-card__content {
+    flex-basis: var(--dsa-tile--width_medium);
+  }
+}
+.dsa-business-card__topic {
+  font: var(--dsa-business-card__topic--font, var(--dsa-topic--font));
+  color: var(--dsa-business-card__topic--color, var(--dsa-topic--color));
+  font-weight: var(--dsa-business-card__topic--font-weight, var(--dsa-topic--font-weight));
+}
+.dsa-business-card__location {
+  margin: 0;
+}
+.dsa-business-card__image {
+  flex-grow: 1;
+}
+.dsa-business-card__image img {
+  width: 100%;
+  aspect-ratio: var(--dsa-business-card__image--aspect-ratio, 16/9);
+  object-fit: cover;
+  border-radius: var(--dsa-business-card__image--border-radius, var(--ks-border-radius-card));
+}
+@container business-card (min-width: 640px) {
+  .dsa-business-card__image img {
+    aspect-ratio: unset;
+    width: 100%;
+    height: 100%;
+    max-height: 60vh;
+    object-fit: cover;
+  }
+}
+.dsa-business-card__logo {
+  max-width: var(--dsa-business-card__logo--max-width, var(--dsa-tile--width_small));
+  width: 100%;
+}
+.dsa-business-card__logo img {
+  width: 100%;
+}
+.dsa-business-card__address {
+  display: flex;
+  gap: var(--dsa-business-card__address--gap, var(--ks-spacing-stack-s));
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+.dsa-business-card__address--centered {
+  text-align: left;
+  justify-content: center;
+}
+.dsa-business-card__address--centered .dsa-business-card__address {
+  text-align: left;
+  flex-basis: var(--dsa-tile--width_medium);
+}
+.dsa-business-card__address--centered .dsa-business-card__infos {
+  flex-basis: var(--dsa-tile--width_medium);
+}
+.dsa-business-card__infos {
+  font: var(--dsa-business-card__infos--font, var(--ks-font-interface-m));
+  color: var(--dsa-business-card__infos--color, var(--ks-text-color-interface));
+  flex-grow: 1;
+  max-width: var(--dsa-tile--width_small);
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-spacing-stack-xs);
+}
+.dsa-business-card__avatar {
+  width: var(--dsa-business-card__avatar--size, 6em);
+  height: var(--dsa-business-card__avatar--size, 6em);
+  aspect-ratio: 1;
+  border-radius: var(--dsa-business-card__avatar--border-radius, var(--ks-border-radius-circle));
+  object-fit: cover;
+}
+.dsa-business-card__contact {
+  display: flex;
+  gap: var(--dsa-business-card__contact--gap, var(--ks-spacing-xxs));
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+.dsa-business-card__contact-items {
+  flex-basis: 100px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--dsa-business-card__contact-items--gap, var(--ks-spacing-xxs));
+}
+.dsa-business-card__contact-item {
+  display: flex;
+  align-items: center;
+  font: var(--dsa-business-card__contact--font, var(--ks-font-interface-m));
+  --g-link--color: var(--dsa-business-card__contact--color, var(--dsa-link--color));
+  --g-link--color-hover: var(--dsa-business-card__contact--color_hover, var(--dsa-link--color_hover));
+  --g-link--font-weight: var(--dsa-business-card__contact--font-weight, var(--ks-font-weight-semi-bold));
+  text-align: center;
+  white-space: nowrap;
+}
+.dsa-business-card__contact-item .icon {
+  width: var(--dsa-business-card__contact--icon-size, 1.25em);
+  height: var(--dsa-business-card__contact--icon-size, 1.25em);
+  margin-right: 0.35em;
+  flex-shrink: 0;
+}
+.dsa-business-card__buttons {
+  display: flex;
+  gap: var(--ks-spacing-stack-s);
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-bottom: var(--ks-spacing-inset-xs);
+}
+.dsa-business-card__buttons .c-button {
+  width: fit-content;
+}

package/dist/components/business-card/business-card.schema.dereffed.json

@@ -0,0 +1,141 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/business-card.schema.json",
+  "title": "Business Card",
+  "type": "object",
+  "properties": {
+    "centered": {
+      "type": "boolean",
+      "title": "Centered",
+      "description": "Whether the business card content is centered.",
+      "default": false
+    },
+    "image": {
+      "type": "object",
+      "title": "Background Image",
+      "description": "A background or feature image displayed on the business card.",
+      "properties": {
+        "src": {
+          "type": "string",
+          "format": "uri",
+          "description": "URL of the background image shown on the business card."
+        },
+        "alt": {
+          "type": "string",
+          "description": "Alternative text describing the background image."
+        }
+      },
+      "required": [
+        "src"
+      ],
+      "additionalProperties": false
+    },
+    "logo": {
+      "type": "object",
+      "title": "Company Logo",
+      "description": "The logo of the company or organization displayed on the business card.",
+      "properties": {
+        "src": {
+          "type": "string",
+          "format": "uri",
+          "description": "URL of the company or organization logo."
+        },
+        "alt": {
+          "type": "string",
+          "description": "Alternative text describing the logo."
+        },
+        "url": {
+          "type": "string",
+          "format": "uri",
+          "description": "URL to the company's website or landing page."
+        }
+      },
+      "required": [
+        "src"
+      ],
+      "additionalProperties": false
+    },
+    "topic": {
+      "type": "string",
+      "title": "Topic",
+      "description": "A headline or main topic for the business card, such as a job title or department."
+    },
+    "address": {
+      "type": "string",
+      "title": "Address",
+      "description": "The physical or mailing address displayed on the business card."
+    },
+    "avatar": {
+      "type": "object",
+      "title": "Avatar",
+      "description": "A profile image or avatar representing the person on the business card.",
+      "properties": {
+        "src": {
+          "type": "string",
+          "format": "uri",
+          "description": "URL of the person's avatar or profile image."
+        },
+        "alt": {
+          "type": "string",
+          "description": "Alternative text describing the avatar."
+        }
+      },
+      "required": [
+        "src"
+      ],
+      "additionalProperties": false
+    },
+    "contact": {
+      "type": "array",
+      "title": "Contact Information",
+      "description": "A list of contact methods for the person or business (e.g., email, phone, website).",
+      "items": {
+        "type": "object",
+        "properties": {
+          "label": {
+            "type": "string",
+            "description": "Label describing the contact method (e.g., 'Email', 'Phone')."
+          },
+          "icon": {
+            "type": "string",
+            "description": "Icon name or identifier representing the contact method."
+          },
+          "url": {
+            "type": "string",
+            "format": "uri",
+            "description": "URL or link for the contact method, if applicable."
+          }
+        },
+        "required": [
+          "label"
+        ],
+        "additionalProperties": false
+      }
+    },
+    "buttons": {
+      "type": "array",
+      "title": "Buttons",
+      "description": "A list of action buttons shown on the business card.",
+      "items": {
+        "type": "object",
+        "properties": {
+          "label": {
+            "type": "string",
+            "description": "Text label for the link."
+          },
+          "url": {
+            "type": "string",
+            "format": "uri",
+            "description": "URL the link points to."
+          }
+        },
+        "required": [
+          "label",
+          "url"
+        ],
+        "additionalProperties": false
+      }
+    }
+  },
+  "additionalProperties": false
+}