@kickstartds/ds-agency-premium 1.6.58 → 1.6.59--canary.40.1490.0

package/dist/components/cta/index.js

@@ -7,22 +7,20 @@ import classnames from 'classnames';
 import { useButtonGroup } from '../button-group/index.js';
 import '@kickstartds/base/lib/button-group';
 
-const CtaContextDefault = forwardRef(({ headline, highlightText = false, sub, image, text, textAlign, backgroundImage, backgroundColor, colorNeutral, contentAlign, order, fullWidth = false, buttons = [], ...rest }, ref) => {
+const CtaContextDefault = forwardRef(({ headline, highlightText = false, sub, image, text, textAlign, backgroundImage, backgroundColor, colorNeutral, align, order, buttons = [], ...rest }, ref) => {
     const ButtonGroup = useButtonGroup();
     return (jsx(ButtonContext.Provider
     // @ts-expect-error
     , { 
         // @ts-expect-error
-        value: ButtonGroup, children: jsx(Storytelling, { ...rest, ref: ref, className: classnames("dsa-cta", fullWidth ? `dsa-cta--full-width` : "", highlightText ? `dsa-cta--highlight-text` : "", colorNeutral ? `dsa-cta--color-neutral` : "", contentAlign && contentAlign !== "center"
-                ? `dsa-cta--align-${contentAlign}`
-                : ""), backgroundImage: backgroundImage, backgroundColor: backgroundColor, full: image?.padding === false, image: {
+        value: ButtonGroup, children: jsx(Storytelling, { ...rest, ref: ref, className: classnames("dsa-cta", highlightText ? `dsa-cta--highlight-text` : "", colorNeutral ? `dsa-cta--color-neutral` : "", image?.padding ? `dsa-cta--image-padding` : "", !backgroundImage && !backgroundColor ? `dsa-cta--no-padding` : "", align && align !== "center" ? `dsa-cta--align-${align}` : ""), backgroundImage: backgroundImage, backgroundColor: backgroundColor, full: true, image: {
                 source: image?.src,
                 order: order,
-                vAlign: contentAlign,
+                vAlign: image?.align,
             }, box: {
                 text: text,
                 textAlign: textAlign,
-                vAlign: contentAlign,
+                vAlign: align,
                 link: {
                     buttons,
                     colorNeutral: colorNeutral,

package/dist/components/footer/footer.css

@@ -27,7 +27,7 @@
   background-color: var(--dsa-footer--background-color, var(--ks-background-color-default));
 }
 .dsa-footer__content {
-  padding: var(--l-section--space-small) var(--dsa-content--spacing);
+  padding: var(--l-section--space-small) var(--dsa-content--horizontal-spacing);
   border-top: var(--dsa-footer--border-top, 1px solid var(--ks-border-color-default));
   max-width: var(--dsa-footer--max-width, var(--dsa-content--width_wide));
   width: 100%;

package/dist/components/header/header.css

@@ -9,7 +9,7 @@
   [ks-theme],
   [ks-inverted] {
     --dsa-header--spacing-vertical: var(--ks-spacing-stack-s);
-    --dsa-header--spacing-horizontal: var(--dsa-content--spacing);
+    --dsa-header--spacing-horizontal: var(--dsa-content--horizontal-spacing);
   }
 }
 

package/dist/components/hero/hero.css

@@ -17,6 +17,7 @@
   --dsa-hero__textbox--background-color: var(--ks-color-bg-alpha-2);
   --dsa-hero__textbox--border-radius: var(--ks-border-radius-surface);
   --dsa-hero__textbox--max-width: var(--dsa-content--width_narrow);
+  --dsa-hero_below__textbox--max-width: var(--dsa-content--width_default);
   --dsa-hero__textbox--padding: var(--ks-spacing-inset-squish-xl);
   --dsa-hero__overlay--background: linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%);
 }
@@ -114,12 +115,12 @@
     height: var(--c-visual--min-height);
   }
   .c-visual.dsa-hero.dsa-hero--content-below .c-visual__content {
-    padding: 0 var(--dsa-content--spacing);
+    padding: 0 var(--dsa-content--horizontal-spacing);
     margin-top: -10%;
     position: relative;
   }
   .c-visual.dsa-hero.dsa-hero--content-below .c-visual__content .c-visual__box {
-    --c-visual_box--max-width: var(--dsa-content--width_default);
+    --c-visual_box--max-width: var(--dsa-hero_below__textbox--max-width, var(--dsa-content--width_default));
   }
   @container visual (min-width: 640px) {
     .c-visual.dsa-hero.dsa-hero--content-below.c-visual--no-crop .c-visual__media .c-visual__image {

package/dist/components/image-story/image-story.css

@@ -1,6 +1,6 @@
 .dsa-image-story.c-storytelling {
   --dsa-image-story--gap: var(--ks-spacing-m);
-  --dsa-image-story--horizontal-padding: var(--dsa-content--spacing);
+  --dsa-image-story--horizontal-padding: var(--dsa-content--horizontal-spacing);
   --dsa-image-story--vertical-padding: var(--ks-spacing-xl);
   --dsa-image-story__copy--font: var(--dsa-rich-text--font);
   --dsa-image-story__copy--color: var(--dsa-rich-text--color);
@@ -8,7 +8,10 @@
 
 .c-storytelling.dsa-image-story {
   gap: var(--c-storytelling--horizontal-padding);
-  --c-storytelling--horizontal-padding: var(--dsa-image-story--horizontal-padding, var(--dsa-content--spacing));
+  --c-storytelling--horizontal-padding: var(
+    --dsa-image-story--horizontal-padding,
+    var(--dsa-content--horizontal-spacing)
+  );
   --c-storytelling--vertical-padding: var(--dsa-image-story--vertical-padding, var(--ks-spacing-xl));
 }
 .c-storytelling.dsa-image-story .c-storytelling__box__content {

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { ImageStoryProps } from "../../ImageStoryProps-e853e1e7.js";
+import { ImageStoryProps } from "../../ImageStoryProps-03ff6d21.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

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

package/dist/components/mosaic/mosaic.css

@@ -1,6 +1,6 @@
 .dsa-mosaic {
   --dsa-mosaic--vertical-padding: var(--l-section--space-default);
-  --dsa-mosaic--horizontal-padding: var(--dsa-content--spacing);
+  --dsa-mosaic--horizontal-padding: var(--dsa-content--horizontal-spacing);
   --dsa-mosaic__copy--font: var(--dsa-rich-text--font);
   --dsa-mosaic__copy--color: var(--ks-text-color-default);
   --dsa-mosaic__headline--color: var(--dsa-headline--color);

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

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

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

@@ -282,12 +282,6 @@
                       "default": false,
                       "type": "boolean"
                     },
-                    "fullWidth": {
-                      "title": "Width",
-                      "description": "Set the width of the content to the full width of the element",
-                      "type": "boolean",
-                      "default": false
-                    },
                     "buttons": {
                       "type": "array",
                       "items": {
@@ -351,6 +345,17 @@
                           "title": "Alt text",
                           "description": "Image description",
                           "type": "string"
+                        },
+                        "align": {
+                          "title": "Vertical alignment of the image",
+                          "description": "Select a vertical alignment for the image",
+                          "type": "string",
+                          "enum": [
+                            "center",
+                            "top",
+                            "bottom"
+                          ],
+                          "default": "center"
                         }
                       },
                       "additionalProperties": false
@@ -385,9 +390,9 @@
                       "type": "string",
                       "default": "left"
                     },
-                    "contentAlign": {
+                    "align": {
                       "title": "Vertical alignment of the content",
-                      "description": "Select a vertical alignment for the image",
+                      "description": "Select a vertical alignment for the content",
                       "type": "string",
                       "enum": [
                         "center",
@@ -1538,12 +1543,6 @@
                                 "default": false,
                                 "type": "boolean"
                               },
-                              "fullWidth": {
-                                "title": "Width",
-                                "description": "Set the width of the content to the full width of the element",
-                                "type": "boolean",
-                                "default": false
-                              },
                               "buttons": {
                                 "type": "array",
                                 "items": {
@@ -1607,6 +1606,17 @@
                                     "title": "Alt text",
                                     "description": "Image description",
                                     "type": "string"
+                                  },
+                                  "align": {
+                                    "title": "Vertical alignment of the image",
+                                    "description": "Select a vertical alignment for the image",
+                                    "type": "string",
+                                    "enum": [
+                                      "center",
+                                      "top",
+                                      "bottom"
+                                    ],
+                                    "default": "center"
                                   }
                                 },
                                 "additionalProperties": false
@@ -1641,9 +1651,9 @@
                                 "type": "string",
                                 "default": "left"
                               },
-                              "contentAlign": {
+                              "align": {
                                 "title": "Vertical alignment of the content",
-                                "description": "Select a vertical alignment for the image",
+                                "description": "Select a vertical alignment for the content",
                                 "type": "string",
                                 "enum": [
                                   "center",

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Jan 2025 13:28:40 GMT
+ * Generated on Fri, 10 Jan 2025 13:43:48 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);