@smartyweb/ui 1.3.0 → 1.3.2

package/README.md

@@ -2,65 +2,22 @@
 
 Shared React component library consumed by multiple Next.js microservices via private npm.
 
-## Stack
-
-- React 19, TypeScript, SCSS Modules
-- Vite (outputs ESM + CJS + types to `dist/`)
-- Storybook v10 for component development and documentation
-- Changesets for versioning and changelogs
-- Style Dictionary v4 for design token transformation
-
-## Getting Started
-
-```bash
-npm install
-```
-
-### Development
-
-```bash
-npm run storybook
-```
-
-This also runs `node sd.config.js` first to generate CSS tokens from `tokens.json`.
-
-### Build
-
-```bash
-npm run build
-```
-
-### Tokens only
-
-```bash
-npm run tokens
-```
-
-Regenerates `src/styles/_tokens.generated.scss` from `tokens.json` without building or starting Storybook.
-
-## Usage
-
-Install the package in your consuming app:
+## Installation
 
 ```bash
 npm install @smartyweb/ui
 ```
 
-Import styles once in your app's entry point:
+Requires **React 19** (a peer dependency). Import the stylesheet once in your app's entry point, then import components:
 
 ```js
 import "@smartyweb/ui/styles.css";
-```
-
-Then import components:
-
-```js
-import { H1, Paragraph } from "@smartyweb/ui";
+import { H1, Button } from "@smartyweb/ui";
 ```
 
 ### Font Setup
 
-This library does not bundle fonts. Consumers are responsible for loading fonts and exposing them as CSS custom properties. The library reads these three variables:
+This library does not bundle fonts. Consumers load fonts and expose them as CSS custom properties. The library reads these three variables:
 
 | CSS variable        | Font         | Used by                           |
 | ------------------- | ------------ | --------------------------------- |
@@ -82,9 +39,11 @@ const ttHovesPro = localFont({
 export default function RootLayout({ children }) {
   return (
     <html className={ttHovesPro.variable}>
-      <body style={{
-        "--ui-font-primary": "var(--font-tthoves, 'TT Hoves Pro', system-ui, sans-serif)",
-      }}>
+      <body
+        style={{
+          "--ui-font-primary": "var(--font-tthoves, 'TT Hoves Pro', system-ui, sans-serif)",
+        }}
+      >
         {children}
       </body>
     </html>
@@ -94,152 +53,25 @@ export default function RootLayout({ children }) {
 
 If a variable is not set, components fall back to `system-ui` (headings/body) or `monospace` (code).
 
-## Project Structure
-
-```
-sd.config.js                     # Style Dictionary config — tokens.json → _tokens.generated.scss
-tokens.json                      # Designer-owned, synced from Tokens Studio (Figma plugin)
-src/
-  text/
-    ComponentName/
-      ComponentName.tsx          # "use client" at top
-      ComponentName.module.scss  # uses var(--token-*) CSS custom properties
-      ComponentName.stories.tsx
-      index.ts                   # named export
-    index.ts                     # barrel export
-  styles/
-    _variables.scss              # SCSS variables (fonts, weights, breakpoints, font-feature-settings)
-    _tokens.generated.scss       # Auto-generated by sd.config.js — do not edit manually
-    global.scss
-  index.ts                       # main entry point
-```
-
-## Publishing
-
-This package uses [Changesets](https://github.com/changesets/changesets) for versioning and changelog management.
-
-### Semver policy
-
-| Change type                                                                | Bump    |
-| -------------------------------------------------------------------------- | ------- |
-| Token value changes (e.g. heading size goes from 64px → 60px)              | `patch` |
-| New CSS custom property names added (new tokens consumers could reference) | `minor` |
-| New components added                                                       | `minor` |
-| Removed components, renamed props, or changed component API                | `major` |
-
-Visual changes (token values) are always `patch` — semver communicates API stability, not pixel perfection.
-
-### Step 1 — On your feature branch
-
-Create a changeset to describe the change and bump type:
-
-```bash
-npm run changeset
-```
-
-This opens an interactive prompt:
+## Developing this library
 
-1. **Which packages changed?** — select `@smartyweb/ui`
-2. **Bump type?** — see semver policy above
-3. **Summary?** — plain English description (goes into the changelog)
+**This is a skills-driven codebase — for any repeatable task, reach for a skill (or author one) rather than doing it by hand.** Skills are verified, step-by-step walkthroughs that encode our process; run one by typing its slash command in Claude Code.
 
-Then apply the version bump immediately on the same branch:
+<!-- When you add or remove a skill, update this catalog. -->
 
-```bash
-npm run version   # bumps package.json and updates CHANGELOG.md
-```
+| Skill              | What it does                                                                   |
+| ------------------ | ------------------------------------------------------------------------------ |
+| `/validate-tokens` | Validate a Tokens Studio sync end-to-end — drift, math, Figma source-of-truth. |
+| `/version-up`      | Cut a new version with changesets (bump, changelog, release prep).             |
+| `/commit-push`     | Commit and push all changes with a summary commit message.                     |
 
-Commit everything and push:
+Local commands, for the times you do need to run something by hand:
 
 ```bash
-git add .
-git commit -m "chore: version bump"
-git push
+npm install         # install dependencies
+npm run storybook   # generate tokens, then run Storybook (component workbench)
+npm run build       # generate tokens, then build to dist/
+npm run tokens      # regenerate src/styles/_tokens.generated.scss from tokens.json
 ```
 
-### Step 2 — Open a PR and merge to master
-
-Open a PR from your feature branch → `master` on Bitbucket. The PR will include both your code changes and the version bump. Get it reviewed and merged.
-
-### Step 3 — Publish to npm (automated)
-
-Publishing happens automatically when the PR merges to `master`. Bitbucket Pipelines runs the build and `npm run release` (`changeset publish`), then pushes the git tags.
-
-No manual action needed after merge.
-
-<details>
-<summary>Manual publish (if running outside CI)</summary>
-
-```bash
-git checkout master && git pull
-npm run build
-export NPM_TOKEN=<your-token>
-npm run release   # runs `changeset publish` → publishes to npm and creates git tags
-git push --tags
-```
-
-</details>
-
-### CI Setup (one-time)
-
-Two secured repository variables must be configured under **Bitbucket repo → Settings → Pipelines → Repository variables**:
-
-| Variable          | Where to get it                                               |
-| ----------------- | ------------------------------------------------------------- |
-| `NPM_TOKEN`       | npmjs.org → Account → Access Tokens → type: "Automation"      |
-| `BITBUCKET_TOKEN` | Bitbucket repo → Settings → Access tokens (Repository: Write) |
-
-Mark both as **Secured** so they are masked in logs.
-
-## Design Tokens
-
-Design tokens flow from Figma → code via this pipeline:
-
-1. **Designer** makes changes in Tokens Studio (Figma plugin) and syncs to the `design/tokens-update` branch
-2. **CI** (Bitbucket Pipelines) runs `npm run tokens` on push, regenerates `src/styles/_tokens.generated.scss`, and commits the diff automatically
-3. **Developer** opens a PR from `design/tokens-update` → `master`, runs `npx changeset add` on the branch, and merges after review
-4. **Build** on `master` picks up the updated tokens and publishes a new npm version
-
-### Reviewing a token PR
-
-When reviewing a `design/tokens-update` PR, check:
-
-- The `_tokens.generated.scss` diff — values should match the designer's intent in Figma
-- Spot-check affected components in Storybook (deployed on Vercel, or run `npm run storybook` locally)
-- Confirm a changeset file is present in `.changeset/` before merging
-
-A changeset must be committed to the branch before the PR is merged. The developer opening the PR is responsible for this — the pipeline cannot do it automatically because bump type and description require human input.
-
-`sd.config.js` reads only the `Responsive/Desktop`, `Responsive/Tablet`, and `Responsive/Mobile` token sets, outputting ~99 CSS custom properties like:
-
-```css
-:root {
-	--h1-desktop-font-size: 64px;
-	--h1-desktop-line-height: 64px;
-	--h1-desktop-letter-spacing: -0.02em;
-	/* ... */
-}
-```
-
-Text components consume these via `var(--{component}-{breakpoint}-{property})`. Font families, weights, and OpenType feature settings remain as SCSS variables in `_variables.scss`.
-
-Note: tablet CSS custom properties are generated but components intentionally do not use them. Components apply desktop values down to 768px, then switch to mobile. Tablet tokens are kept in `tokens.json` as source data for the planned fluid typography migration (see Roadmap).
-
-## Roadmap
-
-### Fluid typography
-
-The current breakpoint approach (desktop / mobile with a hard switch at 768px) will be replaced with fluid typography using CSS `clamp()`. The desktop and mobile token values will become the max and min of the clamp range respectively, scaling continuously across the viewport.
-
-The planned implementation: Style Dictionary computes the `clamp()` formula at build time (it has access to the raw numbers), outputting a single token per property (e.g. `--h1-font-size: clamp(44px, ..., 64px)`) instead of the current per-breakpoint triplets. Component SCSS becomes a single `font-size: var(--h1-font-size)` with no media queries.
-
-The tablet token set in `tokens.json` will be retired from the Style Dictionary transform when this ships.
-
-## Architecture
-
-- **Component library only** — no routing, no pages, no app logic.
-- **All components include `"use client"`** for compatibility with Next.js App Router and Pages Router.
-- **CSS is compiled to a single file at build time.** No runtime CSS injection.
-- **React is a peerDependency**, not bundled.
-- **Stories are co-located with components.**
-- **`_tokens.generated.scss` is committed** so token changes are visible in PR diffs, but never edit it manually — always regenerate via `npm run tokens`.
+For how the codebase is laid out and why it's built this way, see [`CLAUDE.md`](./CLAUDE.md), [`docs/PRINCIPLES.md`](./docs/PRINCIPLES.md), and the decision records in [`docs/adr/`](./docs/adr).

package/dist/buttons/Button/Button.d.ts

@@ -1,10 +1,10 @@
 import { default as React } from 'react';
-type SharedProps = {
+interface SharedProps {
     variant?: "primary" | "secondary" | "negative";
     size?: "default" | "sm";
     onClick?: React.MouseEventHandler;
     children?: React.ReactNode;
-};
+}
 type AsButton = SharedProps & {
     as?: "button";
     type?: "button" | "submit" | "reset";

package/dist/buttons/Link/Link.d.ts

@@ -1,10 +1,10 @@
 import { default as React } from 'react';
-type SharedProps = {
+interface SharedProps {
     variant?: "default" | "negative";
     background?: "light" | "dark";
     onClick?: React.MouseEventHandler;
     children?: React.ReactNode;
-};
+}
 type AsAnchor = SharedProps & {
     as?: "a";
     href: string;

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),m="_h1_1765w_1",y={h1:m};function h({children:t,className:s}){return o.jsx("h1",{className:`${y.h1}${s?` ${s}`:""}`,children:t})}const d="_button_hxesz_1",x="_sm_hxesz_26",b="_primary_hxesz_33",f="_secondary_hxesz_49",g="_negative_hxesz_68",e={button:d,sm:x,primary:b,secondary:f,negative:g};function v({as:t="button",variant:s="primary",size:r="default",href:a,openInNewTab:n,disabled:c,type:_,onClick:i,children:u}){const l=[e.button,e[s],r==="sm"&&e.sm].filter(Boolean).join(" ");return o.jsx(t,{className:l,href:a,target:n?"_blank":void 0,rel:n?"noopener noreferrer":void 0,disabled:c,type:_,onClick:i,children:u})}exports.Button=v;exports.H1=h;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),m="_h1_1765w_1",d={h1:m};function g({children:t,className:s}){const e=[d.h1,s].filter(Boolean).join(" ");return r.jsx("h1",{className:e,children:t})}const y="_button_dg3ri_1",b="_sm_dg3ri_26",f="_primary_dg3ri_33",j="_secondary_dg3ri_49",v="_negative_dg3ri_68",n={button:y,sm:b,primary:f,secondary:j,negative:v};function h({as:t="button",variant:s="primary",size:e="default",href:a,openInNewTab:o,disabled:c,type:i,onClick:l,children:_}){const u=[n.button,n[s],e==="sm"&&n.sm].filter(Boolean).join(" ");return r.jsx(t,{className:u,href:a,target:o?"_blank":void 0,rel:o?"noopener noreferrer":void 0,disabled:c,type:i,onClick:l,children:_})}exports.Button=h;exports.H1=g;

package/dist/index.js

@@ -1,44 +1,46 @@
-import { jsx as o } from "react/jsx-runtime";
-const u = "_h1_1765w_1", h = {
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+const u = "_h1_1765w_1", d = {
   h1: u
 };
-function z({ children: t, className: s }) {
-  return /* @__PURE__ */ o("h1", { className: `${h.h1}${s ? ` ${s}` : ""}`, children: t });
+function j({ children: s, className: t }) {
+  const n = [d.h1, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r("h1", { className: n, children: s });
 }
-const y = "_button_hxesz_1", x = "_sm_hxesz_26", d = "_primary_hxesz_33", f = "_secondary_hxesz_49", p = "_negative_hxesz_68", n = {
-  button: y,
-  sm: x,
-  primary: d,
-  secondary: f,
-  negative: p
+const g = "_button_dg3ri_1", y = "_sm_dg3ri_26", f = "_primary_dg3ri_33", p = "_secondary_dg3ri_49", b = "_negative_dg3ri_68", o = {
+  button: g,
+  sm: y,
+  primary: f,
+  secondary: p,
+  negative: b
 };
-function g({
-  as: t = "button",
-  variant: s = "primary",
-  size: r = "default",
+function B({
+  as: s = "button",
+  variant: t = "primary",
+  size: n = "default",
   href: a,
   openInNewTab: e,
   disabled: c,
-  type: _,
-  onClick: i,
-  children: m
+  type: i,
+  onClick: _,
+  children: l
 }) {
-  const l = [n.button, n[s], r === "sm" && n.sm].filter(Boolean).join(" ");
-  return /* @__PURE__ */ o(
-    t,
+  const m = [o.button, o[t], n === "sm" && o.sm].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r(
+    s,
     {
-      className: l,
+      className: m,
       href: a,
       target: e ? "_blank" : void 0,
       rel: e ? "noopener noreferrer" : void 0,
       disabled: c,
-      type: _,
-      onClick: i,
-      children: m
+      type: i,
+      onClick: _,
+      children: l
     }
   );
 }
 export {
-  g as Button,
-  z as H1
+  B as Button,
+  j as H1
 };

package/dist/ui.css

@@ -1 +1 @@
-:root{--font-desktop-heading: TT Hoves Pro;--font-desktop-paragraph: TT Hoves Pro;--font-desktop-buttons: Inter;--font-desktop-body: Inter;--font-desktop-caption: Inter;--font-desktop-code: Hack;--font-desktop-bodyinter: Inter;--font-desktop-bodytthoves: TT Hoves Pro;--font-desktop-numbers: TT Hoves Pro;--h-extra-desktop-letter-spacing: -.03em;--h-extra-desktop-line-height: 6.625rem;--h-extra-desktop-font-size: 6rem;--h1-desktop-letter-spacing: -.02em;--h1-desktop-line-height: 4rem;--h1-desktop-font-size: 4rem;--h2-desktop-letter-spacing: -.02em;--h2-desktop-line-height: 3.5625rem;--h2-desktop-font-size: 3.25rem;--h3-desktop-letter-spacing: -.02em;--h3-desktop-line-height: 3rem;--h3-desktop-font-size: 2.75rem;--h4-desktop-letter-spacing: -.01em;--h4-desktop-line-height: 2.6875rem;--h4-desktop-font-size: 2.25rem;--h6-desktop-letter-spacing: -.01em;--h6-desktop-line-height: 1.9375rem;--h6-desktop-font-size: 1.75rem;--h5-desktop-line-height: 2.0625rem;--h5-desktop-letter-spacing: -.01em;--h5-desktop-font-size: 1.875rem;--paragraph-desktop-letter-spacing: -.01em;--paragraph-desktop-line-height: 2.25rem;--paragraph-desktop-font-size: 1.5rem;--body-small-desktop-letter-spacing: -.01em;--body-small-desktop-line-height: 1.25rem;--body-small-desktop-font-size: .875rem;--caption-large-desktop-letter-spacing: -.01em;--caption-large-desktop-line-height: 1.5rem;--caption-large-desktop-font-size: 1rem;--caption-medium-desktop-line-height: 1.125rem;--caption-medium-desktop-letter-spacing: -.02em;--caption-medium-desktop-font-size: .75rem;--code-desktop-letter-spacing: 0;--code-desktop-line-height: 1.5625rem;--code-desktop-font-size: 1.125rem;--caption-uppercase-desktop-letter-spacing: .04em;--caption-uppercase-desktop-line-height: 1rem;--caption-uppercase-desktop-font-size: .8125rem;--body-large-desktop-letter-spacing: -.02em;--body-large-desktop-line-height: 1.875rem;--body-large-desktop-font-size: 1.25rem;--button-small-desktop-line-height: 1.5rem;--button-small-desktop-letter-spacing: -.02em;--button-small-desktop-font-size: 1.0625rem;--button-large-desktop-letter-spacing: -.02em;--button-large-desktop-line-height: 1.5rem;--button-large-desktop-font-size: 1.25rem;--captionsm-desktop-line-height: 1.125rem;--captionsm-desktop-letter-spacing: -.02em;--captionsm-desktop-font-size: .75rem;--bodylginter-desktop-letter-spacing: -.02em;--bodylginter-desktop-line-height: 1.875rem;--bodylginter-desktop-font-size: 1.25rem;--buttonsm-desktop-line-height: 1.5rem;--buttonsm-desktop-letter-spacing: -.01em;--buttonsm-desktop-font-size: .875rem;--buttonlg-desktop-letter-spacing: -.02em;--buttonlg-desktop-line-height: 1.5rem;--buttonlg-desktop-font-size: 1.25rem;--h7-desktop-font-size: 1.5rem;--h7-desktop-letter-spacing: -.01em;--h7-desktop-line-height: 1.75rem;--buttonmd-desktop-font-size: 1.0625rem;--buttonmd-desktop-line-height: 1.5rem;--buttonmd-desktop-letter-spacing: -.02em;--bodymdtthoves-desktop-letter-spacing: -.01em;--bodymdtthoves-desktop-font-size: 1rem;--bodymdtthoves-desktop-line-height: 1.375rem;--bodylgtthoves-desktop-font-size: 1.125rem;--bodylgtthoves-desktop-line-height: 1.5rem;--bodylgtthoves-desktop-letter-spacing: -.01em;--numbers-desktop-line-height: 1.375rem;--numbers-desktop-letter-spacing: .04em;--numbers-desktop-font-size: 1rem;--bodymdinter-desktop-letter-spacing: -.02em;--bodymdinter-desktop-font-size: 1rem;--bodymdinter-desktop-line-height: 1.5rem;--captionsmbold-desktop-font-size: .75rem;--captionsmbold-desktop-line-height: 1rem;--captionsmbold-desktop-letter-spacing: -.01em;--font-tablet-heading: TT Hoves Pro;--font-tablet-paragraph: TT Hoves Pro;--font-tablet-buttons: Inter;--font-tablet-body: Inter;--font-tablet-caption: Inter;--font-tablet-code: Hack;--font-tablet-bodyinter: Inter;--font-tablet-bodytthoves: TT Hoves Pro;--font-tablet-numbers: TT Hoves Pro;--h-extra-tablet-letter-spacing: -.03em;--h-extra-tablet-line-height: 7.5625rem;--h-extra-tablet-font-size: 6.875rem;--h1-tablet-letter-spacing: -.02em;--h1-tablet-line-height: 4.4rem;--h1-tablet-font-size: 4rem;--h2-tablet-letter-spacing: -.02em;--h2-tablet-line-height: 3.3125rem;--h2-tablet-font-size: 3rem;--h3-tablet-letter-spacing: -.02em;--h3-tablet-line-height: 2.75rem;--h3-tablet-font-size: 2.5rem;--h4-tablet-letter-spacing: -.02em;--h4-tablet-line-height: 2.6875rem;--h4-tablet-font-size: 2.25rem;--h6-tablet-letter-spacing: -.01em;--h6-tablet-line-height: 1.625rem;--h6-tablet-font-size: 1.5rem;--h5-tablet-line-height: 2.1875rem;--h5-tablet-letter-spacing: -.01em;--h5-tablet-font-size: 2rem;--paragraph-tablet-letter-spacing: -.01em;--paragraph-tablet-line-height: 2.0625rem;--paragraph-tablet-font-size: 1.375rem;--body-small-tablet-letter-spacing: -.01em;--body-small-tablet-line-height: 1.25rem;--body-small-tablet-font-size: .875rem;--caption-large-tablet-letter-spacing: -.02em;--caption-large-tablet-line-height: 1.5rem;--caption-large-tablet-font-size: 1rem;--caption-medium-tablet-line-height: 1.125rem;--caption-medium-tablet-letter-spacing: -.02em;--caption-medium-tablet-font-size: .75rem;--code-tablet-letter-spacing: 0;--code-tablet-line-height: 1.5625rem;--code-tablet-font-size: 1.125rem;--caption-uppercase-tablet-letter-spacing: .04em;--caption-uppercase-tablet-line-height: 1rem;--caption-uppercase-tablet-font-size: .8125rem;--body-large-tablet-letter-spacing: -.02em;--body-large-tablet-line-height: 1.6875rem;--body-large-tablet-font-size: 1.125rem;--button-small-tablet-line-height: 1.5rem;--button-small-tablet-letter-spacing: -.02em;--button-small-tablet-font-size: 1rem;--button-large-tablet-letter-spacing: -.02em;--button-large-tablet-line-height: 1.5rem;--button-large-tablet-font-size: 1.125rem;--captionsm-tablet-line-height: 1.125rem;--captionsm-tablet-letter-spacing: -.02em;--captionsm-tablet-font-size: .75rem;--bodylginter-tablet-letter-spacing: -.02em;--bodylginter-tablet-line-height: 1.6875rem;--bodylginter-tablet-font-size: 1.125rem;--buttonsm-tablet-line-height: 1.5rem;--buttonsm-tablet-letter-spacing: -.01em;--buttonsm-tablet-font-size: .875rem;--buttonlg-tablet-letter-spacing: -.02em;--buttonlg-tablet-line-height: 1.5rem;--buttonlg-tablet-font-size: 1.125rem;--h7-tablet-font-size: 1.375rem;--h7-tablet-letter-spacing: -.01em;--h7-tablet-line-height: 1.625rem;--buttonmd-tablet-font-size: 1rem;--buttonmd-tablet-line-height: 1.5rem;--buttonmd-tablet-letter-spacing: -.02em;--bodymdtthoves-tablet-letter-spacing: -.01em;--bodymdtthoves-tablet-font-size: 1rem;--bodymdtthoves-tablet-line-height: 1.375rem;--bodylgtthoves-tablet-font-size: 1rem;--bodylgtthoves-tablet-line-height: 1.375rem;--bodylgtthoves-tablet-letter-spacing: -.01em;--numbers-tablet-line-height: 1.375rem;--numbers-tablet-letter-spacing: .04em;--numbers-tablet-font-size: 1rem;--bodymdinter-tablet-letter-spacing: -.02em;--bodymdinter-tablet-font-size: 1rem;--bodymdinter-tablet-line-height: 1.5rem;--captionsmbold-tablet-font-size: .75rem;--captionsmbold-tablet-line-height: 1rem;--captionsmbold-tablet-letter-spacing: -.01em;--font-mobile-heading: TT Hoves Pro;--font-mobile-paragraph: TT Hoves Pro;--font-mobile-buttons: Inter;--font-mobile-body: Inter;--font-mobile-caption: Inter;--font-mobile-code: Hack;--font-mobile-bodyinter: Inter;--font-mobile-bodytthoves: TT Hoves Pro;--font-mobile-numbers: TT Hoves Pro;--h-extra-mobile-letter-spacing: -.02em;--h-extra-mobile-line-height: 3.875rem;--h-extra-mobile-font-size: 3.5rem;--h1-mobile-letter-spacing: -.01em;--h1-mobile-line-height: 2.75rem;--h1-mobile-font-size: 2.75rem;--h2-mobile-letter-spacing: -.01em;--h2-mobile-line-height: 2.75rem;--h2-mobile-font-size: 2.5rem;--h3-mobile-letter-spacing: -.01em;--h3-mobile-line-height: 2.5rem;--h3-mobile-font-size: 2.25rem;--h4-mobile-letter-spacing: -.01em;--h4-mobile-line-height: 2.625rem;--h4-mobile-font-size: 2rem;--h6-mobile-letter-spacing: -.01em;--h6-mobile-line-height: 1.375rem;--h6-mobile-font-size: 1.25rem;--h5-mobile-line-height: 1.5rem;--h5-mobile-letter-spacing: -.01em;--h5-mobile-font-size: 1.375rem;--paragraph-mobile-letter-spacing: -.01em;--paragraph-mobile-line-height: 1.6875rem;--paragraph-mobile-font-size: 1.125rem;--body-small-mobile-letter-spacing: -.01em;--body-small-mobile-line-height: 1.25rem;--body-small-mobile-font-size: .875rem;--caption-large-mobile-letter-spacing: -.02em;--caption-large-mobile-line-height: 1.5rem;--caption-large-mobile-font-size: 1rem;--caption-medium-mobile-line-height: 1.125rem;--caption-medium-mobile-letter-spacing: -.02em;--caption-medium-mobile-font-size: .75rem;--code-mobile-letter-spacing: 0;--code-mobile-line-height: 1.375rem;--code-mobile-font-size: 1rem;--caption-uppercase-mobile-letter-spacing: .04em;--caption-uppercase-mobile-line-height: 1rem;--caption-uppercase-mobile-font-size: .75rem;--body-large-mobile-letter-spacing: -.01em;--body-large-mobile-line-height: 1.5rem;--body-large-mobile-font-size: 1rem;--button-small-mobile-line-height: 1.5rem;--button-small-mobile-letter-spacing: -.01em;--button-small-mobile-font-size: .875rem;--button-large-mobile-letter-spacing: -.01em;--button-large-mobile-line-height: 1.5rem;--button-large-mobile-font-size: 1rem;--captionsm-mobile-line-height: 1.125rem;--captionsm-mobile-letter-spacing: -.02em;--captionsm-mobile-font-size: .75rem;--bodylginter-mobile-letter-spacing: -.01em;--bodylginter-mobile-line-height: 1.5rem;--bodylginter-mobile-font-size: 1rem;--buttonsm-mobile-line-height: 1.5rem;--buttonsm-mobile-letter-spacing: -.01em;--buttonsm-mobile-font-size: .75rem;--buttonlg-mobile-letter-spacing: -.01em;--buttonlg-mobile-line-height: 1.5rem;--buttonlg-mobile-font-size: 1rem;--h7-mobile-font-size: 1.25rem;--h7-mobile-letter-spacing: -.01em;--h7-mobile-line-height: 1.5rem;--buttonmd-mobile-font-size: .875rem;--buttonmd-mobile-line-height: 1.5rem;--buttonmd-mobile-letter-spacing: -.01em;--bodymdtthoves-mobile-letter-spacing: -.01em;--bodymdtthoves-mobile-font-size: 1rem;--bodymdtthoves-mobile-line-height: 1.375rem;--bodylgtthoves-mobile-font-size: .875rem;--bodylgtthoves-mobile-line-height: 1.1875rem;--bodylgtthoves-mobile-letter-spacing: -.01em;--numbers-mobile-line-height: 1.375rem;--numbers-mobile-letter-spacing: .04em;--numbers-mobile-font-size: 1rem;--bodymdinter-mobile-letter-spacing: -.01em;--bodymdinter-mobile-font-size: .875rem;--bodymdinter-mobile-line-height: 1.3125rem;--captionsmbold-mobile-font-size: .75rem;--captionsmbold-mobile-line-height: 1rem;--captionsmbold-mobile-letter-spacing: -.01em;--text-headings-primary: #151b23;--text-body-primary: #151b23;--text-action: #0066ff;--text-action-hover: #0039b5;--text-disabled: #b7bec7;--text-warning: #6b1000;--text-positive: #005925;--text-negative: #6b0039;--text-on-lit-blu: #0039b5;--text-on-lit-blu-hover: #001d7a;--text-headings-secondary: #383e48;--text-body-secondary: #383e48;--text-body-tertiary: #939ba6;--text-headings-tertiary: #939ba6;--text-button-primary: #ffffff;--text-pressed: #001d7a;--text-on-lit-blu-hover-pressed: #002ea3;--text-action-pressed: #001d7a;--icons-default: #151b23;--icons-default-secondary: #383e48;--icons-default-tertiary: #939ba6;--icons-action: #0066ff;--icons-action-hover: #0039b5;--icons-disabled: #d6dbe0;--icons-warning: #f5804e;--icons-positive: #47cc69;--icons-negative: #b22265;--icons-on-lit-blu: #0039b5;--icons-on-lit-blu-hover: #0066ff;--icons-on-action: #ffffff;--icons-pressed: #001d7a;--icons-disabled-hover: #939ba6;--icons-disabled-on-blu: #8fc1ff;--surface-primary: #ffffff;--surface-secondary: #f5f7fa;--surface-tertiary: #e6e9ed;--surface-secondary-tinted: #e2f0ff;--surface-tertiary-tinted: #bddcff;--surface-action: #0066ff;--surface-action-hover: #0039b5;--surface-positive: #cffad6;--surface-warning: #ffebde;--surface-negative: #ffe8ef;--surface-on-lit-blu: #0039b5;--surface-on-lit-blu-hover: #0066ff;--surface-disabled: #e6e9ed;--surface-action-pressed: #001d7a;--surface-negative-hover: #ffcbdb;--surface-negative-pressed: #ffafc8;--surface-overlay: #001d7a80;--surface-disabled-hover: #b7bec7;--surface-disabled-blue: #bddcff;--surface-elevation: #00204a08;--surface-toggle: #b7bec7;--surface-toggle-hover: #939ba6;--surface-toggle-hover-on-blu: #2d84ff;--surface-toggle-on-blu: #5aa1ff;--stroke-secondary: #e6e9ed;--stroke-tertiary: #d6dbe0;--stroke-disabled: #b7bec7;--stroke-focused: #5aa1ff;--stroke-action: #0066ff;--stroke-positive: #005925;--stroke-warning: #6b1000;--stroke-negative: #6b0039;--stroke-action-hover: #0039b5;--stroke-on-lit-blu: #0039b5;--stroke-on-lit-blu-hover: #0066ff;--stroke-action-pressed: #001d7a;--stroke-default: #151b23;--stroke-disabled-hover: #939ba6;--borderradius-lg: 36px;--borderradius-md: 24px;--borderradius-sm: 360px;--borderradius-none: 0;--borderradius-button: 99px;--borderradius-cardlg: 24px;--borderradius-cardsm: 12px;--borderradius-pill: 99px;--borderradius-focusedstroke: 4px;--strokewidth-lg: 8px;--strokewidth-md: 4px;--strokewidth-sm: 2px;--strokewidth-none: 0;--spacing-5xs: .25rem;--spacing-4xs: .5rem;--spacing-3xs: .75rem;--spacing-2xs: 1rem;--spacing-xs: 1.25rem;--spacing-s: 1.5rem;--spacing-m: 1.75rem;--spacing-l: 2rem;--spacing-xl: 2.5rem;--spacing-2xl: 2.75rem;--spacing-3xl: 3rem;--spacing-4xl: 3.5rem;--spacing-5xl: 4rem;--spacing-6xl: 4.5rem;--spacing-7xl: 5rem;--spacing-8xl: 6rem;--spacing-9xl: 7.5rem;--spacing-10xl: 10rem;--product-enrichment: #47cc69;--product-address-autocomplete: #9560ff;--product-geocoding: #f5804e;--product-address-verification: #f55591;--product-professional-services: #0066ff;--product-data-sets: #3dc9d1;--insetspacing-5xs: .25rem;--insetspacing-4xs: .5rem;--insetspacing-3xs: .75rem;--insetspacing-2xs: 1rem;--insetspacing-xs: 1.25rem;--insetspacing-s: 1.5rem;--insetspacing-m: 1.75rem;--insetspacing-l: 2rem;--insetspacing-xl: 2.5rem;--insetspacing-2xl: 2.75rem;--insetspacing-3xl: 3rem;--insetspacing-4xl: 3.5rem;--insetspacing-5xl: 4rem;--insetspacing-6xl: 4.5rem;--insetspacing-7xl: 5rem;--insetspacing-8xl: 6rem;--insetspacing-9xl: 7.5rem;--insetspacing-10xl: 10rem;--stackspacing-5xs: .25rem;--stackspacing-4xs: .5rem;--stackspacing-3xs: .75rem;--stackspacing-2xs: 1rem;--stackspacing-xs: 1.25rem;--stackspacing-s: 1.5rem;--stackspacing-m: 1.75rem;--stackspacing-l: 2rem;--stackspacing-xl: 2.5rem;--stackspacing-2xl: 2.75rem;--stackspacing-3xl: 3rem;--stackspacing-4xl: 3.5rem;--stackspacing-5xl: 4rem;--stackspacing-6xl: 4.5rem;--stackspacing-7xl: 5rem;--stackspacing-8xl: 6rem;--stackspacing-9xl: 7.5rem;--stackspacing-10xl: 10rem;--inlinespacing-5xs: .25rem;--inlinespacing-4xs: .5rem;--inlinespacing-3xs: .75rem;--inlinespacing-2xs: 1rem;--inlinespacing-xs: 1.25rem;--inlinespacing-s: 1.5rem;--inlinespacing-m: 1.75rem;--inlinespacing-l: 2rem;--inlinespacing-xl: 2.5rem;--inlinespacing-2xl: 2.75rem;--inlinespacing-3xl: 3rem;--inlinespacing-4xl: 3.5rem;--inlinespacing-5xl: 4rem;--inlinespacing-6xl: 4.5rem;--inlinespacing-7xl: 5rem;--inlinespacing-8xl: 6rem;--inlinespacing-9xl: 7.5rem;--inlinespacing-10xl: 10rem}[data-theme=dark]{--text-headings-primary: #ffffff;--text-body-primary: #ffffff;--text-action: #ffffff;--text-action-hover: #b7bec7;--text-disabled: #49505b;--text-warning: #f5804e;--text-positive: #47cc69;--text-negative: #f55591;--text-on-lit-blu: #0039b5;--text-on-lit-blu-hover: #001d7a;--text-headings-secondary: #b7bec7;--text-body-secondary: #b7bec7;--text-body-tertiary: #383e48;--text-headings-tertiary: #383e48;--text-button-primary: #151b23;--text-pressed: #5c636e;--text-on-lit-blu-hover-pressed: #002ea3;--text-action-pressed: #5c636e;--icons-default: #ffffff;--icons-default-secondary: #b7bec7;--icons-default-tertiary: #383e48;--icons-action: #ffffff;--icons-action-hover: #b7bec7;--icons-disabled: #383e48;--icons-warning: #f5804e;--icons-positive: #47cc69;--icons-negative: #b22265;--icons-on-lit-blu: #ffffff;--icons-on-lit-blu-hover: #ffffff;--icons-on-action: #151b23;--icons-pressed: #5c636e;--icons-disabled-hover: #383e48;--icons-disabled-on-blu: #8fc1ff;--surface-primary: #151b23;--surface-secondary: #262c36;--surface-tertiary: #383e48;--surface-secondary-tinted: #e2f0ff;--surface-tertiary-tinted: #bddcff;--surface-action: #ffffff;--surface-action-hover: #b7bec7;--surface-positive: #cffad6;--surface-warning: #ffebde;--surface-negative: #ffe8ef;--surface-on-lit-blu: #0039b5;--surface-on-lit-blu-hover: #0066ff;--surface-disabled: #939ba6;--surface-action-pressed: #6e7580;--surface-negative-hover: #ffcbdb;--surface-negative-pressed: #ffafc8;--surface-overlay: #001d7a80;--surface-disabled-hover: #383e48;--surface-disabled-blue: #bddcff;--surface-elevation: #262c36;--surface-toggle: #5c636e;--surface-toggle-hover: #939ba6;--surface-toggle-hover-on-blu: #2d84ff;--surface-toggle-on-blu: #5aa1ff;--stroke-secondary: #49505b;--stroke-tertiary: #5c636e;--stroke-disabled: #383e48;--stroke-focused: #5aa1ff;--stroke-action: #ffffff;--stroke-positive: #005925;--stroke-warning: #6b1000;--stroke-negative: #6b0039;--stroke-action-hover: #b7bec7;--stroke-on-lit-blu: #0039b5;--stroke-on-lit-blu-hover: #0066ff;--stroke-action-pressed: #5c636e;--stroke-default: #ffffff;--stroke-disabled-hover: #151b23}._h1_1765w_1{font-size:clamp(2.75rem,1.8779vw + 2.3099rem,4rem);line-height:clamp(2.75rem,1.8779vw + 2.3099rem,4rem);letter-spacing:-.02em;font-family:var(--ui-font-primary);font-weight:500;font-feature-settings:"ss01" 1,"ss02" 1,"ss04" 1;margin:0}._button_hxesz_1{appearance:none;border:none;background:none;display:inline-block;text-decoration:none;cursor:pointer;border-radius:var(--borderradius-sm);padding:clamp(.75rem,.3756vw + .662rem,1rem) clamp(1rem,.7512vw + .8239rem,1.5rem);font-size:clamp(1rem,.3756vw + .912rem,1.25rem);line-height:1.5rem;letter-spacing:-.02em;font-family:var(--ui-font-body);font-weight:500;font-feature-settings:"dlig" 1;transition:background-color .15s ease,color .15s ease}._button_hxesz_1:focus-visible{outline:2px solid var(--stroke-focused);outline-offset:2px}._button_hxesz_1:disabled{cursor:not-allowed}._sm_hxesz_26{font-size:clamp(.875rem,.2817vw + .809rem,1.0625rem);line-height:1.5rem;letter-spacing:-.02em;padding:clamp(.5rem,.3756vw + .412rem,.75rem) clamp(1rem,.3756vw + .912rem,1.25rem)}._primary_hxesz_33{background-color:var(--surface-action);color:var(--text-button-primary)}._primary_hxesz_33:hover:not(:disabled){background-color:var(--surface-action-hover);color:var(--text-button-primary)}._primary_hxesz_33:active:not(:disabled){background-color:var(--surface-action-pressed)}._primary_hxesz_33:disabled{background-color:var(--surface-disabled);color:var(--text-disabled)}._secondary_hxesz_49{background-color:transparent;color:var(--text-body-primary);box-shadow:inset 0 0 0 var(--strokewidth-md) var(--stroke-default);transition:box-shadow .15s ease,color .15s ease}._secondary_hxesz_49:hover:not(:disabled){box-shadow:inset 0 0 0 var(--strokewidth-md) var(--stroke-action-hover);color:var(--text-action-hover)}._secondary_hxesz_49:active:not(:disabled){box-shadow:inset 0 0 0 var(--strokewidth-md) var(--stroke-action-pressed);color:var(--text-pressed)}._secondary_hxesz_49:disabled{box-shadow:inset 0 0 0 var(--strokewidth-md) var(--stroke-disabled);color:var(--text-disabled)}._negative_hxesz_68{background-color:var(--surface-negative);color:var(--text-negative)}._negative_hxesz_68:hover:not(:disabled){background-color:var(--surface-negative-hover);color:var(--text-negative)}._negative_hxesz_68:active:not(:disabled){background-color:var(--surface-negative-pressed)}._negative_hxesz_68:disabled{background-color:var(--surface-disabled);color:var(--text-disabled)}
+:root{--font-desktop-heading: TT Hoves Pro;--font-desktop-paragraph: TT Hoves Pro;--font-desktop-buttons: Inter;--font-desktop-body: Inter;--font-desktop-caption: Inter;--font-desktop-code: Hack;--font-desktop-bodyinter: Inter;--font-desktop-bodytthoves: TT Hoves Pro;--font-desktop-numbers: TT Hoves Pro;--h-extra-desktop-letter-spacing: -.03em;--h-extra-desktop-line-height: 6.625rem;--h-extra-desktop-font-size: 6rem;--h1-desktop-letter-spacing: -.02em;--h1-desktop-line-height: 4rem;--h1-desktop-font-size: 4rem;--h2-desktop-letter-spacing: -.02em;--h2-desktop-line-height: 3.5625rem;--h2-desktop-font-size: 3.25rem;--h3-desktop-letter-spacing: -.02em;--h3-desktop-line-height: 3rem;--h3-desktop-font-size: 2.75rem;--h4-desktop-letter-spacing: -.01em;--h4-desktop-line-height: 2.6875rem;--h4-desktop-font-size: 2.25rem;--h6-desktop-letter-spacing: -.01em;--h6-desktop-line-height: 1.9375rem;--h6-desktop-font-size: 1.75rem;--h5-desktop-line-height: 2.0625rem;--h5-desktop-letter-spacing: -.01em;--h5-desktop-font-size: 1.875rem;--paragraph-desktop-letter-spacing: -.01em;--paragraph-desktop-line-height: 2.25rem;--paragraph-desktop-font-size: 1.5rem;--body-small-desktop-letter-spacing: -.01em;--body-small-desktop-line-height: 1.25rem;--body-small-desktop-font-size: .875rem;--caption-large-desktop-letter-spacing: -.01em;--caption-large-desktop-line-height: 1.5rem;--caption-large-desktop-font-size: 1rem;--caption-medium-desktop-line-height: 1.125rem;--caption-medium-desktop-letter-spacing: -.02em;--caption-medium-desktop-font-size: .75rem;--code-desktop-letter-spacing: 0;--code-desktop-line-height: 1.5625rem;--code-desktop-font-size: 1.125rem;--caption-uppercase-desktop-letter-spacing: .04em;--caption-uppercase-desktop-line-height: 1rem;--caption-uppercase-desktop-font-size: .8125rem;--body-large-desktop-letter-spacing: -.02em;--body-large-desktop-line-height: 1.875rem;--body-large-desktop-font-size: 1.25rem;--button-small-desktop-line-height: 1.5rem;--button-small-desktop-letter-spacing: -.02em;--button-small-desktop-font-size: 1.0625rem;--button-large-desktop-letter-spacing: -.02em;--button-large-desktop-line-height: 1.5rem;--button-large-desktop-font-size: 1.25rem;--captionsm-desktop-line-height: 1.125rem;--captionsm-desktop-letter-spacing: -.02em;--captionsm-desktop-font-size: .75rem;--bodylginter-desktop-letter-spacing: -.02em;--bodylginter-desktop-line-height: 1.875rem;--bodylginter-desktop-font-size: 1.25rem;--buttonsm-desktop-line-height: 1.5rem;--buttonsm-desktop-letter-spacing: -.01em;--buttonsm-desktop-font-size: .875rem;--buttonlg-desktop-letter-spacing: -.02em;--buttonlg-desktop-line-height: 1.5rem;--buttonlg-desktop-font-size: 1.25rem;--h7-desktop-font-size: 1.5rem;--h7-desktop-letter-spacing: -.01em;--h7-desktop-line-height: 1.75rem;--buttonmd-desktop-font-size: 1.0625rem;--buttonmd-desktop-line-height: 1.5rem;--buttonmd-desktop-letter-spacing: -.02em;--bodymdtthoves-desktop-letter-spacing: -.01em;--bodymdtthoves-desktop-font-size: 1rem;--bodymdtthoves-desktop-line-height: 1.375rem;--bodylgtthoves-desktop-font-size: 1.125rem;--bodylgtthoves-desktop-line-height: 1.5rem;--bodylgtthoves-desktop-letter-spacing: -.01em;--numbers-desktop-line-height: 1.375rem;--numbers-desktop-letter-spacing: .04em;--numbers-desktop-font-size: 1rem;--bodymdinter-desktop-letter-spacing: -.02em;--bodymdinter-desktop-font-size: 1rem;--bodymdinter-desktop-line-height: 1.5rem;--captionsmbold-desktop-font-size: .75rem;--captionsmbold-desktop-line-height: 1rem;--captionsmbold-desktop-letter-spacing: -.01em;--font-tablet-heading: TT Hoves Pro;--font-tablet-paragraph: TT Hoves Pro;--font-tablet-buttons: Inter;--font-tablet-body: Inter;--font-tablet-caption: Inter;--font-tablet-code: Hack;--font-tablet-bodyinter: Inter;--font-tablet-bodytthoves: TT Hoves Pro;--font-tablet-numbers: TT Hoves Pro;--h-extra-tablet-letter-spacing: -.03em;--h-extra-tablet-line-height: 7.5625rem;--h-extra-tablet-font-size: 6.875rem;--h1-tablet-letter-spacing: -.02em;--h1-tablet-line-height: 4.4rem;--h1-tablet-font-size: 4rem;--h2-tablet-letter-spacing: -.02em;--h2-tablet-line-height: 3.3125rem;--h2-tablet-font-size: 3rem;--h3-tablet-letter-spacing: -.02em;--h3-tablet-line-height: 2.75rem;--h3-tablet-font-size: 2.5rem;--h4-tablet-letter-spacing: -.02em;--h4-tablet-line-height: 2.6875rem;--h4-tablet-font-size: 2.25rem;--h6-tablet-letter-spacing: -.01em;--h6-tablet-line-height: 1.625rem;--h6-tablet-font-size: 1.5rem;--h5-tablet-line-height: 2.1875rem;--h5-tablet-letter-spacing: -.01em;--h5-tablet-font-size: 2rem;--paragraph-tablet-letter-spacing: -.01em;--paragraph-tablet-line-height: 2.0625rem;--paragraph-tablet-font-size: 1.375rem;--body-small-tablet-letter-spacing: -.01em;--body-small-tablet-line-height: 1.25rem;--body-small-tablet-font-size: .875rem;--caption-large-tablet-letter-spacing: -.02em;--caption-large-tablet-line-height: 1.5rem;--caption-large-tablet-font-size: 1rem;--caption-medium-tablet-line-height: 1.125rem;--caption-medium-tablet-letter-spacing: -.02em;--caption-medium-tablet-font-size: .75rem;--code-tablet-letter-spacing: 0;--code-tablet-line-height: 1.5625rem;--code-tablet-font-size: 1.125rem;--caption-uppercase-tablet-letter-spacing: .04em;--caption-uppercase-tablet-line-height: 1rem;--caption-uppercase-tablet-font-size: .8125rem;--body-large-tablet-letter-spacing: -.02em;--body-large-tablet-line-height: 1.6875rem;--body-large-tablet-font-size: 1.125rem;--button-small-tablet-line-height: 1.5rem;--button-small-tablet-letter-spacing: -.02em;--button-small-tablet-font-size: 1rem;--button-large-tablet-letter-spacing: -.02em;--button-large-tablet-line-height: 1.5rem;--button-large-tablet-font-size: 1.125rem;--captionsm-tablet-line-height: 1.125rem;--captionsm-tablet-letter-spacing: -.02em;--captionsm-tablet-font-size: .75rem;--bodylginter-tablet-letter-spacing: -.02em;--bodylginter-tablet-line-height: 1.6875rem;--bodylginter-tablet-font-size: 1.125rem;--buttonsm-tablet-line-height: 1.5rem;--buttonsm-tablet-letter-spacing: -.01em;--buttonsm-tablet-font-size: .875rem;--buttonlg-tablet-letter-spacing: -.02em;--buttonlg-tablet-line-height: 1.5rem;--buttonlg-tablet-font-size: 1.125rem;--h7-tablet-font-size: 1.375rem;--h7-tablet-letter-spacing: -.01em;--h7-tablet-line-height: 1.625rem;--buttonmd-tablet-font-size: 1rem;--buttonmd-tablet-line-height: 1.5rem;--buttonmd-tablet-letter-spacing: -.02em;--bodymdtthoves-tablet-letter-spacing: -.01em;--bodymdtthoves-tablet-font-size: 1rem;--bodymdtthoves-tablet-line-height: 1.375rem;--bodylgtthoves-tablet-font-size: 1rem;--bodylgtthoves-tablet-line-height: 1.375rem;--bodylgtthoves-tablet-letter-spacing: -.01em;--numbers-tablet-line-height: 1.375rem;--numbers-tablet-letter-spacing: .04em;--numbers-tablet-font-size: 1rem;--bodymdinter-tablet-letter-spacing: -.02em;--bodymdinter-tablet-font-size: 1rem;--bodymdinter-tablet-line-height: 1.5rem;--captionsmbold-tablet-font-size: .75rem;--captionsmbold-tablet-line-height: 1rem;--captionsmbold-tablet-letter-spacing: -.01em;--font-mobile-heading: TT Hoves Pro;--font-mobile-paragraph: TT Hoves Pro;--font-mobile-buttons: Inter;--font-mobile-body: Inter;--font-mobile-caption: Inter;--font-mobile-code: Hack;--font-mobile-bodyinter: Inter;--font-mobile-bodytthoves: TT Hoves Pro;--font-mobile-numbers: TT Hoves Pro;--h-extra-mobile-letter-spacing: -.02em;--h-extra-mobile-line-height: 3.875rem;--h-extra-mobile-font-size: 3.5rem;--h1-mobile-letter-spacing: -.01em;--h1-mobile-line-height: 2.75rem;--h1-mobile-font-size: 2.75rem;--h2-mobile-letter-spacing: -.01em;--h2-mobile-line-height: 2.75rem;--h2-mobile-font-size: 2.5rem;--h3-mobile-letter-spacing: -.01em;--h3-mobile-line-height: 2.5rem;--h3-mobile-font-size: 2.25rem;--h4-mobile-letter-spacing: -.01em;--h4-mobile-line-height: 2.625rem;--h4-mobile-font-size: 2rem;--h6-mobile-letter-spacing: -.01em;--h6-mobile-line-height: 1.375rem;--h6-mobile-font-size: 1.25rem;--h5-mobile-line-height: 1.5rem;--h5-mobile-letter-spacing: -.01em;--h5-mobile-font-size: 1.375rem;--paragraph-mobile-letter-spacing: -.01em;--paragraph-mobile-line-height: 1.6875rem;--paragraph-mobile-font-size: 1.125rem;--body-small-mobile-letter-spacing: -.01em;--body-small-mobile-line-height: 1.25rem;--body-small-mobile-font-size: .875rem;--caption-large-mobile-letter-spacing: -.02em;--caption-large-mobile-line-height: 1.5rem;--caption-large-mobile-font-size: 1rem;--caption-medium-mobile-line-height: 1.125rem;--caption-medium-mobile-letter-spacing: -.02em;--caption-medium-mobile-font-size: .75rem;--code-mobile-letter-spacing: 0;--code-mobile-line-height: 1.375rem;--code-mobile-font-size: 1rem;--caption-uppercase-mobile-letter-spacing: .04em;--caption-uppercase-mobile-line-height: 1rem;--caption-uppercase-mobile-font-size: .75rem;--body-large-mobile-letter-spacing: -.01em;--body-large-mobile-line-height: 1.5rem;--body-large-mobile-font-size: 1rem;--button-small-mobile-line-height: 1.5rem;--button-small-mobile-letter-spacing: -.01em;--button-small-mobile-font-size: .875rem;--button-large-mobile-letter-spacing: -.01em;--button-large-mobile-line-height: 1.5rem;--button-large-mobile-font-size: 1rem;--captionsm-mobile-line-height: 1.125rem;--captionsm-mobile-letter-spacing: -.02em;--captionsm-mobile-font-size: .75rem;--bodylginter-mobile-letter-spacing: -.01em;--bodylginter-mobile-line-height: 1.5rem;--bodylginter-mobile-font-size: 1rem;--buttonsm-mobile-line-height: 1.5rem;--buttonsm-mobile-letter-spacing: -.01em;--buttonsm-mobile-font-size: .75rem;--buttonlg-mobile-letter-spacing: -.01em;--buttonlg-mobile-line-height: 1.5rem;--buttonlg-mobile-font-size: 1rem;--h7-mobile-font-size: 1.25rem;--h7-mobile-letter-spacing: -.01em;--h7-mobile-line-height: 1.5rem;--buttonmd-mobile-font-size: .875rem;--buttonmd-mobile-line-height: 1.5rem;--buttonmd-mobile-letter-spacing: -.01em;--bodymdtthoves-mobile-letter-spacing: -.01em;--bodymdtthoves-mobile-font-size: 1rem;--bodymdtthoves-mobile-line-height: 1.375rem;--bodylgtthoves-mobile-font-size: .875rem;--bodylgtthoves-mobile-line-height: 1.1875rem;--bodylgtthoves-mobile-letter-spacing: -.01em;--numbers-mobile-line-height: 1.375rem;--numbers-mobile-letter-spacing: .04em;--numbers-mobile-font-size: 1rem;--bodymdinter-mobile-letter-spacing: -.01em;--bodymdinter-mobile-font-size: .875rem;--bodymdinter-mobile-line-height: 1.3125rem;--captionsmbold-mobile-font-size: .75rem;--captionsmbold-mobile-line-height: 1rem;--captionsmbold-mobile-letter-spacing: -.01em;--text-headings-primary: #151b23;--text-body-primary: #151b23;--text-action: #0066ff;--text-action-hover: #0039b5;--text-disabled: #b7bec7;--text-warning: #6b1000;--text-positive: #005925;--text-negative: #6b0039;--text-on-lit-blu: #0039b5;--text-on-lit-blu-hover: #001d7a;--text-headings-secondary: #383e48;--text-body-secondary: #383e48;--text-body-tertiary: #939ba6;--text-headings-tertiary: #939ba6;--text-button-primary: #ffffff;--text-pressed: #001d7a;--text-on-lit-blu-hover-pressed: #002ea3;--text-action-pressed: #001d7a;--icons-default: #151b23;--icons-default-secondary: #383e48;--icons-default-tertiary: #939ba6;--icons-action: #0066ff;--icons-action-hover: #0039b5;--icons-disabled: #d6dbe0;--icons-warning: #f5804e;--icons-positive: #47cc69;--icons-negative: #b22265;--icons-on-lit-blu: #0039b5;--icons-on-lit-blu-hover: #0066ff;--icons-on-action: #ffffff;--icons-pressed: #001d7a;--icons-disabled-hover: #939ba6;--icons-disabled-on-blu: #8fc1ff;--surface-primary: #ffffff;--surface-secondary: #f5f7fa;--surface-tertiary: #e6e9ed;--surface-secondary-tinted: #e2f0ff;--surface-tertiary-tinted: #bddcff;--surface-action: #0066ff;--surface-action-hover: #0039b5;--surface-positive: #cffad6;--surface-warning: #ffebde;--surface-negative: #ffe8ef;--surface-on-lit-blu: #0039b5;--surface-on-lit-blu-hover: #0066ff;--surface-disabled: #e6e9ed;--surface-action-pressed: #001d7a;--surface-negative-hover: #ffcbdb;--surface-negative-pressed: #ffafc8;--surface-overlay: #001d7a80;--surface-disabled-hover: #b7bec7;--surface-disabled-blue: #bddcff;--surface-elevation: #00204a08;--surface-toggle: #b7bec7;--surface-toggle-hover: #939ba6;--surface-toggle-hover-on-blu: #2d84ff;--surface-toggle-on-blu: #5aa1ff;--stroke-secondary: #e6e9ed;--stroke-tertiary: #d6dbe0;--stroke-disabled: #b7bec7;--stroke-focused: #5aa1ff;--stroke-action: #0066ff;--stroke-positive: #005925;--stroke-warning: #6b1000;--stroke-negative: #6b0039;--stroke-action-hover: #0039b5;--stroke-on-lit-blu: #0039b5;--stroke-on-lit-blu-hover: #0066ff;--stroke-action-pressed: #001d7a;--stroke-default: #151b23;--stroke-disabled-hover: #939ba6;--borderradius-lg: 36px;--borderradius-md: 24px;--borderradius-sm: 360px;--borderradius-none: 0;--borderradius-button: 99px;--borderradius-cardlg: 24px;--borderradius-cardsm: 12px;--borderradius-pill: 99px;--borderradius-focusedstroke: 4px;--strokewidth-lg: 8px;--strokewidth-md: 4px;--strokewidth-sm: 2px;--strokewidth-none: 0;--spacing-5xs: .25rem;--spacing-4xs: .5rem;--spacing-3xs: .75rem;--spacing-2xs: 1rem;--spacing-xs: 1.25rem;--spacing-s: 1.5rem;--spacing-m: 1.75rem;--spacing-l: 2rem;--spacing-xl: 2.5rem;--spacing-2xl: 2.75rem;--spacing-3xl: 3rem;--spacing-4xl: 3.5rem;--spacing-5xl: 4rem;--spacing-6xl: 4.5rem;--spacing-7xl: 5rem;--spacing-8xl: 6rem;--spacing-9xl: 7.5rem;--spacing-10xl: 10rem;--product-enrichment: #47cc69;--product-address-autocomplete: #9560ff;--product-geocoding: #f5804e;--product-address-verification: #f55591;--product-professional-services: #0066ff;--product-data-sets: #3dc9d1;--insetspacing-5xs: .25rem;--insetspacing-4xs: .5rem;--insetspacing-3xs: .75rem;--insetspacing-2xs: 1rem;--insetspacing-xs: 1.25rem;--insetspacing-s: 1.5rem;--insetspacing-m: 1.75rem;--insetspacing-l: 2rem;--insetspacing-xl: 2.5rem;--insetspacing-2xl: 2.75rem;--insetspacing-3xl: 3rem;--insetspacing-4xl: 3.5rem;--insetspacing-5xl: 4rem;--insetspacing-6xl: 4.5rem;--insetspacing-7xl: 5rem;--insetspacing-8xl: 6rem;--insetspacing-9xl: 7.5rem;--insetspacing-10xl: 10rem;--stackspacing-5xs: .25rem;--stackspacing-4xs: .5rem;--stackspacing-3xs: .75rem;--stackspacing-2xs: 1rem;--stackspacing-xs: 1.25rem;--stackspacing-s: 1.5rem;--stackspacing-m: 1.75rem;--stackspacing-l: 2rem;--stackspacing-xl: 2.5rem;--stackspacing-2xl: 2.75rem;--stackspacing-3xl: 3rem;--stackspacing-4xl: 3.5rem;--stackspacing-5xl: 4rem;--stackspacing-6xl: 4.5rem;--stackspacing-7xl: 5rem;--stackspacing-8xl: 6rem;--stackspacing-9xl: 7.5rem;--stackspacing-10xl: 10rem;--inlinespacing-5xs: .25rem;--inlinespacing-4xs: .5rem;--inlinespacing-3xs: .75rem;--inlinespacing-2xs: 1rem;--inlinespacing-xs: 1.25rem;--inlinespacing-s: 1.5rem;--inlinespacing-m: 1.75rem;--inlinespacing-l: 2rem;--inlinespacing-xl: 2.5rem;--inlinespacing-2xl: 2.75rem;--inlinespacing-3xl: 3rem;--inlinespacing-4xl: 3.5rem;--inlinespacing-5xl: 4rem;--inlinespacing-6xl: 4.5rem;--inlinespacing-7xl: 5rem;--inlinespacing-8xl: 6rem;--inlinespacing-9xl: 7.5rem;--inlinespacing-10xl: 10rem}[data-theme=dark]{--text-headings-primary: #ffffff;--text-body-primary: #ffffff;--text-action: #ffffff;--text-action-hover: #b7bec7;--text-disabled: #49505b;--text-warning: #f5804e;--text-positive: #47cc69;--text-negative: #f55591;--text-on-lit-blu: #0039b5;--text-on-lit-blu-hover: #001d7a;--text-headings-secondary: #b7bec7;--text-body-secondary: #b7bec7;--text-body-tertiary: #383e48;--text-headings-tertiary: #383e48;--text-button-primary: #151b23;--text-pressed: #5c636e;--text-on-lit-blu-hover-pressed: #002ea3;--text-action-pressed: #5c636e;--icons-default: #ffffff;--icons-default-secondary: #b7bec7;--icons-default-tertiary: #383e48;--icons-action: #ffffff;--icons-action-hover: #b7bec7;--icons-disabled: #383e48;--icons-warning: #f5804e;--icons-positive: #47cc69;--icons-negative: #b22265;--icons-on-lit-blu: #ffffff;--icons-on-lit-blu-hover: #ffffff;--icons-on-action: #151b23;--icons-pressed: #5c636e;--icons-disabled-hover: #383e48;--icons-disabled-on-blu: #8fc1ff;--surface-primary: #151b23;--surface-secondary: #262c36;--surface-tertiary: #383e48;--surface-secondary-tinted: #e2f0ff;--surface-tertiary-tinted: #bddcff;--surface-action: #ffffff;--surface-action-hover: #b7bec7;--surface-positive: #cffad6;--surface-warning: #ffebde;--surface-negative: #ffe8ef;--surface-on-lit-blu: #0039b5;--surface-on-lit-blu-hover: #0066ff;--surface-disabled: #939ba6;--surface-action-pressed: #6e7580;--surface-negative-hover: #ffcbdb;--surface-negative-pressed: #ffafc8;--surface-overlay: #001d7a80;--surface-disabled-hover: #383e48;--surface-disabled-blue: #bddcff;--surface-elevation: #262c36;--surface-toggle: #5c636e;--surface-toggle-hover: #939ba6;--surface-toggle-hover-on-blu: #2d84ff;--surface-toggle-on-blu: #5aa1ff;--stroke-secondary: #49505b;--stroke-tertiary: #5c636e;--stroke-disabled: #383e48;--stroke-focused: #5aa1ff;--stroke-action: #ffffff;--stroke-positive: #005925;--stroke-warning: #6b1000;--stroke-negative: #6b0039;--stroke-action-hover: #b7bec7;--stroke-on-lit-blu: #0039b5;--stroke-on-lit-blu-hover: #0066ff;--stroke-action-pressed: #5c636e;--stroke-default: #ffffff;--stroke-disabled-hover: #151b23}._h1_1765w_1{font-size:clamp(2.75rem,1.8779vw + 2.3099rem,4rem);line-height:clamp(2.75rem,1.8779vw + 2.3099rem,4rem);letter-spacing:-.02em;font-family:var(--ui-font-primary);font-weight:500;font-feature-settings:"ss01" 1,"ss02" 1,"ss04" 1;margin:0}._button_dg3ri_1{appearance:none;border:none;background:none;display:inline-block;text-decoration:none;cursor:pointer;border-radius:var(--borderradius-sm);padding:clamp(.75rem,.3756vw + .662rem,1rem) clamp(1rem,.7512vw + .8239rem,1.5rem);font-size:clamp(1rem,.3756vw + .912rem,1.25rem);line-height:1.5rem;letter-spacing:-.02em;font-family:var(--ui-font-body);font-weight:500;font-feature-settings:"dlig" 1;transition:background-color .15s ease,color .15s ease}._button_dg3ri_1:focus-visible{outline:2px solid var(--stroke-focused);outline-offset:2px}._button_dg3ri_1:disabled{cursor:not-allowed}._sm_dg3ri_26{font-size:clamp(.875rem,.2817vw + .809rem,1.0625rem);line-height:1.5rem;letter-spacing:-.02em;padding:clamp(.5rem,.3756vw + .412rem,.75rem) clamp(1rem,.3756vw + .912rem,1.25rem)}._primary_dg3ri_33{background-color:var(--surface-action);color:var(--text-button-primary)}._primary_dg3ri_33:hover:not(:disabled){background-color:var(--surface-action-hover);color:var(--text-button-primary)}._primary_dg3ri_33:active:not(:disabled){background-color:var(--surface-action-pressed)}._primary_dg3ri_33:disabled{background-color:var(--surface-disabled);color:var(--text-disabled)}._secondary_dg3ri_49{background-color:transparent;color:var(--text-body-primary);box-shadow:inset 0 0 0 var(--strokewidth-sm) var(--stroke-default);transition:box-shadow .15s ease,color .15s ease}._secondary_dg3ri_49:hover:not(:disabled){box-shadow:inset 0 0 0 var(--strokewidth-sm) var(--stroke-action-hover);color:var(--text-action-hover)}._secondary_dg3ri_49:active:not(:disabled){box-shadow:inset 0 0 0 var(--strokewidth-sm) var(--stroke-action-pressed);color:var(--text-pressed)}._secondary_dg3ri_49:disabled{box-shadow:inset 0 0 0 var(--strokewidth-sm) var(--stroke-disabled);color:var(--text-disabled)}._negative_dg3ri_68{background-color:var(--surface-negative);color:var(--text-negative)}._negative_dg3ri_68:hover:not(:disabled){background-color:var(--surface-negative-hover);color:var(--text-negative)}._negative_dg3ri_68:active:not(:disabled){background-color:var(--surface-negative-pressed)}._negative_dg3ri_68:disabled{background-color:var(--surface-disabled);color:var(--text-disabled)}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartyweb/ui",
-	"version": "1.3.0",
+	"version": "1.3.2",
 	"type": "module",
 	"main": "dist/index.cjs",
 	"module": "dist/index.js",
@@ -25,7 +25,8 @@
 		"release": "changeset publish",
 		"storybook": "node sd.config.js && storybook dev -p 6006",
 		"build-storybook": "storybook build",
-		"lint": "eslint src --max-warnings 0 && stylelint 'src/**/*.scss'"
+		"lint": "node scripts/check-use-client.mjs && eslint src --max-warnings 0 && stylelint 'src/**/*.scss'",
+		"format:check": "prettier --check ."
 	},
 	"peerDependencies": {
 		"react": "^19.0.0",
@@ -39,6 +40,7 @@
 		"@types/react-dom": "^19.2.3",
 		"@vitejs/plugin-react": "^5.1.3",
 		"eslint": "^10.0.0",
+		"eslint-plugin-react-hooks": "^7.1.1",
 		"prettier": "^3.8.1",
 		"react": "^19.2.4",
 		"react-dom": "^19.2.4",