@netlify/spark-ui 0.0.44 → 0.0.46-alpha

package/README.md

@@ -34,3 +34,9 @@ Tokens are converted into CSS variables using the [terrazzo](https://terrazzo.ap
 ### Rebuild CSS token variables
 
 When any files in this tokens directory are updated and merged into the `main` branch, the [build-tokens-css](https://github.com/netlify/netlify-bits/blob/main/.github/workflows/build-tokens-css.yml) GitHub Action is executed. This runs the `build:tokens` script, recreating the [tokens.css](https://github.com/netlify/netlify-bits/blob/main/packages/styles/tokens.css) file with updated CSS variables.
+
+The tokens file can also be rebuilt manually with the following command:
+
+```bash
+npm run build:tokens
+```

package/dist/analytics/analytics.d.ts

@@ -0,0 +1,8 @@
+export default class Analytics {
+    /**
+     * Pushes an event payload into the dataLayer.
+     * @param eventName e.g. 'www:search_query_changed'
+     * @param payload   additional key/value data
+     */
+    track(eventName: string, payload?: Record<string, any>): void;
+}

package/dist/analytics/index.d.ts

@@ -0,0 +1,4 @@
+import { default as GoogleTagManager } from './GoogleTagManager.astro';
+import { default as GoogleAnalytics } from './GoogleAnalytics.astro';
+import { default as Analytics } from './analytics';
+export { Analytics, GoogleAnalytics, GoogleTagManager };

package/dist/components/index.d.ts

@@ -5,5 +5,7 @@ export { default as SearchLink } from './preact/SearchModal/components/SearchLin
 export { default as SearchHeading } from './preact/SearchModal/components/SearchHeading/SearchHeading';
 export { default as SearchToggle } from './preact/SearchModal/components/SearchToggle/SearchToggle';
 export { default as SearchModal } from './preact/SearchModal/components/SearchModal/SearchModal';
-export { default as Tabs } from './Tabs.astro';
 export { type IconName } from './preact/Icon';
+export { default as Button } from './Button.astro';
+export { default as DeployToNetlifyButton } from './DeployToNetlifyButton.astro';
+export { default as Tabs } from './Tabs.astro';

package/dist/components/preact/SearchModal/hooks/useSearchLogger.d.ts

@@ -1,17 +1,26 @@
 import { SearchState } from '../types/search.types';
 /**
- * Hook that logs search-related events to your analytics Logger.
+ * Custom hook that logs search-related events for analytics.
  *
- * It will:
- * - Push a `searchQueryChanged` event whenever the search term changes.
- * - Push a `searchNoResults` event whenever a non-empty query returns zero results.
- * - Provide a click handler (`handleClick`) to log `searchResultClick` events.
+ * This hook tracks the following search events:
+ * - `spark_search:query_changed`: Logs when the search query changes.
+ * - `spark_search:no_results`: Logs when no results are found for a search.
+ * - `spark_search:result_clicked`: Logs when a search result is clicked.
  *
- * @param {SearchState} state - The current search state, containing:
- *   - `searchTerm` (string): the text the user has searched for.
- *   - `results` (Array<any>): the array of result objects returned.
- * @returns {{ handleClick: (e: Event) => void }}
- *   An object with a `handleClick` function that you can attach to result links to log clicks.
+ * It uses an instance of `Analytics` to track these events. The hook listens to changes in the `searchTerm` and `results` properties from the provided `SearchState`.
+ *
+ * @param {SearchState} [state] - The search state, which includes the current search term and the results of the search.
+ *   - `state.searchTerm`: The current search query string.
+ *   - `state.results`: The search results array. If it's empty, the hook will log a no-results event.
+ *
+ * @returns {Object} - An object with the following function:
+ *   - `handleClick`: A callback function that should be attached to search result click events. It tracks `spark_search:result_clicked` events with the clicked result's title and URL.
+ *
+ * @example
+ * const { handleClick } = useSearchLogger(searchState);
+ *
+ * // In your component, attach handleClick to the search result links
+ * <a href="result-url" onClick={handleClick}>Search Result</a>
  */
 export declare function useSearchLogger(state?: SearchState): {
     handleClick: (e: Event) => void;

package/dist/components/preact/SearchModal/hooks/useSearchLogger.js

@@ -1,43 +1,33 @@
-var a = Object.defineProperty;
-var d = (r, e, c) => e in r ? a(r, e, { enumerable: !0, configurable: !0, writable: !0, value: c }) : r[e] = c;
-var h = (r, e, c) => d(r, typeof e != "symbol" ? e + "" : e, c);
-import { A as L, y as l, q as s } from "../../../../chunks/hooks.module.CNV9mxng.js";
+import { A as k, y as u, q as f } from "../../../../chunks/hooks.module.CNV9mxng.js";
 class g {
-  /**
-   * @param dl Optional injected dataLayer array. Defaults to window.dataLayer.
-   */
-  constructor(e) {
-    h(this, "dataLayer");
-    this.dataLayer = Array.isArray(e) ? e : window.dataLayer, Array.isArray(this.dataLayer) || (window.dataLayer = [], this.dataLayer = window.dataLayer);
-  }
   /**
    * Pushes an event payload into the dataLayer.
-   * @param eventName e.g. 'searchResultClick'
+   * @param eventName e.g. 'www:search_query_changed'
    * @param payload   additional key/value data
    */
-  push(e, c = {}) {
-    this.dataLayer.push({ event: e, ...c });
+  track(n, c = {}) {
+    gtag("event", n, c);
   }
 }
-function m(r) {
-  const e = L(new g());
-  return l(() => {
-    r != null && r.searchTerm && e.current.push("searchQueryChanged", { query: r == null ? void 0 : r.searchTerm });
-  }, [r == null ? void 0 : r.searchTerm]), l(() => {
-    r != null && r.results && r != null && r.searchTerm && r.results.length === 0 && e.current.push("searchNoResults", { query: r == null ? void 0 : r.searchTerm });
+function T(r) {
+  const c = k(new g()).current;
+  return u(() => {
+    r != null && r.searchTerm && c.track("spark_search:query_changed", { query: r == null ? void 0 : r.searchTerm });
+  }, [r == null ? void 0 : r.searchTerm]), u(() => {
+    r != null && r.results && r != null && r.searchTerm && r.results.length === 0 && c.track("spark_search:no_results", { query: r == null ? void 0 : r.searchTerm });
   }, [r == null ? void 0 : r.results]), {
-    handleClick: s((i) => {
-      var u;
-      const n = i.target.closest("a");
-      if (!n) return;
-      const o = (u = n.querySelector(".n-search-link-label")) == null ? void 0 : u.innerHTML, y = n.getAttribute("href");
-      e.current.push("searchResultClick", {
-        searchResultTitle: o,
-        searchResultURL: y
+    handleClick: f((h) => {
+      var e;
+      const l = h.target.closest("a");
+      if (!l) return;
+      const i = (e = l.querySelector(".n-search-link-label")) == null ? void 0 : e.innerHTML, o = l.getAttribute("href");
+      c.track("spark_search:result_clicked", {
+        resultTitle: i,
+        resultUrl: o
       });
     }, [])
   };
 }
 export {
-  m as useSearchLogger
+  T as useSearchLogger
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "0.0.44",
+  "version": "0.0.46-alpha",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",
@@ -28,7 +28,8 @@
     "./logos/*.svg": "./packages/assets/logos/*.svg",
     "./styles/*.css": "./packages/styles/*.css",
     "./components": "./packages/components/index.ts",
-    "./utils": "./packages/utils/index.ts"
+    "./utils": "./packages/utils/index.ts",
+    "./analytics": "./packages/analytics/index.ts"
   },
   "dependencies": {
     "@preact/preset-vite": "^2.10.1",
@@ -42,6 +43,7 @@
   "devDependencies": {
     "@terrazzo/cli": "^0.6.3",
     "@terrazzo/plugin-css": "^0.6.0",
+    "@types/gtag.js": "^0.0.20",
     "tslib": "^2.8.1",
     "typescript": "^5.8.2"
   },

package/packages/analytics/GoogleAnalytics.astro

@@ -0,0 +1,9 @@
+<!-- Google tag (gtag.js) -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-X2FMMZSSS9"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', 'G-X2FMMZSSS9');
+</script>

package/packages/analytics/GoogleTagManager.astro

@@ -0,0 +1,14 @@
+<!-- Google Tag Manager -->
+<script>
+  (function (w, d, s, l, i) {
+    w[l] = w[l] || [];
+    w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
+    var f = d.getElementsByTagName(s)[0],
+      j = d.createElement(s),
+      dl = l != 'dataLayer' ? '&l=' + l : '';
+    j.async = true;
+    j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+    f.parentNode.insertBefore(j, f);
+  })(window, document, 'script', 'dataLayer', 'GTM-T7WNFLD');
+</script>
+<!-- End Google Tag Manager -->

package/packages/analytics/analytics.ts

@@ -0,0 +1,10 @@
+export default class Analytics {
+  /**
+   * Pushes an event payload into the dataLayer.
+   * @param eventName e.g. 'www:search_query_changed'
+   * @param payload   additional key/value data
+   */
+  track(eventName: string, payload: Record<string, any> = {}): void {
+    gtag('event', eventName, payload);
+  }
+}

package/packages/analytics/index.ts

@@ -0,0 +1,5 @@
+import GoogleTagManager from "./GoogleTagManager.astro";
+import GoogleAnalytics from "./GoogleAnalytics.astro";
+import Analytics from "./analytics"
+
+export { Analytics, GoogleAnalytics, GoogleTagManager }

package/packages/components/Button.astro

@@ -0,0 +1,22 @@
+---
+import '../styles/buttons.css';
+
+interface Props {
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+  href?: string;
+}
+
+const {
+  class: className,
+  variant = 'primary',
+  href,
+  target = !href?.includes(Astro.url.origin) ? '_blank' : undefined,
+  ...rest
+} = Astro.props;
+
+const Element = href ? 'a' : 'button';
+---
+
+<Element class:list={['button', className]} data-button-variant={variant} {href} {target} {...rest}>
+  <slot />
+</Element>

package/packages/components/DeployToNetlifyButton.astro

@@ -0,0 +1,36 @@
+---
+interface Props {
+  repo: string;
+  branch?: string;
+  path?: string;
+  utm?: string;
+}
+const { repo, branch, path, utm } = Astro.props;
+
+const url = new URL('https://app.netlify.com/start/deploy');
+
+url.search = new URLSearchParams({
+  repository: repo,
+  ...(branch ? { branch } : { branch: 'main' }),
+  ...(path ? { create_from_path: path } : {}),
+  ...(utm ? { utm } : {}),
+}).toString();
+---
+
+<a href={url.toString()} rel="nofollow">
+  <img
+    src="https://www.netlify.com/img/deploy/button.svg"
+    alt="Deploy to Netlify"
+    width="179"
+    height="32"
+  />
+</a>
+
+<style>
+  a {
+    display: inline-grid;
+    text-decoration: none;
+    border-radius: 0.35em;
+    outline-offset: 2px;
+  }
+</style>

package/packages/components/Tabs.astro

@@ -1,4 +1,6 @@
 ---
+import '../styles/tabs.css';
+
 interface Props {
   id?: string;
   class?: string;

package/packages/components/Ticker.astro

@@ -0,0 +1,112 @@
+---
+interface Props {
+  id?: string;
+  class?: string;
+  gap?: string;
+  pauseOnHover?: boolean;
+  reverse?: boolean;
+  scrollY?: boolean;
+  speed?: string;
+}
+
+const {
+  id,
+  class: className,
+  gap,
+  pauseOnHover,
+  reverse,
+  scrollY,
+  speed = 30,
+  ...rest
+} = Astro.props;
+
+const css = {
+  'n-ticker-animation': scrollY ? 'scroll-y' : 'scroll-x',
+  'n-ticker-direction': scrollY ? 'column' : 'row',
+  'n-ticker-duration': speed + 's',
+  'n-ticker-gap': gap || undefined,
+  'n-ticker-hover-play-state': pauseOnHover ? 'paused' : 'running',
+  'n-ticker-mask-direction': scrollY ? 'to bottom' : 'to right',
+};
+---
+
+<div id={id} class:list={['ticker', reverse && 'ticker-reverse', className]} {...rest}>
+  {
+    Array.from({ length: 2 }, (_, index) => (
+      <div class="ticker-content" aria-hidden={index !== 0 ? 'true' : undefined}>
+        <slot />
+      </div>
+    ))
+  }
+</div>
+
+<style define:vars={css}>
+  .ticker {
+    --_gap: var(--n-ticker-gap, 1rem);
+    display: flex;
+    flex-direction: var(--n-ticker-direction, row);
+    overflow: hidden;
+    user-select: none;
+    gap: var(--_gap);
+
+    /** Fade out along edges */
+    mask-image: linear-gradient(
+      var(--n-ticker-mask-direction, to right),
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 1) 15%,
+      rgba(0, 0, 0, 1) 85%,
+      rgba(0, 0, 0, 0) 100%
+    );
+  }
+
+  .ticker-content {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: var(--n-ticker-direction, row);
+    justify-content: space-around;
+    min-width: 100%;
+    gap: var(--_gap);
+  }
+
+  /** Animation */
+  .ticker-content {
+    animation-name: var(--n-ticker-animation, scroll-x);
+    animation-duration: var(--n-ticker-duration, 30s);
+    animation-play-state: var(--n-ticker-play-state, running);
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+  }
+
+  .ticker:hover .ticker-content {
+    animation-play-state: var(--n-ticker-hover-play-state, running);
+  }
+
+  .ticker-reverse .ticker-content {
+    animation-direction: reverse;
+  }
+
+  @keyframes scroll-x {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(calc(-100% - var(--_gap)));
+    }
+  }
+
+  @keyframes scroll-y {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(calc(-100% - var(--_gap)));
+    }
+  }
+
+  /* Pause animation when reduced-motion is set */
+  @media (prefers-reduced-motion: reduce) {
+    .ticker-content {
+      animation-play-state: paused !important;
+    }
+  }
+</style>

package/packages/components/index.ts

@@ -1,3 +1,4 @@
+// Preact components
 export { default as KeyboardKey } from './preact/KeyboardKey/KeyboardKey';
 export { default as Modal } from './preact/Modal/Modal';
 export { default as Icon } from './preact/Icon';
@@ -5,6 +6,9 @@ export { default as SearchLink } from './preact/SearchModal/components/SearchLin
 export { default as SearchHeading } from './preact/SearchModal/components/SearchHeading/SearchHeading';
 export { default as SearchToggle } from './preact/SearchModal/components/SearchToggle/SearchToggle';
 export { default as SearchModal } from './preact/SearchModal/components/SearchModal/SearchModal';
-export { default as Tabs } from './Tabs.astro';
-
 export { type IconName } from './preact/Icon';
+
+// Astro components
+export { default as Button } from './Button.astro';
+export { default as DeployToNetlifyButton } from './DeployToNetlifyButton.astro';
+export { default as Tabs } from './Tabs.astro';

package/packages/components/preact/SearchModal/hooks/useSearchLogger.ts

@@ -1,30 +1,39 @@
 import type { SearchState } from '../types/search.types';
 import { useEffect, useRef, useCallback } from 'preact/hooks';
-import { Logger } from '../../../../analytics/logger';
+import Analytics from '../../../../analytics/analytics';
 
 /**
- * Hook that logs search-related events to your analytics Logger.
+ * Custom hook that logs search-related events for analytics.
  *
- * It will:
- * - Push a `searchQueryChanged` event whenever the search term changes.
- * - Push a `searchNoResults` event whenever a non-empty query returns zero results.
- * - Provide a click handler (`handleClick`) to log `searchResultClick` events.
+ * This hook tracks the following search events:
+ * - `spark_search:query_changed`: Logs when the search query changes.
+ * - `spark_search:no_results`: Logs when no results are found for a search.
+ * - `spark_search:result_clicked`: Logs when a search result is clicked.
  *
- * @param {SearchState} state - The current search state, containing:
- *   - `searchTerm` (string): the text the user has searched for.
- *   - `results` (Array<any>): the array of result objects returned.
- * @returns {{ handleClick: (e: Event) => void }}
- *   An object with a `handleClick` function that you can attach to result links to log clicks.
+ * It uses an instance of `Analytics` to track these events. The hook listens to changes in the `searchTerm` and `results` properties from the provided `SearchState`.
+ *
+ * @param {SearchState} [state] - The search state, which includes the current search term and the results of the search.
+ *   - `state.searchTerm`: The current search query string.
+ *   - `state.results`: The search results array. If it's empty, the hook will log a no-results event.
+ *
+ * @returns {Object} - An object with the following function:
+ *   - `handleClick`: A callback function that should be attached to search result click events. It tracks `spark_search:result_clicked` events with the clicked result's title and URL.
+ *
+ * @example
+ * const { handleClick } = useSearchLogger(searchState);
+ * 
+ * // In your component, attach handleClick to the search result links
+ * <a href="result-url" onClick={handleClick}>Search Result</a>
  */
 
-
 export function useSearchLogger(state?: SearchState) {
-  const loggerRef = useRef<Logger>(new Logger());
+  const ref = useRef<Analytics>(new Analytics());
+  const analytics = ref.current;
 
   // Log search query
   useEffect(() => {
     if (!state?.searchTerm) return 
-    loggerRef.current.push('searchQueryChanged', { query: state?.searchTerm });
+    analytics.track('spark_search:query_changed', { query: state?.searchTerm });
   }, [state?.searchTerm]);
 
   // Log zero‑hit searches
@@ -32,7 +41,7 @@ export function useSearchLogger(state?: SearchState) {
     if (!state?.results) return 
 
     if (state?.searchTerm && state.results.length === 0) {
-      loggerRef.current.push('searchNoResults', { query: state?.searchTerm });
+      analytics.track('spark_search:no_results', { query: state?.searchTerm });
     }
   }, [state?.results]);
 
@@ -44,9 +53,9 @@ export function useSearchLogger(state?: SearchState) {
     const label = anchor.querySelector('.n-search-link-label')?.innerHTML
     const url = anchor.getAttribute('href')
 
-    loggerRef.current.push('searchResultClick', {
-      searchResultTitle: label,
-      searchResultURL: url,
+    analytics.track('spark_search:result_clicked', {
+      resultTitle: label,
+      resultUrl: url,
     });
   }, []);
 

package/packages/styles/base.css

@@ -2,4 +2,3 @@
 @import 'utils.css';
 @import 'fonts.css';
 @import 'layout.css';
-@import 'buttons.css';

package/packages/styles/buttons.css

@@ -1,11 +1,12 @@
 button,
 .button {
   appearance: none;
+  position: relative;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: var(--space-xs);
-  padding: var(--space-s) var(--space-m);
+  padding: var(--space-xs) var(--space-m);
   font-size: var(--font-size-0);
   font-family: var(--font-body);
   font-weight: var(--font-semibold);
@@ -21,6 +22,7 @@ button,
     flex: none;
     height: var(--button-icon-size, 1.2cap);
     width: auto;
+    fill: currentColor;
   }
 
   /* Button states */
@@ -46,13 +48,13 @@ button,
     border-color: var(--color-brand-alt);
   }
 
-  &[data-button-variant='text'] {
+  &[data-button-variant='ghost'] {
     color: currentColor;
     background-color: transparent;
     border-color: transparent;
   }
 
-  &[data-button-variant='ghost'] {
+  &[data-button-variant='outline'] {
     color: currentColor;
     background-color: transparent;
     border-color: currentColor;

package/packages/styles/tabs.css

@@ -1,10 +1,10 @@
-.tabs [role='tablist'] {
+[role='tablist'] {
   display: flex;
   isolation: isolate;
   border: var(--_border);
 }
 
-.tabs [role='tab'] {
+[role='tab'] {
   position: relative;
   border-color: transparent;
 
@@ -14,12 +14,12 @@
   }
 }
 
-.tabs [role='tab'][aria-selected='true'] {
+[role='tab'][aria-selected='true'] {
   /* Bring selected tab to layer above others to avoid clipping outline styles */
   z-index: 1;
 }
 
-.tabs [role='tabpanel'] {
+[role='tabpanel'] {
   border: var(--_border);
   border-block-start: unset;
   padding: var(--_padding);

package/packages/styles/tokens.css

@@ -18,6 +18,7 @@
   --color-bg-3: var(--neutral-200);
   --color-border: var(--neutral-200);
   --color-brand: var(--blue-700);
+  --color-brand-alt: var(--teal-200);
   --color-disabled-bg: var(--neutral-200);
   --color-disabled-border: var(--neutral-400);
   --color-disabled-text: var(--neutral-400);
@@ -32,6 +33,7 @@
   --color-text-2: var(--neutral-600);
   --color-text-3: var(--neutral-400);
   --color-text-accent: var(--teal-000);
+  --color-text-inverse: var(--neutral-100);
   --color-warning-bg: var(--gold-100);
   --color-warning-border: var(--gold-300);
   --color-warning-text: var(--gold-800);
@@ -149,6 +151,7 @@
     --color-bg-3: var(--neutral-200);
     --color-border: var(--neutral-200);
     --color-brand: var(--blue-700);
+    --color-brand-alt: var(--teal-200);
     --color-disabled-bg: var(--neutral-200);
     --color-disabled-border: var(--neutral-400);
     --color-disabled-text: var(--neutral-400);
@@ -163,6 +166,7 @@
     --color-text-2: var(--neutral-600);
     --color-text-3: var(--neutral-400);
     --color-text-accent: var(--teal-000);
+    --color-text-inverse: var(--neutral-100);
     --color-warning-bg: var(--gold-100);
     --color-warning-border: var(--gold-300);
     --color-warning-text: var(--gold-800);
@@ -184,6 +188,7 @@
   --color-bg-3: var(--neutral-200);
   --color-border: var(--neutral-200);
   --color-brand: var(--blue-700);
+  --color-brand-alt: var(--teal-200);
   --color-disabled-bg: var(--neutral-200);
   --color-disabled-border: var(--neutral-400);
   --color-disabled-text: var(--neutral-400);
@@ -198,6 +203,7 @@
   --color-text-2: var(--neutral-600);
   --color-text-3: var(--neutral-400);
   --color-text-accent: var(--teal-000);
+  --color-text-inverse: var(--neutral-100);
   --color-warning-bg: var(--gold-100);
   --color-warning-border: var(--gold-300);
   --color-warning-text: var(--gold-800);
@@ -219,6 +225,7 @@
     --color-bg-3: var(--neutral-600);
     --color-border: var(--neutral-200);
     --color-brand: var(--teal-200);
+    --color-brand-alt: var(--blue-700);
     --color-disabled-bg: var(--neutral-600);
     --color-disabled-border: var(--neutral-400);
     --color-disabled-text: var(--neutral-400);
@@ -233,6 +240,7 @@
     --color-text-2: var(--neutral-300);
     --color-text-3: var(--neutral-500);
     --color-text-accent: var(--teal-600);
+    --color-text-inverse: var(--teal-800);
     --color-warning-bg: var(--gold-200);
     --color-warning-border: var(--gold-400);
     --color-warning-text: var(--gold-900);
@@ -254,6 +262,7 @@
   --color-bg-3: var(--neutral-600);
   --color-border: var(--neutral-200);
   --color-brand: var(--teal-200);
+  --color-brand-alt: var(--blue-700);
   --color-disabled-bg: var(--neutral-600);
   --color-disabled-border: var(--neutral-400);
   --color-disabled-text: var(--neutral-400);
@@ -268,6 +277,7 @@
   --color-text-2: var(--neutral-300);
   --color-text-3: var(--neutral-500);
   --color-text-accent: var(--teal-600);
+  --color-text-inverse: var(--teal-800);
   --color-warning-bg: var(--gold-200);
   --color-warning-border: var(--gold-400);
   --color-warning-text: var(--gold-900);

package/dist/analytics/logger.d.ts

@@ -1,13 +0,0 @@
-export declare class Logger {
-    private dataLayer;
-    /**
-     * @param dl Optional injected dataLayer array. Defaults to window.dataLayer.
-     */
-    constructor(dl?: any[]);
-    /**
-     * Pushes an event payload into the dataLayer.
-     * @param eventName e.g. 'searchResultClick'
-     * @param payload   additional key/value data
-     */
-    push(eventName: string, payload?: Record<string, any>): void;
-}

package/packages/analytics/logger.ts

@@ -1,26 +0,0 @@
-export class Logger {
-  private dataLayer: any[];
-
-  /**
-   * @param dl Optional injected dataLayer array. Defaults to window.dataLayer.
-   */
-  constructor(dl?: any[]) {
-    // Use injected or global dataLayer
-    this.dataLayer = Array.isArray(dl) ? dl : (window as any).dataLayer;
-
-    // If for some reason it's not an array, initialize it
-    if (!Array.isArray(this.dataLayer)) {
-      (window as any).dataLayer = [];
-      this.dataLayer = (window as any).dataLayer;
-    }
-  }
-
-  /**
-   * Pushes an event payload into the dataLayer.
-   * @param eventName e.g. 'searchResultClick'
-   * @param payload   additional key/value data
-   */
-  push(eventName: string, payload: Record<string, any> = {}): void {
-    this.dataLayer.push({ event: eventName, ...payload });
-  }
-}