@kickstartds/ds-agency-premium 1.6.71 → 1.6.72--canary.43.2474.0

package/dist/components/page/page.schema.json

@@ -1,6 +1,6 @@
 {
   "$schema": "http://json-schema.org/draft-07/schema#",
-  "$id": "http://schema.mydesignsystem.com/cms/page.schema.json",
+  "$id": "http://cms.mydesignsystem.com/page.schema.json",
   "title": "Page",
   "description": "Abstracts a page concept into JSON schema",
   "type": "object",
@@ -47,7 +47,7 @@
       }
     },
     "seo": {
-      "$ref": "http://schema.mydesignsystem.com/cms/seo.schema.json"
+      "$ref": "http://cms.mydesignsystem.com/seo.schema.json"
     }
   }
 }

package/dist/components/page-wrapper/index.js

@@ -1,4 +1,3 @@
-import "./tokens.css";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import Providers from '../providers/index.js';
 import '@kickstartds/base/lib/global/base';
@@ -7,6 +6,7 @@ import '../button/index.js';
 import 'react';
 import 'classnames';
 import '@kickstartds/base/lib/button';
+import '../../helpers-12f48df8.js';
 import '../section/index.js';
 import '@kickstartds/core/lib/react';
 import '@kickstartds/base/lib/section';
@@ -70,6 +70,30 @@ var IconSprite = (() => /*#__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",
+            children: [/*#__PURE__*/ jsx("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"
+                }), /*#__PURE__*/ jsx("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"
+                })]
+        }), /*#__PURE__*/ jsxs("symbol", {
+            id: "icon-skip-forward",
+            viewBox: "0 0 24 24",
+            children: [/*#__PURE__*/ jsx("path", {
+                    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"
+                }), /*#__PURE__*/ jsx("path", {
+                    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"
+                })]
         }), /*#__PURE__*/ jsxs("symbol", {
             id: "icon-zoom",
             viewBox: "0 0 24 24",
@@ -90,6 +114,16 @@ var IconSprite = (() => /*#__PURE__*/ jsxs("svg", {
             children: /*#__PURE__*/ jsx("path", {
                 d: "M19 3H17V2C17 1.4 16.6 1 16 1C15.4 1 15 1.4 15 2V3H9V2C9 1.4 8.6 1 8 1C7.4 1 7 1.4 7 2V3H5C3.3 3 2 4.3 2 6V20C2 21.7 3.3 23 5 23H19C20.7 23 22 21.7 22 20V6C22 4.3 20.7 3 19 3ZM5 5H7V6C7 6.6 7.4 7 8 7C8.6 7 9 6.6 9 6V5H15V6C15 6.6 15.4 7 16 7C16.6 7 17 6.6 17 6V5H19C19.6 5 20 5.4 20 6V9H4V6C4 5.4 4.4 5 5 5ZM19 21H5C4.4 21 4 20.6 4 20V11H20V20C20 20.6 19.6 21 19 21Z"
             })
+        }), /*#__PURE__*/ jsxs("symbol", {
+            id: "icon-download",
+            viewBox: "0 0 24 24",
+            children: [/*#__PURE__*/ jsx("path", {
+                    d: "M2 19V15C2 14.4477 2.44772 14 3 14C3.55228 14 4 14.4477 4 15V19L4.00488 19.0986C4.02757 19.3276 4.12883 19.5429 4.29297 19.707C4.48051 19.8946 4.73478 20 5 20H19C19.2652 20 19.5195 19.8946 19.707 19.707C19.8946 19.5195 20 19.2652 20 19V15C20 14.4477 20.4477 14 21 14C21.5523 14 22 14.4477 22 15V19C22 19.7957 21.6837 20.5585 21.1211 21.1211C20.5585 21.6837 19.7957 22 19 22H5C4.20435 22 3.44152 21.6837 2.87891 21.1211C2.3163 20.5585 2 19.7956 2 19Z"
+                }), /*#__PURE__*/ jsx("path", {
+                    d: "M16.293 9.29297C16.6835 8.90244 17.3165 8.90244 17.707 9.29297C18.0976 9.68349 18.0976 10.3165 17.707 10.707L12.707 15.707C12.3165 16.0976 11.6835 16.0976 11.293 15.707L6.29297 10.707C5.90244 10.3165 5.90244 9.68349 6.29297 9.29297C6.68349 8.90244 7.31651 8.90244 7.70703 9.29297L12 13.5859L16.293 9.29297Z"
+                }), /*#__PURE__*/ jsx("path", {
+                    d: "M11 15V3C11 2.44772 11.4477 2 12 2C12.5523 2 13 2.44772 13 3V15C13 15.5523 12.5523 16 12 16C11.4477 16 11 15.5523 11 15Z"
+                })]
         }), /*#__PURE__*/ jsx("symbol", {
             id: "icon-email",
             viewBox: "0 0 24 24",
@@ -102,6 +136,14 @@ var IconSprite = (() => /*#__PURE__*/ jsxs("svg", {
             children: /*#__PURE__*/ jsx("path", {
                 d: "M14 23H10C9.4 23 9 22.6 9 22V15H7C6.4 15 6 14.6 6 14V10C6 9.4 6.4 9 7 9H9V7C9 3.7 11.7 1 15 1H18C18.6 1 19 1.4 19 2V6C19 6.6 18.6 7 18 7H15V9H18C18.3 9 18.6 9.1 18.8 9.4C19 9.7 19 9.9 19 10.2L18 14.2C17.9 14.6 17.5 15 17 15H15V22C15 22.6 14.6 23 14 23ZM11 21H13V14C13 13.4 13.4 13 14 13H16.2L16.7 11H14C13.4 11 13 10.6 13 10V7C13 5.9 13.9 5 15 5H17V3H15C12.8 3 11 4.8 11 7V10C11 10.6 10.6 11 10 11H8V13H10C10.6 13 11 13.4 11 14V21Z"
             })
+        }), /*#__PURE__*/ jsxs("symbol", {
+            id: "icon-file",
+            viewBox: "0 0 24 24",
+            children: [/*#__PURE__*/ jsx("path", {
+                    d: "M3 20V4C3 3.20435 3.3163 2.44152 3.87891 1.87891C4.44152 1.3163 5.20435 1 6 1H13L13.0986 1.00488C13.3276 1.02757 13.5429 1.12883 13.707 1.29297L20.707 8.29297C20.8946 8.48051 21 8.73478 21 9V20C21 20.7957 20.6837 21.5585 20.1211 22.1211C19.5585 22.6837 18.7957 23 18 23H6C5.20435 23 4.44152 22.6837 3.87891 22.1211C3.3163 21.5585 3 20.7956 3 20ZM5 20C5 20.2652 5.10543 20.5195 5.29297 20.707C5.48051 20.8946 5.73478 21 6 21H18C18.2652 21 18.5195 20.8946 18.707 20.707C18.8946 20.5195 19 20.2652 19 20V9.41406L12.5859 3H6C5.73478 3 5.48051 3.10543 5.29297 3.29297C5.10543 3.48051 5 3.73478 5 4V20Z"
+                }), /*#__PURE__*/ jsx("path", {
+                    d: "M12 2C12 1.44772 12.4477 1 13 1C13.5523 1 14 1.44772 14 2V8H20C20.5523 8 21 8.44772 21 9C21 9.55228 20.5523 10 20 10H13C12.4477 10 12 9.55228 12 9V2Z"
+                })]
         }), /*#__PURE__*/ jsxs("symbol", {
             id: "icon-home",
             viewBox: "0 0 24 24",
@@ -140,6 +182,14 @@ var IconSprite = (() => /*#__PURE__*/ jsxs("svg", {
                 }), /*#__PURE__*/ jsx("path", {
                     d: "M10.7071 6.29289C10.3166 5.90237 9.68342 5.90237 9.29289 6.29289C8.90237 6.68342 8.90237 7.31658 9.29289 7.70711L12.5858 11H3C2.44772 11 2 11.4477 2 12C2 12.5523 2.44772 13 3 13H12.5858L9.29289 16.2929C8.90237 16.6834 8.90237 17.3166 9.29289 17.7071C9.68342 18.0976 10.3166 18.0976 10.7071 17.7071L15.7071 12.7071C16.0976 12.3166 16.0976 11.6834 15.7071 11.2929L10.7071 6.29289Z"
                 })]
+        }), /*#__PURE__*/ jsxs("symbol", {
+            id: "icon-map-pin",
+            viewBox: "0 0 24 24",
+            children: [/*#__PURE__*/ jsx("path", {
+                    d: "M12.5547 23.832C12.2188 24.056 11.7812 24.056 11.4453 23.832L12 23L12.5547 23.832ZM20 10C20 7.87827 19.1575 5.84306 17.6572 4.34277C16.1569 2.84248 14.1217 2 12 2C9.87827 2 7.84306 2.84248 6.34277 4.34277C4.84248 5.84306 4 7.87827 4 10C4 13.098 6.01539 16.1045 8.22559 18.4375C9.31025 19.5824 10.3988 20.5195 11.2168 21.1709C11.5207 21.4129 11.7872 21.6132 12 21.7705C12.2128 21.6132 12.4793 21.4129 12.7832 21.1709C13.6012 20.5195 14.6898 19.5824 15.7744 18.4375C17.9846 16.1045 20 13.098 20 10ZM22 10C22 13.9019 19.5154 17.3955 17.2256 19.8125C16.0603 21.0425 14.8988 22.043 14.0293 22.7354C13.594 23.082 13.2299 23.3533 12.9727 23.5391C12.8442 23.6318 12.7419 23.7037 12.6709 23.7529C12.6355 23.7774 12.6073 23.7964 12.5879 23.8096C12.5782 23.8162 12.57 23.8215 12.5645 23.8252C12.5618 23.827 12.5593 23.829 12.5576 23.8301L12.5557 23.8311C12.5554 23.8312 12.5547 23.8321 12 23C11.4453 23.8321 11.4456 23.8322 11.4453 23.832L11.4443 23.8311L11.4424 23.8301C11.4407 23.829 11.4382 23.827 11.4355 23.8252C11.43 23.8215 11.4218 23.8162 11.4121 23.8096C11.3927 23.7964 11.3645 23.7774 11.3291 23.7529C11.2581 23.7037 11.1558 23.6318 11.0273 23.5391C10.7701 23.3533 10.406 23.082 9.9707 22.7354C9.10124 22.043 7.93969 21.0425 6.77441 19.8125C4.48463 17.3955 2 13.9019 2 10C2 7.34784 3.05335 4.80407 4.92871 2.92871C6.80407 1.05335 9.34784 1.19209e-07 12 1.19209e-07C14.6522 1.19209e-07 17.1959 1.05335 19.0713 2.92871C20.9467 4.80407 22 7.34784 22 10Z"
+                }), /*#__PURE__*/ jsx("path", {
+                    d: "M14 10C14 8.89543 13.1046 8 12 8C10.8954 8 10 8.89543 10 10C10 11.1046 10.8954 12 12 12C13.1046 12 14 11.1046 14 10ZM16 10C16 12.2091 14.2091 14 12 14C9.79086 14 8 12.2091 8 10C8 7.79086 9.79086 6 12 6C14.2091 6 16 7.79086 16 10Z"
+                })]
         }), /*#__PURE__*/ jsx("symbol", {
             id: "icon-map",
             viewBox: "0 0 24 24",

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

@@ -0,0 +1,55 @@
+/// <reference types="react" />
+import { FC, 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 {
+    truncate?: boolean;
+    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 PageLink: FC<HTMLAttributes<HTMLAnchorElement> & {
+    active?: boolean;
+    url?: string;
+    label?: string;
+    num?: number;
+}>;
+declare const Placeholder: () => import("react/jsx-runtime").JSX.Element;
+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 { PageLink, Placeholder, PaginationContextDefault, PaginationContext, Pagination };

package/dist/components/pagination/index.js

@@ -0,0 +1,58 @@
+import "./pagination.css";
+import { forwardRef, createElement, createContext, useContext } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { Icon } from '@kickstartds/base/lib/icon';
+import { Link } from '@kickstartds/base/lib/link';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
+
+const defaults = {
+    "ariaLabels": {
+        "previousPage": "Go to previous page",
+        "nextPage": "Go to next page",
+        "skipToFirstPage": "Skip to first page",
+        "skipToLastPage": "Skip to last page",
+        "goToPage": "Go to page"
+    },
+    "pages": []
+};
+
+const PageLink = ({ active, url, label, num, ...props }) => (jsx(Link, { className: classnames("dsa-pagination__link", active && "dsa-pagination__link--active"), "aria-label": `${label} ${num}` || `Go to page ${num}`, "aria-current": active ? "page" : "false", href: url, ...props, children: num }));
+const Placeholder = () => (jsx("div", { className: "dsa-pagination__placeholder", children: jsx("span", { children: "\u2026" }) }));
+const PaginationContextDefault = forwardRef(({ pages = [], ariaLabels, truncate, ...props }, ref) => {
+    const activeIndex = pages.findIndex((page) => page.active);
+    return (jsxs("div", { className: "dsa-pagination", ...props, ref: ref, 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, hidden: activeIndex === 0, 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: 
+                // Use the url of the next item after the active one
+                pages[activeIndex - 1]?.url, hidden: activeIndex === 0, children: jsx(Icon, { icon: "chevron-left" }) }), jsx("div", { className: "dsa-pagination__pages", children: truncate
+                    ? pages.reduce((result, 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 prevItem = result[result.length - 1];
+                        const shouldRender = isFirst ||
+                            isLast ||
+                            isActive ||
+                            isBeforeActive ||
+                            isAfterActive;
+                        if (shouldRender) {
+                            result.push(createElement(PageLink, { ...page, num: index + 1, label: ariaLabels?.goToPage, key: page.url }));
+                        }
+                        else if (prevItem.type !== Placeholder) {
+                            result.push(jsx(Placeholder, {}, `dsa-pagination__placeholder-${index}`));
+                        }
+                        return result;
+                    }, [])
+                    : pages.map((page, index) => (createElement(PageLink, { ...page, num: index + 1, label: ariaLabels?.goToPage, key: page.url }))) }), jsx(Link, { className: "dsa-pagination__link dsa-pagination__link--icon dsa-pagination__link--next", "aria-label": ariaLabels?.nextPage || "Go to next page", href: 
+                // Use the url of the next item after the active one
+                pages[activeIndex + 1]?.url, hidden: activeIndex === pages.length - 1, 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, hidden: activeIndex === pages.length - 1, children: jsx(Icon, { icon: "skip-forward" }) })] }));
+});
+const PaginationContext = createContext(PaginationContextDefault);
+const Pagination = forwardRef((props, ref) => {
+    const Component = useContext(PaginationContext);
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
+});
+Pagination.displayName = "Pagination";
+
+export { PageLink, Pagination, PaginationContext, PaginationContextDefault, Placeholder };

package/dist/components/pagination/pagination.css

@@ -0,0 +1,90 @@
+.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[aria-current=page] {
+  --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 span {
+  transform: translateY(-0.15em);
+}
+.dsa-pagination__placeholder {
+  line-height: 0.25;
+}
+.dsa-pagination__pages {
+  display: contents;
+}

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

@@ -0,0 +1,64 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/pagination.schema.json",
+  "title": "Pagination",
+  "type": "object",
+  "properties": {
+    "truncate": {
+      "type": "boolean"
+    },
+    "ariaLabels": {
+      "type": "object",
+      "properties": {
+        "previousPage": {
+          "type": "string",
+          "description": "Aria label for the previous page link",
+          "default": "Go to previous page"
+        },
+        "nextPage": {
+          "type": "string",
+          "description": "Aria label for the next page link",
+          "default": "Go to next page"
+        },
+        "skipToFirstPage": {
+          "type": "string",
+          "description": "Aria label for the link to skip to the first page",
+          "default": "Skip to first page"
+        },
+        "skipToLastPage": {
+          "type": "string",
+          "description": "Aria label for the link to skip to the last page",
+          "default": "Skip to last page"
+        },
+        "goToPage": {
+          "type": "string",
+          "description": "Aria label for the link to go to a specific page (will be placed before the page number)",
+          "default": "Go to page"
+        }
+      },
+      "additionalProperties": false
+    },
+    "pages": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "url": {
+            "type": "string",
+            "description": "The URL to the page"
+          },
+          "active": {
+            "type": "boolean",
+            "description": "Indicates if the page is currently active",
+            "default": false
+          }
+        },
+        "required": [
+          "url"
+        ],
+        "additionalProperties": false
+      }
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/pagination/pagination.schema.json

@@ -0,0 +1,60 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/pagination.schema.json",
+  "title": "Pagination",
+  "type": "object",
+  "properties": {
+    "truncate": {
+      "type": "boolean"
+    },
+    "ariaLabels": {
+      "type": "object",
+      "properties": {
+        "previousPage": {
+          "type": "string",
+          "description": "Aria label for the previous page link",
+          "default": "Go to previous page"
+        },
+        "nextPage": {
+          "type": "string",
+          "description": "Aria label for the next page link",
+          "default": "Go to next page"
+        },
+        "skipToFirstPage": {
+          "type": "string",
+          "description": "Aria label for the link to skip to the first page",
+          "default": "Skip to first page"
+        },
+        "skipToLastPage": {
+          "type": "string",
+          "description": "Aria label for the link to skip to the last page",
+          "default": "Skip to last page"
+        },
+        "goToPage": {
+          "type": "string",
+          "description": "Aria label for the link to go to a specific page (will be placed before the page number)",
+          "default": "Go to page"
+        }
+      }
+    },
+    "pages": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "url": {
+            "type": "string",
+            "description": "The URL to the page"
+          },
+          "active": {
+            "type": "boolean",
+            "description": "Indicates if the page is currently active",
+            "default": false
+          }
+        },
+        "required": ["url"]
+      }
+    }
+  },
+  "additionalProperties": false
+}