trimble-terra 1.1.30 → 1.1.32

package/README.md

@@ -1,170 +1,170 @@
-# Trimble Terra
-
-A React component library for Trimble MXP2 web experiences. Built with React 19, TypeScript, and SCSS.
-
-[![Storybook](https://img.shields.io/badge/Storybook-Live-ff4785?logo=storybook&logoColor=white)](https://trimble-mxp-terra.netlify.app/)
-[![npm version](https://img.shields.io/npm/v/trimble-terra)](https://www.npmjs.com/package/trimble-terra)
-
-> **Branch strategy:** The `react19` branch is the active development branch (v1.x) targeting Next.js projects. The `main` branch contains the legacy Gatsby-compatible code (v0.x) and is deprecated — do not publish from `main`.
-
-
-
-## Storybook
-
-Browse all components, props, and usage examples in the live Storybook:
-
-**[https://trimble-mxp-terra.netlify.app/](https://trimble-mxp-terra.netlify.app/)**
-
-### Associated Storybooks
-
-#### Layouts: 
-[![Storybook](https://img.shields.io/badge/Storybook-Live-ff4785?logo=storybook&logoColor=white)](https://trimble-mxp-layouts.netlify.app/)
-
-#### Icons: 
-[![Storybook](https://img.shields.io/badge/Storybook-Live-ff4785?logo=storybook&logoColor=white)](https://trimble-mxp-icons.netlify.app/)
-
-#### Flyout: 
-[![Storybook](https://img.shields.io/badge/Storybook-Live-ff4785?logo=storybook&logoColor=white)](https://trimble-mxp-flyout.netlify.app/)
-
-
-## Installation
-
-```bash
-npm install trimble-terra
-```
-
-### Peer Dependencies
-
-The following packages must be installed in your application:
-
-```bash
-npm install react react-dom @trimble-creative-strategy/trimble-mxp-icons react-player image-focus
-```
-
-## Usage
-
-Import components directly from the package:
-
-```tsx
-import { SiteNavigation, GlobalFooter, AlertBanner } from "trimble-terra";
-
-function App() {
-  return (
-    <>
-      <SiteNavigation {...navProps} />
-      <AlertBanner {...bannerProps} />
-      <main>{/* your content */}</main>
-      <GlobalFooter {...footerProps} />
-    </>
-  );
-}
-```
-
-## Available Components
-
-### Components
-
-| Component | Description |
-| --- | --- |
-| `AlertBanner` | Dismissible alert banner for announcements |
-| `Dialog` | Modal dialog overlay |
-| `ImageGallery` | Responsive image gallery |
-| `LoadingSpinner` | Loading state indicator |
-| `ProductDetail` | Product detail view |
-| `ProductSummary` | Product summary card |
-| `TrialFormStart` | Trial signup form |
-| `TrialSummary` | Trial information summary |
-
-### Layout
-
-| Component | Description |
-| --- | --- |
-| `LayoutPricingCards` | Pricing card grid layout |
-| `Icon` | Icon component (re-exported from `@trimble-creative-strategy/trimble-mxp-icons`) |
-
-### Navigation
-
-| Component | Description |
-| --- | --- |
-| `SiteNavigation` | Main site navigation with mega menu support |
-| `Footer` | Base footer component |
-| `SectorFooter` | Sector-specific footer |
-| `GlobalFooter` | Global footer |
-
-## Development
-
-```bash
-# Install dependencies
-npm install
-
-# Run Storybook locally
-npm run storybook
-
-# Build the library
-npm run build
-
-# Lint
-npm run lint
-
-# Format check
-npm run format:check
-```
-
-## Publishing to npm
-
-Releases are automated via GitHub Actions. Pushing a version tag triggers the publish workflow.
-
-### Release workflow
-
-1. **Make sure you're on the `react19` branch** with all changes committed and pushed.
-
-2. **Bump the version** in `package.json`:
-
-   ```bash
-   # Patch release (1.0.0 → 1.0.1)
-   npm version patch
-
-   # Minor release (1.0.0 → 1.1.0)
-   npm version minor
-
-   # Major release (1.0.0 → 2.0.0)
-   npm version major
-   ```
-
-   This updates `package.json` and creates a git tag automatically.
-
-3. **Push the commit and tag:**
-
-   ```bash
-   git push origin react19 --follow-tags
-   ```
-
-4. The GitHub Actions `publish.yml` workflow will:
-   - Check out the code
-   - Install dependencies
-   - Run lint and build
-   - Verify the tag matches the `package.json` version
-   - Publish to npm
-
-### Requirements
-
-- An `NPM_TOKEN` secret must be configured in the GitHub repository settings (Settings > Secrets and variables > Actions).
-- The token needs publish access to the `trimble-terra` package on npm.
-
-### CI
-
-Every push and pull request to `react19` runs the CI workflow (lint, format check, build) on Node 20 and 22.
-
-## Technical Audit — Known Issues
-
-- **K-3 — CommonDescription / CleanDescription duplication** (Medium): Nearly identical logic differing only in class names. Merge into one component with a `variant` prop.
-- **K-4 — Inline styles instead of SCSS** (Medium): `CardEcommerce`, `LayoutPricingCards`, `PricingCards`, `SiteNavigationMain`, `YoutubeVideo`, `FocusedImageMethods`, and others use `style={}` for layout, backgrounds, and sizing that should live in SCSS.
-- **K-5 — Pervasive `any` usage** (High): `any` is used for props, event handlers, refs, and data structures across ~30+ files. Especially dense in `SiteNavigation*`, `LanguageSelector`, `ProductDetail`, `LayoutPricingCards`, `VidyardVideo`, and all `.jsx` files.
-- **A-1 — `onClick` on non-interactive elements without keyboard support** (High): Multiple `<div>` and `<span>` elements have `onClick` handlers without `role="button"`, `tabIndex={0}`, or `onKeyDown`/`onKeyUp`. `ProductOverview.tsx` uses `<a href="" onClick>` instead of `<button>`.
-- **A-2 — Missing `alt` text on images** (Medium): App Store / Google Play badge images in `TerraLink.tsx`, `SpecialButton.tsx`, and `SiteNavigationMobile.tsx` lack meaningful `alt` attributes.
-- **S-1 — Unsanitized `dangerouslySetInnerHTML`** (High): CMS/prop content rendered via `dangerouslySetInnerHTML` without visible sanitization in `CommonDescription.tsx`, `functions.tsx`, `CurrencyList.tsx`, `ProductSummaryMethods.jsx`, `FlyoutCart.jsx`, `checkForDangerouslySet.jsx`. Centralize through a sanitizer (e.g., DOMPurify).
-- **C-2 — Direct DOM manipulation** (Medium): `CardEcommerce.tsx` uses `document.querySelector` instead of a ref; `ImageGalleryMethods.jsx` sets `body.style.overflow` directly; `useElementIntersection.ts` takes a selector string instead of a ref.
-- **C-3 — 16 `.jsx` files remain unconverted** (Medium): `Slider`, `NavSearchWrapper`, `Tooltip`, `TrialFormStart`, `ProductSummary`, `TrialSummary`, `TrialMethods`, `TrialSpecifics`, `ProductSummaryMethods`, `PricingCards`, `ImageGallery`, `ImageGalleryMethods`, `FlyoutCart`, `checkForDangerouslySet`, `CloseIcon`, `CardEcommerceMethods` — all have zero type safety.
-- **C-4 — Blanket `eslint-disable` suppresses all warnings** (Medium): File-level `/* eslint-disable */` in `LanguageSelector.tsx`, `SiteNavigationMain.tsx`, `CartNavMenu.tsx`, `FlyoutCart.jsx`, `FlyoutCartComponent.tsx`, `QuantityTracker.stories.tsx`, `Video.tsx`.
-- **C-6 — Console statements in production code** (Low): `YoutubeVideo.tsx` (`console.warn`) and `CardEcommerceMethods.jsx` (`console.error`) will fire in consumers' production builds.
+# Trimble Terra
+
+A React component library for Trimble MXP2 web experiences. Built with React 19, TypeScript, and SCSS.
+
+[![Storybook](https://img.shields.io/badge/Storybook-Live-ff4785?logo=storybook&logoColor=white)](https://trimble-mxp-terra.netlify.app/)
+[![npm version](https://img.shields.io/npm/v/trimble-terra)](https://www.npmjs.com/package/trimble-terra)
+
+> **Branch strategy:** The `react19` branch is the active development branch (v1.x) targeting Next.js projects. The `main` branch contains the legacy Gatsby-compatible code (v0.x) and is deprecated — do not publish from `main`.
+
+
+
+## Storybook
+
+Browse all components, props, and usage examples in the live Storybook:
+
+**[https://trimble-mxp-terra.netlify.app/](https://trimble-mxp-terra.netlify.app/)**
+
+### Associated Storybooks
+
+#### Layouts: 
+[![Storybook](https://img.shields.io/badge/Storybook-Live-ff4785?logo=storybook&logoColor=white)](https://trimble-mxp-layouts.netlify.app/)
+
+#### Icons: 
+[![Storybook](https://img.shields.io/badge/Storybook-Live-ff4785?logo=storybook&logoColor=white)](https://trimble-mxp-icons.netlify.app/)
+
+#### Flyout: 
+[![Storybook](https://img.shields.io/badge/Storybook-Live-ff4785?logo=storybook&logoColor=white)](https://trimble-mxp-flyout.netlify.app/)
+
+
+## Installation
+
+```bash
+npm install trimble-terra
+```
+
+### Peer Dependencies
+
+The following packages must be installed in your application:
+
+```bash
+npm install react react-dom @trimble-creative-strategy/trimble-mxp-icons react-player image-focus
+```
+
+## Usage
+
+Import components directly from the package:
+
+```tsx
+import { SiteNavigation, GlobalFooter, AlertBanner } from "trimble-terra";
+
+function App() {
+  return (
+    <>
+      <SiteNavigation {...navProps} />
+      <AlertBanner {...bannerProps} />
+      <main>{/* your content */}</main>
+      <GlobalFooter {...footerProps} />
+    </>
+  );
+}
+```
+
+## Available Components
+
+### Components
+
+| Component | Description |
+| --- | --- |
+| `AlertBanner` | Dismissible alert banner for announcements |
+| `Dialog` | Modal dialog overlay |
+| `ImageGallery` | Responsive image gallery |
+| `LoadingSpinner` | Loading state indicator |
+| `ProductDetail` | Product detail view |
+| `ProductSummary` | Product summary card |
+| `TrialFormStart` | Trial signup form |
+| `TrialSummary` | Trial information summary |
+
+### Layout
+
+| Component | Description |
+| --- | --- |
+| `LayoutPricingCards` | Pricing card grid layout |
+| `Icon` | Icon component (re-exported from `@trimble-creative-strategy/trimble-mxp-icons`) |
+
+### Navigation
+
+| Component | Description |
+| --- | --- |
+| `SiteNavigation` | Main site navigation with mega menu support |
+| `Footer` | Base footer component |
+| `SectorFooter` | Sector-specific footer |
+| `GlobalFooter` | Global footer |
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Run Storybook locally
+npm run storybook
+
+# Build the library
+npm run build
+
+# Lint
+npm run lint
+
+# Format check
+npm run format:check
+```
+
+## Publishing to npm
+
+Releases are automated via GitHub Actions. Pushing a version tag triggers the publish workflow.
+
+### Release workflow
+
+1. **Make sure you're on the `react19` branch** with all changes committed and pushed.
+
+2. **Bump the version** in `package.json`:
+
+   ```bash
+   # Patch release (1.0.0 → 1.0.1)
+   npm version patch
+
+   # Minor release (1.0.0 → 1.1.0)
+   npm version minor
+
+   # Major release (1.0.0 → 2.0.0)
+   npm version major
+   ```
+
+   This updates `package.json` and creates a git tag automatically.
+
+3. **Push the commit and tag:**
+
+   ```bash
+   git push origin react19 --follow-tags
+   ```
+
+4. The GitHub Actions `publish.yml` workflow will:
+   - Check out the code
+   - Install dependencies
+   - Run lint and build
+   - Verify the tag matches the `package.json` version
+   - Publish to npm
+
+### Requirements
+
+- An `NPM_TOKEN` secret must be configured in the GitHub repository settings (Settings > Secrets and variables > Actions).
+- The token needs publish access to the `trimble-terra` package on npm.
+
+### CI
+
+Every push and pull request to `react19` runs the CI workflow (lint, format check, build) on Node 20 and 22.
+
+## Technical Audit — Known Issues
+
+- **K-3 — CommonDescription / CleanDescription duplication** (Medium): Nearly identical logic differing only in class names. Merge into one component with a `variant` prop.
+- **K-4 — Inline styles instead of SCSS** (Medium): `CardEcommerce`, `LayoutPricingCards`, `PricingCards`, `SiteNavigationMain`, `YoutubeVideo`, `FocusedImageMethods`, and others use `style={}` for layout, backgrounds, and sizing that should live in SCSS.
+- **K-5 — Pervasive `any` usage** (High): `any` is used for props, event handlers, refs, and data structures across ~30+ files. Especially dense in `SiteNavigation*`, `LanguageSelector`, `ProductDetail`, `LayoutPricingCards`, `VidyardVideo`, and all `.jsx` files.
+- **A-1 — `onClick` on non-interactive elements without keyboard support** (High): Multiple `<div>` and `<span>` elements have `onClick` handlers without `role="button"`, `tabIndex={0}`, or `onKeyDown`/`onKeyUp`. `ProductOverview.tsx` uses `<a href="" onClick>` instead of `<button>`.
+- **A-2 — Missing `alt` text on images** (Medium): App Store / Google Play badge images in `TerraLink.tsx`, `SpecialButton.tsx`, and `SiteNavigationMobile.tsx` lack meaningful `alt` attributes.
+- **S-1 — Unsanitized `dangerouslySetInnerHTML`** (High): CMS/prop content rendered via `dangerouslySetInnerHTML` without visible sanitization in `CommonDescription.tsx`, `functions.tsx`, `CurrencyList.tsx`, `ProductSummaryMethods.jsx`, `FlyoutCart.jsx`, `checkForDangerouslySet.jsx`. Centralize through a sanitizer (e.g., DOMPurify).
+- **C-2 — Direct DOM manipulation** (Medium): `CardEcommerce.tsx` uses `document.querySelector` instead of a ref; `ImageGalleryMethods.jsx` sets `body.style.overflow` directly; `useElementIntersection.ts` takes a selector string instead of a ref.
+- **C-3 — 16 `.jsx` files remain unconverted** (Medium): `Slider`, `NavSearchWrapper`, `Tooltip`, `TrialFormStart`, `ProductSummary`, `TrialSummary`, `TrialMethods`, `TrialSpecifics`, `ProductSummaryMethods`, `PricingCards`, `ImageGallery`, `ImageGalleryMethods`, `FlyoutCart`, `checkForDangerouslySet`, `CloseIcon`, `CardEcommerceMethods` — all have zero type safety.
+- **C-4 — Blanket `eslint-disable` suppresses all warnings** (Medium): File-level `/* eslint-disable */` in `LanguageSelector.tsx`, `SiteNavigationMain.tsx`, `CartNavMenu.tsx`, `FlyoutCart.jsx`, `FlyoutCartComponent.tsx`, `QuantityTracker.stories.tsx`, `Video.tsx`.
+- **C-6 — Console statements in production code** (Low): `YoutubeVideo.tsx` (`console.warn`) and `CardEcommerceMethods.jsx` (`console.error`) will fire in consumers' production builds.
 - **C-7 — Duplicate `ImageGallery` component names** (Medium): Two separate `ImageGallery` implementations exist at `src/component/ImageGallery/` and `src/component/ProductDetail/ImageGallery/`, causing confusion and potential import mistakes.

package/dist/lib/main.js

@@ -1,17 +1,17 @@
-import { default as e } from "../src/component/TrialForm/TrialFormStart/TrialFormStart.js";
-import { default as a } from "../src/component/ProductSummary/ProductSummary.js";
-import { default as m } from "../src/component/ProductDetail/ProductDetail.js";
-import { default as l } from "../src/component/TrialForm/TrialComponents/TrialSummary.js";
-import { default as i } from "../src/component/LoadingSpinner/LoadingSpinner.js";
-import { default as d } from "../src/component/Dialog/Dialog.js";
-import { default as S } from "../src/component/ImageGallery/ImageGallery.js";
-import { default as n } from "../src/component/FocusedImage/FocusedImage.js";
-import { default as F } from "../src/component/MoreFromDeveloper/MoreFromDeveloper.js";
-import { AlertBanner as y } from "../src/component/AlertBanner/AlertBanner.js";
-import { SearchButton as D } from "../src/component/SearchButton/SearchButton.js";
-import { CallToAction as C } from "../src/component/CallToAction/CallToAction.js";
-import { PurchaseSection as P } from "../src/component/PurchaseSection/PurchaseSection.js";
-import { TDHeader as h } from "../src/component/TrimbleDeveloper/TDHeader.js";
+import { AlertBanner as e } from "../src/component/AlertBanner/AlertBanner.js";
+import { SearchButton as a } from "../src/component/SearchButton/SearchButton.js";
+import { CallToAction as m } from "../src/component/CallToAction/CallToAction.js";
+import { PurchaseSection as l } from "../src/component/PurchaseSection/PurchaseSection.js";
+import { TDHeader as i } from "../src/component/TrimbleDeveloper/TDHeader.js";
+import { default as d } from "../src/component/TrialForm/TrialFormStart/TrialFormStart.js";
+import { default as S } from "../src/component/TrialForm/TrialComponents/TrialSummary.js";
+import { default as n } from "../src/component/ProductSummary/ProductSummary.js";
+import { default as F } from "../src/component/ProductDetail/ProductDetail.js";
+import { default as y } from "../src/component/LoadingSpinner/LoadingSpinner.js";
+import { default as D } from "../src/component/Dialog/Dialog.js";
+import { default as C } from "../src/component/ImageGallery/ImageGallery.js";
+import { default as P } from "../src/component/FocusedImage/FocusedImage.js";
+import { default as h } from "../src/component/MoreFromDeveloper/MoreFromDeveloper.js";
 import { ProductDetailTabs as B } from "../src/component/ProductDetail/ProductDetailTabs/ProductDetailTabs.js";
 import { FeaturedResources as I } from "../src/component/ProductDetail/FeaturedResources/FeaturedResources.js";
 import { SectorFooter as H } from "../src/navigation/Footer/SectorFooter/SectorFooter.js";
@@ -23,28 +23,28 @@ import { SiteNavigationMobileCategory as O } from "../src/navigation/SiteNavigat
 import { SiteNav as U } from "../src/navigation/SiteNav/SiteNav.js";
 import { SiteNavMobileCategory as W } from "../src/navigation/SiteNav/SiteNavMobileCategory.js";
 export {
-  y as AlertBanner,
-  C as CallToAction,
-  d as Dialog,
+  e as AlertBanner,
+  m as CallToAction,
+  D as Dialog,
   I as FeaturedResources,
-  n as FocusedImage,
+  P as FocusedImage,
   q as Footer,
   j as GlobalFooter,
-  S as ImageGallery,
-  i as LoadingSpinner,
-  F as MoreFromDeveloper,
-  m as ProductDetail,
+  C as ImageGallery,
+  y as LoadingSpinner,
+  h as MoreFromDeveloper,
+  F as ProductDetail,
   B as ProductDetailTabs,
-  a as ProductSummary,
-  P as PurchaseSection,
-  D as SearchButton,
+  n as ProductSummary,
+  l as PurchaseSection,
+  a as SearchButton,
   H as SectorFooter,
   U as SiteNav,
   W as SiteNavMobileCategory,
   z as SiteNavigation,
   O as SiteNavigationMobileCategory,
-  h as TDHeader,
+  i as TDHeader,
   J as TopLevelCategory,
-  e as TrialFormStart,
-  l as TrialSummary
+  d as TrialFormStart,
+  S as TrialSummary
 };

package/dist/src/component/CreditsTracker/CreditsTracker.css

@@ -0,0 +1 @@
+.t2-credits-tracker{position:relative;display:flex;align-items:center;height:48px;max-width:240px;border:1px solid #585c65;border-radius:10px}.t2-credits-tracker--invalid{border-color:#ac151d}.t2-credits-tracker__error{font-size:12px;line-height:16px;margin:0 0 24px;color:#ac151d;max-width:240px}.t2-credits-tracker__error strong{font-weight:700!important}.t2-credits-tracker__input{flex:1;width:100%;height:100%;border:none;outline:none;text-align:center;font-size:16px;font-weight:600;color:#252a2e;background:transparent;padding:0 40px}.t2-credits-tracker__input::-webkit-outer-spin-button,.t2-credits-tracker__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.t2-credits-tracker__input:disabled{cursor:not-allowed;color:#a3a6b1}.t2-credits-tracker__button{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:32px;height:100%;padding:0;background:transparent;border:none;color:#252a2e;cursor:pointer}.t2-credits-tracker__button--decrease{left:8px}.t2-credits-tracker__button--increase{right:8px}.t2-credits-tracker__button[disabled]{color:#a3a6b1;cursor:not-allowed}

package/dist/src/component/CreditsTracker/CreditsTracker.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+export interface CreditsTrackerProps {
+    minimumQuantity: number;
+    maximumQuantity: number;
+    incrementRate: number;
+    credits?: number;
+    onCreditsChange?: (credits: number) => void;
+    locale?: string | string[];
+    inputId?: string;
+    ariaLabel?: string;
+    disabled?: boolean;
+    className?: string;
+    belowMinimumLabel?: string;
+    aboveMaximumLabel?: string;
+}
+declare const CreditsTracker: ({ minimumQuantity, maximumQuantity, incrementRate, credits, onCreditsChange, locale, inputId, ariaLabel, disabled, className, belowMinimumLabel, aboveMaximumLabel, }: CreditsTrackerProps) => React.JSX.Element;
+export default CreditsTracker;
+//# sourceMappingURL=CreditsTracker.d.ts.map

package/dist/src/component/CreditsTracker/CreditsTracker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreditsTracker.d.ts","sourceRoot":"","sources":["../../../../src/component/CreditsTracker/CreditsTracker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AACvC,OAAO,uBAAuB,CAAA;AAE9B,MAAM,WAAW,mBAAmB;IAClC,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,MAAM,CAAA;IACvB,aAAa,EAAE,MAAM,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED,QAAA,MAAM,cAAc,GAAI,uKAarB,mBAAmB,sBAqKrB,CAAA;AAED,eAAe,cAAc,CAAA"}

package/dist/src/component/CreditsTracker/CreditsTracker.js

@@ -0,0 +1,114 @@
+import { jsxs as b, Fragment as T, jsx as t } from "react/jsx-runtime";
+import E, { useState as F } from "react";
+import './CreditsTracker.css';/* empty css                    */
+const q = ({
+  minimumQuantity: e,
+  maximumQuantity: o,
+  incrementRate: c,
+  credits: k,
+  onCreditsChange: i,
+  locale: f,
+  inputId: N,
+  ariaLabel: _,
+  disabled: u = !1,
+  className: v,
+  belowMinimumLabel: H,
+  aboveMaximumLabel: M
+}) => {
+  const s = k ?? e, [n, C] = F(null), V = () => {
+    i?.(Math.max(e, s - c));
+  }, D = () => {
+    i?.(Math.min(o, s + c));
+  }, I = (r) => {
+    const l = r.currentTarget.value.replace(/[^0-9]/g, "");
+    C(l);
+  }, x = () => {
+    if (n === null) return;
+    const r = parseInt(n, 10), l = Number.isNaN(r) ? 0 : r, h = c > 0 ? Math.round(l / c) * c : l, a = Math.min(
+      o,
+      Math.max(e, h)
+    );
+    C(null), a !== s && i?.(a);
+  }, B = (r) => {
+    r.key === "Enter" && (r.preventDefault(), r.currentTarget.blur());
+  }, j = s.toLocaleString(f), L = n ?? j, g = (r, l) => {
+    if (!r) return null;
+    const h = l.toLocaleString(f);
+    return r.split(/(\{[^}]+\})/g).map((a, w) => /^\{[^}]+\}$/.test(a) ? /* @__PURE__ */ t("span", { children: h }, w) : /* @__PURE__ */ t(E.Fragment, { children: a }, w));
+  };
+  let p = !1, d = null;
+  if (n !== null && n !== "") {
+    const r = parseInt(n, 10);
+    Number.isNaN(r) || (r < e ? (p = !0, d = g(H, e)) : r > o && (p = !0, d = g(M, o)));
+  }
+  const S = [
+    "t2-credits-tracker",
+    p && "t2-credits-tracker--invalid",
+    v
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ b(T, { children: [
+    /* @__PURE__ */ b("div", { className: S, children: [
+      /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          className: "t2-credits-tracker__button t2-credits-tracker__button--decrease",
+          onClick: V,
+          disabled: u || s <= e,
+          "aria-label": "Decrease credits",
+          children: /* @__PURE__ */ t(
+            "svg",
+            {
+              width: "14",
+              height: "2",
+              viewBox: "0 0 14 2",
+              fill: "currentColor",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: /* @__PURE__ */ t("path", { d: "M14 2H0V0H14V2Z", fill: "currentColor" })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ t(
+        "input",
+        {
+          id: N,
+          type: "text",
+          inputMode: "numeric",
+          className: "t2-credits-tracker__input",
+          value: L,
+          onChange: I,
+          onBlur: x,
+          onKeyDown: B,
+          disabled: u,
+          "aria-label": _
+        }
+      ),
+      /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          className: "t2-credits-tracker__button t2-credits-tracker__button--increase",
+          onClick: D,
+          disabled: u || s >= o,
+          "aria-label": "Increase credits",
+          children: /* @__PURE__ */ t(
+            "svg",
+            {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 14 14",
+              fill: "currentColor",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: /* @__PURE__ */ t("path", { d: "M14 8H8V14H6V8H0V6H6V0H8V6H14V8Z", fill: "currentColor" })
+            }
+          )
+        }
+      )
+    ] }),
+    d && /* @__PURE__ */ t("p", { className: "t2-credits-tracker__error", role: "alert", children: d })
+  ] });
+};
+export {
+  q as default
+};

package/dist/src/component/Dialog/Dialog.css

@@ -1 +1 @@
-@keyframes t2-dialog-open{0%{opacity:0;transform:translate(-50%,-48%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.t2-dialog{position:fixed;z-index:5;box-sizing:border-box;background:#fff;max-width:560px;top:40%;left:50%;transform:translate(-50%,-50%);padding:24px 32px;border-radius:10px;box-shadow:0 110px 31px #0000,0 70px 28px #00000003,0 40px 24px #0000000d,0 18px 18px #00000017,0 4px 10px #0000001a;text-transform:none}.t2-dialog p:first-of-type{margin-top:0}.t2-dialog p:last-of-type{margin-bottom:0}@media not (min-width:600px){.t2-dialog{width:90%;height:auto}}.t2-dialog__overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;background:#3635454d}.t2-dialog__close{all:unset;position:absolute;top:33px;right:32px;margin:0;padding:0;cursor:pointer}.t2-dialog__close:focus{outline:revert}.t2-dialog__title{color:#353a40;font-size:1.5rem;font-style:normal;font-weight:700;line-height:1.875rem;letter-spacing:1.92px}.t2-dialog__title{letter-spacing:.5px;margin:0 0 8px}.t2-dialog__content,.t2-dialog__content__text,.t2-dialog__content__text-holder{color:#353a40;font-size:1.125rem;font-style:normal;font-weight:400;line-height:2rem;letter-spacing:.18px}@media screen and (max-width:600px){.t2-dialog__content,.t2-dialog__content__text,.t2-dialog__content__text-holder{font-size:1rem;line-height:1.375rem}}.t2-dialog__content--link,.t2-dialog__content__text--link,.t2-dialog__content__text-holder--link{color:#353a40;font-size:1.125rem;font-style:normal;font-weight:400;line-height:2rem;letter-spacing:.18px}@media screen and (max-width:600px){.t2-dialog__content--link,.t2-dialog__content__text--link,.t2-dialog__content__text-holder--link{font-size:1rem;line-height:1.375rem}}.t2-dialog__buttons{display:flex;gap:12px;flex-direction:row;justify-content:flex-end;margin-top:16px}@media not (min-width:600px){.t2-dialog__buttons{flex-direction:column-reverse}}.t2-dialog--opened{animation:t2-dialog-open .2s ease-out}.t2-dialog--closed{display:none}.t2-dialog-loading__section{display:flex;gap:12px;flex-direction:column;align-items:center;justify-content:center;margin-bottom:24px;margin-top:12px}.t2-dialog-loading__text{color:#0063a3;line-height:27px;letter-spacing:.15;color:#353a40;font-size:1.125rem;font-style:normal;font-weight:400;line-height:2rem;letter-spacing:.18px}@media screen and (max-width:600px){.t2-dialog-loading__text{font-size:1rem;line-height:1.375rem}}
+@keyframes t2-dialog-open{0%{opacity:0;transform:translate(-50%,-48%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.t2-dialog{position:fixed;z-index:5;box-sizing:border-box;background:#fff;max-width:560px;top:40%;left:50%;transform:translate(-50%,-50%);padding:24px;border-radius:10px;box-shadow:0 110px 31px #0000,0 70px 28px #00000003,0 40px 24px #0000000d,0 18px 18px #00000017,0 4px 10px #0000001a;text-transform:none}.t2-dialog p:first-of-type{margin-top:0}.t2-dialog p:last-of-type{margin-bottom:0}@media not (min-width:600px){.t2-dialog{width:90%;height:auto}}.t2-dialog__overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;background:#3635454d}.t2-dialog__close{all:unset;position:absolute;top:33px;right:32px;margin:0;padding:0;cursor:pointer}.t2-dialog__close:focus{outline:revert}.t2-dialog__title{font-size:20px;font-weight:700;line-height:28px;letter-spacing:.5px;margin:0 8px 8px}.t2-dialog__content,.t2-dialog__content__text,.t2-dialog__content__text-holder{font-size:16px;line-height:28px;margin-left:8px;margin-right:8px}.t2-dialog__content--link,.t2-dialog__content__text--link,.t2-dialog__content__text-holder--link{font-size:16px;line-height:28px}.t2-dialog__content ul,.t2-dialog__content__text ul,.t2-dialog__content__text-holder ul{margin:16px 0 0;padding-left:20px}.t2-dialog__content li:last-child,.t2-dialog__content__text li:last-child,.t2-dialog__content__text-holder li:last-child{margin-bottom:0}.t2-dialog__buttons{display:flex;gap:12px;flex-direction:row;justify-content:flex-end;margin-top:16px}@media not (min-width:600px){.t2-dialog__buttons{flex-direction:column-reverse}}.t2-dialog__buttons .t2-button,.t2-dialog__buttons .t2-button:hover,.t2-dialog__buttons .t2-button:focus,.t2-dialog__buttons .t2-button:visited,.t2-dialog__buttons .t2-button:active{padding-left:24px;padding-right:24px;border-width:2px;box-shadow:none}.t2-dialog--opened{animation:t2-dialog-open .2s ease-out}.t2-dialog--closed{display:none}.t2-dialog--non-buyer-new-account{width:560px}.t2-dialog--non-buyer-new-account .t2-dialog__title{margin-bottom:8px}.t2-dialog--non-buyer-new-account .t2-dialog__content p,.t2-dialog--non-buyer-new-account .t2-dialog__content__text p,.t2-dialog--non-buyer-new-account .t2-dialog__content__text-holder p{margin:0;padding-bottom:16px}.t2-dialog--non-buyer-new-account .t2-dialog__content ul,.t2-dialog--non-buyer-new-account .t2-dialog__content__text ul,.t2-dialog--non-buyer-new-account .t2-dialog__content__text-holder ul{margin:0 8px;padding-left:28px}.t2-dialog--non-buyer-new-account .t2-dialog__content li,.t2-dialog--non-buyer-new-account .t2-dialog__content__text li,.t2-dialog--non-buyer-new-account .t2-dialog__content__text-holder li{padding-left:8px}.t2-dialog--non-buyer-new-account .t2-dialog__content li:last-child,.t2-dialog--non-buyer-new-account .t2-dialog__content__text li:last-child,.t2-dialog--non-buyer-new-account .t2-dialog__content__text-holder li:last-child{margin-bottom:0}.t2-dialog--non-buyer-new-account .t2-dialog__buttons{justify-content:flex-end;margin-top:16px;gap:12px;flex-wrap:nowrap;width:100%}.t2-dialog--non-buyer-new-account .t2-dialog__buttons .t2-button{white-space:nowrap;padding:10px 16px;font-size:18px;font-weight:700;line-height:2.25rem;letter-spacing:.08em;text-transform:uppercase;border-radius:100px;box-shadow:none}.t2-dialog--non-buyer-new-account .t2-dialog__buttons .t2-button--secondary,.t2-dialog--non-buyer-new-account .t2-dialog__buttons .t2-button--secondary:hover,.t2-dialog--non-buyer-new-account .t2-dialog__buttons .t2-button--secondary:focus,.t2-dialog--non-buyer-new-account .t2-dialog__buttons .t2-button--secondary:visited,.t2-dialog--non-buyer-new-account .t2-dialog__buttons .t2-button--secondary:active{color:#252a2e;background-color:#fff;border:1px solid #252a2e;box-shadow:none}.t2-dialog--non-buyer-new-account .t2-dialog__buttons .t2-button--secondary:hover{background-color:#fff;border-color:#252a2e}.t2-dialog--non-buyer-new-account .t2-dialog__buttons .t2-button--primary,.t2-dialog--non-buyer-new-account .t2-dialog__buttons .t2-button--primary:hover,.t2-dialog--non-buyer-new-account .t2-dialog__buttons .t2-button--primary:focus,.t2-dialog--non-buyer-new-account .t2-dialog__buttons .t2-button--primary:visited,.t2-dialog--non-buyer-new-account .t2-dialog__buttons .t2-button--primary:active{color:#252a2e;background-color:#fbad26;border:2px solid #fbad26;box-shadow:none}.t2-dialog--non-buyer-new-account .t2-dialog__buttons .t2-button--primary:hover{background-color:#de9921;border-color:#de9921}.t2-dialog-loading__section{display:flex;gap:12px;flex-direction:column;align-items:center;justify-content:center;margin-bottom:24px;margin-top:12px}.t2-dialog-loading__text{color:#0063a3;font-size:16px;line-height:28px;letter-spacing:.15}

package/dist/src/component/Dialog/Dialog.d.ts

@@ -1,14 +1,14 @@
 interface DialogProps {
     isOpen: boolean;
-    variant?: "loading";
+    variant?: "loading" | "nonBuyerNewAccount";
     title: string;
     content: string;
     loadingText?: string;
     primaryButtonText: string;
     secondaryButtonText?: string;
     onCloseButtonClick?: (e?: React.MouseEvent<HTMLButtonElement>) => void;
-    onPrimaryButtonClick?: () => void;
-    onSecondaryButtonClick?: () => void;
+    onPrimaryButtonClick?: (e?: React.MouseEvent<HTMLElement>) => void;
+    onSecondaryButtonClick?: (e?: React.MouseEvent<HTMLElement>) => void;
     contentWithLink?: string;
     contentLink?: string;
     contentLinkText?: string;

package/dist/src/component/Dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/component/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AAKvB,UAAU,WAAW;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACvE,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,QAAA,MAAM,MAAM,GAAI,OAAO,WAAW,gCAqGjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/component/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AAKvB,UAAU,WAAW;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,SAAS,GAAG,oBAAoB,CAAC;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACvE,oBAAoB,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnE,sBAAsB,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACrE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,QAAA,MAAM,MAAM,GAAI,OAAO,WAAW,gCAqGjC,CAAC;AAEF,eAAe,MAAM,CAAC"}