@kickstartds/ds-agency-premium 1.6.70--canary.45.1746.0 → 1.6.70

package/dist/components/event-latest-teaser/event-latest-teaser.schema.dereffed.json

@@ -1,97 +0,0 @@
-{
-  "$schema": "http://json-schema.org/draft-07/schema#",
-  "$id": "http://schema.mydesignsystem.com/event-latest-teaser.schema.json",
-  "title": "Event Latest Teaser",
-  "description": "Display an event teaser with date, title and location",
-  "type": "object",
-  "properties": {
-    "date": {
-      "title": "Date",
-      "description": "The date of the event",
-      "type": "string",
-      "format": "date",
-      "examples": [
-        "12.30.2022"
-      ]
-    },
-    "calendar": {
-      "type": "object",
-      "title": "Calendar",
-      "description": "Calendar icon to display the date",
-      "properties": {
-        "month": {
-          "title": "Month",
-          "description": "The month of the event",
-          "type": "string",
-          "examples": [
-            "Dec"
-          ]
-        },
-        "day": {
-          "title": "Day",
-          "description": "The day of the event",
-          "type": "string",
-          "examples": [
-            "30"
-          ]
-        }
-      },
-      "additionalProperties": false
-    },
-    "title": {
-      "title": "Headline",
-      "description": "Title of the event",
-      "type": "string",
-      "format": "markdown",
-      "examples": [
-        "This is a event teaser title"
-      ]
-    },
-    "location": {
-      "title": "Location",
-      "description": "Location of the event",
-      "type": "string",
-      "format": "markdown",
-      "examples": [
-        "This is a location"
-      ]
-    },
-    "url": {
-      "title": "URL",
-      "description": "The event entry URL to link",
-      "type": "string",
-      "format": "uri",
-      "examples": [
-        "https://example.com"
-      ]
-    },
-    "cta": {
-      "title": "Call to Action",
-      "description": "Text for the call to action",
-      "type": "string",
-      "examples": [
-        "Show event"
-      ]
-    },
-    "ariaLabel": {
-      "title": "ARIA Label",
-      "description": "ARIA label for accessibility",
-      "type": "string",
-      "examples": [
-        "Event teaser for "
-      ]
-    },
-    "className": {
-      "type": "string"
-    },
-    "type": {
-      "const": "event-latest-teaser"
-    }
-  },
-  "additionalProperties": false,
-  "required": [
-    "title",
-    "date",
-    "location"
-  ]
-}

package/dist/components/event-latest-teaser/event-latest-teaser.schema.json

@@ -1,73 +0,0 @@
-{
-  "$schema": "http://json-schema.org/draft-07/schema#",
-  "$id": "http://schema.mydesignsystem.com/event-latest-teaser.schema.json",
-  "title": "Event Latest Teaser",
-  "description": "Display an event teaser with date, title and location",
-  "type": "object",
-  "properties": {
-    "date": {
-      "title": "Date",
-      "description": "The date of the event",
-      "type": "string",
-      "format": "date",
-      "examples": ["12.30.2022"]
-    },
-    "calendar": {
-      "type": "object",
-      "title": "Calendar",
-      "description": "Calendar icon to display the date",
-      "properties": {
-        "month": {
-          "title": "Month",
-          "description": "The month of the event",
-          "type": "string",
-          "examples": ["Dec"]
-        },
-        "day": {
-          "title": "Day",
-          "description": "The day of the event",
-          "type": "string",
-          "examples": ["30"]
-        }
-      }
-    },
-    "title": {
-      "title": "Headline",
-      "description": "Title of the event",
-      "type": "string",
-      "format": "markdown",
-      "examples": ["This is a event teaser title"]
-    },
-    "location": {
-      "title": "Location",
-      "description": "Location of the event",
-      "type": "string",
-      "format": "markdown",
-      "examples": ["This is a location"]
-    },
-    "url": {
-      "title": "URL",
-      "description": "The event entry URL to link",
-      "type": "string",
-      "format": "uri",
-      "examples": ["https://example.com"]
-    },
-    "cta": {
-      "title": "Call to Action",
-      "description": "Text for the call to action",
-      "type": "string",
-      "examples": ["Show event"]
-    },
-    "ariaLabel": {
-      "title": "ARIA Label",
-      "description": "ARIA label for accessibility",
-      "type": "string",
-      "examples": ["Event teaser for "]
-    },
-    "className": {
-      "type": "string"
-    }
-  },
-  "additionalProperties": false,
-  "required": ["title", "date", "location"]
-}

package/dist/components/event-latest-teaser/index.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import { HTMLAttributes } from "react";
-import { EventLatestTeaserProps } from "../../EventLatestTeaserProps-fc9d3281.js";
-declare const EventLatestTeaserContextDefault: import("react").ForwardRefExoticComponent<EventLatestTeaserProps & HTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;
-declare const EventLatestTeaserContext: import("react").Context<import("react").ForwardRefExoticComponent<EventLatestTeaserProps & HTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>>;
-declare const EventLatestTeaser: import("react").ForwardRefExoticComponent<EventLatestTeaserProps & HTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;
-export type { EventLatestTeaserProps };
-export { EventLatestTeaserContextDefault, EventLatestTeaserContext, EventLatestTeaser };

package/dist/components/event-latest-teaser/index.js

@@ -1,18 +0,0 @@
-import "./event-latest-teaser.css";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import classnames from 'classnames';
-import { forwardRef, createContext, useContext } from 'react';
-import { Icon } from '@kickstartds/base/lib/icon';
-import { Container } from '@kickstartds/core/lib/container';
-
-const EventLatestTeaserContextDefault = forwardRef(({ date, title, cta, calendar, url, location, ariaLabel, className, ...rest }, ref) => {
-    return (jsx(Container, { name: "event-latest-teaser", children: jsxs("a", { className: classnames(className, "dsa-event-latest-teaser"), ...rest, href: url, ref: ref, "aria-label": ariaLabel, children: [jsxs("span", { className: "dsa-event-latest-teaser__content", children: [jsxs("span", { className: "dsa-event-latest-teaser-calendar", children: [jsx("span", { className: "dsa-event-latest-teaser-calendar__day", children: calendar.day }), jsx("span", { className: "dsa-event-latest-teaser-calendar__month", children: calendar.month })] }), jsxs("span", { className: "dsa-event-latest-teaser__text", children: [jsx("span", { className: "dsa-event-latest-teaser__title", children: title }), jsxs("span", { className: "dsa-event-latest-teaser__infos", children: [jsxs("span", { className: "dsa-event-latest-teaser__info", children: [jsx(Icon, { "aria-hidden": true, icon: "date" }), date] }), jsxs("span", { className: "dsa-event-latest-teaser__info", children: [jsx(Icon, { "aria-hidden": true, icon: "map-pin" }), location] })] })] })] }), jsxs("span", { className: "dsa-event-latest-teaser__cta", children: [jsx("span", { children: cta }), jsx(Icon, { "aria-hidden": true, icon: "chevron-right" })] })] }) }));
-});
-const EventLatestTeaserContext = createContext(EventLatestTeaserContextDefault);
-const EventLatestTeaser = forwardRef((props, ref) => {
-    const Component = useContext(EventLatestTeaserContext);
-    return jsx(Component, { ...props, ref: ref });
-});
-EventLatestTeaser.displayName = "EventLatestTeaser";
-
-export { EventLatestTeaser, EventLatestTeaserContext, EventLatestTeaserContextDefault };

package/dist/components/event-location/event-location.css

@@ -1,71 +0,0 @@
-.l-container--event-location {
-  /* stylelint-disable-next-line property-no-unknown */
-  container-name: event-location;
-}
-
-.l-container--event-location + .l-container--event-location {
-  margin-top: var(--ks-spacing-stack-m);
-}
-
-.dsa-event-location {
-  --dsa-event-location__icon--size: calc(var(--ks-font-size-copy-m) * var(--ks-line-height-copy-m));
-  flex-wrap: wrap;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-m);
-  background-color: var(--ks-background-color-accent);
-  padding: var(--ks-spacing-inset-m);
-  border-radius: var(--ks-border-radius-surface);
-  --dsa-event-location__info--flex-basis: 280px;
-  --dsa-event-location__appointments--min-width: 12em;
-}
-.dsa-event-location--spacious {
-  --dsa-event-location__info--flex-basis: 50%;
-  --dsa-event-location__appointments--min-width: 20em;
-}
-.dsa-event-location__info {
-  display: flex;
-  gap: var(--ks-spacing-inline-xs);
-  flex-shrink: 1;
-  flex-grow: 1;
-  flex-basis: var(--dsa-event-location__info--flex-basis, 280px);
-}
-.dsa-event-location__icon {
-  color: var(--ks-text-color-primary);
-  width: var(--dsa-event-location__icon--size);
-  height: var(--dsa-event-location__icon--size);
-  flex-shrink: 0;
-}
-.dsa-event-location__text {
-  display: flex;
-  flex-direction: column;
-  gap: var(--ks-spacing-stack-s);
-}
-.dsa-event-location__name {
-  font: var(--ks-font-interface-m);
-  color: var(--dsa-topic--color);
-  font-weight: var(--dsa-topic--font-weight);
-}
-.dsa-event-location__links {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  gap: var(--ks-spacing-xxs);
-}
-.dsa-event-location__link {
-  width: fit-content;
-  font: var(--ks-font-interface-s);
-}
-.dsa-event-location__appointments {
-  display: grid;
-  justify-content: flex-end;
-  gap: var(--ks-spacing-stack-s);
-  flex-grow: 100;
-  flex-shrink: 0;
-  grid-template-columns: repeat(auto-fill, minmax(min(var(--dsa-event-location__appointments--min-width, 12em), 100%), 1fr));
-  font: var(--ks-font-interface-s);
-}
-.dsa-event-location .l-container--rich-text {
-  container-type: normal;
-}

package/dist/components/event-location/event-location.schema.dereffed.json

@@ -1,126 +0,0 @@
-{
-  "$schema": "http://json-schema.org/draft-07/schema#",
-  "$id": "http://schema.mydesignsystem.com/event-location.schema.json",
-  "title": "Event Location",
-  "type": "object",
-  "properties": {
-    "dates": {
-      "title": "Dates",
-      "description": "List of dates of the event",
-      "type": "array",
-      "items": {
-        "$schema": "http://json-schema.org/draft-07/schema#",
-        "$id": "http://schema.mydesignsystem.com/event-appointment.schema.json",
-        "title": "Event Appointment",
-        "type": "object",
-        "properties": {
-          "date": {
-            "title": "Date",
-            "description": "Date of the appointment",
-            "type": "string",
-            "format": "date",
-            "examples": [
-              "2025-09-18"
-            ]
-          },
-          "time": {
-            "title": "Time",
-            "description": "Time of the appointment",
-            "type": "string",
-            "examples": [
-              "09:00 – 17:00"
-            ]
-          },
-          "label": {
-            "title": "CTA Label",
-            "description": "Label for the call to action button",
-            "type": "string",
-            "examples": [
-              "Register"
-            ]
-          },
-          "url": {
-            "title": "URL",
-            "description": "URL for the call to action button",
-            "type": "string",
-            "format": "uri",
-            "default": "#"
-          },
-          "newTab": {
-            "title": "Open in New Tab",
-            "description": "Whether the link should open in a new tab",
-            "type": "boolean",
-            "default": true
-          },
-          "ariaLabel": {
-            "title": "Aria Label",
-            "description": "Aria label for the link",
-            "type": "string",
-            "default": "Event Appointment"
-          },
-          "type": {
-            "const": "event-appointment"
-          }
-        },
-        "additionalProperties": false
-      }
-    },
-    "locationName": {
-      "title": "Location Name",
-      "description": "Name of the event location",
-      "type": "string",
-      "examples": [
-        "Berlin Congress Center"
-      ]
-    },
-    "displayMode": {
-      "title": "Display Mode",
-      "description": "Spacious is recommended for 1-2 appointments, Compact for more than 2.",
-      "type": "string",
-      "enum": [
-        "spacious",
-        "compact"
-      ],
-      "default": "spacious"
-    },
-    "address": {
-      "title": "Address",
-      "description": "Address of the appointment",
-      "type": "string",
-      "examples": [
-        "Berlin Congress Center<br />Alexanderplatz 1<br />10178 Berlin"
-      ]
-    },
-    "links": {
-      "title": "Links",
-      "description": "Links related to the event location",
-      "type": "array",
-      "items": {
-        "type": "object",
-        "properties": {
-          "url": {
-            "type": "string",
-            "format": "uri"
-          },
-          "label": {
-            "type": "string"
-          },
-          "newTab": {
-            "type": "boolean",
-            "default": true,
-            "description": "Open link in a new tab"
-          }
-        },
-        "required": [
-          "url",
-          "label"
-        ],
-        "additionalProperties": false
-      }
-    },
-    "type": {
-      "const": "event-location"
-    }
-  },
-  "additionalProperties": false
-}

package/dist/components/event-location/event-location.schema.json

@@ -1,61 +0,0 @@
-{
-  "$schema": "http://json-schema.org/draft-07/schema#",
-  "$id": "http://schema.mydesignsystem.com/event-location.schema.json",
-  "title": "Event Location",
-  "type": "object",
-  "properties": {
-    "dates": {
-      "title": "Dates",
-      "description": "List of dates of the event",
-      "type": "array",
-      "items": {
-        "$ref": "http://schema.mydesignsystem.com/event-appointment.schema.json"
-      }
-    },
-    "locationName": {
-      "title": "Location Name",
-      "description": "Name of the event location",
-      "type": "string",
-      "examples": ["Berlin Congress Center"]
-    },
-    "displayMode": {
-      "title": "Display Mode",
-      "description": "Spacious is recommended for 1-2 appointments, Compact for more than 2.",
-      "type": "string",
-      "enum": ["spacious", "compact"],
-      "default": "spacious"
-    },
-    "address": {
-      "title": "Address",
-      "description": "Address of the appointment",
-      "type": "string",
-      "examples": [
-        "Berlin Congress Center<br />Alexanderplatz 1<br />10178 Berlin"
-      ]
-    },
-    "links": {
-      "title": "Links",
-      "description": "Links related to the event location",
-      "type": "array",
-      "items": {
-        "type": "object",
-        "properties": {
-          "url": {
-            "type": "string",
-            "format": "uri"
-          },
-          "label": {
-            "type": "string"
-          },
-          "newTab": {
-            "type": "boolean",
-            "default": true,
-            "description": "Open link in a new tab"
-          }
-        },
-        "required": ["url", "label"]
-      }
-    }
-  },
-  "additionalProperties": false
-}

package/dist/components/event-location/index.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { EventLocationProps } from "../../EventLocationProps-871bc198.js";
-declare const EventLocationContextDefault: import("react").ForwardRefExoticComponent<EventLocationProps & import("react").RefAttributes<HTMLDivElement>>;
-declare const EventLocationContext: import("react").Context<import("react").ForwardRefExoticComponent<EventLocationProps & import("react").RefAttributes<HTMLDivElement>>>;
-declare const EventLocation: import("react").ForwardRefExoticComponent<EventLocationProps & import("react").RefAttributes<HTMLDivElement>>;
-export type { EventLocationProps };
-export { EventLocationContextDefault, EventLocationContext, EventLocation };

package/dist/components/event-location/index.js

@@ -1,18 +0,0 @@
-import "./event-location.css";
-import { forwardRef, createElement, createContext, useContext } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import classnames from 'classnames';
-import { RichText } from '@kickstartds/base/lib/rich-text';
-import { Icon } from '@kickstartds/base/lib/icon';
-import { EventAppointment } from '../event-appointment/index.js';
-import { Container } from '@kickstartds/core/lib/container';
-
-const EventLocationContextDefault = forwardRef(({ locationName, address, dates, links, displayMode, ...rest }, ref) => (jsx(Container, { name: "event-location", children: jsxs("div", { className: classnames("dsa-event-location", displayMode === "spacious" && `dsa-event-location--spacious`), ...rest, ref: ref, children: [address && (jsxs("div", { className: "dsa-event-location__info ", children: [jsx(Icon, { className: "dsa-event-location__icon", icon: "map-pin", "aria-hidden": true }), jsxs("div", { className: "dsa-event-location__text", children: [jsx("span", { className: "sr-only", children: "Address:" }), jsxs("address", { className: "dsa-event-location__address", children: [locationName && (jsx("span", { className: "dsa-event-location__name", children: locationName })), address && jsx(RichText, { text: address })] }), links && links.length > 0 && (jsx("div", { className: "dsa-event-location__links", children: links.map((link, index) => (jsx("a", { href: link.url, target: link.newTab ? "_blank" : "_self", className: "dsa-event-location__link", children: link.label }, index))) }))] })] })), dates && dates.length > 0 && (jsxs("div", { className: "dsa-event-location__appointments", children: [jsx("span", { className: "sr-only", children: "Appointments:" }), dates.map((item, index) => (createElement(EventAppointment, { ...item, key: index })))] }))] }) })));
-const EventLocationContext = createContext(EventLocationContextDefault);
-const EventLocation = forwardRef((props, ref) => {
-    const Component = useContext(EventLocationContext);
-    return jsx(Component, { ...props, ref: ref });
-});
-EventLocation.displayName = "EventLocation";
-
-export { EventLocation, EventLocationContext, EventLocationContextDefault };

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

@@ -1,47 +0,0 @@
-/// <reference types="react" />
-import { HTMLAttributes } from "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.
- */
-interface PaginationProps {
-    ariaLabels?: {
-        /**
-         * Aria label for the previous page link
-         */
-        previousPage?: string;
-        /**
-         * Aria label for the next page link
-         */
-        nextPage?: string;
-        /**
-         * Aria label for the link to skip to the first page
-         */
-        skipToFirstPage?: string;
-        /**
-         * Aria label for the link to skip to the last page
-         */
-        skipToLastPage?: string;
-        /**
-         * Aria label for the link to go to a specific page (will be placed before the page number)
-         */
-        goToPage?: string;
-    };
-    pages?: {
-        /**
-         * The URL to the page
-         */
-        url: string;
-        /**
-         * Indicates if the page is currently active
-         */
-        active?: boolean;
-    }[];
-}
-declare const PaginationContextDefault: import("react").ForwardRefExoticComponent<PaginationProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-declare const PaginationContext: import("react").Context<import("react").ForwardRefExoticComponent<PaginationProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
-declare const Pagination: import("react").ForwardRefExoticComponent<PaginationProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-export type { PaginationProps };
-export { PaginationContextDefault, PaginationContext, Pagination };

package/dist/components/pagination/index.js

@@ -1,52 +0,0 @@
-import "./pagination.css";
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import classnames from 'classnames';
-import { forwardRef, createContext, useContext } from 'react';
-import { Icon } from '@kickstartds/base/lib/icon';
-import { Link } from '@kickstartds/base/lib/link';
-
-const PaginationContextDefault = forwardRef(({ pages, ariaLabels }, ref) => {
-    return (jsxs("div", { className: "dsa-pagination", ref: ref, children: [pages.findIndex((page) => page.active) !== 0 && (jsxs(Fragment, { children: [jsx(Link, { "aria-label": ariaLabels.skipToFirstPage || "Skip to first page", className: "dsa-pagination__link dsa-pagination__link--icon dsa-pagination__link--skip-back", href: pages[0]?.url, children: jsx(Icon, { icon: "skip-back" }) }), jsx(Link, { "aria-label": ariaLabels.previousPage || "Go to previous page", className: "dsa-pagination__link dsa-pagination__link--icon dsa-pagination__link--prev", href: (() => {
-                            const activeIndex = pages.findIndex((page) => page.active);
-                            // Use the url of the next item after the active one, or "#" if at the end
-                            return pages[activeIndex - 1]?.url || "#";
-                        })(), children: jsx(Icon, { icon: "chevron-left" }) })] })), (() => {
-                const activeIndex = pages.findIndex((page) => page.active);
-                let lastRenderedIndex = -1;
-                const result = [];
-                pages.forEach((page, index) => {
-                    const isFirst = index === 0;
-                    const isLast = index === pages.length - 1;
-                    const isActive = page.active;
-                    const isBeforeActive = index === activeIndex - 1;
-                    const isAfterActive = index === activeIndex + 1;
-                    const shouldRender = isFirst || isLast || isActive || isBeforeActive || isAfterActive;
-                    if (!shouldRender) {
-                        if (index - lastRenderedIndex > 1 &&
-                            (result.length === 0 ||
-                                result[result.length - 1]?.type !== "div" ||
-                                result[result.length - 1]?.props?.className !==
-                                    "dsa-pagination__placeholder")) {
-                            result.push(jsx("div", { className: "dsa-pagination__placeholder", children: jsx("span", { children: "\u2026" }) }, `dsa-pagination__placeholder-${index}`));
-                        }
-                        return;
-                    }
-                    result.push(jsx(Link, { className: classnames("dsa-pagination__link", page.active && "dsa-pagination__link--active"), "aria-label": `${ariaLabels.goToPage} ${index + 1}` ||
-                            `Go to page ${index + 1}`, href: page.url, children: (index + 1).toString() }, index));
-                    lastRenderedIndex = index;
-                });
-                return result;
-            })(), pages.findIndex((page) => page.active) !== pages.length - 1 && (jsxs(Fragment, { children: [jsx(Link, { className: "dsa-pagination__link dsa-pagination__link--icon dsa-pagination__link--next", "aria-label": ariaLabels.nextPage || "Go to next page", href: (() => {
-                            const activeIndex = pages.findIndex((page) => page.active);
-                            // Use the url of the next item after the active one, or "#" if at the end
-                            return pages[activeIndex + 1]?.url || "#";
-                        })(), children: jsx(Icon, { icon: "chevron-right" }) }), jsx(Link, { "aria-label": ariaLabels.skipToLastPage || "Skip to last page", className: "dsa-pagination__link dsa-pagination__link--icon dsa-pagination__link--skip-forward", href: pages[pages.length - 1]?.url, children: jsx(Icon, { icon: "skip-forward" }) })] }))] }));
-});
-const PaginationContext = createContext(PaginationContextDefault);
-const Pagination = forwardRef((props, ref) => {
-    const Component = useContext(PaginationContext);
-    return jsx(Component, { ...props, ref: ref });
-});
-Pagination.displayName = "Pagination";
-
-export { Pagination, PaginationContext, PaginationContextDefault };

package/dist/components/pagination/pagination.css

@@ -1,66 +0,0 @@
-.dsa-pagination {
-  --dsa-pagination--gap: var(--ks-spacing-stack-xs);
-  --dsa-pagination--background: transparent;
-  --dsa-pagination--background_hover: var(--ks-color-fg-alpha-8);
-  --dsa-pagination--color: var(--ks-text-color-interface-interactive);
-  --dsa-pagination--color_hover: var(--ks-text-color-interface-interactive);
-  --dsa-pagination--border-radius: var(--ks-border-radius-control);
-  --dsa-pagination--border: var(--ks-border-width-default) solid var(--ks-border-color-interface-interactive);
-  --dsa-pagination--width: 3.75em;
-  --dsa-pagination--font: var(--ks-font-interface-s);
-  --dsa-pagination--padding: 0.5em;
-  --dsa-pagination__icon--size: 1.25em;
-  --dsa-pagination--background_active: var(--ks-background-color-primary-interactive);
-  --dsa-pagination--background_active_hover: var(--ks-background-color-primary-interactive-hover);
-  --dsa-pagination--color_active: var(--dsa-text-color-on-primary);
-  --dsa-pagination--color_active_hover: var(--dsa-text-color-on-primary);
-}
-@media (min-width: 768px) {
-  .dsa-pagination {
-    --dsa-pagination--border: none;
-    --dsa-pagination--width: 3em;
-  }
-}
-
-.dsa-pagination {
-  display: flex;
-  gap: var(--dsa-pagination--gap, var(--ks-spacing-stack-xs));
-  flex-wrap: wrap;
-  justify-content: center;
-}
-.dsa-pagination__link, .dsa-pagination__placeholder {
-  --g-link--background: var(--dsa-pagination--background, transparent);
-  --g-link--background-hover: var(--dsa-pagination--background_hover, var(--ks-color-fg-alpha-8));
-  --g-link--color: var(--dsa-pagination--color, var(--ks-text-color-interface-interactive));
-  --g-link--color-hover: var(--dsa-pagination--color_hover, var(--ks-text-color-interface-interactive));
-  --g-link--border-radius: var(--dsa-pagination--border-radius, var(--ks-border-radius-control));
-  border: var(--dsa-pagination--border, var(--ks-border-width-default) solid var(--ks-border-color-interface-interactive));
-  border-radius: var(--dsa-pagination--border-radius, var(--ks-border-radius-control));
-  width: var(--dsa-pagination--width, 4em);
-  font: var(--dsa-pagination--font, var(--ks-font-interface-s));
-  line-height: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--dsa-pagination--padding, 0.5em);
-  aspect-ratio: 1;
-}
-.dsa-pagination__link--icon .icon, .dsa-pagination__placeholder--icon .icon {
-  width: var(--dsa-pagination__icon--size, 1.25em);
-  height: var(--dsa-pagination__icon--size, 1.25em);
-}
-.dsa-pagination__link--active, .dsa-pagination__placeholder--active {
-  --g-link--background: var(--dsa-pagination--background_active, var(--ks-background-color-primary-interactive));
-  --g-link--background-hover: var(
-    --dsa-pagination--background_active,
-    var(--ks-background-color-primary-interactive-hover)
-  );
-  --g-link--color: var(--dsa-pagination--color_active, var(--dsa-text-color-on-primary));
-  --g-link--color-hover: var(--dsa-pagination--color_active_hover, var(--dsa-text-color-on-primary));
-}
-.dsa-pagination__placeholder {
-  line-height: 0.25;
-}
-.dsa-pagination__placeholder span {
-  transform: translateY(-0.15em);
-}