@kickstartds/ds-agency-premium 1.6.71--canary.45.1821.0 → 1.6.71--canary.45.1833.0

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

@@ -0,0 +1,134 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/cms/search.schema.json",
+  "title": "Search",
+  "type": "object",
+  "properties": {
+    "searchFilter": {
+      "$schema": "http://json-schema.org/draft-07/schema#",
+      "$id": "http://schema.mydesignsystem.com/search-filter.schema.json",
+      "title": "Search Filter",
+      "type": "object",
+      "properties": {
+        "title": {
+          "type": "string",
+          "description": "The title of the search filter.",
+          "examples": [
+            "Search by category"
+          ]
+        },
+        "categories": {
+          "type": "array",
+          "description": "The categories to filter by.",
+          "examples": [
+            [
+              {
+                "title": "Pages",
+                "amount": "10"
+              },
+              {
+                "title": "News",
+                "amount": "5"
+              },
+              {
+                "title": "Blog Posts",
+                "amount": "8"
+              }
+            ]
+          ],
+          "items": {
+            "type": "object",
+            "properties": {
+              "title": {
+                "type": "string",
+                "description": "The name of the category.",
+                "examples": [
+                  "Pages",
+                  "News"
+                ]
+              },
+              "amount": {
+                "type": "string",
+                "description": "The number of items in the category.",
+                "examples": [
+                  "10",
+                  "5"
+                ]
+              },
+              "url": {
+                "type": "string",
+                "format": "uri",
+                "description": "The URL to filter by this category.",
+                "examples": [
+                  "#"
+                ]
+              }
+            },
+            "additionalProperties": false
+          }
+        },
+        "type": {
+          "const": "search-filter"
+        }
+      },
+      "additionalProperties": false
+    },
+    "searchResults": {
+      "type": "array",
+      "items": {
+        "$schema": "http://json-schema.org/draft-07/schema#",
+        "$id": "http://schema.mydesignsystem.com/search-result.schema.json",
+        "title": "Search Result",
+        "type": "object",
+        "properties": {
+          "url": {
+            "title": "URL",
+            "type": "string",
+            "description": "A URL linking to the search result or more information.",
+            "examples": [
+              "https://www.example.com/ai-conference-2023"
+            ]
+          },
+          "title": {
+            "title": "Title",
+            "type": "string",
+            "description": "The title of the search result.",
+            "examples": [
+              "AI Conference 2023"
+            ]
+          },
+          "text": {
+            "title": "Text",
+            "type": "string",
+            "description": "The main content or description of the search result.",
+            "examples": [
+              "Join us for the AI Conference 2023, where industry leaders discuss the future of AI."
+            ]
+          },
+          "showLink": {
+            "title": "Show Link",
+            "type": "boolean",
+            "description": "Whether to display the link to the search result.",
+            "default": true
+          },
+          "ariaLabel": {
+            "title": "ARIA Label",
+            "type": "string",
+            "description": "An ARIA label for accessibility purposes.",
+            "examples": [
+              "Search result: Conference 2023"
+            ]
+          },
+          "type": {
+            "const": "search-result"
+          }
+        },
+        "additionalProperties": false
+      }
+    },
+    "type": {
+      "const": "search"
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/search/search.schema.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/cms/search.schema.json",
+  "title": "Search",
+  "type": "object",
+  "properties": {
+    "searchFilter": {
+      "$ref": "http://schema.mydesignsystem.com/search-filter.schema.json"
+    },
+    "searchResults": {
+      "type": "array",
+      "items": {
+        "$ref": "http://schema.mydesignsystem.com/search-result.schema.json"
+      }
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/search-bar/index.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+/**
+ * Placeholder text for the search input field.
+ */
+type Placeholder = string;
+interface SearchBarProps {
+    placeholder?: Placeholder;
+    /**
+     * Text displayed on the search button.
+     */
+    buttonText?: string;
+    /**
+     * Additional information or instructions related to the search functionality.
+     */
+    hint?: string;
+    /**
+     * Text to display when offering alternative results.
+     */
+    alternativeText?: string;
+    /**
+     * The alternative result to display when offering suggestions.
+     */
+    alternativeResult?: string;
+}
+declare const SearchBarContextDefault: import("react").ForwardRefExoticComponent<SearchBarProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const SearchBarContext: import("react").Context<import("react").ForwardRefExoticComponent<SearchBarProps & import("react").RefAttributes<HTMLDivElement>>>;
+declare const SearchBar: import("react").ForwardRefExoticComponent<SearchBarProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { SearchBarProps };
+export { SearchBarContextDefault, SearchBarContext, SearchBar };

package/dist/components/search-bar/index.js

@@ -0,0 +1,17 @@
+import "./search-bar.css";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, createContext, useContext } from 'react';
+import { TextField } from '@kickstartds/form/lib/text-field';
+import Markdown from 'markdown-to-jsx';
+import { Icon } from '@kickstartds/base/lib/icon';
+import { Link } from '@kickstartds/base/lib/link';
+
+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 })] }) }))] })));
+const SearchBarContext = createContext(SearchBarContextDefault);
+const SearchBar = forwardRef((props, ref) => {
+    const Component = useContext(SearchBarContext);
+    return jsx(Component, { ...props, ref: ref });
+});
+SearchBar.displayName = "SearchBar";
+
+export { SearchBar, SearchBarContext, SearchBarContextDefault };

package/dist/components/search-bar/search-bar.css

@@ -0,0 +1,33 @@
+.dsa-search-bar__input-container {
+  position: relative;
+}
+.dsa-search-bar__input-container .icon {
+  position: absolute;
+  left: var(--ks-spacing-inset-s);
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--ks-color-fg-alpha-6);
+  width: 1em;
+  height: 1em;
+}
+.dsa-search-bar__input.c-form-field__input {
+  padding: var(--ks-spacing-inset-xs);
+  font: var(--ks-font-interface-s);
+  padding-left: calc(var(--ks-spacing-inset-s) + 1em + var(--ks-spacing-xxs));
+}
+.dsa-search-bar__hint {
+  display: block;
+  font: var(--ks-font-interface-xs);
+  color: var(--ks-color-fg-alpha-4);
+  margin-top: var(--ks-spacing-stack-xs);
+}
+.dsa-search-bar__hint kbd {
+  font-size: 0.8em;
+  border-radius: 3px;
+}
+.dsa-search-bar__alternative-text {
+  margin-top: var(--ks-spacing-stack-s);
+  margin-bottom: 0;
+  font: var(--ks-font-interface-m);
+  color: var(--ks-text-color-interface);
+}

package/dist/components/search-bar/search-bar.schema.dereffed.json

@@ -0,0 +1,48 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/search-bar.schema.json",
+  "title": "Search Bar",
+  "type": "object",
+  "properties": {
+    "placeholder": {
+      "title": "Placeholder",
+      "type": "string",
+      "description": "Placeholder text for the search input field.",
+      "examples": [
+        "Search..."
+      ]
+    },
+    "buttonText": {
+      "type": "string",
+      "description": "Text displayed on the search button.",
+      "examples": [
+        "Search"
+      ]
+    },
+    "hint": {
+      "type": "string",
+      "description": "Additional information or instructions related to the search functionality.",
+      "examples": [
+        "Press <kbd>Enter</kbd> to search"
+      ]
+    },
+    "alternativeText": {
+      "type": "string",
+      "description": "Text to display when offering alternative results.",
+      "examples": [
+        "Did you mean"
+      ]
+    },
+    "alternativeResult": {
+      "type": "string",
+      "description": "The alternative result to display when offering suggestions.",
+      "examples": [
+        "AI Conference"
+      ]
+    },
+    "type": {
+      "const": "search-bar"
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/search-bar/search-bar.schema.json

@@ -0,0 +1,35 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/search-bar.schema.json",
+  "title": "Search Bar",
+  "type": "object",
+  "properties": {
+    "placeholder": {
+      "title": "Placeholder",
+      "type": "string",
+      "description": "Placeholder text for the search input field.",
+      "examples": ["Search..."]
+    },
+    "buttonText": {
+      "type": "string",
+      "description": "Text displayed on the search button.",
+      "examples": ["Search"]
+    },
+    "hint": {
+      "type": "string",
+      "description": "Additional information or instructions related to the search functionality.",
+      "examples": ["Press <kbd>Enter</kbd> to search"]
+    },
+    "alternativeText": {
+      "type": "string",
+      "description": "Text to display when offering alternative results.",
+      "examples": ["Did you mean"]
+    },
+    "alternativeResult": {
+      "type": "string",
+      "description": "The alternative result to display when offering suggestions.",
+      "examples": ["AI Conference"]
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/search-filter/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { SearchFilterProps } from "../../SearchFilterProps-2fa6419b.js";
+declare const SearchFilterContextDefault: import("react").ForwardRefExoticComponent<SearchFilterProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const SearchFilterContext: import("react").Context<import("react").ForwardRefExoticComponent<SearchFilterProps & import("react").RefAttributes<HTMLDivElement>>>;
+declare const SearchFilter: import("react").ForwardRefExoticComponent<SearchFilterProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { SearchFilterProps };
+export { SearchFilterContextDefault, SearchFilterContext, SearchFilter };

package/dist/components/search-filter/index.js

@@ -0,0 +1,15 @@
+import "./search-filter.css";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, createContext, useContext } from 'react';
+import Markdown from 'markdown-to-jsx';
+import { Link } from '@kickstartds/base/lib/link';
+
+const SearchFilterContextDefault = forwardRef(({ title, categories }, ref) => (jsxs("div", { className: "dsa-search-filter", ref: ref, children: [title && jsx(Markdown, { className: "dsa-search-filter__title", children: title }), jsx("div", { className: "dsa-search-filter__categories", children: categories.map((category, index) => (jsxs("div", { className: "dsa-search-filter__category", children: [jsx(Link, { href: category.url, className: "dsa-search-filter__category-title", children: category.title }), jsx("span", { className: "dsa-search-filter__category-amount", children: " (" + category.amount + ")" })] }, index))) })] })));
+const SearchFilterContext = createContext(SearchFilterContextDefault);
+const SearchFilter = forwardRef((props, ref) => {
+    const Component = useContext(SearchFilterContext);
+    return jsx(Component, { ...props, ref: ref });
+});
+SearchFilter.displayName = "SearchFilter";
+
+export { SearchFilter, SearchFilterContext, SearchFilterContextDefault };

package/dist/components/search-filter/search-filter.css

@@ -0,0 +1,20 @@
+.dsa-search-filter {
+  background-color: var(--ks-background-color-accent);
+  border-radius: var(--ks-border-radius-card);
+  padding: var(--ks-spacing-inset-m);
+}
+.dsa-search-filter__title {
+  font: var(--dsa-topic--font);
+  color: var(--dsa-topic--color);
+  font-weight: var(--dsa-topic--font-weight);
+}
+.dsa-search-filter__categories {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-spacing-xxs);
+  margin-top: var(--ks-spacing-stack-s);
+}
+.dsa-search-filter__category {
+  font: var(--ks-font-interface-m);
+  color: var(--ks-text-color-interface);
+}

package/dist/components/search-filter/search-filter.schema.dereffed.json

@@ -0,0 +1,69 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/search-filter.schema.json",
+  "title": "Search Filter",
+  "type": "object",
+  "properties": {
+    "title": {
+      "type": "string",
+      "description": "The title of the search filter.",
+      "examples": [
+        "Search by category"
+      ]
+    },
+    "categories": {
+      "type": "array",
+      "description": "The categories to filter by.",
+      "examples": [
+        [
+          {
+            "title": "Pages",
+            "amount": "10"
+          },
+          {
+            "title": "News",
+            "amount": "5"
+          },
+          {
+            "title": "Blog Posts",
+            "amount": "8"
+          }
+        ]
+      ],
+      "items": {
+        "type": "object",
+        "properties": {
+          "title": {
+            "type": "string",
+            "description": "The name of the category.",
+            "examples": [
+              "Pages",
+              "News"
+            ]
+          },
+          "amount": {
+            "type": "string",
+            "description": "The number of items in the category.",
+            "examples": [
+              "10",
+              "5"
+            ]
+          },
+          "url": {
+            "type": "string",
+            "format": "uri",
+            "description": "The URL to filter by this category.",
+            "examples": [
+              "#"
+            ]
+          }
+        },
+        "additionalProperties": false
+      }
+    },
+    "type": {
+      "const": "search-filter"
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/search-filter/search-filter.schema.json

@@ -0,0 +1,46 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/search-filter.schema.json",
+  "title": "Search Filter",
+  "type": "object",
+  "properties": {
+    "title": {
+      "type": "string",
+      "description": "The title of the search filter.",
+      "examples": ["Search by category"]
+    },
+    "categories": {
+      "type": "array",
+      "description": "The categories to filter by.",
+      "examples": [
+        [
+          { "title": "Pages", "amount": "10" },
+          { "title": "News", "amount": "5" },
+          { "title": "Blog Posts", "amount": "8" }
+        ]
+      ],
+      "items": {
+        "type": "object",
+        "properties": {
+          "title": {
+            "type": "string",
+            "description": "The name of the category.",
+            "examples": ["Pages", "News"]
+          },
+          "amount": {
+            "type": "string",
+            "description": "The number of items in the category.",
+            "examples": ["10", "5"]
+          },
+          "url": {
+            "type": "string",
+            "format": "uri",
+            "description": "The URL to filter by this category.",
+            "examples": ["#"]
+          }
+        }
+      }
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/search-result/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { SearchResultProps } from "../../SearchResultProps-224c2338.js";
+declare const SearchResultContextDefault: import("react").ForwardRefExoticComponent<SearchResultProps & import("react").RefAttributes<HTMLAnchorElement>>;
+declare const SearchResultContext: import("react").Context<import("react").ForwardRefExoticComponent<SearchResultProps & import("react").RefAttributes<HTMLAnchorElement>>>;
+declare const SearchResult: import("react").ForwardRefExoticComponent<SearchResultProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export type { SearchResultProps };
+export { SearchResultContextDefault, SearchResultContext, SearchResult };

package/dist/components/search-result/index.js

@@ -0,0 +1,15 @@
+import "./search-result.css";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, createContext, useContext } from 'react';
+import { Link } from '@kickstartds/base/lib/link';
+import { RichText } from '@kickstartds/base/lib/rich-text';
+
+const SearchResultContextDefault = forwardRef(({ title, text, url, showLink, ariaLabel }, ref) => (jsxs(Link, { "aria-label": ariaLabel, href: url, className: "dsa-search-result", ref: ref, children: [jsx("span", { className: "dsa-search-result__title", children: title }), jsx(RichText, { text: text, className: "dsa-search-result__text" }), showLink && jsx("span", { className: "dsa-search-result__link", children: url })] })));
+const SearchResultContext = createContext(SearchResultContextDefault);
+const SearchResult = forwardRef((props, ref) => {
+    const Component = useContext(SearchResultContext);
+    return jsx(Component, { ...props, ref: ref });
+});
+SearchResult.displayName = "SearchResult";
+
+export { SearchResult, SearchResultContext, SearchResultContextDefault };

package/dist/components/search-result/search-result.css

@@ -0,0 +1,26 @@
+.dsa-search-result {
+  --g-link--border-radius: var(--ks-border-radius-card);
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-spacing-stack-xs);
+  border: var(--ks-border-width-default) solid var(--ks-border-color-card-interactive);
+  padding: var(--ks-spacing-inset-m);
+  transition: var(--ks-transition-hover);
+}
+.dsa-search-result:hover {
+  border-color: var(--ks-border-color-card-interactive-hover);
+}
+.dsa-search-result__title {
+  font: var(--dsa-topic--font);
+  color: var(--dsa-topic--color);
+  font-weight: var(--dsa-topic--font-weight);
+}
+.dsa-search-result__link {
+  width: fit-content;
+  font: var(--ks-font-interface-s);
+  color: var(--dsa-link--color);
+  transition: inherit;
+}
+.dsa-search-result__link:hover {
+  color: var(--dsa-link--color_hover);
+}

package/dist/components/search-result/search-result.schema.dereffed.json

@@ -0,0 +1,50 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/search-result.schema.json",
+  "title": "Search Result",
+  "type": "object",
+  "properties": {
+    "url": {
+      "title": "URL",
+      "type": "string",
+      "description": "A URL linking to the search result or more information.",
+      "examples": [
+        "https://www.example.com/ai-conference-2023"
+      ]
+    },
+    "title": {
+      "title": "Title",
+      "type": "string",
+      "description": "The title of the search result.",
+      "examples": [
+        "AI Conference 2023"
+      ]
+    },
+    "text": {
+      "title": "Text",
+      "type": "string",
+      "description": "The main content or description of the search result.",
+      "examples": [
+        "Join us for the AI Conference 2023, where industry leaders discuss the future of AI."
+      ]
+    },
+    "showLink": {
+      "title": "Show Link",
+      "type": "boolean",
+      "description": "Whether to display the link to the search result.",
+      "default": true
+    },
+    "ariaLabel": {
+      "title": "ARIA Label",
+      "type": "string",
+      "description": "An ARIA label for accessibility purposes.",
+      "examples": [
+        "Search result: Conference 2023"
+      ]
+    },
+    "type": {
+      "const": "search-result"
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/search-result/search-result.schema.json

@@ -0,0 +1,41 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/search-result.schema.json",
+  "title": "Search Result",
+  "type": "object",
+  "properties": {
+    "url": {
+      "title": "URL",
+      "type": "string",
+      "description": "A URL linking to the search result or more information.",
+      "examples": ["https://www.example.com/ai-conference-2023"]
+    },
+    "title": {
+      "title": "Title",
+      "type": "string",
+      "description": "The title of the search result.",
+      "examples": ["AI Conference 2023"]
+    },
+    "text": {
+      "title": "Text",
+      "type": "string",
+      "description": "The main content or description of the search result.",
+      "examples": [
+        "Join us for the AI Conference 2023, where industry leaders discuss the future of AI."
+      ]
+    },
+    "showLink": {
+      "title": "Show Link",
+      "type": "boolean",
+      "description": "Whether to display the link to the search result.",
+      "default": true
+    },
+    "ariaLabel": {
+      "title": "ARIA Label",
+      "type": "string",
+      "description": "An ARIA label for accessibility purposes.",
+      "examples": ["Search result: Conference 2023"]
+    }
+  },
+  "additionalProperties": false
+}

package/dist/global.css

@@ -348,7 +348,7 @@ h3 {
 [ks-inverted=true] {
   --spacing-base: 18px;
   --spacing-shrink-factor: 0.65;
-  --spacing-grow-factor: 1.275;
+  --spacing-grow-factor: 1.3;
   --spacing-bp-factor: 1.0135;
   --spacing-xxs-bp-factor: calc(1 * var(--spacing-bp-factor));
   --spacing-xs-bp-factor: calc(var(--spacing-xxs-bp-factor) * var(--spacing-bp-factor));

package/dist/tokens/IconSprite.js

@@ -42,6 +42,14 @@ export default (() => /*#__PURE__*/_jsxs("svg", {
     children: /*#__PURE__*/_jsx("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"
     })
+  }), /*#__PURE__*/_jsx("symbol", {
+    id: "icon-search",
+    viewBox: "0 0 24 24",
+    children: /*#__PURE__*/_jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "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"
+    })
   }), /*#__PURE__*/_jsxs("symbol", {
     id: "icon-skip-back",
     viewBox: "0 0 24 24",