@kickstartds/ds-agency-premium 1.5.21 → 1.5.22--canary.967.1206c73.0

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

@@ -10,8 +10,6 @@
   --dsa-blog-aside__author__image--flex-basis: 120px;
   --dsa-blog-aside__author__body--flex-basis: 240px;
   --dsa-blog-aside__author__link--font: var(--ks-font-interface-s);
-  --dsa-blog-aside__author--gap-horizontal: var(--ks-spacing-inline-xs);
-  --dsa-blog-aside__author--gap-vertical: var(--ks-spacing-stack-xs);
   --dsa-blog-aside__meta__item--font: var(--ks-font-interface-s);
   --dsa-blog-aside__meta__item--color: var(--ks-text-color-interface);
   --dsa-blog-aside__meta__item__icon--size: 1.2em;
@@ -25,8 +23,6 @@
     --dsa-blog-aside__author__title--font: var(--ks-font-copy-l);
     --dsa-blog-aside__author__subtitle--font: var(--ks-font-copy-m);
     --dsa-blog-aside__author__link--font: var(--ks-font-interface-m);
-    --dsa-blog-aside__author--gap-horizontal: var(--ks-spacing-stack-s);
-    --dsa-blog-aside__author--gap-vertical: var(--ks-spacing-inline-l);
     --dsa-blog-aside__meta__item--font: var(--ks-font-interface-m);
     --dsa-blog-aside__share-bar__icon--size: 2em;
   }
@@ -43,8 +39,8 @@
   gap: var(--dsa-blog-aside--gap);
 }
 .dsa-blog-aside .dsa-contact {
-  --dsa-contact--gap-vertical: var(--dsa-blog-aside__author--gap-vertical, var(--ks-spacing-stack-xs));
-  --dsa-contact--gap-horizontal: var(--dsa-blog-aside__author--gap-horizontal, var(--ks-spacing-inline-xs));
+  --dsa-contact--gap-vertical: var(--dsa-blog-asde__author--gap-vertical, var(--ks-spacing-stack-xs));
+  --dsa-contact--gap-horizontal: var(--dsa-blog-asde__author--gap-horizontal, var(--ks-spacing-inline-xs));
   --dsa-contact__image--flex-basis: var(--dsa-blog-aside__author__image--flex-basis, 200px);
   --dsa-contact__body--flex-basis: var(--dsa-blog-aside__author__body--flex-basis, 300px);
   --dsa-contact__title--font: var(--dsa-blog-aside__author__title--font, var(--ks-font-copy-m));

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

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

package/dist/components/contact/contact.css

@@ -104,8 +104,6 @@
   margin: 0;
 }
 .dsa-contact a.dsa-contact__link {
-  display: flex;
-  align-items: center;
   color: var(--dsa-contact__link--color);
   font: var(--dsa-contact__link--font);
   font-weight: var(--dsa-contact__link--font-weight);

package/dist/components/divider/divider.css

@@ -0,0 +1,13 @@
+.dsa-divider {
+  --dsa-divider--background: var(--ks-border-color-default);
+  --dsa-divider--background_accent: var(--ks-border-color-accent);
+  --dsa-divider--height: var(--ks-border-width-default);
+}
+
+hr.c-divider {
+  --c-divider--background: var(--dsa-divider--background, var(--ks-border-color-default));
+  --c-divider--height: var(--dsa-divider--height, var(--ks-border-width-default));
+}
+hr.c-divider--accent {
+  --c-divider--background: var(--dsa-divider--background_accent, var(--ks-border-color-accent));
+}

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

@@ -0,0 +1,33 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/divider.schema.json",
+  "title": "Divider",
+  "description": "Dividers bring clarity to a layout by grouping and dividing content in close proximity.",
+  "type": "object",
+  "properties": {
+    "variant": {
+      "title": "Style of the divider",
+      "type": "string",
+      "description": "Choose a variant for the divider",
+      "enum": [
+        "default",
+        "accent"
+      ],
+      "default": "default"
+    },
+    "className": {
+      "type": "string",
+      "title": "Additional Classes",
+      "description": "Add additional css classes that should be applied to the divider"
+    },
+    "component": {
+      "title": "`ks-component` attribute",
+      "description": "Optional custom component identifier",
+      "type": "string"
+    },
+    "type": {
+      "const": "divider"
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/divider/divider.schema.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/divider.schema.json",
+  "title": "Divider",
+  "description": "Dividers bring clarity to a layout by grouping and dividing content in close proximity.",
+  "type": "object",
+  "properties": {
+    "variant": {
+      "title": "Style of the divider",
+      "type": "string",
+      "description": "Choose a variant for the divider",
+      "enum": ["default", "accent"],
+      "default": "default"
+    },
+    "className": {
+      "type": "string",
+      "title": "Additional Classes",
+      "description": "Add additional css classes that should be applied to the divider"
+    },
+    "component": {
+      "title": "`ks-component` attribute",
+      "description": "Optional custom component identifier",
+      "type": "string"
+    }
+  },
+  "additionalProperties": false
+}

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

@@ -0,0 +1,33 @@
+/// <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.
+ */
+/**
+ * Choose a variant for the divider
+ */
+type StyleOfTheDivider = "default" | "accent";
+/**
+ * Add additional css classes that should be applied to the divider
+ */
+type AdditionalClasses = string;
+/**
+ * Optional custom component identifier
+ */
+type KsComponentAttribute = string;
+/**
+ * Dividers bring clarity to a layout by grouping and dividing content in close proximity.
+ */
+interface DividerProps {
+    variant?: StyleOfTheDivider;
+    className?: AdditionalClasses;
+    component?: KsComponentAttribute;
+}
+declare const DividerContextDefault: import("react").ForwardRefExoticComponent<DividerProps & HTMLAttributes<HTMLHRElement> & import("react").RefAttributes<HTMLHRElement>>;
+declare const DividerContext: import("react").Context<import("react").ForwardRefExoticComponent<DividerProps & HTMLAttributes<HTMLHRElement> & import("react").RefAttributes<HTMLHRElement>>>;
+declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & HTMLAttributes<HTMLHRElement> & import("react").RefAttributes<HTMLHRElement>>;
+declare const DividerProvider: FC<PropsWithChildren>;
+export { DividerContextDefault, DividerContext, Divider, DividerProvider };

package/dist/components/divider/index.js

@@ -0,0 +1,16 @@
+import "./divider.css";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, createContext, useContext } from 'react';
+import classnames from 'classnames';
+import { DividerContextDefault as DividerContextDefault$1, DividerContext as DividerContext$1 } from '@kickstartds/base/lib/divider';
+
+const DividerContextDefault = forwardRef(({ variant, className, ...props }, ref) => (jsx(DividerContextDefault$1, { ...props, className: classnames("dsa-divider", className), variant: variant, ref: ref })));
+const DividerContext = createContext(DividerContextDefault);
+const Divider = forwardRef((props, ref) => {
+    const Component = useContext(DividerContext);
+    return jsx(Component, { ...props, ref: ref });
+});
+Divider.displayName = "Divider";
+const DividerProvider = (props) => (jsx(DividerContext$1.Provider, { ...props, value: DividerContextDefault }));
+
+export { Divider, DividerContext, DividerContextDefault, DividerProvider };

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

@@ -24,7 +24,7 @@ interface SettingsProps {
      */
     seo: SeoProps;
 }
-export * from "../../BlogPostProps-d9decb7c.js";
+export * from "../../BlogPostProps-6b3cff22.js";
 export * from "../../BlogOverviewProps-9f207f1c.js";
 export * from "../../PageProps-aa29c554.js";
 export { SettingsProps };

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 10 Sep 2024 09:36:08 GMT
+ * Generated on Tue, 10 Sep 2024 09:59:44 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-fg-to-bg-7-base);
-  --ks-border-color-accent-inverted-base: var(--ks-color-fg-inverted-to-bg-7-base);
+  --ks-border-color-accent-base: var(--ks-color-primary-alpha-7-base);
+  --ks-border-color-accent-inverted-base: var(--ks-color-primary-inverted-alpha-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);
@@ -127,8 +127,8 @@
   --ks-border-color-clear-inverted-interactive-hover-base: var(--ks-color-primary-inverted-alpha-7-base);
   --ks-border-color-clear-inverted-interactive-active-base: var(--ks-color-primary-inverted-alpha-6-base);
   --ks-border-color-clear-inverted-interactive-selected-base: var(--ks-color-primary-inverted-alpha-5-base);
-  --ks-border-color-default-base: var(--ks-color-fg-inverted-base);
-  --ks-border-color-default-inverted-base: var(--ks-color-fg-alpha-3-base);
+  --ks-border-color-default-base: var(--ks-color-fg-alpha-7-base);
+  --ks-border-color-default-inverted-base: var(--ks-color-fg-inverted-alpha-7-base);
   --ks-border-color-interface-base: var(--ks-color-fg-alpha-8-base);
   --ks-border-color-interface-interactive-base: var(--ks-color-fg-alpha-7-base);
   --ks-border-color-interface-interactive-disabled-base: var(--ks-color-fg-alpha-8-base);

package/dist/components/presets.json

@@ -1185,6 +1185,26 @@
     },
     "screenshot": "img/screenshots/components-cta--align-bottom.png"
   },
+  {
+    "id": "components-divider--accent",
+    "group": "Components/Divider",
+    "name": "Accent",
+    "code": "<No Display Name variant=\"accent\" />",
+    "args": {
+      "variant": "accent"
+    },
+    "screenshot": "img/screenshots/components-divider--accent.png"
+  },
+  {
+    "id": "components-divider--default",
+    "group": "Components/Divider",
+    "name": "Default",
+    "code": "<No Display Name variant=\"default\" />",
+    "args": {
+      "variant": "default"
+    },
+    "screenshot": "img/screenshots/components-divider--default.png"
+  },
   {
     "id": "components-faq--dropdown-list",
     "group": "Components/Faq",

package/dist/global.css

@@ -507,15 +507,19 @@ h3 {
   color: var(--dsa-form-field__placeholder--color, var(--ks-color-fg-alpha-5));
 }
 
-.c-divider {
-  --dsa-divider--background: var(--ks-border-color-accent);
-  --dsa-divider--height: var(--ks-border-widht-default);
+.dsa-divider {
+  --dsa-divider--background: var(--ks-border-color-default);
+  --dsa-divider--background_accent: var(--ks-border-color-accent);
+  --dsa-divider--height: var(--ks-border-width-default);
 }
 
 hr.c-divider {
-  --c-divider--background: var(--dsa-divider--background, var(--ks-border-color-accent));
+  --c-divider--background: var(--dsa-divider--background, var(--ks-border-color-default));
   --c-divider--height: var(--dsa-divider--height, var(--ks-border-width-default));
 }
+hr.c-divider--accent {
+  --c-divider--background: var(--dsa-divider--background_accent, var(--ks-border-color-accent));
+}
 
 @font-face {
   font-family: "Fredoka";

package/dist/tokens/themes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 10 Sep 2024 09:36:10 GMT
+ * Generated on Tue, 10 Sep 2024 09:59:47 GMT
  */
 :root [ks-theme=business] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -2727,7 +2727,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 10 Sep 2024 09:36:14 GMT
+ * Generated on Tue, 10 Sep 2024 09:59:51 GMT
  */
 :root [ks-theme=google] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -5458,7 +5458,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 10 Sep 2024 09:36:12 GMT
+ * Generated on Tue, 10 Sep 2024 09:59:49 GMT
  */
 :root [ks-theme=ngo] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -8459,7 +8459,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 10 Sep 2024 09:36:16 GMT
+ * Generated on Tue, 10 Sep 2024 09:59:53 GMT
  */
 :root [ks-theme=telekom] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);

package/dist/tokens/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 10 Sep 2024 09:36:08 GMT
+ * Generated on Tue, 10 Sep 2024 09:59:44 GMT
  */
 
 :root, [ks-theme] {
@@ -116,8 +116,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-fg-to-bg-7-base);
-  --ks-border-color-accent-inverted-base: var(--ks-color-fg-inverted-to-bg-7-base);
+  --ks-border-color-accent-base: var(--ks-color-primary-alpha-7-base);
+  --ks-border-color-accent-inverted-base: var(--ks-color-primary-inverted-alpha-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);
@@ -128,8 +128,8 @@
   --ks-border-color-clear-inverted-interactive-hover-base: var(--ks-color-primary-inverted-alpha-7-base);
   --ks-border-color-clear-inverted-interactive-active-base: var(--ks-color-primary-inverted-alpha-6-base);
   --ks-border-color-clear-inverted-interactive-selected-base: var(--ks-color-primary-inverted-alpha-5-base);
-  --ks-border-color-default-base: var(--ks-color-fg-inverted-base);
-  --ks-border-color-default-inverted-base: var(--ks-color-fg-alpha-3-base);
+  --ks-border-color-default-base: var(--ks-color-fg-alpha-7-base);
+  --ks-border-color-default-inverted-base: var(--ks-color-fg-inverted-alpha-7-base);
   --ks-border-color-interface-base: var(--ks-color-fg-alpha-8-base);
   --ks-border-color-interface-interactive-base: var(--ks-color-fg-alpha-7-base);
   --ks-border-color-interface-interactive-disabled-base: var(--ks-color-fg-alpha-8-base);

package/dist/tokens/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 10 Sep 2024 09:36:09 GMT
+ * Generated on Tue, 10 Sep 2024 09:59:45 GMT
  */
 
 export const KsBackgroundColorAccentBase = "#230a2b";
@@ -115,8 +115,8 @@ export const KsBackgroundColorSecondaryInvertedInteractiveHoverBase = "#e43489";
 export const KsBackgroundColorSecondaryInvertedInteractiveActiveBase = "#e43489";
 export const KsBackgroundColorSecondaryInvertedInteractiveSelectedBase = "#e868a6";
 export const KsBackgroundColorSecondaryInvertedTranslucentBase = "rgba(226, 24, 121, 0.5)";
-export const KsBorderColorAccentBase = "#424355";
-export const KsBorderColorAccentInvertedBase = "#b9b9c0";
+export const KsBorderColorAccentBase = "rgba(226, 24, 121, 0.24)";
+export const KsBorderColorAccentInvertedBase = "rgba(77, 37, 239, 0.24)";
 export const KsBorderColorClearBase = "rgba(0, 0, 0, 0)";
 export const KsBorderColorClearInteractiveBase = "rgba(0, 0, 0, 0)";
 export const KsBorderColorClearInteractiveHoverBase = "rgba(226, 24, 121, 0.13)";
@@ -127,8 +127,8 @@ export const KsBorderColorClearInvertedInteractiveBase = "rgba(0, 0, 0, 0)";
 export const KsBorderColorClearInvertedInteractiveHoverBase = "rgba(77, 37, 239, 0.24)";
 export const KsBorderColorClearInvertedInteractiveActiveBase = "rgba(77, 37, 239, 0.37)";
 export const KsBorderColorClearInvertedInteractiveSelectedBase = "rgba(77, 37, 239, 0.5)";
-export const KsBorderColorDefaultBase = "#06081f";
-export const KsBorderColorDefaultInvertedBase = "rgba(255, 255, 255, 0.76)";
+export const KsBorderColorDefaultBase = "rgba(255, 255, 255, 0.24)";
+export const KsBorderColorDefaultInvertedBase = "rgba(6, 8, 31, 0.24)";
 export const KsBorderColorInterfaceBase = "rgba(255, 255, 255, 0.13)";
 export const KsBorderColorInterfaceInteractiveBase = "rgba(255, 255, 255, 0.24)";
 export const KsBorderColorInterfaceInteractiveDisabledBase = "rgba(255, 255, 255, 0.13)";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kickstartds/ds-agency-premium",
-  "version": "1.5.21",
+  "version": "1.5.22--canary.967.1206c73.0",
   "description": "",
   "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
   "bugs": {