@kickstartds/ds-agency-premium 1.0.1

package/dist/components/image-text/image-text.schema.dereffed.json

@@ -0,0 +1,68 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/image-text.schema.json",
+  "title": "Image Text",
+  "description": "Component used to display an image beside or above/below a text block",
+  "type": "object",
+  "properties": {
+    "text": {
+      "type": "string",
+      "title": "Text",
+      "description": "Text content to display beside the image",
+      "examples": [
+        "This is a sample text"
+      ]
+    },
+    "highlightText": {
+      "type": "boolean",
+      "title": "Highlight Text",
+      "description": "Visually highlight the text",
+      "default": false
+    },
+    "image": {
+      "type": "object",
+      "properties": {
+        "src": {
+          "type": "string",
+          "title": "Image Source",
+          "description": "URL of the image to display",
+          "examples": [
+            "http://example.com/image.jpg"
+          ]
+        },
+        "alt": {
+          "type": "string",
+          "title": "Alt Text",
+          "description": "Alt text of the image",
+          "examples": [
+            "http://example.com/image.jpg"
+          ]
+        }
+      },
+      "additionalProperties": false
+    },
+    "layout": {
+      "type": "string",
+      "enum": [
+        "above",
+        "below",
+        "beside-right",
+        "beside-left"
+      ],
+      "title": "Layout",
+      "description": "Position of the image relative to the text",
+      "examples": [
+        "above"
+      ]
+    },
+    "type": {
+      "const": "image-text"
+    }
+  },
+  "required": [
+    "text",
+    "image",
+    "layout"
+  ],
+  "additionalProperties": false
+}

package/dist/components/image-text/image-text.schema.json

@@ -0,0 +1,46 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/image-text.schema.json",
+  "title": "Image Text",
+  "description": "Component used to display an image beside or above/below a text block",
+  "type": "object",
+  "properties": {
+    "text": {
+      "type": "string",
+      "title": "Text",
+      "description": "Text content to display beside the image",
+      "examples": ["This is a sample text"]
+    },
+    "highlightText": {
+      "type": "boolean",
+      "title": "Highlight Text",
+      "description": "Visually highlight the text",
+      "default": false
+    },
+    "image": {
+      "type": "object",
+      "properties": {
+        "src": {
+          "type": "string",
+          "title": "Image Source",
+          "description": "URL of the image to display",
+          "examples": ["http://example.com/image.jpg"]
+        },
+        "alt": {
+          "type": "string",
+          "title": "Alt Text",
+          "description": "Alt text of the image",
+          "examples": ["http://example.com/image.jpg"]
+        }
+      }
+    },
+    "layout": {
+      "type": "string",
+      "enum": ["above", "below", "beside-right", "beside-left"],
+      "title": "Layout",
+      "description": "Position of the image relative to the text",
+      "examples": ["above"]
+    }
+  },
+  "required": ["text", "image", "layout"]
+}

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

@@ -0,0 +1,5 @@
+import { HTMLAttributes, FC, PropsWithChildren } from "react";
+import { ImageTextProps } from "../../ImageTextProps-9286cca4.js";
+declare const ImageText: FC<ImageTextProps & HTMLAttributes<HTMLElement>>;
+declare const ImageTextProvider: FC<PropsWithChildren<any>>;
+export { ImageText, ImageTextProvider };

package/dist/components/image-text/index.js

@@ -0,0 +1,20 @@
+import "./image-text.css";
+import { jsx, Fragment } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { TextMediaContextDefault, TextMediaContext } from '@kickstartds/base/lib/text-media';
+import { Container } from '@kickstartds/core/lib/container';
+
+const ImageText = ({ text, image, layout, highlightText, ...props }) => (jsx(Fragment, { children: jsx(Container, { name: "text-media", children: jsx(TextMediaContextDefault, { className: classnames(highlightText ? "c-image-text--highlight" : "", "c-image-text"), ...props, text: text, media: [
+                {
+                    image: {
+                        src: image.src,
+                    },
+                },
+            ], mediaAlignment: layout === "above"
+                ? "above-center"
+                : layout === "below"
+                    ? "below-center"
+                    : layout }) }) }));
+const ImageTextProvider = (props) => (jsx(TextMediaContext.Provider, { ...props, value: ImageText }));
+
+export { ImageText, ImageTextProvider };

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

@@ -0,0 +1,4 @@
+import { HTMLAttributes, FC } from "react";
+import { LogosProps } from "../../LogosProps-8af8b3c7.js";
+declare const Logos: FC<LogosProps & HTMLAttributes<HTMLElement>>;
+export { Logos };

package/dist/components/logos/index.js

@@ -0,0 +1,12 @@
+import "./logos.css";
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { LogoTiles } from '@kickstartds/content/lib/logo-tiles';
+import { Button } from '@kickstartds/base/lib/button';
+import { Link } from '@kickstartds/base/lib/link';
+
+const Logos = ({ logos = [], tagline, align, cta, logosPerRow = "6", }) => {
+    return (jsx(Fragment, { children: jsxs("div", { className: classnames(`c-logos c-logos--align-${align}`), children: [jsx("div", { className: "c-logos__tagline", children: tagline }), jsx(LogoTiles, { className: classnames(`c-logo-tiles--cols-${logosPerRow}`), logos: logos }), cta?.toggle ? (jsxs("div", { className: "c-logos__cta", children: [jsxs("div", { className: "c-logos__cta__text", children: [cta?.text, cta?.style === "text" ? (jsxs(Fragment, { children: [" ", jsx(Link, { className: "c-logos__cta__link", href: cta.link, children: cta.label })] })) : ("")] }), cta?.style === "button" ? (jsx(Button, { href: cta.link, label: cta.label })) : ("")] })) : ("")] }) }));
+};
+
+export { Logos };

package/dist/components/logos/logos.css

@@ -0,0 +1,91 @@
+.c-logos .c-logo-tiles {
+  --c-logo-tiles--cols: 2;
+  --c-logo-tiles--gutter: 2em;
+}
+@container logo-tiles (min-width: 420px) {
+  .c-logos .c-logo-tiles {
+    --c-logo-tiles--cols: 3;
+    --c-logo-tiles--gutter: 2em;
+  }
+  .c-logos .c-logo-tiles--cols-2 {
+    --c-logo-tiles--cols: 2;
+  }
+}
+@container logo-tiles (min-width: 640px) {
+  .c-logos .c-logo-tiles--cols-2 {
+    --c-logo-tiles--cols: 2;
+  }
+  .c-logos .c-logo-tiles--cols-3 {
+    --c-logo-tiles--cols: 3;
+  }
+  .c-logos .c-logo-tiles--cols-4 {
+    --c-logo-tiles--cols: 4;
+  }
+  .c-logos .c-logo-tiles--cols-5 {
+    --c-logo-tiles--cols: 5;
+  }
+  .c-logos .c-logo-tiles--cols-6 {
+    --c-logo-tiles--cols: 6;
+  }
+  .c-logos .c-logo-tiles--cols-7 {
+    --c-logo-tiles--cols: 7;
+  }
+  .c-logos .c-logo-tiles--cols-8 {
+    --c-logo-tiles--cols: 8;
+  }
+}
+
+.c-logos {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-spacing-stack-m);
+}
+.c-logos__tagline {
+  font: var(--ks-font-display-m);
+  max-width: var(--l-section--content-width-narrow);
+  color: var(--ks-color-fg);
+  width: 100%;
+}
+.c-logos__cta {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-spacing-stack-m);
+}
+.c-logos__cta .c-button {
+  width: fit-content;
+}
+.c-logos__cta__text {
+  color: var(--ks-text-color-default);
+  max-width: var(--l-section--content-width-narrow);
+}
+.c-logos__cta__text, .c-logos__cta__link {
+  font: var(--ks-font-copy-m);
+}
+.c-logos--align-left .c-logo-tiles {
+  justify-content: start;
+}
+.c-logos--align-center .c-logos__cta {
+  align-items: center;
+}
+.c-logos--align-center .c-logos__cta__text,
+.c-logos--align-center .c-logos__tagline {
+  text-align: center;
+  margin: auto;
+}
+.c-logos .c-logo-tiles {
+  gap: calc(var(--c-logo-tiles--gutter) / 2) var(--c-logo-tiles--gutter);
+  margin: 0;
+}
+.c-logos .c-logo-tiles__col {
+  margin: 0;
+  aspect-ratio: 16/9;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.c-logos .c-logo-tiles__col::after {
+  content: none;
+}
+.c-logos .c-logo-tiles img {
+  position: relative;
+}

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

@@ -0,0 +1,131 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/logos.schema.json",
+  "title": "Logos",
+  "description": "Component used to display a set of logos",
+  "type": "object",
+  "properties": {
+    "tagline": {
+      "type": "string",
+      "title": "Logo Tagline",
+      "description": "A short tagline atop the logos",
+      "examples": [
+        "Your Success, Our Commitment"
+      ]
+    },
+    "logos": {
+      "type": "array",
+      "title": "Logos",
+      "description": "The logos to display",
+      "items": {
+        "type": "object",
+        "properties": {
+          "src": {
+            "type": "string",
+            "title": "URL",
+            "description": "The URL of the logo image",
+            "examples": [
+              "img/logos/logoipsum-212.svg",
+              "img/logos/logoipsum-217.svg",
+              "img/logos/logoipsum-239.svg",
+              "img/logos/logoipsum-244.svg",
+              "img/logos/logoipsum-250.svg",
+              "img/logos/logoipsum-286.svg"
+            ]
+          },
+          "alt": {
+            "type": "string",
+            "title": "Caption",
+            "description": "The alt text of the logo",
+            "examples": [
+              "Logo 1"
+            ]
+          }
+        },
+        "additionalProperties": false,
+        "required": [
+          "src"
+        ]
+      },
+      "minItems": 1,
+      "maxItems": 20
+    },
+    "align": {
+      "type": "string",
+      "title": "Alignment",
+      "description": "The alignment of the logo layout",
+      "enum": [
+        "left",
+        "center"
+      ],
+      "default": "center"
+    },
+    "logosPerRow": {
+      "type": "integer",
+      "title": "Logos Per Row",
+      "description": "The amount of logos to display per row",
+      "minimum": 2,
+      "maximum": 8,
+      "examples": [
+        5
+      ]
+    },
+    "cta": {
+      "type": "object",
+      "title": "Call to Action",
+      "description": "The call to action",
+      "properties": {
+        "toggle": {
+          "type": "boolean",
+          "default": false,
+          "title": "CTA Toggle",
+          "description": "Activate/disable the CTA"
+        },
+        "text": {
+          "type": "string",
+          "title": "Call to Action Text",
+          "description": "A short CTA text",
+          "examples": [
+            "Explore the success stories of our valued customers and discover more about their journey."
+          ]
+        },
+        "link": {
+          "type": "string",
+          "title": "Call to Action Link",
+          "description": "The CTA link",
+          "default": "#",
+          "format": "uri"
+        },
+        "label": {
+          "type": "string",
+          "title": "Link Label",
+          "description": "The text label displayed on the link",
+          "examples": [
+            "See all our partners"
+          ]
+        },
+        "style": {
+          "type": "string",
+          "enum": [
+            "button",
+            "text"
+          ],
+          "default": "text"
+        }
+      },
+      "additionalProperties": false,
+      "required": [
+        "style",
+        "link",
+        "label"
+      ]
+    },
+    "type": {
+      "const": "logos"
+    }
+  },
+  "additionalProperties": false,
+  "required": [
+    "logos"
+  ]
+}

package/dist/components/logos/logos.schema.json

@@ -0,0 +1,106 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/logos.schema.json",
+  "title": "Logos",
+  "description": "Component used to display a set of logos",
+  "type": "object",
+  "properties": {
+    "tagline": {
+      "type": "string",
+      "title": "Logo Tagline",
+      "description": "A short tagline atop the logos",
+      "examples": ["Your Success, Our Commitment"]
+    },
+    "logos": {
+      "type": "array",
+      "title": "Logos",
+      "description": "The logos to display",
+      "items": {
+        "type": "object",
+        "properties": {
+          "src": {
+            "type": "string",
+            "title": "URL",
+            "description": "The URL of the logo image",
+            "examples": [
+              "img/logos/logoipsum-212.svg",
+              "img/logos/logoipsum-217.svg",
+              "img/logos/logoipsum-239.svg",
+              "img/logos/logoipsum-244.svg",
+              "img/logos/logoipsum-250.svg",
+              "img/logos/logoipsum-286.svg"
+            ]
+          },
+          "alt": {
+            "type": "string",
+            "title": "Caption",
+            "description": "The alt text of the logo",
+            "examples": ["Logo 1"]
+          }
+        },
+        "additionalProperties": false,
+        "required": ["src"]
+      },
+      "minItems": 1,
+      "maxItems": 20
+    },
+    "align": {
+      "type": "string",
+      "title": "Alignment",
+      "description": "The alignment of the logo layout",
+      "enum": ["left", "center"],
+      "default": "center"
+    },
+    "logosPerRow": {
+      "type": "integer",
+      "title": "Logos Per Row",
+      "description": "The amount of logos to display per row",
+      "minimum": 2,
+      "maximum": 8,
+      "examples": [5]
+    },
+    "cta": {
+      "type": "object",
+      "title": "Call to Action",
+      "description": "The call to action",
+      "properties": {
+        "toggle": {
+          "type": "boolean",
+          "default": false,
+          "title": "CTA Toggle",
+          "description": "Activate/disable the CTA"
+        },
+        "text": {
+          "type": "string",
+          "title": "Call to Action Text",
+          "description": "A short CTA text",
+          "examples": [
+            "Explore the success stories of our valued customers and discover more about their journey."
+          ]
+        },
+        "link": {
+          "type": "string",
+          "title": "Call to Action Link",
+          "description": "The CTA link",
+          "default": "#",
+          "format": "uri"
+        },
+        "label": {
+          "type": "string",
+          "title": "Link Label",
+          "description": "The text label displayed on the link",
+          "examples": ["See all our partners"]
+        },
+        "style": {
+          "type": "string",
+          "enum": ["button", "text"],
+          "default": "text"
+        }
+      },
+      "additionalProperties": false,
+      "required": ["style", "link", "label"]
+    }
+  },
+  "additionalProperties": false,
+  "required": ["logos"]
+}

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

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { MosaicProps } from "../../MosaicProps-aacb9422.js";
+declare const Mosaic: FC<MosaicProps>;
+export { Mosaic };

package/dist/components/mosaic/index.js

@@ -0,0 +1,33 @@
+import "./mosaic.css";
+import { jsx } from 'react/jsx-runtime';
+import { Storytelling } from '@kickstartds/content/lib/storytelling';
+
+const Mosaic = ({ layout, largeHeadlines, tiles }) => (jsx("div", { className: "c-mosaic", children: tiles.map((tile, index) => (jsx(Storytelling, { full: true, backgroundColor: tile.backgroundColor, backgroundImage: tile.backgroundImage, box: {
+            headline: {
+                text: tile?.headline,
+                sub: tile?.sub,
+                level: "h2",
+                style: largeHeadlines ? "h1" : undefined,
+            },
+            text: tile?.text,
+            textColor: tile?.textColor,
+            ...(tile?.button?.toggle && {
+                link: {
+                    target: tile?.button?.target,
+                    label: tile?.button?.label,
+                    icon: tile?.button?.icon,
+                },
+            }),
+        }, image: {
+            source: tile?.image.src,
+            alt: tile?.image.alt,
+            order: {
+                desktopImageLast: layout === "textLeft"
+                    ? true
+                    : layout === "textRight"
+                        ? false
+                        : index % 2 !== 0,
+            },
+        } }, index))) }));
+
+export { Mosaic };

package/dist/components/mosaic/mosaic.css

@@ -0,0 +1,35 @@
+.c-header--spacer + .l-container {
+  position: relative;
+}
+.c-header--spacer + .l-container .c-visual {
+  margin-top: calc(var(--g-header-height) * -1);
+  z-index: 1;
+}
+
+.c-visual {
+  display: flex;
+  flex-direction: column;
+}
+.c-visual .c-headline {
+  --c-headline--color: var(--ks-color-fg);
+}
+.c-visual .c-headline .c-headline__subheadline {
+  --c-headline_subheadline--color: var(--ks-text-color-primary);
+}
+.c-visual.c-visual--full {
+  height: 100%;
+}
+.c-visual .c-visual__box {
+  max-width: 100%;
+}
+@container visual (min-width: 640px) {
+  .c-visual.c-visual--full {
+    height: 100vh;
+  }
+  .c-visual .c-visual__box {
+    max-width: var(--c-visual_box--max-width);
+  }
+}
+.c-visual .c-visual__content--indent {
+  max-width: var(--l-section--content-width-wide);
+}