@kickstartds/ds-agency-premium 1.6.69--canary.45.1732.0 → 1.6.69--canary.45.1736.0

package/dist/components/page-wrapper/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 26 Jun 2025 11:30:46 GMT
+ * Generated on Thu, 26 Jun 2025 12:39:02 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-fg-to-bg-9-base);

package/dist/components/pagination/index.js

@@ -10,7 +10,32 @@ const PaginationContextDefault = forwardRef(({ pages }, ref) => {
                             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" }) })] })), pages.map((page, index) => (jsx(Link, { className: classnames("dsa-pagination__link", page.active && "dsa-pagination__link--active"), href: page.url, children: (index + 1).toString() }, index))), 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", href: (() => {
+                        })(), 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"), 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", 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 || "#";

package/dist/components/pagination/pagination.css

@@ -2,7 +2,7 @@
   display: flex;
   gap: var(--dsa-pagination--gap, var(--ks-spacing-stack-xs));
 }
-.dsa-pagination__link {
+.dsa-pagination__link, .dsa-pagination__placeholder {
   --g-link--background: transparent;
   --g-link--background-hover: var(--ks-color-fg-alpha-8);
   --g-link--color: var(--ks-text-color-interface-interactive);
@@ -17,14 +17,20 @@
   padding: 0.5em;
   aspect-ratio: 1;
 }
-.dsa-pagination__link--icon .icon {
+.dsa-pagination__link--icon .icon, .dsa-pagination__placeholder--icon .icon {
   width: 1.25em;
   height: 1.25em;
   fill: var(--g-link--color);
 }
-.dsa-pagination__link--active {
+.dsa-pagination__link--active, .dsa-pagination__placeholder--active {
   --g-link--background: var(--ks-background-color-primary-interactive);
   --g-link--background-hover: var(--ks-background-color-primary-interactive-hover);
   --g-link--color: var(--dsa-text-color-on-primary);
   --g-link--color-hover: var(--dsa-text-color-on-primary);
+}
+.dsa-pagination__placeholder {
+  line-height: 0.25;
+}
+.dsa-pagination__placeholder span {
+  transform: translateY(-0.15em);
 }

package/dist/components/presets.json

@@ -3012,7 +3012,7 @@
     "id": "industry-pagination--default",
     "group": "Industry/Pagination",
     "name": "Default",
-    "code": "<Pagination\n  pages={[\n    {\n      active: false,\n      url: 'https://example.com/page1'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page2'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page3'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page4'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page5'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page6'\n    },\n    {\n      active: true,\n      url: 'https://example.com/page7'\n    }\n  ]}\n />",
+    "code": "<Pagination\n  pages={[\n    {\n      active: false,\n      url: 'https://example.com/page1'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page2'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page3'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page4'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page5'\n    },\n    {\n      active: true,\n      url: 'https://example.com/page6'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page7'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page8'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page9'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page10'\n    },\n    {\n      url: 'https://example.com/page11'\n    },\n    {\n      url: 'https://example.com/page12'\n    }\n  ]}\n />",
     "args": {
       "pages": [
         {
@@ -3036,12 +3036,30 @@
           "url": "https://example.com/page5"
         },
         {
-          "active": false,
+          "active": true,
           "url": "https://example.com/page6"
         },
         {
-          "active": true,
+          "active": false,
           "url": "https://example.com/page7"
+        },
+        {
+          "active": false,
+          "url": "https://example.com/page8"
+        },
+        {
+          "active": false,
+          "url": "https://example.com/page9"
+        },
+        {
+          "active": false,
+          "url": "https://example.com/page10"
+        },
+        {
+          "url": "https://example.com/page11"
+        },
+        {
+          "url": "https://example.com/page12"
         }
       ]
     },

package/dist/tokens/themes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 26 Jun 2025 11:30:49 GMT
+ * Generated on Thu, 26 Jun 2025 12:39:04 GMT
  */
 :root [ks-theme=business] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -2727,7 +2727,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 26 Jun 2025 11:30:53 GMT
+ * Generated on Thu, 26 Jun 2025 12:39:08 GMT
  */
 :root [ks-theme=google] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -5458,7 +5458,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 26 Jun 2025 11:30:51 GMT
+ * Generated on Thu, 26 Jun 2025 12:39:06 GMT
  */
 :root [ks-theme=ngo] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -8459,7 +8459,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 26 Jun 2025 11:30:55 GMT
+ * Generated on Thu, 26 Jun 2025 12:39:10 GMT
  */
 :root [ks-theme=telekom] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);

package/dist/tokens/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 26 Jun 2025 11:30:46 GMT
+ * Generated on Thu, 26 Jun 2025 12:39:02 GMT
  */
 
 :root, [ks-theme] {

package/dist/tokens/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 26 Jun 2025 11:30:47 GMT
+ * Generated on Thu, 26 Jun 2025 12:39:02 GMT
  */
 
 export const KsBackgroundColorAccentBase = "#f3f3f4";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kickstartds/ds-agency-premium",
-  "version": "1.6.69--canary.45.1732.0",
+  "version": "1.6.69--canary.45.1736.0",
   "description": "",
   "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
   "bugs": {