@dreamcommerce/aurora 2.27.1 → 3.0.0-2

package/build/esm/packages/aurora/src/utilities/fuzzy_search/fuzzy_search.js

@@ -1,69 +1,66 @@
-import { toConsumableArray as _toConsumableArray } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import union_1 from '../../../../../external/lodash/union.js';
-
-/**
- * searches within array of objects by given key, returns filtered array of objects using fuzzy algorithm
- * @param {string} searchQuery - the phrase by which it searches
- * @param {Array<Object>} arrayToFilter - array which will be searched
- * @param {string} key - key of object within arrayToFilter where search should be used
- * @example
- * // returns [{id: 1, text: 'polish'}, {id: 2, text: 'portugal'}]
- * fuzzySearch('pol', [
- *  {id: 1, text: 'polish'},
- *  {id: 2, text: 'portugal'},
- *  {id: 3, text: 'english'}
- * ], 'text')
- * @returns {Array} - filtered array
+import { union } from 'lodash';
+/**
+ * searches within array of objects by given key, returns filtered array of objects using fuzzy algorithm
+ * @param {string} searchQuery - the phrase by which it searches
+ * @param {Array<Object>} arrayToFilter - array which will be searched
+ * @param {string} key - key of object within arrayToFilter where search should be used
+ * @example
+ * // returns [{id: 1, text: 'polish'}, {id: 2, text: 'portugal'}]
+ * fuzzySearch('pol', [
+ *  {id: 1, text: 'polish'},
+ *  {id: 2, text: 'portugal'},
+ *  {id: 3, text: 'english'}
+ * ], 'text')
+ * @returns {Array} - filtered array
  */
-
-function fuzzySearch(searchQuery, arrayToFilter, key) {
-  if (searchQuery !== '' && searchQuery.search(/[-[\]/{}()*+?.\\^$|]/g) === -1) {
-    var exactSearch = new RegExp('^' + searchQuery + '$', 'i');
-    var firstSearch = new RegExp('^' + searchQuery, 'i');
-    var looseSearch = new RegExp('.*' + searchQuery + '.*', 'i');
-
-    var _fuzzySearch = new RegExp('(^' + searchQuery + ')|(' + searchQuery + ')|(' + searchQuery.replace(/\s+/g, '').split('').join('.*') + ')', 'i');
-
-    var exact = [];
-    var first = [];
-    var loose = [];
-    var fuzzy = [];
-    arrayToFilter.forEach(function (option) {
-      var searchBy = option[key];
-
-      if (typeof searchBy !== 'string') {
-        throw new Error('Cannot filter by value which is not a string');
-      }
-
-      if ((option === null || option === void 0 ? void 0 : option.isHeader) !== true) {
-        var textWithoutPolishSigns = searchBy.replace(/ę/gi, 'e').replace(/ó/gi, 'o').replace(/ą/gi, 'a').replace(/ś/gi, 's').replace(/ł/gi, 'l').replace(/ż/gi, 'z').replace(/ź/gi, 'z').replace(/ć/gi, 'c').replace(/ń/gi, 'n');
-
-        if (searchBy.match(exactSearch) || textWithoutPolishSigns.match(exactSearch)) {
-          exact.push(option);
-          return;
-        }
-
-        if (searchBy.match(firstSearch) || textWithoutPolishSigns.match(firstSearch)) {
-          first.push(option);
-          return;
-        }
-
-        if (searchBy.match(looseSearch) || textWithoutPolishSigns.match(looseSearch)) {
-          loose.push(option);
-          return;
-        }
-
-        if (searchBy.match(_fuzzySearch) || textWithoutPolishSigns.match(_fuzzySearch)) {
-          fuzzy.push(option);
-          return;
-        }
-      }
-    });
-    return union_1(exact, first, loose, fuzzy);
-  } else {
-    return _toConsumableArray(arrayToFilter);
-  }
+export function fuzzySearch(searchQuery, arrayToFilter, key) {
+    if (searchQuery !== '' && searchQuery.search(/[-[\]/{}()*+?.\\^$|]/g) === -1) {
+        const exactSearch = new RegExp('^' + searchQuery + '$', 'i');
+        const firstSearch = new RegExp('^' + searchQuery, 'i');
+        const looseSearch = new RegExp('.*' + searchQuery + '.*', 'i');
+        const fuzzySearch = new RegExp('(^' + searchQuery + ')|(' + searchQuery + ')|(' + searchQuery.replace(/\s+/g, '').split('').join('.*') + ')', 'i');
+        const exact = [];
+        const first = [];
+        const loose = [];
+        const fuzzy = [];
+        arrayToFilter.forEach((option) => {
+            const searchBy = option[key];
+            if (typeof searchBy !== 'string') {
+                throw new Error('Cannot filter by value which is not a string');
+            }
+            if (option?.isHeader !== true) {
+                const textWithoutPolishSigns = searchBy
+                    .replace(/ę/gi, 'e')
+                    .replace(/ó/gi, 'o')
+                    .replace(/ą/gi, 'a')
+                    .replace(/ś/gi, 's')
+                    .replace(/ł/gi, 'l')
+                    .replace(/ż/gi, 'z')
+                    .replace(/ź/gi, 'z')
+                    .replace(/ć/gi, 'c')
+                    .replace(/ń/gi, 'n');
+                if (searchBy.match(exactSearch) || textWithoutPolishSigns.match(exactSearch)) {
+                    exact.push(option);
+                    return;
+                }
+                if (searchBy.match(firstSearch) || textWithoutPolishSigns.match(firstSearch)) {
+                    first.push(option);
+                    return;
+                }
+                if (searchBy.match(looseSearch) || textWithoutPolishSigns.match(looseSearch)) {
+                    loose.push(option);
+                    return;
+                }
+                if (searchBy.match(fuzzySearch) || textWithoutPolishSigns.match(fuzzySearch)) {
+                    fuzzy.push(option);
+                    return;
+                }
+            }
+        });
+        return union(exact, first, loose, fuzzy);
+    }
+    else {
+        return [...arrayToFilter];
+    }
 }
-
-export { fuzzySearch };
-//# sourceMappingURL=fuzzy_search.js.map
+//# sourceMappingURL=fuzzy_search.js.map

package/build/esm/packages/aurora/src/utilities/fuzzy_search/fuzzy_search.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,oBAAoB,yCAA6C;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":"fuzzy_search.js","sourceRoot":"","sources":["../../../../../../../src/utilities/fuzzy_search/fuzzy_search.ts"],"names":[],"mappings":"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"}

package/build/esm/packages/aurora/src/utilities/translation/translation_types.js

@@ -0,0 +1,2 @@
+import 'react';
+//# sourceMappingURL=translation_types.js.map

package/build/esm/packages/aurora/src/utilities/translation/translation_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translation_types.js","sourceRoot":"","sources":["../../../../../../../src/utilities/translation/translation_types.ts"],"names":[],"mappings":"AAAA,OAAkB,OAAO,CAAC"}

package/build/esm/packages/aurora/src/utilities/translation/with_translation.d.ts

@@ -1,3 +1,3 @@
-import { TWithTranslation } from "./types";
+import { TWithTranslation } from "./translation_types";
 declare const withTranslation: TWithTranslation;
 export default withTranslation;

package/build/esm/packages/aurora/src/utilities/translation/with_translation.js

@@ -1,15 +1,10 @@
 import React from 'react';
-import { I18nextProvider } from '../../../../../external/react-i18next/dist/es/I18nextProvider.js';
-import i18n from '../../i18n.js';
-import { objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
-
-var withTranslation = function withTranslation(ChildComponent) {
-  return function (props) {
-    return /*#__PURE__*/React.createElement(I18nextProvider, {
-      i18n: i18n
-    }, /*#__PURE__*/React.createElement(ChildComponent, _objectSpread2({}, props)));
-  };
+import { I18nextProvider } from 'react-i18next';
+import '@auroraUtilities/translation/translation_types';
+import i18n from '../../i18n';
+const withTranslation = (ChildComponent) => (props) => {
+    return (React.createElement(I18nextProvider, { i18n: i18n },
+        React.createElement(ChildComponent, { ...props })));
 };
-
 export default withTranslation;
-//# sourceMappingURL=with_translation.js.map
+//# sourceMappingURL=with_translation.js.map

package/build/esm/packages/aurora/src/utilities/translation/with_translation.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,gCAAgC,kEAAsE;AACtG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":"with_translation.js","sourceRoot":"","sources":["../../../../../../../src/utilities/translation/with_translation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAiC,gDAAgD,CAAC;AAClF,OAAO,IAAI,MAAM,YAAY,CAAC;AAE9B,MAAM,eAAe,GAAqB,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE;IACpE,OAAO,CACH,oBAAC,eAAe,IAAC,IAAI,EAAE,IAAI;QACvB,oBAAC,cAAc,OAAK,KAAK,GAAI,CACf,CACrB,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/build/index.css

@@ -0,0 +1,159 @@
+@layer base {
+    :root {
+        --font-sans: 'Plus Jakarta Sans';
+        --base-font-size: 16;
+        --base-line-height: 26;
+
+        --font-weight-normal: 400;
+        --font-weight-medium: 500;
+        --font-weight-semibold: 600;
+        --font-weight-bold: 700;
+        --font-weight-extrabold: 800;
+
+        --font-size-xs: calc((var(--base-font-size) - 4) / var(--base-font-size) * 1rem);  /* 12 */
+        --font-size-s: calc((var(--base-font-size) - 2) / var(--base-font-size) * 1rem);  /* 14 */
+        --font-size-base: calc(var(--base-font-size) / var(--base-font-size) * 1rem);  /* 16 */
+        --font-size-lg: calc((var(--base-font-size) + 2) / var(--base-font-size) * 1rem);  /* 18 */
+        --font-size-xl: calc((var(--base-font-size) + 4) / var(--base-font-size) * 1rem);  /* 20 */
+        --font-size-2xl: calc((var(--base-font-size) + 8) / var(--base-font-size) * 1rem);  /* 24 */
+        --font-size-3xl: calc((var(--base-font-size) + 16) / var(--base-font-size) * 1rem);  /* 32 */
+        --font-size-4xl: calc((var(--base-font-size) + 20) / var(--base-font-size) * 1rem);  /* 36 */
+        --font-size-5xl: calc((var(--base-font-size) + 24) / var(--base-font-size) * 1rem);  /* 40 */
+        --font-size-6xl: calc((var(--base-font-size) + 32) / var(--base-font-size) * 1rem);  /* 48 */
+
+        --line-height-xs: calc((var(--base-line-height) - 6) / var(--base-font-size) * 1rem); /* 20 */
+        --line-height-s: calc((var(--base-line-height) - 2) / var(--base-font-size) * 1rem); /* 24 */
+        --line-height-base: calc(var(--base-line-height) / var(--base-font-size) * 1rem); /* 26 */
+        --line-height-lg: calc((var(--base-line-height) + 2) / var(--base-font-size) * 1rem); /* 28 */
+        --line-height-xl: calc((var(--base-line-height) + 2) / var(--base-font-size) * 1rem); /* 28 */
+        --line-height-2xl: calc((var(--base-line-height) + 6) / var(--base-font-size) * 1rem); /* 32 */
+        --line-height-3xl: calc((var(--base-line-height) + 16) / var(--base-font-size) * 1rem); /* 42 */
+        --line-height-4xl: calc((var(--base-line-height) + 20) / var(--base-font-size) * 1rem); /* 46 */
+        --line-height-5xl: calc((var(--base-line-height) + 24) / var(--base-font-size) * 1rem); /* 50 */
+        --line-height-6xl: calc((var(--base-line-height) + 30) / var(--base-font-size) * 1rem); /* 56 */
+
+        --brand-50: #F0F6FF;
+        --brand-500: #002FFF;
+        --brand-700: #0925A1;
+        --brand-800: #02047A;
+        --brand-900: #000A38;
+
+        --brand-helpful-500: #FFEA00;
+
+        --neutral-0: #FFFFFF;
+        --neutral-50: #F5F6FA;
+        --neutral-100: #F0F1F5;
+        --neutral-200: #E6E7EB;
+        --neutral-500: #CBCDD1;
+        --neutral-600: #9799A2;
+        --neutral-700: #72747E;
+        --neutral-800: #484950;
+        --neutral-900: #03081C;
+
+        --green-50: #EBFAF3;
+        --green-100: #CEEBDD;
+        --green-300: #A7D1BD;
+        --green-500: #24B26F;
+        --green-600: #1E9C61;
+        --green-700: #147346;
+        --green-900: #054024;
+
+        --red-50: #FAEBEC;
+        --red-100: #EBCED0;
+        --red-300: #D1A7A9;
+        --red-500: #E23F46;
+        --red-600: #9C1E24;
+        --red-700: #731418;
+        --red-900: #400508;
+
+        --yellow-50: #FAF6EB;
+        --yellow-100: #EBE4CE;
+        --yellow-300: #D1C7A7;
+        --yellow-500: #F2C533;
+        --yellow-600: #9C7F1E;
+        --yellow-700: #735D14;
+        --yellow-900: #403205;
+
+        --blue-50: #EBF4FA;
+        --blue-100: #CEDFEB;
+        --blue-300: #A7C0D1;
+        --blue-500: #33A2F2;
+        --blue-600: #1E689C;
+        --blue-700: #185480;
+        --blue-900: #052740;
+
+        --light-transparent-5: #FFFFFF0D;
+        --light-transparent-10: #FFFFFF1A;
+        --light-transparent-15: #FFFFFF26;
+        --light-transparent-20: #FFFFFF33;
+        --light-transparent-50: #FFFFFF80;
+        --light-transparent-70: #FFFFFFB2;
+
+        --dark-transparent-5: #03081C0D;
+        --dark-transparent-10: #03081C1A;
+        --dark-transparent-15: #03081C26;
+        --dark-transparent-20: #03081C33;
+        --dark-transparent-70: #03081CB2;
+
+        --brand-transparent-10: #002FFF1A;
+        --brand-transparent-20: #002FFF33;
+        --brand-transparent-50: #002FFF80;
+
+        --base-border-radius: var(--base-font-size);
+        --border-radius-0: calc((var(--base-line-height) - 16) / var(--base-font-size) * 1rem); /* 0 */
+        --border-radius-2: calc((var(--base-line-height) - 14) / var(--base-font-size) * 1rem); /* 2 */
+        --border-radius-4: calc((var(--base-line-height) - 12) / var(--base-font-size) * 1rem); /* 4 */
+        --border-radius-6: calc((var(--base-line-height) - 10) / var(--base-font-size) * 1rem); /* 6 */
+        --border-radius-8: calc((var(--base-line-height) - 8) / var(--base-font-size) * 1rem); /* 8 */
+        --border-radius-12: calc((var(--base-line-height) - 4) / var(--base-font-size) * 1rem); /* 12 */
+        --border-radius-16: calc(var(--base-line-height) / var(--base-font-size) * 1rem); /* 16 */
+        --border-radius-20: calc((var(--base-line-height) + 4) / var(--base-font-size) * 1rem); /* 20 */
+        --border-radius-24: calc((var(--base-line-height) + 8) / var(--base-font-size) * 1rem); /* 24 */
+        --border-radius-32: calc((var(--base-line-height) + 16) / var(--base-font-size) * 1rem); /* 32 */
+        --border-radius-40: calc((var(--base-line-height) + 24) / var(--base-font-size) * 1rem); /* 40 */
+        --border-radius-full: 9999px;
+
+        --box-shadow-s: "0px 1px 6px -1px #03081C14";
+        --box-shadow-m: "0px 8px 16px -4px #03081C0A";
+        --box-shadow-l: "0px 20px 20px -4px #03081C0A";
+        --box-shadow-xl: " 32px 48px -10px #03081C0F";
+        --box-shadow-s-inverse: "0px -1px 6px -1px #03081C14";
+        --box-shadow-m-inverse: "0px -8px 16px -4px #03081C0A";
+        --box-shadow-l-inverse: "0px -20px 20px -4px #03081C0A";
+    }
+
+    /* latin */
+    @font-face {
+        font-family: 'Plus Jakarta Sans';
+        font-style: normal;
+        font-weight: 200 800;
+        font-display: swap;
+        src: url(https://fonts.gstatic.com/s/plusjakartasans/v8/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.woff2) format('woff2');
+        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+    }
+
+    /* latin-ext */
+    @font-face {
+        font-family: 'Plus Jakarta Sans';
+        font-style: normal;
+        font-weight: 200 800;
+        font-display: swap;
+        src: url(https://fonts.gstatic.com/s/plusjakartasans/v8/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yyygA.woff2) format('woff2');
+        unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+    }
+
+    *,
+    *::before,
+    *::after {
+        box-sizing: border-box;
+    }
+
+    html {
+        font-size: calc((100 * var(--base-font-size)) / 16);
+    }
+
+    body {
+        font-family: "Plus Jakarta Sans", sans-serif;
+        font-size: calc(var(--base-font-size) * 1px);
+    }
+}

package/build/tailwind.config.js

@@ -0,0 +1,306 @@
+const { fontFamily } = require('tailwindcss/defaultTheme');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    darkMode: ['selector', '[data-mode="dark"]'],
+    //TODO te style ze stories to trzeba jakos dnamicznie wrzucic w webpacku
+    content: ['./src/**/*.{js,jsx,ts,tsx}', './stories/**/*.{js,jsx,ts,tsx}'],
+    theme: {
+        colors: {
+            brand: {
+                50: 'var(--brand-50)',
+                500: 'var(--brand-500)',
+                700: 'var(--brand-700)',
+                800: 'var(--brand-800)',
+                900: 'var(--brand-900)'
+            },
+            'brand-helpful': {
+                500: 'var(--brand-helpful-500)'
+            },
+            neutral: {
+                0: 'var(--neutral-0)',
+                50: 'var(--neutral-50)',
+                100: 'var(--neutral-100)',
+                200: 'var(--neutral-200)',
+                500: 'var(--neutral-500)',
+                600: 'var(--neutral-600)',
+                700: 'var(--neutral-700)',
+                800: 'var(--neutral-800)',
+                900: 'var(--neutral-900)'
+            },
+            green: {
+                50: 'var(--green-50)',
+                100: 'var(--green-100)',
+                300: 'var(--green-300)',
+                500: 'var(--green-500)',
+                600: 'var(--green-600)',
+                700: 'var(--green-700)',
+                900: 'var(--green-900)'
+            },
+            red: {
+                50: 'var(--red-50)',
+                100: 'var(--red-100)',
+                300: 'var(--red-300)',
+                500: 'var(--red-500)',
+                600: 'var(--red-600)',
+                700: 'var(--red-700)',
+                900: 'var(--red-900)'
+            },
+            yellow: {
+                50: 'var(--yellow-50)',
+                100: 'var(--yellow-100)',
+                300: 'var(--yellow-300)',
+                500: 'var(--yellow-500)',
+                600: 'var(--yellow-600)',
+                700: 'var(--yellow-700)',
+                900: 'var(--yellow-900)'
+            },
+            blue: {
+                50: 'var(--blue-50)',
+                100: 'var(--blue-100)',
+                300: 'var(--blue-300)',
+                500: 'var(--blue-500)',
+                600: 'var(--blue-600)',
+                700: 'var(--blue-700)',
+                900: 'var(--blue-900)'
+            },
+            'light-transparent': {
+                5: 'var(--light-transparent-5)',
+                0: 'var(--light-transparent-0)',
+                15: 'var(--light-transparent-15)',
+                20: 'var(--light-transparent-20)',
+                50: 'var(--light-transparent-50)',
+                70: 'var(--light-transparent-70)'
+            },
+            'dark-transparent': {
+                5: 'var(--dark-transparent-5)',
+                0: 'var(--dark-transparent-0)',
+                15: 'var(--dark-transparent-15)',
+                20: 'var(--dark-transparent-20)',
+                50: 'var(--dark-transparent-50)',
+                70: 'var(--dark-transparent-70)'
+            },
+            'brand-transparent': {
+                5: 'var(--brand-transparent-5)',
+                0: 'var(--brand-transparent-0)',
+                15: 'var(--brand-transparent-15)',
+                20: 'var(--brand-transparent-20)',
+                50: 'var(--brand-transparent-50)',
+                70: 'var(--brand-transparent-70)'
+            }
+        },
+        textColor: {
+            DEFAULT: 'var(--neutral-900)',
+            subtle: {
+                DEFAULT: 'var(--neutral-900)',
+                light: 'var(--neutral-700)'
+            },
+            inverse: 'var(--neutral-0)',
+            'inverse-subtle': {
+                DEFAULT: 'var(--neutral-500)',
+                light: 'var(--neutral-600)'
+            },
+            'inverse-ghost': {
+                DEFAULT: 'var(--light-transparent-70)',
+                light: 'var(--light-transparent-50)'
+            },
+            interactive: 'var(--brand-500)',
+            'interactive-hover': 'var(--brand-700)',
+            'interactive-active': 'var(--brand-800)',
+            'interactive-inverse': 'var(--neutral-0)',
+            'interactive-inverse-hover': 'var(--neutral-50)',
+            'interactive-inverse-active': 'var(--neutral-200)',
+            success: 'var(--green-500)',
+            'success-hover': 'var(--green-600)',
+            'success-active': 'var(--green-700)',
+            'success-strong': 'var(--green-900)',
+            danger: 'var(--red-500)',
+            'danger-hover': 'var(--red-600)',
+            'danger-active': 'var(--red-700)',
+            'danger-strong': 'var(--red-900)',
+            warning: 'var(--yellow-500)',
+            'warning-hover': 'var(--yellow-600)',
+            'warning-active': 'var(--yellow-700)',
+            'warning-strong': 'var(--yellow-900)',
+            info: 'var(--blue-500)',
+            'info-hover': 'var(--blue-600)',
+            'info-active': 'var(--blue-700)',
+            'info-strong': 'var(--blue-900)'
+        },
+        backgroundColor: {
+            DEFAULT: 'var(--neutral-0)',
+            hover: 'var(--neutral-50)',
+            active: 'var(--neutral-200)',
+            subtle: 'var(--neutral-50)',
+            transparent: 'var(--light-transparent-10)',
+            'transparent-hover': 'var(--light-transparent-15)',
+            'transparent-active': 'var(--light-transparent-20)',
+            'transparent-subtle': 'var(--light-transparent-5)',
+            inverse: 'var(--neutral-900)',
+            'inverse-hover': 'var(--neutral-800)',
+            'inverse-active': 'var(--neutral-700)',
+            'inverse-subtle': 'var(--brand-50)',
+            highlighted: 'var(--brand-helpful-500)',
+            primary: 'var(--brand-500)',
+            'primary-hover': 'var(--brand-700)',
+            'primary-active': 'var(--brand-800)',
+            'primary-dark': 'var(--brand-900)',
+            'primary-transparent': 'var(--brand-transparent-10)',
+            'primary-transparent-hover': 'var(--brand-transparent-20)',
+            'primary-transparent-active': 'var(--brand-transparent-30)',
+            'success-subtle': 'var(--green-50)',
+            'success-subtle-hover': 'var(--green-100)',
+            'success-subtle-active': 'var(--green-300)',
+            success: 'var(--green-500)',
+            'success-hover': 'var(--green-600)',
+            'success-active': 'var(--green-700)',
+            'danger-subtle': 'var(--red-50)',
+            'danger-subtle-hover': 'var(--red-100)',
+            'danger-subtle-active': 'var(--red-300)',
+            danger: 'var(--red-500)',
+            'danger-hover': 'var(--red-600)',
+            'danger-active': 'var(--red-700)',
+            'warning-subtle': 'var(--yellow-50)',
+            'warning-subtle-hover': 'var(--yellow-100)',
+            'warning-subtle-active': 'var(--yellow-300)',
+            warning: 'var(--yellow-500)',
+            'warning-hover': 'var(--yellow-600)',
+            'warning-active': 'var(--yellow-700)',
+            'info-subtle': 'var(--blue-50)',
+            'info-subtle-hover': 'var(--blue-100)',
+            'info-subtle-active': 'var(--blue-300)',
+            info: 'var(--blue-500)',
+            'info-hover': 'var(--blue-600)',
+            'info-active': 'var(--blue-700)'
+        },
+        borderColor: {
+            DEFAULT: 'var(--neutral-200)',
+            subtle: 'var(--neutral-100)',
+            strong: 'var(--neutral-500)',
+            active: 'var(--neutral-900)',
+            inverse: 'var(--light-transparent-10)',
+            'inverse-subtle': 'var(--light-transparent-5)',
+            'inverse-strong': 'var(--light-transparent-15)',
+            'inverse-active': 'var(--neutral-0)',
+            danger: 'var(--red-500)',
+            'danger-hover': 'var(--red-600)',
+            'danger-active': 'var(--red-700)',
+            'danger-strong': 'var(--red-900)',
+            focus: 'var(--yellow-500)',
+            info: 'var(--blue-500)',
+            success: 'var(--green-500)',
+            primary: 'var(--brand-500)'
+        },
+        fontWeight: {
+            normal: 'var(--font-weight-normal)',
+            medium: 'var(--font-weight-medium)',
+            semibold: 'var(--font-weight-semibold)',
+            bold: 'var(--font-weight-bold)',
+            extrabold: 'var(--font-weight-extrabold)'
+        },
+        fontSize: {
+            xs: [
+                'var(--font-size-xs)',
+                {
+                    lineHeight: 'var(--line-height-xs)'
+                }
+            ],
+            s: [
+                'var(--font-size-s)',
+                {
+                    lineHeight: 'var(--line-height-s)'
+                }
+            ],
+            base: [
+                'var(--font-size-base)',
+                {
+                    lineHeight: 'var(--line-height-base)'
+                }
+            ],
+            lg: [
+                'var(--font-size-lg)',
+                {
+                    lineHeight: 'var(--line-height-lg)'
+                }
+            ],
+            xl: [
+                'var(--font-size-xl)',
+                {
+                    lineHeight: 'var(--line-height-xl)'
+                }
+            ],
+            '2xl': [
+                'var(--font-size-2xl)',
+                {
+                    lineHeight: 'var(--line-height-2xl)'
+                }
+            ],
+            '3xl': [
+                'var(--font-size-3xl)',
+                {
+                    lineHeight: 'var(--line-height-3xl)'
+                }
+            ],
+            '4xl': [
+                'var(--font-size-4xl)',
+                {
+                    lineHeight: 'var(--line-height-4xl)'
+                }
+            ],
+            '5xl': [
+                'var(--font-size-5xl)',
+                {
+                    lineHeight: 'var(--line-height-5xl)'
+                }
+            ],
+            '6xl': [
+                'var(--font-size-6xl)',
+                {
+                    lineHeight: 'var(--line-height-6xl)'
+                }
+            ]
+        },
+        borderRadius: {
+            0: 'var(--border-radius-0)',
+            2: 'var(--border-radius-2)',
+            4: 'var(--border-radius-4)',
+            6: 'var(--border-radius-6)',
+            8: 'var(--border-radius-8)',
+            12: 'var(--border-radius-12)',
+            16: 'var(--border-radius-16)',
+            24: 'var(--border-radius-24)',
+            40: 'var(--border-radius-40)',
+            full: 'var(--border-radius-full)'
+        },
+        boxShadow: {
+            DEFAULT: 'var(--box-shadow-md)',
+            s: 'var(--box-shadow-s)',
+            m: 'var(--box-shadow-m)',
+            l: 'var(--box-shadow-l)',
+            xl: 'var(--box-shadow-xl)',
+            's-inverse': 'var(--box-shadow-s-inverse)',
+            'm-inverse': 'var(--box-shadow-m-inverse)',
+            'l-inverse': 'var(--box-shadow-l-inverse)'
+        },
+        extend: {
+            fontFamily: {
+                sans: ['var(--font-sans)', ...fontFamily.sans]
+            },
+            keyframes: {
+                'accordion-down': {
+                    from: { height: '0' },
+                    to: { height: 'var(--radix-accordion-content-height)' }
+                },
+                'accordion-up': {
+                    from: { height: 'var(--radix-accordion-content-height)' },
+                    to: { height: '0' }
+                }
+            },
+            animation: {
+                'accordion-down': 'accordion-down 0.2s ease-out',
+                'accordion-up': 'accordion-up 0.2s ease-out'
+            }
+        }
+    },
+    plugins: [require('tailwindcss-animate')]
+};