@j2-health/design-system 0.1.0

package/dist/tailwind.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind.js","sources":["../tailwind.config.ts"],"sourcesContent":["import type { Config } from 'tailwindcss'\nimport colors from 'tailwindcss/colors.js'\n\n// Export as a preset for consuming apps\nexport const tailwindPreset = {\n  theme: {\n    colors: {\n      transparent: colors.transparent,\n      current: colors.current,\n      white: colors.white,\n      black: colors.black,\n      j2: {\n        // Generic color definitions\n        'blue-1': 'var(--j2-blue-1)',\n        'blue-2': 'var(--j2-blue-2)',\n        'blue-3': 'var(--j2-blue-3)',\n        'blue-4': 'var(--j2-blue-4)',\n        'blue-5': 'var(--j2-blue-5)',\n        'blue-6': 'var(--j2-blue-6)',\n        'blue-7': 'var(--j2-blue-7)',\n        'blue-8': 'var(--j2-blue-8)',\n        'blue-9': 'var(--j2-blue-9)',\n        'blue-10': 'var(--j2-blue-10)',\n        'blue-11': 'var(--j2-blue-11)',\n        'blue-12': 'var(--j2-blue-12)',\n        'gray-1': 'var(--j2-gray-1)',\n        'gray-2': 'var(--j2-gray-2)',\n        'gray-3': 'var(--j2-gray-3)',\n        'gray-4': 'var(--j2-gray-4)',\n        'gray-5': 'var(--j2-gray-5)',\n        'gray-6': 'var(--j2-gray-6)',\n        'gray-7': 'var(--j2-gray-7)',\n        'gray-8': 'var(--j2-gray-8)',\n        'gray-9': 'var(--j2-gray-9)',\n        'gray-10': 'var(--j2-gray-10)',\n        'gray-11': 'var(--j2-gray-11)',\n        'gray-12': 'var(--j2-gray-12)',\n        'green-1': 'var(--j2-green-1)',\n        'green-2': 'var(--j2-green-2)',\n        'green-3': 'var(--j2-green-3)',\n        'green-4': 'var(--j2-green-4)',\n        'green-5': 'var(--j2-green-5)',\n        'green-6': 'var(--j2-green-6)',\n        'green-7': 'var(--j2-green-7)',\n        'green-8': 'var(--j2-green-8)',\n        'green-9': 'var(--j2-green-9)',\n        'green-10': 'var(--j2-green-10)',\n        'green-11': 'var(--j2-green-11)',\n        'green-12': 'var(--j2-green-12)',\n        'gold-1': 'var(--j2-gold-1)',\n        'gold-2': 'var(--j2-gold-2)',\n        'gold-3': 'var(--j2-gold-3)',\n        'gold-4': 'var(--j2-gold-4)',\n        'gold-5': 'var(--j2-gold-5)',\n        'gold-6': 'var(--j2-gold-6)',\n        'gold-7': 'var(--j2-gold-7)',\n        'gold-8': 'var(--j2-gold-8)',\n        'gold-9': 'var(--j2-gold-9)',\n        'gold-10': 'var(--j2-gold-10)',\n        'gold-11': 'var(--j2-gold-11)',\n        'gold-12': 'var(--j2-gold-12)',\n        'red-1': 'var(--j2-red-1)',\n        'red-2': 'var(--j2-red-2)',\n        'red-3': 'var(--j2-red-3)',\n        'red-4': 'var(--j2-red-4)',\n        'red-5': 'var(--j2-red-5)',\n        'red-6': 'var(--j2-red-6)',\n        'red-7': 'var(--j2-red-7)',\n        'red-8': 'var(--j2-red-8)',\n        'red-9': 'var(--j2-red-9)',\n        'red-10': 'var(--j2-red-10)',\n        'red-11': 'var(--j2-red-11)',\n        'red-12': 'var(--j2-red-12)',\n\n        // Primary color tokens\n        primary: 'var(--j2-color-primary)',\n        'primary-hover': 'var(--j2-color-primary-hover)',\n        'primary-active': 'var(--j2-color-primary-active)',\n        'primary-bg': 'var(--j2-color-primary-bg)',\n        'primary-bg-hover': 'var(--j2-color-primary-bg-hover)',\n        'primary-border': 'var(--j2-color-primary-border)',\n        'primary-border-hover': 'var(--j2-color-primary-border-hover)',\n        'primary-text': 'var(--j2-color-primary-text)',\n        'primary-text-hover': 'var(--j2-color-primary-text-hover)',\n        'primary-text-active': 'var(--j2-color-primary-text-active)',\n\n        // Text color tokens\n        text: 'var(--j2-color-text)',\n        'text-secondary': 'var(--j2-color-text-secondary)',\n        'text-tertiary': 'var(--j2-color-text-tertiary)',\n        'text-quaternary': 'var(--j2-color-text-quaternary)',\n        'text-heading': 'var(--j2-color-text-heading)',\n        'text-label': 'var(--j2-color-text-label)',\n        'text-description': 'var(--j2-color-text-description)',\n        'text-disabled': 'var(--j2-color-text-disabled)',\n        'text-placeholder': 'var(--j2-color-text-placeholder)',\n\n        // Border color tokens\n        border: 'var(--j2-color-border)',\n        'border-secondary': 'var(--j2-color-border-secondary)',\n\n        // Background color tokens\n        'bg-layout': 'var(--j2-color-bg-layout)',\n        'bg-elevated': 'var(--j2-color-bg-elevated)',\n        'bg-mask': 'var(--j2-color-bg-mask)',\n        'bg-spotlight': 'var(--j2-color-bg-spotlight)',\n\n        // Status colors\n        success: 'var(--j2-color-success)',\n        'success-bg': 'var(--j2-color-success-bg)',\n        'success-bg-hover': 'var(--j2-color-success-bg-hover)',\n        'success-border': 'var(--j2-color-success-border)',\n        warning: 'var(--j2-color-warning)',\n        'warning-bg': 'var(--j2-color-warning-bg)',\n        'warning-bg-hover': 'var(--j2-color-warning-bg-hover)',\n        'warning-border': 'var(--j2-color-warning-border)',\n        error: 'var(--j2-color-error)',\n        'error-bg': 'var(--j2-color-error-bg)',\n        'error-bg-hover': 'var(--j2-color-error-bg-hover)',\n        'error-border': 'var(--j2-color-error-border)',\n        info: 'var(--j2-color-info)',\n        'info-bg': 'var(--j2-color-info-bg)',\n        'info-bg-hover': 'var(--j2-color-info-bg-hover)',\n        'info-border': 'var(--j2-color-info-border)',\n\n        // Icon colors\n        icon: 'var(--j2-color-icon)',\n        'icon-hover': 'var(--j2-color-icon-hover)',\n      },\n    },\n    extend: {\n      borderColor: {\n        DEFAULT: 'var(--j2-color-border)',\n      },\n      fontWeight: {\n        normal: '400',\n        medium: '500',\n        semibold: '600',\n        bold: '600',\n      },\n      borderWidth: {\n        j2: 'var(--j2-line-width)',\n        'j2-bold': 'var(--j2-line-width-bold)',\n        'j2-focus': 'var(--j2-line-width-focus)',\n      },\n      borderRadius: {\n        j2: 'var(--j2-border-radius)',\n        'j2-lg': 'var(--j2-border-radius-lg)',\n        'j2-sm': 'var(--j2-border-radius-sm)',\n        'j2-xs': 'var(--j2-border-radius-xs)',\n      },\n      fontSize: {\n        'j2-xs': [\n          'var(--j2-font-size-xs)',\n          { lineHeight: 'var(--j2-line-height-xs)' },\n        ] as [string, { lineHeight: string }],\n      },\n      spacing: {\n        j2: 'var(--j2-size)',\n        'j2-xs': 'var(--j2-size-xs)',\n        'j2-sm': 'var(--j2-size-sm)',\n        'j2-md': 'var(--j2-size-md)',\n        'j2-lg': 'var(--j2-size-lg)',\n        'j2-xl': 'var(--j2-size-xl)',\n        'j2-xxl': 'var(--j2-size-xxl)',\n      },\n    },\n  },\n}\n\n// Default export for this project's own Tailwind config\nexport default {\n  ...tailwindPreset,\n  content: ['./src/**/*.{ts,tsx,mdx}'],\n  plugins: [],\n} satisfies Config\n"],"names":[],"mappings":"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"}

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,125 @@
+{
+  "name": "@j2-health/design-system",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "J2 Health shared React component library",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/j2-health/design-system.git"
+  },
+  "license": "UNLICENSED",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/lib.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/lib.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./tailwind": {
+      "types": "./dist/tailwind.config.d.ts",
+      "import": "./dist/tailwind.js",
+      "require": "./dist/tailwind.cjs"
+    },
+    "./style.css": "./dist/style.css",
+    "./stylesheets/index.css": "./src/stylesheets/index.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src/stylesheets"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "prepublishOnly": "npm run build",
+    "lint": "eslint src",
+    "prettier": "prettier --check src",
+    "preview": "vite preview",
+    "start": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test": "NODE_OPTIONS='--no-deprecation' vitest run",
+    "test:dev": "NODE_OPTIONS='--no-deprecation' vitest",
+    "test:coverage": "NODE_OPTIONS='--no-deprecation' vitest run --coverage",
+    "type-check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@ant-design/icons": "^5.6.1",
+    "@highcharts/react": "^4.2.1",
+    "@phosphor-icons/react": "^2.1.7",
+    "antd": "^5.21.2",
+    "classnames": "^2.5.1",
+    "formik": "^2.4.6",
+    "formik-antd": "^3.0.0-beta.9",
+    "highcharts": "^12.5.0",
+    "lodash": "^4.17.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwindcss": "^3.4.14",
+    "yup": "^1.4.0"
+  },
+  "devDependencies": {
+    "@ant-design/icons": "^5.6.1",
+    "@chromatic-com/storybook": "^5.0.0",
+    "@eslint/js": "^9.11.1",
+    "@highcharts/react": "^4.2.1",
+    "@phosphor-icons/react": "^2.1.7",
+    "@storybook/addon-docs": "^10.3.0",
+    "@storybook/addon-links": "^10.3.0",
+    "@storybook/addon-onboarding": "^10.3.0",
+    "@storybook/react-vite": "^10.3.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.0.1",
+    "@types/lodash": "^4.17.14",
+    "@types/react": "^18.3.10",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.2",
+    "@vitest/coverage-v8": "^4.0.18",
+    "antd": "^5.21.2",
+    "autoprefixer": "^10.4.20",
+    "classnames": "^2.5.1",
+    "eslint": "^9.39.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "eslint-plugin-storybook": "^10.3.0",
+    "formik": "^2.4.6",
+    "formik-antd": "^3.0.0-beta.9",
+    "globals": "^15.9.0",
+    "happy-dom": "^20.9.0",
+    "highcharts": "^12.5.0",
+    "lodash": "^4.18.1",
+    "postcss": "^8.5.18",
+    "prettier": "^3.3.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "storybook": "^10.3.5",
+    "tailwindcss": "^3.4.14",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.15.0",
+    "vite": "^6.4.3",
+    "vite-plugin-dts": "^5.0.3",
+    "vite-plugin-svgr": "^4.2.0",
+    "vitest": "^4.0.18",
+    "yup": "^1.4.0"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "^4.24.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  }
+}

package/src/stylesheets/index.css

@@ -0,0 +1,327 @@
+@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --j2-blue-1: #fcfdff;
+  --j2-blue-2: #f6f9fe;
+  --j2-blue-3: #edf2fd;
+  --j2-blue-4: #e1eaff;
+  --j2-blue-5: #d2e0fd;
+  --j2-blue-6: #c1d2f8;
+  --j2-blue-7: #aac0ef;
+  --j2-blue-8: #8ba8e6;
+  --j2-blue-9: #253761;
+  --j2-blue-10: #364975;
+  --j2-blue-11: #5670aa;
+  --j2-blue-12: #20315b;
+
+  --j2-gray-1: #fdfdfb;
+  --j2-gray-2: #f9f9f7;
+  --j2-gray-3: #f0f0ed;
+  --j2-gray-4: #e9e9e4;
+  --j2-gray-5: #e2e2dc;
+  --j2-gray-6: #dadad2;
+  --j2-gray-7: #cfcfc8;
+  --j2-gray-8: #bcbcb4;
+  --j2-gray-9: #8d8d86;
+  --j2-gray-10: #82827c;
+  --j2-gray-11: #63635d;
+  --j2-gray-12: #20201b;
+
+  --j2-green-1: #fafefb;
+  --j2-green-2: #f5fbf5;
+  --j2-green-3: #e7f7e7;
+  --j2-green-4: #d7f2d8;
+  --j2-green-5: #c5eac6;
+  --j2-green-6: #ade0af;
+  --j2-green-7: #8dd191;
+  --j2-green-8: #6bb971;
+  --j2-green-9: #57a45e;
+  --j2-green-10: #4b9852;
+  --j2-green-11: #307e3a;
+  --j2-green-12: #1d3d20;
+
+  --j2-gold-1: #fefdfa;
+  --j2-gold-2: #fffae6;
+  --j2-gold-3: #fff2be;
+  --j2-gold-4: #ffe9a4;
+  --j2-gold-5: #ffdd81;
+  --j2-gold-6: #ffce57;
+  --j2-gold-7: #f3be4e;
+  --j2-gold-8: #e2a600;
+  --j2-gold-9: #ffcc39;
+  --j2-gold-10: #ffbf00;
+  --j2-gold-11: #9e6e00;
+  --j2-gold-12: #493918;
+
+  --j2-red-1: #fffcfc;
+  --j2-red-2: #fff7f7;
+  --j2-red-3: #feebeb;
+  --j2-red-4: #ffdcdc;
+  --j2-red-5: #ffcece;
+  --j2-red-6: #fbbebe;
+  --j2-red-7: #f2aaab;
+  --j2-red-8: #e89092;
+  --j2-red-9: #bf6c6f;
+  --j2-red-10: #b26063;
+  --j2-red-11: #a9585b;
+  --j2-red-12: #631a22;
+
+  --j2-color-text: var(--j2-gray-12);
+  --j2-color-text-secondary: var(--j2-gray-11);
+  --j2-color-text-tertiary: var(--j2-gray-11);
+  --j2-color-text-quaternary: var(--j2-gray-10);
+  --j2-color-text-heading: var(--j2-gray-12);
+  --j2-color-text-label: var(--j2-gray-11);
+  --j2-color-text-description: var(--j2-gray-11);
+  --j2-color-text-disabled: var(--j2-gray-10);
+  --j2-color-text-placeholder: var(--j2-gray-10);
+  --j2-color-icon: var(--j2-gray-11);
+  --j2-color-icon-hover: var(--j2-gray-12);
+  --j2-color-bg-layout: var(--j2-gray-2);
+  --j2-color-border: var(--j2-gray-7);
+  --j2-color-border-secondary: var(--j2-gray-6);
+  --j2-color-primary: var(--j2-blue-9);
+  --j2-color-success: var(--j2-green-9);
+  --j2-color-warning: var(--j2-gold-9);
+  --j2-color-info: var(--j2-blue-9);
+  --j2-color-error: var(--j2-red-9);
+  --j2-color-link: var(--j2-blue-9);
+  --j2-color-error-bg: var(--j2-red-2);
+  --j2-color-error-bg-hover: var(--j2-red-3);
+  --j2-color-error-border: var(--j2-red-7);
+  --j2-color-error-border-hover: var(--j2-red-8);
+  --j2-color-error-hover: var(--j2-red-10);
+  --j2-color-error-active: var(--j2-red-10);
+  --j2-color-error-text-hover: var(--j2-red-12);
+  --j2-color-error-text: var(--j2-red-11);
+  --j2-color-error-text-active: var(--j2-red-12);
+  --j2-color-link-hover: var(--j2-blue-10);
+  --j2-color-info-bg: var(--j2-blue-1);
+  --j2-color-info-bg-hover: var(--j2-blue-4);
+  --j2-color-info-border: var(--j2-blue-7);
+  --j2-color-info-border-hover: var(--j2-blue-8);
+  --j2-color-info-hover: var(--j2-blue-10);
+  --j2-color-info-active: var(--j2-blue-10);
+  --j2-color-info-text-hover: var(--j2-blue-11);
+  --j2-color-info-text: var(--j2-blue-12);
+  --j2-color-info-text-active: var(--j2-blue-11);
+  --j2-color-link-active: var(--j2-blue-10);
+  --j2-color-primary-bg: var(--j2-blue-1);
+  --j2-color-primary-bg-hover: var(--j2-blue-4);
+  --j2-color-primary-border: var(--j2-blue-7);
+  --j2-color-primary-border-hover: var(--j2-blue-8);
+  --j2-color-primary-hover: var(--j2-blue-10);
+  --j2-color-primary-active: var(--j2-blue-10);
+  --j2-color-primary-text-hover: var(--j2-blue-11);
+  --j2-color-primary-text: var(--j2-blue-12);
+  --j2-color-primary-text-active: var(--j2-blue-11);
+  --j2-color-success-bg: var(--j2-green-2);
+  --j2-color-success-bg-hover: var(--j2-green-3);
+  --j2-color-success-border: var(--j2-green-7);
+  --j2-color-success-border-hover: var(--j2-green-8);
+  --j2-color-success-hover: var(--j2-green-10);
+  --j2-color-success-active: var(--j2-green-10);
+  --j2-color-success-text-hover: var(--j2-green-12);
+  --j2-color-success-text: var(--j2-green-11);
+  --j2-color-success-text-active: var(--j2-green-12);
+  --j2-color-warning-bg: var(--j2-gold-2);
+  --j2-color-warning-bg-hover: var(--j2-gold-3);
+  --j2-color-warning-border: var(--j2-gold-7);
+  --j2-color-warning-border-hover: var(--j2-gold-8);
+  --j2-color-warning-hover: var(--j2-gold-10);
+  --j2-color-warning-active: var(--j2-gold-10);
+  --j2-color-warning-text-hover: var(--j2-gold-12);
+  --j2-color-warning-text: var(--j2-gold-11);
+  --j2-color-warning-text-active: var(--j2-gold-12);
+  --j2-control-item-bg-active: var(--j2-blue-1);
+  --j2-control-item-bg-active-hover: var(--j2-blue-4);
+  --j2-color-fill: rgba(0, 0, 0, 0.15);
+  --j2-color-fill-secondary: rgba(0, 0, 0, 0.06);
+  --j2-color-fill-tertiary: rgba(0, 0, 0, 0.04);
+  --j2-color-fill-quaternary: rgba(0, 0, 0, 0.02);
+  --j2-color-fill-content: rgba(0, 0, 0, 0.06);
+  --j2-color-fill-content-hover: rgba(0, 0, 0, 0.15);
+  --j2-color-bg-mask: rgba(32, 32, 27, 0.45);
+  --j2-color-bg-spotlight: rgba(32, 32, 27, 0.85);
+  --j2-color-bg-container-disabled: rgba(0, 0, 0, 0.04);
+  --j2-color-bg-text-active: rgba(0, 0, 0, 0.15);
+  --j2-color-bg-text-hover: rgba(0, 0, 0, 0.06);
+  --j2-color-fill-alter: rgba(0, 0, 0, 0.02);
+  --j2-color-split: rgba(0, 0, 0, 0.06);
+  --j2-color-error-outline: rgba(255, 38, 6, 0.06);
+  --j2-color-warning-outline: rgba(255, 215, 5, 0.1);
+  --j2-control-item-bg-active-disabled: rgba(0, 0, 0, 0.15);
+  --j2-control-item-bg-hover: rgba(0, 0, 0, 0.04);
+  --j2-control-outline: rgba(37, 55, 97, 0.1);
+  --j2-control-tmp-outline: rgba(0, 0, 0, 0.02);
+
+  --j2-font-family: Rubik, Roboto, sans-serif;
+  --j2-font-family-code: Rubik, Roboto, sans-serif;
+  --j2-font-size: 14px;
+  --j2-font-size-lg: 16px;
+  --j2-font-size-sm: 12px;
+  --j2-font-size-xs: 10px;
+  --j2-font-size-xl: 20px;
+  --j2-font-size-heading-1: 38px;
+  --j2-font-size-heading-2: 30px;
+  --j2-font-size-heading-3: 24px;
+  --j2-font-size-heading-4: 20px;
+  --j2-font-size-heading-5: 16px;
+  --j2-line-height: 1.5714285714285714;
+  --j2-line-height-xs: 1.6;
+  --j2-line-height-heading-1: 1.2105263157894737;
+  --j2-line-height-heading-2: 1.2666666666666666;
+  --j2-line-height-heading-3: 1.3333333333333333;
+  --j2-line-height-heading-4: 1.4;
+  --j2-line-height-heading-5: 1.5;
+  --j2-line-height-lg: 1.5;
+  --j2-line-height-sm: 1.6666666666666667;
+  --j2-font-size-icon: 12px;
+  --j2-font-weight-normal: 400;
+  --j2-font-weight-strong: 600;
+
+  --j2-border-radius: 8px;
+  --j2-border-radius-lg: 10px;
+  --j2-border-radius-sm: 6px;
+  --j2-border-radius-xs: 2px;
+
+  --j2-size-step: 4px;
+  --j2-size-unit: 4px;
+  --j2-control-interactive-size: 16px;
+  --j2-size: 16px;
+  --j2-size-lg: 24px;
+  --j2-size-md: 20px;
+  --j2-size-ms: 16px;
+  --j2-size-sm: 12px;
+  --j2-size-xl: 32px;
+  --j2-size-xs: 8px;
+  --j2-size-xxl: 48px;
+  --j2-control-height: 32px;
+  --j2-size-xxs: 4px;
+  --j2-control-height-lg: 40px;
+  --j2-control-height-sm: 24px;
+  --j2-control-height-xs: 16px;
+  --j2-line-width: 1px;
+  --j2-line-width-bold: 2px;
+  --j2-line-width-focus: 4px;
+  --j2-control-outline-width: 2px;
+  --j2-screen-lg: 992px;
+  --j2-screen-lg-max: 1199px;
+  --j2-screen-lg-min: 992px;
+  --j2-screen-md: 768px;
+  --j2-screen-md-max: 991px;
+  --j2-screen-md-min: 768px;
+  --j2-screen-sm: 576px;
+  --j2-screen-sm-max: 767px;
+  --j2-screen-sm-min: 576px;
+  --j2-screen-xl: 1200px;
+  --j2-screen-xl-max: 1599px;
+  --j2-screen-xl-min: 1200px;
+  --j2-screen-xs: 480px;
+  --j2-screen-xs-max: 575px;
+  --j2-screen-xs-min: 480px;
+  --j2-screen-xxl: 1600px;
+  --j2-screen-xxl-min: 1600px;
+  --j2-size-popup-arrow: 16px;
+  --j2-margin: 16px;
+  --j2-margin-lg: 24px;
+  --j2-margin-md: 20px;
+  --j2-margin-sm: 12px;
+  --j2-margin-xl: 32px;
+  --j2-margin-xs: 8px;
+  --j2-margin-xxl: 48px;
+  --j2-margin-xxs: 4px;
+  --j2-padding: 16px;
+  --j2-padding-lg: 24px;
+  --j2-padding-md: 20px;
+  --j2-padding-sm: 12px;
+  --j2-padding-xl: 32px;
+  --j2-padding-xs: 8px;
+  --j2-padding-xxs: 4px;
+  --j2-padding-content-horizontal: 16px;
+  --j2-padding-content-horizontal-lg: 24px;
+  --j2-padding-content-horizontal-sm: 16px;
+  --j2-padding-content-vertical: 12px;
+  --j2-padding-content-vertical-lg: 16px;
+  --j2-padding-content-vertical-sm: 8px;
+  --j2-control-padding-horizontal: 12px;
+  --j2-control-padding-horizontal-sm: 8px;
+
+  --j2-color-bg-elevated: #ffffff;
+
+  --j2-box-shadow: var(--ant-box-shadow);
+  --j2-box-shadow-secondary: var(--ant-box-shadow-secondary);
+  --j2-box-shadow-tertiary: var(--ant-box-shadow-tertiary);
+
+  font-family: var(--j2-font-family);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  font-family: var(--j2-font-family);
+}
+
+@layer base {
+  h1 {
+    font-family: var(--j2-font-family);
+    font-size: var(--j2-font-size-heading-1);
+    font-weight: var(--j2-font-weight-strong);
+    line-height: var(--j2-line-height-heading-1);
+    margin: 0;
+    color: var(--j2-color-primary);
+  }
+
+  h2 {
+    font-family: var(--j2-font-family);
+    font-size: var(--j2-font-size-heading-2);
+    font-weight: var(--j2-font-weight-strong);
+    line-height: var(--j2-line-height-heading-2);
+    color: var(--j2-color-primary);
+    margin: 0;
+  }
+
+  h3 {
+    font-family: var(--j2-font-family);
+    font-size: var(--j2-font-size-heading-3);
+    font-weight: var(--j2-font-weight-strong);
+    line-height: var(--j2-line-height-heading-3);
+    color: var(--j2-color-primary);
+    margin: 0;
+  }
+
+  h4 {
+    font-family: var(--j2-font-family);
+    font-size: var(--j2-font-size-heading-4);
+    font-weight: var(--j2-font-weight-strong);
+    line-height: var(--j2-line-height-heading-4);
+    color: var(--j2-color-primary);
+    margin: 0;
+  }
+
+  h5 {
+    font-family: var(--j2-font-family);
+    font-size: var(--j2-font-size-heading-5);
+    font-weight: 500;
+    line-height: var(--j2-line-height-heading-5);
+    color: var(--j2-color-primary);
+    margin: 0;
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}