@digitalpromise/design 1.0.1-next.2 → 2.0.0

package/README.md

@@ -1,209 +1,25 @@
-# React + TypeScript + Vite
+# Digital Promise Design Library
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+This is a React + Typescript + Tailwind + Vite component library for the development and maintenance of UI components aligned to the [Digital Promise Design System](https://app.gitbook.com/o/B4hdkVOolIXfg1cru4Mb/s/GC8UP51P947pbKSUyr6H/).
 
-Currently, two official plugins are available:
+## Getting Started
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+### Installation
 
-## Expanding the ESLint configuration
+[NVM](https://github.com/nvm-sh/nvm) is recommended for the installation and management of Node.js. With NVM installed, you can view and develop components locally following these steps:
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+- `nvm use` # Install or switch to specific version of Node
+- `corepack enable` # Enabling tooling for switching Node package managers
+- `corepack use pnpm` # Use the package manager pnpm
+- `pnpm install` # Install dependencies
+- `pnpm storybook` # Start Storybook
 
-- Configure the top-level `parserOptions` property like this:
+This will install all project dependencies and start a local Storybook server.
 
-```js
-   parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-   },
-```
+### Style Dictionary
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+Design tokens are defined in the [tokens](./tokens/) directory and exported using [Style Dictionary](https://styledictionary.com/). These design tokens provide the fundamental style definitions for colors and spacing used to generate this component library's [Tailwind CSS](https://tailwindcss.com/) theme. Source and output options are specified in [config.json](./config.json).
 
-## Basic Style Dictionary
+### Linting and Testing
 
-This example code is bare-bones to show you what this framework can do. If you have the style-dictionary module installed globally, you can `cd` into this directory and run:
-```bash
-style-dictionary build
-```
-
-You should see something like this output:
-```
-Copying starter files...
-
-Source style dictionary starter files created!
-
-Running `style-dictionary build` for the first time to generate build artifacts.
-
-
-scss
-✔︎  build/scss/_variables.scss
-
-android
-✔︎  build/android/font_dimens.xml
-✔︎  build/android/colors.xml
-
-compose
-✔︎ build/compose/StyleDictionaryColor.kt
-✔︎ build/compose/StyleDictionarySize.kt
-
-ios
-✔︎  build/ios/StyleDictionaryColor.h
-✔︎  build/ios/StyleDictionaryColor.m
-✔︎  build/ios/StyleDictionarySize.h
-✔︎  build/ios/StyleDictionarySize.m
-
-ios-swift
-✔︎  build/ios-swift/StyleDictionary.swift
-
-ios-swift-separate-enums
-✔︎  build/ios-swift/StyleDictionaryColor.swift
-✔︎  build/ios-swift/StyleDictionarySize.swift
-```
-
-Good for you! You have now built your first style dictionary! Moving on, take a look at what we have built. This should have created a build directory and it should look like this:
-```
-├── README.md
-├── config.json
-├── tokens/
-│   ├── color/
-│       ├── base.json
-│       ├── font.json
-│   ├── size/
-│       ├── font.json
-├── build/
-│   ├── android/
-│      ├── font_dimens.xml
-│      ├── colors.xml
-│   ├── compose/
-│      ├── StyleDictionaryColor.kt
-│      ├── StyleDictionarySize.kt
-│   ├── scss/
-│      ├── _variables.scss
-│   ├── ios/
-│      ├── StyleDictionaryColor.h
-│      ├── StyleDictionaryColor.m
-│      ├── StyleDictionarySize.h
-│      ├── StyleDictionarySize.m
-│   ├── ios-swift/
-│      ├── StyleDictionary.swift
-│      ├── StyleDictionaryColor.swift
-│      ├── StyleDictionarySize.swift
-```
-
-If you open `config.json` you will see there are 5 platforms defined: scss, android, compose, ios, and ios-swift. Each platform has a transformGroup, buildPath, and files. The buildPath and files of the platform should match up to the files what were built. The files built should look like these:
-
-**Android**
-```xml
-<!-- font_dimens.xml -->
-<resources>
-  <dimen name="size_font_small">12.00sp</dimen>
-  <dimen name="size_font_medium">16.00sp</dimen>
-  <dimen name="size_font_large">32.00sp</dimen>
-  <dimen name="size_font_base">16.00sp</dimen>
-</resources>
-
-<!-- colors.xml -->
-<resources>
-  <color name="color_base_gray_light">#ffcccccc</color>
-  <color name="color_base_gray_medium">#ff999999</color>
-  <color name="color_base_gray_dark">#ff111111</color>
-  <color name="color_base_red">#ffff0000</color>
-  <color name="color_base_green">#ff00ff00</color>
-  <color name="color_font_base">#ffff0000</color>
-  <color name="color_font_secondary">#ff00ff00</color>
-  <color name="color_font_tertiary">#ffcccccc</color>
-</resources>
-```
-
-**Compose**
-```kotlin
-object StyleDictionaryColor {
-  val colorBaseGrayDark = Color(0xff111111)
-  val colorBaseGrayLight = Color(0xffcccccc)
-  val colorBaseGrayMedium = Color(0xff999999)
-  val colorBaseGreen = Color(0xff00ff00)
-  val colorBaseRed = Color(0xffff0000)
-  val colorFontBase = Color(0xffff0000)
-  val colorFontSecondary = Color(0xff00ff00)
-  val colorFontTertiary = Color(0xffcccccc)
-}
-
-object StyleDictionarySize {
-  /** the base size of the font */
-  val sizeFontBase = 16.00.sp
-  /** the large size of the font */
-  val sizeFontLarge = 32.00.sp
-  /** the medium size of the font */
-  val sizeFontMedium = 16.00.sp
-  /** the small size of the font */
-  val sizeFontSmall = 12.00.sp
-}
-```
-
-**SCSS**
-```scss
-// variables.scss
-$color-base-gray-light: #cccccc;
-$color-base-gray-medium: #999999;
-$color-base-gray-dark: #111111;
-$color-base-red: #ff0000;
-$color-base-green: #00ff00;
-$color-font-base: #ff0000;
-$color-font-secondary: #00ff00;
-$color-font-tertiary: #cccccc;
-$size-font-small: 0.75rem;
-$size-font-medium: 1rem;
-$size-font-large: 2rem;
-$size-font-base: 1rem;
-```
-
-**iOS**
-```objc
-#import "StyleDictionaryColor.h"
-
-@implementation StyleDictionaryColor
-
-+ (UIColor *)color:(StyleDictionaryColorName)colorEnum{
-  return [[self values] objectAtIndex:colorEnum];
-}
-
-+ (NSArray *)values {
-  static NSArray* colorArray;
-  static dispatch_once_t onceToken;
-
-  dispatch_once(&onceToken, ^{
-    colorArray = @[
-[UIColor colorWithRed:0.800f green:0.800f blue:0.800f alpha:1.000f],
-[UIColor colorWithRed:0.600f green:0.600f blue:0.600f alpha:1.000f],
-[UIColor colorWithRed:0.067f green:0.067f blue:0.067f alpha:1.000f],
-[UIColor colorWithRed:1.000f green:0.000f blue:0.000f alpha:1.000f],
-[UIColor colorWithRed:0.000f green:1.000f blue:0.000f alpha:1.000f],
-[UIColor colorWithRed:1.000f green:0.000f blue:0.000f alpha:1.000f],
-[UIColor colorWithRed:0.000f green:1.000f blue:0.000f alpha:1.000f],
-[UIColor colorWithRed:0.800f green:0.800f blue:0.800f alpha:1.000f]
-    ];
-  });
-
-  return colorArray;
-}
-
-@end
-```
-
-Pretty nifty! This shows a few things happening:
-1. The build system does a deep merge of all the token JSON files defined in the `source` attribute of `config.json`. This allows you to split up the token JSON files however you want. There are 2 JSON files with `color` as the top level key, but they get merged properly.
-1. The build system resolves references to other design tokens. `{size.font.medium.value}` gets resolved properly.
-1. The build system handles references to token values in other files as well as you can see in `tokens/color/font.json`.
-
-Now let's make a change and see how that affects things. Open up `tokens/color/base.json` and change `"#111111"` to `"#000000"`. After you make that change, save the file and re-run the build command `style-dictionary build`. Open up the build files and take a look.
-
-**Huzzah!**
-
-Now go forth and create! Take a look at all the built-in [transforms](https://amzn.github.io/style-dictionary/#/transforms?id=pre-defined-transforms) and [formats](https://amzn.github.io/style-dictionary/#/formats?id=pre-defined-formats).
+Use `pnpm lint` to run static analysis on files in the `src` directory. Use `pnpm test` to run specs defined for components using [Vitest](https://vitest.dev/). See [vite.config.ts](./vite.config.ts) and the [testing setup script](./src/testing.ts) for further information about how those tests are configured to run.

package/dist/components/button.d.ts

@@ -1,7 +1,10 @@
 import type { ButtonHTMLAttributes } from "react";
+declare const variants: readonly ["primary", "secondary", "tertiary"];
+declare const states: readonly ["default", "danger", "inverse", "decolor"];
 type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-    state?: "inverse" | "danger" | "decolor";
+    variant?: (typeof variants)[number];
+    state?: (typeof states)[number];
 };
-export default function Button({ className, state, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export { variants, states };
+export default function Button({ className, variant, state, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=button.d.ts.map

package/dist/components/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAEjD,KAAK,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IACzD,KAAK,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;CAC5C,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC3B,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACX,EAAE,WAAW,2CAQb"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,QAAA,MAAM,QAAQ,+CAAgD,CAAC;AAC/D,QAAA,MAAM,MAAM,sDAAuD,CAAC;AAEpE,KAAK,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC3D,OAAO,CAAC,EAAE,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;IACpC,KAAK,CAAC,EAAE,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;CACjC,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;AAE5B,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,SAAS,EACT,OAAmB,EACnB,KAAiB,EACjB,GAAG,KAAK,EACT,EAAE,WAAW,2CAKb"}

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime");function s({className:u,state:t,...e}){return n.jsx("button",{"data-state":t,className:"btn",...e})}exports.Button=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime");function s({className:t,variant:e="primary",state:n="default",...o}){const r=[e,n].map(u=>"btn-"+u).join(" ");return i.jsx("button",{className:`btn ${r} ${t??""}`.trim(),...o})}exports.Button=s;

package/dist/index.js

@@ -1,18 +1,13 @@
-import { jsx as n } from "react/jsx-runtime";
-function e({
-  className: o,
-  state: t,
-  ...a
+import { jsx as e } from "react/jsx-runtime";
+function s({
+  className: t,
+  variant: n = "primary",
+  state: o = "default",
+  ...r
 }) {
-  return /* @__PURE__ */ n(
-    "button",
-    {
-      "data-state": t,
-      className: "btn",
-      ...a
-    }
-  );
+  const m = [n, o].map((a) => "btn-" + a).join(" ");
+  return /* @__PURE__ */ e("button", { className: `btn ${m} ${t ?? ""}`.trim(), ...r });
 }
 export {
-  e as Button
+  s as Button
 };

package/dist/main.css

@@ -1 +1 @@
-@theme{--color-*: initial; --text-*: initial; --spacing-*: initial;}@theme{ --color-gray-1: #f4f4f4; --color-gray-2: #e6e6e6; --color-gray-3: #a3a3a3; --color-gray-4: #777777; --color-gray-5: #454545; --color-blue-1: #ebf4fa; --color-blue-2: #cce3f2; --color-blue-3: #348ec7; --color-blue-4: #2a7aac; --color-blue-5: #246289; --color-indigo-1: #eef2f9; --color-indigo-2: #d2d8ec; --color-indigo-3: #5a71b9; --color-indigo-4: #465da5; --color-indigo-5: #3a4d88; --color-purple-1: #f1eef6; --color-purple-2: #ddd5e9; --color-purple-3: #8164af; --color-purple-4: #6d509b; --color-purple-5: #5a4280; --color-violet-1: #f5eef6; --color-violet-2: #e6d5ea; --color-violet-3: #9a55aa; --color-violet-4: #81488e; --color-violet-5: #693a73; --color-magenta-1: #f6eef4; --color-magenta-2: #ead5e3; --color-magenta-3: #aa558e; --color-magenta-4: #8f4777; --color-magenta-5: #743a61; --color-red-1: #fcede8; --color-red-2: #f8d2c7; --color-red-3: #e45a2f; --color-red-4: #d0451b; --color-red-5: #ab3916; --color-orange-1: #fcf2e8; --color-orange-2: #f8dfc6; --color-orange-3: #e3811c; --color-orange-4: #c86400; --color-orange-5: #9e5000; --color-green-1: #f5f9eb; --color-green-2: #e6f1cd; --color-green-3: #82a82f; --color-green-4: #698826; --color-green-5: #50681d; --color-jade-1: #eef7f1; --color-jade-2: #d4eadd; --color-jade-3: #4e9d6d; --color-jade-4: #40815a; --color-jade-5: #336647; --color-teal-1: #eaf8fb; --color-teal-2: #caeef4; --color-teal-3: #259cb2; --color-teal-4: #1e7e90; --color-teal-5: #17616e; --color-neutral-1: #ffffff; --color-neutral-2: rgba(0, 0, 0, .08); --color-neutral-3: rgba(0, 0, 0, .15); --color-neutral-4: rgba(0, 0, 0, .45); --color-neutral-5: #000000; --color-primary: #2a7aac; --color-primary-hover: #ebf4fa; --color-danger: #d0451b; --color-danger-hover: #ab3916; --color-disabled: #a3a3a3; --text-small: .875rem; --text-medium: 1rem; --text-medium-large: 1.25rem; --text-large: 1.5rem; --text-x-large: 2rem; --text-xx-large: 3rem; --text-xxx-large: 4rem; --text-base: 1rem; --spacing-0: 0; --spacing-1: .25rem; --spacing-2: .5rem; --spacing-3: .75rem; --spacing-4: 1rem; --spacing-5: 1.5rem; --spacing-6: 2rem; --spacing-7: 3rem; --spacing-8: 4rem; --spacing-9: 5rem; --spacing-10: 6rem; --spacing-11: 15rem; --spacing-12: 22.5rem; }@utility btn{@apply font-bold transition border border-transparent text-neutral-1 px-5 py-3 rounded-3xl bg-blue-4 hover:bg-blue-3 data-[state="danger"]:bg-danger data-[state="danger"]:hover:bg-danger-hover data-[state="inverse"]:bg-neutral-1 data-[state="inverse"]:text-blue-3 data-[state="inverse"]:border-blue-3 data-[state="inverse"]:hover:bg-blue-2 data-[state="decolor"]:bg-gray-5 data-[state="decolor"]:hover:bg-gray-4;}
+@theme{--color-*: initial; --text-*: initial; --spacing-*: initial;}@theme{ --color-gray-1: #f4f4f4; --color-gray-2: #e6e6e6; --color-gray-3: #a3a3a3; --color-gray-4: #777777; --color-gray-5: #454545; --color-blue-1: #ebf4fa; --color-blue-2: #cce3f2; --color-blue-3: #348ec7; --color-blue-4: #2a7aac; --color-blue-5: #246289; --color-indigo-1: #eef2f9; --color-indigo-2: #d2d8ec; --color-indigo-3: #5a71b9; --color-indigo-4: #465da5; --color-indigo-5: #3a4d88; --color-purple-1: #f1eef6; --color-purple-2: #ddd5e9; --color-purple-3: #8164af; --color-purple-4: #6d509b; --color-purple-5: #5a4280; --color-violet-1: #f5eef6; --color-violet-2: #e6d5ea; --color-violet-3: #9a55aa; --color-violet-4: #81488e; --color-violet-5: #693a73; --color-magenta-1: #f6eef4; --color-magenta-2: #ead5e3; --color-magenta-3: #aa558e; --color-magenta-4: #8f4777; --color-magenta-5: #743a61; --color-red-1: #fcede8; --color-red-2: #f8d2c7; --color-red-3: #e45a2f; --color-red-4: #d0451b; --color-red-5: #ab3916; --color-orange-1: #fcf2e8; --color-orange-2: #f8dfc6; --color-orange-3: #e3811c; --color-orange-4: #c86400; --color-orange-5: #9e5000; --color-green-1: #f5f9eb; --color-green-2: #e6f1cd; --color-green-3: #82a82f; --color-green-4: #698826; --color-green-5: #50681d; --color-jade-1: #eef7f1; --color-jade-2: #d4eadd; --color-jade-3: #4e9d6d; --color-jade-4: #40815a; --color-jade-5: #336647; --color-teal-1: #eaf8fb; --color-teal-2: #caeef4; --color-teal-3: #259cb2; --color-teal-4: #1e7e90; --color-teal-5: #17616e; --color-neutral-1: #ffffff; --color-neutral-2: rgba(0, 0, 0, .08); --color-neutral-3: rgba(0, 0, 0, .15); --color-neutral-4: rgba(0, 0, 0, .45); --color-neutral-5: #000000; --color-primary: #2a7aac; --color-primary-hover: #ebf4fa; --color-danger: #d0451b; --color-danger-hover: #ab3916; --color-disabled: #a3a3a3; --text-small: .875rem; --text-medium: 1rem; --text-medium-large: 1.25rem; --text-large: 1.5rem; --text-x-large: 2rem; --text-xx-large: 3rem; --text-xxx-large: 4rem; --text-base: 1rem; --spacing-0: 0; --spacing-1: .25rem; --spacing-2: .5rem; --spacing-3: .75rem; --spacing-4: 1rem; --spacing-5: 1.5rem; --spacing-6: 2rem; --spacing-7: 3rem; --spacing-8: 4rem; --spacing-9: 5rem; --spacing-10: 6rem; --spacing-11: 15rem; --spacing-12: 22.5rem; }@layer components{.btn{@apply transition cursor-pointer font-semibold px-[1.375rem] py-[.625rem] rounded-3xl disabled:opacity-50;}.btn-primary{@apply bg-blue-3 border-2 border-blue-3 leading-5 text-neutral-1 hover:border-blue-4 hover:bg-blue-4 disabled:border-blue-3 disabled:bg-blue-3;}.btn-primary.btn-danger{@apply border-red-3 bg-red-3 text-neutral-1 hover:border-red-4 hover:bg-red-4;}.btn-primary.btn-inverse{@apply bg-neutral-1 text-blue-4 hover:bg-blue-1 hover:border-blue-5 hover:text-blue-5;}.btn-primary.btn-decolor{@apply border-gray-5 bg-gray-5 text-neutral-1 hover:border-neutral-5 hover:bg-neutral-5;}.btn-secondary{@apply bg-neutral-1 border-2 border-blue-3 text-blue-4 hover:border-blue-4 hover:bg-blue-1 hover:text-blue-5;}.btn-secondary.btn-danger{@apply border-red-3 text-red-3 hover:border-red-4 hover:text-red-4 hover:bg-red-1;}.btn-secondary.btn-inverse{@apply border-neutral-1 text-neutral-1 bg-indigo-3 hover:bg-indigo-4;}.btn-secondary.btn-decolor{@apply text-gray-5 border-gray-5 hover:text-neutral-5 hover:border-neutral-5 hover:bg-gray-1;}.btn-tertiary{@apply px-0 py-3 text-blue-4 underline hover:text-blue-5;}.btn-tertiary.btn-danger{@apply text-red-4 hover:text-red-5;}.btn-tertiary.btn-inverse{@apply text-neutral-1 hover:text-gray-1;}.btn-tertiary.btn-decolor{@apply text-gray-5 hover:text-neutral-5;}}

package/package.json

@@ -1,22 +1,16 @@
 {
   "name": "@digitalpromise/design",
   "private": false,
-  "version": "1.0.1-next.2",
+  "version": "2.0.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    }
-  },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.1",
+    "@eslint/js": "^9.35.0",
     "@storybook/addon-docs": "^9.1.5",
     "@storybook/addon-links": "^9.1.5",
     "@storybook/react-vite": "^9.1.5",
@@ -31,7 +25,6 @@
     "@vitejs/plugin-react-swc": "^4.0.1",
     "eslint": "^9.35.0",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
     "eslint-plugin-storybook": "^9.1.5",
     "jsdom": "^26.1.0",
     "react": "^19.1.1",
@@ -40,6 +33,7 @@
     "style-dictionary": "^5.0.4",
     "tailwindcss": "^4.1.13",
     "typescript": "^5.9.2",
+    "typescript-eslint": "^8.43.0",
     "vite": "^7.1.5",
     "vitest": "^3.2.4"
   },
@@ -51,12 +45,12 @@
   "scripts": {
     "postinstall": "npm run build",
     "style-dictionary": "style-dictionary build",
-    "postbuild": "style-dictionary build",
     "prestorybook": "style-dictionary build",
     "prebuild-storybook": "style-dictionary build",
+    "prebuild": "style-dictionary build",
     "dev": "vite",
     "build": "vite build && tsc",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint ./src --ext ts,tsx",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",

package/dist/tokens.d.ts

@@ -1,134 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-export default tokens;
-
-declare interface DesignToken {
-  $value?: any;
-  $type?: string;
-  $description?: string;
-  name?: string;
-  themeable?: boolean;
-  attributes?: Record<string, unknown>;
-  [key: string]: any;
-}
-
-declare const tokens: {
-  color: {
-    gray: {
-      "1": DesignToken;
-      "2": DesignToken;
-      "3": DesignToken;
-      "4": DesignToken;
-      "5": DesignToken;
-    };
-    blue: {
-      "1": DesignToken;
-      "2": DesignToken;
-      "3": DesignToken;
-      "4": DesignToken;
-      "5": DesignToken;
-    };
-    indigo: {
-      "1": DesignToken;
-      "2": DesignToken;
-      "3": DesignToken;
-      "4": DesignToken;
-      "5": DesignToken;
-    };
-    purple: {
-      "1": DesignToken;
-      "2": DesignToken;
-      "3": DesignToken;
-      "4": DesignToken;
-      "5": DesignToken;
-    };
-    violet: {
-      "1": DesignToken;
-      "2": DesignToken;
-      "3": DesignToken;
-      "4": DesignToken;
-      "5": DesignToken;
-    };
-    magenta: {
-      "1": DesignToken;
-      "2": DesignToken;
-      "3": DesignToken;
-      "4": DesignToken;
-      "5": DesignToken;
-    };
-    red: {
-      "1": DesignToken;
-      "2": DesignToken;
-      "3": DesignToken;
-      "4": DesignToken;
-      "5": DesignToken;
-    };
-    orange: {
-      "1": DesignToken;
-      "2": DesignToken;
-      "3": DesignToken;
-      "4": DesignToken;
-      "5": DesignToken;
-    };
-    green: {
-      "1": DesignToken;
-      "2": DesignToken;
-      "3": DesignToken;
-      "4": DesignToken;
-      "5": DesignToken;
-    };
-    jade: {
-      "1": DesignToken;
-      "2": DesignToken;
-      "3": DesignToken;
-      "4": DesignToken;
-      "5": DesignToken;
-    };
-    teal: {
-      "1": DesignToken;
-      "2": DesignToken;
-      "3": DesignToken;
-      "4": DesignToken;
-      "5": DesignToken;
-    };
-    neutral: {
-      "1": DesignToken;
-      "2": DesignToken;
-      "3": DesignToken;
-      "4": DesignToken;
-      "5": DesignToken;
-    };
-    primary: DesignToken;
-    "primary-hover": DesignToken;
-    danger: DesignToken;
-    "danger-hover": DesignToken;
-    disabled: DesignToken;
-  };
-  text: {
-    small: DesignToken;
-    medium: DesignToken;
-    "medium-large": DesignToken;
-    large: DesignToken;
-    "x-large": DesignToken;
-    "xx-large": DesignToken;
-    "xxx-large": DesignToken;
-    base: DesignToken;
-  };
-  spacing: {
-    "0": DesignToken;
-    "1": DesignToken;
-    "2": DesignToken;
-    "3": DesignToken;
-    "4": DesignToken;
-    "5": DesignToken;
-    "6": DesignToken;
-    "7": DesignToken;
-    "8": DesignToken;
-    "9": DesignToken;
-    "10": DesignToken;
-    "11": DesignToken;
-    "12": DesignToken;
-  };
-};