@smartyweb/ui 1.1.0 → 1.2.0

package/README.md

@@ -55,9 +55,45 @@ import "@smartyweb/ui/styles.css";
 Then import components:
 
 ```js
-import { Button } from "@smartyweb/ui";
+import { H1, Paragraph } 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:
+
+| CSS variable        | Font         | Used by                           |
+| ------------------- | ------------ | --------------------------------- |
+| `--ui-font-primary` | TT Hoves Pro | All heading and button components |
+| `--ui-font-body`    | Inter        | Body and paragraph components     |
+| `--ui-font-code`    | Hack         | Code component                    |
+
+In a Next.js app using `next/font/local`, set these on the root element:
+
+```tsx
+// app/layout.tsx
+import localFont from "next/font/local";
+
+const ttHovesPro = localFont({
+  src: [...],
+  variable: "--font-tthoves",
+});
+
+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)",
+      }}>
+        {children}
+      </body>
+    </html>
+  );
+}
+```
+
+If a variable is not set, components fall back to `system-ui` (headings/body) or `monospace` (code).
+
 ## Project Structure
 
 ```
@@ -82,6 +118,17 @@ src/
 
 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:
@@ -93,7 +140,7 @@ npm run changeset
 This opens an interactive prompt:
 
 1. **Which packages changed?** — select `@smartyweb/ui`
-2. **Bump type?** — `patch` for fixes/styles, `minor` for new features, `major` for breaking changes
+2. **Bump type?** — see semver policy above
 3. **Summary?** — plain English description (goes into the changelog)
 
 Then apply the version bump immediately on the same branch:
@@ -150,8 +197,18 @@ 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. **Team** reviews the PR (seeing the exact CSS variable changes) and merges to `master`
-4. **Build** on `master` includes the updated tokens in `dist/ui.css`
+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:
 
@@ -166,6 +223,18 @@ Design tokens flow from Figma → code via this pipeline:
 
 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.

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "primary" | "secondary" | "negative";
+    size?: "default" | "sm";
+}
+export declare function Button({ variant, size, className, children, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps } from './Button';

package/dist/buttons/index.d.ts

@@ -0,0 +1 @@
+export * from './Button';

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),e="_hExtra_dx1fb_1",c={hExtra:e};function l({as:a="h1",children:s,className:t}){const n=[c.hExtra,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const r="_h1_iuejz_1",i={h1:r};function u({children:a,className:s}){return o.jsx("h1",{className:`${i.h1}${s?` ${s}`:""}`,children:a})}const m="_h2_1i98w_1",p={h2:m};function _({as:a="h2",children:s,className:t}){const n=[p.h2,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const h="_h3_wip1f_1",f={h3:h};function j({as:a="h3",children:s,className:t}){const n=[f.h3,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const y="_h4_thwwf_1",d={h4:y};function g({as:a="h4",children:s,className:t}){const n=[d.h4,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const N="_h5_zem0s_1",x={h5:N};function B({as:a="h5",children:s,className:t}){const n=[x.h5,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const b="_h6_py9o3_1",L={h6:b};function $({as:a="h6",children:s,className:t}){const n=[L.h6,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const H="_paragraph_6mdxp_1",S={paragraph:H};function C({as:a="p",children:s,className:t}){const n=[S.paragraph,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const M="_bodyLarge_zgxpr_1",z={bodyLarge:M};function E({as:a="p",children:s,className:t}){const n=[z.bodyLarge,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const U="_bodySmall_izgxi_1",w={bodySmall:U};function P({as:a="p",children:s,className:t}){const n=[w.bodySmall,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const v="_buttonLarge_hwbzl_1",q={buttonLarge:v};function O({as:a="span",children:s,className:t}){const n=[q.buttonLarge,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const R="_buttonSmall_1psts_1",T={buttonSmall:R};function k({as:a="span",children:s,className:t}){const n=[T.buttonSmall,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const A="_captionLarge_lev6r_1",D={captionLarge:A};function F({as:a="span",children:s,className:t}){const n=[D.captionLarge,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const G="_captionMedium_1gxrg_1",I={captionMedium:G};function J({as:a="span",children:s,className:t}){const n=[I.captionMedium,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const K="_captionUppercase_1mzfy_1",Q={captionUppercase:K};function V({as:a="span",children:s,className:t}){const n=[Q.captionUppercase,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const W="_code_1to1m_1",X={code:W};function Y({as:a="code",children:s,className:t}){const n=[X.code,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}exports.BodyLarge=E;exports.BodySmall=P;exports.ButtonLarge=O;exports.ButtonSmall=k;exports.CaptionLarge=F;exports.CaptionMedium=J;exports.CaptionUppercase=V;exports.Code=Y;exports.H1=u;exports.H2=_;exports.H3=j;exports.H4=g;exports.H5=B;exports.H6=$;exports.HExtra=l;exports.Paragraph=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),l="_hExtra_dx1fb_1",i={hExtra:l};function u({as:t="h1",children:s,className:a}){const n=[i.hExtra,a].filter(Boolean).join(" ");return o.jsx(t,{className:n,children:s})}const m="_h1_iuejz_1",_={h1:m};function p({children:t,className:s}){return o.jsx("h1",{className:`${_.h1}${s?` ${s}`:""}`,children:t})}const h="_h2_1i98w_1",y={h2:h};function d({as:t="h2",children:s,className:a}){const n=[y.h2,a].filter(Boolean).join(" ");return o.jsx(t,{className:n,children:s})}const f="_h3_wip1f_1",j={h3:f};function g({as:t="h3",children:s,className:a}){const n=[j.h3,a].filter(Boolean).join(" ");return o.jsx(t,{className:n,children:s})}const N="_h4_thwwf_1",b={h4:N};function x({as:t="h4",children:s,className:a}){const n=[b.h4,a].filter(Boolean).join(" ");return o.jsx(t,{className:n,children:s})}const B="_h5_zem0s_1",$={h5:B};function L({as:t="h5",children:s,className:a}){const n=[$.h5,a].filter(Boolean).join(" ");return o.jsx(t,{className:n,children:s})}const H="_h6_py9o3_1",S={h6:H};function C({as:t="h6",children:s,className:a}){const n=[S.h6,a].filter(Boolean).join(" ");return o.jsx(t,{className:n,children:s})}const M="_paragraph_6mdxp_1",q={paragraph:M};function E({as:t="p",children:s,className:a}){const n=[q.paragraph,a].filter(Boolean).join(" ");return o.jsx(t,{className:n,children:s})}const U="_bodyLarge_zgxpr_1",z={bodyLarge:U};function v({as:t="p",children:s,className:a}){const n=[z.bodyLarge,a].filter(Boolean).join(" ");return o.jsx(t,{className:n,children:s})}const w="_bodySmall_izgxi_1",P={bodySmall:w};function k({as:t="p",children:s,className:a}){const n=[P.bodySmall,a].filter(Boolean).join(" ");return o.jsx(t,{className:n,children:s})}const O="_buttonLarge_1kib2_1",R={buttonLarge:O};function T({as:t="span",children:s,className:a}){const n=[R.buttonLarge,a].filter(Boolean).join(" ");return o.jsx(t,{className:n,children:s})}const A="_buttonSmall_1ga6z_1",D={buttonSmall:A};function F({as:t="span",children:s,className:a}){const n=[D.buttonSmall,a].filter(Boolean).join(" ");return o.jsx(t,{className:n,children:s})}const G="_captionLarge_keyl9_1",I={captionLarge:G};function J({as:t="span",children:s,className:a}){const n=[I.captionLarge,a].filter(Boolean).join(" ");return o.jsx(t,{className:n,children:s})}const K="_captionMedium_9rjdy_1",Q={captionMedium:K};function V({as:t="span",children:s,className:a}){const n=[Q.captionMedium,a].filter(Boolean).join(" ");return o.jsx(t,{className:n,children:s})}const W="_captionUppercase_15jnh_1",X={captionUppercase:W};function Y({as:t="span",children:s,className:a}){const n=[X.captionUppercase,a].filter(Boolean).join(" ");return o.jsx(t,{className:n,children:s})}const Z="_code_1o5oi_1",ss={code:Z};function ts({as:t="code",children:s,className:a}){const n=[ss.code,a].filter(Boolean).join(" ");return o.jsx(t,{className:n,children:s})}const as="_button_6hqdb_1",ns="_sm_6hqdb_37",os="_primary_6hqdb_56",es="_secondary_6hqdb_71",cs="_negative_6hqdb_89",e={button:as,sm:ns,primary:os,secondary:es,negative:cs};function rs({variant:t="primary",size:s="default",className:a,children:n,...c}){const r=[e.button,e[t],s==="sm"&&e.sm,a].filter(Boolean).join(" ");return o.jsx("button",{className:r,...c,children:n})}exports.BodyLarge=v;exports.BodySmall=k;exports.Button=rs;exports.ButtonLarge=T;exports.ButtonSmall=F;exports.CaptionLarge=J;exports.CaptionMedium=V;exports.CaptionUppercase=Y;exports.Code=ts;exports.H1=p;exports.H2=d;exports.H3=g;exports.H4=x;exports.H5=L;exports.H6=C;exports.HExtra=u;exports.Paragraph=E;

package/dist/index.d.ts

@@ -1 +1,2 @@
 export * from './text';
+export * from './buttons';

package/dist/index.js

@@ -1,130 +1,148 @@
 import { jsx as o } from "react/jsx-runtime";
-const e = "_hExtra_dx1fb_1", c = {
-  hExtra: e
+const r = "_hExtra_dx1fb_1", i = {
+  hExtra: r
 };
-function A({ as: a = "h1", children: s, className: n }) {
-  const t = [c.hExtra, n].filter(Boolean).join(" ");
-  return /* @__PURE__ */ o(a, { className: t, children: s });
+function Q({ as: n = "h1", children: s, className: t }) {
+  const a = [i.hExtra, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o(n, { className: a, children: s });
 }
-const l = "_h1_iuejz_1", r = {
-  h1: l
+const _ = "_h1_iuejz_1", m = {
+  h1: _
 };
-function D({ children: a, className: s }) {
-  return /* @__PURE__ */ o("h1", { className: `${r.h1}${s ? ` ${s}` : ""}`, children: a });
+function R({ children: n, className: s }) {
+  return /* @__PURE__ */ o("h1", { className: `${m.h1}${s ? ` ${s}` : ""}`, children: n });
 }
-const i = "_h2_1i98w_1", m = {
-  h2: i
+const u = "_h2_1i98w_1", p = {
+  h2: u
 };
-function F({ as: a = "h2", children: s, className: n }) {
-  const t = [m.h2, n].filter(Boolean).join(" ");
-  return /* @__PURE__ */ o(a, { className: t, children: s });
+function T({ as: n = "h2", children: s, className: t }) {
+  const a = [p.h2, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o(n, { className: a, children: s });
 }
-const p = "_h3_wip1f_1", u = {
-  h3: p
+const h = "_h3_wip1f_1", f = {
+  h3: h
 };
-function G({ as: a = "h3", children: s, className: n }) {
-  const t = [u.h3, n].filter(Boolean).join(" ");
-  return /* @__PURE__ */ o(a, { className: t, children: s });
+function V({ as: n = "h3", children: s, className: t }) {
+  const a = [f.h3, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o(n, { className: a, children: s });
 }
-const _ = "_h4_thwwf_1", h = {
-  h4: _
+const y = "_h4_thwwf_1", d = {
+  h4: y
 };
-function I({ as: a = "h4", children: s, className: n }) {
-  const t = [h.h4, n].filter(Boolean).join(" ");
-  return /* @__PURE__ */ o(a, { className: t, children: s });
+function W({ as: n = "h4", children: s, className: t }) {
+  const a = [d.h4, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o(n, { className: a, children: s });
 }
-const f = "_h5_zem0s_1", N = {
-  h5: f
+const N = "_h5_zem0s_1", b = {
+  h5: N
 };
-function J({ as: a = "h5", children: s, className: n }) {
-  const t = [N.h5, n].filter(Boolean).join(" ");
-  return /* @__PURE__ */ o(a, { className: t, children: s });
+function X({ as: n = "h5", children: s, className: t }) {
+  const a = [b.h5, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o(n, { className: a, children: s });
 }
-const y = "_h6_py9o3_1", d = {
-  h6: y
+const g = "_h6_py9o3_1", B = {
+  h6: g
 };
-function K({ as: a = "h6", children: s, className: n }) {
-  const t = [d.h6, n].filter(Boolean).join(" ");
-  return /* @__PURE__ */ o(a, { className: t, children: s });
+function Y({ as: n = "h6", children: s, className: t }) {
+  const a = [B.h6, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o(n, { className: a, children: s });
 }
-const g = "_paragraph_6mdxp_1", b = {
-  paragraph: g
+const j = "_paragraph_6mdxp_1", $ = {
+  paragraph: j
 };
-function O({ as: a = "p", children: s, className: n }) {
-  const t = [b.paragraph, n].filter(Boolean).join(" ");
-  return /* @__PURE__ */ o(a, { className: t, children: s });
+function Z({ as: n = "p", children: s, className: t }) {
+  const a = [$.paragraph, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o(n, { className: a, children: s });
 }
-const B = "_bodyLarge_zgxpr_1", $ = {
-  bodyLarge: B
+const L = "_bodyLarge_zgxpr_1", x = {
+  bodyLarge: L
 };
-function Q({ as: a = "p", children: s, className: n }) {
-  const t = [$.bodyLarge, n].filter(Boolean).join(" ");
-  return /* @__PURE__ */ o(a, { className: t, children: s });
+function ss({ as: n = "p", children: s, className: t }) {
+  const a = [x.bodyLarge, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o(n, { className: a, children: s });
 }
-const j = "_bodySmall_izgxi_1", L = {
-  bodySmall: j
+const S = "_bodySmall_izgxi_1", H = {
+  bodySmall: S
 };
-function R({ as: a = "p", children: s, className: n }) {
-  const t = [L.bodySmall, n].filter(Boolean).join(" ");
-  return /* @__PURE__ */ o(a, { className: t, children: s });
+function ns({ as: n = "p", children: s, className: t }) {
+  const a = [H.bodySmall, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o(n, { className: a, children: s });
 }
-const x = "_buttonLarge_hwbzl_1", S = {
-  buttonLarge: x
+const q = "_buttonLarge_1kib2_1", z = {
+  buttonLarge: q
 };
-function T({ as: a = "span", children: s, className: n }) {
-  const t = [S.buttonLarge, n].filter(Boolean).join(" ");
-  return /* @__PURE__ */ o(a, { className: t, children: s });
+function ts({ as: n = "span", children: s, className: t }) {
+  const a = [z.buttonLarge, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o(n, { className: a, children: s });
 }
-const H = "_buttonSmall_1psts_1", z = {
-  buttonSmall: H
+const E = "_buttonSmall_1ga6z_1", M = {
+  buttonSmall: E
 };
-function V({ as: a = "span", children: s, className: n }) {
-  const t = [z.buttonSmall, n].filter(Boolean).join(" ");
-  return /* @__PURE__ */ o(a, { className: t, children: s });
+function as({ as: n = "span", children: s, className: t }) {
+  const a = [M.buttonSmall, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o(n, { className: a, children: s });
 }
-const w = "_captionLarge_lev6r_1", E = {
-  captionLarge: w
+const U = "_captionLarge_keyl9_1", w = {
+  captionLarge: U
 };
-function W({ as: a = "span", children: s, className: n }) {
-  const t = [E.captionLarge, n].filter(Boolean).join(" ");
-  return /* @__PURE__ */ o(a, { className: t, children: s });
+function os({ as: n = "span", children: s, className: t }) {
+  const a = [w.captionLarge, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o(n, { className: a, children: s });
 }
-const M = "_captionMedium_1gxrg_1", U = {
-  captionMedium: M
+const C = "_captionMedium_9rjdy_1", v = {
+  captionMedium: C
 };
-function X({ as: a = "span", children: s, className: n }) {
-  const t = [U.captionMedium, n].filter(Boolean).join(" ");
-  return /* @__PURE__ */ o(a, { className: t, children: s });
+function es({ as: n = "span", children: s, className: t }) {
+  const a = [v.captionMedium, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o(n, { className: a, children: s });
 }
-const C = "_captionUppercase_1mzfy_1", v = {
-  captionUppercase: C
+const k = "_captionUppercase_15jnh_1", P = {
+  captionUppercase: k
 };
-function Y({ as: a = "span", children: s, className: n }) {
-  const t = [v.captionUppercase, n].filter(Boolean).join(" ");
-  return /* @__PURE__ */ o(a, { className: t, children: s });
+function cs({ as: n = "span", children: s, className: t }) {
+  const a = [P.captionUppercase, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o(n, { className: a, children: s });
 }
-const P = "_code_1to1m_1", k = {
-  code: P
+const A = "_code_1o5oi_1", D = {
+  code: A
 };
-function Z({ as: a = "code", children: s, className: n }) {
-  const t = [k.code, n].filter(Boolean).join(" ");
-  return /* @__PURE__ */ o(a, { className: t, children: s });
+function ls({ as: n = "code", children: s, className: t }) {
+  const a = [D.code, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o(n, { className: a, children: s });
+}
+const F = "_button_6hqdb_1", G = "_sm_6hqdb_37", I = "_primary_6hqdb_56", J = "_secondary_6hqdb_71", K = "_negative_6hqdb_89", e = {
+  button: F,
+  sm: G,
+  primary: I,
+  secondary: J,
+  negative: K
+};
+function rs({
+  variant: n = "primary",
+  size: s = "default",
+  className: t,
+  children: a,
+  ...c
+}) {
+  const l = [e.button, e[n], s === "sm" && e.sm, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o("button", { className: l, ...c, children: a });
 }
 export {
-  Q as BodyLarge,
-  R as BodySmall,
-  T as ButtonLarge,
-  V as ButtonSmall,
-  W as CaptionLarge,
-  X as CaptionMedium,
-  Y as CaptionUppercase,
-  Z as Code,
-  D as H1,
-  F as H2,
-  G as H3,
-  I as H4,
-  J as H5,
-  K as H6,
-  A as HExtra,
-  O as Paragraph
+  ss as BodyLarge,
+  ns as BodySmall,
+  rs as Button,
+  ts as ButtonLarge,
+  as as ButtonSmall,
+  os as CaptionLarge,
+  es as CaptionMedium,
+  cs as CaptionUppercase,
+  ls as Code,
+  R as H1,
+  T as H2,
+  V as H3,
+  W as H4,
+  X as H5,
+  Y as H6,
+  Q as HExtra,
+  Z as Paragraph
 };

package/dist/ui.css

@@ -1 +1 @@
-:root{--h-extra-desktop-font-size: 96px;--h-extra-desktop-line-height: 106px;--h-extra-desktop-letter-spacing: -.03em;--h1-desktop-font-size: 64px;--h1-desktop-line-height: 64px;--h1-desktop-letter-spacing: -.02em;--h2-desktop-font-size: 52px;--h2-desktop-line-height: 57px;--h2-desktop-letter-spacing: -.02em;--h3-desktop-font-size: 44px;--h3-desktop-line-height: 48px;--h3-desktop-letter-spacing: -.02em;--h4-desktop-font-size: 36px;--h4-desktop-line-height: 43px;--h4-desktop-letter-spacing: -.02em;--h5-desktop-font-size: 30px;--h5-desktop-line-height: 33px;--h5-desktop-letter-spacing: -.01em;--h6-desktop-font-size: 28px;--h6-desktop-line-height: 31px;--h6-desktop-letter-spacing: -.01em;--paragraph-desktop-font-size: 24px;--paragraph-desktop-line-height: 36px;--paragraph-desktop-letter-spacing: -.01em;--button-large-desktop-font-size: 20px;--button-large-desktop-line-height: 24px;--button-large-desktop-letter-spacing: -.02em;--body-large-desktop-font-size: 20px;--body-large-desktop-line-height: 30px;--body-large-desktop-letter-spacing: -.02em;--button-small-desktop-font-size: 17px;--button-small-desktop-line-height: 24px;--button-small-desktop-letter-spacing: -.02em;--body-small-desktop-font-size: 16px;--body-small-desktop-line-height: 24px;--body-small-desktop-letter-spacing: -.02em;--caption-large-desktop-font-size: 16px;--caption-large-desktop-line-height: 24px;--caption-large-desktop-letter-spacing: -.02em;--caption-medium-desktop-font-size: 12px;--caption-medium-desktop-line-height: 18px;--caption-medium-desktop-letter-spacing: -.02em;--caption-uppercase-desktop-font-size: 13px;--caption-uppercase-desktop-line-height: 16px;--caption-uppercase-desktop-letter-spacing: .04em;--code-desktop-font-size: 14px;--code-desktop-line-height: 17px;--code-desktop-letter-spacing: 0;--h-extra-tablet-font-size: 96px;--h-extra-tablet-line-height: 106px;--h-extra-tablet-letter-spacing: -.03em;--h1-tablet-font-size: 64px;--h1-tablet-line-height: 64px;--h1-tablet-letter-spacing: -.02em;--h2-tablet-font-size: 48px;--h2-tablet-line-height: 53px;--h2-tablet-letter-spacing: -.02em;--h3-tablet-font-size: 40px;--h3-tablet-line-height: 44px;--h3-tablet-letter-spacing: -.02em;--h4-tablet-font-size: 36px;--h4-tablet-line-height: 43px;--h4-tablet-letter-spacing: -.02em;--h5-tablet-font-size: 32px;--h5-tablet-line-height: 35px;--h5-tablet-letter-spacing: -.01em;--h6-tablet-font-size: 24px;--h6-tablet-line-height: 26px;--h6-tablet-letter-spacing: -.01em;--paragraph-tablet-font-size: 22px;--paragraph-tablet-line-height: 33px;--paragraph-tablet-letter-spacing: -.01em;--button-large-tablet-font-size: 18px;--button-large-tablet-line-height: 24px;--button-large-tablet-letter-spacing: -.02em;--body-large-tablet-font-size: 18px;--body-large-tablet-line-height: 27px;--body-large-tablet-letter-spacing: -.02em;--button-small-tablet-font-size: 16px;--button-small-tablet-line-height: 24px;--button-small-tablet-letter-spacing: -.02em;--body-small-tablet-font-size: 16px;--body-small-tablet-line-height: 24px;--body-small-tablet-letter-spacing: -.02em;--caption-large-tablet-font-size: 16px;--caption-large-tablet-line-height: 24px;--caption-large-tablet-letter-spacing: -.02em;--caption-medium-tablet-font-size: 12px;--caption-medium-tablet-line-height: 18px;--caption-medium-tablet-letter-spacing: -.02em;--caption-uppercase-tablet-font-size: 13px;--caption-uppercase-tablet-line-height: 16px;--caption-uppercase-tablet-letter-spacing: .04em;--code-tablet-font-size: 14px;--code-tablet-line-height: 17px;--code-tablet-letter-spacing: 0;--h-extra-mobile-font-size: 56px;--h-extra-mobile-line-height: 62px;--h-extra-mobile-letter-spacing: -.02em;--h1-mobile-font-size: 44px;--h1-mobile-line-height: 44px;--h1-mobile-letter-spacing: -.01em;--h2-mobile-font-size: 40px;--h2-mobile-line-height: 44px;--h2-mobile-letter-spacing: -.01em;--h3-mobile-font-size: 36px;--h3-mobile-line-height: 40px;--h3-mobile-letter-spacing: -.01em;--h4-mobile-font-size: 32px;--h4-mobile-line-height: 42px;--h4-mobile-letter-spacing: -.01em;--h5-mobile-font-size: 22px;--h5-mobile-line-height: 24px;--h5-mobile-letter-spacing: -.01em;--h6-mobile-font-size: 20px;--h6-mobile-line-height: 22px;--h6-mobile-letter-spacing: -.01em;--paragraph-mobile-font-size: 18px;--paragraph-mobile-line-height: 27px;--paragraph-mobile-letter-spacing: -.01em;--button-large-mobile-font-size: 16px;--button-large-mobile-line-height: 24px;--button-large-mobile-letter-spacing: -.01em;--body-large-mobile-font-size: 16px;--body-large-mobile-line-height: 24px;--body-large-mobile-letter-spacing: -.01em;--button-small-mobile-font-size: 14px;--button-small-mobile-line-height: 24px;--button-small-mobile-letter-spacing: -.01em;--body-small-mobile-font-size: 14px;--body-small-mobile-line-height: 21px;--body-small-mobile-letter-spacing: -.01em;--caption-large-mobile-font-size: 16px;--caption-large-mobile-line-height: 24px;--caption-large-mobile-letter-spacing: -.02em;--caption-medium-mobile-font-size: 12px;--caption-medium-mobile-line-height: 18px;--caption-medium-mobile-letter-spacing: -.02em;--caption-uppercase-mobile-font-size: 13px;--caption-uppercase-mobile-line-height: 16px;--caption-uppercase-mobile-letter-spacing: .04em;--code-mobile-font-size: 12px;--code-mobile-line-height: 17px;--code-mobile-letter-spacing: 0}._hExtra_dx1fb_1{font-family:var(--ui-font-primary);font-weight:600;font-size:var(--h-extra-desktop-font-size);line-height:var(--h-extra-desktop-line-height);letter-spacing:var(--h-extra-desktop-letter-spacing);font-feature-settings:"dlig" 1,"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:767px){._hExtra_dx1fb_1{font-size:var(--h-extra-mobile-font-size);line-height:var(--h-extra-mobile-line-height);letter-spacing:var(--h-extra-mobile-letter-spacing)}}._h1_iuejz_1{font-family:var(--ui-font-primary);font-weight:500;font-size:var(--h1-desktop-font-size);line-height:var(--h1-desktop-line-height);letter-spacing:var(--h1-desktop-letter-spacing);font-feature-settings:"dlig" 1,"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:767px){._h1_iuejz_1{font-size:var(--h1-mobile-font-size);line-height:var(--h1-mobile-line-height);letter-spacing:var(--h1-mobile-letter-spacing)}}._h2_1i98w_1{font-family:var(--ui-font-primary);font-weight:500;font-size:var(--h2-desktop-font-size);line-height:var(--h2-desktop-line-height);letter-spacing:var(--h2-desktop-letter-spacing);font-feature-settings:"dlig" 1,"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:1439px){._h2_1i98w_1{font-size:var(--h2-tablet-font-size);line-height:var(--h2-tablet-line-height)}}@media(max-width:767px){._h2_1i98w_1{font-size:var(--h2-mobile-font-size);line-height:var(--h2-mobile-line-height);letter-spacing:var(--h2-mobile-letter-spacing)}}._h3_wip1f_1{font-family:var(--ui-font-primary);font-weight:500;font-size:var(--h3-desktop-font-size);line-height:var(--h3-desktop-line-height);letter-spacing:var(--h3-desktop-letter-spacing);font-feature-settings:"dlig" 1,"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:1439px){._h3_wip1f_1{font-size:var(--h3-tablet-font-size);line-height:var(--h3-tablet-line-height)}}@media(max-width:767px){._h3_wip1f_1{font-size:var(--h3-mobile-font-size);line-height:var(--h3-mobile-line-height);letter-spacing:var(--h3-mobile-letter-spacing)}}._h4_thwwf_1{font-family:var(--ui-font-primary);font-weight:500;font-size:var(--h4-desktop-font-size);line-height:var(--h4-desktop-line-height);letter-spacing:var(--h4-desktop-letter-spacing);font-feature-settings:"dlig" 1,"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:767px){._h4_thwwf_1{font-size:var(--h4-mobile-font-size);line-height:var(--h4-mobile-line-height);letter-spacing:var(--h4-mobile-letter-spacing)}}._h5_zem0s_1{font-family:var(--ui-font-primary);font-weight:500;font-size:var(--h5-desktop-font-size);line-height:var(--h5-desktop-line-height);letter-spacing:var(--h5-desktop-letter-spacing);font-feature-settings:"dlig" 1,"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:1439px){._h5_zem0s_1{font-size:var(--h5-tablet-font-size);line-height:var(--h5-tablet-line-height)}}@media(max-width:767px){._h5_zem0s_1{font-size:var(--h5-mobile-font-size);line-height:var(--h5-mobile-line-height)}}._h6_py9o3_1{font-family:var(--ui-font-primary);font-weight:500;font-size:var(--h6-desktop-font-size);line-height:var(--h6-desktop-line-height);letter-spacing:var(--h6-desktop-letter-spacing);font-feature-settings:"dlig" 1,"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:1439px){._h6_py9o3_1{font-size:var(--h6-tablet-font-size);line-height:var(--h6-tablet-line-height)}}@media(max-width:767px){._h6_py9o3_1{font-size:var(--h6-mobile-font-size);line-height:var(--h6-mobile-line-height)}}._paragraph_6mdxp_1{font-family:var(--ui-font-primary);font-weight:500;font-size:var(--paragraph-desktop-font-size);line-height:var(--paragraph-desktop-line-height);letter-spacing:var(--paragraph-desktop-letter-spacing);font-feature-settings:"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:1439px){._paragraph_6mdxp_1{font-size:var(--paragraph-tablet-font-size);line-height:var(--paragraph-tablet-line-height)}}@media(max-width:767px){._paragraph_6mdxp_1{font-size:var(--paragraph-mobile-font-size);line-height:var(--paragraph-mobile-line-height)}}._bodyLarge_zgxpr_1{font-family:var(--ui-font-primary);font-weight:400;font-size:var(--body-large-desktop-font-size);line-height:var(--body-large-desktop-line-height);letter-spacing:var(--body-large-desktop-letter-spacing);font-feature-settings:"dlig" 1;margin:0}@media(max-width:1439px){._bodyLarge_zgxpr_1{font-size:var(--body-large-tablet-font-size);line-height:var(--body-large-tablet-line-height)}}@media(max-width:767px){._bodyLarge_zgxpr_1{font-size:var(--body-large-mobile-font-size);line-height:var(--body-large-mobile-line-height);letter-spacing:var(--body-large-mobile-letter-spacing)}}._bodySmall_izgxi_1{font-family:var(--ui-font-primary);font-weight:400;font-size:var(--body-small-desktop-font-size);line-height:var(--body-small-desktop-line-height);letter-spacing:var(--body-small-desktop-letter-spacing);font-feature-settings:"dlig" 1;margin:0}@media(max-width:767px){._bodySmall_izgxi_1{font-size:var(--body-small-mobile-font-size);line-height:var(--body-small-mobile-line-height);letter-spacing:var(--body-small-mobile-letter-spacing)}}._buttonLarge_hwbzl_1{font-family:Inter,sans-serif;font-weight:500;font-size:var(--button-large-desktop-font-size);line-height:var(--button-large-desktop-line-height);letter-spacing:var(--button-large-desktop-letter-spacing);font-feature-settings:"dlig" 1}@media(max-width:1439px){._buttonLarge_hwbzl_1{font-size:var(--button-large-tablet-font-size)}}@media(max-width:767px){._buttonLarge_hwbzl_1{font-family:var(--ui-font-primary);font-size:var(--button-large-mobile-font-size);letter-spacing:var(--button-large-mobile-letter-spacing)}}._buttonSmall_1psts_1{font-family:Inter,sans-serif;font-weight:500;font-size:var(--button-small-desktop-font-size);line-height:var(--button-small-desktop-line-height);letter-spacing:var(--button-small-desktop-letter-spacing);font-feature-settings:"dlig" 1}@media(max-width:1439px){._buttonSmall_1psts_1{font-size:var(--button-small-tablet-font-size)}}@media(max-width:767px){._buttonSmall_1psts_1{font-family:var(--ui-font-primary);font-size:var(--button-small-mobile-font-size);letter-spacing:var(--button-small-mobile-letter-spacing)}}._captionLarge_lev6r_1{font-family:Inter,sans-serif;font-weight:500;font-size:var(--caption-large-desktop-font-size);line-height:var(--caption-large-desktop-line-height);letter-spacing:var(--caption-large-desktop-letter-spacing);font-feature-settings:"dlig" 1}@media(max-width:767px){._captionLarge_lev6r_1{font-family:var(--ui-font-primary)}}._captionMedium_1gxrg_1{font-family:Inter,sans-serif;font-weight:400;font-size:var(--caption-medium-desktop-font-size);line-height:var(--caption-medium-desktop-line-height);letter-spacing:var(--caption-medium-desktop-letter-spacing);font-feature-settings:"dlig" 1}@media(max-width:767px){._captionMedium_1gxrg_1{font-family:var(--ui-font-primary)}}._captionUppercase_1mzfy_1{font-family:Inter,sans-serif;font-weight:400;font-size:var(--caption-uppercase-desktop-font-size);line-height:var(--caption-uppercase-desktop-line-height);letter-spacing:var(--caption-uppercase-desktop-letter-spacing);font-feature-settings:"dlig" 1;text-transform:uppercase}@media(max-width:767px){._captionUppercase_1mzfy_1{font-family:var(--ui-font-primary)}}._code_1to1m_1{font-family:Hack,monospace;font-weight:400;font-size:var(--code-desktop-font-size);line-height:var(--code-desktop-line-height);letter-spacing:var(--code-desktop-letter-spacing);font-feature-settings:"dlig" 1}@media(max-width:767px){._code_1to1m_1{font-size:var(--code-mobile-font-size)}}
+:root{--h-extra-desktop-font-size: 6rem;--h-extra-desktop-line-height: 6.625rem;--h-extra-desktop-letter-spacing: -.03em;--h1-desktop-font-size: 4rem;--h1-desktop-line-height: 4rem;--h1-desktop-letter-spacing: -.02em;--h2-desktop-font-size: 3.25rem;--h2-desktop-line-height: 3.5625rem;--h2-desktop-letter-spacing: -.02em;--h3-desktop-font-size: 2.75rem;--h3-desktop-line-height: 3rem;--h3-desktop-letter-spacing: -.02em;--h4-desktop-font-size: 2.25rem;--h4-desktop-line-height: 2.6875rem;--h4-desktop-letter-spacing: -.02em;--h5-desktop-font-size: 1.875rem;--h5-desktop-line-height: 2.0625rem;--h5-desktop-letter-spacing: -.01em;--h6-desktop-font-size: 1.75rem;--h6-desktop-line-height: 1.9375rem;--h6-desktop-letter-spacing: -.01em;--paragraph-desktop-font-size: 1.5rem;--paragraph-desktop-line-height: 2.25rem;--paragraph-desktop-letter-spacing: -.01em;--button-large-desktop-font-size: 1.25rem;--button-large-desktop-line-height: 1.5rem;--button-large-desktop-letter-spacing: -.02em;--body-large-desktop-font-size: 1.25rem;--body-large-desktop-line-height: 1.875rem;--body-large-desktop-letter-spacing: -.02em;--button-small-desktop-font-size: 1.0625rem;--button-small-desktop-line-height: 1.5rem;--button-small-desktop-letter-spacing: -.02em;--body-small-desktop-font-size: 1rem;--body-small-desktop-line-height: 1.5rem;--body-small-desktop-letter-spacing: -.02em;--caption-large-desktop-font-size: 1rem;--caption-large-desktop-line-height: 1.5rem;--caption-large-desktop-letter-spacing: -.02em;--caption-medium-desktop-font-size: .75rem;--caption-medium-desktop-line-height: 1.125rem;--caption-medium-desktop-letter-spacing: -.02em;--caption-uppercase-desktop-font-size: .8125rem;--caption-uppercase-desktop-line-height: 1rem;--caption-uppercase-desktop-letter-spacing: .04em;--code-desktop-font-size: .875rem;--code-desktop-line-height: 1.0625rem;--code-desktop-letter-spacing: 0;--h-extra-tablet-font-size: 6rem;--h-extra-tablet-line-height: 6.625rem;--h-extra-tablet-letter-spacing: -.03em;--h1-tablet-font-size: 4rem;--h1-tablet-line-height: 4rem;--h1-tablet-letter-spacing: -.02em;--h2-tablet-font-size: 3rem;--h2-tablet-line-height: 3.3125rem;--h2-tablet-letter-spacing: -.02em;--h3-tablet-font-size: 2.5rem;--h3-tablet-line-height: 2.75rem;--h3-tablet-letter-spacing: -.02em;--h4-tablet-font-size: 2.25rem;--h4-tablet-line-height: 2.6875rem;--h4-tablet-letter-spacing: -.02em;--h5-tablet-font-size: 2rem;--h5-tablet-line-height: 2.1875rem;--h5-tablet-letter-spacing: -.01em;--h6-tablet-font-size: 1.5rem;--h6-tablet-line-height: 1.625rem;--h6-tablet-letter-spacing: -.01em;--paragraph-tablet-font-size: 1.375rem;--paragraph-tablet-line-height: 2.0625rem;--paragraph-tablet-letter-spacing: -.01em;--button-large-tablet-font-size: 1.125rem;--button-large-tablet-line-height: 1.5rem;--button-large-tablet-letter-spacing: -.02em;--body-large-tablet-font-size: 1.125rem;--body-large-tablet-line-height: 1.6875rem;--body-large-tablet-letter-spacing: -.02em;--button-small-tablet-font-size: 1rem;--button-small-tablet-line-height: 1.5rem;--button-small-tablet-letter-spacing: -.02em;--body-small-tablet-font-size: 1rem;--body-small-tablet-line-height: 1.5rem;--body-small-tablet-letter-spacing: -.02em;--caption-large-tablet-font-size: 1rem;--caption-large-tablet-line-height: 1.5rem;--caption-large-tablet-letter-spacing: -.02em;--caption-medium-tablet-font-size: .75rem;--caption-medium-tablet-line-height: 1.125rem;--caption-medium-tablet-letter-spacing: -.02em;--caption-uppercase-tablet-font-size: .8125rem;--caption-uppercase-tablet-line-height: 1rem;--caption-uppercase-tablet-letter-spacing: .04em;--code-tablet-font-size: .875rem;--code-tablet-line-height: 1.0625rem;--code-tablet-letter-spacing: 0;--h-extra-mobile-font-size: 3.5rem;--h-extra-mobile-line-height: 3.875rem;--h-extra-mobile-letter-spacing: -.02em;--h1-mobile-font-size: 2.75rem;--h1-mobile-line-height: 2.75rem;--h1-mobile-letter-spacing: -.01em;--h2-mobile-font-size: 2.5rem;--h2-mobile-line-height: 2.75rem;--h2-mobile-letter-spacing: -.01em;--h3-mobile-font-size: 2.25rem;--h3-mobile-line-height: 2.5rem;--h3-mobile-letter-spacing: -.01em;--h4-mobile-font-size: 2rem;--h4-mobile-line-height: 2.625rem;--h4-mobile-letter-spacing: -.01em;--h5-mobile-font-size: 1.375rem;--h5-mobile-line-height: 1.5rem;--h5-mobile-letter-spacing: -.01em;--h6-mobile-font-size: 1.25rem;--h6-mobile-line-height: 1.375rem;--h6-mobile-letter-spacing: -.01em;--paragraph-mobile-font-size: 1.125rem;--paragraph-mobile-line-height: 1.6875rem;--paragraph-mobile-letter-spacing: -.01em;--button-large-mobile-font-size: 1rem;--button-large-mobile-line-height: 1.5rem;--button-large-mobile-letter-spacing: -.01em;--body-large-mobile-font-size: 1rem;--body-large-mobile-line-height: 1.5rem;--body-large-mobile-letter-spacing: -.01em;--button-small-mobile-font-size: .875rem;--button-small-mobile-line-height: 1.5rem;--button-small-mobile-letter-spacing: -.01em;--body-small-mobile-font-size: .875rem;--body-small-mobile-line-height: 1.3125rem;--body-small-mobile-letter-spacing: -.01em;--caption-large-mobile-font-size: 1rem;--caption-large-mobile-line-height: 1.5rem;--caption-large-mobile-letter-spacing: -.02em;--caption-medium-mobile-font-size: .75rem;--caption-medium-mobile-line-height: 1.125rem;--caption-medium-mobile-letter-spacing: -.02em;--caption-uppercase-mobile-font-size: .8125rem;--caption-uppercase-mobile-line-height: 1rem;--caption-uppercase-mobile-letter-spacing: .04em;--code-mobile-font-size: .75rem;--code-mobile-line-height: 1.0625rem;--code-mobile-letter-spacing: 0}._hExtra_dx1fb_1{font-family:var(--ui-font-primary);font-weight:600;font-size:var(--h-extra-desktop-font-size);line-height:var(--h-extra-desktop-line-height);letter-spacing:var(--h-extra-desktop-letter-spacing);font-feature-settings:"dlig" 1,"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:767px){._hExtra_dx1fb_1{font-size:var(--h-extra-mobile-font-size);line-height:var(--h-extra-mobile-line-height);letter-spacing:var(--h-extra-mobile-letter-spacing)}}._h1_iuejz_1{font-family:var(--ui-font-primary);font-weight:500;font-size:var(--h1-desktop-font-size);line-height:var(--h1-desktop-line-height);letter-spacing:var(--h1-desktop-letter-spacing);font-feature-settings:"dlig" 1,"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:767px){._h1_iuejz_1{font-size:var(--h1-mobile-font-size);line-height:var(--h1-mobile-line-height);letter-spacing:var(--h1-mobile-letter-spacing)}}._h2_1i98w_1{font-family:var(--ui-font-primary);font-weight:500;font-size:var(--h2-desktop-font-size);line-height:var(--h2-desktop-line-height);letter-spacing:var(--h2-desktop-letter-spacing);font-feature-settings:"dlig" 1,"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:1439px){._h2_1i98w_1{font-size:var(--h2-tablet-font-size);line-height:var(--h2-tablet-line-height)}}@media(max-width:767px){._h2_1i98w_1{font-size:var(--h2-mobile-font-size);line-height:var(--h2-mobile-line-height);letter-spacing:var(--h2-mobile-letter-spacing)}}._h3_wip1f_1{font-family:var(--ui-font-primary);font-weight:500;font-size:var(--h3-desktop-font-size);line-height:var(--h3-desktop-line-height);letter-spacing:var(--h3-desktop-letter-spacing);font-feature-settings:"dlig" 1,"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:1439px){._h3_wip1f_1{font-size:var(--h3-tablet-font-size);line-height:var(--h3-tablet-line-height)}}@media(max-width:767px){._h3_wip1f_1{font-size:var(--h3-mobile-font-size);line-height:var(--h3-mobile-line-height);letter-spacing:var(--h3-mobile-letter-spacing)}}._h4_thwwf_1{font-family:var(--ui-font-primary);font-weight:500;font-size:var(--h4-desktop-font-size);line-height:var(--h4-desktop-line-height);letter-spacing:var(--h4-desktop-letter-spacing);font-feature-settings:"dlig" 1,"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:767px){._h4_thwwf_1{font-size:var(--h4-mobile-font-size);line-height:var(--h4-mobile-line-height);letter-spacing:var(--h4-mobile-letter-spacing)}}._h5_zem0s_1{font-family:var(--ui-font-primary);font-weight:500;font-size:var(--h5-desktop-font-size);line-height:var(--h5-desktop-line-height);letter-spacing:var(--h5-desktop-letter-spacing);font-feature-settings:"dlig" 1,"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:1439px){._h5_zem0s_1{font-size:var(--h5-tablet-font-size);line-height:var(--h5-tablet-line-height)}}@media(max-width:767px){._h5_zem0s_1{font-size:var(--h5-mobile-font-size);line-height:var(--h5-mobile-line-height)}}._h6_py9o3_1{font-family:var(--ui-font-primary);font-weight:500;font-size:var(--h6-desktop-font-size);line-height:var(--h6-desktop-line-height);letter-spacing:var(--h6-desktop-letter-spacing);font-feature-settings:"dlig" 1,"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:1439px){._h6_py9o3_1{font-size:var(--h6-tablet-font-size);line-height:var(--h6-tablet-line-height)}}@media(max-width:767px){._h6_py9o3_1{font-size:var(--h6-mobile-font-size);line-height:var(--h6-mobile-line-height)}}._paragraph_6mdxp_1{font-family:var(--ui-font-primary);font-weight:500;font-size:var(--paragraph-desktop-font-size);line-height:var(--paragraph-desktop-line-height);letter-spacing:var(--paragraph-desktop-letter-spacing);font-feature-settings:"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:1439px){._paragraph_6mdxp_1{font-size:var(--paragraph-tablet-font-size);line-height:var(--paragraph-tablet-line-height)}}@media(max-width:767px){._paragraph_6mdxp_1{font-size:var(--paragraph-mobile-font-size);line-height:var(--paragraph-mobile-line-height)}}._bodyLarge_zgxpr_1{font-family:var(--ui-font-primary);font-weight:400;font-size:var(--body-large-desktop-font-size);line-height:var(--body-large-desktop-line-height);letter-spacing:var(--body-large-desktop-letter-spacing);font-feature-settings:"dlig" 1;margin:0}@media(max-width:1439px){._bodyLarge_zgxpr_1{font-size:var(--body-large-tablet-font-size);line-height:var(--body-large-tablet-line-height)}}@media(max-width:767px){._bodyLarge_zgxpr_1{font-size:var(--body-large-mobile-font-size);line-height:var(--body-large-mobile-line-height);letter-spacing:var(--body-large-mobile-letter-spacing)}}._bodySmall_izgxi_1{font-family:var(--ui-font-primary);font-weight:400;font-size:var(--body-small-desktop-font-size);line-height:var(--body-small-desktop-line-height);letter-spacing:var(--body-small-desktop-letter-spacing);font-feature-settings:"dlig" 1;margin:0}@media(max-width:767px){._bodySmall_izgxi_1{font-size:var(--body-small-mobile-font-size);line-height:var(--body-small-mobile-line-height);letter-spacing:var(--body-small-mobile-letter-spacing)}}._buttonLarge_1kib2_1{font-family:var(--ui-font-body);font-weight:500;font-size:var(--button-large-desktop-font-size);line-height:var(--button-large-desktop-line-height);letter-spacing:var(--button-large-desktop-letter-spacing);font-feature-settings:"dlig" 1}@media(max-width:1439px){._buttonLarge_1kib2_1{font-size:var(--button-large-tablet-font-size)}}@media(max-width:767px){._buttonLarge_1kib2_1{font-family:var(--ui-font-primary);font-size:var(--button-large-mobile-font-size);letter-spacing:var(--button-large-mobile-letter-spacing)}}._buttonSmall_1ga6z_1{font-family:var(--ui-font-body);font-weight:500;font-size:var(--button-small-desktop-font-size);line-height:var(--button-small-desktop-line-height);letter-spacing:var(--button-small-desktop-letter-spacing);font-feature-settings:"dlig" 1}@media(max-width:1439px){._buttonSmall_1ga6z_1{font-size:var(--button-small-tablet-font-size)}}@media(max-width:767px){._buttonSmall_1ga6z_1{font-family:var(--ui-font-primary);font-size:var(--button-small-mobile-font-size);letter-spacing:var(--button-small-mobile-letter-spacing)}}._captionLarge_keyl9_1{font-family:var(--ui-font-body);font-weight:500;font-size:var(--caption-large-desktop-font-size);line-height:var(--caption-large-desktop-line-height);letter-spacing:var(--caption-large-desktop-letter-spacing);font-feature-settings:"dlig" 1}@media(max-width:767px){._captionLarge_keyl9_1{font-family:var(--ui-font-primary)}}._captionMedium_9rjdy_1{font-family:var(--ui-font-body);font-weight:400;font-size:var(--caption-medium-desktop-font-size);line-height:var(--caption-medium-desktop-line-height);letter-spacing:var(--caption-medium-desktop-letter-spacing);font-feature-settings:"dlig" 1}@media(max-width:767px){._captionMedium_9rjdy_1{font-family:var(--ui-font-primary)}}._captionUppercase_15jnh_1{font-family:var(--ui-font-body);font-weight:400;font-size:var(--caption-uppercase-desktop-font-size);line-height:var(--caption-uppercase-desktop-line-height);letter-spacing:var(--caption-uppercase-desktop-letter-spacing);font-feature-settings:"dlig" 1;text-transform:uppercase}@media(max-width:767px){._captionUppercase_15jnh_1{font-family:var(--ui-font-primary)}}._code_1o5oi_1{font-family:var(--ui-font-code);font-weight:400;font-size:var(--code-desktop-font-size);line-height:var(--code-desktop-line-height);letter-spacing:var(--code-desktop-letter-spacing);font-feature-settings:"dlig" 1}@media(max-width:767px){._code_1o5oi_1{font-size:var(--code-mobile-font-size)}}._button_6hqdb_1{appearance:none;border:none;background:none;cursor:pointer;border-radius:999px;padding:1em 1.6em;font-family:var(--ui-font-body);font-weight:500;font-size:var(--button-large-desktop-font-size);line-height:var(--button-large-desktop-line-height);letter-spacing:var(--button-large-desktop-letter-spacing);font-feature-settings:"dlig" 1;transition:background-color .15s ease,border-color .15s ease,color .15s ease}@media(max-width:1439px){._button_6hqdb_1{font-size:var(--button-large-tablet-font-size);padding:1.111em 1.556em}}@media(max-width:767px){._button_6hqdb_1{font-size:var(--button-large-mobile-font-size);letter-spacing:var(--button-large-mobile-letter-spacing);padding:1em 1.5em}}._button_6hqdb_1:focus-visible{outline:2px solid #5aa1ff;outline-offset:2px}._button_6hqdb_1:disabled{cursor:not-allowed}._sm_6hqdb_37{font-size:var(--button-small-desktop-font-size);line-height:var(--button-small-desktop-line-height);letter-spacing:var(--button-small-desktop-letter-spacing);padding:.706em 1.176em}@media(max-width:1439px){._sm_6hqdb_37{font-size:var(--button-small-tablet-font-size)}}@media(max-width:767px){._sm_6hqdb_37{font-size:var(--button-small-mobile-font-size);letter-spacing:var(--button-small-mobile-letter-spacing);padding:.571em 1.143em}}._primary_6hqdb_56{background-color:#06f;color:#fff}._primary_6hqdb_56:hover:not(:disabled){background-color:#0039b5}._primary_6hqdb_56:active:not(:disabled){background-color:#001d7a}._primary_6hqdb_56:disabled{background-color:#e6e9ed;color:#b7bec7}._secondary_6hqdb_71{background-color:transparent;color:#151b23;border:2px solid #151b23}._secondary_6hqdb_71:hover:not(:disabled){border-color:#0039b5;color:#0039b5}._secondary_6hqdb_71:active:not(:disabled){border-color:#001d7a;color:#001d7a}._secondary_6hqdb_71:disabled{border:1px solid #b7bec7;color:#b7bec7}._negative_6hqdb_89{background-color:#ffe8ef;color:#6b0039}._negative_6hqdb_89:hover:not(:disabled){background-color:#ffcbdb}._negative_6hqdb_89:active:not(:disabled){background-color:#ffafc8}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartyweb/ui",
-	"version": "1.1.0",
+	"version": "1.2.0",
 	"type": "module",
 	"main": "dist/index.cjs",
 	"module": "dist/index.js",
@@ -23,7 +23,8 @@
 		"changeset": "changeset",
 		"release": "changeset publish",
 		"storybook": "node sd.config.js && storybook dev -p 6006",
-		"build-storybook": "storybook build"
+		"build-storybook": "storybook build",
+		"lint": "eslint src --max-warnings 0 && stylelint 'src/**/*.scss'"
 	},
 	"peerDependencies": {
 		"react": "^19.0.0",
@@ -31,17 +32,22 @@
 	},
 	"devDependencies": {
 		"@changesets/cli": "^2.29.8",
+		"@eslint/js": "^10.0.0",
 		"@storybook/react-vite": "^10.2.15",
 		"@types/react": "^19.2.13",
 		"@types/react-dom": "^19.2.3",
 		"@vitejs/plugin-react": "^5.1.3",
+		"eslint": "^10.0.0",
 		"prettier": "^3.8.1",
 		"react": "^19.2.4",
 		"react-dom": "^19.2.4",
 		"sass": "^1.97.3",
 		"storybook": "^10.2.15",
 		"style-dictionary": "^4.4.0",
+		"stylelint": "^17.5.0",
+		"stylelint-config-standard-scss": "^17.0.0",
 		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.57.0",
 		"vite": "^7.3.1",
 		"vite-plugin-dts": "^4.5.4"
 	}