@kickstartds/ds-agency-premium 1.6.68--canary.1582.f41577e.0 → 1.6.68--canary.1587.98fc9e3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -10,7 +10,7 @@ import { FeaturesProps } from "./FeaturesProps-e58616a5.js";
10
10
  import { GalleryProps } from "./GalleryProps-76e7de44.js";
11
11
  import { HeroProps } from "./HeroProps-f704d270.js";
12
12
  import { HtmlProps } from "./HtmlProps-9d091769.js";
13
- import { ImageStoryProps } from "./ImageStoryProps-03ff6d21.js";
13
+ import { ImageStoryProps } from "./ImageStoryProps-e853e1e7.js";
14
14
  import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
15
15
  import { LogosProps } from "./LogosProps-f9474fe2.js";
16
16
  import { MosaicProps } from "./MosaicProps-d52c7151.js";
@@ -1,4 +1,4 @@
1
- import { BlogOverviewProps } from "../../BlogOverviewProps-a1b289ca.js";
1
+ import { BlogOverviewProps } from "../../BlogOverviewProps-9f207f1c.js";
2
2
  import { FC, PropsWithChildren } from "react";
3
3
  declare const BlogOverview: FC<PropsWithChildren<BlogOverviewProps>>;
4
4
  export type { BlogOverviewProps };
@@ -1,4 +1,4 @@
1
- import { BlogPostProps } from "../../BlogPostProps-a1b289ca.js";
1
+ import { BlogPostProps } from "../../BlogPostProps-6b3cff22.js";
2
2
  import { FC, PropsWithChildren } from "react";
3
3
  declare const BlogPost: FC<PropsWithChildren<BlogPostProps>>;
4
4
  export type { BlogPostProps };
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import { HTMLAttributes } from "react";
3
- import { ImageStoryProps } from "../../ImageStoryProps-03ff6d21.js";
3
+ import { ImageStoryProps } from "../../ImageStoryProps-e853e1e7.js";
4
4
  declare const ImageStoryContextDefault: import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
5
5
  declare const ImageStoryContext: import("react").Context<import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
6
6
  declare const ImageStory: import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
@@ -29,7 +29,7 @@ interface SettingsProps {
29
29
  seo: SeoProps;
30
30
  iconSprite?: IconSprite;
31
31
  }
32
- export * from "../../BlogPostProps-a1b289ca.js";
33
- export * from "../../BlogOverviewProps-a1b289ca.js";
34
- export * from "../../PageProps-a1b289ca.js";
32
+ export * from "../../BlogPostProps-6b3cff22.js";
33
+ export * from "../../BlogOverviewProps-9f207f1c.js";
34
+ export * from "../../PageProps-aa29c554.js";
35
35
  export { IconSprite, SettingsProps };
@@ -1,4 +1,4 @@
1
- import { PageProps } from "../../PageProps-a1b289ca.js";
1
+ import { PageProps } from "../../PageProps-aa29c554.js";
2
2
  import { FC, PropsWithChildren } from "react";
3
3
  declare const Page: FC<PropsWithChildren<PageProps>>;
4
4
  export type { PageProps };
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 12 May 2025 08:12:25 GMT
3
+ * Generated on Mon, 12 May 2025 08:19:38 GMT
4
4
  */
5
5
  :root, [ks-theme] {
6
6
  --ks-background-color-accent-base: var(--ks-color-fg-to-bg-9-base);
@@ -6,15 +6,15 @@ import { TeaserBoxContextDefault, TeaserBoxContext } from '@kickstartds/base/lib
6
6
  import { Container } from '@kickstartds/core/lib/container';
7
7
  import { compiler } from 'markdown-to-jsx';
8
8
 
9
- const TeaserCardContextDefault = forwardRef(({ headline, text, button, target, image, imageRatio = "wide", label, layout = "stack", ...rest }, ref) => (jsx(Container, { name: "teaser-card", children: jsx(TeaserBoxContextDefault, { ...rest, className: classnames(`dsa-teaser-card`, label && `dsa-teaser-card--label`, `dsa-teaser-card--${layout}`, `dsa-teaser-card--${imageRatio}`), topic: headline, text: text,
10
- // @ts-expect-error
11
- renderTopic: () => (jsxs(Fragment, { children: [label ? (jsx("span", { className: "dsa-teaser-card__label", children: label })) : (""), compiler(headline)] })), link: {
12
- hidden: button?.hidden,
13
- label: button.label,
14
- variant: "primary",
15
- target: target,
16
- icon: button?.chevron ? "chevron-right" : undefined,
17
- }, image: image, ref: ref }) })));
9
+ const TeaserCardContextDefault = forwardRef(({ headline, text, button, target, image, imageRatio = "wide", label, layout = "stack", ...rest }, ref) => (jsx(Container, { name: "teaser-card", children: jsxs("div", { className: classnames(`dsa-teaser-card`, `dsa-teaser-card--${layout}`, `dsa-teaser-card--${imageRatio}`), children: [label && jsx("span", { className: "dsa-teaser-card__label", children: label }), jsx(TeaserBoxContextDefault, { ...rest, topic: headline, text: text,
10
+ // @ts-expect-error
11
+ renderTopic: () => jsx(Fragment, { children: compiler(headline) }), link: {
12
+ hidden: button?.hidden,
13
+ label: button.label,
14
+ variant: "primary",
15
+ target: target,
16
+ icon: button?.chevron ? "chevron-right" : undefined,
17
+ }, image: image, ref: ref })] }) })));
18
18
  const TeaserCardContext = createContext(TeaserCardContextDefault);
19
19
  const TeaserCard = forwardRef((props, ref) => {
20
20
  const Component = useContext(TeaserCardContext);
@@ -11,6 +11,7 @@
11
11
  --dsa-teaser-card--border-radius: var(--ks-border-radius-card);
12
12
  --dsa-teaser-card--shadow: none;
13
13
  --dsa-teaser-card--shadow_hover: none;
14
+ --dsa-teaser__topic--color: var(--dsa-topic--color);
14
15
  --dsa-teaser-card__label--font: var(--ks-font-interface-m);
15
16
  --dsa-teaser-card__label--font-weight: var(--ks-font-weight-semi-bold);
16
17
  --dsa-teaser-card__label--color: var(--dsa-text-color-on-primary);
@@ -54,7 +55,13 @@
54
55
  display: flex;
55
56
  }
56
57
 
57
- .c-teaser.dsa-teaser-card {
58
+ .dsa-teaser-card {
59
+ display: flex;
60
+ width: 100%;
61
+ height: 100%;
62
+ position: relative;
63
+ }
64
+ .dsa-teaser-card .c-teaser {
58
65
  --c-teaser--padding: var(--dsa-teaser-card--padding, var(--ks-spacing-inset-l));
59
66
  --c-teaser--background: var(--dsa-teaser-card--background, var(--ks-background-color-card-interactive));
60
67
  --c-teaser--color: var(--dsa-teaser-card__copy--color, var(--ks-text-color-default));
@@ -63,71 +70,65 @@
63
70
  --c-teaser--border-radius: var(--dsa-teaser-card--border-radius, var(--ks-border-radius-card));
64
71
  --c-teaser--shadow-hover: var(--dsa-teaser-card--shadow_hover, var(--ks-box-shadow-card-hover));
65
72
  position: relative;
66
- overflow: visible;
67
73
  transition-property: border-color, background-color, box-shadow;
68
74
  box-shadow: var(--dsa-teaser-card--shadow, var(--ks-box-shadow-card));
69
75
  }
70
- .c-teaser.dsa-teaser-card > :first-child:not(.c-teaser__body) {
71
- overflow: hidden;
72
- border-radius: var(--dsa-teaser-card--border-radius) var(--dsa-teaser-card--border-radius) 0 0;
73
- }
74
- .c-teaser.dsa-teaser-card:hover {
76
+ .dsa-teaser-card .c-teaser:hover {
75
77
  --c-teaser--border: var(--dsa-teaser-card--border-color_hover, var(--ks-background-color-card-interactive))
76
78
  var(--dsa-teaser-card--border-width) solid;
77
79
  }
78
- .c-teaser.dsa-teaser-card img {
80
+ .dsa-teaser-card .c-teaser img {
79
81
  object-fit: cover;
80
- border-radius: var(--dsa-teaser-card--border-radius);
81
- border-bottom-left-radius: 0;
82
- border-bottom-right-radius: 0;
83
82
  }
84
- .c-teaser.dsa-teaser-card--wide img {
83
+ .dsa-teaser-card--wide img {
85
84
  aspect-ratio: 4/3;
86
85
  }
87
- .c-teaser.dsa-teaser-card--landscape img {
86
+ .dsa-teaser-card--landscape img {
88
87
  aspect-ratio: 16/9;
89
88
  }
90
- .c-teaser.dsa-teaser-card--square img {
89
+ .dsa-teaser-card--square img {
91
90
  aspect-ratio: 1/1;
92
91
  }
93
- .c-teaser.dsa-teaser-card .c-rich-text {
92
+ .dsa-teaser-card .c-rich-text {
94
93
  font: var(--dsa-teaser-card__copy--font, var(--dsa-rich-text--font, var(--ks-font-copy-m)));
95
94
  }
96
- .c-teaser.dsa-teaser-card .c-teaser__topic {
95
+ .dsa-teaser-card .c-teaser__topic {
96
+ color: var(--dsa-teaser__topic--color, var(--dsa-topic--color));
97
97
  font: var(--dsa-teaser-card__topic--font, var(--dsa-topic--font));
98
98
  font-weight: var(--dsa-teaser-card__topic--font-weight, var(--dsa-topic--font-weight));
99
99
  }
100
+ .dsa-teaser-card .dsa-teaser-card__label {
101
+ position: absolute;
102
+ z-index: 1;
103
+ top: 0;
104
+ right: 0;
105
+ border-radius: var(--dsa-teaser-card__label--border-radius);
106
+ border: var(--dsa-teaser-card__label--border, 0);
107
+ pointer-events: initial;
108
+ padding: var(--dsa-teaser-card__label--padding);
109
+ transform: translate(0.5em, -50%);
110
+ font: var(--dsa-teaser-card__label--font);
111
+ text-align: center;
112
+ font-weight: var(--dsa-teaser-card__label--font-weight);
113
+ color: var(--dsa-teaser-card__label--color);
114
+ background-color: var(--dsa-teaser-card__label--background-color);
115
+ }
100
116
  @container teaser-card (min-width: 640px) {
101
- .c-teaser.dsa-teaser-card--unset img {
117
+ .dsa-teaser-card--unset img {
102
118
  height: 100%;
103
119
  }
104
- .c-teaser.dsa-teaser-card--row {
120
+ .dsa-teaser-card--row {
105
121
  flex-direction: row;
106
122
  }
107
- .c-teaser.dsa-teaser-card--row .c-teaser__body {
123
+ .dsa-teaser-card--row .c-teaser__body {
108
124
  justify-content: center;
109
125
  flex-basis: 50%;
110
126
  }
111
- .c-teaser.dsa-teaser-card--row .c-teaser__body .c-teaser__text {
127
+ .dsa-teaser-card--row .c-teaser__body .c-teaser__text {
112
128
  flex: 0;
113
129
  }
114
- .c-teaser.dsa-teaser-card--row > :first-child:not(.c-teaser__body) {
130
+ .dsa-teaser-card--row > :first-child:not(.c-teaser__body) {
115
131
  flex: 50%;
116
132
  border-radius: var(--dsa-teaser-card--border-radius) 0 0 var(--dsa-teaser-card--border-radius);
117
133
  }
118
- }
119
- .c-teaser.dsa-teaser-card--label .dsa-teaser-card__label {
120
- border-radius: var(--dsa-teaser-card__label--border-radius);
121
- border: var(--dsa-teaser-card__label--border, 0);
122
- pointer-events: initial;
123
- padding: var(--dsa-teaser-card__label--padding);
124
- transform: translate(0.5em, -50%);
125
- font: var(--dsa-teaser-card__label--font);
126
- text-align: center;
127
- font-weight: var(--dsa-teaser-card__label--font-weight);
128
- color: var(--dsa-teaser-card__label--color);
129
- position: absolute;
130
- background-color: var(--dsa-teaser-card__label--background-color);
131
- top: 0;
132
- right: 0;
133
134
  }
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 12 May 2025 08:12:28 GMT
3
+ * Generated on Mon, 12 May 2025 08:19:40 GMT
4
4
  */
5
5
  :root [ks-theme=business] {
6
6
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -2727,7 +2727,7 @@
2727
2727
  }
2728
2728
  /**
2729
2729
  * Do not edit directly
2730
- * Generated on Mon, 12 May 2025 08:12:32 GMT
2730
+ * Generated on Mon, 12 May 2025 08:19:45 GMT
2731
2731
  */
2732
2732
  :root [ks-theme=google] {
2733
2733
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -5458,7 +5458,7 @@
5458
5458
  }
5459
5459
  /**
5460
5460
  * Do not edit directly
5461
- * Generated on Mon, 12 May 2025 08:12:30 GMT
5461
+ * Generated on Mon, 12 May 2025 08:19:43 GMT
5462
5462
  */
5463
5463
  :root [ks-theme=ngo] {
5464
5464
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -8459,7 +8459,7 @@
8459
8459
  }
8460
8460
  /**
8461
8461
  * Do not edit directly
8462
- * Generated on Mon, 12 May 2025 08:12:35 GMT
8462
+ * Generated on Mon, 12 May 2025 08:19:47 GMT
8463
8463
  */
8464
8464
  :root [ks-theme=telekom] {
8465
8465
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 12 May 2025 08:12:25 GMT
3
+ * Generated on Mon, 12 May 2025 08:19:38 GMT
4
4
  */
5
5
 
6
6
  :root, [ks-theme] {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 12 May 2025 08:12:25 GMT
3
+ * Generated on Mon, 12 May 2025 08:19:38 GMT
4
4
  */
5
5
 
6
6
  export const KsBackgroundColorAccentBase = "#f3f3f4";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kickstartds/ds-agency-premium",
3
- "version": "1.6.68--canary.1582.f41577e.0",
3
+ "version": "1.6.68--canary.1587.98fc9e3.0",
4
4
  "description": "",
5
5
  "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
6
6
  "bugs": {