@kickstartds/ds-agency-premium 1.3.32 → 1.3.34

package/dist/{ImageStoryProps-24e0335c.d.ts → ImageStoryProps-e853e1e7.d.ts}

@@ -37,13 +37,17 @@ type Buttons = ButtonProps[];
  */
 type ImageSource = string;
 /**
- * Select an aspect ratio to use for cropping and displaying the image
+ * The aspect ratio of the image
  */
-type ImageAspectRatio = "4:3" | "3:2" | "16:9" | "1:1" | "none";
+type AspectRatio = "unset" | "square" | "wide" | "landscape";
 /**
  * Image description
  */
 type AltText = string;
+/**
+ * Select a vertical alignment for the image
+ */
+type ImageVerticalAlignment = "center" | "top" | "bottom";
 /**
  * Choose the alginment of the text
  */
@@ -64,7 +68,8 @@ interface ImageStoryProps {
  */
 interface Image {
     src?: ImageSource;
-    ratio?: ImageAspectRatio;
+    aspectRatio?: AspectRatio;
     alt?: AltText;
+    vAlign?: ImageVerticalAlignment;
 }
-export { ModuleHeadline, LargeHeadline, ModuleSubheadline, ModuleText, Layout, Padding, Buttons, ImageSource, ImageAspectRatio, AltText, TextAlignment, ImageStoryProps, Image };
+export { ModuleHeadline, LargeHeadline, ModuleSubheadline, ModuleText, Layout, Padding, Buttons, ImageSource, AspectRatio, AltText, ImageVerticalAlignment, TextAlignment, ImageStoryProps, Image };

package/dist/SectionProps-93230a76.d.ts

@@ -8,7 +8,7 @@ import { FaqProps } from "./FaqProps-ad618cd5.js";
 import { FeaturesProps } from "./FeaturesProps-b05859d6.js";
 import { GalleryProps } from "./GalleryProps-76e7de44.js";
 import { HeroProps } from "./HeroProps-cf82a16d.js";
-import { ImageStoryProps } from "./ImageStoryProps-24e0335c.js";
+import { ImageStoryProps } from "./ImageStoryProps-e853e1e7.js";
 import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
 import { LogosProps } from "./LogosProps-f9474fe2.js";
 import { MosaicProps } from "./MosaicProps-d52c7151.js";

package/dist/components/button/button.css

@@ -4,6 +4,9 @@
   --dsa-button--border-radius: var(--ks-border-radius-pill);
   --dsa-button--font-weight: var(--ks-font-weight-semi-bold);
   --dsa-button--text-transform: default;
+  --dsa-button_small--font: var(--ks-font-interface-s);
+  --dsa-button_medium--font: var(--ks-font-interface-m);
+  --dsa-button_large--font: var(--ks-font-interface-l);
   --dsa-button_primary--color: var(--dsa-text-color-on-primary);
   --dsa-button_primary--color_hover: var(--dsa-text-color-on-primary);
   --dsa-button_primary--color_active: var(--dsa-text-color-on-primary);
@@ -36,6 +39,15 @@
   text-transform: var(--dsa-button--text-transform);
   transition-property: box-shadow, transform, background-color, color, border;
 }
+.dsa-button.c-button.c-button--small {
+  --c-button--font: var(--dsa-button_small--font, var(--ks-font-interface-s));
+}
+.dsa-button.c-button.c-button--medium {
+  --c-button--font: var(--dsa-button_medium--font, var(--ks-font-interface-m));
+}
+.dsa-button.c-button.c-button--large {
+  --c-button--font: var(--dsa-button_large--font, var(--ks-font-interface-l));
+}
 .dsa-button.c-button.c-button--solid {
   --c-button--color: var(--dsa-button_primary--color, var(--dsa-text-color-on-primary));
   --c-button--color-hover: var(--dsa-button_primary--color_hover, var(--dsa-text-color-on-primary));

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

@@ -1,6 +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 Button: import("react").ForwardRefExoticComponent<ButtonProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 declare const ButtonProvider: FC<PropsWithChildren>;
 export { Button, ButtonProvider };

package/dist/components/headline/headline.css

@@ -15,12 +15,12 @@
   --dsa-headline_h4--font: var(--ks-font-display-m);
   --dsa-headline__p--font: var(--ks-font-copy-m);
 }
-@media (min-width: 42rem) {
+@media (min-width: 48em) {
   :root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
     --dsa-headline_h1__subheadline--font: var(--ks-font-copy-xl);
   }
 }
-@media (min-width: 42rem) {
+@media (min-width: 48em) {
   :root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
     --dsa-headline_h2__subheadline--font: var(--ks-font-copy-l);
   }

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

@@ -14,6 +14,18 @@
 .c-storytelling.dsa-image-story .c-storytelling__box__content {
   max-width: var(--l-section--content-width-narrow);
 }
+.c-storytelling.dsa-image-story.c-storytelling--three-to-two img {
+  aspect-ratio: 3/2;
+}
+.c-storytelling.dsa-image-story.c-storytelling--four-to-three img {
+  aspect-ratio: 4/3;
+}
+.c-storytelling.dsa-image-story.c-storytelling--sixteen-to-nine img {
+  aspect-ratio: 16/9;
+}
+.c-storytelling.dsa-image-story.c-storytelling--square img {
+  aspect-ratio: 1/1;
+}
 .c-storytelling.dsa-image-story .c-rich-text {
   font: var(--dsa-image-story__copy--font, var(--dsa-rich-text--font));
   color: var(--dsa-image-story__copy--color, var(--dsa-rich-text--color));
@@ -24,7 +36,7 @@
 }
 .c-storytelling.dsa-image-story .c-storytelling__image img {
   position: sticky;
-  top: calc(var(--c-storytelling--vertical-padding) * 2);
+  height: auto;
 }
 .c-storytelling.dsa-image-story.c-storytelling--full {
   --c-storytelling--vertical-padding: 0px;

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

@@ -129,23 +129,33 @@
           "type": "string",
           "format": "image"
         },
-        "ratio": {
-          "title": "Image aspect ratio",
-          "description": "Select an aspect ratio to use for cropping and displaying the image",
+        "aspectRatio": {
           "type": "string",
+          "title": "Aspect Ratio",
+          "description": "The aspect ratio of the image",
           "enum": [
-            "4:3",
-            "3:2",
-            "16:9",
-            "1:1",
-            "none"
+            "unset",
+            "square",
+            "wide",
+            "landscape"
           ],
-          "default": "none"
+          "default": "unset"
         },
         "alt": {
           "title": "Alt text",
           "description": "Image description",
           "type": "string"
+        },
+        "vAlign": {
+          "title": "Image vertical alignment",
+          "description": "Select a vertical alignment for the image",
+          "type": "string",
+          "enum": [
+            "center",
+            "top",
+            "bottom"
+          ],
+          "default": "center"
         }
       },
       "additionalProperties": false

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

@@ -57,17 +57,20 @@
           "type": "string",
           "format": "image"
         },
-        "ratio": {
-          "title": "Image aspect ratio",
-          "description": "Select an aspect ratio to use for cropping and displaying the image",
-          "type": "string",
-          "enum": ["4:3", "3:2", "16:9", "1:1", "none"],
-          "default": "none"
+        "aspectRatio": {
+          "$ref": "http://schema.mydesignsystem.com/image.schema.json#/properties/aspectRatio"
         },
         "alt": {
           "title": "Alt text",
           "description": "Image description",
           "type": "string"
+        },
+        "vAlign": {
+          "title": "Image vertical alignment",
+          "description": "Select a vertical alignment for the image",
+          "type": "string",
+          "enum": ["center", "top", "bottom"],
+          "default": "center"
         }
       },
       "additionalProperties": false

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

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

@@ -15,10 +15,19 @@ const ImageStoryContextDefault = forwardRef(({ headline, largeHeadline = false,
         // @ts-expect-error
         value: ButtonGroup, children: jsx(Storytelling, { ...rest, ref: ref, className: classnames("dsa-image-story"), full: padding === false ? true : false, image: {
                 source: image?.src,
+                ratio: image?.aspectRatio === "square"
+                    ? "1:1"
+                    : image?.aspectRatio === "wide"
+                        ? "4:3"
+                        : image?.aspectRatio === "landscape"
+                            ? "16:9"
+                            : image?.aspectRatio === "unset"
+                                ? "none"
+                                : "none",
                 order: {
                     desktopImageLast: layout === "imageLeft" ? false : true,
                 },
-                vAlign: "top",
+                vAlign: image?.vAlign,
             }, box: {
                 text: text,
                 textAlign: textAlign,

package/dist/components/nav-main/nav-main.css

@@ -16,7 +16,7 @@
   --dsa-nav-main__link--padding: 0.35em 0;
   --dsa-nav-main--shadow: 50px 0px 50px 50px rgba(0, 0, 0, 0.539);
 }
-@media (min-width: 62rem) {
+@media (min-width: 62em) {
   .dsa-nav-main {
     --dsa-nav-main__link--padding: 0 0.75em;
     --dsa-nav-main__link--font: var(--ks-font-interface-m);
@@ -80,7 +80,7 @@
 .dsa-nav-main.dsa-nav-main--flyout {
   display: none;
 }
-@media (max-width: 62rem) {
+@media (max-width: 62em) {
   .dsa-nav-main.dsa-nav-main--flyout {
     display: block;
     /* critical:start */
@@ -138,7 +138,7 @@
 .dsa-nav-main.dsa-nav-main--topbar {
   display: none;
 }
-@media (min-width: 62rem) {
+@media (min-width: 62em) {
   .dsa-nav-main.dsa-nav-main--topbar {
     display: block;
     /* critical:start */

package/dist/components/nav-main/nav-toggle.css

@@ -20,7 +20,7 @@ button.dsa-nav-toggle {
   transform: translateX(var(--dsa-header--spacing-horizontal));
   --nav-toggle__icon-bar--offset: 14px;
 }
-@media (min-width: 42em) {
+@media (min-width: 48em) {
   button.dsa-nav-toggle {
     --nav-toggle__icon-bar--offset: 18px;
   }
@@ -54,7 +54,7 @@ button.dsa-nav-toggle .dsa-nav-toggle__icon {
 .dsa-header--floating button.dsa-nav-toggle .dsa-nav-toggle__icon {
   color: var(--nav-toggle_floating--color);
 }
-@media (min-width: 40rem) {
+@media (min-width: 40em) {
   button.dsa-nav-toggle .dsa-nav-toggle__icon {
     transform: scale(0.8) translate(2.5%, 2.5%);
   }

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

@@ -986,23 +986,33 @@
                           "type": "string",
                           "format": "image"
                         },
-                        "ratio": {
-                          "title": "Image aspect ratio",
-                          "description": "Select an aspect ratio to use for cropping and displaying the image",
+                        "aspectRatio": {
                           "type": "string",
+                          "title": "Aspect Ratio",
+                          "description": "The aspect ratio of the image",
                           "enum": [
-                            "4:3",
-                            "3:2",
-                            "16:9",
-                            "1:1",
-                            "none"
+                            "unset",
+                            "square",
+                            "wide",
+                            "landscape"
                           ],
-                          "default": "none"
+                          "default": "unset"
                         },
                         "alt": {
                           "title": "Alt text",
                           "description": "Image description",
                           "type": "string"
+                        },
+                        "vAlign": {
+                          "title": "Image vertical alignment",
+                          "description": "Select a vertical alignment for the image",
+                          "type": "string",
+                          "enum": [
+                            "center",
+                            "top",
+                            "bottom"
+                          ],
+                          "default": "center"
                         }
                       },
                       "additionalProperties": false

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 01 Aug 2024 12:08:12 GMT
+ * Generated on Mon, 05 Aug 2024 09:42:08 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);

package/dist/components/presets.json

@@ -1619,7 +1619,7 @@
     "id": "components-image-story--sticky-image-next-to-scrolling-text",
     "group": "Components/Image Story",
     "name": "StickyImageNextToScrollingText",
-    "code": "<ImageStory\n  buttons={[\n    {\n      disabled: false,\n      label: 'Learn More',\n      size: 'medium',\n      target: '#',\n      variant: 'secondary'\n    },\n    {\n      disabled: false,\n      label: 'Contact Us',\n      size: 'medium',\n      target: '#',\n      variant: 'secondary'\n    }\n  ]}\n  headline=\"The Sanity & Next.js Experts\"\n  image={{\n    ratio: 'none',\n    src: 'img/full-shot-different-people-working-together.png'\n  }}\n  largeHeadline\n  layout=\"imageLeft\"\n  sub=\"Subheadline\"\n  text=\"\nHere at Systemics, we bring a range of design system services that can make a difference:\n\n### 1. Design System Consulting\nLet's work side by side to shape a design system strategy that aligns perfectly with your goals. It's not just about tools; it's about guiding principles, stakeholder management und making the right decisions at the right time.\n\n### 2. Design System Creation & Development\nWe'll bring your design system from concept to production, giving you consistent and engaging user experiences across different platforms. We will work together with your digital teams to transfer all complex Figma ideas into code using kickstartDS.\n\n### 3. Headless CMS & Websites\nWe leverage the power of headless CMSs to provide scalable, flexible, and versatile websites that drive your online presence.\n\n### 4. Design System Training\nWe empower your digital teams with the knowledge and skills to manage and evolve your design system effectively.\n\nReady to make your digital journey exceptional?\n    \"\n  textAlign=\"left\"\n/>",
+    "code": "<ImageStory\n  buttons={[\n    {\n      disabled: false,\n      label: 'Learn More',\n      size: 'medium',\n      target: '#',\n      variant: 'secondary'\n    },\n    {\n      disabled: false,\n      label: 'Contact Us',\n      size: 'medium',\n      target: '#',\n      variant: 'secondary'\n    }\n  ]}\n  headline=\"The Sanity & Next.js Experts\"\n  image={{\n    aspectRatio: 'unset',\n    src: 'img/full-shot-different-people-working-together.png',\n    vAlign: 'center'\n  }}\n  largeHeadline\n  layout=\"imageLeft\"\n  sub=\"Subheadline\"\n  text=\"\nHere at Systemics, we bring a range of design system services that can make a difference:\n\n### 1. Design System Consulting\nLet's work side by side to shape a design system strategy that aligns perfectly with your goals. It's not just about tools; it's about guiding principles, stakeholder management und making the right decisions at the right time.\n\n### 2. Design System Creation & Development\nWe'll bring your design system from concept to production, giving you consistent and engaging user experiences across different platforms. We will work together with your digital teams to transfer all complex Figma ideas into code using kickstartDS.\n\n### 3. Headless CMS & Websites\nWe leverage the power of headless CMSs to provide scalable, flexible, and versatile websites that drive your online presence.\n\n### 4. Design System Training\nWe empower your digital teams with the knowledge and skills to manage and evolve your design system effectively.\n\nReady to make your digital journey exceptional?\n    \"\n  textAlign=\"left\"\n/>",
     "args": {
       "headline": "The Sanity & Next.js Experts",
       "largeHeadline": true,
@@ -1643,7 +1643,8 @@
         }
       ],
       "image": {
-        "ratio": "none",
+        "aspectRatio": "unset",
+        "vAlign": "center",
         "src": "img/full-shot-different-people-working-together.png"
       },
       "textAlign": "left",

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

@@ -972,23 +972,33 @@
                     "type": "string",
                     "format": "image"
                   },
-                  "ratio": {
-                    "title": "Image aspect ratio",
-                    "description": "Select an aspect ratio to use for cropping and displaying the image",
+                  "aspectRatio": {
                     "type": "string",
+                    "title": "Aspect Ratio",
+                    "description": "The aspect ratio of the image",
                     "enum": [
-                      "4:3",
-                      "3:2",
-                      "16:9",
-                      "1:1",
-                      "none"
+                      "unset",
+                      "square",
+                      "wide",
+                      "landscape"
                     ],
-                    "default": "none"
+                    "default": "unset"
                   },
                   "alt": {
                     "title": "Alt text",
                     "description": "Image description",
                     "type": "string"
+                  },
+                  "vAlign": {
+                    "title": "Image vertical alignment",
+                    "description": "Select a vertical alignment for the image",
+                    "type": "string",
+                    "enum": [
+                      "center",
+                      "top",
+                      "bottom"
+                    ],
+                    "default": "center"
                   }
                 },
                 "additionalProperties": false

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

@@ -23,7 +23,7 @@
   --dsa-teaser-card__copy--color: var(--ks-text-color-default);
   --dsa-teaser-card--padding: var(--ks-spacing-inset-l);
 }
-@media (min-width: 48rem) {
+@media (min-width: 48em) {
   .dsa-teaser-card {
     --dsa-teaser-card__topic--font: var(--ks-font-display-s);
     --dsa-teaser-card__copy--font: var(--ks-font-copy-s);

package/dist/global.css

@@ -314,12 +314,12 @@ h3 {
   --dsa-section__content_wide--width: 1440px;
   --dsa-logo--height: 2rem;
 }
-@media (min-width: 42rem) {
+@media (min-width: 48em) {
   :root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
     --dsa-section__content--padding: var(--ks-spacing-inset-xl);
   }
 }
-@media (min-width: 42rem) {
+@media (min-width: 48em) {
   :root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
     --dsa-logo--height: 2.5rem;
   }

package/dist/tokens/themes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 01 Aug 2024 12:08:15 GMT
+ * Generated on Mon, 05 Aug 2024 09:42:11 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 Thu, 01 Aug 2024 12:08:19 GMT
+ * Generated on Mon, 05 Aug 2024 09:42:16 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 Thu, 01 Aug 2024 12:08:17 GMT
+ * Generated on Mon, 05 Aug 2024 09:42:13 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 Thu, 01 Aug 2024 12:08:21 GMT
+ * Generated on Mon, 05 Aug 2024 09:42:18 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 Thu, 01 Aug 2024 12:08:12 GMT
+ * Generated on Mon, 05 Aug 2024 09:42:08 GMT
  */
 
 :root, [ks-theme] {

package/dist/tokens/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 01 Aug 2024 12:08:13 GMT
+ * Generated on Mon, 05 Aug 2024 09:42:09 GMT
  */
 
 export const KsBackgroundColorAccentBase = "#230a2b";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kickstartds/ds-agency-premium",
-  "version": "1.3.32",
+  "version": "1.3.34",
   "description": "",
   "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
   "bugs": {