@kickstartds/ds-agency-premium 1.6.71--canary.1897.4e4f047.0 → 1.6.71--canary.45.1899.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.
Files changed (80) hide show
  1. package/dist/BlogOverviewProps-9f207f1c.d.ts +1 -1
  2. package/dist/BlogPostProps-6b3cff22.d.ts +1 -1
  3. package/dist/{CtaProps-babe4ee6.d.ts → CtaProps-789f8508.d.ts} +1 -6
  4. package/dist/{HeroProps-40f6c7f5.d.ts → HeroProps-2ff0068e.d.ts} +2 -7
  5. package/dist/SectionProps-21d04028.d.ts +3 -3
  6. package/dist/{SliderProps-babe4ee6.d.ts → SliderProps-789f8508.d.ts} +2 -2
  7. package/dist/components/blog-overview/blog-overview.schema.dereffed.json +6 -32
  8. package/dist/components/blog-post/blog-post.schema.dereffed.json +6 -32
  9. package/dist/components/button/button.css +2 -2
  10. package/dist/components/cta/cta.schema.dereffed.json +0 -6
  11. package/dist/components/cta/cta.schema.json +0 -6
  12. package/dist/components/cta/index.d.ts +1 -1
  13. package/dist/components/cta/index.js +1 -1
  14. package/dist/components/footer/footer.css +1 -1
  15. package/dist/components/footer/footer.schema.dereffed.json +12 -20
  16. package/dist/components/header/header.schema.dereffed.json +12 -20
  17. package/dist/components/hero/hero.css +24 -28
  18. package/dist/components/hero/hero.schema.dereffed.json +3 -7
  19. package/dist/components/hero/hero.schema.json +9 -7
  20. package/dist/components/hero/index.d.ts +1 -1
  21. package/dist/components/hero/index.js +15 -5
  22. package/dist/components/nav-dropdown/nav-dropdown.css +3 -3
  23. package/dist/components/nav-flyout/nav-flyout.schema.dereffed.json +12 -20
  24. package/dist/components/nav-main/nav-main.schema.dereffed.json +12 -20
  25. package/dist/components/nav-main/nav-main.schema.json +12 -20
  26. package/dist/components/nav-topbar/nav-topbar.css +3 -3
  27. package/dist/components/nav-topbar/nav-topbar.schema.dereffed.json +12 -20
  28. package/dist/components/page/page.schema.dereffed.json +6 -26
  29. package/dist/components/page-wrapper/index.js +0 -6
  30. package/dist/components/page-wrapper/tokens.css +245 -245
  31. package/dist/components/presets.json +28 -58
  32. package/dist/components/section/section.schema.dereffed.json +6 -26
  33. package/dist/components/settings/settings.schema.dereffed.json +24 -40
  34. package/dist/components/slider/index.d.ts +1 -1
  35. package/dist/components/slider/slider.schema.dereffed.json +3 -13
  36. package/dist/components/split-even/index.d.ts +3 -3
  37. package/dist/components/split-even/split-even.schema.dereffed.json +12 -52
  38. package/dist/components/split-weighted/index.d.ts +3 -3
  39. package/dist/components/split-weighted/split-weighted.schema.dereffed.json +12 -52
  40. package/dist/components/stats/stats.css +3 -3
  41. package/dist/components/teaser-card/teaser-card.css +4 -3
  42. package/dist/components/testimonials/index.d.ts +1 -1
  43. package/dist/global.css +1 -1
  44. package/dist/static/favicon/android-chrome-192x192.png +0 -0
  45. package/dist/static/favicon/android-chrome-512x512.png +0 -0
  46. package/dist/static/favicon/apple-touch-icon.png +0 -0
  47. package/dist/static/favicon/browserconfig.xml +9 -0
  48. package/dist/static/favicon/favicon-16x16.png +0 -0
  49. package/dist/static/favicon/favicon-192-192.png +20 -0
  50. package/dist/static/favicon/favicon-32x32.png +0 -0
  51. package/dist/static/favicon/favicon.ico +0 -0
  52. package/dist/static/favicon/mstile-144x144.png +0 -0
  53. package/dist/static/favicon/mstile-150x150.png +0 -0
  54. package/dist/static/favicon/mstile-310x150.png +0 -0
  55. package/dist/static/favicon/mstile-310x310.png +0 -0
  56. package/dist/static/favicon/mstile-70x70.png +0 -0
  57. package/dist/static/favicon/safari-pinned-tab.svg +30 -0
  58. package/dist/static/favicon/site.webmanifest +19 -1
  59. package/dist/static/logo-inverted.svg +12 -20
  60. package/dist/static/logo.svg +12 -54
  61. package/dist/tokens/IconSprite.js +0 -6
  62. package/dist/tokens/icon-sprite.html +0 -2
  63. package/dist/tokens/themes.css +4 -4
  64. package/dist/tokens/tokens.css +245 -245
  65. package/dist/tokens/tokens.js +375 -376
  66. package/package.json +1 -1
  67. package/dist/static/guenther/brands/cadillac.png +0 -0
  68. package/dist/static/guenther/brands/corvette.png +0 -0
  69. package/dist/static/guenther/brands/infiniti.png +0 -0
  70. package/dist/static/guenther/brands/isuzu.png +0 -0
  71. package/dist/static/guenther/brands/kia.png +0 -0
  72. package/dist/static/guenther/brands/maserati.png +0 -0
  73. package/dist/static/guenther/brands/micro.png +0 -0
  74. package/dist/static/guenther/brands/msg.png +0 -0
  75. package/dist/static/guenther/brands/nissan.png +0 -0
  76. package/dist/static/guenther/brands/saab.png +0 -0
  77. package/dist/static/guenther/brands/subaru.png +0 -0
  78. package/dist/static/guenther/contact.jpg +0 -0
  79. package/dist/static/guenther/header.jpg +0 -0
  80. package/dist/static/guenther/header.png +0 -0
@@ -5,7 +5,7 @@
5
5
  */
6
6
  import { SectionProps } from "./SectionProps-21d04028.js";
7
7
  import { BlogTeaserProps } from "./BlogTeaserProps-f5855e93.js";
8
- import { CtaProps } from "./CtaProps-babe4ee6.js";
8
+ import { CtaProps } from "./CtaProps-789f8508.js";
9
9
  import { SeoProps } from "./SeoProps-f2d6dcaa.js";
10
10
  /**
11
11
  * Collection of sections (with their contents) to render as the blog overview intro
@@ -6,7 +6,7 @@
6
6
  import { BlogHeadProps } from "./BlogHeadProps-c04a5ed8.js";
7
7
  import { BlogAsideProps } from "./BlogAsideProps-c760fd2a.js";
8
8
  import { SectionProps } from "./SectionProps-21d04028.js";
9
- import { CtaProps } from "./CtaProps-babe4ee6.js";
9
+ import { CtaProps } from "./CtaProps-789f8508.js";
10
10
  import { SeoProps } from "./SeoProps-f2d6dcaa.js";
11
11
  /**
12
12
  * Body text for the blog post, overwrites sections if present
@@ -79,10 +79,6 @@ type VerticalAlignmentOfTheContent = "center" | "top" | "bottom";
79
79
  * Toggle padding of the content
80
80
  */
81
81
  type Padding1 = boolean;
82
- /**
83
- * Toggle inversion of the component
84
- */
85
- type Inverted = boolean;
86
82
  interface CtaProps {
87
83
  headline?: ComponentHeadline;
88
84
  sub?: ComponentSubheadline;
@@ -97,7 +93,6 @@ interface CtaProps {
97
93
  textAlign?: TextAlignment;
98
94
  align?: VerticalAlignmentOfTheContent;
99
95
  padding?: Padding1;
100
- inverted?: Inverted;
101
96
  }
102
97
  interface Button {
103
98
  label?: Label;
@@ -120,4 +115,4 @@ interface Order {
120
115
  mobileImageLast?: MobileImageAfterText;
121
116
  desktopImageLast?: DesktopImageAfterText;
122
117
  }
123
- export { ComponentHeadline, ComponentSubheadline, ComponentText, HighlightText, ColorNeutral, Label, Icon, URL, BackgroundColor, BackgroundImage, ImageSource, Padding, AltText, VerticalAlignmentOfTheImage, MobileImageAfterText, DesktopImageAfterText, TextAlignment, VerticalAlignmentOfTheContent, Padding1, Inverted, CtaProps, Button, Image, Order };
118
+ export { ComponentHeadline, ComponentSubheadline, ComponentText, HighlightText, ColorNeutral, Label, Icon, URL, BackgroundColor, BackgroundImage, ImageSource, Padding, AltText, VerticalAlignmentOfTheImage, MobileImageAfterText, DesktopImageAfterText, TextAlignment, VerticalAlignmentOfTheContent, Padding1, CtaProps, Button, Image, Order };
@@ -71,11 +71,7 @@ type AltText = string;
71
71
  /**
72
72
  * Choose the alginment of the module content
73
73
  */
74
- type ModuleAligment = "center" | "below" | "left" | "right" | "corner";
75
- /**
76
- * Inverted color scheme for the box
77
- */
78
- type Inverted = boolean;
74
+ type ModuleAligment = "center" | "below" | "offset" | "left" | "right" | "corner" | "bottom";
79
75
  interface HeroProps {
80
76
  headline?: Headline;
81
77
  sub?: ModuleSubheadline;
@@ -88,7 +84,6 @@ interface HeroProps {
88
84
  overlay?: GridLayer;
89
85
  image?: BackgroundImage;
90
86
  textPosition?: ModuleAligment;
91
- inverted?: Inverted;
92
87
  }
93
88
  interface Button {
94
89
  label?: Label;
@@ -106,4 +101,4 @@ interface BackgroundImage {
106
101
  indent?: ImageIndent;
107
102
  alt?: AltText;
108
103
  }
109
- export { Headline, ModuleSubheadline, ModuleText, HighlightText, ColorNeutral, Height, Textbox, Label, Icon, URL, GridLayer, MobileImageSource, TabletImageSource, DesktopImageSource, OptionalSource, ImageIndent, AltText, ModuleAligment, Inverted, HeroProps, Button, BackgroundImage };
104
+ export { Headline, ModuleSubheadline, ModuleText, HighlightText, ColorNeutral, Height, Textbox, Label, Icon, URL, GridLayer, MobileImageSource, TabletImageSource, DesktopImageSource, OptionalSource, ImageIndent, AltText, ModuleAligment, HeroProps, Button, BackgroundImage };
@@ -3,18 +3,18 @@
3
3
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
4
4
  * and run json-schema-to-typescript to regenerate this file.
5
5
  */
6
- import { CtaProps } from "./CtaProps-babe4ee6.js";
6
+ import { CtaProps } from "./CtaProps-789f8508.js";
7
7
  import { DividerProps } from "./DividerProps-2ef31901.js";
8
8
  import { FaqProps } from "./FaqProps-ad618cd5.js";
9
9
  import { FeaturesProps } from "./FeaturesProps-a9041d97.js";
10
10
  import { GalleryProps } from "./GalleryProps-76e7de44.js";
11
- import { HeroProps } from "./HeroProps-40f6c7f5.js";
11
+ import { HeroProps } from "./HeroProps-2ff0068e.js";
12
12
  import { HtmlProps } from "./HtmlProps-9d091769.js";
13
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";
17
- import { SliderProps } from "./SliderProps-babe4ee6.js";
17
+ import { SliderProps } from "./SliderProps-789f8508.js";
18
18
  import { StatsProps } from "./StatsProps-bf5ef578.js";
19
19
  import { TeaserCardProps } from "./TeaserCardProps-994cb119.js";
20
20
  import { TestimonialsProps } from "./TestimonialsProps-e344f597.js";
@@ -3,10 +3,10 @@
3
3
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
4
4
  * and run json-schema-to-typescript to regenerate this file.
5
5
  */
6
- import { CtaProps } from "./CtaProps-babe4ee6.js";
6
+ import { CtaProps } from "./CtaProps-789f8508.js";
7
7
  import { FeaturesProps } from "./FeaturesProps-a9041d97.js";
8
8
  import { GalleryProps } from "./GalleryProps-76e7de44.js";
9
- import { HeroProps } from "./HeroProps-40f6c7f5.js";
9
+ import { HeroProps } from "./HeroProps-2ff0068e.js";
10
10
  import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
11
11
  import { LogosProps } from "./LogosProps-f9474fe2.js";
12
12
  import { StatsProps } from "./StatsProps-bf5ef578.js";
@@ -416,12 +416,6 @@
416
416
  "type": "boolean",
417
417
  "default": false
418
418
  },
419
- "inverted": {
420
- "title": "Inverted",
421
- "description": "Toggle inversion of the component",
422
- "type": "boolean",
423
- "default": false
424
- },
425
419
  "type": {
426
420
  "const": "cta"
427
421
  }
@@ -884,19 +878,15 @@
884
878
  "enum": [
885
879
  "center",
886
880
  "below",
881
+ "offset",
887
882
  "left",
888
883
  "right",
889
- "corner"
884
+ "corner",
885
+ "bottom"
890
886
  ],
891
887
  "type": "string",
892
888
  "default": "bottom"
893
889
  },
894
- "inverted": {
895
- "type": "boolean",
896
- "title": "Inverted",
897
- "description": "Inverted color scheme for the box",
898
- "default": false
899
- },
900
890
  "type": {
901
891
  "const": "hero"
902
892
  }
@@ -1712,12 +1702,6 @@
1712
1702
  "type": "boolean",
1713
1703
  "default": false
1714
1704
  },
1715
- "inverted": {
1716
- "title": "Inverted",
1717
- "description": "Toggle inversion of the component",
1718
- "type": "boolean",
1719
- "default": false
1720
- },
1721
1705
  "type": {
1722
1706
  "const": "cta"
1723
1707
  }
@@ -2097,19 +2081,15 @@
2097
2081
  "enum": [
2098
2082
  "center",
2099
2083
  "below",
2084
+ "offset",
2100
2085
  "left",
2101
2086
  "right",
2102
- "corner"
2087
+ "corner",
2088
+ "bottom"
2103
2089
  ],
2104
2090
  "type": "string",
2105
2091
  "default": "bottom"
2106
2092
  },
2107
- "inverted": {
2108
- "type": "boolean",
2109
- "title": "Inverted",
2110
- "description": "Inverted color scheme for the box",
2111
- "default": false
2112
- },
2113
2093
  "type": {
2114
2094
  "const": "hero"
2115
2095
  }
@@ -3915,12 +3895,6 @@
3915
3895
  "type": "boolean",
3916
3896
  "default": false
3917
3897
  },
3918
- "inverted": {
3919
- "title": "Inverted",
3920
- "description": "Toggle inversion of the component",
3921
- "type": "boolean",
3922
- "default": false
3923
- },
3924
3898
  "type": {
3925
3899
  "const": "cta"
3926
3900
  }
@@ -700,12 +700,6 @@
700
700
  "type": "boolean",
701
701
  "default": false
702
702
  },
703
- "inverted": {
704
- "title": "Inverted",
705
- "description": "Toggle inversion of the component",
706
- "type": "boolean",
707
- "default": false
708
- },
709
703
  "type": {
710
704
  "const": "cta"
711
705
  }
@@ -1168,19 +1162,15 @@
1168
1162
  "enum": [
1169
1163
  "center",
1170
1164
  "below",
1165
+ "offset",
1171
1166
  "left",
1172
1167
  "right",
1173
- "corner"
1168
+ "corner",
1169
+ "bottom"
1174
1170
  ],
1175
1171
  "type": "string",
1176
1172
  "default": "bottom"
1177
1173
  },
1178
- "inverted": {
1179
- "type": "boolean",
1180
- "title": "Inverted",
1181
- "description": "Inverted color scheme for the box",
1182
- "default": false
1183
- },
1184
1174
  "type": {
1185
1175
  "const": "hero"
1186
1176
  }
@@ -1996,12 +1986,6 @@
1996
1986
  "type": "boolean",
1997
1987
  "default": false
1998
1988
  },
1999
- "inverted": {
2000
- "title": "Inverted",
2001
- "description": "Toggle inversion of the component",
2002
- "type": "boolean",
2003
- "default": false
2004
- },
2005
1989
  "type": {
2006
1990
  "const": "cta"
2007
1991
  }
@@ -2381,19 +2365,15 @@
2381
2365
  "enum": [
2382
2366
  "center",
2383
2367
  "below",
2368
+ "offset",
2384
2369
  "left",
2385
2370
  "right",
2386
- "corner"
2371
+ "corner",
2372
+ "bottom"
2387
2373
  ],
2388
2374
  "type": "string",
2389
2375
  "default": "bottom"
2390
2376
  },
2391
- "inverted": {
2392
- "type": "boolean",
2393
- "title": "Inverted",
2394
- "description": "Inverted color scheme for the box",
2395
- "default": false
2396
- },
2397
2377
  "type": {
2398
2378
  "const": "hero"
2399
2379
  }
@@ -3682,12 +3662,6 @@
3682
3662
  "type": "boolean",
3683
3663
  "default": false
3684
3664
  },
3685
- "inverted": {
3686
- "title": "Inverted",
3687
- "description": "Toggle inversion of the component",
3688
- "type": "boolean",
3689
- "default": false
3690
- },
3691
3665
  "type": {
3692
3666
  "const": "cta"
3693
3667
  }
@@ -1,8 +1,8 @@
1
1
  .dsa-button {
2
- --dsa-button--padding: 0.65em 1.5em;
2
+ --dsa-button--padding: 0.75em 1.5em;
3
3
  --dsa-button--border-width: var(--ks-border-width-default);
4
4
  --dsa-button--border-radius: var(--ks-border-radius-control);
5
- --dsa-button--font-weight: var(--ks-font-weight-regular);
5
+ --dsa-button--font-weight: var(--ks-font-weight-semi-bold);
6
6
  --dsa-button--text-transform: default;
7
7
  --dsa-button_small--font: var(--ks-font-interface-s);
8
8
  --dsa-button_medium--font: var(--ks-font-interface-m);
@@ -165,12 +165,6 @@
165
165
  "type": "boolean",
166
166
  "default": false
167
167
  },
168
- "inverted": {
169
- "title": "Inverted",
170
- "description": "Toggle inversion of the component",
171
- "type": "boolean",
172
- "default": false
173
- },
174
168
  "type": {
175
169
  "const": "cta"
176
170
  }
@@ -131,12 +131,6 @@
131
131
  "description": "Toggle padding of the content",
132
132
  "type": "boolean",
133
133
  "default": false
134
- },
135
- "inverted": {
136
- "title": "Inverted",
137
- "description": "Toggle inversion of the component",
138
- "type": "boolean",
139
- "default": false
140
134
  }
141
135
  },
142
136
  "additionalProperties": false
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import { HTMLAttributes } from "react";
3
- import { CtaProps } from "../../CtaProps-babe4ee6.js";
3
+ import { CtaProps } from "../../CtaProps-789f8508.js";
4
4
  declare const CtaContextDefault: import("react").ForwardRefExoticComponent<CtaProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
5
5
  declare const CtaContext: import("react").Context<import("react").ForwardRefExoticComponent<CtaProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
6
6
  declare const Cta: import("react").ForwardRefExoticComponent<CtaProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
@@ -8,7 +8,7 @@ import { useButtonGroup } from '../button-group/index.js';
8
8
  import { Container } from '@kickstartds/core/lib/container';
9
9
  import '@kickstartds/base/lib/button-group';
10
10
 
11
- const CtaContextDefault = forwardRef(({ headline, highlightText = false, sub, image, text, textAlign, backgroundImage, backgroundColor, colorNeutral, align, padding, order, buttons = [], inverted = false, ...rest }, ref) => {
11
+ const CtaContextDefault = forwardRef(({ headline, highlightText = false, sub, image, text, textAlign, backgroundImage, backgroundColor, colorNeutral, align, padding, order, buttons = [], ...rest }, ref) => {
12
12
  const ButtonGroup = useButtonGroup();
13
13
  return (jsx(ButtonContext.Provider
14
14
  // @ts-expect-error
@@ -10,7 +10,7 @@
10
10
  --dsa-footer__link--font-weight: var(--dsa-link--font-weight);
11
11
  --dsa-footer__link--color: var(--dsa-link--color);
12
12
  --dsa-footer__link--text-tecoration: none;
13
- --dsa-footer__link--text-tecoration_hover: none;
13
+ --dsa-footer__link--text-tecoration_hover: underline;
14
14
  --dsa-footer__logo--height: 1.5rem;
15
15
  }
16
16
  @media (min-width: 62em) {
@@ -107,51 +107,43 @@
107
107
  "examples": [
108
108
  [
109
109
  {
110
- "label": "Fahrzeugsuche",
110
+ "label": "Active Item",
111
111
  "url": "#",
112
112
  "active": true
113
113
  },
114
114
  {
115
- "label": "Marken",
115
+ "label": "Navigation Item",
116
+ "url": "#"
117
+ },
118
+ {
119
+ "label": "Dropdown",
116
120
  "url": "#",
117
121
  "items": [
118
122
  {
119
- "label": "Nissan",
123
+ "label": "Level 2 Item",
120
124
  "url": "#"
121
125
  },
122
126
  {
123
- "label": "Kia",
127
+ "label": "Active Item",
124
128
  "active": true,
125
129
  "url": "#"
126
130
  },
127
131
  {
128
- "label": "Maserati",
132
+ "label": "An Item with a longer Label",
129
133
  "url": "#"
130
134
  },
131
135
  {
132
- "label": "Corvette",
136
+ "label": "And One last one",
133
137
  "url": "#"
134
138
  }
135
139
  ]
136
140
  },
137
141
  {
138
- "label": "Standorte",
139
- "url": "#"
140
- },
141
- {
142
- "label": "Bonusprogramm",
143
- "url": "#"
144
- },
145
- {
146
- "label": "News",
147
- "url": "#"
148
- },
149
- {
150
- "label": "Jobs",
142
+ "label": "One more Item",
151
143
  "url": "#"
152
144
  },
153
145
  {
154
- "label": "Kontakt",
146
+ "label": "Last Item",
155
147
  "url": "#"
156
148
  }
157
149
  ]
@@ -120,51 +120,43 @@
120
120
  "examples": [
121
121
  [
122
122
  {
123
- "label": "Fahrzeugsuche",
123
+ "label": "Active Item",
124
124
  "url": "#",
125
125
  "active": true
126
126
  },
127
127
  {
128
- "label": "Marken",
128
+ "label": "Navigation Item",
129
+ "url": "#"
130
+ },
131
+ {
132
+ "label": "Dropdown",
129
133
  "url": "#",
130
134
  "items": [
131
135
  {
132
- "label": "Nissan",
136
+ "label": "Level 2 Item",
133
137
  "url": "#"
134
138
  },
135
139
  {
136
- "label": "Kia",
140
+ "label": "Active Item",
137
141
  "active": true,
138
142
  "url": "#"
139
143
  },
140
144
  {
141
- "label": "Maserati",
145
+ "label": "An Item with a longer Label",
142
146
  "url": "#"
143
147
  },
144
148
  {
145
- "label": "Corvette",
149
+ "label": "And One last one",
146
150
  "url": "#"
147
151
  }
148
152
  ]
149
153
  },
150
154
  {
151
- "label": "Standorte",
152
- "url": "#"
153
- },
154
- {
155
- "label": "Bonusprogramm",
156
- "url": "#"
157
- },
158
- {
159
- "label": "News",
160
- "url": "#"
161
- },
162
- {
163
- "label": "Jobs",
155
+ "label": "One more Item",
164
156
  "url": "#"
165
157
  },
166
158
  {
167
- "label": "Kontakt",
159
+ "label": "Last Item",
168
160
  "url": "#"
169
161
  }
170
162
  ]
@@ -20,24 +20,19 @@
20
20
  --dsa-hero__textbox--border-radius: var(--ks-border-radius-card);
21
21
  --dsa-hero__textbox--max-width: var(--dsa-content--width_narrow);
22
22
  --dsa-hero__textbox--padding: var(--ks-spacing-inset-squish-xl);
23
- --dsa-hero_below__textbox--max-width: var(--dsa-content--width_default);
24
- --dsa-hero_below__textbox--offset: -10%;
25
23
  --dsa-hero__overlay--background: radial-gradient(
26
24
  50% 125% at 100% 0%,
27
25
  var(--ks-color-primary-alpha-5) 0%,
28
- var(--ks-color-fg-inverted-alpha-5) 100%
26
+ var(--ks-color-bg-alpha-4) 100%
29
27
  );
30
- --dsa-hero--below__overlay--background: linear-gradient(
28
+ --dsa-hero_offset__textbox--max-width: var(--dsa-content--width_default);
29
+ --dsa-hero_offset__textbox--offset: -10%;
30
+ --dsa-hero_offset__overlay--background: linear-gradient(
31
31
  0deg,
32
32
  var(--ks-background-color-default) 15%,
33
33
  transparent 50%
34
34
  );
35
- --dsa-hero--left__overlay--background: radial-gradient(
36
- var(--dsa-hero__textbox--max-width) var(--dsa-hero__textbox--max-width) at
37
- calc(var(--dsa-section__content--padding) * 2) 50%,
38
- var(--ks-color-bg) 100%,
39
- var(--ks-color-primary-alpha-5) 100%
40
- );
35
+ --dsa-hero_below__textbox--max-width: var(--dsa-content--width_default);
41
36
  }
42
37
  @container hero (min-width: 640px) {
43
38
  .dsa-hero {
@@ -98,15 +93,9 @@
98
93
  radial-gradient(50% 125% at 100% 0%, var(--ks-color-primary-alpha-5) 0%, var(--ks-color-bg-alpha-4) 100%)
99
94
  );
100
95
  }
101
- .c-visual.dsa-hero.dsa-hero--content-below {
96
+ .c-visual.dsa-hero.dsa-hero--content-offset {
102
97
  --c-visual_overlay--background: var(
103
- --dsa-hero--below__overlay--background,
104
- linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%)
105
- );
106
- }
107
- .c-visual.dsa-hero.dsa-hero--content-left {
108
- --c-visual_overlay--background: var(
109
- --dsa-hero--left__overlay--background,
98
+ --dsa-hero--offset__overlay--background,
110
99
  linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%)
111
100
  );
112
101
  }
@@ -144,40 +133,47 @@
144
133
  filter: drop-shadow(var(--dsa-overlay-text--shadow, 0 0 10px var(--ks-color-bg-inverted-alpha-3-base)));
145
134
  }
146
135
  @container hero (min-width: 640px) {
147
- .c-visual.dsa-hero.dsa-hero--content-below .c-visual__media {
136
+ .c-visual.dsa-hero.dsa-hero--content-below .c-visual__media, .c-visual.dsa-hero.dsa-hero--content-offset .c-visual__media {
148
137
  position: relative;
149
138
  }
150
- .c-visual.dsa-hero.dsa-hero--content-below .c-visual__media .c-visual__image {
139
+ .c-visual.dsa-hero.dsa-hero--content-below .c-visual__media .c-visual__image, .c-visual.dsa-hero.dsa-hero--content-offset .c-visual__media .c-visual__image {
151
140
  height: var(--c-visual--min-height);
152
141
  }
153
- .c-visual.dsa-hero.dsa-hero--content-below .c-visual__content {
154
- padding: 0 var(--dsa-content--horizontal-spacing);
155
- margin-top: var(--dsa-hero_below__textbox--offset, -10%);
142
+ .c-visual.dsa-hero.dsa-hero--content-below .c-visual__content, .c-visual.dsa-hero.dsa-hero--content-offset .c-visual__content {
156
143
  position: relative;
157
144
  }
145
+ .c-visual.dsa-hero.dsa-hero--content-below .c-visual__content .c-visual__box, .c-visual.dsa-hero.dsa-hero--content-offset .c-visual__content .c-visual__box {
146
+ --c-visual_box--max-width: var(--dsa-hero_below__textbox--max-width, var(--dsa-content--width_default));
147
+ }
158
148
  .c-visual.dsa-hero.dsa-hero--content-below .c-visual__content .c-visual__box {
159
149
  --c-visual_box--max-width: var(--dsa-hero_below__textbox--max-width, var(--dsa-content--width_default));
160
150
  }
151
+ .c-visual.dsa-hero.dsa-hero--content-offset .c-visual__content {
152
+ margin-top: var(--dsa-hero_offset__textbox--offset, -10%);
153
+ }
154
+ .c-visual.dsa-hero.dsa-hero--content-offset .c-visual__content .c-visual__box {
155
+ --c-visual_box--max-width: var(--dsa-hero_offset__textbox--max-width, var(--dsa-content--width_default));
156
+ }
161
157
  .c-visual.dsa-hero.c-visual--no-crop {
162
158
  --c-visual--min-height: 0;
163
159
  }
164
160
  @container hero (min-width: 640px) {
165
- .c-visual.dsa-hero.dsa-hero--content-below.c-visual--no-crop .c-visual__media .c-visual__image {
161
+ .c-visual.dsa-hero.dsa-hero--content-below.c-visual--no-crop .c-visual__media .c-visual__image, .c-visual.dsa-hero.dsa-hero--content-offset.c-visual--no-crop .c-visual__media .c-visual__image {
166
162
  height: fit-content;
167
163
  }
168
- .c-visual.dsa-hero.dsa-hero--content-below.c-visual--no-crop .c-visual__media .c-visual__image img {
164
+ .c-visual.dsa-hero.dsa-hero--content-below.c-visual--no-crop .c-visual__media .c-visual__image img, .c-visual.dsa-hero.dsa-hero--content-offset.c-visual--no-crop .c-visual__media .c-visual__image img {
169
165
  object-fit: contain;
170
166
  height: auto;
171
167
  }
172
168
  }
173
- .c-visual.dsa-hero.dsa-hero--content-below.c-visual--full {
169
+ .c-visual.dsa-hero.dsa-hero--content-below.c-visual--full, .c-visual.dsa-hero.dsa-hero--content-offset.c-visual--full {
174
170
  height: fit-content;
175
171
  }
176
172
  @container hero (min-width: 640px) {
177
- .c-visual.dsa-hero.dsa-hero--content-below.c-visual--full .c-visual__media .c-visual__image {
173
+ .c-visual.dsa-hero.dsa-hero--content-below.c-visual--full .c-visual__media .c-visual__image, .c-visual.dsa-hero.dsa-hero--content-offset.c-visual--full .c-visual__media .c-visual__image {
178
174
  height: fit-content;
179
175
  }
180
- .c-visual.dsa-hero.dsa-hero--content-below.c-visual--full .c-visual__media .c-visual__image img {
176
+ .c-visual.dsa-hero.dsa-hero--content-below.c-visual--full .c-visual__media .c-visual__image img, .c-visual.dsa-hero.dsa-hero--content-offset.c-visual--full .c-visual__media .c-visual__image img {
181
177
  object-fit: cover;
182
178
  height: 100vh;
183
179
  }
@@ -156,19 +156,15 @@
156
156
  "enum": [
157
157
  "center",
158
158
  "below",
159
+ "offset",
159
160
  "left",
160
161
  "right",
161
- "corner"
162
+ "corner",
163
+ "bottom"
162
164
  ],
163
165
  "type": "string",
164
166
  "default": "bottom"
165
167
  },
166
- "inverted": {
167
- "type": "boolean",
168
- "title": "Inverted",
169
- "description": "Inverted color scheme for the box",
170
- "default": false
171
- },
172
168
  "type": {
173
169
  "const": "hero"
174
170
  }
@@ -73,15 +73,17 @@
73
73
  "textPosition": {
74
74
  "title": "Module aligment",
75
75
  "description": "Choose the alginment of the module content",
76
- "enum": ["center", "below", "left", "right", "corner"],
76
+ "enum": [
77
+ "center",
78
+ "below",
79
+ "offset",
80
+ "left",
81
+ "right",
82
+ "corner",
83
+ "bottom"
84
+ ],
77
85
  "type": "string",
78
86
  "default": "bottom"
79
- },
80
- "inverted": {
81
- "type": "boolean",
82
- "title": "Inverted",
83
- "description": "Inverted color scheme for the box",
84
- "default": false
85
87
  }
86
88
  },
87
89
  "additionalProperties": false
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import { HTMLAttributes } from "react";
3
- import { HeroProps } from "../../HeroProps-40f6c7f5.js";
3
+ import { HeroProps } from "../../HeroProps-2ff0068e.js";
4
4
  declare const HeroContextDefault: import("react").ForwardRefExoticComponent<HeroProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
5
5
  declare const HeroContext: import("react").Context<import("react").ForwardRefExoticComponent<HeroProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
6
6
  declare const Hero: import("react").ForwardRefExoticComponent<HeroProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;