@kickstartds/ds-agency-premium 1.6.71--canary.45.1819.0 → 1.6.71--canary.45.1824.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 (22) hide show
  1. package/dist/components/contact/contact.css +0 -8
  2. package/dist/components/cta/cta.css +4 -15
  3. package/dist/components/event-registration/event-registration.css +17 -5
  4. package/dist/components/event-registration/index.js +1 -1
  5. package/dist/components/headline/headline.css +26 -34
  6. package/dist/components/mosaic/mosaic.css +0 -2
  7. package/dist/components/page-wrapper/index.js +8 -0
  8. package/dist/components/page-wrapper/tokens.css +3 -3
  9. package/dist/components/presets.json +22 -8
  10. package/dist/components/search-bar/index.d.ts +35 -0
  11. package/dist/components/search-bar/index.js +17 -0
  12. package/dist/components/search-bar/search-bar.css +33 -0
  13. package/dist/components/search-bar/search-bar.schema.dereffed.json +48 -0
  14. package/dist/components/search-bar/search-bar.schema.json +35 -0
  15. package/dist/global.css +1 -1
  16. package/dist/static/img/people/contact-person.png +0 -0
  17. package/dist/tokens/IconSprite.js +8 -0
  18. package/dist/tokens/icon-sprite.html +2 -0
  19. package/dist/tokens/themes.css +4 -4
  20. package/dist/tokens/tokens.css +3 -3
  21. package/dist/tokens/tokens.js +4 -3
  22. package/package.json +1 -1
package/dist/components/contact/contact.css CHANGED
@@ -124,12 +124,4 @@
124
124
  .dsa-contact a.dsa-contact__link:hover {
125
125
  color: var(--dsa-contact__link--color_hover);
126
126
  text-decoration: var(--dsa-contact__link--text-decoration_hover);
127
- }
128
- .dsa-contact .c-headline {
129
- --c-headline--color: var(--dsa-contact__headline--color);
130
- --c-headline--font: var(--dsa-contact__headline--font);
131
- --c-headline--font-weight: var(--dsa-contact__headline--font-weight);
132
- --c-headline__subheadline--color: var(--dsa-contact__headline__subheadline--color);
133
- --c-headline__subheadline--font: var(--dsa-contact__headline__subheadline--font);
134
- --c-headline__subheadline--font-weight: var(--dsa-contact__headline__subheadline--font-weight);
135
127
  }
package/dist/components/cta/cta.css CHANGED
@@ -3,19 +3,16 @@
3
3
  --dsa-cta--border-radius: var(--ks-border-radius-surface);
4
4
  --dsa-cta__content--vertical-padding: var(--dsa-content--vertical-spacing);
5
5
  --dsa-cta__content--horizontal-padding: var(--dsa-content--horizontal-spacing);
6
- --dsa-cta__content--max-width: var(--dsa-content--width_narrow);
7
- --dsa-cta__copy--font: var(--ks-font-copy-m);
8
- --dsa-cta__copy--color: var(--ks-text-color-default);
6
+ --dsa-cta__content--max-width: var(--dsa-tile--width_largest);
9
7
  --dsa-cta__headline--color: var(--dsa-headline--color);
10
- --dsa-cta__headline--font: var(--dsa-headline_h2--font);
11
8
  --dsa-cta__subheadline--color: var(--dsa-headline__subheadline--color);
12
- --dsa-cta__subheadline--font: var(--dsa-headline_h2__subheadline--font);
9
+ --dsa-cta__copy--font: var(--ks-font-copy-m);
10
+ --dsa-cta__copy--color: var(--ks-text-color-default);
13
11
  --dsa-cta__image--padding: var(--ks-spacing-inset-m);
14
12
  --dsa-cta_color-neutral__headline--color: var(--ks-text-color-default);
15
13
  --dsa-cta_color-neutral__subheadline--color: var(--ks-text-color-default);
16
14
  --dsa-cta_color-neutral__copy--color: var(--ks-text-color-default);
17
15
  --dsa-cta_highlight-text__headline--font: var(--dsa-headline_h1--font);
18
- --dsa-cta_highlight-text__subheadline--font: var(--dsa-headline_h1__subheadline--font);
19
16
  --dsa-cta_highlight-text__copy--font: var(--ks-font-copy-l);
20
17
  }
21
18
 
@@ -38,10 +35,6 @@
38
35
  .dsa-cta.c-storytelling.dsa-cta--highlight-text {
39
36
  --dsa-cta__copy--font: var(--dsa-cta_highlight-text__copy--font, var(--ks-font-copy-l));
40
37
  --dsa-cta__headline--font: var(--dsa-cta_highlight-text__headline--font, var(--dsa-headline_h1--font));
41
- --dsa-cta__subheadline--font: var(
42
- --dsa-cta_highlight-text__subheadline--font,
43
- var(--dsa-headline_h1__subheadline--font)
44
- );
45
38
  }
46
39
  .dsa-cta.c-storytelling.dsa-cta--no-padding .c-storytelling__box {
47
40
  padding: 0;
@@ -53,7 +46,7 @@
53
46
  width: auto;
54
47
  }
55
48
  .dsa-cta.c-storytelling .c-storytelling__box__content {
56
- max-width: var(--dsa-cta__content--max-width, var(--dsa-content--width_narrow));
49
+ max-width: var(--dsa-cta__content--max-width, var(--dsa-tile--width_largest));
57
50
  }
58
51
  .dsa-cta.c-storytelling .c-storytelling__box:only-child {
59
52
  --c-storytelling--horizontal-padding: var(--dsa-cta__content--horizontal-padding);
@@ -62,14 +55,10 @@
62
55
  max-width: 100%;
63
56
  }
64
57
  .dsa-cta.c-storytelling .c-storytelling__box .dsa-headline__headline {
65
- font: var(--dsa-cta__headline--font, var(--dsa-headline_h2--font, var(--ks-font-display-xl)));
66
58
  color: var(--dsa-cta__headline--color, var(--ks-text-color-display));
67
- font-weight: var(--dsa-headline--font-weight, var(--ks-font-weight-semi-bold));
68
59
  }
69
60
  .dsa-cta.c-storytelling .c-storytelling__box .dsa-headline__subheadline {
70
- font: var(--dsa-cta__subheadline--font, var(--dsa-headline_h2__subheadline--font, var(--ks-font-display-xl)));
71
61
  color: var(--dsa-cta__subheadline--color, var(--ks-text-color-primary));
72
- font-weight: var(--dsa-headline__subheadline--font-weight, var(--ks-font-weight-medium));
73
62
  }
74
63
  .dsa-cta.c-storytelling .c-storytelling__box .c-rich-text {
75
64
  font: var(--dsa-cta__copy--font, var(--ks-font-copy-m));
package/dist/components/event-registration/event-registration.css CHANGED
@@ -2,9 +2,9 @@
2
2
  display: flex;
3
3
  flex-direction: column;
4
4
  gap: var(--ks-spacing-stack-s);
5
- }
6
- .dsa-event-registration__label {
7
- font: var(--dsa-headline_h2__subheadline--font);
5
+ max-width: 500px;
6
+ margin: auto;
7
+ margin-top: 200px;
8
8
  }
9
9
  .dsa-event-registration__link {
10
10
  width: fit-content;
@@ -66,14 +66,26 @@
66
66
  .dsa-event-registration__form {
67
67
  display: flex;
68
68
  flex-direction: column;
69
- gap: var(--ks-spacing-stack-xs);
69
+ gap: var(--ks-spacing-stack-s);
70
70
  }
71
71
  .dsa-event-registration__form .c-button {
72
72
  align-self: flex-end;
73
73
  }
74
+ .dsa-event-registration__inputs {
75
+ display: flex;
76
+ flex-direction: column;
77
+ gap: var(--ks-spacing-stack-s);
78
+ }
79
+ .dsa-event-registration__footer {
80
+ display: flex;
81
+ justify-content: space-between;
82
+ align-items: flex-start;
83
+ flex-wrap: wrap;
84
+ gap: var(--ks-spacing-stack-xs) var(--ks-spacing-inline-m);
85
+ }
74
86
  .dsa-event-registration__mandatory-text {
75
87
  font: var(--ks-font-interface-xs);
76
88
  color: var(--ks-color-fg-alpha-4);
77
- margin-top: var(--ks-spacing-xxs);
78
89
  font-style: italic;
90
+ flex-basis: var(--dsa-tile--width_small);
79
91
  }
package/dist/components/event-registration/index.js CHANGED
@@ -12,7 +12,7 @@ import 'classnames';
12
12
  import '@kickstartds/base/lib/headline';
13
13
  import '@kickstartds/base/lib/button';
14
14
 
15
- const EventRegistrationContextDefault = forwardRef(({ date, time, title, link, label, location, nameInput, emailInput, mandatoryText, cta, confirmationCheckboxLabel, }, ref) => (jsxs("div", { ref: ref, className: "dsa-event-registration", children: [jsx(Headline, { spaceAfter: "minimum", text: title, level: "h2", sub: label, switchOrder: true }), jsxs("div", { className: "dsa-event-registration__infos", children: [jsxs("div", { className: "dsa-event-registration__details", children: [jsxs("div", { className: "dsa-event-registration__date", children: [jsxs("span", { className: "dsa-event-registration__info", children: [jsx(Icon, { "aria-hidden": true, icon: "date" }), date] }), jsxs("span", { className: "dsa-event-registration__info", children: [jsx(Icon, { "aria-hidden": true, icon: "time" }), time] })] }), jsxs("div", { className: "dsa-event-registration__location dsa-event-registration__info", children: [jsx(Icon, { "aria-hidden": true, icon: "map-pin" }), jsxs("address", { children: [location?.name && (jsx("span", { className: "dsa-event-registration__location-name", children: location.name })), jsx(Markdown, { className: "dsa-event-registration__location-address", children: location?.address })] })] })] }), jsx(Link, { className: "dsa-event-registration__link", href: link?.url, children: link?.text })] }), jsxs("form", { className: "dsa-event-registration__form", children: [jsx(TextField, { label: nameInput.label, placeholder: nameInput?.placeholder }), jsx(TextField, { type: "email", label: emailInput.label, placeholder: emailInput?.placeholder }), jsx(Checkbox, { label: confirmationCheckboxLabel, name: "confirmation-checkbox", id: "confirmation-checkbox" }), jsx(Markdown, { className: "dsa-event-registration__mandatory-text", children: mandatoryText }), jsx(Button, { label: cta.label, url: cta.url, "aria-label": cta?.ariaLabel, variant: "primary", size: "small" })] })] })));
15
+ const EventRegistrationContextDefault = forwardRef(({ date, time, title, link, label, location, nameInput, emailInput, mandatoryText, cta, confirmationCheckboxLabel, }, ref) => (jsxs("div", { ref: ref, className: "dsa-event-registration", children: [jsx(Headline, { spaceAfter: "minimum", text: title, level: "h2", sub: label, switchOrder: true }), jsxs("div", { className: "dsa-event-registration__infos", children: [jsxs("div", { className: "dsa-event-registration__details", children: [jsxs("div", { className: "dsa-event-registration__date", children: [jsxs("span", { className: "dsa-event-registration__info", children: [jsx(Icon, { "aria-hidden": true, icon: "date" }), date] }), jsxs("span", { className: "dsa-event-registration__info", children: [jsx(Icon, { "aria-hidden": true, icon: "time" }), time] })] }), jsxs("div", { className: "dsa-event-registration__location dsa-event-registration__info", children: [jsx(Icon, { "aria-hidden": true, icon: "map-pin" }), jsxs("address", { children: [location?.name && (jsx("span", { className: "dsa-event-registration__location-name", children: location.name })), jsx(Markdown, { className: "dsa-event-registration__location-address", children: location?.address })] })] })] }), jsx(Link, { className: "dsa-event-registration__link", href: link?.url, children: link?.text })] }), jsxs("form", { className: "dsa-event-registration__form", children: [jsxs("div", { className: "dsa-event-registration__inputs", children: [jsx(TextField, { label: nameInput.label, placeholder: nameInput?.placeholder }), jsx(TextField, { type: "email", label: emailInput.label, placeholder: emailInput?.placeholder }), jsx(Checkbox, { label: confirmationCheckboxLabel, name: "confirmation-checkbox", id: "confirmation-checkbox" })] }), jsxs("div", { className: "dsa-event-registration__footer", children: [jsx(Markdown, { className: "dsa-event-registration__mandatory-text", children: mandatoryText }), jsx(Button, { label: cta.label, url: cta.url, "aria-label": cta?.ariaLabel, variant: "primary", size: "small" })] })] })] })));
16
16
  const EventRegistrationContext = createContext(EventRegistrationContextDefault);
17
17
  const EventRegistration = forwardRef((props, ref) => {
18
18
  const Component = useContext(EventRegistrationContext);
package/dist/components/headline/headline.css CHANGED
@@ -7,45 +7,37 @@
7
7
  --dsa-headline--space-after_small: var(--ks-spacing-stack-m);
8
8
  --dsa-headline--space-after_minimum: var(--ks-spacing-stack-s);
9
9
  --dsa-headline--higlight-background: var(--dsa-typo--highlight);
10
- --dsa-headline__subheadline--color: var(--ks-text-color-primary);
11
- --dsa-headline__subheadline--font-weight: var(--ks-font-weight-semi-bold);
10
+ --dsa-headline__subheadline--color: var(--ks-color-fg-alpha-4);
11
+ --dsa-headline__subheadline--font-weight: var(--ks-font-weight-bold);
12
+ --dsa-headline__subheadline--text-transform: uppercase;
13
+ --dsa-headline__subheadline--letter-spacing: 0.045em;
14
+ --dsa-headline__subheadline--font-family: var(--ks-font-family-display);
12
15
  --dsa-headline_h1--font: var(--ks-font-display-xxl);
13
- --dsa-headline_h1__subheadline--font: var(--ks-font-copy-l);
16
+ --dsa-headline_h1__subheadline--font-size: 50%;
14
17
  --dsa-headline_h1--space-after_large: var(--ks-spacing-stack-l);
15
18
  --dsa-headline_h1--space-after_small: var(--ks-spacing-stack-m);
16
19
  --dsa-headline_h1--space-after_minimum: var(--ks-spacing-stack-s);
17
20
  --dsa-headline_h2--font: var(--ks-font-display-xl);
18
- --dsa-headline_h2__subheadline--font: var(--ks-font-copy-m);
21
+ --dsa-headline_h2__subheadline--font-size: 50%;
19
22
  --dsa-headline_h2--space-after_large: var(--ks-spacing-stack-l);
20
23
  --dsa-headline_h2--space-after_small: var(--ks-spacing-stack-m);
21
24
  --dsa-headline_h2--space-after_minimum: 0;
22
25
  --dsa-headline_h3--font: var(--ks-font-display-l);
23
- --dsa-headline_h3__subheadline--font: var(--ks-font-copy-m);
26
+ --dsa-headline_h3__subheadline--font-size: 50%;
24
27
  --dsa-headline_h3--space-after_large: var(--ks-spacing-stack-m);
25
28
  --dsa-headline_h3--space-after_small: var(--ks-spacing-stack-s);
26
29
  --dsa-headline_h3--space-after_minimum: 0;
27
30
  --dsa-headline_h4--font: var(--ks-font-display-m);
28
- --dsa-headline_h4__subheadline--font: var(--ks-font-copy-s);
31
+ --dsa-headline_h4__subheadline--font-size: 75%;
29
32
  --dsa-headline_h4--space-after_large: var(--ks-spacing-stack-m);
30
33
  --dsa-headline_h4--space-after_small: var(--ks-spacing-stack-s);
31
34
  --dsa-headline_h4--space-after_minimum: 0;
32
35
  --dsa-headline_p--font: var(--ks-font-copy-m);
33
- --dsa-headline__subheadline_p--font: var(--ks-font-copy-s);
34
- --dsa-headline_p__subheadline--font: var(--ks-font-copy-s);
36
+ --dsa-headline_p__subheadline--font-size: 75%;
35
37
  --dsa-headline_p--space-after_large: var(--ks-spacing-stack-xs);
36
38
  --dsa-headline_p--space-after_small: var(--ks-spacing-xxs);
37
39
  --dsa-headline_p--space-after_minimum: 0;
38
40
  }
39
- @media (min-width: 48em) {
40
- :root, [ks-inverted], [ks-theme] {
41
- --dsa-headline_h1__subheadline--font: var(--ks-font-copy-xl);
42
- }
43
- }
44
- @media (min-width: 48em) {
45
- :root, [ks-inverted], [ks-theme] {
46
- --dsa-headline_h2__subheadline--font: var(--ks-font-copy-l);
47
- }
48
- }
49
41
 
50
42
  .dsa-headline {
51
43
  max-width: unset;
@@ -65,57 +57,57 @@
65
57
  .dsa-headline:hover .dsa-headline__anchor {
66
58
  visibility: visible;
67
59
  }
68
- .dsa-headline .dsa-headline__headline {
69
- font: var(--headline--font);
70
- text-transform: var(--dsa-headline--text-transform);
71
- }
72
60
  .dsa-headline--h1 {
73
- --headline--font: var(--dsa-headline_h1--font, var(--ks-font-display-xxl));
74
- --subheadline--font: var(--dsa-headline_h1__subheadline--font, var(--ks-font-copy-xl));
61
+ font: var(--dsa-headline_h1--font, var(--ks-font-display-xxl));
62
+ --subheadline--font-size: var(--dsa-headline_h1--font-size, 50%);
75
63
  --headline--space-after_minimum: var(--dsa-headline_h1--space-after_minimum);
76
64
  --headline--space-after_small: var(--dsa-headline_h1--space-after_small);
77
65
  --headline--space-after_large: var(--dsa-headline_h1--space-after_large);
78
66
  }
79
67
  .dsa-headline--h2 {
80
- --headline--font: var(--dsa-headline_h2--font, var(--ks-font-display-xl));
81
- --subheadline--font: var(--dsa-headline_h2__subheadline--font, var(--ks-font-copy-l));
68
+ font: var(--dsa-headline_h2--font, var(--ks-font-display-xl));
69
+ --subheadline--font-size: var(--dsa-headline_h2__subheadline--font-size, 50%);
82
70
  --headline--space-after_minimum: var(--dsa-headline_h2--space-after_minimum);
83
71
  --headline--space-after_small: var(--dsa-headline_h2--space-after_small);
84
72
  --headline--space-after_large: var(--dsa-headline_h2--space-after_large);
85
73
  }
86
74
  .dsa-headline--h3 {
87
- --headline--font: var(--dsa-headline_h3--font, var(--ks-font-display-l));
88
- --subheadline--font: var(--dsa-headline_h3__subheadline--font, var(--ks-font-copy-l));
75
+ font: var(--dsa-headline_h3--font, var(--ks-font-display-l));
76
+ --subheadline--font-size: var(--dsa-headline_h3__subheadline--font-size, 50%);
89
77
  --headline--space-after_minimum: var(--dsa-headline_h3--space-after_minimum);
90
78
  --headline--space-after_small: var(--dsa-headline_h3--space-after_small);
91
79
  --headline--space-after_large: var(--dsa-headline_h3--space-after_large);
92
80
  }
93
81
  .dsa-headline--h4 {
94
- --headline--font: var(--dsa-headline_h4--font, var(--ks-font-display-m));
95
- --subheadline--font: var(--dsa-headline_h4__subheadline--font, var(--ks-font-copy-m));
82
+ font: var(--dsa-headline_h4--font, var(--ks-font-display-m));
83
+ --subheadline--font-size: var(--dsa-headline_h4__subheadline--font-size, 75%);
96
84
  --headline--space-after_minimum: var(--dsa-headline_h4--space-after_minimum);
97
85
  --headline--space-after_small: var(--dsa-headline_h4--space-after_small);
98
86
  --headline--space-after_large: var(--dsa-headline_h4--space-after_large);
99
87
  }
100
88
  .dsa-headline--p {
101
- --headline--font: var(--dsa-headline_p--font, var(--ks-font-copy-m));
102
- --subheadline--font: var(--dsa-headline_p__subheadline--font, var(--ks-font-copy-s));
89
+ font: var(--dsa-headline_p--font, var(--ks-font-copy-m));
90
+ --subheadline--font-size: var(--dsa-headline_p__subheadline--font-size, 75%);
103
91
  --headline--space-after_minimum: var(--dsa-headline_p--space-after_minimum);
104
92
  --headline--space-after_small: var(--dsa-headline_p--space-after_small);
105
93
  --headline--space-after_large: var(--dsa-headline_p--space-after_large);
106
94
  }
107
95
  .dsa-headline .dsa-headline__headline {
108
- font: var(--headline--font);
109
96
  color: var(--dsa-headline--color, var(--ks-text-color-display));
97
+ font: inherit;
110
98
  font-weight: var(--dsa-headline--font-weight);
99
+ text-transform: var(--dsa-headline--text-transform);
111
100
  margin: 0;
112
101
  }
113
102
  .dsa-headline .dsa-headline__subheadline {
114
- font: var(--subheadline--font);
103
+ font-family: var(--dsa-headline__subheadline--font-family);
104
+ font-size: var(--subheadline--font-size, 50%);
115
105
  margin: 0;
116
106
  max-width: var(--dsa-content--width_default);
117
107
  color: var(--dsa-headline__subheadline--color, var(--ks-text-color-primary));
118
108
  font-weight: var(--dsa-headline__subheadline--font-weight, var(--ks-font-weight-bold));
109
+ text-transform: var(--dsa-headline__subheadline--text-transform, none);
110
+ letter-spacing: var(--dsa-headline__subheadline--letter-spacing, 0);
119
111
  }
120
112
  .dsa-headline--space-after-minimum {
121
113
  margin-bottom: var(--headline--space-after_minimum);
package/dist/components/mosaic/mosaic.css CHANGED
@@ -6,7 +6,6 @@
6
6
  --dsa-mosaic__headline--color: var(--dsa-headline--color);
7
7
  --dsa-mosaic__headline--font: var(--dsa-headline_h2--font);
8
8
  --dsa-mosaic__subheadline--color: var(--dsa-headline__subheadline--color);
9
- --dsa-mosaic__subheadline--font: var(--dsa-headline-font-copy-xs);
10
9
  }
11
10
 
12
11
  .dsa-mosaic .dsa-headline__headline {
@@ -15,7 +14,6 @@
15
14
  font-weight: var(--dsa-headline--font-weight, var(--ks-font-weight-semi-bold));
16
15
  }
17
16
  .dsa-mosaic .dsa-headline__subheadline {
18
- font: var(--dsa-mosaic__subheadline--font, var(--dsa-headline_h2__subheadline--font, var(--ks-font-display-xl)));
19
17
  color: var(--dsa-mosaic__subheadline--color, var(--ks-text-color-primary));
20
18
  font-weight: var(--dsa-headline__subheadline--font-weight, var(--ks-font-weight-medium));
21
19
  }
package/dist/components/page-wrapper/index.js CHANGED
@@ -70,6 +70,14 @@ var IconSprite = (() => /*#__PURE__*/ jsxs("svg", {
70
70
  children: /*#__PURE__*/ jsx("path", {
71
71
  d: "M13.4 12L18.7 6.7C19.1 6.3 19.1 5.7 18.7 5.3C18.3 4.9 17.7 4.9 17.3 5.3L12 10.6L6.7 5.3C6.3 4.9 5.7 4.9 5.3 5.3C4.9 5.7 4.9 6.3 5.3 6.7L10.6 12L5.3 17.3C4.9 17.7 4.9 18.3 5.3 18.7C5.5 18.9 5.7 19 6 19C6.3 19 6.5 18.9 6.7 18.7L12 13.4L17.3 18.7C17.5 18.9 17.8 19 18 19C18.2 19 18.5 18.9 18.7 18.7C19.1 18.3 19.1 17.7 18.7 17.3L13.4 12Z"
72
72
  })
73
+ }), /*#__PURE__*/ jsx("symbol", {
74
+ id: "icon-search",
75
+ viewBox: "0 0 24 24",
76
+ children: /*#__PURE__*/ jsx("path", {
77
+ fillRule: "evenodd",
78
+ clipRule: "evenodd",
79
+ d: "M11 2C15.9706 2 20 6.02944 20 11C20 13.125 19.2618 15.0766 18.0303 16.6162L21.707 20.293C22.0972 20.6835 22.0974 21.3166 21.707 21.707C21.3166 22.0974 20.6835 22.0972 20.293 21.707L16.6162 18.0303C15.0766 19.2618 13.125 20 11 20C6.02944 20 2 15.9706 2 11C2 6.02944 6.02944 2 11 2ZM11 4C7.13401 4 4 7.13401 4 11C4 14.866 7.13401 18 11 18C12.89 18 14.6038 17.2497 15.8633 16.0322C15.8877 16.0012 15.9148 15.9719 15.9434 15.9434C15.9719 15.9148 16.0012 15.8877 16.0322 15.8633C17.2497 14.6038 18 12.89 18 11C18 7.13401 14.866 4 11 4Z"
80
+ })
73
81
  }), /*#__PURE__*/ jsxs("symbol", {
74
82
  id: "icon-skip-back",
75
83
  viewBox: "0 0 24 24",
package/dist/components/page-wrapper/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 08 Jul 2025 11:46:40 GMT
3
+ * Generated on Tue, 08 Jul 2025 13:26:06 GMT
4
4
  */
5
5
  :root, [ks-theme] {
6
6
  --ks-background-color-accent-base: var(--ks-color-fg-to-bg-9-base);
@@ -732,12 +732,12 @@
732
732
  --ks-spacing-inset-stretch-m: var(--ks-spacing-l) var(--ks-spacing-m);
733
733
  --ks-spacing-inset-stretch-l: var(--ks-spacing-xl) var(--ks-spacing-l);
734
734
  --ks-spacing-inset-stretch-xl: var(--ks-spacing-xxl) var(--ks-spacing-xl);
735
- --ks-text-color-default-base: var(--ks-color-fg-alpha-3-base);
735
+ --ks-text-color-default-base: var(--ks-color-fg-alpha-2-base);
736
736
  --ks-text-color-default-interactive-base: var(--ks-color-link-base);
737
737
  --ks-text-color-default-interactive-hover-base: var(--ks-color-link-alpha-4-base);
738
738
  --ks-text-color-default-interactive-active-base: var(--ks-color-link-base);
739
739
  --ks-text-color-default-interactive-selected-base: var(--ks-color-link-base);
740
- --ks-text-color-default-inverted-base: var(--ks-color-fg-inverted-base);
740
+ --ks-text-color-default-inverted-base: var(--ks-color-fg-inverted-alpha-2-base);
741
741
  --ks-text-color-default-inverted-interactive-base: var(--ks-color-link-inverted-base);
742
742
  --ks-text-color-default-inverted-interactive-hover-base: var(--ks-color-link-inverted-alpha-4-base);
743
743
  --ks-text-color-default-inverted-interactive-active-base: var(--ks-color-link-inverted-base);
package/dist/components/presets.json CHANGED
@@ -215,7 +215,7 @@
215
215
  "id": "page-archetypes-blog-overview--blog-overview",
216
216
  "group": "Page Archetypes/Blog Overview",
217
217
  "name": "BlogOverview",
218
- "code": "<BlogOverview\n cta={{\n align: 'center',\n buttons: [\n {\n icon: 'person',\n label: 'Contact us',\n url: '#'\n },\n {\n icon: 'date',\n label: 'Book a meeting',\n url: '#'\n }\n ],\n colorNeutral: false,\n contentAlign: 'center',\n fullWidth: true,\n headline: 'Get in touch',\n highlightText: false,\n image: {\n align: 'center',\n padding: false,\n src: 'img/contact-person.png'\n },\n inverted: false,\n order: {\n desktopImageLast: false,\n mobileImageLast: false\n },\n padding: false,\n sub: 'Chat with us about getting your product or platform to market faster',\n text: 'Our modular design approach allows for flexibility and scalability in your application\\'s architecture.',\n textAlign: 'left',\n width: 'wide'\n }}\n latest={{\n alt: 'Image of a business team working',\n author: {\n image: 'img/people/author-alex.png',\n name: 'John Doe',\n title: 'CEO'\n },\n date: '12/30/2022',\n headline: 'Mastering the Art of Design Systems with Systemics: A Journey from Vision to Reality',\n image: 'img/close-up-young-business-team-working.png',\n link: {\n label: 'Read more',\n text: 'Read article',\n url: 'https://example.com/article1'\n },\n readingTime: '5 min read',\n tags: [\n {\n entry: 'Design Systems'\n },\n {\n entry: 'Headless Websites'\n },\n {\n entry: 'Training'\n }\n ],\n teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence. We discuss our unique approach to Design System Consulting, where we align your vision with actionable strategies for seamless and captivating user experiences.'\n }}\n latestTitle=\"Latest Post\"\n list={[\n {\n alt: 'Image of a business team working',\n author: {\n image: 'img/people/author-alex.png',\n name: 'John Doe',\n title: 'CEO'\n },\n date: '12/30/2022',\n headline: 'Mastering the Art of Design Systems with Systemics',\n image: 'img/close-up-young-business-team-working.png',\n link: {\n label: 'Read more',\n text: 'Read article',\n url: 'https://example.com/article1'\n },\n readingTime: '5 min read',\n tags: [\n {\n entry: 'Design Systems'\n }\n ],\n teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence..'\n },\n {\n alt: 'Image of a business team working',\n author: {\n image: 'img/people/author-emily.png',\n name: 'Jane Doe',\n title: 'CTO'\n },\n date: '12/30/2022',\n headline: 'Unleashing Innovation with Headless Websites',\n image: 'img/close-up-young-business-team-working.png',\n link: {\n label: 'Read more',\n text: 'Read article',\n url: 'https://example.com/article2'\n },\n readingTime: '5 min read',\n tags: [\n {\n entry: 'Headless Websites'\n }\n ],\n teaserText: 'Dive into the exciting world of headless architecture with Systemics. This article explores our Headless Websites service, a playground of innovation and creativity for brands seeking to redefine their digital journey.'\n },\n {\n alt: 'Image of a business team working',\n author: {\n image: 'img/people/author-alex.png',\n name: 'John Doe',\n title: 'CEO'\n },\n date: '12/30/2022',\n headline: 'Investing in Digital Excellence: Systemics\\' Design System Trainings',\n image: 'img/close-up-young-business-team-working.png',\n link: {\n label: 'Read more',\n text: 'Read article',\n url: 'https://example.com/article3'\n },\n readingTime: '5 min read',\n tags: [\n {\n entry: 'Training'\n }\n ],\n teaserText: 'Investing in your digital team\\'s growth is crucial for sustainable success. In this article, we highlight Systemics\\' Design System Trainings, designed to equip your team with the skills they need to harness your design system effectively.'\n }\n ]}\n listTitle=\"Recent Posts\"\n more={[\n {\n alt: 'Image of a business team working',\n author: {\n image: 'img/people/author-alex.png',\n name: 'John Doe',\n title: 'CEO'\n },\n date: '12/30/2022',\n headline: 'Mastering the Art of Design Systems with Systemics',\n image: 'img/close-up-young-business-team-working.png',\n link: {\n label: 'Read more',\n text: 'Read article',\n url: 'https://example.com/article1'\n },\n readingTime: '5 min read',\n tags: [\n {\n entry: 'Design Systems'\n }\n ],\n teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence..'\n },\n {\n alt: 'Image of a business team working',\n author: {\n image: 'img/people/author-emily.png',\n name: 'Jane Doe',\n title: 'CTO'\n },\n date: '12/30/2022',\n headline: 'Unleashing Innovation with Headless Websites',\n image: 'img/close-up-young-business-team-working.png',\n link: {\n label: 'Read more',\n text: 'Read article',\n url: 'https://example.com/article2'\n },\n readingTime: '5 min read',\n tags: [\n {\n entry: 'Headless Websites'\n }\n ],\n teaserText: 'Dive into the exciting world of headless architecture with Systemics. This article explores our Headless Websites service, a playground of innovation and creativity for brands seeking to redefine their digital journey.'\n }\n ]}\n moreTitle=\"Featured Posts\"\n section={[\n {\n backgroundColor: 'default',\n buttons: [\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n }\n ],\n content: {\n align: 'center',\n gutter: 'default',\n mode: 'default',\n tileWidth: 'default',\n width: 'unset'\n },\n headerSpacing: false,\n headline: {\n large: false,\n text: 'Section headline',\n width: 'unset'\n },\n inverted: false,\n spaceAfter: 'default',\n spaceBefore: 'default',\n spotlight: false,\n style: 'default',\n transition: 'default',\n width: 'default'\n },\n {\n backgroundColor: 'default',\n buttons: [\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n }\n ],\n content: {\n align: 'center',\n gutter: 'default',\n mode: 'default',\n tileWidth: 'default',\n width: 'unset'\n },\n headerSpacing: false,\n headline: {\n large: false,\n text: 'Section headline',\n width: 'unset'\n },\n inverted: false,\n spaceAfter: 'default',\n spaceBefore: 'default',\n spotlight: false,\n style: 'default',\n transition: 'default',\n width: 'default'\n },\n {\n backgroundColor: 'default',\n buttons: [\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n }\n ],\n content: {\n align: 'center',\n gutter: 'default',\n mode: 'default',\n tileWidth: 'default',\n width: 'unset'\n },\n headerSpacing: false,\n headline: {\n large: false,\n text: 'Section headline',\n width: 'unset'\n },\n inverted: false,\n spaceAfter: 'default',\n spaceBefore: 'default',\n spotlight: false,\n style: 'default',\n transition: 'default',\n width: 'default'\n }\n ]}\n/>",
218
+ "code": "<BlogOverview\n cta={{\n align: 'center',\n buttons: [\n {\n icon: 'person',\n label: 'Contact us',\n url: '#'\n },\n {\n icon: 'date',\n label: 'Book a meeting',\n url: '#'\n }\n ],\n colorNeutral: false,\n contentAlign: 'center',\n fullWidth: true,\n headline: 'Get in touch',\n highlightText: false,\n image: {\n align: 'center',\n padding: false,\n src: 'img/people/contact-person.png'\n },\n inverted: false,\n order: {\n desktopImageLast: false,\n mobileImageLast: false\n },\n padding: false,\n sub: 'Chat with us about getting your product or platform to market faster',\n text: 'Our modular design approach allows for flexibility and scalability in your application\\'s architecture.',\n textAlign: 'left',\n width: 'wide'\n }}\n latest={{\n alt: 'Image of a business team working',\n author: {\n image: 'img/people/author-alex.png',\n name: 'John Doe',\n title: 'CEO'\n },\n date: '12/30/2022',\n headline: 'Mastering the Art of Design Systems with Systemics: A Journey from Vision to Reality',\n image: 'img/close-up-young-business-team-working.png',\n link: {\n label: 'Read more',\n text: 'Read article',\n url: 'https://example.com/article1'\n },\n readingTime: '5 min read',\n tags: [\n {\n entry: 'Design Systems'\n },\n {\n entry: 'Headless Websites'\n },\n {\n entry: 'Training'\n }\n ],\n teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence. We discuss our unique approach to Design System Consulting, where we align your vision with actionable strategies for seamless and captivating user experiences.'\n }}\n latestTitle=\"Latest Post\"\n list={[\n {\n alt: 'Image of a business team working',\n author: {\n image: 'img/people/author-alex.png',\n name: 'John Doe',\n title: 'CEO'\n },\n date: '12/30/2022',\n headline: 'Mastering the Art of Design Systems with Systemics',\n image: 'img/close-up-young-business-team-working.png',\n link: {\n label: 'Read more',\n text: 'Read article',\n url: 'https://example.com/article1'\n },\n readingTime: '5 min read',\n tags: [\n {\n entry: 'Design Systems'\n }\n ],\n teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence..'\n },\n {\n alt: 'Image of a business team working',\n author: {\n image: 'img/people/author-emily.png',\n name: 'Jane Doe',\n title: 'CTO'\n },\n date: '12/30/2022',\n headline: 'Unleashing Innovation with Headless Websites',\n image: 'img/close-up-young-business-team-working.png',\n link: {\n label: 'Read more',\n text: 'Read article',\n url: 'https://example.com/article2'\n },\n readingTime: '5 min read',\n tags: [\n {\n entry: 'Headless Websites'\n }\n ],\n teaserText: 'Dive into the exciting world of headless architecture with Systemics. This article explores our Headless Websites service, a playground of innovation and creativity for brands seeking to redefine their digital journey.'\n },\n {\n alt: 'Image of a business team working',\n author: {\n image: 'img/people/author-alex.png',\n name: 'John Doe',\n title: 'CEO'\n },\n date: '12/30/2022',\n headline: 'Investing in Digital Excellence: Systemics\\' Design System Trainings',\n image: 'img/close-up-young-business-team-working.png',\n link: {\n label: 'Read more',\n text: 'Read article',\n url: 'https://example.com/article3'\n },\n readingTime: '5 min read',\n tags: [\n {\n entry: 'Training'\n }\n ],\n teaserText: 'Investing in your digital team\\'s growth is crucial for sustainable success. In this article, we highlight Systemics\\' Design System Trainings, designed to equip your team with the skills they need to harness your design system effectively.'\n }\n ]}\n listTitle=\"Recent Posts\"\n more={[\n {\n alt: 'Image of a business team working',\n author: {\n image: 'img/people/author-alex.png',\n name: 'John Doe',\n title: 'CEO'\n },\n date: '12/30/2022',\n headline: 'Mastering the Art of Design Systems with Systemics',\n image: 'img/close-up-young-business-team-working.png',\n link: {\n label: 'Read more',\n text: 'Read article',\n url: 'https://example.com/article1'\n },\n readingTime: '5 min read',\n tags: [\n {\n entry: 'Design Systems'\n }\n ],\n teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence..'\n },\n {\n alt: 'Image of a business team working',\n author: {\n image: 'img/people/author-emily.png',\n name: 'Jane Doe',\n title: 'CTO'\n },\n date: '12/30/2022',\n headline: 'Unleashing Innovation with Headless Websites',\n image: 'img/close-up-young-business-team-working.png',\n link: {\n label: 'Read more',\n text: 'Read article',\n url: 'https://example.com/article2'\n },\n readingTime: '5 min read',\n tags: [\n {\n entry: 'Headless Websites'\n }\n ],\n teaserText: 'Dive into the exciting world of headless architecture with Systemics. This article explores our Headless Websites service, a playground of innovation and creativity for brands seeking to redefine their digital journey.'\n }\n ]}\n moreTitle=\"Featured Posts\"\n section={[\n {\n backgroundColor: 'default',\n buttons: [\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n }\n ],\n content: {\n align: 'center',\n gutter: 'default',\n mode: 'default',\n tileWidth: 'default',\n width: 'unset'\n },\n headerSpacing: false,\n headline: {\n large: false,\n text: 'Section headline',\n width: 'unset'\n },\n inverted: false,\n spaceAfter: 'default',\n spaceBefore: 'default',\n spotlight: false,\n style: 'default',\n transition: 'default',\n width: 'default'\n },\n {\n backgroundColor: 'default',\n buttons: [\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n }\n ],\n content: {\n align: 'center',\n gutter: 'default',\n mode: 'default',\n tileWidth: 'default',\n width: 'unset'\n },\n headerSpacing: false,\n headline: {\n large: false,\n text: 'Section headline',\n width: 'unset'\n },\n inverted: false,\n spaceAfter: 'default',\n spaceBefore: 'default',\n spotlight: false,\n style: 'default',\n transition: 'default',\n width: 'default'\n },\n {\n backgroundColor: 'default',\n buttons: [\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n }\n ],\n content: {\n align: 'center',\n gutter: 'default',\n mode: 'default',\n tileWidth: 'default',\n width: 'unset'\n },\n headerSpacing: false,\n headline: {\n large: false,\n text: 'Section headline',\n width: 'unset'\n },\n inverted: false,\n spaceAfter: 'default',\n spaceBefore: 'default',\n spotlight: false,\n style: 'default',\n transition: 'default',\n width: 'default'\n }\n ]}\n/>",
219
219
  "args": {
220
220
  "section": [
221
221
  {
@@ -519,7 +519,7 @@
519
519
  "image": {
520
520
  "padding": false,
521
521
  "align": "center",
522
- "src": "img/contact-person.png"
522
+ "src": "img/people/contact-person.png"
523
523
  },
524
524
  "order": {
525
525
  "mobileImageLast": false,
@@ -1333,7 +1333,7 @@
1333
1333
  "id": "components-cta--contact-banner",
1334
1334
  "group": "Components/Cta",
1335
1335
  "name": "ContactBanner",
1336
- "code": "<Cta\n align=\"center\"\n buttons={[\n {\n icon: 'person',\n label: 'Contact us',\n url: '#'\n },\n {\n icon: 'date',\n label: 'Book a meeting',\n url: '#'\n }\n ]}\n headline=\"Get in touch\"\n image={{\n align: 'center',\n padding: false,\n src: 'img/contact-person.png'\n }}\n order={{\n desktopImageLast: false,\n mobileImageLast: false\n }}\n padding\n sub=\"Chat with us about getting your product or platform to market faster\"\n text=\"Our modular design approach allows for flexibility and scalability in your application's architecture.\"\n textAlign=\"left\"\n/>",
1336
+ "code": "<Cta\n align=\"center\"\n buttons={[\n {\n icon: 'person',\n label: 'Contact us',\n url: '#'\n },\n {\n icon: 'date',\n label: 'Book a meeting',\n url: '#'\n }\n ]}\n headline=\"Get in touch\"\n image={{\n align: 'center',\n padding: false,\n src: 'img/people/contact-person.png'\n }}\n order={{\n desktopImageLast: false,\n mobileImageLast: false\n }}\n padding\n sub=\"Chat with us about getting your product or platform to market faster\"\n text=\"Our modular design approach allows for flexibility and scalability in your application's architecture.\"\n textAlign=\"left\"\n/>",
1337
1337
  "args": {
1338
1338
  "headline": "Get in touch",
1339
1339
  "sub": "Chat with us about getting your product or platform to market faster",
@@ -1354,7 +1354,7 @@
1354
1354
  "image": {
1355
1355
  "padding": false,
1356
1356
  "align": "center",
1357
- "src": "img/contact-person.png"
1357
+ "src": "img/people/contact-person.png"
1358
1358
  },
1359
1359
  "order": {
1360
1360
  "mobileImageLast": false,
@@ -1372,7 +1372,7 @@
1372
1372
  "id": "components-cta--split-banner",
1373
1373
  "group": "Components/Cta",
1374
1374
  "name": "SplitBanner",
1375
- "code": "<Cta\n align=\"center\"\n backgroundColor=\"#001856\"\n buttons={[\n {\n icon: 'person',\n label: 'What can we do for you?',\n url: '#'\n }\n ]}\n colorNeutral\n headline=\"Design System Services\"\n image={{\n align: 'center',\n padding: false,\n src: 'img/colored-square.png'\n }}\n order={{\n desktopImageLast: false,\n mobileImageLast: false\n }}\n padding\n sub=\"Subheadline\"\n text=\"Here at Systemics, we bring a range of design system services that can make a difference.\"\n textAlign=\"left\"\n/>",
1375
+ "code": "<Cta\n align=\"center\"\n backgroundColor=\"#d9e4ff\"\n buttons={[\n {\n icon: 'person',\n label: 'What can we do for you?',\n url: '#'\n }\n ]}\n colorNeutral\n headline=\"Design System Services\"\n image={{\n align: 'center',\n padding: false,\n src: 'img/colored-square.png'\n }}\n order={{\n desktopImageLast: false,\n mobileImageLast: false\n }}\n padding\n sub=\"Subheadline\"\n text=\"Here at Systemics, we bring a range of design system services that can make a difference.\"\n textAlign=\"left\"\n/>",
1376
1376
  "args": {
1377
1377
  "headline": "Design System Services",
1378
1378
  "sub": "Subheadline",
@@ -1399,7 +1399,7 @@
1399
1399
  "padding": true,
1400
1400
  "inverted": false,
1401
1401
  "text": "Here at Systemics, we bring a range of design system services that can make a difference.",
1402
- "backgroundColor": "#001856"
1402
+ "backgroundColor": "#d9e4ff"
1403
1403
  },
1404
1404
  "screenshot": "img/screenshots/components-cta--split-banner.png"
1405
1405
  },
@@ -1446,7 +1446,7 @@
1446
1446
  "id": "components-cta--colored-banner",
1447
1447
  "group": "Components/Cta",
1448
1448
  "name": "ColoredBanner",
1449
- "code": "<Cta\n align=\"center\"\n backgroundColor=\"#a30051\"\n buttons={[\n {\n label: 'Learn More',\n url: '#'\n },\n {\n label: 'Contact Us',\n url: '#'\n }\n ]}\n colorNeutral\n headline=\"Expertise in Scalable Solutions\"\n highlightText\n image={{\n align: 'center',\n padding: true\n }}\n order={{\n desktopImageLast: true,\n mobileImageLast: false\n }}\n padding\n sub=\"Subheadline\"\n text=\"Leverage our expertise in creating scalable and robust applications using modern technologies.\"\n textAlign=\"left\"\n/>",
1449
+ "code": "<Cta\n align=\"center\"\n backgroundColor=\"#ffd4ea\"\n buttons={[\n {\n label: 'Learn More',\n url: '#'\n },\n {\n label: 'Contact Us',\n url: '#'\n }\n ]}\n colorNeutral\n headline=\"Expertise in Scalable Solutions\"\n highlightText\n image={{\n align: 'center',\n padding: true\n }}\n order={{\n desktopImageLast: true,\n mobileImageLast: false\n }}\n padding\n sub=\"Subheadline\"\n text=\"Leverage our expertise in creating scalable and robust applications using modern technologies.\"\n textAlign=\"left\"\n/>",
1450
1450
  "args": {
1451
1451
  "headline": "Expertise in Scalable Solutions",
1452
1452
  "sub": "Subheadline",
@@ -1475,7 +1475,7 @@
1475
1475
  "padding": true,
1476
1476
  "inverted": false,
1477
1477
  "text": "Leverage our expertise in creating scalable and robust applications using modern technologies.",
1478
- "backgroundColor": "#a30051"
1478
+ "backgroundColor": "#ffd4ea"
1479
1479
  },
1480
1480
  "screenshot": "img/screenshots/components-cta--colored-banner.png"
1481
1481
  },
@@ -3340,6 +3340,20 @@
3340
3340
  },
3341
3341
  "screenshot": "img/screenshots/industry-pagination--default.png"
3342
3342
  },
3343
+ {
3344
+ "id": "industry-search-bar--default",
3345
+ "group": "Industry / Search Bar",
3346
+ "name": "Default",
3347
+ "code": "<SearchBar\n alternativeResult=\"AI Conference\"\n alternativeText=\"Did you mean\"\n buttonText=\"Search\"\n hint=\"Press <kbd>Enter</kbd> to search\"\n placeholder=\"Search...\"\n/>",
3348
+ "args": {
3349
+ "placeholder": "Search...",
3350
+ "buttonText": "Search",
3351
+ "hint": "Press <kbd>Enter</kbd> to search",
3352
+ "alternativeText": "Did you mean",
3353
+ "alternativeResult": "AI Conference"
3354
+ },
3355
+ "screenshot": "img/screenshots/industry-search-bar--default.png"
3356
+ },
3343
3357
  {
3344
3358
  "id": "layout-section--dynamic-layout",
3345
3359
  "group": "Layout/Section",
package/dist/components/search-bar/index.d.ts ADDED
@@ -0,0 +1,35 @@
1
+ /// <reference types="react" />
2
+ /* eslint-disable */
3
+ /**
4
+ * This file was automatically generated by json-schema-to-typescript.
5
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
6
+ * and run json-schema-to-typescript to regenerate this file.
7
+ */
8
+ /**
9
+ * Placeholder text for the search input field.
10
+ */
11
+ type Placeholder = string;
12
+ interface SearchBarProps {
13
+ placeholder?: Placeholder;
14
+ /**
15
+ * Text displayed on the search button.
16
+ */
17
+ buttonText?: string;
18
+ /**
19
+ * Additional information or instructions related to the search functionality.
20
+ */
21
+ hint?: string;
22
+ /**
23
+ * Text to display when offering alternative results.
24
+ */
25
+ alternativeText?: string;
26
+ /**
27
+ * The alternative result to display when offering suggestions.
28
+ */
29
+ alternativeResult?: string;
30
+ }
31
+ declare const SearchBarContextDefault: import("react").ForwardRefExoticComponent<SearchBarProps & import("react").RefAttributes<HTMLDivElement>>;
32
+ declare const SearchBarContext: import("react").Context<import("react").ForwardRefExoticComponent<SearchBarProps & import("react").RefAttributes<HTMLDivElement>>>;
33
+ declare const SearchBar: import("react").ForwardRefExoticComponent<SearchBarProps & import("react").RefAttributes<HTMLDivElement>>;
34
+ export type { SearchBarProps };
35
+ export { SearchBarContextDefault, SearchBarContext, SearchBar };
package/dist/components/search-bar/index.js ADDED
@@ -0,0 +1,17 @@
1
+ import "./search-bar.css";
2
+ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
3
+ import { forwardRef, createContext, useContext } from 'react';
4
+ import { TextField } from '@kickstartds/form/lib/text-field';
5
+ import Markdown from 'markdown-to-jsx';
6
+ import { Icon } from '@kickstartds/base/lib/icon';
7
+ import { Link } from '@kickstartds/base/lib/link';
8
+
9
+ const SearchBarContextDefault = forwardRef(({ placeholder, hint = "Press <kbd>Enter</kbd> to search", alternativeText = "Did you mean", alternativeResult = "AI Conference", }, ref) => (jsxs("div", { className: "dsa-search-bar", ref: ref, children: [jsxs("div", { className: "dsa-search-bar__input-container", children: [jsx(TextField, { hideLabel: true, type: "search", placeholder: placeholder || "Search...", className: "dsa-search-bar__input" }), jsx(Icon, { icon: "search" })] }), hint && jsx(Markdown, { className: "dsa-search-bar__hint", children: hint }), alternativeResult && (jsx("p", { className: "dsa-search-bar__alternative-text", children: jsxs(Fragment, { children: [alternativeText + " ", jsx(Link, { href: "#", children: alternativeResult })] }) }))] })));
10
+ const SearchBarContext = createContext(SearchBarContextDefault);
11
+ const SearchBar = forwardRef((props, ref) => {
12
+ const Component = useContext(SearchBarContext);
13
+ return jsx(Component, { ...props, ref: ref });
14
+ });
15
+ SearchBar.displayName = "SearchBar";
16
+
17
+ export { SearchBar, SearchBarContext, SearchBarContextDefault };
package/dist/components/search-bar/search-bar.css ADDED
@@ -0,0 +1,33 @@
1
+ .dsa-search-bar__input-container {
2
+ position: relative;
3
+ }
4
+ .dsa-search-bar__input-container .icon {
5
+ position: absolute;
6
+ left: var(--ks-spacing-inset-s);
7
+ top: 50%;
8
+ transform: translateY(-50%);
9
+ color: var(--ks-color-fg-alpha-6);
10
+ width: 1em;
11
+ height: 1em;
12
+ }
13
+ .dsa-search-bar__input.c-form-field__input {
14
+ padding: var(--ks-spacing-inset-xs);
15
+ font: var(--ks-font-interface-s);
16
+ padding-left: calc(var(--ks-spacing-inset-s) + 1em + var(--ks-spacing-xxs));
17
+ }
18
+ .dsa-search-bar__hint {
19
+ display: block;
20
+ font: var(--ks-font-interface-xs);
21
+ color: var(--ks-color-fg-alpha-4);
22
+ margin-top: var(--ks-spacing-stack-xs);
23
+ }
24
+ .dsa-search-bar__hint kbd {
25
+ font-size: 0.8em;
26
+ border-radius: 3px;
27
+ }
28
+ .dsa-search-bar__alternative-text {
29
+ margin-top: var(--ks-spacing-stack-s);
30
+ margin-bottom: 0;
31
+ font: var(--ks-font-interface-m);
32
+ color: var(--ks-text-color-interface);
33
+ }
package/dist/components/search-bar/search-bar.schema.dereffed.json ADDED
@@ -0,0 +1,48 @@
1
+ {
2
+ "$schema": "http://json-schema.org/draft-07/schema#",
3
+ "$id": "http://schema.mydesignsystem.com/search-bar.schema.json",
4
+ "title": "Search Bar",
5
+ "type": "object",
6
+ "properties": {
7
+ "placeholder": {
8
+ "title": "Placeholder",
9
+ "type": "string",
10
+ "description": "Placeholder text for the search input field.",
11
+ "examples": [
12
+ "Search..."
13
+ ]
14
+ },
15
+ "buttonText": {
16
+ "type": "string",
17
+ "description": "Text displayed on the search button.",
18
+ "examples": [
19
+ "Search"
20
+ ]
21
+ },
22
+ "hint": {
23
+ "type": "string",
24
+ "description": "Additional information or instructions related to the search functionality.",
25
+ "examples": [
26
+ "Press <kbd>Enter</kbd> to search"
27
+ ]
28
+ },
29
+ "alternativeText": {
30
+ "type": "string",
31
+ "description": "Text to display when offering alternative results.",
32
+ "examples": [
33
+ "Did you mean"
34
+ ]
35
+ },
36
+ "alternativeResult": {
37
+ "type": "string",
38
+ "description": "The alternative result to display when offering suggestions.",
39
+ "examples": [
40
+ "AI Conference"
41
+ ]
42
+ },
43
+ "type": {
44
+ "const": "search-bar"
45
+ }
46
+ },
47
+ "additionalProperties": false
48
+ }
package/dist/components/search-bar/search-bar.schema.json ADDED
@@ -0,0 +1,35 @@
1
+ {
2
+ "$schema": "http://json-schema.org/draft-07/schema#",
3
+ "$id": "http://schema.mydesignsystem.com/search-bar.schema.json",
4
+ "title": "Search Bar",
5
+ "type": "object",
6
+ "properties": {
7
+ "placeholder": {
8
+ "title": "Placeholder",
9
+ "type": "string",
10
+ "description": "Placeholder text for the search input field.",
11
+ "examples": ["Search..."]
12
+ },
13
+ "buttonText": {
14
+ "type": "string",
15
+ "description": "Text displayed on the search button.",
16
+ "examples": ["Search"]
17
+ },
18
+ "hint": {
19
+ "type": "string",
20
+ "description": "Additional information or instructions related to the search functionality.",
21
+ "examples": ["Press <kbd>Enter</kbd> to search"]
22
+ },
23
+ "alternativeText": {
24
+ "type": "string",
25
+ "description": "Text to display when offering alternative results.",
26
+ "examples": ["Did you mean"]
27
+ },
28
+ "alternativeResult": {
29
+ "type": "string",
30
+ "description": "The alternative result to display when offering suggestions.",
31
+ "examples": ["AI Conference"]
32
+ }
33
+ },
34
+ "additionalProperties": false
35
+ }
package/dist/global.css CHANGED
@@ -348,7 +348,7 @@ h3 {
348
348
  [ks-inverted=true] {
349
349
  --spacing-base: 18px;
350
350
  --spacing-shrink-factor: 0.65;
351
- --spacing-grow-factor: 1.275;
351
+ --spacing-grow-factor: 1.3;
352
352
  --spacing-bp-factor: 1.0135;
353
353
  --spacing-xxs-bp-factor: calc(1 * var(--spacing-bp-factor));
354
354
  --spacing-xs-bp-factor: calc(var(--spacing-xxs-bp-factor) * var(--spacing-bp-factor));
package/dist/tokens/IconSprite.js CHANGED
@@ -42,6 +42,14 @@ export default (() => /*#__PURE__*/_jsxs("svg", {
42
42
  children: /*#__PURE__*/_jsx("path", {
43
43
  d: "M13.4 12L18.7 6.7C19.1 6.3 19.1 5.7 18.7 5.3C18.3 4.9 17.7 4.9 17.3 5.3L12 10.6L6.7 5.3C6.3 4.9 5.7 4.9 5.3 5.3C4.9 5.7 4.9 6.3 5.3 6.7L10.6 12L5.3 17.3C4.9 17.7 4.9 18.3 5.3 18.7C5.5 18.9 5.7 19 6 19C6.3 19 6.5 18.9 6.7 18.7L12 13.4L17.3 18.7C17.5 18.9 17.8 19 18 19C18.2 19 18.5 18.9 18.7 18.7C19.1 18.3 19.1 17.7 18.7 17.3L13.4 12Z"
44
44
  })
45
+ }), /*#__PURE__*/_jsx("symbol", {
46
+ id: "icon-search",
47
+ viewBox: "0 0 24 24",
48
+ children: /*#__PURE__*/_jsx("path", {
49
+ fillRule: "evenodd",
50
+ clipRule: "evenodd",
51
+ d: "M11 2C15.9706 2 20 6.02944 20 11C20 13.125 19.2618 15.0766 18.0303 16.6162L21.707 20.293C22.0972 20.6835 22.0974 21.3166 21.707 21.707C21.3166 22.0974 20.6835 22.0972 20.293 21.707L16.6162 18.0303C15.0766 19.2618 13.125 20 11 20C6.02944 20 2 15.9706 2 11C2 6.02944 6.02944 2 11 2ZM11 4C7.13401 4 4 7.13401 4 11C4 14.866 7.13401 18 11 18C12.89 18 14.6038 17.2497 15.8633 16.0322C15.8877 16.0012 15.9148 15.9719 15.9434 15.9434C15.9719 15.9148 16.0012 15.8877 16.0322 15.8633C17.2497 14.6038 18 12.89 18 11C18 7.13401 14.866 4 11 4Z"
52
+ })
45
53
  }), /*#__PURE__*/_jsxs("symbol", {
46
54
  id: "icon-skip-back",
47
55
  viewBox: "0 0 24 24",
package/dist/tokens/icon-sprite.html CHANGED
@@ -10,6 +10,8 @@
10
10
  <path d="M9 19C8.7 19 8.5 18.9 8.3 18.7C7.9 18.3 7.9 17.7 8.3 17.3L13.6 12L8.3 6.7C7.9 6.3 7.9 5.7 8.3 5.3C8.7 4.9 9.3 4.9 9.7 5.3L15.7 11.3C16.1 11.7 16.1 12.3 15.7 12.7L9.7 18.7C9.5 18.9 9.3 19 9 19Z"/>
11
11
  </symbol><symbol id="icon-close" viewBox="0 0 24 24">
12
12
  <path d="M13.4 12L18.7 6.7C19.1 6.3 19.1 5.7 18.7 5.3C18.3 4.9 17.7 4.9 17.3 5.3L12 10.6L6.7 5.3C6.3 4.9 5.7 4.9 5.3 5.3C4.9 5.7 4.9 6.3 5.3 6.7L10.6 12L5.3 17.3C4.9 17.7 4.9 18.3 5.3 18.7C5.5 18.9 5.7 19 6 19C6.3 19 6.5 18.9 6.7 18.7L12 13.4L17.3 18.7C17.5 18.9 17.8 19 18 19C18.2 19 18.5 18.9 18.7 18.7C19.1 18.3 19.1 17.7 18.7 17.3L13.4 12Z"/>
13
+ </symbol><symbol id="icon-search" viewBox="0 0 24 24">
14
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M11 2C15.9706 2 20 6.02944 20 11C20 13.125 19.2618 15.0766 18.0303 16.6162L21.707 20.293C22.0972 20.6835 22.0974 21.3166 21.707 21.707C21.3166 22.0974 20.6835 22.0972 20.293 21.707L16.6162 18.0303C15.0766 19.2618 13.125 20 11 20C6.02944 20 2 15.9706 2 11C2 6.02944 6.02944 2 11 2ZM11 4C7.13401 4 4 7.13401 4 11C4 14.866 7.13401 18 11 18C12.89 18 14.6038 17.2497 15.8633 16.0322C15.8877 16.0012 15.9148 15.9719 15.9434 15.9434C15.9719 15.9148 16.0012 15.8877 16.0322 15.8633C17.2497 14.6038 18 12.89 18 11C18 7.13401 14.866 4 11 4Z"/>
13
15
  </symbol><symbol id="icon-skip-back" viewBox="0 0 24 24">
14
16
  <path d="M18.375 3.21875C18.6752 2.97861 19.0871 2.93211 19.4336 3.09863C19.7799 3.26521 20 3.61571 20 4V20C20 20.3843 19.7799 20.7348 19.4336 20.9014C19.0871 21.0679 18.6752 21.0214 18.375 20.7812L8.375 12.7813C8.13778 12.5915 8 12.3038 8 12C8 11.6962 8.13778 11.4085 8.375 11.2188L18.375 3.21875ZM10.6016 12L18 17.918V6.08106L10.6016 12Z"/>
15
17
  <path d="M4 19V5C4 4.44772 4.44772 4 5 4C5.55228 4 6 4.44772 6 5V19C6 19.5523 5.55228 20 5 20C4.44772 20 4 19.5523 4 19Z"/>
package/dist/tokens/themes.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 08 Jul 2025 11:46:43 GMT
3
+ * Generated on Tue, 08 Jul 2025 13:26:09 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 Tue, 08 Jul 2025 11:46:48 GMT
2730
+ * Generated on Tue, 08 Jul 2025 13:26:13 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 Tue, 08 Jul 2025 11:46:46 GMT
5461
+ * Generated on Tue, 08 Jul 2025 13:26:11 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 Tue, 08 Jul 2025 11:46:50 GMT
8462
+ * Generated on Tue, 08 Jul 2025 13:26:16 GMT
8463
8463
  */
8464
8464
  :root [ks-theme=telekom] {
8465
8465
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
package/dist/tokens/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 08 Jul 2025 11:46:40 GMT
3
+ * Generated on Tue, 08 Jul 2025 13:26:06 GMT
4
4
  */
5
5
 
6
6
  :root, [ks-theme] {
@@ -733,12 +733,12 @@
733
733
  --ks-spacing-inset-stretch-m: var(--ks-spacing-l) var(--ks-spacing-m);
734
734
  --ks-spacing-inset-stretch-l: var(--ks-spacing-xl) var(--ks-spacing-l);
735
735
  --ks-spacing-inset-stretch-xl: var(--ks-spacing-xxl) var(--ks-spacing-xl);
736
- --ks-text-color-default-base: var(--ks-color-fg-alpha-3-base);
736
+ --ks-text-color-default-base: var(--ks-color-fg-alpha-2-base);
737
737
  --ks-text-color-default-interactive-base: var(--ks-color-link-base);
738
738
  --ks-text-color-default-interactive-hover-base: var(--ks-color-link-alpha-4-base);
739
739
  --ks-text-color-default-interactive-active-base: var(--ks-color-link-base);
740
740
  --ks-text-color-default-interactive-selected-base: var(--ks-color-link-base);
741
- --ks-text-color-default-inverted-base: var(--ks-color-fg-inverted-base);
741
+ --ks-text-color-default-inverted-base: var(--ks-color-fg-inverted-alpha-2-base);
742
742
  --ks-text-color-default-inverted-interactive-base: var(--ks-color-link-inverted-base);
743
743
  --ks-text-color-default-inverted-interactive-hover-base: var(--ks-color-link-inverted-alpha-4-base);
744
744
  --ks-text-color-default-inverted-interactive-active-base: var(--ks-color-link-inverted-base);
package/dist/tokens/tokens.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 08 Jul 2025 11:46:41 GMT
3
+ * Generated on Tue, 08 Jul 2025 13:26:07 GMT
4
4
  */
5
5
 
6
6
  export const KsBackgroundColorAccentBase = "#f3f3f4";
@@ -737,12 +737,12 @@ export const KsSpacingInsetStretchS = "0.875rem 0.6364rem";
737
737
  export const KsSpacingInsetStretchM = "1.2031rem 0.875rem";
738
738
  export const KsSpacingInsetStretchL = "1.6543rem 1.2031rem";
739
739
  export const KsSpacingInsetStretchXl = "2.2747rem 1.6543rem";
740
- export const KsTextColorDefaultBase = "rgba(6, 8, 31, 0.76)";
740
+ export const KsTextColorDefaultBase = "rgba(6, 8, 31, 0.87)";
741
741
  export const KsTextColorDefaultInteractiveBase = "#3065c0";
742
742
  export const KsTextColorDefaultInteractiveHoverBase = "rgba(48, 101, 192, 0.63)";
743
743
  export const KsTextColorDefaultInteractiveActiveBase = "#3065c0";
744
744
  export const KsTextColorDefaultInteractiveSelectedBase = "#3065c0";
745
- export const KsTextColorDefaultInvertedBase = "#ffffff";
745
+ export const KsTextColorDefaultInvertedBase = "rgba(255, 255, 255, 0.87)";
746
746
  export const KsTextColorDefaultInvertedInteractiveBase = "#98b2e0";
747
747
  export const KsTextColorDefaultInvertedInteractiveHoverBase = "rgba(152, 178, 224, 0.63)";
748
748
  export const KsTextColorDefaultInvertedInteractiveActiveBase = "#98b2e0";
@@ -928,6 +928,7 @@ export const IconsChevronDown = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 2
928
928
  export const IconsChevronLeft = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M15 5C15.3 5 15.5 5.1 15.7 5.3C16.1 5.7 16.1 6.3 15.7 6.7L10.4 12L15.7 17.3C16.1 17.7 16.1 18.3 15.7 18.7C15.3 19.1 14.7 19.1 14.3 18.7L8.3 12.7C7.9 12.3 7.9 11.7 8.3 11.3L14.3 5.3C14.5 5.1 14.7 5 15 5Z\"\n />\n</svg>";
929
929
  export const IconsChevronRight = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M9 19C8.7 19 8.5 18.9 8.3 18.7C7.9 18.3 7.9 17.7 8.3 17.3L13.6 12L8.3 6.7C7.9 6.3 7.9 5.7 8.3 5.3C8.7 4.9 9.3 4.9 9.7 5.3L15.7 11.3C16.1 11.7 16.1 12.3 15.7 12.7L9.7 18.7C9.5 18.9 9.3 19 9 19Z\" />\n</svg>";
930
930
  export const IconsClose = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.4 12L18.7 6.7C19.1 6.3 19.1 5.7 18.7 5.3C18.3 4.9 17.7 4.9 17.3 5.3L12 10.6L6.7 5.3C6.3 4.9 5.7 4.9 5.3 5.3C4.9 5.7 4.9 6.3 5.3 6.7L10.6 12L5.3 17.3C4.9 17.7 4.9 18.3 5.3 18.7C5.5 18.9 5.7 19 6 19C6.3 19 6.5 18.9 6.7 18.7L12 13.4L17.3 18.7C17.5 18.9 17.8 19 18 19C18.2 19 18.5 18.9 18.7 18.7C19.1 18.3 19.1 17.7 18.7 17.3L13.4 12Z\" />\n</svg>";
931
+ export const IconsSearch = "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M11 2C15.9706 2 20 6.02944 20 11C20 13.125 19.2618 15.0766 18.0303 16.6162L21.707 20.293C22.0972 20.6835 22.0974 21.3166 21.707 21.707C21.3166 22.0974 20.6835 22.0972 20.293 21.707L16.6162 18.0303C15.0766 19.2618 13.125 20 11 20C6.02944 20 2 15.9706 2 11C2 6.02944 6.02944 2 11 2ZM11 4C7.13401 4 4 7.13401 4 11C4 14.866 7.13401 18 11 18C12.89 18 14.6038 17.2497 15.8633 16.0322C15.8877 16.0012 15.9148 15.9719 15.9434 15.9434C15.9719 15.9148 16.0012 15.8877 16.0322 15.8633C17.2497 14.6038 18 12.89 18 11C18 7.13401 14.866 4 11 4Z\"\n />\n</svg>";
931
932
  export const IconsSkipBack = "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M18.375 3.21875C18.6752 2.97861 19.0871 2.93211 19.4336 3.09863C19.7799 3.26521 20 3.61571 20 4V20C20 20.3843 19.7799 20.7348 19.4336 20.9014C19.0871 21.0679 18.6752 21.0214 18.375 20.7812L8.375 12.7813C8.13778 12.5915 8 12.3038 8 12C8 11.6962 8.13778 11.4085 8.375 11.2188L18.375 3.21875ZM10.6016 12L18 17.918V6.08106L10.6016 12Z\"\n />\n <path\n d=\"M4 19V5C4 4.44772 4.44772 4 5 4C5.55228 4 6 4.44772 6 5V19C6 19.5523 5.55228 20 5 20C4.44772 20 4 19.5523 4 19Z\"\n />\n</svg>";
932
933
  export const IconsSkipForward = "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M4.56641 3.09863C4.91287 2.93211 5.32483 2.97861 5.625 3.21875L15.625 11.2188C15.8622 11.4085 16 11.6962 16 12C16 12.3038 15.8622 12.5915 15.625 12.7813L5.625 20.7812C5.32483 21.0214 4.91287 21.0679 4.56641 20.9014C4.22012 20.7348 4 20.3843 4 20V4C4 3.61571 4.22012 3.26521 4.56641 3.09863ZM6 17.918L13.3984 12L6 6.08106V17.918Z\"\n />\n <path\n d=\"M18 19V5C18 4.44772 18.4477 4 19 4C19.5523 4 20 4.44772 20 5V19C20 19.5523 19.5523 20 19 20C18.4477 20 18 19.5523 18 19Z\"\n />\n</svg>";
933
934
  export const IconsZoom = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M21.7 20.3L18 16.6C19.2 15.1 20 13.1 20 11C20 6 16 2 11 2C6 2 2 6 2 11C2 16 6 20 11 20C13.1 20 15.1 19.3 16.6 18L20.3 21.7C20.5 21.9 20.8 22 21 22C21.2 22 21.5 21.9 21.7 21.7C22.1 21.3 22.1 20.7 21.7 20.3ZM4 11C4 7.1 7.1 4 11 4C14.9 4 18 7.1 18 11C18 12.9 17.2 14.7 16 15.9C14.7 17.2 13 17.9 11.1 17.9C7.1 18 4 14.9 4 11Z\" />\n <path\n d=\"M14 10H12V8C12 7.4 11.6 7 11 7C10.4 7 10 7.4 10 8V10H8C7.4 10 7 10.4 7 11C7 11.6 7.4 12 8 12H10V14C10 14.6 10.4 15 11 15C11.6 15 12 14.6 12 14V12H14C14.6 12 15 11.6 15 11C15 10.4 14.6 10 14 10Z\" />\n</svg>";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kickstartds/ds-agency-premium",
3
- "version": "1.6.71--canary.45.1819.0",
3
+ "version": "1.6.71--canary.45.1824.0",
4
4
  "description": "",
5
5
  "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
6
6
  "bugs": {