@kickstartds/ds-agency-premium 1.0.1

package/dist/components/button/button.css

@@ -0,0 +1,67 @@
+a.c-button,
+button.c-button {
+  --c-button--border-radius: var(--ks-border-radius-pill);
+  --c-button--padding: 0.75em 2em;
+  --c-button--font-weight: var(--ks-font-weight-semi-bold);
+}
+a.c-button--solid,
+button.c-button--solid {
+  --c-button--color: var(--ks-color-fg-alpha-2);
+  --c-button--color-hover: var(--ks-color-fg);
+  --c-button--color-active: var(--ks-color-fg);
+  --c-button--background-color: var(--ks-color-primary);
+  --c-button--background-color-hover: var(--ks-color-primary);
+  --c-button--shadow: 0px 0px 2px 1px var(--ks-color-fg-alpha-4-base),
+    0px 0px 19px 2px var(--ks-color-primary-alpha-2);
+  --c-button--shadow-hover: 0px 0px 2px 1px var(--ks-color-fg-alpha-1-base), 0px 0px 19px 4px var(--ks-color-primary);
+}
+[ks-inverted=true] a.c-button--solid,
+[ks-inverted=true] button.c-button--solid {
+  --c-button--color: var(--ks-color-fg-inverted-alpha-2);
+  --c-button--color-hover: var(--ks-color-fg-inverted);
+  --c-button--color-active: var(--ks-color-fg-inverted);
+}
+a.c-button--clear,
+button.c-button--clear {
+  --c-button--color: var(--ks-color-fg-alpha-2);
+  --c-button--color-hover: var(--ks-color-fg);
+  --c-button--color-active: var(--ks-color-fg);
+  --c-button--border-color: transparent;
+  --c-button--border-color-hover: transparent;
+  --c-button--border-color-active: transparent;
+  --c-button--border-width: 2px;
+  --c-button--background-color: var(--ks-color-fg-alpha-8);
+  --c-button--background-color-hover: var(--ks-color-fg-alpha-7);
+  --c-button--background-color-active: var(--ks-color-fg-alpha-7);
+  padding: var(--c-button--padding);
+}
+a.c-button--outline,
+button.c-button--outline {
+  --c-button--color: var(--ks-color-fg-alpha-2);
+  --c-button--color-hover: var(--ks-color-fg);
+  --c-button--color-active: var(--ks-color-fg);
+  --c-button--border-color: var(--ks-color-fg-alpha-6);
+  --c-button--border-color-hover: var(--ks-color-fg);
+  --c-button--border-color-active: var(--ks-color-fg);
+  --c-button--background-color-hover: transparent;
+  --c-button--background-color-active: transparent;
+}
+
+[ks-inverted=true] .c-button--primary,
+[ks-inverted=true].c-button--primary {
+  --c-button--shadow: 0px 0px 2px 1px var(--ks-color-primary-alpha-3-base),
+    0px 0px 13px 0px var(--ks-color-primary-alpha-5-base);
+  --c-button--shadow-hover: 0px 0px 2px 1px var(--ks-color-primary-alpha-4-base),
+    0px 0px 13px 0px var(--ks-color-primary-alpha-3-base);
+}
+
+.c-button {
+  box-shadow: var(--c-button--shadow);
+  transition-property: box-shadow, transform, background-color, color, border;
+}
+.c-button:disabled {
+  pointer-events: none;
+}
+.c-button:hover {
+  box-shadow: var(--c-button--shadow-hover);
+}

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

@@ -0,0 +1,63 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/button.schema.json",
+  "title": "Button",
+  "description": "Component used for user interaction",
+  "type": "object",
+  "properties": {
+    "label": {
+      "type": "string",
+      "title": "Label",
+      "description": "Text content to display inside the button",
+      "examples": [
+        "Book a meeting"
+      ]
+    },
+    "target": {
+      "type": "string",
+      "title": "Target",
+      "description": "Target that should be linked, makes the button behave like a link semantically",
+      "format": "uri"
+    },
+    "variant": {
+      "type": "string",
+      "title": "Variant",
+      "description": "Variant of button to be used",
+      "enum": [
+        "primary",
+        "secondary",
+        "tertiary"
+      ],
+      "default": "secondary"
+    },
+    "icon": {
+      "type": "string",
+      "title": "Icon",
+      "description": "Choose an icon"
+    },
+    "size": {
+      "type": "string",
+      "title": "Size",
+      "description": "Size of button to use",
+      "enum": [
+        "small",
+        "medium",
+        "large"
+      ],
+      "default": "medium"
+    },
+    "disabled": {
+      "type": "boolean",
+      "title": "Disabled?",
+      "description": "Whether the button should be disabled",
+      "default": false
+    },
+    "type": {
+      "const": "button"
+    }
+  },
+  "additionalProperties": false,
+  "required": [
+    "label"
+  ]
+}

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

@@ -0,0 +1,48 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/button.schema.json",
+  "title": "Button",
+  "description": "Component used for user interaction",
+  "type": "object",
+  "properties": {
+    "label": {
+      "type": "string",
+      "title": "Label",
+      "description": "Text content to display inside the button",
+      "examples": ["Book a meeting"]
+    },
+    "target": {
+      "type": "string",
+      "title": "Target",
+      "description": "Target that should be linked, makes the button behave like a link semantically",
+      "format": "uri"
+    },
+    "variant": {
+      "type": "string",
+      "title": "Variant",
+      "description": "Variant of button to be used",
+      "enum": ["primary", "secondary", "tertiary"],
+      "default": "secondary"
+    },
+    "icon": {
+      "type": "string",
+      "title": "Icon",
+      "description": "Choose an icon"
+    },
+    "size": {
+      "type": "string",
+      "title": "Size",
+      "description": "Size of button to use",
+      "enum": ["small", "medium", "large"],
+      "default": "medium"
+    },
+    "disabled": {
+      "type": "boolean",
+      "title": "Disabled?",
+      "description": "Whether the button should be disabled",
+      "default": false
+    }
+  },
+  "additionalProperties": false,
+  "required": ["label"]
+}

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { HTMLAttributes, FC, PropsWithChildren } from "react";
+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 { Button, ButtonProvider };

package/dist/components/button/index.js

@@ -0,0 +1,18 @@
+import "./button.css";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ButtonContextDefault, ButtonContext } from '@kickstartds/base/lib/button';
+
+const Button = forwardRef(({ label, target, size = "medium", variant = "secondary", icon, disabled = false, ...props }, ref) => (jsx(ButtonContextDefault, { ...props, href: target, label: label, size: size, variant: variant === "primary"
+        ? "solid"
+        : variant === "secondary"
+            ? "clear"
+            : variant === "tertiary"
+                ? "outline"
+                : "solid", disabled: disabled, iconAfter: {
+        icon: icon,
+    }, ref: ref })));
+Button.displayName = "Button";
+const ButtonProvider = (props) => (jsx(ButtonContext.Provider, { ...props, value: Button }));
+
+export { Button, ButtonProvider };

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

@@ -0,0 +1,115 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/button-group.schema.json",
+  "title": "Button Group",
+  "type": "object",
+  "properties": {
+    "buttons": {
+      "title": "Buttons",
+      "description": "Buttons of the Button Group",
+      "type": "array",
+      "items": {
+        "$schema": "http://json-schema.org/draft-07/schema#",
+        "$id": "http://schema.mydesignsystem.com/button.schema.json",
+        "title": "Button",
+        "description": "Component used for user interaction",
+        "type": "object",
+        "properties": {
+          "label": {
+            "type": "string",
+            "title": "Label",
+            "description": "Text content to display inside the button",
+            "examples": [
+              "Book a meeting"
+            ]
+          },
+          "target": {
+            "type": "string",
+            "title": "Target",
+            "description": "Target that should be linked, makes the button behave like a link semantically",
+            "format": "uri"
+          },
+          "variant": {
+            "type": "string",
+            "title": "Variant",
+            "description": "Variant of button to be used",
+            "enum": [
+              "primary",
+              "secondary",
+              "tertiary"
+            ],
+            "default": "secondary"
+          },
+          "icon": {
+            "type": "string",
+            "title": "Icon",
+            "description": "Choose an icon"
+          },
+          "size": {
+            "type": "string",
+            "title": "Size",
+            "description": "Size of button to use",
+            "enum": [
+              "small",
+              "medium",
+              "large"
+            ],
+            "default": "medium"
+          },
+          "disabled": {
+            "type": "boolean",
+            "title": "Disabled?",
+            "description": "Whether the button should be disabled",
+            "default": false
+          },
+          "type": {
+            "const": "button"
+          }
+        },
+        "additionalProperties": false,
+        "required": [
+          "label"
+        ]
+      }
+    },
+    "colorNeutral": {
+      "title": "Color Neutral",
+      "description": "Set the buttons to a color neutral variant",
+      "default": false,
+      "type": "boolean"
+    },
+    "size": {
+      "title": "Button Size",
+      "description": "Choose a size between small, medium and large",
+      "type": "string",
+      "enum": [
+        "small",
+        "medium",
+        "large"
+      ],
+      "default": "medium"
+    },
+    "arrangement": {
+      "title": "Button arrangement",
+      "description": "Vertical arrangement of the buttons",
+      "type": "string",
+      "enum": [
+        "left",
+        "center",
+        "right",
+        "space-between",
+        "grow"
+      ],
+      "default": "left"
+    },
+    "className": {
+      "title": "Additional Classes",
+      "description": "Add additional css classes that should be applied to the button",
+      "type": "string"
+    },
+    "type": {
+      "const": "button-group"
+    }
+  },
+  "additionalProperties": false
+}

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

@@ -0,0 +1,27 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/button-group.schema.json",
+  "title": "Button Group",
+  "type": "object",
+  "properties": {
+    "buttons": {
+      "$ref": "http://schema.kickstartds.com/base/button-group.schema.json#/properties/items"
+    },
+    "colorNeutral": {
+      "title": "Color Neutral",
+      "description": "Set the buttons to a color neutral variant",
+      "default": false,
+      "type": "boolean"
+    },
+    "size": {
+      "$ref": "http://schema.kickstartds.com/base/button.schema.json#/properties/size"
+    },
+    "arrangement": {
+      "$ref": "http://schema.kickstartds.com/base/button-group.schema.json#/properties/arrangement"
+    },
+    "className": {
+      "$ref": "http://schema.kickstartds.com/base/button-group.schema.json#/properties/className"
+    }
+  },
+  "additionalProperties": false
+}

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

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+import { 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.
+ */
+import { ButtonProps } from "../../ButtonProps-03ff6d21.js";
+/**
+ * Buttons of the Button Group
+ */
+type Buttons = ButtonProps[];
+/**
+ * Set the buttons to a color neutral variant
+ */
+type ColorNeutral = boolean;
+/**
+ * Choose a size between small, medium and large
+ */
+type ButtonSize = "small" | "medium" | "large";
+/**
+ * Vertical arrangement of the buttons
+ */
+type ButtonArrangement = "left" | "center" | "right" | "space-between" | "grow";
+/**
+ * Add additional css classes that should be applied to the button
+ */
+type AdditionalClasses = string;
+interface ButtonGroupProps {
+    buttons?: Buttons;
+    colorNeutral?: ColorNeutral;
+    size?: ButtonSize;
+    arrangement?: ButtonArrangement;
+    className?: AdditionalClasses;
+}
+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 { ButtonGroup, ButtonGroupProvider, useButtonGroup };

package/dist/components/button-group/index.js

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext } from 'react';
+import { ButtonContext } from '@kickstartds/base/lib/button';
+import { ButtonGroupContextDefault, ButtonGroupContext } from '@kickstartds/base/lib/button-group';
+
+const ButtonGroup = forwardRef(({ buttons, colorNeutral, size, ...props }, ref) => {
+    return buttons && buttons.length > 0 ? (jsx(ButtonGroupContextDefault, { ...props, items: buttons
+            .filter((button) => button.label)
+            .map((button, index) => ({
+            size: size,
+            ...button,
+            variant: colorNeutral
+                ? index === 0
+                    ? "secondary"
+                    : "tertiary"
+                : index === 0
+                    ? "primary"
+                    : index === 1
+                        ? "secondary"
+                        : "tertiary",
+        })), ref: ref })) : null;
+});
+const ButtonGroupProvider = (props) => (jsx(ButtonGroupContext.Provider, { ...props, value: ButtonGroup }));
+// hook to create a ButtonGroup, that can be used as ButtonContext.Provider value
+const useButtonGroup = () => {
+    const Button = useContext(ButtonContext);
+    return (props) => (jsx(ButtonContext.Provider, { value: Button, children: jsx(ButtonGroup, { ...props }) }));
+};
+
+export { ButtonGroup, ButtonGroupProvider, useButtonGroup };

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

@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/component-teaser.schema.json",
+  "title": "Component Teaser",
+  "description": "Component used to tease content",
+  "type": "object",
+  "properties": {
+    "title": {
+      "type": "string",
+      "title": "Headline",
+      "description": "Headline for the teaser card",
+      "format": "markdown"
+    },
+    "text": {
+      "type": "string",
+      "title": "Text",
+      "description": "Body text for the teaser card",
+      "format": "markdown"
+    },
+    "label": {
+      "type": "string",
+      "title": "Label",
+      "description": "Label for the Teaser Card"
+    },
+    "target": {
+      "type": "string",
+      "title": "Target",
+      "description": "Target that should be linked",
+      "format": "uri"
+    },
+    "image": {
+      "type": "string",
+      "title": "Image",
+      "description": "Image to display as cover",
+      "format": "uri"
+    },
+    "type": {
+      "const": "component-teaser"
+    }
+  },
+  "additionalProperties": false,
+  "required": []
+}

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

@@ -0,0 +1,40 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/component-teaser.schema.json",
+  "title": "Component Teaser",
+  "description": "Component used to tease content",
+  "type": "object",
+  "properties": {
+    "title": {
+      "type": "string",
+      "title": "Headline",
+      "description": "Headline for the teaser card",
+      "format": "markdown"
+    },
+    "text": {
+      "type": "string",
+      "title": "Text",
+      "description": "Body text for the teaser card",
+      "format": "markdown"
+    },
+    "label": {
+      "type": "string",
+      "title": "Label",
+      "description": "Label for the Teaser Card"
+    },
+    "target": {
+      "type": "string",
+      "title": "Target",
+      "description": "Target that should be linked",
+      "format": "uri"
+    },
+    "image": {
+      "type": "string",
+      "title": "Image",
+      "description": "Image to display as cover",
+      "format": "uri"
+    }
+  },
+  "additionalProperties": false,
+  "required": []
+}

package/dist/components/cta/cta.css

@@ -0,0 +1,100 @@
+.c-cta.c-storytelling {
+  --c-storytelling--text-color-neutral: var(--ks-color-fg);
+  --c-storytelling--vertical-padding: var(--l-section--space-default);
+  --c-storytelling--horizontal-padding: var(--l-section--content-padding);
+}
+.c-cta.c-storytelling .c-storytelling__box:only-child {
+  --c-storytelling--horizontal-padding: var(--l-section--content-padding);
+}
+.c-cta.c-storytelling--color-neutral.c-storytelling .c-storytelling__box {
+  --c-storytelling_text--color: var(--c-storytelling--text-color-neutral);
+  --c-storytelling_subheadline--color: var(--c-storytelling--text-color-neutral);
+}
+
+@media (min-width: 640px) {
+  .c-header--floating + .l-container--storytelling .c-storytelling.c-cta,
+  .c-header--floating + .l-section .l-container--storytelling:first-child .c-storytelling.c-cta {
+    padding-top: calc(var(--g-header-height) + var(--c-storytelling--horizontal-padding));
+    z-index: 1;
+  }
+}
+
+.c-storytelling.c-cta {
+  --c-storytelling--padding-ratio: 2;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+}
+.c-storytelling.c-cta--color-neutral.c-storytelling {
+  --c-rich-text--color: var(--c-storytelling--text-color-neutral);
+}
+.c-storytelling.c-cta--color-neutral.c-storytelling .c-headline__subheadline {
+  --c-headline_subheadline--color: var(--c-storytelling--text-color-neutral);
+}
+.c-storytelling.c-cta.c-storytelling--full {
+  --c-storytelling--padding-ratio: 1;
+}
+.c-storytelling.c-cta.c-cta--align-top {
+  align-items: flex-start;
+}
+.c-storytelling.c-cta.c-cta--align-bottom {
+  align-items: flex-end;
+}
+.c-storytelling.c-cta.c-cta--highlight-text .c-storytelling__text {
+  font: var(--ks-font-copy-l);
+  color: var(--ks-color-fg);
+}
+.c-storytelling.c-cta .c-storytelling__box {
+  width: 100%;
+  padding: var(--c-storytelling--vertical-padding) var(--c-storytelling--horizontal-padding);
+}
+@container storytelling (max-width: 640px) {
+  .c-storytelling.c-cta .c-storytelling__box {
+    padding-top: calc(var(--c-storytelling--vertical-padding) / var(--c-storytelling--padding-ratio));
+  }
+  .c-storytelling.c-cta .c-storytelling__box:only-child {
+    padding-top: var(--c-storytelling--vertical-padding);
+  }
+}
+.c-storytelling.c-cta .c-storytelling__box:only-child {
+  padding: var(--c-storytelling--vertical-padding) var(--c-storytelling--horizontal-padding);
+}
+.c-storytelling.c-cta .c-storytelling__box__content {
+  max-width: 100%;
+}
+.c-storytelling.c-cta .c-storytelling__image {
+  margin: 0;
+}
+@container storytelling (min-width: 640px) {
+  .c-storytelling.c-cta.c-storytelling--order-desktop-image-last .c-storytelling__image {
+    padding-left: calc(var(--c-storytelling--horizontal-padding) / var(--c-storytelling--padding-ratio));
+  }
+  .c-storytelling.c-cta.c-storytelling--order-desktop-image-last .c-storytelling__box {
+    padding-right: calc(var(--c-storytelling--horizontal-padding) / var(--c-storytelling--padding-ratio));
+  }
+  .c-storytelling.c-cta .c-storytelling__box {
+    padding-left: calc(var(--c-storytelling--horizontal-padding) / var(--c-storytelling--padding-ratio));
+  }
+  .c-storytelling.c-cta .c-storytelling__box__content--center .c-button-group {
+    justify-content: center;
+  }
+  .c-storytelling.c-cta .c-storytelling__box:only-child {
+    width: 100%;
+    max-width: calc(var(--l-section--content-width-default) - var(--l-section--content-padding) * var(--c-storytelling--padding-ratio));
+  }
+  .c-storytelling.c-cta > .c-storytelling__image {
+    padding: var(--c-storytelling--vertical-padding) var(--c-storytelling--horizontal-padding);
+    padding-right: calc(var(--c-storytelling--horizontal-padding) / var(--c-storytelling--padding-ratio));
+  }
+  .c-storytelling.c-cta.c-storytelling--full > .c-storytelling__image {
+    padding: 0;
+  }
+  .c-storytelling.c-cta > .c-storytelling__image,
+  .c-storytelling.c-cta > .c-storytelling__box {
+    max-width: calc(var(--l-section--content-width-wide) / 2);
+  }
+  .c-storytelling.c-cta.c-cta--full-width > .c-storytelling__image,
+  .c-storytelling.c-cta.c-cta--full-width > .c-storytelling__box {
+    max-width: 100%;
+  }
+}