@nexus-cross/crossx-design-system 2.3.4-beta.1 → 2.4.0-beta.2

package/README.md

@@ -19,7 +19,7 @@ Transcribed from the CROSSx Figma design system (Embeded v1.0.0):
 
 | Axis | Figma node | Shape |
 |---|---|---|
-| color | `2032-6584` | `bg`, `surface`, `content`, `border`, `accent.primary`, `system.{red,blue,orange,purple,green}`, `overlay`, `static` — light + dark |
+| color | `2151-1073` (file `Bta3fMnTynXtOtyZqI05fu`) | `bg`, `surface`, `content`, `border`, `accent.primary`, `system.{red,blue,orange,purple,green}`, `overlay`, `static` — light + dark |
 | typography | `2019-2351` | `text`, `textMedium`, `textSemibold`, `label`, `labelSemibold`, `heading` (h1–h7), `display` |
 | layout | `2060-1755` | `responsivePadding` (`sm`/`md`/`lg`) |
 
@@ -40,6 +40,22 @@ const css = buildDesignSystemCss(defaultDesignSystem);
 - **Typography** → utility classes, applied with `className`:
   `.ds-text-medium-sm`, `.ds-label-md`, `.ds-heading-h6`, `.ds-display-lg`.
 
+## Picking a ramp
+
+`accent.primary` is the **brand orange** (`#FF8438` / `#F0640D`).
+`system.orange` is a separate **warning amber** (`#FC8B01` / `#E56F00`), and
+`system.green` is the teal success ramp. The two oranges look similar but are
+not interchangeable — choose by meaning:
+
+| Intent | Ramp |
+|---|---|
+| Primary CTA, focus ring, active tab, brand highlight | `accent.primary` |
+| Warning / caution copy and chips | `system.orange` |
+| Success, completion, positive delta | `system.green` |
+
+`ColorRamp.medium` is **optional** — only `system.orange` and `system.green`
+define it, so `--ds-<ramp>-medium` is emitted for those two ramps alone.
+
 ## crossy-sdk bridge
 
 ```ts

package/dist/index.d.ts

@@ -24,6 +24,13 @@ interface ColorRamp {
     default: string;
     /** Stronger / hover variant. */
     high: string;
+    /**
+     * Tinted surface one step stronger than `low` — for a filled chip/badge that
+     * must read against a `low`-tinted parent. Optional: the design system only
+     * defines it on the ramps that need it (`system.orange`, `system.green`),
+     * so `buildColorVars` simply omits `--ds-<ramp>-medium` where it's absent.
+     */
+    medium?: string;
     /** Tinted surface (subtle filled background). */
     low: string;
     /** Faintest tinted surface. */
@@ -141,6 +148,12 @@ interface DesignSystemEffects {
     };
     /** Background blur (Figma `BG_blur7`, 7px radius). */
     bgBlur7: string;
+    /**
+     * Brand CTA gradient (pink → orange). Used as the `background` of primary
+     * confirm buttons across features. Mode-independent — the gradient reads on
+     * both light and dark surfaces.
+     */
+    accentGradient: string;
 }
 interface DesignSystem {
     /** Identifier (e.g. `'crossx'`). Surfaced for debugging / theme switching. */
@@ -156,11 +169,21 @@ interface DesignSystem {
 type ThemeMode = 'light' | 'dark';
 
 /**
- * Default color palette — transcribed verbatim from CROSSx Figma
- * `embeded-color` (node `2032-6584`), light + dark modes.
+ * Default color palette — transcribed verbatim from the Figma
+ * `Embeded 디자인시스템 v1.0.0` color table (file `Bta3fMnTynXtOtyZqI05fu`,
+ * node `2151-1073`), light + dark modes.
  *
- * Black/white alpha steps (content, border, overlay) are emitted as `rgba()`.
- * Note: `accent.primary` and `system.green` share the same brand-teal ramp.
+ * Black/white alpha steps (content, border, overlay) are emitted as hex with an
+ * alpha byte.
+ *
+ * ⚠️ `accent.primary` is the **orange** brand ramp. It used to be the same teal
+ * as `system.green`, which forced every brand surface to bind to
+ * `--ds-system-orange-*` as a workaround. v1.0.0 fixes that at the token level:
+ *   - `accent.primary` — brand orange (`#FF8438` / `#F0640D`)
+ *   - `system.orange`  — a distinct warning amber (`#FC8B01` / `#E56F00`)
+ *   - `system.green`   — keeps the teal ramp, now used only for success/positive
+ * The two orange ramps are close but NOT interchangeable: accent is redder,
+ * system/orange is yellower. Pick by meaning (brand vs warning), not by eye.
  */
 
 declare const lightColors: ColorScale;
@@ -260,6 +283,58 @@ interface SdkColorOverrides {
 }
 declare function toSdkColorOverrides(ds: DesignSystem, mode: ThemeMode): SdkColorOverrides;
 
+/**
+ * Brand tokens — single source of truth for the user-facing wallet & chain
+ * display names surfaced through the connect-kit SDK.
+ *
+ * Phase 1 (display strings only): change the values here to rebrand every
+ * presentable-layer label across dapp-ui / wagmi / react in one place.
+ *
+ * NOTE: this covers DISPLAY occurrences only. The on-chain ticker / external
+ * API code `"CROSS"` (AlchemyPay onramp mappings, token-list / pool symbol
+ * comparisons) is a functional identifier — NOT a display token — and is
+ * intentionally left untouched here. Renaming those requires external
+ * coordination and belongs to a separate effort.
+ */
+/** Primary wallet brand name shown to end users. */
+declare const WALLET_BRAND_NAME = "ONEpocket";
+/**
+ * Composed wallet labels used across connect modals, buttons and connectors.
+ *
+ * The former '+' suffix is retired: both 'ONEwallet' and 'ONEwallet+' now
+ * present as the single 'ONEpocket' brand.
+ */
+declare const WALLET_LABELS: {
+    /** Bare brand name / title (was 'ONEwallet' / 'CROSSx'). */
+    readonly default: "ONEpocket";
+    /** Embedded / social-login wallet (was 'ONEwallet with Social'). */
+    readonly social: "ONEpocket with Social";
+    /** Native app wallet (was 'ONEwallet+' / 'CROSSx App'). */
+    readonly app: "ONEpocket";
+    /** Browser extension (was 'ONEwallet+ Extension' / 'CROSSx Extension'). */
+    readonly extension: "ONEpocket Extension";
+};
+/**
+ * Chain display names — hardcoded FALLBACK. The rebranded 'One Mainnet' /
+ * 'One Testnet' now comes from the S3 remote-config (chains.json), so the
+ * built-in default stays on the previous 'CROSS' notation. If S3 is absent
+ * the UI shows these CROSS names.
+ */
+declare const CHAIN_DISPLAY: {
+    readonly mainnet: "CROSS Mainnet";
+    readonly testnet: "ONEchain Testnet";
+};
+/**
+ * Native currency display symbol — hardcoded FALLBACK. Rebranded 'ONE' / 'tONE'
+ * is served via S3 remote-config; the default keeps the previous 'CROSS' /
+ * 'tCROSS' notation (also matches the on-chain ticker). DISPLAY metadata only —
+ * do not reuse for on-chain / external-API matching.
+ */
+declare const NATIVE_SYMBOL: {
+    readonly mainnet: "CROSS";
+    readonly testnet: "tONE";
+};
+
 /**
  * `@nexus-cross/crossx-design-system`
  *
@@ -270,4 +345,4 @@ declare function toSdkColorOverrides(ds: DesignSystem, mode: ThemeMode): SdkColo
 /** Convenience: the default design system's full stylesheet. */
 declare function getDefaultDesignSystemCss(): string;
 
-export { type BuildCssOptions, type ColorRamp, type ColorScale, type DesignSystem, type DesignSystemEffects, type DesignSystemLayout, type DesignSystemTypography, type DisplaySize, type HeadingSize, type LabelSemiboldSize, type LabelSize, type SdkColorOverrides, type TextSemiboldSize, type TextSize, type ThemeMode, type TypeStyle, buildColorVars, buildDesignSystemCss, buildLayoutVars, buildTypographyClasses, darkColors, defaultDesignSystem, effects, getDefaultDesignSystemCss, layout, lightColors, toSdkColorOverrides, typography };
+export { type BuildCssOptions, CHAIN_DISPLAY, type ColorRamp, type ColorScale, type DesignSystem, type DesignSystemEffects, type DesignSystemLayout, type DesignSystemTypography, type DisplaySize, type HeadingSize, type LabelSemiboldSize, type LabelSize, NATIVE_SYMBOL, type SdkColorOverrides, type TextSemiboldSize, type TextSize, type ThemeMode, type TypeStyle, WALLET_BRAND_NAME, WALLET_LABELS, buildColorVars, buildDesignSystemCss, buildLayoutVars, buildTypographyClasses, darkColors, defaultDesignSystem, effects, getDefaultDesignSystemCss, layout, lightColors, toSdkColorOverrides, typography };

package/dist/index.js

@@ -1,7 +1,7 @@
-var a={bg:{default:"#FFFFFF",dim:"#F5F7FA"},surface:{default:"#FFFFFF",medium:"#F5F7FA",high:"#EDF1F2",dim:"#F9FAFB",inverted:"#1E232E"},content:{highest:"#000000",high:"#000000D9",medium:"#000000A6",low:"#00000066",lowest:"#00000040",inverted:"#FFFFFF"},border:{default:"#00000012",medium:"#0000002E",high:"#000000A6"},accent:{primary:{on:"#FFFFFF",default:"#00B4B7",high:"#00A0A2",low:"#E7F9F8",lowest:"#F0FAF9",onInverted:"#00E8C9"}},system:{red:{on:"#FFFFFF",default:"#DA0B2E",high:"#D20609",low:"#FFEEEE",lowest:"#FFF6F6",onInverted:"#FF0F47"},blue:{on:"#FFFFFF",default:"#0888DE",high:"#008DCA",low:"#ECF8FC",lowest:"#F5FBFE",onInverted:"#0FC7FF"},orange:{on:"#FFFFFF",default:"#FC8B01",high:"#E56F00",low:"#FCF5E9",lowest:"#FFF9F2",onInverted:"#FF9F21"},purple:{on:"#FFFFFF",default:"#7E54F4",high:"#7346F3",low:"#F5F3FF",lowest:"#F9F8FF",onInverted:"#9B78FF"},green:{on:"#FFFFFF",default:"#00B4B7",high:"#00A0A2",low:"#E7F9F8",lowest:"#F0FAF9",onInverted:"#00E8C9"}},overlay:{dim:"#00000080",subtle:"#00000005"},static:{white:"#FFFFFF",black:"#000000"}},g={bg:{default:"#1E232E",dim:"#191D27"},surface:{default:"#1E232E",medium:"#252B39",high:"#363B4C",dim:"#161B26",inverted:"#FFFFFF"},content:{highest:"#FFFFFF",high:"#FFFFFFD9",medium:"#FFFFFFA6",low:"#FFFFFF66",lowest:"#FFFFFF40",inverted:"#000000"},border:{default:"#FFFFFF12",medium:"#FFFFFF2E",high:"#FFFFFFA6"},accent:{primary:{on:"#000000",default:"#00CEB2",high:"#00E8C9",low:"#123235",lowest:"#102E31",onInverted:"#00A0A2"}},system:{red:{on:"#FFFFFF",default:"#CD0C40",high:"#FF0F47",low:"#461420",lowest:"#39151E",onInverted:"#D20609"},blue:{on:"#FFFFFF",default:"#0888DE",high:"#0FC7FF",low:"#143446",lowest:"#162B3B",onInverted:"#008DCA"},orange:{on:"#000000",default:"#FF9F21",high:"#FF9F21",low:"#342B1E",lowest:"#2E2820",onInverted:"#E56F00"},purple:{on:"#FFFFFF",default:"#744FDC",high:"#9B78FF",low:"#2E2854",lowest:"#2A2740",onInverted:"#7346F3"},green:{on:"#000000",default:"#00CEB2",high:"#00E8C9",low:"#123235",lowest:"#102E31",onInverted:"#00A0A2"}},overlay:{dim:"#000000B3",subtle:"#00000026"},static:{white:"#FFFFFF",black:"#000000"}};var x="Inter, sans-serif",e=(t,o,r,n)=>({fontFamily:x,fontSize:t,fontWeight:o,lineHeight:r,letterSpacing:n}),d={text:{"2xs":e(10,400,1.5,-1),xs:e(12,400,1.5,-1),sm:e(14,400,1.5,-1),base:e(16,400,1.5,-1),lg:e(18,400,1.5,-1),xl:e(20,400,1.5,-1)},textMedium:{"2xs":e(10,500,1.5,-1),xs:e(12,500,1.5,-1),sm:e(14,500,1.5,-1),base:e(16,500,1.5,-1),lg:e(18,500,1.5,-1),xl:e(20,500,1.5,-1)},textSemibold:{xs:e(12,600,1.5,-1),sm:e(14,600,1.5,-1),base:e(16,600,1.5,-1),lg:e(18,600,1.5,-1),xl:e(20,600,1.5,-1)},label:{xs:e(10,500,1,0),sm:e(12,500,1,0),md:e(14,500,1,0),lg:e(16,500,1,0)},labelSemibold:{sm:e(12,600,1,0),md:e(14,600,1,0),lg:e(16,600,1,0)},heading:{h7:e(14,600,1.25,0),h6:e(16,600,1.25,0),h5:e(18,600,1.25,0),h4:e(20,600,1.25,0),h3:e(24,600,1.25,0),h2:e(30,700,1.25,0),h1:e(36,700,1.25,0)},display:{sm:e(36,700,1.25,0),md:e(48,700,1.25,0),lg:e(60,700,1.25,0)}};var m={responsivePadding:{sm:16,md:24,lg:32}};var c={shadowModal:{light:"0px 4px 30px -1px rgba(0, 0, 0, 0.15)",dark:"0px 4px 30px -1px rgba(0, 0, 0, 0.7)"},bgBlur7:"blur(3.5px)"};var u={name:"crossx",colors:{light:a,dark:g},typography:d,layout:m,effects:c};var y="--ds";function F(t){return t.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}function h(t,o,r){for(let[n,s]of Object.entries(t)){let i=[...o,F(n)];typeof s=="string"?r.push(`  ${y}-${i.join("-")}: ${s};`):s&&typeof s=="object"&&h(s,i,r)}}function p(t){let o=[];return h(t,[],o),o.join(`
-`)}function b(t){let o=[];for(let[r,n]of Object.entries(t)){let s=F(r);for(let[i,l]of Object.entries(n))o.push(`  ${y}-${s}-${F(i)}: ${l}px;`)}return o.join(`
-`)}function C(t){return t===0?"0":`${t/100}em`}function D(t,o){return[`.${t} {`,`  font-family: ${o.fontFamily};`,`  font-size: ${o.fontSize}px;`,`  font-weight: ${o.fontWeight};`,`  line-height: ${o.lineHeight};`,`  letter-spacing: ${C(o.letterSpacing)};`,"}"].join(`
-`)}function S(t){let o=[];for(let[r,n]of Object.entries(t)){let s=F(r);for(let[i,l]of Object.entries(n))o.push(D(`ds-${s}-${i}`,l))}return o.join(`
+var d={bg:{default:"#FFFFFF",dim:"#F5F7FA"},surface:{default:"#FFFFFF",medium:"#F5F7FA",high:"#EDF1F2",dim:"#F9FAFB",inverted:"#1E232E"},content:{highest:"#000000",high:"#000000D9",medium:"#000000A6",low:"#00000066",lowest:"#00000040",inverted:"#FFFFFF"},border:{default:"#00000012",medium:"#0000002E",high:"#000000A6"},accent:{primary:{on:"#FFFFFF",default:"#FF8438",high:"#F0640D",low:"#FFF5EE",lowest:"#FFF9F6",onInverted:"#FF8438"}},system:{red:{on:"#FFFFFF",default:"#DA0B2E",high:"#D20609",low:"#FFEEEE",lowest:"#FFF6F6",onInverted:"#FF0F47"},blue:{on:"#FFFFFF",default:"#0888DE",high:"#008DCA",low:"#ECF8FC",lowest:"#F5FBFE",onInverted:"#0FC7FF"},orange:{on:"#FFFFFF",default:"#FC8B01",high:"#E56F00",medium:"#FDEFDA",low:"#FCF5E9",lowest:"#FFF9F2",onInverted:"#FF9F21"},purple:{on:"#FFFFFF",default:"#7E54F4",high:"#7346F3",low:"#F5F3FF",lowest:"#F9F8FF",onInverted:"#9B78FF"},green:{on:"#FFFFFF",default:"#00B4B7",high:"#00A0A2",medium:"#D8F3F2",low:"#E7F9F8",lowest:"#F0FAF9",onInverted:"#00E8C9"}},overlay:{dim:"#00000080",subtle:"#00000005"},static:{white:"#FFFFFF",black:"#000000"}},m={bg:{default:"#1E232E",dim:"#191D27"},surface:{default:"#1E232E",medium:"#252B39",high:"#363B4C",dim:"#161B26",inverted:"#FFFFFF"},content:{highest:"#FFFFFF",high:"#FFFFFFD9",medium:"#FFFFFFA6",low:"#FFFFFF66",lowest:"#FFFFFF40",inverted:"#000000"},border:{default:"#FFFFFF12",medium:"#FFFFFF2E",high:"#FFFFFFA6"},accent:{primary:{on:"#000000",default:"#F0640D",high:"#FF8438",low:"#422A1F",lowest:"#362519",onInverted:"#F0640D"}},system:{red:{on:"#FFFFFF",default:"#CD0C40",high:"#EA1546",low:"#461420",lowest:"#39151E",onInverted:"#D20609"},blue:{on:"#FFFFFF",default:"#0888DE",high:"#17B4E3",low:"#143446",lowest:"#162B3B",onInverted:"#008DCA"},orange:{on:"#000000",default:"#FF9F21",high:"#FF9F21",medium:"#41321E",low:"#342B1E",lowest:"#2E2820",onInverted:"#E56F00"},purple:{on:"#FFFFFF",default:"#744FDC",high:"#9B78FF",low:"#2E2854",lowest:"#2A2740",onInverted:"#7346F3"},green:{on:"#000000",default:"#00CEB2",high:"#00CEB2",medium:"#114146",low:"#123235",lowest:"#102E31",onInverted:"#00A0A2"}},overlay:{dim:"#000000B3",subtle:"#00000026"},static:{white:"#FFFFFF",black:"#000000"}};var D="Inter, sans-serif",e=(t,o,r,n)=>({fontFamily:D,fontSize:t,fontWeight:o,lineHeight:r,letterSpacing:n}),c={text:{"2xs":e(10,400,1.5,-1),xs:e(12,400,1.5,-1),sm:e(14,400,1.5,-1),base:e(16,400,1.5,-1),lg:e(18,400,1.5,-1),xl:e(20,400,1.5,-1)},textMedium:{"2xs":e(10,500,1.5,-1),xs:e(12,500,1.5,-1),sm:e(14,500,1.5,-1),base:e(16,500,1.5,-1),lg:e(18,500,1.5,-1),xl:e(20,500,1.5,-1)},textSemibold:{xs:e(12,600,1.5,-1),sm:e(14,600,1.5,-1),base:e(16,600,1.5,-1),lg:e(18,600,1.5,-1),xl:e(20,600,1.5,-1)},label:{xs:e(10,500,1,0),sm:e(12,500,1,0),md:e(14,500,1,0),lg:e(16,500,1,0)},labelSemibold:{sm:e(12,600,1,0),md:e(14,600,1,0),lg:e(16,600,1,0)},heading:{h7:e(14,600,1.25,0),h6:e(16,600,1.25,0),h5:e(18,600,1.25,0),h4:e(20,600,1.25,0),h3:e(24,600,1.25,0),h2:e(30,700,1.25,0),h1:e(36,700,1.25,0)},display:{sm:e(36,700,1.25,0),md:e(48,700,1.25,0),lg:e(60,700,1.25,0)}};var g={responsivePadding:{sm:16,md:24,lg:32}};var u={shadowModal:{light:"0px 4px 30px -1px rgba(0, 0, 0, 0.15)",dark:"0px 4px 30px -1px rgba(0, 0, 0, 0.7)"},bgBlur7:"blur(3.5px)",accentGradient:"linear-gradient(196deg, #ff2589 16%, #ff823d 84%)"};var p={name:"crossx",colors:{light:d,dark:m},typography:c,layout:g,effects:u};var h="--ds";function a(t){return t.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}function S(t,o,r){for(let[n,s]of Object.entries(t)){let i=[...o,a(n)];typeof s=="string"?r.push(`  ${h}-${i.join("-")}: ${s};`):s&&typeof s=="object"&&S(s,i,r)}}function f(t){let o=[];return S(t,[],o),o.join(`
+`)}function b(t){let o=[];for(let[r,n]of Object.entries(t)){let s=a(r);for(let[i,l]of Object.entries(n))o.push(`  ${h}-${s}-${a(i)}: ${l}px;`)}return o.join(`
+`)}function E(t){return t===0?"0":`${t/100}em`}function C(t,o){return[`.${t} {`,`  font-family: ${o.fontFamily};`,`  font-size: ${o.fontSize}px;`,`  font-weight: ${o.fontWeight};`,`  line-height: ${o.lineHeight};`,`  letter-spacing: ${E(o.letterSpacing)};`,"}"].join(`
+`)}function x(t){let o=[];for(let[r,n]of Object.entries(t)){let s=a(r);for(let[i,l]of Object.entries(n))o.push(C(`ds-${s}-${i}`,l))}return o.join(`
 
-`)}function f(t,o={}){return[`${o.scope??":root"}, [data-ds-theme="dark"] {`,p(t.colors.dark),b(t.layout),`  --ds-shadow-modal: ${t.effects.shadowModal.dark};`,`  --ds-bg-blur-7: ${t.effects.bgBlur7};`,"}","",'[data-ds-theme="light"] {',p(t.colors.light),`  --ds-shadow-modal: ${t.effects.shadowModal.light};`,"}","",S(t.typography),""].join(`
-`)}function w(t,o){let r=t.colors[o];return{primary:r.accent.primary.default,secondary:r.system.red.default,onPrimary:r.accent.primary.on,error:r.system.red.default,bg:r.bg.default,surfaceDefault:r.surface.medium,surfaceSubtle:r.surface.high,borderDefault:r.border.default,borderSubtle:r.border.medium,textIconPrimary:r.content.highest,textIconSecondary:r.content.medium,textIconTertiary:r.content.low}}function R(){return f(u)}export{p as buildColorVars,f as buildDesignSystemCss,b as buildLayoutVars,S as buildTypographyClasses,g as darkColors,u as defaultDesignSystem,c as effects,R as getDefaultDesignSystemCss,m as layout,a as lightColors,w as toSdkColorOverrides,d as typography};
+`)}function y(t,o={}){return[`${o.scope??":root"}, [data-ds-theme="dark"] {`,f(t.colors.dark),b(t.layout),`  --ds-shadow-modal: ${t.effects.shadowModal.dark};`,`  --ds-bg-blur-7: ${t.effects.bgBlur7};`,`  --ds-accent-gradient: ${t.effects.accentGradient};`,"}","",'[data-ds-theme="light"] {',f(t.colors.light),`  --ds-shadow-modal: ${t.effects.shadowModal.light};`,"}","",x(t.typography),""].join(`
+`)}function w(t,o){let r=t.colors[o];return{primary:r.accent.primary.default,secondary:r.system.red.default,onPrimary:r.accent.primary.on,error:r.system.red.default,bg:r.bg.default,surfaceDefault:r.surface.medium,surfaceSubtle:r.surface.high,borderDefault:r.border.default,borderSubtle:r.border.medium,textIconPrimary:r.content.highest,textIconSecondary:r.content.medium,textIconTertiary:r.content.low}}var F="ONEpocket",A={default:F,social:`${F} with Social`,app:F,extension:`${F} Extension`},B={mainnet:"CROSS Mainnet",testnet:"ONEchain Testnet"},T={mainnet:"CROSS",testnet:"tONE"};function W(){return y(p)}export{B as CHAIN_DISPLAY,T as NATIVE_SYMBOL,F as WALLET_BRAND_NAME,A as WALLET_LABELS,f as buildColorVars,y as buildDesignSystemCss,b as buildLayoutVars,x as buildTypographyClasses,m as darkColors,p as defaultDesignSystem,u as effects,W as getDefaultDesignSystemCss,g as layout,d as lightColors,w as toSdkColorOverrides,c as typography};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexus-cross/crossx-design-system",
-  "version": "2.3.4-beta.1",
+  "version": "2.4.0-beta.2",
   "description": "CROSSx design system — color, typography and layout tokens with a swappable DesignSystem contract",
   "type": "module",
   "main": "./dist/index.js",